chore: bump version to v6.4.0

Currently translated at 100.0% (2073 of 2073 strings)

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

.github/workflows/build-container.yml

@@ -45,6 +45,9 @@ jobs:
     steps:
       - name: Free up more disk space on the runner
         # https://github.com/actions/runner-images/issues/2840#issuecomment-1284059930
+        # the /mnt dir has 70GBs of free space
+        # /dev/sda1        74G   28K   70G   1% /mnt
+        # According to some online posts the /mnt is not always there, so checking before setting docker to use it
         run: |
           echo "----- Free space before cleanup"
           df -h
@@ -52,6 +55,11 @@ jobs:
           sudo rm -rf "$AGENT_TOOLSDIRECTORY"
           sudo swapoff /mnt/swapfile
           sudo rm -rf /mnt/swapfile
+          if [ -d /mnt ]; then
+            sudo chmod -R 777 /mnt
+            echo '{"data-root": "/mnt/docker-root"}' | sudo tee /etc/docker/daemon.json
+            sudo systemctl restart docker
+          fi
           echo "----- Free space after cleanup"
           df -h
 

.github/workflows/typegen-checks.yml

@@ -39,6 +39,18 @@ jobs:
       - name: checkout
         uses: actions/checkout@v4
 
+      - name: Free up more disk space on the runner
+        # https://github.com/actions/runner-images/issues/2840#issuecomment-1284059930
+        run: |
+          echo "----- Free space before cleanup"
+          df -h
+          sudo rm -rf /usr/share/dotnet
+          sudo rm -rf "$AGENT_TOOLSDIRECTORY"
+          sudo swapoff /mnt/swapfile
+          sudo rm -rf /mnt/swapfile
+          echo "----- Free space after cleanup"
+          df -h
+
       - name: check for changed files
         if: ${{ inputs.always_run != true }}
         id: changed-files

docker/.env.sample

@@ -22,6 +22,10 @@
 ## GPU_DRIVER can be set to either `cuda` or `rocm` to enable GPU support in the container accordingly.
 # GPU_DRIVER=cuda #| rocm
 
+## If you are using ROCM, you will need to ensure that the render group within the container and the host system use the same group ID.
+## To obtain the group ID of the render group on the host system, run `getent group render` and grab the number.
+# RENDER_GROUP_ID=
+
 ## CONTAINER_UID can be set to the UID of the user on the host system that should own the files in the container.
 ## It is usually not necessary to change this. Use `id -u` on the host system to find the UID.
 # CONTAINER_UID=1000

docker/Dockerfile

@@ -43,7 +43,6 @@ ENV \
     UV_MANAGED_PYTHON=1 \
     UV_LINK_MODE=copy \
     UV_PROJECT_ENVIRONMENT=/opt/venv \
-    UV_INDEX="https://download.pytorch.org/whl/cu124" \
     INVOKEAI_ROOT=/invokeai \
     INVOKEAI_HOST=0.0.0.0 \
     INVOKEAI_PORT=9090 \
@@ -74,19 +73,17 @@ RUN --mount=type=cache,target=/root/.cache/uv \
     --mount=type=bind,source=uv.lock,target=uv.lock \
     # this is just to get the package manager to recognize that the project exists, without making changes to the docker layer
     --mount=type=bind,source=invokeai/version,target=invokeai/version \
-    if [ "$TARGETPLATFORM" = "linux/arm64" ] || [ "$GPU_DRIVER" = "cpu" ]; then UV_INDEX="https://download.pytorch.org/whl/cpu"; \
-    elif [ "$GPU_DRIVER" = "rocm" ]; then UV_INDEX="https://download.pytorch.org/whl/rocm6.2"; \
-    fi && \
-    uv sync --frozen
-
-# build patchmatch
-RUN cd /usr/lib/$(uname -p)-linux-gnu/pkgconfig/ && ln -sf opencv4.pc opencv.pc
-RUN python -c "from patchmatch import patch_match"
+    ulimit -n 30000 && \
+    uv sync --extra $GPU_DRIVER --frozen
 
 # Link amdgpu.ids for ROCm builds
 # contributed by https://github.com/Rubonnek
 RUN mkdir -p "/opt/amdgpu/share/libdrm" &&\
-    ln -s "/usr/share/libdrm/amdgpu.ids" "/opt/amdgpu/share/libdrm/amdgpu.ids"
+    ln -s "/usr/share/libdrm/amdgpu.ids" "/opt/amdgpu/share/libdrm/amdgpu.ids" && groupadd render
+
+# build patchmatch
+RUN cd /usr/lib/$(uname -p)-linux-gnu/pkgconfig/ && ln -sf opencv4.pc opencv.pc
+RUN python -c "from patchmatch import patch_match"
 
 RUN mkdir -p ${INVOKEAI_ROOT} && chown -R ${CONTAINER_UID}:${CONTAINER_GID} ${INVOKEAI_ROOT}
 
@@ -105,8 +102,6 @@ COPY invokeai ${INVOKEAI_SRC}/invokeai
 RUN --mount=type=cache,target=/root/.cache/uv \
     --mount=type=bind,source=pyproject.toml,target=pyproject.toml \
     --mount=type=bind,source=uv.lock,target=uv.lock \
-    if [ "$TARGETPLATFORM" = "linux/arm64" ] || [ "$GPU_DRIVER" = "cpu" ]; then UV_INDEX="https://download.pytorch.org/whl/cpu"; \
-    elif [ "$GPU_DRIVER" = "rocm" ]; then UV_INDEX="https://download.pytorch.org/whl/rocm6.2"; \
-    fi && \
-    uv pip install -e .
+    ulimit -n 30000 && \
+    uv pip install -e .[$GPU_DRIVER]
 

docker/Dockerfile-rocm-full

