refactor: playground params form

src/pages/playground/speech/forms/stt-form.tsx

@@ -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/forms/tts-advance.tsx

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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