From d87e797a997bb1774c25622e4325bd0ab6b9e271 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Fri, 27 Oct 2023 07:10:22 -0400 Subject: [PATCH] add elasticsearch --- _redirects | 4 + packages/components/src/api/ApiConfig.ts | 4 + .../components/src/api/tts/SearchTtsModels.ts | 58 ++++++++ .../ModelSearchResults/ModelSearchResults.tsx | 38 ++++-- .../tts_model_search/TtsModelSearchPage.tsx | 125 ++++++------------ 5 files changed, 127 insertions(+), 102 deletions(-) create mode 100644 packages/components/src/api/tts/SearchTtsModels.ts diff --git a/_redirects b/_redirects index cc890efa66..e58f547a2a 100644 --- a/_redirects +++ b/_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 diff --git a/packages/components/src/api/ApiConfig.ts b/packages/components/src/api/ApiConfig.ts index 649be9f3f4..2aa8220648 100644 --- a/packages/components/src/api/ApiConfig.ts +++ b/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`; } diff --git a/packages/components/src/api/tts/SearchTtsModels.ts b/packages/components/src/api/tts/SearchTtsModels.ts new file mode 100644 index 0000000000..494d309bc7 --- /dev/null +++ b/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 { + 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 }; + }); +} diff --git a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx index 65f808499a..1b7c6b398e 100644 --- a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx +++ b/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 (
- {data.map((item) => { + {props.data.map((item) => { + console.log('iter', item.model_token); + let modelPageLink = `/tts/${item.model_token}`; + return ( -
+
-
{item.name}
+
{item.title}

by{" "} - - {item.creator} + + {item.creator_display_name}

- {item.type} + TT2
- {item.likes && shortenNumber(item.likes)} + {likes && shortenNumber(likes)}
- {item.uses && shortenNumber(item.uses)} + {uses && shortenNumber(uses)}
- {item.comments && shortenNumber(item.comments)} + {comments && shortenNumber(comments)}
-
diff --git a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx b/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx index 10da0cb594..f8eb511c8e 100644 --- a/packages/fakeyou.com/src/v2/view/pages/tts/tts_model_search/TtsModelSearchPage.tsx +++ b/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(""); + const [foundTtsModels, setFoundTtsModels] = useState([]); - 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 = (
- +
- + {/**/} + );