From 8973593d4af969a97cf62243f0efd2f20c53e5eb Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 23 Dec 2023 08:11:11 +0700 Subject: [PATCH 1/4] featured media list --- .../api/media_files/ListFeaturedMediaFiles.ts | 19 +++++++++++++++++ .../view/pages/explore/tabs/FeaturedTab.tsx | 21 ++++++++++++------- 2 files changed, 33 insertions(+), 7 deletions(-) create mode 100644 packages/components/src/api/media_files/ListFeaturedMediaFiles.ts diff --git a/packages/components/src/api/media_files/ListFeaturedMediaFiles.ts b/packages/components/src/api/media_files/ListFeaturedMediaFiles.ts new file mode 100644 index 0000000000..91585aff7c --- /dev/null +++ b/packages/components/src/api/media_files/ListFeaturedMediaFiles.ts @@ -0,0 +1,19 @@ +import MakeRequest from "../MakeRequest"; +import { MediaFile } from "./GetMedia"; + +export interface ListFeaturedMediaFilesRequest {} + +export interface ListFeaturedMediaFilesResponse { + success: boolean; + media_files: MediaFile[]; +} + +export const ListFeaturedMediaFiles = MakeRequest< + string, + ListFeaturedMediaFilesRequest, + ListFeaturedMediaFilesResponse, + {} +>({ + method: "GET", + routingFunction: () => `/v1/media_files/list_featured`, +}); diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx index 91a27c9764..8235d31323 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx @@ -1,24 +1,31 @@ import React, { useRef, useState } from "react"; import MasonryGrid from "components/common/MasonryGrid/MasonryGrid"; -import mockWeightsData from "./mockWeightsData"; import AudioCard from "components/common/Card/AudioCard"; import SkeletonCard from "components/common/Card/SkeletonCard"; import { Link } from "react-router-dom"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronRight } from "@fortawesome/pro-solid-svg-icons"; +import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia"; +import { useLazyLists } from "hooks"; +import { ListFeaturedMediaFiles } from "@storyteller/components/src/api/media_files/ListFeaturedMediaFiles"; export default function FeaturedTab() { const gridContainerRef = useRef(null); - const [data] = useState(mockWeightsData); const [isLoading] = useState(false); + const [list, listSet] = useState([]); + + const media = useLazyLists({ + fetcher: ListFeaturedMediaFiles, + list, + listSet, + requestList: true, + }); return (
-

- Featured Voice Weights -

+

Featured Media

