diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx index d934bece..3f015b2a 100644 --- a/src/components/icon-font/index.tsx +++ b/src/components/icon-font/index.tsx @@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons'; // import './iconfont/iconfont.js'; const IconFont = createFromIconfontCN({ - scriptUrl: '//at.alicdn.com/t/c/font_3892962_hd8klbsk0yg.js' + scriptUrl: '//at.alicdn.com/t/c/font_4613488_mis8x88kojd.js' }); export default IconFont; diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts index 83f14dab..5ff29229 100644 --- a/src/locales/en-US/playground.ts +++ b/src/locales/en-US/playground.ts @@ -163,5 +163,9 @@ export default { 'playground.uploadImage.url.holder': 'Enter an image URL', 'playground.uploadImage.url.button': 'Add Image from URL', 'playground.params.duration': 'Duration (seconds)', - 'playground.params.resolution': 'Resolution' + 'playground.params.resolution': 'Resolution', + 'playground.params.taskType': 'Task Type', + 'playground.params.voiceStyle': 'Voice Style', + 'playground.params.maxTokens': 'Maximum Generate Length', + 'playground.params.refAudio': 'Reference Audio URL' }; diff --git a/src/locales/ja-JP/playground.ts b/src/locales/ja-JP/playground.ts index 30cc4d44..523ca182 100644 --- a/src/locales/ja-JP/playground.ts +++ b/src/locales/ja-JP/playground.ts @@ -166,7 +166,11 @@ export default { 'playground.uploadImage.url.holder': 'Enter an image URL', 'playground.uploadImage.url.button': 'Add Image from URL', 'playground.params.duration': 'Duration (seconds)', - 'playground.params.resolution': 'Resolution' + 'playground.params.resolution': 'Resolution', + 'playground.params.taskType': 'Task Type', + 'playground.params.voiceStyle': 'Voice Style', + 'playground.params.maxTokens': 'Maximum Generate Length', + 'playground.params.refAudio': 'Reference Audio URL' }; // ========== To-Do: Translate Keys (Remove After Translation) ========== diff --git a/src/locales/ru-RU/playground.ts b/src/locales/ru-RU/playground.ts index 86e4a81b..965f00c5 100644 --- a/src/locales/ru-RU/playground.ts +++ b/src/locales/ru-RU/playground.ts @@ -160,7 +160,11 @@ export default { 'playground.uploadImage.url.holder': 'Enter an image URL', 'playground.uploadImage.url.button': 'Add Image from URL', 'playground.params.duration': 'Duration (seconds)', - 'playground.params.resolution': 'Resolution' + 'playground.params.resolution': 'Resolution', + 'playground.params.taskType': 'Task Type', + 'playground.params.voiceStyle': 'Voice Style', + 'playground.params.maxTokens': 'Maximum Generate Length', + 'playground.params.refAudio': 'Reference Audio URL' }; // ========== To-Do: Translate Keys (Remove After Translation) ========== diff --git a/src/locales/zh-CN/playground.ts b/src/locales/zh-CN/playground.ts index fc791ed3..0de4a40a 100644 --- a/src/locales/zh-CN/playground.ts +++ b/src/locales/zh-CN/playground.ts @@ -156,5 +156,9 @@ export default { 'playground.uploadImage.url.holder': '请输入图片链接', 'playground.uploadImage.url.button': '从链接添加图片', 'playground.params.duration': '时长 (秒)', - 'playground.params.resolution': '分辨率' + 'playground.params.resolution': '分辨率', + 'playground.params.taskType': '任务类型', + 'playground.params.voiceStyle': '语音风格', + 'playground.params.maxTokens': '最大生成长度', + 'playground.params.refAudio': '参考音频 URL' }; diff --git a/src/pages/playground/components/ground-tts.tsx b/src/pages/playground/components/ground-tts.tsx index 79aeb1bb..83623d6e 100644 --- a/src/pages/playground/components/ground-tts.tsx +++ b/src/pages/playground/components/ground-tts.tsx @@ -2,10 +2,12 @@ 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 classNames from 'classnames'; @@ -22,7 +24,10 @@ import React, { } from 'react'; import { AUDIO_TEXT_TO_SPEECH_API, CHAT_API, textToSpeech } from '../apis'; import { extractErrorMessage } from '../config'; -import { TTSParamsConfig as paramsConfig } from '../config/params-config'; +import { + TTSParamsConfig as paramsConfig, + TTSAdvancedParamsConfig +} from '../config/params-config'; import { MessageItem, ParamsSchema } from '../config/types'; import '../style/ground-llm.less'; import '../style/system-message-wrap.less'; @@ -31,6 +36,14 @@ import DynamicParams from './dynamic-params'; import MessageInput from './message-input'; import ViewCommonCode from './view-common-code'; +const MetaFields = [ + 'task_type', + 'language', + 'instructions', + 'max_new_tokens', + 'ref_audio' +]; + interface MessageProps { modelList: Global.BaseOption[]; loaded?: boolean; @@ -75,10 +88,14 @@ const GroundTTS: React.FC = forwardRef((props, ref) => { const [voiceDataList, setVoiceList] = useState[]>( [] ); + const [modelMeta, setModelMeta] = useState({}); const formRef = useRef(null); const { initialize } = useOverlayScroller(); const { initialize: innitializeParams } = useOverlayScroller(); + const [activeKey, setActiveKey] = useState( + 'advanced_config' + ); useImperativeHandle(ref, () => { return { @@ -226,31 +243,32 @@ const GroundTTS: React.FC = forwardRef((props, ref) => { setShow(false); }; - const handleSelectModel = useCallback( - 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 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); - setParams((pre: any) => { - return { - ...pre, - model: value, - voice: newList[0]?.value - }; - }); - }, - [modelList] - ); + const newList = sortVoiceList(locale, list); + setVoiceList(newList); + setModelMeta(model?.meta || {}); + setParams((pre: any) => { + return { + ...pre, + ..._.pick(model?.meta || {}, MetaFields), + task_type: model?.meta?.default_task_type, + max_new_tokens: model?.meta?.max_model_len || null, + model: value, + voice: newList[0]?.value + }; + }); + }; const handleOnValuesChange = useCallback( (changeValues: Record, allValues: Record) => { @@ -273,7 +291,65 @@ const GroundTTS: React.FC = forwardRef((props, ref) => { checkvalueRef.current = e.target.checked; }; - const renderExtra = useMemo(() => { + 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 ( + <> + + + + + ); + }); + + return ( + + ); + }; + + const renderExtra = () => { return paramsConfig.map((item: ParamsSchema) => { const comProps = { ...item.attrs, @@ -283,16 +359,18 @@ const GroundTTS: React.FC = forwardRef((props, ref) => { : item.label.text }; return ( - - {item.type === 'AutoComplete' ? ( - - ) : ( - - )} - + <> + + {item.type === 'AutoComplete' ? ( + + ) : ( + + )} + + ); }); - }, [paramsConfig, intl, voiceList]); + }; useEffect(() => { if (defaultModel && modelList.length) { @@ -396,7 +474,12 @@ const GroundTTS: React.FC = forwardRef((props, ref) => { onValuesChange={handleOnValuesChange} initialValues={parameters} modelList={modelList} - extra={[renderExtra]} + extra={[ + <> + {renderExtra()} + {renderAdvancedFields()} + + ]} /> diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts index 8303727c..9e0fcb7f 100644 --- a/src/pages/playground/config/params-config.ts +++ b/src/pages/playground/config/params-config.ts @@ -1,3 +1,4 @@ +import _ from 'lodash'; import { ParamsSchema } from './types'; export interface SizeOption { @@ -89,6 +90,124 @@ export const TTSParamsConfig: ParamsSchema[] = [ // } ]; +export const TTSAdvancedParamsConfig: ParamsSchema[] = [ + { + type: 'Select', + name: 'task_type', + options: [], + attrs: { + allowClear: true + }, + label: { + text: 'playground.params.taskType', + isLocalized: true + }, + initAttrs: (meta: any) => { + return { + options: _.map(meta?.task_types || [], (item: string) => ({ + label: item, + value: item + })) + }; + }, + rules: [ + { + required: false + } + ] + }, + { + type: 'Select', + name: 'language', + options: [], + initAttrs: (meta: any) => { + return { + options: _.map(meta?.languages || [], (item: string) => ({ + label: item, + value: item + })) + }; + }, + attrs: { + allowClear: true + }, + label: { + text: 'playground.params.language', + isLocalized: true + }, + rules: [ + { + required: false + } + ] + }, + { + type: 'Select', + name: 'instructions', + label: { + text: 'playground.params.voiceStyle', + isLocalized: true + }, + attrs: { + allowClear: true + }, + initAttrs: (meta: any) => { + return { + options: _.map(meta?.voices || [], (item: string) => ({ + label: item, + value: item + })) + }; + }, + rules: [ + { + required: false + } + ] + }, + { + type: 'InputNumber', + name: 'max_new_tokens', + label: { + text: 'playground.params.maxTokens', + isLocalized: true + }, + attrs: { + allowClear: true, + min: 0 + }, + formItemAttrs: { + hidden: true, + getValueProps: (value: number) => { + return { + value: value || null + }; + } + }, + rules: [ + { + required: false + } + ] + }, + { + type: 'Input', + name: 'ref_audio', + label: { + text: 'playground.params.refAudio', + isLocalized: true + }, + attrs: { + allowClear: true + }, + rules: [ + { + required: false + } + ] + } +]; + export const RealtimeParamsConfig: ParamsSchema[] = [ { type: 'Select', diff --git a/src/pages/playground/config/types.ts b/src/pages/playground/config/types.ts index cdefb482..41239721 100644 --- a/src/pages/playground/config/types.ts +++ b/src/pages/playground/config/types.ts @@ -53,6 +53,7 @@ export interface ParamsSchema { text: string; isLocalized?: boolean; }; + initAttrs?: (meta: any) => Record; dependencies?: string[]; style?: React.CSSProperties; options?: Global.BaseOption[];