Fix history missing from gallery edit

crates/service/web/storyteller_web/src/api_doc_cli.rs

@@ -27,6 +27,7 @@ use errors::AnyhowResult;
 
 pub mod billing;
 pub mod configs;
+pub mod error;
 pub mod http_server;
 pub mod state;
 pub mod threads;

crates/service/web/storyteller_web/src/api_doc_server.rs

@@ -30,6 +30,7 @@ use crate::configs::static_api_tokens::StaticApiTokenSet;
 
 pub mod billing;
 pub mod configs;
+pub mod error;
 pub mod http_server;
 pub mod state;
 pub mod threads;

crates/service/web/storyteller_web/src/error/internal_error.rs

@@ -0,0 +1,37 @@
+use std::error::Error;
+use std::fmt::{Debug, Display, Formatter};
+
+/// Any generic errors arising internally.
+/// An error class that we do not expose via the API.
+/// This should be massaged before we send it to the user.
+#[derive(Debug)]
+pub enum InternalError {
+  /// Issue with HMAC decoding
+  /// This is typically when using development cookies against production,
+  /// or vice versa.
+  VisitorCookieError(String),
+  
+  /// Decode error with AVT cookie missing a required field.
+  VisitorCookieMissingField(&'static str),
+
+  /// Catch instances of anyhow::Error.
+  AnyhowError(anyhow::Error),
+}
+
+impl Error for InternalError {}
+
+impl Display for InternalError {
+  fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+    match self {
+      InternalError::VisitorCookieError(reason) => write!(f, "Visitor cookie error: {:?}", reason),
+      InternalError::VisitorCookieMissingField(field) => write!(f, "Visitor cookie missing field: {}", field),
+      InternalError::AnyhowError(err) => write!(f, "Anyhow error: {}", err),
+    }
+  }
+}
+
+impl From<anyhow::Error> for InternalError {
+  fn from(err: anyhow::Error) -> Self {
+    InternalError::AnyhowError(err)
+  }
+}

crates/service/web/storyteller_web/src/error/mod.rs

@@ -0,0 +1 @@
+pub mod internal_error;

crates/service/web/storyteller_web/src/http_server/cookies/anonymous_visitor_tracking/avt_cookie_manager.rs

@@ -4,12 +4,12 @@ use actix_web::HttpRequest;
 use anyhow::anyhow;
 use log::warn;
 
+use crate::error::internal_error::InternalError;
+use crate::http_server::cookies::anonymous_visitor_tracking::avt_cookie_payload::AvtCookiePayload;
 use cookies::jwt_signer::JwtSigner;
 use errors::AnyhowResult;
 use tokens::tokens::anonymous_visitor_tracking::AnonymousVisitorTrackingToken;
 
-use crate::http_server::cookies::anonymous_visitor_tracking::avt_cookie_payload::AvtCookiePayload;
-
 const VISITOR_COOKIE_NAME : &str = "visitor";
 
 /// Handle "anonymous visitor tracking" cookies.
@@ -70,7 +70,7 @@ impl AvtCookieManager {
     Ok(payload)
   }
 
