Fixes: outpainting temp images show in gallery

frontend/src/app/socketio/actions.ts

@@ -26,8 +26,8 @@ export const requestNewImages = createAction<GalleryCategory>(
 export const cancelProcessing = createAction<undefined>(
   'socketio/cancelProcessing'
 );
-export const uploadImage = createAction<InvokeAI.UploadImagePayload>('socketio/uploadImage');
-export const uploadMaskImage = createAction<File>('socketio/uploadMaskImage');
+// export const uploadImage = createAction<InvokeAI.UploadImagePayload>('socketio/uploadImage');
+// export const uploadMaskImage = createAction<File>('socketio/uploadMaskImage');
 
 export const requestSystemConfig = createAction<undefined>(
   'socketio/requestSystemConfig'

frontend/src/app/socketio/emitters.ts

@@ -180,13 +180,13 @@ const makeSocketIOEmitters = (
     emitCancelProcessing: () => {
       socketio.emit('cancel');
     },
-    emitUploadImage: (payload: InvokeAI.UploadImagePayload) => {
-      const { file, destination } = payload;
-      socketio.emit('uploadImage', file, file.name, destination);
-    },
-    emitUploadMaskImage: (file: File) => {
-      socketio.emit('uploadMaskImage', file, file.name);
-    },
+    // emitUploadImage: (payload: InvokeAI.UploadImagePayload) => {
+    //   const { file, destination } = payload;
+    //   socketio.emit('uploadImage', file, file.name, destination);
+    // },
+    // emitUploadMaskImage: (file: File) => {
+    //   socketio.emit('uploadMaskImage', file, file.name);
+    // },
     emitRequestSystemConfig: () => {
       socketio.emit('requestSystemConfig');
     },

frontend/src/app/socketio/listeners.ts

@@ -103,20 +103,28 @@ const makeSocketIOListeners = (
     onGenerationResult: (data: InvokeAI.ImageResultResponse) => {
       try {
         const { shouldLoopback, activeTab } = getState().options;
+        const { boundingBox: _, generationMode, ...rest } = data;
+
         const newImage = {
           uuid: uuidv4(),
-          ...data,
-          category: 'result',
+          ...rest,
         };
 
-        dispatch(
-          addImage({
-            category: 'result',
-            image: newImage,
-          })
-        );
+        if (['txt2img', 'img2img'].includes(generationMode)) {
+          newImage.category = 'result';
+          dispatch(
+            addImage({
+              category: 'result',
+              image: newImage,
+            })
+          );
+        }
 
-        if (data.generationMode === 'outpainting' && data.boundingBox) {
+        if (
+          ['inpainting', 'outpainting'].includes(generationMode) &&
+          data.boundingBox
+        ) {
+          newImage.category = 'temp';
           const { boundingBox } = data;
           dispatch(
             addImageToOutpainting({
@@ -140,6 +148,8 @@ const makeSocketIOListeners = (
           }
         }
 
+        dispatch(clearIntermediateImage());
+
         dispatch(
           addLogEntry({
             timestamp: dateFormat(new Date(), 'isoDateTime'),
@@ -368,16 +378,16 @@ const makeSocketIOListeners = (
     /**
      * Callback to run when we receive a 'maskImageUploaded' event.
      */
-    onMaskImageUploaded: (data: InvokeAI.ImageUrlResponse) => {
-      const { url } = data;
-      dispatch(setMaskPath(url));
-      dispatch(
-        addLogEntry({
-          timestamp: dateFormat(new Date(), 'isoDateTime'),
-          message: `Mask image uploaded: ${url}`,
-        })
-      );
-    },
+    // onMaskImageUploaded: (data: InvokeAI.ImageUrlResponse) => {
+    //   const { url } = data;
+    //   dispatch(setMaskPath(url));
+    //   dispatch(
+    //     addLogEntry({
+    //       timestamp: dateFormat(new Date(), 'isoDateTime'),
+    //       message: `Mask image uploaded: ${url}`,
+    //     })
+    //   );
+    // },
     onSystemConfig: (data: InvokeAI.SystemConfig) => {
       dispatch(setSystemConfig(data));
     },

frontend/src/app/socketio/middleware.ts

@@ -44,7 +44,7 @@ export const socketioMiddleware = () => {
       onProcessingCanceled,
       onImageDeleted,
       // onImageUploaded,
-      onMaskImageUploaded,
+      // onMaskImageUploaded,
       onSystemConfig,
       onModelChanged,
       onModelChangeFailed,
@@ -58,8 +58,8 @@ export const socketioMiddleware = () => {
       emitRequestImages,
       emitRequestNewImages,
       emitCancelProcessing,
-      emitUploadImage,
-      emitUploadMaskImage,
+      // emitUploadImage,
+      // emitUploadMaskImage,
       emitRequestSystemConfig,
       emitRequestModelChange,
     } = makeSocketIOEmitters(store, socketio);
@@ -108,9 +108,9 @@ export const socketioMiddleware = () => {
       //   onImageUploaded(data);
       // });
 
-      socketio.on('maskImageUploaded', (data: InvokeAI.ImageUrlResponse) => {
-        onMaskImageUploaded(data);
-      });
+      // socketio.on('maskImageUploaded', (data: InvokeAI.ImageUrlResponse) => {
+      //   onMaskImageUploaded(data);
+      // });
 
       socketio.on('systemConfig', (data: InvokeAI.SystemConfig) => {
         onSystemConfig(data);
@@ -166,15 +166,15 @@ export const socketioMiddleware = () => {
         break;
       }
 
-      case 'socketio/uploadImage': {
-        emitUploadImage(action.payload);
-        break;
-      }
+      // case 'socketio/uploadImage': {
+      //   emitUploadImage(action.payload);
+      //   break;
+      // }
 
-      case 'socketio/uploadMaskImage': {
-        emitUploadMaskImage(action.payload);
-        break;
-      }
+      // case 'socketio/uploadMaskImage': {
+      //   emitUploadMaskImage(action.payload);
+      //   break;
+      // }
 
       case 'socketio/requestSystemConfig': {
         emitRequestSystemConfig();

frontend/src/features/canvas/util/layerToDataURL.ts

@@ -1,6 +1,6 @@
 import Konva from 'konva';
 
-const layerToBlob = async (layer: Konva.Layer, stageScale: number) => {
+const layerToDataURL = (layer: Konva.Layer, stageScale: number) => {
   const tempScale = layer.scale();
 
   const { x: relativeX, y: relativeY } = layer.getClientRect({
@@ -15,12 +15,12 @@ const layerToBlob = async (layer: Konva.Layer, stageScale: number) => {
 
   const clientRect = layer.getClientRect();
 
-  const blob = await layer.toBlob(clientRect);
+  const dataURL = layer.toDataURL(clientRect);
 
   // Unscale the canvas
   layer.scale(tempScale);
 
-  return { blob, relativeX, relativeY };
+  return { dataURL, relativeX, relativeY };
 };
 
-export default layerToBlob;
+export default layerToDataURL;

frontend/src/features/canvas/util/mergeAndUploadCanvas.ts

@@ -4,7 +4,7 @@ import Konva from 'konva';
 import { MutableRefObject } from 'react';
 import * as InvokeAI from 'app/invokeai';
 import { v4 as uuidv4 } from 'uuid';
-import layerToBlob from './layerToBlob';
+import layerToDataURL from './layerToDataURL';
 
 export const mergeAndUploadCanvas = createAsyncThunk(
   'canvas/mergeAndUploadCanvas',
@@ -25,16 +25,17 @@ export const mergeAndUploadCanvas = createAsyncThunk(
 
     if (!canvasImageLayerRef.current) return;
 
-    const { blob, relativeX, relativeY } = await layerToBlob(
+    const { dataURL, relativeX, relativeY } = layerToDataURL(
       canvasImageLayerRef.current,
       stageScale
     );
 
-    if (!blob) return;
+    if (!dataURL) return;
 
     const formData = new FormData();
 
-    formData.append('file', blob as Blob, 'merged_canvas.png');
+    formData.append('dataURL', dataURL);
+    formData.append('filename', 'merged_canvas.png');
     formData.append('kind', saveToGallery ? 'result' : 'temp');
 
     const response = await fetch(window.location.origin + '/upload', {