From 31aeb299d282ee3b702368681fbb1fa4882d729a Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 9 Feb 2024 00:34:48 +0700 Subject: [PATCH 1/5] Footer 2023 -> 2024 --- packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx b/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx index 4171ac32e7..d36f06f6a1 100644 --- a/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx +++ b/packages/fakeyou.com/src/v2/view/nav/FooterNav.tsx @@ -206,7 +206,7 @@ function FooterNav(props: Props) {
- © {domain.title} 2023 + © {domain.title} 2024
{moderationLink} From 1bd235c7370b5fd67d66365bc24f664c66b9c2e9 Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 9 Feb 2024 00:58:04 +0700 Subject: [PATCH 2/5] landingpage use domain --- .../src/v2/view/pages/landing/Dashboard.tsx | 4 +- .../src/v2/view/pages/landing/LandingPage.tsx | 39 +++++++++++++------ 2 files changed, 29 insertions(+), 14 deletions(-) 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 d9947fb8e0..198524cafb 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/Dashboard.tsx @@ -11,11 +11,11 @@ import { useLocalize } from "hooks"; import React from "react"; import { Link } from "react-router-dom"; -interface FakeYouDashboardProps { +interface DashboardProps { sessionWrapper: SessionWrapper; } -export default function FakeYouDashboard(props: FakeYouDashboardProps) { +export default function Dashboard(props: DashboardProps) { const { t } = useLocalize("LandingPage"); const isLoggedIn = props.sessionWrapper.isLoggedIn(); diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx index c5782204ae..1ef2553452 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx @@ -6,9 +6,10 @@ import {} from "@fortawesome/pro-solid-svg-icons"; import { PosthogClient } from "@storyteller/components/src/analytics/PosthogClient"; import { Container } from "components/common"; import FakeYouLandingHeader from "./fakeyou/FakeYouLandingHeader"; -import FakeYouDashboard from "./Dashboard"; +import Dashboard from "./Dashboard"; import FakeYouLandingBody from "./fakeyou/FakeYouLandingBody"; -// import StorytellerLanding from "./StorytellerLanding"; +import { useDomainConfig } from "context/DomainConfigContext"; +import StorytellerLanding from "./storyteller/StorytellerLanding"; interface Props { sessionWrapper: SessionWrapper; @@ -18,23 +19,37 @@ interface Props { function LandingPage(props: Props) { usePrefixedDocumentTitle("FakeYou Celebrity Voice Generator"); PosthogClient.recordPageview(); + const domain = useDomainConfig(); const isLoggedIn = props.sessionWrapper.isLoggedIn(); return ( <> - {/* HEADER IF NOT LOGGED IN */} - {!isLoggedIn && ( - + {domain.title !== "FakeYou" ? ( + <> + {/* FAKEYOU.COM */} + {!isLoggedIn && ( + + )} + + + + {!isLoggedIn && } + + ) : ( + <> + {/* STORYTELLER,AI */} + {!isLoggedIn ? ( + + ) : ( + + )} + )} - - - - {!isLoggedIn && } ); From ad15babc88aac0264295d2c7103f3e18fbeba1db Mon Sep 17 00:00:00 2001 From: BFlat Date: Fri, 9 Feb 2024 00:59:51 +0700 Subject: [PATCH 3/5] fix --- packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx index 1ef2553452..21b3af732d 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/LandingPage.tsx @@ -26,7 +26,7 @@ function LandingPage(props: Props) { return ( <> - {domain.title !== "FakeYou" ? ( + {domain.title === "FakeYou" ? ( <> {/* FAKEYOU.COM */} {!isLoggedIn && ( From 96a7252525d96716a6e38c2aca3cb1d484428a9c Mon Sep 17 00:00:00 2001 From: Victor Date: Thu, 8 Feb 2024 11:10:54 -0800 Subject: [PATCH 4/5] added InferenceJobsListPage and InferenceJobsListModal --- packages/fakeyou.com/src/App.tsx | 6 ++- .../InferenceJobsList/InferenceJobsList.tsx | 14 ++++-- .../layout/InferenceJobsList/JobItem.tsx | 5 +- .../src/components/layout/SideNav/SideNav.tsx | 16 ++++++- .../src/components/layout/TopNav/TopNav.tsx | 7 +++ .../InferenceJobsModal/InferenceJobsModal.tsx | 36 ++++++++++++++ .../modals/InferenceJobsModal/index.tsx | 1 + .../modals/MediaBrowser/MediaBrowser.tsx | 48 +++++++++---------- .../src/components/modals/ModalHeader.tsx | 21 ++++++++ .../src/components/modals/index.tsx | 3 +- .../providers/InferenceJobs/InferenceJobs.tsx | 8 ++-- .../src/context/InferenceJobsContext.tsx | 2 +- .../useInferenceJobs/useInferenceJobs.tsx | 10 ++-- packages/fakeyou.com/src/scss/nav.scss | 2 + .../fakeyou.com/src/v2/view/PageContainer.tsx | 5 ++ .../view/pages/dev_upload/DevMediaInput.tsx | 7 +++ .../inference_jobs_page/InferenceJobsPage.tsx | 10 ++++ .../view/pages/inference_jobs_page/index.tsx | 1 + 18 files changed, 157 insertions(+), 45 deletions(-) create mode 100644 packages/fakeyou.com/src/components/modals/InferenceJobsModal/InferenceJobsModal.tsx create mode 100644 packages/fakeyou.com/src/components/modals/InferenceJobsModal/index.tsx create mode 100644 packages/fakeyou.com/src/components/modals/ModalHeader.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/inference_jobs_page/InferenceJobsPage.tsx create mode 100644 packages/fakeyou.com/src/v2/view/pages/inference_jobs_page/index.tsx diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index 1eaa81b114..7307cefdbe 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -837,11 +837,11 @@ class App extends React.Component { */}
- { sessionFetched: this.state.sessionFetched, }} > + + { /> + -
diff --git a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx index a6fd9aafd1..621664ef27 100644 --- a/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx +++ b/packages/fakeyou.com/src/components/layout/InferenceJobsList/InferenceJobsList.tsx @@ -6,22 +6,29 @@ import { // import { useTransition } from "@react-spring/web"; import JobItem from "./JobItem"; import { useInferenceJobs, useLocalize } from "hooks"; +import { JobListTypes } from "hooks/useInferenceJobs/useInferenceJobs"; import "./InferenceJobsList.scss"; import { Panel } from "components/common"; interface JobsListProps { failures: (fail: string) => string; - jobType: FrontendInferenceJobType; + jobType?: FrontendInferenceJobType; + value?: JobListTypes; onSelect?: (e: any) => any; } export default function InferenceJobsList({ failures, jobType, + value, onSelect, }: JobsListProps) { - const { inferenceJobs = [], jobStatusDescription } = - useInferenceJobs(jobType); + // undefined specified here to allow 0. + // jobType + 1 because the difference between FrontendInferenceJobType and JobListTypes is an "all" option + + const jobValue = value !== undefined ? value : jobType !== undefined ? (jobType || 0) + 1 : 0; + + const { inferenceJobs = [], jobStatusDescription } = useInferenceJobs(jobValue); const { t } = useLocalize("InferenceJobs"); if (inferenceJobs.length) { @@ -34,7 +41,6 @@ export default function InferenceJobsList({ {...{ failures, jobStatusDescription, - jobType, key, onSelect, t, diff --git a/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx b/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx index 0eaa6d4c6e..55442b9927 100644 --- a/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx +++ b/packages/fakeyou.com/src/components/layout/InferenceJobsList/JobItem.tsx @@ -8,7 +8,6 @@ import { JobState } from "@storyteller/components/src/jobs/JobStates"; interface JobListItem extends InferenceJob { failures: (fail: string) => string, - jobType: FrontendInferenceJobType, jobStatusDescription?: any, onSelect?: any, refSet?: any, @@ -20,13 +19,13 @@ const OuterItem = ({ className, children, success, jobToken, maybeResultToken, o onSelect(), ref: refSet }}>{ children } : { children }; -export default function JobItem({ failures, maybeFailureCategory, maybeResultToken, onSelect, jobToken, jobState, jobStatusDescription, jobType: inputType, refSet, t, ...rest }: JobListItem) { +export default function JobItem({ failures, frontendJobType, maybeFailureCategory, maybeResultToken, onSelect, jobToken, jobState, jobStatusDescription, refSet, t, ...rest }: JobListItem) { const [hasBounced,hasBouncedSet] = useState(false); // const [jobState,jobStateSet] = useState(0); // for animation debugging // useInterval({ interval: 3000, onTick: ({ index }: { index: number }) => { jobStateSet(index); if (!index) hasBouncedSet(false) } }); - const jobType = FrontendInferenceJobType[inputType]; + const jobType = FrontendInferenceJobType[frontendJobType]; const jobStatus = jobStatusDescription(jobState); const jobStatusClass = jobStatus.toLowerCase().replace("_","-"); diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx index 21c182e55c..b560920460 100644 --- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx +++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx @@ -19,7 +19,8 @@ import { faUser, faWandMagicSparkles, faWaveformLines, - faTransporter + faTransporter, + faClipboardList } from "@fortawesome/pro-solid-svg-icons"; import { @@ -394,6 +395,19 @@ export default function SideNav({ Explore +
  • + + + My Jobs + +
  • {t("speechTitle")}
  • diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index 0dc99f00a8..a19fd8329e 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -4,6 +4,7 @@ import { faSignOutAlt, faUser, faXmark, + faClipboardList } from "@fortawesome/pro-solid-svg-icons"; import { Button } from "components/common"; import SearchBar from "components/common/SearchBar"; @@ -12,6 +13,8 @@ import { Link, useHistory } from "react-router-dom"; import { WebUrl } from "common/WebUrl"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { Logout } from "@storyteller/components/src/api/session/Logout"; +import { useModal } from "hooks"; +import { InferenceJobsModal } from "components/modals"; interface TopNavProps { sessionWrapper: SessionWrapper; @@ -32,6 +35,9 @@ export default function TopNav({ const wrapper = document.getElementById("wrapper"); const [menuButtonIcon, setMenuButtonIcon] = useState(faBars); + const { open } = useModal(); + const openModal = () => open({ component: InferenceJobsModal }); + const handleMenuButtonClick = () => { if (window.innerWidth < 1200) { if (wrapper) { @@ -209,6 +215,7 @@ export default function TopNav({
    +
    diff --git a/packages/fakeyou.com/src/components/modals/InferenceJobsModal/InferenceJobsModal.tsx b/packages/fakeyou.com/src/components/modals/InferenceJobsModal/InferenceJobsModal.tsx new file mode 100644 index 0000000000..331ef67a3b --- /dev/null +++ b/packages/fakeyou.com/src/components/modals/InferenceJobsModal/InferenceJobsModal.tsx @@ -0,0 +1,36 @@ +import React, { useState } from "react"; +import InferenceJobsList from "components/layout/InferenceJobsList"; +import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; +import { TempSelect } from "components/common"; +import ModalHeader from "../ModalHeader"; + +interface Props { + handleClose?: any, +} + +export default function InferenceJobsModal({ handleClose }: Props) { + const [jobType,jobTypeSet] = useState("All"); + const typeObj = ["All", ...Object.values(FrontendInferenceJobType)]; + + const options = typeObj.filter(val => isNaN(Number(val))) + .map((value) => { + if (typeof value === "string") return { value, label: value } + return { label: "", value: "" }; + }); + + const failures = (fail = "") => { + switch (fail) { + default: + return "Uknown failure"; + } + }; + + return <> + + jobTypeSet(target.value), options, value: jobType }} /> + + ; +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/modals/InferenceJobsModal/index.tsx b/packages/fakeyou.com/src/components/modals/InferenceJobsModal/index.tsx new file mode 100644 index 0000000000..5d0aca9d89 --- /dev/null +++ b/packages/fakeyou.com/src/components/modals/InferenceJobsModal/index.tsx @@ -0,0 +1 @@ +export { default } from "./InferenceJobsModal"; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx index 37400276ae..73ffc4de7a 100644 --- a/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx +++ b/packages/fakeyou.com/src/components/modals/MediaBrowser/MediaBrowser.tsx @@ -10,9 +10,9 @@ import { GetWeightsByUser } from "@storyteller/components/src/api/weights/GetWei 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 { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome"; -import { faArrowDownWideShort, faFilter, faXmark } 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 { @@ -66,37 +66,33 @@ export default function MediaBrowser({ entityType, filterType: inputFilter, medi // { value: "mostliked", label: "Most Liked" }, ]; + const title = ["",`${ owner ? owner + "'s " : "" }Media`,"Weights"][entityType]; + const onClick = (data: any) => { onSelect(data); handleClose(); }; return <> -
    -
    -

    { ["",`${ owner ? owner + "'s " : "" }Media`,"Weights"][entityType] }

    - handleClose() }}/> -
    -
    - + + { (!inputFilter || inputFilter === "all") && - { (!inputFilter || inputFilter === "all") && } - -
    -
    + value: filterType, + }}/> } + +     { entities.isLoading ? (
    diff --git a/packages/fakeyou.com/src/components/modals/ModalHeader.tsx b/packages/fakeyou.com/src/components/modals/ModalHeader.tsx new file mode 100644 index 0000000000..4cfea9b606 --- /dev/null +++ b/packages/fakeyou.com/src/components/modals/ModalHeader.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import { FontAwesomeIcon as Icon } from "@fortawesome/react-fontawesome"; +import { faXmark } from "@fortawesome/pro-solid-svg-icons"; + +interface Props { + children?: any, + handleClose?: any, + title?: string +} + +export default function ModalHeader({ children, handleClose, title }: Props) { + return
    +
    + { title &&

    { title }

    } + { handleClose && handleClose() }}/> } +
    + { children &&
    + { children } +
    } +
    ; +}; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/modals/index.tsx b/packages/fakeyou.com/src/components/modals/index.tsx index edecc13e79..dc82713592 100644 --- a/packages/fakeyou.com/src/components/modals/index.tsx +++ b/packages/fakeyou.com/src/components/modals/index.tsx @@ -1,3 +1,4 @@ +import InferenceJobsModal from "./InferenceJobsModal"; import MediaBrowser from "./MediaBrowser"; -export { MediaBrowser }; \ No newline at end of file +export { InferenceJobsModal, MediaBrowser }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx b/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx index 1bc486811d..16fd269881 100644 --- a/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx +++ b/packages/fakeyou.com/src/components/providers/InferenceJobs/InferenceJobs.tsx @@ -3,12 +3,12 @@ import { InferenceJobsContext } from 'context'; interface Props { children?: any; - enqueue?: any; - byCategory?: any; + // enqueue?: any; + // byCategory?: any; } -export default function InferenceJobs({ byCategory, children, enqueue }: Props) { - return +export default function InferenceJobs({ children, ...value }: Props) { + return { children } }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/context/InferenceJobsContext.tsx b/packages/fakeyou.com/src/context/InferenceJobsContext.tsx index 36d4de88de..2b28ad5b04 100644 --- a/packages/fakeyou.com/src/context/InferenceJobsContext.tsx +++ b/packages/fakeyou.com/src/context/InferenceJobsContext.tsx @@ -1,5 +1,5 @@ import { createContext } from 'react'; -interface InferenceJobsContext { byCategory?: any, enqueue?: any } +interface InferenceJobsContext { inferenceJobs?: any, byCategory?: any, enqueue?: any } export default createContext({ }); \ No newline at end of file diff --git a/packages/fakeyou.com/src/hooks/useInferenceJobs/useInferenceJobs.tsx b/packages/fakeyou.com/src/hooks/useInferenceJobs/useInferenceJobs.tsx index 3ceb1801c2..445851cb0d 100644 --- a/packages/fakeyou.com/src/hooks/useInferenceJobs/useInferenceJobs.tsx +++ b/packages/fakeyou.com/src/hooks/useInferenceJobs/useInferenceJobs.tsx @@ -3,12 +3,16 @@ import { JobState } from "@storyteller/components/src/jobs/JobStates"; import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; import { InferenceJobsContext } from 'context'; -export default function useInferenceJobs(jobType: FrontendInferenceJobType) { - const { byCategory, enqueue } = useContext(InferenceJobsContext); +export enum JobListAll { All } + +export type JobListTypes = FrontendInferenceJobType | JobListAll; + +export default function useInferenceJobs(jobType: JobListTypes) { + const { byCategory, enqueue, inferenceJobs } = useContext(InferenceJobsContext); return { enqueue, - inferenceJobs: (byCategory?.get(jobType) || []), + inferenceJobs: jobType === JobListAll.All ? inferenceJobs : (byCategory?.get(jobType - 1) || []), jobStatusDescription: (jobState: JobState) => Object.keys(JobState).filter(key => isNaN(Number(key)))[jobState] }; }; \ No newline at end of file diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss index 33663dd2bd..b63b9d5360 100644 --- a/packages/fakeyou.com/src/scss/nav.scss +++ b/packages/fakeyou.com/src/scss/nav.scss @@ -193,6 +193,8 @@ $topbar-height: 66px; .topbar-nav-center { grid-column: 2; } + + .button { white-space: nowrap; } } .topbar-mobile-search-bar-container { diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index e940538c04..14547d6e4d 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -97,6 +97,7 @@ import VoiceDesignerUseVoicePage from "./pages/voice_designer/VoiceDesignerUseVo import { PasswordResetEmailPage } from "./pages/password_reset/PasswordResetEmailPage"; import { PasswordResetVerificationPage } from "./pages/password_reset/PasswordResetVerificationPage"; import EngineCompositor from "./pages/EngineCompositor"; +import InferenceJobsPage from "./pages/inference_jobs_page"; import { NewProfilePage } from "./pages/profile/profile_view/NewProfilePage"; import { ModerationJobControlPage } from "./pages/moderation/job_control/ModerationJobControlPage"; import WeightPage from "./pages/weight/WeightPage"; @@ -1315,6 +1316,10 @@ class PageContainer extends React.Component< /> + + + + mediaTokenSet(target.value); + const { open } = useModal(); + const options = [{ label: "Media", value: EntityType.media },{ label: "Weights", value: EntityType.weights }]; const changeFilter = ({ target }: { target: any }) => [mediaTypeSet,mediaTypeSet,weightTypeSet][entityType](target.value); + const openModal = () => open({ component: InferenceJobsModal }); + return
    @@ -34,6 +40,7 @@ export default function DevMediaInput({ value }: Props) { owner, ...([{},{ mediaType },{ weightType }][entityType]) }}/> +
    - +