Merge branch 'main' into feat/controlnet-and-sdxl-convert

invokeai/app/api/routers/models.py

@@ -298,7 +298,7 @@ async def search_for_models(
 )->List[pathlib.Path]:
     if not search_path.is_dir():
         raise HTTPException(status_code=404, detail=f"The search path '{search_path}' does not exist or is not directory")
-    return ApiDependencies.invoker.services.model_manager.search_for_models([search_path])
+    return ApiDependencies.invoker.services.model_manager.search_for_models(search_path)
 
 @models_router.get(
     "/ckpt_confs",

invokeai/app/invocations/noise.py

@@ -119,8 +119,8 @@ class NoiseInvocation(BaseInvocation):
 
     @validator("seed", pre=True)
     def modulo_seed(cls, v):
-        """Returns the seed modulo SEED_MAX to ensure it is within the valid range."""
+        """Returns the seed modulo (SEED_MAX + 1) to ensure it is within the valid range."""
-        return v % SEED_MAX
+        return v % (SEED_MAX + 1)
 
     def invoke(self, context: InvocationContext) -> NoiseOutput:
         noise = get_noise(

invokeai/app/services/events.py

@@ -3,7 +3,13 @@
 from typing import Any, Optional
 from invokeai.app.models.image import ProgressImage
 from invokeai.app.util.misc import get_timestamp
-from invokeai.app.services.model_manager_service import BaseModelType, ModelType, SubModelType, ModelInfo
+from invokeai.app.services.model_manager_service import (
+    BaseModelType,
+    ModelType,
+    SubModelType,
+    ModelInfo,
+)
+
 
 class EventServiceBase:
     session_event: str = "session_event"
@@ -38,7 +44,9 @@ class EventServiceBase:
                 graph_execution_state_id=graph_execution_state_id,
                 node=node,
                 source_node_id=source_node_id,
-                progress_image=progress_image.dict() if progress_image is not None else None,
+                progress_image=progress_image.dict()
+                if progress_image is not None
+                else None,
                 step=step,
                 total_steps=total_steps,
             ),
@@ -67,6 +75,7 @@ class EventServiceBase:
         graph_execution_state_id: str,
         node: dict,
         source_node_id: str,
+        error_type: str,
         error: str,
     ) -> None:
         """Emitted when an invocation has completed"""
@@ -76,6 +85,7 @@ class EventServiceBase:
                 graph_execution_state_id=graph_execution_state_id,
                 node=node,
                 source_node_id=source_node_id,
+                error_type=error_type,
                 error=error,
             ),
         )
@@ -145,3 +155,37 @@ class EventServiceBase:
                 precision=str(model_info.precision),
             ),
         )
+
+    def emit_session_retrieval_error(
+        self,
+        graph_execution_state_id: str,
+        error_type: str,
+        error: str,
+    ) -> None:
+        """Emitted when session retrieval fails"""
+        self.__emit_session_event(
+            event_name="session_retrieval_error",
+            payload=dict(
+                graph_execution_state_id=graph_execution_state_id,
+                error_type=error_type,
+                error=error,
+            ),
+        )
+
+    def emit_invocation_retrieval_error(
+        self,
+        graph_execution_state_id: str,
+        node_id: str,
+        error_type: str,
+        error: str,
+    ) -> None:
+        """Emitted when invocation retrieval fails"""
+        self.__emit_session_event(
+            event_name="invocation_retrieval_error",
+            payload=dict(
+                graph_execution_state_id=graph_execution_state_id,
+                node_id=node_id,
+                error_type=error_type,
+                error=error,
+            ),
+        )

invokeai/app/services/model_manager_service.py

@@ -600,7 +600,7 @@ class ModelManagerService(ModelManagerServiceBase):
         """
         Return list of all models found in the designated directory.
         """
-        search = FindModels(directory,self.logger)
+        search = FindModels([directory], self.logger)
         return search.list_models()
 
     def sync_to_config(self):

invokeai/app/services/processor.py

@@ -39,21 +39,41 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                 try:
                     queue_item: InvocationQueueItem = self.__invoker.services.queue.get()
                 except Exception as e:
-                    logger.debug("Exception while getting from queue: %s" % e)
+                    self.__invoker.services.logger.error("Exception while getting from queue:\n%s" % e)
 
                 if not queue_item:  # Probably stopping
                     # do not hammer the queue
                     time.sleep(0.5)
                     continue
 
+                try:
                     graph_execution_state = (
                         self.__invoker.services.graph_execution_manager.get(
                             queue_item.graph_execution_state_id
                         )
                     )
+                except Exception as e:
+                    self.__invoker.services.logger.error("Exception while retrieving session:\n%s" % e)
+                    self.__invoker.services.events.emit_session_retrieval_error(
+                        graph_execution_state_id=queue_item.graph_execution_state_id,
+                        error_type=e.__class__.__name__,
+                        error=traceback.format_exc(),
+                    )
+                    continue
+                
+                try:
                     invocation = graph_execution_state.execution_graph.get_node(
                         queue_item.invocation_id
                     )
+                except Exception as e:
+                    self.__invoker.services.logger.error("Exception while retrieving invocation:\n%s" % e)
+                    self.__invoker.services.events.emit_invocation_retrieval_error(
+                        graph_execution_state_id=queue_item.graph_execution_state_id,
+                        node_id=queue_item.invocation_id,
+                        error_type=e.__class__.__name__,
+                        error=traceback.format_exc(),
+                    )
+                    continue
 
                 # get the source node id to provide to clients (the prepared node id is not as useful)
                 source_node_id = graph_execution_state.prepared_source_mapping[invocation.id]
@@ -114,11 +134,13 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                         graph_execution_state
                     )
 
+                    self.__invoker.services.logger.error("Error while invoking:\n%s" % e)
                     # Send error event
                     self.__invoker.services.events.emit_invocation_error(
                         graph_execution_state_id=graph_execution_state.id,
                         node=invocation.dict(),
                         source_node_id=source_node_id,
+                        error_type=e.__class__.__name__,
                         error=error,
                     )
 
@@ -136,11 +158,12 @@ class DefaultInvocationProcessor(InvocationProcessorABC):
                     try:
                         self.__invoker.invoke(graph_execution_state, invoke_all=True)
                     except Exception as e:
-                        logger.error("Error while invoking: %s" % e)
+                        self.__invoker.services.logger.error("Error while invoking:\n%s" % e)
                         self.__invoker.services.events.emit_invocation_error(
                             graph_execution_state_id=graph_execution_state.id,
                             node=invocation.dict(),
                             source_node_id=source_node_id,
+                            error_type=e.__class__.__name__,
                             error=traceback.format_exc()
                         )
                 elif is_complete:

invokeai/app/util/misc.py

@@ -14,8 +14,9 @@ def get_datetime_from_iso_timestamp(iso_timestamp: str) -> datetime.datetime:
     return datetime.datetime.fromisoformat(iso_timestamp)
 
 
-SEED_MAX = np.iinfo(np.int32).max
+SEED_MAX = np.iinfo(np.uint32).max
 
 
 def get_random_seed():
-    return np.random.randint(0, SEED_MAX)
+    rng = np.random.default_rng(seed=0)
+    return int(rng.integers(0, SEED_MAX))

invokeai/backend/model_management/lora.py

@@ -474,7 +474,7 @@ class ModelPatcher:
 
     @staticmethod
     def _lora_forward_hook(
-        applied_loras: List[Tuple[LoraModel, float]],
+        applied_loras: List[Tuple[LoRAModel, float]],
         layer_name: str,
     ):
 
@@ -519,7 +519,7 @@ class ModelPatcher:
     def apply_lora(
         cls,
         model: torch.nn.Module,
-        loras: List[Tuple[LoraModel, float]],
+        loras: List[Tuple[LoRAModel, float]],
         prefix: str,
     ):
         original_weights = dict()

invokeai/backend/model_management/model_search.py

@@ -98,6 +98,6 @@ class FindModels(ModelSearch):
 
     def list_models(self) -> List[Path]:
         self.search()
-        return self.models_found
+        return list(self.models_found)
 
     

invokeai/backend/model_management/models/lora.py

@@ -10,6 +10,7 @@ from .base import (
     SubModelType,
     classproperty,
     InvalidModelException,
+    ModelNotFoundException,
 )
 # TODO: naming
 from ..lora import LoRAModel as LoRAModelRaw

invokeai/frontend/web/.prettierignore

@@ -5,6 +5,10 @@ patches/
 stats.html
 index.html
 .yarn/
