ui: error handling, init image, cleanup, recall params

invokeai/frontend/web/package.json

@@ -88,13 +88,16 @@
     "react-konva": "^18.2.7",
     "react-konva-utils": "^1.0.4",
     "react-redux": "^8.0.5",
+    "react-rnd": "^10.4.1",
     "react-transition-group": "^4.4.5",
+    "react-use": "^17.4.0",
     "react-zoom-pan-pinch": "^3.0.7",
     "reactflow": "^11.7.0",
     "redux-deep-persist": "^1.0.7",
     "redux-dynamic-middlewares": "^2.2.0",
     "redux-persist": "^6.0.0",
     "roarr": "^7.15.0",
+    "serialize-error": "^11.0.0",
     "socket.io-client": "^4.6.0",
     "use-image": "^1.1.0",
     "uuid": "^9.0.0"

invokeai/frontend/web/public/locales/en.json

@@ -527,6 +527,7 @@
         "useCanvasBeta": "Use Canvas Beta Layout",
         "enableImageDebugging": "Enable Image Debugging",
         "useSlidersForAll": "Use Sliders For All Options",
+        "autoShowProgress": "Auto Show Progress Images",
         "resetWebUI": "Reset Web UI",
         "resetWebUIDesc1": "Resetting the web UI only resets the browser's local cache of your images and remembered settings. It does not delete any images from disk.",
         "resetWebUIDesc2": "If images aren't showing up in the gallery or something else isn't working, please try resetting before submitting an issue on GitHub.",
@@ -645,5 +646,9 @@
         "betaDarkenOutside": "Darken Outside",
         "betaLimitToBox": "Limit To Box",
         "betaPreserveMasked": "Preserve Masked"
+    },
+    "ui": {
+        "showProgressImages": "Show Progress Images",
+        "hideProgressImages": "Hide Progress Images"
     }
 }

invokeai/frontend/web/src/app/components/App.tsx

@@ -27,6 +27,7 @@ import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import { configChanged } from 'features/system/store/configSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useLogger } from 'app/logging/useLogger';
+import ProgressImagePreview from 'features/parameters/components/ProgressImagePreview';
 
 const DEFAULT_CONFIG = {};
 
@@ -64,7 +65,7 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
   }, []);
 
   return (
-    <Grid w="100vw" h="100vh" position="relative">
+    <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
       {isLightboxEnabled && <Lightbox />}
       <ImageUploader>
         <ProgressBar />
@@ -120,6 +121,7 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
       <Portal>
         <FloatingGalleryButton />
       </Portal>
+      <ProgressImagePreview />
     </Grid>
   );
 };

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -1,7 +1,7 @@
 import React, { lazy, memo, PropsWithChildren, useEffect } from 'react';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
-import { buildMiddleware, store } from 'app/store/store';
+import { store } from 'app/store/store';
 import { persistor } from '../store/persistor';
 import { OpenAPI } from 'services/api';
 import '@fontsource/inter/100.css';
@@ -19,6 +19,7 @@ import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
 import { PartialAppConfig } from 'app/types/invokeai';
 
 import '../../i18n';
+import { socketMiddleware } from 'services/events/middleware';
 
 const App = lazy(() => import('./App'));
 const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
