From ec1f8df2daad6f604105975ad89447dc575acf03 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Tue, 13 Feb 2024 09:26:55 +0700
Subject: [PATCH] upload weights buttons update/import error fix

---
 .../modals/MediaBrowser/MediaBrowser.tsx      | 166 +++++++++++-------
 .../src/v2/view/pages/landing/Dashboard.tsx   |  29 ++-
 2 files changed, 125 insertions(+), 70 deletions(-)

diff --git a/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx
index bccae13ca0..fff6497302 100644
--- a/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx
+++ b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx
@@ -1,59 +1,82 @@
 import React, { useState } from "react";
 import { MediaList } from "components/entities";
-import { EntityType, EntityFilterOptions, MediaFilterProp, WeightFilterProp } from "components/entities/EntityTypes";
+import {
+  EntityType,
+  EntityFilterOptions,
+  MediaFilterProp,
+  WeightFilterProp,
+} from "components/entities/EntityTypes";
 import { TempSelect } from "components/common";
 import AudioPlayerProvider from "components/common/AudioPlayer/AudioPlayerContext";
 import SkeletonCard from "components/common/Card/SkeletonCard";
 import Pagination from "components/common/Pagination";
 import { GetMediaByUser } from "@storyteller/components/src/api/media_files/GetMediaByUser";
 import { GetWeightsByUser } from "@storyteller/components/src/api/weights/GetWeightsByUser";
-import { SearchWeight } from "@storyteller/components/src/api/weights/Search";
+import { SearchWeights } from "@storyteller/components/src/api/weights/SearchWeights";
 import { MediaFile } from "@storyteller/components/src/api/media_files/GetMedia";
 import { Weight } from "@storyteller/components/src/api/weights/GetWeight";
 import { useListContent, useRatings } from "hooks";
-import { faArrowDownWideShort, faFilter } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faArrowDownWideShort,
+  faFilter,
+} from "@fortawesome/pro-solid-svg-icons";
 import prepFilter from "resources/prepFilter";
 import ModalHeader from "../ModalHeader";
 import "./MediaBrowser.scss";
 
 interface Props {
-  entityType: EntityType,
-  filterType?: MediaFilterProp | WeightFilterProp,
-  handleClose: any,
-  mediaToken: string,
-  onSelect?: any,
-  owner?: string,
-  search?: string,
-  username: string,
+  entityType: EntityType;
+  filterType?: MediaFilterProp | WeightFilterProp;
+  handleClose: any;
+  mediaToken: string;
+  onSelect?: any;
+  owner?: string;
+  search?: string;
+  username: string;
 }
 
