diff --git a/packages/components/src/api/ApiConfig.ts b/packages/components/src/api/ApiConfig.ts index 1730d90f2d..c3a88fef3c 100644 --- a/packages/components/src/api/ApiConfig.ts +++ b/packages/components/src/api/ApiConfig.ts @@ -132,6 +132,10 @@ class ApiConfig { return `${this.getApiOrigin()}/tts/search`; } + searchWeights(): string { + return `${this.getApiOrigin()}/v1/weights/search`; + } + getPendingTtsJobCount(): string { return `${this.getApiOrigin()}/tts/queue_length`; } diff --git a/packages/components/src/api/weights/SearchWeights.ts b/packages/components/src/api/weights/SearchWeights.ts new file mode 100644 index 0000000000..b38e289258 --- /dev/null +++ b/packages/components/src/api/weights/SearchWeights.ts @@ -0,0 +1,48 @@ +import { ApiConfig } from "../ApiConfig"; +import { Weight } from "./GetWeight"; + +export interface SearchWeightsRequest { + search_term: string; +} + +export interface SearchWeightsResponse { + success: boolean; + weights: Weight[]; +} + +export enum SearchWeightsError { + NotFound, + ServerError, + FrontendError, +} + +export async function SearchWeights( + request: SearchWeightsRequest +): Promise { + const endpoint = new ApiConfig().searchWeights(); + + 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/package.json b/packages/fakeyou.com/package.json index abf7a97ce9..cefe2e3eaa 100644 --- a/packages/fakeyou.com/package.json +++ b/packages/fakeyou.com/package.json @@ -60,9 +60,11 @@ "react-dom": "^16.13.1", "react-drag-drop-files": "^2.3.9", "react-i18next": "^11.15.4", + "react-iframe": "^1.8.5", "react-infinite-scroll-component": "^6.1.0", "react-paginate": "^8.2.0", "react-range": "^1.8.14", + "react-range-slider-input": "^3.0.7", "react-reveal": "^1.2.2", "react-router-dom": "^5.2.0", "react-scripts": "5.0.0", @@ -70,7 +72,6 @@ "react-share": "^4.4.1", "react-twitch-embed": "^3.0.1", "react-wavesurfer.js": "^0.0.8", - "react-range-slider-input": "^3.0.7", "sass": "^1.57.1", "typescript": "^3.7.5", "universal-cookie": "^6.1.1", diff --git a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx index f9d189b6a2..18478731d6 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -78,7 +78,7 @@ export default function AudioCard({ @@ -124,6 +124,7 @@ export default function AudioCard({ )}
+ +
@@ -139,7 +141,9 @@ export default function AudioCard({ {type === "weights" && ( <>
- {showCover && } + {showCover && ( + + )}
diff --git a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx index cef1ad55cd..2181fd5b57 100644 --- a/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx +++ b/packages/fakeyou.com/src/components/common/ModelSearchResults/ModelSearchResults.tsx @@ -8,10 +8,10 @@ import { faComment, faHeart, } from "@fortawesome/pro-solid-svg-icons"; -import { TtsModel } from "@storyteller/components/src/api/tts/SearchTtsModels"; +import { Weight } from "@storyteller/components/src/api/weights/GetWeight"; interface Props { - data: TtsModel[]; + data: Weight[]; } function shortenNumber(num: number): string { @@ -26,21 +26,24 @@ export default function ModelSearchResults(props: Props) { let likes = 1500; let uses = 25000; let comments = 25; - let model_type = "Tacotron2"; + let model_type = "Tacotron2"; return (
- {props.data.map((item) => { - let modelPageLink = `/tts/${item.model_token}`; + {props.data.map(item => { + let modelPageLink = `/weight/${item.weight_token}`; return ( -
+
{item.title}

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

diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx index 8dc0ee14c2..acf349e5aa 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchBar.tsx @@ -1,10 +1,8 @@ import React, { useCallback, useEffect, useState } from "react"; import Button from "../Button"; import { faSearch } from "@fortawesome/pro-solid-svg-icons"; -import { - SearchTtsModels, - TtsModel, -} from "@storyteller/components/src/api/tts/SearchTtsModels"; +import { SearchWeights } from "@storyteller/components/src/api/weights/SearchWeights"; +import { Weight } from "@storyteller/components/src/api/weights/GetWeight"; import SearchResultsDropdown from "./SearchResultsDropdown"; import SearchField from "./SearchField"; import "./SearchBar.scss"; @@ -28,7 +26,7 @@ export default function SearchBar({ let location = useLocation(); const { searchTerm, setSearchTerm } = useSearch(); - const [foundTtsModels, setFoundTtsModels] = useState([]); + const [foundWeights, setFoundWeights] = useState([]); const [isLoading, setIsLoading] = useState(false); const isOnSearchPage = location.pathname.startsWith("/search"); @@ -47,18 +45,18 @@ export default function SearchBar({ setIsLoading(true); - let response = await SearchTtsModels(request); + let response = await SearchWeights(request); if (response.success) { - let models = [...response.models]; - setFoundTtsModels(models); + let weights = [...response.weights]; + setFoundWeights(weights); } else { - setFoundTtsModels([]); + setFoundWeights([]); } setIsLoading(false); }, - [setFoundTtsModels] + [setFoundWeights] ); useEffect(() => { @@ -106,8 +104,8 @@ export default function SearchBar({ /> {isFocused && !isOnSearchPage && ( diff --git a/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx b/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx index 93bc44cf6f..61b43f41c3 100644 --- a/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx +++ b/packages/fakeyou.com/src/components/common/SearchBar/SearchResultsDropdown.tsx @@ -1,10 +1,10 @@ -import { TtsModel } from "@storyteller/components/src/api/tts/SearchTtsModels"; +import { Weight } from "@storyteller/components/src/api/weights/GetWeight"; import React from "react"; import { Link, useHistory } from "react-router-dom"; import Badge from "../Badge"; interface SearchResultsDropdownProps { - data: TtsModel[]; + data: Weight[]; isNoResults?: boolean; isLoading?: boolean; searchTerm?: string; @@ -18,10 +18,10 @@ export default function SearchResultsDropdown({ }: SearchResultsDropdownProps) { const history = useHistory(); - const handleResultClick = (item: TtsModel, event: React.MouseEvent) => { + const handleResultClick = (item: Weight, event: React.MouseEvent) => { event.stopPropagation(); event.preventDefault(); - history.push(`/weight/${item.model_token}`); + history.push(`/weight/${item.weight_token}`); }; const handleInnerClick = (event: any) => { @@ -40,12 +40,12 @@ export default function SearchResultsDropdown({ {data.length !== 0 && (
{data.map(item => { - // let modelPageLink = `/weight/${item.model_token}`; + // let modelPageLink = `/weight/${item.weight_token}`; return (
handleResultClick(item, event)} >
{item.title}
@@ -54,10 +54,10 @@ export default function SearchResultsDropdown({ by{" "} - {item.creator_display_name} + {item.creator.display_name}

diff --git a/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx b/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx index 4fcf318957..99f2ba1f90 100644 --- a/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx +++ b/packages/fakeyou.com/src/components/common/WeightCoverImage/WeightCoverImage.tsx @@ -17,6 +17,7 @@ export default function WeightCoverImage({ const containerStyle = { height: `${height}px`, width: `${width}px`, + minWidth: `${width}px`, }; return ( diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx index f250cfba35..55baee36cd 100644 --- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx +++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx @@ -12,6 +12,7 @@ import { faCompass, faUser, faSignOutAlt, + faCameraMovie, } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import React, { useEffect, useState } from "react"; @@ -353,6 +354,21 @@ export default function SideNav({ +
  • + + + Storyteller Studio + {/* {t("videoStorytellerStudio")} */} + +
    • +
  • {t("communityTitle")}
  • diff --git a/packages/fakeyou.com/src/hooks/useWeightTypeInfo/useWeightTypeInfo.tsx b/packages/fakeyou.com/src/hooks/useWeightTypeInfo/useWeightTypeInfo.tsx index 23a3417ce8..f619d16b64 100644 --- a/packages/fakeyou.com/src/hooks/useWeightTypeInfo/useWeightTypeInfo.tsx +++ b/packages/fakeyou.com/src/hooks/useWeightTypeInfo/useWeightTypeInfo.tsx @@ -22,7 +22,7 @@ const weightTypeInfo: WeightTypeInfo = { color: "purple", fullLabel: "Stable Diffusion XL", }, - [WeightType.SVC]: { label: "SVC", color: "cyan", fullLabel: "SVC" }, + [WeightType.SVC]: { label: "SVC", color: "turquoise", fullLabel: "SVC" }, [WeightType.LORA]: { label: "LoRA", color: "pink", fullLabel: "LoRA" }, [WeightType.VALL_E]: { label: "VALL-E", diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index fd3c26352e..4b324ecc40 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -84,10 +84,10 @@ import { GenerateSpeechPage } from "./pages/generate_speech/GenerateSpeechPage"; import VcModelViewPage from "./pages/vc/vc_model_view/VcModelViewPage"; import VcModelEditPage from "./pages/vc/vc_model_edit/VcModelEditPage"; import VcModelDeletePage from "./pages/vc/vc_model_delete/VcModelDeletePage"; +import { StorytellerStudioListPage } from "./pages/storyteller_studio/vc_model_list/StorytellerStudioListPage"; import TopNav from "components/layout/TopNav/TopNav"; import SideNav from "components/layout/SideNav/SideNav"; import MobileMenu from "components/layout/MobileMenu/MobileMenu"; -import TtsModelSearchPage from "./pages/tts/tts_model_search/TtsModelSearchPage"; import MediaPage from "./pages/media/MediaPage"; import { VoiceDesignerFormPage } from "./pages/voice_designer/VoiceDesignerFormPage"; import { VoiceDesignerMainPage } from "./pages/voice_designer/VoiceDesignerMainPage"; @@ -380,12 +380,6 @@ class PageContainer extends React.Component< - - - - @@ -676,6 +670,15 @@ class PageContainer extends React.Component< /> + + + + diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio/vc_model_list/StorytellerStudioListPage.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio/vc_model_list/StorytellerStudioListPage.tsx new file mode 100644 index 0000000000..b6c6699662 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio/vc_model_list/StorytellerStudioListPage.tsx @@ -0,0 +1,59 @@ +import React, { useState, useEffect, useCallback } from "react"; +import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; +import Iframe from "react-iframe"; + +import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; +import { SsPageHero } from "./components/SsPageHero"; + +interface Props { + sessionWrapper: SessionWrapper; + sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; +} + +function StorytellerStudioListPage(props: Props) { + return ( +
    + + +
    +