@@ -50,7 +51,7 @@ const InvokeAIUI = ({ apiUrl, token, config, children }: Props) => {
     // the `apiUrl`/`token` dynamically.
 
     // rebuild socket middleware with token and apiUrl
-    addMiddleware(buildMiddleware());
+    addMiddleware(socketMiddleware());
   }, [apiUrl, token]);
 
   return (

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

@@ -1,7 +1,5 @@
 // TODO: use Enums?
 
-import { InProgressImageType } from 'features/system/store/systemSlice';
-
 export const DIFFUSERS_SCHEDULERS: Array<string> = [
   'ddim',
   'plms',
@@ -33,17 +31,8 @@ export const UPSCALING_LEVELS: Array<{ key: string; value: number }> = [
 
 export const NUMPY_RAND_MIN = 0;
 
-export const NUMPY_RAND_MAX = 4294967295;
+export const NUMPY_RAND_MAX = 2147483647;
 
 export const FACETOOL_TYPES = ['gfpgan', 'codeformer'] as const;
 
-export const IN_PROGRESS_IMAGE_TYPES: Array<{
-  key: string;
-  value: InProgressImageType;
-}> = [
-  { key: 'None', value: 'none' },
-  { key: 'Fast', value: 'latents' },
-  { key: 'Accurate', value: 'full-res' },
-];
-
 export const NODE_MIN_WIDTH = 250;

invokeai/frontend/web/src/app/socketio/actions.ts

@@ -1,65 +1,67 @@
-import { createAction } from '@reduxjs/toolkit';
-import * as InvokeAI from 'app/types/invokeai';
-import { GalleryCategory } from 'features/gallery/store/gallerySlice';
-import { InvokeTabName } from 'features/ui/store/tabMap';
+// import { createAction } from '@reduxjs/toolkit';
+// import * as InvokeAI from 'app/types/invokeai';
+// import { GalleryCategory } from 'features/gallery/store/gallerySlice';
+// import { InvokeTabName } from 'features/ui/store/tabMap';
 
-/**
- * We can't use redux-toolkit's createSlice() to make these actions,
- * because they have no associated reducer. They only exist to dispatch
- * requests to the server via socketio. These actions will be handled
- * by the middleware.
- */
+// /**
+//  * We can't use redux-toolkit's createSlice() to make these actions,
+//  * because they have no associated reducer. They only exist to dispatch
+//  * requests to the server via socketio. These actions will be handled
+//  * by the middleware.
+//  */
 
-export const generateImage = createAction<InvokeTabName>(
-  'socketio/generateImage'
-);
-export const runESRGAN = createAction<InvokeAI._Image>('socketio/runESRGAN');
-export const runFacetool = createAction<InvokeAI._Image>(
-  'socketio/runFacetool'
-);
-export const deleteImage = createAction<InvokeAI._Image>(
-  'socketio/deleteImage'
-);
-export const requestImages = createAction<GalleryCategory>(
-  'socketio/requestImages'
-);
-export const requestNewImages = createAction<GalleryCategory>(
-  'socketio/requestNewImages'
-);
-export const cancelProcessing = createAction<undefined>(
-  'socketio/cancelProcessing'
-);
+// export const generateImage = createAction<InvokeTabName>(
+//   'socketio/generateImage'
+// );
+// export const runESRGAN = createAction<InvokeAI._Image>('socketio/runESRGAN');
+// export const runFacetool = createAction<InvokeAI._Image>(
+//   'socketio/runFacetool'
+// );
+// export const deleteImage = createAction<InvokeAI._Image>(
+//   'socketio/deleteImage'
+// );
+// export const requestImages = createAction<GalleryCategory>(
+//   'socketio/requestImages'
+// );
+// export const requestNewImages = createAction<GalleryCategory>(
+//   'socketio/requestNewImages'
+// );
+// export const cancelProcessing = createAction<undefined>(
+//   'socketio/cancelProcessing'
+// );
 
-export const requestSystemConfig = createAction<undefined>(
-  'socketio/requestSystemConfig'
-);
+// export const requestSystemConfig = createAction<undefined>(
+//   'socketio/requestSystemConfig'
+// );
 
-export const searchForModels = createAction<string>('socketio/searchForModels');
+// export const searchForModels = createAction<string>('socketio/searchForModels');
 
-export const addNewModel = createAction<
-  InvokeAI.InvokeModelConfigProps | InvokeAI.InvokeDiffusersModelConfigProps
->('socketio/addNewModel');
+// export const addNewModel = createAction<
+//   InvokeAI.InvokeModelConfigProps | InvokeAI.InvokeDiffusersModelConfigProps
+// >('socketio/addNewModel');
 
-export const deleteModel = createAction<string>('socketio/deleteModel');
+// export const deleteModel = createAction<string>('socketio/deleteModel');
 
-export const convertToDiffusers =
-  createAction<InvokeAI.InvokeModelConversionProps>(
-    'socketio/convertToDiffusers'
-  );
+// export const convertToDiffusers =
+//   createAction<InvokeAI.InvokeModelConversionProps>(
+//     'socketio/convertToDiffusers'
+//   );
 
-export const mergeDiffusersModels =
-  createAction<InvokeAI.InvokeModelMergingProps>(
-    'socketio/mergeDiffusersModels'
-  );
+// export const mergeDiffusersModels =
+//   createAction<InvokeAI.InvokeModelMergingProps>(
+//     'socketio/mergeDiffusersModels'
+//   );
 
-export const requestModelChange = createAction<string>(
-  'socketio/requestModelChange'
-);
+// export const requestModelChange = createAction<string>(
+//   'socketio/requestModelChange'
+// );
 
-export const saveStagingAreaImageToGallery = createAction<string>(
-  'socketio/saveStagingAreaImageToGallery'
-);
+// export const saveStagingAreaImageToGallery = createAction<string>(
+//   'socketio/saveStagingAreaImageToGallery'
+// );
 
-export const emptyTempFolder = createAction<undefined>(
-  'socketio/requestEmptyTempFolder'
-);
+// export const emptyTempFolder = createAction<undefined>(
+//   'socketio/requestEmptyTempFolder'
+// );
+
+export default {};