From daab4fcf5e75dfa0e711d4df7bdf04fb7f8c57a2 Mon Sep 17 00:00:00 2001 From: Victor Date: Fri, 22 Mar 2024 10:58:09 -0700 Subject: [PATCH] url queries on studio tutorial --- .../components/common/BasicTabs/BasicTabs.tsx | 8 +- .../src/components/common/BasicTabs/index.tsx | 1 + .../src/components/common/index.tsx | 2 + .../pages/studio_tutorial/StudioTutorial.tsx | 87 +++++++++++++++---- .../pages/studio_tutorial/StyleEditor.tsx | 2 +- 5 files changed, 80 insertions(+), 20 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/BasicTabs/index.tsx diff --git a/packages/fakeyou.com/src/components/common/BasicTabs/BasicTabs.tsx b/packages/fakeyou.com/src/components/common/BasicTabs/BasicTabs.tsx index 12db6526e3..f73ad7cd17 100644 --- a/packages/fakeyou.com/src/components/common/BasicTabs/BasicTabs.tsx +++ b/packages/fakeyou.com/src/components/common/BasicTabs/BasicTabs.tsx @@ -10,16 +10,16 @@ interface Tab { interface Props { disabled?: boolean, - name: string, + name?: string, onChange: (e: any) => any, tabs: Tab[], value: any } export default function BasicTabs({ disabled, name = "", onChange, tabs, value: currentValue }: Props) { - const onClick = () => { + const tabSelect = (value: any) => () => { if (!disabled) { - onChange({ target: { name, type: "select", value: currentValue } }); + onChange({ target: { name, type: "select", value } }); } }; @@ -27,7 +27,7 @@ export default function BasicTabs({ disabled, name = "", onChange, tabs, value: { tabs.map(({ icon, label, value },key) =>
  • item.jobToken === compositeJobToken); const compositing = compositeJobStatus && jobStateCanChange(compositeJobStatus.jobState); - const compositeMediaToken = compositeJobStatus?.maybe_result?.entity_token || ""; + const compositeMediaToken = compositeJobStatus?.maybeResultToken || ""; + + // video style style transfer job state const [styleJobToken,styleJobTokenSet] = useState(""); const [styleEnqueued,styleEnqueuedSet] = useState(false); const styleJobStatus = inferenceJobs.find((item: any) => item.jobToken === styleJobToken); const styling = styleJobStatus && jobStateCanChange(styleJobStatus.jobState); - const styleMediaToken = styleJobStatus?.maybe_result?.entity_token || ""; + const styleMediaToken = styleJobStatus?.maybeResultToken || ""; - console.log("🚒",compositeJobStatus,compositing,styling); + console.log("🚒 tutorial overall state",{ + compositeJobStatus, + compositing, + compositeMediaToken, + queryCompositeJob, + queryStyleJob, + styleJobStatus, + styleEnqueued, + styling, + styleMediaToken, + urlQueries + }); // If the user saves the scene in the engine, we'll need to use the new token // for subsequent steps of this flow. @@ -120,6 +147,11 @@ export default function StudioTutorial(props: Props) { skybox: "meadow_4k", }).then((res: any) => { if (res && res.success) { + let newURLQueries = new URLSearchParams({ + compositeJobToken: res.inference_job_token + }).toString(); + + history.replace({ pathname, search: newURLQueries }); enqueue(res.inference_job_token,false,FrontendInferenceJobType.EngineComposition); compositeJobTokenSet(res.inference_job_token) } @@ -127,10 +159,10 @@ export default function StudioTutorial(props: Props) { }; const tabs = [ - { content: () => "", label: "Animation" }, - { content: () => "", label: "Camera" }, - { content: () => "", label: "Audio" }, - { content: () => "", label: "Style" } + { value: "animation", label: "Animation" }, + { value: "camera", label: "Camera" }, + { value: "audio", label: "Audio" }, + { value: "style", label: "Style" } ]; const sceneIsLoaded = sceneIsLoadedCount > 0 || sceneIsSaved; @@ -148,8 +180,7 @@ export default function StudioTutorial(props: Props) {
    ; else if (styleMediaToken) return
    - Video Preview here - { styleMediaToken } +
    ; else if (sceneIsLoaded) return ; else return null; @@ -157,21 +188,28 @@ export default function StudioTutorial(props: Props) { useEffect(() => { const enqueueStyle = () => { + console.log("💜 style enqueue started",{ vstValues, styleEnqueued }); EnqueueVST("",{ creator_set_visibility: vstValues.visibility, enable_lipsync: true, input_file: compositeJobStatus?.maybe_result?.entity_token || "", negative_prompt: vstValues.negPrompt, - prompt: vstValues.posPrompt, + prompt: "A dog in a sunny field with lots of flowers", style: vstValues.sdModelToken, trim_end_millis: 3000, trim_start_millis: 0, uuid_idempotency_token: uuidv4() }) .then((res: EnqueueVSTResponse) => { + console.log("✅",res); if (res.success && res.inference_job_token) { + let newURLQueries = new URLSearchParams({ + compositeJobToken, + engineJobToken: res.inference_job_token + }).toString(); enqueue(res.inference_job_token,false,FrontendInferenceJobType.VideoStyleTransfer); styleJobTokenSet(res.inference_job_token); + history.replace({ pathname, search: newURLQueries }); // console.log("Job enqueued successfully", res.inference_job_token); // history.push(`/studio-intro/result/${res.inference_job_token}`); } else { @@ -185,7 +223,22 @@ export default function StudioTutorial(props: Props) { enqueueStyle(); } - },[enqueue,compositeJobStatus,compositeMediaToken,styleEnqueued,vstValues]); + if (sceneIsLoaded && !selectedTab) { + selectedTabSet("style") + } + + },[ + enqueue, + compositeJobToken, + compositeJobStatus, + compositeMediaToken, + history, + pathname, + selectedTab, + sceneIsLoaded, + styleEnqueued, + vstValues + ]); return !props.sessionWrapper.canAccessStudio() ? @@ -199,7 +252,11 @@ export default function StudioTutorial(props: Props) { onSceneSavedCallback={onSaveCallback} />
    - + selectedTabSet(target.value), + tabs, + value: selectedTab + }}/> { tabContent() } diff --git a/packages/fakeyou.com/src/v2/view/pages/studio_tutorial/StyleEditor.tsx b/packages/fakeyou.com/src/v2/view/pages/studio_tutorial/StyleEditor.tsx index 3b5a6df8ad..c5245e816b 100644 --- a/packages/fakeyou.com/src/v2/view/pages/studio_tutorial/StyleEditor.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/studio_tutorial/StyleEditor.tsx @@ -74,7 +74,7 @@ export default function StyleEditor({ compositorStart, setVstValues, vstValues } label="Negative prompt" placeholder="Enter your description..." onChange={e => handleOnChange({ posPrompt: e.target.value })} - value={vstValues.posPrompt} + value={vstValues.negPrompt} required={false} rows={5} resize={false}