diff --git a/packages/components/src/api/voice_designer/voice_datasets/CreateDataset.ts b/packages/components/src/api/voice_designer/voice_datasets/CreateDataset.ts index 67b339e56c..f06cd5dfa2 100644 --- a/packages/components/src/api/voice_designer/voice_datasets/CreateDataset.ts +++ b/packages/components/src/api/voice_designer/voice_datasets/CreateDataset.ts @@ -1,16 +1,17 @@ import MakeRequest from "../../MakeRequest"; -export interface CreateVoiceRequest { - uuid_idempotency_token: string, - voice_dataset_token: string, +export interface CreateDatasetRequest { + title: string, + creator_set_visibility: string, + idempotency_token: string, } -export interface CreateVoiceResponse { +export interface CreateDatasetResponse { success: boolean, - inference_job_token: string, + token: string, } -export const CreateVoice = MakeRequest({ +export const CreateDataset = MakeRequest({ method: "POST", routingFunction: () => "/v1/voice_designer/dataset/create", }); diff --git a/packages/fakeyou.com/package.json b/packages/fakeyou.com/package.json index 9c1b289121..38e9a327c2 100644 --- a/packages/fakeyou.com/package.json +++ b/packages/fakeyou.com/package.json @@ -22,6 +22,7 @@ "@testing-library/user-event": "^7.2.1", "@tippyjs/react": "^4.2.6", "@types/axios": "^0.14.0", + "@types/deep-equal": "^1.0.3", "@types/google.analytics": "^0.0.42", "@types/gtag.js": "^0.0.12", "@types/howler": "^2.1.2", @@ -35,6 +36,7 @@ "bulma": "^0.9.0", "craco": "^0.0.3", "date-fns": "2.22.1", + "deep-equal": "^2.2.2", "framer-motion": "^6.5.1", "howler": "^2.2.0", "i18next": "^21.6.11", diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index a2e050ab72..b9ebb74f97 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -36,6 +36,7 @@ import { TtsCategoryType } from "./AppWrapper"; import { FAKEYOU_MERGED_TRANSLATIONS } from "./_i18n/FakeYouTranslations"; import i18n from "i18next"; import { initReactI18next } from "react-i18next"; +import deepEqual from "deep-equal"; import { VocoderUploadJob } from "@storyteller/components/src/jobs/VocoderUploadJobs"; import { GetRemoteDownloadJobStatus, @@ -308,9 +309,12 @@ class App extends React.Component { } else { cookies.remove('logged_in_username', { path: '/' }); } - this.setState({ - sessionWrapper: sessionWrapper, - }); + + if (!deepEqual(sessionWrapper, this.state.sessionWrapper)) { + this.setState({ + sessionWrapper: sessionWrapper, + }); + } }; querySessionSubscriptions = async () => { @@ -326,9 +330,11 @@ class App extends React.Component { cookies.remove('logged_in_user_plan', { path: '/' }); } - this.setState({ - sessionSubscriptionsWrapper: sessionSubscriptionsWrapper, - }); + if (!deepEqual(sessionSubscriptionsWrapper, this.state.sessionSubscriptionsWrapper)) { + this.setState({ + sessionSubscriptionsWrapper: sessionSubscriptionsWrapper, + }); + } }; queryLanguage = async () => { diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx index b5c1d88bae..7a810b111e 100644 --- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx +++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx @@ -8,7 +8,7 @@ import BackButton from "components/common/BackButton"; interface BackConfig { label: string; to: string; -}; +} interface PageHeaderProps { back?: BackConfig; @@ -57,9 +57,12 @@ export default function PageHeader({ return (
- {( back || showBackButton) && ( + {(back || showBackButton) && (
- +
)}
@@ -73,7 +76,9 @@ export default function PageHeader({ {/* {icon} */} {title} -

{subText}

+

+ {subText} +

{showButton && (
diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 7a6f936ce9..dfe07cad14 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -739,7 +739,7 @@ styles with important tags: } .session-tts-section { - height: 100%; + // height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index d7a0e244bd..edce3e7bdf 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -94,6 +94,7 @@ import TtsModelSearchPage from "./pages/tts/tts_model_search/TtsModelSearchPage" import MediaPage from "./pages/media/MediaPage"; import { VoiceDesignerMainPage } from "./pages/voice_designer/VoiceDesignerMainPage"; import { VoiceDesignerVoiceEditPage } from "./pages/voice_designer/VoiceDesignerVoiceEditPage"; +import VoiceDesignerUseVoicePage from "./pages/voice_designer/VoiceDesignerUseVoicePage"; import { PasswordResetEmailPage } from "./pages/password_reset/PasswordResetEmailPage"; import { PasswordResetVerificationPage } from "./pages/password_reset/PasswordResetVerificationPage"; import { PasswordResetChangePage } from "./pages/password_reset/PasswordResetChangePage"; @@ -666,8 +667,19 @@ class PageContainer extends React.Component< + + + + - + diff --git a/packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx b/packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx index 1135cc46e3..a48d4400ae 100644 --- a/packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/login/LoginPage.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; -import { Link, useHistory } from "react-router-dom"; +import { useHistory } from "react-router-dom"; import { CreateSession, CreateSessionIsError, @@ -132,11 +132,11 @@ function LoginPage(props: Props) { onChange={handlePasswordChange} />
-

+ {/*

Forgot your password? -

+

*/}
diff --git a/packages/fakeyou.com/src/v2/view/pages/signup/SignupPage.tsx b/packages/fakeyou.com/src/v2/view/pages/signup/SignupPage.tsx index 2222f08f87..e8a9724b2d 100644 --- a/packages/fakeyou.com/src/v2/view/pages/signup/SignupPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/signup/SignupPage.tsx @@ -185,10 +185,10 @@ function SignupPage(props: Props) { Analytics.accountSignupAttempt(); if ( - !usernameValid || - !emailValid || - !passwordValid || - !passwordConfirmationValid + (usernameValid !== FieldTriState.TRUE) || + (emailValid !== FieldTriState.TRUE) || + (passwordValid !== FieldTriState.TRUE) || + (passwordConfirmationValid !== FieldTriState.TRUE) ) { return false; } 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 index ff17b3cdc6..ff4f4b9a31 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/DatasetEditor.tsx @@ -6,6 +6,8 @@ import { faPencil, faWaveform } from "@fortawesome/pro-solid-svg-icons"; import { TempInput, Panel, SegmentButtons, TempSelect } from "components/common"; import useVoiceRequests from "./useVoiceRequests"; +import { v4 as uuidv4 } from "uuid"; + import "./VoiceDesigner.scss"; interface Props { @@ -38,6 +40,7 @@ export default function DatasetEditor({ value }: Props) { { value: "es", label: "Spanish" }, { value: "fr", label: "French" }, ]; + const visibilityOptions = [{ label: "Public", value: "public" },{ label: "Hidden", value: "hidden" }]; const buttonLabel = "Save dataset"; const buttonOnClick = () => { @@ -48,7 +51,11 @@ export default function DatasetEditor({ value }: Props) { ietf_language_tag: language }); } else { - datasets.create(); + datasets.create({ + title, + creator_set_visibility: language, + idempotency_token: uuidv4(), + }); } }; const headerProps = { back, buttonOnClick, buttonLabel, panel: false, showButton: true, subText, title: pageTitle, titleIcon }; diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerUseVoicePage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerUseVoicePage.tsx new file mode 100644 index 0000000000..8ea15395d2 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerUseVoicePage.tsx @@ -0,0 +1,213 @@ +import React, { useState } from "react"; +import { + faBarsStaggered, + faDeleteLeft, + faEdit, + faEye, + faMemo, + faMemoCircleInfo, + faMessages, + faTrash, + faWaveformLines, +} from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import Panel from "components/common/Panel/Panel"; +import { Link } from "react-router-dom"; +import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; +import PageHeader from "components/layout/PageHeader"; +import { CommentComponent } from "v2/view/_common/comments/CommentComponent"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import Container from "components/common/Container/Container"; +// import { useSession } from "hooks"; +import TextArea from "components/common/TextArea"; +import { Button } from "components/common"; +import { SessionTtsInferenceResultList } from "v2/view/_common/SessionTtsInferenceResultsList"; +import { InferenceJob } from "@storyteller/components/src/jobs/InferenceJob"; +import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs"; +import { faVolumeUp } from "@fortawesome/free-solid-svg-icons"; + +interface VoiceDesignerUseVoicePageProps { + sessionWrapper: SessionWrapper; + sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; + inferenceJobs: Array; + ttsInferenceJobs: Array; +} + +export default function VoiceDesignerUseVoicePage( + props: VoiceDesignerUseVoicePageProps +) { + // const { user } = useSession(); + // let { token } = useParams() as { token: string }; + const [textBuffer, setTextBuffer] = useState(""); + + const title = "Solid Snake"; + const subText = ( +
+ Voice Designer TTS model by{" "} + Vegito1089 +
+ ); + // const tags = ["Speaking", "English", "Character", "Singing", "Spanish"]; + + let modelCreatorLink = Creator Name; + let modelTitle = title; + let modelDescription = "This is a description of the model"; + let modelUseCount = 10000; + let modelLanguage = "English"; + let modelType = "RVCv2"; + let modelUploadDate = "2021-09-10T06:15:04Z"; + let modelVisibility = ( +
+ + Public +
+ ); + let modelCreatorBanned = "good standing"; + let modelCreationIp = "0.0.0.0.0"; + let modelUpdateIp = "0.0.0.0.0"; + let frontPageFeatured = "no"; + let moderatorDeletedAt = "not deleted"; + let userDeletedAt = "not deleted"; + + const voiceDetails = [ + { label: "Creator", value: modelCreatorLink }, + { label: "Title", value: modelTitle }, + { label: "Use count", value: modelUseCount }, + { label: "Spoken language", value: modelLanguage }, + { label: "Model type", value: modelType }, + { label: "Upload date (UTC)", value: modelUploadDate }, + { label: "Visibility", value: modelVisibility }, + ]; + + const voiceDetailsModerator = [ + { label: "Creator is banned?", value: modelCreatorBanned }, + { label: "Creation IP address", value: modelCreationIp }, + { label: "Update IP address", value: modelUpdateIp }, + { label: "Mod deleted at (UTC)", value: moderatorDeletedAt }, + { label: "User deleted at (UTC)", value: userDeletedAt }, + { label: "Front page featured?", value: frontPageFeatured }, + ]; + + // const shareUrl = window.location.href; + + const handleFormSubmit = async (ev: React.FormEvent) => { + ev.preventDefault(); + }; + + const handleChangeText = (ev: React.FormEvent) => { + const textValue = (ev.target as HTMLTextAreaElement).value; + setTextBuffer(textValue); + }; + + return ( + + + + +
+
+
+

+ + Use Voice +

+