feat: [frontend] support vision (#1518)

Co-authored-by: Joel <iamjoel007@gmail.com>

web/app/components/app/configuration/config-vision/index.tsx

@@ -0,0 +1,60 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import Panel from '../base/feature-panel'
+import ParamConfig from './param-config'
+import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
+import Tooltip from '@/app/components/base/tooltip'
+import Switch from '@/app/components/base/switch'
+import { Eye } from '@/app/components/base/icons/src/vender/solid/general'
+import ConfigContext from '@/context/debug-configuration'
+
+const ConfigVision: FC = () => {
+  const { t } = useTranslation()
+  const {
+    isShowVisionConfig,
+    visionConfig,
+    setVisionConfig,
+  } = useContext(ConfigContext)
+
+  if (!isShowVisionConfig)
+    return null
+
+  return (<>
+    <Panel
+      className="mt-4"
+      headerIcon={
+        <Eye className='w-4 h-4 text-[#6938EF]'/>
+      }
+      title={
+        <div className='flex items-center'>
+          <div className='mr-1'>{t('appDebug.vision.name')}</div>
+          <Tooltip htmlContent={<div className='w-[180px]' >
+            {t('appDebug.vision.description')}
+          </div>} selector='config-vision-tooltip'>
+            <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+          </Tooltip>
+        </div>
+      }
+      headerRight={
+        <div className='flex items-center'>
+          <ParamConfig />
+          <div className='ml-4 mr-3 w-[1px] h-3.5 bg-gray-200'></div>
+          <Switch
+            defaultValue={visionConfig.enabled}
+            onChange={value => setVisionConfig({
+              ...visionConfig,
+              enabled: value,
+            })}
+            size='md'
+          />
+        </div>
+      }
+      noBodySpacing
+    />
+  </>
+  )
+}
+export default React.memo(ConfigVision)

web/app/components/app/configuration/config-vision/param-config-content.tsx

@@ -0,0 +1,132 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import RadioGroup from './radio-group'
+import ConfigContext from '@/context/debug-configuration'
+import { Resolution, TransferMethod } from '@/types/app'
+import ParamItem from '@/app/components/base/param-item'
+import Tooltip from '@/app/components/base/tooltip'
+import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
+
+const MIN = 1
+const MAX = 6
+const ParamConfigContent: FC = () => {
+  const { t } = useTranslation()
+
+  const {
+    visionConfig,
+    setVisionConfig,
+  } = useContext(ConfigContext)
+
+  const transferMethod = (() => {
+    if (!visionConfig.transfer_methods || visionConfig.transfer_methods.length === 2)
+      return TransferMethod.all
+
+    return visionConfig.transfer_methods[0]
+  })()
+
+  return (
+    <div>
+      <div>
+        <div className='leading-6 text-base font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.title')}</div>
+        <div className='pt-3 space-y-6'>
+          <div>
+            <div className='mb-2 flex items-center  space-x-1'>
+              <div className='leading-[18px] text-[13px] font-semibold text-gray-800'>{t('appDebug.vision.visionSettings.resolution')}</div>
+              <Tooltip htmlContent={<div className='w-[180px]' >
+                {t('appDebug.vision.visionSettings.resolutionTooltip').split('\n').map(item => (
+                  <div key={item}>{item}</div>
+                ))}
+              </div>} selector='config-resolution-tooltip'>
+                <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+              </Tooltip>
+            </div>
+            <RadioGroup
+              className='space-x-3'
+              options={[
+                {
+                  label: t('appDebug.vision.visionSettings.high'),
+                  value: Resolution.high,
+                },
+                {
+                  label: t('appDebug.vision.visionSettings.low'),
+                  value: Resolution.low,
+                },
+              ]}
+              value={visionConfig.detail}
+              onChange={(value: Resolution) => {
+                setVisionConfig({
+                  ...visionConfig,
+                  detail: value,
+                })
+              }}
+            />
+          </div>
+          <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={(value: TransferMethod) => {
+                if (value === TransferMethod.all) {
+                  setVisionConfig({
+                    ...visionConfig,
+                    transfer_methods: [TransferMethod.remote_url, TransferMethod.local_file],
+                  })
+                  return
+                }
+                setVisionConfig({
+                  ...visionConfig,
+                  transfer_methods: [value],
+                })
+              }}
+            />
+          </div>
+          <div>
+            <ParamItem
+              id='upload_limit'
+              className=''
+              name={t('appDebug.vision.visionSettings.uploadLimit')}
+              noTooltip
+              {...{
+                default: 2,
+                step: 1,
+                min: MIN,
+                max: MAX,
+              }}
+              value={visionConfig.number_limits}
+              enable={true}
+              onChange={(_key: string, value: number) => {
+                if (!value)
+                  return
+
+                setVisionConfig({
+                  ...visionConfig,
+                  number_limits: value,
+                })
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(ParamConfigContent)

web/app/components/app/configuration/config-vision/param-config.tsx

@@ -0,0 +1,41 @@
+'use client'
+import type { FC } from 'react'
+import { memo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import ParamConfigContent from './param-config-content'
+import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+const ParamsConfig: FC = () => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: 4,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <div className={cn('flex items-center rounded-md h-7 px-3 space-x-1 text-gray-700 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
+          <Settings01 className='w-3.5 h-3.5 ' />
+          <div className='ml-1 leading-[18px] text-xs font-medium '>{t('appDebug.vision.settings')}</div>
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent style={{ zIndex: 50 }}>
+        <div className='w-[412px] p-4 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg space-y-3'>
+          <ParamConfigContent />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default memo(ParamsConfig)

web/app/components/app/configuration/config-vision/radio-group/index.tsx

@@ -0,0 +1,40 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from 'classnames'
+import s from './style.module.css'
+
+type OPTION = {
+  label: string
+  value: any
+}
+
+type Props = {
+  className?: string
+  options: OPTION[]
+  value: any
+  onChange: (value: any) => void
+}
+
+const RadioGroup: FC<Props> = ({
+  className = '',
+  options,
+  value,
+  onChange,
+}) => {
+  return (
+    <div className={cn(className, 'flex')}>
+      {options.map(item => (
+        <div
+          key={item.value}
+          className={cn(s.item, item.value === value && s.checked)}
+          onClick={() => onChange(item.value)}
+        >
+          <div className={s.radio}></div>
+          <div className='text-[13px] font-medium text-gray-900'>{item.label}</div>
+        </div>
+      ))}
+    </div>
+  )
+}
+export default React.memo(RadioGroup)

web/app/components/app/configuration/config-vision/radio-group/style.module.css

@@ -0,0 +1,24 @@
+.item {
+  @apply grow flex items-center h-8 px-2.5 rounded-lg bg-gray-25 border border-gray-100 cursor-pointer space-x-2;
+}
+
+.item:hover {
+  background-color: #ffffff;
+  border-color: #B2CCFF;
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}
+
+.item.checked {
+  background-color: #ffffff;
+  border-color: #528BFF;
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
+}
+
+.radio {
+  @apply w-4 h-4 border-[2px] border-gray-200 rounded-full;
+}
+
+.item.checked .radio {
+  border-width: 5px;
+  border-color: #155eef;
+}