@@ -0,0 +1,136 @@
+# syntax=docker/dockerfile:1.4
+
+#### Web UI ------------------------------------
+
+FROM docker.io/node:22-slim AS web-builder
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack use pnpm@8.x
+RUN corepack enable
+
+WORKDIR /build
+COPY invokeai/frontend/web/ ./
+RUN --mount=type=cache,target=/pnpm/store \
+    pnpm install --frozen-lockfile
+RUN npx vite build
+
+## Backend ---------------------------------------
+
+FROM library/ubuntu:24.04
+
+ARG DEBIAN_FRONTEND=noninteractive
+RUN rm -f /etc/apt/apt.conf.d/docker-clean; echo 'Binary::apt::APT::Keep-Downloaded-Packages "true";' > /etc/apt/apt.conf.d/keep-cache
+RUN --mount=type=cache,target=/var/cache/apt \
+    --mount=type=cache,target=/var/lib/apt \
+    apt update && apt install -y --no-install-recommends \
+    ca-certificates \
+    git \
+    gosu \
+    libglib2.0-0 \
+    libgl1 \
+    libglx-mesa0 \
+    build-essential \
+    libopencv-dev \
+    libstdc++-10-dev \
+    wget
+
+ENV \
+    PYTHONUNBUFFERED=1 \
+    PYTHONDONTWRITEBYTECODE=1 \
+    VIRTUAL_ENV=/opt/venv \
+    INVOKEAI_SRC=/opt/invokeai \
+    PYTHON_VERSION=3.12 \
+    UV_PYTHON=3.12 \
+    UV_COMPILE_BYTECODE=1 \
+    UV_MANAGED_PYTHON=1 \
+    UV_LINK_MODE=copy \
+    UV_PROJECT_ENVIRONMENT=/opt/venv \
+    INVOKEAI_ROOT=/invokeai \
+    INVOKEAI_HOST=0.0.0.0 \
+    INVOKEAI_PORT=9090 \
+    PATH="/opt/venv/bin:$PATH" \
+    CONTAINER_UID=${CONTAINER_UID:-1000} \
+    CONTAINER_GID=${CONTAINER_GID:-1000}
+
+ARG GPU_DRIVER=cuda
+
+# Install `uv` for package management
+COPY --from=ghcr.io/astral-sh/uv:0.6.9 /uv /uvx /bin/
+
+# Install python & allow non-root user to use it by traversing the /root dir without read permissions
+RUN --mount=type=cache,target=/root/.cache/uv \
+    uv python install ${PYTHON_VERSION} && \
+    # chmod --recursive a+rX /root/.local/share/uv/python
+    chmod 711 /root
+
+WORKDIR ${INVOKEAI_SRC}
+
+# Install project's dependencies as a separate layer so they aren't rebuilt every commit.
+# bind-mount instead of copy to defer adding sources to the image until next layer.
+#
+# NOTE: there are no pytorch builds for arm64 + cuda, only cpu
+# x86_64/CUDA is the default
+RUN --mount=type=cache,target=/root/.cache/uv \
+    --mount=type=bind,source=pyproject.toml,target=pyproject.toml \
+    --mount=type=bind,source=uv.lock,target=uv.lock \
+    # this is just to get the package manager to recognize that the project exists, without making changes to the docker layer
+    --mount=type=bind,source=invokeai/version,target=invokeai/version \
+    ulimit -n 30000 && \
+    uv sync --extra $GPU_DRIVER --frozen
+
+RUN --mount=type=cache,target=/var/cache/apt \
+    --mount=type=cache,target=/var/lib/apt \
+    if [ "$GPU_DRIVER" = "rocm" ]; then \
+    wget -O /tmp/amdgpu-install.deb \
+    https://repo.radeon.com/amdgpu-install/6.3.4/ubuntu/noble/amdgpu-install_6.3.60304-1_all.deb && \
+    apt install -y /tmp/amdgpu-install.deb && \
+    apt update && \
+    amdgpu-install --usecase=rocm -y && \
+    apt-get autoclean && \
+    apt clean && \
+    rm -rf /tmp/* /var/tmp/* && \
+    usermod -a -G render ubuntu && \
+    usermod -a -G video ubuntu && \
+    echo "\\n/opt/rocm/lib\\n/opt/rocm/lib64" >> /etc/ld.so.conf.d/rocm.conf && \
+    ldconfig && \
+    update-alternatives --auto rocm; \
+    fi
+
+## Heathen711: Leaving this for review input, will remove before merge
+# RUN --mount=type=cache,target=/var/cache/apt \
+#     --mount=type=cache,target=/var/lib/apt \
+#     if [ "$GPU_DRIVER" = "rocm" ]; then \
+#     groupadd render && \
+#     usermod -a -G render ubuntu && \
+#     usermod -a -G video ubuntu; \
+#     fi
+
+## Link amdgpu.ids for ROCm builds
+## contributed by https://github.com/Rubonnek
+# RUN mkdir -p "/opt/amdgpu/share/libdrm" &&\
+#     ln -s "/usr/share/libdrm/amdgpu.ids" "/opt/amdgpu/share/libdrm/amdgpu.ids"
+
+# build patchmatch
+RUN cd /usr/lib/$(uname -p)-linux-gnu/pkgconfig/ && ln -sf opencv4.pc opencv.pc
+RUN python -c "from patchmatch import patch_match"
+
+RUN mkdir -p ${INVOKEAI_ROOT} && chown -R ${CONTAINER_UID}:${CONTAINER_GID} ${INVOKEAI_ROOT}
+
+COPY docker/docker-entrypoint.sh ./
+ENTRYPOINT ["/opt/invokeai/docker-entrypoint.sh"]
+CMD ["invokeai-web"]
+
+# --link requires buldkit w/ dockerfile syntax 1.4, does not work with podman
+COPY --link --from=web-builder /build/dist ${INVOKEAI_SRC}/invokeai/frontend/web/dist
+
+# add sources last to minimize image changes on code changes
+COPY invokeai ${INVOKEAI_SRC}/invokeai
+
+# this should not increase image size because we've already installed dependencies
+# in a previous layer
+RUN --mount=type=cache,target=/root/.cache/uv \
+    --mount=type=bind,source=pyproject.toml,target=pyproject.toml \
+    --mount=type=bind,source=uv.lock,target=uv.lock \
+    ulimit -n 30000 && \
+    uv pip install -e .[$GPU_DRIVER]
+

docker/docker-compose.yml

@@ -47,8 +47,9 @@ services:
 
   invokeai-rocm:
     <<: *invokeai
-    devices:
-      - /dev/kfd:/dev/kfd
-      - /dev/dri:/dev/dri
+    environment:
+      - AMD_VISIBLE_DEVICES=all
+      - RENDER_GROUP_ID=${RENDER_GROUP_ID}
+    runtime: amd
     profiles:
       - rocm

docker/docker-entrypoint.sh

@@ -21,6 +21,17 @@ _=$(id ${USER} 2>&1) || useradd -u ${USER_ID} ${USER}
 # ensure the UID is correct
 usermod -u ${USER_ID} ${USER} 1>/dev/null
 
+## ROCM specific configuration
+# render group within the container must match the host render group
+# otherwise the container will not be able to access the host GPU.
+if [[ -v "RENDER_GROUP_ID" ]] && [[ ! -z "${RENDER_GROUP_ID}" ]]; then
+  # ensure the render group exists
+  groupmod -g ${RENDER_GROUP_ID} render
+  usermod -a -G render ${USER}
+  usermod -a -G video ${USER}
+fi
+
+
 ### Set the $PUBLIC_KEY env var to enable SSH access.
 # We do not install openssh-server in the image by default to avoid bloat.
 # but it is useful to have the full SSH server e.g. on Runpod.

docker/run.sh

@@ -13,7 +13,7 @@ run() {
 
   # parse .env file for build args
   build_args=$(awk '$1 ~ /=[^$]/ && $0 !~ /^#/ {print "--build-arg " $0 " "}' .env) &&
-  profile="$(awk -F '=' '/GPU_DRIVER/ {print $2}' .env)"
+  profile="$(awk -F '=' '/GPU_DRIVER=/ {print $2}' .env)"
 
   # default to 'cuda' profile
   [[ -z "$profile" ]] && profile="cuda"
@@ -30,7 +30,7 @@ run() {
 
   printf "%s\n" "starting service $service_name"
   docker compose --profile "$profile" up -d "$service_name"
-  docker compose logs -f
+  docker compose --profile "$profile" logs -f
 }
 
 run

docs/contributing/MODEL_MANAGER.md

@@ -265,7 +265,7 @@ If the key is unrecognized, this call raises an
 
 #### exists(key) -> AnyModelConfig
 
-Returns True if a model with the given key exists in the databsae.
+Returns True if a model with the given key exists in the database.
 
 #### search_by_path(path) -> AnyModelConfig
 
@@ -718,7 +718,7 @@ When downloading remote models is implemented, additional
 configuration information, such as list of trigger terms, will be
 retrieved from the HuggingFace and Civitai model repositories.
 
-The probed values can be overriden by providing a dictionary in the
+The probed values can be overridden by providing a dictionary in the
 optional `config` argument passed to `import_model()`. You may provide
 overriding values for any of the model's configuration
 attributes. Here is an example of setting the
@@ -841,7 +841,7 @@ variable.
 
 #### installer.start(invoker)
 
-The `start` method is called by the API intialization routines when
+The `start` method is called by the API initialization routines when
 the API starts up. Its effect is to call `sync_to_config()` to
 synchronize the model record store database with what's currently on
 disk.

docs/contributing/contributors.md

@@ -16,7 +16,7 @@ We thank [all contributors](https://github.com/invoke-ai/InvokeAI/graphs/contrib
 - @psychedelicious (Spencer Mabrito) - Web Team Leader
 - @joshistoast (Josh Corbett) - Web Development
 - @cheerio (Mary Rogers) - Lead Engineer & Web App Development
-- @ebr (Eugene Brodsky) - Cloud/DevOps/Sofware engineer; your friendly neighbourhood cluster-autoscaler
+- @ebr (Eugene Brodsky) - Cloud/DevOps/Software engineer; your friendly neighbourhood cluster-autoscaler
 - @sunija - Standalone version
 - @brandon (Brandon Rising) - Platform, Infrastructure, Backend Systems
 - @ryanjdick (Ryan Dick) - Machine Learning & Training

docs/installation/manual.md

@@ -69,34 +69,34 @@ The following commands vary depending on the version of Invoke being installed a
     - If you have an Nvidia 20xx series GPU or older, use `invokeai[xformers]`.
     - If you have an Nvidia 30xx series GPU or newer, or do not have an Nvidia GPU, use `invokeai`.
 
-7. Determine the `PyPI` index URL to use for installation, if any. This is necessary to get the right version of torch installed.
+7. Determine the torch backend to use for installation, if any. This is necessary to get the right version of torch installed. This is acheived by using [UV's built in torch support.](https://docs.astral.sh/uv/guides/integration/pytorch/#automatic-backend-selection)
 
     === "Invoke v5.12 and later"
 
-        - If you are on Windows or Linux with an Nvidia GPU, use `https://download.pytorch.org/whl/cu128`.
-        - If you are on Linux with no GPU, use `https://download.pytorch.org/whl/cpu`.
-        - If you are on Linux with an AMD GPU, use `https://download.pytorch.org/whl/rocm6.2.4`.
-        - **In all other cases, do not use an index.**
+        - If you are on Windows or Linux with an Nvidia GPU, use `--torch-backend=cu128`.
+        - If you are on Linux with no GPU, use `--torch-backend=cpu`.
+        - If you are on Linux with an AMD GPU, use `--torch-backend=rocm6.3`.
+        - **In all other cases, do not use a torch backend.**
 
     === "Invoke v5.10.0 to v5.11.0"
 
-        - If you are on Windows or Linux with an Nvidia GPU, use `https://download.pytorch.org/whl/cu126`.
-        - If you are on Linux with no GPU, use `https://download.pytorch.org/whl/cpu`.
-        - If you are on Linux with an AMD GPU, use `https://download.pytorch.org/whl/rocm6.2.4`.
+        - If you are on Windows or Linux with an Nvidia GPU, use `--torch-backend=cu126`.
+        - If you are on Linux with no GPU, use `--torch-backend=cpu`.
+        - If you are on Linux with an AMD GPU, use `--torch-backend=rocm6.2.4`.
         - **In all other cases, do not use an index.**
 
     === "Invoke v5.0.0 to v5.9.1"
 
-        - If you are on Windows with an Nvidia GPU, use `https://download.pytorch.org/whl/cu124`.
-        - If you are on Linux with no GPU, use `https://download.pytorch.org/whl/cpu`.
-        - If you are on Linux with an AMD GPU, use `https://download.pytorch.org/whl/rocm6.1`.
+        - If you are on Windows with an Nvidia GPU, use `--torch-backend=cu124`.
+        - If you are on Linux with no GPU, use `--torch-backend=cpu`.
+        - If you are on Linux with an AMD GPU, use `--torch-backend=rocm6.1`.
         - **In all other cases, do not use an index.**
 
     === "Invoke v4"
 
-        - If you are on Windows with an Nvidia GPU, use `https://download.pytorch.org/whl/cu124`.
-        - If you are on Linux with no GPU, use `https://download.pytorch.org/whl/cpu`.
-        - If you are on Linux with an AMD GPU, use `https://download.pytorch.org/whl/rocm5.2`.
+        - If you are on Windows with an Nvidia GPU, use `--torch-backend=cu124`.
+        - If you are on Linux with no GPU, use `--torch-backend=cpu`.
+        - If you are on Linux with an AMD GPU, use `--torch-backend=rocm5.2`.
         - **In all other cases, do not use an index.**
 
 8. Install the `invokeai` package. Substitute the package specifier and version.
@@ -105,10 +105,10 @@ The following commands vary depending on the version of Invoke being installed a
     uv pip install <PACKAGE_SPECIFIER>==<VERSION> --python 3.12 --python-preference only-managed --force-reinstall
     ```
 
-    If you determined you needed to use a `PyPI` index URL in the previous step, you'll need to add `--index=<INDEX_URL>` like this:
+    If you determined you needed to use a torch backend in the previous step, you'll need to set the backend like this:
 
     ```sh
-    uv pip install <PACKAGE_SPECIFIER>==<VERSION> --python 3.12 --python-preference only-managed --index=<INDEX_URL> --force-reinstall
+    uv pip install <PACKAGE_SPECIFIER>==<VERSION> --python 3.12 --python-preference only-managed --torch-backend=<VERSION> --force-reinstall
     ```
 
 9. Deactivate and reactivate your venv so that the invokeai-specific commands become available in the environment:

docs/nodes/NODES.md

@@ -41,7 +41,7 @@ Nodes have a "Use Cache" option in their footer. This allows for performance imp
 
 There are several node grouping concepts that can be examined with a narrow focus. These (and other) groupings can be pieced together to make up functional graph setups, and are important to understanding how groups of nodes work together as part of a whole. Note that the screenshots below aren't examples of complete functioning node graphs (see Examples).
 
-### Noise
+### Create Latent Noise
 
 An initial noise tensor is necessary for the latent diffusion process. As a result, the Denoising node requires a noise node input.  
 

invokeai/app/api/routers/app_info.py

@@ -5,9 +5,9 @@ from pathlib import Path
 from typing import Optional
 
 import torch
-from fastapi import Body, HTTPException, Query
+from fastapi import Body
 from fastapi.routing import APIRouter
-from pydantic import BaseModel, Field, JsonValue
+from pydantic import BaseModel, Field
 
 from invokeai.app.api.dependencies import ApiDependencies
 from invokeai.app.invocations.upscale import ESRGAN_MODELS
@@ -173,50 +173,3 @@ async def disable_invocation_cache() -> None:
 async def get_invocation_cache_status() -> InvocationCacheStatus:
     """Clears the invocation cache"""
     return ApiDependencies.invoker.services.invocation_cache.get_status()
-
-
-@app_router.get(
-    "/client_state",
-    operation_id="get_client_state_by_key",
-    response_model=JsonValue | None,
-)
-async def get_client_state_by_key(
-    key: str = Query(..., description="Key to get"),
-) -> JsonValue | None:
-    """Gets the client state"""
-    try:
-        return ApiDependencies.invoker.services.client_state_persistence.get_by_key(key)
-    except Exception as e:
-        logging.error(f"Error getting client state: {e}")
-        raise HTTPException(status_code=500, detail="Error setting client state")
-
-
-@app_router.post(
-    "/client_state",
-    operation_id="set_client_state",
-    response_model=None,
-)
-async def set_client_state(
-    key: str = Query(..., description="Key to set"),
-    value: JsonValue = Body(..., description="Value of the key"),
-) -> None:
-    """Sets the client state"""
-    try:
-        ApiDependencies.invoker.services.client_state_persistence.set_by_key(key, value)
-    except Exception as e:
-        logging.error(f"Error setting client state: {e}")
-        raise HTTPException(status_code=500, detail="Error setting client state")
-
-
-@app_router.delete(
-    "/client_state",
-    operation_id="delete_client_state",
-    responses={204: {"description": "Client state deleted"}},
-)
-async def delete_client_state() -> None:
-    """Deletes the client state"""
-    try:
-        ApiDependencies.invoker.services.client_state_persistence.delete()
-    except Exception as e:
-        logging.error(f"Error deleting client state: {e}")
-        raise HTTPException(status_code=500, detail="Error deleting client state")

invokeai/app/api/routers/client_state.py

@@ -0,0 +1,58 @@
+from fastapi import Body, HTTPException, Path, Query
+from fastapi.routing import APIRouter
+
+from invokeai.app.api.dependencies import ApiDependencies
+from invokeai.backend.util.logging import logging
+
+client_state_router = APIRouter(prefix="/v1/client_state", tags=["client_state"])
+
+
+@client_state_router.get(
+    "/{queue_id}/get_by_key",
+    operation_id="get_client_state_by_key",
+    response_model=str | None,
+)
+async def get_client_state_by_key(
+    queue_id: str = Path(description="The queue id to perform this operation on"),
+    key: str = Query(..., description="Key to get"),
+) -> str | None:
+    """Gets the client state"""
+    try:
+        return ApiDependencies.invoker.services.client_state_persistence.get_by_key(queue_id, key)
+    except Exception as e:
+        logging.error(f"Error getting client state: {e}")
+        raise HTTPException(status_code=500, detail="Error setting client state")
+
+
+@client_state_router.post(
+    "/{queue_id}/set_by_key",
+    operation_id="set_client_state",
+    response_model=str,
+)
+async def set_client_state(
+    queue_id: str = Path(description="The queue id to perform this operation on"),
+    key: str = Query(..., description="Key to set"),
+    value: str = Body(..., description="Stringified value to set"),
+) -> str:
+    """Sets the client state"""
+    try:
+        return ApiDependencies.invoker.services.client_state_persistence.set_by_key(queue_id, key, value)
+    except Exception as e:
+        logging.error(f"Error setting client state: {e}")
+        raise HTTPException(status_code=500, detail="Error setting client state")
+
+
+@client_state_router.post(
+    "/{queue_id}/delete",
+    operation_id="delete_client_state",
+    responses={204: {"description": "Client state deleted"}},
+)
+async def delete_client_state(
+    queue_id: str = Path(description="The queue id to perform this operation on"),
+) -> None:
+    """Deletes the client state"""
+    try:
+        ApiDependencies.invoker.services.client_state_persistence.delete(queue_id)
+    except Exception as e:
+        logging.error(f"Error deleting client state: {e}")
+        raise HTTPException(status_code=500, detail="Error deleting client state")

invokeai/app/api_app.py

@@ -19,6 +19,7 @@ from invokeai.app.api.routers import (
     app_info,
     board_images,
     boards,
+    client_state,
     download_queue,
     images,
     model_manager,
@@ -131,6 +132,7 @@ app.include_router(app_info.app_router, prefix="/api")
 app.include_router(session_queue.session_queue_router, prefix="/api")
 app.include_router(workflows.workflows_router, prefix="/api")
 app.include_router(style_presets.style_presets_router, prefix="/api")
+app.include_router(client_state.client_state_router, prefix="/api")
 
 app.openapi = get_openapi_func(app)
 
@@ -155,6 +157,12 @@ def overridden_redoc() -> HTMLResponse:
 
 web_root_path = Path(list(web_dir.__path__)[0])
 
+if app_config.unsafe_disable_picklescan:
+    logger.warning(
+        "The unsafe_disable_picklescan option is enabled. This disables malware scanning while installing and"
+        "loading models, which may allow malicious code to be executed. Use at your own risk."
+    )
+
 try:
     app.mount("/", NoCacheStaticFiles(directory=Path(web_root_path, "dist"), html=True), name="ui")
 except RuntimeError:

invokeai/app/invocations/cogview4_image_to_latents.py

@@ -17,6 +17,7 @@ from invokeai.app.services.shared.invocation_context import InvocationContext
 from invokeai.backend.model_manager.load.load_base import LoadedModel
 from invokeai.backend.stable_diffusion.diffusers_pipeline import image_resized_to_grid_as_tensor
 from invokeai.backend.util.devices import TorchDevice
+from invokeai.backend.util.vae_working_memory import estimate_vae_working_memory_cogview4
 
 # TODO(ryand): This is effectively a copy of SD3ImageToLatentsInvocation and a subset of ImageToLatentsInvocation. We
 # should refactor to avoid this duplication.
@@ -38,7 +39,11 @@ class CogView4ImageToLatentsInvocation(BaseInvocation, WithMetadata, WithBoard):
 
     @staticmethod
     def vae_encode(vae_info: LoadedModel, image_tensor: torch.Tensor) -> torch.Tensor:
-        with vae_info as vae:
+        assert isinstance(vae_info.model, AutoencoderKL)
+        estimated_working_memory = estimate_vae_working_memory_cogview4(
+            operation="encode", image_tensor=image_tensor, vae=vae_info.model
+        )
+        with vae_info.model_on_device(working_mem_bytes=estimated_working_memory) as (_, vae):
             assert isinstance(vae, AutoencoderKL)
 
             vae.disable_tiling()
@@ -62,6 +67,8 @@ class CogView4ImageToLatentsInvocation(BaseInvocation, WithMetadata, WithBoard):
             image_tensor = einops.rearrange(image_tensor, "c h w -> 1 c h w")
 
         vae_info = context.models.load(self.vae.vae)
+        assert isinstance(vae_info.model, AutoencoderKL)
+
         latents = self.vae_encode(vae_info=vae_info, image_tensor=image_tensor)
 
         latents = latents.to("cpu")

invokeai/app/invocations/cogview4_latents_to_image.py

@@ -6,7 +6,6 @@ from einops import rearrange
 from PIL import Image
 
 from invokeai.app.invocations.baseinvocation import BaseInvocation, Classification, invocation
-from invokeai.app.invocations.constants import LATENT_SCALE_FACTOR
 from invokeai.app.invocations.fields import (
     FieldDescriptions,
     Input,
@@ -20,6 +19,7 @@ from invokeai.app.invocations.primitives import ImageOutput
 from invokeai.app.services.shared.invocation_context import InvocationContext
 from invokeai.backend.stable_diffusion.extensions.seamless import SeamlessExt
 from invokeai.backend.util.devices import TorchDevice
+from invokeai.backend.util.vae_working_memory import estimate_vae_working_memory_cogview4
 
 # TODO(ryand): This is effectively a copy of SD3LatentsToImageInvocation and a subset of LatentsToImageInvocation. We
 # should refactor to avoid this duplication.
@@ -39,22 +39,15 @@ class CogView4LatentsToImageInvocation(BaseInvocation, WithMetadata, WithBoard):
     latents: LatentsField = InputField(description=FieldDescriptions.latents, input=Input.Connection)
     vae: VAEField = InputField(description=FieldDescriptions.vae, input=Input.Connection)
 
-    def _estimate_working_memory(self, latents: torch.Tensor, vae: AutoencoderKL) -> int:
-        """Estimate the working memory required by the invocation in bytes."""
-        out_h = LATENT_SCALE_FACTOR * latents.shape[-2]
-        out_w = LATENT_SCALE_FACTOR * latents.shape[-1]
-        element_size = next(vae.parameters()).element_size()
-        scaling_constant = 2200  # Determined experimentally.
-        working_memory = out_h * out_w * element_size * scaling_constant
-        return int(working_memory)
-
     @torch.no_grad()
     def invoke(self, context: InvocationContext) -> ImageOutput:
         latents = context.tensors.load(self.latents.latents_name)
 
         vae_info = context.models.load(self.vae.vae)
         assert isinstance(vae_info.model, (AutoencoderKL))
-        estimated_working_memory = self._estimate_working_memory(latents, vae_info.model)
+        estimated_working_memory = estimate_vae_working_memory_cogview4(
+            operation="decode", image_tensor=latents, vae=vae_info.model
+        )
         with (
             SeamlessExt.static_patch_model(vae_info.model, self.vae.seamless_axes),
             vae_info.model_on_device(working_mem_bytes=estimated_working_memory) as (_, vae),

invokeai/app/invocations/flux_denoise.py

@@ -63,7 +63,7 @@ from invokeai.backend.util.devices import TorchDevice
     title="FLUX Denoise",
     tags=["image", "flux"],
     category="image",
-    version="4.0.0",
+    version="4.1.0",
 )
 class FluxDenoiseInvocation(BaseInvocation):
     """Run denoising process with a FLUX transformer model."""
@@ -153,7 +153,7 @@ class FluxDenoiseInvocation(BaseInvocation):
         description=FieldDescriptions.ip_adapter, title="IP-Adapter", default=None, input=Input.Connection
     )
 
-    kontext_conditioning: Optional[FluxKontextConditioningField] = InputField(
+    kontext_conditioning: FluxKontextConditioningField | list[FluxKontextConditioningField] | None = InputField(
         default=None,
         description="FLUX Kontext conditioning (reference image).",
         input=Input.Connection,
@@ -328,6 +328,21 @@ class FluxDenoiseInvocation(BaseInvocation):
             cfg_scale_end_step=self.cfg_scale_end_step,
         )
 
+        kontext_extension = None
+        if self.kontext_conditioning:
+            if not self.controlnet_vae:
+                raise ValueError("A VAE (e.g., controlnet_vae) must be provided to use Kontext conditioning.")
+
+            kontext_extension = KontextExtension(
+                context=context,
+                kontext_conditioning=self.kontext_conditioning
+                if isinstance(self.kontext_conditioning, list)
+                else [self.kontext_conditioning],
+                vae_field=self.controlnet_vae,
+                device=TorchDevice.choose_torch_device(),
+                dtype=inference_dtype,
+            )
+
         with ExitStack() as exit_stack:
             # Prepare ControlNet extensions.
             # Note: We do this before loading the transformer model to minimize peak memory (see implementation).
@@ -385,19 +400,6 @@ class FluxDenoiseInvocation(BaseInvocation):
                 dtype=inference_dtype,
             )
 
-            kontext_extension = None
-            if self.kontext_conditioning is not None:
-                if not self.controlnet_vae:
-                    raise ValueError("A VAE (e.g., controlnet_vae) must be provided to use Kontext conditioning.")
-
-                kontext_extension = KontextExtension(
-                    context=context,
-                    kontext_conditioning=self.kontext_conditioning,
-                    vae_field=self.controlnet_vae,
-                    device=TorchDevice.choose_torch_device(),
-                    dtype=inference_dtype,
-                )
-
             # Prepare Kontext conditioning if provided
             img_cond_seq = None
             img_cond_seq_ids = None

invokeai/app/invocations/flux_vae_decode.py

@@ -3,7 +3,6 @@ from einops import rearrange
 from PIL import Image
 
 from invokeai.app.invocations.baseinvocation import BaseInvocation, invocation
-from invokeai.app.invocations.constants import LATENT_SCALE_FACTOR
 from invokeai.app.invocations.fields import (
     FieldDescriptions,
     Input,
@@ -18,6 +17,7 @@ from invokeai.app.services.shared.invocation_context import InvocationContext
 from invokeai.backend.flux.modules.autoencoder import AutoEncoder
 from invokeai.backend.model_manager.load.load_base import LoadedModel
 from invokeai.backend.util.devices import TorchDevice
+from invokeai.backend.util.vae_working_memory import estimate_vae_working_memory_flux
 
 
 @invocation(
@@ -39,17 +39,11 @@ class FluxVaeDecodeInvocation(BaseInvocation, WithMetadata, WithBoard):
         input=Input.Connection,
     )
 
-    def _estimate_working_memory(self, latents: torch.Tensor, vae: AutoEncoder) -> int:
-        """Estimate the working memory required by the invocation in bytes."""
-        out_h = LATENT_SCALE_FACTOR * latents.shape[-2]
-        out_w = LATENT_SCALE_FACTOR * latents.shape[-1]
-        element_size = next(vae.parameters()).element_size()
-        scaling_constant = 2200  # Determined experimentally.
-        working_memory = out_h * out_w * element_size * scaling_constant
-        return int(working_memory)
-
     def _vae_decode(self, vae_info: LoadedModel, latents: torch.Tensor) -> Image.Image:
-        estimated_working_memory = self._estimate_working_memory(latents, vae_info.model)
+        assert isinstance(vae_info.model, AutoEncoder)
+        estimated_working_memory = estimate_vae_working_memory_flux(
+            operation="decode", image_tensor=latents, vae=vae_info.model
+        )
         with vae_info.model_on_device(working_mem_bytes=estimated_working_memory) as (_, vae):
             assert isinstance(vae, AutoEncoder)
             vae_dtype = next(iter(vae.parameters())).dtype

invokeai/app/invocations/flux_vae_encode.py

@@ -15,6 +15,7 @@ from invokeai.backend.flux.modules.autoencoder import AutoEncoder
 from invokeai.backend.model_manager import LoadedModel
 from invokeai.backend.stable_diffusion.diffusers_pipeline import image_resized_to_grid_as_tensor
 from invokeai.backend.util.devices import TorchDevice
+from invokeai.backend.util.vae_working_memory import estimate_vae_working_memory_flux
 
 
 @invocation(
@@ -41,8 +42,12 @@ class FluxVaeEncodeInvocation(BaseInvocation):
         # TODO(ryand): Write a util function for generating random tensors that is consistent across devices / dtypes.
         # There's a starting point in get_noise(...), but it needs to be extracted and generalized. This function
         # should be used for VAE encode sampling.
+        assert isinstance(vae_info.model, AutoEncoder)
+        estimated_working_memory = estimate_vae_working_memory_flux(
+            operation="encode", image_tensor=image_tensor, vae=vae_info.model
+        )
         generator = torch.Generator(device=TorchDevice.choose_torch_device()).manual_seed(0)
-        with vae_info as vae:
+        with vae_info.model_on_device(working_mem_bytes=estimated_working_memory) as (_, vae):
             assert isinstance(vae, AutoEncoder)
             vae_dtype = next(iter(vae.parameters())).dtype
             image_tensor = image_tensor.to(device=TorchDevice.choose_torch_device(), dtype=vae_dtype)

invokeai/app/invocations/image.py

@@ -1347,3 +1347,96 @@ class PasteImageIntoBoundingBoxInvocation(BaseInvocation, WithMetadata, WithBoar
 
         image_dto = context.images.save(image=target_image)
         return ImageOutput.build(image_dto)
+
+
+@invocation(
+    "flux_kontext_image_prep",
+    title="FLUX Kontext Image Prep",
+    tags=["image", "concatenate", "flux", "kontext"],
+    category="image",
+    version="1.0.0",
+)
+class FluxKontextConcatenateImagesInvocation(BaseInvocation, WithMetadata, WithBoard):
+    """Prepares an image or images for use with FLUX Kontext. The first/single image is resized to the nearest
+    preferred Kontext resolution. All other images are concatenated horizontally, maintaining their aspect ratio."""
+
+    images: list[ImageField] = InputField(
+        description="The images to concatenate",
+        min_length=1,
+        max_length=10,
+    )
+
+    use_preferred_resolution: bool = InputField(
+        default=True, description="Use FLUX preferred resolutions for the first image"
+    )
+
+    def invoke(self, context: InvocationContext) -> ImageOutput:
+        from invokeai.backend.flux.util import PREFERED_KONTEXT_RESOLUTIONS
+
+        # Step 1: Load all images
+        pil_images = []
+        for image_field in self.images:
+            image = context.images.get_pil(image_field.image_name, mode="RGBA")
+            pil_images.append(image)
+
+        # Step 2: Determine target resolution for the first image
+        first_image = pil_images[0]
+        width, height = first_image.size
+
+        if self.use_preferred_resolution:
+            aspect_ratio = width / height
+
+            # Find the closest preferred resolution for the first image
+            _, target_width, target_height = min(
+                ((abs(aspect_ratio - w / h), w, h) for w, h in PREFERED_KONTEXT_RESOLUTIONS), key=lambda x: x[0]
+            )
+
+            # Apply BFL's scaling formula
+            scaled_height = 2 * int(target_height / 16)
+            final_height = 8 * scaled_height  # This will be consistent for all images
+            scaled_width = 2 * int(target_width / 16)
+            first_width = 8 * scaled_width
+        else:
+            # Use original dimensions of first image, ensuring divisibility by 16
+            final_height = 16 * (height // 16)
+            first_width = 16 * (width // 16)
+            # Ensure minimum dimensions
+            if final_height < 16:
+                final_height = 16
+            if first_width < 16:
+                first_width = 16
+
+        # Step 3: Process and resize all images with consistent height
+        processed_images = []
+        total_width = 0
+
+        for i, image in enumerate(pil_images):
+            if i == 0:
+                # First image uses the calculated dimensions
+                final_width = first_width
+            else:
+                # Subsequent images maintain aspect ratio with the same height
+                img_aspect_ratio = image.width / image.height
+                # Calculate width that maintains aspect ratio at the target height
+                calculated_width = int(final_height * img_aspect_ratio)
+                # Ensure width is divisible by 16 for proper VAE encoding
+                final_width = 16 * (calculated_width // 16)
+                # Ensure minimum width
+                if final_width < 16:
+                    final_width = 16
+
+            # Resize image to calculated dimensions
+            resized_image = image.resize((final_width, final_height), Image.Resampling.LANCZOS)
+            processed_images.append(resized_image)
+            total_width += final_width
+
+        # Step 4: Concatenate images horizontally
+        concatenated_image = Image.new("RGB", (total_width, final_height))
+        x_offset = 0
+        for img in processed_images:
+            concatenated_image.paste(img, (x_offset, 0))
+            x_offset += img.width
+
+        # Save the concatenated image
+        image_dto = context.images.save(image=concatenated_image)
+        return ImageOutput.build(image_dto)

invokeai/app/invocations/image_to_latents.py

@@ -27,6 +27,7 @@ from invokeai.backend.model_manager import LoadedModel
 from invokeai.backend.stable_diffusion.diffusers_pipeline import image_resized_to_grid_as_tensor
 from invokeai.backend.stable_diffusion.vae_tiling import patch_vae_tiling_params
 from invokeai.backend.util.devices import TorchDevice
+from invokeai.backend.util.vae_working_memory import estimate_vae_working_memory_sd15_sdxl
 
 
 @invocation(
@@ -52,11 +53,24 @@ class ImageToLatentsInvocation(BaseInvocation):
     tile_size: int = InputField(default=0, multiple_of=8, description=FieldDescriptions.vae_tile_size)
     fp32: bool = InputField(default=False, description=FieldDescriptions.fp32)
 
-    @staticmethod
+    @classmethod
     def vae_encode(
-        vae_info: LoadedModel, upcast: bool, tiled: bool, image_tensor: torch.Tensor, tile_size: int = 0
+        cls,
+        vae_info: LoadedModel,
+        upcast: bool,
+        tiled: bool,
+        image_tensor: torch.Tensor,
+        tile_size: int = 0,
     ) -> torch.Tensor:
-        with vae_info as vae:
+        assert isinstance(vae_info.model, (AutoencoderKL, AutoencoderTiny))
+        estimated_working_memory = estimate_vae_working_memory_sd15_sdxl(
+            operation="encode",
+            image_tensor=image_tensor,
+            vae=vae_info.model,
+            tile_size=tile_size if tiled else None,
+            fp32=upcast,
+        )
+        with vae_info.model_on_device(working_mem_bytes=estimated_working_memory) as (_, vae):
             assert isinstance(vae, (AutoencoderKL, AutoencoderTiny))
             orig_dtype = vae.dtype
             if upcast:
@@ -113,6 +127,7 @@ class ImageToLatentsInvocation(BaseInvocation):
         image = context.images.get_pil(self.image.image_name)
 
         vae_info = context.models.load(self.vae.vae)
+        assert isinstance(vae_info.model, (AutoencoderKL, AutoencoderTiny))
 
         image_tensor = image_resized_to_grid_as_tensor(image.convert("RGB"))
         if image_tensor.dim() == 3:
@@ -120,7 +135,11 @@ class ImageToLatentsInvocation(BaseInvocation):
 
         context.util.signal_progress("Running VAE encoder")
         latents = self.vae_encode(
-            vae_info=vae_info, upcast=self.fp32, tiled=self.tiled, image_tensor=image_tensor, tile_size=self.tile_size
+            vae_info=vae_info,
+            upcast=self.fp32,
+            tiled=self.tiled or context.config.get().force_tiled_decode,
+            image_tensor=image_tensor,
+            tile_size=self.tile_size,
         )
 
         latents = latents.to("cpu")

invokeai/app/invocations/latents_to_image.py

@@ -27,6 +27,7 @@ from invokeai.app.services.shared.invocation_context import InvocationContext
 from invokeai.backend.stable_diffusion.extensions.seamless import SeamlessExt
 from invokeai.backend.stable_diffusion.vae_tiling import patch_vae_tiling_params
 from invokeai.backend.util.devices import TorchDevice
+from invokeai.backend.util.vae_working_memory import estimate_vae_working_memory_sd15_sdxl
 
 
 @invocation(
@@ -53,39 +54,6 @@ class LatentsToImageInvocation(BaseInvocation, WithMetadata, WithBoard):
     tile_size: int = InputField(default=0, multiple_of=8, description=FieldDescriptions.vae_tile_size)
     fp32: bool = InputField(default=False, description=FieldDescriptions.fp32)
 
-    def _estimate_working_memory(
-        self, latents: torch.Tensor, use_tiling: bool, vae: AutoencoderKL | AutoencoderTiny
-    ) -> int:
-        """Estimate the working memory required by the invocation in bytes."""
-        # It was found experimentally that the peak working memory scales linearly with the number of pixels and the
-        # element size (precision). This estimate is accurate for both SD1 and SDXL.
-        element_size = 4 if self.fp32 else 2
-        scaling_constant = 2200  # Determined experimentally.
-
-        if use_tiling:
-            tile_size = self.tile_size
-            if tile_size == 0:
-                tile_size = vae.tile_sample_min_size
-                assert isinstance(tile_size, int)
-            out_h = tile_size
-            out_w = tile_size
-            working_memory = out_h * out_w * element_size * scaling_constant
-
-            # We add 25% to the working memory estimate when tiling is enabled to account for factors like tile overlap
-            # and number of tiles. We could make this more precise in the future, but this should be good enough for
-            # most use cases.
-            working_memory = working_memory * 1.25
-        else:
-            out_h = LATENT_SCALE_FACTOR * latents.shape[-2]
-            out_w = LATENT_SCALE_FACTOR * latents.shape[-1]
-            working_memory = out_h * out_w * element_size * scaling_constant
-
-        if self.fp32:
-            # If we are running in FP32, then we should account for the likely increase in model size (~250MB).
-            working_memory += 250 * 2**20
-
-        return int(working_memory)
-
     @torch.no_grad()
     def invoke(self, context: InvocationContext) -> ImageOutput:
         latents = context.tensors.load(self.latents.latents_name)
@@ -94,8 +62,13 @@ class LatentsToImageInvocation(BaseInvocation, WithMetadata, WithBoard):
 
         vae_info = context.models.load(self.vae.vae)
         assert isinstance(vae_info.model, (AutoencoderKL, AutoencoderTiny))
-
-        estimated_working_memory = self._estimate_working_memory(latents, use_tiling, vae_info.model)
+        estimated_working_memory = estimate_vae_working_memory_sd15_sdxl(
+            operation="decode",
+            image_tensor=latents,
+            vae=vae_info.model,
+            tile_size=self.tile_size if use_tiling else None,
+            fp32=self.fp32,
+        )
         with (
             SeamlessExt.static_patch_model(vae_info.model, self.vae.seamless_axes),
             vae_info.model_on_device(working_mem_bytes=estimated_working_memory) as (_, vae),

invokeai/app/invocations/sd3_image_to_latents.py

@@ -17,6 +17,7 @@ from invokeai.app.services.shared.invocation_context import InvocationContext
 from invokeai.backend.model_manager.load.load_base import LoadedModel
 from invokeai.backend.stable_diffusion.diffusers_pipeline import image_resized_to_grid_as_tensor
 from invokeai.backend.util.devices import TorchDevice
+from invokeai.backend.util.vae_working_memory import estimate_vae_working_memory_sd3
 
 
 @invocation(
@@ -34,7 +35,11 @@ class SD3ImageToLatentsInvocation(BaseInvocation, WithMetadata, WithBoard):
 
     @staticmethod
     def vae_encode(vae_info: LoadedModel, image_tensor: torch.Tensor) -> torch.Tensor:
-        with vae_info as vae:
+        assert isinstance(vae_info.model, AutoencoderKL)
+        estimated_working_memory = estimate_vae_working_memory_sd3(
+            operation="encode", image_tensor=image_tensor, vae=vae_info.model
+        )
+        with vae_info.model_on_device(working_mem_bytes=estimated_working_memory) as (_, vae):
             assert isinstance(vae, AutoencoderKL)
 
             vae.disable_tiling()
@@ -58,6 +63,8 @@ class SD3ImageToLatentsInvocation(BaseInvocation, WithMetadata, WithBoard):
             image_tensor = einops.rearrange(image_tensor, "c h w -> 1 c h w")
 
         vae_info = context.models.load(self.vae.vae)
+        assert isinstance(vae_info.model, AutoencoderKL)
+
         latents = self.vae_encode(vae_info=vae_info, image_tensor=image_tensor)
 
         latents = latents.to("cpu")

invokeai/app/invocations/sd3_latents_to_image.py

@@ -6,7 +6,6 @@ from einops import rearrange
 from PIL import Image
 
 from invokeai.app.invocations.baseinvocation import BaseInvocation, invocation
-from invokeai.app.invocations.constants import LATENT_SCALE_FACTOR
 from invokeai.app.invocations.fields import (
     FieldDescriptions,
     Input,
@@ -20,6 +19,7 @@ from invokeai.app.invocations.primitives import ImageOutput
 from invokeai.app.services.shared.invocation_context import InvocationContext
 from invokeai.backend.stable_diffusion.extensions.seamless import SeamlessExt
 from invokeai.backend.util.devices import TorchDevice
+from invokeai.backend.util.vae_working_memory import estimate_vae_working_memory_sd3
 
 
 @invocation(
@@ -41,22 +41,15 @@ class SD3LatentsToImageInvocation(BaseInvocation, WithMetadata, WithBoard):
         input=Input.Connection,
     )
 
-    def _estimate_working_memory(self, latents: torch.Tensor, vae: AutoencoderKL) -> int:
-        """Estimate the working memory required by the invocation in bytes."""
-        out_h = LATENT_SCALE_FACTOR * latents.shape[-2]
-        out_w = LATENT_SCALE_FACTOR * latents.shape[-1]
-        element_size = next(vae.parameters()).element_size()
-        scaling_constant = 2200  # Determined experimentally.
-        working_memory = out_h * out_w * element_size * scaling_constant
-        return int(working_memory)
-
     @torch.no_grad()
     def invoke(self, context: InvocationContext) -> ImageOutput:
         latents = context.tensors.load(self.latents.latents_name)
 
         vae_info = context.models.load(self.vae.vae)
         assert isinstance(vae_info.model, (AutoencoderKL))
-        estimated_working_memory = self._estimate_working_memory(latents, vae_info.model)
+        estimated_working_memory = estimate_vae_working_memory_sd3(
+            operation="decode", image_tensor=latents, vae=vae_info.model
+        )
         with (
             SeamlessExt.static_patch_model(vae_info.model, self.vae.seamless_axes),
             vae_info.model_on_device(working_mem_bytes=estimated_working_memory) as (_, vae),

invokeai/app/services/client_state_persistence/client_state_persistence_base.py

@@ -1,7 +1,5 @@
 from abc import ABC, abstractmethod
 
-from pydantic import JsonValue
-
 
 class ClientStatePersistenceABC(ABC):
     """
@@ -10,26 +8,35 @@ class ClientStatePersistenceABC(ABC):
     """
 
     @abstractmethod
-    def set_by_key(self, key: str, value: JsonValue) -> None:
+    def set_by_key(self, queue_id: str, key: str, value: str) -> str:
         """
-        Store the data for the client.
+        Set a key-value pair for the client.
 
-        :param data: The client data to be stored.
+        Args:
+            key (str): The key to set.
+            value (str): The value to set for the key.
+
+        Returns:
+            str: The value that was set.
         """
         pass
 
     @abstractmethod
-    def get_by_key(self, key: str) -> JsonValue | None:
+    def get_by_key(self, queue_id: str, key: str) -> str | None:
         """
-        Get the data for the client.
+        Get the value for a specific key of the client.
 
-        :return: The client data.
+        Args:
+            key (str): The key to retrieve the value for.
+
+        Returns:
+            str | None: The value associated with the key, or None if the key does not exist.
         """
         pass
 
     @abstractmethod
-    def delete(self) -> None:
+    def delete(self, queue_id: str) -> None:
         """
-        Delete the data for the client.
+        Delete all client state.
         """
         pass

invokeai/app/services/client_state_persistence/client_state_persistence_sqlite.py

@@ -1,7 +1,5 @@
 import json
 
-from pydantic import JsonValue
-
 from invokeai.app.services.client_state_persistence.client_state_persistence_base import ClientStatePersistenceABC
 from invokeai.app.services.invoker import Invoker
 from invokeai.app.services.shared.sqlite.sqlite_database import SqliteDatabase
@@ -21,8 +19,21 @@ class ClientStatePersistenceSqlite(ClientStatePersistenceABC):
     def start(self, invoker: Invoker) -> None:
         self._invoker = invoker
 
-    def set_by_key(self, key: str, value: JsonValue) -> None:
-        state = self.get() or {}
+    def _get(self) -> dict[str, str] | None:
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                f"""
+                SELECT data FROM client_state
+                WHERE id = {self._default_row_id}
+                """
+            )
+            row = cursor.fetchone()
+            if row is None:
+                return None
+            return json.loads(row[0])
+
+    def set_by_key(self, queue_id: str, key: str, value: str) -> str:
+        state = self._get() or {}
         state.update({key: value})
 
         with self._db.transaction() as cursor:
@@ -36,26 +47,15 @@ class ClientStatePersistenceSqlite(ClientStatePersistenceABC):
                 (json.dumps(state),),
             )
 
-    def get(self) -> dict[str, JsonValue] | None:
-        with self._db.transaction() as cursor:
-            cursor.execute(
-                f"""
-                SELECT data FROM client_state
-                WHERE id = {self._default_row_id}
-                """
-            )
-            row = cursor.fetchone()
-            if row is None:
-                return None
-            return json.loads(row[0])
+        return value
 
-    def get_by_key(self, key: str) -> JsonValue | None:
-        state = self.get()
+    def get_by_key(self, queue_id: str, key: str) -> str | None:
+        state = self._get()
         if state is None:
             return None
         return state.get(key, None)
 
-    def delete(self) -> None:
+    def delete(self, queue_id: str) -> None:
         with self._db.transaction() as cursor:
             cursor.execute(
                 f"""

invokeai/app/services/config/config_default.py

@@ -107,6 +107,7 @@ class InvokeAIAppConfig(BaseSettings):
         hashing_algorithm: Model hashing algorthim for model installs. 'blake3_multi' is best for SSDs. 'blake3_single' is best for spinning disk HDDs. 'random' disables hashing, instead assigning a UUID to models. Useful when using a memory db to reduce model installation time, or if you don't care about storing stable hashes for models. Alternatively, any other hashlib algorithm is accepted, though these are not nearly as performant as blake3.<br>Valid values: `blake3_multi`, `blake3_single`, `random`, `md5`, `sha1`, `sha224`, `sha256`, `sha384`, `sha512`, `blake2b`, `blake2s`, `sha3_224`, `sha3_256`, `sha3_384`, `sha3_512`, `shake_128`, `shake_256`
         remote_api_tokens: List of regular expression and token pairs used when downloading models from URLs. The download URL is tested against the regex, and if it matches, the token is provided in as a Bearer token.
         scan_models_on_startup: Scan the models directory on startup, registering orphaned models. This is typically only used in conjunction with `use_memory_db` for testing purposes.
+        unsafe_disable_picklescan: UNSAFE. Disable the picklescan security check during model installation. Recommended only for development and testing purposes. This will allow arbitrary code execution during model installation, so should never be used in production.
     """
 
     _root: Optional[Path] = PrivateAttr(default=None)
@@ -196,6 +197,7 @@ class InvokeAIAppConfig(BaseSettings):
     hashing_algorithm: HASHING_ALGORITHMS = Field(default="blake3_single",  description="Model hashing algorthim for model installs. 'blake3_multi' is best for SSDs. 'blake3_single' is best for spinning disk HDDs. 'random' disables hashing, instead assigning a UUID to models. Useful when using a memory db to reduce model installation time, or if you don't care about storing stable hashes for models. Alternatively, any other hashlib algorithm is accepted, though these are not nearly as performant as blake3.")
     remote_api_tokens: Optional[list[URLRegexTokenPair]] = Field(default=None, description="List of regular expression and token pairs used when downloading models from URLs. The download URL is tested against the regex, and if it matches, the token is provided in as a Bearer token.")
     scan_models_on_startup:        bool = Field(default=False,              description="Scan the models directory on startup, registering orphaned models. This is typically only used in conjunction with `use_memory_db` for testing purposes.")
+    unsafe_disable_picklescan:     bool = Field(default=False,              description="UNSAFE. Disable the picklescan security check during model installation. Recommended only for development and testing purposes. This will allow arbitrary code execution during model installation, so should never be used in production.")
 
     # fmt: on
 

invokeai/app/services/model_install/model_install_default.py

@@ -7,7 +7,7 @@ import threading
 import time
 from pathlib import Path
 from queue import Empty, Queue
-from shutil import copyfile, copytree, move, rmtree
+from shutil import move, rmtree
 from tempfile import mkdtemp
 from typing import TYPE_CHECKING, Any, Dict, List, Optional, Tuple, Type, Union
 
@@ -186,13 +186,15 @@ class ModelInstallService(ModelInstallServiceBase):
         info: AnyModelConfig = self._probe(Path(model_path), config)  # type: ignore
 
         if preferred_name := config.name:
-            preferred_name = Path(preferred_name).with_suffix(model_path.suffix)
+            if Path(model_path).is_file():
+                # Careful! Don't use pathlib.Path(...).with_suffix - it can will strip everything after the first dot.
+                preferred_name = f"{preferred_name}{model_path.suffix}"
 
         dest_path = (
             self.app_config.models_path / info.base.value / info.type.value / (preferred_name or model_path.name)
         )
         try:
-            new_path = self._copy_model(model_path, dest_path)
+            new_path = self._move_model(model_path, dest_path)
         except FileExistsError as excp:
             raise DuplicateModelException(
                 f"A model named {model_path.name} is already installed at {dest_path.as_posix()}"
@@ -617,30 +619,17 @@ class ModelInstallService(ModelInstallServiceBase):
         self.record_store.update_model(key, ModelRecordChanges(path=model.path))
         return model
 
-    def _copy_model(self, old_path: Path, new_path: Path) -> Path:
-        if old_path == new_path:
-            return old_path
-        new_path.parent.mkdir(parents=True, exist_ok=True)
-        if old_path.is_dir():
-            copytree(old_path, new_path)
-        else:
-            copyfile(old_path, new_path)
-        return new_path
-
     def _move_model(self, old_path: Path, new_path: Path) -> Path:
         if old_path == new_path:
             return old_path
 
+        if new_path.exists():
+            raise FileExistsError(f"Cannot move {old_path} to {new_path}: destination already exists")
+
         new_path.parent.mkdir(parents=True, exist_ok=True)
 
-        # if path already exists then we jigger the name to make it unique
-        counter: int = 1
-        while new_path.exists():
-            path = new_path.with_stem(new_path.stem + f"_{counter:02d}")
-            if not path.exists():
-                new_path = path
-            counter += 1
         move(old_path, new_path)
+
         return new_path
 
     def _probe(self, model_path: Path, config: Optional[ModelRecordChanges] = None):

invokeai/app/services/model_load/model_load_default.py

@@ -87,9 +87,21 @@ class ModelLoadService(ModelLoadServiceBase):
         def torch_load_file(checkpoint: Path) -> AnyModel:
             scan_result = scan_file_path(checkpoint)
             if scan_result.infected_files != 0:
-                raise Exception(f"The model at {checkpoint} is potentially infected by malware. Aborting load.")
+                if self._app_config.unsafe_disable_picklescan:
+                    self._logger.warning(
+                        f"Model at {checkpoint} is potentially infected by malware, but picklescan is disabled. "
+                        "Proceeding with caution."
+                    )
+                else:
+                    raise Exception(f"The model at {checkpoint} is potentially infected by malware. Aborting load.")
             if scan_result.scan_err:
-                raise Exception(f"Error scanning model at {checkpoint} for malware. Aborting load.")
+                if self._app_config.unsafe_disable_picklescan:
+                    self._logger.warning(
+                        f"Error scanning model at {checkpoint} for malware, but picklescan is disabled. "
+                        "Proceeding with caution."
+                    )
+                else:
+                    raise Exception(f"Error scanning model at {checkpoint} for malware. Aborting load.")
 
             result = torch_load(checkpoint, map_location="cpu")
             return result

invokeai/backend/flux/denoise.py

@@ -112,7 +112,7 @@ def denoise(
         )
 
         # Slice prediction to only include the main image tokens
-        if img_input_ids is not None:
+        if img_cond_seq is not None:
             pred = pred[:, :original_seq_len]
 
         step_cfg_scale = cfg_scale[step_index]
@@ -125,9 +125,26 @@ def denoise(
             if neg_regional_prompting_extension is None:
                 raise ValueError("Negative text conditioning is required when cfg_scale is not 1.0.")
 
+            # For negative prediction with Kontext, we need to include the reference images
+            # to maintain consistency between positive and negative passes. Without this,
+            # CFG would create artifacts as the attention mechanism would see different
+            # spatial structures in each pass
+            neg_img_input = img
+            neg_img_input_ids = img_ids
+
+            # Add channel-wise conditioning for negative pass if present
+            if img_cond is not None:
+                neg_img_input = torch.cat((neg_img_input, img_cond), dim=-1)
+
+            # Add sequence-wise conditioning (Kontext) for negative pass
+            # This ensures reference images are processed consistently
+            if img_cond_seq is not None:
+                neg_img_input = torch.cat((neg_img_input, img_cond_seq), dim=1)
+                neg_img_input_ids = torch.cat((neg_img_input_ids, img_cond_seq_ids), dim=1)
+
             neg_pred = model(
-                img=img,
-                img_ids=img_ids,
+                img=neg_img_input,
+                img_ids=neg_img_input_ids,
                 txt=neg_regional_prompting_extension.regional_text_conditioning.t5_embeddings,
                 txt_ids=neg_regional_prompting_extension.regional_text_conditioning.t5_txt_ids,
                 y=neg_regional_prompting_extension.regional_text_conditioning.clip_embeddings,
@@ -140,6 +157,10 @@ def denoise(
                 ip_adapter_extensions=neg_ip_adapter_extensions,
                 regional_prompting_extension=neg_regional_prompting_extension,
             )
+
+            # Slice negative prediction to match main image tokens
+            if img_cond_seq is not None:
+                neg_pred = neg_pred[:, :original_seq_len]
             pred = neg_pred + step_cfg_scale * (pred - neg_pred)
 
         preview_img = img - t_curr * pred

invokeai/backend/flux/extensions/kontext_extension.py

@@ -1,15 +1,14 @@
-import einops
-import numpy as np
 import torch
+import torch.nn.functional as F
+import torchvision.transforms as T
 from einops import repeat
-from PIL import Image
 
 from invokeai.app.invocations.fields import FluxKontextConditioningField
-from invokeai.app.invocations.flux_vae_encode import FluxVaeEncodeInvocation
 from invokeai.app.invocations.model import VAEField
 from invokeai.app.services.shared.invocation_context import InvocationContext
+from invokeai.backend.flux.modules.autoencoder import AutoEncoder
 from invokeai.backend.flux.sampling_utils import pack
-from invokeai.backend.flux.util import PREFERED_KONTEXT_RESOLUTIONS
+from invokeai.backend.util.devices import TorchDevice
 
 
 def generate_img_ids_with_offset(
@@ -19,8 +18,10 @@ def generate_img_ids_with_offset(
     device: torch.device,
     dtype: torch.dtype,
     idx_offset: int = 0,
+    h_offset: int = 0,
+    w_offset: int = 0,
 ) -> torch.Tensor:
-    """Generate tensor of image position ids with an optional offset.
+    """Generate tensor of image position ids with optional index and spatial offsets.
 
     Args:
         latent_height (int): Height of image in latent space (after packing, this becomes h//2).
@@ -28,7 +29,9 @@ def generate_img_ids_with_offset(
         batch_size (int): Number of images in the batch.
         device (torch.device): Device to create tensors on.
         dtype (torch.dtype): Data type for the tensors.
-        idx_offset (int): Offset to add to the first dimension of the image ids.
+        idx_offset (int): Offset to add to the first dimension of the image ids (default: 0).
+        h_offset (int): Spatial offset for height/y-coordinates in latent space (default: 0).
+        w_offset (int): Spatial offset for width/x-coordinates in latent space (default: 0).
 
     Returns:
         torch.Tensor: Image position ids with shape [batch_size, (latent_height//2 * latent_width//2), 3].
@@ -42,6 +45,10 @@ def generate_img_ids_with_offset(
     packed_height = latent_height // 2
     packed_width = latent_width // 2
 
+    # Convert spatial offsets from latent space to packed space
+    packed_h_offset = h_offset // 2
+    packed_w_offset = w_offset // 2
+
     # Create base tensor for position IDs with shape [packed_height, packed_width, 3]
     # The 3 channels represent: [batch_offset, y_position, x_position]
     img_ids = torch.zeros(packed_height, packed_width, 3, device=device, dtype=dtype)
@@ -49,13 +56,13 @@ def generate_img_ids_with_offset(
     # Set the batch offset for all positions
     img_ids[..., 0] = idx_offset
 
-    # Create y-coordinate indices (vertical positions)
-    y_indices = torch.arange(packed_height, device=device, dtype=dtype)
+    # Create y-coordinate indices (vertical positions) with spatial offset
+    y_indices = torch.arange(packed_height, device=device, dtype=dtype) + packed_h_offset
     # Broadcast y_indices to match the spatial dimensions [packed_height, 1]
     img_ids[..., 1] = y_indices[:, None]
 
-    # Create x-coordinate indices (horizontal positions)
-    x_indices = torch.arange(packed_width, device=device, dtype=dtype)
+    # Create x-coordinate indices (horizontal positions) with spatial offset
+    x_indices = torch.arange(packed_width, device=device, dtype=dtype) + packed_w_offset
     # Broadcast x_indices to match the spatial dimensions [1, packed_width]
     img_ids[..., 2] = x_indices[None, :]
 
@@ -73,14 +80,14 @@ class KontextExtension:
 
     def __init__(
         self,
-        kontext_conditioning: FluxKontextConditioningField,
+        kontext_conditioning: list[FluxKontextConditioningField],
         context: InvocationContext,
         vae_field: VAEField,
         device: torch.device,
         dtype: torch.dtype,
     ):
         """
-        Initializes the KontextExtension, pre-processing the reference image
+        Initializes the KontextExtension, pre-processing the reference images
         into latents and positional IDs.
         """
         self._context = context
@@ -93,54 +100,116 @@ class KontextExtension:
         self.kontext_latents, self.kontext_ids = self._prepare_kontext()
 
     def _prepare_kontext(self) -> tuple[torch.Tensor, torch.Tensor]:
-        """Encodes the reference image and prepares its latents and IDs."""
-        image = self._context.images.get_pil(self.kontext_conditioning.image.image_name)
+        """Encodes the reference images and prepares their concatenated latents and IDs with spatial tiling."""
+        all_latents = []
+        all_ids = []
 
-        # Calculate aspect ratio of input image
-        width, height = image.size
-        aspect_ratio = width / height
+        # Track cumulative dimensions for spatial tiling
+        # These track the running extent of the virtual canvas in latent space
+        canvas_h = 0  # Running canvas height
+        canvas_w = 0  # Running canvas width
 
-        # Find the closest preferred resolution by aspect ratio
-        _, target_width, target_height = min(
-            ((abs(aspect_ratio - w / h), w, h) for w, h in PREFERED_KONTEXT_RESOLUTIONS), key=lambda x: x[0]
-        )
-
-        # Apply BFL's scaling formula
-        # This ensures compatibility with the model's training
-        scaled_width = 2 * int(target_width / 16)
-        scaled_height = 2 * int(target_height / 16)
-
-        # Resize to the exact resolution used during training
-        image = image.convert("RGB")
-        final_width = 8 * scaled_width
-        final_height = 8 * scaled_height
-        image = image.resize((final_width, final_height), Image.Resampling.LANCZOS)
-
-        # Convert to tensor with same normalization as BFL
-        image_np = np.array(image)
-        image_tensor = torch.from_numpy(image_np).float() / 127.5 - 1.0
-        image_tensor = einops.rearrange(image_tensor, "h w c -> 1 c h w")
-        image_tensor = image_tensor.to(self._device)
-
-        # Continue with VAE encoding
         vae_info = self._context.models.load(self._vae_field.vae)
-        kontext_latents_unpacked = FluxVaeEncodeInvocation.vae_encode(vae_info=vae_info, image_tensor=image_tensor)
 
-        # Extract tensor dimensions
-        batch_size, _, latent_height, latent_width = kontext_latents_unpacked.shape
+        for idx, kontext_field in enumerate(self.kontext_conditioning):
+            image = self._context.images.get_pil(kontext_field.image.image_name)
 
-        # Pack the latents and generate IDs
-        kontext_latents_packed = pack(kontext_latents_unpacked).to(self._device, self._dtype)
-        kontext_ids = generate_img_ids_with_offset(
-            latent_height=latent_height,
-            latent_width=latent_width,
-            batch_size=batch_size,
-            device=self._device,
-            dtype=self._dtype,
-            idx_offset=1,
-        )
+            # Convert to RGB
+            image = image.convert("RGB")
 
-        return kontext_latents_packed, kontext_ids
+            # Convert to tensor using torchvision transforms for consistency
+            transformation = T.Compose(
+                [
+                    T.ToTensor(),  # Converts PIL image to tensor and scales to [0, 1]
+                ]
+            )
+            image_tensor = transformation(image)
+            # Convert from [0, 1] to [-1, 1] range expected by VAE
+            image_tensor = image_tensor * 2.0 - 1.0
+            image_tensor = image_tensor.unsqueeze(0)  # Add batch dimension
+            image_tensor = image_tensor.to(self._device)
+
+            # Continue with VAE encoding
+            # Don't sample from the distribution for reference images - use the mean (matching ComfyUI)
+            # Estimate working memory for encode operation (50% of decode memory requirements)
+            img_h = image_tensor.shape[-2]
+            img_w = image_tensor.shape[-1]
+            element_size = next(vae_info.model.parameters()).element_size()
+            scaling_constant = 1100  # 50% of decode scaling constant (2200)
+            estimated_working_memory = int(img_h * img_w * element_size * scaling_constant)
+
+            with vae_info.model_on_device(working_mem_bytes=estimated_working_memory) as (_, vae):
+                assert isinstance(vae, AutoEncoder)
+                vae_dtype = next(iter(vae.parameters())).dtype
+                image_tensor = image_tensor.to(device=TorchDevice.choose_torch_device(), dtype=vae_dtype)
+                # Use sample=False to get the distribution mean without noise
+                kontext_latents_unpacked = vae.encode(image_tensor, sample=False)
+                TorchDevice.empty_cache()
+
+            # Extract tensor dimensions
+            batch_size, _, latent_height, latent_width = kontext_latents_unpacked.shape
+
+            # Pad latents to be compatible with patch_size=2
+            # This ensures dimensions are even for the pack() function
+            pad_h = (2 - latent_height % 2) % 2
+            pad_w = (2 - latent_width % 2) % 2
+            if pad_h > 0 or pad_w > 0:
+                kontext_latents_unpacked = F.pad(kontext_latents_unpacked, (0, pad_w, 0, pad_h), mode="circular")
+                # Update dimensions after padding
+                _, _, latent_height, latent_width = kontext_latents_unpacked.shape
+
+            # Pack the latents
+            kontext_latents_packed = pack(kontext_latents_unpacked).to(self._device, self._dtype)
+
+            # Determine spatial offsets for this reference image
+            h_offset = 0
+            w_offset = 0
+
+            if idx > 0:  # First image starts at (0, 0)
+                # Calculate potential canvas dimensions for each tiling option
+                # Option 1: Tile vertically (below existing content)
+                potential_h_vertical = canvas_h + latent_height
+
+                # Option 2: Tile horizontally (to the right of existing content)
+                potential_w_horizontal = canvas_w + latent_width
+
+                # Choose arrangement that minimizes the maximum dimension
+                # This keeps the canvas closer to square, optimizing attention computation
+                if potential_h_vertical > potential_w_horizontal:
+                    # Tile horizontally (to the right of existing images)
+                    w_offset = canvas_w
+                    canvas_w = canvas_w + latent_width
+                    canvas_h = max(canvas_h, latent_height)
+                else:
+                    # Tile vertically (below existing images)
+                    h_offset = canvas_h
+                    canvas_h = canvas_h + latent_height
+                    canvas_w = max(canvas_w, latent_width)
+            else:
+                # First image - just set canvas dimensions
+                canvas_h = latent_height
+                canvas_w = latent_width
+
+            # Generate IDs with both index offset and spatial offsets
+            kontext_ids = generate_img_ids_with_offset(
+                latent_height=latent_height,
+                latent_width=latent_width,
+                batch_size=batch_size,
+                device=self._device,
+                dtype=self._dtype,
+                idx_offset=1,  # All reference images use index=1 (matching ComfyUI implementation)
+                h_offset=h_offset,
+                w_offset=w_offset,
+            )
+
+            all_latents.append(kontext_latents_packed)
+            all_ids.append(kontext_ids)
+
+        # Concatenate all latents and IDs along the sequence dimension
+        concatenated_latents = torch.cat(all_latents, dim=1)  # Concatenate along sequence dimension
+        concatenated_ids = torch.cat(all_ids, dim=1)  # Concatenate along sequence dimension
+
+        return concatenated_latents, concatenated_ids
 
     def ensure_batch_size(self, target_batch_size: int) -> None:
         """Ensures the kontext latents and IDs match the target batch size by repeating if necessary."""

invokeai/backend/model_manager/legacy_probe.py

@@ -9,6 +9,7 @@ import spandrel
 import torch
 
 import invokeai.backend.util.logging as logger
+from invokeai.app.services.config.config_default import get_config
 from invokeai.app.util.misc import uuid_string
 from invokeai.backend.flux.controlnet.state_dict_utils import (
     is_state_dict_instantx_controlnet,
@@ -493,9 +494,21 @@ class ModelProbe(object):
         # scan model
         scan_result = pscan.scan_file_path(checkpoint)
         if scan_result.infected_files != 0:
-            raise Exception(f"The model {model_name} is potentially infected by malware. Aborting import.")
+            if get_config().unsafe_disable_picklescan:
+                logger.warning(
+                    f"The model {model_name} is potentially infected by malware, but picklescan is disabled. "
+                    "Proceeding with caution."
+                )
+            else:
+                raise RuntimeError(f"The model {model_name} is potentially infected by malware. Aborting import.")
         if scan_result.scan_err:
-            raise Exception(f"Error scanning model {model_name} for malware. Aborting import.")
+            if get_config().unsafe_disable_picklescan:
+                logger.warning(
+                    f"Error scanning the model at {model_name} for malware, but picklescan is disabled. "
+                    "Proceeding with caution."
+                )
+            else:
+                raise RuntimeError(f"Error scanning the model at {model_name} for malware. Aborting import.")
 
 
 # Probing utilities

invokeai/backend/model_manager/model_on_disk.py

@@ -6,13 +6,17 @@ import torch
 from picklescan.scanner import scan_file_path
 from safetensors import safe_open
 
+from invokeai.app.services.config.config_default import get_config
 from invokeai.backend.model_hash.model_hash import HASHING_ALGORITHMS, ModelHash
 from invokeai.backend.model_manager.taxonomy import ModelRepoVariant
 from invokeai.backend.quantization.gguf.loaders import gguf_sd_loader
+from invokeai.backend.util.logging import InvokeAILogger
 from invokeai.backend.util.silence_warnings import SilenceWarnings
 
 StateDict: TypeAlias = dict[str | int, Any]  # When are the keys int?
 
+logger = InvokeAILogger.get_logger()
+
 
 class ModelOnDisk:
     """A utility class representing a model stored on disk."""
@@ -79,8 +83,24 @@ class ModelOnDisk:
         with SilenceWarnings():
             if path.suffix.endswith((".ckpt", ".pt", ".pth", ".bin")):
                 scan_result = scan_file_path(path)
-                if scan_result.infected_files != 0 or scan_result.scan_err:
-                    raise RuntimeError(f"The model {path.stem} is potentially infected by malware. Aborting import.")
+                if scan_result.infected_files != 0:
+                    if get_config().unsafe_disable_picklescan:
+                        logger.warning(
+                            f"The model {path.stem} is potentially infected by malware, but picklescan is disabled. "
+                            "Proceeding with caution."
+                        )
+                    else:
+                        raise RuntimeError(
+                            f"The model {path.stem} is potentially infected by malware. Aborting import."
+                        )
+                if scan_result.scan_err:
+                    if get_config().unsafe_disable_picklescan:
+                        logger.warning(
+                            f"Error scanning the model at {path.stem} for malware, but picklescan is disabled. "
+                            "Proceeding with caution."
+                        )
+                    else:
+                        raise RuntimeError(f"Error scanning the model at {path.stem} for malware. Aborting import.")
                 checkpoint = torch.load(path, map_location="cpu")
                 assert isinstance(checkpoint, dict)
             elif path.suffix.endswith(".gguf"):

invokeai/backend/model_manager/starter_models.py

@@ -149,13 +149,29 @@ flux_kontext = StarterModel(
     dependencies=[t5_base_encoder, flux_vae, clip_l_encoder],
 )
 flux_kontext_quantized = StarterModel(
-    name="FLUX.1 Kontext dev (Quantized)",
+    name="FLUX.1 Kontext dev (quantized)",
     base=BaseModelType.Flux,
     source="https://huggingface.co/unsloth/FLUX.1-Kontext-dev-GGUF/resolve/main/flux1-kontext-dev-Q4_K_M.gguf",
     description="FLUX.1 Kontext dev quantized (q4_k_m). Total size with dependencies: ~14GB",
     type=ModelType.Main,
     dependencies=[t5_8b_quantized_encoder, flux_vae, clip_l_encoder],
 )
+flux_krea = StarterModel(
+    name="FLUX.1 Krea dev",
+    base=BaseModelType.Flux,
+    source="https://huggingface.co/InvokeAI/FLUX.1-Krea-dev/resolve/main/flux1-krea-dev.safetensors",
+    description="FLUX.1 Krea dev. Total size with dependencies: ~33GB",
+    type=ModelType.Main,
+    dependencies=[t5_8b_quantized_encoder, flux_vae, clip_l_encoder],
+)
+flux_krea_quantized = StarterModel(
+    name="FLUX.1 Krea dev (quantized)",
+    base=BaseModelType.Flux,
+    source="https://huggingface.co/InvokeAI/FLUX.1-Krea-dev-GGUF/resolve/main/flux1-krea-dev-Q4_K_M.gguf",
+    description="FLUX.1 Krea dev quantized (q4_k_m). Total size with dependencies: ~14GB",
+    type=ModelType.Main,
+    dependencies=[t5_8b_quantized_encoder, flux_vae, clip_l_encoder],
+)
 sd35_medium = StarterModel(
     name="SD3.5 Medium",
     base=BaseModelType.StableDiffusion3,
@@ -580,13 +596,14 @@ t2i_sketch_sdxl = StarterModel(
 )
 # endregion
 # region SpandrelImageToImage
-realesrgan_anime = StarterModel(
-    name="RealESRGAN_x4plus_anime_6B",
+animesharp_v4_rcan = StarterModel(
+    name="2x-AnimeSharpV4_RCAN",
     base=BaseModelType.Any,
-    source="https://github.com/xinntao/Real-ESRGAN/releases/download/v0.2.2.4/RealESRGAN_x4plus_anime_6B.pth",
-    description="A Real-ESRGAN 4x upscaling model (optimized for anime images).",
+    source="https://github.com/Kim2091/Kim2091-Models/releases/download/2x-AnimeSharpV4/2x-AnimeSharpV4_RCAN.safetensors",
+    description="A 2x upscaling model (optimized for anime images).",
     type=ModelType.SpandrelImageToImage,
 )
+
 realesrgan_x4 = StarterModel(
     name="RealESRGAN_x4plus",
     base=BaseModelType.Any,
@@ -732,7 +749,7 @@ STARTER_MODELS: list[StarterModel] = [
     t2i_lineart_sdxl,
     t2i_sketch_sdxl,
     realesrgan_x4,
-    realesrgan_anime,
+    animesharp_v4_rcan,
     realesrgan_x2,
     swinir,
     t5_base_encoder,
@@ -743,6 +760,8 @@ STARTER_MODELS: list[StarterModel] = [
     llava_onevision,
     flux_fill,
     cogview4,
+    flux_krea,
+    flux_krea_quantized,
 ]
 
 sd1_bundle: list[StarterModel] = [
@@ -794,6 +813,7 @@ flux_bundle: list[StarterModel] = [
     flux_redux,
     flux_fill,
     flux_kontext_quantized,
+    flux_krea_quantized,
 ]
 
 STARTER_BUNDLES: dict[str, StarterModelBundle] = {

invokeai/backend/model_manager/util/model_util.py

@@ -8,8 +8,12 @@ import picklescan.scanner as pscan
 import safetensors
 import torch
 
+from invokeai.app.services.config.config_default import get_config
 from invokeai.backend.model_manager.taxonomy import ClipVariantType
 from invokeai.backend.quantization.gguf.loaders import gguf_sd_loader
+from invokeai.backend.util.logging import InvokeAILogger
+
+logger = InvokeAILogger.get_logger()
 
 
 def _fast_safetensors_reader(path: str) -> Dict[str, torch.Tensor]:
@@ -59,9 +63,21 @@ def read_checkpoint_meta(path: Union[str, Path], scan: bool = True) -> Dict[str,
         if scan:
             scan_result = pscan.scan_file_path(path)
             if scan_result.infected_files != 0:
-                raise Exception(f"The model at {path} is potentially infected by malware. Aborting import.")
+                if get_config().unsafe_disable_picklescan:
+                    logger.warning(
+                        f"The model {path} is potentially infected by malware, but picklescan is disabled. "
+                        "Proceeding with caution."
+                    )
+                else:
+                    raise RuntimeError(f"The model {path} is potentially infected by malware. Aborting import.")
             if scan_result.scan_err:
-                raise Exception(f"Error scanning model at {path} for malware. Aborting import.")
+                if get_config().unsafe_disable_picklescan:
+                    logger.warning(
+                        f"Error scanning the model at {path} for malware, but picklescan is disabled. "
+                        "Proceeding with caution."
+                    )
+                else:
+                    raise RuntimeError(f"Error scanning the model at {path} for malware. Aborting import.")
 
         checkpoint = torch.load(path, map_location=torch.device("meta"))
     return checkpoint

invokeai/backend/patches/lora_conversions/flux_diffusers_lora_conversion_utils.py

@@ -18,16 +18,25 @@ def is_state_dict_likely_in_flux_diffusers_format(state_dict: Dict[str, torch.Te
     # First, check that all keys end in "lora_A.weight" or "lora_B.weight" (i.e. are in PEFT format).
     all_keys_in_peft_format = all(k.endswith(("lora_A.weight", "lora_B.weight")) for k in state_dict.keys())
 
-    # Next, check that this is likely a FLUX model by spot-checking a few keys.
-    expected_keys = [
+    # Check if keys use transformer prefix
+    transformer_prefix_keys = [
         "transformer.single_transformer_blocks.0.attn.to_q.lora_A.weight",
         "transformer.single_transformer_blocks.0.attn.to_q.lora_B.weight",
         "transformer.transformer_blocks.0.attn.add_q_proj.lora_A.weight",
         "transformer.transformer_blocks.0.attn.add_q_proj.lora_B.weight",
     ]
-    all_expected_keys_present = all(k in state_dict for k in expected_keys)
+    transformer_keys_present = all(k in state_dict for k in transformer_prefix_keys)
 
-    return all_keys_in_peft_format and all_expected_keys_present
+    # Check if keys use base_model.model prefix
+    base_model_prefix_keys = [
+        "base_model.model.single_transformer_blocks.0.attn.to_q.lora_A.weight",
+        "base_model.model.single_transformer_blocks.0.attn.to_q.lora_B.weight",
+        "base_model.model.transformer_blocks.0.attn.add_q_proj.lora_A.weight",
+        "base_model.model.transformer_blocks.0.attn.add_q_proj.lora_B.weight",
+    ]
+    base_model_keys_present = all(k in state_dict for k in base_model_prefix_keys)
+
+    return all_keys_in_peft_format and (transformer_keys_present or base_model_keys_present)
 
 
 def lora_model_from_flux_diffusers_state_dict(
@@ -49,8 +58,16 @@ def lora_layers_from_flux_diffusers_grouped_state_dict(
     https://github.com/huggingface/diffusers/blob/55ac421f7bb12fd00ccbef727be4dc2f3f920abb/scripts/convert_flux_to_diffusers.py
     """
 
-    # Remove the "transformer." prefix from all keys.
-    grouped_state_dict = {k.replace("transformer.", ""): v for k, v in grouped_state_dict.items()}
+    # Determine which prefix is used and remove it from all keys.
+    # Check if any key starts with "base_model.model." prefix
+    has_base_model_prefix = any(k.startswith("base_model.model.") for k in grouped_state_dict.keys())
+
+    if has_base_model_prefix:
+        # Remove the "base_model.model." prefix from all keys.
+        grouped_state_dict = {k.replace("base_model.model.", ""): v for k, v in grouped_state_dict.items()}
+    else:
+        # Remove the "transformer." prefix from all keys.
+        grouped_state_dict = {k.replace("transformer.", ""): v for k, v in grouped_state_dict.items()}
 
     # Constants for FLUX.1
     num_double_layers = 19

invokeai/backend/quantization/scripts/load_flux_model_bnb_llm_int8.py

@@ -20,7 +20,7 @@ def main():
         "/data/invokeai/models/.download_cache/https__huggingface.co_black-forest-labs_flux.1-schnell_resolve_main_flux1-schnell.safetensors/flux1-schnell.safetensors"
     )
 
-    with log_time("Intialize FLUX transformer on meta device"):
+    with log_time("Initialize FLUX transformer on meta device"):
         # TODO(ryand): Determine if this is a schnell model or a dev model and load the appropriate config.
         p = params["flux-schnell"]
 

invokeai/backend/quantization/scripts/load_flux_model_bnb_nf4.py

@@ -33,7 +33,7 @@ def main():
     )
 
     # inference_dtype = torch.bfloat16
-    with log_time("Intialize FLUX transformer on meta device"):
+    with log_time("Initialize FLUX transformer on meta device"):
         # TODO(ryand): Determine if this is a schnell model or a dev model and load the appropriate config.
         p = params["flux-schnell"]
 

invokeai/backend/quantization/scripts/quantize_t5_xxl_bnb_llm_int8.py

@@ -27,7 +27,7 @@ def main():
     """
     model_path = Path("/data/misc/text_encoder_2")
 
-    with log_time("Intialize T5 on meta device"):
+    with log_time("Initialize T5 on meta device"):
         model_config = AutoConfig.from_pretrained(model_path)
         with accelerate.init_empty_weights():
             model = AutoModelForTextEncoding.from_config(model_config)

invokeai/backend/util/vae_working_memory.py

@@ -0,0 +1,117 @@
+from typing import Literal
+
+import torch
+from diffusers.models.autoencoders.autoencoder_kl import AutoencoderKL
+from diffusers.models.autoencoders.autoencoder_tiny import AutoencoderTiny
+
+from invokeai.app.invocations.constants import LATENT_SCALE_FACTOR
+from invokeai.backend.flux.modules.autoencoder import AutoEncoder
+
+
+def estimate_vae_working_memory_sd15_sdxl(
+    operation: Literal["encode", "decode"],
+    image_tensor: torch.Tensor,
+    vae: AutoencoderKL | AutoencoderTiny,
+    tile_size: int | None,
+    fp32: bool,
+) -> int:
+    """Estimate the working memory required to encode or decode the given tensor."""
+    # It was found experimentally that the peak working memory scales linearly with the number of pixels and the
+    # element size (precision). This estimate is accurate for both SD1 and SDXL.
+    element_size = 4 if fp32 else 2
+
+    # This constant is determined experimentally and takes into consideration both allocated and reserved memory. See #8414
+    # Encoding uses ~45% the working memory as decoding.
+    scaling_constant = 2200 if operation == "decode" else 1100
+
+    latent_scale_factor_for_operation = LATENT_SCALE_FACTOR if operation == "decode" else 1
+
+    if tile_size is not None:
+        if tile_size == 0:
+            tile_size = vae.tile_sample_min_size
+            assert isinstance(tile_size, int)
+        h = tile_size
+        w = tile_size
+        working_memory = h * w * element_size * scaling_constant
+
+        # We add 25% to the working memory estimate when tiling is enabled to account for factors like tile overlap
+        # and number of tiles. We could make this more precise in the future, but this should be good enough for
+        # most use cases.
+        working_memory = working_memory * 1.25
+    else:
+        h = latent_scale_factor_for_operation * image_tensor.shape[-2]
+        w = latent_scale_factor_for_operation * image_tensor.shape[-1]
+        working_memory = h * w * element_size * scaling_constant
+
+    if fp32:
+        # If we are running in FP32, then we should account for the likely increase in model size (~250MB).
+        working_memory += 250 * 2**20
+
+    print(f"estimate_vae_working_memory_sd15_sdxl: {int(working_memory)}")
+
+    return int(working_memory)
+
+
+def estimate_vae_working_memory_cogview4(
+    operation: Literal["encode", "decode"], image_tensor: torch.Tensor, vae: AutoencoderKL
+) -> int:
+    """Estimate the working memory required by the invocation in bytes."""
+    latent_scale_factor_for_operation = LATENT_SCALE_FACTOR if operation == "decode" else 1
+
+    h = latent_scale_factor_for_operation * image_tensor.shape[-2]
+    w = latent_scale_factor_for_operation * image_tensor.shape[-1]
+    element_size = next(vae.parameters()).element_size()
+
+    # This constant is determined experimentally and takes into consideration both allocated and reserved memory. See #8414
+    # Encoding uses ~45% the working memory as decoding.
+    scaling_constant = 2200 if operation == "decode" else 1100
+    working_memory = h * w * element_size * scaling_constant
+
+    print(f"estimate_vae_working_memory_cogview4: {int(working_memory)}")
+
+    return int(working_memory)
+
+
+def estimate_vae_working_memory_flux(
+    operation: Literal["encode", "decode"], image_tensor: torch.Tensor, vae: AutoEncoder
+) -> int:
+    """Estimate the working memory required by the invocation in bytes."""
+
+    latent_scale_factor_for_operation = LATENT_SCALE_FACTOR if operation == "decode" else 1
+
+    out_h = latent_scale_factor_for_operation * image_tensor.shape[-2]
+    out_w = latent_scale_factor_for_operation * image_tensor.shape[-1]
+    element_size = next(vae.parameters()).element_size()
+
+    # This constant is determined experimentally and takes into consideration both allocated and reserved memory. See #8414
+    # Encoding uses ~45% the working memory as decoding.
+    scaling_constant = 2200 if operation == "decode" else 1100
+
+    working_memory = out_h * out_w * element_size * scaling_constant
+
+    print(f"estimate_vae_working_memory_flux: {int(working_memory)}")
+
+    return int(working_memory)
+
+
+def estimate_vae_working_memory_sd3(
+    operation: Literal["encode", "decode"], image_tensor: torch.Tensor, vae: AutoencoderKL
+) -> int:
+    """Estimate the working memory required by the invocation in bytes."""
+    # Encode operations use approximately 50% of the memory required for decode operations
+
+    latent_scale_factor_for_operation = LATENT_SCALE_FACTOR if operation == "decode" else 1
+
+    h = latent_scale_factor_for_operation * image_tensor.shape[-2]
+    w = latent_scale_factor_for_operation * image_tensor.shape[-1]
+    element_size = next(vae.parameters()).element_size()
+
+    # This constant is determined experimentally and takes into consideration both allocated and reserved memory. See #8414
+    # Encoding uses ~45% the working memory as decoding.
+    scaling_constant = 2200 if operation == "decode" else 1100
+
+    working_memory = h * w * element_size * scaling_constant
+
+    print(f"estimate_vae_working_memory_sd3: {int(working_memory)}")
+
+    return int(working_memory)

invokeai/frontend/web/.storybook/preview.tsx

@@ -26,7 +26,7 @@ i18n.use(initReactI18next).init({
   returnNull: false,
 });
 
-const store = createStore({ driver: { getItem: () => {}, setItem: () => {} }, persistThrottle: 2000 });
+const store = createStore();
 $store.set(store);
 $baseUrl.set('http://localhost:9090');
 

invokeai/frontend/web/knip.ts

@@ -17,6 +17,7 @@ const config: KnipConfig = {
     'src/app/store/use-debounced-app-selector.ts',
   ],
   ignoreBinaries: ['only-allow'],
+  ignoreDependencies: ['magic-string'],
   paths: {
     'public/*': ['public/*'],
   },

invokeai/frontend/web/package.json

@@ -63,6 +63,7 @@
     "framer-motion": "^11.10.0",
     "i18next": "^25.3.2",
     "i18next-http-backend": "^3.0.2",
+    "idb-keyval": "6.2.1",
     "jsondiffpatch": "^0.7.3",
     "konva": "^9.3.22",
     "linkify-react": "^4.3.1",
@@ -138,6 +139,7 @@
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^16.3.0",
     "knip": "^5.61.3",
+    "magic-string": "^0.30.17",
     "openapi-types": "^12.1.3",
     "openapi-typescript": "^7.6.1",
     "prettier": "^3.5.3",

invokeai/frontend/web/pnpm-lock.yaml

@@ -80,6 +80,9 @@ importers:
       i18next-http-backend:
         specifier: ^3.0.2
         version: 3.0.2
+      idb-keyval:
+        specifier: 6.2.1
+        version: 6.2.1
       jsondiffpatch:
         specifier: ^0.7.3
         version: 0.7.3
@@ -288,6 +291,9 @@ importers:
       knip:
         specifier: ^5.61.3
         version: 5.61.3(@types/node@22.16.0)(typescript@5.8.3)
+      magic-string:
+        specifier: ^0.30.17
+        version: 0.30.17
       openapi-types:
         specifier: ^12.1.3
         version: 12.1.3
@@ -2772,6 +2778,9 @@ packages:
       typescript:
         optional: true
 
+  idb-keyval@6.2.1:
+    resolution: {integrity: sha512-8Sb3veuYCyrZL+VBt9LJfZjLUPWVvqn8tG28VqYNFCo43KHcKuq+b4EiXGeuaLAQWL2YmyDgMp2aSpH9JHsEQg==}
+
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
@@ -7266,6 +7275,8 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.3
 
+  idb-keyval@6.2.1: {}
+
   ieee754@1.2.1: {}
 
   ignore@5.3.2: {}

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

@@ -1470,7 +1470,6 @@
     "ui": {
         "tabs": {
             "queue": "Warteschlange",
-            "generation": "Erzeugung",
             "gallery": "Galerie",
             "models": "Modelle",
             "upscaling": "Hochskalierung",

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

@@ -38,6 +38,7 @@
         "deletedImagesCannotBeRestored": "Deleted images cannot be restored.",
         "hideBoards": "Hide Boards",
         "loading": "Loading...",
+        "locateInGalery": "Locate in Gallery",
         "menuItemAutoAdd": "Auto-add to this Board",
         "move": "Move",
         "movingImagesToBoard_one": "Moving {{count}} image to board:",
@@ -114,6 +115,9 @@
         "t2iAdapter": "T2I Adapter",
         "positivePrompt": "Positive Prompt",
         "negativePrompt": "Negative Prompt",
+        "removeNegativePrompt": "Remove Negative Prompt",
+        "addNegativePrompt": "Add Negative Prompt",
+        "selectYourModel": "Select Your Model",
         "discordLabel": "Discord",
         "dontAskMeAgain": "Don't ask me again",
         "dontShowMeThese": "Don't show me these",
@@ -610,6 +614,10 @@
                 "title": "Toggle Non-Raster Layers",
                 "desc": "Show or hide all non-raster layer categories (Control Layers, Inpaint Masks, Regional Guidance)."
             },
+            "fitBboxToLayers": {
+                "title": "Fit Bbox To Layers",
+                "desc": "Automatically adjust the generation bounding box to fit visible layers"
+            },
             "fitBboxToMasks": {
                 "title": "Fit Bbox To Masks",
                 "desc": "Automatically adjust the generation bounding box to fit visible inpaint masks"
@@ -763,6 +771,7 @@
         "allPrompts": "All Prompts",
         "cfgScale": "CFG scale",
         "cfgRescaleMultiplier": "$t(parameters.cfgRescaleMultiplier)",
+        "clipSkip": "$t(parameters.clipSkip)",
         "createdBy": "Created By",
         "generationMode": "Generation Mode",
         "guidance": "Guidance",
@@ -865,6 +874,9 @@
         "install": "Install",
         "installAll": "Install All",
         "installRepo": "Install Repo",
+        "installBundle": "Install Bundle",
+        "installBundleMsg1": "Are you sure you want to install the {{bundleName}} bundle?",
+        "installBundleMsg2": "This bundle will install the following {{count}} models:",
         "ipAdapters": "IP Adapters",
         "learnMoreAboutSupportedModels": "Learn more about the models we support",
         "load": "Load",
@@ -1235,7 +1247,7 @@
             "modelIncompatibleScaledBboxWidth": "Scaled bbox width is {{width}} but {{model}} requires multiple of {{multiple}}",
             "modelIncompatibleScaledBboxHeight": "Scaled bbox height is {{height}} but {{model}} requires multiple of {{multiple}}",
             "fluxModelMultipleControlLoRAs": "Can only use 1 Control LoRA at a time",
-            "fluxKontextMultipleReferenceImages": "Can only use 1 Reference Image at a time with Flux Kontext",
+            "fluxKontextMultipleReferenceImages": "Can only use 1 Reference Image at a time with FLUX Kontext via BFL API",
             "canvasIsFiltering": "Canvas is busy (filtering)",
             "canvasIsTransforming": "Canvas is busy (transforming)",
             "canvasIsRasterizing": "Canvas is busy (rasterizing)",
@@ -1283,6 +1295,7 @@
         "remixImage": "Remix Image",
         "usePrompt": "Use Prompt",
         "useSeed": "Use Seed",
+        "useClipSkip": "Use CLIP Skip",
         "width": "Width",
         "gaussianBlur": "Gaussian Blur",
         "boxBlur": "Box Blur",
@@ -2066,6 +2079,8 @@
         "asControlLayer": "As $t(controlLayers.controlLayer)",
         "asControlLayerResize": "As $t(controlLayers.controlLayer) (Resize)",
         "referenceImage": "Reference Image",
+        "maxRefImages": "Max Ref Images",
+        "useAsReferenceImage": "Use as Reference Image",
         "regionalReferenceImage": "Regional Reference Image",
         "globalReferenceImage": "Global Reference Image",
         "sendingToCanvas": "Staging Generations on Canvas",
@@ -2174,7 +2189,8 @@
             "rgReferenceImagesNotSupported": "regional Reference Images not supported for selected base model",
             "rgAutoNegativeNotSupported": "Auto-Negative not supported for selected base model",
             "rgNoRegion": "no region drawn",
-            "fluxFillIncompatibleWithControlLoRA": "Control LoRA is not compatible with FLUX Fill"
+            "fluxFillIncompatibleWithControlLoRA": "Control LoRA is not compatible with FLUX Fill",
+            "bboxHidden": "Bounding box is hidden (shift+o to toggle)"
         },
         "errors": {
             "unableToFindImage": "Unable to find image",
@@ -2533,7 +2549,7 @@
     },
     "ui": {
         "tabs": {
-            "generation": "Generation",
+            "generate": "Generate",
             "canvas": "Canvas",
             "workflows": "Workflows",
             "workflowsTab": "$t(ui.tabs.workflows) $t(common.tab)",
@@ -2544,6 +2560,12 @@
             "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)",
             "gallery": "Gallery"
         },
+        "panels": {
+            "launchpad": "Launchpad",
+            "workflowEditor": "Workflow Editor",
+            "imageViewer": "Image Viewer",
+            "canvas": "Canvas"
+        },
         "launchpad": {
             "workflowsTitle": "Go deep with Workflows.",
             "upscalingTitle": "Upscale and add detail.",
@@ -2551,6 +2573,28 @@
             "generateTitle": "Generate images from text prompts.",
             "modelGuideText": "Want to learn what prompts work best for each model?",
             "modelGuideLink": "Check out our Model Guide.",
+            "createNewWorkflowFromScratch": "Create a new Workflow from scratch",
+            "browseAndLoadWorkflows": "Browse and load existing workflows",
+            "addStyleRef": {
+                "title": "Add a Style Reference",
+                "description": "Add an image to transfer its look."
+            },
+            "editImage": {
+                "title": "Edit Image",
+                "description": "Add an image to refine."
+            },
+            "generateFromText": {
+                "title": "Generate from Text",
+                "description": "Enter a prompt and Invoke."
+            },
+            "useALayoutImage": {
+                "title": "Use a Layout Image",
+                "description": "Add an image to control composition."
+            },
+            "generate": {
+                "canvasCalloutTitle": "Looking to get more control, edit, and iterate on your images?",
+                "canvasCalloutLink": "Navigate to Canvas for more capabilities."
+            },
             "workflows": {
                 "description": "Workflows are reusable templates that automate image generation tasks, allowing you to quickly perform complex operations and get consistent results.",
                 "learnMoreLink": "Learn more about creating workflows",
@@ -2587,6 +2631,13 @@
                 "upscaleModel": "Upscale Model",
                 "model": "Model",
                 "scale": "Scale",
+                "creativityAndStructure": {
+                    "title": "Creativity & Structure Defaults",
+                    "conservative": "Conservative",
+                    "balanced": "Balanced",
+                    "creative": "Creative",
+                    "artistic": "Artistic"
+                },
                 "helpText": {
                     "promptAdvice": "When upscaling, use a prompt that describes the medium and style. Avoid describing specific content details in the image.",
                     "styleAdvice": "Upscaling works best with the general style of your image."
@@ -2631,10 +2682,8 @@
     "whatsNew": {
         "whatsNewInInvoke": "What's New in Invoke",
         "items": [
-            "New setting to send all Canvas generations directly to the Gallery.",
-            "New Invert Mask (Shift+V) and Fit BBox to Mask (Shift+B) capabilities.",
-            "Expanded support for Model Thumbnails and configurations.",
-            "Various other quality of life updates and fixes"
+            "Misc QoL: Toggle Bbox visibility, highlight nodes with errors, prevent adding node fields to Builder form multiple times, CLIP Skip metadata recallable",
+            "Reduced VRAM usage for multiple Kontext Ref images and VAE encoding"
         ],
         "readReleaseNotes": "Read Release Notes",
         "watchRecentReleaseVideos": "Watch Recent Release Videos",

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

@@ -399,7 +399,6 @@
     "ui": {
         "tabs": {
             "canvas": "Lienzo",
-            "generation": "Generación",
             "queue": "Cola",
             "workflows": "Flujos de trabajo",
             "models": "Modelos",

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

@@ -1820,7 +1820,6 @@
             "upscaling": "Agrandissement",
             "gallery": "Galerie",
             "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)",
-            "generation": "Génération",
             "workflows": "Workflows",
             "workflowsTab": "$t(ui.tabs.workflows) $t(common.tab)",
             "models": "Modèles",

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

@@ -128,7 +128,9 @@
         "search": "Cerca",
         "clear": "Cancella",
         "compactView": "Vista compatta",
-        "fullView": "Vista completa"
+        "fullView": "Vista completa",
+        "removeNegativePrompt": "Rimuovi prompt negativo",
+        "addNegativePrompt": "Aggiungi prompt negativo"
     },
     "gallery": {
         "galleryImageSize": "Dimensione dell'immagine",
@@ -410,6 +412,10 @@
             "cancelSegmentAnything": {
                 "title": "Annulla Segment Anything",
                 "desc": "Annulla l'operazione Segment Anything corrente."
+            },
+            "fitBboxToLayers": {
+                "title": "Adatta il riquadro di delimitazione ai livelli",
+                "desc": "Regola automaticamente il riquadro di delimitazione della generazione per adattarlo ai livelli visibili"
             }
         },
         "workflows": {
@@ -798,7 +804,7 @@
             "modelIncompatibleScaledBboxWidth": "La larghezza scalata del riquadro è {{width}} ma {{model}} richiede multipli di {{multiple}}",
             "modelIncompatibleScaledBboxHeight": "L'altezza scalata del riquadro è {{height}} ma {{model}} richiede multipli di {{multiple}}",
             "modelDisabledForTrial": "La generazione con {{modelName}} non è disponibile per gli account di prova. Accedi alle impostazioni del tuo account per effettuare l'upgrade.",
-            "fluxKontextMultipleReferenceImages": "È possibile utilizzare solo 1 immagine di riferimento alla volta con Flux Kontext",
+            "fluxKontextMultipleReferenceImages": "È possibile utilizzare solo 1 immagine di riferimento alla volta con FLUX Kontext tramite BFL API",
             "promptExpansionResultPending": "Accetta o ignora il risultato dell'espansione del prompt",
             "promptExpansionPending": "Espansione del prompt in corso"
         },
@@ -1173,8 +1179,8 @@
             "layeringStrategy": "Strategia livelli",
             "longestPath": "Percorso più lungo",
             "layoutDirection": "Direzione schema",
-            "layoutDirectionRight": "Orizzontale",
-            "layoutDirectionDown": "Verticale",
+            "layoutDirectionRight": "A destra",
+            "layoutDirectionDown": "In basso",
             "alignment": "Allineamento nodi",
             "alignmentUL": "In alto a sinistra",
             "alignmentDL": "In basso a sinistra",
@@ -1728,7 +1734,7 @@
         "structure": {
             "heading": "Struttura",
             "paragraphs": [
-                "La struttura determina quanto l'immagine finale rispecchierà il layout dell'originale. Un valore struttura basso permette cambiamenti significativi, mentre un valore struttura alto conserva la composizione e lo schema originali."
+                "La struttura determina quanto l'immagine finale rispecchierà lo schema dell'originale. Un valore struttura basso permette cambiamenti significativi, mentre un valore struttura alto conserva la composizione e lo schema originali."
             ]
         },
         "fluxDevLicense": {
@@ -2495,11 +2501,12 @@
             "off": "Spento"
         },
         "invertMask": "Inverti maschera",
-        "fitBboxToMasks": "Adatta il riquadro di delimitazione alle maschere"
+        "fitBboxToMasks": "Adatta il riquadro di delimitazione alle maschere",
+        "maxRefImages": "Max Immagini di rif.to",
+        "useAsReferenceImage": "Usa come immagine di riferimento"
     },
     "ui": {
         "tabs": {
-            "generation": "Generazione",
             "canvas": "Tela",
             "workflows": "Flussi di lavoro",
             "workflowsTab": "$t(ui.tabs.workflows) $t(common.tab)",
@@ -2508,7 +2515,8 @@
             "queue": "Coda",
             "upscaling": "Amplia",
             "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)",
-            "gallery": "Galleria"
+            "gallery": "Galleria",
+            "generate": "Genera"
         },
         "launchpad": {
             "workflowsTitle": "Approfondisci i flussi di lavoro.",
@@ -2556,8 +2564,43 @@
                 "helpText": {
                     "promptAdvice": "Durante l'ampliamento, utilizza un prompt che descriva il mezzo e lo stile. Evita di descrivere dettagli specifici del contenuto dell'immagine.",
                     "styleAdvice": "L'ampliamento funziona meglio con lo stile generale dell'immagine."
+                },
+                "creativityAndStructure": {
+                    "title": "Creatività e struttura predefinite",
+                    "conservative": "Conservativo",
+                    "balanced": "Bilanciato",
+                    "creative": "Creativo",
+                    "artistic": "Artistico"
                 }
+            },
+            "createNewWorkflowFromScratch": "Crea un nuovo flusso di lavoro da zero",
+            "browseAndLoadWorkflows": "Sfoglia e carica i flussi di lavoro esistenti",
+            "addStyleRef": {
+                "title": "Aggiungi un riferimento di stile",
+                "description": "Aggiungi un'immagine per trasferirne l'aspetto."
+            },
+            "editImage": {
+                "title": "Modifica immagine",
+                "description": "Aggiungi un'immagine da perfezionare."
+            },
+            "generateFromText": {
+                "title": "Genera da testo",
+                "description": "Inserisci un prompt e genera."
+            },
+            "useALayoutImage": {
+                "description": "Aggiungi un'immagine per controllare la composizione.",
+                "title": "Usa una immagine guida"
+            },
+            "generate": {
+                "canvasCalloutTitle": "Vuoi avere più controllo, modificare e affinare le tue immagini?",
+                "canvasCalloutLink": "Per ulteriori funzionalità, vai su Tela."
             }
+        },
+        "panels": {
+            "launchpad": "Rampa di lancio",
+            "workflowEditor": "Editor del flusso di lavoro",
+            "imageViewer": "Visualizzatore immagini",
+            "canvas": "Tela"
         }
     },
     "upscaling": {
@@ -2648,10 +2691,8 @@
         "watchRecentReleaseVideos": "Guarda i video su questa versione",
         "watchUiUpdatesOverview": "Guarda le novità dell'interfaccia",
         "items": [
-            "Nuova impostazione per inviare tutte le generazioni della Tela direttamente alla Galleria.",
-            "Nuove funzionalità Inverti maschera (Maiusc+V) e Adatta il Riquadro di delimitazione alla maschera (Maiusc+B).",
-            "Supporto esteso per miniature e configurazioni dei modelli.",
-            "Vari altri aggiornamenti e correzioni per la qualità della vita"
+            "Lo stato dello studio viene salvato sul server, consentendoti di continuare a lavorare su qualsiasi dispositivo.",
+            "Supporto per più immagini di riferimento per FLUX Kontext (solo modello locale)."
         ]
     },
     "system": {

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

@@ -1783,7 +1783,6 @@
             "workflows": "ワークフロー",
             "models": "モデル",
             "gallery": "ギャラリー",
-            "generation": "生成",
             "workflowsTab": "$t(ui.tabs.workflows) $t(common.tab)",
             "modelsTab": "$t(ui.tabs.models) $t(common.tab)",
             "upscaling": "アップスケーリング",

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

@@ -1931,7 +1931,6 @@
     },
     "ui": {
         "tabs": {
-            "generation": "Генерация",
             "canvas": "Холст",
             "workflowsTab": "$t(ui.tabs.workflows) $t(common.tab)",
             "models": "Модели",

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

@@ -252,7 +252,10 @@
         "clear": "Dọn Dẹp",
         "compactView": "Chế Độ Xem Gọn",
         "fullView": "Chế Độ Xem Đầy Đủ",
-        "options_withCount_other": "{{count}} thiết lập"
+        "options_withCount_other": "{{count}} thiết lập",
+        "removeNegativePrompt": "Xóa Lệnh Tiêu Cực",
+        "addNegativePrompt": "Thêm Lệnh Tiêu Cực",
+        "selectYourModel": "Chọn Model"
     },
     "prompt": {
         "addPromptTrigger": "Thêm Trigger Cho Lệnh",
@@ -299,7 +302,7 @@
         "pruneTooltip": "Cắt bớt {{item_count}} mục đã hoàn tất",
         "pruneSucceeded": "Đã cắt bớt {{item_count}} mục đã hoàn tất khỏi hàng",
         "clearTooltip": "Huỷ Và Dọn Dẹp Tất Cả Mục",
-        "clearQueueAlertDialog": "Dọn dẹp hàng đợi sẽ ngay lập tức huỷ tất cả mục đang xử lý và làm sạch hàng hoàn toàn. Bộ lọc đang chờ xử lý sẽ bị huỷ bỏ.",
+        "clearQueueAlertDialog": "Dọn dẹp hàng đợi sẽ ngay lập tức huỷ tất cả mục đang xử lý và làm sạch hàng hoàn toàn. Bộ lọc đang chờ xử lý sẽ bị huỷ bỏ và Vùng Dựng Canva sẽ được khởi động lại.",
         "session": "Phiên",
         "item": "Mục",
         "resumeFailed": "Có Vấn Đề Khi Tiếp Tục Bộ Xử Lý",
@@ -343,13 +346,14 @@
         "retrySucceeded": "Mục Đã Thử Lại",
         "retryFailed": "Có Vấn Đề Khi Thử Lại Mục",
         "retryItem": "Thử Lại Mục",
-        "credits": "Nguồn"
+        "credits": "Nguồn",
+        "cancelAllExceptCurrent": "Huỷ Bỏ Tất Cả Ngoại Trừ Mục Hiện Tại"
     },
     "hotkeys": {
         "canvas": {
             "fitLayersToCanvas": {
                 "title": "Xếp Vừa Layers Vào Canvas",
-                "desc": "Căn chỉnh để góc nhìn vừa vặn với tất cả layer."
+                "desc": "Căn chỉnh để góc nhìn vừa vặn với tất cả layer nhìn thấy dược."
             },
             "setZoomTo800Percent": {
                 "desc": "Phóng to canvas lên 800%.",
@@ -473,6 +477,28 @@
             "toggleNonRasterLayers": {
                 "title": "Bật/Tắt Layer Không Thuộc Dạng Raster",
                 "desc": "Hiện hoặc ẩn tất cả layer không thuộc dạng raster (Layer Điều Khiển Được, Lớp Phủ Inpaint, Chỉ Dẫn Khu Vực)."
+            },
+            "invertMask": {
+                "title": "Đảo Ngược Lớp Phủ",
+                "desc": "Đảo ngược lớp phủ inpaint được chọn, tạo một lớp phủ mới với độ trong suốt đối nghịch."
+            },
+            "fitBboxToMasks": {
+                "title": "Xếp Vừa Hộp Giới Hạn Vào Lớp Phủ",
+                "desc": "Tự động điểu chỉnh hộp giới hạn tạo sinh vừa vặn vào lớp phủ inpaint nhìn thấy được"
+            },
+            "applySegmentAnything": {
+                "title": "Áp Dụng Segment Anything",
+                "desc": "Áp dụng lớp phủ Segment Anything hiện tại.",
+                "key": "enter"
+            },
+            "cancelSegmentAnything": {
+                "title": "Huỷ Segment Anything",
+                "desc": "Huỷ hoạt động Segment Anything hiện tại.",
+                "key": "esc"
+            },
+            "fitBboxToLayers": {
+                "title": "Xếp Vừa Hộp Giới Hạn Vào Layer",
+                "desc": "Tự động điểu chỉnh hộp giới hạn tạo sinh vừa vặn vào layer nhìn thấy được"
             }
         },
         "workflows": {
@@ -602,6 +628,10 @@
             "clearSelection": {
                 "desc": "Xoá phần lựa chọn hiện tại nếu có.",
                 "title": "Xoá Phần Lựa Chọn"
+            },
+            "starImage": {
+                "title": "Dấu/Huỷ Sao Hình Ảnh",
+                "desc": "Đánh dấu sao hoặc huỷ đánh dấu sao ảnh được chọn."
             }
         },
         "app": {
@@ -661,6 +691,11 @@
             "selectModelsTab": {
                 "desc": "Chọn tab Model (Mô Hình).",
                 "title": "Chọn Tab Model"
+            },
+            "selectGenerateTab": {
+                "title": "Chọn Tab Tạo Sinh",
+                "desc": "Chọn tab Tạo Sinh.",
+                "key": "1"
             }
         },
         "searchHotkeys": "Tìm Phím tắt",
@@ -870,7 +905,8 @@
         "recallParameters": "Gợi Nhớ Tham Số",
         "scheduler": "Scheduler",
         "noMetaData": "Không tìm thấy metadata",
-        "imageDimensions": "Kích Thước Ảnh"
+        "imageDimensions": "Kích Thước Ảnh",
+        "clipSkip": "$t(parameters.clipSkip)"
     },
     "accordions": {
         "generation": {
@@ -1090,7 +1126,23 @@
         "unknownField_withName": "Vùng Dữ Liệu Không Rõ \"{{name}}\"",
         "unexpectedField_withName": "Sai Vùng Dữ Liệu \"{{name}}\"",
         "unknownFieldEditWorkflowToFix_withName": "Workflow chứa vùng dữ liệu không rõ \"{{name}}\".\nHãy biên tập workflow để sửa lỗi.",
-        "missingField_withName": "Thiếu Vùng Dữ Liệu \"{{name}}\""
+        "missingField_withName": "Thiếu Vùng Dữ Liệu \"{{name}}\"",
+        "layout": {
+            "autoLayout": "Bố Cục Tự Động",
+            "layeringStrategy": "Chiến Lược Phân Layer",
+            "networkSimplex": "Network Simplex",
+            "longestPath": "Đường Đi Dài Nhất",
+            "nodeSpacing": "Khoảng Cách Node",
+            "layerSpacing": "Khoảng Cách Layer",
+            "layoutDirection": "Hướng Bố Cục",
+            "layoutDirectionRight": "Phải",
+            "layoutDirectionDown": "Xuống",
+            "alignment": "Căn Chỉnh Node",
+            "alignmentUL": "Trên Cùng Bên Trái",
+            "alignmentDL": "Dưới Cùng Bên Trái",
+            "alignmentUR": "Trên Cùng Bên Phải",
+            "alignmentDR": "Dưới Cùng Bên Phải"
+        }
     },
     "popovers": {
         "paramCFGRescaleMultiplier": {
@@ -1597,7 +1649,7 @@
             "modelIncompatibleScaledBboxHeight": "Chiều dài hộp giới hạn theo tỉ lệ là {{height}} nhưng {{model}} yêu cầu bội số của {{multiple}}",
             "modelIncompatibleScaledBboxWidth": "Chiều rộng hộp giới hạn theo tỉ lệ là {{width}} nhưng {{model}} yêu cầu bội số của {{multiple}}",
             "modelDisabledForTrial": "Tạo sinh với {{modelName}} là không thể với tài khoản trial. Vào phần thiết lập tài khoản để nâng cấp.",
-            "fluxKontextMultipleReferenceImages": "Chỉ có thể dùng 1 Ảnh Mẫu cùng lúc với Flux Kontext",
+            "fluxKontextMultipleReferenceImages": "Chỉ có thể dùng 1 Ảnh Mẫu cùng lúc với LUX Kontext thông qua BFL API",
             "promptExpansionPending": "Trong quá trình mở rộng lệnh",
             "promptExpansionResultPending": "Hãy chấp thuận hoặc huỷ bỏ kết quả mở rộng lệnh của bạn"
         },
@@ -1663,7 +1715,8 @@
         "upscaling": "Upscale",
         "tileSize": "Kích Thước Khối",
         "disabledNoRasterContent": "Đã Tắt (Không Có Nội Dung Dạng Raster)",
-        "modelDisabledForTrial": "Tạo sinh với {{modelName}} là không thể với tài khoản trial. Vào phần <LinkComponent>thiết lập tài khoản</LinkComponent> để nâng cấp."
+        "modelDisabledForTrial": "Tạo sinh với {{modelName}} là không thể với tài khoản trial. Vào phần <LinkComponent>thiết lập tài khoản</LinkComponent> để nâng cấp.",
+        "useClipSkip": "Dùng CLIP Skip"
     },
     "dynamicPrompts": {
         "seedBehaviour": {
@@ -2154,7 +2207,8 @@
             "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ẽ",
-            "fluxFillIncompatibleWithControlLoRA": "LoRA Điều Khiển Được không tương tích với FLUX Fill"
+            "fluxFillIncompatibleWithControlLoRA": "LoRA Điều Khiển Được không tương tích với FLUX Fill",
+            "bboxHidden": "Hộp giới hạn đang ẩn (shift+o để bật/tắt)"
         },
         "pasteTo": "Dán Vào",
         "pasteToAssets": "Tài Nguyên",
@@ -2192,7 +2246,11 @@
             "off": "Tắt",
             "switchOnStart": "Khi Bắt Đầu",
             "switchOnFinish": "Khi Kết Thúc"
-        }
+        },
+        "fitBboxToMasks": "Xếp Vừa Hộp Giới Hạn Vào Lớp Phủ",
+        "invertMask": "Đảo Ngược Lớp Phủ",
+        "maxRefImages": "Ảnh Mẫu Tối Đa",
+        "useAsReferenceImage": "Dùng Làm Ảnh Mẫu"
     },
     "stylePresets": {
         "negativePrompt": "Lệnh Tiêu Cực",
@@ -2354,20 +2412,28 @@
         "noValidLayerAdapters": "Không có Layer Adaper Phù Hợp",
         "promptGenerationStarted": "Trình tạo sinh lệnh khởi động",
         "uploadAndPromptGenerationFailed": "Thất bại khi tải lên ảnh để tạo sinh lệnh",
-        "promptExpansionFailed": "Có vấn đề xảy ra. Hãy thử mở rộng lệnh lại."
+        "promptExpansionFailed": "Có vấn đề xảy ra. Hãy thử mở rộng lệnh lại.",
+        "maskInverted": "Đã Đảo Ngược Lớp Phủ",
+        "maskInvertFailed": "Thất Bại Khi Đảo Ngược Lớp Phủ",
+        "noVisibleMasks": "Không Có Lớp Phủ Đang Hiển Thị",
+        "noVisibleMasksDesc": "Tạo hoặc bật ít nhất một lớp phủ inpaint để đảo ngược",
+        "noInpaintMaskSelected": "Không Có Lớp Phủ Inpant Được Chọn",
+        "noInpaintMaskSelectedDesc": "Chọn một lớp phủ inpaint để đảo ngược",
+        "invalidBbox": "Hộp Giới Hạn Không Hợp Lệ",
+        "invalidBboxDesc": "Hợp giới hạn có kích thước không hợp lệ"
     },
     "ui": {
         "tabs": {
             "gallery": "Thư Viện Ảnh",
             "models": "Models",
-            "generation": "Generation (Máy Tạo Sinh)",
             "upscaling": "Upscale (Nâng Cấp Chất Lượng Hình Ảnh)",
             "canvas": "Canvas (Vùng Ảnh)",
             "upscalingTab": "$t(common.tab) $t(ui.tabs.upscaling)",
             "modelsTab": "$t(common.tab) $t(ui.tabs.models)",
             "queue": "Queue (Hàng Đợi)",
             "workflows": "Workflow (Luồng Làm Việc)",
-            "workflowsTab": "$t(common.tab) $t(ui.tabs.workflows)"
+            "workflowsTab": "$t(common.tab) $t(ui.tabs.workflows)",
+            "generate": "Tạo Sinh"
         },
         "launchpad": {
             "workflowsTitle": "Đi sâu hơn với Workflow.",
@@ -2415,8 +2481,43 @@
                     "promptAdvice": "Khi upscale, dùng lệnh để mô tả phương thức và phong cách. Tránh mô tả các chi tiết cụ thể trong ảnh.",
                     "styleAdvice": "Upscale thích hợp nhất cho phong cách chung của ảnh."
                 },
-                "scale": "Kích Thước"
+                "scale": "Kích Thước",
+                "creativityAndStructure": {
+                    "title": "Độ Sáng Tạo & Cấu Trúc Mặc Định",
+                    "conservative": "Bảo toàn",
+                    "balanced": "Cân bằng",
+                    "creative": "Sáng tạo",
+                    "artistic": "Thẩm mỹ"
+                }
+            },
+            "createNewWorkflowFromScratch": "Tạo workflow mới từ đầu",
+            "browseAndLoadWorkflows": "Duyệt và tải workflow có sẵn",
+            "addStyleRef": {
+                "title": "Thêm Phong Cách Mẫu",
+                "description": "Thêm ảnh để chuyển đổi diện mạo của nó."
+            },
+            "editImage": {
+                "title": "Biên Tập Ảnh",
+                "description": "Thêm ảnh để chỉnh sửa."
+            },
+            "generateFromText": {
+                "title": "Tạo Sinh Từ Chữ",
+                "description": "Nhập lệnh vào và Kích Hoạt."
+            },
+            "useALayoutImage": {
+                "title": "Dùng Bố Cục Ảnh",
+                "description": "Thêm ảnh để điều khiển bố cục."
+            },
+            "generate": {
+                "canvasCalloutTitle": "Đang tìm cách để điều khiển, chỉnh sửa, và làm lại ảnh?",
+                "canvasCalloutLink": "Vào Canvas cho nhiều tính năng hơn."
             }
+        },
+        "panels": {
+            "launchpad": "Launchpad",
+            "workflowEditor": "Trình Biên Tập Workflow",
+            "imageViewer": "Trình Xem Ảnh",
+            "canvas": "Canvas"
         }
     },
     "workflows": {
@@ -2588,9 +2689,8 @@
         "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": [
-            "Tạo sinh ảnh nhanh hơn với Launchpad và thẻ Tạo Sinh đã cơ bản hoá.",
-            "Biên tập với lệnh bằng Flux Kontext Dev.",
-            "Xuất ra file PSD, ẩn số lượng lớn lớp phủ, sắp xếp model & ảnh — tất cả cho một giao diện đã thiết kế lại để chuyên điều khiển."
+            "Trạng thái Studio được lưu vào server, giúp bạn tiếp tục công việc ở mọi thiết bị.",
+            "Hỗ trợ nhiều ảnh mẫu cho FLUX KONTEXT (chỉ cho model trên máy)."
         ]
     },
     "upsell": {

invokeai/frontend/web/public/locales/zh-CN.json

@@ -1772,7 +1772,6 @@
     },
     "ui": {
         "tabs": {
-            "generation": "生成",
             "queue": "队列",
             "canvas": "画布",
             "upscaling": "放大中",

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

@@ -2,8 +2,8 @@ import { Box } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { GlobalHookIsolator } from 'app/components/GlobalHookIsolator';
 import { GlobalModalIsolator } from 'app/components/GlobalModalIsolator';
-import { useClearStorage } from 'app/contexts/clear-storage-context';
 import { $didStudioInit, type StudioInitAction } from 'app/hooks/useStudioInitAction';
+import { clearStorage } from 'app/store/enhancers/reduxRemember/driver';
 import type { PartialAppConfig } from 'app/types/invokeai';
 import Loading from 'common/components/Loading/Loading';
 import { AppContent } from 'features/ui/components/AppContent';
@@ -21,13 +21,12 @@ interface Props {
 
 const App = ({ config = DEFAULT_CONFIG, studioInitAction }: Props) => {
   const didStudioInit = useStore($didStudioInit);
-  const clearStorage = useClearStorage();
 
   const handleReset = useCallback(() => {
     clearStorage();
     location.reload();
     return false;
-  }, [clearStorage]);
+  }, []);
 
   return (
     <ThemeLocaleProvider>

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

@@ -1,12 +1,11 @@
 import 'i18n';
 
 import type { Middleware } from '@reduxjs/toolkit';
-import { ClearStorageProvider } from 'app/contexts/clear-storage-context';
 import type { StudioInitAction } from 'app/hooks/useStudioInitAction';
 import { $didStudioInit } from 'app/hooks/useStudioInitAction';
 import type { LoggingOverrides } from 'app/logging/logger';
 import { $loggingOverrides, configureLogging } from 'app/logging/logger';
-import { buildStorageApi } from 'app/store/enhancers/reduxRemember/driver';
+import { addStorageListeners } from 'app/store/enhancers/reduxRemember/driver';
 import { $accountSettingsLink } from 'app/store/nanostores/accountSettingsLink';
 import { $authToken } from 'app/store/nanostores/authToken';
 import { $baseUrl } from 'app/store/nanostores/baseUrl';
@@ -37,7 +36,7 @@ import {
 import type { WorkflowCategory } from 'features/nodes/types/workflow';
 import type { ToastConfig } from 'features/toast/toast';
 import type { PropsWithChildren, ReactNode } from 'react';
-import React, { lazy, memo, useEffect, useLayoutEffect, useMemo } from 'react';
+import React, { lazy, memo, useEffect, useLayoutEffect, useState } from 'react';
 import { Provider } from 'react-redux';
 import { addMiddleware, resetMiddlewares } from 'redux-dynamic-middlewares';
 import { $socketOptions } from 'services/events/stores';
@@ -72,14 +71,7 @@ interface Props extends PropsWithChildren {
    * If provided, overrides in-app navigation to the model manager
    */
   onClickGoToModelManager?: () => void;
