Merge branch 'feature/mvp' into bflat-fy-explore-search-rebased

launch_dev_browser.sh

@@ -1,6 +1,9 @@
 #!/bin/bash
 
-declare -r CHROME_DIR="${HOME}/.chromeDevTemp"
+declare -r entropy=$(xxd -l16 -ps /dev/urandom)
+
+#declare -r CHROME_DIR="${HOME}/.chromeDevTemp"
+declare -r chrome_dir="/tmp/chrome/${entropy}"
 
 # NB: Creating the directory first seems to block process start.
 # Perhaps this is the wrong chmod ownership flags.
@@ -8,9 +11,12 @@ declare -r CHROME_DIR="${HOME}/.chromeDevTemp"
 
 launch_linux() {
   chromium \
+    --disable-site-isolation-trials \
     --disable-web-security \
     --ignore-certificate-errors \
-    --user-data-dir="${CHROME_DIR}" \
+    --install-autogenerated-theme="100,150,255" \
+    --unsafely-treat-insecure-origin-as-secure="http://dev.fakeyou.com:7000" \
+    --user-data-dir="${chrome_dir}" \
     http://dev.fakeyou.com:7000
 }
 
@@ -23,8 +29,9 @@ launch_mac() {
     --disable-site-isolation-trials \
     --disable-web-security \
     --ignore-certificate-errors \
+    --install-autogenerated-theme="100,150,255" \
     --unsafely-treat-insecure-origin-as-secure="http://dev.fakeyou.com:7001" \
-    --user-data-dir="${CHROME_DIR}" \
+    --user-data-dir="${chrome_dir}" \
     http://dev.fakeyou.com:7001
 }
 

packages/components/src/api/ApiConfig.ts

@@ -433,6 +433,16 @@ class ApiConfig {
     return `${this.getApiOrigin()}/v1/media_files/file/${mediaFileToken}`;
   }
 
