add a new FAQ for converting safetensors

.github/workflows/python-checks.yml

@@ -62,7 +62,7 @@ jobs:
 
       - name: install ruff
         if: ${{ steps.changed-files.outputs.python_any_changed == 'true' || inputs.always_run == true }}
-        run: pip install ruff==0.6.0
+        run: pip install ruff
         shell: bash
 
       - name: ruff check

docker/README.md

@@ -1,22 +1,20 @@
 # Invoke in Docker
 
-First things first:
+- Ensure that Docker can use the GPU on your system
-
+- This documentation assumes Linux, but should work similarly under Windows with WSL2
-- Ensure that Docker can use your [NVIDIA][nvidia docker docs] or [AMD][amd docker docs] GPU.
-- This document assumes a Linux system, but should work similarly under Windows with WSL2.
 - We don't recommend running Invoke in Docker on macOS at this time. It works, but very slowly.
 
-## Quickstart
+## Quickstart :lightning:
 
-No `docker compose`, no persistence, single command, using the official images:
+No `docker compose`, no persistence, just a simple one-liner using the official images:
 
-**CUDA (NVIDIA GPU):**
+**CUDA:**
 
 ```bash
 docker run --runtime=nvidia --gpus=all --publish 9090:9090 ghcr.io/invoke-ai/invokeai
 ```
 
-**ROCm (AMD GPU):**
+**ROCm:**
 
 ```bash
 docker run --device /dev/kfd --device /dev/dri --publish 9090:9090 ghcr.io/invoke-ai/invokeai:main-rocm
@@ -24,20 +22,12 @@ docker run --device /dev/kfd --device /dev/dri --publish 9090:9090 ghcr.io/invok
 
 Open `http://localhost:9090` in your browser once the container finishes booting, install some models, and generate away!
 
-### Data persistence
+> [!TIP]
-
+> To persist your data (including downloaded models) outside of the container, add a `--volume/-v` flag to the above command, e.g.: `docker run --volume /some/local/path:/invokeai <...the rest of the command>`
-To persist your generated images and downloaded models outside of the container, add a `--volume/-v` flag to the above command, e.g.:
-
-```bash
-docker run --volume /some/local/path:/invokeai {...etc...}
-```
-
-`/some/local/path/invokeai` will contain all your data.
-It can *usually* be reused between different installs of Invoke. Tread with caution and read the release notes!
 
 ## Customize the container
 
-The included `run.sh` script is a convenience wrapper around `docker compose`. It can be helpful for passing additional build arguments to `docker compose`. Alternatively, the familiar `docker compose` commands work just as well.
+We ship the `run.sh` script, which is a convenient wrapper around `docker compose` for cases where custom image build args are needed. Alternatively, the familiar `docker compose` commands work just as well.
 
 ```bash
 cd docker
@@ -48,14 +38,11 @@ cp .env.sample .env
 
 It will take a few minutes to build the image the first time. Once the application starts up, open `http://localhost:9090` in your browser to invoke!
 
->[!TIP]
->When using the `run.sh` script, the container will continue running after Ctrl+C. To shut it down, use the `docker compose down` command.
-
 ## Docker setup in detail
 
 #### Linux
 