-  storageConfig?: {
-    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    getItem: (key: string) => Promise<any>;
-    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    setItem: (key: string, value: any) => Promise<any>;
-    clear: () => Promise<void>;
-    persistThrottle: number;
-  };
+  storagePersistDebounce?: number;
 }
 
 const InvokeAIUI = ({
@@ -106,8 +98,11 @@ const InvokeAIUI = ({
   loggingOverrides,
   onClickGoToModelManager,
   whatsNew,
-  storageConfig,
+  storagePersistDebounce = 300,
 }: Props) => {
+  const [store, setStore] = useState<ReturnType<typeof createStore> | undefined>(undefined);
+  const [didRehydrate, setDidRehydrate] = useState(false);
+
   useLayoutEffect(() => {
     /*
      * We need to configure logging before anything else happens - useLayoutEffect ensures we set this at the first
@@ -319,44 +314,38 @@ const InvokeAIUI = ({
     };
   }, [isDebugging]);
 
-  const storage = useMemo(() => buildStorageApi(storageConfig), [storageConfig]);
-
   useEffect(() => {
-    const storageCleanup = storage.registerListeners();
-    return () => {
-      storageCleanup();
+    const onRehydrated = () => {
+      setDidRehydrate(true);
     };
-  }, [storage]);
-
-  const store = useMemo(() => {
-    return createStore({
-      driver: storage.reduxRememberDriver,
-      persistThrottle: storageConfig?.persistThrottle ?? 2000,
-    });
-  }, [storage.reduxRememberDriver, storageConfig?.persistThrottle]);
-
-  useEffect(() => {
+    const store = createStore({ persist: true, persistDebounce: storagePersistDebounce, onRehydrated });
+    setStore(store);
     $store.set(store);
     if (import.meta.env.MODE === 'development') {
       window.$store = $store;
     }
+    const removeStorageListeners = addStorageListeners();
     return () => {
+      removeStorageListeners();
+      setStore(undefined);
       $store.set(undefined);
       if (import.meta.env.MODE === 'development') {
         window.$store = undefined;
       }
     };
-  }, [store]);
+  }, [storagePersistDebounce]);
+
+  if (!store || !didRehydrate) {
+    return <Loading />;
+  }
 
   return (
     <React.StrictMode>
-      <ClearStorageProvider value={storage.clearStorage}>
-        <Provider store={store}>
-          <React.Suspense fallback={<Loading />}>
-            <App config={config} studioInitAction={studioInitAction} />
-          </React.Suspense>
-        </Provider>
-      </ClearStorageProvider>
+      <Provider store={store}>
+        <React.Suspense fallback={<Loading />}>
+          <App config={config} studioInitAction={studioInitAction} />
+        </React.Suspense>
+      </Provider>
     </React.StrictMode>
   );
 };

invokeai/frontend/web/src/app/contexts/clear-storage-context.tsx

@@ -1,10 +0,0 @@
-import { createContext, useContext } from 'react';
-
-const ClearStorageContext = createContext<() => void>(() => {});
-
-export const ClearStorageProvider = ClearStorageContext.Provider;
-
-export const useClearStorage = () => {
-  const context = useContext(ClearStorageContext);
-  return context;
-};

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

@@ -93,5 +93,7 @@ export const configureLogging = (
     localStorage.setItem('ROARR_FILTER', filter);
   }
 
-  ROARR.write = createLogWriter();
+  const styleOutput = localStorage.getItem('ROARR_STYLE_OUTPUT') === 'false' ? false : true;
+
+  ROARR.write = createLogWriter({ styleOutput });
 };

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

@@ -1,243 +1,209 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
 import { logger } from 'app/logging/logger';
 import { StorageError } from 'app/store/enhancers/reduxRemember/errors';
+import { $authToken } from 'app/store/nanostores/authToken';
 import { $projectId } from 'app/store/nanostores/projectId';
-import type { Driver as ReduxRememberDriver } from 'redux-remember';
-import { getBaseUrl } from 'services/api';
-import { buildAppInfoUrl } from 'services/api/endpoints/appInfo';
+import { $queueId } from 'app/store/nanostores/queueId';
+import type { UseStore } from 'idb-keyval';
+import { createStore as idbCreateStore, del as idbDel, get as idbGet } from 'idb-keyval';
+import type { Driver } from 'redux-remember';
+import { serializeError } from 'serialize-error';
+import { buildV1Url, getBaseUrl } from 'services/api';
+import type { JsonObject } from 'type-fest';
 
 const log = logger('system');
 
-const buildOSSServerBackedDriver = (): {
-  reduxRememberDriver: ReduxRememberDriver;
-  clearStorage: () => Promise<void>;
-  registerListeners: () => () => void;
-} => {
-  // Persistence happens per slice. To track when persistence is in progress, maintain a ref count, incrementing
-  // it when a slice is being persisted and decrementing it when the persistence is done.
-  let persistRefCount = 0;
+const getUrl = (endpoint: 'get_by_key' | 'set_by_key' | 'delete', key?: string) => {
+  const baseUrl = getBaseUrl();
+  const query: Record<string, string> = {};
+  if (key) {
+    query['key'] = key;
+  }
 
-  // Keep track of the last persisted state for each key to avoid unnecessary network requests.
-  //
-  // `redux-remember` persists individual slices of state, so we can implicity denylist a slice by not giving it a
-  // persist config.
-  //
-  // However, we may need to avoid persisting individual _fields_ of a slice. `redux-remember` does not provide a
-  // way to do this directly.
-  //
-  // To accomplish this, we add a layer of logic on top of the `redux-remember`. In the state serializer function
-  // provided to `redux-remember`, we can omit certain fields from the state that we do not want to persist. See
-  // the implementation in `store.ts` for this logic.
-  //
-  // This logic is unknown to `redux-remember`. When an omitted field changes, it will still attempt to persist the
-  // whole slice, even if the final, _serialized_ slice value is unchanged.
-  //
-  // To avoid unnecessary network requests, we keep track of the last persisted state for each key. If the value to
-  // be persisted is the same as the last persisted value, we can skip the network request.
-  const lastPersistedState = new Map<string, unknown>();
-
-  const getUrl = (key?: string) => {
-    const baseUrl = getBaseUrl();
-    const query: Record<string, string> = {};
-    if (key) {
-      query['key'] = key;
-    }
-    const path = buildAppInfoUrl('client_state', query);
-    const url = `${baseUrl}/${path}`;
-    return url;
-  };
-
-  const reduxRememberDriver: ReduxRememberDriver = {
-    getItem: async (key) => {
-      try {
-        const url = getUrl(key);
-        const res = await fetch(url, { method: 'GET' });
-        if (!res.ok) {
-          throw new Error(`Response status: ${res.status}`);
-        }
-        const text = await res.text();
-        if (!lastPersistedState.get(key)) {
-          lastPersistedState.set(key, text);
-        }
-        return JSON.parse(text);
-      } catch (originalError) {
-        throw new StorageError({
-          key,
-          projectId: $projectId.get(),
-          originalError,
-        });
-      }
-    },
-    setItem: async (key, value) => {
-      try {
-        persistRefCount++;
-        if (lastPersistedState.get(key) === value) {
-          log.trace(`Skipping persist for key "${key}" as value is unchanged.`);
-          return value;
-        }
-        const url = getUrl(key);
-        const headers = new Headers({
-          'Content-Type': 'application/json',
-        });
-        const res = await fetch(url, { method: 'POST', headers, body: value });
-        if (!res.ok) {
-          throw new Error(`Response status: ${res.status}`);
-        }
-
-        lastPersistedState.set(key, value);
-        return value;
-      } catch (originalError) {
-        throw new StorageError({
-          key,
-          value,
-          projectId: $projectId.get(),
-          originalError,
-        });
-      } finally {
-        persistRefCount--;
-        if (persistRefCount < 0) {
-          log.trace('Persist ref count is negative, resetting to 0');
-          persistRefCount = 0;
-        }
-      }
-    },
-  };
-
-  const clearStorage = async () => {
-    try {
-      persistRefCount++;
-      const url = getUrl();
-      const res = await fetch(url, { method: 'DELETE' });
-      if (!res.ok) {
-        throw new Error(`Response status: ${res.status}`);
-      }
-    } catch {
-      log.error('Failed to reset client state');
-    } finally {
-      persistRefCount--;
-      lastPersistedState.clear();
-      if (persistRefCount < 0) {
-        log.trace('Persist ref count is negative, resetting to 0');
-        persistRefCount = 0;
-      }
-    }
-  };
-
-  const registerListeners = () => {
-    const onBeforeUnload = (e: BeforeUnloadEvent) => {
-      if (persistRefCount > 0) {
-        e.preventDefault();
-      }
-    };
-    window.addEventListener('beforeunload', onBeforeUnload);
-
-    return () => {
-      window.removeEventListener('beforeunload', onBeforeUnload);
-    };
-  };
-
-  return { reduxRememberDriver, clearStorage, registerListeners };
+  const path = buildV1Url(`client_state/${$queueId.get()}/${endpoint}`, query);
+  const url = `${baseUrl}/${path}`;
+  return url;
 };
 
-const buildCustomDriver = (api: {
-  getItem: (key: string) => Promise<any>;
-  setItem: (key: string, value: any) => Promise<any>;
-  clear: () => Promise<void>;
-}): {
-  reduxRememberDriver: ReduxRememberDriver;
-  clearStorage: () => Promise<void>;
-  registerListeners: () => () => void;
-} => {
-  // See the comment in `buildOSSServerBackedDriver` for an explanation of this variable.
-  let persistRefCount = 0;
-
-  // See the comment in `buildOSSServerBackedDriver` for an explanation of this variable.
-  const lastPersistedState = new Map<string, unknown>();
-
-  const reduxRememberDriver: ReduxRememberDriver = {
-    getItem: async (key) => {
-      try {
-        log.trace(`Getting client state for key "${key}"`);
-        return await api.getItem(key);
-      } catch (originalError) {
-        throw new StorageError({
-          key,
-          projectId: $projectId.get(),
-          originalError,
-        });
-      }
-    },
-    setItem: async (key, value) => {
-      try {
-        persistRefCount++;
-
-        if (lastPersistedState.get(key) === value) {
-          log.trace(`Skipping setting client state for key "${key}" as value is unchanged`);
-          return value;
-        }
-        log.trace(`Setting client state for key "${key}", ${value}`);
-        await api.setItem(key, value);
-        lastPersistedState.set(key, value);
-        return value;
-      } catch (originalError) {
-        throw new StorageError({
-          key,
-          value,
-          projectId: $projectId.get(),
-          originalError,
-        });
-      } finally {
-        persistRefCount--;
-        if (persistRefCount < 0) {
-          log.trace('Persist ref count is negative, resetting to 0');
-          persistRefCount = 0;
-        }
-      }
-    },
-  };
-
-  const clearStorage = async () => {
-    try {
-      persistRefCount++;
-      log.trace('Clearing client state');
-      await api.clear();
-    } catch {
-      log.error('Failed to clear client state');
-    } finally {
-      persistRefCount--;
-      lastPersistedState.clear();
-      if (persistRefCount < 0) {
-        log.trace('Persist ref count is negative, resetting to 0');
-        persistRefCount = 0;
-      }
-    }
-  };
-
-  const registerListeners = () => {
-    const onBeforeUnload = (e: BeforeUnloadEvent) => {
-      if (persistRefCount > 0) {
-        e.preventDefault();
-      }
-    };
-    window.addEventListener('beforeunload', onBeforeUnload);
-
-    return () => {
-      window.removeEventListener('beforeunload', onBeforeUnload);
-    };
-  };
-
-  return { reduxRememberDriver, clearStorage, registerListeners };
+const getHeaders = () => {
+  const headers = new Headers();
+  const authToken = $authToken.get();
+  const projectId = $projectId.get();
+  if (authToken) {
+    headers.set('Authorization', `Bearer ${authToken}`);
+  }
+  if (projectId) {
+    headers.set('project-id', projectId);
+  }
+  return headers;
 };
 
-export const buildStorageApi = (api?: {
-  getItem: (key: string) => Promise<any>;
-  setItem: (key: string, value: any) => Promise<any>;
-  clear: () => Promise<void>;
-}) => {
-  if (api) {
-    return buildCustomDriver(api);
-  } else {
-    return buildOSSServerBackedDriver();
+// Persistence happens per slice. To track when persistence is in progress, maintain a ref count, incrementing
+// it when a slice is being persisted and decrementing it when the persistence is done.
+let persistRefCount = 0;
+
+// Keep track of the last persisted state for each key to avoid unnecessary network requests.
+//
+// `redux-remember` persists individual slices of state, so we can implicity denylist a slice by not giving it a
+// persist config.
+//
+// However, we may need to avoid persisting individual _fields_ of a slice. `redux-remember` does not provide a
+// way to do this directly.
+//
+// To accomplish this, we add a layer of logic on top of the `redux-remember`. In the state serializer function
+// provided to `redux-remember`, we can omit certain fields from the state that we do not want to persist. See
+// the implementation in `store.ts` for this logic.
+//
+// This logic is unknown to `redux-remember`. When an omitted field changes, it will still attempt to persist the
+// whole slice, even if the final, _serialized_ slice value is unchanged.
+//
+// To avoid unnecessary network requests, we keep track of the last persisted state for each key in this map.
+// If the value to be persisted is the same as the last persisted value, we will skip the network request.
+const lastPersistedState = new Map<string, string | undefined>();
+
+// As of v6.3.0, we use server-backed storage for client state. This replaces the previous IndexedDB-based storage,
+// which was implemented using `idb-keyval`.
+//
+// To facilitate a smooth transition, we implement a migration strategy that attempts to retrieve values from IndexedDB
+// and persist them to the new server-backed storage. This is done on a best-effort basis.
+
+// These constants were used in the previous IndexedDB-based storage implementation.
+const IDB_DB_NAME = 'invoke';
+const IDB_STORE_NAME = 'invoke-store';
+const IDB_STORAGE_PREFIX = '@@invokeai-';
+
+// Lazy store creation
+let _idbKeyValStore: UseStore | null = null;
+const getIdbKeyValStore = () => {
+  if (_idbKeyValStore === null) {
+    _idbKeyValStore = idbCreateStore(IDB_DB_NAME, IDB_STORE_NAME);
+  }
+  return _idbKeyValStore;
+};
+
+const getIdbKey = (key: string) => {
+  return `${IDB_STORAGE_PREFIX}${key}`;
+};
+
+const getItem = async (key: string) => {
+  try {
+    const url = getUrl('get_by_key', key);
+    const headers = getHeaders();
+    const res = await fetch(url, { method: 'GET', headers });
+    if (!res.ok) {
+      throw new Error(`Response status: ${res.status}`);
+    }
+    const value = await res.json();
+
+    // Best-effort migration from IndexedDB to the new storage system
+    log.trace({ key, value }, 'Server-backed storage value retrieved');
+
+    if (!value) {
+      const idbKey = getIdbKey(key);
+      try {
+        // It's a bit tricky to query IndexedDB directly to check if value exists, so we use `idb-keyval` to do it.
+        // Thing is, `idb-keyval` requires you to create a store to query it. End result - we are creating a store
+        // even if we don't use it for anything besides checking if the key is present.
+        const idbKeyValStore = getIdbKeyValStore();
+        const idbValue = await idbGet(idbKey, idbKeyValStore);
+        if (idbValue) {
+          log.debug(
+            { key, idbKey, idbValue },
+            'No value in server-backed storage, but found value in IndexedDB - attempting migration'
+          );
+          await idbDel(idbKey, idbKeyValStore);
+          await setItem(key, idbValue);
+          log.debug({ key, idbKey, idbValue }, 'Migration successful');
+          return idbValue;
+        }
+      } catch (error) {
+        // Just log if IndexedDB retrieval fails - this is a best-effort migration.
+        log.debug(
+          { key, idbKey, error: serializeError(error) } as JsonObject,
+          'Error checking for or migrating from IndexedDB'
+        );
+      }
+    }
+
+    lastPersistedState.set(key, value);
+    log.trace({ key, last: lastPersistedState.get(key), next: value }, `Getting state for ${key}`);
+    return value;
+  } catch (originalError) {
+    throw new StorageError({
+      key,
+      projectId: $projectId.get(),
+      originalError,
+    });
   }
 };
+
+const setItem = async (key: string, value: string) => {
+  try {
+    persistRefCount++;
+    if (lastPersistedState.get(key) === value) {
+      log.trace(
+        { key, last: lastPersistedState.get(key), next: value },
+        `Skipping persist for ${key} as value is unchanged`
+      );
+      return value;
+    }
+    log.trace({ key, last: lastPersistedState.get(key), next: value }, `Persisting state for ${key}`);
+    const url = getUrl('set_by_key', key);
+    const headers = getHeaders();
+    const res = await fetch(url, { method: 'POST', headers, body: value });
+    if (!res.ok) {
+      throw new Error(`Response status: ${res.status}`);
+    }
+    const resultValue = await res.json();
+    lastPersistedState.set(key, resultValue);
+    return resultValue;
+  } catch (originalError) {
+    throw new StorageError({
+      key,
+      value,
+      projectId: $projectId.get(),
+      originalError,
+    });
+  } finally {
+    persistRefCount--;
+    if (persistRefCount < 0) {
+      log.trace('Persist ref count is negative, resetting to 0');
+      persistRefCount = 0;
+    }
+  }
+};
+
+export const reduxRememberDriver: Driver = { getItem, setItem };
+
+export const clearStorage = async () => {
+  try {
+    persistRefCount++;
+    const url = getUrl('delete');
+    const headers = getHeaders();
+    const res = await fetch(url, { method: 'POST', headers });
+    if (!res.ok) {
+      throw new Error(`Response status: ${res.status}`);
+    }
+  } catch {
+    log.error('Failed to reset client state');
+  } finally {
+    persistRefCount--;
+    lastPersistedState.clear();
+    if (persistRefCount < 0) {
+      log.trace('Persist ref count is negative, resetting to 0');
+      persistRefCount = 0;
+    }
+  }
+};
+
+export const addStorageListeners = () => {
+  const onBeforeUnload = (e: BeforeUnloadEvent) => {
+    if (persistRefCount > 0) {
+      e.preventDefault();
+    }
+  };
+  window.addEventListener('beforeunload', onBeforeUnload);
+
+  return () => {
+    window.removeEventListener('beforeunload', onBeforeUnload);
+  };
+};

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

@@ -33,8 +33,9 @@ export class StorageError extends Error {
   }
 }
 
+const log = logger('system');
+
 export const errorHandler = (err: PersistError | RehydrateError) => {
-  const log = logger('system');
   if (err instanceof PersistError) {
     log.error({ error: serializeError(err) }, 'Problem persisting state');
   } else if (err instanceof RehydrateError) {

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

@@ -1,5 +1,5 @@
 import type { ThunkDispatch, TypedStartListening, UnknownAction } from '@reduxjs/toolkit';
-import { addListener, combineReducers, configureStore, createListenerMiddleware } from '@reduxjs/toolkit';
+import { addListener, combineReducers, configureStore, createAction, createListenerMiddleware } from '@reduxjs/toolkit';
 import { logger } from 'app/logging/logger';
 import { errorHandler } from 'app/store/enhancers/reduxRemember/errors';
 import { addAdHocPostProcessingRequestedListener } from 'app/store/middleware/listenerMiddleware/listeners/addAdHocPostProcessingRequestedListener';
@@ -40,14 +40,15 @@ import { systemSliceConfig } from 'features/system/store/systemSlice';
 import { uiSliceConfig } from 'features/ui/store/uiSlice';
 import { diff } from 'jsondiffpatch';
 import dynamicMiddlewares from 'redux-dynamic-middlewares';
-import type { Driver, SerializeFunction, UnserializeFunction } from 'redux-remember';
-import { rememberEnhancer, rememberReducer } from 'redux-remember';
+import type { SerializeFunction, UnserializeFunction } from 'redux-remember';
+import { REMEMBER_REHYDRATED, rememberEnhancer, rememberReducer } from 'redux-remember';
 import undoable, { newHistory } from 'redux-undo';
 import { serializeError } from 'serialize-error';
 import { api } from 'services/api';
 import { authToastMiddleware } from 'services/api/authToastMiddleware';
 import type { JsonObject } from 'type-fest';
 
+import { reduxRememberDriver } from './enhancers/reduxRemember/driver';
 import { actionSanitizer } from './middleware/devtools/actionSanitizer';
 import { actionsDenylist } from './middleware/devtools/actionsDenylist';
 import { stateSanitizer } from './middleware/devtools/stateSanitizer';
@@ -127,9 +128,10 @@ const unserialize: UnserializeFunction = (data, key) => {
   let state;
   try {
     const initialState = getInitialState();
+    const parsed = JSON.parse(data);
 
     // strip out old keys
-    const stripped = pick(deepClone(data), keys(initialState));
+    const stripped = pick(deepClone(parsed), keys(initialState));
     /*
      * Merge in initial state as default values, covering any missing keys. You might be tempted to use _.defaultsDeep,
      * but that merges arrays by index and partial objects by key. Using an identity function as the customizer results
@@ -141,7 +143,7 @@ const unserialize: UnserializeFunction = (data, key) => {
 
     log.debug(
       {
-        persistedData: data as JsonObject,
+        persistedData: parsed as JsonObject,
         rehydratedData: migrated as JsonObject,
         diff: diff(data, migrated) as JsonObject,
       },
@@ -182,8 +184,8 @@ const PERSISTED_KEYS = Object.values(SLICE_CONFIGS)
   .filter((sliceConfig) => !!sliceConfig.persistConfig)
   .map((sliceConfig) => sliceConfig.slice.reducerPath);
 
-export const createStore = (reduxRememberOptions: { driver: Driver; persistThrottle: number }) =>
-  configureStore({
+export const createStore = (options?: { persist?: boolean; persistDebounce?: number; onRehydrated?: () => void }) => {
+  const store = configureStore({
     reducer: rememberedRootReducer,
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({
@@ -195,19 +197,23 @@ export const createStore = (reduxRememberOptions: { driver: Driver; persistThrot
         .concat(api.middleware)
         .concat(dynamicMiddlewares)
         .concat(authToastMiddleware)
-        // .concat(getDebugLoggerMiddleware())
+        // .concat(getDebugLoggerMiddleware({ withDiff: true, withNextState: true }))
         .prepend(listenerMiddleware.middleware),
     enhancers: (getDefaultEnhancers) => {
       const enhancers = getDefaultEnhancers();
-      return enhancers.prepend(
-        rememberEnhancer(reduxRememberOptions.driver, PERSISTED_KEYS, {
-          persistThrottle: reduxRememberOptions.persistThrottle,
-          serialize,
-          unserialize,
-          prefix: '',
-          errorHandler,
-        })
-      );
+      if (options?.persist) {
+        return enhancers.prepend(
+          rememberEnhancer(reduxRememberDriver, PERSISTED_KEYS, {
+            persistDebounce: options?.persistDebounce ?? 2000,
+            serialize,
+            unserialize,
+            prefix: '',
+            errorHandler,
+          })
+        );
+      } else {
+        return enhancers;
+      }
     },
     devTools: {
       actionSanitizer,
@@ -222,6 +228,18 @@ export const createStore = (reduxRememberOptions: { driver: Driver; persistThrot
     },
   });
 
+  // Once-off listener to support waiting for rehydration before rendering the app
+  startAppListening({
+    actionCreator: createAction(REMEMBER_REHYDRATED),
+    effect: (action, { unsubscribe }) => {
+      unsubscribe();
+      options?.onRehydrated?.();
+    },
+  });
+
+  return store;
+};
+
 export type AppStore = ReturnType<typeof createStore>;
 export type RootState = ReturnType<AppStore['getState']>;
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

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

@@ -58,6 +58,7 @@ const zNumericalParameterConfig = z.object({
   fineStep: z.number().default(8),
   coarseStep: z.number().default(64),
 });
+export type NumericalParameterConfig = z.infer<typeof zNumericalParameterConfig>;
 
 /**
  * Configuration options for the InvokeAI UI.

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

@@ -1,9 +1,9 @@
 import { MenuItem } from '@invoke-ai/ui-library';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { canvasReset } from 'features/controlLayers/store/actions';
-import { inpaintMaskAdded } from 'features/controlLayers/store/canvasSlice';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { allEntitiesDeleted, inpaintMaskAdded } from 'features/controlLayers/store/canvasSlice';
 import { $canvasManager } from 'features/controlLayers/store/ephemeral';
 import { paramsReset } from 'features/controlLayers/store/paramsSlice';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowsCounterClockwiseBold } from 'react-icons/pi';
@@ -11,9 +11,10 @@ import { PiArrowsCounterClockwiseBold } from 'react-icons/pi';
 export const SessionMenuItems = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
+  const tab = useAppSelector(selectActiveTab);
 
   const resetCanvasLayers = useCallback(() => {
-    dispatch(canvasReset());
+    dispatch(allEntitiesDeleted());
     dispatch(inpaintMaskAdded({ isSelected: true, isBookmarked: true }));
     $canvasManager.get()?.stage.fitBboxToStage();
   }, [dispatch]);
@@ -22,12 +23,16 @@ export const SessionMenuItems = memo(() => {
   }, [dispatch]);
   return (
     <>
-      <MenuItem icon={<PiArrowsCounterClockwiseBold />} onClick={resetCanvasLayers}>
-        {t('controlLayers.resetCanvasLayers')}
-      </MenuItem>
-      <MenuItem icon={<PiArrowsCounterClockwiseBold />} onClick={resetGenerationSettings}>
-        {t('controlLayers.resetGenerationSettings')}
-      </MenuItem>
+      {tab === 'canvas' && (
+        <MenuItem icon={<PiArrowsCounterClockwiseBold />} onClick={resetCanvasLayers}>
+          {t('controlLayers.resetCanvasLayers')}
+        </MenuItem>
+      )}
+      {(tab === 'canvas' || tab === 'generate') && (
+        <MenuItem icon={<PiArrowsCounterClockwiseBold />} onClick={resetGenerationSettings}>
+          {t('controlLayers.resetGenerationSettings')}
+        </MenuItem>
+      )}
     </>
   );
 });

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

@@ -0,0 +1,24 @@
+import { Alert, AlertIcon, AlertTitle } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const CanvasAlertsBboxVisibility = memo(() => {
+  const { t } = useTranslation();
+  const canvasManager = useCanvasManager();
+  const isBboxHidden = useStore(canvasManager.tool.tools.bbox.$isBboxHidden);
+
+  if (!isBboxHidden) {
+    return null;
+  }
+
+  return (
+    <Alert status="warning" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
+      <AlertIcon />
+      <AlertTitle>{t('controlLayers.warnings.bboxHidden')}</AlertTitle>
+    </Alert>
+  );
+});
+
+CanvasAlertsBboxVisibility.displayName = 'CanvasAlertsBboxVisibility';

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageImage.tsx

@@ -1,15 +1,20 @@
 import { Flex } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { skipToken } from '@reduxjs/toolkit/query';
+import { useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { UploadImageIconButton } from 'common/hooks/useImageUploadButton';
+import { bboxSizeOptimized, bboxSizeRecalled } from 'features/controlLayers/store/canvasSlice';
+import { useCanvasIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { sizeOptimized, sizeRecalled } from 'features/controlLayers/store/paramsSlice';
 import type { ImageWithDims } from 'features/controlLayers/store/types';
 import type { setGlobalReferenceImageDndTarget, setRegionalGuidanceReferenceImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { DndImage } from 'features/dnd/DndImage';
 import { DndImageIcon } from 'features/dnd/DndImageIcon';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiArrowCounterClockwiseBold } from 'react-icons/pi';
+import { PiArrowCounterClockwiseBold, PiRulerBold } from 'react-icons/pi';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 import { $isConnected } from 'services/events/stores';
@@ -29,7 +34,10 @@ export const RefImageImage = memo(
     dndTargetData,
   }: Props<T>) => {
     const { t } = useTranslation();
+    const store = useAppStore();
     const isConnected = useStore($isConnected);
+    const tab = useAppSelector(selectActiveTab);
+    const isStaging = useCanvasIsStaging();
     const { currentData: imageDTO, isError } = useGetImageDTOQuery(image?.image_name ?? skipToken);
     const handleResetControlImage = useCallback(() => {
       onChangeImage(null);
@@ -48,6 +56,20 @@ export const RefImageImage = memo(
       [onChangeImage]
     );
 
+    const recallSizeAndOptimize = useCallback(() => {
+      if (!imageDTO || (tab === 'canvas' && isStaging)) {
+        return;
+      }
+      const { width, height } = imageDTO;
+      if (tab === 'canvas') {
+        store.dispatch(bboxSizeRecalled({ width, height }));
+        store.dispatch(bboxSizeOptimized());
+      } else if (tab === 'generate') {
+        store.dispatch(sizeRecalled({ width, height }));
+        store.dispatch(sizeOptimized());
+      }
+    }, [imageDTO, isStaging, store, tab]);
+
     return (
       <Flex position="relative" w="full" h="full" alignItems="center" data-error={!imageDTO && !image?.image_name}>
         {!imageDTO && (
@@ -69,6 +91,14 @@ export const RefImageImage = memo(
                 tooltip={t('common.reset')}
               />
             </Flex>
+            <Flex position="absolute" flexDir="column" bottom={2} insetInlineEnd={2} gap={1}>
+              <DndImageIcon
+                onClick={recallSizeAndOptimize}
+                icon={<PiRulerBold size={16} />}
+                tooltip={t('parameters.useSize')}
+                isDisabled={!imageDTO || (tab === 'canvas' && isStaging)}
+              />
+            </Flex>
           </>
         )}
         <DndDropTarget dndTarget={dndTarget} dndTargetData={dndTargetData} label={t('gallery.drop')} />

invokeai/frontend/web/src/features/controlLayers/components/RefImage/RefImageList.tsx

@@ -63,6 +63,7 @@ RefImageList.displayName = 'RefImageList';
 const dndTargetData = addGlobalReferenceImageDndTarget.getData();
 
 const MaxRefImages = memo(() => {
+  const { t } = useTranslation();
   return (
     <Button
       position="relative"
@@ -75,7 +76,7 @@ const MaxRefImages = memo(() => {
       borderRadius="base"
       isDisabled
     >
-      Max Ref Images
+      {t('controlLayers.maxRefImages')}
     </Button>
   );
 });
@@ -83,6 +84,7 @@ MaxRefImages.displayName = 'MaxRefImages';
 
 const AddRefImageDropTargetAndButton = memo(() => {
   const { dispatch, getState } = useAppStore();
+  const { t } = useTranslation();
   const tab = useAppSelector(selectActiveTab);
 
   const uploadOptions = useMemo(
@@ -114,7 +116,7 @@ const AddRefImageDropTargetAndButton = memo(() => {
         leftIcon={<PiUploadBold />}
         {...uploadApi.getUploadButtonProps()}
       >
-        Reference Image
+        {t('controlLayers.referenceImage')}
         <input {...uploadApi.getUploadInputProps()} />
         <DndDropTarget label="Drop" dndTarget={addGlobalReferenceImageDndTarget} dndTargetData={dndTargetData} />
       </Button>

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

@@ -15,6 +15,7 @@ import { useCanvasEntityQuickSwitchHotkey } from 'features/controlLayers/hooks/u
 import { useCanvasFilterHotkey } from 'features/controlLayers/hooks/useCanvasFilterHotkey';
 import { useCanvasInvertMaskHotkey } from 'features/controlLayers/hooks/useCanvasInvertMaskHotkey';
 import { useCanvasResetLayerHotkey } from 'features/controlLayers/hooks/useCanvasResetLayerHotkey';
+import { useCanvasToggleBboxHotkey } from 'features/controlLayers/hooks/useCanvasToggleBboxHotkey';
 import { useCanvasToggleNonRasterLayersHotkey } from 'features/controlLayers/hooks/useCanvasToggleNonRasterLayersHotkey';
 import { useCanvasTransformHotkey } from 'features/controlLayers/hooks/useCanvasTransformHotkey';
 import { useCanvasUndoRedoHotkeys } from 'features/controlLayers/hooks/useCanvasUndoRedoHotkeys';
@@ -31,6 +32,7 @@ export const CanvasToolbar = memo(() => {
   useCanvasFilterHotkey();
   useCanvasInvertMaskHotkey();
   useCanvasToggleNonRasterLayersHotkey();
+  useCanvasToggleBboxHotkey();
 
   return (
     <Flex w="full" gap={2} alignItems="center" px={2}>

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

@@ -1,6 +1,8 @@
 import { IconButton } from '@invoke-ai/ui-library';
+import { useIsRegionFocused } from 'common/hooks/focus';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiResizeBold } from 'react-icons/pi';
@@ -9,9 +11,23 @@ export const CanvasToolbarFitBboxToLayersButton = memo(() => {
   const { t } = useTranslation();
   const canvasManager = useCanvasManager();
   const isBusy = useCanvasIsBusy();
+  const isCanvasFocused = useIsRegionFocused('canvas');
+
   const onClick = useCallback(() => {
     canvasManager.tool.tools.bbox.fitToLayers();
-  }, [canvasManager.tool.tools.bbox]);
+    canvasManager.stage.fitLayersToStage();
+  }, [canvasManager.tool.tools.bbox, canvasManager.stage]);
+
+  useRegisteredHotkeys({
+    id: 'fitBboxToLayers',
+    category: 'canvas',
+    callback: () => {
+      canvasManager.tool.tools.bbox.fitToLayers();
+      canvasManager.stage.fitLayersToStage();
+    },
+    options: { enabled: isCanvasFocused && !isBusy, preventDefault: true },
+    dependencies: [isCanvasFocused, isBusy],
+  });
 
   return (
     <IconButton

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

@@ -1,7 +1,7 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import type { AppGetState } from 'app/store/store';
-import { useAppDispatch, useAppStore } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
 import { deepClone } from 'common/util/deepClone';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import {
@@ -16,7 +16,11 @@ import {
   rgRefImageAdded,
 } from 'features/controlLayers/store/canvasSlice';
 import { selectBase, selectMainModelConfig } from 'features/controlLayers/store/paramsSlice';
-import { selectCanvasSlice, selectEntity } from 'features/controlLayers/store/selectors';
+import {
+  selectCanvasSlice,
+  selectEntity,
+  selectSelectedEntityIdentifier,
+} from 'features/controlLayers/store/selectors';
 import type {
   CanvasEntityIdentifier,
   CanvasRegionalGuidanceState,
@@ -136,37 +140,49 @@ export const getDefaultRegionalGuidanceRefImageConfig = (getState: AppGetState):
 
 export const useAddControlLayer = () => {
   const dispatch = useAppDispatch();
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+  const selectedControlLayer =
+    selectedEntityIdentifier?.type === 'control_layer' ? selectedEntityIdentifier.id : undefined;
   const func = useCallback(() => {
     const overrides = { controlAdapter: deepClone(initialControlNet) };
-    dispatch(controlLayerAdded({ isSelected: true, overrides }));
-  }, [dispatch]);
+    dispatch(controlLayerAdded({ isSelected: true, overrides, addAfter: selectedControlLayer }));
+  }, [dispatch, selectedControlLayer]);
 
   return func;
 };
 
 export const useAddRasterLayer = () => {
   const dispatch = useAppDispatch();
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+  const selectedRasterLayer =
+    selectedEntityIdentifier?.type === 'raster_layer' ? selectedEntityIdentifier.id : undefined;
   const func = useCallback(() => {
-    dispatch(rasterLayerAdded({ isSelected: true }));
-  }, [dispatch]);
+    dispatch(rasterLayerAdded({ isSelected: true, addAfter: selectedRasterLayer }));
+  }, [dispatch, selectedRasterLayer]);
 
   return func;
 };
 
 export const useAddInpaintMask = () => {
   const dispatch = useAppDispatch();
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+  const selectedInpaintMask =
+    selectedEntityIdentifier?.type === 'inpaint_mask' ? selectedEntityIdentifier.id : undefined;
   const func = useCallback(() => {
-    dispatch(inpaintMaskAdded({ isSelected: true }));
-  }, [dispatch]);
+    dispatch(inpaintMaskAdded({ isSelected: true, addAfter: selectedInpaintMask }));
+  }, [dispatch, selectedInpaintMask]);
 
   return func;
 };
 
 export const useAddRegionalGuidance = () => {
   const dispatch = useAppDispatch();
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+  const selectedRegionalGuidance =
+    selectedEntityIdentifier?.type === 'regional_guidance' ? selectedEntityIdentifier.id : undefined;
   const func = useCallback(() => {
-    dispatch(rgAdded({ isSelected: true }));
-  }, [dispatch]);
+    dispatch(rgAdded({ isSelected: true, addAfter: selectedRegionalGuidance }));
+  }, [dispatch, selectedRegionalGuidance]);
 
   return func;
 };

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

@@ -0,0 +1,18 @@
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
+import { useCallback } from 'react';
+
+export const useCanvasToggleBboxHotkey = () => {
+  const canvasManager = useCanvasManager();
+
+  const handleToggleBboxVisibility = useCallback(() => {
+    canvasManager.tool.tools.bbox.toggleBboxVisibility();
+  }, [canvasManager]);
+
+  useRegisteredHotkeys({
+    id: 'toggleBbox',
+    category: 'canvas',
+    callback: handleToggleBboxVisibility,
+    dependencies: [handleToggleBboxVisibility],
+  });
+};

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

@@ -372,6 +372,7 @@ export class CanvasCompositorModule extends CanvasModuleBase {
         position: { x: Math.floor(rect.x), y: Math.floor(rect.y) },
       },
       mergedEntitiesToDelete: deleteMergedEntities ? entityIdentifiers.map(mapId) : [],
+      addAfter: entityIdentifiers.map(mapId).at(-1),
     };
 
     switch (type) {

invokeai/frontend/web/src/features/controlLayers/konva/CanvasEntity/CanvasEntityTransformer.ts

@@ -482,13 +482,24 @@ export class CanvasEntityTransformer extends CanvasModuleBase {
     // "contain" means that the entity should be scaled to fit within the bbox, but it should not exceed the bbox.
     const scale = Math.min(scaleX, scaleY);
 
-    // Center the shape within the bounding box
-    const offsetX = (rect.width - width * scale) / 2;
-    const offsetY = (rect.height - height * scale) / 2;
+    // Calculate the scaled dimensions
+    const scaledWidth = width * scale;
+    const scaledHeight = height * scale;
+
+    // Calculate centered position
+    const centerX = rect.x + (rect.width - scaledWidth) / 2;
+    const centerY = rect.y + (rect.height - scaledHeight) / 2;
+
+    // Round to grid and clamp to valid bounds
+    const roundedX = gridSize > 1 ? roundToMultiple(centerX, gridSize) : centerX;
+    const roundedY = gridSize > 1 ? roundToMultiple(centerY, gridSize) : centerY;
+
+    const x = clamp(roundedX, rect.x, rect.x + rect.width - scaledWidth);
+    const y = clamp(roundedY, rect.y, rect.y + rect.height - scaledHeight);
 
     this.konva.proxyRect.setAttrs({
-      x: clamp(roundToMultiple(rect.x + offsetX, gridSize), rect.x, rect.x + rect.width),
-      y: clamp(roundToMultiple(rect.y + offsetY, gridSize), rect.y, rect.y + rect.height),
+      x,
+      y,
       scaleX: scale,
       scaleY: scale,
       rotation: 0,
@@ -513,16 +524,32 @@ export class CanvasEntityTransformer extends CanvasModuleBase {
     const scaleX = rect.width / width;
     const scaleY = rect.height / height;
 
-    // "cover" is the same as "contain", but we choose the larger scale to cover the shape
+    // "cover" means the entity should cover the entire bbox, potentially overflowing
     const scale = Math.max(scaleX, scaleY);
 
-    // Center the shape within the bounding box
-    const offsetX = (rect.width - width * scale) / 2;
-    const offsetY = (rect.height - height * scale) / 2;
+    // Calculate the scaled dimensions
+    const scaledWidth = width * scale;
+    const scaledHeight = height * scale;
+
+    // Calculate position - center only if entity exceeds bbox
+    let x = rect.x;
+    let y = rect.y;
+
+    // If scaled width exceeds bbox width, center horizontally
+    if (scaledWidth > rect.width) {
+      const centerX = rect.x + (rect.width - scaledWidth) / 2;
+      x = gridSize > 1 ? roundToMultiple(centerX, gridSize) : centerX;
+    }
+
+    // If scaled height exceeds bbox height, center vertically
+    if (scaledHeight > rect.height) {
+      const centerY = rect.y + (rect.height - scaledHeight) / 2;
+      y = gridSize > 1 ? roundToMultiple(centerY, gridSize) : centerY;
+    }
 
     this.konva.proxyRect.setAttrs({
-      x: roundToMultiple(rect.x + offsetX, gridSize),
-      y: roundToMultiple(rect.y + offsetY, gridSize),
+      x,
+      y,
       scaleX: scale,
       scaleY: scale,
       rotation: 0,

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

@@ -319,6 +319,14 @@ export class CanvasStateApiModule extends CanvasModuleBase {
   getPositionGridSize = (): number => {
     const snapToGrid = this.getSettings().snapToGrid;
     if (!snapToGrid) {
+      const overrideSnap = this.$ctrlKey.get() || this.$metaKey.get();
+      if (overrideSnap) {
+        const useFine = this.$shiftKey.get();
+        if (useFine) {
+          return 8;
+        }
+        return 64;
+      }
       return 1;
     }
     const useFine = this.$ctrlKey.get() || this.$metaKey.get();

invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasBboxToolModule.ts

@@ -66,6 +66,11 @@ export class CanvasBboxToolModule extends CanvasModuleBase {
    */
   $aspectRatioBuffer = atom(1);
 
+  /**
+   * Buffer to store the visibility of the bbox.
+   */
+  $isBboxHidden = atom(false);
+
   constructor(parent: CanvasToolModule) {
     super();
     this.id = getPrefixedId(this.type);
@@ -191,6 +196,9 @@ export class CanvasBboxToolModule extends CanvasModuleBase {
 
     // Update on busy state changes
     this.subscriptions.add(this.manager.$isBusy.listen(this.render));
+
+    // Listen for stage changes to update the bbox's visibility
+    this.subscriptions.add(this.$isBboxHidden.listen(this.render));
   }
 
   // This is a noop. The cursor is changed when the cursor enters or leaves the bbox.
@@ -206,13 +214,15 @@ export class CanvasBboxToolModule extends CanvasModuleBase {
   };
 
   /**
-   * Renders the bbox. The bbox is only visible when the tool is set to 'bbox'.
+   * Renders the bbox.
    */
   render = () => {
     const tool = this.manager.tool.$tool.get();
 
     const { x, y, width, height } = this.manager.stateApi.runSelector(selectBbox).rect;
 
+    this.konva.group.visible(!this.$isBboxHidden.get());
+
     // We need to reach up to the preview layer to enable/disable listening so that the bbox can be interacted with.
     // If the mangaer is busy, we disable listening so the bbox cannot be interacted with.
     this.konva.group.listening(tool === 'bbox' && !this.manager.$isBusy.get());
@@ -478,4 +488,8 @@ export class CanvasBboxToolModule extends CanvasModuleBase {
     this.subscriptions.clear();
     this.konva.group.destroy();
   };
+
+  toggleBboxVisibility = () => {
+    this.$isBboxHidden.set(!this.$isBboxHidden.get());
+  };
 }

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

@@ -111,12 +111,16 @@ const slice = createSlice({
           isSelected?: boolean;
           isBookmarked?: boolean;
           mergedEntitiesToDelete?: string[];
+          addAfter?: string;
         }>
       ) => {
-        const { id, overrides, isSelected, isBookmarked, mergedEntitiesToDelete = [] } = action.payload;
+        const { id, overrides, isSelected, isBookmarked, mergedEntitiesToDelete = [], addAfter } = action.payload;
         const entityState = getRasterLayerState(id, overrides);
 
-        state.rasterLayers.entities.push(entityState);
+        const index = addAfter
+          ? state.rasterLayers.entities.findIndex((e) => e.id === addAfter) + 1
+          : state.rasterLayers.entities.length;
+        state.rasterLayers.entities.splice(index, 0, entityState);
 
         if (mergedEntitiesToDelete.length > 0) {
           state.rasterLayers.entities = state.rasterLayers.entities.filter(
@@ -139,6 +143,7 @@ const slice = createSlice({
         isSelected?: boolean;
         isBookmarked?: boolean;
         mergedEntitiesToDelete?: string[];
+        addAfter?: string;
       }) => ({
         payload: { ...payload, id: getPrefixedId('raster_layer') },
       }),
@@ -272,13 +277,17 @@ const slice = createSlice({
           isSelected?: boolean;
           isBookmarked?: boolean;
           mergedEntitiesToDelete?: string[];
+          addAfter?: string;
         }>
       ) => {
-        const { id, overrides, isSelected, isBookmarked, mergedEntitiesToDelete = [] } = action.payload;
+        const { id, overrides, isSelected, isBookmarked, mergedEntitiesToDelete = [], addAfter } = action.payload;
 
         const entityState = getControlLayerState(id, overrides);
 
-        state.controlLayers.entities.push(entityState);
+        const index = addAfter
+          ? state.controlLayers.entities.findIndex((e) => e.id === addAfter) + 1
+          : state.controlLayers.entities.length;
+        state.controlLayers.entities.splice(index, 0, entityState);
 
         if (mergedEntitiesToDelete.length > 0) {
           state.controlLayers.entities = state.controlLayers.entities.filter(
@@ -300,6 +309,7 @@ const slice = createSlice({
         isSelected?: boolean;
         isBookmarked?: boolean;
         mergedEntitiesToDelete?: string[];
+        addAfter?: string;
       }) => ({
         payload: { ...payload, id: getPrefixedId('control_layer') },
       }),
@@ -570,13 +580,17 @@ const slice = createSlice({
           isSelected?: boolean;
           isBookmarked?: boolean;
           mergedEntitiesToDelete?: string[];
+          addAfter?: string;
         }>
       ) => {
-        const { id, overrides, isSelected, isBookmarked, mergedEntitiesToDelete = [] } = action.payload;
+        const { id, overrides, isSelected, isBookmarked, mergedEntitiesToDelete = [], addAfter } = action.payload;
 
         const entityState = getRegionalGuidanceState(id, overrides);
 
-        state.regionalGuidance.entities.push(entityState);
+        const index = addAfter
+          ? state.regionalGuidance.entities.findIndex((e) => e.id === addAfter) + 1
+          : state.regionalGuidance.entities.length;
+        state.regionalGuidance.entities.splice(index, 0, entityState);
 
         if (mergedEntitiesToDelete.length > 0) {
           state.regionalGuidance.entities = state.regionalGuidance.entities.filter(
@@ -598,6 +612,7 @@ const slice = createSlice({
         isSelected?: boolean;
         isBookmarked?: boolean;
         mergedEntitiesToDelete?: string[];
+        addAfter?: string;
       }) => ({
         payload: { ...payload, id: getPrefixedId('regional_guidance') },
       }),
@@ -874,13 +889,17 @@ const slice = createSlice({
           isSelected?: boolean;
           isBookmarked?: boolean;
           mergedEntitiesToDelete?: string[];
+          addAfter?: string;
         }>
       ) => {
-        const { id, overrides, isSelected, isBookmarked, mergedEntitiesToDelete = [] } = action.payload;
+        const { id, overrides, isSelected, isBookmarked, mergedEntitiesToDelete = [], addAfter } = action.payload;
 
         const entityState = getInpaintMaskState(id, overrides);
 
-        state.inpaintMasks.entities.push(entityState);
+        const index = addAfter
+          ? state.inpaintMasks.entities.findIndex((e) => e.id === addAfter) + 1
+          : state.inpaintMasks.entities.length;
+        state.inpaintMasks.entities.splice(index, 0, entityState);
 
         if (mergedEntitiesToDelete.length > 0) {
           state.inpaintMasks.entities = state.inpaintMasks.entities.filter(
@@ -902,6 +921,7 @@ const slice = createSlice({
         isSelected?: boolean;
         isBookmarked?: boolean;
         mergedEntitiesToDelete?: string[];
+        addAfter?: string;
       }) => ({
         payload: { ...payload, id: getPrefixedId('inpaint_mask') },
       }),
@@ -1091,6 +1111,15 @@ const slice = createSlice({
 
       syncScaledSize(state);
     },
+    bboxSizeRecalled: (state, action: PayloadAction<{ width: number; height: number }>) => {
+      const { width, height } = action.payload;
+      const gridSize = getGridSize(state.bbox.modelBase);
+      state.bbox.rect.width = Math.max(roundDownToMultiple(width, gridSize), 64);
+      state.bbox.rect.height = Math.max(roundDownToMultiple(height, gridSize), 64);
+      state.bbox.aspectRatio.value = state.bbox.rect.width / state.bbox.rect.height;
+      state.bbox.aspectRatio.id = 'Free';
+      state.bbox.aspectRatio.isLocked = true;
+    },
     bboxAspectRatioLockToggled: (state) => {
       state.bbox.aspectRatio.isLocked = !state.bbox.aspectRatio.isLocked;
       syncScaledSize(state);
@@ -1240,25 +1269,33 @@ const slice = createSlice({
         newEntity.name = `${newEntity.name} (Copy)`;
       }
       switch (newEntity.type) {
-        case 'raster_layer':
+        case 'raster_layer': {
           newEntity.id = getPrefixedId('raster_layer');
-          state.rasterLayers.entities.push(newEntity);
+          const newEntityIndex = state.rasterLayers.entities.findIndex((e) => e.id === entityIdentifier.id) + 1;
+          state.rasterLayers.entities.splice(newEntityIndex, 0, newEntity);
           break;
-        case 'control_layer':
+        }
+        case 'control_layer': {
           newEntity.id = getPrefixedId('control_layer');
-          state.controlLayers.entities.push(newEntity);
+          const newEntityIndex = state.controlLayers.entities.findIndex((e) => e.id === entityIdentifier.id) + 1;
+          state.controlLayers.entities.splice(newEntityIndex, 0, newEntity);
           break;
-        case 'regional_guidance':
+        }
+        case 'regional_guidance': {
           newEntity.id = getPrefixedId('regional_guidance');
           for (const refImage of newEntity.referenceImages) {
             refImage.id = getPrefixedId('regional_guidance_ip_adapter');
           }
-          state.regionalGuidance.entities.push(newEntity);
+          const newEntityIndex = state.regionalGuidance.entities.findIndex((e) => e.id === entityIdentifier.id) + 1;
+          state.regionalGuidance.entities.splice(newEntityIndex, 0, newEntity);
           break;
-        case 'inpaint_mask':
+        }
+        case 'inpaint_mask': {
           newEntity.id = getPrefixedId('inpaint_mask');
-          state.inpaintMasks.entities.push(newEntity);
+          const newEntityIndex = state.inpaintMasks.entities.findIndex((e) => e.id === entityIdentifier.id) + 1;
+          state.inpaintMasks.entities.splice(newEntityIndex, 0, newEntity);
           break;
+        }
       }
 
       state.selectedEntityIdentifier = getEntityIdentifier(newEntity);
@@ -1619,6 +1656,7 @@ export const {
   entityArrangedToBack,
   entityOpacityChanged,
   entitiesReordered,
+  allEntitiesDeleted,
   allEntitiesOfTypeIsHiddenToggled,
   allNonRasterLayersIsHiddenToggled,
   // bbox
@@ -1626,6 +1664,7 @@ export const {
   bboxScaledWidthChanged,
   bboxScaledHeightChanged,
   bboxScaleMethodChanged,
+  bboxSizeRecalled,
   bboxWidthChanged,
   bboxHeightChanged,
   bboxAspectRatioLockToggled,

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

@@ -107,14 +107,7 @@ const slice = createSlice({
         return;
       }
 
-      // Clamp CLIP skip layer count to the bounds of the new model
-      if (model.base === 'sdxl') {
-        // We don't support user-defined CLIP skip for SDXL because it doesn't do anything useful
-        state.clipSkip = 0;
-      } else {
-        const { maxClip } = CLIP_SKIP_MAP[model.base];
-        state.clipSkip = clamp(state.clipSkip, 0, maxClip);
-      }
+      applyClipSkip(state, model, state.clipSkip);
     },
     vaeSelected: (state, action: PayloadAction<ParameterVAEModel | null>) => {
       // null is a valid VAE!
@@ -170,7 +163,7 @@ const slice = createSlice({
       state.vaePrecision = action.payload;
     },
     setClipSkip: (state, action: PayloadAction<number>) => {
-      state.clipSkip = action.payload;
+      applyClipSkip(state, state.model, action.payload);
     },
     shouldUseCpuNoiseChanged: (state, action: PayloadAction<boolean>) => {
       state.shouldUseCpuNoise = action.payload;
@@ -181,15 +174,6 @@ const slice = createSlice({
     negativePromptChanged: (state, action: PayloadAction<ParameterNegativePrompt>) => {
       state.negativePrompt = action.payload;
     },
-    positivePrompt2Changed: (state, action: PayloadAction<string>) => {
-      state.positivePrompt2 = action.payload;
-    },
-    negativePrompt2Changed: (state, action: PayloadAction<string>) => {
-      state.negativePrompt2 = action.payload;
-    },
-    shouldConcatPromptsChanged: (state, action: PayloadAction<boolean>) => {
-      state.shouldConcatPrompts = action.payload;
-    },
     refinerModelChanged: (state, action: PayloadAction<ParameterSDXLRefinerModel | null>) => {
       const result = zParamsState.shape.refinerModel.safeParse(action.payload);
       if (!result.success) {
@@ -241,6 +225,15 @@ const slice = createSlice({
     },
 
     //#region Dimensions
+    sizeRecalled: (state, action: PayloadAction<{ width: number; height: number }>) => {
+      const { width, height } = action.payload;
+      const gridSize = getGridSize(state.model?.base);
+      state.dimensions.rect.width = Math.max(roundDownToMultiple(width, gridSize), 64);
+      state.dimensions.rect.height = Math.max(roundDownToMultiple(height, gridSize), 64);
+      state.dimensions.aspectRatio.value = state.dimensions.rect.width / state.dimensions.rect.height;
+      state.dimensions.aspectRatio.id = 'Free';
+      state.dimensions.aspectRatio.isLocked = true;
+    },
     widthChanged: (state, action: PayloadAction<{ width: number; updateAspectRatio?: boolean; clamp?: boolean }>) => {
       const { width, updateAspectRatio, clamp } = action.payload;
       const gridSize = getGridSize(state.model?.base);
@@ -366,17 +359,46 @@ const slice = createSlice({
   },
 });
 
+const applyClipSkip = (state: { clipSkip: number }, model: ParameterModel | null, clipSkip: number) => {
+  if (model === null) {
+    return;
+  }
+
+  const maxClip = getModelMaxClipSkip(model);
+
+  state.clipSkip = clamp(clipSkip, 0, maxClip);
+};
+
+const hasModelClipSkip = (model: ParameterModel | null) => {
+  if (model === null) {
+    return false;
+  }
+
+  return getModelMaxClipSkip(model) > 0;
+};
+
+const getModelMaxClipSkip = (model: ParameterModel) => {
+  if (model.base === 'sdxl') {
+    // We don't support user-defined CLIP skip for SDXL because it doesn't do anything useful
+    return 0;
+  }
+
+  return CLIP_SKIP_MAP[model.base].maxClip;
+};
+
 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 oldState = deepClone(state);
   const newState = getInitialParamsState();
-  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;
+  newState.dimensions = oldState.dimensions;
+  newState.model = oldState.model;
+  newState.vae = oldState.vae;
+  newState.fluxVAE = oldState.fluxVAE;
+  newState.vaePrecision = oldState.vaePrecision;
+  newState.t5EncoderModel = oldState.t5EncoderModel;
+  newState.clipEmbedModel = oldState.clipEmbedModel;
+  newState.refinerModel = oldState.refinerModel;
   return newState;
 };
 
@@ -414,9 +436,6 @@ export const {
   shouldUseCpuNoiseChanged,
   positivePromptChanged,
   negativePromptChanged,
-  positivePrompt2Changed,
-  negativePrompt2Changed,
-  shouldConcatPromptsChanged,
   refinerModelChanged,
   setRefinerSteps,
   setRefinerCFGScale,
@@ -427,6 +446,7 @@ export const {
   modelChanged,
 
   // Dimensions
+  sizeRecalled,
   widthChanged,
   heightChanged,
   aspectRatioLockToggled,
@@ -448,8 +468,7 @@ export const paramsSliceConfig: SliceConfig<typeof slice> = {
 };
 
 export const selectParamsSlice = (state: RootState) => state.params;
-export const createParamsSelector = <T>(selector: Selector<ParamsState, T>) =>
-  createSelector(selectParamsSlice, selector);
+const createParamsSelector = <T>(selector: Selector<ParamsState, T>) => createSelector(selectParamsSlice, selector);
 
 export const selectBase = createParamsSelector((params) => params.model?.base);
 export const selectIsSDXL = createParamsSelector((params) => params.model?.base === 'sdxl');
@@ -485,7 +504,8 @@ export const selectCFGScale = createParamsSelector((params) => params.cfgScale);
 export const selectGuidance = createParamsSelector((params) => params.guidance);
 export const selectSteps = createParamsSelector((params) => params.steps);
 export const selectCFGRescaleMultiplier = createParamsSelector((params) => params.cfgRescaleMultiplier);
-export const selectCLIPSKip = createParamsSelector((params) => params.clipSkip);
+export const selectCLIPSkip = createParamsSelector((params) => params.clipSkip);
+export const selectHasModelCLIPSkip = createParamsSelector((params) => hasModelClipSkip(params.model));
 export const selectCanvasCoherenceEdgeSize = createParamsSelector((params) => params.canvasCoherenceEdgeSize);
 export const selectCanvasCoherenceMinDenoise = createParamsSelector((params) => params.canvasCoherenceMinDenoise);
 export const selectCanvasCoherenceMode = createParamsSelector((params) => params.canvasCoherenceMode);
@@ -506,9 +526,6 @@ export const selectModelSupportsNegativePrompt = createSelector(
   [selectIsFLUX, selectIsChatGPT4o, selectIsFluxKontext],
   (isFLUX, isChatGPT4o, isFluxKontext) => !isFLUX && !isChatGPT4o && !isFluxKontext
 );
-export const selectPositivePrompt2 = createParamsSelector((params) => params.positivePrompt2);
-export const selectNegativePrompt2 = createParamsSelector((params) => params.negativePrompt2);
-export const selectShouldConcatPrompts = createParamsSelector((params) => params.shouldConcatPrompts);
 export const selectScheduler = createParamsSelector((params) => params.scheduler);
 export const selectSeamlessXAxis = createParamsSelector((params) => params.seamlessXAxis);
 export const selectSeamlessYAxis = createParamsSelector((params) => params.seamlessYAxis);

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

@@ -1,6 +1,5 @@
 import { deepClone } from 'common/util/deepClone';
 import type { CanvasEntityAdapter } from 'features/controlLayers/konva/CanvasEntity/types';
-import type { ProgressImage } from 'features/nodes/types/common';
 import { zMainModelBase, zModelIdentifierField } from 'features/nodes/types/common';
 import {
   zParameterCanvasCoherenceMode,
@@ -15,9 +14,7 @@ import {
   zParameterMaskBlurMethod,
   zParameterModel,
   zParameterNegativePrompt,
-  zParameterNegativeStylePromptSDXL,
   zParameterPositivePrompt,
-  zParameterPositiveStylePromptSDXL,
   zParameterPrecision,
   zParameterScheduler,
   zParameterSDXLRefinerModel,
@@ -414,8 +411,6 @@ export const zLoRA = z.object({
 });
 export type LoRA = z.infer<typeof zLoRA>;
 
-export type EphemeralProgressImage = { sessionId: string; image: ProgressImage };
-
 export const zAspectRatioID = z.enum(['Free', '21:9', '16:9', '3:2', '4:3', '1:1', '3:4', '2:3', '9:16', '9:21']);
 export type AspectRatioID = z.infer<typeof zAspectRatioID>;
 export const isAspectRatioID = (v: unknown): v is AspectRatioID => zAspectRatioID.safeParse(v).success;
@@ -537,9 +532,6 @@ export const zParamsState = z.object({
   shouldUseCpuNoise: z.boolean(),
   positivePrompt: zParameterPositivePrompt,
   negativePrompt: zParameterNegativePrompt,
-  positivePrompt2: zParameterPositiveStylePromptSDXL,
-  negativePrompt2: zParameterNegativeStylePromptSDXL,
-  shouldConcatPrompts: z.boolean(),
   refinerModel: zParameterSDXLRefinerModel.nullable(),
   refinerSteps: z.number(),
   refinerCFGScale: z.number(),
@@ -587,9 +579,6 @@ export const getInitialParamsState = (): ParamsState => ({
   shouldUseCpuNoise: true,
   positivePrompt: '',
   negativePrompt: null,
-  positivePrompt2: '',
-  negativePrompt2: '',
-  shouldConcatPrompts: true,
   refinerModel: null,
   refinerSteps: 20,
   refinerCFGScale: 7.5,

invokeai/frontend/web/src/features/dnd/DndImageIcon.tsx

@@ -27,6 +27,7 @@ export const DndImageIcon = memo((props: Props) => {
   return (
     <IconButton
       onClick={onClick}
+      tooltip={tooltip}
       aria-label={tooltip}
       icon={icon}
       variant="link"

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

@@ -53,6 +53,7 @@ export const BoardEditableTitle = memo(({ board, isSelected }: Props) => {
           color={isSelected ? 'base.100' : 'base.300'}
           onDoubleClick={editable.startEditing}
           cursor="text"
+          noOfLines={1}
         >
           {editable.value}
         </Text>

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

@@ -37,6 +37,7 @@ export const BoardTooltip = ({ board }: Props) => {
         />
       )}
       <Flex flexDir="column" alignItems="center">
+        {board && <Text fontWeight="semibold">{board.board_name}</Text>}
         <Text noOfLines={1}>
           {t('boards.imagesWithCount', { count: imagesTotal })}, {t('boards.assetsWithCount', { count: assetsTotal })}
         </Text>

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

@@ -59,7 +59,7 @@ export const BoardsPanel = memo(() => {
             onClick={collapsibleApi.toggle}
             leftIcon={isCollapsed ? <PiCaretDownBold /> : <PiCaretUpBold />}
           >
-            Boards
+            {t('boards.boards')}
           </Button>
         </Flex>
         <Flex>

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

@@ -7,13 +7,7 @@ import { useGallerySearchTerm } from 'features/gallery/components/ImageGrid/useG
 import { selectSelectedBoardId } from 'features/gallery/store/gallerySelectors';
 import { galleryViewChanged, selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
-import {
-  GALLERY_PANEL_DEFAULT_HEIGHT_PX,
-  GALLERY_PANEL_ID,
-  GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX,
-  GALLERY_PANEL_MIN_HEIGHT_PX,
-} from 'features/ui/layouts/shared';
-import { useCollapsibleGridviewPanel } from 'features/ui/layouts/use-collapsible-gridview-panel';
+import { useGalleryPanel } from 'features/ui/layouts/use-gallery-panel';
 import type { CSSProperties } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -34,16 +28,8 @@ export const GalleryPanel = memo(() => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
   const { tab } = useAutoLayoutContext();
-  const collapsibleApi = useCollapsibleGridviewPanel(
-    tab,
-    GALLERY_PANEL_ID,
-    'vertical',
-    GALLERY_PANEL_DEFAULT_HEIGHT_PX,
-    GALLERY_PANEL_MIN_HEIGHT_PX,
-    GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX
-  );
-  const isCollapsed = useStore(collapsibleApi.$isCollapsed);
-
+  const galleryPanel = useGalleryPanel(tab);
+  const isCollapsed = useStore(galleryPanel.$isCollapsed);
   const galleryView = useAppSelector(selectGalleryView);
   const initialSearchTerm = useAppSelector(selectSearchTerm);
   const searchDisclosure = useDisclosure(!!initialSearchTerm);
@@ -58,11 +44,11 @@ export const GalleryPanel = memo(() => {
 
   const handleClickSearch = useCallback(() => {
     onResetSearchTerm();
-    if (!searchDisclosure.isOpen && collapsibleApi.$isCollapsed.get()) {
-      collapsibleApi.expand();
+    if (!searchDisclosure.isOpen && galleryPanel.$isCollapsed.get()) {
+      galleryPanel.expand();
     }
     searchDisclosure.toggle();
-  }, [collapsibleApi, onResetSearchTerm, searchDisclosure]);
+  }, [galleryPanel, onResetSearchTerm, searchDisclosure]);
 
   const selectedBoardId = useAppSelector(selectSelectedBoardId);
   const boardName = useBoardName(selectedBoardId);
@@ -73,8 +59,9 @@ export const GalleryPanel = memo(() => {
         <Button
           size="sm"
           variant="ghost"
-          onClick={collapsibleApi.toggle}
+          onClick={galleryPanel.toggle}
           leftIcon={isCollapsed ? <PiCaretDownBold /> : <PiCaretUpBold />}
+          noOfLines={1}
         >
           {boardName}
         </Button>

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

@@ -40,7 +40,7 @@ export const GallerySettingsPopover = memo(() => {
           <PopoverBody>
             <Flex direction="column" gap={2}>
               <Text fontWeight="semibold" color="base.300">
-                Gallery Settings
+                {t('gallery.gallerySettings')}
               </Text>
 
               <Divider />

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

@@ -0,0 +1,39 @@
+import { MenuItem } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
+import { boardIdSelected } from 'features/gallery/store/gallerySlice';
+import { navigationApi } from 'features/ui/layouts/navigation-api';
+import { useGalleryPanel } from 'features/ui/layouts/use-gallery-panel';
+import { selectActiveTab } from 'features/ui/store/uiSelectors';
+import { memo, useCallback, useMemo } from 'react';
+import { flushSync } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { PiCrosshairBold } from 'react-icons/pi';
+
+export const ImageMenuItemLocateInGalery = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const imageDTO = useImageDTOContext();
+  const activeTab = useAppSelector(selectActiveTab);
+  const galleryPanel = useGalleryPanel(activeTab);
+
+  const isGalleryImage = useMemo(() => {
+    return !imageDTO.is_intermediate;
+  }, [imageDTO]);
+
+  const onClick = useCallback(() => {
+    navigationApi.expandRightPanel();
+    galleryPanel.expand();
+    flushSync(() => {
+      dispatch(boardIdSelected({ boardId: imageDTO.board_id ?? 'none', selectedImageName: imageDTO.image_name }));
+    });
+  }, [dispatch, galleryPanel, imageDTO]);
+
+  return (
+    <MenuItem icon={<PiCrosshairBold />} onClickCapture={onClick} isDisabled={!isGalleryImage}>
+      {t('boards.locateInGalery')}
+    </MenuItem>
+  );
+});
+
+ImageMenuItemLocateInGalery.displayName = 'ImageMenuItemLocateInGalery';

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

@@ -2,6 +2,7 @@ import { Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { SubMenuButtonContent, useSubMenu } from 'common/hooks/useSubMenu';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { useRecallAll } from 'features/gallery/hooks/useRecallAll';
+import { useRecallCLIPSkip } from 'features/gallery/hooks/useRecallCLIPSkip';
 import { useRecallDimensions } from 'features/gallery/hooks/useRecallDimensions';
 import { useRecallPrompts } from 'features/gallery/hooks/useRecallPrompts';
 import { useRecallRemix } from 'features/gallery/hooks/useRecallRemix';
@@ -17,7 +18,7 @@ import {
   PiRulerBold,
 } from 'react-icons/pi';
 
-export const ImageMenuItemMetadataRecallActions = memo(() => {
+export const ImageMenuItemMetadataRecallActionsCanvasGenerateTabs = memo(() => {
   const { t } = useTranslation();
   const subMenu = useSubMenu();
 
@@ -28,6 +29,7 @@ export const ImageMenuItemMetadataRecallActions = memo(() => {
   const recallPrompts = useRecallPrompts(imageDTO);
   const recallSeed = useRecallSeed(imageDTO);
   const recallDimensions = useRecallDimensions(imageDTO);
+  const recallCLIPSkip = useRecallCLIPSkip(imageDTO);
 
   return (
     <MenuItem {...subMenu.parentMenuItemProps} icon={<PiArrowBendUpLeftBold />}>
@@ -55,10 +57,14 @@ export const ImageMenuItemMetadataRecallActions = memo(() => {
           <MenuItem icon={<PiRulerBold />} onClick={recallDimensions.recall} isDisabled={!recallDimensions.isEnabled}>
             {t('parameters.useSize')}
           </MenuItem>
+          <MenuItem icon={<PiRulerBold />} onClick={recallCLIPSkip.recall} isDisabled={!recallCLIPSkip.isEnabled}>
+            {t('parameters.useClipSkip')}
+          </MenuItem>
         </MenuList>
       </Menu>
     </MenuItem>
   );
 });
 
-ImageMenuItemMetadataRecallActions.displayName = 'ImageMenuItemMetadataRecallActions';
+ImageMenuItemMetadataRecallActionsCanvasGenerateTabs.displayName =
+  'ImageMenuItemMetadataRecallActionsCanvasGenerateTabs';

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

@@ -0,0 +1,38 @@
+import { Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
+import { SubMenuButtonContent, useSubMenu } from 'common/hooks/useSubMenu';
+import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
+import { useRecallPrompts } from 'features/gallery/hooks/useRecallPrompts';
+import { useRecallSeed } from 'features/gallery/hooks/useRecallSeed';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiArrowBendUpLeftBold, PiPlantBold, PiQuotesBold } from 'react-icons/pi';
+
+export const ImageMenuItemMetadataRecallActionsUpscaleTab = memo(() => {
+  const { t } = useTranslation();
+  const subMenu = useSubMenu();
+
+  const imageDTO = useImageDTOContext();
+
+  const recallPrompts = useRecallPrompts(imageDTO);
+  const recallSeed = useRecallSeed(imageDTO);
+
+  return (
+    <MenuItem {...subMenu.parentMenuItemProps} icon={<PiArrowBendUpLeftBold />}>
+      <Menu {...subMenu.menuProps}>
+        <MenuButton {...subMenu.menuButtonProps}>
+          <SubMenuButtonContent label={t('parameters.recallMetadata')} />
+        </MenuButton>
+        <MenuList {...subMenu.menuListProps}>
+          <MenuItem icon={<PiQuotesBold />} onClick={recallPrompts.recall} isDisabled={!recallPrompts.isEnabled}>
+            {t('parameters.usePrompt')}
+          </MenuItem>
+          <MenuItem icon={<PiPlantBold />} onClick={recallSeed.recall} isDisabled={!recallSeed.isEnabled}>
+            {t('parameters.useSeed')}
+          </MenuItem>
+        </MenuList>
+      </Menu>
+    </MenuItem>
+  );
+});
+
+ImageMenuItemMetadataRecallActionsUpscaleTab.displayName = 'ImageMenuItemMetadataRecallActionsUpscaleTab';

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

@@ -2,6 +2,7 @@ import { Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { useAppStore } from 'app/store/storeHooks';
 import { SubMenuButtonContent, useSubMenu } from 'common/hooks/useSubMenu';
 import { useCanvasIsBusySafe } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { useCanvasIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { useImageDTOContext } from 'features/gallery/contexts/ImageDTOContext';
 import { newCanvasFromImage } from 'features/imageActions/actions';
 import { toast } from 'features/toast/toast';
@@ -17,6 +18,7 @@ export const ImageMenuItemNewCanvasFromImageSubMenu = memo(() => {
   const store = useAppStore();
   const imageDTO = useImageDTOContext();
   const isBusy = useCanvasIsBusySafe();
+  const isStaging = useCanvasIsStaging();
 
   const onClickNewCanvasWithRasterLayerFromImage = useCallback(async () => {
     const { dispatch, getState } = store;
@@ -97,27 +99,31 @@ export const ImageMenuItemNewCanvasFromImageSubMenu = memo(() => {
           <SubMenuButtonContent label={t('controlLayers.newCanvasFromImage')} />
         </MenuButton>
         <MenuList {...subMenu.menuListProps}>
-          <MenuItem icon={<PiFileBold />} onClickCapture={onClickNewCanvasWithRasterLayerFromImage} isDisabled={isBusy}>
+          <MenuItem
+            icon={<PiFileBold />}
+            onClickCapture={onClickNewCanvasWithRasterLayerFromImage}
+            isDisabled={isStaging || isBusy}
+          >
             {t('controlLayers.asRasterLayer')}
           </MenuItem>
           <MenuItem
             icon={<PiFileBold />}
             onClickCapture={onClickNewCanvasWithRasterLayerFromImageWithResize}
-            isDisabled={isBusy}
+            isDisabled={isStaging || isBusy}
           >
             {t('controlLayers.asRasterLayerResize')}
           </MenuItem>
           <MenuItem
             icon={<PiFileBold />}
             onClickCapture={onClickNewCanvasWithControlLayerFromImage}
-            isDisabled={isBusy}
+            isDisabled={isStaging || isBusy}
           >
             {t('controlLayers.asControlLayer')}
           </MenuItem>
           <MenuItem
             icon={<PiFileBold />}
             onClickCapture={onClickNewCanvasWithControlLayerFromImageWithResize}
-            isDisabled={isBusy}
+            isDisabled={isStaging || isBusy}
           >
             {t('controlLayers.asControlLayerResize')}
           </MenuItem>

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

@@ -28,7 +28,7 @@ export const ImageMenuItemUseAsRefImage = memo(() => {
 
   return (
     <MenuItem icon={<PiImageBold />} onClickCapture={onClickNewGlobalReferenceImageFromImage}>
-      Use as Reference Image
+      {t('controlLayers.useAsReferenceImage')}
     </MenuItem>
   );
 });

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

@@ -6,7 +6,8 @@ import { ImageMenuItemCopy } from 'features/gallery/components/ImageContextMenu/
 import { ImageMenuItemDelete } from 'features/gallery/components/ImageContextMenu/ImageMenuItemDelete';
 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 { ImageMenuItemLocateInGalery } from 'features/gallery/components/ImageContextMenu/ImageMenuItemLocateInGalery';
+import { ImageMenuItemMetadataRecallActionsCanvasGenerateTabs } from 'features/gallery/components/ImageContextMenu/ImageMenuItemMetadataRecallActionsCanvasGenerateTabs';
 import { ImageMenuItemNewCanvasFromImageSubMenu } from 'features/gallery/components/ImageContextMenu/ImageMenuItemNewCanvasFromImageSubMenu';
 import { ImageMenuItemNewLayerFromImageSubMenu } from 'features/gallery/components/ImageContextMenu/ImageMenuItemNewLayerFromImageSubMenu';
 import { ImageMenuItemOpenInNewTab } from 'features/gallery/components/ImageContextMenu/ImageMenuItemOpenInNewTab';
@@ -21,6 +22,7 @@ import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { memo } from 'react';
 import type { ImageDTO } from 'services/api/types';
 
+import { ImageMenuItemMetadataRecallActionsUpscaleTab } from './ImageMenuItemMetadataRecallActionsUpscaleTab';
 import { ImageMenuItemUseAsPromptTemplate } from './ImageMenuItemUseAsPromptTemplate';
 
 type SingleSelectionMenuItemsProps = {
@@ -42,7 +44,8 @@ const SingleSelectionMenuItems = ({ imageDTO }: SingleSelectionMenuItemsProps) =
       </IconMenuItemGroup>
       <MenuDivider />
       <ImageMenuItemLoadWorkflow />
-      {(tab === 'canvas' || tab === 'generate') && <ImageMenuItemMetadataRecallActions />}
+      {(tab === 'canvas' || tab === 'generate') && <ImageMenuItemMetadataRecallActionsCanvasGenerateTabs />}
+      {tab === 'upscaling' && <ImageMenuItemMetadataRecallActionsUpscaleTab />}
       <MenuDivider />
       <ImageMenuItemSendToUpscale />
       <ImageMenuItemUseForPromptGeneration />
@@ -53,6 +56,11 @@ const SingleSelectionMenuItems = ({ imageDTO }: SingleSelectionMenuItemsProps) =
       <MenuDivider />
       <ImageMenuItemChangeBoard />
       <ImageMenuItemStarUnstar />
+      {(tab === 'canvas' || tab === 'generate' || tab === 'workflows' || tab === 'upscaling') &&
+        !imageDTO.is_intermediate && (
+          // Only render this button on tabs with a gallery.
+          <ImageMenuItemLocateInGalery />
+        )}
     </ImageDTOContextProvider>
   );
 };

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

@@ -33,8 +33,6 @@ const ImageMetadataActions = (props: Props) => {
       <UnrecallableMetadataDatum metadata={metadata} handler={MetadataHandlers.GenerationMode} />
       <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.PositivePrompt} />
       <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.NegativePrompt} />
-      <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.PositiveStylePrompt} />
-      <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.NegativeStylePrompt} />
       <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.MainModel} />
       <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.VAEModel} />
       <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.Width} />
@@ -42,6 +40,7 @@ const ImageMetadataActions = (props: Props) => {
       <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.Seed} />
       <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.Steps} />
       <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.Scheduler} />
+      <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.CLIPSkip} />
       <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.CFGScale} />
       <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.CFGRescaleMultiplier} />
       <SingleMetadataDatum metadata={metadata} handler={MetadataHandlers.Guidance} />

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

@@ -60,7 +60,7 @@ export const CompareToolbar = memo(() => {
   useRegisteredHotkeys({ id: 'nextComparisonMode', category: 'viewer', callback: nextMode, dependencies: [nextMode] });
 
   return (
-    <Flex w="full" px={2} gap={2} bg="base.750" borderTopRadius="base" h={12}>
+    <Flex w="full" justifyContent="center" h={8}>
       <Flex flex={1} justifyContent="center">
         <Flex marginInlineEnd="auto" alignItems="center">
           <IconButton
@@ -85,7 +85,7 @@ export const CompareToolbar = memo(() => {
         </Flex>
       </Flex>
       <Flex flex={1} justifyContent="center">
-        <ButtonGroup variant="outline" alignItems="center">
+        <ButtonGroup size="sm" variant="outline" alignItems="center">
           <Button
             flexShrink={0}
             onClick={setComparisonModeSlider}
@@ -117,6 +117,7 @@ export const CompareToolbar = memo(() => {
             </Flex>
           </Tooltip>
           <Button
+            size="sm"
             variant="link"
             alignSelf="stretch"
             px={2}

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

@@ -1,5 +1,5 @@
 import { Button, Divider, IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { DeleteImageButton } from 'features/deleteImageModal/components/DeleteImageButton';
 import SingleSelectionMenuItems from 'features/gallery/components/ImageContextMenu/SingleSelectionMenuItems';
 import { useDeleteImage } from 'features/gallery/hooks/useDeleteImage';
@@ -10,14 +10,19 @@ import { useRecallDimensions } from 'features/gallery/hooks/useRecallDimensions'
 import { useRecallPrompts } from 'features/gallery/hooks/useRecallPrompts';
 import { useRecallRemix } from 'features/gallery/hooks/useRecallRemix';
 import { useRecallSeed } from 'features/gallery/hooks/useRecallSeed';
+import { boardIdSelected } from 'features/gallery/store/gallerySlice';
 import { PostProcessingPopover } from 'features/parameters/components/PostProcessing/PostProcessingPopover';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
+import { navigationApi } from 'features/ui/layouts/navigation-api';
+import { useGalleryPanel } from 'features/ui/layouts/use-gallery-panel';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
-import { memo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
+import { flushSync } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 import {
   PiArrowsCounterClockwiseBold,
   PiAsteriskBold,
+  PiCrosshairBold,
   PiDotsThreeOutlineFill,
   PiFlowArrowBold,
   PiPencilBold,
@@ -30,7 +35,25 @@ import type { ImageDTO } from 'services/api/types';
 export const CurrentImageButtons = memo(({ imageDTO }: { imageDTO: ImageDTO }) => {
   const { t } = useTranslation();
   const tab = useAppSelector(selectActiveTab);
+  const dispatch = useAppDispatch();
+  const activeTab = useAppSelector(selectActiveTab);
+  const galleryPanel = useGalleryPanel(activeTab);
+
+  const isGalleryImage = useMemo(() => {
+    return !imageDTO.is_intermediate;
+  }, [imageDTO]);
+
+  const locateInGallery = useCallback(() => {
+    navigationApi.expandRightPanel();
+    galleryPanel.expand();
+    flushSync(() => {
+      dispatch(boardIdSelected({ boardId: imageDTO.board_id ?? 'none', selectedImageName: imageDTO.image_name }));
+    });
+  }, [dispatch, galleryPanel, imageDTO]);
+
   const isCanvasOrGenerateTab = tab === 'canvas' || tab === 'generate';
+  const isCanvasOrGenerateOrUpscalingTab = tab === 'canvas' || tab === 'generate' || tab === 'upscaling';
+  const doesTabHaveGallery = tab === 'canvas' || tab === 'generate' || tab === 'workflows' || tab === 'upscaling';
 
   const isUpscalingEnabled = useFeatureStatus('upscaling');
 
@@ -74,6 +97,17 @@ export const CurrentImageButtons = memo(({ imageDTO }: { imageDTO: ImageDTO }) =
 
       <Divider orientation="vertical" h={8} mx={2} />
 
+      {doesTabHaveGallery && isGalleryImage && (
+        <IconButton
+          icon={<PiCrosshairBold />}
+          aria-label={t('boards.locateInGalery')}
+          tooltip={t('boards.locateInGalery')}
+          onClick={locateInGallery}
+          variant="link"
+          size="sm"
+          alignSelf="stretch"
+        />
+      )}
       <IconButton
         icon={<PiFlowArrowBold />}
         tooltip={`${t('nodes.loadWorkflow')} (W)`}
@@ -94,7 +128,7 @@ export const CurrentImageButtons = memo(({ imageDTO }: { imageDTO: ImageDTO }) =
           onClick={recallRemix.recall}
         />
       )}
-      {isCanvasOrGenerateTab && (
+      {isCanvasOrGenerateOrUpscalingTab && (
         <IconButton
           icon={<PiQuotesBold />}
           tooltip={`${t('parameters.usePrompt')} (P)`}
@@ -105,7 +139,7 @@ export const CurrentImageButtons = memo(({ imageDTO }: { imageDTO: ImageDTO }) =
           onClick={recallPrompts.recall}
         />
       )}
-      {isCanvasOrGenerateTab && (
+      {isCanvasOrGenerateOrUpscalingTab && (
         <IconButton
           icon={<PiPlantBold />}
           tooltip={`${t('parameters.useSeed')} (S)`}

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

@@ -1,15 +0,0 @@
-import { Flex } from '@invoke-ai/ui-library';
-import { ProgressImage } from 'features/gallery/components/ImageViewer/ProgressImage';
-import { memo } from 'react';
-
-import { ProgressIndicator } from './ProgressIndicator';
-
-export const GenerationProgressPanel = memo(() => {
-  return (
-    <Flex position="relative" flexDir="column" w="full" h="full" overflow="hidden">
-      <ProgressImage />
-      <ProgressIndicator position="absolute" top={6} right={6} size={8} />
-    </Flex>
-  );
-});
-GenerationProgressPanel.displayName = 'GenerationProgressPanel';

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

@@ -1,32 +1,36 @@
-import { Box, Flex } from '@invoke-ai/ui-library';
+import { Box, Divider, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import type { ComparisonProps } from 'features/gallery/components/ImageViewer/common';
+import { debounce } from 'es-toolkit';
+import type { ComparisonWrapperProps } from 'features/gallery/components/ImageViewer/common';
+import { selectImageToCompare } from 'features/gallery/components/ImageViewer/common';
 import { CompareToolbar } from 'features/gallery/components/ImageViewer/CompareToolbar';
 import { ImageComparisonDroppable } from 'features/gallery/components/ImageViewer/ImageComparisonDroppable';
 import { ImageComparisonHover } from 'features/gallery/components/ImageViewer/ImageComparisonHover';
 import { ImageComparisonSideBySide } from 'features/gallery/components/ImageViewer/ImageComparisonSideBySide';
 import { ImageComparisonSlider } from 'features/gallery/components/ImageViewer/ImageComparisonSlider';
-import { selectComparisonMode } from 'features/gallery/store/gallerySelectors';
-import { memo } from 'react';
-import { useMeasure } from 'react-use';
+import { selectComparisonMode, selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
+import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useImageDTO } from 'services/api/endpoints/images';
 import type { Equals } from 'tsafe';
 import { assert } from 'tsafe';
 
-const ImageComparisonContent = memo(({ firstImage, secondImage, containerDims }: ComparisonProps) => {
+const ImageComparisonContent = memo(({ firstImage, secondImage, rect }: ComparisonWrapperProps) => {
   const comparisonMode = useAppSelector(selectComparisonMode);
 
+  if (!firstImage || !secondImage) {
+    return null;
+  }
+
   if (comparisonMode === 'slider') {
-    return <ImageComparisonSlider firstImage={firstImage} secondImage={secondImage} containerDims={containerDims} />;
+    return <ImageComparisonSlider firstImage={firstImage} secondImage={secondImage} rect={rect} />;
   }
 
   if (comparisonMode === 'side-by-side') {
-    return (
-      <ImageComparisonSideBySide firstImage={firstImage} secondImage={secondImage} containerDims={containerDims} />
-    );
+    return <ImageComparisonSideBySide firstImage={firstImage} secondImage={secondImage} rect={rect} />;
   }
 
   if (comparisonMode === 'hover') {
-    return <ImageComparisonHover firstImage={firstImage} secondImage={secondImage} containerDims={containerDims} />;
+    return <ImageComparisonHover firstImage={firstImage} secondImage={secondImage} rect={rect} />;
   }
 
   assert<Equals<never, typeof comparisonMode>>(false);
@@ -34,16 +38,51 @@ const ImageComparisonContent = memo(({ firstImage, secondImage, containerDims }:
 
 ImageComparisonContent.displayName = 'ImageComparisonContent';
 
-export const ImageComparison = memo(({ firstImage, secondImage }: Omit<ComparisonProps, 'containerDims'>) => {
-  const [containerRef, containerDims] = useMeasure<HTMLDivElement>();
+export const ImageComparison = memo(() => {
+  const lastSelectedImageName = useAppSelector(selectLastSelectedImage);
+  const lastSelectedImageDTO = useImageDTO(lastSelectedImageName);
+  const comparisonImageName = useAppSelector(selectImageToCompare);
+  const comparisonImageDTO = useImageDTO(comparisonImageName);
+
+  const [rect, setRect] = useState<DOMRect | null>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  // Ref callback runs synchronously when the DOM node is attached, ensuring we have a measurement before
+  // the comparison content is rendered.
+  const measureNode = useCallback((node: HTMLDivElement) => {
+    if (node) {
+      ref.current = node;
+      const boundingRect = node.getBoundingClientRect();
+      setRect(boundingRect);
+    }
+  }, []);
+
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) {
+      return;
+    }
+    const measureRect = debounce(() => {
+      const boundingRect = el.getBoundingClientRect();
+      setRect(boundingRect);
+    }, 300);
+    const observer = new ResizeObserver(measureRect);
+    observer.observe(el);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
 
   return (
-    <Flex flexDir="column" w="full" h="full" position="relative">
+    <Flex flexDir="column" w="full" h="full" overflow="hidden" gap={2} position="relative">
       <CompareToolbar />
-      <Box ref={containerRef} w="full" h="full" p={2} overflow="hidden">
-        <ImageComparisonContent firstImage={firstImage} secondImage={secondImage} containerDims={containerDims} />
-      </Box>
-      <ImageComparisonDroppable />
+      <Divider />
+      <Flex w="full" h="full" position="relative">
+        <Box ref={measureNode} w="full" h="full" overflow="hidden">
+          <ImageComparisonContent firstImage={lastSelectedImageDTO} secondImage={comparisonImageDTO} rect={rect} />
+        </Box>
+        <ImageComparisonDroppable />
+      </Flex>
     </Flex>
   );
 });

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

@@ -11,14 +11,16 @@ import { memo, useMemo, useRef } from 'react';
 import type { ComparisonProps } from './common';
 import { fitDimsToContainer, getSecondImageDims } from './common';
 
-export const ImageComparisonHover = memo(({ firstImage, secondImage, containerDims }: ComparisonProps) => {
+export const ImageComparisonHover = memo(({ firstImage, secondImage, rect }: ComparisonProps) => {
   const comparisonFit = useAppSelector(selectComparisonFit);
   const imageContainerRef = useRef<HTMLDivElement>(null);
   const mouseOver = useBoolean(false);
-  const fittedDims = useMemo<Dimensions>(
-    () => fitDimsToContainer(containerDims, firstImage),
-    [containerDims, firstImage]
-  );
+  const fittedDims = useMemo<Dimensions>(() => {
+    if (!rect) {
+      return { width: 0, height: 0 };
+    }
+    return fitDimsToContainer(rect, firstImage);
+  }, [firstImage, rect]);
   const compareImageDims = useMemo<Dimensions>(
     () => getSecondImageDims(comparisonFit, fittedDims, firstImage, secondImage),
     [comparisonFit, fittedDims, firstImage, secondImage]

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

@@ -19,7 +19,7 @@ const HANDLE_HITBOX_PX = `${HANDLE_HITBOX}px`;
 const HANDLE_INNER_LEFT_PX = `${HANDLE_HITBOX / 2 - HANDLE_WIDTH / 2}px`;
 const HANDLE_LEFT_INITIAL_PX = `calc(${INITIAL_POS} - ${HANDLE_HITBOX / 2}px)`;
 
-export const ImageComparisonSlider = memo(({ firstImage, secondImage, containerDims }: ComparisonProps) => {
+export const ImageComparisonSlider = memo(({ firstImage, secondImage, rect }: ComparisonProps) => {
   const comparisonFit = useAppSelector(selectComparisonFit);
 
   // How far the handle is from the left - this will be a CSS calculation that takes into account the handle width
@@ -33,10 +33,12 @@ export const ImageComparisonSlider = memo(({ firstImage, secondImage, containerD
   const rafRef = useRef<number | null>(null);
   const lastMoveTimeRef = useRef<number>(0);
 
-  const fittedDims = useMemo<Dimensions>(
-    () => fitDimsToContainer(containerDims, firstImage),
-    [containerDims, firstImage]
-  );
+  const fittedDims = useMemo<Dimensions>(() => {
+    if (!rect) {
+      return { width: 0, height: 0 };
+    }
+    return fitDimsToContainer(rect, firstImage);
+  }, [firstImage, rect]);
 
   const compareImageDims = useMemo<Dimensions>(
     () => getSecondImageDims(comparisonFit, fittedDims, firstImage, secondImage),

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

@@ -1,42 +1,36 @@
+import { Divider, Flex } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectImageToCompare } from 'features/gallery/components/ImageViewer/common';
+import { setComparisonImageDndTarget } from 'features/dnd/dnd';
+import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { CurrentImagePreview } from 'features/gallery/components/ImageViewer/CurrentImagePreview';
-import { ImageComparison } from 'features/gallery/components/ImageViewer/ImageComparison';
 import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
 import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useImageDTO } from 'services/api/endpoints/images';
 
-// type Props = {
-//   closeButton?: ReactNode;
-// };
+import { ViewerToolbar } from './ViewerToolbar';
 
-// const useFocusRegionOptions = {
-//   focusOnMount: true,
-// };
-
-// const FOCUS_REGION_STYLES: SystemStyleObject = {
-//   display: 'flex',
-//   width: 'full',
-//   height: 'full',
-//   position: 'absolute',
-//   flexDirection: 'column',
-//   inset: 0,
-//   alignItems: 'center',
-//   justifyContent: 'center',
-//   overflow: 'hidden',
-// };
+const dndTargetData = setComparisonImageDndTarget.getData();
 
 export const ImageViewer = memo(() => {
+  const { t } = useTranslation();
+
   const lastSelectedImageName = useAppSelector(selectLastSelectedImage);
   const lastSelectedImageDTO = useImageDTO(lastSelectedImageName);
-  const comparisonImageName = useAppSelector(selectImageToCompare);
-  const comparisonImageDTO = useImageDTO(comparisonImageName);
-
-  if (lastSelectedImageDTO && comparisonImageDTO) {
-    return <ImageComparison firstImage={lastSelectedImageDTO} secondImage={comparisonImageDTO} />;
-  }
-
-  return <CurrentImagePreview imageDTO={lastSelectedImageDTO} />;
+  return (
+    <Flex flexDir="column" w="full" h="full" overflow="hidden" gap={2} position="relative">
+      <ViewerToolbar />
+      <Divider />
+      <Flex w="full" h="full" position="relative">
+        <CurrentImagePreview imageDTO={lastSelectedImageDTO} />
+        <DndDropTarget
+          dndTarget={setComparisonImageDndTarget}
+          dndTargetData={dndTargetData}
+          label={t('gallery.selectForCompare')}
+        />
+      </Flex>
+    </Flex>
+  );
 });
 
 ImageViewer.displayName = 'ImageViewer';

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

@@ -1,42 +1,24 @@
-import { Divider, Flex } from '@invoke-ai/ui-library';
+import { createSelector } from '@reduxjs/toolkit';
 import { useAppSelector } from 'app/store/storeHooks';
-import type { SetComparisonImageDndTargetData } from 'features/dnd/dnd';
-import { setComparisonImageDndTarget } from 'features/dnd/dnd';
-import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { selectImageToCompare, selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
-import { memo, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo } from 'react';
 
 import { ImageViewerContextProvider } from './context';
+import { ImageComparison } from './ImageComparison';
 import { ImageViewer } from './ImageViewer';
-import { ViewerToolbar } from './ViewerToolbar';
+
+const selectIsComparing = createSelector(
+  [selectLastSelectedImage, selectImageToCompare],
+  (lastSelectedImage, imageToCompare) => !!lastSelectedImage && !!imageToCompare
+);
 
 export const ImageViewerPanel = memo(() => {
-  const { t } = useTranslation();
-  const lastSelectedImage = useAppSelector(selectLastSelectedImage);
-  const imageToCompare = useAppSelector(selectImageToCompare);
-
-  // Only show drop target when we have a selected image but no comparison image yet
-  const shouldShowDropTarget = lastSelectedImage && !imageToCompare;
-
-  const dndTargetData = useMemo<SetComparisonImageDndTargetData>(() => setComparisonImageDndTarget.getData(), []);
+  const isComparing = useAppSelector(selectIsComparing);
 
   return (
     <ImageViewerContextProvider>
-      <Flex flexDir="column" w="full" h="full" overflow="hidden" gap={2} position="relative">
-        <ViewerToolbar />
-        <Divider />
-        <Flex w="full" h="full" position="relative">
-          <ImageViewer />
-          {shouldShowDropTarget && (
-            <DndDropTarget
-              dndTarget={setComparisonImageDndTarget}
-              dndTargetData={dndTargetData}
-              label={t('gallery.selectForCompare')}
-            />
-          )}
-        </Flex>
-      </Flex>
+      {!isComparing && <ImageViewer />}
+      {isComparing && <ImageComparison />}
     </ImageViewerContextProvider>
   );
 });

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

@@ -1,82 +0,0 @@
-import type { SystemStyleObject } from '@invoke-ai/ui-library';
-import { Badge, Flex, Image } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
-import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import { selectSystemSlice } from 'features/system/store/systemSlice';
-import { memo, useMemo } from 'react';
-import { PiPulseBold } from 'react-icons/pi';
-import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
-import { $lastProgressImage } from 'services/events/stores';
-
-const selectShouldAntialiasProgressImage = createSelector(
-  selectSystemSlice,
-  (system) => system.shouldAntialiasProgressImage
-);
-
-export const ProgressImage = memo(() => {
-  const isGenerationInProgress = useIsGenerationInProgress();
-  const progressImage = useStore($lastProgressImage);
-  const shouldAntialiasProgressImage = useAppSelector(selectShouldAntialiasProgressImage);
-
-  const sx = useMemo<SystemStyleObject>(
-    () => ({
-      imageRendering: shouldAntialiasProgressImage ? 'auto' : 'pixelated',
-    }),
-    [shouldAntialiasProgressImage]
-  );
-
-  if (!isGenerationInProgress) {
-    return (
-      <Flex width="full" height="full" alignItems="center" justifyContent="center">
-        <IAINoContentFallback icon={PiPulseBold} label="No Generation in Progress" />
-      </Flex>
-    );
-  }
-
-  if (!progressImage) {
-    return (
-      <Flex width="full" height="full" position="relative" minW={0} minH={0}>
-        <Badge
-          position="absolute"
-          top={2}
-          left={2}
-          color="base.300"
-          borderColor="base.700"
-          borderWidth={1}
-          bg="base.900"
-          opacity="0.8"
-          fontSize="sm"
-          fontWeight="semibold"
-          zIndex="docked"
-          pointerEvents="none"
-          borderRadius="base"
-        >
-          Waiting for Image
-        </Badge>
-      </Flex>
-    );
-  }
-
-  return (
-    <Flex width="full" height="full" alignItems="center" justifyContent="center" minW={0} minH={0}>
-      <Image
-        src={progressImage.dataURL}
-        width={progressImage.width}
-        height={progressImage.height}
-        draggable={false}
-        data-testid="progress-image"
-        objectFit="contain"
-        maxWidth="full"
-        maxHeight="full"
-        borderRadius="base"
-        sx={sx}
-        minH={0}
-        minW={0}
-      />
-    </Flex>
-  );
-});
-
-ProgressImage.displayName = 'ProgressImage';

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

@@ -1,38 +0,0 @@
-import type { CircularProgressProps, SystemStyleObject } from '@invoke-ai/ui-library';
-import { CircularProgress, Tooltip } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import { memo } from 'react';
-import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
-import { $lastProgressEvent, formatProgressMessage } from 'services/events/stores';
-
-const circleStyles: SystemStyleObject = {
-  circle: {
-    transitionProperty: 'none',
-    transitionDuration: '0s',
-  },
-};
-
-export const ProgressIndicator = memo((props: CircularProgressProps) => {
-  const isGenerationInProgress = useIsGenerationInProgress();
-  const lastProgressEvent = useStore($lastProgressEvent);
-  if (!isGenerationInProgress) {
-    return null;
-  }
-  if (!lastProgressEvent) {
-    return null;
-  }
-  return (
-    <Tooltip label={formatProgressMessage(lastProgressEvent)}>
-      <CircularProgress
-        size="14px"
-        color="invokeBlue.500"
-        thickness={14}
-        isIndeterminate={!lastProgressEvent || lastProgressEvent.percentage === null}
-        value={lastProgressEvent?.percentage ? lastProgressEvent.percentage * 100 : undefined}
-        sx={circleStyles}
-        {...props}
-      />
-    </Tooltip>
-  );
-});
-ProgressIndicator.displayName = 'ProgressMessage';