Updated .js files

## What type of PR is this? (check all applicable)

- [ ] Refactor
- [ ] Feature
- [ ] Bug Fix
- [ ] Optimization
- [X] Documentation Update
- [ ] Community Node Submission


## Have you discussed this change with the InvokeAI team?
- [ ] Yes
- [ ] No, because:

      
## Have you updated all relevant documentation?
- [ ] Yes
- [ ] No


## Description


## Related Tickets & Documents

<!--
For pull requests that relate or close an issue, please include them
below. 

For example having the text: "closes #1234" would connect the current
pull
request to issue 1234.  And when we merge the pull request, Github will
automatically close the issue.
-->

- Related Issue #
- Closes #

## QA Instructions, Screenshots, Recordings

<!-- 
Please provide steps on how to test changes, any hardware or 
software specifications as well as any other pertinent information. 
-->

## Added/updated tests?

- [ ] Yes
- [ ] No : _please replace this line with details on why tests
      have not been included_

## [optional] Are there any post deployment tasks we need to perform?

docs/features/CONTROLNET.md

@@ -1,13 +1,11 @@
 ---
-title: ControlNet
+title: Control Adapters
 ---
 
-# :material-loupe: ControlNet
+# :material-loupe: Control Adapters
 
 ## ControlNet
 
