feat(ui): improve image urls handling

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

@@ -40,6 +40,10 @@ import {
   addImageMetadataReceivedFulfilledListener,
   addImageMetadataReceivedRejectedListener,
 } from './listeners/imageMetadataReceived';
+import {
+  addImageUrlsReceivedFulfilledListener,
+  addImageUrlsReceivedRejectedListener,
+} from './listeners/imageUrlsReceived';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -75,6 +79,10 @@ addImageDeletedRejectedListener();
 addImageMetadataReceivedFulfilledListener();
 addImageMetadataReceivedRejectedListener();
 
+// Image URLs
+addImageUrlsReceivedFulfilledListener();
+addImageUrlsReceivedRejectedListener();
+
 // Invoking stuff
 addUserInvokedCanvasListener();
 addUserInvokedNodesListener();

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

@@ -0,0 +1,51 @@
+import { log } from 'app/logging/useLogger';
+import { startAppListening } from '..';
+import { imageUrlsReceived } from 'services/thunks/image';
+import { resultsAdapter } from 'features/gallery/store/resultsSlice';
+import { uploadsAdapter } from 'features/gallery/store/uploadsSlice';
+
+const moduleLog = log.child({ namespace: 'image' });
+
+export const addImageUrlsReceivedFulfilledListener = () => {
+  startAppListening({
+    actionCreator: imageUrlsReceived.fulfilled,
+    effect: (action, { getState, dispatch }) => {
+      const image = action.payload;
+      moduleLog.debug({ data: { image } }, 'Image URLs received');
+
+      const { image_type, image_name, image_url, thumbnail_url } = image;
+
+      if (image_type === 'results') {
+        resultsAdapter.updateOne(getState().results, {
+          id: image_name,
+          changes: {
+            image_url,
+            thumbnail_url,
+          },
+        });
+      }
+
+      if (image_type === 'uploads') {
+        uploadsAdapter.updateOne(getState().uploads, {
+          id: image_name,
+          changes: {
+            image_url,
+            thumbnail_url,
+          },
+        });
+      }
+    },
+  });
+};
+
+export const addImageUrlsReceivedRejectedListener = () => {
+  startAppListening({
+    actionCreator: imageUrlsReceived.rejected,
+    effect: (action, { getState, dispatch }) => {
+      moduleLog.debug(
+        { data: { image: action.meta.arg } },
+        'Problem getting image URLs'
+      );
+    },
+  });
+};

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

@@ -4,11 +4,6 @@ import {
   receivedResultImagesPage,
   IMAGES_PER_PAGE,
 } from 'services/thunks/gallery';
-import {
-  imageDeleted,
-  imageMetadataReceived,
-  imageUrlsReceived,
-} from 'services/thunks/image';
 import { ImageDTO } from 'services/api';
 import { dateComparator } from 'common/util/dateComparator';
 
@@ -68,24 +63,6 @@ const resultsSlice = createSlice({
       state.nextPage = items.length < IMAGES_PER_PAGE ? page : page + 1;
       state.isLoading = false;
     });
-
-    /**
-     * Image URLs Received - FULFILLED
-     */
-    builder.addCase(imageUrlsReceived.fulfilled, (state, action) => {
-      const { image_name, image_type, image_url, thumbnail_url } =
-        action.payload;
-
-      if (image_type === 'results') {
-        resultsAdapter.updateOne(state, {
-          id: image_name,
-          changes: {
-            image_url: image_url,
-            thumbnail_url: thumbnail_url,
-          },
-        });
-      }
-    });
   },
 });
 

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

@@ -5,7 +5,6 @@ import {
   receivedUploadImagesPage,
   IMAGES_PER_PAGE,
 } from 'services/thunks/gallery';
-import { imageDeleted, imageUrlsReceived } from 'services/thunks/image';
 import { ImageDTO } from 'services/api';
 import { dateComparator } from 'common/util/dateComparator';
 
@@ -65,24 +64,6 @@ const uploadsSlice = createSlice({
       state.nextPage = items.length < IMAGES_PER_PAGE ? page : page + 1;
       state.isLoading = false;
     });
-
-    /**
-     * Image URLs Received - FULFILLED
-     */
-    builder.addCase(imageUrlsReceived.fulfilled, (state, action) => {
-      const { image_name, image_type, image_url, thumbnail_url } =
-        action.payload;
-
-      if (image_type === 'uploads') {
-        uploadsAdapter.updateOne(state, {
-          id: image_name,
-          changes: {
-            image_url: image_url,
-            thumbnail_url: thumbnail_url,
-          },
-        });
-      }
-    });
   },
 });
 

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

@@ -1,10 +1,7 @@
-import { log } from 'app/logging/useLogger';
 import { createAppAsyncThunk } from 'app/store/storeUtils';
 import { InvokeTabName } from 'features/ui/store/tabMap';
 import { ImagesService } from 'services/api';
 
-const imagesLog = log.child({ namespace: 'image' });
-
 type imageUrlsReceivedArg = Parameters<
   (typeof ImagesService)['getImageUrls']
 >[0];
@@ -16,7 +13,6 @@ export const imageUrlsReceived = createAppAsyncThunk(
   'api/imageUrlsReceived',
   async (arg: imageUrlsReceivedArg) => {
     const response = await ImagesService.getImageUrls(arg);
-    imagesLog.info({ arg, response }, 'Received image urls');
     return response;
   }
 );
@@ -32,7 +28,6 @@ export const imageMetadataReceived = createAppAsyncThunk(
   'api/imageMetadataReceived',
   async (arg: imageMetadataReceivedArg) => {
     const response = await ImagesService.getImageMetadata(arg);
-    imagesLog.info({ arg, response }, 'Received image record');
     return response;
   }
 );
@@ -52,7 +47,6 @@ export const imageUploaded = createAppAsyncThunk(
     // strip out `activeTabName` from arg - the route does not need it
     const { activeTabName, ...rest } = arg;
     const response = await ImagesService.uploadImage(rest);
-
     return response;
   }
 );
@@ -79,9 +73,6 @@ export const imageUpdated = createAppAsyncThunk(
   'api/imageUpdated',
   async (arg: ImageUpdatedArg) => {
     const response = await ImagesService.updateImage(arg);
-
-    imagesLog.debug({ data: { arg, response } }, 'Image updated');
-
     return response;
   }
 );