feat(ui): update image urls on connect (#3507)

* feat(ui): update image urls on connect

Add `updateImageUrlsOnConnect` RTK listener:
- requests URLs for *every* image the app knows about, on connect: gallery, selectedImage, initialImage, canvas images, nodes images, controlnet images
- only fires when `shouldUpdateImagesOnConnect` config is enabled

* remove prop

---------

Co-authored-by: Mary Hipp <maryhipp@Marys-MacBook-Air.local>

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

@@ -72,6 +72,7 @@ import { addCommitStagingAreaImageListener } from './listeners/addCommitStagingA
 import { addImageCategoriesChangedListener } from './listeners/imageCategoriesChanged';
 import { addControlNetImageProcessedListener } from './listeners/controlNetImageProcessed';
 import { addControlNetAutoProcessListener } from './listeners/controlNetAutoProcess';
+import { addUpdateImageUrlsOnConnectListener } from './listeners/updateImageUrlsOnConnect';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -179,3 +180,6 @@ addImageCategoriesChangedListener();
 // ControlNet
 addControlNetImageProcessedListener();
 addControlNetAutoProcessListener();
+
+// Update image URLs on connect
+addUpdateImageUrlsOnConnectListener();

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

@@ -0,0 +1,93 @@
+import { socketConnected } from 'services/events/actions';
+import { startAppListening } from '..';
+import { createSelector } from '@reduxjs/toolkit';
+import { generationSelector } from 'features/parameters/store/generationSelectors';
+import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import { nodesSelecter } from 'features/nodes/store/nodesSlice';
+import { controlNetSelector } from 'features/controlNet/store/controlNetSlice';
+import { ImageDTO } from 'services/api';
+import { forEach, uniqBy } from 'lodash-es';
+import { imageUrlsReceived } from 'services/thunks/image';
+import { log } from 'app/logging/useLogger';
+import { selectImagesEntities } from 'features/gallery/store/imagesSlice';
+
+const moduleLog = log.child({ namespace: 'images' });
+
+const selectAllUsedImages = createSelector(
+  [
+    generationSelector,
+    canvasSelector,
+    nodesSelecter,
+    controlNetSelector,
+    selectImagesEntities,
+  ],
+  (generation, canvas, nodes, controlNet, imageEntities) => {
+    const allUsedImages: ImageDTO[] = [];
+
+    if (generation.initialImage) {
+      allUsedImages.push(generation.initialImage);
+    }
+
+    canvas.layerState.objects.forEach((obj) => {
+      if (obj.kind === 'image') {
+        allUsedImages.push(obj.image);
+      }
+    });
+
+    nodes.nodes.forEach((node) => {
+      forEach(node.data.inputs, (input) => {
+        if (input.type === 'image' && input.value) {
+          allUsedImages.push(input.value);
+        }
+      });
+    });
+
+    forEach(controlNet.controlNets, (c) => {
+      if (c.controlImage) {
+        allUsedImages.push(c.controlImage);
+      }
+      if (c.processedControlImage) {
+        allUsedImages.push(c.processedControlImage);
+      }
+    });
+
+    forEach(imageEntities, (image) => {
+      if (image) {
+        allUsedImages.push(image);
+      }
+    });
+
+    const uniqueImages = uniqBy(allUsedImages, 'image_name');
+
+    return uniqueImages;
+  }
+);
+
+export const addUpdateImageUrlsOnConnectListener = () => {
+  startAppListening({
+    actionCreator: socketConnected,
+    effect: async (action, { dispatch, getState, take }) => {
+      const state = getState();
+
+      if (!state.config.shouldUpdateImagesOnConnect) {
+        return;
+      }
+
+      const allUsedImages = selectAllUsedImages(state);
+
+      moduleLog.trace(
+        { data: allUsedImages },
+        `Fetching new image URLs for ${allUsedImages.length} images`
+      );
+
+      allUsedImages.forEach(({ image_name, image_origin }) => {
+        dispatch(
+          imageUrlsReceived({
+            imageName: image_name,
+            imageOrigin: image_origin,
+          })
+        );
+      });
+    },
+  });
+};

invokeai/frontend/web/src/app/types/invokeai.ts

@@ -110,7 +110,7 @@ export type AppConfig = {
   /**
    * Whether or not we should update image urls when image loading errors
    */
-  shouldUpdateImageUrlsOnError: boolean;
+  shouldUpdateImagesOnConnect: boolean;
   disabledTabs: InvokeTabName[];
   disabledFeatures: AppFeature[];
   disabledSDFeatures: SDFeature[];

invokeai/frontend/web/src/features/system/store/configSlice.ts

@@ -4,7 +4,7 @@ import { AppConfig, PartialAppConfig } from 'app/types/invokeai';
 import { merge } from 'lodash-es';
 
 export const initialConfigState: AppConfig = {
-  shouldUpdateImageUrlsOnError: false,
+  shouldUpdateImagesOnConnect: false,
   disabledTabs: [],
   disabledFeatures: [],
   disabledSDFeatures: [],