From 462dcd76459eacec0a661a1eee8a14c5c01e0803 Mon Sep 17 00:00:00 2001
From: Michael Chung <6252325+ArEnSc@users.noreply.github.com>
Date: Fri, 14 Feb 2025 17:35:48 -0500
Subject: [PATCH] Removed buttons that didn't need to be there. Wired up prompt
 and strength sliders and save image. Removed some more code.

---
 frontend/realtime/src/KonvaApp/Engine.ts      | 15 +++----
 .../RenderingPrimitives/RealTimeDrawEngine.ts | 40 ++++++++++++++++++-
 .../ToolbarMain/ButtonPreviewAndRender.tsx    |  2 -
 .../features/ToolbarMain/ToolbarMain.tsx      |  9 +----
 .../features/ToolbarMain/ToolbarMain.tsx      |  3 --
 5 files changed, 44 insertions(+), 25 deletions(-)

diff --git a/frontend/realtime/src/KonvaApp/Engine.ts b/frontend/realtime/src/KonvaApp/Engine.ts
index 512a1166d2..d25ad93e8b 100644
--- a/frontend/realtime/src/KonvaApp/Engine.ts
+++ b/frontend/realtime/src/KonvaApp/Engine.ts
@@ -1,7 +1,5 @@
 import Konva from "konva";
 
-import { RenderEngine } from "./RenderingPrimitives/RenderEngine";
-import { ResponseType } from "./WorkerPrimitives/SharedWorkerBase";
 
 import { uiAccess, uiEvents } from "~/signals";
 
@@ -20,19 +18,13 @@ import {
 import { ImageNode, VideoNode, TextNode } from "./Nodes";
 import { EngineOptions, TextNodeData, VideoNodeData } from "./types";
 
-import { SharedWorkerResponse } from "./WorkerPrimitives/SharedWorkerBase";
-import {
-  DiffusionSharedWorkerProgressData,
-  DiffusionSharedWorkerResponseData,
-} from "./SharedWorkers/Diffusion/DiffusionSharedWorker";
-
 import { AppModes, VideoResolutions } from "./constants";
 import { ToolbarMainButtonNames } from "~/components/features/ToolbarMain/enum";
 
 import { ToolbarNodeButtonNames } from "~/components/features/ToolbarNode/enums";
 import { NavigateFunction } from "react-router-dom";
 import { LoadingVideosProvider } from "./EngineUtitlities/LoadingVideosProvider";
-import { MediaFile } from "~/Classes/ApiManager/models/MediaFile";
+
 import { VideoExtractionHandler } from "./EngineUtitlities/VideoExtractionHandler/VideoExtractionHandler";
 import { RealTimeDrawEngine } from "./RenderingPrimitives/RealTimeDrawEngine";
 
@@ -367,9 +359,12 @@ export class Engine {
     // Listen to Toolbar Main
     uiEvents.toolbarMain.UNDO.onClick(() => this.undoStackManager.undo());
     uiEvents.toolbarMain.REDO.onClick(() => this.undoStackManager.redo());
+    
     uiEvents.toolbarMain.SAVE.onClick(async (/*event*/) => {
-      this.sceneManager.saveScene();
+      await this.realTimeDrawEngine.saveOutput();
+
     });
+
     uiEvents.toolbarMain.PREVIEW.onClick(async () => {
       console.log("Toolbar Main >> Preview");
       this.setAppMode(AppModes.PREVIEW);
diff --git a/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts b/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts
index dcc0a56cb7..44a6c2dded 100644
--- a/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts
+++ b/frontend/realtime/src/KonvaApp/RenderingPrimitives/RealTimeDrawEngine.ts
@@ -21,6 +21,7 @@ export class RealTimeDrawEngine {
   private imageNodes: (ImageNode | TextNode)[];
 
   private offScreenCanvas: OffscreenCanvas;
+  private outputBitmap: ImageBitmap | undefined;
 
   // private frames: ImageBitmap[];
 
@@ -436,6 +437,30 @@ export class RealTimeDrawEngine {
     });
   }
 
+  public async saveOutput() {
+    if (!this.outputBitmap) {
+      console.error("No output bitmap available to save");
+      return;
+    }
+
+    try {
+      const canvas = document.createElement("canvas");
+      canvas.width = this.outputBitmap.width;
+      canvas.height = this.outputBitmap.height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) throw new Error("Failed to get 2D context");
+
+      ctx.drawImage(this.outputBitmap, 0, 0);
+      const blob = await new Promise<Blob>((resolve) => {
+        canvas.toBlob((b) => resolve(b!), "image/png");
+      });
+
+      await FileUtilities.blobToFileJpeg(blob, "output");
+    } catch (error) {
+      console.error("Error saving output:", error);
+    }
+  }
+
   public async render() {
     // only pick nodes that intersect with the canvas on screen bounds to freeze.
     this.mediaLayerRef.draw();
@@ -456,24 +481,35 @@ export class RealTimeDrawEngine {
       test: false,
     })) as ImageBitmap;
 
+    // Test code
+    if (false) {
+      this.outputBitmap = bitmap;
+      this.previewCanvas.image(bitmap);
+      this.isProcessing = false;
+      return
+    } 
+
     try {
       const base64Bitmap = await this.imageBitmapToBase64(bitmap);
-      console.log("Sending to server");
+
       const base64BitmapResponse = await invoke("infer_image", {
         image: base64Bitmap,
         prompt:this.currentPrompt,
         strength:this.currentStrength,
       });
-      console.log("RESPONSE IS");
+
       console.log(base64BitmapResponse);
       const decoded = await this.base64ToImageBitmap(
         base64BitmapResponse as string,
       );
+
+      this.outputBitmap = decoded;
       this.previewCanvas.image(decoded);
     } catch (error) {
       console.error("Error during image processing:", error);
     } finally {
       this.isProcessing = false;
     }
+
   }
 }
