diff --git a/config/config.ts b/config/config.ts index 8633f558..83b0519e 100644 --- a/config/config.ts +++ b/config/config.ts @@ -14,7 +14,7 @@ const isProduction = env === 'production'; const t = Date.now(); export default defineConfig({ proxy: { - ...proxy('http://192.168.50.3') + ...proxy('http://192.168.50.4') }, history: { type: 'hash' diff --git a/src/pages/playground/components/ground-tts.tsx b/src/pages/playground/components/ground-tts.tsx index 4b9d4b82..2c08e495 100644 --- a/src/pages/playground/components/ground-tts.tsx +++ b/src/pages/playground/components/ground-tts.tsx @@ -4,7 +4,7 @@ import SealSelect from '@/components/seal-form/seal-select'; import SpeechContent from '@/components/speech-content'; import useOverlayScroller from '@/hooks/use-overlay-scroller'; import { SendOutlined } from '@ant-design/icons'; -import { useIntl, useSearchParams } from '@umijs/max'; +import { getLocale, useIntl, useSearchParams } from '@umijs/max'; import { Form, Spin } from 'antd'; import classNames from 'classnames'; import _ from 'lodash'; @@ -53,7 +53,7 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { audioUrl: string; }[] >([]); - + const locale = getLocale(); const intl = useIntl(); const [searchParams] = useSearchParams(); const modelType = searchParams.get('type') || ''; @@ -72,7 +72,9 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { const messageListLengthCache = useRef(0); const checkvalueRef = useRef(true); const [currentPrompt, setCurrentPrompt] = useState(''); - const [voiceList, setVoiceList] = useState[]>([]); + const [voiceDataList, setVoiceList] = useState[]>( + [] + ); const formRef = useRef(null); const { initialize, updateScrollerPosition } = useOverlayScroller(); @@ -90,6 +92,37 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { }; }); + const sortVoiceList = useCallback( + (locale: string, voiceDataList: Global.BaseOption[]) => { + 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; }; @@ -192,21 +225,23 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { setVoiceList([]); return; } - const voiceList = _.map(res.voices || [], (item: any) => { + const list = _.map(res.voices || [], (item: any) => { return { label: item, value: item }; }); - setVoiceList(voiceList); + const newList = sortVoiceList(locale, list); + + setVoiceList(newList); setParams((pre: any) => { return { ...pre, - voice: voiceList[0]?.value + voice: newList[0]?.value }; }); - formRef.current?.form.setFieldValue('voice', voiceList[0]?.value); + formRef.current?.form.setFieldValue('voice', newList[0]?.value); } catch (error: any) { const res = error?.response?.data; if (res?.error) { @@ -216,7 +251,6 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { res?.error?.message || res?.data?.error || res.error?.detail || '' }); } - console.log('error:', error); setVoiceList([]); formRef.current?.form.setFieldValue('voice', ''); setParams((pre: any) => { diff --git a/src/pages/playground/style/ground-left.less b/src/pages/playground/style/ground-left.less index 2ed402f8..dce4bae0 100644 --- a/src/pages/playground/style/ground-left.less +++ b/src/pages/playground/style/ground-left.less @@ -86,7 +86,7 @@ height: fit-content; top: -10px; font-size: var(--font-size-middle); - left: calc(50% + 14px); + left: calc(50% + 10px); transform: translateX(-50%); background-color: transparent; }