diff --git a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx index 3735034345..ea63731316 100644 --- a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx +++ b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx @@ -19,7 +19,6 @@ import { Signal } from "@preact/signals-react"; import { useSignals } from "@preact/signals-react/runtime"; import { setLogoutStates } from "~/signals/authentication/utilities"; import { EngineContext } from "~/pages/PageEnigma/contexts/EngineContext"; -import { useAppUiContext } from "~/pages/Page2d/contextSignals/appUi"; function isEditorPath(path: string) { if (path === "/") return true; @@ -37,6 +36,7 @@ interface Props { const appTabs: TabItem[] = [ { id: "2D", label: "2D" }, { id: "3D", label: "3D" }, + { id: "VIDEO", label: "Video" }, ]; export const TopBar = ({ diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx index 2d08a03ae0..b8ee2fc54a 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEditor.tsx @@ -8,6 +8,7 @@ import { PreviewEngineCamera } from "./comps/PreviewEngineCamera"; import { PreviewFrameImage } from "./comps/PreviewFrameImage"; import { pageHeight, pageWidth } from "~/signals"; import { PoseModeSelector } from "./comps/PoseModeSelector"; +import ImageToVideo from "../PageVideo/ImageToVideo"; import { timelineHeight, sidePanelWidth, @@ -145,13 +146,6 @@ export const PageEditor = () => { // Force a render to update the view editorEngine.renderScene(); - - // Queue an update to ensure the engine processes the camera change - // Queue.publish({ - // queueName: QueueNames.TO_ENGINE, - // action: toEngineActions.CAMERA_CHANGED, - // data: selectedCamera, - // }); } // Force update camera properties in the state @@ -215,19 +209,6 @@ export const PageEditor = () => { // Force a render to update the view editorEngine.renderScene(); - - // Queue.publish({ - // queueName: QueueNames.TO_ENGINE, - // action: toEngineActions.CAMERA_CHANGED, - // data: { - // id: newId, - // label: `Camera ${newIndex}`, - // focalLength: 24, - // position: { x: randomX, y: randomY, z: randomZ }, - // rotation: { x: 0, y: 0, z: 0 }, - // lookAt: { x: 0, y: 0, z: 0 }, - // }, - // }); } }; @@ -253,6 +234,7 @@ export const PageEditor = () => { const display3d = appTabId.value === "3D" ? "block" : "none"; const display2d = appTabId.value === "2D" ? "block" : "none"; + const displayVideo = appTabId.value === "VIDEO" ? "block" : "none"; return (
@@ -343,7 +325,9 @@ export const PageEditor = () => { } editorEngine!.positive_prompt = prompt; }} - snapshotCurrentFrame={editorEngine?.snapShotOfCurrentFrame.bind(editorEngine)} + snapshotCurrentFrame={editorEngine?.snapShotOfCurrentFrame.bind( + editorEngine, + )} /> { +
+ +
{ }} + onClose={() => {}} videoSrc2D="/resources/videos/artcraft-canvas-demo.mp4" videoSrc3D="/resources/videos/artcraft-3d-demo.mp4" openAiLogo="/resources/images/openai-logo.png" diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx index 2f422a7bed..ea2e83bfc8 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/PageEnigma.tsx @@ -12,7 +12,6 @@ import { useSignals } from "@preact/signals-react/runtime"; import { useEffect, useState } from "react"; import * as gpu from "detect-gpu"; import { UsersApi } from "~/Classes/ApiManager"; -import { PageEnigmaComponent } from "~/pages/PageEnigma/PageEnigmaComponent"; import { TurnOnGpu } from "~/pages/PageEnigma/TurnOnGpu"; import { PrecisionSelector } from "./comps/PrecisionSelector/PrecisionSelector"; import { @@ -24,7 +23,7 @@ import { import { InstallSounds } from "~/pages/PageEnigma/InstallSounds"; import { useImageGenerationFailureEvent } from "./TauriEvents/useImageGenerationFailureEvent"; import { useImageGenerationSuccessEvent } from "./TauriEvents/useImageGenerationSuccessEvent"; - +import { PageEditor } from "~/pages/PageEnigma/PageEditor"; export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => { useSignals(); useActiveJobs(); @@ -107,7 +106,7 @@ export const PageEnigma = ({ sceneToken }: { sceneToken?: string }) => { return ( - + { useSignals(); - return ( <> -
- -
-
- -
+ ); }; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/constants/page.ts b/frontend/apps/editor3d/app/src/pages/PageEnigma/constants/page.ts index 9b8efa1384..493fd59eeb 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/constants/page.ts +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/constants/page.ts @@ -1,3 +1,4 @@ +// TODO: Remove this file export enum Pages { EDIT, STYLE, diff --git a/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx b/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx new file mode 100644 index 0000000000..8c4397e42e --- /dev/null +++ b/frontend/apps/editor3d/app/src/pages/PageVideo/ImageToVideo.tsx @@ -0,0 +1,63 @@ +import { useState, useEffect, useRef } from "react"; +import { PromptBox2D } from "@storyteller/ui-promptbox"; +import { UploaderState } from "libs/common/src/lib/interfaces"; +import { + MaybeCanvasRenderBitmapType, + JobContextType, +} from "libs/common/src/lib/types"; + +const ImageToVideo = () => { + const containerRef = useRef(null); + + const uploadImage = ({ + title, + assetFile, + progressCallback, + }: { + title: string; + assetFile: File; + progressCallback: (newState: UploaderState) => void; + }): Promise => { + throw new Error("Function not implemented."); + }; + + const getCanvasRenderBitmap = (): MaybeCanvasRenderBitmapType => { + throw new Error("Function not implemented."); + }; + + const EncodeImageBitmapToBase64 = ( + imageBitmap: ImageBitmap, + ): Promise => { + throw new Error("Function not implemented."); + }; + + const useJobContext = (): JobContextType => { + throw new Error("Function not implemented."); + }; + + return ( +
+
+
+
Image Display
+
+ Preview { + const target = e.target as HTMLImageElement; + target.style.display = "none"; + }} + /> +
+
+
+
+ ); +}; + +export default ImageToVideo; diff --git a/frontend/apps/editor3d/app/src/signals/appTab.ts b/frontend/apps/editor3d/app/src/signals/appTab.ts index aeb2f94340..3729c7e16f 100644 --- a/frontend/apps/editor3d/app/src/signals/appTab.ts +++ b/frontend/apps/editor3d/app/src/signals/appTab.ts @@ -3,7 +3,7 @@ import { signal } from "@preact/signals-react"; export const appTabId = signal("3D"); export const setAppTabId = (newId: string) => { - if (newId != "2D" && newId != "3D") { + if (newId != "2D" && newId != "3D" && newId != "VIDEO") { console.error("Provided app ID is not valid"); return; } @@ -14,4 +14,4 @@ export const setAppTabId = (newId: string) => { export const is3DEditorInitialized = signal(false); export const setIs3DEditorInitialized = (isInitialized: boolean) => { is3DEditorInitialized.value = isInitialized; -} +};