From 55668e51c5a42e09a1d8ac710c3269a675930cb5 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 8 Dec 2023 01:11:07 +0700 Subject: [PATCH 01/11] weights view page --- .../src/api/_common/enums/WeightsCategory.ts | 7 + .../src/api/_common/enums/WeightsType.ts | 9 + .../components/src/api/weights/GetWeight.ts | 27 + .../src/components/common/Badge/Badge.scss | 5 +- .../common/Card/AudioCard/AudioCard.tsx | 4 +- .../common/Card/ImageCard/ImageCard.tsx | 4 +- .../common/Card/VideoCard/VideoCard.tsx | 4 +- .../common/FavoriteButton/FavoriteButton.scss | 11 +- .../common/FavoriteButton/FavoriteButton.tsx | 14 +- .../common/LikeButton/LikeButton.scss | 10 +- .../common/LikeButton/LikeButton.tsx | 10 +- .../common/RatingStars/RatingStars.scss | 4 + .../common/RatingStars/RatingStars.tsx | 46 ++ .../components/common/RatingStars/index.ts | 1 + .../common/SplitPanel/SplitPanel.tsx | 1 - .../layout/PageHeader/PageHeader.tsx | 4 +- .../fakeyou.com/src/scss/site-refresh.scss | 4 + .../fakeyou.com/src/v2/view/PageContainer.tsx | 17 +- .../src/v2/view/pages/weights/WeightsPage.tsx | 467 ++++++++++++++++++ 19 files changed, 626 insertions(+), 23 deletions(-) create mode 100644 packages/components/src/api/_common/enums/WeightsCategory.ts create mode 100644 packages/components/src/api/_common/enums/WeightsType.ts create mode 100644 packages/components/src/api/weights/GetWeight.ts create mode 100644 packages/fakeyou.com/src/components/common/RatingStars/RatingStars.scss create mode 100644 packages/fakeyou.com/src/components/common/RatingStars/RatingStars.tsx create mode 100644 packages/fakeyou.com/src/components/common/RatingStars/index.ts create mode 100644 packages/fakeyou.com/src/v2/view/pages/weights/WeightsPage.tsx diff --git a/packages/components/src/api/_common/enums/WeightsCategory.ts b/packages/components/src/api/_common/enums/WeightsCategory.ts new file mode 100644 index 0000000000..0513342ffc --- /dev/null +++ b/packages/components/src/api/_common/enums/WeightsCategory.ts @@ -0,0 +1,7 @@ +export enum WeightsCategory { + TTS = "text_to_speech", + VOCODER = "vocoder", + VC = "voice_conversion", + ZS = "zero_shot", + SD = "image_generation", +} diff --git a/packages/components/src/api/_common/enums/WeightsType.ts b/packages/components/src/api/_common/enums/WeightsType.ts new file mode 100644 index 0000000000..6e42f545d2 --- /dev/null +++ b/packages/components/src/api/_common/enums/WeightsType.ts @@ -0,0 +1,9 @@ +export enum WeightsType { + TT2 = "tt2", + HIFIGAN_TT2 = "hifigan_tt2", + RVCv2 = "rvc_v2", + SD_15 = "sd_1.5", + SDXL = "sdxl", + SVC = "so_vits_svc", + LORA = "loRA", +} diff --git a/packages/components/src/api/weights/GetWeight.ts b/packages/components/src/api/weights/GetWeight.ts new file mode 100644 index 0000000000..4374a724ca --- /dev/null +++ b/packages/components/src/api/weights/GetWeight.ts @@ -0,0 +1,27 @@ +// import MakeRequest from "../MakeRequest"; +import { UserDetailsLight } from "../_common/UserDetailsLight"; +import { WeightsCategory } from "../_common/enums/WeightsCategory"; +import { WeightsType } from "../_common/enums/WeightsType"; + +export interface Weight { + weight_token: string; + weights_type: WeightsType; + weights_category: WeightsCategory; + maybe_creator_user: UserDetailsLight | null; + creator_set_visibility: string; + created_at: Date; + updated_at: Date; + title: string; +} + +// export interface GetMediaRequest {} + +// export interface GetMediaResponse { +// success: boolean, +// media_file?: MediaFile, +// } + +// export const GetMedia = MakeRequest({ +// method: "GET", +// routingFunction: (mediaFileToken: string) => `/v1/media_files/file/${mediaFileToken}`, +// }); diff --git a/packages/fakeyou.com/src/components/common/Badge/Badge.scss b/packages/fakeyou.com/src/components/common/Badge/Badge.scss index 0346f788f3..81c7b48b3d 100644 --- a/packages/fakeyou.com/src/components/common/Badge/Badge.scss +++ b/packages/fakeyou.com/src/components/common/Badge/Badge.scss @@ -1,8 +1,9 @@ @import "scss/colours.scss"; .fy-badge { + display: flex; font-weight: 600; - border-radius: 0.35rem; + border-radius: 0.5rem; font-size: 13px; padding: 4px 8px; transition: 0.2s; @@ -11,8 +12,8 @@ -webkit-user-select: none; -ms-user-select: none; user-select: none; - height: 100%; margin-bottom: 10px; + padding: 4px 8px; &.shadow { box-shadow: 0 0 12px rgba($bg, 0.4); 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 8a992fd650..4323584c40 100644 --- a/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/AudioCard/AudioCard.tsx @@ -46,7 +46,7 @@ export default function AudioCard({ data, type }: AudioCardProps) { <>
-
+
@@ -71,7 +71,7 @@ export default function AudioCard({ data, type }: AudioCardProps) { <>
-
+
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 9c1b14d01e..4bda2d687c 100644 --- a/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/ImageCard/ImageCard.tsx @@ -46,7 +46,7 @@ export default function ImageCard({ data, type }: ImageCardProps) {
-
+
@@ -78,7 +78,7 @@ export default function ImageCard({ data, type }: ImageCardProps) {
-
+
diff --git a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx index e478fe27c2..b48ab49d0f 100644 --- a/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx +++ b/packages/fakeyou.com/src/components/common/Card/VideoCard/VideoCard.tsx @@ -42,7 +42,7 @@ export default function VideoCard({ data, type }: VideoCardProps) {
-
+
@@ -77,7 +77,7 @@ export default function VideoCard({ data, type }: VideoCardProps) {
-
+
diff --git a/packages/fakeyou.com/src/components/common/FavoriteButton/FavoriteButton.scss b/packages/fakeyou.com/src/components/common/FavoriteButton/FavoriteButton.scss index 3dcd92c1d4..4994731213 100644 --- a/packages/fakeyou.com/src/components/common/FavoriteButton/FavoriteButton.scss +++ b/packages/fakeyou.com/src/components/common/FavoriteButton/FavoriteButton.scss @@ -3,6 +3,7 @@ .favorite-button { display: flex; align-items: center; + justify-content: center; background-color: rgba(lighten($secondary, 5%), 0.9); color: inherit; border: none; @@ -13,6 +14,7 @@ font-size: 16px; transition: 0.2s; padding: 3px 8px; + min-width: 56px; border-radius: 0.5rem; &.shadow { @@ -46,10 +48,14 @@ ); } } + + &.large { + padding: 6px 10px; + } } .favorite-button .icon-default { - color: $white; + color: map-get($badge-colors, "yellow"); opacity: 0.7; transition: 0.2s; } @@ -64,9 +70,10 @@ } .favorite-number { + color: $white; font-size: 14px; font-weight: 400 !important; - opacity: 0.8; + opacity: 0.9; transition: 0.2s; } diff --git a/packages/fakeyou.com/src/components/common/FavoriteButton/FavoriteButton.tsx b/packages/fakeyou.com/src/components/common/FavoriteButton/FavoriteButton.tsx index 53ff39e4d4..1a16470ada 100644 --- a/packages/fakeyou.com/src/components/common/FavoriteButton/FavoriteButton.tsx +++ b/packages/fakeyou.com/src/components/common/FavoriteButton/FavoriteButton.tsx @@ -5,12 +5,14 @@ import { faBookmark as faBookmarkOutline } from "@fortawesome/pro-regular-svg-ic import Tippy from "@tippyjs/react"; import "tippy.js/dist/tippy.css"; import "./FavoriteButton.scss"; +import useShortenNumber from "hooks/useShortenNumber"; interface FavoriteButtonProps { initialToggled?: boolean; onToggle: (toggled: boolean) => Promise; - favoriteCount?: number; + favoriteCount: number; overlay?: boolean; + large?: boolean; } export default function FavoriteButton({ @@ -18,6 +20,7 @@ export default function FavoriteButton({ onToggle, favoriteCount, overlay, + large, }: FavoriteButtonProps) { const [isToggled, setIsToggled] = useState(initialToggled); const [isLoading, setIsLoading] = useState(false); @@ -37,7 +40,8 @@ export default function FavoriteButton({ const buttonClass = isToggled ? "favorite-button toggled" : "favorite-button"; const buttonShadow = overlay ? "shadow" : ""; const iconClass = isToggled ? "icon-toggled" : "icon-default"; - const toolTip = isToggled ? "Unfavorite" : "Favorite"; + const toolTip = isToggled ? "Unbookmark" : "Bookmark"; + let favoriteCountShort = useShortenNumber(favoriteCount); return (
@@ -52,13 +56,15 @@ export default function FavoriteButton({
diff --git a/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.scss b/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.scss index d5649adddd..947bd338c9 100644 --- a/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.scss +++ b/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.scss @@ -3,6 +3,7 @@ .like-button { display: flex; align-items: center; + justify-content: center; background-color: rgba(lighten($secondary, 5%), 0.9); color: inherit; border: none; @@ -43,10 +44,14 @@ background-color: darken(rgba(#593a48, 0.9), 2%); } } + + &.large { + padding: 6px 10px; + } } .like-button .icon-default { - color: $white; + color: $primary; opacity: 0.7; transition: 0.2s; } @@ -61,9 +66,10 @@ } .like-number { + color: $white; font-size: 14px; font-weight: 400 !important; - opacity: 0.8; + opacity: 0.9; transition: 0.2s; } diff --git a/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx b/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx index 10ffb1cc0f..ba1bd25761 100644 --- a/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx +++ b/packages/fakeyou.com/src/components/common/LikeButton/LikeButton.tsx @@ -5,12 +5,14 @@ import { faHeart as faHeartOutline } from "@fortawesome/pro-regular-svg-icons"; import Tippy from "@tippyjs/react"; import "tippy.js/dist/tippy.css"; import "./LikeButton.scss"; +import useShortenNumber from "hooks/useShortenNumber"; interface LikeButtonProps { initialToggled?: boolean; onToggle: (toggled: boolean) => Promise; - likeCount?: number; + likeCount: number; overlay?: boolean; + large?: boolean; } export default function LikeButton({ @@ -18,6 +20,7 @@ export default function LikeButton({ onToggle, likeCount, overlay, + large, }: LikeButtonProps) { const [isToggled, setIsToggled] = useState(initialToggled); const [isLoading, setIsLoading] = useState(false); @@ -38,6 +41,7 @@ export default function LikeButton({ const buttonShadow = overlay ? "shadow" : ""; const iconClass = isToggled ? "icon-toggled" : "icon-default"; const toolTip = isToggled ? "Unlike" : "Like"; + let likeCountShort = useShortenNumber(likeCount); return (
@@ -53,13 +57,13 @@ export default function LikeButton({
diff --git a/packages/fakeyou.com/src/components/common/RatingStars/RatingStars.scss b/packages/fakeyou.com/src/components/common/RatingStars/RatingStars.scss new file mode 100644 index 0000000000..b150c0c661 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/RatingStars/RatingStars.scss @@ -0,0 +1,4 @@ +.rating-stars { + font-size: 16px; + color: #e88b00; +} diff --git a/packages/fakeyou.com/src/components/common/RatingStars/RatingStars.tsx b/packages/fakeyou.com/src/components/common/RatingStars/RatingStars.tsx new file mode 100644 index 0000000000..c80fac2050 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/RatingStars/RatingStars.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faStar, faStarHalfAlt } from "@fortawesome/pro-solid-svg-icons"; +import { faStar as faStarOutline } from "@fortawesome/pro-regular-svg-icons"; +import "./RatingStars.scss"; + +type StarRatingProps = { + rating: number; +}; + +const RatingStars: React.FC = ({ rating }) => { + const roundToNearestHalf = (num: number) => Math.round(num * 2) / 2; + + const roundedRating = roundToNearestHalf(rating); + const fullStars = Math.floor(roundedRating); + const hasHalfStar = roundedRating % 1 !== 0; + + const stars = []; + + for (let i = 0; i < fullStars; i++) { + stars.push(); + } + + if (hasHalfStar) { + stars.push(); + } + + while (stars.length < 5) { + stars.push( + + ); + } + + return ( +
+
{stars}
+

{rating}

+
+ ); +}; + +export default RatingStars; diff --git a/packages/fakeyou.com/src/components/common/RatingStars/index.ts b/packages/fakeyou.com/src/components/common/RatingStars/index.ts new file mode 100644 index 0000000000..e736c38cd3 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/RatingStars/index.ts @@ -0,0 +1 @@ +export { default } from "./RatingStars"; diff --git a/packages/fakeyou.com/src/components/common/SplitPanel/SplitPanel.tsx b/packages/fakeyou.com/src/components/common/SplitPanel/SplitPanel.tsx index ae8ffb21f4..0a8cbf8e9f 100644 --- a/packages/fakeyou.com/src/components/common/SplitPanel/SplitPanel.tsx +++ b/packages/fakeyou.com/src/components/common/SplitPanel/SplitPanel.tsx @@ -67,7 +67,6 @@ const SplitPanel: React.FC & { return (
{header} - {divider &&
} {body} {divider &&
} {footer} diff --git a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx index 2f9d25689b..5813a6520b 100644 --- a/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx +++ b/packages/fakeyou.com/src/components/layout/PageHeader/PageHeader.tsx @@ -94,10 +94,10 @@ export default function PageHeader({ if (!panel) { return ( -
+
{(back || showBackButton) && ( -
+
+ + + + @@ -628,7 +642,8 @@ class PageContainer extends React.Component< ; + ttsInferenceJobs: Array; + enqueueInferenceJob: ( + jobToken: string, + frontendInferenceJobType: FrontendInferenceJobType + ) => void; + inferenceJobsByCategory: Map>; +} + +export default function WeightsPage({ + sessionWrapper, + sessionSubscriptionsWrapper, + inferenceJobs, + ttsInferenceJobs, + enqueueInferenceJob, + inferenceJobsByCategory, +}: WeightProps) { + const { token } = useParams<{ token: string }>(); + const [weight, setWeight] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(false); + + const timeUpdated = useTimeAgo(weight?.updated_at.toISOString() || ""); + + const getWeight = useCallback(async (weightToken: string) => { + // Dummy data + const dummyData = { + weight_token: "1", + title: "Harry Potter (Daniel Radcliffe)", + created_at: new Date(), + updated_at: new Date(), + weights_type: WeightsType.TT2, + weights_category: WeightsCategory.TTS, + maybe_creator_user: { + user_token: "test", + username: "test", + display_name: "Test", + gravatar_hash: "test", + default_avatar: { + image_index: 1, + color_index: 2, + }, + }, + creator_set_visibility: "Public", + }; + + // Simulate an API call delay + await new Promise(resolve => setTimeout(resolve, 1000)); + + if (dummyData) { + setWeight(dummyData); + setIsLoading(false); + } else { + setError(true); + setIsLoading(false); + } + }, []); + + useEffect(() => { + getWeight(token); + }, [token, getWeight]); + + function renderWeightComponent(weight: Weight) { + switch (weight.weights_category) { + case WeightsCategory.TTS: + return ( + +
+
+

Use Voice

+