From 3e1e2eceda31df3e29275f6581de430c4a366882 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 3 Nov 2023 08:07:10 +0700 Subject: [PATCH 1/3] use voice page --- .../fakeyou.com/src/v2/view/PageContainer.tsx | 10 ++ .../VoiceDesignerUseVoicePage.tsx | 157 ++++++++++++++++++ 2 files changed, 167 insertions(+) create mode 100644 packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerUseVoicePage.tsx diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 6104ababfa..6449e3b2b6 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -93,6 +93,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"; interface Props { sessionWrapper: SessionWrapper; @@ -644,6 +645,15 @@ class PageContainer extends React.Component< + + + + 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..87812c021b --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerUseVoicePage.tsx @@ -0,0 +1,157 @@ +import React from "react"; +import { + faEdit, + faEye, + faMemo, + faMemoCircleInfo, + faMessages, + faTrash, +} 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 { RatingButtons } from "v2/view/_common/ratings/RatingButtons"; +import { RatingStats } from "v2/view/_common/ratings/RatingStats"; +import ShareButton from "components/common/ShareButton/ShareButton"; +import Container from "components/common/Container/Container"; + +interface VoiceDesignerUseVoicePageProps { + sessionWrapper: SessionWrapper; + sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; +} + +export default function VoiceDesignerUseVoicePage( + props: VoiceDesignerUseVoicePageProps +) { + // let { token } = useParams() as { token: string }; + + const title = "Solid Snake"; + const subText = ( +
+
+ RVCv2 +
+

+ V2V 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 shareButton = ; + + return ( + + + + {/* TTS Voice Generation */} + + {modelDescription && ( + +

+ + Description +

+

{modelDescription}

+ + )} + + +

+ + Voice Details +

+ + + {voiceDetails.map((item, index) => ( + + + + + ))} + {props.sessionWrapper.canBanUsers() && + voiceDetailsModerator.map((item, index) => ( + + + + + ))} + +
+ {item.label} + {item.value}
+ {item.label} + {item.value}
+ + {props.sessionWrapper.canBanUsers() && ( +
+ + + Edit Model Details + + + + Delete Model + +
+ )} + + + +

+ + Comments +

+ + + + ); +} From 11aff18246d33c191335fb5b46fb9a194ba59d9a Mon Sep 17 00:00:00 2001 From: BFlat Date: Thu, 9 Nov 2023 00:28:19 +0700 Subject: [PATCH 2/3] update --- .../layout/PageHeader/PageHeader.tsx | 13 ++-- .../fakeyou.com/src/scss/site-refresh.scss | 2 +- .../fakeyou.com/src/v2/view/PageContainer.tsx | 6 +- .../VoiceDesignerUseVoicePage.tsx | 67 +++++++++++++++++-- 4 files changed, 74 insertions(+), 14 deletions(-) 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 959349bedb..6c75f0b9ef 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -654,7 +654,7 @@ class PageContainer extends React.Component< exact path="/voice-designer/dataset/:dataset_token/edit" {...{ - sessionWrapper: this.props.sessionWrapper + sessionWrapper: this.props.sessionWrapper, }} component={DatasetEditor} /> @@ -676,11 +676,13 @@ class PageContainer extends React.Component< sessionSubscriptionsWrapper={ this.props.sessionSubscriptionsWrapper } + inferenceJobs={this.props.inferenceJobs} + ttsInferenceJobs={this.props.ttsInferenceJobs} /> - + 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 index 87812c021b..723141ad76 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerUseVoicePage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerUseVoicePage.tsx @@ -1,11 +1,13 @@ -import React from "react"; +import React, { useState } from "react"; import { + faBarsStaggered, 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"; @@ -14,20 +16,27 @@ import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session import PageHeader from "components/layout/PageHeader"; import { CommentComponent } from "v2/view/_common/comments/CommentComponent"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; -import { RatingButtons } from "v2/view/_common/ratings/RatingButtons"; -import { RatingStats } from "v2/view/_common/ratings/RatingStats"; -import ShareButton from "components/common/ShareButton/ShareButton"; 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"; 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 = ( @@ -36,7 +45,7 @@ export default function VoiceDesignerUseVoicePage( RVCv2

- V2V model by Vegito1089 + TTS model by Vegito1089

); @@ -82,13 +91,57 @@ export default function VoiceDesignerUseVoicePage( ]; const shareUrl = window.location.href; - const shareButton = ; + + const handleFormSubmit = async (ev: React.FormEvent) => { + ev.preventDefault(); + }; + + const handleChangeText = (ev: React.FormEvent) => { + const textValue = (ev.target as HTMLTextAreaElement).value; + setTextBuffer(textValue); + }; return ( - {/* TTS Voice Generation */} + +
+
+
+

+ + Use Voice +

+