Add ConcatenateImagesInvocation.

invokeai/app/invocations/blend_latents.py

@@ -1,120 +1,98 @@
-from typing import Optional, Union
+from typing import Any, Union
 
 import numpy as np
+import numpy.typing as npt
 import torch
-import torchvision.transforms as T
-from PIL import Image
-from torchvision.transforms.functional import resize as tv_resize
 
 from invokeai.app.invocations.baseinvocation import BaseInvocation, invocation
-from invokeai.app.invocations.fields import FieldDescriptions, ImageField, Input, InputField, LatentsField
+from invokeai.app.invocations.fields import FieldDescriptions, Input, InputField, LatentsField
 from invokeai.app.invocations.primitives import LatentsOutput
 from invokeai.app.services.shared.invocation_context import InvocationContext
-from invokeai.backend.stable_diffusion.diffusers_pipeline import image_resized_to_grid_as_tensor
 from invokeai.backend.util.devices import TorchDevice
 
 
-def slerp(
-    t: Union[float, np.ndarray],
-    v0: Union[torch.Tensor, np.ndarray],
-    v1: Union[torch.Tensor, np.ndarray],
-    device: torch.device,
-    DOT_THRESHOLD: float = 0.9995,
-):
-    """
-    Spherical linear interpolation
-    Args:
-        t (float/np.ndarray): Float value between 0.0 and 1.0
-        v0 (np.ndarray): Starting vector
-        v1 (np.ndarray): Final vector
-        DOT_THRESHOLD (float): Threshold for considering the two vectors as
-                            colineal. Not recommended to alter this.
-    Returns:
-        v2 (np.ndarray): Interpolation vector between v0 and v1
-    """
-    inputs_are_torch = False
-    if not isinstance(v0, np.ndarray):
-        inputs_are_torch = True
-        v0 = v0.detach().cpu().numpy()
-    if not isinstance(v1, np.ndarray):
-        inputs_are_torch = True
-        v1 = v1.detach().cpu().numpy()
-
-    dot = np.sum(v0 * v1 / (np.linalg.norm(v0) * np.linalg.norm(v1)))
-    if np.abs(dot) > DOT_THRESHOLD:
-        v2 = (1 - t) * v0 + t * v1
-    else:
-        theta_0 = np.arccos(dot)
-        sin_theta_0 = np.sin(theta_0)
-        theta_t = theta_0 * t
-        sin_theta_t = np.sin(theta_t)
-        s0 = np.sin(theta_0 - theta_t) / sin_theta_0
-        s1 = sin_theta_t / sin_theta_0
-        v2 = s0 * v0 + s1 * v1
-
-    if inputs_are_torch:
-        v2 = torch.from_numpy(v2).to(device)
-
-    return v2
-
-
 @invocation(
     "lblend",
     title="Blend Latents",
-    tags=["latents", "blend", "mask"],
+    tags=["latents", "blend"],
     category="latents",
-    version="1.1.0",
+    version="1.0.3",
 )
 class BlendLatentsInvocation(BaseInvocation):
-    """Blend two latents using a given alpha. If a mask is provided, the second latents will be masked before blending.
-    Latents must have same size. Masking functionality added by @dwringer."""
+    """Blend two latents using a given alpha. Latents must have same size."""
 
-    latents_a: LatentsField = InputField(description=FieldDescriptions.latents, input=Input.Connection)
-    latents_b: LatentsField = InputField(description=FieldDescriptions.latents, input=Input.Connection)
-    mask: Optional[ImageField] = InputField(default=None, description="Mask for blending in latents B")
-    alpha: float = InputField(ge=0, default=0.5, description=FieldDescriptions.blend_alpha)
-
-    def prep_mask_tensor(self, mask_image: Image.Image) -> torch.Tensor:
-        if mask_image.mode != "L":
-            mask_image = mask_image.convert("L")
-        mask_tensor = image_resized_to_grid_as_tensor(mask_image, normalize=False)
-        if mask_tensor.dim() == 3:
-            mask_tensor = mask_tensor.unsqueeze(0)
-        return mask_tensor
-
-    def replace_tensor_from_masked_tensor(
-        self, tensor: torch.Tensor, other_tensor: torch.Tensor, mask_tensor: torch.Tensor
-    ):
-        output = tensor.clone()
-        mask_tensor = mask_tensor.expand(output.shape)
-        if output.dtype != torch.float16:
-            output = torch.add(output, mask_tensor * torch.sub(other_tensor, tensor))
-        else:
-            output = torch.add(output, mask_tensor.half() * torch.sub(other_tensor, tensor))
-        return output
+    latents_a: LatentsField = InputField(
+        description=FieldDescriptions.latents,
+        input=Input.Connection,
+    )
+    latents_b: LatentsField = InputField(
+        description=FieldDescriptions.latents,
+        input=Input.Connection,
+    )
+    alpha: float = InputField(default=0.5, description=FieldDescriptions.blend_alpha)
 
     def invoke(self, context: InvocationContext) -> LatentsOutput:
         latents_a = context.tensors.load(self.latents_a.latents_name)
         latents_b = context.tensors.load(self.latents_b.latents_name)
-        if self.mask is None:
-            mask_tensor = torch.zeros(latents_a.shape[-2:])
-        else:
-            mask_tensor = self.prep_mask_tensor(context.images.get_pil(self.mask.image_name))
-            mask_tensor = tv_resize(mask_tensor, latents_a.shape[-2:], T.InterpolationMode.BILINEAR, antialias=False)
-
-        latents_b = self.replace_tensor_from_masked_tensor(latents_b, latents_a, mask_tensor)
 
         if latents_a.shape != latents_b.shape:
-            raise ValueError("Latents to blend must be the same size.")
+            raise Exception("Latents to blend must be the same size.")
 
         device = TorchDevice.choose_torch_device()
 
+        def slerp(
+            t: Union[float, npt.NDArray[Any]],  # FIXME: maybe use np.float32 here?
+            v0: Union[torch.Tensor, npt.NDArray[Any]],
+            v1: Union[torch.Tensor, npt.NDArray[Any]],
+            DOT_THRESHOLD: float = 0.9995,
+        ) -> Union[torch.Tensor, npt.NDArray[Any]]:
+            """
+            Spherical linear interpolation
+            Args:
+                t (float/np.ndarray): Float value between 0.0 and 1.0
+                v0 (np.ndarray): Starting vector
+                v1 (np.ndarray): Final vector
+                DOT_THRESHOLD (float): Threshold for considering the two vectors as
+                                    colineal. Not recommended to alter this.
+            Returns:
+                v2 (np.ndarray): Interpolation vector between v0 and v1
+            """
+            inputs_are_torch = False
+            if not isinstance(v0, np.ndarray):
+                inputs_are_torch = True
+                v0 = v0.detach().cpu().numpy()
+            if not isinstance(v1, np.ndarray):
+                inputs_are_torch = True
+                v1 = v1.detach().cpu().numpy()
+
+            dot = np.sum(v0 * v1 / (np.linalg.norm(v0) * np.linalg.norm(v1)))
+            if np.abs(dot) > DOT_THRESHOLD:
+                v2 = (1 - t) * v0 + t * v1
+            else:
+                theta_0 = np.arccos(dot)
+                sin_theta_0 = np.sin(theta_0)
+                theta_t = theta_0 * t
+                sin_theta_t = np.sin(theta_t)
+                s0 = np.sin(theta_0 - theta_t) / sin_theta_0
+                s1 = sin_theta_t / sin_theta_0
+                v2 = s0 * v0 + s1 * v1
+
+            if inputs_are_torch:
+                v2_torch: torch.Tensor = torch.from_numpy(v2).to(device)
+                return v2_torch
+            else:
+                assert isinstance(v2, np.ndarray)
+                return v2
+
         # blend
-        blended_latents = slerp(self.alpha, latents_a, latents_b, device)
+        bl = slerp(self.alpha, latents_a, latents_b)
+        assert isinstance(bl, torch.Tensor)
+        blended_latents: torch.Tensor = bl  # for type checking convenience
 
         # https://discuss.huggingface.co/t/memory-usage-by-later-pipeline-stages/23699
         blended_latents = blended_latents.to("cpu")
-        torch.cuda.empty_cache()
+
+        TorchDevice.empty_cache()
 
         name = context.tensors.save(tensor=blended_latents)
-        return LatentsOutput.build(latents_name=name, latents=blended_latents)
+        return LatentsOutput.build(latents_name=name, latents=blended_latents, seed=self.latents_a.seed)

invokeai/app/invocations/concatenate_images.py

@@ -0,0 +1,45 @@
+from typing import Literal
+
+import numpy as np
+from PIL import Image
+
+from invokeai.app.invocations.baseinvocation import BaseInvocation, invocation
+from invokeai.app.invocations.fields import ImageField, InputField
+from invokeai.app.invocations.primitives import ImageOutput
+from invokeai.app.services.shared.invocation_context import InvocationContext
+
+
+@invocation(
+    "concatenate_images",
+    title="Concatenate Images",
+    tags=["image", "concatenate"],
+    category="image",
+    version="1.0.0",
+)
+class ConcatenateImagesInvocation(BaseInvocation):
+    """Concatenate images horizontally or vertically."""
+
+    image_1: ImageField = InputField(description="The first image to concatenate.")
+    image_2: ImageField = InputField(description="The second image to concatenate.")
+    direction: Literal["horizontal", "vertical"] = InputField(
+        default="horizontal", description="The direction along which to concatenate the images."
+    )
+
+    def invoke(self, context: InvocationContext) -> ImageOutput:
+        # For now, we force the images to be RGB.
+        image_1 = np.array(context.images.get_pil(self.image_1.image_name, "RGB"))
+        image_2 = np.array(context.images.get_pil(self.image_2.image_name, "RGB"))
+
+        axis: int = 0
+        if self.direction == "horizontal":
+            axis = 1
+        elif self.direction == "vertical":
+            axis = 0
+        else:
+            raise ValueError(f"Invalid direction: {self.direction}")
+
+        concatenated_image = np.concatenate([image_1, image_2], axis=axis)
+
+        image_pil = Image.fromarray(concatenated_image, mode="RGB")
+        image_dto = context.images.save(image=image_pil)
+        return ImageOutput.build(image_dto)

invokeai/frontend/web/package.json

@@ -58,7 +58,7 @@
     "@dagrejs/dagre": "^1.1.4",
     "@dagrejs/graphlib": "^2.2.4",
     "@fontsource-variable/inter": "^5.1.0",
-    "@invoke-ai/ui-library": "^0.0.44",
+    "@invoke-ai/ui-library": "^0.0.43",
     "@nanostores/react": "^0.7.3",
     "@reduxjs/toolkit": "2.2.3",
     "@roarr/browser-log-writer": "^1.3.0",

invokeai/frontend/web/pnpm-lock.yaml

@@ -24,8 +24,8 @@ dependencies:
     specifier: ^5.1.0
     version: 5.1.0
   '@invoke-ai/ui-library':
-    specifier: ^0.0.44
-    version: 0.0.44(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.1.0)(@types/react@18.3.11)(i18next@23.15.1)(react-dom@18.3.1)(react@18.3.1)
+    specifier: ^0.0.43
+    version: 0.0.43(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.1.0)(@types/react@18.3.11)(i18next@23.15.1)(react-dom@18.3.1)(react@18.3.1)
   '@nanostores/react':
     specifier: ^0.7.3
     version: 0.7.3(nanostores@0.11.3)(react@18.3.1)
@@ -515,8 +515,8 @@ packages:
     resolution: {integrity: sha512-MV6D4VLRIHr4PkW4zMyqfrNS1mPlCTiCXwvYGtDFQYr+xHFfonhAuf9WjsSc0nyp2m0OdkSLnzmVKkZFLo25Tg==}
     dev: false
 
-  /@chakra-ui/anatomy@2.3.5:
-    resolution: {integrity: sha512-3im33cUOxCbISjaBlINE2u8BOwJSCdzpjCX0H+0JxK2xz26UaVA5xeI3NYHUoxDnr/QIrgfrllGxS0szYwOcyg==}
+  /@chakra-ui/anatomy@2.3.4:
+    resolution: {integrity: sha512-fFIYN7L276gw0Q7/ikMMlZxP7mvnjRaWJ7f3Jsf9VtDOi6eAYIBRrhQe6+SZ0PGmoOkRaBc7gSE5oeIbgFFyrw==}
     dev: false
 
   /@chakra-ui/breakpoint-utils@2.0.8:
@@ -573,12 +573,12 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@chakra-ui/hooks@2.4.3(react@18.3.1):
-    resolution: {integrity: sha512-Sr2zsoTZw3p7HbrUy4aLpTIkE2XXUelAUgg3NGwMzrmx75bE0qVyiuuTFOuyEzGxYVV2Fe8QtcKKilm6RwzTGg==}
+  /@chakra-ui/hooks@2.4.2(react@18.3.1):
+    resolution: {integrity: sha512-LRKiVE1oA7afT5tbbSKAy7Uas2xFHE6IkrQdbhWCHmkHBUtPvjQQDgwtnd4IRZPmoEfNGwoJ/MQpwOM/NRTTwA==}
     peerDependencies:
       react: '>=18'
     dependencies:
-      '@chakra-ui/utils': 2.2.3(react@18.3.1)
+      '@chakra-ui/utils': 2.2.2(react@18.3.1)
       '@zag-js/element-size': 0.31.1
       copy-to-clipboard: 3.3.3
       framesync: 6.1.2
@@ -596,13 +596,13 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@chakra-ui/icons@2.2.4(@chakra-ui/react@2.10.4)(react@18.3.1):
+  /@chakra-ui/icons@2.2.4(@chakra-ui/react@2.10.2)(react@18.3.1):
     resolution: {integrity: sha512-l5QdBgwrAg3Sc2BRqtNkJpfuLw/pWRDwwT58J6c4PqQT6wzXxyNa8Q0PForu1ltB5qEiFb1kxr/F/HO1EwNa6g==}
     peerDependencies:
       '@chakra-ui/react': '>=2.0.0'
       react: '>=18'
     dependencies:
-      '@chakra-ui/react': 2.10.4(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/react': 2.10.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1)
       react: 18.3.1
     dev: false
 
@@ -825,8 +825,8 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@chakra-ui/react@2.10.4(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-XyRWnuZ1Uw7Mlj5pKUGO5/WhnIHP/EOrpy6lGZC1yWlkd0eIfIpYMZ1ALTZx4KPEdbBaes48dgiMT2ROCqLhkA==}
+  /@chakra-ui/react@2.10.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-TfIHTqTlxTHYJZBtpiR5EZasPUrLYKJxdbHkdOJb5G1OQ+2c5kKl5XA7c2pMtsEptzb7KxAAIB62t3hxdfWp1w==}
     peerDependencies:
       '@emotion/react': '>=11'
       '@emotion/styled': '>=11'
@@ -834,10 +834,10 @@ packages:
       react: '>=18'
       react-dom: '>=18'
     dependencies:
-      '@chakra-ui/hooks': 2.4.3(react@18.3.1)
-      '@chakra-ui/styled-system': 2.12.1(react@18.3.1)
-      '@chakra-ui/theme': 3.4.7(@chakra-ui/styled-system@2.12.1)(react@18.3.1)
-      '@chakra-ui/utils': 2.2.3(react@18.3.1)
+      '@chakra-ui/hooks': 2.4.2(react@18.3.1)
+      '@chakra-ui/styled-system': 2.11.2(react@18.3.1)
+      '@chakra-ui/theme': 3.4.6(@chakra-ui/styled-system@2.11.2)(react@18.3.1)
+      '@chakra-ui/utils': 2.2.2(react@18.3.1)
       '@emotion/react': 11.13.3(@types/react@18.3.11)(react@18.3.1)
       '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.3.11)(react@18.3.1)
       '@popperjs/core': 2.11.8
@@ -868,10 +868,10 @@ packages:
       react: 18.3.1
     dev: false
 
-  /@chakra-ui/styled-system@2.12.1(react@18.3.1):
-    resolution: {integrity: sha512-DQph1nDiCPtgze7nDe0a36530ByXb5VpPosKGyWMvKocVeZJcDtYG6XM0+V5a0wKuFBXsViBBRIFUTiUesJAcg==}
+  /@chakra-ui/styled-system@2.11.2(react@18.3.1):
+    resolution: {integrity: sha512-y++z2Uop+hjfZX9mbH88F1ikazPv32asD2er56zMJBemUAzweXnHTpiCQbluEDSUDhqmghVZAdb+5L4XLbsRxA==}
     dependencies:
-      '@chakra-ui/utils': 2.2.3(react@18.3.1)
+      '@chakra-ui/utils': 2.2.2(react@18.3.1)
       csstype: 3.1.3
     transitivePeerDependencies:
       - react
@@ -915,14 +915,14 @@ packages:
       color2k: 2.0.3
     dev: false
 
-  /@chakra-ui/theme-tools@2.2.7(@chakra-ui/styled-system@2.12.1)(react@18.3.1):
-    resolution: {integrity: sha512-K/VJd0QcnKik7m+qZTkggqNLep6+MPUu8IP5TUpHsnSM5R/RVjsJIR7gO8IZVAIMIGLLTIhGshHxeMekqv6LcQ==}
+  /@chakra-ui/theme-tools@2.2.6(@chakra-ui/styled-system@2.11.2)(react@18.3.1):
+    resolution: {integrity: sha512-3UhKPyzKbV3l/bg1iQN9PBvffYp+EBOoYMUaeTUdieQRPFzo2jbYR0lNCxqv8h5aGM/k54nCHU2M/GStyi9F2A==}
     peerDependencies:
       '@chakra-ui/styled-system': '>=2.0.0'
     dependencies:
-      '@chakra-ui/anatomy': 2.3.5
-      '@chakra-ui/styled-system': 2.12.1(react@18.3.1)
-      '@chakra-ui/utils': 2.2.3(react@18.3.1)
+      '@chakra-ui/anatomy': 2.3.4
+      '@chakra-ui/styled-system': 2.11.2(react@18.3.1)
+      '@chakra-ui/utils': 2.2.2(react@18.3.1)
       color2k: 2.0.3
     transitivePeerDependencies:
       - react