diff --git a/frontend/realtime/src/components/features/ToolbarMain/ButtonPreviewAndRender.tsx b/frontend/realtime/src/components/features/ToolbarMain/ButtonPreviewAndRender.tsx
index 29bc0271ef..20f52b33dc 100644
--- a/frontend/realtime/src/components/features/ToolbarMain/ButtonPreviewAndRender.tsx
+++ b/frontend/realtime/src/components/features/ToolbarMain/ButtonPreviewAndRender.tsx
@@ -11,8 +11,6 @@ export const ButtonPreviewAndRender = ({
 }) => {
   return (
     <div className="flex">
-      <ButtonPreview {...buttonPreviewProps} />
-      <ButtonRender {...buttonRenderProps} />
     </div>
   );
 };
diff --git a/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx b/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx
index ad69ac5ae9..28e1401756 100644
--- a/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx
+++ b/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx
@@ -84,14 +84,7 @@ export const ToolbarMain = ({
               </ToolbarButton>
             </PopoverPanel>
           </Popover>
-          <ToolbarButton
-            icon={faMagicWandSparkles}
-            buttonProps={{
-              ...buttonProps.AI_STYLIZE,
-              prominent: true,
-            }}
-            tooltip="AI Stylize"
-          />
+
         </div>
         <div className="flex items-center gap-2 pl-2">
           <ToolbarButton
diff --git a/frontend/storyteller-board/src/components/features/ToolbarMain/ToolbarMain.tsx b/frontend/storyteller-board/src/components/features/ToolbarMain/ToolbarMain.tsx
index ad69ac5ae9..344884e1e1 100644
--- a/frontend/storyteller-board/src/components/features/ToolbarMain/ToolbarMain.tsx
+++ b/frontend/storyteller-board/src/components/features/ToolbarMain/ToolbarMain.tsx
@@ -79,9 +79,6 @@ export const ToolbarMain = ({
               <ToolbarButton icon={faImage} buttonProps={buttonProps.ADD_IMAGE}>
                 Add Image
               </ToolbarButton>
-              <ToolbarButton icon={faFilm} buttonProps={buttonProps.ADD_VIDEO}>
-                Add Video
-              </ToolbarButton>
             </PopoverPanel>
           </Popover>
           <ToolbarButton