diff --git a/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.scss b/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.scss index 6fe22684fd..7544744324 100644 --- a/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.scss +++ b/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.scss @@ -11,3 +11,9 @@ width: 100%; border-radius: 0.5rem; } + +.fy-scene-3d-fullscreen-intro { + height: calc(100vh - 66px - 66px); + width: 100%; + border-radius: 0rem; +} diff --git a/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx b/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx index 32b6153ea5..92708195c1 100644 --- a/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx +++ b/packages/fakeyou.com/src/components/common/Scene3D/Scene3D.tsx @@ -12,6 +12,7 @@ interface Scene3DProps { urlParams?: string; objectId?: string; sceneMediaFileToken?: string; + className?: string; } export default function Scene3D({ @@ -20,8 +21,8 @@ export default function Scene3D({ objectId, sceneMediaFileToken, urlParams, + className, }: Scene3DProps) { - let engineUrl = `https://engine.fakeyou.com?mode=${mode}`; if (sceneMediaFileToken) { @@ -35,14 +36,9 @@ export default function Scene3D({
- +
); } diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index afcbc616b2..6bc57ebc39 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -123,6 +123,8 @@ import TextToImagePage from "./pages/text_to_image/TextToImagePage"; import DomainConfigProvider from "context/DomainConfigContext"; import DevUpload from "./pages/dev_upload/DevUpload"; import DevMediaInput from "./pages/dev_upload/DevMediaInput"; +import { StudioIntroPage } from "./pages/storyteller_studio_intro/StudioIntroPage"; +import StudioVSTPage from "./pages/storyteller_studio_intro/StudioVST/StudioVSTPage"; interface Props { sessionWrapper: SessionWrapper; @@ -755,6 +757,19 @@ class PageContainer extends React.Component< /> + + + + + + + + @@ -1309,15 +1324,6 @@ class PageContainer extends React.Component< /> - - - - 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 new file mode 100644 index 0000000000..22a48fca59 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntro.scss @@ -0,0 +1,5 @@ +.studio-intro-page { + display: flex; + flex-direction: column; + height: calc(100vh - 66px); +} 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 new file mode 100644 index 0000000000..ec60816227 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioIntroPage.tsx @@ -0,0 +1,71 @@ +import React 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, Scene3D } 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"; + +interface Props { + sessionWrapper: SessionWrapper; + sessionSubscriptionsWrapper: SessionSubscriptionsWrapper; +} + +function StudioIntroPage(props: Props) { + const { mediaToken } = useParams<{ mediaToken: string }>(); + const history = useHistory(); + const inferenceJobs = useInferenceJobs( + FrontendInferenceJobType.EngineComposition + ); + + usePrefixedDocumentTitle("Storyteller Studio"); + + if (!props.sessionWrapper.canAccessStudio()) { + return ; + } + + let engineParams = {}; + + if (mediaToken) { + engineParams = { + sceneMediaFileToken: mediaToken, + }; + } else { + engineParams = { + objectId: "sample-room.gltf", + }; + } + + const onClick = () => { + EnqueueEngineCompositing("", { + uuid_idempotency_token: uuidv4(), + media_file_token: mediaToken || "", + }).then((res: any) => { + if (res && res.success) { + inferenceJobs.enqueue(res.inference_job_token); + history.push(`/studio-intro/style/${res.inference_job_token}`); + } + }); + }; + + return ( +
+ +
+
+
+ ); +} + +export { StudioIntroPage }; diff --git a/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/StudioVSTPage.tsx b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/StudioVSTPage.tsx new file mode 100644 index 0000000000..e96a6e9057 --- /dev/null +++ b/packages/fakeyou.com/src/v2/view/pages/storyteller_studio_intro/StudioVST/StudioVSTPage.tsx @@ -0,0 +1,140 @@ +import React, { useRef, useState } from "react"; +import { NavLink, useParams, useHistory } from "react-router-dom"; +import { + Button, + Container, + Panel, + SelectionBubbles, + TextArea, +} from "components/common"; +import VideoQuickTrim, { + QuickTrimData, +} from "components/common/VideoQuickTrim"; +import EnqueueVideoStyleTransfer from "@storyteller/components/src/api/video_styleTransfer"; +import { initialValues } from "./defaultValues"; +import { mapRequest, VSTType } from "./helpers"; +// import SectionAdvanceOptions from "./sectionAdvanceOptions"; + +export default function PageVSTApp() { + const { jobToken } = useParams(); + const videoRef = useRef(null); + const history = useHistory(); + const [isLoading, setIsLoading] = useState(false); + const [mediaToken, setMediaToken] = useState(""); + + const [vstValues, setVstValues] = useState({ + ...initialValues, + fileToken: mediaToken, + }); + + const handleOnChange = (val: { + [key: string]: number | string | boolean | undefined; + }) => { + setVstValues(curr => ({ ...curr, ...val })); + }; + + const handleGenerate = () => { + const request = mapRequest(vstValues); + EnqueueVideoStyleTransfer(request).then(res => { + if (res.success && res.inference_job_token) { + console.log("Job enqueued successfully", res.inference_job_token); + history.push(`/jobs`); // Adjusted to use a fixed path + } else { + console.log("Failed to enqueue job", res); + } + }); + }; + + if (videoRef?.current) { + const ve = videoRef.current; + ve.onloadedmetadata = () => { + const newValues: { + width?: number; + height?: number; + maxDuration?: number; + } = {}; + if (ve.duration) { + newValues.maxDuration = ve.duration; + } + setVstValues(curr => ({ + ...curr, + ...newValues, + })); + }; + } + + const styleMap: { [key: string]: string } = { + Anime: "weight_yqexh77ntqyawzgh9fzash798", + Pixel: "weight_yqexh77ntqyawzgh9fzash798", + Painting: "weight_yqexh77ntqyawzgh9fzash798", + }; + + const handleStyleSelection = (selected: string) => { + const selectedSdModelToken = styleMap[selected]; + setVstValues(curr => ({ ...curr, sdModelToken: selectedSdModelToken })); + }; + + const styleOptions = Object.keys(styleMap); + + return ( + + +
+
+ + handleOnChange({ + trimStart: val.trimStartSeconds, + trimEnd: val.trimEndSeconds, + }) + } + /> +
+
+
+ + +
+ +