From d6e07db32e468ea7decd7f1ff8bb63b2dd2c7936 Mon Sep 17 00:00:00 2001 From: wil Date: Sat, 6 Apr 2024 23:30:19 -0400 Subject: [PATCH] generate tts call works, refresh of audio panel works --- .../comps/DialogueTTS/DialogueTTS.tsx | 83 ++++++++++++------- .../{generate.tsx => generateTts.tsx} | 11 ++- .../comps/SidePanelTabs/TabAudio/TabAudio.tsx | 23 +++-- 3 files changed, 81 insertions(+), 36 deletions(-) rename app/pages/PageEnigma/comps/DialogueTTS/{generate.tsx => generateTts.tsx} (87%) diff --git a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx index eb52b684ed..b3de23dd9e 100644 --- a/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx +++ b/app/pages/PageEnigma/comps/DialogueTTS/DialogueTTS.tsx @@ -1,6 +1,11 @@ import { useCallback, useContext, useEffect, useState } from "react"; import { v4 as uuidv4 } from "uuid"; -import { faVolume, faShuffle, faPlay } from "@fortawesome/pro-solid-svg-icons"; +import { + faVolume, + faShuffle, + faPlay, + faBrainCircuit, +} from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { AppUiContext } from "../../contexts/AppUiContext"; import { APPUI_ACTION_TYPES } from "../../reducers"; @@ -8,17 +13,21 @@ import { Button, H5, Label, + LoadingDotsTyping, ListSearchDropdown, TransitionDialogue, Textarea } from "~/components"; import { ListTtsModels } from "./utilities"; import { TtsModelListItem } from "./types"; -import { GenerateTtsAudio } from "./generate"; +import { GenerateTtsAudio } from "./generateTts"; + type TtsState = { voice: TtsModelListItem | undefined; text: string; + hasEnqueued :boolean; + inferenceToken?: string; hasAudio: boolean; } @@ -27,7 +36,8 @@ export const DialogueTTS = ()=>{ const [ttsState, setTtsState] = useState({ voice:undefined, text:"", - hasAudio:false + hasEnqueued:false, + hasAudio:false, }); const [ttsModels, setTtsModels] = useState>([]); @@ -47,8 +57,7 @@ export const DialogueTTS = ()=>{ listModels(); }, [listModels]); - const requestTts = useCallback(async ()=>{ - + const requestTts = useCallback( ()=>{ const modelToken = ttsState.voice ? ttsState.voice.model_token : undefined; if(modelToken){ @@ -57,8 +66,16 @@ export const DialogueTTS = ()=>{ tts_model_token: modelToken, inference_text: ttsState.text, }; - console.log(request); - const response = await GenerateTtsAudio(request); + // console.log(request); + GenerateTtsAudio(request).then(res=>{ + if(res.inference_job_token){ + setTtsState((curr)=>({ + ...curr, + hasEnqueued: true, + inferenceToken: res.inference_job_token + })); + } + }); }else{ console.log("no voice model selected"); } @@ -83,8 +100,8 @@ export const DialogueTTS = ()=>{ const voiceModel = ttsModels.find((item)=>{ if (item.title === val) return item }) - console.log(val); - console.log(voiceModel); + // console.log(val); + // console.log(voiceModel); setTtsState((curr)=>({ ...curr, voice: voiceModel, @@ -123,32 +140,42 @@ export const DialogueTTS = ()=>{ onChange={handleTextInput} />
- +
+ {!ttsState.hasAudio && !ttsState.hasEnqueued && + + } + {!ttsState.hasAudio && ttsState.hasEnqueued && + + } + {ttsState.hasAudio && + + } +
+
-
diff --git a/app/pages/PageEnigma/comps/DialogueTTS/generate.tsx b/app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx similarity index 87% rename from app/pages/PageEnigma/comps/DialogueTTS/generate.tsx rename to app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx index 7c3d256357..eaeb358993 100644 --- a/app/pages/PageEnigma/comps/DialogueTTS/generate.tsx +++ b/app/pages/PageEnigma/comps/DialogueTTS/generateTts.tsx @@ -29,8 +29,15 @@ export async function GenerateTtsAudio(request: GenerateTtsAudioRequest) : Promi }) .then(res => res.json()) .then(res => { - console.log(res); - return; + if (!('inference_job_token' in res)) { + return { error: GenerateTtsAudioErrorType.UnknownError }; + } + const ret:GenerateTtsAudioSuccess = { + success: true, + inference_job_token: res.inference_job_token, + inference_job_token_type: res.inference_job_token_type, + } + return ret; }) .catch(e => { let maybeError = maybeMapError(e); diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx index 45d7e8bc87..1ef913ffbd 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/TabAudio/TabAudio.tsx @@ -1,4 +1,7 @@ import { useContext, useEffect, useState } from "react"; + +import { faArrowsRotate } from "@fortawesome/pro-solid-svg-icons"; + import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; import { APPUI_ACTION_TYPES } from "../../../reducers"; @@ -7,7 +10,7 @@ import { AuthenticationContext } from "~/contexts/Authentication"; import { useSignals } from "@preact/signals-react/runtime"; // import { timelineHeight } from "~/pages/PageEnigma/store"; -import { Button, Label, P } from "~/components"; +import { Button, ButtonIcon, Label, P } from "~/components"; import { ClipType } from "../../../models/track"; import { AudioElement } from "./AudioElement"; import { ListAudioByUser, MediaFile } from "./listAudioByUser"; @@ -21,20 +24,25 @@ export const TabAudio = () => { useSignals(); useEffect(() => { - - if(authState.userInfo && authState.userInfo.username) + if(authState.userInfo && authState.userInfo.username && userAudioClips.length === 0) ListAudioByUser(authState.userInfo.username) .then(res=>{ setUserAudioClips([...res]); }); - }, []); + }, [authState]); const openTTSPanel = () =>{ dispatchAppUiState({ type: APPUI_ACTION_TYPES.OPEN_DIALOGUE_TTS }) }; - + const handleRefreshUserMedia = ()=>{ + if(authState.userInfo && authState.userInfo.username) + ListAudioByUser(authState.userInfo.username) + .then(res=>{ + setUserAudioClips([...res]); + }); + } return (
{
- +
+ + +
{userAudioClips.length === 0 &&

No audio generated yet