267 lines
11 KiB
TypeScript
267 lines
11 KiB
TypeScript
import { type FC, useState, useEffect } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { useParams } from 'react-router-dom'
|
|
import { Row, Col, Space, Switch, Select, InputNumber, Slider, App, Form } from 'antd'
|
|
import clsx from 'clsx'
|
|
import Card from './components/Card'
|
|
import type { ConfigForm, Variable } from './types'
|
|
import { getMemoryExtractionConfig, updateMemoryExtractionConfig } from '@/api/memory'
|
|
import Markdown from '@/components/Markdown'
|
|
import { getModelList } from '@/api/models';
|
|
import type { Model } from '@/views/ModelManagement/types'
|
|
import { configList } from './constant'
|
|
import Result from './components/Result'
|
|
import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
|
|
|
|
const keys = [
|
|
// 'example',
|
|
'storageLayerModule',
|
|
'arrangementLayerModule'
|
|
]
|
|
|
|
const ConfigDesc: FC<{ config: Variable, className?: string }> = ({config, className}) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className={className}>
|
|
<Space size={8} className={clsx("rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 ")}>
|
|
{config.variableName && <span className="rb:font-regular">{t('memoryExtractionEngine.variableName')}: {config.variableName}</span>}
|
|
{config.control && <span className="rb:font-regular">{t('memoryExtractionEngine.control')}: {t(`memoryExtractionEngine.${config.control}`)}</span>}
|
|
{config.type && <span className="rb:font-regular">{t('memoryExtractionEngine.type')}: {config.type}</span>}
|
|
</Space>
|
|
{config.meaning && <div className={clsx("rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4 ")}>{t('memoryExtractionEngine.Meaning')}: {t(`memoryExtractionEngine.${config.meaning}`)}</div>}
|
|
</div>
|
|
)
|
|
}
|
|
const MemoryExtractionEngine: FC = () => {
|
|
const { t } = useTranslation();
|
|
const { message } = App.useApp();
|
|
const { id } = useParams()
|
|
const [expandedKeys, setExpandedKeys] = useState<string[]>(keys)
|
|
const [form] = Form.useForm<ConfigForm>()
|
|
const [modelForm] = Form.useForm()
|
|
const modelValues = Form.useWatch([], modelForm)
|
|
const values = Form.useWatch<ConfigForm>([], form)
|
|
const [loading, setLoading] = useState(false)
|
|
const [iterationPeriodDisabled, setIterationPeriodDisabled] = useState(false)
|
|
const [modelList, setModelList] = useState<Model[]>([])
|
|
|
|
useEffect(() => {
|
|
if (values?.reflexion_range === 'database') {
|
|
form.setFieldValue('iteration_period', 24)
|
|
setIterationPeriodDisabled(true)
|
|
} else {
|
|
setIterationPeriodDisabled(false)
|
|
}
|
|
}, [values])
|
|
|
|
const getModels = () => {
|
|
getModelList({ type: 'llm,chat', pagesize: 100, page: 1 })
|
|
.then(res => {
|
|
const response = res as { items: Model[] }
|
|
setModelList(response.items)
|
|
})
|
|
}
|
|
|
|
const getConfig = () => {
|
|
if (!id) {
|
|
return
|
|
}
|
|
getMemoryExtractionConfig(id).then(res => {
|
|
const response = res as ConfigForm
|
|
const initialValues: ConfigForm = {
|
|
...response,
|
|
t_name_strict: Number(response.t_name_strict || 0),
|
|
t_type_strict: Number(response.t_type_strict || 0),
|
|
t_overall: Number(response.t_overall || 0),
|
|
}
|
|
// setData(initialValues)
|
|
form.setFieldsValue(initialValues)
|
|
modelForm.setFieldsValue({
|
|
llm_id: response.llm_id,
|
|
})
|
|
})
|
|
}
|
|
useEffect(() => {
|
|
if (id) {
|
|
getConfig()
|
|
getModels()
|
|
}
|
|
}, [id])
|
|
|
|
const handleExpand = (key: string) => {
|
|
const newKeys = expandedKeys.includes(key) ? expandedKeys.filter(item => item !== key) : [...expandedKeys, key]
|
|
|
|
setExpandedKeys(newKeys)
|
|
}
|
|
const handleSave = () => {
|
|
if (!id) {
|
|
return
|
|
}
|
|
console.log('values', values)
|
|
setLoading(true)
|
|
updateMemoryExtractionConfig({
|
|
...values,
|
|
...modelValues,
|
|
config_id: id,
|
|
}).then(() => {
|
|
message.success(t('common.saveSuccess'))
|
|
})
|
|
.finally(() => {
|
|
setLoading(false)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div className="rb:text-[24px] rb:font-semibold rb:leading-8 rb:mb-2">{t('memoryExtractionEngine.title')}</div>
|
|
<div className="rb:text-[#5B6167] rb:leading-5 rb:mb-6">{t('memoryExtractionEngine.subTitle')}</div>
|
|
|
|
<Row gutter={[16, 16]}>
|
|
<Col span={12}>
|
|
<Form form={modelForm}>
|
|
<Form.Item
|
|
label={t('memoryExtractionEngine.model')}
|
|
name="llm_id"
|
|
>
|
|
<Select
|
|
placeholder={t('common.pleaseSelect')}
|
|
fieldNames={{
|
|
label: 'name',
|
|
value: 'id',
|
|
}}
|
|
options={modelList}
|
|
/>
|
|
</Form.Item>
|
|
</Form>
|
|
</Col>
|
|
</Row>
|
|
<Card
|
|
type="example"
|
|
title={t('memoryExtractionEngine.example')}
|
|
expanded={expandedKeys.includes('example')}
|
|
handleExpand={handleExpand}
|
|
>
|
|
{expandedKeys.includes('example') &&
|
|
<div className="rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:leading-5">
|
|
<Markdown content={t('memoryExtractionEngine.exampleText')} />
|
|
</div>
|
|
}
|
|
</Card>
|
|
<Row gutter={[16, 16]} className="rb:mt-4">
|
|
<Col span={14}>
|
|
<Form
|
|
form={form}
|
|
>
|
|
<Space direction="vertical" size={16} style={{ width: '100%' }}>
|
|
{configList.map((item, index) => (
|
|
<Card
|
|
type={item.type}
|
|
title={t(`memoryExtractionEngine.${item.type}`)}
|
|
key={index}
|
|
expanded={expandedKeys.includes(item.type)}
|
|
handleExpand={handleExpand}
|
|
>
|
|
<Space size={20} direction="vertical" style={{width: '100%'}}>
|
|
{item.data.map(vo => (
|
|
<div
|
|
key={vo.title}
|
|
className={clsx(
|
|
`rb:p-[16px_24px] rb:rounded-lg`,
|
|
'rb:border rb:border-[#DFE4ED]',
|
|
{
|
|
'rb:shadow-[inset_4px_0px_0px_0px_#155EEF]': index % 2 === 0,
|
|
'rb:shadow-[inset_4px_0px_0px_0px_#369F21]': index % 2 !== 0,
|
|
}
|
|
)}
|
|
>
|
|
<div className="rb:text-[16px] rb:font-medium rb:leading-5.5">{t(`memoryExtractionEngine.${vo.title}`)}</div>
|
|
<div className="rb:mt-1 rb:text-[12px] rb:text-[#5B6167] rb:font-regular rb:leading-4">{t(`memoryExtractionEngine.${vo.title}SubTitle`)}</div>
|
|
|
|
{vo.list.map(config => (
|
|
<div key={config.label}>
|
|
{config.control === 'button' &&
|
|
<SwitchFormItem
|
|
title={<>-{t(`memoryExtractionEngine.${config.label}`)}</>}
|
|
name={config.variableName}
|
|
desc={<ConfigDesc config={config} className="rb:ml-2" />}
|
|
className="rb:mt-6"
|
|
/>
|
|
}
|
|
{config.control === 'select' &&
|
|
<>
|
|
<div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
|
|
-{t(`memoryExtractionEngine.${config.label}`)}
|
|
</div>
|
|
<div className="rb:pl-2">
|
|
<Form.Item
|
|
name={config.variableName}
|
|
>
|
|
<Select
|
|
disabled={config.variableName === 'iteration_period' && iterationPeriodDisabled}
|
|
options={config.options ? config.options.map(item => ({ ...item, label: t(`memoryExtractionEngine.${item.label}`) })) : []}
|
|
/>
|
|
</Form.Item>
|
|
<ConfigDesc config={config} className="rb:-mt-4!" />
|
|
</div>
|
|
</>
|
|
}
|
|
{config.control === 'slider' &&
|
|
<>
|
|
<div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
|
|
-{t(`memoryExtractionEngine.${config.label}`)}
|
|
</div>
|
|
<div className="rb:pl-2">
|
|
<ConfigDesc config={config} className="rb:mb-2.5" />
|
|
<Form.Item
|
|
name={config.variableName}
|
|
>
|
|
<Slider
|
|
style={{ margin: '0' }}
|
|
min={config.min || 0}
|
|
max={config.max || 1}
|
|
step={config.step || 0.01}
|
|
/>
|
|
</Form.Item>
|
|
<div className="rb:flex rb:items-center rb:justify-between rb:text-[#5B6167] rb:leading-5 rb:mt-[-26px]">
|
|
{config.min || 0}
|
|
<span>{t('memoryExtractionEngine.CurrentValue')}: {values?.[config.variableName as keyof ConfigForm]}</span>
|
|
</div>
|
|
</div>
|
|
</>
|
|
}
|
|
{config.control === 'inputNumber' &&
|
|
<>
|
|
<div className="rb:text-[14px] rb:font-medium rb:leading-5 rb:mt-6 rb:mb-2">
|
|
-{t(`memoryExtractionEngine.${config.label}`)}
|
|
</div>
|
|
<div className="rb:pl-2">
|
|
<Form.Item
|
|
name={config.variableName}
|
|
>
|
|
<InputNumber min={config.min || 0} style={{ width: '100%' }} placeholder={t('common.pleaseEnter')} />
|
|
</Form.Item>
|
|
<ConfigDesc config={config} className="rb:-mt-4!" />
|
|
</div>
|
|
</>
|
|
}
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</Space>
|
|
</Card>
|
|
))}
|
|
</Space>
|
|
</Form>
|
|
</Col>
|
|
<Col span={10}>
|
|
<Result
|
|
loading={loading}
|
|
handleSave={handleSave}
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
</>
|
|
)
|
|
}
|
|
export default MemoryExtractionEngine |