diff --git a/packages/components/src/api/ApiConfig.ts b/packages/components/src/api/ApiConfig.ts index d548b60bd9..f336c75d63 100644 --- a/packages/components/src/api/ApiConfig.ts +++ b/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 { 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 4323584c40..6719f658fe 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -20,7 +20,7 @@ export default function AudioCard({ data, type }: AudioCardProps) { if (type === "media") { history.push(`/media/${data.token}`); } else if (type === "weights") { - history.push(`/weights/${data.token}`); + history.push(`/weight/${data.token}`); } }; @@ -30,7 +30,7 @@ export default function AudioCard({ data, type }: AudioCardProps) { const handleUseModel = () => { if (type === "weights") { - history.push(`/weights/${data.token}`); + history.push(`/weight/${data.token}`); } }; diff --git a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx index 4bda2d687c..fa855ce3be 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -19,7 +19,7 @@ export default function ImageCard({ data, type }: ImageCardProps) { if (type === "media") { history.push(`/media/${data.token}`); } else if (type === "weights") { - history.push(`/weights/${data.token}`); + history.push(`/weight/${data.token}`); } }; diff --git a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx b/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx index 8d258e6e13..fd8cfa9e23 100644 --- a/packages/fakeyou.com/src/v2/view/pages/profile/profile_view/tabs/WeightsTab.tsx +++ b/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(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); }; @@ -63,6 +142,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 ( @@ -74,6 +245,7 @@ export default function WeightsTab() { options={sortOptions} defaultValue={sortOptions[0]} isSearchable={false} + onChange={handleOrderChange} />