From eb0a5ba01637ca351f00e4927d83822fbbf27fc6 Mon Sep 17 00:00:00 2001 From: Victor Holguin Date: Mon, 6 Nov 2023 22:18:35 -0800 Subject: [PATCH] added session context along with useSession hook to access it, along with more progress on voice designer api implementation --- packages/fakeyou.com/src/App.tsx | 202 +++++++++--------- .../src/components/common/index.tsx | 6 + .../layout/PageHeader/PageHeader.tsx | 11 +- .../providers/InferenceJobs/InferenceJobs.tsx | 5 +- .../components/providers/Session/Session.tsx | 13 ++ .../src/components/providers/Session/index.ts | 1 + .../src/components/providers/index.ts | 3 +- .../src/context/SessionContext.tsx | 7 + packages/fakeyou.com/src/context/index.ts | 3 +- packages/fakeyou.com/src/hooks/index.tsx | 3 +- .../fakeyou.com/src/hooks/useSession/index.ts | 1 + .../src/hooks/useSession/useSession.tsx | 7 + .../fakeyou.com/src/v2/view/PageContainer.tsx | 10 +- .../pages/voice_designer/DatasetEditor.tsx | 83 +++++++ .../voice_designer/VoiceDesignerMainPage.tsx | 15 +- .../pages/voice_designer/useVoiceRequests.tsx | 15 +- 16 files changed, 259 insertions(+), 126 deletions(-) create mode 100644 packages/fakeyou.com/src/components/providers/Session/Session.tsx create mode 100644 packages/fakeyou.com/src/components/providers/Session/index.ts create mode 100644 packages/fakeyou.com/src/context/SessionContext.tsx create mode 100644 packages/fakeyou.com/src/hooks/useSession/index.ts create mode 100644 packages/fakeyou.com/src/hooks/useSession/useSession.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index 50bfc19ddb..797878f828 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -58,7 +58,7 @@ import { VoiceConversionModelUploadJob } from "@storyteller/components/src/jobs/ import { VoiceConversionModelListItem } from "@storyteller/components/src/api/voice_conversion/ListVoiceConversionModels"; import HttpBackend from "i18next-http-backend"; -import { InferenceJobs } from "components/providers"; +import { InferenceJobs, Session as SessionProvider } from "components/providers"; // NB: We're transitioning over to this instance of i18n-next that loads translations over HTTP from Json Files. // The old i18n-next instance (see below) bakes in translations into the compiled javascript blob. @@ -789,104 +789,108 @@ class App extends React.Component { */}
- - - - - - + + + + + + + +
diff --git a/packages/fakeyou.com/src/components/common/index.tsx b/packages/fakeyou.com/src/components/common/index.tsx index 381ca1e40a..0e2c59f1fb 100644 --- a/packages/fakeyou.com/src/components/common/index.tsx +++ b/packages/fakeyou.com/src/components/common/index.tsx @@ -8,9 +8,12 @@ import FileDetails from "./FileDetails"; import FileWrapper from "./FileWrapper"; import FileLabel from "./FileLabel"; import ImageInput from "./ImageInput"; +import Input from "./Input"; import NumberSlider from "./NumberSlider"; +import Panel from "./Panel"; import Radio from "./Radio"; import SegmentButtons from "./SegmentButtons"; +import Select from "./Select"; import Slider from "./Slider"; import Spinner from "./Spinner"; @@ -25,9 +28,12 @@ export { FileWrapper, FileLabel, ImageInput, + Input, NumberSlider, + Panel, Radio, SegmentButtons, + Select, Slider, Spinner }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx index 3d151eed07..050bb6336c 100644 --- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx +++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx @@ -5,7 +5,13 @@ import { IconDefinition } from "@fortawesome/fontawesome-svg-core"; import Button from "components/common/Button"; import BackButton from "components/common/BackButton"; +interface BackConfig { + label: string; + to: string; +}; + interface PageHeaderProps { + back?: BackConfig; titleIcon?: IconDefinition; title: string | React.ReactNode; subText: string | React.ReactNode; @@ -25,6 +31,7 @@ interface PageHeaderProps { } export default function PageHeader({ + back, titleIcon, title, subText, @@ -50,9 +57,9 @@ export default function PageHeader({ return (
- {showBackButton && ( + {( back || showBackButton) && (
- +
)}
diff --git a/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx b/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx index b99bfc9ca7..af5c3a3665 100644 --- a/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx +++ b/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx @@ -6,9 +6,10 @@ import { InferenceJobsContext } from 'context'; interface Props { children?: any; byCategory?: any; + sessionWrapper?: any; } -export default function InferenceJobs({ children, byCategory }: Props) { +export default function InferenceJobs({ children, byCategory, sessionWrapper }: Props) { const processStatus = (job: InferenceJob) => { switch (job.jobState) { case JobState.PENDING: @@ -21,7 +22,7 @@ export default function InferenceJobs({ children, byCategory }: Props) { default: return -1; } }; - return + return { children } }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/providers/Session/Session.tsx b/packages/fakeyou.com/src/components/providers/Session/Session.tsx new file mode 100644 index 0000000000..518dd6dce4 --- /dev/null +++ b/packages/fakeyou.com/src/components/providers/Session/Session.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { SessionContext } from 'context'; + +interface Props { + children?: any; + sessionWrapper?: any; +} + +export default function Session({ children, sessionWrapper }: Props) { + return + { children } + +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/providers/Session/index.ts b/packages/fakeyou.com/src/components/providers/Session/index.ts new file mode 100644 index 0000000000..69cdd4d58f --- /dev/null +++ b/packages/fakeyou.com/src/components/providers/Session/index.ts @@ -0,0 +1 @@ +export { default } from './Session'; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/providers/index.ts b/packages/fakeyou.com/src/components/providers/index.ts index c38ad0d803..c8c22f1f64 100644 --- a/packages/fakeyou.com/src/components/providers/index.ts +++ b/packages/fakeyou.com/src/components/providers/index.ts @@ -1,3 +1,4 @@ import InferenceJobs from "./InferenceJobs"; +import Session from "./Session"; -export { InferenceJobs }; \ No newline at end of file +export { InferenceJobs, Session }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/context/SessionContext.tsx b/packages/fakeyou.com/src/context/SessionContext.tsx new file mode 100644 index 0000000000..4629d82486 --- /dev/null +++ b/packages/fakeyou.com/src/context/SessionContext.tsx @@ -0,0 +1,7 @@ +import { createContext } from "react"; + +interface SessionContextType { + sessionWrapper?: any +} + +export default createContext({}); \ No newline at end of file diff --git a/packages/fakeyou.com/src/context/index.ts b/packages/fakeyou.com/src/context/index.ts index 679d217f2e..104d13cde7 100644 --- a/packages/fakeyou.com/src/context/index.ts +++ b/packages/fakeyou.com/src/context/index.ts @@ -1,3 +1,4 @@ import InferenceJobsContext from "./InferenceJobsContext"; +import SessionContext from "./SessionContext"; -export { InferenceJobsContext }; \ No newline at end of file +export { InferenceJobsContext, SessionContext }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/index.tsx b/packages/fakeyou.com/src/hooks/index.tsx index c9e01ef0f9..0f7bd1a174 100644 --- a/packages/fakeyou.com/src/hooks/index.tsx +++ b/packages/fakeyou.com/src/hooks/index.tsx @@ -4,6 +4,7 @@ import useId from './useId'; import useIdempotency from './useIdempotency'; import useInferenceJobs from './useInferenceJobs'; import useLocalize from './useLocalize'; +import useSession from './useSession'; import useVideo from './useVideo'; -export { useFile, useHover, useId, useIdempotency, useInferenceJobs, useLocalize, useVideo }; +export { useFile, useHover, useId, useIdempotency, useInferenceJobs, useLocalize, useSession, useVideo }; diff --git a/packages/fakeyou.com/src/hooks/useSession/index.ts b/packages/fakeyou.com/src/hooks/useSession/index.ts new file mode 100644 index 0000000000..83d5c10a6e --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useSession/index.ts @@ -0,0 +1 @@ +export { default } from './useSession'; \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useSession/useSession.tsx b/packages/fakeyou.com/src/hooks/useSession/useSession.tsx new file mode 100644 index 0000000000..e932575587 --- /dev/null +++ b/packages/fakeyou.com/src/hooks/useSession/useSession.tsx @@ -0,0 +1,7 @@ +import { useContext } from 'react'; +import { SessionContext } from 'context'; + +export default function useInferenceJobs() { + const { sessionWrapper } = useContext(SessionContext); + return sessionWrapper?.sessionStateResponse || {}; +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 57a41219af..42f105cb09 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -82,6 +82,7 @@ import { VoiceConversionModelListItem } from "@storyteller/components/src/api/vo import { CommunityCommissionsPage } from "./pages/contest/CommunityCommissionsPage"; import { ProductUsageInfoPage } from "./pages/product_usage_info/ProductUsageInfoPage"; import { VoiceDesignerFormPage } from "./pages/voice_designer/VoiceDesignerFormPage"; +import DatasetEditor from "./pages/voice_designer/DatasetEditor"; import { GenerateSpeechPage } from "./pages/generate_speech/GenerateSpeechPage"; import VcModelViewPage from "./pages/vc/vc_model_view/VcModelViewPage"; import VcModelEditPage from "./pages/vc/vc_model_edit/VcModelEditPage"; @@ -630,7 +631,10 @@ class PageContainer extends React.Component< {/* Route for handling dataset token for uploading samples */} @@ -645,9 +649,7 @@ class PageContainer extends React.Component< - + diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx new file mode 100644 index 0000000000..a4d21ed0b1 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx @@ -0,0 +1,83 @@ +import React, { useEffect, useState } from 'react'; +import { useParams } from "react-router-dom"; +import Container from "components/common/Container"; +import PageHeader from "components/layout/PageHeader"; +// import { Stepper } from "./components/Stepper"; +// import { StepperControls } from "./components/StepperControls"; +import { faPencil, faWaveform } from "@fortawesome/pro-solid-svg-icons"; +import { Input, Panel, Select } from "components/common"; +import useVoiceRequests from "./useVoiceRequests"; + + +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; + +interface Props { + value?: any; + sessionWrapper: SessionWrapper; +} + +interface RouteParams { + dataset_token?: string; +} + +export default function DatasetEditor({ sessionWrapper, value }: Props) { + const { datasets, datasetByToken } = useVoiceRequests(); + const [title, titleSet] = useState(""); + const [language,languageSet] = useState({ value: "en", label: "English"}); + const [visibility,visibilitySet] = useState(""); + const [ready,readySet] = useState(false); + // const [currentStep, currentStepSet] = useState(0); + const { dataset_token: token } = useParams(); + const pageTitle = token ? `Edit` : "Create Dataset"; + const subText = token ? + "Edit your dataset by uploading more samples to create a new voice" : + "Add voice details and upload audio samples to clone your voice!"; + const titleIcon = token ? faPencil : faWaveform; + const back = { + label: "Back to Voice Designer", + to: token ? "/voice-designer/datasets" : "/voice-designer/voices" + }; + // const steps = ["A","B"]; + + useEffect(() => { + if (token && datasets && datasets.length && !ready) { + const { creator_set_visibility, ietf_language_tag, title: resTitle } = datasetByToken(token); + console.log("☔️",ietf_language_tag); + readySet(true); + titleSet(resTitle); + languageSet({ value: ietf_language_tag, label: "asss" }); + visibilitySet(creator_set_visibility); + } + },[datasetByToken,datasets,ready,token]); + + const inputCtrl = (todo: any) => ({ target }: { target: any}) => todo(target.value); + + const selectChange = ({ value }: any) => { // react-select doesn't format events like events, doesn't pass name prop, ew + console.log("🍕",value); + // languageSet(value); + } + + const options = [ + { value: "en", label: "English" }, + { value: "es", label: "Spanish" }, + { value: "fr", label: "French" }, + ]; + + const [abc,abcSet] = useState("123"); + + console.log("🚜", visibility, language, title); + return + + +
+ + console.log("🌸",e.target.value) }}> + + + + +
+ + ; +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx index 4432e7cc6b..a3c77bcd0e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx @@ -9,18 +9,17 @@ import { Route, NavLink, Switch, Redirect } from "react-router-dom"; import ListItems from "./components/NewList"; import Modal from "components/common/Modal"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +// import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { faMicrophone } from "@fortawesome/pro-solid-svg-icons"; - import useVoiceRequests from "./useVoiceRequests"; -interface Props { - sessionWrapper: SessionWrapper; -} +// interface Props { +// sessionWrapper: SessionWrapper; +// } -function VoiceDesignerMainPage({ sessionWrapper }: Props) { +function VoiceDesignerMainPage() { - const { datasets, deleteDataSet } = useVoiceRequests({ sessionWrapper }); + const { datasets, deleteDataSet } = useVoiceRequests(); const [isDeleteVoiceModalOpen, setIsDeleteVoiceModalOpen] = useState(false); const [isDeleteDatasetModalOpen, setIsDeleteDatasetModalOpen] = @@ -47,7 +46,7 @@ function VoiceDesignerMainPage({ sessionWrapper }: Props) { const history = useHistory(); - const navToEdit = (token: string) => { history.push(`/voice-designer/voice/${token}/edit`) } + const navToEdit = (token: string) => { history.push(`/voice-designer/dataset/${token}/edit`) } const rowClick = (todo: any) => ({ target }: { target: any }) => { let datasetToken = datasets[target.name.split(",")[0].split(":")[1]].dataset_token; 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 0c49137b12..138ad4af7e 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 @@ -1,15 +1,12 @@ import { useEffect, useState } from 'react'; -import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +// import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { ListDatasetsByUser, Dataset } from "@storyteller/components/src/api/voice_designer/voice_datasets/ListDatasetsByUser"; import { DeleteDataset } from "@storyteller/components/src/api/voice_designer/voice_datasets/DeleteDataset"; +import { useSession } from "hooks"; -interface Props { - sessionWrapper: SessionWrapper; -} - -export default function useVoiceRequests({ sessionWrapper }: Props) { - const { user } = sessionWrapper.sessionStateResponse || {}; +export default function useVoiceRequests() { const [datasets, datasetsSet] = useState([]); + const { user } = useSession(); const deleteDataSet = (voiceToken: string) => DeleteDataset(voiceToken,{ set_delete: true, @@ -18,6 +15,8 @@ export default function useVoiceRequests({ sessionWrapper }: Props) { console.log("🏧",res); }); + const datasetByToken = (datasetToken?: string) => datasets.filter(({ dataset_token },i) => datasetToken === dataset_token)[0]; + useEffect(() => { if (!datasets.length && user && user.username) { @@ -28,5 +27,5 @@ export default function useVoiceRequests({ sessionWrapper }: Props) { },[user, datasets]); - return { datasets, deleteDataSet }; + return { datasetByToken, datasets, deleteDataSet }; }; \ No newline at end of file