File size: 3,687 Bytes
4304c6d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
'use client'

import produce from 'immer'
import React, { useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import type { OnFeaturesChange } from '../../types'
import {
  useFeatures,
  useFeaturesStore,
} from '../../hooks'
import RadioGroup from './radio-group'
import { TransferMethod } from '@/types/app'
import ParamItem from '@/app/components/base/param-item'

const MIN = 1
const MAX = 6
type ParamConfigContentProps = {
  onChange?: OnFeaturesChange
}
const ParamConfigContent = ({

  onChange,

}: ParamConfigContentProps) => {
  const { t } = useTranslation()
  const featuresStore = useFeaturesStore()
  const file = useFeatures(s => s.features.file)

  const transferMethod = useMemo(() => {
    if (!file?.image?.transfer_methods || file?.image.transfer_methods.length === 2)
      return TransferMethod.all

    return file.image.transfer_methods[0]
  }, [file?.image?.transfer_methods])

  const handleTransferMethodsChange = useCallback((value: TransferMethod) => {
    const {
      features,
      setFeatures,
    } = featuresStore!.getState()
    const newFeatures = produce(features, (draft) => {
      if (draft.file?.image) {
        if (value === TransferMethod.all)
          draft.file.image.transfer_methods = [TransferMethod.remote_url, TransferMethod.local_file]
        else
          draft.file.image.transfer_methods = [value]
      }
    })
    setFeatures(newFeatures)
    if (onChange)
      onChange(newFeatures)
  }, [featuresStore, onChange])

  const handleLimitsChange = useCallback((_key: string, value: number) => {
    if (!value)
      return

    const {
      features,
      setFeatures,
    } = featuresStore!.getState()
    const newFeatures = produce(features, (draft) => {
      if (draft.file?.image)
        draft.file.image.number_limits = value
    })
    setFeatures(newFeatures)
    if (onChange)
      onChange(newFeatures)
  }, [featuresStore, onChange])

  return (
    <div>

      <div>

        <div className='leading-6 text-base font-semibold text-gray-800'>{t('common.operation.settings')}</div>

        <div className='pt-3 space-y-6'>

          <div>

            <div className='mb-2 leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.uploadMethod')}</div>

            <RadioGroup

              className='space-x-3'

              options={[

                {

                  label: t('appDebug.vision.visionSettings.both'),

                  value: TransferMethod.all,

                },

                {

                  label: t('appDebug.vision.visionSettings.localUpload'),

                  value: TransferMethod.local_file,

                },

                {

                  label: t('appDebug.vision.visionSettings.url'),

                  value: TransferMethod.remote_url,

                },

              ]}

              value={transferMethod}

              onChange={handleTransferMethodsChange}

            />

          </div>

          <div>

            <ParamItem

              id='upload_limit'

              className=''

              name={t('appDebug.vision.visionSettings.uploadLimit')}

              noTooltip

              {...{

                default: 2,

                step: 1,

                min: MIN,

                max: MAX,

              }}

              value={file?.image?.number_limits || 3}

              enable={true}

              onChange={handleLimitsChange}

            />

          </div>

        </div>

      </div>

    </div>
  )
}

export default React.memo(ParamConfigContent)