From c3b50a9c93edc34c550ed853126607019e57820b Mon Sep 17 00:00:00 2001 From: dakai Date: Sun, 27 Oct 2024 12:42:16 +0800 Subject: [PATCH] refactor: optimize playSpeech function in TTSConfigList component --- app/components/tts-config.tsx | 57 +++++++++++++++++++++++------------ 1 file changed, 37 insertions(+), 20 deletions(-) diff --git a/app/components/tts-config.tsx b/app/components/tts-config.tsx index 0ca82567e18..e236064acb4 100644 --- a/app/components/tts-config.tsx +++ b/app/components/tts-config.tsx @@ -17,6 +17,7 @@ import SpeakStopIcon from "../icons/speak-stop.svg"; import { createTTSPlayer } from "../utils/audio"; import { useAppConfig } from "../store"; import { ClientApi } from "../client/api"; +import { showToast } from "../components/ui-lib"; const ttsPlayer = createTTSPlayer(); export function TTSConfigList(props: { @@ -26,34 +27,50 @@ export function TTSConfigList(props: { const [speechLoading, setSpeechLoading] = useState(false); const [speechStatus, setSpeechStatus] = useState(false); - async function openaiSpeech(text: string) { - if (speechStatus) { - ttsPlayer.stop(); - setSpeechStatus(false); - } else { + const config = useAppConfig.getState(); + + function stopSpeech() { + ttsPlayer.stop(); + setSpeechStatus(false); + } + + async function playSpeech(text: string, ttsConfig: TTSConfig) { + try { const api = new ClientApi(ModelProvider.GPT); - const config = useAppConfig.getState(); setSpeechLoading(true); ttsPlayer.init(); - let audioBuffer: ArrayBuffer; - audioBuffer = await api.llm.speech({ - model: config.ttsConfig.model, + + const audioBuffer = await api.llm.speech({ + model: ttsConfig.model, input: text, - voice: config.ttsConfig.voice, - speed: config.ttsConfig.speed, + voice: ttsConfig.voice, + speed: ttsConfig.speed, }); + setSpeechStatus(true); - ttsPlayer - .play(audioBuffer, () => { - setSpeechStatus(false); - }) - .catch((e) => { - console.error("[OpenAI Speech]", e); - setSpeechStatus(false); - }) - .finally(() => setSpeechLoading(false)); + await ttsPlayer.play(audioBuffer, () => { + setSpeechStatus(false); + }); + } catch (error) { + console.error("[OpenAI Speech]", error); + setSpeechStatus(false); + // Implement user-facing error notification here + if (typeof (error as Error).message === "string") { + showToast((error as Error).message); + } + } finally { + setSpeechLoading(false); } } + + async function openaiSpeech(text: string) { + if (speechStatus) { + stopSpeech(); + } else { + await playSpeech(text, config.ttsConfig); + } + } + return ( <>