+  // =============== Weights Files ===============
+
+  getWeights(params: string): string {
+    return `${this.getApiOrigin()}/v1/weights/list${params}`;
+  }
+
+  getWeight(params: string): string {
+    return `${this.getApiOrigin()}/v1/weights/weight/${params}`;
+  }
+
   // =============== File Uploads ===============
 
   uploadAudio(): string {

packages/fakeyou.com/src/v2/view/pages/password_reset/PasswordResetEmailPage.tsx

@@ -26,7 +26,7 @@ function PasswordResetEmailPage(props: Props) {
   const [emailOrUsername, setEmailOrUsername] = useState("");
   const [isSent, setIsSent] = useState(false);
 
-  if (!user) { history.push("/"); }
+  if (user) { history.push("/"); }
 
   const handleChange = (
     ev: React.FormEvent<HTMLInputElement>

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

@@ -1,6 +1,8 @@
-import React, { useRef, useState } from "react";
+// @ts-nocheck
+import React, { useRef, useState, useEffect } from "react";
 import MasonryGrid from "components/common/MasonryGrid/MasonryGrid";
 import mockWeightsData from "./mockWeightsData";
+import { ApiConfig } from "@storyteller/components";
 import AudioCard from "components/common/Card/AudioCard";
 import ImageCard from "components/common/Card/ImageCard";
 import VideoCard from "components/common/Card/VideoCard";
@@ -12,14 +14,91 @@ import {
 import SkeletonCard from "components/common/Card/SkeletonCard";
 import Pagination from "components/common/Pagination";
 
+interface IWeighttModelData {
+  token: string;
+  weight_name: string;
+  public_bucket_path: string;
+  likes: Number;
+  isLiked: boolean;
+  created_at: string;
+}
+
 export default function WeightsTab() {
   const gridContainerRef = useRef<HTMLDivElement | null>(null);
-  const [data] = useState(mockWeightsData);
+  const [data, setData] = useState(mockWeightsData);
   const [isLoading] = useState(false);
   const [selectedFilter, setSelectedFilter] = useState("all");
   const [currentPage, setCurrentPage] = useState(0);
   const itemsPerPage = 10;
 
+  useEffect(() => {
+    const api = new ApiConfig();
+    const endpointUrl = api.getWeights("?page_size=1000&page_index=0");
+    let weightsData = [];
+
+    fetch(endpointUrl, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then(res => res.json())
+      .then(res => {
+        if (!res.success) {
+          return;
+        }
+        console.log(res);
+        res.weights?.forEach((l: any) => {
+          weightsData.push({
+            token: l?.weight_token,
+            weight_name: l?.title,
+            media_type: "image",
+            public_bucket_path: "/images/dummy-image.jpg",
+            likes: l?.likes,
+            isLiked: l?.bookmarks,
+            created_at: l?.created_at,
+          });
+        });
+        setData(weightsData);
+      })
+      .catch(e => {});
+  }, []);
+
+  const updateRequest = (params: any) => {
+    const api = new ApiConfig();
+    const endpointUrl = api.getWeights("?page_size=1000&page_index=0" + params);
+    let weightsData = [];
+
+    fetch(endpointUrl, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then(res => res.json())
+      .then(res => {
+        if (!res.success) {
+          return;
+        }
+        console.log(res);
+        res.weights?.forEach((l: any) => {
+          weightsData.push({
+            token: l?.weight_token,
+            weight_name: l?.title,
+            media_type: "image",
+            public_bucket_path: "/images/dummy-image.jpg",
+            likes: l?.likes,
+            isLiked: l?.bookmarks,
+            created_at: l?.created_at,
+          });
+        });
+        setData(weightsData);
+      })
+      .catch(e => {});
+  };
+
   const handlePageClick = (selectedItem: { selected: number }) => {
     setCurrentPage(selectedItem.selected);
   };
@@ -69,6 +148,98 @@ export default function WeightsTab() {
   const handleFilterChange = (option: any) => {
     const selectedOption = option as { value: string; label: string };
     setSelectedFilter(selectedOption.value);
+
+    switch (selectedOption.value) {
+      case "all":
+        updateRequest("");
+        break;
+      case "tts":
+        updateRequest("&weights_category=text_to_speech");
+        break;
+      case "vc":
+        updateRequest("&weights_category=voice_conversion");
+        break;
+      case "sd":
+        updateRequest("&weights_category=image_generation");
+        break;
+      default:
+        updateRequest("");
+    }
+  };
+
+  const handleOrderChange = (option: any) => {
+    const selectedOption = option as { value: string; label: string };
+
+    switch (selectedOption.value) {
+      case "oldest":
+        updateRequest("&sort_ascending=true");
+        break;
+      case "newest":
+        updateRequest("&sort_ascending=false");
+        break;
+      case "mostliked":
+        updateRequest("&sort_ascending=false");
+        break;
+      default:
+        updateRequest("&sort_ascending=false");
+    }
+  };
+
+  const handleTtsChange = (option: any) => {
+    const selectedOption = option as { value: string; label: string };
+
+    switch (selectedOption.value) {
+      case "all":
+        updateRequest("&weights_category=text_to_speech");
+        break;
+      case "tt2":
+        updateRequest("&weights_type=hifigan_tt2");
+        break;
+      default:
+        updateRequest("&weights_category=text_to_speec");
+    }
+  };
+
+  const handleVcChange = (option: any) => {
+    const selectedOption = option as { value: string; label: string };
+
+    switch (selectedOption.value) {
+      case "all":
+        updateRequest("&weights_category=voice_conversion");
+        break;
+      case "rvc":
+        updateRequest("&weights_type=rvc_v2");
+        break;
+      case "svc":
+        console.log(selectedOption.value);
+        updateRequest("&weights_type=so_vits_svc");
+        break;
+      default:
+        updateRequest("&weights_category=voice_conversion");
+    }
+  };
+
+  const handleSdChange = (option: any) => {
+    const selectedOption = option as { value: string; label: string };
+
+    switch (selectedOption.value) {
+      case "all":
+        updateRequest("&weights_category=image_generation");
+        break;
+      case "lora":
+        updateRequest("&weights_type=loRA");
+        break;
+      case "SD15":
+        console.log(selectedOption.value);
+        updateRequest("&weights_type=sd_1.5");
+        break;
+      case "SDXL":
+        console.log(selectedOption.value);
+        updateRequest("&weights_type=sdxl");
+        break;
+      default:
+        updateRequest("&weights_category=image_generation");
+    }
   };
 
   return (
@@ -80,6 +251,7 @@ export default function WeightsTab() {
             options={sortOptions}
             defaultValue={sortOptions[0]}
             isSearchable={false}
+            onChange={handleOrderChange}
           />
 
           <Select
@@ -95,6 +267,7 @@ export default function WeightsTab() {
               options={modelTtsOptions}
               defaultValue={modelTtsOptions[0]}
               isSearchable={false}
+              onChange={handleTtsChange}
             />
           )}
           {selectedFilter === "sd" && (
@@ -102,6 +275,7 @@ export default function WeightsTab() {
               options={modelSdOptions}
               defaultValue={modelSdOptions[0]}
               isSearchable={false}
+              onChange={handleSdChange}
             />
           )}
           {selectedFilter === "vc" && (
@@ -109,6 +283,7 @@ export default function WeightsTab() {
               options={modelVcOptions}
               defaultValue={modelVcOptions[0]}
               isSearchable={false}
+              onChange={handleVcChange}
             />
           )}
         </div>

packages/fakeyou.com/src/v2/view/pages/weight/WeightPage.tsx

@@ -34,6 +34,7 @@ import TtsInferencePanel from "./inference_panels/TtsInferencePanel";
 import Modal from "components/common/Modal";
 import SocialButton from "components/common/SocialButton";
 import Input from "components/common/Input";
+import { ApiConfig } from "@storyteller/components";
 
 interface WeightProps {
   sessionWrapper: SessionWrapper;
@@ -93,19 +94,67 @@ export default function WeightPage({
     // Simulate an API call delay
     await new Promise(resolve => setTimeout(resolve, 1000));
 
-    if (dummyData) {
-      setWeight(dummyData);
-      setIsLoading(false);
-    } else {
-      setError(true);
-      setIsLoading(false);
-    }
+    // if (dummyData) {
+    //   setWeight(dummyData);
+    //   setIsLoading(false);
+    // } else {
+    //   setError(true);
+    //   setIsLoading(false);
+    // }
   }, []);
 
   useEffect(() => {
     getWeight(weight_token);
   }, [weight_token, getWeight]);
 
+  useEffect(() => {
+    const api = new ApiConfig();
+    const endpointUrl = api.getWeight("1");
+
+    fetch(endpointUrl, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then(res => res.json())
+      .then(res => {
+        if (!res.success) {
+          return;
+        }
+        console.log(res);
+        const dummyData = {
+          weight_token: res?.weight_token,
+          title: res?.title,
+          created_at: new Date(),
+          updated_at: new Date(),
+          weight_type: WeightType.HIFIGAN_TT2,
+          weight_category: WeightCategory.TTS,
+          maybe_creator_user: {
+            user_token: "test",
+            username: "",
+            display_name: "",
+            gravatar_hash: "test",
+            default_avatar: {
+              image_index: 0,
+              color_index: 0,
+            },
+          },
+          creator_set_visibility: "Public",
+          description_markdown: res?.description_markdown,
+        };
+        if (dummyData) {
+          setWeight(dummyData);
+          setIsLoading(false);
+        } else {
+          setError(true);
+          setIsLoading(false);
+        }
+      })
+      .catch(e => {});
+  }, []);
+
   function renderWeightComponent(weight: Weight) {
     switch (weight.weight_category) {
       case WeightCategory.TTS:
@@ -420,7 +469,7 @@ export default function WeightPage({
               <h4 className="fw-semibold mb-3">Comments</h4>
               <CommentComponent
                 entityType="user"
-                entityToken={weight.weight_token}
+                entityToken={"1"}
                 sessionWrapper={sessionWrapper}
               />
             </div>