-1. Ensure buildkit is enabled in the Docker daemon settings (`/etc/docker/daemon.json`)
+1. Ensure builkit is enabled in the Docker daemon settings (`/etc/docker/daemon.json`)
 2. Install the `docker compose` plugin using your package manager, or follow a [tutorial](https://docs.docker.com/compose/install/linux/#install-using-the-repository).
     - The deprecated `docker-compose` (hyphenated) CLI probably won't work. Update to a recent version.
 3. Ensure docker daemon is able to access the GPU.
@@ -111,7 +98,25 @@ GPU_DRIVER=cuda
 
 Any environment variables supported by InvokeAI can be set here. See the [Configuration docs](https://invoke-ai.github.io/InvokeAI/features/CONFIGURATION/) for further detail.
 
----
+## Even More Customizing!
 
-[nvidia docker docs]: https://docs.nvidia.com/datacenter/cloud-native/container-toolkit/latest/install-guide.html
+See the `docker-compose.yml` file. The `command` instruction can be uncommented and used to run arbitrary startup commands. Some examples below.
-[amd docker docs]: https://rocm.docs.amd.com/projects/install-on-linux/en/latest/how-to/docker.html
+
+### Reconfigure the runtime directory
+
+Can be used to download additional models from the supported model list
+
+In conjunction with `INVOKEAI_ROOT` can be also used to initialize a runtime directory
+
+```yaml
+command:
+  - invokeai-configure
+  - --yes
+```
+
+Or install models:
+
+```yaml
+command:
+  - invokeai-model-install
+```

docs/help/FAQ.md

@@ -196,6 +196,22 @@ tips to reduce the problem:
     === "12GB VRAM GPU"
 
         This should be sufficient to generate larger images up to about 1280x1280.
+		
+## Checkpoint Models Load Slowly or Use Too Much RAM
+
+The difference between diffusers models (a folder containing multiple
+subfolders) and checkpoint models (a file ending with .safetensors or
+.ckpt) is that InvokeAI is able to load diffusers models into memory
+incrementally, while checkpoint models must be loaded all at
+once. With very large models, or systems with limited RAM, you may
+experience slowdowns and other memory-related issues when loading
+checkpoint models.
+
+To solve this, go to the Model Manager tab (the cube), select the
+checkpoint model that's giving you trouble, and press the "Convert"
+button in the upper right of your browser window. This will conver the
+checkpoint into a diffusers model, after which loading should be
+faster and less memory-intensive.
 
 ## Memory Leak (Linux)
 

installer/templates/invoke.sh.in

@@ -17,7 +17,7 @@
 set -eu
 
 # Ensure we're in the correct folder in case user's CWD is somewhere else
-scriptdir=$(dirname $(readlink -f "$0"))
+scriptdir=$(dirname "$0")
 cd "$scriptdir"
 
 . .venv/bin/activate

invokeai/app/api/dependencies.py

@@ -1,6 +1,5 @@
 # Copyright (c) 2022 Kyle Schouviller (https://github.com/kyle0654)
 
-import asyncio
 from logging import Logger
 
 import torch
@@ -32,8 +31,6 @@ from invokeai.app.services.session_processor.session_processor_default import (
 )
 from invokeai.app.services.session_queue.session_queue_sqlite import SqliteSessionQueue
 from invokeai.app.services.shared.sqlite.sqlite_util import init_db
-from invokeai.app.services.style_preset_images.style_preset_images_disk import StylePresetImageFileStorageDisk
-from invokeai.app.services.style_preset_records.style_preset_records_sqlite import SqliteStylePresetRecordsStorage
 from invokeai.app.services.urls.urls_default import LocalUrlService
 from invokeai.app.services.workflow_records.workflow_records_sqlite import SqliteWorkflowRecordsStorage
 from invokeai.backend.stable_diffusion.diffusion.conditioning_data import ConditioningFieldData
@@ -66,12 +63,7 @@ class ApiDependencies:
     invoker: Invoker
 
     @staticmethod
-    def initialize(
+    def initialize(config: InvokeAIAppConfig, event_handler_id: int, logger: Logger = logger) -> None:
-        config: InvokeAIAppConfig,
-        event_handler_id: int,
-        loop: asyncio.AbstractEventLoop,
-        logger: Logger = logger,
-    ) -> None:
         logger.info(f"InvokeAI version {__version__}")
         logger.info(f"Root directory = {str(config.root_path)}")
 
@@ -82,7 +74,6 @@ class ApiDependencies:
         image_files = DiskImageFileStorage(f"{output_folder}/images")
 
         model_images_folder = config.models_path
-        style_presets_folder = config.style_presets_path
 
         db = init_db(config=config, logger=logger, image_files=image_files)
 
@@ -93,7 +84,7 @@ class ApiDependencies:
         board_images = BoardImagesService()
         board_records = SqliteBoardRecordStorage(db=db)
         boards = BoardService()
-        events = FastAPIEventService(event_handler_id, loop=loop)
+        events = FastAPIEventService(event_handler_id)
         bulk_download = BulkDownloadService()
         image_records = SqliteImageRecordStorage(db=db)
         images = ImageService()
@@ -118,8 +109,6 @@ class ApiDependencies:
         session_queue = SqliteSessionQueue(db=db)
         urls = LocalUrlService()
         workflow_records = SqliteWorkflowRecordsStorage(db=db)
-        style_preset_records = SqliteStylePresetRecordsStorage(db=db)
-        style_preset_image_files = StylePresetImageFileStorageDisk(style_presets_folder / "images")
 
         services = InvocationServices(
             board_image_records=board_image_records,
@@ -145,8 +134,6 @@ class ApiDependencies:
             workflow_records=workflow_records,
             tensors=tensors,
             conditioning=conditioning,
-            style_preset_records=style_preset_records,
-            style_preset_image_files=style_preset_image_files,
         )
 
         ApiDependencies.invoker = Invoker(services)

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/api/routers/style_presets.py

@@ -1,274 +0,0 @@
-import csv
-import io
-import json
-import traceback
-from typing import Optional
-
-import pydantic
-from fastapi import APIRouter, File, Form, HTTPException, Path, Response, UploadFile
-from fastapi.responses import FileResponse
-from PIL import Image
-from pydantic import BaseModel, Field
-
-from invokeai.app.api.dependencies import ApiDependencies
-from invokeai.app.api.routers.model_manager import IMAGE_MAX_AGE
-from invokeai.app.services.style_preset_images.style_preset_images_common import StylePresetImageFileNotFoundException
-from invokeai.app.services.style_preset_records.style_preset_records_common import (
-    InvalidPresetImportDataError,
-    PresetData,
-    PresetType,
-    StylePresetChanges,
-    StylePresetNotFoundError,
-    StylePresetRecordWithImage,
-    StylePresetWithoutId,
-    UnsupportedFileTypeError,
-    parse_presets_from_file,
-)
-
-
-class StylePresetFormData(BaseModel):
-    name: str = Field(description="Preset name")
-    positive_prompt: str = Field(description="Positive prompt")
-    negative_prompt: str = Field(description="Negative prompt")
-    type: PresetType = Field(description="Preset type")
-
-
-style_presets_router = APIRouter(prefix="/v1/style_presets", tags=["style_presets"])
-
-
-@style_presets_router.get(
-    "/i/{style_preset_id}",
-    operation_id="get_style_preset",
-    responses={
-        200: {"model": StylePresetRecordWithImage},
-    },
-)
-async def get_style_preset(
-    style_preset_id: str = Path(description="The style preset to get"),
-) -> StylePresetRecordWithImage:
-    """Gets a style preset"""
-    try:
-        image = ApiDependencies.invoker.services.style_preset_image_files.get_url(style_preset_id)
-        style_preset = ApiDependencies.invoker.services.style_preset_records.get(style_preset_id)
-        return StylePresetRecordWithImage(image=image, **style_preset.model_dump())
-    except StylePresetNotFoundError:
-        raise HTTPException(status_code=404, detail="Style preset not found")
-
-
-@style_presets_router.patch(
-    "/i/{style_preset_id}",
-    operation_id="update_style_preset",
-    responses={
-        200: {"model": StylePresetRecordWithImage},
-    },
-)
-async def update_style_preset(
-    image: Optional[UploadFile] = File(description="The image file to upload", default=None),
-    style_preset_id: str = Path(description="The id of the style preset to update"),
-    data: str = Form(description="The data of the style preset to update"),
-) -> StylePresetRecordWithImage:
-    """Updates a style preset"""
-    if image is not None:
-        if not image.content_type or not image.content_type.startswith("image"):
-            raise HTTPException(status_code=415, detail="Not an image")
-
-        contents = await image.read()
-        try:
-            pil_image = Image.open(io.BytesIO(contents))
-
-        except Exception:
-            ApiDependencies.invoker.services.logger.error(traceback.format_exc())
-            raise HTTPException(status_code=415, detail="Failed to read image")
-
-        try:
-            ApiDependencies.invoker.services.style_preset_image_files.save(style_preset_id, pil_image)
-        except ValueError as e:
-            raise HTTPException(status_code=409, detail=str(e))
-    else:
-        try:
-            ApiDependencies.invoker.services.style_preset_image_files.delete(style_preset_id)
-        except StylePresetImageFileNotFoundException:
-            pass
-
-    try:
-        parsed_data = json.loads(data)
-        validated_data = StylePresetFormData(**parsed_data)
-
-        name = validated_data.name
-        type = validated_data.type
-        positive_prompt = validated_data.positive_prompt
-        negative_prompt = validated_data.negative_prompt
-
-    except pydantic.ValidationError:
-        raise HTTPException(status_code=400, detail="Invalid preset data")
-
-    preset_data = PresetData(positive_prompt=positive_prompt, negative_prompt=negative_prompt)
-    changes = StylePresetChanges(name=name, preset_data=preset_data, type=type)
-
-    style_preset_image = ApiDependencies.invoker.services.style_preset_image_files.get_url(style_preset_id)
-    style_preset = ApiDependencies.invoker.services.style_preset_records.update(
-        style_preset_id=style_preset_id, changes=changes
-    )
-    return StylePresetRecordWithImage(image=style_preset_image, **style_preset.model_dump())
-
-
-@style_presets_router.delete(
-    "/i/{style_preset_id}",
-    operation_id="delete_style_preset",
-)
-async def delete_style_preset(
-    style_preset_id: str = Path(description="The style preset to delete"),
-) -> None:
-    """Deletes a style preset"""
-    try:
-        ApiDependencies.invoker.services.style_preset_image_files.delete(style_preset_id)
-    except StylePresetImageFileNotFoundException:
-        pass
-
-    ApiDependencies.invoker.services.style_preset_records.delete(style_preset_id)
-
-
-@style_presets_router.post(
-    "/",
-    operation_id="create_style_preset",
-    responses={
-        200: {"model": StylePresetRecordWithImage},
-    },
-)
-async def create_style_preset(
-    image: Optional[UploadFile] = File(description="The image file to upload", default=None),
-    data: str = Form(description="The data of the style preset to create"),
-) -> StylePresetRecordWithImage:
-    """Creates a style preset"""
-
-    try:
-        parsed_data = json.loads(data)
-        validated_data = StylePresetFormData(**parsed_data)
-
-        name = validated_data.name
-        type = validated_data.type
-        positive_prompt = validated_data.positive_prompt
-        negative_prompt = validated_data.negative_prompt
-
-    except pydantic.ValidationError:
-        raise HTTPException(status_code=400, detail="Invalid preset data")
-
-    preset_data = PresetData(positive_prompt=positive_prompt, negative_prompt=negative_prompt)
-    style_preset = StylePresetWithoutId(name=name, preset_data=preset_data, type=type)
-    new_style_preset = ApiDependencies.invoker.services.style_preset_records.create(style_preset=style_preset)
-
-    if image is not None:
-        if not image.content_type or not image.content_type.startswith("image"):
-            raise HTTPException(status_code=415, detail="Not an image")
-
-        contents = await image.read()
-        try:
-            pil_image = Image.open(io.BytesIO(contents))
-
-        except Exception:
-            ApiDependencies.invoker.services.logger.error(traceback.format_exc())
-            raise HTTPException(status_code=415, detail="Failed to read image")
-
-        try:
-            ApiDependencies.invoker.services.style_preset_image_files.save(new_style_preset.id, pil_image)
-        except ValueError as e:
-            raise HTTPException(status_code=409, detail=str(e))
-
-    preset_image = ApiDependencies.invoker.services.style_preset_image_files.get_url(new_style_preset.id)
-    return StylePresetRecordWithImage(image=preset_image, **new_style_preset.model_dump())
-
-
-@style_presets_router.get(
-    "/",
-    operation_id="list_style_presets",
-    responses={
-        200: {"model": list[StylePresetRecordWithImage]},
-    },
-)
-async def list_style_presets() -> list[StylePresetRecordWithImage]:
-    """Gets a page of style presets"""
-    style_presets_with_image: list[StylePresetRecordWithImage] = []
-    style_presets = ApiDependencies.invoker.services.style_preset_records.get_many()
-    for preset in style_presets:
-        image = ApiDependencies.invoker.services.style_preset_image_files.get_url(preset.id)
-        style_preset_with_image = StylePresetRecordWithImage(image=image, **preset.model_dump())
-        style_presets_with_image.append(style_preset_with_image)
-
-    return style_presets_with_image
-
-
-@style_presets_router.get(
-    "/i/{style_preset_id}/image",
-    operation_id="get_style_preset_image",
-    responses={
-        200: {
-            "description": "The style preset image was fetched successfully",
-        },
-        400: {"description": "Bad request"},
-        404: {"description": "The style preset image could not be found"},
-    },
-    status_code=200,
-)
-async def get_style_preset_image(
-    style_preset_id: str = Path(description="The id of the style preset image to get"),
-) -> FileResponse:
-    """Gets an image file that previews the model"""
-
-    try:
-        path = ApiDependencies.invoker.services.style_preset_image_files.get_path(style_preset_id)
-
-        response = FileResponse(
-            path,
-            media_type="image/png",
-            filename=style_preset_id + ".png",
-            content_disposition_type="inline",
-        )
-        response.headers["Cache-Control"] = f"max-age={IMAGE_MAX_AGE}"
-        return response
-    except Exception:
-        raise HTTPException(status_code=404)
-
-
-@style_presets_router.get(
-    "/export",
-    operation_id="export_style_presets",
-    responses={200: {"content": {"text/csv": {}}, "description": "A CSV file with the requested data."}},
-    status_code=200,
-)
-async def export_style_presets():
-    # Create an in-memory stream to store the CSV data
-    output = io.StringIO()
-    writer = csv.writer(output)
-
-    # Write the header
-    writer.writerow(["name", "prompt", "negative_prompt"])
-
-    style_presets = ApiDependencies.invoker.services.style_preset_records.get_many(type=PresetType.User)
-
-    for preset in style_presets:
-        writer.writerow([preset.name, preset.preset_data.positive_prompt, preset.preset_data.negative_prompt])
-
-    csv_data = output.getvalue()
-    output.close()
-
-    return Response(
-        content=csv_data,
-        media_type="text/csv",
-        headers={"Content-Disposition": "attachment; filename=prompt_templates.csv"},
-    )
-
-
-@style_presets_router.post(
-    "/import",
-    operation_id="import_style_presets",
-)
-async def import_style_presets(file: UploadFile = File(description="The file to import")):
-    try:
-        style_presets = await parse_presets_from_file(file)
-        ApiDependencies.invoker.services.style_preset_records.create_many(style_presets)
-    except InvalidPresetImportDataError as e:
-        ApiDependencies.invoker.services.logger.error(traceback.format_exc())
-        raise HTTPException(status_code=400, detail=str(e))
-    except UnsupportedFileTypeError as e:
-        ApiDependencies.invoker.services.logger.error(traceback.format_exc())
-        raise HTTPException(status_code=415, detail=str(e))

invokeai/app/api_app.py

@@ -30,7 +30,6 @@ from invokeai.app.api.routers import (
     images,
     model_manager,
     session_queue,
-    style_presets,
     utilities,
     workflows,
 )
@@ -56,13 +55,11 @@ mimetypes.add_type("text/css", ".css")
 torch_device_name = TorchDevice.get_torch_device_name()
 logger.info(f"Using torch device: {torch_device_name}")
 
-loop = asyncio.new_event_loop()
-
 
 @asynccontextmanager
 async def lifespan(app: FastAPI):
     # Add startup event to load dependencies
-    ApiDependencies.initialize(config=app_config, event_handler_id=event_handler_id, loop=loop, logger=logger)
+    ApiDependencies.initialize(config=app_config, event_handler_id=event_handler_id, logger=logger)
     yield
     # Shut down threads
     ApiDependencies.shutdown()
@@ -109,7 +106,6 @@ app.include_router(board_images.board_images_router, prefix="/api")
 app.include_router(app_info.app_router, prefix="/api")
 app.include_router(session_queue.session_queue_router, prefix="/api")
 app.include_router(workflows.workflows_router, prefix="/api")
-app.include_router(style_presets.style_presets_router, prefix="/api")
 
 app.openapi = get_openapi_func(app)
 
@@ -188,6 +184,8 @@ def invoke_api() -> None:
 
     check_cudnn(logger)
 
+    # Start our own event loop for eventing usage
+    loop = asyncio.new_event_loop()
     config = uvicorn.Config(
         app=app,
         host=app_config.host,

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 (
+from invokeai.app.invocations.baseinvocation import BaseInvocation, Classification, invocation
-    BaseInvocation,
-    Classification,
-    invocation,
-    invocation_output,
-)
 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/config/config_default.py

@@ -91,7 +91,6 @@ class InvokeAIAppConfig(BaseSettings):
         db_dir: Path to InvokeAI databases directory.
         outputs_dir: Path to directory for outputs.
         custom_nodes_dir: Path to directory for custom nodes.
-        style_presets_dir: Path to directory for style presets.
         log_handlers: Log handler. Valid options are "console", "file=<path>", "syslog=path|address:host:port", "http=<url>".
         log_format: Log format. Use "plain" for text-only, "color" for colorized output, "legacy" for 2.3-style logging and "syslog" for syslog-style.<br>Valid values: `plain`, `color`, `syslog`, `legacy`
         log_level: Emit logging messages at this level or higher.<br>Valid values: `debug`, `info`, `warning`, `error`, `critical`
@@ -154,7 +153,6 @@ class InvokeAIAppConfig(BaseSettings):
     db_dir:                        Path = Field(default=Path("databases"),  description="Path to InvokeAI databases directory.")
     outputs_dir:                   Path = Field(default=Path("outputs"),    description="Path to directory for outputs.")
     custom_nodes_dir:              Path = Field(default=Path("nodes"),      description="Path to directory for custom nodes.")
-    style_presets_dir:      Path = Field(default=Path("style_presets"),      description="Path to directory for style presets.")
 
     # LOGGING
     log_handlers:             list[str] = Field(default=["console"],        description='Log handler. Valid options are "console", "file=<path>", "syslog=path|address:host:port", "http=<url>".')
@@ -302,11 +300,6 @@ class InvokeAIAppConfig(BaseSettings):
         """Path to the models directory, resolved to an absolute path.."""
         return self._resolve(self.models_dir)
 
-    @property
-    def style_presets_path(self) -> Path:
-        """Path to the style presets directory, resolved to an absolute path.."""
-        return self._resolve(self.style_presets_dir)
-
     @property
     def convert_cache_path(self) -> Path:
         """Path to the converted cache models directory, resolved to an absolute path.."""

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/events/events_fastapievents.py

@@ -1,44 +1,46 @@
+# Copyright (c) 2022 Kyle Schouviller (https://github.com/kyle0654)
+
 import asyncio
 import threading
+from queue import Empty, Queue
 
 from fastapi_events.dispatcher import dispatch
 
 from invokeai.app.services.events.events_base import EventServiceBase
-from invokeai.app.services.events.events_common import EventBase
+from invokeai.app.services.events.events_common import (
+    EventBase,
+)
 
 
 class FastAPIEventService(EventServiceBase):
-    def __init__(self, event_handler_id: int, loop: asyncio.AbstractEventLoop) -> None:
+    def __init__(self, event_handler_id: int) -> None:
         self.event_handler_id = event_handler_id
-        self._queue = asyncio.Queue[EventBase | None]()
+        self._queue = Queue[EventBase | None]()
         self._stop_event = threading.Event()
-        self._loop = loop
+        asyncio.create_task(self._dispatch_from_queue(stop_event=self._stop_event))
-
-        # We need to store a reference to the task so it doesn't get GC'd
-        # See: https://docs.python.org/3/library/asyncio-task.html#creating-tasks
-        self._background_tasks: set[asyncio.Task[None]] = set()
-        task = self._loop.create_task(self._dispatch_from_queue(stop_event=self._stop_event))
-        self._background_tasks.add(task)
-        task.add_done_callback(self._background_tasks.remove)
 
         super().__init__()
 
     def stop(self, *args, **kwargs):
         self._stop_event.set()
-        self._loop.call_soon_threadsafe(self._queue.put_nowait, None)
+        self._queue.put(None)
 
     def dispatch(self, event: EventBase) -> None:
-        self._loop.call_soon_threadsafe(self._queue.put_nowait, event)
+        self._queue.put(event)
 
     async def _dispatch_from_queue(self, stop_event: threading.Event):
         """Get events on from the queue and dispatch them, from the correct thread"""
         while not stop_event.is_set():
             try:
-                event = await self._queue.get()
+                event = self._queue.get(block=False)
                 if not event:  # Probably stopping
                     continue
                 # Leave the payloads as live pydantic models
                 dispatch(event, middleware_id=self.event_handler_id, payload_schema_dump=False)
 
+            except Empty:
+                await asyncio.sleep(0.1)
+                pass
+
             except asyncio.CancelledError as e:
                 raise e  # Raise a proper error

invokeai/app/services/invocation_services.py

@@ -4,8 +4,6 @@ from __future__ import annotations
 from typing import TYPE_CHECKING
 
 from invokeai.app.services.object_serializer.object_serializer_base import ObjectSerializerBase
-from invokeai.app.services.style_preset_images.style_preset_images_base import StylePresetImageFileStorageBase
-from invokeai.app.services.style_preset_records.style_preset_records_base import StylePresetRecordsStorageBase
 
 if TYPE_CHECKING:
     from logging import Logger
@@ -63,8 +61,6 @@ class InvocationServices:
         workflow_records: "WorkflowRecordsStorageBase",
         tensors: "ObjectSerializerBase[torch.Tensor]",
         conditioning: "ObjectSerializerBase[ConditioningFieldData]",
-        style_preset_records: "StylePresetRecordsStorageBase",
-        style_preset_image_files: "StylePresetImageFileStorageBase",
     ):
         self.board_images = board_images
         self.board_image_records = board_image_records
@@ -89,5 +85,3 @@ class InvocationServices:
         self.workflow_records = workflow_records
         self.tensors = tensors
         self.conditioning = conditioning
-        self.style_preset_records = style_preset_records
-        self.style_preset_image_files = style_preset_image_files

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)
+                INSERT INTO session_queue (queue_id, session, session_id, batch_id, field_values, priority, workflow)
-                VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+                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,
+                    queue_id
-                    origin
                 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

@@ -16,8 +16,6 @@ from invokeai.app.services.shared.sqlite_migrator.migrations.migration_10 import
 from invokeai.app.services.shared.sqlite_migrator.migrations.migration_11 import build_migration_11
 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
 
 
@@ -51,8 +49,6 @@ def init_db(config: InvokeAIAppConfig, logger: Logger, image_files: ImageFileSto
     migrator.register_migration(build_migration_11(app_config=config, logger=logger))
     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_14.py

@@ -1,61 +0,0 @@
-import sqlite3
-
-from invokeai.app.services.shared.sqlite_migrator.sqlite_migrator_common import Migration
-
-
-class Migration14Callback:
-    def __call__(self, cursor: sqlite3.Cursor) -> None:
-        self._create_style_presets(cursor)
-
-    def _create_style_presets(self, cursor: sqlite3.Cursor) -> None:
-        """Create the table used to store style presets."""
-        tables = [
-            """--sql
-            CREATE TABLE IF NOT EXISTS style_presets (
-                id TEXT NOT NULL PRIMARY KEY,
-                name TEXT NOT NULL,
-                preset_data TEXT NOT NULL,
-                type TEXT NOT NULL DEFAULT "user",
-                created_at DATETIME NOT NULL DEFAULT(STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')),
-                -- Updated via trigger
-                updated_at DATETIME NOT NULL DEFAULT(STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW'))
-            );
-            """
-        ]
-
-        # Add trigger for `updated_at`.
-        triggers = [
-            """--sql
-            CREATE TRIGGER IF NOT EXISTS style_presets
-            AFTER UPDATE
-            ON style_presets FOR EACH ROW
-            BEGIN
-                UPDATE style_presets SET updated_at = STRFTIME('%Y-%m-%d %H:%M:%f', 'NOW')
-                    WHERE id = old.id;
-            END;
-            """
-        ]
-
-        # Add indexes for searchable fields
-        indices = [
-            "CREATE INDEX IF NOT EXISTS idx_style_presets_name ON style_presets(name);",
-        ]
-
-        for stmt in tables + indices + triggers:
-            cursor.execute(stmt)
-
-
-def build_migration_14() -> Migration:
-    """
-    Build the migration from database version 13 to 14..
-
-    This migration does the following:
-    - Create the table used to store style presets.
-    """
-    migration_14 = Migration(
-        from_version=13,
-        to_version=14,
-        callback=Migration14Callback(),
-    )
-
-    return migration_14

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/app/services/style_preset_images/style_preset_images_base.py

@@ -1,33 +0,0 @@
-from abc import ABC, abstractmethod
-from pathlib import Path
-
-from PIL.Image import Image as PILImageType
-
-
-class StylePresetImageFileStorageBase(ABC):
-    """Low-level service responsible for storing and retrieving image files."""
-
-    @abstractmethod
-    def get(self, style_preset_id: str) -> PILImageType:
-        """Retrieves a style preset image as PIL Image."""
-        pass
-
-    @abstractmethod
-    def get_path(self, style_preset_id: str) -> Path:
-        """Gets the internal path to a style preset image."""
-        pass
-
-    @abstractmethod
-    def get_url(self, style_preset_id: str) -> str | None:
-        """Gets the URL to fetch a style preset image."""
-        pass
-
-    @abstractmethod
-    def save(self, style_preset_id: str, image: PILImageType) -> None:
-        """Saves a style preset image."""
-        pass
-
-    @abstractmethod
-    def delete(self, style_preset_id: str) -> None:
-        """Deletes a style preset image."""
-        pass

invokeai/app/services/style_preset_images/style_preset_images_common.py

@@ -1,19 +0,0 @@
-class StylePresetImageFileNotFoundException(Exception):
-    """Raised when an image file is not found in storage."""
-
-    def __init__(self, message: str = "Style preset image file not found"):
-        super().__init__(message)
-
-
-class StylePresetImageFileSaveException(Exception):
-    """Raised when an image cannot be saved."""
-
-    def __init__(self, message: str = "Style preset image file not saved"):
-        super().__init__(message)
-
-
-class StylePresetImageFileDeleteException(Exception):
-    """Raised when an image cannot be deleted."""
-
-    def __init__(self, message: str = "Style preset image file not deleted"):
-        super().__init__(message)

invokeai/app/services/style_preset_images/style_preset_images_disk.py

@@ -1,88 +0,0 @@
-from pathlib import Path
-
-from PIL import Image
-from PIL.Image import Image as PILImageType
-
-from invokeai.app.services.invoker import Invoker
-from invokeai.app.services.style_preset_images.style_preset_images_base import StylePresetImageFileStorageBase
-from invokeai.app.services.style_preset_images.style_preset_images_common import (
-    StylePresetImageFileDeleteException,
-    StylePresetImageFileNotFoundException,
-    StylePresetImageFileSaveException,
-)
-from invokeai.app.services.style_preset_records.style_preset_records_common import PresetType
-from invokeai.app.util.misc import uuid_string
-from invokeai.app.util.thumbnails import make_thumbnail
-
-
-class StylePresetImageFileStorageDisk(StylePresetImageFileStorageBase):
-    """Stores images on disk"""
-
-    def __init__(self, style_preset_images_folder: Path):
-        self._style_preset_images_folder = style_preset_images_folder
-        self._validate_storage_folders()
-
-    def start(self, invoker: Invoker) -> None:
-        self._invoker = invoker
-
-    def get(self, style_preset_id: str) -> PILImageType:
-        try:
-            path = self.get_path(style_preset_id)
-
-            return Image.open(path)
-        except FileNotFoundError as e:
-            raise StylePresetImageFileNotFoundException from e
-
-    def save(self, style_preset_id: str, image: PILImageType) -> None:
-        try:
-            self._validate_storage_folders()
-            image_path = self._style_preset_images_folder / (style_preset_id + ".webp")
-            thumbnail = make_thumbnail(image, 256)
-            thumbnail.save(image_path, format="webp")
-
-        except Exception as e:
-            raise StylePresetImageFileSaveException from e
-
-    def get_path(self, style_preset_id: str) -> Path:
-        style_preset = self._invoker.services.style_preset_records.get(style_preset_id)
-        if style_preset.type is PresetType.Default:
-            default_images_dir = Path(__file__).parent / Path("default_style_preset_images")
-            path = default_images_dir / (style_preset.name + ".png")
-        else:
-            path = self._style_preset_images_folder / (style_preset_id + ".webp")
-
-        return path
-
-    def get_url(self, style_preset_id: str) -> str | None:
-        path = self.get_path(style_preset_id)
-        if not self._validate_path(path):
-            return
-
-        url = self._invoker.services.urls.get_style_preset_image_url(style_preset_id)
-
-        # The image URL never changes, so we must add random query string to it to prevent caching
-        url += f"?{uuid_string()}"
-
-        return url
-
-    def delete(self, style_preset_id: str) -> None:
-        try:
-            path = self.get_path(style_preset_id)
-
-            if not self._validate_path(path):
-                raise StylePresetImageFileNotFoundException
-
-            path.unlink()
-
-        except StylePresetImageFileNotFoundException as e:
-            raise StylePresetImageFileNotFoundException from e
-        except Exception as e:
-            raise StylePresetImageFileDeleteException from e
-
-    def _validate_path(self, path: Path) -> bool:
-        """Validates the path given for an image."""
-        return path.exists()
-
-    def _validate_storage_folders(self) -> None:
-        """Checks if the required folders exist and create them if they don't"""
-        self._style_preset_images_folder.mkdir(parents=True, exist_ok=True)

invokeai/app/services/style_preset_records/default_style_presets.json

@@ -1,146 +0,0 @@
-[
-  {
-    "name": "Photography (General)",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt}. photography. f/2.8 macro photo, bokeh, photorealism",
-      "negative_prompt": "painting, digital art. sketch, blurry"
-    }
-  },
-  {
-    "name": "Photography (Studio Lighting)",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt}, photography. f/8 photo. centered subject, studio lighting.",
-      "negative_prompt": "painting, digital art. sketch, blurry"
-    }
-  },
-  {
-    "name": "Photography (Landscape)",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt}, landscape photograph, f/12, lifelike,  highly detailed.",
-      "negative_prompt": "painting, digital art. sketch, blurry"
-    }
-  },
-  {
-    "name": "Photography (Portrait)",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt}. photography. portraiture. catch light in eyes. one flash. rembrandt lighting. Soft box. dark shadows. High contrast. 80mm lens. F2.8.",
-      "negative_prompt": "painting, digital art. sketch, blurry"
-    }
-  },
-  {
-    "name": "Photography (Black and White)",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt} photography. natural light. 80mm lens. F1.4. strong contrast, hard light. dark contrast. blurred background. black and white",
-      "negative_prompt": "painting, digital art. sketch, colour+"
-    }
-  },
-  {
-    "name": "Architectural Visualization",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt}. architectural photography, f/12, luxury, aesthetically pleasing form and function.",
-      "negative_prompt": "painting, digital art. sketch, blurry"
-    }
-  },
-  {
-    "name": "Concept Art (Fantasy)",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "concept artwork of a {prompt}. (digital painterly art style)++, mythological, (textured 2d dry media brushpack)++, glazed brushstrokes, otherworldly. painting+, illustration+",
-      "negative_prompt": "photo. distorted, blurry, out of focus. sketch. (cgi, 3d.)++"
-    }
-  },
-  {
-    "name": "Concept Art (Sci-Fi)",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "(concept art)++, {prompt}, (sleek futurism)++, (textured 2d dry media)++, metallic highlights, digital painting style",
-      "negative_prompt": "photo. distorted, blurry, out of focus. sketch. (cgi, 3d.)++"
-    }
-  },
-  {
-    "name": "Concept Art (Character)",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "(character concept art)++, stylized painterly digital painting of {prompt}, (painterly, impasto. Dry brush.)++",
-      "negative_prompt": "photo. distorted, blurry, out of focus. sketch. (cgi, 3d.)++"
-    }
-  },
-  {
-    "name": "Concept Art (Painterly)",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt} oil painting. high contrast. impasto. sfumato. chiaroscuro. Palette knife.",
-      "negative_prompt": "photo. smooth. border. frame"
-    }
-  },
-  {
-    "name": "Environment Art",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt} environment artwork, hyper-realistic digital painting style with cinematic composition, atmospheric, depth and detail, voluminous. textured dry brush 2d media",
-      "negative_prompt": "photo, distorted, blurry, out of focus. sketch."
-    }
-  },
-  {
-    "name": "Interior Design (Visualization)",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt} interior design photo, gentle shadows, light mid-tones, dimension, mix of smooth and textured surfaces, focus on negative space and clean lines, focus",
-      "negative_prompt": "photo, distorted. sketch."
-    }
-  },
-  {
-    "name": "Product Rendering",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt} high quality product photography, 3d rendering with key lighting, shallow depth of field, simple plain background, studio lighting.",
-      "negative_prompt": "blurry, sketch, messy, dirty. unfinished."
-    }
-  },
-  {
-    "name": "Sketch",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt} black and white pencil drawing, off-center composition, cross-hatching for shadows, bold strokes, textured paper. sketch+++",
-      "negative_prompt": "blurry, photo, painting, color. messy, dirty. unfinished. frame, borders."
-    }
-  },
-  {
-    "name": "Line Art",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt} Line art. bold outline. simplistic. white background. 2d",
-      "negative_prompt": "photo. digital art. greyscale. solid black. painting"
-    }
-  },
-  {
-    "name": "Anime",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt} anime++, bold outline, cel-shaded coloring, shounen, seinen",
-      "negative_prompt": "(photo)+++. greyscale. solid black. painting"
-    }
-  },
-  {
-    "name": "Illustration",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "{prompt} illustration, bold linework, illustrative details, vector art style, flat coloring",
-      "negative_prompt": "(photo)+++. greyscale. painting, black and white."
-    }
-  },
-  {
-    "name": "Vehicles",
-    "type": "default",
-    "preset_data": {
-      "positive_prompt": "A weird futuristic normal auto, {prompt} elegant design, nice color, nice wheels",
-      "negative_prompt": "sketch. digital art. greyscale. painting"
-    }
-  }
-]

