translationBot(ui): update translation (Spanish)

Currently translated at 30.5% (380 of 1243 strings)

Co-authored-by: gallegonovato <fran-carro@hotmail.es>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/es/
Translation: InvokeAI/Web UI

docs/contributing/frontend/WORKFLOWS.md

@@ -117,13 +117,13 @@ Stateless fields do not store their value in the node, so their field instances
 
 "Custom" fields will always be treated as stateless fields.
 
-##### Collection and Scalar Fields
+##### Single and Collection Fields
 
-Field types have a name and two flags which may identify it as a **collection** or **collection or scalar** field.
+Field types have a name and cardinality property which may identify it as a **SINGLE**, **COLLECTION** or **SINGLE_OR_COLLECTION** field.
 
-If a field is annotated in python as a list, its field type is parsed and flagged as a **collection** type (e.g. `list[int]`).
-
-If it is annotated as a union of a type and list, the type will be flagged as a **collection or scalar** type (e.g. `Union[int, list[int]]`). Fields may not be unions of different types (e.g. `Union[int, list[str]]` and `Union[int, str]` are not allowed).
+- If a field is annotated in python as a singular value or class, its field type is parsed as a **SINGLE** type (e.g. `int`, `ImageField`, `str`).
+- If a field is annotated in python as a list, its field type is parsed as a **COLLECTION** type (e.g. `list[int]`).
+- If it is annotated as a union of a type and list, the type will be parsed as a **SINGLE_OR_COLLECTION** type (e.g. `Union[int, list[int]]`). Fields may not be unions of different types (e.g. `Union[int, list[str]]` and `Union[int, str]` are not allowed).
 
 ## Implementation
 
@@ -173,8 +173,7 @@ Field types are represented as structured objects:
 ```ts
 type FieldType = {
   name: string;
-  isCollection: boolean;
-  isCollectionOrScalar: boolean;
+  cardinality: 'SINGLE' | 'COLLECTION' | 'SINGLE_OR_COLLECTION';
 };
 ```
 
@@ -186,7 +185,7 @@ There are 4 general cases for field type parsing.
 
 When a field is annotated as a primitive values (e.g. `int`, `str`, `float`), the field type parsing is fairly straightforward. The field is represented by a simple OpenAPI **schema object**, which has a `type` property.
 
-We create a field type name from this `type` string (e.g. `string` -> `StringField`).
+We create a field type name from this `type` string (e.g. `string` -> `StringField`). The cardinality is `"SINGLE"`.
 
 ##### Complex Types
 
@@ -200,13 +199,13 @@ We need to **dereference** the schema to pull these out. Dereferencing may requi
 
 When a field is annotated as a list of a single type, the schema object has an `items` property. They may be a schema object or reference object and must be parsed to determine the item type.
 
-We use the item type for field type name, adding `isCollection: true` to the field type.
+We use the item type for field type name. The cardinality is `"COLLECTION"`.
 
-##### Collection or Scalar Types
+##### Single or Collection Types
 
 When a field is annotated as a union of a type and list of that type, the schema object has an `anyOf` property, which holds a list of valid types for the union.
 
-After verifying that the union has two members (a type and list of the same type), we use the type for field type name, adding `isCollectionOrScalar: true` to the field type.
+After verifying that the union has two members (a type and list of the same type), we use the type for field type name, with cardinality `"SINGLE_OR_COLLECTION"`.
 
 ##### Optional Fields
 

docs/features/CONTROLNET.md

@@ -165,7 +165,7 @@ Additionally, each  section can be expanded with the "Show Advanced" button in o
 There are several ways to install IP-Adapter models with an existing InvokeAI installation:
 
 1. Through the command line interface launched from the invoke.sh / invoke.bat scripts, option [4] to download models.