@@ -948,15 +948,15 @@ packages:
       '@chakra-ui/theme-tools': 2.1.2(@chakra-ui/styled-system@2.9.2)
     dev: false
 
-  /@chakra-ui/theme@3.4.7(@chakra-ui/styled-system@2.12.1)(react@18.3.1):
-    resolution: {integrity: sha512-pfewthgZTFNUYeUwGvhPQO/FTIyf375cFV1AT8N1y0aJiw4KDe7YTGm7p0aFy4AwAjH2ydMgeEx/lua4tx8qyQ==}
+  /@chakra-ui/theme@3.4.6(@chakra-ui/styled-system@2.11.2)(react@18.3.1):
+    resolution: {integrity: sha512-ZwFBLfiMC3URwaO31ONXoKH9k0TX0OW3UjdPF3EQkQpYyrk/fm36GkkzajjtdpWEd7rzDLRsQjPmvwNaSoNDtg==}
     peerDependencies:
       '@chakra-ui/styled-system': '>=2.8.0'
     dependencies:
-      '@chakra-ui/anatomy': 2.3.5
-      '@chakra-ui/styled-system': 2.12.1(react@18.3.1)
-      '@chakra-ui/theme-tools': 2.2.7(@chakra-ui/styled-system@2.12.1)(react@18.3.1)
-      '@chakra-ui/utils': 2.2.3(react@18.3.1)
+      '@chakra-ui/anatomy': 2.3.4
+      '@chakra-ui/styled-system': 2.11.2(react@18.3.1)
+      '@chakra-ui/theme-tools': 2.2.6(@chakra-ui/styled-system@2.11.2)(react@18.3.1)
+      '@chakra-ui/utils': 2.2.2(react@18.3.1)
     transitivePeerDependencies:
       - react
     dev: false
@@ -981,8 +981,8 @@ packages:
       lodash.mergewith: 4.6.2
     dev: false
 
-  /@chakra-ui/utils@2.2.3(react@18.3.1):
-    resolution: {integrity: sha512-cldoCQuexZ6e07/9hWHKD4l1QXXlM1Nax9tuQOBvVf/EgwNZt3nZu8zZRDFlhAOKCTQDkmpLTTu+eXXjChNQOw==}
+  /@chakra-ui/utils@2.2.2(react@18.3.1):
+    resolution: {integrity: sha512-jUPLT0JzRMWxpdzH6c+t0YMJYrvc5CLericgITV3zDSXblkfx3DsYXqU11DJTSGZI9dUKzM1Wd0Wswn4eJwvFQ==}
     peerDependencies:
       react: '>=16.8.0'
     dependencies:
@@ -1675,20 +1675,20 @@ packages:
       prettier: 3.3.3
     dev: true
 
-  /@invoke-ai/ui-library@0.0.44(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.1.0)(@types/react@18.3.11)(i18next@23.15.1)(react-dom@18.3.1)(react@18.3.1):
-    resolution: {integrity: sha512-PDseHmdr8oi8cmrpx3UwIYHn4NduAJX2R0pM0pyM54xrCMPMgYiCbC/eOs8Gt4fBc2ziiPZ9UGoW4evnE3YJsg==}
+  /@invoke-ai/ui-library@0.0.43(@chakra-ui/form-control@2.2.0)(@chakra-ui/icon@3.2.0)(@chakra-ui/media-query@3.3.0)(@chakra-ui/menu@2.2.1)(@chakra-ui/spinner@2.1.0)(@chakra-ui/system@2.6.2)(@fontsource-variable/inter@5.1.0)(@types/react@18.3.11)(i18next@23.15.1)(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-t3fPYyks07ue3dEBPJuTHbeDLnDckDCOrtvc07mMDbLOnlPEZ0StaeiNGH+oO8qLzAuMAlSTdswgHfzTc2MmPw==}
     peerDependencies:
       '@fontsource-variable/inter': ^5.0.16
       react: ^18.2.0
       react-dom: ^18.2.0
     dependencies:
-      '@chakra-ui/anatomy': 2.2.2
-      '@chakra-ui/icons': 2.2.4(@chakra-ui/react@2.10.4)(react@18.3.1)
+      '@chakra-ui/anatomy': 2.3.4
+      '@chakra-ui/icons': 2.2.4(@chakra-ui/react@2.10.2)(react@18.3.1)
       '@chakra-ui/layout': 2.3.1(@chakra-ui/system@2.6.2)(react@18.3.1)
       '@chakra-ui/portal': 2.1.0(react-dom@18.3.1)(react@18.3.1)
-      '@chakra-ui/react': 2.10.4(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1)
-      '@chakra-ui/styled-system': 2.9.2
-      '@chakra-ui/theme-tools': 2.1.2(@chakra-ui/styled-system@2.9.2)
+      '@chakra-ui/react': 2.10.2(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.11)(framer-motion@11.10.0)(react-dom@18.3.1)(react@18.3.1)
+      '@chakra-ui/styled-system': 2.11.2(react@18.3.1)
+      '@chakra-ui/theme-tools': 2.2.6(@chakra-ui/styled-system@2.11.2)(react@18.3.1)
       '@emotion/react': 11.13.3(@types/react@18.3.11)(react@18.3.1)
       '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.3.11)(react@18.3.1)
       '@fontsource-variable/inter': 5.1.0

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

@@ -1443,6 +1443,7 @@
         "deleteReferenceImage": "Referenzbild löschen",
         "referenceImage": "Referenzbild",
         "opacity": "Opazität",
+        "resetCanvas": "Leinwand zurücksetzen",
         "removeBookmark": "Lesezeichen entfernen",
         "rasterLayer": "Raster-Ebene",
         "rasterLayers_withCount_visible": "Raster-Ebenen ({{count}})",

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

@@ -263,8 +263,7 @@
         "iterations_one": "Iteration",
         "iterations_other": "Iterations",
         "generations_one": "Generation",
-        "generations_other": "Generations",
-        "batchSize": "Batch Size"
+        "generations_other": "Generations"
     },
     "invocationCache": {
         "invocationCache": "Invocation Cache",
@@ -978,8 +977,6 @@
         "zoomOutNodes": "Zoom Out",
         "betaDesc": "This invocation is in beta. Until it is stable, it may have breaking changes during app updates. We plan to support this invocation long-term.",
         "prototypeDesc": "This invocation is a prototype. It may have breaking changes during app updates and may be removed at any time.",
-        "internalDesc": "This invocation is used internally by Invoke. It may have breaking changes during app updates and may be removed at any time.",
-        "specialDesc": "This invocation some special handling in the app. For example, Batch nodes are used to queue multiple graphs from a single workflow.",
         "imageAccessError": "Unable to find image {{image_name}}, resetting to default",
         "boardAccessError": "Unable to find board {{board_id}}, resetting to default",
         "modelAccessError": "Unable to find model {{key}}, resetting to default",
@@ -1666,6 +1663,7 @@
         "newControlLayerError": "Problem Creating Control Layer",
         "newRasterLayerOk": "Created Raster Layer",
         "newRasterLayerError": "Problem Creating Raster Layer",
+        "newFromImage": "New from Image",
         "pullBboxIntoLayerOk": "Bbox Pulled Into Layer",
         "pullBboxIntoLayerError": "Problem Pulling BBox Into Layer",
         "pullBboxIntoReferenceImageOk": "Bbox Pulled Into ReferenceImage",
@@ -1678,7 +1676,7 @@
         "mergingLayers": "Merging layers",
         "clearHistory": "Clear History",
         "bboxOverlay": "Show Bbox Overlay",
-        "newSession": "New Session",
+        "resetCanvas": "Reset Canvas",
         "clearCaches": "Clear Caches",
         "recalculateRects": "Recalculate Rects",
         "clipToBbox": "Clip Strokes to Bbox",
@@ -1710,10 +1708,8 @@
         "controlLayer": "Control Layer",
         "inpaintMask": "Inpaint Mask",
         "regionalGuidance": "Regional Guidance",
-        "asRasterLayer": "As $t(controlLayers.rasterLayer)",
-        "asRasterLayerResize": "As $t(controlLayers.rasterLayer) (Resize)",
-        "asControlLayer": "As $t(controlLayers.controlLayer)",
-        "asControlLayerResize": "As $t(controlLayers.controlLayer) (Resize)",
+        "canvasAsRasterLayer": "$t(controlLayers.canvas) as $t(controlLayers.rasterLayer)",
+        "canvasAsControlLayer": "$t(controlLayers.canvas) as $t(controlLayers.controlLayer)",
         "referenceImage": "Reference Image",
         "regionalReferenceImage": "Regional Reference Image",
         "globalReferenceImage": "Global Reference Image",
@@ -1789,8 +1785,6 @@
         "newGallerySessionDesc": "This will clear the canvas and all settings except for your model selection. Generations will be sent to the gallery.",
         "newCanvasSession": "New Canvas Session",
         "newCanvasSessionDesc": "This will clear the canvas and all settings except for your model selection. Generations will be staged on the canvas.",
-        "resetCanvasLayers": "Reset Canvas Layers",
-        "resetGenerationSettings": "Reset Generation Settings",
         "replaceCurrent": "Replace Current",
         "controlLayerEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this layer, or draw on the canvas to get started.",
         "controlMode": {
@@ -2120,73 +2114,11 @@
     "whatsNew": {
         "whatsNewInInvoke": "What's New in Invoke",
         "items": [
-            "<StrongComponent>Workflows</StrongComponent>: Run a workflow for a collection of images using the new <StrongComponent>Image Batch</StrongComponent> node.",
-            "<StrongComponent>FLUX</StrongComponent>: Support for XLabs IP Adapter v2."
+            "<StrongComponent>SD 3.5</StrongComponent>: Support for SD 3.5 Medium and Large.",
+            "<StrongComponent>Canvas</StrongComponent>: Streamlined Control Layer processing and improved default Control settings."
         ],
         "readReleaseNotes": "Read Release Notes",
         "watchRecentReleaseVideos": "Watch Recent Release Videos",
         "watchUiUpdatesOverview": "Watch UI Updates Overview"
-    },
-    "supportVideos": {
-        "supportVideos": "Support Videos",
-        "gettingStarted": "Getting Started",
-        "controlCanvas": "Control Canvas",
-        "watch": "Watch",
-        "studioSessionsDesc1": "Check out the <StudioSessionsPlaylistLink /> for Invoke deep dives.",
-        "studioSessionsDesc2": "Join our <DiscordLink /> to participate in the live sessions and ask questions. Sessions are uploaded to the playlist the following week.",
-        "videos": {
-            "creatingYourFirstImage": {
-                "title": "Creating Your First Image",
-                "description": "Introduction to creating an image from scratch using Invoke's tools."
-            },
-            "usingControlLayersAndReferenceGuides": {
-                "title": "Using Control Layers and Reference Guides",
-                "description": "Learn how to guide your image creation with control layers and reference images."
-            },
-            "understandingImageToImageAndDenoising": {
-                "title": "Understanding Image-to-Image and Denoising",
-                "description": "Overview of image-to-image transformations and denoising in Invoke."
-            },
-            "exploringAIModelsAndConceptAdapters": {
-                "title": "Exploring AI Models and Concept Adapters",
-                "description": "Dive into AI models and how to use concept adapters for creative control."
-            },
-            "creatingAndComposingOnInvokesControlCanvas": {
-                "title": "Creating and Composing on Invoke's Control Canvas",
-                "description": "Learn to compose images using Invoke's control canvas."
-            },
-            "upscaling": {
-                "title": "Upscaling",
-                "description": "How to upscale images with Invoke's tools to enhance resolution."
-            },
-            "howDoIGenerateAndSaveToTheGallery": {
-                "title": "How Do I Generate and Save to the Gallery?",
-                "description": "Steps to generate and save images to the gallery."
-            },
-            "howDoIEditOnTheCanvas": {
-                "title": "How Do I Edit on the Canvas?",
-                "description": "Guide to editing images directly on the canvas."
-            },
-            "howDoIDoImageToImageTransformation": {
-                "title": "How Do I Do Image-to-Image Transformation?",
-                "description": "Tutorial on performing image-to-image transformations in Invoke."
-            },
-            "howDoIUseControlNetsAndControlLayers": {
-                "title": "How Do I Use Control Nets and Control Layers?",
-                "description": "Learn to apply control layers and controlnets to your images."
-            },
-            "howDoIUseGlobalIPAdaptersAndReferenceImages": {
-                "title": "How Do I Use Global IP Adapters and Reference Images?",
-                "description": "Introduction to adding reference images and global IP adapters."
-            },
-            "howDoIUseInpaintMasks": {
-                "title": "How Do I Use Inpaint Masks?",
-                "description": "How to apply inpaint masks for image correction and variation."
-            },
-            "howDoIOutpaint": {
-                "title": "How Do I Outpaint?",
-                "description": "Guide to outpainting beyond the original image borders."
-            }
-        }
     }
 }

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

@@ -1985,6 +1985,7 @@
         "inpaintMask_withCount_many": "Remplir les masques",
         "inpaintMask_withCount_other": "Remplir les masques",
         "newImg2ImgCanvasFromImage": "Nouvelle Img2Img à partir de l'image",
+        "resetCanvas": "Réinitialiser la Toile",
         "bboxOverlay": "Afficher la superposition des Bounding Box",
         "moveToFront": "Déplacer vers le permier plan",
         "moveToBack": "Déplacer vers l'arrière plan",
@@ -2033,6 +2034,7 @@
             "help2": "Commencez par un point <Bold>Inclure</Bold> au sein de l'objet cible. Ajoutez d'autres points pour affiner la sélection. Moins de points produisent généralement de meilleurs résultats.",
             "help3": "Inversez la sélection pour sélectionner tout sauf l'objet cible."
         },
+        "canvasAsControlLayer": "$t(controlLayers.canvas) en tant que $t(controlLayers.controlLayer)",
         "convertRegionalGuidanceTo": "Convertir $t(controlLayers.regionalGuidance) vers",
         "copyRasterLayerTo": "Copier $t(controlLayers.rasterLayer) vers",
         "newControlLayer": "Nouveau $t(controlLayers.controlLayer)",
@@ -2042,7 +2044,8 @@
         "convertInpaintMaskTo": "Convertir $t(controlLayers.inpaintMask) vers",
         "copyControlLayerTo": "Copier $t(controlLayers.controlLayer) vers",
         "newInpaintMask": "Nouveau $t(controlLayers.inpaintMask)",
-        "newRasterLayer": "Nouveau $t(controlLayers.rasterLayer)"
+        "newRasterLayer": "Nouveau $t(controlLayers.rasterLayer)",
+        "canvasAsRasterLayer": "$t(controlLayers.canvas) en tant que $t(controlLayers.rasterLayer)"
     },
     "upscaling": {
         "exceedsMaxSizeDetails": "La limite maximale d'agrandissement est de {{maxUpscaleDimension}}x{{maxUpscaleDimension}} pixels. Veuillez essayer une image plus petite ou réduire votre sélection d'échelle.",

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

@@ -1750,6 +1750,7 @@
         "newRegionalReferenceImageError": "Problema nella creazione dell'immagine di riferimento regionale",
         "newControlLayerOk": "Livello di controllo creato",
         "bboxOverlay": "Mostra sovrapposizione riquadro",
+        "resetCanvas": "Reimposta la tela",
         "outputOnlyMaskedRegions": "In uscita solo le regioni generate",
         "enableAutoNegative": "Abilita Auto Negativo",
         "disableAutoNegative": "Disabilita Auto Negativo",
@@ -2035,6 +2036,8 @@
         "convertControlLayerTo": "Converti $t(controlLayers.controlLayer) in",
         "newRasterLayer": "Nuovo $t(controlLayers.rasterLayer)",
         "newRegionalGuidance": "Nuova $t(controlLayers.regionalGuidance)",
+        "canvasAsRasterLayer": "$t(controlLayers.canvas) come $t(controlLayers.rasterLayer)",
+        "canvasAsControlLayer": "$t(controlLayers.canvas) come $t(controlLayers.controlLayer)",
         "convertInpaintMaskTo": "Converti $t(controlLayers.inpaintMask) in",
         "copyRegionalGuidanceTo": "Copia $t(controlLayers.regionalGuidance) in",
         "convertRasterLayerTo": "Converti $t(controlLayers.rasterLayer) in",
@@ -2043,6 +2046,7 @@
         "newInpaintMask": "Nuova $t(controlLayers.inpaintMask)",
         "replaceCurrent": "Sostituisci corrente",
         "mergeDown": "Unire in basso",
+        "newFromImage": "Nuovo da Immagine",
         "mergingLayers": "Unione dei livelli",
         "controlLayerEmptyState": "<UploadButton>Carica un'immagine</UploadButton>, trascina un'immagine dalla <GalleryButton>galleria</GalleryButton> su questo livello oppure disegna sulla tela per iniziare."
     },

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

@@ -637,6 +637,7 @@
             "cancel": "キャンセル",
             "reset": "リセット"
         },
+        "resetCanvas": "キャンバスをリセット",
         "cropLayerToBbox": "レイヤーをバウンディングボックスでクロップ",
         "convertInpaintMaskTo": "$t(controlLayers.inpaintMask)を変換",
         "regionalGuidance_withCount_other": "領域ガイダンス",

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

@@ -1660,6 +1660,7 @@
         "clearCaches": "Очистить кэши",
         "recalculateRects": "Пересчитать прямоугольники",
         "saveBboxToGallery": "Сохранить рамку в галерею",
+        "resetCanvas": "Сбросить холст",
         "canvas": "Холст",
         "global": "Глобальный",
         "newGlobalReferenceImageError": "Проблема с созданием глобального эталонного изображения",

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