invokeai/app/services/style_preset_records/style_preset_records_base.py

@@ -1,42 +0,0 @@
-from abc import ABC, abstractmethod
-
-from invokeai.app.services.style_preset_records.style_preset_records_common import (
-    PresetType,
-    StylePresetChanges,
-    StylePresetRecordDTO,
-    StylePresetWithoutId,
-)
-
-
-class StylePresetRecordsStorageBase(ABC):
-    """Base class for style preset storage services."""
-
-    @abstractmethod
-    def get(self, style_preset_id: str) -> StylePresetRecordDTO:
-        """Get style preset by id."""
-        pass
-
-    @abstractmethod
-    def create(self, style_preset: StylePresetWithoutId) -> StylePresetRecordDTO:
-        """Creates a style preset."""
-        pass
-
-    @abstractmethod
-    def create_many(self, style_presets: list[StylePresetWithoutId]) -> None:
-        """Creates many style presets."""
-        pass
-
-    @abstractmethod
-    def update(self, style_preset_id: str, changes: StylePresetChanges) -> StylePresetRecordDTO:
-        """Updates a style preset."""
-        pass
-
-    @abstractmethod
-    def delete(self, style_preset_id: str) -> None:
-        """Deletes a style preset."""
-        pass
-
-    @abstractmethod
-    def get_many(self, type: PresetType | None = None) -> list[StylePresetRecordDTO]:
-        """Gets many workflows."""
-        pass

