Merge pull request #323 from storytold/brandon-elasticsearch

add elasticsearch

_redirects

@@ -42,6 +42,10 @@
 /voice-conversion*   /index.html   200
 /w2l*   /index.html   200
 
+# Test paths
+/dev-tts*   /index.html   200
+/tts-dev*   /index.html   200
+
 # Old paths
 /face-animation* /face-animator 302
 

packages/components/src/api/ApiConfig.ts

@@ -119,6 +119,10 @@ class ApiConfig {
     return `${this.getApiOrigin()}/tts/list`;
   }
 
+  searchTts(): string {
+    return `${this.getApiOrigin()}/tts/search`;
+  }
+
   getPendingTtsJobCount(): string {
     return `${this.getApiOrigin()}/tts/queue_length`;
   }

packages/components/src/api/tts/SearchTtsModels.ts

@@ -0,0 +1,58 @@
+import { ApiConfig } from "../ApiConfig";
+
+export interface SearchTtsModelsRequest {
+  search_term: string;
+}
+
+export interface SearchTtsModelsResponse {
+  success: boolean;
+  models: TtsModel[];
+}
+
+export interface TtsModel {
+  model_token: string,
+  title: string,
+  creator_user_token: string,
+  creator_username: string,
+  creator_display_name: string,
+  ietf_language_tag: string,
+  ietf_primary_language_subtag: string,
+  creator_set_visibility: string,
+  created_at: string,
+  updated_at: string,
+}
+
+export enum SearchTtsModelsError {
+  NotFound,
+  ServerError,
+  FrontendError,
+}
+
+export async function SearchTtsModels(request: SearchTtsModelsRequest) : Promise<SearchTtsModelsResponse> {
+  const endpoint = new ApiConfig().searchTts();
+  
+  return await fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+    },
+    credentials: 'include',
+    body: JSON.stringify(request),
+  })
+  .then(res => res.json())
+  .then(res => {
+    if (!res) {
+      return { success : false };
+    }
+
+    if (res && 'success' in res) {
+      return res;
+    } else {
+      return { success : false };
+    }
+  })
+  .catch(e => {
+    return { success : false };
+  });
+}

packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx

@@ -8,9 +8,10 @@ import {
   faComment,
   faHeart,
 } from "@fortawesome/pro-solid-svg-icons";
+import { TtsModel } from "@storyteller/components/src/api/tts/SearchTtsModels";
 
