Run ruff

## Summary
- Add selectedStylePreset to app parameters
<!--A description of the changes in this PR. Include the kind of change
(fix, feature, docs, etc), the "why" and the "how". Screenshots or
videos are useful for frontend changes.-->

## Related Issues / Discussions

<!--WHEN APPLICABLE: List any related issues or discussions on github or
discord. If this PR closes an issue, please use the "Closes #1234"
format, so that the issue will be automatically closed when the PR
merges.-->

## QA Instructions

<!--WHEN APPLICABLE: Describe how you have tested the changes in this
PR. Provide enough detail that a reviewer can reproduce your tests.-->

## Merge Plan

<!--WHEN APPLICABLE: Large PRs, or PRs that touch sensitive things like
DB schemas, may need some care when merging. For example, a careful
rebase by the change author, timing to not interfere with a pending
release, or a message to contributors on discord after merging.-->

## Checklist

- [ ] _The PR has a short but descriptive title, suitable for a
changelog_
- [ ] _Tests added / updated (if applicable)_
- [ ] _Documentation added / updated (if applicable)_

invokeai/app/api/routers/session_queue.py

@@ -11,7 +11,6 @@ from invokeai.app.services.session_queue.session_queue_common import (
     Batch,
     BatchStatus,
     CancelByBatchIDsResult,
-    CancelByOriginResult,
     ClearResult,
     EnqueueBatchResult,
     PruneResult,
@@ -106,19 +105,6 @@ async def cancel_by_batch_ids(
     return ApiDependencies.invoker.services.session_queue.cancel_by_batch_ids(queue_id=queue_id, batch_ids=batch_ids)
 
 
-@session_queue_router.put(
-    "/{queue_id}/cancel_by_origin",
-    operation_id="cancel_by_origin",
-    responses={200: {"model": CancelByBatchIDsResult}},
-)
-async def cancel_by_origin(
-    queue_id: str = Path(description="The queue id to perform this operation on"),
-    origin: str = Query(description="The origin to cancel all queue items for"),
-) -> CancelByOriginResult:
-    """Immediately cancels all queue items with the given origin"""
-    return ApiDependencies.invoker.services.session_queue.cancel_by_origin(queue_id=queue_id, origin=origin)
-
-
 @session_queue_router.put(
     "/{queue_id}/clear",
     operation_id="clear",

invokeai/app/invocations/image.py

@@ -6,19 +6,13 @@ import cv2
 import numpy
 from PIL import Image, ImageChops, ImageFilter, ImageOps
 
-from invokeai.app.invocations.baseinvocation import (
-    BaseInvocation,
-    Classification,
-    invocation,
-    invocation_output,
-)
+from invokeai.app.invocations.baseinvocation import BaseInvocation, Classification, invocation
 from invokeai.app.invocations.constants import IMAGE_MODES
 from invokeai.app.invocations.fields import (
     ColorField,
     FieldDescriptions,
     ImageField,
     InputField,
-    OutputField,
     WithBoard,
     WithMetadata,
 )
@@ -1013,62 +1007,3 @@ class MaskFromIDInvocation(BaseInvocation, WithMetadata, WithBoard):
         image_dto = context.images.save(image=mask, image_category=ImageCategory.MASK)
 
         return ImageOutput.build(image_dto)
-
-
-@invocation_output("canvas_v2_mask_and_crop_output")
-class CanvasV2MaskAndCropOutput(ImageOutput):
-    offset_x: int = OutputField(description="The x offset of the image, after cropping")
-    offset_y: int = OutputField(description="The y offset of the image, after cropping")
-
-
-@invocation(
-    "canvas_v2_mask_and_crop",
-    title="Canvas V2 Mask and Crop",
-    tags=["image", "mask", "id"],
-    category="image",
-    version="1.0.0",
-    classification=Classification.Prototype,
-)
-class CanvasV2MaskAndCropInvocation(BaseInvocation, WithMetadata, WithBoard):
-    """Handles Canvas V2 image output masking and cropping"""
-
-    source_image: ImageField | None = InputField(
-        default=None,
-        description="The source image onto which the masked generated image is pasted. If omitted, the masked generated image is returned with transparency.",
-    )
-    generated_image: ImageField = InputField(description="The image to apply the mask to")
-    mask: ImageField = InputField(description="The mask to apply")
-    mask_blur: int = InputField(default=0, ge=0, description="The amount to blur the mask by")
-
-    def _prepare_mask(self, mask: Image.Image) -> Image.Image:
-        mask_array = numpy.array(mask)
-        kernel = numpy.ones((self.mask_blur, self.mask_blur), numpy.uint8)
-        dilated_mask_array = cv2.erode(mask_array, kernel, iterations=3)
-        dilated_mask = Image.fromarray(dilated_mask_array)
-        if self.mask_blur > 0:
-            mask = dilated_mask.filter(ImageFilter.GaussianBlur(self.mask_blur))
-        return ImageOps.invert(mask.convert("L"))
-
-    def invoke(self, context: InvocationContext) -> CanvasV2MaskAndCropOutput:
-        mask = self._prepare_mask(context.images.get_pil(self.mask.image_name))
-
-        if self.source_image:
-            generated_image = context.images.get_pil(self.generated_image.image_name)
-            source_image = context.images.get_pil(self.source_image.image_name)
-            source_image.paste(generated_image, (0, 0), mask)
-            image_dto = context.images.save(image=source_image)
-        else:
-            generated_image = context.images.get_pil(self.generated_image.image_name)
-            generated_image.putalpha(mask)
-            image_dto = context.images.save(image=generated_image)
-
-        # bbox = image.getbbox()
-        # image = image.crop(bbox)
-
-        return CanvasV2MaskAndCropOutput(
-            image=ImageField(image_name=image_dto.image_name),
-            offset_x=0,
-            offset_y=0,
-            width=image_dto.width,
-            height=image_dto.height,
-        )

invokeai/app/services/events/events_common.py

@@ -88,7 +88,6 @@ class QueueItemEventBase(QueueEventBase):
 
     item_id: int = Field(description="The ID of the queue item")
     batch_id: str = Field(description="The ID of the queue batch")
-    origin: str | None = Field(default=None, description="The origin of the batch")
 
 
 class InvocationEventBase(QueueItemEventBase):
@@ -96,6 +95,8 @@ class InvocationEventBase(QueueItemEventBase):
 
     session_id: str = Field(description="The ID of the session (aka graph execution state)")
     queue_id: str = Field(description="The ID of the queue")
+    item_id: int = Field(description="The ID of the queue item")
+    batch_id: str = Field(description="The ID of the queue batch")
     session_id: str = Field(description="The ID of the session (aka graph execution state)")
     invocation: AnyInvocation = Field(description="The ID of the invocation")
     invocation_source_id: str = Field(description="The ID of the prepared invocation's source node")
@@ -113,7 +114,6 @@ class InvocationStartedEvent(InvocationEventBase):
             queue_id=queue_item.queue_id,
             item_id=queue_item.item_id,
             batch_id=queue_item.batch_id,
-            origin=queue_item.origin,
             session_id=queue_item.session_id,
             invocation=invocation,
             invocation_source_id=queue_item.session.prepared_source_mapping[invocation.id],
@@ -147,7 +147,6 @@ class InvocationDenoiseProgressEvent(InvocationEventBase):
             queue_id=queue_item.queue_id,
             item_id=queue_item.item_id,
             batch_id=queue_item.batch_id,
-            origin=queue_item.origin,
             session_id=queue_item.session_id,
             invocation=invocation,
             invocation_source_id=queue_item.session.prepared_source_mapping[invocation.id],
@@ -185,7 +184,6 @@ class InvocationCompleteEvent(InvocationEventBase):
             queue_id=queue_item.queue_id,
             item_id=queue_item.item_id,
             batch_id=queue_item.batch_id,
-            origin=queue_item.origin,
             session_id=queue_item.session_id,
             invocation=invocation,
             invocation_source_id=queue_item.session.prepared_source_mapping[invocation.id],
@@ -218,7 +216,6 @@ class InvocationErrorEvent(InvocationEventBase):
             queue_id=queue_item.queue_id,
             item_id=queue_item.item_id,
             batch_id=queue_item.batch_id,
-            origin=queue_item.origin,
             session_id=queue_item.session_id,
             invocation=invocation,
             invocation_source_id=queue_item.session.prepared_source_mapping[invocation.id],
@@ -256,7 +253,6 @@ class QueueItemStatusChangedEvent(QueueItemEventBase):
             queue_id=queue_item.queue_id,
             item_id=queue_item.item_id,
             batch_id=queue_item.batch_id,
-            origin=queue_item.origin,
             session_id=queue_item.session_id,
             status=queue_item.status,
             error_type=queue_item.error_type,
@@ -283,14 +279,12 @@ class BatchEnqueuedEvent(QueueEventBase):
         description="The number of invocations initially requested to be enqueued (may be less than enqueued if queue was full)"
     )
     priority: int = Field(description="The priority of the batch")
-    origin: str | None = Field(default=None, description="The origin of the batch")
 
     @classmethod
     def build(cls, enqueue_result: EnqueueBatchResult) -> "BatchEnqueuedEvent":
         return cls(
             queue_id=enqueue_result.queue_id,
             batch_id=enqueue_result.batch.batch_id,
-            origin=enqueue_result.batch.origin,
             enqueued=enqueue_result.enqueued,
             requested=enqueue_result.requested,
             priority=enqueue_result.priority,

invokeai/app/services/session_queue/session_queue_base.py

@@ -6,7 +6,6 @@ from invokeai.app.services.session_queue.session_queue_common import (
     Batch,
     BatchStatus,
     CancelByBatchIDsResult,
-    CancelByOriginResult,
     CancelByQueueIDResult,
     ClearResult,
     EnqueueBatchResult,
@@ -96,11 +95,6 @@ class SessionQueueBase(ABC):
         """Cancels all queue items with matching batch IDs"""
         pass
 
-    @abstractmethod
-    def cancel_by_origin(self, queue_id: str, origin: str) -> CancelByOriginResult:
-        """Cancels all queue items with the given batch origin"""
-        pass
-
     @abstractmethod
     def cancel_by_queue_id(self, queue_id: str) -> CancelByQueueIDResult:
         """Cancels all queue items with matching queue ID"""

invokeai/app/services/session_queue/session_queue_common.py

@@ -77,7 +77,6 @@ BatchDataCollection: TypeAlias = list[list[BatchDatum]]
 
 class Batch(BaseModel):
     batch_id: str = Field(default_factory=uuid_string, description="The ID of the batch")
-    origin: str | None = Field(default=None, description="The origin of this batch.")
     data: Optional[BatchDataCollection] = Field(default=None, description="The batch data collection.")
     graph: Graph = Field(description="The graph to initialize the session with")
     workflow: Optional[WorkflowWithoutID] = Field(
@@ -196,7 +195,6 @@ class SessionQueueItemWithoutGraph(BaseModel):
     status: QUEUE_ITEM_STATUS = Field(default="pending", description="The status of this queue item")
     priority: int = Field(default=0, description="The priority of this queue item")
     batch_id: str = Field(description="The ID of the batch associated with this queue item")
-    origin: str | None = Field(default=None, description="The origin of this queue item. ")
     session_id: str = Field(
         description="The ID of the session associated with this queue item. The session doesn't exist in graph_executions until the queue item is executed."
     )
@@ -296,7 +294,6 @@ class SessionQueueStatus(BaseModel):
 class BatchStatus(BaseModel):
     queue_id: str = Field(..., description="The ID of the queue")
     batch_id: str = Field(..., description="The ID of the batch")
-    origin: str | None = Field(..., description="The origin of the batch")
     pending: int = Field(..., description="Number of queue items with status 'pending'")
     in_progress: int = Field(..., description="Number of queue items with status 'in_progress'")
     completed: int = Field(..., description="Number of queue items with status 'complete'")
@@ -331,12 +328,6 @@ class CancelByBatchIDsResult(BaseModel):
     canceled: int = Field(..., description="Number of queue items canceled")
 
 
-class CancelByOriginResult(BaseModel):
-    """Result of canceling by list of batch ids"""
-
-    canceled: int = Field(..., description="Number of queue items canceled")
-
-
 class CancelByQueueIDResult(CancelByBatchIDsResult):
     """Result of canceling by queue id"""
 
@@ -442,7 +433,6 @@ class SessionQueueValueToInsert(NamedTuple):
     field_values: Optional[str]  # field_values json
     priority: int  # priority
     workflow: Optional[str]  # workflow json
-    origin: str | None
 
 
 ValuesToInsert: TypeAlias = list[SessionQueueValueToInsert]
@@ -463,7 +453,6 @@ def prepare_values_to_insert(queue_id: str, batch: Batch, priority: int, max_new
                 json.dumps(field_values, default=to_jsonable_python) if field_values else None,  # field_values (json)
                 priority,  # priority
                 json.dumps(workflow, default=to_jsonable_python) if workflow else None,  # workflow (json)
-                batch.origin,  # origin
             )
         )
     return values_to_insert

invokeai/app/services/session_queue/session_queue_sqlite.py

@@ -10,7 +10,6 @@ from invokeai.app.services.session_queue.session_queue_common import (
     Batch,
     BatchStatus,
     CancelByBatchIDsResult,
-    CancelByOriginResult,
     CancelByQueueIDResult,
     ClearResult,
     EnqueueBatchResult,
@@ -128,8 +127,8 @@ class SqliteSessionQueue(SessionQueueBase):
 
             self.__cursor.executemany(
                 """--sql
-                INSERT INTO session_queue (queue_id, session, session_id, batch_id, field_values, priority, workflow, origin)
-                VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+                INSERT INTO session_queue (queue_id, session, session_id, batch_id, field_values, priority, workflow)
+                VALUES (?, ?, ?, ?, ?, ?, ?)
                 """,
                 values_to_insert,
             )
@@ -418,7 +417,11 @@ class SqliteSessionQueue(SessionQueueBase):
             )
             self.__conn.commit()
             if current_queue_item is not None and current_queue_item.batch_id in batch_ids:
-                self._set_queue_item_status(current_queue_item.item_id, "canceled")
+                batch_status = self.get_batch_status(queue_id=queue_id, batch_id=current_queue_item.batch_id)
+                queue_status = self.get_queue_status(queue_id=queue_id)
+                self.__invoker.services.events.emit_queue_item_status_changed(
+                    current_queue_item, batch_status, queue_status
+                )
         except Exception:
             self.__conn.rollback()
             raise
@@ -426,46 +429,6 @@ class SqliteSessionQueue(SessionQueueBase):
             self.__lock.release()
         return CancelByBatchIDsResult(canceled=count)
 
-    def cancel_by_origin(self, queue_id: str, origin: str) -> CancelByOriginResult:
-        try:
-            current_queue_item = self.get_current(queue_id)
-            self.__lock.acquire()
-            where = """--sql
-                WHERE
-                  queue_id == ?
-                  AND origin == ?
-                  AND status != 'canceled'
-                  AND status != 'completed'
-                  AND status != 'failed'
-                """
-            params = (queue_id, origin)
-            self.__cursor.execute(
-                f"""--sql
-                SELECT COUNT(*)
-                FROM session_queue
-                {where};
-                """,
-                params,
-            )
-            count = self.__cursor.fetchone()[0]
-            self.__cursor.execute(
-                f"""--sql
-                UPDATE session_queue
-                SET status = 'canceled'
-                {where};
-                """,
-                params,
-            )
-            self.__conn.commit()
-            if current_queue_item is not None and current_queue_item.origin == origin:
-                self._set_queue_item_status(current_queue_item.item_id, "canceled")
-        except Exception:
-            self.__conn.rollback()
-            raise
-        finally:
-            self.__lock.release()
-        return CancelByOriginResult(canceled=count)
-
     def cancel_by_queue_id(self, queue_id: str) -> CancelByQueueIDResult:
         try:
             current_queue_item = self.get_current(queue_id)
@@ -578,8 +541,7 @@ class SqliteSessionQueue(SessionQueueBase):
                     started_at,
                     session_id,
                     batch_id,
-                    queue_id,
-                    origin
+                    queue_id
                 FROM session_queue
                 WHERE queue_id = ?
             """
@@ -659,7 +621,7 @@ class SqliteSessionQueue(SessionQueueBase):
             self.__lock.acquire()
             self.__cursor.execute(
                 """--sql
-                SELECT status, count(*), origin
+                SELECT status, count(*)
                 FROM session_queue
                 WHERE
                   queue_id = ?
@@ -671,7 +633,6 @@ class SqliteSessionQueue(SessionQueueBase):
             result = cast(list[sqlite3.Row], self.__cursor.fetchall())
             total = sum(row[1] for row in result)
             counts: dict[str, int] = {row[0]: row[1] for row in result}
-            origin = result[0]["origin"] if result else None
         except Exception:
             self.__conn.rollback()
             raise
@@ -680,7 +641,6 @@ class SqliteSessionQueue(SessionQueueBase):
 
         return BatchStatus(
             batch_id=batch_id,
-            origin=origin,
             queue_id=queue_id,
             pending=counts.get("pending", 0),
             in_progress=counts.get("in_progress", 0),

invokeai/app/services/shared/sqlite/sqlite_util.py

@@ -17,7 +17,6 @@ from invokeai.app.services.shared.sqlite_migrator.migrations.migration_11 import
 from invokeai.app.services.shared.sqlite_migrator.migrations.migration_12 import build_migration_12
 from invokeai.app.services.shared.sqlite_migrator.migrations.migration_13 import build_migration_13
 from invokeai.app.services.shared.sqlite_migrator.migrations.migration_14 import build_migration_14
-from invokeai.app.services.shared.sqlite_migrator.migrations.migration_15 import build_migration_15
 from invokeai.app.services.shared.sqlite_migrator.sqlite_migrator_impl import SqliteMigrator
 
 
@@ -52,7 +51,6 @@ def init_db(config: InvokeAIAppConfig, logger: Logger, image_files: ImageFileSto
     migrator.register_migration(build_migration_12(app_config=config))
     migrator.register_migration(build_migration_13())
     migrator.register_migration(build_migration_14())
-    migrator.register_migration(build_migration_15())
     migrator.run_migrations()
 
     return db

invokeai/app/services/shared/sqlite_migrator/migrations/migration_15.py

@@ -1,31 +0,0 @@
-import sqlite3
-
-from invokeai.app.services.shared.sqlite_migrator.sqlite_migrator_common import Migration
-
-
-class Migration15Callback:
-    def __call__(self, cursor: sqlite3.Cursor) -> None:
-        self._add_origin_col(cursor)
-
-    def _add_origin_col(self, cursor: sqlite3.Cursor) -> None:
-        """
-        - Adds `origin` column to the session queue table.
-        """
-
-        cursor.execute("ALTER TABLE session_queue ADD COLUMN origin TEXT;")
-
-
-def build_migration_15() -> Migration:
-    """
-    Build the migration from database version 14 to 15.
-
-    This migration does the following:
-        - Adds `origin` column to the session queue table.
-    """
-    migration_15 = Migration(
-        from_version=14,
-        to_version=15,
-        callback=Migration15Callback(),
-    )
-
-    return migration_15

invokeai/backend/model_manager/probe.py

@@ -304,6 +304,11 @@ class ModelProbe(object):
         else:
             error_hint = f"class {class_name} is not one of the supported classes [{', '.join(cls.CLASS2TYPE.keys())}]"
 
+        if (folder_path / "tokenizer").exists() and (folder_path / "text_encoder").exists():
+            return ModelType.CLIPEmbed
+        if (folder_path / "tokenizer_2").exists() and (folder_path / "text_encoder_2").exists():
+            return ModelType.T5Encoder
+
         # give up
         raise InvalidModelConfigException(
             f"Unable to determine model type for {folder_path}" + (f"; {error_hint}" if error_hint else "")
@@ -747,6 +752,9 @@ class TextualInversionFolderProbe(FolderProbeBase):
 
 
 class T5EncoderFolderProbe(FolderProbeBase):
+    def get_base_type(self) -> BaseModelType:
+        return BaseModelType.Any
+
     def get_format(self) -> ModelFormat:
         return ModelFormat.T5Encoder
 

invokeai/frontend/web/.eslintrc.js

@@ -12,10 +12,6 @@ module.exports = {
     'i18next/no-literal-string': 'error',
     // https://eslint.org/docs/latest/rules/no-console
     'no-console': 'error',
-    // https://eslint.org/docs/latest/rules/no-promise-executor-return
-    'no-promise-executor-return': 'error',
-    // https://eslint.org/docs/latest/rules/require-await
-    'require-await': 'error',
   },
   overrides: [
     /**

invokeai/frontend/web/.storybook/ReduxInit.tsx

@@ -1,5 +1,5 @@
 import { PropsWithChildren, memo, useEffect } from 'react';
-import { modelChanged } from '../src/features/controlLayers/store/paramsSlice';
+import { modelChanged } from '../src/features/parameters/store/generationSlice';
 import { useAppDispatch } from '../src/app/store/storeHooks';
 import { useGlobalModifiersInit } from '@invoke-ai/ui-library';
 /**
@@ -10,9 +10,7 @@ export const ReduxInit = memo((props: PropsWithChildren) => {
   const dispatch = useAppDispatch();
   useGlobalModifiersInit();
   useEffect(() => {
-    dispatch(
-      modelChanged({ model: { key: 'test_model', hash: 'some_hash', name: 'some name', base: 'sd-1', type: 'main' } })
-    );
+    dispatch(modelChanged({ key: 'test_model', hash: 'some_hash', name: 'some name', base: 'sd-1', type: 'main' }));
   }, []);
 
   return props.children;

invokeai/frontend/web/knip.ts

@@ -9,8 +9,6 @@ const config: KnipConfig = {
     'src/services/api/schema.ts',
     'src/features/nodes/types/v1/**',
     'src/features/nodes/types/v2/**',
-    // TODO(psyche): maybe we can clean up these utils after canvas v2 release
-    'src/features/controlLayers/konva/util.ts',
   ],
   ignoreBinaries: ['only-allow'],
   paths: {

invokeai/frontend/web/package.json

@@ -24,7 +24,7 @@
     "build": "pnpm run lint && vite build",
     "typegen": "node scripts/typegen.js",
     "preview": "vite preview",
-    "lint:knip": "knip --tags=-knipignore",
+    "lint:knip": "knip",
     "lint:dpdm": "dpdm --no-warning --no-tree --transform --exit-code circular:1 src/main.tsx",
     "lint:eslint": "eslint --max-warnings=0 .",
     "lint:prettier": "prettier --check .",
@@ -52,17 +52,17 @@
     }
   },
   "dependencies": {
+    "@chakra-ui/react-use-size": "^2.1.0",
     "@dagrejs/dagre": "^1.1.3",
     "@dagrejs/graphlib": "^2.2.3",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/inter": "^5.0.20",
-    "@invoke-ai/ui-library": "^0.0.32",
+    "@invoke-ai/ui-library": "^0.0.29",
     "@nanostores/react": "^0.7.3",
     "@reduxjs/toolkit": "2.2.3",
     "@roarr/browser-log-writer": "^1.3.0",
-    "async-mutex": "^0.5.0",
     "chakra-react-select": "^4.9.1",
     "compare-versions": "^6.1.1",
     "dateformat": "^5.0.3",
@@ -74,8 +74,6 @@
     "jsondiffpatch": "^0.6.0",
     "konva": "^9.3.14",
     "lodash-es": "^4.17.21",
-    "lru-cache": "^11.0.0",
-    "nanoid": "^5.0.7",
     "nanostores": "^0.11.2",
     "new-github-issue-url": "^1.0.0",
     "overlayscrollbars": "^2.10.0",
@@ -90,6 +88,7 @@
     "react-hotkeys-hook": "4.5.0",
     "react-i18next": "^14.1.3",
     "react-icons": "^5.2.1",
+    "react-konva": "^18.2.10",
     "react-redux": "9.1.2",
     "react-resizable-panels": "^2.0.23",
     "react-select": "5.8.0",
@@ -103,9 +102,9 @@
     "roarr": "^7.21.1",
     "serialize-error": "^11.0.3",
     "socket.io-client": "^4.7.5",
-    "stable-hash": "^0.0.4",
     "use-debounce": "^10.0.2",
     "use-device-pixel-ratio": "^1.1.2",
+    "use-image": "^1.1.1",
     "uuid": "^10.0.0",
     "zod": "^3.23.8",
     "zod-validation-error": "^3.3.1"

invokeai/frontend/web/pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@chakra-ui/react-use-size':
+    specifier: ^2.1.0
+    version: 2.1.0(react@18.3.1)
   '@dagrejs/dagre':
     specifier: ^1.1.3
     version: 1.1.3
@@ -24,8 +27,8 @@ dependencies:
     specifier: ^5.0.20
     version: 5.0.20
   '@invoke-ai/ui-library':
-    specifier: ^0.0.32
-    version: 0.0.32(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.20)(@types/react@18.3.3)(i18next@23.12.2)(react-dom@18.3.1)(react@18.3.1)
+    specifier: ^0.0.29
+    version: 0.0.29(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.20)(@types/react@18.3.3)(i18next@23.12.2)(react-dom@18.3.1)(react@18.3.1)
   '@nanostores/react':
     specifier: ^0.7.3
     version: 0.7.3(nanostores@0.11.2)(react@18.3.1)
@@ -35,12 +38,9 @@ dependencies:
   '@roarr/browser-log-writer':
     specifier: ^1.3.0
     version: 1.3.0
-  async-mutex:
-    specifier: ^0.5.0
-    version: 0.5.0
   chakra-react-select:
     specifier: ^4.9.1
-    version: 4.9.1(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.13.3)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+    version: 4.9.1(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.13.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
   compare-versions:
     specifier: ^6.1.1
     version: 6.1.1
@@ -71,12 +71,6 @@ dependencies:
   lodash-es:
     specifier: ^4.17.21
     version: 4.17.21
-  lru-cache:
-    specifier: ^11.0.0
-    version: 11.0.0
-  nanoid:
-    specifier: ^5.0.7
-    version: 5.0.7
   nanostores:
     specifier: ^0.11.2
     version: 0.11.2
@@ -119,6 +113,9 @@ dependencies:
   react-icons:
     specifier: ^5.2.1
     version: 5.2.1(react@18.3.1)
+  react-konva:
+    specifier: ^18.2.10
+    version: 18.2.10(konva@9.3.14)(react-dom@18.3.1)(react@18.3.1)
   react-redux:
     specifier: 9.1.2
     version: 9.1.2(@types/react@18.3.3)(react@18.3.1)(redux@5.0.1)
@@ -158,15 +155,15 @@ dependencies:
   socket.io-client:
     specifier: ^4.7.5
     version: 4.7.5
-  stable-hash:
-    specifier: ^0.0.4
-    version: 0.0.4
   use-debounce:
     specifier: ^10.0.2
     version: 10.0.2(react@18.3.1)
   use-device-pixel-ratio:
     specifier: ^1.1.2
     version: 1.1.2(react@18.3.1)
+  use-image:
+    specifier: ^1.1.1
+    version: 1.1.1(react-dom@18.3.1)(react@18.3.1)
   uuid:
     specifier: ^10.0.0
     version: 10.0.0
@@ -1752,13 +1749,6 @@ packages:
     dependencies:
       regenerator-runtime: 0.14.1
 
-  /@babel/runtime@7.25.4:
-    resolution: {integrity: sha512-DSgLeL/FNcpXuzav5wfYvHCGvynXkJbn3Zvc3823AEe9nPwW9IK4UoCSS5yGymmQzN0pCPvivtgS6/8U2kkm1w==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.14.1
-    dev: false
-
   /@babel/template@7.24.0:
     resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==}
     engines: {node: '>=6.9.0'}
@@ -1845,7 +1835,7 @@ packages:
       '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.3.1)
       '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0)(react@18.3.1)
       framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
@@ -1861,7 +1851,7 @@ packages:
       '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
       '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -1879,7 +1869,7 @@ packages:
       '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
       '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -1892,7 +1882,7 @@ packages:
       '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
       '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -1912,7 +1902,7 @@ packages:
       '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
       '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -1923,7 +1913,7 @@ packages:
       react: '>=18'
     dependencies:
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -1942,7 +1932,7 @@ packages:
       '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       '@chakra-ui/visually-hidden': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@zag-js/focus-visible': 0.16.0
       react: 18.3.1
@@ -1965,7 +1955,7 @@ packages:
       react: '>=18'
     dependencies:
       '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -1984,7 +1974,7 @@ packages:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -1999,13 +1989,13 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@chakra-ui/css-reset@2.3.0(@emotion/react@11.13.3)(react@18.3.1):
+  /@chakra-ui/css-reset@2.3.0(@emotion/react@11.13.0)(react@18.3.1):
     resolution: {integrity: sha512-cQwwBy5O0jzvl0K7PLTLgp8ijqLPKyuEMiDXwYzl95seD3AoeuoCLyzZcJtVqaUZ573PiBdAbY/IlZcwDOItWg==}
     peerDependencies:
       '@emotion/react': '>=10.0.35'
       react: '>=18'
     dependencies:
-      '@emotion/react': 11.13.3(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2038,7 +2028,7 @@ packages:
       '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2069,7 +2059,7 @@ packages:
       '@chakra-ui/react-types': 2.0.7(react@18.3.1)
       '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2092,7 +2082,7 @@ packages:
       react: '>=18'
     dependencies:
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2103,7 +2093,7 @@ packages:
       react: '>=18'
     dependencies:
       '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2115,7 +2105,7 @@ packages:
     dependencies:
       '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2130,7 +2120,7 @@ packages:
       '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
       '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2146,7 +2136,7 @@ packages:
       '@chakra-ui/react-children-utils': 2.0.6(react@18.3.1)
       '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2171,7 +2161,7 @@ packages:
       '@chakra-ui/breakpoint-utils': 2.0.8
       '@chakra-ui/react-env': 3.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2196,7 +2186,7 @@ packages:
       '@chakra-ui/react-use-outside-click': 2.2.0(react@18.3.1)
       '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0)(react@18.3.1)
       framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
@@ -2223,7 +2213,7 @@ packages:
       '@chakra-ui/react-use-outside-click': 2.2.0(react@18.3.1)
       '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       '@chakra-ui/transition': 2.1.0(framer-motion@11.3.24)(react@18.3.1)
       framer-motion: 11.3.24(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
@@ -2244,7 +2234,7 @@ packages:
       '@chakra-ui/react-types': 2.0.7(react@18.3.1)
       '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0)(react@18.3.1)
       aria-hidden: 1.2.4
       framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
@@ -2273,7 +2263,7 @@ packages:
       '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2297,7 +2287,7 @@ packages:
       '@chakra-ui/react-use-controllable-state': 2.1.0(react@18.3.1)
       '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2319,7 +2309,7 @@ packages:
       '@chakra-ui/react-use-focus-on-pointer-down': 2.1.0(react@18.3.1)
       '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
     dev: false
@@ -2354,11 +2344,11 @@ packages:
       react: '>=18'
     dependencies:
       '@chakra-ui/react-context': 2.1.0(react@18.3.1)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
-  /@chakra-ui/provider@2.4.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react-dom@18.3.1)(react@18.3.1):
+  /@chakra-ui/provider@2.4.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-w0Tef5ZCJK1mlJorcSjItCSbyvVuqpvyWdxZiVQmE6fvSJR83wZof42ux0+sfWD+I7rHSfj+f9nzhNaEWClysw==}
     peerDependencies:
       '@emotion/react': ^11.0.0
@@ -2366,13 +2356,13 @@ packages:
       react: '>=18'
       react-dom: '>=18'
     dependencies:
-      '@chakra-ui/css-reset': 2.3.0(@emotion/react@11.13.3)(react@18.3.1)
+      '@chakra-ui/css-reset': 2.3.0(@emotion/react@11.13.0)(react@18.3.1)
       '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
       '@chakra-ui/react-env': 3.1.0(react@18.3.1)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       '@chakra-ui/utils': 2.0.15
-      '@emotion/react': 11.13.3(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.0)(@types/react@18.3.3)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     dev: false
@@ -2388,7 +2378,7 @@ packages:
       '@chakra-ui/react-types': 2.0.7(react@18.3.1)
       '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       '@zag-js/focus-visible': 0.16.0
       react: 18.3.1
     dev: false
@@ -2588,7 +2578,7 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@chakra-ui/react@2.8.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.3)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1):
+  /@chakra-ui/react@2.8.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(@types/react@18.3.3)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-Hn0moyxxyCDKuR9ywYpqgX8dvjqwu9ArwpIb9wHNYjnODETjLwazgNIliCVBRcJvysGRiV51U2/JtJVrpeCjUQ==}
     peerDependencies:
       '@emotion/react': ^11.0.0
@@ -2607,7 +2597,7 @@ packages:
       '@chakra-ui/close-button': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/control-box': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/counter': 2.1.0(react@18.3.1)
-      '@chakra-ui/css-reset': 2.3.0(@emotion/react@11.13.3)(react@18.3.1)
+      '@chakra-ui/css-reset': 2.3.0(@emotion/react@11.13.0)(react@18.3.1)
       '@chakra-ui/editable': 3.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/focus-lock': 2.1.0(@types/react@18.3.3)(react@18.3.1)
       '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
@@ -2626,7 +2616,7 @@ packages:
       '@chakra-ui/popper': 3.1.0(react@18.3.1)
       '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
       '@chakra-ui/progress': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
-      '@chakra-ui/provider': 2.4.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/provider': 2.4.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react-dom@18.3.1)(react@18.3.1)
       '@chakra-ui/radio': 2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/react-env': 3.1.0(react@18.3.1)
       '@chakra-ui/select': 2.1.2(@chakra-ui/system@2.6.2)(react@18.3.1)
@@ -2638,7 +2628,7 @@ packages:
       '@chakra-ui/stepper': 2.3.1(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/styled-system': 2.9.2
       '@chakra-ui/switch': 2.1.2(@chakra-ui/system@2.6.2)(framer-motion@10.18.0)(react@18.3.1)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       '@chakra-ui/table': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/tabs': 3.0.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/tag': 3.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
@@ -2650,8 +2640,8 @@ packages:
       '@chakra-ui/transition': 2.1.0(framer-motion@10.18.0)(react@18.3.1)
       '@chakra-ui/utils': 2.0.15
       '@chakra-ui/visually-hidden': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
-      '@emotion/react': 11.13.3(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.0)(@types/react@18.3.3)(react@18.3.1)
       framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -2667,7 +2657,7 @@ packages:
     dependencies:
       '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2684,7 +2674,7 @@ packages:
       '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/react-use-previous': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2694,7 +2684,7 @@ packages:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2714,7 +2704,7 @@ packages:
       '@chakra-ui/react-use-pan-event': 2.1.0(react@18.3.1)
       '@chakra-ui/react-use-size': 2.1.0(react@18.3.1)
       '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2725,7 +2715,7 @@ packages:
       react: '>=18'
     dependencies:
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2738,7 +2728,7 @@ packages:
       '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2751,7 +2741,7 @@ packages:
       '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2772,12 +2762,12 @@ packages:
     dependencies:
       '@chakra-ui/checkbox': 2.3.2(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
     dev: false
 
-  /@chakra-ui/system@2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1):
+  /@chakra-ui/system@2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1):
     resolution: {integrity: sha512-EGtpoEjLrUu4W1fHD+a62XR+hzC5YfsWm+6lO0Kybcga3yYEij9beegO0jZgug27V+Rf7vns95VPVP6mFd/DEQ==}
     peerDependencies:
       '@emotion/react': ^11.0.0
@@ -2790,8 +2780,8 @@ packages:
       '@chakra-ui/styled-system': 2.9.2
       '@chakra-ui/theme-utils': 2.0.21
       '@chakra-ui/utils': 2.0.15
-      '@emotion/react': 11.13.3(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.0)(@types/react@18.3.3)(react@18.3.1)
       react: 18.3.1
       react-fast-compare: 3.2.2
     dev: false
@@ -2804,7 +2794,7 @@ packages:
     dependencies:
       '@chakra-ui/react-context': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2823,7 +2813,7 @@ packages:
       '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/react-use-safe-layout-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2835,7 +2825,7 @@ packages:
     dependencies:
       '@chakra-ui/icon': 3.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/react-context': 2.1.0(react@18.3.1)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2847,7 +2837,7 @@ packages:
     dependencies:
       '@chakra-ui/form-control': 2.2.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -2898,7 +2888,7 @@ packages:
       '@chakra-ui/react-use-update-effect': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
       '@chakra-ui/styled-system': 2.9.2
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       '@chakra-ui/theme': 3.3.1(@chakra-ui/styled-system@2.9.2)
       framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
@@ -2921,7 +2911,7 @@ packages:
       '@chakra-ui/react-use-event-listener': 2.1.0(react@18.3.1)
       '@chakra-ui/react-use-merge-refs': 2.1.0(react@18.3.1)
       '@chakra-ui/shared-utils': 2.0.5
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -2964,7 +2954,7 @@ packages:
       '@chakra-ui/system': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -3047,10 +3037,10 @@ packages:
     resolution: {integrity: sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==}
     dependencies:
       '@babel/helper-module-imports': 7.24.7
-      '@babel/runtime': 7.25.4
+      '@babel/runtime': 7.25.0
       '@emotion/hash': 0.9.2
       '@emotion/memoize': 0.9.0
-      '@emotion/serialize': 1.3.1
+      '@emotion/serialize': 1.3.0
       babel-plugin-macros: 3.1.0
       convert-source-map: 1.9.0
       escape-string-regexp: 4.0.0
@@ -3138,8 +3128,8 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@emotion/react@11.13.3(@types/react@18.3.3)(react@18.3.1):
-    resolution: {integrity: sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==}
+  /@emotion/react@11.13.0(@types/react@18.3.3)(react@18.3.1):
+    resolution: {integrity: sha512-WkL+bw1REC2VNV1goQyfxjx1GYJkcc23CRQkXX+vZNLINyfI7o+uUn/rTGPt/xJ3bJHd5GcljgnxHf4wRw5VWQ==}
     peerDependencies:
       '@types/react': '*'
       react: '>=16.8.0'
@@ -3147,10 +3137,10 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.25.4
+      '@babel/runtime': 7.25.0
       '@emotion/babel-plugin': 11.12.0
       '@emotion/cache': 11.13.1
-      '@emotion/serialize': 1.3.1
+      '@emotion/serialize': 1.3.0
       '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@18.3.1)
       '@emotion/utils': 1.4.0
       '@emotion/weak-memoize': 0.4.0
@@ -3171,12 +3161,12 @@ packages:
       csstype: 3.1.3
     dev: false
 
-  /@emotion/serialize@1.3.1:
-    resolution: {integrity: sha512-dEPNKzBPU+vFPGa+z3axPRn8XVDetYORmDC0wAiej+TNcOZE70ZMJa0X7JdeoM6q/nWTMZeLpN/fTnD9o8MQBA==}
+  /@emotion/serialize@1.3.0:
+    resolution: {integrity: sha512-jACuBa9SlYajnpIVXB+XOXnfJHyckDfe6fOpORIM6yhBDlqGuExvDdZYHDQGoDf3bZXGv7tNr+LpLjJqiEQ6EA==}
     dependencies:
       '@emotion/hash': 0.9.2
       '@emotion/memoize': 0.9.0
-      '@emotion/unitless': 0.10.0
+      '@emotion/unitless': 0.9.0
       '@emotion/utils': 1.4.0
       csstype: 3.1.3
     dev: false
@@ -3189,7 +3179,7 @@ packages:
     resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
     dev: false
 
-  /@emotion/styled@11.13.0(@emotion/react@11.13.3)(@types/react@18.3.3)(react@18.3.1):
+  /@emotion/styled@11.13.0(@emotion/react@11.13.0)(@types/react@18.3.3)(react@18.3.1):
     resolution: {integrity: sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==}
     peerDependencies:
       '@emotion/react': ^11.0.0-rc.0
@@ -3199,11 +3189,11 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.25.4
+      '@babel/runtime': 7.25.0
       '@emotion/babel-plugin': 11.12.0
       '@emotion/is-prop-valid': 1.3.0
-      '@emotion/react': 11.13.3(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/serialize': 1.3.1
+      '@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/serialize': 1.3.0
       '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@18.3.1)
       '@emotion/utils': 1.4.0
       '@types/react': 18.3.3
@@ -3212,14 +3202,14 @@ packages:
       - supports-color
     dev: false
 
-  /@emotion/unitless@0.10.0:
-    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
-    dev: false
-
   /@emotion/unitless@0.8.1:
     resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
     dev: false
 
+  /@emotion/unitless@0.9.0:
+    resolution: {integrity: sha512-TP6GgNZtmtFaFcsOgExdnfxLLpRDla4Q66tnenA9CktvVSdNKDvMVuUah4QvWPIpNjrWsGg3qeGo9a43QooGZQ==}
+    dev: false
+
   /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.3.1):
     resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
     peerDependencies:
@@ -3571,8 +3561,8 @@ packages:
       prettier: 3.3.3
     dev: true
 
-  /@invoke-ai/ui-library@0.0.32(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.20)(@types/react@18.3.3)(i18next@23.12.2)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-JxAoblrDu/cZ4ha9KO4ry5OWvyLUE1Dj28i+ciMaDNUpC/cN+IyiTbUBoFoPaoN5JP8Zpd/MYCcmF2qsziHDzg==}
+  /@invoke-ai/ui-library@0.0.29(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.0.20)(@types/react@18.3.3)(i18next@23.12.2)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-7SYOaiEEKk9iHk0hg2R2yVxiuV3I1x6bDEv0R3Y2tCH/Aq5XDG2tR+d7SQAPqf5+za3S+qfNFjbjl7GvEMwqmA==}
     peerDependencies:
       '@fontsource-variable/inter': ^5.0.16
       react: ^18.2.0
@@ -3582,14 +3572,14 @@ packages:
       '@chakra-ui/icons': 2.1.1(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
-      '@chakra-ui/react': 2.8.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.3)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/react': 2.8.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(@types/react@18.3.3)(framer-motion@10.18.0)(react-dom@18.3.1)(react@18.3.1)
       '@chakra-ui/styled-system': 2.9.2
       '@chakra-ui/theme-tools': 2.1.2(@chakra-ui/styled-system@2.9.2)
-      '@emotion/react': 11.13.3(@types/react@18.3.3)(react@18.3.1)
-      '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.0)(@types/react@18.3.3)(react@18.3.1)
       '@fontsource-variable/inter': 5.0.20
       '@nanostores/react': 0.7.3(nanostores@0.11.2)(react@18.3.1)
-      chakra-react-select: 4.9.1(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.13.3)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
+      chakra-react-select: 4.9.1(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.13.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
       framer-motion: 10.18.0(react-dom@18.3.1)(react@18.3.1)
       lodash-es: 4.17.21
       nanostores: 0.11.2
@@ -5212,6 +5202,12 @@ packages:
       '@types/react': 18.3.3
     dev: true
 
+  /@types/react-reconciler@0.28.8:
+    resolution: {integrity: sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==}
+    dependencies:
+      '@types/react': 18.3.3
+    dev: false
+
   /@types/react-transition-group@4.4.10:
     resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==}
     dependencies:
@@ -5781,7 +5777,7 @@ packages:
     resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
     engines: {node: '>=10'}
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.6.3
     dev: false
 
   /aria-query@5.3.0:
@@ -5907,12 +5903,6 @@ packages:
       tslib: 2.6.3
     dev: true
 
-  /async-mutex@0.5.0:
-    resolution: {integrity: sha512-1A94B18jkJ3DYq284ohPxoXbfTA5HsQ7/Mf4DEhcyLx3Bz27Rh59iScbB6EPiP+B+joue6YCxcMXSbFC1tZKwA==}
-    dependencies:
-      tslib: 2.6.3
-    dev: false
-
   /attr-accept@2.2.2:
     resolution: {integrity: sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==}
     engines: {node: '>=4'}
@@ -6133,7 +6123,7 @@ packages:
       type-detect: 4.0.8
     dev: true
 
-  /chakra-react-select@4.9.1(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.13.3)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
+  /chakra-react-select@4.9.1(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/layout@2.3.1)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@emotion/react@11.13.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1):
     resolution: {integrity: sha512-jmgfN+S/wnTaCp3pW30GYDIZ5J8jWcT1gIbhpw6RdKV+atm/U4/sT+gaHOHHhRL8xeaYip+iI/m8MPGREkve0w==}
     peerDependencies:
       '@chakra-ui/form-control': ^2.0.0
@@ -6153,8 +6143,8 @@ packages:
       '@chakra-ui/media-query': 3.3.0(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/menu': 2.2.1(@chakra-ui/system@2.6.2)(framer-motion@11.3.24)(react@18.3.1)
       '@chakra-ui/spinner': 2.1.0(@chakra-ui/system@2.6.2)(react@18.3.1)
-      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(react@18.3.1)
-      '@emotion/react': 11.13.3(@types/react@18.3.3)(react@18.3.1)
+      '@chakra-ui/system': 2.6.2(@emotion/react@11.13.0)(@emotion/styled@11.13.0)(react@18.3.1)
+      '@emotion/react': 11.13.0(@types/react@18.3.3)(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-select: 5.8.0(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1)
@@ -7579,7 +7569,7 @@ packages:
     resolution: {integrity: sha512-QFaHbhv9WPUeLYBDe/PAuLKJ4Dd9OPvKs9xZBr3yLXnUrDNaVXKu2baDBXe3naPY30hgHYSsf2JW4jzas2mDEQ==}
     engines: {node: '>=10'}
     dependencies:
-      tslib: 2.7.0
+      tslib: 2.6.3
     dev: false
 
   /for-each@0.3.3:
@@ -7618,7 +7608,7 @@ packages:
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      tslib: 2.7.0
+      tslib: 2.6.3
     optionalDependencies:
       '@emotion/is-prop-valid': 0.8.8
     dev: false
@@ -8394,6 +8384,15 @@ packages:
       set-function-name: 2.0.2
     dev: true
 
+  /its-fine@1.2.5(react@18.3.1):
+    resolution: {integrity: sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==}
+    peerDependencies:
+      react: '>=18.0'
+    dependencies:
+      '@types/react-reconciler': 0.28.8
+      react: 18.3.1
+    dev: false
+
   /jackspeak@2.3.6:
     resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
     engines: {node: '>=14'}
@@ -8711,11 +8710,6 @@ packages:
     engines: {node: 14 || >=16.14}
     dev: true
 
-  /lru-cache@11.0.0:
-    resolution: {integrity: sha512-Qv32eSV1RSCfhY3fpPE2GNZ8jgM9X7rdAfemLWqTUxwiyIC4jJ6Sy0fZ8H+oLWevO6i4/bizg7c8d8i6bxrzbA==}
-    engines: {node: 20 || >=22}
-    dev: false
-
   /lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
     dependencies:
@@ -9003,12 +8997,6 @@ packages:
     hasBin: true
     dev: true
 
-  /nanoid@5.0.7:
-    resolution: {integrity: sha512-oLxFY2gd2IqnjcYyOXD8XGCftpGtZP2AbHbOkthDkvRywH5ayNtPVy9YlOPcHckXzbLTCHpkb7FB+yuxKV13pQ==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-    dev: false
-
   /nanostores@0.11.2:
     resolution: {integrity: sha512-6bucNxMJA5rNV554WQl+MWGng0QVMzlRgpKTHHfIbVLrhQ+yRXBychV9ECGVuuUfCMQPjfIG9bj8oJFZ9hYP/Q==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -9626,7 +9614,7 @@ packages:
     peerDependencies:
       react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
     dependencies:
-      '@babel/runtime': 7.25.4
+      '@babel/runtime': 7.25.0
       react: 18.3.1
     dev: false
 
@@ -9721,7 +9709,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@babel/runtime': 7.25.4
+      '@babel/runtime': 7.25.0
       '@types/react': 18.3.3
       focus-lock: 1.3.5
       prop-types: 15.8.1
@@ -9783,7 +9771,7 @@ packages:
       react-native:
         optional: true
     dependencies:
-      '@babel/runtime': 7.25.4
+      '@babel/runtime': 7.25.0
       html-parse-stringify: 3.0.1
       i18next: 23.12.2
       react: 18.3.1
@@ -9813,6 +9801,33 @@ packages:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
     dev: true
 
+  /react-konva@18.2.10(konva@9.3.14)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-ohcX1BJINL43m4ynjZ24MxFI1syjBdrXhqVxYVDw2rKgr3yuS0x/6m1Y2Z4sl4T/gKhfreBx8KHisd0XC6OT1g==}
+    peerDependencies:
+      konva: ^8.0.1 || ^7.2.5 || ^9.0.0
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    dependencies:
+      '@types/react-reconciler': 0.28.8
+      its-fine: 1.2.5(react@18.3.1)
+      konva: 9.3.14
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      react-reconciler: 0.29.2(react@18.3.1)
+      scheduler: 0.23.2
+    dev: false
+
+  /react-reconciler@0.29.2(react@18.3.1):
+    resolution: {integrity: sha512-zZQqIiYgDCTP/f1N/mAR10nJGrPD2ZR+jDSEsKWJHYC7Cm2wodlwbR3upZRdC3cjIjSlTLNVyO7Iu0Yy7t2AYg==}
+    engines: {node: '>=0.10.0'}
+    peerDependencies:
+      react: ^18.3.1
+    dependencies:
+      loose-envify: 1.4.0
+      react: 18.3.1
+      scheduler: 0.23.2
+    dev: false
+
   /react-redux@9.1.2(@types/react@18.3.3)(react@18.3.1)(redux@5.0.1):
     resolution: {integrity: sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==}
     peerDependencies:
@@ -9845,7 +9860,7 @@ packages:
       '@types/react': 18.3.3
       react: 18.3.1
       react-style-singleton: 2.2.1(@types/react@18.3.3)(react@18.3.1)
-      tslib: 2.7.0
+      tslib: 2.6.3
     dev: false
 
   /react-remove-scroll@2.5.10(@types/react@18.3.3)(react@18.3.1):
@@ -9862,7 +9877,7 @@ packages:
       react: 18.3.1
       react-remove-scroll-bar: 2.3.6(@types/react@18.3.3)(react@18.3.1)
       react-style-singleton: 2.2.1(@types/react@18.3.3)(react@18.3.1)
-      tslib: 2.7.0
+      tslib: 2.6.3
       use-callback-ref: 1.3.2(@types/react@18.3.3)(react@18.3.1)
       use-sidecar: 1.1.2(@types/react@18.3.3)(react@18.3.1)
     dev: false
@@ -9912,7 +9927,7 @@ packages:
       get-nonce: 1.0.1
       invariant: 2.2.4
       react: 18.3.1
-      tslib: 2.7.0
+      tslib: 2.6.3
     dev: false
 
   /react-transition-group@4.4.5(react-dom@18.3.1)(react@18.3.1):
@@ -10610,10 +10625,6 @@ packages:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
     dev: true
 
-  /stable-hash@0.0.4:
-    resolution: {integrity: sha512-LjdcbuBeLcdETCrPn9i8AYAZ1eCtu4ECAWtP7UleOiZ9LzVxRzzUZEoZ8zB24nhkQnDWyET0I+3sWokSDS3E7g==}
-    dev: false
-
   /stack-generator@2.0.10:
     resolution: {integrity: sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==}
     dependencies:
@@ -11052,10 +11063,6 @@ packages:
   /tslib@2.6.3:
     resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
 
-  /tslib@2.7.0:
-    resolution: {integrity: sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==}
-    dev: false
-
   /tsutils@3.21.0(typescript@5.5.4):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -11303,7 +11310,7 @@ packages:
     dependencies:
       '@types/react': 18.3.3
       react: 18.3.1
-      tslib: 2.7.0
+      tslib: 2.6.3
     dev: false
 
   /use-debounce@10.0.2(react@18.3.1):
@@ -11323,6 +11330,16 @@ packages:
       react: 18.3.1
     dev: false
 
+  /use-image@1.1.1(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-n4YO2k8AJG/BcDtxmBx8Aa+47kxY5m335dJiCQA5tTeVU4XdhrhqR6wT0WISRXwdMEOv5CSjqekDZkEMiiWaYQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+    dependencies:
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /use-isomorphic-layout-effect@1.1.2(@types/react@18.3.3)(react@18.3.1):
     resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
     peerDependencies:
@@ -11349,7 +11366,7 @@ packages:
       '@types/react': 18.3.3
       detect-node-es: 1.1.0
       react: 18.3.1
-      tslib: 2.7.0
+      tslib: 2.6.3
     dev: false
 
   /use-sync-external-store@1.2.0(react@18.3.1):

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

@@ -80,7 +80,6 @@
         "aboutDesc": "Using Invoke for work? Check out:",
         "aboutHeading": "Own Your Creative Power",
         "accept": "Accept",
-        "apply": "Apply",
         "add": "Add",
         "advanced": "Advanced",
         "ai": "ai",
@@ -116,7 +115,6 @@
         "githubLabel": "Github",
         "goTo": "Go to",
         "hotkeysLabel": "Hotkeys",
-        "loadingImage": "Loading Image",
         "imageFailedToLoad": "Unable to Load Image",
         "img2img": "Image To Image",
         "inpaint": "inpaint",
@@ -327,10 +325,6 @@
         "canceled": "Canceled",
         "completedIn": "Completed in",
         "batch": "Batch",
-        "origin": "Origin",
-        "originCanvas": "Canvas",
-        "originWorkflows": "Workflows",
-        "originOther": "Other",
         "batchFieldValues": "Batch Field Values",
         "item": "Item",
         "session": "Session",
@@ -702,6 +696,8 @@
         "availableModels": "Available Models",
         "baseModel": "Base Model",
         "cancel": "Cancel",
+        "clipEmbed": "CLIP Embed",
+        "clipVision": "CLIP Vision",
         "config": "Config",
         "convert": "Convert",
         "convertingModelBegin": "Converting Model. Please wait.",
@@ -789,6 +785,7 @@
         "settings": "Settings",
         "simpleModelPlaceholder": "URL or path to a local file or diffusers folder",
         "source": "Source",
+        "spandrelImageToImage": "Image to Image (Spandrel)",
         "starterModels": "Starter Models",
         "starterModelsInModelManager": "Starter Models can be found in Model Manager",
         "syncModels": "Sync Models",
@@ -797,6 +794,7 @@
         "loraTriggerPhrases": "LoRA Trigger Phrases",
         "mainModelTriggerPhrases": "Main Model Trigger Phrases",
         "typePhraseHere": "Type phrase here",
+        "t5Encoder": "T5 Encoder",
         "upcastAttention": "Upcast Attention",
         "uploadImage": "Upload Image",
         "urlOrLocalPath": "URL or Local Path",
@@ -1102,6 +1100,7 @@
         "confirmOnDelete": "Confirm On Delete",
         "developer": "Developer",
         "displayInProgress": "Display Progress Images",
+        "enableImageDebugging": "Enable Image Debugging",
         "enableInformationalPopovers": "Enable Informational Popovers",
         "informationalPopoversDisabled": "Informational Popovers Disabled",
         "informationalPopoversDisabledDesc": "Informational popovers have been disabled. Enable them in Settings.",
@@ -1568,7 +1567,7 @@
         "copyToClipboard": "Copy to Clipboard",
         "cursorPosition": "Cursor Position",
         "darkenOutsideSelection": "Darken Outside Selection",
-        "discardAll": "Discard All & Cancel Pending Generations",
+        "discardAll": "Discard All",
         "discardCurrent": "Discard Current",
         "downloadAsImage": "Download As Image",
         "enableMask": "Enable Mask",
@@ -1646,121 +1645,39 @@
         "storeNotInitialized": "Store is not initialized"
     },
     "controlLayers": {
-        "clearHistory": "Clear History",
-        "generateMode": "Generate",
-        "generateModeDesc": "Create individual images. Generated images are added directly to the gallery.",
-        "composeMode": "Compose",
-        "composeModeDesc": "Compose your work iterative. Generated images are added back to the canvas.",
-        "autoSave": "Auto-save to Gallery",
-        "resetCanvas": "Reset Canvas",
-        "resetAll": "Reset All",
-        "clearCaches": "Clear Caches",
-        "recalculateRects": "Recalculate Rects",
-        "clipToBbox": "Clip Strokes to Bbox",
+        "deleteAll": "Delete All",
         "addLayer": "Add Layer",
-        "duplicate": "Duplicate",
         "moveToFront": "Move to Front",
         "moveToBack": "Move to Back",
         "moveForward": "Move Forward",
         "moveBackward": "Move Backward",
         "brushSize": "Brush Size",
-        "width": "Width",
-        "zoom": "Zoom",
-        "resetView": "Reset View",
         "controlLayers": "Control Layers",
         "globalMaskOpacity": "Global Mask Opacity",
         "autoNegative": "Auto Negative",
-        "enableAutoNegative": "Enable Auto Negative",
-        "disableAutoNegative": "Disable Auto Negative",
         "deletePrompt": "Delete Prompt",
         "resetRegion": "Reset Region",
         "debugLayers": "Debug Layers",
         "rectangle": "Rectangle",
-        "maskFill": "Mask Fill",
+        "maskPreviewColor": "Mask Preview Color",
         "addPositivePrompt": "Add $t(common.positivePrompt)",
         "addNegativePrompt": "Add $t(common.negativePrompt)",
         "addIPAdapter": "Add $t(common.ipAdapter)",
+        "regionalGuidance": "Regional Guidance",
         "regionalGuidanceLayer": "$t(controlLayers.regionalGuidance) $t(unifiedCanvas.layer)",
-        "raster": "Raster",
-        "rasterLayer_one": "Raster Layer",
-        "controlLayer_one": "Control Layer",
-        "inpaintMask_one": "Inpaint Mask",
-        "regionalGuidance_one": "Regional Guidance",
-        "ipAdapter_one": "IP Adapter",
-        "rasterLayer_other": "Raster Layers",
-        "controlLayer_other": "Control Layers",
-        "inpaintMask_other": "Inpaint Masks",
-        "regionalGuidance_other": "Regional Guidance",
-        "ipAdapter_other": "IP Adapters",
         "opacity": "Opacity",
-        "regionalGuidance_withCount_hidden": "Regional Guidance ({{count}} hidden)",
-        "controlAdapters_withCount_hidden": "Control Adapters ({{count}} hidden)",
-        "controlLayers_withCount_hidden": "Control Layers ({{count}} hidden)",
-        "rasterLayers_withCount_hidden": "Raster Layers ({{count}} hidden)",
-        "ipAdapters_withCount_hidden": "IP Adapters ({{count}} hidden)",
-        "inpaintMasks_withCount_hidden": "Inpaint Masks ({{count}} hidden)",
-        "regionalGuidance_withCount_visible": "Regional Guidance ({{count}})",
-        "controlAdapters_withCount_visible": "Control Adapters ({{count}})",
-        "controlLayers_withCount_visible": "Control Layers ({{count}})",
-        "rasterLayers_withCount_visible": "Raster Layers ({{count}})",
-        "ipAdapters_withCount_visible": "IP Adapters ({{count}})",
-        "inpaintMasks_withCount_visible": "Inpaint Masks ({{count}})",
         "globalControlAdapter": "Global $t(controlnet.controlAdapter_one)",
         "globalControlAdapterLayer": "Global $t(controlnet.controlAdapter_one) $t(unifiedCanvas.layer)",
         "globalIPAdapter": "Global $t(common.ipAdapter)",
         "globalIPAdapterLayer": "Global $t(common.ipAdapter) $t(unifiedCanvas.layer)",
         "globalInitialImage": "Global Initial Image",
         "globalInitialImageLayer": "$t(controlLayers.globalInitialImage) $t(unifiedCanvas.layer)",
-        "layer": "Layer",
         "opacityFilter": "Opacity Filter",
         "clearProcessor": "Clear Processor",
         "resetProcessor": "Reset Processor to Defaults",
         "noLayersAdded": "No Layers Added",
         "layers_one": "Layer",
-        "layers_other": "Layers",
-        "objects_zero": "empty",
-        "objects_one": "{{count}} object",
-        "objects_other": "{{count}} objects",
-        "convertToControlLayer": "Convert to Control Layer",
-        "convertToRasterLayer": "Convert to Raster Layer",
-        "transparency": "Transparency",
-        "enableTransparencyEffect": "Enable Transparency Effect",
-        "disableTransparencyEffect": "Disable Transparency Effect",
-        "hidingType": "Hiding {{type}}",
-        "showingType": "Showing {{type}}",
-        "dynamicGrid": "Dynamic Grid",
-        "logDebugInfo": "Log Debug Info",
-        "locked": "Locked",
-        "unlocked": "Unlocked",
-        "deleteSelected": "Delete Selected",
-        "deleteAll": "Delete All",
-        "fill": {
-            "fillStyle": "Fill Style",
-            "solid": "Solid",
-            "grid": "Grid",
-            "crosshatch": "Crosshatch",
-            "vertical": "Vertical",
-            "horizontal": "Horizontal",
-            "diagonal": "Diagonal"
-        },
-        "tool": {
-            "brush": "Brush",
-            "eraser": "Eraser",
-            "rectangle": "Rectangle",
-            "bbox": "Bbox",
-            "move": "Move",
-            "view": "View",
-            "transform": "Transform",
-            "colorPicker": "Color Picker"
-        },
-        "filter": {
-            "filter": "Filter",
-            "filters": "Filters",
-            "filterType": "Filter Type",
-            "preview": "Preview",
-            "apply": "Apply",
-            "cancel": "Cancel"
-        }
+        "layers_other": "Layers"
     },
     "upscaling": {
         "upscale": "Upscale",
@@ -1848,30 +1765,5 @@
             "upscaling": "Upscaling",
             "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)"
         }
-    },
-    "system": {
-        "enableLogging": "Enable Logging",
-        "logLevel": {
-            "logLevel": "Log Level",
-            "trace": "Trace",
-            "debug": "Debug",
-            "info": "Info",
-            "warn": "Warn",
-            "error": "Error",
-            "fatal": "Fatal"
-        },
-        "logNamespaces": {
-            "logNamespaces": "Log Namespaces",
-            "gallery": "Gallery",
-            "models": "Models",
-            "config": "Config",
-            "canvas": "Canvas",
-            "generation": "Generation",
-            "workflows": "Workflows",
-            "system": "System",
-            "events": "Events",
-            "queue": "Queue",
-            "metadata": "Metadata"
-        }
     }
 }

invokeai/frontend/web/scripts/typegen.js

@@ -38,7 +38,7 @@ async function generateTypes(schema) {
   process.stdout.write(`\nOK!\r\n`);
 }
 
-function main() {
+async function main() {
   const encoding = 'utf-8';
 
   if (process.stdin.isTTY) {

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

@@ -6,7 +6,6 @@ import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/ap
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import type { PartialAppConfig } from 'app/types/invokeai';
 import ImageUploadOverlay from 'common/components/ImageUploadOverlay';
-import { useScopeFocusWatcher } from 'common/hooks/interactionScopes';
 import { useClearStorage } from 'common/hooks/useClearStorage';
 import { useFullscreenDropzone } from 'common/hooks/useFullscreenDropzone';
 import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
@@ -14,13 +13,13 @@ import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardMo
 import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal';
 import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
 import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
-import { ClearQueueConfirmationsAlertDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { StylePresetModal } from 'features/stylePresets/components/StylePresetForm/StylePresetModal';
+import { activeStylePresetIdChanged } from 'features/stylePresets/store/stylePresetSlice';
 import { configChanged } from 'features/system/store/configSlice';
-import { selectLanguage } from 'features/system/store/systemSelectors';
-import { AppContent } from 'features/ui/components/AppContent';
+import { languageSelector } from 'features/system/store/systemSelectors';
+import InvokeTabs from 'features/ui/components/InvokeTabs';
+import type { InvokeTabName } from 'features/ui/store/tabMap';
 import { setActiveTab } from 'features/ui/store/uiSlice';
-import type { TabName } from 'features/ui/store/uiTypes';
 import { useGetAndLoadLibraryWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow';
 import { AnimatePresence } from 'framer-motion';
 import i18n from 'i18n';
@@ -41,11 +40,18 @@ interface Props {
     action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
   };
   selectedWorkflowId?: string;
-  destination?: TabName | undefined;
+  selectedStylePresetId?: string;
+  destination?: InvokeTabName | undefined;
 }
 
-const App = ({ config = DEFAULT_CONFIG, selectedImage, selectedWorkflowId, destination }: Props) => {
-  const language = useAppSelector(selectLanguage);
+const App = ({
+  config = DEFAULT_CONFIG,
+  selectedImage,
+  selectedWorkflowId,
+  selectedStylePresetId,
+  destination,
+}: Props) => {
+  const language = useAppSelector(languageSelector);
   const logger = useLogger('system');
   const dispatch = useAppDispatch();
   const clearStorage = useClearStorage();
@@ -83,6 +89,12 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage, selectedWorkflowId, desti
     }
   }, [selectedWorkflowId, getAndLoadWorkflow]);
 
+  useEffect(() => {
+    if (selectedStylePresetId) {
+      dispatch(activeStylePresetIdChanged(selectedStylePresetId));
+    }
+  }, [dispatch, selectedStylePresetId]);
+
   useEffect(() => {
     if (destination) {
       dispatch(setActiveTab(destination));
@@ -95,7 +107,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage, selectedWorkflowId, desti
 
   useStarterModelsToast();
   useSyncQueueStatus();
-  useScopeFocusWatcher();
 
   return (
     <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
@@ -108,7 +119,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage, selectedWorkflowId, desti
         {...dropzone.getRootProps()}
       >
         <input {...dropzone.getInputProps()} />
-        <AppContent />
+        <InvokeTabs />
         <AnimatePresence>
           {dropzone.isDragActive && isHandlingUpload && (
             <ImageUploadOverlay dropzone={dropzone} setIsHandlingUpload={setIsHandlingUpload} />
@@ -119,7 +130,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage, selectedWorkflowId, desti
       <ChangeBoardModal />
       <DynamicPromptsModal />
       <StylePresetModal />
-      <ClearQueueConfirmationsAlertDialog />
       <PreselectedImage selectedImage={selectedImage} />
     </ErrorBoundary>
   );

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

@@ -1,7 +1,5 @@
 import { Button, Flex, Heading, Image, Link, Text } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectConfigSlice } from 'features/system/store/configSlice';
 import { toast } from 'features/toast/toast';
 import newGithubIssueUrl from 'new-github-issue-url';
 import InvokeLogoYellow from 'public/assets/images/invoke-symbol-ylw-lrg.svg';
@@ -15,11 +13,9 @@ type Props = {
   resetErrorBoundary: () => void;
 };
 
-const selectIsLocal = createSelector(selectConfigSlice, (config) => config.isLocal);
-
 const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => {
   const { t } = useTranslation();
-  const isLocal = useAppSelector(selectIsLocal);
+  const isLocal = useAppSelector((s) => s.config.isLocal);
 
   const handleCopy = useCallback(() => {
     const text = JSON.stringify(serializeError(error), null, 2);

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

@@ -19,7 +19,7 @@ import type { PartialAppConfig } from 'app/types/invokeai';
 import Loading from 'common/components/Loading/Loading';
 import AppDndContext from 'features/dnd/components/AppDndContext';
 import type { WorkflowCategory } from 'features/nodes/types/workflow';
-import type { TabName } from 'features/ui/store/uiTypes';
+import type { InvokeTabName } from 'features/ui/store/tabMap';
 import type { PropsWithChildren, ReactNode } from 'react';
 import React, { lazy, memo, useEffect, useMemo } from 'react';
 import { Provider } from 'react-redux';
@@ -45,7 +45,8 @@ interface Props extends PropsWithChildren {
     action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
   };
   selectedWorkflowId?: string;
-  destination?: TabName;
+  selectedStylePresetId?: string;
+  destination?: InvokeTabName;
   customStarUi?: CustomStarUi;
   socketOptions?: Partial<ManagerOptions & SocketOptions>;
   isDebugging?: boolean;
@@ -66,6 +67,7 @@ const InvokeAIUI = ({
   queueId,
   selectedImage,
   selectedWorkflowId,
+  selectedStylePresetId,
   destination,
   customStarUi,
   socketOptions,
@@ -227,6 +229,7 @@ const InvokeAIUI = ({
                 config={config}
                 selectedImage={selectedImage}
                 selectedWorkflowId={selectedWorkflowId}
+                selectedStylePresetId={selectedStylePresetId}
                 destination={destination}
               />
             </AppDndContext>

invokeai/frontend/web/src/app/hooks/useSocketIO.ts

@@ -2,7 +2,7 @@ import { useStore } from '@nanostores/react';
 import { $authToken } from 'app/store/nanostores/authToken';
 import { $baseUrl } from 'app/store/nanostores/baseUrl';
 import { $isDebugging } from 'app/store/nanostores/isDebugging';
-import { useAppStore } from 'app/store/nanostores/store';
+import { useAppDispatch } from 'app/store/storeHooks';
 import type { MapStore } from 'nanostores';
 import { atom, map } from 'nanostores';
 import { useEffect, useMemo } from 'react';
@@ -18,19 +18,14 @@ declare global {
   }
 }
 
-export type AppSocket = Socket<ServerToClientEvents, ClientToServerEvents>;
-
-export const $socket = atom<AppSocket | null>(null);
 export const $socketOptions = map<Partial<ManagerOptions & SocketOptions>>({});
-
 const $isSocketInitialized = atom<boolean>(false);
-export const $isConnected = atom<boolean>(false);
 
 /**
  * Initializes the socket.io connection and sets up event listeners.
  */
 export const useSocketIO = () => {
-  const { dispatch, getState } = useAppStore();
+  const dispatch = useAppDispatch();
   const baseUrl = useStore($baseUrl);
   const authToken = useStore($authToken);
   const addlSocketOptions = useStore($socketOptions);
@@ -66,9 +61,8 @@ export const useSocketIO = () => {
       return;
     }
 
-    const socket: AppSocket = io(socketUrl, socketOptions);
-    $socket.set(socket);
-    setEventListeners({ socket, dispatch, getState, setIsConnected: $isConnected.set });
+    const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(socketUrl, socketOptions);
+    setEventListeners({ dispatch, socket });
     socket.connect();
 
     if ($isDebugging.get() || import.meta.env.MODE === 'development') {
@@ -90,5 +84,5 @@ export const useSocketIO = () => {
       socket.disconnect();
       $isSocketInitialized.set(false);
     };
-  }, [dispatch, getState, socketOptions, socketUrl]);
+  }, [dispatch, socketOptions, socketUrl]);
 };

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

@@ -15,21 +15,21 @@ export const BASE_CONTEXT = {};
 
 export const $logger = atom<Logger>(Roarr.child(BASE_CONTEXT));
 
-export const zLogNamespace = z.enum([
-  'canvas',
-  'config',
-  'events',
-  'gallery',
-  'generation',
-  'metadata',
-  'models',
-  'system',
-  'queue',
-  'workflows',
-]);
-export type LogNamespace = z.infer<typeof zLogNamespace>;
+export type LoggerNamespace =
+  | 'images'
+  | 'models'
+  | 'config'
+  | 'canvas'
+  | 'generation'
+  | 'nodes'
+  | 'system'
+  | 'socketio'
+  | 'session'
+  | 'queue'
+  | 'dnd'
+  | 'controlLayers';
 
-export const logger = (namespace: LogNamespace) => $logger.get().child({ namespace });
+export const logger = (namespace: LoggerNamespace) => $logger.get().child({ namespace });
 
 export const zLogLevel = z.enum(['trace', 'debug', 'info', 'warn', 'error', 'fatal']);
 export type LogLevel = z.infer<typeof zLogLevel>;

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

@@ -1,41 +1,29 @@
 import { createLogWriter } from '@roarr/browser-log-writer';
 import { useAppSelector } from 'app/store/storeHooks';
-import {
-  selectSystemLogIsEnabled,
-  selectSystemLogLevel,
-  selectSystemLogNamespaces,
-} from 'features/system/store/systemSlice';
 import { useEffect, useMemo } from 'react';
 import { ROARR, Roarr } from 'roarr';
 
-import type { LogNamespace } from './logger';
+import type { LoggerNamespace } from './logger';
 import { $logger, BASE_CONTEXT, LOG_LEVEL_MAP, logger } from './logger';
 
-export const useLogger = (namespace: LogNamespace) => {
-  const logLevel = useAppSelector(selectSystemLogLevel);
-  const logNamespaces = useAppSelector(selectSystemLogNamespaces);
-  const logIsEnabled = useAppSelector(selectSystemLogIsEnabled);
+export const useLogger = (namespace: LoggerNamespace) => {
+  const consoleLogLevel = useAppSelector((s) => s.system.consoleLogLevel);
+  const shouldLogToConsole = useAppSelector((s) => s.system.shouldLogToConsole);
 
   // The provided Roarr browser log writer uses localStorage to config logging to console
   useEffect(() => {
-    if (logIsEnabled) {
+    if (shouldLogToConsole) {
       // Enable console log output
       localStorage.setItem('ROARR_LOG', 'true');
 
       // Use a filter to show only logs of the given level
-      let filter = `context.logLevel:>=${LOG_LEVEL_MAP[logLevel]}`;
-      if (logNamespaces.length > 0) {
-        filter += ` AND (${logNamespaces.map((ns) => `context.namespace:${ns}`).join(' OR ')})`;
-      } else {
-        filter += ' AND context.namespace:undefined';
-      }
-      localStorage.setItem('ROARR_FILTER', filter);
+      localStorage.setItem('ROARR_FILTER', `context.logLevel:>=${LOG_LEVEL_MAP[consoleLogLevel]}`);
     } else {
       // Disable console log output
       localStorage.setItem('ROARR_LOG', 'false');
     }
     ROARR.write = createLogWriter();
-  }, [logLevel, logIsEnabled, logNamespaces]);
+  }, [consoleLogLevel, shouldLogToConsole]);
 
   // Update the module-scoped logger context as needed
   useEffect(() => {

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

@@ -1,7 +1,7 @@
 import { createAction } from '@reduxjs/toolkit';
-import type { TabName } from 'features/ui/store/uiTypes';
+import type { InvokeTabName } from 'features/ui/store/tabMap';
 
 export const enqueueRequested = createAction<{
-  tabName: TabName;
+  tabName: InvokeTabName;
   prepend: boolean;
 }>('app/enqueueRequested');

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

@@ -1,3 +1,2 @@
 export const STORAGE_PREFIX = '@@invokeai-';
 export const EMPTY_ARRAY = [];
-export const EMPTY_OBJECT = {};

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

@@ -1,6 +1,5 @@
 import { createDraftSafeSelectorCreator, createSelectorCreator, lruMemoize } from '@reduxjs/toolkit';
 import type { GetSelectorsOptions } from '@reduxjs/toolkit/dist/entities/state_selectors';
-import type { RootState } from 'app/store/store';
 import { isEqual } from 'lodash-es';
 
 /**
@@ -20,5 +19,3 @@ export const getSelectorsOptions: GetSelectorsOptions = {
     argsMemoize: lruMemoize,
   }),
 };
-
-export const createMemoizedAppSelector = createMemoizedSelector.withTypes<RootState>();

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

@@ -1,4 +1,5 @@
 import { logger } from 'app/logging/logger';
+import { parseify } from 'common/util/serialize';
 import { PersistError, RehydrateError } from 'redux-remember';
 import { serializeError } from 'serialize-error';
 
@@ -40,6 +41,6 @@ export const errorHandler = (err: PersistError | RehydrateError) => {
   } else if (err instanceof RehydrateError) {
     log.error({ error: serializeError(err) }, 'Problem rehydrating state');
   } else {
-    log.error({ error: serializeError(err) }, 'Problem in persistence layer');
+    log.error({ error: parseify(err) }, 'Problem in persistence layer');
   }
 };

invokeai/frontend/web/src/app/store/middleware/devtools/actionSanitizer.ts

@@ -1,7 +1,9 @@
 import type { UnknownAction } from '@reduxjs/toolkit';
+import { deepClone } from 'common/util/deepClone';
 import { isAnyGraphBuilt } from 'features/nodes/store/actions';
 import { appInfoApi } from 'services/api/endpoints/appInfo';
 import type { Graph } from 'services/api/types';
+import { socketGeneratorProgress } from 'services/events/actions';
 
 export const actionSanitizer = <A extends UnknownAction>(action: A): A => {
   if (isAnyGraphBuilt(action)) {
@@ -22,5 +24,13 @@ export const actionSanitizer = <A extends UnknownAction>(action: A): A => {
     };
   }
 
+  if (socketGeneratorProgress.match(action)) {
+    const sanitized = deepClone(action);
+    if (sanitized.payload.data.progress_image) {
+      sanitized.payload.data.progress_image.dataURL = '<Progress image omitted>';
+    }
+    return sanitized;
+  }
+
   return action;
 };

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

@@ -1,7 +1,7 @@
 import type { TypedStartListening } from '@reduxjs/toolkit';
 import { createListenerMiddleware } from '@reduxjs/toolkit';
 import { addAdHocPostProcessingRequestedListener } from 'app/store/middleware/listenerMiddleware/listeners/addAdHocPostProcessingRequestedListener';
-import { addStagingListeners } from 'app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener';
+import { addCommitStagingAreaImageListener } from 'app/store/middleware/listenerMiddleware/listeners/addCommitStagingAreaImageListener';
 import { addAnyEnqueuedListener } from 'app/store/middleware/listenerMiddleware/listeners/anyEnqueued';
 import { addAppConfigReceivedListener } from 'app/store/middleware/listenerMiddleware/listeners/appConfigReceived';
 import { addAppStartedListener } from 'app/store/middleware/listenerMiddleware/listeners/appStarted';
@@ -9,6 +9,17 @@ import { addBatchEnqueuedListener } from 'app/store/middleware/listenerMiddlewar
 import { addDeleteBoardAndImagesFulfilledListener } from 'app/store/middleware/listenerMiddleware/listeners/boardAndImagesDeleted';
 import { addBoardIdSelectedListener } from 'app/store/middleware/listenerMiddleware/listeners/boardIdSelected';
 import { addBulkDownloadListeners } from 'app/store/middleware/listenerMiddleware/listeners/bulkDownload';
+import { addCanvasCopiedToClipboardListener } from 'app/store/middleware/listenerMiddleware/listeners/canvasCopiedToClipboard';
+import { addCanvasDownloadedAsImageListener } from 'app/store/middleware/listenerMiddleware/listeners/canvasDownloadedAsImage';
+import { addCanvasImageToControlNetListener } from 'app/store/middleware/listenerMiddleware/listeners/canvasImageToControlNet';
+import { addCanvasMaskSavedToGalleryListener } from 'app/store/middleware/listenerMiddleware/listeners/canvasMaskSavedToGallery';
+import { addCanvasMaskToControlNetListener } from 'app/store/middleware/listenerMiddleware/listeners/canvasMaskToControlNet';
+import { addCanvasMergedListener } from 'app/store/middleware/listenerMiddleware/listeners/canvasMerged';
+import { addCanvasSavedToGalleryListener } from 'app/store/middleware/listenerMiddleware/listeners/canvasSavedToGallery';
+import { addControlAdapterPreprocessor } from 'app/store/middleware/listenerMiddleware/listeners/controlAdapterPreprocessor';
+import { addControlNetAutoProcessListener } from 'app/store/middleware/listenerMiddleware/listeners/controlNetAutoProcess';
+import { addControlNetImageProcessedListener } from 'app/store/middleware/listenerMiddleware/listeners/controlNetImageProcessed';
+import { addEnqueueRequestedCanvasListener } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedCanvas';
 import { addEnqueueRequestedLinear } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear';
 import { addEnqueueRequestedNodes } from 'app/store/middleware/listenerMiddleware/listeners/enqueueRequestedNodes';
 import { addGalleryImageClickedListener } from 'app/store/middleware/listenerMiddleware/listeners/galleryImageClicked';
@@ -26,7 +37,16 @@ import { addModelSelectedListener } from 'app/store/middleware/listenerMiddlewar
 import { addModelsLoadedListener } from 'app/store/middleware/listenerMiddleware/listeners/modelsLoaded';
 import { addDynamicPromptsListener } from 'app/store/middleware/listenerMiddleware/listeners/promptChanged';
 import { addSetDefaultSettingsListener } from 'app/store/middleware/listenerMiddleware/listeners/setDefaultSettings';
-import { addSocketConnectedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketConnected';
+import { addSocketConnectedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketConnected';
+import { addSocketDisconnectedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketDisconnected';
+import { addGeneratorProgressEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketGeneratorProgress';
+import { addInvocationCompleteEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete';
+import { addInvocationErrorEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError';
+import { addInvocationStartedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationStarted';
+import { addModelInstallEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketModelInstall';
+import { addModelLoadEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketModelLoad';
+import { addSocketQueueItemStatusChangedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged';
+import { addStagingAreaImageSavedListener } from 'app/store/middleware/listenerMiddleware/listeners/stagingAreaImageSaved';
 import { addUpdateAllNodesRequestedListener } from 'app/store/middleware/listenerMiddleware/listeners/updateAllNodesRequested';
 import { addWorkflowLoadRequestedListener } from 'app/store/middleware/listenerMiddleware/listeners/workflowLoadRequested';
 import type { AppDispatch, RootState } from 'app/store/store';
@@ -63,6 +83,7 @@ addGalleryImageClickedListener(startAppListening);
 addGalleryOffsetChangedListener(startAppListening);
 
 // User Invoked
+addEnqueueRequestedCanvasListener(startAppListening);
 addEnqueueRequestedNodes(startAppListening);
 addEnqueueRequestedLinear(startAppListening);
 addEnqueueRequestedUpscale(startAppListening);
@@ -70,23 +91,32 @@ addAnyEnqueuedListener(startAppListening);
 addBatchEnqueuedListener(startAppListening);
 
 // Canvas actions
-// addCanvasSavedToGalleryListener(startAppListening);
-// addCanvasMaskSavedToGalleryListener(startAppListening);
-// addCanvasImageToControlNetListener(startAppListening);
-// addCanvasMaskToControlNetListener(startAppListening);
-// addCanvasDownloadedAsImageListener(startAppListening);
-// addCanvasCopiedToClipboardListener(startAppListening);
-// addCanvasMergedListener(startAppListening);
-// addStagingAreaImageSavedListener(startAppListening);
-// addCommitStagingAreaImageListener(startAppListening);
-addStagingListeners(startAppListening);
+addCanvasSavedToGalleryListener(startAppListening);
+addCanvasMaskSavedToGalleryListener(startAppListening);
+addCanvasImageToControlNetListener(startAppListening);
+addCanvasMaskToControlNetListener(startAppListening);
+addCanvasDownloadedAsImageListener(startAppListening);
+addCanvasCopiedToClipboardListener(startAppListening);
+addCanvasMergedListener(startAppListening);
+addStagingAreaImageSavedListener(startAppListening);
+addCommitStagingAreaImageListener(startAppListening);
 
 // Socket.IO
+addGeneratorProgressEventListener(startAppListening);
+addInvocationCompleteEventListener(startAppListening);
+addInvocationErrorEventListener(startAppListening);
+addInvocationStartedEventListener(startAppListening);
 addSocketConnectedEventListener(startAppListening);
-
-// Gallery bulk download
+addSocketDisconnectedEventListener(startAppListening);
+addModelLoadEventListener(startAppListening);
+addModelInstallEventListener(startAppListening);
+addSocketQueueItemStatusChangedEventListener(startAppListening);
 addBulkDownloadListeners(startAppListening);
 
+// ControlNet
+addControlNetImageProcessedListener(startAppListening);
+addControlNetAutoProcessListener(startAppListening);
+
 // Boards
 addImageAddedToBoardFulfilledListener(startAppListening);
 addImageRemovedFromBoardFulfilledListener(startAppListening);
@@ -118,4 +148,4 @@ addAdHocPostProcessingRequestedListener(startAppListening);
 addDynamicPromptsListener(startAppListening);
 
 addSetDefaultSettingsListener(startAppListening);
-// addControlAdapterPreprocessor(startAppListening);
+addControlAdapterPreprocessor(startAppListening);

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

@@ -1,21 +1,21 @@
 import { createAction } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import type { SerializableObject } from 'common/types';
+import { parseify } from 'common/util/serialize';
 import { buildAdHocPostProcessingGraph } from 'features/nodes/util/graph/buildAdHocPostProcessingGraph';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { queueApi } from 'services/api/endpoints/queue';
 import type { BatchConfig, ImageDTO } from 'services/api/types';
 
-const log = logger('queue');
-
 export const adHocPostProcessingRequested = createAction<{ imageDTO: ImageDTO }>(`upscaling/postProcessingRequested`);
 
 export const addAdHocPostProcessingRequestedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     actionCreator: adHocPostProcessingRequested,
     effect: async (action, { dispatch, getState }) => {
+      const log = logger('session');
+
       const { imageDTO } = action.payload;
       const state = getState();
 
@@ -39,9 +39,9 @@ export const addAdHocPostProcessingRequestedListener = (startAppListening: AppSt
 
         const enqueueResult = await req.unwrap();
         req.reset();
-        log.debug({ enqueueResult } as SerializableObject, t('queue.graphQueued'));
+        log.debug({ enqueueResult: parseify(enqueueResult) }, t('queue.graphQueued'));
       } catch (error) {
-        log.error({ enqueueBatchArg } as SerializableObject, t('queue.graphFailedToQueue'));
+        log.error({ enqueueBatchArg: parseify(enqueueBatchArg) }, t('queue.graphFailedToQueue'));
 
         if (error instanceof Object && 'status' in error && error.status === 403) {
           return;

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

@@ -23,7 +23,7 @@ export const addArchivedOrDeletedBoardListener = (startAppListening: AppStartLis
    */
   startAppListening({
     matcher: matchAnyBoardDeleted,
-    effect: (action, { dispatch, getState }) => {
+    effect: async (action, { dispatch, getState }) => {
       const state = getState();
       const deletedBoardId = action.meta.arg.originalArgs;
       const { autoAddBoardId, selectedBoardId } = state.gallery;
@@ -44,7 +44,7 @@ export const addArchivedOrDeletedBoardListener = (startAppListening: AppStartLis
   // If we archived a board, it may end up hidden. If it's selected or the auto-add board, we should reset those.
   startAppListening({
     matcher: boardsApi.endpoints.updateBoard.matchFulfilled,
-    effect: (action, { dispatch, getState }) => {
+    effect: async (action, { dispatch, getState }) => {
       const state = getState();
       const { shouldShowArchivedBoards } = state.gallery;
 
@@ -61,7 +61,7 @@ export const addArchivedOrDeletedBoardListener = (startAppListening: AppStartLis
   // When we hide archived boards, if the selected or the auto-add board is archived, we should reset those.
   startAppListening({
     actionCreator: shouldShowArchivedBoardsChanged,
-    effect: (action, { dispatch, getState }) => {
+    effect: async (action, { dispatch, getState }) => {
       const shouldShowArchivedBoards = action.payload;
 
       // We only need to take action if we have just hidden archived boards.
@@ -100,7 +100,7 @@ export const addArchivedOrDeletedBoardListener = (startAppListening: AppStartLis
    */
   startAppListening({
     matcher: boardsApi.endpoints.listAllBoards.matchFulfilled,
-    effect: (action, { dispatch, getState }) => {
+    effect: async (action, { dispatch, getState }) => {
       const boards = action.payload;
       const state = getState();
       const { selectedBoardId, autoAddBoardId } = state.gallery;

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

@@ -1,37 +1,33 @@
+import { isAnyOf } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import {
-  sessionStagingAreaImageAccepted,
-  sessionStagingAreaReset,
-} from 'features/controlLayers/store/canvasSessionSlice';
-import { rasterLayerAdded } from 'features/controlLayers/store/canvasSlice';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
-import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
-import { imageDTOToImageObject } from 'features/controlLayers/store/types';
+  canvasBatchIdsReset,
+  commitStagingAreaImage,
+  discardStagedImages,
+  resetCanvas,
+  setInitialCanvasImage,
+} from 'features/canvas/store/canvasSlice';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { queueApi } from 'services/api/endpoints/queue';
-import { $lastCanvasProgressEvent } from 'services/events/setEventListeners';
-import { assert } from 'tsafe';
 
-const log = logger('canvas');
+const matcher = isAnyOf(commitStagingAreaImage, discardStagedImages, resetCanvas, setInitialCanvasImage);
 
-export const addStagingListeners = (startAppListening: AppStartListening) => {
+export const addCommitStagingAreaImageListener = (startAppListening: AppStartListening) => {
   startAppListening({
-    actionCreator: sessionStagingAreaReset,
-    effect: async (_, { dispatch }) => {
+    matcher,
+    effect: async (_, { dispatch, getState }) => {
+      const log = logger('canvas');
+      const state = getState();
+      const { batchIds } = state.canvas;
+
       try {
         const req = dispatch(
-          queueApi.endpoints.cancelByBatchOrigin.initiate(
-            { origin: 'canvas' },
-            { fixedCacheKey: 'cancelByBatchOrigin' }
-          )
+          queueApi.endpoints.cancelByBatchIds.initiate({ batch_ids: batchIds }, { fixedCacheKey: 'cancelByBatchIds' })
         );
         const { canceled } = await req.unwrap();
         req.reset();
-
-        $lastCanvasProgressEvent.set(null);
-
         if (canceled > 0) {
           log.debug(`Canceled ${canceled} canvas batches`);
           toast({
@@ -40,6 +36,7 @@ export const addStagingListeners = (startAppListening: AppStartListening) => {
             status: 'success',
           });
         }
+        dispatch(canvasBatchIdsReset());
       } catch {
         log.error('Failed to cancel canvas batches');
         toast({
@@ -50,26 +47,4 @@ export const addStagingListeners = (startAppListening: AppStartListening) => {
       }
     },
   });
-
-  startAppListening({
-    actionCreator: sessionStagingAreaImageAccepted,
-    effect: (action, api) => {
-      const { index } = action.payload;
-      const state = api.getState();
-      const stagingAreaImage = state.canvasSession.stagedImages[index];
-
-      assert(stagingAreaImage, 'No staged image found to accept');
-      const { x, y } = selectCanvasSlice(state).bbox.rect;
-
-      const { imageDTO, offsetX, offsetY } = stagingAreaImage;
-      const imageObject = imageDTOToImageObject(imageDTO);
-      const overrides: Partial<CanvasRasterLayerState> = {
-        position: { x: x + offsetX, y: y + offsetY },
-        objects: [imageObject],
-      };
-
-      api.dispatch(rasterLayerAdded({ overrides, isSelected: true }));
-      api.dispatch(sessionStagingAreaReset());
-    },
-  });
 };

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

@@ -4,7 +4,7 @@ import { queueApi, selectQueueStatus } from 'services/api/endpoints/queue';
 export const addAnyEnqueuedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher: queueApi.endpoints.enqueueBatch.matchFulfilled,
-    effect: (_, { dispatch, getState }) => {
+    effect: async (_, { dispatch, getState }) => {
       const { data } = selectQueueStatus(getState());
 
       if (!data || data.processor.is_started) {

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

@@ -1,14 +1,14 @@
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { setInfillMethod } from 'features/controlLayers/store/paramsSlice';
+import { setInfillMethod } from 'features/parameters/store/generationSlice';
 import { shouldUseNSFWCheckerChanged, shouldUseWatermarkerChanged } from 'features/system/store/systemSlice';
 import { appInfoApi } from 'services/api/endpoints/appInfo';
 
 export const addAppConfigReceivedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher: appInfoApi.endpoints.getAppConfig.matchFulfilled,
-    effect: (action, { getState, dispatch }) => {
+    effect: async (action, { getState, dispatch }) => {
       const { infill_methods = [], nsfw_methods = [], watermarking_methods = [] } = action.payload;
-      const infillMethod = getState().params.infillMethod;
+      const infillMethod = getState().generation.infillMethod;
 
       if (!infill_methods.includes(infillMethod)) {
         // if there is no infill method, set it to the first one

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

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

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

@@ -1,30 +1,27 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import type { SerializableObject } from 'common/types';
+import { parseify } from 'common/util/serialize';
 import { zPydanticValidationError } from 'features/system/store/zodSchemas';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { truncate, upperFirst } from 'lodash-es';
-import { serializeError } from 'serialize-error';
 import { queueApi } from 'services/api/endpoints/queue';
 
-const log = logger('queue');
-
 export const addBatchEnqueuedListener = (startAppListening: AppStartListening) => {
   // success
   startAppListening({
     matcher: queueApi.endpoints.enqueueBatch.matchFulfilled,
-    effect: (action) => {
-      const enqueueResult = action.payload;
+    effect: async (action) => {
+      const response = action.payload;
       const arg = action.meta.arg.originalArgs;
-      log.debug({ enqueueResult } as SerializableObject, 'Batch enqueued');
+      logger('queue').debug({ enqueueResult: parseify(response) }, 'Batch enqueued');
 
       toast({
         id: 'QUEUE_BATCH_SUCCEEDED',
         title: t('queue.batchQueued'),
         status: 'success',
         description: t('queue.batchQueuedDesc', {
-          count: enqueueResult.enqueued,
+          count: response.enqueued,
           direction: arg.prepend ? t('queue.front') : t('queue.back'),
         }),
       });
@@ -34,9 +31,9 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
   // error
   startAppListening({
     matcher: queueApi.endpoints.enqueueBatch.matchRejected,
-    effect: (action) => {
+    effect: async (action) => {
       const response = action.payload;
-      const batchConfig = action.meta.arg.originalArgs;
+      const arg = action.meta.arg.originalArgs;
 
       if (!response) {
         toast({
@@ -45,7 +42,7 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
           status: 'error',
           description: t('common.unknownError'),
         });
-        log.error({ batchConfig } as SerializableObject, t('queue.batchFailedToQueue'));
+        logger('queue').error({ batchConfig: parseify(arg), error: parseify(response) }, t('queue.batchFailedToQueue'));
         return;
       }
 
@@ -71,7 +68,7 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
           description: t('common.unknownError'),
         });
       }
-      log.error({ batchConfig, error: serializeError(response) } as SerializableObject, t('queue.batchFailedToQueue'));
+      logger('queue').error({ batchConfig: parseify(arg), error: parseify(response) }, t('queue.batchFailedToQueue'));
     },
   });
 };

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

@@ -1,31 +1,47 @@
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
+import { resetCanvas } from 'features/canvas/store/canvasSlice';
+import { controlAdaptersReset } from 'features/controlAdapters/store/controlAdaptersSlice';
+import { allLayersDeleted } from 'features/controlLayers/store/controlLayersSlice';
 import { getImageUsage } from 'features/deleteImageModal/store/selectors';
 import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
-import { selectNodesSlice } from 'features/nodes/store/selectors';
 import { imagesApi } from 'services/api/endpoints/images';
 
 export const addDeleteBoardAndImagesFulfilledListener = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher: imagesApi.endpoints.deleteBoardAndImages.matchFulfilled,
-    effect: (action, { dispatch, getState }) => {
+    effect: async (action, { dispatch, getState }) => {
       const { deleted_images } = action.payload;
 
       // Remove all deleted images from the UI
 
+      let wasCanvasReset = false;
       let wasNodeEditorReset = false;
+      let wereControlAdaptersReset = false;
+      let wereControlLayersReset = false;
 
-      const state = getState();
-      const nodes = selectNodesSlice(state);
-      const canvas = selectCanvasSlice(state);
-
+      const { canvas, nodes, controlAdapters, controlLayers } = getState();
       deleted_images.forEach((image_name) => {
-        const imageUsage = getImageUsage(nodes, canvas, image_name);
+        const imageUsage = getImageUsage(canvas, nodes.present, controlAdapters, controlLayers.present, image_name);
+
+        if (imageUsage.isCanvasImage && !wasCanvasReset) {
+          dispatch(resetCanvas());
+          wasCanvasReset = true;
+        }
 
         if (imageUsage.isNodesImage && !wasNodeEditorReset) {
           dispatch(nodeEditorReset());
           wasNodeEditorReset = true;
         }
+
+        if (imageUsage.isControlImage && !wereControlAdaptersReset) {
+          dispatch(controlAdaptersReset());
+          wereControlAdaptersReset = true;
+        }
+
+        if (imageUsage.isControlLayerImage && !wereControlLayersReset) {
+          dispatch(allLayersDeleted());
+          wereControlLayersReset = true;
+        }
       });
     },
   });

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/bulkDownload.tsx

@@ -1,15 +1,21 @@
+import { ExternalLink } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { imagesApi } from 'services/api/endpoints/images';
+import {
+  socketBulkDownloadComplete,
+  socketBulkDownloadError,
+  socketBulkDownloadStarted,
+} from 'services/events/actions';
 
-const log = logger('gallery');
+const log = logger('images');
 
 export const addBulkDownloadListeners = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher: imagesApi.endpoints.bulkDownloadImages.matchFulfilled,
-    effect: (action) => {
+    effect: async (action) => {
       log.debug(action.payload, 'Bulk download requested');
 
       // If we have an item name, we are processing the bulk download locally and should use it as the toast id to
@@ -27,7 +33,7 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) =
 
   startAppListening({
     matcher: imagesApi.endpoints.bulkDownloadImages.matchRejected,
-    effect: () => {
+    effect: async () => {
       log.debug('Bulk download request failed');
 
       // There isn't any toast to update if we get this event.
@@ -38,4 +44,55 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) =
       });
     },
   });
+
+  startAppListening({
+    actionCreator: socketBulkDownloadStarted,
+    effect: async (action) => {
+      // This should always happen immediately after the bulk download request, so we don't need to show a toast here.
+      log.debug(action.payload.data, 'Bulk download preparation started');
+    },
+  });
+
+  startAppListening({
+    actionCreator: socketBulkDownloadComplete,
+    effect: async (action) => {
+      log.debug(action.payload.data, 'Bulk download preparation completed');
+
+      const { bulk_download_item_name } = action.payload.data;
+
+      // TODO(psyche): This URL may break in in some environments (e.g. Nvidia workbench) but we need to test it first
+      const url = `/api/v1/images/download/${bulk_download_item_name}`;
+
+      toast({
+        id: bulk_download_item_name,
+        title: t('gallery.bulkDownloadReady', 'Download ready'),
+        status: 'success',
+        description: (
+          <ExternalLink
+            label={t('gallery.clickToDownload', 'Click here to download')}
+            href={url}
+            download={bulk_download_item_name}
+          />
+        ),
+        duration: null,
+      });
+    },
+  });
+
+  startAppListening({
+    actionCreator: socketBulkDownloadError,
+    effect: async (action) => {
+      log.debug(action.payload.data, 'Bulk download preparation failed');
+
+      const { bulk_download_item_name } = action.payload.data;
+
+      toast({
+        id: bulk_download_item_name,
+        title: t('gallery.bulkDownloadFailed'),
+        status: 'error',
+        description: action.payload.data.error,
+        duration: null,
+      });
+    },
+  });
 };

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

@@ -0,0 +1,38 @@
+import { $logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { canvasCopiedToClipboard } from 'features/canvas/store/actions';
+import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
+import { copyBlobToClipboard } from 'features/system/util/copyBlobToClipboard';
+import { toast } from 'features/toast/toast';
+import { t } from 'i18next';
+
+export const addCanvasCopiedToClipboardListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: canvasCopiedToClipboard,
+    effect: async (action, { getState }) => {
+      const moduleLog = $logger.get().child({ namespace: 'canvasCopiedToClipboardListener' });
+      const state = getState();
+
+      try {
+        const blob = getBaseLayerBlob(state);
+
+        copyBlobToClipboard(blob);
+      } catch (err) {
+        moduleLog.error(String(err));
+        toast({
+          id: 'CANVAS_COPY_FAILED',
+          title: t('toast.problemCopyingCanvas'),
+          description: t('toast.problemCopyingCanvasDesc'),
+          status: 'error',
+        });
+        return;
+      }
+
+      toast({
+        id: 'CANVAS_COPY_SUCCEEDED',
+        title: t('toast.canvasCopiedClipboard'),
+        status: 'success',
+      });
+    },
+  });
+};

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

@@ -0,0 +1,34 @@
+import { $logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { canvasDownloadedAsImage } from 'features/canvas/store/actions';
+import { downloadBlob } from 'features/canvas/util/downloadBlob';
+import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
+import { toast } from 'features/toast/toast';
+import { t } from 'i18next';
+
+export const addCanvasDownloadedAsImageListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: canvasDownloadedAsImage,
+    effect: async (action, { getState }) => {
+      const moduleLog = $logger.get().child({ namespace: 'canvasSavedToGalleryListener' });
+      const state = getState();
+
+      let blob;
+      try {
+        blob = await getBaseLayerBlob(state);
+      } catch (err) {
+        moduleLog.error(String(err));
+        toast({
+          id: 'CANVAS_DOWNLOAD_FAILED',
+          title: t('toast.problemDownloadingCanvas'),
+          description: t('toast.problemDownloadingCanvasDesc'),
+          status: 'error',
+        });
+        return;
+      }
+
+      downloadBlob(blob, 'canvas.png');
+      toast({ id: 'CANVAS_DOWNLOAD_SUCCEEDED', title: t('toast.canvasDownloaded'), status: 'success' });
+    },
+  });
+};

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

@@ -0,0 +1,60 @@
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { canvasImageToControlAdapter } from 'features/canvas/store/actions';
+import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
+import { controlAdapterImageChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
+import { toast } from 'features/toast/toast';
+import { t } from 'i18next';
+import { imagesApi } from 'services/api/endpoints/images';
+
+export const addCanvasImageToControlNetListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: canvasImageToControlAdapter,
+    effect: async (action, { dispatch, getState }) => {
+      const log = logger('canvas');
+      const state = getState();
+      const { id } = action.payload;
+
+      let blob: Blob;
+      try {
+        blob = await getBaseLayerBlob(state, true);
+      } catch (err) {
+        log.error(String(err));
+        toast({
+          id: 'PROBLEM_SAVING_CANVAS',
+          title: t('toast.problemSavingCanvas'),
+          description: t('toast.problemSavingCanvasDesc'),
+          status: 'error',
+        });
+        return;
+      }
+
+      const { autoAddBoardId } = state.gallery;
+
+      const imageDTO = await dispatch(
+        imagesApi.endpoints.uploadImage.initiate({
+          file: new File([blob], 'savedCanvas.png', {
+            type: 'image/png',
+          }),
+          image_category: 'control',
+          is_intermediate: true,
+          board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
+          crop_visible: false,
+          postUploadAction: {
+            type: 'TOAST',
+            title: t('toast.canvasSentControlnetAssets'),
+          },
+        })
+      ).unwrap();
+
+      const { image_name } = imageDTO;
+
+      dispatch(
+        controlAdapterImageChanged({
+          id,
+          controlImage: image_name,
+        })
+      );
+    },
+  });
+};

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

@@ -0,0 +1,60 @@
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { canvasMaskSavedToGallery } from 'features/canvas/store/actions';
+import { getCanvasData } from 'features/canvas/util/getCanvasData';
+import { toast } from 'features/toast/toast';
+import { t } from 'i18next';
+import { imagesApi } from 'services/api/endpoints/images';
+
+export const addCanvasMaskSavedToGalleryListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: canvasMaskSavedToGallery,
+    effect: async (action, { dispatch, getState }) => {
+      const log = logger('canvas');
+      const state = getState();
+
+      const canvasBlobsAndImageData = await getCanvasData(
+        state.canvas.layerState,
+        state.canvas.boundingBoxCoordinates,
+        state.canvas.boundingBoxDimensions,
+        state.canvas.isMaskEnabled,
+        state.canvas.shouldPreserveMaskedArea
+      );
+
+      if (!canvasBlobsAndImageData) {
+        return;
+      }
+
+      const { maskBlob } = canvasBlobsAndImageData;
+
+      if (!maskBlob) {
+        log.error('Problem getting mask layer blob');
+        toast({
+          id: 'PROBLEM_SAVING_MASK',
+          title: t('toast.problemSavingMask'),
+          description: t('toast.problemSavingMaskDesc'),
+          status: 'error',
+        });
+        return;
+      }
+
+      const { autoAddBoardId } = state.gallery;
+
+      dispatch(
+        imagesApi.endpoints.uploadImage.initiate({
+          file: new File([maskBlob], 'canvasMaskImage.png', {
+            type: 'image/png',
+          }),
+          image_category: 'mask',
+          is_intermediate: false,
+          board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
+          crop_visible: true,
+          postUploadAction: {
+            type: 'TOAST',
+            title: t('toast.maskSavedAssets'),
+          },
+        })
+      );
+    },
+  });
+};

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

@@ -0,0 +1,70 @@
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { canvasMaskToControlAdapter } from 'features/canvas/store/actions';
+import { getCanvasData } from 'features/canvas/util/getCanvasData';
+import { controlAdapterImageChanged } from 'features/controlAdapters/store/controlAdaptersSlice';
+import { toast } from 'features/toast/toast';
+import { t } from 'i18next';
+import { imagesApi } from 'services/api/endpoints/images';
+
+export const addCanvasMaskToControlNetListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: canvasMaskToControlAdapter,
+    effect: async (action, { dispatch, getState }) => {
+      const log = logger('canvas');
+      const state = getState();
+      const { id } = action.payload;
+      const canvasBlobsAndImageData = await getCanvasData(
+        state.canvas.layerState,
+        state.canvas.boundingBoxCoordinates,
+        state.canvas.boundingBoxDimensions,
+        state.canvas.isMaskEnabled,
+        state.canvas.shouldPreserveMaskedArea
+      );
+
+      if (!canvasBlobsAndImageData) {
+        return;
+      }
+
+      const { maskBlob } = canvasBlobsAndImageData;
+
+      if (!maskBlob) {
+        log.error('Problem getting mask layer blob');
+        toast({
+          id: 'PROBLEM_IMPORTING_MASK',
+          title: t('toast.problemImportingMask'),
+          description: t('toast.problemImportingMaskDesc'),
+          status: 'error',
+        });
+        return;
+      }
+
+      const { autoAddBoardId } = state.gallery;
+
+      const imageDTO = await dispatch(
+        imagesApi.endpoints.uploadImage.initiate({
+          file: new File([maskBlob], 'canvasMaskImage.png', {
+            type: 'image/png',
+          }),
+          image_category: 'mask',
+          is_intermediate: true,
+          board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
+          crop_visible: false,
+          postUploadAction: {
+            type: 'TOAST',
+            title: t('toast.maskSentControlnetAssets'),
+          },
+        })
+      ).unwrap();
+
+      const { image_name } = imageDTO;
+
+      dispatch(
+        controlAdapterImageChanged({
+          id,
+          controlImage: image_name,
+        })
+      );
+    },
+  });
+};

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

@@ -0,0 +1,73 @@
+import { $logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { canvasMerged } from 'features/canvas/store/actions';
+import { $canvasBaseLayer } from 'features/canvas/store/canvasNanostore';
+import { setMergedCanvas } from 'features/canvas/store/canvasSlice';
+import { getFullBaseLayerBlob } from 'features/canvas/util/getFullBaseLayerBlob';
+import { toast } from 'features/toast/toast';
+import { t } from 'i18next';
+import { imagesApi } from 'services/api/endpoints/images';
+
+export const addCanvasMergedListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: canvasMerged,
+    effect: async (action, { dispatch }) => {
+      const moduleLog = $logger.get().child({ namespace: 'canvasCopiedToClipboardListener' });
+      const blob = await getFullBaseLayerBlob();
+
+      if (!blob) {
+        moduleLog.error('Problem getting base layer blob');
+        toast({
+          id: 'PROBLEM_MERGING_CANVAS',
+          title: t('toast.problemMergingCanvas'),
+          description: t('toast.problemMergingCanvasDesc'),
+          status: 'error',
+        });
+        return;
+      }
+
+      const canvasBaseLayer = $canvasBaseLayer.get();
+
+      if (!canvasBaseLayer) {
+        moduleLog.error('Problem getting canvas base layer');
+        toast({
+          id: 'PROBLEM_MERGING_CANVAS',
+          title: t('toast.problemMergingCanvas'),
+          description: t('toast.problemMergingCanvasDesc'),
+          status: 'error',
+        });
+        return;
+      }
+
+      const baseLayerRect = canvasBaseLayer.getClientRect({
+        relativeTo: canvasBaseLayer.getParent() ?? undefined,
+      });
+
+      const imageDTO = await dispatch(
+        imagesApi.endpoints.uploadImage.initiate({
+          file: new File([blob], 'mergedCanvas.png', {
+            type: 'image/png',
+          }),
+          image_category: 'general',
+          is_intermediate: true,
+          postUploadAction: {
+            type: 'TOAST',
+            title: t('toast.canvasMerged'),
+          },
+        })
+      ).unwrap();
+
+      // TODO: I can't figure out how to do the type narrowing in the `take()` so just brute forcing it here
+      const { image_name } = imageDTO;
+
+      dispatch(
+        setMergedCanvas({
+          kind: 'image',
+          layer: 'base',
+          imageName: image_name,
+          ...baseLayerRect,
+        })
+      );
+    },
+  });
+};

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

@@ -0,0 +1,53 @@
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { parseify } from 'common/util/serialize';
+import { canvasSavedToGallery } from 'features/canvas/store/actions';
+import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
+import { toast } from 'features/toast/toast';
+import { t } from 'i18next';
+import { imagesApi } from 'services/api/endpoints/images';
+
+export const addCanvasSavedToGalleryListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: canvasSavedToGallery,
+    effect: async (action, { dispatch, getState }) => {
+      const log = logger('canvas');
+      const state = getState();
+
+      let blob;
+      try {
+        blob = await getBaseLayerBlob(state);
+      } catch (err) {
+        log.error(String(err));
+        toast({
+          id: 'CANVAS_SAVE_FAILED',
+          title: t('toast.problemSavingCanvas'),
+          description: t('toast.problemSavingCanvasDesc'),
+          status: 'error',
+        });
+        return;
+      }
+
+      const { autoAddBoardId } = state.gallery;
+
+      dispatch(
+        imagesApi.endpoints.uploadImage.initiate({
+          file: new File([blob], 'savedCanvas.png', {
+            type: 'image/png',
+          }),
+          image_category: 'general',
+          is_intermediate: false,
+          board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
+          crop_visible: true,
+          postUploadAction: {
+            type: 'TOAST',
+            title: t('toast.canvasSavedGallery'),
+          },
+          metadata: {
+            _canvas_objects: parseify(state.canvas.layerState.objects),
+          },
+        })
+      );
+    },
+  });
+};

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

@@ -0,0 +1,194 @@
+import { isAnyOf } from '@reduxjs/toolkit';
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import type { AppDispatch } from 'app/store/store';
+import { parseify } from 'common/util/serialize';
+import {
+  caLayerImageChanged,
+  caLayerModelChanged,
+  caLayerProcessedImageChanged,
+  caLayerProcessorConfigChanged,
+  caLayerProcessorPendingBatchIdChanged,
+  caLayerRecalled,
+  isControlAdapterLayer,
+} from 'features/controlLayers/store/controlLayersSlice';
+import { CA_PROCESSOR_DATA } from 'features/controlLayers/util/controlAdapters';
+import { toast } from 'features/toast/toast';
+import { t } from 'i18next';
+import { isEqual } from 'lodash-es';
+import { getImageDTO } from 'services/api/endpoints/images';
+import { queueApi } from 'services/api/endpoints/queue';
+import type { BatchConfig } from 'services/api/types';
+import { socketInvocationComplete } from 'services/events/actions';
+import { assert } from 'tsafe';
+
+const matcher = isAnyOf(
+  caLayerImageChanged,
+  caLayerProcessedImageChanged,
+  caLayerProcessorConfigChanged,
+  caLayerModelChanged,
+  caLayerRecalled
+);
+
+const DEBOUNCE_MS = 300;
+const log = logger('session');
+
+/**
+ * Simple helper to cancel a batch and reset the pending batch ID
+ */
+const cancelProcessorBatch = async (dispatch: AppDispatch, layerId: string, batchId: string) => {
+  const req = dispatch(queueApi.endpoints.cancelByBatchIds.initiate({ batch_ids: [batchId] }));
+  log.trace({ batchId }, 'Cancelling existing preprocessor batch');
+  try {
+    await req.unwrap();
+  } catch {
+    // no-op
+  } finally {
+    req.reset();
+    // Always reset the pending batch ID - the cancel req could fail if the batch doesn't exist
+    dispatch(caLayerProcessorPendingBatchIdChanged({ layerId, batchId: null }));
+  }
+};
+
+export const addControlAdapterPreprocessor = (startAppListening: AppStartListening) => {
+  startAppListening({
+    matcher,
+    effect: async (action, { dispatch, getState, getOriginalState, cancelActiveListeners, delay, take, signal }) => {
+      const layerId = caLayerRecalled.match(action) ? action.payload.id : action.payload.layerId;
+      const state = getState();
+      const originalState = getOriginalState();
+
+      // Cancel any in-progress instances of this listener
+      cancelActiveListeners();
+      log.trace('Control Layer CA auto-process triggered');
+
+      // Delay before starting actual work
+      await delay(DEBOUNCE_MS);
+
+      const layer = state.controlLayers.present.layers.filter(isControlAdapterLayer).find((l) => l.id === layerId);
+
+      if (!layer) {
+        return;
+      }
+
+      // We should only process if the processor settings or image have changed
+      const originalLayer = originalState.controlLayers.present.layers
+        .filter(isControlAdapterLayer)
+        .find((l) => l.id === layerId);
+      const originalImage = originalLayer?.controlAdapter.image;
+      const originalConfig = originalLayer?.controlAdapter.processorConfig;
+
+      const image = layer.controlAdapter.image;
+      const processedImage = layer.controlAdapter.processedImage;
+      const config = layer.controlAdapter.processorConfig;
+
+      if (isEqual(config, originalConfig) && isEqual(image, originalImage) && processedImage) {
+        // Neither config nor image have changed, we can bail
+        return;
+      }
+
+      if (!image || !config) {
+        // - If we have no image, we have nothing to process
+        // - If we have no processor config, we have nothing to process
+        // Clear the processed image and bail
+        dispatch(caLayerProcessedImageChanged({ layerId, imageDTO: null }));
+        return;
+      }
+
+      // At this point, the user has stopped fiddling with the processor settings and there is a processor selected.
+
+      // If there is a pending processor batch, cancel it.
+      if (layer.controlAdapter.processorPendingBatchId) {
+        cancelProcessorBatch(dispatch, layerId, layer.controlAdapter.processorPendingBatchId);
+      }
+
+      // TODO(psyche): I can't get TS to be happy, it thinkgs `config` is `never` but it should be inferred from the generic... I'll just cast it for now
+      const processorNode = CA_PROCESSOR_DATA[config.type].buildNode(image, config as never);
+      const enqueueBatchArg: BatchConfig = {
+        prepend: true,
+        batch: {
+          graph: {
+            nodes: {
+              [processorNode.id]: {
+                ...processorNode,
+                // Control images are always intermediate - do not save to gallery
+                is_intermediate: true,
+              },
+            },
+            edges: [],
+          },
+          runs: 1,
+        },
+      };
+
+      // Kick off the processor batch
+      const req = dispatch(
+        queueApi.endpoints.enqueueBatch.initiate(enqueueBatchArg, {
+          fixedCacheKey: 'enqueueBatch',
+        })
+      );
+
+      try {
+        const enqueueResult = await req.unwrap();
+        // TODO(psyche): Update the pydantic models, pretty sure we will _always_ have a batch_id here, but the model says it's optional
+        assert(enqueueResult.batch.batch_id, 'Batch ID not returned from queue');
+        dispatch(caLayerProcessorPendingBatchIdChanged({ layerId, batchId: enqueueResult.batch.batch_id }));
+        log.debug({ enqueueResult: parseify(enqueueResult) }, t('queue.graphQueued'));
+
+        // Wait for the processor node to complete
+        const [invocationCompleteAction] = await take(
+          (action): action is ReturnType<typeof socketInvocationComplete> =>
+            socketInvocationComplete.match(action) &&
+            action.payload.data.batch_id === enqueueResult.batch.batch_id &&
+            action.payload.data.invocation_source_id === processorNode.id
+        );
+
+        // We still have to check the output type
+        assert(
+          invocationCompleteAction.payload.data.result.type === 'image_output',
+          `Processor did not return an image output, got: ${invocationCompleteAction.payload.data.result}`
+        );
+        const { image_name } = invocationCompleteAction.payload.data.result.image;
+
+        const imageDTO = await getImageDTO(image_name);
+        assert(imageDTO, "Failed to fetch processor output's image DTO");
+
+        // Whew! We made it. Update the layer with the processed image
+        log.debug({ layerId, imageDTO }, 'ControlNet image processed');
+        dispatch(caLayerProcessedImageChanged({ layerId, imageDTO }));
+        dispatch(caLayerProcessorPendingBatchIdChanged({ layerId, batchId: null }));
+      } catch (error) {
+        if (signal.aborted) {
+          // The listener was canceled - we need to cancel the pending processor batch, if there is one (could have changed by now).
+          const pendingBatchId = getState()
+            .controlLayers.present.layers.filter(isControlAdapterLayer)
+            .find((l) => l.id === layerId)?.controlAdapter.processorPendingBatchId;
+          if (pendingBatchId) {
+            cancelProcessorBatch(dispatch, layerId, pendingBatchId);
+          }
+          log.trace('Control Adapter preprocessor cancelled');
+        } else {
+          // Some other error condition...
+          log.error({ enqueueBatchArg: parseify(enqueueBatchArg) }, t('queue.graphFailedToQueue'));
+
+          if (error instanceof Object) {
+            if ('data' in error && 'status' in error) {
+              if (error.status === 403) {
+                dispatch(caLayerImageChanged({ layerId, imageDTO: null }));
+                return;
+              }
+            }
+          }
+
+          toast({
+            id: 'GRAPH_QUEUE_FAILED',
+            title: t('queue.graphFailedToQueue'),
+            status: 'error',
+          });
+        }
+      } finally {
+        req.reset();
+      }
+    },
+  });
+};

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

@@ -0,0 +1,85 @@
+import type { AnyListenerPredicate } from '@reduxjs/toolkit';
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import type { RootState } from 'app/store/store';
+import { controlAdapterImageProcessed } from 'features/controlAdapters/store/actions';
+import {
+  controlAdapterAutoConfigToggled,
+  controlAdapterImageChanged,
+  controlAdapterModelChanged,
+  controlAdapterProcessorParamsChanged,
+  controlAdapterProcessortTypeChanged,
+  selectControlAdapterById,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
+import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
+
+type AnyControlAdapterParamChangeAction =
+  | ReturnType<typeof controlAdapterProcessorParamsChanged>
+  | ReturnType<typeof controlAdapterModelChanged>
+  | ReturnType<typeof controlAdapterImageChanged>
+  | ReturnType<typeof controlAdapterProcessortTypeChanged>
+  | ReturnType<typeof controlAdapterAutoConfigToggled>;
+
+const predicate: AnyListenerPredicate<RootState> = (action, state, prevState) => {
+  const isActionMatched =
+    controlAdapterProcessorParamsChanged.match(action) ||
+    controlAdapterModelChanged.match(action) ||
+    controlAdapterImageChanged.match(action) ||
+    controlAdapterProcessortTypeChanged.match(action) ||
+    controlAdapterAutoConfigToggled.match(action);
+
+  if (!isActionMatched) {
+    return false;
+  }
+
+  const { id } = action.payload;
+  const prevCA = selectControlAdapterById(prevState.controlAdapters, id);
+  const ca = selectControlAdapterById(state.controlAdapters, id);
+  if (!prevCA || !isControlNetOrT2IAdapter(prevCA) || !ca || !isControlNetOrT2IAdapter(ca)) {
+    return false;
+  }
+
+  if (controlAdapterAutoConfigToggled.match(action)) {
+    // do not process if the user just disabled auto-config
+    if (prevCA.shouldAutoConfig === true) {
+      return false;
+    }
+  }
+
+  const { controlImage, processorType, shouldAutoConfig } = ca;
+  if (controlAdapterModelChanged.match(action) && !shouldAutoConfig) {
+    // do not process if the action is a model change but the processor settings are dirty
+    return false;
+  }
+
+  const isProcessorSelected = processorType !== 'none';
+
+  const hasControlImage = Boolean(controlImage);
+
+  return isProcessorSelected && hasControlImage;
+};
+
+const DEBOUNCE_MS = 300;
+
+/**
+ * Listener that automatically processes a ControlNet image when its processor parameters are changed.
+ *
+ * The network request is debounced.
+ */
+export const addControlNetAutoProcessListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    predicate,
+    effect: async (action, { dispatch, cancelActiveListeners, delay }) => {
+      const log = logger('session');
+      const { id } = (action as AnyControlAdapterParamChangeAction).payload;
+
+      // Cancel any in-progress instances of this listener
+      cancelActiveListeners();
+      log.trace('ControlNet auto-process triggered');
+      // Delay before starting actual work
+      await delay(DEBOUNCE_MS);
+
+      dispatch(controlAdapterImageProcessed({ id }));
+    },
+  });
+};

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

@@ -0,0 +1,118 @@
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { parseify } from 'common/util/serialize';
+import { controlAdapterImageProcessed } from 'features/controlAdapters/store/actions';
+import {
+  controlAdapterImageChanged,
+  controlAdapterProcessedImageChanged,
+  pendingControlImagesCleared,
+  selectControlAdapterById,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
+import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
+import { toast } from 'features/toast/toast';
+import { t } from 'i18next';
+import { imagesApi } from 'services/api/endpoints/images';
+import { queueApi } from 'services/api/endpoints/queue';
+import type { BatchConfig, ImageDTO } from 'services/api/types';
+import { socketInvocationComplete } from 'services/events/actions';
+
+export const addControlNetImageProcessedListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: controlAdapterImageProcessed,
+    effect: async (action, { dispatch, getState, take }) => {
+      const log = logger('session');
+      const { id } = action.payload;
+      const ca = selectControlAdapterById(getState().controlAdapters, id);
+
+      if (!ca?.controlImage || !isControlNetOrT2IAdapter(ca)) {
+        log.error('Unable to process ControlNet image');
+        return;
+      }
+
+      if (ca.processorType === 'none' || ca.processorNode.type === 'none') {
+        return;
+      }
+
+      // ControlNet one-off procressing graph is just the processor node, no edges.
+      // Also we need to grab the image.
+
+      const nodeId = ca.processorNode.id;
+      const enqueueBatchArg: BatchConfig = {
+        prepend: true,
+        batch: {
+          graph: {
+            nodes: {
+              [ca.processorNode.id]: {
+                ...ca.processorNode,
+                is_intermediate: true,
+                use_cache: false,
+                image: { image_name: ca.controlImage },
+              },
+            },
+            edges: [],
+          },
+          runs: 1,
+        },
+      };
+
+      try {
+        const req = dispatch(
+          queueApi.endpoints.enqueueBatch.initiate(enqueueBatchArg, {
+            fixedCacheKey: 'enqueueBatch',
+          })
+        );
+        const enqueueResult = await req.unwrap();
+        req.reset();
+        log.debug({ enqueueResult: parseify(enqueueResult) }, t('queue.graphQueued'));
+
+        const [invocationCompleteAction] = await take(
+          (action): action is ReturnType<typeof socketInvocationComplete> =>
+            socketInvocationComplete.match(action) &&
+            action.payload.data.batch_id === enqueueResult.batch.batch_id &&
+            action.payload.data.invocation_source_id === nodeId
+        );
+
+        // We still have to check the output type
+        if (invocationCompleteAction.payload.data.result.type === 'image_output') {
+          const { image_name } = invocationCompleteAction.payload.data.result.image;
+
+          // Wait for the ImageDTO to be received
+          const [{ payload }] = await take(
+            (action) =>
+              imagesApi.endpoints.getImageDTO.matchFulfilled(action) && action.payload.image_name === image_name
+          );
+
+          const processedControlImage = payload as ImageDTO;
+
+          log.debug({ controlNetId: action.payload, processedControlImage }, 'ControlNet image processed');
+
+          // Update the processed image in the store
+          dispatch(
+            controlAdapterProcessedImageChanged({
+              id,
+              processedControlImage: processedControlImage.image_name,
+            })
+          );
+        }
+      } catch (error) {
+        log.error({ enqueueBatchArg: parseify(enqueueBatchArg) }, t('queue.graphFailedToQueue'));
+
+        if (error instanceof Object) {
+          if ('data' in error && 'status' in error) {
+            if (error.status === 403) {
+              dispatch(pendingControlImagesCleared());
+              dispatch(controlAdapterImageChanged({ id, controlImage: null }));
+              return;
+            }
+          }
+        }
+
+        toast({
+          id: 'GRAPH_QUEUE_FAILED',
+          title: t('queue.graphFailedToQueue'),
+          status: 'error',
+        });
+      }
+    },
+  });
+};

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

@@ -0,0 +1,144 @@
+import { logger } from 'app/logging/logger';
+import { enqueueRequested } from 'app/store/actions';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
+import { parseify } from 'common/util/serialize';
+import { canvasBatchIdAdded, stagingAreaInitialized } from 'features/canvas/store/canvasSlice';
+import { blobToDataURL } from 'features/canvas/util/blobToDataURL';
+import { getCanvasData } from 'features/canvas/util/getCanvasData';
+import { getCanvasGenerationMode } from 'features/canvas/util/getCanvasGenerationMode';
+import { canvasGraphBuilt } from 'features/nodes/store/actions';
+import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
+import { buildCanvasGraph } from 'features/nodes/util/graph/canvas/buildCanvasGraph';
+import { imagesApi } from 'services/api/endpoints/images';
+import { queueApi } from 'services/api/endpoints/queue';
+import type { ImageDTO } from 'services/api/types';
+
+/**
+ * This listener is responsible invoking the canvas. This involves a number of steps:
+ *
+ * 1. Generate image blobs from the canvas layers
+ * 2. Determine the generation mode from the layers (txt2img, img2img, inpaint)
+ * 3. Build the canvas graph
+ * 4. Create the session with the graph
+ * 5. Upload the init image if necessary
+ * 6. Upload the mask image if necessary
+ * 7. Update the init and mask images with the session ID
+ * 8. Initialize the staging area if not yet initialized
+ * 9. Dispatch the sessionReadyToInvoke action to invoke the session
+ */
+export const addEnqueueRequestedCanvasListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    predicate: (action): action is ReturnType<typeof enqueueRequested> =>
+      enqueueRequested.match(action) && action.payload.tabName === 'canvas',
+    effect: async (action, { getState, dispatch }) => {
+      const log = logger('queue');
+      const { prepend } = action.payload;
+      const state = getState();
+
+      const { layerState, boundingBoxCoordinates, boundingBoxDimensions, isMaskEnabled, shouldPreserveMaskedArea } =
+        state.canvas;
+
+      // Build canvas blobs
+      const canvasBlobsAndImageData = await getCanvasData(
+        layerState,
+        boundingBoxCoordinates,
+        boundingBoxDimensions,
+        isMaskEnabled,
+        shouldPreserveMaskedArea
+      );
+
+      if (!canvasBlobsAndImageData) {
+        log.error('Unable to create canvas data');
+        return;
+      }
+
+      const { baseBlob, baseImageData, maskBlob, maskImageData } = canvasBlobsAndImageData;
+
+      // Determine the generation mode
+      const generationMode = getCanvasGenerationMode(baseImageData, maskImageData);
+
+      if (state.system.enableImageDebugging) {
+        const baseDataURL = await blobToDataURL(baseBlob);
+        const maskDataURL = await blobToDataURL(maskBlob);
+        openBase64ImageInTab([
+          { base64: maskDataURL, caption: 'mask b64' },
+          { base64: baseDataURL, caption: 'image b64' },
+        ]);
+      }
+
+      log.debug(`Generation mode: ${generationMode}`);
+
+      // Temp placeholders for the init and mask images
+      let canvasInitImage: ImageDTO | undefined;
+      let canvasMaskImage: ImageDTO | undefined;
+
+      // For img2img and inpaint/outpaint, we need to upload the init images
+      if (['img2img', 'inpaint', 'outpaint'].includes(generationMode)) {
+        // upload the image, saving the request id
+        canvasInitImage = await dispatch(
+          imagesApi.endpoints.uploadImage.initiate({
+            file: new File([baseBlob], 'canvasInitImage.png', {
+              type: 'image/png',
+            }),
+            image_category: 'general',
+            is_intermediate: true,
+          })
+        ).unwrap();
+      }
+
+      // For inpaint/outpaint, we also need to upload the mask layer
+      if (['inpaint', 'outpaint'].includes(generationMode)) {
+        // upload the image, saving the request id
+        canvasMaskImage = await dispatch(
+          imagesApi.endpoints.uploadImage.initiate({
+            file: new File([maskBlob], 'canvasMaskImage.png', {
+              type: 'image/png',
+            }),
+            image_category: 'mask',
+            is_intermediate: true,
+          })
+        ).unwrap();
+      }
+
+      const graph = await buildCanvasGraph(state, generationMode, canvasInitImage, canvasMaskImage);
+
+      log.debug({ graph: parseify(graph) }, `Canvas graph built`);
+
+      // currently this action is just listened to for logging
+      dispatch(canvasGraphBuilt(graph));
+
+      const batchConfig = prepareLinearUIBatch(state, graph, prepend);
+
+      try {
+        const req = dispatch(
+          queueApi.endpoints.enqueueBatch.initiate(batchConfig, {
+            fixedCacheKey: 'enqueueBatch',
+          })
+        );
+
+        const enqueueResult = await req.unwrap();
+        req.reset();
+
+        const batchId = enqueueResult.batch.batch_id as string; // we know the is a string, backend provides it
+
+        // Prep the canvas staging area if it is not yet initialized
+        if (!state.canvas.layerState.stagingArea.boundingBox) {
+          dispatch(
+            stagingAreaInitialized({
+              boundingBox: {
+                ...state.canvas.boundingBoxCoordinates,
+                ...state.canvas.boundingBoxDimensions,
+              },
+            })
+          );
+        }
+
+        // Associate the session with the canvas session ID
+        dispatch(canvasBatchIdAdded(batchId));
+      } catch {
+        // no-op
+      }
+    },
+  });
+};

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

@@ -1,21 +1,10 @@
-import { logger } from 'app/logging/logger';
 import { enqueueRequested } from 'app/store/actions';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import type { SerializableObject } from 'common/types';
-import type { Result } from 'common/util/result';
-import { isErr, withResult, withResultAsync } from 'common/util/result';
-import { $canvasManager } from 'features/controlLayers/konva/CanvasManager';
-import { sessionStagingAreaReset, sessionStartedStaging } from 'features/controlLayers/store/canvasSessionSlice';
+import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
 import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
-import { buildSD1Graph } from 'features/nodes/util/graph/generation/buildSD1Graph';
-import { buildSDXLGraph } from 'features/nodes/util/graph/generation/buildSDXLGraph';
-import type { Graph } from 'features/nodes/util/graph/generation/Graph';
-import { serializeError } from 'serialize-error';
+import { buildGenerationTabGraph } from 'features/nodes/util/graph/generation/buildGenerationTabGraph';
+import { buildGenerationTabSDXLGraph } from 'features/nodes/util/graph/generation/buildGenerationTabSDXLGraph';
 import { queueApi } from 'services/api/endpoints/queue';
-import type { Invocation } from 'services/api/types';
-import { assert } from 'tsafe';
-
-const log = logger('generation');
 
 export const addEnqueueRequestedLinear = (startAppListening: AppStartListening) => {
   startAppListening({
@@ -23,77 +12,33 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
       enqueueRequested.match(action) && action.payload.tabName === 'generation',
     effect: async (action, { getState, dispatch }) => {
       const state = getState();
-      const model = state.params.model;
+      const { shouldShowProgressInViewer } = state.ui;
+      const model = state.generation.model;
       const { prepend } = action.payload;
 
-      const manager = $canvasManager.get();
-      assert(manager, 'No model found in state');
+      let graph;
 
-      let didStartStaging = false;
-
-      if (!state.canvasSession.isStaging && state.canvasSession.mode === 'compose') {
-        dispatch(sessionStartedStaging());
-        didStartStaging = true;
+      if (model?.base === 'sdxl') {
+        graph = await buildGenerationTabSDXLGraph(state);
+      } else {
+        graph = await buildGenerationTabGraph(state);
       }
 
-      const abortStaging = () => {
-        if (didStartStaging && getState().canvasSession.isStaging) {
-          dispatch(sessionStagingAreaReset());
-        }
-      };
-
-      let buildGraphResult: Result<
-        { g: Graph; noise: Invocation<'noise'>; posCond: Invocation<'compel' | 'sdxl_compel_prompt'> },
-        Error
-      >;
-
-      assert(model, 'No model found in state');
-      const base = model.base;
-
-      switch (base) {
-        case 'sdxl':
-          buildGraphResult = await withResultAsync(() => buildSDXLGraph(state, manager));
-          break;
-        case 'sd-1':
-        case `sd-2`:
-          buildGraphResult = await withResultAsync(() => buildSD1Graph(state, manager));
-          break;
-        default:
-          assert(false, `No graph builders for base ${base}`);
-      }
-
-      if (isErr(buildGraphResult)) {
-        log.error({ error: serializeError(buildGraphResult.error) }, 'Failed to build graph');
-        abortStaging();
-        return;
-      }
-
-      const { g, noise, posCond } = buildGraphResult.value;
-
-      const prepareBatchResult = withResult(() => prepareLinearUIBatch(state, g, prepend, noise, posCond));
-
-      if (isErr(prepareBatchResult)) {
-        log.error({ error: serializeError(prepareBatchResult.error) }, 'Failed to prepare batch');
-        abortStaging();
-        return;
-      }
+      const batchConfig = prepareLinearUIBatch(state, graph, prepend);
 
       const req = dispatch(
-        queueApi.endpoints.enqueueBatch.initiate(prepareBatchResult.value, {
+        queueApi.endpoints.enqueueBatch.initiate(batchConfig, {
           fixedCacheKey: 'enqueueBatch',
         })
       );
-      req.reset();
-
-      const enqueueResult = await withResultAsync(() => req.unwrap());
-
-      if (isErr(enqueueResult)) {
-        log.error({ error: serializeError(enqueueResult.error) }, 'Failed to enqueue batch');
-        abortStaging();
-        return;
+      try {
+        await req.unwrap();
+        if (shouldShowProgressInViewer) {
+          dispatch(isImageViewerOpenChanged(true));
+        }
+      } finally {
+        req.reset();
       }
-
-      log.debug({ batchConfig: prepareBatchResult.value } as SerializableObject, 'Enqueued batch');
     },
   });
 };

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

@@ -1,6 +1,5 @@
 import { enqueueRequested } from 'app/store/actions';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { selectNodesSlice } from 'features/nodes/store/selectors';
 import { buildNodesGraph } from 'features/nodes/util/graph/buildNodesGraph';
 import { buildWorkflowWithValidation } from 'features/nodes/util/workflow/buildWorkflow';
 import { queueApi } from 'services/api/endpoints/queue';
@@ -12,12 +11,12 @@ export const addEnqueueRequestedNodes = (startAppListening: AppStartListening) =
       enqueueRequested.match(action) && action.payload.tabName === 'workflows',
     effect: async (action, { getState, dispatch }) => {
       const state = getState();
-      const nodes = selectNodesSlice(state);
+      const { nodes, edges } = state.nodes.present;
       const workflow = state.workflow;
-      const graph = buildNodesGraph(nodes);
+      const graph = buildNodesGraph(state.nodes.present);
       const builtWorkflow = buildWorkflowWithValidation({
-        nodes: nodes.nodes,
-        edges: nodes.edges,
+        nodes,
+        edges,
         workflow,
       });
 
@@ -30,8 +29,7 @@ export const addEnqueueRequestedNodes = (startAppListening: AppStartListening) =
         batch: {
           graph,
           workflow: builtWorkflow,
-          runs: state.params.iterations,
-          origin: 'workflows',
+          runs: state.generation.iterations,
         },
         prepend: action.payload.prepend,
       };

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

@@ -14,9 +14,9 @@ export const addEnqueueRequestedUpscale = (startAppListening: AppStartListening)
       const { shouldShowProgressInViewer } = state.ui;
       const { prepend } = action.payload;
 
-      const { g, noise, posCond } = await buildMultidiffusionUpscaleGraph(state);
+      const graph = await buildMultidiffusionUpscaleGraph(state);
 
-      const batchConfig = prepareLinearUIBatch(state, g, prepend, noise, posCond);
+      const batchConfig = prepareLinearUIBatch(state, graph, prepend);
 
       const req = dispatch(
         queueApi.endpoints.enqueueBatch.initiate(batchConfig, {

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

@@ -27,7 +27,7 @@ export const galleryImageClicked = createAction<{
 export const addGalleryImageClickedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     actionCreator: galleryImageClicked,
-    effect: (action, { dispatch, getState }) => {
+    effect: async (action, { dispatch, getState }) => {
       const { imageDTO, shiftKey, ctrlKey, metaKey, altKey } = action.payload;
       const state = getState();
       const queryArgs = selectListImagesQueryArgs(state);

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

@@ -1,27 +1,24 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import type { SerializableObject } from 'common/types';
 import { parseify } from 'common/util/serialize';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { parseSchema } from 'features/nodes/util/schema/parseSchema';
 import { size } from 'lodash-es';
-import { serializeError } from 'serialize-error';
 import { appInfoApi } from 'services/api/endpoints/appInfo';
 
-const log = logger('system');
-
 export const addGetOpenAPISchemaListener = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher: appInfoApi.endpoints.getOpenAPISchema.matchFulfilled,
     effect: (action, { getState }) => {
+      const log = logger('system');
       const schemaJSON = action.payload;
 
-      log.debug({ schemaJSON: parseify(schemaJSON) } as SerializableObject, 'Received OpenAPI schema');
+      log.debug({ schemaJSON: parseify(schemaJSON) }, 'Received OpenAPI schema');
       const { nodesAllowlist, nodesDenylist } = getState().config;
 
       const nodeTemplates = parseSchema(schemaJSON, nodesAllowlist, nodesDenylist);
 
-      log.debug({ nodeTemplates } as SerializableObject, `Built ${size(nodeTemplates)} node templates`);
+      log.debug({ nodeTemplates: parseify(nodeTemplates) }, `Built ${size(nodeTemplates)} node templates`);
 
       $templates.set(nodeTemplates);
     },
@@ -33,7 +30,8 @@ export const addGetOpenAPISchemaListener = (startAppListening: AppStartListening
       // If action.meta.condition === true, the request was canceled/skipped because another request was in flight or
       // the value was already in the cache. We don't want to log these errors.
       if (!action.meta.condition) {
-        log.error({ error: serializeError(action.error) }, 'Problem retrieving OpenAPI Schema');
+        const log = logger('system');
+        log.error({ error: parseify(action.error) }, 'Problem retrieving OpenAPI Schema');
       }
     },
   });

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

@@ -2,13 +2,15 @@ import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { imagesApi } from 'services/api/endpoints/images';
 
-const log = logger('gallery');
-
 export const addImageAddedToBoardFulfilledListener = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher: imagesApi.endpoints.addImageToBoard.matchFulfilled,
     effect: (action) => {
+      const log = logger('images');
       const { board_id, imageDTO } = action.meta.arg.originalArgs;
+
+      // TODO: update listImages cache for this board
+
       log.debug({ board_id, imageDTO }, 'Image added to board');
     },
   });
@@ -16,7 +18,9 @@ export const addImageAddedToBoardFulfilledListener = (startAppListening: AppStar
   startAppListening({
     matcher: imagesApi.endpoints.addImageToBoard.matchRejected,
     effect: (action) => {
+      const log = logger('images');
       const { board_id, imageDTO } = action.meta.arg.originalArgs;
+
       log.debug({ board_id, imageDTO }, 'Problem adding image to board');
     },
   });

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

@@ -1,9 +1,20 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import type { AppDispatch, RootState } from 'app/store/store';
-import { entityDeleted, ipaImageChanged } from 'features/controlLayers/store/canvasSlice';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
-import { getEntityIdentifier } from 'features/controlLayers/store/types';
+import { resetCanvas } from 'features/canvas/store/canvasSlice';
+import {
+  controlAdapterImageChanged,
+  controlAdapterProcessedImageChanged,
+  selectControlAdapterAll,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
+import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
+import {
+  isControlAdapterLayer,
+  isInitialImageLayer,
+  isIPAdapterLayer,
+  isRegionalGuidanceLayer,
+  layerDeleted,
+} from 'features/controlLayers/store/controlLayersSlice';
 import { imageDeletionConfirmed } from 'features/deleteImageModal/store/actions';
 import { isModalOpenChanged } from 'features/deleteImageModal/store/slice';
 import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
@@ -15,10 +26,6 @@ import { forEach, intersectionBy } from 'lodash-es';
 import { imagesApi } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 
-const log = logger('gallery');
-
-//TODO(psyche): handle image deletion (canvas sessions?)
-
 // Some utils to delete images from different parts of the app
 const deleteNodesImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
   state.nodes.present.nodes.forEach((node) => {
@@ -40,37 +47,52 @@ const deleteNodesImages = (state: RootState, dispatch: AppDispatch, imageDTO: Im
   });
 };
 
-// const deleteControlAdapterImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
-//   state.canvas.present.controlAdapters.entities.forEach(({ id, imageObject, processedImageObject }) => {
-//     if (
-//       imageObject?.image.image_name === imageDTO.image_name ||
-//       processedImageObject?.image.image_name === imageDTO.image_name
-//     ) {
-//       dispatch(caImageChanged({ id, imageDTO: null }));
-//       dispatch(caProcessedImageChanged({ id, imageDTO: null }));
-//     }
-//   });
-// };
-
-const deleteIPAdapterImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
-  selectCanvasSlice(state).ipAdapters.entities.forEach((entity) => {
-    if (entity.ipAdapter.image?.image_name === imageDTO.image_name) {
-      dispatch(ipaImageChanged({ entityIdentifier: getEntityIdentifier(entity), imageDTO: null }));
+const deleteControlAdapterImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
+  forEach(selectControlAdapterAll(state.controlAdapters), (ca) => {
+    if (
+      ca.controlImage === imageDTO.image_name ||
+      (isControlNetOrT2IAdapter(ca) && ca.processedControlImage === imageDTO.image_name)
+    ) {
+      dispatch(
+        controlAdapterImageChanged({
+          id: ca.id,
+          controlImage: null,
+        })
+      );
+      dispatch(
+        controlAdapterProcessedImageChanged({
+          id: ca.id,
+          processedControlImage: null,
+        })
+      );
     }
   });
 };
 
-const deleteLayerImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
-  selectCanvasSlice(state).rasterLayers.entities.forEach(({ id, objects }) => {
-    let shouldDelete = false;
-    for (const obj of objects) {
-      if (obj.type === 'image' && obj.image.image_name === imageDTO.image_name) {
-        shouldDelete = true;
-        break;
+const deleteControlLayerImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
+  state.controlLayers.present.layers.forEach((l) => {
+    if (isRegionalGuidanceLayer(l)) {
+      if (l.ipAdapters.some((ipa) => ipa.image?.name === imageDTO.image_name)) {
+        dispatch(layerDeleted(l.id));
       }
     }
-    if (shouldDelete) {
-      dispatch(entityDeleted({ entityIdentifier: { id, type: 'raster_layer' } }));
+    if (isControlAdapterLayer(l)) {
+      if (
+        l.controlAdapter.image?.name === imageDTO.image_name ||
+        l.controlAdapter.processedImage?.name === imageDTO.image_name
+      ) {
+        dispatch(layerDeleted(l.id));
+      }
+    }
+    if (isIPAdapterLayer(l)) {
+      if (l.ipAdapter.image?.name === imageDTO.image_name) {
+        dispatch(layerDeleted(l.id));
+      }
+    }
+    if (isInitialImageLayer(l)) {
+      if (l.image?.name === imageDTO.image_name) {
+        dispatch(layerDeleted(l.id));
+      }
     }
   });
 };
@@ -123,10 +145,14 @@ export const addImageDeletionListeners = (startAppListening: AppStartListening)
           }
         }
 
+        // We need to reset the features where the image is in use - none of these work if their image(s) don't exist
+        if (imageUsage.isCanvasImage) {
+          dispatch(resetCanvas());
+        }
+
+        deleteControlAdapterImages(state, dispatch, imageDTO);
         deleteNodesImages(state, dispatch, imageDTO);
-        // deleteControlAdapterImages(state, dispatch, imageDTO);
-        deleteIPAdapterImages(state, dispatch, imageDTO);
-        deleteLayerImages(state, dispatch, imageDTO);
+        deleteControlLayerImages(state, dispatch, imageDTO);
       } catch {
         // no-op
       } finally {
@@ -163,11 +189,14 @@ export const addImageDeletionListeners = (startAppListening: AppStartListening)
 
         // We need to reset the features where the image is in use - none of these work if their image(s) don't exist
 
+        if (imagesUsage.some((i) => i.isCanvasImage)) {
+          dispatch(resetCanvas());
+        }
+
         imageDTOs.forEach((imageDTO) => {
+          deleteControlAdapterImages(state, dispatch, imageDTO);
           deleteNodesImages(state, dispatch, imageDTO);
-          // deleteControlAdapterImages(state, dispatch, imageDTO);
-          deleteIPAdapterImages(state, dispatch, imageDTO);
-          deleteLayerImages(state, dispatch, imageDTO);
+          deleteControlLayerImages(state, dispatch, imageDTO);
         });
       } catch {
         // no-op
@@ -191,6 +220,7 @@ export const addImageDeletionListeners = (startAppListening: AppStartListening)
   startAppListening({
     matcher: imagesApi.endpoints.deleteImage.matchFulfilled,
     effect: (action) => {
+      const log = logger('images');
       log.debug({ imageDTO: action.meta.arg.originalArgs }, 'Image deleted');
     },
   });
@@ -198,6 +228,7 @@ export const addImageDeletionListeners = (startAppListening: AppStartListening)
   startAppListening({
     matcher: imagesApi.endpoints.deleteImage.matchRejected,
     effect: (action) => {
+      const log = logger('images');
       log.debug({ imageDTO: action.meta.arg.originalArgs }, 'Unable to delete image');
     },
   });

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

@@ -1,19 +1,28 @@
 import { createAction } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { parseify } from 'common/util/serialize';
+import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
 import {
-  controlLayerAdded,
-  ipaImageChanged,
-  rasterLayerAdded,
-  rgIPAdapterImageChanged,
-} from 'features/controlLayers/store/canvasSlice';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
-import type { CanvasControlLayerState, CanvasRasterLayerState } from 'features/controlLayers/store/types';
-import { imageDTOToImageObject } from 'features/controlLayers/store/types';
+  controlAdapterImageChanged,
+  controlAdapterIsEnabledChanged,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  caLayerImageChanged,
+  iiLayerImageChanged,
+  ipaLayerImageChanged,
+  rgLayerIPAdapterImageChanged,
+} from 'features/controlLayers/store/controlLayersSlice';
 import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
 import { isValidDrop } from 'features/dnd/util/isValidDrop';
-import { imageToCompareChanged, isImageViewerOpenChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
+import {
+  imageSelected,
+  imageToCompareChanged,
+  isImageViewerOpenChanged,
+  selectionChanged,
+} from 'features/gallery/store/gallerySlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
+import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice';
 import { imagesApi } from 'services/api/endpoints/images';
 
@@ -22,12 +31,11 @@ export const dndDropped = createAction<{
   activeData: TypesafeDraggableData;
 }>('dnd/dndDropped');
 
-const log = logger('system');
-
 export const addImageDroppedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     actionCreator: dndDropped,
-    effect: (action, { dispatch, getState }) => {
+    effect: async (action, { dispatch, getState }) => {
+      const log = logger('dnd');
       const { activeData, overData } = action.payload;
       if (!isValidDrop(overData, activeData)) {
         return;
@@ -38,22 +46,80 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
       } else if (activeData.payloadType === 'GALLERY_SELECTION') {
         log.debug({ activeData, overData }, `Images (${getState().gallery.selection.length}) dropped`);
       } else if (activeData.payloadType === 'NODE_FIELD') {
-        log.debug({ activeData, overData }, 'Node field dropped');
+        log.debug({ activeData: parseify(activeData), overData: parseify(overData) }, 'Node field dropped');
       } else {
         log.debug({ activeData, overData }, `Unknown payload dropped`);
       }
 
+      /**
+       * Image dropped on current image
+       */
+      if (
+        overData.actionType === 'SET_CURRENT_IMAGE' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO
+      ) {
+        dispatch(imageSelected(activeData.payload.imageDTO));
+        dispatch(isImageViewerOpenChanged(true));
+        return;
+      }
+
+      /**
+       * Image dropped on ControlNet
+       */
+      if (
+        overData.actionType === 'SET_CONTROL_ADAPTER_IMAGE' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO
+      ) {
+        const { id } = overData.context;
+        dispatch(
+          controlAdapterImageChanged({
+            id,
+            controlImage: activeData.payload.imageDTO.image_name,
+          })
+        );
+        dispatch(
+          controlAdapterIsEnabledChanged({
+            id,
+            isEnabled: true,
+          })
+        );
+        return;
+      }
+
+      /**
+       * Image dropped on Control Adapter Layer
+       */
+      if (
+        overData.actionType === 'SET_CA_LAYER_IMAGE' &&
+        activeData.payloadType === 'IMAGE_DTO' &&
+        activeData.payload.imageDTO
+      ) {
+        const { layerId } = overData.context;
+        dispatch(
+          caLayerImageChanged({
+            layerId,
+            imageDTO: activeData.payload.imageDTO,
+          })
+        );
+        return;
+      }
+
       /**
        * Image dropped on IP Adapter Layer
        */
       if (
-        overData.actionType === 'SET_IPA_IMAGE' &&
+        overData.actionType === 'SET_IPA_LAYER_IMAGE' &&
         activeData.payloadType === 'IMAGE_DTO' &&
         activeData.payload.imageDTO
       ) {
-        const { id } = overData.context;
+        const { layerId } = overData.context;
         dispatch(
-          ipaImageChanged({ entityIdentifier: { id, type: 'ip_adapter' }, imageDTO: activeData.payload.imageDTO })
+          ipaLayerImageChanged({
+            layerId,
+            imageDTO: activeData.payload.imageDTO,
+          })
         );
         return;
       }
@@ -62,14 +128,14 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
        * Image dropped on RG Layer IP Adapter
        */
       if (
-        overData.actionType === 'SET_RG_IP_ADAPTER_IMAGE' &&
+        overData.actionType === 'SET_RG_LAYER_IP_ADAPTER_IMAGE' &&
         activeData.payloadType === 'IMAGE_DTO' &&
         activeData.payload.imageDTO
       ) {
-        const { id, ipAdapterId } = overData.context;
+        const { layerId, ipAdapterId } = overData.context;
         dispatch(
-          rgIPAdapterImageChanged({
-            entityIdentifier: { id, type: 'regional_guidance' },
+          rgLayerIPAdapterImageChanged({
+            layerId,
             ipAdapterId,
             imageDTO: activeData.payload.imageDTO,
           })
@@ -78,38 +144,32 @@ export const addImageDroppedListener = (startAppListening: AppStartListening) =>
       }
 
       /**
-       * Image dropped on Raster layer
+       * Image dropped on II Layer Image
        */
       if (
-        overData.actionType === 'ADD_RASTER_LAYER_FROM_IMAGE' &&
+        overData.actionType === 'SET_II_LAYER_IMAGE' &&
         activeData.payloadType === 'IMAGE_DTO' &&
         activeData.payload.imageDTO
       ) {
-        const imageObject = imageDTOToImageObject(activeData.payload.imageDTO);
-        const { x, y } = selectCanvasSlice(getState()).bbox.rect;
-        const overrides: Partial<CanvasRasterLayerState> = {
-          objects: [imageObject],
-          position: { x, y },
-        };
-        dispatch(rasterLayerAdded({ overrides, isSelected: true }));
+        const { layerId } = overData.context;
+        dispatch(
+          iiLayerImageChanged({
+            layerId,
+            imageDTO: activeData.payload.imageDTO,
+          })
+        );
         return;
       }
 
       /**
-       * Image dropped on Raster layer
+       * Image dropped on Canvas
        */
       if (
-        overData.actionType === 'ADD_CONTROL_LAYER_FROM_IMAGE' &&
+        overData.actionType === 'SET_CANVAS_INITIAL_IMAGE' &&
         activeData.payloadType === 'IMAGE_DTO' &&
         activeData.payload.imageDTO
       ) {
-        const imageObject = imageDTOToImageObject(activeData.payload.imageDTO);
-        const { x, y } = selectCanvasSlice(getState()).bbox.rect;
-        const overrides: Partial<CanvasControlLayerState> = {
-          objects: [imageObject],
-          position: { x, y },
-        };
-        dispatch(controlLayerAdded({ overrides, isSelected: true }));
+        dispatch(setInitialCanvasImage(activeData.payload.imageDTO, selectOptimalDimension(getState())));
         return;
       }
 

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

@@ -2,13 +2,13 @@ import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { imagesApi } from 'services/api/endpoints/images';
 
-const log = logger('gallery');
-
 export const addImageRemovedFromBoardFulfilledListener = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher: imagesApi.endpoints.removeImageFromBoard.matchFulfilled,
     effect: (action) => {
+      const log = logger('images');
       const imageDTO = action.meta.arg.originalArgs;
+
       log.debug({ imageDTO }, 'Image removed from board');
     },
   });
@@ -16,7 +16,9 @@ export const addImageRemovedFromBoardFulfilledListener = (startAppListening: App
   startAppListening({
     matcher: imagesApi.endpoints.removeImageFromBoard.matchRejected,
     effect: (action) => {
+      const log = logger('images');
       const imageDTO = action.meta.arg.originalArgs;
+
       log.debug({ imageDTO }, 'Problem removing image from board');
     },
   });

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

@@ -6,17 +6,16 @@ import { imagesToDeleteSelected, isModalOpenChanged } from 'features/deleteImage
 export const addImageToDeleteSelectedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     actionCreator: imagesToDeleteSelected,
-    effect: (action, { dispatch, getState }) => {
+    effect: async (action, { dispatch, getState }) => {
       const imageDTOs = action.payload;
       const state = getState();
       const { shouldConfirmOnDelete } = state.system;
       const imagesUsage = selectImageUsage(getState());
 
       const isImageInUse =
-        imagesUsage.some((i) => i.isLayerImage) ||
-        imagesUsage.some((i) => i.isControlAdapterImage) ||
-        imagesUsage.some((i) => i.isIPAdapterImage) ||
-        imagesUsage.some((i) => i.isLayerImage);
+        imagesUsage.some((i) => i.isCanvasImage) ||
+        imagesUsage.some((i) => i.isControlImage) ||
+        imagesUsage.some((i) => i.isNodesImage);
 
       if (shouldConfirmOnDelete || isImageInUse) {
         dispatch(isModalOpenChanged(true));

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

@@ -1,8 +1,19 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { ipaImageChanged, rgIPAdapterImageChanged } from 'features/controlLayers/store/canvasSlice';
+import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
+import {
+  controlAdapterImageChanged,
+  controlAdapterIsEnabledChanged,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  caLayerImageChanged,
+  iiLayerImageChanged,
+  ipaLayerImageChanged,
+  rgLayerIPAdapterImageChanged,
+} from 'features/controlLayers/store/controlLayersSlice';
 import { selectListBoardsQueryArgs } from 'features/gallery/store/gallerySelectors';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
+import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
@@ -10,12 +21,11 @@ import { omit } from 'lodash-es';
 import { boardsApi } from 'services/api/endpoints/boards';
 import { imagesApi } from 'services/api/endpoints/images';
 
-const log = logger('gallery');
-
 export const addImageUploadedFulfilledListener = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher: imagesApi.endpoints.uploadImage.matchFulfilled,
     effect: (action, { dispatch, getState }) => {
+      const log = logger('images');
       const imageDTO = action.payload;
       const state = getState();
       const { autoAddBoardId } = state.gallery;
@@ -71,6 +81,15 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
         return;
       }
 
+      if (postUploadAction?.type === 'SET_CANVAS_INITIAL_IMAGE') {
+        dispatch(setInitialCanvasImage(imageDTO, selectOptimalDimension(state)));
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: t('toast.setAsCanvasInitialImage'),
+        });
+        return;
+      }
+
       if (postUploadAction?.type === 'SET_UPSCALE_INITIAL_IMAGE') {
         dispatch(upscaleInitialImageChanged(imageDTO));
         toast({
@@ -80,33 +99,70 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
         return;
       }
 
-      // if (postUploadAction?.type === 'SET_CA_IMAGE') {
-      //   const { id } = postUploadAction;
-      //   dispatch(caImageChanged({ id, imageDTO }));
-      //   toast({ ...DEFAULT_UPLOADED_TOAST, description: t('toast.setControlImage') });
-      //   return;
-      // }
-
-      if (postUploadAction?.type === 'SET_IPA_IMAGE') {
+      if (postUploadAction?.type === 'SET_CONTROL_ADAPTER_IMAGE') {
         const { id } = postUploadAction;
-        dispatch(ipaImageChanged({ entityIdentifier: { id, type: 'ip_adapter' }, imageDTO }));
-        toast({ ...DEFAULT_UPLOADED_TOAST, description: t('toast.setControlImage') });
+        dispatch(
+          controlAdapterIsEnabledChanged({
+            id,
+            isEnabled: true,
+          })
+        );
+        dispatch(
+          controlAdapterImageChanged({
+            id,
+            controlImage: imageDTO.image_name,
+          })
+        );
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: t('toast.setControlImage'),
+        });
         return;
       }
 
-      if (postUploadAction?.type === 'SET_RG_IP_ADAPTER_IMAGE') {
-        const { id, ipAdapterId } = postUploadAction;
-        dispatch(
-          rgIPAdapterImageChanged({ entityIdentifier: { id, type: 'regional_guidance' }, ipAdapterId, imageDTO })
-        );
-        toast({ ...DEFAULT_UPLOADED_TOAST, description: t('toast.setControlImage') });
-        return;
+      if (postUploadAction?.type === 'SET_CA_LAYER_IMAGE') {
+        const { layerId } = postUploadAction;
+        dispatch(caLayerImageChanged({ layerId, imageDTO }));
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: t('toast.setControlImage'),
+        });
+      }
+
+      if (postUploadAction?.type === 'SET_IPA_LAYER_IMAGE') {
+        const { layerId } = postUploadAction;
+        dispatch(ipaLayerImageChanged({ layerId, imageDTO }));
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: t('toast.setControlImage'),
+        });
+      }
+
+      if (postUploadAction?.type === 'SET_RG_LAYER_IP_ADAPTER_IMAGE') {
+        const { layerId, ipAdapterId } = postUploadAction;
+        dispatch(rgLayerIPAdapterImageChanged({ layerId, ipAdapterId, imageDTO }));
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: t('toast.setControlImage'),
+        });
+      }
+
+      if (postUploadAction?.type === 'SET_II_LAYER_IMAGE') {
+        const { layerId } = postUploadAction;
+        dispatch(iiLayerImageChanged({ layerId, imageDTO }));
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: t('toast.setControlImage'),
+        });
       }
 
       if (postUploadAction?.type === 'SET_NODES_IMAGE') {
         const { nodeId, fieldName } = postUploadAction;
         dispatch(fieldImageValueChanged({ nodeId, fieldName, value: imageDTO }));
-        toast({ ...DEFAULT_UPLOADED_TOAST, description: `${t('toast.setNodeField')} ${fieldName}` });
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: `${t('toast.setNodeField')} ${fieldName}`,
+        });
         return;
       }
     },
@@ -115,6 +171,7 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
   startAppListening({
     matcher: imagesApi.endpoints.uploadImage.matchRejected,
     effect: (action) => {
+      const log = logger('images');
       const sanitizedData = {
         arg: {
           ...omit(action.meta.arg.originalArgs, ['file', 'postUploadAction']),

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

@@ -6,7 +6,7 @@ import type { ImageDTO } from 'services/api/types';
 export const addImagesStarredListener = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher: imagesApi.endpoints.starImages.matchFulfilled,
-    effect: (action, { dispatch, getState }) => {
+    effect: async (action, { dispatch, getState }) => {
       const { updated_image_names: starredImages } = action.payload;
 
       const state = getState();

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

@@ -6,7 +6,7 @@ import type { ImageDTO } from 'services/api/types';
 export const addImagesUnstarredListener = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher: imagesApi.endpoints.unstarImages.matchFulfilled,
-    effect: (action, { dispatch, getState }) => {
+    effect: async (action, { dispatch, getState }) => {
       const { updated_image_names: unstarredImages } = action.payload;
 
       const state = getState();

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

@@ -1,18 +1,23 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { loraDeleted } from 'features/controlLayers/store/lorasSlice';
-import { modelChanged, vaeSelected } from 'features/controlLayers/store/paramsSlice';
+import {
+  controlAdapterIsEnabledChanged,
+  selectControlAdapterAll,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
+import { loraRemoved } from 'features/lora/store/loraSlice';
 import { modelSelected } from 'features/parameters/store/actions';
+import { modelChanged, vaeSelected } from 'features/parameters/store/generationSlice';
 import { zParameterModel } from 'features/parameters/types/parameterSchemas';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
-
-const log = logger('models');
+import { forEach } from 'lodash-es';
 
 export const addModelSelectedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     actionCreator: modelSelected,
     effect: (action, { getState, dispatch }) => {
+      const log = logger('models');
+
       const state = getState();
       const result = zParameterModel.safeParse(action.payload);
 
@@ -24,36 +29,34 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
       const newModel = result.data;
 
       const newBaseModel = newModel.base;
-      const didBaseModelChange = state.params.model?.base !== newBaseModel;
+      const didBaseModelChange = state.generation.model?.base !== newBaseModel;
 
       if (didBaseModelChange) {
         // we may need to reset some incompatible submodels
         let modelsCleared = 0;
 
         // handle incompatible loras
-        state.loras.loras.forEach((lora) => {
+        forEach(state.lora.loras, (lora, id) => {
           if (lora.model.base !== newBaseModel) {
-            dispatch(loraDeleted({ id: lora.id }));
+            dispatch(loraRemoved(id));
             modelsCleared += 1;
           }
         });
 
         // handle incompatible vae
-        const { vae } = state.params;
+        const { vae } = state.generation;
         if (vae && vae.base !== newBaseModel) {
           dispatch(vaeSelected(null));
           modelsCleared += 1;
         }
 
         // handle incompatible controlnets
-        // state.canvas.present.controlAdapters.entities.forEach((ca) => {
-        //   if (ca.model?.base !== newBaseModel) {
-        //     modelsCleared += 1;
-        //     if (ca.isEnabled) {
-        //       dispatch(entityIsEnabledToggled({ entityIdentifier: { id: ca.id, type: 'control_adapter' } }));
-        //     }
-        //   }
-        // });
+        selectControlAdapterAll(state.controlAdapters).forEach((ca) => {
+          if (ca.model?.base !== newBaseModel) {
+            dispatch(controlAdapterIsEnabledChanged({ id: ca.id, isEnabled: false }));
+            modelsCleared += 1;
+          }
+        });
 
         if (modelsCleared > 0) {
           toast({
@@ -67,7 +70,7 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
         }
       }
 
-      dispatch(modelChanged({ model: newModel, previousModel: state.params.model }));
+      dispatch(modelChanged(newModel, state.generation.model));
     },
   });
 };

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

@@ -1,42 +1,36 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import type { AppDispatch, RootState } from 'app/store/store';
-import type { SerializableObject } from 'common/types';
+import type { JSONObject } from 'common/types';
 import {
-  bboxHeightChanged,
-  bboxWidthChanged,
-  controlLayerModelChanged,
-  ipaModelChanged,
-  rgIPAdapterModelChanged,
-} from 'features/controlLayers/store/canvasSlice';
-import { loraDeleted } from 'features/controlLayers/store/lorasSlice';
-import { modelChanged, refinerModelChanged, vaeSelected } from 'features/controlLayers/store/paramsSlice';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
-import { getEntityIdentifier } from 'features/controlLayers/store/types';
-import { calculateNewSize } from 'features/parameters/components/DocumentSize/calculateNewSize';
+  controlAdapterModelCleared,
+  selectControlAdapterAll,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
+import { heightChanged, widthChanged } from 'features/controlLayers/store/controlLayersSlice';
+import { loraRemoved } from 'features/lora/store/loraSlice';
+import { calculateNewSize } from 'features/parameters/components/ImageSize/calculateNewSize';
+import { modelChanged, vaeSelected } from 'features/parameters/store/generationSlice';
 import { postProcessingModelChanged, upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
 import { zParameterModel, zParameterVAEModel } from 'features/parameters/types/parameterSchemas';
 import { getIsSizeOptimal, getOptimalDimension } from 'features/parameters/util/optimalDimension';
+import { refinerModelChanged } from 'features/sdxl/store/sdxlSlice';
+import { forEach } from 'lodash-es';
 import type { Logger } from 'roarr';
 import { modelConfigsAdapterSelectors, modelsApi } from 'services/api/endpoints/models';
 import type { AnyModelConfig } from 'services/api/types';
 import {
-  isControlNetOrT2IAdapterModelConfig,
-  isIPAdapterModelConfig,
-  isLoRAModelConfig,
   isNonRefinerMainModelConfig,
   isRefinerMainModelModelConfig,
   isSpandrelImageToImageModelConfig,
   isVAEModelConfig,
 } from 'services/api/types';
 
-const log = logger('models');
-
 export const addModelsLoadedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     predicate: modelsApi.endpoints.getModelConfigs.matchFulfilled,
-    effect: (action, { getState, dispatch }) => {
+    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 }, `Models loaded (${action.payload.ids.length})`);
 
       const state = getState();
@@ -49,7 +43,6 @@ export const addModelsLoadedListener = (startAppListening: AppStartListening) =>
       handleLoRAModels(models, state, dispatch, log);
       handleControlAdapterModels(models, state, dispatch, log);
       handleSpandrelImageToImageModels(models, state, dispatch, log);
-      handleIPAdapterModels(models, state, dispatch, log);
     },
   });
 };
@@ -58,15 +51,15 @@ type ModelHandler = (
   models: AnyModelConfig[],
   state: RootState,
   dispatch: AppDispatch,
-  log: Logger<SerializableObject>
+  log: Logger<JSONObject>
 ) => undefined;
 
 const handleMainModels: ModelHandler = (models, state, dispatch, log) => {
-  const currentModel = state.params.model;
+  const currentModel = state.generation.model;
   const mainModels = models.filter(isNonRefinerMainModelConfig);
   if (mainModels.length === 0) {
     // No models loaded at all
-    dispatch(modelChanged({ model: null }));
+    dispatch(modelChanged(null));
     return;
   }
 
@@ -81,16 +74,25 @@ const handleMainModels: ModelHandler = (models, state, dispatch, log) => {
   if (defaultModelInList) {
     const result = zParameterModel.safeParse(defaultModelInList);
     if (result.success) {
-      dispatch(modelChanged({ model: defaultModelInList, previousModel: currentModel }));
-      const { bbox } = selectCanvasSlice(state);
+      dispatch(modelChanged(defaultModelInList, currentModel));
+
       const optimalDimension = getOptimalDimension(defaultModelInList);
-      if (getIsSizeOptimal(bbox.rect.width, bbox.rect.height, optimalDimension)) {
+      if (
+        getIsSizeOptimal(
+          state.controlLayers.present.size.width,
+          state.controlLayers.present.size.height,
+          optimalDimension
+        )
+      ) {
         return;
       }
-      const { width, height } = calculateNewSize(bbox.aspectRatio.value, optimalDimension * optimalDimension);
+      const { width, height } = calculateNewSize(
+        state.controlLayers.present.size.aspectRatio.value,
+        optimalDimension * optimalDimension
+      );
 
-      dispatch(bboxWidthChanged({ width }));
-      dispatch(bboxHeightChanged({ height }));
+      dispatch(widthChanged({ width }));
+      dispatch(heightChanged({ height }));
       return;
     }
   }
@@ -102,11 +104,11 @@ const handleMainModels: ModelHandler = (models, state, dispatch, log) => {
     return;
   }
 
-  dispatch(modelChanged({ model: result.data, previousModel: currentModel }));
+  dispatch(modelChanged(result.data, currentModel));
 };
 
 const handleRefinerModels: ModelHandler = (models, state, dispatch, _log) => {
-  const currentRefinerModel = state.params.refinerModel;
+  const currentRefinerModel = state.sdxl.refinerModel;
   const refinerModels = models.filter(isRefinerMainModelModelConfig);
   if (models.length === 0) {
     // No models loaded at all
@@ -125,7 +127,7 @@ const handleRefinerModels: ModelHandler = (models, state, dispatch, _log) => {
 };
 
 const handleVAEModels: ModelHandler = (models, state, dispatch, log) => {
-  const currentVae = state.params.vae;
+  const currentVae = state.generation.vae;
 
   if (currentVae === null) {
     // null is a valid VAE! it means "use the default with the main model"
@@ -158,47 +160,28 @@ const handleVAEModels: ModelHandler = (models, state, dispatch, log) => {
 };
 
 const handleLoRAModels: ModelHandler = (models, state, dispatch, _log) => {
-  const loraModels = models.filter(isLoRAModelConfig);
-  state.loras.loras.forEach((lora) => {
-    const isLoRAAvailable = loraModels.some((m) => m.key === lora.model.key);
+  const loras = state.lora.loras;
+
+  forEach(loras, (lora, id) => {
+    const isLoRAAvailable = models.some((m) => m.key === lora.model.key);
+
     if (isLoRAAvailable) {
       return;
     }
-    dispatch(loraDeleted({ id: lora.id }));
+
+    dispatch(loraRemoved(id));
   });
 };
 
 const handleControlAdapterModels: ModelHandler = (models, state, dispatch, _log) => {
-  const caModels = models.filter(isControlNetOrT2IAdapterModelConfig);
-  selectCanvasSlice(state).controlLayers.entities.forEach((entity) => {
-    const isModelAvailable = caModels.some((m) => m.key === entity.controlAdapter.model?.key);
+  selectControlAdapterAll(state.controlAdapters).forEach((ca) => {
+    const isModelAvailable = models.some((m) => m.key === ca.model?.key);
+
     if (isModelAvailable) {
       return;
     }
-    dispatch(controlLayerModelChanged({ entityIdentifier: getEntityIdentifier(entity), modelConfig: null }));
-  });
-};
 
-const handleIPAdapterModels: ModelHandler = (models, state, dispatch, _log) => {
-  const ipaModels = models.filter(isIPAdapterModelConfig);
-  selectCanvasSlice(state).ipAdapters.entities.forEach((entity) => {
-    const isModelAvailable = ipaModels.some((m) => m.key === entity.ipAdapter.model?.key);
-    if (isModelAvailable) {
-      return;
-    }
-    dispatch(ipaModelChanged({ entityIdentifier: getEntityIdentifier(entity), modelConfig: null }));
-  });
-
-  selectCanvasSlice(state).regions.entities.forEach((entity) => {
-    entity.ipAdapters.forEach(({ id: ipAdapterId, model }) => {
-      const isModelAvailable = ipaModels.some((m) => m.key === model?.key);
-      if (isModelAvailable) {
-        return;
-      }
-      dispatch(
-        rgIPAdapterModelChanged({ entityIdentifier: getEntityIdentifier(entity), ipAdapterId, modelConfig: null })
-      );
-    });
+    dispatch(controlAdapterModelCleared({ id: ca.id }));
   });
 };
 

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

@@ -1,6 +1,6 @@
 import { isAnyOf } from '@reduxjs/toolkit';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { positivePromptChanged } from 'features/controlLayers/store/paramsSlice';
+import { positivePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
 import {
   combinatorialToggled,
   isErrorChanged,
@@ -15,7 +15,7 @@ import { getPresetModifiedPrompts } from 'features/nodes/util/graph/graphBuilder
 import { activeStylePresetIdChanged } from 'features/stylePresets/store/stylePresetSlice';
 import { stylePresetsApi } from 'services/api/endpoints/stylePresets';
 import { utilitiesApi } from 'services/api/endpoints/utilities';
-import { socketConnected } from 'services/events/setEventListeners';
+import { socketConnected } from 'services/events/actions';
 
 const matcher = isAnyOf(
   positivePromptChanged,
@@ -24,6 +24,8 @@ const matcher = isAnyOf(
   maxPromptsReset,
   socketConnected,
   activeStylePresetIdChanged,
+  stylePresetsApi.endpoints.deleteStylePreset.matchFulfilled,
+  stylePresetsApi.endpoints.updateStylePreset.matchFulfilled,
   stylePresetsApi.endpoints.listStylePresets.matchFulfilled
 );
 

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

@@ -1,5 +1,6 @@
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { bboxHeightChanged, bboxWidthChanged } from 'features/controlLayers/store/canvasSlice';
+import { heightChanged, widthChanged } from 'features/controlLayers/store/controlLayersSlice';
+import { setDefaultSettings } from 'features/parameters/store/actions';
 import {
   setCfgRescaleMultiplier,
   setCfgScale,
@@ -7,8 +8,7 @@ import {
   setSteps,
   vaePrecisionChanged,
   vaeSelected,
-} from 'features/controlLayers/store/paramsSlice';
-import { setDefaultSettings } from 'features/parameters/store/actions';
+} from 'features/parameters/store/generationSlice';
 import {
   isParameterCFGRescaleMultiplier,
   isParameterCFGScale,
@@ -30,7 +30,7 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
     effect: async (action, { dispatch, getState }) => {
       const state = getState();
 
-      const currentModel = state.params.model;
+      const currentModel = state.generation.model;
 
       if (!currentModel) {
         return;
@@ -98,13 +98,13 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
         const setSizeOptions = { updateAspectRatio: true, clamp: true };
         if (width) {
           if (isParameterWidth(width)) {
-            dispatch(bboxWidthChanged({ width, ...setSizeOptions }));
+            dispatch(widthChanged({ width, ...setSizeOptions }));
           }
         }
 
         if (height) {
           if (isParameterHeight(height)) {
-            dispatch(bboxHeightChanged({ height, ...setSizeOptions }));
+            dispatch(heightChanged({ height, ...setSizeOptions }));
           }
         }
 

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

@@ -6,9 +6,9 @@ import { atom } from 'nanostores';
 import { api } from 'services/api';
 import { modelsApi } from 'services/api/endpoints/models';
 import { queueApi, selectQueueStatus } from 'services/api/endpoints/queue';
-import { socketConnected } from 'services/events/setEventListeners';
+import { socketConnected } from 'services/events/actions';
 
-const log = logger('events');
+const log = logger('socketio');
 
 const $isFirstConnection = atom(true);
 

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

@@ -0,0 +1,14 @@
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { socketDisconnected } from 'services/events/actions';
+
+const log = logger('socketio');
+
+export const addSocketDisconnectedEventListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: socketDisconnected,
+    effect: () => {
+      log.debug('Disconnected');
+    },
+  });
+};

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

@@ -0,0 +1,26 @@
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { deepClone } from 'common/util/deepClone';
+import { parseify } from 'common/util/serialize';
+import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState';
+import { zNodeStatus } from 'features/nodes/types/invocation';
+import { socketGeneratorProgress } from 'services/events/actions';
+
+const log = logger('socketio');
+
+export const addGeneratorProgressEventListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: socketGeneratorProgress,
+    effect: (action) => {
+      log.trace(parseify(action.payload), `Generator progress`);
+      const { invocation_source_id, step, total_steps, progress_image } = action.payload.data;
+      const nes = deepClone($nodeExecutionStates.get()[invocation_source_id]);
+      if (nes) {
+        nes.status = zNodeStatus.enum.IN_PROGRESS;
+        nes.progress = (step + 1) / total_steps;
+        nes.progressImage = progress_image ?? null;
+        upsertExecutionState(nes.nodeId, nes);
+      }
+    },
+  });
+};

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

@@ -0,0 +1,122 @@
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { deepClone } from 'common/util/deepClone';
+import { parseify } from 'common/util/serialize';
+import { addImageToStagingArea } from 'features/canvas/store/canvasSlice';
+import {
+  boardIdSelected,
+  galleryViewChanged,
+  imageSelected,
+  isImageViewerOpenChanged,
+  offsetChanged,
+} from 'features/gallery/store/gallerySlice';
+import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState';
+import { zNodeStatus } from 'features/nodes/types/invocation';
+import { CANVAS_OUTPUT } from 'features/nodes/util/graph/constants';
+import { boardsApi } from 'services/api/endpoints/boards';
+import { imagesApi } from 'services/api/endpoints/images';
+import { getCategories, getListImagesUrl } from 'services/api/util';
+import { socketInvocationComplete } from 'services/events/actions';
+
+// These nodes output an image, but do not actually *save* an image, so we don't want to handle the gallery logic on them
+const nodeTypeDenylist = ['load_image', 'image'];
+
+const log = logger('socketio');
+
+export const addInvocationCompleteEventListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: socketInvocationComplete,
+    effect: async (action, { dispatch, getState }) => {
+      const { data } = action.payload;
+      log.debug({ data: parseify(data) }, `Invocation complete (${data.invocation.type})`);
+
+      const { result, invocation_source_id } = data;
+      // This complete event has an associated image output
+      if (data.result.type === 'image_output' && !nodeTypeDenylist.includes(data.invocation.type)) {
+        const { image_name } = data.result.image;
+        const { canvas, gallery } = getState();
+
+        // This populates the `getImageDTO` cache
+        const imageDTORequest = dispatch(
+          imagesApi.endpoints.getImageDTO.initiate(image_name, {
+            forceRefetch: true,
+          })
+        );
+
+        const imageDTO = await imageDTORequest.unwrap();
+        imageDTORequest.unsubscribe();
+
+        // Add canvas images to the staging area
+        if (canvas.batchIds.includes(data.batch_id) && data.invocation_source_id === CANVAS_OUTPUT) {
+          dispatch(addImageToStagingArea(imageDTO));
+        }
+
+        if (!imageDTO.is_intermediate) {
+          // update the total images for the board
+          dispatch(
+            boardsApi.util.updateQueryData('getBoardImagesTotal', imageDTO.board_id ?? 'none', (draft) => {
+              // eslint-disable-next-line @typescript-eslint/no-unused-vars
+              draft.total += 1;
+            })
+          );
+
+          dispatch(
+            imagesApi.util.invalidateTags([
+              { type: 'Board', id: imageDTO.board_id ?? 'none' },
+              {
+                type: 'ImageList',
+                id: getListImagesUrl({
+                  board_id: imageDTO.board_id ?? 'none',
+                  categories: getCategories(imageDTO),
+                }),
+              },
+            ])
+          );
+
+          const { shouldAutoSwitch } = gallery;
+
+          // If auto-switch is enabled, select the new image
+          if (shouldAutoSwitch) {
+            // if auto-add is enabled, switch the gallery view and board if needed as the image comes in
+            if (gallery.galleryView !== 'images') {
+              dispatch(galleryViewChanged('images'));
+            }
+
+            if (imageDTO.board_id && imageDTO.board_id !== gallery.selectedBoardId) {
+              dispatch(
+                boardIdSelected({
+                  boardId: imageDTO.board_id,
+                  selectedImageName: imageDTO.image_name,
+                })
+              );
+            }
+
+            dispatch(offsetChanged({ offset: 0 }));
+
+            if (!imageDTO.board_id && gallery.selectedBoardId !== 'none') {
+              dispatch(
+                boardIdSelected({
+                  boardId: 'none',
+                  selectedImageName: imageDTO.image_name,
+                })
+              );
+            }
+
+            dispatch(imageSelected(imageDTO));
+            dispatch(isImageViewerOpenChanged(true));
+          }
+        }
+      }
+
+      const nes = deepClone($nodeExecutionStates.get()[invocation_source_id]);
+      if (nes) {
+        nes.status = zNodeStatus.enum.COMPLETED;
+        if (nes.progress !== null) {
+          nes.progress = 1;
+        }
+        nes.outputs.push(result);
+        upsertExecutionState(nes.nodeId, nes);
+      }
+    },
+  });
+};

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

@@ -0,0 +1,31 @@
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { deepClone } from 'common/util/deepClone';
+import { parseify } from 'common/util/serialize';
+import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState';
+import { zNodeStatus } from 'features/nodes/types/invocation';
+import { socketInvocationError } from 'services/events/actions';
+
+const log = logger('socketio');
+
+export const addInvocationErrorEventListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: socketInvocationError,
+    effect: (action) => {
+      const { invocation_source_id, invocation, error_type, error_message, error_traceback } = action.payload.data;
+      log.error(parseify(action.payload), `Invocation error (${invocation.type})`);
+      const nes = deepClone($nodeExecutionStates.get()[invocation_source_id]);
+      if (nes) {
+        nes.status = zNodeStatus.enum.FAILED;
+        nes.progress = null;
+        nes.progressImage = null;
+        nes.error = {
+          error_type,
+          error_message,
+          error_traceback,
+        };
+        upsertExecutionState(nes.nodeId, nes);
+      }
+    },
+  });
+};

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

@@ -0,0 +1,24 @@
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { deepClone } from 'common/util/deepClone';
+import { parseify } from 'common/util/serialize';
+import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState';
+import { zNodeStatus } from 'features/nodes/types/invocation';
+import { socketInvocationStarted } from 'services/events/actions';
+
+const log = logger('socketio');
+
+export const addInvocationStartedEventListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: socketInvocationStarted,
+    effect: (action) => {
+      log.debug(parseify(action.payload), `Invocation started (${action.payload.data.invocation.type})`);
+      const { invocation_source_id } = action.payload.data;
+      const nes = deepClone($nodeExecutionStates.get()[invocation_source_id]);
+      if (nes) {
+        nes.status = zNodeStatus.enum.IN_PROGRESS;
+        upsertExecutionState(nes.nodeId, nes);
+      }
+    },
+  });
+};

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

@@ -0,0 +1,196 @@
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { api, LIST_TAG } from 'services/api';
+import { modelsApi } from 'services/api/endpoints/models';
+import {
+  socketModelInstallCancelled,
+  socketModelInstallComplete,
+  socketModelInstallDownloadProgress,
+  socketModelInstallDownloadsComplete,
+  socketModelInstallDownloadStarted,
+  socketModelInstallError,
+  socketModelInstallStarted,
+} from 'services/events/actions';
+
+/**
+ * A model install has two main stages - downloading and installing. All these events are namespaced under `model_install_`
+ * which is a bit misleading. For example, a `model_install_started` event is actually fired _after_ the model has fully
+ * downloaded and is being "physically" installed.
+ *
+ * Note: the download events are only fired for remote model installs, not local.
+ *
+ * Here's the expected flow:
+ * - API receives install request, model manager preps the install
+ * - `model_install_download_started` fired when the download starts
+ * - `model_install_download_progress` fired continually until the download is complete
+ * - `model_install_download_complete` fired when the download is complete
+ * - `model_install_started` fired when the "physical" installation starts
+ * - `model_install_complete` fired when the installation is complete
+ * - `model_install_cancelled` fired if the installation is cancelled
+ * - `model_install_error` fired if the installation has an error
+ */
+
+const selectModelInstalls = modelsApi.endpoints.listModelInstalls.select();
+
+export const addModelInstallEventListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: socketModelInstallDownloadStarted,
+    effect: async (action, { dispatch, getState }) => {
+      const { id } = action.payload.data;
+      const { data } = selectModelInstalls(getState());
+
+      if (!data || !data.find((m) => m.id === id)) {
+        dispatch(api.util.invalidateTags([{ type: 'ModelInstalls' }]));
+      } else {
+        dispatch(
+          modelsApi.util.updateQueryData('listModelInstalls', undefined, (draft) => {
+            const modelImport = draft.find((m) => m.id === id);
+            if (modelImport) {
+              modelImport.status = 'downloading';
+            }
+            return draft;
+          })
+        );
+      }
+    },
+  });
+
+  startAppListening({
+    actionCreator: socketModelInstallStarted,
+    effect: async (action, { dispatch, getState }) => {
+      const { id } = action.payload.data;
+      const { data } = selectModelInstalls(getState());
+
+      if (!data || !data.find((m) => m.id === id)) {
+        dispatch(api.util.invalidateTags([{ type: 'ModelInstalls' }]));
+      } else {
+        dispatch(
+          modelsApi.util.updateQueryData('listModelInstalls', undefined, (draft) => {
+            const modelImport = draft.find((m) => m.id === id);
+            if (modelImport) {
+              modelImport.status = 'running';
+            }
+            return draft;
+          })
+        );
+      }
+    },
+  });
+
+  startAppListening({
+    actionCreator: socketModelInstallDownloadProgress,
+    effect: async (action, { dispatch, getState }) => {
+      const { bytes, total_bytes, id } = action.payload.data;
+      const { data } = selectModelInstalls(getState());
+
+      if (!data || !data.find((m) => m.id === id)) {
+        dispatch(api.util.invalidateTags([{ type: 'ModelInstalls' }]));
+      } else {
+        dispatch(
+          modelsApi.util.updateQueryData('listModelInstalls', undefined, (draft) => {
+            const modelImport = draft.find((m) => m.id === id);
+            if (modelImport) {
+              modelImport.bytes = bytes;
+              modelImport.total_bytes = total_bytes;
+              modelImport.status = 'downloading';
+            }
+            return draft;
+          })
+        );
+      }
+    },
+  });
+
+  startAppListening({
+    actionCreator: socketModelInstallComplete,
+    effect: (action, { dispatch, getState }) => {
+      const { id } = action.payload.data;
+
+      const { data } = selectModelInstalls(getState());
+
+      if (!data || !data.find((m) => m.id === id)) {
+        dispatch(api.util.invalidateTags([{ type: 'ModelInstalls' }]));
+      } else {
+        dispatch(
+          modelsApi.util.updateQueryData('listModelInstalls', undefined, (draft) => {
+            const modelImport = draft.find((m) => m.id === id);
+            if (modelImport) {
+              modelImport.status = 'completed';
+            }
+            return draft;
+          })
+        );
+      }
+
+      dispatch(api.util.invalidateTags([{ type: 'ModelConfig', id: LIST_TAG }]));
+      dispatch(api.util.invalidateTags([{ type: 'ModelScanFolderResults', id: LIST_TAG }]));
+    },
+  });
+
+  startAppListening({
+    actionCreator: socketModelInstallError,
+    effect: (action, { dispatch, getState }) => {
+      const { id, error, error_type } = action.payload.data;
+      const { data } = selectModelInstalls(getState());
+
+      if (!data || !data.find((m) => m.id === id)) {
+        dispatch(api.util.invalidateTags([{ type: 'ModelInstalls' }]));
+      } else {
+        dispatch(
+          modelsApi.util.updateQueryData('listModelInstalls', undefined, (draft) => {
+            const modelImport = draft.find((m) => m.id === id);
+            if (modelImport) {
+              modelImport.status = 'error';
+              modelImport.error_reason = error_type;
+              modelImport.error = error;
+            }
+            return draft;
+          })
+        );
+      }
+    },
+  });
+
+  startAppListening({
+    actionCreator: socketModelInstallCancelled,
+    effect: (action, { dispatch, getState }) => {
+      const { id } = action.payload.data;
+      const { data } = selectModelInstalls(getState());
+
+      if (!data || !data.find((m) => m.id === id)) {
+        dispatch(api.util.invalidateTags([{ type: 'ModelInstalls' }]));
+      } else {
+        dispatch(
+          modelsApi.util.updateQueryData('listModelInstalls', undefined, (draft) => {
+            const modelImport = draft.find((m) => m.id === id);
+            if (modelImport) {
+              modelImport.status = 'cancelled';
+            }
+            return draft;
+          })
+        );
+      }
+    },
+  });
+
+  startAppListening({
+    actionCreator: socketModelInstallDownloadsComplete,
+    effect: (action, { dispatch, getState }) => {
+      const { id } = action.payload.data;
+      const { data } = selectModelInstalls(getState());
+
+      if (!data || !data.find((m) => m.id === id)) {
+        dispatch(api.util.invalidateTags([{ type: 'ModelInstalls' }]));
+      } else {
+        dispatch(
+          modelsApi.util.updateQueryData('listModelInstalls', undefined, (draft) => {
+            const modelImport = draft.find((m) => m.id === id);
+            if (modelImport) {
+              modelImport.status = 'downloads_done';
+            }
+            return draft;
+          })
+        );
+      }
+    },
+  });
+};

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

@@ -0,0 +1,42 @@
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { socketModelLoadComplete, socketModelLoadStarted } from 'services/events/actions';
+
+const log = logger('socketio');
+
+export const addModelLoadEventListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: socketModelLoadStarted,
+    effect: (action) => {
+      const { config, submodel_type } = action.payload.data;
+      const { name, base, type } = config;
+
+      const extras: string[] = [base, type];
+
+      if (submodel_type) {
+        extras.push(submodel_type);
+      }
+
+      const message = `Model load started: ${name} (${extras.join(', ')})`;
+
+      log.debug(action.payload, message);
+    },
+  });
+
+  startAppListening({
+    actionCreator: socketModelLoadComplete,
+    effect: (action) => {
+      const { config, submodel_type } = action.payload.data;
+      const { name, base, type } = config;
+
+      const extras: string[] = [base, type];
+      if (submodel_type) {
+        extras.push(submodel_type);
+      }
+
+      const message = `Model load complete: ${name} (${extras.join(', ')})`;
+
+      log.debug(action.payload, message);
+    },
+  });
+};

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketQueueItemStatusChanged.tsx

@@ -0,0 +1,114 @@
+import { logger } from 'app/logging/logger';
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { deepClone } from 'common/util/deepClone';
+import { $nodeExecutionStates } from 'features/nodes/hooks/useExecutionState';
+import { zNodeStatus } from 'features/nodes/types/invocation';
+import ErrorToastDescription, { getTitleFromErrorType } from 'features/toast/ErrorToastDescription';
+import { toast } from 'features/toast/toast';
+import { forEach } from 'lodash-es';
+import { queueApi, queueItemsAdapter } from 'services/api/endpoints/queue';
+import { socketQueueItemStatusChanged } from 'services/events/actions';
+
+const log = logger('socketio');
+
+export const addSocketQueueItemStatusChangedEventListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: socketQueueItemStatusChanged,
+    effect: async (action, { dispatch, getState }) => {
+      // we've got new status for the queue item, batch and queue
+      const {
+        item_id,
+        session_id,
+        status,
+        started_at,
+        updated_at,
+        completed_at,
+        batch_status,
+        queue_status,
+        error_type,
+        error_message,
+        error_traceback,
+      } = action.payload.data;
+
+      log.debug(action.payload, `Queue item ${item_id} status updated: ${status}`);
+
+      // Update this specific queue item in the list of queue items (this is the queue item DTO, without the session)
+      dispatch(
+        queueApi.util.updateQueryData('listQueueItems', undefined, (draft) => {
+          queueItemsAdapter.updateOne(draft, {
+            id: String(item_id),
+            changes: {
+              status,
+              started_at,
+              updated_at: updated_at ?? undefined,
+              completed_at: completed_at ?? undefined,
+              error_type,
+              error_message,
+              error_traceback,
+            },
+          });
+        })
+      );
+
+      // Update the queue status (we do not get the processor status here)
+      dispatch(
+        queueApi.util.updateQueryData('getQueueStatus', undefined, (draft) => {
+          if (!draft) {
+            return;
+          }
+          Object.assign(draft.queue, queue_status);
+        })
+      );
+
+      // Update the batch status
+      dispatch(
+        queueApi.util.updateQueryData('getBatchStatus', { batch_id: batch_status.batch_id }, () => batch_status)
+      );
+
+      // Invalidate caches for things we cannot update
+      // TODO: technically, we could possibly update the current session queue item, but feels safer to just request it again
+      dispatch(
+        queueApi.util.invalidateTags([
+          'CurrentSessionQueueItem',
+          'NextSessionQueueItem',
+          'InvocationCacheStatus',
+          { type: 'SessionQueueItem', id: item_id },
+        ])
+      );
+
+      if (status === 'in_progress') {
+        forEach($nodeExecutionStates.get(), (nes) => {
+          if (!nes) {
+            return;
+          }
+          const clone = deepClone(nes);
+          clone.status = zNodeStatus.enum.PENDING;
+          clone.error = null;
+          clone.progress = null;
+          clone.progressImage = null;
+          clone.outputs = [];
+          $nodeExecutionStates.setKey(clone.nodeId, clone);
+        });
+      } else if (status === 'failed' && error_type) {
+        const isLocal = getState().config.isLocal ?? true;
+        const sessionId = session_id;
+
+        toast({
+          id: `INVOCATION_ERROR_${error_type}`,
+          title: getTitleFromErrorType(error_type),
+          status: 'error',
+          duration: null,
+          updateDescription: isLocal,
+          description: (
+            <ErrorToastDescription
+              errorType={error_type}
+              errorMessage={error_message}
+              sessionId={sessionId}
+              isLocal={isLocal}
+            />
+          ),
+        });
+      }
+    },
+  });
+};

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

@@ -0,0 +1,43 @@
+import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+import { stagingAreaImageSaved } from 'features/canvas/store/actions';
+import { toast } from 'features/toast/toast';
+import { t } from 'i18next';
+import { imagesApi } from 'services/api/endpoints/images';
+
+export const addStagingAreaImageSavedListener = (startAppListening: AppStartListening) => {
+  startAppListening({
+    actionCreator: stagingAreaImageSaved,
+    effect: async (action, { dispatch, getState }) => {
+      const { imageDTO } = action.payload;
+
+      try {
+        const newImageDTO = await dispatch(
+          imagesApi.endpoints.changeImageIsIntermediate.initiate({
+            imageDTO,
+            is_intermediate: false,
+          })
+        ).unwrap();
+
+        // we may need to add it to the autoadd board
+        const { autoAddBoardId } = getState().gallery;
+
+        if (autoAddBoardId && autoAddBoardId !== 'none') {
+          await dispatch(
+            imagesApi.endpoints.addImageToBoard.initiate({
+              imageDTO: newImageDTO,
+              board_id: autoAddBoardId,
+            })
+          );
+        }
+        toast({ id: 'IMAGE_SAVED', title: t('toast.imageSaved'), status: 'success' });
+      } catch (error) {
+        toast({
+          id: 'IMAGE_SAVE_FAILED',
+          title: t('toast.imageSavingFailed'),
+          description: (error as Error)?.message,
+          status: 'error',
+        });
+      }
+    },
+  });
+};

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

@@ -2,20 +2,18 @@ import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { updateAllNodesRequested } from 'features/nodes/store/actions';
 import { $templates, nodesChanged } from 'features/nodes/store/nodesSlice';
-import { selectNodes } from 'features/nodes/store/selectors';
 import { NodeUpdateError } from 'features/nodes/types/error';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { getNeedsUpdate, updateNode } from 'features/nodes/util/node/nodeUpdate';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 
-const log = logger('workflows');
-
 export const addUpdateAllNodesRequestedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     actionCreator: updateAllNodesRequested,
     effect: (action, { dispatch, getState }) => {
-      const nodes = selectNodes(getState());
+      const log = logger('nodes');
+      const { nodes } = getState().nodes.present;
       const templates = $templates.get();
 
       let unableToUpdateCount = 0;

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

@@ -1,6 +1,6 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { $nodeExecutionStates } from 'features/nodes/hooks/useExecutionState';
+import { parseify } from 'common/util/serialize';
 import { workflowLoaded, workflowLoadRequested } from 'features/nodes/store/actions';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { $needsFit } from 'features/nodes/store/reactFlowInstance';
@@ -10,14 +10,11 @@ import { graphToWorkflow } from 'features/nodes/util/workflow/graphToWorkflow';
 import { validateWorkflow } from 'features/nodes/util/workflow/validateWorkflow';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
-import { serializeError } from 'serialize-error';
 import { checkBoardAccess, checkImageAccess, checkModelAccess } from 'services/api/hooks/accessChecks';
 import type { GraphAndWorkflowResponse, NonNullableGraph } from 'services/api/types';
 import { z } from 'zod';
 import { fromZodError } from 'zod-validation-error';
 
-const log = logger('workflows');
-
 const getWorkflow = async (data: GraphAndWorkflowResponse, templates: Templates) => {
   if (data.workflow) {
     // Prefer to load the workflow if it's available - it has more information
@@ -37,6 +34,7 @@ export const addWorkflowLoadRequestedListener = (startAppListening: AppStartList
   startAppListening({
     actionCreator: workflowLoadRequested,
     effect: async (action, { dispatch }) => {
+      const log = logger('nodes');
       const { data, asCopy } = action.payload;
       const nodeTemplates = $templates.get();
 
@@ -48,7 +46,6 @@ export const addWorkflowLoadRequestedListener = (startAppListening: AppStartList
           delete workflow.id;
         }
 
-        $nodeExecutionStates.set({});
         dispatch(workflowLoaded(workflow));
         if (!warnings.length) {
           toast({
@@ -72,7 +69,7 @@ export const addWorkflowLoadRequestedListener = (startAppListening: AppStartList
       } catch (e) {
         if (e instanceof WorkflowVersionError) {
           // The workflow version was not recognized in the valid list of versions
-          log.error({ error: serializeError(e) }, e.message);
+          log.error({ error: parseify(e) }, e.message);
           toast({
             id: 'UNABLE_TO_VALIDATE_WORKFLOW',
             title: t('nodes.unableToValidateWorkflow'),
@@ -81,7 +78,7 @@ export const addWorkflowLoadRequestedListener = (startAppListening: AppStartList
           });
         } else if (e instanceof WorkflowMigrationError) {
           // There was a problem migrating the workflow to the latest version
-          log.error({ error: serializeError(e) }, e.message);
+          log.error({ error: parseify(e) }, e.message);
           toast({
             id: 'UNABLE_TO_VALIDATE_WORKFLOW',
             title: t('nodes.unableToValidateWorkflow'),
@@ -93,7 +90,7 @@ export const addWorkflowLoadRequestedListener = (startAppListening: AppStartList
           const { message } = fromZodError(e, {
             prefix: t('nodes.workflowValidation'),
           });
-          log.error({ error: serializeError(e) }, message);
+          log.error({ error: parseify(e) }, message);
           toast({
             id: 'UNABLE_TO_VALIDATE_WORKFLOW',
             title: t('nodes.unableToValidateWorkflow'),
@@ -102,7 +99,7 @@ export const addWorkflowLoadRequestedListener = (startAppListening: AppStartList
           });
         } else {
           // Some other error occurred
-          log.error({ error: serializeError(e) }, t('nodes.unknownErrorValidatingWorkflow'));
+          log.error({ error: parseify(e) }, t('nodes.unknownErrorValidatingWorkflow'));
           toast({
             id: 'UNABLE_TO_VALIDATE_WORKFLOW',
             title: t('nodes.unableToValidateWorkflow'),

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

@@ -1,5 +1,4 @@
-import { useStore } from '@nanostores/react';
-import type { AppStore } from 'app/store/store';
+import type { createStore } from 'app/store/store';
 import { atom } from 'nanostores';
 
 // Inject socket options and url into window for debugging
@@ -23,7 +22,7 @@ class ReduxStoreNotInitialized extends Error {
   }
 }
 
-export const $store = atom<Readonly<AppStore | undefined>>();
+export const $store = atom<Readonly<ReturnType<typeof createStore>> | undefined>();
 
 export const getStore = () => {
   const store = $store.get();
@@ -32,11 +31,3 @@ export const getStore = () => {
   }
   return store;
 };
-
-export const useAppStore = () => {
-  const store = useStore($store);
-  if (!store) {
-    throw new ReduxStoreNotInitialized();
-  }
-  return store;
-};

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

@@ -3,31 +3,37 @@ import { autoBatchEnhancer, combineReducers, configureStore } from '@reduxjs/too
 import { logger } from 'app/logging/logger';
 import { idbKeyValDriver } from 'app/store/enhancers/reduxRemember/driver';
 import { errorHandler } from 'app/store/enhancers/reduxRemember/errors';
-import type { SerializableObject } from 'common/types';
-import { deepClone } from 'common/util/deepClone';
+import type { JSONObject } from 'common/types';
+import { canvasPersistConfig, canvasSlice } from 'features/canvas/store/canvasSlice';
 import { changeBoardModalSlice } from 'features/changeBoardModal/store/slice';
-import { canvasSessionPersistConfig, canvasSessionSlice } from 'features/controlLayers/store/canvasSessionSlice';
-import { canvasSettingsPersistConfig, canvasSettingsSlice } from 'features/controlLayers/store/canvasSettingsSlice';
-import { canvasPersistConfig, canvasSlice, canvasUndoableConfig } from 'features/controlLayers/store/canvasSlice';
-import { lorasPersistConfig, lorasSlice } from 'features/controlLayers/store/lorasSlice';
-import { paramsPersistConfig, paramsSlice } from 'features/controlLayers/store/paramsSlice';
-import { toolPersistConfig, toolSlice } from 'features/controlLayers/store/toolSlice';
+import {
+  controlAdaptersPersistConfig,
+  controlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  controlLayersPersistConfig,
+  controlLayersSlice,
+  controlLayersUndoableConfig,
+} from 'features/controlLayers/store/controlLayersSlice';
 import { deleteImageModalSlice } from 'features/deleteImageModal/store/slice';
 import { dynamicPromptsPersistConfig, dynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { galleryPersistConfig, gallerySlice } from 'features/gallery/store/gallerySlice';
 import { hrfPersistConfig, hrfSlice } from 'features/hrf/store/hrfSlice';
+import { loraPersistConfig, loraSlice } from 'features/lora/store/loraSlice';
 import { modelManagerV2PersistConfig, modelManagerV2Slice } from 'features/modelManagerV2/store/modelManagerV2Slice';
 import { nodesPersistConfig, nodesSlice, nodesUndoableConfig } from 'features/nodes/store/nodesSlice';
 import { workflowSettingsPersistConfig, workflowSettingsSlice } from 'features/nodes/store/workflowSettingsSlice';
 import { workflowPersistConfig, workflowSlice } from 'features/nodes/store/workflowSlice';
+import { generationPersistConfig, generationSlice } from 'features/parameters/store/generationSlice';
 import { upscalePersistConfig, upscaleSlice } from 'features/parameters/store/upscaleSlice';
 import { queueSlice } from 'features/queue/store/queueSlice';
+import { sdxlPersistConfig, sdxlSlice } from 'features/sdxl/store/sdxlSlice';
 import { stylePresetPersistConfig, stylePresetSlice } from 'features/stylePresets/store/stylePresetSlice';
 import { configSlice } from 'features/system/store/configSlice';
 import { systemPersistConfig, systemSlice } from 'features/system/store/systemSlice';
 import { uiPersistConfig, uiSlice } from 'features/ui/store/uiSlice';
 import { diff } from 'jsondiffpatch';
-import { keys, mergeWith, omit, pick } from 'lodash-es';
+import { defaultsDeep, keys, omit, pick } from 'lodash-es';
 import dynamicMiddlewares from 'redux-dynamic-middlewares';
 import type { SerializeFunction, UnserializeFunction } from 'redux-remember';
 import { rememberEnhancer, rememberReducer } from 'redux-remember';
@@ -42,31 +48,29 @@ import { actionsDenylist } from './middleware/devtools/actionsDenylist';
 import { stateSanitizer } from './middleware/devtools/stateSanitizer';
 import { listenerMiddleware } from './middleware/listenerMiddleware';
 
-const log = logger('system');
-
 const allReducers = {
-  [api.reducerPath]: api.reducer,
+  [canvasSlice.name]: canvasSlice.reducer,
   [gallerySlice.name]: gallerySlice.reducer,
+  [generationSlice.name]: generationSlice.reducer,
   [nodesSlice.name]: undoable(nodesSlice.reducer, nodesUndoableConfig),
   [systemSlice.name]: systemSlice.reducer,
   [configSlice.name]: configSlice.reducer,
   [uiSlice.name]: uiSlice.reducer,
+  [controlAdaptersSlice.name]: controlAdaptersSlice.reducer,
   [dynamicPromptsSlice.name]: dynamicPromptsSlice.reducer,
   [deleteImageModalSlice.name]: deleteImageModalSlice.reducer,
   [changeBoardModalSlice.name]: changeBoardModalSlice.reducer,
+  [loraSlice.name]: loraSlice.reducer,
   [modelManagerV2Slice.name]: modelManagerV2Slice.reducer,
+  [sdxlSlice.name]: sdxlSlice.reducer,
   [queueSlice.name]: queueSlice.reducer,
   [workflowSlice.name]: workflowSlice.reducer,
   [hrfSlice.name]: hrfSlice.reducer,
-  [canvasSlice.name]: undoable(canvasSlice.reducer, canvasUndoableConfig),
+  [controlLayersSlice.name]: undoable(controlLayersSlice.reducer, controlLayersUndoableConfig),
   [workflowSettingsSlice.name]: workflowSettingsSlice.reducer,
+  [api.reducerPath]: api.reducer,
   [upscaleSlice.name]: upscaleSlice.reducer,
   [stylePresetSlice.name]: stylePresetSlice.reducer,
-  [paramsSlice.name]: paramsSlice.reducer,
-  [toolSlice.name]: toolSlice.reducer,
-  [canvasSettingsSlice.name]: canvasSettingsSlice.reducer,
-  [canvasSessionSlice.name]: canvasSessionSlice.reducer,
-  [lorasSlice.name]: lorasSlice.reducer,
 };
 
 const rootReducer = combineReducers(allReducers);
@@ -96,26 +100,27 @@ export type PersistConfig<T = any> = {
 };
 
 const persistConfigs: { [key in keyof typeof allReducers]?: PersistConfig } = {
+  [canvasPersistConfig.name]: canvasPersistConfig,
   [galleryPersistConfig.name]: galleryPersistConfig,
+  [generationPersistConfig.name]: generationPersistConfig,
   [nodesPersistConfig.name]: nodesPersistConfig,
   [systemPersistConfig.name]: systemPersistConfig,
   [workflowPersistConfig.name]: workflowPersistConfig,
   [uiPersistConfig.name]: uiPersistConfig,
+  [controlAdaptersPersistConfig.name]: controlAdaptersPersistConfig,
   [dynamicPromptsPersistConfig.name]: dynamicPromptsPersistConfig,
+  [sdxlPersistConfig.name]: sdxlPersistConfig,
+  [loraPersistConfig.name]: loraPersistConfig,
   [modelManagerV2PersistConfig.name]: modelManagerV2PersistConfig,
   [hrfPersistConfig.name]: hrfPersistConfig,
-  [canvasPersistConfig.name]: canvasPersistConfig,
+  [controlLayersPersistConfig.name]: controlLayersPersistConfig,
   [workflowSettingsPersistConfig.name]: workflowSettingsPersistConfig,
   [upscalePersistConfig.name]: upscalePersistConfig,
   [stylePresetPersistConfig.name]: stylePresetPersistConfig,
-  [paramsPersistConfig.name]: paramsPersistConfig,
-  [toolPersistConfig.name]: toolPersistConfig,
-  [canvasSettingsPersistConfig.name]: canvasSettingsPersistConfig,
-  [canvasSessionPersistConfig.name]: canvasSessionPersistConfig,
-  [lorasPersistConfig.name]: lorasPersistConfig,
 };
 
 const unserialize: UnserializeFunction = (data, key) => {
+  const log = logger('system');
   const persistConfig = persistConfigs[key as keyof typeof persistConfigs];
   if (!persistConfig) {
     throw new Error(`No persist config for slice "${key}"`);
@@ -125,21 +130,17 @@ const unserialize: UnserializeFunction = (data, key) => {
     const parsed = JSON.parse(data);
 
     // strip out old keys
-    const stripped = pick(deepClone(parsed), keys(initialState));
+    const stripped = pick(parsed, keys(initialState));
     // run (additive) migrations
     const migrated = migrate(stripped);
-    /*
-     * Merge in initial state as default values, covering any missing keys. You might be tempted to use _.defaultsDeep,
-     * but that merges arrays by index and partial objects by key. Using an identity function as the customizer results
-     * in behaviour like defaultsDeep, but doesn't overwrite any values that are not undefined in the migrated state.
-     */
-    const transformed = mergeWith(migrated, initialState, (objVal) => objVal);
+    // merge in initial state as default values, covering any missing keys
+    const transformed = defaultsDeep(migrated, initialState);
 
     log.debug(
       {
         persistedData: parsed,
         rehydratedData: transformed,
-        diff: diff(parsed, transformed) as SerializableObject, // this is always serializable
+        diff: diff(parsed, transformed) as JSONObject, // this is always serializable
       },
       `Rehydrated slice "${key}"`
     );
@@ -201,8 +202,7 @@ export const createStore = (uniqueStoreKey?: string, persist = true) =>
     },
   });
 
-export type AppStore = ReturnType<typeof createStore>;
-export type RootState = ReturnType<AppStore['getState']>;
+export type RootState = ReturnType<ReturnType<typeof createStore>['getState']>;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AppThunkDispatch = ThunkDispatch<RootState, any, UnknownAction>;
 export type AppDispatch = ReturnType<typeof createStore>['dispatch'];

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

@@ -1,6 +1,6 @@
-import type { FilterType } from 'features/controlLayers/store/types';
+import type { CONTROLNET_PROCESSORS } from 'features/controlAdapters/store/constants';
 import type { ParameterPrecision, ParameterScheduler } from 'features/parameters/types/parameterSchemas';
-import type { TabName } from 'features/ui/store/uiTypes';
+import type { InvokeTabName } from 'features/ui/store/tabMap';
 import type { O } from 'ts-toolbelt';
 
 /**
@@ -72,7 +72,7 @@ export type AppConfig = {
   maxUpscaleDimension?: number;
   allowPrivateBoards: boolean;
   allowPrivateStylePresets: boolean;
-  disabledTabs: TabName[];
+  disabledTabs: InvokeTabName[];
   disabledFeatures: AppFeature[];
   disabledSDFeatures: SDFeature[];
   nodesAllowlist: string[] | undefined;
@@ -83,7 +83,7 @@ export type AppConfig = {
   sd: {
     defaultModel?: string;
     disabledControlNetModels: string[];
-    disabledControlNetProcessors: FilterType[];
+    disabledControlNetProcessors: (keyof typeof CONTROLNET_PROCESSORS)[];
     // Core parameters
     iterations: NumericalParameterConfig;
     width: NumericalParameterConfig; // initial value comes from model

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

@@ -33,23 +33,28 @@ type IAINoImageFallbackProps = FlexProps & {
 };
 
 export const IAINoContentFallback = memo((props: IAINoImageFallbackProps) => {
-  const { icon = PiImageBold, boxSize = 16, ...rest } = props;
+  const { icon = PiImageBold, boxSize = 16, sx, ...rest } = props;
+
+  const styles = useMemo(
+    () => ({
+      w: 'full',
+      h: 'full',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'base',
+      flexDir: 'column',
+      gap: 2,
+      userSelect: 'none',
+      opacity: 0.7,
+      color: 'base.500',
+      fontSize: 'md',
+      ...sx,
+    }),
+    [sx]
+  );
 
   return (
-    <Flex
-      w="full"
-      h="full"
-      alignItems="center"
-      justifyContent="center"
-      borderRadius="base"
-      flexDir="column"
-      gap={2}
-      userSelect="none"
-      opacity={0.7}
-      color="base.500"
-      fontSize="md"
-      {...rest}
-    >
+    <Flex sx={styles} {...rest}>
       {icon && <Icon as={icon} boxSize={boxSize} opacity={0.7} />}
       {props.label && <Text textAlign="center">{props.label}</Text>}
     </Flex>

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

@@ -13,9 +13,8 @@ import {
   Spacer,
   Text,
 } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { selectSystemSlice, setShouldEnableInformationalPopovers } from 'features/system/store/systemSlice';
+import { setShouldEnableInformationalPopovers } from 'features/system/store/systemSlice';
 import { toast } from 'features/toast/toast';
 import { merge, omit } from 'lodash-es';
 import type { ReactElement } from 'react';
@@ -32,13 +31,8 @@ type Props = {
   children: ReactElement;
 };
 
-const selectShouldEnableInformationalPopovers = createSelector(
-  selectSystemSlice,
-  (system) => system.shouldEnableInformationalPopovers
-);
-
 export const InformationalPopover = memo(({ feature, children, inPortal = true, ...rest }: Props) => {
-  const shouldEnableInformationalPopovers = useAppSelector(selectShouldEnableInformationalPopovers);
+  const shouldEnableInformationalPopovers = useAppSelector((s) => s.system.shouldEnableInformationalPopovers);
 
   const data = useMemo(() => POPOVER_DATA[feature], [feature]);
 

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

@@ -1,158 +0,0 @@
-import { logger } from 'app/logging/logger';
-import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
-import { objectKeys } from 'common/util/objectKeys';
-import { isEqual } from 'lodash-es';
-import type { Atom } from 'nanostores';
-import { atom, computed } from 'nanostores';
-import type { RefObject } from 'react';
-import { useEffect, useMemo } from 'react';
-
-const log = logger('system');
-
-const _INTERACTION_SCOPES = ['gallery', 'canvas', 'stagingArea', 'workflows', 'imageViewer'] as const;
-
-type InteractionScope = (typeof _INTERACTION_SCOPES)[number];
-
-export const $activeScopes = atom<Set<InteractionScope>>(new Set());
-
-type InteractionScopeData = {
-  targets: Set<HTMLElement>;
-  $isActive: Atom<boolean>;
-};
-
-export const INTERACTION_SCOPES: Record<InteractionScope, InteractionScopeData> = _INTERACTION_SCOPES.reduce(
-  (acc, region) => {
-    acc[region] = {
-      targets: new Set(),
-      $isActive: computed($activeScopes, (activeScopes) => activeScopes.has(region)),
-    };
-    return acc;
-  },
-  {} as Record<InteractionScope, InteractionScopeData>
-);
-
-const formatScopes = (interactionScopes: Set<InteractionScope>) => {
-  if (interactionScopes.size === 0) {
-    return 'none';
-  }
-  return Array.from(interactionScopes).join(', ');
-};
-
-export const addScope = (scope: InteractionScope) => {
-  const currentScopes = $activeScopes.get();
-  if (currentScopes.has(scope)) {
-    return;
-  }
-  const newScopes = new Set(currentScopes);
-  newScopes.add(scope);
-  $activeScopes.set(newScopes);
-  log.trace(`Added scope ${scope}: ${formatScopes($activeScopes.get())}`);
-};
-
-export const removeScope = (scope: InteractionScope) => {
-  const currentScopes = $activeScopes.get();
-  if (!currentScopes.has(scope)) {
-    return;
-  }
-  const newScopes = new Set(currentScopes);
-  newScopes.delete(scope);
-  $activeScopes.set(newScopes);
-  log.trace(`Removed scope ${scope}: ${formatScopes($activeScopes.get())}`);
-};
-
-export const setScopes = (scopes: InteractionScope[]) => {
-  const newScopes = new Set(scopes);
-  $activeScopes.set(newScopes);
-  log.trace(`Set scopes: ${formatScopes($activeScopes.get())}`);
-};
-
-export const useScopeOnFocus = (scope: InteractionScope, ref: RefObject<HTMLElement>) => {
-  useEffect(() => {
-    const element = ref.current;
-
-    if (!element) {
-      return;
-    }
-
-    INTERACTION_SCOPES[scope].targets.add(element);
-
-    return () => {
-      INTERACTION_SCOPES[scope].targets.delete(element);
-    };
-  }, [ref, scope]);
-};
-
-type UseScopeOnMountOptions = {
-  mount?: boolean;
-  unmount?: boolean;
-};
-
-const defaultUseScopeOnMountOptions: UseScopeOnMountOptions = {
-  mount: true,
-  unmount: true,
-};
-
-export const useScopeOnMount = (scope: InteractionScope, options?: UseScopeOnMountOptions) => {
-  useEffect(() => {
-    const { mount, unmount } = { ...defaultUseScopeOnMountOptions, ...options };
-
-    if (mount) {
-      addScope(scope);
-    }
-
-    return () => {
-      if (unmount) {
-        removeScope(scope);
-      }
-    };
-  }, [options, scope]);
-};
-
-export const useScopeImperativeApi = (scope: InteractionScope) => {
-  const api = useMemo(() => {
-    return {
-      add: () => {
-        addScope(scope);
-      },
-      remove: () => {
-        removeScope(scope);
-      },
-    };
-  }, [scope]);
-
-  return api;
-};
-
-const handleFocusEvent = (_event: FocusEvent) => {
-  const activeElement = document.activeElement;
-  if (!(activeElement instanceof HTMLElement)) {
-    return;
-  }
-
-  const newActiveScopes = new Set<InteractionScope>();
-
-  for (const scope of objectKeys(INTERACTION_SCOPES)) {
-    for (const element of INTERACTION_SCOPES[scope].targets) {
-      if (element.contains(activeElement)) {
-        newActiveScopes.add(scope);
-      }
-    }
-  }
-
-  const oldActiveScopes = $activeScopes.get();
-  if (!isEqual(oldActiveScopes, newActiveScopes)) {
-    $activeScopes.set(newActiveScopes);
-    log.trace(`Scopes changed: ${formatScopes($activeScopes.get())}`);
-  }
-};
-
-export const useScopeFocusWatcher = () => {
-  useAssertSingleton('useScopeFocusWatcher');
-
-  useEffect(() => {
-    window.addEventListener('focus', handleFocusEvent, true);
-    return () => {
-      window.removeEventListener('focus', handleFocusEvent, true);
-    };
-  }, []);
-};

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

@@ -1,4 +1,3 @@
-import type { WritableAtom } from 'nanostores';
 import { useCallback, useMemo, useState } from 'react';
 
 export const useBoolean = (initialValue: boolean) => {
@@ -20,33 +19,3 @@ export const useBoolean = (initialValue: boolean) => {
 
   return api;
 };
-
-export const buildUseBoolean = ($boolean: WritableAtom<boolean>) => {
-  return () => {
-    const setTrue = useCallback(() => {
-      $boolean.set(true);
-    }, []);
-    const setFalse = useCallback(() => {
-      $boolean.set(false);
-    }, []);
-    const set = useCallback((value: boolean) => {
-      $boolean.set(value);
-    }, []);
-    const toggle = useCallback(() => {
-      $boolean.set(!$boolean.get());
-    }, []);
-
-    const api = useMemo(
-      () => ({
-        setTrue,
-        setFalse,
-        set,
-        toggle,
-        $boolean,
-      }),
-      [set, setFalse, setTrue, toggle]
-    );
-
-    return api;
-  };
-};

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

@@ -1,8 +1,7 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
 import { toast } from 'features/toast/toast';
-import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useCallback, useEffect, useState } from 'react';
 import type { Accept, FileRejection } from 'react-dropzone';
 import { useDropzone } from 'react-dropzone';
@@ -15,9 +14,13 @@ const accept: Accept = {
   'image/jpeg': ['.jpg', '.jpeg', '.png'],
 };
 
-const selectPostUploadAction = createMemoizedSelector(selectActiveTab, (activeTabName) => {
+const selectPostUploadAction = createMemoizedSelector(activeTabNameSelector, (activeTabName) => {
   let postUploadAction: PostUploadAction = { type: 'TOAST' };
 
+  if (activeTabName === 'canvas') {
+    postUploadAction = { type: 'SET_CANVAS_INITIAL_IMAGE' };
+  }
+
   if (activeTabName === 'upscaling') {
     postUploadAction = { type: 'SET_UPSCALE_INITIAL_IMAGE' };
   }
@@ -27,9 +30,10 @@ const selectPostUploadAction = createMemoizedSelector(selectActiveTab, (activeTa
 
 export const useFullscreenDropzone = () => {
   const { t } = useTranslation();
-  const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
-  const [isHandlingUpload, setIsHandlingUpload] = useState<boolean>(false);
   const postUploadAction = useAppSelector(selectPostUploadAction);
+  const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
+  const [isHandlingUpload, setIsHandlingUpload] = useState<boolean>(false);
+
   const [uploadImage] = useUploadImageMutation();
 
   const fileRejectionCallback = useCallback(
@@ -47,7 +51,7 @@ export const useFullscreenDropzone = () => {
   );
 
   const fileAcceptedCallback = useCallback(
-    (file: File) => {
+    async (file: File) => {
       uploadImage({
         file,
         image_category: 'user',
@@ -97,7 +101,7 @@ export const useFullscreenDropzone = () => {
 
   useEffect(() => {
     // This is a hack to allow pasting images into the uploader
-    const handlePaste = (e: ClipboardEvent) => {
+    const handlePaste = async (e: ClipboardEvent) => {
       if (!dropzone.inputRef.current) {
         return;
       }

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

@@ -1,5 +1,4 @@
 import { useAppDispatch } from 'app/store/storeHooks';
-import { addScope, removeScope, setScopes } from 'common/hooks/interactionScopes';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { useClearQueue } from 'features/queue/hooks/useClearQueue';
 import { useQueueBack } from 'features/queue/hooks/useQueueBack';
@@ -17,7 +16,7 @@ export const useGlobalHotkeys = () => {
     ['ctrl+enter', 'meta+enter'],
     queueBack,
     {
-      enabled: !isDisabledQueueBack && !isLoadingQueueBack,
+      enabled: () => !isDisabledQueueBack && !isLoadingQueueBack,
       preventDefault: true,
       enableOnFormTags: ['input', 'textarea', 'select'],
     },
@@ -30,7 +29,7 @@ export const useGlobalHotkeys = () => {
     ['ctrl+shift+enter', 'meta+shift+enter'],
     queueFront,
     {
-      enabled: !isDisabledQueueFront && !isLoadingQueueFront,
+      enabled: () => !isDisabledQueueFront && !isLoadingQueueFront,
       preventDefault: true,
       enableOnFormTags: ['input', 'textarea', 'select'],
     },
@@ -47,7 +46,7 @@ export const useGlobalHotkeys = () => {
     ['shift+x'],
     cancelQueueItem,
     {
-      enabled: !isDisabledCancelQueueItem && !isLoadingCancelQueueItem,
+      enabled: () => !isDisabledCancelQueueItem && !isLoadingCancelQueueItem,
       preventDefault: true,
     },
     [cancelQueueItem, isDisabledCancelQueueItem, isLoadingCancelQueueItem]
@@ -59,7 +58,7 @@ export const useGlobalHotkeys = () => {
     ['ctrl+shift+x', 'meta+shift+x'],
     clearQueue,
     {
-      enabled: !isDisabledClearQueue && !isLoadingClearQueue,
+      enabled: () => !isDisabledClearQueue && !isLoadingClearQueue,
       preventDefault: true,
     },
     [clearQueue, isDisabledClearQueue, isLoadingClearQueue]
@@ -69,8 +68,6 @@ export const useGlobalHotkeys = () => {
     '1',
     () => {
       dispatch(setActiveTab('generation'));
-      addScope('canvas');
-      removeScope('workflows');
     },
     [dispatch]
   );
@@ -78,9 +75,7 @@ export const useGlobalHotkeys = () => {
   useHotkeys(
     '2',
     () => {
-      dispatch(setActiveTab('upscaling'));
-      removeScope('canvas');
-      removeScope('workflows');
+      dispatch(setActiveTab('canvas'));
     },
     [dispatch]
   );
@@ -89,8 +84,6 @@ export const useGlobalHotkeys = () => {
     '3',
     () => {
       dispatch(setActiveTab('workflows'));
-      removeScope('canvas');
-      addScope('workflows');
     },
     [dispatch]
   );
@@ -100,7 +93,6 @@ export const useGlobalHotkeys = () => {
     () => {
       if (isModelManagerEnabled) {
         dispatch(setActiveTab('models'));
-        setScopes([]);
       }
     },
     [dispatch, isModelManagerEnabled]
@@ -110,7 +102,6 @@ export const useGlobalHotkeys = () => {
     isModelManagerEnabled ? '5' : '4',
     () => {
       dispatch(setActiveTab('queue'));
-      setScopes([]);
     },
     [dispatch, isModelManagerEnabled]
   );

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

@@ -1,8 +1,6 @@
 import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
-import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { GroupBase } from 'chakra-react-select';
-import { selectParamsSlice } from 'features/controlLayers/store/paramsSlice';
 import type { ModelIdentifierField } from 'features/nodes/types/common';
 import { groupBy, reduce } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
@@ -30,13 +28,11 @@ const groupByBaseFunc = <T extends AnyModelConfig>(model: T) => model.base.toUpp
 const groupByBaseAndTypeFunc = <T extends AnyModelConfig>(model: T) =>
   `${model.base.toUpperCase()} / ${model.type.replaceAll('_', ' ').toUpperCase()}`;
 
-const selectBaseWithSDXLFallback = createSelector(selectParamsSlice, (params) => params.model?.base ?? 'sdxl');
-
 export const useGroupedModelCombobox = <T extends AnyModelConfig>(
   arg: UseGroupedModelComboboxArg<T>
 ): UseGroupedModelComboboxReturn => {
   const { t } = useTranslation();
-  const base = useAppSelector(selectBaseWithSDXLFallback);
+  const base_model = useAppSelector((s) => s.generation.model?.base ?? 'sdxl');
   const { modelConfigs, selectedModel, getIsDisabled, onChange, isLoading, groupByType = false } = arg;
   const options = useMemo<GroupBase<ComboboxOption>[]>(() => {
     if (!modelConfigs) {
@@ -58,9 +54,9 @@ export const useGroupedModelCombobox = <T extends AnyModelConfig>(
       },
       [] as GroupBase<ComboboxOption>[]
     );
-    _options.sort((a) => (a.label?.split('/')[0]?.toLowerCase().includes(base) ? -1 : 1));
+    _options.sort((a) => (a.label?.split('/')[0]?.toLowerCase().includes(base_model) ? -1 : 1));
     return _options;
-  }, [modelConfigs, groupByType, getIsDisabled, base]);
+  }, [modelConfigs, groupByType, getIsDisabled, base_model]);
 
   const value = useMemo(
     () =>

invokeai/frontend/web/src/common/hooks/useImageUploadButton.tsx

@@ -1,5 +1,4 @@
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
 import { useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useUploadImageMutation } from 'services/api/endpoints/images';
@@ -30,7 +29,7 @@ type UseImageUploadButtonArgs = {
  * <input {...getUploadInputProps()} /> // hidden, handles native upload functionality
  */
 export const useImageUploadButton = ({ postUploadAction, isDisabled }: UseImageUploadButtonArgs) => {
-  const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
+  const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
   const [uploadImage] = useUploadImageMutation();
   const onDropAccepted = useCallback(
     (files: File[]) => {

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

@@ -1,49 +1,67 @@
 import { useStore } from '@nanostores/react';
-import { $isConnected } from 'app/hooks/useSocketIO';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectParamsSlice } from 'features/controlLayers/store/paramsSlice';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
+import {
+  selectControlAdapterAll,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
+import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
+import { selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
+import type { Layer } from 'features/controlLayers/store/types';
 import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
 import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
-import { $templates } from 'features/nodes/store/nodesSlice';
-import { selectNodesSlice } from 'features/nodes/store/selectors';
+import { $templates, selectNodesSlice } from 'features/nodes/store/nodesSlice';
 import type { Templates } from 'features/nodes/store/types';
 import { selectWorkflowSettingsSlice } from 'features/nodes/store/workflowSettingsSlice';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { selectUpscalelice } from 'features/parameters/store/upscaleSlice';
 import { selectConfigSlice } from 'features/system/store/configSlice';
 import { selectSystemSlice } from 'features/system/store/systemSlice';
-import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import i18n from 'i18next';
 import { forEach, upperFirst } from 'lodash-es';
 import { useMemo } from 'react';
 import { getConnectedEdges } from 'reactflow';
 
-const LAYER_TYPE_TO_TKEY = {
-  ip_adapter: 'controlLayers.ipAdapter',
-  inpaint_mask: 'controlLayers.inpaintMask',
-  regional_guidance: 'controlLayers.regionalGuidance',
-  raster_layer: 'controlLayers.raster',
-  control_layer: 'controlLayers.globalControlAdapter',
-} as const;
+const LAYER_TYPE_TO_TKEY: Record<Layer['type'], string> = {
+  initial_image_layer: 'controlLayers.globalInitialImage',
+  control_adapter_layer: 'controlLayers.globalControlAdapter',
+  ip_adapter_layer: 'controlLayers.globalIPAdapter',
+  regional_guidance_layer: 'controlLayers.regionalGuidance',
+};
 
-const createSelector = (templates: Templates, isConnected: boolean) =>
+const createSelector = (templates: Templates) =>
   createMemoizedSelector(
     [
+      selectControlAdaptersSlice,
+      selectGenerationSlice,
       selectSystemSlice,
       selectNodesSlice,
       selectWorkflowSettingsSlice,
       selectDynamicPromptsSlice,
-      selectCanvasSlice,
-      selectParamsSlice,
+      selectControlLayersSlice,
+      activeTabNameSelector,
       selectUpscalelice,
       selectConfigSlice,
-      selectActiveTab,
     ],
-    (system, nodes, workflowSettings, dynamicPrompts, canvas, params, upscale, config, activeTabName) => {
-      const { bbox } = canvas;
-      const { model, positivePrompt } = params;
+    (
+      controlAdapters,
+      generation,
+      system,
+      nodes,
+      workflowSettings,
+      dynamicPrompts,
+      controlLayers,
+      activeTabName,
+      upscale,
+      config
+    ) => {
+      const { model } = generation;
+      const { size } = controlLayers.present;
+      const { positivePrompt } = controlLayers.present;
+
+      const { isConnected } = system;
 
       const reasons: { prefix?: string; content: string }[] = [];
 
@@ -96,26 +114,6 @@ const createSelector = (templates: Templates, isConnected: boolean) =>
             });
           });
         }
-      } else if (activeTabName === 'upscaling') {
-        if (!upscale.upscaleInitialImage) {
-          reasons.push({ content: i18n.t('upscaling.missingUpscaleInitialImage') });
-        } else if (config.maxUpscaleDimension) {
-          const { width, height } = upscale.upscaleInitialImage;
-          const { scale } = upscale;
-
-          const maxPixels = config.maxUpscaleDimension ** 2;
-          const upscaledPixels = width * scale * height * scale;
-
-          if (upscaledPixels > maxPixels) {
-            reasons.push({ content: i18n.t('upscaling.exceedsMaxSize') });
-          }
-        }
-        if (!upscale.upscaleModel) {
-          reasons.push({ content: i18n.t('upscaling.missingUpscaleModel') });
-        }
-        if (!upscale.tileControlnetModel) {
-          reasons.push({ content: i18n.t('upscaling.missingTileControlNetModel') });
-        }
       } else {
         if (dynamicPrompts.prompts.length === 0 && getShouldProcessPrompt(positivePrompt)) {
           reasons.push({ content: i18n.t('parameters.invoke.noPrompts') });
@@ -125,115 +123,140 @@ const createSelector = (templates: Templates, isConnected: boolean) =>
           reasons.push({ content: i18n.t('parameters.invoke.noModelSelected') });
         }
 
-        canvas.controlLayers.entities
-          .filter((controlLayer) => controlLayer.isEnabled)
-          .forEach((controlLayer, i) => {
-            const layerLiteral = i18n.t('controlLayers.layers_one');
-            const layerNumber = i + 1;
-            const layerType = i18n.t(LAYER_TYPE_TO_TKEY['control_layer']);
-            const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
-            const problems: string[] = [];
-            // Must have model
-            if (!controlLayer.controlAdapter.model) {
-              problems.push(i18n.t('parameters.invoke.layer.controlAdapterNoModelSelected'));
-            }
-            // Model base must match
-            if (controlLayer.controlAdapter.model?.base !== model?.base) {
-              problems.push(i18n.t('parameters.invoke.layer.controlAdapterIncompatibleBaseModel'));
-            }
-            // T2I Adapters require images have dimensions that are multiples of 64 (SD1.5) or 32 (SDXL)
-            if (controlLayer.controlAdapter.type === 't2i_adapter') {
-              const multiple = model?.base === 'sdxl' ? 32 : 64;
-              if (bbox.rect.width % multiple !== 0 || bbox.rect.height % multiple !== 0) {
-                problems.push(i18n.t('parameters.invoke.layer.t2iAdapterIncompatibleDimensions', { multiple }));
+        if (activeTabName === 'generation') {
+          // Handling for generation tab
+          controlLayers.present.layers
+            .filter((l) => l.isEnabled)
+            .forEach((l, i) => {
+              const layerLiteral = i18n.t('controlLayers.layers_one');
+              const layerNumber = i + 1;
+              const layerType = i18n.t(LAYER_TYPE_TO_TKEY[l.type]);
+              const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
+              const problems: string[] = [];
+              if (l.type === 'control_adapter_layer') {
+                // Must have model
+                if (!l.controlAdapter.model) {
+                  problems.push(i18n.t('parameters.invoke.layer.controlAdapterNoModelSelected'));
+                }
+                // Model base must match
+                if (l.controlAdapter.model?.base !== model?.base) {
+                  problems.push(i18n.t('parameters.invoke.layer.controlAdapterIncompatibleBaseModel'));
+                }
+                // Must have a control image OR, if it has a processor, it must have a processed image
+                if (!l.controlAdapter.image) {
+                  problems.push(i18n.t('parameters.invoke.layer.controlAdapterNoImageSelected'));
+                } else if (l.controlAdapter.processorConfig && !l.controlAdapter.processedImage) {
+                  problems.push(i18n.t('parameters.invoke.layer.controlAdapterImageNotProcessed'));
+                }
+                // T2I Adapters require images have dimensions that are multiples of 64 (SD1.5) or 32 (SDXL)
+                if (l.controlAdapter.type === 't2i_adapter') {
+                  const multiple = model?.base === 'sdxl' ? 32 : 64;
+                  if (size.width % multiple !== 0 || size.height % multiple !== 0) {
+                    problems.push(i18n.t('parameters.invoke.layer.t2iAdapterIncompatibleDimensions', { multiple }));
+                  }
+                }
               }
-            }
 
-            if (problems.length) {
-              const content = upperFirst(problems.join(', '));
-              reasons.push({ prefix, content });
-            }
-          });
-
-        canvas.ipAdapters.entities
-          .filter((entity) => entity.isEnabled)
-          .forEach((entity, i) => {
-            const layerLiteral = i18n.t('controlLayers.layers_one');
-            const layerNumber = i + 1;
-            const layerType = i18n.t(LAYER_TYPE_TO_TKEY[entity.type]);
-            const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
-            const problems: string[] = [];
-
-            // Must have model
-            if (!entity.ipAdapter.model) {
-              problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoModelSelected'));
-            }
-            // Model base must match
-            if (entity.ipAdapter.model?.base !== model?.base) {
-              problems.push(i18n.t('parameters.invoke.layer.ipAdapterIncompatibleBaseModel'));
-            }
-            // Must have an image
-            if (!entity.ipAdapter.image) {
-              problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoImageSelected'));
-            }
-
-            if (problems.length) {
-              const content = upperFirst(problems.join(', '));
-              reasons.push({ prefix, content });
-            }
-          });
-
-        canvas.regions.entities
-          .filter((entity) => entity.isEnabled)
-          .forEach((entity, i) => {
-            const layerLiteral = i18n.t('controlLayers.layers_one');
-            const layerNumber = i + 1;
-            const layerType = i18n.t(LAYER_TYPE_TO_TKEY[entity.type]);
-            const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
-            const problems: string[] = [];
-            // Must have a region
-            if (entity.objects.length === 0) {
-              problems.push(i18n.t('parameters.invoke.layer.rgNoRegion'));
-            }
-            // Must have at least 1 prompt or IP Adapter
-            if (entity.positivePrompt === null && entity.negativePrompt === null && entity.ipAdapters.length === 0) {
-              problems.push(i18n.t('parameters.invoke.layer.rgNoPromptsOrIPAdapters'));
-            }
-            entity.ipAdapters.forEach((ipAdapter) => {
-              // Must have model
-              if (!ipAdapter.model) {
-                problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoModelSelected'));
+              if (l.type === 'ip_adapter_layer') {
+                // Must have model
+                if (!l.ipAdapter.model) {
+                  problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoModelSelected'));
+                }
+                // Model base must match
+                if (l.ipAdapter.model?.base !== model?.base) {
+                  problems.push(i18n.t('parameters.invoke.layer.ipAdapterIncompatibleBaseModel'));
+                }
+                // Must have an image
+                if (!l.ipAdapter.image) {
+                  problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoImageSelected'));
+                }
               }
-              // Model base must match
-              if (ipAdapter.model?.base !== model?.base) {
-                problems.push(i18n.t('parameters.invoke.layer.ipAdapterIncompatibleBaseModel'));
+
+              if (l.type === 'initial_image_layer') {
+                // Must have an image
+                if (!l.image) {
+                  problems.push(i18n.t('parameters.invoke.layer.initialImageNoImageSelected'));
+                }
               }
-              // Must have an image
-              if (!ipAdapter.image) {
-                problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoImageSelected'));
+
+              if (l.type === 'regional_guidance_layer') {
+                // Must have a region
+                if (l.maskObjects.length === 0) {
+                  problems.push(i18n.t('parameters.invoke.layer.rgNoRegion'));
+                }
+                // Must have at least 1 prompt or IP Adapter
+                if (l.positivePrompt === null && l.negativePrompt === null && l.ipAdapters.length === 0) {
+                  problems.push(i18n.t('parameters.invoke.layer.rgNoPromptsOrIPAdapters'));
+                }
+                l.ipAdapters.forEach((ipAdapter) => {
+                  // Must have model
+                  if (!ipAdapter.model) {
+                    problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoModelSelected'));
+                  }
+                  // Model base must match
+                  if (ipAdapter.model?.base !== model?.base) {
+                    problems.push(i18n.t('parameters.invoke.layer.ipAdapterIncompatibleBaseModel'));
+                  }
+                  // Must have an image
+                  if (!ipAdapter.image) {
+                    problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoImageSelected'));
+                  }
+                });
+              }
+
+              if (problems.length) {
+                const content = upperFirst(problems.join(', '));
+                reasons.push({ prefix, content });
               }
             });
+        } else if (activeTabName === 'upscaling') {
+          if (!upscale.upscaleInitialImage) {
+            reasons.push({ content: i18n.t('upscaling.missingUpscaleInitialImage') });
+          } else if (config.maxUpscaleDimension) {
+            const { width, height } = upscale.upscaleInitialImage;
+            const { scale } = upscale;
 
-            if (problems.length) {
-              const content = upperFirst(problems.join(', '));
-              reasons.push({ prefix, content });
+            const maxPixels = config.maxUpscaleDimension ** 2;
+            const upscaledPixels = width * scale * height * scale;
+
+            if (upscaledPixels > maxPixels) {
+              reasons.push({ content: i18n.t('upscaling.exceedsMaxSize') });
             }
-          });
+          }
+          if (!upscale.upscaleModel) {
+            reasons.push({ content: i18n.t('upscaling.missingUpscaleModel') });
+          }
+          if (!upscale.tileControlnetModel) {
+            reasons.push({ content: i18n.t('upscaling.missingTileControlNetModel') });
+          }
+        } else {
+          // Handling for all other tabs
+          selectControlAdapterAll(controlAdapters)
+            .filter((ca) => ca.isEnabled)
+            .forEach((ca, i) => {
+              if (!ca.isEnabled) {
+                return;
+              }
 
-        canvas.rasterLayers.entities
-          .filter((entity) => entity.isEnabled)
-          .forEach((entity, i) => {
-            const layerLiteral = i18n.t('controlLayers.layers_one');
-            const layerNumber = i + 1;
-            const layerType = i18n.t(LAYER_TYPE_TO_TKEY[entity.type]);
-            const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
-            const problems: string[] = [];
+              if (!ca.model) {
+                reasons.push({ content: i18n.t('parameters.invoke.noModelForControlAdapter', { number: i + 1 }) });
+              } else if (ca.model.base !== model?.base) {
+                // This should never happen, just a sanity check
+                reasons.push({
+                  content: i18n.t('parameters.invoke.incompatibleBaseModelForControlAdapter', { number: i + 1 }),
+                });
+              }
 
-            if (problems.length) {
-              const content = upperFirst(problems.join(', '));
-              reasons.push({ prefix, content });
-            }
-          });
+              if (
+                !ca.controlImage ||
+                (isControlNetOrT2IAdapter(ca) && !ca.processedControlImage && ca.processorType !== 'none')
+              ) {
+                reasons.push({
+                  content: i18n.t('parameters.invoke.noControlImageForControlAdapter', { number: i + 1 }),
+                });
+              }
+            });
+        }
       }
 
       return { isReady: !reasons.length, reasons };
@@ -242,8 +265,7 @@ const createSelector = (templates: Templates, isConnected: boolean) =>
 
 export const useIsReadyToEnqueue = () => {
   const templates = useStore($templates);
-  const isConnected = useStore($isConnected);
-  const selector = useMemo(() => createSelector(templates, isConnected), [templates, isConnected]);
+  const selector = useMemo(() => createSelector(templates), [templates]);
   const value = useAppSelector(selector);
   return value;
 };

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

@@ -0,0 +1,35 @@
+// https://stackoverflow.com/a/73731908
+import { useCallback, useEffect, useState } from 'react';
+
+type UseSingleAndDoubleClickOptions = {
+  onSingleClick: () => void;
+  onDoubleClick: () => void;
+  latency?: number;
+};
+
+export function useSingleAndDoubleClick({
+  onSingleClick,
+  onDoubleClick,
+  latency = 250,
+}: UseSingleAndDoubleClickOptions): () => void {
+  const [click, setClick] = useState(0);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (click === 1) {
+        onSingleClick();
+      }
+      setClick(0);
+    }, latency);
+
+    if (click === 2) {
+      onDoubleClick();
+    }
+
+    return () => clearTimeout(timer);
+  }, [click, onDoubleClick, latency, onSingleClick]);
+
+  const onClick = useCallback(() => setClick((prev) => prev + 1), []);
+
+  return onClick;
+}

invokeai/frontend/web/src/common/types.ts

@@ -1,4 +1,5 @@
-type SerializableValue = string | number | boolean | null | undefined | SerializableValue[] | SerializableObject;
-export type SerializableObject = {
-  [k: string | number]: SerializableValue;
-};
+type JSONValue = string | number | boolean | null | JSONValue[] | { [key: string]: JSONValue };
+
+export interface JSONObject {
+  [k: string]: JSONValue;
+}

invokeai/frontend/web/src/common/util/SyncableMap/SyncableMap.test.ts

@@ -1,115 +0,0 @@
-import { describe, expect, it, vi } from 'vitest';
-
-import { SyncableMap } from './SyncableMap';
-
-describe('SyncableMap', () => {
-  it('should initialize with entries', () => {
-    const initialEntries = [
-      ['key1', 'value1'],
-      ['key2', 'value2'],
-    ] as const;
-    const map = new SyncableMap(initialEntries);
-    expect(map.size).toBe(2);
-    expect(map.get('key1')).toBe('value1');
-    expect(map.get('key2')).toBe('value2');
-  });
-
-  it('should notify subscribers when a key is set', () => {
-    const map = new SyncableMap<string, string>();
-    const subscriber = vi.fn();
-    map.subscribe(subscriber);
-
-    map.set('key1', 'value1');
-
-    expect(subscriber).toHaveBeenCalledTimes(1);
-    expect(map.get('key1')).toBe('value1');
-  });
-
-  it('should notify subscribers when a key is deleted', () => {
-    const map = new SyncableMap<string, string>([['key1', 'value1']]);
-    const subscriber = vi.fn();
-    map.subscribe(subscriber);
-
-    map.delete('key1');
-
-    expect(subscriber).toHaveBeenCalledTimes(1);
-    expect(map.get('key1')).toBeUndefined();
-  });
-
-  it('should notify subscribers when the map is cleared', () => {
-    const map = new SyncableMap<string, string>([
-      ['key1', 'value1'],
-      ['key2', 'value2'],
-    ]);
-    const subscriber = vi.fn();
-    map.subscribe(subscriber);
-
-    map.clear();
-
-    expect(subscriber).toHaveBeenCalledTimes(1);
-    expect(map.size).toBe(0);
-  });
-
-  it('should not notify unsubscribed callbacks', () => {
-    const map = new SyncableMap<string, string>();
-    const subscriber = vi.fn();
-    const unsubscribe = map.subscribe(subscriber);
-
-    unsubscribe();
-
-    map.set('key1', 'value1');
-
-    expect(subscriber).not.toHaveBeenCalled();
-  });
-
-  it('should return a snapshot of the current state', () => {
-    const map = new SyncableMap<string, string>([['key1', 'value1']]);
-
-    const snapshot = map.getSnapshot();
-
-    expect(snapshot.size).toBe(1);
-    expect(snapshot.get('key1')).toBe('value1');
-  });
-
-  it('should return the same snapshot if there were no changes', () => {
-    const map = new SyncableMap<string, string>([['key1', 'value1']]);
-
-    const firstSnapshot = map.getSnapshot();
-    const secondSnapshot = map.getSnapshot();
-
-    expect(firstSnapshot).toBe(secondSnapshot);
-  });
-
-  it('should return a new snapshot if changes were made', () => {
-    const map = new SyncableMap<string, string>([['key1', 'value1']]);
-
-    const firstSnapshot = map.getSnapshot();
-    map.set('key2', 'value2');
-    const secondSnapshot = map.getSnapshot();
-
-    expect(firstSnapshot).not.toBe(secondSnapshot);
-    expect(secondSnapshot.size).toBe(2);
-  });
-
-  it('should consider different snapshots unequal', () => {
-    const map = new SyncableMap<string, string>([['key1', 'value1']]);
-
-    const firstSnapshot = map.getSnapshot();
-    map.set('key2', 'value2');
-    const secondSnapshot = map.getSnapshot();
-
-    expect(map['areSnapshotsEqual'](firstSnapshot, secondSnapshot)).toBe(false);
-  });
-
-  it('should consider identical snapshots equal', () => {
-    const map = new SyncableMap<string, string>([
-      ['key1', 'value1'],
-      ['key2', 'value2'],
-    ]);
-
-    const firstSnapshot = map.getSnapshot();
-    const secondSnapshot = map.getSnapshot();
-
-    expect(map['areSnapshotsEqual'](firstSnapshot, secondSnapshot)).toBe(true);
-  });
-});

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

@@ -1,86 +0,0 @@
-/**
- * A Map that allows for subscribing to changes and getting a snapshot of the current state.
- *
- * It can be used with the `useSyncExternalStore` hook to sync the state of the map with a React component.
- *
- * Reactivity is shallow, so changes to nested objects will not trigger a re-render.
- */
-export class SyncableMap<K, V> extends Map<K, V> {
-  private subscriptions = new Set<() => void>();
-  private lastSnapshot: Map<K, V> | null = null;
-
-  constructor(entries?: readonly (readonly [K, V])[] | null) {
-    super(entries);
-  }
-
-  set = (key: K, value: V): this => {
-    super.set(key, value);
-    this.notifySubscribers();
-    return this;
-  };
-
-  delete = (key: K): boolean => {
-    const result = super.delete(key);
-    this.notifySubscribers();
-    return result;
-  };
-
-  clear = (): void => {
-    super.clear();
-    this.notifySubscribers();
-  };
-
-  /**
-   * Notify all subscribers that the map has changed.
-   */
-  private notifySubscribers = () => {
-    for (const callback of this.subscriptions) {
-      callback();
-    }
-  };
-
-  /**
-   * Subscribe to changes to the map.
-   * @param callback A function to call when the map changes
-   * @returns A function to unsubscribe from changes
-   */
-  subscribe = (callback: () => void): (() => void) => {
-    this.subscriptions.add(callback);
-    return () => {
-      this.subscriptions.delete(callback);
-    };
-  };
-
-  /**
-   * Get a snapshot of the current state of the map.
-   * @returns A snapshot of the current state of the map
-   */
-  getSnapshot = (): Map<K, V> => {
-    const currentSnapshot = new Map(this);
-    if (!this.lastSnapshot || !this.areSnapshotsEqual(this.lastSnapshot, currentSnapshot)) {
-      this.lastSnapshot = currentSnapshot;
-    }
-
-    return this.lastSnapshot;
-  };
-
-  /**
-   * Compare two snapshots to determine if they are equal.
-   * @param snapshotA The first snapshot to compare
-   * @param snapshotB The second snapshot to compare
-   * @returns Whether the two snapshots are equal
-   */
-  private areSnapshotsEqual = (snapshotA: Map<K, V>, snapshotB: Map<K, V>): boolean => {
-    if (snapshotA.size !== snapshotB.size) {
-      return false;
-    }
-
-    for (const [key, value] of snapshotA) {
-      if (!Object.is(value, snapshotB.get(key))) {
-        return false;
-      }
-    }
-
-    return true;
-  };
-}

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

@@ -0,0 +1,28 @@
+export const getImageDataTransparency = (pixels: Uint8ClampedArray) => {
+  let isFullyTransparent = true;
+  let isPartiallyTransparent = false;
+  const len = pixels.length;
+  let i = 3;
+  for (i; i < len; i += 4) {
+    if (pixels[i] === 255) {
+      isFullyTransparent = false;
+    } else {
+      isPartiallyTransparent = true;
+    }
+    if (!isFullyTransparent && isPartiallyTransparent) {
+      return { isFullyTransparent, isPartiallyTransparent };
+    }
+  }
+  return { isFullyTransparent, isPartiallyTransparent };
+};
+
+export const areAnyPixelsBlack = (pixels: Uint8ClampedArray) => {
+  const len = pixels.length;
+  let i = 0;
+  for (i; i < len; ) {
+    if (pixels[i++] === 0 && pixels[i++] === 0 && pixels[i++] === 0 && pixels[i++] === 255) {
+      return true;
+    }
+  }
+  return false;
+};

invokeai/frontend/web/src/common/util/arrayUtils.test.ts

@@ -1,170 +1,85 @@
-import { moveOneToEnd, moveOneToStart, moveToEnd, moveToStart } from 'common/util/arrayUtils';
+import { moveBackward, moveForward, moveToBack, moveToFront } from 'common/util/arrayUtils';
 import { describe, expect, it } from 'vitest';
 
 describe('Array Manipulation Functions', () => {
   const originalArray = ['a', 'b', 'c', 'd'];
-
-  describe('moveOneToEnd', () => {
-    describe('with callback', () => {
-      it('should move an item forward by one position', () => {
-        const array = [...originalArray];
-        const result = moveOneToEnd(array, (item) => item === 'b');
-        expect(result).toEqual(['a', 'c', 'b', 'd']);
-      });
-
-      it('should do nothing if the item is at the end', () => {
-        const array = [...originalArray];
-        const result = moveOneToEnd(array, (item) => item === 'd');
-        expect(result).toEqual(['a', 'b', 'c', 'd']);
-      });
-
-      it("should leave the array unchanged if the item isn't in the array", () => {
-        const array = [...originalArray];
-        const result = moveOneToEnd(array, (item) => item === 'z');
-        expect(result).toEqual(originalArray);
-      });
+  describe('moveForwardOne', () => {
+    it('should move an item forward by one position', () => {
+      const array = [...originalArray];
+      const result = moveForward(array, (item) => item === 'b');
+      expect(result).toEqual(['a', 'c', 'b', 'd']);
     });
-    describe('with item', () => {
-      it('should move an item forward by one position', () => {
-        const array = [...originalArray];
-        const result = moveOneToEnd(array, (item) => item === 'b');
-        expect(result).toEqual(['a', 'c', 'b', 'd']);
-      });
 
-      it('should do nothing if the item is at the end', () => {
-        const array = [...originalArray];
-        const result = moveOneToEnd(array, (item) => item === 'd');
-        expect(result).toEqual(['a', 'b', 'c', 'd']);
-      });
+    it('should do nothing if the item is at the end', () => {
+      const array = [...originalArray];
+      const result = moveForward(array, (item) => item === 'd');
+      expect(result).toEqual(['a', 'b', 'c', 'd']);
+    });
 
-      it("should leave the array unchanged if the item isn't in the array", () => {
-        const array = [...originalArray];
-        const result = moveOneToEnd(array, (item) => item === 'z');
-        expect(result).toEqual(originalArray);
-      });
+    it("should leave the array unchanged if the item isn't in the array", () => {
+      const array = [...originalArray];
+      const result = moveForward(array, (item) => item === 'z');
+      expect(result).toEqual(originalArray);
     });
   });
 
-  describe('moveToStart', () => {
-    describe('with callback', () => {
-      it('should move an item to the front', () => {
-        const array = [...originalArray];
-        const result = moveToStart(array, (item) => item === 'c');
-        expect(result).toEqual(['c', 'a', 'b', 'd']);
-      });
-
-      it('should do nothing if the item is already at the front', () => {
-        const array = [...originalArray];
-        const result = moveToStart(array, (item) => item === 'a');
-        expect(result).toEqual(['a', 'b', 'c', 'd']);
-      });
-
-      it("should leave the array unchanged if the item isn't in the array", () => {
-        const array = [...originalArray];
-        const result = moveToStart(array, (item) => item === 'z');
-        expect(result).toEqual(originalArray);
-      });
+  describe('moveToFront', () => {
+    it('should move an item to the front', () => {
+      const array = [...originalArray];
+      const result = moveToFront(array, (item) => item === 'c');
+      expect(result).toEqual(['c', 'a', 'b', 'd']);
     });
-    describe('with item', () => {
-      it('should move an item to the front', () => {
-        const array = [...originalArray];
-        const result = moveToStart(array, 'c');
-        expect(result).toEqual(['c', 'a', 'b', 'd']);
-      });
 
-      it('should do nothing if the item is already at the front', () => {
-        const array = [...originalArray];
-        const result = moveToStart(array, 'a');
-        expect(result).toEqual(['a', 'b', 'c', 'd']);
-      });
+    it('should do nothing if the item is already at the front', () => {
+      const array = [...originalArray];
+      const result = moveToFront(array, (item) => item === 'a');
+      expect(result).toEqual(['a', 'b', 'c', 'd']);
+    });
 
-      it("should leave the array unchanged if the item isn't in the array", () => {
-        const array = [...originalArray];
-        const result = moveToStart(array, 'z');
-        expect(result).toEqual(originalArray);
-      });
+    it("should leave the array unchanged if the item isn't in the array", () => {
+      const array = [...originalArray];
+      const result = moveToFront(array, (item) => item === 'z');
+      expect(result).toEqual(originalArray);
     });
   });
 
-  describe('moveOneToStart', () => {
-    describe('with callback', () => {
-      it('should move an item backward by one position', () => {
-        const array = [...originalArray];
-        const result = moveOneToStart(array, (item) => item === 'c');
-        expect(result).toEqual(['a', 'c', 'b', 'd']);
-      });
-
-      it('should do nothing if the item is at the beginning', () => {
-        const array = [...originalArray];
-        const result = moveOneToStart(array, (item) => item === 'a');
-        expect(result).toEqual(['a', 'b', 'c', 'd']);
-      });
-
-      it("should leave the array unchanged if the item isn't in the array", () => {
-        const array = [...originalArray];
-        const result = moveOneToStart(array, (item) => item === 'z');
-        expect(result).toEqual(originalArray);
-      });
+  describe('moveBackwardsOne', () => {
+    it('should move an item backward by one position', () => {
+      const array = [...originalArray];
+      const result = moveBackward(array, (item) => item === 'c');
+      expect(result).toEqual(['a', 'c', 'b', 'd']);
     });
-    describe('with item', () => {
-      it('should move an item backward by one position', () => {
-        const array = [...originalArray];
-        const result = moveOneToStart(array, 'c');
-        expect(result).toEqual(['a', 'c', 'b', 'd']);
-      });
 
-      it('should do nothing if the item is at the beginning', () => {
-        const array = [...originalArray];
-        const result = moveOneToStart(array, 'a');
-        expect(result).toEqual(['a', 'b', 'c', 'd']);
-      });
+    it('should do nothing if the item is at the beginning', () => {
+      const array = [...originalArray];
+      const result = moveBackward(array, (item) => item === 'a');
+      expect(result).toEqual(['a', 'b', 'c', 'd']);
+    });
 
-      it("should leave the array unchanged if the item isn't in the array", () => {
-        const array = [...originalArray];
-        const result = moveOneToStart(array, 'z');
-        expect(result).toEqual(originalArray);
-      });
+    it("should leave the array unchanged if the item isn't in the array", () => {
+      const array = [...originalArray];
+      const result = moveBackward(array, (item) => item === 'z');
+      expect(result).toEqual(originalArray);
     });
   });
 
-  describe('moveToEnd', () => {
-    describe('with callback', () => {
-      it('should move an item to the back', () => {
-        const array = [...originalArray];
-        const result = moveToEnd(array, (item) => item === 'b');
-        expect(result).toEqual(['a', 'c', 'd', 'b']);
-      });
-
-      it('should do nothing if the item is already at the back', () => {
-        const array = [...originalArray];
-        const result = moveToEnd(array, (item) => item === 'd');
-        expect(result).toEqual(['a', 'b', 'c', 'd']);
-      });
-
-      it("should leave the array unchanged if the item isn't in the array", () => {
-        const array = [...originalArray];
-        const result = moveToEnd(array, (item) => item === 'z');
-        expect(result).toEqual(originalArray);
-      });
+  describe('moveToBack', () => {
+    it('should move an item to the back', () => {
+      const array = [...originalArray];
+      const result = moveToBack(array, (item) => item === 'b');
+      expect(result).toEqual(['a', 'c', 'd', 'b']);
     });
-    describe('with item', () => {
-      it('should move an item to the back', () => {
-        const array = [...originalArray];
-        const result = moveToEnd(array, 'b');
-        expect(result).toEqual(['a', 'c', 'd', 'b']);
-      });
 
-      it('should do nothing if the item is already at the back', () => {
-        const array = [...originalArray];
-        const result = moveToEnd(array, 'd');
-        expect(result).toEqual(['a', 'b', 'c', 'd']);
-      });
+    it('should do nothing if the item is already at the back', () => {
+      const array = [...originalArray];
+      const result = moveToBack(array, (item) => item === 'd');
+      expect(result).toEqual(['a', 'b', 'c', 'd']);
+    });
 
-      it("should leave the array unchanged if the item isn't in the array", () => {
-        const array = [...originalArray];
-        const result = moveToEnd(array, 'z');
-        expect(result).toEqual(originalArray);
-      });
+    it("should leave the array unchanged if the item isn't in the array", () => {
+      const array = [...originalArray];
+      const result = moveToBack(array, (item) => item === 'z');
+      expect(result).toEqual(originalArray);
     });
   });
 });

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

@@ -1,45 +1,37 @@
-export function moveToStart<T>(array: T[], selectItemCallback: (item: T) => boolean): T[];
-export function moveToStart<T>(array: T[], item: T): T[];
-export function moveToStart<T>(array: T[], arg1: T | ((item: T) => boolean)): T[] {
-  const index = arg1 instanceof Function ? array.findIndex(arg1) : array.indexOf(arg1);
+export const moveForward = <T>(array: T[], callback: (item: T) => boolean): T[] => {
+  const index = array.findIndex(callback);
+  if (index >= 0 && index < array.length - 1) {
+    //@ts-expect-error - These indicies are safe per the previous check
+    [array[index], array[index + 1]] = [array[index + 1], array[index]];
+  }
+  return array;
+};
+
+export const moveToFront = <T>(array: T[], callback: (item: T) => boolean): T[] => {
+  const index = array.findIndex(callback);
   if (index > 0) {
     const [item] = array.splice(index, 1);
     //@ts-expect-error - These indicies are safe per the previous check
     array.unshift(item);
   }
   return array;
-}
+};
 
-export function moveOneToStart<T>(array: T[], selectItemCallback: (item: T) => boolean): T[];
-export function moveOneToStart<T>(array: T[], item: T): T[];
-export function moveOneToStart<T>(array: T[], arg1: T | ((item: T) => boolean)): T[] {
-  const index = arg1 instanceof Function ? array.findIndex(arg1) : array.indexOf(arg1);
+export const moveBackward = <T>(array: T[], callback: (item: T) => boolean): T[] => {
+  const index = array.findIndex(callback);
   if (index > 0) {
     //@ts-expect-error - These indicies are safe per the previous check
     [array[index], array[index - 1]] = [array[index - 1], array[index]];
   }
   return array;
-}
+};
 
-export function moveToEnd<T>(array: T[], selectItemCallback: (item: T) => boolean): T[];
-export function moveToEnd<T>(array: T[], item: T): T[];
-export function moveToEnd<T>(array: T[], arg1: T | ((item: T) => boolean)): T[] {
-  const index = arg1 instanceof Function ? array.findIndex(arg1) : array.indexOf(arg1);
+export const moveToBack = <T>(array: T[], callback: (item: T) => boolean): T[] => {
+  const index = array.findIndex(callback);
   if (index >= 0 && index < array.length - 1) {
     const [item] = array.splice(index, 1);
     //@ts-expect-error - These indicies are safe per the previous check
     array.push(item);
   }
   return array;
-}
-
-export function moveOneToEnd<T>(array: T[], selectItemCallback: (item: T) => boolean): T[];
-export function moveOneToEnd<T>(array: T[], item: T): T[];
-export function moveOneToEnd<T>(array: T[], arg1: T | ((item: T) => boolean)): T[] {
-  const index = arg1 instanceof Function ? array.findIndex(arg1) : array.indexOf(arg1);
-  if (index >= 0 && index < array.length - 1) {
-    //@ts-expect-error - These indicies are safe per the previous check
-    [array[index], array[index + 1]] = [array[index + 1], array[index]];
-  }
-  return array;
-}
+};

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

@@ -1,4 +1,4 @@
-import type { RgbaColor, RgbColor } from 'react-colorful';
+import type { RgbaColor } from 'react-colorful';
 
 export function rgbaToHex(color: RgbaColor, alpha: boolean = false): string {
   const hex = ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
@@ -15,13 +15,3 @@ export function hexToRGBA(hex: string, alpha: number) {
   const b = parseInt(hex.substring(4, 6), 16);
   return { r, g, b, a: alpha };
 }
-
-export const rgbaColorToString = (color: RgbaColor): string => {
-  const { r, g, b, a } = color;
-  return `rgba(${r}, ${g}, ${b}, ${a})`;
-};
-
-export const rgbColorToString = (color: RgbColor): string => {
-  const { r, g, b } = color;
-  return `rgba(${r}, ${g}, ${b})`;
-};

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

@@ -7,7 +7,7 @@ import { $authToken } from 'app/store/nanostores/authToken';
  * @returns A function that takes a URL and returns a Promise that resolves with a Blob
  */
 
-export const convertImageUrlToBlob = (url: string) =>
+export const convertImageUrlToBlob = async (url: string) =>
   new Promise<Blob | null>((resolve, reject) => {
     const img = new Image();
     img.onload = () => {

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

@@ -0,0 +1,7 @@
+export const isInputElement = (el: HTMLElement) => {
+  return (
+    el.tagName.toLowerCase() === 'input' ||
+    el.tagName.toLowerCase() === 'textarea' ||
+    el.tagName.toLowerCase() === 'select'
+  );
+};

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

@@ -0,0 +1,23 @@
+type Base64AndCaption = {
+  base64: string;
+  caption: string;
+};
+
+const openBase64ImageInTab = (images: Base64AndCaption[]) => {
+  const w = window.open('');
+  if (!w) {
+    return;
+  }
+
+  images.forEach((i) => {
+    const image = new Image();
+    image.src = i.base64;
+
+    w.document.write(i.caption);
+    w.document.write('</br>');
+    w.document.write(image.outerHTML);
+    w.document.write('</br></br>');
+  });
+};
+
+export default openBase64ImageInTab;