invokeai/app/services/style_preset_records/style_preset_records_common.py

@@ -1,139 +0,0 @@
-import codecs
-import csv
-import json
-from enum import Enum
-from typing import Any, Optional
-
-import pydantic
-from fastapi import UploadFile
-from pydantic import AliasChoices, BaseModel, ConfigDict, Field, TypeAdapter
-
-from invokeai.app.util.metaenum import MetaEnum
-
-
-class StylePresetNotFoundError(Exception):
-    """Raised when a style preset is not found"""
-
-
-class PresetData(BaseModel, extra="forbid"):
-    positive_prompt: str = Field(description="Positive prompt")
-    negative_prompt: str = Field(description="Negative prompt")
-
-
-PresetDataValidator = TypeAdapter(PresetData)
-
-
-class PresetType(str, Enum, metaclass=MetaEnum):
-    User = "user"
-    Default = "default"
-    Project = "project"
-
-
-class StylePresetChanges(BaseModel, extra="forbid"):
-    name: Optional[str] = Field(default=None, description="The style preset's new name.")
-    preset_data: Optional[PresetData] = Field(default=None, description="The updated data for style preset.")
-    type: Optional[PresetType] = Field(description="The updated type of the style preset")
-
-
-class StylePresetWithoutId(BaseModel):
-    name: str = Field(description="The name of the style preset.")
-    preset_data: PresetData = Field(description="The preset data")
-    type: PresetType = Field(description="The type of style preset")
-
-
-class StylePresetRecordDTO(StylePresetWithoutId):
-    id: str = Field(description="The style preset ID.")
-
-    @classmethod
-    def from_dict(cls, data: dict[str, Any]) -> "StylePresetRecordDTO":
-        data["preset_data"] = PresetDataValidator.validate_json(data.get("preset_data", ""))
-        return StylePresetRecordDTOValidator.validate_python(data)
-
-
-StylePresetRecordDTOValidator = TypeAdapter(StylePresetRecordDTO)
-
-
-class StylePresetRecordWithImage(StylePresetRecordDTO):
-    image: Optional[str] = Field(description="The path for image")
-
-
-class StylePresetImportRow(BaseModel):
-    name: str = Field(min_length=1, description="The name of the preset.")
-    positive_prompt: str = Field(
-        default="",
-        description="The positive prompt for the preset.",
-        validation_alias=AliasChoices("positive_prompt", "prompt"),
-    )
-    negative_prompt: str = Field(default="", description="The negative prompt for the preset.")
-
-    model_config = ConfigDict(str_strip_whitespace=True, extra="forbid")
-
-
-StylePresetImportList = list[StylePresetImportRow]
-StylePresetImportListTypeAdapter = TypeAdapter(StylePresetImportList)
-
-
-class UnsupportedFileTypeError(ValueError):
-    """Raised when an unsupported file type is encountered"""
-
-    pass
-
-
-class InvalidPresetImportDataError(ValueError):
-    """Raised when invalid preset import data is encountered"""
-
-    pass
-
-
-async def parse_presets_from_file(file: UploadFile) -> list[StylePresetWithoutId]:
-    """Parses style presets from a file. The file must be a CSV or JSON file.
-
-    If CSV, the file must have the following columns:
-    - name
-    - prompt (or positive_prompt)
-    - negative_prompt
-
-    If JSON, the file must be a list of objects with the following keys:
-    - name
-    - prompt (or positive_prompt)
-    - negative_prompt
-
-    Args:
-        file (UploadFile): The file to parse.
-
-    Returns:
-        list[StylePresetWithoutId]: The parsed style presets.
-
-    Raises:
-        UnsupportedFileTypeError: If the file type is not supported.
-        InvalidPresetImportDataError: If the data in the file is invalid.
-    """
-    if file.content_type not in ["text/csv", "application/json"]:
-        raise UnsupportedFileTypeError()
-
-    if file.content_type == "text/csv":
-        csv_reader = csv.DictReader(codecs.iterdecode(file.file, "utf-8"))
-        data = list(csv_reader)
-    else:  # file.content_type == "application/json":
-        json_data = await file.read()
-        data = json.loads(json_data)
-
-    try:
-        imported_presets = StylePresetImportListTypeAdapter.validate_python(data)
-
-        style_presets: list[StylePresetWithoutId] = []
-
-        for imported in imported_presets:
-            preset_data = PresetData(positive_prompt=imported.positive_prompt, negative_prompt=imported.negative_prompt)
-            style_preset = StylePresetWithoutId(name=imported.name, preset_data=preset_data, type=PresetType.User)
-            style_presets.append(style_preset)
-    except pydantic.ValidationError as e:
-        if file.content_type == "text/csv":
-            msg = "Invalid CSV format: must include columns 'name', 'prompt', and 'negative_prompt' and name cannot be blank"
-        else:  # file.content_type == "application/json":
-            msg = "Invalid JSON format: must be a list of objects with keys 'name', 'prompt', and 'negative_prompt' and name cannot be blank"
-        raise InvalidPresetImportDataError(msg) from e
-    finally:
-        file.file.close()
-
-    return style_presets

invokeai/app/services/style_preset_records/style_preset_records_sqlite.py