-2. Through the Model Manager UI with models from the *Tools* section of [www.models.invoke.ai](https://www.models.invoke.ai). To do this, copy the repo ID from the desired model page, and paste it in the Add Model field of the model manager. **Note** Both the IP-Adapter and the Image Encoder must be installed for IP-Adapter to work. For example, the [SD 1.5 IP-Adapter](https://models.invoke.ai/InvokeAI/ip_adapter_plus_sd15) and [SD1.5 Image Encoder](https://models.invoke.ai/InvokeAI/ip_adapter_sd_image_encoder) must be installed to use IP-Adapter with SD1.5 based models.  
+2. Through the Model Manager UI with models from the *Tools* section of [models.invoke.ai](https://models.invoke.ai). To do this, copy the repo ID from the desired model page, and paste it in the Add Model field of the model manager. **Note** Both the IP-Adapter and the Image Encoder must be installed for IP-Adapter to work. For example, the [SD 1.5 IP-Adapter](https://models.invoke.ai/InvokeAI/ip_adapter_plus_sd15) and [SD1.5 Image Encoder](https://models.invoke.ai/InvokeAI/ip_adapter_sd_image_encoder) must be installed to use IP-Adapter with SD1.5 based models.  
 3. **Advanced -- Not recommended ** Manually downloading the IP-Adapter and Image Encoder files - Image Encoder folders shouid be placed in the `models\any\clip_vision` folders. IP Adapter Model folders should be placed in the relevant `ip-adapter` folder of relevant base model folder of Invoke root directory. For example, for the SDXL IP-Adapter, files should be added to the `model/sdxl/ip_adapter/` folder. 
 
 #### Using IP-Adapter

docs/installation/020_INSTALL_MANUAL.md

@@ -10,7 +10,7 @@ InvokeAI is distributed as a python package on PyPI, installable with `pip`. The
 
 ### Requirements
 
-Before you start, go through the [installation requirements].
+Before you start, go through the [installation requirements](./INSTALL_REQUIREMENTS.md).
 
 ### Installation Walkthrough
 
@@ -79,7 +79,7 @@ Before you start, go through the [installation requirements].
 
 1. Install the InvokeAI Package. The base command is `pip install InvokeAI --use-pep517`, but you may need to change this depending on your system and the desired features.
 
-    - You may need to provide an [extra index URL]. Select your platform configuration using [this tool on the PyTorch website]. Copy the `--extra-index-url` string from this and append it to your install command.
+    - You may need to provide an [extra index URL](https://pip.pypa.io/en/stable/cli/pip_install/#cmdoption-extra-index-url). Select your platform configuration using [this tool on the PyTorch website](https://pytorch.org/get-started/locally/). Copy the `--extra-index-url` string from this and append it to your install command.
 
         !!! example "Install with an extra index URL"
 
@@ -116,4 +116,4 @@ Before you start, go through the [installation requirements].
 
     !!! warning
 
-        If the virtual environment is _not_ inside the root directory, then you _must_ specify the path to the root directory with `--root_dir \path\to\invokeai` or the `INVOKEAI_ROOT` environment variable.
+        If the virtual environment is _not_ inside the root directory, then you _must_ specify the path to the root directory with `--root \path\to\invokeai` or the `INVOKEAI_ROOT` environment variable.

installer/templates/invoke.bat.in

@@ -10,8 +10,7 @@ set INVOKEAI_ROOT=.
 echo Desired action:
 echo 1. Generate images with the browser-based interface
 echo 2. Open the developer console
-echo 3. Run the InvokeAI image database maintenance script
-echo 4. Command-line help
+echo 3. Command-line help
 echo Q - Quit
 echo.
 echo To update, download and run the installer from https://github.com/invoke-ai/InvokeAI/releases/latest.
@@ -34,9 +33,6 @@ IF /I "%choice%" == "1" (
     echo *** Type `exit` to quit this shell and deactivate the Python virtual environment ***
     call cmd /k
 ) ELSE IF /I "%choice%" == "3" (
-   echo Running the db maintenance script...
-   python .venv\Scripts\invokeai-db-maintenance.exe
-) ELSE IF /I "%choice%" == "4" (
     echo Displaying command line help...
     python .venv\Scripts\invokeai-web.exe --help %*
     pause

installer/templates/invoke.sh.in

@@ -47,11 +47,6 @@ do_choice() {
         bash --init-file "$file_name"
         ;;
     3)
-        clear
-        printf "Running the db maintenance script\n"
-        invokeai-db-maintenance --root ${INVOKEAI_ROOT}
-        ;;
-    4)
         clear
         printf "Command-line help\n"
         invokeai-web --help
@@ -71,8 +66,7 @@ do_line_input() {
     printf "What would you like to do?\n"
     printf "1: Generate images using the browser-based interface\n"
     printf "2: Open the developer console\n"
-    printf "3: Run the InvokeAI image database maintenance script\n"
-    printf "4: Command-line help\n"
+    printf "3: Command-line help\n"
     printf "Q: Quit\n\n"
     printf "To update, download and run the installer from https://github.com/invoke-ai/InvokeAI/releases/latest.\n\n"
     read -p "Please enter 1-4, Q: [1] " yn

invokeai/app/api/routers/images.py

@@ -6,13 +6,12 @@ from fastapi import BackgroundTasks, Body, HTTPException, Path, Query, Request,
 from fastapi.responses import FileResponse
 from fastapi.routing import APIRouter
 from PIL import Image
-from pydantic import BaseModel, Field, ValidationError
+from pydantic import BaseModel, Field, JsonValue
 
-from invokeai.app.invocations.fields import MetadataField, MetadataFieldValidator
+from invokeai.app.invocations.fields import MetadataField
 from invokeai.app.services.image_records.image_records_common import ImageCategory, ImageRecordChanges, ResourceOrigin
 from invokeai.app.services.images.images_common import ImageDTO, ImageUrlsDTO
 from invokeai.app.services.shared.pagination import OffsetPaginatedResults
-from invokeai.app.services.workflow_records.workflow_records_common import WorkflowWithoutID, WorkflowWithoutIDValidator
 
 from ..dependencies import ApiDependencies
 
@@ -42,13 +41,17 @@ async def upload_image(
     board_id: Optional[str] = Query(default=None, description="The board to add this image to, if any"),
     session_id: Optional[str] = Query(default=None, description="The session ID associated with this upload, if any"),
     crop_visible: Optional[bool] = Query(default=False, description="Whether to crop the image"),
+    metadata: Optional[JsonValue] = Body(
+        default=None, description="The metadata to associate with the image", embed=True
+    ),
 ) -> ImageDTO:
     """Uploads an image"""
     if not file.content_type or not file.content_type.startswith("image"):
         raise HTTPException(status_code=415, detail="Not an image")
 
-    metadata = None
-    workflow = None
+    _metadata = None
+    _workflow = None
+    _graph = None
 
     contents = await file.read()
     try:
@@ -62,22 +65,28 @@ async def upload_image(
 
     # TODO: retain non-invokeai metadata on upload?
     # attempt to parse metadata from image
-    metadata_raw = pil_image.info.get("invokeai_metadata", None)
-    if metadata_raw:
-        try:
-            metadata = MetadataFieldValidator.validate_json(metadata_raw)
-        except ValidationError:
-            ApiDependencies.invoker.services.logger.warn("Failed to parse metadata for uploaded image")
-            pass
+    metadata_raw = metadata if isinstance(metadata, str) else pil_image.info.get("invokeai_metadata", None)
+    if isinstance(metadata_raw, str):
+        _metadata = metadata_raw
+    else:
+        ApiDependencies.invoker.services.logger.debug("Failed to parse metadata for uploaded image")
+        pass
 
     # attempt to parse workflow from image
     workflow_raw = pil_image.info.get("invokeai_workflow", None)
-    if workflow_raw is not None:
-        try:
-            workflow = WorkflowWithoutIDValidator.validate_json(workflow_raw)
-        except ValidationError:
-            ApiDependencies.invoker.services.logger.warn("Failed to parse metadata for uploaded image")
-            pass
+    if isinstance(workflow_raw, str):
+        _workflow = workflow_raw
+    else:
+        ApiDependencies.invoker.services.logger.debug("Failed to parse workflow for uploaded image")
+        pass
+
+    # attempt to extract graph from image
+    graph_raw = pil_image.info.get("invokeai_graph", None)
+    if isinstance(graph_raw, str):
+        _graph = graph_raw
+    else:
+        ApiDependencies.invoker.services.logger.debug("Failed to parse graph for uploaded image")
+        pass
 
     try:
         image_dto = ApiDependencies.invoker.services.images.create(
@@ -86,8 +95,9 @@ async def upload_image(
             image_category=image_category,
             session_id=session_id,
             board_id=board_id,
-            metadata=metadata,
-            workflow=workflow,
+            metadata=_metadata,
+            workflow=_workflow,
+            graph=_graph,
             is_intermediate=is_intermediate,
         )
 
@@ -185,14 +195,21 @@ async def get_image_metadata(
         raise HTTPException(status_code=404)
 
 
+class WorkflowAndGraphResponse(BaseModel):
+    workflow: Optional[str] = Field(description="The workflow used to generate the image, as stringified JSON")
+    graph: Optional[str] = Field(description="The graph used to generate the image, as stringified JSON")
+
+
 @images_router.get(
-    "/i/{image_name}/workflow", operation_id="get_image_workflow", response_model=Optional[WorkflowWithoutID]
+    "/i/{image_name}/workflow", operation_id="get_image_workflow", response_model=WorkflowAndGraphResponse
 )
 async def get_image_workflow(
     image_name: str = Path(description="The name of image whose workflow to get"),
-) -> Optional[WorkflowWithoutID]:
+) -> WorkflowAndGraphResponse:
     try:
-        return ApiDependencies.invoker.services.images.get_workflow(image_name)
+        workflow = ApiDependencies.invoker.services.images.get_workflow(image_name)
+        graph = ApiDependencies.invoker.services.images.get_graph(image_name)
+        return WorkflowAndGraphResponse(workflow=workflow, graph=graph)
     except Exception:
         raise HTTPException(status_code=404)
 

invokeai/app/invocations/controlnet_image_processors.py

@@ -24,7 +24,6 @@ from pydantic import BaseModel, Field, field_validator, model_validator
 from invokeai.app.invocations.fields import (
     FieldDescriptions,
     ImageField,
-    Input,
     InputField,
     OutputField,
     UIType,
@@ -80,13 +79,13 @@ class ControlOutput(BaseInvocationOutput):
     control: ControlField = OutputField(description=FieldDescriptions.control)
 
 
-@invocation("controlnet", title="ControlNet", tags=["controlnet"], category="controlnet", version="1.1.1")
+@invocation("controlnet", title="ControlNet", tags=["controlnet"], category="controlnet", version="1.1.2")
 class ControlNetInvocation(BaseInvocation):
     """Collects ControlNet info to pass to other nodes"""
 
     image: ImageField = InputField(description="The control image")
     control_model: ModelIdentifierField = InputField(
-        description=FieldDescriptions.controlnet_model, input=Input.Direct, ui_type=UIType.ControlNetModel
+        description=FieldDescriptions.controlnet_model, ui_type=UIType.ControlNetModel
     )
     control_weight: Union[float, List[float]] = InputField(
         default=1.0, ge=-1, le=2, description="The weight given to the ControlNet"

invokeai/app/invocations/ip_adapter.py

@@ -5,7 +5,7 @@ from pydantic import BaseModel, Field, field_validator, model_validator
 from typing_extensions import Self
 
 from invokeai.app.invocations.baseinvocation import BaseInvocation, BaseInvocationOutput, invocation, invocation_output
-from invokeai.app.invocations.fields import FieldDescriptions, Input, InputField, OutputField, TensorField, UIType
+from invokeai.app.invocations.fields import FieldDescriptions, InputField, OutputField, TensorField, UIType
 from invokeai.app.invocations.model import ModelIdentifierField
 from invokeai.app.invocations.primitives import ImageField
 from invokeai.app.invocations.util import validate_begin_end_step, validate_weights
@@ -58,7 +58,7 @@ class IPAdapterOutput(BaseInvocationOutput):
 CLIP_VISION_MODEL_MAP = {"ViT-H": "ip_adapter_sd_image_encoder", "ViT-G": "ip_adapter_sdxl_image_encoder"}
 
 
-@invocation("ip_adapter", title="IP-Adapter", tags=["ip_adapter", "control"], category="ip_adapter", version="1.4.0")
+@invocation("ip_adapter", title="IP-Adapter", tags=["ip_adapter", "control"], category="ip_adapter", version="1.4.1")
 class IPAdapterInvocation(BaseInvocation):
     """Collects IP-Adapter info to pass to other nodes."""
 
@@ -67,7 +67,6 @@ class IPAdapterInvocation(BaseInvocation):
     ip_adapter_model: ModelIdentifierField = InputField(
         description="The IP-Adapter model.",
         title="IP-Adapter Model",
-        input=Input.Direct,
         ui_order=-1,
         ui_type=UIType.IPAdapterModel,
     )

invokeai/app/invocations/model.py

@@ -11,6 +11,7 @@ from invokeai.backend.model_manager.config import AnyModelConfig, BaseModelType,
 from .baseinvocation import (
     BaseInvocation,
     BaseInvocationOutput,
+    Classification,
     invocation,
     invocation_output,
 )
@@ -93,19 +94,46 @@ class ModelLoaderOutput(UNetOutput, CLIPOutput, VAEOutput):
     pass
 
 
+@invocation_output("model_identifier_output")
+class ModelIdentifierOutput(BaseInvocationOutput):
+    """Model identifier output"""
+
+    model: ModelIdentifierField = OutputField(description="Model identifier", title="Model")
+
+
+@invocation(
+    "model_identifier",
+    title="Model identifier",
+    tags=["model"],
+    category="model",
+    version="1.0.0",
+    classification=Classification.Prototype,
+)
+class ModelIdentifierInvocation(BaseInvocation):
+    """Selects any model, outputting it its identifier. Be careful with this one! The identifier will be accepted as
+    input for any model, even if the model types don't match. If you connect this to a mismatched input, you'll get an
+    error."""
+
+    model: ModelIdentifierField = InputField(description="The model to select", title="Model")
+
+    def invoke(self, context: InvocationContext) -> ModelIdentifierOutput:
+        if not context.models.exists(self.model.key):
+            raise Exception(f"Unknown model {self.model.key}")
+
+        return ModelIdentifierOutput(model=self.model)
+
+
 @invocation(
     "main_model_loader",
     title="Main Model",
     tags=["model"],
     category="model",
-    version="1.0.2",
+    version="1.0.3",
 )
 class MainModelLoaderInvocation(BaseInvocation):
     """Loads a main model, outputting its submodels."""
 
-    model: ModelIdentifierField = InputField(
-        description=FieldDescriptions.main_model, input=Input.Direct, ui_type=UIType.MainModel
-    )
+    model: ModelIdentifierField = InputField(description=FieldDescriptions.main_model, ui_type=UIType.MainModel)
     # TODO: precision?
 
     def invoke(self, context: InvocationContext) -> ModelLoaderOutput:
@@ -134,12 +162,12 @@ class LoRALoaderOutput(BaseInvocationOutput):
     clip: Optional[CLIPField] = OutputField(default=None, description=FieldDescriptions.clip, title="CLIP")
 
 
-@invocation("lora_loader", title="LoRA", tags=["model"], category="model", version="1.0.2")
+@invocation("lora_loader", title="LoRA", tags=["model"], category="model", version="1.0.3")
 class LoRALoaderInvocation(BaseInvocation):
     """Apply selected lora to unet and text_encoder."""
 
     lora: ModelIdentifierField = InputField(
-        description=FieldDescriptions.lora_model, input=Input.Direct, title="LoRA", ui_type=UIType.LoRAModel
+        description=FieldDescriptions.lora_model, title="LoRA", ui_type=UIType.LoRAModel
     )
     weight: float = InputField(default=0.75, description=FieldDescriptions.lora_weight)
     unet: Optional[UNetField] = InputField(
@@ -197,12 +225,12 @@ class LoRASelectorOutput(BaseInvocationOutput):
     lora: LoRAField = OutputField(description="LoRA model and weight", title="LoRA")
 
 
-@invocation("lora_selector", title="LoRA Selector", tags=["model"], category="model", version="1.0.0")
+@invocation("lora_selector", title="LoRA Selector", tags=["model"], category="model", version="1.0.1")
 class LoRASelectorInvocation(BaseInvocation):
     """Selects a LoRA model and weight."""
 
     lora: ModelIdentifierField = InputField(
-        description=FieldDescriptions.lora_model, input=Input.Direct, title="LoRA", ui_type=UIType.LoRAModel
+        description=FieldDescriptions.lora_model, title="LoRA", ui_type=UIType.LoRAModel
     )
     weight: float = InputField(default=0.75, description=FieldDescriptions.lora_weight)
 
@@ -273,13 +301,13 @@ class SDXLLoRALoaderOutput(BaseInvocationOutput):
     title="SDXL LoRA",
     tags=["lora", "model"],
     category="model",
-    version="1.0.2",
+    version="1.0.3",
 )
 class SDXLLoRALoaderInvocation(BaseInvocation):
     """Apply selected lora to unet and text_encoder."""
 
     lora: ModelIdentifierField = InputField(
-        description=FieldDescriptions.lora_model, input=Input.Direct, title="LoRA", ui_type=UIType.LoRAModel
+        description=FieldDescriptions.lora_model, title="LoRA", ui_type=UIType.LoRAModel
     )
     weight: float = InputField(default=0.75, description=FieldDescriptions.lora_weight)
     unet: Optional[UNetField] = InputField(
@@ -414,12 +442,12 @@ class SDXLLoRACollectionLoader(BaseInvocation):
         return output
 
 
-@invocation("vae_loader", title="VAE", tags=["vae", "model"], category="model", version="1.0.2")
+@invocation("vae_loader", title="VAE", tags=["vae", "model"], category="model", version="1.0.3")
 class VAELoaderInvocation(BaseInvocation):
     """Loads a VAE model, outputting a VaeLoaderOutput"""
 
     vae_model: ModelIdentifierField = InputField(
-        description=FieldDescriptions.vae_model, input=Input.Direct, title="VAE", ui_type=UIType.VAEModel
+        description=FieldDescriptions.vae_model, title="VAE", ui_type=UIType.VAEModel
     )
 
     def invoke(self, context: InvocationContext) -> VAEOutput:

invokeai/app/invocations/sdxl.py

@@ -1,4 +1,4 @@
-from invokeai.app.invocations.fields import FieldDescriptions, Input, InputField, OutputField, UIType
+from invokeai.app.invocations.fields import FieldDescriptions, InputField, OutputField, UIType
 from invokeai.app.services.shared.invocation_context import InvocationContext
 from invokeai.backend.model_manager import SubModelType
 
@@ -30,12 +30,12 @@ class SDXLRefinerModelLoaderOutput(BaseInvocationOutput):
     vae: VAEField = OutputField(description=FieldDescriptions.vae, title="VAE")
 
 
-@invocation("sdxl_model_loader", title="SDXL Main Model", tags=["model", "sdxl"], category="model", version="1.0.2")
+@invocation("sdxl_model_loader", title="SDXL Main Model", tags=["model", "sdxl"], category="model", version="1.0.3")
 class SDXLModelLoaderInvocation(BaseInvocation):
     """Loads an sdxl base model, outputting its submodels."""
 
     model: ModelIdentifierField = InputField(
-        description=FieldDescriptions.sdxl_main_model, input=Input.Direct, ui_type=UIType.SDXLMainModel
+        description=FieldDescriptions.sdxl_main_model, ui_type=UIType.SDXLMainModel
     )
     # TODO: precision?
 
@@ -67,13 +67,13 @@ class SDXLModelLoaderInvocation(BaseInvocation):
     title="SDXL Refiner Model",
     tags=["model", "sdxl", "refiner"],
     category="model",
-    version="1.0.2",
+    version="1.0.3",
 )
 class SDXLRefinerModelLoaderInvocation(BaseInvocation):
     """Loads an sdxl refiner model, outputting its submodels."""
 
     model: ModelIdentifierField = InputField(
-        description=FieldDescriptions.sdxl_refiner_model, input=Input.Direct, ui_type=UIType.SDXLRefinerModel
+        description=FieldDescriptions.sdxl_refiner_model, ui_type=UIType.SDXLRefinerModel
     )
     # TODO: precision?
 

invokeai/app/invocations/t2i_adapter.py

@@ -8,7 +8,7 @@ from invokeai.app.invocations.baseinvocation import (
     invocation,
     invocation_output,
 )
-from invokeai.app.invocations.fields import FieldDescriptions, ImageField, Input, InputField, OutputField, UIType
+from invokeai.app.invocations.fields import FieldDescriptions, ImageField, InputField, OutputField, UIType
 from invokeai.app.invocations.model import ModelIdentifierField
 from invokeai.app.invocations.util import validate_begin_end_step, validate_weights
 from invokeai.app.services.shared.invocation_context import InvocationContext
@@ -45,7 +45,7 @@ class T2IAdapterOutput(BaseInvocationOutput):
 
 
 @invocation(
-    "t2i_adapter", title="T2I-Adapter", tags=["t2i_adapter", "control"], category="t2i_adapter", version="1.0.2"
+    "t2i_adapter", title="T2I-Adapter", tags=["t2i_adapter", "control"], category="t2i_adapter", version="1.0.3"
 )
 class T2IAdapterInvocation(BaseInvocation):
     """Collects T2I-Adapter info to pass to other nodes."""
@@ -55,7 +55,6 @@ class T2IAdapterInvocation(BaseInvocation):
     t2i_adapter_model: ModelIdentifierField = InputField(
         description="The T2I-Adapter model.",
         title="T2I-Adapter Model",
-        input=Input.Direct,
         ui_order=-1,
         ui_type=UIType.T2IAdapterModel,
     )

invokeai/app/services/events/events_base.py

@@ -122,6 +122,8 @@ class EventServiceBase:
         source_node_id: str,
         error_type: str,
         error: str,
+        user_id: str | None,
+        project_id: str | None,
     ) -> None:
         """Emitted when an invocation has completed"""
         self.__emit_queue_event(
@@ -135,6 +137,8 @@ class EventServiceBase:
                 "source_node_id": source_node_id,
                 "error_type": error_type,
                 "error": error,
+                "user_id": user_id,
+                "project_id": project_id,
             },
         )
 

invokeai/app/services/image_files/image_files_base.py

@@ -4,9 +4,6 @@ from typing import Optional
 
 from PIL.Image import Image as PILImageType
 
-from invokeai.app.invocations.fields import MetadataField
-from invokeai.app.services.workflow_records.workflow_records_common import WorkflowWithoutID
-
 
 class ImageFileStorageBase(ABC):
     """Low-level service responsible for storing and retrieving image files."""
@@ -33,8 +30,9 @@ class ImageFileStorageBase(ABC):
         self,
         image: PILImageType,
         image_name: str,
-        metadata: Optional[MetadataField] = None,
-        workflow: Optional[WorkflowWithoutID] = None,
+        metadata: Optional[str] = None,
+        workflow: Optional[str] = None,
+        graph: Optional[str] = None,
         thumbnail_size: int = 256,
     ) -> None:
         """Saves an image and a 256x256 WEBP thumbnail. Returns a tuple of the image name, thumbnail name, and created timestamp."""
@@ -46,6 +44,11 @@ class ImageFileStorageBase(ABC):
         pass
 
     @abstractmethod
-    def get_workflow(self, image_name: str) -> Optional[WorkflowWithoutID]:
+    def get_workflow(self, image_name: str) -> Optional[str]:
         """Gets the workflow of an image."""
         pass
+
+    @abstractmethod
+    def get_graph(self, image_name: str) -> Optional[str]:
+        """Gets the graph of an image."""
+        pass

invokeai/app/services/image_files/image_files_disk.py

@@ -7,9 +7,7 @@ from PIL import Image, PngImagePlugin
 from PIL.Image import Image as PILImageType
 from send2trash import send2trash
 
-from invokeai.app.invocations.fields import MetadataField
 from invokeai.app.services.invoker import Invoker
-from invokeai.app.services.workflow_records.workflow_records_common import WorkflowWithoutID
 from invokeai.app.util.thumbnails import get_thumbnail_name, make_thumbnail
 
 from .image_files_base import ImageFileStorageBase
@@ -56,8 +54,9 @@ class DiskImageFileStorage(ImageFileStorageBase):
         self,
         image: PILImageType,
         image_name: str,
-        metadata: Optional[MetadataField] = None,
-        workflow: Optional[WorkflowWithoutID] = None,
+        metadata: Optional[str] = None,
+        workflow: Optional[str] = None,
+        graph: Optional[str] = None,
         thumbnail_size: int = 256,
     ) -> None:
         try:
@@ -68,13 +67,14 @@ class DiskImageFileStorage(ImageFileStorageBase):
             info_dict = {}
 
             if metadata is not None:
-                metadata_json = metadata.model_dump_json()
-                info_dict["invokeai_metadata"] = metadata_json
-                pnginfo.add_text("invokeai_metadata", metadata_json)
+                info_dict["invokeai_metadata"] = metadata
+                pnginfo.add_text("invokeai_metadata", metadata)
             if workflow is not None:
-                workflow_json = workflow.model_dump_json()
-                info_dict["invokeai_workflow"] = workflow_json
-                pnginfo.add_text("invokeai_workflow", workflow_json)
+                info_dict["invokeai_workflow"] = workflow
+                pnginfo.add_text("invokeai_workflow", workflow)
+            if graph is not None:
+                info_dict["invokeai_graph"] = graph
+                pnginfo.add_text("invokeai_graph", graph)
 
             # When saving the image, the image object's info field is not populated. We need to set it
             image.info = info_dict
@@ -129,11 +129,18 @@ class DiskImageFileStorage(ImageFileStorageBase):
         path = path if isinstance(path, Path) else Path(path)
         return path.exists()
 
-    def get_workflow(self, image_name: str) -> WorkflowWithoutID | None:
+    def get_workflow(self, image_name: str) -> str | None:
         image = self.get(image_name)
         workflow = image.info.get("invokeai_workflow", None)
-        if workflow is not None:
-            return WorkflowWithoutID.model_validate_json(workflow)
+        if isinstance(workflow, str):
+            return workflow
+        return None
+
+    def get_graph(self, image_name: str) -> str | None:
+        image = self.get(image_name)
+        graph = image.info.get("invokeai_graph", None)
+        if isinstance(graph, str):
+            return graph
         return None
 
     def __validate_storage_folders(self) -> None:

invokeai/app/services/image_records/image_records_base.py

@@ -80,7 +80,7 @@ class ImageRecordStorageBase(ABC):
         starred: Optional[bool] = False,
         session_id: Optional[str] = None,
         node_id: Optional[str] = None,
-        metadata: Optional[MetadataField] = None,
+        metadata: Optional[str] = None,
     ) -> datetime:
         """Saves an image record."""
         pass

invokeai/app/services/image_records/image_records_sqlite.py

@@ -328,10 +328,9 @@ class SqliteImageRecordStorage(ImageRecordStorageBase):
         starred: Optional[bool] = False,
         session_id: Optional[str] = None,
         node_id: Optional[str] = None,
-        metadata: Optional[MetadataField] = None,
+        metadata: Optional[str] = None,
     ) -> datetime:
         try:
-            metadata_json = metadata.model_dump_json() if metadata is not None else None
             self._lock.acquire()
             self._cursor.execute(
                 """--sql
@@ -358,7 +357,7 @@ class SqliteImageRecordStorage(ImageRecordStorageBase):
                     height,
                     node_id,
                     session_id,
-                    metadata_json,
+                    metadata,
                     is_intermediate,
                     starred,
                     has_workflow,

invokeai/app/services/images/images_base.py

@@ -12,7 +12,6 @@ from invokeai.app.services.image_records.image_records_common import (
 )
 from invokeai.app.services.images.images_common import ImageDTO
 from invokeai.app.services.shared.pagination import OffsetPaginatedResults
-from invokeai.app.services.workflow_records.workflow_records_common import WorkflowWithoutID
 
 
 class ImageServiceABC(ABC):
@@ -51,8 +50,9 @@ class ImageServiceABC(ABC):
         session_id: Optional[str] = None,
         board_id: Optional[str] = None,
         is_intermediate: Optional[bool] = False,
-        metadata: Optional[MetadataField] = None,
-        workflow: Optional[WorkflowWithoutID] = None,
+        metadata: Optional[str] = None,
+        workflow: Optional[str] = None,
+        graph: Optional[str] = None,
     ) -> ImageDTO:
         """Creates an image, storing the file and its metadata."""
         pass
@@ -87,7 +87,12 @@ class ImageServiceABC(ABC):
         pass
 
     @abstractmethod
-    def get_workflow(self, image_name: str) -> Optional[WorkflowWithoutID]:
+    def get_workflow(self, image_name: str) -> Optional[str]:
+        """Gets an image's workflow."""
+        pass
+
+    @abstractmethod
+    def get_graph(self, image_name: str) -> Optional[str]:
         """Gets an image's workflow."""
         pass
 

invokeai/app/services/images/images_default.py

@@ -5,7 +5,6 @@ from PIL.Image import Image as PILImageType
 from invokeai.app.invocations.fields import MetadataField
 from invokeai.app.services.invoker import Invoker
 from invokeai.app.services.shared.pagination import OffsetPaginatedResults
-from invokeai.app.services.workflow_records.workflow_records_common import WorkflowWithoutID
 
 from ..image_files.image_files_common import (
     ImageFileDeleteException,
@@ -42,8 +41,9 @@ class ImageService(ImageServiceABC):
         session_id: Optional[str] = None,
         board_id: Optional[str] = None,
         is_intermediate: Optional[bool] = False,
-        metadata: Optional[MetadataField] = None,
-        workflow: Optional[WorkflowWithoutID] = None,
+        metadata: Optional[str] = None,
+        workflow: Optional[str] = None,
+        graph: Optional[str] = None,
     ) -> ImageDTO:
         if image_origin not in ResourceOrigin:
             raise InvalidOriginException
@@ -64,7 +64,7 @@ class ImageService(ImageServiceABC):
                 image_category=image_category,
                 width=width,
                 height=height,
-                has_workflow=workflow is not None,
+                has_workflow=workflow is not None or graph is not None,
                 # Meta fields
                 is_intermediate=is_intermediate,
                 # Nullable fields
@@ -75,7 +75,7 @@ class ImageService(ImageServiceABC):
             if board_id is not None:
                 self.__invoker.services.board_image_records.add_image_to_board(board_id=board_id, image_name=image_name)
             self.__invoker.services.image_files.save(
-                image_name=image_name, image=image, metadata=metadata, workflow=workflow
+                image_name=image_name, image=image, metadata=metadata, workflow=workflow, graph=graph
             )
             image_dto = self.get_dto(image_name)
 
@@ -157,7 +157,7 @@ class ImageService(ImageServiceABC):
             self.__invoker.services.logger.error("Problem getting image metadata")
             raise e
 
-    def get_workflow(self, image_name: str) -> Optional[WorkflowWithoutID]:
+    def get_workflow(self, image_name: str) -> Optional[str]:
         try:
             return self.__invoker.services.image_files.get_workflow(image_name)
         except ImageFileNotFoundException:
@@ -167,6 +167,16 @@ class ImageService(ImageServiceABC):
             self.__invoker.services.logger.error("Problem getting image workflow")
             raise
 
+    def get_graph(self, image_name: str) -> Optional[str]:
+        try:
+            return self.__invoker.services.image_files.get_graph(image_name)
+        except ImageFileNotFoundException:
+            self.__invoker.services.logger.error("Image file not found")
+            raise
+        except Exception:
+            self.__invoker.services.logger.error("Problem getting image graph")
+            raise
+
     def get_path(self, image_name: str, thumbnail: bool = False) -> str:
         try:
             return str(self.__invoker.services.image_files.get_path(image_name, thumbnail))

invokeai/app/services/session_processor/session_processor_default.py

@@ -237,6 +237,8 @@ class DefaultSessionProcessor(SessionProcessorBase):
                                 source_node_id=source_invocation_id,
                                 error_type=e.__class__.__name__,
                                 error=error,
+                                user_id=None,
+                                project_id=None,
                             )
                             pass
 

invokeai/app/services/shared/invocation_context.py

@@ -180,9 +180,9 @@ class ImagesInterface(InvocationContextInterface):
         # If `metadata` is provided directly, use that. Else, use the metadata provided by `WithMetadata`, falling back to None.
         metadata_ = None
         if metadata:
-            metadata_ = metadata
-        elif isinstance(self._data.invocation, WithMetadata):
-            metadata_ = self._data.invocation.metadata
+            metadata_ = metadata.model_dump_json()
+        elif isinstance(self._data.invocation, WithMetadata) and self._data.invocation.metadata:
+            metadata_ = self._data.invocation.metadata.model_dump_json()
 
         # If `board_id` is provided directly, use that. Else, use the board provided by `WithBoard`, falling back to None.
         board_id_ = None
@@ -191,6 +191,14 @@ class ImagesInterface(InvocationContextInterface):
         elif isinstance(self._data.invocation, WithBoard) and self._data.invocation.board:
             board_id_ = self._data.invocation.board.board_id
 
+        workflow_ = None
+        if self._data.queue_item.workflow:
+            workflow_ = self._data.queue_item.workflow.model_dump_json()
+
+        graph_ = None
+        if self._data.queue_item.session.graph:
+            graph_ = self._data.queue_item.session.graph.model_dump_json()
+
         return self._services.images.create(
             image=image,
             is_intermediate=self._data.invocation.is_intermediate,
@@ -198,7 +206,8 @@ class ImagesInterface(InvocationContextInterface):
             board_id=board_id_,
             metadata=metadata_,
             image_origin=ResourceOrigin.INTERNAL,
-            workflow=self._data.queue_item.workflow,
+            workflow=workflow_,
+            graph=graph_,
             session_id=self._data.queue_item.session_id,
             node_id=self._data.invocation.id,
         )

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

@@ -2,6 +2,7 @@
     "accessibility": {
         "about": "About",
         "createIssue": "Create Issue",
+        "submitSupportTicket": "Submit Support Ticket",
         "invokeProgressBar": "Invoke progress bar",
         "menu": "Menu",
         "mode": "Mode",
@@ -146,7 +147,9 @@
         "viewing": "Viewing",
         "viewingDesc": "Review images in a large gallery view",
         "editing": "Editing",
-        "editingDesc": "Edit on the Control Layers canvas"
+        "editingDesc": "Edit on the Control Layers canvas",
+        "enabled": "Enabled",
+        "disabled": "Disabled"
     },
     "controlnet": {
         "controlAdapter_one": "Control Adapter",
@@ -775,10 +778,14 @@
         "cannotConnectToSelf": "Cannot connect to self",
         "cannotDuplicateConnection": "Cannot create duplicate connections",
         "cannotMixAndMatchCollectionItemTypes": "Cannot mix and match collection item types",
+        "missingNode": "Missing invocation node",
+        "missingInvocationTemplate": "Missing invocation template",
+        "missingFieldTemplate": "Missing field template",
         "nodePack": "Node pack",
         "collection": "Collection",
-        "collectionFieldType": "{{name}} Collection",
-        "collectionOrScalarFieldType": "{{name}} Collection|Scalar",
+        "singleFieldType": "{{name}} (Single)",
+        "collectionFieldType": "{{name}} (Collection)",
+        "collectionOrScalarFieldType": "{{name}} (Single or Collection)",
         "colorCodeEdges": "Color-Code Edges",
         "colorCodeEdgesHelp": "Color-code edges according to their connected fields",
         "connectionWouldCreateCycle": "Connection would create a cycle",
@@ -880,6 +887,7 @@
         "versionUnknown": " Version Unknown",
         "workflow": "Workflow",
         "graph": "Graph",
+        "noGraph": "No Graph",
         "workflowAuthor": "Author",
         "workflowContact": "Contact",
         "workflowDescription": "Short Description",
@@ -892,7 +900,10 @@
         "zoomInNodes": "Zoom In",
         "zoomOutNodes": "Zoom Out",
         "betaDesc": "This invocation is in beta. Until it is stable, it may have breaking changes during app updates. We plan to support this invocation long-term.",
-        "prototypeDesc": "This invocation is a prototype. It may have breaking changes during app updates and may be removed at any time."
+        "prototypeDesc": "This invocation is a prototype. It may have breaking changes during app updates and may be removed at any time.",
+        "imageAccessError": "Unable to find image {{image_name}}, resetting to default",
+        "boardAccessError": "Unable to find board {{board_id}}, resetting to default",
+        "modelAccessError": "Unable to find model {{key}}, resetting to default"
     },
     "parameters": {
         "aspect": "Aspect",
@@ -947,7 +958,7 @@
                 "controlAdapterIncompatibleBaseModel": "incompatible Control Adapter base model",
                 "controlAdapterNoImageSelected": "no Control Adapter image selected",
                 "controlAdapterImageNotProcessed": "Control Adapter image not processed",
-                "t2iAdapterIncompatibleDimensions": "T2I Adapter requires image dimension to be multiples of 64",
+                "t2iAdapterIncompatibleDimensions": "T2I Adapter requires image dimension to be multiples of {{multiple}}",
                 "ipAdapterNoModelSelected": "no IP adapter selected",
                 "ipAdapterIncompatibleBaseModel": "incompatible IP Adapter base model",
                 "ipAdapterNoImageSelected": "no IP Adapter image selected",
@@ -1065,8 +1076,9 @@
     },
     "toast": {
         "addedToBoard": "Added to board",
-        "baseModelChangedCleared_one": "Base model changed, cleared or disabled {{count}} incompatible submodel",
-        "baseModelChangedCleared_other": "Base model changed, cleared or disabled {{count}} incompatible submodels",
+        "baseModelChanged": "Base Model Changed",
+        "baseModelChangedCleared_one": "Cleared or disabled {{count}} incompatible submodel",
+        "baseModelChangedCleared_other": "Cleared or disabled {{count}} incompatible submodels",
         "canceled": "Processing Canceled",
         "canvasCopiedClipboard": "Canvas Copied to Clipboard",
         "canvasDownloaded": "Canvas Downloaded",
@@ -1087,10 +1099,17 @@
         "metadataLoadFailed": "Failed to load metadata",
         "modelAddedSimple": "Model Added to Queue",
         "modelImportCanceled": "Model Import Canceled",
+        "outOfMemoryError": "Out of Memory Error",
+        "outOfMemoryErrorDesc": "Your current generation settings exceed system capacity. Please adjust your settings and try again.",
         "parameters": "Parameters",
-        "parameterNotSet": "{{parameter}} not set",
-        "parameterSet": "{{parameter}} set",
-        "parametersNotSet": "Parameters Not Set",
+        "parameterSet": "Parameter Recalled",
+        "parameterSetDesc": "Recalled {{parameter}}",
+        "parameterNotSet": "Parameter Recalled",
+        "parameterNotSetDesc": "Unable to recall {{parameter}}",
+        "parameterNotSetDescWithMessage": "Unable to recall {{parameter}}: {{message}}",
+        "parametersSet": "Parameters Recalled",
+        "parametersNotSet": "Parameters Not Recalled",
+        "errorCopied": "Error Copied",
         "problemCopyingCanvas": "Problem Copying Canvas",
         "problemCopyingCanvasDesc": "Unable to export base layer",
         "problemCopyingImage": "Unable to Copy Image",
@@ -1110,11 +1129,13 @@
         "sentToImageToImage": "Sent To Image To Image",
         "sentToUnifiedCanvas": "Sent to Unified Canvas",
         "serverError": "Server Error",
+        "sessionRef": "Session: {{sessionId}}",
         "setAsCanvasInitialImage": "Set as canvas initial image",
         "setCanvasInitialImage": "Set canvas initial image",
         "setControlImage": "Set as control image",
         "setInitialImage": "Set as initial image",
         "setNodeField": "Set as node field",
+        "somethingWentWrong": "Something Went Wrong",
         "uploadFailed": "Upload failed",
         "uploadFailedInvalidUploadDesc": "Must be single PNG or JPEG image",
         "uploadInitialImage": "Upload Initial Image",
@@ -1554,7 +1575,6 @@
         "controlLayers": "Control Layers",
         "globalMaskOpacity": "Global Mask Opacity",
         "autoNegative": "Auto Negative",
-        "toggleVisibility": "Toggle Layer Visibility",
         "deletePrompt": "Delete Prompt",
         "resetRegion": "Reset Region",
         "debugLayers": "Debug Layers",

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

@@ -382,7 +382,7 @@
         "canvasMerged": "Lienzo consolidado",
         "sentToImageToImage": "Enviar hacia Imagen a Imagen",
         "sentToUnifiedCanvas": "Enviar hacia Lienzo Consolidado",
-        "parametersNotSet": "Parámetros no establecidos",
+        "parametersNotSet": "Parámetros no recuperados",
         "metadataLoadFailed": "Error al cargar metadatos",
         "serverError": "Error en el servidor",
         "canceled": "Procesando la cancelación",
@@ -390,7 +390,8 @@
         "uploadFailedInvalidUploadDesc": "Debe ser una sola imagen PNG o JPEG",
         "parameterSet": "Conjunto de parámetros",
         "parameterNotSet": "Parámetro no configurado",
-        "problemCopyingImage": "No se puede copiar la imagen"
+        "problemCopyingImage": "No se puede copiar la imagen",
+        "errorCopied": "Error al copiar"
     },
     "tooltip": {
         "feature": {

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

@@ -524,7 +524,20 @@
             "missingNodeTemplate": "Modello di nodo mancante",
             "missingInputForField": "{{nodeLabel}} -> {{fieldLabel}} ingresso mancante",
             "missingFieldTemplate": "Modello di campo mancante",
-            "imageNotProcessedForControlAdapter": "L'immagine dell'adattatore di controllo #{{number}} non è stata elaborata"
+            "imageNotProcessedForControlAdapter": "L'immagine dell'adattatore di controllo #{{number}} non è stata elaborata",
+            "layer": {
+                "initialImageNoImageSelected": "Nessuna immagine iniziale selezionata",
+                "t2iAdapterIncompatibleDimensions": "L'adattatore T2I richiede che la dimensione dell'immagine sia un multiplo di {{multiple}}",
+                "controlAdapterNoModelSelected": "Nessun modello di Adattatore di Controllo selezionato",
+                "controlAdapterIncompatibleBaseModel": "Il modello base dell'adattatore di controllo non è compatibile",
+                "controlAdapterNoImageSelected": "Nessuna immagine dell'adattatore di controllo selezionata",
+                "controlAdapterImageNotProcessed": "Immagine dell'adattatore di controllo non elaborata",
+                "ipAdapterNoModelSelected": "Nessun adattatore IP selezionato",
+                "ipAdapterIncompatibleBaseModel": "Il modello base dell'adattatore IP non è compatibile",
+                "ipAdapterNoImageSelected": "Nessuna immagine dell'adattatore IP selezionata",
+                "rgNoPromptsOrIPAdapters": "Nessun prompt o adattatore IP",
+                "rgNoRegion": "Nessuna regione selezionata"
+            }
         },
         "useCpuNoise": "Usa la CPU per generare rumore",
         "iterations": "Iterazioni",
@@ -824,8 +837,8 @@
         "unableToUpdateNodes_other": "Impossibile aggiornare {{count}} nodi",
         "addLinearView": "Aggiungi alla vista Lineare",
         "unknownErrorValidatingWorkflow": "Errore sconosciuto durante la convalida del flusso di lavoro",
-        "collectionFieldType": "{{name}} Raccolta",
-        "collectionOrScalarFieldType": "{{name}} Raccolta|Scalare",
+        "collectionFieldType": "{{name}} (Raccolta)",
+        "collectionOrScalarFieldType": "{{name}} (Singola o Raccolta)",
         "nodeVersion": "Versione Nodo",
         "inputFieldTypeParseError": "Impossibile analizzare il tipo di campo di input {{node}}.{{field}} ({{message}})",
         "unsupportedArrayItemType": "Tipo di elemento dell'array non supportato \"{{type}}\"",
@@ -863,7 +876,13 @@
         "edit": "Modifica",
         "graph": "Grafico",
         "showEdgeLabelsHelp": "Mostra etichette sui collegamenti, che indicano i nodi collegati",
-        "showEdgeLabels": "Mostra le etichette del collegamento"
+        "showEdgeLabels": "Mostra le etichette del collegamento",
+        "cannotMixAndMatchCollectionItemTypes": "Impossibile combinare e abbinare i tipi di elementi della raccolta",
+        "noGraph": "Nessun grafico",
+        "missingNode": "Nodo di invocazione mancante",
+        "missingInvocationTemplate": "Modello di invocazione mancante",
+        "missingFieldTemplate": "Modello di campo mancante",
+        "singleFieldType": "{{name}} (Singola)"
     },
     "boards": {
         "autoAddBoard": "Aggiungi automaticamente bacheca",
@@ -1034,7 +1053,16 @@
         "graphFailedToQueue": "Impossibile mettere in coda il grafico",
         "batchFieldValues": "Valori Campi Lotto",
         "time": "Tempo",
-        "openQueue": "Apri coda"
+        "openQueue": "Apri coda",
+        "iterations_one": "Iterazione",
+        "iterations_many": "Iterazioni",
+        "iterations_other": "Iterazioni",
+        "prompts_one": "Prompt",
+        "prompts_many": "Prompt",
+        "prompts_other": "Prompt",
+        "generations_one": "Generazione",
+        "generations_many": "Generazioni",
+        "generations_other": "Generazioni"
     },
     "models": {
         "noMatchingModels": "Nessun modello corrispondente",
@@ -1563,7 +1591,6 @@
         "brushSize": "Dimensioni del pennello",
         "globalMaskOpacity": "Opacità globale della maschera",
         "autoNegative": "Auto Negativo",
-        "toggleVisibility": "Attiva/disattiva la visibilità dei livelli",
         "deletePrompt": "Cancella il prompt",
         "debugLayers": "Debug dei Livelli",
         "rectangle": "Rettangolo",

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

@@ -6,7 +6,7 @@
         "settingsLabel": "Instellingen",
         "img2img": "Afbeelding naar afbeelding",
         "unifiedCanvas": "Centraal canvas",
-        "nodes": "Werkstroom-editor",
+        "nodes": "Werkstromen",
         "upload": "Upload",
         "load": "Laad",
         "statusDisconnected": "Niet verbonden",
@@ -34,7 +34,60 @@
         "controlNet": "ControlNet",
         "imageFailedToLoad": "Kan afbeelding niet laden",
         "learnMore": "Meer informatie",
-        "advanced": "Uitgebreid"
+        "advanced": "Uitgebreid",
+        "file": "Bestand",
+        "installed": "Geïnstalleerd",
+        "notInstalled": "Niet $t(common.installed)",
+        "simple": "Eenvoudig",
+        "somethingWentWrong": "Er ging iets mis",
+        "add": "Voeg toe",
+        "checkpoint": "Checkpoint",
+        "details": "Details",
+        "outputs": "Uitvoeren",
+        "save": "Bewaar",
+        "nextPage": "Volgende pagina",
+        "blue": "Blauw",
+        "alpha": "Alfa",
+        "red": "Rood",
+        "editor": "Editor",
+        "folder": "Map",
+        "format": "structuur",
+        "goTo": "Ga naar",
+        "template": "Sjabloon",
+        "input": "Invoer",
+        "loglevel": "Logboekniveau",
+        "safetensors": "Safetensors",
+        "saveAs": "Bewaar als",
+        "created": "Gemaakt",
+        "green": "Groen",
+        "tab": "Tab",
+        "positivePrompt": "Positieve prompt",
+        "negativePrompt": "Negatieve prompt",
+        "selected": "Geselecteerd",
+        "orderBy": "Sorteer op",
+        "prevPage": "Vorige pagina",
+        "beta": "Bèta",
+        "copyError": "$t(gallery.copy) Fout",
+        "toResolve": "Op te lossen",
+        "aboutDesc": "Gebruik je Invoke voor het werk? Kijk dan naar:",
+        "aboutHeading": "Creatieve macht voor jou",
+        "copy": "Kopieer",
+        "data": "Gegevens",
+        "or": "of",
+        "updated": "Bijgewerkt",
+        "outpaint": "outpainten",
+        "viewing": "Bekijken",
+        "viewingDesc": "Beoordeel afbeelding in een grote galerijweergave",
+        "editing": "Bewerken",
+        "editingDesc": "Bewerk op het canvas Stuurlagen",
+        "ai": "ai",
+        "inpaint": "inpainten",
+        "unknown": "Onbekend",
+        "delete": "Verwijder",
+        "direction": "Richting",
+        "error": "Fout",
+        "localSystem": "Lokaal systeem",
+        "unknownError": "Onbekende fout"
     },
     "gallery": {
         "galleryImageSize": "Afbeeldingsgrootte",
@@ -310,10 +363,41 @@
         "modelSyncFailed": "Synchronisatie modellen mislukt",
         "modelDeleteFailed": "Model kon niet verwijderd worden",
         "convertingModelBegin": "Model aan het converteren. Even geduld.",
-        "predictionType": "Soort voorspelling (voor Stable Diffusion 2.x-modellen en incidentele Stable Diffusion 1.x-modellen)",
+        "predictionType": "Soort voorspelling",
         "advanced": "Uitgebreid",
         "modelType": "Soort model",
-        "vaePrecision": "Nauwkeurigheid VAE"
+        "vaePrecision": "Nauwkeurigheid VAE",
+        "loraTriggerPhrases": "LoRA-triggerzinnen",
+        "urlOrLocalPathHelper": "URL's zouden moeten wijzen naar een los bestand. Lokale paden kunnen wijzen naar een los bestand of map voor een individueel Diffusers-model.",
+        "modelName": "Modelnaam",
+        "path": "Pad",
+        "triggerPhrases": "Triggerzinnen",
+        "typePhraseHere": "Typ zin hier in",
+        "useDefaultSettings": "Gebruik standaardinstellingen",
+        "modelImageDeleteFailed": "Fout bij verwijderen modelafbeelding",
+        "modelImageUpdated": "Modelafbeelding bijgewerkt",
+        "modelImageUpdateFailed": "Fout bij bijwerken modelafbeelding",
+        "noMatchingModels": "Geen overeenkomende modellen",
+        "scanPlaceholder": "Pad naar een lokale map",
+        "noModelsInstalled": "Geen modellen geïnstalleerd",
+        "noModelsInstalledDesc1": "Installeer modellen met de",
+        "noModelSelected": "Geen model geselecteerd",
+        "starterModels": "Beginnermodellen",
+        "textualInversions": "Tekstuele omkeringen",
+        "upcastAttention": "Upcast-aandacht",
+        "uploadImage": "Upload afbeelding",
+        "mainModelTriggerPhrases": "Triggerzinnen hoofdmodel",
+        "urlOrLocalPath": "URL of lokaal pad",
+        "scanFolderHelper": "De map zal recursief worden ingelezen voor modellen. Dit kan enige tijd in beslag nemen voor erg grote mappen.",
+        "simpleModelPlaceholder": "URL of pad naar een lokaal pad of Diffusers-map",
+        "modelSettings": "Modelinstellingen",
+        "pathToConfig": "Pad naar configuratie",
+        "prune": "Snoei",
+        "pruneTooltip": "Snoei voltooide importeringen uit wachtrij",
+        "repoVariant": "Repovariant",
+        "scanFolder": "Lees map in",
+        "scanResults": "Resultaten inlezen",
+        "source": "Bron"
     },
     "parameters": {
         "images": "Afbeeldingen",
@@ -353,13 +437,13 @@
         "copyImage": "Kopieer afbeelding",
         "denoisingStrength": "Sterkte ontruisen",
         "scheduler": "Planner",
-        "seamlessXAxis": "X-as",
-        "seamlessYAxis": "Y-as",
+        "seamlessXAxis": "Naadloze tegels in x-as",
+        "seamlessYAxis": "Naadloze tegels in y-as",
         "clipSkip": "Overslaan CLIP",
         "negativePromptPlaceholder": "Negatieve prompt",
         "controlNetControlMode": "Aansturingsmodus",
         "positivePromptPlaceholder": "Positieve prompt",
-        "maskBlur": "Vervaag",
+        "maskBlur": "Vervaging van masker",
         "invoke": {
             "noNodesInGraph": "Geen knooppunten in graaf",
             "noModelSelected": "Geen model ingesteld",
@@ -369,11 +453,25 @@
             "missingInputForField": "{{nodeLabel}} -> {{fieldLabel}} invoer ontbreekt",
             "noControlImageForControlAdapter": "Controle-adapter #{{number}} heeft geen controle-afbeelding",
             "noModelForControlAdapter": "Control-adapter #{{number}} heeft geen model ingesteld staan.",
-            "incompatibleBaseModelForControlAdapter": "Model van controle-adapter #{{number}} is ongeldig in combinatie met het hoofdmodel.",
+            "incompatibleBaseModelForControlAdapter": "Model van controle-adapter #{{number}} is niet compatibel met het hoofdmodel.",
             "systemDisconnected": "Systeem is niet verbonden",
             "missingNodeTemplate": "Knooppuntsjabloon ontbreekt",
             "missingFieldTemplate": "Veldsjabloon ontbreekt",
-            "addingImagesTo": "Bezig met toevoegen van afbeeldingen aan"
+            "addingImagesTo": "Bezig met toevoegen van afbeeldingen aan",
+            "layer": {
+                "initialImageNoImageSelected": "geen initiële afbeelding geselecteerd",
+                "controlAdapterNoModelSelected": "geen controle-adaptermodel geselecteerd",
+                "controlAdapterIncompatibleBaseModel": "niet-compatibele basismodel voor controle-adapter",
+                "controlAdapterNoImageSelected": "geen afbeelding voor controle-adapter geselecteerd",
+                "controlAdapterImageNotProcessed": "Afbeelding voor controle-adapter niet verwerkt",
+                "ipAdapterIncompatibleBaseModel": "niet-compatibele basismodel voor IP-adapter",
+                "ipAdapterNoImageSelected": "geen afbeelding voor IP-adapter geselecteerd",
+                "rgNoRegion": "geen gebied geselecteerd",
+                "rgNoPromptsOrIPAdapters": "geen tekstprompts of IP-adapters",
+                "t2iAdapterIncompatibleDimensions": "T2I-adapter vereist een afbeelding met afmetingen met een veelvoud van 64",
+                "ipAdapterNoModelSelected": "geen IP-adapter geselecteerd"
+            },
+            "imageNotProcessedForControlAdapter": "De afbeelding van controle-adapter #{{number}} is niet verwerkt"
         },
         "isAllowedToUpscale": {
             "useX2Model": "Afbeelding is te groot om te vergroten met het x4-model. Gebruik hiervoor het x2-model",
@@ -383,7 +481,26 @@
         "useCpuNoise": "Gebruik CPU-ruis",
         "imageActions": "Afbeeldingshandeling",
         "iterations": "Iteraties",
-        "coherenceMode": "Modus"
+        "coherenceMode": "Modus",
+        "infillColorValue": "Vulkleur",
+        "remixImage": "Meng afbeelding opnieuw",
+        "setToOptimalSize": "Optimaliseer grootte voor het model",
+        "setToOptimalSizeTooSmall": "$t(parameters.setToOptimalSize) (is mogelijk te klein)",
+        "aspect": "Beeldverhouding",
+        "infillMosaicTileWidth": "Breedte tegel",
+        "setToOptimalSizeTooLarge": "$t(parameters.setToOptimalSize) (is mogelijk te groot)",
+        "lockAspectRatio": "Zet beeldverhouding vast",
+        "infillMosaicTileHeight": "Hoogte tegel",
+        "globalNegativePromptPlaceholder": "Globale negatieve prompt",
+        "globalPositivePromptPlaceholder": "Globale positieve prompt",
+        "useSize": "Gebruik grootte",
+        "swapDimensions": "Wissel afmetingen om",
+        "globalSettings": "Globale instellingen",
+        "coherenceEdgeSize": "Randgrootte",
+        "coherenceMinDenoise": "Min. ontruising",
+        "infillMosaicMinColor": "Min. kleur",
+        "infillMosaicMaxColor": "Max. kleur",
+        "cfgRescaleMultiplier": "Vermenigvuldiger voor CFG-herschaling"
     },
     "settings": {
         "models": "Modellen",
@@ -410,7 +527,12 @@
         "intermediatesCleared_one": "{{count}} tussentijdse afbeelding gewist",
         "intermediatesCleared_other": "{{count}} tussentijdse afbeeldingen gewist",
         "clearIntermediatesDesc1": "Als je tussentijdse afbeeldingen wist, dan wordt de staat hersteld van je canvas en van ControlNet.",
-        "intermediatesClearedFailed": "Fout bij wissen van tussentijdse afbeeldingen"
+        "intermediatesClearedFailed": "Fout bij wissen van tussentijdse afbeeldingen",
+        "clearIntermediatesDisabled": "Wachtrij moet leeg zijn om tussentijdse afbeeldingen te kunnen leegmaken",
+        "enableInformationalPopovers": "Schakel informatieve hulpballonnen in",
+        "enableInvisibleWatermark": "Schakel onzichtbaar watermerk in",
+        "enableNSFWChecker": "Schakel NSFW-controle in",
+        "reloadingIn": "Opnieuw laden na"
     },
     "toast": {
         "uploadFailed": "Upload mislukt",
@@ -425,8 +547,8 @@
         "connected": "Verbonden met server",
         "canceled": "Verwerking geannuleerd",
         "uploadFailedInvalidUploadDesc": "Moet een enkele PNG- of JPEG-afbeelding zijn",
-        "parameterNotSet": "Parameter niet ingesteld",
-        "parameterSet": "Instellen parameters",
+        "parameterNotSet": "{{parameter}} niet ingesteld",
+        "parameterSet": "{{parameter}} ingesteld",
         "problemCopyingImage": "Kan Afbeelding Niet Kopiëren",
         "baseModelChangedCleared_one": "Basismodel is gewijzigd: {{count}} niet-compatibel submodel weggehaald of uitgeschakeld",
         "baseModelChangedCleared_other": "Basismodel is gewijzigd: {{count}} niet-compatibele submodellen weggehaald of uitgeschakeld",
@@ -443,11 +565,11 @@
         "maskSavedAssets": "Masker bewaard in Assets",
         "problemDownloadingCanvas": "Fout bij downloaden van canvas",
         "problemMergingCanvas": "Fout bij samenvoegen canvas",
-        "setCanvasInitialImage": "Ingesteld als initiële canvasafbeelding",
+        "setCanvasInitialImage": "Initiële canvasafbeelding ingesteld",
         "imageUploaded": "Afbeelding geüpload",
         "addedToBoard": "Toegevoegd aan bord",
         "workflowLoaded": "Werkstroom geladen",
-        "modelAddedSimple": "Model toegevoegd",
+        "modelAddedSimple": "Model toegevoegd aan wachtrij",
         "problemImportingMaskDesc": "Kan masker niet exporteren",
         "problemCopyingCanvas": "Fout bij kopiëren canvas",
         "problemSavingCanvas": "Fout bij bewaren canvas",
@@ -459,7 +581,18 @@
         "maskSentControlnetAssets": "Masker gestuurd naar ControlNet en Assets",
         "canvasSavedGallery": "Canvas bewaard in galerij",
         "imageUploadFailed": "Fout bij uploaden afbeelding",
-        "problemImportingMask": "Fout bij importeren masker"
+        "problemImportingMask": "Fout bij importeren masker",
+        "workflowDeleted": "Werkstroom verwijderd",
+        "invalidUpload": "Ongeldige upload",
+        "uploadInitialImage": "Initiële afbeelding uploaden",
+        "setAsCanvasInitialImage": "Ingesteld als initiële afbeelding voor canvas",
+        "problemRetrievingWorkflow": "Fout bij ophalen van werkstroom",
+        "parameters": "Parameters",
+        "modelImportCanceled": "Importeren model geannuleerd",
+        "problemDeletingWorkflow": "Fout bij verwijderen van werkstroom",
+        "prunedQueue": "Wachtrij gesnoeid",
+        "problemDownloadingImage": "Fout bij downloaden afbeelding",
+        "resetInitialImage": "Initiële afbeelding hersteld"
     },
     "tooltip": {
         "feature": {
@@ -533,7 +666,11 @@
         "showOptionsPanel": "Toon zijscherm",
         "menu": "Menu",
         "showGalleryPanel": "Toon deelscherm Galerij",
-        "loadMore": "Laad meer"
+        "loadMore": "Laad meer",
+        "about": "Over",
+        "mode": "Modus",
+        "resetUI": "$t(accessibility.reset) UI",
+        "createIssue": "Maak probleem aan"
     },
     "nodes": {
         "zoomOutNodes": "Uitzoomen",
@@ -547,7 +684,7 @@
         "loadWorkflow": "Laad werkstroom",
         "downloadWorkflow": "Download JSON van werkstroom",
         "scheduler": "Planner",
-        "missingTemplate": "Ontbrekende sjabloon",
+        "missingTemplate": "Ongeldig knooppunt: knooppunt {{node}} van het soort {{type}} heeft een ontbrekend sjabloon (niet geïnstalleerd?)",
         "workflowDescription": "Korte beschrijving",
         "versionUnknown": " Versie onbekend",
         "noNodeSelected": "Geen knooppunt gekozen",
@@ -563,7 +700,7 @@
         "integer": "Geheel getal",
         "nodeTemplate": "Sjabloon knooppunt",
         "nodeOpacity": "Dekking knooppunt",
-        "unableToLoadWorkflow": "Kan werkstroom niet valideren",
+        "unableToLoadWorkflow": "Fout bij laden werkstroom",
         "snapToGrid": "Lijn uit op raster",
         "noFieldsLinearview": "Geen velden toegevoegd aan lineaire weergave",
         "nodeSearch": "Zoek naar knooppunten",
@@ -614,11 +751,56 @@
         "unknownField": "Onbekend veld",
         "colorCodeEdges": "Kleurgecodeerde randen",
         "unknownNode": "Onbekend knooppunt",
-        "mismatchedVersion": "Heeft niet-overeenkomende versie",
+        "mismatchedVersion": "Ongeldig knooppunt: knooppunt {{node}} van het soort {{type}} heeft een niet-overeenkomende versie (probeer het bij te werken?)",
         "addNodeToolTip": "Voeg knooppunt toe (Shift+A, spatie)",
         "loadingNodes": "Bezig met laden van knooppunten...",
         "snapToGridHelp": "Lijn knooppunten uit op raster bij verplaatsing",
-        "workflowSettings": "Instellingen werkstroomeditor"
+        "workflowSettings": "Instellingen werkstroomeditor",
+        "addLinearView": "Voeg toe aan lineaire weergave",
+        "nodePack": "Knooppuntpakket",
+        "unknownInput": "Onbekende invoer: {{name}}",
+        "sourceNodeFieldDoesNotExist": "Ongeldige rand: bron-/uitvoerveld {{node}}.{{field}} bestaat niet",
+        "collectionFieldType": "Verzameling {{name}}",
+        "deletedInvalidEdge": "Ongeldige hoek {{source}} -> {{target}} verwijderd",
+        "graph": "Grafiek",
+        "targetNodeDoesNotExist": "Ongeldige rand: doel-/invoerknooppunt {{node}} bestaat niet",
+        "resetToDefaultValue": "Herstel naar standaardwaarden",
+        "editMode": "Bewerk in Werkstroom-editor",
+        "showEdgeLabels": "Toon randlabels",
+        "showEdgeLabelsHelp": "Toon labels aan randen, waarmee de verbonden knooppunten mee worden aangegeven",
+        "clearWorkflowDesc2": "Je huidige werkstroom heeft niet-bewaarde wijzigingen.",
+        "unableToParseFieldType": "fout bij bepalen soort veld",
+        "sourceNodeDoesNotExist": "Ongeldige rand: bron-/uitvoerknooppunt {{node}} bestaat niet",
+        "unsupportedArrayItemType": "niet-ondersteunde soort van het array-onderdeel \"{{type}}\"",
+        "targetNodeFieldDoesNotExist": "Ongeldige rand: doel-/invoerveld {{node}}.{{field}} bestaat niet",
+        "reorderLinearView": "Herorden lineaire weergave",
+        "newWorkflowDesc": "Een nieuwe werkstroom aanmaken?",
+        "collectionOrScalarFieldType": "Verzameling|scalair {{name}}",
+        "newWorkflow": "Nieuwe werkstroom",
+        "unknownErrorValidatingWorkflow": "Onbekende fout bij valideren werkstroom",
+        "unsupportedAnyOfLength": "te veel union-leden ({{count}})",
+        "unknownOutput": "Onbekende uitvoer: {{name}}",
+        "viewMode": "Gebruik in lineaire weergave",
+        "unableToExtractSchemaNameFromRef": "fout bij het extraheren van de schemanaam via de ref",
+        "unsupportedMismatchedUnion": "niet-overeenkomende soort CollectionOrScalar met basissoorten {{firstType}} en {{secondType}}",
+        "unknownNodeType": "Onbekend soort knooppunt",
+        "edit": "Bewerk",
+        "updateAllNodes": "Werk knooppunten bij",
+        "allNodesUpdated": "Alle knooppunten bijgewerkt",
+        "nodeVersion": "Knooppuntversie",
+        "newWorkflowDesc2": "Je huidige werkstroom heeft niet-bewaarde wijzigingen.",
+        "clearWorkflow": "Maak werkstroom leeg",
+        "clearWorkflowDesc": "Deze werkstroom leegmaken en met een nieuwe beginnen?",
+        "inputFieldTypeParseError": "Fout bij bepalen van het soort invoerveld {{node}}.{{field}} ({{message}})",
+        "outputFieldTypeParseError": "Fout bij het bepalen van het soort uitvoerveld {{node}}.{{field}} ({{message}})",
+        "unableToExtractEnumOptions": "fout bij extraheren enumeratie-opties",
+        "unknownFieldType": "Soort $t(nodes.unknownField): {{type}}",
+        "unableToGetWorkflowVersion": "Fout bij ophalen schemaversie van werkstroom",
+        "betaDesc": "Deze uitvoering is in bèta. Totdat deze stabiel is kunnen er wijzigingen voorkomen gedurende app-updates die zaken kapotmaken. We zijn van plan om deze uitvoering op lange termijn te gaan ondersteunen.",
+        "prototypeDesc": "Deze uitvoering is een prototype. Er kunnen wijzigingen voorkomen gedurende app-updates die zaken kapotmaken. Deze kunnen op een willekeurig moment verwijderd worden.",
+        "noFieldsViewMode": "Deze werkstroom heeft geen geselecteerde velden om te tonen. Bekijk de volledige werkstroom om de waarden te configureren.",
+        "unableToUpdateNodes_one": "Fout bij bijwerken van {{count}} knooppunt",
+        "unableToUpdateNodes_other": "Fout bij bijwerken van {{count}} knooppunten"
     },
     "controlnet": {
         "amult": "a_mult",
@@ -691,9 +873,28 @@
         "canny": "Canny",
         "depthZoeDescription": "Genereer diepteblad via Zoe",
         "hedDescription": "Herkenning van holistisch-geneste randen",
-        "setControlImageDimensions": "Stel afmetingen controle-afbeelding in op B/H",
+        "setControlImageDimensions": "Kopieer grootte naar B/H (optimaliseer voor model)",
         "scribble": "Krabbel",
-        "maxFaces": "Max. gezichten"
+        "maxFaces": "Max. gezichten",
+        "dwOpenpose": "DW Openpose",
+        "depthAnything": "Depth Anything",
+        "base": "Basis",
+        "hands": "Handen",
+        "selectCLIPVisionModel": "Selecteer een CLIP Vision-model",
+        "modelSize": "Modelgrootte",
+        "small": "Klein",
+        "large": "Groot",
+        "resizeSimple": "Wijzig grootte (eenvoudig)",
+        "beginEndStepPercentShort": "Begin-/eind-%",
+        "depthAnythingDescription": "Genereren dieptekaart d.m.v. de techniek Depth Anything",
+        "face": "Gezicht",
+        "body": "Lichaam",
+        "dwOpenposeDescription": "Schatting menselijke pose d.m.v. DW Openpose",
+        "ipAdapterMethod": "Methode",
+        "full": "Volledig",
+        "style": "Alleen stijl",
+        "composition": "Alleen samenstelling",
+        "setControlImageDimensionsForce": "Kopieer grootte naar B/H (negeer model)"
     },
     "dynamicPrompts": {
         "seedBehaviour": {
@@ -706,7 +907,10 @@
         "maxPrompts": "Max. prompts",
         "promptsWithCount_one": "{{count}} prompt",
         "promptsWithCount_other": "{{count}} prompts",
-        "dynamicPrompts": "Dynamische prompts"
+        "dynamicPrompts": "Dynamische prompts",
+        "showDynamicPrompts": "Toon dynamische prompts",
+        "loading": "Genereren van dynamische prompts...",
+        "promptsPreview": "Voorvertoning prompts"
     },
     "popovers": {
         "noiseUseCPU": {
@@ -719,7 +923,7 @@
         },
         "paramScheduler": {
             "paragraphs": [
-                "De planner bepaalt hoe ruis per iteratie wordt toegevoegd aan een afbeelding of hoe een monster wordt bijgewerkt op basis van de uitvoer van een model."
+                "De planner gebruikt gedurende het genereringsproces."
             ],
             "heading": "Planner"
         },
@@ -806,8 +1010,8 @@
         },
         "clipSkip": {
             "paragraphs": [
-                "Kies hoeveel CLIP-modellagen je wilt overslaan.",
-                "Bepaalde modellen werken beter met bepaalde Overslaan CLIP-instellingen."
+                "Aantal over te slaan CLIP-modellagen.",
+                "Bepaalde modellen zijn beter geschikt met bepaalde Overslaan CLIP-instellingen."
             ],
             "heading": "Overslaan CLIP"
         },
@@ -991,17 +1195,26 @@
         "denoisingStrength": "Sterkte ontruising",
         "refinermodel": "Verfijningsmodel",
         "posAestheticScore": "Positieve esthetische score",
-        "concatPromptStyle": "Plak prompt- en stijltekst aan elkaar",
+        "concatPromptStyle": "Koppelen van prompt en stijl",
         "loading": "Bezig met laden...",
         "steps": "Stappen",
-        "posStylePrompt": "Positieve-stijlprompt"
+        "posStylePrompt": "Positieve-stijlprompt",
+        "freePromptStyle": "Handmatige stijlprompt",
+        "refinerSteps": "Aantal stappen verfijner"
     },
     "models": {
         "noMatchingModels": "Geen overeenkomend modellen",
         "loading": "bezig met laden",
         "noMatchingLoRAs": "Geen overeenkomende LoRA's",
         "noModelsAvailable": "Geen modellen beschikbaar",
-        "selectModel": "Kies een model"
+        "selectModel": "Kies een model",
+        "noLoRAsInstalled": "Geen LoRA's geïnstalleerd",
+        "noRefinerModelsInstalled": "Geen SDXL-verfijningsmodellen geïnstalleerd",
+        "defaultVAE": "Standaard-VAE",
+        "lora": "LoRA",
+        "esrganModel": "ESRGAN-model",
+        "addLora": "Voeg LoRA toe",
+        "concepts": "Concepten"
     },
     "boards": {
         "autoAddBoard": "Voeg automatisch bord toe",
@@ -1019,7 +1232,13 @@
         "downloadBoard": "Download bord",
         "changeBoard": "Wijzig bord",
         "loading": "Bezig met laden...",
-        "clearSearch": "Maak zoekopdracht leeg"
+        "clearSearch": "Maak zoekopdracht leeg",
+        "deleteBoard": "Verwijder bord",
+        "deleteBoardAndImages": "Verwijder bord en afbeeldingen",
+        "deleteBoardOnly": "Verwijder alleen bord",
+        "deletedBoardsCannotbeRestored": "Verwijderde borden kunnen niet worden hersteld",
+        "movingImagesToBoard_one": "Verplaatsen van {{count}} afbeelding naar bord:",
+        "movingImagesToBoard_other": "Verplaatsen van {{count}} afbeeldingen naar bord:"
     },
     "invocationCache": {
         "disable": "Schakel uit",
@@ -1036,5 +1255,39 @@
         "clear": "Wis",
         "maxCacheSize": "Max. grootte cache",
         "cacheSize": "Grootte cache"
+    },
+    "accordions": {
+        "generation": {
+            "title": "Genereren"
+        },
+        "image": {
+            "title": "Afbeelding"
+        },
+        "advanced": {
+            "title": "Geavanceerd",
+            "options": "$t(accordions.advanced.title) Opties"
+        },
+        "control": {
+            "title": "Besturing"
+        },
+        "compositing": {
+            "title": "Samenstellen",
+            "coherenceTab": "Coherentiefase",
+            "infillTab": "Invullen"
+        }
+    },
+    "hrf": {
+        "upscaleMethod": "Opschaalmethode",
+        "metadata": {
+            "strength": "Sterkte oplossing voor hoge resolutie",
+            "method": "Methode oplossing voor hoge resolutie",
+            "enabled": "Oplossing voor hoge resolutie ingeschakeld"
+        },
+        "hrf": "Oplossing voor hoge resolutie",
+        "enableHrf": "Schakel oplossing in voor hoge resolutie"
+    },
+    "prompt": {
+        "addPromptTrigger": "Voeg prompttrigger toe",
+        "compatibleEmbeddings": "Compatibele embeddings"
     }
 }

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

@@ -1594,7 +1594,6 @@
         "deleteAll": "Удалить всё",
         "addLayer": "Добавить слой",
         "moveToFront": "На передний план",
-        "toggleVisibility": "Переключить видимость слоя",
         "addPositivePrompt": "Добавить $t(common.positivePrompt)",
         "addIPAdapter": "Добавить $t(common.ipAdapter)",
         "regionalGuidanceLayer": "$t(controlLayers.regionalGuidance) $t(unifiedCanvas.layer)",

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

@@ -21,10 +21,10 @@ import i18n from 'i18n';
 import { size } from 'lodash-es';
 import { memo, useCallback, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo';
 
 import AppErrorBoundaryFallback from './AppErrorBoundaryFallback';
 import PreselectedImage from './PreselectedImage';
-import Toaster from './Toaster';
 
 const DEFAULT_CONFIG = {};
 
@@ -46,6 +46,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
   useSocketIO();
   useGlobalModifiersInit();
   useGlobalHotkeys();
+  useGetOpenAPISchemaQuery();
 
   const { dropzone, isHandlingUpload, setIsHandlingUpload } = useFullscreenDropzone();
 
@@ -94,7 +95,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
       <DeleteImageModal />
       <ChangeBoardModal />
       <DynamicPromptsModal />
-      <Toaster />
       <PreselectedImage selectedImage={selectedImage} />
     </ErrorBoundary>
   );

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

@@ -1,5 +1,8 @@
-import { Button, Flex, Heading, Link, Text, useToast } from '@invoke-ai/ui-library';
+import { Button, Flex, Heading, Image, Link, Text } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { toast } from 'features/toast/toast';
 import newGithubIssueUrl from 'new-github-issue-url';
+import InvokeLogoYellow from 'public/assets/images/invoke-symbol-ylw-lrg.svg';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowCounterClockwiseBold, PiArrowSquareOutBold, PiCopyBold } from 'react-icons/pi';
@@ -11,31 +14,39 @@ type Props = {
 };
 
 const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => {
-  const toast = useToast();
   const { t } = useTranslation();
+  const isLocal = useAppSelector((s) => s.config.isLocal);
 
   const handleCopy = useCallback(() => {
     const text = JSON.stringify(serializeError(error), null, 2);
     navigator.clipboard.writeText(`\`\`\`\n${text}\n\`\`\``);
     toast({
-      title: 'Error Copied',
+      id: 'ERROR_COPIED',
+      title: t('toast.errorCopied'),
     });
-  }, [error, toast]);
+  }, [error, t]);
 
-  const url = useMemo(
-    () =>
-      newGithubIssueUrl({
+  const url = useMemo(() => {
+    if (isLocal) {
+      return newGithubIssueUrl({
         user: 'invoke-ai',
         repo: 'InvokeAI',
         template: 'BUG_REPORT.yml',
         title: `[bug]: ${error.name}: ${error.message}`,
-      }),
-    [error.message, error.name]
-  );
+      });
+    } else {
+      return 'https://support.invoke.ai/support/tickets/new';
+    }
+  }, [error.message, error.name, isLocal]);
+
   return (
     <Flex layerStyle="body" w="100vw" h="100vh" alignItems="center" justifyContent="center" p={4}>
       <Flex layerStyle="first" flexDir="column" borderRadius="base" justifyContent="center" gap={8} p={16}>
-        <Heading>{t('common.somethingWentWrong')}</Heading>
+        <Flex alignItems="center" gap="2">
+          <Image src={InvokeLogoYellow} alt="invoke-logo" w="24px" h="24px" minW="24px" minH="24px" userSelect="none" />
+          <Heading fontSize="2xl">{t('common.somethingWentWrong')}</Heading>
+        </Flex>
+
         <Flex
           layerStyle="second"
           px={8}
@@ -57,7 +68,9 @@ const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => {
             {t('common.copyError')}
           </Button>
           <Link href={url} isExternal>
-            <Button leftIcon={<PiArrowSquareOutBold />}>{t('accessibility.createIssue')}</Button>
+            <Button leftIcon={<PiArrowSquareOutBold />}>
+              {isLocal ? t('accessibility.createIssue') : t('accessibility.submitSupportTicket')}
+            </Button>
           </Link>
         </Flex>
       </Flex>

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

@@ -1,44 +0,0 @@
-import { useToast } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { addToast, clearToastQueue } from 'features/system/store/systemSlice';
-import type { MakeToastArg } from 'features/system/util/makeToast';
-import { makeToast } from 'features/system/util/makeToast';
-import { memo, useCallback, useEffect } from 'react';
-
-/**
- * Logical component. Watches the toast queue and makes toasts when the queue is not empty.
- * @returns null
- */
-const Toaster = () => {
-  const dispatch = useAppDispatch();
-  const toastQueue = useAppSelector((s) => s.system.toastQueue);
-  const toast = useToast();
-  useEffect(() => {
-    toastQueue.forEach((t) => {
-      toast(t);
-    });
-    toastQueue.length > 0 && dispatch(clearToastQueue());
-  }, [dispatch, toast, toastQueue]);
-
-  return null;
-};
-
-/**
- * Returns a function that can be used to make a toast.
- * @example
- * const toaster = useAppToaster();
- * toaster('Hello world!');
- * toaster({ title: 'Hello world!', status: 'success' });
- * @returns A function that can be used to make a toast.
- * @see makeToast
- * @see MakeToastArg
- * @see UseToastOptions
- */
-export const useAppToaster = () => {
-  const dispatch = useAppDispatch();
-  const toaster = useCallback((arg: MakeToastArg) => dispatch(addToast(makeToast(arg))), [dispatch]);
-
-  return toaster;
-};
-
-export default memo(Toaster);

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

@@ -41,12 +41,10 @@ import { addGeneratorProgressEventListener } from 'app/store/middleware/listener
 import { addGraphExecutionStateCompleteEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketGraphExecutionStateComplete';
 import { addInvocationCompleteEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete';
 import { addInvocationErrorEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationError';
-import { addInvocationRetrievalErrorEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationRetrievalError';
 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 { addSessionRetrievalErrorEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketSessionRetrievalError';
 import { addSocketSubscribedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketSubscribed';
 import { addSocketUnsubscribedEventListener } from 'app/store/middleware/listenerMiddleware/listeners/socketio/socketUnsubscribed';
 import { addStagingAreaImageSavedListener } from 'app/store/middleware/listenerMiddleware/listeners/stagingAreaImageSaved';
@@ -114,8 +112,6 @@ addSocketSubscribedEventListener(startAppListening);
 addSocketUnsubscribedEventListener(startAppListening);
 addModelLoadEventListener(startAppListening);
 addModelInstallEventListener(startAppListening);
-addSessionRetrievalErrorEventListener(startAppListening);
-addInvocationRetrievalErrorEventListener(startAppListening);
 addSocketQueueItemStatusChangedEventListener(startAppListening);
 addBulkDownloadListeners(startAppListening);
 

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

@@ -8,7 +8,7 @@ import {
   resetCanvas,
   setInitialCanvasImage,
 } from 'features/canvas/store/canvasSlice';
-import { addToast } from 'features/system/store/systemSlice';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { queueApi } from 'services/api/endpoints/queue';
 
@@ -30,22 +30,20 @@ export const addCommitStagingAreaImageListener = (startAppListening: AppStartLis
         req.reset();
         if (canceled > 0) {
           log.debug(`Canceled ${canceled} canvas batches`);
-          dispatch(
-            addToast({
-              title: t('queue.cancelBatchSucceeded'),
-              status: 'success',
-            })
-          );
+          toast({
+            id: 'CANCEL_BATCH_SUCCEEDED',
+            title: t('queue.cancelBatchSucceeded'),
+            status: 'success',
+          });
         }
         dispatch(canvasBatchIdsReset());
       } catch {
         log.error('Failed to cancel canvas batches');
-        dispatch(
-          addToast({
-            title: t('queue.cancelBatchFailed'),
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'CANCEL_BATCH_FAILED',
+          title: t('queue.cancelBatchFailed'),
+          status: 'error',
+        });
       }
     },
   });

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

@@ -1,8 +1,8 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { parseify } from 'common/util/serialize';
-import { toast } from 'common/util/toast';
 import { zPydanticValidationError } from 'features/system/store/zodSchemas';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { truncate, upperFirst } from 'lodash-es';
 import { queueApi } from 'services/api/endpoints/queue';
@@ -16,18 +16,15 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
       const arg = action.meta.arg.originalArgs;
       logger('queue').debug({ enqueueResult: parseify(response) }, 'Batch enqueued');
 
-      if (!toast.isActive('batch-queued')) {
-        toast({
-          id: 'batch-queued',
-          title: t('queue.batchQueued'),
-          description: t('queue.batchQueuedDesc', {
-            count: response.enqueued,
-            direction: arg.prepend ? t('queue.front') : t('queue.back'),
-          }),
-          duration: 1000,
-          status: 'success',
-        });
-      }
+      toast({
+        id: 'QUEUE_BATCH_SUCCEEDED',
+        title: t('queue.batchQueued'),
+        status: 'success',
+        description: t('queue.batchQueuedDesc', {
+          count: response.enqueued,
+          direction: arg.prepend ? t('queue.front') : t('queue.back'),
+        }),
+      });
     },
   });
 
@@ -40,9 +37,10 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
 
       if (!response) {
         toast({
+          id: 'QUEUE_BATCH_FAILED',
           title: t('queue.batchFailedToQueue'),
           status: 'error',
-          description: 'Unknown Error',
+          description: t('common.unknownError'),
         });
         logger('queue').error({ batchConfig: parseify(arg), error: parseify(response) }, t('queue.batchFailedToQueue'));
         return;
@@ -52,7 +50,7 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
       if (result.success) {
         result.data.data.detail.map((e) => {
           toast({
-            id: 'batch-failed-to-queue',
+            id: 'QUEUE_BATCH_FAILED',
             title: truncate(upperFirst(e.msg), { length: 128 }),
             status: 'error',
             description: truncate(
@@ -64,9 +62,10 @@ export const addBatchEnqueuedListener = (startAppListening: AppStartListening) =
         });
       } else if (response.status !== 403) {
         toast({
+          id: 'QUEUE_BATCH_FAILED',
           title: t('queue.batchFailedToQueue'),
-          description: t('common.unknownError'),
           status: 'error',
+          description: t('common.unknownError'),
         });
       }
       logger('queue').error({ batchConfig: parseify(arg), error: parseify(response) }, t('queue.batchFailedToQueue'));

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

@@ -1,8 +1,7 @@
-import type { UseToastOptions } from '@invoke-ai/ui-library';
 import { ExternalLink } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
-import { toast } from 'common/util/toast';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { imagesApi } from 'services/api/endpoints/images';
 import {
@@ -28,7 +27,6 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) =
         // Show the response message if it exists, otherwise show the default message
         description: action.payload.response || t('gallery.bulkDownloadRequestedDesc'),
         duration: null,
-        isClosable: true,
       });
     },
   });
@@ -40,9 +38,9 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) =
 
       // There isn't any toast to update if we get this event.
       toast({
+        id: 'BULK_DOWNLOAD_REQUEST_FAILED',
         title: t('gallery.bulkDownloadRequestFailed'),
-        status: 'success',
-        isClosable: true,
+        status: 'error',
       });
     },
   });
