From 2f44da8ac79737fdd4b58b6fe1726daf2007ab6d Mon Sep 17 00:00:00 2001
From: Michael Chung <michaelchung@michaels-mbp-2.home>
Date: Thu, 3 Apr 2025 23:10:23 -0400
Subject: [PATCH] Changed api calls to use file upload and uuid idempotency
 token and stuff works.

---
 .../app/Classes/ApiManager/EngineApi.ts       | 12 +++++--
 .../app/pages/PageEnigma/Editor/editor.ts     | 12 ++++++-
 .../PageEnigma/comps/PromptBox/PromptBox.tsx  | 35 ++++++++++---------
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/frontend/editor3d/app/Classes/ApiManager/EngineApi.ts b/frontend/editor3d/app/Classes/ApiManager/EngineApi.ts
index 2ef494077a..9a6e9e6994 100644
--- a/frontend/editor3d/app/Classes/ApiManager/EngineApi.ts
+++ b/frontend/editor3d/app/Classes/ApiManager/EngineApi.ts
@@ -41,17 +41,20 @@ export class EngineApi extends ApiManager {
     screenshot,
     sceneMediaToken,
   }: {
-    screenshot: string; // base64 encoded PNG
+    screenshot: File; // base64 encoded PNG
     sceneMediaToken?: string;
   }): Promise<ApiResponse<string>> {
     const endpoint = `${this.ApiTargets.BaseApi}/v1/image_studio/scene_snapshot`;
-
     const formData = new FormData();
     formData.append("snapshot", screenshot); // Changed from "screenshot" to "snapshot" to match API spec
     if (sceneMediaToken) {
       formData.append("scene_media_token", sceneMediaToken);
     }
 
+    // for now ...
+    const uuidIdempotencyToken = crypto.randomUUID(); // Generate a new UUID
+    formData.append("uuid_idempotency_token", uuidIdempotencyToken); // Added uuid_idempotency_token
+
     const response = await fetch(endpoint, {
       method: "POST",
       headers: {
@@ -93,8 +96,10 @@ export class EngineApi extends ApiManager {
     additionalImages?: string[];
   }): Promise<ApiResponse<string>> {
     const endpoint = `${this.ApiTargets.BaseApi}/v1/image_studio/prompt`;
-
+    // for now ...
+    const uuidIdempotencyToken = crypto.randomUUID(); // Generate a new UUID
     const body = {
+      uuid_idempotency_token: uuidIdempotencyToken,
       prompt,
       snapshot_media_token: snapshotMediaToken, // Changed from scene_media_token to snapshot_media_token
       additional_images: additionalImages,
@@ -102,6 +107,7 @@ export class EngineApi extends ApiManager {
 
     const postResponse = await this.post<
       {
+        uuid_idempotency_token: string;
         prompt: string;
         snapshot_media_token: string;
         additional_images?: string[];
diff --git a/frontend/editor3d/app/pages/PageEnigma/Editor/editor.ts b/frontend/editor3d/app/pages/PageEnigma/Editor/editor.ts
index 0c95d76b4a..8b61f623ad 100644
--- a/frontend/editor3d/app/pages/PageEnigma/Editor/editor.ts
+++ b/frontend/editor3d/app/pages/PageEnigma/Editor/editor.ts
@@ -671,7 +671,17 @@ class Editor {
       link.click();
     }
 
-    return base64Snapshot;
+    const byteString = atob(base64Snapshot);
+    const mimeString = "image/png";
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < byteString.length; i++) {
+      ia[i] = byteString.charCodeAt(i);
+    }
+    const uuid = crypto.randomUUID(); // Generate a new UUID
+    const file = new File([ab], `${uuid}.png`, { type: mimeString });
+
+    return { base64Snapshot, file };
   }
 
   public async newScene(sceneTitleInput: string) {
diff --git a/frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx b/frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
index 921e6ee0e4..06157c2e23 100644
--- a/frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
+++ b/frontend/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
@@ -191,6 +191,7 @@ export const PromptBox = () => {
             },
           });
         };
+
         reader.readAsDataURL(file);
       });
     }
@@ -242,17 +243,18 @@ export const PromptBox = () => {
 
       const engineApi = new EngineApi();
       const snapshot = editorEngine.snapShotOfCurrentFrame(false);
+      if (snapshot) {
+        const snapshotResult = await engineApi.uploadSceneSnapshot({
+          screenshot: snapshot.file,
+          sceneMediaToken: "",
+        });
 
-      const snapshotResult = await engineApi.uploadSceneSnapshot({
-        screenshot: snapshot || "",
-        sceneMediaToken: "",
-      });
-
-      await engineApi.enqueueImageGeneration({
-        prompt: prompt,
-        snapshotMediaToken: snapshotResult.data || "",
-        additionalImages: referenceImages.map((image) => image.mediaToken),
-      });
+        await engineApi.enqueueImageGeneration({
+          prompt: prompt,
+          snapshotMediaToken: snapshotResult.data || "",
+          additionalImages: referenceImages.map((image) => image.mediaToken),
+        });
+      }
 
       setisEnqueueing(true);
       try {
@@ -298,12 +300,13 @@ export const PromptBox = () => {
   const handleSaveFrame = async () => {
     if (editorEngine) {
       const snapshot = editorEngine.snapShotOfCurrentFrame(false);
-      const engineApi = new EngineApi();
-      const result = await engineApi.uploadSceneSnapshot({
-        screenshot: snapshot || "",
-        sceneMediaToken: "",
-      });
-      console.log(result);
+      if (snapshot) {
+        const engineApi = new EngineApi();
+        await engineApi.uploadSceneSnapshot({
+          screenshot: snapshot.file || "",
+          sceneMediaToken: "",
+        });
+      }
     }
   };