feat(ui): improve image metadata handling

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -36,6 +36,10 @@ import { addSocketDisconnectedListener } from './listeners/socketio/socketDiscon
 import { addSocketSubscribedListener } from './listeners/socketio/socketSubscribed';
 import { addSocketUnsubscribedListener } from './listeners/socketio/socketUnsubscribed';
 import { addSessionReadyToInvokeListener } from './listeners/sessionReadyToInvoke';
+import {
+  addImageMetadataReceivedFulfilledListener,
+  addImageMetadataReceivedRejectedListener,
+} from './listeners/imageMetadataReceived';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -67,6 +71,10 @@ addImageDeletedPendingListener();
 addImageDeletedFulfilledListener();
 addImageDeletedRejectedListener();
 
+// Image metadata
+addImageMetadataReceivedFulfilledListener();
+addImageMetadataReceivedRejectedListener();
+
 // Invoking stuff
 addUserInvokedCanvasListener();
 addUserInvokedNodesListener();

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageMetadataReceived.ts

@@ -0,0 +1,49 @@
+import { log } from 'app/logging/useLogger';
+import { startAppListening } from '..';
+import { imageMetadataReceived } from 'services/thunks/image';
+import {
+  ResultsImageDTO,
+  resultsAdapter,
+} from 'features/gallery/store/resultsSlice';
+import {
+  UploadsImageDTO,
+  uploadsAdapter,
+} from 'features/gallery/store/uploadsSlice';
+
+const moduleLog = log.child({ namespace: 'image' });
+
+export const addImageMetadataReceivedFulfilledListener = () => {
+  startAppListening({
+    actionCreator: imageMetadataReceived.fulfilled,
+    effect: (action, { getState, dispatch }) => {
+      const image = action.payload;
+      moduleLog.debug({ data: { image } }, 'Image metadata received');
+
+      if (image.image_type === 'results') {
+        resultsAdapter.upsertOne(
+          getState().results,
+          action.payload as ResultsImageDTO
+        );
+      }
+
+      if (image.image_type === 'uploads') {
+        uploadsAdapter.upsertOne(
+          getState().uploads,
+          action.payload as UploadsImageDTO
+        );
+      }
+    },
+  });
+};
+
+export const addImageMetadataReceivedRejectedListener = () => {
+  startAppListening({
+    actionCreator: imageMetadataReceived.rejected,
+    effect: (action, { getState, dispatch }) => {
+      moduleLog.debug(
+        { data: { image: action.meta.arg } },
+        'Problem receiving image metadata'
+      );
+    },
+  });
+};

invokeai/frontend/web/src/features/gallery/store/resultsSlice.ts

@@ -69,17 +69,6 @@ const resultsSlice = createSlice({
       state.isLoading = false;
     });
 
-    /**
-     * Image Metadata Received - FULFILLED
-     */
-    builder.addCase(imageMetadataReceived.fulfilled, (state, action) => {
-      const { image_type } = action.payload;
-
-      if (image_type === 'results') {
-        resultsAdapter.upsertOne(state, action.payload as ResultsImageDTO);
-      }
-    });
-
     /**
      * Image URLs Received - FULFILLED
      */

invokeai/frontend/web/src/services/thunks/image.ts

@@ -2,7 +2,6 @@ import { log } from 'app/logging/useLogger';
 import { createAppAsyncThunk } from 'app/store/storeUtils';
 import { InvokeTabName } from 'features/ui/store/tabMap';
 import { ImagesService } from 'services/api';
-import { getHeaders } from 'services/util/getHeaders';
 
 const imagesLog = log.child({ namespace: 'image' });
 
@@ -81,7 +80,7 @@ export const imageUpdated = createAppAsyncThunk(
   async (arg: ImageUpdatedArg) => {
     const response = await ImagesService.updateImage(arg);
 
-    imagesLog.debug({ arg, response }, 'Image updated');
+    imagesLog.debug({ data: { arg, response } }, 'Image updated');
 
     return response;
   }