+.yalc/
 *.scss
 src/services/api/
 src/services/fixtures/*
+docs/
+static/
+src/theme/css/overlayscrollbars.css

invokeai/frontend/web/package.json

@@ -69,6 +69,7 @@
     "@mantine/core": "^6.0.14",
     "@mantine/form": "^6.0.15",
     "@mantine/hooks": "^6.0.14",
+    "@nanostores/react": "^0.7.1",
     "@reduxjs/toolkit": "^1.9.5",
     "@roarr/browser-log-writer": "^1.1.5",
     "chakra-ui-contextmenu": "^1.0.5",

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

@@ -102,8 +102,7 @@
         "openInNewTab": "Open in New Tab",
         "dontAskMeAgain": "Don't ask me again",
         "areYouSure": "Are you sure?",
-        "imagePrompt": "Image Prompt",
+        "imagePrompt": "Image Prompt"
-        "clearNodes": "Are you sure you want to clear all nodes?"
     },
     "gallery": {
         "generations": "Generations",
@@ -615,6 +614,11 @@
         "initialImageNotSetDesc": "Could not load initial image",
         "nodesSaved": "Nodes Saved",
         "nodesLoaded": "Nodes Loaded",
+        "nodesNotValidGraph": "Not a valid InvokeAI Node Graph",
+        "nodesNotValidJSON": "Not a valid JSON",
+        "nodesCorruptedGraph": "Cannot load. Graph seems to be corrupted.",
+        "nodesUnrecognizedTypes": "Cannot load. Graph has unrecognized types",
+        "nodesBrokenConnections": "Cannot load. Some connections are broken.",
         "nodesLoadedFailed": "Failed To Load Nodes",
         "nodesCleared": "Nodes Cleared"
     },
@@ -700,9 +704,10 @@
     },
     "nodes": {
         "reloadSchema": "Reload Schema",
-        "saveNodes": "Save Nodes",
+        "saveGraph": "Save Graph",
-        "loadNodes": "Load Nodes",
+        "loadGraph": "Load Graph (saved from Node Editor) (Do not copy-paste metadata)",
-        "clearNodes": "Clear Nodes",
+        "clearGraph": "Clear Graph",
+        "clearGraphDesc": "Are you sure you want to clear all nodes?",
         "zoomInNodes": "Zoom In",
         "zoomOutNodes": "Zoom Out",
         "fitViewportNodes": "Fit View",

invokeai/frontend/web/scripts/typegen.ts

@@ -10,7 +10,7 @@ async function main() {
   );
   const types = await openapiTS(OPENAPI_URL, {
     exportType: true,
-    transform: (schemaObject, metadata) => {
+    transform: (schemaObject) => {
       if ('format' in schemaObject && schemaObject.format === 'binary') {
         return schemaObject.nullable ? 'Blob | null' : 'Blob';
       }

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

@@ -14,6 +14,7 @@ import FloatingParametersPanelButtons from 'features/ui/components/FloatingParam
 import InvokeTabs from 'features/ui/components/InvokeTabs';
 import ParametersDrawer from 'features/ui/components/ParametersDrawer';
 import i18n from 'i18n';
+import { size } from 'lodash-es';
 import { ReactNode, memo, useEffect } from 'react';
 import UpdateImageBoardModal from '../../features/gallery/components/Boards/UpdateImageBoardModal';
 import GlobalHotkeys from './GlobalHotkeys';
@@ -29,8 +30,7 @@ interface Props {
 const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
   const language = useAppSelector(languageSelector);
 
-  const log = useLogger();
+  const logger = useLogger();
-
   const dispatch = useAppDispatch();
 
   useEffect(() => {
@@ -38,9 +38,11 @@ const App = ({ config = DEFAULT_CONFIG, headerComponent }: Props) => {
   }, [language]);
 
   useEffect(() => {
-    log.info({ namespace: 'App', data: config }, 'Received config');
+    if (size(config)) {
+      logger.info({ namespace: 'App', config }, 'Received config');
       dispatch(configChanged(config));
-  }, [dispatch, config, log]);
+    }
+  }, [dispatch, config, logger]);
 
   useEffect(() => {
     dispatch(appStarted());

invokeai/frontend/web/src/app/components/ImageDnd/DragPreview.tsx

@@ -27,7 +27,7 @@ const STYLES: ChakraProps['sx'] = {
 
 const DragPreview = (props: OverlayDragImageProps) => {
   if (!props.dragData) {
-    return;
+    return null;
   }
 
   if (props.dragData.payloadType === 'IMAGE_DTO') {

invokeai/frontend/web/src/app/components/ImageDnd/ImageDndContext.tsx

@@ -39,7 +39,6 @@ const ImageDndContext = (props: ImageDndContextProps) => {
   const handleDragEnd = useCallback(
     (event: DragEndEvent) => {
       console.log('dragEnd', event.active.data.current);
-      const activeData = event.active.data.current;
       const overData = event.over?.data.current;
       if (!activeDragData || !overData) {
         return;

invokeai/frontend/web/src/app/components/ImageDnd/typesafeDnd.tsx

@@ -11,7 +11,7 @@ import {
   useDraggable as useOriginalDraggable,
   useDroppable as useOriginalDroppable,
 } from '@dnd-kit/core';
-import { BoardId } from 'features/gallery/store/gallerySlice';
+import { BoardId } from 'features/gallery/store/types';
 import { ImageDTO } from 'services/api/types';
 
 type BaseDropData = {

invokeai/frontend/web/src/app/components/Toaster.ts

@@ -1,28 +1,10 @@
-import { useToast, UseToastOptions } from '@chakra-ui/react';
+import { useToast } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { toastQueueSelector } from 'features/system/store/systemSelectors';
 import { addToast, clearToastQueue } from 'features/system/store/systemSlice';
+import { MakeToastArg, makeToast } from 'features/system/util/makeToast';
 import { useCallback, useEffect } from 'react';
 
-export type MakeToastArg = string | UseToastOptions;
-
-/**
- * Makes a toast from a string or a UseToastOptions object.
- * If a string is passed, the toast will have the status 'info' and will be closable with a duration of 2500ms.
- */
-export const makeToast = (arg: MakeToastArg): UseToastOptions => {
-  if (typeof arg === 'string') {
-    return {
-      title: arg,
-      status: 'info',
-      isClosable: true,
-      duration: 2500,
-    };
-  }
-
-  return { status: 'info', isClosable: true, duration: 2500, ...arg };
-};
-
 /**
  * Logical component. Watches the toast queue and makes toasts when the queue is not empty.
  * @returns null

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

@@ -1,66 +1,2 @@
-// zod needs the array to be `as const` to infer the type correctly
-
-import { SchedulerParam } from 'features/parameters/types/parameterSchemas';
-
-// this is the source of the `SchedulerParam` type, which is generated by zod
-export const SCHEDULER_NAMES_AS_CONST = [
-  'euler',
-  'deis',
-  'ddim',
-  'ddpm',
-  'dpmpp_2s',
-  'dpmpp_2m',
-  'dpmpp_2m_sde',
-  'dpmpp_sde',
-  'heun',
-  'kdpm_2',
-  'lms',
-  'pndm',
-  'unipc',
-  'euler_k',
-  'dpmpp_2s_k',
-  'dpmpp_2m_k',
-  'dpmpp_2m_sde_k',
-  'dpmpp_sde_k',
-  'heun_k',
-  'lms_k',
-  'euler_a',
-  'kdpm_2_a',
-] as const;
-
-export const DEFAULT_SCHEDULER_NAME = 'euler';
-
-export const SCHEDULER_NAMES: SchedulerParam[] = [...SCHEDULER_NAMES_AS_CONST];
-
-export const SCHEDULER_LABEL_MAP: Record<SchedulerParam, string> = {
-  euler: 'Euler',
-  deis: 'DEIS',
-  ddim: 'DDIM',
-  ddpm: 'DDPM',
-  dpmpp_sde: 'DPM++ SDE',
-  dpmpp_2s: 'DPM++ 2S',
-  dpmpp_2m: 'DPM++ 2M',
-  dpmpp_2m_sde: 'DPM++ 2M SDE',
-  heun: 'Heun',
-  kdpm_2: 'KDPM 2',
-  lms: 'LMS',
-  pndm: 'PNDM',
-  unipc: 'UniPC',
-  euler_k: 'Euler Karras',
-  dpmpp_sde_k: 'DPM++ SDE Karras',
-  dpmpp_2s_k: 'DPM++ 2S Karras',
-  dpmpp_2m_k: 'DPM++ 2M Karras',
-  dpmpp_2m_sde_k: 'DPM++ 2M SDE Karras',
-  heun_k: 'Heun Karras',
-  lms_k: 'LMS Karras',
-  euler_a: 'Euler Ancestral',
-  kdpm_2_a: 'KDPM 2 Ancestral',
-};
-
-export type Scheduler = (typeof SCHEDULER_NAMES)[number];
-
 export const NUMPY_RAND_MIN = 0;
-
+export const NUMPY_RAND_MAX = 4294967295;
-export const NUMPY_RAND_MAX = 2147483647;
-
-export const NODE_MIN_WIDTH = 250;

invokeai/frontend/web/src/app/logging/logger.ts

@@ -0,0 +1,46 @@
+import { createLogWriter } from '@roarr/browser-log-writer';
+import { atom } from 'nanostores';
+import { Logger, ROARR, Roarr } from 'roarr';
+
+ROARR.write = createLogWriter();
+
+export const BASE_CONTEXT = {};
+export const log = Roarr.child(BASE_CONTEXT);
+
+export const $logger = atom<Logger>(Roarr.child(BASE_CONTEXT));
+
+type LoggerNamespace =
+  | 'images'
+  | 'models'
+  | 'config'
+  | 'canvas'
+  | 'txt2img'
+  | 'img2img'
+  | 'nodes'
+  | 'system'
+  | 'socketio'
+  | 'session';
+
+export const logger = (namespace: LoggerNamespace) =>
+  $logger.get().child({ namespace });
+
+export const VALID_LOG_LEVELS = [
+  'trace',
+  'debug',
+  'info',
+  'warn',
+  'error',
+  'fatal',
+] as const;
+
+export type InvokeLogLevel = (typeof VALID_LOG_LEVELS)[number];
+
+// Translate human-readable log levels to numbers, used for log filtering
+export const LOG_LEVEL_MAP: Record<InvokeLogLevel, number> = {
+  trace: 10,
+  debug: 20,
+  info: 30,
+  warn: 40,
+  error: 50,
+  fatal: 60,
+};

invokeai/frontend/web/src/app/logging/useLogger.ts

@@ -1,48 +1,19 @@
+import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
+import { createLogWriter } from '@roarr/browser-log-writer';
 import { useAppSelector } from 'app/store/storeHooks';
 import { systemSelector } from 'features/system/store/systemSelectors';
 import { isEqual } from 'lodash-es';
 import { useEffect } from 'react';
-import { LogLevelName, ROARR, Roarr } from 'roarr';
+import { ROARR, Roarr } from 'roarr';
-import { createLogWriter } from '@roarr/browser-log-writer';
+import { $logger, BASE_CONTEXT, LOG_LEVEL_MAP } from './logger';
-
-// Base logging context includes only the package name
-const baseContext = { package: '@invoke-ai/invoke-ai-ui' };
-
-// Create browser log writer
-ROARR.write = createLogWriter();
-
-// Module-scoped logger - can be imported and used anywhere
-export let log = Roarr.child(baseContext);
-
-// Translate human-readable log levels to numbers, used for log filtering
-export const LOG_LEVEL_MAP: Record<LogLevelName, number> = {
-  trace: 10,
-  debug: 20,
-  info: 30,
-  warn: 40,
-  error: 50,
-  fatal: 60,
-};
-
-export const VALID_LOG_LEVELS = [
-  'trace',
-  'debug',
-  'info',
-  'warn',
-  'error',
-  'fatal',
-] as const;
-
-export type InvokeLogLevel = (typeof VALID_LOG_LEVELS)[number];
 
 const selector = createSelector(
   systemSelector,
   (system) => {
-    const { app_version, consoleLogLevel, shouldLogToConsole } = system;
+    const { consoleLogLevel, shouldLogToConsole } = system;
 
     return {
-      version: app_version,
       consoleLogLevel,
       shouldLogToConsole,
     };
@@ -55,8 +26,7 @@ const selector = createSelector(
 );
 
 export const useLogger = () => {
-  const { version, consoleLogLevel, shouldLogToConsole } =
+  const { consoleLogLevel, shouldLogToConsole } = useAppSelector(selector);
-    useAppSelector(selector);
 
   // The provided Roarr browser log writer uses localStorage to config logging to console
   useEffect(() => {
@@ -78,17 +48,16 @@ export const useLogger = () => {
 
   // Update the module-scoped logger context as needed
   useEffect(() => {
+    // TODO: type this properly
+    //eslint-disable-next-line @typescript-eslint/no-explicit-any
     const newContext: Record<string, any> = {
-      ...baseContext,
+      ...BASE_CONTEXT,
     };
 
-    if (version) {
+    $logger.set(Roarr.child(newContext));
-      newContext.version = version;
+  }, []);
-    }
 
-    log = Roarr.child(newContext);
+  const logger = useStore($logger);
-  }, [version]);
 
-  // Use the logger within components - no different than just importing it directly
+  return logger;
-  return log;
 };

invokeai/frontend/web/src/app/store/enhancers/reduxRemember/unserialize.ts

@@ -12,7 +12,7 @@ import { defaultsDeep } from 'lodash-es';
 import { UnserializeFunction } from 'redux-remember';
 
 const initialStates: {
-  [key: string]: any;
+  [key: string]: object; // TODO: type this properly
 } = {
   canvas: initialCanvasState,
   gallery: initialGalleryState,

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/index.ts

@@ -8,10 +8,11 @@ import {
 
 import type { AppDispatch, RootState } from '../../store';
 import { addCommitStagingAreaImageListener } from './listeners/addCommitStagingAreaImageListener';
+import { addFirstListImagesListener } from './listeners/addFirstListImagesListener.ts';
 import { addAppConfigReceivedListener } from './listeners/appConfigReceived';
 import { addAppStartedListener } from './listeners/appStarted';
-import { addBoardIdSelectedListener } from './listeners/boardIdSelected';
 import { addDeleteBoardAndImagesFulfilledListener } from './listeners/boardAndImagesDeleted';
+import { addBoardIdSelectedListener } from './listeners/boardIdSelected';
 import { addCanvasCopiedToClipboardListener } from './listeners/canvasCopiedToClipboard';
 import { addCanvasDownloadedAsImageListener } from './listeners/canvasDownloadedAsImage';
 import { addCanvasMergedListener } from './listeners/canvasMerged';
@@ -34,10 +35,6 @@ import {
   addImageRemovedFromBoardRejectedListener,
 } from './listeners/imageRemovedFromBoard';
 import { addImageToDeleteSelectedListener } from './listeners/imageToDeleteSelected';
-import {
-  addImageUpdatedFulfilledListener,
-  addImageUpdatedRejectedListener,
-} from './listeners/imageUpdated';
 import {
   addImageUploadedFulfilledListener,
   addImageUploadedRejectedListener,
@@ -69,17 +66,17 @@ import { addGraphExecutionStateCompleteEventListener as addGraphExecutionStateCo
 import { addInvocationCompleteEventListener as addInvocationCompleteListener } from './listeners/socketio/socketInvocationComplete';
 import { addInvocationErrorEventListener as addInvocationErrorListener } from './listeners/socketio/socketInvocationError';
 import { addInvocationStartedEventListener as addInvocationStartedListener } from './listeners/socketio/socketInvocationStarted';
+import { addModelLoadEventListener } from './listeners/socketio/socketModelLoad';
 import { addSocketSubscribedEventListener as addSocketSubscribedListener } from './listeners/socketio/socketSubscribed';
 import { addSocketUnsubscribedEventListener as addSocketUnsubscribedListener } from './listeners/socketio/socketUnsubscribed';
 import { addStagingAreaImageSavedListener } from './listeners/stagingAreaImageSaved';
+import { addUpscaleRequestedListener } from './listeners/upscaleRequested';
 import { addUserInvokedCanvasListener } from './listeners/userInvokedCanvas';
 import { addUserInvokedImageToImageListener } from './listeners/userInvokedImageToImage';
 import { addUserInvokedNodesListener } from './listeners/userInvokedNodes';
 import { addUserInvokedTextToImageListener } from './listeners/userInvokedTextToImage';
-import { addModelLoadStartedEventListener } from './listeners/socketio/socketModelLoadStarted';
+import { addSessionRetrievalErrorEventListener } from './listeners/socketio/socketSessionRetrievalError';
-import { addModelLoadCompletedEventListener } from './listeners/socketio/socketModelLoadCompleted';
+import { addInvocationRetrievalErrorEventListener } from './listeners/socketio/socketInvocationRetrievalError';
-import { addUpscaleRequestedListener } from './listeners/upscaleRequested';
-import { addFirstListImagesListener } from './listeners/addFirstListImagesListener.ts';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -109,10 +106,6 @@ export type AppListenerEffect = ListenerEffect<
 addImageUploadedFulfilledListener();
 addImageUploadedRejectedListener();
 
-// Image updated
-addImageUpdatedFulfilledListener();
-addImageUpdatedRejectedListener();
-
 // Image selected
 addInitialImageSelectedListener();
 
@@ -161,8 +154,9 @@ addSocketConnectedListener();
 addSocketDisconnectedListener();
 addSocketSubscribedListener();
 addSocketUnsubscribedListener();
-addModelLoadStartedEventListener();
+addModelLoadEventListener();
-addModelLoadCompletedEventListener();
+addSessionRetrievalErrorEventListener();
+addInvocationRetrievalErrorEventListener();
 
 // Session Created
 addSessionCreatedPendingListener();

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

@@ -1,14 +1,13 @@
-import { startAppListening } from '..';
+import { logger } from 'app/logging/logger';
-import { log } from 'app/logging/useLogger';
 import { commitStagingAreaImage } from 'features/canvas/store/canvasSlice';
 import { sessionCanceled } from 'services/api/thunks/session';
-
+import { startAppListening } from '..';
-const moduleLog = log.child({ namespace: 'canvas' });
 
 export const addCommitStagingAreaImageListener = () => {
   startAppListening({
     actionCreator: commitStagingAreaImage,
     effect: async (action, { dispatch, getState }) => {
+      const log = logger('canvas');
       const state = getState();
       const { sessionId: session_id, isProcessing } = state.system;
       const canvasSessionId = action.payload;
@@ -19,18 +18,16 @@ export const addCommitStagingAreaImageListener = () => {
       }
 
       if (!canvasSessionId) {
-        moduleLog.debug('No canvas session, skipping cancel');
+        log.debug('No canvas session, skipping cancel');
         return;
       }
 
       if (canvasSessionId !== session_id) {
-        moduleLog.debug(
+        log.debug(
           {
-            data: {
             canvasSessionId,
             session_id,
           },
-          },
           'Canvas session does not match global session, skipping cancel'
         );
         return;

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

@@ -1,8 +1,6 @@
 import { createAction } from '@reduxjs/toolkit';
-import {
+import { imageSelected } from 'features/gallery/store/gallerySlice';
-  IMAGE_CATEGORIES,
+import { IMAGE_CATEGORIES } from 'features/gallery/store/types';
-  imageSelected,
-} from 'features/gallery/store/gallerySlice';
 import {
   ImageCache,
   getListImagesUrl,
@@ -17,7 +15,7 @@ export const addFirstListImagesListener = () => {
     matcher: imagesApi.endpoints.listImages.matchFulfilled,
     effect: async (
       action,
-      { getState, dispatch, unsubscribe, cancelActiveListeners }
+      { dispatch, unsubscribe, cancelActiveListeners }
     ) => {
       // Only run this listener on the first listImages request for no-board images
       if (

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

@@ -6,10 +6,7 @@ export const appStarted = createAction('app/appStarted');
 export const addAppStartedListener = () => {
   startAppListening({
     actionCreator: appStarted,
-    effect: async (
+    effect: async (action, { unsubscribe, cancelActiveListeners }) => {
-      action,
-      { getState, dispatch, unsubscribe, cancelActiveListeners }
-    ) => {
       // this should only run once
       cancelActiveListeners();
       unsubscribe();

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

@@ -1,6 +1,6 @@
 import { resetCanvas } from 'features/canvas/store/canvasSlice';
 import { controlNetReset } from 'features/controlNet/store/controlNetSlice';
-import { getImageUsage } from 'features/imageDeletion/store/imageDeletionSlice';
+import { getImageUsage } from 'features/imageDeletion/store/imageDeletionSelectors';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { clearInitialImage } from 'features/parameters/store/generationSlice';
 import { startAppListening } from '..';
@@ -9,8 +9,8 @@ import { boardsApi } from '../../../../../services/api/endpoints/boards';
 export const addDeleteBoardAndImagesFulfilledListener = () => {
   startAppListening({
     matcher: boardsApi.endpoints.deleteBoardAndImages.matchFulfilled,
-    effect: async (action, { dispatch, getState, condition }) => {
+    effect: async (action, { dispatch, getState }) => {
-      const { board_id, deleted_board_images, deleted_images } = action.payload;
+      const { deleted_images } = action.payload;
 
       // Remove all deleted images from the UI
 

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

@@ -1,16 +1,15 @@
-import { log } from 'app/logging/useLogger';
+import { isAnyOf } from '@reduxjs/toolkit';
 import {
-  ASSETS_CATEGORIES,
-  IMAGE_CATEGORIES,
   boardIdSelected,
   galleryViewChanged,
   imageSelected,
 } from 'features/gallery/store/gallerySlice';
+import {
+  ASSETS_CATEGORIES,
+  IMAGE_CATEGORIES,
+} from 'features/gallery/store/types';
 import { imagesApi } from 'services/api/endpoints/images';
 import { startAppListening } from '..';
-import { isAnyOf } from '@reduxjs/toolkit';
-
-const moduleLog = log.child({ namespace: 'boards' });
 
 export const addBoardIdSelectedListener = () => {
   startAppListening({

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

@@ -1,16 +1,17 @@
 import { canvasCopiedToClipboard } from 'features/canvas/store/actions';
 import { startAppListening } from '..';
-import { log } from 'app/logging/useLogger';
+import { $logger } from 'app/logging/logger';
 import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
 import { addToast } from 'features/system/store/systemSlice';
 import { copyBlobToClipboard } from 'features/canvas/util/copyBlobToClipboard';
 
-const moduleLog = log.child({ namespace: 'canvasCopiedToClipboardListener' });
-
 export const addCanvasCopiedToClipboardListener = () => {
   startAppListening({
     actionCreator: canvasCopiedToClipboard,
     effect: async (action, { dispatch, getState }) => {
+      const moduleLog = $logger
+        .get()
+        .child({ namespace: 'canvasCopiedToClipboardListener' });
       const state = getState();
 
       const blob = await getBaseLayerBlob(state);

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

@@ -1,16 +1,17 @@
 import { canvasDownloadedAsImage } from 'features/canvas/store/actions';
 import { startAppListening } from '..';
-import { log } from 'app/logging/useLogger';
+import { $logger } from 'app/logging/logger';
 import { downloadBlob } from 'features/canvas/util/downloadBlob';
 import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
 import { addToast } from 'features/system/store/systemSlice';
 
-const moduleLog = log.child({ namespace: 'canvasSavedToGalleryListener' });
-
 export const addCanvasDownloadedAsImageListener = () => {
   startAppListening({
     actionCreator: canvasDownloadedAsImage,
     effect: async (action, { dispatch, getState }) => {
+      const moduleLog = $logger
+        .get()
+        .child({ namespace: 'canvasSavedToGalleryListener' });
       const state = getState();
 
       const blob = await getBaseLayerBlob(state);

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

@@ -1,4 +1,4 @@
-import { log } from 'app/logging/useLogger';
+import { $logger } from 'app/logging/logger';
 import { canvasMerged } from 'features/canvas/store/actions';
 import { setMergedCanvas } from 'features/canvas/store/canvasSlice';
 import { getFullBaseLayerBlob } from 'features/canvas/util/getFullBaseLayerBlob';
@@ -7,12 +7,13 @@ import { addToast } from 'features/system/store/systemSlice';
 import { imagesApi } from 'services/api/endpoints/images';
 import { startAppListening } from '..';
 
-const moduleLog = log.child({ namespace: 'canvasCopiedToClipboardListener' });
-
 export const addCanvasMergedListener = () => {
   startAppListening({
     actionCreator: canvasMerged,
-    effect: async (action, { dispatch, getState, take }) => {
+    effect: async (action, { dispatch }) => {
+      const moduleLog = $logger
+        .get()
+        .child({ namespace: 'canvasCopiedToClipboardListener' });
       const blob = await getFullBaseLayerBlob();
 
       if (!blob) {

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

@@ -1,22 +1,21 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
 import { canvasSavedToGallery } from 'features/canvas/store/actions';
 import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
 import { addToast } from 'features/system/store/systemSlice';
 import { imagesApi } from 'services/api/endpoints/images';
 import { startAppListening } from '..';
 
-const moduleLog = log.child({ namespace: 'canvasSavedToGalleryListener' });
-
 export const addCanvasSavedToGalleryListener = () => {
   startAppListening({
     actionCreator: canvasSavedToGallery,
-    effect: async (action, { dispatch, getState, take }) => {
+    effect: async (action, { dispatch, getState }) => {
+      const log = logger('canvas');
       const state = getState();
 
       const blob = await getBaseLayerBlob(state);
 
       if (!blob) {
-        moduleLog.error('Problem getting base layer blob');
+        log.error('Problem getting base layer blob');
         dispatch(
           addToast({
             title: 'Problem Saving Canvas',

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

@@ -1,6 +1,6 @@
 import { AnyListenerPredicate } from '@reduxjs/toolkit';
-import { startAppListening } from '..';
+import { logger } from 'app/logging/logger';
-import { log } from 'app/logging/useLogger';
+import { RootState } from 'app/store/store';
 import { controlNetImageProcessed } from 'features/controlNet/store/actions';
 import {
   controlNetAutoConfigToggled,
@@ -9,9 +9,7 @@ import {
   controlNetProcessorParamsChanged,
   controlNetProcessorTypeChanged,
 } from 'features/controlNet/store/controlNetSlice';
-import { RootState } from 'app/store/store';
+import { startAppListening } from '..';
-
-const moduleLog = log.child({ namespace: 'controlNet' });
 
 const predicate: AnyListenerPredicate<RootState> = (
   action,
@@ -64,18 +62,13 @@ const predicate: AnyListenerPredicate<RootState> = (
 export const addControlNetAutoProcessListener = () => {
   startAppListening({
     predicate,
-    effect: async (
+    effect: async (action, { dispatch, cancelActiveListeners, delay }) => {
-      action,
+      const log = logger('session');
-      { dispatch, getState, cancelActiveListeners, delay }
-    ) => {
       const { controlNetId } = action.payload;
 
       // Cancel any in-progress instances of this listener
       cancelActiveListeners();
-      moduleLog.trace(
+      log.trace('ControlNet auto-process triggered');
-        { data: action.payload },
-        'ControlNet auto-process triggered'
-      );
       // Delay before starting actual work
       await delay(300);
 

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

@@ -1,4 +1,4 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
 import { controlNetImageProcessed } from 'features/controlNet/store/actions';
 import { controlNetProcessedImageChanged } from 'features/controlNet/store/controlNetSlice';
 import { sessionReadyToInvoke } from 'features/system/store/actions';
@@ -9,20 +9,16 @@ import { Graph, ImageDTO } from 'services/api/types';
 import { socketInvocationComplete } from 'services/events/actions';
 import { startAppListening } from '..';
 
-const moduleLog = log.child({ namespace: 'controlNet' });
-
 export const addControlNetImageProcessedListener = () => {
   startAppListening({
     actionCreator: controlNetImageProcessed,
-    effect: async (
+    effect: async (action, { dispatch, getState, take }) => {
-      action,
+      const log = logger('session');
-      { dispatch, getState, take, unsubscribe, subscribe }
-    ) => {
       const { controlNetId } = action.payload;
       const controlNet = getState().controlNet.controlNets[controlNetId];
 
       if (!controlNet.controlImage) {
-        moduleLog.error('Unable to process ControlNet image');
+        log.error('Unable to process ControlNet image');
         return;
       }
 
@@ -70,8 +66,8 @@ export const addControlNetImageProcessedListener = () => {
 
         const processedControlImage = payload as ImageDTO;
 
-        moduleLog.debug(
+        log.debug(
-          { data: { arg: action.payload, processedControlImage } },
+          { controlNetId: action.payload, processedControlImage },
           'ControlNet image processed'
         );
 

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

@@ -1,18 +1,17 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
 import { imagesApi } from 'services/api/endpoints/images';
 import { startAppListening } from '..';
 
-const moduleLog = log.child({ namespace: 'boards' });
-
 export const addImageAddedToBoardFulfilledListener = () => {
   startAppListening({
     matcher: imagesApi.endpoints.addImageToBoard.matchFulfilled,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action) => {
+      const log = logger('images');
       const { board_id, imageDTO } = action.meta.arg.originalArgs;
 
       // TODO: update listImages cache for this board
 
-      moduleLog.debug({ data: { board_id, imageDTO } }, 'Image added to board');
+      log.debug({ board_id, imageDTO }, 'Image added to board');
     },
   });
 };
@@ -20,13 +19,11 @@ export const addImageAddedToBoardFulfilledListener = () => {
 export const addImageAddedToBoardRejectedListener = () => {
   startAppListening({
     matcher: imagesApi.endpoints.addImageToBoard.matchRejected,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action) => {
+      const log = logger('images');
       const { board_id, imageDTO } = action.meta.arg.originalArgs;
 
-      moduleLog.debug(
+      log.debug({ board_id, imageDTO }, 'Problem adding image to board');
-        { data: { board_id, imageDTO } },
-        'Problem adding image to board'
-      );
     },
   });
 };

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

@@ -1,12 +1,10 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
 import { resetCanvas } from 'features/canvas/store/canvasSlice';
 import { controlNetReset } from 'features/controlNet/store/controlNetSlice';
 import { selectListImagesBaseQueryArgs } from 'features/gallery/store/gallerySelectors';
 import { imageSelected } from 'features/gallery/store/gallerySlice';
-import {
+import { imageDeletionConfirmed } from 'features/imageDeletion/store/actions';
-  imageDeletionConfirmed,
+import { isModalOpenChanged } from 'features/imageDeletion/store/imageDeletionSlice';
-  isModalOpenChanged,
-} from 'features/imageDeletion/store/imageDeletionSlice';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
 import { clearInitialImage } from 'features/parameters/store/generationSlice';
 import { clamp } from 'lodash-es';
@@ -14,8 +12,6 @@ import { api } from 'services/api';
 import { imagesApi } from 'services/api/endpoints/images';
 import { startAppListening } from '..';
 
-const moduleLog = log.child({ namespace: 'image' });
-
 /**
  * Called when the user requests an image deletion
  */