@@ -1601,9 +1601,11 @@
         "bookmark": "Đánh Dấu Để Đổi Nhanh",
         "saveCanvasToGallery": "Lưu Canvas Vào Thư Viện",
         "cropLayerToBbox": "Xén Layer Vào Hộp Giới Hạn",
+        "newFromImage": "Mới Từ Ảnh",
         "mergeDown": "Gộp Xuống",
         "mergeVisibleError": "Lỗi khi gộp layer",
         "bboxOverlay": "Hiển Thị Lớp Phủ Trên Hộp Giới Hạn",
+        "resetCanvas": "Khởi Động Lại Canvas",
         "duplicate": "Nhân Bản",
         "moveForward": "Chuyển Lên Đầu",
         "fitBboxToLayers": "Xếp Vừa Hộp Giới Hạn Vào Layer",
@@ -1641,6 +1643,7 @@
         "replaceCurrent": "Thay Đổi Cái Hiện Tại",
         "controlLayers_withCount_visible": "Layer Điều Khiển Được ({{count}})",
         "hidingType": "Ẩn {{type}}",
+        "canvasAsRasterLayer": "Biến $t(controlLayers.canvas) Thành $t(controlLayers.rasterLayer)",
         "newImg2ImgCanvasFromImage": "Chuyển Đổi Ảnh Sang Ảnh Mới Từ Ảnh",
         "copyToClipboard": "Sao Chép Vào Clipboard",
         "logDebugInfo": "Thông Tin Log Gỡ Lỗi",
@@ -1667,6 +1670,7 @@
         "sendToGallery": "Chuyển Tới Thư Viện",
         "unlocked": "Mở Khoá",
         "addReferenceImage": "Thêm $t(controlLayers.referenceImage)",
+        "canvasAsControlLayer": "Biến $t(controlLayers.canvas) Thành $t(controlLayers.controlLayer)",
         "sendingToCanvas": "Chuyển Ảnh Tạo Sinh Vào Canvas",
         "sendingToGallery": "Chuyển Ảnh Tạo Sinh Vào Thư Viện",
         "viewProgressOnCanvas": "Xem quá trình xử lý và ảnh đầu ra trong <Btn>Canvas</Btn>.",

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

@@ -1720,6 +1720,8 @@
         "sendToCanvas": "发送到画布",
         "controlLayers_withCount_visible": "控制图层（{{count}} 个）",
         "rasterLayers_withCount_visible": "栅格图层（{{count}} 个）",
+        "canvasAsRasterLayer": "将 $t(controlLayers.canvas) 转换为 $t(controlLayers.rasterLayer)",
+        "canvasAsControlLayer": "将 $t(controlLayers.canvas) 转换为 $t(controlLayers.controlLayer)",
         "convertRegionalGuidanceTo": "将 $t(controlLayers.regionalGuidance) 转换为",
         "newInpaintMask": "新建 $t(controlLayers.inpaintMask)",
         "regionIsEmpty": "选定区域为空",
@@ -1758,9 +1760,11 @@
         "pullBboxIntoLayerError": "将边界框导入图层时出现问题",
         "pullBboxIntoLayerOk": "边界框已导入到图层",
         "sendToCanvasDesc": "按下“Invoke”按钮会将您的工作进度暂存到画布上。",
+        "resetCanvas": "重置画布",
         "sendToGallery": "发送到图库",
         "sendToGalleryDesc": "按下“Invoke”键会生成并保存一张唯一的图像到您的图库中。",
         "rasterLayer_withCount_other": "栅格图层",
+        "newFromImage": "从图像创建新内容",
         "mergeDown": "向下合并",
         "clearCaches": "清除缓存",
         "recalculateRects": "重新计算矩形",

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

@@ -27,7 +27,6 @@ import { ClearQueueConfirmationsAlertDialog } from 'features/queue/components/Cl
 import { DeleteStylePresetDialog } from 'features/stylePresets/components/DeleteStylePresetDialog';
 import { StylePresetModal } from 'features/stylePresets/components/StylePresetForm/StylePresetModal';
 import RefreshAfterResetModal from 'features/system/components/SettingsModal/RefreshAfterResetModal';
-import { VideosModal } from 'features/system/components/VideosModal/VideosModal';
 import { configChanged } from 'features/system/store/configSlice';
 import { selectLanguage } from 'features/system/store/systemSelectors';
 import { AppContent } from 'features/ui/components/AppContent';
@@ -109,7 +108,6 @@ const App = ({ config = DEFAULT_CONFIG, studioInitAction }: Props) => {
       <NewCanvasSessionDialog />
       <ImageContextMenu />
       <FullscreenDropzone />
-      <VideosModal />
     </ErrorBoundary>
   );
 };

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

@@ -4,7 +4,7 @@ import type { AppStartListening } from 'app/store/middleware/listenerMiddleware'
 import { buildAdHocPostProcessingGraph } from 'features/nodes/util/graph/buildAdHocPostProcessingGraph';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
-import { enqueueMutationFixedCacheKeyOptions, queueApi } from 'services/api/endpoints/queue';
+import { queueApi } from 'services/api/endpoints/queue';
 import type { BatchConfig, ImageDTO } from 'services/api/types';
 import type { JsonObject } from 'type-fest';
 
@@ -32,7 +32,9 @@ export const addAdHocPostProcessingRequestedListener = (startAppListening: AppSt
 
       try {
         const req = dispatch(
-          queueApi.endpoints.enqueueBatch.initiate(enqueueBatchArg, enqueueMutationFixedCacheKeyOptions)
+          queueApi.endpoints.enqueueBatch.initiate(enqueueBatchArg, {
+            fixedCacheKey: 'enqueueBatch',
+          })
         );
 
         const enqueueResult = await req.unwrap();

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

@@ -13,7 +13,7 @@ import { buildSDXLGraph } from 'features/nodes/util/graph/generation/buildSDXLGr
 import type { Graph } from 'features/nodes/util/graph/generation/Graph';
 import { toast } from 'features/toast/toast';
 import { serializeError } from 'serialize-error';
-import { enqueueMutationFixedCacheKeyOptions, queueApi } from 'services/api/endpoints/queue';
+import { queueApi } from 'services/api/endpoints/queue';
 import type { Invocation } from 'services/api/types';
 import { assert, AssertionError } from 'tsafe';
 import type { JsonObject } from 'type-fest';
@@ -91,7 +91,9 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
       }
 
       const req = dispatch(
-        queueApi.endpoints.enqueueBatch.initiate(prepareBatchResult.value, enqueueMutationFixedCacheKeyOptions)
+        queueApi.endpoints.enqueueBatch.initiate(prepareBatchResult.value, {
+          fixedCacheKey: 'enqueueBatch',
+        })
       );
       req.reset();
 

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

@@ -6,7 +6,7 @@ import { isImageFieldCollectionInputInstance } from 'features/nodes/types/field'
 import { isInvocationNode } from 'features/nodes/types/invocation';
 import { buildNodesGraph } from 'features/nodes/util/graph/buildNodesGraph';
 import { buildWorkflowWithValidation } from 'features/nodes/util/workflow/buildWorkflow';
-import { enqueueMutationFixedCacheKeyOptions, queueApi } from 'services/api/endpoints/queue';
+import { queueApi } from 'services/api/endpoints/queue';
 import type { Batch, BatchConfig } from 'services/api/types';
 
 const log = logger('workflows');
@@ -70,7 +70,11 @@ export const addEnqueueRequestedNodes = (startAppListening: AppStartListening) =
         prepend: action.payload.prepend,
       };
 
