feat: advanced prompt (#1330)

Co-authored-by: Joel <iamjoel007@gmail.com> Co-authored-by: JzoNg <jzongcode@gmail.com> Co-authored-by: Gillian97 <jinling.sunshine@gmail.com>
2023-10-12 23:14:28 +08:00
parent 42a5b3ec17
commit 5b9858a8a3
131 changed files with 5944 additions and 451 deletions
--- a/web/app/components/app/configuration/dataset-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/index.tsx
@@ -3,16 +3,13 @@ import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import { useBoolean } from 'ahooks'
-import { isEqual } from 'lodash-es'
 import produce from 'immer'
 import FeaturePanel from '../base/feature-panel'
 import OperationBtn from '../base/operation-btn'
 import CardItem from './card-item'
-import SelectDataSet from './select-dataset'
+import ParamsConfig from './params-config'
 import ContextVar from './context-var'
 import ConfigContext from '@/context/debug-configuration'
-import type { DataSet } from '@/models/datasets'
 import { AppType } from '@/types/app'

 const Icon = (
@@ -31,35 +28,12 @@ const DatasetConfig: FC = () => {
    setFormattingChanged,
    modelConfig,
    setModelConfig,
+    showSelectDataSet,
  } = useContext(ConfigContext)
  const selectedIds = dataSet.map(item => item.id)

  const hasData = dataSet.length > 0
-  const [isShowSelectDataSet, { setTrue: showSelectDataSet, setFalse: hideSelectDataSet }] = useBoolean(false)
-  const handleSelect = (data: DataSet[]) => {
-    if (isEqual(data.map(item => item.id), dataSet.map(item => item.id))) {
-      hideSelectDataSet()
-      return
-    }

-    setFormattingChanged(true)
-    if (data.find(item => !item.name)) { // has not loaded selected dataset
-      const newSelected = produce(data, (draft) => {
-        data.forEach((item, index) => {
-          if (!item.name) { // not fetched database
-            const newItem = dataSet.find(i => i.id === item.id)
-            if (newItem)
-              draft[index] = newItem
-          }
-        })
-      })
-      setDataSet(newSelected)
-    }
-    else {
-      setDataSet(data)
-    }
-    hideSelectDataSet()
-  }
  const onRemove = (id: string) => {
    setDataSet(dataSet.filter(item => item.id !== id))
    setFormattingChanged(true)
@@ -89,7 +63,12 @@ const DatasetConfig: FC = () => {
      className='mt-3'
      headerIcon={Icon}
      title={t('appDebug.feature.dataSet.title')}
-      headerRight={<OperationBtn type="add" onClick={showSelectDataSet} />}
+      headerRight={
+        <div className='flex items-center gap-1'>
+          <ParamsConfig />
+          <OperationBtn type="add" onClick={showSelectDataSet} />
+        </div>
+      }
      hasHeaderBottomBorder={!hasData}
      noBodySpacing
    >
@@ -120,14 +99,6 @@ const DatasetConfig: FC = () => {
        />
      )}

-      {isShowSelectDataSet && (
-        <SelectDataSet
-          isShow={isShowSelectDataSet}
-          onClose={hideSelectDataSet}
-          selectedIds={selectedIds}
-          onSelect={handleSelect}
-        />
-      )}
    </FeaturePanel>
  )
 }
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@@ -0,0 +1,181 @@
+'use client'
+import type { FC } from 'react'
+import { memo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import cn from 'classnames'
+import { HelpCircle, Settings04 } from '@/app/components/base/icons/src/vender/line/general'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Tooltip from '@/app/components/base/tooltip-plus'
+import Slider from '@/app/components/base/slider'
+import Switch from '@/app/components/base/switch'
+import ConfigContext from '@/context/debug-configuration'
+
+// TODO
+const PARAMS_KEY = [
+  'top_k',
+  'score_threshold',
+]
+const PARAMS = {
+  top_k: {
+    default: 2,
+    step: 1,
+    min: 1,
+    max: 10,
+  },
+  score_threshold: {
+    default: 0.7,
+    step: 0.01,
+    min: 0,
+    max: 1,
+  },
+} as any
+
+export type IParamItemProps = {
+  id: string
+  name: string
+  tip: string
+  value: number
+  enable: boolean
+  step?: number
+  min?: number
+  max: number
+  onChange: (key: string, value: number) => void
+  onSwitchChange: (key: string, enable: boolean) => void
+}
+
+const ParamItem: FC<IParamItemProps> = ({ id, name, tip, step = 0.1, min = 0, max, value, enable, onChange, onSwitchChange }) => {
+  return (
+    <div>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center">
+          {id === 'score_threshold' && (
+            <Switch
+              size='md'
+              defaultValue={enable}
+              onChange={async (val) => {
+                onSwitchChange(id, val)
+              }}
+            />
+          )}
+          <span className="mx-1 text-gray-800 text-[13px] leading-[18px] font-medium">{name}</span>
+          <Tooltip popupContent={<div className="w-[200px]">{tip}</div>}>
+            <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+          </Tooltip>
+        </div>
+        <div className="flex items-center"></div>
+      </div>
+      <div className="mt-2 flex items-center justify-between">
+        <div className="flex items-center h-7">
+          <div className="w-[148px]">
+            <Slider
+              disabled={!enable}
+              value={max < 5 ? value * 100 : value}
+              min={min < 1 ? min * 100 : min}
+              max={max < 5 ? max * 100 : max}
+              onChange={value => onChange(id, value / (max < 5 ? 100 : 1))}
+            />
+          </div>
+        </div>
+        <div className="flex items-center">
+          <input disabled={!enable} type="number" min={min} max={max} step={step} className="block w-[48px] h-7 text-xs leading-[18px] rounded-lg border-0 pl-1 pl py-1.5 bg-gray-50 text-gray-900  placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-primary-600 disabled:opacity-60" value={value} onChange={(e) => {
+            const value = parseFloat(e.target.value)
+            if (value < min || value > max)
+              return
+
+            onChange(id, value)
+          }} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const ParamsConfig: FC = () => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const {
+    datasetConfigs,
+    setDatasetConfigs,
+  } = useContext(ConfigContext)
+
+  const handleParamChange = (key: string, value: number) => {
+    let notOutRangeValue = parseFloat(value.toFixed(2))
+    notOutRangeValue = Math.max(PARAMS[key].min, notOutRangeValue)
+    notOutRangeValue = Math.min(PARAMS[key].max, notOutRangeValue)
+    if (key === 'top_k') {
+      setDatasetConfigs({
+        ...datasetConfigs,
+        top_k: notOutRangeValue,
+      })
+    }
+    else if (key === 'score_threshold') {
+      setDatasetConfigs({
+        ...datasetConfigs,
+        [key]: {
+          enable: datasetConfigs.score_threshold.enable,
+          value: notOutRangeValue,
+        },
+      })
+    }
+  }
+
+  const handleSwitch = (key: string, enable: boolean) => {
+    if (key === 'top_k')
+      return
+
+    setDatasetConfigs({
+      ...datasetConfigs,
+      [key]: {
+        enable,
+        value: (datasetConfigs as any)[key].value,
+      },
+    })
+  }
+
+  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')}>
+          <Settings04 className="w-[14px] h-[14px]" />
+          <div className='text-xs font-medium'>
+            {t('appDebug.datasetConfig.params')}
+          </div>
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent style={{ zIndex: 50 }}>
+        <div className='w-[240px] p-4 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-lg space-y-3'>
+          {PARAMS_KEY.map((key: string) => {
+            const currentValue = key === 'top_k' ? datasetConfigs[key] : (datasetConfigs as any)[key].value
+            const currentEnableState = key === 'top_k' ? true : (datasetConfigs as any)[key].enable
+            return (
+              <ParamItem
+                key={key}
+                id={key}
+                name={t(`appDebug.datasetConfig.${key}`)}
+                tip={t(`appDebug.datasetConfig.${key}Tip`)}
+                {...PARAMS[key]}
+                value={currentValue}
+                enable={currentEnableState}
+                onChange={handleParamChange}
+                onSwitchChange={handleSwitch}
+              />
+            )
+          })}
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default memo(ParamsConfig)
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
@@ -94,6 +94,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
      isShow={isShow}
      onClose={onClose}
      className='w-[400px]'
+      wrapperClassName='!z-[101]'
      title={t('appDebug.feature.dataSet.selectTitle')}
    >
      {!loaded && (