@@ -1,215 +0,0 @@
-import json
-from pathlib import Path
-
-from invokeai.app.services.invoker import Invoker
-from invokeai.app.services.shared.sqlite.sqlite_database import SqliteDatabase
-from invokeai.app.services.style_preset_records.style_preset_records_base import StylePresetRecordsStorageBase
-from invokeai.app.services.style_preset_records.style_preset_records_common import (
-    PresetType,
-    StylePresetChanges,
-    StylePresetNotFoundError,
-    StylePresetRecordDTO,
-    StylePresetWithoutId,
-)
-from invokeai.app.util.misc import uuid_string
-
-
-class SqliteStylePresetRecordsStorage(StylePresetRecordsStorageBase):
-    def __init__(self, db: SqliteDatabase) -> None:
-        super().__init__()
-        self._lock = db.lock
-        self._conn = db.conn
-        self._cursor = self._conn.cursor()
-
-    def start(self, invoker: Invoker) -> None:
-        self._invoker = invoker
-        self._sync_default_style_presets()
-
-    def get(self, style_preset_id: str) -> StylePresetRecordDTO:
-        """Gets a style preset by ID."""
-        try:
-            self._lock.acquire()
-            self._cursor.execute(
-                """--sql
-                SELECT *
-                FROM style_presets
-                WHERE id = ?;
-                """,
-                (style_preset_id,),
-            )
-            row = self._cursor.fetchone()
-            if row is None:
-                raise StylePresetNotFoundError(f"Style preset with id {style_preset_id} not found")
-            return StylePresetRecordDTO.from_dict(dict(row))
-        except Exception:
-            self._conn.rollback()
-            raise
-        finally:
-            self._lock.release()
-
-    def create(self, style_preset: StylePresetWithoutId) -> StylePresetRecordDTO:
-        style_preset_id = uuid_string()
-        try:
-            self._lock.acquire()
-            self._cursor.execute(
-                """--sql
-                INSERT OR IGNORE INTO style_presets (
-                    id,
-                    name,
-                    preset_data,
-                    type
-                )
-                VALUES (?, ?, ?, ?);
-                """,
-                (
-                    style_preset_id,
-                    style_preset.name,
-                    style_preset.preset_data.model_dump_json(),
-                    style_preset.type,
-                ),
-            )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
-        finally:
-            self._lock.release()
-        return self.get(style_preset_id)
-
-    def create_many(self, style_presets: list[StylePresetWithoutId]) -> None:
-        style_preset_ids = []
-        try:
-            self._lock.acquire()
-            for style_preset in style_presets:
-                style_preset_id = uuid_string()
-                style_preset_ids.append(style_preset_id)
-                self._cursor.execute(
-                    """--sql
-                    INSERT OR IGNORE INTO style_presets (
-                        id,
-                        name,
-                        preset_data,
-                        type
-                    )
-                    VALUES (?, ?, ?, ?);
-                    """,
-                    (
-                        style_preset_id,
-                        style_preset.name,
-                        style_preset.preset_data.model_dump_json(),
-                        style_preset.type,
-                    ),
-                )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
-        finally:
-            self._lock.release()
-
-        return None
-
-    def update(self, style_preset_id: str, changes: StylePresetChanges) -> StylePresetRecordDTO:
-        try:
-            self._lock.acquire()
-            # Change the name of a style preset
-            if changes.name is not None:
-                self._cursor.execute(
-                    """--sql
-                    UPDATE style_presets
-                    SET name = ?
-                    WHERE id = ?;
-                    """,
-                    (changes.name, style_preset_id),
-                )
-
-            # Change the preset data for a style preset
-            if changes.preset_data is not None:
-                self._cursor.execute(
-                    """--sql
-                    UPDATE style_presets
-                    SET preset_data = ?
-                    WHERE id = ?;
-                    """,
-                    (changes.preset_data.model_dump_json(), style_preset_id),
-                )
-
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
-        finally:
-            self._lock.release()
-        return self.get(style_preset_id)
-
-    def delete(self, style_preset_id: str) -> None:
-        try:
-            self._lock.acquire()
-            self._cursor.execute(
-                """--sql
-                DELETE from style_presets
-                WHERE id = ?;
-                """,
-                (style_preset_id,),
-            )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
-        finally:
-            self._lock.release()
-        return None
-
-    def get_many(self, type: PresetType | None = None) -> list[StylePresetRecordDTO]:
-        try:
-            self._lock.acquire()
-            main_query = """
-                SELECT
-                    *
-                FROM style_presets
-                """
-
-            if type is not None:
-                main_query += "WHERE type = ? "
-
-            main_query += "ORDER BY LOWER(name) ASC"
-
-            if type is not None:
-                self._cursor.execute(main_query, (type,))
-            else:
-                self._cursor.execute(main_query)
-
-            rows = self._cursor.fetchall()
-            style_presets = [StylePresetRecordDTO.from_dict(dict(row)) for row in rows]
-
-            return style_presets
-        except Exception:
-            self._conn.rollback()
-            raise
-        finally:
-            self._lock.release()
-
-    def _sync_default_style_presets(self) -> None:
-        """Syncs default style presets to the database. Internal use only."""
-
-        # First delete all existing default style presets
-        try:
-            self._lock.acquire()
-            self._cursor.execute(
-                """--sql
-                DELETE FROM style_presets
-                WHERE type = "default";
-                """
-            )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
-        finally:
-            self._lock.release()
-        # Next, parse and create the default style presets
-        with self._lock, open(Path(__file__).parent / Path("default_style_presets.json"), "r") as file:
-            presets = json.load(file)
-            for preset in presets:
-                style_preset = StylePresetWithoutId.model_validate(preset)
-                self.create(style_preset)

invokeai/app/services/urls/urls_base.py

@@ -13,8 +13,3 @@ class UrlServiceBase(ABC):
     def get_model_image_url(self, model_key: str) -> str:
         """Gets the URL for a model image"""
         pass
-
-    @abstractmethod
-    def get_style_preset_image_url(self, style_preset_id: str) -> str:
-        """Gets the URL for a style preset image"""
-        pass

invokeai/app/services/urls/urls_default.py

@@ -19,6 +19,3 @@ class LocalUrlService(UrlServiceBase):
 
     def get_model_image_url(self, model_key: str) -> str:
         return f"{self._base_url_v2}/models/i/{model_key}/image"
-
-    def get_style_preset_image_url(self, style_preset_id: str) -> str:
-        return f"{self._base_url}/style_presets/i/{style_preset_id}/image"

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/canvasV2Slice';
+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(
+    dispatch(modelChanged({ key: 'test_model', hash: 'some_hash', name: 'some name', base: 'sd-1', type: 'main' }));
-      modelChanged({ model: { 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.31",
+    "@invoke-ai/ui-library": "^0.0.25",
     "@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,14 +102,15 @@
     "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"
   },
   "peerDependencies": {
+    "@chakra-ui/react": "^2.8.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "ts-toolbelt": "^9.6.0"

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",
@@ -1101,6 +1095,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.",
@@ -1146,8 +1141,6 @@
         "imageSavingFailed": "Image Saving Failed",
         "imageUploaded": "Image Uploaded",
         "imageUploadFailed": "Image Upload Failed",
-        "importFailed": "Import Failed",
-        "importSuccessful": "Import Successful",
         "invalidUpload": "Invalid Upload",
         "loadedWithWarnings": "Workflow Loaded with Warnings",
         "maskSavedAssets": "Mask Saved to Assets",
@@ -1567,7 +1560,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",
@@ -1645,32 +1638,16 @@
         "storeNotInitialized": "Store is not initialized"
     },
     "controlLayers": {
-        "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",
         "deleteAll": "Delete All",
-        "clearCaches": "Clear Caches",
-        "recalculateRects": "Recalculate Rects",
-        "clipToBbox": "Clip Strokes to Bbox",
         "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",
@@ -1679,86 +1656,23 @@
         "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",
+        "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",
-        "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"
-        }
     },
     "upscaling": {
-        "upscale": "Upscale",
         "creativity": "Creativity",
         "exceedsMaxSize": "Upscale settings exceed max size limit",
         "exceedsMaxSizeDetails": "Max upscale limit is {{maxUpscaleDimension}}x{{maxUpscaleDimension}} pixels. Please try a smaller image or decrease your scale selection.",
@@ -1775,53 +1689,6 @@
         "missingUpscaleModel": "Missing upscale model",
         "missingTileControlNetModel": "No valid tile ControlNet models installed"
     },
-    "stylePresets": {
-        "active": "Active",
-        "choosePromptTemplate": "Choose Prompt Template",
-        "clearTemplateSelection": "Clear Template Selection",
-        "copyTemplate": "Copy Template",
-        "createPromptTemplate": "Create Prompt Template",
-        "defaultTemplates": "Default Templates",
-        "deleteImage": "Delete Image",
-        "deleteTemplate": "Delete Template",
-        "deleteTemplate2": "Are you sure you want to delete this template? This cannot be undone.",
-        "exportPromptTemplates": "Export My Prompt Templates (CSV)",
-        "editTemplate": "Edit Template",
-        "exportDownloaded": "Export Downloaded",
-        "exportFailed": "Unable to generate and download CSV",
-        "flatten": "Flatten selected template into current prompt",
-        "importTemplates": "Import Prompt Templates (CSV/JSON)",
-        "acceptedColumnsKeys": "Accepted columns/keys:",
-        "nameColumn": "'name'",
-        "positivePromptColumn": "'prompt' or 'positive_prompt'",
-        "negativePromptColumn": "'negative_prompt'",
-        "insertPlaceholder": "Insert placeholder",
-        "myTemplates": "My Templates",
-        "name": "Name",
-        "negativePrompt": "Negative Prompt",
-        "noTemplates": "No templates",
-        "noMatchingTemplates": "No matching templates",
-        "promptTemplatesDesc1": "Prompt templates add text to the prompts you write in the prompt box.",
-        "promptTemplatesDesc2": "Use the placeholder string <Pre>{{placeholder}}</Pre> to specify where your prompt should be included in the template.",
-        "promptTemplatesDesc3": "If you omit the placeholder, the template will be appended to the end of your prompt.",
-        "positivePrompt": "Positive Prompt",
-        "preview": "Preview",
-        "private": "Private",
-        "promptTemplateCleared": "Prompt Template Cleared",
-        "searchByName": "Search by name",
-        "shared": "Shared",
-        "sharedTemplates": "Shared Templates",
-        "templateActions": "Template Actions",
-        "templateDeleted": "Prompt template deleted",
-        "toggleViewMode": "Toggle View Mode",
-        "type": "Type",
-        "unableToDeleteTemplate": "Unable to delete prompt template",
-        "updatePromptTemplate": "Update Prompt Template",
-        "uploadImage": "Upload Image",
-        "useForTemplate": "Use For Prompt Template",
-        "viewList": "View Template List",
-        "viewModeTooltip": "This is how your prompt will look with your currently selected template. To edit your prompt, click anywhere in the text box."
-    },
     "upsell": {
         "inviteTeammates": "Invite Teammates",
         "professional": "Professional",
@@ -1843,30 +1710,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/public/locales/it.json

@@ -90,7 +90,7 @@
         "disabled": "Disabilitato",
         "comparingDesc": "Confronta due immagini",
         "comparing": "Confronta",
-        "dontShowMeThese": "Non mostrare più"
+        "dontShowMeThese": "Non mostrarmi questi"
     },
     "gallery": {
         "galleryImageSize": "Dimensione dell'immagine",
@@ -701,9 +701,7 @@
         "baseModelChanged": "Modello base modificato",
         "sessionRef": "Sessione: {{sessionId}}",
         "somethingWentWrong": "Qualcosa è andato storto",
-        "outOfMemoryErrorDesc": "Le impostazioni della generazione attuale superano la capacità del sistema. Modifica le impostazioni e riprova.",
+        "outOfMemoryErrorDesc": "Le impostazioni della generazione attuale superano la capacità del sistema. Modifica le impostazioni e riprova."
-        "importFailed": "Importazione non riuscita",
-        "importSuccessful": "Importazione riuscita"
     },
     "tooltip": {
         "feature": {
@@ -929,7 +927,7 @@
         "missingInvocationTemplate": "Modello di invocazione mancante",
         "missingFieldTemplate": "Modello di campo mancante",
         "singleFieldType": "{{name}} (Singola)",
-        "imageAccessError": "Impossibile trovare l'immagine {{image_name}}, ripristino ai valori predefiniti",
+        "imageAccessError": "Impossibile trovare l'immagine {{image_name}}, ripristino delle impostazioni predefinite",
         "boardAccessError": "Impossibile trovare la bacheca {{board_id}}, ripristino ai valori predefiniti",
         "modelAccessError": "Impossibile trovare il modello {{key}}, ripristino ai valori predefiniti"
     },
@@ -1528,7 +1526,7 @@
         },
         "upscaleModel": {
             "paragraphs": [
-                "Il modello di ampliamento (Upscale), scala l'immagine alle dimensioni di uscita prima di aggiungere i dettagli. È possibile utilizzare qualsiasi modello di ampliamento supportato, ma alcuni sono specializzati per diversi tipi di immagini, come foto o disegni al tratto."
+                "Il modello di ampliamento ridimensiona l'immagine alle dimensioni di uscita prima che vengano aggiunti i dettagli. È possibile utilizzare qualsiasi modello di ampliamento supportato, ma alcuni sono specializzati per diversi tipi di immagini, come foto o disegni al tratto."
             ],
             "heading": "Modello di ampliamento"
         },
@@ -1737,58 +1735,12 @@
         "missingUpscaleModel": "Modello per l’ampliamento mancante",
         "missingTileControlNetModel": "Nessun modello ControlNet Tile valido installato",
         "postProcessingModel": "Modello di post-elaborazione",
-        "postProcessingMissingModelWarning": "Visita <LinkComponent>Gestione modelli</LinkComponent> per installare un modello di post-elaborazione (da immagine a immagine).",
+        "postProcessingMissingModelWarning": "Visita <LinkComponent>Gestione modelli</LinkComponent> per installare un modello di post-elaborazione (da immagine a immagine)."
-        "exceedsMaxSize": "Le impostazioni di ampliamento superano il limite massimo delle dimensioni",
-        "exceedsMaxSizeDetails": "Il limite massimo di ampliamento è {{maxUpscaleDimension}}x{{maxUpscaleDimension}} pixel. Prova un'immagine più piccola o diminuisci la scala selezionata."
     },
     "upsell": {
         "inviteTeammates": "Invita collaboratori",
         "shareAccess": "Condividi l'accesso",
         "professional": "Professionale",
         "professionalUpsell": "Disponibile nell'edizione Professional di Invoke. Fai clic qui o visita invoke.com/pricing per ulteriori dettagli."
-    },
-    "stylePresets": {
-        "active": "Attivo",
-        "choosePromptTemplate": "Scegli un modello di prompt",
-        "clearTemplateSelection": "Cancella selezione modello",
-        "copyTemplate": "Copia modello",
-        "createPromptTemplate": "Crea modello di prompt",
-        "defaultTemplates": "Modelli predefiniti",
-        "deleteImage": "Elimina immagine",
-        "deleteTemplate": "Elimina modello",
-        "editTemplate": "Modifica modello",
-        "flatten": "Unisci il modello selezionato al prompt corrente",
-        "insertPlaceholder": "Inserisci segnaposto",
-        "myTemplates": "I miei modelli",
-        "name": "Nome",
-        "negativePrompt": "Prompt Negativo",
-        "noMatchingTemplates": "Nessun modello corrispondente",
-        "promptTemplatesDesc1": "I modelli di prompt aggiungono testo ai prompt che scrivi nelle caselle dei prompt.",
-        "promptTemplatesDesc3": "Se si omette il segnaposto, il modello verrà aggiunto alla fine del prompt.",
-        "positivePrompt": "Prompt Positivo",
-        "preview": "Anteprima",
-        "private": "Privato",
-        "searchByName": "Cerca per nome",
-        "shared": "Condiviso",
-        "sharedTemplates": "Modelli condivisi",
-        "templateDeleted": "Modello di prompt eliminato",
-        "toggleViewMode": "Attiva/disattiva visualizzazione",
-        "uploadImage": "Carica immagine",
-        "useForTemplate": "Usa per modello di prompt",
-        "viewList": "Visualizza l'elenco dei modelli",
-        "viewModeTooltip": "Ecco come apparirà il tuo prompt con il modello attualmente selezionato. Per modificare il tuo prompt, clicca in un punto qualsiasi della casella di testo.",
-        "deleteTemplate2": "Vuoi davvero eliminare questo modello? Questa operazione non può essere annullata.",
-        "unableToDeleteTemplate": "Impossibile eliminare il modello di prompt",
-        "updatePromptTemplate": "Aggiorna il modello di prompt",
-        "type": "Tipo",
-        "promptTemplatesDesc2": "Utilizza la stringa segnaposto <Pre>{{placeholder}}</Pre> per specificare dove inserire il tuo prompt nel modello.",
-        "importTemplates": "Importa modelli di prompt (CSV/JSON)",
-        "exportDownloaded": "Esportazione completata",
-        "exportFailed": "Impossibile generare e scaricare il file CSV",
-        "exportPromptTemplates": "Esporta i miei modelli di prompt (CSV)",
-        "positivePromptColumn": "'prompt' o 'positive_prompt'",
-        "noTemplates": "Nessun modello",
-        "acceptedColumnsKeys": "Colonne/chiavi accettate:",
-        "templateActions": "Azioni modello"
     }
 }

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

