root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: playground params form

Browse Source
This commit is contained in:
jialin
2026-03-17 16:35:55 +08:00
committed by jialin
parent 9447088f89
commit d389b035b7
30 changed files with 1299 additions and 951 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/routes.ts
+11
View File
@@ -74,6 +74,17 @@ export default [
defaultIcon: 'icon-audio1',
component: './playground/speech/index'
}
// {
// name: 'video',
// title: 'Video',
// path: '/playground/video',
// key: 'video',
// icon: 'icon-video-outline',
// hideInMenu: false,
// selectedIcon: 'icon-video-filled02',
// defaultIcon: 'icon-video-outline',
// component: './playground/video'
// }
]
},
{
src/pages/playground/chat/forms/index.tsx
+81
View File
@@ -0,0 +1,81 @@
import { Form } from 'antd';
import React, { forwardRef, useImperativeHandle } from 'react';
import ModelSelect from '../../components/model-select';
import ParamsFields from '../../components/params-fields';
import { FormContext } from '../../config/form-context';
import { ParamsSchema } from '../../config/types';
type ParamsSettingsProps = {
ref?: any;
parametersTitle?: React.ReactNode;
showModelSelector?: boolean;
modelList?: Global.BaseOption<string>[];
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
onModelChange?: (model: string) => void;
onFinish?: (values: any) => void;
onFinishFailed?: (errorInfo: any) => void;
initialValues?: Record<string, any>; // for initial values when switch model, aviod update values from setParams
meta?: Record<string, any>;
paramsConfig?: ParamsSchema[];
};
const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
(
{
onValuesChange,
onModelChange,
onFinish,
onFinishFailed,
parametersTitle,
initialValues,
modelList,
showModelSelector = true,
meta,
paramsConfig
},
ref
) => {
const [form] = Form.useForm();
useImperativeHandle(ref, () => ({
form,
getFieldsValue: form.getFieldsValue,
setFieldsValue: form.setFieldsValue
}));
const handleOnFinish = (values: any) => {
onFinish?.(values);
};
const handleOnFinishFailed = (errorInfo: any) => {
onFinishFailed?.(errorInfo);
};
return (
<FormContext.Provider
value={{
meta,
modelList: modelList || [],
onValuesChange: onValuesChange,
onModelChange: onModelChange
}}
>
<Form
form={form}
onValuesChange={onValuesChange}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
initialValues={initialValues}
>
<ModelSelect
title={parametersTitle}
showModelSelector={showModelSelector}
></ModelSelect>
<ParamsFields paramsConfig={paramsConfig}></ParamsFields>
</Form>
</FormContext.Provider>
);
}
);
export default ParamsSettings;
src/pages/playground/chat/index.tsx
+2 -2
View File
@@ -16,7 +16,7 @@ import { queryModelsList } from '../apis';
import MultipleChat from '../components/multiple-chat';
import ViewCodeButtons from '../components/view-code-buttons';
import '../style/play-ground.less';
import GroundChat from './page';
import SingleChat from './single-chat';
const Playground: React.FC = () => {
const intl = useIntl();
@@ -65,7 +65,7 @@ const Playground: React.FC = () => {
label: 'Chat',
icon: <MessageOutlined />,
children: (
<GroundChat ref={groundLeftRef} modelList={modelList}></GroundChat>
<SingleChat ref={groundLeftRef} modelList={modelList}></SingleChat>
)
},
{
src/pages/playground/chat/page.tsx → src/pages/playground/chat/single-chat.tsx
+15 -30
View File
@@ -8,7 +8,6 @@ import React, {
useState
} from 'react';
import { CHAT_API } from '../apis';
import DynamicParams from '../components/dynamic-params';
import MessageInput from '../components/message-input';
import MessageContent from '../components/multiple-chat/message-content';
import SystemMessage from '../components/multiple-chat/system-message';
@@ -16,13 +15,14 @@ import ReferenceParams from '../components/reference-params';
import RightContainer from '../components/right-container';
import ViewCommonCode from '../components/view-common-code';
import { Roles, generateMessagesByListContent } from '../config';
import { MessageItem, MessageItemAction } from '../config/types';
import { MessageItem } from '../config/types';
import { LLM_METAKEYS, llmInitialValues } from '../hooks/config';
import useChatCompletion from '../hooks/use-chat-completion';
import { useInitLLmMeta } from '../hooks/use-init-meta';
import { useInitLLmMeta } from '../hooks/use-init-llm';
import '../style/ground-llm.less';
import '../style/system-message-wrap.less';
import { generateLLMCode } from '../view-code/llm';
import DataForm from './forms';
import { ChatParamsConfig } from './params-config';
interface MessageProps {
@@ -37,12 +37,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
const [show, setShow] = useState(false);
const [collapse, setCollapse] = useState(false);
const scroller = useRef<any>(null);
const [actions, setActions] = useState<MessageItemAction[]>([
'upload',
'delete',
'copy',
'edit'
]);
const {
submitMessage,
@@ -54,23 +48,15 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
messageList,
loading
} = useChatCompletion(scroller);
const {
handleOnValuesChange,
formRef,
paramsConfig,
initialValues,
parameters
} = useInitLLmMeta(
{ modelList, isChat: true },
{
defaultValues: {
...llmInitialValues,
model: modelList[0]?.value
},
defaultParamsConfig: ChatParamsConfig,
metaKeys: LLM_METAKEYS
}
);
const { handleOnValuesChange, formRef, paramsConfig, parameters } =
useInitLLmMeta(
{ modelList, isChat: true },
{
defaultValues: llmInitialValues,
defaultParamsConfig: ChatParamsConfig,
metaKeys: LLM_METAKEYS
}
);
useImperativeHandle(ref, () => {
return {
@@ -146,7 +132,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
setMessageList={setMessageList}
editable={true}
loading={loading}
actions={actions}
actions={['upload', 'delete', 'copy', 'edit']}
/>
{loading && (
<Spin size="small">
@@ -180,13 +166,12 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
</div>
</div>
<RightContainer collapsed={collapse}>
<DynamicParams
<DataForm
ref={formRef}
onValuesChange={handleOnValuesChange}
paramsConfig={paramsConfig}
initialValues={initialValues}
initialValues={llmInitialValues}
modelList={modelList}
showModelSelector={true}
/>
</RightContainer>
<ViewCommonCode
src/pages/playground/components/dynamic-params.tsx
-202
View File
@@ -1,202 +0,0 @@
import FieldComponent from '@/components/seal-form/field-component';
import SealSelect from '@/components/seal-form/seal-select';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import React, {
forwardRef,
useCallback,
useEffect,
useId,
useImperativeHandle
} from 'react';
import { FormContext } from '../config/form-context';
import { ParamsSchema } from '../config/types';
type ParamsSettingsProps = {
ref?: any;
parametersTitle?: React.ReactNode;
showModelSelector?: boolean;
modelList?: Global.BaseOption<string>[];
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
onModelChange?: (model: string) => void;
paramsConfig?: ParamsSchema[];
initialValues?: Record<string, any>; // for initial values when switch model, aviod update values from setParams
extra?: React.ReactNode;
watchFields?: string[];
formFields?: string;
meta?: Record<string, any>;
};
const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
(
{
onValuesChange,
onModelChange,
parametersTitle,
initialValues,
paramsConfig,
modelList,
showModelSelector = true,
extra,
meta
},
ref
) => {
const intl = useIntl();
const [form] = Form.useForm();
const formId = useId();
useImperativeHandle(ref, () => ({
form
}));
useEffect(() => {
form.setFieldsValue({
...initialValues
});
}, [initialValues]);
const handleOnFinish = (values: any) => {
console.log('handleOnFinish', values);
};
const handleOnFinishFailed = (errorInfo: any) => {
console.log('handleOnFinishFailed', errorInfo);
};
const handleOnModelChange = (model: string) => {
onModelChange?.(model);
};
const handleValuesChange = useCallback(
(changedValues: any, allValues: any) => {
const normalizedValues = Object.fromEntries(
Object.entries(changedValues).map(([key, value]: [string, any]) => [
key,
value?.target?.checked ?? value?.target?.value ?? value
])
);
form.setFieldsValue(normalizedValues);
console.log('handleValuesChange', normalizedValues, allValues);
onValuesChange?.(normalizedValues, {
...allValues,
...normalizedValues
});
},
[onValuesChange]
);
const renderDescription = useCallback(
(description: any) => {
let desc = description?.text;
if (description?.isLocalized) {
desc = intl.formatMessage({ id: description?.text });
}
if (description?.html) {
return <div dangerouslySetInnerHTML={{ __html: desc }}></div>;
}
return desc;
},
[intl]
);
const renderFields = () => {
if (!paramsConfig?.length) {
return null;
}
const values = form.getFieldsValue();
const formValues = _.isEmpty(values) ? initialValues || {} : values;
return paramsConfig?.map((item: ParamsSchema) => {
return (
<Form.Item
name={item.name}
rules={item.rules}
key={item.name}
{...item.formItemAttrs}
>
<FieldComponent
disabled={
item.disabledConfig
? item.disabledConfig?.when?.(formValues)
: item.disabled
}
description={renderDescription(item.description)}
onChange={null}
{..._.omit(item, [
'name',
'rules',
'formItemAttrs',
'dependencies',
'disabledConfig',
'description'
])}
></FieldComponent>
</Form.Item>
);
});
};
return (
<FormContext.Provider
value={{ meta, onValuesChange: handleValuesChange }}
>
<Form
name={formId}
form={form}
onValuesChange={handleValuesChange}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
initialValues={initialValues}
>
<div>
{
<>
<h3 className="m-b-20 font-size-14 line-24 font-500">
{parametersTitle || (
<span>
{intl.formatMessage({ id: 'playground.parameters' })}
</span>
)}
</h3>
{showModelSelector && (
<Form.Item
name="model"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{
name: intl.formatMessage({ id: 'playground.model' })
}
)
}
]}
>
<SealSelect
description={intl.formatMessage({
id: 'playground.model.noavailable.tips2'
})}
onChange={handleOnModelChange}
showSearch={true}
options={modelList}
label={intl.formatMessage({ id: 'playground.model' })}
></SealSelect>
</Form.Item>
)}
</>
}
{renderFields()}
{extra}
</div>
</Form>
</FormContext.Provider>
);
}
);
export default ParamsSettings;
src/pages/playground/components/model-select.tsx
+52
View File
@@ -0,0 +1,52 @@
import SealSelect from '@/components/seal-form/seal-select';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
import { useFormContext } from '../config/form-context';
const ModelSelect: React.FC<{
title?: React.ReactNode;
showModelSelector?: boolean;
}> = ({ title, showModelSelector = true }) => {
const intl = useIntl();
const { onModelChange, modelList } = useFormContext();
return (
<>
<h3 className="m-b-20 font-size-14 line-24 font-500">
{title || (
<span>{intl.formatMessage({ id: 'playground.parameters' })}</span>
)}
</h3>
{showModelSelector && (
<Form.Item
name="model"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.select'
},
{
name: intl.formatMessage({ id: 'playground.model' })
}
)
}
]}
>
<SealSelect
description={intl.formatMessage({
id: 'playground.model.noavailable.tips2'
})}
onChange={onModelChange}
showSearch={true}
options={modelList}
label={intl.formatMessage({ id: 'playground.model' })}
></SealSelect>
</Form.Item>
)}
</>
);
};
export default ModelSelect;
src/pages/playground/components/multiple-chat/model-item.tsx
+9 -15
View File
@@ -24,16 +24,16 @@ import React, {
} from 'react';
import 'simplebar-react/dist/simplebar.min.css';
import { CHAT_API } from '../../apis';
import DataForm from '../../chat/forms';
import { ChatParamsConfig } from '../../chat/params-config';
import { Roles, generateMessagesByListContent } from '../../config';
import CompareContext from '../../config/compare-context';
import { MessageItem, ModelSelectionItem } from '../../config/types';
import { LLM_METAKEYS, llmInitialValues } from '../../hooks/config';
import useChatCompletion from '../../hooks/use-chat-completion';
import { useInitLLmMeta } from '../../hooks/use-init-meta';
import { useInitLLmMeta } from '../../hooks/use-init-llm';
import '../../style/model-item.less';
import { generateLLMCode } from '../../view-code/llm';
import DynamicParams from '../dynamic-params';
import ReferenceParams from '../reference-params';
import ViewCommonCode from '../view-common-code';
import MessageContent from './message-content';
@@ -62,10 +62,8 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
handleOnValuesChange,
handleOnModelChange,
setParams,
setInitialValues,
formRef,
paramsConfig,
initialValues,
parameters
} = useInitLLmMeta(
{
@@ -73,10 +71,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
modelList: modelFullList
},
{
defaultValues: {
...llmInitialValues,
model: model
},
defaultValues: llmInitialValues,
defaultParamsConfig: ChatParamsConfig,
metaKeys: LLM_METAKEYS
}
@@ -87,6 +82,8 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
const [show, setShow] = useState(false);
const scroller = useRef<any>(null);
console.log('render model item', formRef);
const {
submitMessage,
handleAddNewMessage,
@@ -217,11 +214,8 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
...globalParams
};
});
setInitialValues((prev: any) => {
return {
...prev,
...globalParams
};
formRef.current?.setFieldsValue({
...globalParams
});
}, [globalParams]);
@@ -313,11 +307,11 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef((props, ref) => {
style={{ paddingInline: '24px' }}
oppositeTheme={true}
>
<DynamicParams
<DataForm
ref={formRef}
onValuesChange={OnValuesChange}
paramsConfig={paramsConfig}
initialValues={initialValues}
initialValues={parameters}
showModelSelector={false}
parametersTitle={
<div className="flex-center flex-between">
src/pages/playground/components/params-fields.tsx
+107
View File
@@ -0,0 +1,107 @@
import FieldComponent from '@/components/seal-form/field-component';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
import React from 'react';
import { useFormContext } from '../config/form-context';
import { ParamsSchema } from '../config/types';
interface ParamsFieldsProps {
paramsConfig?: ParamsSchema[];
}
const ParamsFields: React.FC<ParamsFieldsProps> = ({ paramsConfig = [] }) => {
const intl = useIntl();
const form = Form.useFormInstance();
const { meta } = useFormContext();
const renderDescription = (description: any) => {
let desc = description?.text;
if (description?.isLocalized) {
desc = intl.formatMessage({ id: description?.text });
}
if (description?.html) {
return <div dangerouslySetInnerHTML={{ __html: desc }}></div>;
}
return desc;
};
return paramsConfig?.map((item: ParamsSchema) => {
const comProps = {
...item.attrs,
label: item.label.isLocalized
? intl.formatMessage({ id: item.label.text })
: item.label.text
};
// if no disabledConfig, render directly
if (!item.disabledConfig) {
return (
<Form.Item
name={item.name}
rules={item.rules}
key={item.name}
dependencies={item.dependencies}
{...item.formItemAttrs}
>
<FieldComponent
{...comProps}
disabled={item.disabled}
description={renderDescription(item.description)}
onChange={null}
{..._.omit(item, [
'name',
'rules',
'formItemAttrs',
'dependencies',
'disabledConfig',
'description'
])}
/>
</Form.Item>
);
}
// if has disabledConfig, wrap with another Form.Item to listen the dependencies change
return (
<Form.Item
noStyle
shouldUpdate={(prevValues, currentValues) => {
return (
item.disabledConfig?.depends.some(
(dep) => prevValues[dep] !== currentValues[dep]
) ?? false
);
}}
key={item.name}
>
{() => (
<Form.Item
name={item.name}
rules={item.rules}
dependencies={item.dependencies}
{...item.formItemAttrs}
>
<FieldComponent
{...comProps}
disabled={item.disabledConfig?.when(form.getFieldsValue())}
description={renderDescription(item.description)}
onChange={null}
{..._.omit(item, [
'name',
'rules',
'formItemAttrs',
'dependencies',
'disabledConfig',
'description'
])}
{...item.initAttrs?.(meta)}
/>
</Form.Item>
)}
</Form.Item>
);
});
};
export default ParamsFields;
src/pages/playground/config/form-context.ts
+2
View File
@@ -2,7 +2,9 @@ import { createContext, useContext } from 'react';
export interface FormContextProps {
meta?: Record<string, any>;
modelList: Global.BaseOption<string, Global.EmptyObject>[];
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
onModelChange?: (model: string) => void;
}
/**
src/pages/playground/config/params-config.ts
-67
View File
@@ -31,30 +31,6 @@ export const imageSizeOptions: {
{ label: '2048x2048(1:1)', value: '2048x2048', width: 2048, height: 2048 }
];
export const RealtimeParamsConfig: ParamsSchema[] = [
{
type: 'Select',
name: 'language',
options: [
{ label: 'Auto', value: 'auto' },
{ label: 'English', value: 'en' },
{ label: '中文', value: 'zh' },
{ label: '日本語', value: 'ja' },
{ label: 'Français', value: 'fr' },
{ label: 'Deutsch', value: 'de' }
],
label: {
text: 'playground.params.language',
isLocalized: true
},
rules: [
{
required: true
}
]
}
];
export const ImageParamsConfig: ParamsSchema[] = [
{
type: 'InputNumber',
@@ -403,49 +379,6 @@ const advancedConfig = [
}
];
export const ImageAdvancedParamsConfig: ParamsSchema[] = [
{
type: 'InputNumber',
name: 'seed',
label: {
text: 'playground.image.params.seed',
isLocalized: true
},
attrs: {
min: 0
},
dependencies: ['random_seed'],
disabledConfig: {
depends: ['random_seed'],
when: (values: Record<string, any>): boolean => values?.random_seed
},
rules: [
{
required: false
}
]
},
{
type: 'Checkbox',
name: 'random_seed',
label: {
text: 'playground.image.params.randomseed',
isLocalized: true
},
style: {
marginBottom: 20
},
formItemAttrs: {
noStyle: true
},
rules: [
{
required: false
}
]
}
];
export const CustomSizeConfig: ParamsSchema[] = [
{
type: 'Slider',
src/pages/playground/embedding/forms/advance-config.tsx
+25
View File
@@ -0,0 +1,25 @@
import SealInputNumber from '@/components/seal-form/input-number';
import { Form } from 'antd';
import _ from 'lodash';
import React from 'react';
import { useFormContext } from '../../config/form-context';
const AdvanceConfig: React.FC = () => {
const { meta: modelMeta } = useFormContext();
return (
<>
{modelMeta?.n_ctx && modelMeta?.n_slot && (
<Form.Item name="max_tokens">
<SealInputNumber
disabled
label="Max Tokens"
value={_.floor(_.divide(modelMeta?.n_ctx, modelMeta?.n_slot))}
></SealInputNumber>
</Form.Item>
)}
</>
);
};
export default AdvanceConfig;
src/pages/playground/embedding/forms/index.tsx
+78
View File
@@ -0,0 +1,78 @@
import { Form } from 'antd';
import React, { forwardRef, useImperativeHandle } from 'react';
import ModelSelect from '../../components/model-select';
import { FormContext } from '../../config/form-context';
import AdvanceConfig from './advance-config';
type ParamsSettingsProps = {
ref?: any;
parametersTitle?: React.ReactNode;
showModelSelector?: boolean;
modelList?: Global.BaseOption<string>[];
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
onModelChange?: (model: string) => void;
onFinish?: (values: any) => void;
onFinishFailed?: (errorInfo: any) => void;
initialValues?: Record<string, any>; // for initial values when switch model, aviod update values from setParams
meta?: Record<string, any>;
};
const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
(
{
onValuesChange,
onModelChange,
onFinish,
onFinishFailed,
parametersTitle,
initialValues,
modelList,
showModelSelector = true,
meta
},
ref
) => {
const [form] = Form.useForm();
useImperativeHandle(ref, () => ({
form,
getFieldsValue: form.getFieldsValue,
setFieldsValue: form.setFieldsValue
}));
const handleOnFinish = (values: any) => {
onFinish?.(values);
};
const handleOnFinishFailed = (errorInfo: any) => {
onFinishFailed?.(errorInfo);
};
return (
<FormContext.Provider
value={{
meta,
modelList: modelList || [],
onValuesChange: onValuesChange,
onModelChange: onModelChange
}}
>
<Form
form={form}
onValuesChange={onValuesChange}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
initialValues={initialValues}
>
<ModelSelect
title={parametersTitle}
showModelSelector={showModelSelector}
></ModelSelect>
<AdvanceConfig></AdvanceConfig>
</Form>
</FormContext.Provider>
);
}
);
export default ParamsSettings;
src/pages/playground/embedding/page.tsx
+21 -30
View File
@@ -13,6 +13,7 @@ import {
SendOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Button, Checkbox, Form, Segmented, Spin, Tabs, Tooltip } from 'antd';
import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css';
@@ -26,7 +27,6 @@ import React, {
useState
} from 'react';
import { EMBEDDING_API, handleEmbedding } from '../apis';
import DynamicParams from '../components/dynamic-params';
import FileList from '../components/file-list';
import InputList from '../components/input-list';
import RightContainer from '../components/right-container';
@@ -36,10 +36,11 @@ import { extractErrorMessage } from '../config';
import { embeddingSamples } from '../config/samples';
import { LLM_METAKEYS } from '../hooks/config';
import useEmbeddingWorker from '../hooks/use-embedding-worker';
import { useInitLLmMeta } from '../hooks/use-init-meta';
import { useInitLLmMeta } from '../hooks/use-init-llm';
import '../style/ground-llm.less';
import '../style/rerank.less';
import { generateEmbeddingCode } from '../view-code/embedding';
import DataForm from './forms';
interface MessageProps {
modelList: Global.BaseOption<string>[];
@@ -103,25 +104,18 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
const { initialize, updateScrollerPosition: updateDocumentScrollerPosition } =
useOverlayScroller();
const {
handleOnValuesChange,
formRef,
paramsConfig,
initialValues,
parameters,
modelMeta,
formFields
} = useInitLLmMeta(
{
modelList,
isChat: true
},
{
defaultValues: {},
defaultParamsConfig: [],
metaKeys: LLM_METAKEYS
}
);
const { handleOnValuesChange, formRef, parameters, modelMeta } =
useInitLLmMeta(
{
modelList,
isChat: true
},
{
defaultValues: {},
defaultParamsConfig: [],
metaKeys: LLM_METAKEYS
}
);
useImperativeHandle(ref, () => {
return {
@@ -143,14 +137,14 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
return generateEmbeddingCode({
api: EMBEDDING_API,
parameters: {
..._.pick(parameters, ['model', ..._.split(formFields, ',')]),
...parameters,
input: [
...textList.map((item) => item.text).filter((item) => item),
...fileList.map((item) => item.text).filter((item) => item)
]
}
});
}, [parameters, formFields, textList, fileList]);
}, [parameters, textList, fileList]);
const inputEmpty = useMemo(() => {
const list = [...textList, ...fileList];
@@ -441,15 +435,14 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
];
}, [outputHeight, collapse, scatterData, embeddingData]);
const onValuesChange = useCallback(
const onValuesChange = useMemoizedFn(
(changeValues: Record<string, any>, allValues: Record<string, any>) => {
if (changeValues.model) {
setScatterData([]);
setTokenResult(null);
}
handleOnValuesChange(changeValues, allValues);
},
[]
}
);
useEffect(() => {
@@ -710,13 +703,11 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
</div>
</div>
<RightContainer collapsed={collapse}>
<DynamicParams
<DataForm
ref={formRef}
onValuesChange={onValuesChange}
paramsConfig={paramsConfig}
initialValues={initialValues}
initialValues={{}}
modelList={modelList}
extra={renderExtra}
/>
</RightContainer>
<ViewCommonCode
src/pages/playground/hooks/use-init-meta.ts → src/pages/playground/hooks/use-init-image.ts
+2 -170
View File
@@ -3,7 +3,6 @@ import {
ImageCountConfig,
ImageSizeConfig,
ImageconstExtraConfig,
ImageAdvancedParamsConfig as ImgAdvancedParamsConfig,
SizeOption,
imageSizeOptions as imageSizeList
} from '@/pages/playground/config/params-config';
@@ -17,8 +16,7 @@ import {
IMG_METAKEYS,
advancedFieldsDefaultValus,
imgInitialValues,
openaiCompatibleFieldsDefaultValus,
precisionTwoKeys
openaiCompatibleFieldsDefaultValus
} from './config';
interface MessageProps {
@@ -29,171 +27,12 @@ interface MessageProps {
ref?: any;
}
interface InitMetaOptions {
metaKeys?: Record<string, any> | string[];
defaultValues?: Record<string, any>;
defaultParamsConfig?: ParamsSchema[];
}
// init not image meta, for params form
export const useInitLLmMeta = (
props: MessageProps,
options: InitMetaOptions
) => {
const { modelList, model, isChat } = props;
const {
metaKeys = {},
defaultValues = {},
defaultParamsConfig = []
} = options;
const formRef = useRef<any>(null);
const [searchParams] = useSearchParams();
const [modelMeta, setModelMeta] = useState<any>({});
const [initialValues, setInitialValues] = useState<any>({
...defaultValues,
model: ''
});
const [parameters, setParams] = useState<any>({
model: ''
});
const [paramsConfig, setParamsConfig] =
useState<ParamsSchema[]>(defaultParamsConfig);
const defaultModel = useMemo(() => {
if (isChat) {
return searchParams.get('model') || model || modelList?.[0]?.value;
}
// use for multiple chat
return model;
}, [model, modelList, isChat]);
const getMaxTokens = (meta: any) => {
const { max_model_len, n_ctx, n_slot, max_total_tokens } = meta || {};
let max_tokens: number = 0;
if (n_ctx && n_slot) {
max_tokens = _.floor(_.divide(n_ctx, n_slot));
} else if (max_model_len) {
max_tokens = max_model_len;
} else if (max_total_tokens) {
max_tokens = max_total_tokens;
}
return {
max_tokens: max_tokens || 16 * 1024,
defaultFormValue: max_tokens ? _.floor(_.divide(max_tokens, 2)) : 1024
};
};
const extractLLMMeta = (meta: any) => {
const towKeys = new Set(precisionTwoKeys);
const modelMeta = meta || {};
const modelMetaValue = _.pick(modelMeta, _.keys(metaKeys));
const obj = Object.entries(metaKeys).reduce((acc: any, [key, value]) => {
const val = modelMetaValue[key];
if (_.hasIn(modelMetaValue, key)) {
acc[value] = towKeys.has(key) ? _.round(val, 2) : val;
}
return acc;
}, {});
const tokensRes = getMaxTokens(obj);
return {
form: _.merge({}, defaultValues, {
..._.omit(obj, [
'n_ctx',
'n_slot',
'max_model_len',
'max_total_tokens'
]),
seed: obj.seed === -1 ? null : obj.seed,
max_tokens: tokensRes.defaultFormValue
}),
meta: {
...obj,
max_tokens: tokensRes.max_tokens
}
};
};
const formFields = useMemo(() => {
const fields = paramsConfig?.map((item) => item.name);
return fields?.join(',');
}, [paramsConfig]);
const handleOnModelChange = useMemoizedFn((val: string) => {
if (!val) return;
const model = modelList.find((item) => item.value === val);
const { form: initialData, meta } = extractLLMMeta(model?.meta);
setModelMeta(meta);
setInitialValues({
...initialData,
model: val
});
setParams({
...initialData,
model: val
});
const config = defaultParamsConfig.map((item) => {
return {
...item,
attrs:
item.name === 'max_tokens'
? { ...item.attrs, max: meta.max_tokens }
: {
...item.attrs
}
};
});
setParamsConfig(config);
});
const handleOnValuesChange = useMemoizedFn(
(changeValues: Record<string, any>, allValues: Record<string, any>) => {
if (changeValues.model) {
handleOnModelChange(changeValues.model);
return;
} else {
setParams(allValues);
setInitialValues(allValues);
}
}
);
useEffect(() => {
if (defaultModel && modelList.length) {
handleOnModelChange(defaultModel);
}
}, [defaultModel, modelList.length]);
return {
extractLLMMeta,
handleOnModelChange,
handleOnValuesChange,
setModelMeta,
setInitialValues,
setParams,
setParamsConfig,
formRef,
paramsConfig,
initialValues,
parameters,
modelMeta,
formFields
};
};
export const useInitImageMeta = (
props: MessageProps,
options: { type: string }
) => {
const { modelList } = props;
const ImageAdvancedParamsConfig =
options.type === 'edit'
? ImgAdvancedParamsConfig
: ImgAdvancedParamsConfig.filter((item) => item.name !== 'strength');
const ImageAdvancedParamsConfig: ParamsSchema[] = [];
const form = useRef<any>(null);
const [searchParams] = useSearchParams();
@@ -380,11 +219,6 @@ export const useInitImageMeta = (
});
};
const formFields = useMemo(() => {
const fields = paramsConfig?.map((item) => item.name);
return fields?.join(',');
}, [paramsConfig]);
const handleOnModelChange = useMemoizedFn((val: string) => {
if (!val) return;
const model = modelList.find((item) => item.value === val);
@@ -488,7 +322,6 @@ export const useInitImageMeta = (
setParamsConfig,
form,
modelMeta,
formFields,
paramsConfig,
initialValues,
parameters,
@@ -498,7 +331,6 @@ export const useInitImageMeta = (
imageSizeOptions,
openaiCompatibleFieldsDefaultValus,
advancedFieldsDefaultValus,
ImageAdvancedParamsConfig,
imgInitialValues,
ImageCountConfig,
ImageSizeConfig,
src/pages/playground/hooks/use-init-llm.ts
+171
View File
@@ -0,0 +1,171 @@
import { useSearchParams } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import _ from 'lodash';
import { useEffect, useRef, useState } from 'react';
import { ParamsSchema } from '../config/types';
import { precisionTwoKeys } from './config';
interface MessageProps {
modelList: Global.BaseOption<string>[];
model?: string;
loaded?: boolean;
isChat?: boolean;
ref?: any;
}
interface InitMetaOptions {
metaKeys?: Record<string, any> | string[];
defaultValues?: Record<string, any>;
defaultParamsConfig?: ParamsSchema[];
}
// init not image meta, for params form
export const useInitLLmMeta = (
props: MessageProps,
options: InitMetaOptions
) => {
const { modelList, model, isChat } = props;
const {
metaKeys = {},
defaultValues = {},
defaultParamsConfig = []
} = options;
const formRef = useRef<any>(null);
const [searchParams] = useSearchParams();
const [modelMeta, setModelMeta] = useState<any>({});
const [parameters, setParams] = useState<any>({
model: ''
});
const [paramsConfig, setParamsConfig] =
useState<ParamsSchema[]>(defaultParamsConfig);
const initializedRef = useRef(false);
const getMaxTokens = (meta: any) => {
const { max_model_len, n_ctx, n_slot, max_total_tokens } = meta || {};
let max_tokens: number = 0;
if (n_ctx && n_slot) {
max_tokens = _.floor(_.divide(n_ctx, n_slot));
} else if (max_model_len) {
max_tokens = max_model_len;
} else if (max_total_tokens) {
max_tokens = max_total_tokens;
}
return {
max_tokens: max_tokens || 16 * 1024,
defaultFormValue: max_tokens ? _.floor(_.divide(max_tokens, 2)) : 1024
};
};
const extractLLMMeta = (meta: any) => {
const towKeys = new Set(precisionTwoKeys);
const modelMeta = meta || {};
const modelMetaValue = _.pick(modelMeta, _.keys(metaKeys));
const obj = Object.entries(metaKeys).reduce((acc: any, [key, value]) => {
const val = modelMetaValue[key];
if (_.hasIn(modelMetaValue, key)) {
acc[value] = towKeys.has(key) ? _.round(val, 2) : val;
}
return acc;
}, {});
const tokensRes = getMaxTokens(obj);
return {
form: _.merge({}, defaultValues, {
..._.omit(obj, [
'n_ctx',
'n_slot',
'max_model_len',
'max_total_tokens'
]),
seed: obj.seed === -1 ? null : obj.seed,
max_tokens: tokensRes.defaultFormValue
}),
meta: {
...obj,
max_tokens: tokensRes.max_tokens
}
};
};
const setFormValues = (values: Record<string, any>) => {
formRef.current?.setFieldsValue(values);
};
const handleOnModelChange = useMemoizedFn((val: string) => {
if (!val) return;
const model = modelList.find((item) => item.value === val);
const { form: initialData, meta } = extractLLMMeta(model?.meta);
setModelMeta(meta);
setFormValues({
...initialData,
model: val
});
setParams({
...initialData,
model: val
});
// update max_tokens in paramsConfig when model change, because max_tokens value depend on model meta
const hasMaxTokensField = defaultParamsConfig.some(
(item) => item.name === 'max_tokens'
);
if (!hasMaxTokensField) {
const config = defaultParamsConfig.map((item) => {
return {
...item,
attrs:
item.name === 'max_tokens'
? { ...item.attrs, max: meta.max_tokens }
: {
...item.attrs
}
};
});
setParamsConfig(config);
}
});
const handleOnValuesChange = useMemoizedFn(
(changeValues: Record<string, any>, allValues: Record<string, any>) => {
if (changeValues.model) {
return;
}
setParams(allValues);
setFormValues(allValues);
}
);
useEffect(() => {
if (initializedRef.current || !modelList.length) {
return;
}
let defaultModel = model;
if (isChat) {
defaultModel =
searchParams.get('model') || model || modelList?.[0]?.value;
}
if (defaultModel && modelList.length && !initializedRef.current) {
handleOnModelChange(defaultModel);
initializedRef.current = true;
}
}, [modelList, isChat, model]);
return {
extractLLMMeta,
handleOnModelChange,
handleOnValuesChange,
setModelMeta,
setParams,
setParamsConfig,
paramsConfig,
formRef,
parameters,
modelMeta
};
};
src/pages/playground/images/create.tsx
+3 -6
View File
@@ -18,16 +18,15 @@ import React, {
useState
} from 'react';
import { CREAT_IMAGE_API } from '../apis';
import DynamicParams from '../components/dynamic-params';
import MessageInput from '../components/message-input';
import RightContainer from '../components/right-container';
import ViewCommonCode from '../components/view-common-code';
import { useInitImageMeta } from '../hooks/use-init-meta';
import { useInitImageMeta } from '../hooks/use-init-image';
import useTextImage from '../hooks/use-text-image';
import '../style/ground-llm.less';
import '../style/system-message-wrap.less';
import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
import DataForm from './forms';
interface MessageProps {
modelList: Global.BaseOption<string>[];
loaded?: boolean;
@@ -48,7 +47,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
handleToggleParamsStyle,
setParams,
form,
formFields,
paramsConfig,
initialValues,
parameters,
@@ -264,9 +262,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
</div>
</div>
<RightContainer collapsed={collapse}>
<DynamicParams
<DataForm
ref={form}
formFields={formFields}
onValuesChange={handleOnValuesChange}
paramsConfig={paramsConfig}
initialValues={initialValues}
src/pages/playground/images/edit.tsx
+3 -5
View File
@@ -21,16 +21,16 @@ import React, {
useState
} from 'react';
import { EDIT_IMAGE_API } from '../apis';
import DynamicParams from '../components/dynamic-params';
import MessageInput from '../components/message-input';
import RightContainer from '../components/right-container';
import ViewCommonCode from '../components/view-common-code';
import { EDIT_IMAGE_ACCEPT, scaleImageSize } from '../config';
import { useInitImageMeta } from '../hooks/use-init-meta';
import { useInitImageMeta } from '../hooks/use-init-image';
import useTextImage from '../hooks/use-text-image';
import '../style/ground-llm.less';
import '../style/system-message-wrap.less';
import { generateImageCode, generateOpenaiImageCode } from '../view-code/image';
import DataForm from './forms';
interface MessageProps {
modelList: Global.BaseOption<string>[];
@@ -75,7 +75,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setParamsConfig,
form,
modelMeta,
formFields,
paramsConfig,
initialValues,
parameters,
@@ -529,9 +528,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
</div>
}
>
<DynamicParams
<DataForm
ref={form}
formFields={formFields}
onValuesChange={handleOnValuesChange}
paramsConfig={paramsConfig}
initialValues={initialValues}
src/pages/playground/images/forms/index.tsx
+125
View File
@@ -0,0 +1,125 @@
import CheckboxField from '@/components/seal-form/checkbox-field';
import SealInputNumber from '@/components/seal-form/input-number';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import ModelSelect from '../../components/model-select';
import ParamsFields from '../../components/params-fields';
import { FormContext } from '../../config/form-context';
import { ParamsSchema } from '../../config/types';
type ParamsSettingsProps = {
ref?: any;
parametersTitle?: React.ReactNode;
showModelSelector?: boolean;
modelList?: Global.BaseOption<string>[];
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
onModelChange?: (model: string) => void;
onFinish?: (values: any) => void;
onFinishFailed?: (errorInfo: any) => void;
initialValues?: Record<string, any>; // for initial values when switch model, aviod update values from setParams
meta?: Record<string, any>;
paramsConfig?: ParamsSchema[];
};
const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
(
{
onValuesChange,
onModelChange,
onFinish,
onFinishFailed,
parametersTitle,
initialValues,
modelList,
showModelSelector = true,
meta,
paramsConfig
},
ref
) => {
const intl = useIntl();
const [form] = Form.useForm();
const randomSeed = Form.useWatch('random_seed', form);
useImperativeHandle(ref, () => ({
form,
getFieldsValue: form.getFieldsValue,
setFieldsValue: form.setFieldsValue
}));
const handleOnFinish = (values: any) => {
onFinish?.(values);
};
const handleOnFinishFailed = (errorInfo: any) => {
onFinishFailed?.(errorInfo);
};
const handleOnValuesChange = (
changeValues: any,
allValues: Record<string, any>
) => {
const normalizedValues = Object.fromEntries(
Object.entries(changeValues).map(([key, value]: [string, any]) => [
key,
value?.target?.checked ?? value?.target?.value ?? value
])
);
form.setFieldsValue(normalizedValues);
onValuesChange?.(normalizedValues, {
...allValues,
...normalizedValues
});
};
useEffect(() => {
form.setFieldsValue(initialValues);
}, [initialValues]);
return (
<FormContext.Provider
value={{
meta,
modelList: modelList || [],
onValuesChange: onValuesChange,
onModelChange: onModelChange
}}
>
<Form
form={form}
onValuesChange={handleOnValuesChange}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
initialValues={initialValues}
>
<ModelSelect
title={parametersTitle}
showModelSelector={showModelSelector}
></ModelSelect>
<ParamsFields paramsConfig={paramsConfig}></ParamsFields>
<Form.Item name="seed">
<SealInputNumber
disabled={randomSeed}
label={intl.formatMessage({ id: 'playground.image.params.seed' })}
></SealInputNumber>
</Form.Item>
<Form.Item
name="random_seed"
style={{ marginBottom: 20 }}
noStyle
valuePropName="checked"
>
<CheckboxField
label={intl.formatMessage({
id: 'playground.image.params.randomseed'
})}
></CheckboxField>
</Form.Item>
</Form>
</FormContext.Provider>
);
}
);
export default ParamsSettings;
src/pages/playground/rerank/forms/advance-config.tsx
+25
View File
@@ -0,0 +1,25 @@
import SealInputNumber from '@/components/seal-form/input-number';
import { Form } from 'antd';
import _ from 'lodash';
import React from 'react';
import { useFormContext } from '../../config/form-context';
const AdvanceConfig: React.FC = () => {
const { meta: modelMeta } = useFormContext();
return (
<>
{modelMeta?.n_ctx && modelMeta?.n_slot && (
<Form.Item name="max_tokens">
<SealInputNumber
disabled
label="Max Tokens"
value={_.floor(_.divide(modelMeta?.n_ctx, modelMeta?.n_slot))}
></SealInputNumber>
</Form.Item>
)}
</>
);
};
export default AdvanceConfig;
src/pages/playground/rerank/forms/index.tsx
+81
View File
@@ -0,0 +1,81 @@
import { Form } from 'antd';
import React, { forwardRef, useImperativeHandle } from 'react';
import ModelSelect from '../../components/model-select';
import ParamsFields from '../../components/params-fields';
import { FormContext } from '../../config/form-context';
import { fieldConfig } from '../params-config';
import AdvanceConfig from './advance-config';
type ParamsSettingsProps = {
ref?: any;
parametersTitle?: React.ReactNode;
showModelSelector?: boolean;
modelList?: Global.BaseOption<string>[];
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
onModelChange?: (model: string) => void;
onFinish?: (values: any) => void;
onFinishFailed?: (errorInfo: any) => void;
initialValues?: Record<string, any>; // for initial values when switch model, aviod update values from setParams
meta?: Record<string, any>;
};
const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
(
{
onValuesChange,
onModelChange,
onFinish,
onFinishFailed,
parametersTitle,
initialValues,
modelList,
showModelSelector = true,
meta
},
ref
) => {
const [form] = Form.useForm();
useImperativeHandle(ref, () => ({
form,
getFieldsValue: form.getFieldsValue,
setFieldsValue: form.setFieldsValue
}));
const handleOnFinish = (values: any) => {
onFinish?.(values);
};
const handleOnFinishFailed = (errorInfo: any) => {
onFinishFailed?.(errorInfo);
};
return (
<FormContext.Provider
value={{
meta,
modelList: modelList || [],
onValuesChange: onValuesChange,
onModelChange: onModelChange
}}
>
<Form
form={form}
onValuesChange={onValuesChange}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
initialValues={initialValues}
>
<ModelSelect
title={parametersTitle}
showModelSelector={showModelSelector}
></ModelSelect>
<AdvanceConfig></AdvanceConfig>
<ParamsFields paramsConfig={fieldConfig}></ParamsFields>
</Form>
</FormContext.Provider>
);
}
);
export default ParamsSettings;
src/pages/playground/rerank/page.tsx
+22 -75
View File
@@ -1,5 +1,4 @@
import AlertInfo from '@/components/alert-info';
import SealInputNumber from '@/components/seal-form/input-number';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import useRequestToken from '@/hooks/use-request-token';
import {
@@ -9,16 +8,7 @@ import {
SendOutlined
} from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import {
Button,
Checkbox,
Form,
Input,
Spin,
Tag,
Tooltip,
Typography
} from 'antd';
import { Button, Checkbox, Input, Spin, Tag, Tooltip, Typography } from 'antd';
import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css';
import React, {
@@ -32,21 +22,21 @@ import React, {
} from 'react';
import styled from 'styled-components';
import { RERANKER_API, rerankerQuery } from '../apis';
import DynamicParams from '../components/dynamic-params';
import InputList from '../components/input-list';
import RightContainer from '../components/right-container';
import TokenUsage from '../components/token-usage';
import ViewCommonCode from '../components/view-common-code';
import { extractErrorMessage } from '../config';
import { rerankerSamples } from '../config/samples';
import { ParamsSchema } from '../config/types';
import { LLM_METAKEYS } from '../hooks/config';
import { useInitLLmMeta } from '../hooks/use-init-meta';
import { useInitLLmMeta } from '../hooks/use-init-llm';
import '../style/ground-llm.less';
import '../style/rerank.less';
import '../style/system-message-wrap.less';
import { generateRerankCode } from '../view-code/rerank';
import DataForm from './forms';
import useRerankerResponse from './hooks/use-reranker-response';
import { fieldConfig } from './params-config';
const { Text } = Typography;
@@ -67,26 +57,6 @@ interface MessageProps {
ref?: any;
}
const fieldConfig: ParamsSchema[] = [
{
type: 'InputNumber',
name: 'top_n',
label: {
text: 'Top N',
isLocalized: false
},
attrs: {
min: 1
},
rules: [
{
required: true,
message: 'Top N is required'
}
]
}
];
const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
const { modelList } = props;
const { handleSGlangResponse } = useRerankerResponse();
@@ -146,25 +116,18 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
const { initialize, updateScrollerPosition: updateDocumentScrollerPosition } =
useOverlayScroller();
const {
handleOnValuesChange,
formRef,
paramsConfig,
initialValues,
parameters,
modelMeta,
formFields
} = useInitLLmMeta(
{
modelList,
isChat: true
},
{
defaultValues: { top_n: 3 },
defaultParamsConfig: fieldConfig,
metaKeys: LLM_METAKEYS
}
);
const { handleOnValuesChange, formRef, parameters, modelMeta } =
useInitLLmMeta(
{
modelList,
isChat: true
},
{
defaultValues: { top_n: 3 },
defaultParamsConfig: fieldConfig,
metaKeys: LLM_METAKEYS
}
);
useImperativeHandle(ref, () => {
return {
@@ -206,14 +169,14 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
return generateRerankCode({
api: RERANKER_API,
parameters: {
..._.pick(parameters, ['model', ..._.split(formFields, ',')]),
...parameters,
query: queryValue,
documents: [...textList, ...fileList]
.map((item) => item.text)
.filter((text) => text)
}
});
}, [parameters, formFields, queryValue, textList, fileList]);
}, [parameters, queryValue, textList, fileList]);
// [0.1, 1.0]
const normalizValue = (data: { min: number; max: number; value: number }) => {
@@ -453,21 +416,6 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
}
};
const renderExtra = useMemo(() => {
if (modelMeta?.n_ctx && modelMeta?.n_slot) {
return (
<Form.Item>
<SealInputNumber
disabled
label="Max Tokens"
value={_.floor(_.divide(modelMeta?.n_ctx, modelMeta?.n_slot))}
></SealInputNumber>
</Form.Item>
);
}
return null;
}, [modelMeta]);
const handleClearDocuments = () => {
setTextList([
{
@@ -637,14 +585,13 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
</div>
</div>
<RightContainer collapsed={collapse}>
<DynamicParams
<DataForm
ref={formRef}
onValuesChange={onValuesChange}
paramsConfig={paramsConfig}
initialValues={initialValues}
initialValues={{ top_n: 3 }}
modelList={modelList}
extra={renderExtra}
/>
meta={modelMeta}
></DataForm>
</RightContainer>
<ViewCommonCode
open={show}
src/pages/playground/rerank/params-config.ts
+21
View File
@@ -0,0 +1,21 @@
import { ParamsSchema } from '../config/types';
export const fieldConfig: ParamsSchema[] = [
{
type: 'InputNumber',
name: 'top_n',
label: {
text: 'Top N',
isLocalized: false
},
attrs: {
min: 1
},
rules: [
{
required: true,
message: 'Top N is required'
}
]
}
];
src/pages/playground/speech/forms/stt-form.tsx
+132
View File
@@ -0,0 +1,132 @@
import SealSelect from '@/components/seal-form/seal-select';
import { useIntl, useSearchParams } from '@umijs/max';
import { Form } from 'antd';
import React, {
forwardRef,
useEffect,
useImperativeHandle,
useRef,
useState
} from 'react';
import ModelSelect from '../../components/model-select';
import { defaultLanguages } from '../../config';
import { FormContext } from '../../config/form-context';
import { allLanguages } from '../../config/languages';
type ParamsSettingsProps = {
ref?: any;
modelList?: Global.BaseOption<string>[];
onFinish?: (values: any) => void;
onFinishFailed?: (errorInfo: any) => void;
updateParams: (values: Record<string, any>) => void;
};
const STTForm: React.FC<ParamsSettingsProps> = forwardRef(
({ onFinish, onFinishFailed, modelList, updateParams }, ref) => {
const intl = useIntl();
const [form] = Form.useForm();
const [meta, setModelMeta] = React.useState<Record<string, any>>({});
const [languageOptions, setLanguageOptions] = useState<
Global.BaseOption<string>[]
>([]);
const [searchParams] = useSearchParams();
const modelType = searchParams.get('type') || '';
const selectModel = searchParams.get('model')
? modelType === 'stt' && searchParams.get('model')
: '';
const initializeRef = useRef<boolean>(false);
useImperativeHandle(ref, () => ({
form,
getFieldsValue: form.getFieldsValue,
setFieldsValue: form.setFieldsValue
}));
const handleOnFinish = (values: any) => {
onFinish?.(values);
};
const handleOnFinishFailed = (errorInfo: any) => {
onFinishFailed?.(errorInfo);
};
const updateLanguages = (meta: Record<string, any>) => {
const languages = meta?.languages || [];
if (languages.length === 0) {
return defaultLanguages;
}
const currentLanguage: { label: string; value: string }[] = [];
languages.forEach((langCode: string) => {
const langItem = allLanguages.find((item) => item.value === langCode);
if (langItem) {
currentLanguage.push(langItem);
}
});
setLanguageOptions(currentLanguage);
return currentLanguage;
};
const handleSelectModel = (model: string) => {
if (!model) return;
const selected = modelList?.find((item) => item.value === model);
setModelMeta(selected?.meta || {});
const languages = updateLanguages(selected?.meta || {});
const values = {
language: selected?.meta?.language || languages[0]?.value || 'auto',
model: model
};
updateParams(values);
form.setFieldsValue(values);
};
const handleOnValuesChange = (changedValues: any, allValues: any) => {
if (changedValues.model) {
return;
}
updateParams(allValues);
};
useEffect(() => {
if (initializeRef.current || !modelList?.length) return;
const defaultModel = selectModel || modelList?.[0]?.value || '';
handleSelectModel(defaultModel);
initializeRef.current = true;
}, [modelList, selectModel]);
return (
<FormContext.Provider
value={{
meta,
modelList: modelList || [],
onValuesChange: handleOnValuesChange,
onModelChange: handleSelectModel
}}
>
<Form
form={form}
onValuesChange={handleOnValuesChange}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
initialValues={{
model: '',
language: 'auto'
}}
>
<ModelSelect></ModelSelect>
<Form.Item name="language">
<SealSelect
label={intl.formatMessage({ id: 'playground.params.language' })}
options={languageOptions}
></SealSelect>
</Form.Item>
</Form>
</FormContext.Provider>
);
}
);
export default STTForm;
src/pages/playground/speech/form.tsx → src/pages/playground/speech/forms/tts-advance.tsx
+4 -2
View File
@@ -8,7 +8,7 @@ import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import React from 'react';
import styled from 'styled-components';
import { useFormContext } from '../config/form-context';
import { useFormContext } from '../../config/form-context';
const SuffixWrapper = styled.div.attrs({
className: 'suffix-wrapper'
@@ -36,7 +36,7 @@ const Container = styled.div`
}
`;
export const RefAudioFormItem: React.FC = () => {
const TTSAdvanceConfig: React.FC = () => {
const { getRuleMessage } = useAppUtils();
const { meta, onValuesChange } = useFormContext();
const form = Form.useFormInstance();
@@ -127,3 +127,5 @@ export const RefAudioFormItem: React.FC = () => {
</>
);
};
export default TTSAdvanceConfig;
src/pages/playground/speech/forms/tts-form.tsx
+202
View File
@@ -0,0 +1,202 @@
import AutoComplete from '@/components/seal-form/auto-complete';
import SealSelect from '@/components/seal-form/seal-select';
import CollapsePanel from '@/pages/_components/collapse-panel';
import { getLocale, useIntl, useSearchParams } from '@umijs/max';
import { useMemoizedFn } from 'ahooks';
import { Form } from 'antd';
import _ from 'lodash';
import React, {
forwardRef,
useEffect,
useImperativeHandle,
useState
} from 'react';
import ModelSelect from '../../components/model-select';
import ParamsFields from '../../components/params-fields';
import { FormContext } from '../../config/form-context';
import { TTSAdvancedParamsConfig } from '../params-config';
import AdvanceConfig from './tts-advance';
const MetaFields = [
'task_type',
'language',
'instructions',
'max_new_tokens',
'ref_audio'
];
type ParamsSettingsProps = {
ref?: any;
modelList?: Global.BaseOption<string>[];
onFinish?: (values: any) => void;
onFinishFailed?: (errorInfo: any) => void;
updatateParams: (values: Record<string, any>) => void;
};
const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
({ onFinish, onFinishFailed, updatateParams, modelList = [] }, ref) => {
const [searchParams] = useSearchParams();
const modelType = searchParams.get('type') || '';
const selectModel = searchParams.get('model')
? modelType === 'tts' && searchParams.get('model')
: '';
const locale = getLocale();
const intl = useIntl();
const [form] = Form.useForm();
const [activeKey, setActiveKey] = useState<string | string[]>(
'advanced_config'
);
const [vociceOptions, setVoiceOptions] = useState<
Global.BaseOption<string>[]
>([]);
const [meta, setModelMeta] = useState<Record<string, any>>({});
const initializeRef = React.useRef<boolean>(false);
useImperativeHandle(ref, () => ({
form,
getFieldsValue: form.getFieldsValue,
setFieldsValue: form.setFieldsValue
}));
const handleOnFinish = (values: any) => {
onFinish?.(values);
};
const handleOnFinishFailed = (errorInfo: any) => {
onFinishFailed?.(errorInfo);
};
const handleOnCollapse = (keys: string | string[]) => {
setActiveKey(keys);
};
const sortVoiceList = (
locale: string,
voiceDataList: Global.BaseOption<string>[]
) => {
const lang = locale === 'en-US' ? 'english' : 'chinese';
const list = voiceDataList.sort((a, b) => {
const aContains = a.value.toLowerCase().includes(lang) ? 1 : 0;
const bContains = b.value.toLowerCase().includes(lang) ? 1 : 0;
return bContains - aContains;
});
return list;
};
const updateVoiceOptions = (model: Global.BaseOption<string>) => {
const list = _.map(model?.meta?.voices || [], (item: any) => {
return {
label: item,
value: item
};
});
const newList = sortVoiceList(locale, list);
setVoiceOptions(newList);
return newList;
};
const handleSelectModel = useMemoizedFn(async (value: string) => {
if (!value) {
return;
}
const model = modelList.find((item) => item.value === value);
const newList = updateVoiceOptions(model!);
setModelMeta(model?.meta || {});
const values = {
..._.pick(model?.meta || {}, MetaFields),
task_type: model?.meta?.task_type,
model: value,
language: model?.meta?.languages?.[0] || '',
voice: newList[0]?.value
};
updatateParams(values);
form.setFieldsValue(values);
});
const handleOnValuesChange = (
changeValues: Record<string, any>,
allValues: Record<string, any>
) => {
if (changeValues.model) {
return;
}
updatateParams(allValues);
};
useEffect(() => {
if (initializeRef.current || !modelList.length) return;
const defaultModel = selectModel || modelList[0]?.value || '';
if (defaultModel && modelList.length) {
handleSelectModel(defaultModel);
initializeRef.current = true;
}
}, [selectModel, modelList.length]);
return (
<FormContext.Provider
value={{
meta,
modelList: modelList || [],
onValuesChange: handleOnValuesChange,
onModelChange: handleSelectModel
}}
>
<Form
form={form}
onValuesChange={handleOnValuesChange}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
initialValues={{
voice: '',
model: '',
response_format: 'mp3'
}}
>
<ModelSelect></ModelSelect>
<Form.Item name="voice">
<AutoComplete
label={intl.formatMessage({ id: 'playground.params.voice' })}
options={vociceOptions}
></AutoComplete>
</Form.Item>
<Form.Item name="response_format">
<SealSelect
label={intl.formatMessage({ id: 'playground.params.format' })}
options={[
{ label: 'mp3', value: 'mp3' },
{ label: 'wav', value: 'wav' }
]}
></SealSelect>
</Form.Item>
<CollapsePanel
activeKey={activeKey}
onChange={handleOnCollapse}
accordion={false}
items={[
{
key: 'advanced_config',
label: intl.formatMessage({ id: 'resources.form.advanced' }),
forceRender: true,
children: (
<>
<ParamsFields
paramsConfig={TTSAdvancedParamsConfig}
></ParamsFields>
<AdvanceConfig />
</>
)
}
]}
></CollapsePanel>
</Form>
</FormContext.Provider>
);
}
);
export default ParamsSettings;
src/pages/playground/speech/params-config.ts
-59
View File
@@ -99,62 +99,3 @@ export const TTSAdvancedParamsConfig: ParamsSchema[] = [
]
}
];
export const TTSParamsConfig: ParamsSchema[] = [
{
type: 'AutoComplete',
name: 'voice',
options: [],
label: {
text: 'playground.params.voice',
isLocalized: true
},
rules: [
{
required: false,
message: 'Voice is required'
}
]
},
{
type: 'Select',
name: 'response_format',
options: [
{ label: 'mp3', value: 'mp3' },
// { label: 'opus', value: 'opus' },
// { label: 'aac', value: 'aac' },
// { label: 'flac', value: 'flac' },
{ label: 'wav', value: 'wav' }
// { label: 'pcm', value: 'pcm' }
],
label: {
text: 'playground.params.format',
isLocalized: true
},
rules: [
{
required: false
}
]
}
// {
// type: 'Select',
// name: 'speed',
// options: [
// { label: '0.25x', value: 0.25 },
// { label: '0.5x', value: 0.5 },
// { label: '1x', value: 1 },
// { label: '2x', value: 2 },
// { label: '4x', value: 4 }
// ],
// label: {
// text: 'playground.params.speed',
// isLocalized: true
// },
// rules: [
// {
// required: false
// }
// ]
// }
];
src/pages/playground/speech/stt.tsx
+9 -71
View File
@@ -11,9 +11,8 @@ import useOverlayScroller from '@/hooks/use-overlay-scroller';
import { useCancelToken } from '@/hooks/use-request-token';
import { readAudioFile } from '@/utils/load-audio-file';
import { SendOutlined } from '@ant-design/icons';
import { useIntl, useSearchParams } from '@umijs/max';
import { useIntl } from '@umijs/max';
import { Button, Spin, Tooltip } from 'antd';
import _ from 'lodash';
import React, {
forwardRef,
useCallback,
@@ -25,21 +24,14 @@ import React, {
} from 'react';
import { AUDIO_SPEECH_TO_TEXT_API, speechToText } from '../apis';
import AudioInput from '../components/audio-input';
import DynamicParams from '../components/dynamic-params';
import RightContainer from '../components/right-container';
import ViewCommonCode from '../components/view-common-code';
import {
SpeechToTextFormat,
defaultLanguages,
extractErrorMessage
} from '../config';
import { allLanguages } from '../config/languages';
import { RealtimeParamsConfig as paramsConfig } from '../config/params-config';
import { ParamsSchema } from '../config/types';
import { SpeechToTextFormat, extractErrorMessage } from '../config';
import '../style/ground-llm.less';
import '../style/speech-to-text.less';
import '../style/system-message-wrap.less';
import { speechToTextCode } from '../view-code/audio';
import STTForm from './forms/stt-form';
interface MessageProps {
modelList: Global.BaseOption<string>[];
@@ -53,14 +45,8 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
const [messageList, setMessageList] = useState<
{ uid: number; content: string }[]
>([]);
const [searchParams] = useSearchParams();
const modelType = searchParams.get('type') || '';
const selectModel = searchParams.get('model')
? modelType === 'stt' && searchParams.get('model')
: '';
const defaultModel = selectModel || modelList[0]?.value || '';
const [parameters, setParams] = useState<any>({
model: defaultModel,
model: '',
language: 'auto'
});
const [show, setShow] = useState(false);
@@ -80,9 +66,6 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
useCancelToken();
const { initialize, updateScrollerPosition } = useOverlayScroller();
const [modelMeta, setModelMeta] = useState<any>(null);
const [fieldsConfig, setFieldsConfig] =
useState<ParamsSchema[]>(paramsConfig);
useImperativeHandle(ref, () => {
return {
@@ -273,53 +256,15 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
);
};
const handleSelectModel = (model: string) => {
if (!model) return;
const selected = modelList.find((item) => item.value === model);
setModelMeta(selected?.meta || {});
const languages = selected?.meta?.languages || [];
let currentLanguage = [...defaultLanguages];
if (languages.length > 0) {
// sort languages based on the order in the model meta
currentLanguage = [];
languages.forEach((langCode: string) => {
const langItem = allLanguages.find((item) => item.value === langCode);
if (langItem) {
currentLanguage.push(langItem);
}
});
const newConfig = paramsConfig.map((item) => {
const oItem = _.cloneDeep(item);
if (item.name === 'language') {
return {
...oItem,
options: currentLanguage
};
}
return oItem;
});
setFieldsConfig(newConfig);
}
setParams((pre: any) => {
const updateParams = (values: any) => {
setParams((pre: Record<string, any>) => {
return {
...pre,
language:
selected?.meta?.language || currentLanguage[0]?.value || 'auto',
model: model
...values
};
});
};
const handleOnValuesChange = (changedValues: any, allValues: any) => {
if (changedValues.model) {
handleSelectModel(changedValues.model);
} else {
setParams(allValues);
}
};
useEffect(() => {
if (scroller.current) {
initialize(scroller.current);
@@ -332,11 +277,6 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
}
}, [messageList, loading]);
useEffect(() => {
const defaultModel = selectModel || modelList[0]?.value || '';
handleSelectModel(defaultModel);
}, [modelList, selectModel]);
return (
<div
className="ground-left-wrapper"
@@ -492,11 +432,9 @@ const GroundSTT: React.FC<MessageProps> = forwardRef((props, ref) => {
</div>
</div>
<RightContainer collapsed={collapse}>
<DynamicParams
<STTForm
ref={formRef}
onValuesChange={handleOnValuesChange}
paramsConfig={fieldsConfig}
initialValues={parameters}
updateParams={updateParams}
modelList={modelList}
/>
</RightContainer>
src/pages/playground/speech/tts.tsx
+9 -215
View File
@@ -1,49 +1,29 @@
import { setRouteCache } from '@/atoms/route-cache';
import AlertInfo from '@/components/alert-info';
import IconFont from '@/components/icon-font';
import AutoComplete from '@/components/seal-form/auto-complete';
import FieldComponent from '@/components/seal-form/field-component';
import SealSelect from '@/components/seal-form/seal-select';
import SpeechContent from '@/components/speech-content';
import routeCachekey from '@/config/route-cachekey';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import CollapsePanel from '@/pages/_components/collapse-panel';
import { getLocale, useIntl, useSearchParams } from '@umijs/max';
import { Form, Spin } from 'antd';
import { useIntl } from '@umijs/max';
import { Spin } from 'antd';
import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css';
import React, {
forwardRef,
useCallback,
useEffect,
useImperativeHandle,
useMemo,
useRef,
useState
} from 'react';
import { AUDIO_TEXT_TO_SPEECH_API, CHAT_API, textToSpeech } from '../apis';
import DynamicParams from '../components/dynamic-params';
import MessageInput from '../components/message-input';
import RightContainer from '../components/right-container';
import ViewCommonCode from '../components/view-common-code';
import { extractErrorMessage } from '../config';
import { MessageItem, ParamsSchema } from '../config/types';
import { MessageItem } from '../config/types';
import '../style/ground-llm.less';
import '../style/system-message-wrap.less';
import { TextToSpeechCode } from '../view-code/audio';
import { RefAudioFormItem } from './form';
import {
TTSParamsConfig as paramsConfig,
TTSAdvancedParamsConfig
} from './params-config';
const MetaFields = [
'task_type',
'language',
'instructions',
'max_new_tokens',
'ref_audio'
];
import TTSDataForm from './forms/tts-form';
interface MessageProps {
modelList: Global.BaseOption<string>[];
@@ -65,15 +45,9 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
audioUrl: string;
}[]
>([]);
const locale = getLocale();
const intl = useIntl();
const [searchParams] = useSearchParams();
const modelType = searchParams.get('type') || '';
const selectModel = searchParams.get('model')
? modelType === 'tts' && searchParams.get('model')
: '';
const [parameters, setParams] = useState<any>({
model: selectModel,
model: '',
voice: '',
response_format: 'mp3'
});
@@ -82,20 +56,10 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
const [tokenResult, setTokenResult] = useState<any>(null);
const [collapse, setCollapse] = useState(false);
const controllerRef = useRef<any>(null);
const scroller = useRef<any>(null);
const checkvalueRef = useRef<any>(true);
const [currentPrompt, setCurrentPrompt] = useState<string>('');
const [voiceDataList, setVoiceList] = useState<Global.BaseOption<string>[]>(
[]
);
const [modelMeta, setModelMeta] = useState<any>({});
const formRef = useRef<any>(null);
const { initialize } = useOverlayScroller();
const [activeKey, setActiveKey] = useState<string | string[]>(
'advanced_config'
);
useImperativeHandle(ref, () => {
return {
viewCode() {
@@ -108,10 +72,6 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
};
});
const defaultModel = useMemo(() => {
return selectModel || modelList[0]?.value || '';
}, [modelList]);
const dropEmptyFields = (parameters: Record<string, any>) => {
const fields = [
'task_type',
@@ -139,37 +99,6 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
});
}, [parameters, currentPrompt]);
const sortVoiceList = useCallback(
(locale: string, voiceDataList: Global.BaseOption<string>[]) => {
const lang = locale === 'en-US' ? 'english' : 'chinese';
const list = voiceDataList.sort((a, b) => {
const aContains = a.value.toLowerCase().includes(lang) ? 1 : 0;
const bContains = b.value.toLowerCase().includes(lang) ? 1 : 0;
return bContains - aContains;
});
return list;
},
[]
);
const voiceList = useMemo(() => {
if (!voiceDataList.length) return [];
const newList = sortVoiceList(locale, voiceDataList);
return newList;
}, [locale, voiceDataList, sortVoiceList]);
useEffect(() => {
const newList = sortVoiceList(locale, voiceDataList);
setParams((pre: any) => {
return {
...pre,
voice: newList[0]?.value
};
});
formRef.current?.form.setFieldValue('voice', newList[0]?.value);
}, [locale, voiceDataList, sortVoiceList]);
const setMessageId = () => {
messageId.current = messageId.current + 1;
};
@@ -261,146 +190,19 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
setShow(false);
};
const handleSelectModel = async (value: string) => {
if (!value) {
return;
}
const model = modelList.find((item) => item.value === value);
const list = _.map(model?.meta?.voices || [], (item: any) => {
return {
label: item,
value: item
};
});
const newList = sortVoiceList(locale, list);
setVoiceList(newList);
setModelMeta(model?.meta || {});
const updatateParams = (values: Record<string, any>) => {
setParams((pre: any) => {
return {
...pre,
..._.pick(model?.meta || {}, MetaFields),
task_type: model?.meta?.task_type,
model: value,
language: model?.meta?.languages?.[0] || '',
voice: newList[0]?.value
...values
};
});
};
const handleOnValuesChange = useCallback(
(changeValues: Record<string, any>, allValues: Record<string, any>) => {
if (changeValues.model) {
handleSelectModel(changeValues.model);
} else {
setParams(allValues);
}
},
[handleSelectModel]
);
const handleOnCheckChange = (e: any) => {
checkvalueRef.current = e.target.checked;
};
const handleOnCollapse = (keys: string | string[]) => {
setActiveKey(keys);
};
const renderAdvancedFields = () => {
const formItems = TTSAdvancedParamsConfig.map((item: ParamsSchema) => {
const comProps = {
...item.attrs,
label: item.label.isLocalized
? intl.formatMessage({ id: item.label.text })
: item.label.text
};
return (
<>
<Form.Item
name={item.name}
rules={item.rules}
key={item.name}
{...item.formItemAttrs}
>
<FieldComponent
{...comProps}
description={
item.description?.isLocalized
? intl.formatMessage({ id: item.description.text })
: item.description?.text
}
onChange={null}
{..._.omit(item, [
'name',
'rules',
'disabledConfig',
'description'
])}
{...item.initAttrs?.(modelMeta)}
></FieldComponent>
</Form.Item>
</>
);
});
return (
<CollapsePanel
activeKey={activeKey}
onChange={handleOnCollapse}
accordion={false}
items={[
{
key: 'advanced_config',
label: intl.formatMessage({ id: 'resources.form.advanced' }),
forceRender: true,
children: (
<>
{formItems}
<RefAudioFormItem />
</>
)
}
]}
></CollapsePanel>
);
};
const renderExtra = () => {
return paramsConfig.map((item: ParamsSchema) => {
const comProps = {
...item.attrs,
options: item.name === 'voice' ? voiceList : item.options,
label: item.label.isLocalized
? intl.formatMessage({ id: item.label.text })
: item.label.text
};
return (
<>
<Form.Item name={item.name} rules={item.rules} key={item.name}>
{item.type === 'AutoComplete' ? (
<AutoComplete {...comProps} />
) : (
<SealSelect {...comProps}></SealSelect>
)}
</Form.Item>
</>
);
});
};
useEffect(() => {
if (defaultModel && modelList.length) {
handleSelectModel(defaultModel);
}
}, [defaultModel, modelList.length]);
useEffect(() => {
if (scroller.current) {
initialize(scroller.current);
}
}, [initialize]);
return (
<div className="ground-left-wrapper">
<div className="ground-left">
@@ -474,18 +276,10 @@ const GroundTTS: React.FC<MessageProps> = forwardRef((props, ref) => {
</div>
</div>
<RightContainer collapsed={collapse}>
<DynamicParams
<TTSDataForm
ref={formRef}
meta={modelMeta}
onValuesChange={handleOnValuesChange}
initialValues={parameters}
modelList={modelList}
extra={[
<>
{renderExtra()}
{renderAdvancedFields()}
</>
]}
updatateParams={updatateParams}
/>
</RightContainer>
<ViewCommonCode
src/pages/playground/video/forms/index.tsx
+85
View File
@@ -0,0 +1,85 @@
import { Form } from 'antd';
import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
import ModelSelect from '../../components/model-select';
import ParamsFields from '../../components/params-fields';
import { FormContext } from '../../config/form-context';
import { ParamsSchema } from '../../config/types';
type ParamsSettingsProps = {
ref?: any;
parametersTitle?: React.ReactNode;
showModelSelector?: boolean;
modelList?: Global.BaseOption<string>[];
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
onModelChange?: (model: string) => void;
onFinish?: (values: any) => void;
onFinishFailed?: (errorInfo: any) => void;
initialValues?: Record<string, any>; // for initial values when switch model, aviod update values from setParams
meta?: Record<string, any>;
paramsConfig?: ParamsSchema[];
};
const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
(
{
onValuesChange,
onModelChange,
onFinish,
onFinishFailed,
parametersTitle,
initialValues,
modelList,
showModelSelector = true,
meta,
paramsConfig
},
ref
) => {
const [form] = Form.useForm();
useImperativeHandle(ref, () => ({
form,
getFieldsValue: form.getFieldsValue,
setFieldsValue: form.setFieldsValue
}));
const handleOnFinish = (values: any) => {
onFinish?.(values);
};
const handleOnFinishFailed = (errorInfo: any) => {
onFinishFailed?.(errorInfo);
};
useEffect(() => {
form.setFieldsValue(initialValues);
}, [initialValues]);
return (
<FormContext.Provider
value={{
meta,
modelList: modelList || [],
onValuesChange: onValuesChange,
onModelChange: onModelChange
}}
>
<Form
form={form}
onValuesChange={onValuesChange}
onFinish={handleOnFinish}
onFinishFailed={handleOnFinishFailed}
initialValues={initialValues}
>
<ModelSelect
title={parametersTitle}
showModelSelector={showModelSelector}
></ModelSelect>
<ParamsFields paramsConfig={paramsConfig}></ParamsFields>
</Form>
</FormContext.Provider>
);
}
);
export default ParamsSettings;
src/pages/playground/video/page.tsx
+2 -2
View File
@@ -15,7 +15,6 @@ import React, {
useState
} from 'react';
import { CREATE_VIDEO_API } from '../apis';
import DynamicParams from '../components/dynamic-params';
import MessageInput from '../components/message-input';
import RightContainer from '../components/right-container';
import ViewCommonCode from '../components/view-common-code';
@@ -24,6 +23,7 @@ import useTextVideo from '../hooks/use-text-video';
import '../style/ground-llm.less';
import '../style/system-message-wrap.less';
import { generateCode } from '../view-code/video';
import DataForm from './forms';
interface MessageProps {
modelList: Global.BaseOption<string>[];
@@ -241,7 +241,7 @@ const GroundVideo: React.FC<MessageProps> = forwardRef((props, ref) => {
</div>
</div>
<RightContainer collapsed={collapse}>
<DynamicParams
<DataForm
ref={form}
onValuesChange={handleOnValuesChange}
paramsConfig={paramsConfig}