fix(ui): fix missing images not handled

- Reset init image, control adapter images, and node image fields when their selected image fails to load
- Only do this if the app is connected via socket (this indicates that the image is "really" gone, and there isn't just a transient network issue)

It's possible for image parameters/nodes/states to have reference a deleted image. For example, a resize image node might have an image set on it, and the workflow saved. The workflow contains a hard reference to that image.

The image is deleted and the workflow loaded again later. The deleted image is still in that workflow, but the app doesn't detect that. The result is that the workflow/graph appears to be valid, but will fail on invoke.

This creates a really confusing user experience, where when somebody shares a workflow with an image baked into it, and another person opens it, everything *looks* ok, but the workflow fails with a mysterious error about a missing image.

The problem affects node images, control adapter images and the img2img init image. Resetting the image when it fails to load *and* socket is connected resolves this in a simple way.

The problem also affects canvas images, but we have handle that by displaying an error fallback image, so no change is made there.

invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx

@@ -5,14 +5,19 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIDndImage from 'common/components/IAIDndImage';
+import IAIDndImageIcon from 'common/components/IAIDndImageIcon';
 import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
+import { useControlAdapterControlImage } from 'features/controlAdapters/hooks/useControlAdapterControlImage';
+import { useControlAdapterProcessedControlImage } from 'features/controlAdapters/hooks/useControlAdapterProcessedControlImage';
+import { useControlAdapterProcessorType } from 'features/controlAdapters/hooks/useControlAdapterProcessorType';
+import { controlAdapterImageChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
 import {
   TypesafeDraggableData,
   TypesafeDroppableData,
 } from 'features/dnd/types';
 import { setHeight, setWidth } from 'features/parameters/store/generationSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { memo, useCallback, useMemo, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaRulerVertical, FaSave, FaUndo } from 'react-icons/fa';
 import {
@@ -22,11 +27,6 @@ import {
   useRemoveImageFromBoardMutation,
 } from 'services/api/endpoints/images';
 import { PostUploadAction } from 'services/api/types';
-import IAIDndImageIcon from 'common/components/IAIDndImageIcon';
-import { controlAdapterImageChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
-import { useControlAdapterControlImage } from 'features/controlAdapters/hooks/useControlAdapterControlImage';
-import { useControlAdapterProcessedControlImage } from 'features/controlAdapters/hooks/useControlAdapterProcessedControlImage';
-import { useControlAdapterProcessorType } from 'features/controlAdapters/hooks/useControlAdapterProcessorType';
 
 type Props = {
   id: string;
@@ -35,13 +35,15 @@ type Props = {
 
 const selector = createSelector(
   stateSelector,
-  ({ controlAdapters, gallery }) => {
+  ({ controlAdapters, gallery, system }) => {
     const { pendingControlImages } = controlAdapters;
     const { autoAddBoardId } = gallery;
+    const { isConnected } = system;
 
     return {
       pendingControlImages,
       autoAddBoardId,
+      isConnected,
     };
   },
   defaultSelectorOptions
@@ -55,18 +57,19 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
 
-  const { pendingControlImages, autoAddBoardId } = useAppSelector(selector);
+  const { pendingControlImages, autoAddBoardId, isConnected } =
+    useAppSelector(selector);
   const activeTabName = useAppSelector(activeTabNameSelector);
 
   const [isMouseOverImage, setIsMouseOverImage] = useState(false);
 
-  const { currentData: controlImage } = useGetImageDTOQuery(
-    controlImageName ?? skipToken
-  );
+  const { currentData: controlImage, isError: isErrorControlImage } =
+    useGetImageDTOQuery(controlImageName ?? skipToken);
 
-  const { currentData: processedControlImage } = useGetImageDTOQuery(
-    processedControlImageName ?? skipToken
-  );
+  const {
+    currentData: processedControlImage,
+    isError: isErrorProcessedControlImage,
+  } = useGetImageDTOQuery(processedControlImageName ?? skipToken);
 
   const [changeIsIntermediate] = useChangeImageIsIntermediateMutation();
   const [addToBoard] = useAddImageToBoardMutation();
@@ -158,6 +161,17 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
     !pendingControlImages.includes(id) &&
     processorType !== 'none';
 
+  useEffect(() => {
+    if (isConnected && (isErrorControlImage || isErrorProcessedControlImage)) {
+      handleResetControlImage();
+    }
+  }, [
+    handleResetControlImage,
+    isConnected,
+    isErrorControlImage,
+    isErrorProcessedControlImage,
+  ]);
+
   return (
     <Flex
       onMouseEnter={handleMouseEnter}

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldInputComponent.tsx

@@ -1,6 +1,6 @@
 import { Flex, Text } from '@chakra-ui/react';
 import { skipToken } from '@reduxjs/toolkit/dist/query';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIDndImage from 'common/components/IAIDndImage';
 import IAIDndImageIcon from 'common/components/IAIDndImageIcon';
 import {
@@ -13,7 +13,7 @@ import {
   ImageFieldInputTemplate,
 } from 'features/nodes/types/field';
 import { FieldComponentProps } from './types';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FaUndo } from 'react-icons/fa';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
@@ -24,8 +24,8 @@ const ImageFieldInputComponent = (
 ) => {
   const { nodeId, field } = props;
   const dispatch = useAppDispatch();
-
-  const { currentData: imageDTO } = useGetImageDTOQuery(
+  const isConnected = useAppSelector((state) => state.system.isConnected);
+  const { currentData: imageDTO, isError } = useGetImageDTOQuery(
     field.value?.image_name ?? skipToken
   );
 
@@ -67,6 +67,12 @@ const ImageFieldInputComponent = (
     [nodeId, field.name]
   );
 
+  useEffect(() => {
+    if (isConnected && isError) {
+      handleReset();
+    }
+  }, [handleReset, isConnected, isError]);
+
   return (
     <Flex
       className="nodrag"

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

@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { skipToken } from '@reduxjs/toolkit/dist/query';
 import { stateSelector } from 'app/store/store';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIDndImage from 'common/components/IAIDndImage';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
@@ -9,25 +9,30 @@ import {
   TypesafeDraggableData,
   TypesafeDroppableData,
 } from 'features/dnd/types';
-import { memo, useMemo } from 'react';
+import { clearInitialImage } from 'features/parameters/store/generationSlice';
+import { memo, useEffect, useMemo } from 'react';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 
 const selector = createSelector(
   [stateSelector],
   (state) => {
     const { initialImage } = state.generation;
+    const { isConnected } = state.system;
+
     return {
       initialImage,
       isResetButtonDisabled: !initialImage,
+      isConnected,
     };
   },
   defaultSelectorOptions
 );
 
 const InitialImage = () => {
-  const { initialImage } = useAppSelector(selector);
+  const dispatch = useAppDispatch();
+  const { initialImage, isConnected } = useAppSelector(selector);
 
-  const { currentData: imageDTO } = useGetImageDTOQuery(
+  const { currentData: imageDTO, isError } = useGetImageDTOQuery(
     initialImage?.imageName ?? skipToken
   );
 
@@ -49,6 +54,13 @@ const InitialImage = () => {
     []
   );
 
+  useEffect(() => {
+    if (isError && isConnected) {
+      // The image doesn't exist, reset init image
+      dispatch(clearInitialImage());
+    }
+  }, [dispatch, isConnected, isError]);
+
   return (
     <IAIDndImage
       imageDTO={imageDTO}