119 lines
3.6 KiB
TypeScript
119 lines
3.6 KiB
TypeScript
import CheckboxField from '@/components/seal-form/checkbox-field';
|
|
import SealInputNumber from '@/components/seal-form/input-number';
|
|
import SealInput from '@/components/seal-form/seal-input';
|
|
import { useIntl } from '@umijs/max';
|
|
import { Form } from 'antd';
|
|
import { useMemo } from 'react';
|
|
import { backendOptionsMap } from '../config/backend-parameters';
|
|
import { useFormContext } from '../config/form-context';
|
|
import { FormData } from '../config/types';
|
|
|
|
const KVCacheForm = () => {
|
|
const intl = useIntl();
|
|
const form = Form.useFormInstance();
|
|
const { onValuesChange, backendOptions } = useFormContext();
|
|
const kvCacheEnabled = Form.useWatch(['extended_kv_cache', 'enabled'], form);
|
|
const backend = Form.useWatch('backend', form);
|
|
|
|
const handleOnChange = async (e: any) => {
|
|
if (e.target.checked) {
|
|
form.setFieldsValue({
|
|
extended_kv_cache: {
|
|
enabled: true,
|
|
chunk_size: 256,
|
|
max_local_cpu_size: 10,
|
|
remote_url: ''
|
|
}
|
|
});
|
|
}
|
|
await new Promise((resolve) => {
|
|
setTimeout(resolve, 200);
|
|
});
|
|
onValuesChange?.({}, form.getFieldsValue());
|
|
};
|
|
|
|
const builtInBackend = useMemo(() => {
|
|
const currentBackend = backendOptions.find(
|
|
(item) => item.value === backend
|
|
);
|
|
|
|
return (
|
|
currentBackend?.isBuiltIn &&
|
|
[backendOptionsMap.SGLang, backendOptionsMap.vllm].includes(
|
|
backend as string
|
|
)
|
|
);
|
|
}, [backend, backendOptions]);
|
|
|
|
return (
|
|
<>
|
|
<div style={{ paddingBottom: 22 }}>
|
|
<Form.Item<FormData>
|
|
data-field="extended_kv_cache.enabled"
|
|
name={['extended_kv_cache', 'enabled']}
|
|
valuePropName="checked"
|
|
style={{ padding: '0 10px', marginBottom: 0 }}
|
|
extra={
|
|
!builtInBackend && (
|
|
<span
|
|
dangerouslySetInnerHTML={{
|
|
__html: intl.formatMessage({ id: 'models.form.kvCache.tips' })
|
|
}}
|
|
></span>
|
|
)
|
|
}
|
|
>
|
|
<CheckboxField
|
|
description={intl.formatMessage({
|
|
id: 'models.form.kvCache.tips2'
|
|
})}
|
|
disabled={!builtInBackend}
|
|
onChange={handleOnChange}
|
|
label={intl.formatMessage({ id: 'models.form.extendedkvcache' })}
|
|
></CheckboxField>
|
|
</Form.Item>
|
|
</div>
|
|
{kvCacheEnabled && (
|
|
<>
|
|
<Form.Item<FormData>
|
|
name={['extended_kv_cache', 'max_local_cpu_size']}
|
|
>
|
|
<SealInputNumber
|
|
label={intl.formatMessage({ id: 'models.form.maxCPUSize' })}
|
|
min={0}
|
|
step={1}
|
|
precision={0}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item<FormData> name={['extended_kv_cache', 'chunk_size']}>
|
|
<SealInputNumber
|
|
label={intl.formatMessage({ id: 'models.form.chunkSize' })}
|
|
min={0}
|
|
step={1}
|
|
/>
|
|
</Form.Item>
|
|
<Form.Item<FormData> name={['extended_kv_cache', 'remote_url']}>
|
|
<SealInput.Input
|
|
description={
|
|
<span
|
|
dangerouslySetInnerHTML={{
|
|
__html: intl.formatMessage({
|
|
id: 'models.form.remoteURL.tips'
|
|
})
|
|
}}
|
|
></span>
|
|
}
|
|
label={intl.formatMessage({ id: 'models.form.remoteURL' })}
|
|
min={0}
|
|
step={1}
|
|
placeholder="protocol://host:port"
|
|
/>
|
|
</Form.Item>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default KVCacheForm;
|