From a6e0be15b8b26057757808ad92cc88f9c0f48540 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 24 Sep 2022 13:00:15 +0700 Subject: [PATCH 1/2] tts results styling fix --- packages/storyteller-home/src/App.scss | 27 +++-- .../src/pages/index/IndexPage.tsx | 26 +++-- .../src/pages/index/TtsComponent.tsx | 7 +- .../src/pages/index/TtsResultsList.tsx | 103 +++++++++--------- 4 files changed, 91 insertions(+), 72 deletions(-) diff --git a/packages/storyteller-home/src/App.scss b/packages/storyteller-home/src/App.scss index f4371730b6..e0a9555985 100644 --- a/packages/storyteller-home/src/App.scss +++ b/packages/storyteller-home/src/App.scss @@ -249,6 +249,10 @@ p { } } +.alert { + font-size: 16px; +} + .hero-title-container { position: relative; } @@ -530,7 +534,7 @@ p { height: 100%; padding: 28px; border-radius: 12px; - border: 3px solid; + border: 2px solid; border-color: rgba(#4d4d66, 0.6); display: flex; align-items: center; @@ -538,9 +542,9 @@ p { transition: 0.3s; font-size: 18px; - &:hover { - border-color: rgba(#4d4d66, 1); - } + // &:hover { + // border-color: rgba(#4d4d66, 1); + // } } .shape-5-container { @@ -938,7 +942,6 @@ $font: montserrat, sans-serif; .about-card { min-height: 185px; - border-width: 3px; &:hover > .about-icon { transform: translate(0, -4px); @@ -1079,6 +1082,12 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active { right: 20%; } + .shape-5, + .shape-6, + .shape-7 { + display: none; + } + .section-pb-extra { padding-top: 4rem; } @@ -1153,8 +1162,12 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active { padding-top: 5rem; } - .tts-demo { - padding: 18px; + // .tts-demo { + // padding: 18px; + // } + + .alert { + font-size: 14px; } .btn { diff --git a/packages/storyteller-home/src/pages/index/IndexPage.tsx b/packages/storyteller-home/src/pages/index/IndexPage.tsx index d05992edf3..9bfc29aa82 100644 --- a/packages/storyteller-home/src/pages/index/IndexPage.tsx +++ b/packages/storyteller-home/src/pages/index/IndexPage.tsx @@ -513,16 +513,23 @@ function IndexPage() { -
+

Voice Changing Demo

-

+

This is still an early beta. Voice quality will change and improve substantially over time.

-
+

+ Brandon + + Donald Trump +
+ Real time voice to voice conversion. +

+
@@ -549,13 +556,6 @@ function IndexPage() {

-

- Brandon - - Donald Trump -
- Real time voice to voice conversion. -

@@ -627,9 +627,13 @@ function IndexPage() { We have over 2,000 voices (with more added every day), but we've selected a few to show off.

-
+ +
+ +
+

Want to hear more?

diff --git a/packages/storyteller-home/src/pages/index/TtsComponent.tsx b/packages/storyteller-home/src/pages/index/TtsComponent.tsx index 772990fec3..e879dd67a0 100644 --- a/packages/storyteller-home/src/pages/index/TtsComponent.tsx +++ b/packages/storyteller-home/src/pages/index/TtsComponent.tsx @@ -154,8 +154,8 @@ function TtsComponent(props: Props) { }); return ( -
-
+
+
@@ -193,9 +193,8 @@ function TtsComponent(props: Props) {
- -
+
); } diff --git a/packages/storyteller-home/src/pages/index/TtsResultsList.tsx b/packages/storyteller-home/src/pages/index/TtsResultsList.tsx index 181d88a982..fedfc93f4b 100644 --- a/packages/storyteller-home/src/pages/index/TtsResultsList.tsx +++ b/packages/storyteller-home/src/pages/index/TtsResultsList.tsx @@ -1,18 +1,16 @@ -import React from 'react'; -import { BucketConfig } from '@storyteller/components/src/api/BucketConfig'; -import { JobState } from '@storyteller/components/src/jobs/JobStates'; -import { TtsInferenceJob } from '@storyteller/components/src/jobs/TtsInferenceJobs'; +import React from "react"; +import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; +import { JobState } from "@storyteller/components/src/jobs/JobStates"; +import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs"; interface Props { - ttsInferenceJobs: Array, + ttsInferenceJobs: Array; } function TtsResultsList(props: Props) { + let results: Array = []; - let results : Array = []; - - props.ttsInferenceJobs.forEach(job => { - + props.ttsInferenceJobs.forEach((job) => { if (!job.maybeResultToken) { let cssStyle = "message"; let stateDescription = "Pending..."; @@ -20,11 +18,17 @@ function TtsResultsList(props: Props) { switch (job.jobState) { case JobState.PENDING: case JobState.UNKNOWN: - stateDescription = job.maybeExtraStatusDescription == null ? "Pending..." : job.maybeExtraStatusDescription; + stateDescription = + job.maybeExtraStatusDescription == null + ? "Pending..." + : job.maybeExtraStatusDescription; break; case JobState.STARTED: cssStyle = "message is-primary"; - stateDescription = job.maybeExtraStatusDescription == null ? "Started..." : job.maybeExtraStatusDescription; + stateDescription = + job.maybeExtraStatusDescription == null + ? "Started..." + : job.maybeExtraStatusDescription; break; case JobState.ATTEMPT_FAILED: cssStyle = "message is-warning"; @@ -33,7 +37,8 @@ function TtsResultsList(props: Props) { case JobState.COMPLETE_FAILURE: case JobState.DEAD: cssStyle = "message is-danger"; - stateDescription = "Failed Permanently. Please tell us in Discord so we can fix. :("; + stateDescription = + "Failed Permanently. Please tell us in Discord so we can fix. :("; break; case JobState.COMPLETE_SUCCESS: cssStyle = "message is-success"; @@ -43,45 +48,42 @@ function TtsResultsList(props: Props) { results.push(
-
+
-

- {stateDescription} -

+

{stateDescription}

-
+
 
); } else { - let audioLink = new BucketConfig().getGcsUrl(job.maybePublicBucketWavAudioPath); - let ttsPermalink = `https://fakeyou.com/tts/result/${job.maybeResultToken}` + let audioLink = new BucketConfig().getGcsUrl( + job.maybePublicBucketWavAudioPath + ); + let ttsPermalink = `https://fakeyou.com/tts/result/${job.maybeResultToken}`; results.push(
-
- {/*
+ {/*

{job.title}

*/} -
- {job.title} -

{job.rawInferenceText}

- -
-   + className="btn btn-primary w-100" + > + Permalink & Download + +
); } @@ -92,25 +94,26 @@ function TtsResultsList(props: Props) { } let title = ; - if (results.length !== 0) { - title = ( - <> -
{/* Vertical separation from above elements. */} -

TTS Results

-

- Please note that we're currently recieving massive amounts of traffic. - Creating an account on FakeYou.com places you into a higher priority queue. -

-
- - ); + if (results.length !== 0) { + title = ( + <> +
+

TTS Results

+
+ Please note that we're currently recieving massive amounts of + traffic. Creating an account on FakeYou.com places you into a higher + priority queue. +
+
+ + ); } // Users have requested reverse chronological results results.reverse(); return ( -
+
{title} {/*
Working on speeding this up @@ -118,7 +121,7 @@ function TtsResultsList(props: Props) { Sorry this is slow. I'm scaling the cluster and fixing the caching strategy.

*/} - {results} +
{results}
); } From e463ec485c23f8380325bd3be4bc2cc2500f184f Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 24 Sep 2022 13:08:59 +0700 Subject: [PATCH 2/2] image border --- packages/storyteller-home/src/App.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/storyteller-home/src/App.scss b/packages/storyteller-home/src/App.scss index e0a9555985..6a5b936c05 100644 --- a/packages/storyteller-home/src/App.scss +++ b/packages/storyteller-home/src/App.scss @@ -958,7 +958,7 @@ $font: montserrat, sans-serif; .img-border { border-radius: 8px; - border: 3px solid; + border: 2px solid; border-color: rgba(#4d4d66, 0.6); }