chore: bump version to v5.6.2

Currently translated at 99.8% (1753 of 1755 strings)

translationBot(ui): update translation (Vietnamese)

Currently translated at 99.8% (1751 of 1753 strings)

Co-authored-by: Linos <linos.coding@gmail.com>
Translate-URL: https://hosted.weblate.org/projects/invokeai/web-ui/vi/
Translation: InvokeAI/Web UI

docs/faq.md

@@ -1,26 +1,18 @@
 # FAQ
 
-!!! info "How to Reinstall"
-
-    Many issues can be resolved by re-installing the application. You won't lose any data by re-installing. We suggest downloading the [latest release](https://github.com/invoke-ai/InvokeAI/releases/latest) and using it to re-install the application. Consult the [installer guide](./installation/installer.md) for more information.
-
-    When you run the installer, you'll have an option to select the version to install. If you aren't ready to upgrade, you choose the current version to fix a broken install.
-
 If the troubleshooting steps on this page don't get you up and running, please either [create an issue] or hop on [discord] for help.
 
 ## How to Install
 
-You can download the latest installers [here](https://github.com/invoke-ai/InvokeAI/releases).
-
-Note that any releases marked as _pre-release_ are in a beta state. You may experience some issues, but we appreciate your help testing those! For stable/reliable installations, please install the [latest release].
+Follow the [Quick Start guide](./installation/quick_start.md) to install Invoke.
 
 ## Downloading models and using existing models
 
 The Model Manager tab in the UI provides a few ways to install models, including using your already-downloaded models. You'll see a popup directing you there on first startup. For more information, see the [model install docs].
 
-## Missing models after updating to v4
+## Missing models after updating from v3
 
-If you find some models are missing after updating to v4, it's likely they weren't correctly registered before the update and didn't get picked up in the migration.
+If you find some models are missing after updating from v3, it's likely they weren't correctly registered before the update and didn't get picked up in the migration.
 
 You can use the `Scan Folder` tab in the Model Manager UI to fix this. The models will either be in the old, now-unused `autoimport` folder, or your `models` folder.
 
@@ -37,115 +29,27 @@ Follow the same steps to scan and import the missing models.
 ## Slow generation
 
 - Check the [system requirements] to ensure that your system is capable of generating images.
-- Check the `ram` setting in `invokeai.yaml`. This setting tells Invoke how much of your system RAM can be used to cache models. Having this too high or too low can slow things down. That said, it's generally safest to not set this at all and instead let Invoke manage it.
-- Check the `vram` setting in `invokeai.yaml`. This setting tells Invoke how much of your GPU VRAM can be used to cache models. Counter-intuitively, if this setting is too high, Invoke will need to do a lot of shuffling of models as it juggles the VRAM cache and the currently-loaded model. The default value of 0.25 is generally works well for GPUs without 16GB or more VRAM. Even on a 24GB card, the default works well.
-- Check that your generations are happening on your GPU (if you have one). InvokeAI will log what is being used for generation upon startup. If your GPU isn't used, re-install to ensure the correct versions of torch get installed.
-- If you are on Windows, you may have exceeded your GPU's VRAM capacity and are using slower [shared GPU memory](#shared-gpu-memory-windows). There's a guide to opt out of this behaviour in the linked FAQ entry.
-
-## Shared GPU Memory (Windows)
-
-!!! tip "Nvidia GPUs with driver 536.40"
-
-    This only applies to current Nvidia cards with driver 536.40 or later, released in June 2023.
-
-When the GPU doesn't have enough VRAM for a task, Windows is able to allocate some of its CPU RAM to the GPU. This is much slower than VRAM, but it does allow the system to generate when it otherwise might no have enough VRAM.
-
-When shared GPU memory is used, generation slows down dramatically - but at least it doesn't crash.
-
-If you'd like to opt out of this behavior and instead get an error when you exceed your GPU's VRAM, follow [this guide from Nvidia](https://nvidia.custhelp.com/app/answers/detail/a_id/5490).
-
-Here's how to get the python path required in the linked guide:
-
-- Run `invoke.bat`.
-- Select option 2 for developer console.
-- At least one python path will be printed. Copy the path that includes your invoke installation directory (typically the first).
-
-## Installer cannot find python (Windows)
-
-Ensure that you checked **Add python.exe to PATH** when installing Python. This can be found at the bottom of the Python Installer window. If you already have Python installed, you can re-run the python installer, choose the Modify option and check the box.
+- Follow the [Low-VRAM mode guide](./features/low-vram.md) to optimize performance.
+- Check that your generations are happening on your GPU (if you have one). Invoke will log what is being used for generation upon startup. If your GPU isn't used, re-install to and ensure you select the appropriate GPU option.
+- If you are on Windows with an Nvidia GPU, you may have exceeded your GPU's VRAM capacity and are triggering Nvidia's "sysmem fallback". There's a guide to opt out of this behaviour in the [Low-VRAM mode guide](./features/low-vram.md).
 
 ## Triton error on startup
 
-This can be safely ignored. InvokeAI doesn't use Triton, but if you are on Linux and wish to dismiss the error, you can install Triton.
+This can be safely ignored. Invoke doesn't use Triton, but if you are on Linux and wish to dismiss the error, you can install Triton.
 
-## Updated to 3.4.0 and xformers can’t load C++/CUDA
+## Unable to Copy on Firefox
 
-An issue occurred with your PyTorch update. Follow these steps to fix :
+Firefox does not allow Invoke to directly access the clipboard by default. As a result, you may be unable to use certain copy functions. You can fix this by configuring Firefox to allow access to write to the clipboard:
 
-1. Launch your invoke.bat / invoke.sh and select the option to open the developer console
-2. Run:`pip install ".[xformers]" --upgrade --force-reinstall --extra-index-url https://download.pytorch.org/whl/cu121`
-   - If you run into an error with `typing_extensions`, re-open the developer console and run: `pip install -U typing-extensions`
-
-Note that v3.4.0 is an old, unsupported version. Please upgrade to the [latest release].
-
-## Install failed and says `pip` is out of date
-
-An out of date `pip` typically won't cause an installation to fail. The cause of the error can likely be found above the message that says `pip` is out of date.
-
-If you saw that warning but the install went well, don't worry about it (but you can update `pip` afterwards if you'd like).
+- Go to `about:config` and click the Accept button
+- Search for `dom.events.asyncClipboard.clipboardItem`
+- Set it to `true` by clicking the toggle button
+- Restart Firefox
 
 ## Replicate image found online
 
 Most example images with prompts that you'll find on the internet have been generated using different software, so you can't expect to get identical results. In order to reproduce an image, you need to replicate the exact settings and processing steps, including (but not limited to) the model, the positive and negative prompts, the seed, the sampler, the exact image size, any upscaling steps, etc.
 
-## OSErrors on Windows while installing dependencies
-
-During a zip file installation or an update, installation stops with an error like this:
-
-![broken-dependency-screenshot](./assets/troubleshooting/broken-dependency.png){:width="800px"}
-
-To resolve this, re-install the application as described above.
-
-## HuggingFace install failed due to invalid access token
-
-Some HuggingFace models require you to authenticate using an [access token].
-
-Invoke doesn't manage this token for you, but it's easy to set it up:
-
-- Follow the instructions in the link above to create an access token. Copy it.
-- Run the launcher script.
-- Select option 2 (developer console).
-- Paste the following command:
-
-  ```sh
-  python -c "import huggingface_hub; huggingface_hub.login()"
-  ```
-
-- Paste your access token when prompted and press Enter. You won't see anything when you paste it.
-- Type `n` if prompted about git credentials.
-
-If you get an error, try the command again - maybe the token didn't paste correctly.
-
-Once your token is set, start Invoke and try downloading the model again. The installer will automatically use the access token.
-
-If the install still fails, you may not have access to the model.
-
-## Stable Diffusion XL generation fails after trying to load UNet
-
-InvokeAI is working in other respects, but when trying to generate
-images with Stable Diffusion XL you get a "Server Error". The text log
-in the launch window contains this log line above several more lines of
-error messages:
-
-`INFO --> Loading model:D:\LONG\PATH\TO\MODEL, type sdxl:main:unet`
-
-This failure mode occurs when there is a network glitch during
-downloading the very large SDXL model.
-
-To address this, first go to the Model Manager and delete the
-Stable-Diffusion-XL-base-1.X model. Then, click the HuggingFace tab,
-paste the Repo ID stabilityai/stable-diffusion-xl-base-1.0 and install
-the model.
-
-## Package dependency conflicts during installation or update
-
-If you have previously installed InvokeAI or another Stable Diffusion
-package, the installer may occasionally pick up outdated libraries and
-either the installer or `invoke` will fail with complaints about
-library conflicts.
-
-To resolve this, re-install the application as described above.
-
 ## Invalid configuration file
 
 Everything seems to install ok, you get a `ValidationError` when starting up the app.
@@ -154,64 +58,9 @@ This is caused by an invalid setting in the `invokeai.yaml` configuration file.
 
 Check the [configuration docs] for more detail about the settings and how to specify them.
 
-## `ModuleNotFoundError: No module named 'controlnet_aux'`
+## Out of Memory Errors
 
-`controlnet_aux` is a dependency of Invoke and appears to have been packaged or distributed strangely. Sometimes, it doesn't install correctly. This is outside our control.
-
-If you encounter this error, the solution is to remove the package from the `pip` cache and re-run the Invoke installer so a fresh, working version of `controlnet_aux` can be downloaded and installed:
-
-- Run the Invoke launcher
-- Choose the developer console option
-- Run this command: `pip cache remove controlnet_aux`
-- Close the terminal window
-- Download and run the [installer][latest release], selecting your current install location
-
-## Out of Memory Issues
-
-The models are large, VRAM is expensive, and you may find yourself
-faced with Out of Memory errors when generating images. Here are some
-tips to reduce the problem:
-
-!!! info "Optimizing for GPU VRAM"
-
-    === "4GB VRAM GPU"
-
-        This should be adequate for 512x512 pixel images using Stable Diffusion 1.5
-        and derived models, provided that you do not use the NSFW checker. It won't be loaded unless you go into the UI settings and turn it on.
-
-        If you are on a CUDA-enabled GPU, we will automatically use xformers or torch-sdp to reduce VRAM requirements, though you can explicitly configure this. See the [configuration docs].
-
-    === "6GB VRAM GPU"
-
-        This is a border case. Using the SD 1.5 series you should be able to
-        generate images up to 640x640 with the NSFW checker enabled, and up to
-        1024x1024 with it disabled.
-
-        If you run into persistent memory issues there are a series of
-        environment variables that you can set before launching InvokeAI that
-        alter how the PyTorch machine learning library manages memory. See
-        <https://pytorch.org/docs/stable/notes/cuda.html#memory-management> for
-        a list of these tweaks.
-
-    === "12GB VRAM GPU"
-
-        This should be sufficient to generate larger images up to about 1280x1280.
-  
-## Checkpoint Models Load Slowly or Use Too Much RAM
-
-The difference between diffusers models (a folder containing multiple
-subfolders) and checkpoint models (a file ending with .safetensors or
-.ckpt) is that InvokeAI is able to load diffusers models into memory
-incrementally, while checkpoint models must be loaded all at
-once. With very large models, or systems with limited RAM, you may
-experience slowdowns and other memory-related issues when loading
-checkpoint models.
-
-To solve this, go to the Model Manager tab (the cube), select the
-checkpoint model that's giving you trouble, and press the "Convert"
-button in the upper right of your browser window. This will convert the
-checkpoint into a diffusers model, after which loading should be
-faster and less memory-intensive.
+The models are large, VRAM is expensive, and you may find yourself faced with Out of Memory errors when generating images. Follow our [Low-VRAM mode guide](./features/low-vram.md) to configure Invoke to prevent these.
 
 ## Memory Leak (Linux)
 
@@ -253,8 +102,6 @@ Note the differences between memory allocated as chunks in an arena vs. memory a
 
 [model install docs]: ./installation/models.md
 [system requirements]: ./installation/requirements.md
-[latest release]: https://github.com/invoke-ai/InvokeAI/releases/latest
 [create an issue]: https://github.com/invoke-ai/InvokeAI/issues
 [discord]: https://discord.gg/ZmtBAhwWhy
 [configuration docs]: ./configuration.md
-[access token]: https://huggingface.co/docs/hub/security-tokens#how-to-manage-user-access-tokens

docs/installation/quick_start.md

@@ -99,6 +99,20 @@ We recommend watching our [Getting Started Playlist](https://www.youtube.com/pla
 - Using control layers and reference guides.
 - Refining images with advanced workflows.
 
+## Troubleshooting
+
+If installation fails, retrying the install in Repair Mode may fix it. There's a checkbox to enable this on the Review step of the install flow.
+
+If that doesn't fix it, [clearing the `uv` cache](https://docs.astral.sh/uv/reference/cli/#uv-cache-clean) might do the trick:
+
+- Open and start the dev console (button at the bottom-left of the launcher).
+- Run `uv cache clean`.
+- Retry the installation. Enable Repair Mode for good measure.
+
+If you are still unable to install, try installing to a different location and see if that works.
+
+If you still have problems, ask for help on the Invoke [discord](https://discord.gg/ZmtBAhwWhy).
+
 ## Other Installation Methods
 
 - You can install the Invoke application as a python package. See our [manual install](./manual.md) docs.

docs/installation/requirements.md

@@ -4,7 +4,9 @@ Invoke runs on Windows 10+, macOS 14+ and Linux (Ubuntu 20.04+ is well-tested).
 
 ## Hardware
 
-Hardware requirements vary significantly depending on model and image output size. The requirements below are rough guidelines.
+Hardware requirements vary significantly depending on model and image output size.
+
+The requirements below are rough guidelines for best performance. GPUs with less VRAM typically still work, if a bit slower. Follow the [Low-VRAM mode guide](./features/low-vram.md) to optimize performance.
 
 - All Apple Silicon (M1, M2, etc) Macs work, but 16GB+ memory is recommended.
 - AMD GPUs are supported on Linux only. The VRAM requirements are the same as Nvidia GPUs.

invokeai/app/invocations/denoise_latents.py

@@ -898,7 +898,7 @@ class DenoiseLatentsInvocation(BaseInvocation):
 
         ### inpaint
         mask, masked_latents, is_gradient_mask = self.prep_inpaint_mask(context, latents)
-        # NOTE: We used to identify inpainting models by inpecting the shape of the loaded UNet model weights. Now we
+        # NOTE: We used to identify inpainting models by inspecting the shape of the loaded UNet model weights. Now we
         # use the ModelVariantType config. During testing, there was a report of a user with models that had an
         # incorrect ModelVariantType value. Re-installing the model fixed the issue. If this issue turns out to be
         # prevalent, we will have to revisit how we initialize the inpainting extensions.

invokeai/app/invocations/image.py

@@ -918,7 +918,7 @@ class ImageChannelMultiplyInvocation(BaseInvocation, WithMetadata, WithBoard):
     invert_channel: bool = InputField(default=False, description="Invert the channel after scaling")
 
     def invoke(self, context: InvocationContext) -> ImageOutput:
-        image = context.images.get_pil(self.image.image_name)
+        image = context.images.get_pil(self.image.image_name, "RGBA")
 
         # extract the channel and mode from the input and reference tuple
         mode = CHANNEL_FORMATS[self.channel][0]

invokeai/app/invocations/metadata.py

@@ -18,6 +18,7 @@ from invokeai.app.invocations.fields import (
     UIType,
 )
 from invokeai.app.invocations.model import ModelIdentifierField
+from invokeai.app.invocations.primitives import StringOutput
 from invokeai.app.services.shared.invocation_context import InvocationContext
 from invokeai.app.util.controlnet_utils import CONTROLNET_MODE_VALUES, CONTROLNET_RESIZE_VALUES
 from invokeai.version.invokeai_version import __version__
@@ -275,3 +276,33 @@ class CoreMetadataInvocation(BaseInvocation):
         return MetadataOutput(metadata=MetadataField.model_validate(as_dict))
 
     model_config = ConfigDict(extra="allow")
+
+
+@invocation(
+    "metadata_field_extractor",
+    title="Metadata Field Extractor",
+    tags=["metadata"],
+    category="metadata",
+    version="1.0.0",
+)
+class MetadataFieldExtractorInvocation(BaseInvocation):
+    """Extracts the text value from an image's metadata given a key.
+    Raises an error if the image has no metadata or if the value is not a string (nesting not permitted)."""
+
+    image: ImageField = InputField(description="The image to extract metadata from")
+    key: str = InputField(description="The key in the image's metadata to extract the value from")
+
+    def invoke(self, context: InvocationContext) -> StringOutput:
+        image_name = self.image.image_name
+
+        metadata = context.images.get_metadata(image_name=image_name)
+        if not metadata:
+            raise ValueError(f"No metadata found on image {image_name}")
+
+        try:
+            val = metadata.root[self.key]
+            if not isinstance(val, str):
+                raise ValueError(f"Metadata at key '{self.key}' must be a string")
+            return StringOutput(value=val)
+        except KeyError as e:
+            raise ValueError(f"No key '{self.key}' found in the metadata for {image_name}") from e

invokeai/app/services/model_images/model_images_common.py

@@ -1,4 +1,4 @@
-# TODO: Should these excpetions subclass existing python exceptions?
+# TODO: Should these exceptions subclass existing python exceptions?
 class ModelImageFileNotFoundException(Exception):
     """Raised when an image file is not found in storage."""
 

invokeai/frontend/web/.eslintrc.js

@@ -23,6 +23,12 @@ module.exports = {
         property: 'randomUUID',
         message: 'Use of crypto.randomUUID is not allowed as it is not available in all browsers.',
       },
+      {
+        object: 'navigator',
+        property: 'clipboard',
+        message:
+          'The Clipboard API is not available by default in Firefox. Use the `useClipboard` hook instead, which wraps clipboard access to prevent errors.',
+      },
     ],
   },
   overrides: [

invokeai/frontend/web/index.html

@@ -11,9 +11,11 @@
   <link id="invoke-favicon" rel="icon" type="icon" href="assets/images/invoke-favicon.svg" />
   <style>
     html,
-    body {
+    body,
+    #root {
       padding: 0;
       margin: 0;
+      overflow: hidden;
     }
   </style>
 </head>
@@ -23,4 +25,4 @@
   <script type="module" src="/src/main.tsx"></script>
 </body>
 
-</html>
+</html>

invokeai/frontend/web/package.json

@@ -126,7 +126,7 @@
     "@storybook/addon-storysource": "^8.3.4",
     "@storybook/manager-api": "^8.3.4",
     "@storybook/react": "^8.3.4",
-    "@storybook/react-vite": "^8.3.4",
+    "@storybook/react-vite": "^8.5.5",
     "@storybook/theming": "^8.3.4",
     "@types/dateformat": "^5.0.2",
     "@types/lodash-es": "^4.17.12",
@@ -134,9 +134,9 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
-    "@vitejs/plugin-react-swc": "^3.7.1",
-    "@vitest/coverage-v8": "^1.6.0",
-    "@vitest/ui": "^1.6.0",
+    "@vitejs/plugin-react-swc": "^3.8.0",
+    "@vitest/coverage-v8": "^3.0.5",
+    "@vitest/ui": "^3.0.5",
     "concurrently": "^8.2.2",
     "csstype": "^3.1.3",
     "dpdm": "^3.14.0",
@@ -152,11 +152,11 @@
     "tsafe": "^1.7.5",
     "type-fest": "^4.26.1",
     "typescript": "^5.6.2",
-    "vite": "^5.4.8",
+    "vite": "^6.1.0",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-dts": "^3.9.1",
+    "vite-plugin-dts": "^4.5.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^4.3.2",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^1.6.0"
   },
   "engines": {

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

@@ -305,6 +305,7 @@
     },
     "gallery": {
         "gallery": "Gallery",
+        "assets": "Assets",
         "alwaysShowImageSizeBadge": "Always Show Image Size Badge",
         "assetsTab": "Files you’ve uploaded for use in your projects.",
         "autoAssignBoardOnClick": "Auto-Assign Board on Click",
@@ -1265,7 +1266,10 @@
         "workflowLoaded": "Workflow Loaded",
         "problemRetrievingWorkflow": "Problem Retrieving Workflow",
         "workflowDeleted": "Workflow Deleted",
-        "problemDeletingWorkflow": "Problem Deleting Workflow"
+        "problemDeletingWorkflow": "Problem Deleting Workflow",
+        "unableToCopy": "Unable to Copy",
+        "unableToCopyDesc": "Your browser does not support clipboard access. Firefox users may be able to fix this by following ",
+        "unableToCopyDesc_theseSteps": "these steps"
     },
     "popovers": {
         "clipSkip": {
@@ -1869,6 +1873,10 @@
             "rgAutoNegativeNotSupported": "Auto-Negative not supported for selected base model",
             "rgNoRegion": "no region drawn"
         },
+        "errors": {
+            "unableToFindImage": "Unable to find image",
+            "unableToLoadImage": "Unable to Load Image"
+        },
         "controlMode": {
             "controlMode": "Control Mode",
             "balanced": "Balanced (recommended)",

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

@@ -301,7 +301,9 @@
         "hfTokenHelperText": "Un token HF est requis pour utiliser certains modèles. Cliquez ici pour créer ou obtenir votre token.",
         "hfTokenInvalid": "Token HF invalide ou manquant",
         "hfForbidden": "Vous n'avez pas accès à ce modèle HF.",
-        "hfTokenInvalidErrorMessage2": "Mettre à jour dans le "
+        "hfTokenInvalidErrorMessage2": "Mettre à jour dans le ",
+        "controlLora": "Controle LoRA",
+        "urlUnauthorizedErrorMessage2": "Découvrir comment ici."
     },
     "parameters": {
         "images": "Images",
@@ -332,7 +334,7 @@
         "showOptionsPanel": "Afficher le panneau latéral (O ou T)",
         "invoke": {
             "noPrompts": "Aucun prompts généré",
-            "missingInputForField": "{{nodeLabel}} -> {{fieldLabel}} entrée manquante",
+            "missingInputForField": "entrée manquante",
             "missingFieldTemplate": "Modèle de champ manquant",
             "invoke": "Invoke",
             "addingImagesTo": "Ajouter des images à",
@@ -353,7 +355,9 @@
             "canvasIsCompositing": "La toile est en train de composer",
             "collectionTooFewItems": "{{nodeLabel}} -> {{fieldLabel}} : trop peu d'éléments, minimum {{minItems}}",
             "collectionTooManyItems": "{{nodeLabel}} -> {{fieldLabel}} : trop d'éléments, maximum {{maxItems}}",
-            "canvasIsSelectingObject": "La toile est occupée (sélection d'objet)"
+            "canvasIsSelectingObject": "La toile est occupée (sélection d'objet)",
+            "emptyBatches": "lots vides",
+            "batchNodeNotConnected": "Noeud de lots non connecté : {{label}}"
         },
         "negativePromptPlaceholder": "Prompt Négatif",
         "positivePromptPlaceholder": "Prompt Positif",
@@ -1630,7 +1634,26 @@
         "boardAccessError": "Impossible de trouver la planche {{board_id}}, réinitialisation à la valeur par défaut",
         "workflowHelpText": "Besoin d'aide ? Consultez notre guide sur <LinkComponent>Comment commencer avec les Workflows</LinkComponent>.",
         "noWorkflows": "Aucun Workflows",
-        "noMatchingWorkflows": "Aucun Workflows correspondant"
+        "noMatchingWorkflows": "Aucun Workflows correspondant",
+        "arithmeticSequence": "Séquence Arithmétique",
+        "uniformRandomDistribution": "Distribution Aléatoire Uniforme",
+        "noBatchGroup": "aucun groupe",
+        "generatorLoading": "chargement",
+        "generatorLoadFromFile": "Charger depuis un Fichier",
+        "dynamicPromptsRandom": "Prompts Dynamiques (Aléatoire)",
+        "integerRangeGenerator": "Générateur d'interval d'entiers",
+        "generateValues": "Générer Valeurs",
+        "linearDistribution": "Distribution Linéaire",
+        "floatRangeGenerator": "Générateur d'interval de nombres décimaux",
+        "generatorNRandomValues_one": "{{count}} valeur aléatoire",
+        "generatorNRandomValues_many": "{{count}} valeurs aléatoires",
+        "generatorNRandomValues_other": "{{count}} valeurs aléatoires",
+        "dynamicPromptsCombinatorial": "Prompts Dynamiques (Combinatoire)",
+        "parseString": "Analyser la chaine de charactères",
+        "internalDesc": "Cette invocation est utilisée internalement par Invoke. En fonction des mises à jours il est possible que des changements y soit effectués ou qu'elle soit supprimé sans prévention.",
+        "splitOn": "Diviser sur",
+        "generatorNoValues": "vide",
+        "addItem": "Ajouter un élément"
     },
     "models": {
         "noMatchingModels": "Aucun modèle correspondant",

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

@@ -172,7 +172,8 @@
         "imagesTab": "Immagini create e salvate in Invoke.",
         "assetsTab": "File che hai caricato per usarli nei tuoi progetti.",
         "boardsSettings": "Impostazioni Bacheche",
-        "imagesSettings": "Impostazioni Immagini Galleria"
+        "imagesSettings": "Impostazioni Immagini Galleria",
+        "assets": "Risorse"
     },
     "hotkeys": {
         "searchHotkeys": "Cerca tasti di scelta rapida",
@@ -832,7 +833,12 @@
         "uploadFailedInvalidUploadDesc_withCount_one": "Devi caricare al massimo 1 immagine PNG o JPEG.",
         "uploadFailedInvalidUploadDesc_withCount_many": "Devi caricare al massimo {{count}} immagini PNG o JPEG.",
         "uploadFailedInvalidUploadDesc_withCount_other": "Devi caricare al massimo {{count}} immagini PNG o JPEG.",
-        "outOfMemoryErrorDescLocal": "Segui la nostra <LinkComponent>guida per bassa VRAM</LinkComponent> per ridurre gli OOM."
+        "outOfMemoryErrorDescLocal": "Segui la nostra <LinkComponent>guida per bassa VRAM</LinkComponent> per ridurre gli OOM.",
+        "pasteFailed": "Incolla non riuscita",
+        "pasteSuccess": "Incollato su {{destination}}",
+        "unableToCopy": "Impossibile copiare",
+        "unableToCopyDesc": "Il tuo browser non supporta l'accesso agli appunti. Gli utenti di Firefox potrebbero risolvere il problema seguendo ",
+        "unableToCopyDesc_theseSteps": "questi passaggi"
     },
     "accessibility": {
         "invokeProgressBar": "Barra di avanzamento generazione",
@@ -2092,7 +2098,10 @@
             "saveCanvasToGallery": "Salva la Tela nella Galleria",
             "saveToGalleryGroup": "Salva nella Galleria",
             "newInpaintMask": "Nuova maschera Inpaint",
-            "newRegionalGuidance": "Nuova Guida Regionale"
+            "newRegionalGuidance": "Nuova Guida Regionale",
+            "copyToClipboard": "Copia negli appunti",
+            "copyCanvasToClipboard": "Copia la tela negli appunti",
+            "copyBboxToClipboard": "Copia il riquadro di delimitazione negli appunti"
         },
         "newImg2ImgCanvasFromImage": "Nuova Immagine da immagine",
         "copyRasterLayerTo": "Copia $t(controlLayers.rasterLayer) in",
@@ -2155,7 +2164,17 @@
             "ipAdapterIncompatibleBaseModel": "modello base dell'immagine di riferimento incompatibile",
             "ipAdapterNoImageSelected": "nessuna immagine di riferimento selezionata",
             "rgAutoNegativeNotSupported": "Auto-Negativo non supportato per il modello base selezionato"
-        }
+        },
+        "pasteTo": "Incolla su",
+        "pasteToBboxDesc": "Nuovo livello (nel riquadro di delimitazione)",
+        "pasteToAssets": "Risorse",
+        "copyRegionError": "Errore durante la copia di {{region}}",
+        "pasteToAssetsDesc": "Incolla in Risorse",
+        "pasteToBbox": "Riquadro di delimitazione",
+        "pasteToCanvas": "Tela",
+        "pasteToCanvasDesc": "Nuovo livello (nella Tela)",
+        "pastedTo": "Incollato su {{destination}}",
+        "regionCopiedToClipboard": "{{region}} Copiato negli appunti"
     },
     "ui": {
         "tabs": {
@@ -2254,11 +2273,12 @@
         "watchRecentReleaseVideos": "Guarda i video su questa versione",
         "watchUiUpdatesOverview": "Guarda le novità dell'interfaccia",
         "items": [
-            "Modalità Bassa-VRAM",
-            "Gestione dinamica della memoria",
-            "Tempi di caricamento del modello più rapidi",
-            "Meno errori di memoria",
-            "Funzionalità lotto del flusso di lavoro ampliate"
+            "Impostazioni predefinite VRAM migliorate",
+            "Cancellazione della cache del modello su richiesta",
+            "Compatibilità estesa FLUX LoRA",
+            "Filtro Regola Immagine su Tela",
+            "Annulla tutto tranne l'elemento della coda corrente",
+            "Copia da e incolla sulla Tela"
         ]
     },
     "system": {

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

@@ -117,7 +117,8 @@
         "unstarImage": "Ngừng Gắn Sao Cho Ảnh",
         "compareHelp2": "Nhấn <Kbd>M</Kbd> để tuần hoàn trong chế độ so sánh.",
         "boardsSettings": "Thiết Lập Bảng",
-        "imagesSettings": "Cài Đặt Thư Viện Ảnh"
+        "imagesSettings": "Cài Đặt Thư Viện Ảnh",
+        "assets": "Tài Nguyên"
     },
     "common": {
         "ipAdapter": "IP Adapter",
@@ -303,7 +304,11 @@
         "completedIn": "Hoàn tất trong",
         "graphQueued": "Đồ Thị Đã Vào Hàng",
         "batchQueuedDesc_other": "Thêm {{count}} phiên vào {{direction}} của hàng",
-        "batchSize": "Kích Thước Lô"
+        "batchSize": "Kích Thước Lô",
+        "cancelAllExceptCurrentQueueItemAlertDialog": "Huỷ tất cả mục đang xếp hàng ngoại trừ mục hiện tại, sẽ dừng các mục đang chờ nhưng cho phép các mục đang chạy được hoàn tất.",
+        "cancelAllExceptCurrentQueueItemAlertDialog2": "Bạn có chắc muốn huỷ tất cả mục đang chờ?",
+        "cancelAllExceptCurrentTooltip": "Huỷ Bỏ Tất Cả Ngoại Trừ Mục Hiện Tại",
+        "confirm": "Đồng Ý"
     },
     "hotkeys": {
         "canvas": {
@@ -1797,7 +1802,10 @@
             "newControlLayer": "Layer Điều Khiển Được Mới",
             "newRasterLayer": "Layer Dạng Raster Mới",
             "bboxGroup": "Được Tạo Từ Hộp Giới Hạn",
-            "canvasGroup": "Canvas"
+            "canvasGroup": "Canvas",
+            "copyCanvasToClipboard": "Sao Chép Canvas Vào Clipboard",
+            "copyToClipboard": "Sao Chép Vào Clipboard",
+            "copyBboxToClipboard": "Sao Chép Hộp Giới Hạn Vào Clipboard"
         },
         "stagingArea": {
             "saveToGallery": "Lưu Vào Thư Viện",
@@ -1914,6 +1922,30 @@
                 "gaussian_type": "Gaussian",
                 "noise_color": "Màu Nhiễu",
                 "size": "Cỡ Nhiễu"
+            },
+            "adjust_image": {
+                "channel": "Kênh Màu",
+                "cyan": "Lục Lam (Cmyk)",
+                "value_setting": "Giá Trị",
+                "scale_values": "Giá Trị Theo Tỉ Lệ",
+                "red": "Đỏ (Rgba)",
+                "green": "Lục (rGba)",
+                "blue": "Lam (rgBa)",
+                "alpha": "Độ Trong Suốt (rgbA)",
+                "luminosity": "Độ Sáng (Lab)",
+                "magenta": "Hồng Đỏ (cMyk)",
+                "yellow": "Vàng (cmYk)",
+                "description": "Điều chỉnh kênh màu được chọn của ảnh.",
+                "black": "Đen (cmyK)",
+                "cr": "Cr (ycC)",
+                "label": "Điều Chỉnh Ảnh",
+                "value": "Độ Sáng (hsV)",
+                "saturation": "Độ Bão Hoà (hSv)",
+                "hue": "Vùng Màu (Hsv)",
+                "a": "A (lAb)",
+                "b": "B (laB)",
+                "y": "Y (Ycc)",
+                "cb": "Cb (yCc)"
             }
         },
         "transform": {
@@ -1992,6 +2024,20 @@
             "rgReferenceImagesNotSupported": "Ảnh Mẫu Khu Vực không được hỗ trợ cho model cơ sở được chọn",
             "rgAutoNegativeNotSupported": "Tự Động Đảo Chiều không được hỗ trợ cho model cơ sở được chọn",
             "rgNoRegion": "không có khu vực được vẽ"
+        },
+        "pasteTo": "Dán Vào",
+        "pasteToAssets": "Tài Nguyên",
+        "pasteToAssetsDesc": "Dán Vào Tài Nguyên",
+        "pasteToBbox": "Hộp Giới Hạn",
+        "pasteToBboxDesc": "Layer Mới (Trong Hộp Giới Hạn)",
+        "pasteToCanvas": "Canvas",
+        "pasteToCanvasDesc": "Layer Mới (Trong Canvas)",
+        "pastedTo": "Dán Vào {{destination}}",
+        "regionCopiedToClipboard": "Sao Chép {{region}} Vào Clipboard",
+        "copyRegionError": "Lỗi khi sao chép {{region}}",
+        "errors": {
+            "unableToLoadImage": "Không Thể Tải Hình Ảnh",
+            "unableToFindImage": "Không Thể Tìm Hình Ảnh"
         }
     },
     "stylePresets": {
@@ -2123,7 +2169,12 @@
         "problemDownloadingImage": "Không Thể Tải Xuống Ảnh",
         "problemCopyingLayer": "Không Thể Sao Chép Layer",
         "problemSavingLayer": "Không Thể Lưu Layer",
-        "outOfMemoryErrorDescLocal": "Làm theo <LinkComponent>hướng dẫn VRAM Thấp</LinkComponent> của chúng tôi để hạn chế OOM (Tràn bộ nhớ)."
+        "outOfMemoryErrorDescLocal": "Làm theo <LinkComponent>hướng dẫn VRAM Thấp</LinkComponent> của chúng tôi để hạn chế OOM (Tràn bộ nhớ).",
+        "unableToCopy": "Không Thể Sao Chép",
+        "unableToCopyDesc_theseSteps": "các bước sau",
+        "unableToCopyDesc": "Trình duyệt của bạn không hỗ trợ tính năng clipboard. Người dùng Firefox có thể khắc phục theo ",
+        "pasteSuccess": "Dán Vào {{destination}}",
+        "pasteFailed": "Dán Thất Bại"
     },
     "ui": {
         "tabs": {
@@ -2218,11 +2269,12 @@
         "watchRecentReleaseVideos": "Xem Video Phát Hành Mới Nhất",
         "watchUiUpdatesOverview": "Xem Tổng Quan Về Những Cập Nhật Cho Giao Diện Người Dùng",
         "items": [
-            "Chế độ VRAM thấp",
-            "Trình quản lý bộ nhớ động",
-            "Tải model nhanh hơn",
-            "Ít lỗi bộ nhớ hơn",
-            "Mở rộng khả năng xử lý hàng loạt workflow"
+            "Cải thiện các thiết lập mặc định của VRAM",
+            "Xoá bộ nhớ đệm của model theo yêu cầu",
+            "Mở rộng khả năng tương thích LoRA trên FLUX",
+            "Bộ lọc điều chỉnh ảnh trên Canvas",
+            "Huỷ tất cả trừ mục đang xếp hàng hiện tại",
+            "Sao chép và dán trên Canvas"
         ]
     },
     "upsell": {

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

@@ -1,6 +1,7 @@
 import { Button, Flex, Heading, Image, Link, Text } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
+import { useClipboard } from 'common/hooks/useClipboard';
 import { selectConfigSlice } from 'features/system/store/configSlice';
 import { toast } from 'features/toast/toast';
 import newGithubIssueUrl from 'new-github-issue-url';
@@ -20,15 +21,17 @@ const selectIsLocal = createSelector(selectConfigSlice, (config) => config.isLoc
 const AppErrorBoundaryFallback = ({ error, resetErrorBoundary }: Props) => {
   const { t } = useTranslation();
   const isLocal = useAppSelector(selectIsLocal);
+  const clipboard = useClipboard();
 
   const handleCopy = useCallback(() => {
     const text = JSON.stringify(serializeError(error), null, 2);
-    navigator.clipboard.writeText(`\`\`\`\n${text}\n\`\`\``);
-    toast({
-      id: 'ERROR_COPIED',
-      title: t('toast.errorCopied'),
+    clipboard.writeText(`\`\`\`\n${text}\n\`\`\``, () => {
+      toast({
+        id: 'ERROR_COPIED',
+        title: t('toast.errorCopied'),
+      });
     });
-  }, [error, t]);
+  }, [clipboard, error, t]);
 
   const url = useMemo(() => {
     if (isLocal) {

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

@@ -0,0 +1,81 @@
+/* eslint-disable no-restricted-properties */
+
+import { ExternalLink, Text } from '@invoke-ai/ui-library';
+import { toast } from 'features/toast/toast';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { Param0 } from 'tsafe';
+
+const CLIPBOARD_FAQ_URL = 'https://invoke-ai.github.io/InvokeAI/faq/#unable-to-copy-on-firefox';
+
+export const useClipboard = () => {
+  const { t } = useTranslation();
+  const alertClipboardNotAvailable = useCallback(() => {
+    toast({
+      id: 'CLIPBOARD_UNAVAILABLE',
+      title: t('toast.unableToCopy'),
+      description: (
+        <>
+          <Text fontSize="md">
+            {t('toast.unableToCopyDesc')}
+            <ExternalLink
+              display="inline"
+              fontWeight="semibold"
+              href={CLIPBOARD_FAQ_URL}
+              label={t('toast.unableToCopyDesc_theseSteps')}
+            />
+            .
+          </Text>
+        </>
+      ),
+      status: 'error',
+    });
+  }, [t]);
+
+  const isAvailable = useMemo(() => {
+    if (!navigator.clipboard || !window.ClipboardItem) {
+      return false;
+    }
+    // TODO(psyche): Should we query the permissions API?
+    return true;
+  }, []);
+
+  const writeText = useCallback(
+    (data: Param0<Clipboard['writeText']>, onCopy?: () => void) => {
+      if (!isAvailable) {
+        alertClipboardNotAvailable();
+        return;
+      }
+      navigator.clipboard.writeText(data);
+      onCopy?.();
+    },
+    [alertClipboardNotAvailable, isAvailable]
+  );
+
+  const write = useCallback(
+    (data: Param0<Clipboard['write']>, onCopy?: () => void) => {
+      if (!isAvailable) {
+        alertClipboardNotAvailable();
+        return;
+      }
+      navigator.clipboard.write(data);
+      onCopy?.();
+    },
+    [alertClipboardNotAvailable, isAvailable]
+  );
+
+  const writeImage = useCallback(
+    (blob: Blob, onCopy?: () => void) => {
+      if (!isAvailable) {
+        alertClipboardNotAvailable();
+        return;
+      }
+      const data = [new ClipboardItem({ ['image/png']: blob })];
+      navigator.clipboard.write(data);
+      onCopy?.();
+    },
+    [alertClipboardNotAvailable, isAvailable]
+  );
+
+  return { isAvailable, writeText, write, writeImage };
+};

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

@@ -1,26 +1,15 @@
+import { useClipboard } from 'common/hooks/useClipboard';
 import { convertImageUrlToBlob } from 'common/util/convertImageUrlToBlob';
-import { copyBlobToClipboard } from 'features/system/util/copyBlobToClipboard';
 import { toast } from 'features/toast/toast';
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 export const useCopyImageToClipboard = () => {
   const { t } = useTranslation();
-
-  const isClipboardAPIAvailable = useMemo(() => {
-    return Boolean(navigator.clipboard) && Boolean(window.ClipboardItem);
-  }, []);
+  const clipboard = useClipboard();
 
   const copyImageToClipboard = useCallback(
     async (image_url: string) => {
-      if (!isClipboardAPIAvailable) {
-        toast({
-          id: 'PROBLEM_COPYING_IMAGE',
-          title: t('toast.problemCopyingImage'),
-          description: "Your browser doesn't support the Clipboard API.",
-          status: 'error',
-        });
-      }
       try {
         const blob = await convertImageUrlToBlob(image_url);
 
@@ -28,12 +17,12 @@ export const useCopyImageToClipboard = () => {
           throw new Error('Unable to create Blob');
         }
 
-        copyBlobToClipboard(blob);
-
-        toast({
-          id: 'IMAGE_COPIED',
-          title: t('toast.imageCopied'),
-          status: 'success',
+        clipboard.writeImage(blob, () => {
+          toast({
+            id: 'IMAGE_COPIED',
+            title: t('toast.imageCopied'),
+            status: 'success',
+          });
         });
       } catch (err) {
         toast({
@@ -44,8 +33,8 @@ export const useCopyImageToClipboard = () => {
         });
       }
     },
-    [isClipboardAPIAvailable, t]
+    [clipboard, t]
   );
 
-  return { isClipboardAPIAvailable, copyImageToClipboard };
+  return copyImageToClipboard;
 };

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

@@ -1,12 +1,11 @@
 import { logger } from 'app/logging/logger';
-import { withResultAsync } from 'common/util/result';
+import { useClipboard } from 'common/hooks/useClipboard';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import type { CanvasEntityAdapterControlLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterControlLayer';
 import type { CanvasEntityAdapterInpaintMask } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterInpaintMask';
 import type { CanvasEntityAdapterRasterLayer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRasterLayer';
 import type { CanvasEntityAdapterRegionalGuidance } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityAdapterRegionalGuidance';
 import { canvasToBlob } from 'features/controlLayers/konva/util';
-import { copyBlobToClipboard } from 'features/system/util/copyBlobToClipboard';
 import { toast } from 'features/toast/toast';
 import { startCase } from 'lodash-es';
 import { useCallback } from 'react';
@@ -17,6 +16,7 @@ const log = logger('canvas');
 
 export const useCopyLayerToClipboard = () => {
   const { t } = useTranslation();
+  const clipboard = useClipboard();
   const copyLayerToCipboard = useCallback(
     async (
       adapter:
@@ -30,27 +30,25 @@ export const useCopyLayerToClipboard = () => {
         return;
       }
 
-      const result = await withResultAsync(async () => {
+      try {
         const canvas = adapter.getCanvas();
         const blob = await canvasToBlob(canvas);
-        copyBlobToClipboard(blob);
-      });
-
-      if (result.isOk()) {
-        log.trace('Layer copied to clipboard');
-        toast({
-          status: 'info',
-          title: t('toast.layerCopiedToClipboard'),
+        clipboard.writeImage(blob, () => {
+          log.trace('Layer copied to clipboard');
+          toast({
+            status: 'info',
+            title: t('toast.layerCopiedToClipboard'),
+          });
         });
-      } else {
-        log.error({ error: serializeError(result.error) }, 'Problem copying layer to clipboard');
+      } catch (error) {
+        log.error({ error: serializeError(error) }, 'Problem copying layer to clipboard');
         toast({
           status: 'error',
           title: t('toast.problemCopyingLayer'),
         });
       }
     },
-    [t]
+    [clipboard, t]
   );
 
   return copyLayerToCipboard;
@@ -58,6 +56,7 @@ export const useCopyLayerToClipboard = () => {
 
 export const useCopyCanvasToClipboard = (region: 'canvas' | 'bbox') => {
   const { t } = useTranslation();
+  const clipboard = useClipboard();
   const canvasManager = useCanvasManager();
   const copyCanvasToClipboard = useCallback(async () => {
     const rect =
@@ -74,20 +73,19 @@ export const useCopyCanvasToClipboard = (region: 'canvas' | 'bbox') => {
       return;
     }
 
-    const result = await withResultAsync(async () => {
+    try {
       const rasterAdapters = canvasManager.compositor.getVisibleAdaptersOfType('raster_layer');
       const canvasElement = canvasManager.compositor.getCompositeCanvas(rasterAdapters, rect);
       const blob = await canvasToBlob(canvasElement);
-      copyBlobToClipboard(blob);
-    });
-
-    if (result.isOk()) {
-      toast({ title: t('controlLayers.regionCopiedToClipboard', { region: startCase(region) }) });
-    } else {
-      log.error({ error: serializeError(result.error) }, 'Failed to save canvas to gallery');
+      clipboard.writeImage(blob, () => {
+        log.trace('Region copied to clipboard');
+        toast({ title: t('controlLayers.regionCopiedToClipboard', { region: startCase(region) }) });
+      });
+    } catch (error) {
+      log.error({ error: serializeError(error) }, 'Failed to save canvas to gallery');
       toast({ title: t('controlLayers.copyRegionError', { region: startCase(region) }), status: 'error' });
     }
-  }, [canvasManager.compositor, canvasManager.stateApi, region, t]);
+  }, [canvasManager.compositor, canvasManager.stateApi, clipboard, region, t]);
 
   return copyCanvasToClipboard;
 };

invokeai/frontend/web/src/features/controlLayers/konva/CanvasObject/CanvasObjectImage.ts

@@ -1,5 +1,6 @@
 import { Mutex } from 'async-mutex';
 import { deepClone } from 'common/util/deepClone';
+import { withResultAsync } from 'common/util/result';
 import type { CanvasEntityBufferObjectRenderer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityBufferObjectRenderer';
 import type { CanvasEntityFilterer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityFilterer';
 import type { CanvasEntityObjectRenderer } from 'features/controlLayers/konva/CanvasEntity/CanvasEntityObjectRenderer';
@@ -7,7 +8,7 @@ import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
 import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase';
 import type { CanvasSegmentAnythingModule } from 'features/controlLayers/konva/CanvasSegmentAnythingModule';
 import type { CanvasStagingAreaModule } from 'features/controlLayers/konva/CanvasStagingAreaModule';
-import { loadImage } from 'features/controlLayers/konva/util';
+import { getKonvaNodeDebugAttrs, loadImage } from 'features/controlLayers/konva/util';
 import type { CanvasImageState } from 'features/controlLayers/store/types';
 import { t } from 'i18next';
 import Konva from 'konva';
@@ -94,36 +95,41 @@ export class CanvasObjectImage extends CanvasModuleBase {
   }
 
   updateImageSource = async (imageName: string) => {
-    try {
-      this.log.trace({ imageName }, 'Updating image source');
+    this.log.trace({ imageName }, 'Updating image source');
 
-      this.isLoading = true;
-      this.konva.group.visible(true);
+    this.isLoading = true;
+    this.konva.group.visible(true);
 
-      if (!this.konva.image) {
-        this.konva.placeholder.group.visible(false);
-        this.konva.placeholder.text.text(t('common.loadingImage', 'Loading Image'));
-      }
-
-      const imageDTO = await getImageDTOSafe(imageName);
-      if (imageDTO === null) {
-        this.onFailedToLoadImage();
-        return;
-      }
-
-      this.imageElement = await loadImage(imageDTO.image_url);
-      await this.updateImageElement();
-    } catch {
-      this.onFailedToLoadImage();
+    if (!this.konva.image) {
+      this.konva.placeholder.group.visible(false);
+      this.konva.placeholder.text.text(t('common.loadingImage', 'Loading Image'));
     }
+
+    const imageDTO = await getImageDTOSafe(imageName);
+    if (imageDTO === null) {
+      // ImageDTO not found (or network error)
+      this.onFailedToLoadImage(t('controlLayers.unableToFindImage', 'Unable to find image'));
+      return;
+    }
+
+    const imageElementResult = await withResultAsync(() => loadImage(imageDTO.image_url));
+    if (imageElementResult.isErr()) {
+      // Image loading failed (e.g. the URL to the "physical" image is invalid)
+      this.onFailedToLoadImage(t('controlLayers.unableToLoadImage', 'Unable to load image'));
+      return;
+    }
+
+    this.imageElement = imageElementResult.value;
+
+    await this.updateImageElement();
   };
 
-  onFailedToLoadImage = () => {
-    this.log({ image: this.state.image }, 'Failed to load image');
+  onFailedToLoadImage = (message: string) => {
+    this.log({ image: this.state.image }, message);
     this.konva.image?.visible(false);
     this.isLoading = false;
     this.isError = true;
-    this.konva.placeholder.text.text(t('common.imageFailedToLoad', 'Image Failed to Load'));
+    this.konva.placeholder.text.text(message);
     this.konva.placeholder.group.visible(true);
   };
 
@@ -140,6 +146,7 @@ export class CanvasObjectImage extends CanvasModuleBase {
             image: this.imageElement,
             width,
             height,
+            visible: true,
           });
         } else {
           this.log.trace('Creating new Konva image');
@@ -202,6 +209,10 @@ export class CanvasObjectImage extends CanvasModuleBase {
       isLoading: this.isLoading,
       isError: this.isError,
       state: deepClone(this.state),
+      konva: {
+        group: getKonvaNodeDebugAttrs(this.konva.group),
+        image: this.konva.image ? getKonvaNodeDebugAttrs(this.konva.image) : null,
+      },
     };
   };
 }

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

@@ -75,7 +75,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
     this.log.trace('Rendering staging area');
     const stagingArea = this.manager.stateApi.runSelector(selectCanvasStagingAreaSlice);
 
-    const { x, y, width, height } = this.manager.stateApi.getBbox().rect;
+    const { x, y } = this.manager.stateApi.getBbox().rect;
     const shouldShowStagedImage = this.$shouldShowStagedImage.get();
 
     this.selectedImage = stagingArea.stagedImages[stagingArea.selectedStagedImageIndex] ?? null;
@@ -83,27 +83,51 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
 
     if (this.selectedImage) {
       const { imageDTO } = this.selectedImage;
+      const image = imageDTOToImageWithDims(imageDTO);
+
+      /**
+       * When the final output image of a generation is received, we should clear that generation's last progress image.
+       *
+       * It's possible that we have already rendered the progress image from the next generation before the output image
+       * from the previous is fully loaded/rendered. This race condition results in a flicker:
+       * - LAST GENERATION: Render the final progress image
+       * - LAST GENERATION: Start loading the final output image...
+       * - NEXT GENERATION: Render the first progress image
+       * - LAST GENERATION: ...Finish loading the final output image & render it, clearing the progress image <-- Flicker!
+       * - NEXT GENERATION: Render the next progress image
+       *
+       * We can detect the race condition by stashing the session ID of the last progress image when we begin loading
+       * that session's output image. After we render it, if the progress image's session ID is the same as the one we
+       * stashed, we know that we have not yet gotten that next generation's first progress image. We can clear the
+       * progress image without causing a flicker.
+       */
+      const lastProgressEventSessionId = this.manager.progressImage.$lastProgressEvent.get()?.session_id;
+      const hideProgressIfSameSession = () => {
+        const currentProgressEventSessionId = this.manager.progressImage.$lastProgressEvent.get()?.session_id;
+        if (lastProgressEventSessionId === currentProgressEventSessionId) {
+          this.manager.progressImage.$lastProgressEvent.set(null);
+        }
+      };
 
       if (!this.image) {
-        const { image_name } = imageDTO;
         this.image = new CanvasObjectImage(
           {
             id: 'staging-area-image',
             type: 'image',
-            image: {
-              image_name: image_name,
-              width,
-              height,
-            },
+            image,
           },
           this
         );
+        await this.image.update(this.image.state, true);
         this.konva.group.add(this.image.konva.group);
-      }
-
-      if (!this.image.isLoading && !this.image.isError) {
-        await this.image.update({ ...this.image.state, image: imageDTOToImageWithDims(imageDTO) }, true);
-        this.manager.progressImage.$lastProgressEvent.set(null);
+        hideProgressIfSameSession();
+      } else if (this.image.isLoading) {
+        // noop - just wait for the image to load
+      } else if (this.image.state.image.image_name !== image.image_name) {
+        await this.image.update({ ...this.image.state, image }, true);
+        hideProgressIfSameSession();
+      } else if (this.image.isError) {
+        hideProgressIfSameSession();
       }
       this.image.konva.group.visible(shouldShowStagedImage);
     } else {
@@ -136,6 +160,7 @@ export class CanvasStagingAreaModule extends CanvasModuleBase {
       selectedImage: this.selectedImage,
       $shouldShowStagedImage: this.$shouldShowStagedImage.get(),
       $isStaging: this.$isStaging.get(),
+      image: this.image?.repr() ?? null,
     };
   };
 }

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

@@ -49,6 +49,8 @@ export type ParamsState = {
   optimizedDenoisingEnabled: boolean;
   iterations: number;
   scheduler: ParameterScheduler;
+  upscaleScheduler: ParameterScheduler;
+  upscaleCfgScale: ParameterCFGScale;
   seed: ParameterSeed;
   shouldRandomizeSeed: boolean;
   steps: ParameterSteps;
@@ -96,6 +98,8 @@ const initialState: ParamsState = {
   optimizedDenoisingEnabled: true,
   iterations: 1,
   scheduler: 'dpmpp_3m_k',
+  upscaleScheduler: 'kdpm_2',
+  upscaleCfgScale: 2,
   seed: 0,
   shouldRandomizeSeed: true,
   steps: 30,
@@ -139,6 +143,9 @@ export const paramsSlice = createSlice({
     setCfgScale: (state, action: PayloadAction<ParameterCFGScale>) => {
       state.cfgScale = action.payload;
     },
+    setUpscaleCfgScale: (state, action: PayloadAction<ParameterCFGScale>) => {
+      state.upscaleCfgScale = action.payload;
+    },
     setGuidance: (state, action: PayloadAction<ParameterGuidance>) => {
       state.guidance = action.payload;
     },
@@ -148,6 +155,10 @@ export const paramsSlice = createSlice({
     setScheduler: (state, action: PayloadAction<ParameterScheduler>) => {
       state.scheduler = action.payload;
     },
+    setUpscaleScheduler: (state, action: PayloadAction<ParameterScheduler>) => {
+      state.upscaleScheduler = action.payload;
+    },
+
     setSeed: (state, action: PayloadAction<number>) => {
       state.seed = action.payload;
       state.shouldRandomizeSeed = false;
@@ -315,6 +326,8 @@ export const {
   setCfgRescaleMultiplier,
   setGuidance,
   setScheduler,
+  setUpscaleScheduler,
+  setUpscaleCfgScale,
   setSeed,
   setImg2imgStrength,
   setOptimizedDenoisingEnabled,
@@ -409,6 +422,9 @@ export const selectVAEPrecision = createParamsSelector((params) => params.vaePre
 export const selectIterations = createParamsSelector((params) => params.iterations);
 export const selectShouldUseCPUNoise = createParamsSelector((params) => params.shouldUseCpuNoise);
 
+export const selectUpscaleScheduler = createParamsSelector((params) => params.upscaleScheduler);
+export const selectUpscaleCfgScale = createParamsSelector((params) => params.upscaleCfgScale);
+
 export const selectRefinerCFGScale = createParamsSelector((params) => params.refinerCFGScale);
 export const selectRefinerModel = createParamsSelector((params) => params.refinerModel);
 export const selectIsRefinerModelSelected = createParamsSelector((params) => Boolean(params.refinerModel));

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

@@ -8,16 +8,12 @@ import { PiCopyBold } from 'react-icons/pi';
 export const ImageMenuItemCopy = memo(() => {
   const { t } = useTranslation();
   const imageDTO = useImageDTOContext();
-  const { isClipboardAPIAvailable, copyImageToClipboard } = useCopyImageToClipboard();
+  const copyImageToClipboard = useCopyImageToClipboard();
 
   const onClick = useCallback(() => {
     copyImageToClipboard(imageDTO.image_url);
   }, [copyImageToClipboard, imageDTO.image_url]);
 
-  if (!isClipboardAPIAvailable) {
-    return null;
-  }
-
   return (
     <IconMenuItem
       icon={<PiCopyBold />}

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

@@ -1,5 +1,6 @@
 import { Box, Flex, IconButton, Tooltip, useShiftModifier } from '@invoke-ai/ui-library';
 import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import { useClipboard } from 'common/hooks/useClipboard';
 import { Formatter } from 'fracturedjsonjs';
 import { isString } from 'lodash-es';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
@@ -25,9 +26,10 @@ const DataViewer = (props: Props) => {
   const { label, data, fileName, withDownload = true, withCopy = true, extraCopyActions } = props;
   const dataString = useMemo(() => (isString(data) ? data : formatter.Serialize(data)) ?? '', [data]);
   const shift = useShiftModifier();
+  const clipboard = useClipboard();
   const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(dataString);
-  }, [dataString]);
+    clipboard.writeText(dataString);
+  }, [clipboard, dataString]);
 
   const handleDownload = useCallback(() => {
     const blob = new Blob([dataString]);
@@ -94,9 +96,10 @@ type ExtraCopyActionProps = {
 };
 const ExtraCopyAction = ({ label, data, getData }: ExtraCopyActionProps) => {
   const { t } = useTranslation();
+  const clipboard = useClipboard();
   const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(JSON.stringify(getData(data), null, 2));
-  }, [data, getData]);
+    clipboard.writeText(JSON.stringify(getData(data), null, 2));
+  }, [clipboard, data, getData]);
 
   return (
     <Tooltip label={`${t('gallery.copy')} ${label} JSON`}>

invokeai/frontend/web/src/features/gallery/components/ImageViewer/useImageViewer.ts

@@ -21,7 +21,7 @@ import type { ImageDTO } from 'services/api/types';
  *
  * We can hack around this, thanks to the fact that the image viewer is always opened on the first app startup. By the
  * time the user closes it, the resizable panels library has already done its one extra resize and the DOM layout has
- * stablized. So we can track the first time the image viewer is closed and fit the layers to the stage at that time,
+ * stabilized. So we can track the first time the image viewer is closed and fit the layers to the stage at that time,
  * ensuring that the bbox is centered in the canvas stage on that first app startup.
  *
  * TODO(psyche): Figure out a better way to do handle this...

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

@@ -152,7 +152,7 @@ type UseGalleryNavigationReturn = {
 /**
  * Provides access to the gallery navigation via arrow keys.
  * Also provides information about the current image's position in the gallery,
- * useful for determining whether to load more images or display navigatin
+ * useful for determining whether to load more images or display navigation
  * buttons.
  */
 export const useGalleryNavigation = (): UseGalleryNavigationReturn => {

invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowListMenu/ShareWorkflowModal.tsx

@@ -15,6 +15,7 @@ import {
 import { useStore } from '@nanostores/react';
 import { $projectUrl } from 'app/store/nanostores/projectId';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
+import { useClipboard } from 'common/hooks/useClipboard';
 import { toast } from 'features/toast/toast';
 import { atom } from 'nanostores';
 import { useCallback, useMemo } from 'react';
@@ -38,7 +39,7 @@ export const ShareWorkflowModal = () => {
   const workflowToShare = useStore($workflowToShare);
   const projectUrl = useStore($projectUrl);
   const { t } = useTranslation();
-
+  const clipboard = useClipboard();
   const workflowLink = useMemo(() => {
     if (!workflowToShare || !projectUrl) {
       return null;
@@ -50,13 +51,14 @@ export const ShareWorkflowModal = () => {
     if (!workflowLink) {
       return;
     }
-    navigator.clipboard.writeText(workflowLink);
-    toast({
-      status: 'success',
-      title: t('toast.linkCopied'),
+    clipboard.writeText(workflowLink, () => {
+      toast({
+        status: 'success',
+        title: t('toast.linkCopied'),
+      });
     });
     $workflowToShare.set(null);
-  }, [workflowLink, t]);
+  }, [workflowLink, clipboard, t]);
 
   return (
     <Modal isOpen={workflowToShare !== null} onClose={clearWorkflowToShare} isCentered size="lg" useInert={false}>

invokeai/frontend/web/src/features/nodes/util/graph/buildMultidiffusionUpscaleGraph.ts

@@ -13,7 +13,15 @@ import { getBoardField, getPresetModifiedPrompts } from './graphBuilderUtils';
 export const buildMultidiffusionUpscaleGraph = async (
   state: RootState
 ): Promise<{ g: Graph; noise: Invocation<'noise'>; posCond: Invocation<'compel' | 'sdxl_compel_prompt'> }> => {
-  const { model, cfgScale: cfg_scale, scheduler, steps, vaePrecision, seed, vae } = state.params;
+  const {
+    model,
+    upscaleCfgScale: cfg_scale,
+    upscaleScheduler: scheduler,
+    steps,
+    vaePrecision,
+    seed,
+    vae,
+  } = state.params;
   const { upscaleModel, upscaleInitialImage, structure, creativity, tileControlnetModel, scale } = state.upscale;
 
   assert(model, 'No model found in state');

invokeai/frontend/web/src/features/nodes/util/workflow/validateWorkflow.ts

@@ -46,7 +46,7 @@ const MODEL_FIELD_TYPES = [
  * - Validates the workflow against the node templates, warning if the template is not known.
  * - Attempts to update nodes which have a mismatched version.
  * - Removes edges which are invalid.
- * @param workflow The raw workflow object (e.g. JSON.parse(stringifiedWorklow))
+ * @param workflow The raw workflow object (e.g. JSON.parse(stringifiedWorkflow))
  * @param templates The node templates to validate against.
  * @throws {WorkflowVersionError} If the workflow version is not recognized.
  * @throws {z.ZodError} If there is a validation error.

invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleCFGScale.tsx

@@ -0,0 +1,48 @@
+import { CompositeNumberInput, CompositeSlider, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
+import { selectUpscaleCfgScale, setUpscaleCfgScale } from 'features/controlLayers/store/paramsSlice';
+import { selectCFGScaleConfig } from 'features/system/store/configSlice';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ParamUpscaleCFGScale = () => {
+  const cfgScale = useAppSelector(selectUpscaleCfgScale);
+  const config = useAppSelector(selectCFGScaleConfig);
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const marks = useMemo(
+    () => [config.sliderMin, Math.floor(config.sliderMax / 2), config.sliderMax],
+    [config.sliderMax, config.sliderMin]
+  );
+  const onChange = useCallback((v: number) => dispatch(setUpscaleCfgScale(v)), [dispatch]);
+
+  return (
+    <FormControl>
+      <InformationalPopover feature="paramCFGScale">
+        <FormLabel>{t('parameters.cfgScale')}</FormLabel>
+      </InformationalPopover>
+      <CompositeSlider
+        value={cfgScale}
+        defaultValue={config.initial}
+        min={config.sliderMin}
+        max={config.sliderMax}
+        step={config.coarseStep}
+        fineStep={config.fineStep}
+        onChange={onChange}
+        marks={marks}
+      />
+      <CompositeNumberInput
+        value={cfgScale}
+        defaultValue={config.initial}
+        min={config.numberInputMin}
+        max={config.numberInputMax}
+        step={config.coarseStep}
+        fineStep={config.fineStep}
+        onChange={onChange}
+      />
+    </FormControl>
+  );
+};
+
+export default memo(ParamUpscaleCFGScale);

invokeai/frontend/web/src/features/parameters/components/Upscale/ParamUpscaleScheduler.tsx

@@ -0,0 +1,38 @@
+import type { ComboboxOnChange } from '@invoke-ai/ui-library';
+import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { InformationalPopover } from 'common/components/InformationalPopover/InformationalPopover';
+import { selectUpscaleScheduler, setUpscaleScheduler } from 'features/controlLayers/store/paramsSlice';
+import { SCHEDULER_OPTIONS } from 'features/parameters/types/constants';
+import { isParameterScheduler } from 'features/parameters/types/parameterSchemas';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const ParamUpscaleScheduler = () => {
+  const dispatch = useAppDispatch();
+  const { t } = useTranslation();
+  const scheduler = useAppSelector(selectUpscaleScheduler);
+
+  const onChange = useCallback<ComboboxOnChange>(
+    (v) => {
+      if (!isParameterScheduler(v?.value)) {
+        return;
+      }
+      dispatch(setUpscaleScheduler(v.value));
+    },
+    [dispatch]
+  );
+
+  const value = useMemo(() => SCHEDULER_OPTIONS.find((o) => o.value === scheduler), [scheduler]);
+
+  return (
+    <FormControl>
+      <InformationalPopover feature="paramScheduler">
+        <FormLabel>{t('parameters.scheduler')}</FormLabel>
+      </InformationalPopover>
+      <Combobox value={value} options={SCHEDULER_OPTIONS} onChange={onChange} />
+    </FormControl>
+  );
+};
+
+export default memo(ParamUpscaleScheduler);

invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx

@@ -14,6 +14,8 @@ import ParamSteps from 'features/parameters/components/Core/ParamSteps';
 import { NavigateToModelManagerButton } from 'features/parameters/components/MainModel/NavigateToModelManagerButton';
 import ParamMainModelSelect from 'features/parameters/components/MainModel/ParamMainModelSelect';
 import { UseDefaultSettingsButton } from 'features/parameters/components/MainModel/UseDefaultSettingsButton';
+import ParamUpscaleCFGScale from 'features/parameters/components/Upscale/ParamUpscaleCFGScale';
+import ParamUpscaleScheduler from 'features/parameters/components/Upscale/ParamUpscaleScheduler';
 import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpanderToggle';
 import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
@@ -31,6 +33,9 @@ export const GenerationSettingsAccordion = memo(() => {
   const activeTabName = useAppSelector(selectActiveTab);
   const isFLUX = useAppSelector(selectIsFLUX);
   const isSD3 = useAppSelector(selectIsSD3);
+  const isUpscaling = useMemo(() => {
+    return activeTabName === 'upscaling';
+  }, [activeTabName]);
   const selectBadges = useMemo(
     () =>
       createMemoizedSelector(selectLoRAsSlice, (loras) => {
@@ -75,9 +80,12 @@ export const GenerationSettingsAccordion = memo(() => {
         <Expander label={t('accordions.advanced.options')} isOpen={isOpenExpander} onToggle={onToggleExpander}>
           <Flex gap={4} flexDir="column" pb={4}>
             <FormControlGroup formLabelProps={formLabelProps}>
-              {!isFLUX && !isSD3 && <ParamScheduler />}
+              {!isFLUX && !isSD3 && !isUpscaling && <ParamScheduler />}
+              {isUpscaling && <ParamUpscaleScheduler />}
               <ParamSteps />
-              {isFLUX ? <ParamGuidance /> : <ParamCFGScale />}
+              {isFLUX && <ParamGuidance />}
+              {isUpscaling && <ParamUpscaleCFGScale />}
+              {!isFLUX && !isUpscaling && <ParamCFGScale />}
             </FormControlGroup>
           </Flex>
         </Expander>

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

@@ -19,6 +19,7 @@ import {
   useDisclosure,
 } from '@invoke-ai/ui-library';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
+import { useClipboard } from 'common/hooks/useClipboard';
 import { discordLink, githubLink, websiteLink } from 'features/system/store/constants';
 import { map } from 'lodash-es';
 import InvokeLogoYellow from 'public/assets/images/invoke-tag-lrg.svg';
@@ -36,6 +37,7 @@ type AboutModalProps = {
 const AboutModal = ({ children }: AboutModalProps) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();
+  const clipboard = useClipboard();
   const { depsArray, depsObject } = useGetAppDepsQuery(undefined, {
     selectFromResult: ({ data }) => ({
       depsObject: data,
@@ -45,8 +47,8 @@ const AboutModal = ({ children }: AboutModalProps) => {
   const { data: appVersion } = useGetAppVersionQuery();
 
   const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(JSON.stringify(depsObject, null, 2));
-  }, [depsObject]);
+    clipboard.writeText(JSON.stringify(depsObject, null, 2));
+  }, [clipboard, depsObject]);
 
   return (
     <>

invokeai/frontend/web/src/features/system/util/copyBlobToClipboard.ts

@@ -1,10 +0,0 @@
-/**
- * Copies a blob to the clipboard by calling navigator.clipboard.write().
- */
-export const copyBlobToClipboard = (blob: Promise<Blob> | Blob, type = 'image/png') => {
-  navigator.clipboard.write([
-    new ClipboardItem({
-      [type]: blob,
-    }),
-  ]);
-};

invokeai/frontend/web/src/features/toast/ErrorToastDescription.tsx

@@ -1,23 +1,20 @@
 import { Flex, IconButton, Text } from '@invoke-ai/ui-library';
+import { useClipboard } from 'common/hooks/useClipboard';
 import { ExternalLink } from 'features/gallery/components/ImageViewer/NoContentForViewer';
+import { t } from 'i18next';
 import { useCallback, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { PiCopyBold } from 'react-icons/pi';
 
-type Props = { errorType: string; errorMessage?: string | null; sessionId: string; isLocal: boolean };
+type DescriptionProps = { errorType: string; errorMessage?: string | null; sessionId: string; isLocal: boolean };
 
-export const ErrorToastTitle = ({ errorType }: Props) => {
-  const { t } = useTranslation();
-
-  if (errorType === 'OutOfMemoryError') {
-    return t('toast.outOfMemoryError');
-  }
-
-  return t('toast.serverError');
+export const getTitle = (errorType: string) => {
+  return errorType === 'OutOfMemoryError' ? t('toast.outOfMemoryError') : t('toast.serverError');
 };
 
-export default function ErrorToastDescription({ errorType, isLocal, sessionId, errorMessage }: Props) {
+export default function ErrorToastDescription({ errorType, isLocal, sessionId, errorMessage }: DescriptionProps) {
   const { t } = useTranslation();
+  const clipboard = useClipboard();
 
   const description = useMemo(() => {
     if (errorType === 'OutOfMemoryError') {
@@ -38,7 +35,7 @@ export default function ErrorToastDescription({ errorType, isLocal, sessionId, e
     }
   }, [errorMessage, errorType, isLocal, t]);
 
-  const copySessionId = useCallback(() => navigator.clipboard.writeText(sessionId), [sessionId]);
+  const copySessionId = useCallback(() => clipboard.writeText(sessionId), [sessionId, clipboard]);
 
   return (
     <Flex flexDir="column">

invokeai/frontend/web/src/services/events/setEventListeners.tsx

@@ -8,7 +8,7 @@ import type { AppStore } from 'app/store/store';
 import { deepClone } from 'common/util/deepClone';
 import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState';
 import { zNodeStatus } from 'features/nodes/types/invocation';
-import ErrorToastDescription, { ErrorToastTitle } from 'features/toast/ErrorToastDescription';
+import ErrorToastDescription, { getTitle } from 'features/toast/ErrorToastDescription';
 import { toast } from 'features/toast/toast';
 import { t } from 'i18next';
 import { forEach, isNil, round } from 'lodash-es';
@@ -400,14 +400,7 @@ export const setEventListeners = ({ socket, store, setIsConnected }: SetEventLis
 
       toast({
         id: `INVOCATION_ERROR_${error_type}`,
-        title: (
-          <ErrorToastTitle
-            errorType={error_type}
-            errorMessage={error_message}
-            sessionId={sessionId}
-            isLocal={isLocal}
-          />
-        ),
+        title: getTitle(error_type),
         status: 'error',
         duration: null,
         updateDescription: isLocal,

invokeai/version/invokeai_version.py

@@ -1 +1 @@
-__version__ = "5.6.1rc1"
+__version__ = "5.6.2"