chore: bump version to v6.1.0

Currently translated at 100.0% (2003 of 2003 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/ISSUE_TEMPLATE/BUG_REPORT.yml

@@ -21,6 +21,20 @@ body:
         - label: I have searched the existing issues
           required: true
 
+  - type: dropdown
+    id: install_method
+    attributes:
+      label: Install method
+      description: How did you install Invoke?
+      multiple: false
+      options:
+        - "Invoke's Launcher"
+        - 'Stability Matrix'
+        - 'Pinokio'
+        - 'Manual'
+    validations:
+      required: true
+
   - type: markdown
     attributes:
       value: __Describe your environment__
@@ -76,8 +90,8 @@ body:
     attributes:
       label: Version number
       description: |
-        The version of Invoke you have installed. If it is not the latest version, please update and try again to confirm the issue still exists. If you are testing main, please include the commit hash instead.
-      placeholder: ex. 3.6.1
+        The version of Invoke you have installed. If it is not the [latest version](https://github.com/invoke-ai/InvokeAI/releases/latest), please update and try again to confirm the issue still exists. If you are testing main, please include the commit hash instead.
+      placeholder: ex. v6.0.2
     validations:
       required: true
 
@@ -85,17 +99,17 @@ body:
     id: browser-version
     attributes:
       label: Browser
-      description: Your web browser and version.
+      description: Your web browser and version, if you do not use the Launcher's provided GUI.
       placeholder: ex. Firefox 123.0b3
     validations:
-      required: true
+      required: false
 
   - type: textarea
     id: python-deps
     attributes:
-      label: Python dependencies
+      label: System Information
       description: |
-        If the problem occurred during image generation, click the gear icon at the bottom left corner, click "About", click the copy button and then paste here.
+        Click the gear icon at the bottom left corner, then click "About". Click the copy button and then paste here.
     validations:
       required: false
 

.gitignore

@@ -190,3 +190,5 @@ installer/update.bat
 installer/update.sh
 installer/InvokeAI-Installer/
 .aider*
+
+.claude/

docker/Dockerfile

@@ -5,8 +5,7 @@
 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
+RUN corepack use pnpm@10.x && corepack enable
 
 WORKDIR /build
 COPY invokeai/frontend/web/ ./

docs/contributing/dev-environment.md

@@ -41,7 +41,7 @@ If you just want to use Invoke, you should use the [launcher][launcher link].
      With the modifications made, the install command should look something like this:
 
       ```sh
-      uv pip install -e ".[dev,test,docs,xformers]" --python 3.12 --python-preference only-managed --index=https://download.pytorch.org/whl/cu126 --reinstall
+      uv pip install -e ".[dev,test,docs,xformers]" --python 3.12 --python-preference only-managed --index=https://download.pytorch.org/whl/cu128 --reinstall
       ```
 
 6. At this point, you should have Invoke installed, a venv set up and activated, and the server running. But you will see a warning in the terminal that no UI was found. If you go to the URL for the server, you won't get a UI.
@@ -50,11 +50,11 @@ If you just want to use Invoke, you should use the [launcher][launcher link].
 
       If you only want to edit the docs, you can stop here and skip to the **Documentation** section below.
 
-7. Install the frontend dev toolchain:
+7. Install the frontend dev toolchain, paying attention to versions:
 
-      - [`nodejs`](https://nodejs.org/) (v20+)
+      - [`nodejs`](https://nodejs.org/) (tested on LTS, v22)
 
-      - [`pnpm`](https://pnpm.io/8.x/installation) (must be v8 - not v9!)
+      - [`pnpm`](https://pnpm.io/installation) (tested on v10)
 
 8. Do a production build of the frontend:
 

docs/contributing/frontend/workflows.md

@@ -297,7 +297,7 @@ Migration logic is in [migrations.ts].
 <!-- links -->
 
 [pydantic]: https://github.com/pydantic/pydantic 'pydantic'
-[zod]: https://github.com/colinhacks/zod 'zod/v4'
+[zod]: https://github.com/colinhacks/zod 'zod'
 [openapi-types]: https://github.com/kogosoftwarellc/open-api/tree/main/packages/openapi-types 'openapi-types'
 [reactflow]: https://github.com/xyflow/xyflow 'reactflow'
 [reactflow-concepts]: https://reactflow.dev/learn/concepts/terms-and-definitions

invokeai/app/invocations/primitives.py

@@ -430,6 +430,15 @@ class FluxConditioningOutput(BaseInvocationOutput):
         return cls(conditioning=FluxConditioningField(conditioning_name=conditioning_name))
 
 
+@invocation_output("flux_conditioning_collection_output")
+class FluxConditioningCollectionOutput(BaseInvocationOutput):
+    """Base class for nodes that output a collection of conditioning tensors"""
+
+    collection: list[FluxConditioningField] = OutputField(
+        description="The output conditioning tensors",
+    )
+
+
 @invocation_output("sd3_conditioning_output")
 class SD3ConditioningOutput(BaseInvocationOutput):
     """Base class for nodes that output a single SD3 conditioning tensor"""

invokeai/app/services/board_image_records/board_image_records_sqlite.py

@@ -14,15 +14,14 @@ from invokeai.app.services.shared.sqlite.sqlite_database import SqliteDatabase
 class SqliteBoardImageRecordStorage(BoardImageRecordStorageBase):
     def __init__(self, db: SqliteDatabase) -> None:
         super().__init__()
-        self._conn = db.conn
+        self._db = db
 
     def add_image_to_board(
         self,
         board_id: str,
         image_name: str,
     ) -> None:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             cursor.execute(
                 """--sql
                 INSERT INTO board_images (board_id, image_name)
@@ -31,17 +30,12 @@ class SqliteBoardImageRecordStorage(BoardImageRecordStorageBase):
                 """,
                 (board_id, image_name, board_id),
             )
-            self._conn.commit()
-        except sqlite3.Error as e:
-            self._conn.rollback()
-            raise e
 
     def remove_image_from_board(
         self,
         image_name: str,
     ) -> None:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             cursor.execute(
                 """--sql
                 DELETE FROM board_images
@@ -49,10 +43,6 @@ class SqliteBoardImageRecordStorage(BoardImageRecordStorageBase):
                 """,
                 (image_name,),
             )
-            self._conn.commit()
-        except sqlite3.Error as e:
-            self._conn.rollback()
-            raise e
 
     def get_images_for_board(
         self,
@@ -60,27 +50,26 @@ class SqliteBoardImageRecordStorage(BoardImageRecordStorageBase):
         offset: int = 0,
         limit: int = 10,
     ) -> OffsetPaginatedResults[ImageRecord]:
-        # TODO: this isn't paginated yet?
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT images.*
-            FROM board_images
-            INNER JOIN images ON board_images.image_name = images.image_name
-            WHERE board_images.board_id = ?
-            ORDER BY board_images.updated_at DESC;
-            """,
-            (board_id,),
-        )
-        result = cast(list[sqlite3.Row], cursor.fetchall())
-        images = [deserialize_image_record(dict(r)) for r in result]
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT images.*
+                FROM board_images
+                INNER JOIN images ON board_images.image_name = images.image_name
+                WHERE board_images.board_id = ?
+                ORDER BY board_images.updated_at DESC;
+                """,
+                (board_id,),
+            )
+            result = cast(list[sqlite3.Row], cursor.fetchall())
+            images = [deserialize_image_record(dict(r)) for r in result]
 
-        cursor.execute(
-            """--sql
-            SELECT COUNT(*) FROM images WHERE 1=1;
-            """
-        )
-        count = cast(int, cursor.fetchone()[0])
+            cursor.execute(
+                """--sql
+                SELECT COUNT(*) FROM images WHERE 1=1;
+                """
+            )
+            count = cast(int, cursor.fetchone()[0])
 
         return OffsetPaginatedResults(items=images, offset=offset, limit=limit, total=count)
 
@@ -90,56 +79,55 @@ class SqliteBoardImageRecordStorage(BoardImageRecordStorageBase):
         categories: list[ImageCategory] | None,
         is_intermediate: bool | None,
     ) -> list[str]:
-        params: list[str | bool] = []
+        with self._db.transaction() as cursor:
+            params: list[str | bool] = []
 
-        # Base query is a join between images and board_images
-        stmt = """
-                SELECT images.image_name
-                FROM images
-                LEFT JOIN board_images ON board_images.image_name = images.image_name
-                WHERE 1=1
-                """
+            # Base query is a join between images and board_images
+            stmt = """
+                    SELECT images.image_name
+                    FROM images
+                    LEFT JOIN board_images ON board_images.image_name = images.image_name
+                    WHERE 1=1
+                    """
 
-        # Handle board_id filter
-        if board_id == "none":
-            stmt += """--sql
-                AND board_images.board_id IS NULL
-                """
-        else:
-            stmt += """--sql
-                AND board_images.board_id = ?
-                """
-            params.append(board_id)
+            # Handle board_id filter
+            if board_id == "none":
+                stmt += """--sql
+                    AND board_images.board_id IS NULL
+                    """
+            else:
+                stmt += """--sql
+                    AND board_images.board_id = ?
+                    """
+                params.append(board_id)
 
-        # Add the category filter
-        if categories is not None:
-            # Convert the enum values to unique list of strings
-            category_strings = [c.value for c in set(categories)]
-            # Create the correct length of placeholders
-            placeholders = ",".join("?" * len(category_strings))
-            stmt += f"""--sql
-                AND images.image_category IN ( {placeholders} )
-                """
+            # Add the category filter
+            if categories is not None:
+                # Convert the enum values to unique list of strings
+                category_strings = [c.value for c in set(categories)]
+                # Create the correct length of placeholders
+                placeholders = ",".join("?" * len(category_strings))
+                stmt += f"""--sql
+                    AND images.image_category IN ( {placeholders} )
+                    """
 
-            # Unpack the included categories into the query params
-            for c in category_strings:
-                params.append(c)
+                # Unpack the included categories into the query params
+                for c in category_strings:
+                    params.append(c)
 
-        # Add the is_intermediate filter
-        if is_intermediate is not None:
-            stmt += """--sql
-                AND images.is_intermediate = ?
-                """
-            params.append(is_intermediate)
+            # Add the is_intermediate filter
+            if is_intermediate is not None:
+                stmt += """--sql
+                    AND images.is_intermediate = ?
+                    """
+                params.append(is_intermediate)
 
-        # Put a ring on it
-        stmt += ";"
+            # Put a ring on it
+            stmt += ";"
 
-        # Execute the query
-        cursor = self._conn.cursor()
-        cursor.execute(stmt, params)
+            cursor.execute(stmt, params)
 
-        result = cast(list[sqlite3.Row], cursor.fetchall())
+            result = cast(list[sqlite3.Row], cursor.fetchall())
         image_names = [r[0] for r in result]
         return image_names
 
@@ -147,31 +135,31 @@ class SqliteBoardImageRecordStorage(BoardImageRecordStorageBase):
         self,
         image_name: str,
     ) -> Optional[str]:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-                SELECT board_id
-                FROM board_images
-                WHERE image_name = ?;
-                """,
-            (image_name,),
-        )
-        result = cursor.fetchone()
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                    SELECT board_id
+                    FROM board_images
+                    WHERE image_name = ?;
+                    """,
+                (image_name,),
+            )
+            result = cursor.fetchone()
         if result is None:
             return None
         return cast(str, result[0])
 
     def get_image_count_for_board(self, board_id: str) -> int:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-                SELECT COUNT(*)
-                FROM board_images
-                INNER JOIN images ON board_images.image_name = images.image_name
-                WHERE images.is_intermediate = FALSE
-                AND board_images.board_id = ?;
-                """,
-            (board_id,),
-        )
-        count = cast(int, cursor.fetchone()[0])
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                    SELECT COUNT(*)
+                    FROM board_images
+                    INNER JOIN images ON board_images.image_name = images.image_name
+                    WHERE images.is_intermediate = FALSE
+                    AND board_images.board_id = ?;
+                    """,
+                (board_id,),
+            )
+            count = cast(int, cursor.fetchone()[0])
         return count

invokeai/app/services/board_records/board_records_sqlite.py

@@ -20,61 +20,57 @@ from invokeai.app.util.misc import uuid_string
 class SqliteBoardRecordStorage(BoardRecordStorageBase):
     def __init__(self, db: SqliteDatabase) -> None:
         super().__init__()
-        self._conn = db.conn
+        self._db = db
 
     def delete(self, board_id: str) -> None:
-        try:
-            cursor = self._conn.cursor()
-            cursor.execute(
-                """--sql
-                DELETE FROM boards
-                WHERE board_id = ?;
-                """,
-                (board_id,),
-            )
-            self._conn.commit()
-        except Exception as e:
-            self._conn.rollback()
-            raise BoardRecordDeleteException from e
+        with self._db.transaction() as cursor:
+            try:
+                cursor.execute(
+                    """--sql
+                    DELETE FROM boards
+                    WHERE board_id = ?;
+                    """,
+                    (board_id,),
+                )
+            except Exception as e:
+                raise BoardRecordDeleteException from e
 
     def save(
         self,
         board_name: str,
     ) -> BoardRecord:
-        try:
-            board_id = uuid_string()
-            cursor = self._conn.cursor()
-            cursor.execute(
-                """--sql
-                INSERT OR IGNORE INTO boards (board_id, board_name)
-                VALUES (?, ?);
-                """,
-                (board_id, board_name),
-            )
-            self._conn.commit()
-        except sqlite3.Error as e:
-            self._conn.rollback()
-            raise BoardRecordSaveException from e
+        with self._db.transaction() as cursor:
+            try:
+                board_id = uuid_string()
+                cursor.execute(
+                    """--sql
+                    INSERT OR IGNORE INTO boards (board_id, board_name)
+                    VALUES (?, ?);
+                    """,
+                    (board_id, board_name),
+                )
+            except sqlite3.Error as e:
+                raise BoardRecordSaveException from e
         return self.get(board_id)
 
     def get(
         self,
         board_id: str,
     ) -> BoardRecord:
-        try:
-            cursor = self._conn.cursor()
-            cursor.execute(
-                """--sql
-                SELECT *
-                FROM boards
-                WHERE board_id = ?;
-                """,
-                (board_id,),
-            )
+        with self._db.transaction() as cursor:
+            try:
+                cursor.execute(
+                    """--sql
+                    SELECT *
+                    FROM boards
+                    WHERE board_id = ?;
+                    """,
+                    (board_id,),
+                )
 
-            result = cast(Union[sqlite3.Row, None], cursor.fetchone())
-        except sqlite3.Error as e:
-            raise BoardRecordNotFoundException from e
+                result = cast(Union[sqlite3.Row, None], cursor.fetchone())
+            except sqlite3.Error as e:
+                raise BoardRecordNotFoundException from e
         if result is None:
             raise BoardRecordNotFoundException
         return BoardRecord(**dict(result))
@@ -84,45 +80,43 @@ class SqliteBoardRecordStorage(BoardRecordStorageBase):
         board_id: str,
         changes: BoardChanges,
     ) -> BoardRecord:
-        try:
-            cursor = self._conn.cursor()
-            # Change the name of a board
-            if changes.board_name is not None:
-                cursor.execute(
-                    """--sql
-                    UPDATE boards
-                    SET board_name = ?
-                    WHERE board_id = ?;
-                    """,
-                    (changes.board_name, board_id),
-                )
+        with self._db.transaction() as cursor:
+            try:
+                # Change the name of a board
+                if changes.board_name is not None:
+                    cursor.execute(
+                        """--sql
+                        UPDATE boards
+                        SET board_name = ?
+                        WHERE board_id = ?;
+                        """,
+                        (changes.board_name, board_id),
+                    )
 
-            # Change the cover image of a board
-            if changes.cover_image_name is not None:
-                cursor.execute(
-                    """--sql
-                    UPDATE boards
-                    SET cover_image_name = ?
-                    WHERE board_id = ?;
-                    """,
-                    (changes.cover_image_name, board_id),
-                )
+                # Change the cover image of a board
+                if changes.cover_image_name is not None:
+                    cursor.execute(
+                        """--sql
+                        UPDATE boards
+                        SET cover_image_name = ?
+                        WHERE board_id = ?;
+                        """,
+                        (changes.cover_image_name, board_id),
+                    )
 
-            # Change the archived status of a board
-            if changes.archived is not None:
-                cursor.execute(
-                    """--sql
-                    UPDATE boards
-                    SET archived = ?
-                    WHERE board_id = ?;
-                    """,
-                    (changes.archived, board_id),
-                )
+                # Change the archived status of a board
+                if changes.archived is not None:
+                    cursor.execute(
+                        """--sql
+                        UPDATE boards
+                        SET archived = ?
+                        WHERE board_id = ?;
+                        """,
+                        (changes.archived, board_id),
+                    )
 
-            self._conn.commit()
-        except sqlite3.Error as e:
-            self._conn.rollback()
-            raise BoardRecordSaveException from e
+            except sqlite3.Error as e:
+                raise BoardRecordSaveException from e
         return self.get(board_id)
 
     def get_many(
@@ -133,78 +127,77 @@ class SqliteBoardRecordStorage(BoardRecordStorageBase):
         limit: int = 10,
         include_archived: bool = False,
     ) -> OffsetPaginatedResults[BoardRecord]:
-        cursor = self._conn.cursor()
-
-        # Build base query
-        base_query = """
-                SELECT *
-                FROM boards
-                {archived_filter}
-                ORDER BY {order_by} {direction}
-                LIMIT ? OFFSET ?;
-            """
-
-        # Determine archived filter condition
-        archived_filter = "" if include_archived else "WHERE archived = 0"
-
-        final_query = base_query.format(
-            archived_filter=archived_filter, order_by=order_by.value, direction=direction.value
-        )
-
-        # Execute query to fetch boards
-        cursor.execute(final_query, (limit, offset))
-
-        result = cast(list[sqlite3.Row], cursor.fetchall())
-        boards = [deserialize_board_record(dict(r)) for r in result]
-
-        # Determine count query
-        if include_archived:
-            count_query = """
-                    SELECT COUNT(*)
-                    FROM boards;
-                """
-        else:
-            count_query = """
-                    SELECT COUNT(*)
+        with self._db.transaction() as cursor:
+            # Build base query
+            base_query = """
+                    SELECT *
                     FROM boards
-                    WHERE archived = 0;
+                    {archived_filter}
+                    ORDER BY {order_by} {direction}
+                    LIMIT ? OFFSET ?;
                 """
 
-        # Execute count query
-        cursor.execute(count_query)
+            # Determine archived filter condition
+            archived_filter = "" if include_archived else "WHERE archived = 0"
 
-        count = cast(int, cursor.fetchone()[0])
+            final_query = base_query.format(
+                archived_filter=archived_filter, order_by=order_by.value, direction=direction.value
+            )
+
+            # Execute query to fetch boards
+            cursor.execute(final_query, (limit, offset))
+
+            result = cast(list[sqlite3.Row], cursor.fetchall())
+            boards = [deserialize_board_record(dict(r)) for r in result]
+
+            # Determine count query
+            if include_archived:
+                count_query = """
+                        SELECT COUNT(*)
+                        FROM boards;
+                    """
+            else:
+                count_query = """
+                        SELECT COUNT(*)
+                        FROM boards
+                        WHERE archived = 0;
+                    """
+
+            # Execute count query
+            cursor.execute(count_query)
+
+            count = cast(int, cursor.fetchone()[0])
 
         return OffsetPaginatedResults[BoardRecord](items=boards, offset=offset, limit=limit, total=count)
 
     def get_all(
         self, order_by: BoardRecordOrderBy, direction: SQLiteDirection, include_archived: bool = False
     ) -> list[BoardRecord]:
-        cursor = self._conn.cursor()
-        if order_by == BoardRecordOrderBy.Name:
-            base_query = """
-                    SELECT *
-                    FROM boards
-                    {archived_filter}
-                    ORDER BY LOWER(board_name) {direction}
-                """
-        else:
-            base_query = """
-                    SELECT *
-                    FROM boards
-                    {archived_filter}
-                    ORDER BY {order_by} {direction}
-                """
+        with self._db.transaction() as cursor:
+            if order_by == BoardRecordOrderBy.Name:
+                base_query = """
+                        SELECT *
+                        FROM boards
+                        {archived_filter}
+                        ORDER BY LOWER(board_name) {direction}
+                    """
+            else:
+                base_query = """
+                        SELECT *
+                        FROM boards
+                        {archived_filter}
+                        ORDER BY {order_by} {direction}
+                    """
 
-        archived_filter = "" if include_archived else "WHERE archived = 0"
+            archived_filter = "" if include_archived else "WHERE archived = 0"
 
-        final_query = base_query.format(
-            archived_filter=archived_filter, order_by=order_by.value, direction=direction.value
-        )
+            final_query = base_query.format(
+                archived_filter=archived_filter, order_by=order_by.value, direction=direction.value
+            )
 
-        cursor.execute(final_query)
+            cursor.execute(final_query)
 
-        result = cast(list[sqlite3.Row], cursor.fetchall())
+            result = cast(list[sqlite3.Row], cursor.fetchall())
         boards = [deserialize_board_record(dict(r)) for r in result]
 
         return boards

invokeai/app/services/download/download_default.py

@@ -8,6 +8,7 @@ import time
 import traceback
 from pathlib import Path
 from queue import Empty, PriorityQueue
+from shutil import disk_usage
 from typing import TYPE_CHECKING, Any, Dict, List, Literal, Optional, Set
 
 import requests
@@ -335,6 +336,14 @@ class DownloadQueueService(DownloadQueueServiceBase):
 
         assert job.download_path
 
+        free_space = disk_usage(job.download_path.parent).free
+        GB = 2**30
+        self._logger.debug(f"Download is {job.total_bytes / GB:.2f} GB of {free_space / GB:.2f} GB free.")
+        if free_space < job.total_bytes:
+            raise RuntimeError(
+                f"Free disk space {free_space / GB:.2f} GB is not enough for download of {job.total_bytes / GB:.2f} GB."
+            )
+
         # Don't clobber an existing file. See commit 82c2c85202f88c6d24ff84710f297cfc6ae174af
         # for code that instead resumes an interrupted download.
         if job.download_path.exists():

invokeai/app/services/image_records/image_records_sqlite.py

@@ -24,22 +24,22 @@ from invokeai.app.services.shared.sqlite.sqlite_database import SqliteDatabase
 class SqliteImageRecordStorage(ImageRecordStorageBase):
     def __init__(self, db: SqliteDatabase) -> None:
         super().__init__()
-        self._conn = db.conn
+        self._db = db
 
     def get(self, image_name: str) -> ImageRecord:
-        try:
-            cursor = self._conn.cursor()
-            cursor.execute(
-                f"""--sql
-                SELECT {IMAGE_DTO_COLS} FROM images
-                WHERE image_name = ?;
-                """,
-                (image_name,),
-            )
+        with self._db.transaction() as cursor:
+            try:
+                cursor.execute(
+                    f"""--sql
+                    SELECT {IMAGE_DTO_COLS} FROM images
+                    WHERE image_name = ?;
+                    """,
+                    (image_name,),
+                )
 
-            result = cast(Optional[sqlite3.Row], cursor.fetchone())
-        except sqlite3.Error as e:
-            raise ImageRecordNotFoundException from e
+                result = cast(Optional[sqlite3.Row], cursor.fetchone())
+            except sqlite3.Error as e:
+                raise ImageRecordNotFoundException from e
 
         if not result:
             raise ImageRecordNotFoundException
@@ -47,17 +47,20 @@ class SqliteImageRecordStorage(ImageRecordStorageBase):
         return deserialize_image_record(dict(result))
 
     def get_metadata(self, image_name: str) -> Optional[MetadataField]:
-        try:
-            cursor = self._conn.cursor()
-            cursor.execute(
-                """--sql
-                SELECT metadata FROM images
-                WHERE image_name = ?;
-                """,
-                (image_name,),
-            )
+        with self._db.transaction() as cursor:
+            try:
+                cursor.execute(
+                    """--sql
+                    SELECT metadata FROM images
+                    WHERE image_name = ?;
+                    """,
+                    (image_name,),
+                )
 
-            result = cast(Optional[sqlite3.Row], cursor.fetchone())
+                result = cast(Optional[sqlite3.Row], cursor.fetchone())
+
+            except sqlite3.Error as e:
+                raise ImageRecordNotFoundException from e
 
             if not result:
                 raise ImageRecordNotFoundException
@@ -65,64 +68,60 @@ class SqliteImageRecordStorage(ImageRecordStorageBase):
             as_dict = dict(result)
             metadata_raw = cast(Optional[str], as_dict.get("metadata", None))
             return MetadataFieldValidator.validate_json(metadata_raw) if metadata_raw is not None else None
-        except sqlite3.Error as e:
-            raise ImageRecordNotFoundException from e
 
     def update(
         self,
         image_name: str,
         changes: ImageRecordChanges,
     ) -> None:
-        try:
-            cursor = self._conn.cursor()
-            # Change the category of the image
-            if changes.image_category is not None:
-                cursor.execute(
-                    """--sql
-                    UPDATE images
-                    SET image_category = ?
-                    WHERE image_name = ?;
-                    """,
-                    (changes.image_category, image_name),
-                )
+        with self._db.transaction() as cursor:
+            try:
+                # Change the category of the image
+                if changes.image_category is not None:
+                    cursor.execute(
+                        """--sql
+                        UPDATE images
+                        SET image_category = ?
+                        WHERE image_name = ?;
+                        """,
+                        (changes.image_category, image_name),
+                    )
 
-            # Change the session associated with the image
-            if changes.session_id is not None:
-                cursor.execute(
-                    """--sql
-                    UPDATE images
-                    SET session_id = ?
-                    WHERE image_name = ?;
-                    """,
-                    (changes.session_id, image_name),
-                )
+                # Change the session associated with the image
+                if changes.session_id is not None:
+                    cursor.execute(
+                        """--sql
+                        UPDATE images
+                        SET session_id = ?
+                        WHERE image_name = ?;
+                        """,
+                        (changes.session_id, image_name),
+                    )
 
-            # Change the image's `is_intermediate`` flag
-            if changes.is_intermediate is not None:
-                cursor.execute(
-                    """--sql
-                    UPDATE images
-                    SET is_intermediate = ?
-                    WHERE image_name = ?;
-                    """,
-                    (changes.is_intermediate, image_name),
-                )
+                # Change the image's `is_intermediate`` flag
+                if changes.is_intermediate is not None:
+                    cursor.execute(
+                        """--sql
+                        UPDATE images
+                        SET is_intermediate = ?
+                        WHERE image_name = ?;
+                        """,
+                        (changes.is_intermediate, image_name),
+                    )
 
-            # Change the image's `starred`` state
-            if changes.starred is not None:
-                cursor.execute(
-                    """--sql
-                    UPDATE images
-                    SET starred = ?
-                    WHERE image_name = ?;
-                    """,
-                    (changes.starred, image_name),
-                )
+                # Change the image's `starred`` state
+                if changes.starred is not None:
+                    cursor.execute(
+                        """--sql
+                        UPDATE images
+                        SET starred = ?
+                        WHERE image_name = ?;
+                        """,
+                        (changes.starred, image_name),
+                    )
 
-            self._conn.commit()
-        except sqlite3.Error as e:
-            self._conn.rollback()
-            raise ImageRecordSaveException from e
+            except sqlite3.Error as e:
+                raise ImageRecordSaveException from e
 
     def get_many(
         self,
@@ -136,170 +135,162 @@ class SqliteImageRecordStorage(ImageRecordStorageBase):
         board_id: Optional[str] = None,
         search_term: Optional[str] = None,
     ) -> OffsetPaginatedResults[ImageRecord]:
-        cursor = self._conn.cursor()
-
-        # Manually build two queries - one for the count, one for the records
-        count_query = """--sql
-        SELECT COUNT(*)
-        FROM images
-        LEFT JOIN board_images ON board_images.image_name = images.image_name
-        WHERE 1=1
-        """
-
-        images_query = f"""--sql
-        SELECT {IMAGE_DTO_COLS}
-        FROM images
-        LEFT JOIN board_images ON board_images.image_name = images.image_name
-        WHERE 1=1
-        """
-
-        query_conditions = ""
-        query_params: list[Union[int, str, bool]] = []
-
-        if image_origin is not None:
-            query_conditions += """--sql
-            AND images.image_origin = ?
-            """
-            query_params.append(image_origin.value)
-
-        if categories is not None:
-            # Convert the enum values to unique list of strings
-            category_strings = [c.value for c in set(categories)]
-            # Create the correct length of placeholders
-            placeholders = ",".join("?" * len(category_strings))
-
-            query_conditions += f"""--sql
-            AND images.image_category IN ( {placeholders} )
+        with self._db.transaction() as cursor:
+            # Manually build two queries - one for the count, one for the records
+            count_query = """--sql
+            SELECT COUNT(*)
+            FROM images
+            LEFT JOIN board_images ON board_images.image_name = images.image_name
+            WHERE 1=1
             """
 
-            # Unpack the included categories into the query params
-            for c in category_strings:
-                query_params.append(c)
-
-        if is_intermediate is not None:
-            query_conditions += """--sql
-            AND images.is_intermediate = ?
+            images_query = f"""--sql
+            SELECT {IMAGE_DTO_COLS}
+            FROM images
+            LEFT JOIN board_images ON board_images.image_name = images.image_name
+            WHERE 1=1
             """
 
-            query_params.append(is_intermediate)
+            query_conditions = ""
+            query_params: list[Union[int, str, bool]] = []
 
-        # board_id of "none" is reserved for images without a board
-        if board_id == "none":
-            query_conditions += """--sql
-            AND board_images.board_id IS NULL
-            """
-        elif board_id is not None:
-            query_conditions += """--sql
-            AND board_images.board_id = ?
-            """
-            query_params.append(board_id)
+            if image_origin is not None:
+                query_conditions += """--sql
+                AND images.image_origin = ?
+                """
+                query_params.append(image_origin.value)
 
-        # Search term condition
-        if search_term:
-            query_conditions += """--sql
-            AND (
-                images.metadata LIKE ?
-                OR images.created_at LIKE ?
-            )
-            """
-            query_params.append(f"%{search_term.lower()}%")
-            query_params.append(f"%{search_term.lower()}%")
+            if categories is not None:
+                # Convert the enum values to unique list of strings
+                category_strings = [c.value for c in set(categories)]
+                # Create the correct length of placeholders
+                placeholders = ",".join("?" * len(category_strings))
 
-        if starred_first:
-            query_pagination = f"""--sql
-            ORDER BY images.starred DESC, images.created_at {order_dir.value} LIMIT ? OFFSET ?
-            """
-        else:
-            query_pagination = f"""--sql
-            ORDER BY images.created_at {order_dir.value} LIMIT ? OFFSET ?
-            """
+                query_conditions += f"""--sql
+                AND images.image_category IN ( {placeholders} )
+                """
 
-        # Final images query with pagination
-        images_query += query_conditions + query_pagination + ";"
-        # Add all the parameters
-        images_params = query_params.copy()
-        # Add the pagination parameters
-        images_params.extend([limit, offset])
+                # Unpack the included categories into the query params
+                for c in category_strings:
+                    query_params.append(c)
 
-        # Build the list of images, deserializing each row
-        cursor.execute(images_query, images_params)
-        result = cast(list[sqlite3.Row], cursor.fetchall())
-        images = [deserialize_image_record(dict(r)) for r in result]
+            if is_intermediate is not None:
+                query_conditions += """--sql
+                AND images.is_intermediate = ?
+                """
 
-        # Set up and execute the count query, without pagination
-        count_query += query_conditions + ";"
-        count_params = query_params.copy()
-        cursor.execute(count_query, count_params)
-        count = cast(int, cursor.fetchone()[0])
+                query_params.append(is_intermediate)
+
+            # board_id of "none" is reserved for images without a board
+            if board_id == "none":
+                query_conditions += """--sql
+                AND board_images.board_id IS NULL
+                """
+            elif board_id is not None:
+                query_conditions += """--sql
+                AND board_images.board_id = ?
+                """
+                query_params.append(board_id)
+
+            # Search term condition
+            if search_term:
+                query_conditions += """--sql
+                AND (
+                    images.metadata LIKE ?
+                    OR images.created_at LIKE ?
+                )
+                """
+                query_params.append(f"%{search_term.lower()}%")
+                query_params.append(f"%{search_term.lower()}%")
+
+            if starred_first:
+                query_pagination = f"""--sql
+                ORDER BY images.starred DESC, images.created_at {order_dir.value} LIMIT ? OFFSET ?
+                """
+            else:
+                query_pagination = f"""--sql
+                ORDER BY images.created_at {order_dir.value} LIMIT ? OFFSET ?
+                """
+
+            # Final images query with pagination
+            images_query += query_conditions + query_pagination + ";"
+            # Add all the parameters
+            images_params = query_params.copy()
+            # Add the pagination parameters
+            images_params.extend([limit, offset])
+
+            # Build the list of images, deserializing each row
+            cursor.execute(images_query, images_params)
+            result = cast(list[sqlite3.Row], cursor.fetchall())
+
+            images = [deserialize_image_record(dict(r)) for r in result]
+
+            # Set up and execute the count query, without pagination
+            count_query += query_conditions + ";"
+            count_params = query_params.copy()
+            cursor.execute(count_query, count_params)
+            count = cast(int, cursor.fetchone()[0])
 
         return OffsetPaginatedResults(items=images, offset=offset, limit=limit, total=count)
 
     def delete(self, image_name: str) -> None:
-        try:
-            cursor = self._conn.cursor()
-            cursor.execute(
-                """--sql
-                DELETE FROM images
-                WHERE image_name = ?;
-                """,
-                (image_name,),
-            )
-            self._conn.commit()
-        except sqlite3.Error as e:
-            self._conn.rollback()
-            raise ImageRecordDeleteException from e
+        with self._db.transaction() as cursor:
+            try:
+                cursor.execute(
+                    """--sql
+                    DELETE FROM images
+                    WHERE image_name = ?;
+                    """,
+                    (image_name,),
+                )
+            except sqlite3.Error as e:
+                raise ImageRecordDeleteException from e
 
     def delete_many(self, image_names: list[str]) -> None:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
+            try:
+                placeholders = ",".join("?" for _ in image_names)
 
-            placeholders = ",".join("?" for _ in image_names)
+                # Construct the SQLite query with the placeholders
+                query = f"DELETE FROM images WHERE image_name IN ({placeholders})"
 
-            # Construct the SQLite query with the placeholders
-            query = f"DELETE FROM images WHERE image_name IN ({placeholders})"
+                # Execute the query with the list of IDs as parameters
+                cursor.execute(query, image_names)
 
-            # Execute the query with the list of IDs as parameters
-            cursor.execute(query, image_names)
-
-            self._conn.commit()
-        except sqlite3.Error as e:
-            self._conn.rollback()
-            raise ImageRecordDeleteException from e
+            except sqlite3.Error as e:
+                raise ImageRecordDeleteException from e
 
     def get_intermediates_count(self) -> int:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT COUNT(*) FROM images
-            WHERE is_intermediate = TRUE;
-            """
-        )
-        count = cast(int, cursor.fetchone()[0])
-        self._conn.commit()
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT COUNT(*) FROM images
+                WHERE is_intermediate = TRUE;
+                """
+            )
+            count = cast(int, cursor.fetchone()[0])
         return count
 
     def delete_intermediates(self) -> list[str]:
-        try:
-            cursor = self._conn.cursor()
-            cursor.execute(
-                """--sql
-                SELECT image_name FROM images
-                WHERE is_intermediate = TRUE;
-                """
-            )
-            result = cast(list[sqlite3.Row], cursor.fetchall())
-            image_names = [r[0] for r in result]
-            cursor.execute(
-                """--sql
-                DELETE FROM images
-                WHERE is_intermediate = TRUE;
-                """
-            )
-            self._conn.commit()
-            return image_names
-        except sqlite3.Error as e:
-            self._conn.rollback()
-            raise ImageRecordDeleteException from e
+        with self._db.transaction() as cursor:
+            try:
+                cursor.execute(
+                    """--sql
+                    SELECT image_name FROM images
+                    WHERE is_intermediate = TRUE;
+                    """
+                )
+                result = cast(list[sqlite3.Row], cursor.fetchall())
+                image_names = [r[0] for r in result]
+                cursor.execute(
+                    """--sql
+                    DELETE FROM images
+                    WHERE is_intermediate = TRUE;
+                    """
+                )
+            except sqlite3.Error as e:
+                raise ImageRecordDeleteException from e
+        return image_names
 
     def save(
         self,
@@ -315,73 +306,71 @@ class SqliteImageRecordStorage(ImageRecordStorageBase):
         node_id: Optional[str] = None,
         metadata: Optional[str] = None,
     ) -> datetime:
-        try:
-            cursor = self._conn.cursor()
-            cursor.execute(
-                """--sql
-                INSERT OR IGNORE INTO images (
-                    image_name,
-                    image_origin,
-                    image_category,
-                    width,
-                    height,
-                    node_id,
-                    session_id,
-                    metadata,
-                    is_intermediate,
-                    starred,
-                    has_workflow
-                    )
-                VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);
-                """,
-                (
-                    image_name,
-                    image_origin.value,
-                    image_category.value,
-                    width,
-                    height,
-                    node_id,
-                    session_id,
-                    metadata,
-                    is_intermediate,
-                    starred,
-                    has_workflow,
-                ),
-            )
-            self._conn.commit()
+        with self._db.transaction() as cursor:
+            try:
+                cursor.execute(
+                    """--sql
+                    INSERT OR IGNORE INTO images (
+                        image_name,
+                        image_origin,
+                        image_category,
+                        width,
+                        height,
+                        node_id,
+                        session_id,
+                        metadata,
+                        is_intermediate,
+                        starred,
+                        has_workflow
+                        )
+                    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?);
+                    """,
+                    (
+                        image_name,
+                        image_origin.value,
+                        image_category.value,
+                        width,
+                        height,
+                        node_id,
+                        session_id,
+                        metadata,
+                        is_intermediate,
+                        starred,
+                        has_workflow,
+                    ),
+                )
 
-            cursor.execute(
-                """--sql
-                SELECT created_at
-                FROM images
-                WHERE image_name = ?;
-                """,
-                (image_name,),
-            )
+                cursor.execute(
+                    """--sql
+                    SELECT created_at
+                    FROM images
+                    WHERE image_name = ?;
+                    """,
+                    (image_name,),
+                )
 
-            created_at = datetime.fromisoformat(cursor.fetchone()[0])
+                created_at = datetime.fromisoformat(cursor.fetchone()[0])
 
-            return created_at
-        except sqlite3.Error as e:
-            self._conn.rollback()
-            raise ImageRecordSaveException from e
+            except sqlite3.Error as e:
+                raise ImageRecordSaveException from e
+        return created_at
 
     def get_most_recent_image_for_board(self, board_id: str) -> Optional[ImageRecord]:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT images.*
-            FROM images
-            JOIN board_images ON images.image_name = board_images.image_name
-            WHERE board_images.board_id = ?
-            AND images.is_intermediate = FALSE
-            ORDER BY images.starred DESC, images.created_at DESC
-            LIMIT 1;
-            """,
-            (board_id,),
-        )
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT images.*
+                FROM images
+                JOIN board_images ON images.image_name = board_images.image_name
+                WHERE board_images.board_id = ?
+                AND images.is_intermediate = FALSE
+                ORDER BY images.starred DESC, images.created_at DESC
+                LIMIT 1;
+                """,
+                (board_id,),
+            )
 
-        result = cast(Optional[sqlite3.Row], cursor.fetchone())
+            result = cast(Optional[sqlite3.Row], cursor.fetchone())
 
         if result is None:
             return None
@@ -398,85 +387,84 @@ class SqliteImageRecordStorage(ImageRecordStorageBase):
         board_id: Optional[str] = None,
         search_term: Optional[str] = None,
     ) -> ImageNamesResult:
-        cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
+            # Build query conditions (reused for both starred count and image names queries)
+            query_conditions = ""
+            query_params: list[Union[int, str, bool]] = []
 
-        # Build query conditions (reused for both starred count and image names queries)
-        query_conditions = ""
-        query_params: list[Union[int, str, bool]] = []
+            if image_origin is not None:
+                query_conditions += """--sql
+                AND images.image_origin = ?
+                """
+                query_params.append(image_origin.value)
 
-        if image_origin is not None:
-            query_conditions += """--sql
-            AND images.image_origin = ?
-            """
-            query_params.append(image_origin.value)
+            if categories is not None:
+                category_strings = [c.value for c in set(categories)]
+                placeholders = ",".join("?" * len(category_strings))
+                query_conditions += f"""--sql
+                AND images.image_category IN ( {placeholders} )
+                """
+                for c in category_strings:
+                    query_params.append(c)
 
-        if categories is not None:
-            category_strings = [c.value for c in set(categories)]
-            placeholders = ",".join("?" * len(category_strings))
-            query_conditions += f"""--sql
-            AND images.image_category IN ( {placeholders} )
-            """
-            for c in category_strings:
-                query_params.append(c)
+            if is_intermediate is not None:
+                query_conditions += """--sql
+                AND images.is_intermediate = ?
+                """
+                query_params.append(is_intermediate)
 
-        if is_intermediate is not None:
-            query_conditions += """--sql
-            AND images.is_intermediate = ?
-            """
-            query_params.append(is_intermediate)
+            if board_id == "none":
+                query_conditions += """--sql
+                AND board_images.board_id IS NULL
+                """
+            elif board_id is not None:
+                query_conditions += """--sql
+                AND board_images.board_id = ?
+                """
+                query_params.append(board_id)
 
-        if board_id == "none":
-            query_conditions += """--sql
-            AND board_images.board_id IS NULL
-            """
-        elif board_id is not None:
-            query_conditions += """--sql
-            AND board_images.board_id = ?
-            """
-            query_params.append(board_id)
+            if search_term:
+                query_conditions += """--sql
+                AND (
+                    images.metadata LIKE ?
+                    OR images.created_at LIKE ?
+                )
+                """
+                query_params.append(f"%{search_term.lower()}%")
+                query_params.append(f"%{search_term.lower()}%")
 
-        if search_term:
-            query_conditions += """--sql
-            AND (
-                images.metadata LIKE ?
-                OR images.created_at LIKE ?
-            )
-            """
-            query_params.append(f"%{search_term.lower()}%")
-            query_params.append(f"%{search_term.lower()}%")
+            # Get starred count if starred_first is enabled
+            starred_count = 0
+            if starred_first:
+                starred_count_query = f"""--sql
+                SELECT COUNT(*)
+                FROM images
+                LEFT JOIN board_images ON board_images.image_name = images.image_name
+                WHERE images.starred = TRUE AND (1=1{query_conditions})
+                """
+                cursor.execute(starred_count_query, query_params)
+                starred_count = cast(int, cursor.fetchone()[0])
 
-        # Get starred count if starred_first is enabled
-        starred_count = 0
-        if starred_first:
-            starred_count_query = f"""--sql
-            SELECT COUNT(*)
-            FROM images
-            LEFT JOIN board_images ON board_images.image_name = images.image_name
-            WHERE images.starred = TRUE AND (1=1{query_conditions})
-            """
-            cursor.execute(starred_count_query, query_params)
-            starred_count = cast(int, cursor.fetchone()[0])
+            # Get all image names with proper ordering
+            if starred_first:
+                names_query = f"""--sql
+                SELECT images.image_name
+                FROM images
+                LEFT JOIN board_images ON board_images.image_name = images.image_name
+                WHERE 1=1{query_conditions}
+                ORDER BY images.starred DESC, images.created_at {order_dir.value}
+                """
+            else:
+                names_query = f"""--sql
+                SELECT images.image_name
+                FROM images
+                LEFT JOIN board_images ON board_images.image_name = images.image_name
+                WHERE 1=1{query_conditions}
+                ORDER BY images.created_at {order_dir.value}
+                """
 
-        # Get all image names with proper ordering
-        if starred_first:
-            names_query = f"""--sql
-            SELECT images.image_name
-            FROM images
-            LEFT JOIN board_images ON board_images.image_name = images.image_name
-            WHERE 1=1{query_conditions}
-            ORDER BY images.starred DESC, images.created_at {order_dir.value}
-            """
-        else:
-            names_query = f"""--sql
-            SELECT images.image_name
-            FROM images
-            LEFT JOIN board_images ON board_images.image_name = images.image_name
-            WHERE 1=1{query_conditions}
-            ORDER BY images.created_at {order_dir.value}
-            """
-
-        cursor.execute(names_query, query_params)
-        result = cast(list[sqlite3.Row], cursor.fetchall())
+            cursor.execute(names_query, query_params)
+            result = cast(list[sqlite3.Row], cursor.fetchall())
         image_names = [row[0] for row in result]
 
         return ImageNamesResult(image_names=image_names, starred_count=starred_count, total_count=len(image_names))

invokeai/app/services/model_install/model_install_default.py

@@ -51,6 +51,7 @@ from invokeai.backend.model_manager.metadata import (
 from invokeai.backend.model_manager.metadata.metadata_base import HuggingFaceMetadata
 from invokeai.backend.model_manager.search import ModelSearch
 from invokeai.backend.model_manager.taxonomy import ModelRepoVariant, ModelSourceType
+from invokeai.backend.model_manager.util.lora_metadata_extractor import apply_lora_metadata
 from invokeai.backend.util import InvokeAILogger
 from invokeai.backend.util.catch_sigint import catch_sigint
 from invokeai.backend.util.devices import TorchDevice
@@ -667,6 +668,10 @@ class ModelInstallService(ModelInstallServiceBase):
 
         info = info or self._probe(model_path, config)
 
+        # Apply LoRA metadata if applicable
+        model_images_path = self.app_config.models_path / "model_images"
+        apply_lora_metadata(info, model_path.resolve(), model_images_path)
+
         model_path = model_path.resolve()
 
         # Models in the Invoke-managed models dir should use relative paths.

invokeai/app/services/model_records/model_records_sql.py

@@ -78,11 +78,6 @@ class ModelRecordServiceSQL(ModelRecordServiceBase):
         self._db = db
         self._logger = logger
 
-    @property
-    def db(self) -> SqliteDatabase:
-        """Return the underlying database."""
-        return self._db
-
     def add_model(self, config: AnyModelConfig) -> AnyModelConfig:
         """
         Add a model to the database.
@@ -93,38 +88,33 @@ class ModelRecordServiceSQL(ModelRecordServiceBase):
 
         Can raise DuplicateModelException and InvalidModelConfigException exceptions.
         """
-        try:
-            cursor = self._db.conn.cursor()
-            cursor.execute(
-                """--sql
-                INSERT INTO models (
-                    id,
-                    config
-                    )
-                VALUES (?,?);
-                """,
-                (
-                    config.key,
-                    config.model_dump_json(),
-                ),
-            )
-            self._db.conn.commit()
+        with self._db.transaction() as cursor:
+            try:
+                cursor.execute(
+                    """--sql
+                    INSERT INTO models (
+                        id,
+                        config
+                        )
+                    VALUES (?,?);
+                    """,
+                    (
+                        config.key,
+                        config.model_dump_json(),
+                    ),
+                )
 
-        except sqlite3.IntegrityError as e:
-            self._db.conn.rollback()
-            if "UNIQUE constraint failed" in str(e):
-                if "models.path" in str(e):
-                    msg = f"A model with path '{config.path}' is already installed"
-                elif "models.name" in str(e):
-                    msg = f"A model with name='{config.name}', type='{config.type}', base='{config.base}' is already installed"
+            except sqlite3.IntegrityError as e:
+                if "UNIQUE constraint failed" in str(e):
+                    if "models.path" in str(e):
+                        msg = f"A model with path '{config.path}' is already installed"
+                    elif "models.name" in str(e):
+                        msg = f"A model with name='{config.name}', type='{config.type}', base='{config.base}' is already installed"
+                    else:
+                        msg = f"A model with key '{config.key}' is already installed"
+                    raise DuplicateModelException(msg) from e
                 else:
-                    msg = f"A model with key '{config.key}' is already installed"
-                raise DuplicateModelException(msg) from e
-            else:
-                raise e
-        except sqlite3.Error as e:
-            self._db.conn.rollback()
-            raise e
+                    raise e
 
         return self.get_model(config.key)
 
@@ -136,8 +126,7 @@ class ModelRecordServiceSQL(ModelRecordServiceBase):
 
         Can raise an UnknownModelException
         """
-        try:
-            cursor = self._db.conn.cursor()
+        with self._db.transaction() as cursor:
             cursor.execute(
                 """--sql
                 DELETE FROM models
@@ -147,22 +136,17 @@ class ModelRecordServiceSQL(ModelRecordServiceBase):
             )
             if cursor.rowcount == 0:
                 raise UnknownModelException("model not found")
-            self._db.conn.commit()
-        except sqlite3.Error as e:
-            self._db.conn.rollback()
-            raise e
 
     def update_model(self, key: str, changes: ModelRecordChanges) -> AnyModelConfig:
-        record = self.get_model(key)
+        with self._db.transaction() as cursor:
+            record = self.get_model(key)
 
-        # Model configs use pydantic's `validate_assignment`, so each change is validated by pydantic.
-        for field_name in changes.model_fields_set:
-            setattr(record, field_name, getattr(changes, field_name))
+            # Model configs use pydantic's `validate_assignment`, so each change is validated by pydantic.
+            for field_name in changes.model_fields_set:
+                setattr(record, field_name, getattr(changes, field_name))
 
-        json_serialized = record.model_dump_json()
+            json_serialized = record.model_dump_json()
 
-        try:
-            cursor = self._db.conn.cursor()
             cursor.execute(
                 """--sql
                 UPDATE models
@@ -174,10 +158,6 @@ class ModelRecordServiceSQL(ModelRecordServiceBase):
             )
             if cursor.rowcount == 0:
                 raise UnknownModelException("model not found")
-            self._db.conn.commit()
-        except sqlite3.Error as e:
-            self._db.conn.rollback()
-            raise e
 
         return self.get_model(key)
 
@@ -189,30 +169,30 @@ class ModelRecordServiceSQL(ModelRecordServiceBase):
 
         Exceptions: UnknownModelException
         """
-        cursor = self._db.conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT config, strftime('%s',updated_at) FROM models
-            WHERE id=?;
-            """,
-            (key,),
-        )
-        rows = cursor.fetchone()
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT config, strftime('%s',updated_at) FROM models
+                WHERE id=?;
+                """,
+                (key,),
+            )
+            rows = cursor.fetchone()
         if not rows:
             raise UnknownModelException("model not found")
         model = ModelConfigFactory.make_config(json.loads(rows[0]), timestamp=rows[1])
         return model
 
     def get_model_by_hash(self, hash: str) -> AnyModelConfig:
-        cursor = self._db.conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT config, strftime('%s',updated_at) FROM models
-            WHERE hash=?;
-            """,
-            (hash,),
-        )
-        rows = cursor.fetchone()
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT config, strftime('%s',updated_at) FROM models
+                WHERE hash=?;
+                """,
+                (hash,),
+            )
+            rows = cursor.fetchone()
         if not rows:
             raise UnknownModelException("model not found")
         model = ModelConfigFactory.make_config(json.loads(rows[0]), timestamp=rows[1])
@@ -224,15 +204,15 @@ class ModelRecordServiceSQL(ModelRecordServiceBase):
 
         :param key: Unique key for the model to be deleted
         """
-        cursor = self._db.conn.cursor()
-        cursor.execute(
-            """--sql
-            select count(*) FROM models
-            WHERE id=?;
-            """,
-            (key,),
-        )
-        count = cursor.fetchone()[0]
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                select count(*) FROM models
+                WHERE id=?;
+                """,
+                (key,),
+            )
+            count = cursor.fetchone()[0]
         return count > 0
 
     def search_by_attr(
@@ -255,43 +235,42 @@ class ModelRecordServiceSQL(ModelRecordServiceBase):
         If none of the optional filters are passed, will return all
         models in the database.
         """
+        with self._db.transaction() as cursor:
+            assert isinstance(order_by, ModelRecordOrderBy)
+            ordering = {
+                ModelRecordOrderBy.Default: "type, base, name, format",
+                ModelRecordOrderBy.Type: "type",
+                ModelRecordOrderBy.Base: "base",
+                ModelRecordOrderBy.Name: "name",
+                ModelRecordOrderBy.Format: "format",
+            }
 
-        assert isinstance(order_by, ModelRecordOrderBy)
-        ordering = {
-            ModelRecordOrderBy.Default: "type, base, name, format",
-            ModelRecordOrderBy.Type: "type",
-            ModelRecordOrderBy.Base: "base",
-            ModelRecordOrderBy.Name: "name",
-            ModelRecordOrderBy.Format: "format",
-        }
+            where_clause: list[str] = []
+            bindings: list[str] = []
+            if model_name:
+                where_clause.append("name=?")
+                bindings.append(model_name)
+            if base_model:
+                where_clause.append("base=?")
+                bindings.append(base_model)
+            if model_type:
+                where_clause.append("type=?")
+                bindings.append(model_type)
+            if model_format:
+                where_clause.append("format=?")
+                bindings.append(model_format)
+            where = f"WHERE {' AND '.join(where_clause)}" if where_clause else ""
 
-        where_clause: list[str] = []
-        bindings: list[str] = []
-        if model_name:
-            where_clause.append("name=?")
-            bindings.append(model_name)
-        if base_model:
-            where_clause.append("base=?")
-            bindings.append(base_model)
-        if model_type:
-            where_clause.append("type=?")
-            bindings.append(model_type)
-        if model_format:
-            where_clause.append("format=?")
-            bindings.append(model_format)
-        where = f"WHERE {' AND '.join(where_clause)}" if where_clause else ""
-
-        cursor = self._db.conn.cursor()
-        cursor.execute(
-            f"""--sql
-            SELECT config, strftime('%s',updated_at)
-            FROM models
-            {where}
-            ORDER BY {ordering[order_by]} -- using ? to bind doesn't work here for some reason;
-            """,
-            tuple(bindings),
-        )
-        result = cursor.fetchall()
+            cursor.execute(
+                f"""--sql
+                SELECT config, strftime('%s',updated_at)
+                FROM models
+                {where}
+                ORDER BY {ordering[order_by]} -- using ? to bind doesn't work here for some reason;
+                """,
+                tuple(bindings),
+            )
+            result = cursor.fetchall()
 
         # Parse the model configs.
         results: list[AnyModelConfig] = []
@@ -313,69 +292,68 @@ class ModelRecordServiceSQL(ModelRecordServiceBase):
 
     def search_by_path(self, path: Union[str, Path]) -> List[AnyModelConfig]:
         """Return models with the indicated path."""
-        cursor = self._db.conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT config, strftime('%s',updated_at) FROM models
-            WHERE path=?;
-            """,
-            (str(path),),
-        )
-        results = [ModelConfigFactory.make_config(json.loads(x[0]), timestamp=x[1]) for x in cursor.fetchall()]
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT config, strftime('%s',updated_at) FROM models
+                WHERE path=?;
+                """,
+                (str(path),),
+            )
+            results = [ModelConfigFactory.make_config(json.loads(x[0]), timestamp=x[1]) for x in cursor.fetchall()]
         return results
 
     def search_by_hash(self, hash: str) -> List[AnyModelConfig]:
         """Return models with the indicated hash."""
-        cursor = self._db.conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT config, strftime('%s',updated_at) FROM models
-            WHERE hash=?;
-            """,
-            (hash,),
-        )
-        results = [ModelConfigFactory.make_config(json.loads(x[0]), timestamp=x[1]) for x in cursor.fetchall()]
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT config, strftime('%s',updated_at) FROM models
+                WHERE hash=?;
+                """,
+                (hash,),
+            )
+            results = [ModelConfigFactory.make_config(json.loads(x[0]), timestamp=x[1]) for x in cursor.fetchall()]
         return results
 
     def list_models(
         self, page: int = 0, per_page: int = 10, order_by: ModelRecordOrderBy = ModelRecordOrderBy.Default
     ) -> PaginatedResults[ModelSummary]:
         """Return a paginated summary listing of each model in the database."""
-        assert isinstance(order_by, ModelRecordOrderBy)
-        ordering = {
-            ModelRecordOrderBy.Default: "type, base, name, format",
-            ModelRecordOrderBy.Type: "type",
-            ModelRecordOrderBy.Base: "base",
-            ModelRecordOrderBy.Name: "name",
-            ModelRecordOrderBy.Format: "format",
-        }
+        with self._db.transaction() as cursor:
+            assert isinstance(order_by, ModelRecordOrderBy)
+            ordering = {
+                ModelRecordOrderBy.Default: "type, base, name, format",
+                ModelRecordOrderBy.Type: "type",
+                ModelRecordOrderBy.Base: "base",
+                ModelRecordOrderBy.Name: "name",
+                ModelRecordOrderBy.Format: "format",
+            }
 
-        cursor = self._db.conn.cursor()
+            # Lock so that the database isn't updated while we're doing the two queries.
+            # query1: get the total number of model configs
+            cursor.execute(
+                """--sql
+                select count(*) from models;
+                """,
+                (),
+            )
+            total = int(cursor.fetchone()[0])
 
-        # Lock so that the database isn't updated while we're doing the two queries.
-        # query1: get the total number of model configs
-        cursor.execute(
-            """--sql
-            select count(*) from models;
-            """,
-            (),
-        )
-        total = int(cursor.fetchone()[0])
-
-        # query2: fetch key fields
-        cursor.execute(
-            f"""--sql
-            SELECT config
-            FROM models
-            ORDER BY {ordering[order_by]} -- using ? to bind doesn't work here for some reason
-            LIMIT ?
-            OFFSET ?;
-            """,
-            (
-                per_page,
-                page * per_page,
-            ),
-        )
-        rows = cursor.fetchall()
+            # query2: fetch key fields
+            cursor.execute(
+                f"""--sql
+                SELECT config
+                FROM models
+                ORDER BY {ordering[order_by]} -- using ? to bind doesn't work here for some reason
+                LIMIT ?
+                OFFSET ?;
+                """,
+                (
+                    per_page,
+                    page * per_page,
+                ),
+            )
+            rows = cursor.fetchall()
         items = [ModelSummary.model_validate(dict(x)) for x in rows]
         return PaginatedResults(page=page, pages=ceil(total / per_page), per_page=per_page, total=total, items=items)

invokeai/app/services/model_relationship_records/model_relationship_records_sqlite.py

@@ -1,5 +1,3 @@
-import sqlite3
-
 from invokeai.app.services.model_relationship_records.model_relationship_records_base import (
     ModelRelationshipRecordStorageBase,
 )
@@ -9,58 +7,49 @@ from invokeai.app.services.shared.sqlite.sqlite_database import SqliteDatabase
 class SqliteModelRelationshipRecordStorage(ModelRelationshipRecordStorageBase):
     def __init__(self, db: SqliteDatabase) -> None:
         super().__init__()
-        self._conn = db.conn
+        self._db = db
 
     def add_model_relationship(self, model_key_1: str, model_key_2: str) -> None:
-        if model_key_1 == model_key_2:
-            raise ValueError("Cannot relate a model to itself.")
-        a, b = sorted([model_key_1, model_key_2])
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
+            if model_key_1 == model_key_2:
+                raise ValueError("Cannot relate a model to itself.")
+            a, b = sorted([model_key_1, model_key_2])
             cursor.execute(
                 "INSERT OR IGNORE INTO model_relationships (model_key_1, model_key_2) VALUES (?, ?)",
                 (a, b),
             )
-            self._conn.commit()
-        except sqlite3.Error as e:
-            self._conn.rollback()
-            raise e
 
     def remove_model_relationship(self, model_key_1: str, model_key_2: str) -> None:
-        a, b = sorted([model_key_1, model_key_2])
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
+            a, b = sorted([model_key_1, model_key_2])
             cursor.execute(
                 "DELETE FROM model_relationships WHERE model_key_1 = ? AND model_key_2 = ?",
                 (a, b),
             )
-            self._conn.commit()
-        except sqlite3.Error as e:
-            self._conn.rollback()
-            raise e
 
     def get_related_model_keys(self, model_key: str) -> list[str]:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """
-            SELECT model_key_2 FROM model_relationships WHERE model_key_1 = ?
-            UNION
-            SELECT model_key_1 FROM model_relationships WHERE model_key_2 = ?
-            """,
-            (model_key, model_key),
-        )
-        return [row[0] for row in cursor.fetchall()]
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """
+                SELECT model_key_2 FROM model_relationships WHERE model_key_1 = ?
+                UNION
+                SELECT model_key_1 FROM model_relationships WHERE model_key_2 = ?
+                """,
+                (model_key, model_key),
+            )
+            result = [row[0] for row in cursor.fetchall()]
+        return result
 
     def get_related_model_keys_batch(self, model_keys: list[str]) -> list[str]:
-        cursor = self._conn.cursor()
-
-        key_list = ",".join("?" for _ in model_keys)
-        cursor.execute(
-            f"""
-            SELECT model_key_2 FROM model_relationships WHERE model_key_1 IN ({key_list})
-            UNION
-            SELECT model_key_1 FROM model_relationships WHERE model_key_2 IN ({key_list})
-            """,
-            model_keys + model_keys,
-        )
-        return [row[0] for row in cursor.fetchall()]
+        with self._db.transaction() as cursor:
+            key_list = ",".join("?" for _ in model_keys)
+            cursor.execute(
+                f"""
+                SELECT model_key_2 FROM model_relationships WHERE model_key_1 IN ({key_list})
+                UNION
+                SELECT model_key_1 FROM model_relationships WHERE model_key_2 IN ({key_list})
+                """,
+                model_keys + model_keys,
+            )
+            result = [row[0] for row in cursor.fetchall()]
+        return result

invokeai/app/services/session_queue/session_queue_sqlite.py

@@ -50,15 +50,14 @@ class SqliteSessionQueue(SessionQueueBase):
 
     def __init__(self, db: SqliteDatabase) -> None:
         super().__init__()
-        self._conn = db.conn
+        self._db = db
 
     def _set_in_progress_to_canceled(self) -> None:
         """
         Sets all in_progress queue items to canceled. Run on app startup, not associated with any queue.
         This is necessary because the invoker may have been killed while processing a queue item.
         """
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             cursor.execute(
                 """--sql
                 UPDATE session_queue
@@ -66,87 +65,79 @@ class SqliteSessionQueue(SessionQueueBase):
                 WHERE status = 'in_progress';
                 """
             )
-        except Exception:
-            self._conn.rollback()
-            raise
 
     def _get_current_queue_size(self, queue_id: str) -> int:
         """Gets the current number of pending queue items"""
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT count(*)
-            FROM session_queue
-            WHERE
-              queue_id = ?
-              AND status = 'pending'
-            """,
-            (queue_id,),
-        )
-        return cast(int, cursor.fetchone()[0])
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT count(*)
+                FROM session_queue
+                WHERE
+                queue_id = ?
+                AND status = 'pending'
+                """,
+                (queue_id,),
+            )
+            count = cast(int, cursor.fetchone()[0])
+        return count
 
     def _get_highest_priority(self, queue_id: str) -> int:
         """Gets the highest priority value in the queue"""
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT MAX(priority)
-            FROM session_queue
-            WHERE
-              queue_id = ?
-              AND status = 'pending'
-            """,
-            (queue_id,),
-        )
-        return cast(Union[int, None], cursor.fetchone()[0]) or 0
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT MAX(priority)
+                FROM session_queue
+                WHERE
+                queue_id = ?
+                AND status = 'pending'
+                """,
+                (queue_id,),
+            )
+            priority = cast(Union[int, None], cursor.fetchone()[0]) or 0
+        return priority
 
     async def enqueue_batch(self, queue_id: str, batch: Batch, prepend: bool) -> EnqueueBatchResult:
-        try:
-            # TODO: how does this work in a multi-user scenario?
-            current_queue_size = self._get_current_queue_size(queue_id)
-            max_queue_size = self.__invoker.services.configuration.max_queue_size
-            max_new_queue_items = max_queue_size - current_queue_size
+        current_queue_size = self._get_current_queue_size(queue_id)
+        max_queue_size = self.__invoker.services.configuration.max_queue_size
+        max_new_queue_items = max_queue_size - current_queue_size
 
-            priority = 0
-            if prepend:
-                priority = self._get_highest_priority(queue_id) + 1
+        priority = 0
+        if prepend:
+            priority = self._get_highest_priority(queue_id) + 1
 
-            requested_count = await asyncio.to_thread(
-                calc_session_count,
-                batch=batch,
-            )
-            values_to_insert = await asyncio.to_thread(
-                prepare_values_to_insert,
-                queue_id=queue_id,
-                batch=batch,
-                priority=priority,
-                max_new_queue_items=max_new_queue_items,
-            )
-            enqueued_count = len(values_to_insert)
+        requested_count = await asyncio.to_thread(
+            calc_session_count,
+            batch=batch,
+        )
+        values_to_insert = await asyncio.to_thread(
+            prepare_values_to_insert,
+            queue_id=queue_id,
+            batch=batch,
+            priority=priority,
+            max_new_queue_items=max_new_queue_items,
+        )
+        enqueued_count = len(values_to_insert)
 
-            with self._conn:
-                cursor = self._conn.cursor()
-                cursor.executemany(
-                    """--sql
+        with self._db.transaction() as cursor:
+            cursor.executemany(
+                """--sql
                     INSERT INTO session_queue (queue_id, session, session_id, batch_id, field_values, priority, workflow, origin, destination, retried_from_item_id)
                     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
                     """,
-                    values_to_insert,
-                )
-            with self._conn:
-                cursor = self._conn.cursor()
-                cursor.execute(
-                    """--sql
+                values_to_insert,
+            )
+            cursor.execute(
+                """--sql
                     SELECT item_id
                     FROM session_queue
                     WHERE batch_id = ?
                     ORDER BY item_id DESC;
                     """,
-                    (batch.batch_id,),
-                )
-                item_ids = [row[0] for row in cursor.fetchall()]
-        except Exception:
-            raise
+                (batch.batch_id,),
+            )
+            item_ids = [row[0] for row in cursor.fetchall()]
         enqueue_result = EnqueueBatchResult(
             queue_id=queue_id,
             requested=requested_count,
@@ -159,19 +150,19 @@ class SqliteSessionQueue(SessionQueueBase):
         return enqueue_result
 
     def dequeue(self) -> Optional[SessionQueueItem]:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT *
-            FROM session_queue
-            WHERE status = 'pending'
-            ORDER BY
-                priority DESC,
-                item_id ASC
-            LIMIT 1
-            """
-        )
-        result = cast(Union[sqlite3.Row, None], cursor.fetchone())
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT *
+                FROM session_queue
+                WHERE status = 'pending'
+                ORDER BY
+                    priority DESC,
+                    item_id ASC
+                LIMIT 1
+                """
+            )
+            result = cast(Union[sqlite3.Row, None], cursor.fetchone())
         if result is None:
             return None
         queue_item = SessionQueueItem.queue_item_from_dict(dict(result))
@@ -179,40 +170,40 @@ class SqliteSessionQueue(SessionQueueBase):
         return queue_item
 
     def get_next(self, queue_id: str) -> Optional[SessionQueueItem]:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT *
-            FROM session_queue
-            WHERE
-                queue_id = ?
-                AND status = 'pending'
-            ORDER BY
-                priority DESC,
-                created_at ASC
-            LIMIT 1
-            """,
-            (queue_id,),
-        )
-        result = cast(Union[sqlite3.Row, None], cursor.fetchone())
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT *
+                FROM session_queue
+                WHERE
+                    queue_id = ?
+                    AND status = 'pending'
+                ORDER BY
+                    priority DESC,
+                    created_at ASC
+                LIMIT 1
+                """,
+                (queue_id,),
+            )
+            result = cast(Union[sqlite3.Row, None], cursor.fetchone())
         if result is None:
             return None
         return SessionQueueItem.queue_item_from_dict(dict(result))
 
     def get_current(self, queue_id: str) -> Optional[SessionQueueItem]:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT *
-            FROM session_queue
-            WHERE
-                queue_id = ?
-                AND status = 'in_progress'
-            LIMIT 1
-            """,
-            (queue_id,),
-        )
-        result = cast(Union[sqlite3.Row, None], cursor.fetchone())
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT *
+                FROM session_queue
+                WHERE
+                    queue_id = ?
+                    AND status = 'in_progress'
+                LIMIT 1
+                """,
+                (queue_id,),
+            )
+            result = cast(Union[sqlite3.Row, None], cursor.fetchone())
         if result is None:
             return None
         return SessionQueueItem.queue_item_from_dict(dict(result))
@@ -225,8 +216,7 @@ class SqliteSessionQueue(SessionQueueBase):
         error_message: Optional[str] = None,
         error_traceback: Optional[str] = None,
     ) -> SessionQueueItem:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             cursor.execute(
                 """--sql
                 SELECT status FROM session_queue WHERE item_id = ?
@@ -234,12 +224,15 @@ class SqliteSessionQueue(SessionQueueBase):
                 (item_id,),
             )
             row = cursor.fetchone()
-            if row is None:
-                raise SessionQueueItemNotFoundError(f"No queue item with id {item_id}")
-            current_status = row[0]
-            # Only update if not already finished (completed, failed or canceled)
-            if current_status in ("completed", "failed", "canceled"):
-                return self.get_queue_item(item_id)
+        if row is None:
+            raise SessionQueueItemNotFoundError(f"No queue item with id {item_id}")
+        current_status = row[0]
+
+        # Only update if not already finished (completed, failed or canceled)
+        if current_status in ("completed", "failed", "canceled"):
+            return self.get_queue_item(item_id)
+
+        with self._db.transaction() as cursor:
             cursor.execute(
                 """--sql
                 UPDATE session_queue
@@ -248,10 +241,7 @@ class SqliteSessionQueue(SessionQueueBase):
                 """,
                 (status, error_type, error_message, error_traceback, item_id),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
+
         queue_item = self.get_queue_item(item_id)
         batch_status = self.get_batch_status(queue_id=queue_item.queue_id, batch_id=queue_item.batch_id)
         queue_status = self.get_queue_status(queue_id=queue_item.queue_id)
@@ -259,35 +249,34 @@ class SqliteSessionQueue(SessionQueueBase):
         return queue_item
 
     def is_empty(self, queue_id: str) -> IsEmptyResult:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT count(*)
-            FROM session_queue
-            WHERE queue_id = ?
-            """,
-            (queue_id,),
-        )
-        is_empty = cast(int, cursor.fetchone()[0]) == 0
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT count(*)
+                FROM session_queue
+                WHERE queue_id = ?
+                """,
+                (queue_id,),
+            )
+            is_empty = cast(int, cursor.fetchone()[0]) == 0
         return IsEmptyResult(is_empty=is_empty)
 
     def is_full(self, queue_id: str) -> IsFullResult:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT count(*)
-            FROM session_queue
-            WHERE queue_id = ?
-            """,
-            (queue_id,),
-        )
-        max_queue_size = self.__invoker.services.configuration.max_queue_size
-        is_full = cast(int, cursor.fetchone()[0]) >= max_queue_size
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT count(*)
+                FROM session_queue
+                WHERE queue_id = ?
+                """,
+                (queue_id,),
+            )
+            max_queue_size = self.__invoker.services.configuration.max_queue_size
+            is_full = cast(int, cursor.fetchone()[0]) >= max_queue_size
         return IsFullResult(is_full=is_full)
 
     def clear(self, queue_id: str) -> ClearResult:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             cursor.execute(
                 """--sql
                 SELECT COUNT(*)
@@ -305,24 +294,19 @@ class SqliteSessionQueue(SessionQueueBase):
                 """,
                 (queue_id,),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         self.__invoker.services.events.emit_queue_cleared(queue_id)
         return ClearResult(deleted=count)
 
     def prune(self, queue_id: str) -> PruneResult:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             where = """--sql
                 WHERE
-                  queue_id = ?
-                  AND (
+                queue_id = ?
+                AND (
                     status = 'completed'
                     OR status = 'failed'
                     OR status = 'canceled'
-                  )
+                )
                 """
             cursor.execute(
                 f"""--sql
@@ -341,10 +325,6 @@ class SqliteSessionQueue(SessionQueueBase):
                 """,
                 (queue_id,),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         return PruneResult(deleted=count)
 
     def cancel_queue_item(self, item_id: int) -> SessionQueueItem:
@@ -357,8 +337,7 @@ class SqliteSessionQueue(SessionQueueBase):
             self.cancel_queue_item(item_id)
         except SessionQueueItemNotFoundError:
             pass
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             cursor.execute(
                 """--sql
                 DELETE
@@ -367,10 +346,6 @@ class SqliteSessionQueue(SessionQueueBase):
                 """,
                 (item_id,),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
 
     def complete_queue_item(self, item_id: int) -> SessionQueueItem:
         queue_item = self._set_queue_item_status(item_id=item_id, status="completed")
@@ -393,8 +368,7 @@ class SqliteSessionQueue(SessionQueueBase):
         return queue_item
 
     def cancel_by_batch_ids(self, queue_id: str, batch_ids: list[str]) -> CancelByBatchIDsResult:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             current_queue_item = self.get_current(queue_id)
             placeholders = ", ".join(["?" for _ in batch_ids])
             where = f"""--sql
@@ -425,17 +399,14 @@ class SqliteSessionQueue(SessionQueueBase):
                 """,
                 tuple(params),
             )
-            self._conn.commit()
-            if current_queue_item is not None and current_queue_item.batch_id in batch_ids:
-                self._set_queue_item_status(current_queue_item.item_id, "canceled")
-        except Exception:
-            self._conn.rollback()
-            raise
+
+        if current_queue_item is not None and current_queue_item.batch_id in batch_ids:
+            self._set_queue_item_status(current_queue_item.item_id, "canceled")
+
         return CancelByBatchIDsResult(canceled=count)
 
     def cancel_by_destination(self, queue_id: str, destination: str) -> CancelByDestinationResult:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             current_queue_item = self.get_current(queue_id)
             where = """--sql
                 WHERE
@@ -465,17 +436,12 @@ class SqliteSessionQueue(SessionQueueBase):
                 """,
                 params,
             )
-            self._conn.commit()
-            if current_queue_item is not None and current_queue_item.destination == destination:
-                self._set_queue_item_status(current_queue_item.item_id, "canceled")
-        except Exception:
-            self._conn.rollback()
-            raise
+        if current_queue_item is not None and current_queue_item.destination == destination:
+            self._set_queue_item_status(current_queue_item.item_id, "canceled")
         return CancelByDestinationResult(canceled=count)
 
     def delete_by_destination(self, queue_id: str, destination: str) -> DeleteByDestinationResult:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             current_queue_item = self.get_current(queue_id)
             if current_queue_item is not None and current_queue_item.destination == destination:
                 self.cancel_queue_item(current_queue_item.item_id)
@@ -501,15 +467,10 @@ class SqliteSessionQueue(SessionQueueBase):
                 """,
                 params,
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         return DeleteByDestinationResult(deleted=count)
 
     def delete_all_except_current(self, queue_id: str) -> DeleteAllExceptCurrentResult:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             where = """--sql
                 WHERE
                   queue_id == ?
@@ -532,15 +493,10 @@ class SqliteSessionQueue(SessionQueueBase):
                 """,
                 (queue_id,),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         return DeleteAllExceptCurrentResult(deleted=count)
 
     def cancel_by_queue_id(self, queue_id: str) -> CancelByQueueIDResult:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             current_queue_item = self.get_current(queue_id)
             where = """--sql
                 WHERE
@@ -569,18 +525,13 @@ class SqliteSessionQueue(SessionQueueBase):
                 """,
                 tuple(params),
             )
-            self._conn.commit()
 
-            if current_queue_item is not None and current_queue_item.queue_id == queue_id:
-                self._set_queue_item_status(current_queue_item.item_id, "canceled")
-        except Exception:
-            self._conn.rollback()
-            raise
+        if current_queue_item is not None and current_queue_item.queue_id == queue_id:
+            self._set_queue_item_status(current_queue_item.item_id, "canceled")
         return CancelByQueueIDResult(canceled=count)
 
     def cancel_all_except_current(self, queue_id: str) -> CancelAllExceptCurrentResult:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             where = """--sql
                 WHERE
                   queue_id == ?
@@ -603,30 +554,25 @@ class SqliteSessionQueue(SessionQueueBase):
                 """,
                 (queue_id,),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         return CancelAllExceptCurrentResult(canceled=count)
 
     def get_queue_item(self, item_id: int) -> SessionQueueItem:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT * FROM session_queue
-            WHERE
-                item_id = ?
-            """,
-            (item_id,),
-        )
-        result = cast(Union[sqlite3.Row, None], cursor.fetchone())
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT * FROM session_queue
+                WHERE
+                    item_id = ?
+                """,
+                (item_id,),
+            )
+            result = cast(Union[sqlite3.Row, None], cursor.fetchone())
         if result is None:
             raise SessionQueueItemNotFoundError(f"No queue item with id {item_id}")
         return SessionQueueItem.queue_item_from_dict(dict(result))
 
     def set_queue_item_session(self, item_id: int, session: GraphExecutionState) -> SessionQueueItem:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             # Use exclude_none so we don't end up with a bunch of nulls in the graph - this can cause validation errors
             # when the graph is loaded. Graph execution occurs purely in memory - the session saved here is not referenced
             # during execution.
@@ -639,10 +585,6 @@ class SqliteSessionQueue(SessionQueueBase):
                 """,
                 (session_json, item_id),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         return self.get_queue_item(item_id)
 
     def list_queue_items(
@@ -654,42 +596,42 @@ class SqliteSessionQueue(SessionQueueBase):
         status: Optional[QUEUE_ITEM_STATUS] = None,
         destination: Optional[str] = None,
     ) -> CursorPaginatedResults[SessionQueueItem]:
-        cursor_ = self._conn.cursor()
-        item_id = cursor
-        query = """--sql
-            SELECT *
-            FROM session_queue
-            WHERE queue_id = ?
-        """
-        params: list[Union[str, int]] = [queue_id]
-
-        if status is not None:
-            query += """--sql
-                AND status = ?
-                """
-            params.append(status)
-
-        if destination is not None:
-            query += """---sql
-                AND destination = ?
+        with self._db.transaction() as cursor_:
+            item_id = cursor
+            query = """--sql
+                SELECT *
+                FROM session_queue
+                WHERE queue_id = ?
             """
-            params.append(destination)
+            params: list[Union[str, int]] = [queue_id]
 
-        if item_id is not None:
-            query += """--sql
-                AND (priority < ?) OR (priority = ? AND item_id > ?)
+            if status is not None:
+                query += """--sql
+                    AND status = ?
+                    """
+                params.append(status)
+
+            if destination is not None:
+                query += """---sql
+                    AND destination = ?
                 """
-            params.extend([priority, priority, item_id])
+                params.append(destination)
 
-        query += """--sql
-            ORDER BY
-                priority DESC,
-                item_id ASC
-            LIMIT ?
-            """
-        params.append(limit + 1)
-        cursor_.execute(query, params)
-        results = cast(list[sqlite3.Row], cursor_.fetchall())
+            if item_id is not None:
+                query += """--sql
+                    AND (priority < ?) OR (priority = ? AND item_id > ?)
+                    """
+                params.extend([priority, priority, item_id])
+
+            query += """--sql
+                ORDER BY
+                    priority DESC,
+                    item_id ASC
+                LIMIT ?
+                """
+            params.append(limit + 1)
+            cursor_.execute(query, params)
+            results = cast(list[sqlite3.Row], cursor_.fetchall())
         items = [SessionQueueItem.queue_item_from_dict(dict(result)) for result in results]
         has_more = False
         if len(items) > limit:
@@ -704,43 +646,43 @@ class SqliteSessionQueue(SessionQueueBase):
         destination: Optional[str] = None,
     ) -> list[SessionQueueItem]:
         """Gets all queue items that match the given parameters"""
-        cursor_ = self._conn.cursor()
-        query = """--sql
-            SELECT *
-            FROM session_queue
-            WHERE queue_id = ?
-        """
-        params: list[Union[str, int]] = [queue_id]
-
-        if destination is not None:
-            query += """---sql
-                AND destination = ?
+        with self._db.transaction() as cursor:
+            query = """--sql
+                SELECT *
+                FROM session_queue
+                WHERE queue_id = ?
             """
-            params.append(destination)
+            params: list[Union[str, int]] = [queue_id]
 
-        query += """--sql
-            ORDER BY
-                priority DESC,
-                item_id ASC
-            ;
-            """
-        cursor_.execute(query, params)
-        results = cast(list[sqlite3.Row], cursor_.fetchall())
+            if destination is not None:
+                query += """---sql
+                    AND destination = ?
+                """
+                params.append(destination)
+
+            query += """--sql
+                ORDER BY
+                    priority DESC,
+                    item_id ASC
+                ;
+                """
+            cursor.execute(query, params)
+            results = cast(list[sqlite3.Row], cursor.fetchall())
         items = [SessionQueueItem.queue_item_from_dict(dict(result)) for result in results]
         return items
 
     def get_queue_status(self, queue_id: str) -> SessionQueueStatus:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT status, count(*)
-            FROM session_queue
-            WHERE queue_id = ?
-            GROUP BY status
-            """,
-            (queue_id,),
-        )
-        counts_result = cast(list[sqlite3.Row], cursor.fetchall())
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT status, count(*)
+                FROM session_queue
+                WHERE queue_id = ?
+                GROUP BY status
+                """,
+                (queue_id,),
+            )
+            counts_result = cast(list[sqlite3.Row], cursor.fetchall())
 
         current_item = self.get_current(queue_id=queue_id)
         total = sum(row[1] or 0 for row in counts_result)
@@ -759,19 +701,19 @@ class SqliteSessionQueue(SessionQueueBase):
         )
 
     def get_batch_status(self, queue_id: str, batch_id: str) -> BatchStatus:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT status, count(*), origin, destination
-            FROM session_queue
-            WHERE
-                queue_id = ?
-                AND batch_id = ?
-            GROUP BY status
-            """,
-            (queue_id, batch_id),
-        )
-        result = cast(list[sqlite3.Row], cursor.fetchall())
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT status, count(*), origin, destination
+                FROM session_queue
+                WHERE
+                    queue_id = ?
+                    AND batch_id = ?
+                GROUP BY status
+                """,
+                (queue_id, batch_id),
+            )
+            result = cast(list[sqlite3.Row], cursor.fetchall())
         total = sum(row[1] or 0 for row in result)
         counts: dict[str, int] = {row[0]: row[1] for row in result}
         origin = result[0]["origin"] if result else None
@@ -791,18 +733,18 @@ class SqliteSessionQueue(SessionQueueBase):
         )
 
     def get_counts_by_destination(self, queue_id: str, destination: str) -> SessionQueueCountsByDestination:
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT status, count(*)
-            FROM session_queue
-            WHERE queue_id = ?
-            AND destination = ?
-            GROUP BY status
-            """,
-            (queue_id, destination),
-        )
-        counts_result = cast(list[sqlite3.Row], cursor.fetchall())
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT status, count(*)
+                FROM session_queue
+                WHERE queue_id = ?
+                AND destination = ?
+                GROUP BY status
+                """,
+                (queue_id, destination),
+            )
+            counts_result = cast(list[sqlite3.Row], cursor.fetchall())
 
         total = sum(row[1] or 0 for row in counts_result)
         counts: dict[str, int] = {row[0]: row[1] for row in counts_result}
@@ -820,8 +762,7 @@ class SqliteSessionQueue(SessionQueueBase):
 
     def retry_items_by_id(self, queue_id: str, item_ids: list[int]) -> RetryItemsResult:
         """Retries the given queue items"""
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             values_to_insert: list[ValueToInsertTuple] = []
             retried_item_ids: list[int] = []
 
@@ -872,10 +813,6 @@ class SqliteSessionQueue(SessionQueueBase):
                 values_to_insert,
             )
 
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         retry_result = RetryItemsResult(
             queue_id=queue_id,
             retried_item_ids=retried_item_ids,

invokeai/app/services/shared/sqlite/sqlite_database.py

@@ -1,4 +1,7 @@
 import sqlite3
+import threading
+from collections.abc import Generator
+from contextlib import contextmanager
 from logging import Logger
 from pathlib import Path
 
@@ -26,46 +29,65 @@ class SqliteDatabase:
 
     def __init__(self, db_path: Path | None, logger: Logger, verbose: bool = False) -> None:
         """Initializes the database. This is used internally by the class constructor."""
-        self.logger = logger
-        self.db_path = db_path
-        self.verbose = verbose
+        self._logger = logger
+        self._db_path = db_path
+        self._verbose = verbose
+        self._lock = threading.RLock()
 
-        if not self.db_path:
+        if not self._db_path:
             logger.info("Initializing in-memory database")
         else:
-            self.db_path.parent.mkdir(parents=True, exist_ok=True)
-            self.logger.info(f"Initializing database at {self.db_path}")
+            self._db_path.parent.mkdir(parents=True, exist_ok=True)
+            self._logger.info(f"Initializing database at {self._db_path}")
 
-        self.conn = sqlite3.connect(database=self.db_path or sqlite_memory, check_same_thread=False)
-        self.conn.row_factory = sqlite3.Row
+        self._conn = sqlite3.connect(database=self._db_path or sqlite_memory, check_same_thread=False)
+        self._conn.row_factory = sqlite3.Row
 
-        if self.verbose:
-            self.conn.set_trace_callback(self.logger.debug)
+        if self._verbose:
+            self._conn.set_trace_callback(self._logger.debug)
 
         # Enable foreign key constraints
-        self.conn.execute("PRAGMA foreign_keys = ON;")
+        self._conn.execute("PRAGMA foreign_keys = ON;")
 
         # Enable Write-Ahead Logging (WAL) mode for better concurrency
-        self.conn.execute("PRAGMA journal_mode = WAL;")
+        self._conn.execute("PRAGMA journal_mode = WAL;")
 
         # Set a busy timeout to prevent database lockups during writes
-        self.conn.execute("PRAGMA busy_timeout = 5000;")  # 5 seconds
+        self._conn.execute("PRAGMA busy_timeout = 5000;")  # 5 seconds
 
     def clean(self) -> None:
         """
         Cleans the database by running the VACUUM command, reporting on the freed space.
         """
         # No need to clean in-memory database
-        if not self.db_path:
+        if not self._db_path:
             return
         try:
-            initial_db_size = Path(self.db_path).stat().st_size
-            self.conn.execute("VACUUM;")
-            self.conn.commit()
-            final_db_size = Path(self.db_path).stat().st_size
-            freed_space_in_mb = round((initial_db_size - final_db_size) / 1024 / 1024, 2)
-            if freed_space_in_mb > 0:
-                self.logger.info(f"Cleaned database (freed {freed_space_in_mb}MB)")
+            with self._conn as conn:
+                initial_db_size = Path(self._db_path).stat().st_size
+                conn.execute("VACUUM;")
+                conn.commit()
+                final_db_size = Path(self._db_path).stat().st_size
+                freed_space_in_mb = round((initial_db_size - final_db_size) / 1024 / 1024, 2)
+                if freed_space_in_mb > 0:
+                    self._logger.info(f"Cleaned database (freed {freed_space_in_mb}MB)")
         except Exception as e:
-            self.logger.error(f"Error cleaning database: {e}")
+            self._logger.error(f"Error cleaning database: {e}")
             raise
+
+    @contextmanager
+    def transaction(self) -> Generator[sqlite3.Cursor, None, None]:
+        """
+        Thread-safe context manager for DB work.
+        Acquires the RLock, yields a Cursor, then commits or rolls back.
+        """
+        with self._lock:
+            cursor = self._conn.cursor()
+            try:
+                yield cursor
+                self._conn.commit()
+            except:
+                self._conn.rollback()
+                raise
+            finally:
+                cursor.close()

invokeai/app/services/shared/sqlite_migrator/sqlite_migrator_impl.py

@@ -32,7 +32,7 @@ class SqliteMigrator:
 
     def __init__(self, db: SqliteDatabase) -> None:
         self._db = db
-        self._logger = db.logger
+        self._logger = db._logger
         self._migration_set = MigrationSet()
         self._backup_path: Optional[Path] = None
 
@@ -45,7 +45,7 @@ class SqliteMigrator:
         """Migrates the database to the latest version."""
         # This throws if there is a problem.
         self._migration_set.validate_migration_chain()
-        cursor = self._db.conn.cursor()
+        cursor = self._db._conn.cursor()
         self._create_migrations_table(cursor=cursor)
 
         if self._migration_set.count == 0:
@@ -59,13 +59,13 @@ class SqliteMigrator:
         self._logger.info("Database update needed")
 
         # Make a backup of the db if it needs to be updated and is a file db
-        if self._db.db_path is not None:
+        if self._db._db_path is not None:
             timestamp = datetime.now().strftime("%Y%m%d-%H%M%S")
-            self._backup_path = self._db.db_path.parent / f"{self._db.db_path.stem}_backup_{timestamp}.db"
+            self._backup_path = self._db._db_path.parent / f"{self._db._db_path.stem}_backup_{timestamp}.db"
             self._logger.info(f"Backing up database to {str(self._backup_path)}")
             # Use SQLite to do the backup
             with closing(sqlite3.connect(self._backup_path)) as backup_conn:
-                self._db.conn.backup(backup_conn)
+                self._db._conn.backup(backup_conn)
         else:
             self._logger.info("Using in-memory database, no backup needed")
 
@@ -81,7 +81,7 @@ class SqliteMigrator:
         try:
             # Using sqlite3.Connection as a context manager commits a the transaction on exit, or rolls it back if an
             # exception is raised.
-            with self._db.conn as conn:
+            with self._db._conn as conn:
                 cursor = conn.cursor()
                 if self._get_current_version(cursor) != migration.from_version:
                     raise MigrationError(

invokeai/app/services/style_preset_records/style_preset_records_sqlite.py

@@ -17,7 +17,7 @@ from invokeai.app.util.misc import uuid_string
 class SqliteStylePresetRecordsStorage(StylePresetRecordsStorageBase):
     def __init__(self, db: SqliteDatabase) -> None:
         super().__init__()
-        self._conn = db.conn
+        self._db = db
 
     def start(self, invoker: Invoker) -> None:
         self._invoker = invoker
@@ -25,24 +25,23 @@ class SqliteStylePresetRecordsStorage(StylePresetRecordsStorageBase):
 
     def get(self, style_preset_id: str) -> StylePresetRecordDTO:
         """Gets a style preset by ID."""
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT *
-            FROM style_presets
-            WHERE id = ?;
-            """,
-            (style_preset_id,),
-        )
-        row = cursor.fetchone()
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT *
+                FROM style_presets
+                WHERE id = ?;
+                """,
+                (style_preset_id,),
+            )
+            row = cursor.fetchone()
         if row is None:
             raise StylePresetNotFoundError(f"Style preset with id {style_preset_id} not found")
         return StylePresetRecordDTO.from_dict(dict(row))
 
     def create(self, style_preset: StylePresetWithoutId) -> StylePresetRecordDTO:
         style_preset_id = uuid_string()
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             cursor.execute(
                 """--sql
                 INSERT OR IGNORE INTO style_presets (
@@ -60,16 +59,11 @@ class SqliteStylePresetRecordsStorage(StylePresetRecordsStorageBase):
                     style_preset.type,
                 ),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         return self.get(style_preset_id)
 
     def create_many(self, style_presets: list[StylePresetWithoutId]) -> None:
         style_preset_ids = []
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             for style_preset in style_presets:
                 style_preset_id = uuid_string()
                 style_preset_ids.append(style_preset_id)
@@ -90,16 +84,11 @@ class SqliteStylePresetRecordsStorage(StylePresetRecordsStorageBase):
                         style_preset.type,
                     ),
                 )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
 
         return None
 
     def update(self, style_preset_id: str, changes: StylePresetChanges) -> StylePresetRecordDTO:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             # Change the name of a style preset
             if changes.name is not None:
                 cursor.execute(
@@ -122,15 +111,10 @@ class SqliteStylePresetRecordsStorage(StylePresetRecordsStorageBase):
                     (changes.preset_data.model_dump_json(), style_preset_id),
                 )
 
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         return self.get(style_preset_id)
 
     def delete(self, style_preset_id: str) -> None:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             cursor.execute(
                 """--sql
                 DELETE from style_presets
@@ -138,51 +122,41 @@ class SqliteStylePresetRecordsStorage(StylePresetRecordsStorageBase):
                 """,
                 (style_preset_id,),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         return None
 
     def get_many(self, type: PresetType | None = None) -> list[StylePresetRecordDTO]:
-        main_query = """
-            SELECT
-                *
-            FROM style_presets
-            """
+        with self._db.transaction() as cursor:
+            main_query = """
+                SELECT
+                    *
+                FROM style_presets
+                """
 
-        if type is not None:
-            main_query += "WHERE type = ? "
+            if type is not None:
+                main_query += "WHERE type = ? "
 
-        main_query += "ORDER BY LOWER(name) ASC"
+            main_query += "ORDER BY LOWER(name) ASC"
 
-        cursor = self._conn.cursor()
-        if type is not None:
-            cursor.execute(main_query, (type,))
-        else:
-            cursor.execute(main_query)
+            if type is not None:
+                cursor.execute(main_query, (type,))
+            else:
+                cursor.execute(main_query)
 
-        rows = cursor.fetchall()
+            rows = cursor.fetchall()
         style_presets = [StylePresetRecordDTO.from_dict(dict(row)) for row in rows]
 
         return style_presets
 
     def _sync_default_style_presets(self) -> None:
         """Syncs default style presets to the database. Internal use only."""
-
-        # First delete all existing default style presets
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
+            # First delete all existing default style presets
             cursor.execute(
                 """--sql
                 DELETE FROM style_presets
                 WHERE type = "default";
                 """
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         # Next, parse and create the default style presets
         with open(Path(__file__).parent / Path("default_style_presets.json"), "r") as file:
             presets = json.load(file)

invokeai/app/services/workflow_records/workflow_records_sqlite.py

@@ -25,7 +25,7 @@ SQL_TIME_FORMAT = "%Y-%m-%d %H:%M:%f"
 class SqliteWorkflowRecordsStorage(WorkflowRecordsStorageBase):
     def __init__(self, db: SqliteDatabase) -> None:
         super().__init__()
-        self._conn = db.conn
+        self._db = db
 
     def start(self, invoker: Invoker) -> None:
         self._invoker = invoker
@@ -33,16 +33,16 @@ class SqliteWorkflowRecordsStorage(WorkflowRecordsStorageBase):
 
     def get(self, workflow_id: str) -> WorkflowRecordDTO:
         """Gets a workflow by ID. Updates the opened_at column."""
-        cursor = self._conn.cursor()
-        cursor.execute(
-            """--sql
-            SELECT workflow_id, workflow, name, created_at, updated_at, opened_at
-            FROM workflow_library
-            WHERE workflow_id = ?;
-            """,
-            (workflow_id,),
-        )
-        row = cursor.fetchone()
+        with self._db.transaction() as cursor:
+            cursor.execute(
+                """--sql
+                SELECT workflow_id, workflow, name, created_at, updated_at, opened_at
+                FROM workflow_library
+                WHERE workflow_id = ?;
+                """,
+                (workflow_id,),
+            )
+            row = cursor.fetchone()
         if row is None:
             raise WorkflowNotFoundError(f"Workflow with id {workflow_id} not found")
         return WorkflowRecordDTO.from_dict(dict(row))
@@ -51,9 +51,8 @@ class SqliteWorkflowRecordsStorage(WorkflowRecordsStorageBase):
         if workflow.meta.category is WorkflowCategory.Default:
             raise ValueError("Default workflows cannot be created via this method")
 
-        try:
+        with self._db.transaction() as cursor:
             workflow_with_id = Workflow(**workflow.model_dump(), id=uuid_string())
-            cursor = self._conn.cursor()
             cursor.execute(
                 """--sql
                 INSERT OR IGNORE INTO workflow_library (
@@ -64,18 +63,13 @@ class SqliteWorkflowRecordsStorage(WorkflowRecordsStorageBase):
                 """,
                 (workflow_with_id.id, workflow_with_id.model_dump_json()),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         return self.get(workflow_with_id.id)
 
     def update(self, workflow: Workflow) -> WorkflowRecordDTO:
         if workflow.meta.category is WorkflowCategory.Default:
             raise ValueError("Default workflows cannot be updated")
 
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             cursor.execute(
                 """--sql
                 UPDATE workflow_library
@@ -84,18 +78,13 @@ class SqliteWorkflowRecordsStorage(WorkflowRecordsStorageBase):
                 """,
                 (workflow.model_dump_json(), workflow.id),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         return self.get(workflow.id)
 
     def delete(self, workflow_id: str) -> None:
         if self.get(workflow_id).workflow.meta.category is WorkflowCategory.Default:
             raise ValueError("Default workflows cannot be deleted")
 
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             cursor.execute(
                 """--sql
                 DELETE from workflow_library
@@ -103,10 +92,6 @@ class SqliteWorkflowRecordsStorage(WorkflowRecordsStorageBase):
                 """,
                 (workflow_id,),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
         return None
 
     def get_many(
@@ -121,108 +106,108 @@ class SqliteWorkflowRecordsStorage(WorkflowRecordsStorageBase):
         has_been_opened: Optional[bool] = None,
         is_published: Optional[bool] = None,
     ) -> PaginatedResults[WorkflowRecordListItemDTO]:
-        # sanitize!
-        assert order_by in WorkflowRecordOrderBy
-        assert direction in SQLiteDirection
+        with self._db.transaction() as cursor:
+            # sanitize!
+            assert order_by in WorkflowRecordOrderBy
+            assert direction in SQLiteDirection
 
-        # We will construct the query dynamically based on the query params
+            # We will construct the query dynamically based on the query params
 
-        # The main query to get the workflows / counts
-        main_query = """
-                SELECT
-                    workflow_id,
-                    category,
-                    name,
-                    description,
-                    created_at,
-                    updated_at,
-                    opened_at,
-                    tags
-                FROM workflow_library
-                """
-        count_query = "SELECT COUNT(*) FROM workflow_library"
+            # The main query to get the workflows / counts
+            main_query = """
+                    SELECT
+                        workflow_id,
+                        category,
+                        name,
+                        description,
+                        created_at,
+                        updated_at,
+                        opened_at,
+                        tags
+                    FROM workflow_library
+                    """
+            count_query = "SELECT COUNT(*) FROM workflow_library"
 
-        # Start with an empty list of conditions and params
-        conditions: list[str] = []
-        params: list[str | int] = []
+            # Start with an empty list of conditions and params
+            conditions: list[str] = []
+            params: list[str | int] = []
 
-        if categories:
-            # Categories is a list of WorkflowCategory enum values, and a single string in the DB
+            if categories:
+                # Categories is a list of WorkflowCategory enum values, and a single string in the DB
 
-            # Ensure all categories are valid (is this necessary?)
-            assert all(c in WorkflowCategory for c in categories)
+                # Ensure all categories are valid (is this necessary?)
+                assert all(c in WorkflowCategory for c in categories)
 
-            # Construct a placeholder string for the number of categories
-            placeholders = ", ".join("?" for _ in categories)
+                # Construct a placeholder string for the number of categories
+                placeholders = ", ".join("?" for _ in categories)
 
-            # Construct the condition string & params
-            category_condition = f"category IN ({placeholders})"
-            category_params = [category.value for category in categories]
+                # Construct the condition string & params
+                category_condition = f"category IN ({placeholders})"
+                category_params = [category.value for category in categories]
 
-            conditions.append(category_condition)
-            params.extend(category_params)
+                conditions.append(category_condition)
+                params.extend(category_params)
 
-        if tags:
-            # Tags is a list of strings, and a single string in the DB
-            # The string in the DB has no guaranteed format
+            if tags:
+                # Tags is a list of strings, and a single string in the DB
+                # The string in the DB has no guaranteed format
 
-            # Construct a list of conditions for each tag
-            tags_conditions = ["tags LIKE ?" for _ in tags]
-            tags_conditions_joined = " OR ".join(tags_conditions)
-            tags_condition = f"({tags_conditions_joined})"
+                # Construct a list of conditions for each tag
+                tags_conditions = ["tags LIKE ?" for _ in tags]
+                tags_conditions_joined = " OR ".join(tags_conditions)
+                tags_condition = f"({tags_conditions_joined})"
 
-            # And the params for the tags, case-insensitive
-            tags_params = [f"%{t.strip()}%" for t in tags]
+                # And the params for the tags, case-insensitive
+                tags_params = [f"%{t.strip()}%" for t in tags]
 
-            conditions.append(tags_condition)
-            params.extend(tags_params)
+                conditions.append(tags_condition)
+                params.extend(tags_params)
 
-        if has_been_opened:
-            conditions.append("opened_at IS NOT NULL")
-        elif has_been_opened is False:
-            conditions.append("opened_at IS NULL")
+            if has_been_opened:
+                conditions.append("opened_at IS NOT NULL")
+            elif has_been_opened is False:
+                conditions.append("opened_at IS NULL")
 
-        # Ignore whitespace in the query
-        stripped_query = query.strip() if query else None
-        if stripped_query:
-            # Construct a wildcard query for the name, description, and tags
-            wildcard_query = "%" + stripped_query + "%"
-            query_condition = "(name LIKE ? OR description LIKE ? OR tags LIKE ?)"
+            # Ignore whitespace in the query
+            stripped_query = query.strip() if query else None
+            if stripped_query:
+                # Construct a wildcard query for the name, description, and tags
+                wildcard_query = "%" + stripped_query + "%"
+                query_condition = "(name LIKE ? OR description LIKE ? OR tags LIKE ?)"
 
-            conditions.append(query_condition)
-            params.extend([wildcard_query, wildcard_query, wildcard_query])
+                conditions.append(query_condition)
+                params.extend([wildcard_query, wildcard_query, wildcard_query])
 
-        if conditions:
-            # If there are conditions, add a WHERE clause and then join the conditions
-            main_query += " WHERE "
-            count_query += " WHERE "
+            if conditions:
+                # If there are conditions, add a WHERE clause and then join the conditions
+                main_query += " WHERE "
+                count_query += " WHERE "
 
-            all_conditions = " AND ".join(conditions)
-            main_query += all_conditions
-            count_query += all_conditions
+                all_conditions = " AND ".join(conditions)
+                main_query += all_conditions
+                count_query += all_conditions
 
-        # After this point, the query and params differ for the main query and the count query
-        main_params = params.copy()
-        count_params = params.copy()
+            # After this point, the query and params differ for the main query and the count query
+            main_params = params.copy()
+            count_params = params.copy()
 
-        # Main query also gets ORDER BY and LIMIT/OFFSET
-        main_query += f" ORDER BY {order_by.value} {direction.value}"
+            # Main query also gets ORDER BY and LIMIT/OFFSET
+            main_query += f" ORDER BY {order_by.value} {direction.value}"
 
-        if per_page:
-            main_query += " LIMIT ? OFFSET ?"
-            main_params.extend([per_page, page * per_page])
+            if per_page:
+                main_query += " LIMIT ? OFFSET ?"
+                main_params.extend([per_page, page * per_page])
 
-        # Put a ring on it
-        main_query += ";"
-        count_query += ";"
+            # Put a ring on it
+            main_query += ";"
+            count_query += ";"
 
-        cursor = self._conn.cursor()
-        cursor.execute(main_query, main_params)
-        rows = cursor.fetchall()
-        workflows = [WorkflowRecordListItemDTOValidator.validate_python(dict(row)) for row in rows]
+            cursor.execute(main_query, main_params)
+            rows = cursor.fetchall()
+            workflows = [WorkflowRecordListItemDTOValidator.validate_python(dict(row)) for row in rows]
 
-        cursor.execute(count_query, count_params)
-        total = cursor.fetchone()[0]
+            cursor.execute(count_query, count_params)
+            total = cursor.fetchone()[0]
 
         if per_page:
             pages = total // per_page + (total % per_page > 0)
@@ -247,46 +232,46 @@ class SqliteWorkflowRecordsStorage(WorkflowRecordsStorageBase):
         if not tags:
             return {}
 
-        cursor = self._conn.cursor()
-        result: dict[str, int] = {}
-        # Base conditions for categories and selected tags
-        base_conditions: list[str] = []
-        base_params: list[str | int] = []
+        with self._db.transaction() as cursor:
+            result: dict[str, int] = {}
+            # Base conditions for categories and selected tags
+            base_conditions: list[str] = []
+            base_params: list[str | int] = []
 
-        # Add category conditions
-        if categories:
-            assert all(c in WorkflowCategory for c in categories)
-            placeholders = ", ".join("?" for _ in categories)
-            base_conditions.append(f"category IN ({placeholders})")
-            base_params.extend([category.value for category in categories])
+            # Add category conditions
+            if categories:
+                assert all(c in WorkflowCategory for c in categories)
+                placeholders = ", ".join("?" for _ in categories)
+                base_conditions.append(f"category IN ({placeholders})")
+                base_params.extend([category.value for category in categories])
 
-        if has_been_opened:
-            base_conditions.append("opened_at IS NOT NULL")
-        elif has_been_opened is False:
-            base_conditions.append("opened_at IS NULL")
+            if has_been_opened:
+                base_conditions.append("opened_at IS NOT NULL")
+            elif has_been_opened is False:
+                base_conditions.append("opened_at IS NULL")
 
-        # For each tag to count, run a separate query
-        for tag in tags:
-            # Start with the base conditions
-            conditions = base_conditions.copy()
-            params = base_params.copy()
+            # For each tag to count, run a separate query
+            for tag in tags:
+                # Start with the base conditions
+                conditions = base_conditions.copy()
+                params = base_params.copy()
 
-            # Add this specific tag condition
-            conditions.append("tags LIKE ?")
-            params.append(f"%{tag.strip()}%")
+                # Add this specific tag condition
+                conditions.append("tags LIKE ?")
+                params.append(f"%{tag.strip()}%")
 
-            # Construct the full query
-            stmt = """--sql
-                SELECT COUNT(*)
-                FROM workflow_library
-                """
+                # Construct the full query
+                stmt = """--sql
+                    SELECT COUNT(*)
+                    FROM workflow_library
+                    """
 
-            if conditions:
-                stmt += " WHERE " + " AND ".join(conditions)
+                if conditions:
+                    stmt += " WHERE " + " AND ".join(conditions)
 
-            cursor.execute(stmt, params)
-            count = cursor.fetchone()[0]
-            result[tag] = count
+                cursor.execute(stmt, params)
+                count = cursor.fetchone()[0]
+                result[tag] = count
 
         return result
 
@@ -296,52 +281,51 @@ class SqliteWorkflowRecordsStorage(WorkflowRecordsStorageBase):
         has_been_opened: Optional[bool] = None,
         is_published: Optional[bool] = None,
     ) -> dict[str, int]:
-        cursor = self._conn.cursor()
-        result: dict[str, int] = {}
-        # Base conditions for categories
-        base_conditions: list[str] = []
-        base_params: list[str | int] = []
+        with self._db.transaction() as cursor:
+            result: dict[str, int] = {}
+            # Base conditions for categories
+            base_conditions: list[str] = []
+            base_params: list[str | int] = []
 
-        # Add category conditions
-        if categories:
-            assert all(c in WorkflowCategory for c in categories)
-            placeholders = ", ".join("?" for _ in categories)
-            base_conditions.append(f"category IN ({placeholders})")
-            base_params.extend([category.value for category in categories])
+            # Add category conditions
+            if categories:
+                assert all(c in WorkflowCategory for c in categories)
+                placeholders = ", ".join("?" for _ in categories)
+                base_conditions.append(f"category IN ({placeholders})")
+                base_params.extend([category.value for category in categories])
 
-        if has_been_opened:
-            base_conditions.append("opened_at IS NOT NULL")
-        elif has_been_opened is False:
-            base_conditions.append("opened_at IS NULL")
+            if has_been_opened:
+                base_conditions.append("opened_at IS NOT NULL")
+            elif has_been_opened is False:
+                base_conditions.append("opened_at IS NULL")
 
-        # For each category to count, run a separate query
-        for category in categories:
-            # Start with the base conditions
-            conditions = base_conditions.copy()
-            params = base_params.copy()
+            # For each category to count, run a separate query
+            for category in categories:
+                # Start with the base conditions
+                conditions = base_conditions.copy()
+                params = base_params.copy()
 
-            # Add this specific category condition
-            conditions.append("category = ?")
-            params.append(category.value)
+                # Add this specific category condition
+                conditions.append("category = ?")
+                params.append(category.value)
 
-            # Construct the full query
-            stmt = """--sql
-                SELECT COUNT(*)
-                FROM workflow_library
-                """
+                # Construct the full query
+                stmt = """--sql
+                    SELECT COUNT(*)
+                    FROM workflow_library
+                    """
 
-            if conditions:
-                stmt += " WHERE " + " AND ".join(conditions)
+                if conditions:
+                    stmt += " WHERE " + " AND ".join(conditions)
 
-            cursor.execute(stmt, params)
-            count = cursor.fetchone()[0]
-            result[category.value] = count
+                cursor.execute(stmt, params)
+                count = cursor.fetchone()[0]
+                result[category.value] = count
 
         return result
 
     def update_opened_at(self, workflow_id: str) -> None:
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             cursor.execute(
                 f"""--sql
                 UPDATE workflow_library
@@ -350,10 +334,6 @@ class SqliteWorkflowRecordsStorage(WorkflowRecordsStorageBase):
                 """,
                 (workflow_id,),
             )
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise
 
     def _sync_default_workflows(self) -> None:
         """Syncs default workflows to the database. Internal use only."""
@@ -368,8 +348,7 @@ class SqliteWorkflowRecordsStorage(WorkflowRecordsStorageBase):
         meaningless, as they are overwritten every time the server starts.
         """
 
-        try:
-            cursor = self._conn.cursor()
+        with self._db.transaction() as cursor:
             workflows_from_file: list[Workflow] = []
             workflows_to_update: list[Workflow] = []
             workflows_to_add: list[Workflow] = []
@@ -449,8 +428,3 @@ class SqliteWorkflowRecordsStorage(WorkflowRecordsStorageBase):
                     """,
                     (w.model_dump_json(), w.id),
                 )
-
-            self._conn.commit()
-        except Exception:
-            self._conn.rollback()
-            raise

invokeai/backend/model_manager/config.py

@@ -187,7 +187,7 @@ class ModelConfigBase(ABC, BaseModel):
             else:
                 return config_cls.from_model_on_disk(mod, **overrides)
 
-        raise InvalidModelConfigException("No valid config found")
+        raise InvalidModelConfigException("Unable to determine model type")
 
     @classmethod
     def get_tag(cls) -> Tag:

invokeai/backend/model_manager/util/lora_metadata_extractor.py

@@ -0,0 +1,145 @@
+"""Utility functions for extracting metadata from LoRA model files."""
+
+import json
+import logging
+from pathlib import Path
+from typing import Any, Dict, Optional, Set, Tuple
+
+from PIL import Image
+
+from invokeai.app.util.thumbnails import make_thumbnail
+from invokeai.backend.model_manager.config import AnyModelConfig, ModelType
+
+logger = logging.getLogger(__name__)
+
+
+def extract_lora_metadata(
+    model_path: Path, model_key: str, model_images_path: Path
+) -> Tuple[Optional[str], Optional[Set[str]]]:
+    """
+    Extract metadata for a LoRA model from associated JSON and image files.
+
+    Args:
+        model_path: Path to the LoRA model file
+        model_key: Unique key for the model
+        model_images_path: Path to the model images directory
+
+    Returns:
+        Tuple of (description, trigger_phrases)
+    """
+    model_stem = model_path.stem
+    model_dir = model_path.parent
+
+    # Find and process preview image
+    _process_preview_image(model_stem, model_dir, model_key, model_images_path)
+
+    # Extract metadata from JSON
+    description, trigger_phrases = _extract_json_metadata(model_stem, model_dir)
+
+    return description, trigger_phrases
+
+
+def _process_preview_image(model_stem: str, model_dir: Path, model_key: str, model_images_path: Path) -> bool:
+    """Find and process a preview image for the model, saving it to the model images store."""
+    image_extensions = [".png", ".jpg", ".jpeg", ".webp"]
+
+    for ext in image_extensions:
+        image_path = model_dir / f"{model_stem}{ext}"
+        if image_path.exists():
+            try:
+                # Open the image
+                with Image.open(image_path) as img:
+                    # Create thumbnail and save to model images directory
+                    thumbnail = make_thumbnail(img, 256)
+                    thumbnail_path = model_images_path / f"{model_key}.webp"
+                    thumbnail.save(thumbnail_path, format="webp")
+
+                logger.info(f"Processed preview image {image_path.name} for model {model_key}")
+                return True
+
+            except Exception as e:
+                logger.warning(f"Failed to process preview image {image_path.name}: {e}")
+                return False
+
+    return False
+
+
+def _extract_json_metadata(model_stem: str, model_dir: Path) -> Tuple[Optional[str], Optional[Set[str]]]:
+    """Extract metadata from a JSON file with the same name as the model."""
+    json_path = model_dir / f"{model_stem}.json"
+
+    if not json_path.exists():
+        return None, None
+
+    try:
+        with open(json_path, "r", encoding="utf-8") as f:
+            metadata = json.load(f)
+
+        # Extract description
+        description = _build_description(metadata)
+
+        # Extract trigger phrases
+        trigger_phrases = _extract_trigger_phrases(metadata)
+
+        if description or trigger_phrases:
+            logger.info(f"Applied metadata from {json_path.name}")
+
+        return description, trigger_phrases
+
+    except (json.JSONDecodeError, IOError, Exception) as e:
+        logger.warning(f"Failed to read metadata from {json_path}: {e}")
+        return None, None
+
+
+def _build_description(metadata: Dict[str, Any]) -> Optional[str]:
+    """Build a description from metadata fields."""
+    description_parts = []
+
+    if description := metadata.get("description"):
+        description_parts.append(str(description).strip())
+
+    if notes := metadata.get("notes"):
+        description_parts.append(str(notes).strip())
+
+    return " | ".join(description_parts) if description_parts else None
+
+
+def _extract_trigger_phrases(metadata: Dict[str, Any]) -> Optional[Set[str]]:
+    """Extract trigger phrases from metadata."""
+    if not (activation_text := metadata.get("activation text")):
+        return None
+
+    activation_text = str(activation_text).strip()
+    if not activation_text:
+        return None
+
+    # Split on commas and clean up each phrase
+    phrases = [phrase.strip() for phrase in activation_text.split(",") if phrase.strip()]
+
+    return set(phrases) if phrases else None
+
+
+def apply_lora_metadata(info: AnyModelConfig, model_path: Path, model_images_path: Path) -> None:
+    """
+    Apply extracted metadata to a LoRA model configuration.
+
+    Args:
+        info: The model configuration to update
+        model_path: Path to the LoRA model file
+        model_images_path: Path to the model images directory
+    """
+    # Only process LoRA models
+    if info.type != ModelType.LoRA:
+        return
+
+    # Extract and apply metadata
+    description, trigger_phrases = extract_lora_metadata(model_path, info.key, model_images_path)
+
+    # We don't set cover_image path in the config anymore since images are stored
+    # separately in the model images store by model key
+
+    if description:
+        info.description = description
+
+    if trigger_phrases:
+        info.trigger_phrases = trigger_phrases

invokeai/frontend/web/.eslintignore

@@ -1,10 +0,0 @@
-dist/
-static/
-.husky/
-node_modules/
-patches/
-stats.html
-index.html
-.yarn/
-*.scss
-src/services/api/schema.ts

invokeai/frontend/web/.eslintrc.js

@@ -1,88 +0,0 @@
-module.exports = {
-  extends: ['@invoke-ai/eslint-config-react'],
-  plugins: ['path', 'i18next'],
-  rules: {
-    // TODO(psyche): Enable this rule. Requires no default exports in components - many changes.
-    'react-refresh/only-export-components': 'off',
-    // TODO(psyche): Enable this rule. Requires a lot of eslint-disable-next-line comments.
-    '@typescript-eslint/consistent-type-assertions': 'off',
-    // https://github.com/qdanik/eslint-plugin-path
-    'path/no-relative-imports': ['error', { maxDepth: 0 }],
-    // https://github.com/edvardchen/eslint-plugin-i18next/blob/HEAD/docs/rules/no-literal-string.md
-    // TODO: ENABLE THIS RULE BEFORE v6.0.0
-    // 'i18next/no-literal-string': 'error',
-    // https://eslint.org/docs/latest/rules/no-console
-    'no-console': 'warn',
-    // https://eslint.org/docs/latest/rules/no-promise-executor-return
-    'no-promise-executor-return': 'error',
-    // https://eslint.org/docs/latest/rules/require-await
-    'require-await': 'error',
-    // Restrict setActiveTab calls to only use-navigation-api.tsx
-    'no-restricted-syntax': [
-      'error',
-      {
-        selector: 'CallExpression[callee.name="setActiveTab"]',
-        message:
-          'setActiveTab() can only be called from use-navigation-api.tsx. Use navigationApi.switchToTab() instead.',
-      },
-    ],
-    // TODO: ENABLE THIS RULE BEFORE v6.0.0
-    'react/display-name': 'off',
-    'no-restricted-properties': [
-      'error',
-      {
-        object: 'crypto',
-        property: 'randomUUID',
-        message: 'Use of crypto.randomUUID is not allowed as it is not available in all browsers.',
-      },
-      {
-        object: 'navigator',
-        property: 'clipboard',
-        message:
-          'The Clipboard API is not available by default in Firefox. Use the `useClipboard` hook instead, which wraps clipboard access to prevent errors.',
-      },
-    ],
-    'no-restricted-imports': [
-      'error',
-      {
-        paths: [
-          {
-            name: 'lodash-es',
-            importNames: ['isEqual'],
-            message: 'Please use objectEquals from @observ33r/object-equals instead.',
-          },
-          {
-            name: 'lodash-es',
-            message: 'Please use es-toolkit instead.',
-          },
-          {
-            name: 'es-toolkit',
-            importNames: ['isEqual'],
-            message: 'Please use objectEquals from @observ33r/object-equals instead.',
-          },
-        ],
-      },
-    ],
-  },
-  overrides: [
-    /**
-     * Allow setActiveTab calls only in use-navigation-api.tsx
-     */
-    {
-      files: ['**/use-navigation-api.tsx'],
-      rules: {
-        'no-restricted-syntax': 'off',
-      },
-    },
-    /**
-     * Overrides for stories
-     */
-    {
-      files: ['*.stories.tsx'],
-      rules: {
-        // We may not have i18n available in stories.
-        'i18next/no-literal-string': 'off',
-      },
-    },
-  ],
-};

invokeai/frontend/web/.prettierignore

@@ -14,3 +14,4 @@ static/
 src/theme/css/overlayscrollbars.css
 src/theme_/css/overlayscrollbars.css
 pnpm-lock.yaml
+.claude

invokeai/frontend/web/.prettierrc.js

@@ -1,11 +0,0 @@
-module.exports = {
-  ...require('@invoke-ai/prettier-config-react'),
-  overrides: [
-    {
-      files: ['public/locales/*.json'],
-      options: {
-        tabWidth: 4,
-      },
-    },
-  ],
-};

invokeai/frontend/web/.prettierrc.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "http://json.schemastore.org/prettierrc",
+  "trailingComma": "es5",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "endOfLine": "auto",
+  "overrides": [
+    {
+      "files": ["public/locales/*.json"],
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
+}

invokeai/frontend/web/.storybook/ReduxInit.tsx

@@ -1,21 +1,23 @@
-import { PropsWithChildren, memo, useEffect } from 'react';
-import { modelChanged } from '../src/features/controlLayers/store/paramsSlice';
-import { useAppDispatch } from '../src/app/store/storeHooks';
 import { useGlobalModifiersInit } from '@invoke-ai/ui-library';
+import type { PropsWithChildren } from 'react';
+import { memo, useEffect } from 'react';
+
+import { useAppDispatch } from '../src/app/store/storeHooks';
+import { modelChanged } from '../src/features/controlLayers/store/paramsSlice';
 /**
  * Initializes some state for storybook. Must be in a different component
  * so that it is run inside the redux context.
  */
-export const ReduxInit = memo((props: PropsWithChildren) => {
+export const ReduxInit = memo(({ children }: PropsWithChildren) => {
   const dispatch = useAppDispatch();
   useGlobalModifiersInit();
   useEffect(() => {
     dispatch(
       modelChanged({ model: { key: 'test_model', hash: 'some_hash', name: 'some name', base: 'sd-1', type: 'main' } })
     );
-  }, []);
+  }, [dispatch]);
 
-  return props.children;
+  return children;
 });
 
 ReduxInit.displayName = 'ReduxInit';

invokeai/frontend/web/.storybook/main.ts

@@ -2,19 +2,13 @@ import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
-    '@storybook/addon-storysource',
-  ],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
+
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
+
   core: {
     disableTelemetry: true,
   },

invokeai/frontend/web/.storybook/manager.ts

@@ -1,5 +1,5 @@
-import { addons } from '@storybook/manager-api';
-import { themes } from '@storybook/theming';
+import { addons } from 'storybook/manager-api';
+import { themes } from 'storybook/theming';
 
 addons.setConfig({
   theme: themes.dark,

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

@@ -1,17 +1,18 @@
-import { Preview } from '@storybook/react';
-import { themes } from '@storybook/theming';
+import type { Preview } from '@storybook/react-vite';
+import { themes } from 'storybook/theming';
+import { $store } from 'app/store/nanostores/store';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import { Provider } from 'react-redux';
-import ThemeLocaleProvider from '../src/app/components/ThemeLocaleProvider';
-import { $baseUrl } from '../src/app/store/nanostores/baseUrl';
-import { createStore } from '../src/app/store/store';
+
 // TODO: Disabled for IDE performance issues with our translation JSON
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import translationEN from '../public/locales/en.json';
+import ThemeLocaleProvider from '../src/app/components/ThemeLocaleProvider';
+import { $baseUrl } from '../src/app/store/nanostores/baseUrl';
+import { createStore } from '../src/app/store/store';
 import { ReduxInit } from './ReduxInit';
-import { $store } from 'app/store/nanostores/store';
 
 i18n.use(initReactI18next).init({
   lng: 'en',
@@ -46,6 +47,7 @@ const preview: Preview = {
   parameters: {
     docs: {
       theme: themes.dark,
+      codePanel: true,
     },
   },
 };

invokeai/frontend/web/eslint.config.mjs

@@ -0,0 +1,242 @@
+import js from '@eslint/js';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
+import pluginI18Next from 'eslint-plugin-i18next';
+import pluginImport from 'eslint-plugin-import';
+import pluginPath from 'eslint-plugin-path';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import pluginReactRefresh from 'eslint-plugin-react-refresh';
+import pluginSimpleImportSort from 'eslint-plugin-simple-import-sort';
+import pluginStorybook from 'eslint-plugin-storybook';
+import pluginUnusedImports from 'eslint-plugin-unused-imports';
+import globals from 'globals';
+
+export default [
+  js.configs.recommended,
+
+  {
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        GlobalCompositeOperation: 'readonly',
+        RequestInit: 'readonly',
+      },
+    },
+
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+
+    plugins: {
+      react: pluginReact,
+      '@typescript-eslint': typescriptEslint,
+      'react-hooks': pluginReactHooks,
+      import: pluginImport,
+      'unused-imports': pluginUnusedImports,
+      'simple-import-sort': pluginSimpleImportSort,
+      'react-refresh': pluginReactRefresh.configs.vite,
+      path: pluginPath,
+      i18next: pluginI18Next,
+      storybook: pluginStorybook,
+    },
+
+    rules: {
+      ...typescriptEslint.configs.recommended.rules,
+      ...pluginReact.configs.recommended.rules,
+      ...pluginReact.configs['jsx-runtime'].rules,
+      ...pluginReactHooks.configs.recommended.rules,
+      ...pluginStorybook.configs.recommended.rules,
+
+      'react/jsx-no-bind': [
+        'error',
+        {
+          allowBind: true,
+        },
+      ],
+
+      'react/jsx-curly-brace-presence': [
+        'error',
+        {
+          props: 'never',
+          children: 'never',
+        },
+      ],
+
+      'react-hooks/exhaustive-deps': 'error',
+
+      curly: 'error',
+      'no-var': 'error',
+      'brace-style': 'error',
+      'prefer-template': 'error',
+      radix: 'error',
+      'space-before-blocks': 'error',
+      eqeqeq: 'error',
+      'one-var': ['error', 'never'],
+      'no-eval': 'error',
+      'no-extend-native': 'error',
+      'no-implied-eval': 'error',
+      'no-label-var': 'error',
+      'no-return-assign': 'error',
+      'no-sequences': 'error',
+      'no-template-curly-in-string': 'error',
+      'no-throw-literal': 'error',
+      'no-unmodified-loop-condition': 'error',
+      'import/no-duplicates': 'error',
+      'import/prefer-default-export': 'off',
+      'unused-imports/no-unused-imports': 'error',
+
+      'unused-imports/no-unused-vars': [
+        'error',
+        {
+          vars: 'all',
+          varsIgnorePattern: '^_',
+          args: 'after-used',
+          argsIgnorePattern: '^_',
+        },
+      ],
+
+      'simple-import-sort/imports': 'error',
+      'simple-import-sort/exports': 'error',
+      '@typescript-eslint/no-unused-vars': 'off',
+
+      '@typescript-eslint/ban-ts-comment': [
+        'error',
+        {
+          'ts-expect-error': 'allow-with-description',
+          'ts-ignore': true,
+          'ts-nocheck': true,
+          'ts-check': false,
+          minimumDescriptionLength: 10,
+        },
+      ],
+
+      '@typescript-eslint/no-empty-interface': [
+        'error',
+        {
+          allowSingleExtends: true,
+        },
+      ],
+
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          prefer: 'type-imports',
+          fixStyle: 'separate-type-imports',
+          disallowTypeAnnotations: true,
+        },
+      ],
+
+      '@typescript-eslint/no-import-type-side-effects': 'error',
+
+      '@typescript-eslint/consistent-type-assertions': [
+        'error',
+        {
+          assertionStyle: 'as',
+        },
+      ],
+
+      'path/no-relative-imports': [
+        'error',
+        {
+          maxDepth: 0,
+        },
+      ],
+
+      'no-console': 'warn',
+      'no-promise-executor-return': 'error',
+      'require-await': 'error',
+
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'CallExpression[callee.name="setActiveTab"]',
+          message:
+            'setActiveTab() can only be called from use-navigation-api.tsx. Use navigationApi.switchToTab() instead.',
+        },
+      ],
+
+      'no-restricted-properties': [
+        'error',
+        {
+          object: 'crypto',
+          property: 'randomUUID',
+          message: 'Use of crypto.randomUUID is not allowed as it is not available in all browsers.',
+        },
+        {
+          object: 'navigator',
+          property: 'clipboard',
+          message:
+            'The Clipboard API is not available by default in Firefox. Use the `useClipboard` hook instead, which wraps clipboard access to prevent errors.',
+        },
+      ],
+
+      // Typescript handles this for us: https://eslint.org/docs/latest/rules/no-redeclare#handled_by_typescript
+      'no-redeclare': 'off',
+
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'lodash-es',
+              importNames: ['isEqual'],
+              message: 'Please use objectEquals from @observ33r/object-equals instead.',
+            },
+            {
+              name: 'lodash-es',
+              message: 'Please use es-toolkit instead.',
+            },
+            {
+              name: 'es-toolkit',
+              importNames: ['isEqual'],
+              message: 'Please use objectEquals from @observ33r/object-equals instead.',
+            },
+          ],
+        },
+      ],
+    },
+
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+  },
+
+  {
+    files: ['**/use-navigation-api.tsx'],
+    rules: {
+      'no-restricted-syntax': 'off',
+    },
+  },
+
+  {
+    files: ['**/*.stories.tsx'],
+    rules: {
+      'i18next/no-literal-string': 'off',
+    },
+  },
+
+  {
+    ignores: [
+      '**/dist/',
+      '**/static/',
+      '**/.husky/',
+      '**/node_modules/',
+      '**/patches/',
+      '**/stats.html',
+      '**/index.html',
+      '**/.yarn/',
+      '**/*.scss',
+      'src/services/api/schema.ts',
+      '.prettierrc.js',
+      '.storybook',
+    ],
+  },
+];

invokeai/frontend/web/knip.ts

@@ -14,6 +14,7 @@ const config: KnipConfig = {
     'src/features/controlLayers/konva/util.ts',
     // Will be using this
     'src/common/hooks/useAsyncState.ts',
+    'src/app/store/use-debounced-app-selector.ts',
   ],
   ignoreBinaries: ['only-allow'],
   paths: {

invokeai/frontend/web/package.json

@@ -47,25 +47,25 @@
     "@fontsource-variable/inter": "^5.2.6",
     "@invoke-ai/ui-library": "^0.0.46",
     "@nanostores/react": "^1.0.0",
-    "@observ33r/object-equals": "^1.1.4",
+    "@observ33r/object-equals": "^1.1.5",
     "@reduxjs/toolkit": "2.8.2",
     "@roarr/browser-log-writer": "^1.3.0",
-    "@xyflow/react": "^12.7.1",
-    "ag-psd": "^28.2.1",
+    "@xyflow/react": "^12.8.2",
+    "ag-psd": "^28.2.2",
     "async-mutex": "^0.5.0",
     "chakra-react-select": "^4.9.2",
     "cmdk": "^1.1.1",
     "compare-versions": "^6.1.1",
-    "dockview": "^4.4.0",
-    "es-toolkit": "^1.39.5",
+    "dockview": "^4.4.1",
+    "es-toolkit": "^1.39.7",
     "filesize": "^10.1.6",
     "fracturedjsonjs": "^4.1.0",
     "framer-motion": "^11.10.0",
-    "i18next": "^25.2.1",
+    "i18next": "^25.3.2",
     "i18next-http-backend": "^3.0.2",
-    "idb-keyval": "^6.2.2",
+    "idb-keyval": "6.2.2",
     "jsondiffpatch": "^0.7.3",
-    "konva": "^9.3.20",
+    "konva": "^9.3.22",
     "linkify-react": "^4.3.1",
     "linkifyjs": "^4.3.1",
     "lru-cache": "^11.1.0",
@@ -83,7 +83,7 @@
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.3.8",
     "react-error-boundary": "^5.0.0",
-    "react-hook-form": "^7.58.1",
+    "react-hook-form": "^7.60.0",
     "react-hotkeys-hook": "4.5.0",
     "react-i18next": "^15.5.3",
     "react-icons": "^5.5.0",
@@ -103,7 +103,7 @@
     "use-debounce": "^10.0.5",
     "use-device-pixel-ratio": "^1.1.2",
     "uuid": "^11.1.0",
-    "zod": "^3.25.67",
+    "zod": "^4.0.5",
     "zod-validation-error": "^3.5.2"
   },
   "peerDependencies": {
@@ -111,39 +111,43 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@invoke-ai/eslint-config-react": "^0.0.14",
-    "@invoke-ai/prettier-config-react": "^0.0.7",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-storysource": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@eslint/js": "^9.31.0",
+    "@storybook/addon-docs": "^9.0.17",
+    "@storybook/addon-links": "^9.0.17",
+    "@storybook/react-vite": "^9.0.17",
     "@types/node": "^22.15.1",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
     "@vitejs/plugin-react-swc": "^3.9.0",
     "@vitest/coverage-v8": "^3.1.2",
     "@vitest/ui": "^3.1.2",
     "concurrently": "^9.1.2",
     "csstype": "^3.1.3",
     "dpdm": "^3.14.0",
-    "eslint": "^8.57.1",
-    "eslint-plugin-i18next": "^6.1.1",
-    "eslint-plugin-path": "^1.3.0",
+    "eslint": "^9.31.0",
+    "eslint-plugin-i18next": "^6.1.2",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-path": "^2.0.3",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "eslint-plugin-storybook": "^9.0.17",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "globals": "^16.3.0",
     "knip": "^5.61.3",
     "openapi-types": "^12.1.3",
     "openapi-typescript": "^7.6.1",
     "prettier": "^3.5.3",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "storybook": "^8.6.12",
+    "rollup-plugin-visualizer": "^6.0.3",
+    "storybook": "^9.0.17",
     "tsafe": "^1.8.5",
     "type-fest": "^4.40.0",
     "typescript": "^5.8.3",
-    "vite": "^7.0.2",
+    "vite": "^7.0.5",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.5.3",
     "vite-plugin-eslint": "^1.8.1",

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

@@ -711,7 +711,8 @@
         "gaussianBlur": "Gaußsche Unschärfe",
         "sendToUpscale": "An Hochskalieren senden",
         "useCpuNoise": "CPU-Rauschen verwenden",
-        "sendToCanvas": "An Leinwand senden"
+        "sendToCanvas": "An Leinwand senden",
+        "disabledNoRasterContent": "Deaktiviert (kein Rasterinhalt)"
     },
     "settings": {
         "displayInProgress": "Zwischenbilder anzeigen",
@@ -789,7 +790,10 @@
         "pasteSuccess": "Eingefügt in {{destination}}",
         "pasteFailed": "Einfügen fehlgeschlagen",
         "unableToCopy": "Kopieren nicht möglich",
-        "unableToCopyDesc_theseSteps": "diese Schritte"
+        "unableToCopyDesc_theseSteps": "diese Schritte",
+        "noRasterLayers": "Keine Rasterebenen gefunden",
+        "noActiveRasterLayers": "Keine aktiven Rasterebenen",
+        "noVisibleRasterLayers": "Keine sichtbaren Rasterebenen"
     },
     "accessibility": {
         "uploadImage": "Bild hochladen",
@@ -847,7 +851,10 @@
         "assetsWithCount_one": "{{count}} in der Sammlung",
         "assetsWithCount_other": "{{count}} in der Sammlung",
         "deletedBoardsCannotbeRestored": "Gelöschte Ordner können nicht wiederhergestellt werden. Die Auswahl von \"Nur Ordner löschen\" verschiebt Bilder in einen unkategorisierten Zustand.",
-        "updateBoardError": "Fehler beim Aktualisieren des Ordners"
+        "updateBoardError": "Fehler beim Aktualisieren des Ordners",
+        "uncategorizedImages": "Nicht kategorisierte Bilder",
+        "deleteAllUncategorizedImages": "Alle nicht kategorisierten Bilder löschen",
+        "deletedImagesCannotBeRestored": "Gelöschte Bilder können nicht wiederhergestellt werden."
     },
     "queue": {
         "status": "Status",
@@ -1194,6 +1201,9 @@
                 "Die Kantengröße des Kohärenzdurchlaufs."
             ],
             "heading": "Kantengröße"
+        },
+        "rasterLayer": {
+            "heading": "Rasterebene"
         }
     },
     "invocationCache": {
@@ -1431,7 +1441,10 @@
         "autoLayout": "Auto Layout",
         "copyShareLink": "Teilen-Link kopieren",
         "download": "Herunterladen",
-        "convertGraph": "Graph konvertieren"
+        "convertGraph": "Graph konvertieren",
+        "filterByTags": "Nach Tags filtern",
+        "yourWorkflows": "Ihre Arbeitsabläufe",
+        "recentlyOpened": "Kürzlich geöffnet"
     },
     "sdxl": {
         "concatPromptStyle": "Verknüpfen von Prompt & Stil",
@@ -1444,7 +1457,15 @@
     "prompt": {
         "noMatchingTriggers": "Keine passenden Trigger",
         "addPromptTrigger": "Prompt-Trigger hinzufügen",
-        "compatibleEmbeddings": "Kompatible Einbettungen"
+        "compatibleEmbeddings": "Kompatible Einbettungen",
+        "replace": "Ersetzen",
+        "insert": "Einfügen",
+        "discard": "Verwerfen",
+        "generateFromImage": "Prompt aus Bild generieren",
+        "expandCurrentPrompt": "Aktuelle Prompt erweitern",
+        "uploadImageForPromptGeneration": "Bild zur Prompt-Generierung hochladen",
+        "expandingPrompt": "Prompt wird erweitert...",
+        "resultTitle": "Prompt-Erweiterung abgeschlossen"
     },
     "ui": {
         "tabs": {
@@ -1573,30 +1594,30 @@
             "newGlobalReferenceImage": "Neues globales Referenzbild",
             "newRegionalReferenceImage": "Neues regionales Referenzbild",
             "newControlLayer": "Neue Kontroll-Ebene",
-            "newRasterLayer": "Neue Raster-Ebene"
+            "newRasterLayer": "Neue Rasterebene"
         },
         "rectangle": "Rechteck",
         "saveCanvasToGallery": "Leinwand in Galerie speichern",
-        "newRasterLayerError": "Problem beim Erstellen einer Raster-Ebene",
+        "newRasterLayerError": "Problem beim Erstellen einer Rasterebene",
         "saveLayerToAssets": "Ebene in Galerie speichern",
         "deleteReferenceImage": "Referenzbild löschen",
         "referenceImage": "Referenzbild",
         "opacity": "Opazität",
         "removeBookmark": "Lesezeichen entfernen",
-        "rasterLayer": "Raster-Ebene",
-        "rasterLayers_withCount_visible": "Raster-Ebenen ({{count}})",
+        "rasterLayer": "Rasterebene",
+        "rasterLayers_withCount_visible": "Rasterebenen ({{count}})",
         "controlLayers_withCount_visible": "Kontroll-Ebenen ({{count}})",
         "deleteSelected": "Ausgewählte löschen",
         "newRegionalReferenceImageError": "Problem beim Erstellen eines regionalen Referenzbilds",
         "newControlLayerOk": "Kontroll-Ebene erstellt",
         "newControlLayerError": "Problem beim Erstellen einer Kontroll-Ebene",
-        "newRasterLayerOk": "Raster-Layer erstellt",
+        "newRasterLayerOk": "Rasterebene erstellt",
         "moveToFront": "Nach vorne bringen",
         "copyToClipboard": "In die Zwischenablage kopieren",
         "controlLayers_withCount_hidden": "Kontroll-Ebenen ({{count}} ausgeblendet)",
         "clearCaches": "Cache leeren",
         "controlLayer": "Kontroll-Ebene",
-        "rasterLayers_withCount_hidden": "Raster-Ebenen ({{count}} ausgeblendet)",
+        "rasterLayers_withCount_hidden": "Rasterebenen ({{count}} ausgeblendet)",
         "transparency": "Transparenz",
         "canvas": "Leinwand",
         "global": "Global",
@@ -1682,7 +1703,14 @@
             "filterType": "Filtertyp",
             "filter": "Filter"
         },
-        "bookmark": "Lesezeichen für Schnell-Umschalten"
+        "bookmark": "Lesezeichen für Schnell-Umschalten",
+        "asRasterLayer": "Als $t(controlLayers.rasterLayer)",
+        "asRasterLayerResize": "Als $t(controlLayers.rasterLayer) (Größe anpassen)",
+        "rasterLayer_withCount_one": "$t(controlLayers.rasterLayer)",
+        "rasterLayer_withCount_other": "Rasterebenen",
+        "newRasterLayer": "Neue $t(controlLayers.rasterLayer)",
+        "showNonRasterLayers": "Nicht-Rasterebenen anzeigen (Umschalt+H)",
+        "hideNonRasterLayers": "Nicht-Rasterebenen ausblenden (Umschalt+H)"
     },
     "upsell": {
         "shareAccess": "Zugang teilen",

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

@@ -470,6 +470,11 @@
             "togglePanels": {
                 "title": "Toggle Panels",
                 "desc": "Show or hide both left and right panels at once."
+            },
+            "selectGenerateTab": {
+                "title": "Select the Generate Tab",
+                "desc": "Selects the Generate tab.",
+                "key": "1"
             }
         },
         "canvas": {
@@ -574,6 +579,10 @@
                 "title": "Transform",
                 "desc": "Transform the selected layer."
             },
+            "invertMask": {
+                "title": "Invert Mask",
+                "desc": "Invert the selected inpaint mask, creating a new mask with opposite transparency."
+            },
             "applyFilter": {
                 "title": "Apply Filter",
                 "desc": "Apply the pending filter to the selected layer."
@@ -599,6 +608,20 @@
             "toggleNonRasterLayers": {
                 "title": "Toggle Non-Raster Layers",
                 "desc": "Show or hide all non-raster layer categories (Control Layers, Inpaint Masks, Regional Guidance)."
+            },
+            "fitBboxToMasks": {
+                "title": "Fit Bbox To Masks",
+                "desc": "Automatically adjust the generation bounding box to fit visible inpaint masks"
+            },
+            "applySegmentAnything": {
+                "title": "Apply Segment Anything",
+                "desc": "Apply the current Segment Anything mask.",
+                "key": "enter"
+            },
+            "cancelSegmentAnything": {
+                "title": "Cancel Segment Anything",
+                "desc": "Cancel the current Segment Anything operation.",
+                "key": "esc"
             }
         },
         "workflows": {
@@ -728,6 +751,10 @@
             "deleteSelection": {
                 "title": "Delete",
                 "desc": "Delete all selected images. By default, you will be prompted to confirm deletion. If the images are currently in use in the app, you will be warned."
+            },
+            "starImage": {
+                "title": "Star/Unstar Image",
+                "desc": "Star or unstar the selected image."
             }
         }
     },
@@ -1125,7 +1152,23 @@
         "addItem": "Add Item",
         "generateValues": "Generate Values",
         "floatRangeGenerator": "Float Range Generator",
-        "integerRangeGenerator": "Integer Range Generator"
+        "integerRangeGenerator": "Integer Range Generator",
+        "layout": {
+            "autoLayout": "Auto Layout",
+            "layeringStrategy": "Layering Strategy",
+            "networkSimplex": "Network Simplex",
+            "longestPath": "Longest Path",
+            "nodeSpacing": "Node Spacing",
+            "layerSpacing": "Layer Spacing",
+            "layoutDirection": "Layout Direction",
+            "layoutDirectionRight": "Right",
+            "layoutDirectionDown": "Down",
+            "alignment": "Node Alignment",
+            "alignmentUL": "Top Left",
+            "alignmentDL": "Bottom Left",
+            "alignmentUR": "Top Right",
+            "alignmentDR": "Bottom Right"
+        }
     },
     "parameters": {
         "aspect": "Aspect",
@@ -1407,7 +1450,15 @@
         "sentToUpscale": "Sent to Upscale",
         "promptGenerationStarted": "Prompt generation started",
         "uploadAndPromptGenerationFailed": "Failed to upload image and generate prompt",
-        "promptExpansionFailed": "We ran into an issue. Please try prompt expansion again."
+        "promptExpansionFailed": "We ran into an issue. Please try prompt expansion again.",
+        "maskInverted": "Mask Inverted",
+        "maskInvertFailed": "Failed to Invert Mask",
+        "noVisibleMasks": "No Visible Masks",
+        "noVisibleMasksDesc": "Create or enable at least one inpaint mask to invert",
+        "noInpaintMaskSelected": "No Inpaint Mask Selected",
+        "noInpaintMaskSelectedDesc": "Select an inpaint mask to invert",
+        "invalidBbox": "Invalid Bounding Box",
+        "invalidBboxDesc": "The bounding box has no valid dimensions"
     },
     "popovers": {
         "clipSkip": {
@@ -1775,6 +1826,20 @@
                 "Structure controls how closely the output image will keep to the layout of the original. Low structure allows major changes, while high structure strictly maintains the original composition and layout."
             ]
         },
+        "tileSize": {
+            "heading": "Tile Size",
+            "paragraphs": [
+                "Controls the size of tiles used during the upscaling process. Larger tiles use more memory but may produce better results.",
+                "SD1.5 models default to 768, while SDXL models default to 1024. Reduce tile size if you encounter memory issues."
+            ]
+        },
+        "tileOverlap": {
+            "heading": "Tile Overlap",
+            "paragraphs": [
+                "Controls the overlap between adjacent tiles during upscaling. Higher overlap values help reduce visible seams between tiles but use more memory.",
+                "The default value of 128 works well for most cases, but you can adjust based on your specific needs and memory constraints."
+            ]
+        },
         "fluxDevLicense": {
             "heading": "Non-Commercial License",
             "paragraphs": [
@@ -1926,6 +1991,7 @@
         "canvas": "Canvas",
         "bookmark": "Bookmark for Quick Switch",
         "fitBboxToLayers": "Fit Bbox To Layers",
+        "fitBboxToMasks": "Fit Bbox To Masks",
         "removeBookmark": "Remove Bookmark",
         "saveCanvasToGallery": "Save Canvas to Gallery",
         "saveBboxToGallery": "Save Bbox to Gallery",
@@ -1962,7 +2028,6 @@
         "recalculateRects": "Recalculate Rects",
         "clipToBbox": "Clip Strokes to Bbox",
         "outputOnlyMaskedRegions": "Output Only Generated Regions",
-        "saveAllImagesToGallery": "Save All Images to Gallery",
         "addLayer": "Add Layer",
         "duplicate": "Duplicate",
         "moveToFront": "Move to Front",
@@ -1991,6 +2056,7 @@
         "rasterLayer": "Raster Layer",
         "controlLayer": "Control Layer",
         "inpaintMask": "Inpaint Mask",
+        "invertMask": "Invert Mask",
         "regionalGuidance": "Regional Guidance",
         "referenceImageRegional": "Reference Image (Regional)",
         "referenceImageGlobal": "Reference Image (Global)",
@@ -2087,9 +2153,9 @@
         "resetCanvasLayers": "Reset Canvas Layers",
         "resetGenerationSettings": "Reset Generation Settings",
         "replaceCurrent": "Replace Current",
-        "controlLayerEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this layer, <PullBboxButton>pull the bounding box into this layer</PullBboxButton>, or draw on the canvas to get started.",
-        "referenceImageEmptyStateWithCanvasOptions": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this Reference Image or <PullBboxButton>pull the bounding box into this Reference Image</PullBboxButton> to get started.",
-        "referenceImageEmptyState": "<UploadButton>Upload an image</UploadButton> or drag an image from the <GalleryButton>gallery</GalleryButton> onto this Reference Image to get started.",
+        "controlLayerEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the gallery onto this layer, <PullBboxButton>pull the bounding box into this layer</PullBboxButton>, or draw on the canvas to get started.",
+        "referenceImageEmptyStateWithCanvasOptions": "<UploadButton>Upload an image</UploadButton>, drag an image from the gallery onto this Reference Image or <PullBboxButton>pull the bounding box into this Reference Image</PullBboxButton> to get started.",
+        "referenceImageEmptyState": "<UploadButton>Upload an image</UploadButton> or drag an image from the gallery onto this Reference Image to get started.",
         "uploadOrDragAnImage": "Drag an image from the gallery or <UploadButton>upload an image</UploadButton>.",
         "imageNoise": "Image Noise",
         "denoiseLimit": "Denoise Limit",
@@ -2332,7 +2398,8 @@
                 "alert": "Preserving Masked Region"
             },
             "saveAllImagesToGallery": {
-                "alert": "Saving All Images to Gallery"
+                "label": "Send New Generations to Gallery",
+                "alert": "Sending new generations to Gallery, bypassing Canvas"
             },
             "isolatedStagingPreview": "Isolated Staging Preview",
             "isolatedPreview": "Isolated Preview",
@@ -2396,6 +2463,9 @@
         "upscaleModel": "Upscale Model",
         "postProcessingModel": "Post-Processing Model",
         "scale": "Scale",
+        "tileControl": "Tile Control",
+        "tileSize": "Tile Size",
+        "tileOverlap": "Tile Overlap",
         "postProcessingMissingModelWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install a post-processing (image to image) model.",
         "missingModelsWarning": "Visit the <LinkComponent>Model Manager</LinkComponent> to install the required models:",
         "mainModelDesc": "Main model (SD1.5 or SDXL architecture)",

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

@@ -2375,65 +2375,8 @@
     },
     "supportVideos": {
         "watch": "Regarder",
-        "videos": {
-            "upscaling": {
-                "description": "Comment améliorer la résolution des images avec les outils d'Invoke pour les agrandir.",
-                "title": "Upscaling"
-            },
-            "howDoIGenerateAndSaveToTheGallery": {
-                "description": "Étapes pour générer et enregistrer des images dans la galerie.",
-                "title": "Comment générer et enregistrer dans la galerie ?"
-            },
-            "usingControlLayersAndReferenceGuides": {
-                "title": "Utilisation des couche de contrôle et des guides de référence",
-                "description": "Apprenez à guider la création de vos images avec des couche de contrôle et des images de référence."
-            },
-            "exploringAIModelsAndConceptAdapters": {
-                "description": "Plongez dans les modèles d'IA et découvrez comment utiliser les adaptateurs de concepts pour un contrôle créatif.",
-                "title": "Exploration des modèles d'IA et des adaptateurs de concepts"
-            },
-            "howDoIUseControlNetsAndControlLayers": {
-                "title": "Comment utiliser les réseaux de contrôle et les couches de contrôle ?",
-                "description": "Apprenez à appliquer des couches de contrôle et des ControlNets à vos images."
-            },
-            "creatingAndComposingOnInvokesControlCanvas": {
-                "description": "Apprenez à composer des images en utilisant le canvas de contrôle d'Invoke.",
-                "title": "Créer et composer sur le canvas de contrôle d'Invoke"
-            },
-            "howDoIEditOnTheCanvas": {
-                "title": "Comment puis-je modifier sur la toile ?",
-                "description": "Guide pour éditer des images directement sur la toile."
-            },
-            "howDoIDoImageToImageTransformation": {
-                "title": "Comment effectuer une transformation d'image à image ?",
-                "description": "Tutoriel sur la réalisation de transformations d'image à image dans Invoke."
-            },
-            "howDoIUseGlobalIPAdaptersAndReferenceImages": {
-                "title": "Comment utiliser les IP Adapters globaux et les images de référence ?",
-                "description": "Introduction à l'ajout d'images de référence et IP Adapters globaux."
-            },
-            "howDoIUseInpaintMasks": {
-                "title": "Comment utiliser les masques d'inpainting ?",
-                "description": "Comment appliquer des masques de retourche pour la correction et la variation d'image."
-            },
-            "creatingYourFirstImage": {
-                "title": "Créer votre première image",
-                "description": "Introduction à la création d'une image à partir de zéro en utilisant les outils d'Invoke."
-            },
-            "understandingImageToImageAndDenoising": {
-                "title": "Comprendre l'Image-à-Image et le Débruitage",
-                "description": "Aperçu des transformations d'image à image et du débruitage dans Invoke."
-            },
-            "howDoIOutpaint": {
-                "title": "Comment effectuer un outpainting ?",
-                "description": "Guide pour l'extension au-delà des bordures de l'image originale."
-            }
-        },
         "gettingStarted": "Commencer",
-        "studioSessionsDesc1": "Consultez le <StudioSessionsPlaylistLink /> pour des approfondissements sur Invoke.",
-        "studioSessionsDesc2": "Rejoignez notre <DiscordLink /> pour participer aux sessions en direct et poser vos questions. Les sessions sont ajoutée dans la playlist la semaine suivante.",
-        "supportVideos": "Vidéos d'assistance",
-        "controlCanvas": "Contrôler la toile"
+        "supportVideos": "Vidéos d'assistance"
     },
     "modelCache": {
         "clear": "Effacer le cache du modèle",

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

@@ -152,7 +152,7 @@
         "image": "immagine",
         "drop": "Rilascia",
         "unstarImage": "Rimuovi contrassegno immagine",
-        "dropOrUpload": "$t(gallery.drop) o carica",
+        "dropOrUpload": "Rilascia o carica",
         "starImage": "Contrassegna l'immagine",
         "dropToUpload": "$t(gallery.drop) per aggiornare",
         "bulkDownloadRequested": "Preparazione del download",
@@ -197,7 +197,8 @@
         "boardsSettings": "Impostazioni Bacheche",
         "imagesSettings": "Impostazioni Immagini Galleria",
         "assets": "Risorse",
-        "images": "Immagini"
+        "images": "Immagini",
+        "useForPromptGeneration": "Usa per generare il prompt"
     },
     "hotkeys": {
         "searchHotkeys": "Cerca tasti di scelta rapida",
@@ -379,6 +380,15 @@
             "applyTransform": {
                 "title": "Applica trasformazione",
                 "desc": "Applica la trasformazione in sospeso al livello selezionato."
+            },
+            "toggleNonRasterLayers": {
+                "desc": "Mostra o nascondi tutte le categorie di livelli non raster (Livelli di controllo, Maschere di Inpaint, Guida regionale).",
+                "title": "Attiva/disattiva livelli non raster"
+            },
+            "settings": {
+                "behavior": "Comportamento",
+                "display": "Mostra",
+                "grid": "Griglia"
             }
         },
         "workflows": {
@@ -623,7 +633,7 @@
         "installingXModels_one": "Installazione di {{count}} modello",
         "installingXModels_many": "Installazione di {{count}} modelli",
         "installingXModels_other": "Installazione di {{count}} modelli",
-        "includesNModels": "Include {{n}} modelli e le loro dipendenze",
+        "includesNModels": "Include {{n}} modelli e le loro dipendenze.",
         "starterBundleHelpText": "Installa facilmente tutti i modelli necessari per iniziare con un modello base, tra cui un modello principale, controlnet, adattatori IP e altro. Selezionando un pacchetto salterai tutti i modelli che hai già installato.",
         "noDefaultSettings": "Nessuna impostazione predefinita configurata per questo modello. Visita Gestione Modelli per aggiungere impostazioni predefinite.",
         "defaultSettingsOutOfSync": "Alcune impostazioni non corrispondono a quelle predefinite del modello:",
@@ -656,7 +666,27 @@
         "manageModels": "Gestione modelli",
         "hfTokenReset": "Ripristino del gettone HF",
         "relatedModels": "Modelli correlati",
-        "showOnlyRelatedModels": "Correlati"
+        "showOnlyRelatedModels": "Correlati",
+        "installedModelsCount": "{{installed}} di {{total}} modelli installati.",
+        "allNModelsInstalled": "Tutti i {{count}} modelli installati",
+        "nToInstall": "{{count}} da installare",
+        "nAlreadyInstalled": "{{count}} già installati",
+        "bundleAlreadyInstalled": "Pacchetto già installato",
+        "bundleAlreadyInstalledDesc": "Tutti i modelli nel pacchetto {{bundleName}} sono già installati.",
+        "launchpad": {
+            "description": "Per utilizzare la maggior parte delle funzionalità della piattaforma, Invoke richiede l'installazione di modelli. Scegli tra le opzioni di installazione manuale o esplora i modelli di avvio selezionati.",
+            "manualInstall": "Installazione manuale",
+            "urlDescription": "Installa i modelli da un URL o da un percorso file locale. Perfetto per modelli specifici che desideri aggiungere.",
+            "huggingFaceDescription": "Esplora e installa i modelli direttamente dai repository di HuggingFace.",
+            "scanFolderDescription": "Esegui la scansione di una cartella locale per rilevare e installare automaticamente i modelli.",
+            "recommendedModels": "Modelli consigliati",
+            "exploreStarter": "Oppure sfoglia tutti i modelli iniziali disponibili",
+            "welcome": "Benvenuti in Gestione Modelli",
+            "quickStart": "Pacchetti di avvio rapido",
+            "bundleDescription": "Ogni pacchetto include modelli essenziali per ogni famiglia di modelli e modelli base selezionati per iniziare.",
+            "browseAll": "Oppure scopri tutti i modelli disponibili:"
+        },
+        "launchpadTab": "Rampa di lancio"
     },
     "parameters": {
         "images": "Immagini",
@@ -742,7 +772,10 @@
             "modelIncompatibleBboxHeight": "L'altezza del riquadro è {{height}} ma {{model}} richiede multipli di {{multiple}}",
             "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."
+            "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",
+            "promptExpansionResultPending": "Accetta o ignora il risultato dell'espansione del prompt",
+            "promptExpansionPending": "Espansione del prompt in corso"
         },
         "useCpuNoise": "Usa la CPU per generare rumore",
         "iterations": "Iterazioni",
@@ -884,7 +917,26 @@
         "problemUnpublishingWorkflowDescription": "Si è verificato un problema durante l'annullamento della pubblicazione del flusso di lavoro. Riprova.",
         "workflowUnpublished": "Flusso di lavoro non pubblicato",
         "chatGPT4oIncompatibleGenerationMode": "ChatGPT 4o supporta solo la conversione da testo a immagine e da immagine a immagine. Utilizza altri modelli per le attività di Inpainting e Outpainting.",
-        "imagenIncompatibleGenerationMode": "Google {{model}} supporta solo la generazione da testo a immagine. Utilizza altri modelli per le attività di conversione da immagine a immagine, inpainting e outpainting."
+        "imagenIncompatibleGenerationMode": "Google {{model}} supporta solo la generazione da testo a immagine. Utilizza altri modelli per le attività di conversione da immagine a immagine, inpainting e outpainting.",
+        "noRasterLayers": "Nessun livello raster trovato",
+        "noRasterLayersDesc": "Crea almeno un livello raster da esportare in PSD",
+        "noActiveRasterLayers": "Nessun livello raster attivo",
+        "noActiveRasterLayersDesc": "Abilitare almeno un livello raster da esportare in PSD",
+        "noVisibleRasterLayers": "Nessun livello raster visibile",
+        "noVisibleRasterLayersDesc": "Abilitare almeno un livello raster da esportare in PSD",
+        "invalidCanvasDimensions": "Dimensioni della tela non valide",
+        "canvasTooLarge": "Tela troppo grande",
+        "canvasTooLargeDesc": "Le dimensioni della tela superano le dimensioni massime consentite per l'esportazione in formato PSD. Riduci la larghezza e l'altezza totali della tela e riprova.",
+        "failedToProcessLayers": "Impossibile elaborare i livelli",
+        "psdExportSuccess": "Esportazione PSD completata",
+        "psdExportSuccessDesc": "Esportazione riuscita di {{count}} livelli nel file PSD",
+        "problemExportingPSD": "Problema durante l'esportazione PSD",
+        "noValidLayerAdapters": "Nessun adattatore di livello valido trovato",
+        "fluxKontextIncompatibleGenerationMode": "FLUX Kontext non supporta la generazione di immagini posizionate sulla tela. Riprova utilizzando la sezione Immagine di riferimento e disattiva tutti i livelli raster.",
+        "canvasManagerNotAvailable": "Gestione tela non disponibile",
+        "promptExpansionFailed": "Abbiamo riscontrato un problema. Riprova a eseguire l'espansione del prompt.",
+        "uploadAndPromptGenerationFailed": "Impossibile caricare l'immagine e generare il prompt",
+        "promptGenerationStarted": "Generazione del prompt avviata"
     },
     "accessibility": {
         "invokeProgressBar": "Barra di avanzamento generazione",
@@ -1225,7 +1277,8 @@
         "addLora": "Aggiungi LoRA",
         "defaultVAE": "VAE predefinito",
         "concepts": "Concetti",
-        "lora": "LoRA"
+        "lora": "LoRA",
+        "noCompatibleLoRAs": "Nessun LoRA compatibile"
     },
     "invocationCache": {
         "disable": "Disabilita",
@@ -1683,6 +1736,20 @@
             "paragraphs": [
                 "Controlla quale area viene modificata, in base all'intensità di riduzione del rumore."
             ]
+        },
+        "tileSize": {
+            "heading": "Dimensione riquadro",
+            "paragraphs": [
+                "Controlla la dimensione dei riquadri utilizzati durante il processo di ampliamento. Riquadri più grandi consumano più memoria, ma possono produrre risultati migliori.",
+                "I modelli SD1.5 hanno un valore predefinito di 768, mentre i modelli SDXL hanno un valore predefinito di 1024. Ridurre le dimensioni dei riquadri in caso di problemi di memoria."
+            ]
+        },
+        "tileOverlap": {
+            "heading": "Sovrapposizione riquadri",
+            "paragraphs": [
+                "Controlla la sovrapposizione tra riquadri adiacenti durante l'ampliamento. Valori di sovrapposizione più elevati aiutano a ridurre le giunzioni visibili tra i riquadri, ma consuma più memoria.",
+                "Il valore predefinito di 128 è adatto alla maggior parte dei casi, ma è possibile modificarlo in base alle proprie esigenze specifiche e ai limiti di memoria."
+            ]
         }
     },
     "sdxl": {
@@ -1730,7 +1797,7 @@
         "parameterSet": "Parametro {{parameter}} impostato",
         "parsingFailed": "Analisi non riuscita",
         "recallParameter": "Richiama {{label}}",
-        "canvasV2Metadata": "Tela",
+        "canvasV2Metadata": "Livelli Tela",
         "guidance": "Guida",
         "seamlessXAxis": "Asse X senza giunte",
         "seamlessYAxis": "Asse Y senza giunte",
@@ -1901,7 +1968,16 @@
     "prompt": {
         "compatibleEmbeddings": "Incorporamenti compatibili",
         "addPromptTrigger": "Aggiungi Trigger nel prompt",
-        "noMatchingTriggers": "Nessun Trigger corrispondente"
+        "noMatchingTriggers": "Nessun Trigger corrispondente",
+        "discard": "Scarta",
+        "insert": "Inserisci",
+        "replace": "Sostituisci",
+        "resultSubtitle": "Scegli come gestire il prompt espanso:",
+        "resultTitle": "Espansione del prompt completata",
+        "expandingPrompt": "Espansione del prompt...",
+        "uploadImageForPromptGeneration": "Carica l'immagine per la generazione del prompt",
+        "expandCurrentPrompt": "Espandi il prompt corrente",
+        "generateFromImage": "Genera prompt dall'immagine"
     },
     "controlLayers": {
         "addLayer": "Aggiungi Livello",
@@ -2212,7 +2288,11 @@
                 "label": "Preserva la regione mascherata"
             },
             "isolatedLayerPreview": "Anteprima livello isolato",
-            "isolatedLayerPreviewDesc": "Se visualizzare solo questo livello quando si eseguono operazioni come il filtraggio o la trasformazione."
+            "isolatedLayerPreviewDesc": "Se visualizzare solo questo livello quando si eseguono operazioni come il filtraggio o la trasformazione.",
+            "saveAllImagesToGallery": {
+                "alert": "Invia le nuove generazioni alla Galleria, bypassando la Tela",
+                "label": "Invia le nuove generazioni alla Galleria"
+            }
         },
         "transform": {
             "reset": "Reimposta",
@@ -2262,7 +2342,8 @@
             "newRegionalGuidance": "Nuova Guida Regionale",
             "copyToClipboard": "Copia negli appunti",
             "copyCanvasToClipboard": "Copia la tela negli appunti",
-            "copyBboxToClipboard": "Copia il riquadro di delimitazione negli appunti"
+            "copyBboxToClipboard": "Copia il riquadro di delimitazione negli appunti",
+            "newResizedControlLayer": "Nuovo livello di controllo ridimensionato"
         },
         "newImg2ImgCanvasFromImage": "Nuova Immagine da immagine",
         "copyRasterLayerTo": "Copia $t(controlLayers.rasterLayer) in",
@@ -2299,10 +2380,10 @@
         "replaceCurrent": "Sostituisci corrente",
         "mergeDown": "Unire in basso",
         "mergingLayers": "Unione dei livelli",
-        "controlLayerEmptyState": "<UploadButton>Carica un'immagine</UploadButton>, trascina un'immagine dalla <GalleryButton>galleria</GalleryButton> su questo livello, <PullBboxButton>trascina il riquadro di delimitazione in questo livello</PullBboxButton> oppure disegna sulla tela per iniziare.",
+        "controlLayerEmptyState": "<UploadButton>Carica un'immagine</UploadButton>, trascina un'immagine dalla galleria su questo livello, <PullBboxButton>trascina il riquadro di delimitazione in questo livello</PullBboxButton> oppure disegna sulla tela per iniziare.",
         "useImage": "Usa immagine",
         "resetGenerationSettings": "Ripristina impostazioni di generazione",
-        "referenceImageEmptyState": "Per iniziare, <UploadButton>carica un'immagine</UploadButton>, trascina un'immagine dalla <GalleryButton>galleria</GalleryButton>, oppure <PullBboxButton>trascina il riquadro di delimitazione in questo livello</PullBboxButton> su questo livello.",
+        "referenceImageEmptyState": "Per iniziare, <UploadButton>carica un'immagine</UploadButton> oppure trascina un'immagine dalla galleria su questa Immagine di riferimento.",
         "asRasterLayer": "Come $t(controlLayers.rasterLayer)",
         "asRasterLayerResize": "Come $t(controlLayers.rasterLayer) (Ridimensiona)",
         "asControlLayer": "Come $t(controlLayers.controlLayer)",
@@ -2352,7 +2433,18 @@
         "denoiseLimit": "Limite di riduzione del rumore",
         "addImageNoise": "Aggiungi $t(controlLayers.imageNoise)",
         "addDenoiseLimit": "Aggiungi $t(controlLayers.denoiseLimit)",
-        "imageNoise": "Rumore dell'immagine"
+        "imageNoise": "Rumore dell'immagine",
+        "exportCanvasToPSD": "Esporta la tela in PSD",
+        "ruleOfThirds": "Mostra la regola dei terzi",
+        "showNonRasterLayers": "Mostra livelli non raster (Shift+H)",
+        "hideNonRasterLayers": "Nascondi livelli non raster (Shift+H)",
+        "referenceImageEmptyStateWithCanvasOptions": "<UploadButton>Carica un'immagine</UploadButton>, trascina un'immagine dalla galleria su questa immagine di riferimento o <PullBboxButton>trascina il riquadro di delimitazione in questa immagine di riferimento</PullBboxButton> per iniziare.",
+        "uploadOrDragAnImage": "Trascina un'immagine dalla galleria o <UploadButton>carica un'immagine</UploadButton>.",
+        "autoSwitch": {
+            "switchOnStart": "All'inizio",
+            "switchOnFinish": "Alla fine",
+            "off": "Spento"
+        }
     },
     "ui": {
         "tabs": {
@@ -2366,6 +2458,55 @@
             "upscaling": "Amplia",
             "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)",
             "gallery": "Galleria"
+        },
+        "launchpad": {
+            "workflowsTitle": "Approfondisci i flussi di lavoro.",
+            "upscalingTitle": "Amplia e aggiungi dettagli.",
+            "canvasTitle": "Modifica e perfeziona sulla tela.",
+            "generateTitle": "Genera immagini da prompt testuali.",
+            "modelGuideText": "Vuoi scoprire quali prompt funzionano meglio per ciascun modello?",
+            "modelGuideLink": "Consulta la nostra guida ai modelli.",
+            "workflows": {
+                "description": "I flussi di lavoro sono modelli riutilizzabili che automatizzano le attività di generazione delle immagini, consentendo di eseguire rapidamente operazioni complesse e di ottenere risultati coerenti.",
+                "learnMoreLink": "Scopri di più sulla creazione di flussi di lavoro",
+                "browseTemplates": {
+                    "title": "Sfoglia i modelli di flusso di lavoro",
+                    "description": "Scegli tra flussi di lavoro predefiniti per le attività comuni"
+                },
+                "createNew": {
+                    "title": "Crea un nuovo flusso di lavoro",
+                    "description": "Avvia un nuovo flusso di lavoro da zero"
+                },
+                "loadFromFile": {
+                    "title": "Carica flusso di lavoro da file",
+                    "description": "Carica un flusso di lavoro per iniziare con una configurazione esistente"
+                }
+            },
+            "upscaling": {
+                "uploadImage": {
+                    "title": "Carica l'immagine da ampliare",
+                    "description": "Fai clic o trascina un'immagine per ingrandirla (JPG, PNG, WebP fino a 100 MB)"
+                },
+                "replaceImage": {
+                    "title": "Sostituisci l'immagine corrente",
+                    "description": "Fai clic o trascina una nuova immagine per sostituire quella corrente"
+                },
+                "imageReady": {
+                    "title": "Immagine pronta",
+                    "description": "Premere Invoke per iniziare l'ampliamento"
+                },
+                "readyToUpscale": {
+                    "title": "Pronto per ampliare!",
+                    "description": "Configura le impostazioni qui sotto, quindi fai clic sul pulsante Invoke per iniziare ad ampliare l'immagine."
+                },
+                "upscaleModel": "Modello per l'ampliamento",
+                "model": "Modello",
+                "scale": "Scala",
+                "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."
+                }
+            }
         }
     },
     "upscaling": {
@@ -2386,7 +2527,10 @@
         "exceedsMaxSizeDetails": "Il limite massimo di ampliamento è {{maxUpscaleDimension}}x{{maxUpscaleDimension}} pixel. Prova un'immagine più piccola o diminuisci la scala selezionata.",
         "upscale": "Amplia",
         "incompatibleBaseModel": "Architettura del modello principale non supportata per l'ampliamento",
-        "incompatibleBaseModelDesc": "L'ampliamento è supportato solo per i modelli di architettura SD1.5 e SDXL. Cambia il modello principale per abilitare l'ampliamento."
+        "incompatibleBaseModelDesc": "L'ampliamento è supportato solo per i modelli di architettura SD1.5 e SDXL. Cambia il modello principale per abilitare l'ampliamento.",
+        "tileControl": "Controllo del riquadro",
+        "tileSize": "Dimensione del riquadro",
+        "tileOverlap": "Sovrapposizione riquadro"
     },
     "upsell": {
         "inviteTeammates": "Invita collaboratori",
@@ -2436,7 +2580,8 @@
         "positivePromptColumn": "'prompt' o 'positive_prompt'",
         "noTemplates": "Nessun modello",
         "acceptedColumnsKeys": "Colonne/chiavi accettate:",
-        "promptTemplateCleared": "Modello di prompt cancellato"
+        "promptTemplateCleared": "Modello di prompt cancellato",
+        "togglePromptPreviews": "Attiva/disattiva le anteprime dei prompt"
     },
     "newUserExperience": {
         "gettingStartedSeries": "Desideri maggiori informazioni? Consulta la nostra <LinkComponent>Getting Started Series</LinkComponent> per suggerimenti su come sfruttare appieno il potenziale di Invoke Studio.",
@@ -2452,8 +2597,9 @@
         "watchRecentReleaseVideos": "Guarda i video su questa versione",
         "watchUiUpdatesOverview": "Guarda le novità dell'interfaccia",
         "items": [
-            "Inpainting: livelli di rumore per maschera e limiti di denoise.",
-            "Canvas: proporzioni più intelligenti per SDXL e scorrimento e zoom migliorati."
+            "Genera immagini più velocemente con le nuove Rampe di lancio e una scheda Genera semplificata.",
+            "Modifica con prompt utilizzando Flux Kontext Dev.",
+            "Esporta in PSD, nascondi sovrapposizioni in blocco, organizza modelli e immagini: il tutto in un'interfaccia riprogettata e pensata per il controllo."
         ]
     },
     "system": {
@@ -2485,64 +2631,18 @@
     "supportVideos": {
         "gettingStarted": "Iniziare",
         "supportVideos": "Video di supporto",
-        "videos": {
-            "usingControlLayersAndReferenceGuides": {
-                "title": "Utilizzo di livelli di controllo e guide di riferimento",
-                "description": "Scopri come guidare la creazione delle tue immagini con livelli di controllo e immagini di riferimento."
-            },
-            "creatingYourFirstImage": {
-                "description": "Introduzione alla creazione di un'immagine da zero utilizzando gli strumenti di Invoke.",
-                "title": "Creazione della tua prima immagine"
-            },
-            "understandingImageToImageAndDenoising": {
-                "description": "Panoramica delle trasformazioni immagine-a-immagine e della riduzione del rumore in Invoke.",
-                "title": "Comprendere immagine-a-immagine e riduzione del rumore"
-            },
-            "howDoIDoImageToImageTransformation": {
-                "description": "Tutorial su come eseguire trasformazioni da immagine a immagine in Invoke.",
-                "title": "Come si esegue la trasformazione da immagine-a-immagine?"
-            },
-            "howDoIUseInpaintMasks": {
-                "title": "Come si usano le maschere Inpaint?",
-                "description": "Come applicare maschere inpaint per la correzione e la variazione delle immagini."
-            },
-            "howDoIOutpaint": {
-                "description": "Guida all'outpainting oltre i confini dell'immagine originale.",
-                "title": "Come posso eseguire l'outpainting?"
-            },
-            "exploringAIModelsAndConceptAdapters": {
-                "description": "Approfondisci i modelli di intelligenza artificiale e scopri come utilizzare gli adattatori concettuali per il controllo creativo.",
-                "title": "Esplorazione dei modelli di IA e degli adattatori concettuali"
-            },
-            "upscaling": {
-                "title": "Ampliamento",
-                "description": "Come ampliare le immagini con gli strumenti di Invoke per migliorarne la risoluzione."
-            },
-            "creatingAndComposingOnInvokesControlCanvas": {
-                "description": "Impara a comporre immagini utilizzando la tela di controllo di Invoke.",
-                "title": "Creare e comporre sulla tela di controllo di Invoke"
-            },
-            "howDoIGenerateAndSaveToTheGallery": {
-                "description": "Passaggi per generare e salvare le immagini nella galleria.",
-                "title": "Come posso generare e salvare nella Galleria?"
-            },
-            "howDoIEditOnTheCanvas": {
-                "title": "Come posso apportare modifiche sulla tela?",
-                "description": "Guida alla modifica delle immagini direttamente sulla tela."
-            },
-            "howDoIUseControlNetsAndControlLayers": {
-                "title": "Come posso utilizzare le Reti di Controllo e i Livelli di Controllo?",
-                "description": "Impara ad applicare livelli di controllo e reti di controllo alle tue immagini."
-            },
-            "howDoIUseGlobalIPAdaptersAndReferenceImages": {
-                "title": "Come si utilizzano gli adattatori IP globali e le immagini di riferimento?",
-                "description": "Introduzione all'aggiunta di immagini di riferimento e adattatori IP globali."
-            }
-        },
-        "controlCanvas": "Tela di Controllo",
         "watch": "Guarda",
-        "studioSessionsDesc1": "Dai un'occhiata a <StudioSessionsPlaylistLink /> per approfondimenti su Invoke.",
-        "studioSessionsDesc2": "Unisciti al nostro <DiscordLink /> per partecipare alle sessioni live e fare domande. Le sessioni vengono caricate sulla playlist la settimana successiva."
+        "studioSessionsDesc": "Unisciti al nostro <DiscordLink /> per partecipare alle sessioni live e porre domande. Le sessioni vengono caricate nella playlist la settimana successiva.",
+        "videos": {
+            "gettingStarted": {
+                "title": "Introduzione a Invoke",
+                "description": "Serie video completa che copre tutto ciò che devi sapere per iniziare a usare Invoke, dalla creazione della tua prima immagine alle tecniche avanzate."
+            },
+            "studioSessions": {
+                "title": "Sessioni in studio",
+                "description": "Sessioni approfondite che esplorano le funzionalità avanzate di Invoke, i flussi di lavoro creativi e le discussioni della community."
+            }
+        }
     },
     "modelCache": {
         "clear": "Cancella la cache del modello",

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

@@ -141,7 +141,7 @@
         "loading": "ロード中",
         "currentlyInUse": "この画像は現在下記の機能を使用しています:",
         "drop": "ドロップ",
-        "dropOrUpload": "$t(gallery.drop) またはアップロード",
+        "dropOrUpload": "ドロップまたはアップロード",
         "deleteImage_other": "画像 {{count}} 枚を削除",
         "deleteImagePermanent": "削除された画像は復元できません。",
         "download": "ダウンロード",
@@ -193,7 +193,8 @@
         "images": "画像",
         "assetsTab": "プロジェクトで使用するためにアップロードされたファイル。",
         "imagesTab": "Invoke内で作成および保存された画像。",
-        "assets": "アセット"
+        "assets": "アセット",
+        "useForPromptGeneration": "プロンプト生成に使用する"
     },
     "hotkeys": {
         "searchHotkeys": "ホットキーを検索",
@@ -363,6 +364,16 @@
             "selectRectTool": {
                 "title": "矩形ツール",
                 "desc": "矩形ツールを選択します。"
+            },
+            "settings": {
+                "behavior": "行動",
+                "display": "ディスプレイ",
+                "grid": "グリッド",
+                "debug": "デバッグ"
+            },
+            "toggleNonRasterLayers": {
+                "title": "非ラスターレイヤーの切り替え",
+                "desc": "ラスター以外のレイヤー カテゴリ (コントロール レイヤー、インペイント マスク、地域ガイダンス) を表示または非表示にします。"
             }
         },
         "workflows": {
@@ -630,7 +641,7 @@
         "restoreDefaultSettings": "クリックするとモデルのデフォルト設定が使用されます.",
         "hfTokenSaved": "ハギングフェイストークンを保存しました",
         "imageEncoderModelId": "画像エンコーダーモデルID",
-        "includesNModels": "{{n}}個のモデルとこれらの依存関係を含みます",
+        "includesNModels": "{{n}}個のモデルとこれらの依存関係を含みます。",
         "learnMoreAboutSupportedModels": "私たちのサポートしているモデルについて更に学ぶ",
         "modelImageUpdateFailed": "モデル画像アップデート失敗",
         "scanFolder": "スキャンフォルダ",
@@ -654,7 +665,30 @@
         "manageModels": "モデル管理",
         "hfTokenReset": "ハギングフェイストークンリセット",
         "relatedModels": "関連のあるモデル",
-        "showOnlyRelatedModels": "関連している"
+        "showOnlyRelatedModels": "関連している",
+        "installedModelsCount": "{{total}} モデルのうち {{installed}} 個がインストールされています。",
+        "allNModelsInstalled": "{{count}} 個のモデルがすべてインストールされています",
+        "nToInstall": "{{count}}個をインストールする",
+        "nAlreadyInstalled": "{{count}} 個すでにインストールされています",
+        "bundleAlreadyInstalled": "バンドルがすでにインストールされています",
+        "bundleAlreadyInstalledDesc": "{{bundleName}} バンドル内のすべてのモデルはすでにインストールされています。",
+        "launchpadTab": "ランチパッド",
+        "launchpad": {
+            "welcome": "モデルマネジメントへようこそ",
+            "description": "Invoke プラットフォームのほとんどの機能を利用するには、モデルのインストールが必要です。手動インストールオプションから選択するか、厳選されたスターターモデルをご覧ください。",
+            "manualInstall": "マニュアルインストール",
+            "urlDescription": "URLまたはローカルファイルパスからモデルをインストールします。特定のモデルを追加したい場合に最適です。",
+            "huggingFaceDescription": "HuggingFace リポジトリからモデルを直接参照してインストールします。",
+            "scanFolderDescription": "ローカルフォルダをスキャンしてモデルを自動的に検出し、インストールします。",
+            "recommendedModels": "推奨モデル",
+            "exploreStarter": "または、利用可能なすべてのスターターモデルを参照してください",
+            "quickStart": "クイックスタートバンドル",
+            "bundleDescription": "各バンドルには各モデルファミリーの必須モデルと、開始するための厳選されたベースモデルが含まれています。",
+            "browseAll": "または、利用可能なすべてのモデルを参照してください。",
+            "stableDiffusion15": "Stable Diffusion1.5",
+            "sdxl": "SDXL",
+            "fluxDev": "FLUX.1 dev"
+        }
     },
     "parameters": {
         "images": "画像",
@@ -720,7 +754,10 @@
             "fluxModelIncompatibleBboxHeight": "$t(parameters.invoke.fluxRequiresDimensionsToBeMultipleOf16), bboxの高さは{{height}}です",
             "noFLUXVAEModelSelected": "FLUX生成にVAEモデルが選択されていません",
             "noT5EncoderModelSelected": "FLUX生成にT5エンコーダモデルが選択されていません",
-            "modelDisabledForTrial": "{{modelName}} を使用した生成はトライアルアカウントではご利用いただけません.アカウント設定にアクセスしてアップグレードしてください。"
+            "modelDisabledForTrial": "{{modelName}} を使用した生成はトライアルアカウントではご利用いただけません.アカウント設定にアクセスしてアップグレードしてください。",
+            "fluxKontextMultipleReferenceImages": "Flux Kontext では一度に 1 つの参照画像しか使用できません",
+            "promptExpansionPending": "プロンプト拡張が進行中",
+            "promptExpansionResultPending": "プロンプト拡張結果を受け入れるか破棄してください"
         },
         "aspect": "縦横比",
         "lockAspectRatio": "縦横比を固定",
@@ -875,7 +912,26 @@
         "imageNotLoadedDesc": "画像を見つけられません",
         "parameterNotSetDesc": "{{parameter}}を呼び出せません",
         "chatGPT4oIncompatibleGenerationMode": "ChatGPT 4oは,テキストから画像への生成と画像から画像への生成のみをサポートしています.インペインティングおよび,アウトペインティングタスクには他のモデルを使用してください.",
-        "imagenIncompatibleGenerationMode": "Google {{model}} はテキストから画像への変換のみをサポートしています. 画像から画像への変換, インペインティング,アウトペインティングのタスクには他のモデルを使用してください."
+        "imagenIncompatibleGenerationMode": "Google {{model}} はテキストから画像への変換のみをサポートしています. 画像から画像への変換, インペインティング,アウトペインティングのタスクには他のモデルを使用してください.",
+        "noRasterLayers": "ラスターレイヤーが見つかりません",
+        "noRasterLayersDesc": "PSDにエクスポートするには、少なくとも1つのラスターレイヤーを作成します",
+        "noActiveRasterLayers": "アクティブなラスターレイヤーがありません",
+        "noActiveRasterLayersDesc": "PSD にエクスポートするには、少なくとも 1 つのラスター レイヤーを有効にします",
+        "noVisibleRasterLayers": "表示されるラスター レイヤーがありません",
+        "noVisibleRasterLayersDesc": "PSD にエクスポートするには、少なくとも 1 つのラスター レイヤーを有効にします",
+        "invalidCanvasDimensions": "キャンバスのサイズが無効です",
+        "canvasTooLarge": "キャンバスが大きすぎます",
+        "canvasTooLargeDesc": "キャンバスのサイズがPSDエクスポートの最大許容サイズを超えています。キャンバス全体の幅と高さを小さくしてから、もう一度お試しください。",
+        "failedToProcessLayers": "レイヤーの処理に失敗しました",
+        "psdExportSuccess": "PSDエクスポート完了",
+        "psdExportSuccessDesc": "{{count}} 個のレイヤーを PSD ファイルに正常にエクスポートしました",
+        "problemExportingPSD": "PSD のエクスポート中に問題が発生しました",
+        "canvasManagerNotAvailable": "キャンバスマネージャーは利用できません",
+        "noValidLayerAdapters": "有効なレイヤーアダプタが見つかりません",
+        "fluxKontextIncompatibleGenerationMode": "Flux Kontext はテキストから画像への変換のみをサポートしています。画像から画像への変換、インペインティング、アウトペインティングのタスクには他のモデルを使用してください。",
+        "promptGenerationStarted": "プロンプト生成が開始されました",
+        "uploadAndPromptGenerationFailed": "画像のアップロードとプロンプトの生成に失敗しました",
+        "promptExpansionFailed": "プロンプト拡張に失敗しました"
     },
     "accessibility": {
         "invokeProgressBar": "進捗バー",
@@ -1014,7 +1070,8 @@
         "lora": "LoRA",
         "defaultVAE": "デフォルトVAE",
         "noLoRAsInstalled": "インストールされているLoRAはありません",
-        "noRefinerModelsInstalled": "インストールされているSDXLリファイナーモデルはありません"
+        "noRefinerModelsInstalled": "インストールされているSDXLリファイナーモデルはありません",
+        "noCompatibleLoRAs": "互換性のあるLoRAはありません"
     },
     "nodes": {
         "addNode": "ノードを追加",
@@ -1708,7 +1765,16 @@
     "prompt": {
         "addPromptTrigger": "プロンプトトリガーを追加",
         "compatibleEmbeddings": "互換性のある埋め込み",
-        "noMatchingTriggers": "一致するトリガーがありません"
+        "noMatchingTriggers": "一致するトリガーがありません",
+        "generateFromImage": "画像からプロンプトを生成する",
+        "expandCurrentPrompt": "現在のプロンプトを展開",
+        "uploadImageForPromptGeneration": "プロンプト生成用の画像をアップロードする",
+        "expandingPrompt": "プロンプトを展開しています...",
+        "resultTitle": "プロンプト拡張完了",
+        "resultSubtitle": "拡張プロンプトの処理方法を選択します:",
+        "replace": "交換する",
+        "insert": "挿入する",
+        "discard": "破棄する"
     },
     "ui": {
         "tabs": {
@@ -1716,7 +1782,61 @@
             "canvas": "キャンバス",
             "workflows": "ワークフロー",
             "models": "モデル",
-            "gallery": "ギャラリー"
+            "gallery": "ギャラリー",
+            "generation": "生成",
+            "workflowsTab": "$t(ui.tabs.workflows) $t(common.tab)",
+            "modelsTab": "$t(ui.tabs.models) $t(common.tab)",
+            "upscaling": "アップスケーリング",
+            "upscalingTab": "$t(ui.tabs.upscaling) $t(common.tab)"
+        },
+        "launchpad": {
+            "upscaling": {
+                "model": "モデル",
+                "scale": "スケール",
+                "helpText": {
+                    "promptAdvice": "アップスケールする際は、媒体とスタイルを説明するプロンプトを使用してください。画像内の具体的なコンテンツの詳細を説明することは避けてください。",
+                    "styleAdvice": "アップスケーリングは、画像の全体的なスタイルに最適です。"
+                },
+                "uploadImage": {
+                    "title": "アップスケール用の画像をアップロードする",
+                    "description": "アップスケールするには、画像をクリックまたはドラッグします（JPG、PNG、WebP、最大100MB）"
+                },
+                "replaceImage": {
+                    "title": "現在の画像を置き換える",
+                    "description": "新しい画像をクリックまたはドラッグして、現在の画像を置き換えます"
+                },
+                "imageReady": {
+                    "title": "画像準備完了",
+                    "description": "アップスケールを開始するにはInvokeを押してください"
+                },
+                "readyToUpscale": {
+                    "title": "アップスケールの準備ができました!",
+                    "description": "以下の設定を構成し、「Invoke」ボタンをクリックして画像のアップスケールを開始します。"
+                },
+                "upscaleModel": "アップスケールモデル"
+            },
+            "workflowsTitle": "ワークフローを詳しく見てみましょう。",
+            "upscalingTitle": "アップスケールして詳細を追加します。",
+            "canvasTitle": "キャンバス上で編集および調整します。",
+            "generateTitle": "テキストプロンプトから画像を生成します。",
+            "modelGuideText": "各モデルに最適なプロンプトを知りたいですか?",
+            "modelGuideLink": "モデルガイドをご覧ください。",
+            "workflows": {
+                "description": "ワークフローは、画像生成タスクを自動化する再利用可能なテンプレートであり、複雑な操作を迅速に実行して一貫した結果を得ることができます。",
+                "learnMoreLink": "ワークフローの作成について詳しく見る",
+                "browseTemplates": {
+                    "title": "ワークフローテンプレートを参照する",
+                    "description": "一般的なタスク用にあらかじめ構築されたワークフローから選択する"
+                },
+                "createNew": {
+                    "title": "新規ワークフローを作成する",
+                    "description": "新しいワークフローをゼロから始める"
+                },
+                "loadFromFile": {
+                    "title": "ファイルからワークフローを読み込む",
+                    "description": "既存の設定から開始するためのワークフローをアップロードする"
+                }
+            }
         }
     },
     "controlLayers": {
@@ -1732,7 +1852,16 @@
             "cropCanvasToBbox": "キャンバスをバウンディングボックスでクロップ",
             "newGlobalReferenceImage": "新規全域参照画像",
             "newRegionalReferenceImage": "新規領域参照画像",
-            "canvasGroup": "キャンバス"
+            "canvasGroup": "キャンバス",
+            "saveToGalleryGroup": "ギャラリーに保存",
+            "saveCanvasToGallery": "キャンバスをギャラリーに保存",
+            "saveBboxToGallery": "Bボックスをギャラリーに保存",
+            "newControlLayer": "新規コントロールレイヤー",
+            "newRasterLayer": "新規ラスターレイヤー",
+            "newInpaintMask": "新規インペイントマスク",
+            "copyToClipboard": "クリップボードにコピー",
+            "copyCanvasToClipboard": "キャンバスをクリップボードにコピー",
+            "copyBboxToClipboard": "Bボックスをクリップボードにコピー"
         },
         "regionalGuidance": "領域ガイダンス",
         "globalReferenceImage": "全域参照画像",
@@ -1743,7 +1872,11 @@
             "transform": "変形",
             "apply": "適用",
             "cancel": "キャンセル",
-            "reset": "リセット"
+            "reset": "リセット",
+            "fitMode": "フィットモード",
+            "fitModeContain": "含む",
+            "fitModeCover": "カバー",
+            "fitModeFill": "満たす"
         },
         "cropLayerToBbox": "レイヤーをバウンディングボックスでクロップ",
         "convertInpaintMaskTo": "$t(controlLayers.inpaintMask)を変換",
@@ -1754,7 +1887,8 @@
             "rectangle": "矩形",
             "move": "移動",
             "eraser": "消しゴム",
-            "bbox": "Bbox"
+            "bbox": "Bbox",
+            "view": "ビュー"
         },
         "saveCanvasToGallery": "キャンバスをギャラリーに保存",
         "saveBboxToGallery": "バウンディングボックスをギャラリーへ保存",
@@ -1774,25 +1908,386 @@
         "removeBookmark": "ブックマークを外す",
         "savedToGalleryOk": "ギャラリーに保存しました",
         "controlMode": {
-            "prompt": "プロンプト"
+            "prompt": "プロンプト",
+            "controlMode": "コントロールモード",
+            "balanced": "バランス（推奨）",
+            "control": "コントロール",
+            "megaControl": "メガコントロール"
         },
         "prompt": "プロンプト",
         "settings": {
             "snapToGrid": {
                 "off": "オフ",
-                "on": "オン"
-            }
+                "on": "オン",
+                "label": "グリッドにスナップ"
+            },
+            "preserveMask": {
+                "label": "マスクされた領域を保持",
+                "alert": "マスクされた領域の保存"
+            },
+            "isolatedStagingPreview": "分離されたステージングプレビュー",
+            "isolatedPreview": "分離されたプレビュー",
+            "isolatedLayerPreview": "分離されたレイヤーのプレビュー",
+            "isolatedLayerPreviewDesc": "フィルタリングや変換などの操作を実行するときに、このレイヤーのみを表示するかどうか。",
+            "invertBrushSizeScrollDirection": "ブラシサイズのスクロール反転",
+            "pressureSensitivity": "圧力感度"
         },
         "filter": {
             "filter": "フィルター",
             "spandrel_filter": {
-                "model": "モデル"
+                "model": "モデル",
+                "label": "img2imgモデル",
+                "description": "選択したレイヤーでimg2imgモデルを実行します。",
+                "autoScale": "オートスケール",
+                "autoScaleDesc": "選択したモデルは、目標スケールに達するまで実行されます。",
+                "scale": "ターゲットスケール"
             },
             "apply": "適用",
             "reset": "リセット",
-            "cancel": "キャンセル"
+            "cancel": "キャンセル",
+            "filters": "フィルター",
+            "filterType": "フィルタータイプ",
+            "autoProcess": "オートプロセス",
+            "process": "プロセス",
+            "advanced": "アドバンスド",
+            "processingLayerWith": "{{type}} フィルターを使用した処理レイヤー。",
+            "forMoreControl": "さらに細かく制御するには、以下の「詳細設定」をクリックしてください。",
+            "canny_edge_detection": {
+                "label": "キャニーエッジ検出",
+                "description": "Canny エッジ検出アルゴリズムを使用して、選択したレイヤーからエッジ マップを生成します。",
+                "low_threshold": "低閾値",
+                "high_threshold": "高閾値"
+            },
+            "color_map": {
+                "label": "カラーマップ",
+                "description": "選択したレイヤーからカラーマップを作成します。",
+                "tile_size": "タイルサイズ"
+            },
+            "content_shuffle": {
+                "label": "コンテンツシャッフル",
+                "description": "選択したレイヤーのコンテンツを、「液化」効果と同様にシャッフルします。",
+                "scale_factor": "スケール係数"
+            },
+            "depth_anything_depth_estimation": {
+                "label": "デプスエニシング",
+                "description": "デプスエニシングモデルを使用して、選択したレイヤーから深度マップを生成します。",
+                "model_size": "モデルサイズ",
+                "model_size_small": "スモール",
+                "model_size_small_v2": "スモールv2",
+                "model_size_base": "ベース",
+                "model_size_large": "ラージ"
+            },
+            "dw_openpose_detection": {
+                "label": "DW オープンポーズ検出",
+                "description": "DW Openpose モデルを使用して、選択したレイヤー内の人間のポーズを検出します。",
+                "draw_hands": "手を描く",
+                "draw_face": "顔を描く",
+                "draw_body": "体を描く"
+            },
+            "hed_edge_detection": {
+                "label": "HEDエッジ検出",
+                "description": "HED エッジ検出モデルを使用して、選択したレイヤーからエッジ マップを生成します。",
+                "scribble": "落書き"
+            },
+            "lineart_anime_edge_detection": {
+                "label": "線画アニメのエッジ検出",
+                "description": "線画アニメエッジ検出モデルを使用して、選択したレイヤーからエッジ マップを生成します。"
+            },
+            "lineart_edge_detection": {
+                "label": "線画エッジ検出",
+                "description": "線画エッジ検出モデルを使用して、選択したレイヤーからエッジ マップを生成します。",
+                "coarse": "粗い"
+            },
+            "mediapipe_face_detection": {
+                "label": "メディアパイプ顔検出",
+                "description": "メディアパイプ顔検出モデルを使用して、選択したレイヤー内の顔を検出します。",
+                "max_faces": "マックスフェイス",
+                "min_confidence": "最小信頼度"
+            },
+            "mlsd_detection": {
+                "label": "線分検出",
+                "description": "MLSD 線分検出モデルを使用して、選択したレイヤーから線分マップを生成します。",
+                "score_threshold": "スコア閾値",
+                "distance_threshold": "距離閾値"
+            },
+            "normal_map": {
+                "label": "ノーマルマップ",
+                "description": "選択したレイヤーからノーマルマップを生成します。"
+            },
+            "pidi_edge_detection": {
+                "label": "PiDiNetエッジ検出",
+                "description": "PiDiNet エッジ検出モデルを使用して、選択したレイヤーからエッジ マップを生成します。",
+                "scribble": "落書き",
+                "quantize_edges": "エッジを量子化する"
+            },
+            "img_blur": {
+                "label": "画像をぼかす",
+                "description": "選択したレイヤーをぼかします。",
+                "blur_type": "ぼかしの種類",
+                "blur_radius": "半径",
+                "gaussian_type": "ガウス分布",
+                "box_type": "ボックス"
+            },
+            "img_noise": {
+                "label": "ノイズ画像",
+                "description": "選択したレイヤーにノイズを追加します。",
+                "noise_type": "ノイズの種類",
+                "noise_amount": "総計",
+                "gaussian_type": "ガウス分布",
+                "salt_and_pepper_type": "塩コショウ",
+                "noise_color": "カラーノイズ",
+                "size": "ノイズサイズ"
+            },
+            "adjust_image": {
+                "label": "画像を調整する",
+                "description": "画像の選択したチャンネルを調整します。",
+                "channel": "チャンネル",
+                "value_setting": "バリュー",
+                "scale_values": "スケールバリュー",
+                "red": "赤（RGBA）",
+                "green": "緑（RGBA）",
+                "blue": "青（RGBA）",
+                "alpha": "アルファ（RGBA）",
+                "cyan": "シアン（CMYK）",
+                "magenta": "マゼンタ（CMYK）",
+                "yellow": "黄色（CMYK）",
+                "black": "黒（CMYK）",
+                "hue": "色相（HSV）",
+                "saturation": "彩度（HSV）",
+                "value": "値（HSV）",
+                "luminosity": "明度（LAB）",
+                "a": "A（ラボ）",
+                "b": "B（ラボ）",
+                "y": "Y（YCbCr）",
+                "cb": "Cb（YCbCr）",
+                "cr": "Cr（YCbCr）"
+            }
         },
-        "weight": "重み"
+        "weight": "重み",
+        "bookmark": "クイックスイッチのブックマーク",
+        "exportCanvasToPSD": "キャンバスをPSDにエクスポート",
+        "savedToGalleryError": "ギャラリーへの保存中にエラーが発生しました",
+        "regionCopiedToClipboard": "{{region}} をクリップボードにコピーしました",
+        "copyRegionError": "{{region}} のコピー中にエラーが発生しました",
+        "newGlobalReferenceImageOk": "作成されたグローバル参照画像",
+        "newGlobalReferenceImageError": "グローバル参照イメージの作成中に問題が発生しました",
+        "newRegionalReferenceImageOk": "地域参照画像の作成",
+        "newRegionalReferenceImageError": "地域参照画像の作成中に問題が発生しました",
+        "newControlLayerOk": "制御レイヤーの作成",
+        "newControlLayerError": "制御層の作成中に問題が発生しました",
+        "newRasterLayerOk": "ラスターレイヤーを作成しました",
+        "newRasterLayerError": "ラスターレイヤーの作成中に問題が発生しました",
+        "pullBboxIntoLayerOk": "Bbox をレイヤーにプル",
+        "pullBboxIntoLayerError": "BBox をレイヤーにプルする際に問題が発生しました",
+        "pullBboxIntoReferenceImageOk": "Bbox が ReferenceImage にプルされました",
+        "pullBboxIntoReferenceImageError": "BBox を ReferenceImage にプルする際に問題が発生しました",
+        "regionIsEmpty": "選択した領域は空です",
+        "mergeVisible": "マージを可視化",
+        "mergeVisibleOk": "マージされたレイヤー",
+        "mergeVisibleError": "レイヤーの結合エラー",
+        "mergingLayers": "レイヤーのマージ",
+        "clearHistory": "履歴をクリア",
+        "bboxOverlay": "Bboxオーバーレイを表示",
+        "ruleOfThirds": "三分割法を表示",
+        "newSession": "新しいセッション",
+        "clearCaches": "キャッシュをクリア",
+        "recalculateRects": "長方形を再計算する",
+        "clipToBbox": "ストロークをBboxにクリップ",
+        "outputOnlyMaskedRegions": "生成された領域のみを出力する",
+        "width": "幅",
+        "autoNegative": "オートネガティブ",
+        "enableAutoNegative": "オートネガティブを有効にする",
+        "disableAutoNegative": "オートネガティブを無効にする",
+        "deletePrompt": "プロンプトを削除",
+        "deleteReferenceImage": "参照画像を削除",
+        "showHUD": "HUDを表示",
+        "maskFill": "マスク塗りつぶし",
+        "addPositivePrompt": "$t(controlLayers.prompt) を追加します",
+        "addNegativePrompt": "$t(controlLayers.negativePrompt)を追加します",
+        "addReferenceImage": "$t(controlLayers.referenceImage)を追加します",
+        "addImageNoise": "$t(controlLayers.imageNoise)を追加します",
+        "addRasterLayer": "$t(controlLayers.rasterLayer)を追加します",
+        "addControlLayer": "$t(controlLayers.controlLayer)を追加します",
+        "addInpaintMask": "$t(controlLayers.inpaintMask)を追加します",
+        "addRegionalGuidance": "$t(controlLayers.regionalGuidance)を追加します",
+        "addGlobalReferenceImage": "$t(controlLayers.globalReferenceImage)を追加します",
+        "addDenoiseLimit": "$t(controlLayers.denoiseLimit)を追加します",
+        "controlLayer": "コントロールレイヤー",
+        "inpaintMask": "インペイントマスク",
+        "referenceImageRegional": "参考画像（地域別）",
+        "referenceImageGlobal": "参考画像（グローバル）",
+        "asRasterLayer": "$t(controlLayers.rasterLayer) として",
+        "asRasterLayerResize": "$t(controlLayers.rasterLayer) として (リサイズ)",
+        "asControlLayer": "$t(controlLayers.controlLayer) として",
+        "asControlLayerResize": "$t(controlLayers.controlLayer) として (リサイズ)",
+        "referenceImage": "参照画像",
+        "sendingToCanvas": "キャンバスに生成をのせる",
+        "sendingToGallery": "生成をギャラリーに送る",
+        "sendToGallery": "ギャラリーに送る",
+        "sendToGalleryDesc": "Invokeを押すとユニークな画像が生成され、ギャラリーに保存されます。",
+        "sendToCanvas": "キャンバスに送る",
+        "newLayerFromImage": "画像から新規レイヤー",
+        "newCanvasFromImage": "画像から新規キャンバス",
+        "newImg2ImgCanvasFromImage": "画像からの新規 Img2Img",
+        "copyToClipboard": "クリップボードにコピー",
+        "sendToCanvasDesc": "Invokeを押すと、進行中の作品がキャンバス上にステージされます。",
+        "viewProgressInViewer": "<Btn>画像ビューア</Btn>で進行状況と出力を表示します。",
+        "viewProgressOnCanvas": "<Btn>キャンバス</Btn> で進行状況とステージ出力を表示します。",
+        "rasterLayer_withCount_other": "ラスターレイヤー",
+        "controlLayer_withCount_other": "コントロールレイヤー",
+        "regionalGuidance_withCount_hidden": "地域ガイダンス（{{count}} 件非表示）",
+        "controlLayers_withCount_hidden": "コントロールレイヤー（{{count}} 個非表示）",
+        "rasterLayers_withCount_hidden": "ラスター レイヤー ({{count}} 個非表示)",
+        "globalReferenceImages_withCount_hidden": "グローバル参照画像（{{count}} 枚非表示）",
+        "regionalGuidance_withCount_visible": "地域ガイダンス ({{count}})",
+        "controlLayers_withCount_visible": "コントロールレイヤー ({{count}})",
+        "rasterLayers_withCount_visible": "ラスターレイヤー（{{count}}）",
+        "globalReferenceImages_withCount_visible": "グローバル参照画像 ({{count}})",
+        "layer_other": "レイヤー",
+        "layer_withCount_other": "レイヤー ({{count}})",
+        "convertRasterLayerTo": "$t(controlLayers.rasterLayer) を変換する",
+        "convertControlLayerTo": "$t(controlLayers.controlLayer) を変換する",
+        "convertRegionalGuidanceTo": "$t(controlLayers.regionalGuidance) を変換する",
+        "copyRasterLayerTo": "$t(controlLayers.rasterLayer)をコピーする",
+        "copyControlLayerTo": "$t(controlLayers.controlLayer) をコピーする",
+        "copyRegionalGuidanceTo": "$t(controlLayers.regionalGuidance)をコピーする",
+        "newRasterLayer": "新しい $t(controlLayers.rasterLayer)",
+        "newControlLayer": "新しい $t(controlLayers.controlLayer)",
+        "newInpaintMask": "新しい $t(controlLayers.inpaintMask)",
+        "newRegionalGuidance": "新しい $t(controlLayers.regionalGuidance)",
+        "pasteTo": "貼り付け先",
+        "pasteToAssets": "アセット",
+        "pasteToAssetsDesc": "アセットに貼り付け",
+        "pasteToBbox": "Bボックス",
+        "pasteToBboxDesc": "新しいレイヤー（Bbox内）",
+        "pasteToCanvas": "キャンバス",
+        "pasteToCanvasDesc": "新しいレイヤー（キャンバス内）",
+        "pastedTo": "{{destination}} に貼り付けました",
+        "transparency": "透明性",
+        "enableTransparencyEffect": "透明効果を有効にする",
+        "disableTransparencyEffect": "透明効果を無効にする",
+        "hidingType": "{{type}} を非表示",
+        "showingType": "{{type}}を表示",
+        "showNonRasterLayers": "非ラスターレイヤーを表示 (Shift+H)",
+        "hideNonRasterLayers": "非ラスターレイヤーを非表示にする (Shift+H)",
+        "dynamicGrid": "ダイナミックグリッド",
+        "logDebugInfo": "デバッグ情報をログに記録する",
+        "locked": "ロックされています",
+        "unlocked": "ロック解除",
+        "deleteSelected": "選択項目を削除",
+        "stagingOnCanvas": "ステージング画像",
+        "replaceLayer": "レイヤーの置き換え",
+        "pullBboxIntoLayer": "Bboxをレイヤーに引き込む",
+        "pullBboxIntoReferenceImage": "Bboxを参照画像に取り込む",
+        "showProgressOnCanvas": "キャンバスに進捗状況を表示",
+        "useImage": "画像を使う",
+        "negativePrompt": "ネガティブプロンプト",
+        "beginEndStepPercentShort": "開始/終了 %",
+        "newGallerySession": "新しいギャラリーセッション",
+        "newGallerySessionDesc": "これにより、キャンバスとモデル選択以外のすべての設定がクリアされます。生成した画像はギャラリーに送信されます。",
+        "newCanvasSession": "新規キャンバスセッション",
+        "newCanvasSessionDesc": "これにより、キャンバスとモデル選択以外のすべての設定がクリアされます。生成はキャンバス上でステージングされます。",
+        "resetCanvasLayers": "キャンバスレイヤーをリセット",
+        "resetGenerationSettings": "生成設定をリセット",
+        "replaceCurrent": "現在のものを置き換える",
+        "controlLayerEmptyState": "<UploadButton>画像をアップロード</UploadButton>、<GalleryButton>ギャラリー</GalleryButton>からこのレイヤーに画像をドラッグ、<PullBboxButton>境界ボックスをこのレイヤーにプル</PullBboxButton>、またはキャンバスに描画して開始します。",
+        "referenceImageEmptyStateWithCanvasOptions": "開始するには、<UploadButton>画像をアップロード</UploadButton>するか、<GalleryButton>ギャラリー</GalleryButton>からこの参照画像に画像をドラッグするか、<PullBboxButton>境界ボックスをこの参照画像にプル</PullBboxButton>します。",
+        "referenceImageEmptyState": "開始するには、<UploadButton>画像をアップロード</UploadButton>するか、<GalleryButton>ギャラリー</GalleryButton>からこの参照画像に画像をドラッグします。",
+        "uploadOrDragAnImage": "ギャラリーから画像をドラッグするか、<UploadButton>画像をアップロード</UploadButton>します。",
+        "imageNoise": "画像ノイズ",
+        "denoiseLimit": "ノイズ除去制限",
+        "warnings": {
+            "problemsFound": "問題が見つかりました",
+            "unsupportedModel": "選択したベースモデルではレイヤーがサポートされていません",
+            "controlAdapterNoModelSelected": "制御レイヤーモデルが選択されていません",
+            "controlAdapterIncompatibleBaseModel": "互換性のない制御レイヤーベースモデル",
+            "controlAdapterNoControl": "コントロールが選択/描画されていません",
+            "ipAdapterNoModelSelected": "参照画像モデルが選択されていません",
+            "ipAdapterIncompatibleBaseModel": "互換性のない参照画像ベースモデル",
+            "ipAdapterNoImageSelected": "参照画像が選択されていません",
+            "rgNoPromptsOrIPAdapters": "テキストプロンプトや参照画像はありません",
+            "rgNegativePromptNotSupported": "選択されたベースモデルでは否定プロンプトはサポートされていません",
+            "rgReferenceImagesNotSupported": "選択されたベースモデルでは地域の参照画像はサポートされていません",
+            "rgAutoNegativeNotSupported": "選択したベースモデルでは自動否定はサポートされていません",
+            "rgNoRegion": "領域が描画されていません",
+            "fluxFillIncompatibleWithControlLoRA": "コントロールLoRAはFLUX Fillと互換性がありません"
+        },
+        "errors": {
+            "unableToFindImage": "画像が見つかりません",
+            "unableToLoadImage": "画像を読み込めません"
+        },
+        "ipAdapterMethod": {
+            "ipAdapterMethod": "モード",
+            "full": "スタイルと構成",
+            "fullDesc": "視覚スタイル (色、テクスチャ) と構成 (レイアウト、構造) を適用します。",
+            "style": "スタイル（シンプル）",
+            "styleDesc": "レイアウトを考慮せずに視覚スタイル（色、テクスチャ）を適用します。以前は「スタイルのみ」と呼ばれていました。",
+            "composition": "構成のみ",
+            "compositionDesc": "参照スタイルを無視してレイアウトと構造を複製します。",
+            "styleStrong": "スタイル（ストロング）",
+            "styleStrongDesc": "構成への影響をわずかに抑えて、強力なビジュアル スタイルを適用します。",
+            "stylePrecise": "スタイル（正確）",
+            "stylePreciseDesc": "被写体の影響を排除し、正確な視覚スタイルを適用します。"
+        },
+        "fluxReduxImageInfluence": {
+            "imageInfluence": "イメージの影響力",
+            "lowest": "最低",
+            "low": "低",
+            "medium": "中",
+            "high": "高",
+            "highest": "最高"
+        },
+        "fill": {
+            "fillColor": "塗りつぶし色",
+            "fillStyle": "塗りつぶしスタイル",
+            "solid": "固体",
+            "grid": "グリッド",
+            "crosshatch": "クロスハッチ",
+            "vertical": "垂直",
+            "horizontal": "水平",
+            "diagonal": "対角線"
+        },
+        "selectObject": {
+            "selectObject": "オブジェクトを選択",
+            "pointType": "ポイントタイプ",
+            "invertSelection": "選択範囲を反転",
+            "include": "含む",
+            "exclude": "除外",
+            "neutral": "ニュートラル",
+            "apply": "適用",
+            "reset": "リセット",
+            "saveAs": "名前を付けて保存",
+            "cancel": "キャンセル",
+            "process": "プロセス",
+            "help1": "ターゲットオブジェクトを1つ選択します。<Bold>含める</Bold>ポイントと<Bold>除外</Bold>ポイントを追加して、レイヤーのどの部分がターゲットオブジェクトの一部であるかを示します。",
+            "help2": "対象オブジェクト内に<Bold>含める</Bold>ポイントを1つ選択するところから始めます。ポイントを追加して選択範囲を絞り込みます。ポイントが少ないほど、通常はより良い結果が得られます。",
+            "help3": "選択を反転して、ターゲットオブジェクト以外のすべてを選択します。",
+            "clickToAdd": "レイヤーをクリックしてポイントを追加します",
+            "dragToMove": "ポイントをドラッグして移動します",
+            "clickToRemove": "ポイントをクリックして削除します"
+        },
+        "HUD": {
+            "bbox": "Bボックス",
+            "scaledBbox": "スケールされたBボックス",
+            "entityStatus": {
+                "isFiltering": "{{title}} はフィルタリング中です",
+                "isTransforming": "{{title}}は変化しています",
+                "isLocked": "{{title}}はロックされています",
+                "isHidden": "{{title}}は非表示になっています",
+                "isDisabled": "{{title}}は無効です",
+                "isEmpty": "{{title}} は空です"
+            }
+        },
+        "stagingArea": {
+            "accept": "受け入れる",
+            "discardAll": "すべて破棄",
+            "discard": "破棄する",
+            "previous": "前へ",
+            "next": "次へ",
+            "saveToGallery": "ギャラリーに保存",
+            "showResultsOn": "結果を表示",
+            "showResultsOff": "結果を隠す"
+        }
     },
     "stylePresets": {
         "clearTemplateSelection": "選択したテンプレートをクリア",
@@ -1810,13 +2305,56 @@
         "nameColumn": "'name'",
         "type": "タイプ",
         "private": "プライベート",
-        "name": "名称"
+        "name": "名称",
+        "active": "アクティブ",
+        "copyTemplate": "テンプレートをコピー",
+        "deleteImage": "画像を削除",
+        "deleteTemplate": "テンプレートを削除",
+        "deleteTemplate2": "このテンプレートを削除してもよろしいですか? 元に戻すことはできません。",
+        "exportPromptTemplates": "プロンプトテンプレートをエクスポートする（CSV）",
+        "editTemplate": "テンプレートを編集",
+        "exportDownloaded": "エクスポートをダウンロードしました",
+        "exportFailed": "生成とCSVのダウンロードができません",
+        "importTemplates": "プロンプトテンプレートのインポート（CSV/JSON）",
+        "acceptedColumnsKeys": "受け入れられる列/キー:",
+        "positivePromptColumn": "'プロンプト'または'ポジティブプロンプト'",
+        "insertPlaceholder": "プレースホルダーを挿入",
+        "negativePrompt": "ネガティブプロンプト",
+        "noTemplates": "テンプレートがありません",
+        "noMatchingTemplates": "マッチするテンプレートがありません",
+        "promptTemplatesDesc1": "プロンプトテンプレートは、プロンプトボックスに書き込むプロンプトにテキストを追加します。",
+        "promptTemplatesDesc2": "テンプレート内でプロンプトを含める場所を指定するには <Pre>{{placeholder}}</Pre> のプレースホルダーの文字列を使用します。",
+        "promptTemplatesDesc3": "プレースホルダーを省略すると、テンプレートはプロンプトの末尾に追加されます。",
+        "positivePrompt": "ポジティブプロンプト",
+        "shared": "共有",
+        "sharedTemplates": "テンプレートを共有",
+        "templateDeleted": "プロンプトテンプレートを削除しました",
+        "unableToDeleteTemplate": "プロンプトテンプレートを削除できません",
+        "updatePromptTemplate": "プロンプトテンプレートをアップデート",
+        "useForTemplate": "プロンプトテンプレートに使用する",
+        "viewList": "テンプレートリストを表示",
+        "viewModeTooltip": "現在選択されているテンプレートでは、プロンプトはこのようになります。プロンプトを編集するには、テキストボックス内の任意の場所をクリックしてください。",
+        "togglePromptPreviews": "プロンプトプレビューを切り替える"
     },
     "upscaling": {
         "upscaleModel": "アップスケールモデル",
         "postProcessingModel": "ポストプロセスモデル",
         "upscale": "アップスケール",
-        "scale": "スケール"
+        "scale": "スケール",
+        "creativity": "創造性",
+        "exceedsMaxSize": "アップスケール設定が最大サイズ制限を超えています",
+        "exceedsMaxSizeDetails": "アップスケールの上限は{{max Upscale Dimension}} x {{max Upscale Dimension}}ピクセルです。画像を小さくするか、スケールの選択範囲を小さくしてください。",
+        "structure": "構造",
+        "postProcessingMissingModelWarning": "後処理 (img2img) モデルをインストールするには、<LinkComponent>モデル マネージャー</LinkComponent> にアクセスしてください。",
+        "missingModelsWarning": "必要なモデルをインストールするには、<LinkComponent>モデル マネージャー</LinkComponent> にアクセスしてください。",
+        "mainModelDesc": "メインモデル（SD1.5またはSDXLアーキテクチャ）",
+        "tileControlNetModelDesc": "選択したメインモデルアーキテクチャのタイルコントロールネットモデル",
+        "upscaleModelDesc": "アップスケール（img2img）モデル",
+        "missingUpscaleInitialImage": "アップスケール用の初期画像がありません",
+        "missingUpscaleModel": "アップスケールモデルがありません",
+        "missingTileControlNetModel": "有効なタイル コントロールネットモデルがインストールされていません",
+        "incompatibleBaseModel": "アップスケーリングにサポートされていないメインモデルアーキテクチャです",
+        "incompatibleBaseModelDesc": "アップスケーリングはSD1.5およびSDXLアーキテクチャモデルでのみサポートされています。アップスケーリングを有効にするには、メインモデルを変更してください。"
     },
     "sdxl": {
         "denoisingStrength": "ノイズ除去強度",
@@ -1891,7 +2429,34 @@
             "minimum": "最小",
             "publish": "公開",
             "unpublish": "非公開",
-            "publishedWorkflowInputs": "インプット"
+            "publishedWorkflowInputs": "インプット",
+            "workflowLocked": "ワークフローがロックされました",
+            "workflowLockedPublished": "公開済みのワークフローは編集用にロックされています。\nワークフローを非公開にして編集したり、コピーを作成したりできます。",
+            "workflowLockedDuringPublishing": "公開の構成中にワークフローがロックされます。",
+            "selectOutputNode": "出力ノードを選択",
+            "changeOutputNode": "出力ノードの変更",
+            "unpublishableInputs": "これらの公開できない入力は省略されます",
+            "noPublishableInputs": "公開可能な入力はありません",
+            "noOutputNodeSelected": "出力ノードが選択されていません",
+            "cannotPublish": "ワークフローを公開できません",
+            "publishWarnings": "警告",
+            "errorWorkflowHasUnsavedChanges": "ワークフローに保存されていない変更があります",
+            "errorWorkflowHasUnpublishableNodes": "ワークフローにはバッチ、ジェネレータ、またはメタデータ抽出ノードがあります",
+            "errorWorkflowHasInvalidGraph": "ワークフロー グラフが無効です (詳細については [呼び出し] ボタンにマウスを移動してください)",
+            "errorWorkflowHasNoOutputNode": "出力ノードが選択されていません",
+            "warningWorkflowHasNoPublishableInputFields": "公開可能な入力フィールドが選択されていません - 公開されたワークフローはデフォルト値のみで実行されます",
+            "warningWorkflowHasUnpublishableInputFields": "ワークフローには公開できない入力がいくつかあります。これらは公開されたワークフローから省略されます",
+            "publishFailed": "公開失敗",
+            "publishFailedDesc": "ワークフローの公開中に問題が発生しました。もう一度お試しください。",
+            "publishSuccess": "ワークフローを公開しています",
+            "publishSuccessDesc": "<LinkComponent>プロジェクト ダッシュボード</LinkComponent> をチェックして進捗状況を確認してください。",
+            "publishInProgress": "公開中",
+            "publishedWorkflowIsLocked": "公開されたワークフローはロックされています",
+            "publishingValidationRun": "公開検証実行",
+            "publishingValidationRunInProgress": "公開検証の実行が進行中です。",
+            "publishedWorkflowsLocked": "公開済みのワークフローはロックされており、編集または実行できません。このワークフローを編集または実行するには、ワークフローを非公開にするか、コピーを保存してください。",
+            "selectingOutputNode": "出力ノードの選択",
+            "selectingOutputNodeDesc": "ノードをクリックして、ワークフローの出力ノードとして選択します。"
         },
         "chooseWorkflowFromLibrary": "ライブラリからワークフローを選択",
         "unnamedWorkflow": "名前のないワークフロー",
@@ -1954,15 +2519,23 @@
             "models": "モデル",
             "canvas": "キャンバス",
             "metadata": "メタデータ",
-            "queue": "キュー"
+            "queue": "キュー",
+            "logNamespaces": "ログのネームスペース",
+            "dnd": "ドラッグ&ドロップ",
+            "config": "構成",
+            "generation": "生成",
+            "events": "イベント"
         },
         "logLevel": {
             "debug": "Debug",
             "info": "Info",
             "error": "Error",
             "fatal": "Fatal",
-            "warn": "Warn"
-        }
+            "warn": "Warn",
+            "logLevel": "ログレベル",
+            "trace": "追跡"
+        },
+        "enableLogging": "ログを有効にする"
     },
     "dynamicPrompts": {
         "promptsPreview": "プロンプトプレビュー",
@@ -1978,5 +2551,34 @@
         "dynamicPrompts": "ダイナミックプロンプト",
         "loading": "ダイナミックプロンプトを生成...",
         "maxPrompts": "最大プロンプト"
+    },
+    "upsell": {
+        "inviteTeammates": "チームメートを招待",
+        "professional": "プロフェッショナル",
+        "professionalUpsell": "InvokeのProfessional Editionでご利用いただけます。詳細については、こちらをクリックするか、invoke.com/pricingをご覧ください。",
+        "shareAccess": "共有アクセス"
+    },
+    "newUserExperience": {
+        "toGetStartedLocal": "始めるには、Invoke の実行に必要なモデルをダウンロードまたはインポートしてください。次に、ボックスにプロンプトを入力し、<StrongComponent>Invoke</StrongComponent> をクリックして最初の画像を生成します。プロンプトテンプレートを選択すると、結果が向上します。画像は <StrongComponent>Gallery</StrongComponent> に直接保存するか、<StrongComponent>Canvas</StrongComponent> で編集するかを選択できます。",
+        "toGetStarted": "開始するには、ボックスにプロンプトを入力し、<StrongComponent>Invoke</StrongComponent> をクリックして最初の画像を生成します。プロンプトテンプレートを選択すると、結果が向上します。画像は <StrongComponent>Gallery</StrongComponent> に直接保存するか、<StrongComponent>Canvas</StrongComponent> で編集するかを選択できます。",
+        "toGetStartedWorkflow": "開始するには、左側のフィールドに入力し、<StrongComponent>Invoke</StrongComponent> をクリックして画像を生成します。他のワークフローも試してみたい場合は、ワークフロータイトルの横にある<StrongComponent>フォルダアイコン</StrongComponent> をクリックすると、試せる他のテンプレートのリストが表示されます。",
+        "gettingStartedSeries": "さらに詳しいガイダンスが必要ですか? Invoke Studio の可能性を最大限に引き出すためのヒントについては、<LinkComponent>入門シリーズ</LinkComponent>をご覧ください。",
+        "lowVRAMMode": "最高のパフォーマンスを得るには、<LinkComponent>低 VRAM ガイド</LinkComponent>に従ってください。",
+        "noModelsInstalled": "モデルがインストールされていないようです。<DownloadStarterModelsButton>スターターモデルバンドルをダウンロード</DownloadStarterModelsButton>するか、<ImportModelsButton>モデルをインポート</ImportModelsButton>してください。"
+    },
+    "whatsNew": {
+        "whatsNewInInvoke": "Invokeの新機能",
+        "items": [
+            "インペインティング: マスクごとのノイズ レベルとノイズ除去の制限。",
+            "キャンバス: SDXL のアスペクト比がスマートになり、スクロールによるズームが改善されました。"
+        ],
+        "readReleaseNotes": "リリースノートを読む",
+        "watchRecentReleaseVideos": "最近のリリースビデオを見る",
+        "watchUiUpdatesOverview": "Watch UI アップデートの概要"
+    },
+    "supportVideos": {
+        "supportVideos": "サポートビデオ",
+        "gettingStarted": "はじめる",
+        "watch": "ウォッチ"
     }
 }

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

@@ -74,7 +74,7 @@
         "bulkDownloadFailed": "Tải Xuống Thất Bại",
         "bulkDownloadRequestFailed": "Có Vấn Đề Khi Đang Chuẩn Bị Tải Xuống",
         "download": "Tải Xuống",
-        "dropOrUpload": "$t(gallery.drop) Hoặc Tải Lên",
+        "dropOrUpload": "Kéo Thả Hoặc Tải Lên",
         "currentlyInUse": "Hình ảnh này hiện đang sử dụng các tính năng sau:",
         "deleteImagePermanent": "Ảnh đã xoá không thể phục hồi.",
         "exitSearch": "Thoát Tìm Kiếm Hình Ảnh",
@@ -111,7 +111,7 @@
         "noImageSelected": "Không Có Ảnh Được Chọn",
         "noImagesInGallery": "Không Có Ảnh Để Hiển Thị",
         "assetsTab": "Tài liệu bạn đã tải lên để dùng cho dự án của mình.",
-        "imagesTab": "hình bạn vừa được tạo và lưu trong Invoke.",
+        "imagesTab": "Ảnh bạn vừa được tạo và lưu trong Invoke.",
         "loading": "Đang Tải",
         "oldestFirst": "Cũ Nhất Trước",
         "exitCompare": "Ngừng So Sánh",
@@ -122,7 +122,8 @@
         "boardsSettings": "Thiết Lập Bảng",
         "imagesSettings": "Cài Đặt Ảnh Trong Thư Viện Ảnh",
         "assets": "Tài Nguyên",
-        "images": "Hình Ảnh"
+        "images": "Hình Ảnh",
+        "useForPromptGeneration": "Dùng Để Tạo Sinh Lệnh"
     },
     "common": {
         "ipAdapter": "IP Adapter",
@@ -254,9 +255,18 @@
         "options_withCount_other": "{{count}} thiết lập"
     },
     "prompt": {
-        "addPromptTrigger": "Thêm Prompt Trigger",
+        "addPromptTrigger": "Thêm Trigger Cho Lệnh",
         "compatibleEmbeddings": "Embedding Tương Thích",
-        "noMatchingTriggers": "Không có trigger phù hợp"
+        "noMatchingTriggers": "Không có trigger phù hợp",
+        "generateFromImage": "Tạo sinh lệnh từ ảnh",
+        "expandCurrentPrompt": "Mở Rộng Lệnh Hiện Tại",
+        "uploadImageForPromptGeneration": "Tải Ảnh Để Tạo Sinh Lệnh",
+        "expandingPrompt": "Đang mở rộng lệnh...",
+        "resultTitle": "Mở Rộng Lệnh Hoàn Tất",
+        "resultSubtitle": "Chọn phương thức mở rộng lệnh:",
+        "replace": "Thay Thế",
+        "insert": "Chèn",
+        "discard": "Huỷ Bỏ"
     },
     "queue": {
         "resume": "Tiếp Tục",
@@ -453,6 +463,16 @@
             "applyFilter": {
                 "title": "Áp Dụng Bộ Lộc",
                 "desc": "Áp dụng bộ lọc đang chờ sẵn cho layer được chọn."
+            },
+            "settings": {
+                "behavior": "Hành Vi",
+                "display": "Hiển Thị",
+                "grid": "Lưới",
+                "debug": "Gỡ Lỗi"
+            },
+            "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)."
             }
         },
         "workflows": {
@@ -695,7 +715,7 @@
         "cancel": "Huỷ",
         "huggingFace": "HuggingFace (HF)",
         "huggingFacePlaceholder": "chủ-sỡ-hữu/tên-model",
-        "includesNModels": "Thêm vào {{n}} model và dependency của nó",
+        "includesNModels": "Thêm vào {{n}} model và dependency của nó.",
         "localOnly": "chỉ ở trên máy chủ",
         "manual": "Thủ Công",
         "convertToDiffusersHelpText4": "Đây là quá trình diễn ra chỉ một lần. Nó có thể tốn tầm 30-60 giây tuỳ theo thông số kỹ thuật của máy tính.",
@@ -742,7 +762,7 @@
         "simpleModelPlaceholder": "Url hoặc đường đẫn đến tệp hoặc thư mục chứa diffusers trong máy chủ",
         "selectModel": "Chọn Model",
         "spandrelImageToImage": "Hình Ảnh Sang Hình Ảnh (Spandrel)",
-        "starterBundles": "Quà Tân Thủ",
+        "starterBundles": "Gói Khởi Đầu",
         "vae": "VAE",
         "urlOrLocalPath": "URL / Đường Dẫn",
         "triggerPhrases": "Từ Ngữ Kích Hoạt",
@@ -794,7 +814,30 @@
         "manageModels": "Quản Lý Model",
         "hfTokenReset": "Làm Mới HF Token",
         "relatedModels": "Model Liên Quan",
-        "showOnlyRelatedModels": "Liên Quan"
+        "showOnlyRelatedModels": "Liên Quan",
+        "installedModelsCount": "Đã tải {{installed}} trên {{total}} model.",
+        "allNModelsInstalled": "Đã tải tất cả {{count}} model",
+        "nToInstall": "Còn {{count}} để tải",
+        "nAlreadyInstalled": "Có {{count}} đã tải",
+        "bundleAlreadyInstalled": "Gói đã được cài sẵn",
+        "bundleAlreadyInstalledDesc": "Tất cả model trong gói {{bundleName}} đã được cài sẵn.",
+        "launchpadTab": "Launchpad",
+        "launchpad": {
+            "welcome": "Chào mừng đến Trình Quản Lý Model",
+            "description": "Invoke yêu cầu tải model nhằm tối ưu hoá các tính năng trên nền tảng. Chọn tải các phương án thủ công hoặc khám phá các model khởi đầu thích hợp.",
+            "manualInstall": "Tải Thủ Công",
+            "urlDescription": "Tải model bằng URL hoặc đường dẫn trên máy. Phù hợp để cụ thể model muốn thêm vào.",
+            "huggingFaceDescription": "Duyệt và cài đặt model từ các repository trên HuggingFace.",
+            "scanFolderDescription": "Quét một thư mục trên máy để tự động tra và tải model.",
+            "recommendedModels": "Model Khuyến Nghị",
+            "exploreStarter": "Hoặc duyệt tất cả model khởi đầu có sẵn",
+            "quickStart": "Gói Khởi Đầu Nhanh",
+            "bundleDescription": "Các gói đều bao gồm những model cần thiết cho từng nhánh model và những model cơ sở đã chọn lọc để bắt đầu.",
+            "browseAll": "Hoặc duyệt tất cả model có sẵn:",
+            "stableDiffusion15": "Stable Diffusion 1.5",
+            "sdxl": "SDXL",
+            "fluxDev": "FLUX.1 dev"
+        }
     },
     "metadata": {
         "guidance": "Hướng Dẫn",
@@ -802,7 +845,7 @@
         "imageDetails": "Chi Tiết Ảnh",
         "createdBy": "Được Tạo Bởi",
         "parsingFailed": "Lỗi Cú Pháp",
-        "canvasV2Metadata": "Canvas",
+        "canvasV2Metadata": "Layer Canvas",
         "parameterSet": "Dữ liệu tham số {{parameter}}",
         "positivePrompt": "Lệnh Tích Cực",
         "recallParameter": "Gợi Nhớ {{label}}",
@@ -1474,6 +1517,20 @@
                 "Lát khối liền mạch bức ảnh theo trục ngang."
             ],
             "heading": "Lát Khối Liền Mạch Trục X"
+        },
+        "tileSize": {
+            "heading": "Kích Thước Khối",
+            "paragraphs": [
+                "Điều chỉnh kích thước của khối trong quá trình upscale. Khối càng lớn, bộ nhớ được sử dụng càng nhiều, nhưng có thể tạo sinh ảnh tốt hơn.",
+                "Model SD1.5 mặt định là 768, trong khi SDXL mặc định là 1024. Giảm kích thước khối nếu các gặp vấn đề bộ nhớ."
+            ]
+        },
+        "tileOverlap": {
+            "heading": "Chồng Chéo Khối",
+            "paragraphs": [
+                "Điều chỉnh sự chồng chéo giữa các khối liền kề trong quá trình upscale. Giá trị chồng chép lớn giúp giảm sự rõ nét của các chỗ nối nhau, nhưng ngốn nhiều bộ nhớ hơn.",
+                "Giá trị mặc định (128) hoạt động tốt với đa số trường hợp, nhưng bạn có thể điều chỉnh cho phù hợp với nhu cầu cụ thể và hạn chế về bộ nhớ."
+            ]
         }
     },
     "models": {
@@ -1487,7 +1544,8 @@
         "defaultVAE": "VAE Mặc Định",
         "noMatchingModels": "Không có Model phù hợp",
         "noModelsAvailable": "Không có model",
-        "selectModel": "Chọn Model"
+        "selectModel": "Chọn Model",
+        "noCompatibleLoRAs": "Không Có LoRAs Tương Thích"
     },
     "parameters": {
         "postProcessing": "Xử Lý Hậu Kỳ (Shift + U)",
@@ -1538,7 +1596,10 @@
             "modelIncompatibleBboxHeight": "Chiều dài hộp giới hạn là {{height}} nhưng {{model}} yêu cầu bội số của {{multiple}}",
             "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."
+            "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",
+            "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"
         },
         "cfgScale": "Thang CFG",
         "useSeed": "Dùng Hạt Giống",
@@ -1869,7 +1930,8 @@
             "canvasGroup": "Canvas",
             "copyCanvasToClipboard": "Sao Chép Canvas Vào Clipboard",
             "copyToClipboard": "Sao Chép Vào Clipboard",
-            "copyBboxToClipboard": "Sao Chép Hộp Giới Hạn Vào Clipboard"
+            "copyBboxToClipboard": "Sao Chép Hộp Giới Hạn Vào Clipboard",
+            "newResizedControlLayer": "Layer Điều Khiển Được Đã Chỉnh Kích Thước Mới"
         },
         "stagingArea": {
             "saveToGallery": "Lưu Vào Thư Viện Ảnh",
@@ -2050,7 +2112,11 @@
             },
             "isolatedLayerPreviewDesc": "Có hay không hiển thị riêng layer này khi thực hiện các thao tác như lọc hay biến đổi.",
             "isolatedStagingPreview": "Xem Trước Tổng Quan Phần Cô Lập",
-            "isolatedPreview": "Xem Trước Phần Cô Lập"
+            "isolatedPreview": "Xem Trước Phần Cô Lập",
+            "saveAllImagesToGallery": {
+                "label": "Chuyển Sản Phẩm Tạo Sinh Mới Vào Thư Viện Ảnh",
+                "alert": "Đang chuyển sản phẩm tạo sinh mới vào Thư Viện Ảnh, bỏ qua Canvas"
+            }
         },
         "tool": {
             "eraser": "Tẩy",
@@ -2062,8 +2128,8 @@
             "colorPicker": "Chọn Màu"
         },
         "mergingLayers": "Đang gộp layer",
-        "controlLayerEmptyState": "<UploadButton>Tải lên ảnh</UploadButton>, kéo thả ảnh từ <GalleryButton>thư viện</GalleryButton> vào layer này, <PullBboxButton>kéo hộp giới hạn vào layer này</PullBboxButton>, hoặc vẽ trên canvas để bắt đầu.",
-        "referenceImageEmptyState": "<UploadButton>Tải lên hình ảnh</UploadButton>, kéo ảnh từ <GalleryButton>thư viện ảnh</GalleryButton> vào layer này, hoặc <PullBboxButton>kéo hộp giới hạn vào layer này</PullBboxButton> để bắt đầu.",
+        "controlLayerEmptyState": "<UploadButton>Tải lên ảnh</UploadButton>, kéo thả ảnh từ thư viện ảnh vào layer này, <PullBboxButton>kéo hộp giới hạn vào layer này</PullBboxButton>, hoặc vẽ trên canvas để bắt đầu.",
+        "referenceImageEmptyState": "<UploadButton>Tải lên hình ảnh</UploadButton> hoặc kéo ảnh từ thư viện ảnh vào Ảnh Mẫu để bắt đầu.",
         "useImage": "Dùng Hình Ảnh",
         "resetCanvasLayers": "Khởi Động Lại Layer Canvas",
         "asRasterLayer": "Như $t(controlLayers.rasterLayer)",
@@ -2115,7 +2181,18 @@
         "addDenoiseLimit": "Thêm $t(controlLayers.denoiseLimit)",
         "imageNoise": "Độ Nhiễu Hình Ảnh",
         "denoiseLimit": "Giới Hạn Khử Nhiễu",
-        "addImageNoise": "Thêm $t(controlLayers.imageNoise)"
+        "addImageNoise": "Thêm $t(controlLayers.imageNoise)",
+        "referenceImageEmptyStateWithCanvasOptions": "<UploadButton>Tải lên hình ảnh</UploadButton>, kéo ảnh từ thư viện ảnh vào Ảnh Mẫu này, hoặc <PullBboxButton>kéo hộp giới hạn vào Ảnh Mẫu này</PullBboxButton> để bắt đầu.",
+        "uploadOrDragAnImage": "Kéo ảnh từ thư viện ảnh hoặc <UploadButton>tải lên ảnh</UploadButton>.",
+        "exportCanvasToPSD": "Xuất Canvas Thành File PSD",
+        "ruleOfThirds": "Hiển Thị Quy Tắc Một Phần Ba",
+        "showNonRasterLayers": "Hiển Thị Layer Không Thuộc Dạng Raster (Shift + H)",
+        "hideNonRasterLayers": "Ẩn Layer Không Thuộc Dạng Raster (Shift + H)",
+        "autoSwitch": {
+            "off": "Tắt",
+            "switchOnStart": "Khi Bắt Đầu",
+            "switchOnFinish": "Khi Kết Thúc"
+        }
     },
     "stylePresets": {
         "negativePrompt": "Lệnh Tiêu Cực",
@@ -2161,7 +2238,8 @@
         "deleteImage": "Xoá Hình Ảnh",
         "exportPromptTemplates": "Xuất Mẫu Trình Bày Cho Lệnh Ra (CSV)",
         "templateDeleted": "Mẫu trình bày cho lệnh đã được xoá",
-        "unableToDeleteTemplate": "Không thể xoá mẫu trình bày cho lệnh"
+        "unableToDeleteTemplate": "Không thể xoá mẫu trình bày cho lệnh",
+        "togglePromptPreviews": "Bật/Tắt Xem Trước Lệnh"
     },
     "system": {
         "enableLogging": "Bật Chế Độ Ghi Log",
@@ -2257,7 +2335,26 @@
         "workflowUnpublished": "Workflow Đã Được Ngừng Đăng Tải",
         "problemUnpublishingWorkflow": "Có Vấn Đề Khi Ngừng Đăng Tải Workflow",
         "chatGPT4oIncompatibleGenerationMode": "ChatGPT 4o chỉ hỗ trợ Từ Ngữ Sang Hình Ảnh và Hình Ảnh Sang Hình Ảnh. Hãy dùng model khác cho các tác vụ Inpaint và Outpaint.",
-        "imagenIncompatibleGenerationMode": "Google {{model}} chỉ hỗ trợ Từ Ngữ Sang Hình Ảnh. Dùng các model khác cho Hình Ảnh Sang Hình Ảnh, Inpaint và Outpaint."
+        "imagenIncompatibleGenerationMode": "Google {{model}} chỉ hỗ trợ Từ Ngữ Sang Hình Ảnh. Dùng các model khác cho Hình Ảnh Sang Hình Ảnh, Inpaint và Outpaint.",
+        "fluxKontextIncompatibleGenerationMode": "FLUX Kontext không hỗ trợ tạo sinh từ hình ảnh từ canvas. Thử sử dụng Ảnh Mẫu và tắt các Layer Dạng Raster.",
+        "noRasterLayers": "Không Tìm Thấy Layer Dạng Raster",
+        "noRasterLayersDesc": "Tạo ít nhất một layer dạng raster để xuất file PSD",
+        "noActiveRasterLayers": "Không Có Layer Dạng Raster Hoạt Động",
+        "noActiveRasterLayersDesc": "Khởi động ít nhất một layer dạng raster để xuất file PSD",
+        "noVisibleRasterLayers": "Không Có Layer Dạng Raster Hiển Thị",
+        "noVisibleRasterLayersDesc": "Khởi động ít nhất một layer dạng raster để xuất file PSD",
+        "invalidCanvasDimensions": "Kích Thước Canvas Không Phù Hợp",
+        "canvasTooLarge": "Canvas Quá Lớn",
+        "canvasTooLargeDesc": "Kích thước canvas vượt mức tối đa cho phép để xuất file PSD. Giảm cả chiều dài và chiều rộng chủa canvas và thử lại.",
+        "failedToProcessLayers": "Thất Bại Khi Xử Lý Layer",
+        "psdExportSuccess": "Xuất File PSD Hoàn Tất",
+        "psdExportSuccessDesc": "Thành công xuất {{count}} layer sang file PSD",
+        "problemExportingPSD": "Có Vấn Đề Khi Xuất File PSD",
+        "canvasManagerNotAvailable": "Trình Quản Lý Canvas Không Có Sẵn",
+        "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."
     },
     "ui": {
         "tabs": {
@@ -2271,6 +2368,55 @@
             "queue": "Queue (Hàng Đợi)",
             "workflows": "Workflow (Luồng Làm Việc)",
             "workflowsTab": "$t(common.tab) $t(ui.tabs.workflows)"
+        },
+        "launchpad": {
+            "workflowsTitle": "Đi sâu hơn với Workflow.",
+            "upscalingTitle": "Upscale và thêm chi tiết.",
+            "canvasTitle": "Biên tập và làm đẹp trên Canvas.",
+            "generateTitle": "Tạo sinh ảnh từ lệnh chữ.",
+            "modelGuideText": "Muốn biết lệnh nào tốt nhất cho từng model chứ?",
+            "modelGuideLink": "Xem thêm Hướng Dẫn Model.",
+            "workflows": {
+                "description": "Workflow là các template tái sử dụng được sẽ tự động hoá các tác vụ tạo sinh ảnh, cho phép bạn nhanh chóng thực hiện cách thao tác phức tạp và nhận được kết quả nhất quán.",
+                "learnMoreLink": "Học thêm cách tạo ra workflow",
+                "browseTemplates": {
+                    "title": "Duyệt Template Workflow",
+                    "description": "Chọn từ các workflow có sẵn cho những tác vụ cơ bản"
+                },
+                "createNew": {
+                    "title": "Tạo workflow mới",
+                    "description": "Tạo workflow mới từ ban đầu"
+                },
+                "loadFromFile": {
+                    "title": "Tải workflow từ tệp",
+                    "description": "Tải lên workflow để bắt đầu với những thiết lập sẵn có"
+                }
+            },
+            "upscaling": {
+                "uploadImage": {
+                    "title": "Tải Ảnh Để Upscale",
+                    "description": "Nhấp hoặc kéo ảnh để upscale (JPG, PNG, WebP lên đến 100MB)"
+                },
+                "replaceImage": {
+                    "title": "Thay Thế Ảnh Hiện Tại",
+                    "description": "Nhấp hoặc kéo ảnh mới để thay thế cái hiện tại"
+                },
+                "imageReady": {
+                    "title": "Ảnh Đã Sẵn Sàng",
+                    "description": "Bấm 'Kích Hoạt' để chuẩn bị upscale"
+                },
+                "readyToUpscale": {
+                    "title": "Chuẩn bị upscale!",
+                    "description": "Điều chỉnh thiết lập bên dưới, sau đó bấm vào nút 'Khởi Động' để chuẩn bị upscale ảnh."
+                },
+                "upscaleModel": "Model Upscale",
+                "model": "Model",
+                "helpText": {
+                    "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"
+            }
         }
     },
     "workflows": {
@@ -2423,7 +2569,10 @@
         "postProcessingMissingModelWarning": "Đến <LinkComponent>Trình Quản Lý Model</LinkComponent> để tải model xử lý hậu kỳ (ảnh sang ảnh).",
         "missingModelsWarning": "Đến <LinkComponent>Trình Quản Lý Model</LinkComponent> để tải model cần thiết:",
         "incompatibleBaseModel": "Phiên bản model chính không được hỗ trợ để upscale",
-        "incompatibleBaseModelDesc": "Upscale chỉ hỗ trợ cho model phiên bản SD1.5 và SDXL. Đổi model chính để bật lại tính năng upscale."
+        "incompatibleBaseModelDesc": "Upscale chỉ hỗ trợ cho model phiên bản SD1.5 và SDXL. Đổi model chính để bật lại tính năng upscale.",
+        "tileControl": "Điều Chỉnh Khối",
+        "tileSize": "Kích Thước Khối",
+        "tileOverlap": "Chồng Chéo Khối"
     },
     "newUserExperience": {
         "toGetStartedLocal": "Để bắt đầu, hãy chắc chắn đã tải xuống hoặc thêm vào model cần để chạy Invoke. Sau đó, nhập lệnh vào hộp và nhấp chuột vào <StrongComponent>Kích Hoạt</StrongComponent> để tạo ra bức ảnh đầu tiên. Chọn một mẫu trình bày cho lệnh để cải thiện kết quả. Bạn có thể chọn để lưu ảnh trực tiếp vào <StrongComponent>Thư Viện Ảnh</StrongComponent> hoặc chỉnh sửa chúng ở <StrongComponent>Canvas</StrongComponent>.",
@@ -2439,8 +2588,9 @@
         "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": [
-            "Nvidia 50xx GPUs: Invoke sử dụng PyTorch 2.7.0, thứ tối quan trọng cho những GPU trên.",
-            "Mối Quan Hệ Model: Kết nối LoRA với model chính, và LoRA đó sẽ được hiển thị đầu danh sách."
+            "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."
         ]
     },
     "upsell": {
@@ -2452,64 +2602,18 @@
     "supportVideos": {
         "supportVideos": "Video Hỗ Trợ",
         "gettingStarted": "Bắt Đầu Làm Quen",
-        "studioSessionsDesc1": "Xem thử <StudioSessionsPlaylistLink /> để hiểu rõ Invoke hơn.",
-        "studioSessionsDesc2": "Đến <DiscordLink /> để tham gia vào phiên trực tiếp và hỏi câu hỏi. Các phiên được tải lên danh sách phát vào các tuần.",
+        "watch": "Xem",
+        "studioSessionsDesc": "Tham gia <DiscordLink /> để xem các buổi phát trực tiếp và đặt câu hỏi. Các phiên được đăng lên trên playlist các tuần tiếp theo.",
         "videos": {
-            "howDoIDoImageToImageTransformation": {
-                "title": "Làm Sao Để Tôi Dùng Trình Biến Đổi Hình Ảnh Sang Hình Ảnh?",
-                "description": "Hướng dẫn cách thực hiện biến đổi ảnh sang ảnh trong Invoke."
+            "gettingStarted": {
+                "title": "Bắt Đầu Với Invoke",
+                "description": "Hoàn thành các video bao hàm mọi thứ bạn cần biết để bắt đầu với Invoke, từ tạo bức ảnh đầu tiên đến các kỹ thuật phức tạp khác."
             },
-            "howDoIUseGlobalIPAdaptersAndReferenceImages": {
-                "description": "Giới thiệu về ảnh mẫu và IP adapter toàn vùng.",
-                "title": "Làm Sao Để Tôi Dùng IP Adapter Toàn Vùng Và Ảnh Mẫu?"
-            },
-            "creatingAndComposingOnInvokesControlCanvas": {
-                "description": "Học cách sáng tạo ảnh bằng trình điều khiển canvas của Invoke.",
-                "title": "Sáng Tạo Trong Trình Kiểm Soát Canvas Của Invoke"
-            },
-            "upscaling": {
-                "description": "Cách upscale ảnh bằng bộ công cụ của Invoke để nâng cấp độ phân giải.",
-                "title": "Upscale (Nâng Cấp Chất Lượng Hình Ảnh)"
-            },
-            "howDoIGenerateAndSaveToTheGallery": {
-                "title": "Làm Sao Để Tôi Tạo Sinh Và Lưu Vào Thư Viện Ảnh?",
-                "description": "Các bước để tạo sinh và lưu ảnh vào thư viện ảnh."
-            },
-            "howDoIEditOnTheCanvas": {
-                "description": "Hướng dẫn chỉnh sửa ảnh trực tiếp trên canvas.",
-                "title": "Làm Sao Để Tôi Chỉnh Sửa Trên Canvas?"
-            },
-            "howDoIUseControlNetsAndControlLayers": {
-                "title": "Làm Sao Để Tôi Dùng ControlNet và Layer Điều Khiển Được?",
-                "description": "Học cách áp dụng layer điều khiển được và controlnet vào ảnh của bạn."
-            },
-            "howDoIUseInpaintMasks": {
-                "title": "Làm Sao Để Tôi Dùng Lớp Phủ Inpaint?",
-                "description": "Cách áp dụng lớp phủ inpaint vào chỉnh sửa và thay đổi ảnh."
-            },
-            "howDoIOutpaint": {
-                "title": "Làm Sao Để Tôi Outpaint?",
-                "description": "Hướng dẫn outpaint bên ngoài viền ảnh gốc."
-            },
-            "creatingYourFirstImage": {
-                "description": "Giới thiệu về cách tạo ảnh từ ban đầu bằng công cụ Invoke.",
-                "title": "Tạo Hình Ảnh Đầu Tiên Của Bạn"
-            },
-            "usingControlLayersAndReferenceGuides": {
-                "description": "Học cách chỉ dẫn ảnh được tạo ra bằng layer điều khiển được và ảnh mẫu.",
-                "title": "Dùng Layer Điều Khiển Được và Chỉ Dẫn Mẫu"
-            },
-            "understandingImageToImageAndDenoising": {
-                "title": "Hiểu Rõ Trình Hình Ảnh Sang Hình Ảnh Và Trình Khử Nhiễu",
-                "description": "Tổng quan về trình biến đổi ảnh sang ảnh và trình khử nhiễu trong Invoke."
-            },
-            "exploringAIModelsAndConceptAdapters": {
-                "title": "Khám Phá Model AI Và Khái Niệm Về Adapter",
-                "description": "Đào sâu vào model AI và cách dùng những adapter để điều khiển một cách sáng tạo."
+            "studioSessions": {
+                "title": "Phiên Studio",
+                "description": "Đào sâu vào các phiên họp để khám phá những tính năng nâng cao của Invoke, sáng tạo workflow, và thảo luận cộng đồng."
             }
-        },
-        "controlCanvas": "Điều Khiển Canvas",
-        "watch": "Xem"
+        }
     },
     "modelCache": {
         "clearSucceeded": "Cache Model Đã Được Dọn",

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

@@ -11,6 +11,7 @@ import { memo, useCallback } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
 import AppErrorBoundaryFallback from './AppErrorBoundaryFallback';
+import ThemeLocaleProvider from './ThemeLocaleProvider';
 const DEFAULT_CONFIG = {};
 
 interface Props {
@@ -29,14 +30,16 @@ const App = ({ config = DEFAULT_CONFIG, studioInitAction }: Props) => {
   }, [clearStorage]);
 
   return (
-    <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
-      <Box id="invoke-app-wrapper" w="100dvw" h="100dvh" position="relative" overflow="hidden">
-        <AppContent />
-        {!didStudioInit && <Loading />}
-      </Box>
-      <GlobalHookIsolator config={config} studioInitAction={studioInitAction} />
-      <GlobalModalIsolator />
-    </ErrorBoundary>
+    <ThemeLocaleProvider>
+      <ErrorBoundary onReset={handleReset} FallbackComponent={AppErrorBoundaryFallback}>
+        <Box id="invoke-app-wrapper" w="100dvw" h="100dvh" position="relative" overflow="hidden">
+          <AppContent />
+          {!didStudioInit && <Loading />}
+        </Box>
+        <GlobalHookIsolator config={config} studioInitAction={studioInitAction} />
+        <GlobalModalIsolator />
+      </ErrorBoundary>
+    </ThemeLocaleProvider>
   );
 };
 

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

@@ -2,6 +2,7 @@ import { useGlobalModifiersInit } from '@invoke-ai/ui-library';
 import { setupListeners } from '@reduxjs/toolkit/query';
 import type { StudioInitAction } from 'app/hooks/useStudioInitAction';
 import { useStudioInitAction } from 'app/hooks/useStudioInitAction';
+import { useSyncLangDirection } from 'app/hooks/useSyncLangDirection';
 import { useSyncQueueStatus } from 'app/hooks/useSyncQueueStatus';
 import { useLogger } from 'app/logging/useLogger';
 import { useSyncLoggingConfig } from 'app/logging/useSyncLoggingConfig';
@@ -15,6 +16,8 @@ import { useDndMonitor } from 'features/dnd/useDndMonitor';
 import { useDynamicPromptsWatcher } from 'features/dynamicPrompts/hooks/useDynamicPromptsWatcher';
 import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterModelsToast';
 import { useWorkflowBuilderWatcher } from 'features/nodes/components/sidePanel/workflow/IsolatedWorkflowBuilderWatcher';
+import { useSyncExecutionState } from 'features/nodes/hooks/useNodeExecutionState';
+import { useSyncNodeErrors } from 'features/nodes/store/util/fieldValidators';
 import { useReadinessWatcher } from 'features/queue/store/readiness';
 import { configChanged } from 'features/system/store/configSlice';
 import { selectLanguage } from 'features/system/store/systemSelectors';
@@ -47,10 +50,13 @@ export const GlobalHookIsolator = memo(
     useCloseChakraTooltipsOnDragFix();
     useNavigationApi();
     useDndMonitor();
+    useSyncNodeErrors();
+    useSyncLangDirection();
 
     // Persistent subscription to the queue counts query - canvas relies on this to know if there are pending
     // and/or in progress canvas sessions.
     useGetQueueCountsByDestinationQuery(queueCountArg);
+    useSyncExecutionState();
 
     useEffect(() => {
       i18n.changeLanguage(language);

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

@@ -1,10 +1,6 @@
 import { GlobalImageHotkeys } from 'app/components/GlobalImageHotkeys';
 import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal';
 import { CanvasPasteModal } from 'features/controlLayers/components/CanvasPasteModal';
-import {
-  NewCanvasSessionDialog,
-  NewGallerySessionDialog,
-} from 'features/controlLayers/components/NewSessionConfirmationAlertDialog';
 import { CanvasManagerProviderGate } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { DeleteImageModal } from 'features/deleteImageModal/components/DeleteImageModal';
 import { FullscreenDropzone } from 'features/dnd/FullscreenDropzone';
@@ -50,8 +46,6 @@ export const GlobalModalIsolator = memo(() => {
       <RefreshAfterResetModal />
       <DeleteBoardModal />
       <GlobalImageHotkeys />
-      <NewGallerySessionDialog />
-      <NewCanvasSessionDialog />
       <ImageContextMenu />
       <FullscreenDropzone />
       <VideosModal />

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

@@ -42,7 +42,6 @@ import { $socketOptions } from 'services/events/stores';
 import type { ManagerOptions, SocketOptions } from 'socket.io-client';
 
 const App = lazy(() => import('./App'));
-const ThemeLocaleProvider = lazy(() => import('./ThemeLocaleProvider'));
 
 interface Props extends PropsWithChildren {
   apiUrl?: string;
@@ -318,7 +317,7 @@ const InvokeAIUI = ({
     if (import.meta.env.MODE === 'development') {
       window.$store = $store;
     }
-    () => {
+    return () => {
       $store.set(undefined);
       if (import.meta.env.MODE === 'development') {
         window.$store = undefined;
@@ -330,9 +329,7 @@ const InvokeAIUI = ({
     <React.StrictMode>
       <Provider store={store}>
         <React.Suspense fallback={<Loading />}>
-          <ThemeLocaleProvider>
-            <App config={config} studioInitAction={studioInitAction} />
-          </ThemeLocaleProvider>
+          <App config={config} studioInitAction={studioInitAction} />
         </React.Suspense>
       </Provider>
     </React.StrictMode>

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

@@ -3,43 +3,39 @@ import 'overlayscrollbars/overlayscrollbars.css';
 import '@xyflow/react/dist/base.css';
 import 'common/components/OverlayScrollbars/overlayscrollbars.css';
 
-import { ChakraProvider, DarkMode, extendTheme, theme as _theme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
+import { ChakraProvider, DarkMode, extendTheme, theme as baseTheme, TOAST_OPTIONS } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { $direction } from 'app/hooks/useSyncLangDirection';
 import type { ReactNode } from 'react';
-import { memo, useEffect, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
+import { memo, useMemo } from 'react';
 
 type ThemeLocaleProviderProps = {
   children: ReactNode;
 };
 
+const buildTheme = (direction: 'ltr' | 'rtl') => {
+  return extendTheme({
+    ...baseTheme,
+    direction,
+    shadows: {
+      ...baseTheme.shadows,
+      selected:
+        'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-500), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
+      hoverSelected:
+        'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-400), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
+      hoverUnselected:
+        'inset 0px 0px 0px 2px var(--invoke-colors-invokeBlue-300), inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-800)',
+      selectedForCompare:
+        'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-300), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
+      hoverSelectedForCompare:
+        'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-200), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
+    },
+  });
+};
+
 function ThemeLocaleProvider({ children }: ThemeLocaleProviderProps) {
-  const { i18n } = useTranslation();
-
-  const direction = i18n.dir();
-
-  const theme = useMemo(() => {
-    return extendTheme({
-      ..._theme,
-      direction,
-      shadows: {
-        ..._theme.shadows,
-        selected:
-          'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-500), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
-        hoverSelected:
-          'inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-400), inset 0px 0px 0px 4px var(--invoke-colors-invokeBlue-800)',
-        hoverUnselected:
-          'inset 0px 0px 0px 2px var(--invoke-colors-invokeBlue-300), inset 0px 0px 0px 3px var(--invoke-colors-invokeBlue-800)',
-        selectedForCompare:
-          'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-300), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
-        hoverSelectedForCompare:
-          'inset 0px 0px 0px 3px var(--invoke-colors-invokeGreen-200), inset 0px 0px 0px 4px var(--invoke-colors-invokeGreen-800)',
-      },
-    });
-  }, [direction]);
-
-  useEffect(() => {
-    document.body.dir = direction;
-  }, [direction]);
+  const direction = useStore($direction);
+  const theme = useMemo(() => buildTheme(direction), [direction]);
 
   return (
     <ChakraProvider theme={theme} toastOptions={TOAST_OPTIONS}>

invokeai/frontend/web/src/app/hooks/useStudioInitAction.ts

@@ -21,7 +21,6 @@ import { $isStylePresetsMenuOpen, activeStylePresetIdChanged } from 'features/st
 import { toast } from 'features/toast/toast';
 import { navigationApi } from 'features/ui/layouts/navigation-api';
 import { LAUNCHPAD_PANEL_ID, WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
 import { useLoadWorkflowWithDialog } from 'features/workflowLibrary/components/LoadWorkflowConfirmationAlertDialog';
 import { atom } from 'nanostores';
 import { useCallback, useEffect } from 'react';
@@ -165,12 +164,10 @@ export const useStudioInitAction = (action?: StudioInitAction) => {
           // Go to the generate tab, open the launchpad
           await navigationApi.focusPanel('generate', LAUNCHPAD_PANEL_ID);
           store.dispatch(paramsReset());
-          store.dispatch(activeTabCanvasRightPanelChanged('gallery'));
           break;
         case 'canvas':
           // Go to the canvas tab, open the launchpad
           await navigationApi.focusPanel('canvas', WORKSPACE_PANEL_ID);
-          store.dispatch(canvasReset());
           break;
         case 'workflows':
           // Go to the workflows tab

invokeai/frontend/web/src/app/hooks/useSyncLangDirection.ts

@@ -0,0 +1,36 @@
+import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
+import { atom } from 'nanostores';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Global atom storing the language direction, to be consumed by the Chakra theme.
+ *
+ * Why do we need this? We have a kind of catch-22:
+ * - The Chakra theme needs to know the language direction to apply the correct styles.
+ * - The language direction is determined by i18n and the language selection.
+ * - We want our error boundary to be themed.
+ * - It's possible that i18n can throw if the language selection is invalid or not supported.
+ *
+ * Previously, we had the logic in this file in the theme provider, which wrapped the error boundary. The error
+ * was properly themed. But then, if i18n threw in the theme provider, the error boundary does not catch the
+ * error. The app would crash to a white screen.
+ *
+ * We tried swapping the component hierarchy so that the error boundary wraps the theme provider, but then the
+ * error boundary isn't themed!
+ *
+ * The solution is to move this i18n direction logic out of the theme provider and into a hook that we can use
+ * within the error boundary. The error boundary will be themed, _and_ catch any i18n errors.
+ */
+export const $direction = atom<'ltr' | 'rtl'>('ltr');
+
+export const useSyncLangDirection = () => {
+  useAssertSingleton('useSyncLangDirection');
+  const { i18n, t } = useTranslation();
+
+  useEffect(() => {
+    const direction = i18n.dir();
+    $direction.set(direction);
+    document.body.dir = direction;
+  }, [i18n, t]);
+};

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

@@ -2,7 +2,7 @@ import { createLogWriter } from '@roarr/browser-log-writer';
 import { atom } from 'nanostores';
 import type { Logger, MessageSerializer } from 'roarr';
 import { ROARR, Roarr } from 'roarr';
-import { z } from 'zod/v4';
+import { z } from 'zod';
 
 const serializeMessage: MessageSerializer = (message) => {
   return JSON.stringify(message);

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

@@ -1,7 +1,7 @@
 import { logger } from 'app/logging/logger';
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { bboxSyncedToOptimalDimension, rgRefImageModelChanged } from 'features/controlLayers/store/canvasSlice';
-import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { buildSelectIsStaging, selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { loraDeleted } from 'features/controlLayers/store/lorasSlice';
 import { modelChanged, syncedToOptimalDimension, vaeSelected } from 'features/controlLayers/store/paramsSlice';
 import { refImageModelChanged, selectReferenceImageEntities } from 'features/controlLayers/store/refImagesSlice';
@@ -152,7 +152,8 @@ export const addModelSelectedListener = (startAppListening: AppStartListening) =
       if (modelBase !== state.params.model?.base) {
         // Sync generate tab settings whenever the model base changes
         dispatch(syncedToOptimalDimension());
-        if (!selectIsStaging(state)) {
+        const isStaging = buildSelectIsStaging(selectCanvasSessionId(state))(state);
+        if (!isStaging) {
           // Canvas tab only syncs if not staging
           dispatch(bboxSyncedToOptimalDimension());
         }

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

@@ -15,7 +15,11 @@ import { refImageModelChanged, selectRefImagesSlice } from 'features/controlLaye
 import { selectCanvasSlice } from 'features/controlLayers/store/selectors';
 import { getEntityIdentifier, isFLUXReduxConfig, isIPAdapterConfig } from 'features/controlLayers/store/types';
 import { modelSelected } from 'features/parameters/store/actions';
-import { postProcessingModelChanged, upscaleModelChanged } from 'features/parameters/store/upscaleSlice';
+import {
+  postProcessingModelChanged,
+  tileControlnetModelChanged,
+  upscaleModelChanged,
+} from 'features/parameters/store/upscaleSlice';
 import {
   zParameterCLIPEmbedModel,
   zParameterSpandrelImageToImageModel,
@@ -28,6 +32,7 @@ import type { AnyModelConfig } from 'services/api/types';
 import {
   isCLIPEmbedModelConfig,
   isControlLayerModelConfig,
+  isControlNetModelConfig,
   isFluxReduxModelConfig,
   isFluxVAEModelConfig,
   isIPAdapterModelConfig,
@@ -71,6 +76,7 @@ export const addModelsLoadedListener = (startAppListening: AppStartListening) =>
       handleControlAdapterModels(models, state, dispatch, log);
       handlePostProcessingModel(models, state, dispatch, log);
       handleUpscaleModel(models, state, dispatch, log);
+      handleTileControlNetModel(models, state, dispatch, log);
       handleIPAdapterModels(models, state, dispatch, log);
       handleT5EncoderModels(models, state, dispatch, log);
       handleCLIPEmbedModels(models, state, dispatch, log);
@@ -345,6 +351,46 @@ const handleUpscaleModel: ModelHandler = (models, state, dispatch, log) => {
   }
 };
 
+const handleTileControlNetModel: ModelHandler = (models, state, dispatch, log) => {
+  const selectedTileControlNetModel = state.upscale.tileControlnetModel;
+  const controlNetModels = models.filter(isControlNetModelConfig);
+
+  // If the currently selected model is available, we don't need to do anything
+  if (selectedTileControlNetModel && controlNetModels.some((m) => m.key === selectedTileControlNetModel.key)) {
+    return;
+  }
+
+  // The only way we have to identify a model as a tile model is by its name containing 'tile' :)
+  const tileModel = controlNetModels.find((m) => m.name.toLowerCase().includes('tile'));
+
+  // If we have a tile model, select it
+  if (tileModel) {
+    log.debug(
+      { selectedTileControlNetModel, tileModel },
+      'No selected tile ControlNet model or selected model is not available, selecting tile model'
+    );
+    dispatch(tileControlnetModelChanged(tileModel));
+    return;
+  }
+
+  // Otherwise, select the first available ControlNet model
+  const firstModel = controlNetModels[0] || null;
+  if (firstModel) {
+    log.debug(
+      { selectedTileControlNetModel, firstModel },
+      'No tile ControlNet model found, selecting first available ControlNet model'
+    );
+    dispatch(tileControlnetModelChanged(firstModel));
+    return;
+  }
+
+  // No available models, we should clear the selected model - but only if we have one selected
+  if (selectedTileControlNetModel) {
+    log.debug({ selectedTileControlNetModel }, 'Selected tile ControlNet model is not available, clearing');
+    dispatch(tileControlnetModelChanged(null));
+  }
+};
+
 const handleT5EncoderModels: ModelHandler = (models, state, dispatch, log) => {
   const selectedT5EncoderModel = state.params.t5EncoderModel;
   const t5EncoderModels = models.filter((m) => isT5EncoderModelConfig(m));

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

@@ -1,7 +1,7 @@
 import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
 import { isNil } from 'es-toolkit';
 import { bboxHeightChanged, bboxWidthChanged } from 'features/controlLayers/store/canvasSlice';
-import { selectIsStaging } from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { buildSelectIsStaging, selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
   heightChanged,
   setCfgRescaleMultiplier,
@@ -115,7 +115,8 @@ export const addSetDefaultSettingsListener = (startAppListening: AppStartListeni
         }
         const setSizeOptions = { updateAspectRatio: true, clamp: true };
 
-        const isStaging = selectIsStaging(getState());
+        const isStaging = buildSelectIsStaging(selectCanvasSessionId(state))(state);
+
         const activeTab = selectActiveTab(getState());
         if (activeTab === 'generate') {
           if (isParameterWidth(width)) {

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

@@ -31,7 +31,7 @@ import { diff } from 'jsondiffpatch';
 import dynamicMiddlewares from 'redux-dynamic-middlewares';
 import type { SerializeFunction, UnserializeFunction } from 'redux-remember';
 import { rememberEnhancer, rememberReducer } from 'redux-remember';
-import undoable from 'redux-undo';
+import undoable, { newHistory } from 'redux-undo';
 import { serializeError } from 'serialize-error';
 import { api } from 'services/api';
 import { authToastMiddleware } from 'services/api/authToastMiddleware';
@@ -118,6 +118,7 @@ const unserialize: UnserializeFunction = (data, key) => {
   if (!persistConfig) {
     throw new Error(`No persist config for slice "${key}"`);
   }
+  let state;
   try {
     const { initialState, migrate } = persistConfig;
     const parsed = JSON.parse(data);
@@ -141,13 +142,21 @@ const unserialize: UnserializeFunction = (data, key) => {
       },
       `Rehydrated slice "${key}"`
     );
-    return transformed;
+    state = transformed;
   } catch (err) {
     log.warn(
       { error: serializeError(err as Error) },
       `Error rehydrating slice "${key}", falling back to default initial state`
     );
-    return persistConfig.initialState;
+    state = persistConfig.initialState;
+  }
+
+  // If the slice is undoable, we need to wrap it in a new history - only nodes and canvas are undoable at the moment.
+  // TODO(psyche): make this automatic & remove the hard-coding for specific slices.
+  if (key === nodesSlice.name || key === canvasSlice.name) {
+    return newHistory([], state, []);
+  } else {
+    return state;
   }
 };
 

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

@@ -67,6 +67,8 @@ export type Feature =
   | 'scale'
   | 'creativity'
   | 'structure'
+  | 'tileSize'
+  | 'tileOverlap'
   | 'optimizedDenoising'
   | 'fluxDevLicense';
 

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

@@ -11,9 +11,13 @@ import {
   Text,
 } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
+import { createSelector } from '@reduxjs/toolkit';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
 import { typedMemo } from 'common/util/typedMemo';
 import { NO_DRAG_CLASS, NO_WHEEL_CLASS } from 'features/nodes/types/constants';
+import { selectPickerCompactViewStates } from 'features/ui/store/uiSelectors';
+import { pickerCompactViewStateChanged } from 'features/ui/store/uiSlice';
 import type { AnyStore, ReadableAtom, Task, WritableAtom } from 'nanostores';
 import { atom, computed } from 'nanostores';
 import type { StoreValues } from 'nanostores/computed';
@@ -140,6 +144,10 @@ const NoMatchesFallbackWrapper = typedMemo(({ children }: PropsWithChildren) =>
 NoMatchesFallbackWrapper.displayName = 'NoMatchesFallbackWrapper';
 
 type PickerProps<T extends object> = {
+  /**
+   * Unique identifier for this picker instance. Used to persist compact view state.
+   */
+  pickerId?: string;
   /**
    * The options to display in the picker. This can be a flat array of options or an array of groups.
    */
@@ -204,10 +212,18 @@ type PickerProps<T extends object> = {
   initialGroupStates?: GroupStatusMap;
 };
 
+const buildSelectIsCompactView = (pickerId?: string) =>
+  createSelector([selectPickerCompactViewStates], (compactViewStates) => {
+    if (!pickerId) {
+      return true;
+    }
+    return compactViewStates[pickerId] ?? true;
+  });
+
 export type PickerContextState<T extends object> = {
   $optionsOrGroups: WritableAtom<OptionOrGroup<T>[]>;
   $groupStatusMap: WritableAtom<GroupStatusMap>;
-  $compactView: WritableAtom<boolean>;
+  isCompactView: boolean;
   $activeOptionId: WritableAtom<string | undefined>;
   $filteredOptions: WritableAtom<OptionOrGroup<T>[]>;
   $flattenedFilteredOptions: ReadableAtom<T[]>;
@@ -233,6 +249,7 @@ export type PickerContextState<T extends object> = {
   OptionComponent: React.ComponentType<{ option: T } & BoxProps>;
   NextToSearchBar?: React.ReactNode;
   searchable?: boolean;
+  pickerId?: string;
 };
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -503,6 +520,7 @@ const countOptions = <T extends object>(optionsOrGroups: OptionOrGroup<T>[]) =>
 
 export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
   const {
+    pickerId,
     getOptionId,
     optionsOrGroups,
     handleRef,
@@ -521,12 +539,12 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
   } = props;
   const rootRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+
   const { $groupStatusMap, $areAllGroupsDisabled, toggleGroup } = useTogglableGroups(
     optionsOrGroups,
     initialGroupStates
   );
   const $activeOptionId = useAtom(getFirstOptionId(optionsOrGroups, getOptionId));
-  const $compactView = useAtom(true);
   const $optionsOrGroups = useAtom(optionsOrGroups);
   const $totalOptionCount = useComputed([$optionsOrGroups], countOptions);
   const $filteredOptions = useAtom<OptionOrGroup<T>[]>([]);
@@ -538,6 +556,9 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
   const $searchTerm = useAtom('');
   const $selectedItemId = useComputed([$selectedItem], (item) => (item ? getOptionId(item) : undefined));
 
+  const selectIsCompactView = useMemo(() => buildSelectIsCompactView(pickerId), [pickerId]);
+  const isCompactView = useAppSelector(selectIsCompactView);
+
   const onSelectById = useCallback(
     (id: string) => {
       const options = $filteredOptions.get();
@@ -565,7 +586,7 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
       ({
         $optionsOrGroups,
         $groupStatusMap,
-        $compactView,
+        isCompactView,
         $activeOptionId,
         $filteredOptions,
         $flattenedFilteredOptions,
@@ -591,11 +612,12 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
         $hasOptions,
         $hasFilteredOptions,
         $filteredOptionsCount,
+        pickerId,
       }) satisfies PickerContextState<T>,
     [
       $optionsOrGroups,
       $groupStatusMap,
-      $compactView,
+      isCompactView,
       $activeOptionId,
       $filteredOptions,
       $flattenedFilteredOptions,
@@ -619,6 +641,7 @@ export const Picker = typedMemo(<T extends object>(props: PickerProps<T>) => {
       $hasOptions,
       $hasFilteredOptions,
       $filteredOptionsCount,
+      pickerId,
     ]
   );
 
@@ -869,15 +892,17 @@ GroupToggleButtons.displayName = 'GroupToggleButtons';
 
 const CompactViewToggleButton = typedMemo(<T extends object>() => {
   const { t } = useTranslation();
-  const { $compactView } = usePickerContext<T>();
-  const compactView = useStore($compactView);
+  const dispatch = useAppDispatch();
+  const { isCompactView, pickerId } = usePickerContext<T>();
 
   const onClick = useCallback(() => {
-    $compactView.set(!$compactView.get());
-  }, [$compactView]);
+    if (pickerId) {
+      dispatch(pickerCompactViewStateChanged({ pickerId, isCompact: !isCompactView }));
+    }
+  }, [dispatch, pickerId, isCompactView]);
 
-  const label = compactView ? t('common.fullView') : t('common.compactView');
-  const icon = compactView ? <PiArrowsOutLineVerticalBold /> : <PiArrowsInLineVerticalBold />;
+  const label = isCompactView ? t('common.fullView') : t('common.compactView');
+  const icon = isCompactView ? <PiArrowsOutLineVerticalBold /> : <PiArrowsInLineVerticalBold />;
 
   return <IconButton aria-label={label} tooltip={label} size="sm" variant="ghost" icon={icon} onClick={onClick} />;
 });
@@ -924,8 +949,7 @@ const listSx = {
 } satisfies SystemStyleObject;
 
 const PickerList = typedMemo(<T extends object>() => {
-  const { getOptionId, $compactView, $filteredOptions } = usePickerContext<T>();
-  const compactView = useStore($compactView);
+  const { getOptionId, isCompactView, $filteredOptions } = usePickerContext<T>();
   const filteredOptions = useStore($filteredOptions);
 
   if (filteredOptions.length === 0) {
@@ -934,10 +958,10 @@ const PickerList = typedMemo(<T extends object>() => {
 
   return (
     <ScrollableContent>
-      <Flex sx={listSx} data-is-compact={compactView}>
+      <Flex sx={listSx} data-is-compact={isCompactView}>
         {filteredOptions.map((optionOrGroup, i) => {
           if (isGroup(optionOrGroup)) {
-            const withDivider = !compactView && i < filteredOptions.length - 1;
+            const withDivider = !isCompactView && i < filteredOptions.length - 1;
             return (
               <React.Fragment key={optionOrGroup.id}>
                 <PickerGroup group={optionOrGroup} />
@@ -1079,14 +1103,13 @@ const groupHeaderSx = {
 
 const PickerGroupHeader = typedMemo(<T extends object>({ group }: { group: Group<T> }) => {
   const { t } = useTranslation();
-  const { $compactView } = usePickerContext<T>();
-  const compactView = useStore($compactView);
+  const { isCompactView } = usePickerContext<T>();
   const color = getGroupColor(group);
   const name = getGroupName(group);
   const count = getGroupCount(group, t);
 
   return (
-    <Flex sx={groupHeaderSx} data-is-compact={compactView}>
+    <Flex sx={groupHeaderSx} data-is-compact={isCompactView}>
       <Flex gap={2} alignItems="center">
         <Text fontSize="sm" fontWeight="semibold" color={color} noOfLines={1}>
           {name}

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

@@ -6,7 +6,6 @@ import { atom, computed } from 'nanostores';
 import type { RefObject } from 'react';
 import { useEffect } from 'react';
 import { objectKeys } from 'tsafe';
-import z from 'zod/v4';
 
 /**
  * We need to manage focus regions to conditionally enable hotkeys:
@@ -28,10 +27,7 @@ import z from 'zod/v4';
 
 const log = logger('system');
 
-/**
- * The names of the focus regions.
- */
-const zFocusRegionName = z.enum([
+const REGION_NAMES = [
   'launchpad',
   'viewer',
   'gallery',
@@ -41,13 +37,16 @@ const zFocusRegionName = z.enum([
   'workflows',
   'progress',
   'settings',
-]);
-export type FocusRegionName = z.infer<typeof zFocusRegionName>;
+] as const;
+/**
+ * The names of the focus regions.
+ */
+export type FocusRegionName = (typeof REGION_NAMES)[number];
 
 /**
  * A map of focus regions to the elements that are part of that region.
  */
-const REGION_TARGETS: Record<FocusRegionName, Set<HTMLElement>> = zFocusRegionName.options.values().reduce(
+const REGION_TARGETS: Record<FocusRegionName, Set<HTMLElement>> = REGION_NAMES.reduce(
   (acc, region) => {
     acc[region] = new Set<HTMLElement>();
     return acc;

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

@@ -6,7 +6,7 @@ import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
 import { selectIsClientSideUploadEnabled } from 'features/system/store/configSlice';
 import { toast } from 'features/toast/toast';
 import { memo, useCallback } from 'react';
-import type { FileRejection } from 'react-dropzone';
+import type { Accept, FileRejection } from 'react-dropzone';
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 import { PiUploadBold } from 'react-icons/pi';
@@ -15,6 +15,18 @@ import type { ImageDTO } from 'services/api/types';
 import { assert } from 'tsafe';
 import type { SetOptional } from 'type-fest';
 
+const addUpperCaseReducer = (acc: string[], ext: string) => {
+  acc.push(ext);
+  acc.push(ext.toUpperCase());
+  return acc;
+};
+
+export const dropzoneAccept: Accept = {
+  'image/png': ['.png'].reduce(addUpperCaseReducer, [] as string[]),
+  'image/jpeg': ['.jpg', '.jpeg', '.png'].reduce(addUpperCaseReducer, [] as string[]),
+  'image/webp': ['.webp'].reduce(addUpperCaseReducer, [] as string[]),
+};
+
 import { useClientSideUpload } from './useClientSideUpload';
 type UseImageUploadButtonArgs =
   | {
@@ -164,11 +176,7 @@ export const useImageUploadButton = ({
     getInputProps: getUploadInputProps,
     open: openUploader,
   } = useDropzone({
-    accept: {
-      'image/png': ['.png'],
-      'image/jpeg': ['.jpg', '.jpeg', '.png'],
-      'image/webp': ['.webp'],
-    },
+    accept: dropzoneAccept,
     onDropAccepted,
     onDropRejected,
     disabled: isDisabled,

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

@@ -1,3 +1,5 @@
-export const preventDefault = (e: React.MouseEvent) => {
+import type { MouseEvent } from 'react';
+
+export const preventDefault = (e: MouseEvent) => {
   e.preventDefault();
 };

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

@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import type React from 'react';
 import { memo } from 'react';
 
 /**
  * A typed version of React.memo, useful for components that take generics.
  */
-export const typedMemo: <T extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>>(
+export const typedMemo: <T extends keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<any>>(
   component: T,
   propsAreEqual?: (prevProps: React.ComponentProps<T>, nextProps: React.ComponentProps<T>) => boolean
 ) => T & { displayName?: string } = memo;

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

@@ -1,4 +1,4 @@
-import type { z } from 'zod/v4';
+import type { z } from 'zod';
 
 /**
  * Helper to create a type guard from a zod schema. The type guard will infer the schema's TS type.

invokeai/frontend/web/src/features/changeBoardModal/components/ChangeBoardModal.tsx

@@ -1,7 +1,6 @@
 import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
 import { Combobox, ConfirmationAlertDialog, Flex, FormControl, Text } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
 import {
@@ -14,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 import { useListAllBoardsQuery } from 'services/api/endpoints/boards';
 import { useAddImagesToBoardMutation, useRemoveImagesFromBoardMutation } from 'services/api/endpoints/images';
 
-const selectImagesToChange = createMemoizedSelector(
+const selectImagesToChange = createSelector(
   selectChangeBoardModalSlice,
   (changeBoardModal) => changeBoardModal.image_names
 );

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

@@ -13,7 +13,7 @@ export const CanvasAlertsSaveAllImagesToGallery = memo(() => {
   }
 
   return (
-    <Alert status="info" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
+    <Alert status="warning" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
       <AlertIcon />
       <AlertTitle>{t('controlLayers.settings.saveAllImagesToGallery.alert')}</AlertTitle>
     </Alert>

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

@@ -57,21 +57,21 @@ const CanvasAlertsSelectedEntityStatusContent = memo(({ entityIdentifier, adapte
   const alert = useMemo<AlertData | null>(() => {
     if (isFiltering) {
       return {
-        status: 'info',
+        status: 'warning',
         title: t('controlLayers.HUD.entityStatus.isFiltering', { title }),
       };
     }
 
     if (isTransforming) {
       return {
-        status: 'info',
+        status: 'warning',
         title: t('controlLayers.HUD.entityStatus.isTransforming', { title }),
       };
     }
 
     if (isEmpty) {
       return {
-        status: 'info',
+        status: 'warning',
         title: t('controlLayers.HUD.entityStatus.isEmpty', { title }),
       };
     }

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBar.tsx

@@ -3,6 +3,7 @@ import { EntityListGlobalActionBarAddLayerMenu } from 'features/controlLayers/co
 import { EntityListSelectedEntityActionBarDuplicateButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarDuplicateButton';
 import { EntityListSelectedEntityActionBarFill } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFill';
 import { EntityListSelectedEntityActionBarFilterButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarFilterButton';
+import { EntityListSelectedEntityActionBarInvertMaskButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton';
 import { EntityListSelectedEntityActionBarOpacity } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarOpacity';
 import { EntityListSelectedEntityActionBarSelectObjectButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarSelectObjectButton';
 import { EntityListSelectedEntityActionBarTransformButton } from 'features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarTransformButton';
@@ -21,6 +22,7 @@ export const EntityListSelectedEntityActionBar = memo(() => {
         <EntityListSelectedEntityActionBarSelectObjectButton />
         <EntityListSelectedEntityActionBarFilterButton />
         <EntityListSelectedEntityActionBarTransformButton />
+        <EntityListSelectedEntityActionBarInvertMaskButton />
         <EntityListSelectedEntityActionBarSaveToAssetsButton />
         <EntityListSelectedEntityActionBarDuplicateButton />
         <EntityListNonRasterLayerToggle />

invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton.tsx

@@ -0,0 +1,39 @@
+import { IconButton } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
+import { useInvertMask } from 'features/controlLayers/hooks/useInvertMask';
+import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import { isInpaintMaskEntityIdentifier } from 'features/controlLayers/store/types';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiSelectionInverseBold } from 'react-icons/pi';
+
+export const EntityListSelectedEntityActionBarInvertMaskButton = memo(() => {
+  const { t } = useTranslation();
+  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
+  const isBusy = useCanvasIsBusy();
+  const invertMask = useInvertMask();
+
+  if (!selectedEntityIdentifier) {
+    return null;
+  }
+
+  if (!isInpaintMaskEntityIdentifier(selectedEntityIdentifier)) {
+    return null;
+  }
+
+  return (
+    <IconButton
+      onClick={invertMask}
+      isDisabled={isBusy}
+      minW={8}
+      variant="link"
+      alignSelf="stretch"
+      aria-label={t('controlLayers.invertMask')}
+      tooltip={t('controlLayers.invertMask')}
+      icon={<PiSelectionInverseBold />}
+    />
+  );
+});
+
+EntityListSelectedEntityActionBarInvertMaskButton.displayName = 'EntityListSelectedEntityActionBarInvertMaskButton';

invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerSettingsEmptyState.tsx

@@ -5,7 +5,6 @@ import { useEntityIdentifierContext } from 'features/controlLayers/contexts/Enti
 import { usePullBboxIntoLayer } from 'features/controlLayers/hooks/saveCanvasHooks';
 import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy';
 import { replaceCanvasEntityObjectsWithImage } from 'features/imageActions/actions';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { Trans } from 'react-i18next';
 import type { ImageDTO } from 'services/api/types';
@@ -21,9 +20,6 @@ export const ControlLayerSettingsEmptyState = memo(() => {
     [dispatch, entityIdentifier, getState]
   );
   const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
-  const onClickGalleryButton = useCallback(() => {
-    dispatch(activeTabCanvasRightPanelChanged('gallery'));
-  }, [dispatch]);
   const pullBboxIntoLayer = usePullBboxIntoLayer(entityIdentifier);
 
   const components = useMemo(
@@ -31,14 +27,11 @@ export const ControlLayerSettingsEmptyState = memo(() => {
       UploadButton: (
         <Button isDisabled={isBusy} size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />
       ),
-      GalleryButton: (
-        <Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
-      ),
       PullBboxButton: (
         <Button onClick={pullBboxIntoLayer} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
       ),
     }),
-    [isBusy, onClickGalleryButton, pullBboxIntoLayer, uploadApi]
+    [isBusy, pullBboxIntoLayer, uploadApi]
   );
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/NewSessionConfirmationAlertDialog.tsx

@@ -1,131 +0,0 @@
-import { Checkbox, ConfirmationAlertDialog, Flex, FormControl, FormLabel, Text } from '@invoke-ai/ui-library';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { useAssertSingleton } from 'common/hooks/useAssertSingleton';
-import { buildUseBoolean } from 'common/hooks/useBoolean';
-import { canvasSessionReset, generateSessionReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
-import {
-  selectSystemShouldConfirmOnNewSession,
-  shouldConfirmOnNewSessionToggled,
-} from 'features/system/store/systemSlice';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
-import { memo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const [useNewGallerySessionDialog] = buildUseBoolean(false);
-const [useNewCanvasSessionDialog] = buildUseBoolean(false);
-
-const useNewGallerySession = () => {
-  const dispatch = useAppDispatch();
-  const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
-  const newSessionDialog = useNewGallerySessionDialog();
-
-  const newGallerySessionImmediate = useCallback(() => {
-    dispatch(generateSessionReset());
-    dispatch(activeTabCanvasRightPanelChanged('gallery'));
-  }, [dispatch]);
-
-  const newGallerySessionWithDialog = useCallback(() => {
-    if (shouldConfirmOnNewSession) {
-      newSessionDialog.setTrue();
-      return;
-    }
-    newGallerySessionImmediate();
-  }, [newGallerySessionImmediate, newSessionDialog, shouldConfirmOnNewSession]);
-
-  return { newGallerySessionImmediate, newGallerySessionWithDialog };
-};
-
-const useNewCanvasSession = () => {
-  const dispatch = useAppDispatch();
-  const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
-  const newSessionDialog = useNewCanvasSessionDialog();
-
-  const newCanvasSessionImmediate = useCallback(() => {
-    dispatch(canvasSessionReset());
-    dispatch(activeTabCanvasRightPanelChanged('layers'));
-  }, [dispatch]);
-
-  const newCanvasSessionWithDialog = useCallback(() => {
-    if (shouldConfirmOnNewSession) {
-      newSessionDialog.setTrue();
-      return;
-    }
-
-    newCanvasSessionImmediate();
-  }, [newCanvasSessionImmediate, newSessionDialog, shouldConfirmOnNewSession]);
-
-  return { newCanvasSessionImmediate, newCanvasSessionWithDialog };
-};
-
-export const NewGallerySessionDialog = memo(() => {
-  useAssertSingleton('NewGallerySessionDialog');
-  const { t } = useTranslation();
-  const dispatch = useAppDispatch();
-
-  const dialog = useNewGallerySessionDialog();
-  const { newGallerySessionImmediate } = useNewGallerySession();
-
-  const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
-  const onToggleConfirm = useCallback(() => {
-    dispatch(shouldConfirmOnNewSessionToggled());
-  }, [dispatch]);
-
-  return (
-    <ConfirmationAlertDialog
-      isOpen={dialog.isTrue}
-      onClose={dialog.setFalse}
-      title={t('controlLayers.newGallerySession')}
-      acceptCallback={newGallerySessionImmediate}
-      acceptButtonText={t('common.ok')}
-      useInert={false}
-    >
-      <Flex direction="column" gap={3}>
-        <Text>{t('controlLayers.newGallerySessionDesc')}</Text>
-        <Text>{t('common.areYouSure')}</Text>
-        <FormControl>
-          <FormLabel>{t('common.dontAskMeAgain')}</FormLabel>
-          <Checkbox isChecked={!shouldConfirmOnNewSession} onChange={onToggleConfirm} />
-        </FormControl>
-      </Flex>
-    </ConfirmationAlertDialog>
-  );
-});
-
-NewGallerySessionDialog.displayName = 'NewGallerySessionDialog';
-
-export const NewCanvasSessionDialog = memo(() => {
-  useAssertSingleton('NewCanvasSessionDialog');
-  const { t } = useTranslation();
-
-  const dispatch = useAppDispatch();
-
-  const dialog = useNewCanvasSessionDialog();
-  const { newCanvasSessionImmediate } = useNewCanvasSession();
-
-  const shouldConfirmOnNewSession = useAppSelector(selectSystemShouldConfirmOnNewSession);
-  const onToggleConfirm = useCallback(() => {
-    dispatch(shouldConfirmOnNewSessionToggled());
-  }, [dispatch]);
-
-  return (
-    <ConfirmationAlertDialog
-      isOpen={dialog.isTrue}
-      onClose={dialog.setFalse}
-      title={t('controlLayers.newCanvasSession')}
-      acceptCallback={newCanvasSessionImmediate}
-      acceptButtonText={t('common.ok')}
-      useInert={false}
-    >
-      <Flex direction="column" gap={3}>
-        <Text>{t('controlLayers.newCanvasSessionDesc')}</Text>
-        <Text>{t('common.areYouSure')}</Text>
-        <FormControl>
-          <FormLabel>{t('common.dontAskMeAgain')}</FormLabel>
-          <Checkbox isChecked={!shouldConfirmOnNewSession} onChange={onToggleConfirm} />
-        </FormControl>
-      </Flex>
-    </ConfirmationAlertDialog>
-  );
-});
-
-NewCanvasSessionDialog.displayName = 'NewCanvasSessionDialog';

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

@@ -126,6 +126,7 @@ const AddRefImageDropTargetAndButton = memo(() => {
     </Flex>
   );
 });
+AddRefImageDropTargetAndButton.displayName = 'AddRefImageDropTargetAndButton';
 
 const BboxButton = memo(() => {
   const { t } = useTranslation();
@@ -145,4 +146,4 @@ const BboxButton = memo(() => {
     />
   );
 });
-AddRefImageDropTargetAndButton.displayName = 'AddRefImageDropTargetAndButton';
+BboxButton.displayName = 'BboxButton';

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

@@ -6,7 +6,6 @@ import type { SetGlobalReferenceImageDndTargetData } from 'features/dnd/dnd';
 import { setGlobalReferenceImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { setGlobalReferenceImage } from 'features/imageActions/actions';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import type { ImageDTO } from 'services/api/types';
@@ -22,9 +21,6 @@ export const RefImageNoImageState = memo(() => {
     [dispatch, id]
   );
   const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
-  const onClickGalleryButton = useCallback(() => {
-    dispatch(activeTabCanvasRightPanelChanged('gallery'));
-  }, [dispatch]);
 
   const dndTargetData = useMemo<SetGlobalReferenceImageDndTargetData>(
     () => setGlobalReferenceImageDndTarget.getData({ id }),
@@ -34,9 +30,8 @@ export const RefImageNoImageState = memo(() => {
   const components = useMemo(
     () => ({
       UploadButton: <Button size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />,
-      GalleryButton: <Button onClick={onClickGalleryButton} size="sm" variant="link" color="base.300" />,
     }),
-    [onClickGalleryButton, uploadApi]
+    [uploadApi]
   );
 
   return (

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

@@ -8,7 +8,6 @@ import type { SetGlobalReferenceImageDndTargetData } from 'features/dnd/dnd';
 import { setGlobalReferenceImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { setGlobalReferenceImage } from 'features/imageActions/actions';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import type { ImageDTO } from 'services/api/types';
@@ -25,9 +24,6 @@ export const RefImageNoImageStateWithCanvasOptions = memo(() => {
     [dispatch, id]
   );
   const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
-  const onClickGalleryButton = useCallback(() => {
-    dispatch(activeTabCanvasRightPanelChanged('gallery'));
-  }, [dispatch]);
   const pullBboxIntoIPAdapter = usePullBboxIntoGlobalReferenceImage(id);
 
   const dndTargetData = useMemo<SetGlobalReferenceImageDndTargetData>(
@@ -40,14 +36,11 @@ export const RefImageNoImageStateWithCanvasOptions = memo(() => {
       UploadButton: (
         <Button isDisabled={isBusy} size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />
       ),
-      GalleryButton: (
-        <Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
-      ),
       PullBboxButton: (
         <Button onClick={pullBboxIntoIPAdapter} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
       ),
     }),
-    [isBusy, onClickGalleryButton, pullBboxIntoIPAdapter, uploadApi]
+    [isBusy, pullBboxIntoIPAdapter, uploadApi]
   );
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceIPAdapterSettingsEmptyState.tsx

@@ -9,7 +9,6 @@ import type { SetRegionalGuidanceReferenceImageDndTargetData } from 'features/dn
 import { setRegionalGuidanceReferenceImageDndTarget } from 'features/dnd/dnd';
 import { DndDropTarget } from 'features/dnd/DndDropTarget';
 import { setRegionalGuidanceReferenceImage } from 'features/imageActions/actions';
-import { activeTabCanvasRightPanelChanged } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useMemo } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
@@ -31,9 +30,6 @@ export const RegionalGuidanceIPAdapterSettingsEmptyState = memo(({ referenceImag
     [dispatch, entityIdentifier, referenceImageId]
   );
   const uploadApi = useImageUploadButton({ onUpload, allowMultiple: false });
-  const onClickGalleryButton = useCallback(() => {
-    dispatch(activeTabCanvasRightPanelChanged('gallery'));
-  }, [dispatch]);
   const onDeleteIPAdapter = useCallback(() => {
     dispatch(rgRefImageDeleted({ entityIdentifier, referenceImageId }));
   }, [dispatch, entityIdentifier, referenceImageId]);
@@ -53,14 +49,11 @@ export const RegionalGuidanceIPAdapterSettingsEmptyState = memo(({ referenceImag
       UploadButton: (
         <Button isDisabled={isBusy} size="sm" variant="link" color="base.300" {...uploadApi.getUploadButtonProps()} />
       ),
-      GalleryButton: (
-        <Button onClick={onClickGalleryButton} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
-      ),
       PullBboxButton: (
         <Button onClick={pullBboxIntoIPAdapter} isDisabled={isBusy} size="sm" variant="link" color="base.300" />
       ),
     }),
-    [isBusy, onClickGalleryButton, pullBboxIntoIPAdapter, uploadApi]
+    [isBusy, pullBboxIntoIPAdapter, uploadApi]
   );
 
   return (

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsSaveAllImagesToGalleryCheckbox.tsx

@@ -16,7 +16,7 @@ export const CanvasSettingsSaveAllImagesToGalleryCheckbox = memo(() => {
   }, [dispatch]);
   return (
     <FormControl w="full">
-      <FormLabel flexGrow={1}>{t('controlLayers.saveAllImagesToGallery')}</FormLabel>
+      <FormLabel flexGrow={1}>{t('controlLayers.settings.saveAllImagesToGallery.label')}</FormLabel>
       <Checkbox isChecked={saveAllImagesToGallery} onChange={onChange} />
     </FormControl>
   );

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/StagingAreaItemsList.tsx

@@ -1,40 +0,0 @@
-import { Flex } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
-import { QueueItemPreviewMini } from 'features/controlLayers/components/SimpleSession/QueueItemPreviewMini';
-import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { memo, useEffect } from 'react';
-
-export const StagingAreaItemsList = memo(() => {
-  const canvasManager = useCanvasManagerSafe();
-  const ctx = useCanvasSessionContext();
-  const items = useStore(ctx.$items);
-  const selectedItemId = useStore(ctx.$selectedItemId);
-
-  useEffect(() => {
-    if (!canvasManager) {
-      return;
-    }
-
-    return canvasManager.stagingArea.connectToSession(ctx.$selectedItemId, ctx.$progressData, ctx.$isPending);
-  }, [canvasManager, ctx.$progressData, ctx.$selectedItemId, ctx.$isPending]);
-
-  return (
-    <Flex position="relative" maxW="full" w="full" h="72px">
-      <ScrollableContent overflowX="scroll" overflowY="hidden">
-        <Flex gap={2} w="full" h="full" justifyContent="safe center">
-          {items.map((item, i) => (
-            <QueueItemPreviewMini
-              key={`${item.item_id}-mini`}
-              item={item}
-              number={i + 1}
-              isSelected={selectedItemId === item.item_id}
-            />
-          ))}
-        </Flex>
-      </ScrollableContent>
-    </Flex>
-  );
-});
-StagingAreaItemsList.displayName = 'StagingAreaItemsList';

invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/context.tsx

@@ -1,585 +0,0 @@
-import { useStore } from '@nanostores/react';
-import { useAppStore } from 'app/store/storeHooks';
-import { getOutputImageName } from 'features/controlLayers/components/SimpleSession/shared';
-import { selectStagingAreaAutoSwitch } from 'features/controlLayers/store/canvasSettingsSlice';
-import {
-  buildSelectSessionQueueItems,
-  canvasQueueItemDiscarded,
-  canvasSessionReset,
-} from 'features/controlLayers/store/canvasStagingAreaSlice';
-import type { ProgressImage } from 'features/nodes/types/common';
-import type { Atom, MapStore, StoreValue, WritableAtom } from 'nanostores';
-import { atom, computed, effect, map, subscribeKeys } from 'nanostores';
-import type { PropsWithChildren } from 'react';
-import { createContext, memo, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { getImageDTOSafe } from 'services/api/endpoints/images';
-import { queueApi } from 'services/api/endpoints/queue';
-import type { ImageDTO, S } from 'services/api/types';
-import { $socket } from 'services/events/stores';
-import { assert, objectEntries } from 'tsafe';
-
-export type ProgressData = {
-  itemId: number;
-  progressEvent: S['InvocationProgressEvent'] | null;
-  progressImage: ProgressImage | null;
-  imageDTO: ImageDTO | null;
-  imageLoaded: boolean;
-};
-
-const getInitialProgressData = (itemId: number): ProgressData => ({
-  itemId,
-  progressEvent: null,
-  progressImage: null,
-  imageDTO: null,
-  imageLoaded: false,
-});
-
-export const useProgressData = ($progressData: ProgressDataMap, itemId: number): ProgressData => {
-  const getInitialValue = useCallback(
-    () => $progressData.get()[itemId] ?? getInitialProgressData(itemId),
-    [$progressData, itemId]
-  );
-  const [value, setValue] = useState(getInitialValue);
-  useEffect(() => {
-    const unsub = subscribeKeys($progressData, [itemId], (data) => {
-      const progressData = data[itemId];
-      if (!progressData) {
-        return;
-      }
-      setValue(progressData);
-    });
-    return () => {
-      unsub();
-    };
-  }, [$progressData, itemId]);
-
-  return value;
-};
-
-const setProgress = ($progressData: ProgressDataMap, data: S['InvocationProgressEvent']) => {
-  const progressData = $progressData.get();
-  const current = progressData[data.item_id];
-  if (current) {
-    const next = { ...current };
-    next.progressEvent = data;
-    if (data.image) {
-      next.progressImage = data.image;
-    }
-    $progressData.set({
-      ...progressData,
-      [data.item_id]: next,
-    });
-  } else {
-    $progressData.set({
-      ...progressData,
-      [data.item_id]: {
-        itemId: data.item_id,
-        progressEvent: data,
-        progressImage: data.image ?? null,
-        imageDTO: null,
-        imageLoaded: false,
-      },
-    });
-  }
-};
-
-export type ProgressDataMap = MapStore<Record<number, ProgressData | undefined>>;
-
-type CanvasSessionContextValue = {
-  session: { id: string; type: 'simple' | 'advanced' };
-  $items: Atom<S['SessionQueueItem'][]>;
-  $itemCount: Atom<number>;
-  $hasItems: Atom<boolean>;
-  $isPending: Atom<boolean>;
-  $progressData: ProgressDataMap;
-  $selectedItemId: WritableAtom<number | null>;
-  $selectedItem: Atom<S['SessionQueueItem'] | null>;
-  $selectedItemIndex: Atom<number | null>;
-  $selectedItemOutputImageDTO: Atom<ImageDTO | null>;
-  selectNext: () => void;
-  selectPrev: () => void;
-  selectFirst: () => void;
-  selectLast: () => void;
-  onImageLoad: (itemId: number) => void;
-  discard: (itemId: number) => void;
-  discardAll: () => void;
-};
-
-const CanvasSessionContext = createContext<CanvasSessionContextValue | null>(null);
-
-export const CanvasSessionContextProvider = memo(
-  ({ id, type, children }: PropsWithChildren<{ id: string; type: 'simple' | 'advanced' }>) => {
-    /**
-     * For best performance and interop with the Canvas, which is outside react but needs to interact with the react
-     * app, all canvas session state is packaged as nanostores atoms. The trickiest part is syncing the queue items
-     * with a nanostores atom.
-     */
-    const session = useMemo(() => ({ type, id }), [type, id]);
-
-    /**
-     * App store
-     */
-    const store = useAppStore();
-
-    const socket = useStore($socket);
-
-    /**
-     * Track the last completed item. Used to implement autoswitch.
-     */
-    const $lastCompletedItemId = useState(() => atom<number | null>(null))[0];
-
-    /**
-     * Track the last started item. Used to implement autoswitch.
-     */
-    const $lastStartedItemId = useState(() => atom<number | null>(null))[0];
-
-    /**
-     * Manually-synced atom containing queue items for the current session. This is populated from the RTK Query cache
-     * and kept in sync with it via a redux subscription.
-     */
-    const $items = useState(() => atom<S['SessionQueueItem'][]>([]))[0];
-
-    /**
-     * An internal flag used to work around race conditions with auto-switch switching to queue items before their
-     * output images have fully loaded.
-     */
-    const $lastLoadedItemId = useState(() => atom<number | null>(null))[0];
-
-    /**
-     * An ephemeral store of progress events and images for all items in the current session.
-     */
-    const $progressData = useState(() => map<StoreValue<ProgressDataMap>>({}))[0];
-
-    /**
-     * The currently selected queue item's ID, or null if one is not selected.
-     */
-    const $selectedItemId = useState(() => atom<number | null>(null))[0];
-
-    /**
-     * The number of items. Computed from the queue items array.
-     */
-    const $itemCount = useState(() => computed([$items], (items) => items.length))[0];
-
-    /**
-     * Whether there are any items. Computed from the queue items array.
-     */
-    const $hasItems = useState(() => computed([$items], (items) => items.length > 0))[0];
-
-    /**
-     * Whether there are any pending or in-progress items. Computed from the queue items array.
-     */
-    const $isPending = useState(() =>
-      computed([$items], (items) => items.some((item) => item.status === 'pending' || item.status === 'in_progress'))
-    )[0];
-
-    /**
-     * The currently selected queue item, or null if one is not selected.
-     */
-    const $selectedItem = useState(() =>
-      computed([$items, $selectedItemId], (items, selectedItemId) => {
-        if (items.length === 0) {
-          return null;
-        }
-        if (selectedItemId === null) {
-          return null;
-        }
-        return items.find(({ item_id }) => item_id === selectedItemId) ?? null;
-      })
-    )[0];
-
-    /**
-     * The currently selected queue item's index in the list of items, or null if one is not selected.
-     */
-    const $selectedItemIndex = useState(() =>
-      computed([$items, $selectedItemId], (items, selectedItemId) => {
-        if (items.length === 0) {
-          return null;
-        }
-        if (selectedItemId === null) {
-          return null;
-        }
-        return items.findIndex(({ item_id }) => item_id === selectedItemId) ?? null;
-      })
-    )[0];
-
-    /**
-     * The currently selected queue item's output image name, or null if one is not selected or there is no output
-     * image recorded.
-     */
-    const $selectedItemOutputImageDTO = useState(() =>
-      computed([$selectedItemId, $progressData], (selectedItemId, progressData) => {
-        if (selectedItemId === null) {
-          return null;
-        }
-        const datum = progressData[selectedItemId];
-        if (!datum) {
-          return null;
-        }
-        return datum.imageDTO;
-      })
-    )[0];
-
-    /**
-     * A redux selector to select all queue items from the RTK Query cache.
-     */
-    const selectQueueItems = useMemo(() => buildSelectSessionQueueItems(session.id), [session.id]);
-
-    const discard = useCallback(
-      (itemId: number) => {
-        store.dispatch(canvasQueueItemDiscarded({ itemId }));
-      },
-      [store]
-    );
-
-    const discardAll = useCallback(() => {
-      store.dispatch(canvasSessionReset());
-    }, [store]);
-
-    const selectNext = useCallback(() => {
-      const selectedItemId = $selectedItemId.get();
-      if (selectedItemId === null) {
-        return;
-      }
-      const items = $items.get();
-      const currentIndex = items.findIndex((item) => item.item_id === selectedItemId);
-      const nextIndex = (currentIndex + 1) % items.length;
-      const nextItem = items[nextIndex];
-      if (!nextItem) {
-        return;
-      }
-      $selectedItemId.set(nextItem.item_id);
-    }, [$items, $selectedItemId]);
-
-    const selectPrev = useCallback(() => {
-      const selectedItemId = $selectedItemId.get();
-      if (selectedItemId === null) {
-        return;
-      }
-      const items = $items.get();
-      const currentIndex = items.findIndex((item) => item.item_id === selectedItemId);
-      const prevIndex = (currentIndex - 1 + items.length) % items.length;
-      const prevItem = items[prevIndex];
-      if (!prevItem) {
-        return;
-      }
-      $selectedItemId.set(prevItem.item_id);
-    }, [$items, $selectedItemId]);
-
-    const selectFirst = useCallback(() => {
-      const items = $items.get();
-      const first = items.at(0);
-      if (!first) {
-        return;
-      }
-      $selectedItemId.set(first.item_id);
-    }, [$items, $selectedItemId]);
-
-    const selectLast = useCallback(() => {
-      const items = $items.get();
-      const last = items.at(-1);
-      if (!last) {
-        return;
-      }
-      $selectedItemId.set(last.item_id);
-    }, [$items, $selectedItemId]);
-
-    const onImageLoad = useCallback(
-      (itemId: number) => {
-        const progressData = $progressData.get();
-        const current = progressData[itemId];
-        if (current) {
-          const next = { ...current, imageLoaded: true };
-          $progressData.setKey(itemId, next);
-        } else {
-          $progressData.setKey(itemId, {
-            ...getInitialProgressData(itemId),
-            imageLoaded: true,
-          });
-        }
-        if (
-          $lastCompletedItemId.get() === itemId &&
-          selectStagingAreaAutoSwitch(store.getState()) === 'switch_on_finish'
-        ) {
-          $selectedItemId.set(itemId);
-          $lastCompletedItemId.set(null);
-        }
-      },
-      [$lastCompletedItemId, $progressData, $selectedItemId, store]
-    );
-
-    // Set up socket listeners
-    useEffect(() => {
-      if (!socket) {
-        return;
-      }
-
-      const onProgress = (data: S['InvocationProgressEvent']) => {
-        if (data.destination !== session.id) {
-          return;
-        }
-        setProgress($progressData, data);
-      };
-
-      const onQueueItemStatusChanged = (data: S['QueueItemStatusChangedEvent']) => {
-        if (data.destination !== session.id) {
-          return;
-        }
-        if (data.status === 'completed') {
-          $lastCompletedItemId.set(data.item_id);
-        }
-        if (data.status === 'in_progress') {
-          $lastStartedItemId.set(data.item_id);
-        }
-      };
-
-      socket.on('invocation_progress', onProgress);
-      socket.on('queue_item_status_changed', onQueueItemStatusChanged);
-
-      return () => {
-        socket.off('invocation_progress', onProgress);
-        socket.off('queue_item_status_changed', onQueueItemStatusChanged);
-      };
-    }, [$lastCompletedItemId, $lastStartedItemId, $progressData, $selectedItemId, session.id, socket]);
-
-    // Set up state subscriptions and effects
-    useEffect(() => {
-      let _prevItems: readonly S['SessionQueueItem'][] = [];
-      // Seed the $items atom with the initial query cache state
-      $items.set(selectQueueItems(store.getState()));
-
-      // Manually keep the $items atom in sync as the query cache is updated
-      const unsubReduxSyncToItemsAtom = store.subscribe(() => {
-        const prevItems = $items.get();
-        const items = selectQueueItems(store.getState());
-        if (items !== prevItems) {
-          _prevItems = prevItems;
-          $items.set(items);
-        }
-      });
-
-      // Handle cases that could result in a nonexistent queue item being selected.
-      const unsubEnsureSelectedItemIdExists = effect(
-        [$items, $selectedItemId, $lastStartedItemId],
-        (items, selectedItemId, lastStartedItemId) => {
-          if (items.length === 0) {
-            // If there are no items, cannot have a selected item.
-            $selectedItemId.set(null);
-          } else if (selectedItemId === null && items.length > 0) {
-            // If there is no selected item but there are items, select the first one.
-            $selectedItemId.set(items[0]?.item_id ?? null);
-            return;
-          } else if (
-            selectStagingAreaAutoSwitch(store.getState()) === 'switch_on_start' &&
-            items.findIndex(({ item_id }) => item_id === lastStartedItemId) !== -1
-          ) {
-            $selectedItemId.set(lastStartedItemId);
-            $lastStartedItemId.set(null);
-          } else if (selectedItemId !== null && items.findIndex(({ item_id }) => item_id === selectedItemId) === -1) {
-            // If an item is selected and it is not in the list of items, un-set it. This effect will run again and we'll
-            // the above case, selecting the first item if there are any.
-            let prevIndex = _prevItems.findIndex(({ item_id }) => item_id === selectedItemId);
-            if (prevIndex >= items.length) {
-              prevIndex = items.length - 1;
-            }
-            const nextItem = items[prevIndex];
-            $selectedItemId.set(nextItem?.item_id ?? null);
-          }
-
-          if (items !== _prevItems) {
-            _prevItems = items;
-          }
-        }
-      );
-
-      // Clean up the progress data when a queue item is discarded.
-      const unsubCleanUpProgressData = $items.subscribe(async (items) => {
-        const progressData = $progressData.get();
-
-        const toDelete: number[] = [];
-        const toUpdate: ProgressData[] = [];
-
-        for (const [id, datum] of objectEntries(progressData)) {
-          if (!datum) {
-            toDelete.push(id);
-            continue;
-          }
-          const item = items.find(({ item_id }) => item_id === datum.itemId);
-          if (!item) {
-            toDelete.push(datum.itemId);
-          } else if (item.status === 'canceled' || item.status === 'failed') {
-            toUpdate.push({
-              ...datum,
-              progressEvent: null,
-              progressImage: null,
-              imageDTO: null,
-            });
-          }
-        }
-
-        for (const item of items) {
-          const datum = progressData[item.item_id];
-
-          if (datum) {
-            if (datum.imageDTO) {
-              continue;
-            }
-            const outputImageName = getOutputImageName(item);
-            if (!outputImageName) {
-              continue;
-            }
-            const imageDTO = await getImageDTOSafe(outputImageName);
-            if (!imageDTO) {
-              continue;
-            }
-            toUpdate.push({
-              ...datum,
-              imageDTO,
-            });
-          } else {
-            const outputImageName = getOutputImageName(item);
-            if (!outputImageName) {
-              continue;
-            }
-            const imageDTO = await getImageDTOSafe(outputImageName);
-            if (!imageDTO) {
-              continue;
-            }
-            toUpdate.push({
-              ...getInitialProgressData(item.item_id),
-              imageDTO,
-            });
-          }
-        }
-
-        for (const itemId of toDelete) {
-          $progressData.setKey(itemId, undefined);
-        }
-
-        for (const datum of toUpdate) {
-          $progressData.setKey(datum.itemId, datum);
-        }
-      });
-
-      // We only want to auto-switch to completed queue items once their images have fully loaded to prevent flashes
-      // of fallback content and/or progress images. The only surefire way to determine when images have fully loaded
-      // is via the image elements' `onLoad` callback. Images set `$lastLoadedItemId` to their queue item ID in their
-      // `onLoad` handler, and we listen for that here. If auto-switch is enabled, we then switch the to the item.
-      //
-      // TODO: This isn't perfect... we set $lastLoadedItemId in the mini preview component, but the full view
-      // component still needs to retrieve the image from the browser cache... can result in a flash of the progress
-      // image...
-      const unsubHandleAutoSwitch = $lastLoadedItemId.listen((lastLoadedItemId) => {
-        if (lastLoadedItemId === null) {
-          return;
-        }
-        if (selectStagingAreaAutoSwitch(store.getState()) === 'switch_on_finish') {
-          $selectedItemId.set(lastLoadedItemId);
-        }
-        $lastLoadedItemId.set(null);
-      });
-
-      // Create an RTK Query subscription. Without this, the query cache selector will never return anything bc RTK
-      // doesn't know we care about it.
-      const { unsubscribe: unsubQueueItemsQuery } = store.dispatch(
-        queueApi.endpoints.listAllQueueItems.initiate({ destination: session.id })
-      );
-
-      // const unsubListener = store.dispatch(
-      //   addAppListener({
-      //     matcher: queueApi.endpoints.cancelQueueItem.matchFulfilled,
-      //     effect: ({ payload }, { getState }) => {
-      //       const { item_id } = payload;
-
-      //       const items = selectQueueItems(getState());
-      //       if (items.length === 0) {
-      //         $selectedItemId.set(null);
-      //       } else if ($selectedItemId.get() === null) {
-      //         $selectedItemId.set(items[0].item_id);
-      //       }
-      //     },
-      //   })
-      // );
-
-      // Clean up all subscriptions and top-level (i.e. non-computed/derived state)
-      return () => {
-        unsubHandleAutoSwitch();
-        unsubQueueItemsQuery();
-        unsubReduxSyncToItemsAtom();
-        unsubEnsureSelectedItemIdExists();
-        unsubCleanUpProgressData();
-        $items.set([]);
-        $progressData.set({});
-        $selectedItemId.set(null);
-      };
-    }, [
-      $items,
-      $lastLoadedItemId,
-      $lastStartedItemId,
-      $progressData,
-      $selectedItemId,
-      selectQueueItems,
-      session.id,
-      store,
-    ]);
-
-    const value = useMemo<CanvasSessionContextValue>(
-      () => ({
-        session,
-        $items,
-        $hasItems,
-        $isPending,
-        $progressData,
-        $selectedItemId,
-        $selectedItem,
-        $selectedItemIndex,
-        $selectedItemOutputImageDTO,
-        $itemCount,
-        selectNext,
-        selectPrev,
-        selectFirst,
-        selectLast,
-        onImageLoad,
-        discard,
-        discardAll,
-      }),
-      [
-        $items,
-        $hasItems,
-        $isPending,
-        $progressData,
-        $selectedItem,
-        $selectedItemId,
-        $selectedItemIndex,
-        session,
-        $selectedItemOutputImageDTO,
-        $itemCount,
-        selectNext,
-        selectPrev,
-        selectFirst,
-        selectLast,
-        onImageLoad,
-        discard,
-        discardAll,
-      ]
-    );
-
-    return <CanvasSessionContext.Provider value={value}>{children}</CanvasSessionContext.Provider>;
-  }
-);
-CanvasSessionContextProvider.displayName = 'CanvasSessionContextProvider';
-
-export const useCanvasSessionContext = () => {
-  const ctx = useContext(CanvasSessionContext);
-  assert(ctx !== null, "'useCanvasSessionContext' must be used within a CanvasSessionContextProvider");
-  return ctx;
-};
-
-export const useOutputImageDTO = (item: S['SessionQueueItem']) => {
-  const ctx = useCanvasSessionContext();
-  const $imageDTO = useState(() =>
-    computed([ctx.$progressData], (progressData) => progressData[item.item_id]?.imageDTO ?? null)
-  )[0];
-  const imageDTO = useStore($imageDTO);
-
-  return imageDTO;
-};

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemCircularProgress.tsx

@@ -1,10 +1,11 @@
 import type { CircularProgressProps, SystemStyleObject } from '@invoke-ai/ui-library';
 import { CircularProgress, Tooltip } from '@invoke-ai/ui-library';
-import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context';
-import { getProgressMessage } from 'features/controlLayers/components/SimpleSession/shared';
+import { getProgressMessage } from 'features/controlLayers/components/StagingArea/shared';
 import { memo } from 'react';
 import type { S } from 'services/api/types';
 
+import { useProgressDatum } from './context';
+
 const circleStyles: SystemStyleObject = {
   circle: {
     transitionProperty: 'none',
@@ -18,8 +19,7 @@ const circleStyles: SystemStyleObject = {
 type Props = { itemId: number; status: S['SessionQueueItem']['status'] } & CircularProgressProps;
 
 export const QueueItemCircularProgress = memo(({ itemId, status, ...rest }: Props) => {
-  const { $progressData } = useCanvasSessionContext();
-  const { progressEvent } = useProgressData($progressData, itemId);
+  const { progressEvent } = useProgressDatum(itemId);
 
   if (status !== 'in_progress') {
     return null;

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemNumber.tsx

@@ -1,8 +1,9 @@
 import type { TextProps } from '@invoke-ai/ui-library';
 import { Text } from '@invoke-ai/ui-library';
-import { DROP_SHADOW } from 'features/controlLayers/components/SimpleSession/shared';
 import { memo } from 'react';
 
+import { DROP_SHADOW } from './shared';
+
 export const QueueItemNumber = memo(({ number, ...rest }: { number: number } & TextProps) => {
   return <Text pointerEvents="none" userSelect="none" filter={DROP_SHADOW} {...rest}>{`#${number}`}</Text>;
 });

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemPreviewMini.tsx

@@ -1,25 +1,23 @@
 import type { SystemStyleObject } from '@invoke-ai/ui-library';
 import { Flex } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import {
-  useCanvasSessionContext,
-  useOutputImageDTO,
-  useProgressData,
-} from 'features/controlLayers/components/SimpleSession/context';
-import { QueueItemCircularProgress } from 'features/controlLayers/components/SimpleSession/QueueItemCircularProgress';
-import { QueueItemNumber } from 'features/controlLayers/components/SimpleSession/QueueItemNumber';
-import { QueueItemProgressImage } from 'features/controlLayers/components/SimpleSession/QueueItemProgressImage';
-import { QueueItemStatusLabel } from 'features/controlLayers/components/SimpleSession/QueueItemStatusLabel';
-import { getQueueItemElementId } from 'features/controlLayers/components/SimpleSession/shared';
+import { QueueItemCircularProgress } from 'features/controlLayers/components/StagingArea/QueueItemCircularProgress';
+import { QueueItemProgressImage } from 'features/controlLayers/components/StagingArea/QueueItemProgressImage';
+import { QueueItemStatusLabel } from 'features/controlLayers/components/StagingArea/QueueItemStatusLabel';
+import { getQueueItemElementId } from 'features/controlLayers/components/StagingArea/shared';
 import {
   selectStagingAreaAutoSwitch,
   settingsStagingAreaAutoSwitchChanged,
 } from 'features/controlLayers/store/canvasSettingsSlice';
 import { DndImage } from 'features/dnd/DndImage';
 import { toast } from 'features/toast/toast';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import type { S } from 'services/api/types';
 
+import { useOutputImageDTO, useStagingAreaContext } from './context';
+import { QueueItemNumber } from './QueueItemNumber';
+
 const sx = {
   cursor: 'pointer',
   userSelect: 'none',
@@ -27,6 +25,7 @@ const sx = {
   alignItems: 'center',
   justifyContent: 'center',
   flexShrink: 0,
+  h: 'full',
   aspectRatio: '1/1',
   borderWidth: 2,
   borderRadius: 'base',
@@ -39,20 +38,20 @@ const sx = {
 
 type Props = {
   item: S['SessionQueueItem'];
-  number: number;
-  isSelected: boolean;
+  index: number;
 };
 
-export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) => {
+export const QueueItemPreviewMini = memo(({ item, index }: Props) => {
+  const ctx = useStagingAreaContext();
   const dispatch = useAppDispatch();
-  const ctx = useCanvasSessionContext();
-  const { imageLoaded } = useProgressData(ctx.$progressData, item.item_id);
-  const imageDTO = useOutputImageDTO(item);
+  const $isSelected = useMemo(() => ctx.buildIsSelectedComputed(item.item_id), [ctx, item.item_id]);
+  const isSelected = useStore($isSelected);
+  const imageDTO = useOutputImageDTO(item.item_id);
   const autoSwitch = useAppSelector(selectStagingAreaAutoSwitch);
 
   const onClick = useCallback(() => {
-    ctx.$selectedItemId.set(item.item_id);
-  }, [ctx.$selectedItemId, item.item_id]);
+    ctx.select(item.item_id);
+  }, [ctx, item.item_id]);
 
   const onDoubleClick = useCallback(() => {
     if (autoSwitch !== 'off') {
@@ -64,21 +63,21 @@ export const QueueItemPreviewMini = memo(({ item, isSelected, number }: Props) =
   }, [autoSwitch, dispatch]);
 
   const onLoad = useCallback(() => {
-    ctx.onImageLoad(item.item_id);
+    ctx.onImageLoaded(item.item_id);
   }, [ctx, item.item_id]);
 
   return (
     <Flex
-      id={getQueueItemElementId(item.item_id)}
+      id={getQueueItemElementId(index)}
       sx={sx}
       data-selected={isSelected}
       onClick={onClick}
       onDoubleClick={onDoubleClick}
     >
       <QueueItemStatusLabel item={item} position="absolute" margin="auto" />
-      {imageDTO && <DndImage imageDTO={imageDTO} onLoad={onLoad} asThumbnail />}
-      {!imageLoaded && <QueueItemProgressImage itemId={item.item_id} position="absolute" />}
-      <QueueItemNumber number={number} position="absolute" top={0} left={1} />
+      {imageDTO && <DndImage imageDTO={imageDTO} position="absolute" onLoad={onLoad} />}
+      <QueueItemProgressImage itemId={item.item_id} position="absolute" />
+      <QueueItemNumber number={index + 1} position="absolute" top={0} left={1} />
       <QueueItemCircularProgress itemId={item.item_id} status={item.status} position="absolute" top={1} right={2} />
     </Flex>
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemProgressImage.tsx

@@ -1,15 +1,15 @@
 import type { ImageProps } from '@invoke-ai/ui-library';
 import { Image } from '@invoke-ai/ui-library';
-import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context';
 import { memo } from 'react';
 
+import { useProgressDatum } from './context';
+
 type Props = { itemId: number } & ImageProps;
 
 export const QueueItemProgressImage = memo(({ itemId, ...rest }: Props) => {
-  const ctx = useCanvasSessionContext();
-  const { progressImage } = useProgressData(ctx.$progressData, itemId);
+  const { progressImage, imageLoaded } = useProgressDatum(itemId);
 
-  if (!progressImage) {
+  if (!progressImage || imageLoaded) {
     return null;
   }
 

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/QueueItemStatusLabel.tsx

@@ -1,16 +1,16 @@
 import type { TextProps } from '@invoke-ai/ui-library';
 import { Text } from '@invoke-ai/ui-library';
-import { useCanvasSessionContext, useProgressData } from 'features/controlLayers/components/SimpleSession/context';
 import { memo } from 'react';
 import type { S } from 'services/api/types';
 
+import { useProgressDatum } from './context';
+
 type Props = { item: S['SessionQueueItem'] } & TextProps;
 
 export const QueueItemStatusLabel = memo(({ item, ...rest }: Props) => {
-  const ctx = useCanvasSessionContext();
-  const { progressImage, imageLoaded } = useProgressData(ctx.$progressData, item.item_id);
+  const { progressImage } = useProgressDatum(item.item_id);
 
-  if (progressImage || imageLoaded) {
+  if (progressImage) {
     return null;
   }
 

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaAutoSwitchButtons.tsx

@@ -1,5 +1,7 @@
 import { IconButton } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import {
   selectStagingAreaAutoSwitch,
   settingsStagingAreaAutoSwitchChanged,
@@ -8,6 +10,9 @@ import { memo, useCallback } from 'react';
 import { PiCaretLineRightBold, PiCaretRightBold, PiMoonBold } from 'react-icons/pi';
 
 export const StagingAreaAutoSwitchButtons = memo(() => {
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
   const autoSwitch = useAppSelector(selectStagingAreaAutoSwitch);
   const dispatch = useAppDispatch();
 
@@ -29,6 +34,7 @@ export const StagingAreaAutoSwitchButtons = memo(() => {
         icon={<PiMoonBold />}
         colorScheme={autoSwitch === 'off' ? 'invokeBlue' : 'base'}
         onClick={onClickOff}
+        isDisabled={!shouldShowStagedImage}
       />
       <IconButton
         aria-label="Switch on start"
@@ -36,6 +42,7 @@ export const StagingAreaAutoSwitchButtons = memo(() => {
         icon={<PiCaretRightBold />}
         colorScheme={autoSwitch === 'switch_on_start' ? 'invokeBlue' : 'base'}
         onClick={onClickSwitchOnStart}
+        isDisabled={!shouldShowStagedImage}
       />
       <IconButton
         aria-label="Switch on finish"
@@ -43,6 +50,7 @@ export const StagingAreaAutoSwitchButtons = memo(() => {
         icon={<PiCaretLineRightBold />}
         colorScheme={autoSwitch === 'switch_on_finish' ? 'invokeBlue' : 'base'}
         onClick={onClickSwitchOnFinished}
+        isDisabled={!shouldShowStagedImage}
       />
     </>
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaItemsList.tsx

@@ -0,0 +1,213 @@
+import { Box, Flex, forwardRef } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
+import { logger } from 'app/logging/logger';
+import { QueueItemPreviewMini } from 'features/controlLayers/components/StagingArea/QueueItemPreviewMini';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
+import type { CSSProperties, RefObject } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import type { Components, ComputeItemKey, ItemContent, ListRange, VirtuosoHandle, VirtuosoProps } from 'react-virtuoso';
+import { Virtuoso } from 'react-virtuoso';
+import type { S } from 'services/api/types';
+
+import { useStagingAreaContext } from './context';
+import { getQueueItemElementId } from './shared';
+
+const log = logger('system');
+
+const virtuosoStyles = {
+  width: '100%',
+  height: '72px',
+} satisfies CSSProperties;
+
+/**
+ * Scroll the item at the given index into view if it is not currently visible.
+ */
+const scrollIntoView = (
+  targetIndex: number,
+  rootEl: HTMLDivElement,
+  virtuosoHandle: VirtuosoHandle,
+  range: ListRange
+) => {
+  if (range.endIndex === 0) {
+    // No range is rendered; no need to scroll to anything.
+    return;
+  }
+
+  const targetItem = rootEl.querySelector(`#${getQueueItemElementId(targetIndex)}`);
+
+  if (!targetItem) {
+    if (targetIndex > range.endIndex) {
+      virtuosoHandle.scrollToIndex({
+        index: targetIndex,
+        behavior: 'auto',
+        align: 'end',
+      });
+    } else if (targetIndex < range.startIndex) {
+      virtuosoHandle.scrollToIndex({
+        index: targetIndex,
+        behavior: 'auto',
+        align: 'start',
+      });
+    } else {
+      log.debug(
+        `Unable to find queue item at index ${targetIndex} but it is in the rendered range ${range.startIndex}-${range.endIndex}`
+      );
+    }
+    return;
+  }
+
+  // We found the image in the DOM, but it might be in the overscan range - rendered but not in the visible viewport.
+  // Check if it is in the viewport and scroll if necessary.
+
+  const itemRect = targetItem.getBoundingClientRect();
+  const rootRect = rootEl.getBoundingClientRect();
+
+  if (itemRect.left < rootRect.left) {
+    virtuosoHandle.scrollToIndex({
+      index: targetIndex,
+      behavior: 'auto',
+      align: 'start',
+    });
+  } else if (itemRect.right > rootRect.right) {
+    virtuosoHandle.scrollToIndex({
+      index: targetIndex,
+      behavior: 'auto',
+      align: 'end',
+    });
+  } else {
+    // Image is already in view
+  }
+
+  return;
+};
+
+const useScrollableStagingArea = (rootRef: RefObject<HTMLDivElement>) => {
+  const [scroller, scrollerRef] = useState<HTMLElement | null>(null);
+  const [initialize, osInstance] = useOverlayScrollbars({
+    defer: true,
+    events: {
+      initialized(osInstance) {
+        // force overflow styles
+        const { viewport } = osInstance.elements();
+        viewport.style.overflowX = `var(--os-viewport-overflow-x)`;
+        viewport.style.overflowY = `var(--os-viewport-overflow-y)`;
+        viewport.style.textAlign = 'center';
+      },
+    },
+    options: {
+      scrollbars: {
+        visibility: 'auto',
+        autoHide: 'scroll',
+        autoHideDelay: 1300,
+        theme: 'os-theme-dark',
+      },
+      overflow: {
+        y: 'hidden',
+        x: 'scroll',
+      },
+    },
+  });
+
+  useEffect(() => {
+    const { current: root } = rootRef;
+
+    if (scroller && root) {
+      initialize({
+        target: root,
+        elements: {
+          viewport: scroller,
+        },
+      });
+    }
+
+    return () => {
+      osInstance()?.destroy();
+    };
+  }, [scroller, initialize, osInstance, rootRef]);
+
+  return scrollerRef;
+};
+
+export const StagingAreaItemsList = memo(() => {
+  const canvasManager = useCanvasManager();
+
+  const ctx = useStagingAreaContext();
+  const virtuosoRef = useRef<VirtuosoHandle>(null);
+  const rangeRef = useRef<ListRange>({ startIndex: 0, endIndex: 0 });
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const items = useStore(ctx.$items);
+
+  const scrollerRef = useScrollableStagingArea(rootRef);
+
+  useEffect(() => {
+    return canvasManager.stagingArea.connectToSession(ctx.$items, ctx.$selectedItem);
+  }, [canvasManager, ctx.$progressData, ctx.$items, ctx.$selectedItem]);
+
+  useEffect(() => {
+    return ctx.$selectedItemIndex.listen((selectedItemIndex) => {
+      if (selectedItemIndex === null) {
+        return;
+      }
+      if (!virtuosoRef.current) {
+        return;
+      }
+
+      if (!rootRef.current) {
+        return;
+      }
+
+      scrollIntoView(selectedItemIndex, rootRef.current, virtuosoRef.current, rangeRef.current);
+    });
+  }, [ctx.$selectedItemIndex]);
+
+  const onRangeChanged = useCallback((range: ListRange) => {
+    rangeRef.current = range;
+  }, []);
+
+  return (
+    <Box data-overlayscrollbars-initialize="" ref={rootRef} position="relative" w="full" h="full">
+      <Virtuoso<S['SessionQueueItem']>
+        ref={virtuosoRef}
+        data={items}
+        horizontalDirection
+        style={virtuosoStyles}
+        computeItemKey={computeItemKey}
+        increaseViewportBy={2048}
+        itemContent={itemContent}
+        components={components}
+        rangeChanged={onRangeChanged}
+        // Virtuoso expects the ref to be of HTMLElement | null | Window, but overlayscrollbars doesn't allow Window
+        scrollerRef={scrollerRef as VirtuosoProps<S['SessionQueueItem'], void>['scrollerRef']}
+      />
+    </Box>
+  );
+});
+StagingAreaItemsList.displayName = 'StagingAreaItemsList';
+
+const computeItemKey: ComputeItemKey<S['SessionQueueItem'], void> = (_, item: S['SessionQueueItem']) => {
+  return item.item_id;
+};
+
+const itemContent: ItemContent<S['SessionQueueItem'], void> = (index, item) => (
+  <QueueItemPreviewMini key={`${item.item_id}-mini`} item={item} index={index} />
+);
+
+const listSx = {
+  '& > * + *': {
+    pl: 2,
+  },
+  '&[data-disabled="true"]': {
+    filter: 'grayscale(1) opacity(0.5)',
+  },
+};
+
+const components: Components<S['SessionQueueItem']> = {
+  List: forwardRef(({ context: _, ...rest }, ref) => {
+    const canvasManager = useCanvasManager();
+    const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
+    return <Flex ref={ref} sx={listSx} data-disabled={!shouldShowStagedImage} {...rest} />;
+  }),
+};

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx

@@ -1,7 +1,5 @@
 import { ButtonGroup, Flex } from '@invoke-ai/ui-library';
-import { useStore } from '@nanostores/react';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
-import { getQueueItemElementId } from 'features/controlLayers/components/SimpleSession/shared';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
 import { StagingAreaToolbarAcceptButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton';
 import { StagingAreaToolbarDiscardAllButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton';
 import { StagingAreaToolbarDiscardSelectedButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton';
@@ -11,27 +9,13 @@ import { StagingAreaToolbarNextButton } from 'features/controlLayers/components/
 import { StagingAreaToolbarPrevButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarPrevButton';
 import { StagingAreaToolbarSaveSelectedToGalleryButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton';
 import { StagingAreaToolbarToggleShowResultsButton } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarToggleShowResultsButton';
-import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { memo, useEffect } from 'react';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
 import { StagingAreaAutoSwitchButtons } from './StagingAreaAutoSwitchButtons';
 
 export const StagingAreaToolbar = memo(() => {
-  const canvasManager = useCanvasManager();
-  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
-
-  const ctx = useCanvasSessionContext();
-
-  useEffect(() => {
-    return ctx.$selectedItemId.listen((id) => {
-      if (id !== null) {
-        document
-          .getElementById(getQueueItemElementId(id))
-          ?.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
-      }
-    });
-  }, [ctx.$selectedItemId]);
+  const ctx = useStagingAreaContext();
 
   useHotkeys('meta+left', ctx.selectFirst, { preventDefault: true });
   useHotkeys('meta+right', ctx.selectLast, { preventDefault: true });
@@ -39,22 +23,22 @@ export const StagingAreaToolbar = memo(() => {
   return (
     <Flex gap={2}>
       <ButtonGroup borderRadius="base" shadow="dark-lg">
-        <StagingAreaToolbarPrevButton isDisabled={!shouldShowStagedImage} />
+        <StagingAreaToolbarPrevButton />
         <StagingAreaToolbarImageCountButton />
-        <StagingAreaToolbarNextButton isDisabled={!shouldShowStagedImage} />
+        <StagingAreaToolbarNextButton />
       </ButtonGroup>
       <ButtonGroup borderRadius="base" shadow="dark-lg">
         <StagingAreaToolbarAcceptButton />
         <StagingAreaToolbarToggleShowResultsButton />
         <StagingAreaToolbarSaveSelectedToGalleryButton />
         <StagingAreaToolbarMenu />
-        <StagingAreaToolbarDiscardSelectedButton isDisabled={!shouldShowStagedImage} />
+        <StagingAreaToolbarDiscardSelectedButton />
       </ButtonGroup>
       <ButtonGroup borderRadius="base" shadow="dark-lg">
         <StagingAreaAutoSwitchButtons />
       </ButtonGroup>
       <ButtonGroup borderRadius="base" shadow="dark-lg">
-        <StagingAreaToolbarDiscardAllButton isDisabled={!shouldShowStagedImage} />
+        <StagingAreaToolbarDiscardAllButton />
       </ButtonGroup>
     </Flex>
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarAcceptButton.tsx

@@ -1,64 +1,32 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useIsRegionFocused } from 'common/hooks/focus';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
-import { rasterLayerAdded } from 'features/controlLayers/store/canvasSlice';
-import { canvasSessionReset } from 'features/controlLayers/store/canvasStagingAreaSlice';
-import { selectBboxRect, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
-import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
-import { imageNameToImageObject } from 'features/controlLayers/store/util';
 import { useCancelQueueItemsByDestination } from 'features/queue/hooks/useCancelQueueItemsByDestination';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiCheckBold } from 'react-icons/pi';
 
 export const StagingAreaToolbarAcceptButton = memo(() => {
-  const ctx = useCanvasSessionContext();
-  const dispatch = useAppDispatch();
+  const ctx = useStagingAreaContext();
   const canvasManager = useCanvasManager();
-  const bboxRect = useAppSelector(selectBboxRect);
-  const selectedEntityIdentifier = useAppSelector(selectSelectedEntityIdentifier);
   const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
   const isCanvasFocused = useIsRegionFocused('canvas');
-  const selectedItemImageDTO = useStore(ctx.$selectedItemOutputImageDTO);
   const cancelQueueItemsByDestination = useCancelQueueItemsByDestination();
+  const acceptSelectedIsEnabled = useStore(ctx.$acceptSelectedIsEnabled);
 
   const { t } = useTranslation();
 
-  const acceptSelected = useCallback(() => {
-    if (!selectedItemImageDTO) {
-      return;
-    }
-    const { x, y, width, height } = bboxRect;
-    const imageObject = imageNameToImageObject(selectedItemImageDTO.image_name, { width, height });
-    const overrides: Partial<CanvasRasterLayerState> = {
-      position: { x, y },
-      objects: [imageObject],
-    };
-
-    dispatch(rasterLayerAdded({ overrides, isSelected: selectedEntityIdentifier?.type === 'raster_layer' }));
-    dispatch(canvasSessionReset());
-    cancelQueueItemsByDestination.trigger(ctx.session.id, { withToast: false });
-  }, [
-    selectedItemImageDTO,
-    bboxRect,
-    dispatch,
-    selectedEntityIdentifier?.type,
-    cancelQueueItemsByDestination,
-    ctx.session.id,
-  ]);
-
   useHotkeys(
     ['enter'],
-    acceptSelected,
+    ctx.acceptSelected,
     {
       preventDefault: true,
-      enabled: isCanvasFocused && shouldShowStagedImage && selectedItemImageDTO !== null,
+      enabled: isCanvasFocused && shouldShowStagedImage && acceptSelectedIsEnabled,
     },
-    [isCanvasFocused, shouldShowStagedImage, selectedItemImageDTO]
+    [ctx.acceptSelected, isCanvasFocused, shouldShowStagedImage, acceptSelectedIsEnabled]
   );
 
   return (
@@ -66,9 +34,9 @@ export const StagingAreaToolbarAcceptButton = memo(() => {
       tooltip={`${t('common.accept')} (Enter)`}
       aria-label={`${t('common.accept')} (Enter)`}
       icon={<PiCheckBold />}
-      onClick={acceptSelected}
+      onClick={ctx.acceptSelected}
       colorScheme="invokeBlue"
-      isDisabled={!selectedItemImageDTO || !shouldShowStagedImage || cancelQueueItemsByDestination.isDisabled}
+      isDisabled={!acceptSelectedIsEnabled || !shouldShowStagedImage || cancelQueueItemsByDestination.isDisabled}
       isLoading={cancelQueueItemsByDestination.isLoading}
     />
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardAllButton.tsx

@@ -1,28 +1,28 @@
 import { IconButton } from '@invoke-ai/ui-library';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStore } from '@nanostores/react';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useCancelQueueItemsByDestination } from 'features/queue/hooks/useCancelQueueItemsByDestination';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiTrashSimpleBold } from 'react-icons/pi';
 
-export const StagingAreaToolbarDiscardAllButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
-  const ctx = useCanvasSessionContext();
+export const StagingAreaToolbarDiscardAllButton = memo(() => {
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
+  const ctx = useStagingAreaContext();
   const { t } = useTranslation();
   const cancelQueueItemsByDestination = useCancelQueueItemsByDestination();
 
-  const discardAll = useCallback(() => {
-    ctx.discardAll();
-    cancelQueueItemsByDestination.trigger(ctx.session.id, { withToast: false });
-  }, [cancelQueueItemsByDestination, ctx]);
-
   return (
     <IconButton
       tooltip={`${t('controlLayers.stagingArea.discardAll')} (Esc)`}
       aria-label={t('controlLayers.stagingArea.discardAll')}
       icon={<PiTrashSimpleBold />}
-      onClick={discardAll}
+      onClick={ctx.discardAll}
       colorScheme="error"
-      isDisabled={isDisabled || cancelQueueItemsByDestination.isDisabled}
+      isDisabled={cancelQueueItemsByDestination.isDisabled || !shouldShowStagedImage}
       isLoading={cancelQueueItemsByDestination.isLoading}
     />
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarDiscardSelectedButton.tsx

@@ -1,34 +1,30 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { useCancelQueueItem } from 'features/queue/hooks/useCancelQueueItem';
-import { memo, useCallback } from 'react';
+import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiXBold } from 'react-icons/pi';
 
-export const StagingAreaToolbarDiscardSelectedButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
-  const ctx = useCanvasSessionContext();
+export const StagingAreaToolbarDiscardSelectedButton = memo(() => {
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
+  const ctx = useStagingAreaContext();
   const cancelQueueItem = useCancelQueueItem();
-  const selectedItemId = useStore(ctx.$selectedItemId);
+  const discardSelectedIsEnabled = useStore(ctx.$discardSelectedIsEnabled);
 
   const { t } = useTranslation();
 
-  const discardSelected = useCallback(async () => {
-    if (selectedItemId === null) {
-      return;
-    }
-    ctx.discard(selectedItemId);
-    await cancelQueueItem.trigger(selectedItemId, { withToast: false });
-  }, [selectedItemId, ctx, cancelQueueItem]);
-
   return (
     <IconButton
       tooltip={t('controlLayers.stagingArea.discard')}
       aria-label={t('controlLayers.stagingArea.discard')}
       icon={<PiXBold />}
-      onClick={discardSelected}
+      onClick={ctx.discardSelected}
       colorScheme="invokeBlue"
-      isDisabled={selectedItemId === null || cancelQueueItem.isDisabled || isDisabled}
+      isDisabled={!discardSelectedIsEnabled || cancelQueueItem.isDisabled || !shouldShowStagedImage}
       isLoading={cancelQueueItem.isLoading}
     />
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarImageCountButton.tsx

@@ -1,23 +1,27 @@
 import { Button } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { memo, useMemo } from 'react';
 
 export const StagingAreaToolbarImageCountButton = memo(() => {
-  const ctx = useCanvasSessionContext();
-  const selectItemIndex = useStore(ctx.$selectedItemIndex);
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
+  const ctx = useStagingAreaContext();
+  const selectedItem = useStore(ctx.$selectedItem);
   const itemCount = useStore(ctx.$itemCount);
 
   const counterText = useMemo(() => {
-    if (itemCount > 0 && selectItemIndex !== null) {
-      return `${selectItemIndex + 1} of ${itemCount}`;
+    if (itemCount > 0 && selectedItem !== null) {
+      return `${selectedItem.index + 1} of ${itemCount}`;
     } else {
       return `0 of 0`;
     }
-  }, [itemCount, selectItemIndex]);
+  }, [itemCount, selectedItem]);
 
   return (
-    <Button colorScheme="base" pointerEvents="none" minW={28}>
+    <Button colorScheme="base" pointerEvents="none" minW={28} isDisabled={!shouldShowStagedImage}>
       {counterText}
     </Button>
   );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenu.tsx

@@ -1,12 +1,23 @@
 import { IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { StagingAreaToolbarNewLayerFromImageMenuItems } from 'features/controlLayers/components/StagingArea/StagingAreaToolbarMenuNewLayerFromImage';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { memo } from 'react';
 import { PiDotsThreeVerticalBold } from 'react-icons/pi';
 
 export const StagingAreaToolbarMenu = memo(() => {
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
   return (
     <Menu>
-      <MenuButton as={IconButton} icon={<PiDotsThreeVerticalBold />} colorScheme="invokeBlue" />
+      <MenuButton
+        tooltip="Image Actions"
+        as={IconButton}
+        icon={<PiDotsThreeVerticalBold />}
+        colorScheme="invokeBlue"
+        isDisabled={!shouldShowStagedImage}
+      />
       <MenuList>
         <StagingAreaToolbarNewLayerFromImageMenuItems />
       </MenuList>

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarMenuNewLayerFromImage.tsx

@@ -2,7 +2,7 @@ import { MenuGroup, MenuItem } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppStore } from 'app/store/storeHooks';
 import { NewLayerIcon } from 'features/controlLayers/components/common/icons';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { createNewCanvasEntityFromImage } from 'features/imageActions/actions';
 import { toast } from 'features/toast/toast';
@@ -15,8 +15,8 @@ const uploadImageArg = { image_category: 'general', is_intermediate: true, silen
 export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
   const canvasManager = useCanvasManager();
   const { t } = useTranslation();
-  const ctx = useCanvasSessionContext();
-  const selectedItemOutputImageDTO = useStore(ctx.$selectedItemOutputImageDTO);
+  const ctx = useStagingAreaContext();
+  const selectedItemImageDTO = useStore(ctx.$selectedItemImageDTO);
   const store = useAppStore();
   const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
 
@@ -29,11 +29,11 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
   }, [t]);
 
   const onClickNewRasterLayerFromImage = useCallback(async () => {
-    if (!selectedItemOutputImageDTO) {
+    if (!selectedItemImageDTO) {
       return;
     }
     const { dispatch, getState } = store;
-    const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg);
+    const imageDTO = await copyImage(selectedItemImageDTO.image_name, uploadImageArg);
     createNewCanvasEntityFromImage({
       imageDTO,
       type: 'raster_layer',
@@ -42,14 +42,14 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
       overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
     });
     toastSentToCanvas();
-  }, [selectedItemOutputImageDTO, store, toastSentToCanvas]);
+  }, [selectedItemImageDTO, store, toastSentToCanvas]);
 
   const onClickNewControlLayerFromImage = useCallback(async () => {
-    if (!selectedItemOutputImageDTO) {
+    if (!selectedItemImageDTO) {
       return;
     }
     const { dispatch, getState } = store;
-    const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg);
+    const imageDTO = await copyImage(selectedItemImageDTO.image_name, uploadImageArg);
 
     createNewCanvasEntityFromImage({
       imageDTO,
@@ -59,14 +59,14 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
       overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
     });
     toastSentToCanvas();
-  }, [selectedItemOutputImageDTO, store, toastSentToCanvas]);
+  }, [selectedItemImageDTO, store, toastSentToCanvas]);
 
   const onClickNewInpaintMaskFromImage = useCallback(async () => {
-    if (!selectedItemOutputImageDTO) {
+    if (!selectedItemImageDTO) {
       return;
     }
     const { dispatch, getState } = store;
-    const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg);
+    const imageDTO = await copyImage(selectedItemImageDTO.image_name, uploadImageArg);
 
     createNewCanvasEntityFromImage({
       imageDTO,
@@ -76,14 +76,14 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
       overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
     });
     toastSentToCanvas();
-  }, [selectedItemOutputImageDTO, store, toastSentToCanvas]);
+  }, [selectedItemImageDTO, store, toastSentToCanvas]);
 
   const onClickNewRegionalGuidanceFromImage = useCallback(async () => {
-    if (!selectedItemOutputImageDTO) {
+    if (!selectedItemImageDTO) {
       return;
     }
     const { dispatch, getState } = store;
-    const imageDTO = await copyImage(selectedItemOutputImageDTO.image_name, uploadImageArg);
+    const imageDTO = await copyImage(selectedItemImageDTO.image_name, uploadImageArg);
 
     createNewCanvasEntityFromImage({
       imageDTO,
@@ -93,35 +93,35 @@ export const StagingAreaToolbarNewLayerFromImageMenuItems = memo(() => {
       overrides: { isEnabled: false }, // We are adding the layer while staging, it should be disabled by default
     });
     toastSentToCanvas();
-  }, [selectedItemOutputImageDTO, store, toastSentToCanvas]);
+  }, [selectedItemImageDTO, store, toastSentToCanvas]);
 
   return (
     <MenuGroup title="New Layer From Image">
       <MenuItem
         icon={<NewLayerIcon />}
         onClickCapture={onClickNewInpaintMaskFromImage}
-        isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+        isDisabled={!selectedItemImageDTO || !shouldShowStagedImage}
       >
         {t('controlLayers.inpaintMask')}
       </MenuItem>
       <MenuItem
         icon={<NewLayerIcon />}
         onClickCapture={onClickNewRegionalGuidanceFromImage}
-        isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+        isDisabled={!selectedItemImageDTO || !shouldShowStagedImage}
       >
         {t('controlLayers.regionalGuidance')}
       </MenuItem>
       <MenuItem
         icon={<NewLayerIcon />}
         onClickCapture={onClickNewControlLayerFromImage}
-        isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+        isDisabled={!selectedItemImageDTO || !shouldShowStagedImage}
       >
         {t('controlLayers.controlLayer')}
       </MenuItem>
       <MenuItem
         icon={<NewLayerIcon />}
         onClickCapture={onClickNewRasterLayerFromImage}
-        isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+        isDisabled={!selectedItemImageDTO || !shouldShowStagedImage}
       >
         {t('controlLayers.rasterLayer')}
       </MenuItem>

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarNextButton.tsx

@@ -1,14 +1,18 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useIsRegionFocused } from 'common/hooks/focus';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiArrowRightBold } from 'react-icons/pi';
 
-export const StagingAreaToolbarNextButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
-  const ctx = useCanvasSessionContext();
+export const StagingAreaToolbarNextButton = memo(() => {
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+
+  const ctx = useStagingAreaContext();
   const itemCount = useStore(ctx.$itemCount);
   const isCanvasFocused = useIsRegionFocused('canvas');
 
@@ -23,9 +27,9 @@ export const StagingAreaToolbarNextButton = memo(({ isDisabled }: { isDisabled?:
     ctx.selectNext,
     {
       preventDefault: true,
-      enabled: isCanvasFocused && !isDisabled && itemCount > 1,
+      enabled: isCanvasFocused && shouldShowStagedImage && itemCount > 1,
     },
-    [isCanvasFocused, isDisabled, itemCount, ctx.selectNext]
+    [isCanvasFocused, shouldShowStagedImage, itemCount, ctx.selectNext]
   );
 
   return (
@@ -35,7 +39,7 @@ export const StagingAreaToolbarNextButton = memo(({ isDisabled }: { isDisabled?:
       icon={<PiArrowRightBold />}
       onClick={selectNext}
       colorScheme="invokeBlue"
-      isDisabled={itemCount <= 1 || isDisabled}
+      isDisabled={itemCount <= 1 || !shouldShowStagedImage}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarPrevButton.tsx

@@ -1,14 +1,17 @@
 import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useIsRegionFocused } from 'common/hooks/focus';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
+import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { memo, useCallback } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiArrowLeftBold } from 'react-icons/pi';
 
-export const StagingAreaToolbarPrevButton = memo(({ isDisabled }: { isDisabled?: boolean }) => {
-  const ctx = useCanvasSessionContext();
+export const StagingAreaToolbarPrevButton = memo(() => {
+  const canvasManager = useCanvasManager();
+  const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
+  const ctx = useStagingAreaContext();
   const itemCount = useStore(ctx.$itemCount);
   const isCanvasFocused = useIsRegionFocused('canvas');
 
@@ -23,9 +26,9 @@ export const StagingAreaToolbarPrevButton = memo(({ isDisabled }: { isDisabled?:
     ctx.selectPrev,
     {
       preventDefault: true,
-      enabled: isCanvasFocused && !isDisabled && itemCount > 1,
+      enabled: isCanvasFocused && shouldShowStagedImage && itemCount > 1,
     },
-    [isCanvasFocused, isDisabled, itemCount, ctx.selectPrev]
+    [isCanvasFocused, shouldShowStagedImage, itemCount, ctx.selectPrev]
   );
 
   return (
@@ -35,7 +38,7 @@ export const StagingAreaToolbarPrevButton = memo(({ isDisabled }: { isDisabled?:
       icon={<PiArrowLeftBold />}
       onClick={selectPrev}
       colorScheme="invokeBlue"
-      isDisabled={itemCount <= 1 || isDisabled}
+      isDisabled={itemCount <= 1 || !shouldShowStagedImage}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbarSaveSelectedToGalleryButton.tsx

@@ -2,7 +2,7 @@ import { IconButton } from '@invoke-ai/ui-library';
 import { useStore } from '@nanostores/react';
 import { useAppSelector } from 'app/store/storeHooks';
 import { withResultAsync } from 'common/util/result';
-import { useCanvasSessionContext } from 'features/controlLayers/components/SimpleSession/context';
+import { useStagingAreaContext } from 'features/controlLayers/components/StagingArea/context';
 import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import { selectAutoAddBoardId } from 'features/gallery/store/gallerySelectors';
 import { toast } from 'features/toast/toast';
@@ -16,14 +16,14 @@ const TOAST_ID = 'SAVE_STAGING_AREA_IMAGE_TO_GALLERY';
 export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
   const canvasManager = useCanvasManager();
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
-  const ctx = useCanvasSessionContext();
-  const selectedItemOutputImageDTO = useStore(ctx.$selectedItemOutputImageDTO);
+  const ctx = useStagingAreaContext();
+  const selectedItemImageDTO = useStore(ctx.$selectedItemImageDTO);
   const shouldShowStagedImage = useStore(canvasManager.stagingArea.$shouldShowStagedImage);
 
   const { t } = useTranslation();
 
   const saveSelectedImageToGallery = useCallback(async () => {
-    if (!selectedItemOutputImageDTO) {
+    if (!selectedItemImageDTO) {
       return;
     }
 
@@ -31,7 +31,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
     // the gallery without borking the canvas, which may need this image to exist.
     const result = await withResultAsync(async () => {
       // Create a new file with the same name, which we will upload
-      await copyImage(selectedItemOutputImageDTO.image_name, {
+      await copyImage(selectedItemImageDTO.image_name, {
         // Image should show up in the Images tab
         image_category: 'general',
         is_intermediate: false,
@@ -55,7 +55,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
         status: 'error',
       });
     }
-  }, [autoAddBoardId, selectedItemOutputImageDTO, t]);
+  }, [autoAddBoardId, selectedItemImageDTO, t]);
 
   return (
     <IconButton
@@ -64,7 +64,7 @@ export const StagingAreaToolbarSaveSelectedToGalleryButton = memo(() => {
       icon={<PiFloppyDiskBold />}
       onClick={saveSelectedImageToGallery}
       colorScheme="invokeBlue"
-      isDisabled={!selectedItemOutputImageDTO || !shouldShowStagedImage}
+      isDisabled={!selectedItemImageDTO || !shouldShowStagedImage}
     />
   );
 });

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/__mocks__/mockStagingAreaApp.ts

@@ -0,0 +1,172 @@
+import { merge } from 'es-toolkit';
+import type { StagingAreaAppApi } from 'features/controlLayers/components/StagingArea/state';
+import type { AutoSwitchMode } from 'features/controlLayers/store/canvasSettingsSlice';
+import type { ImageDTO, S } from 'services/api/types';
+import type { PartialDeep } from 'type-fest';
+import { vi } from 'vitest';
+
+export const createMockStagingAreaApp = (): StagingAreaAppApi & {
+  // Additional methods for testing
+  _triggerItemsChanged: (items: S['SessionQueueItem'][]) => void;
+  _triggerQueueItemStatusChanged: (data: S['QueueItemStatusChangedEvent']) => void;
+  _triggerInvocationProgress: (data: S['InvocationProgressEvent']) => void;
+  _setAutoSwitchMode: (mode: AutoSwitchMode) => void;
+  _setImageDTO: (imageName: string, imageDTO: ImageDTO | null) => void;
+} => {
+  const itemsChangedHandlers = new Set<(items: S['SessionQueueItem'][]) => void>();
+  const queueItemStatusChangedHandlers = new Set<(data: S['QueueItemStatusChangedEvent']) => void>();
+  const invocationProgressHandlers = new Set<(data: S['InvocationProgressEvent']) => void>();
+
+  let autoSwitchMode: AutoSwitchMode = 'switch_on_start';
+  const imageDTOs = new Map<string, ImageDTO | null>();
+
+  return {
+    onDiscard: vi.fn(),
+    onDiscardAll: vi.fn(),
+    onAccept: vi.fn(),
+    onSelect: vi.fn(),
+    onSelectPrev: vi.fn(),
+    onSelectNext: vi.fn(),
+    onSelectFirst: vi.fn(),
+    onSelectLast: vi.fn(),
+    getAutoSwitch: vi.fn(() => autoSwitchMode),
+    onAutoSwitchChange: vi.fn(),
+    getImageDTO: vi.fn((imageName: string) => {
+      return Promise.resolve(imageDTOs.get(imageName) || null);
+    }),
+    onItemsChanged: vi.fn((handler) => {
+      itemsChangedHandlers.add(handler);
+      return () => itemsChangedHandlers.delete(handler);
+    }),
+    onQueueItemStatusChanged: vi.fn((handler) => {
+      queueItemStatusChangedHandlers.add(handler);
+      return () => queueItemStatusChangedHandlers.delete(handler);
+    }),
+    onInvocationProgress: vi.fn((handler) => {
+      invocationProgressHandlers.add(handler);
+      return () => invocationProgressHandlers.delete(handler);
+    }),
+
+    // Testing helper methods
+    _triggerItemsChanged: (items: S['SessionQueueItem'][]) => {
+      itemsChangedHandlers.forEach((handler) => handler(items));
+    },
+    _triggerQueueItemStatusChanged: (data: S['QueueItemStatusChangedEvent']) => {
+      queueItemStatusChangedHandlers.forEach((handler) => handler(data));
+    },
+    _triggerInvocationProgress: (data: S['InvocationProgressEvent']) => {
+      invocationProgressHandlers.forEach((handler) => handler(data));
+    },
+    _setAutoSwitchMode: (mode: AutoSwitchMode) => {
+      autoSwitchMode = mode;
+    },
+    _setImageDTO: (imageName: string, imageDTO: ImageDTO | null) => {
+      imageDTOs.set(imageName, imageDTO);
+    },
+  };
+};
+
+export const createMockQueueItem = (overrides: PartialDeep<S['SessionQueueItem']> = {}): S['SessionQueueItem'] =>
+  merge(
+    {
+      item_id: 1,
+      batch_id: 'test-batch-id',
+      session_id: 'test-session',
+      queue_id: 'test-queue-id',
+      status: 'pending',
+      priority: 0,
+      origin: null,
+      destination: 'test-session',
+      error_type: null,
+      error_message: null,
+      error_traceback: null,
+      created_at: '2024-01-01T00:00:00Z',
+      updated_at: '2024-01-01T00:00:00Z',
+      started_at: null,
+      completed_at: null,
+      field_values: null,
+      retried_from_item_id: null,
+      is_api_validation_run: false,
+      published_workflow_id: null,
+      session: {
+        id: 'test-session',
+        graph: {},
+        execution_graph: {},
+        executed: [],
+        executed_history: [],
+        results: {
+          'test-node-id': {
+            image: {
+              image_name: 'test-image.png',
+            },
+          },
+        },
+        errors: {},
+        prepared_source_mapping: {},
+        source_prepared_mapping: {
+          canvas_output: ['test-node-id'],
+        },
+      },
+      workflow: null,
+    },
+    overrides
+  ) as S['SessionQueueItem'];
+
+export const createMockImageDTO = (overrides: Partial<ImageDTO> = {}): ImageDTO => ({
+  image_name: 'test-image.png',
+  image_url: 'http://test.com/test-image.png',
+  thumbnail_url: 'http://test.com/test-image-thumb.png',
+  image_origin: 'internal',
+  image_category: 'general',
+  width: 512,
+  height: 512,
+  created_at: '2024-01-01T00:00:00Z',
+  updated_at: '2024-01-01T00:00:00Z',
+  deleted_at: null,
+  is_intermediate: false,
+  starred: false,
+  has_workflow: false,
+  session_id: 'test-session',
+  node_id: 'test-node-id',
+  board_id: null,
+  ...overrides,
+});
+
+export const createMockProgressEvent = (
+  overrides: PartialDeep<S['InvocationProgressEvent']> = {}
+): S['InvocationProgressEvent'] =>
+  merge(
+    {
+      timestamp: Date.now(),
+      queue_id: 'test-queue-id',
+      item_id: 1,
+      batch_id: 'test-batch-id',
+      session_id: 'test-session',
+      origin: null,
+      destination: 'test-session',
+      invocation: {},
+      invocation_source_id: 'test-invocation-source-id',
+      message: 'Processing...',
+      percentage: 50,
+      image: null,
+    } as S['InvocationProgressEvent'],
+    overrides
+  );
+
+export const createMockQueueItemStatusChangedEvent = (
+  overrides: PartialDeep<S['QueueItemStatusChangedEvent']> = {}
+): S['QueueItemStatusChangedEvent'] =>
+  merge(
+    {
+      timestamp: Date.now(),
+      queue_id: 'test-queue-id',
+      item_id: 1,
+      batch_id: 'test-batch-id',
+      origin: null,
+      destination: 'test-session',
+      status: 'completed',
+      error_type: null,
+      error_message: null,
+    } as S['QueueItemStatusChangedEvent'],
+    overrides
+  );

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/context.tsx

@@ -0,0 +1,132 @@
+import { useStore } from '@nanostores/react';
+import { useAppStore } from 'app/store/storeHooks';
+import {
+  selectStagingAreaAutoSwitch,
+  settingsStagingAreaAutoSwitchChanged,
+} from 'features/controlLayers/store/canvasSettingsSlice';
+import { rasterLayerAdded } from 'features/controlLayers/store/canvasSlice';
+import {
+  buildSelectCanvasQueueItems,
+  canvasQueueItemDiscarded,
+  canvasSessionReset,
+} from 'features/controlLayers/store/canvasStagingAreaSlice';
+import { selectBboxRect, selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors';
+import type { CanvasRasterLayerState } from 'features/controlLayers/store/types';
+import { imageNameToImageObject } from 'features/controlLayers/store/util';
+import type { PropsWithChildren } from 'react';
+import { createContext, memo, useContext, useEffect, useMemo, useState } from 'react';
+import { getImageDTOSafe } from 'services/api/endpoints/images';
+import { queueApi } from 'services/api/endpoints/queue';
+import type { S } from 'services/api/types';
+import { $socket } from 'services/events/stores';
+import { assert } from 'tsafe';
+
+import type { ProgressData, StagingAreaAppApi } from './state';
+import { getInitialProgressData, StagingAreaApi } from './state';
+
+const StagingAreaContext = createContext<StagingAreaApi | null>(null);
+
+export const StagingAreaContextProvider = memo(({ children, sessionId }: PropsWithChildren<{ sessionId: string }>) => {
+  const store = useAppStore();
+  const socket = useStore($socket);
+  const stagingAreaAppApi = useMemo<StagingAreaAppApi>(() => {
+    const selectQueueItems = buildSelectCanvasQueueItems(sessionId);
+
+    const _stagingAreaAppApi: StagingAreaAppApi = {
+      getAutoSwitch: () => selectStagingAreaAutoSwitch(store.getState()),
+      getImageDTO: (imageName: string) => getImageDTOSafe(imageName),
+      onInvocationProgress: (handler) => {
+        socket?.on('invocation_progress', handler);
+        return () => {
+          socket?.off('invocation_progress', handler);
+        };
+      },
+      onQueueItemStatusChanged: (handler) => {
+        socket?.on('queue_item_status_changed', handler);
+        return () => {
+          socket?.off('queue_item_status_changed', handler);
+        };
+      },
+      onItemsChanged: (handler) => {
+        let prev: S['SessionQueueItem'][] = [];
+        return store.subscribe(() => {
+          const next = selectQueueItems(store.getState());
+          if (prev !== next) {
+            prev = next;
+            handler(next);
+          }
+        });
+      },
+      onDiscard: ({ item_id, status }) => {
+        store.dispatch(canvasQueueItemDiscarded({ itemId: item_id }));
+        if (status === 'in_progress' || status === 'pending') {
+          store.dispatch(queueApi.endpoints.cancelQueueItem.initiate({ item_id }, { track: false }));
+        }
+      },
+      onDiscardAll: () => {
+        store.dispatch(canvasSessionReset());
+        store.dispatch(
+          queueApi.endpoints.cancelQueueItemsByDestination.initiate({ destination: sessionId }, { track: false })
+        );
+      },
+      onAccept: (item, imageDTO) => {
+        const bboxRect = selectBboxRect(store.getState());
+        const { x, y, width, height } = bboxRect;
+        const imageObject = imageNameToImageObject(imageDTO.image_name, { width, height });
+        const selectedEntityIdentifier = selectSelectedEntityIdentifier(store.getState());
+        const overrides: Partial<CanvasRasterLayerState> = {
+          position: { x, y },
+          objects: [imageObject],
+        };
+
+        store.dispatch(rasterLayerAdded({ overrides, isSelected: selectedEntityIdentifier?.type === 'raster_layer' }));
+        store.dispatch(canvasSessionReset());
+        store.dispatch(
+          queueApi.endpoints.cancelQueueItemsByDestination.initiate({ destination: sessionId }, { track: false })
+        );
+      },
+      onAutoSwitchChange: (mode) => {
+        store.dispatch(settingsStagingAreaAutoSwitchChanged(mode));
+      },
+    };
+
+    return _stagingAreaAppApi;
+  }, [sessionId, socket, store]);
+
+  const [stagingAreaApi] = useState(() => new StagingAreaApi());
+
+  useEffect(() => {
+    stagingAreaApi.connectToApp(sessionId, stagingAreaAppApi);
+
+    // We need to subscribe to the queue items query manually to ensure the staging area actually gets the items
+    const { unsubscribe: unsubQueueItemsQuery } = store.dispatch(
+      queueApi.endpoints.listAllQueueItems.initiate({ destination: sessionId })
+    );
+
+    return () => {
+      stagingAreaApi.cleanup();
+      unsubQueueItemsQuery();
+    };
+  }, [sessionId, stagingAreaApi, stagingAreaAppApi, store]);
+
+  return <StagingAreaContext.Provider value={stagingAreaApi}>{children}</StagingAreaContext.Provider>;
+});
+StagingAreaContextProvider.displayName = 'StagingAreaContextProvider';
+
+export const useStagingAreaContext = () => {
+  const ctx = useContext(StagingAreaContext);
+  assert(ctx !== null, "'useStagingAreaContext' must be used within a StagingAreaContextProvider");
+  return ctx;
+};
+
+export const useOutputImageDTO = (itemId: number) => {
+  const ctx = useStagingAreaContext();
+  const allProgressData = useStore(ctx.$progressData, { keys: [itemId] });
+  return allProgressData[itemId]?.imageDTO ?? null;
+};
+
+export const useProgressDatum = (itemId: number): ProgressData => {
+  const ctx = useStagingAreaContext();
+  const allProgressData = useStore(ctx.$progressData, { keys: [itemId] });
+  return allProgressData[itemId] ?? getInitialProgressData(itemId);
+};

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/shared.test.ts

@@ -0,0 +1,205 @@
+import type { S } from 'services/api/types';
+import { describe, expect, it } from 'vitest';
+
+import { getOutputImageName, getProgressMessage, getQueueItemElementId } from './shared';
+
+describe('StagingAreaApi Utility Functions', () => {
+  describe('getProgressMessage', () => {
+    it('should return default message when no data provided', () => {
+      expect(getProgressMessage()).toBe('Generating');
+      expect(getProgressMessage(null)).toBe('Generating');
+    });
+
+    it('should format progress message when data is provided', () => {
+      const progressEvent: S['InvocationProgressEvent'] = {
+        item_id: 1,
+        destination: 'test-session',
+        node_id: 'test-node',
+        source_node_id: 'test-source-node',
+        progress: 0.5,
+        message: 'Processing image...',
+        image: null,
+      } as unknown as S['InvocationProgressEvent'];
+
+      const result = getProgressMessage(progressEvent);
+      expect(result).toBe('Processing image...');
+    });
+  });
+
+  describe('getQueueItemElementId', () => {
+    it('should generate correct element ID for queue item', () => {
+      expect(getQueueItemElementId(0)).toBe('queue-item-preview-0');
+      expect(getQueueItemElementId(5)).toBe('queue-item-preview-5');
+      expect(getQueueItemElementId(99)).toBe('queue-item-preview-99');
+    });
+  });
+
+  describe('getOutputImageName', () => {
+    it('should extract image name from completed queue item', () => {
+      const queueItem: S['SessionQueueItem'] = {
+        item_id: 1,
+        status: 'completed',
+        priority: 0,
+        destination: 'test-session',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        started_at: '2024-01-01T00:00:01Z',
+        completed_at: '2024-01-01T00:01:00Z',
+        error: null,
+        session: {
+          id: 'test-session',
+          source_prepared_mapping: {
+            canvas_output: ['output-node-id'],
+          },
+          results: {
+            'output-node-id': {
+              image: {
+                image_name: 'test-output.png',
+              },
+            },
+          },
+        },
+      } as unknown as S['SessionQueueItem'];
+
+      expect(getOutputImageName(queueItem)).toBe('test-output.png');
+    });
+
+    it('should return null when no canvas output node found', () => {
+      const queueItem = {
+        item_id: 1,
+        status: 'completed',
+        priority: 0,
+        destination: 'test-session',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        started_at: '2024-01-01T00:00:01Z',
+        completed_at: '2024-01-01T00:01:00Z',
+        error: null,
+        session: {
+          id: 'test-session',
+          source_prepared_mapping: {
+            some_other_node: ['other-node-id'],
+          },
+          results: {
+            'other-node-id': {
+              type: 'image_output',
+              image: {
+                image_name: 'test-output.png',
+              },
+              width: 512,
+              height: 512,
+            },
+          },
+        },
+      } as unknown as S['SessionQueueItem'];
+
+      expect(getOutputImageName(queueItem)).toBe(null);
+    });
+
+    it('should return null when output node has no results', () => {
+      const queueItem: S['SessionQueueItem'] = {
+        item_id: 1,
+        status: 'completed',
+        priority: 0,
+        destination: 'test-session',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        started_at: '2024-01-01T00:00:01Z',
+        completed_at: '2024-01-01T00:01:00Z',
+        error: null,
+        session: {
+          id: 'test-session',
+          source_prepared_mapping: {
+            canvas_output: ['output-node-id'],
+          },
+          results: {},
+        },
+      } as unknown as S['SessionQueueItem'];
+
+      expect(getOutputImageName(queueItem)).toBe(null);
+    });
+
+    it('should return null when results contain no image fields', () => {
+      const queueItem: S['SessionQueueItem'] = {
+        item_id: 1,
+        status: 'completed',
+        priority: 0,
+        destination: 'test-session',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        started_at: '2024-01-01T00:00:01Z',
+        completed_at: '2024-01-01T00:01:00Z',
+        error: null,
+        session: {
+          id: 'test-session',
+          source_prepared_mapping: {
+            canvas_output: ['output-node-id'],
+          },
+          results: {
+            'output-node-id': {
+              text: 'some text output',
+              number: 42,
+            },
+          },
+        },
+      } as unknown as S['SessionQueueItem'];
+
+      expect(getOutputImageName(queueItem)).toBe(null);
+    });
+
+    it('should handle multiple outputs and return first image', () => {
+      const queueItem: S['SessionQueueItem'] = {
+        item_id: 1,
+        status: 'completed',
+        priority: 0,
+        destination: 'test-session',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        started_at: '2024-01-01T00:00:01Z',
+        completed_at: '2024-01-01T00:01:00Z',
+        error: null,
+        session: {
+          id: 'test-session',
+          source_prepared_mapping: {
+            canvas_output: ['output-node-id'],
+          },
+          results: {
+            'output-node-id': {
+              text: 'some text',
+              first_image: {
+                image_name: 'first-image.png',
+              },
+              second_image: {
+                image_name: 'second-image.png',
+              },
+            },
+          },
+        },
+      } as unknown as S['SessionQueueItem'];
+
+      const result = getOutputImageName(queueItem);
+      expect(result).toBe('first-image.png');
+    });
+
+    it('should handle empty session mapping', () => {
+      const queueItem: S['SessionQueueItem'] = {
+        item_id: 1,
+        status: 'completed',
+        priority: 0,
+        destination: 'test-session',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+        started_at: '2024-01-01T00:00:01Z',
+        completed_at: '2024-01-01T00:01:00Z',
+        error: null,
+        session: {
+          id: 'test-session',
+          source_prepared_mapping: {},
+          results: {},
+        },
+      } as unknown as S['SessionQueueItem'];
+
+      expect(getOutputImageName(queueItem)).toBe(null);
+    });
+  });
+});

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/shared.ts

@@ -13,7 +13,7 @@ export const getProgressMessage = (data?: S['InvocationProgressEvent'] | null) =
 
 export const DROP_SHADOW = 'drop-shadow(0px 0px 4px rgb(0, 0, 0)) drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3))';
 
-export const getQueueItemElementId = (itemId: number) => `queue-item-status-card-${itemId}`;
+export const getQueueItemElementId = (index: number) => `queue-item-preview-${index}`;
 
 export const getOutputImageName = (item: S['SessionQueueItem']) => {
   const nodeId = Object.entries(item.session.source_prepared_mapping).find(([nodeId]) =>

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/state.test.ts

@@ -0,0 +1,799 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
+import {
+  createMockImageDTO,
+  createMockProgressEvent,
+  createMockQueueItem,
+  createMockQueueItemStatusChangedEvent,
+  createMockStagingAreaApp,
+} from './__mocks__/mockStagingAreaApp';
+import { StagingAreaApi } from './state';
+
+describe('StagingAreaApi', () => {
+  let api: StagingAreaApi;
+  let mockApp: ReturnType<typeof createMockStagingAreaApp>;
+  const sessionId = 'test-session';
+
+  beforeEach(() => {
+    mockApp = createMockStagingAreaApp();
+    api = new StagingAreaApi();
+    api.connectToApp(sessionId, mockApp);
+  });
+
+  afterEach(() => {
+    api.cleanup();
+  });
+
+  describe('Constructor and Setup', () => {
+    it('should initialize with correct session ID', () => {
+      expect(api._sessionId).toBe(sessionId);
+    });
+
+    it('should set up event subscriptions', () => {
+      expect(mockApp.onItemsChanged).toHaveBeenCalledWith(expect.any(Function));
+      expect(mockApp.onQueueItemStatusChanged).toHaveBeenCalledWith(expect.any(Function));
+      expect(mockApp.onInvocationProgress).toHaveBeenCalledWith(expect.any(Function));
+    });
+
+    it('should initialize atoms with default values', () => {
+      expect(api.$lastStartedItemId.get()).toBe(null);
+      expect(api.$lastCompletedItemId.get()).toBe(null);
+      expect(api.$items.get()).toEqual([]);
+      expect(api.$progressData.get()).toEqual({});
+      expect(api.$selectedItemId.get()).toBe(null);
+    });
+  });
+
+  describe('Computed Values', () => {
+    it('should compute item count correctly', () => {
+      expect(api.$itemCount.get()).toBe(0);
+
+      const items = [createMockQueueItem({ item_id: 1 })];
+      api.$items.set(items);
+      expect(api.$itemCount.get()).toBe(1);
+    });
+
+    it('should compute hasItems correctly', () => {
+      expect(api.$hasItems.get()).toBe(false);
+
+      const items = [createMockQueueItem({ item_id: 1 })];
+      api.$items.set(items);
+      expect(api.$hasItems.get()).toBe(true);
+    });
+
+    it('should compute isPending correctly', () => {
+      expect(api.$isPending.get()).toBe(false);
+
+      const items = [
+        createMockQueueItem({ item_id: 1, status: 'pending' }),
+        createMockQueueItem({ item_id: 2, status: 'completed' }),
+      ];
+      api.$items.set(items);
+      expect(api.$isPending.get()).toBe(true);
+    });
+
+    it('should compute selectedItem correctly', () => {
+      expect(api.$selectedItem.get()).toBe(null);
+
+      const items = [createMockQueueItem({ item_id: 1 }), createMockQueueItem({ item_id: 2 })];
+      api.$items.set(items);
+      api.$selectedItemId.set(1);
+
+      const selectedItem = api.$selectedItem.get();
+      expect(selectedItem).not.toBe(null);
+      expect(selectedItem?.item.item_id).toBe(1);
+      expect(selectedItem?.index).toBe(0);
+    });
+
+    it('should compute selectedItemImageDTO correctly', () => {
+      const items = [createMockQueueItem({ item_id: 1 })];
+      const imageDTO = createMockImageDTO();
+
+      api.$items.set(items);
+      api.$selectedItemId.set(1);
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO,
+        imageLoaded: false,
+      });
+
+      expect(api.$selectedItemImageDTO.get()).toBe(imageDTO);
+    });
+
+    it('should compute selectedItemIndex correctly', () => {
+      const items = [createMockQueueItem({ item_id: 1 }), createMockQueueItem({ item_id: 2 })];
+      api.$items.set(items);
+      api.$selectedItemId.set(2);
+
+      expect(api.$selectedItemIndex.get()).toBe(1);
+    });
+  });
+
+  describe('Selection Methods', () => {
+    beforeEach(() => {
+      const items = [
+        createMockQueueItem({ item_id: 1 }),
+        createMockQueueItem({ item_id: 2 }),
+        createMockQueueItem({ item_id: 3 }),
+      ];
+      api.$items.set(items);
+    });
+
+    it('should select item by ID', () => {
+      api.select(2);
+      expect(api.$selectedItemId.get()).toBe(2);
+      expect(mockApp.onSelect).toHaveBeenCalledWith(2);
+    });
+
+    it('should select next item', () => {
+      api.$selectedItemId.set(1);
+      api.selectNext();
+      expect(api.$selectedItemId.get()).toBe(2);
+      expect(mockApp.onSelectNext).toHaveBeenCalled();
+    });
+
+    it('should wrap to first item when selecting next from last', () => {
+      api.$selectedItemId.set(3);
+      api.selectNext();
+      expect(api.$selectedItemId.get()).toBe(1);
+    });
+
+    it('should select previous item', () => {
+      api.$selectedItemId.set(2);
+      api.selectPrev();
+      expect(api.$selectedItemId.get()).toBe(1);
+      expect(mockApp.onSelectPrev).toHaveBeenCalled();
+    });
+
+    it('should wrap to last item when selecting previous from first', () => {
+      api.$selectedItemId.set(1);
+      api.selectPrev();
+      expect(api.$selectedItemId.get()).toBe(3);
+    });
+
+    it('should select first item', () => {
+      api.selectFirst();
+      expect(api.$selectedItemId.get()).toBe(1);
+      expect(mockApp.onSelectFirst).toHaveBeenCalled();
+    });
+
+    it('should select last item', () => {
+      api.selectLast();
+      expect(api.$selectedItemId.get()).toBe(3);
+      expect(mockApp.onSelectLast).toHaveBeenCalled();
+    });
+
+    it('should do nothing when no items exist', () => {
+      api.$items.set([]);
+      api.selectNext();
+      api.selectPrev();
+      api.selectFirst();
+      api.selectLast();
+
+      expect(api.$selectedItemId.get()).toBe(null);
+    });
+
+    it('should do nothing when no item is selected', () => {
+      api.$selectedItemId.set(null);
+      api.selectNext();
+      api.selectPrev();
+
+      expect(api.$selectedItemId.get()).toBe(null);
+    });
+  });
+
+  describe('Discard Methods', () => {
+    beforeEach(() => {
+      const items = [
+        createMockQueueItem({ item_id: 1 }),
+        createMockQueueItem({ item_id: 2 }),
+        createMockQueueItem({ item_id: 3 }),
+      ];
+      api.$items.set(items);
+    });
+
+    it('should discard selected item and select next', () => {
+      api.$selectedItemId.set(2);
+      const selectedItem = api.$selectedItem.get();
+
+      api.discardSelected();
+
+      expect(api.$selectedItemId.get()).toBe(3);
+      expect(mockApp.onDiscard).toHaveBeenCalledWith(selectedItem?.item);
+    });
+
+    it('should discard selected item and clamp to last valid index', () => {
+      api.$selectedItemId.set(3);
+      const selectedItem = api.$selectedItem.get();
+
+      api.discardSelected();
+
+      // The logic clamps to the next index, so when discarding last item (index 2),
+      // it tries to select index 3 which clamps to index 2 (item 3)
+      expect(api.$selectedItemId.get()).toBe(3);
+      expect(mockApp.onDiscard).toHaveBeenCalledWith(selectedItem?.item);
+    });
+
+    it('should set selectedItemId to null when discarding last item', () => {
+      api.$items.set([createMockQueueItem({ item_id: 1 })]);
+      api.$selectedItemId.set(1);
+
+      api.discardSelected();
+
+      // When there's only one item, after clamping we get the same item, so it stays selected
+      expect(api.$selectedItemId.get()).toBe(1);
+    });
+
+    it('should do nothing when no item is selected', () => {
+      api.$selectedItemId.set(null);
+      api.discardSelected();
+
+      expect(mockApp.onDiscard).not.toHaveBeenCalled();
+    });
+
+    it('should discard all items', () => {
+      api.$selectedItemId.set(2);
+      api.discardAll();
+
+      expect(api.$selectedItemId.get()).toBe(null);
+      expect(mockApp.onDiscardAll).toHaveBeenCalled();
+    });
+
+    it('should compute discardSelectedIsEnabled correctly', () => {
+      expect(api.$discardSelectedIsEnabled.get()).toBe(false);
+
+      api.$selectedItemId.set(1);
+      expect(api.$discardSelectedIsEnabled.get()).toBe(true);
+    });
+  });
+
+  describe('Accept Methods', () => {
+    beforeEach(() => {
+      const items = [createMockQueueItem({ item_id: 1 })];
+      api.$items.set(items);
+      api.$selectedItemId.set(1);
+    });
+
+    it('should accept selected item when image is available', () => {
+      const imageDTO = createMockImageDTO();
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO,
+        imageLoaded: false,
+      });
+
+      const selectedItem = api.$selectedItem.get();
+      api.acceptSelected();
+
+      expect(mockApp.onAccept).toHaveBeenCalledWith(selectedItem?.item, imageDTO);
+    });
+
+    it('should do nothing when no image is available', () => {
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO: null,
+        imageLoaded: false,
+      });
+
+      api.acceptSelected();
+
+      expect(mockApp.onAccept).not.toHaveBeenCalled();
+    });
+
+    it('should do nothing when no item is selected', () => {
+      api.$selectedItemId.set(null);
+      api.acceptSelected();
+
+      expect(mockApp.onAccept).not.toHaveBeenCalled();
+    });
+
+    it('should compute acceptSelectedIsEnabled correctly', () => {
+      expect(api.$acceptSelectedIsEnabled.get()).toBe(false);
+
+      const imageDTO = createMockImageDTO();
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO,
+        imageLoaded: false,
+      });
+
+      expect(api.$acceptSelectedIsEnabled.get()).toBe(true);
+    });
+  });
+
+  describe('Progress Event Handling', () => {
+    it('should handle invocation progress events', () => {
+      const progressEvent = createMockProgressEvent({
+        item_id: 1,
+        destination: sessionId,
+      });
+
+      api.onInvocationProgressEvent(progressEvent);
+
+      const progressData = api.$progressData.get();
+      expect(progressData[1]?.progressEvent).toBe(progressEvent);
+    });
+
+    it('should ignore events for different sessions', () => {
+      const progressEvent = createMockProgressEvent({
+        item_id: 1,
+        destination: 'different-session',
+      });
+
+      api.onInvocationProgressEvent(progressEvent);
+
+      const progressData = api.$progressData.get();
+      expect(progressData[1]).toBeUndefined();
+    });
+
+    it('should update existing progress data', () => {
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO: createMockImageDTO(),
+        imageLoaded: false,
+      });
+
+      const progressEvent = createMockProgressEvent({
+        item_id: 1,
+        destination: sessionId,
+      });
+
+      api.onInvocationProgressEvent(progressEvent);
+
+      const progressData = api.$progressData.get();
+      expect(progressData[1]?.progressEvent).toBe(progressEvent);
+      expect(progressData[1]?.imageDTO).toBeTruthy();
+    });
+  });
+
+  describe('Queue Item Status Change Handling', () => {
+    it('should handle completed status and set last completed item', () => {
+      const statusEvent = createMockQueueItemStatusChangedEvent({
+        item_id: 1,
+        destination: sessionId,
+        status: 'completed',
+      });
+
+      api.onQueueItemStatusChangedEvent(statusEvent);
+
+      expect(api.$lastCompletedItemId.get()).toBe(1);
+    });
+
+    it('should handle in_progress status with switch_on_start', () => {
+      mockApp._setAutoSwitchMode('switch_on_start');
+
+      const statusEvent = createMockQueueItemStatusChangedEvent({
+        item_id: 1,
+        destination: sessionId,
+        status: 'in_progress',
+      });
+
+      api.onQueueItemStatusChangedEvent(statusEvent);
+
+      expect(api.$lastStartedItemId.get()).toBe(1);
+    });
+
+    it('should ignore events for different sessions', () => {
+      const statusEvent = createMockQueueItemStatusChangedEvent({
+        item_id: 1,
+        destination: 'different-session',
+        status: 'completed',
+      });
+
+      api.onQueueItemStatusChangedEvent(statusEvent);
+
+      expect(api.$lastCompletedItemId.get()).toBe(null);
+    });
+  });
+
+  describe('Items Changed Event Handling', () => {
+    it('should update items and auto-select first item', async () => {
+      const items = [createMockQueueItem({ item_id: 1 }), createMockQueueItem({ item_id: 2 })];
+
+      await api.onItemsChangedEvent(items);
+
+      expect(api.$items.get()).toBe(items);
+      expect(api.$selectedItemId.get()).toBe(1);
+    });
+
+    it('should clear selection when no items', async () => {
+      api.$selectedItemId.set(1);
+
+      await api.onItemsChangedEvent([]);
+
+      expect(api.$selectedItemId.get()).toBe(null);
+    });
+
+    it('should not change selection if item already selected', async () => {
+      api.$selectedItemId.set(2);
+
+      const items = [createMockQueueItem({ item_id: 1 }), createMockQueueItem({ item_id: 2 })];
+
+      await api.onItemsChangedEvent(items);
+
+      expect(api.$selectedItemId.get()).toBe(2);
+    });
+
+    it('should load images for completed items', async () => {
+      const imageDTO = createMockImageDTO({ image_name: 'test-image.png' });
+      mockApp._setImageDTO('test-image.png', imageDTO);
+
+      const items = [
+        createMockQueueItem({
+          item_id: 1,
+          status: 'completed',
+        }),
+      ];
+
+      await api.onItemsChangedEvent(items);
+
+      const progressData = api.$progressData.get();
+      expect(progressData[1]?.imageDTO).toBe(imageDTO);
+    });
+
+    it('should handle auto-switch on completion', async () => {
+      mockApp._setAutoSwitchMode('switch_on_finish');
+      api.$lastCompletedItemId.set(1);
+
+      const imageDTO = createMockImageDTO({ image_name: 'test-image.png' });
+      mockApp._setImageDTO('test-image.png', imageDTO);
+
+      const items = [
+        createMockQueueItem({
+          item_id: 1,
+          status: 'completed',
+        }),
+      ];
+
+      await api.onItemsChangedEvent(items);
+
+      // Wait for async image loading - the loadImage promise needs to complete
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50);
+        api.onImageLoaded(1);
+      });
+
+      expect(api.$selectedItemId.get()).toBe(1);
+      // The lastCompletedItemId should be reset after the loadImage promise resolves
+      expect(api.$lastCompletedItemId.get()).toBe(null);
+    });
+
+    it('should clean up progress data for removed items', async () => {
+      api.$progressData.setKey(999, {
+        itemId: 999,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO: null,
+        imageLoaded: false,
+      });
+
+      const items = [createMockQueueItem({ item_id: 1 })];
+
+      await api.onItemsChangedEvent(items);
+
+      const progressData = api.$progressData.get();
+      expect(progressData[999]).toBeUndefined();
+    });
+
+    it('should clear progress data for canceled/failed items', async () => {
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: createMockProgressEvent({ item_id: 1 }),
+        progressImage: null,
+        imageDTO: createMockImageDTO(),
+        imageLoaded: false,
+      });
+
+      const items = [createMockQueueItem({ item_id: 1, status: 'canceled' })];
+
+      await api.onItemsChangedEvent(items);
+
+      const progressData = api.$progressData.get();
+      expect(progressData[1]?.progressEvent).toBe(null);
+      expect(progressData[1]?.progressImage).toBe(null);
+      expect(progressData[1]?.imageDTO).toBe(null);
+    });
+  });
+
+  describe('Image Loading', () => {
+    it('should handle image loading for completed items', () => {
+      api.$items.set([createMockQueueItem({ item_id: 1 })]);
+      const imageDTO = createMockImageDTO({ image_name: 'test-image.png' });
+      mockApp._setImageDTO('test-image.png', imageDTO);
+      api.onImageLoaded(1);
+      const progressData = api.$progressData.get();
+      expect(progressData[1]?.imageLoaded).toBe(true);
+    });
+  });
+
+  describe('Auto Switch', () => {
+    it('should set auto switch mode', () => {
+      api.setAutoSwitch('switch_on_finish');
+      expect(mockApp.onAutoSwitchChange).toHaveBeenCalledWith('switch_on_finish');
+    });
+
+    it('should auto-switch on finish when the image loads', async () => {
+      mockApp._setAutoSwitchMode('switch_on_finish');
+      api.$lastCompletedItemId.set(1);
+
+      const imageDTO = createMockImageDTO({ image_name: 'test-image.png' });
+      mockApp._setImageDTO('test-image.png', imageDTO);
+
+      const items = [
+        createMockQueueItem({
+          item_id: 1,
+          status: 'completed',
+        }),
+      ];
+
+      await api.onItemsChangedEvent(items);
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50);
+        api.onImageLoaded(1);
+      });
+      expect(api.$selectedItemId.get()).toBe(1);
+      expect(api.$lastCompletedItemId.get()).toBe(null);
+    });
+  });
+
+  describe('Utility Methods', () => {
+    it('should build isSelected computed correctly', () => {
+      const isSelected = api.buildIsSelectedComputed(1);
+      expect(isSelected.get()).toBe(false);
+
+      api.$selectedItemId.set(1);
+      expect(isSelected.get()).toBe(true);
+    });
+  });
+
+  describe('Cleanup', () => {
+    it('should reset all state on cleanup', () => {
+      api.$selectedItemId.set(1);
+      api.$items.set([createMockQueueItem({ item_id: 1 })]);
+      api.$lastStartedItemId.set(1);
+      api.$lastCompletedItemId.set(1);
+      api.$progressData.setKey(1, {
+        itemId: 1,
+        progressEvent: null,
+        progressImage: null,
+        imageDTO: null,
+        imageLoaded: false,
+      });
+
+      api.cleanup();
+
+      expect(api.$selectedItemId.get()).toBe(null);
+      expect(api.$items.get()).toEqual([]);
+      expect(api.$lastStartedItemId.get()).toBe(null);
+      expect(api.$lastCompletedItemId.get()).toBe(null);
+      expect(api.$progressData.get()).toEqual({});
+    });
+  });
+
+  describe('Edge Cases and Error Handling', () => {
+    describe('Selection with Empty or Single Item Lists', () => {
+      it('should handle selection operations with single item', () => {
+        const items = [createMockQueueItem({ item_id: 1 })];
+        api.$items.set(items);
+        api.$selectedItemId.set(1);
+
+        // Navigation should wrap around to the same item
+        api.selectNext();
+        expect(api.$selectedItemId.get()).toBe(1);
+
+        api.selectPrev();
+        expect(api.$selectedItemId.get()).toBe(1);
+      });
+
+      it('should handle selection operations with empty list', () => {
+        api.$items.set([]);
+
+        api.selectFirst();
+        api.selectLast();
+        api.selectNext();
+        api.selectPrev();
+
+        expect(api.$selectedItemId.get()).toBe(null);
+      });
+    });
+
+    describe('Progress Data Edge Cases', () => {
+      it('should handle progress updates with image data', () => {
+        const progressEvent = createMockProgressEvent({
+          item_id: 1,
+          destination: sessionId,
+          image: { width: 512, height: 512, dataURL: 'foo' },
+        });
+
+        api.onInvocationProgressEvent(progressEvent);
+
+        const progressData = api.$progressData.get();
+        expect(progressData[1]?.progressImage).toBe(progressEvent.image);
+        expect(progressData[1]?.progressEvent).toBe(progressEvent);
+      });
+
+      it('should preserve imageDTO when updating progress', () => {
+        const imageDTO = createMockImageDTO();
+        api.$progressData.setKey(1, {
+          itemId: 1,
+          progressEvent: null,
+          progressImage: null,
+          imageDTO,
+          imageLoaded: false,
+        });
+
+        const progressEvent = createMockProgressEvent({
+          item_id: 1,
+          destination: sessionId,
+        });
+
+        api.onInvocationProgressEvent(progressEvent);
+
+        const progressData = api.$progressData.get();
+        expect(progressData[1]?.imageDTO).toBe(imageDTO);
+        expect(progressData[1]?.progressEvent).toBe(progressEvent);
+      });
+    });
+
+    describe('Auto-Switch Edge Cases', () => {
+      it('should handle auto-switch when item is not in current items list', async () => {
+        mockApp._setAutoSwitchMode('switch_on_start');
+        api.$lastStartedItemId.set(999); // Non-existent item
+
+        const items = [createMockQueueItem({ item_id: 1 })];
+        await api.onItemsChangedEvent(items);
+
+        // Should not switch to non-existent item
+        expect(api.$selectedItemId.get()).toBe(1);
+        expect(api.$lastStartedItemId.get()).toBe(999);
+      });
+
+      it('should handle auto-switch on finish when image loading fails', async () => {
+        mockApp._setAutoSwitchMode('switch_on_finish');
+        api.$lastCompletedItemId.set(1);
+
+        const items = [
+          createMockQueueItem({
+            item_id: 1,
+            status: 'completed',
+            session: {
+              id: sessionId,
+              source_prepared_mapping: { canvas_output: ['test-node-id'] },
+              results: {
+                'test-node-id': {
+                  type: 'image_output',
+                  image: { image_name: 'test-image.png' },
+                  width: 512,
+                  height: 512,
+                },
+              },
+            },
+          }),
+        ];
+
+        await api.onItemsChangedEvent(items);
+
+        // Wait a while but do not load the image
+        await new Promise((resolve) => {
+          setTimeout(resolve, 150);
+        });
+
+        // Should not switch when image loading fails
+        expect(api.$selectedItemId.get()).toBe(1);
+        expect(api.$lastCompletedItemId.get()).toBe(1);
+      });
+    });
+
+    describe('Concurrent Operations', () => {
+      it('should handle rapid item changes', async () => {
+        const items1 = [createMockQueueItem({ item_id: 1 })];
+        const items2 = [createMockQueueItem({ item_id: 2 })];
+
+        // Fire multiple events rapidly
+        const promise1 = api.onItemsChangedEvent(items1);
+        const promise2 = api.onItemsChangedEvent(items2);
+
+        await Promise.all([promise1, promise2]);
+
+        // Should end up with the last set of items
+        expect(api.$items.get()).toBe(items2);
+        // The selectedItemId retains the old value (1) but $selectedItem will be null
+        // because item 1 is no longer in the items list
+        expect(api.$selectedItemId.get()).toBe(1);
+        expect(api.$selectedItem.get()).toBe(null);
+      });
+
+      it('should handle multiple progress events for same item', () => {
+        const event1 = createMockProgressEvent({
+          item_id: 1,
+          destination: sessionId,
+          percentage: 0.3,
+        });
+        const event2 = createMockProgressEvent({
+          item_id: 1,
+          destination: sessionId,
+          percentage: 0.7,
+        });
+
+        api.onInvocationProgressEvent(event1);
+        api.onInvocationProgressEvent(event2);
+
+        const progressData = api.$progressData.get();
+        expect(progressData[1]?.progressEvent).toBe(event2);
+      });
+    });
+
+    describe('Memory Management', () => {
+      it('should clean up progress data for large number of items', async () => {
+        // Create progress data for many items
+        for (let i = 1; i <= 1000; i++) {
+          api.$progressData.setKey(i, {
+            itemId: i,
+            progressEvent: null,
+            progressImage: null,
+            imageDTO: null,
+            imageLoaded: false,
+          });
+        }
+
+        // Only keep a few items
+        const items = [createMockQueueItem({ item_id: 1 }), createMockQueueItem({ item_id: 2 })];
+
+        await api.onItemsChangedEvent(items);
+
+        const progressData = api.$progressData.get();
+        const progressDataKeys = Object.keys(progressData);
+
+        // Should only have progress data for current items
+        expect(progressDataKeys.length).toBeLessThanOrEqual(2);
+        expect(progressData[1]).toBeDefined();
+        expect(progressData[2]).toBeDefined();
+      });
+    });
+
+    describe('Event Subscription Management', () => {
+      it('should handle multiple subscriptions and unsubscriptions', () => {
+        const api2 = new StagingAreaApi();
+        api2.connectToApp(sessionId, mockApp);
+        const api3 = new StagingAreaApi();
+        api3.connectToApp(sessionId, mockApp);
+
+        // All should be subscribed
+        expect(mockApp.onItemsChanged).toHaveBeenCalledTimes(3);
+
+        api2.cleanup();
+        api3.cleanup();
+
+        // Should not affect original api
+        expect(api.$items.get()).toBeDefined();
+      });
+
+      it('should handle events after cleanup', () => {
+        api.cleanup();
+
+        // These should not crash
+        const progressEvent = createMockProgressEvent({
+          item_id: 1,
+          destination: sessionId,
+        });
+
+        api.onInvocationProgressEvent(progressEvent);
+
+        // State should remain clean - but the event handler still works
+        // so it will add progress data even after cleanup
+        const progressData = api.$progressData.get();
+        expect(progressData[1]).toBeDefined();
+      });
+    });
+  });
+});

invokeai/frontend/web/src/features/controlLayers/components/StagingArea/state.ts

@@ -0,0 +1,416 @@
+import { clamp } from 'es-toolkit';
+import type { AutoSwitchMode } from 'features/controlLayers/store/canvasSettingsSlice';
+import type { ProgressImage } from 'features/nodes/types/common';
+import type { MapStore } from 'nanostores';
+import { atom, computed, map } from 'nanostores';
+import type { ImageDTO, S } from 'services/api/types';
+import { objectEntries } from 'tsafe';
+
+import { getOutputImageName } from './shared';
+
+/**
+ * Interface for the app-level API that the StagingAreaApi depends on.
+ * This provides the connection between the staging area and the rest of the application.
+ */
+export type StagingAreaAppApi = {
+  onDiscard?: (item: S['SessionQueueItem']) => void;
+  onDiscardAll?: () => void;
+  onAccept?: (item: S['SessionQueueItem'], imageDTO: ImageDTO) => void;
+  onSelect?: (itemId: number) => void;
+  onSelectPrev?: () => void;
+  onSelectNext?: () => void;
+  onSelectFirst?: () => void;
+  onSelectLast?: () => void;
+  getAutoSwitch: () => AutoSwitchMode;
+  onAutoSwitchChange?: (mode: AutoSwitchMode) => void;
+  getImageDTO: (imageName: string) => Promise<ImageDTO | null>;
+  onItemsChanged: (handler: (data: S['SessionQueueItem'][]) => Promise<void> | void) => () => void;
+  onQueueItemStatusChanged: (handler: (data: S['QueueItemStatusChangedEvent']) => Promise<void> | void) => () => void;
+  onInvocationProgress: (handler: (data: S['InvocationProgressEvent']) => Promise<void> | void) => () => void;
+};
+
+/** Progress data for a single queue item */
+export type ProgressData = {
+  itemId: number;
+  progressEvent: S['InvocationProgressEvent'] | null;
+  progressImage: ProgressImage | null;
+  imageDTO: ImageDTO | null;
+  imageLoaded: boolean;
+};
+
+/** Combined data for the currently selected item */
+export type SelectedItemData = {
+  item: S['SessionQueueItem'];
+  index: number;
+  progressData: ProgressData;
+};
+
+/** Creates initial progress data for a queue item */
+export const getInitialProgressData = (itemId: number): ProgressData => ({
+  itemId,
+  progressEvent: null,
+  progressImage: null,
+  imageDTO: null,
+  imageLoaded: false,
+});
+type ProgressDataMap = Record<number, ProgressData | undefined>;
+
+/**
+ * API for managing the Canvas Staging Area - a view of the image generation queue.
+ * Provides reactive state management for pending, in-progress, and completed images.
+ * Users can accept images to place on canvas, discard them, navigate between items,
+ * and configure auto-switching behavior.
+ */
+export class StagingAreaApi {
+  /** The current session ID. */
+  _sessionId: string | null = null;
+
+  /** The app API */
+  _app: StagingAreaAppApi | null = null;
+
+  /** A set of subscriptions to be cleaned up when we are finished with a session */
+  _subscriptions = new Set<() => void>();
+
+  /** Item ID of the last started item. Used for auto-switch on start. */
+  $lastStartedItemId = atom<number | null>(null);
+
+  /** Item ID of the last completed item. Used for auto-switch on completion. */
+  $lastCompletedItemId = atom<number | null>(null);
+
+  /** All queue items for the current session. */
+  $items = atom<S['SessionQueueItem'][]>([]);
+
+  /** Progress data for all items including events, images, and ImageDTOs. */
+  $progressData = map<ProgressDataMap>({});
+
+  /** ID of the currently selected queue item, or null if none selected. */
+  $selectedItemId = atom<number | null>(null);
+
+  /** Total number of items in the queue. */
+  $itemCount = computed([this.$items], (items) => items.length);
+
+  /** Whether there are any items in the queue. */
+  $hasItems = computed([this.$items], (items) => items.length > 0);
+
+  /** Whether there are any pending or in-progress items. */
+  $isPending = computed([this.$items], (items) =>
+    items.some((item) => item.status === 'pending' || item.status === 'in_progress')
+  );
+
+  /** The currently selected queue item with its index and progress data, or null if none selected. */
+  $selectedItem = computed(
+    [this.$items, this.$selectedItemId, this.$progressData],
+    (items, selectedItemId, progressData) => {
+      if (items.length === 0) {
+        return null;
+      }
+      if (selectedItemId === null) {
+        return null;
+      }
+      const item = items.find(({ item_id }) => item_id === selectedItemId);
+      if (!item) {
+        return null;
+      }
+
+      return {
+        item,
+        index: items.findIndex(({ item_id }) => item_id === selectedItemId),
+        progressData: progressData[selectedItemId] || getInitialProgressData(selectedItemId),
+      };
+    }
+  );
+
+  /** The ImageDTO of the currently selected item, or null if none available. */
+  $selectedItemImageDTO = computed([this.$selectedItem], (selectedItem) => {
+    return selectedItem?.progressData.imageDTO ?? null;
+  });
+
+  /** The index of the currently selected item, or null if none selected. */
+  $selectedItemIndex = computed([this.$selectedItem], (selectedItem) => {
+    return selectedItem?.index ?? null;
+  });
+
+  /** Selects a queue item by ID. */
+  select = (itemId: number) => {
+    this.$selectedItemId.set(itemId);
+    this._app?.onSelect?.(itemId);
+  };
+
+  /** Selects the next item in the queue, wrapping to the first item if at the end. */
+  selectNext = () => {
+    const selectedItem = this.$selectedItem.get();
+    if (selectedItem === null) {
+      return;
+    }
+    const items = this.$items.get();
+    const nextIndex = (selectedItem.index + 1) % items.length;
+    const nextItem = items[nextIndex];
+    if (!nextItem) {
+      return;
+    }
+    this.$selectedItemId.set(nextItem.item_id);
+    this._app?.onSelectNext?.();
+  };
+
+  /** Selects the previous item in the queue, wrapping to the last item if at the beginning. */
+  selectPrev = () => {
+    const selectedItem = this.$selectedItem.get();
+    if (selectedItem === null) {
+      return;
+    }
+    const items = this.$items.get();
+    const prevIndex = (selectedItem.index - 1 + items.length) % items.length;
+    const prevItem = items[prevIndex];
+    if (!prevItem) {
+      return;
+    }
+    this.$selectedItemId.set(prevItem.item_id);
+    this._app?.onSelectPrev?.();
+  };
+
+  /** Selects the first item in the queue. */
+  selectFirst = () => {
+    const items = this.$items.get();
+    const first = items.at(0);
+    if (!first) {
+      return;
+    }
+    this.$selectedItemId.set(first.item_id);
+    this._app?.onSelectFirst?.();
+  };
+
+  /** Selects the last item in the queue. */
+  selectLast = () => {
+    const items = this.$items.get();
+    const last = items.at(-1);
+    if (!last) {
+      return;
+    }
+    this.$selectedItemId.set(last.item_id);
+    this._app?.onSelectLast?.();
+  };
+
+  /** Discards the currently selected item and selects the next available item. */
+  discardSelected = () => {
+    const selectedItem = this.$selectedItem.get();
+    if (selectedItem === null) {
+      return;
+    }
+    const items = this.$items.get();
+    const nextIndex = clamp(selectedItem.index + 1, 0, items.length - 1);
+    const nextItem = items[nextIndex];
+    if (nextItem) {
+      this.$selectedItemId.set(nextItem.item_id);
+    } else {
+      this.$selectedItemId.set(null);
+    }
+    this._app?.onDiscard?.(selectedItem.item);
+  };
+
+  /** Whether the discard selected action is enabled. */
+  $discardSelectedIsEnabled = computed([this.$selectedItem], (selectedItem) => {
+    if (selectedItem === null) {
+      return false;
+    }
+    return true;
+  });
+
+  /** Connects to the app, registering listeners and such */
+  connectToApp = (sessionId: string, app: StagingAreaAppApi) => {
+    if (this._sessionId !== sessionId) {
+      this.cleanup();
+      this._sessionId = sessionId;
+    }
+    this._app = app;
+
+    this._subscriptions.add(this._app.onItemsChanged(this.onItemsChangedEvent));
+    this._subscriptions.add(this._app.onQueueItemStatusChanged(this.onQueueItemStatusChangedEvent));
+    this._subscriptions.add(this._app.onInvocationProgress(this.onInvocationProgressEvent));
+  };
+
+  /** Discards all items in the queue. */
+  discardAll = () => {
+    this.$selectedItemId.set(null);
+    this._app?.onDiscardAll?.();
+  };
+
+  /** Accepts the currently selected item if an image is available. */
+  acceptSelected = () => {
+    const selectedItem = this.$selectedItem.get();
+    if (selectedItem === null) {
+      return;
+    }
+    const progressData = this.$progressData.get();
+    const datum = progressData[selectedItem.item.item_id];
+    if (!datum || !datum.imageDTO) {
+      return;
+    }
+    this._app?.onAccept?.(selectedItem.item, datum.imageDTO);
+  };
+
+  /** Whether the accept selected action is enabled. */
+  $acceptSelectedIsEnabled = computed([this.$selectedItem, this.$progressData], (selectedItem, progressData) => {
+    if (selectedItem === null) {
+      return false;
+    }
+    const datum = progressData[selectedItem.item.item_id];
+    return !!datum && !!datum.imageDTO;
+  });
+
+  /** Sets the auto-switch mode. */
+  setAutoSwitch = (mode: AutoSwitchMode) => {
+    this._app?.onAutoSwitchChange?.(mode);
+  };
+
+  /** Handles invocation progress events from the WebSocket. */
+  onInvocationProgressEvent = (data: S['InvocationProgressEvent']) => {
+    if (data.destination !== this._sessionId) {
+      return;
+    }
+    setProgress(this.$progressData, data);
+  };
+
+  /** Handles queue item status change events from the WebSocket. */
+  onQueueItemStatusChangedEvent = (data: S['QueueItemStatusChangedEvent']) => {
+    if (data.destination !== this._sessionId) {
+      return;
+    }
+    if (data.status === 'completed') {
+      /**
+       * There is an unpleasant bit of indirection here. When an item is completed, and auto-switch is set to
+       * switch_on_finish, we want to load the image and switch to it. In this socket handler, we don't have
+       * access to the full queue item, which we need to get the output image and load it. We get the full
+       * queue items as part of the list query, so it's rather inefficient to fetch it again here.
+       *
+       * To reduce the number of extra network requests, we instead store this item as the last completed item.
+       * Then when the image loads, it calls onImageLoaded and we switch to it then.
+       */
+      this.$lastCompletedItemId.set(data.item_id);
+    }
+    if (data.status === 'in_progress' && this._app?.getAutoSwitch() === 'switch_on_start') {
+      this.$lastStartedItemId.set(data.item_id);
+    }
+  };
+
+  /**
+   * Handles queue items changed events. Updates items, manages progress data,
+   * handles auto-selection, and implements auto-switch behavior.
+   */
+  onItemsChangedEvent = async (items: S['SessionQueueItem'][]) => {
+    const oldItems = this.$items.get();
+
+    if (items === oldItems) {
+      return;
+    }
+
+    if (items.length === 0) {
+      // If there are no items, cannot have a selected item.
+      this.$selectedItemId.set(null);
+    } else if (this.$selectedItemId.get() === null && items.length > 0) {
+      // If there is no selected item but there are items, select the first one.
+      this.$selectedItemId.set(items[0]?.item_id ?? null);
+    }
+
+    const progressData = this.$progressData.get();
+
+    for (const [id, datum] of objectEntries(progressData)) {
+      if (!datum || !items.find(({ item_id }) => item_id === datum.itemId)) {
+        this.$progressData.setKey(id, undefined);
+        continue;
+      }
+    }
+
+    for (const item of items) {
+      const datum = progressData[item.item_id];
+
+      if (item.status === 'canceled' || item.status === 'failed') {
+        this.$progressData.setKey(item.item_id, {
+          ...(datum ?? getInitialProgressData(item.item_id)),
+          progressEvent: null,
+          progressImage: null,
+          imageDTO: null,
+        });
+        continue;
+      }
+
+      if (item.status === 'in_progress') {
+        if (this.$lastStartedItemId.get() === item.item_id && this._app?.getAutoSwitch() === 'switch_on_start') {
+          this.$selectedItemId.set(item.item_id);
+          this.$lastStartedItemId.set(null);
+        }
+        continue;
+      }
+
+      if (item.status === 'completed') {
+        if (datum?.imageDTO) {
+          continue;
+        }
+        const outputImageName = getOutputImageName(item);
+        if (!outputImageName) {
+          continue;
+        }
+        const imageDTO = await this._app?.getImageDTO(outputImageName);
+        if (!imageDTO) {
+          continue;
+        }
+
+        this.$progressData.setKey(item.item_id, {
+          ...(datum ?? getInitialProgressData(item.item_id)),
+          imageDTO,
+        });
+      }
+    }
+
+    this.$items.set(items);
+  };
+
+  onImageLoaded = (itemId: number) => {
+    const item = this.$items.get().find(({ item_id }) => item_id === itemId);
+    if (!item) {
+      return;
+    }
+    // This is the load logic mentioned in the comment in the QueueItemStatusChangedEvent handler above.
+    if (this.$lastCompletedItemId.get() === item.item_id && this._app?.getAutoSwitch() === 'switch_on_finish') {
+      this.$selectedItemId.set(item.item_id);
+      this.$lastCompletedItemId.set(null);
+    }
+    const datum = this.$progressData.get()[item.item_id];
+    this.$progressData.setKey(item.item_id, {
+      ...(datum ?? getInitialProgressData(item.item_id)),
+      imageLoaded: true,
+    });
+  };
+
+  /** Creates a computed value that returns true if the given item ID is selected. */
+  buildIsSelectedComputed = (itemId: number) => {
+    return computed([this.$selectedItemId], (selectedItemId) => {
+      return selectedItemId === itemId;
+    });
+  };
+
+  /** Cleans up all state and unsubscribes from all events. */
+  cleanup = () => {
+    this.$lastStartedItemId.set(null);
+    this.$lastCompletedItemId.set(null);
+    this.$items.set([]);
+    this.$progressData.set({});
+    this.$selectedItemId.set(null);
+    this._subscriptions.forEach((unsubscribe) => unsubscribe());
+    this._subscriptions.clear();
+  };
+}
+
+/** Updates progress data for a queue item with the latest progress event. */
+const setProgress = ($progressData: MapStore<ProgressDataMap>, data: S['InvocationProgressEvent']) => {
+  const progressData = $progressData.get();
+  const current = progressData[data.item_id];
+  const next = { ...(current ?? getInitialProgressData(data.item_id)) };
+  next.progressEvent = data;
+  if (data.image) {
+    next.progressImage = data.image;
+  }
+  $progressData.set({
+    ...progressData,
+    [data.item_id]: next,
+  });
+};

invokeai/frontend/web/src/features/controlLayers/components/Tool/ToolChooser.tsx

@@ -4,6 +4,7 @@ import { ToolBrushButton } from 'features/controlLayers/components/Tool/ToolBrus
 import { ToolColorPickerButton } from 'features/controlLayers/components/Tool/ToolColorPickerButton';
 import { ToolMoveButton } from 'features/controlLayers/components/Tool/ToolMoveButton';
 import { ToolRectButton } from 'features/controlLayers/components/Tool/ToolRectButton';
+import React from 'react';
 
 import { ToolEraserButton } from './ToolEraserButton';
 import { ToolViewButton } from './ToolViewButton';

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

@@ -3,6 +3,7 @@ import { CanvasSettingsPopover } from 'features/controlLayers/components/Setting
 import { ToolColorPicker } from 'features/controlLayers/components/Tool/ToolFillColorPicker';
 import { ToolSettings } from 'features/controlLayers/components/Tool/ToolSettings';
 import { CanvasToolbarFitBboxToLayersButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToLayersButton';
+import { CanvasToolbarFitBboxToMasksButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarFitBboxToMasksButton';
 import { CanvasToolbarNewSessionMenuButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarNewSessionMenuButton';
 import { CanvasToolbarRedoButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarRedoButton';
 import { CanvasToolbarResetViewButton } from 'features/controlLayers/components/Toolbar/CanvasToolbarResetViewButton';
@@ -12,6 +13,7 @@ import { CanvasToolbarUndoButton } from 'features/controlLayers/components/Toolb
 import { useCanvasDeleteLayerHotkey } from 'features/controlLayers/hooks/useCanvasDeleteLayerHotkey';
 import { useCanvasEntityQuickSwitchHotkey } from 'features/controlLayers/hooks/useCanvasEntityQuickSwitchHotkey';
 import { useCanvasFilterHotkey } from 'features/controlLayers/hooks/useCanvasFilterHotkey';
+import { useCanvasInvertMaskHotkey } from 'features/controlLayers/hooks/useCanvasInvertMaskHotkey';
 import { useCanvasResetLayerHotkey } from 'features/controlLayers/hooks/useCanvasResetLayerHotkey';
 import { useCanvasToggleNonRasterLayersHotkey } from 'features/controlLayers/hooks/useCanvasToggleNonRasterLayersHotkey';
 import { useCanvasTransformHotkey } from 'features/controlLayers/hooks/useCanvasTransformHotkey';
@@ -27,6 +29,7 @@ export const CanvasToolbar = memo(() => {
   useNextPrevEntityHotkeys();
   useCanvasTransformHotkey();
   useCanvasFilterHotkey();
+  useCanvasInvertMaskHotkey();
   useCanvasToggleNonRasterLayersHotkey();
 
   return (
@@ -37,6 +40,7 @@ export const CanvasToolbar = memo(() => {
         <CanvasToolbarScale />
         <CanvasToolbarResetViewButton />
         <CanvasToolbarFitBboxToLayersButton />
+        <CanvasToolbarFitBboxToMasksButton />
       </Flex>
       <Divider orientation="vertical" />
       <Flex alignItems="center" h="full">