From cb3a1610261254601c38c580954c2561331b1f01 Mon Sep 17 00:00:00 2001 From: Victor Date: Tue, 16 Jul 2024 19:05:25 -0700 Subject: [PATCH 1/3] fixed top menu whitespace wrapping --- .../fakeyou.com/src/components/layout/TopNav/TopNav.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx index 9c10e9e16e..6bbb0fcea3 100644 --- a/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx +++ b/packages/fakeyou.com/src/components/layout/TopNav/TopNav.tsx @@ -449,7 +449,7 @@ export default function TopNav({ {domain.titlePart === "FakeYou" && ( -
+
From 9b02e730aad54f2e7f645fc651fb240abe8044f8 Mon Sep 17 00:00:00 2001 From: Victor Date: Tue, 16 Jul 2024 19:16:32 -0700 Subject: [PATCH 2/3] changed /video-styletransfer to /style-video in all instances --- .../src/components/layout/SideNav/SideNav.tsx | 2 +- .../fakeyou.com/src/v2/view/PageContainer.tsx | 9 --------- .../components/VstSectionV1/VstSectionV1.tsx | 12 ++++++------ .../components/VstSectionV2/VstSectionV2.tsx | 18 +++++++++--------- 4 files changed, 16 insertions(+), 25 deletions(-) diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx index 93d54ebd3a..7a5eee65bc 100644 --- a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx +++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx @@ -448,7 +448,7 @@ export default function SideNav({
  • diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 87a1ec8488..4e339ca0c3 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -9,7 +9,6 @@ import { ModerationIpBanListFc } from "./pages/moderation/moderation_ip_ban_list import { ModerationViewIpBanFc } from "./pages/moderation/moderation_view_ip_ban/ModerationViewIpBanFc"; import FaceAnimator from "./pages/face_animator"; import VideoMocap from "./pages/video_mocap"; -import VideoStyleTransfer from "./pages/video_styletransfer"; import { ProfileEditFc } from "./pages/profile/profile_edit/ProfileEditFc"; import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; @@ -816,14 +815,6 @@ class PageContainer extends React.Component< /> - - - - @@ -88,7 +88,7 @@ export default function VstSectionV1(props: VstSectionV1Props) { {/*
    - +
    */} diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx index fbc48b703e..44df372329 100644 --- a/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/landing/components/VstSectionV2/VstSectionV2.tsx @@ -61,22 +61,22 @@ export default function VstSectionV2(props: VstSectionV2Props) { { src: "/videos/landing/vst/1-2d_flat_anime.mp4", label: "2D Flat Anime", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, { src: "/videos/landing/vst/1-3d_cartoon.mp4", label: "3D Cartoon", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, { src: "/videos/landing/vst/1-ink_bw.mp4", label: "Ink B&W", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, { src: "/videos/landing/vst/1-origami.mp4", label: "Origami", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, ], }, @@ -87,22 +87,22 @@ export default function VstSectionV2(props: VstSectionV2Props) { { src: "/videos/landing/vst/2-2d_flat_anime.mp4", label: "2D Flat Anime", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, { src: "/videos/landing/vst/2-pop_art.mp4", label: "Pop Art", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, { src: "/videos/landing/vst/2-ink_splash.mp4", label: "Ink Splash", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, { src: "/videos/landing/vst/2-origami.mp4", label: "Origami", - ctaLink: "/video-styletransfer", + ctaLink: "/style-video", }, ], }, @@ -240,7 +240,7 @@ export default function VstSectionV2(props: VstSectionV2Props) { {/*
    - +
    */} From 65ddac649ed379ae709d9d1965746cb445976a21 Mon Sep 17 00:00:00 2001 From: Victor Date: Tue, 16 Jul 2024 19:24:24 -0700 Subject: [PATCH 3/3] deleted various unused files --- .../storyteller_studio_intro/StudioIntro.scss | 37 -- .../StudioIntroPage.tsx | 142 -------- .../StudioIntroResultPage.tsx | 108 ------ .../StudioVST/StudioVSTPage.tsx | 190 ---------- .../StudioVST/cnPresets.tsx | 98 ------ .../StudioVST/defaultValues.tsx | 36 -- .../StudioVST/helpers.tsx | 91 ----- .../StudioVST/index.tsx | 1 - .../StudioVST/sectionAdvanceOptions.tsx | 273 --------------- .../pages/studio_tutorial/StudioTutorial.scss | 29 -- .../pages/studio_tutorial/StudioTutorial.tsx | 326 ------------------ .../pages/studio_tutorial/StyleEditor.tsx | 87 ----- .../VideoStyleTransfer.tsx | 63 ---- .../pages/video_styletransfer/commons.tsx | 43 --- .../components/pageJoblist.tsx | 46 --- .../components/pageVSTApp/compAdminPanel.tsx | 110 ------ .../pageVSTApp/compAdvanceOptions.tsx | 277 --------------- .../components/pageVSTApp/compStyleModal.tsx | 97 ------ .../components/pageVSTApp/dataCnPresets.tsx | 98 ------ .../pageVSTApp/dataDefaultValues.tsx | 54 --- .../components/pageVSTApp/dataStyleModels.tsx | 95 ----- .../components/pageVSTApp/helpers.tsx | 113 ------ .../components/pageVSTApp/index.tsx | 1 - .../components/pageVSTApp/pageVSTApp.tsx | 160 --------- .../components/pageVideoProvision.tsx | 82 ----- .../components/tabContentLibrary.tsx | 59 ---- .../components/tabContentUpload.tsx | 98 ------ .../view/pages/video_styletransfer/index.tsx | 2 - .../pages/video_styletransfer/reducer.tsx | 86 ----- .../view/pages/video_styletransfer/routes.tsx | 50 --- 30 files changed, 2952 deletions(-) delete mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntro.scss delete mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroPage.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroResultPage.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/StudioVSTPage.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/cnPresets.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/defaultValues.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/helpers.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/index.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/sectionAdvanceOptions.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/studio_tutorial/StudioTutorial.scss delete mode 100644 packages/fakeyou.com/src/v2/view/pages/studio_tutorial/StudioTutorial.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/studio_tutorial/StyleEditor.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/VideoStyleTransfer.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/commons.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageJoblist.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compAdminPanel.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compAdvanceOptions.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/compStyleModal.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/dataCnPresets.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/dataDefaultValues.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/dataStyleModels.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/helpers.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/index.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVSTApp/pageVSTApp.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/pageVideoProvision.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/tabContentLibrary.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/components/tabContentUpload.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/index.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/reducer.tsx delete mode 100644 packages/fakeyou.com/src/v2/view/pages/video_styletransfer/routes.tsx diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntro.scss b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntro.scss deleted file mode 100644 index bd54e24c76..0000000000 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntro.scss +++ /dev/null @@ -1,37 +0,0 @@ -.studio-intro-page { - display: flex; - flex-direction: column; - height: calc(100vh - 66px); - - .studio-intro-exporter { - background: rgba(#000, .5); - backdrop-filter: blur(10px); - border-radius: .5rem; - right: 1rem; - bottom: 1rem; - padding: .5rem; - position: absolute; - - - .exporter-title { - width: 100%; - - span { - opacity: .66; - font-size: .875rem; - height: 1em; - line-height: 1em; - display: block; - margin-bottom: .25rem; - } - } - .exporter-controls { - display: flex; - gap: .5rem; - } - } -} - -.result-video-wrapper { - max-width: 1100px; -} diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroPage.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroPage.tsx deleted file mode 100644 index 5e1744de5f..0000000000 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroPage.tsx +++ /dev/null @@ -1,142 +0,0 @@ -import React, { useCallback, useState } from "react"; -import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; -import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; -import { StudioNotAvailable } from "v2/view/_common/StudioNotAvailable"; -import { Button } from "components/common"; -import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; -import { useParams, useHistory } from "react-router-dom"; -import { useInferenceJobs } from "hooks"; -import { EnqueueEngineCompositing } from "@storyteller/components/src/api/engine_compositor/EnqueueEngineCompositing"; -import { FrontendInferenceJobType } from "@storyteller/components/src/jobs/InferenceJob"; -import { v4 as uuidv4 } from "uuid"; -import "./StudioIntro.scss"; -import Scene3D from "components/common/Scene3D/Scene3D"; -import { EngineMode } from "components/common/Scene3D/EngineMode"; -import { SplitFirstPeriod } from "utils/SplitFirstPeriod"; - -interface Props { - sessionWrapper: SessionWrapper; - sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; -} - -const PAGE_TITLE = "Storyteller Studio"; - -function StudioIntroPage(props: Props) { - // NB: The URL parameter might be a raw media token (for .scn.ron files), or it might - // have an appended suffix to assist the engine in loading the correct scene format. - // For example, this is a valid "mediaTokenSpec": `m_zk0qkm1tgsdbh6e3c9kedy34vaympd.glb` - const { mediaToken: mediaTokenSpec } = useParams<{ mediaToken: string }>(); - - const { base: mediaToken, maybeRemainder: maybeExtension } = - SplitFirstPeriod(mediaTokenSpec); - - const history = useHistory(); - - const inferenceJobs = useInferenceJobs(); - - // If the user saves the scene in the engine, we'll need to use the new token - // for subsequent steps of this flow. - const [savedMediaToken, setSavedMediaToken] = useState(mediaToken); - - // We don't show the "next step" buttons until the engine loads. - // Unfortunately the engine sometimes fires this twice, with one instance - // being called before the scene loads. Until this is fixed, we'll count the - // number of event fires and assume we must have two calls. - const [sceneIsLoadedCount, sceneIsLoadedCountSet] = useState(0); - - // If the scene is saved, we know the user must have interacted. - // This can serve as a second optional gate for enabling the next steps. - const [sceneIsSaved, sceneIsSavedSet] = useState(false); - - usePrefixedDocumentTitle(PAGE_TITLE); - - const onSaveCallback = useCallback( - (sceneMediaToken: string) => { - console.log(`Saved scene, new media token: ${sceneMediaToken}`); - - setSavedMediaToken(sceneMediaToken); - sceneIsSavedSet(true); // Just in case we missed the "scene loaded" event. - - // Replace the history state without causing a React re-render - window.history.replaceState( - null, - PAGE_TITLE, - `/studio-intro/${sceneMediaToken}` - ); - }, - [setSavedMediaToken, sceneIsSavedSet] - ); - - const onSceneReadyCallback = useCallback(() => { - sceneIsLoadedCountSet(sceneIsLoadedCount + 1); - }, [sceneIsLoadedCount, sceneIsLoadedCountSet]); - - if (!props.sessionWrapper.canAccessStudio()) { - return ; - } - - let assetDescriptor; - - // We should prefer to start the onboarding flow with an existing scene, but if - // one is unavailable, we should show the sample room. - if (maybeExtension !== undefined) { - assetDescriptor = { - sceneImportToken: mediaToken, - extension: maybeExtension, - }; - } else if (mediaToken) { - assetDescriptor = { - storytellerSceneMediaFileToken: mediaToken, - }; - } else { - assetDescriptor = { - objectId: "sample-room.gltf", - }; - } - - const onClick = () => { - // This opens the job modal. Needs to be disabled. - EnqueueEngineCompositing("", { - uuid_idempotency_token: uuidv4(), - media_file_token: savedMediaToken, - skybox: "meadow_4k", - }).then((res: any) => { - if (res && res.success) { - inferenceJobs.enqueue( - res.inference_job_token, - FrontendInferenceJobType.EngineComposition - ); - history.push(`/studio-intro/style/${res.inference_job_token}`); - } - }); - }; - - const sceneIsLoaded = sceneIsLoadedCount > 1 || sceneIsSaved; - - let progressButtons = <>; - - if (sceneIsLoaded) { - progressButtons = ( -
    -
    - ); - } - - return ( -
    - - - {progressButtons} -
    - ); -} - -export { StudioIntroPage }; diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroResultPage.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroResultPage.tsx deleted file mode 100644 index e17d40ca3e..0000000000 --- a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroResultPage.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { SessionWrapper } from "@storyteller/components/src/session/SessionWrapper"; -import { SessionSubscriptionsWrapper } from "@storyteller/components/src/session/SessionSubscriptionsWrapper"; -import { Button, Container, Panel } from "components/common"; -import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; -import { useHistory, useParams } from "react-router-dom"; -import "./StudioIntro.scss"; -import LoadingSpinner from "components/common/LoadingSpinner"; -import { useMedia, useInferenceJobs } from "hooks"; -import { BucketConfig } from "@storyteller/components/src/api/BucketConfig"; -import { MediaFileType } from "@storyteller/components/src/api/media_files"; -import { JobState } from "@storyteller/components/src/jobs/JobStates"; - -interface Props { - sessionWrapper: SessionWrapper; - sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; -} - -// This page just needs to poll the job and show the video when it's done. - -function StudioIntroResultPage(props: Props) { - const [rething,rethingSet] = useState(false); - const { jobToken } = useParams<{ jobToken: string }>(); - const history = useHistory(); - const { enqueue, inferenceJobs } = useInferenceJobs(); - const job = inferenceJobs.find((item: any) => item.jobToken === jobToken); - - useEffect(() => { - if (!job && !rething) { - rethingSet(true); - enqueue(jobToken); - } - },[enqueue,job,jobToken,rething]); - - - // const [mediaToken, setMediaToken] = useState( - // "m_f5kp3hm74qeq16eq7536jb73jkbvkh" - // ); // Set the media token after polling success - // const [jobExists, setJobExists] = useState(null); - - // const job = useJobStatus({ jobToken }); - - const [mediaFile, setMediaFile] = useState(); - - const mediaToken = job?.maybeResultToken|| ""; - - useMedia({ - mediaToken, - onSuccess: (res: any) => { - setMediaFile(res); - }, - }); - - const mediaLink = - mediaFile && new BucketConfig().getGcsUrl(mediaFile.public_bucket_path); - - usePrefixedDocumentTitle("Storyteller Studio"); - - if (!jobToken) { - history.push("/"); - } - - const contentSwitch = () => { - switch (job?.jobState) { - case JobState.UNKNOWN: - case JobState.PENDING: - case JobState.STARTED: return ; - case JobState.ATTEMPT_FAILED: return
    -

    {`Attempt failed, retrying (attempt ${ job.attemptCount } )`}

    -
    ; - case JobState.COMPLETE_SUCCESS: return