GithubProxy/ChatGPT-Next-Web
1
0
Fork 1
mirror of https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web.git synced 2025-05-20 20:50:17 +09:00
Code Issues Packages Projects Releases Wiki Activity

refactor: optimize playSpeech function in TTSConfigList component

Browse Source
This commit is contained in:
dakai 2024-10-27 12:42:16 +08:00
parent ab4bf3ba67
commit c3b50a9c93
1 changed files with 37 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app/components/tts-config.tsx
View File

@ -17,6 +17,7 @@ import SpeakStopIcon from "../icons/speak-stop.svg";
import { createTTSPlayer } from "../utils/audio"; import { createTTSPlayer } from "../utils/audio";
import { useAppConfig } from "../store"; import { useAppConfig } from "../store";
import { ClientApi } from "../client/api"; import { ClientApi } from "../client/api";
import { showToast } from "../components/ui-lib";
const ttsPlayer = createTTSPlayer(); const ttsPlayer = createTTSPlayer();
export function TTSConfigList(props: { export function TTSConfigList(props: {
@ -26,34 +27,50 @@ export function TTSConfigList(props: {
const [speechLoading, setSpeechLoading] = useState(false); const [speechLoading, setSpeechLoading] = useState(false);
const [speechStatus, setSpeechStatus] = useState(false); const [speechStatus, setSpeechStatus] = useState(false);
async function openaiSpeech(text: string) { const config = useAppConfig.getState();
if (speechStatus) {
ttsPlayer.stop(); function stopSpeech() {
setSpeechStatus(false); ttsPlayer.stop();
} else { setSpeechStatus(false);
}
async function playSpeech(text: string, ttsConfig: TTSConfig) {
try {
const api = new ClientApi(ModelProvider.GPT); const api = new ClientApi(ModelProvider.GPT);
const config = useAppConfig.getState();
setSpeechLoading(true); setSpeechLoading(true);
ttsPlayer.init(); ttsPlayer.init();
let audioBuffer: ArrayBuffer;
audioBuffer = await api.llm.speech({ const audioBuffer = await api.llm.speech({
model: config.ttsConfig.model, model: ttsConfig.model,
input: text, input: text,
voice: config.ttsConfig.voice, voice: ttsConfig.voice,
speed: config.ttsConfig.speed, speed: ttsConfig.speed,
}); });
setSpeechStatus(true); setSpeechStatus(true);
ttsPlayer await ttsPlayer.play(audioBuffer, () => {
.play(audioBuffer, () => { setSpeechStatus(false);
setSpeechStatus(false); });
}) } catch (error) {
.catch((e) => { console.error("[OpenAI Speech]", error);
console.error("[OpenAI Speech]", e); setSpeechStatus(false);
setSpeechStatus(false); // Implement user-facing error notification here
}) if (typeof (error as Error).message === "string") {
.finally(() => setSpeechLoading(false)); showToast((error as Error).message);
}
} finally {
setSpeechLoading(false);
} }
} }
async function openaiSpeech(text: string) {
if (speechStatus) {
stopSpeech();
} else {
await playSpeech(text, config.ttsConfig);
}
}
return ( return (
<> <>
<ListItem <ListItem