Select Trump models on page

packages/components/src/api/ApiConfig.ts

@@ -95,6 +95,9 @@ class ApiConfig {
         }
     }
 
+    //v2ApiHost = "api.dev.fakeyou.com:12345";
+    //useSsl = false;
+
     this.domain = domain;
     this.useSsl = useSsl;
     this.v2ApiHost = v2ApiHost;

packages/fakeyou.com/src/v2/view/PageContainer.tsx

@@ -66,7 +66,7 @@ import { GetComputedTtsCategoryAssignmentsSuccessResponse } from "@storyteller/c
 import { NewsPage } from "./pages/news/NewsPage";
 import { LandingPage } from "./pages/landing/LandingPage";
 import { ChannelsPage } from "./pages/channels/Channels";
-import { TrumpTtsPage } from "./pages/trump/TrumpTtsPage";
+import { TrumpTtsPage } from "./pages/character/trump/TrumpTtsPage";
 //import { LandingPage } from "./pages/landing/LandingPage";
 //import { VcModelListPage } from "./pages/vc/vc_model_list/VcModelListPage";
 
@@ -480,7 +480,7 @@ class PageContainer extends React.Component<Props, State> {
               <VocodesPage />
             </Route>
 
-            <Route path="/donald-trump">
+            <Route path="/character/donald-trump">
               <TrumpTtsPage
                 sessionWrapper={this.props.sessionWrapper}
                 sessionSubscriptionsWrapper={

packages/fakeyou.com/src/v2/view/pages/character/trump/TrumpTtsPage.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useCallback, useState } from "react";
 import { t } from "i18next";
 import { Trans } from "react-i18next";
 import { Link } from "react-router-dom";
-import { SessionTtsInferenceResultList } from "../../_common/SessionTtsInferenceResultsList";
+import { SessionTtsInferenceResultList } from "../../../_common/SessionTtsInferenceResultsList";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import { TtsInferenceJob } from "@storyteller/components/src/jobs/TtsInferenceJobs";
 import { TtsModelUploadJob } from "@storyteller/components/src/jobs/TtsModelUploadJobs";
@@ -24,7 +24,7 @@ import {
   ListTtsCategoriesIsError,
   ListTtsCategoriesIsOk,
 } from "@storyteller/components/src/api/category/ListTtsCategories";
-import { TtsCategoryType } from "../../../../AppWrapper";
+import { TtsCategoryType } from "../../../../../AppWrapper";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faBarsStaggered,
@@ -32,19 +32,19 @@ import {
   faVolumeHigh,
 } from "@fortawesome/free-solid-svg-icons";
 import { motion } from "framer-motion";
-import { container, panel } from "../../../../data/animation";
+import { container, panel } from "../../../../../data/animation";
 import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper";
 import { TtsPageHero } from "./TrumpTtsPageHero";
-import { Analytics } from "../../../../common/Analytics";
+import { Analytics } from "../../../../../common/Analytics";
 import {
   GetComputedTtsCategoryAssignments,
   GetComputedTtsCategoryAssignmentsIsError,
   GetComputedTtsCategoryAssignmentsIsOk,
   GetComputedTtsCategoryAssignmentsSuccessResponse,
 } from "@storyteller/components/src/api/category/GetComputedTtsCategoryAssignments";
-import { DynamicallyCategorizeModels } from "../../../../model/categories/SyntheticCategory";
+import { DynamicallyCategorizeModels } from "../../../../../model/categories/SyntheticCategory";
 
-import { usePrefixedDocumentTitle } from "../../../../common/UsePrefixedDocumentTitle";
+import { usePrefixedDocumentTitle } from "../../../../../common/UsePrefixedDocumentTitle";
 import { SearchOmnibar } from "./search/SearchOmnibar";
 export interface EnqueueJobResponsePayload {
   success: boolean;
@@ -343,6 +343,27 @@ function TrumpTtsPage(props: Props) {
     );
   }
 
+  const TOKENS = new Set<string>([
+    "TM:pmd1wm3kf6az", // Development: "Fake Donald Trump #1"
+    "TM:7rrwdhdq8ezq", // Development: "Fake Donald Trump #2"
+    //"TM:aejrk66wq3ss", // Production: "Donald Trump (bibby's model)"
+    "TM:pyzss4phqk6r", // Production: "Donald Trump (Sarcastic)"
+    "TM:4v0ft4j72y2g", // Production: "Donald Trump (Angry)"
+    "TM:03690khwpsbz", // Production: "Donald Trump (Casual Speech)"
+  ]);
+
+  let trumpModels = props.ttsModels.filter((model) => {
+    return TOKENS.has(model.model_token);
+  })
+
+  let maybeSelectedModel = props.maybeSelectedTtsModel;
+
+  if (maybeSelectedModel !== undefined && !TOKENS.has(maybeSelectedModel.model_token)) {
+    // If we don't select a trump model by default (which is rare), the list will be empty. 
+    // We'll set it here.
+    maybeSelectedModel = trumpModels[0];
+  }
+
   return (
     <motion.div initial="hidden" animate="visible" variants={container}>
       <TtsPageHero
@@ -362,7 +383,7 @@ function TrumpTtsPage(props: Props) {
               {/* Explore Rollout */}
               <SearchOmnibar
                 allTtsCategories={props.allTtsCategories}
-                allTtsModels={props.ttsModels}
+                allTtsModels={trumpModels}
                 allTtsCategoriesByTokenMap={props.allTtsCategoriesByTokenMap}
                 allTtsModelsByTokenMap={props.allTtsModelsByTokenMap}
                 ttsModelsByCategoryToken={props.ttsModelsByCategoryToken}
@@ -370,7 +391,7 @@ function TrumpTtsPage(props: Props) {
                 setDropdownCategories={props.setDropdownCategories}
                 selectedCategories={props.selectedCategories}
                 setSelectedCategories={props.setSelectedCategories}
-                maybeSelectedTtsModel={props.maybeSelectedTtsModel}
+                maybeSelectedTtsModel={maybeSelectedModel}
                 setMaybeSelectedTtsModel={props.setMaybeSelectedTtsModel}
                 selectedTtsLanguageScope={props.selectedTtsLanguageScope}
                 setSelectedTtsLanguageScope={props.setSelectedTtsLanguageScope}

packages/fakeyou.com/src/v2/view/pages/character/trump/TrumpTtsPageHero.tsx

@@ -9,9 +9,9 @@ import {
   faArrowRight,
   faVolume,
 } from "@fortawesome/pro-solid-svg-icons";
-import { Analytics } from "../../../../common/Analytics";
-import { WebUrl } from "../../../../common/WebUrl";
-import { PageHeaderWithImage } from "../../_common/PageHeaderWithImage";
+import { Analytics } from "../../../../../common/Analytics";
+import { WebUrl } from "../../../../../common/WebUrl";
+import { PageHeaderWithImage } from "../../../_common/PageHeaderWithImage";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -20,7 +20,7 @@ interface Props {
 
 export function TtsPageHero(props: Props) {
   const randomImage = useMemo(() => {
-    const images = ["mascot/trump.webp"];
+    const images = ["/mascot/trump.webp"];
 
     return images[Math.floor(Math.random() * images.length)];
   }, []);
@@ -57,7 +57,7 @@ export function TtsPageHero(props: Props) {
   const titleIcon = <FontAwesomeIcon icon={faVolume} className="me-3" />;
   const title = <>Donald Trump TTS</>;
   const subText = (
-    <>Type your text below and hear it in the voice of Donald Trump.</>
+    <>FakeYou has the very best Donald Trump AI voice on the internet. Use deep fake Donald Trump to say your favorite memes.</>
   );
   const actionButtons = (
     <>

packages/fakeyou.com/src/v2/view/pages/character/trump/search/SearchOmnibar.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { TtsCategoryType } from "../../../../../AppWrapper";
+import { TtsCategoryType } from "../../../../../../AppWrapper";
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
 import { ScopedVoiceModelOptions } from "./components/ScopedVoiceModelOptions";
 import { VoiceCountLabel } from "./components/VoiceCountLabel";

packages/fakeyou.com/src/v2/view/pages/character/trump/search/components/ScopedVoiceModelOptions.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
-import { TtsCategoryType } from "../../../../../../AppWrapper";
+import { TtsCategoryType } from "../../../../../../../AppWrapper";
 import Select, { createFilter } from "react-select";
 import { SearchFieldClass } from "./SearchFieldClass";
-import { FastReactSelectOption } from "../../../../_common/react_select/FastReactSelectOption";
-import { Analytics } from "../../../../../../common/Analytics";
-import { FixedSingleValueSelectOption } from "../../../../_common/react_select/FixedSingleValueSelectOption";
+import { FastReactSelectOption } from "../../../../../_common/react_select/FastReactSelectOption";
+import { Analytics } from "../../../../../../../common/Analytics";
+import { FixedSingleValueSelectOption } from "../../../../../_common/react_select/FixedSingleValueSelectOption";
 import { faMicrophone } from "@fortawesome/pro-duotone-svg-icons";
 
 interface Props {

packages/fakeyou.com/src/v2/view/pages/character/trump/search/components/VoiceCountLabel.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
-import { TtsCategoryType } from "../../../../../../AppWrapper";
+import { TtsCategoryType } from "../../../../../../../AppWrapper";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faShuffle } from "@fortawesome/pro-solid-svg-icons";
-import { Analytics } from "../../../../../../common/Analytics";
+import { Analytics } from "../../../../../../../common/Analytics";
 import { GetRandomArrayValue } from "@storyteller/components/src/utils/GetRandomArrayValue";
 import Tippy from "@tippyjs/react";
 import "tippy.js/dist/tippy.css";

packages/fakeyou.com/src/v2/view/pages/character/trump/search/filters/CategoryOptions.tsx

@@ -2,11 +2,11 @@ import React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRightLong, faTags } from "@fortawesome/free-solid-svg-icons";
 import { TtsModelListItem } from "@storyteller/components/src/api/tts/ListTtsModels";
-import { TtsCategoryType } from "../../../../../../AppWrapper";
+import { TtsCategoryType } from "../../../../../../../AppWrapper";
 //import { useTranslation } from "react-i18next";
 import Select from "react-select";
 import { SearchFieldClass } from "../components/SearchFieldClass";
-import { Analytics } from "../../../../../../common/Analytics";
+import { Analytics } from "../../../../../../../common/Analytics";
 import { t } from "i18next";
 
 interface Props {

packages/fakeyou.com/src/v2/view/pages/character/trump/search/filters/LanguageOptions.tsx

@@ -3,8 +3,8 @@ import { faGlobe } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Select from "react-select";
 import { SearchFieldClass } from "../components/SearchFieldClass";
-import { AVAILABLE_TTS_LANGUAGE_CATEGORY_MAP } from "../../../../../../_i18n/AvailableLanguageMap";
-import { Analytics } from "../../../../../../common/Analytics";
+import { AVAILABLE_TTS_LANGUAGE_CATEGORY_MAP } from "../../../../../../../_i18n/AvailableLanguageMap";
+import { Analytics } from "../../../../../../../common/Analytics";
 import { t } from "i18next";
 
 interface Props {