View all @@ -36,12 +43,12 @@ export default function FeaturedTab() { gridRef={gridContainerRef} onLayoutComplete={() => console.log("Layout complete!")} > - {data.map((data, index) => { + {media.list.map((data, index) => { let card = ( From 868f5b294ba641c28dcbe0b8e2f9b659a085e936 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 23 Dec 2023 08:56:41 +0700 Subject: [PATCH 2/4] weight page updates --- .../src/api/_common/enums/WeightType.ts | 15 +-- .../components/src/api/weights/GetWeight.ts | 11 +- .../useWeightTypeInfo/useWeightTypeInfo.tsx | 38 +++++-- .../src/v2/view/pages/weight/WeightPage.tsx | 104 +++++++----------- 4 files changed, 77 insertions(+), 91 deletions(-) diff --git a/packages/components/src/api/_common/enums/WeightType.ts b/packages/components/src/api/_common/enums/WeightType.ts index 3866895148..246e7ca6b1 100644 --- a/packages/components/src/api/_common/enums/WeightType.ts +++ b/packages/components/src/api/_common/enums/WeightType.ts @@ -7,18 +7,5 @@ export enum WeightType { SVC = "so_vits_svc", LORA = "loRA", VALL_E = "vall_e", + NONE = "none", } - -export const weightTypeInfo = { - [WeightType.TT2]: { label: "TT2", color: "teal" }, - [WeightType.HIFIGAN_TT2]: { - label: "HifiGAN TT2", - color: "blue", - }, - [WeightType.RVCv2]: { label: "RVCv2", color: "orange" }, - [WeightType.SD_15]: { label: "SD 1.5", color: "green" }, - [WeightType.SDXL]: { label: "SDXL", color: "purple" }, - [WeightType.SVC]: { label: "SVC", color: "cyan" }, - [WeightType.LORA]: { label: "LoRA", color: "pink" }, - [WeightType.VALL_E]: { label: "VALL-E", color: "ultramarine" }, -}; diff --git a/packages/components/src/api/weights/GetWeight.ts b/packages/components/src/api/weights/GetWeight.ts index 3b30093fb3..3e12ab8b0d 100644 --- a/packages/components/src/api/weights/GetWeight.ts +++ b/packages/components/src/api/weights/GetWeight.ts @@ -26,10 +26,15 @@ export interface GetWeightRequest {} export interface GetWeightResponse { success: boolean; - media_file?: Weight; + weight?: Weight; } -export const GetWeight = MakeRequest({ +export const GetWeight = MakeRequest< + string, + GetWeightRequest, + GetWeightResponse, + {} +>({ method: "GET", routingFunction: (weightToken: string) => `/v1/weights/weight/${weightToken}`, -}); \ No newline at end of file +}); diff --git a/packages/fakeyou.com/src/hooks/useWeightTypeInfo/useWeightTypeInfo.tsx b/packages/fakeyou.com/src/hooks/useWeightTypeInfo/useWeightTypeInfo.tsx index ca3dac7c12..23a3417ce8 100644 --- a/packages/fakeyou.com/src/hooks/useWeightTypeInfo/useWeightTypeInfo.tsx +++ b/packages/fakeyou.com/src/hooks/useWeightTypeInfo/useWeightTypeInfo.tsx @@ -1,25 +1,43 @@ import { WeightType } from "@storyteller/components/src/api/_common/enums/WeightType"; type WeightTypeInfo = { - [key in WeightType]: { label: string; color: string }; + [key in WeightType]: { label: string; color: string; fullLabel?: string }; }; const weightTypeInfo: WeightTypeInfo = { - [WeightType.TT2]: { label: "TT2", color: "teal" }, - [WeightType.HIFIGAN_TT2]: { label: "HifiGAN TT2", color: "blue" }, - [WeightType.RVCv2]: { label: "RVCv2", color: "orange" }, - [WeightType.SD_15]: { label: "SD 1.5", color: "green" }, - [WeightType.SDXL]: { label: "SDXL", color: "purple" }, - [WeightType.SVC]: { label: "SVC", color: "cyan" }, - [WeightType.LORA]: { label: "LoRA", color: "pink" }, - [WeightType.VALL_E]: { label: "VALL-E", color: "ultramarine" }, + [WeightType.TT2]: { label: "TT2", color: "teal", fullLabel: "Tacotron 2" }, + [WeightType.HIFIGAN_TT2]: { + label: "HifiGAN TT2", + color: "blue", + fullLabel: "HifiGAN Tacotron 2", + }, + [WeightType.RVCv2]: { label: "RVC v2", color: "orange", fullLabel: "RVC v2" }, + [WeightType.SD_15]: { + label: "SD 1.5", + color: "green", + fullLabel: "Stable Diffusion 1.5", + }, + [WeightType.SDXL]: { + label: "SDXL", + color: "purple", + fullLabel: "Stable Diffusion XL", + }, + [WeightType.SVC]: { label: "SVC", color: "cyan", fullLabel: "SVC" }, + [WeightType.LORA]: { label: "LoRA", color: "pink", fullLabel: "LoRA" }, + [WeightType.VALL_E]: { + label: "VALL-E", + color: "ultramarine", + fullLabel: "VALL-E", + }, + [WeightType.NONE]: { label: "None", color: "gray", fullLabel: "None" }, }; export default function useWeightTypeInfo(weightsType: WeightType) { return ( weightTypeInfo[weightsType] || { - label: "Unknown", + label: "None", color: "gray", + fullLabel: "None", } ); } diff --git a/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx b/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx index 51176e9922..00be899675 100644 --- a/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx @@ -36,6 +36,7 @@ import SocialButton from "components/common/SocialButton"; import Input from "components/common/Input"; import { GetWeight } from "@storyteller/components/src/api/weights/GetWeight"; import { useBookmarks } from "hooks"; +import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo"; interface WeightProps { sessionWrapper: SessionWrapper; @@ -70,19 +71,28 @@ export default function WeightPage({ const bookmarks = useBookmarks(); + const weightTypeInfo = useWeightTypeInfo( + weight?.weights_type || WeightType.NONE + ); + const { + label: weightType, + color: weightTagColor, + fullLabel: weightTypeFull, + } = weightTypeInfo; + useEffect(() => { if (weight_token && !weight && isLoading) { - GetWeight(weight_token,{}) - .then((res: any) => { - console.log("🏋️",res); - setIsLoading(false); - setWeight(res); - }) - .catch((err) => { - setError(err); - }); + GetWeight(weight_token, {}) + .then((res: any) => { + console.log("🏋️", res); + setIsLoading(false); + setWeight(res); + }) + .catch(err => { + setError(err); + }); } - },[isLoading, weight, weight_token]); + }, [isLoading, weight, weight_token]); function renderWeightComponent(weight: Weight) { switch (weight.weights_category) { @@ -190,43 +200,6 @@ export default function WeightPage({ ); - const weightTypeMap: Record< - WeightType, - { weightType: string; weightTagColor: string } - > = { - [WeightType.TT2]: { - weightType: "Tacotron 2", - weightTagColor: "ultramarine", - }, - [WeightType.HIFIGAN_TT2]: { - weightType: "HiFi-GAN Tacotron 2", - weightTagColor: "blue", - }, - [WeightType.VALL_E]: { weightType: "VALL-E", weightTagColor: "purple" }, - [WeightType.LORA]: { weightType: "LoRA", weightTagColor: "pink" }, - [WeightType.RVCv2]: { - weightType: "RVCv2", - weightTagColor: "orange", - }, - [WeightType.SD_15]: { - weightType: "Stable Diffusion 1.5", - weightTagColor: "lime", - }, - [WeightType.SDXL]: { - weightType: "Stable Diffusion XL", - weightTagColor: "green", - }, - [WeightType.SVC]: { - weightType: "SVC", - weightTagColor: "aqua", - }, - }; - - let { weightType, weightTagColor } = weightTypeMap[weight.weights_type] || { - weightType: "", - weightTagColor: "", - }; - const weightCategoryMap: Record = { [WeightCategory.TTS]: { weightCategory: "Text to Speech" }, @@ -237,11 +210,11 @@ export default function WeightPage({ }; let { weightCategory } = weightCategoryMap[weight.weights_category] || { - weightCategory: "", + weightCategory: "none", }; const voiceDetails = [ - { property: "Type", value: weightType }, + { property: "Type", value: weightTypeFull || WeightType.NONE }, { property: "Category", value: weightCategory }, { property: "Visibility", @@ -252,7 +225,7 @@ export default function WeightPage({ ]; const imageDetails = [ - { property: "Type", value: weightType }, + { property: "Type", value: weightTypeFull || WeightType.NONE }, { property: "Category", value: weightCategory }, { property: "Visibility", @@ -365,20 +338,23 @@ export default function WeightPage({

{weightCategory}

{subtitleDivider}
- - + +
From dbaa0b5cc8f1e39ce105ec402c8714d3fe42b485 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 23 Dec 2023 09:11:38 +0700 Subject: [PATCH 3/4] view media link --- .../src/v2/view/pages/explore/tabs/FeaturedTab.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx index 8235d31323..74d146d748 100644 --- a/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx @@ -26,8 +26,8 @@ export default function FeaturedTab() {

Featured Media

- - View all + + View media
From b9ee6f012eed97a594bbb9a8d4bea7f5e2b7fd55 Mon Sep 17 00:00:00 2001 From: BFlat Date: Sat, 23 Dec 2023 09:31:35 +0700 Subject: [PATCH 4/4] weight audio card update --- .../src/components/common/Card/AudioCard/AudioCard.tsx | 6 +++++- .../src/hooks/useShortenNumber/useShortenNumber.tsx | 2 ++ .../src/v2/view/pages/explore/tabs/WeightsTab.tsx | 6 ++++++ 3 files changed, 13 insertions(+), 1 deletion(-) 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 f147520fd2..99557742a6 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -9,6 +9,7 @@ import FavoriteButton from "components/common/FavoriteButton"; import CreatorName from "../CreatorName"; import { faArrowRight } from "@fortawesome/pro-solid-svg-icons"; import Button from "components/common/Button"; +import useWeightTypeInfo from "hooks/useWeightTypeInfo/useWeightTypeInfo"; interface AudioCardProps { data: any; @@ -50,6 +51,9 @@ export default function AudioCard({ return true; // temporary, replace with like function }; + const { label: weightBadgeLabel, color: weightBadgeColor } = + useWeightTypeInfo(data.weights_type); + return ( {type === "media" && ( @@ -113,7 +117,7 @@ export default function AudioCard({
- +