-      const req = dispatch(queueApi.endpoints.enqueueBatch.initiate(batchConfig, enqueueMutationFixedCacheKeyOptions));
+      const req = dispatch(
+        queueApi.endpoints.enqueueBatch.initiate(batchConfig, {
+          fixedCacheKey: 'enqueueBatch',
+        })
+      );
       try {
         await req.unwrap();
       } finally {

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

@@ -2,7 +2,7 @@ import { enqueueRequested } from 'app/store/actions';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
 import { buildMultidiffusionUpscaleGraph } from 'features/nodes/util/graph/buildMultidiffusionUpscaleGraph';
-import { enqueueMutationFixedCacheKeyOptions, queueApi } from 'services/api/endpoints/queue';
+import { queueApi } from 'services/api/endpoints/queue';
 
 export const addEnqueueRequestedUpscale = (startAppListening: AppStartListening) => {
   startAppListening({
@@ -16,7 +16,11 @@ export const addEnqueueRequestedUpscale = (startAppListening: AppStartListening)
 
       const batchConfig = prepareLinearUIBatch(state, g, prepend, noise, posCond, 'upscaling', 'gallery');
 
-      const req = dispatch(queueApi.endpoints.enqueueBatch.initiate(batchConfig, enqueueMutationFixedCacheKeyOptions));
+      const req = dispatch(
+        queueApi.endpoints.enqueueBatch.initiate(batchConfig, {
+          fixedCacheKey: 'enqueueBatch',
+        })
+      );
       try {
         await req.unwrap();
       } finally {

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

@@ -25,7 +25,9 @@ export type AppFeature =
   | 'invocationCache'
   | 'bulkDownload'
   | 'starterModels'
-  | 'hfToken';
+  | 'hfToken'
+  | 'invocationProgressAlert';
+
 /**
  * A disable-able Stable Diffusion feature
  */

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

@@ -1,42 +0,0 @@
-import { MenuItem } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import {
-  useNewCanvasSession,
-  useNewGallerySession,
-} from 'features/controlLayers/components/NewSessionConfirmationAlertDialog';
-import { canvasReset } from 'features/controlLayers/store/actions';
-import { paramsReset } from 'features/controlLayers/store/paramsSlice';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiArrowsCounterClockwiseBold, PiFilePlusBold } from 'react-icons/pi';
-
-export const SessionMenuItems = memo(() => {
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-  const { newGallerySessionWithDialog } = useNewGallerySession();
-  const { newCanvasSessionWithDialog } = useNewCanvasSession();
-  const resetCanvasLayers = useCallback(() => {
-    dispatch(canvasReset());
-  }, [dispatch]);
-  const resetGenerationSettings = useCallback(() => {
-    dispatch(paramsReset());
-  }, [dispatch]);
-  return (
-    <>
-      <MenuItem icon={<PiFilePlusBold />} onClick={newGallerySessionWithDialog}>
-        {t('controlLayers.newGallerySession')}
-      </MenuItem>
-      <MenuItem icon={<PiFilePlusBold />} onClick={newCanvasSessionWithDialog}>
-        {t('controlLayers.newCanvasSession')}
-      </MenuItem>
-      <MenuItem icon={<PiArrowsCounterClockwiseBold />} onClick={resetCanvasLayers}>
-        {t('controlLayers.resetCanvasLayers')}
-      </MenuItem>
-      <MenuItem icon={<PiArrowsCounterClockwiseBold />} onClick={resetGenerationSettings}>
-        {t('controlLayers.resetGenerationSettings')}
-      </MenuItem>
-    </>
-  );
-});
-
-SessionMenuItems.displayName = 'SessionMenuItems';

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

@@ -0,0 +1,387 @@
+import { useStore } from '@nanostores/react';
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
+import { $true } from 'app/store/nanostores/util';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { selectParamsSlice } from 'features/controlLayers/store/paramsSlice';
+import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
+import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
+import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
+import { $templates } from 'features/nodes/store/nodesSlice';
+import { selectNodesSlice } from 'features/nodes/store/selectors';
+import type { Templates } from 'features/nodes/store/types';
+import { selectWorkflowSettingsSlice } from 'features/nodes/store/workflowSettingsSlice';
+import { isImageFieldCollectionInputInstance, isImageFieldCollectionInputTemplate } from 'features/nodes/types/field';
+import { isInvocationNode } from 'features/nodes/types/invocation';
+import { selectUpscaleSlice } from 'features/parameters/store/upscaleSlice';
+import { selectConfigSlice } from 'features/system/store/configSlice';
+import { selectSystemSlice } from 'features/system/store/systemSlice';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import i18n from 'i18next';
+import { forEach, upperFirst } from 'lodash-es';
+import { useMemo } from 'react';
+import { getConnectedEdges } from 'reactflow';
+import { $isConnected } from 'services/events/stores';
+
+const LAYER_TYPE_TO_TKEY = {
+  reference_image: 'controlLayers.referenceImage',
+  inpaint_mask: 'controlLayers.inpaintMask',
+  regional_guidance: 'controlLayers.regionalGuidance',
+  raster_layer: 'controlLayers.rasterLayer',
+  control_layer: 'controlLayers.controlLayer',
+} as const;
+
+const createSelector = (arg: {
+  templates: Templates;
+  isConnected: boolean;
+  canvasIsFiltering: boolean;
+  canvasIsTransforming: boolean;
+  canvasIsRasterizing: boolean;
+  canvasIsCompositing: boolean;
+  canvasIsSelectingObject: boolean;
+}) => {
+  const {
+    templates,
+    isConnected,
+    canvasIsFiltering,
+    canvasIsTransforming,
+    canvasIsRasterizing,
+    canvasIsCompositing,
+    canvasIsSelectingObject,
+  } = arg;
+  return createMemoizedSelector(
+    [
+      selectSystemSlice,
+      selectNodesSlice,
+      selectWorkflowSettingsSlice,
+      selectDynamicPromptsSlice,
+      selectCanvasSlice,
+      selectParamsSlice,
+      selectUpscaleSlice,
+      selectConfigSlice,
+      selectActiveTab,
+    ],
+    (system, nodes, workflowSettings, dynamicPrompts, canvas, params, upscale, config, activeTabName) => {
+      const { bbox } = canvas;
+      const { model, positivePrompt } = params;
+
+      const reasons: { prefix?: string; content: string }[] = [];
+
+      // Cannot generate if not connected
+      if (!isConnected) {
+        reasons.push({ content: i18n.t('parameters.invoke.systemDisconnected') });
+      }
+
+      if (activeTabName === 'workflows') {
+        if (workflowSettings.shouldValidateGraph) {
+          if (!nodes.nodes.length) {
+            reasons.push({ content: i18n.t('parameters.invoke.noNodesInGraph') });
+          }
+
+          nodes.nodes.forEach((node) => {
+            if (!isInvocationNode(node)) {
+              return;
+            }
+
+            const nodeTemplate = templates[node.data.type];
+
+            if (!nodeTemplate) {
+              // Node type not found
+              reasons.push({ content: i18n.t('parameters.invoke.missingNodeTemplate') });
+              return;
+            }
+
+            const connectedEdges = getConnectedEdges([node], nodes.edges);
+
+            forEach(node.data.inputs, (field) => {
+              const fieldTemplate = nodeTemplate.inputs[field.name];
+              const hasConnection = connectedEdges.some(
+                (edge) => edge.target === node.id && edge.targetHandle === field.name
+              );
+
+              if (!fieldTemplate) {
+                reasons.push({ content: i18n.t('parameters.invoke.missingFieldTemplate') });
+                return;
+              }
+
+              const baseTKeyOptions = {
+                nodeLabel: node.data.label || nodeTemplate.title,
+                fieldLabel: field.label || fieldTemplate.title,
+              };
+
+              if (fieldTemplate.required && field.value === undefined && !hasConnection) {
+                reasons.push({ content: i18n.t('parameters.invoke.missingInputForField', baseTKeyOptions) });
+                return;
+              } else if (
+                field.value &&
+                isImageFieldCollectionInputInstance(field) &&
+                isImageFieldCollectionInputTemplate(fieldTemplate)
+              ) {
+                // Image collections may have min or max items to validate
+                // TODO(psyche): generalize this to other collection types
+                if (fieldTemplate.minItems !== undefined && fieldTemplate.minItems > 0 && field.value.length === 0) {
+                  reasons.push({ content: i18n.t('parameters.invoke.collectionEmpty', baseTKeyOptions) });
+                  return;
+                }
+                if (fieldTemplate.minItems !== undefined && field.value.length < fieldTemplate.minItems) {
+                  reasons.push({
+                    content: i18n.t('parameters.invoke.collectionTooFewItems', {
+                      ...baseTKeyOptions,
+                      size: field.value.length,
+                      minItems: fieldTemplate.minItems,
+                    }),
+                  });
+                  return;
+                }
+                if (fieldTemplate.maxItems !== undefined && field.value.length > fieldTemplate.maxItems) {
+                  reasons.push({
+                    content: i18n.t('parameters.invoke.collectionTooManyItems', {
+                      ...baseTKeyOptions,
+                      size: field.value.length,
+                      maxItems: fieldTemplate.maxItems,
+                    }),
+                  });
+                  return;
+                }
+              }
+            });
+          });
+        }
+      } else if (activeTabName === 'upscaling') {
+        if (!upscale.upscaleInitialImage) {
+          reasons.push({ content: i18n.t('upscaling.missingUpscaleInitialImage') });
+        } else if (config.maxUpscaleDimension) {
+          const { width, height } = upscale.upscaleInitialImage;
+          const { scale } = upscale;
+
+          const maxPixels = config.maxUpscaleDimension ** 2;
+          const upscaledPixels = width * scale * height * scale;
+
+          if (upscaledPixels > maxPixels) {
+            reasons.push({ content: i18n.t('upscaling.exceedsMaxSize') });
+          }
+        }
+        if (model && !['sd-1', 'sdxl'].includes(model.base)) {
+          // When we are using an upsupported model, do not add the other warnings
+          reasons.push({ content: i18n.t('upscaling.incompatibleBaseModel') });
+        } else {
+          // Using a compatible model, add all warnings
+          if (!model) {
+            reasons.push({ content: i18n.t('parameters.invoke.noModelSelected') });
+          }
+          if (!upscale.upscaleModel) {
+            reasons.push({ content: i18n.t('upscaling.missingUpscaleModel') });
+          }
+          if (!upscale.tileControlnetModel) {
+            reasons.push({ content: i18n.t('upscaling.missingTileControlNetModel') });
+          }
+        }
+      } else {
+        if (canvasIsFiltering) {
+          reasons.push({ content: i18n.t('parameters.invoke.canvasIsFiltering') });
+        }
+        if (canvasIsTransforming) {
+          reasons.push({ content: i18n.t('parameters.invoke.canvasIsTransforming') });
+        }
+        if (canvasIsRasterizing) {
+          reasons.push({ content: i18n.t('parameters.invoke.canvasIsRasterizing') });
+        }
+        if (canvasIsCompositing) {
+          reasons.push({ content: i18n.t('parameters.invoke.canvasIsCompositing') });
+        }
+        if (canvasIsSelectingObject) {
+          reasons.push({ content: i18n.t('parameters.invoke.canvasIsSelectingObject') });
+        }
+
+        if (dynamicPrompts.prompts.length === 0 && getShouldProcessPrompt(positivePrompt)) {
+          reasons.push({ content: i18n.t('parameters.invoke.noPrompts') });
+        }
+
+        if (!model) {
+          reasons.push({ content: i18n.t('parameters.invoke.noModelSelected') });
+        }
+
+        if (model?.base === 'flux') {
+          if (!params.t5EncoderModel) {
+            reasons.push({ content: i18n.t('parameters.invoke.noT5EncoderModelSelected') });
+          }
+          if (!params.clipEmbedModel) {
+            reasons.push({ content: i18n.t('parameters.invoke.noCLIPEmbedModelSelected') });
+          }
+          if (!params.fluxVAE) {
+            reasons.push({ content: i18n.t('parameters.invoke.noFLUXVAEModelSelected') });
+          }
+          if (bbox.scaleMethod === 'none') {
+            if (bbox.rect.width % 16 !== 0) {
+              reasons.push({
+                content: i18n.t('parameters.invoke.fluxModelIncompatibleBboxWidth', { width: bbox.rect.width }),
+              });
+            }
+            if (bbox.rect.height % 16 !== 0) {
+              reasons.push({
+                content: i18n.t('parameters.invoke.fluxModelIncompatibleBboxHeight', { height: bbox.rect.height }),
+              });
+            }
+          } else {
+            if (bbox.scaledSize.width % 16 !== 0) {
+              reasons.push({
+                content: i18n.t('parameters.invoke.fluxModelIncompatibleScaledBboxWidth', {
+                  width: bbox.scaledSize.width,
+                }),
+              });
+            }
+            if (bbox.scaledSize.height % 16 !== 0) {
+              reasons.push({
+                content: i18n.t('parameters.invoke.fluxModelIncompatibleScaledBboxHeight', {
+                  height: bbox.scaledSize.height,
+                }),
+              });
+            }
+          }
+        }
+
+        canvas.controlLayers.entities
+          .filter((controlLayer) => controlLayer.isEnabled)
+          .forEach((controlLayer, i) => {
+            const layerLiteral = i18n.t('controlLayers.layer_one');
+            const layerNumber = i + 1;
+            const layerType = i18n.t(LAYER_TYPE_TO_TKEY['control_layer']);
+            const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
+            const problems: string[] = [];
+            // Must have model
+            if (!controlLayer.controlAdapter.model) {
+              problems.push(i18n.t('parameters.invoke.layer.controlAdapterNoModelSelected'));
+            }
+            // Model base must match
+            if (controlLayer.controlAdapter.model?.base !== model?.base) {
+              problems.push(i18n.t('parameters.invoke.layer.controlAdapterIncompatibleBaseModel'));
+            }
+            if (problems.length) {
+              const content = upperFirst(problems.join(', '));
+              reasons.push({ prefix, content });
+            }
+          });
+
+        canvas.referenceImages.entities
+          .filter((entity) => entity.isEnabled)
+          .forEach((entity, i) => {
+            const layerLiteral = i18n.t('controlLayers.layer_one');
+            const layerNumber = i + 1;
+            const layerType = i18n.t(LAYER_TYPE_TO_TKEY[entity.type]);
+            const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
+            const problems: string[] = [];
+
+            // Must have model
+            if (!entity.ipAdapter.model) {
+              problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoModelSelected'));
+            }
+            // Model base must match
+            if (entity.ipAdapter.model?.base !== model?.base) {
+              problems.push(i18n.t('parameters.invoke.layer.ipAdapterIncompatibleBaseModel'));
+            }
+            // Must have an image
+            if (!entity.ipAdapter.image) {
+              problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoImageSelected'));
+            }
+
+            if (problems.length) {
+              const content = upperFirst(problems.join(', '));
+              reasons.push({ prefix, content });
+            }
+          });
+
+        canvas.regionalGuidance.entities
+          .filter((entity) => entity.isEnabled)
+          .forEach((entity, i) => {
+            const layerLiteral = i18n.t('controlLayers.layer_one');
+            const layerNumber = i + 1;
+            const layerType = i18n.t(LAYER_TYPE_TO_TKEY[entity.type]);
+            const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
+            const problems: string[] = [];
+            // Must have a region
+            if (entity.objects.length === 0) {
+              problems.push(i18n.t('parameters.invoke.layer.rgNoRegion'));
+            }
+            // Must have at least 1 prompt or IP Adapter
+            if (
+              entity.positivePrompt === null &&
+              entity.negativePrompt === null &&
+              entity.referenceImages.length === 0
+            ) {
+              problems.push(i18n.t('parameters.invoke.layer.rgNoPromptsOrIPAdapters'));
+            }
+            entity.referenceImages.forEach(({ ipAdapter }) => {
+              // Must have model
+              if (!ipAdapter.model) {
+                problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoModelSelected'));
+              }
+              // Model base must match
+              if (ipAdapter.model?.base !== model?.base) {
+                problems.push(i18n.t('parameters.invoke.layer.ipAdapterIncompatibleBaseModel'));
+              }
+              // Must have an image
+              if (!ipAdapter.image) {
+                problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoImageSelected'));
+              }
+            });
+
+            if (problems.length) {
+              const content = upperFirst(problems.join(', '));
+              reasons.push({ prefix, content });
+            }
+          });
+
+        canvas.rasterLayers.entities
+          .filter((entity) => entity.isEnabled)
+          .forEach((entity, i) => {
+            const layerLiteral = i18n.t('controlLayers.layer_one');
+            const layerNumber = i + 1;
+            const layerType = i18n.t(LAYER_TYPE_TO_TKEY[entity.type]);
+            const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
+            const problems: string[] = [];
+
+            if (problems.length) {
+              const content = upperFirst(problems.join(', '));
+              reasons.push({ prefix, content });
+            }
+          });
+      }
+
+      return { isReady: !reasons.length, reasons };
+    }
+  );
+};
+
+export const useIsReadyToEnqueue = () => {
+  const templates = useStore($templates);
+  const isConnected = useStore($isConnected);
+  const canvasManager = useCanvasManagerSafe();
+  const canvasIsFiltering = useStore(canvasManager?.stateApi.$isFiltering ?? $true);
+  const canvasIsTransforming = useStore(canvasManager?.stateApi.$isTransforming ?? $true);
+  const canvasIsRasterizing = useStore(canvasManager?.stateApi.$isRasterizing ?? $true);
+  const canvasIsSelectingObject = useStore(canvasManager?.stateApi.$isSegmenting ?? $true);
+  const canvasIsCompositing = useStore(canvasManager?.compositor.$isBusy ?? $true);
+  const selector = useMemo(
+    () =>
+      createSelector({
+        templates,
+        isConnected,
+        canvasIsFiltering,
+        canvasIsTransforming,
+        canvasIsRasterizing,
+        canvasIsCompositing,
+        canvasIsSelectingObject,
+      }),
+    [
+      templates,
+      isConnected,
+      canvasIsFiltering,
+      canvasIsTransforming,
+      canvasIsRasterizing,
+      canvasIsCompositing,
+      canvasIsSelectingObject,
+    ]
+  );
+  const value = useAppSelector(selector);
+  return value;
+};

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsInvocationProgress.tsx

@@ -2,6 +2,7 @@ import { Alert, AlertDescription, AlertIcon, AlertTitle } from '@invoke-ai/ui-li
 import { useStore } from '@nanostores/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { useDeferredModelLoadingInvocationProgressMessage } from 'features/controlLayers/hooks/useDeferredModelLoadingInvocationProgressMessage';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { selectIsLocal } from 'features/system/store/configSlice';
 import { selectSystemShouldShowInvocationProgressDetail } from 'features/system/store/systemSlice';
 import { memo } from 'react';
@@ -43,14 +44,20 @@ const CanvasAlertsInvocationProgressContentCommercial = memo(() => {
 CanvasAlertsInvocationProgressContentCommercial.displayName = 'CanvasAlertsInvocationProgressContentCommercial';
 
 export const CanvasAlertsInvocationProgress = memo(() => {
+  const isProgressMessageAlertEnabled = useFeatureStatus('invocationProgressAlert');
   const shouldShowInvocationProgressDetail = useAppSelector(selectSystemShouldShowInvocationProgressDetail);
   const isLocal = useAppSelector(selectIsLocal);
 
+  // The alert is disabled at the system level
+  if (!isProgressMessageAlertEnabled) {
+    return null;
+  }
+
   if (!isLocal) {
     return <CanvasAlertsInvocationProgressContentCommercial />;
   }
 
-  // OSS user setting
+  // The alert is disabled at the user level
   if (!shouldShowInvocationProgressDetail) {
     return null;
   }

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbar.tsx

@@ -4,8 +4,8 @@ import { CanvasSettingsPopover } from 'features/controlLayers/components/Setting
 import { ToolColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
 import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
 import { CanvasToolbarFitBboxToLayersButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton';
-import { CanvasToolbarNewSessionMenuButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarNewSessionMenuButton';
 import { CanvasToolbarRedoButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarRedoButton';
+import { CanvasToolbarResetCanvasButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton';
 import { CanvasToolbarResetViewButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton';
 import { CanvasToolbarSaveToGalleryButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarSaveToGalleryButton';
 import { CanvasToolbarScale } from 'features/controlLayers/components/Toolbar/CanvasToolbarScale';
@@ -43,7 +43,7 @@ export const CanvasToolbar = memo(() => {
         <CanvasToolbarSaveToGalleryButton />
         <CanvasToolbarUndoButton />
         <CanvasToolbarRedoButton />
-        <CanvasToolbarNewSessionMenuButton />
+        <CanvasToolbarResetCanvasButton />
         <CanvasSettingsPopover />
       </Flex>
     </Flex>

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarNewSessionMenuButton.tsx

@@ -1,25 +0,0 @@
-import { IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
-import { SessionMenuItems } from 'common/components/SessionMenuItems';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiFilePlusBold } from 'react-icons/pi';
-
-export const CanvasToolbarNewSessionMenuButton = memo(() => {
-  const { t } = useTranslation();
-  return (
-    <Menu placement="bottom-end">
-      <MenuButton
-        as={IconButton}
-        aria-label={t('controlLayers.newSession')}
-        icon={<PiFilePlusBold />}
-        variant="link"
-        alignSelf="stretch"
-      />
-      <MenuList>
-        <SessionMenuItems />
-      </MenuList>
-    </Menu>
-  );
-});
-
-CanvasToolbarNewSessionMenuButton.displayName = 'CanvasToolbarNewSessionMenuButton';

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarResetCanvasButton.tsx

@@ -0,0 +1,30 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { canvasReset } from 'features/controlLayers/store/actions';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiTrashBold } from 'react-icons/pi';
+
+export const CanvasToolbarResetCanvasButton = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const canvasManager = useCanvasManager();
+  const onClick = useCallback(() => {
+    dispatch(canvasReset());
+    canvasManager.stage.fitLayersToStage();
+  }, [canvasManager.stage, dispatch]);
+  return (
+    <IconButton
+      aria-label={t('controlLayers.resetCanvas')}
+      tooltip={t('controlLayers.resetCanvas')}
+      onClick={onClick}
+      colorScheme="error"
+      icon={<PiTrashBold />}
+      variant="link"
+      alignSelf="stretch"
+    />
+  );
+});
+
+CanvasToolbarResetCanvasButton.displayName = 'CanvasToolbarResetCanvasButton';

invokeai/frontend/web/src/features/controlLayers/konva/CanvasStateApiModule.ts

@@ -51,7 +51,7 @@ import type { Graph } from 'features/nodes/util/graph/generation/Graph';
 import { atom, computed } from 'nanostores';
 import type { Logger } from 'roarr';
 import { getImageDTO } from 'services/api/endpoints/images';
-import { enqueueMutationFixedCacheKeyOptions, queueApi } from 'services/api/endpoints/queue';
+import { queueApi } from 'services/api/endpoints/queue';
 import type { BatchConfig, ImageDTO, S } from 'services/api/types';
 import { QueueError } from 'services/events/errors';
 import type { Param0 } from 'tsafe';
@@ -402,7 +402,7 @@ export class CanvasStateApiModule extends CanvasModuleBase {
         queueApi.endpoints.enqueueBatch.initiate(batch, {
           // Use the same cache key for all enqueueBatch requests, so that all consumers of this query get the same status
           // updates.
-          ...enqueueMutationFixedCacheKeyOptions,
+          fixedCacheKey: 'enqueueBatch',
           // We do not need RTK to track this request in the store
           track: false,
         })

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

@@ -273,27 +273,24 @@ export const paramsSlice = createSlice({
     setCanvasCoherenceMinDenoise: (state, action: PayloadAction<number>) => {
       state.canvasCoherenceMinDenoise = action.payload;
     },
-    paramsReset: (state) => resetState(state),
   },
   extraReducers(builder) {
-    builder.addMatcher(newSessionRequested, (state) => resetState(state));
+    builder.addMatcher(newSessionRequested, (state) => {
+      // When a new session is requested, we need to keep the current model selections, plus dependent state
+      // like VAE precision. Everything else gets reset to default.
+      const newState = deepClone(initialState);
+      newState.model = state.model;
+      newState.vae = state.vae;
+      newState.fluxVAE = state.fluxVAE;
+      newState.vaePrecision = state.vaePrecision;
+      newState.t5EncoderModel = state.t5EncoderModel;
+      newState.clipEmbedModel = state.clipEmbedModel;
+      newState.refinerModel = state.refinerModel;
+      return newState;
+    });
   },
 });
 
-const resetState = (state: ParamsState): ParamsState => {
-  // When a new session is requested, we need to keep the current model selections, plus dependent state
-  // like VAE precision. Everything else gets reset to default.
-  const newState = deepClone(initialState);
-  newState.model = state.model;
-  newState.vae = state.vae;
-  newState.fluxVAE = state.fluxVAE;
-  newState.vaePrecision = state.vaePrecision;
-  newState.t5EncoderModel = state.t5EncoderModel;
-  newState.clipEmbedModel = state.clipEmbedModel;
-  newState.refinerModel = state.refinerModel;
-  return newState;
-};
-
 export const {
   setInfillMethod,
   setInfillTileSize,
@@ -337,7 +334,6 @@ export const {
   setRefinerNegativeAestheticScore,
   setRefinerStart,
   modelChanged,
-  paramsReset,
 } = paramsSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

invokeai/frontend/web/src/features/dynamicPrompts/store/dynamicPromptsSlice.ts

@@ -7,7 +7,7 @@ const zSeedBehaviour = z.enum(['PER_ITERATION', 'PER_PROMPT']);
 type SeedBehaviour = z.infer<typeof zSeedBehaviour>;
 export const isSeedBehaviour = (v: unknown): v is SeedBehaviour => zSeedBehaviour.safeParse(v).success;
 
-export interface DynamicPromptsState {
+interface DynamicPromptsState {
   _version: 1;
   maxPrompts: number;
   combinatorial: boolean;

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

@@ -1,110 +0,0 @@
-import { Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
-import { useAppStore } from 'app/store/nanostores/store';
-import { useAppSelector } from 'app/store/storeHooks';
-import { SubMenuButtonContent, useSubMenu } from 'common/hooks/useSubMenu';
-import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
-import { selectIsSD3 } from 'features/controlLayers/store/paramsSlice';
-import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
-import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
-import { newCanvasFromImage } from 'features/imageActions/actions';
-import { toast } from 'features/toast/toast';
-import { setActiveTab } from 'features/ui/store/uiSlice';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiFileBold, PiPlusBold } from 'react-icons/pi';
-
-export const ImageMenuItemNewCanvasFromImageSubMenu = memo(() => {
-  const { t } = useTranslation();
-  const subMenu = useSubMenu();
-  const store = useAppStore();
-  const imageDTO = useImageDTOContext();
-  const imageViewer = useImageViewer();
-  const isBusy = useCanvasIsBusy();
-  const isSD3 = useAppSelector(selectIsSD3);
-
-  const onClickNewCanvasWithRasterLayerFromImage = useCallback(() => {
-    const { dispatch, getState } = store;
-    newCanvasFromImage({ imageDTO, withResize: false, type: 'raster_layer', dispatch, getState });
-    dispatch(setActiveTab('canvas'));
-    imageViewer.close();
-    toast({
-      id: 'SENT_TO_CANVAS',
-      title: t('toast.sentToCanvas'),
-      status: 'success',
-    });
-  }, [imageDTO, imageViewer, store, t]);
-
-  const onClickNewCanvasWithControlLayerFromImage = useCallback(() => {
-    const { dispatch, getState } = store;
-    newCanvasFromImage({ imageDTO, withResize: false, type: 'control_layer', dispatch, getState });
-    dispatch(setActiveTab('canvas'));
-    imageViewer.close();
-    toast({
-      id: 'SENT_TO_CANVAS',
-      title: t('toast.sentToCanvas'),
-      status: 'success',
-    });
-  }, [imageDTO, imageViewer, store, t]);
-
-  const onClickNewCanvasWithRasterLayerFromImageWithResize = useCallback(() => {
-    const { dispatch, getState } = store;
-    newCanvasFromImage({ imageDTO, withResize: true, type: 'raster_layer', dispatch, getState });
-    dispatch(setActiveTab('canvas'));
-    imageViewer.close();
-    toast({
-      id: 'SENT_TO_CANVAS',
-      title: t('toast.sentToCanvas'),
-      status: 'success',
-    });
-  }, [imageDTO, imageViewer, store, t]);
-
-  const onClickNewCanvasWithControlLayerFromImageWithResize = useCallback(() => {
-    const { dispatch, getState } = store;
-    newCanvasFromImage({ imageDTO, withResize: true, type: 'control_layer', dispatch, getState });
-    dispatch(setActiveTab('canvas'));
-    imageViewer.close();
-    toast({
-      id: 'SENT_TO_CANVAS',
-      title: t('toast.sentToCanvas'),
-      status: 'success',
-    });
-  }, [imageDTO, imageViewer, store, t]);
-
-  return (
-    <MenuItem {...subMenu.parentMenuItemProps} icon={<PiPlusBold />}>
-      <Menu {...subMenu.menuProps}>
-        <MenuButton {...subMenu.menuButtonProps}>
-          <SubMenuButtonContent label={t('controlLayers.newCanvasFromImage')} />
-        </MenuButton>
-        <MenuList {...subMenu.menuListProps}>
-          <MenuItem icon={<PiFileBold />} onClickCapture={onClickNewCanvasWithRasterLayerFromImage} isDisabled={isBusy}>
-            {t('controlLayers.asRasterLayer')}
-          </MenuItem>
-          <MenuItem
-            icon={<PiFileBold />}
-            onClickCapture={onClickNewCanvasWithRasterLayerFromImageWithResize}
-            isDisabled={isBusy}
-          >
-            {t('controlLayers.asRasterLayerResize')}
-          </MenuItem>
-          <MenuItem
-            icon={<PiFileBold />}
-            onClickCapture={onClickNewCanvasWithControlLayerFromImage}
-            isDisabled={isBusy || isSD3}
-          >
-            {t('controlLayers.asControlLayer')}
-          </MenuItem>
-          <MenuItem
-            icon={<PiFileBold />}
-            onClickCapture={onClickNewCanvasWithControlLayerFromImageWithResize}
-            isDisabled={isBusy || isSD3}
-          >
-            {t('controlLayers.asControlLayerResize')}
-          </MenuItem>
-        </MenuList>
-      </Menu>
-    </MenuItem>
-  );
-});
-
-ImageMenuItemNewCanvasFromImageSubMenu.displayName = 'ImageMenuItemNewCanvasFromImageSubMenu';

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

@@ -8,14 +8,14 @@ import { selectIsFLUX, selectIsSD3 } from 'features/controlLayers/store/paramsSl
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { sentImageToCanvas } from 'features/gallery/store/actions';
-import { createNewCanvasEntityFromImage } from 'features/imageActions/actions';
+import { createNewCanvasEntityFromImage, newCanvasFromImage } from 'features/imageActions/actions';
 import { toast } from 'features/toast/toast';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiPlusBold } from 'react-icons/pi';
+import { PiFileBold, PiPlusBold } from 'react-icons/pi';
 
-export const ImageMenuItemNewLayerFromImageSubMenu = memo(() => {
+export const ImageMenuItemNewFromImageSubMenu = memo(() => {
   const { t } = useTranslation();
   const subMenu = useSubMenu();
   const store = useAppStore();
@@ -25,6 +25,30 @@ export const ImageMenuItemNewLayerFromImageSubMenu = memo(() => {
   const isFLUX = useAppSelector(selectIsFLUX);
   const isSD3 = useAppSelector(selectIsSD3);
 
+  const onClickNewCanvasWithRasterLayerFromImage = useCallback(() => {
+    const { dispatch, getState } = store;
+    newCanvasFromImage({ imageDTO, type: 'raster_layer', dispatch, getState });
+    dispatch(setActiveTab('canvas'));
+    imageViewer.close();
+    toast({
+      id: 'SENT_TO_CANVAS',
+      title: t('toast.sentToCanvas'),
+      status: 'success',
+    });
+  }, [imageDTO, imageViewer, store, t]);
+
+  const onClickNewCanvasWithControlLayerFromImage = useCallback(() => {
+    const { dispatch, getState } = store;
+    newCanvasFromImage({ imageDTO, type: 'control_layer', dispatch, getState });
+    dispatch(setActiveTab('canvas'));
+    imageViewer.close();
+    toast({
+      id: 'SENT_TO_CANVAS',
+      title: t('toast.sentToCanvas'),
+      status: 'success',
+    });
+  }, [imageDTO, imageViewer, store, t]);
+
   const onClickNewRasterLayerFromImage = useCallback(() => {
     const { dispatch, getState } = store;
     createNewCanvasEntityFromImage({ imageDTO, type: 'raster_layer', dispatch, getState });
@@ -81,9 +105,19 @@ export const ImageMenuItemNewLayerFromImageSubMenu = memo(() => {
     <MenuItem {...subMenu.parentMenuItemProps} icon={<PiPlusBold />}>
       <Menu {...subMenu.menuProps}>
         <MenuButton {...subMenu.menuButtonProps}>
-          <SubMenuButtonContent label={t('controlLayers.newLayerFromImage')} />
+          <SubMenuButtonContent label={t('controlLayers.newFromImage')} />
         </MenuButton>
         <MenuList {...subMenu.menuListProps}>
+          <MenuItem icon={<PiFileBold />} onClickCapture={onClickNewCanvasWithRasterLayerFromImage} isDisabled={isBusy}>
+            {t('controlLayers.canvasAsRasterLayer')}
+          </MenuItem>
+          <MenuItem
+            icon={<PiFileBold />}
+            onClickCapture={onClickNewCanvasWithControlLayerFromImage}
+            isDisabled={isBusy || isSD3}
+          >
+            {t('controlLayers.canvasAsControlLayer')}
+          </MenuItem>
           <MenuItem icon={<NewLayerIcon />} onClickCapture={onClickNewInpaintMaskFromImage} isDisabled={isBusy}>
             {t('controlLayers.inpaintMask')}
           </MenuItem>
@@ -110,4 +144,4 @@ export const ImageMenuItemNewLayerFromImageSubMenu = memo(() => {
   );
 });
 
-ImageMenuItemNewLayerFromImageSubMenu.displayName = 'ImageMenuItemNewLayerFromImageSubMenu';
+ImageMenuItemNewFromImageSubMenu.displayName = 'ImageMenuItemNewFromImageSubMenu';

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

@@ -7,8 +7,7 @@ import { ImageMenuItemDelete } from 'features/gallery/components/ImageContextMen
 import { ImageMenuItemDownload } from 'features/gallery/components/ImageContextMenu/ImageMenuItemDownload';
 import { ImageMenuItemLoadWorkflow } from 'features/gallery/components/ImageContextMenu/ImageMenuItemLoadWorkflow';
 import { ImageMenuItemMetadataRecallActions } from 'features/gallery/components/ImageContextMenu/ImageMenuItemMetadataRecallActions';
-import { ImageMenuItemNewCanvasFromImageSubMenu } from 'features/gallery/components/ImageContextMenu/ImageMenuItemNewCanvasFromImageSubMenu';
-import { ImageMenuItemNewLayerFromImageSubMenu } from 'features/gallery/components/ImageContextMenu/ImageMenuItemNewLayerFromImageSubMenu';
+import { ImageMenuItemNewFromImageSubMenu } from 'features/gallery/components/ImageContextMenu/ImageMenuItemNewFromImageSubMenu';
 import { ImageMenuItemOpenInNewTab } from 'features/gallery/components/ImageContextMenu/ImageMenuItemOpenInNewTab';
 import { ImageMenuItemOpenInViewer } from 'features/gallery/components/ImageContextMenu/ImageMenuItemOpenInViewer';
 import { ImageMenuItemSelectForCompare } from 'features/gallery/components/ImageContextMenu/ImageMenuItemSelectForCompare';
@@ -39,8 +38,7 @@ const SingleSelectionMenuItems = ({ imageDTO }: SingleSelectionMenuItemsProps) =
       <MenuDivider />
       <ImageMenuItemSendToUpscale />
       <CanvasManagerProviderGate>
-        <ImageMenuItemNewCanvasFromImageSubMenu />
-        <ImageMenuItemNewLayerFromImageSubMenu />
+        <ImageMenuItemNewFromImageSubMenu />
       </CanvasManagerProviderGate>
       <MenuDivider />
       <ImageMenuItemChangeBoard />

invokeai/frontend/web/src/features/imageActions/actions.ts

@@ -182,24 +182,21 @@ export const createNewCanvasEntityFromImage = (arg: {
 };
 
 /**
- * Creates a new canvas with the given image as the only layer:
+ * Creates a new canvas with the given image as the initial image, replicating the img2img flow:
  * - Reset the canvas
  * - Resize the bbox to the image's aspect ratio at the optimal size for the selected model
- * - Add the image as a layer of the given type
- * - If `withResize`: Resizes the layer to fit the bbox using the 'fill' strategy
+ * - Add the image as a raster layer
+ * - Resizes the layer to fit the bbox using the 'fill' strategy
  *
  * This allows the user to immediately generate a new image from the given image without any additional steps.
- *
- * Using 'raster_layer' for the type and enabling `withResize` replicates the common img2img flow.
  */
 export const newCanvasFromImage = (arg: {
   imageDTO: ImageDTO;
   type: CanvasEntityType | 'regional_guidance_with_reference_image';
-  withResize: boolean;
   dispatch: AppDispatch;
   getState: () => RootState;
 }) => {
-  const { type, imageDTO, withResize, dispatch, getState } = arg;
+  const { type, imageDTO, dispatch, getState } = arg;
   const state = getState();
 
   const base = selectBboxModelBase(state);
@@ -232,9 +229,7 @@ export const newCanvasFromImage = (arg: {
         objects: [imageObject],
         position: { x, y },
       } satisfies Partial<CanvasRasterLayerState>;
-      if (withResize) {
-        addInitCallback(overrides.id);
-      }
+      addInitCallback(overrides.id);
       dispatch(canvasReset());
       // The `bboxChangedFromCanvas` reducer does no validation! Careful!
       dispatch(bboxChangedFromCanvas({ x: 0, y: 0, width, height }));
@@ -248,9 +243,7 @@ export const newCanvasFromImage = (arg: {
         position: { x, y },
         controlAdapter: deepClone(initialControlNet),
       } satisfies Partial<CanvasControlLayerState>;
-      if (withResize) {
-        addInitCallback(overrides.id);
-      }
+      addInitCallback(overrides.id);
       dispatch(canvasReset());
       // The `bboxChangedFromCanvas` reducer does no validation! Careful!
       dispatch(bboxChangedFromCanvas({ x: 0, y: 0, width, height }));
@@ -263,9 +256,7 @@ export const newCanvasFromImage = (arg: {
         objects: [imageObject],
         position: { x, y },
       } satisfies Partial<CanvasInpaintMaskState>;
-      if (withResize) {
-        addInitCallback(overrides.id);
-      }
+      addInitCallback(overrides.id);
       dispatch(canvasReset());
       // The `bboxChangedFromCanvas` reducer does no validation! Careful!
       dispatch(bboxChangedFromCanvas({ x: 0, y: 0, width, height }));
@@ -278,9 +269,7 @@ export const newCanvasFromImage = (arg: {
         objects: [imageObject],
         position: { x, y },
       } satisfies Partial<CanvasRegionalGuidanceState>;
-      if (withResize) {
-        addInitCallback(overrides.id);
-      }
+      addInitCallback(overrides.id);
       dispatch(canvasReset());
       // The `bboxChangedFromCanvas` reducer does no validation! Careful!
       dispatch(bboxChangedFromCanvas({ x: 0, y: 0, width, height }));

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

@@ -41,11 +41,7 @@ const ClassificationTooltipContent = memo(({ classification }: { classification:
   }
 
   if (classification === 'internal') {
-    return t('nodes.internalDesc');
-  }
-
-  if (classification === 'special') {
-    return t('nodes.specialDesc');
+    return t('nodes.prototypeDesc');
   }
 
   return null;

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

@@ -4,7 +4,7 @@ import type { PersistConfig, RootState } from 'app/store/store';
 import type { Selector } from 'react-redux';
 import { SelectionMode } from 'reactflow';
 
-export type WorkflowSettingsState = {
+type WorkflowSettingsState = {
   _version: 1;
   shouldShowMinimapPanel: boolean;
   shouldValidateGraph: boolean;

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

@@ -1,310 +0,0 @@
-import type { TooltipProps } from '@invoke-ai/ui-library';
-import { Divider, Flex, ListItem, Text, Tooltip, UnorderedList } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import { $true } from 'app/store/nanostores/util';
-import { useAppSelector } from 'app/store/storeHooks';
-import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { selectSendToCanvas } from 'features/controlLayers/store/canvasSettingsSlice';
-import { selectIterations } from 'features/controlLayers/store/paramsSlice';
-import { selectDynamicPromptsIsLoading } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
-import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
-import { $templates } from 'features/nodes/store/nodesSlice';
-import type { Reason } from 'features/queue/store/readiness';
-import {
-  buildSelectIsReadyToEnqueueCanvasTab,
-  buildSelectIsReadyToEnqueueUpscaleTab,
-  buildSelectIsReadyToEnqueueWorkflowsTab,
-  buildSelectReasonsWhyCannotEnqueueCanvasTab,
-  buildSelectReasonsWhyCannotEnqueueUpscaleTab,
-  buildSelectReasonsWhyCannotEnqueueWorkflowsTab,
-  selectPromptsCount,
-  selectWorkflowsBatchSize,
-} from 'features/queue/store/readiness';
-import { selectActiveTab } from 'features/ui/store/uiSelectors';
-import type { PropsWithChildren } from 'react';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { enqueueMutationFixedCacheKeyOptions, useEnqueueBatchMutation } from 'services/api/endpoints/queue';
-import { useBoardName } from 'services/api/hooks/useBoardName';
-import { $isConnected } from 'services/events/stores';
-
-type Props = TooltipProps & {
-  prepend?: boolean;
-};
-
-export const InvokeButtonTooltip = ({ prepend, children, ...rest }: PropsWithChildren<Props>) => {
-  return (
-    <Tooltip label={<TooltipContent prepend={prepend} />} maxW={512} {...rest}>
-      {children}
-    </Tooltip>
-  );
-};
-
-const TooltipContent = memo(({ prepend = false }: { prepend?: boolean }) => {
-  const activeTab = useAppSelector(selectActiveTab);
-
-  if (activeTab === 'canvas') {
-    return <CanvasTabTooltipContent prepend={prepend} />;
-  }
-
-  if (activeTab === 'workflows') {
-    return <WorkflowsTabTooltipContent prepend={prepend} />;
-  }
-
-  if (activeTab === 'upscaling') {
-    return <UpscaleTabTooltipContent prepend={prepend} />;
-  }
-
-  return null;
-});
-TooltipContent.displayName = 'TooltipContent';
-
-const CanvasTabTooltipContent = memo(({ prepend = false }: { prepend?: boolean }) => {
-  const isConnected = useStore($isConnected);
-  const canvasManager = useCanvasManagerSafe();
-  const canvasIsFiltering = useStore(canvasManager?.stateApi.$isFiltering ?? $true);
-  const canvasIsTransforming = useStore(canvasManager?.stateApi.$isTransforming ?? $true);
-  const canvasIsRasterizing = useStore(canvasManager?.stateApi.$isRasterizing ?? $true);
-  const canvasIsSelectingObject = useStore(canvasManager?.stateApi.$isSegmenting ?? $true);
-  const canvasIsCompositing = useStore(canvasManager?.compositor.$isBusy ?? $true);
-
-  const selectIsReady = useMemo(
-    () =>
-      buildSelectIsReadyToEnqueueCanvasTab({
-        isConnected,
-        canvasIsFiltering,
-        canvasIsTransforming,
-        canvasIsRasterizing,
-        canvasIsSelectingObject,
-        canvasIsCompositing,
-      }),
-    [
-      isConnected,
-      canvasIsCompositing,
-      canvasIsFiltering,
-      canvasIsRasterizing,
-      canvasIsSelectingObject,
-      canvasIsTransforming,
-    ]
-  );
-
-  const selectReasons = useMemo(
-    () =>
-      buildSelectReasonsWhyCannotEnqueueCanvasTab({
-        isConnected,
-        canvasIsFiltering,
-        canvasIsTransforming,
-        canvasIsRasterizing,
-        canvasIsSelectingObject,
-        canvasIsCompositing,
-      }),
-    [
-      isConnected,
-      canvasIsCompositing,
-      canvasIsFiltering,
-      canvasIsRasterizing,
-      canvasIsSelectingObject,
-      canvasIsTransforming,
-    ]
-  );
-
-  const isReady = useAppSelector(selectIsReady);
-  const reasons = useAppSelector(selectReasons);
-
-  return (
-    <Flex flexDir="column" gap={1}>
-      <IsReadyText isReady={isReady} prepend={prepend} />
-      <QueueCountPredictionCanvasOrUpscaleTab />
-      {reasons.length > 0 && (
-        <>
-          <StyledDivider />
-          <ReasonsList reasons={reasons} />
-        </>
-      )}
-      <StyledDivider />
-      <AddingToText />
-    </Flex>
-  );
-});
-CanvasTabTooltipContent.displayName = 'CanvasTabTooltipContent';
-
-const UpscaleTabTooltipContent = memo(({ prepend = false }: { prepend?: boolean }) => {
-  const isConnected = useStore($isConnected);
-
-  const selectIsReady = useMemo(() => buildSelectIsReadyToEnqueueUpscaleTab({ isConnected }), [isConnected]);
-  const selectReasons = useMemo(() => buildSelectReasonsWhyCannotEnqueueUpscaleTab({ isConnected }), [isConnected]);
-
-  const isReady = useAppSelector(selectIsReady);
-  const reasons = useAppSelector(selectReasons);
-
-  return (
-    <Flex flexDir="column" gap={1}>
-      <IsReadyText isReady={isReady} prepend={prepend} />
-      <QueueCountPredictionCanvasOrUpscaleTab />
-      {reasons.length > 0 && (
-        <>
-          <StyledDivider />
-          <ReasonsList reasons={reasons} />
-        </>
-      )}
-      <StyledDivider />
-      <AddingToText />
-    </Flex>
-  );
-});
-UpscaleTabTooltipContent.displayName = 'UpscaleTabTooltipContent';
-
-const WorkflowsTabTooltipContent = memo(({ prepend = false }: { prepend?: boolean }) => {
-  const isConnected = useStore($isConnected);
-  const templates = useStore($templates);
-
-  const selectIsReady = useMemo(
-    () => buildSelectIsReadyToEnqueueWorkflowsTab({ isConnected, templates }),
-    [isConnected, templates]
-  );
-  const selectReasons = useMemo(
-    () => buildSelectReasonsWhyCannotEnqueueWorkflowsTab({ isConnected, templates }),
-    [isConnected, templates]
-  );
-
-  const isReady = useAppSelector(selectIsReady);
-  const reasons = useAppSelector(selectReasons);
-
-  return (
-    <Flex flexDir="column" gap={1}>
-      <IsReadyText isReady={isReady} prepend={prepend} />
-      <QueueCountPredictionWorkflowsTab />
-      {reasons.length > 0 && (
-        <>
-          <StyledDivider />
-          <ReasonsList reasons={reasons} />
-        </>
-      )}
-      <StyledDivider />
-      <AddingToText />
-    </Flex>
-  );
-});
-WorkflowsTabTooltipContent.displayName = 'WorkflowsTabTooltipContent';
-
-const QueueCountPredictionCanvasOrUpscaleTab = memo(() => {
-  const { t } = useTranslation();
-  const promptsCount = useAppSelector(selectPromptsCount);
-  const iterationsCount = useAppSelector(selectIterations);
-
-  const text = useMemo(() => {
-    const generationCount = Math.min(promptsCount * iterationsCount, 10000);
-    const prompts = t('queue.prompts', { count: promptsCount });
-    const iterations = t('queue.iterations', { count: iterationsCount });
-    const generations = t('queue.generations', { count: generationCount });
-    return `${promptsCount} ${prompts} \u00d7 ${iterationsCount} ${iterations} -> ${generationCount} ${generations}`.toLowerCase();
-  }, [iterationsCount, promptsCount, t]);
-
-  return <Text>{text}</Text>;
-});
-QueueCountPredictionCanvasOrUpscaleTab.displayName = 'QueueCountPredictionCanvasOrUpscaleTab';
-
-const QueueCountPredictionWorkflowsTab = memo(() => {
-  const { t } = useTranslation();
-  const batchSize = useAppSelector(selectWorkflowsBatchSize);
-  const iterationsCount = useAppSelector(selectIterations);
-
-  const text = useMemo(() => {
-    const generationCount = Math.min(batchSize * iterationsCount, 10000);
-    const iterations = t('queue.iterations', { count: iterationsCount });
-    const generations = t('queue.generations', { count: generationCount });
-    return `${batchSize} ${t('queue.batchSize')} \u00d7 ${iterationsCount} ${iterations} -> ${generationCount} ${generations}`.toLowerCase();
-  }, [batchSize, iterationsCount, t]);
-
-  return <Text>{text}</Text>;
-});
-QueueCountPredictionWorkflowsTab.displayName = 'QueueCountPredictionWorkflowsTab';
-
-const IsReadyText = memo(({ isReady, prepend }: { isReady: boolean; prepend: boolean }) => {
-  const { t } = useTranslation();
-  const isLoadingDynamicPrompts = useAppSelector(selectDynamicPromptsIsLoading);
-  const [_, enqueueMutation] = useEnqueueBatchMutation(enqueueMutationFixedCacheKeyOptions);
-
-  const text = useMemo(() => {
-    if (enqueueMutation.isLoading) {
-      return t('queue.enqueueing');
-    }
-    if (isLoadingDynamicPrompts) {
-      return t('dynamicPrompts.loading');
-    }
-    if (isReady) {
-      if (prepend) {
-        return t('queue.queueFront');
-      }
-      return t('queue.queueBack');
-    }
-    return t('queue.notReady');
-  }, [enqueueMutation.isLoading, isLoadingDynamicPrompts, isReady, prepend, t]);
-
-  return <Text fontWeight="semibold">{text}</Text>;
-});
-IsReadyText.displayName = 'IsReadyText';
-
-const ReasonsList = memo(({ reasons }: { reasons: Reason[] }) => {
-  return (
-    <UnorderedList>
-      {reasons.map((reason, i) => (
-        <ReasonListItem key={`${reason.content}.${i}`} reason={reason} />
-      ))}
-    </UnorderedList>
-  );
-});
-ReasonsList.displayName = 'ReasonsList';
-
-const ReasonListItem = memo(({ reason }: { reason: Reason }) => {
-  return (
-    <ListItem>
-      <span>
-        {reason.prefix && (
-          <Text as="span" fontWeight="semibold">
-            {reason.prefix}:{' '}
-          </Text>
-        )}
-        <Text as="span">{reason.content}</Text>
-      </span>
-    </ListItem>
-  );
-});
-ReasonListItem.displayName = 'ReasonListItem';
-
-const StyledDivider = memo(() => <Divider opacity={0.2} borderColor="base.900" />);
-StyledDivider.displayName = 'StyledDivider';
-
-const AddingToText = memo(() => {
-  const { t } = useTranslation();
-  const sendToCanvas = useAppSelector(selectSendToCanvas);
-  const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
-  const autoAddBoardName = useBoardName(autoAddBoardId);
-
-  const addingTo = useMemo(() => {
-    if (sendToCanvas) {
-      return t('controlLayers.stagingOnCanvas');
-    }
-    return t('parameters.invoke.addingImagesTo');
-  }, [sendToCanvas, t]);
-
-  const destination = useMemo(() => {
-    if (sendToCanvas) {
-      return t('queue.canvas');
-    }
-    if (autoAddBoardName) {
-      return autoAddBoardName;
-    }
-    return t('boards.uncategorized');
-  }, [autoAddBoardName, sendToCanvas, t]);
-
-  return (
-    <Text fontStyle="oblique 10deg">
-      {addingTo}{' '}
-      <Text as="span" fontWeight="semibold">
-        {destination}
-      </Text>
-    </Text>
-  );
-});
-AddingToText.displayName = 'AddingToText';

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

@@ -6,7 +6,7 @@ import { useInvoke } from 'features/queue/hooks/useInvoke';
 import { memo } from 'react';
 import { PiLightningFill, PiSparkleFill } from 'react-icons/pi';
 
-import { InvokeButtonTooltip } from './InvokeButtonTooltip/InvokeButtonTooltip';
+import { QueueButtonTooltip } from './QueueButtonTooltip';
 
 const invoke = 'Invoke';
 
@@ -18,7 +18,7 @@ export const InvokeButton = memo(() => {
   return (
     <Flex pos="relative" w="200px">
       <QueueIterationsNumberInput />
-      <InvokeButtonTooltip prepend={shift}>
+      <QueueButtonTooltip prepend={shift}>
         <Button
           onClick={shift ? queue.queueFront : queue.queueBack}
           isLoading={queue.isLoading || isLoadingDynamicPrompts}
@@ -36,7 +36,7 @@ export const InvokeButton = memo(() => {
           <span>{invoke}</span>
           <Spacer />
         </Button>
-      </InvokeButtonTooltip>
+      </QueueButtonTooltip>
     </Flex>
   );
 });

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

@@ -1,6 +1,9 @@
 import { IconButton, Menu, MenuButton, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { SessionMenuItems } from 'common/components/SessionMenuItems';
+import {
+  useNewCanvasSession,
+  useNewGallerySession,
+} from 'features/controlLayers/components/NewSessionConfirmationAlertDialog';
 import { useClearQueue } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { QueueCountBadge } from 'features/queue/components/QueueCountBadge';
 import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor';
@@ -9,7 +12,16 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiListBold, PiPauseFill, PiPlayFill, PiQueueBold, PiTrashSimpleBold, PiXBold } from 'react-icons/pi';
+import {
+  PiImageBold,
+  PiListBold,
+  PiPaintBrushBold,
+  PiPauseFill,
+  PiPlayFill,
+  PiQueueBold,
+  PiTrashSimpleBold,
+  PiXBold,
+} from 'react-icons/pi';
 
 export const QueueActionsMenuButton = memo(() => {
   const ref = useRef<HTMLDivElement>(null);
@@ -17,6 +29,8 @@ export const QueueActionsMenuButton = memo(() => {
   const { t } = useTranslation();
   const isPauseEnabled = useFeatureStatus('pauseQueue');
   const isResumeEnabled = useFeatureStatus('resumeQueue');
+  const { newGallerySessionWithDialog } = useNewGallerySession();
+  const { newCanvasSessionWithDialog } = useNewCanvasSession();
   const clearQueue = useClearQueue();
   const {
     resumeProcessor,
@@ -38,7 +52,12 @@ export const QueueActionsMenuButton = memo(() => {
         <MenuButton ref={ref} as={IconButton} size="lg" aria-label="Queue Actions Menu" icon={<PiListBold />} />
         <MenuList>
           <MenuGroup title={t('common.new')}>
-            <SessionMenuItems />
+            <MenuItem icon={<PiImageBold />} onClick={newGallerySessionWithDialog}>
+              {t('controlLayers.newGallerySession')}
+            </MenuItem>
+            <MenuItem icon={<PiPaintBrushBold />} onClick={newCanvasSessionWithDialog}>
+              {t('controlLayers.newCanvasSession')}
+            </MenuItem>
           </MenuGroup>
           <MenuGroup title={t('queue.queue')}>
             <MenuItem

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

@@ -0,0 +1,123 @@
+import type { TooltipProps } from '@invoke-ai/ui-library';
+import { Divider, Flex, ListItem, Text, Tooltip, UnorderedList } from '@invoke-ai/ui-library';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
+import { selectSendToCanvas } from 'features/controlLayers/store/canvasSettingsSlice';
+import { selectIterations, selectParamsSlice } from 'features/controlLayers/store/paramsSlice';
+import {
+  selectDynamicPromptsIsLoading,
+  selectDynamicPromptsSlice,
+} from 'features/dynamicPrompts/store/dynamicPromptsSlice';
+import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
+import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
+import type { PropsWithChildren } from 'react';
+import { memo, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useEnqueueBatchMutation } from 'services/api/endpoints/queue';
+import { useBoardName } from 'services/api/hooks/useBoardName';
+
+const selectPromptsCount = createSelector(selectParamsSlice, selectDynamicPromptsSlice, (params, dynamicPrompts) =>
+  getShouldProcessPrompt(params.positivePrompt) ? dynamicPrompts.prompts.length : 1
+);
+
+type Props = TooltipProps & {
+  prepend?: boolean;
+};
+
+export const QueueButtonTooltip = ({ prepend, children, ...rest }: PropsWithChildren<Props>) => {
+  return (
+    <Tooltip label={<TooltipContent prepend={prepend} />} maxW={512} {...rest}>
+      {children}
+    </Tooltip>
+  );
+};
+
+const TooltipContent = memo(({ prepend = false }: { prepend?: boolean }) => {
+  const { t } = useTranslation();
+  const { isReady, reasons } = useIsReadyToEnqueue();
+  const sendToCanvas = useAppSelector(selectSendToCanvas);
+  const isLoadingDynamicPrompts = useAppSelector(selectDynamicPromptsIsLoading);
+  const promptsCount = useAppSelector(selectPromptsCount);
+  const iterationsCount = useAppSelector(selectIterations);
+  const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
+  const autoAddBoardName = useBoardName(autoAddBoardId);
+  const [_, { isLoading }] = useEnqueueBatchMutation({
+    fixedCacheKey: 'enqueueBatch',
+  });
+  const queueCountPredictionLabel = useMemo(() => {
+    const generationCount = Math.min(promptsCount * iterationsCount, 10000);
+    const prompts = t('queue.prompts', { count: promptsCount });
+    const iterations = t('queue.iterations', { count: iterationsCount });
+    const generations = t('queue.generations', { count: generationCount });
+    return `${promptsCount} ${prompts} \u00d7 ${iterationsCount} ${iterations} -> ${generationCount} ${generations}`.toLowerCase();
+  }, [iterationsCount, promptsCount, t]);
+
+  const label = useMemo(() => {
+    if (isLoading) {
+      return t('queue.enqueueing');
+    }
+    if (isLoadingDynamicPrompts) {
+      return t('dynamicPrompts.loading');
+    }
+    if (isReady) {
+      if (prepend) {
+        return t('queue.queueFront');
+      }
+      return t('queue.queueBack');
+    }
+    return t('queue.notReady');
+  }, [isLoading, isLoadingDynamicPrompts, isReady, prepend, t]);
+
+  const addingTo = useMemo(() => {
+    if (sendToCanvas) {
+      return t('controlLayers.stagingOnCanvas');
+    }
+    return t('parameters.invoke.addingImagesTo');
+  }, [sendToCanvas, t]);
+
+  const destination = useMemo(() => {
+    if (sendToCanvas) {
+      return t('queue.canvas');
+    }
+    if (autoAddBoardName) {
+      return autoAddBoardName;
+    }
+    return t('boards.uncategorized');
+  }, [autoAddBoardName, sendToCanvas, t]);
+
+  return (
+    <Flex flexDir="column" gap={1}>
+      <Text fontWeight="semibold">{label}</Text>
+      <Text>{queueCountPredictionLabel}</Text>
+      {reasons.length > 0 && (
+        <>
+          <Divider opacity={0.2} borderColor="base.900" />
+          <UnorderedList>
+            {reasons.map((reason, i) => (
+              <ListItem key={`${reason.content}.${i}`}>
+                <span>
+                  {reason.prefix && (
+                    <Text as="span" fontWeight="semibold">
+                      {reason.prefix}:{' '}
+                    </Text>
+                  )}
+                  <Text as="span">{reason.content}</Text>
+                </span>
+              </ListItem>
+            ))}
+          </UnorderedList>
+        </>
+      )}
+      <Divider opacity={0.2} borderColor="base.900" />
+      <Text fontStyle="oblique 10deg">
+        {addingTo}{' '}
+        <Text as="span" fontWeight="semibold">
+          {destination}
+        </Text>
+      </Text>
+    </Flex>
+  );
+});
+
+TooltipContent.displayName = 'QueueButtonTooltipContent';

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

@@ -1,63 +1,17 @@
-import { useStore } from '@nanostores/react';
 import { enqueueRequested } from 'app/store/actions';
-import { $true } from 'app/store/nanostores/util';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { $templates } from 'features/nodes/store/nodesSlice';
-import {
-  buildSelectIsReadyToEnqueueCanvasTab,
-  buildSelectIsReadyToEnqueueUpscaleTab,
-  buildSelectIsReadyToEnqueueWorkflowsTab,
-} from 'features/queue/store/readiness';
+import { useIsReadyToEnqueue } from 'common/hooks/useIsReadyToEnqueue';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
-import { useCallback, useMemo } from 'react';
-import { enqueueMutationFixedCacheKeyOptions, useEnqueueBatchMutation } from 'services/api/endpoints/queue';
-import { $isConnected } from 'services/events/stores';
+import { useCallback } from 'react';
+import { useEnqueueBatchMutation } from 'services/api/endpoints/queue';
 
 export const useInvoke = () => {
   const dispatch = useAppDispatch();
   const tabName = useAppSelector(selectActiveTab);
-  const isConnected = useStore($isConnected);
-  const canvasManager = useCanvasManagerSafe();
-  const canvasIsFiltering = useStore(canvasManager?.stateApi.$isFiltering ?? $true);
-  const canvasIsTransforming = useStore(canvasManager?.stateApi.$isTransforming ?? $true);
-  const canvasIsRasterizing = useStore(canvasManager?.stateApi.$isRasterizing ?? $true);
-  const canvasIsSelectingObject = useStore(canvasManager?.stateApi.$isSegmenting ?? $true);
-  const canvasIsCompositing = useStore(canvasManager?.compositor.$isBusy ?? $true);
-  const templates = useStore($templates);
-
-  const selectIsReady = useMemo(() => {
-    if (tabName === 'canvas') {
-      return buildSelectIsReadyToEnqueueCanvasTab({
-        isConnected,
-        canvasIsFiltering,
-        canvasIsTransforming,
-        canvasIsRasterizing,
-        canvasIsSelectingObject,
-        canvasIsCompositing,
-      });
-    }
-    if (tabName === 'upscaling') {
-      return buildSelectIsReadyToEnqueueUpscaleTab({ isConnected });
-    }
-    if (tabName === 'workflows') {
-      return buildSelectIsReadyToEnqueueWorkflowsTab({ isConnected, templates });
-    }
-    return () => false;
-  }, [
-    tabName,
-    isConnected,
-    canvasIsFiltering,
-    canvasIsTransforming,
-    canvasIsRasterizing,
-    canvasIsSelectingObject,
-    canvasIsCompositing,
-    templates,
-  ]);
-
-  const isReady = useAppSelector(selectIsReady);
-
-  const [_, { isLoading }] = useEnqueueBatchMutation(enqueueMutationFixedCacheKeyOptions);
+  const { isReady } = useIsReadyToEnqueue();
+  const [_, { isLoading }] = useEnqueueBatchMutation({
+    fixedCacheKey: 'enqueueBatch',
+  });
   const queueBack = useCallback(() => {
     if (!isReady) {
       return;

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

@@ -1,5 +1,4 @@
 import {
-  enqueueMutationFixedCacheKeyOptions,
   useCancelQueueItemMutation,
   // useCancelByBatchIdsMutation,
   useClearQueueMutation,
@@ -10,9 +9,9 @@ import {
 } from 'services/api/endpoints/queue';
 
 export const useIsQueueMutationInProgress = () => {
-  const [_triggerEnqueueBatch, { isLoading: isLoadingEnqueueBatch }] = useEnqueueBatchMutation(
-    enqueueMutationFixedCacheKeyOptions
-  );
+  const [_triggerEnqueueBatch, { isLoading: isLoadingEnqueueBatch }] = useEnqueueBatchMutation({
+    fixedCacheKey: 'enqueueBatch',
+  });
   const [_triggerResumeProcessor, { isLoading: isLoadingResumeProcessor }] = useResumeProcessorMutation({
     fixedCacheKey: 'resumeProcessor',
   });

invokeai/frontend/web/src/features/queue/store/readiness.ts

@@ -1,518 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import type { AppConfig } from 'app/types/invokeai';
-import type { ParamsState } from 'features/controlLayers/store/paramsSlice';
-import { selectParamsSlice } from 'features/controlLayers/store/paramsSlice';
-import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
-import type { CanvasState } from 'features/controlLayers/store/types';
-import type { DynamicPromptsState } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
-import { selectDynamicPromptsSlice } from 'features/dynamicPrompts/store/dynamicPromptsSlice';
-import { getShouldProcessPrompt } from 'features/dynamicPrompts/util/getShouldProcessPrompt';
-import { selectNodesSlice } from 'features/nodes/store/selectors';
-import type { NodesState, Templates } from 'features/nodes/store/types';
-import type { WorkflowSettingsState } from 'features/nodes/store/workflowSettingsSlice';
-import { selectWorkflowSettingsSlice } from 'features/nodes/store/workflowSettingsSlice';
-import { isImageFieldCollectionInputInstance, isImageFieldCollectionInputTemplate } from 'features/nodes/types/field';
-import { isInvocationNode } from 'features/nodes/types/invocation';
-import type { UpscaleState } from 'features/parameters/store/upscaleSlice';
-import { selectUpscaleSlice } from 'features/parameters/store/upscaleSlice';
-import { selectConfigSlice } from 'features/system/store/configSlice';
-import i18n from 'i18next';
-import { forEach, upperFirst } from 'lodash-es';
-import { getConnectedEdges } from 'reactflow';
-
-/**
- * This file contains selectors and utilities for determining the app is ready to enqueue generations. The handling
- * differs for each tab (canvas, upscaling, workflows).
- *
- * For example, the canvas tab needs to check the status of the canvas manager before enqueuing, while the workflows
- * tab needs to check the status of the nodes and their connections.
- */
-
-const LAYER_TYPE_TO_TKEY = {
-  reference_image: 'controlLayers.referenceImage',
-  inpaint_mask: 'controlLayers.inpaintMask',
-  regional_guidance: 'controlLayers.regionalGuidance',
-  raster_layer: 'controlLayers.rasterLayer',
-  control_layer: 'controlLayers.controlLayer',
-} as const;
-
-export type Reason = { prefix?: string; content: string };
-
-const disconnectedReason = (t: typeof i18n.t) => ({ content: t('parameters.invoke.systemDisconnected') });
-
-const getReasonsWhyCannotEnqueueWorkflowsTab = (arg: {
-  isConnected: boolean;
-  nodes: NodesState;
-  workflowSettings: WorkflowSettingsState;
-  templates: Templates;
-}): Reason[] => {
-  const { isConnected, nodes, workflowSettings, templates } = arg;
-  const reasons: Reason[] = [];
-
-  if (!isConnected) {
-    reasons.push(disconnectedReason(i18n.t));
-  }
-
-  if (workflowSettings.shouldValidateGraph) {
-    if (!nodes.nodes.length) {
-      reasons.push({ content: i18n.t('parameters.invoke.noNodesInGraph') });
-    }
-
-    nodes.nodes.forEach((node) => {
-      if (!isInvocationNode(node)) {
-        return;
-      }
-
-      const nodeTemplate = templates[node.data.type];
-
-      if (!nodeTemplate) {
-        // Node type not found
-        reasons.push({ content: i18n.t('parameters.invoke.missingNodeTemplate') });
-        return;
-      }
-
-      const connectedEdges = getConnectedEdges([node], nodes.edges);
-
-      forEach(node.data.inputs, (field) => {
-        const fieldTemplate = nodeTemplate.inputs[field.name];
-        const hasConnection = connectedEdges.some(
-          (edge) => edge.target === node.id && edge.targetHandle === field.name
-        );
-
-        if (!fieldTemplate) {
-          reasons.push({ content: i18n.t('parameters.invoke.missingFieldTemplate') });
-          return;
-        }
-
-        const baseTKeyOptions = {
-          nodeLabel: node.data.label || nodeTemplate.title,
-          fieldLabel: field.label || fieldTemplate.title,
-        };
-
-        if (fieldTemplate.required && field.value === undefined && !hasConnection) {
-          reasons.push({ content: i18n.t('parameters.invoke.missingInputForField', baseTKeyOptions) });
-          return;
-        } else if (
-          field.value &&
-          isImageFieldCollectionInputInstance(field) &&
-          isImageFieldCollectionInputTemplate(fieldTemplate)
-        ) {
-          // Image collections may have min or max items to validate
-          // TODO(psyche): generalize this to other collection types
-          if (fieldTemplate.minItems !== undefined && fieldTemplate.minItems > 0 && field.value.length === 0) {
-            reasons.push({ content: i18n.t('parameters.invoke.collectionEmpty', baseTKeyOptions) });
-            return;
-          }
-          if (fieldTemplate.minItems !== undefined && field.value.length < fieldTemplate.minItems) {
-            reasons.push({
-              content: i18n.t('parameters.invoke.collectionTooFewItems', {
-                ...baseTKeyOptions,
-                size: field.value.length,
-                minItems: fieldTemplate.minItems,
-              }),
-            });
-            return;
-          }
-          if (fieldTemplate.maxItems !== undefined && field.value.length > fieldTemplate.maxItems) {
-            reasons.push({
-              content: i18n.t('parameters.invoke.collectionTooManyItems', {
-                ...baseTKeyOptions,
-                size: field.value.length,
-                maxItems: fieldTemplate.maxItems,
-              }),
-            });
-            return;
-          }
-        }
-      });
-    });
-  }
-
-  return reasons;
-};
-
-const getReasonsWhyCannotEnqueueUpscaleTab = (arg: {
-  isConnected: boolean;
-  upscale: UpscaleState;
-  config: AppConfig;
-  params: ParamsState;
-}) => {
-  const { isConnected, upscale, config, params } = arg;
-  const reasons: Reason[] = [];
-
-  if (!isConnected) {
-    reasons.push(disconnectedReason(i18n.t));
-  }
-
-  if (!upscale.upscaleInitialImage) {
-    reasons.push({ content: i18n.t('upscaling.missingUpscaleInitialImage') });
-  } else if (config.maxUpscaleDimension) {
-    const { width, height } = upscale.upscaleInitialImage;
-    const { scale } = upscale;
-
-    const maxPixels = config.maxUpscaleDimension ** 2;
-    const upscaledPixels = width * scale * height * scale;
-
-    if (upscaledPixels > maxPixels) {
-      reasons.push({ content: i18n.t('upscaling.exceedsMaxSize') });
-    }
-  }
-  const model = params.model;
-  if (model && !['sd-1', 'sdxl'].includes(model.base)) {
-    // When we are using an upsupported model, do not add the other warnings
-    reasons.push({ content: i18n.t('upscaling.incompatibleBaseModel') });
-  } else {
-    // Using a compatible model, add all warnings
-    if (!model) {
-      reasons.push({ content: i18n.t('parameters.invoke.noModelSelected') });
-    }
-    if (!upscale.upscaleModel) {
-      reasons.push({ content: i18n.t('upscaling.missingUpscaleModel') });
-    }
-    if (!upscale.tileControlnetModel) {
-      reasons.push({ content: i18n.t('upscaling.missingTileControlNetModel') });
-    }
-  }
-
-  return reasons;
-};
-
-const getReasonsWhyCannotEnqueueCanvasTab = (arg: {
-  isConnected: boolean;
-  canvas: CanvasState;
-  params: ParamsState;
-  dynamicPrompts: DynamicPromptsState;
-  canvasIsFiltering: boolean;
-  canvasIsTransforming: boolean;
-  canvasIsRasterizing: boolean;
-  canvasIsCompositing: boolean;
-  canvasIsSelectingObject: boolean;
-}) => {
-  const {
-    isConnected,
-    canvas,
-    params,
-    dynamicPrompts,
-    canvasIsFiltering,
-    canvasIsTransforming,
-    canvasIsRasterizing,
-    canvasIsCompositing,
-    canvasIsSelectingObject,
-  } = arg;
-  const { model, positivePrompt } = params;
-  const reasons: Reason[] = [];
-
-  if (!isConnected) {
-    reasons.push(disconnectedReason(i18n.t));
-  }
-
-  if (canvasIsFiltering) {
-    reasons.push({ content: i18n.t('parameters.invoke.canvasIsFiltering') });
-  }
-  if (canvasIsTransforming) {
-    reasons.push({ content: i18n.t('parameters.invoke.canvasIsTransforming') });
-  }
-  if (canvasIsRasterizing) {
-    reasons.push({ content: i18n.t('parameters.invoke.canvasIsRasterizing') });
-  }
-  if (canvasIsCompositing) {
-    reasons.push({ content: i18n.t('parameters.invoke.canvasIsCompositing') });
-  }
-  if (canvasIsSelectingObject) {
-    reasons.push({ content: i18n.t('parameters.invoke.canvasIsSelectingObject') });
-  }
-
-  if (dynamicPrompts.prompts.length === 0 && getShouldProcessPrompt(positivePrompt)) {
-    reasons.push({ content: i18n.t('parameters.invoke.noPrompts') });
-  }
-
-  if (!model) {
-    reasons.push({ content: i18n.t('parameters.invoke.noModelSelected') });
-  }
-
-  if (model?.base === 'flux') {
-    const { bbox } = canvas;
-
-    if (!params.t5EncoderModel) {
-      reasons.push({ content: i18n.t('parameters.invoke.noT5EncoderModelSelected') });
-    }
-    if (!params.clipEmbedModel) {
-      reasons.push({ content: i18n.t('parameters.invoke.noCLIPEmbedModelSelected') });
-    }
-    if (!params.fluxVAE) {
-      reasons.push({ content: i18n.t('parameters.invoke.noFLUXVAEModelSelected') });
-    }
-    if (bbox.scaleMethod === 'none') {
-      if (bbox.rect.width % 16 !== 0) {
-        reasons.push({
-          content: i18n.t('parameters.invoke.fluxModelIncompatibleBboxWidth', { width: bbox.rect.width }),
-        });
-      }
-      if (bbox.rect.height % 16 !== 0) {
-        reasons.push({
-          content: i18n.t('parameters.invoke.fluxModelIncompatibleBboxHeight', { height: bbox.rect.height }),
-        });
-      }
-    } else {
-      if (bbox.scaledSize.width % 16 !== 0) {
-        reasons.push({
-          content: i18n.t('parameters.invoke.fluxModelIncompatibleScaledBboxWidth', {
-            width: bbox.scaledSize.width,
-          }),
-        });
-      }
-      if (bbox.scaledSize.height % 16 !== 0) {
-        reasons.push({
-          content: i18n.t('parameters.invoke.fluxModelIncompatibleScaledBboxHeight', {
-            height: bbox.scaledSize.height,
-          }),
-        });
-      }
-    }
-  }
-
-  canvas.controlLayers.entities
-    .filter((controlLayer) => controlLayer.isEnabled)
-    .forEach((controlLayer, i) => {
-      const layerLiteral = i18n.t('controlLayers.layer_one');
-      const layerNumber = i + 1;
-      const layerType = i18n.t(LAYER_TYPE_TO_TKEY['control_layer']);
-      const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
-      const problems: string[] = [];
-      // Must have model
-      if (!controlLayer.controlAdapter.model) {
-        problems.push(i18n.t('parameters.invoke.layer.controlAdapterNoModelSelected'));
-      }
-      // Model base must match
-      if (controlLayer.controlAdapter.model?.base !== model?.base) {
-        problems.push(i18n.t('parameters.invoke.layer.controlAdapterIncompatibleBaseModel'));
-      }
-      if (problems.length) {
-        const content = upperFirst(problems.join(', '));
-        reasons.push({ prefix, content });
-      }
-    });
-
-  canvas.referenceImages.entities
-    .filter((entity) => entity.isEnabled)
-    .forEach((entity, i) => {
-      const layerLiteral = i18n.t('controlLayers.layer_one');
-      const layerNumber = i + 1;
-      const layerType = i18n.t(LAYER_TYPE_TO_TKEY[entity.type]);
-      const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
-      const problems: string[] = [];
-
-      // Must have model
-      if (!entity.ipAdapter.model) {
-        problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoModelSelected'));
-      }
-      // Model base must match
-      if (entity.ipAdapter.model?.base !== model?.base) {
-        problems.push(i18n.t('parameters.invoke.layer.ipAdapterIncompatibleBaseModel'));
-      }
-      // Must have an image
-      if (!entity.ipAdapter.image) {
-        problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoImageSelected'));
-      }
-
-      if (problems.length) {
-        const content = upperFirst(problems.join(', '));
-        reasons.push({ prefix, content });
-      }
-    });
-
-  canvas.regionalGuidance.entities
-    .filter((entity) => entity.isEnabled)
-    .forEach((entity, i) => {
-      const layerLiteral = i18n.t('controlLayers.layer_one');
-      const layerNumber = i + 1;
-      const layerType = i18n.t(LAYER_TYPE_TO_TKEY[entity.type]);
-      const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
-      const problems: string[] = [];
-      // Must have a region
-      if (entity.objects.length === 0) {
-        problems.push(i18n.t('parameters.invoke.layer.rgNoRegion'));
-      }
-      // Must have at least 1 prompt or IP Adapter
-      if (entity.positivePrompt === null && entity.negativePrompt === null && entity.referenceImages.length === 0) {
-        problems.push(i18n.t('parameters.invoke.layer.rgNoPromptsOrIPAdapters'));
-      }
-      entity.referenceImages.forEach(({ ipAdapter }) => {
-        // Must have model
-        if (!ipAdapter.model) {
-          problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoModelSelected'));
-        }
-        // Model base must match
-        if (ipAdapter.model?.base !== model?.base) {
-          problems.push(i18n.t('parameters.invoke.layer.ipAdapterIncompatibleBaseModel'));
-        }
-        // Must have an image
-        if (!ipAdapter.image) {
-          problems.push(i18n.t('parameters.invoke.layer.ipAdapterNoImageSelected'));
-        }
-      });
-
-      if (problems.length) {
-        const content = upperFirst(problems.join(', '));
-        reasons.push({ prefix, content });
-      }
-    });
-
-  canvas.rasterLayers.entities
-    .filter((entity) => entity.isEnabled)
-    .forEach((entity, i) => {
-      const layerLiteral = i18n.t('controlLayers.layer_one');
-      const layerNumber = i + 1;
-      const layerType = i18n.t(LAYER_TYPE_TO_TKEY[entity.type]);
-      const prefix = `${layerLiteral} #${layerNumber} (${layerType})`;
-      const problems: string[] = [];
-
-      if (problems.length) {
-        const content = upperFirst(problems.join(', '));
-        reasons.push({ prefix, content });
-      }
-    });
-
-  return reasons;
-};
-
-export const buildSelectReasonsWhyCannotEnqueueCanvasTab = (arg: {
-  isConnected: boolean;
-  canvasIsFiltering: boolean;
-  canvasIsTransforming: boolean;
-  canvasIsRasterizing: boolean;
-  canvasIsCompositing: boolean;
-  canvasIsSelectingObject: boolean;
-}) => {
-  const {
-    isConnected,
-    canvasIsFiltering,
-    canvasIsTransforming,
-    canvasIsRasterizing,
-    canvasIsCompositing,
-    canvasIsSelectingObject,
-  } = arg;
-
-  return createSelector(
-    selectCanvasSlice,
-    selectParamsSlice,
-    selectDynamicPromptsSlice,
-    (canvas, params, dynamicPrompts) =>
-      getReasonsWhyCannotEnqueueCanvasTab({
-        isConnected,
-        canvas,
-        params,
-        dynamicPrompts,
-        canvasIsFiltering,
-        canvasIsTransforming,
-        canvasIsRasterizing,
-        canvasIsCompositing,
-        canvasIsSelectingObject,
-      })
-  );
-};
-
-export const buildSelectIsReadyToEnqueueCanvasTab = (arg: {
-  isConnected: boolean;
-  canvasIsFiltering: boolean;
-  canvasIsTransforming: boolean;
-  canvasIsRasterizing: boolean;
-  canvasIsCompositing: boolean;
-  canvasIsSelectingObject: boolean;
-}) => {
-  const {
-    isConnected,
-    canvasIsFiltering,
-    canvasIsTransforming,
-    canvasIsRasterizing,
-    canvasIsCompositing,
-    canvasIsSelectingObject,
-  } = arg;
-
-  return createSelector(
-    selectCanvasSlice,
-    selectParamsSlice,
-    selectDynamicPromptsSlice,
-    (canvas, params, dynamicPrompts) =>
-      getReasonsWhyCannotEnqueueCanvasTab({
-        isConnected,
-        canvas,
-        params,
-        dynamicPrompts,
-        canvasIsFiltering,
-        canvasIsTransforming,
-        canvasIsRasterizing,
-        canvasIsCompositing,
-        canvasIsSelectingObject,
-      }).length === 0
-  );
-};
-
-export const buildSelectReasonsWhyCannotEnqueueUpscaleTab = (arg: { isConnected: boolean }) => {
-  const { isConnected } = arg;
-  return createSelector(selectUpscaleSlice, selectConfigSlice, selectParamsSlice, (upscale, config, params) =>
-    getReasonsWhyCannotEnqueueUpscaleTab({ isConnected, upscale, config, params })
-  );
-};
-
-export const buildSelectIsReadyToEnqueueUpscaleTab = (arg: { isConnected: boolean }) => {
-  const { isConnected } = arg;
-
-  return createSelector(
-    selectUpscaleSlice,
-    selectConfigSlice,
-    selectParamsSlice,
-    (upscale, config, params) =>
-      getReasonsWhyCannotEnqueueUpscaleTab({ isConnected, upscale, config, params }).length === 0
-  );
-};
-
-export const buildSelectReasonsWhyCannotEnqueueWorkflowsTab = (arg: { isConnected: boolean; templates: Templates }) => {
-  const { isConnected, templates } = arg;
-
-  return createSelector(selectNodesSlice, selectWorkflowSettingsSlice, (nodes, workflowSettings) =>
-    getReasonsWhyCannotEnqueueWorkflowsTab({
-      isConnected,
-      nodes,
-      workflowSettings,
-      templates,
-    })
-  );
-};
-
-export const buildSelectIsReadyToEnqueueWorkflowsTab = (arg: { isConnected: boolean; templates: Templates }) => {
-  const { isConnected, templates } = arg;
-
-  return createSelector(
-    selectNodesSlice,
-    selectWorkflowSettingsSlice,
-    (nodes, workflowSettings) =>
-      getReasonsWhyCannotEnqueueWorkflowsTab({
-        isConnected,
-        nodes,
-        workflowSettings,
-        templates,
-      }).length === 0
-  );
-};
-
-export const selectPromptsCount = createSelector(
-  selectParamsSlice,
-  selectDynamicPromptsSlice,
-  (params, dynamicPrompts) => (getShouldProcessPrompt(params.positivePrompt) ? dynamicPrompts.prompts.length : 1)
-);
-
-export const selectWorkflowsBatchSize = createSelector(selectNodesSlice, ({ nodes }) =>
-  // The batch size is the product of all batch nodes' collection sizes
-  nodes.filter(isInvocationNode).reduce((batchSize, node) => {
-    if (!isImageFieldCollectionInputInstance(node.data.inputs.images)) {
-      return batchSize;
-    }
-    // If the batch size is not set, default to 1
-    batchSize = batchSize || 1;
-    // Multiply the batch size by the number of images in the batch
-    batchSize = batchSize * (node.data.inputs.images.value?.length ?? 0);
-
-    return batchSize;
-  }, 0)
-);

invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsModal.tsx

@@ -26,6 +26,7 @@ import { SettingsDeveloperLogLevel } from 'features/system/components/SettingsMo
 import { SettingsDeveloperLogNamespaces } from 'features/system/components/SettingsModal/SettingsDeveloperLogNamespaces';
 import { useClearIntermediates } from 'features/system/components/SettingsModal/useClearIntermediates';
 import { StickyScrollable } from 'features/system/components/StickyScrollable';
+import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import {
   selectSystemShouldAntialiasProgressImage,
   selectSystemShouldConfirmOnDelete,
@@ -58,7 +59,6 @@ type ConfigOptions = {
   shouldShowResetWebUiText?: boolean;
   shouldShowClearIntermediates?: boolean;
   shouldShowLocalizationToggle?: boolean;
-  shouldShowInvocationProgressDetailSetting?: boolean;
 };
 
 const defaultConfig: ConfigOptions = {
@@ -66,7 +66,6 @@ const defaultConfig: ConfigOptions = {
   shouldShowResetWebUiText: true,
   shouldShowClearIntermediates: true,
   shouldShowLocalizationToggle: true,
-  shouldShowInvocationProgressDetailSetting: true,
 };
 
 type SettingsModalProps = {
@@ -108,6 +107,7 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps)
   const shouldEnableModelDescriptions = useAppSelector(selectSystemShouldEnableModelDescriptions);
   const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
   const shouldShowInvocationProgressDetail = useAppSelector(selectSystemShouldShowInvocationProgressDetail);
+  const isInvocationProgressAlertEnabled = useFeatureStatus('invocationProgressAlert');
   const onToggleConfirmOnNewSession = useCallback(() => {
     dispatch(shouldConfirmOnNewSessionToggled());
   }, [dispatch]);
@@ -233,7 +233,7 @@ const SettingsModal = ({ config = defaultConfig, children }: SettingsModalProps)
                         onChange={handleChangeShouldAntialiasProgressImage}
                       />
                     </FormControl>
-                    {Boolean(config?.shouldShowInvocationProgressDetailSetting) && (
+                    {isInvocationProgressAlertEnabled && (
                       <FormControl>
                         <FormLabel>{t('settings.showDetailedInvocationProgress')}</FormLabel>
                         <Switch

invokeai/frontend/web/src/features/system/components/VideosModal/VideoCard.tsx

@@ -1,30 +0,0 @@
-import { ExternalLink, Flex, Spacer, Text } from '@invoke-ai/ui-library';
-import type { VideoData } from 'features/system/components/VideosModal/data';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const formatTime = ({ minutes, seconds }: { minutes: number; seconds: number }) => {
-  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
-};
-
-export const VideoCard = memo(({ video }: { video: VideoData }) => {
-  const { t } = useTranslation();
-  const { tKey, link, length } = video;
-  return (
-    <Flex flexDir="column" gap={1}>
-      <Flex alignItems="center" gap={2}>
-        <Text fontSize="md" fontWeight="semibold">
-          {t(`supportVideos.videos.${tKey}.title`)}
-        </Text>
-        <Spacer />
-        <Text variant="subtext">{formatTime(length)}</Text>
-        <ExternalLink fontSize="sm" href={link} label={t('supportVideos.watch')} />
-      </Flex>
-      <Text fontSize="md" variant="subtext">
-        {t(`supportVideos.videos.${tKey}.description`)}
-      </Text>
-    </Flex>
-  );
-});
-
-VideoCard.displayName = 'VideoCard';

invokeai/frontend/web/src/features/system/components/VideosModal/VideoCardList.tsx

@@ -1,20 +0,0 @@
-import { Divider } from '@invoke-ai/ui-library';
-import { StickyScrollable } from 'features/system/components/StickyScrollable';
-import { gettingStartedVideos, type VideoData } from 'features/system/components/VideosModal/data';
-import { VideoCard } from 'features/system/components/VideosModal/VideoCard';
-import { Fragment, memo } from 'react';
-
-export const VideoCardList = memo(({ category, videos }: { category: string; videos: VideoData[] }) => {
-  return (
-    <StickyScrollable title={category}>
-      {videos.map((video, i) => (
-        <Fragment key={`${video.tKey}-${i}`}>
-          <VideoCard video={video} />
-          {i < gettingStartedVideos.length - 1 && <Divider />}
-        </Fragment>
-      ))}
-    </StickyScrollable>
-  );
-});
-
-VideoCardList.displayName = 'VideoCardList';

invokeai/frontend/web/src/features/system/components/VideosModal/VideosModal.tsx

@@ -1,79 +0,0 @@
-import {
-  ExternalLink,
-  Flex,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalOverlay,
-  Text,
-} from '@invoke-ai/ui-library';
-import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { buildUseDisclosure } from 'common/hooks/useBoolean';
-import {
-  controlCanvasVideos,
-  gettingStartedVideos,
-  studioSessionsPlaylistLink,
-} from 'features/system/components/VideosModal/data';
-import { VideoCardList } from 'features/system/components/VideosModal/VideoCardList';
-import { discordLink } from 'features/system/store/constants';
-import { memo } from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-
-export const [useVideosModal] = buildUseDisclosure(false);
-
-const StudioSessionsPlaylistLink = () => {
-  return (
-    <ExternalLink
-      fontWeight="semibold"
-      href={studioSessionsPlaylistLink}
-      display="inline-flex"
-      label="Studio Sessions playlist"
-    />
-  );
-};
-
-const DiscordLink = () => {
-  return <ExternalLink fontWeight="semibold" href={discordLink} display="inline-flex" label="Discord" />;
-};
-
-const components = {
-  StudioSessionsPlaylistLink: <StudioSessionsPlaylistLink />,
-  DiscordLink: <DiscordLink />,
-};
-
-export const VideosModal = memo(() => {
-  const { t } = useTranslation();
-  const videosModal = useVideosModal();
-
-  return (
-    <Modal isOpen={videosModal.isOpen} onClose={videosModal.close} size="2xl" isCentered useInert={false}>
-      <ModalOverlay />
-      <ModalContent maxH="80vh" h="80vh">
-        <ModalHeader bg="none">{t('supportVideos.supportVideos')}</ModalHeader>
-        <ModalCloseButton />
-        <ModalBody>
-          <ScrollableContent>
-            <Flex flexDir="column" gap={4}>
-              <Flex flexDir="column" gap={2} pb={2}>
-                <Text fontSize="md">
-                  <Trans i18nKey="supportVideos.studioSessionsDesc1" components={components} />
-                </Text>
-                <Text fontSize="md">
-                  <Trans i18nKey="supportVideos.studioSessionsDesc2" components={components} />
-                </Text>
-              </Flex>
-              <VideoCardList category={t('supportVideos.gettingStarted')} videos={gettingStartedVideos} />
-              <VideoCardList category={t('supportVideos.controlCanvas')} videos={controlCanvasVideos} />
-            </Flex>
-          </ScrollableContent>
-        </ModalBody>
-        <ModalFooter />
-      </ModalContent>
-    </Modal>
-  );
-});
-
-VideosModal.displayName = 'VideosModal';

invokeai/frontend/web/src/features/system/components/VideosModal/VideosModalButton.tsx

@@ -1,20 +0,0 @@
-import { IconButton } from '@invoke-ai/ui-library';
-import { useVideosModal } from 'features/system/components/VideosModal/VideosModal';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { PiYoutubeLogoFill } from 'react-icons/pi';
-
-export const VideosModalButton = memo(() => {
-  const { t } = useTranslation();
-  const videosModal = useVideosModal();
-  return (
-    <IconButton
-      aria-label={t('supportVideos.supportVideos')}
-      variant="link"
-      icon={<PiYoutubeLogoFill fontSize={20} />}
-      boxSize={8}
-      onClick={videosModal.open}
-    />
-  );
-});
-VideosModalButton.displayName = 'VideosModalButton';

invokeai/frontend/web/src/features/system/components/VideosModal/data.ts

@@ -1,88 +0,0 @@
-/**
- * To add a support video, you'll need to add the video to the list below.
- *
- * The `tKey` is a sub-key in the translation file `invokeai/frontend/web/public/locales/en.json`.
- * Add the title and description under `supportVideos.videos`, following the existing format.
- */
-
-export type VideoData = {
-  tKey: string;
-  link: string;
-  length: {
-    minutes: number;
-    seconds: number;
-  };
-};
-
-export const gettingStartedVideos: VideoData[] = [
-  {
-    tKey: 'creatingYourFirstImage',
-    link: 'https://www.youtube.com/watch?v=jVi2XgSGrfY&list=PLvWK1Kc8iXGrQy8r9TYg6QdUuJ5MMx-ZO&index=1&t=29s&pp=iAQB',
-    length: { minutes: 6, seconds: 0 },
-  },
-  {
-    tKey: 'usingControlLayersAndReferenceGuides',
-    link: 'https://www.youtube.com/watch?v=crgw6bEgyrw&list=PLvWK1Kc8iXGrQy8r9TYg6QdUuJ5MMx-ZO&index=2&t=70s&pp=iAQB',
-    length: { minutes: 5, seconds: 30 },
-  },
-  {
-    tKey: 'understandingImageToImageAndDenoising',
-    link: 'https://www.youtube.com/watch?v=tvj8-0s6S2U&list=PLvWK1Kc8iXGrQy8r9TYg6QdUuJ5MMx-ZO&index=3&t=1s&pp=iAQB',
-    length: { minutes: 2, seconds: 37 },
-  },
-  {
-    tKey: 'exploringAIModelsAndConceptAdapters',
-    link: 'https://www.youtube.com/watch?v=iwBmBQMZ0UA&list=PLvWK1Kc8iXGrQy8r9TYg6QdUuJ5MMx-ZO&index=4&pp=iAQB',
-    length: { minutes: 8, seconds: 52 },
-  },
-  {
-    tKey: 'creatingAndComposingOnInvokesControlCanvas',
-    link: 'https://www.youtube.com/watch?v=MohWv5GZVGM&list=PLvWK1Kc8iXGrQy8r9TYg6QdUuJ5MMx-ZO&index=5&t=28s&pp=iAQB',
-    length: { minutes: 13, seconds: 56 },
-  },
-  {
-    tKey: 'upscaling',
-    link: 'https://www.youtube.com/watch?v=OCb19_P0nro&list=PLvWK1Kc8iXGrQy8r9TYg6QdUuJ5MMx-ZO&index=6&t=2s&pp=iAQB',
-    length: { minutes: 4, seconds: 0 },
-  },
-];
-
-export const controlCanvasVideos: VideoData[] = [
-  {
-    tKey: 'howDoIGenerateAndSaveToTheGallery',
-    link: 'https://youtu.be/Tl-69JvwJ2s?si=dbjmBc1iDAUpE1k5&t=26',
-    length: { minutes: 0, seconds: 49 },
-  },
-  {
-    tKey: 'howDoIEditOnTheCanvas',
-    link: 'https://youtu.be/Tl-69JvwJ2s?si=U_bFl9HsvSuejbxp&t=76',
-    length: { minutes: 0, seconds: 58 },
-  },
-  {
-    tKey: 'howDoIDoImageToImageTransformation',
-    link: 'https://youtu.be/Tl-69JvwJ2s?si=fjhTeY-yZ3qsEzEM&t=138',
-    length: { minutes: 0, seconds: 51 },
-  },
-  {
-    tKey: 'howDoIUseControlNetsAndControlLayers',
-    link: 'https://youtu.be/Tl-69JvwJ2s?si=x5KcYvkHbvR9ifsX&t=192',
-    length: { minutes: 1, seconds: 41 },
-  },
-  {
-    tKey: 'howDoIUseGlobalIPAdaptersAndReferenceImages',
-    link: 'https://youtu.be/Tl-69JvwJ2s?si=O940rNHiHGKXknK2&t=297',
-    length: { minutes: 0, seconds: 43 },
-  },
-  {
-    tKey: 'howDoIUseInpaintMasks',
-    link: 'https://youtu.be/Tl-69JvwJ2s?si=3DZhmerkzUmvJJSn&t=345',
-    length: { minutes: 1, seconds: 9 },
-  },
-  {
-    tKey: 'howDoIOutpaint',
-    link: 'https://youtu.be/Tl-69JvwJ2s?si=IIwkGZLq1PfLf80Q&t=420',
-    length: { minutes: 0, seconds: 48 },
-  },
-];
-
-export const studioSessionsPlaylistLink = 'https://www.youtube.com/playlist?list=PLvWK1Kc8iXGq_8tWZqnwDVaf9uhlDC09U';

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

@@ -4,7 +4,7 @@ import { ToolChooser } from 'features/controlLayers/components/Tool/ToolChooser'
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { useClearQueue } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
-import { InvokeButtonTooltip } from 'features/queue/components/InvokeButtonTooltip/InvokeButtonTooltip';
+import { QueueButtonTooltip } from 'features/queue/components/QueueButtonTooltip';
 import { useCancelCurrentQueueItem } from 'features/queue/hooks/useCancelCurrentQueueItem';
 import { useInvoke } from 'features/queue/hooks/useInvoke';
 import type { UsePanelReturn } from 'features/ui/hooks/usePanel';
@@ -62,7 +62,7 @@ const FloatingSidePanelButtons = (props: Props) => {
             flexGrow={1}
           />
         </Tooltip>
-        <InvokeButtonTooltip prepend={shift} placement="end">
+        <QueueButtonTooltip prepend={shift} placement="end">
           <IconButton
             aria-label={t('queue.queueBack')}
             onClick={shift ? queue.queueFront : queue.queueBack}
@@ -72,7 +72,7 @@ const FloatingSidePanelButtons = (props: Props) => {
             colorScheme="invokeYellow"
             flexGrow={1}
           />
-        </InvokeButtonTooltip>
+        </QueueButtonTooltip>
         <Tooltip label={t('queue.cancelTooltip')} placement="end">
           <IconButton
             isDisabled={cancelCurrent.isDisabled}

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

@@ -4,7 +4,6 @@ import { $customNavComponent } from 'app/store/nanostores/customNavComponent';
 import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent';
 import SettingsMenu from 'features/system/components/SettingsModal/SettingsMenu';
 import StatusIndicator from 'features/system/components/StatusIndicator';
-import { VideosModalButton } from 'features/system/components/VideosModal/VideosModalButton';
 import { TabMountGate } from 'features/ui/components/TabMountGate';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -40,7 +39,6 @@ export const VerticalNavBar = memo(() => {
       <Spacer />
       <StatusIndicator />
       <Notifications />
-      <VideosModalButton />
       {customNavComponent ? customNavComponent : <SettingsMenu />}
     </Flex>
   );

invokeai/frontend/web/src/services/api/endpoints/queue.ts

@@ -425,7 +425,3 @@ const resetListQueryData = (
   // we have to manually kick off another query to get the first page and re-initialize the list
   dispatch(queueApi.endpoints.listQueueItems.initiate(undefined));
 };
-
-export const enqueueMutationFixedCacheKeyOptions = {
-  fixedCacheKey: 'enqueueBatch',
-} as const;

invokeai/version/invokeai_version.py

@@ -1 +1 @@
-__version__ = "5.4.2"
+__version__ = "5.4.2rc1"

pyproject.toml

@@ -164,7 +164,7 @@ version = { attr = "invokeai.version.__version__" }
   "*.png",
 ]
 "invokeai.assets.fonts" = ["**/*.ttf"]
-"invokeai.backend" = ["**.png", "**/*.icc"]
+"invokeai.backend" = ["**.png"]
 "invokeai.configs" = ["*.example", "**/*.yaml", "*.txt"]
 "invokeai.frontend.web.dist" = ["**"]
 "invokeai.frontend.web.static" = ["**"]