fix(ui): excessive toasts when generating on canvas

- Add `withToast` flag to `uploadImage` util - Skip the toast if this is not set - Use the flag to disable toasts when canvas does internal image-uploading stuff that should be invisible to user
invoke-ai · Nov 7, 2024 · 75acece · 75acece
1 parent a9db2ff
commit 75acece
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 20 deletions.
diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts
@@ -41,26 +41,30 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
 
       log.debug({ imageDTO }, 'Image uploaded');
 
-      const DEFAULT_UPLOADED_TOAST = {
-        id: 'IMAGE_UPLOADED',
-        title: t('toast.imageUploaded'),
-        status: 'success',
-      } as const;
-
-      // default action - just upload and alert user
       const boardId = imageDTO.board_id ?? 'none';
-      if (lastUploadedToastTimeout !== null) {
-        window.clearTimeout(lastUploadedToastTimeout);
+
+      if (action.meta.arg.originalArgs.withToast) {
+        const DEFAULT_UPLOADED_TOAST = {
+          id: 'IMAGE_UPLOADED',
+          title: t('toast.imageUploaded'),
+          status: 'success',
+        } as const;
+
+        // default action - just upload and alert user
+        if (lastUploadedToastTimeout !== null) {
+          window.clearTimeout(lastUploadedToastTimeout);
+        }
+        const toastApi = toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          title: DEFAULT_UPLOADED_TOAST.title,
+          description: getUploadedToastDescription(boardId, state),
+          duration: null, // we will close the toast manually
+        });
+        lastUploadedToastTimeout = window.setTimeout(() => {
+          toastApi.close();
+        }, 3000);
       }
-      const toastApi = toast({
-        ...DEFAULT_UPLOADED_TOAST,
-        title: DEFAULT_UPLOADED_TOAST.title,
-        description: getUploadedToastDescription(boardId, state),
-        duration: null, // we will close the toast manually
-      });
-      lastUploadedToastTimeout = window.setTimeout(() => {
-        toastApi.close();
-      }, 3000);
+
       /**
        * We only want to change the board and view if this is the first upload of a batch, else we end up hijacking
        * the user's gallery board and view selection:

diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasCompositorModule.ts
@@ -302,6 +302,7 @@ export class CanvasCompositorModule extends CanvasModuleBase {
         is_intermediate: uploadOptions.is_intermediate,
         board_id: uploadOptions.is_intermediate ? undefined : selectAutoAddBoardId(this.manager.store.getState()),
         metadata: uploadOptions.metadata,
+        withToast: false,
       })
     );
     this.$isUploading.set(false);

diff --git a/.../frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts b/.../frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer.ts
@@ -493,6 +493,7 @@ export class CanvasEntityObjectRenderer extends CanvasModuleBase {
       file: new File([blob], `${this.id}_rasterized.png`, { type: 'image/png' }),
       image_category: 'other',
       is_intermediate: true,
+      withToast: false,
     });
     const imageObject = imageDTOToImageObject(imageDTO);
     if (replaceObjects) {

diff --git a/invokeai/frontend/web/src/services/api/endpoints/images.ts b/invokeai/frontend/web/src/services/api/endpoints/images.ts
@@ -271,6 +271,7 @@ export const imagesApi = api.injectEndpoints({
         crop_visible?: boolean;
         metadata?: JsonObject;
         isFirstUploadOfBatch?: boolean;
+        withToast?: boolean;
       }
     >({
       query: ({ file, image_category, is_intermediate, session_id, board_id, crop_visible, metadata }) => {
@@ -629,10 +630,20 @@ export type UploadImageArg = {
   board_id?: string;
   crop_visible?: boolean;
   metadata?: JsonObject;
+  withToast?: boolean;
 };
 
 export const uploadImage = (arg: UploadImageArg): Promise<ImageDTO> => {
-  const { file, image_category, is_intermediate, crop_visible = false, board_id, metadata, session_id } = arg;
+  const {
+    file,
+    image_category,
+    is_intermediate,
+    crop_visible = false,
+    board_id,
+    metadata,
+    session_id,
+    withToast = true,
+  } = arg;
 
   const { dispatch } = getStore();
 
@@ -646,6 +657,7 @@ export const uploadImage = (arg: UploadImageArg): Promise<ImageDTO> => {
         board_id,
         metadata,
         session_id,
+        withToast,
       },
       { track: false }
     )
@@ -657,7 +669,16 @@ export const uploadImages = async (args: UploadImageArg[]): Promise<ImageDTO[]>
   const { dispatch } = getStore();
   const results = await Promise.allSettled(
     args.map((arg, i) => {
-      const { file, image_category, is_intermediate, crop_visible = false, board_id, metadata, session_id } = arg;
+      const {
+        file,
+        image_category,
+        is_intermediate,
+        crop_visible = false,
+        board_id,
+        metadata,
+        session_id,
+        withToast = true,
+      } = arg;
       const req = dispatch(
         imagesApi.endpoints.uploadImage.initiate(
           {
@@ -669,6 +690,7 @@ export const uploadImages = async (args: UploadImageArg[]): Promise<ImageDTO[]>
             metadata,
             session_id,
             isFirstUploadOfBatch: i === 0,
+            withToast,
           },
           { track: false }
         )