From 8d567c47eb855e5d4cb30723431e7ddd5a8dbad2 Mon Sep 17 00:00:00 2001
From: Michael Chung <michaelchung@michaels-mbp-2.home>
Date: Mon, 28 Apr 2025 19:57:20 -0400
Subject: [PATCH] Ok fixed some minor issues.

---
 frontend/README.md                            |  9 +++++
 .../app/src/Classes/ApiManager/EngineApi.ts   |  6 ++--
 .../PageEnigma/comps/PromptBox/PromptBox.tsx  | 36 ++++++++++++++++---
 3 files changed, 44 insertions(+), 7 deletions(-)

diff --git a/frontend/README.md b/frontend/README.md
index 7c11045452..2c61e4006a 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -55,4 +55,13 @@ npm install
 2.import it first in code
 3.nx sync
 4.nx build
+
+or
+
+# frontend build
+in frontend folder
+
+% nx build -project type
+% nx build editor3d
+% nx dev editor3d
 ```
diff --git a/frontend/apps/editor3d/app/src/Classes/ApiManager/EngineApi.ts b/frontend/apps/editor3d/app/src/Classes/ApiManager/EngineApi.ts
index 92c4bc8343..8209480bea 100644
--- a/frontend/apps/editor3d/app/src/Classes/ApiManager/EngineApi.ts
+++ b/frontend/apps/editor3d/app/src/Classes/ApiManager/EngineApi.ts
@@ -116,12 +116,12 @@ export class EngineApi extends ApiManager {
         snapshot_media_token: string;
         additional_images?: string[];
       },
-      { success?: boolean; job_token?: string; BadInput?: string }
+      { success?: boolean; job_token?: string; error_reason?: string, failure_reason?: string}
     >({
       endpoint,
       body,
     });
-
+    console.log("postResponse", postResponse);
     // Check if the response is successful
     const isSuccess = postResponse.success ?? false;
 
@@ -129,7 +129,7 @@ export class EngineApi extends ApiManager {
     const result = {
       success: isSuccess,
       data: isSuccess ? postResponse.job_token : undefined,
-      errorMessage: isSuccess ? undefined : postResponse.BadInput,
+      errorMessage: isSuccess ? undefined : (postResponse.error_reason || postResponse.failure_reason),
     };
 
     return result;
diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PromptBox/PromptBox.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
index af31847cf6..68c8a4503c 100644
--- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
+++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
@@ -24,9 +24,11 @@ import {
 } from "@fortawesome/pro-regular-svg-icons";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { PopoverItem, PopoverMenu } from "~/components/reusable/Popover";
 import { Button, ToggleButton, Tooltip } from "~/components";
 import { CameraAspectRatio } from "~/pages/PageEnigma/enums";
+
 import {
   cameraAspectRatio,
   disableHotkeyInput,
@@ -35,9 +37,11 @@ import {
   gridVisibility,
   setGridVisibility,
 } from "~/pages/PageEnigma/signals";
+
 import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames";
 import Queue from "~/pages/PageEnigma/Queue/Queue";
 import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions";
+
 import {
   cameras,
   selectedCameraId,
@@ -55,17 +59,22 @@ interface ReferenceImage {
   file: File;
   mediaToken: string;
 }
+
 import { EngineApi } from "~/Classes/ApiManager/EngineApi";
 import { UploaderStates } from "~/enums/UploaderStates";
 import { CameraSettingsModal } from "../CameraSettingsModal";
 import { twMerge } from "tailwind-merge";
 import { GalleryModal, GalleryItem } from "@storyteller/ui-gallery-modal";
+import { Modal } from "@storyteller/ui-modal";
 
 export const PromptBox = () => {
   useSignals();
   const editorEngine = useContext(EngineContext);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const [content, setContent] = useState<React.ReactNode>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   const [prompt, setPrompt] = useState("");
   const [isEnqueueing, setisEnqueueing] = useState(false);
   const [useSystemPrompt, setUseSystemPrompt] = useState(true);
@@ -417,6 +426,11 @@ export const PromptBox = () => {
     setPrompt(e.target.value);
   };
 
+  const handleError = (errorMessage: string) => {
+    setContent(errorMessage);
+    setIsModalOpen(true);
+  }
+
   const handleEnqueue = async () => {
     if (!prompt.trim()) return;
 
@@ -427,21 +441,29 @@ export const PromptBox = () => {
 
       const engineApi = new EngineApi();
       const snapshot = editorEngine.snapShotOfCurrentFrame(false);
+
       if (snapshot) {
         const snapshotResult = await engineApi.uploadSceneSnapshot({
           screenshot: snapshot.file,
           sceneMediaToken: "",
         });
 
-        console.log("useSystemPrompt", useSystemPrompt);
-        await engineApi.enqueueImageGeneration({
+      console.log("useSystemPrompt", useSystemPrompt);
+      
+      const response = await engineApi.enqueueImageGeneration({
           disableSystemPrompt: !useSystemPrompt,
           prompt: prompt,
-          snapshotMediaToken: snapshotResult.data || "",
+          snapshotMediaToken: "",
           additionalImages: referenceImages.map((image) => image.mediaToken),
         });
+        console.log("response", response);
+        if (response.errorMessage) {
+          handleError(response.errorMessage);
+          setisEnqueueing(false);
+          return;
+        }
       }
-
+    
       try {
         // Here we would pass both the prompt and reference images to the generation
         console.log(
@@ -503,6 +525,12 @@ export const PromptBox = () => {
 
   return (
     <>
+      <Modal isOpen={isModalOpen} onClose={() => {
+        setIsModalOpen(false);
+        setContent("");
+      }}>
+        {content}
+      </Modal>
       <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 flex-col gap-3">
         {(referenceImages.length > 0 || uploadingImages.length > 0) && (
           <div className="flex w-full gap-2">