@@ -65,7 +63,7 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) =
       // 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}`;
 
-      const toastOptions: UseToastOptions = {
+      toast({
         id: bulk_download_item_name,
         title: t('gallery.bulkDownloadReady', 'Download ready'),
         status: 'success',
@@ -77,14 +75,7 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) =
           />
         ),
         duration: null,
-        isClosable: true,
-      };
-
-      if (toast.isActive(bulk_download_item_name)) {
-        toast.update(bulk_download_item_name, toastOptions);
-      } else {
-        toast(toastOptions);
-      }
+      });
     },
   });
 
@@ -95,20 +86,13 @@ export const addBulkDownloadListeners = (startAppListening: AppStartListening) =
 
       const { bulk_download_item_name } = action.payload.data;
 
-      const toastOptions: UseToastOptions = {
+      toast({
         id: bulk_download_item_name,
         title: t('gallery.bulkDownloadFailed'),
         status: 'error',
         description: action.payload.data.error,
         duration: null,
-        isClosable: true,
-      };
-
-      if (toast.isActive(bulk_download_item_name)) {
-        toast.update(bulk_download_item_name, toastOptions);
-      } else {
-        toast(toastOptions);
-      }
+      });
     },
   });
 };

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

@@ -2,14 +2,14 @@ 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 { addToast } from 'features/system/store/systemSlice';
 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, { dispatch, getState }) => {
+    effect: async (action, { getState }) => {
       const moduleLog = $logger.get().child({ namespace: 'canvasCopiedToClipboardListener' });
       const state = getState();
 
@@ -19,22 +19,20 @@ export const addCanvasCopiedToClipboardListener = (startAppListening: AppStartLi
         copyBlobToClipboard(blob);
       } catch (err) {
         moduleLog.error(String(err));
-        dispatch(
-          addToast({
-            title: t('toast.problemCopyingCanvas'),
-            description: t('toast.problemCopyingCanvasDesc'),
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'CANVAS_COPY_FAILED',
+          title: t('toast.problemCopyingCanvas'),
+          description: t('toast.problemCopyingCanvasDesc'),
+          status: 'error',
+        });
         return;
       }
 
-      dispatch(
-        addToast({
-          title: t('toast.canvasCopiedClipboard'),
-          status: 'success',
-        })
-      );
+      toast({
+        id: 'CANVAS_COPY_SUCCEEDED',
+        title: t('toast.canvasCopiedClipboard'),
+        status: 'success',
+      });
     },
   });
 };

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

