From 10ed55e4c09e39ff683e0795751b5dcebaa72e6f Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Tue, 22 Mar 2022 16:17:22 -0400 Subject: [PATCH] improved TTS UI, secret API --- README.md | 6 +++ packages/components/src/api/ApiConfig.ts | 5 +++ .../src/api/tts/GenerateTtsAudio.ts | 2 + packages/storyteller-home/package.json | 2 +- .../src/pages/index/IndexPage.tsx | 10 +++-- .../src/pages/index/TtsComponent.tsx | 40 ++++++++++++++----- .../src/pages/index/TtsResultsList.tsx | 7 +++- packages/storyteller-obs/package.json | 2 +- 8 files changed, 58 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index fbc4ec434a..4c75e5b732 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,12 @@ Develop locally without CORS: chromium-browser --disable-web-security --user-data-dir=~/chrome ``` +Or Mac, + +``` +/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --disable-web-security --user-data-dir=~/chrome +``` + To add local libraries from the monorepo as dependencies -------------------------------------------------------- diff --git a/packages/components/src/api/ApiConfig.ts b/packages/components/src/api/ApiConfig.ts index 9aec49502c..bfbb0cac4f 100644 --- a/packages/components/src/api/ApiConfig.ts +++ b/packages/components/src/api/ApiConfig.ts @@ -52,6 +52,11 @@ class ApiConfig { domain = Domain.Storyteller; } + // TODO TEMPORARY !!! + let fail_to_build = null; + domain = Domain.Storyteller; + useSsl = true; + let v2ApiHost = "api.fakeyou.com"; if (domain === Domain.Storyteller) { v2ApiHost = "api.storyteller.io"; diff --git a/packages/components/src/api/tts/GenerateTtsAudio.ts b/packages/components/src/api/tts/GenerateTtsAudio.ts index 4d84f89161..4245edc1d9 100644 --- a/packages/components/src/api/tts/GenerateTtsAudio.ts +++ b/packages/components/src/api/tts/GenerateTtsAudio.ts @@ -5,6 +5,8 @@ export interface GenerateTtsAudioRequest { uuid_idempotency_token: string, tts_model_token: string, inference_text: string, + // TODO(2022-03): TEMPORARY + is_storyteller_demo?: boolean, } export interface GenerateTtsAudioSuccess { diff --git a/packages/storyteller-home/package.json b/packages/storyteller-home/package.json index 3a6ae3fee4..4f4084e880 100644 --- a/packages/storyteller-home/package.json +++ b/packages/storyteller-home/package.json @@ -3,12 +3,12 @@ "version": "0.1.0", "private": true, "dependencies": { + "@storyteller/components": "file:../components", "@craco/craco": "^6.4.3", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", "@fortawesome/react-fontawesome": "^0.1.15", - "@storyteller/components": "file:../components", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^13.5.0", diff --git a/packages/storyteller-home/src/pages/index/IndexPage.tsx b/packages/storyteller-home/src/pages/index/IndexPage.tsx index 9e646b9f78..aa51b901da 100644 --- a/packages/storyteller-home/src/pages/index/IndexPage.tsx +++ b/packages/storyteller-home/src/pages/index/IndexPage.tsx @@ -1,10 +1,10 @@ - +import React from 'react'; import { faApple, faLinux, faTwitch, faWindows } from '@fortawesome/free-brands-svg-icons'; import { faArrowRight, faFlask, faMicrophone, faQuoteLeft, faUserCircle } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import React from 'react'; import AudioSample from './AudioSample'; import Scene from './Scene'; +import { TtsComponent } from './TtsComponent'; function IndexPage () { return ( @@ -59,8 +59,12 @@ function IndexPage () {

Try It!

- [ demo goes here ]

+ +
+ + +
diff --git a/packages/storyteller-home/src/pages/index/TtsComponent.tsx b/packages/storyteller-home/src/pages/index/TtsComponent.tsx index e57d22c46d..1ee7f6a0ed 100644 --- a/packages/storyteller-home/src/pages/index/TtsComponent.tsx +++ b/packages/storyteller-home/src/pages/index/TtsComponent.tsx @@ -1,11 +1,7 @@ import React, { useEffect, useRef, useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; -import { GenerateTtsAudio, GenerateTtsAudioErrorType, GenerateTtsAudioIsError, GenerateTtsAudioIsOk } from '@storyteller/components/src/api/tts/GenerateTtsAudio'; -//import { GetTtsInferenceJobStatus, GetTtsInferenceJobStatusIsOk, TtsInferenceJobStatus } from "@storyteller/components/src/api/jobs/GetTtsInferenceJobStatus"; - -import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; -import { GetTtsInferenceJobStatus, GetTtsInferenceJobStatusIsOk, TtsInferenceJobStatus } from "@storyteller/components/src/api/jobs/GetTtsInferenceJobStatus"; -import { JobState, jobStateCanChange, jobStateFromString } from "@storyteller/components/src/jobs/JobStates"; +import { GenerateTtsAudio, GenerateTtsAudioErrorType, GenerateTtsAudioRequest, GenerateTtsAudioIsError, GenerateTtsAudioIsOk } from '@storyteller/components/src/api/tts/GenerateTtsAudio'; +import { jobStateCanChange } from "@storyteller/components/src/jobs/JobStates"; import { TtsInferenceJob, TtsInferenceJobStateResponsePayload } from "@storyteller/components/src/jobs/TtsInferenceJobs"; import { ApiConfig } from '@storyteller/components'; import { TtsResultsList } from './TtsResultsList' @@ -99,6 +95,11 @@ function TtsComponent(props: Props) { setInferenceText(textValue); }; + const handleVoiceChange = (ev: React.FormEvent) => { + const token = (ev.target as HTMLSelectElement).value; + setSelectedModelToken(token); + }; + const handleFormSubmit = async (ev: React.FormEvent) => { ev.preventDefault(); @@ -110,10 +111,11 @@ function TtsComponent(props: Props) { return false; } - const request = { + const request : GenerateTtsAudioRequest = { uuid_idempotency_token: uuidv4(), tts_model_token: selectedModelToken, inference_text: inferenceText, + is_storyteller_demo: true, // TODO(2022-03): Temporary. } const response = await GenerateTtsAudio(request) @@ -128,14 +130,32 @@ function TtsComponent(props: Props) { return false; }; + let voiceOptions : any = []; + DEMO_VOICES_TOKEN_TO_NAME.forEach((name, token) => { + voiceOptions.push() + }) + return ( <>
+ +
+
+
+ +
+
+
+
@@ -145,12 +165,12 @@ 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 671d3afaf7..60acba92c9 100644 --- a/packages/storyteller-home/src/pages/index/TtsResultsList.tsx +++ b/packages/storyteller-home/src/pages/index/TtsResultsList.tsx @@ -94,7 +94,12 @@ function TtsResultsList(props: Props) { let title = ; if (results.length !== 0) { - title =

Session TTS Results

; + title = ( + <> +
{/* Vertical separation from above elements. */} +

TTS Results

+ + ); } // Users have requested reverse chronological results diff --git a/packages/storyteller-obs/package.json b/packages/storyteller-obs/package.json index a98ad2139a..c88ce61c98 100644 --- a/packages/storyteller-obs/package.json +++ b/packages/storyteller-obs/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { - "@storyteller/components": "0.1.0", + "@storyteller/components": "file:../components", "@craco/craco": "^6.4.3", "@fortawesome/fontawesome-svg-core": "^1.2.36", "@fortawesome/free-brands-svg-icons": "^5.15.4",