Fixes error on missing init/mask image

backend/invoke_ai_web_server.py

@@ -390,14 +390,14 @@ class InvokeAIWebServer:
 
         # TODO: I think this needs a safety mechanism.
         @socketio.on('deleteImage')
-        def handle_delete_image(path, uuid):
+        def handle_delete_image(url, uuid):
             try:
-                print(f'>> Delete requested "{path}"')
+                print(f'>> Delete requested "{url}"')
                 from send2trash import send2trash
 
-                path = self.get_image_path_from_url(path)
+                path = self.get_image_path_from_url(url)
                 send2trash(path)
-                socketio.emit('imageDeleted', {'url': path, 'uuid': uuid})
+                socketio.emit('imageDeleted', {'url': url, 'uuid': uuid})
             except Exception as e:
                 self.socketio.emit('error', {'message': (str(e))})
                 print('\n')

frontend/dist/index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>InvokeAI - A Stable Diffusion Toolkit</title>
   <link rel="shortcut icon" type="icon" href="/assets/favicon.0d253ced.ico" />
-  <script type="module" crossorigin src="/assets/index.1dc2a85b.js"></script>
+  <script type="module" crossorigin src="/assets/index.73bc96d2.js"></script>
   <link rel="stylesheet" href="/assets/index.853a336f.css">
 </head>
 

frontend/src/app/socketio/listeners.ts

@@ -279,6 +279,17 @@ const makeSocketIOListeners = (
     onImageDeleted: (data: InvokeAI.ImageUrlAndUuidResponse) => {
       const { url, uuid } = data;
       dispatch(removeImage(uuid));
+
+      const { initialImagePath, maskPath } = getState().options;
+
+      if (initialImagePath === url) {
+        dispatch(setInitialImagePath(''));
+      }
+
+      if (maskPath === url) {
+        dispatch(setMaskPath(''));
+      }
+
       dispatch(
         addLogEntry({
           timestamp: dateFormat(new Date(), 'isoDateTime'),

frontend/src/features/options/InitAndMaskImage.tsx

@@ -1,8 +1,8 @@
 import { Flex, Image } from '@chakra-ui/react';
 import { useState } from 'react';
-import { useAppSelector } from '../../app/store';
+import { useAppDispatch, useAppSelector } from '../../app/store';
 import { RootState } from '../../app/store';
-import { OptionsState } from './optionsSlice';
+import { OptionsState, setInitialImagePath, setMaskPath } from './optionsSlice';
 import './InitAndMaskImage.css';
 import { createSelector } from '@reduxjs/toolkit';
 import { isEqual } from 'lodash';
@@ -23,9 +23,18 @@ const optionsSelector = createSelector(
  * Displays init and mask images and buttons to upload/delete them.
  */
 const InitAndMaskImage = () => {
+  const dispatch = useAppDispatch();
   const { initialImagePath, maskPath } = useAppSelector(optionsSelector);
   const [shouldShowMask, setShouldShowMask] = useState<boolean>(false);
 
+  const handleInitImageOnError = () => {
+    dispatch(setInitialImagePath(''));
+  };
+
+  const handleMaskImageOnError = () => {
+    dispatch(setMaskPath(''));
+  };
+
   return (
     <Flex direction={'column'} alignItems={'center'} gap={2}>
       <InitAndMaskUploadButtons setShouldShowMask={setShouldShowMask} />
@@ -37,6 +46,7 @@ const InitAndMaskImage = () => {
             rounded={'md'}
             className={'checkerboard'}
             maxWidth={320}
+            onError={handleInitImageOnError}
           />
           {shouldShowMask && maskPath && (
             <Image
@@ -48,6 +58,7 @@ const InitAndMaskImage = () => {
               src={maskPath}
               rounded={'md'}
               zIndex={1}
+              onError={handleMaskImageOnError}
             />
           )}
         </Flex>