@@ -3,13 +3,13 @@ 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 { addToast } from 'features/system/store/systemSlice';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 
 export const addCanvasDownloadedAsImageListener = (startAppListening: AppStartListening) => {
   startAppListening({
     actionCreator: canvasDownloadedAsImage,
-    effect: async (action, { dispatch, getState }) => {
+    effect: async (action, { getState }) => {
       const moduleLog = $logger.get().child({ namespace: 'canvasSavedToGalleryListener' });
       const state = getState();
 
@@ -18,18 +18,17 @@ export const addCanvasDownloadedAsImageListener = (startAppListening: AppStartLi
         blob = await getBaseLayerBlob(state);
       } catch (err) {
         moduleLog.error(String(err));
-        dispatch(
-          addToast({
-            title: t('toast.problemDownloadingCanvas'),
-            description: t('toast.problemDownloadingCanvasDesc'),
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'CANVAS_DOWNLOAD_FAILED',
+          title: t('toast.problemDownloadingCanvas'),
+          description: t('toast.problemDownloadingCanvasDesc'),
+          status: 'error',
+        });
         return;
       }
 
       downloadBlob(blob, 'canvas.png');
-      dispatch(addToast({ title: t('toast.canvasDownloaded'), status: 'success' }));
+      toast({ id: 'CANVAS_DOWNLOAD_SUCCEEDED', title: t('toast.canvasDownloaded'), status: 'success' });
     },
   });
 };

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

@@ -3,7 +3,7 @@ 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 { addToast } from 'features/system/store/systemSlice';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { imagesApi } from 'services/api/endpoints/images';
 
@@ -20,13 +20,12 @@ export const addCanvasImageToControlNetListener = (startAppListening: AppStartLi
         blob = await getBaseLayerBlob(state, true);
       } catch (err) {
         log.error(String(err));
-        dispatch(
-          addToast({
-            title: t('toast.problemSavingCanvas'),
-            description: t('toast.problemSavingCanvasDesc'),
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'PROBLEM_SAVING_CANVAS',
+          title: t('toast.problemSavingCanvas'),
+          description: t('toast.problemSavingCanvasDesc'),
+          status: 'error',
+        });
         return;
       }
 
@@ -43,7 +42,7 @@ export const addCanvasImageToControlNetListener = (startAppListening: AppStartLi
           crop_visible: false,
           postUploadAction: {
             type: 'TOAST',
-            toastOptions: { title: t('toast.canvasSentControlnetAssets') },
+            title: t('toast.canvasSentControlnetAssets'),
           },
         })
       ).unwrap();

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

@@ -2,7 +2,7 @@ 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 { addToast } from 'features/system/store/systemSlice';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { imagesApi } from 'services/api/endpoints/images';
 
@@ -29,13 +29,12 @@ export const addCanvasMaskSavedToGalleryListener = (startAppListening: AppStartL
 
       if (!maskBlob) {
         log.error('Problem getting mask layer blob');
-        dispatch(
-          addToast({
-            title: t('toast.problemSavingMask'),
-            description: t('toast.problemSavingMaskDesc'),
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'PROBLEM_SAVING_MASK',
+          title: t('toast.problemSavingMask'),
+          description: t('toast.problemSavingMaskDesc'),
+          status: 'error',
+        });
         return;
       }
 
@@ -52,7 +51,7 @@ export const addCanvasMaskSavedToGalleryListener = (startAppListening: AppStartL
           crop_visible: true,
           postUploadAction: {
             type: 'TOAST',
-            toastOptions: { title: t('toast.maskSavedAssets') },
+            title: t('toast.maskSavedAssets'),
           },
         })
       );

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

@@ -3,7 +3,7 @@ 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 { addToast } from 'features/system/store/systemSlice';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { imagesApi } from 'services/api/endpoints/images';
 
@@ -30,13 +30,12 @@ export const addCanvasMaskToControlNetListener = (startAppListening: AppStartLis
 
       if (!maskBlob) {
         log.error('Problem getting mask layer blob');
-        dispatch(
-          addToast({
-            title: t('toast.problemImportingMask'),
-            description: t('toast.problemImportingMaskDesc'),
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'PROBLEM_IMPORTING_MASK',
+          title: t('toast.problemImportingMask'),
+          description: t('toast.problemImportingMaskDesc'),
+          status: 'error',
+        });
         return;
       }
 
@@ -53,7 +52,7 @@ export const addCanvasMaskToControlNetListener = (startAppListening: AppStartLis
           crop_visible: false,
           postUploadAction: {
             type: 'TOAST',
-            toastOptions: { title: t('toast.maskSentControlnetAssets') },
+            title: t('toast.maskSentControlnetAssets'),
           },
         })
       ).unwrap();

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

@@ -4,7 +4,7 @@ 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 { addToast } from 'features/system/store/systemSlice';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { imagesApi } from 'services/api/endpoints/images';
 
@@ -17,13 +17,12 @@ export const addCanvasMergedListener = (startAppListening: AppStartListening) =>
 
       if (!blob) {
         moduleLog.error('Problem getting base layer blob');
-        dispatch(
-          addToast({
-            title: t('toast.problemMergingCanvas'),
-            description: t('toast.problemMergingCanvasDesc'),
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'PROBLEM_MERGING_CANVAS',
+          title: t('toast.problemMergingCanvas'),
+          description: t('toast.problemMergingCanvasDesc'),
+          status: 'error',
+        });
         return;
       }
 
@@ -31,13 +30,12 @@ export const addCanvasMergedListener = (startAppListening: AppStartListening) =>
 
       if (!canvasBaseLayer) {
         moduleLog.error('Problem getting canvas base layer');
-        dispatch(
-          addToast({
-            title: t('toast.problemMergingCanvas'),
-            description: t('toast.problemMergingCanvasDesc'),
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'PROBLEM_MERGING_CANVAS',
+          title: t('toast.problemMergingCanvas'),
+          description: t('toast.problemMergingCanvasDesc'),
+          status: 'error',
+        });
         return;
       }
 
@@ -54,7 +52,7 @@ export const addCanvasMergedListener = (startAppListening: AppStartListening) =>
           is_intermediate: true,
           postUploadAction: {
             type: 'TOAST',
-            toastOptions: { title: t('toast.canvasMerged') },
+            title: t('toast.canvasMerged'),
           },
         })
       ).unwrap();

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

@@ -1,8 +1,9 @@
 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 { addToast } from 'features/system/store/systemSlice';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { imagesApi } from 'services/api/endpoints/images';
 
@@ -18,13 +19,12 @@ export const addCanvasSavedToGalleryListener = (startAppListening: AppStartListe
         blob = await getBaseLayerBlob(state);
       } catch (err) {
         log.error(String(err));
-        dispatch(
-          addToast({
-            title: t('toast.problemSavingCanvas'),
-            description: t('toast.problemSavingCanvasDesc'),
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'CANVAS_SAVE_FAILED',
+          title: t('toast.problemSavingCanvas'),
+          description: t('toast.problemSavingCanvasDesc'),
+          status: 'error',
+        });
         return;
       }
 
@@ -41,7 +41,10 @@ export const addCanvasSavedToGalleryListener = (startAppListening: AppStartListe
           crop_visible: true,
           postUploadAction: {
             type: 'TOAST',
-            toastOptions: { title: t('toast.canvasSavedGallery') },
+            title: t('toast.canvasSavedGallery'),
+          },
+          metadata: {
+            _canvas_objects: parseify(state.canvas.layerState.objects),
           },
         })
       );

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

@@ -14,8 +14,9 @@ import {
 } from 'features/controlLayers/store/controlLayersSlice';
 import { CA_PROCESSOR_DATA } from 'features/controlLayers/util/controlAdapters';
 import { isImageOutput } from 'features/nodes/types/common';
-import { addToast } from 'features/system/store/systemSlice';
+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';
@@ -47,8 +48,10 @@ const cancelProcessorBatch = async (dispatch: AppDispatch, layerId: string, batc
 export const addControlAdapterPreprocessor = (startAppListening: AppStartListening) => {
   startAppListening({
     matcher,
-    effect: async (action, { dispatch, getState, cancelActiveListeners, delay, take, signal }) => {
+    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();
@@ -57,21 +60,33 @@ export const addControlAdapterPreprocessor = (startAppListening: AppStartListeni
       // Delay before starting actual work
       await delay(DEBOUNCE_MS);
 
-      // Double-check that we are still eligible for processing
-      const state = getState();
       const layer = state.controlLayers.present.layers.filter(isControlAdapterLayer).find((l) => l.id === layerId);
 
-      // If we have no image or there is no processor config, bail
       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 config = layer.controlAdapter.processorConfig;
 
+      if (isEqual(config, originalConfig) && isEqual(image, originalImage)) {
+        // Neither config nor image have changed, we can bail
+        return;
+      }
+
       if (!image || !config) {
-        // The user has reset the image or config, so we should clear the processed image
+        // - 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.
@@ -81,8 +96,8 @@ export const addControlAdapterPreprocessor = (startAppListening: AppStartListeni
         cancelProcessorBatch(dispatch, layerId, layer.controlAdapter.processorPendingBatchId);
       }
 
-      // @ts-expect-error: TS isn't able to narrow the typing of buildNode and `config` will error...
-      const processorNode = CA_PROCESSOR_DATA[config.type].buildNode(image, config);
+      // 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: {
@@ -159,12 +174,11 @@ export const addControlAdapterPreprocessor = (startAppListening: AppStartListeni
             }
           }
 
-          dispatch(
-            addToast({
-              title: t('queue.graphFailedToQueue'),
-              status: 'error',
-            })
-          );
+          toast({
+            id: 'GRAPH_QUEUE_FAILED',
+            title: t('queue.graphFailedToQueue'),
+            status: 'error',
+          });
         }
       } finally {
         req.reset();

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

@@ -10,7 +10,7 @@ import {
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
 import { isImageOutput } from 'features/nodes/types/common';
-import { addToast } from 'features/system/store/systemSlice';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { imagesApi } from 'services/api/endpoints/images';
 import { queueApi } from 'services/api/endpoints/queue';
@@ -108,12 +108,11 @@ export const addControlNetImageProcessedListener = (startAppListening: AppStartL
           }
         }
 
-        dispatch(
-          addToast({
-            title: t('queue.graphFailedToQueue'),
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'GRAPH_QUEUE_FAILED',
+          title: t('queue.graphFailedToQueue'),
+          status: 'error',
+        });
       }
     },
   });

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

@@ -1,4 +1,3 @@
-import type { UseToastOptions } from '@invoke-ai/ui-library';
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice';
@@ -14,7 +13,7 @@ import {
 } from 'features/controlLayers/store/controlLayersSlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
-import { addToast } from 'features/system/store/systemSlice';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { omit } from 'lodash-es';
 import { boardsApi } from 'services/api/endpoints/boards';
@@ -42,16 +41,17 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
         return;
       }
 
-      const DEFAULT_UPLOADED_TOAST: UseToastOptions = {
+      const DEFAULT_UPLOADED_TOAST = {
+        id: 'IMAGE_UPLOADED',
         title: t('toast.imageUploaded'),
         status: 'success',
-      };
+      } as const;
 
       // default action - just upload and alert user
       if (postUploadAction?.type === 'TOAST') {
-        const { toastOptions } = postUploadAction;
         if (!autoAddBoardId || autoAddBoardId === 'none') {
-          dispatch(addToast({ ...DEFAULT_UPLOADED_TOAST, ...toastOptions }));
+          const title = postUploadAction.title || DEFAULT_UPLOADED_TOAST.title;
+          toast({ ...DEFAULT_UPLOADED_TOAST, title });
         } else {
           // Add this image to the board
           dispatch(
@@ -70,24 +70,20 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
             ? `${t('toast.addedToBoard')} ${board.board_name}`
             : `${t('toast.addedToBoard')} ${autoAddBoardId}`;
 
-          dispatch(
-            addToast({
-              ...DEFAULT_UPLOADED_TOAST,
-              description,
-            })
-          );
+          toast({
+            ...DEFAULT_UPLOADED_TOAST,
+            description,
+          });
         }
         return;
       }
 
       if (postUploadAction?.type === 'SET_CANVAS_INITIAL_IMAGE') {
         dispatch(setInitialCanvasImage(imageDTO, selectOptimalDimension(state)));
-        dispatch(
-          addToast({
-            ...DEFAULT_UPLOADED_TOAST,
-            description: t('toast.setAsCanvasInitialImage'),
-          })
-        );
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: t('toast.setAsCanvasInitialImage'),
+        });
         return;
       }
 
@@ -105,68 +101,56 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
             controlImage: imageDTO.image_name,
           })
         );
-        dispatch(
-          addToast({
-            ...DEFAULT_UPLOADED_TOAST,
-            description: t('toast.setControlImage'),
-          })
-        );
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: t('toast.setControlImage'),
+        });
         return;
       }
 
       if (postUploadAction?.type === 'SET_CA_LAYER_IMAGE') {
         const { layerId } = postUploadAction;
         dispatch(caLayerImageChanged({ layerId, imageDTO }));
-        dispatch(
-          addToast({
-            ...DEFAULT_UPLOADED_TOAST,
-            description: t('toast.setControlImage'),
-          })
-        );
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: t('toast.setControlImage'),
+        });
       }
 
       if (postUploadAction?.type === 'SET_IPA_LAYER_IMAGE') {
         const { layerId } = postUploadAction;
         dispatch(ipaLayerImageChanged({ layerId, imageDTO }));
-        dispatch(
-          addToast({
-            ...DEFAULT_UPLOADED_TOAST,
-            description: t('toast.setControlImage'),
-          })
-        );
+        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 }));
-        dispatch(
-          addToast({
-            ...DEFAULT_UPLOADED_TOAST,
-            description: t('toast.setControlImage'),
-          })
-        );
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: t('toast.setControlImage'),
+        });
       }
 
       if (postUploadAction?.type === 'SET_II_LAYER_IMAGE') {
         const { layerId } = postUploadAction;
         dispatch(iiLayerImageChanged({ layerId, imageDTO }));
-        dispatch(
-          addToast({
-            ...DEFAULT_UPLOADED_TOAST,
-            description: t('toast.setControlImage'),
-          })
-        );
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: t('toast.setControlImage'),
+        });
       }
 
       if (postUploadAction?.type === 'SET_NODES_IMAGE') {
         const { nodeId, fieldName } = postUploadAction;
         dispatch(fieldImageValueChanged({ nodeId, fieldName, value: imageDTO }));
-        dispatch(
-          addToast({
-            ...DEFAULT_UPLOADED_TOAST,
-            description: `${t('toast.setNodeField')} ${fieldName}`,
-          })
-        );
+        toast({
+          ...DEFAULT_UPLOADED_TOAST,
+          description: `${t('toast.setNodeField')} ${fieldName}`,
+        });
         return;
       }
     },
@@ -174,7 +158,7 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
 
   startAppListening({
     matcher: imagesApi.endpoints.uploadImage.matchRejected,
-    effect: (action, { dispatch }) => {
+    effect: (action) => {
       const log = logger('images');
       const sanitizedData = {
         arg: {
@@ -183,13 +167,11 @@ export const addImageUploadedFulfilledListener = (startAppListening: AppStartLis
         },
       };
       log.error({ ...sanitizedData }, 'Image upload failed');
-      dispatch(
-        addToast({
-          title: t('toast.imageUploadFailed'),
-          description: action.error.message,
-          status: 'error',
-        })
-      );
+      toast({
+        title: t('toast.imageUploadFailed'),
+        description: action.error.message,
+        status: 'error',
+      });
     },
   });
 };

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

@@ -8,8 +8,7 @@ import { loraRemoved } from 'features/lora/store/loraSlice';
 import { modelSelected } from 'features/parameters/store/actions';
 import { modelChanged, vaeSelected } from 'features/parameters/store/generationSlice';
 import { zParameterModel } from 'features/parameters/types/parameterSchemas';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { forEach } from 'lodash-es';
 
@@ -60,16 +59,14 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
         });
 
         if (modelsCleared > 0) {
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('toast.baseModelChangedCleared', {
-                  count: modelsCleared,
-                }),
-                status: 'warning',
-              })
-            )
-          );
+          toast({
+            id: 'BASE_MODEL_CHANGED',
+            title: t('toast.baseModelChanged'),
+            description: t('toast.baseModelChangedCleared', {
+              count: modelsCleared,
+            }),
+            status: 'warning',
+          });
         }
       }
 

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

@@ -19,8 +19,7 @@ import {
   isParameterWidth,
   zParameterVAEModel,
 } from 'features/parameters/types/parameterSchemas';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { modelConfigsAdapterSelectors, modelsApi } from 'services/api/endpoints/models';
 import { isNonRefinerMainModelConfig } from 'services/api/types';
@@ -109,7 +108,7 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
           }
         }
 
-        dispatch(addToast(makeToast({ title: t('toast.parameterSet', { parameter: 'Default settings' }) })));
+        toast({ id: 'PARAMETER_SET', title: t('toast.parameterSet', { parameter: 'Default settings' }) });
       }
     },
   });

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

