From 75e1096961e65ec4f89b77523557355175940345 Mon Sep 17 00:00:00 2001 From: BFlat Date: Wed, 24 Jul 2024 23:34:28 +0700 Subject: [PATCH] dev-tts page (#627) * tts revamp init * revamp 2 init * update * removed urls voice details --- .../src/components/common/Badge/Badge.scss | 2 +- .../src/components/common/Label/Label.tsx | 22 +- .../WeightCoverImage/WeightCoverImage.scss | 31 +- .../src/components/layout/TopNav/TopNav.tsx | 7 +- .../fakeyou.com/src/scss/site-refresh.scss | 5 +- .../fakeyou.com/src/v2/view/PageContainer.tsx | 16 +- .../SessionTtsInferenceResultsList.tsx | 77 ++-- .../src/v2/view/pages/dev_tts/DevTTS.scss | 92 +++-- .../src/v2/view/pages/dev_tts/DevTTS.tsx | 371 +++++++++++++++--- .../v2/view/pages/dev_tts/FeaturedVoice.tsx | 81 ++++ 10 files changed, 558 insertions(+), 146 deletions(-) create mode 100644 packages/fakeyou.com/src/v2/view/pages/dev_tts/FeaturedVoice.tsx diff --git a/packages/fakeyou.com/src/components/common/Badge/Badge.scss b/packages/fakeyou.com/src/components/common/Badge/Badge.scss index 320753c156..fd16eedb85 100644 --- a/packages/fakeyou.com/src/components/common/Badge/Badge.scss +++ b/packages/fakeyou.com/src/components/common/Badge/Badge.scss @@ -22,7 +22,7 @@ &.badge-small { font-size: 11px; - padding: 1px 6px; + padding: 2px 6px; border-radius: 0.3rem; } } diff --git a/packages/fakeyou.com/src/components/common/Label/Label.tsx b/packages/fakeyou.com/src/components/common/Label/Label.tsx index e20984c47b..9d728c68b4 100644 --- a/packages/fakeyou.com/src/components/common/Label/Label.tsx +++ b/packages/fakeyou.com/src/components/common/Label/Label.tsx @@ -14,14 +14,16 @@ export default function Label({ required, disabled, }: Props) { - return label ?
- - { invalidReason ? ( - - {invalidReason} - - ) : null } -
: null; + return label ? ( +
+ + {invalidReason ? ( + + {invalidReason} + + ) : null} +
+ ) : null; } diff --git a/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss b/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss index d7a7b5af21..54d6825afe 100644 --- a/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss +++ b/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.scss @@ -8,7 +8,8 @@ position: relative; background-color: #57577d; - img, .cover-img-edit { + img, + .cover-img-edit { position: absolute; width: 100%; height: 100%; @@ -23,32 +24,36 @@ } .cover-img-edit { - padding: .25rem; - font-size: .75rem; + padding: 0.25rem; + font-size: 0.75rem; cursor: pointer; display: flex; align-items: center; justify-content: center; - transition: all .25s ease-in-out; + transition: all 0.25s ease-in-out; color: transparent; - span { text-align: center } + span { + text-align: center; + } svg { position: absolute; color: #fff; - transition: background .25s ease-in-out; - background: rgba(#000, .5); - border-radius: .25rem; - padding: .5rem; - right: .25rem; - bottom: .25rem; + transition: background 0.25s ease-in-out; + background: rgba(#000, 0.5); + border-radius: 0.25rem; + padding: 0.5rem; + right: 0.25rem; + bottom: 0.25rem; } &:hover { color: #fff; - background: rgba(#000, .5); - svg { background: none } + background: rgba(#000, 0.5); + svg { + background: none; + } } } } diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index 6bbb0fcea3..31483a6ec2 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -68,6 +68,7 @@ export default function TopNav({ "/creator-onboarding" ); const isOnWelcomePage = window.location.pathname === "/welcome"; + const isOnTtsPage = window.location.pathname.includes("/dev-tts"); const { open } = useModal(); const openModal = () => open({ component: InferenceJobsModal }); @@ -481,11 +482,13 @@ export default function TopNav({ {(!isOnLandingPage && !isOnLoginPage && !isOnSignUpPage && - !isOnStudioPage) || + !isOnStudioPage && + !isOnTtsPage) || (loggedIn && !isOnLoginPage && !isOnSignUpPage && - !isOnStudioPage) || + !isOnStudioPage && + !isOnTtsPage) || (isOnLandingPage && isScrolled && !isOnLoginPage && diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 7f64e815d5..a4b81a7c52 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -282,6 +282,9 @@ styles with important tags: .alert { border-radius: 0.5rem !important; + padding: 0.75rem 1rem; + font-size: 14px; + font-weight: 500; } .alert-pricing { @@ -1812,7 +1815,7 @@ textarea { } .session-tts-section { - height: 450px; + height: 370px; } .session-vc-section { diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index a7e85ddbd6..620ba0835b 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -727,8 +727,20 @@ class PageContainer extends React.Component< - - + + + + + + {/* Route for initial voice creation */} diff --git a/packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsList.tsx b/packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsList.tsx index 6f8403d3b7..023b266865 100644 --- a/packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsList.tsx +++ b/packages/fakeyou.com/src/v2/view/_common/SessionTtsInferenceResultsList.tsx @@ -3,11 +3,7 @@ import { Link } from "react-router-dom"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; import { JobState } from "@storyteller/components/src/jobs/JobStates"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { - faClock, - faLink, - faHeadphonesSimple, -} from "@fortawesome/free-solid-svg-icons"; +import { faClock, faHeadphonesSimple } from "@fortawesome/free-solid-svg-icons"; import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; import { Analytics } from "../../../common/Analytics"; @@ -23,6 +19,11 @@ import { InferenceJob, } from "@storyteller/components/src/jobs/InferenceJob"; import { useInferenceJobs, useLocalize } from "hooks"; +import { Button } from "components/common"; +import { + faArrowDownToLine, + faArrowRight, +} from "@fortawesome/pro-solid-svg-icons"; interface Props { sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; @@ -115,11 +116,7 @@ function SessionTtsInferenceResultList(props: Props) { results.push(
-
-
-
{stateDescription}
-
-
+
{stateDescription}
); } else { @@ -145,27 +142,41 @@ function SessionTtsInferenceResultList(props: Props) { */}
-
+
-
{job.maybeModelTitle}
-

{job.maybeRawInferenceText}

+
+
+ {job.maybeModelTitle} +
+
+ +

{job.maybeRawInferenceText}

- {/* */} +
+ {wavesurfers} +
- {wavesurfers} - -
+ {/*
{ @@ -176,7 +187,7 @@ function SessionTtsInferenceResultList(props: Props) { {t("resultsAudioShareDownload")} -
+
*/}
@@ -227,13 +238,9 @@ function SessionTtsInferenceResultList(props: Props) { } return ( -
-
-
- {upgradeNotice} -
{results}
-
-
+
+ {upgradeNotice} +
{results}
); } diff --git a/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.scss b/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.scss index 675b4617f0..c4a4262cd5 100644 --- a/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.scss +++ b/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.scss @@ -1,37 +1,81 @@ @import "scss/colours.scss"; @import "scss/site-refresh.scss"; +.fy-featured-voices-section { + background-color: rgba($action, 0.25); + border-radius: 0.5rem; + padding: 20px; +} + +.fy-featured-voices { + background-color: $secondary-light; + border-radius: 0.5rem; + padding: 0.6rem; + border: 2px solid $action; + cursor: pointer; + transition: all 0.2s; + user-select: none; + height: 100%; + + &:hover { + border-color: $primary; + background-color: rgba($action, 0.7); + } + + .fy-select-voice { + color: $white; + padding: 1px 8px; + background-color: lighten($action, 5%); + border-radius: 0.35rem; + font-size: 13px !important; + } +} + .fy-weight-picker { - @include panel; - border-radius: .5rem; - background-color: rgba($secondary, .6); + border-radius: 0.5rem; + background-color: rgba($secondary, 0.6); - &.fy-weight-picker-full { - .fy-input input { border-radius: .5rem .5rem 0 0 } - } + .fy-card-badge { + display: inline-flex; + margin-left: 0.5rem; + } - .fy-weight-picker-preview { - border-top: 1px solid rgba(#fff,.15); - display: flex; - } + .fy-input { + margin-bottom: 0; + } +} - .fy-card-badge { - display: inline-flex; - margin-left: .5rem; - } +.fy-weight-picker-preview { + border-radius: 0 0 0.5rem 0.5rem; + padding: 0.6rem; + background-color: rgba($action, 0.8); + border: 2px solid lighten($action, 12%); + display: flex; + align-items: center; + transition: all 0.2s; + cursor: pointer; - .fy-input { margin-bottom: 0 } + &:hover { + background-color: rgba($action, 1); + border: 2px solid $primary; + } +} - .fy-weight-picker-reselect { - background-color: $secondary-light; - border-radius: .5rem; - padding: .5rem; - margin: 0 0 auto auto; - } +.fy-weight-picker-reselect { + background-color: $secondary; + border-radius: 0.5rem; + padding: 0.5rem; + margin: 0 0 auto auto; + transition: all 0.2s; + cursor: pointer; + + &:hover { + background-color: $action; + } } .fy-card-badge { - display: flex; - height: min-content; -} \ No newline at end of file + display: flex; + height: min-content; +} diff --git a/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx b/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx index 70bfd66bfb..a6561e3985 100644 --- a/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/dev_tts/DevTTS.tsx @@ -1,39 +1,84 @@ import React, { useState } from "react"; import { Link } from "react-router-dom"; -import PageHeader from 'components/layout/PageHeader'; import { MediaBrowser } from "components/modals"; import { CardBadge } from "components/entities"; -import { Button, Container, Label, Panel, TempTextArea as TextArea, TempInput as Input, WeightCoverImage } from "components/common"; -import { useDebounce, useModal } from "hooks"; +import { + Button, + Container, + Input, + Label, + Panel, + TextArea, + WeightCoverImage, +} from "components/common"; +import { useDebounce, useInferenceJobs, useModal } from "hooks"; import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; import { Weight } from "@storyteller/components/src/api/weights/GetWeight"; -import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome"; -import { faRotateLeft, faSearch } from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faArrowRight, + faBell, + faChevronRight, + faDeleteLeft, + faSearch, + faWaveformLines, + faXmark, +} from "@fortawesome/pro-solid-svg-icons"; import "./DevTTS.scss"; +import { FeaturedVoice } from "./FeaturedVoice"; +import { SessionTtsInferenceResultList } from "v2/view/_common/SessionTtsInferenceResultsList"; +import StorytellerStudioCTA from "components/common/StorytellerStudioCTA"; +import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; +import { + GenerateTtsAudio, + GenerateTtsAudioRequest, + GenerateTtsAudioResponse, + GenerateTtsAudioIsOk, +} from "@storyteller/components/src/api/tts/GenerateTtsAudio"; +import { v4 as uuidv4 } from "uuid"; +import { WeightType } from "@storyteller/components/src/api/_common/enums"; +import useWeightTypeInfo from "hooks/useWeightTypeInfo"; +import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; interface Props { - value?: any; + sessionSubscriptionsWrapper: any; } -export default function DevTTS({ value }: Props) { +export default function DevTTS({ sessionSubscriptionsWrapper }: Props) { + const { enqueueInferenceJob } = useInferenceJobs(); const { modalState, open } = useModal(); - const [search,searchSet] = useState(""); - const [updated,updatedSet] = useState(false); - const [selectedVoice,selectedVoiceSet] = useState(); - const [text,textSet] = useState(""); + const [search, searchSet] = useState(""); + const [updated, updatedSet] = useState(false); + const [selectedVoice, selectedVoiceSet] = useState(); + const [text, textSet] = useState(""); const bucketConfig = new BucketConfig(); - const preview = bucketConfig.getCdnUrl(selectedVoice?.cover_image?.maybe_cover_image_public_bucket_path || ""); - + const preview = selectedVoice?.cover_image + ?.maybe_cover_image_public_bucket_path + ? bucketConfig.getCdnUrl( + selectedVoice?.cover_image?.maybe_cover_image_public_bucket_path + ) + : "/images/avatars/default-pfp.png"; const textChange = ({ target }: { target: any }) => { textSet(target.value); }; + const [isGenerating, setIsGenerating] = useState(false); + usePrefixedDocumentTitle( + selectedVoice + ? selectedVoice.title + " Text to Speech" + : "FakeYou. Deep Fake Text to Speech." + ); - const searchChange = (setUpdate = true) => ({ target }: { target: any }) => { - // console.log("🩵",target.value); - if (setUpdate) updatedSet(true); - // console.log("aaaa",); - searchSet(target.value); - }; + const weightTypeInfo = useWeightTypeInfo( + selectedVoice?.weight_type || WeightType.NONE + ); + const { label: weightType, color: weightTagColor } = weightTypeInfo; + + const searchChange = + (setUpdate = true) => + ({ target }: { target: any }) => { + if (setUpdate) updatedSet(true); + searchSet(target.value); + }; useDebounce({ blocked: !(updated && !modalState && search), @@ -45,47 +90,257 @@ export default function DevTTS({ value }: Props) { onSelect: (weight: any) => selectedVoiceSet(weight), inputMode: 3, onSearchChange: searchChange(false), - search - } + search, + }, }); - } + }, }); - return - - -