@@ -91,8 +91,7 @@
         "enabled": "Включено",
         "disabled": "Отключено",
         "comparingDesc": "Сравнение двух изображений",
-        "comparing": "Сравнение",
+        "comparing": "Сравнение"
-        "dontShowMeThese": "Не показывай мне это"
     },
     "gallery": {
         "galleryImageSize": "Размер изображений",
@@ -154,11 +153,7 @@
         "showArchivedBoards": "Показать архивированные доски",
         "searchImages": "Поиск по метаданным",
         "displayBoardSearch": "Отобразить поиск досок",
-        "displaySearch": "Отобразить поиск",
+        "displaySearch": "Отобразить поиск"
-        "exitBoardSearch": "Выйти из поиска досок",
-        "go": "Перейти",
-        "exitSearch": "Выйти из поиска",
-        "jump": "Пыгнуть"
     },
     "hotkeys": {
         "keyboardShortcuts": "Горячие клавиши",
@@ -381,10 +376,6 @@
         "toggleViewer": {
             "title": "Переключить просмотр изображений",
             "desc": "Переключение между средством просмотра изображений и рабочей областью для текущей вкладки."
-        },
-        "postProcess": {
-            "desc": "Обработайте текущее изображение с помощью выбранной модели постобработки",
-            "title": "Обработать изображение"
         }
     },
     "modelManager": {
@@ -598,10 +589,7 @@
         "infillColorValue": "Цвет заливки",
         "globalSettings": "Глобальные настройки",
         "globalNegativePromptPlaceholder": "Глобальный негативный запрос",
-        "globalPositivePromptPlaceholder": "Глобальный запрос",
+        "globalPositivePromptPlaceholder": "Глобальный запрос"
-        "postProcessing": "Постобработка (Shift + U)",
-        "processImage": "Обработка изображения",
-        "sendToUpscale": "Отправить на увеличение"
     },
     "settings": {
         "models": "Модели",
@@ -635,9 +623,7 @@
         "intermediatesCleared_many": "Очищено {{count}} промежуточных",
         "clearIntermediatesDesc1": "Очистка промежуточных элементов приведет к сбросу состояния Canvas и ControlNet.",
         "intermediatesClearedFailed": "Проблема очистки промежуточных",
-        "reloadingIn": "Перезагрузка через",
+        "reloadingIn": "Перезагрузка через"
-        "informationalPopoversDisabled": "Информационные всплывающие окна отключены",
-        "informationalPopoversDisabledDesc": "Информационные всплывающие окна были отключены. Включите их в Настройках."
     },
     "toast": {
         "uploadFailed": "Загрузка не удалась",
@@ -708,9 +694,7 @@
         "sessionRef": "Сессия: {{sessionId}}",
         "outOfMemoryError": "Ошибка нехватки памяти",
         "outOfMemoryErrorDesc": "Ваши текущие настройки генерации превышают возможности системы. Пожалуйста, измените настройки и повторите попытку.",
-        "somethingWentWrong": "Что-то пошло не так",
+        "somethingWentWrong": "Что-то пошло не так"
-        "importFailed": "Импорт неудачен",
-        "importSuccessful": "Импорт успешен"
     },
     "tooltip": {
         "feature": {
@@ -1033,8 +1017,7 @@
         "composition": "Только композиция",
         "hed": "HED",
         "beginEndStepPercentShort": "Начало/конец %",
-        "setControlImageDimensionsForce": "Скопируйте размер в Ш/В (игнорируйте модель)",
+        "setControlImageDimensionsForce": "Скопируйте размер в Ш/В (игнорируйте модель)"
-        "depthAnythingSmallV2": "Small V2"
     },
     "boards": {
         "autoAddBoard": "Авто добавление Доски",
@@ -1059,7 +1042,7 @@
         "downloadBoard": "Скачать доску",
         "deleteBoard": "Удалить доску",
         "deleteBoardAndImages": "Удалить доску и изображения",
-        "deletedBoardsCannotbeRestored": "Удаленные доски не могут быть восстановлены. Выбор «Удалить только доску» переведет изображения в состояние без категории.",
+        "deletedBoardsCannotbeRestored": "Удаленные доски не подлежат восстановлению",
         "assetsWithCount_one": "{{count}} ассет",
         "assetsWithCount_few": "{{count}} ассета",
         "assetsWithCount_many": "{{count}} ассетов",
@@ -1074,11 +1057,7 @@
         "boards": "Доски",
         "addPrivateBoard": "Добавить личную доску",
         "private": "Личные доски",
-        "shared": "Общие доски",
+        "shared": "Общие доски"
-        "hideBoards": "Скрыть доски",
-        "viewBoards": "Просмотреть доски",
-        "noBoards": "Нет досок {{boardType}}",
-        "deletedPrivateBoardsCannotbeRestored": "Удаленные доски не могут быть восстановлены. Выбор «Удалить только доску» переведет изображения в приватное состояние без категории для создателя изображения."
     },
     "dynamicPrompts": {
         "seedBehaviour": {
@@ -1438,30 +1417,6 @@
             "paragraphs": [
                 "Метод, с помощью которого применяется текущий IP-адаптер."
             ]
-        },
-        "structure": {
-            "paragraphs": [
-                "Структура контролирует, насколько точно выходное изображение будет соответствовать макету оригинала. Низкая структура допускает значительные изменения, в то время как высокая структура строго сохраняет исходную композицию и макет."
-            ],
-            "heading": "Структура"
-        },
-        "scale": {
-            "paragraphs": [
-                "Масштаб управляет размером выходного изображения и основывается на кратном разрешении входного изображения. Например, при увеличении в 2 раза изображения 1024x1024 на выходе получится 2048 x 2048."
-            ],
-            "heading": "Масштаб"
-        },
-        "creativity": {
-            "paragraphs": [
-                "Креативность контролирует степень свободы, предоставляемой модели при добавлении деталей. При низкой креативности модель остается близкой к оригинальному изображению, в то время как высокая креативность позволяет вносить больше изменений. При использовании подсказки высокая креативность увеличивает влияние подсказки."
-            ],
-            "heading": "Креативность"
-        },
-        "upscaleModel": {
-            "heading": "Модель увеличения",
-            "paragraphs": [
-                "Модель увеличения масштаба масштабирует изображение до выходного размера перед добавлением деталей. Можно использовать любую поддерживаемую модель масштабирования, но некоторые из них специализированы для различных видов изображений, например фотографий или линейных рисунков."
-            ]
         }
     },
     "metadata": {
@@ -1738,78 +1693,7 @@
             "canvasTab": "$t(ui.tabs.canvas) $t(common.tab)",
             "queueTab": "$t(ui.tabs.queue) $t(common.tab)",
             "modelsTab": "$t(ui.tabs.models) $t(common.tab)",
-            "queue": "Очередь",
+            "queue": "Очередь"
-            "upscaling": "Увеличение",
-            "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)"
         }
-    },
-    "upscaling": {
-        "exceedsMaxSize": "Параметры масштабирования превышают максимальный размер",
-        "exceedsMaxSizeDetails": "Максимальный предел масштабирования составляет {{maxUpscaleDimension}}x{{maxUpscaleDimension}} пикселей. Пожалуйста, попробуйте использовать меньшее изображение или уменьшите масштаб.",
-        "structure": "Структура",
-        "missingTileControlNetModel": "Не установлены подходящие модели ControlNet",
-        "missingUpscaleInitialImage": "Отсутствует увеличиваемое изображение",
-        "missingUpscaleModel": "Отсутствует увеличивающая модель",
-        "creativity": "Креативность",
-        "upscaleModel": "Модель увеличения",
-        "scale": "Масштаб",
-        "mainModelDesc": "Основная модель (архитектура SD1.5 или SDXL)",
-        "upscaleModelDesc": "Модель увеличения (img2img)",
-        "postProcessingModel": "Модель постобработки",
-        "tileControlNetModelDesc": "Модель ControlNet для выбранной архитектуры основной модели",
-        "missingModelsWarning": "Зайдите в <LinkComponent>Менеджер моделей</LinkComponent> чтоб установить необходимые модели:",
-        "postProcessingMissingModelWarning": "Посетите <LinkComponent>Менеджер моделей</LinkComponent>, чтобы установить модель постобработки (img2img)."
-    },
-    "stylePresets": {
-        "noMatchingTemplates": "Нет подходящих шаблонов",
-        "promptTemplatesDesc1": "Шаблоны подсказок добавляют текст к подсказкам, которые вы пишете в окне подсказок.",
-        "sharedTemplates": "Общие шаблоны",
-        "templateDeleted": "Шаблон запроса удален",
-        "toggleViewMode": "Переключить режим просмотра",
-        "type": "Тип",
-        "unableToDeleteTemplate": "Не получилось удалить шаблон запроса",
-        "viewModeTooltip": "Вот как будет выглядеть ваш запрос с выбранным шаблоном. Чтобы его отредактировать, щелкните в любом месте текстового поля.",
-        "viewList": "Просмотреть список шаблонов",
-        "active": "Активно",
-        "choosePromptTemplate": "Выберите шаблон запроса",
-        "defaultTemplates": "Стандартные шаблоны",
-        "deleteImage": "Удалить изображение",
-        "deleteTemplate": "Удалить шаблон",
-        "deleteTemplate2": "Вы уверены, что хотите удалить этот шаблон? Это нельзя отменить.",
-        "editTemplate": "Редактировать шаблон",
-        "exportPromptTemplates": "Экспорт моих шаблонов запроса (CSV)",
-        "exportDownloaded": "Экспорт скачан",
-        "exportFailed": "Невозможно сгенерировать и загрузить CSV",
-        "flatten": "Объединить выбранный шаблон с текущим запросом",
-        "acceptedColumnsKeys": "Принимаемые столбцы/ключи:",
-        "positivePromptColumn": "'prompt' или 'positive_prompt'",
-        "insertPlaceholder": "Вставить заполнитель",
-        "name": "Имя",
-        "negativePrompt": "Негативный запрос",
-        "promptTemplatesDesc3": "Если вы не используете заполнитель, шаблон будет добавлен в конец запроса.",
-        "positivePrompt": "Позитивный запрос",
-        "preview": "Предпросмотр",
-        "private": "Приватный",
-        "templateActions": "Действия с шаблоном",
-        "updatePromptTemplate": "Обновить шаблон запроса",
-        "uploadImage": "Загрузить изображение",
-        "useForTemplate": "Использовать для шаблона запроса",
-        "clearTemplateSelection": "Очистить выбор шаблона",
-        "copyTemplate": "Копировать шаблон",
-        "createPromptTemplate": "Создать шаблон запроса",
-        "importTemplates": "Импортировать шаблоны запроса (CSV/JSON)",
-        "nameColumn": "'name'",
-        "negativePromptColumn": "'negative_prompt'",
-        "myTemplates": "Мои шаблоны",
-        "noTemplates": "Нет шаблонов",
-        "promptTemplatesDesc2": "Используйте строку-заполнитель <Pre>{{placeholder}}</Pre>, чтобы указать место, куда должен быть включен ваш запрос в шаблоне.",
-        "searchByName": "Поиск по имени",
-        "shared": "Общий"
-    },
-    "upsell": {
-        "inviteTeammates": "Пригласите членов команды",
-        "professional": "Профессионал",
-        "professionalUpsell": "Доступно в профессиональной версии Invoke. Нажмите здесь или посетите invoke.com/pricing для получения более подробной информации.",
-        "shareAccess": "Поделиться доступом"
     }
 }

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