@@ -1,7 +1,7 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { deepClone } from 'common/util/deepClone';
-import { $nodeExecutionStates } from 'features/nodes/hooks/useExecutionState';
+import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState';
 import { zNodeStatus } from 'features/nodes/types/invocation';
 import { socketGeneratorProgress } from 'services/events/actions';
 
@@ -18,6 +18,7 @@ export const addGeneratorProgressEventListener = (startAppListening: AppStartLis
         nes.status = zNodeStatus.enum.IN_PROGRESS;
         nes.progress = (step + 1) / total_steps;
         nes.progressImage = progress_image ?? null;
+        upsertExecutionState(nes.nodeId, nes);
       }
     },
   });

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

@@ -3,16 +3,43 @@ import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'
 import { deepClone } from 'common/util/deepClone';
 import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState';
 import { zNodeStatus } from 'features/nodes/types/invocation';
+import { toast } from 'features/toast/toast';
+import ToastWithSessionRefDescription from 'features/toast/ToastWithSessionRefDescription';
+import { t } from 'i18next';
+import { startCase } from 'lodash-es';
 import { socketInvocationError } from 'services/events/actions';
 
 const log = logger('socketio');
 
+const getTitle = (errorType: string) => {
+  if (errorType === 'OutOfMemoryError') {
+    return t('toast.outOfMemoryError');
+  }
+  return t('toast.serverError');
+};
+
+const getDescription = (errorType: string, sessionId: string, isLocal?: boolean) => {
+  if (!isLocal) {
+    if (errorType === 'OutOfMemoryError') {
+      return ToastWithSessionRefDescription({
+        message: t('toast.outOfMemoryDescription'),
+        sessionId,
+      });
+    }
+    return ToastWithSessionRefDescription({
+      message: errorType,
+      sessionId,
+    });
+  }
+  return errorType;
+};
+
 export const addInvocationErrorEventListener = (startAppListening: AppStartListening) => {
   startAppListening({
     actionCreator: socketInvocationError,
-    effect: (action) => {
+    effect: (action, { getState }) => {
       log.error(action.payload, `Invocation error (${action.payload.data.node.type})`);
-      const { source_node_id } = action.payload.data;
+      const { source_node_id, error_type, graph_execution_state_id } = action.payload.data;
       const nes = deepClone($nodeExecutionStates.get()[source_node_id]);
       if (nes) {
         nes.status = zNodeStatus.enum.FAILED;
@@ -21,6 +48,19 @@ export const addInvocationErrorEventListener = (startAppListening: AppStartListe
         nes.progressImage = null;
         upsertExecutionState(nes.nodeId, nes);
       }
+
+      const errorType = startCase(error_type);
+      const sessionId = graph_execution_state_id;
+      const { isLocal } = getState().config;
+
+      toast({
+        id: `INVOCATION_ERROR_${errorType}`,
+        title: getTitle(errorType),
+        status: 'error',
+        duration: null,
+        description: getDescription(errorType, sessionId, isLocal),
+        updateDescription: isLocal ? true : false,
+      });
     },
   });
 };

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

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

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

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

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

@@ -1,6 +1,6 @@
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { stagingAreaImageSaved } from 'features/canvas/store/actions';
-import { addToast } from 'features/system/store/systemSlice';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { imagesApi } from 'services/api/endpoints/images';
 
@@ -29,15 +29,14 @@ export const addStagingAreaImageSavedListener = (startAppListening: AppStartList
             })
           );
         }
-        dispatch(addToast({ title: t('toast.imageSaved'), status: 'success' }));
+        toast({ id: 'IMAGE_SAVED', title: t('toast.imageSaved'), status: 'success' });
       } catch (error) {
-        dispatch(
-          addToast({
-            title: t('toast.imageSavingFailed'),
-            description: (error as Error)?.message,
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'IMAGE_SAVE_FAILED',
+          title: t('toast.imageSavingFailed'),
+          description: (error as Error)?.message,
+          status: 'error',
+        });
       }
     },
   });

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

@@ -1,12 +1,11 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { updateAllNodesRequested } from 'features/nodes/store/actions';
-import { $templates, nodeReplaced } from 'features/nodes/store/nodesSlice';
+import { $templates, nodesChanged } from 'features/nodes/store/nodesSlice';
 import { NodeUpdateError } from 'features/nodes/types/error';
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { getNeedsUpdate, updateNode } from 'features/nodes/util/node/nodeUpdate';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 
 export const addUpdateAllNodesRequestedListener = (startAppListening: AppStartListening) => {
@@ -31,7 +30,12 @@ export const addUpdateAllNodesRequestedListener = (startAppListening: AppStartLi
         }
         try {
           const updatedNode = updateNode(node, template);
-          dispatch(nodeReplaced({ nodeId: updatedNode.id, node: updatedNode }));
+          dispatch(
+            nodesChanged([
+              { type: 'remove', id: updatedNode.id },
+              { type: 'add', item: updatedNode },
+            ])
+          );
         } catch (e) {
           if (e instanceof NodeUpdateError) {
             unableToUpdateCount++;
@@ -45,24 +49,18 @@ export const addUpdateAllNodesRequestedListener = (startAppListening: AppStartLi
             count: unableToUpdateCount,
           })
         );
-        dispatch(
-          addToast(
-            makeToast({
-              title: t('nodes.unableToUpdateNodes', {
-                count: unableToUpdateCount,
-              }),
-            })
-          )
-        );
+        toast({
+          id: 'UNABLE_TO_UPDATE_NODES',
+          title: t('nodes.unableToUpdateNodes', {
+            count: unableToUpdateCount,
+          }),
+        });
       } else {
-        dispatch(
-          addToast(
-            makeToast({
-              title: t('nodes.allNodesUpdated'),
-              status: 'success',
-            })
-          )
-        );
+        toast({
+          id: 'ALL_NODES_UPDATED',
+          title: t('nodes.allNodesUpdated'),
+          status: 'success',
+        });
       }
     },
   });

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

@@ -4,7 +4,7 @@ import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'
 import { parseify } from 'common/util/serialize';
 import { buildAdHocUpscaleGraph } from 'features/nodes/util/graph/buildAdHocUpscaleGraph';
 import { createIsAllowedToUpscaleSelector } from 'features/parameters/hooks/useIsAllowedToUpscale';
-import { addToast } from 'features/system/store/systemSlice';
+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';
@@ -29,12 +29,11 @@ export const addUpscaleRequestedListener = (startAppListening: AppStartListening
           { imageDTO },
           t(detailTKey ?? 'parameters.isAllowedToUpscale.tooLarge') // should never coalesce
         );
-        dispatch(
-          addToast({
-            title: t(detailTKey ?? 'parameters.isAllowedToUpscale.tooLarge'), // should never coalesce
-            status: 'error',
-          })
-        );
+        toast({
+          id: 'NOT_ALLOWED_TO_UPSCALE',
+          title: t(detailTKey ?? 'parameters.isAllowedToUpscale.tooLarge'), // should never coalesce
+          status: 'error',
+        });
         return;
       }
 
@@ -65,12 +64,11 @@ export const addUpscaleRequestedListener = (startAppListening: AppStartListening
         if (error instanceof Object && 'status' in error && error.status === 403) {
           return;
         } else {
-          dispatch(
-            addToast({
-              title: t('queue.graphFailedToQueue'),
-              status: 'error',
-            })
-          );
+          toast({
+            id: 'GRAPH_QUEUE_FAILED',
+            title: t('queue.graphFailedToQueue'),
+            status: 'error',
+          });
         }
       }
     },

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

@@ -4,49 +4,62 @@ import { parseify } from 'common/util/serialize';
 import { workflowLoaded, workflowLoadRequested } from 'features/nodes/store/actions';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { $flow } from 'features/nodes/store/reactFlowInstance';
+import type { Templates } from 'features/nodes/store/types';
 import { WorkflowMigrationError, WorkflowVersionError } from 'features/nodes/types/error';
+import { graphToWorkflow } from 'features/nodes/util/workflow/graphToWorkflow';
 import { validateWorkflow } from 'features/nodes/util/workflow/validateWorkflow';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
+import { checkBoardAccess, checkImageAccess, checkModelAccess } from 'services/api/hooks/accessChecks';
+import type { GraphAndWorkflowResponse, NonNullableGraph } from 'services/api/types';
 import { z } from 'zod';
 import { fromZodError } from 'zod-validation-error';
 
+const getWorkflow = async (data: GraphAndWorkflowResponse, templates: Templates) => {
+  if (data.workflow) {
+    // Prefer to load the workflow if it's available - it has more information
+    const parsed = JSON.parse(data.workflow);
+    return await validateWorkflow(parsed, templates, checkImageAccess, checkBoardAccess, checkModelAccess);
+  } else if (data.graph) {
+    // Else we fall back on the graph, using the graphToWorkflow function to convert and do layout
+    const parsed = JSON.parse(data.graph);
+    const workflow = graphToWorkflow(parsed as NonNullableGraph, true);
+    return await validateWorkflow(workflow, templates, checkImageAccess, checkBoardAccess, checkModelAccess);
+  } else {
+    throw new Error('No workflow or graph provided');
+  }
+};
+
 export const addWorkflowLoadRequestedListener = (startAppListening: AppStartListening) => {
   startAppListening({
     actionCreator: workflowLoadRequested,
-    effect: (action, { dispatch }) => {
+    effect: async (action, { dispatch }) => {
       const log = logger('nodes');
-      const { workflow, asCopy } = action.payload;
+      const { data, asCopy } = action.payload;
       const nodeTemplates = $templates.get();
 
       try {
-        const { workflow: validatedWorkflow, warnings } = validateWorkflow(workflow, nodeTemplates);
+        const { workflow, warnings } = await getWorkflow(data, nodeTemplates);
 
         if (asCopy) {
           // If we're loading a copy, we need to remove the ID so that the backend will create a new workflow
-          delete validatedWorkflow.id;
+          delete workflow.id;
         }
 
-        dispatch(workflowLoaded(validatedWorkflow));
+        dispatch(workflowLoaded(workflow));
         if (!warnings.length) {
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('toast.workflowLoaded'),
-                status: 'success',
-              })
-            )
-          );
+          toast({
+            id: 'WORKFLOW_LOADED',
+            title: t('toast.workflowLoaded'),
+            status: 'success',
+          });
         } else {
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('toast.loadedWithWarnings'),
-                status: 'warning',
-              })
-            )
-          );
+          toast({
+            id: 'WORKFLOW_LOADED',
+            title: t('toast.loadedWithWarnings'),
+            status: 'warning',
+          });
+
           warnings.forEach(({ message, ...rest }) => {
             log.warn(rest, message);
           });
@@ -59,54 +72,42 @@ export const addWorkflowLoadRequestedListener = (startAppListening: AppStartList
         if (e instanceof WorkflowVersionError) {
           // The workflow version was not recognized in the valid list of versions
           log.error({ error: parseify(e) }, e.message);
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('nodes.unableToValidateWorkflow'),
-                status: 'error',
-                description: e.message,
-              })
-            )
-          );
+          toast({
+            id: 'UNABLE_TO_VALIDATE_WORKFLOW',
+            title: t('nodes.unableToValidateWorkflow'),
+            status: 'error',
+            description: e.message,
+          });
         } else if (e instanceof WorkflowMigrationError) {
           // There was a problem migrating the workflow to the latest version
           log.error({ error: parseify(e) }, e.message);
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('nodes.unableToValidateWorkflow'),
-                status: 'error',
-                description: e.message,
-              })
-            )
-          );
+          toast({
+            id: 'UNABLE_TO_VALIDATE_WORKFLOW',
+            title: t('nodes.unableToValidateWorkflow'),
+            status: 'error',
+            description: e.message,
+          });
         } else if (e instanceof z.ZodError) {
           // There was a problem validating the workflow itself
           const { message } = fromZodError(e, {
             prefix: t('nodes.workflowValidation'),
           });
           log.error({ error: parseify(e) }, message);
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('nodes.unableToValidateWorkflow'),
-                status: 'error',
-                description: message,
-              })
-            )
-          );
+          toast({
+            id: 'UNABLE_TO_VALIDATE_WORKFLOW',
+            title: t('nodes.unableToValidateWorkflow'),
+            status: 'error',
+            description: message,
+          });
         } else {
           // Some other error occurred
           log.error({ error: parseify(e) }, t('nodes.unknownErrorValidatingWorkflow'));
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('nodes.unableToValidateWorkflow'),
-                status: 'error',
-                description: t('nodes.unknownErrorValidatingWorkflow'),
-              })
-            )
-          );
+          toast({
+            id: 'UNABLE_TO_VALIDATE_WORKFLOW',
+            title: t('nodes.unableToValidateWorkflow'),
+            status: 'error',
+            description: t('nodes.unknownErrorValidatingWorkflow'),
+          });
         }
       }
     },

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

