Merge branch 'feature/mvp' of https://github.com/storytold/storyteller-frontend into feature/mvp

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" },
-};

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`,
+});

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<string,GetWeightRequest,GetWeightResponse,{}>({
+export const GetWeight = MakeRequest<
+  string,
+  GetWeightRequest,
+  GetWeightResponse,
+  {}
+>({
   method: "GET",
   routingFunction: (weightToken: string) => `/v1/weights/weight/${weightToken}`,
-});
+});

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 (
     <Card padding={true} onClick={handleCardClick}>
       {type === "media" && (
@@ -113,7 +117,7 @@ export default function AudioCard({
             <div className="flex-grow-1">
               <div className="d-flex align-items-center">
                 <div className="d-flex flex-grow-1">
-                  <Badge label="RVC" color="orange" />
+                  <Badge label={weightBadgeLabel} color={weightBadgeColor} />
                 </div>
                 <Button
                   icon={faArrowRight}

packages/fakeyou.com/src/hooks/useShortenNumber/useShortenNumber.tsx

@@ -1,4 +1,6 @@
 export default function useShortenNumber(num: number): string {
+  if (isNaN(num)) return "0";
+  if (num === 0) return "0";
   if (Math.abs(num) < 1e3) return num.toString();
   if (Math.abs(num) < 1e6) return (num / 1e3).toFixed(1) + "k";
   if (Math.abs(num) < 1e9) return (num / 1e6).toFixed(1) + "M";

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",
     }
   );
 }

packages/fakeyou.com/src/v2/view/pages/explore/tabs/FeaturedTab.tsx

@@ -1,26 +1,33 @@
 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<HTMLDivElement | null>(null);
-  const [data] = useState(mockWeightsData);
   const [isLoading] = useState(false);
+  const [list, listSet] = useState<MediaFile[]>([]);
+
+  const media = useLazyLists({
+    fetcher: ListFeaturedMediaFiles,
+    list,
+    listSet,
+    requestList: true,
+  });
 
   return (
     <div className="d-flex flex-column gap-4">
       <div>
         <div className="d-flex align-items-center mb-3">
-          <h3 className="fw-semibold mb-0 flex-grow-1">
-            Featured Voice Weights
-          </h3>
-          <Link to="/explore/weights">
-            View all
+          <h3 className="fw-semibold mb-0 flex-grow-1">Featured Media</h3>
+          <Link to="/explore/media">
+            View media
             <FontAwesomeIcon icon={faChevronRight} className="ms-2" />
           </Link>
         </div>
@@ -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 = (
                 <AudioCard
                   key={index}
                   data={data}
-                  type="weights"
+                  type="media"
                   showCreator={true}
                   showCover={true}
                 />

packages/fakeyou.com/src/v2/view/pages/explore/tabs/WeightsTab.tsx

@@ -103,6 +103,7 @@ export default function MediaTab() {
                         data={data}
                         type="weights"
                         showCreator={true}
+                        showCover={true}
                       />
                     );
                     break;
@@ -113,6 +114,7 @@ export default function MediaTab() {
                         data={data}
                         type="weights"
                         showCreator={true}
+                        showCover={true}
                       />
                     );
                     break;
@@ -123,6 +125,7 @@ export default function MediaTab() {
                         data={data}
                         type="weights"
                         showCreator={true}
+                        showCover={true}
                       />
                     );
                     break;
@@ -136,6 +139,9 @@ export default function MediaTab() {
                       />
                     );
                     break;
+                  case WeightCategory.VOCODER:
+                    card = <></>;
+                    break;
                   default:
                     card = <div>Unsupported weight type</div>;
                 }

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({
       </Container>
     );
 
-  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, { weightCategory: string }> =
     {
       [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({
                 <p>{weightCategory}</p>
                 {subtitleDivider}
                 <div className="d-flex align-items-center gap-2">
-                  <LikeButton {...{
-                    entityToken: weight_token,
-                    entityType: "model_weight",
-                    likeCount: 1200,
-                    onToggle: bookmarks.toggle,
-                    large: true
-                  }}/>
-                  <FavoriteButton {...{
-                    entityToken: weight_token,
-                    entityType: "model_weight",
-                    favoriteCount: 100,
-                    onToggle: bookmarks.toggle,
-                    large: true
-                  }}/>
+                  <LikeButton
+                    {...{
+                      entityToken: weight_token,
+                      entityType: "model_weight",
+                      likeCount: 1200,
+                      onToggle: bookmarks.toggle,
+                      large: true,
+                    }}
+                  />
+                  <FavoriteButton
+                    {...{
+                      entityToken: weight_token,
+                      entityType: "model_weight",
+                      onToggle: bookmarks.toggle,
+                      large: true,
+                    }}
+                  />
                 </div>
               </div>
             </div>