@@ -493,8 +493,7 @@
         "defaultSettingsSaved": "默认设置已保存",
         "huggingFacePlaceholder": "所有者或模型名称",
         "huggingFaceRepoID": "HuggingFace仓库ID",
-        "loraTriggerPhrases": "LoRA 触发词",
+        "loraTriggerPhrases": "LoRA 触发词"
-        "ipAdapters": "IP适配器"
     },
     "parameters": {
         "images": "图像",
@@ -1703,9 +1702,7 @@
         "upscaleModelDesc": "图像放大（图像到图像转换）模型",
         "postProcessingMissingModelWarning": "请访问 <LinkComponent>模型管理器</LinkComponent>来安装一个后处理(图像到图像转换)模型.",
         "missingModelsWarning": "请访问<LinkComponent>模型管理器</LinkComponent> 安装所需的模型：",
-        "mainModelDesc": "主模型（SD1.5或SDXL架构）",
+        "mainModelDesc": "主模型（SD1.5或SDXL架构）"
-        "exceedsMaxSize": "放大设置超出了最大尺寸限制",
-        "exceedsMaxSizeDetails": "最大放大限制是 {{maxUpscaleDimension}}x{{maxUpscaleDimension}} 像素.请尝试一个较小的图像或减少您的缩放选择."
     },
     "upsell": {
         "inviteTeammates": "邀请团队成员",

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,14 +13,11 @@ 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 { configChanged } from 'features/system/store/configSlice';
 import { languageSelector } from 'features/system/store/systemSelectors';
-import { AppContent } from 'features/ui/components/AppContent';
+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';
 import { size } from 'lodash-es';
@@ -40,11 +36,10 @@ interface Props {
     imageName: string;
     action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
   };
-  selectedWorkflowId?: string;
+  destination?: InvokeTabName | undefined;
-  destination?: TabName | undefined;
 }
 
-const App = ({ config = DEFAULT_CONFIG, selectedImage, selectedWorkflowId, destination }: Props) => {
+const App = ({ config = DEFAULT_CONFIG, selectedImage, destination }: Props) => {
   const language = useAppSelector(languageSelector);
   const logger = useLogger('system');
   const dispatch = useAppDispatch();
@@ -75,14 +70,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage, selectedWorkflowId, desti
     }
   }, [dispatch, config, logger]);
 