-interface ModelSearchResultsProps {
-  data: any[];
+interface Props {
+  data: TtsModel[];
 }
 
 function shortenNumber(num: number): string {
@@ -20,46 +21,55 @@ function shortenNumber(num: number): string {
   return num.toString();
 }
 
-export default function ModelSearchResults({ data }: ModelSearchResultsProps) {
+export default function ModelSearchResults(props: Props) {
+  // TODO: Expose fields on backend
+  let likes = 1500;
+  let uses = 25000;
+  let comments = 25;
+  let model_type  = "Tacotron2";
+
   return (
     <div className="row g-3">
-      {data.map((item) => {
+      {props.data.map((item) => {
+        console.log('iter', item.model_token);
+        let modelPageLink = `/tts/${item.model_token}`;
+
         return (
-          <div className="col-12 col-lg-6" key={item.id}>
+          <div className="col-12 col-lg-6" key={item.model_token}>
             <div className="model-search-results p-3">
-              <h5 className="fw-semibold mb-0">{item.name}</h5>
+              <h5 className="fw-semibold mb-0">{item.title}</h5>
               <p className="creator-name">
                 by{" "}
-                <Link className="fw-medium" to={`/profile/${item.creator}`}>
-                  {item.creator}
+                <Link className="fw-medium" to={`/profile/${item.creator_username}`}>
+                  {item.creator_display_name}
                 </Link>
               </p>
               <div className="d-flex align-items-end">
                 <div className="flex-grow-1">
                   <span
                     className={`type-tag ${
-                      item.type === "Tacotron2" ? "tt2" : "tt2"
+                      model_type === "Tacotron2" ? "tt2" : "tt2" // TODO
                     }`}
                   >
-                    {item.type}
+                    TT2
                   </span>
                   <div className="d-flex gap-3 model-details fw-medium mt-3">
                     <div>
                       <FontAwesomeIcon icon={faHeart} className="me-2" />
-                      {item.likes && shortenNumber(item.likes)}
+                      {likes && shortenNumber(likes)}
                     </div>
                     <div>
                       <FontAwesomeIcon icon={faChartSimple} className="me-2" />
-                      {item.uses && shortenNumber(item.uses)}
+                      {uses && shortenNumber(uses)}
                     </div>
                     <div>
                       <FontAwesomeIcon icon={faComment} className="me-2" />
-                      {item.comments && shortenNumber(item.comments)}
+                      {comments && shortenNumber(comments)}
                     </div>
                   </div>
                 </div>
                 <div>
-                  <Button label="Use Voice" small={true} to="/" />
+                  <Button label="Use Voice" small={true} to={modelPageLink} />
                 </div>
               </div>
             </div>

packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx

@@ -1,88 +1,19 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
 import Container from "components/common/Container";
 import PageHeader from "components/layout/PageHeader";
 import { faClock, faMessageDots } from "@fortawesome/pro-solid-svg-icons";
 import ModelSearch from "components/common/ModelSearch";
 import Panel from "components/common/Panel";
-import useSearch from "hooks/useSearch/useSearch";
 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";
 
 interface TtsModelSearchPageProps {
   sessionWrapper: SessionWrapper;
 }
 
-const dummyData = [
-  {
-    id: 1,
-    name: "Spongebob",
-    tags: ["English", "High-pitched", "Character"],
-    type: "Tacotron2",
-    creator: "echelon",
-    likes: 14000,
-    uses: 1000000,
-    comments: 250,
-    time: new Date("2023-09-20T12:00:00Z").toISOString(),
-  },
-  {
-    id: 2,
-    name: "Mariano Closs",
-    tags: ["Spanish", "Low-pitched"],
-    type: "Tacotron2",
-    creator: "echelon",
-    likes: 308290,
-    uses: 30000000,
-    comments: 1200,
-    time: new Date("2023-10-12T12:00:00Z").toISOString(),
-  },
-  {
-    id: 3,
-    name: "Cristiano  Ronaldo",
-    tags: ["Portuguese", "Low-pitched"],
-    type: "Tacotron2",
-    creator: "echelon",
-    likes: 17500,
-    uses: 40000000,
-    comments: 250,
-    time: new Date("2023-09-20T12:00:00Z").toISOString(),
-  },
-  {
-    id: 4,
-    name: "Messi",
-    tags: ["Portuguese", "Low-pitched"],
-    type: "Tacotron2",
-    creator: "echelon",
-    likes: 17500,
-    uses: 40000000,
-    comments: 250,
-    time: new Date("2023-09-20T12:00:00Z").toISOString(),
-  },
-  {
-    id: 5,
-    name: "Morty",
-    tags: ["English", "High-pitched", "Character"],
-    type: "Tacotron2",
-    creator: "echelon",
-    likes: 14000,
-    uses: 1000000,
-    comments: 250,
-    time: new Date("2023-09-20T12:00:00Z").toISOString(),
-  },
-  {
-    id: 6,
-    name: "Bad Bunny",
-    tags: ["Spanish", "Low-pitched"],
-    type: "Tacotron2",
-    creator: "echelon",
-    likes: 308290,
-    uses: 30000000,
-    comments: 1200,
-    time: new Date("2023-10-12T12:00:00Z").toISOString(),
-  },
-];
-
 const allTags = [
   "English",
   "Spanish",
@@ -93,26 +24,43 @@ const allTags = [
 ];
 
 export default function TtsModelSearchPage(props: TtsModelSearchPageProps) {
-  const {
-    searchTerm,
-    setSearchTerm,
-    selectedTags,
-    setSelectedTags,
-    filteredData,
-  } = useSearch(dummyData);
+  const [searchTerm, setSearchTerm] = useState<string>("");
+  const [foundTtsModels, setFoundTtsModels] = useState<TtsModel[]>([]);
 
-  const handleSelectTag = (tag: string) => {
-    setSelectedTags((prev) => {
-      if (prev.includes(tag)) {
-        return prev.filter((t) => t !== tag);
-      }
-      return [...prev, tag];
-    });
-  };
+  let selectedTags : any = [];
+  let handleSelectTag = () => {};
+
+  const maybeSearch = useCallback(async (
+    value: string
+  ) => {
+    setSearchTerm(value);
+  }, []);
+
+
+  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]);
+
+  useEffect(() => {
+    doSearch(searchTerm);
+  }, [doSearch, searchTerm])
 
   const searchTts = (
     <div className="d-flex flex-column gap-3">
-      <ModelSearch value={searchTerm} onChange={setSearchTerm} />
+      <ModelSearch value={searchTerm} onChange={maybeSearch} />
       <ModelTags
         tags={allTags}
         selectedTags={selectedTags}
@@ -160,7 +108,8 @@ export default function TtsModelSearchPage(props: TtsModelSearchPageProps) {
           />
         </div>
 
-        <ModelSearchResults data={filteredData} />
+        {/*<ModelSearchResults data={filteredData} />*/}
+        <ModelSearchResults data={foundTtsModels} />
       </Panel>
     </Container>
   );