-  pub fn decode_cookie_payload_from_request(&self, request: &HttpRequest) -> AnyhowResult<Option<AvtCookiePayload>> {
+  pub fn decode_cookie_payload_from_request(&self, request: &HttpRequest) -> Result<Option<AvtCookiePayload>, InternalError> {
     let cookie = match request.cookie(VISITOR_COOKIE_NAME) {
       None => return Ok(None),
       Some(cookie) => cookie,
@@ -79,7 +79,7 @@ impl AvtCookieManager {
     match self.decode_cookie_payload(&cookie) {
       Err(e) => {
         warn!("Visitor cookie decode error: {:?}", e);
-        Err(anyhow!("Could not decode visitor cookie: {:?}", e))
+        Err(InternalError::VisitorCookieError(e.to_string()))
       },
       Ok(payload) => Ok(Some(payload)),
     }

crates/service/web/storyteller_web/src/http_server/cookies/anonymous_visitor_tracking/avt_cookie_payload.rs

@@ -1,9 +1,7 @@
 use std::collections::BTreeMap;
 use std::str::FromStr;
 
-use anyhow::anyhow;
-
-use errors::AnyhowResult;
+use crate::error::internal_error::InternalError;
 use tokens::tokens::anonymous_visitor_tracking::AnonymousVisitorTrackingToken;
 
 /**
@@ -38,18 +36,19 @@ impl AvtCookiePayload {
     }
   }
 
-  pub fn from_map(map: BTreeMap<String, String>) -> AnyhowResult<Self> {
+  pub fn from_map(map: BTreeMap<String, String>) -> Result<Self, InternalError> {
     let avt_token = map.get("avt_token")
-        .ok_or(anyhow!("avt_token not present"))?
-        .to_string();
+        .ok_or_else(|| InternalError::VisitorCookieMissingField("avt_token"))?;
 
     let cookie_version = map
         .get("cookie_version")
-        .ok_or(anyhow!("avt_token not present"))?;
+        .ok_or_else(|| InternalError::VisitorCookieMissingField("cookie_version"))?;
 
-    let avt_token = AnonymousVisitorTrackingToken::new_from_str(&avt_token);
+    let avt_token = AnonymousVisitorTrackingToken::new_from_str(avt_token);
 
-    let cookie_version = u32::from_str(cookie_version)?;
+    let cookie_version = u32::from_str(cookie_version)
+        .map_err(|e| InternalError::VisitorCookieError(
+          format!("invalid integer for cookie_version: {:?}, version: {}", e, cookie_version)))?;
 
     Ok(AvtCookiePayload {
       avt_token,

crates/service/web/storyteller_web/src/main.rs

@@ -92,6 +92,7 @@ use crate::util::troll_user_bans::troll_user_ban_list::TrollUserBanList;
 
 pub mod billing;
 pub mod configs;
+pub mod error;
 pub mod http_server;
 pub mod state;
 pub mod threads;

frontend/apps/editor3d/app/src/Helpers/CanvasHelpers.ts

@@ -13,3 +13,17 @@ export const normalizeCanvas = (canvas: HTMLCanvasElement, width: number, height
   ctx.drawImage(canvas, 0, 0, width, height);
   return newCanvas;
 }
+
+export const drawAlphaMask = (canvas: OffscreenCanvas, width: number, height: number) => {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
+  }
+
+  // Fill the entire screen with black and composite to keep non-transparent pixels
+  ctx.save();
+  ctx.globalCompositeOperation = "source-in";
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, width, height);
+  ctx.restore();
+}

frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx

@@ -154,6 +154,9 @@ export const TopBar = ({ pageName, loginSignUpPressed }: Props) => {
         url,
         mediaToken: mediaId || "",
       };
+
+      // Add it to state history
+      useEditStore.getState().addHistoryImageBundle({ images: [baseImage] });
       useEditStore.getState().setBaseImageInfo(baseImage);
 
       // Close gallery modal and lightbox if open

frontend/apps/editor3d/app/src/pages/PageEdit/HistoryStack.tsx

@@ -6,7 +6,7 @@ import {
   faTrashXmark,
   faXmark,
 } from "@fortawesome/pro-solid-svg-icons";
-import { useRef, useState } from "react";
+import { Fragment, useRef, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { BaseSelectorImage } from "./BaseImageSelector";
 import { Tooltip } from "@storyteller/ui-tooltip";
@@ -23,21 +23,18 @@ export interface ImageBundle {
 interface HistoryStackProps {
   onClear: () => void;
   onImageSelect?: (image: BaseSelectorImage) => void;
-  startingBundles: ImageBundle[];
+  imageBundles: ImageBundle[];
+  onNewImageBundle?: (newBundle: ImageBundle) => void;
+  selectedImageToken?: string;
 }
 
 export const HistoryStack = ({
   onClear,
-  onImageSelect = () => {},
-  startingBundles = [],
+  onImageSelect = () => { },
+  imageBundles,
+  onNewImageBundle = () => { },
+  selectedImageToken
 }: HistoryStackProps) => {
-  const [imageBundles, setImageBundles] =
-    useState<ImageBundle[]>(startingBundles);
-  const [selectedImageToken, setSelectedImageToken] = useState<string | null>(
-    startingBundles.length > 0 && startingBundles[0].images.length > 0
-      ? startingBundles[0].images[0].mediaToken
-      : null,
-  );
   useImageEditCompleteEvent(async (event) => {
     const newBundle: ImageBundle = {
       images: event.edited_images.map(
@@ -49,12 +46,7 @@ export const HistoryStack = ({
       ),
     };
 
-    setImageBundles([...imageBundles, newBundle]);
-    const newlySelected = newBundle.images[0];
-    if (newlySelected) {
-      setSelectedImageToken(newlySelected.mediaToken);
-      onImageSelect(newlySelected);
-    }
+    onNewImageBundle(newBundle);
   });
 
   // This is used to force image reloads in different sessions
@@ -62,26 +54,23 @@ export const HistoryStack = ({
   const sessionRandBuster = useRef(Math.random());
 
   const handleClear = () => {
-    setImageBundles(startingBundles);
-    setSelectedImageToken(null);
     onClear();
   };
 
   return (
     <div className="h-auto w-20 rounded-lg">
-      <div className="glass max-h-1/2 flex flex-col-reverse items-center justify-center gap-2 overflow-y-auto rounded-lg p-1.5">
+      <div className={"glass max-h-[50vh] flex flex-col-reverse items-center justify-center gap-2 overflow-y-auto rounded-lg p-1.5"}>
         {imageBundles.map((bundle, index) => (
-          <>
-            {bundle.images.map((image, imgIndex) => (
+          <Fragment key={index}>
+            {bundle.images.map((image) => (
               <Button
-                key={imgIndex}
+                key={image.mediaToken}
                 className={twMerge(
                   "relative aspect-square h-full w-full border-2 bg-transparent p-0 hover:bg-transparent hover:opacity-80",
                   selectedImageToken === image.mediaToken &&
-                    "border-primary hover:opacity-100",
+                  "border-primary hover:opacity-100",
                 )}
                 onClick={() => {
-                  setSelectedImageToken(image.mediaToken);
                   onImageSelect(image);
                 }}
               >
@@ -95,9 +84,9 @@ export const HistoryStack = ({
               </Button>
             ))}
             {index < imageBundles.length - 1 && (
-              <hr className="h-0.5 w-3/4 rounded-md border-none bg-white/10" />
+              <hr className="min-h-0.5 h-0.5 w-3/4 rounded-md border-none bg-white/10" key={"hr" + index} />
             )}
-          </>
+          </Fragment>
         ))}
         <FontAwesomeIcon
           icon={faClockRotateLeft}

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

@@ -10,7 +10,7 @@ import { useUndoRedoHotkeys } from "../PageDraw/hooks/useUndoRedoHotkeys";
 import PromptEditor from "./PromptEditor/PromptEditor";
 import { ActiveEditTool, useEditStore } from "./stores/EditState";
 import { EditPaintSurface } from "./EditPaintSurface";
-import { normalizeCanvas } from "../../Helpers/CanvasHelpers";
+import { drawAlphaMask, normalizeCanvas } from "../../Helpers/CanvasHelpers";
 import { BaseImageSelector, BaseSelectorImage } from "./BaseImageSelector";
 import DrawToolControlBar from "./DrawToolControlBar";
 import {
@@ -27,7 +27,7 @@ const PAGE_ID: ModelPage = ModelPage.ImageEditor;
 const PageEdit = () => {
   //useStateSceneLoader();
 
-  const selectedImageModel : ImageModel | undefined = getSelectedImageModel(PAGE_ID);
+  const selectedImageModel: ImageModel | undefined = getSelectedImageModel(PAGE_ID);
 
   // State for canvas dimensions
   const canvasWidth = useRef<number>(1024);
@@ -46,6 +46,8 @@ const PageEdit = () => {
 
   // Use the Zustand store
   const store = useEditStore();
+  const addHistoryImageBundle = useEditStore((state) => state.addHistoryImageBundle);
+  const historyImageBundles = useEditStore((state) => state.historyImageBundles)
 
   // Pass store actions directly as callbacks
   useDeleteHotkeys({ onDelete: store.deleteSelectedItems });
@@ -154,18 +156,6 @@ const PageEdit = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Auto-fit the canvas when base image is loaded
-  useEffect(() => {
-    if (!store.baseImageBitmap) {
-      console.log("No base image bitmap available, skipping auto-fit");
-      return;
-    }
-
-    // When baseImageBitmap changes from null to an actual image, call onFitPressed
-    // Use a slight delay to ensure the image dimensions are properly loaded
-    onFitPressed();
-  }, [onFitPressed, store.baseImageBitmap]);
-
   // Create a function to use the left layer ref and download the bitmap from it
   const getMaskArrayBuffer = async (): Promise<Uint8Array> => {
     if (
@@ -197,6 +187,10 @@ const PageEdit = () => {
       rect.height(),
     );
 
+    // Convert colored canvas to alpha mask
+    // NOTE: This isn't needed because the tauri backend uses the alpha channel anyway
+    // drawAlphaMask(fittedCanvas, rect.width(), rect.height());
+
     const blob = await fittedCanvas.convertToBlob({ type: "image/png" });
     const arrayBuffer = await blob.arrayBuffer();
 
@@ -247,11 +241,14 @@ const PageEdit = () => {
   //const supportsMaskedInpainting = modelConfig?.tags?.includes(ModelTag.MaskedInpainting) ?? false;
   const supportsMaskedInpainting = selectedImageModel?.usesInpaintingMask ?? false;
 
-  if (!supportsMaskedInpainting && (store.activeTool !== "select" || store.lineNodes.length > 0)) {
-    // TODO: Implement a new mode for unsupported masking and hide the nodes layer instead of clearing
-    store.setActiveTool("select");
-    store.clearLineNodes();
-  }
+  useEffect(() => {
+    if (!supportsMaskedInpainting && (store.activeTool !== "select" || store.lineNodes.length > 0)) {
+      // TODO: Implement a new mode for unsupported masking and hide the nodes layer instead of clearing
+      store.setActiveTool("select");
+      store.clearLineNodes();
+    }
+  }, [store, supportsMaskedInpainting]);
+
 
   /*
     *
@@ -273,6 +270,7 @@ const PageEdit = () => {
       >
         <BaseImageSelector
           onImageSelect={(image: BaseSelectorImage) => {
+            addHistoryImageBundle({ images: [image] });
             store.setBaseImageInfo(image);
           }}
           showLoading={
@@ -305,11 +303,13 @@ const PageEdit = () => {
           onClear={() => {
             store.RESET();
           }}
-          startingBundles={[{ images: [store.baseImageInfo] } as ImageBundle]}
+          imageBundles={historyImageBundles}
           onImageSelect={(baseImage) => {
             store.clearLineNodes();
             store.setBaseImageInfo(baseImage);
           }}
+          onNewImageBundle={addHistoryImageBundle}
+          selectedImageToken={store.baseImageInfo?.mediaToken}
         />
       </div>
       <div
@@ -374,7 +374,7 @@ const PageEdit = () => {
             }}
             //fillColor={store.fillColor}
             activeTool={store.activeTool}
-            brushColor={store.brushColor}
+            brushColor={"rgba(39, 187, 245, 0.54)"}
             brushSize={store.brushSize}
             onSelectionChange={setIsSelecting}
             stageRef={stageRef}

frontend/apps/editor3d/app/src/pages/PageEdit/stores/EditState.ts

@@ -3,6 +3,7 @@ import { LineNode, generateId } from "~/pages/PageDraw/stores/SceneState";
 import { Node } from "~/pages/PageDraw/Node";
 import { BaseSelectorImage } from "../BaseImageSelector";
 import { FetchProxy } from "libs/tauri-utils/src/lib/FetchProxy";
+import { ImageBundle } from "../HistoryStack";
 
 export type ActiveEditTool = "select" | "edit" | "expand";
 export type EditOperation = "add" | "minus";
@@ -126,6 +127,11 @@ interface EditState {
   // pushHistory: () => void;
   // clearHistory: () => void;
   RESET: () => void;
+
+  // For the history stack
+  historyImageBundles: ImageBundle[];
+  clearHistoryImages: () => void;
+  addHistoryImageBundle: (bundle: ImageBundle) => void;
 }
 
 // Add a flag to prevent saving state during restoration
@@ -172,6 +178,9 @@ export const useEditStore = create<EditState>((set, get, store) => ({
   baseImageInfo: null,
   baseImageBitmap: null,
 
+  // History stack state
+  historyImageBundles: [],
+
   // Actions
   addNode: (node: Node) => {
     set((state) => {
@@ -1009,5 +1018,13 @@ export const useEditStore = create<EditState>((set, get, store) => ({
 
   RESET: () => {
     set(store.getInitialState());
-  }
+  },
+
+  clearHistoryImages: () => {
+    set({ historyImageBundles: [] });
+  },
+
+  addHistoryImageBundle(bundle) {
+    set((state) => ({ historyImageBundles: [...state.historyImageBundles, bundle] }));
+  },
 }));