-  const { getAndLoadWorkflow } = useGetAndLoadLibraryWorkflow();
-
-  useEffect(() => {
-    if (selectedWorkflowId) {
-      getAndLoadWorkflow(selectedWorkflowId);
-    }
-  }, [selectedWorkflowId, getAndLoadWorkflow]);
-
   useEffect(() => {
     if (destination) {
       dispatch(setActiveTab(destination));
@@ -95,7 +82,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage, selectedWorkflowId, desti
 
   useStarterModelsToast();
   useSyncQueueStatus();
-  useScopeFocusWatcher();
 
   return (
     <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
@@ -108,7 +94,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} />
@@ -118,8 +104,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage, selectedWorkflowId, desti
       <DeleteImageModal />
       <ChangeBoardModal />
       <DynamicPromptsModal />
-      <StylePresetModal />
-      <ClearQueueConfirmationsAlertDialog />
       <PreselectedImage selectedImage={selectedImage} />
     </ErrorBoundary>
   );

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';
@@ -44,8 +44,7 @@ interface Props extends PropsWithChildren {
     imageName: string;
     action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
   };
-  selectedWorkflowId?: string;
+  destination?: InvokeTabName;
-  destination?: TabName;
   customStarUi?: CustomStarUi;
   socketOptions?: Partial<ManagerOptions & SocketOptions>;
   isDebugging?: boolean;
@@ -65,7 +64,6 @@ const InvokeAIUI = ({
   projectUrl,
   queueId,
   selectedImage,
-  selectedWorkflowId,
   destination,
   customStarUi,
   socketOptions,
@@ -223,12 +221,7 @@ const InvokeAIUI = ({
         <React.Suspense fallback={<Loading />}>
           <ThemeLocaleProvider>
             <AppDndContext>
-              <App
+              <App config={config} selectedImage={selectedImage} destination={destination} />
-                config={config}
-                selectedImage={selectedImage}
-                selectedWorkflowId={selectedWorkflowId}
-                destination={destination}
-              />
             </AppDndContext>
           </ThemeLocaleProvider>
         </React.Suspense>

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);
+    const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(socketUrl, socketOptions);
-    $socket.set(socket);
+    setEventListeners({ dispatch, socket });
-    setEventListeners({ socket, dispatch, getState, setIsConnected: $isConnected.set });
     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([
+export type LoggerNamespace =
-  'canvas',
+  | 'images'
-  'config',
+  | 'models'
-  'events',
+  | 'config'
-  'gallery',
+  | 'canvas'
-  'generation',
+  | 'generation'
-  'metadata',
+  | 'nodes'
-  'models',
+  | 'system'
-  'system',
+  | 'socketio'
-  'queue',
+  | 'session'
-  'workflows',
+  | 'queue'
-]);
+  | 'dnd'
-export type LogNamespace = z.infer<typeof zLogNamespace>;
+  | '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

@@ -3,34 +3,27 @@ import { useAppSelector } from 'app/store/storeHooks';
 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) => {
+export const useLogger = (namespace: LoggerNamespace) => {
-  const logLevel = useAppSelector((s) => s.system.logLevel);
+  const consoleLogLevel = useAppSelector((s) => s.system.consoleLogLevel);
-  const logNamespaces = useAppSelector((s) => s.system.logNamespaces);
+  const shouldLogToConsole = useAppSelector((s) => s.system.shouldLogToConsole);
-  const logIsEnabled = useAppSelector((s) => s.system.logIsEnabled);
 
   // 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]}`;
+      localStorage.setItem('ROARR_FILTER', `context.logLevel:>=${LOG_LEVEL_MAP[consoleLogLevel]}`);
-      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);
     } 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/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);
+addCanvasSavedToGalleryListener(startAppListening);
-// addCanvasMaskSavedToGalleryListener(startAppListening);
+addCanvasMaskSavedToGalleryListener(startAppListening);
-// addCanvasImageToControlNetListener(startAppListening);
+addCanvasImageToControlNetListener(startAppListening);
-// addCanvasMaskToControlNetListener(startAppListening);
+addCanvasMaskToControlNetListener(startAppListening);
-// addCanvasDownloadedAsImageListener(startAppListening);
+addCanvasDownloadedAsImageListener(startAppListening);
-// addCanvasCopiedToClipboardListener(startAppListening);
+addCanvasCopiedToClipboardListener(startAppListening);
-// addCanvasMergedListener(startAppListening);
+addCanvasMergedListener(startAppListening);
-// addStagingAreaImageSavedListener(startAppListening);
+addStagingAreaImageSavedListener(startAppListening);
-// addCommitStagingAreaImageListener(startAppListening);
+addCommitStagingAreaImageListener(startAppListening);
-addStagingListeners(startAppListening);
 
 // Socket.IO
+addGeneratorProgressEventListener(startAppListening);
+addInvocationCompleteEventListener(startAppListening);
+addInvocationErrorEventListener(startAppListening);
+addInvocationStartedEventListener(startAppListening);
 addSocketConnectedEventListener(startAppListening);
-
+addSocketDisconnectedEventListener(startAppListening);
-// Gallery bulk download
+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,36 +1,33 @@
+import { isAnyOf } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import {
-  rasterLayerAdded,
+  canvasBatchIdsReset,
-  sessionStagingAreaImageAccepted,
+  commitStagingAreaImage,
-  sessionStagingAreaReset,
+  discardStagedImages,
-} from 'features/controlLayers/store/canvasV2Slice';
+  resetCanvas,
-import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
+  setInitialCanvasImage,
-import { imageDTOToImageObject } from 'features/controlLayers/store/types';
+} 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,
+    matcher,
-    effect: async (_, { dispatch }) => {
+    effect: async (_, { dispatch, getState }) => {
+      const log = logger('canvas');
+      const state = getState();
+      const { batchIds } = state.canvas;
+
       try {
         const req = dispatch(
-          queueApi.endpoints.cancelByBatchOrigin.initiate(
+          queueApi.endpoints.cancelByBatchIds.initiate({ batch_ids: batchIds }, { fixedCacheKey: 'cancelByBatchIds' })
-            { origin: 'canvas' },
-            { fixedCacheKey: 'cancelByBatchOrigin' }
-          )
         );
         const { canceled } = await req.unwrap();
         req.reset();
-
-        $lastCanvasProgressEvent.set(null);
-
         if (canceled > 0) {
           log.debug(`Canceled ${canceled} canvas batches`);
           toast({
@@ -39,6 +36,7 @@ export const addStagingListeners = (startAppListening: AppStartListening) => {
             status: 'success',
           });
         }
+        dispatch(canvasBatchIdsReset());
       } catch {
         log.error('Failed to cancel canvas batches');
         toast({
@@ -49,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.canvasV2.session.stagedImages[index];
-
-      assert(stagingAreaImage, 'No staged image found to accept');
-      const { x, y } = state.canvasV2.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/canvasV2Slice';
+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().canvasV2.compositing.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) => {
+    effect: async (action) => {
-      const enqueueResult = action.payload;
+      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,4 +1,7 @@
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
+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 { imagesApi } from 'services/api/endpoints/images';
@@ -6,22 +9,39 @@ 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 { nodes, canvasV2 } = getState();
+      const { canvas, nodes, controlAdapters, controlLayers } = getState();
-
       deleted_images.forEach((image_name) => {
-        const imageUsage = getImageUsage(nodes.present, canvasV2, 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 { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
-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/canvasV2Slice';
 import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
-import { buildSD1Graph } from 'features/nodes/util/graph/generation/buildSD1Graph';
+import { buildGenerationTabGraph } from 'features/nodes/util/graph/generation/buildGenerationTabGraph';
-import { buildSDXLGraph } from 'features/nodes/util/graph/generation/buildSDXLGraph';
+import { buildGenerationTabSDXLGraph } from 'features/nodes/util/graph/generation/buildGenerationTabSDXLGraph';
-import type { Graph } from 'features/nodes/util/graph/generation/Graph';
-import { serializeError } from 'serialize-error';
 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.canvasV2.params.model;
+      const { shouldShowProgressInViewer } = state.ui;
+      const model = state.generation.model;
       const { prepend } = action.payload;
 
-      const manager = $canvasManager.get();
+      let graph;
-      assert(manager, 'No model found in state');
 
-      let didStartStaging = false;
+      if (model?.base === 'sdxl') {
-
+        graph = await buildGenerationTabSDXLGraph(state);
-      if (!state.canvasV2.session.isStaging && state.canvasV2.session.mode === 'compose') {
+      } else {
-        dispatch(sessionStartedStaging());
+        graph = await buildGenerationTabGraph(state);
-        didStartStaging = true;
       }
 
-      const abortStaging = () => {
+      const batchConfig = prepareLinearUIBatch(state, graph, prepend);
-        if (didStartStaging && getState().canvasV2.session.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 req = dispatch(
-        queueApi.endpoints.enqueueBatch.initiate(prepareBatchResult.value, {
+        queueApi.endpoints.enqueueBatch.initiate(batchConfig, {
           fixedCacheKey: 'enqueueBatch',
         })
       );
-      req.reset();
+      try {
-
+        await req.unwrap();
-      const enqueueResult = await withResultAsync(() => req.unwrap());
+        if (shouldShowProgressInViewer) {
-
+          dispatch(isImageViewerOpenChanged(true));
-      if (isErr(enqueueResult)) {
+        }
-        log.error({ error: serializeError(enqueueResult.error) }, 'Failed to enqueue batch');
+      } finally {
-        abortStaging();
+        req.reset();
-        return;
       }
-
-      log.debug({ batchConfig: prepareBatchResult.value } as SerializableObject, 'Enqueued batch');
     },
   });
 };

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

@@ -29,8 +29,7 @@ export const addEnqueueRequestedNodes = (startAppListening: AppStartListening) =
         batch: {
           graph,
           workflow: builtWorkflow,
-          runs: state.canvasV2.params.iterations,
+          runs: state.generation.iterations,
-          origin: 'workflows',
         },
         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,7 +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/canvasV2Slice';
+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';
@@ -13,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) => {
@@ -38,37 +47,52 @@ const deleteNodesImages = (state: RootState, dispatch: AppDispatch, imageDTO: Im
   });
 };
 
-// const deleteControlAdapterImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
+const deleteControlAdapterImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
-//   state.canvasV2.controlAdapters.entities.forEach(({ id, imageObject, processedImageObject }) => {
+  forEach(selectControlAdapterAll(state.controlAdapters), (ca) => {
-//     if (
+    if (
-//       imageObject?.image.image_name === imageDTO.image_name ||
+      ca.controlImage === imageDTO.image_name ||
-//       processedImageObject?.image.image_name === imageDTO.image_name
+      (isControlNetOrT2IAdapter(ca) && ca.processedControlImage === imageDTO.image_name)
-//     ) {
+    ) {
-//       dispatch(caImageChanged({ id, imageDTO: null }));
+      dispatch(
-//       dispatch(caProcessedImageChanged({ id, imageDTO: null }));
+        controlAdapterImageChanged({
-//     }
+          id: ca.id,
-//   });
+          controlImage: null,
-// };
+        })
-
+      );
-const deleteIPAdapterImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
+      dispatch(
-  state.canvasV2.ipAdapters.entities.forEach(({ id, ipAdapter }) => {
+        controlAdapterProcessedImageChanged({
-    if (ipAdapter.image?.image_name === imageDTO.image_name) {
+          id: ca.id,
-      dispatch(ipaImageChanged({ id, imageDTO: null }));
+          processedControlImage: null,
+        })
+      );
     }
   });
 };
 
-const deleteLayerImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
+const deleteControlLayerImages = (state: RootState, dispatch: AppDispatch, imageDTO: ImageDTO) => {
-  state.canvasV2.rasterLayers.entities.forEach(({ id, objects }) => {
+  state.controlLayers.present.layers.forEach((l) => {
-    let shouldDelete = false;
+    if (isRegionalGuidanceLayer(l)) {
-    for (const obj of objects) {
+      if (l.ipAdapters.some((ipa) => ipa.image?.name === imageDTO.image_name)) {
-      if (obj.type === 'image' && obj.image.image_name === imageDTO.image_name) {
+        dispatch(layerDeleted(l.id));
-        shouldDelete = true;
-        break;
       }
     }
-    if (shouldDelete) {
+    if (isControlAdapterLayer(l)) {
-      dispatch(entityDeleted({ entityIdentifier: { id, type: 'raster_layer' } }));
+      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));
+      }
     }
   });
 };
@@ -121,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);
+        deleteControlLayerImages(state, dispatch, imageDTO);
-        deleteIPAdapterImages(state, dispatch, imageDTO);
-        deleteLayerImages(state, dispatch, imageDTO);
       } catch {
         // no-op
       } finally {
@@ -161,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);
+          deleteControlLayerImages(state, dispatch, imageDTO);
-          deleteIPAdapterImages(state, dispatch, imageDTO);
-          deleteLayerImages(state, dispatch, imageDTO);
         });
       } catch {
         // no-op
@@ -189,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');
     },
   });
@@ -196,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,18 +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,
+  controlAdapterImageChanged,
-  ipaImageChanged,
+  controlAdapterIsEnabledChanged,
-  rasterLayerAdded,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
-  rgIPAdapterImageChanged,
+import {
-} from 'features/controlLayers/store/canvasV2Slice';
+  caLayerImageChanged,
-import type { CanvasControlLayerState, CanvasRasterLayerState } from 'features/controlLayers/store/types';
+  iiLayerImageChanged,
-import { imageDTOToImageObject } from 'features/controlLayers/store/types';
+  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';
 
@@ -21,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;
@@ -37,21 +46,81 @@ 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({ id, imageDTO: activeData.payload.imageDTO }));
+        dispatch(
+          ipaLayerImageChanged({
+            layerId,
+            imageDTO: activeData.payload.imageDTO,
+          })
+        );
         return;
       }
 
@@ -59,48 +128,48 @@ 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({ id, ipAdapterId, imageDTO: activeData.payload.imageDTO }));
+        dispatch(
+          rgLayerIPAdapterImageChanged({
+            layerId,
+            ipAdapterId,
+            imageDTO: activeData.payload.imageDTO,
+          })
+        );
         return;
       }
 
       /**
-       * 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 { layerId } = overData.context;
-        const { x, y } = getState().canvasV2.bbox.rect;
+        dispatch(
-        const overrides: Partial<CanvasRasterLayerState> = {
+          iiLayerImageChanged({
-          objects: [imageObject],
+            layerId,
-          position: { x, y },
+            imageDTO: activeData.payload.imageDTO,
-        };
+          })
-        dispatch(rasterLayerAdded({ overrides, isSelected: true }));
+        );
         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);
+        dispatch(setInitialCanvasImage(activeData.payload.imageDTO, selectOptimalDimension(getState())));
-        const { x, y } = getState().canvasV2.bbox.rect;
-        const overrides: Partial<CanvasControlLayerState> = {
-          objects: [imageObject],
-          position: { x, y },
-        };
-        dispatch(controlLayerAdded({ overrides, isSelected: true }));
         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.isCanvasImage) ||
-        imagesUsage.some((i) => i.isControlAdapterImage) ||
+        imagesUsage.some((i) => i.isControlImage) ||
-        imagesUsage.some((i) => i.isIPAdapterImage) ||
+        imagesUsage.some((i) => i.isNodesImage);
-        imagesUsage.some((i) => i.isLayerImage);
 
       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/canvasV2Slice';
+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,31 +99,70 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
         return;
       }
 
-      // if (postUploadAction?.type === 'SET_CA_IMAGE') {
+      if (postUploadAction?.type === 'SET_CONTROL_ADAPTER_IMAGE') {
-      //   const { id } = postUploadAction;
-      //   dispatch(caImageChanged({ id, imageDTO }));
-      //   toast({ ...DEFAULT_UPLOADED_TOAST, description: t('toast.setControlImage') });
-      //   return;
-      // }
-
-      if (postUploadAction?.type === 'SET_IPA_IMAGE') {
         const { id } = postUploadAction;
-        dispatch(ipaImageChanged({ id, imageDTO }));
+        dispatch(
-        toast({ ...DEFAULT_UPLOADED_TOAST, description: t('toast.setControlImage') });
+          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') {
+      if (postUploadAction?.type === 'SET_CA_LAYER_IMAGE') {
-        const { id, ipAdapterId } = postUploadAction;
+        const { layerId } = postUploadAction;
-        dispatch(rgIPAdapterImageChanged({ id, ipAdapterId, imageDTO }));
+        dispatch(caLayerImageChanged({ layerId, imageDTO }));
-        toast({ ...DEFAULT_UPLOADED_TOAST, description: t('toast.setControlImage') });
+        toast({
-        return;
+          ...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;
       }
     },
@@ -113,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();