-ControlNet
-
 ControlNet is a powerful set of features developed by the open-source
 community (notably, Stanford researcher
 [**@ilyasviel**](https://github.com/lllyasviel)) that allows you to
@@ -20,7 +18,7 @@ towards generating images that better fit your desired style or
 outcome.
 
 
-### How it works
+#### How it works
 
 ControlNet works by analyzing an input image, pre-processing that
 image to identify relevant information that can be interpreted by each
@@ -30,7 +28,7 @@ composition, or other aspects of the image to better achieve a
 specific result.
 
 
-### Models
+#### Models
 
 InvokeAI provides access to a series of ControlNet models that provide
 different effects or styles in your generated images.  Currently
@@ -96,6 +94,8 @@ A model that generates normal maps from input images, allowing for more realisti
 **Image Segmentation**: 
 A model that divides input images into segments or regions, each of which corresponds to a different object or part of the image. (More details coming soon)
 
+**QR Code Monster**:
+A model that helps generate creative QR codes that still scan. Can also be used to create images with text, logos or shapes within them. 
 
 **Openpose**: 
 The OpenPose control model allows for the identification of the general pose of a character by pre-processing an existing image with a clear human structure. With advanced options, Openpose can also detect the face or hands in the image. 
@@ -120,7 +120,7 @@ With Pix2Pix, you can input an image into the controlnet, and then "instruct" th
 Each of these models can be adjusted and combined with other ControlNet models to achieve different results, giving you even more control over your image generation process.
 
 
-## Using ControlNet
+### Using ControlNet
 
 To use ControlNet, you can simply select the desired model and adjust both the ControlNet and Pre-processor settings to achieve the desired result. You can also use multiple ControlNet models at the same time, allowing you to achieve even more complex effects or styles in your generated images.
 
@@ -132,3 +132,31 @@ Weight - Strength of the Controlnet model applied to the generation for the sect
 Start/End  - 0 represents the start of the generation, 1 represents the end. The Start/end setting controls what steps during the generation process have the ControlNet applied.
 
 Additionally, each ControlNet section can be expanded in order to manipulate settings for the image pre-processor that adjusts your uploaded image before using it in when you Invoke.
+
+
+## IP-Adapter
+
+[IP-Adapter](https://ip-adapter.github.io) is a tooling that allows for image prompt capabilities with text-to-image diffusion models. IP-Adapter works by analyzing the given image prompt to extract features, then passing those features to the UNet along with any other conditioning provided. 
+
+![IP-Adapter + T2I](https://github.com/tencent-ailab/IP-Adapter/raw/main/assets/demo/ip_adpter_plus_multi.jpg)
+
+![IP-Adapter + IMG2IMG](https://github.com/tencent-ailab/IP-Adapter/blob/main/assets/demo/image-to-image.jpg)
+
+#### Installation
+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 [5] to download models.
+2. Through the Model Manager UI with models from the *Tools* section of [www.models.invoke.ai](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.  
+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
+
+IP-Adapter can be used by navigating to the *Control Adapters* options and enabling IP-Adapter. 
+
+IP-Adapter requires an image to be used as the Image Prompt. It can also be used in conjunction with text prompts, Image-to-Image, Inpainting, Outpainting, ControlNets and LoRAs.
+
+
+Each IP-Adapter has two settings that are applied to the IP-Adapter:
+
+* Weight - Strength of the IP-Adapter model applied to the generation for the section, defined by start/end
+* Start/End  - 0 represents the start of the generation, 1 represents the end. The Start/end setting controls what steps during the generation process have the IP-Adapter applied.

docs/nodes/NODES.md

@@ -4,12 +4,12 @@ The workflow editor is a blank canvas allowing for the use of individual functio
 
 If you're not familiar with Diffusion, take a look at our [Diffusion Overview.](../help/diffusion.md) Understanding how diffusion works will enable you to more easily use the Workflow Editor and build workflows to suit your needs.
 
-## UI Features
+## Features
 
 ### Linear View
 The Workflow Editor allows you to create a UI for your workflow, to make it easier to iterate on your generations. 
 
-To add an input to the Linear UI, right click on the input and select "Add to Linear View".
+To add an input to the Linear UI, right click on the input label and select "Add to Linear View".
 
 The Linear UI View will also be part of the saved workflow, allowing you share workflows and enable other to use them, regardless of complexity. 
 
@@ -25,6 +25,10 @@ Any node or input field can be renamed in the workflow editor. If the input fiel
 * Backspace/Delete to delete a node
 * Shift+Click to drag and select multiple nodes 
 
+### Node Caching 
+
+Nodes have a "Use Cache" option in their footer. This allows for performance improvements by using the previously cached values during the workflow processing. 
+
 
 ## Important Concepts 
 

installer/lib/installer.py

@@ -332,6 +332,7 @@ class InvokeAiInstance:
         Configure the InvokeAI runtime directory
         """
 
+        auto_install = False
         # set sys.argv to a consistent state
         new_argv = [sys.argv[0]]
         for i in range(1, len(sys.argv)):
@@ -340,13 +341,17 @@ class InvokeAiInstance:
                 new_argv.append(el)
                 new_argv.append(sys.argv[i + 1])
             elif el in ["-y", "--yes", "--yes-to-all"]:
-                new_argv.append(el)
+                auto_install = True
         sys.argv = new_argv
 
+        import messages
         import requests  # to catch download exceptions
-        from messages import introduction
 
-        introduction()
+        auto_install = auto_install or messages.user_wants_auto_configuration()
+        if auto_install:
+            sys.argv.append("--yes")
+        else:
+            messages.introduction()
 
         from invokeai.frontend.install.invokeai_configure import invokeai_configure
 

installer/lib/messages.py

@@ -7,7 +7,7 @@ import os
 import platform
 from pathlib import Path
 
-from prompt_toolkit import prompt
+from prompt_toolkit import HTML, prompt
 from prompt_toolkit.completion import PathCompleter
 from prompt_toolkit.validation import Validator
 from rich import box, print
@@ -65,17 +65,50 @@ def confirm_install(dest: Path) -> bool:
     if dest.exists():
         print(f":exclamation: Directory {dest} already exists :exclamation:")
         dest_confirmed = Confirm.ask(
-            ":stop_sign: Are you sure you want to (re)install in this location?",
+            ":stop_sign: (re)install in this location?",
             default=False,
         )
     else:
         print(f"InvokeAI will be installed in {dest}")
-        dest_confirmed = not Confirm.ask("Would you like to pick a different location?", default=False)
+        dest_confirmed = Confirm.ask("Use this location?", default=True)
     console.line()
 
     return dest_confirmed
 
 
+def user_wants_auto_configuration() -> bool:
+    """Prompt the user to choose between manual and auto configuration."""
+    console.rule("InvokeAI Configuration Section")
+    console.print(
+        Panel(
+            Group(
+                "\n".join(
+                    [
+                        "Libraries are installed and InvokeAI will now set up its root directory and configuration. Choose between:",
+                        "",
+                        "  * AUTOMATIC configuration:  install reasonable defaults and a minimal set of starter models.",
+                        "  * MANUAL configuration: manually inspect and adjust configuration options and pick from a larger set of starter models.",
+                        "",
+                        "Later you can fine tune your configuration by selecting option [6] 'Change InvokeAI startup options' from the invoke.bat/invoke.sh launcher script.",
+                    ]
+                ),
+            ),
+            box=box.MINIMAL,
+            padding=(1, 1),
+        )
+    )
+    choice = (
+        prompt(
+            HTML("Choose <b>&lt;a&gt;</b>utomatic or <b>&lt;m&gt;</b>anual configuration [a/m] (a): "),
+            validator=Validator.from_callable(
+                lambda n: n == "" or n.startswith(("a", "A", "m", "M")), error_message="Please select 'a' or 'm'"
+            ),
+        )
+        or "a"
+    )
+    return choice.lower().startswith("a")
+
+
 def dest_path(dest=None) -> Path:
     """
     Prompt the user for the destination path and create the path

invokeai/app/invocations/baseinvocation.py

@@ -91,6 +91,9 @@ class FieldDescriptions:
     board = "The board to save the image to"
     image = "The image to process"
     tile_size = "Tile size"
+    inclusive_low = "The inclusive low value"
+    exclusive_high = "The exclusive high value"
+    decimal_places = "The number of decimal places to round to"
 
 
 class Input(str, Enum):

invokeai/app/invocations/math.py

@@ -65,13 +65,27 @@ class DivideInvocation(BaseInvocation):
 class RandomIntInvocation(BaseInvocation):
     """Outputs a single random integer."""
 
-    low: int = InputField(default=0, description="The inclusive low value")
-    high: int = InputField(default=np.iinfo(np.int32).max, description="The exclusive high value")
+    low: int = InputField(default=0, description=FieldDescriptions.inclusive_low)
+    high: int = InputField(default=np.iinfo(np.int32).max, description=FieldDescriptions.exclusive_high)
 
     def invoke(self, context: InvocationContext) -> IntegerOutput:
         return IntegerOutput(value=np.random.randint(self.low, self.high))
 
 
+@invocation("rand_float", title="Random Float", tags=["math", "float", "random"], category="math", version="1.0.0")
+class RandomFloatInvocation(BaseInvocation):
+    """Outputs a single random float"""
+
+    low: float = InputField(default=0.0, description=FieldDescriptions.inclusive_low)
+    high: float = InputField(default=1.0, description=FieldDescriptions.exclusive_high)
+    decimals: int = InputField(default=2, description=FieldDescriptions.decimal_places)
+
+    def invoke(self, context: InvocationContext) -> FloatOutput:
+        random_float = np.random.uniform(self.low, self.high)
+        rounded_float = round(random_float, self.decimals)
+        return FloatOutput(value=rounded_float)
+
+
 @invocation(
     "float_to_int",
     title="Float To Integer",

invokeai/app/services/config/invokeai_config.py

@@ -241,7 +241,7 @@ class InvokeAIAppConfig(InvokeAISettings):
     version             : bool = Field(default=False, description="Show InvokeAI version and exit", category="Other")
 
     # CACHE
-    ram                 : Union[float, Literal["auto"]] = Field(default=6.0, gt=0, description="Maximum memory amount used by model cache for rapid switching (floating point number or 'auto')", category="Model Cache", )
+    ram                 : Union[float, Literal["auto"]] = Field(default=7.5, gt=0, description="Maximum memory amount used by model cache for rapid switching (floating point number or 'auto')", category="Model Cache", )
     vram                : Union[float, Literal["auto"]] = Field(default=0.25, ge=0, description="Amount of VRAM reserved for model storage (floating point number or 'auto')", category="Model Cache", )
     lazy_offload        : bool = Field(default=True, description="Keep models in VRAM until their space is needed", category="Model Cache", )
 

invokeai/app/services/invocation_cache/invocation_cache_memory.py

@@ -1,7 +1,6 @@
 from collections import OrderedDict
 from dataclasses import dataclass, field
 from threading import Lock
-from time import time
 from typing import Optional, Union
 
 from invokeai.app.invocations.baseinvocation import BaseInvocation, BaseInvocationOutput

invokeai/backend/install/invokeai_configure.py

@@ -70,7 +70,6 @@ def get_literal_fields(field) -> list[Any]:
 config = InvokeAIAppConfig.get_config()
 
 Model_dir = "models"
-
 Default_config_file = config.model_conf_path
 SD_Configs = config.legacy_conf_path
 
@@ -458,7 +457,7 @@ Use cursor arrows to make a checkbox selection, and space to toggle.
         )
         self.add_widget_intelligent(
             npyscreen.TitleFixedText,
-            name="Model RAM cache size (GB). Make this at least large enough to hold a single full model.",
+            name="Model RAM cache size (GB). Make this at least large enough to hold a single full model (2GB for SD-1, 6GB for SDXL).",
             begin_entry_at=0,
             editable=False,
             color="CONTROL",
@@ -651,8 +650,19 @@ def edit_opts(program_opts: Namespace, invokeai_opts: Namespace) -> argparse.Nam
     return editApp.new_opts()
 
 
+def default_ramcache() -> float:
+    """Run a heuristic for the default RAM cache based on installed RAM."""
+
+    # Note that on my 64 GB machine, psutil.virtual_memory().total gives 62 GB,
+    # So we adjust everthing down a bit.
+    return (
+        15.0 if MAX_RAM >= 60 else 7.5 if MAX_RAM >= 30 else 4 if MAX_RAM >= 14 else 2.1
+    )  # 2.1 is just large enough for sd 1.5 ;-)
+
+
 def default_startup_options(init_file: Path) -> Namespace:
     opts = InvokeAIAppConfig.get_config()
+    opts.ram = default_ramcache()
     return opts
 
 

invokeai/backend/ip_adapter/ip_adapter.py

@@ -9,6 +9,8 @@ from diffusers.models import UNet2DConditionModel
 from PIL import Image
 from transformers import CLIPImageProcessor, CLIPVisionModelWithProjection
 
+from invokeai.backend.model_management.models.base import calc_model_size_by_data
+
 from .attention_processor import AttnProcessor2_0, IPAttnProcessor2_0
 from .resampler import Resampler
 
@@ -87,6 +89,20 @@ class IPAdapter:
         if self._attn_processors is not None:
             torch.nn.ModuleList(self._attn_processors.values()).to(device=self.device, dtype=self.dtype)
 
+    def calc_size(self):
+        if self._state_dict is not None:
+            image_proj_size = sum(
+                [tensor.nelement() * tensor.element_size() for tensor in self._state_dict["image_proj"].values()]
+            )
+            ip_adapter_size = sum(
+                [tensor.nelement() * tensor.element_size() for tensor in self._state_dict["ip_adapter"].values()]
+            )
+            return image_proj_size + ip_adapter_size
+        else:
+            return calc_model_size_by_data(self._image_proj_model) + calc_model_size_by_data(
+                torch.nn.ModuleList(self._attn_processors.values())
+            )
+
     def _init_image_proj_model(self, state_dict):
         return ImageProjModel.from_state_dict(state_dict, self._num_tokens).to(self.device, dtype=self.dtype)
 

invokeai/backend/model_management/models/ip_adapter.py

@@ -13,6 +13,7 @@ from invokeai.backend.model_management.models.base import (
     ModelConfigBase,
     ModelType,
     SubModelType,
+    calc_model_size_by_fs,
     classproperty,
 )
 
@@ -30,7 +31,7 @@ class IPAdapterModel(ModelBase):
         assert model_type == ModelType.IPAdapter
         super().__init__(model_path, base_model, model_type)
 
-        self.model_size = os.path.getsize(self.model_path)
+        self.model_size = calc_model_size_by_fs(self.model_path)
 
     @classmethod
     def detect_format(cls, path: str) -> str:
@@ -63,10 +64,13 @@ class IPAdapterModel(ModelBase):
         if child_type is not None:
             raise ValueError("There are no child models in an IP-Adapter model.")
 
-        return build_ip_adapter(
+        model = build_ip_adapter(
             ip_adapter_ckpt_path=os.path.join(self.model_path, "ip_adapter.bin"), device="cpu", dtype=torch_dtype
         )
 
+        self.model_size = model.calc_size()
+        return model
+
     @classmethod
     def convert_if_required(
         cls,

invokeai/frontend/web/dist/assets/ThemeLocaleProvider-6a462dce.js

@@ -0,0 +1,280 @@
+import{w as s,hQ as T,v as l,a2 as V,hR as A,ae as I,hS as z,hT as j,hU as D,hV as F,hW as W,hX as G,hY as K,hZ as U,h_ as Y}from"./index-375621ca.js";import{u as Z,M as H}from"./MantineProvider-f12d896d.js";var P=String.raw,E=P`
+  :root,
+  :host {
+    --chakra-vh: 100vh;
+  }
+
+  @supports (height: -webkit-fill-available) {
+    :root,
+    :host {
+      --chakra-vh: -webkit-fill-available;
+    }
+  }
+
+  @supports (height: -moz-fill-available) {
+    :root,
+    :host {
+      --chakra-vh: -moz-fill-available;
+    }
+  }
+
+  @supports (height: 100dvh) {
+    :root,
+    :host {
+      --chakra-vh: 100dvh;
+    }
+  }
+`,Q=()=>s.jsx(T,{styles:E}),X=({scope:e=""})=>s.jsx(T,{styles:P`
+      html {
+        line-height: 1.5;
+        -webkit-text-size-adjust: 100%;
+        font-family: system-ui, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        text-rendering: optimizeLegibility;
+        -moz-osx-font-smoothing: grayscale;
+        touch-action: manipulation;
+      }
+
+      body {
+        position: relative;
+        min-height: 100%;
+        margin: 0;
+        font-feature-settings: "kern";
+      }
+
+      ${e} :where(*, *::before, *::after) {
+        border-width: 0;
+        border-style: solid;
+        box-sizing: border-box;
+        word-wrap: break-word;
+      }
+
+      main {
+        display: block;
+      }
+
+      ${e} hr {
+        border-top-width: 1px;
+        box-sizing: content-box;
+        height: 0;
+        overflow: visible;
+      }
+
+      ${e} :where(pre, code, kbd,samp) {
+        font-family: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-size: 1em;
+      }
+
+      ${e} a {
+        background-color: transparent;
+        color: inherit;
+        text-decoration: inherit;
+      }
+
+      ${e} abbr[title] {
+        border-bottom: none;
+        text-decoration: underline;
+        -webkit-text-decoration: underline dotted;
+        text-decoration: underline dotted;
+      }
+
+      ${e} :where(b, strong) {
+        font-weight: bold;
+      }
+
+      ${e} small {
+        font-size: 80%;
+      }
+
+      ${e} :where(sub,sup) {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+      }
+
+      ${e} sub {
+        bottom: -0.25em;
+      }
+
+      ${e} sup {
+        top: -0.5em;
+      }
+
+      ${e} img {
+        border-style: none;
+      }
+
+      ${e} :where(button, input, optgroup, select, textarea) {
+        font-family: inherit;
+        font-size: 100%;
+        line-height: 1.15;
+        margin: 0;
+      }
+
+      ${e} :where(button, input) {
+        overflow: visible;
+      }
+
+      ${e} :where(button, select) {
+        text-transform: none;
+      }
+
+      ${e} :where(
+          button::-moz-focus-inner,
+          [type="button"]::-moz-focus-inner,
+          [type="reset"]::-moz-focus-inner,
+          [type="submit"]::-moz-focus-inner
+        ) {
+        border-style: none;
+        padding: 0;
+      }
+
+      ${e} fieldset {
+        padding: 0.35em 0.75em 0.625em;
+      }
+
+      ${e} legend {
+        box-sizing: border-box;
+        color: inherit;
+        display: table;
+        max-width: 100%;
+        padding: 0;
+        white-space: normal;
+      }
+
+      ${e} progress {
+        vertical-align: baseline;
+      }
+
+      ${e} textarea {
+        overflow: auto;
+      }
+
+      ${e} :where([type="checkbox"], [type="radio"]) {
+        box-sizing: border-box;
+        padding: 0;
+      }
+
+      ${e} input[type="number"]::-webkit-inner-spin-button,
+      ${e} input[type="number"]::-webkit-outer-spin-button {
+        -webkit-appearance: none !important;
+      }
+
+      ${e} input[type="number"] {
+        -moz-appearance: textfield;
+      }
+
+      ${e} input[type="search"] {
+        -webkit-appearance: textfield;
+        outline-offset: -2px;
+      }
+
+      ${e} input[type="search"]::-webkit-search-decoration {
+        -webkit-appearance: none !important;
+      }
+
+      ${e} ::-webkit-file-upload-button {
+        -webkit-appearance: button;
+        font: inherit;
+      }
+
+      ${e} details {
+        display: block;
+      }
+
+      ${e} summary {
+        display: list-item;
+      }
+
+      template {
+        display: none;
+      }
+
+      [hidden] {
+        display: none !important;
+      }
+
+      ${e} :where(
+          blockquote,
+          dl,
+          dd,
+          h1,
+          h2,
+          h3,
+          h4,
+          h5,
+          h6,
+          hr,
+          figure,
+          p,
+          pre
+        ) {
+        margin: 0;
+      }
+
+      ${e} button {
+        background: transparent;
+        padding: 0;
+      }
+
+      ${e} fieldset {
+        margin: 0;
+        padding: 0;
+      }
+
+      ${e} :where(ol, ul) {
+        margin: 0;
+        padding: 0;
+      }
+
+      ${e} textarea {
+        resize: vertical;
+      }
+
+      ${e} :where(button, [role="button"]) {
+        cursor: pointer;
+      }
+
+      ${e} button::-moz-focus-inner {
+        border: 0 !important;
+      }
+
+      ${e} table {
+        border-collapse: collapse;
+      }
+
+      ${e} :where(h1, h2, h3, h4, h5, h6) {
+        font-size: inherit;
+        font-weight: inherit;
+      }
+
+      ${e} :where(button, input, optgroup, select, textarea) {
+        padding: 0;
+        line-height: inherit;
+        color: inherit;
+      }
+
+      ${e} :where(img, svg, video, canvas, audio, iframe, embed, object) {
+        display: block;
+      }
+
+      ${e} :where(img, video) {
+        max-width: 100%;
+        height: auto;
+      }
+
+      [data-js-focus-visible]
+        :focus:not([data-focus-visible-added]):not(
+          [data-focus-visible-disabled]
+        ) {
+        outline: none;
+        box-shadow: none;
+      }
+
+      ${e} select::-ms-expand {
+        display: none;
+      }
+
+      ${E}
+    `}),g={light:"chakra-ui-light",dark:"chakra-ui-dark"};function B(e={}){const{preventTransition:o=!0}=e,n={setDataset:r=>{const t=o?n.preventTransition():void 0;document.documentElement.dataset.theme=r,document.documentElement.style.colorScheme=r,t==null||t()},setClassName(r){document.body.classList.add(r?g.dark:g.light),document.body.classList.remove(r?g.light:g.dark)},query(){return window.matchMedia("(prefers-color-scheme: dark)")},getSystemTheme(r){var t;return((t=n.query().matches)!=null?t:r==="dark")?"dark":"light"},addListener(r){const t=n.query(),a=i=>{r(i.matches?"dark":"light")};return typeof t.addListener=="function"?t.addListener(a):t.addEventListener("change",a),()=>{typeof t.removeListener=="function"?t.removeListener(a):t.removeEventListener("change",a)}},preventTransition(){const r=document.createElement("style");return r.appendChild(document.createTextNode("*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")),document.head.appendChild(r),()=>{window.getComputedStyle(document.body),requestAnimationFrame(()=>{requestAnimationFrame(()=>{document.head.removeChild(r)})})}}};return n}var J="chakra-ui-color-mode";function L(e){return{ssr:!1,type:"localStorage",get(o){if(!(globalThis!=null&&globalThis.document))return o;let n;try{n=localStorage.getItem(e)||o}catch{}return n||o},set(o){try{localStorage.setItem(e,o)}catch{}}}}var ee=L(J),M=()=>{};function S(e,o){return e.type==="cookie"&&e.ssr?e.get(o):o}function O(e){const{value:o,children:n,options:{useSystemColorMode:r,initialColorMode:t,disableTransitionOnChange:a}={},colorModeManager:i=ee}=e,d=t==="dark"?"dark":"light",[u,p]=l.useState(()=>S(i,d)),[y,b]=l.useState(()=>S(i)),{getSystemTheme:w,setClassName:k,setDataset:x,addListener:$}=l.useMemo(()=>B({preventTransition:a}),[a]),v=t==="system"&&!u?y:u,h=l.useCallback(c=>{const f=c==="system"?w():c;p(f),k(f==="dark"),x(f),i.set(f)},[i,w,k,x]);V(()=>{t==="system"&&b(w())},[]),l.useEffect(()=>{const c=i.get();if(c){h(c);return}if(t==="system"){h("system");return}h(d)},[i,d,t,h]);const C=l.useCallback(()=>{h(v==="dark"?"light":"dark")},[v,h]);l.useEffect(()=>{if(r)return $(h)},[r,$,h]);const R=l.useMemo(()=>({colorMode:o??v,toggleColorMode:o?M:C,setColorMode:o?M:h,forced:o!==void 0}),[v,C,h,o]);return s.jsx(A.Provider,{value:R,children:n})}O.displayName="ColorModeProvider";var te=["borders","breakpoints","colors","components","config","direction","fonts","fontSizes","fontWeights","letterSpacings","lineHeights","radii","shadows","sizes","space","styles","transition","zIndices"];function re(e){return I(e)?te.every(o=>Object.prototype.hasOwnProperty.call(e,o)):!1}function m(e){return typeof e=="function"}function oe(...e){return o=>e.reduce((n,r)=>r(n),o)}var ne=e=>function(...n){let r=[...n],t=n[n.length-1];return re(t)&&r.length>1?r=r.slice(0,r.length-1):t=e,oe(...r.map(a=>i=>m(a)?a(i):ie(i,a)))(t)},ae=ne(j);function ie(...e){return z({},...e,_)}function _(e,o,n,r){if((m(e)||m(o))&&Object.prototype.hasOwnProperty.call(r,n))return(...t)=>{const a=m(e)?e(...t):e,i=m(o)?o(...t):o;return z({},a,i,_)}}var q=l.createContext({getDocument(){return document},getWindow(){return window}});q.displayName="EnvironmentContext";function N(e){const{children:o,environment:n,disabled:r}=e,t=l.useRef(null),a=l.useMemo(()=>n||{getDocument:()=>{var d,u;return(u=(d=t.current)==null?void 0:d.ownerDocument)!=null?u:document},getWindow:()=>{var d,u;return(u=(d=t.current)==null?void 0:d.ownerDocument.defaultView)!=null?u:window}},[n]),i=!r||!n;return s.jsxs(q.Provider,{value:a,children:[o,i&&s.jsx("span",{id:"__chakra_env",hidden:!0,ref:t})]})}N.displayName="EnvironmentProvider";var se=e=>{const{children:o,colorModeManager:n,portalZIndex:r,resetScope:t,resetCSS:a=!0,theme:i={},environment:d,cssVarsRoot:u,disableEnvironment:p,disableGlobalStyle:y}=e,b=s.jsx(N,{environment:d,disabled:p,children:o});return s.jsx(D,{theme:i,cssVarsRoot:u,children:s.jsxs(O,{colorModeManager:n,options:i.config,children:[a?s.jsx(X,{scope:t}):s.jsx(Q,{}),!y&&s.jsx(F,{}),r?s.jsx(W,{zIndex:r,children:b}):b]})})},le=e=>function({children:n,theme:r=e,toastOptions:t,...a}){return s.jsxs(se,{theme:r,...a,children:[s.jsx(G,{value:t==null?void 0:t.defaultOptions,children:n}),s.jsx(K,{...t})]})},de=le(j);const ue=()=>l.useMemo(()=>({colorScheme:"dark",fontFamily:"'Inter Variable', sans-serif",components:{ScrollArea:{defaultProps:{scrollbarSize:10},styles:{scrollbar:{"&:hover":{backgroundColor:"var(--invokeai-colors-baseAlpha-300)"}},thumb:{backgroundColor:"var(--invokeai-colors-baseAlpha-300)"}}}}}),[]),he=L("@@invokeai-color-mode");function ce({children:e}){const{i18n:o}=Z(),n=o.dir(),r=l.useMemo(()=>ae({...U,direction:n}),[n]);l.useEffect(()=>{document.body.dir=n},[n]);const t=ue();return s.jsx(H,{theme:t,children:s.jsx(de,{theme:r,colorModeManager:he,toastOptions:Y,children:e})})}const ve=l.memo(ce);export{ve as default};

invokeai/frontend/web/dist/index.html

@@ -12,7 +12,7 @@
         margin: 0;
       }
     </style>
-    <script type="module" crossorigin src="./assets/index-f6c3f475.js"></script>
+    <script type="module" crossorigin src="./assets/index-375621ca.js"></script>
   </head>
 
   <body dir="ltr">

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

@@ -13,14 +13,15 @@
         "reset": "Reset",
         "rotateClockwise": "Rotate Clockwise",
         "rotateCounterClockwise": "Rotate Counter-Clockwise",
-        "showGallery": "Show Gallery",
+        "showGalleryPanel": "Show Gallery Panel",
         "showOptionsPanel": "Show Side Panel",
         "toggleAutoscroll": "Toggle autoscroll",
         "toggleLogViewer": "Toggle Log Viewer",
         "uploadImage": "Upload Image",
         "useThisParameter": "Use this parameter",
         "zoomIn": "Zoom In",
-        "zoomOut": "Zoom Out"
+        "zoomOut": "Zoom Out",
+        "loadMore": "Load More"
     },
     "boards": {
         "addBoard": "Add Board",
@@ -57,6 +58,7 @@
         "githubLabel": "Github",
         "hotkeysLabel": "Hotkeys",
         "imagePrompt": "Image Prompt",
+        "imageFailedToLoad": "Unable to Load Image",
         "img2img": "Image To Image",
         "langArabic": "العربية",
         "langBrPortuguese": "Português do Brasil",
@@ -80,6 +82,7 @@
         "load": "Load",
         "loading": "Loading",
         "loadingInvokeAI": "Loading Invoke AI",
+        "learnMore": "Learn More",
         "modelManager": "Model Manager",
         "nodeEditor": "Node Editor",
         "nodes": "Workflow Editor",
@@ -110,6 +113,7 @@
         "statusModelChanged": "Model Changed",
         "statusModelConverted": "Model Converted",
         "statusPreparing": "Preparing",
+        "statusProcessing": "Processing",
         "statusProcessingCanceled": "Processing Canceled",
         "statusProcessingComplete": "Processing Complete",
         "statusRestoringFaces": "Restoring Faces",
@@ -133,6 +137,8 @@
         "bgth": "bg_th",
         "canny": "Canny",
         "cannyDescription": "Canny edge detection",
+        "colorMap": "Color",
+        "colorMapDescription": "Generates a color map from the image",
         "coarse": "Coarse",
         "contentShuffle": "Content Shuffle",
         "contentShuffleDescription": "Shuffles the content in an image",
@@ -156,6 +162,7 @@
         "hideAdvanced": "Hide Advanced",
         "highThreshold": "High Threshold",
         "imageResolution": "Image Resolution",
+        "colorMapTileSize": "Tile Size",
         "importImageFromCanvas": "Import Image From Canvas",
         "importMaskFromCanvas": "Import Mask From Canvas",
         "incompatibleBaseModel": "Incompatible base model:",
@@ -203,6 +210,81 @@
         "incompatibleModel": "Incompatible base model:",
         "noMatchingEmbedding": "No matching Embeddings"
     },
+    "queue": {
+        "queue": "Queue",
+        "queueFront": "Add to Front of Queue",
+        "queueBack": "Add to Queue",
+        "queueCountPrediction": "Add {{predicted}} to Queue",
+        "queueMaxExceeded": "Max of {{max_queue_size}} exceeded, would skip {{skip}}",
+        "queuedCount": "{{pending}} Pending",
+        "queueTotal": "{{total}} Total",
+        "queueEmpty": "Queue Empty",
+        "enqueueing": "Queueing Batch",
+        "resume": "Resume",
+        "resumeTooltip": "Resume Processor",
+        "resumeSucceeded": "Processor Resumed",
+        "resumeFailed": "Problem Resuming Processor",
+        "pause": "Pause",
+        "pauseTooltip": "Pause Processor",
+        "pauseSucceeded": "Processor Paused",
+        "pauseFailed": "Problem Pausing Processor",
+        "cancel": "Cancel",
+        "cancelTooltip": "Cancel Current Item",
+        "cancelSucceeded": "Item Canceled",
+        "cancelFailed": "Problem Canceling Item",
+        "prune": "Prune",
+        "pruneTooltip": "Prune {{item_count}} Completed Items",
+        "pruneSucceeded": "Pruned {{item_count}} Completed Items from Queue",
+        "pruneFailed": "Problem Pruning Queue",
+        "clear": "Clear",
+        "clearTooltip": "Cancel and Clear All Items",
+        "clearSucceeded": "Queue Cleared",
+        "clearFailed": "Problem Clearing Queue",
+        "cancelBatch": "Cancel Batch",
+        "cancelItem": "Cancel Item",
+        "cancelBatchSucceeded": "Batch Canceled",
+        "cancelBatchFailed": "Problem Canceling Batch",
+        "clearQueueAlertDialog": "Clearing the queue immediately cancels any processing items and clears the queue entirely.",
+        "clearQueueAlertDialog2": "Are you sure you want to clear the queue?",
+        "current": "Current",
+        "next": "Next",
+        "status": "Status",
+        "total": "Total",
+        "pending": "Pending",
+        "in_progress": "In Progress",
+        "completed": "Completed",
+        "failed": "Failed",
+        "canceled": "Canceled",
+        "completedIn": "Completed in",
+        "batch": "Batch",
+        "item": "Item",
+        "session": "Session",
+        "batchValues": "Batch Values",
+        "notReady": "Unable to Queue",
+        "batchQueued": "Batch Queued",
+        "batchQueuedDesc": "Added {{item_count}} sessions to {{direction}} of queue",
+        "front": "front",
+        "back": "back",
+        "batchFailedToQueue": "Failed to Queue Batch",
+        "graphQueued": "Graph queued",
+        "graphFailedToQueue": "Failed to queue graph"
+    },
+    "invocationCache": {
+        "invocationCache": "Invocation Cache",
+        "cacheSize": "Cache Size",
+        "maxCacheSize": "Max Cache Size",
+        "hits": "Cache Hits",
+        "misses": "Cache Misses",
+        "clear": "Clear",
+        "clearSucceeded": "Invocation Cache Cleared",
+        "clearFailed": "Problem Clearing Invocation Cache",
+        "enable": "Enable",
+        "enableSucceeded": "Invocation Cache Enabled",
+        "enableFailed": "Problem Enabling Invocation Cache",
+        "disable": "Disable",
+        "disableSucceeded": "Invocation Cache Disabled",
+        "disableFailed": "Problem Disabling Invocation Cache"
+    },
     "gallery": {
         "allImagesLoaded": "All Images Loaded",
         "assets": "Assets",
@@ -624,6 +706,8 @@
         "addNodeToolTip": "Add Node (Shift+A, Space)",
         "animatedEdges": "Animated Edges",
         "animatedEdgesHelp": "Animate selected edges and edges connected to selected nodes",
+        "boardField": "Board",
+        "boardFieldDescription": "A gallery board",
         "boolean": "Booleans",
         "booleanCollection": "Boolean Collection",
         "booleanCollectionDescription": "A collection of booleans.",
@@ -633,6 +717,7 @@
         "cannotConnectInputToInput": "Cannot connect input to input",
         "cannotConnectOutputToOutput": "Cannot connect output to output",
         "cannotConnectToSelf": "Cannot connect to self",
+        "cannotDuplicateConnection": "Cannot create duplicate connections",
         "clipField": "Clip",
         "clipFieldDescription": "Tokenizer and text_encoder submodels.",
         "collection": "Collection",
@@ -641,7 +726,8 @@
         "collectionItemDescription": "TODO",
         "colorCodeEdges": "Color-Code Edges",
         "colorCodeEdgesHelp": "Color-code edges according to their connected fields",
-        "colorCollectionDescription": "A collection of colors.",
+        "colorCollection": "A collection of colors.",
+        "colorCollectionDescription": "TODO",
         "colorField": "Color",
         "colorFieldDescription": "A RGBA color.",
         "colorPolymorphic": "Color Polymorphic",
@@ -688,7 +774,8 @@
         "imageFieldDescription": "Images may be passed between nodes.",
         "imagePolymorphic": "Image Polymorphic",
         "imagePolymorphicDescription": "A collection of images.",
-        "inputFields": "Input Feilds",
+        "inputField": "Input Field",
+        "inputFields": "Input Fields",
         "inputMayOnlyHaveOneConnection": "Input may only have one connection",
         "inputNode": "Input Node",
         "integer": "Integer",
@@ -706,6 +793,7 @@
         "latentsPolymorphicDescription": "Latents may be passed between nodes.",
         "loadingNodes": "Loading Nodes...",
         "loadWorkflow": "Load Workflow",
+        "noWorkflow": "No Workflow",
         "loRAModelField": "LoRA",
         "loRAModelFieldDescription": "TODO",
         "mainModelField": "Model",
@@ -727,14 +815,15 @@
         "noImageFoundState": "No initial image found in state",
         "noMatchingNodes": "No matching nodes",
         "noNodeSelected": "No node selected",
-        "noOpacity": "Node Opacity",
+        "nodeOpacity": "Node Opacity",
         "noOutputRecorded": "No outputs recorded",
         "noOutputSchemaName": "No output schema name found in ref object",
         "notes": "Notes",
         "notesDescription": "Add notes about your workflow",
         "oNNXModelField": "ONNX Model",
         "oNNXModelFieldDescription": "ONNX model field.",
-        "outputFields": "Output Feilds",
+        "outputField": "Output Field",
+        "outputFields": "Output Fields",
         "outputNode": "Output node",
         "outputSchemaNotFound": "Output schema not found",
         "pickOne": "Pick One",
@@ -783,6 +872,7 @@
         "unknownNode": "Unknown Node",
         "unknownTemplate": "Unknown Template",
         "unkownInvocation": "Unknown Invocation type",
+        "updateNode": "Update Node",
         "updateApp": "Update App",
         "vaeField": "Vae",
         "vaeFieldDescription": "Vae submodel.",
@@ -806,7 +896,7 @@
         "zoomOutNodes": "Zoom Out"
     },
     "parameters": {
-        "aspectRatio": "Ratio",
+        "aspectRatio": "Aspect Ratio",
         "boundingBoxHeader": "Bounding Box",
         "boundingBoxHeight": "Bounding Box Height",
         "boundingBoxWidth": "Bounding Box Width",
@@ -819,6 +909,7 @@
         },
         "cfgScale": "CFG Scale",
         "clipSkip": "CLIP Skip",
+        "clipSkipWithLayerCount": "CLIP Skip {{layerCount}}",
         "closeViewer": "Close Viewer",
         "codeformerFidelity": "Fidelity",
         "coherenceMode": "Mode",
@@ -857,6 +948,7 @@
             "noInitialImageSelected": "No initial image selected",
             "noModelForControlNet": "ControlNet {{index}} has no model selected.",
             "noModelSelected": "No model selected",
+            "noPrompts": "No prompts generated",
             "noNodesInGraph": "No nodes in graph",
             "readyToInvoke": "Ready to Invoke",
             "systemBusy": "System busy",
@@ -875,7 +967,12 @@
         "perlinNoise": "Perlin Noise",
         "positivePromptPlaceholder": "Positive Prompt",
         "randomizeSeed": "Randomize Seed",
+        "manualSeed": "Manual Seed",
+        "randomSeed": "Random Seed",
         "restoreFaces": "Restore Faces",
+        "iterations": "Iterations",
+        "iterationsWithCount_one": "{{count}} Iteration",
+        "iterationsWithCount_other": "{{count}} Iterations",
         "scale": "Scale",
         "scaleBeforeProcessing": "Scale Before Processing",
         "scaledHeight": "Scaled H",
@@ -886,13 +983,17 @@
         "seamlessTiling": "Seamless Tiling",
         "seamlessXAxis": "X Axis",
         "seamlessYAxis": "Y Axis",
+        "seamlessX": "Seamless X",
+        "seamlessY": "Seamless Y",
+        "seamlessX&Y": "Seamless X & Y",
         "seamLowThreshold": "Low",
         "seed": "Seed",
         "seedWeights": "Seed Weights",
+        "imageActions": "Image Actions",
         "sendTo": "Send to",
         "sendToImg2Img": "Send to Image to Image",
         "sendToUnifiedCanvas": "Send To Unified Canvas",
-        "showOptionsPanel": "Show Options Panel",
+        "showOptionsPanel": "Show Side Panel (O or T)",
         "showPreview": "Show Preview",
         "shuffle": "Shuffle Seed",
         "steps": "Steps",
@@ -901,11 +1002,13 @@
         "tileSize": "Tile Size",
         "toggleLoopback": "Toggle Loopback",
         "type": "Type",
-        "upscale": "Upscale",
+        "upscale": "Upscale (Shift + U)",
         "upscaleImage": "Upscale Image",
         "upscaling": "Upscaling",
         "useAll": "Use All",
         "useCpuNoise": "Use CPU Noise",
+        "cpuNoise": "CPU Noise",
+        "gpuNoise": "GPU Noise",
         "useInitImg": "Use Initial Image",
         "usePrompt": "Use Prompt",
         "useSeed": "Use Seed",
@@ -914,11 +1017,20 @@
         "vSymmetryStep": "V Symmetry Step",
         "width": "Width"
     },
-    "prompt": {
+    "dynamicPrompts": {
         "combinatorial": "Combinatorial Generation",
         "dynamicPrompts": "Dynamic Prompts",
         "enableDynamicPrompts": "Enable Dynamic Prompts",
-        "maxPrompts": "Max Prompts"
+        "maxPrompts": "Max Prompts",
+        "promptsWithCount_one": "{{count}} Prompt",
+        "promptsWithCount_other": "{{count}} Prompts",
+        "seedBehaviour": {
+            "label": "Seed Behaviour",
+            "perIterationLabel": "Seed per Iteration",
+            "perIterationDesc": "Use a different seed for each iteration",
+            "perPromptLabel": "Seed per Image",
+            "perPromptDesc": "Use a different seed for each image"
+        }
     },
     "sdxl": {
         "cfgScale": "CFG Scale",
@@ -1066,6 +1178,210 @@
             "variations": "Try a variation with a value between 0.1 and 1.0 to change the result for a given seed. Interesting variations of the seed are between 0.1 and 0.3."
         }
     },
+    "popovers": {
+        "clipSkip": {
+            "heading": "CLIP Skip",
+            "paragraphs": [
+                "Choose how many layers of the CLIP model to skip.",
+                "Some models work better with certain CLIP Skip settings.",
+                "A higher value typically results in a less detailed image."
+            ]
+        },
+        "paramNegativeConditioning": {
+            "heading": "Negative Prompt",
+            "paragraphs": [
+                "The generation process avoids the concepts in the negative prompt. Use this to exclude qualities or objects from the output.",
+                "Supports Compel syntax and embeddings."
+            ]
+        },
+        "paramPositiveConditioning": {
+            "heading": "Positive Prompt",
+            "paragraphs": [
+                "Guides the generation process. You may use any words or phrases.",
+                "Compel and Dynamic Prompts syntaxes and embeddings."
+            ]
+        },
+        "paramScheduler": {
+            "heading": "Scheduler",
+            "paragraphs": [
+                "Scheduler defines how to iteratively add noise to an image or how to update a sample based on a model's output."
+            ]
+        },
+        "compositingBlur": {
+            "heading": "Blur",
+            "paragraphs": ["The blur radius of the mask."]
+        },
+        "compositingBlurMethod": {
+            "heading": "Blur Method",
+            "paragraphs": ["The method of blur applied to the masked area."]
+        },
+        "compositingCoherencePass": {
+            "heading": "Coherence Pass",
+            "paragraphs": [
+                "A second round of denoising helps to composite the Inpainted/Outpainted image."
+            ]
+        },
+        "compositingCoherenceMode": {
+            "heading": "Mode",
+            "paragraphs": ["The mode of the Coherence Pass."]
+        },
+        "compositingCoherenceSteps": {
+            "heading": "Steps",
+            "paragraphs": [
+                "Number of denoising steps used in the Coherence Pass.",
+                "Same as the main Steps parameter."
+            ]
+        },
+        "compositingStrength": {
+            "heading": "Strength",
+            "paragraphs": [
+                "Denoising strength for the Coherence Pass.",
+                "Same as the Image to Image Denoising Strength parameter."
+            ]
+        },
+        "compositingMaskAdjustments": {
+            "heading": "Mask Adjustments",
+            "paragraphs": ["Adjust the mask."]
+        },
+        "controlNetBeginEnd": {
+            "heading": "Begin / End Step Percentage",
+            "paragraphs": [
+                "Which steps of the denoising process will have the ControlNet applied.",
+                "ControlNets applied at the beginning of the process guide composition, and ControlNets applied at the end guide details."
+            ]
+        },
+        "controlNetControlMode": {
+            "heading": "Control Mode",
+            "paragraphs": [
+                "Lends more weight to either the prompt or ControlNet."
+            ]
+        },
+        "controlNetResizeMode": {
+            "heading": "Resize Mode",
+            "paragraphs": [
+                "How the ControlNet image will be fit to the image output size."
+            ]
+        },
+        "controlNet": {
+            "heading": "ControlNet",
+            "paragraphs": [
+                "ControlNets provide guidance to the generation process, helping create images with controlled composition, structure, or style, depending on the model selected."
+            ]
+        },
+        "controlNetWeight": {
+            "heading": "Weight",
+            "paragraphs": [
+                "How strongly the ControlNet will impact the generated image."
+            ]
+        },
+        "dynamicPrompts": {
+            "heading": "Dynamic Prompts",
+            "paragraphs": [
+                "Dynamic Prompts parses a single prompt into many.",
+                "The basic syntax is \"a {red|green|blue} ball\". This will produce three prompts: \"a red ball\", \"a green ball\" and \"a blue ball\".",
+                "You can use the syntax as many times as you like in a single prompt, but be sure to keep the number of prompts generated in check with the Max Prompts setting."
+            ]
+        },
+        "dynamicPromptsMaxPrompts": {
+            "heading": "Max Prompts",
+            "paragraphs": [
+                "Limits the number of prompts that can be generated by Dynamic Prompts."
+            ]
+        },
+        "dynamicPromptsSeedBehaviour": {
+            "heading": "Seed Behaviour",
+            "paragraphs": [
+                "Controls how the seed is used when generating prompts.",
+                "Per Iteration will use a unique seed for each iteration. Use this to explore prompt variations on a single seed.",
+                "For example, if you have 5 prompts, each image will use the same seed.",
+                "Per Image will use a unique seed for each image. This provides more variation."
+            ]
+        },
+        "infillMethod": {
+            "heading": "Infill Method",
+            "paragraphs": ["Method to infill the selected area."]
+        },
+        "lora": {
+            "heading": "LoRA Weight",
+            "paragraphs": [
+                "Higher LoRA weight will lead to larger impacts on the final image."
+            ]
+        },
+        "noiseUseCPU": {
+            "heading": "Use CPU Noise",
+            "paragraphs": [
+                "Controls whether noise is generated on the CPU or GPU.",
+                "With CPU Noise enabled, a particular seed will produce the same image on any machine.",
+                "There is no performance impact to enabling CPU Noise."
+            ]
+        },
+        "paramCFGScale": {
+            "heading": "CFG Scale",
+            "paragraphs": [
+                "Controls how much your prompt influences the generation process."
+            ]
+        },
+        "paramDenoisingStrength": {
+            "heading": "Denoising Strength",
+            "paragraphs": [
+                "How much noise is added to the input image.",
+                "0 will result in an identical image, while 1 will result in a completely new image."
+            ]
+        },
+        "paramIterations": {
+            "heading": "Iterations",
+            "paragraphs": [
+                "The number of images to generate.",
+                "If Dynamic Prompts is enabled, each of the prompts will be generated this many times."
+            ]
+        },
+        "paramModel": {
+            "heading": "Model",
+            "paragraphs": [
+                "Model used for the denoising steps.",
+                "Different models are typically trained to specialize in producing particular aesthetic results and content."
+            ]
+        },
+        "paramRatio": {
+            "heading": "Aspect Ratio",
+            "paragraphs": [
+                "The aspect ratio of the dimensions of the image generated.",
+                "An image size (in number of pixels) equivalent to 512x512 is recommended for SD1.5 models and a size equivalent to 1024x1024 is recommended for SDXL models."
+            ]
+        },
+        "paramSeed": {
+            "heading": "Seed",
+            "paragraphs": [
+                "Controls the starting noise used for generation.",
+                "Disable “Random Seed” to produce identical results with the same generation settings."
+            ]
+        },
+        "paramSteps": {
+            "heading": "Steps",
+            "paragraphs": [
+                "Number of steps that will be performed in each generation.",
+                "Higher step counts will typically create better images but will require more generation time."
+            ]
+        },
+        "paramVAE": {
+            "heading": "VAE",
+            "paragraphs": [
+                "Model used for translating AI output into the final image."
+            ]
+        },
+        "paramVAEPrecision": {
+            "heading": "VAE Precision",
+            "paragraphs": [
+                "The precision used during VAE encoding and decoding. FP16/half precision is more efficient, at the expense of minor image variations."
+            ]
+        },
+        "scaleBeforeProcessing": {
+            "heading": "Scale Before Processing",
+            "paragraphs": [
+                "Scales the selected area to the size best suited for the model before the image generation process."
+            ]
+        }
+    },
     "ui": {
         "hideProgressImages": "Hide Progress Images",
         "lockRatio": "Lock Ratio",
@@ -1128,6 +1444,8 @@
         "showCanvasDebugInfo": "Show Additional Canvas Info",
         "showGrid": "Show Grid",
         "showHide": "Show/Hide",
+        "showResultsOn": "Show Results (On)",
+        "showResultsOff": "Show Results (Off)",
         "showIntermediates": "Show Intermediates",
         "snapToGrid": "Snap to Grid",
         "undo": "Undo"

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

@@ -58,6 +58,7 @@
         "githubLabel": "Github",
         "hotkeysLabel": "Hotkeys",
         "imagePrompt": "Image Prompt",
+        "imageFailedToLoad": "Unable to Load Image",
         "img2img": "Image To Image",
         "langArabic": "العربية",
         "langBrPortuguese": "Português do Brasil",
@@ -79,7 +80,7 @@
         "lightMode": "Light Mode",
         "linear": "Linear",
         "load": "Load",
-        "loading": "Loading $t({{noun}})...",
+        "loading": "Loading",
         "loadingInvokeAI": "Loading Invoke AI",
         "learnMore": "Learn More",
         "modelManager": "Model Manager",
@@ -716,6 +717,7 @@
         "cannotConnectInputToInput": "Cannot connect input to input",
         "cannotConnectOutputToOutput": "Cannot connect output to output",
         "cannotConnectToSelf": "Cannot connect to self",
+        "cannotDuplicateConnection": "Cannot create duplicate connections",
         "clipField": "Clip",
         "clipFieldDescription": "Tokenizer and text_encoder submodels.",
         "collection": "Collection",
@@ -1442,6 +1444,8 @@
         "showCanvasDebugInfo": "Show Additional Canvas Info",
         "showGrid": "Show Grid",
         "showHide": "Show/Hide",
+        "showResultsOn": "Show Results (On)",
+        "showResultsOff": "Show Results (Off)",
         "showIntermediates": "Show Intermediates",
         "snapToGrid": "Snap to Grid",
         "undo": "Undo"

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

@@ -1,6 +1,8 @@
 import { Flex, Grid } from '@chakra-ui/react';
+import { useStore } from '@nanostores/react';
 import { useLogger } from 'app/logging/useLogger';
 import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted';
+import { $headerComponent } from 'app/store/nanostores/headerComponent';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { PartialAppConfig } from 'app/types/invokeai';
 import ImageUploader from 'common/components/ImageUploader';
@@ -14,12 +16,10 @@ import i18n from 'i18n';
 import { size } from 'lodash-es';
 import { memo, useCallback, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import { usePreselectedImage } from '../../features/parameters/hooks/usePreselectedImage';
 import AppErrorBoundaryFallback from './AppErrorBoundaryFallback';
 import GlobalHotkeys from './GlobalHotkeys';
+import PreselectedImage from './PreselectedImage';
 import Toaster from './Toaster';
-import { useStore } from '@nanostores/react';
-import { $headerComponent } from 'app/store/nanostores/headerComponent';
 
 const DEFAULT_CONFIG = {};
 
@@ -36,8 +36,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
 
   const logger = useLogger('system');
   const dispatch = useAppDispatch();
-  const { handleSendToCanvas, handleSendToImg2Img, handleUseAllMetadata } =
-    usePreselectedImage(selectedImage?.imageName);
+
   const handleReset = useCallback(() => {
     localStorage.clear();
     location.reload();
@@ -59,24 +58,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
     dispatch(appStarted());
   }, [dispatch]);
 
-  useEffect(() => {
-    if (selectedImage && selectedImage.action === 'sendToCanvas') {
-      handleSendToCanvas();
-    }
-  }, [selectedImage, handleSendToCanvas]);
-
-  useEffect(() => {
-    if (selectedImage && selectedImage.action === 'sendToImg2Img') {
-      handleSendToImg2Img();
-    }
-  }, [selectedImage, handleSendToImg2Img]);
-
-  useEffect(() => {
-    if (selectedImage && selectedImage.action === 'useAllParameters') {
-      handleUseAllMetadata();
-    }
-  }, [selectedImage, handleUseAllMetadata]);
-
   const headerComponent = useStore($headerComponent);
 
   return (
@@ -112,6 +93,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
       <ChangeBoardModal />
       <Toaster />
       <GlobalHotkeys />
+      <PreselectedImage selectedImage={selectedImage} />
     </ErrorBoundary>
   );
 };

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

@@ -0,0 +1,16 @@
+import { usePreselectedImage } from 'features/parameters/hooks/usePreselectedImage';
+import { memo } from 'react';
+
+type Props = {
+  selectedImage?: {
+    imageName: string;
+    action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
+  };
+};
+
+const PreselectedImage = (props: Props) => {
+  usePreselectedImage(props.selectedImage);
+  return null;
+};
+
+export default memo(PreselectedImage);

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

@@ -5,7 +5,7 @@ import {
 } from '@chakra-ui/react';
 import { ReactNode, memo, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { theme as invokeAITheme } from 'theme/theme';
+import { TOAST_OPTIONS, theme as invokeAITheme } from 'theme/theme';
 
 import '@fontsource-variable/inter';
 import { MantineProvider } from '@mantine/core';
@@ -39,7 +39,11 @@ function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
 
   return (
     <MantineProvider theme={mantineTheme}>
-      <ChakraProvider theme={theme} colorModeManager={manager}>
+      <ChakraProvider
+        theme={theme}
+        colorModeManager={manager}
+        toastOptions={TOAST_OPTIONS}
+      >
         {children}
       </ChakraProvider>
     </MantineProvider>

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

@@ -54,21 +54,6 @@ import { addModelSelectedListener } from './listeners/modelSelected';
 import { addModelsLoadedListener } from './listeners/modelsLoaded';
 import { addDynamicPromptsListener } from './listeners/promptChanged';
 import { addReceivedOpenAPISchemaListener } from './listeners/receivedOpenAPISchema';
-import {
-  addSessionCanceledFulfilledListener,
-  addSessionCanceledPendingListener,
-  addSessionCanceledRejectedListener,
-} from './listeners/sessionCanceled';
-import {
-  addSessionCreatedFulfilledListener,
-  addSessionCreatedPendingListener,
-  addSessionCreatedRejectedListener,
-} from './listeners/sessionCreated';
-import {
-  addSessionInvokedFulfilledListener,
-  addSessionInvokedPendingListener,
-  addSessionInvokedRejectedListener,
-} from './listeners/sessionInvoked';
 import { addSocketConnectedEventListener as addSocketConnectedListener } from './listeners/socketio/socketConnected';
 import { addSocketDisconnectedEventListener as addSocketDisconnectedListener } from './listeners/socketio/socketDisconnected';
 import { addGeneratorProgressEventListener as addGeneratorProgressListener } from './listeners/socketio/socketGeneratorProgress';
@@ -86,6 +71,7 @@ import { addStagingAreaImageSavedListener } from './listeners/stagingAreaImageSa
 import { addTabChangedListener } from './listeners/tabChanged';
 import { addUpscaleRequestedListener } from './listeners/upscaleRequested';
 import { addWorkflowLoadedListener } from './listeners/workflowLoaded';
+import { addBatchEnqueuedListener } from './listeners/batchEnqueued';
 
 export const listenerMiddleware = createListenerMiddleware();
 
@@ -136,6 +122,7 @@ addEnqueueRequestedCanvasListener();
 addEnqueueRequestedNodes();
 addEnqueueRequestedLinear();
 addAnyEnqueuedListener();
+addBatchEnqueuedListener();
 
 // Canvas actions
 addCanvasSavedToGalleryListener();
@@ -175,21 +162,6 @@ addSessionRetrievalErrorEventListener();
 addInvocationRetrievalErrorEventListener();
 addSocketQueueItemStatusChangedEventListener();
 
-// Session Created
-addSessionCreatedPendingListener();
-addSessionCreatedFulfilledListener();
-addSessionCreatedRejectedListener();
-
-// Session Invoked
-addSessionInvokedPendingListener();
-addSessionInvokedFulfilledListener();
-addSessionInvokedRejectedListener();
-
-// Session Canceled
-addSessionCanceledPendingListener();
-addSessionCanceledFulfilledListener();
-addSessionCanceledRejectedListener();
-
 // ControlNet
 addControlNetImageProcessedListener();
 addControlNetAutoProcessListener();

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

@@ -0,0 +1,96 @@
+import { createStandaloneToast } from '@chakra-ui/react';
+import { logger } from 'app/logging/logger';
+import { parseify } from 'common/util/serialize';
+import { zPydanticValidationError } from 'features/system/store/zodSchemas';
+import { t } from 'i18next';
+import { get, truncate, upperFirst } from 'lodash-es';
+import { queueApi } from 'services/api/endpoints/queue';
+import { TOAST_OPTIONS, theme } from 'theme/theme';
+import { startAppListening } from '..';
+
+const { toast } = createStandaloneToast({
+  theme: theme,
+  defaultOptions: TOAST_OPTIONS.defaultOptions,
+});
+
+export const addBatchEnqueuedListener = () => {
+  // success
+  startAppListening({
+    matcher: queueApi.endpoints.enqueueBatch.matchFulfilled,
+    effect: async (action) => {
+      const response = action.payload;
+      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', {
+            item_count: response.enqueued,
+            direction: arg.prepend ? t('queue.front') : t('queue.back'),
+          }),
+          duration: 1000,
+          status: 'success',
+        });
+      }
+    },
+  });
+
+  // error
+  startAppListening({
+    matcher: queueApi.endpoints.enqueueBatch.matchRejected,
+    effect: async (action) => {
+      const response = action.payload;
+      const arg = action.meta.arg.originalArgs;
+
+      if (!response) {
+        toast({
+          title: t('queue.batchFailedToQueue'),
+          status: 'error',
+          description: 'Unknown Error',
+        });
+        logger('queue').error(
+          { batchConfig: parseify(arg), error: parseify(response) },
+          t('queue.batchFailedToQueue')
+        );
+        return;
+      }
+
+      const result = zPydanticValidationError.safeParse(response);
+      if (result.success) {
+        result.data.data.detail.map((e) => {
+          toast({
+            id: 'batch-failed-to-queue',
+            title: truncate(upperFirst(e.msg), { length: 128 }),
+            status: 'error',
+            description: truncate(
+              `Path:
+              ${e.loc.join('.')}`,
+              { length: 128 }
+            ),
+          });
+        });
+      } else {
+        let detail = 'Unknown Error';
+        if (response.status === 403 && 'body' in response) {
+          detail = get(response, 'body.detail', 'Unknown Error');
+        } else if (response.status === 403 && 'error' in response) {
+          detail = get(response, 'error.detail', 'Unknown Error');
+        }
+        toast({
+          title: t('queue.batchFailedToQueue'),
+          status: 'error',
+          description: detail,
+        });
+      }
+      logger('queue').error(
+        { batchConfig: parseify(arg), error: parseify(response) },
+        t('queue.batchFailedToQueue')
+      );
+    },
+  });
+};

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

@@ -25,7 +25,7 @@ export const addBoardIdSelectedListener = () => {
       const state = getState();
 
       const board_id = boardIdSelected.match(action)
-        ? action.payload
+        ? action.payload.boardId
         : state.gallery.selectedBoardId;
 
       const galleryView = galleryViewChanged.match(action)
@@ -55,7 +55,12 @@ export const addBoardIdSelectedListener = () => {
 
         if (boardImagesData) {
           const firstImage = imagesSelectors.selectAll(boardImagesData)[0];
-          dispatch(imageSelected(firstImage ?? null));
+          const selectedImage = imagesSelectors.selectById(
+            boardImagesData,
+            action.payload.selectedImageName
+          );
+
+          dispatch(imageSelected(selectedImage || firstImage || null));
         } else {
           // board has no images - deselect
           dispatch(imageSelected(null));

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

@@ -3,9 +3,9 @@ import { canvasImageToControlNet } from 'features/canvas/store/actions';
 import { getBaseLayerBlob } from 'features/canvas/util/getBaseLayerBlob';
 import { controlNetImageChanged } from 'features/controlNet/store/controlNetSlice';
 import { addToast } from 'features/system/store/systemSlice';
+import { t } from 'i18next';
 import { imagesApi } from 'services/api/endpoints/images';
 import { startAppListening } from '..';
-import { t } from 'i18next';
 
 export const addCanvasImageToControlNetListener = () => {
   startAppListening({
@@ -16,7 +16,7 @@ export const addCanvasImageToControlNetListener = () => {
 
       let blob;
       try {
-        blob = await getBaseLayerBlob(state);
+        blob = await getBaseLayerBlob(state, true);
       } catch (err) {
         log.error(String(err));
         dispatch(
@@ -36,10 +36,10 @@ export const addCanvasImageToControlNetListener = () => {
           file: new File([blob], 'savedCanvas.png', {
             type: 'image/png',
           }),
-          image_category: 'mask',
+          image_category: 'control',
           is_intermediate: false,
           board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
-          crop_visible: true,
+          crop_visible: false,
           postUploadAction: {
             type: 'TOAST',
             toastOptions: { title: t('toast.canvasSentControlnetAssets') },

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

@@ -3,9 +3,9 @@ import { canvasMaskToControlNet } from 'features/canvas/store/actions';
 import { getCanvasData } from 'features/canvas/util/getCanvasData';
 import { controlNetImageChanged } from 'features/controlNet/store/controlNetSlice';
 import { addToast } from 'features/system/store/systemSlice';
+import { t } from 'i18next';
 import { imagesApi } from 'services/api/endpoints/images';
 import { startAppListening } from '..';
-import { t } from 'i18next';
 
 export const addCanvasMaskToControlNetListener = () => {
   startAppListening({
@@ -50,7 +50,7 @@ export const addCanvasMaskToControlNetListener = () => {
           image_category: 'mask',
           is_intermediate: false,
           board_id: autoAddBoardId === 'none' ? undefined : autoAddBoardId,
-          crop_visible: true,
+          crop_visible: false,
           postUploadAction: {
             type: 'TOAST',
             toastOptions: { title: t('toast.maskSentControlnetAssets') },

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

@@ -12,8 +12,6 @@ import { getCanvasGenerationMode } from 'features/canvas/util/getCanvasGeneratio
 import { canvasGraphBuilt } from 'features/nodes/store/actions';
 import { buildCanvasGraph } from 'features/nodes/util/graphBuilders/buildCanvasGraph';
 import { prepareLinearUIBatch } from 'features/nodes/util/graphBuilders/buildLinearBatchConfig';
-import { addToast } from 'features/system/store/systemSlice';
-import { t } from 'i18next';
 import { imagesApi } from 'services/api/endpoints/images';
 import { queueApi } from 'services/api/endpoints/queue';
 import { ImageDTO } from 'services/api/types';
@@ -140,8 +138,6 @@ export const addEnqueueRequestedCanvasListener = () => {
         const enqueueResult = await req.unwrap();
         req.reset();
 
-        log.debug({ enqueueResult: parseify(enqueueResult) }, 'Batch enqueued');
-
         const batchId = enqueueResult.batch.batch_id as string; // we know the is a string, backend provides it
 
         // Prep the canvas staging area if it is not yet initialized
@@ -158,28 +154,8 @@ export const addEnqueueRequestedCanvasListener = () => {
 
         // Associate the session with the canvas session ID
         dispatch(canvasBatchIdAdded(batchId));
-
-        dispatch(
-          addToast({
-            title: t('queue.batchQueued'),
-            description: t('queue.batchQueuedDesc', {
-              item_count: enqueueResult.enqueued,
-              direction: prepend ? t('queue.front') : t('queue.back'),
-            }),
-            status: 'success',
-          })
-        );
       } catch {
-        log.error(
-          { batchConfig: parseify(batchConfig) },
-          t('queue.batchFailedToQueue')
-        );
-        dispatch(
-          addToast({
-            title: t('queue.batchFailedToQueue'),
-            status: 'error',
-          })
-        );
+        // no-op
       }
     },
   });

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

@@ -1,13 +1,9 @@
-import { logger } from 'app/logging/logger';
 import { enqueueRequested } from 'app/store/actions';
-import { parseify } from 'common/util/serialize';
 import { prepareLinearUIBatch } from 'features/nodes/util/graphBuilders/buildLinearBatchConfig';
 import { buildLinearImageToImageGraph } from 'features/nodes/util/graphBuilders/buildLinearImageToImageGraph';
 import { buildLinearSDXLImageToImageGraph } from 'features/nodes/util/graphBuilders/buildLinearSDXLImageToImageGraph';
 import { buildLinearSDXLTextToImageGraph } from 'features/nodes/util/graphBuilders/buildLinearSDXLTextToImageGraph';
 import { buildLinearTextToImageGraph } from 'features/nodes/util/graphBuilders/buildLinearTextToImageGraph';
-import { addToast } from 'features/system/store/systemSlice';
-import { t } from 'i18next';
 import { queueApi } from 'services/api/endpoints/queue';
 import { startAppListening } from '..';
 
@@ -18,7 +14,6 @@ export const addEnqueueRequestedLinear = () => {
       (action.payload.tabName === 'txt2img' ||
         action.payload.tabName === 'img2img'),
     effect: async (action, { getState, dispatch }) => {
-      const log = logger('queue');
       const state = getState();
       const model = state.generation.model;
       const { prepend } = action.payload;
@@ -41,38 +36,12 @@ export const addEnqueueRequestedLinear = () => {
 
       const batchConfig = prepareLinearUIBatch(state, graph, prepend);
 
-      try {
-        const req = dispatch(
-          queueApi.endpoints.enqueueBatch.initiate(batchConfig, {
-            fixedCacheKey: 'enqueueBatch',
-          })
-        );
-        const enqueueResult = await req.unwrap();
-        req.reset();
-
-        log.debug({ enqueueResult: parseify(enqueueResult) }, 'Batch enqueued');
-        dispatch(
-          addToast({
-            title: t('queue.batchQueued'),
-            description: t('queue.batchQueuedDesc', {
-              item_count: enqueueResult.enqueued,
-              direction: prepend ? t('queue.front') : t('queue.back'),
-            }),
-            status: 'success',
-          })
-        );
-      } catch {
-        log.error(
-          { batchConfig: parseify(batchConfig) },
-          t('queue.batchFailedToQueue')
-        );
-        dispatch(
-          addToast({
-            title: t('queue.batchFailedToQueue'),
-            status: 'error',
-          })
-        );
-      }
+      const req = dispatch(
+        queueApi.endpoints.enqueueBatch.initiate(batchConfig, {
+          fixedCacheKey: 'enqueueBatch',
+        })
+      );
+      req.reset();
     },
   });
 };

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

@@ -1,9 +1,5 @@
-import { logger } from 'app/logging/logger';
 import { enqueueRequested } from 'app/store/actions';
-import { parseify } from 'common/util/serialize';
 import { buildNodesGraph } from 'features/nodes/util/graphBuilders/buildNodesGraph';
-import { addToast } from 'features/system/store/systemSlice';
-import { t } from 'i18next';
 import { queueApi } from 'services/api/endpoints/queue';
 import { BatchConfig } from 'services/api/types';
 import { startAppListening } from '..';
@@ -13,9 +9,7 @@ export const addEnqueueRequestedNodes = () => {
     predicate: (action): action is ReturnType<typeof enqueueRequested> =>
       enqueueRequested.match(action) && action.payload.tabName === 'nodes',
     effect: async (action, { getState, dispatch }) => {
-      const log = logger('queue');
       const state = getState();
-      const { prepend } = action.payload;
       const graph = buildNodesGraph(state.nodes);
       const batchConfig: BatchConfig = {
         batch: {
@@ -25,38 +19,12 @@ export const addEnqueueRequestedNodes = () => {
         prepend: action.payload.prepend,
       };
 
-      try {
-        const req = dispatch(
-          queueApi.endpoints.enqueueBatch.initiate(batchConfig, {
-            fixedCacheKey: 'enqueueBatch',
-          })
-        );
-        const enqueueResult = await req.unwrap();
-        req.reset();
-
-        log.debug({ enqueueResult: parseify(enqueueResult) }, 'Batch enqueued');
-        dispatch(
-          addToast({
-            title: t('queue.batchQueued'),
-            description: t('queue.batchQueuedDesc', {
-              item_count: enqueueResult.enqueued,
-              direction: prepend ? t('queue.front') : t('queue.back'),
-            }),
-            status: 'success',
-          })
-        );
-      } catch {
-        log.error(
-          { batchConfig: parseify(batchConfig) },
-          'Failed to enqueue batch'
-        );
-        dispatch(
-          addToast({
-            title: t('queue.batchFailedToQueue'),
-            status: 'error',
-          })
-        );
-      }
+      const req = dispatch(
+        queueApi.endpoints.enqueueBatch.initiate(batchConfig, {
+          fixedCacheKey: 'enqueueBatch',
+        })
+      );
+      req.reset();
     },
   });
 };

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

@@ -1,44 +0,0 @@
-import { logger } from 'app/logging/logger';
-import { serializeError } from 'serialize-error';
-import { sessionCanceled } from 'services/api/thunks/session';
-import { startAppListening } from '..';
-
-export const addSessionCanceledPendingListener = () => {
-  startAppListening({
-    actionCreator: sessionCanceled.pending,
-    effect: () => {
-      //
-    },
-  });
-};
-
-export const addSessionCanceledFulfilledListener = () => {
-  startAppListening({
-    actionCreator: sessionCanceled.fulfilled,
-    effect: (action) => {
-      const log = logger('session');
-      const { session_id } = action.meta.arg;
-      log.debug({ session_id }, `Session canceled (${session_id})`);
-    },
-  });
-};
-
-export const addSessionCanceledRejectedListener = () => {
-  startAppListening({
-    actionCreator: sessionCanceled.rejected,
-    effect: (action) => {
-      const log = logger('session');
-      const { session_id } = action.meta.arg;
-      if (action.payload) {
-        const { error } = action.payload;
-        log.error(
-          {
-            session_id,
-            error: serializeError(error),
-          },
-          `Problem canceling session`
-        );
-      }
-    },
-  });
-};

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

@@ -1,45 +0,0 @@
-import { logger } from 'app/logging/logger';
-import { parseify } from 'common/util/serialize';
-import { serializeError } from 'serialize-error';
-import { sessionCreated } from 'services/api/thunks/session';
-import { startAppListening } from '..';
-
-export const addSessionCreatedPendingListener = () => {
-  startAppListening({
-    actionCreator: sessionCreated.pending,
-    effect: () => {
-      //
-    },
-  });
-};
-
-export const addSessionCreatedFulfilledListener = () => {
-  startAppListening({
-    actionCreator: sessionCreated.fulfilled,
-    effect: (action) => {
-      const log = logger('session');
-      const session = action.payload;
-      log.debug(
-        { session: parseify(session) },
-        `Session created (${session.id})`
-      );
-    },
-  });
-};
-
-export const addSessionCreatedRejectedListener = () => {
-  startAppListening({
-    actionCreator: sessionCreated.rejected,
-    effect: (action) => {
-      const log = logger('session');
-      if (action.payload) {
-        const { error, status } = action.payload;
-        const graph = parseify(action.meta.arg);
-        log.error(
-          { graph, status, error: serializeError(error) },
-          `Problem creating session`
-        );
-      }
-    },
-  });
-};

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

@@ -1,44 +0,0 @@
-import { logger } from 'app/logging/logger';
-import { serializeError } from 'serialize-error';
-import { sessionInvoked } from 'services/api/thunks/session';
-import { startAppListening } from '..';
-
-export const addSessionInvokedPendingListener = () => {
-  startAppListening({
-    actionCreator: sessionInvoked.pending,
-    effect: () => {
-      //
-    },
-  });
-};
-
-export const addSessionInvokedFulfilledListener = () => {
-  startAppListening({
-    actionCreator: sessionInvoked.fulfilled,
-    effect: (action) => {
-      const log = logger('session');
-      const { session_id } = action.meta.arg;
-      log.debug({ session_id }, `Session invoked (${session_id})`);
-    },
-  });
-};
-
-export const addSessionInvokedRejectedListener = () => {
-  startAppListening({
-    actionCreator: sessionInvoked.rejected,
-    effect: (action) => {
-      const log = logger('session');
-      const { session_id } = action.meta.arg;
-      if (action.payload) {
-        const { error } = action.payload;
-        log.error(
-          {
-            session_id,
-            error: serializeError(error),
-          },
-          `Problem invoking session`
-        );
-      }
-    },
-  });
-};

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

@@ -81,9 +81,32 @@ export const addInvocationCompleteEventListener = () => {
 
           // If auto-switch is enabled, select the new image
           if (shouldAutoSwitch) {
-            // if auto-add is enabled, switch the board as the image comes in
-            dispatch(galleryViewChanged('images'));
-            dispatch(boardIdSelected(imageDTO.board_id ?? 'none'));
+            // if auto-add is enabled, switch the gallery view and board if needed as the image comes in
+            if (gallery.galleryView !== 'images') {
+              dispatch(galleryViewChanged('images'));
+            }
+
+            if (
+              imageDTO.board_id &&
+              imageDTO.board_id !== gallery.selectedBoardId
+            ) {
+              dispatch(
+                boardIdSelected({
+                  boardId: imageDTO.board_id,
+                  selectedImageName: imageDTO.image_name,
+                })
+              );
+            }
+
+            if (!imageDTO.board_id && gallery.selectedBoardId !== 'none') {
+              dispatch(
+                boardIdSelected({
+                  boardId: 'none',
+                  selectedImageName: imageDTO.image_name,
+                })
+              );
+            }
+
             dispatch(imageSelected(imageDTO));
           }
         }

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

@@ -35,6 +35,7 @@ export const addSocketQueueItemStatusChangedEventListener = () => {
         queueApi.util.invalidateTags([
           'CurrentSessionQueueItem',
           'NextSessionQueueItem',
+          'InvocationCacheStatus',
           { type: 'SessionQueueItem', id: item_id },
           { type: 'SessionQueueItemDTO', id: item_id },
           { type: 'BatchStatus', id: queue_batch_id },

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

@@ -1,54 +0,0 @@
-import { logger } from 'app/logging/logger';
-import { AppThunkDispatch } from 'app/store/store';
-import { parseify } from 'common/util/serialize';
-import { addToast } from 'features/system/store/systemSlice';
-import { t } from 'i18next';
-import { queueApi } from 'services/api/endpoints/queue';
-import { BatchConfig } from 'services/api/types';
-
-export const enqueueBatch = async (
-  batchConfig: BatchConfig,
-  dispatch: AppThunkDispatch
-) => {
-  const log = logger('session');
-  const { prepend } = batchConfig;
-
-  try {
-    const req = dispatch(
-      queueApi.endpoints.enqueueBatch.initiate(batchConfig, {
-        fixedCacheKey: 'enqueueBatch',
-      })
-    );
-    const enqueueResult = await req.unwrap();
-    req.reset();
-
-    dispatch(
-      queueApi.endpoints.resumeProcessor.initiate(undefined, {
-        fixedCacheKey: 'resumeProcessor',
-      })
-    );
-
-    log.debug({ enqueueResult: parseify(enqueueResult) }, 'Batch enqueued');
-    dispatch(
-      addToast({
-        title: t('queue.batchQueued'),
-        description: t('queue.batchQueuedDesc', {
-          item_count: enqueueResult.enqueued,
-          direction: prepend ? t('queue.front') : t('queue.back'),
-        }),
-        status: 'success',
-      })
-    );
-  } catch {
-    log.error(
-      { batchConfig: parseify(batchConfig) },
-      t('queue.batchFailedToQueue')
-    );
-    dispatch(
-      addToast({
-        title: t('queue.batchFailedToQueue'),
-        status: 'error',
-      })
-    );
-  }
-};

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

@@ -1,18 +1,9 @@
-import { chakra, ChakraProps } from '@chakra-ui/react';
+import { Box, ChakraProps } from '@chakra-ui/react';
 import { memo } from 'react';
 import { RgbaColorPicker } from 'react-colorful';
 import { ColorPickerBaseProps, RgbaColor } from 'react-colorful/dist/types';
 
-type IAIColorPickerProps = Omit<ColorPickerBaseProps<RgbaColor>, 'color'> &
-  ChakraProps & {
-    pickerColor: RgbaColor;
-    styleClass?: string;
-  };
-
-const ChakraRgbaColorPicker = chakra(RgbaColorPicker, {
-  baseStyle: { paddingInline: 4 },
-  shouldForwardProp: (prop) => !['pickerColor'].includes(prop),
-});
+type IAIColorPickerProps = ColorPickerBaseProps<RgbaColor>;
 
 const colorPickerStyles: NonNullable<ChakraProps['sx']> = {
   width: 6,
@@ -20,19 +11,17 @@ const colorPickerStyles: NonNullable<ChakraProps['sx']> = {
   borderColor: 'base.100',
 };
 
-const IAIColorPicker = (props: IAIColorPickerProps) => {
-  const { styleClass = '', ...rest } = props;
+const sx = {
+  '.react-colorful__hue-pointer': colorPickerStyles,
+  '.react-colorful__saturation-pointer': colorPickerStyles,
+  '.react-colorful__alpha-pointer': colorPickerStyles,
+};
 
+const IAIColorPicker = (props: IAIColorPickerProps) => {
   return (
-    <ChakraRgbaColorPicker
-      sx={{
-        '.react-colorful__hue-pointer': colorPickerStyles,
-        '.react-colorful__saturation-pointer': colorPickerStyles,
-        '.react-colorful__alpha-pointer': colorPickerStyles,
-      }}
-      className={styleClass}
-      {...rest}
-    />
+    <Box sx={sx}>
+      <RgbaColorPicker {...props} />
+    </Box>
   );
 };
 

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

@@ -139,6 +139,11 @@ const IAICanvas = () => {
   const { handleDragStart, handleDragMove, handleDragEnd } =
     useCanvasDragMove();
 
+  const handleContextMenu = useCallback(
+    (e: KonvaEventObject<MouseEvent>) => e.evt.preventDefault(),
+    []
+  );
+
   useEffect(() => {
     if (!containerRef.current) {
       return;
@@ -205,9 +210,7 @@ const IAICanvas = () => {
           onDragStart={handleDragStart}
           onDragMove={handleDragMove}
           onDragEnd={handleDragEnd}
-          onContextMenu={(e: KonvaEventObject<MouseEvent>) =>
-            e.evt.preventDefault()
-          }
+          onContextMenu={handleContextMenu}
           onWheel={handleWheel}
           draggable={(tool === 'move' || isStaging) && !isModifyingBoundingBox}
         >
@@ -223,7 +226,11 @@ const IAICanvas = () => {
           >
             <IAICanvasObjectRenderer />
           </Layer>
-          <Layer id="mask" visible={isMaskEnabled} listening={false}>
+          <Layer
+            id="mask"
+            visible={isMaskEnabled && !isStaging}
+            listening={false}
+          >
             <IAICanvasMaskLines visible={true} listening={false} />
             <IAICanvasMaskCompositer listening={false} />
           </Layer>

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

@@ -1,26 +1,27 @@
 import { skipToken } from '@reduxjs/toolkit/dist/query';
-import { Image, Rect } from 'react-konva';
+import { memo } from 'react';
+import { Image } from 'react-konva';
+import { $authToken } from 'services/api/client';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import useImage from 'use-image';
 import { CanvasImage } from '../store/canvasTypes';
-import { $authToken } from 'services/api/client';
-import { memo } from 'react';
+import IAICanvasImageErrorFallback from './IAICanvasImageErrorFallback';
 
 type IAICanvasImageProps = {
   canvasImage: CanvasImage;
 };
 const IAICanvasImage = (props: IAICanvasImageProps) => {
-  const { width, height, x, y, imageName } = props.canvasImage;
+  const { x, y, imageName } = props.canvasImage;
   const { currentData: imageDTO, isError } = useGetImageDTOQuery(
     imageName ?? skipToken
   );
-  const [image] = useImage(
+  const [image, status] = useImage(
     imageDTO?.image_url ?? '',
     $authToken.get() ? 'use-credentials' : 'anonymous'
   );
 
-  if (isError) {
-    return <Rect x={x} y={y} width={width} height={height} fill="red" />;
+  if (isError || status === 'failed') {
+    return <IAICanvasImageErrorFallback canvasImage={props.canvasImage} />;
   }
 
   return <Image x={x} y={y} image={image} listening={false} />;

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

@@ -0,0 +1,44 @@
+import { useColorModeValue, useToken } from '@chakra-ui/react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Group, Rect, Text } from 'react-konva';
+import { CanvasImage } from '../store/canvasTypes';
+
+type IAICanvasImageErrorFallbackProps = {
+  canvasImage: CanvasImage;
+};
+const IAICanvasImageErrorFallback = ({
+  canvasImage,
+}: IAICanvasImageErrorFallbackProps) => {
+  const [errorColorLight, errorColorDark, fontColorLight, fontColorDark] =
+    useToken('colors', ['base.400', 'base.500', 'base.700', 'base.900']);
+  const errorColor = useColorModeValue(errorColorLight, errorColorDark);
+  const fontColor = useColorModeValue(fontColorLight, fontColorDark);
+  const { t } = useTranslation();
+  return (
+    <Group>
+      <Rect
+        x={canvasImage.x}
+        y={canvasImage.y}
+        width={canvasImage.width}
+        height={canvasImage.height}
+        fill={errorColor}
+      />
+      <Text
+        x={canvasImage.x}
+        y={canvasImage.y}
+        width={canvasImage.width}
+        height={canvasImage.height}
+        align="center"
+        verticalAlign="middle"
+        fontFamily='"Inter Variable", sans-serif'
+        fontSize={canvasImage.width / 16}
+        fontStyle="600"
+        text={t('common.imageFailedToLoad')}
+        fill={fontColor}
+      />
+    </Group>
+  );
+};
+
+export default memo(IAICanvasImageErrorFallback);

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

@@ -3,10 +3,9 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { canvasSelector } from 'features/canvas/store/canvasSelectors';
 import { GroupConfig } from 'konva/lib/Group';
 import { isEqual } from 'lodash-es';
-
+import { memo } from 'react';
 import { Group, Rect } from 'react-konva';
 import IAICanvasImage from './IAICanvasImage';
-import { memo } from 'react';
 
 const selector = createSelector(
   [canvasSelector],
@@ -15,11 +14,11 @@ const selector = createSelector(
       layerState,
       shouldShowStagingImage,
       shouldShowStagingOutline,
-      boundingBoxCoordinates: { x, y },
-      boundingBoxDimensions: { width, height },
+      boundingBoxCoordinates: stageBoundingBoxCoordinates,
+      boundingBoxDimensions: stageBoundingBoxDimensions,
     } = canvas;
 
-    const { selectedImageIndex, images } = layerState.stagingArea;
+    const { selectedImageIndex, images, boundingBox } = layerState.stagingArea;
 
     return {
       currentStagingAreaImage:
@@ -30,10 +29,10 @@ const selector = createSelector(
       isOnLastImage: selectedImageIndex === images.length - 1,
       shouldShowStagingImage,
       shouldShowStagingOutline,
-      x,
-      y,
-      width,
-      height,
+      x: boundingBox?.x ?? stageBoundingBoxCoordinates.x,
+      y: boundingBox?.y ?? stageBoundingBoxCoordinates.y,
+      width: boundingBox?.width ?? stageBoundingBoxDimensions.width,
+      height: boundingBox?.height ?? stageBoundingBoxDimensions.height,
     };
   },
   {

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

@@ -14,6 +14,7 @@ import {
 
 import { skipToken } from '@reduxjs/toolkit/dist/query';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
+import IAIButton from 'common/components/IAIButton';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
@@ -23,8 +24,8 @@ import {
   FaCheck,
   FaEye,
   FaEyeSlash,
-  FaPlus,
   FaSave,
+  FaTimes,
 } from 'react-icons/fa';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import { stagingAreaImageSaved } from '../store/actions';
@@ -41,10 +42,10 @@ const selector = createSelector(
     } = canvas;
 
     return {
+      currentIndex: selectedImageIndex,
+      total: images.length,
       currentStagingAreaImage:
         images.length > 0 ? images[selectedImageIndex] : undefined,
-      isOnFirstImage: selectedImageIndex === 0,
-      isOnLastImage: selectedImageIndex === images.length - 1,
       shouldShowStagingImage,
       shouldShowStagingOutline,
     };
@@ -55,10 +56,10 @@ const selector = createSelector(
 const IAICanvasStagingAreaToolbar = () => {
   const dispatch = useAppDispatch();
   const {
-    isOnFirstImage,
-    isOnLastImage,
     currentStagingAreaImage,
     shouldShowStagingImage,
+    currentIndex,
+    total,
   } = useAppSelector(selector);
 
   const { t } = useTranslation();
@@ -71,39 +72,6 @@ const IAICanvasStagingAreaToolbar = () => {
     dispatch(setShouldShowStagingOutline(false));
   }, [dispatch]);
 
-  useHotkeys(
-    ['left'],
-    () => {
-      handlePrevImage();
-    },
-    {
-      enabled: () => true,
-      preventDefault: true,
-    }
-  );
-
-  useHotkeys(
-    ['right'],
-    () => {
-      handleNextImage();
-    },
-    {
-      enabled: () => true,
-      preventDefault: true,
-    }
-  );
-
-  useHotkeys(
-    ['enter'],
-    () => {
-      handleAccept();
-    },
-    {
-      enabled: () => true,
-      preventDefault: true,
-    }
-  );
-
   const handlePrevImage = useCallback(
     () => dispatch(prevStagingAreaImage()),
     [dispatch]
@@ -119,10 +87,45 @@ const IAICanvasStagingAreaToolbar = () => {
     [dispatch]
   );
 
+  useHotkeys(['left'], handlePrevImage, {
+    enabled: () => true,
+    preventDefault: true,
+  });
+
+  useHotkeys(['right'], handleNextImage, {
+    enabled: () => true,
+    preventDefault: true,
+  });
+
+  useHotkeys(['enter'], () => handleAccept, {
+    enabled: () => true,
+    preventDefault: true,
+  });
+
   const { data: imageDTO } = useGetImageDTOQuery(
     currentStagingAreaImage?.imageName ?? skipToken
   );
 
+  const handleToggleShouldShowStagingImage = useCallback(() => {
+    dispatch(setShouldShowStagingImage(!shouldShowStagingImage));
+  }, [dispatch, shouldShowStagingImage]);
+
+  const handleSaveToGallery = useCallback(() => {
+    if (!imageDTO) {
+      return;
+    }
+
+    dispatch(
+      stagingAreaImageSaved({
+        imageDTO,
+      })
+    );
+  }, [dispatch, imageDTO]);
+
+  const handleDiscardStagingArea = useCallback(() => {
+    dispatch(discardStagedImages());
+  }, [dispatch]);
+
   if (!currentStagingAreaImage) {
     return null;
   }
@@ -131,11 +134,12 @@ const IAICanvasStagingAreaToolbar = () => {
     <Flex
       pos="absolute"
       bottom={4}
+      gap={2}
       w="100%"
       align="center"
       justify="center"
-      onMouseOver={handleMouseOver}
-      onMouseOut={handleMouseOut}
+      onMouseEnter={handleMouseOver}
+      onMouseLeave={handleMouseOut}
     >
       <ButtonGroup isAttached borderRadius="base" shadow="dark-lg">
         <IAIIconButton
@@ -144,16 +148,29 @@ const IAICanvasStagingAreaToolbar = () => {
           icon={<FaArrowLeft />}
           onClick={handlePrevImage}
           colorScheme="accent"
-          isDisabled={isOnFirstImage}
+          isDisabled={!shouldShowStagingImage}
         />
+        <IAIButton
+          colorScheme="accent"
+          pointerEvents="none"
+          isDisabled={!shouldShowStagingImage}
+          sx={{
+            background: 'base.600',
+            _dark: {
+              background: 'base.800',
+            },
+          }}
+        >{`${currentIndex + 1}/${total}`}</IAIButton>
         <IAIIconButton
           tooltip={`${t('unifiedCanvas.next')} (Right)`}
           aria-label={`${t('unifiedCanvas.next')} (Right)`}
           icon={<FaArrowRight />}
           onClick={handleNextImage}
           colorScheme="accent"
-          isDisabled={isOnLastImage}
+          isDisabled={!shouldShowStagingImage}
         />
+      </ButtonGroup>
+      <ButtonGroup isAttached borderRadius="base" shadow="dark-lg">
         <IAIIconButton
           tooltip={`${t('unifiedCanvas.accept')} (Enter)`}
           aria-label={`${t('unifiedCanvas.accept')} (Enter)`}
@@ -162,13 +179,19 @@ const IAICanvasStagingAreaToolbar = () => {
           colorScheme="accent"
         />
         <IAIIconButton
-          tooltip={t('unifiedCanvas.showHide')}
-          aria-label={t('unifiedCanvas.showHide')}
+          tooltip={
+            shouldShowStagingImage
+              ? t('unifiedCanvas.showResultsOn')
+              : t('unifiedCanvas.showResultsOff')
+          }
+          aria-label={
+            shouldShowStagingImage
+              ? t('unifiedCanvas.showResultsOn')
+              : t('unifiedCanvas.showResultsOff')
+          }
           data-alert={!shouldShowStagingImage}
           icon={shouldShowStagingImage ? <FaEye /> : <FaEyeSlash />}
-          onClick={() =>
-            dispatch(setShouldShowStagingImage(!shouldShowStagingImage))
-          }
+          onClick={handleToggleShouldShowStagingImage}
           colorScheme="accent"
         />
         <IAIIconButton
@@ -176,24 +199,14 @@ const IAICanvasStagingAreaToolbar = () => {
           aria-label={t('unifiedCanvas.saveToGallery')}
           isDisabled={!imageDTO || !imageDTO.is_intermediate}
           icon={<FaSave />}
-          onClick={() => {
-            if (!imageDTO) {
-              return;
-            }
-
-            dispatch(
-              stagingAreaImageSaved({
-                imageDTO,
-              })
-            );
-          }}
+          onClick={handleSaveToGallery}
           colorScheme="accent"
         />
         <IAIIconButton
           tooltip={t('unifiedCanvas.discardAll')}
           aria-label={t('unifiedCanvas.discardAll')}
-          icon={<FaPlus style={{ transform: 'rotate(45deg)' }} />}
-          onClick={() => dispatch(discardStagedImages())}
+          icon={<FaTimes />}
+          onClick={handleDiscardStagingArea}
           colorScheme="error"
           fontSize={20}
         />

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

@@ -213,45 +213,45 @@ const IAICanvasBoundingBox = (props: IAICanvasBoundingBoxPreviewProps) => {
     [scaledStep]
   );
 
-  const handleStartedTransforming = () => {
+  const handleStartedTransforming = useCallback(() => {
     dispatch(setIsTransformingBoundingBox(true));
-  };
+  }, [dispatch]);
 
-  const handleEndedTransforming = () => {
+  const handleEndedTransforming = useCallback(() => {
     dispatch(setIsTransformingBoundingBox(false));
     dispatch(setIsMovingBoundingBox(false));
     dispatch(setIsMouseOverBoundingBox(false));
     setIsMouseOverBoundingBoxOutline(false);
-  };
+  }, [dispatch]);
 
-  const handleStartedMoving = () => {
+  const handleStartedMoving = useCallback(() => {
     dispatch(setIsMovingBoundingBox(true));
-  };
+  }, [dispatch]);
 
-  const handleEndedModifying = () => {
+  const handleEndedModifying = useCallback(() => {
     dispatch(setIsTransformingBoundingBox(false));
     dispatch(setIsMovingBoundingBox(false));
     dispatch(setIsMouseOverBoundingBox(false));
     setIsMouseOverBoundingBoxOutline(false);
-  };
+  }, [dispatch]);
 
-  const handleMouseOver = () => {
+  const handleMouseOver = useCallback(() => {
     setIsMouseOverBoundingBoxOutline(true);
-  };
+  }, []);
 
-  const handleMouseOut = () => {
+  const handleMouseOut = useCallback(() => {
     !isTransformingBoundingBox &&
       !isMovingBoundingBox &&
       setIsMouseOverBoundingBoxOutline(false);
-  };
+  }, [isMovingBoundingBox, isTransformingBoundingBox]);
 
-  const handleMouseEnterBoundingBox = () => {
+  const handleMouseEnterBoundingBox = useCallback(() => {
     dispatch(setIsMouseOverBoundingBox(true));
-  };
+  }, [dispatch]);
 
-  const handleMouseLeaveBoundingBox = () => {
+  const handleMouseLeaveBoundingBox = useCallback(() => {
     dispatch(setIsMouseOverBoundingBox(false));
-  };
+  }, [dispatch]);
 
   return (
     <Group {...rest}>

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

@@ -1,4 +1,4 @@
-import { ButtonGroup, Flex } from '@chakra-ui/react';
+import { Box, ButtonGroup, Flex } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import IAIButton from 'common/components/IAIButton';
@@ -135,11 +135,12 @@ const IAICanvasMaskOptions = () => {
             dispatch(setShouldPreserveMaskedArea(e.target.checked))
           }
         />
-        <IAIColorPicker
-          sx={{ paddingTop: 2, paddingBottom: 2 }}
-          pickerColor={maskColor}
-          onChange={(newColor) => dispatch(setMaskColor(newColor))}
-        />
+        <Box sx={{ paddingTop: 2, paddingBottom: 2 }}>
+          <IAIColorPicker
+            color={maskColor}
+            onChange={(newColor) => dispatch(setMaskColor(newColor))}
+          />
+        </Box>
         <IAIButton size="sm" leftIcon={<FaSave />} onClick={handleSaveMask}>
           Save Mask
         </IAIButton>

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

@@ -1,4 +1,4 @@
-import { ButtonGroup, Flex } from '@chakra-ui/react';
+import { ButtonGroup, Flex, Box } from '@chakra-ui/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
@@ -237,15 +237,18 @@ const IAICanvasToolChooserOptions = () => {
               sliderNumberInputProps={{ max: 500 }}
             />
           </Flex>
-          <IAIColorPicker
+          <Box
             sx={{
               width: '100%',
               paddingTop: 2,
               paddingBottom: 2,
             }}
-            pickerColor={brushColor}
-            onChange={(newColor) => dispatch(setBrushColor(newColor))}
-          />
+          >
+            <IAIColorPicker
+              color={brushColor}
+              onChange={(newColor) => dispatch(setBrushColor(newColor))}
+            />
+          </Box>
         </Flex>
       </IAIPopover>
     </ButtonGroup>

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

@@ -6,7 +6,7 @@ export const canvasSelector = (state: RootState): CanvasState => state.canvas;
 
 export const isStagingSelector = createSelector(
   [stateSelector],
-  ({ canvas }) => canvas.layerState.stagingArea.images.length > 0
+  ({ canvas }) => canvas.batchIds.length > 0
 );
 
 export const initialCanvasImageSelector = (

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

@@ -8,7 +8,6 @@ import { setAspectRatio } from 'features/parameters/store/generationSlice';
 import { IRect, Vector2d } from 'konva/lib/types';
 import { clamp, cloneDeep } from 'lodash-es';
 import { RgbaColor } from 'react-colorful';
-import { sessionCanceled } from 'services/api/thunks/session';
 import { ImageDTO } from 'services/api/types';
 import calculateCoordinates from '../util/calculateCoordinates';
 import calculateScale from '../util/calculateScale';
@@ -187,7 +186,7 @@ export const canvasSlice = createSlice({
       state.pastLayerStates.push(cloneDeep(state.layerState));
 
       state.layerState = {
-        ...initialLayerState,
+        ...cloneDeep(initialLayerState),
         objects: [
           {
             kind: 'image',
@@ -201,6 +200,7 @@ export const canvasSlice = createSlice({
         ],
       };
       state.futureLayerStates = [];
+      state.batchIds = [];
 
       const newScale = calculateScale(
         stageDimensions.width,
@@ -350,11 +350,14 @@ export const canvasSlice = createSlice({
         state.pastLayerStates.shift();
       }
 
-      state.layerState.stagingArea = { ...initialLayerState.stagingArea };
+      state.layerState.stagingArea = cloneDeep(
+        cloneDeep(initialLayerState)
+      ).stagingArea;
 
       state.futureLayerStates = [];
       state.shouldShowStagingOutline = true;
-      state.shouldShowStagingOutline = true;
+      state.shouldShowStagingImage = true;
+      state.batchIds = [];
     },
     addFillRect: (state) => {
       const { boundingBoxCoordinates, boundingBoxDimensions, brushColor } =
@@ -491,8 +494,9 @@ export const canvasSlice = createSlice({
     resetCanvas: (state) => {
       state.pastLayerStates.push(cloneDeep(state.layerState));
 
-      state.layerState = initialLayerState;
+      state.layerState = cloneDeep(initialLayerState);
       state.futureLayerStates = [];
+      state.batchIds = [];
     },
     canvasResized: (
       state,
@@ -617,25 +621,22 @@ export const canvasSlice = createSlice({
         return;
       }
 
-      const currentIndex = state.layerState.stagingArea.selectedImageIndex;
-      const length = state.layerState.stagingArea.images.length;
+      const nextIndex = state.layerState.stagingArea.selectedImageIndex + 1;
+      const lastIndex = state.layerState.stagingArea.images.length - 1;
 
-      state.layerState.stagingArea.selectedImageIndex = Math.min(
-        currentIndex + 1,
-        length - 1
-      );
+      state.layerState.stagingArea.selectedImageIndex =
+        nextIndex > lastIndex ? 0 : nextIndex;
     },
     prevStagingAreaImage: (state) => {
       if (!state.layerState.stagingArea.images.length) {
         return;
       }
 
-      const currentIndex = state.layerState.stagingArea.selectedImageIndex;
+      const prevIndex = state.layerState.stagingArea.selectedImageIndex - 1;
+      const lastIndex = state.layerState.stagingArea.images.length - 1;
 
-      state.layerState.stagingArea.selectedImageIndex = Math.max(
-        currentIndex - 1,
-        0
-      );
+      state.layerState.stagingArea.selectedImageIndex =
+        prevIndex < 0 ? lastIndex : prevIndex;
     },
     commitStagingAreaImage: (state) => {
       if (!state.layerState.stagingArea.images.length) {
@@ -657,13 +658,12 @@ export const canvasSlice = createSlice({
           ...imageToCommit,
         });
       }
-      state.layerState.stagingArea = {
-        ...initialLayerState.stagingArea,
-      };
+      state.layerState.stagingArea = cloneDeep(initialLayerState).stagingArea;
 
       state.futureLayerStates = [];
       state.shouldShowStagingOutline = true;
       state.shouldShowStagingImage = true;
+      state.batchIds = [];
     },
     fitBoundingBoxToStage: (state) => {
       const {
@@ -786,11 +786,6 @@ export const canvasSlice = createSlice({
     },
   },
   extraReducers: (builder) => {
-    builder.addCase(sessionCanceled.pending, (state) => {
-      if (!state.layerState.stagingArea.images.length) {
-        state.layerState.stagingArea = initialLayerState.stagingArea;
-      }
-    });
     builder.addCase(setAspectRatio, (state, action) => {
       const ratio = action.payload;
       if (ratio) {

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

@@ -1,11 +1,14 @@
-import { getCanvasBaseLayer } from './konvaInstanceProvider';
 import { RootState } from 'app/store/store';
+import { getCanvasBaseLayer } from './konvaInstanceProvider';
 import { konvaNodeToBlob } from './konvaNodeToBlob';
 
 /**
  * Get the canvas base layer blob, with or without bounding box according to `shouldCropToBoundingBoxOnSave`
  */
-export const getBaseLayerBlob = async (state: RootState) => {
+export const getBaseLayerBlob = async (
+  state: RootState,
+  alwaysUseBoundingBox: boolean = false
+) => {
   const canvasBaseLayer = getCanvasBaseLayer();
 
   if (!canvasBaseLayer) {
@@ -24,14 +27,15 @@ export const getBaseLayerBlob = async (state: RootState) => {
 
   const absPos = clonedBaseLayer.getAbsolutePosition();
 
-  const boundingBox = shouldCropToBoundingBoxOnSave
-    ? {
-        x: boundingBoxCoordinates.x + absPos.x,
-        y: boundingBoxCoordinates.y + absPos.y,
-        width: boundingBoxDimensions.width,
-        height: boundingBoxDimensions.height,
-      }
-    : clonedBaseLayer.getClientRect();
+  const boundingBox =
+    shouldCropToBoundingBoxOnSave || alwaysUseBoundingBox
+      ? {
+          x: boundingBoxCoordinates.x + absPos.x,
+          y: boundingBoxCoordinates.y + absPos.y,
+          width: boundingBoxDimensions.width,
+          height: boundingBoxDimensions.height,
+        }
+      : clonedBaseLayer.getClientRect();
 
   return konvaNodeToBlob(clonedBaseLayer, boundingBox);
 };

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

@@ -6,7 +6,6 @@ import {
 import { cloneDeep, forEach } from 'lodash-es';
 import { imagesApi } from 'services/api/endpoints/images';
 import { components } from 'services/api/schema';
-import { isAnySessionRejected } from 'services/api/thunks/session';
 import { ImageDTO } from 'services/api/types';
 import { appSocketInvocationError } from 'services/events/actions';
 import { controlNetImageProcessed } from './actions';
@@ -99,6 +98,9 @@ export const controlNetSlice = createSlice({
     isControlNetEnabledToggled: (state) => {
       state.isEnabled = !state.isEnabled;
     },
+    controlNetEnabled: (state) => {
+      state.isEnabled = true;
+    },
     controlNetAdded: (
       state,
       action: PayloadAction<{
@@ -112,6 +114,12 @@ export const controlNetSlice = createSlice({
         controlNetId,
       };
     },
+    controlNetRecalled: (state, action: PayloadAction<ControlNetConfig>) => {
+      const controlNet = action.payload;
+      state.controlNets[controlNet.controlNetId] = {
+        ...controlNet,
+      };
+    },
     controlNetDuplicated: (
       state,
       action: PayloadAction<{
@@ -418,10 +426,6 @@ export const controlNetSlice = createSlice({
       state.pendingControlImages = [];
     });
 
-    builder.addMatcher(isAnySessionRejected, (state) => {
-      state.pendingControlImages = [];
-    });
-
     builder.addMatcher(
       imagesApi.endpoints.deleteImage.matchFulfilled,
       (state, action) => {
@@ -444,7 +448,9 @@ export const controlNetSlice = createSlice({
 
 export const {
   isControlNetEnabledToggled,
+  controlNetEnabled,
   controlNetAdded,
+  controlNetRecalled,
   controlNetDuplicated,
   controlNetAddedFromImage,
   controlNetRemoved,

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/GalleryBoard.tsx

@@ -93,7 +93,7 @@ const GalleryBoard = ({
   const [localBoardName, setLocalBoardName] = useState(board_name);
 
   const handleSelectBoard = useCallback(() => {
-    dispatch(boardIdSelected(board_id));
+    dispatch(boardIdSelected({ boardId: board_id }));
     if (autoAssignBoardOnClick) {
       dispatch(autoAddBoardIdChanged(board_id));
     }

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/NoBoardBoard.tsx

@@ -34,7 +34,7 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
   const { autoAddBoardId, autoAssignBoardOnClick } = useAppSelector(selector);
   const boardName = useBoardName('none');
   const handleSelectBoard = useCallback(() => {
-    dispatch(boardIdSelected('none'));
+    dispatch(boardIdSelected({ boardId: 'none' }));
     if (autoAssignBoardOnClick) {
       dispatch(autoAddBoardIdChanged('none'));
     }

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/SystemBoardButton.tsx

@@ -32,7 +32,7 @@ const SystemBoardButton = ({ board_id }: Props) => {
   const boardName = useBoardName(board_id);
 
   const handleClick = useCallback(() => {
-    dispatch(boardIdSelected(board_id));
+    dispatch(boardIdSelected({ boardId: board_id }));
   }, [board_id, dispatch]);
 
   return (

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

@@ -1,8 +1,15 @@
-import { CoreMetadata, LoRAMetadataItem } from 'features/nodes/types/types';
+import {
+  ControlNetMetadataItem,
+  CoreMetadata,
+  LoRAMetadataItem,
+} from 'features/nodes/types/types';
 import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
-import { memo, useCallback } from 'react';
+import { memo, useMemo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { isValidLoRAModel } from '../../../parameters/types/parameterSchemas';
+import {
+  isValidControlNetModel,
+  isValidLoRAModel,
+} from '../../../parameters/types/parameterSchemas';
 import ImageMetadataItem from './ImageMetadataItem';
 
 type Props = {
@@ -26,6 +33,7 @@ const ImageMetadataActions = (props: Props) => {
     recallHeight,
     recallStrength,
     recallLoRA,
+    recallControlNet,
   } = useRecallParameters();
 
   const handleRecallPositivePrompt = useCallback(() => {
@@ -75,6 +83,21 @@ const ImageMetadataActions = (props: Props) => {
     [recallLoRA]
   );
 
+  const handleRecallControlNet = useCallback(
+    (controlnet: ControlNetMetadataItem) => {
+      recallControlNet(controlnet);
+    },
+    [recallControlNet]
+  );
+
+  const validControlNets: ControlNetMetadataItem[] = useMemo(() => {
+    return metadata?.controlnets
+      ? metadata.controlnets.filter((controlnet) =>
+          isValidControlNetModel(controlnet.control_model)
+        )
+      : [];
+  }, [metadata?.controlnets]);
+
   if (!metadata || Object.keys(metadata).length === 0) {
     return null;
   }
@@ -180,6 +203,14 @@ const ImageMetadataActions = (props: Props) => {
             );
           }
         })}
+      {validControlNets.map((controlnet, index) => (
+        <ImageMetadataItem
+          key={index}
+          label="ControlNet"
+          value={`${controlnet.control_model?.model_name} - ${controlnet.control_weight}`}
+          onClick={() => handleRecallControlNet(controlnet)}
+        />
+      ))}
     </>
   );
 };

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -35,8 +35,11 @@ export const gallerySlice = createSlice({
     autoAssignBoardOnClickChanged: (state, action: PayloadAction<boolean>) => {
       state.autoAssignBoardOnClick = action.payload;
     },
-    boardIdSelected: (state, action: PayloadAction<BoardId>) => {
-      state.selectedBoardId = action.payload;
+    boardIdSelected: (
+      state,
+      action: PayloadAction<{ boardId: BoardId; selectedImageName?: string }>
+    ) => {
+      state.selectedBoardId = action.payload.boardId;
       state.galleryView = 'images';
     },
     autoAddBoardIdChanged: (state, action: PayloadAction<BoardId>) => {

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

@@ -12,6 +12,7 @@ import {
   OnConnect,
   OnConnectEnd,
   OnConnectStart,
+  OnEdgeUpdateFunc,
   OnEdgesChange,
   OnEdgesDelete,
   OnInit,
@@ -21,6 +22,7 @@ import {
   OnSelectionChangeFunc,
   ProOptions,
   ReactFlow,
+  ReactFlowProps,
   XYPosition,
 } from 'reactflow';
 import { useIsValidConnection } from '../../hooks/useIsValidConnection';
@@ -28,6 +30,8 @@ import {
   connectionEnded,
   connectionMade,
   connectionStarted,
+  edgeAdded,
+  edgeDeleted,
   edgesChanged,
   edgesDeleted,
   nodesChanged,
@@ -167,6 +171,63 @@ export const Flow = () => {
     }
   }, []);
 
+  // #region Updatable Edges
+
+  /**
+   * Adapted from https://reactflow.dev/docs/examples/edges/updatable-edge/
+   * and https://reactflow.dev/docs/examples/edges/delete-edge-on-drop/
+   *
+   * - Edges can be dragged from one handle to another.
+   * - If the user drags the edge away from the node and drops it, delete the edge.
+   * - Do not delete the edge if the cursor didn't move (resolves annoying behaviour
+   *   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) => {
+        // update mouse event
+        edgeUpdateMouseEvent.current = e;
+        // always delete the edge when starting an updated
+        dispatch(edgeDeleted(edge.id));
+      },
+      [dispatch]
+    );
+
+  const onEdgeUpdate: OnEdgeUpdateFunc = useCallback(
+    (_oldEdge, newConnection) => {
+      // instead of updating the edge (we deleted it earlier), we instead create
+      // a new one.
+      dispatch(connectionMade(newConnection));
+    },
+    [dispatch]
+  );
+
+  const onEdgeUpdateEnd: NonNullable<ReactFlowProps['onEdgeUpdateEnd']> =
+    useCallback(
+      (e, edge, _handleType) => {
+        // Handle the case where user begins a drag but didn't move the cursor -
+        // bc we deleted the edge, 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));
+        }
+        // reset mouse event
+        edgeUpdateMouseEvent.current = undefined;
+      },
+      [dispatch]
+    );
+
+  // #endregion
+
   useHotkeys(['Ctrl+c', 'Meta+c'], (e) => {
     e.preventDefault();
     dispatch(selectionCopied());
@@ -196,6 +257,9 @@ export const Flow = () => {
       onNodesChange={onNodesChange}
       onEdgesChange={onEdgesChange}
       onEdgesDelete={onEdgesDelete}
+      onEdgeUpdate={onEdgeUpdate}
+      onEdgeUpdateStart={onEdgeUpdateStart}
+      onEdgeUpdateEnd={onEdgeUpdateEnd}
       onNodesDelete={onNodesDelete}
       onConnectStart={onConnectStart}
       onConnect={onConnect}

invokeai/frontend/web/src/features/nodes/hooks/useIsValidConnection.ts

@@ -53,13 +53,12 @@ export const useIsValidConnection = () => {
       }
 
       if (
-        edges
-          .filter((edge) => {
-            return edge.target === target && edge.targetHandle === targetHandle;
-          })
-          .find((edge) => {
-            edge.source === source && edge.sourceHandle === sourceHandle;
-          })
+        edges.find((edge) => {
+          edge.target === target &&
+            edge.targetHandle === targetHandle &&
+            edge.source === source &&
+            edge.sourceHandle === sourceHandle;
+        })
       ) {
         // We already have a connection from this source to this target
         return false;

invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts

@@ -15,6 +15,7 @@ import {
   NodeChange,
   OnConnectStartParams,
   SelectionMode,
+  updateEdge,
   Viewport,
   XYPosition,
 } from 'reactflow';
@@ -182,6 +183,16 @@ const nodesSlice = createSlice({
     edgesChanged: (state, action: PayloadAction<EdgeChange[]>) => {
       state.edges = applyEdgeChanges(action.payload, state.edges);
     },
+    edgeAdded: (state, action: PayloadAction<Edge>) => {
+      state.edges = addEdge(action.payload, state.edges);
+    },
+    edgeUpdated: (
+      state,
+      action: PayloadAction<{ oldEdge: Edge; newConnection: Connection }>
+    ) => {
+      const { oldEdge, newConnection } = action.payload;
+      state.edges = updateEdge(oldEdge, newConnection, state.edges);
+    },
     connectionStarted: (state, action: PayloadAction<OnConnectStartParams>) => {
       state.connectionStartParams = action.payload;
       const { nodeId, handleId, handleType } = action.payload;
@@ -366,6 +377,7 @@ const nodesSlice = createSlice({
                 target: edge.target,
                 type: 'collapsed',
                 data: { count: 1 },
+                updatable: false,
               });
             }
           }
@@ -388,6 +400,7 @@ const nodesSlice = createSlice({
                 target: edge.target,
                 type: 'collapsed',
                 data: { count: 1 },
+                updatable: false,
               });
             }
           }
@@ -400,6 +413,9 @@ const nodesSlice = createSlice({
         }
       }
     },
+    edgeDeleted: (state, action: PayloadAction<string>) => {
+      state.edges = state.edges.filter((e) => e.id !== action.payload);
+    },
     edgesDeleted: (state, action: PayloadAction<Edge[]>) => {
       const edges = action.payload;
       const collapsedEdges = edges.filter((e) => e.type === 'collapsed');
@@ -890,69 +906,72 @@ const nodesSlice = createSlice({
 });
 
 export const {
-  nodesChanged,
-  edgesChanged,
-  nodeAdded,
-  nodesDeleted,
+  addNodePopoverClosed,
+  addNodePopoverOpened,
+  addNodePopoverToggled,
+  connectionEnded,
   connectionMade,
   connectionStarted,
-  connectionEnded,
-  shouldShowFieldTypeLegendChanged,
-  shouldShowMinimapPanelChanged,
-  nodeTemplatesBuilt,
-  nodeEditorReset,
-  imageCollectionFieldValueChanged,
-  fieldStringValueChanged,
-  fieldNumberValueChanged,
+  edgeDeleted,
+  edgesChanged,
+  edgesDeleted,
+  edgeUpdated,
   fieldBoardValueChanged,
   fieldBooleanValueChanged,
-  fieldImageValueChanged,
   fieldColorValueChanged,
-  fieldMainModelValueChanged,
-  fieldVaeModelValueChanged,
-  fieldLoRAModelValueChanged,
-  fieldEnumModelValueChanged,
   fieldControlNetModelValueChanged,
+  fieldEnumModelValueChanged,
+  fieldImageValueChanged,
   fieldIPAdapterModelValueChanged,
+  fieldLabelChanged,
+  fieldLoRAModelValueChanged,
+  fieldMainModelValueChanged,
+  fieldNumberValueChanged,
   fieldRefinerModelValueChanged,
   fieldSchedulerValueChanged,
+  fieldStringValueChanged,
+  fieldVaeModelValueChanged,
+  imageCollectionFieldValueChanged,
+  mouseOverFieldChanged,
+  mouseOverNodeChanged,
+  nodeAdded,
+  nodeEditorReset,
+  nodeEmbedWorkflowChanged,
+  nodeExclusivelySelected,
+  nodeIsIntermediateChanged,
   nodeIsOpenChanged,
   nodeLabelChanged,
   nodeNotesChanged,
-  edgesDeleted,
-  shouldValidateGraphChanged,
-  shouldAnimateEdgesChanged,
   nodeOpacityChanged,
-  shouldSnapToGridChanged,
-  shouldColorEdgesChanged,
-  selectedNodesChanged,
-  selectedEdgesChanged,
-  workflowNameChanged,
-  workflowDescriptionChanged,
-  workflowTagsChanged,
-  workflowAuthorChanged,
-  workflowNotesChanged,
-  workflowVersionChanged,
-  workflowContactChanged,
-  workflowLoaded,
+  nodesChanged,
+  nodesDeleted,
+  nodeTemplatesBuilt,
+  nodeUseCacheChanged,
   notesNodeValueChanged,
+  selectedAll,
+  selectedEdgesChanged,
+  selectedNodesChanged,
+  selectionCopied,
+  selectionModeChanged,
+  selectionPasted,
+  shouldAnimateEdgesChanged,
+  shouldColorEdgesChanged,
+  shouldShowFieldTypeLegendChanged,
+  shouldShowMinimapPanelChanged,
+  shouldSnapToGridChanged,
+  shouldValidateGraphChanged,
+  viewportChanged,
+  workflowAuthorChanged,
+  workflowContactChanged,
+  workflowDescriptionChanged,
   workflowExposedFieldAdded,
   workflowExposedFieldRemoved,
-  fieldLabelChanged,
-  viewportChanged,
-  mouseOverFieldChanged,
-  selectionCopied,
-  selectionPasted,
-  selectedAll,
-  addNodePopoverOpened,
-  addNodePopoverClosed,
-  addNodePopoverToggled,
-  selectionModeChanged,
-  nodeEmbedWorkflowChanged,
-  nodeIsIntermediateChanged,
-  mouseOverNodeChanged,
-  nodeExclusivelySelected,
-  nodeUseCacheChanged,
+  workflowLoaded,
+  workflowNameChanged,
+  workflowNotesChanged,
+  workflowTagsChanged,
+  workflowVersionChanged,
+  edgeAdded,
 } = nodesSlice.actions;
 
 export default nodesSlice.reducer;

invokeai/frontend/web/src/features/nodes/store/util/makeIsConnectionValidSelector.ts

@@ -55,9 +55,29 @@ export const makeConnectionErrorSelector = (
       return i18n.t('nodes.cannotConnectInputToInput');
     }
 
+    // we have to figure out which is the target and which is the source
+    const target = handleType === 'target' ? nodeId : connectionNodeId;
+    const targetHandle =
+      handleType === 'target' ? fieldName : connectionFieldName;
+    const source = handleType === 'source' ? nodeId : connectionNodeId;
+    const sourceHandle =
+      handleType === 'source' ? fieldName : connectionFieldName;
+
     if (
       edges.find((edge) => {
-        return edge.target === nodeId && edge.targetHandle === fieldName;
+        edge.target === target &&
+          edge.targetHandle === targetHandle &&
+          edge.source === source &&
+          edge.sourceHandle === sourceHandle;
+      })
+    ) {
+      // We already have a connection from this source to this target
+      return i18n.t('nodes.cannotDuplicateConnection');
+    }
+
+    if (
+      edges.find((edge) => {
+        return edge.target === target && edge.targetHandle === targetHandle;
       }) &&
       // except CollectionItem inputs can have multiples
       targetType !== 'CollectionItem'

invokeai/frontend/web/src/features/nodes/types/types.ts

@@ -1141,6 +1141,10 @@ const zLoRAMetadataItem = z.object({
 
 export type LoRAMetadataItem = z.infer<typeof zLoRAMetadataItem>;
 
+const zControlNetMetadataItem = zControlField.deepPartial();
+
+export type ControlNetMetadataItem = z.infer<typeof zControlNetMetadataItem>;
+
 export const zCoreMetadata = z
   .object({
     app_version: z.string().nullish().catch(null),
@@ -1222,6 +1226,7 @@ export const zInvocationNodeData = z.object({
   notes: z.string(),
   embedWorkflow: z.boolean(),
   isIntermediate: z.boolean(),
+  useCache: z.boolean().optional(),
   version: zSemVer.optional(),
 });
 

invokeai/frontend/web/src/features/nodes/util/graphBuilders/addSDXLRefinerToGraph.ts

@@ -32,7 +32,8 @@ export const addSDXLRefinerToGraph = (
   graph: NonNullableGraph,
   baseNodeId: string,
   modelLoaderNodeId?: string,
-  canvasInitImage?: ImageDTO
+  canvasInitImage?: ImageDTO,
+  canvasMaskImage?: ImageDTO
 ): void => {
   const {
     refinerModel,
@@ -257,8 +258,30 @@ export const addSDXLRefinerToGraph = (
       };
     }
 
-    graph.edges.push(
-      {
+    if (graph.id === SDXL_CANVAS_INPAINT_GRAPH) {
+      if (isUsingScaledDimensions) {
+        graph.edges.push({
+          source: {
+            node_id: MASK_RESIZE_UP,
+            field: 'image',
+          },
+          destination: {
+            node_id: SDXL_REFINER_INPAINT_CREATE_MASK,
+            field: 'mask',
+          },
+        });
+      } else {
+        graph.nodes[SDXL_REFINER_INPAINT_CREATE_MASK] = {
+          ...(graph.nodes[
+            SDXL_REFINER_INPAINT_CREATE_MASK
+          ] as CreateDenoiseMaskInvocation),
+          mask: canvasMaskImage,
+        };
+      }
+    }
+
+    if (graph.id === SDXL_CANVAS_OUTPAINT_GRAPH) {
+      graph.edges.push({
         source: {
           node_id: isUsingScaledDimensions ? MASK_RESIZE_UP : MASK_COMBINE,
           field: 'image',
@@ -267,18 +290,19 @@ export const addSDXLRefinerToGraph = (
           node_id: SDXL_REFINER_INPAINT_CREATE_MASK,
           field: 'mask',
         },
+      });
+    }
+
+    graph.edges.push({
+      source: {
+        node_id: SDXL_REFINER_INPAINT_CREATE_MASK,
+        field: 'denoise_mask',
       },
-      {
-        source: {
-          node_id: SDXL_REFINER_INPAINT_CREATE_MASK,
-          field: 'denoise_mask',
-        },
-        destination: {
-          node_id: SDXL_REFINER_DENOISE_LATENTS,
-          field: 'denoise_mask',
-        },
-      }
-    );
+      destination: {
+        node_id: SDXL_REFINER_DENOISE_LATENTS,
+        field: 'denoise_mask',
+      },
+    });
   }
 
   if (

invokeai/frontend/web/src/features/nodes/util/graphBuilders/buildCanvasSDXLInpaintGraph.ts

@@ -663,7 +663,8 @@ export const buildCanvasSDXLInpaintGraph = (
       graph,
       CANVAS_COHERENCE_DENOISE_LATENTS,
       modelLoaderNodeId,
-      canvasInitImage
+      canvasInitImage,
+      canvasMaskImage
     );
     if (seamlessXAxis || seamlessYAxis) {
       modelLoaderNodeId = SDXL_REFINER_SEAMLESS;

invokeai/frontend/web/src/features/parameters/hooks/usePreselectedImage.ts

@@ -1,7 +1,7 @@
 import { skipToken } from '@reduxjs/toolkit/dist/query';
 import { CoreMetadata } from 'features/nodes/types/types';
 import { t } from 'i18next';
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useAppToaster } from '../../../app/components/Toaster';
 import { useAppDispatch } from '../../../app/store/storeHooks';
 import {
@@ -13,18 +13,21 @@ import { setActiveTab } from '../../ui/store/uiSlice';
 import { initialImageSelected } from '../store/actions';
 import { useRecallParameters } from './useRecallParameters';
 
-export const usePreselectedImage = (imageName?: string) => {
+export const usePreselectedImage = (selectedImage?: {
+  imageName: string;
+  action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters';
+}) => {
   const dispatch = useAppDispatch();
 
   const { recallAllParameters } = useRecallParameters();
   const toaster = useAppToaster();
 
   const { currentData: selectedImageDto } = useGetImageDTOQuery(
-    imageName ?? skipToken
+    selectedImage?.imageName ?? skipToken
   );
 
   const { currentData: selectedImageMetadata } = useGetImageMetadataQuery(
-    imageName ?? skipToken
+    selectedImage?.imageName ?? skipToken
   );
 
   const handleSendToCanvas = useCallback(() => {
@@ -54,5 +57,23 @@ export const usePreselectedImage = (imageName?: string) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedImageMetadata]);
 
+  useEffect(() => {
+    if (selectedImage && selectedImage.action === 'sendToCanvas') {
+      handleSendToCanvas();
+    }
+  }, [selectedImage, handleSendToCanvas]);
+
+  useEffect(() => {
+    if (selectedImage && selectedImage.action === 'sendToImg2Img') {
+      handleSendToImg2Img();
+    }
+  }, [selectedImage, handleSendToImg2Img]);
+
+  useEffect(() => {
+    if (selectedImage && selectedImage.action === 'useAllParameters') {
+      handleUseAllMetadata();
+    }
+  }, [selectedImage, handleUseAllMetadata]);
+
   return { handleSendToCanvas, handleSendToImg2Img, handleUseAllMetadata };
 };

invokeai/frontend/web/src/features/parameters/hooks/useRecallParameters.ts

@@ -2,7 +2,11 @@ import { createSelector } from '@reduxjs/toolkit';
 import { useAppToaster } from 'app/components/Toaster';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { CoreMetadata, LoRAMetadataItem } from 'features/nodes/types/types';
+import {
+  CoreMetadata,
+  LoRAMetadataItem,
+  ControlNetMetadataItem,
+} from 'features/nodes/types/types';
 import {
   refinerModelChanged,
   setNegativeStylePromptSDXL,
@@ -18,9 +22,18 @@ import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ImageDTO } from 'services/api/types';
 import {
+  controlNetModelsAdapter,
   loraModelsAdapter,
+  useGetControlNetModelsQuery,
   useGetLoRAModelsQuery,
 } from '../../../services/api/endpoints/models';
+import {
+  ControlNetConfig,
+  controlNetEnabled,
+  controlNetRecalled,
+  controlNetReset,
+  initialControlNet,
+} from '../../controlNet/store/controlNetSlice';
 import { loraRecalled, lorasCleared } from '../../lora/store/loraSlice';
 import { initialImageSelected, modelSelected } from '../store/actions';
 import {
@@ -38,6 +51,7 @@ import {
   isValidCfgScale,
   isValidHeight,
   isValidLoRAModel,
+  isValidControlNetModel,
   isValidMainModel,
   isValidNegativePrompt,
   isValidPositivePrompt,
@@ -53,6 +67,11 @@ import {
   isValidStrength,
   isValidWidth,
 } from '../types/parameterSchemas';
+import { v4 as uuidv4 } from 'uuid';
+import {
+  CONTROLNET_PROCESSORS,
+  CONTROLNET_MODEL_DEFAULT_PROCESSORS,
+} from 'features/controlNet/store/constants';
 
 const selector = createSelector(stateSelector, ({ generation }) => {
   const { model } = generation;
@@ -390,6 +409,121 @@ export const useRecallParameters = () => {
     [prepareLoRAMetadataItem, dispatch, parameterSetToast, parameterNotSetToast]
   );
 
+  /**
+   * Recall ControlNet with toast
+   */
+
+  const { controlnets } = useGetControlNetModelsQuery(undefined, {
+    selectFromResult: (result) => ({
+      controlnets: result.data
+        ? controlNetModelsAdapter.getSelectors().selectAll(result.data)
+        : [],
+    }),
+  });
+
+  const prepareControlNetMetadataItem = useCallback(
+    (controlnetMetadataItem: ControlNetMetadataItem) => {
+      if (!isValidControlNetModel(controlnetMetadataItem.control_model)) {
+        return { controlnet: null, error: 'Invalid ControlNet model' };
+      }
+
+      const {
+        image,
+        control_model,
+        control_weight,
+        begin_step_percent,
+        end_step_percent,
+        control_mode,
+        resize_mode,
+      } = controlnetMetadataItem;
+
+      const matchingControlNetModel = controlnets.find(
+        (c) =>
+          c.base_model === control_model.base_model &&
+          c.model_name === control_model.model_name
+      );
+
+      if (!matchingControlNetModel) {
+        return { controlnet: null, error: 'ControlNet model is not installed' };
+      }
+
+      const isCompatibleBaseModel =
+        matchingControlNetModel?.base_model === model?.base_model;
+
+      if (!isCompatibleBaseModel) {
+        return {
+          controlnet: null,
+          error: 'ControlNet incompatible with currently-selected model',
+        };
+      }
+
+      const controlNetId = uuidv4();
+
+      let processorType = initialControlNet.processorType;
+      for (const modelSubstring in CONTROLNET_MODEL_DEFAULT_PROCESSORS) {
+        if (matchingControlNetModel.model_name.includes(modelSubstring)) {
+          processorType =
+            CONTROLNET_MODEL_DEFAULT_PROCESSORS[modelSubstring] ||
+            initialControlNet.processorType;
+          break;
+        }
+      }
+      const processorNode = CONTROLNET_PROCESSORS[processorType].default;
+
+      const controlnet: ControlNetConfig = {
+        isEnabled: true,
+        model: matchingControlNetModel,
+        weight:
+          typeof control_weight === 'number'
+            ? control_weight
+            : initialControlNet.weight,
+        beginStepPct: begin_step_percent || initialControlNet.beginStepPct,
+        endStepPct: end_step_percent || initialControlNet.endStepPct,
+        controlMode: control_mode || initialControlNet.controlMode,
+        resizeMode: resize_mode || initialControlNet.resizeMode,
+        controlImage: image?.image_name || null,
+        processedControlImage: image?.image_name || null,
+        processorType,
+        processorNode:
+          processorNode.type !== 'none'
+            ? processorNode
+            : initialControlNet.processorNode,
+        shouldAutoConfig: true,
+        controlNetId,
+      };
+
+      return { controlnet, error: null };
+    },
+    [controlnets, model?.base_model]
+  );
+
+  const recallControlNet = useCallback(
+    (controlnetMetadataItem: ControlNetMetadataItem) => {
+      const result = prepareControlNetMetadataItem(controlnetMetadataItem);
+
+      if (!result.controlnet) {
+        parameterNotSetToast(result.error);
+        return;
+      }
+
+      dispatch(
+        controlNetRecalled({
+          ...result.controlnet,
+        })
+      );
+
+      dispatch(controlNetEnabled());
+
+      parameterSetToast();
+    },
+    [
+      prepareControlNetMetadataItem,
+      dispatch,
+      parameterSetToast,
+      parameterNotSetToast,
+    ]
+  );
+
   /*
    * Sets image as initial image with toast
    */
@@ -428,6 +562,7 @@ export const useRecallParameters = () => {
         refiner_negative_aesthetic_score,
         refiner_start,
         loras,
+        controlnets,
       } = metadata;
 
       if (isValidCfgScale(cfg_scale)) {
@@ -517,6 +652,15 @@ export const useRecallParameters = () => {
         }
       });
 
+      dispatch(controlNetReset());
+      dispatch(controlNetEnabled());
+      controlnets?.forEach((controlnet) => {
+        const result = prepareControlNetMetadataItem(controlnet);
+        if (result.controlnet) {
+          dispatch(controlNetRecalled(result.controlnet));
+        }
+      });
+
       allParameterSetToast();
     },
     [
@@ -524,6 +668,7 @@ export const useRecallParameters = () => {
       allParameterSetToast,
       dispatch,
       prepareLoRAMetadataItem,
+      prepareControlNetMetadataItem,
     ]
   );
 
@@ -542,6 +687,7 @@ export const useRecallParameters = () => {
     recallHeight,
     recallStrength,
     recallLoRA,
+    recallControlNet,
     recallAllParameters,
     sendToImageToImage,
   };

invokeai/frontend/web/src/features/queue/components/InvocationCacheStatus.tsx

@@ -1,9 +1,7 @@
 import { ButtonGroup } from '@chakra-ui/react';
-import { useAppSelector } from 'app/store/storeHooks';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useGetInvocationCacheStatusQuery } from 'services/api/endpoints/appInfo';
-import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
 import ClearInvocationCacheButton from './ClearInvocationCacheButton';
 import ToggleInvocationCacheButton from './ToggleInvocationCacheButton';
 import StatusStatGroup from './common/StatusStatGroup';
@@ -11,16 +9,7 @@ import StatusStatItem from './common/StatusStatItem';
 
 const InvocationCacheStatus = () => {
   const { t } = useTranslation();
-  const isConnected = useAppSelector((state) => state.system.isConnected);
-  const { data: queueStatus } = useGetQueueStatusQuery(undefined);
-  const { data: cacheStatus } = useGetInvocationCacheStatusQuery(undefined, {
-    pollingInterval:
-      isConnected &&
-      queueStatus?.processor.is_started &&
-      queueStatus?.queue.pending > 0
-        ? 5000
-        : 0,
-  });
+  const { data: cacheStatus } = useGetInvocationCacheStatusQuery(undefined);
 
   return (
     <StatusStatGroup>

invokeai/frontend/web/src/features/queue/hooks/useCancelCurrentQueueItem.ts

@@ -1,5 +1,6 @@
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { addToast } from 'features/system/store/systemSlice';
+import { isNil } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
@@ -40,7 +41,7 @@ export const useCancelCurrentQueueItem = () => {
   }, [currentQueueItemId, dispatch, t, trigger]);
 
   const isDisabled = useMemo(
-    () => !isConnected || !currentQueueItemId,
+    () => !isConnected || isNil(currentQueueItemId),
     [isConnected, currentQueueItemId]
   );
 

invokeai/frontend/web/src/features/system/store/systemSlice.ts

@@ -1,9 +1,8 @@
 import { UseToastOptions } from '@chakra-ui/react';
 import { PayloadAction, createSlice, isAnyOf } from '@reduxjs/toolkit';
 import { t } from 'i18next';
-import { get, startCase, truncate, upperFirst } from 'lodash-es';
+import { startCase } from 'lodash-es';
 import { LogLevelName } from 'roarr';
-import { isAnySessionRejected } from 'services/api/thunks/session';
 import {
   appSocketConnected,
   appSocketDisconnected,
@@ -20,8 +19,7 @@ import {
 } from 'services/events/actions';
 import { calculateStepPercentage } from '../util/calculateStepPercentage';
 import { makeToast } from '../util/makeToast';
-import { SystemState, LANGUAGES } from './types';
-import { zPydanticValidationError } from './zodSchemas';
+import { LANGUAGES, SystemState } from './types';
 
 export const initialSystemState: SystemState = {
   isInitialized: false,
@@ -175,50 +173,6 @@ export const systemSlice = createSlice({
 
     // *** Matchers - must be after all cases ***
 
-    /**
-     * Session Invoked - REJECTED
-     * Session Created - REJECTED
-     */
-    builder.addMatcher(isAnySessionRejected, (state, action) => {
-      let errorDescription = undefined;
-      const duration = 5000;
-
-      if (action.payload?.status === 422) {
-        const result = zPydanticValidationError.safeParse(action.payload);
-        if (result.success) {
-          result.data.error.detail.map((e) => {
-            state.toastQueue.push(
-              makeToast({
-                title: truncate(upperFirst(e.msg), { length: 128 }),
-                status: 'error',
-                description: truncate(
-                  `Path:
-                ${e.loc.join('.')}`,
-                  { length: 128 }
-                ),
-                duration,
-              })
-            );
-          });
-          return;
-        }
-      } else if (action.payload?.error) {
-        errorDescription = action.payload?.error;
-      }
-
-      state.toastQueue.push(
-        makeToast({
-          title: t('toast.serverError'),
-          status: 'error',
-          description: truncate(
-            get(errorDescription, 'detail', 'Unknown Error'),
-            { length: 128 }
-          ),
-          duration,
-        })
-      );
-    });
-
     /**
      * Any server error
      */

invokeai/frontend/web/src/features/system/store/zodSchemas.ts

@@ -2,7 +2,7 @@ import { z } from 'zod';
 
 export const zPydanticValidationError = z.object({
   status: z.literal(422),
-  error: z.object({
+  data: z.object({
     detail: z.array(
       z.object({
         loc: z.array(z.string()),

invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx

@@ -14,7 +14,7 @@ import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
 import NodeEditorPanelGroup from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
-import { InvokeTabName, tabMap } from 'features/ui/store/tabMap';
+import { InvokeTabName } from 'features/ui/store/tabMap';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { ResourceKey } from 'i18next';
 import { isEqual } from 'lodash-es';
@@ -110,7 +110,7 @@ export const NO_GALLERY_TABS: InvokeTabName[] = ['modelManager', 'queue'];
 export const NO_SIDE_PANEL_TABS: InvokeTabName[] = ['modelManager', 'queue'];
 
 const InvokeTabs = () => {
-  const activeTab = useAppSelector(activeTabIndexSelector);
+  const activeTabIndex = useAppSelector(activeTabIndexSelector);
   const activeTabName = useAppSelector(activeTabNameSelector);
   const enabledTabs = useAppSelector(enabledTabsSelector);
   const { t } = useTranslation();
@@ -150,13 +150,13 @@ const InvokeTabs = () => {
 
   const handleTabChange = useCallback(
     (index: number) => {
-      const activeTabName = tabMap[index];
-      if (!activeTabName) {
+      const tab = enabledTabs[index];
+      if (!tab) {
         return;
       }
-      dispatch(setActiveTab(activeTabName));
+      dispatch(setActiveTab(tab.id));
     },
-    [dispatch]
+    [dispatch, enabledTabs]
   );
 
   const {
@@ -216,8 +216,8 @@ const InvokeTabs = () => {
   return (
     <Tabs
       variant="appTabs"
-      defaultIndex={activeTab}
-      index={activeTab}
+      defaultIndex={activeTabIndex}
+      index={activeTabIndex}
       onChange={handleTabChange}
       sx={{
         flexGrow: 1,

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasBeta/UnifiedCanvasToolSettings/UnifiedCanvasColorPicker.tsx

@@ -95,26 +95,32 @@ export default function UnifiedCanvasColorPicker() {
     >
       <Flex minWidth={60} direction="column" gap={4} width="100%">
         {layer === 'base' && (
-          <IAIColorPicker
+          <Box
             sx={{
               width: '100%',
               paddingTop: 2,
               paddingBottom: 2,
             }}
-            pickerColor={brushColor}
-            onChange={(newColor) => dispatch(setBrushColor(newColor))}
-          />
+          >
+            <IAIColorPicker
+              color={brushColor}
+              onChange={(newColor) => dispatch(setBrushColor(newColor))}
+            />
+          </Box>
         )}
         {layer === 'mask' && (
-          <IAIColorPicker
+          <Box
             sx={{
               width: '100%',
               paddingTop: 2,
               paddingBottom: 2,
             }}
-            pickerColor={maskColor}
-            onChange={(newColor) => dispatch(setMaskColor(newColor))}
-          />
+          >
+            <IAIColorPicker
+              color={maskColor}
+              onChange={(newColor) => dispatch(setMaskColor(newColor))}
+            />
+          </Box>
         )}
       </Flex>
     </IAIPopover>

invokeai/frontend/web/src/features/ui/store/extraReducers.ts

@@ -1,13 +0,0 @@
-import { InvokeTabName, tabMap } from './tabMap';
-import { UIState } from './uiTypes';
-
-export const setActiveTabReducer = (
-  state: UIState,
-  newActiveTab: number | InvokeTabName
-) => {
-  if (typeof newActiveTab === 'number') {
-    state.activeTab = newActiveTab;
-  } else {
-    state.activeTab = tabMap.indexOf(newActiveTab);
-  }
-};

invokeai/frontend/web/src/features/ui/store/uiSelectors.ts

@@ -1,27 +1,23 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
-import { isEqual } from 'lodash-es';
-
-import { InvokeTabName, tabMap } from './tabMap';
-import { UIState } from './uiTypes';
+import { isEqual, isString } from 'lodash-es';
+import { tabMap } from './tabMap';
 
 export const activeTabNameSelector = createSelector(
-  (state: RootState) => state.ui,
-  (ui: UIState) => tabMap[ui.activeTab] as InvokeTabName,
-  {
-    memoizeOptions: {
-      equalityCheck: isEqual,
-    },
-  }
+  (state: RootState) => state,
+  /**
+   * Previously `activeTab` was an integer, but now it's a string.
+   * Default to first tab in case user has integer.
+   */
+  ({ ui }) => (isString(ui.activeTab) ? ui.activeTab : 'txt2img')
 );
 
 export const activeTabIndexSelector = createSelector(
-  (state: RootState) => state.ui,
-  (ui: UIState) => ui.activeTab,
-  {
-    memoizeOptions: {
-      equalityCheck: isEqual,
-    },
+  (state: RootState) => state,
+  ({ ui, config }) => {
+    const tabs = tabMap.filter((t) => !config.disabledTabs.includes(t));
+    const idx = tabs.indexOf(ui.activeTab);
+    return idx === -1 ? 0 : idx;
   }
 );
 

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -2,12 +2,11 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { initialImageChanged } from 'features/parameters/store/generationSlice';
 import { SchedulerParam } from 'features/parameters/types/parameterSchemas';
-import { setActiveTabReducer } from './extraReducers';
 import { InvokeTabName } from './tabMap';
 import { UIState } from './uiTypes';
 
 export const initialUIState: UIState = {
-  activeTab: 0,
+  activeTab: 'txt2img',
   shouldShowImageDetails: false,
   shouldUseCanvasBetaLayout: false,
   shouldShowExistingModelsInSearch: false,
@@ -26,7 +25,7 @@ export const uiSlice = createSlice({
   initialState: initialUIState,
   reducers: {
     setActiveTab: (state, action: PayloadAction<InvokeTabName>) => {
-      setActiveTabReducer(state, action.payload);
+      state.activeTab = action.payload;
     },
     setShouldShowImageDetails: (state, action: PayloadAction<boolean>) => {
       state.shouldShowImageDetails = action.payload;
@@ -73,7 +72,7 @@ export const uiSlice = createSlice({
   },
   extraReducers(builder) {
     builder.addCase(initialImageChanged, (state) => {
-      setActiveTabReducer(state, 'img2img');
+      state.activeTab = 'img2img';
     });
   },
 });

invokeai/frontend/web/src/features/ui/store/uiTypes.ts

@@ -1,4 +1,5 @@
 import { SchedulerParam } from 'features/parameters/types/parameterSchemas';
+import { InvokeTabName } from './tabMap';
 
 export type Coordinates = {
   x: number;
@@ -13,7 +14,7 @@ export type Dimensions = {
 export type Rect = Coordinates & Dimensions;
 
 export interface UIState {
-  activeTab: number;
+  activeTab: InvokeTabName;
   shouldShowImageDetails: boolean;
   shouldUseCanvasBetaLayout: boolean;
   shouldShowExistingModelsInSearch: boolean;

invokeai/frontend/web/src/services/api/thunks/session.ts

@@ -1,184 +0,0 @@
-import { createAsyncThunk, isAnyOf } from '@reduxjs/toolkit';
-import { $queueId } from 'features/queue/store/queueNanoStore';
-import { isObject } from 'lodash-es';
-import { $client } from 'services/api/client';
-import { paths } from 'services/api/schema';
-import { O } from 'ts-toolbelt';
-
-type CreateSessionArg = {
-  graph: NonNullable<
-    paths['/api/v1/sessions/']['post']['requestBody']
-  >['content']['application/json'];
-};
-
-type CreateSessionResponse = O.Required<
-  NonNullable<
-    paths['/api/v1/sessions/']['post']['requestBody']
-  >['content']['application/json'],
-  'id'
->;
-
-type CreateSessionThunkConfig = {
-  rejectValue: { arg: CreateSessionArg; status: number; error: unknown };
-};
-
-/**
- * `SessionsService.createSession()` thunk
- */
-export const sessionCreated = createAsyncThunk<
-  CreateSessionResponse,
-  CreateSessionArg,
-  CreateSessionThunkConfig
->('api/sessionCreated', async (arg, { rejectWithValue }) => {
-  const { graph } = arg;
-  const { POST } = $client.get();
-  const { data, error, response } = await POST('/api/v1/sessions/', {
-    body: graph,
-    params: { query: { queue_id: $queueId.get() } },
-  });
-
-  if (error) {
-    return rejectWithValue({ arg, status: response.status, error });
-  }
-
-  return data;
-});
-
-type InvokedSessionArg = {
-  session_id: paths['/api/v1/sessions/{session_id}/invoke']['put']['parameters']['path']['session_id'];
-};
-
-type InvokedSessionResponse =
-  paths['/api/v1/sessions/{session_id}/invoke']['put']['responses']['200']['content']['application/json'];
-
-type InvokedSessionThunkConfig = {
-  rejectValue: {
-    arg: InvokedSessionArg;
-    error: unknown;
-    status: number;
-  };
-};
-
-const isErrorWithStatus = (error: unknown): error is { status: number } =>
-  isObject(error) && 'status' in error;
-
-const isErrorWithDetail = (error: unknown): error is { detail: string } =>
-  isObject(error) && 'detail' in error;
-
-/**
- * `SessionsService.invokeSession()` thunk
- */
-export const sessionInvoked = createAsyncThunk<
-  InvokedSessionResponse,
-  InvokedSessionArg,
-  InvokedSessionThunkConfig
->('api/sessionInvoked', async (arg, { rejectWithValue }) => {
-  const { session_id } = arg;
-  const { PUT } = $client.get();
-  const { error, response } = await PUT(
-    '/api/v1/sessions/{session_id}/invoke',
-    {
-      params: {
-        query: { queue_id: $queueId.get(), all: true },
-        path: { session_id },
-      },
-    }
-  );
-
-  if (error) {
-    if (isErrorWithStatus(error) && error.status === 403) {
-      return rejectWithValue({
-        arg,
-        status: response.status,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        error: (error as any).body.detail,
-      });
-    }
-    if (isErrorWithDetail(error) && response.status === 403) {
-      return rejectWithValue({
-        arg,
-        status: response.status,
-        error: error.detail,
-      });
-    }
-    if (error) {
-      return rejectWithValue({ arg, status: response.status, error });
-    }
-  }
-});
-
-type CancelSessionArg =
-  paths['/api/v1/sessions/{session_id}/invoke']['delete']['parameters']['path'];
-
-type CancelSessionResponse =
-  paths['/api/v1/sessions/{session_id}/invoke']['delete']['responses']['200']['content']['application/json'];
-
-type CancelSessionThunkConfig = {
-  rejectValue: {
-    arg: CancelSessionArg;
-    error: unknown;
-  };
-};
-
-/**
- * `SessionsService.cancelSession()` thunk
- */
-export const sessionCanceled = createAsyncThunk<
-  CancelSessionResponse,
-  CancelSessionArg,
-  CancelSessionThunkConfig
->('api/sessionCanceled', async (arg, { rejectWithValue }) => {
-  const { session_id } = arg;
-  const { DELETE } = $client.get();
-  const { data, error } = await DELETE('/api/v1/sessions/{session_id}/invoke', {
-    params: {
-      path: { session_id },
-    },
-  });
-
-  if (error) {
-    return rejectWithValue({ arg, error });
-  }
-
-  return data;
-});
-
-type ListSessionsArg = {
-  params: paths['/api/v1/sessions/']['get']['parameters'];
-};
-
-type ListSessionsResponse =
-  paths['/api/v1/sessions/']['get']['responses']['200']['content']['application/json'];
-
-type ListSessionsThunkConfig = {
-  rejectValue: {
-    arg: ListSessionsArg;
-    error: unknown;
-  };
-};
-
-/**
- * `SessionsService.listSessions()` thunk
- */
-export const listedSessions = createAsyncThunk<
-  ListSessionsResponse,
-  ListSessionsArg,
-  ListSessionsThunkConfig
->('api/listSessions', async (arg, { rejectWithValue }) => {
-  const { params } = arg;
-  const { GET } = $client.get();
-  const { data, error } = await GET('/api/v1/sessions/', {
-    params,
-  });
-
-  if (error) {
-    return rejectWithValue({ arg, error });
-  }
-
-  return data;
-});
-
-export const isAnySessionRejected = isAnyOf(
-  sessionCreated.rejected,
-  sessionInvoked.rejected
-);

invokeai/frontend/web/src/theme/theme.ts

@@ -1,5 +1,4 @@
-import { ThemeOverride } from '@chakra-ui/react';
-
+import { ThemeOverride, ToastProviderProps } from '@chakra-ui/react';
 import { InvokeAIColors } from './colors/colors';
 import { accordionTheme } from './components/accordion';
 import { buttonTheme } from './components/button';
@@ -149,3 +148,7 @@ export const theme: ThemeOverride = {
     Tooltip: tooltipTheme,
   },
 };
+
+export const TOAST_OPTIONS: ToastProviderProps = {
+  defaultOptions: { isClosable: true },
+};

invokeai/version/invokeai_version.py

@@ -1 +1 @@
-__version__ = "3.1.1"
+__version__ = "3.2.0rc3"

mkdocs.yml

@@ -127,12 +127,12 @@ nav:
         - Manual Installation on Windows: 'installation/deprecated_documentation/INSTALL_WINDOWS.md'
         - Installing Invoke with pip: 'installation/deprecated_documentation/INSTALL_PCP.md'
         - Source Installer: 'installation/deprecated_documentation/INSTALL_SOURCE.md'
-    - Nodes:
+    - Workflows & Nodes:
       - Community Nodes: 'nodes/communityNodes.md'
       - Example Workflows: 'nodes/exampleWorkflows.md'
       - Nodes Overview: 'nodes/overview.md'
       - List of Default Nodes: 'nodes/defaultNodes.md'
-      - Node Editor Usage: 'nodes/NODES.md'
+      - Workflow Editor Usage: 'nodes/NODES.md'
       - ComfyUI to InvokeAI: 'nodes/comfyToInvoke.md'
       - Contributing Nodes: 'nodes/contributingNodes.md'
     - Features:
@@ -140,7 +140,7 @@ nav:
       - New to InvokeAI?: 'help/gettingStartedWithAI.md'
       - Concepts: 'features/CONCEPTS.md'
       - Configuration: 'features/CONFIGURATION.md'
-      - ControlNet: 'features/CONTROLNET.md'
+      - Control Adapters: 'features/CONTROLNET.md'
       - Image-to-Image: 'features/IMG2IMG.md'
       - Controlling Logging: 'features/LOGGING.md'
       - Model Merging: 'features/MODEL_MERGING.md'