-export default function MediaBrowser({ entityType, filterType: inputFilter, mediaToken, handleClose = () => {}, onSelect, owner, search, username }: Props) {
+export default function MediaBrowser({
+  entityType,
+  filterType: inputFilter,
+  mediaToken,
+  handleClose = () => {},
+  onSelect,
+  owner,
+  search,
+  username,
+}: Props) {
   const ratings = useRatings();
   const [showMasonryGrid, setShowMasonryGrid] = useState(true);
-  const [filterType, filterTypeSet] = useState(inputFilter ||  "all");
+  const [filterType, filterTypeSet] = useState(inputFilter || "all");
   const [list, listSet] = useState<MediaFile | Weight[]>([]);
-  const fetcher = search ? SearchWeight : [() => {},GetMediaByUser,GetWeightsByUser][entityType] || GetMediaByUser;
+  const fetcher = search
+    ? SearchWeights
+    : [() => {}, GetMediaByUser, GetWeightsByUser][entityType] ||
+      GetMediaByUser;
   const entities = useListContent({
     debug: "media browser",
     addQueries: {
-      ...search ? {} : { page_size: 24 },
-      ...prepFilter(filterType, ["","filter_media_type","maybe_scoped_weight_type"][entityType]),
+      ...(search ? {} : { page_size: 24 }),
+      ...prepFilter(
+        filterType,
+        ["", "filter_media_type", "maybe_scoped_weight_type"][entityType]
+      ),
     },
     addSetters: { filterTypeSet },
     fetcher,
     list,
     listSet,
     onInputChange: () => setShowMasonryGrid(false),
-    onSuccess: (res) => {
+    onSuccess: res => {
       // bookmarks.gather({ res, key: "token" });
       ratings.gather({ res, key: "token" });
       setShowMasonryGrid(true);
     },
-    ...search ? { request: { search_term: search } } : {},
+    ...(search ? { request: { search_term: search } } : {}),
     requestList: true,
-    ...search ? { resultsKey: "weights" } : {},
+    ...(search ? { resultsKey: "weights" } : {}),
     urlParam: owner || username,
-    urlUpdate: false
+    urlUpdate: false,
   });
 
   const handlePageClick = (selectedItem: { selected: number }) => {
@@ -72,54 +95,71 @@ export default function MediaBrowser({ entityType, filterType: inputFilter, medi
     // { value: "mostliked", label: "Most Liked" },
   ];
 
-  const title = ["",`${ owner ? owner + "'s " : "" }Media`,"Weights"][entityType];
+  const title = ["", `${owner ? owner + "'s " : ""}Media`, "Weights"][
+    entityType
+  ];
 
   const onClick = (data: any) => {
-    console.log("🩵",data);
+    console.log("🩵", data);
     onSelect(data);
     handleClose();
   };
 
-  return <>
-    <ModalHeader {...{ handleClose, title}}>
-      <TempSelect
-        {...{
-          icon: faArrowDownWideShort,
-          options: sortOptions,
-          name: "sort",
-          onChange: entities.onChange,
-          value: entities.sort,
-        }}
-      />
-      { (!inputFilter || inputFilter === "all") && <TempSelect {...{
-            icon: faFilter,
-            options: EntityFilterOptions(entityType),
-            name: "filterType",
+  return (
+    <>
+      <ModalHeader {...{ handleClose, title }}>
+        <TempSelect
+          {...{
+            icon: faArrowDownWideShort,
+            options: sortOptions,
+            name: "sort",
             onChange: entities.onChange,
-            value: filterType,
-          }}/> }
-      <Pagination {...paginationProps} />
-    </ModalHeader>
-    <AudioPlayerProvider>
-      { entities.isLoading ? (
-        <div {...{ className: "row gx-3 gy-3" }}>
-          {Array.from({ length: 12 }).map((_, index) => (
-            <SkeletonCard key={index} />
-          ))}
-        </div>
-      ) : (
-        <>
-          { showMasonryGrid && (
-            <div {...{ className: "fy-media-browser-list" }}>
-              <MediaList {...{ entityType, list: entities.list, success: entities.status === 3, onClick }}/>
-            </div>
-          ) }
-        </>
-      )}
-    </AudioPlayerProvider>
+            value: entities.sort,
+          }}
+        />
+        {(!inputFilter || inputFilter === "all") && (
+          <TempSelect
+            {...{
+              icon: faFilter,
+              options: EntityFilterOptions(entityType),
+              name: "filterType",
+              onChange: entities.onChange,
+              value: filterType,
+            }}
+          />
+        )}
+        <Pagination {...paginationProps} />
+      </ModalHeader>
+      <AudioPlayerProvider>
+        {entities.isLoading ? (
+          <div {...{ className: "row gx-3 gy-3" }}>
+            {Array.from({ length: 12 }).map((_, index) => (
+              <SkeletonCard key={index} />
+            ))}
+          </div>
+        ) : (
+          <>
+            {showMasonryGrid && (
+              <div {...{ className: "fy-media-browser-list" }}>
+                <MediaList
+                  {...{
+                    entityType,
+                    list: entities.list,
+                    success: entities.status === 3,
+                    onClick,
+                  }}
+                />
+              </div>
+            )}
+          </>
+        )}
+      </AudioPlayerProvider>
 
-    <footer {...{ className: "fy-media-browser-footer fy-media-browser-tools" }}>
-      <Pagination {...paginationProps} />
-    </footer>
-  </>;
-};
\ No newline at end of file
+      <footer
+        {...{ className: "fy-media-browser-footer fy-media-browser-tools" }}
+      >
+        <Pagination {...paginationProps} />
+      </footer>
+    </>
+  );
+}
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx
index 23d1c82672..8e062a4572 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx
@@ -1,7 +1,10 @@
 import {
-  faFileArrowUp,
   faFlask,
+  faImage,
+  faMessageDots,
   faSparkles,
+  faWaveform,
+  faWaveformLines,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper";
@@ -24,25 +27,37 @@ export default function Dashboard(props: DashboardProps) {
   if (isLoggedIn) {
     uploadModelSection = (
       <>
-        <h2 className="fw-bold mb-4 mt-5 pt-4">Upload Models</h2>
+        <h2 className="fw-bold mb-4 mt-5 pt-4">Upload Weights</h2>
         <div className="panel p-4 rounded">
           <div className="row gy-3 zi-2">
             <div className="col-12 col-lg-4">
               <Link to="/upload/tts" className="btn btn-secondary">
-                <FontAwesomeIcon icon={faFileArrowUp} className="me-2" />
+                <FontAwesomeIcon icon={faMessageDots} className="me-2" />
                 Upload TTS Model
               </Link>
             </div>
             <div className="col-12 col-lg-4">
               <Link to="/upload/voice_conversion" className="btn btn-secondary">
-                <FontAwesomeIcon icon={faFileArrowUp} className="me-2" />
+                <FontAwesomeIcon icon={faWaveformLines} className="me-2" />
                 Upload V2V Model
               </Link>
             </div>
             <div className="col-12 col-lg-4">
-              <Link to="/upload/w2l_photo" className="btn btn-secondary">
-                <FontAwesomeIcon icon={faFileArrowUp} className="me-2" />
-                Upload W2L Model
+              <Link to="/upload/vocoder" className="btn btn-secondary">
+                <FontAwesomeIcon icon={faWaveform} className="me-2" />
+                Upload Vocoder
+              </Link>
+            </div>
+            <div className="col-12 col-lg-4">
+              <Link to="/upload/sd" className="btn btn-secondary">
+                <FontAwesomeIcon icon={faImage} className="me-2" />
+                Upload Stable Diffusion Weight
+              </Link>
+            </div>
+            <div className="col-12 col-lg-4">
+              <Link to="/upload/lora" className="btn btn-secondary">
+                <FontAwesomeIcon icon={faImage} className="me-2" />
+                Upload LoRA weight
               </Link>
             </div>
           </div>