Fix issue with seamless context managers when seamless is not configured.

Brand colors are now prefixed with "invoke".

README.md

@@ -1,10 +1,10 @@
 <div align="center">
 
-![project hero](https://github.com/invoke-ai/InvokeAI/assets/31807370/1a917d94-e099-4fa1-a70f-7dd8d0691018)
+![project hero](https://github.com/invoke-ai/InvokeAI/assets/31807370/6e3728c7-e90e-4711-905c-3b55844ff5be)
 
-# Invoke AI - Generative AI for Professional Creatives
-## Professional Creative Tools for Stable Diffusion, Custom-Trained Models, and more. 
-  To learn more about Invoke AI, get started instantly, or implement our Business solutions, visit [invoke.ai](https://invoke.ai)
+# Invoke - Professional Creative AI Tools for Visual Media 
+##  To learn more about Invoke, or implement our Business solutions, visit [invoke.com](https://www.invoke.com/about)
+  
 
 
 [![discord badge]][discord link]
@@ -56,7 +56,9 @@ the foundation for multiple commercial products.
 
 <div align="center">
 
-![canvas preview](https://github.com/invoke-ai/InvokeAI/raw/main/docs/assets/canvas_preview.png)
+
+![Highlighted Features - Canvas and Workflows](https://github.com/invoke-ai/InvokeAI/assets/31807370/708f7a82-084f-4860-bfbe-e2588c53548d)
+
 
 </div>
 

docker/.env.sample

@@ -2,10 +2,13 @@
 ## Any environment variables supported by InvokeAI can be specified here,
 ## in addition to the examples below.
 
-# INVOKEAI_ROOT is the path to a path on the local filesystem where InvokeAI will store data.
+# HOST_INVOKEAI_ROOT is the path on the docker host's filesystem where InvokeAI will store data.
 # Outputs will also be stored here by default.
-# This **must** be an absolute path.
-INVOKEAI_ROOT=
+# If relative, it will be relative to the docker directory in which the docker-compose.yml file is located
+#HOST_INVOKEAI_ROOT=../../invokeai-data
+
+# INVOKEAI_ROOT is the path to the root of the InvokeAI repository within the container.
+# INVOKEAI_ROOT=~/invokeai
 
 # Get this value from your HuggingFace account settings page.
 # HUGGING_FACE_HUB_TOKEN=

docker/docker-compose.yml

@@ -21,7 +21,9 @@ x-invokeai: &invokeai
     ports:
       - "${INVOKEAI_PORT:-9090}:9090"
     volumes:
-      - ${INVOKEAI_ROOT:-~/invokeai}:${INVOKEAI_ROOT:-/invokeai}
+      - type: bind
+        source: ${HOST_INVOKEAI_ROOT:-${INVOKEAI_ROOT:-~/invokeai}}
+        target: ${INVOKEAI_ROOT:-/invokeai}
       - ${HF_HOME:-~/.cache/huggingface}:${HF_HOME:-/invokeai/.cache/huggingface}
       # - ${INVOKEAI_MODELS_DIR:-${INVOKEAI_ROOT:-/invokeai/models}}
       # - ${INVOKEAI_MODELS_CONFIG_PATH:-${INVOKEAI_ROOT:-/invokeai/configs/models.yaml}}

invokeai/app/invocations/controlnet_image_processors.py

@@ -24,9 +24,10 @@ from controlnet_aux import (
 )
 from controlnet_aux.util import HWC3, ade_palette
 from PIL import Image
-from pydantic import BaseModel, ConfigDict, Field, field_validator
+from pydantic import BaseModel, ConfigDict, Field, field_validator, model_validator
 
 from invokeai.app.invocations.primitives import ImageField, ImageOutput
+from invokeai.app.invocations.util import validate_begin_end_step, validate_weights
 from invokeai.app.services.image_records.image_records_common import ImageCategory, ResourceOrigin
 from invokeai.app.shared.fields import FieldDescriptions
 
@@ -75,17 +76,16 @@ class ControlField(BaseModel):
     resize_mode: CONTROLNET_RESIZE_VALUES = Field(default="just_resize", description="The resize mode to use")
 
     @field_validator("control_weight")
+    @classmethod
     def validate_control_weight(cls, v):
-        """Validate that all control weights in the valid range"""
-        if isinstance(v, list):
-            for i in v:
-                if i < -1 or i > 2:
-                    raise ValueError("Control weights must be within -1 to 2 range")
-        else:
-            if v < -1 or v > 2:
-                raise ValueError("Control weights must be within -1 to 2 range")
+        validate_weights(v)
         return v
 
+    @model_validator(mode="after")
+    def validate_begin_end_step_percent(self):
+        validate_begin_end_step(self.begin_step_percent, self.end_step_percent)
+        return self
+
 
 @invocation_output("control_output")
 class ControlOutput(BaseInvocationOutput):
@@ -95,17 +95,17 @@ class ControlOutput(BaseInvocationOutput):
     control: ControlField = OutputField(description=FieldDescriptions.control)
 
 
-@invocation("controlnet", title="ControlNet", tags=["controlnet"], category="controlnet", version="1.1.0")
+@invocation("controlnet", title="ControlNet", tags=["controlnet"], category="controlnet", version="1.1.1")
 class ControlNetInvocation(BaseInvocation):
     """Collects ControlNet info to pass to other nodes"""
 
     image: ImageField = InputField(description="The control image")
     control_model: ControlNetModelField = InputField(description=FieldDescriptions.controlnet_model, input=Input.Direct)
     control_weight: Union[float, List[float]] = InputField(
-        default=1.0, description="The weight given to the ControlNet"
+        default=1.0, ge=-1, le=2, description="The weight given to the ControlNet"
     )
     begin_step_percent: float = InputField(
-        default=0, ge=-1, le=2, description="When the ControlNet is first applied (% of total steps)"
+        default=0, ge=0, le=1, description="When the ControlNet is first applied (% of total steps)"
     )
     end_step_percent: float = InputField(
         default=1, ge=0, le=1, description="When the ControlNet is last applied (% of total steps)"
@@ -113,6 +113,17 @@ class ControlNetInvocation(BaseInvocation):
     control_mode: CONTROLNET_MODE_VALUES = InputField(default="balanced", description="The control mode used")
     resize_mode: CONTROLNET_RESIZE_VALUES = InputField(default="just_resize", description="The resize mode used")
 
+    @field_validator("control_weight")
+    @classmethod
+    def validate_control_weight(cls, v):
+        validate_weights(v)
+        return v
+
+    @model_validator(mode="after")
+    def validate_begin_end_step_percent(self) -> "ControlNetInvocation":
+        validate_begin_end_step(self.begin_step_percent, self.end_step_percent)
+        return self
+
     def invoke(self, context: InvocationContext) -> ControlOutput:
         return ControlOutput(
             control=ControlField(

invokeai/app/invocations/ip_adapter.py

@@ -2,7 +2,7 @@ import os
 from builtins import float
 from typing import List, Union
 
-from pydantic import BaseModel, ConfigDict, Field
+from pydantic import BaseModel, ConfigDict, Field, field_validator, model_validator
 
 from invokeai.app.invocations.baseinvocation import (
     BaseInvocation,
@@ -15,6 +15,7 @@ from invokeai.app.invocations.baseinvocation import (
     invocation_output,
 )
 from invokeai.app.invocations.primitives import ImageField
+from invokeai.app.invocations.util import validate_begin_end_step, validate_weights
 from invokeai.app.shared.fields import FieldDescriptions
 from invokeai.backend.model_management.models.base import BaseModelType, ModelType
 from invokeai.backend.model_management.models.ip_adapter import get_ip_adapter_image_encoder_model_id
@@ -39,7 +40,6 @@ class IPAdapterField(BaseModel):
     ip_adapter_model: IPAdapterModelField = Field(description="The IP-Adapter model to use.")
     image_encoder_model: CLIPVisionModelField = Field(description="The name of the CLIP image encoder model.")
     weight: Union[float, List[float]] = Field(default=1, description="The weight given to the ControlNet")
-    # weight: float = Field(default=1.0, ge=0, description="The weight of the IP-Adapter.")
     begin_step_percent: float = Field(
         default=0, ge=0, le=1, description="When the IP-Adapter is first applied (% of total steps)"
     )
@@ -47,6 +47,17 @@ class IPAdapterField(BaseModel):
         default=1, ge=0, le=1, description="When the IP-Adapter is last applied (% of total steps)"
     )
 
+    @field_validator("weight")
+    @classmethod
+    def validate_ip_adapter_weight(cls, v):
+        validate_weights(v)
+        return v
+
+    @model_validator(mode="after")
+    def validate_begin_end_step_percent(self):
+        validate_begin_end_step(self.begin_step_percent, self.end_step_percent)
+        return self
+
 
 @invocation_output("ip_adapter_output")
 class IPAdapterOutput(BaseInvocationOutput):
@@ -54,7 +65,7 @@ class IPAdapterOutput(BaseInvocationOutput):
     ip_adapter: IPAdapterField = OutputField(description=FieldDescriptions.ip_adapter, title="IP-Adapter")
 
 
-@invocation("ip_adapter", title="IP-Adapter", tags=["ip_adapter", "control"], category="ip_adapter", version="1.1.0")
+@invocation("ip_adapter", title="IP-Adapter", tags=["ip_adapter", "control"], category="ip_adapter", version="1.1.1")
 class IPAdapterInvocation(BaseInvocation):
     """Collects IP-Adapter info to pass to other nodes."""
 
@@ -64,18 +75,27 @@ class IPAdapterInvocation(BaseInvocation):
         description="The IP-Adapter model.", title="IP-Adapter Model", input=Input.Direct, ui_order=-1
     )
 
-    # weight: float = InputField(default=1.0, description="The weight of the IP-Adapter.", ui_type=UIType.Float)
     weight: Union[float, List[float]] = InputField(
-        default=1, ge=-1, description="The weight given to the IP-Adapter", title="Weight"
+        default=1, description="The weight given to the IP-Adapter", title="Weight"
     )
-
     begin_step_percent: float = InputField(
-        default=0, ge=-1, le=2, description="When the IP-Adapter is first applied (% of total steps)"
+        default=0, ge=0, le=1, description="When the IP-Adapter is first applied (% of total steps)"
     )
     end_step_percent: float = InputField(
         default=1, ge=0, le=1, description="When the IP-Adapter is last applied (% of total steps)"
     )
 
+    @field_validator("weight")
+    @classmethod
+    def validate_ip_adapter_weight(cls, v):
+        validate_weights(v)
+        return v
+
+    @model_validator(mode="after")
+    def validate_begin_end_step_percent(self):
+        validate_begin_end_step(self.begin_step_percent, self.end_step_percent)
+        return self
+
     def invoke(self, context: InvocationContext) -> IPAdapterOutput:
         # Lookup the CLIP Vision encoder that is intended to be used with the IP-Adapter model.
         ip_adapter_info = context.services.model_manager.model_info(

invokeai/app/invocations/latent.py

@@ -1,5 +1,6 @@
 # Copyright (c) 2023 Kyle Schouviller (https://github.com/kyle0654)
 
+import contextlib
 from contextlib import ExitStack
 from functools import singledispatchmethod
 from typing import List, Literal, Optional, Union
@@ -220,7 +221,7 @@ def get_scheduler(
     title="Denoise Latents",
     tags=["latents", "denoise", "txt2img", "t2i", "t2l", "img2img", "i2i", "l2l"],
     category="latents",
-    version="1.5.0",
+    version="1.5.1",
 )
 class DenoiseLatentsInvocation(BaseInvocation):
     """Denoises noisy latents to decodable images"""
@@ -279,7 +280,7 @@ class DenoiseLatentsInvocation(BaseInvocation):
         ui_order=7,
     )
     cfg_rescale_multiplier: float = InputField(
-        default=0, ge=0, lt=1, description=FieldDescriptions.cfg_rescale_multiplier
+        title="CFG Rescale Multiplier", default=0, ge=0, lt=1, description=FieldDescriptions.cfg_rescale_multiplier
     )
     latents: Optional[LatentsField] = InputField(
         default=None,
@@ -716,10 +717,23 @@ class DenoiseLatentsInvocation(BaseInvocation):
                 **self.unet.unet.model_dump(),
                 context=context,
             )
+
+            # Prepare seamless context, if configured.
+            seamless_context = contextlib.nullcontext()
+            seamless_config = self.unet.seamless
+            if seamless_config is not None:
+                seamless_context = set_seamless(
+                    model=unet_info.context.model,
+                    axes=seamless_config.axes,
+                    skipped_layers=seamless_config.skipped_layers,
+                    skip_second_resnet=seamless_config.skip_second_resnet,
+                    skip_conv2=seamless_config.skip_conv2,
+                )
+
             with (
                 ExitStack() as exit_stack,
                 ModelPatcher.apply_freeu(unet_info.context.model, self.unet.freeu_config),
-                set_seamless(unet_info.context.model, self.unet.seamless_axes),
+                seamless_context,
                 unet_info as unet,
                 # Apply the LoRA after unet has been moved to its target device for faster patching.
                 ModelPatcher.apply_lora_unet(unet, _lora_loader()),
@@ -826,7 +840,19 @@ class LatentsToImageInvocation(BaseInvocation, WithMetadata):
             context=context,
         )
 
-        with set_seamless(vae_info.context.model, self.vae.seamless_axes), vae_info as vae:
+        # Prepare seamless context, if configured.
+        seamless_context = contextlib.nullcontext()
+        seamless_config = self.vae.seamless
+        if seamless_config is not None:
+            seamless_context = set_seamless(
+                model=vae_info.context.model,
+                axes=seamless_config.axes,
+                skipped_layers=seamless_config.skipped_layers,
+                skip_second_resnet=seamless_config.skip_second_resnet,
+                skip_conv2=seamless_config.skip_conv2,
+            )
+
+        with seamless_context, vae_info as vae:
             latents = latents.to(vae.device)
             if self.fp32:
                 vae.to(dtype=torch.float32)

invokeai/app/invocations/model.py

@@ -19,6 +19,13 @@ from .baseinvocation import (
 )
 
 
+class SeamlessSettings(BaseModel):
+    axes: List[str] = Field(description="Axes('x' and 'y') to which apply seamless")
+    skipped_layers: int = Field(description="How much down layers skip when applying seamless")
+    skip_second_resnet: bool = Field(description="Skip or not second resnet in down blocks when applying seamless")
+    skip_conv2: bool = Field(description="Skip or not conv2 in down blocks when applying seamless")
+
+
 class ModelInfo(BaseModel):
     model_name: str = Field(description="Info to load submodel")
     base_model: BaseModelType = Field(description="Base model")
@@ -36,8 +43,8 @@ class UNetField(BaseModel):
     unet: ModelInfo = Field(description="Info to load unet submodel")
     scheduler: ModelInfo = Field(description="Info to load scheduler submodel")
     loras: List[LoraInfo] = Field(description="Loras to apply on model loading")
-    seamless_axes: List[str] = Field(default_factory=list, description='Axes("x" and "y") to which apply seamless')
     freeu_config: Optional[FreeUConfig] = Field(default=None, description="FreeU configuration")
+    seamless: Optional[SeamlessSettings] = Field(default=None, description="Seamless settings applied to model")
 
 
 class ClipField(BaseModel):
@@ -50,7 +57,7 @@ class ClipField(BaseModel):
 class VaeField(BaseModel):
     # TODO: better naming?
     vae: ModelInfo = Field(description="Info to load vae submodel")
-    seamless_axes: List[str] = Field(default_factory=list, description='Axes("x" and "y") to which apply seamless')
+    seamless: Optional[SeamlessSettings] = Field(default=None, description="Seamless settings applied to model")
 
 
 @invocation_output("unet_output")
@@ -451,6 +458,11 @@ class SeamlessModeInvocation(BaseInvocation):
     )
     seamless_y: bool = InputField(default=True, input=Input.Any, description="Specify whether Y axis is seamless")
     seamless_x: bool = InputField(default=True, input=Input.Any, description="Specify whether X axis is seamless")
+    skipped_layers: int = InputField(default=0, input=Input.Any, description="How much model's down layers to skip")
+    skip_second_resnet: bool = InputField(
+        default=True, input=Input.Any, description="Skip or not second resnet in down layers"
+    )
+    skip_conv2: bool = InputField(default=True, input=Input.Any, description="Skip or not conv2 in down layers")
 
     def invoke(self, context: InvocationContext) -> SeamlessModeOutput:
         # Conditionally append 'x' and 'y' based on seamless_x and seamless_y
@@ -465,9 +477,19 @@ class SeamlessModeInvocation(BaseInvocation):
             seamless_axes_list.append("y")
 
         if unet is not None:
-            unet.seamless_axes = seamless_axes_list
+            unet.seamless = SeamlessSettings(
+                axes=seamless_axes_list,
+                skipped_layers=self.skipped_layers,
+                skip_second_resnet=self.skip_second_resnet,
+                skip_conv2=self.skip_conv2,
+            )
         if vae is not None:
-            vae.seamless_axes = seamless_axes_list
+            vae.seamless = SeamlessSettings(
+                axes=seamless_axes_list,
+                skipped_layers=self.skipped_layers,
+                skip_second_resnet=self.skip_second_resnet,
+                skip_conv2=self.skip_conv2,
+            )
 
         return SeamlessModeOutput(unet=unet, vae=vae)
 

invokeai/app/invocations/t2i_adapter.py

@@ -1,6 +1,6 @@
 from typing import Union
 
-from pydantic import BaseModel, ConfigDict, Field
+from pydantic import BaseModel, ConfigDict, Field, field_validator, model_validator
 
 from invokeai.app.invocations.baseinvocation import (
     BaseInvocation,
@@ -14,6 +14,7 @@ from invokeai.app.invocations.baseinvocation import (
 )
 from invokeai.app.invocations.controlnet_image_processors import CONTROLNET_RESIZE_VALUES
 from invokeai.app.invocations.primitives import ImageField
+from invokeai.app.invocations.util import validate_begin_end_step, validate_weights
 from invokeai.app.shared.fields import FieldDescriptions
 from invokeai.backend.model_management.models.base import BaseModelType
 
@@ -37,6 +38,17 @@ class T2IAdapterField(BaseModel):
     )
     resize_mode: CONTROLNET_RESIZE_VALUES = Field(default="just_resize", description="The resize mode to use")
 
+    @field_validator("weight")
+    @classmethod
+    def validate_ip_adapter_weight(cls, v):
+        validate_weights(v)
+        return v
+
+    @model_validator(mode="after")
+    def validate_begin_end_step_percent(self):
+        validate_begin_end_step(self.begin_step_percent, self.end_step_percent)
+        return self
+
 
 @invocation_output("t2i_adapter_output")
 class T2IAdapterOutput(BaseInvocationOutput):
@@ -44,7 +56,7 @@ class T2IAdapterOutput(BaseInvocationOutput):
 
 
 @invocation(
-    "t2i_adapter", title="T2I-Adapter", tags=["t2i_adapter", "control"], category="t2i_adapter", version="1.0.0"
+    "t2i_adapter", title="T2I-Adapter", tags=["t2i_adapter", "control"], category="t2i_adapter", version="1.0.1"
 )
 class T2IAdapterInvocation(BaseInvocation):
     """Collects T2I-Adapter info to pass to other nodes."""
@@ -61,7 +73,7 @@ class T2IAdapterInvocation(BaseInvocation):
         default=1, ge=0, description="The weight given to the T2I-Adapter", title="Weight"
     )
     begin_step_percent: float = InputField(
-        default=0, ge=-1, le=2, description="When the T2I-Adapter is first applied (% of total steps)"
+        default=0, ge=0, le=1, description="When the T2I-Adapter is first applied (% of total steps)"
     )
     end_step_percent: float = InputField(
         default=1, ge=0, le=1, description="When the T2I-Adapter is last applied (% of total steps)"
@@ -71,6 +83,17 @@ class T2IAdapterInvocation(BaseInvocation):
         description="The resize mode applied to the T2I-Adapter input image so that it matches the target output size.",
     )
 
+    @field_validator("weight")
+    @classmethod
+    def validate_ip_adapter_weight(cls, v):
+        validate_weights(v)
+        return v
+
+    @model_validator(mode="after")
+    def validate_begin_end_step_percent(self):
+        validate_begin_end_step(self.begin_step_percent, self.end_step_percent)
+        return self
+
     def invoke(self, context: InvocationContext) -> T2IAdapterOutput:
         return T2IAdapterOutput(
             t2i_adapter=T2IAdapterField(

invokeai/app/invocations/util.py

@@ -0,0 +1,14 @@
+from typing import Union
+
+
+def validate_weights(weights: Union[float, list[float]]) -> None:
+    """Validate that all control weights in the valid range"""
+    to_validate = weights if isinstance(weights, list) else [weights]
+    if any(i < -1 or i > 2 for i in to_validate):
+        raise ValueError("Control weights must be within -1 to 2 range")
+
+
+def validate_begin_end_step(begin_step_percent: float, end_step_percent: float) -> None:
+    """Validate that begin_step_percent is less than end_step_percent"""
+    if begin_step_percent >= end_step_percent:
+        raise ValueError("Begin step percent must be less than or equal to end step percent")

invokeai/backend/model_management/seamless.py

@@ -25,71 +25,55 @@ def _conv_forward_asymmetric(self, input, weight, bias):
 
 
 @contextmanager
-def set_seamless(model: Union[UNet2DConditionModel, AutoencoderKL], seamless_axes: List[str]):
+def set_seamless(
+    model: Union[UNet2DConditionModel, AutoencoderKL],
+    axes: List[str],
+    skipped_layers: int,
+    skip_second_resnet: bool,
+    skip_conv2: bool,
+):
     try:
         to_restore = []
 
         for m_name, m in model.named_modules():
-            if isinstance(model, UNet2DConditionModel):
-                if ".attentions." in m_name:
+            if not isinstance(m, (nn.Conv2d, nn.ConvTranspose2d)):
+                continue
+
+            if isinstance(model, UNet2DConditionModel) and m_name.startswith("down_blocks.") and ".resnets." in m_name:
+                # down_blocks.1.resnets.1.conv1
+                _, block_num, _, resnet_num, submodule_name = m_name.split(".")
+                block_num = int(block_num)
+                resnet_num = int(resnet_num)
+
+                # if block_num >= seamless_down_blocks:
+                if block_num >= len(model.down_blocks) - skipped_layers:
                     continue
 
-                if ".resnets." in m_name:
-                    if ".conv2" in m_name:
-                        continue
-                    if ".conv_shortcut" in m_name:
-                        continue
-
-            """
-            if isinstance(model, UNet2DConditionModel):
-                if False and ".upsamplers." in m_name:
+                if resnet_num > 0 and skip_second_resnet:
                     continue
 
-                if False and ".downsamplers." in m_name:
+                if submodule_name == "conv2" and skip_conv2:
                     continue
 
-                if True and ".resnets." in m_name:
-                    if True and ".conv1" in m_name:
-                        if False and "down_blocks" in m_name:
-                            continue
-                        if False and "mid_block" in m_name:
-                            continue
-                        if False and "up_blocks" in m_name:
-                            continue
+            m.asymmetric_padding_mode = {}
+            m.asymmetric_padding = {}
+            m.asymmetric_padding_mode["x"] = "circular" if ("x" in axes) else "constant"
+            m.asymmetric_padding["x"] = (
+                m._reversed_padding_repeated_twice[0],
+                m._reversed_padding_repeated_twice[1],
+                0,
+                0,
+            )
+            m.asymmetric_padding_mode["y"] = "circular" if ("y" in axes) else "constant"
+            m.asymmetric_padding["y"] = (
+                0,
+                0,
+                m._reversed_padding_repeated_twice[2],
+                m._reversed_padding_repeated_twice[3],
+            )
 
-                    if True and ".conv2" in m_name:
-                        continue
-
-                    if True and ".conv_shortcut" in m_name:
-                        continue
-
-                if True and ".attentions." in m_name:
-                    continue
-
-                if False and m_name in ["conv_in", "conv_out"]:
-                    continue
-            """
-
-            if isinstance(m, (nn.Conv2d, nn.ConvTranspose2d)):
-                m.asymmetric_padding_mode = {}
-                m.asymmetric_padding = {}
-                m.asymmetric_padding_mode["x"] = "circular" if ("x" in seamless_axes) else "constant"
-                m.asymmetric_padding["x"] = (
-                    m._reversed_padding_repeated_twice[0],
-                    m._reversed_padding_repeated_twice[1],
-                    0,
-                    0,
-                )
-                m.asymmetric_padding_mode["y"] = "circular" if ("y" in seamless_axes) else "constant"
-                m.asymmetric_padding["y"] = (
-                    0,
-                    0,
-                    m._reversed_padding_repeated_twice[2],
-                    m._reversed_padding_repeated_twice[3],
-                )
-
-                to_restore.append((m, m._conv_forward))
-                m._conv_forward = _conv_forward_asymmetric.__get__(m, nn.Conv2d)
+            to_restore.append((m, m._conv_forward))
+            m._conv_forward = _conv_forward_asymmetric.__get__(m, nn.Conv2d)
 
         yield
 

invokeai/backend/util/devices.py

@@ -44,7 +44,7 @@ def torch_dtype(device: torch.device) -> torch.dtype:
     if config.full_precision:
         return torch.float32
     if choose_precision(device) == "float16":
-        return torch.float16
+        return torch.bfloat16 if device.type == "cuda" else torch.float16
     else:
         return torch.float32
 

invokeai/frontend/install/invokeai_update.py

@@ -68,12 +68,9 @@ def welcome(latest_release: str, latest_prerelease: str):
         yield ""
         yield "This script will update InvokeAI to the latest release, or to the development version of your choice."
         yield ""
-        yield "When updating to an arbitrary tag or branch, be aware that the front end may be mismatched to the backend,"
-        yield "making the web frontend unusable. Please downgrade to the latest release if this happens."
-        yield ""
         yield "[bold yellow]Options:"
         yield f"""[1] Update to the latest [bold]official release[/bold] ([italic]{latest_release}[/italic])
-[2] Update to the latest [bold]pre-release[/bold] (may be buggy; caveat emptor!) ([italic]{latest_prerelease}[/italic])
+[2] Update to the latest [bold]pre-release[/bold] (may be buggy, database backups are recommended before installation; caveat emptor!) ([italic]{latest_prerelease}[/italic])
 [3] Manually enter the [bold]version[/bold] you wish to update to"""
 
     console.rule()

invokeai/frontend/web/.eslintignore

@@ -7,4 +7,4 @@ stats.html
 index.html
 .yarn/
 *.scss
-src/services/api/schema.d.ts
+src/services/api/schema.ts

invokeai/frontend/web/.prettierignore

@@ -9,7 +9,7 @@ index.html
 .yarn/
 .yalc/
 *.scss
-src/services/api/schema.d.ts
+src/services/api/schema.ts
 static/
 src/theme/css/overlayscrollbars.css
 src/theme_/css/overlayscrollbars.css

invokeai/frontend/web/index.html

@@ -1,24 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Expires" content="0">
-    <title>InvokeAI - A Stable Diffusion Toolkit</title>
-    <link rel="shortcut icon" type="icon" href="favicon.ico" />
-    <style>
-      html,
-      body {
-        padding: 0;
-        margin: 0;
-      }
-    </style>
-  </head>
 
-  <body dir="ltr">
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+  <meta http-equiv="Pragma" content="no-cache">
+  <meta http-equiv="Expires" content="0">
+  <title>InvokeAI - A Stable Diffusion Toolkit</title>
+  <link rel="mask-icon" href="/invoke-key-ylw-sm.svg" color="#E6FD13" sizes="any" />
+  <link rel="icon" href="/invoke-key-char-on-ylw.svg" />
+  <style>
+    html,
+    body {
+      padding: 0;
+      margin: 0;
+    }
+  </style>
+</head>
+
+<body dir="ltr">
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

invokeai/frontend/web/package.json

@@ -68,7 +68,7 @@
     "@fontsource-variable/inter": "^5.0.16",
     "@mantine/form": "6.0.21",
     "@nanostores/react": "^0.7.1",
-    "@reduxjs/toolkit": "^2.0.1",
+    "@reduxjs/toolkit": "2.0.1",
     "@roarr/browser-log-writer": "^1.3.0",
     "chakra-react-select": "^4.7.6",
     "compare-versions": "^6.1.0",
@@ -94,7 +94,7 @@
     "react-i18next": "^14.0.0",
     "react-icons": "^4.12.0",
     "react-konva": "^18.2.10",
-    "react-redux": "^9.0.4",
+    "react-redux": "9.0.4",
     "react-resizable-panels": "^1.0.7",
     "react-select": "5.8.0",
     "react-textarea-autosize": "^8.5.3",
@@ -167,5 +167,10 @@
     "vite-plugin-dts": "^3.7.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^4.2.3"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "reselect@5.0.1": "patches/reselect@5.0.1.patch"
+    }
   }
 }

invokeai/frontend/web/pnpm-lock.yaml

@@ -4,6 +4,11 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+patchedDependencies:
+  reselect@5.0.1:
+    hash: kvbgwzjyy4x4fnh7znyocvb75q
+    path: patches/reselect@5.0.1.patch
+
 dependencies:
   '@chakra-ui/anatomy':
     specifier: ^2.2.2
@@ -54,7 +59,7 @@ dependencies:
     specifier: ^0.7.1
     version: 0.7.1(nanostores@0.9.5)(react@18.2.0)
   '@reduxjs/toolkit':
-    specifier: ^2.0.1
+    specifier: 2.0.1
     version: 2.0.1(react-redux@9.0.4)(react@18.2.0)
   '@roarr/browser-log-writer':
     specifier: ^1.3.0
@@ -132,7 +137,7 @@ dependencies:
     specifier: ^18.2.10
     version: 18.2.10(konva@9.3.0)(react-dom@18.2.0)(react@18.2.0)
   react-redux:
-    specifier: ^9.0.4
+    specifier: 9.0.4
     version: 9.0.4(@types/react@18.2.46)(react@18.2.0)(redux@5.0.1)
   react-resizable-panels:
     specifier: ^1.0.7
@@ -4565,7 +4570,7 @@ packages:
       react-redux: 9.0.4(@types/react@18.2.46)(react@18.2.0)(redux@5.0.1)
       redux: 5.0.1
       redux-thunk: 3.1.0(redux@5.0.1)
-      reselect: 5.0.1
+      reselect: 5.0.1(patch_hash=kvbgwzjyy4x4fnh7znyocvb75q)
     dev: false
 
   /@roarr/browser-log-writer@1.3.0:
@@ -11932,9 +11937,10 @@ packages:
     hasBin: true
     dev: true
 
-  /reselect@5.0.1:
+  /reselect@5.0.1(patch_hash=kvbgwzjyy4x4fnh7znyocvb75q):
     resolution: {integrity: sha512-D72j2ubjgHpvuCiORWkOUxndHJrxDaSolheiz5CO+roz8ka97/4msh2E8F5qay4GawR5vzBt5MkbDHT+Rdy/Wg==}
     dev: false
+    patched: true
 
   /resize-observer-polyfill@1.5.1:
     resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}

invokeai/frontend/web/public/invoke-key-char-on-ylw.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="6" fill="#E6FD13"/>
+<path d="M19.2378 10.9H25V7H7V10.9H12.7622L19.2378 21.1H25V25H7V21.1H12.7622" stroke="#181818" stroke-width="1.5"/>
+</svg>

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

@@ -83,10 +83,6 @@
             "title": "خيارات التثبيت",
             "desc": "ثبت لوحة الخيارات"
         },
-        "toggleViewer": {
-            "title": "تبديل العارض",
-            "desc": "فتح وإغلاق مشاهد الصور"
-        },
         "toggleGallery": {
             "title": "تبديل المعرض",
             "desc": "فتح وإغلاق درابزين المعرض"
@@ -147,10 +143,6 @@
             "title": "الصورة التالية",
             "desc": "عرض الصورة التالية في الصالة"
         },
-        "toggleGalleryPin": {
-            "title": "تبديل تثبيت الصالة",
-            "desc": "يثبت ويفتح تثبيت الصالة على الواجهة الرسومية"
-        },
         "increaseGalleryThumbSize": {
             "title": "زيادة حجم صورة الصالة",
             "desc": "يزيد حجم الصور المصغرة في الصالة"

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

@@ -168,10 +168,6 @@
             "title": "Optionen anheften",
             "desc": "Anheften des Optionsfeldes"
         },
-        "toggleViewer": {
-            "title": "Bildbetrachter umschalten",
-            "desc": "Bildbetrachter öffnen und schließen"
-        },
         "toggleGallery": {
             "title": "Galerie umschalten",
             "desc": "Öffnen und Schließen des Galerie-Schubfachs"
@@ -232,10 +228,6 @@
             "title": "Nächstes Bild",
             "desc": "Nächstes Bild in Galerie anzeigen"
         },
-        "toggleGalleryPin": {
-            "title": "Galerie anheften umschalten",
-            "desc": "Heftet die Galerie an die Benutzeroberfläche bzw. löst die sie"
-        },
         "increaseGalleryThumbSize": {
             "title": "Größe der Galeriebilder erhöhen",
             "desc": "Vergrößert die Galerie-Miniaturansichten"

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

@@ -86,6 +86,7 @@
         "copyError": "$t(gallery.copy) Error",
         "close": "Close",
         "on": "On",
+        "or": "or",
         "checkpoint": "Checkpoint",
         "communityLabel": "Community",
         "controlNet": "ControlNet",
@@ -156,6 +157,7 @@
         "save": "Save",
         "saveAs": "Save As",
         "settingsLabel": "Settings",
+        "preferencesLabel": "Preferences",
         "simple": "Simple",
         "somethingWentWrong": "Something went wrong",
         "statusConnected": "Connected",
@@ -365,7 +367,8 @@
         "back": "back",
         "batchFailedToQueue": "Failed to Queue Batch",
         "graphQueued": "Graph queued",
-        "graphFailedToQueue": "Failed to queue graph"
+        "graphFailedToQueue": "Failed to queue graph",
+        "openQueue": "Open Queue"
     },
     "invocationCache": {
         "invocationCache": "Invocation Cache",
@@ -425,6 +428,9 @@
         "problemDeletingImagesDesc": "One or more images could not be deleted"
     },
     "hotkeys": {
+        "searchHotkeys": "Search Hotkeys",
+        "clearSearch": "Clear Search",
+        "noHotkeysFound": "No Hotkeys Found",
         "acceptStagingImage": {
             "desc": "Accept Current Staging Area Image",
             "title": "Accept Staging Image"
@@ -433,11 +439,15 @@
             "desc": "Opens the add node menu",
             "title": "Add Nodes"
         },
-        "appHotkeys": "App Hotkeys",
+        "appHotkeys": "App",
         "cancel": {
-            "desc": "Cancel image generation",
+            "desc": "Cancel current queue item",
             "title": "Cancel"
         },
+        "cancelAndClear": {
+            "desc": "Cancel current queue item and clear all pending items",
+            "title": "Cancel and Clear"
+        },
         "changeTabs": {
             "desc": "Switch to another workspace",
             "title": "Change Tabs"
@@ -494,8 +504,8 @@
             "desc": "Focus the prompt input area",
             "title": "Focus Prompt"
         },
-        "galleryHotkeys": "Gallery Hotkeys",
-        "generalHotkeys": "General Hotkeys",
+        "galleryHotkeys": "Gallery",
+        "generalHotkeys": "General",
         "hideMask": {
             "desc": "Hide and unhide mask",
             "title": "Hide Mask"
@@ -516,7 +526,7 @@
             "desc": "Generate an image",
             "title": "Invoke"
         },
-        "keyboardShortcuts": "Keyboard Shortcuts",
+        "keyboardShortcuts": "Hotkeys",
         "maximizeWorkSpace": {
             "desc": "Close panels and maximize work area",
             "title": "Maximize Workspace"
@@ -537,7 +547,7 @@
             "desc": "Next Staging Area Image",
             "title": "Next Staging Image"
         },
-        "nodesHotkeys": "Nodes Hotkeys",
+        "nodesHotkeys": "Nodes",
         "pinOptions": {
             "desc": "Pin the options panel",
             "title": "Pin Options"
@@ -606,31 +616,31 @@
             "desc": "Open and close the gallery drawer",
             "title": "Toggle Gallery"
         },
-        "toggleGalleryPin": {
-            "desc": "Pins and unpins the gallery to the UI",
-            "title": "Toggle Gallery Pin"
+        "toggleOptions": {
+            "desc": "Open and close the options panel",
+            "title": "Toggle Options"
+        },
+        "toggleOptionsAndGallery": {
+            "desc": "Open and close the options and gallery panels",
+            "title": "Toggle Options and Gallery"
+        },
+        "resetOptionsAndGallery": {
+            "desc": "Resets the options and gallery panels",
+            "title": "Reset Options and Gallery"
         },
         "toggleLayer": {
             "desc": "Toggles mask/base layer selection",
             "title": "Toggle Layer"
         },
-        "toggleOptions": {
-            "desc": "Open and close the options panel",
-            "title": "Toggle Options"
-        },
         "toggleSnap": {
             "desc": "Toggles Snap to Grid",
             "title": "Toggle Snap"
         },
-        "toggleViewer": {
-            "desc": "Open and close Image Viewer",
-            "title": "Toggle Viewer"
-        },
         "undoStroke": {
             "desc": "Undo a brush stroke",
             "title": "Undo Stroke"
         },
-        "unifiedCanvasHotkeys": "Unified Canvas Hotkeys",
+        "unifiedCanvasHotkeys": "Unified Canvas",
         "upscale": {
             "desc": "Upscale the current image",
             "title": "Upscale"
@@ -1071,6 +1081,11 @@
         "aspect": "Aspect",
         "aspectRatio": "Aspect Ratio",
         "aspectRatioFree": "Free",
+        "lockAspectRatio": "Lock Aspect Ratio",
+        "swapDimensions": "Swap Dimensions",
+        "setToOptimalSize": "Optimize size for model",
+        "setToOptimalSizeTooSmall": "$t(parameters.setToOptimalSize) (may be too small)",
+        "setToOptimalSizeTooLarge": "$t(parameters.setToOptimalSize) (may be too large)",
         "boundingBoxHeader": "Bounding Box",
         "boundingBoxHeight": "Bounding Box Height",
         "boundingBoxWidth": "Bounding Box Width",
@@ -1217,11 +1232,12 @@
             "perIterationDesc": "Use a different seed for each iteration",
             "perPromptLabel": "Seed per Image",
             "perPromptDesc": "Use a different seed for each image"
-        }
+        },
+        "loading": "Generating Dynamic Prompts..."
     },
     "sdxl": {
         "cfgScale": "CFG Scale",
-        "concatPromptStyle": "Concatenating Prompt & Style",
+        "concatPromptStyle": "Linking Prompt & Style",
         "freePromptStyle": "Manual Style Prompting",
         "denoisingStrength": "Denoising Strength",
         "loading": "Loading...",

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

@@ -127,10 +127,6 @@
             "title": "Fijar opciones",
             "desc": "Fijar el panel de opciones"
         },
-        "toggleViewer": {
-            "title": "Alternar visor",
-            "desc": "Mostar y ocultar el visor de imágenes"
-        },
         "toggleGallery": {
             "title": "Alternar galería",
             "desc": "Mostar y ocultar la galería de imágenes"
@@ -191,10 +187,6 @@
             "title": "Imagen siguiente",
             "desc": "Muetra la imagen siguiente en la galería"
         },
-        "toggleGalleryPin": {
-            "title": "Alternar fijado de galería",
-            "desc": "Fijar o desfijar la galería en la interfaz"
-        },
         "increaseGalleryThumbSize": {
             "title": "Aumentar imagen en galería",
             "desc": "Aumenta el tamaño de las miniaturas de la galería"

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

@@ -96,10 +96,6 @@
             "title": "Epinglage des options",
             "desc": "Epingler le panneau d'options"
         },
-        "toggleViewer": {
-            "title": "Affichage de la visionneuse",
-            "desc": "Afficher et masquer la visionneuse d'image"
-        },
         "toggleGallery": {
             "title": "Affichage de la galerie",
             "desc": "Afficher et masquer la galerie"
@@ -160,10 +156,6 @@
             "title": "Image suivante",
             "desc": "Afficher l'image suivante dans la galerie"
         },
-        "toggleGalleryPin": {
-            "title": "Activer/désactiver l'épinglage de la galerie",
-            "desc": "Épingle ou dépingle la galerie à l'interface"
-        },
         "increaseGalleryThumbSize": {
             "title": "Augmenter la taille des miniatures de la galerie",
             "desc": "Augmente la taille des miniatures de la galerie"

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

@@ -192,10 +192,6 @@
             "title": "הצמד הגדרות",
             "desc": "הצמד את פאנל ההגדרות"
         },
-        "toggleViewer": {
-            "title": "הצג את חלון ההצגה",
-            "desc": "פתח וסגור את מציג התמונות"
-        },
         "changeTabs": {
             "title": "החלף לשוניות",
             "desc": "החלף לאיזור עבודה אחר"
@@ -236,10 +232,6 @@
             "title": "תמונה קודמת",
             "desc": "הצג את התמונה הקודמת בגלריה"
         },
-        "toggleGalleryPin": {
-            "title": "הצג את מצמיד הגלריה",
-            "desc": "הצמדה וביטול הצמדה של הגלריה לממשק המשתמש"
-        },
         "decreaseGalleryThumbSize": {
             "title": "הקטנת גודל תמונת גלריה",
             "desc": "מקטין את גודל התמונות הממוזערות של הגלריה"

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

@@ -114,7 +114,9 @@
         "nextPage": "Pagina successiva",
         "saveAs": "Salva come",
         "unsaved": "Non salvato",
-        "direction": "Direzione"
+        "direction": "Direzione",
+        "advancedOptions": "Opzioni avanzate",
+        "free": "Libero"
     },
     "gallery": {
         "generations": "Generazioni",
@@ -132,7 +134,7 @@
         "noImagesInGallery": "Nessuna immagine da visualizzare",
         "deleteImage": "Elimina l'immagine",
         "deleteImagePermanent": "Le immagini eliminate non possono essere ripristinate.",
-        "deleteImageBin": "Le immagini eliminate verranno spostate nel Cestino del tuo sistema operativo.",
+        "deleteImageBin": "Le immagini eliminate verranno spostate nel cestino del tuo sistema operativo.",
         "assets": "Risorse",
         "autoAssignBoardOnClick": "Assegna automaticamente la bacheca al clic",
         "featuresWillReset": "Se elimini questa immagine, quelle funzionalità verranno immediatamente ripristinate.",
@@ -157,18 +159,18 @@
         "problemDeletingImages": "Problema durante l'eliminazione delle immagini"
     },
     "hotkeys": {
-        "keyboardShortcuts": "Tasti rapidi",
-        "appHotkeys": "Tasti di scelta rapida dell'applicazione",
-        "generalHotkeys": "Tasti di scelta rapida generali",
-        "galleryHotkeys": "Tasti di scelta rapida della galleria",
-        "unifiedCanvasHotkeys": "Tasti di scelta rapida Tela Unificata",
+        "keyboardShortcuts": "Tasti di scelta rapida",
+        "appHotkeys": "Applicazione",
+        "generalHotkeys": "Generale",
+        "galleryHotkeys": "Galleria",
+        "unifiedCanvasHotkeys": "Tela Unificata",
         "invoke": {
             "title": "Invoke",
             "desc": "Genera un'immagine"
         },
         "cancel": {
             "title": "Annulla",
-            "desc": "Annulla la generazione dell'immagine"
+            "desc": "Annulla l'elemento della coda corrente"
         },
         "focusPrompt": {
             "title": "Metti a fuoco il Prompt",
@@ -182,12 +184,8 @@
             "title": "Appunta le opzioni",
             "desc": "Blocca il pannello delle opzioni"
         },
-        "toggleViewer": {
-            "title": "Attiva/disattiva visualizzatore",
-            "desc": "Apre e chiude il visualizzatore immagini"
-        },
         "toggleGallery": {
-            "title": "Attiva/disattiva Galleria",
+            "title": "Attiva/disattiva galleria",
             "desc": "Apre e chiude il pannello della galleria"
         },
         "maximizeWorkSpace": {
@@ -246,10 +244,6 @@
             "title": "Immagine successiva",
             "desc": "Visualizza l'immagine successiva nella galleria"
         },
-        "toggleGalleryPin": {
-            "title": "Attiva/disattiva il blocco della galleria",
-            "desc": "Blocca/sblocca la galleria dall'interfaccia utente"
-        },
         "increaseGalleryThumbSize": {
             "title": "Aumenta dimensione immagini nella galleria",
             "desc": "Aumenta la dimensione delle miniature della galleria"
@@ -362,11 +356,26 @@
             "title": "Accetta l'immagine della sessione",
             "desc": "Accetta l'immagine dell'area della sessione corrente"
         },
-        "nodesHotkeys": "Tasti di scelta rapida dei Nodi",
+        "nodesHotkeys": "Nodi",
         "addNodes": {
             "title": "Aggiungi Nodi",
             "desc": "Apre il menu Aggiungi Nodi"
-        }
+        },
+        "cancelAndClear": {
+            "desc": "Annulla l'elemento della coda corrente e cancella tutti gli elementi in sospeso",
+            "title": "Annulla e cancella"
+        },
+        "resetOptionsAndGallery": {
+            "title": "Ripristina Opzioni e Galleria",
+            "desc": "Reimposta le opzioni e i pannelli della galleria"
+        },
+        "searchHotkeys": "Cerca tasti di scelta rapida",
+        "noHotkeysFound": "Nessun tasto di scelta rapida trovato",
+        "toggleOptionsAndGallery": {
+            "desc": "Apre e chiude le opzioni e i pannelli della galleria",
+            "title": "Attiva/disattiva le Opzioni e la Galleria"
+        },
+        "clearSearch": "Cancella ricerca"
     },
     "modelManager": {
         "modelManager": "Gestione Modelli",
@@ -581,8 +590,8 @@
         "hidePreview": "Nascondi l'anteprima",
         "showPreview": "Mostra l'anteprima",
         "noiseSettings": "Rumore",
-        "seamlessXAxis": "Asse X",
-        "seamlessYAxis": "Asse Y",
+        "seamlessXAxis": "Piastrella senza cucitura Asse X",
+        "seamlessYAxis": "Piastrella senza cucitura Asse Y",
         "scheduler": "Campionatore",
         "boundingBoxWidth": "Larghezza riquadro di delimitazione",
         "boundingBoxHeight": "Altezza riquadro di delimitazione",
@@ -642,7 +651,14 @@
         "unmasked": "No maschera",
         "cfgRescaleMultiplier": "Moltiplicatore riscala CFG",
         "cfgRescale": "Riscala CFG",
-        "useSize": "Usa Dimensioni"
+        "useSize": "Usa Dimensioni",
+        "setToOptimalSize": "Ottimizza le dimensioni per il modello",
+        "setToOptimalSizeTooSmall": "$t(parameters.setToOptimalSize) (potrebbe essere troppo piccolo)",
+        "imageSize": "Dimensione dell'immagine",
+        "lockAspectRatio": "Blocca proporzioni",
+        "swapDimensions": "Scambia dimensioni",
+        "aspect": "Aspetto",
+        "setToOptimalSizeTooLarge": "$t(parameters.setToOptimalSize) (potrebbe essere troppo grande)"
     },
     "settings": {
         "models": "Modelli",
@@ -1213,12 +1229,13 @@
         "minConfidence": "Confidenza minima",
         "scribble": "Scribble",
         "amult": "Angolo di illuminazione",
-        "coarse": "Approssimativo"
+        "coarse": "Approssimativo",
+        "resizeSimple": "Ridimensiona (semplice)"
     },
     "queue": {
         "queueFront": "Aggiungi all'inizio della coda",
         "queueBack": "Aggiungi alla coda",
-        "queueCountPrediction": "Aggiungi {{predicted}} alla coda",
+        "queueCountPrediction": "{{promptsCount}} prompt × {{iterations}} iterazioni -> {{count}} generazioni",
         "queue": "Coda",
         "status": "Stato",
         "pruneSucceeded": "Rimossi {{item_count}} elementi completati dalla coda",
@@ -1276,7 +1293,8 @@
         "graphFailedToQueue": "Impossibile mettere in coda il grafico",
         "queueMaxExceeded": "È stato superato il limite massimo di {{max_queue_size}} e {{skip}} elementi verrebbero saltati",
         "batchFieldValues": "Valori Campi Lotto",
-        "time": "Tempo"
+        "time": "Tempo",
+        "openQueue": "Apri coda"
     },
     "embedding": {
         "noMatchingEmbedding": "Nessun Incorporamento corrispondente",
@@ -1296,7 +1314,12 @@
         "noLoRAsInstalled": "Nessun LoRA installato",
         "esrganModel": "Modello ESRGAN",
         "addLora": "Aggiungi LoRA",
-        "noLoRAsLoaded": "Nessuna LoRA caricata"
+        "noLoRAsLoaded": "Nessun LoRA caricato",
+        "noMainModelSelected": "Nessun modello principale selezionato",
+        "allLoRAsAdded": "Tutti i LoRA aggiunti",
+        "defaultVAE": "VAE predefinito",
+        "incompatibleBaseModel": "Modello base incompatibile",
+        "loraAlreadyAdded": "LoRA già aggiunto"
     },
     "invocationCache": {
         "disable": "Disabilita",
@@ -1330,7 +1353,9 @@
         "promptsWithCount_many": "{{count}} Prompt",
         "promptsWithCount_other": "{{count}} Prompt",
         "dynamicPrompts": "Prompt dinamici",
-        "promptsPreview": "Anteprima dei prompt"
+        "promptsPreview": "Anteprima dei prompt",
+        "showDynamicPrompts": "Mostra prompt dinamici",
+        "loading": "Generazione prompt dinamici..."
     },
     "popovers": {
         "paramScheduler": {
@@ -1556,7 +1581,7 @@
         "scheduler": "Campionatore",
         "noModelsAvailable": "Nessun modello disponibile",
         "denoisingStrength": "Forza di riduzione del rumore",
-        "concatPromptStyle": "Concatena Prompt & Stile",
+        "concatPromptStyle": "Collega Prompt & Stile",
         "loading": "Caricamento...",
         "steps": "Passi",
         "refinerStart": "Inizio Affinamento",
@@ -1567,7 +1592,8 @@
         "useRefiner": "Utilizza l'affinatore",
         "refinermodel": "Modello Affinatore",
         "posAestheticScore": "Punteggio estetico positivo",
-        "posStylePrompt": "Prompt Stile positivo"
+        "posStylePrompt": "Prompt Stile positivo",
+        "freePromptStyle": "Prompt di stile manuale"
     },
     "metadata": {
         "initImage": "Immagine iniziale",
@@ -1640,5 +1666,28 @@
     },
     "app": {
         "storeNotInitialized": "Il negozio non è inizializzato"
+    },
+    "accordions": {
+        "compositing": {
+            "infillTab": "Riempimento",
+            "coherenceTab": "Passaggio di coerenza",
+            "title": "Composizione"
+        },
+        "control": {
+            "controlAdaptersTab": "Adattatori di Controllo",
+            "ipTab": "Prompt immagine",
+            "title": "Controllo"
+        },
+        "generation": {
+            "title": "Generazione",
+            "conceptsTab": "Concetti",
+            "modelTab": "Modello"
+        },
+        "advanced": {
+            "title": "Avanzate"
+        },
+        "image": {
+            "title": "Immagine"
+        }
     }
 }

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

@@ -133,10 +133,6 @@
             "title": "ピン",
             "desc": "オプションパネルを固定"
         },