@@ -74,6 +74,7 @@ export type AppConfig = {
   maxUpscalePixels?: number;
   metadataFetchDebounce?: number;
   workflowFetchDebounce?: number;
+  isLocal?: boolean;
   sd: {
     defaultModel?: string;
     disabledControlNetModels: string[];

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

@@ -1,11 +1,10 @@
-import { useAppToaster } from 'app/components/Toaster';
 import { useImageUrlToBlob } from 'common/hooks/useImageUrlToBlob';
 import { copyBlobToClipboard } from 'features/system/util/copyBlobToClipboard';
+import { toast } from 'features/toast/toast';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const useCopyImageToClipboard = () => {
-  const toaster = useAppToaster();
   const { t } = useTranslation();
   const imageUrlToBlob = useImageUrlToBlob();
 
@@ -16,12 +15,11 @@ export const useCopyImageToClipboard = () => {
   const copyImageToClipboard = useCallback(
     async (image_url: string) => {
       if (!isClipboardAPIAvailable) {
-        toaster({
+        toast({
+          id: 'PROBLEM_COPYING_IMAGE',
           title: t('toast.problemCopyingImage'),
           description: "Your browser doesn't support the Clipboard API.",
           status: 'error',
-          duration: 2500,
-          isClosable: true,
         });
       }
       try {
@@ -33,23 +31,21 @@ export const useCopyImageToClipboard = () => {
 
         copyBlobToClipboard(blob);
 
-        toaster({
+        toast({
+          id: 'IMAGE_COPIED',
           title: t('toast.imageCopied'),
           status: 'success',
-          duration: 2500,
-          isClosable: true,
         });
       } catch (err) {
-        toaster({
+        toast({
+          id: 'PROBLEM_COPYING_IMAGE',
           title: t('toast.problemCopyingImage'),
           description: String(err),
           status: 'error',
-          duration: 2500,
-          isClosable: true,
         });
       }
     },
-    [imageUrlToBlob, isClipboardAPIAvailable, t, toaster]
+    [imageUrlToBlob, isClipboardAPIAvailable, t]
   );
 
   return { isClipboardAPIAvailable, copyImageToClipboard };

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

@@ -1,13 +1,12 @@
 import { useStore } from '@nanostores/react';
-import { useAppToaster } from 'app/components/Toaster';
 import { $authToken } from 'app/store/nanostores/authToken';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { imageDownloaded } from 'features/gallery/store/actions';
+import { toast } from 'features/toast/toast';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const useDownloadImage = () => {
-  const toaster = useAppToaster();
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const authToken = useStore($authToken);
@@ -37,16 +36,15 @@ export const useDownloadImage = () => {
         window.URL.revokeObjectURL(url);
         dispatch(imageDownloaded());
       } catch (err) {
-        toaster({
+        toast({
+          id: 'PROBLEM_DOWNLOADING_IMAGE',
           title: t('toast.problemDownloadingImage'),
           description: String(err),
           status: 'error',
-          duration: 2500,
-          isClosable: true,
         });
       }
     },
-    [t, toaster, dispatch, authToken]
+    [t, dispatch, authToken]
   );
 
   return { downloadImage };

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

@@ -1,6 +1,6 @@
-import { useAppToaster } from 'app/components/Toaster';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
+import { toast } from 'features/toast/toast';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import { useCallback, useEffect, useState } from 'react';
 import type { Accept, FileRejection } from 'react-dropzone';
@@ -26,7 +26,6 @@ const selectPostUploadAction = createMemoizedSelector(activeTabNameSelector, (ac
 
 export const useFullscreenDropzone = () => {
   const { t } = useTranslation();
-  const toaster = useAppToaster();
   const postUploadAction = useAppSelector(selectPostUploadAction);
   const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
   const [isHandlingUpload, setIsHandlingUpload] = useState<boolean>(false);
@@ -37,13 +36,14 @@ export const useFullscreenDropzone = () => {
     (rejection: FileRejection) => {
       setIsHandlingUpload(true);
 
-      toaster({
+      toast({
+        id: 'UPLOAD_FAILED',
         title: t('toast.uploadFailed'),
         description: rejection.errors.map((error) => error.message).join('\n'),
         status: 'error',
       });
     },
-    [t, toaster]
+    [t]
   );
 
   const fileAcceptedCallback = useCallback(
@@ -62,7 +62,8 @@ export const useFullscreenDropzone = () => {
   const onDrop = useCallback(
     (acceptedFiles: Array<File>, fileRejections: Array<FileRejection>) => {
       if (fileRejections.length > 1) {
-        toaster({
+        toast({
+          id: 'UPLOAD_FAILED',
           title: t('toast.uploadFailed'),
           description: t('toast.uploadFailedInvalidUploadDesc'),
           status: 'error',
@@ -78,7 +79,7 @@ export const useFullscreenDropzone = () => {
         fileAcceptedCallback(file);
       });
     },
-    [t, toaster, fileAcceptedCallback, fileRejectionCallback]
+    [t, fileAcceptedCallback, fileRejectionCallback]
   );
 
   const onDragOver = useCallback(() => {

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

@@ -137,7 +137,7 @@ const createSelector = (templates: Templates) =>
                 if (l.controlAdapter.type === 't2i_adapter') {
                   const multiple = model?.base === 'sdxl' ? 32 : 64;
                   if (size.width % multiple !== 0 || size.height % multiple !== 0) {
-                    problems.push(i18n.t('parameters.invoke.layer.t2iAdapterIncompatibleDimensions'));
+                    problems.push(i18n.t('parameters.invoke.layer.t2iAdapterIncompatibleDimensions', { multiple }));
                   }
                 }
               }

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

@@ -1,6 +0,0 @@
-import { createStandaloneToast, theme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
-
-export const { toast } = createStandaloneToast({
-  theme: theme,
-  defaultOptions: TOAST_OPTIONS.defaultOptions,
-});

invokeai/frontend/web/src/features/controlLayers/components/CALayer/CALayer.tsx

@@ -4,7 +4,7 @@ import { CALayerControlAdapterWrapper } from 'features/controlLayers/components/
 import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
 import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu';
 import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle';
-import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
+import { LayerIsEnabledToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
 import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
 import { layerSelected, selectCALayerOrThrow } from 'features/controlLayers/store/controlLayersSlice';
 import { memo, useCallback } from 'react';
@@ -26,7 +26,7 @@ export const CALayer = memo(({ layerId }: Props) => {
   return (
     <LayerWrapper onClick={onClick} borderColor={isSelected ? 'base.400' : 'base.800'}>
       <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
-        <LayerVisibilityToggle layerId={layerId} />
+        <LayerIsEnabledToggle layerId={layerId} />
         <LayerTitle type="control_adapter_layer" />
         <Spacer />
         <CALayerOpacity layerId={layerId} />

invokeai/frontend/web/src/features/controlLayers/components/IILayer/IILayer.tsx

@@ -5,7 +5,7 @@ import { InitialImagePreview } from 'features/controlLayers/components/IILayer/I
 import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
 import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu';
 import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle';
-import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
+import { LayerIsEnabledToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
 import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
 import {
   iiLayerDenoisingStrengthChanged,
@@ -66,7 +66,7 @@ export const IILayer = memo(({ layerId }: Props) => {
   return (
     <LayerWrapper onClick={onClick} borderColor={layer.isSelected ? 'base.400' : 'base.800'}>
       <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
-        <LayerVisibilityToggle layerId={layerId} />
+        <LayerIsEnabledToggle layerId={layerId} />
         <LayerTitle type="initial_image_layer" />
         <Spacer />
         <IILayerOpacity layerId={layerId} />

invokeai/frontend/web/src/features/controlLayers/components/IPALayer/IPALayer.tsx

@@ -3,7 +3,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { IPALayerIPAdapterWrapper } from 'features/controlLayers/components/IPALayer/IPALayerIPAdapterWrapper';
 import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
 import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle';
-import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
+import { LayerIsEnabledToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
 import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
 import { layerSelected, selectIPALayerOrThrow } from 'features/controlLayers/store/controlLayersSlice';
 import { memo, useCallback } from 'react';
@@ -22,7 +22,7 @@ export const IPALayer = memo(({ layerId }: Props) => {
   return (
     <LayerWrapper onClick={onClick} borderColor={isSelected ? 'base.400' : 'base.800'}>
       <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
-        <LayerVisibilityToggle layerId={layerId} />
+        <LayerIsEnabledToggle layerId={layerId} />
         <LayerTitle type="ip_adapter_layer" />
         <Spacer />
         <LayerDeleteButton layerId={layerId} />

invokeai/frontend/web/src/features/controlLayers/components/LayerCommon/LayerVisibilityToggle.tsx

@@ -1,8 +1,8 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
 import { stopPropagation } from 'common/util/stopPropagation';
-import { useLayerIsVisible } from 'features/controlLayers/hooks/layerStateHooks';
-import { layerVisibilityToggled } from 'features/controlLayers/store/controlLayersSlice';
+import { useLayerIsEnabled } from 'features/controlLayers/hooks/layerStateHooks';
+import { layerIsEnabledToggled } from 'features/controlLayers/store/controlLayersSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCheckBold } from 'react-icons/pi';
@@ -11,21 +11,21 @@ type Props = {
   layerId: string;
 };
 
-export const LayerVisibilityToggle = memo(({ layerId }: Props) => {
+export const LayerIsEnabledToggle = memo(({ layerId }: Props) => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
-  const isVisible = useLayerIsVisible(layerId);
+  const isEnabled = useLayerIsEnabled(layerId);
   const onClick = useCallback(() => {
-    dispatch(layerVisibilityToggled(layerId));
+    dispatch(layerIsEnabledToggled(layerId));
   }, [dispatch, layerId]);
 
   return (
     <IconButton
       size="sm"
-      aria-label={t('controlLayers.toggleVisibility')}
-      tooltip={t('controlLayers.toggleVisibility')}
+      aria-label={t(isEnabled ? 'common.enabled' : 'common.disabled')}
+      tooltip={t(isEnabled ? 'common.enabled' : 'common.disabled')}
       variant="outline"
-      icon={isVisible ? <PiCheckBold /> : undefined}
+      icon={isEnabled ? <PiCheckBold /> : undefined}
       onClick={onClick}
       colorScheme="base"
       onDoubleClick={stopPropagation} // double click expands the layer
@@ -33,4 +33,4 @@ export const LayerVisibilityToggle = memo(({ layerId }: Props) => {
   );
 });
 
-LayerVisibilityToggle.displayName = 'LayerVisibilityToggle';
+LayerIsEnabledToggle.displayName = 'LayerVisibilityToggle';

invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayer.tsx

@@ -6,7 +6,7 @@ import { AddPromptButtons } from 'features/controlLayers/components/AddPromptBut
 import { LayerDeleteButton } from 'features/controlLayers/components/LayerCommon/LayerDeleteButton';
 import { LayerMenu } from 'features/controlLayers/components/LayerCommon/LayerMenu';
 import { LayerTitle } from 'features/controlLayers/components/LayerCommon/LayerTitle';
-import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
+import { LayerIsEnabledToggle } from 'features/controlLayers/components/LayerCommon/LayerVisibilityToggle';
 import { LayerWrapper } from 'features/controlLayers/components/LayerCommon/LayerWrapper';
 import {
   isRegionalGuidanceLayer,
@@ -55,7 +55,7 @@ export const RGLayer = memo(({ layerId }: Props) => {
   return (
     <LayerWrapper onClick={onClick} borderColor={isSelected ? color : 'base.800'}>
       <Flex gap={3} alignItems="center" p={3} cursor="pointer" onDoubleClick={onToggle}>
-        <LayerVisibilityToggle layerId={layerId} />
+        <LayerIsEnabledToggle layerId={layerId} />
         <LayerTitle type="regional_guidance_layer" />
         <Spacer />
         {autoNegative === 'invert' && (

invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerNegativePrompt.tsx

@@ -45,7 +45,6 @@ export const RGLayerNegativePrompt = memo(({ layerId }: Props) => {
           variant="darkFilled"
           paddingRight={30}
           fontSize="sm"
-          spellCheck={false}
         />
         <PromptOverlayButtonWrapper>
           <RGLayerPromptDeleteButton layerId={layerId} polarity="negative" />

invokeai/frontend/web/src/features/controlLayers/components/RGLayer/RGLayerPositivePrompt.tsx

@@ -45,7 +45,6 @@ export const RGLayerPositivePrompt = memo(({ layerId }: Props) => {
           variant="darkFilled"
           paddingRight={30}
           minH={28}
-          spellCheck={false}
         />
         <PromptOverlayButtonWrapper>
           <RGLayerPromptDeleteButton layerId={layerId} polarity="positive" />

invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts

@@ -39,7 +39,7 @@ export const useLayerNegativePrompt = (layerId: string) => {
   return prompt;
 };
 
-export const useLayerIsVisible = (layerId: string) => {
+export const useLayerIsEnabled = (layerId: string) => {
   const selectLayer = useMemo(
     () =>
       createSelector(selectControlLayersSlice, (controlLayers) => {

invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts

@@ -139,7 +139,7 @@ export const controlLayersSlice = createSlice({
     layerSelected: (state, action: PayloadAction<string>) => {
       exclusivelySelectLayer(state, action.payload);
     },
-    layerVisibilityToggled: (state, action: PayloadAction<string>) => {
+    layerIsEnabledToggled: (state, action: PayloadAction<string>) => {
       const layer = state.layers.find((l) => l.id === action.payload);
       if (layer) {
         layer.isEnabled = !layer.isEnabled;
@@ -616,12 +616,24 @@ export const controlLayersSlice = createSlice({
     iiLayerAdded: {
       reducer: (state, action: PayloadAction<{ layerId: string; imageDTO: ImageDTO | null }>) => {
         const { layerId, imageDTO } = action.payload;
+
+        // Retain opacity and denoising strength of existing initial image layer if exists
+        let opacity = 1;
+        let denoisingStrength = 0.75;
+        const iiLayer = state.layers.find((l) => l.id === layerId);
+        if (iiLayer) {
+          assert(isInitialImageLayer(iiLayer));
+          opacity = iiLayer.opacity;
+          denoisingStrength = iiLayer.denoisingStrength;
+        }
+
         // Highlander! There can be only one!
         state.layers = state.layers.filter((l) => (isInitialImageLayer(l) ? false : true));
+
         const layer: InitialImageLayer = {
           id: layerId,
           type: 'initial_image_layer',
-          opacity: 1,
+          opacity,
           x: 0,
           y: 0,
           bbox: null,
@@ -629,7 +641,7 @@ export const controlLayersSlice = createSlice({
           isEnabled: true,
           image: imageDTO ? imageDTOToImageWithDims(imageDTO) : null,
           isSelected: true,
-          denoisingStrength: 0.75,
+          denoisingStrength,
         };
         state.layers.push(layer);
         exclusivelySelectLayer(state, layer.id);
@@ -779,7 +791,7 @@ class LayerColors {
 export const {
   // Any Layer Type
   layerSelected,
-  layerVisibilityToggled,
+  layerIsEnabledToggled,
   layerTranslated,
   layerBboxChanged,
   layerReset,

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx

@@ -1,6 +1,5 @@
 import { Flex, MenuDivider, MenuItem, Spinner } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { useAppToaster } from 'app/components/Toaster';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard';
@@ -11,10 +10,13 @@ import { iiLayerAdded } from 'features/controlLayers/store/controlLayersSlice';
 import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice';
 import { useImageActions } from 'features/gallery/hooks/useImageActions';
 import { sentImageToCanvas, sentImageToImg2Img } from 'features/gallery/store/actions';
+import { $templates } from 'features/nodes/store/nodesSlice';
 import { selectOptimalDimension } from 'features/parameters/store/generationSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { toast } from 'features/toast/toast';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { useGetAndLoadEmbeddedWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow';
+import { size } from 'lodash-es';
 import { memo, useCallback } from 'react';
 import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
@@ -44,10 +46,10 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
   const optimalDimension = useAppSelector(selectOptimalDimension);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
-  const toaster = useAppToaster();
   const isCanvasEnabled = useFeatureStatus('canvas');
   const customStarUi = useStore($customStarUI);
   const { downloadImage } = useDownloadImage();
+  const templates = useStore($templates);
 
   const { recallAll, remix, recallSeed, recallPrompts, hasMetadata, hasSeed, hasPrompts, isLoadingMetadata } =
     useImageActions(imageDTO?.image_name);
@@ -83,13 +85,12 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
     });
     dispatch(setInitialCanvasImage(imageDTO, optimalDimension));
 
-    toaster({
+    toast({
+      id: 'SENT_TO_CANVAS',
       title: t('toast.sentToUnifiedCanvas'),
       status: 'success',
-      duration: 2500,
-      isClosable: true,
     });
-  }, [dispatch, imageDTO, t, toaster, optimalDimension]);
+  }, [dispatch, imageDTO, t, optimalDimension]);
 
   const handleChangeBoard = useCallback(() => {
     dispatch(imagesToChangeSelected([imageDTO]));
@@ -133,7 +134,7 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
       <MenuItem
         icon={getAndLoadEmbeddedWorkflowResult.isLoading ? <SpinnerIcon /> : <PiFlowArrowBold />}
         onClickCapture={handleLoadWorkflow}
-        isDisabled={!imageDTO.has_workflow}
+        isDisabled={!imageDTO.has_workflow || !size(templates)}
       >
         {t('nodes.loadWorkflow')}
       </MenuItem>

invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataGraphTabContent.tsx

@@ -0,0 +1,34 @@
+import { IAINoContentFallback } from 'common/components/IAIImageFallback';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDebouncedImageWorkflow } from 'services/api/hooks/useDebouncedImageWorkflow';
+import type { ImageDTO } from 'services/api/types';
+
+import DataViewer from './DataViewer';
+
+type Props = {
+  image: ImageDTO;
+};
+
+const ImageMetadataGraphTabContent = ({ image }: Props) => {
+  const { t } = useTranslation();
+  const { currentData } = useDebouncedImageWorkflow(image);
+  const graph = useMemo(() => {
+    if (currentData?.graph) {
+      try {
+        return JSON.parse(currentData.graph);
+      } catch {
+        return null;
+      }
+    }
+    return null;
+  }, [currentData]);
+
+  if (!graph) {
+    return <IAINoContentFallback label={t('nodes.noGraph')} />;
+  }
+
+  return <DataViewer data={graph} label={t('nodes.graph')} />;
+};
+
+export default memo(ImageMetadataGraphTabContent);

invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataViewer.tsx

@@ -1,6 +1,7 @@
 import { ExternalLink, Flex, Tab, TabList, TabPanel, TabPanels, Tabs, Text } from '@invoke-ai/ui-library';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import ImageMetadataGraphTabContent from 'features/gallery/components/ImageMetadataViewer/ImageMetadataGraphTabContent';
 import { useMetadataItem } from 'features/metadata/hooks/useMetadataItem';
 import { handlers } from 'features/metadata/util/handlers';
 import { memo } from 'react';
@@ -52,6 +53,7 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
           <Tab>{t('metadata.metadata')}</Tab>
           <Tab>{t('metadata.imageDetails')}</Tab>
           <Tab>{t('metadata.workflow')}</Tab>
+          <Tab>{t('nodes.graph')}</Tab>
         </TabList>
 
         <TabPanels>
@@ -81,6 +83,9 @@ const ImageMetadataViewer = ({ image }: ImageMetadataViewerProps) => {
           <TabPanel>
             <ImageMetadataWorkflowTabContent image={image} />
           </TabPanel>
+          <TabPanel>
+            <ImageMetadataGraphTabContent image={image} />
+          </TabPanel>
         </TabPanels>
       </Tabs>
     </Flex>

invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataWorkflowTabContent.tsx

@@ -1,5 +1,5 @@
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDebouncedImageWorkflow } from 'services/api/hooks/useDebouncedImageWorkflow';
 import type { ImageDTO } from 'services/api/types';
@@ -12,7 +12,17 @@ type Props = {
 
 const ImageMetadataWorkflowTabContent = ({ image }: Props) => {
   const { t } = useTranslation();
-  const { workflow } = useDebouncedImageWorkflow(image);
+  const { currentData } = useDebouncedImageWorkflow(image);
+  const workflow = useMemo(() => {
+    if (currentData?.workflow) {
+      try {
+        return JSON.parse(currentData.workflow);
+      } catch {
+        return null;
+      }
+    }
+    return null;
+  }, [currentData]);
 
   if (!workflow) {
     return <IAINoContentFallback label={t('nodes.noWorkflow')} />;

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx

@@ -1,4 +1,5 @@
 import { ButtonGroup, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { upscaleRequested } from 'app/store/middleware/listenerMiddleware/listeners/upscaleRequested';
@@ -12,12 +13,14 @@ import { sentImageToImg2Img } from 'features/gallery/store/actions';
 import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
 import { selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import { parseAndRecallImageDimensions } from 'features/metadata/util/handlers';
+import { $templates } from 'features/nodes/store/nodesSlice';
 import ParamUpscalePopover from 'features/parameters/components/Upscale/ParamUpscaleSettings';
 import { useIsQueueMutationInProgress } from 'features/queue/hooks/useIsQueueMutationInProgress';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { selectSystemSlice } from 'features/system/store/systemSlice';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { useGetAndLoadEmbeddedWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow';
+import { size } from 'lodash-es';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -48,7 +51,7 @@ const CurrentImageButtons = () => {
   const lastSelectedImage = useAppSelector(selectLastSelectedImage);
   const selection = useAppSelector((s) => s.gallery.selection);
   const shouldDisableToolbarButtons = useAppSelector(selectShouldDisableToolbarButtons);
-
+  const templates = useStore($templates);
   const isUpscalingEnabled = useFeatureStatus('upscaling');
   const isQueueMutationInProgress = useIsQueueMutationInProgress();
   const { t } = useTranslation();
@@ -143,7 +146,7 @@ const CurrentImageButtons = () => {
           icon={<PiFlowArrowBold />}
           tooltip={`${t('nodes.loadWorkflow')} (W)`}
           aria-label={`${t('nodes.loadWorkflow')} (W)`}
-          isDisabled={!imageDTO?.has_workflow}
+          isDisabled={!imageDTO?.has_workflow || !size(templates)}
           onClick={handleLoadWorkflow}
           isLoading={getAndLoadEmbeddedWorkflowResult.isLoading}
         />

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ToggleMetadataViewerButton.tsx

@@ -1,6 +1,5 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
-import { useAppToaster } from 'app/components/Toaster';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
 import { setShouldShowImageDetails } from 'features/ui/store/uiSlice';
@@ -14,7 +13,6 @@ export const ToggleMetadataViewerButton = memo(() => {
   const dispatch = useAppDispatch();
   const shouldShowImageDetails = useAppSelector((s) => s.ui.shouldShowImageDetails);
   const lastSelectedImage = useAppSelector(selectLastSelectedImage);
-  const toaster = useAppToaster();
   const { t } = useTranslation();
 
   const { currentData: imageDTO } = useGetImageDTOQuery(lastSelectedImage?.image_name ?? skipToken);
@@ -24,7 +22,7 @@ export const ToggleMetadataViewerButton = memo(() => {
     [dispatch, shouldShowImageDetails]
   );
 
-  useHotkeys('i', toggleMetadataViewer, { enabled: Boolean(imageDTO) }, [imageDTO, shouldShowImageDetails, toaster]);
+  useHotkeys('i', toggleMetadataViewer, { enabled: Boolean(imageDTO) }, [imageDTO, shouldShowImageDetails]);
 
   return (
     <IconButton

invokeai/frontend/web/src/features/gallery/hooks/useImageActions.ts

@@ -53,7 +53,7 @@ export const useImageActions = (image_name?: string) => {
 
   const recallSeed = useCallback(() => {
     handlers.seed.parse(metadata).then((seed) => {
-      handlers.seed.recall && handlers.seed.recall(seed);
+      handlers.seed.recall && handlers.seed.recall(seed, true);
     });
   }, [metadata]);
 

invokeai/frontend/web/src/features/metadata/util/handlers.ts

@@ -1,5 +1,4 @@
 import { objectKeys } from 'common/util/objectKeys';
-import { toast } from 'common/util/toast';
 import type { Layer } from 'features/controlLayers/store/types';
 import type { LoRA } from 'features/lora/store/loraSlice';
 import type {
@@ -15,6 +14,7 @@ import type {
 import { fetchModelConfig } from 'features/metadata/util/modelFetchingHelpers';
 import { validators } from 'features/metadata/util/validators';
 import type { ModelIdentifierField } from 'features/nodes/types/common';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { assert } from 'tsafe';
 
@@ -89,23 +89,23 @@ const renderLayersValue: MetadataRenderValueFunc<Layer[]> = async (layers) => {
   return `${layers.length} ${t('controlLayers.layers', { count: layers.length })}`;
 };
 
-const parameterSetToast = (parameter: string, description?: string) => {
+const parameterSetToast = (parameter: string) => {
   toast({
-    title: t('toast.parameterSet', { parameter }),
-    description,
+    id: 'PARAMETER_SET',
+    title: t('toast.parameterSet'),
+    description: t('toast.parameterSetDesc', { parameter }),
     status: 'info',
-    duration: 2500,
-    isClosable: true,
   });
 };
 
-const parameterNotSetToast = (parameter: string, description?: string) => {
+const parameterNotSetToast = (parameter: string, message?: string) => {
   toast({
-    title: t('toast.parameterNotSet', { parameter }),
-    description,
+    id: 'PARAMETER_NOT_SET',
+    title: t('toast.parameterNotSet'),
+    description: message
+      ? t('toast.parameterNotSetDescWithMessage', { parameter, message })
+      : t('toast.parameterNotSetDesc', { parameter }),
     status: 'warning',
-    duration: 2500,
-    isClosable: true,
   });
 };
 
@@ -458,7 +458,18 @@ export const parseAndRecallAllMetadata = async (
         });
       })
   );
+
   if (results.some((result) => result.status === 'fulfilled')) {
-    parameterSetToast(t('toast.parameters'));
+    toast({
+      id: 'PARAMETER_SET',
+      title: t('toast.parametersSet'),
+      status: 'info',
+    });
+  } else {
+    toast({
+      id: 'PARAMETER_SET',
+      title: t('toast.parametersNotSet'),
+      status: 'warning',
+    });
   }
 };

invokeai/frontend/web/src/features/modelManagerV2/hooks/useInstallModel.ts

@@ -0,0 +1,48 @@
+import { toast } from 'features/toast/toast';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useInstallModelMutation } from 'services/api/endpoints/models';
+
+type InstallModelArg = {
+  source: string;
+  inplace?: boolean;
+  onSuccess?: () => void;
+  onError?: (error: unknown) => void;
+};
+
+export const useInstallModel = () => {
+  const { t } = useTranslation();
+  const [_installModel, request] = useInstallModelMutation();
+
+  const installModel = useCallback(
+    ({ source, inplace, onSuccess, onError }: InstallModelArg) => {
+      _installModel({ source, inplace })
+        .unwrap()
+        .then((_) => {
+          if (onSuccess) {
+            onSuccess();
+          }
+          toast({
+            id: 'MODEL_INSTALL_QUEUED',
+            title: t('toast.modelAddedSimple'),
+            status: 'success',
+          });
+        })
+        .catch((error) => {
+          if (onError) {
+            onError(error);
+          }
+          if (error) {
+            toast({
+              id: 'MODEL_INSTALL_QUEUE_FAILED',
+              title: `${error.data.detail} `,
+              status: 'error',
+            });
+          }
+        });
+    },
+    [_installModel, t]
+  );
+
+  return [installModel, request] as const;
+};

invokeai/frontend/web/src/features/modelManagerV2/hooks/useStarterModelsToast.tsx

@@ -17,7 +17,11 @@ export const useStarterModelsToast = () => {
 
   useEffect(() => {
     if (toast.isActive(TOAST_ID)) {
-      return;
+      if (mainModels.length === 0) {
+        return;
+      } else {
+        toast.close(TOAST_ID);
+      }
     }
     if (data && mainModels.length === 0 && !didToast && isEnabled) {
       toast({

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceForm.tsx

@@ -1,11 +1,9 @@
 import { Button, Flex, FormControl, FormErrorMessage, FormHelperText, FormLabel, Input } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { useInstallModel } from 'features/modelManagerV2/hooks/useInstallModel';
 import type { ChangeEventHandler } from 'react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useInstallModelMutation, useLazyGetHuggingFaceModelsQuery } from 'services/api/endpoints/models';
+import { useLazyGetHuggingFaceModelsQuery } from 'services/api/endpoints/models';
 
 import { HuggingFaceResults } from './HuggingFaceResults';
 
@@ -14,50 +12,19 @@ export const HuggingFaceForm = () => {
   const [displayResults, setDisplayResults] = useState(false);
   const [errorMessage, setErrorMessage] = useState('');
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
 
   const [_getHuggingFaceModels, { isLoading, data }] = useLazyGetHuggingFaceModelsQuery();
-  const [installModel] = useInstallModelMutation();
-
-  const handleInstallModel = useCallback(
-    (source: string) => {
-      installModel({ source })
-        .unwrap()
-        .then((_) => {
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('toast.modelAddedSimple'),
-                status: 'success',
-              })
-            )
-          );
-        })
-        .catch((error) => {
-          if (error) {
-            dispatch(
-              addToast(
-                makeToast({
-                  title: `${error.data.detail} `,
-                  status: 'error',
-                })
-              )
-            );
-          }
-        });
-    },
-    [installModel, dispatch, t]
-  );
+  const [installModel] = useInstallModel();
 
   const getModels = useCallback(async () => {
     _getHuggingFaceModels(huggingFaceRepo)
       .unwrap()
       .then((response) => {
         if (response.is_diffusers) {
-          handleInstallModel(huggingFaceRepo);
+          installModel({ source: huggingFaceRepo });
           setDisplayResults(false);
         } else if (response.urls?.length === 1 && response.urls[0]) {
-          handleInstallModel(response.urls[0]);
+          installModel({ source: response.urls[0] });
           setDisplayResults(false);
         } else {
           setDisplayResults(true);
@@ -66,7 +33,7 @@ export const HuggingFaceForm = () => {
       .catch((error) => {
         setErrorMessage(error.data.detail || '');
       });
-  }, [_getHuggingFaceModels, handleInstallModel, huggingFaceRepo]);
+  }, [_getHuggingFaceModels, installModel, huggingFaceRepo]);
 
   const handleSetHuggingFaceRepo: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
     setHuggingFaceRepo(e.target.value);

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceResultItem.tsx

@@ -1,47 +1,20 @@
 import { Flex, IconButton, Text } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { useInstallModel } from 'features/modelManagerV2/hooks/useInstallModel';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
-import { useInstallModelMutation } from 'services/api/endpoints/models';
 
 type Props = {
   result: string;
 };
 export const HuggingFaceResultItem = ({ result }: Props) => {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
 
-  const [installModel] = useInstallModelMutation();
+  const [installModel] = useInstallModel();
 
-  const handleInstall = useCallback(() => {
-    installModel({ source: result })
-      .unwrap()
-      .then((_) => {
-        dispatch(
-          addToast(
-            makeToast({
-              title: t('toast.modelAddedSimple'),
-              status: 'success',
-            })
-          )
-        );
-      })
-      .catch((error) => {
-        if (error) {
-          dispatch(
-            addToast(
-              makeToast({
-                title: `${error.data.detail} `,
-                status: 'error',
-              })
-            )
-          );
-        }
-      });
-  }, [installModel, result, dispatch, t]);
+  const onClick = useCallback(() => {
+    installModel({ source: result });
+  }, [installModel, result]);
 
   return (
     <Flex alignItems="center" justifyContent="space-between" w="100%" gap={3}>
@@ -51,7 +24,7 @@ export const HuggingFaceResultItem = ({ result }: Props) => {
           {result}
         </Text>
       </Flex>
-      <IconButton aria-label={t('modelManager.install')} icon={<PiPlusBold />} onClick={handleInstall} size="sm" />
+      <IconButton aria-label={t('modelManager.install')} icon={<PiPlusBold />} onClick={onClick} size="sm" />
     </Flex>
   );
 };

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/HuggingFaceFolder/HuggingFaceResults.tsx

@@ -8,15 +8,12 @@ import {
   InputGroup,
   InputRightElement,
 } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { useInstallModel } from 'features/modelManagerV2/hooks/useInstallModel';
 import type { ChangeEventHandler } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
-import { useInstallModelMutation } from 'services/api/endpoints/models';
 
 import { HuggingFaceResultItem } from './HuggingFaceResultItem';
 
@@ -27,9 +24,8 @@ type HuggingFaceResultsProps = {
 export const HuggingFaceResults = ({ results }: HuggingFaceResultsProps) => {
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState('');
-  const dispatch = useAppDispatch();
 
-  const [installModel] = useInstallModelMutation();
+  const [installModel] = useInstallModel();
 
   const filteredResults = useMemo(() => {
     return results.filter((result) => {
@@ -46,34 +42,11 @@ export const HuggingFaceResults = ({ results }: HuggingFaceResultsProps) => {
     setSearchTerm('');
   }, []);
 
-  const handleAddAll = useCallback(() => {
+  const onClickAddAll = useCallback(() => {
     for (const result of filteredResults) {
-      installModel({ source: result })
-        .unwrap()
-        .then((_) => {
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('toast.modelAddedSimple'),
-                status: 'success',
-              })
-            )
-          );
-        })
-        .catch((error) => {
-          if (error) {
-            dispatch(
-              addToast(
-                makeToast({
-                  title: `${error.data.detail} `,
-                  status: 'error',
-                })
-              )
-            );
-          }
-        });
+      installModel({ source: result });
     }
-  }, [filteredResults, installModel, dispatch, t]);
+  }, [filteredResults, installModel]);
 
   return (
     <>
@@ -82,7 +55,7 @@ export const HuggingFaceResults = ({ results }: HuggingFaceResultsProps) => {
         <Flex justifyContent="space-between" alignItems="center">
           <Heading size="sm">{t('modelManager.availableModels')}</Heading>
           <Flex alignItems="center" gap={3}>
-            <Button size="sm" onClick={handleAddAll} isDisabled={results.length === 0} flexShrink={0}>
+            <Button size="sm" onClick={onClickAddAll} isDisabled={results.length === 0} flexShrink={0}>
               {t('modelManager.installAll')}
             </Button>
             <InputGroup w={64} size="xs">

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/InstallModelForm.tsx

@@ -1,12 +1,9 @@
 import { Button, Checkbox, Flex, FormControl, FormHelperText, FormLabel, Input } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { useInstallModel } from 'features/modelManagerV2/hooks/useInstallModel';
 import { t } from 'i18next';
 import { useCallback } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
-import { useInstallModelMutation } from 'services/api/endpoints/models';
 
 type SimpleImportModelConfig = {
   location: string;
@@ -14,9 +11,7 @@ type SimpleImportModelConfig = {
 };
 
 export const InstallModelForm = () => {
-  const dispatch = useAppDispatch();
-
-  const [installModel, { isLoading }] = useInstallModelMutation();
+  const [installModel, { isLoading }] = useInstallModel();
 
   const { register, handleSubmit, formState, reset } = useForm<SimpleImportModelConfig>({
     defaultValues: {
@@ -26,40 +21,22 @@ export const InstallModelForm = () => {
     mode: 'onChange',
   });
 
+  const resetForm = useCallback(() => reset(undefined, { keepValues: true }), [reset]);
+
   const onSubmit = useCallback<SubmitHandler<SimpleImportModelConfig>>(
     (values) => {
       if (!values?.location) {
         return;
       }
 
-      installModel({ source: values.location, inplace: values.inplace })
-        .unwrap()
-        .then((_) => {
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('toast.modelAddedSimple'),
-                status: 'success',
-              })
-            )
-          );
-          reset(undefined, { keepValues: true });
-        })
-        .catch((error) => {
-          reset(undefined, { keepValues: true });
-          if (error) {
-            dispatch(
-              addToast(
-                makeToast({
-                  title: `${error.data.detail} `,
-                  status: 'error',
-                })
-              )
-            );
-          }
-        });
+      installModel({
+        source: values.location,
+        inplace: values.inplace,
+        onSuccess: resetForm,
+        onError: resetForm,
+      });
     },
-    [dispatch, reset, installModel]
+    [installModel, resetForm]
   );
 
   return (

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueue.tsx

@@ -1,8 +1,6 @@
 import { Box, Button, Flex, Heading } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { useCallback, useMemo } from 'react';
 import { useListModelInstallsQuery, usePruneCompletedModelInstallsMutation } from 'services/api/endpoints/models';
@@ -10,8 +8,6 @@ import { useListModelInstallsQuery, usePruneCompletedModelInstallsMutation } fro
 import { ModelInstallQueueItem } from './ModelInstallQueueItem';
 
 export const ModelInstallQueue = () => {
-  const dispatch = useAppDispatch();
-
   const { data } = useListModelInstallsQuery();
 
   const [_pruneCompletedModelInstalls] = usePruneCompletedModelInstallsMutation();
@@ -20,28 +16,22 @@ export const ModelInstallQueue = () => {
     _pruneCompletedModelInstalls()
       .unwrap()
       .then((_) => {
-        dispatch(
-          addToast(
-            makeToast({
-              title: t('toast.prunedQueue'),
-              status: 'success',
-            })
-          )
-        );
+        toast({
+          id: 'MODEL_INSTALL_QUEUE_PRUNED',
+          title: t('toast.prunedQueue'),
+          status: 'success',
+        });
       })
       .catch((error) => {
         if (error) {
-          dispatch(
-            addToast(
-              makeToast({
-                title: `${error.data.detail} `,
-                status: 'error',
-              })
-            )
-          );
+          toast({
+            id: 'MODEL_INSTALL_QUEUE_PRUNE_FAILED',
+            title: `${error.data.detail} `,
+            status: 'error',
+          });
         }
       });
-  }, [_pruneCompletedModelInstalls, dispatch]);
+  }, [_pruneCompletedModelInstalls]);
 
   const pruneAvailable = useMemo(() => {
     return data?.some(

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ModelInstallQueue/ModelInstallQueueItem.tsx

@@ -1,7 +1,5 @@
 import { Flex, IconButton, Progress, Text, Tooltip } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { isNil } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
@@ -29,7 +27,6 @@ const formatBytes = (bytes: number) => {
 
 export const ModelInstallQueueItem = (props: ModelListItemProps) => {
   const { installJob } = props;
-  const dispatch = useAppDispatch();
 
   const [deleteImportModel] = useCancelModelInstallMutation();
 
@@ -37,28 +34,22 @@ export const ModelInstallQueueItem = (props: ModelListItemProps) => {
     deleteImportModel(installJob.id)
       .unwrap()
       .then((_) => {
-        dispatch(
-          addToast(
-            makeToast({
-              title: t('toast.modelImportCanceled'),
-              status: 'success',
-            })
-          )
-        );
+        toast({
+          id: 'MODEL_INSTALL_CANCELED',
+          title: t('toast.modelImportCanceled'),
+          status: 'success',
+        });
       })
       .catch((error) => {
         if (error) {
-          dispatch(
-            addToast(
-              makeToast({
-                title: `${error.data.detail} `,
-                status: 'error',
-              })
-            )
-          );
+          toast({
+            id: 'MODEL_INSTALL_CANCEL_FAILED',
+            title: `${error.data.detail} `,
+            status: 'error',
+          });
         }
       });
-  }, [deleteImportModel, installJob, dispatch]);
+  }, [deleteImportModel, installJob]);
 
   const sourceLocation = useMemo(() => {
     switch (installJob.source.type) {

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/ScanFolder/ScanFolderResults.tsx

@@ -11,15 +11,13 @@ import {
   InputGroup,
   InputRightElement,
 } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { useInstallModel } from 'features/modelManagerV2/hooks/useInstallModel';
 import type { ChangeEvent, ChangeEventHandler } from 'react';
 import { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
-import { type ScanFolderResponse, useInstallModelMutation } from 'services/api/endpoints/models';
+import type { ScanFolderResponse } from 'services/api/endpoints/models';
 
 import { ScanModelResultItem } from './ScanFolderResultItem';
 
@@ -30,9 +28,8 @@ type ScanModelResultsProps = {
 export const ScanModelsResults = ({ results }: ScanModelResultsProps) => {
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState('');
-  const dispatch = useAppDispatch();
   const [inplace, setInplace] = useState(true);
-  const [installModel] = useInstallModelMutation();
+  const [installModel] = useInstallModel();
 
   const filteredResults = useMemo(() => {
     return results.filter((result) => {
@@ -58,61 +55,15 @@ export const ScanModelsResults = ({ results }: ScanModelResultsProps) => {
       if (result.is_installed) {
         continue;
       }
-      installModel({ source: result.path, inplace })
-        .unwrap()
-        .then((_) => {
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('toast.modelAddedSimple'),
-                status: 'success',
-              })
-            )
-          );
-        })
-        .catch((error) => {
-          if (error) {
-            dispatch(
-              addToast(
-                makeToast({
-                  title: `${error.data.detail} `,
-                  status: 'error',
-                })
-              )
-            );
-          }
-        });
+      installModel({ source: result.path, inplace });
     }
-  }, [filteredResults, installModel, inplace, dispatch, t]);
+  }, [filteredResults, installModel, inplace]);
 
   const handleInstallOne = useCallback(
     (source: string) => {
-      installModel({ source, inplace })
-        .unwrap()
-        .then((_) => {
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('toast.modelAddedSimple'),
-                status: 'success',
-              })
-            )
-          );
-        })
-        .catch((error) => {
-          if (error) {
-            dispatch(
-              addToast(
-                makeToast({
-                  title: `${error.data.detail} `,
-                  status: 'error',
-                })
-              )
-            );
-          }
-        });
+      installModel({ source, inplace });
     },
-    [installModel, inplace, dispatch, t]
+    [installModel, inplace]
   );
 
   return (

invokeai/frontend/web/src/features/modelManagerV2/subpanels/AddModelPanel/StarterModels/StartModelsResultItem.tsx

@@ -1,20 +1,16 @@
 import { Badge, Box, Flex, IconButton, Text } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
+import { useInstallModel } from 'features/modelManagerV2/hooks/useInstallModel';
 import ModelBaseBadge from 'features/modelManagerV2/subpanels/ModelManagerPanel/ModelBaseBadge';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
 import type { GetStarterModelsResponse } from 'services/api/endpoints/models';
-import { useInstallModelMutation } from 'services/api/endpoints/models';
 
 type Props = {
   result: GetStarterModelsResponse[number];
 };
 export const StarterModelsResultItem = ({ result }: Props) => {
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
   const allSources = useMemo(() => {
     const _allSources = [result.source];
     if (result.dependencies) {
@@ -22,36 +18,13 @@ export const StarterModelsResultItem = ({ result }: Props) => {
     }
     return _allSources;
   }, [result]);
-  const [installModel] = useInstallModelMutation();
+  const [installModel] = useInstallModel();
 
-  const handleQuickAdd = useCallback(() => {
+  const onClick = useCallback(() => {
     for (const source of allSources) {
-      installModel({ source })
-        .unwrap()
-        .then((_) => {
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('toast.modelAddedSimple'),
-                status: 'success',
-              })
-            )
-          );
-        })
-        .catch((error) => {
-          if (error) {
-            dispatch(
-              addToast(
-                makeToast({
-                  title: `${error.data.detail} `,
-                  status: 'error',
-                })
-              )
-            );
-          }
-        });
+      installModel({ source });
     }
-  }, [allSources, installModel, dispatch, t]);
+  }, [allSources, installModel]);
 
   return (
     <Flex alignItems="center" justifyContent="space-between" w="100%" gap={3}>
@@ -67,7 +40,7 @@ export const StarterModelsResultItem = ({ result }: Props) => {
         {result.is_installed ? (
           <Badge>{t('common.installed')}</Badge>
         ) : (
-          <IconButton aria-label={t('modelManager.install')} icon={<PiPlusBold />} onClick={handleQuickAdd} size="sm" />
+          <IconButton aria-label={t('modelManager.install')} icon={<PiPlusBold />} onClick={onClick} size="sm" />
         )}
       </Box>
     </Flex>

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelManagerPanel/ModelListItem.tsx

@@ -4,8 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setSelectedModelKey } from 'features/modelManagerV2/store/modelManagerV2Slice';
 import ModelBaseBadge from 'features/modelManagerV2/subpanels/ModelManagerPanel/ModelBaseBadge';
 import ModelFormatBadge from 'features/modelManagerV2/subpanels/ModelManagerPanel/ModelFormatBadge';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { toast } from 'features/toast/toast';
 import type { MouseEvent } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -53,25 +52,19 @@ const ModelListItem = (props: ModelListItemProps) => {
     deleteModel({ key: model.key })
       .unwrap()
       .then((_) => {
-        dispatch(
-          addToast(
-            makeToast({
-              title: `${t('modelManager.modelDeleted')}: ${model.name}`,
-              status: 'success',
-            })
-          )
-        );
+        toast({
+          id: 'MODEL_DELETED',
+          title: `${t('modelManager.modelDeleted')}: ${model.name}`,
+          status: 'success',
+        });
       })
       .catch((error) => {
         if (error) {
-          dispatch(
-            addToast(
-              makeToast({
-                title: `${t('modelManager.modelDeleteFailed')}: ${model.name}`,
-                status: 'error',
-              })
-            )
-          );
+          toast({
+            id: 'MODEL_DELETE_FAILED',
+            title: `${t('modelManager.modelDeleteFailed')}: ${model.name}`,
+            status: 'error',
+          });
         }
       });
     dispatch(setSelectedModelKey(null));

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ControlNetOrT2IAdapterDefaultSettings/ControlNetOrT2IAdapterDefaultSettings.tsx

@@ -1,10 +1,9 @@
 import { Button, Flex, Heading, SimpleGrid, Text } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { useControlNetOrT2IAdapterDefaultSettings } from 'features/modelManagerV2/hooks/useControlNetOrT2IAdapterDefaultSettings';
 import { DefaultPreprocessor } from 'features/modelManagerV2/subpanels/ModelPanel/ControlNetOrT2IAdapterDefaultSettings/DefaultPreprocessor';
 import type { FormField } from 'features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/MainModelDefaultSettings';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { toast } from 'features/toast/toast';
 import { useCallback } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
@@ -19,7 +18,6 @@ export type ControlNetOrT2IAdapterDefaultSettingsFormData = {
 export const ControlNetOrT2IAdapterDefaultSettings = () => {
   const selectedModelKey = useAppSelector((s) => s.modelmanagerV2.selectedModelKey);
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
 
   const { defaultSettingsDefaults, isLoading: isLoadingDefaultSettings } =
     useControlNetOrT2IAdapterDefaultSettings(selectedModelKey);
@@ -46,30 +44,24 @@ export const ControlNetOrT2IAdapterDefaultSettings = () => {
       })
         .unwrap()
         .then((_) => {
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('modelManager.defaultSettingsSaved'),
-                status: 'success',
-              })
-            )
-          );
+          toast({
+            id: 'DEFAULT_SETTINGS_SAVED',
+            title: t('modelManager.defaultSettingsSaved'),
+            status: 'success',
+          });
           reset(data);
         })
         .catch((error) => {
           if (error) {
-            dispatch(
-              addToast(
-                makeToast({
-                  title: `${error.data.detail} `,
-                  status: 'error',
-                })
-              )
-            );
+            toast({
+              id: 'DEFAULT_SETTINGS_SAVE_FAILED',
+              title: `${error.data.detail} `,
+              status: 'error',
+            });
           }
         });
     },
-    [selectedModelKey, dispatch, reset, updateModel, t]
+    [selectedModelKey, reset, updateModel, t]
   );
 
   if (isLoadingDefaultSettings) {

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Fields/ModelImageUpload.tsx

@@ -1,8 +1,6 @@
 import { Box, Button, Flex, Icon, IconButton, Image, Tooltip } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
 import { typedMemo } from 'common/util/typedMemo';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { toast } from 'features/toast/toast';
 import { useCallback, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
@@ -15,7 +13,6 @@ type Props = {
 };
 
 const ModelImageUpload = ({ model_key, model_image }: Props) => {
-  const dispatch = useAppDispatch();
   const [image, setImage] = useState<string | null>(model_image || null);
   const { t } = useTranslation();
 
@@ -34,27 +31,21 @@ const ModelImageUpload = ({ model_key, model_image }: Props) => {
         .unwrap()
         .then(() => {
           setImage(URL.createObjectURL(file));
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('modelManager.modelImageUpdated'),
-                status: 'success',
-              })
-            )
-          );
+          toast({
+            id: 'MODEL_IMAGE_UPDATED',
+            title: t('modelManager.modelImageUpdated'),
+            status: 'success',
+          });
         })
-        .catch((_) => {
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('modelManager.modelImageUpdateFailed'),
-                status: 'error',
-              })
-            )
-          );
+        .catch(() => {
+          toast({
+            id: 'MODEL_IMAGE_UPDATE_FAILED',
+            title: t('modelManager.modelImageUpdateFailed'),
+            status: 'error',
+          });
         });
     },
-    [dispatch, model_key, t, updateModelImage]
+    [model_key, t, updateModelImage]
   );
 
   const handleResetImage = useCallback(() => {
@@ -65,26 +56,20 @@ const ModelImageUpload = ({ model_key, model_image }: Props) => {
     deleteModelImage(model_key)
       .unwrap()
       .then(() => {
-        dispatch(
-          addToast(
-            makeToast({
-              title: t('modelManager.modelImageDeleted'),
-              status: 'success',
-            })
-          )
-        );
+        toast({
+          id: 'MODEL_IMAGE_DELETED',
+          title: t('modelManager.modelImageDeleted'),
+          status: 'success',
+        });
       })
-      .catch((_) => {
-        dispatch(
-          addToast(
-            makeToast({
-              title: t('modelManager.modelImageDeleteFailed'),
-              status: 'error',
-            })
-          )
-        );
+      .catch(() => {
+        toast({
+          id: 'MODEL_IMAGE_DELETE_FAILED',
+          title: t('modelManager.modelImageDeleteFailed'),
+          status: 'error',
+        });
       });
-  }, [dispatch, model_key, t, deleteModelImage]);
+  }, [model_key, t, deleteModelImage]);
 
   const { getInputProps, getRootProps } = useDropzone({
     accept: { 'image/png': ['.png'], 'image/jpeg': ['.jpg', '.jpeg', '.png'] },

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/MainModelDefaultSettings.tsx

@@ -1,11 +1,10 @@
 import { Button, Flex, Heading, SimpleGrid, Text } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppSelector } from 'app/store/storeHooks';
 import { useMainModelDefaultSettings } from 'features/modelManagerV2/hooks/useMainModelDefaultSettings';
 import { DefaultHeight } from 'features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/DefaultHeight';
 import { DefaultWidth } from 'features/modelManagerV2/subpanels/ModelPanel/MainModelDefaultSettings/DefaultWidth';
 import type { ParameterScheduler } from 'features/parameters/types/parameterSchemas';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { toast } from 'features/toast/toast';
 import { useCallback } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
@@ -39,7 +38,6 @@ export type MainModelDefaultSettingsFormData = {
 export const MainModelDefaultSettings = () => {
   const selectedModelKey = useAppSelector((s) => s.modelmanagerV2.selectedModelKey);
   const { t } = useTranslation();
-  const dispatch = useAppDispatch();
 
   const {
     defaultSettingsDefaults,
@@ -76,30 +74,24 @@ export const MainModelDefaultSettings = () => {
       })
         .unwrap()
         .then((_) => {
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('modelManager.defaultSettingsSaved'),
-                status: 'success',
-              })
-            )
-          );
+          toast({
+            id: 'DEFAULT_SETTINGS_SAVED',
+            title: t('modelManager.defaultSettingsSaved'),
+            status: 'success',
+          });
           reset(data);
         })
         .catch((error) => {
           if (error) {
-            dispatch(
-              addToast(
-                makeToast({
-                  title: `${error.data.detail} `,
-                  status: 'error',
-                })
-              )
-            );
+            toast({
+              id: 'DEFAULT_SETTINGS_SAVE_FAILED',
+              title: `${error.data.detail} `,
+              status: 'error',
+            });
           }
         });
     },
-    [selectedModelKey, dispatch, reset, updateModel, t]
+    [selectedModelKey, reset, updateModel, t]
   );
 
   if (isLoadingDefaultSettings) {

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Model.tsx

@@ -4,8 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { setSelectedModelMode } from 'features/modelManagerV2/store/modelManagerV2Slice';
 import { ModelConvertButton } from 'features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton';
 import { ModelEditButton } from 'features/modelManagerV2/subpanels/ModelPanel/ModelEditButton';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { toast } from 'features/toast/toast';
 import { useCallback } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
@@ -47,25 +46,19 @@ export const Model = () => {
         .then((payload) => {
           form.reset(payload, { keepDefaultValues: true });
           dispatch(setSelectedModelMode('view'));
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('modelManager.modelUpdated'),
-                status: 'success',
-              })
-            )
-          );
+          toast({
+            id: 'MODEL_UPDATED',
+            title: t('modelManager.modelUpdated'),
+            status: 'success',
+          });
         })
         .catch((_) => {
           form.reset();
-          dispatch(
-            addToast(
-              makeToast({
-                title: t('modelManager.modelUpdateFailed'),
-                status: 'error',
-              })
-            )
-          );
+          toast({
+            id: 'MODEL_UPDATE_FAILED',
+            title: t('modelManager.modelUpdateFailed'),
+            status: 'error',
+          });
         });
     },
     [dispatch, data?.key, form, t, updateModel]

invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton.tsx

@@ -9,9 +9,7 @@ import {
   useDisclosure,
 } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { addToast } from 'features/system/store/systemSlice';
-import { makeToast } from 'features/system/util/makeToast';
+import { toast } from 'features/toast/toast';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useConvertModelMutation, useGetModelConfigQuery } from 'services/api/endpoints/models';
@@ -22,7 +20,6 @@ interface ModelConvertProps {
 
 export const ModelConvertButton = (props: ModelConvertProps) => {
   const { modelKey } = props;
-  const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const { data } = useGetModelConfigQuery(modelKey ?? skipToken);
   const [convertModel, { isLoading }] = useConvertModelMutation();
@@ -33,38 +30,26 @@ export const ModelConvertButton = (props: ModelConvertProps) => {
       return;
     }
 
-    dispatch(
-      addToast(
-        makeToast({
-          title: `${t('modelManager.convertingModelBegin')}: ${data?.name}`,
-          status: 'info',
-        })
-      )
-    );
+    const toastId = `CONVERTING_MODEL_${data.key}`;
+    toast({
+      id: toastId,
+      title: `${t('modelManager.convertingModelBegin')}: ${data?.name}`,
+      status: 'info',
+    });
 
     convertModel(data?.key)
       .unwrap()
       .then(() => {
-        dispatch(
-          addToast(
-            makeToast({
-              title: `${t('modelManager.modelConverted')}: ${data?.name}`,
-              status: 'success',
-            })
-          )
-        );
+        toast({ id: toastId, title: `${t('modelManager.modelConverted')}: ${data?.name}`, status: 'success' });
       })
       .catch(() => {
-        dispatch(
-          addToast(
-            makeToast({
-              title: `${t('modelManager.modelConversionFailed')}: ${data?.name}`,
-              status: 'error',
-            })
-          )
-        );
+        toast({
+          id: toastId,
+          title: `${t('modelManager.modelConversionFailed')}: ${data?.name}`,
+          status: 'error',
+        });
       });
-  }, [data, isLoading, dispatch, t, convertModel]);
+  }, [data, isLoading, t, convertModel]);
 
   if (data?.format !== 'checkpoint') {
     return;

invokeai/frontend/web/src/features/nodes/components/flow/AddNodePopover/AddNodePopover.tsx

@@ -3,33 +3,35 @@ import 'reactflow/dist/style.css';
 import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import { Combobox, Flex, Popover, PopoverAnchor, PopoverBody, PopoverContent } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { useAppToaster } from 'app/components/Toaster';
 import { useAppDispatch, useAppStore } from 'app/store/storeHooks';
 import type { SelectInstance } from 'chakra-react-select';
 import { useBuildNode } from 'features/nodes/hooks/useBuildNode';
 import {
   $cursorPos,
+  $edgePendingUpdate,
   $isAddNodePopoverOpen,
   $pendingConnection,
   $templates,
   closeAddNodePopover,
-  connectionMade,
-  nodeAdded,
+  edgesChanged,
+  nodesChanged,
   openAddNodePopover,
 } from 'features/nodes/store/nodesSlice';
-import { getFirstValidConnection } from 'features/nodes/store/util/findConnectionToValidHandle';
-import { validateSourceAndTargetTypes } from 'features/nodes/store/util/validateSourceAndTargetTypes';
+import { findUnoccupiedPosition } from 'features/nodes/store/util/findUnoccupiedPosition';
+import { getFirstValidConnection } from 'features/nodes/store/util/getFirstValidConnection';
+import { connectionToEdge } from 'features/nodes/store/util/reactFlowUtil';
+import { validateConnectionTypes } from 'features/nodes/store/util/validateConnectionTypes';
 import type { AnyNode } from 'features/nodes/types/invocation';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { toast } from 'features/toast/toast';
 import { filter, map, memoize, some } from 'lodash-es';
-import type { KeyboardEventHandler } from 'react';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { flushSync } from 'react-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
 import type { HotkeyCallback } from 'react-hotkeys-hook/dist/types';
 import { useTranslation } from 'react-i18next';
 import type { FilterOptionOption } from 'react-select/dist/declarations/src/filters';
-import { assert } from 'tsafe';
+import type { EdgeChange, NodeChange } from 'reactflow';
 
 const createRegex = memoize(
   (inputValue: string) =>
@@ -58,7 +60,6 @@ const filterOption = memoize((option: FilterOptionOption<ComboboxOption>, inputV
 const AddNodePopover = () => {
   const dispatch = useAppDispatch();
   const buildInvocation = useBuildNode();
-  const toaster = useAppToaster();
   const { t } = useTranslation();
   const selectRef = useRef<SelectInstance<ComboboxOption> | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -69,17 +70,19 @@ const AddNodePopover = () => {
 
   const filteredTemplates = useMemo(() => {
     // If we have a connection in progress, we need to filter the node choices
+    const templatesArray = map(templates);
     if (!pendingConnection) {
-      return map(templates);
+      return templatesArray;
     }
 
     return filter(templates, (template) => {
-      const pendingFieldKind = pendingConnection.fieldTemplate.fieldKind;
-      const fields = pendingFieldKind === 'input' ? template.outputs : template.inputs;
-      return some(fields, (field) => {
-        const sourceType = pendingFieldKind === 'input' ? field.type : pendingConnection.fieldTemplate.type;
-        const targetType = pendingFieldKind === 'output' ? field.type : pendingConnection.fieldTemplate.type;
-        return validateSourceAndTargetTypes(sourceType, targetType);
+      const candidateFields = pendingConnection.handleType === 'source' ? template.inputs : template.outputs;
+      return some(candidateFields, (field) => {
+        const sourceType =
+          pendingConnection.handleType === 'source' ? field.type : pendingConnection.fieldTemplate.type;
+        const targetType =
+          pendingConnection.handleType === 'target' ? field.type : pendingConnection.fieldTemplate.type;
+        return validateConnectionTypes(sourceType, targetType);
       });
     });
   }, [templates, pendingConnection]);
@@ -123,17 +126,43 @@ const AddNodePopover = () => {
         const errorMessage = t('nodes.unknownNode', {
           nodeType: nodeType,
         });
-        toaster({
+        toast({
           status: 'error',
           title: errorMessage,
         });
         return null;
       }
+
+      // Find a cozy spot for the node
       const cursorPos = $cursorPos.get();
-      dispatch(nodeAdded({ node, cursorPos }));
+      const { nodes, edges } = store.getState().nodes.present;
+      node.position = findUnoccupiedPosition(nodes, cursorPos?.x ?? node.position.x, cursorPos?.y ?? node.position.y);
+      node.selected = true;
+
+      // Deselect all other nodes and edges
+      const nodeChanges: NodeChange[] = [{ type: 'add', item: node }];
+      const edgeChanges: EdgeChange[] = [];
+      nodes.forEach(({ id, selected }) => {
+        if (selected) {
+          nodeChanges.push({ type: 'select', id, selected: false });
+        }
+      });
+      edges.forEach(({ id, selected }) => {
+        if (selected) {
+          edgeChanges.push({ type: 'select', id, selected: false });
+        }
+      });
+
+      // Onwards!
+      if (nodeChanges.length > 0) {
+        dispatch(nodesChanged(nodeChanges));
+      }
+      if (edgeChanges.length > 0) {
+        dispatch(edgesChanged(edgeChanges));
+      }
       return node;
     },
-    [dispatch, buildInvocation, toaster, t]
+    [buildInvocation, store, dispatch, t]
   );
 
   const onChange = useCallback<ComboboxOnChange>(
@@ -145,12 +174,28 @@ const AddNodePopover = () => {
 
       // Auto-connect an edge if we just added a node and have a pending connection
       if (pendingConnection && isInvocationNode(node)) {
-        const template = templates[node.data.type];
-        assert(template, 'Template not found');
+        const edgePendingUpdate = $edgePendingUpdate.get();
+        const { handleType } = pendingConnection;
+
+        const source = handleType === 'source' ? pendingConnection.nodeId : node.id;
+        const sourceHandle = handleType === 'source' ? pendingConnection.handleId : null;
+        const target = handleType === 'target' ? pendingConnection.nodeId : node.id;
+        const targetHandle = handleType === 'target' ? pendingConnection.handleId : null;
+
         const { nodes, edges } = store.getState().nodes.present;
-        const connection = getFirstValidConnection(templates, nodes, edges, pendingConnection, node, template);
+        const connection = getFirstValidConnection(
+          source,
+          sourceHandle,
+          target,
+          targetHandle,
+          nodes,
+          edges,
+          templates,
+          edgePendingUpdate
+        );
         if (connection) {
-          dispatch(connectionMade(connection));
+          const newEdge = connectionToEdge(connection);
+          dispatch(edgesChanged([{ type: 'add', item: newEdge }]));
         }
       }
 
@@ -160,25 +205,24 @@ const AddNodePopover = () => {
   );
 
   const handleHotkeyOpen: HotkeyCallback = useCallback((e) => {
-    e.preventDefault();
-    openAddNodePopover();
-    flushSync(() => {
-      selectRef.current?.inputRef?.focus();
-    });
+    if (!$isAddNodePopoverOpen.get()) {
+      e.preventDefault();
+      openAddNodePopover();
+      flushSync(() => {
+        selectRef.current?.inputRef?.focus();
+      });
+    }
   }, []);
 
   const handleHotkeyClose: HotkeyCallback = useCallback(() => {
-    closeAddNodePopover();
-  }, []);
-
-  useHotkeys(['shift+a', 'space'], handleHotkeyOpen);
-  useHotkeys(['escape'], handleHotkeyClose);
-  const onKeyDown: KeyboardEventHandler = useCallback((e) => {
-    if (e.key === 'Escape') {
+    if ($isAddNodePopoverOpen.get()) {
       closeAddNodePopover();
     }
   }, []);
 
+  useHotkeys(['shift+a', 'space'], handleHotkeyOpen);
+  useHotkeys(['escape'], handleHotkeyClose, { enableOnFormTags: ['TEXTAREA'] });
+
   const noOptionsMessage = useCallback(() => t('nodes.noMatchingNodes'), [t]);
 
   return (
@@ -215,7 +259,6 @@ const AddNodePopover = () => {
             filterOption={filterOption}
             onChange={onChange}
             onMenuClose={closeAddNodePopover}
-            onKeyDown={onKeyDown}
             inputRef={inputRef}
             closeMenuOnSelect={false}
           />

invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx

@@ -1,6 +1,6 @@
 import { useGlobalMenuClose, useToken } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { useConnection } from 'features/nodes/hooks/useConnection';
 import { useCopyPaste } from 'features/nodes/hooks/useCopyPaste';
 import { useSyncExecutionState } from 'features/nodes/hooks/useExecutionState';
@@ -8,38 +8,35 @@ import { useIsValidConnection } from 'features/nodes/hooks/useIsValidConnection'
 import { useWorkflowWatcher } from 'features/nodes/hooks/useWorkflowWatcher';
 import {
   $cursorPos,
+  $didUpdateEdge,
+  $edgePendingUpdate,
   $isAddNodePopoverOpen,
-  $isUpdatingEdge,
+  $lastEdgeUpdateMouseEvent,
   $pendingConnection,
   $viewport,
-  connectionMade,
-  edgeAdded,
-  edgeDeleted,
   edgesChanged,
-  edgesDeleted,
   nodesChanged,
-  nodesDeleted,
   redo,
-  selectedAll,
   undo,
 } from 'features/nodes/store/nodesSlice';
 import { $flow } from 'features/nodes/store/reactFlowInstance';
+import { connectionToEdge } from 'features/nodes/store/util/reactFlowUtil';
 import type { CSSProperties, MouseEvent } from 'react';
 import { memo, useCallback, useMemo, useRef } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import type {
+  EdgeChange,
+  NodeChange,
   OnEdgesChange,
-  OnEdgesDelete,
   OnEdgeUpdateFunc,
   OnInit,
   OnMoveEnd,
   OnNodesChange,
-  OnNodesDelete,
   ProOptions,
   ReactFlowProps,
   ReactFlowState,
 } from 'reactflow';
-import { Background, ReactFlow, useStore as useReactFlowStore } from 'reactflow';
+import { Background, ReactFlow, useStore as useReactFlowStore, useUpdateNodeInternals } from 'reactflow';
 
 import CustomConnectionLine from './connectionLines/CustomConnectionLine';
 import InvocationCollapsedEdge from './edges/InvocationCollapsedEdge';
@@ -48,8 +45,6 @@ import CurrentImageNode from './nodes/CurrentImage/CurrentImageNode';
 import InvocationNodeWrapper from './nodes/Invocation/InvocationNodeWrapper';
 import NotesNode from './nodes/Notes/NotesNode';
 
-const DELETE_KEYS = ['Delete', 'Backspace'];
-
 const edgeTypes = {
   collapsed: InvocationCollapsedEdge,
   default: InvocationDefaultEdge,
@@ -81,6 +76,8 @@ export const Flow = memo(() => {
   const flowWrapper = useRef<HTMLDivElement>(null);
   const isValidConnection = useIsValidConnection();
   const cancelConnection = useReactFlowStore(selectCancelConnection);
+  const updateNodeInternals = useUpdateNodeInternals();
+  const store = useAppStore();
   useWorkflowWatcher();
   useSyncExecutionState();
   const [borderRadius] = useToken('radii', ['base']);
@@ -93,29 +90,17 @@ export const Flow = memo(() => {
   );
 
   const onNodesChange: OnNodesChange = useCallback(
-    (changes) => {
-      dispatch(nodesChanged(changes));
+    (nodeChanges) => {
+      dispatch(nodesChanged(nodeChanges));
     },
     [dispatch]
   );
 
   const onEdgesChange: OnEdgesChange = useCallback(
     (changes) => {
-      dispatch(edgesChanged(changes));
-    },
-    [dispatch]
-  );
-
-  const onEdgesDelete: OnEdgesDelete = useCallback(
-    (edges) => {
-      dispatch(edgesDeleted(edges));
-    },
-    [dispatch]
-  );
-
-  const onNodesDelete: OnNodesDelete = useCallback(
-    (nodes) => {
-      dispatch(nodesDeleted(nodes));
+      if (changes.length > 0) {
+        dispatch(edgesChanged(changes));
+      }
     },
     [dispatch]
   );
@@ -157,45 +142,50 @@ export const Flow = memo(() => {
    *   where the edge is deleted if you click it accidentally).
    */
 
-  // We have a ref for cursor position, but it is the *projected* cursor position.
-  // Easiest to just keep track of the last mouse event for this particular feature
-  const edgeUpdateMouseEvent = useRef<MouseEvent>();
-
-  const onEdgeUpdateStart: NonNullable<ReactFlowProps['onEdgeUpdateStart']> = useCallback(
-    (e, edge, _handleType) => {
-      $isUpdatingEdge.set(true);
-      // update mouse event
-      edgeUpdateMouseEvent.current = e;
-      // always delete the edge when starting an updated
-      dispatch(edgeDeleted(edge.id));
-    },
-    [dispatch]
-  );
+  const onEdgeUpdateStart: NonNullable<ReactFlowProps['onEdgeUpdateStart']> = useCallback((e, edge, _handleType) => {
+    $edgePendingUpdate.set(edge);
+    $didUpdateEdge.set(false);
+    $lastEdgeUpdateMouseEvent.set(e);
+  }, []);
 
   const onEdgeUpdate: OnEdgeUpdateFunc = useCallback(
-    (_oldEdge, newConnection) => {
-      // Because we deleted the edge when the update started, we must create a new edge from the connection
-      dispatch(connectionMade(newConnection));
+    (oldEdge, newConnection) => {
+      // This event is fired when an edge update is successful
+      $didUpdateEdge.set(true);
+      // When an edge update is successful, we need to delete the old edge and create a new one
+      const newEdge = connectionToEdge(newConnection);
+      dispatch(
+        edgesChanged([
+          { type: 'remove', id: oldEdge.id },
+          { type: 'add', item: newEdge },
+        ])
+      );
+      // Because we shift the position of handles depending on whether a field is connected or not, we must use
+      // updateNodeInternals to tell reactflow to recalculate the positions of the handles
+      updateNodeInternals([oldEdge.source, oldEdge.target, newEdge.source, newEdge.target]);
     },
-    [dispatch]
+    [dispatch, updateNodeInternals]
   );
 
   const onEdgeUpdateEnd: NonNullable<ReactFlowProps['onEdgeUpdateEnd']> = useCallback(
     (e, edge, _handleType) => {
-      $isUpdatingEdge.set(false);
-      $pendingConnection.set(null);
-      // Handle the case where user begins a drag but didn't move the cursor - we deleted the edge when starting
-      // the edge update - we need to add it back
-      if (
-        // ignore touch events
-        !('touches' in e) &&
-        edgeUpdateMouseEvent.current?.clientX === e.clientX &&
-        edgeUpdateMouseEvent.current?.clientY === e.clientY
-      ) {
-        dispatch(edgeAdded(edge));
+      const didUpdateEdge = $didUpdateEdge.get();
+      // Fall back to a reasonable default event
+      const lastEvent = $lastEdgeUpdateMouseEvent.get() ?? { clientX: 0, clientY: 0 };
+      // We have to narrow this event down to MouseEvents - could be TouchEvent
+      const didMouseMove =
+        !('touches' in e) && Math.hypot(e.clientX - lastEvent.clientX, e.clientY - lastEvent.clientY) > 5;
+
+      // If we got this far and did not successfully update an edge, and the mouse moved away from the handle,
+      // the user probably intended to delete the edge
+      if (!didUpdateEdge && didMouseMove) {
+        dispatch(edgesChanged([{ type: 'remove', id: edge.id }]));
       }
-      // reset mouse event
-      edgeUpdateMouseEvent.current = undefined;
+
+      $edgePendingUpdate.set(null);
+      $didUpdateEdge.set(false);
+      $pendingConnection.set(null);
+      $lastEdgeUpdateMouseEvent.set(null);
     },
     [dispatch]
   );
@@ -216,9 +206,27 @@ export const Flow = memo(() => {
   const onSelectAllHotkey = useCallback(
     (e: KeyboardEvent) => {
       e.preventDefault();
-      dispatch(selectedAll());
+      const { nodes, edges } = store.getState().nodes.present;
+      const nodeChanges: NodeChange[] = [];
+      const edgeChanges: EdgeChange[] = [];
+      nodes.forEach(({ id, selected }) => {
+        if (!selected) {
+          nodeChanges.push({ type: 'select', id, selected: true });
+        }
+      });
+      edges.forEach(({ id, selected }) => {
+        if (!selected) {
+          edgeChanges.push({ type: 'select', id, selected: true });
+        }
+      });
+      if (nodeChanges.length > 0) {
+        dispatch(nodesChanged(nodeChanges));
+      }
+      if (edgeChanges.length > 0) {
+        dispatch(edgesChanged(edgeChanges));
+      }
     },
-    [dispatch]
+    [dispatch, store]
   );
   useHotkeys(['Ctrl+a', 'Meta+a'], onSelectAllHotkey);
 
@@ -255,12 +263,37 @@ export const Flow = memo(() => {
   useHotkeys(['meta+shift+z', 'ctrl+shift+z'], onRedoHotkey);
 
   const onEscapeHotkey = useCallback(() => {
-    $pendingConnection.set(null);
-    $isAddNodePopoverOpen.set(false);
-    cancelConnection();
+    if (!$edgePendingUpdate.get()) {
+      $pendingConnection.set(null);
+      $isAddNodePopoverOpen.set(false);
+      cancelConnection();
+    }
   }, [cancelConnection]);
   useHotkeys('esc', onEscapeHotkey);
 
+  const onDeleteHotkey = useCallback(() => {
+    const { nodes, edges } = store.getState().nodes.present;
+    const nodeChanges: NodeChange[] = [];
+    const edgeChanges: EdgeChange[] = [];
+    nodes
+      .filter((n) => n.selected)
+      .forEach(({ id }) => {
+        nodeChanges.push({ type: 'remove', id });
+      });
+    edges
+      .filter((e) => e.selected)
+      .forEach(({ id }) => {
+        edgeChanges.push({ type: 'remove', id });
+      });
+    if (nodeChanges.length > 0) {
+      dispatch(nodesChanged(nodeChanges));
+    }
+    if (edgeChanges.length > 0) {
+      dispatch(edgesChanged(edgeChanges));
+    }
+  }, [dispatch, store]);
+  useHotkeys(['delete', 'backspace'], onDeleteHotkey);
+
   return (
     <ReactFlow
       id="workflow-editor"
@@ -274,11 +307,9 @@ export const Flow = memo(() => {
       onMouseMove={onMouseMove}
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
-      onEdgesDelete={onEdgesDelete}
       onEdgeUpdate={onEdgeUpdate}
       onEdgeUpdateStart={onEdgeUpdateStart}
       onEdgeUpdateEnd={onEdgeUpdateEnd}
-      onNodesDelete={onNodesDelete}
       onConnectStart={onConnectStart}
       onConnect={onConnect}
       onConnectEnd={onConnectEnd}
@@ -292,9 +323,10 @@ export const Flow = memo(() => {
       proOptions={proOptions}
       style={flowStyles}
       onPaneClick={handlePaneClick}
-      deleteKeyCode={DELETE_KEYS}
+      deleteKeyCode={null}
       selectionMode={selectionMode}
       elevateEdgesOnSelect
+      nodeDragThreshold={1}
     >
       <Background />
     </ReactFlow>

invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationCollapsedEdge.tsx

@@ -2,13 +2,13 @@ import { Badge, Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useChakraThemeTokens } from 'common/hooks/useChakraThemeTokens';
+import { getEdgeStyles } from 'features/nodes/components/flow/edges/util/getEdgeColor';
+import { makeEdgeSelector } from 'features/nodes/components/flow/edges/util/makeEdgeSelector';
 import { $templates } from 'features/nodes/store/nodesSlice';
 import { memo, useMemo } from 'react';
 import type { EdgeProps } from 'reactflow';
 import { BaseEdge, EdgeLabelRenderer, getBezierPath } from 'reactflow';
 
-import { makeEdgeSelector } from './util/makeEdgeSelector';
-
 const InvocationCollapsedEdge = ({
   sourceX,
   sourceY,
@@ -18,19 +18,19 @@ const InvocationCollapsedEdge = ({
   targetPosition,
   markerEnd,
   data,
-  selected,
+  selected = false,
   source,
-  target,
   sourceHandleId,
+  target,
   targetHandleId,
 }: EdgeProps<{ count: number }>) => {
   const templates = useStore($templates);
   const selector = useMemo(
-    () => makeEdgeSelector(templates, source, sourceHandleId, target, targetHandleId, selected),
-    [templates, selected, source, sourceHandleId, target, targetHandleId]
+    () => makeEdgeSelector(templates, source, sourceHandleId, target, targetHandleId),
+    [templates, source, sourceHandleId, target, targetHandleId]
   );
 
-  const { isSelected, shouldAnimate } = useAppSelector(selector);
+  const { shouldAnimateEdges, areConnectedNodesSelected } = useAppSelector(selector);
 
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
@@ -44,14 +44,8 @@ const InvocationCollapsedEdge = ({
   const { base500 } = useChakraThemeTokens();
 
   const edgeStyles = useMemo(
-    () => ({
-      strokeWidth: isSelected ? 3 : 2,
-      stroke: base500,
-      opacity: isSelected ? 0.8 : 0.5,
-      animation: shouldAnimate ? 'dashdraw 0.5s linear infinite' : undefined,
-      strokeDasharray: shouldAnimate ? 5 : 'none',
-    }),
-    [base500, isSelected, shouldAnimate]
+    () => getEdgeStyles(base500, selected, shouldAnimateEdges, areConnectedNodesSelected),
+    [areConnectedNodesSelected, base500, selected, shouldAnimateEdges]
   );
 
   return (
@@ -60,11 +54,15 @@ const InvocationCollapsedEdge = ({
       {data?.count && data.count > 1 && (
         <EdgeLabelRenderer>
           <Flex
+            data-testid="asdfasdfasdf"
             position="absolute"
             transform={`translate(-50%, -50%) translate(${labelX}px,${labelY}px)`}
             className="nodrag nopan"
+            // Unfortunately edge labels do not get the same zIndex treatment as edges do, so we need to manage this ourselves
+            // See: https://github.com/xyflow/xyflow/issues/3658
+            zIndex={1001}
           >
-            <Badge variant="solid" bg="base.500" opacity={isSelected ? 0.8 : 0.5} boxShadow="base">
+            <Badge variant="solid" bg="base.500" opacity={selected ? 0.8 : 0.5} boxShadow="base">
               {data.count}
             </Badge>
           </Flex>

invokeai/frontend/web/src/features/nodes/components/flow/edges/InvocationDefaultEdge.tsx

@@ -1,8 +1,8 @@
 import { Flex, Text } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppSelector } from 'app/store/storeHooks';
+import { getEdgeStyles } from 'features/nodes/components/flow/edges/util/getEdgeColor';
 import { $templates } from 'features/nodes/store/nodesSlice';
-import type { CSSProperties } from 'react';
 import { memo, useMemo } from 'react';
 import type { EdgeProps } from 'reactflow';
 import { BaseEdge, EdgeLabelRenderer, getBezierPath } from 'reactflow';
@@ -17,7 +17,7 @@ const InvocationDefaultEdge = ({
   sourcePosition,
   targetPosition,
   markerEnd,
-  selected,
+  selected = false,
   source,
   target,
   sourceHandleId,
@@ -25,11 +25,11 @@ const InvocationDefaultEdge = ({
 }: EdgeProps) => {
   const templates = useStore($templates);
   const selector = useMemo(
-    () => makeEdgeSelector(templates, source, sourceHandleId, target, targetHandleId, selected),
-    [templates, source, sourceHandleId, target, targetHandleId, selected]
+    () => makeEdgeSelector(templates, source, sourceHandleId, target, targetHandleId),
+    [templates, source, sourceHandleId, target, targetHandleId]
   );
 
-  const { isSelected, shouldAnimate, stroke, label } = useAppSelector(selector);
+  const { shouldAnimateEdges, areConnectedNodesSelected, stroke, label } = useAppSelector(selector);
   const shouldShowEdgeLabels = useAppSelector((s) => s.workflowSettings.shouldShowEdgeLabels);
 
   const [edgePath, labelX, labelY] = getBezierPath({
@@ -41,15 +41,9 @@ const InvocationDefaultEdge = ({
     targetPosition,
   });
 
-  const edgeStyles = useMemo<CSSProperties>(
-    () => ({
-      strokeWidth: isSelected ? 3 : 2,
-      stroke,
-      opacity: isSelected ? 0.8 : 0.5,
-      animation: shouldAnimate ? 'dashdraw 0.5s linear infinite' : undefined,
-      strokeDasharray: shouldAnimate ? 5 : 'none',
-    }),
-    [isSelected, shouldAnimate, stroke]
+  const edgeStyles = useMemo(
+    () => getEdgeStyles(stroke, selected, shouldAnimateEdges, areConnectedNodesSelected),
+    [areConnectedNodesSelected, stroke, selected, shouldAnimateEdges]
   );
 
   return (
@@ -65,13 +59,13 @@ const InvocationDefaultEdge = ({
             bg="base.800"
             borderRadius="base"
             borderWidth={1}
-            borderColor={isSelected ? 'undefined' : 'transparent'}
-            opacity={isSelected ? 1 : 0.5}
+            borderColor={selected ? 'undefined' : 'transparent'}
+            opacity={selected ? 1 : 0.5}
             py={1}
             px={3}
             shadow="md"
           >
-            <Text size="sm" fontWeight="semibold" color={isSelected ? 'base.100' : 'base.300'}>
+            <Text size="sm" fontWeight="semibold" color={selected ? 'base.100' : 'base.300'}>
               {label}
             </Text>
           </Flex>

invokeai/frontend/web/src/features/nodes/components/flow/edges/util/getEdgeColor.ts

@@ -1,6 +1,7 @@
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
 import { FIELD_COLORS } from 'features/nodes/types/constants';
 import type { FieldType } from 'features/nodes/types/field';
+import type { CSSProperties } from 'react';
 
 export const getFieldColor = (fieldType: FieldType | null): string => {
   if (!fieldType) {
@@ -10,3 +11,16 @@ export const getFieldColor = (fieldType: FieldType | null): string => {
 
   return color ? colorTokenToCssVar(color) : colorTokenToCssVar('base.500');
 };
+
+export const getEdgeStyles = (
+  stroke: string,
+  selected: boolean,
+  shouldAnimateEdges: boolean,
+  areConnectedNodesSelected: boolean
+): CSSProperties => ({
+  strokeWidth: 3,
+  stroke,
+  opacity: selected ? 1 : 0.5,
+  animation: shouldAnimateEdges ? 'dashdraw 0.5s linear infinite' : undefined,
+  strokeDasharray: selected || areConnectedNodesSelected ? 5 : 'none',
+});

invokeai/frontend/web/src/features/nodes/components/flow/edges/util/makeEdgeSelector.ts

@@ -1,5 +1,6 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
+import { deepClone } from 'common/util/deepClone';
 import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
 import type { Templates } from 'features/nodes/store/types';
 import { selectWorkflowSettingsSlice } from 'features/nodes/store/workflowSettingsSlice';
@@ -8,8 +9,8 @@ import { isInvocationNode } from 'features/nodes/types/invocation';
 import { getFieldColor } from './getEdgeColor';
 
 const defaultReturnValue = {
-  isSelected: false,
-  shouldAnimate: false,
+  areConnectedNodesSelected: false,
+  shouldAnimateEdges: false,
   stroke: colorTokenToCssVar('base.500'),
   label: '',
 };
@@ -19,21 +20,27 @@ export const makeEdgeSelector = (
   source: string,
   sourceHandleId: string | null | undefined,
   target: string,
-  targetHandleId: string | null | undefined,
-  selected?: boolean
+  targetHandleId: string | null | undefined
 ) =>
   createMemoizedSelector(
     selectNodesSlice,
     selectWorkflowSettingsSlice,
-    (nodes, workflowSettings): { isSelected: boolean; shouldAnimate: boolean; stroke: string; label: string } => {
+    (
+      nodes,
+      workflowSettings
+    ): { areConnectedNodesSelected: boolean; shouldAnimateEdges: boolean; stroke: string; label: string } => {
+      const { shouldAnimateEdges, shouldColorEdges } = workflowSettings;
       const sourceNode = nodes.nodes.find((node) => node.id === source);
       const targetNode = nodes.nodes.find((node) => node.id === target);
 
+      const returnValue = deepClone(defaultReturnValue);
+      returnValue.shouldAnimateEdges = shouldAnimateEdges;
+
       const isInvocationToInvocationEdge = isInvocationNode(sourceNode) && isInvocationNode(targetNode);
 
-      const isSelected = Boolean(sourceNode?.selected || targetNode?.selected || selected);
+      returnValue.areConnectedNodesSelected = Boolean(sourceNode?.selected || targetNode?.selected);
       if (!sourceNode || !sourceHandleId || !targetNode || !targetHandleId) {
-        return defaultReturnValue;
+        return returnValue;
       }
 
       const sourceNodeTemplate = templates[sourceNode.data.type];
@@ -42,16 +49,10 @@ export const makeEdgeSelector = (
       const outputFieldTemplate = sourceNodeTemplate?.outputs[sourceHandleId];
       const sourceType = isInvocationToInvocationEdge ? outputFieldTemplate?.type : undefined;
 
-      const stroke =
-        sourceType && workflowSettings.shouldColorEdges ? getFieldColor(sourceType) : colorTokenToCssVar('base.500');
+      returnValue.stroke = sourceType && shouldColorEdges ? getFieldColor(sourceType) : colorTokenToCssVar('base.500');
 
-      const label = `${sourceNodeTemplate?.title || sourceNode.data?.label} -> ${targetNodeTemplate?.title || targetNode.data?.label}`;
+      returnValue.label = `${sourceNodeTemplate?.title || sourceNode.data?.label} -> ${targetNodeTemplate?.title || targetNode.data?.label}`;
 
-      return {
-        isSelected,
-        shouldAnimate: workflowSettings.shouldAnimateEdges && isSelected,
-        stroke,
-        label,
-      };
+      return returnValue;
     }
   );

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/InvocationNode.tsx

@@ -1,7 +1,7 @@
 import { Flex, Grid, GridItem } from '@invoke-ai/ui-library';
 import NodeWrapper from 'features/nodes/components/flow/nodes/common/NodeWrapper';
-import { useAnyOrDirectInputFieldNames } from 'features/nodes/hooks/useAnyOrDirectInputFieldNames';
-import { useConnectionInputFieldNames } from 'features/nodes/hooks/useConnectionInputFieldNames';
+import { InvocationInputFieldCheck } from 'features/nodes/components/flow/nodes/Invocation/fields/InvocationFieldCheck';
+import { useFieldNames } from 'features/nodes/hooks/useFieldNames';
 import { useOutputFieldNames } from 'features/nodes/hooks/useOutputFieldNames';
 import { useWithFooter } from 'features/nodes/hooks/useWithFooter';
 import { memo } from 'react';
@@ -20,8 +20,7 @@ type Props = {
 };
 
 const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
-  const inputConnectionFieldNames = useConnectionInputFieldNames(nodeId);
-  const inputAnyOrDirectFieldNames = useAnyOrDirectInputFieldNames(nodeId);
+  const fieldNames = useFieldNames(nodeId);
   const withFooter = useWithFooter(nodeId);
   const outputFieldNames = useOutputFieldNames(nodeId);
 
@@ -41,9 +40,11 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
           >
             <Flex flexDir="column" px={2} w="full" h="full">
               <Grid gridTemplateColumns="1fr auto" gridAutoRows="1fr">
-                {inputConnectionFieldNames.map((fieldName, i) => (
+                {fieldNames.connectionFields.map((fieldName, i) => (
                   <GridItem gridColumnStart={1} gridRowStart={i + 1} key={`${nodeId}.${fieldName}.input-field`}>
-                    <InputField nodeId={nodeId} fieldName={fieldName} />
+                    <InvocationInputFieldCheck nodeId={nodeId} fieldName={fieldName}>
+                      <InputField nodeId={nodeId} fieldName={fieldName} />
+                    </InvocationInputFieldCheck>
                   </GridItem>
                 ))}
                 {outputFieldNames.map((fieldName, i) => (
@@ -52,8 +53,23 @@ const InvocationNode = ({ nodeId, isOpen, label, type, selected }: Props) => {
                   </GridItem>
                 ))}
               </Grid>
-              {inputAnyOrDirectFieldNames.map((fieldName) => (
-                <InputField key={`${nodeId}.${fieldName}.input-field`} nodeId={nodeId} fieldName={fieldName} />
+              {fieldNames.anyOrDirectFields.map((fieldName) => (
+                <InvocationInputFieldCheck
+                  key={`${nodeId}.${fieldName}.input-field`}
+                  nodeId={nodeId}
+                  fieldName={fieldName}
+                >
+                  <InputField nodeId={nodeId} fieldName={fieldName} />
+                </InvocationInputFieldCheck>
+              ))}
+              {fieldNames.missingFields.map((fieldName) => (
+                <InvocationInputFieldCheck
+                  key={`${nodeId}.${fieldName}.input-field`}
+                  nodeId={nodeId}
+                  fieldName={fieldName}
+                >
+                  <InputField nodeId={nodeId} fieldName={fieldName} />
+                </InvocationInputFieldCheck>
               ))}
             </Flex>
           </Flex>

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/EditableFieldTitle.tsx

@@ -25,10 +25,11 @@ interface Props {
   kind: 'inputs' | 'outputs';
   isMissingInput?: boolean;
   withTooltip?: boolean;
+  shouldDim?: boolean;
 }
 
 const EditableFieldTitle = forwardRef((props: Props, ref) => {
-  const { nodeId, fieldName, kind, isMissingInput = false, withTooltip = false } = props;
+  const { nodeId, fieldName, kind, isMissingInput = false, withTooltip = false, shouldDim = false } = props;
   const label = useFieldLabel(nodeId, fieldName);
   const fieldTemplateTitle = useFieldTemplateTitle(nodeId, fieldName, kind);
   const { t } = useTranslation();
@@ -39,13 +40,11 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
   const handleSubmit = useCallback(
     async (newTitleRaw: string) => {
       const newTitle = newTitleRaw.trim();
-      if (newTitle && (newTitle === label || newTitle === fieldTemplateTitle)) {
-        return;
-      }
-      setLocalTitle(newTitle || fieldTemplateTitle || t('nodes.unknownField'));
-      dispatch(fieldLabelChanged({ nodeId, fieldName, label: newTitle }));
+      const finalTitle = newTitle || fieldTemplateTitle || t('nodes.unknownField');
+      setLocalTitle(finalTitle);
+      dispatch(fieldLabelChanged({ nodeId, fieldName, label: finalTitle }));
     },
-    [label, fieldTemplateTitle, dispatch, nodeId, fieldName, t]
+    [fieldTemplateTitle, dispatch, nodeId, fieldName, t]
   );
 
   const handleChange = useCallback((newTitle: string) => {
@@ -80,6 +79,7 @@ const EditableFieldTitle = forwardRef((props: Props, ref) => {
           sx={editablePreviewStyles}
           noOfLines={1}
           color={isMissingInput ? 'error.300' : 'base.300'}
+          opacity={shouldDim ? 0.5 : 1}
         />
       </Tooltip>
       <EditableInput className="nodrag" sx={editableInputStyles} />

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FieldHandle.tsx

@@ -2,10 +2,12 @@ import { Tooltip } from '@invoke-ai/ui-library';
 import { colorTokenToCssVar } from 'common/util/colorTokenToCssVar';
 import { getFieldColor } from 'features/nodes/components/flow/edges/util/getEdgeColor';
 import { useFieldTypeName } from 'features/nodes/hooks/usePrettyFieldType';
+import type { ValidationResult } from 'features/nodes/store/util/validateConnection';
 import { HANDLE_TOOLTIP_OPEN_DELAY, MODEL_TYPES } from 'features/nodes/types/constants';
-import type { FieldInputTemplate, FieldOutputTemplate } from 'features/nodes/types/field';
+import { type FieldInputTemplate, type FieldOutputTemplate, isSingle } from 'features/nodes/types/field';
 import type { CSSProperties } from 'react';
 import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import type { HandleType } from 'reactflow';
 import { Handle, Position } from 'reactflow';
 
@@ -14,11 +16,12 @@ type FieldHandleProps = {
   handleType: HandleType;
   isConnectionInProgress: boolean;
   isConnectionStartField: boolean;
-  connectionError?: string;
+  validationResult: ValidationResult;
 };
 
 const FieldHandle = (props: FieldHandleProps) => {
-  const { fieldTemplate, handleType, isConnectionInProgress, isConnectionStartField, connectionError } = props;
+  const { fieldTemplate, handleType, isConnectionInProgress, isConnectionStartField, validationResult } = props;
+  const { t } = useTranslation();
   const { name } = fieldTemplate;
   const type = fieldTemplate.type;
   const fieldTypeName = useFieldTypeName(type);
@@ -26,11 +29,11 @@ const FieldHandle = (props: FieldHandleProps) => {
     const isModelType = MODEL_TYPES.some((t) => t === type.name);
     const color = getFieldColor(type);
     const s: CSSProperties = {
-      backgroundColor: type.isCollection || type.isCollectionOrScalar ? colorTokenToCssVar('base.900') : color,
+      backgroundColor: !isSingle(type) ? colorTokenToCssVar('base.900') : color,
       position: 'absolute',
       width: '1rem',
       height: '1rem',
-      borderWidth: type.isCollection || type.isCollectionOrScalar ? 4 : 0,
+      borderWidth: !isSingle(type) ? 4 : 0,
       borderStyle: 'solid',
       borderColor: color,
       borderRadius: isModelType ? 4 : '100%',
@@ -43,11 +46,11 @@ const FieldHandle = (props: FieldHandleProps) => {
       s.insetInlineEnd = '-1rem';
     }
 
-    if (isConnectionInProgress && !isConnectionStartField && connectionError) {
+    if (isConnectionInProgress && !isConnectionStartField && !validationResult.isValid) {
       s.filter = 'opacity(0.4) grayscale(0.7)';
     }
 
-    if (isConnectionInProgress && connectionError) {
+    if (isConnectionInProgress && !validationResult.isValid) {
       if (isConnectionStartField) {
         s.cursor = 'grab';
       } else {
@@ -58,14 +61,14 @@ const FieldHandle = (props: FieldHandleProps) => {
     }
 
     return s;
-  }, [connectionError, handleType, isConnectionInProgress, isConnectionStartField, type]);
+  }, [handleType, isConnectionInProgress, isConnectionStartField, type, validationResult.isValid]);
 
   const tooltip = useMemo(() => {
-    if (isConnectionInProgress && connectionError) {
-      return connectionError;
+    if (isConnectionInProgress && validationResult.messageTKey) {
+      return t(validationResult.messageTKey);
     }
     return fieldTypeName;
-  }, [connectionError, fieldTypeName, isConnectionInProgress]);
+  }, [fieldTypeName, isConnectionInProgress, t, validationResult.messageTKey]);
 
   return (
     <Tooltip