Adds clear temp folder

backend/invoke_ai_web_server.py

@@ -311,6 +311,29 @@ class InvokeAIWebServer:
                 traceback.print_exc()
                 print("\n")
 
+        @socketio.on("requestEmptyTempFolder")
+        def empty_temp_folder():
+            try:
+                temp_files = glob.glob(os.path.join(self.temp_image_path, "*"))
+                for f in temp_files:
+                    try:
+                        os.remove(f)
+                        thumbnail_path = os.path.join(
+                            self.thumbnail_image_path,
+                            os.path.splitext(os.path.basename(f))[0] + ".webp",
+                        )
+                        os.remove(thumbnail_path)
+                    except Exception as e:
+                        traceback.print_exc()
+                        socketio.emit("error", {"message": f"Unable to delete {f}"})
+                socketio.emit("tempFolderEmptied")
+            except Exception as e:
+                self.socketio.emit("error", {"message": (str(e))})
+                print("\n")
+
+                traceback.print_exc()
+                print("\n")
+
         @socketio.on("requestSaveStagingAreaImageToGallery")
         def save_temp_image_to_gallery(url):
             try:

frontend/src/app/socketio/actions.ts

@@ -37,3 +37,7 @@ export const requestModelChange = createAction<string>(
 export const saveStagingAreaImageToGallery = createAction<string>(
   'socketio/saveStagingAreaImageToGallery'
 );
+
+export const emptyTempFolder = createAction<undefined>(
+  'socketio/requestEmptyTempFolder'
+);

frontend/src/app/socketio/emitters.ts

@@ -172,8 +172,11 @@ const makeSocketIOEmitters = (
       socketio.emit('requestModelChange', modelName);
     },
     emitSaveStagingAreaImageToGallery: (url: string) => {
-      socketio.emit('requestSaveStagingAreaImageToGallery', url)
+      socketio.emit('requestSaveStagingAreaImageToGallery', url);
-    }
+    },
+    emitRequestEmptyTempFolder: () => {
+      socketio.emit('requestEmptyTempFolder');
+    },
   };
 };
 

frontend/src/app/socketio/listeners.ts

@@ -15,6 +15,7 @@ import {
   errorOccurred,
   setModelList,
   setIsCancelable,
+  addToast,
 } from 'features/system/store/systemSlice';
 
 import {
@@ -368,6 +369,16 @@ const makeSocketIOListeners = (
         })
       );
     },
+    onTempFolderEmptied: () => {
+      dispatch(
+        addToast({
+          title: 'Temp Folder Emptied',
+          status: 'success',
+          duration: 2500,
+          isClosable: true,
+        })
+      );
+    },
   };
 };
 

frontend/src/app/socketio/middleware.ts

@@ -46,6 +46,7 @@ export const socketioMiddleware = () => {
       onSystemConfig,
       onModelChanged,
       onModelChangeFailed,
+      onTempFolderEmptied,
     } = makeSocketIOListeners(store);
 
     const {
@@ -59,6 +60,7 @@ export const socketioMiddleware = () => {
       emitRequestSystemConfig,
       emitRequestModelChange,
       emitSaveStagingAreaImageToGallery,
+      emitRequestEmptyTempFolder,
     } = makeSocketIOEmitters(store, socketio);
 
     /**
@@ -113,6 +115,10 @@ export const socketioMiddleware = () => {
         onModelChangeFailed(data);
       });
 
+      socketio.on('tempFolderEmptied', () => {
+        onTempFolderEmptied();
+      });
+
       areListenersSet = true;
     }
 
@@ -169,6 +175,11 @@ export const socketioMiddleware = () => {
         emitSaveStagingAreaImageToGallery(action.payload);
         break;
       }
+
+      case 'socketio/requestEmptyTempFolder': {
+        emitRequestEmptyTempFolder();
+        break;
+      }
     }
 
     next(action);

frontend/src/features/canvas/components/IAICanvasToolbar/IAICanvasSettingsButtonPopover.tsx

@@ -18,6 +18,7 @@ import IAIPopover from 'common/components/IAIPopover';
 import IAICheckbox from 'common/components/IAICheckbox';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import IAIButton from 'common/components/IAIButton';
+import ClearTempFolderButtonModal from 'features/system/components/ClearTempFolderButtonModal';
 
 export const canvasControlsSelector = createSelector(
   [canvasSelector],
@@ -123,6 +124,7 @@ const IAICanvasSettingsButtonPopover = () => {
         >
           Clear Canvas History
         </IAIButton>
+        <ClearTempFolderButtonModal />
       </Flex>
     </IAIPopover>
   );

frontend/src/features/system/components/ClearTempFolderButtonModal.tsx

@@ -0,0 +1,74 @@
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { emptyTempFolder } from 'app/socketio/actions';
+import { useAppDispatch } from 'app/store';
+import IAIButton from 'common/components/IAIButton';
+import {
+  clearCanvasHistory,
+  resetCanvas,
+} from 'features/canvas/store/canvasSlice';
+import { useRef } from 'react';
+import { FaTrash } from 'react-icons/fa';
+
+const ClearTempFolderButtonModal = () => {
+  const dispatch = useAppDispatch();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const cancelRef = useRef<HTMLButtonElement | null>(null);
+
+  const handleClear = () => {
+    dispatch(emptyTempFolder());
+    dispatch(clearCanvasHistory());
+    dispatch(resetCanvas());
+    onClose();
+  };
+
+  return (
+    <>
+      <IAIButton leftIcon={<FaTrash />} size={'sm'} onClick={onOpen}>
+        Clear Temp Image Folder
+      </IAIButton>
+
+      <AlertDialog
+        isOpen={isOpen}
+        leastDestructiveRef={cancelRef}
+        onClose={onClose}
+      >
+        <AlertDialogOverlay>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              Clear Temp Image Folder
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              <p>
+                Clearing the temp image folder also fully resets the Unified
+                Canvas. This includes all undo/redo history, images in the
+                staging area, and the canvas base layer.
+              </p>
+              <br />
+              <p>Are you sure you want to clear the temp folder?</p>
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button ref={cancelRef} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button colorScheme="red" onClick={handleClear} ml={3}>
+                Clear
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    </>
+  );
+};
+export default ClearTempFolderButtonModal;

frontend/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -31,6 +31,7 @@ import { IN_PROGRESS_IMAGE_TYPES } from 'app/constants';
 import IAISwitch from 'common/components/IAISwitch';
 import IAISelect from 'common/components/IAISelect';
 import IAINumberInput from 'common/components/IAINumberInput';
+import ClearTempFolderButtonModal from '../ClearTempFolderButtonModal';
 
 const systemSelector = createSelector(
   (state: RootState) => state.system,