@@ -107,7 +103,7 @@ export const addRequestedImageDeletionListener = () => {
 export const addImageDeletedPendingListener = () => {
   startAppListening({
     matcher: imagesApi.endpoints.deleteImage.matchPending,
-    effect: (action, { dispatch, getState }) => {
+    effect: () => {
       //
     },
   });
@@ -119,11 +115,9 @@ export const addImageDeletedPendingListener = () => {
 export const addImageDeletedFulfilledListener = () => {
   startAppListening({
     matcher: imagesApi.endpoints.deleteImage.matchFulfilled,
-    effect: (action, { dispatch, getState }) => {
+    effect: (action) => {
-      moduleLog.debug(
+      const log = logger('images');
-        { data: { image: action.meta.arg.originalArgs } },
+      log.debug({ imageDTO: action.meta.arg.originalArgs }, 'Image deleted');
-        'Image deleted'
-      );
     },
   });
 };
@@ -134,9 +128,10 @@ export const addImageDeletedFulfilledListener = () => {
 export const addImageDeletedRejectedListener = () => {
   startAppListening({
     matcher: imagesApi.endpoints.deleteImage.matchRejected,
-    effect: (action, { dispatch, getState }) => {
+    effect: (action) => {
-      moduleLog.debug(
+      const log = logger('images');
-        { data: { image: action.meta.arg.originalArgs } },
+      log.debug(
+        { imageDTO: action.meta.arg.originalArgs },
         'Unable to delete image'
       );
     },

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

@@ -3,7 +3,7 @@ import {
   TypesafeDraggableData,
   TypesafeDroppableData,
 } from 'app/components/ImageDnd/typesafeDnd';
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
 import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import { controlNetImageChanged } from 'features/controlNet/store/controlNetSlice';
 import {
@@ -15,8 +15,6 @@ import { initialImageChanged } from 'features/parameters/store/generationSlice';
 import { imagesApi } from 'services/api/endpoints/images';
 import { startAppListening } from '../';
 
-const moduleLog = log.child({ namespace: 'dnd' });
-
 export const dndDropped = createAction<{
   overData: TypesafeDroppableData;
   activeData: TypesafeDraggableData;
@@ -25,14 +23,11 @@ export const dndDropped = createAction<{
 export const addImageDroppedListener = () => {
   startAppListening({
     actionCreator: dndDropped,
-    effect: async (action, { dispatch, getState, take }) => {
+    effect: async (action, { dispatch }) => {
+      const log = logger('images');
       const { activeData, overData } = action.payload;
-      const state = getState();
 
-      moduleLog.debug(
+      log.debug({ activeData, overData }, 'Image or selection dropped');
-        { data: { activeData, overData } },
-        'Image or selection dropped'
-      );
 
       // set current image
       if (

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

@@ -1,19 +1,15 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
 import { imagesApi } from 'services/api/endpoints/images';
 import { startAppListening } from '..';
 
-const moduleLog = log.child({ namespace: 'boards' });
-
 export const addImageRemovedFromBoardFulfilledListener = () => {
   startAppListening({
     matcher: imagesApi.endpoints.removeImageFromBoard.matchFulfilled,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action) => {
-      const { board_id, image_name } = action.meta.arg.originalArgs;
+      const log = logger('images');
+      const imageDTO = action.meta.arg.originalArgs;
 
-      moduleLog.debug(
+      log.debug({ imageDTO }, 'Image removed from board');
-        { data: { board_id, image_name } },
-        'Image added to board'
-      );
     },
   });
 };
@@ -21,13 +17,11 @@ export const addImageRemovedFromBoardFulfilledListener = () => {
 export const addImageRemovedFromBoardRejectedListener = () => {
   startAppListening({
     matcher: imagesApi.endpoints.removeImageFromBoard.matchRejected,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action) => {
-      const { board_id, image_name } = action.meta.arg.originalArgs;
+      const log = logger('images');
+      const imageDTO = action.meta.arg.originalArgs;
 
-      moduleLog.debug(
+      log.debug({ imageDTO }, 'Problem removing image from board');
-        { data: { board_id, image_name } },
-        'Problem adding image to board'
-      );
     },
   });
 };

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

@@ -1,18 +1,15 @@
-import { startAppListening } from '..';
+import { imageDeletionConfirmed } from 'features/imageDeletion/store/actions';
-import { log } from 'app/logging/useLogger';
+import { selectImageUsage } from 'features/imageDeletion/store/imageDeletionSelectors';
 import {
-  imageDeletionConfirmed,
   imageToDeleteSelected,
   isModalOpenChanged,
-  selectImageUsage,
 } from 'features/imageDeletion/store/imageDeletionSlice';
-
+import { startAppListening } from '..';
-const moduleLog = log.child({ namespace: 'image' });
 
 export const addImageToDeleteSelectedListener = () => {
   startAppListening({
     actionCreator: imageToDeleteSelected,
-    effect: async (action, { dispatch, getState, condition }) => {
+    effect: async (action, { dispatch, getState }) => {
       const imageDTO = action.payload;
       const state = getState();
       const { shouldConfirmOnDelete } = state.system;

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

@@ -1,34 +0,0 @@
-import { log } from 'app/logging/useLogger';
-import { imagesApi } from 'services/api/endpoints/images';
-import { startAppListening } from '..';
-
-const moduleLog = log.child({ namespace: 'image' });
-
-export const addImageUpdatedFulfilledListener = () => {
-  // startAppListening({
-  //   matcher: imagesApi.endpoints.updateImage.matchFulfilled,
-  //   effect: (action, { dispatch, getState }) => {
-  //     moduleLog.debug(
-  //       {
-  //         data: {
-  //           oldImage: action.meta.arg.originalArgs,
-  //           updatedImage: action.payload,
-  //         },
-  //       },
-  //       'Image updated'
-  //     );
-  //   },
-  // });
-};
-
-export const addImageUpdatedRejectedListener = () => {
-  // startAppListening({
-  //   matcher: imagesApi.endpoints.updateImage.matchRejected,
-  //   effect: (action, { dispatch }) => {
-  //     moduleLog.debug(
-  //       { data: action.meta.arg.originalArgs },
-  //       'Image update failed'
-  //     );
-  //   },
-  // });
-};

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

@@ -1,5 +1,5 @@
 import { UseToastOptions } from '@chakra-ui/react';
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
 import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import { controlNetImageChanged } from 'features/controlNet/store/controlNetSlice';
 import { imagesAddedToBatch } from 'features/gallery/store/gallerySlice';
@@ -9,8 +9,7 @@ import { addToast } from 'features/system/store/systemSlice';
 import { boardsApi } from 'services/api/endpoints/boards';
 import { startAppListening } from '..';
 import { imagesApi } from '../../../../../services/api/endpoints/images';
-
+import { omit } from 'lodash-es';
-const moduleLog = log.child({ namespace: 'image' });
 
 const DEFAULT_UPLOADED_TOAST: UseToastOptions = {
   title: 'Image Uploaded',
@@ -21,11 +20,12 @@ export const addImageUploadedFulfilledListener = () => {
   startAppListening({
     matcher: imagesApi.endpoints.uploadImage.matchFulfilled,
     effect: (action, { dispatch, getState }) => {
+      const log = logger('images');
       const imageDTO = action.payload;
       const state = getState();
-      const { selectedBoardId, autoAddBoardId } = state.gallery;
+      const { autoAddBoardId } = state.gallery;
 
-      moduleLog.debug({ arg: '<Blob>', imageDTO }, 'Image uploaded');
+      log.debug({ imageDTO }, 'Image uploaded');
 
       const { postUploadAction } = action.meta.arg.originalArgs;
 
@@ -140,9 +140,14 @@ export const addImageUploadedRejectedListener = () => {
   startAppListening({
     matcher: imagesApi.endpoints.uploadImage.matchRejected,
     effect: (action, { dispatch }) => {
-      const { file, postUploadAction, ...rest } = action.meta.arg.originalArgs;
+      const log = logger('images');
-      const sanitizedData = { arg: { ...rest, file: '<Blob>' } };
+      const sanitizedData = {
-      moduleLog.error({ data: sanitizedData }, 'Image upload failed');
+        arg: {
+          ...omit(action.meta.arg.originalArgs, ['file', 'postUploadAction']),
+          file: '<Blob>',
+        },
+      };
+      log.error({ ...sanitizedData }, 'Image upload failed');
       dispatch(
         addToast({
           title: 'Image Upload Failed',

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

@@ -1,14 +1,14 @@
-import { makeToast } from 'app/components/Toaster';
 import { initialImageSelected } from 'features/parameters/store/actions';
 import { initialImageChanged } from 'features/parameters/store/generationSlice';
 import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
 import { t } from 'i18next';
 import { startAppListening } from '..';
 
 export const addInitialImageSelectedListener = () => {
   startAppListening({
     actionCreator: initialImageSelected,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action, { dispatch }) => {
       if (!action.payload) {
         dispatch(
           addToast(

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

@@ -1,5 +1,5 @@
-import { makeToast } from 'app/components/Toaster';
+import { logger } from 'app/logging/logger';
-import { log } from 'app/logging/useLogger';
+import { controlNetRemoved } from 'features/controlNet/store/controlNetSlice';
 import { loraRemoved } from 'features/lora/store/loraSlice';
 import { modelSelected } from 'features/parameters/store/actions';
 import {
@@ -8,21 +8,21 @@ import {
 } from 'features/parameters/store/generationSlice';
 import { zMainModel } from 'features/parameters/types/parameterSchemas';
 import { addToast } from 'features/system/store/systemSlice';
+import { makeToast } from 'features/system/util/makeToast';
 import { forEach } from 'lodash-es';
 import { startAppListening } from '..';
-import { controlNetRemoved } from 'features/controlNet/store/controlNetSlice';
-
-const moduleLog = log.child({ module: 'models' });
 
 export const addModelSelectedListener = () => {
   startAppListening({
     actionCreator: modelSelected,
     effect: (action, { getState, dispatch }) => {
+      const log = logger('models');
+
       const state = getState();
       const result = zMainModel.safeParse(action.payload);
 
       if (!result.success) {
-        moduleLog.error(
+        log.error(
           { error: result.error.format() },
           'Failed to parse main model'
         );

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

@@ -1,4 +1,5 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
+import { controlNetRemoved } from 'features/controlNet/store/controlNetSlice';
 import { loraRemoved } from 'features/lora/store/loraSlice';
 import {
   modelChanged,
@@ -11,15 +12,17 @@ import {
 import { forEach, some } from 'lodash-es';
 import { modelsApi } from 'services/api/endpoints/models';
 import { startAppListening } from '..';
-import { controlNetRemoved } from 'features/controlNet/store/controlNetSlice';
-
-const moduleLog = log.child({ module: 'models' });
 
 export const addModelsLoadedListener = () => {
   startAppListening({
     matcher: modelsApi.endpoints.getMainModels.matchFulfilled,
     effect: async (action, { getState, dispatch }) => {
       // models loaded, we need to ensure the selected model is available and if not, select the first one
+      const log = logger('models');
+      log.info(
+        { models: action.payload.entities },
+        `Main models loaded (${action.payload.ids.length})`
+      );
 
       const currentModel = getState().generation.model;
 
@@ -46,7 +49,7 @@ export const addModelsLoadedListener = () => {
       const result = zMainModel.safeParse(firstModel);
 
       if (!result.success) {
-        moduleLog.error(
+        log.error(
           { error: result.error.format() },
           'Failed to parse main model'
         );
@@ -60,6 +63,11 @@ export const addModelsLoadedListener = () => {
     matcher: modelsApi.endpoints.getVaeModels.matchFulfilled,
     effect: async (action, { getState, dispatch }) => {
       // VAEs loaded, need to reset the VAE is it's no longer available
+      const log = logger('models');
+      log.info(
+        { models: action.payload.entities },
+        `VAEs loaded (${action.payload.ids.length})`
+      );
 
       const currentVae = getState().generation.vae;
 
@@ -91,7 +99,7 @@ export const addModelsLoadedListener = () => {
       const result = zVaeModel.safeParse(firstModel);
 
       if (!result.success) {
-        moduleLog.error(
+        log.error(
           { error: result.error.format() },
           'Failed to parse VAE model'
         );
@@ -105,6 +113,11 @@ export const addModelsLoadedListener = () => {
     matcher: modelsApi.endpoints.getLoRAModels.matchFulfilled,
     effect: async (action, { getState, dispatch }) => {
       // LoRA models loaded - need to remove missing LoRAs from state
+      const log = logger('models');
+      log.info(
+        { models: action.payload.entities },
+        `LoRAs loaded (${action.payload.ids.length})`
+      );
 
       const loras = getState().lora.loras;
 
@@ -128,6 +141,12 @@ export const addModelsLoadedListener = () => {
     matcher: modelsApi.endpoints.getControlNetModels.matchFulfilled,
     effect: async (action, { getState, dispatch }) => {
       // ControlNet models loaded - need to remove missing ControlNets from state
+      const log = logger('models');
+      log.info(
+        { models: action.payload.entities },
+        `ControlNet models loaded (${action.payload.ids.length})`
+      );
+
       const controlNets = getState().controlNet.controlNets;
 
       forEach(controlNets, (controlNet, controlNetId) => {
@@ -146,4 +165,14 @@ export const addModelsLoadedListener = () => {
       });
     },
   });
+  startAppListening({
+    matcher: modelsApi.endpoints.getTextualInversionModels.matchFulfilled,
+    effect: async (action) => {
+      const log = logger('models');
+      log.info(
+        { models: action.payload.entities },
+        `Embeddings loaded (${action.payload.ids.length})`
+      );
+    },
+  });
 };

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

@@ -1,24 +1,24 @@
+import { logger } from 'app/logging/logger';
+import { parseify } from 'common/util/serialize';
+import { nodeTemplatesBuilt } from 'features/nodes/store/nodesSlice';
+import { parseSchema } from 'features/nodes/util/parseSchema';
+import { size } from 'lodash-es';
 import { receivedOpenAPISchema } from 'services/api/thunks/schema';
 import { startAppListening } from '..';
-import { log } from 'app/logging/useLogger';
-import { parseSchema } from 'features/nodes/util/parseSchema';
-import { nodeTemplatesBuilt } from 'features/nodes/store/nodesSlice';
-import { size } from 'lodash-es';
-
-const schemaLog = log.child({ namespace: 'schema' });
 
 export const addReceivedOpenAPISchemaListener = () => {
   startAppListening({
     actionCreator: receivedOpenAPISchema.fulfilled,
-    effect: (action, { dispatch, getState }) => {
+    effect: (action, { dispatch }) => {
+      const log = logger('system');
       const schemaJSON = action.payload;
 
-      schemaLog.info({ data: { schemaJSON } }, 'Dereferenced OpenAPI schema');
+      log.debug({ schemaJSON }, 'Dereferenced OpenAPI schema');
 
       const nodeTemplates = parseSchema(schemaJSON);
 
-      schemaLog.info(
+      log.debug(
-        { data: { nodeTemplates } },
+        { nodeTemplates: parseify(nodeTemplates) },
         `Built ${size(nodeTemplates)} node templates`
       );
 
@@ -28,8 +28,9 @@ export const addReceivedOpenAPISchemaListener = () => {
 
   startAppListening({
     actionCreator: receivedOpenAPISchema.rejected,
-    effect: (action, { dispatch, getState }) => {
+    effect: () => {
-      schemaLog.error('Problem dereferencing OpenAPI Schema');
+      const log = logger('system');
+      log.error('Problem dereferencing OpenAPI Schema');
     },
   });
 };

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

@@ -1,14 +1,12 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
-import { startAppListening } from '..';
-import { sessionCanceled } from 'services/api/thunks/session';
 import { serializeError } from 'serialize-error';
-
+import { sessionCanceled } from 'services/api/thunks/session';
-const moduleLog = log.child({ namespace: 'session' });
+import { startAppListening } from '..';
 
 export const addSessionCanceledPendingListener = () => {
   startAppListening({
     actionCreator: sessionCanceled.pending,
-    effect: (action, { getState, dispatch }) => {
+    effect: () => {
       //
     },
   });
@@ -17,12 +15,10 @@ export const addSessionCanceledPendingListener = () => {
 export const addSessionCanceledFulfilledListener = () => {
   startAppListening({
     actionCreator: sessionCanceled.fulfilled,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action) => {
+      const log = logger('session');
       const { session_id } = action.meta.arg;
-      moduleLog.debug(
+      log.debug({ session_id }, `Session canceled (${session_id})`);
-        { data: { session_id } },
-        `Session canceled (${session_id})`
-      );
     },
   });
 };
@@ -30,16 +26,16 @@ export const addSessionCanceledFulfilledListener = () => {
 export const addSessionCanceledRejectedListener = () => {
   startAppListening({
     actionCreator: sessionCanceled.rejected,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action) => {
+      const log = logger('session');
+      const { session_id } = action.meta.arg;
       if (action.payload) {
-        const { arg, error } = action.payload;
+        const { error } = action.payload;
-        moduleLog.error(
+        log.error(
           {
-            data: {
+            session_id,
-              arg,
             error: serializeError(error),
           },
-          },
           `Problem canceling session`
         );
       }

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

@@ -1,14 +1,13 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
+import { parseify } from 'common/util/serialize';
 import { serializeError } from 'serialize-error';
 import { sessionCreated } from 'services/api/thunks/session';
 import { startAppListening } from '..';
 
-const moduleLog = log.child({ namespace: 'session' });
-
 export const addSessionCreatedPendingListener = () => {
   startAppListening({
     actionCreator: sessionCreated.pending,
-    effect: (action, { getState, dispatch }) => {
+    effect: () => {
       //
     },
   });
@@ -17,9 +16,13 @@ export const addSessionCreatedPendingListener = () => {
 export const addSessionCreatedFulfilledListener = () => {
   startAppListening({
     actionCreator: sessionCreated.fulfilled,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action) => {
+      const log = logger('session');
       const session = action.payload;
-      moduleLog.debug({ data: { session } }, `Session created (${session.id})`);
+      log.debug(
+        { session: parseify(session) },
+        `Session created (${session.id})`
+      );
     },
   });
 };
@@ -27,18 +30,14 @@ export const addSessionCreatedFulfilledListener = () => {
 export const addSessionCreatedRejectedListener = () => {
   startAppListening({
     actionCreator: sessionCreated.rejected,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action) => {
+      const log = logger('session');
       if (action.payload) {
-        const { arg, error } = action.payload;
+        const { error, status } = action.payload;
-        const stringifiedError = JSON.stringify(error);
+        const graph = parseify(action.meta.arg);
-        moduleLog.error(
+        log.error(
-          {
+          { graph, status, error: serializeError(error) },
-            data: {
+          `Problem creating session`
-              arg,
-              error: serializeError(error),
-            },
-          },
-          `Problem creating session: ${stringifiedError}`
         );
       }
     },

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

@@ -1,14 +1,12 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
-import { startAppListening } from '..';
-import { sessionInvoked } from 'services/api/thunks/session';
 import { serializeError } from 'serialize-error';
-
+import { sessionInvoked } from 'services/api/thunks/session';
-const moduleLog = log.child({ namespace: 'session' });
+import { startAppListening } from '..';
 
 export const addSessionInvokedPendingListener = () => {
   startAppListening({
     actionCreator: sessionInvoked.pending,
-    effect: (action, { getState, dispatch }) => {
+    effect: () => {
       //
     },
   });
@@ -17,12 +15,10 @@ export const addSessionInvokedPendingListener = () => {
 export const addSessionInvokedFulfilledListener = () => {
   startAppListening({
     actionCreator: sessionInvoked.fulfilled,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action) => {
+      const log = logger('session');
       const { session_id } = action.meta.arg;
-      moduleLog.debug(
+      log.debug({ session_id }, `Session invoked (${session_id})`);
-        { data: { session_id } },
-        `Session invoked (${session_id})`
-      );
     },
   });
 };
@@ -30,18 +26,17 @@ export const addSessionInvokedFulfilledListener = () => {
 export const addSessionInvokedRejectedListener = () => {
   startAppListening({
     actionCreator: sessionInvoked.rejected,
-    effect: (action, { getState, dispatch }) => {
+    effect: (action) => {
+      const log = logger('session');
+      const { session_id } = action.meta.arg;
       if (action.payload) {
-        const { arg, error } = action.payload;
+        const { error } = action.payload;
-        const stringifiedError = JSON.stringify(error);
+        log.error(
-        moduleLog.error(
           {
-            data: {
+            session_id,
-              arg,
             error: serializeError(error),
           },
-          },
+          `Problem invoking session`
-          `Problem invoking session: ${stringifiedError}`
         );
       }
     },

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

@@ -1,20 +1,16 @@
-import { startAppListening } from '..';
+import { logger } from 'app/logging/logger';
-import { sessionInvoked } from 'services/api/thunks/session';
-import { log } from 'app/logging/useLogger';
 import { sessionReadyToInvoke } from 'features/system/store/actions';
-
+import { sessionInvoked } from 'services/api/thunks/session';
-const moduleLog = log.child({ namespace: 'session' });
+import { startAppListening } from '..';
 
 export const addSessionReadyToInvokeListener = () => {
   startAppListening({
     actionCreator: sessionReadyToInvoke,
     effect: (action, { getState, dispatch }) => {
+      const log = logger('session');
       const { sessionId: session_id } = getState().system;
       if (session_id) {
-        moduleLog.debug(
+        log.debug({ session_id }, `Session ready to invoke (${session_id})})`);
-          { session_id },
-          `Session ready to invoke (${session_id})})`
-        );
         dispatch(sessionInvoked({ session_id }));
       }
     },

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

@@ -1,18 +1,16 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
 import { modelsApi } from 'services/api/endpoints/models';
 import { receivedOpenAPISchema } from 'services/api/thunks/schema';
 import { appSocketConnected, socketConnected } from 'services/events/actions';
 import { startAppListening } from '../..';
 
-const moduleLog = log.child({ namespace: 'socketio' });
-
 export const addSocketConnectedEventListener = () => {
   startAppListening({
     actionCreator: socketConnected,
     effect: (action, { dispatch, getState }) => {
-      const { timestamp } = action.payload;
+      const log = logger('socketio');
 
-      moduleLog.debug({ timestamp }, 'Connected');
+      log.debug('Connected');
 
       const { nodes, config } = getState();
 

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

@@ -1,17 +1,16 @@
-import { startAppListening } from '../..';
+import { logger } from 'app/logging/logger';
-import { log } from 'app/logging/useLogger';
 import {
-  socketDisconnected,
   appSocketDisconnected,
+  socketDisconnected,
 } from 'services/events/actions';
-
+import { startAppListening } from '../..';
-const moduleLog = log.child({ namespace: 'socketio' });
 
 export const addSocketDisconnectedEventListener = () => {
   startAppListening({
     actionCreator: socketDisconnected,
-    effect: (action, { dispatch, getState }) => {
+    effect: (action, { dispatch }) => {
-      moduleLog.debug(action.payload, 'Disconnected');
+      const log = logger('socketio');
+      log.debug('Disconnected');
       // pass along the socket event as an application action
       dispatch(appSocketDisconnected(action.payload));
     },

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

@@ -1,28 +1,27 @@
-import { startAppListening } from '../..';
+import { logger } from 'app/logging/logger';
-import { log } from 'app/logging/useLogger';
 import {
   appSocketGeneratorProgress,
   socketGeneratorProgress,
 } from 'services/events/actions';
-
+import { startAppListening } from '../..';
-const moduleLog = log.child({ namespace: 'socketio' });
 
 export const addGeneratorProgressEventListener = () => {
   startAppListening({
     actionCreator: socketGeneratorProgress,
     effect: (action, { dispatch, getState }) => {
+      const log = logger('socketio');
       if (
         getState().system.canceledSession ===
         action.payload.data.graph_execution_state_id
       ) {
-        moduleLog.trace(
+        log.trace(
           action.payload,
           'Ignored generator progress for canceled session'
         );
         return;
       }
 
-      moduleLog.trace(
+      log.trace(
         action.payload,
         `Generator progress (${action.payload.data.node.type})`
       );

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

@@ -1,20 +1,16 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
 import {
   appSocketGraphExecutionStateComplete,
   socketGraphExecutionStateComplete,
 } from 'services/events/actions';
 import { startAppListening } from '../..';
 
-const moduleLog = log.child({ namespace: 'socketio' });
-
 export const addGraphExecutionStateCompleteEventListener = () => {
   startAppListening({
     actionCreator: socketGraphExecutionStateComplete,
-    effect: (action, { dispatch, getState }) => {
+    effect: (action, { dispatch }) => {
-      moduleLog.debug(
+      const log = logger('socketio');
-        action.payload,
+      log.debug(action.payload, 'Session complete');
-        `Session invocation complete (${action.payload.data.graph_execution_state_id})`
-      );
       // pass along the socket event as an application action
       dispatch(appSocketGraphExecutionStateComplete(action.payload));
     },

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

@@ -1,11 +1,12 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
+import { parseify } from 'common/util/serialize';
 import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
 import {
-  IMAGE_CATEGORIES,
   boardIdSelected,
   galleryViewChanged,
   imageSelected,
 } from 'features/gallery/store/gallerySlice';
+import { IMAGE_CATEGORIES } from 'features/gallery/store/types';
 import { progressImageSet } from 'features/system/store/systemSlice';
 import { imagesAdapter, imagesApi } from 'services/api/endpoints/images';
 import { isImageOutput } from 'services/api/guards';
@@ -16,15 +17,16 @@ import {
 } from 'services/events/actions';
 import { startAppListening } from '../..';
 
-const moduleLog = log.child({ namespace: 'socketio' });
 const nodeDenylist = ['dataURL_image'];
 
 export const addInvocationCompleteEventListener = () => {
   startAppListening({
     actionCreator: socketInvocationComplete,
-    effect: async (action, { dispatch, getState, take }) => {
+    effect: async (action, { dispatch, getState }) => {
-      moduleLog.debug(
+      const log = logger('socketio');
-        { data: action.payload },
+      const { data } = action.payload;
+      log.debug(
+        { data: parseify(data) },
         `Invocation complete (${action.payload.data.node.type})`
       );
       const session_id = action.payload.data.graph_execution_state_id;
@@ -36,7 +38,6 @@ export const addInvocationCompleteEventListener = () => {
         dispatch(sessionCanceled({ session_id }));
       }
 
-      const { data } = action.payload;
       const { result, node, graph_execution_state_id } = data;
 
       // This complete event has an associated image output

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

@@ -1,19 +1,18 @@
-import { startAppListening } from '../..';
+import { logger } from 'app/logging/logger';
-import { log } from 'app/logging/useLogger';
 import {
   appSocketInvocationError,
   socketInvocationError,
 } from 'services/events/actions';
-
+import { startAppListening } from '../..';
-const moduleLog = log.child({ namespace: 'socketio' });
 
 export const addInvocationErrorEventListener = () => {
   startAppListening({
     actionCreator: socketInvocationError,
-    effect: (action, { dispatch, getState }) => {
+    effect: (action, { dispatch }) => {
-      moduleLog.error(
+      const log = logger('socketio');
+      log.error(
         action.payload,
-        `Invocation error (${action.payload.data.node.type}): ${action.payload.data.error}`
+        `Invocation error (${action.payload.data.node.type})`
       );
       dispatch(appSocketInvocationError(action.payload));
     },

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

@@ -0,0 +1,20 @@
+import { logger } from 'app/logging/logger';
+import {
+  appSocketInvocationRetrievalError,
+  socketInvocationRetrievalError,
+} from 'services/events/actions';
+import { startAppListening } from '../..';
+
+export const addInvocationRetrievalErrorEventListener = () => {
+  startAppListening({
+    actionCreator: socketInvocationRetrievalError,
+    effect: (action, { dispatch }) => {
+      const log = logger('socketio');
+      log.error(
+        action.payload,
+        `Invocation retrieval error (${action.payload.data.graph_execution_state_id})`
+      );
+      dispatch(appSocketInvocationRetrievalError(action.payload));
+    },
+  });
+};

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

@@ -1,31 +1,27 @@
-import { startAppListening } from '../..';
+import { logger } from 'app/logging/logger';
-import { log } from 'app/logging/useLogger';
 import {
   appSocketInvocationStarted,
   socketInvocationStarted,
 } from 'services/events/actions';
-
+import { startAppListening } from '../..';
-const moduleLog = log.child({ namespace: 'socketio' });
 
 export const addInvocationStartedEventListener = () => {
   startAppListening({
     actionCreator: socketInvocationStarted,
     effect: (action, { dispatch, getState }) => {
+      const log = logger('socketio');
       if (
         getState().system.canceledSession ===
         action.payload.data.graph_execution_state_id
       ) {
-        moduleLog.trace(
+        log.trace(
           action.payload,
           'Ignored invocation started for canceled session'
         );
         return;
       }
 
-      moduleLog.debug(
+      log.debug(action.payload, 'Invocation started');
-        action.payload,
-        `Invocation started (${action.payload.data.node.type})`
-      );
       dispatch(appSocketInvocationStarted(action.payload));
     },
   });

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

@@ -0,0 +1,49 @@
+import { logger } from 'app/logging/logger';
+import {
+  appSocketModelLoadCompleted,
+  appSocketModelLoadStarted,
+  socketModelLoadCompleted,
+  socketModelLoadStarted,
+} from 'services/events/actions';
+import { startAppListening } from '../..';
+
+export const addModelLoadEventListener = () => {
+  startAppListening({
+    actionCreator: socketModelLoadStarted,
+    effect: (action, { dispatch }) => {
+      const log = logger('socketio');
+      const { base_model, model_name, model_type, submodel } =
+        action.payload.data;
+
+      let message = `Model load started: ${base_model}/${model_type}/${model_name}`;
+
+      if (submodel) {
+        message = message.concat(`/${submodel}`);
+      }
+
+      log.debug(action.payload, message);
+
+      // pass along the socket event as an application action
+      dispatch(appSocketModelLoadStarted(action.payload));
+    },
+  });
+
+  startAppListening({
+    actionCreator: socketModelLoadCompleted,
+    effect: (action, { dispatch }) => {
+      const log = logger('socketio');
+      const { base_model, model_name, model_type, submodel } =
+        action.payload.data;
+
+      let message = `Model load complete: ${base_model}/${model_type}/${model_name}`;
+
+      if (submodel) {
+        message = message.concat(`/${submodel}`);
+      }
+
+      log.debug(action.payload, message);
+      // pass along the socket event as an application action
+      dispatch(appSocketModelLoadCompleted(action.payload));
+    },
+  });
+};

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

@@ -1,28 +0,0 @@
-import { log } from 'app/logging/useLogger';
-import {
-  appSocketModelLoadCompleted,
-  socketModelLoadCompleted,
-} from 'services/events/actions';
-import { startAppListening } from '../..';
-
-const moduleLog = log.child({ namespace: 'socketio' });
-
-export const addModelLoadCompletedEventListener = () => {
-  startAppListening({
-    actionCreator: socketModelLoadCompleted,
-    effect: (action, { dispatch, getState }) => {
-      const { model_name, model_type, submodel } = action.payload.data;
-
-      let modelString = `${model_type} model: ${model_name}`;
-
-      if (submodel) {
-        modelString = modelString.concat(`, submodel: ${submodel}`);
-      }
-
-      moduleLog.debug(action.payload, `Model load completed (${modelString})`);
-
-      // pass along the socket event as an application action
-      dispatch(appSocketModelLoadCompleted(action.payload));
-    },
-  });
-};

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

@@ -1,28 +0,0 @@
-import { log } from 'app/logging/useLogger';
-import {
-  appSocketModelLoadStarted,
-  socketModelLoadStarted,
-} from 'services/events/actions';
-import { startAppListening } from '../..';
-
-const moduleLog = log.child({ namespace: 'socketio' });
-
-export const addModelLoadStartedEventListener = () => {
-  startAppListening({
-    actionCreator: socketModelLoadStarted,
-    effect: (action, { dispatch, getState }) => {
-      const { model_name, model_type, submodel } = action.payload.data;
-
-      let modelString = `${model_type} model: ${model_name}`;
-
-      if (submodel) {
-        modelString = modelString.concat(`, submodel: ${submodel}`);
-      }
-
-      moduleLog.debug(action.payload, `Model load started (${modelString})`);
-
-      // pass along the socket event as an application action
-      dispatch(appSocketModelLoadStarted(action.payload));
-    },
-  });
-};

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

@@ -0,0 +1,20 @@
+import { logger } from 'app/logging/logger';
+import {
+  appSocketSessionRetrievalError,
+  socketSessionRetrievalError,
+} from 'services/events/actions';
+import { startAppListening } from '../..';
+
+export const addSessionRetrievalErrorEventListener = () => {
+  startAppListening({
+    actionCreator: socketSessionRetrievalError,
+    effect: (action, { dispatch }) => {
+      const log = logger('socketio');
+      log.error(
+        action.payload,
+        `Session retrieval error (${action.payload.data.graph_execution_state_id})`
+      );
+      dispatch(appSocketSessionRetrievalError(action.payload));
+    },
+  });
+};

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

@@ -1,17 +1,13 @@
-import { startAppListening } from '../..';
+import { logger } from 'app/logging/logger';
-import { log } from 'app/logging/useLogger';
 import { appSocketSubscribed, socketSubscribed } from 'services/events/actions';
-
+import { startAppListening } from '../..';
-const moduleLog = log.child({ namespace: 'socketio' });
 
 export const addSocketSubscribedEventListener = () => {
   startAppListening({
     actionCreator: socketSubscribed,
-    effect: (action, { dispatch, getState }) => {
+    effect: (action, { dispatch }) => {
-      moduleLog.debug(
+      const log = logger('socketio');
-        action.payload,
+      log.debug(action.payload, 'Subscribed');
-        `Subscribed (${action.payload.sessionId}))`
-      );
       dispatch(appSocketSubscribed(action.payload));
     },
   });

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

@@ -1,20 +1,16 @@
-import { startAppListening } from '../..';
+import { logger } from 'app/logging/logger';
-import { log } from 'app/logging/useLogger';
 import {
   appSocketUnsubscribed,
   socketUnsubscribed,
 } from 'services/events/actions';
-
+import { startAppListening } from '../..';
-const moduleLog = log.child({ namespace: 'socketio' });
 
 export const addSocketUnsubscribedEventListener = () => {
   startAppListening({
     actionCreator: socketUnsubscribed,
-    effect: (action, { dispatch, getState }) => {
+    effect: (action, { dispatch }) => {
-      moduleLog.debug(
+      const log = logger('socketio');
-        action.payload,
+      log.debug(action.payload, 'Unsubscribed');
-        `Unsubscribed (${action.payload.sessionId})`
-      );
       dispatch(appSocketUnsubscribed(action.payload));
     },
   });

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

@@ -1,15 +1,12 @@
-import { log } from 'app/logging/useLogger';
 import { stagingAreaImageSaved } from 'features/canvas/store/actions';
 import { addToast } from 'features/system/store/systemSlice';
 import { imagesApi } from 'services/api/endpoints/images';
 import { startAppListening } from '..';
 
-const moduleLog = log.child({ namespace: 'canvas' });
-
 export const addStagingAreaImageSavedListener = () => {
   startAppListening({
     actionCreator: stagingAreaImageSaved,
-    effect: async (action, { dispatch, getState, take }) => {
+    effect: async (action, { dispatch, getState }) => {
       const { imageDTO } = action.payload;
 
       try {

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

@@ -1,12 +1,9 @@
 import { createAction } from '@reduxjs/toolkit';
-import { log } from 'app/logging/useLogger';
 import { buildAdHocUpscaleGraph } from 'features/nodes/util/graphBuilders/buildAdHocUpscaleGraph';
 import { sessionReadyToInvoke } from 'features/system/store/actions';
 import { sessionCreated } from 'services/api/thunks/session';
 import { startAppListening } from '..';
 
-const moduleLog = log.child({ namespace: 'upscale' });
-
 export const upscaleRequested = createAction<{ image_name: string }>(
   `upscale/upscaleRequested`
 );
@@ -14,10 +11,7 @@ export const upscaleRequested = createAction<{ image_name: string }>(
 export const addUpscaleRequestedListener = () => {
   startAppListening({
     actionCreator: upscaleRequested,
-    effect: async (
+    effect: async (action, { dispatch, getState, take }) => {
-      action,
-      { dispatch, getState, take, unsubscribe, subscribe }
-    ) => {
       const { image_name } = action.payload;
       const { esrganModelName } = getState().postprocessing;
 

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

@@ -1,4 +1,4 @@
-import { log } from 'app/logging/useLogger';
+import { logger } from 'app/logging/logger';
 import { userInvoked } from 'app/store/actions';
 import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
 import {
@@ -15,8 +15,7 @@ import { imagesApi } from 'services/api/endpoints/images';
 import { sessionCreated } from 'services/api/thunks/session';
 import { ImageDTO } from 'services/api/types';
 import { startAppListening } from '..';
-
+import { parseify } from 'common/util/serialize';
-const moduleLog = log.child({ namespace: 'invoke' });
 
 /**
  * This listener is responsible invoking the canvas. This involves a number of steps:
@@ -36,13 +35,29 @@ export const addUserInvokedCanvasListener = () => {
     predicate: (action): action is ReturnType<typeof userInvoked> =>
       userInvoked.match(action) && action.payload === 'unifiedCanvas',
     effect: async (action, { getState, dispatch, take }) => {
+      const log = logger('session');
+
       const state = getState();
 
+      const {
+        layerState,
+        boundingBoxCoordinates,
+        boundingBoxDimensions,
+        isMaskEnabled,
+        shouldPreserveMaskedArea,
+      } = state.canvas;
+
       // Build canvas blobs
-      const canvasBlobsAndImageData = await getCanvasData(state);
+      const canvasBlobsAndImageData = await getCanvasData(
+        layerState,
+        boundingBoxCoordinates,
+        boundingBoxDimensions,
+        isMaskEnabled,
+        shouldPreserveMaskedArea
+      );
 
       if (!canvasBlobsAndImageData) {
-        moduleLog.error('Unable to create canvas data');
+        log.error('Unable to create canvas data');
         return;
       }
 
@@ -64,7 +79,7 @@ export const addUserInvokedCanvasListener = () => {
         ]);
       }
 
-      moduleLog.debug(`Generation mode: ${generationMode}`);
+      log.debug(`Generation mode: ${generationMode}`);
 
       // Temp placeholders for the init and mask images
       let canvasInitImage: ImageDTO | undefined;
@@ -105,7 +120,7 @@ export const addUserInvokedCanvasListener = () => {
         canvasMaskImage
       );
 
-      moduleLog.debug({ graph }, `Canvas graph built`);
+      log.debug({ graph: parseify(graph) }, `Canvas graph built`);
 
       // currently this action is just listened to for logging
       dispatch(canvasGraphBuilt(graph));

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

@@ -1,23 +1,23 @@
-import { startAppListening } from '..';
+import { logger } from 'app/logging/logger';
-import { sessionCreated } from 'services/api/thunks/session';
-import { log } from 'app/logging/useLogger';
-import { imageToImageGraphBuilt } from 'features/nodes/store/actions';
 import { userInvoked } from 'app/store/actions';
-import { sessionReadyToInvoke } from 'features/system/store/actions';
+import { parseify } from 'common/util/serialize';
+import { imageToImageGraphBuilt } from 'features/nodes/store/actions';
 import { buildLinearImageToImageGraph } from 'features/nodes/util/graphBuilders/buildLinearImageToImageGraph';
-
+import { sessionReadyToInvoke } from 'features/system/store/actions';
-const moduleLog = log.child({ namespace: 'invoke' });
+import { sessionCreated } from 'services/api/thunks/session';
+import { startAppListening } from '..';
 
 export const addUserInvokedImageToImageListener = () => {
   startAppListening({
     predicate: (action): action is ReturnType<typeof userInvoked> =>
       userInvoked.match(action) && action.payload === 'img2img',
     effect: async (action, { getState, dispatch, take }) => {
+      const log = logger('session');
       const state = getState();
 
       const graph = buildLinearImageToImageGraph(state);
       dispatch(imageToImageGraphBuilt(graph));
-      moduleLog.debug({ data: graph }, 'Image to Image graph built');
+      log.debug({ graph: parseify(graph) }, 'Image to Image graph built');
 
       dispatch(sessionCreated({ graph }));
 

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

@@ -1,23 +1,23 @@
-import { startAppListening } from '..';
+import { logger } from 'app/logging/logger';
-import { sessionCreated } from 'services/api/thunks/session';
-import { buildNodesGraph } from 'features/nodes/util/graphBuilders/buildNodesGraph';
-import { log } from 'app/logging/useLogger';
-import { nodesGraphBuilt } from 'features/nodes/store/actions';
 import { userInvoked } from 'app/store/actions';
+import { parseify } from 'common/util/serialize';
+import { nodesGraphBuilt } from 'features/nodes/store/actions';
+import { buildNodesGraph } from 'features/nodes/util/graphBuilders/buildNodesGraph';
 import { sessionReadyToInvoke } from 'features/system/store/actions';
-
+import { sessionCreated } from 'services/api/thunks/session';
-const moduleLog = log.child({ namespace: 'invoke' });
+import { startAppListening } from '..';
 
 export const addUserInvokedNodesListener = () => {
   startAppListening({
     predicate: (action): action is ReturnType<typeof userInvoked> =>
       userInvoked.match(action) && action.payload === 'nodes',
     effect: async (action, { getState, dispatch, take }) => {
+      const log = logger('session');
       const state = getState();
 
       const graph = buildNodesGraph(state);
       dispatch(nodesGraphBuilt(graph));
-      moduleLog.debug({ data: graph }, 'Nodes graph built');
+      log.debug({ graph: parseify(graph) }, 'Nodes graph built');
 
       dispatch(sessionCreated({ graph }));
 

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

@@ -1,25 +1,25 @@
-import { startAppListening } from '..';
+import { logger } from 'app/logging/logger';
-import { sessionCreated } from 'services/api/thunks/session';
-import { log } from 'app/logging/useLogger';
-import { textToImageGraphBuilt } from 'features/nodes/store/actions';
 import { userInvoked } from 'app/store/actions';
-import { sessionReadyToInvoke } from 'features/system/store/actions';
+import { parseify } from 'common/util/serialize';
+import { textToImageGraphBuilt } from 'features/nodes/store/actions';
 import { buildLinearTextToImageGraph } from 'features/nodes/util/graphBuilders/buildLinearTextToImageGraph';
-
+import { sessionReadyToInvoke } from 'features/system/store/actions';
-const moduleLog = log.child({ namespace: 'invoke' });
+import { sessionCreated } from 'services/api/thunks/session';
+import { startAppListening } from '..';
 
 export const addUserInvokedTextToImageListener = () => {
   startAppListening({
     predicate: (action): action is ReturnType<typeof userInvoked> =>
       userInvoked.match(action) && action.payload === 'txt2img',
     effect: async (action, { getState, dispatch, take }) => {
+      const log = logger('session');
       const state = getState();
 
       const graph = buildLinearTextToImageGraph(state);
 
       dispatch(textToImageGraphBuilt(graph));
 
-      moduleLog.debug({ data: graph }, 'Text to Image graph built');
+      log.debug({ graph: parseify(graph) }, 'Text to Image graph built');
 
       dispatch(sessionCreated({ graph }));
 

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

@@ -5,13 +5,9 @@ import {
   combineReducers,
   configureStore,
 } from '@reduxjs/toolkit';
-
-import dynamicMiddlewares from 'redux-dynamic-middlewares';
-import { rememberEnhancer, rememberReducer } from 'redux-remember';
-
 import canvasReducer from 'features/canvas/store/canvasSlice';
 import controlNetReducer from 'features/controlNet/store/controlNetSlice';
-import dynamicPromptsReducer from 'features/dynamicPrompts/store/slice';
+import dynamicPromptsReducer from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import boardsReducer from 'features/gallery/store/boardSlice';
 import galleryReducer from 'features/gallery/store/gallerySlice';
 import imageDeletionReducer from 'features/imageDeletion/store/imageDeletionSlice';
@@ -24,9 +20,8 @@ import systemReducer from 'features/system/store/systemSlice';
 import modelmanagerReducer from 'features/ui/components/tabs/ModelManager/store/modelManagerSlice';
 import hotkeysReducer from 'features/ui/store/hotkeysSlice';
 import uiReducer from 'features/ui/store/uiSlice';
-
+import dynamicMiddlewares from 'redux-dynamic-middlewares';
-import { listenerMiddleware } from './middleware/listenerMiddleware';
+import { rememberEnhancer, rememberReducer } from 'redux-remember';
-
 import { api } from 'services/api';
 import { LOCALSTORAGE_PREFIX } from './constants';
 import { serialize } from './enhancers/reduxRemember/serialize';
@@ -34,6 +29,7 @@ import { unserialize } from './enhancers/reduxRemember/unserialize';
 import { actionSanitizer } from './middleware/devtools/actionSanitizer';
 import { actionsDenylist } from './middleware/devtools/actionsDenylist';
 import { stateSanitizer } from './middleware/devtools/stateSanitizer';
+import { listenerMiddleware } from './middleware/listenerMiddleware';
 
 const allReducers = {
   canvas: canvasReducer,
@@ -121,6 +117,7 @@ export const store = configureStore({
 
 export type AppGetState = typeof store.getState;
 export type RootState = ReturnType<typeof store.getState>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AppThunkDispatch = ThunkDispatch<RootState, any, AnyAction>;
 export type AppDispatch = typeof store.dispatch;
 export const stateSelector = (state: RootState) => state;

invokeai/frontend/web/src/app/store/storeUtils.ts

@@ -1,8 +0,0 @@
-import { createAsyncThunk } from '@reduxjs/toolkit';
-import { AppDispatch, RootState } from 'app/store/store';
-
-// https://redux-toolkit.js.org/usage/usage-with-typescript#defining-a-pre-typed-createasyncthunk
-export const createAppAsyncThunk = createAsyncThunk.withTypes<{
-  state: RootState;
-  dispatch: AppDispatch;
-}>();

invokeai/frontend/web/src/common/components/GuideIcon.tsx

@@ -1,23 +0,0 @@
-import { Box, forwardRef, Icon } from '@chakra-ui/react';
-import { Feature } from 'app/features';
-import { memo } from 'react';
-import { IconType } from 'react-icons';
-import { MdHelp } from 'react-icons/md';
-import GuidePopover from './GuidePopover';
-
-type GuideIconProps = {
-  feature: Feature;
-  icon?: IconType;
-};
-
-const GuideIcon = forwardRef(
-  ({ feature, icon = MdHelp }: GuideIconProps, ref) => (
-    <GuidePopover feature={feature}>
-      <Box ref={ref}>
-        <Icon marginBottom="-.15rem" as={icon} />
-      </Box>
-    </GuidePopover>
-  )
-);
-
-export default memo(GuideIcon);

invokeai/frontend/web/src/common/components/GuidePopover.tsx

@@ -1,49 +0,0 @@
-import {
-  Box,
-  Popover,
-  PopoverArrow,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-} from '@chakra-ui/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { Feature, useFeatureHelpInfo } from 'app/features';
-import { useAppSelector } from 'app/store/storeHooks';
-import { systemSelector } from 'features/system/store/systemSelectors';
-import { SystemState } from 'features/system/store/systemSlice';
-import { memo, ReactElement } from 'react';
-
-type GuideProps = {
-  children: ReactElement;
-  feature: Feature;
-};
-
-const guidePopoverSelector = createSelector(
-  systemSelector,
-  (system: SystemState) => system.shouldDisplayGuides
-);
-
-const GuidePopover = ({ children, feature }: GuideProps) => {
-  const shouldDisplayGuides = useAppSelector(guidePopoverSelector);
-  const { text } = useFeatureHelpInfo(feature);
-
-  if (!shouldDisplayGuides) return null;
-
-  return (
-    <Popover trigger="hover" isLazy>
-      <PopoverTrigger>
-        <Box>{children}</Box>
-      </PopoverTrigger>
-      <PopoverContent
-        maxWidth="400px"
-        onClick={(e) => e.preventDefault()}
-        cursor="initial"
-      >
-        <PopoverArrow />
-        <PopoverBody>{text}</PopoverBody>
-      </PopoverContent>
-    </Popover>
-  );
-};
-
-export default memo(GuidePopover);

invokeai/frontend/web/src/common/components/IAIDndImage.tsx

@@ -169,7 +169,9 @@ const IAIDndImage = (props: IAIDndImageProps) => {
                   ...imageSx,
                 }}
               />
-              {withMetadataOverlay && <ImageMetadataOverlay image={imageDTO} />}
+              {withMetadataOverlay && (
+                <ImageMetadataOverlay imageDTO={imageDTO} />
+              )}
               <SelectionOverlay
                 isSelected={isSelected}
                 isHovered={withHoverOverlay ? isHovered : false}

invokeai/frontend/web/src/common/components/IAIDroppable.tsx

@@ -13,11 +13,10 @@ type IAIDroppableProps = {
   dropLabel?: ReactNode;
   disabled?: boolean;
   data?: TypesafeDroppableData;
-  hoverRef?: React.Ref<HTMLDivElement>;
 };
 
 const IAIDroppable = (props: IAIDroppableProps) => {
-  const { dropLabel, data, disabled, hoverRef } = props;
+  const { dropLabel, data, disabled } = props;
   const dndId = useRef(uuidv4());
 
   const { isOver, setNodeRef, active } = useDroppable({

invokeai/frontend/web/src/common/components/IAIMantineSelectItemWithTooltip.tsx

@@ -10,7 +10,10 @@ interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
 }
 
 const IAIMantineSelectItemWithTooltip = forwardRef<HTMLDivElement, ItemProps>(
-  ({ label, tooltip, description, disabled, ...others }: ItemProps, ref) => (
+  (
+    { label, tooltip, description, disabled: _disabled, ...others }: ItemProps,
+    ref
+  ) => (
     <Tooltip label={tooltip} placement="top" hasArrow openDelay={500}>
       <Box ref={ref} {...others}>
         <Box>

invokeai/frontend/web/src/common/components/IAISlider.tsx

@@ -1,5 +1,4 @@
 import {
-  ChakraProps,
   FormControl,
   FormControlProps,
   FormLabel,
@@ -24,16 +23,15 @@ import {
   Tooltip,
   TooltipProps,
 } from '@chakra-ui/react';
-import { clamp } from 'lodash-es';
-
 import { useAppDispatch } from 'app/store/storeHooks';
 import { roundDownToMultiple } from 'common/util/roundDownToMultiple';
 import { shiftKeyPressed } from 'features/ui/store/hotkeysSlice';
+import { clamp } from 'lodash-es';
 import {
   FocusEvent,
   KeyboardEvent,
-  memo,
   MouseEvent,
+  memo,
   useCallback,
   useEffect,
   useMemo,

invokeai/frontend/web/src/common/components/ImageMetadataOverlay.tsx

@@ -1,21 +1,11 @@
 import { Badge, Flex } from '@chakra-ui/react';
-import { isString } from 'lodash-es';
-import { useMemo } from 'react';
 import { ImageDTO } from 'services/api/types';
 
 type ImageMetadataOverlayProps = {
-  image: ImageDTO;
+  imageDTO: ImageDTO;
 };
 
-const ImageMetadataOverlay = ({ image }: ImageMetadataOverlayProps) => {
+const ImageMetadataOverlay = ({ imageDTO }: ImageMetadataOverlayProps) => {
-  const model = useMemo(() => {
-    if (!isString(image.metadata?.model)) {
-      return;
-    }
-
-    return image.metadata?.model;
-  }, [image.metadata]);
-
   return (
     <Flex
       sx={{
@@ -30,13 +20,8 @@ const ImageMetadataOverlay = ({ image }: ImageMetadataOverlayProps) => {
       }}
     >
       <Badge variant="solid" colorScheme="base">
-        {image.width} × {image.height}
+        {imageDTO.width} × {imageDTO.height}
       </Badge>
-      {model && (
-        <Badge variant="solid" colorScheme="base">
-          {model}
-        </Badge>
-      )}
     </Flex>
   );
 };

invokeai/frontend/web/src/common/hooks/useIsReadyToInvoke.ts

@@ -2,17 +2,16 @@ import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
-import { validateSeedWeights } from 'common/util/seedWeightPairs';
+// import { validateSeedWeights } from 'common/util/seedWeightPairs';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { modelsApi } from '../../services/api/endpoints/models';
 import { forEach } from 'lodash-es';
+import { modelsApi } from '../../services/api/endpoints/models';
 
 const readinessSelector = createSelector(
   [stateSelector, activeTabNameSelector],
   (state, activeTabName) => {
     const { generation, system } = state;
-    const { shouldGenerateVariations, seedWeights, initialImage, seed } =
+    const { initialImage } = generation;
-      generation;
 
     const { isProcessing, isConnected } = system;
 
@@ -44,19 +43,19 @@ const readinessSelector = createSelector(
       reasonsWhyNotReady.push('System Disconnected');
     }
 
-    // Cannot generate variations without valid seed weights
+    // // Cannot generate variations without valid seed weights
-    if (
+    // if (
-      shouldGenerateVariations &&
+    //   shouldGenerateVariations &&
-      (!(validateSeedWeights(seedWeights) || seedWeights === '') || seed === -1)
+    //   (!(validateSeedWeights(seedWeights) || seedWeights === '') || seed === -1)
-    ) {
+    // ) {
-      isReady = false;
+    //   isReady = false;
-      reasonsWhyNotReady.push('Seed-Weights badly formatted.');
+    //   reasonsWhyNotReady.push('Seed-Weights badly formatted.');
-    }
+    // }
 
     forEach(state.controlNet.controlNets, (controlNet, id) => {
       if (!controlNet.model) {
         isReady = false;
-        reasonsWhyNotReady.push('ControlNet ${id} has no model selected.');
+        reasonsWhyNotReady.push(`ControlNet ${id} has no model selected.`);
       }
     });
 

invokeai/frontend/web/src/common/util/getPromptAndNegative.ts

@@ -1,31 +0,0 @@
-import * as InvokeAI from 'app/types/invokeai';
-import promptToString from './promptToString';
-
-export function getPromptAndNegative(inputPrompt: InvokeAI.Prompt) {
-  let prompt: string =
-    typeof inputPrompt === 'string' ? inputPrompt : promptToString(inputPrompt);
-
-  let negativePrompt = '';
-
-  // Matches all negative prompts, 1st capturing group is the prompt itself
-  const negativePromptRegExp = new RegExp(/\[([^\][]*)]/, 'gi');
-
-  // Grab the actual prompt matches (capturing group 1 is 1st index of match)
-  const negativePromptMatches = [...prompt.matchAll(negativePromptRegExp)].map(
-    (match) => match[1]
-  );
-
-  if (negativePromptMatches.length) {
-    // Build the negative prompt itself
-    negativePrompt = negativePromptMatches.join(' ');
-
-    // Replace each match, including its surrounding brackets
-    // Remove each pair of empty brackets
-    // Trim whitespace
-    negativePromptMatches.forEach((match) => {
-      prompt = prompt.replace(`[${match}]`, '').replaceAll('[]', '').trim();
-    });
-  }
-
-  return [prompt, negativePrompt];
-}

invokeai/frontend/web/src/common/util/promptToString.ts

@@ -1,20 +0,0 @@
-import * as InvokeAI from 'app/types/invokeai';
-
-const promptToString = (prompt: InvokeAI.Prompt): string => {
-  if (typeof prompt === 'string') {
-    return prompt;
-  }
-
-  if (prompt.length === 1) {
-    return prompt[0].prompt;
-  }
-
-  return prompt
-    .map(
-      (promptItem: InvokeAI.PromptItem): string =>
-        `${promptItem.prompt}:${promptItem.weight}`
-    )
-    .join(' ');
-};
-
-export default promptToString;

invokeai/frontend/web/src/common/util/seedWeightPairs.ts

@@ -1,68 +1,71 @@
-import * as InvokeAI from 'app/types/invokeai';
+// TODO: Restore variations
+// Support code from v2.3 in here.
 
-export const stringToSeedWeights = (
+// export const stringToSeedWeights = (
-  string: string
+//   string: string
-): InvokeAI.SeedWeights | boolean => {
+// ): InvokeAI.SeedWeights | boolean => {
-  const stringPairs = string.split(',');
+//   const stringPairs = string.split(',');
-  const arrPairs = stringPairs.map((p) => p.split(':'));
+//   const arrPairs = stringPairs.map((p) => p.split(':'));
-  const pairs = arrPairs.map((p: Array<string>): InvokeAI.SeedWeightPair => {
+//   const pairs = arrPairs.map((p: Array<string>): InvokeAI.SeedWeightPair => {
-    return { seed: Number(p[0]), weight: Number(p[1]) };
+//     return { seed: Number(p[0]), weight: Number(p[1]) };
-  });
+//   });
 
-  if (!validateSeedWeights(pairs)) {
+//   if (!validateSeedWeights(pairs)) {
-    return false;
+//     return false;
-  }
+//   }
 
-  return pairs;
+//   return pairs;
-};
+// };
 
-export const validateSeedWeights = (
+// export const validateSeedWeights = (
-  seedWeights: InvokeAI.SeedWeights | string
+//   seedWeights: InvokeAI.SeedWeights | string
-): boolean => {
+// ): boolean => {
-  return typeof seedWeights === 'string'
+//   return typeof seedWeights === 'string'
-    ? Boolean(stringToSeedWeights(seedWeights))
+//     ? Boolean(stringToSeedWeights(seedWeights))
-    : Boolean(
+//     : Boolean(
-        seedWeights.length &&
+//         seedWeights.length &&
-          !seedWeights.some((pair: InvokeAI.SeedWeightPair) => {
+//           !seedWeights.some((pair: InvokeAI.SeedWeightPair) => {
-            const { seed, weight } = pair;
+//             const { seed, weight } = pair;
-            const isSeedValid = !isNaN(parseInt(seed.toString(), 10));
+//             const isSeedValid = !isNaN(parseInt(seed.toString(), 10));
-            const isWeightValid =
+//             const isWeightValid =
-              !isNaN(parseInt(weight.toString(), 10)) &&
+//               !isNaN(parseInt(weight.toString(), 10)) &&
-              weight >= 0 &&
+//               weight >= 0 &&
-              weight <= 1;
+//               weight <= 1;
-            return !(isSeedValid && isWeightValid);
+//             return !(isSeedValid && isWeightValid);
-          })
+//           })
-      );
+//       );
-};
+// };
 
-export const seedWeightsToString = (
+// export const seedWeightsToString = (
-  seedWeights: InvokeAI.SeedWeights
+//   seedWeights: InvokeAI.SeedWeights
-): string => {
+// ): string => {
-  return seedWeights.reduce((acc, pair, i, arr) => {
+//   return seedWeights.reduce((acc, pair, i, arr) => {
-    const { seed, weight } = pair;
+//     const { seed, weight } = pair;
-    acc += `${seed}:${weight}`;
+//     acc += `${seed}:${weight}`;
-    if (i !== arr.length - 1) {
+//     if (i !== arr.length - 1) {
-      acc += ',';
+//       acc += ',';
-    }
+//     }
-    return acc;
+//     return acc;
-  }, '');
+//   }, '');
-};
+// };
 
-export const seedWeightsToArray = (
+// export const seedWeightsToArray = (
-  seedWeights: InvokeAI.SeedWeights
+//   seedWeights: InvokeAI.SeedWeights
-): Array<Array<number>> => {
+// ): Array<Array<number>> => {
-  return seedWeights.map((pair: InvokeAI.SeedWeightPair) => [
+//   return seedWeights.map((pair: InvokeAI.SeedWeightPair) => [
-    pair.seed,
+//     pair.seed,
-    pair.weight,
+//     pair.weight,
-  ]);
+//   ]);
-};
+// };
 
-export const stringToSeedWeightsArray = (
+// export const stringToSeedWeightsArray = (
-  string: string
+//   string: string
-): Array<Array<number>> => {
+// ): Array<Array<number>> => {
-  const stringPairs = string.split(',');
+//   const stringPairs = string.split(',');
-  const arrPairs = stringPairs.map((p) => p.split(':'));
+//   const arrPairs = stringPairs.map((p) => p.split(':'));
-  return arrPairs.map(
+//   return arrPairs.map(
-    (p: Array<string>): Array<number> => [parseInt(p[0], 10), parseFloat(p[1])]
+//     (p: Array<string>): Array<number> => [parseInt(p[0], 10), parseFloat(p[1])]
-  );
+//   );
-};
+// };
+
+export default {};

invokeai/frontend/web/src/common/util/serialize.ts

@@ -0,0 +1,4 @@
+/**
+ * Serialize an object to JSON and back to a new object
+ */
+export const parseify = (obj: unknown) => JSON.parse(JSON.stringify(obj));

invokeai/frontend/web/src/features/canvas/components/IAICanvas.tsx

@@ -1,6 +1,7 @@
 import { Box, chakra, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
+import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import {
   canvasSelector,
   isStagingSelector,
@@ -8,8 +9,6 @@ import {
 import Konva from 'konva';
 import { KonvaEventObject } from 'konva/lib/Node';
 import { Vector2d } from 'konva/lib/types';
-import { isEqual } from 'lodash-es';
-
 import { useCallback, useRef } from 'react';
 import { Layer, Stage } from 'react-konva';
 import useCanvasDragMove from '../hooks/useCanvasDragMove';
@@ -34,7 +33,6 @@ import IAICanvasStagingAreaToolbar from './IAICanvasStagingAreaToolbar';
 import IAICanvasStatusText from './IAICanvasStatusText';
 import IAICanvasBoundingBox from './IAICanvasToolbar/IAICanvasBoundingBox';
 import IAICanvasToolPreview from './IAICanvasToolPreview';
-import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 
 const selector = createSelector(
   [canvasSelector, isStagingSelector],

invokeai/frontend/web/src/features/canvas/components/IAICanvasStatusText.tsx

@@ -2,8 +2,8 @@ import { Box, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
+import GenerationModeStatusText from 'features/parameters/components/Parameters/Canvas/GenerationModeStatusText';
 import { isEqual } from 'lodash-es';
-
 import { useTranslation } from 'react-i18next';
 import roundToHundreth from '../util/roundToHundreth';
 import IAICanvasStatusTextCursorPos from './IAICanvasStatusText/IAICanvasStatusTextCursorPos';
@@ -110,6 +110,7 @@ const IAICanvasStatusText = () => {
         },
       }}
     >
+      <GenerationModeStatusText />
       <Box
         style={{
           color: activeLayerColor,

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasBoundingBox.tsx

@@ -1,10 +1,10 @@
 import { createSelector } from '@reduxjs/toolkit';
+import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import {
   roundDownToMultiple,
   roundToMultiple,
 } from 'common/util/roundDownToMultiple';
-import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import {
   setBoundingBoxCoordinates,
   setBoundingBoxDimensions,
@@ -13,7 +13,6 @@ import {
   setIsTransformingBoundingBox,
   setShouldSnapToGrid,
 } from 'features/canvas/store/canvasSlice';
-import { uiSelector } from 'features/ui/store/uiSelectors';
 import Konva from 'konva';
 import { GroupConfig } from 'konva/lib/Group';
 import { KonvaEventObject } from 'konva/lib/Node';
@@ -25,8 +24,8 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import { Group, Rect, Transformer } from 'react-konva';
 
 const boundingBoxPreviewSelector = createSelector(
-  [canvasSelector, uiSelector],
+  [stateSelector],
-  (canvas, ui) => {
+  ({ canvas, generation }) => {
     const {
       boundingBoxCoordinates,
       boundingBoxDimensions,
@@ -38,7 +37,7 @@ const boundingBoxPreviewSelector = createSelector(
       shouldSnapToGrid,
     } = canvas;
 
-    const { aspectRatio } = ui;
+    const { aspectRatio } = generation;
 
     return {
       boundingBoxCoordinates,

invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx

@@ -2,7 +2,15 @@ import { Box, ButtonGroup, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIIconButton from 'common/components/IAIIconButton';
+import IAIMantineSelect from 'common/components/IAIMantineSelect';
+import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 import { useSingleAndDoubleClick } from 'common/hooks/useSingleAndDoubleClick';
+import {
+  canvasCopiedToClipboard,
+  canvasDownloadedAsImage,
+  canvasMerged,
+  canvasSavedToGallery,
+} from 'features/canvas/store/actions';
 import {
   canvasSelector,
   isStagingSelector,
@@ -21,16 +29,8 @@ import {
 } from 'features/canvas/store/canvasTypes';
 import { getCanvasBaseLayer } from 'features/canvas/util/konvaInstanceProvider';
 import { systemSelector } from 'features/system/store/systemSelectors';
+import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboard';
 import { isEqual } from 'lodash-es';
-
-import IAIMantineSearchableSelect from 'common/components/IAIMantineSearchableSelect';
-import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
-import {
-  canvasCopiedToClipboard,
-  canvasDownloadedAsImage,
-  canvasMerged,
-  canvasSavedToGallery,
-} from 'features/canvas/store/actions';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import {
@@ -48,7 +48,6 @@ import IAICanvasRedoButton from './IAICanvasRedoButton';
 import IAICanvasSettingsButtonPopover from './IAICanvasSettingsButtonPopover';
 import IAICanvasToolChooserOptions from './IAICanvasToolChooserOptions';
 import IAICanvasUndoButton from './IAICanvasUndoButton';
-import { useCopyImageToClipboard } from 'features/ui/hooks/useCopyImageToClipboard';
 
 export const selector = createSelector(
   [systemSelector, canvasSelector, isStagingSelector],
@@ -220,7 +219,7 @@ const IAICanvasToolbar = () => {
       }}
     >
       <Box w={24}>
-        <IAIMantineSearchableSelect
+        <IAIMantineSelect
           tooltip={`${t('unifiedCanvas.layer')} (Q)`}
           value={layer}
           data={LAYER_NAMES_DICT}

invokeai/frontend/web/src/features/canvas/hooks/useCanvasGenerationMode.ts

@@ -0,0 +1,72 @@
+import { useAppSelector } from 'app/store/storeHooks';
+import { GenerationMode } from 'features/canvas/store/canvasTypes';
+import { getCanvasData } from 'features/canvas/util/getCanvasData';
+import { getCanvasGenerationMode } from 'features/canvas/util/getCanvasGenerationMode';
+import { useEffect, useState } from 'react';
+import { useDebounce } from 'react-use';
+
+export const useCanvasGenerationMode = () => {
+  const layerState = useAppSelector((state) => state.canvas.layerState);
+
+  const boundingBoxCoordinates = useAppSelector(
+    (state) => state.canvas.boundingBoxCoordinates
+  );
+  const boundingBoxDimensions = useAppSelector(
+    (state) => state.canvas.boundingBoxDimensions
+  );
+  const isMaskEnabled = useAppSelector((state) => state.canvas.isMaskEnabled);
+
+  const shouldPreserveMaskedArea = useAppSelector(
+    (state) => state.canvas.shouldPreserveMaskedArea
+  );
+  const [generationMode, setGenerationMode] = useState<
+    GenerationMode | undefined
+  >();
+
+  useEffect(() => {
+    setGenerationMode(undefined);
+  }, [
+    layerState,
+    boundingBoxCoordinates,
+    boundingBoxDimensions,
+    isMaskEnabled,
+    shouldPreserveMaskedArea,
+  ]);
+
+  useDebounce(
+    async () => {
+      // Build canvas blobs
+      const canvasBlobsAndImageData = await getCanvasData(
+        layerState,
+        boundingBoxCoordinates,
+        boundingBoxDimensions,
+        isMaskEnabled,
+        shouldPreserveMaskedArea
+      );
+
+      if (!canvasBlobsAndImageData) {
+        return;
+      }
+
+      const { baseImageData, maskImageData } = canvasBlobsAndImageData;
+
+      // Determine the generation mode
+      const generationMode = getCanvasGenerationMode(
+        baseImageData,
+        maskImageData
+      );
+
+      setGenerationMode(generationMode);
+    },
+    1000,
+    [
+      layerState,
+      boundingBoxCoordinates,
+      boundingBoxDimensions,
+      isMaskEnabled,
+      shouldPreserveMaskedArea,
+    ]
+  );
+
+  return generationMode;
+};

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -4,14 +4,13 @@ import {
   roundDownToMultiple,
   roundToMultiple,
 } from 'common/util/roundDownToMultiple';
-import { IRect, Vector2d } from 'konva/lib/types';
+import { setAspectRatio } from 'features/parameters/store/generationSlice';
-import { clamp, cloneDeep } from 'lodash-es';
-//
 import {
   setActiveTab,
-  setAspectRatio,
   setShouldUseCanvasBetaLayout,
 } from 'features/ui/store/uiSlice';
+import { IRect, Vector2d } from 'konva/lib/types';
+import { clamp, cloneDeep } from 'lodash-es';
 import { RgbaColor } from 'react-colorful';
 import { sessionCanceled } from 'services/api/thunks/session';
 import { ImageDTO } from 'services/api/types';
@@ -714,7 +713,7 @@ export const canvasSlice = createSlice({
     },
     commitStagingAreaImage: (
       state,
-      action: PayloadAction<string | undefined>
+      _action: PayloadAction<string | undefined>
     ) => {
       if (!state.layerState.stagingArea.images.length) {
         return;
@@ -867,11 +866,11 @@ export const canvasSlice = createSlice({
       }
     });
 
-    builder.addCase(setShouldUseCanvasBetaLayout, (state, action) => {
+    builder.addCase(setShouldUseCanvasBetaLayout, (state) => {
       state.doesCanvasNeedScaling = true;
     });
 
-    builder.addCase(setActiveTab, (state, action) => {
+    builder.addCase(setActiveTab, (state) => {
       state.doesCanvasNeedScaling = true;
     });
     builder.addCase(setAspectRatio, (state, action) => {
@@ -883,26 +882,6 @@ export const canvasSlice = createSlice({
         );
       }
     });
-
-    // builder.addCase(imageUrlsReceived.fulfilled, (state, action) => {
-    //   const { image_name, image_url, thumbnail_url } = action.payload;
-
-    //   state.layerState.objects.forEach((object) => {
-    //     if (object.kind === 'image') {
-    //       if (object.image.image_name === image_name) {
-    //         object.image.image_url = image_url;
-    //         object.image.thumbnail_url = thumbnail_url;
-    //       }
-    //     }
-    //   });
-
-    //   state.layerState.stagingArea.images.forEach((stagedImage) => {
-    //     if (stagedImage.image.image_name === image_name) {
-    //       stagedImage.image.image_url = image_url;
-    //       stagedImage.image.thumbnail_url = thumbnail_url;
-    //     }
-    //   });
-    // });
   },
 });
 

invokeai/frontend/web/src/features/canvas/store/canvasTypes.ts

@@ -1,7 +1,5 @@
-import * as InvokeAI from 'app/types/invokeai';
 import { IRect, Vector2d } from 'konva/lib/types';
 import { RgbaColor } from 'react-colorful';
-import { ImageDTO } from 'services/api/types';
 
 export const LAYER_NAMES_DICT = [
   { label: 'Base', value: 'base' },
@@ -133,7 +131,6 @@ export interface CanvasState {
   cursorPosition: Vector2d | null;
   doesCanvasNeedScaling: boolean;
   futureLayerStates: CanvasLayerState[];
-  intermediateImage?: InvokeAI.Image;
   isCanvasInitialized: boolean;
   isDrawing: boolean;
   isMaskEnabled: boolean;
@@ -171,4 +168,7 @@ export interface CanvasState {
   stageDimensions: Dimensions;
   stageScale: number;
   tool: CanvasTool;
+  generationMode?: GenerationMode;
 }
+
+export type GenerationMode = 'txt2img' | 'img2img' | 'inpaint' | 'outpaint';

invokeai/frontend/web/src/features/canvas/util/getCanvasData.ts

@@ -1,33 +1,35 @@
-import { RootState } from 'app/store/store';
+import { logger } from 'app/logging/logger';
-import { getCanvasBaseLayer, getCanvasStage } from './konvaInstanceProvider';
+import { Vector2d } from 'konva/lib/types';
-import { isCanvasMaskLine } from '../store/canvasTypes';
+import {
-import { log } from 'app/logging/useLogger';
+  CanvasLayerState,
+  Dimensions,
+  isCanvasMaskLine,
+} from '../store/canvasTypes';
 import createMaskStage from './createMaskStage';
-import { konvaNodeToImageData } from './konvaNodeToImageData';
+import { getCanvasBaseLayer, getCanvasStage } from './konvaInstanceProvider';
 import { konvaNodeToBlob } from './konvaNodeToBlob';
-
+import { konvaNodeToImageData } from './konvaNodeToImageData';
-const moduleLog = log.child({ namespace: 'getCanvasDataURLs' });
 
 /**
  * Gets Blob and ImageData objects for the base and mask layers
  */
-export const getCanvasData = async (state: RootState) => {
+export const getCanvasData = async (
+  layerState: CanvasLayerState,
+  boundingBoxCoordinates: Vector2d,
+  boundingBoxDimensions: Dimensions,
+  isMaskEnabled: boolean,
+  shouldPreserveMaskedArea: boolean
+) => {
+  const log = logger('canvas');
+
   const canvasBaseLayer = getCanvasBaseLayer();
   const canvasStage = getCanvasStage();
 
   if (!canvasBaseLayer || !canvasStage) {
-    moduleLog.error('Unable to find canvas / stage');
+    log.error('Unable to find canvas / stage');
     return;
   }
 
-  const {
-    layerState: { objects },
-    boundingBoxCoordinates,
-    boundingBoxDimensions,
-    isMaskEnabled,
-    shouldPreserveMaskedArea,
-  } = state.canvas;
-
   const boundingBox = {
     ...boundingBoxCoordinates,
     ...boundingBoxDimensions,
@@ -58,7 +60,7 @@ export const getCanvasData = async (state: RootState) => {
 
   // For the mask layer, use the normal boundingBox
   const maskStage = await createMaskStage(
-    isMaskEnabled ? objects.filter(isCanvasMaskLine) : [], // only include mask lines, and only if mask is enabled
+    isMaskEnabled ? layerState.objects.filter(isCanvasMaskLine) : [], // only include mask lines, and only if mask is enabled
     boundingBox,
     shouldPreserveMaskedArea
   );

invokeai/frontend/web/src/features/canvas/util/getCanvasGenerationMode.ts

@@ -2,11 +2,12 @@ import {
   areAnyPixelsBlack,
   getImageDataTransparency,
 } from 'common/util/arrayBuffer';
+import { GenerationMode } from '../store/canvasTypes';
 
 export const getCanvasGenerationMode = (
   baseImageData: ImageData,
   maskImageData: ImageData
-) => {
+): GenerationMode => {
   const {
     isPartiallyTransparent: baseIsPartiallyTransparent,
     isFullyTransparent: baseIsFullyTransparent,

invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx

@@ -11,8 +11,8 @@ import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAIDndImage from 'common/components/IAIDndImage';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
-import { controlNetImageChanged } from '../store/controlNetSlice';
 import { PostUploadAction } from 'services/api/types';
+import { controlNetImageChanged } from '../store/controlNetSlice';
 
 type Props = {
   controlNetId: string;
@@ -59,19 +59,13 @@ const ControlNetImagePreview = (props: Props) => {
 
   const [isMouseOverImage, setIsMouseOverImage] = useState(false);
 
-  const {
+  const { currentData: controlImage } = useGetImageDTOQuery(
-    currentData: controlImage,
+    controlImageName ?? skipToken
-    isLoading: isLoadingControlImage,
+  );
-    isError: isErrorControlImage,
-    isSuccess: isSuccessControlImage,
-  } = useGetImageDTOQuery(controlImageName ?? skipToken);
 
-  const {
+  const { currentData: processedControlImage } = useGetImageDTOQuery(
-    currentData: processedControlImage,
+    processedControlImageName ?? skipToken
-    isLoading: isLoadingProcessedControlImage,
+  );
-    isError: isErrorProcessedControlImage,
-    isSuccess: isSuccessProcessedControlImage,
-  } = useGetImageDTOQuery(processedControlImageName ?? skipToken);
 
   const handleResetControlImage = useCallback(() => {
     dispatch(controlNetImageChanged({ controlNetId, controlImage: null }));

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetBeginEnd.tsx

@@ -55,11 +55,6 @@ const ParamControlNetBeginEnd = (props: Props) => {
     [controlNetId, dispatch]
   );
 
-  const handleStepPctReset = useCallback(() => {
-    dispatch(controlNetBeginStepPctChanged({ controlNetId, beginStepPct: 0 }));
-    dispatch(controlNetEndStepPctChanged({ controlNetId, endStepPct: 1 }));
-  }, [controlNetId, dispatch]);
-
   return (
     <FormControl isDisabled={!isEnabled}>
       <FormLabel>Begin / End Step Percentage</FormLabel>

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetControlMode.tsx

@@ -8,7 +8,6 @@ import {
   controlNetControlModeChanged,
 } from 'features/controlNet/store/controlNetSlice';
 import { useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 
 type ParamControlNetControlModeProps = {
   controlNetId: string;
@@ -42,8 +41,6 @@ export default function ParamControlNetControlMode(
 
   const { controlMode, isEnabled } = useAppSelector(selector);
 
-  const { t } = useTranslation();
-
   const handleControlModeChange = useCallback(
     (controlMode: ControlModes) => {
       dispatch(controlNetControlModeChanged({ controlNetId, controlMode }));

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetProcessorSelect.tsx

@@ -13,7 +13,6 @@ import { memo, useCallback, useMemo } from 'react';
 import { CONTROLNET_PROCESSORS } from '../../store/constants';
 import { controlNetProcessorTypeChanged } from '../../store/controlNetSlice';
 import { ControlNetProcessorType } from '../../store/types';
-import { FormControl, FormLabel } from '@chakra-ui/react';
 
 type ParamControlNetProcessorSelectProps = {
   controlNetId: string;

invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetResizeMode.tsx

@@ -8,7 +8,6 @@ import {
   controlNetResizeModeChanged,
 } from 'features/controlNet/store/controlNetSlice';
 import { useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
 
 type ParamControlNetResizeModeProps = {
   controlNetId: string;
@@ -41,8 +40,6 @@ export default function ParamControlNetResizeMode(
 
   const { resizeMode, isEnabled } = useAppSelector(selector);
 
-  const { t } = useTranslation();
-
   const handleResizeModeChange = useCallback(
     (resizeMode: ResizeModes) => {
       dispatch(controlNetResizeModeChanged({ controlNetId, resizeMode }));

invokeai/frontend/web/src/features/controlNet/components/processors/ZoeDepthProcessor.tsx

@@ -7,7 +7,7 @@ type Props = {
   isEnabled: boolean;
 };
 
-const ZoeDepthProcessor = (props: Props) => {
+const ZoeDepthProcessor = (_props: Props) => {
   // Has no parameters?
   return null;
 };

invokeai/frontend/web/src/features/controlNet/store/controlNetSlice.ts

@@ -1,5 +1,4 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit';
-import { RootState } from 'app/store/store';
 import { ControlNetModelParam } from 'features/parameters/types/parameterSchemas';
 import { cloneDeep, forEach } from 'lodash-es';
 import { imagesApi } from 'services/api/endpoints/images';
@@ -315,11 +314,11 @@ export const controlNetSlice = createSlice({
       }
     });
 
-    builder.addCase(appSocketInvocationError, (state, action) => {
+    builder.addCase(appSocketInvocationError, (state) => {
       state.pendingControlImages = [];
     });
 
-    builder.addMatcher(isAnySessionRejected, (state, action) => {
+    builder.addMatcher(isAnySessionRejected, (state) => {
       state.pendingControlImages = [];
     });
 
@@ -365,5 +364,3 @@ export const {
 } = controlNetSlice.actions;
 
 export default controlNetSlice.reducer;
-
-export const controlNetSelector = (state: RootState) => state.controlNet;

invokeai/frontend/web/src/features/dynamicPrompts/components/ParamDynamicPromptsCombinatorial.tsx

@@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
 import IAISwitch from 'common/components/IAISwitch';
 import { useCallback } from 'react';
-import { combinatorialToggled } from '../store/slice';
+import { combinatorialToggled } from '../store/dynamicPromptsSlice';
 
 const selector = createSelector(
   stateSelector,