Add reset ability to 2D

frontend/apps/artcraft-website/tsconfig.app.json

@@ -37,9 +37,6 @@
     "src/components/footer"
   ],
   "references": [
-    {
-      "path": "../../libs/components/tutorial-modal/tsconfig.lib.json"
-    },
     {
       "path": "../../libs/components/button/tsconfig.lib.json"
     }

frontend/apps/artcraft-website/tsconfig.json

@@ -2,9 +2,6 @@
   "files": [],
   "include": [],
   "references": [
-    {
-      "path": "../../libs/components/tutorial-modal"
-    },
     {
       "path": "../../libs/components/button"
     },

frontend/apps/editor3d/app/src/pages/PageDraw/PageDraw.tsx

@@ -369,7 +369,7 @@ const PageDraw = () => {
           input.click();
         }}
         onDelete={(): void => {
-          store.deleteSelectedItems();
+          store.RESET();
         }}
         activeToolId={store.activeTool}
         currentShape={store.currentShape}

frontend/apps/editor3d/app/src/pages/PageDraw/stores/SceneState.ts

@@ -196,6 +196,7 @@ interface SceneState {
 
   // Action for deleting selected items
   deleteSelectedItems: () => void;
+  RESET: () => void;
 
   // Clipboard actions
   copySelectedItems: () => void;
@@ -234,10 +235,8 @@ interface SceneState {
   sendBackward: (nodeIds: string[]) => void;
 
   // Start background removal (enqueues task with Tauri)
-  beginRemoveBackground: (
-    nodeIds: string[],
-  ) => Promise<void>;
-  
+  beginRemoveBackground: (nodeIds: string[]) => Promise<void>;
+
   // Finish background removal (handoff back from a Tauri-sent event)
   finishRemoveBackground: (
     nodeId: string,
@@ -273,7 +272,7 @@ const getNextZIndex = (nodes: Node[], lineNodes: LineNode[]): number => {
   return allZIndices.length > 0 ? Math.max(...allZIndices) + 1 : 1;
 };
 
-export const useSceneStore = create<SceneState>((set, get) => ({
+export const useSceneStore = create<SceneState>((set, get, store) => ({
   // Initial state
   nodes: [],
   lineNodes: [],
@@ -289,7 +288,7 @@ export const useSceneStore = create<SceneState>((set, get) => ({
   fillColor: "white",
   currentShape: null,
   shapeColor: "#4d79b3",
-  
+
   // Cursor initial state
   cursorPosition: null,
   cursorVisible: false,
@@ -337,7 +336,6 @@ export const useSceneStore = create<SceneState>((set, get) => ({
     }
   },
 
-
   updateNode: (
     id: string,
     updates: Partial<Node>,
@@ -838,6 +836,10 @@ export const useSceneStore = create<SceneState>((set, get) => ({
     }
   },
 
+  RESET: () => {
+    set(store.getInitialState());
+  },
+
   // Clipboard actions
   copySelectedItems: () => {
     set((state) => {
@@ -1437,9 +1439,7 @@ export const useSceneStore = create<SceneState>((set, get) => ({
     });
     get().saveState();
   },
-  beginRemoveBackground: async (
-    nodeIds: string[],
-  ) => {
+  beginRemoveBackground: async (nodeIds: string[]) => {
     const hasImageNodes = nodeIds.some((id) => {
       const node = get().nodes.find((n) => n.id === id);
       return node ? node.type === "image" : false;
@@ -1455,7 +1455,7 @@ export const useSceneStore = create<SceneState>((set, get) => ({
     }
     try {
       const base64Image = await convertFileToBase64(firstNode.imageFile);
-      // NB: This handler is async, so we subscribe (externally) and 
+      // NB: This handler is async, so we subscribe (externally) and
       // wait for the bg removal to complete.
       const _response = await EnqueueImageBgRemoval({
         base64_image: base64Image,

frontend/apps/editor3d/package.json

@@ -17,6 +17,7 @@
     "build": "vite build",
     "preview": "vite preview --port 8080",
     "dev": "echo 'editor3d' && vite dev",
+    "production-preview": "echo 'editor3d dev with production preview' && vite build --debug --emptyOutDir --logLevel info && vite preview --port 5173",
     "staging-build": "vite build",
     "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint playground/* .",
     "typecheck": "tsc",
@@ -64,6 +65,7 @@
     "react-dom": "^18.2.0",
     "react-drag-drop-files": "^2.3.10",
     "react-helmet": "^6.1.0",
+    "react-hot-toast": "^2.5.2",
     "react-image-crop": "^11.0.5",
     "react-konva": "^18.2.10",
     "react-router": "^6.26.1",

frontend/apps/editor3d/tsconfig.json

@@ -156,9 +156,6 @@
     },
     {
       "path": "../../libs/api"
-    },
-    {
-      "path": "../../libs/api-enums"
     }
   ]
 }

frontend/libs/api/tsconfig.json

@@ -6,9 +6,6 @@
     {
       "path": "../tauri-utils"
     },
-    {
-      "path": "../api-enums"
-    },
     {
       "path": "./tsconfig.lib.json"
     },

frontend/libs/api/tsconfig.lib.json

@@ -18,9 +18,6 @@
   "references": [
     {
       "path": "../tauri-utils/tsconfig.lib.json"
-    },
-    {
-      "path": "../api-enums/tsconfig.lib.json"
     }
   ],
   "exclude": [

frontend/libs/components/login-modal/vite.config.ts

@@ -7,7 +7,13 @@ import * as path from 'path';
 export default defineConfig(() => ({
   root: __dirname,
   cacheDir: '../../../node_modules/.vite/libs/components/login-modal',
-  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  plugins: [
+    react(), 
+    dts({ 
+      entryRoot: 'src', 
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') 
+    })
+  ],
   // Uncomment this if you are using workers.
   // worker: {
   //  plugins: [ nxViteTsPaths() ],

frontend/libs/components/promptbox/src/lib/PromptBox2D.tsx

@@ -5,7 +5,6 @@ import {
   JobContextType,
   MaybeCanvasRenderBitmapType,
   UploaderState,
-  UploaderStates,
 } from "@storyteller/common";
 import { PopoverMenu, PopoverItem } from "@storyteller/ui-popover";
 import { Tooltip } from "@storyteller/ui-tooltip";
@@ -32,7 +31,7 @@ import {
   EnqueueContextualEditImage,
   EnqueueContextualEditImageSize,
 } from "@storyteller/tauri-api";
-import { usePrompt2DStore, RefImage } from "./promptStore";
+import { usePrompt2DStore } from "./promptStore";
 import { gtagEvent } from "@storyteller/google-analytics";
 import { getCapabilitiesForModel } from "@storyteller/model-list";
 import { ImageModel } from "@storyteller/model-list";

frontend/libs/components/promptbox/src/lib/PromptBox3D.tsx

@@ -39,11 +39,8 @@ import { Signal } from "@preact/signals-react";
 import {
   CommandSuccessStatus,
   EnqueueContextualEditImage,
-  EnqueueContextualEditImageModel,
   EnqueueContextualEditImageSize,
-  // waitForSoraLogin,
 } from "@storyteller/tauri-api";
-// import { showActionReminder } from "@storyteller/ui-action-reminder-modal";
 import { usePrompt3DStore } from "./promptStore";
 import { gtagEvent } from "@storyteller/google-analytics";
 import { ImageModel } from "@storyteller/model-list";
@@ -98,7 +95,7 @@ export const PromptBox3D = ({
   snapshotCurrentFrame,
 }: PromptBox3DProps) => {
   useSignals();
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  //const fileInputRef = useRef<HTMLInputElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [content, setContent] = useState<React.ReactNode>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);

frontend/libs/components/promptbox/src/lib/PromptBoxImage.tsx

@@ -235,8 +235,8 @@ export const PromptBoxImage = ({
       return;
     }
 
-    console.log("Selected model:", selectedModel)
-    console.log("Prompt:", prompt)
+    console.debug("Selected model:", selectedModel)
+    console.debug("Prompt:", prompt)
 
     setIsEnqueueing(true);
 
@@ -274,7 +274,7 @@ export const PromptBoxImage = ({
       }
 
       const generateResponse = await EnqueueTextToImage(request);
-      console.log("PromptBoxImage - generateResponse", generateResponse);
+      console.debug("PromptBoxImage - generateResponse", generateResponse);
 
       await onEnqueuePressed?.(prompt, generationCount, subscriberId);
     } catch (err) {

frontend/libs/components/toaster/vite.config.ts

@@ -7,7 +7,13 @@ import * as path from 'path';
 export default defineConfig(() => ({
   root: __dirname,
   cacheDir: '../../../node_modules/.vite/libs/components/toaster',
-  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  plugins: [
+    react(), 
+    dts({ 
+      entryRoot: 'src', 
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') 
+    })
+  ],
   // Uncomment this if you are using workers.
   // worker: {
   //  plugins: [ nxViteTsPaths() ],
@@ -32,7 +38,18 @@ export default defineConfig(() => ({
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
-      external: ['react','react-dom','react/jsx-runtime']
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'react-hot-toast'
+      ],
+      output: {
+        globals: {
+          'react-hot-toast': 'react-hot-toast',
+        },
+        preserveModules: false,
+      },
     },
   },
   test: {

frontend/libs/tauri-events/vite.config.ts

@@ -7,7 +7,13 @@ import * as path from 'path';
 export default defineConfig(() => ({
   root: __dirname,
   cacheDir: '../../node_modules/.vite/libs/tauri-events',
-  plugins: [react(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') })],
+  plugins: [
+    react(), 
+    dts({ 
+      entryRoot: 'src', 
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json') 
+    })
+  ],
   // Uncomment this if you are using workers.
   // worker: {
   //  plugins: [ nxViteTsPaths() ],
@@ -32,7 +38,12 @@ export default defineConfig(() => ({
     },
     rollupOptions: {
       // External packages that should not be bundled into your library.
-      external: ['react','react-dom','react/jsx-runtime']
+      external: [
+        'react',
+        'react-dom',
+        'react/jsx-runtime',
+        'react-hot-toast',
+      ]
     },
   },
   test: {

frontend/package-lock.json

@@ -206,6 +206,7 @@
         "react-dom": "^18.2.0",
         "react-drag-drop-files": "^2.3.10",
         "react-helmet": "^6.1.0",
+        "react-hot-toast": "^2.5.2",
         "react-image-crop": "^11.0.5",
         "react-konva": "^18.2.10",
         "react-router": "^6.26.1",

frontend/tsconfig.json

@@ -39,6 +39,12 @@
     {
       "path": "./libs/components/tooltip"
     },
+    {
+      "path": "./libs/tauri-api"
+    },
+    {
+      "path": "./libs/tauri-events"
+    },
     {
       "path": "./libs/tauri-utils"
     },
@@ -78,9 +84,6 @@
     {
       "path": "./libs/common"
     },
-    {
-      "path": "./libs/tauri-api"
-    },
     {
       "path": "./libs/components/login-modal"
     },
@@ -150,9 +153,6 @@
     {
       "path": "./libs/analytics/google-analytics"
     },
-    {
-      "path": "./libs/tauri-events"
-    },
     {
       "path": "./libs/components/provider-setup-modal"
     },

script/artcraft/unix_frontend_production_preview.sh

@@ -0,0 +1,29 @@
+#!/usr/bin/env bash
+# This works on Linux and MacOS to launch the frontend dev server
+
+root_dir=$(pwd)
+frontend_path="${root_dir}/frontend"
+
+echo "Running Artcraft Frontend in Production Build + Preview Mode... (It won't hot reload!)"
+echo ""
+
+echo "You'll need to launch the Rust dev server as a second script!"
+echo ""
+
+# Kill any process running on port 5741, which will block startup
+if lsof -i tcp:5173 &>/dev/null; then
+  lsof -i tcp:5173 -t | xargs kill -9
+  echo "Killed process running on port 5173"
+else
+  echo "No process running on port 5173"
+fi
+
+pushd "${frontend_path}" || exit
+
+npm install --verbose
+
+export VITE_ENVIRONMENT_TYPE="production"
+
+nx production-preview editor3d
+
+popd || exit