From 0c6ddc9156d9ccfb904f3895ce8c0e774728ed5b Mon Sep 17 00:00:00 2001 From: Victor Holguin Date: Thu, 16 Nov 2023 16:58:43 -0800 Subject: [PATCH] voise designer voice update working --- .../voice_designer/VoiceDesignerFormPage.tsx | 15 +--- .../VoiceDesignerVoiceEditPage.tsx | 83 ++++++++++++++----- .../pages/voice_designer/useVoiceRequests.tsx | 21 ++++- 3 files changed, 84 insertions(+), 35 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx index e6bf8d2da7..019826e094 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerFormPage.tsx @@ -28,7 +28,7 @@ interface RouteParams { function VoiceDesignerFormPage() { const history = useHistory(); - const { datasets, inputCtrl, voices } = useVoiceRequests(); + const { datasets, inputCtrl, languages, visibilityOptions, voices } = useVoiceRequests(); const [language, languageSet] = useState("en"); const [visibility, visibilitySet] = useState(""); const [title, titleSet] = useState(""); @@ -36,17 +36,6 @@ function VoiceDesignerFormPage() { const audioProps = useFile({}); // contains upload inout state and controls, see docs - const languages = [ - { value: "en", label: "English" }, - { value: "es", label: "Spanish" }, - { value: "fr", label: "French" }, - ]; - - const visibilityOptions = [ - { label: "Public", value: "public" }, - { label: "Hidden", value: "hidden" }, - ]; - const datasetInputs = [ { type: "text", @@ -119,7 +108,7 @@ function VoiceDesignerFormPage() { creator_set_visibility: visibility, idempotency_token: uuidv4(), }).then((res: any) => { - + console.log("😎",res); if (res && res.success && res.token) { history.push(`/voice-designer/dataset/${ res.token }/upload`); diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx index 0f76408868..4048c8a7e0 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx @@ -1,4 +1,5 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; import { faEye, faLanguage, @@ -8,18 +9,48 @@ import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; import Panel from "components/common/Panel"; import PageHeader from "components/layout/PageHeader"; import Container from "components/common/Container"; -import Input from "components/common/Input"; -import Select from "components/common/Select"; -import { Button } from "components/common"; +import TempInput from "components/common/TempInput"; +import { Button, TempSelect } from "components/common"; +import useVoiceRequests from "./useVoiceRequests"; +import { useHistory } from "react-router-dom"; function VoiceDesignerVoiceEditPage() { + const [language, languageSet] = useState("en"); + const [visibility, visibilitySet] = useState(""); + const [title, titleSet] = useState(""); + + const [fetched,fetchedSet] = useState(false); + + const history = useHistory(); + const { voice_token } = useParams(); + + const { inputCtrl, languages, visibilityOptions, voices } = useVoiceRequests(); + usePrefixedDocumentTitle("Edit Voice"); - const dummyData = { - name: "Name", - visibility: "public", - language: "English", - }; + const onClick = () => voices.update(voice_token,{ + title, + creator_set_visibility: visibility, + ietf_language_tag: language, + }) + .then((res: any) => { + if (res && res.success) { + history.push("/voice-designer"); + } + }); + + useEffect(() => { + if (!fetched && voice_token) { + fetchedSet(true); + voices.get(voice_token,{}) + .then((res) => { + languageSet(res.ietf_language_tag); + titleSet(res.title); + visibilitySet(res.creator_set_visibility); + }); + } + + },[fetched, voice_token, voices]); return ( @@ -36,26 +67,40 @@ function VoiceDesignerVoiceEditPage() {
- +
-
-
diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx index 22bbb93483..7e867740bd 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/useVoiceRequests.tsx @@ -9,6 +9,7 @@ import { DeleteVoice, // DeleteVoiceRequest, use me somewhere pls DeleteVoiceResponse } from "@storyteller/components/src/api/voice_designer/voices/DeleteVoice"; + import { UpdateVoice } from "@storyteller/components/src/api/voice_designer/voices/UpdateVoice"; // dataset imports @@ -38,13 +39,13 @@ export default function useVoiceRequests() { const createDataset = (urlRouteArgs: string, request: CreateDatasetRequest): Promise => CreateDataset(urlRouteArgs, request).then(res => { - refreshData(); + // refreshData(); // not needed because creating a dataset navigates to the upload page with no lists return res; }); const createVoice = (urlRouteArgs: string, request: CreateVoiceRequest): Promise => CreateVoice(urlRouteArgs, request).then(res => { - refreshData(); + // refreshData(); // not needed because creating a voice navigates to a new page with a new instance of useVoiceRequest return res; }); @@ -79,6 +80,17 @@ export default function useVoiceRequests() { }); }; + const languages = [ + { value: "en", label: "English" }, + { value: "es", label: "Spanish" }, + { value: "fr", label: "French" }, + ]; + + const visibilityOptions = [ + { label: "Public", value: "public" }, + { label: "Hidden", value: "hidden" }, + ]; + useEffect(() => { if (user && user.username) { if (!fetchedDatasets) { @@ -109,12 +121,15 @@ export default function useVoiceRequests() { inference: { enqueue: EnqueueTts, }, + languages, + visibilityOptions, voices: { create: createVoice, delete: deleteVoice, get: GetVoice, list: voices, - refresh: refreshData + refresh: refreshData, + update: UpdateVoice, }, inputCtrl: (todo: any) =>