fix(ui): add initial image dimensions to state

We need to access the initial image dimensions during the creation of the `ImageToImage` graph to determine if we need to resize the image.

Because the `initialImage` is now just an image name, we need to either store (easy) or dynamically retrieve its dimensions during graph creation (a bit less easy).

Took the easiest path. May need to revise this in the future.

invokeai/frontend/web/src/app/contexts/DeleteImageContext.tsx

@@ -35,7 +35,7 @@ export const selectImageUsage = createSelector(
     (state: RootState, image_name?: string) => image_name,
   ],
   (generation, canvas, nodes, controlNet, image_name) => {
-    const isInitialImage = generation.initialImage === image_name;
+    const isInitialImage = generation.initialImage?.imageName === image_name;
 
     const isCanvasImage = canvas.layerState.objects.some(
       (obj) => obj.kind === 'image' && obj.imageName === image_name

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

@@ -46,7 +46,12 @@ export const addImageUploadedFulfilledListener = () => {
 
       if (postUploadAction?.type === 'SET_CONTROLNET_IMAGE') {
         const { controlNetId } = postUploadAction;
-        dispatch(controlNetImageChanged({ controlNetId, controlImage: image }));
+        dispatch(
+          controlNetImageChanged({
+            controlNetId,
+            controlImage: image.image_name,
+          })
+        );
         return;
       }
 

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

@@ -25,29 +25,29 @@ const selectAllUsedImages = createSelector(
     const allUsedImages: string[] = [];
 
     if (generation.initialImage) {
-      allUsedImages.push(generation.initialImage);
+      allUsedImages.push(generation.initialImage.imageName);
     }
 
     canvas.layerState.objects.forEach((obj) => {
       if (obj.kind === 'image') {
-        allUsedImages.push(obj.image.image_name);
+        allUsedImages.push(obj.imageName);
       }
     });
 
     nodes.nodes.forEach((node) => {
       forEach(node.data.inputs, (input) => {
         if (input.type === 'image' && input.value) {
-          allUsedImages.push(input.value.image_name);
+          allUsedImages.push(input.value);
         }
       });
     });
 
     forEach(controlNet.controlNets, (c) => {
       if (c.controlImage) {
-        allUsedImages.push(c.controlImage.image_name);
+        allUsedImages.push(c.controlImage);
       }
       if (c.processedControlImage) {
-        allUsedImages.push(c.processedControlImage.image_name);
+        allUsedImages.push(c.processedControlImage);
       }
     });
 

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildImageToImageGraph.ts

@@ -353,7 +353,7 @@ export const buildImageToImageGraph = (state: RootState): Graph => {
       id: RESIZE,
       type: 'img_resize',
       image: {
-        image_name: initialImage,
+        image_name: initialImage.imageName,
       },
       is_intermediate: true,
       height,
@@ -390,7 +390,7 @@ export const buildImageToImageGraph = (state: RootState): Graph => {
   } else {
     // We are not resizing, so we need to set the image on the `IMAGE_TO_LATENTS` node explicitly
     set(graph.nodes[IMAGE_TO_LATENTS], 'image', {
-      image_name: initialImage,
+      image_name: initialImage.imageName,
     });
 
     // Pass the image's dimensions to the `NOISE` node

invokeai/frontend/web/src/features/nodes/util/nodeBuilders/buildImageToImageNode.ts

@@ -57,7 +57,7 @@ export const buildImg2ImgNode = (
     }
 
     imageToImageNode.image = {
-      image_name: initialImage,
+      image_name: initialImage.imageName,
     };
   }
 

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx

@@ -34,14 +34,14 @@ const InitialImagePreview = () => {
     isLoading,
     isError,
     isSuccess,
-  } = useGetImageDTOQuery(initialImage ?? skipToken);
+  } = useGetImageDTOQuery(initialImage?.imageName ?? skipToken);
 
   const handleDrop = useCallback(
-    ({ image_name }: ImageDTO) => {
+    (droppedImage: ImageDTO) => {
-      if (image_name === initialImage) {
+      if (droppedImage.image_name === initialImage?.imageName) {
         return;
       }
-      dispatch(initialImageChanged(image_name));
+      dispatch(initialImageChanged(droppedImage));
     },
     [dispatch, initialImage]
   );

invokeai/frontend/web/src/features/parameters/store/generationSlice.ts

@@ -24,7 +24,7 @@ export interface GenerationState {
   height: HeightParam;
   img2imgStrength: StrengthParam;
   infillMethod: string;
-  initialImage?: string;
+  initialImage?: { imageName: string; width: number; height: number };
   iterations: number;
   perlin: number;
   positivePrompt: PositivePromptParam;
@@ -211,8 +211,9 @@ export const generationSlice = createSlice({
     setShouldUseNoiseSettings: (state, action: PayloadAction<boolean>) => {
       state.shouldUseNoiseSettings = action.payload;
     },
-    initialImageChanged: (state, action: PayloadAction<string>) => {
+    initialImageChanged: (state, action: PayloadAction<ImageDTO>) => {
-      state.initialImage = action.payload;
+      const { image_name, width, height } = action.payload;
+      state.initialImage = { imageName: image_name, width, height };
     },
     modelSelected: (state, action: PayloadAction<string>) => {
       state.model = action.payload;