From aec96f4dfd9685a064ea31cda71f29451dc09bc4 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Mon, 18 Dec 2023 21:39:59 +0700
Subject: [PATCH] search bar working with search results page

---
 .../common/SearchBar/SearchBar.scss           |    7 +
 .../components/common/SearchBar/SearchBar.tsx |   53 +-
 .../common/SearchBar/SearchField.tsx          |    3 +
 .../SearchBar/SearchResultsDropdown.tsx       |   28 +-
 .../layout/PageHeader/PageHeader.tsx          |   17 +-
 .../fakeyou.com/src/context/SearchContext.tsx |   23 +
 packages/fakeyou.com/src/context/index.ts     |    2 +-
 .../fakeyou.com/src/v2/view/PageContainer.tsx | 1148 +++++++++--------
 .../src/v2/view/search/SearchPage.tsx         |  111 ++
 9 files changed, 805 insertions(+), 587 deletions(-)
 create mode 100644 packages/fakeyou.com/src/context/SearchContext.tsx
 create mode 100644 packages/fakeyou.com/src/v2/view/search/SearchPage.tsx

diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss
index dc3e8eb66b..bf9c42fc6d 100644
--- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss
+++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.scss
@@ -81,6 +81,13 @@
   }
 }
 
+.loading-results {
+  &:hover {
+    background-color: $panel-inner !important;
+    cursor: default !important;
+  }
+}
+
 @media (max-width: 992px) {
   .search-bar-container {
     width: 100%;
diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx
index f69a167dbf..46b9928ea7 100644
--- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx
+++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx
@@ -8,6 +8,8 @@ import {
 import SearchResultsDropdown from "./SearchResultsDropdown";
 import SearchField from "./SearchField";
 import "./SearchBar.scss";
+import { useHistory, useLocation } from "react-router-dom";
+import { useSearch } from "context/SearchContext";
 
 interface SearchBarProps {
   autoFocus?: boolean;
@@ -22,13 +24,20 @@ export default function SearchBar({
   onFocus,
   isFocused,
 }: SearchBarProps) {
-  const [searchTerm, setSearchTerm] = useState<string>("");
+  let history = useHistory();
+  let location = useLocation();
+
+  const { searchTerm, setSearchTerm } = useSearch();
   const [foundTtsModels, setFoundTtsModels] = useState<TtsModel[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const isOnSearchPage = location.pathname.startsWith("/search");
 
-  const maybeSearch = useCallback(async (value: string) => {
-    setSearchTerm(value);
-  }, []);
+  const maybeSearch = useCallback(
+    async (value: string) => {
+      setSearchTerm(value);
+    },
+    [setSearchTerm]
+  );
 
   const doSearch = useCallback(
     async (value: string) => {
@@ -53,8 +62,34 @@ export default function SearchBar({
   );
 
   useEffect(() => {
-    doSearch(searchTerm);
-  }, [doSearch, searchTerm]);
+    if (isOnSearchPage) {
+      const query = new URLSearchParams(location.search).get("query");
+      if (query) {
+        setSearchTerm(query);
+      }
+    }
+  }, [isOnSearchPage, location.search, setSearchTerm]);
+
+  useEffect(() => {
+    if (isOnSearchPage) {
+      history.push(`/search/weights?query=${encodeURIComponent(searchTerm)}`);
+    } else {
+      doSearch(searchTerm);
+    }
+  }, [searchTerm, history, location.pathname, doSearch, isOnSearchPage]);
+
+  const handleSearchButtonClick = useCallback(() => {
+    history.push(`/search/weights?query=${encodeURIComponent(searchTerm)}`);
+  }, [searchTerm, history]);
+
+  const handleKeyPress = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        handleSearchButtonClick();
+      }
+    },
+    [handleSearchButtonClick]
+  );
 
   return (
     <div className="search-bar-container">
@@ -62,22 +97,24 @@ export default function SearchBar({
         <SearchField
           value={searchTerm}
           onChange={maybeSearch}
+          onKeyPress={handleKeyPress}
           onFocus={onFocus}
           onBlur={onBlur}
           autoFocus={autoFocus}
         />
-        {isFocused && (
+        {isFocused && !isOnSearchPage && (
           <SearchResultsDropdown
             data={foundTtsModels}
             isNoResults={foundTtsModels.length === 0 && searchTerm !== ""}
             isLoading={isLoading}
+            searchTerm={searchTerm}
           />
         )}
       </div>
 
       <Button
         icon={faSearch}
-        onClick={() => {}}
+        onClick={handleSearchButtonClick}
         variant="secondary"
         className="search-bar-button d-none d-lg-flex"
       />
diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx
index 6597f331fb..832b01f30b 100644
--- a/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx
+++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchField.tsx
@@ -7,6 +7,7 @@ interface SearchFieldProps {
   onFocus?: () => void;
   onBlur?: () => void;
   autoFocus?: boolean;
+  onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 
 export default function SearchField({
@@ -14,6 +15,7 @@ export default function SearchField({
   onChange,
   onFocus,
   onBlur,
+  onKeyPress,
   autoFocus = false,
 }: SearchFieldProps) {
   return (
@@ -26,6 +28,7 @@ export default function SearchField({
       onFocus={onFocus}
       onBlur={onBlur}
       autoFocus={autoFocus}
+      onKeyPress={onKeyPress}
     />
   );
 }
diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx
index 95d78dc8dc..93bc44cf6f 100644
--- a/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx
+++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx
@@ -7,25 +7,34 @@ interface SearchResultsDropdownProps {
   data: TtsModel[];
   isNoResults?: boolean;
   isLoading?: boolean;
+  searchTerm?: string;
 }
 
 export default function SearchResultsDropdown({
   data,
   isNoResults,
   isLoading,
+  searchTerm,
 }: SearchResultsDropdownProps) {
   const history = useHistory();
 
   const handleResultClick = (item: TtsModel, event: React.MouseEvent) => {
     event.stopPropagation();
     event.preventDefault();
-    history.push(`/weights/${item.model_token}`);
+    history.push(`/weight/${item.model_token}`);
   };
 
   const handleInnerClick = (event: any) => {
     event.stopPropagation();
   };
 
+  const handleUrlPush = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (searchTerm) {
+      history.push(`/search/weights?query=${encodeURIComponent(searchTerm)}`);
+    }
+  };
+
   return (
     <>
       {data.length !== 0 && (
@@ -56,30 +65,27 @@ export default function SearchResultsDropdown({
               </div>
             );
           })}
-          <div className="search-results-dropdown-item view-more p-3">
+          <div
+            className="search-results-dropdown-item view-more p-3"
+            onClick={handleUrlPush}
+          >
             View more results
           </div>
         </div>
       )}
       {data.length === 0 && !isLoading && isNoResults && (
         <div className="search-results-dropdown">
-          <div
-            className="search-results-dropdown-item p-3 no-results"
-            onClick={handleInnerClick}
-          >
+          <div className="search-results-dropdown-item p-3 no-results">
             No results found
           </div>
         </div>
       )}
       {isLoading && isNoResults && (
         <div className="search-results-dropdown">
-          <div
-            className="search-results-dropdown-item p-3"
-            onClick={handleInnerClick}
-          >
+          <div className="search-results-dropdown-item p-3 loading-results">
             <div className="text-center">
               <div
-                className="spinner-border spinner-border-md opacity-50"
+                className="spinner-border spinner-border-md opacity-75"
                 role="status"
               >
                 <span className="visually-hidden">Loading...</span>
diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
index f165259cef..7e82f37462 100644
--- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
+++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx
@@ -15,7 +15,8 @@ interface PageHeaderProps {
   back?: BackConfig;
   titleIcon?: IconDefinition;
   title: string | React.ReactNode;
-  subText: string | React.ReactNode;
+  titleH2?: boolean;
+  subText?: string | React.ReactNode;
   full?: boolean;
   showButton?: boolean;
   extension?: React.ReactNode;
@@ -42,6 +43,7 @@ export default function PageHeader({
   back,
   titleIcon,
   title,
+  titleH2 = false,
   subText,
   full,
   showButton,
@@ -111,10 +113,15 @@ export default function PageHeader({
               } justify-content-center gap-4 py-2`}
             >
               <div>
-                <h1 className="fw-bold">
-                  {/* {icon} */}
-                  {title}
-                </h1>
+                {titleH2 ? (
+                  <h2 className="fw-bold">{title}</h2>
+                ) : (
+                  <h1 className="fw-bold">
+                    {/* {icon} */}
+                    {title}
+                  </h1>
+                )}
+
                 <p className={typeof subText === "string" ? "opacity-75" : ""}>
                   {subText}
                 </p>
diff --git a/packages/fakeyou.com/src/context/SearchContext.tsx b/packages/fakeyou.com/src/context/SearchContext.tsx
new file mode 100644
index 0000000000..c4cdd9a787
--- /dev/null
+++ b/packages/fakeyou.com/src/context/SearchContext.tsx
@@ -0,0 +1,23 @@
+import React, { createContext, useContext, useState } from "react";
+
+interface SearchContextType {
+  searchTerm: string;
+  setSearchTerm: (value: string) => void;
+}
+
+const SearchContext = createContext<SearchContextType>({
+  searchTerm: "",
+  setSearchTerm: () => {},
+});
+
+export const useSearch = () => useContext(SearchContext);
+
+export const SearchProvider: React.FC = ({ children }) => {
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  return (
+    <SearchContext.Provider value={{ searchTerm, setSearchTerm }}>
+      {children}
+    </SearchContext.Provider>
+  );
+};
diff --git a/packages/fakeyou.com/src/context/index.ts b/packages/fakeyou.com/src/context/index.ts
index 104d13cde7..cfd97debb2 100644
--- a/packages/fakeyou.com/src/context/index.ts
+++ b/packages/fakeyou.com/src/context/index.ts
@@ -1,4 +1,4 @@
 import InferenceJobsContext from "./InferenceJobsContext";
 import SessionContext from "./SessionContext";
 
-export { InferenceJobsContext, SessionContext };
\ No newline at end of file
+export { InferenceJobsContext, SessionContext };
diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
index fc2c46e701..13fffd263d 100644
--- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx
+++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx
@@ -100,6 +100,8 @@ import { ProfilePage } from "./pages/profile/profile_view/ProfilePage";
 import { ModerationJobControlPage } from "./pages/moderation/job_control/ModerationJobControlPage";
 import WeightPage from "./pages/weight/WeightPage";
 import ExplorePage from "./pages/explore/ExplorePage";
+import SearchPage from "./search/SearchPage";
+import { SearchProvider } from "context/SearchContext";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -209,648 +211,670 @@ class PageContainer extends React.Component<
 
   public render() {
     return (
-      <div id="wrapper" className="no-padding">
-        <div id="overlay"></div>
+      <SearchProvider>
+        <div id="wrapper" className="no-padding">
+          <div id="overlay"></div>
 
-        <TopNav
-          sessionWrapper={this.props.sessionWrapper}
-          logoutHandler={this.logout}
-          querySessionCallback={this.props.querySessionAction}
-          querySessionSubscriptionsCallback={
-            this.props.querySessionSubscriptionsAction
-          }
-        />
-        <SideNav
-          sessionWrapper={this.props.sessionWrapper}
-          logoutHandler={this.logout}
-          querySessionCallback={this.props.querySessionAction}
-          querySessionSubscriptionsCallback={
-            this.props.querySessionSubscriptionsAction
-          }
-        />
+          <TopNav
+            sessionWrapper={this.props.sessionWrapper}
+            logoutHandler={this.logout}
+            querySessionCallback={this.props.querySessionAction}
+            querySessionSubscriptionsCallback={
+              this.props.querySessionSubscriptionsAction
+            }
+          />
+          <SideNav
+            sessionWrapper={this.props.sessionWrapper}
+            logoutHandler={this.logout}
+            querySessionCallback={this.props.querySessionAction}
+            querySessionSubscriptionsCallback={
+              this.props.querySessionSubscriptionsAction
+            }
+          />
 
-        <div id="page-content-wrapper">
-          <MobileMenu sessionWrapper={this.props.sessionWrapper} />
-          <Switch>
-            <Route path="/firehose">
-              <FirehoseEventListPage
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+          <div id="page-content-wrapper">
+            <MobileMenu sessionWrapper={this.props.sessionWrapper} />
+            <Switch>
+              <Route path="/firehose">
+                <FirehoseEventListPage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/news">
-              <NewsPage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-              />
-            </Route>
+              <Route path="/news">
+                <NewsPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                />
+              </Route>
 
-            <Route path="/channels">
-              <ChannelsPage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-              />
-            </Route>
+              <Route path="/channels">
+                <ChannelsPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                />
+              </Route>
 
-            <Route path="/leaderboard">
-              <LeaderboardPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/leaderboard">
+                <LeaderboardPage sessionWrapper={this.props.sessionWrapper} />
+              </Route>
 
-            <Route path="/login">
-              <LoginPage
-                sessionWrapper={this.props.sessionWrapper}
-                querySessionAction={this.props.querySessionAction}
-                querySessionSubscriptionsAction={
-                  this.props.querySessionSubscriptionsAction
-                }
-              />
-            </Route>
+              <Route path="/login">
+                <LoginPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  querySessionAction={this.props.querySessionAction}
+                  querySessionSubscriptionsAction={
+                    this.props.querySessionSubscriptionsAction
+                  }
+                />
+              </Route>
 
-            <Route path="/password-reset/verify">
-              <PasswordResetVerificationPage
-                sessionWrapper={this.props.sessionWrapper}
-                querySessionAction={this.props.querySessionAction}
-                querySessionSubscriptionsAction={
-                  this.props.querySessionSubscriptionsAction
-                }
-              />
-            </Route>
+              <Route path="/password-reset/verify">
+                <PasswordResetVerificationPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  querySessionAction={this.props.querySessionAction}
+                  querySessionSubscriptionsAction={
+                    this.props.querySessionSubscriptionsAction
+                  }
+                />
+              </Route>
 
-            <Route path="/password-reset">
-              <PasswordResetEmailPage
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/password-reset">
+                <PasswordResetEmailPage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/profile/:username/edit">
-              <ProfileEditFc sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/profile/:username/edit">
+                <ProfileEditFc sessionWrapper={this.props.sessionWrapper} />
+              </Route>
 
-            <Route path="/profile/:username/ban">
-              <ProfileBanFc sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/profile/:username/ban">
+                <ProfileBanFc sessionWrapper={this.props.sessionWrapper} />
+              </Route>
 
-            <Route path="/profile/:username">
-              <ProfilePage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-              />
-            </Route>
+              <Route path="/profile/:username">
+                <ProfilePage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                />
+              </Route>
 
-            {/* New Profile Page */}
-            <Route path="/dev-profile/:username">
-              <NewProfilePage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-              />
-            </Route>
+              {/* New Profile Page */}
+              <Route path="/dev-profile/:username">
+                <NewProfilePage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                />
+              </Route>
 
-            <Route path="/signup">
-              <SignupPage
-                querySessionCallback={() => {}}
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/signup">
+                <SignupPage
+                  querySessionCallback={() => {}}
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/pricing" exact={true}>
-              <PricingPage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-              />
-            </Route>
+              <Route path="/pricing" exact={true}>
+                <PricingPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                />
+              </Route>
 
-            <Route path="/checkout_success" exact={true}>
-              <CheckoutSuccessPage
-                querySessionCallback={() => {}}
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
-            <Route path="/checkout_cancel" exact={true}>
-              <CheckoutCancelPage
-                querySessionCallback={() => {}}
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
-            <Route path="/portal_success" exact={true}>
-              <PortalSuccessPage
-                querySessionCallback={() => {}}
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/checkout_success" exact={true}>
+                <CheckoutSuccessPage
+                  querySessionCallback={() => {}}
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
+              <Route path="/checkout_cancel" exact={true}>
+                <CheckoutCancelPage
+                  querySessionCallback={() => {}}
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
+              <Route path="/portal_success" exact={true}>
+                <PortalSuccessPage
+                  querySessionCallback={() => {}}
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/media/:token">
-              <MediaPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/media/:token">
+                <MediaPage sessionWrapper={this.props.sessionWrapper} />
+              </Route>
 
-            <Route path="/explore">
-              <ExplorePage />
-            </Route>
+              <Route path="/explore">
+                <ExplorePage />
+              </Route>
 
-            {/* <Route path="/weight/:weight_token/edit">
+              {/* <Route path="/weight/:weight_token/edit">
               <WeightEditPage />
             </Route> */}
 
-            <Route path="/weight/:weight_token">
-              <WeightPage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-                inferenceJobs={this.props.inferenceJobs}
-                enqueueInferenceJob={this.props.enqueueInferenceJob}
-                inferenceJobsByCategory={this.props.inferenceJobsByCategory}
-                ttsInferenceJobs={this.props.ttsInferenceJobs}
-                enqueueTtsJob={this.props.enqueueTtsJob}
-              />
-            </Route>
+              <Route path="/weight/:weight_token">
+                <WeightPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                  inferenceJobs={this.props.inferenceJobs}
+                  enqueueInferenceJob={this.props.enqueueInferenceJob}
+                  inferenceJobsByCategory={this.props.inferenceJobsByCategory}
+                  ttsInferenceJobs={this.props.ttsInferenceJobs}
+                  enqueueTtsJob={this.props.enqueueTtsJob}
+                />
+              </Route>
 
-            <Route path="/dev-tts">
-              <TtsModelSearchPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/search/weights">
+                <SearchPage />
+              </Route>
 
-            <Route path="/tts/result/:token/edit">
-              <TtsResultEditPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/dev-tts">
+                <TtsModelSearchPage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/tts/result/:token/delete">
-              <TtsResultDeletePage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/tts/result/:token/edit">
+                <TtsResultEditPage sessionWrapper={this.props.sessionWrapper} />
+              </Route>
 
-            <Route path="/tts/result/:token">
-              <TtsResultViewPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/tts/result/:token/delete">
+                <TtsResultDeletePage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/tts/:token/edit">
-              <TtsModelEditPage
-                sessionWrapper={this.props.sessionWrapper}
-                enqueueTtsJob={this.props.enqueueTtsJob}
-                ttsInferenceJobs={this.props.ttsInferenceJobs}
-              />
-            </Route>
+              <Route path="/tts/result/:token">
+                <TtsResultViewPage sessionWrapper={this.props.sessionWrapper} />
+              </Route>
 
-            <Route path="/tts/:token/delete">
-              <TtsModelDeletePage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/tts/:token/edit">
+                <TtsModelEditPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  enqueueTtsJob={this.props.enqueueTtsJob}
+                  ttsInferenceJobs={this.props.ttsInferenceJobs}
+                />
+              </Route>
 
-            <Route path="/tts/:token/categories">
-              <TtsEditCategoriesPage
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/tts/:token/delete">
+                <TtsModelDeletePage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/tts/:token">
-              <TtsModelViewPage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-                enqueueTtsJob={this.props.enqueueTtsJob}
-                inferenceJobs={this.props.inferenceJobs}
-                ttsInferenceJobs={this.props.ttsInferenceJobs}
-                textBuffer={this.props.textBuffer}
-                setTextBuffer={this.props.setTextBuffer}
-                clearTextBuffer={this.props.clearTextBuffer}
-              />
-            </Route>
+              <Route path="/tts/:token/categories">
+                <TtsEditCategoriesPage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/w2l/result/:token/edit">
-              <W2lResultEditPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/tts/:token">
+                <TtsModelViewPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                  enqueueTtsJob={this.props.enqueueTtsJob}
+                  inferenceJobs={this.props.inferenceJobs}
+                  ttsInferenceJobs={this.props.ttsInferenceJobs}
+                  textBuffer={this.props.textBuffer}
+                  setTextBuffer={this.props.setTextBuffer}
+                  clearTextBuffer={this.props.clearTextBuffer}
+                />
+              </Route>
 
-            <Route path="/w2l/result/:token/delete">
-              <W2lResultDeletePage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/w2l/result/:token/edit">
+                <W2lResultEditPage sessionWrapper={this.props.sessionWrapper} />
+              </Route>
 
-            <Route path="/w2l/result/:token">
-              <W2lResultViewPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/w2l/result/:token/delete">
+                <W2lResultDeletePage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/w2l/:templateToken/edit">
-              <W2lTemplateEditPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/w2l/result/:token">
+                <W2lResultViewPage sessionWrapper={this.props.sessionWrapper} />
+              </Route>
 
-            <Route path="/w2l/:templateToken/approval">
-              <W2lTemplateApprovePage
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/w2l/:templateToken/edit">
+                <W2lTemplateEditPage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/w2l/:templateToken/delete">
-              <W2lTemplateDeletePage
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/w2l/:templateToken/approval">
+                <W2lTemplateApprovePage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/w2l/:templateSlug">
-              <W2lTemplateViewPage
-                sessionWrapper={this.props.sessionWrapper}
-                enqueueW2lJob={this.props.enqueueW2lJob}
-                w2lInferenceJobs={this.props.w2lInferenceJobs}
-              />
-            </Route>
+              <Route path="/w2l/:templateToken/delete">
+                <W2lTemplateDeletePage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/video">
-              <W2lTemplateListPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/w2l/:templateSlug">
+                <W2lTemplateViewPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  enqueueW2lJob={this.props.enqueueW2lJob}
+                  w2lInferenceJobs={this.props.w2lInferenceJobs}
+                />
+              </Route>
 
-            <Route path="/upload/w2l_photo">
-              <UploadW2lPhotoPage
-                sessionWrapper={this.props.sessionWrapper}
-                w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
-                enqueueW2lTemplateUploadJob={
-                  this.props.enqueueW2lTemplateUploadJob
-                }
-              />
-            </Route>
+              <Route path="/video">
+                <W2lTemplateListPage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/upload/w2l_video">
-              <UploadW2lVideoPage
-                sessionWrapper={this.props.sessionWrapper}
-                w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
-                enqueueW2lTemplateUploadJob={
-                  this.props.enqueueW2lTemplateUploadJob
-                }
-              />
-            </Route>
+              <Route path="/upload/w2l_photo">
+                <UploadW2lPhotoPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
+                  enqueueW2lTemplateUploadJob={
+                    this.props.enqueueW2lTemplateUploadJob
+                  }
+                />
+              </Route>
 
-            <Route path="/upload/tts">
-              <UploadTtsModelPage
-                sessionWrapper={this.props.sessionWrapper}
-                ttsModelUploadJobs={this.props.ttsModelUploadJobs}
-                enqueueTtsModelUploadJob={this.props.enqueueTtsModelUploadJob}
-              />
-            </Route>
+              <Route path="/upload/w2l_video">
+                <UploadW2lVideoPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
+                  enqueueW2lTemplateUploadJob={
+                    this.props.enqueueW2lTemplateUploadJob
+                  }
+                />
+              </Route>
 
-            <Route path="/upload/voice_conversion">
-              <UploadVoiceConversionModel
-                sessionWrapper={this.props.sessionWrapper}
-                voiceConversionModelUploadJobs={
-                  this.props.voiceConversionModelUploadJobs
-                }
-                enqueueVoiceConversionModelUploadJob={
-                  this.props.enqueueVoiceConversionModelUploadJob
-                }
-              />
-            </Route>
+              <Route path="/upload/tts">
+                <UploadTtsModelPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  ttsModelUploadJobs={this.props.ttsModelUploadJobs}
+                  enqueueTtsModelUploadJob={this.props.enqueueTtsModelUploadJob}
+                />
+              </Route>
 
-            <Route path="/upload/vocoder" exact={true}>
-              <UploadVocoderPage
-                sessionWrapper={this.props.sessionWrapper}
-                vocoderUploadJobs={this.props.vocoderUploadJobs}
-                enqueueVocoderUploadJob={this.props.enqueueVocoderUploadJob}
-              />
-            </Route>
+              <Route path="/upload/voice_conversion">
+                <UploadVoiceConversionModel
+                  sessionWrapper={this.props.sessionWrapper}
+                  voiceConversionModelUploadJobs={
+                    this.props.voiceConversionModelUploadJobs
+                  }
+                  enqueueVoiceConversionModelUploadJob={
+                    this.props.enqueueVoiceConversionModelUploadJob
+                  }
+                />
+              </Route>
 
-            <Route path="/contribute">
-              <ContributeIndexPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/upload/vocoder" exact={true}>
+                <UploadVocoderPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  vocoderUploadJobs={this.props.vocoderUploadJobs}
+                  enqueueVocoderUploadJob={this.props.enqueueVocoderUploadJob}
+                />
+              </Route>
 
-            <Route path="/category/create">
-              <CreateCategoryPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/contribute">
+                <ContributeIndexPage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/moderation/user/list">
-              <ModerationUserListFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/category/create">
+                <CreateCategoryPage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/moderation/ip_bans/:ipAddress">
-              <ModerationViewIpBanFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/moderation/user/list">
+                <ModerationUserListFc
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/moderation/ip_bans">
-              <ModerationIpBanListFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/moderation/ip_bans/:ipAddress">
+                <ModerationViewIpBanFc
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/moderation/voice_stats">
-              <ModerationVoiceStatsFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/moderation/ip_bans">
+                <ModerationIpBanListFc
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/moderation/job_stats">
-              <ModerationJobStatsFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/moderation/voice_stats">
+                <ModerationVoiceStatsFc
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/moderation/job_control">
-              <ModerationJobControlPage
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/moderation/job_stats">
+                <ModerationJobStatsFc
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/moderation/tts_category/list">
-              <ModerationTtsCategoryListPage
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/moderation/job_control">
+                <ModerationJobControlPage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/moderation/tts_category/edit/:token">
-              <ModerationTtsCategoryEditPage
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/moderation/tts_category/list">
+                <ModerationTtsCategoryListPage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/moderation/category/delete/:token">
-              <ModerationCategoryDeletePage
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/moderation/tts_category/edit/:token">
+                <ModerationTtsCategoryEditPage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/moderation/approve/w2l_templates">
-              <ModerationPendingW2lTemplatesFc
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/moderation/category/delete/:token">
+                <ModerationCategoryDeletePage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/moderation">
-              <ModerationFc sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/moderation/approve/w2l_templates">
+                <ModerationPendingW2lTemplatesFc
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route exact={true} path="/clone">
-              <VoiceCloneRequestPage />
-            </Route>
+              <Route path="/moderation">
+                <ModerationFc sessionWrapper={this.props.sessionWrapper} />
+              </Route>
 
-            <Route path="/patrons">
-              <PatronPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route exact={true} path="/clone">
+                <VoiceCloneRequestPage />
+              </Route>
 
-            <Route path="/product-usage">
-              <ProductUsageInfoPage
-                sessionWrapper={this.props.sessionWrapper}
-              />
-            </Route>
+              <Route path="/patrons">
+                <PatronPage sessionWrapper={this.props.sessionWrapper} />
+              </Route>
 
-            <Route path="/voice-conversion/:token/delete">
-              <VcModelDeletePage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/product-usage">
+                <ProductUsageInfoPage
+                  sessionWrapper={this.props.sessionWrapper}
+                />
+              </Route>
 
-            <Route path="/voice-conversion/:token/edit">
-              <VcModelEditPage sessionWrapper={this.props.sessionWrapper} />
-            </Route>
+              <Route path="/voice-conversion/:token/delete">
+                <VcModelDeletePage sessionWrapper={this.props.sessionWrapper} />
+              </Route>
 
-            <Route path="/voice-conversion/:token">
-              <VcModelViewPage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-                inferenceJobsByCategory={this.props.inferenceJobsByCategory}
-                setMaybeSelectedInferenceJob={
-                  this.props.maybeSelectedVoiceConversionModel
-                }
-              />
-            </Route>
+              <Route path="/voice-conversion/:token/edit">
+                <VcModelEditPage sessionWrapper={this.props.sessionWrapper} />
+              </Route>
 
-            <Route path="/voice-conversion">
-              <VcModelListPage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-                voiceConversionModels={this.props.voiceConversionModels}
-                setVoiceConversionModels={this.props.setVoiceConversionModels}
-                maybeSelectedVoiceConversionModel={
-                  this.props.maybeSelectedVoiceConversionModel
-                }
-                setMaybeSelectedVoiceConversionModel={
-                  this.props.setMaybeSelectedVoiceConversionModel
-                }
-                enqueueInferenceJob={this.props.enqueueInferenceJob}
-                inferenceJobs={this.props.inferenceJobs}
-                inferenceJobsByCategory={this.props.inferenceJobsByCategory}
-              />
-            </Route>
+              <Route path="/voice-conversion/:token">
+                <VcModelViewPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                  inferenceJobsByCategory={this.props.inferenceJobsByCategory}
+                  setMaybeSelectedInferenceJob={
+                    this.props.maybeSelectedVoiceConversionModel
+                  }
+                />
+              </Route>
 
-            <Route path="/about">
-              <AboutPage />
-            </Route>
+              <Route path="/voice-conversion">
+                <VcModelListPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                  voiceConversionModels={this.props.voiceConversionModels}
+                  setVoiceConversionModels={this.props.setVoiceConversionModels}
+                  maybeSelectedVoiceConversionModel={
+                    this.props.maybeSelectedVoiceConversionModel
+                  }
+                  setMaybeSelectedVoiceConversionModel={
+                    this.props.setMaybeSelectedVoiceConversionModel
+                  }
+                  enqueueInferenceJob={this.props.enqueueInferenceJob}
+                  inferenceJobs={this.props.inferenceJobs}
+                  inferenceJobsByCategory={this.props.inferenceJobsByCategory}
+                />
+              </Route>
 
-            <Route path="/face-animator/:mediaToken?">
-              <FaceAnimator
-                {...{
-                  enqueueInferenceJob: this.props.enqueueInferenceJob,
-                  sessionSubscriptionsWrapper:
-                    this.props.sessionSubscriptionsWrapper,
-                  inferenceJobs: this.props.inferenceJobs,
-                  inferenceJobsByCategory: this.props.inferenceJobsByCategory,
-                }}
-              />
-            </Route>
+              <Route path="/about">
+                <AboutPage />
+              </Route>
 
-            <Route path="/commissions">
-              <CommunityCommissionsPage />
-            </Route>
+              <Route path="/face-animator/:mediaToken?">
+                <FaceAnimator
+                  {...{
+                    enqueueInferenceJob: this.props.enqueueInferenceJob,
+                    sessionSubscriptionsWrapper:
+                      this.props.sessionSubscriptionsWrapper,
+                    inferenceJobs: this.props.inferenceJobs,
+                    inferenceJobsByCategory: this.props.inferenceJobsByCategory,
+                  }}
+                />
+              </Route>
 
-            <Route path="/terms">
-              <TermsPage />
-            </Route>
+              <Route path="/commissions">
+                <CommunityCommissionsPage />
+              </Route>
 
-            <Route path="/privacy">
-              <PrivacyPage />
-            </Route>
+              <Route path="/terms">
+                <TermsPage />
+              </Route>
 
-            <Route path="/guide">
-              <GuidePage />
-            </Route>
+              <Route path="/privacy">
+                <PrivacyPage />
+              </Route>
 
-            <Route path="/old">
-              <VocodesPage />
-            </Route>
+              <Route path="/guide">
+                <GuidePage />
+              </Route>
 
-            {/* Route for initial voice creation */}
-            <Route exact path="/voice-designer/create">
-              <VoiceDesignerFormPage
-                {...{
-                  enqueueInferenceJob: this.props.enqueueInferenceJob,
-                  sessionWrapper: this.props.sessionWrapper,
-                  sessionSubscriptionsWrapper:
-                    this.props.sessionSubscriptionsWrapper,
-                }}
-              />
-            </Route>
+              <Route path="/old">
+                <VocodesPage />
+              </Route>
 
-            {/* Route for editing the dataset details */}
-            <Route exact path="/voice-designer/dataset/:dataset_token/edit">
-              <VoiceDesignerFormPage
-                {...{
-                  enqueueInferenceJob: this.props.enqueueInferenceJob,
-                  sessionWrapper: this.props.sessionWrapper,
-                  sessionSubscriptionsWrapper:
-                    this.props.sessionSubscriptionsWrapper,
-                }}
-              />
-            </Route>
+              {/* Route for initial voice creation */}
+              <Route exact path="/voice-designer/create">
+                <VoiceDesignerFormPage
+                  {...{
+                    enqueueInferenceJob: this.props.enqueueInferenceJob,
+                    sessionWrapper: this.props.sessionWrapper,
+                    sessionSubscriptionsWrapper:
+                      this.props.sessionSubscriptionsWrapper,
+                  }}
+                />
+              </Route>
 
-            {/* Route for handling dataset token for uploading samples */}
-            <Route exact path="/voice-designer/dataset/:dataset_token/upload">
-              <VoiceDesignerFormPage
-                {...{
-                  enqueueInferenceJob: this.props.enqueueInferenceJob,
-                  sessionWrapper: this.props.sessionWrapper,
-                  sessionSubscriptionsWrapper:
-                    this.props.sessionSubscriptionsWrapper,
-                }}
-              />
-            </Route>
+              {/* Route for editing the dataset details */}
+              <Route exact path="/voice-designer/dataset/:dataset_token/edit">
+                <VoiceDesignerFormPage
+                  {...{
+                    enqueueInferenceJob: this.props.enqueueInferenceJob,
+                    sessionWrapper: this.props.sessionWrapper,
+                    sessionSubscriptionsWrapper:
+                      this.props.sessionSubscriptionsWrapper,
+                  }}
+                />
+              </Route>
 
-            <Route path="/voice-designer/voice/:voice_token/edit">
-              <VoiceDesignerVoiceEditPage />
-            </Route>
+              {/* Route for handling dataset token for uploading samples */}
+              <Route exact path="/voice-designer/dataset/:dataset_token/upload">
+                <VoiceDesignerFormPage
+                  {...{
+                    enqueueInferenceJob: this.props.enqueueInferenceJob,
+                    sessionWrapper: this.props.sessionWrapper,
+                    sessionSubscriptionsWrapper:
+                      this.props.sessionSubscriptionsWrapper,
+                  }}
+                />
+              </Route>
 
-            <Route path="/voice-designer/voice/:voice_token">
-              <VoiceDesignerUseVoicePage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-                inferenceJobs={this.props.inferenceJobs}
-                enqueueInferenceJob={this.props.enqueueInferenceJob}
-                inferenceJobsByCategory={this.props.inferenceJobsByCategory}
-                ttsInferenceJobs={this.props.ttsInferenceJobs}
-              />
-            </Route>
+              <Route path="/voice-designer/voice/:voice_token/edit">
+                <VoiceDesignerVoiceEditPage />
+              </Route>
 
-            <Route path="/voice-designer">
-              <VoiceDesignerMainPage />
-            </Route>
+              <Route path="/voice-designer/voice/:voice_token">
+                <VoiceDesignerUseVoicePage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                  inferenceJobs={this.props.inferenceJobs}
+                  enqueueInferenceJob={this.props.enqueueInferenceJob}
+                  inferenceJobsByCategory={this.props.inferenceJobsByCategory}
+                  ttsInferenceJobs={this.props.ttsInferenceJobs}
+                />
+              </Route>
 
-            <Route path="/generate-speech">
-              <GenerateSpeechPage />
-            </Route>
+              <Route path="/voice-designer">
+                <VoiceDesignerMainPage />
+              </Route>
 
-            <Route path="/character/donald-trump">
-              <TrumpTtsPage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-                enqueueTtsJob={this.props.enqueueTtsJob}
-                inferenceJobs={this.props.inferenceJobs}
-                ttsInferenceJobs={this.props.ttsInferenceJobs}
-                ttsModelUploadJobs={this.props.ttsModelUploadJobs}
-                w2lInferenceJobs={this.props.w2lInferenceJobs}
-                w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
-                textBuffer={this.props.textBuffer}
-                setTextBuffer={this.props.setTextBuffer}
-                clearTextBuffer={this.props.clearTextBuffer}
-                ttsModels={this.props.ttsModels}
-                setTtsModels={this.props.setTtsModels}
-                allTtsCategories={this.props.allTtsCategories}
-                setAllTtsCategories={this.props.setAllTtsCategories}
-                allTtsCategoriesByTokenMap={
-                  this.props.allTtsCategoriesByTokenMap
-                }
-                computedTtsCategoryAssignments={
-                  this.props.computedTtsCategoryAssignments
-                }
-                setComputedTtsCategoryAssignments={
-                  this.props.setComputedTtsCategoryAssignments
-                }
-                allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
-                ttsModelsByCategoryToken={this.props.ttsModelsByCategoryToken}
-                dropdownCategories={this.props.dropdownCategories}
-                setDropdownCategories={this.props.setDropdownCategories}
-                selectedCategories={this.props.selectedCategories}
-                setSelectedCategories={this.props.setSelectedCategories}
-                maybeSelectedTtsModel={this.props.maybeSelectedTtsModel}
-                setMaybeSelectedTtsModel={this.props.setMaybeSelectedTtsModel}
-                selectedTtsLanguageScope={this.props.selectedTtsLanguageScope}
-                setSelectedTtsLanguageScope={
-                  this.props.setSelectedTtsLanguageScope
-                }
-              />
-            </Route>
+              <Route path="/generate-speech">
+                <GenerateSpeechPage />
+              </Route>
 
-            <Route path="/tts" exact={true}>
-              <TtsModelListPage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-                isShowingVocodesNotice={this.props.isShowingVocodesNotice}
-                clearVocodesNotice={this.props.clearVocodesNotice}
-                isShowingLanguageNotice={this.props.isShowingLangaugeNotice}
-                clearLanguageNotice={this.props.clearLanguageNotice}
-                displayLanguage={this.props.displayLanguage}
-                isShowingTwitchTtsNotice={this.props.isShowingTwitchTtsNotice}
-                clearTwitchTtsNotice={this.props.clearTwitchTtsNotice}
-                isShowingPleaseFollowNotice={
-                  this.props.isShowingPleaseFollowNotice
-                }
-                clearPleaseFollowNotice={this.props.clearPleaseFollowNotice}
-                isShowingBootstrapLanguageNotice={
-                  this.props.isShowingBootstrapLanguageNotice
-                }
-                clearBootstrapLanguageNotice={
-                  this.props.clearBootstrapLanguageNotice
-                }
-                enqueueInferenceJob={this.props.enqueueInferenceJob}
-                inferenceJobs={this.props.inferenceJobs}
-                inferenceJobsByCategory={this.props.inferenceJobsByCategory}
-                enqueueTtsJob={this.props.enqueueTtsJob}
-                ttsInferenceJobs={this.props.ttsInferenceJobs}
-                ttsModelUploadJobs={this.props.ttsModelUploadJobs}
-                w2lInferenceJobs={this.props.w2lInferenceJobs}
-                w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
-                textBuffer={this.props.textBuffer}
-                setTextBuffer={this.props.setTextBuffer}
-                clearTextBuffer={this.props.clearTextBuffer}
-                ttsModels={this.props.ttsModels}
-                setTtsModels={this.props.setTtsModels}
-                allTtsCategories={this.props.allTtsCategories}
-                setAllTtsCategories={this.props.setAllTtsCategories}
-                allTtsCategoriesByTokenMap={
-                  this.props.allTtsCategoriesByTokenMap
-                }
-                computedTtsCategoryAssignments={
-                  this.props.computedTtsCategoryAssignments
-                }
-                setComputedTtsCategoryAssignments={
-                  this.props.setComputedTtsCategoryAssignments
-                }
-                allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
-                ttsModelsByCategoryToken={this.props.ttsModelsByCategoryToken}
-                dropdownCategories={this.props.dropdownCategories}
-                setDropdownCategories={this.props.setDropdownCategories}
-                selectedCategories={this.props.selectedCategories}
-                setSelectedCategories={this.props.setSelectedCategories}
-                maybeSelectedTtsModel={this.props.maybeSelectedTtsModel}
-                setMaybeSelectedTtsModel={this.props.setMaybeSelectedTtsModel}
-                selectedTtsLanguageScope={this.props.selectedTtsLanguageScope}
-                setSelectedTtsLanguageScope={
-                  this.props.setSelectedTtsLanguageScope
-                }
-              />
-            </Route>
+              <Route path="/character/donald-trump">
+                <TrumpTtsPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                  enqueueTtsJob={this.props.enqueueTtsJob}
+                  inferenceJobs={this.props.inferenceJobs}
+                  ttsInferenceJobs={this.props.ttsInferenceJobs}
+                  ttsModelUploadJobs={this.props.ttsModelUploadJobs}
+                  w2lInferenceJobs={this.props.w2lInferenceJobs}
+                  w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
+                  textBuffer={this.props.textBuffer}
+                  setTextBuffer={this.props.setTextBuffer}
+                  clearTextBuffer={this.props.clearTextBuffer}
+                  ttsModels={this.props.ttsModels}
+                  setTtsModels={this.props.setTtsModels}
+                  allTtsCategories={this.props.allTtsCategories}
+                  setAllTtsCategories={this.props.setAllTtsCategories}
+                  allTtsCategoriesByTokenMap={
+                    this.props.allTtsCategoriesByTokenMap
+                  }
+                  computedTtsCategoryAssignments={
+                    this.props.computedTtsCategoryAssignments
+                  }
+                  setComputedTtsCategoryAssignments={
+                    this.props.setComputedTtsCategoryAssignments
+                  }
+                  allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
+                  ttsModelsByCategoryToken={this.props.ttsModelsByCategoryToken}
+                  dropdownCategories={this.props.dropdownCategories}
+                  setDropdownCategories={this.props.setDropdownCategories}
+                  selectedCategories={this.props.selectedCategories}
+                  setSelectedCategories={this.props.setSelectedCategories}
+                  maybeSelectedTtsModel={this.props.maybeSelectedTtsModel}
+                  setMaybeSelectedTtsModel={this.props.setMaybeSelectedTtsModel}
+                  selectedTtsLanguageScope={this.props.selectedTtsLanguageScope}
+                  setSelectedTtsLanguageScope={
+                    this.props.setSelectedTtsLanguageScope
+                  }
+                />
+              </Route>
 
-            <Route path="/" exact={true}>
-              <LandingPage
-                sessionWrapper={this.props.sessionWrapper}
-                sessionSubscriptionsWrapper={
-                  this.props.sessionSubscriptionsWrapper
-                }
-              />
-            </Route>
-          </Switch>
+              <Route path="/tts" exact={true}>
+                <TtsModelListPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                  isShowingVocodesNotice={this.props.isShowingVocodesNotice}
+                  clearVocodesNotice={this.props.clearVocodesNotice}
+                  isShowingLanguageNotice={this.props.isShowingLangaugeNotice}
+                  clearLanguageNotice={this.props.clearLanguageNotice}
+                  displayLanguage={this.props.displayLanguage}
+                  isShowingTwitchTtsNotice={this.props.isShowingTwitchTtsNotice}
+                  clearTwitchTtsNotice={this.props.clearTwitchTtsNotice}
+                  isShowingPleaseFollowNotice={
+                    this.props.isShowingPleaseFollowNotice
+                  }
+                  clearPleaseFollowNotice={this.props.clearPleaseFollowNotice}
+                  isShowingBootstrapLanguageNotice={
+                    this.props.isShowingBootstrapLanguageNotice
+                  }
+                  clearBootstrapLanguageNotice={
+                    this.props.clearBootstrapLanguageNotice
+                  }
+                  enqueueInferenceJob={this.props.enqueueInferenceJob}
+                  inferenceJobs={this.props.inferenceJobs}
+                  inferenceJobsByCategory={this.props.inferenceJobsByCategory}
+                  enqueueTtsJob={this.props.enqueueTtsJob}
+                  ttsInferenceJobs={this.props.ttsInferenceJobs}
+                  ttsModelUploadJobs={this.props.ttsModelUploadJobs}
+                  w2lInferenceJobs={this.props.w2lInferenceJobs}
+                  w2lTemplateUploadJobs={this.props.w2lTemplateUploadJobs}
+                  textBuffer={this.props.textBuffer}
+                  setTextBuffer={this.props.setTextBuffer}
+                  clearTextBuffer={this.props.clearTextBuffer}
+                  ttsModels={this.props.ttsModels}
+                  setTtsModels={this.props.setTtsModels}
+                  allTtsCategories={this.props.allTtsCategories}
+                  setAllTtsCategories={this.props.setAllTtsCategories}
+                  allTtsCategoriesByTokenMap={
+                    this.props.allTtsCategoriesByTokenMap
+                  }
+                  computedTtsCategoryAssignments={
+                    this.props.computedTtsCategoryAssignments
+                  }
+                  setComputedTtsCategoryAssignments={
+                    this.props.setComputedTtsCategoryAssignments
+                  }
+                  allTtsModelsByTokenMap={this.props.allTtsModelsByTokenMap}
+                  ttsModelsByCategoryToken={this.props.ttsModelsByCategoryToken}
+                  dropdownCategories={this.props.dropdownCategories}
+                  setDropdownCategories={this.props.setDropdownCategories}
+                  selectedCategories={this.props.selectedCategories}
+                  setSelectedCategories={this.props.setSelectedCategories}
+                  maybeSelectedTtsModel={this.props.maybeSelectedTtsModel}
+                  setMaybeSelectedTtsModel={this.props.setMaybeSelectedTtsModel}
+                  selectedTtsLanguageScope={this.props.selectedTtsLanguageScope}
+                  setSelectedTtsLanguageScope={
+                    this.props.setSelectedTtsLanguageScope
+                  }
+                />
+              </Route>
+
+              <Route path="/" exact={true}>
+                <LandingPage
+                  sessionWrapper={this.props.sessionWrapper}
+                  sessionSubscriptionsWrapper={
+                    this.props.sessionSubscriptionsWrapper
+                  }
+                />
+              </Route>
+            </Switch>
+          </div>
         </div>
-      </div>
+      </SearchProvider>
     );
   }
 }
diff --git a/packages/fakeyou.com/src/v2/view/search/SearchPage.tsx b/packages/fakeyou.com/src/v2/view/search/SearchPage.tsx
new file mode 100644
index 0000000000..50653f2176
--- /dev/null
+++ b/packages/fakeyou.com/src/v2/view/search/SearchPage.tsx
@@ -0,0 +1,111 @@
+import React, { useCallback, useEffect, useState } from "react";
+import Container from "components/common/Container";
+import PageHeader from "components/layout/PageHeader";
+import { faClock } from "@fortawesome/pro-solid-svg-icons";
+import Panel from "components/common/Panel";
+import ModelSearchResults from "components/common/ModelSearchResults";
+import ModelTags from "components/common/ModelTags";
+import Select from "components/common/Select";
+import {
+  SearchTtsModels,
+  TtsModel,
+} from "@storyteller/components/src/api/tts/SearchTtsModels";
+import { useLocation } from "react-router-dom";
+
+const allTags = [
+  "English",
+  "Spanish",
+  "Portuguese",
+  "High-pitched",
+  "Low-pitched",
+  "Character",
+];
+
+export default function SearchPage() {
+  const [foundTtsModels, setFoundTtsModels] = useState<TtsModel[]>([]);
+
+  const useQuery = () => {
+    return new URLSearchParams(useLocation().search);
+  };
+
+  const doSearch = useCallback(
+    async (value: string) => {
+      let request = {
+        search_term: value,
+      };
+
+      let response = await SearchTtsModels(request);
+
+      if (response.success) {
+        let models = [...response.models];
+        setFoundTtsModels(models);
+      } else {
+        setFoundTtsModels([]);
+      }
+    },
+    [setFoundTtsModels]
+  );
+
+  const query = useQuery();
+  const urlSearchTerm = query.get("query") || "";
+
+  useEffect(() => {
+    if (urlSearchTerm) {
+      doSearch(urlSearchTerm);
+    }
+  }, [urlSearchTerm, doSearch]);
+
+  let selectedTags: any = [];
+  let handleSelectTag = () => {};
+
+  const tags = (
+    <div className="d-flex flex-column gap-3">
+      <ModelTags
+        tags={allTags}
+        selectedTags={selectedTags}
+        onSelectTag={handleSelectTag}
+      />
+    </div>
+  );
+
+  const sortOptions = [
+    { value: "most liked", label: "Most Liked" },
+    { value: "most used", label: "Most Used" },
+    { value: "moset recent", label: "Most Recent" },
+  ];
+  const sortTimeOptions = [
+    { value: "all time", label: "All Time" },
+    { value: "today", label: "Today" },
+    { value: "this week", label: "This Week" },
+    { value: "this month", label: "This Month" },
+  ];
+
+  return (
+    <Container type="panel" className="mb-5">
+      <PageHeader
+        title={`${foundTtsModels.length || "0"} results for "${urlSearchTerm}"`}
+        titleH2={true}
+        extension={tags}
+        panel={false}
+      />
+      <Panel padding={true}>
+        <div className="d-flex gap-2 mb-4">
+          <Select
+            small={true}
+            options={sortOptions}
+            defaultValue={sortOptions[0]}
+          />
+          <Select
+            small={true}
+            icon={faClock}
+            options={sortTimeOptions}
+            defaultValue={sortTimeOptions[0]}
+          />
+        </div>
+
+        {/*<ModelSearchResults data={filteredData} />*/}
+        <ModelSearchResults data={foundTtsModels} />
+      </Panel>
+    </Container>
+  );
+}