-        "toggleViewer": {
-            "title": "ビュワーのトグル",
-            "desc": "ビュワーを開閉"
-        },
         "toggleGallery": {
             "title": "ギャラリーのトグル",
             "desc": "ギャラリードロワーの開閉"
@@ -197,10 +193,6 @@
             "title": "次の画像",
             "desc": "ギャラリー内の1つ後の画像を表示"
         },
-        "toggleGalleryPin": {
-            "title": "ギャラリードロワーの固定",
-            "desc": "ギャラリーをUIにピン留め/解除"
-        },
         "increaseGalleryThumbSize": {
             "title": "ギャラリーの画像を拡大",
             "desc": "ギャラリーのサムネイル画像を拡大"

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

@@ -407,10 +407,6 @@
         "maxFaces": "Max Faces"
     },
     "hotkeys": {
-        "toggleGalleryPin": {
-            "title": "Gallery Pin 전환",
-            "desc": "갤러리를 UI에 고정했다가 풉니다"
-        },
         "toggleSnap": {
             "desc": "Snap을 Grid로 전환",
             "title": "Snap 전환"
@@ -600,10 +596,6 @@
             "desc": "노드 추가 메뉴 열기",
             "title": "노드 추가"
         },
-        "toggleViewer": {
-            "desc": "이미지 뷰어 열기 및 닫기",
-            "title": "Viewer 전환"
-        },
         "undoStroke": {
             "title": "Stroke 실행 취소",
             "desc": "brush stroke 실행 취소"

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

@@ -148,10 +148,6 @@
             "title": "Zet Opties vast",
             "desc": "Zet het deelscherm Opties vast"
         },
-        "toggleViewer": {
-            "title": "Zet Viewer vast",
-            "desc": "Opent of sluit Afbeeldingsviewer"
-        },
         "toggleGallery": {
             "title": "Zet Galerij vast",
             "desc": "Opent of sluit het deelscherm Galerij"
@@ -212,10 +208,6 @@
             "title": "Volgende afbeelding",
             "desc": "Toont de volgende afbeelding in de galerij"
         },
-        "toggleGalleryPin": {
-            "title": "Zet galerij vast/los",
-            "desc": "Zet de galerij vast of los aan de gebruikersinterface"
-        },
         "increaseGalleryThumbSize": {
             "title": "Vergroot afbeeldingsgrootte galerij",
             "desc": "Vergroot de grootte van de galerijminiaturen"

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

@@ -86,10 +86,6 @@
             "title": "Przypnij opcje",
             "desc": "Przypina panel opcji"
         },
-        "toggleViewer": {
-            "title": "Przełącz podgląd",
-            "desc": "Otwiera lub zamyka widok podglądu"
-        },
         "toggleGallery": {
             "title": "Przełącz galerię",
             "desc": "Wysuwa lub chowa galerię"
@@ -150,10 +146,6 @@
             "title": "Następny obraz",
             "desc": "Aktywuje następny obraz z galerii"
         },
-        "toggleGalleryPin": {
-            "title": "Przypnij galerię",
-            "desc": "Przypina lub odpina widok galerii"
-        },
         "increaseGalleryThumbSize": {
             "title": "Powiększ obrazy",
             "desc": "Powiększa rozmiar obrazów w galerii"

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

@@ -81,10 +81,6 @@
     "hotkeys": {
         "generalHotkeys": "Atalhos Gerais",
         "galleryHotkeys": "Atalhos da Galeria",
-        "toggleViewer": {
-            "title": "Ativar Visualizador",
-            "desc": "Abrir e fechar o Visualizador de Imagens"
-        },
         "maximizeWorkSpace": {
             "desc": "Fechar painéis e maximixar área de trabalho",
             "title": "Maximizar a Área de Trabalho"
@@ -232,10 +228,6 @@
             "title": "Apagar Imagem",
             "desc": "Apaga a imagem atual"
         },
-        "toggleGalleryPin": {
-            "title": "Ativar Fixar Galeria",
-            "desc": "Fixa e desafixa a galeria na interface"
-        },
         "increaseGalleryThumbSize": {
             "title": "Aumentar Tamanho da Galeria de Imagem",
             "desc": "Aumenta o tamanho das thumbs na galeria"

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

@@ -103,10 +103,6 @@
             "title": "Fixar Opções",
             "desc": "Fixar o painel de opções"
         },
-        "toggleViewer": {
-            "title": "Ativar Visualizador",
-            "desc": "Abrir e fechar o Visualizador de Imagens"
-        },
         "toggleGallery": {
             "title": "Ativar Galeria",
             "desc": "Abrir e fechar a gaveta da galeria"
@@ -167,10 +163,6 @@
             "title": "Próxima Imagem",
             "desc": "Mostra a próxima imagem na galeria"
         },
-        "toggleGalleryPin": {
-            "title": "Ativar Fixar Galeria",
-            "desc": "Fixa e desafixa a galeria na interface"
-        },
         "increaseGalleryThumbSize": {
             "title": "Aumentar Tamanho da Galeria de Imagem",
             "desc": "Aumenta o tamanho das thumbs na galeria"

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

@@ -189,10 +189,6 @@
             "title": "Закрепить параметры",
             "desc": "Закрепить панель параметров"
         },
-        "toggleViewer": {
-            "title": "Показать просмотр",
-            "desc": "Открывать и закрывать просмотрщик изображений"
-        },
         "toggleGallery": {
             "title": "Показать галерею",
             "desc": "Открывать и закрывать ящик галереи"
@@ -253,10 +249,6 @@
             "title": "Следующее изображение",
             "desc": "Отображение следующего изображения в галерее"
         },
-        "toggleGalleryPin": {
-            "title": "Закрепить галерею",
-            "desc": "Закрепляет и открепляет галерею"
-        },
         "increaseGalleryThumbSize": {
             "title": "Увеличить размер миниатюр галереи",
             "desc": "Увеличивает размер миниатюр галереи"

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

@@ -129,10 +129,6 @@
             "title": "Växla inställningar",
             "desc": "Öppna och stäng alternativpanelen"
         },
-        "toggleViewer": {
-            "title": "Växla visaren",
-            "desc": "Öppna och stäng bildvisaren"
-        },
         "toggleGallery": {
             "title": "Växla galleri",
             "desc": "Öppna eller stäng galleribyrån"
@@ -193,10 +189,6 @@
             "title": "Nästa bild",
             "desc": "Visa nästa bild"
         },
-        "toggleGalleryPin": {
-            "title": "Växla gallerinål",
-            "desc": "Nålar fast eller nålar av galleriet i gränssnittet"
-        },
         "increaseGalleryThumbSize": {
             "title": "Förstora galleriets bildstorlek",
             "desc": "Förstora miniatyrbildernas storlek"

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

@@ -111,10 +111,6 @@
             "title": "Закріпити параметри",
             "desc": "Закріпити панель параметрів"
         },
-        "toggleViewer": {
-            "title": "Показати перегляд",
-            "desc": "Відкривати і закривати переглядач зображень"
-        },
         "toggleGallery": {
             "title": "Показати галерею",
             "desc": "Відкривати і закривати скриньку галереї"
@@ -175,10 +171,6 @@
             "title": "Наступне зображення",
             "desc": "Відображення наступного зображення в галереї"
         },
-        "toggleGalleryPin": {
-            "title": "Закріпити галерею",
-            "desc": "Закріплює і відкріплює галерею"
-        },
         "increaseGalleryThumbSize": {
             "title": "Збільшити розмір мініатюр галереї",
             "desc": "Збільшує розмір мініатюр галереї"

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

@@ -189,10 +189,6 @@
             "title": "常开选项卡",
             "desc": "保持选项浮窗常开"
         },
-        "toggleViewer": {
-            "title": "切换图像查看器",
-            "desc": "打开或关闭图像查看器"
-        },
         "toggleGallery": {
             "title": "切换图库",
             "desc": "打开或关闭图库"
@@ -253,10 +249,6 @@
             "title": "下一张图像",
             "desc": "显示图库中的下一张图像"
         },
-        "toggleGalleryPin": {
-            "title": "切换图库常开",
-            "desc": "开关图库在界面中的常开模式"
-        },
         "increaseGalleryThumbSize": {
             "title": "增大预览尺寸",
             "desc": "增大图库中预览的尺寸"

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

@@ -1,21 +1,21 @@
-import { Flex, Grid } from '@chakra-ui/react';
-import { useStore } from '@nanostores/react';
+import { Box } from '@chakra-ui/react';
 import { useSocketIO } from 'app/hooks/useSocketIO';
 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 type { PartialAppConfig } from 'app/types/invokeai';
-import ImageUploader from 'common/components/ImageUploader';
+import ImageUploadOverlay from 'common/components/ImageUploadOverlay';
 import { useClearStorage } from 'common/hooks/useClearStorage';
+import { useFullscreenDropzone } from 'common/hooks/useFullscreenDropzone';
+import { useGlobalHotkeys } from 'common/hooks/useGlobalHotkeys';
 import { useGlobalModifiersInit } from 'common/hooks/useGlobalModifiers';
 import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
 import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal';
 import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal';
-import SiteHeader from 'features/system/components/SiteHeader';
 import { configChanged } from 'features/system/store/configSlice';
 import { languageSelector } from 'features/system/store/systemSelectors';
 import InvokeTabs from 'features/ui/components/InvokeTabs';
+import { AnimatePresence } from 'framer-motion';
 import i18n from 'i18n';
 import { size } from 'lodash-es';
 import { memo, useCallback, useEffect } from 'react';
@@ -44,6 +44,10 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
   // singleton!
   useSocketIO();
   useGlobalModifiersInit();
+  useGlobalHotkeys();
+
+  const { dropzone, isHandlingUpload, setIsHandlingUpload } =
+    useFullscreenDropzone();
 
   const handleReset = useCallback(() => {
     clearStorage();
@@ -66,23 +70,30 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => {
     dispatch(appStarted());
   }, [dispatch]);
 
-  const headerComponent = useStore($headerComponent);
-
   return (
     <ErrorBoundary
       onReset={handleReset}
       FallbackComponent={AppErrorBoundaryFallback}
     >
-      <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
-        <ImageUploader>
-          <Grid gap={4} p={4} gridAutoRows="min-content auto" w="full" h="full">
-            {headerComponent || <SiteHeader />}
-            <Flex gap={4} w="full" h="full">
-              <InvokeTabs />
-            </Flex>
-          </Grid>
-        </ImageUploader>
-      </Grid>
+      <Box
+        id="invoke-app-wrapper"
+        w="100vw"
+        h="100vh"
+        position="relative"
+        overflow="hidden"
+        {...dropzone.getRootProps()}
+      >
+        <input {...dropzone.getInputProps()} />
+        <InvokeTabs />
+        <AnimatePresence>
+          {dropzone.isDragActive && isHandlingUpload && (
+            <ImageUploadOverlay
+              dropzone={dropzone}
+              setIsHandlingUpload={setIsHandlingUpload}
+            />
+          )}
+        </AnimatePresence>
+      </Box>
       <DeleteImageModal />
       <ChangeBoardModal />
       <DynamicPromptsModal />

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

@@ -4,10 +4,12 @@ import type { Middleware } from '@reduxjs/toolkit';
 import { $socketOptions } from 'app/hooks/useSocketIO';
 import { $authToken } from 'app/store/nanostores/authToken';
 import { $baseUrl } from 'app/store/nanostores/baseUrl';
+import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
 import type { CustomStarUi } from 'app/store/nanostores/customStarUI';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
-import { $headerComponent } from 'app/store/nanostores/headerComponent';
+import { $galleryHeader } from 'app/store/nanostores/galleryHeader';
 import { $isDebugging } from 'app/store/nanostores/isDebugging';
+import { $logo } from 'app/store/nanostores/logo';
 import { $projectId } from 'app/store/nanostores/projectId';
 import { $queueId, DEFAULT_QUEUE_ID } from 'app/store/nanostores/queueId';
 import { $store } from 'app/store/nanostores/store';
@@ -28,9 +30,10 @@ interface Props extends PropsWithChildren {
   apiUrl?: string;
   token?: string;
   config?: PartialAppConfig;
-  headerComponent?: ReactNode;
+  customNavComponent?: ReactNode;
   middleware?: Middleware[];
   projectId?: string;
+  galleryHeader?: ReactNode;
   queueId?: string;
   selectedImage?: {
     imageName: string;
@@ -39,20 +42,23 @@ interface Props extends PropsWithChildren {
   customStarUi?: CustomStarUi;
   socketOptions?: Partial<ManagerOptions & SocketOptions>;
   isDebugging?: boolean;
+  logo?: ReactNode;
 }
 
 const InvokeAIUI = ({
   apiUrl,
   token,
   config,
-  headerComponent,
+  customNavComponent,
   middleware,
   projectId,
+  galleryHeader,
   queueId,
   selectedImage,
   customStarUi,
   socketOptions,
   isDebugging = false,
+  logo,
 }: Props) => {
   useEffect(() => {
     // configure API client token
@@ -108,14 +114,34 @@ const InvokeAIUI = ({
   }, [customStarUi]);
 
   useEffect(() => {
-    if (headerComponent) {
-      $headerComponent.set(headerComponent);
+    if (customNavComponent) {
+      $customNavComponent.set(customNavComponent);
     }
 
     return () => {
-      $headerComponent.set(undefined);
+      $customNavComponent.set(undefined);
     };
-  }, [headerComponent]);
+  }, [customNavComponent]);
+
+  useEffect(() => {
+    if (galleryHeader) {
+      $galleryHeader.set(galleryHeader);
+    }
+
+    return () => {
+      $galleryHeader.set(undefined);
+    };
+  }, [galleryHeader]);
+
+  useEffect(() => {
+    if (logo) {
+      $logo.set(logo);
+    }
+
+    return () => {
+      $logo.set(undefined);
+    };
+  }, [logo]);
 
   useEffect(() => {
     if (socketOptions) {
@@ -141,6 +167,15 @@ const InvokeAIUI = ({
 
   useEffect(() => {
     $store.set(store);
+    if (import.meta.env.MODE === 'development') {
+      window.$store = $store;
+    }
+    () => {
+      $store.set(undefined);
+      if (import.meta.env.MODE === 'development') {
+        window.$store = undefined;
+      }
+    };
   }, [store]);
 
   return (

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

@@ -11,7 +11,7 @@ import { memo, useCallback, useEffect } from 'react';
  */
 const Toaster = () => {
   const dispatch = useAppDispatch();
-  const toastQueue = useAppSelector((state) => state.system.toastQueue);
+  const toastQueue = useAppSelector((s) => s.system.toastQueue);
   const toast = useToast();
   useEffect(() => {
     toastQueue.forEach((t) => {

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

@@ -1,6 +1,4 @@
 import { createLogWriter } from '@roarr/browser-log-writer';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useEffect, useMemo } from 'react';
 import { ROARR, Roarr } from 'roarr';
@@ -8,17 +6,9 @@ import { ROARR, Roarr } from 'roarr';
 import type { LoggerNamespace } from './logger';
 import { $logger, BASE_CONTEXT, LOG_LEVEL_MAP, logger } from './logger';
 
-const selector = createMemoizedSelector(stateSelector, ({ system }) => {
-  const { consoleLogLevel, shouldLogToConsole } = system;
-
-  return {
-    consoleLogLevel,
-    shouldLogToConsole,
-  };
-});
-
 export const useLogger = (namespace: LoggerNamespace) => {
-  const { consoleLogLevel, shouldLogToConsole } = useAppSelector(selector);
+  const consoleLogLevel = useAppSelector((s) => s.system.consoleLogLevel);
+  const shouldLogToConsole = useAppSelector((s) => s.system.shouldLogToConsole);
 
   // The provided Roarr browser log writer uses localStorage to config logging to console
   useEffect(() => {

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

@@ -1,4 +1,9 @@
-import { createSelectorCreator, lruMemoize } from '@reduxjs/toolkit';
+import {
+  createDraftSafeSelectorCreator,
+  createSelectorCreator,
+  lruMemoize,
+} from '@reduxjs/toolkit';
+import type { GetSelectorsOptions } from '@reduxjs/toolkit/dist/entities/state_selectors';
 import { isEqual } from 'lodash-es';
 
 /**
@@ -19,3 +24,12 @@ export const createLruSelector = createSelectorCreator({
   memoize: lruMemoize,
   argsMemoize: lruMemoize,
 });
+
+export const createLruDraftSafeSelector = createDraftSafeSelectorCreator({
+  memoize: lruMemoize,
+  argsMemoize: lruMemoize,
+});
+
+export const getSelectorsOptions: GetSelectorsOptions = {
+  createSelector: createLruDraftSafeSelector,
+};

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

@@ -8,7 +8,6 @@ import { initialPostprocessingState } from 'features/parameters/store/postproces
 import { initialSDXLState } from 'features/sdxl/store/sdxlSlice';
 import { initialConfigState } from 'features/system/store/configSlice';
 import { initialSystemState } from 'features/system/store/systemSlice';
-import { initialHotkeysState } from 'features/ui/store/hotkeysSlice';
 import { initialUIState } from 'features/ui/store/uiSlice';
 import { defaultsDeep } from 'lodash-es';
 import type { UnserializeFunction } from 'redux-remember';
@@ -24,7 +23,6 @@ const initialStates: {
   system: initialSystemState,
   config: initialConfigState,
   ui: initialUIState,
-  hotkeys: initialHotkeysState,
   controlAdapters: initialControlAdapterState,
   dynamicPrompts: initialDynamicPromptsState,
   sdxl: initialSDXLState,

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

@@ -3,19 +3,14 @@
  */
 export const actionsDenylist = [
   // very spammy canvas actions
-  'canvas/setCursorPosition',
   'canvas/setStageCoordinates',
   'canvas/setStageScale',
-  'canvas/setIsDrawing',
   'canvas/setBoundingBoxCoordinates',
   'canvas/setBoundingBoxDimensions',
-  'canvas/setIsDrawing',
   'canvas/addPointToCurrentLine',
   // bazillions during generation
   'socket/socketGeneratorProgress',
   'socket/appSocketGeneratorProgress',
-  // every time user presses shift
-  // 'hotkeys/shiftKeyPressed',
   // this happens after every state change
   '@@REMEMBER_PERSISTED',
 ];

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

@@ -3,7 +3,7 @@ import { imageSelected } from 'features/gallery/store/gallerySlice';
 import { IMAGE_CATEGORIES } from 'features/gallery/store/types';
 import { imagesApi } from 'services/api/endpoints/images';
 import type { ImageCache } from 'services/api/types';
-import { getListImagesUrl, imagesAdapter } from 'services/api/util';
+import { getListImagesUrl, imagesSelectors } from 'services/api/util';
 
 import { startAppListening } from '..';
 
@@ -33,7 +33,7 @@ export const addFirstListImagesListener = () => {
 
       if (data.ids.length > 0) {
         // Select the first image
-        const firstImage = imagesAdapter.getSelectors().selectAll(data)[0];
+        const firstImage = imagesSelectors.selectAll(data)[0];
         dispatch(imageSelected(firstImage ?? null));
       }
     },

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

@@ -20,9 +20,15 @@ export const addDeleteBoardAndImagesFulfilledListener = () => {
       let wasNodeEditorReset = false;
       let wereControlAdaptersReset = false;
 
-      const state = getState();
+      const { generation, canvas, nodes, controlAdapters } = getState();
       deleted_images.forEach((image_name) => {
-        const imageUsage = getImageUsage(state, image_name);
+        const imageUsage = getImageUsage(
+          generation,
+          canvas,
+          nodes,
+          controlAdapters,
+          image_name
+        );
 
         if (imageUsage.isInitialImage && !wasInitialImageReset) {
           dispatch(clearInitialImage());

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

@@ -69,10 +69,12 @@ const predicate: AnyListenerPredicate<RootState> = (
   return isProcessorSelected && hasControlImage;
 };
 
+const DEBOUNCE_MS = 300;
+
 /**
  * Listener that automatically processes a ControlNet image when its processor parameters are changed.
  *
- * The network request is debounced by 1 second.
+ * The network request is debounced.
  */
 export const addControlNetAutoProcessListener = () => {
   startAppListening({
@@ -85,7 +87,7 @@ export const addControlNetAutoProcessListener = () => {
       cancelActiveListeners();
       log.trace('ControlNet auto-process triggered');
       // Delay before starting actual work
-      await delay(300);
+      await delay(DEBOUNCE_MS);
 
       dispatch(controlAdapterImageProcessed({ id }));
     },

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

@@ -17,7 +17,7 @@ import { clearInitialImage } from 'features/parameters/store/generationSlice';
 import { clamp, forEach } from 'lodash-es';
 import { api } from 'services/api';
 import { imagesApi } from 'services/api/endpoints/images';
-import { imagesAdapter } from 'services/api/util';
+import { imagesSelectors } from 'services/api/util';
 
 import { startAppListening } from '..';
 
@@ -53,9 +53,7 @@ export const addRequestedSingleImageDeletionListener = () => {
         const { data } =
           imagesApi.endpoints.listImages.select(baseQueryArgs)(state);
 
-        const cachedImageDTOs = data
-          ? imagesAdapter.getSelectors().selectAll(data)
-          : [];
+        const cachedImageDTOs = data ? imagesSelectors.selectAll(data) : [];
 
         const deletedImageIndex = cachedImageDTOs.findIndex(
           (i) => i.image_name === image_name
@@ -187,7 +185,7 @@ export const addRequestedMultipleImageDeletionListener = () => {
           imagesApi.endpoints.listImages.select(baseQueryArgs)(state);
 
         const newSelectedImageDTO = data
-          ? imagesAdapter.getSelectors().selectAll(data)[0]
+          ? imagesSelectors.selectAll(data)[0]
           : undefined;
 
         if (newSelectedImageDTO) {

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

@@ -13,7 +13,10 @@ import type {
 import { imageSelected } from 'features/gallery/store/gallerySlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
 import { workflowExposedFieldAdded } from 'features/nodes/store/workflowSlice';
-import { initialImageChanged } from 'features/parameters/store/generationSlice';
+import {
+  initialImageChanged,
+  selectOptimalDimension,
+} from 'features/parameters/store/generationSlice';
 import { imagesApi } from 'services/api/endpoints/images';
 
 import { startAppListening } from '../';
@@ -26,7 +29,7 @@ export const dndDropped = createAction<{
 export const addImageDroppedListener = () => {
   startAppListening({
     actionCreator: dndDropped,
-    effect: async (action, { dispatch }) => {
+    effect: async (action, { dispatch, getState }) => {
       const log = logger('dnd');
       const { activeData, overData } = action.payload;
 
@@ -115,7 +118,12 @@ export const addImageDroppedListener = () => {
         activeData.payloadType === 'IMAGE_DTO' &&
         activeData.payload.imageDTO
       ) {
-        dispatch(setInitialCanvasImage(activeData.payload.imageDTO));
+        dispatch(
+          setInitialCanvasImage(
+            activeData.payload.imageDTO,
+            selectOptimalDimension(getState())
+          )
+        );
         return;
       }
 

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

@@ -6,7 +6,10 @@ import {
   controlAdapterIsEnabledChanged,
 } from 'features/controlAdapters/store/controlAdaptersSlice';
 import { fieldImageValueChanged } from 'features/nodes/store/nodesSlice';
-import { initialImageChanged } from 'features/parameters/store/generationSlice';
+import {
+  initialImageChanged,
+  selectOptimalDimension,
+} from 'features/parameters/store/generationSlice';
 import { addToast } from 'features/system/store/systemSlice';
 import { t } from 'i18next';
 import { omit } from 'lodash-es';
@@ -76,7 +79,9 @@ export const addImageUploadedFulfilledListener = () => {
       }
 
       if (postUploadAction?.type === 'SET_CANVAS_INITIAL_IMAGE') {
-        dispatch(setInitialCanvasImage(imageDTO));
+        dispatch(
+          setInitialCanvasImage(imageDTO, selectOptimalDimension(state))
+        );
         dispatch(
           addToast({
             ...DEFAULT_UPLOADED_TOAST,

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

@@ -1,5 +1,4 @@
 import { logger } from 'app/logging/logger';
-import { setBoundingBoxDimensions } from 'features/canvas/store/canvasSlice';
 import {
   controlAdapterIsEnabledChanged,
   selectControlAdapterAll,
@@ -7,10 +6,8 @@ import {
 import { loraRemoved } from 'features/lora/store/loraSlice';
 import { modelSelected } from 'features/parameters/store/actions';
 import {
-  heightChanged,
   modelChanged,
   vaeSelected,
-  widthChanged,
 } from 'features/parameters/store/generationSlice';
 import { zParameterModel } from 'features/parameters/types/parameterSchemas';
 import { addToast } from 'features/system/store/systemSlice';
@@ -84,22 +81,6 @@ export const addModelSelectedListener = () => {
         }
       }
 
-      // Update Width / Height / Bounding Box Dimensions on Model Change
-      if (
-        state.generation.model?.base_model !== newModel.base_model &&
-        state.ui.shouldAutoChangeDimensions
-      ) {
-        if (['sdxl', 'sdxl-refiner'].includes(newModel.base_model)) {
-          dispatch(widthChanged(1024));
-          dispatch(heightChanged(1024));
-          dispatch(setBoundingBoxDimensions({ width: 1024, height: 1024 }));
-        } else {
-          dispatch(widthChanged(512));
-          dispatch(heightChanged(512));
-          dispatch(setBoundingBoxDimensions({ width: 512, height: 512 }));
-        }
-      }
-
       dispatch(modelChanged(newModel));
     },
   });

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

@@ -17,9 +17,9 @@ import {
 import { refinerModelChanged } from 'features/sdxl/store/sdxlSlice';
 import { forEach, some } from 'lodash-es';
 import {
-  mainModelsAdapter,
+  mainModelsAdapterSelectors,
   modelsApi,
-  vaeModelsAdapter,
+  vaeModelsAdapterSelectors,
 } from 'services/api/endpoints/models';
 import type { TypeGuardFor } from 'services/api/types';
 
@@ -43,7 +43,7 @@ export const addModelsLoadedListener = () => {
       );
 
       const currentModel = getState().generation.model;
-      const models = mainModelsAdapter.getSelectors().selectAll(action.payload);
+      const models = mainModelsAdapterSelectors.selectAll(action.payload);
 
       if (models.length === 0) {
         // No models loaded at all
@@ -94,7 +94,7 @@ export const addModelsLoadedListener = () => {
       );
 
       const currentModel = getState().sdxl.refinerModel;
-      const models = mainModelsAdapter.getSelectors().selectAll(action.payload);
+      const models = mainModelsAdapterSelectors.selectAll(action.payload);
 
       if (models.length === 0) {
         // No models loaded at all
@@ -145,9 +145,7 @@ export const addModelsLoadedListener = () => {
         return;
       }
 
-      const firstModel = vaeModelsAdapter
-        .getSelectors()
-        .selectAll(action.payload)[0];
+      const firstModel = vaeModelsAdapterSelectors.selectAll(action.payload)[0];
 
       if (!firstModel) {
         // No custom VAEs loaded at all; use the default

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

@@ -8,6 +8,7 @@ import {
   parsingErrorChanged,
   promptsChanged,
 } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
+import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
 import { setPositivePrompt } from 'features/parameters/store/generationSlice';
 import { utilitiesApi } from 'services/api/endpoints/utilities';
 import { appSocketConnected } from 'services/events/actions';
@@ -29,20 +30,39 @@ export const addDynamicPromptsListener = () => {
       action,
       { dispatch, getState, cancelActiveListeners, delay }
     ) => {
-      // debounce request
       cancelActiveListeners();
-      await delay(1000);
-
       const state = getState();
+      const { positivePrompt } = state.generation;
+      const { maxPrompts } = state.dynamicPrompts;
 
       if (state.config.disabledFeatures.includes('dynamicPrompting')) {
         return;
       }
 
-      const { positivePrompt } = state.generation;
-      const { maxPrompts } = state.dynamicPrompts;
+      const cachedPrompts = utilitiesApi.endpoints.dynamicPrompts.select({
+        prompt: positivePrompt,
+        max_prompts: maxPrompts,
+      })(getState()).data;
 
-      dispatch(isLoadingChanged(true));
+      if (cachedPrompts) {
+        dispatch(promptsChanged(cachedPrompts.prompts));
+        return;
+      }
+
+      if (!getShouldProcessPrompt(state.generation.positivePrompt)) {
+        if (state.dynamicPrompts.isLoading) {
+          dispatch(isLoadingChanged(false));
+        }
+        dispatch(promptsChanged([state.generation.positivePrompt]));
+        return;
+      }
+
+      if (!state.dynamicPrompts.isLoading) {
+        dispatch(isLoadingChanged(true));
+      }
+
+      // debounce request
+      await delay(1000);
 
       try {
         const req = dispatch(

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

@@ -1,7 +1,10 @@
 import { modelChanged } from 'features/parameters/store/generationSlice';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { NON_REFINER_BASE_MODELS } from 'services/api/constants';
-import { mainModelsAdapter, modelsApi } from 'services/api/endpoints/models';
+import {
+  mainModelsAdapterSelectors,
+  modelsApi,
+} from 'services/api/endpoints/models';
 
 import { startAppListening } from '..';
 
@@ -37,8 +40,7 @@ export const addTabChangedListener = () => {
           }
 
           // need to filter out all the invalid canvas models (currently refiner & any)
-          const validCanvasModels = mainModelsAdapter
-            .getSelectors()
+          const validCanvasModels = mainModelsAdapterSelectors
             .selectAll(models)
             .filter((model) =>
               ['sd-1', 'sd-2', 'sdxl'].includes(model.base_model)

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

@@ -0,0 +1,4 @@
+import { atom } from 'nanostores';
+import type { ReactNode } from 'react';
+
+export const $customNavComponent = atom<ReactNode | undefined>(undefined);

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

@@ -1,4 +1,4 @@
 import { atom } from 'nanostores';
 import type { ReactNode } from 'react';
 
-export const $headerComponent = atom<ReactNode | undefined>(undefined);
+export const $galleryHeader = atom<ReactNode | undefined>(undefined);

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

@@ -0,0 +1,4 @@
+import { atom } from 'nanostores';
+import type { ReactNode } from 'react';
+
+export const $logo = atom<ReactNode | undefined>(undefined);

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

@@ -1,6 +1,13 @@
 import type { createStore } from 'app/store/store';
 import { atom } from 'nanostores';
 
+// Inject socket options and url into window for debugging
+declare global {
+  interface Window {
+    $store?: typeof $store;
+  }
+}
+
 export const $store = atom<
   Readonly<ReturnType<typeof createStore>> | undefined
 >();

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

@@ -151,6 +151,3 @@ export type RootState = ReturnType<ReturnType<typeof createStore>['getState']>;
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type AppThunkDispatch = ThunkDispatch<RootState, any, UnknownAction>;
 export type AppDispatch = ReturnType<typeof createStore>['dispatch'];
-export function stateSelector(state: RootState) {
-  return state;
-}

invokeai/frontend/web/src/assets/images/invoke-key-wht-lrg.svg

@@ -0,0 +1,4 @@
+<svg width="106" height="106" viewBox="0 0 106 106" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="100" height="100" rx="6.66667" stroke="white" stroke-width="5"/>
+<path d="M63.9137 36H83.1211V23H23.1211V36H42.3285L63.9137 70H83.1211V83H23.1211V70H42.3285" stroke="white" stroke-width="5"/>
+</svg>

invokeai/frontend/web/src/assets/images/invoke-key-ylw-sm.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.1951 10.6667H42V2H2V10.6667H14.8049L29.1951 33.3333H42V42H2V33.3333H14.8049" stroke="#E6FD13" stroke-width="2.8"/>
+</svg>

invokeai/frontend/web/src/common/components/AspectRatioPreview/AspectRatioPreview.stories.tsx

@@ -1,64 +0,0 @@
-import { Flex } from '@chakra-ui/layout';
-import type { Meta, StoryObj } from '@storybook/react';
-import { InvControl } from 'common/components/InvControl/InvControl';
-import { InvSlider } from 'common/components/InvSlider/InvSlider';
-import { useState } from 'react';
-
-import { AspectRatioPreview } from './AspectRatioPreview';
-
-const meta: Meta<typeof AspectRatioPreview> = {
-  title: 'Components/AspectRatioPreview',
-  tags: ['autodocs'],
-  component: AspectRatioPreview,
-};
-
-export default meta;
-type Story = StoryObj<typeof InvControl>;
-
-const MIN = 64;
-const MAX = 1024;
-const STEP = 64;
-const FINE_STEP = 8;
-const INITIAL = 512;
-const MARKS = Array.from(
-  { length: Math.floor(MAX / STEP) },
-  (_, i) => MIN + i * STEP
-);
-
-const Component = () => {
-  const [width, setWidth] = useState(INITIAL);
-  const [height, setHeight] = useState(INITIAL);
-  return (
-    <Flex w="full" flexDir="column">
-      <InvControl label="Width">
-        <InvSlider
-          value={width}
-          min={MIN}
-          max={MAX}
-          step={STEP}
-          fineStep={FINE_STEP}
-          onChange={setWidth}
-          marks={MARKS}
-        />
-      </InvControl>
-      <InvControl label="Height">
-        <InvSlider
-          value={height}
-          min={MIN}
-          max={MAX}
-          step={STEP}
-          fineStep={FINE_STEP}
-          onChange={setHeight}
-          marks={MARKS}
-        />
-      </InvControl>
-      <Flex h={96} w={96} p={4}>
-        <AspectRatioPreview width={width} height={height} />
-      </Flex>
-    </Flex>
-  );
-};
-
-export const AspectRatioWithSliderInvControls: Story = {
-  render: Component,
-};

invokeai/frontend/web/src/common/components/AspectRatioPreview/constants.ts

@@ -1,23 +0,0 @@
-// When the aspect ratio is between these two values, we show the icon (experimentally determined)
-export const ICON_LOW_CUTOFF = 0.23;
-export const ICON_HIGH_CUTOFF = 1 / ICON_LOW_CUTOFF;
-export const ICON_SIZE_PX = 48;
-export const ICON_PADDING_PX = 16;
-export const BOX_SIZE_CSS_CALC = `min(${ICON_SIZE_PX}px, calc(100% - ${ICON_PADDING_PX}px))`;
-export const MOTION_ICON_INITIAL = {
-  opacity: 0,
-};
-export const MOTION_ICON_ANIMATE = {
-  opacity: 1,
-  transition: { duration: 0.1 },
-};
-export const MOTION_ICON_EXIT = {
-  opacity: 0,
-  transition: { duration: 0.1 },
-};
-export const ICON_CONTAINER_STYLES = {
-  width: '100%',
-  height: '100%',
-  alignItems: 'center',
-  justifyContent: 'center',
-};

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

@@ -1,7 +0,0 @@
-import type { IconType } from 'react-icons';
-
-export type AspectRatioPreviewProps = {
-  width: number;
-  height: number;
-  icon?: IconType;
-};

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

@@ -69,6 +69,7 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
               max={255}
               step={1}
               w={numberInputWidth}
+              defaultValue={90}
             />
           </InvControl>
           <InvControl label="Green">
@@ -79,6 +80,7 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
               max={255}
               step={1}
               w={numberInputWidth}
+              defaultValue={90}
             />
           </InvControl>
           <InvControl label="Blue">
@@ -89,6 +91,7 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
               max={255}
               step={1}
               w={numberInputWidth}
+              defaultValue={255}
             />
           </InvControl>
           <InvControl label="Alpha">
@@ -99,6 +102,7 @@ const IAIColorPicker = (props: IAIColorPickerProps) => {
               min={0}
               max={1}
               w={numberInputWidth}
+              defaultValue={1}
             />
           </InvControl>
         </Flex>

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

@@ -65,7 +65,11 @@ export const IAINoContentFallback = memo((props: IAINoImageFallbackProps) => {
   return (
     <Flex sx={styles} {...rest}>
       {icon && <Icon as={icon} boxSize={boxSize} opacity={0.7} />}
-      {props.label && <InvText textAlign="center">{props.label}</InvText>}
+      {props.label && (
+        <InvText textAlign="center" fontSize="md">
+          {props.label}
+        </InvText>
+      )}
     </Flex>
   );
 });

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

@@ -32,7 +32,7 @@ const IAIInformationalPopover = ({
   ...rest
 }: Props) => {
   const shouldEnableInformationalPopovers = useAppSelector(
-    (state) => state.system.shouldEnableInformationalPopovers
+    (s) => s.system.shouldEnableInformationalPopovers
   );
 
   const data = useMemo(() => POPOVER_DATA[feature], [feature]);

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

@@ -1,28 +1,47 @@
 import { Box, Flex, Heading } from '@chakra-ui/react';
+import type { AnimationProps } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { memo } from 'react';
+import type { DropzoneState } from 'react-dropzone';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 
+const initial: AnimationProps['initial'] = {
+  opacity: 0,
+};
+const animate: AnimationProps['animate'] = {
+  opacity: 1,
+  transition: { duration: 0.1 },
+};
+const exit: AnimationProps['exit'] = {
+  opacity: 0,
+  transition: { duration: 0.1 },
+};
+
 type ImageUploadOverlayProps = {
-  isDragAccept: boolean;
-  isDragReject: boolean;
+  dropzone: DropzoneState;
   setIsHandlingUpload: (isHandlingUpload: boolean) => void;
 };
 
 const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
   const { t } = useTranslation();
-  const {
-    isDragAccept,
-    isDragReject: _isDragAccept,
-    setIsHandlingUpload,
-  } = props;
+  const { dropzone, setIsHandlingUpload } = props;
 
-  useHotkeys('esc', () => {
-    setIsHandlingUpload(false);
-  });
+  useHotkeys(
+    'esc',
+    () => {
+      setIsHandlingUpload(false);
+    },
+    [setIsHandlingUpload]
+  );
 
   return (
     <Box
+      key="image-upload-overlay"
+      initial={initial}
+      animate={animate}
+      exit={exit}
+      as={motion.div}
       position="absolute"
       top={0}
       insetInlineStart={0}
@@ -67,7 +86,7 @@ const ImageUploadOverlay = (props: ImageUploadOverlayProps) => {
           color="base.100"
           borderColor="base.200"
         >
-          {isDragAccept ? (
+          {dropzone.isDragAccept ? (
             <Heading size="lg">{t('gallery.dropToUpload')}</Heading>
           ) : (
             <>

invokeai/frontend/web/src/common/components/InvAccordion/InvAccordionButton.tsx

@@ -3,18 +3,25 @@ import {
   Spacer,
 } from '@chakra-ui/react';
 import { InvBadge } from 'common/components/InvBadge/wrapper';
+import { truncate } from 'lodash-es';
+import { useMemo } from 'react';
 
 import type { InvAccordionButtonProps } from './types';
 import { InvAccordionIcon } from './wrapper';
 
 export const InvAccordionButton = (props: InvAccordionButtonProps) => {
-  const { children, badges, ...rest } = props;
+  const { children, badges: _badges, ...rest } = props;
+  const badges = useMemo<string[] | undefined>(
+    () =>
+      _badges?.map((b) => truncate(String(b), { length: 24, omission: '...' })),
+    [_badges]
+  );
   return (
     <ChakraAccordionButton {...rest}>
       {children}
       <Spacer />
       {badges?.map((b, i) => (
-        <InvBadge key={`${b}.${i}`} variant="solid">
+        <InvBadge key={`${b}.${i}`} colorScheme="invokeBlue">
           {b}
         </InvBadge>
       ))}

invokeai/frontend/web/src/common/components/InvAccordion/theme.ts

@@ -23,7 +23,7 @@ const invokeAIButton = defineStyle((_props) => {
     fontSize: 'sm',
     border: 'none',
     borderRadius: 'base',
-    color: 'base.400',
+    color: 'base.300',
     _hover: {},
     _expanded: {
       borderBottomRadius: 'none',

invokeai/frontend/web/src/common/components/InvBadge/theme.ts

@@ -1,22 +1,25 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
 
 const baseStyle = defineStyle((props) => ({
-  fontSize: '8px',
+  fontSize: 9,
   px: 2,
   py: 1,
   minW: 4,
   lineHeight: 1,
   borderRadius: 'sm',
-  bg: `${props.colorScheme}.300`,
+  bg: `${props.colorScheme}.200`,
   color: 'base.900',
   fontWeight: 'bold',
-  letterSpacing: 0.5,
+  letterSpacing: 0.6,
+  wordBreak: 'break-all',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
 }));
 
 export const badgeTheme = defineStyleConfig({
   baseStyle,
   defaultProps: {
-    variant: 'solid',
     colorScheme: 'base',
   },
 });

invokeai/frontend/web/src/common/components/InvButton/InvButton.stories.tsx

@@ -28,7 +28,13 @@ const meta: Meta<typeof InvButton> = {
 export default meta;
 type Story = StoryObj<typeof InvButton>;
 
-const colorSchemes = ['base', 'invokeYellow', 'red', 'green', 'blue'] as const;
+const colorSchemes = [
+  'base',
+  'invokeYellow',
+  'invokeRed',
+  'invokeGreen',
+  'invokeBlue',
+] as const;
 const variants = ['solid', 'outline', 'ghost', 'link'] as const;
 const sizes = ['xs', 'sm', 'md', 'lg'] as const;
 

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

@@ -12,7 +12,7 @@ export const InvButton = memo(
           <InvTooltip label={tooltip}>
             <Button
               ref={ref}
-              colorScheme={isChecked ? 'blue' : 'base'}
+              colorScheme={isChecked ? 'invokeBlue' : 'base'}
               {...rest}
             >
               {children}
@@ -22,7 +22,11 @@ export const InvButton = memo(
       }
 
       return (
-        <Button ref={ref} colorScheme={isChecked ? 'blue' : 'base'} {...rest}>
+        <Button
+          ref={ref}
+          colorScheme={isChecked ? 'invokeBlue' : 'base'}
+          {...rest}
+        >
           {children}
         </Button>
       );

invokeai/frontend/web/src/common/components/InvButton/theme.ts

@@ -204,7 +204,7 @@ export const buttonTheme = defineStyleConfig({
         _hover: {
           bg: 'none',
           svg: {
-            fill: 'base.500',
+            fill: 'base.400',
           },
         },
         '&[data-selected="true"]': {

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

@@ -46,7 +46,7 @@ export const InvControl = memo(
           isDisabled={isDisabled}
           {...formControlProps}
         >
-          <Flex className="invcontrol-label-input-wrapper">
+          <Flex className="invcontrol-label-wrapper">
             {label && (
               <InvLabel
                 feature={feature}
@@ -56,7 +56,7 @@ export const InvControl = memo(
                 {label}
               </InvLabel>
             )}
-            {children}
+            <Flex className="invcontrol-input-wrapper">{children}</Flex>
           </Flex>
           {helperText && (
             <ChakraFormHelperText>{helperText}</ChakraFormHelperText>

invokeai/frontend/web/src/common/components/InvControl/InvLabel.tsx

@@ -13,7 +13,7 @@ export const InvLabel = memo(
       ref
     ) => {
       const shouldEnableInformationalPopovers = useAppSelector(
-        (state) => state.system.shouldEnableInformationalPopovers
+        (s) => s.system.shouldEnableInformationalPopovers
       );
 
       const ctx = useContext(InvControlGroupContext);

invokeai/frontend/web/src/common/components/InvControl/theme.ts

@@ -19,16 +19,22 @@ const formBaseStyle = defineFormPartsStyle((props) => ({
     alignItems: 'flex-start',
     gap: 4,
     h: 'unset',
-    '> .invcontrol-label-input-wrapper': {
+    '> .invcontrol-label-wrapper': {
       display: 'flex',
       flexDirection: props.orientation === 'vertical' ? 'column' : 'row',
       alignItems: props.orientation === 'vertical' ? 'flex-start' : 'center',
-      gap: props.orientation === 'vertical' ? 2 : 4,
+      gap: props.orientation === 'vertical' ? 0 : 4,
       minH: 8,
       w: 'full',
       _invalid: {
         color: 'error.300',
       },
+      '> .invcontrol-input-wrapper': {
+        w: 'full',
+        display: 'flex',
+        gap: 4,
+        justifyContent: 'flex-end',
+      },
     },
   },
   helperText: {

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

@@ -1,33 +1,57 @@
 import { Divider, Flex } from '@chakra-ui/layout';
+import type { SystemStyleObject } from '@chakra-ui/react';
 import { Collapse, Icon, useDisclosure } from '@chakra-ui/react';
 import type { InvExpanderProps } from 'common/components/InvExpander/types';
 import { InvText } from 'common/components/InvText/wrapper';
 import { t } from 'i18next';
 import { BiCollapseVertical, BiExpandVertical } from 'react-icons/bi';
 
+const buttonStyles: SystemStyleObject = {
+  color: 'base.400',
+  borderColor: 'base.400',
+  transitionDuration: 'normal',
+  transitionProperty: 'common',
+  ':hover, :hover *': {
+    transitionDuration: 'normal',
+    transitionProperty: 'common',
+    color: 'base.300',
+    borderColor: 'base.300',
+  },
+};
+
 export const InvExpander = ({
   children,
   label = t('common.advancedOptions'),
   defaultIsOpen = false,
 }: InvExpanderProps) => {
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen });
+
   return (
     <Flex flexDir="column" w="full">
-      <Flex flexDir="row" alignItems="center" gap={3} py={4}>
-        <Divider w="unset" flexGrow={1} />
-        <Flex
-          as="button"
-          onClick={onToggle}
-          flexDir="row"
-          alignItems="center"
-          gap={2}
-        >
+      <Flex
+        as="button"
+        flexDir="row"
+        alignItems="center"
+        gap={3}
+        py={4}
+        px={2}
+        onClick={onToggle}
+        sx={buttonStyles}
+      >
+        <Divider w="unset" flexGrow={1} sx={buttonStyles} />
+        <Flex flexDir="row" alignItems="center" gap={2}>
           <Icon
             as={isOpen ? BiCollapseVertical : BiExpandVertical}
-            fontSize="12px"
-            color="base.400"
+            fontSize="14px"
+            sx={buttonStyles}
           />
-          <InvText variant="subtext" fontSize="sm" flexShrink={0} mb="2px">
+          <InvText
+            variant="subtext"
+            fontSize="sm"
+            fontWeight="semibold"
+            flexShrink={0}
+            sx={buttonStyles}
+          >
             {label}
           </InvText>
         </Flex>

invokeai/frontend/web/src/common/components/InvHeading/theme.ts

@@ -1,11 +1,11 @@
 import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
 
-const blue = defineStyle(() => ({
-  color: 'blue.300',
+const invokeBlue = defineStyle(() => ({
+  color: 'invokeBlue.300',
 }));
 
 export const headingTheme = defineStyleConfig({
   variants: {
-    blue,
+    invokeBlue,
   },
 });

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

@@ -11,7 +11,7 @@ export const InvIconButton = memo(
           <InvTooltip label={tooltip}>
             <IconButton
               ref={ref}
-              colorScheme={isChecked ? 'blue' : 'base'}
+              colorScheme={isChecked ? 'invokeBlue' : 'base'}
               {...rest}
             />
           </InvTooltip>
@@ -21,7 +21,7 @@ export const InvIconButton = memo(
       return (
         <IconButton
           ref={ref}
-          colorScheme={isChecked ? 'blue' : 'base'}
+          colorScheme={isChecked ? 'invokeBlue' : 'base'}
           {...rest}
         />
       );

invokeai/frontend/web/src/common/components/InvMenu/InvMenuItem.tsx

@@ -1,22 +1,10 @@
 import { SpinnerIcon } from '@chakra-ui/icons';
-import {
-  forwardRef,
-  keyframes,
-  MenuItem as ChakraMenuItem,
-} from '@chakra-ui/react';
+import { forwardRef, MenuItem as ChakraMenuItem } from '@chakra-ui/react';
 import { memo } from 'react';
+import { spinAnimation } from 'theme/animations';
 
 import type { InvMenuItemProps } from './types';
 
-const spin = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-
 export const InvMenuItem = memo(
   forwardRef<InvMenuItemProps, typeof ChakraMenuItem>(
     (props: InvMenuItemProps, ref) => {
@@ -30,13 +18,7 @@ export const InvMenuItem = memo(
       return (
         <ChakraMenuItem
           ref={ref}
-          icon={
-            isLoading ? (
-              <SpinnerIcon animation={`${spin} 1s linear infinite`} />
-            ) : (
-              icon
-            )
-          }
+          icon={isLoading ? <SpinnerIcon animation={spinAnimation} /> : icon}
           isDisabled={isLoading || isDisabled}
           data-destructive={isDestructive}
           {...rest}

invokeai/frontend/web/src/common/components/InvMenu/theme.ts

@@ -23,7 +23,7 @@ const invokeAI = definePartsStyle(() => ({
     bg: 'base.800',
     shadow: 'dark-lg',
     border: 'none',
-    p: 1,
+    p: 2,
   },
   item: {
     // this will style the MenuItem and MenuItemOption components

invokeai/frontend/web/src/common/components/InvModal/theme.ts

@@ -16,6 +16,7 @@ export const baseStyle = definePartsStyle(() => ({
   header: {
     fontWeight: 'semibold',
     fontSize: 'lg',
+    color: 'base.300',
   },
   closeButton: {
     opacity: 0.5,

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

@@ -24,6 +24,7 @@ export const InvNumberInput = memo(
         fineStep: _fineStep,
         onChange: _onChange,
         numberInputFieldProps,
+        defaultValue,
         ...rest
       } = props;
 
@@ -69,7 +70,7 @@ export const InvNumberInput = memo(
         (e) => {
           if (!e.target.value) {
             // If the input is empty, we set it to the minimum value
-            onChange(String(min), min);
+            onChange(String(defaultValue ?? min), Number(defaultValue) ?? min);
           } else {
             // Otherwise, we round the value to the nearest multiple if integer, else 3 decimals
             const roundedValue = isInteger
@@ -83,6 +84,7 @@ export const InvNumberInput = memo(
         [
           _fineStep,
           _step,
+          defaultValue,
           isInteger,
           max,
           min,
@@ -107,10 +109,11 @@ export const InvNumberInput = memo(
       return (
         <ChakraNumberInput
           ref={ref}
+          value={valueAsString}
+          defaultValue={defaultValue}
           min={min}
           max={max}
           step={step}
-          value={valueAsString}
           onChange={onChange}
           clampValueOnBlur={false}
           isValidCharacter={isValidCharacter}

invokeai/frontend/web/src/common/components/InvNumberInput/InvNumberInputStepper.tsx

@@ -1,12 +1,11 @@
+import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
 import {
   forwardRef,
-  Icon as ChakraIcon,
   NumberDecrementStepper as ChakraNumberDecrementStepper,
   NumberIncrementStepper as ChakraNumberIncrementStepper,
   NumberInputStepper as ChakraNumberInputStepper,
 } from '@chakra-ui/react';
 import { memo } from 'react';
-import { FaMinus, FaPlus } from 'react-icons/fa6';
 
 import type { InvNumberInputStepperProps } from './types';
 
@@ -16,10 +15,10 @@ export const InvNumberInputStepper = memo(
       return (
         <ChakraNumberInputStepper ref={ref} {...props}>
           <ChakraNumberIncrementStepper>
-            <ChakraIcon as={FaPlus} boxSize={2} />
+            <ChevronUpIcon />
           </ChakraNumberIncrementStepper>
           <ChakraNumberDecrementStepper>
-            <ChakraIcon as={FaMinus} boxSize={2} />
+            <ChevronDownIcon />
           </ChakraNumberDecrementStepper>
         </ChakraNumberInputStepper>
       );

invokeai/frontend/web/src/common/components/InvProgress/theme.ts

@@ -1,35 +1,57 @@
 import { progressAnatomy as parts } from '@chakra-ui/anatomy';
-import {
-  createMultiStyleConfigHelpers,
-  defineStyle,
-} from '@chakra-ui/styled-system';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/styled-system';
+import { generateStripe, getColorVar } from '@chakra-ui/theme-tools';
 
 const { defineMultiStyleConfig, definePartsStyle } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const invokeAIFilledTrack = defineStyle((_props) => ({
-  bg: 'invokeYellow.500',
-}));
-
-const invokeAITrack = defineStyle((_props) => {
-  return {
-    bg: 'base.800',
-  };
-});
-
-const invokeAI = definePartsStyle((props) => ({
-  filledTrack: invokeAIFilledTrack(props),
-  track: invokeAITrack(props),
-}));
-
 export const progressTheme = defineMultiStyleConfig({
-  baseStyle: {
-    track: { borderRadius: '2px' },
-  },
-  variants: {
-    invokeAI,
-  },
-  defaultProps: {
-    variant: 'invokeAI',
-  },
+  baseStyle: definePartsStyle(
+    ({ theme: t, colorScheme: c, hasStripe, isIndeterminate }) => {
+      const bgColor = `${c}.300`;
+      const addStripe = !isIndeterminate && hasStripe;
+      const gradient = `linear-gradient(
+      to right,
+      transparent 0%,
+      ${getColorVar(t, bgColor)} 50%,
+      transparent 100%
+    )`;
+      return {
+        track: {
+          borderRadius: '2px',
+          bg: 'base.800',
+        },
+        filledTrack: {
+          borderRadius: '2px',
+          ...(addStripe && generateStripe()),
+          ...(isIndeterminate ? { bgImage: gradient } : { bgColor }),
+        },
+      };
+    }
+  ),
 });
+// export const progressTheme = defineMultiStyleConfig({
+//   baseStyle: definePartsStyle(
+//     ({ theme: t, colorScheme: c, hasStripe, isIndeterminate }) => {
+//       const bgColor = `${c}.500`;
+//       const addStripe = !isIndeterminate && hasStripe;
+//       const gradient = `linear-gradient(
+//       to right,
+//       transparent 0%,
+//       ${getColorVar(t, bgColor)} 50%,
+//       transparent 100%
+//     )`;
+//       return {
+//         track: {
+//           borderRadius: '2px',
+//           bg: 'base.800',
+//         },
+//         filledTrack: {
+//           borderRadius: '2px',
+//           ...(addStripe && generateStripe("xs")),
+//           ...(isIndeterminate ? { bgImage: gradient } : { bgColor }),
+//         },
+//       };
+//     }
+//   ),
+// });

invokeai/frontend/web/src/common/components/InvSelect/useGroupedModelInvSelect.ts

@@ -30,7 +30,7 @@ export const useGroupedModelInvSelect = <T extends AnyModelConfigEntity>(
 ): UseGroupedModelInvSelectReturn => {
   const { t } = useTranslation();
   const base_model = useAppSelector(
-    (state) => state.generation.model?.base_model ?? 'sdxl'
+    (s) => s.generation.model?.base_model ?? 'sdxl'
   );
   const { modelEntities, selectedModel, getIsDisabled, onChange, isLoading } =
     arg;
@@ -65,7 +65,7 @@ export const useGroupedModelInvSelect = <T extends AnyModelConfigEntity>(
         .flatMap((o) => o.options)
         .find((m) =>
           selectedModel ? m.value === getModelId(selectedModel) : false
-        ),
+        ) ?? null,
     [options, selectedModel]
   );
 

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

@@ -10,6 +10,7 @@ import { InvNumberInput } from 'common/components/InvNumberInput/InvNumberInput'
 import { InvTooltip } from 'common/components/InvTooltip/InvTooltip';
 import { $shift } from 'common/hooks/useGlobalModifiers';
 import { AnimatePresence } from 'framer-motion';
+import { isNil } from 'lodash-es';
 import { memo, useCallback, useMemo, useState } from 'react';
 
 import { InvSliderMark } from './InvSliderMark';
@@ -23,7 +24,8 @@ export const InvSlider = memo((props: InvSliderProps) => {
     step: _step = 1,
     fineStep: _fineStep,
     onChange,
-    onReset,
+    onReset: _onReset,
+    defaultValue,
     formatValue = (v: number) => v.toString(),
     marks: _marks,
     withThumbTooltip: withTooltip = false,
@@ -59,6 +61,16 @@ export const InvSlider = memo((props: InvSliderProps) => {
     }
     return [];
   }, [_marks, formatValue, max, min]);
+
+  const onReset = useCallback(() => {
+    if (!isNil(defaultValue)) {
+      onChange(defaultValue);
+    }
+    if (_onReset) {
+      _onReset();
+    }
+  }, [defaultValue, onChange, _onReset]);
+
   return (
     <>
       <ChakraSlider
@@ -103,6 +115,7 @@ export const InvSlider = memo((props: InvSliderProps) => {
       {withNumberInput && (
         <InvNumberInput
           value={value}
+          defaultValue={defaultValue}
           min={numberInputMin}
           max={numberInputMax}
           step={step}

invokeai/frontend/web/src/common/components/InvSlider/theme.ts

@@ -4,7 +4,9 @@ import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react';
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
 
-const container = defineStyle(() => ({}));
+const container = defineStyle(() => ({
+  h: '28px',
+}));
 
 const track = defineStyle(() => {
   return {
@@ -49,7 +51,7 @@ const mark = defineStyle(() => {
   return {
     fontSize: '10px',
     color: 'base.400',
-    mt: 2,
+    mt: 4,
   };
 });
 

invokeai/frontend/web/src/common/components/InvTabs/InvTab.tsx

@@ -12,7 +12,7 @@ export const InvTab = memo(
         {children}
         <Spacer />
         {badges?.map((b, i) => (
-          <InvBadge key={`${b}.${i}`} colorScheme="blue">
+          <InvBadge key={`${b}.${i}`} colorScheme="invokeYellow">
             {b}
           </InvBadge>
         ))}

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

@@ -3,6 +3,15 @@ import { memo } from 'react';
 
 import type { InvTooltipProps } from './types';
 
+const modifiers: InvTooltipProps['modifiers'] = [
+  {
+    name: 'preventOverflow',
+    options: {
+      padding: 12,
+    },
+  },
+];
+
 export const InvTooltip = memo(
   forwardRef<InvTooltipProps, typeof ChakraTooltip>(
     (props: InvTooltipProps, ref) => {
@@ -12,6 +21,8 @@ export const InvTooltip = memo(
           ref={ref}
           hasArrow={hasArrow}
           placement={placement}
+          arrowSize={8}
+          modifiers={modifiers}
           {...rest}
         >
           {children}

invokeai/frontend/web/src/common/components/InvTooltip/theme.ts

@@ -3,13 +3,15 @@ import { cssVar } from '@chakra-ui/theme-tools';
 
 const $arrowBg = cssVar('popper-arrow-bg');
 
-// define the base component styles
 const baseStyle = defineStyle(() => ({
   borderRadius: 'md',
   shadow: 'dark-lg',
   bg: 'base.200',
+  color: 'base.800',
   [$arrowBg.variable]: 'colors.base.200',
-  pb: 1.5,
+  pt: 1,
+  px: 2,
+  pb: 1,
 }));
 
 // export the component theme

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

@@ -1,5 +1,5 @@
 import { Flex, Image, Spinner } from '@chakra-ui/react';
-import InvokeAILogoImage from 'assets/images/logo.png';
+import InvokeLogoWhite from 'assets/images/invoke-key-wht-lrg.svg';
 import { memo } from 'react';
 
 // This component loads before the theme so we cannot use theme tokens here
@@ -14,7 +14,7 @@ const Loading = () => {
       justifyContent="center"
       bg="#151519"
     >
-      <Image src={InvokeAILogoImage} w="8rem" h="8rem" />
+      <Image src={InvokeLogoWhite} w="8rem" h="8rem" />
       <Spinner
         label="Loading"
         color="grey"

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

@@ -1,31 +1,22 @@
-import { Box } from '@chakra-ui/react';
 import { useAppToaster } from 'app/components/Toaster';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import type { AnimationProps } from 'framer-motion';
-import { AnimatePresence, motion } from 'framer-motion';
-import type { KeyboardEvent, PropsWithChildren } from 'react';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import type { Accept, FileRejection } from 'react-dropzone';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { useUploadImageMutation } from 'services/api/endpoints/images';
 import type { PostUploadAction } from 'services/api/types';
 
-import ImageUploadOverlay from './ImageUploadOverlay';
-
 const accept: Accept = {
   'image/png': ['.png'],
   'image/jpeg': ['.jpg', '.jpeg', '.png'],
 };
 
-const dropzoneRootProps = { style: {} };
-
-const selector = createMemoizedSelector(
-  [stateSelector, activeTabNameSelector],
-  ({ gallery }, activeTabName) => {
+const selectPostUploadAction = createMemoizedSelector(
+  activeTabNameSelector,
+  (activeTabName) => {
     let postUploadAction: PostUploadAction = { type: 'TOAST' };
 
     if (activeTabName === 'unifiedCanvas') {
@@ -36,19 +27,15 @@ const selector = createMemoizedSelector(
       postUploadAction = { type: 'SET_INITIAL_IMAGE' };
     }
 
-    const { autoAddBoardId } = gallery;
-
-    return {
-      autoAddBoardId,
-      postUploadAction,
-    };
+    return postUploadAction;
   }
 );
 
-const ImageUploader = (props: PropsWithChildren) => {
-  const { autoAddBoardId, postUploadAction } = useAppSelector(selector);
-  const toaster = useAppToaster();
+export const useFullscreenDropzone = () => {
   const { t } = useTranslation();
+  const toaster = useAppToaster();
+  const postUploadAction = useAppSelector(selectPostUploadAction);
+  const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
   const [isHandlingUpload, setIsHandlingUpload] = useState<boolean>(false);
 
   const [uploadImage] = useUploadImageMutation();
@@ -105,33 +92,29 @@ const ImageUploader = (props: PropsWithChildren) => {
     setIsHandlingUpload(true);
   }, []);
 
-  const {
-    getRootProps,
-    getInputProps,
-    isDragAccept,
-    isDragReject,
-    isDragActive,
-    inputRef,
-  } = useDropzone({
+  const dropzone = useDropzone({
     accept,
     noClick: true,
     onDrop,
     onDragOver,
     multiple: false,
+    noKeyboard: true,
   });
 
   useEffect(() => {
     // This is a hack to allow pasting images into the uploader
     const handlePaste = async (e: ClipboardEvent) => {
-      if (!inputRef.current) {
+      if (!dropzone.inputRef.current) {
         return;
       }
 
       if (e.clipboardData?.files) {
-        // Set the files on the inputRef
-        inputRef.current.files = e.clipboardData.files;
+        // Set the files on the dropzone.inputRef
+        dropzone.inputRef.current.files = e.clipboardData.files;
         // Dispatch the change event, dropzone catches this and we get to use its own validation
-        inputRef.current?.dispatchEvent(new Event('change', { bubbles: true }));
+        dropzone.inputRef.current?.dispatchEvent(
+          new Event('change', { bubbles: true })
+        );
       }
     };
 
@@ -141,49 +124,7 @@ const ImageUploader = (props: PropsWithChildren) => {
     return () => {
       document.removeEventListener('paste', handlePaste);
     };
-  }, [inputRef]);
+  }, [dropzone.inputRef]);
 
-  const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    // Bail out if user hits spacebar - do not open the uploader
-    if (e.key === ' ') {
-      return;
-    }
-  }, []);
-
-  return (
-    <Box {...getRootProps(dropzoneRootProps)} onKeyDown={handleKeyDown}>
-      <input {...getInputProps()} />
-      {props.children}
-      <AnimatePresence>
-        {isDragActive && isHandlingUpload && (
-          <motion.div
-            key="image-upload-overlay"
-            initial={initial}
-            animate={animate}
-            exit={exit}
-          >
-            <ImageUploadOverlay
-              isDragAccept={isDragAccept}
-              isDragReject={isDragReject}
-              setIsHandlingUpload={setIsHandlingUpload}
-            />
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </Box>
-  );
-};
-
-export default memo(ImageUploader);
-
-const initial: AnimationProps['initial'] = {
-  opacity: 0,
-};
-const animate: AnimationProps['animate'] = {
-  opacity: 1,
-  transition: { duration: 0.1 },
-};
-const exit: AnimationProps['exit'] = {
-  opacity: 0,
-  transition: { duration: 0.1 },
+  return { dropzone, isHandlingUpload, setIsHandlingUpload };
 };

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

@@ -0,0 +1,131 @@
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
+import { useClearQueue } from 'features/queue/hooks/useClearQueue';
+import { useQueueBack } from 'features/queue/hooks/useQueueBack';
+import { useQueueFront } from 'features/queue/hooks/useQueueFront';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { setActiveTab } from 'features/ui/store/uiSlice';
+import { useHotkeys } from 'react-hotkeys-hook';
+
+export const useGlobalHotkeys = () => {
+  const dispatch = useAppDispatch();
+  const isModelManagerEnabled =
+    useFeatureStatus('modelManager').isFeatureEnabled;
+  const {
+    queueBack,
+    isDisabled: isDisabledQueueBack,
+    isLoading: isLoadingQueueBack,
+  } = useQueueBack();
+
+  useHotkeys(
+    ['ctrl+enter', 'meta+enter'],
+    queueBack,
+    {
+      enabled: () => !isDisabledQueueBack && !isLoadingQueueBack,
+      preventDefault: true,
+      enableOnFormTags: ['input', 'textarea', 'select'],
+    },
+    [queueBack, isDisabledQueueBack, isLoadingQueueBack]
+  );
+
+  const {
+    queueFront,
+    isDisabled: isDisabledQueueFront,
+    isLoading: isLoadingQueueFront,
+  } = useQueueFront();
+
+  useHotkeys(
+    ['ctrl+shift+enter', 'meta+shift+enter'],
+    queueFront,
+    {
+      enabled: () => !isDisabledQueueFront && !isLoadingQueueFront,
+      preventDefault: true,
+      enableOnFormTags: ['input', 'textarea', 'select'],
+    },
+    [queueFront, isDisabledQueueFront, isLoadingQueueFront]
+  );
+
+  const {
+    cancelQueueItem,
+    isDisabled: isDisabledCancelQueueItem,
+    isLoading: isLoadingCancelQueueItem,
+  } = useCancelCurrentQueueItem();
+
+  useHotkeys(
+    ['shift+x'],
+    cancelQueueItem,
+    {
+      enabled: () => !isDisabledCancelQueueItem && !isLoadingCancelQueueItem,
+      preventDefault: true,
+      enableOnFormTags: ['input', 'textarea', 'select'],
+    },
+    [cancelQueueItem, isDisabledCancelQueueItem, isLoadingCancelQueueItem]
+  );
+
+  const {
+    clearQueue,
+    isDisabled: isDisabledClearQueue,
+    isLoading: isLoadingClearQueue,
+  } = useClearQueue();
+
+  useHotkeys(
+    ['ctrl+shift+x', 'meta+shift+x'],
+    clearQueue,
+    {
+      enabled: () => !isDisabledClearQueue && !isLoadingClearQueue,
+      preventDefault: true,
+      enableOnFormTags: ['input', 'textarea', 'select'],
+    },
+    [clearQueue, isDisabledClearQueue, isLoadingClearQueue]
+  );
+
+  useHotkeys(
+    '1',
+    () => {
+      dispatch(setActiveTab('txt2img'));
+    },
+    [dispatch]
+  );
+
+  useHotkeys(
+    '2',
+    () => {
+      dispatch(setActiveTab('img2img'));
+    },
+    [dispatch]
+  );
+
+  useHotkeys(
+    '3',
+    () => {
+      dispatch(setActiveTab('unifiedCanvas'));
+    },
+    [dispatch]
+  );
+
+  useHotkeys(
+    '4',
+    () => {
+      dispatch(setActiveTab('nodes'));
+    },
+    [dispatch]
+  );
+
+  useHotkeys(
+    '5',
+    () => {
+      if (isModelManagerEnabled) {
+        dispatch(setActiveTab('modelManager'));
+      }
+    },
+    [dispatch, isModelManagerEnabled]
+  );
+
+  useHotkeys(
+    isModelManagerEnabled ? '6' : '5',
+    () => {
+      dispatch(setActiveTab('queue'));
+    },
+    [dispatch, isModelManagerEnabled]
+  );
+};

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

@@ -32,9 +32,7 @@ export const useImageUploadButton = ({
   postUploadAction,
   isDisabled,
 }: UseImageUploadButtonArgs) => {
-  const autoAddBoardId = useAppSelector(
-    (state) => state.gallery.autoAddBoardId
-  );
+  const autoAddBoardId = useAppSelector((s) => s.gallery.autoAddBoardId);
   const [uploadImage] = useUploadImageMutation();
   const onDropAccepted = useCallback(
     (files: File[]) => {

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

@@ -1,28 +1,42 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectControlAdapterAll } from 'features/controlAdapters/store/controlAdaptersSlice';
+import {
+  selectControlAdapterAll,
+  selectControlAdaptersSlice,
+} from 'features/controlAdapters/store/controlAdaptersSlice';
 import { isControlNetOrT2IAdapter } from 'features/controlAdapters/store/types';
+import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
+import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
+import { selectNodesSlice } from 'features/nodes/store/nodesSlice';
+import { selectNodeTemplatesSlice } from 'features/nodes/store/nodeTemplatesSlice';
 import { isInvocationNode } from 'features/nodes/types/invocation';
+import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
+import { selectSystemSlice } from 'features/system/store/systemSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 import i18n from 'i18next';
 import { forEach } from 'lodash-es';
 import { getConnectedEdges } from 'reactflow';
 
 const selector = createMemoizedSelector(
-  [stateSelector, activeTabNameSelector],
+  [
+    selectControlAdaptersSlice,
+    selectGenerationSlice,
+    selectSystemSlice,
+    selectNodesSlice,
+    selectNodeTemplatesSlice,
+    selectDynamicPromptsSlice,
+    activeTabNameSelector,
+  ],
   (
-    {
-      controlAdapters,
-      generation,
-      system,
-      nodes,
-      nodeTemplates,
-      dynamicPrompts,
-    },
+    controlAdapters,
+    generation,
+    system,
+    nodes,
+    nodeTemplates,
+    dynamicPrompts,
     activeTabName
   ) => {
-    const { initialImage, model } = generation;
+    const { initialImage, model, positivePrompt } = generation;
 
     const { isConnected } = system;
 
@@ -87,7 +101,10 @@ const selector = createMemoizedSelector(
         });
       }
     } else {
-      if (dynamicPrompts.prompts.length === 0) {
+      if (
+        dynamicPrompts.prompts.length === 0 &&
+        getShouldProcessPrompt(positivePrompt)
+      ) {
         reasons.push(i18n.t('parameters.invoke.noPrompts'));
       }
 

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

@@ -1,7 +1,17 @@
 export const roundDownToMultiple = (num: number, multiple: number): number => {
   return Math.floor(num / multiple) * multiple;
 };
+export const roundDownToMultipleMin = (
+  num: number,
+  multiple: number
+): number => {
+  return Math.max(multiple, Math.floor(num / multiple) * multiple);
+};
 
 export const roundToMultiple = (num: number, multiple: number): number => {
   return Math.round(num / multiple) * multiple;
 };
+
+export const roundToMultipleMin = (num: number, multiple: number): number => {
+  return Math.max(multiple, roundToMultiple(num, multiple));
+};

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

@@ -1,7 +1,6 @@
 import { Box, chakra, Flex } from '@chakra-ui/react';
 import { useStore } from '@nanostores/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import useCanvasDragMove from 'features/canvas/hooks/useCanvasDragMove';
 import useCanvasHotkeys from 'features/canvas/hooks/useCanvasHotkeys';
@@ -17,7 +16,10 @@ import {
   $isTransformingBoundingBox,
 } from 'features/canvas/store/canvasNanostore';
 import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
-import { canvasResized } from 'features/canvas/store/canvasSlice';
+import {
+  canvasResized,
+  selectCanvasSlice,
+} from 'features/canvas/store/canvasSlice';
 import {
   setCanvasBaseLayer,
   setCanvasStage,
@@ -40,57 +42,34 @@ import IAICanvasStatusText from './IAICanvasStatusText';
 import IAICanvasBoundingBox from './IAICanvasToolbar/IAICanvasBoundingBox';
 import IAICanvasToolPreview from './IAICanvasToolPreview';
 
-const selector = createMemoizedSelector(
-  [stateSelector, isStagingSelector],
-  ({ canvas }, isStaging) => {
-    const {
-      isMaskEnabled,
-      stageScale,
-      shouldShowBoundingBox,
-      stageDimensions,
-      stageCoordinates,
-      tool,
-      shouldShowIntermediates,
-      shouldRestrictStrokesToBox,
-      shouldShowGrid,
-      shouldAntialias,
-    } = canvas;
-
-    return {
-      isMaskEnabled,
-      shouldShowBoundingBox,
-      shouldShowGrid,
-      stageCoordinates,
-      stageDimensions,
-      stageScale,
-      tool,
-      isStaging,
-      shouldShowIntermediates,
-      shouldAntialias,
-      shouldRestrictStrokesToBox,
-    };
-  }
-);
+const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
+  return {
+    stageCoordinates: canvas.stageCoordinates,
+    stageDimensions: canvas.stageDimensions,
+  };
+});
 
 const ChakraStage = chakra(Stage, {
   shouldForwardProp: (prop) => !['sx'].includes(prop),
 });
 
 const IAICanvas = () => {
-  const {
-    isMaskEnabled,
-    shouldShowBoundingBox,
-    shouldShowGrid,
-    stageCoordinates,
-    stageDimensions,
-    stageScale,
-    tool,
-    isStaging,
-    shouldShowIntermediates,
-    shouldAntialias,
-    shouldRestrictStrokesToBox,
-  } = useAppSelector(selector);
-  useCanvasHotkeys();
+  const isStaging = useAppSelector(isStagingSelector);
+  const isMaskEnabled = useAppSelector((s) => s.canvas.isMaskEnabled);
+  const shouldShowBoundingBox = useAppSelector(
+    (s) => s.canvas.shouldShowBoundingBox
+  );
+  const shouldShowGrid = useAppSelector((s) => s.canvas.shouldShowGrid);
+  const stageScale = useAppSelector((s) => s.canvas.stageScale);
+  const tool = useAppSelector((s) => s.canvas.tool);
+  const shouldShowIntermediates = useAppSelector(
+    (s) => s.canvas.shouldShowIntermediates
+  );
+  const shouldAntialias = useAppSelector((s) => s.canvas.shouldAntialias);
+  const shouldRestrictStrokesToBox = useAppSelector(
+    (s) => s.canvas.shouldRestrictStrokesToBox
+  );
+  const { stageCoordinates, stageDimensions } = useAppSelector(selector);
   const dispatch = useAppDispatch();
   const containerRef = useRef<HTMLDivElement>(null);
   const stageRef = useRef<Konva.Stage | null>(null);
@@ -99,6 +78,7 @@ const IAICanvas = () => {
   const isMovingStage = useStore($isMovingStage);
   const isTransformingBoundingBox = useStore($isTransformingBoundingBox);
   const isMouseOverBoundingBox = useStore($isMouseOverBoundingBox);
+  useCanvasHotkeys();
   const canvasStageRefCallback = useCallback((el: Konva.Stage) => {
     setCanvasStage(el as Konva.Stage);
     stageRef.current = el;
@@ -154,13 +134,12 @@ const IAICanvas = () => {
     if (!containerRef.current) {
       return;
     }
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.contentBoxSize) {
-          const { width, height } = entry.contentRect;
-          dispatch(canvasResized({ width, height }));
-        }
+    const resizeObserver = new ResizeObserver(() => {
+      if (!containerRef.current) {
+        return;
       }
+      const { width, height } = containerRef.current.getBoundingClientRect();
+      dispatch(canvasResized({ width, height }));
     });
 
     resizeObserver.observe(containerRef.current);

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

@@ -1,37 +1,36 @@
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
 import { memo } from 'react';
 import { Group, Rect } from 'react-konva';
 
-const selector = createMemoizedSelector(stateSelector, ({ canvas }) => {
+const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
   const {
     boundingBoxCoordinates,
     boundingBoxDimensions,
     stageDimensions,
-    stageScale,
-    shouldDarkenOutsideBoundingBox,
     stageCoordinates,
   } = canvas;
 
   return {
     boundingBoxCoordinates,
     boundingBoxDimensions,
-    shouldDarkenOutsideBoundingBox,
     stageCoordinates,
     stageDimensions,
-    stageScale,
   };
 });
+
 const IAICanvasBoundingBoxOverlay = () => {
   const {
     boundingBoxCoordinates,
     boundingBoxDimensions,
-    shouldDarkenOutsideBoundingBox,
     stageCoordinates,
     stageDimensions,
-    stageScale,
   } = useAppSelector(selector);
+  const shouldDarkenOutsideBoundingBox = useAppSelector(
+    (s) => s.canvas.shouldDarkenOutsideBoundingBox
+  );
+  const stageScale = useAppSelector((s) => s.canvas.stageScale);
 
   return (
     <Group listening={false}>

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

@@ -1,21 +1,38 @@
 // Grid drawing adapted from https://longviewcoder.com/2021/12/08/konva-a-better-grid/
-import { useToken } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { stateSelector } from 'app/store/store';
 import { useAppSelector } from 'app/store/storeHooks';
-import { range } from 'lodash-es';
+import { selectCanvasSlice } from 'features/canvas/store/canvasSlice';
+import type { ReactElement } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 import { Group, Line as KonvaLine } from 'react-konva';
+import { getArbitraryBaseColor } from 'theme/colors';
 
-const selector = createMemoizedSelector([stateSelector], ({ canvas }) => {
-  const { stageScale, stageCoordinates, stageDimensions } = canvas;
-  return { stageScale, stageCoordinates, stageDimensions };
+const selector = createMemoizedSelector(selectCanvasSlice, (canvas) => {
+  return {
+    stageCoordinates: canvas.stageCoordinates,
+    stageDimensions: canvas.stageDimensions,
+  };
 });
 
+const baseGridLineColor = getArbitraryBaseColor(27);
+const fineGridLineColor = getArbitraryBaseColor(18);
+
 const IAICanvasGrid = () => {
-  const { stageScale, stageCoordinates, stageDimensions } =
-    useAppSelector(selector);
-  const [gridLineColor] = useToken('colors', ['base.800']);
+  const { stageCoordinates, stageDimensions } = useAppSelector(selector);
+  const stageScale = useAppSelector((s) => s.canvas.stageScale);
+
+  const gridSpacing = useMemo(() => {
+    if (stageScale >= 2) {
+      return 8;
+    }
+    if (stageScale >= 1 && stageScale < 2) {
+      return 16;
+    }
+    if (stageScale >= 0.5 && stageScale < 1) {
+      return 32;
+    }
+    return 64;
+  }, [stageScale]);
 
   const unscale = useCallback(
     (value: number) => {
@@ -40,15 +57,15 @@ const IAICanvasGrid = () => {
     };
 
     const gridOffset = {
-      x: Math.ceil(unscale(x) / 64) * 64,
-      y: Math.ceil(unscale(y) / 64) * 64,
+      x: Math.ceil(unscale(x) / gridSpacing) * gridSpacing,
+      y: Math.ceil(unscale(y) / gridSpacing) * gridSpacing,
     };
 
     const gridRect = {
       x1: -gridOffset.x,
       y1: -gridOffset.y,
-      x2: unscale(width) - gridOffset.x + 64,
-      y2: unscale(height) - gridOffset.y + 64,
+      x2: unscale(width) - gridOffset.x + gridSpacing,
+      y2: unscale(height) - gridOffset.y + gridSpacing,
     };
 
     const gridFullRect = {
@@ -58,40 +75,50 @@ const IAICanvasGrid = () => {
       y2: Math.max(stageRect.y2, gridRect.y2),
     };
 
-    const fullRect = gridFullRect;
-
     const // find the x & y size of the grid
-      xSize = fullRect.x2 - fullRect.x1,
-      ySize = fullRect.y2 - fullRect.y1,
+      xSize = gridFullRect.x2 - gridFullRect.x1,
+      ySize = gridFullRect.y2 - gridFullRect.y1,
       // compute the number of steps required on each axis.
-      xSteps = Math.round(xSize / 64) + 1,
-      ySteps = Math.round(ySize / 64) + 1;
+      xSteps = Math.round(xSize / gridSpacing) + 1,
+      ySteps = Math.round(ySize / gridSpacing) + 1;
 
-    const xLines = range(0, xSteps).map((i) => (
-      <KonvaLine
-        key={`x_${i}`}
-        x={fullRect.x1 + i * 64}
-        y={fullRect.y1}
-        points={[0, 0, 0, ySize]}
-        stroke={gridLineColor}
-        strokeWidth={1}
-        listening={false}
-      />
-    ));
-    const yLines = range(0, ySteps).map((i) => (
-      <KonvaLine
-        key={`y_${i}`}
-        x={fullRect.x1}
-        y={fullRect.y1 + i * 64}
-        points={[0, 0, xSize, 0]}
-        stroke={gridLineColor}
-        strokeWidth={1}
-        listening={false}
-      />
-    ));
+    const strokeWidth = unscale(1);
 
-    return xLines.concat(yLines);
-  }, [stageCoordinates, stageDimensions, unscale, gridLineColor]);
+    const gridLines: ReactElement[] = new Array(xSteps + ySteps);
+    let _x = 0;
+    let _y = 0;
+    for (let i = 0; i < xSteps; i++) {
+      _x = gridFullRect.x1 + i * gridSpacing;
+      gridLines.push(
+        <KonvaLine
+          key={`x_${i}`}
+          x={_x}
+          y={gridFullRect.y1}
+          points={[0, 0, 0, ySize]}
+          stroke={_x % 64 ? fineGridLineColor : baseGridLineColor}
+          strokeWidth={strokeWidth}
+          listening={false}
+        />
+      );
+    }
+
+    for (let i = 0; i < ySteps; i++) {
+      _y = gridFullRect.y1 + i * gridSpacing;
+      gridLines.push(
+        <KonvaLine
+          key={`y_${i}`}
+          x={gridFullRect.x1}
+          y={_y}
+          points={[0, 0, xSize, 0]}
+          stroke={_y % 64 ? fineGridLineColor : baseGridLineColor}
+          strokeWidth={strokeWidth}
+          listening={false}
+        />
+      );
+    }
+
+    return gridLines;
+  }, [stageDimensions, stageCoordinates, unscale, gridSpacing]);
 
   return <Group listening={false}>{gridLines}</Group>;
 };