improved TTS UI, secret API

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
 --------------------------------------------------------
 

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";

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 {

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",

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 () {
       <section className="section is-small">
         <h1 className="title is-4">Try It!</h1>
         <h2 className="subtitle is-6">
-        [ demo goes here ]
         </h2>
+
+        <br />
+
+        <TtsComponent />
+
         <br />
 
         <div className="columns">

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<HTMLSelectElement>) => {
+    const token = (ev.target as HTMLSelectElement).value;
+    setSelectedModelToken(token);
+  };
+
   const handleFormSubmit = async (ev: React.FormEvent<HTMLFormElement>) => { 
     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(<option key={token} value={token}>{name}</option>)
+  })
+
   return (
     <>
       <form onSubmit={handleFormSubmit} className="main-form">
+
+        <div className="field">
+          <div className="control">
+            <div className="select is-fullwidth">
+              <select
+                onChange={handleVoiceChange}
+                >
+                {voiceOptions}
+              </select>
+            </div>
+          </div>
+        </div>
+
         <div className="field">
           <div className="control">
             <textarea 
               onChange={handleChangeText}
-              className="textarea is-large" 
+              className="textarea is-normal" 
               value={inferenceText}
               placeholder="Type something fun..."></textarea>
           </div>
@@ -145,12 +165,12 @@ function TtsComponent(props: Props) {
           <div className="columns is-mobile">
             <div className="column has-text-centered">
               <button 
-                className="button is-danger is-large" 
+                className="button is-info is-large" 
                 disabled={false}>Generate</button>
             </div>
             <div className="column has-text-centered">
               <button 
-                className="button is-danger is-light is-large" 
+                className="button is-info is-light is-large" 
                 onClick={() => {}}>Clear</button>
             </div>
           </div>

packages/storyteller-home/src/pages/index/TtsResultsList.tsx

@@ -94,7 +94,12 @@ function TtsResultsList(props: Props) {
 
   let title = <span />;
   if  (results.length !== 0) {
-      title = <h4 className="title is-4">Session TTS Results</h4>;
+      title = (
+        <>
+          <br /> {/* Vertical separation from above elements. */}
+          <h4 className="title is-4">TTS Results</h4>
+        </>
+      );
   }
 
   // Users have requested reverse chronological results

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",