infinite grid

Now that the counts are already available and the tooltip does not make a network request, we can remove the delay (which was added to prevent network thrashing as you moved the mouse over the boards list).

invokeai/app/api/routers/boards.py

@@ -5,7 +5,7 @@ from fastapi.routing import APIRouter
 from pydantic import BaseModel, Field
 
 from invokeai.app.api.dependencies import ApiDependencies
-from invokeai.app.services.board_records.board_records_common import BoardChanges
+from invokeai.app.services.board_records.board_records_common import BoardChanges, UncategorizedImageCounts
 from invokeai.app.services.boards.boards_common import BoardDTO
 from invokeai.app.services.shared.pagination import OffsetPaginatedResults
 
@@ -146,3 +146,25 @@ async def list_all_board_image_names(
         board_id,
     )
     return image_names
+
+
+@boards_router.get(
+    "/uncategorized/counts",
+    operation_id="get_uncategorized_image_counts",
+    response_model=UncategorizedImageCounts,
+)
+async def get_uncategorized_image_counts() -> UncategorizedImageCounts:
+    """Gets count of images and assets for uncategorized images (images with no board assocation)"""
+
+    return ApiDependencies.invoker.services.board_records.get_uncategorized_image_counts()
+
+
+@boards_router.get(
+    "/uncategorized/names",
+    operation_id="get_uncategorized_image_names",
+    response_model=list[str],
+)
+async def get_uncategorized_image_names() -> list[str]:
+    """Gets count of images and assets for uncategorized images (images with no board assocation)"""
+
+    return ApiDependencies.invoker.services.board_records.get_uncategorized_image_names()

invokeai/app/api/routers/dupe images.ipynb

@@ -0,0 +1,61 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from pathlib import Path\n",
+    "import sqlite3\n",
+    "from uuid import uuid4\n",
+    "\n",
+    "# duplicate _all_ images in gallery\n",
+    "\n",
+    "def duplicate_images(database_path: Path, num_copies: int):\n",
+    "    conn = sqlite3.connect(database_path)\n",
+    "    cursor = conn.cursor()\n",
+    "\n",
+    "    cursor.execute(\"SELECT * FROM images\")\n",
+    "    rows = cursor.fetchall()\n",
+    "\n",
+    "    for _ in range(num_copies):\n",
+    "        for row in rows:\n",
+    "            new_row = list(row)\n",
+    "            new_row[0] = str(uuid4())  # image_name is the first column\n",
+    "            placeholders = \", \".join(\"?\" for _ in new_row)\n",
+    "            cursor.execute(f\"INSERT INTO images VALUES ({placeholders})\", new_row)\n",
+    "\n",
+    "    conn.commit()\n",
+    "    conn.close()\n",
+    "\n",
+    "\n",
+    "if __name__ == \"__main__\":\n",
+    "    database_path = Path(\"/home/bat/invokeai-4.0.0/databases/invokeai.db\")\n",
+    "    num_copies = 50\n",
+    "    duplicate_images(database_path, num_copies)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": ".venv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.12"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

invokeai/app/api/routers/images.py

@@ -1,6 +1,6 @@
 import io
 import traceback
-from typing import Optional
+from typing import Literal, Optional
 
 from fastapi import BackgroundTasks, Body, HTTPException, Path, Query, Request, Response, UploadFile
 from fastapi.responses import FileResponse
@@ -12,10 +12,11 @@ from invokeai.app.api.dependencies import ApiDependencies
 from invokeai.app.invocations.fields import MetadataField
 from invokeai.app.services.image_records.image_records_common import (
     ImageCategory,
+    ImageRecord,
     ImageRecordChanges,
     ResourceOrigin,
 )
-from invokeai.app.services.images.images_common import ImageDTO, ImageUrlsDTO
+from invokeai.app.services.images.images_common import ImageDTO, ImageUrlsDTO, image_record_to_dto
 from invokeai.app.services.shared.pagination import OffsetPaginatedResults
 from invokeai.app.services.shared.sqlite.sqlite_common import SQLiteDirection
 
@@ -462,3 +463,76 @@ async def get_bulk_download_item(
         return response
     except Exception:
         raise HTTPException(status_code=404)
+
+
+@images_router.get(
+    "/image_names",
+    operation_id="list_image_names",
+    response_model=list[str],
+)
+async def list_image_names(
+    board_id: str | None = Query(default=None),
+    category: Literal["images", "assets"] = Query(default="images"),
+    starred_first: bool = Query(default=True),
+    order_dir: SQLiteDirection = Query(default=SQLiteDirection.Descending),
+    search_term: Optional[str] = Query(default=None),
+) -> list[str]:
+    """Gets a list of image names"""
+
+    return ApiDependencies.invoker.services.image_records.get_image_names(
+        board_id,
+        category,
+        starred_first,
+        order_dir,
+        search_term,
+    )
+
+
+@images_router.get(
+    "/images",
+    operation_id="list_images",
+    response_model=list[ImageRecord],
+)
+async def images(
+    board_id: str | None = Query(default=None),
+    category: Literal["images", "assets"] = Query(default="images"),
+    starred_first: bool = Query(default=True),
+    order_dir: SQLiteDirection = Query(default=SQLiteDirection.Descending),
+    search_term: str | None = Query(default=None),
+    from_image_name: str | None = Query(default=None),
+    count: int = Query(default=10),
+) -> list[ImageRecord]:
+    """Gets a list of image names"""
+
+    return ApiDependencies.invoker.services.image_records.get_images(
+        board_id,
+        category,
+        starred_first,
+        order_dir,
+        search_term,
+        from_image_name,
+        count,
+    )
+
+
+@images_router.post(
+    "/images/by_name",
+    operation_id="get_images_by_name",
+    response_model=list[ImageDTO],
+)
+async def get_images_by_name(image_names: list[str] = Body(embed=True)) -> list[ImageDTO]:
+    """Gets a list of image names"""
+
+    image_records = ApiDependencies.invoker.services.image_records.get_images_by_name(image_names)
+
+    image_dtos = [
+        image_record_to_dto(
+            image_record=r,
+            image_url=ApiDependencies.invoker.services.urls.get_image_url(r.image_name),
+            thumbnail_url=ApiDependencies.invoker.services.urls.get_image_url(r.image_name, True),
+            board_id=ApiDependencies.invoker.services.board_image_records.get_board_for_image(r.image_name),
+        )
+        for r in image_records
+    ]
+
+    return image_dtos

invokeai/app/services/board_records/board_records_base.py

@@ -1,6 +1,6 @@
 from abc import ABC, abstractmethod
 
-from invokeai.app.services.board_records.board_records_common import BoardChanges, BoardRecord
+from invokeai.app.services.board_records.board_records_common import BoardChanges, BoardRecord, UncategorizedImageCounts
 from invokeai.app.services.shared.pagination import OffsetPaginatedResults
 
 
@@ -48,3 +48,13 @@ class BoardRecordStorageBase(ABC):
     def get_all(self, include_archived: bool = False) -> list[BoardRecord]:
         """Gets all board records."""
         pass
+
+    @abstractmethod
+    def get_uncategorized_image_counts(self) -> UncategorizedImageCounts:
+        """Gets count of images and assets for uncategorized images (images with no board assocation)."""
+        pass
+
+    @abstractmethod
+    def get_uncategorized_image_names(self) -> list[str]:
+        """Gets names of uncategorized images."""
+        pass

invokeai/app/services/board_records/board_records_common.py

@@ -1,5 +1,5 @@
 from datetime import datetime
-from typing import Optional, Union
+from typing import Any, Optional, Union
 
 from pydantic import BaseModel, Field
 
@@ -26,21 +26,25 @@ class BoardRecord(BaseModelExcludeNull):
     """Whether or not the board is archived."""
     is_private: Optional[bool] = Field(default=None, description="Whether the board is private.")
     """Whether the board is private."""
+    image_count: int = Field(description="The number of images in the board.")
+    asset_count: int = Field(description="The number of assets in the board.")
 
 
-def deserialize_board_record(board_dict: dict) -> BoardRecord:
+def deserialize_board_record(board_dict: dict[str, Any]) -> BoardRecord:
     """Deserializes a board record."""
 
     # Retrieve all the values, setting "reasonable" defaults if they are not present.
 
     board_id = board_dict.get("board_id", "unknown")
     board_name = board_dict.get("board_name", "unknown")
-    cover_image_name = board_dict.get("cover_image_name", "unknown")
+    cover_image_name = board_dict.get("cover_image_name", None)
     created_at = board_dict.get("created_at", get_iso_timestamp())
     updated_at = board_dict.get("updated_at", get_iso_timestamp())
     deleted_at = board_dict.get("deleted_at", get_iso_timestamp())
     archived = board_dict.get("archived", False)
     is_private = board_dict.get("is_private", False)
+    image_count = board_dict.get("image_count", 0)
+    asset_count = board_dict.get("asset_count", 0)
 
     return BoardRecord(
         board_id=board_id,
@@ -51,6 +55,8 @@ def deserialize_board_record(board_dict: dict) -> BoardRecord:
         deleted_at=deleted_at,
         archived=archived,
         is_private=is_private,
+        image_count=image_count,
+        asset_count=asset_count,
     )
 
 
@@ -63,19 +69,24 @@ class BoardChanges(BaseModel, extra="forbid"):
 class BoardRecordNotFoundException(Exception):
     """Raised when an board record is not found."""
 
-    def __init__(self, message="Board record not found"):
+    def __init__(self, message: str = "Board record not found"):
         super().__init__(message)
 
 
 class BoardRecordSaveException(Exception):
     """Raised when an board record cannot be saved."""
 
-    def __init__(self, message="Board record not saved"):
+    def __init__(self, message: str = "Board record not saved"):
         super().__init__(message)
 
 
 class BoardRecordDeleteException(Exception):
     """Raised when an board record cannot be deleted."""
 
-    def __init__(self, message="Board record not deleted"):
+    def __init__(self, message: str = "Board record not deleted"):
         super().__init__(message)
+
+
+class UncategorizedImageCounts(BaseModel):
+    image_count: int = Field(description="The number of uncategorized images.")
+    asset_count: int = Field(description="The number of uncategorized assets.")

invokeai/app/services/board_records/board_records_sqlite.py

@@ -9,12 +9,121 @@ from invokeai.app.services.board_records.board_records_common import (
     BoardRecordDeleteException,
     BoardRecordNotFoundException,
     BoardRecordSaveException,
+    UncategorizedImageCounts,
     deserialize_board_record,
 )
 from invokeai.app.services.shared.pagination import OffsetPaginatedResults
 from invokeai.app.services.shared.sqlite.sqlite_database import SqliteDatabase
 from invokeai.app.util.misc import uuid_string
 
+_BASE_BOARD_RECORD_QUERY = """
+    -- This query retrieves board records, joining with the board_images and images tables to get image counts and cover image names.
+    -- It is not a complete query, as it is missing a GROUP BY or WHERE clause (and is unterminated).
+    SELECT b.board_id,
+        b.board_name,
+        b.created_at,
+        b.updated_at,
+        b.archived,
+        -- Count the number of images in the board, alias image_count
+        COUNT(
+            CASE
+                WHEN i.image_category in ('general') -- "Images" are images in the 'general' category
+                AND i.is_intermediate = 0 THEN 1 -- Intermediates are not counted
+            END
+        ) AS image_count,
+        -- Count the number of assets in the board, alias asset_count
+        COUNT(
+            CASE
+                WHEN i.image_category in ('control', 'mask', 'user', 'other') -- "Assets" are images in any of the other categories ('control', 'mask', 'user', 'other')
+                AND i.is_intermediate = 0 THEN 1 -- Intermediates are not counted
+            END
+        ) AS asset_count,
+        -- Get the name of the the most recent image in the board, alias cover_image_name
+        (
+            SELECT bi.image_name
+            FROM board_images bi
+                JOIN images i ON bi.image_name = i.image_name
+            WHERE bi.board_id = b.board_id
+                AND i.is_intermediate = 0 -- Intermediates cannot be cover images
+            ORDER BY i.created_at DESC -- Sort by created_at to get the most recent image
+            LIMIT 1
+        ) AS cover_image_name
+    FROM boards b
+        LEFT JOIN board_images bi ON b.board_id = bi.board_id
+        LEFT JOIN images i ON bi.image_name = i.image_name
+    """
+
+
+def get_paginated_list_board_records_queries(include_archived: bool) -> str:
+    """Gets a query to retrieve a paginated list of board records. The query has placeholders for limit and offset.
+
+    Args:
+        include_archived: Whether to include archived board records in the results.
+
+    Returns:
+        A query to retrieve a paginated list of board records.
+    """
+
+    archived_condition = "WHERE b.archived = 0" if not include_archived else ""
+
+    # The GROUP BY must be added _after_ the WHERE clause!
+    query = f"""
+        {_BASE_BOARD_RECORD_QUERY}
+        {archived_condition}
+        GROUP BY b.board_id,
+            b.board_name,
+            b.created_at,
+            b.updated_at
+        ORDER BY b.created_at DESC
+        LIMIT ? OFFSET ?;
+        """
+
+    return query
+
+
+def get_total_boards_count_query(include_archived: bool) -> str:
+    """Gets a query to retrieve the total count of board records.
+
+    Args:
+        include_archived: Whether to include archived board records in the count.
+
+    Returns:
+        A query to retrieve the total count of board records.
+    """
+
+    archived_condition = "WHERE b.archived = 0" if not include_archived else ""
+
+    return f"SELECT COUNT(*) FROM boards {archived_condition};"
+
+
+def get_list_all_board_records_query(include_archived: bool) -> str:
+    """Gets a query to retrieve all board records.
+
+    Args:
+        include_archived: Whether to include archived board records in the results.
+
+    Returns:
+        A query to retrieve all board records.
+    """
+
+    archived_condition = "WHERE b.archived = 0" if not include_archived else ""
+
+    return f"""
+        {_BASE_BOARD_RECORD_QUERY}
+        {archived_condition}
+        GROUP BY b.board_id,
+            b.board_name,
+            b.created_at,
+            b.updated_at
+        ORDER BY b.created_at DESC;
+        """
+
+
+def get_board_record_query() -> str:
+    """Gets a query to retrieve a board record. The query has a placeholder for the board_id."""
+
+    return f"{_BASE_BOARD_RECORD_QUERY} WHERE b.board_id = ?;"
+
 
 class SqliteBoardRecordStorage(BoardRecordStorageBase):
     _conn: sqlite3.Connection
@@ -76,11 +185,7 @@ class SqliteBoardRecordStorage(BoardRecordStorageBase):
         try:
             self._lock.acquire()
             self._cursor.execute(
-                """--sql
-                SELECT *
-                FROM boards
-                WHERE board_id = ?;
-                """,
+                get_board_record_query(),
                 (board_id,),
             )
 
@@ -92,7 +197,7 @@ class SqliteBoardRecordStorage(BoardRecordStorageBase):
             self._lock.release()
         if result is None:
             raise BoardRecordNotFoundException
-        return BoardRecord(**dict(result))
+        return deserialize_board_record(dict(result))
 
     def update(
         self,
@@ -149,45 +254,15 @@ class SqliteBoardRecordStorage(BoardRecordStorageBase):
         try:
             self._lock.acquire()
 
-            # Build base query
-            base_query = """
-                SELECT *
-                FROM boards
-                {archived_filter}
-                ORDER BY created_at DESC
-                LIMIT ? OFFSET ?;
-            """
+            main_query = get_paginated_list_board_records_queries(include_archived=include_archived)
 
-            # Determine archived filter condition
-            if include_archived:
-                archived_filter = ""
-            else:
-                archived_filter = "WHERE archived = 0"
-
-            final_query = base_query.format(archived_filter=archived_filter)
-
-            # Execute query to fetch boards
-            self._cursor.execute(final_query, (limit, offset))
+            self._cursor.execute(main_query, (limit, offset))
 
             result = cast(list[sqlite3.Row], self._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
-            self._cursor.execute(count_query)
-
+            total_query = get_total_boards_count_query(include_archived=include_archived)
+            self._cursor.execute(total_query)
             count = cast(int, self._cursor.fetchone()[0])
 
             return OffsetPaginatedResults[BoardRecord](items=boards, offset=offset, limit=limit, total=count)
@@ -201,26 +276,10 @@ class SqliteBoardRecordStorage(BoardRecordStorageBase):
     def get_all(self, include_archived: bool = False) -> list[BoardRecord]:
         try:
             self._lock.acquire()
-
-            base_query = """
-                SELECT *
-                FROM boards
-                {archived_filter}
-                ORDER BY created_at DESC
-            """
-
-            if include_archived:
-                archived_filter = ""
-            else:
-                archived_filter = "WHERE archived = 0"
-
-            final_query = base_query.format(archived_filter=archived_filter)
-
-            self._cursor.execute(final_query)
-
+            query = get_list_all_board_records_query(include_archived=include_archived)
+            self._cursor.execute(query)
             result = cast(list[sqlite3.Row], self._cursor.fetchall())
             boards = [deserialize_board_record(dict(r)) for r in result]
-
             return boards
 
         except sqlite3.Error as e:
@@ -228,3 +287,47 @@ class SqliteBoardRecordStorage(BoardRecordStorageBase):
             raise e
         finally:
             self._lock.release()
+
+    def get_uncategorized_image_counts(self) -> UncategorizedImageCounts:
+        try:
+            self._lock.acquire()
+            query = """
+                -- Get the count of uncategorized images and assets.
+                SELECT
+                    CASE
+                        WHEN i.image_category = 'general' THEN 'image_count' -- "Images" are images in the 'general' category
+                        ELSE 'asset_count' -- "Assets" are images in any of the other categories ('control', 'mask', 'user', 'other')
+                    END AS category_type,
+                    COUNT(*) AS unassigned_count
+                FROM images i
+                LEFT JOIN board_images bi ON i.image_name = bi.image_name
+                WHERE bi.board_id IS NULL -- Uncategorized images have no board association
+                AND i.is_intermediate = 0 -- Omit intermediates from the counts
+                GROUP BY category_type; -- Group by category_type alias, as derived from the image_category column earlier
+                """
+            self._cursor.execute(query)
+            results = self._cursor.fetchall()
+            image_count = dict(results)["image_count"]
+            asset_count = dict(results)["asset_count"]
+            return UncategorizedImageCounts(image_count=image_count, asset_count=asset_count)
+        finally:
+            self._lock.release()
+
+    def get_uncategorized_image_names(self) -> list[str]:
+        try:
+            self._lock.acquire()
+            self._cursor.execute(
+                """--sql
+                SELECT image_name
+                FROM images
+                WHERE image_name NOT IN (
+                    SELECT image_name
+                    FROM board_images
+                );
+                """
+            )
+            result = cast(list[sqlite3.Row], self._cursor.fetchall())
+            image_names = [r[0] for r in result]
+            return image_names
+        finally:
+            self._lock.release()

invokeai/app/services/boards/boards_common.py

@@ -1,23 +1,8 @@
-from typing import Optional
-
-from pydantic import Field
-
 from invokeai.app.services.board_records.board_records_common import BoardRecord
 
 
+# TODO(psyche): BoardDTO is now identical to BoardRecord. We should consider removing it.
 class BoardDTO(BoardRecord):
-    """Deserialized board record with cover image URL and image count."""
+    """Deserialized board record."""
 
-    cover_image_name: Optional[str] = Field(description="The name of the board's cover image.")
-    """The URL of the thumbnail of the most recent image in the board."""
-    image_count: int = Field(description="The number of images in the board.")
-    """The number of images in the board."""
-
-
-def board_record_to_dto(board_record: BoardRecord, cover_image_name: Optional[str], image_count: int) -> BoardDTO:
-    """Converts a board record to a board DTO."""
-    return BoardDTO(
-        **board_record.model_dump(exclude={"cover_image_name"}),
-        cover_image_name=cover_image_name,
-        image_count=image_count,
-    )
+    pass

invokeai/app/services/boards/boards_default.py

@@ -1,6 +1,6 @@
 from invokeai.app.services.board_records.board_records_common import BoardChanges
 from invokeai.app.services.boards.boards_base import BoardServiceABC
-from invokeai.app.services.boards.boards_common import BoardDTO, board_record_to_dto
+from invokeai.app.services.boards.boards_common import BoardDTO
 from invokeai.app.services.invoker import Invoker
 from invokeai.app.services.shared.pagination import OffsetPaginatedResults
 
@@ -16,17 +16,11 @@ class BoardService(BoardServiceABC):
         board_name: str,
     ) -> BoardDTO:
         board_record = self.__invoker.services.board_records.save(board_name)
-        return board_record_to_dto(board_record, None, 0)
+        return BoardDTO.model_validate(board_record.model_dump())
 
     def get_dto(self, board_id: str) -> BoardDTO:
         board_record = self.__invoker.services.board_records.get(board_id)
-        cover_image = self.__invoker.services.image_records.get_most_recent_image_for_board(board_record.board_id)
-        if cover_image:
-            cover_image_name = cover_image.image_name
-        else:
-            cover_image_name = None
-        image_count = self.__invoker.services.board_image_records.get_image_count_for_board(board_id)
-        return board_record_to_dto(board_record, cover_image_name, image_count)
+        return BoardDTO.model_validate(board_record.model_dump())
 
     def update(
         self,
@@ -34,14 +28,7 @@ class BoardService(BoardServiceABC):
         changes: BoardChanges,
     ) -> BoardDTO:
         board_record = self.__invoker.services.board_records.update(board_id, changes)
-        cover_image = self.__invoker.services.image_records.get_most_recent_image_for_board(board_record.board_id)
-        if cover_image:
-            cover_image_name = cover_image.image_name
-        else:
-            cover_image_name = None
-
-        image_count = self.__invoker.services.board_image_records.get_image_count_for_board(board_id)
-        return board_record_to_dto(board_record, cover_image_name, image_count)
+        return BoardDTO.model_validate(board_record.model_dump())
 
     def delete(self, board_id: str) -> None:
         self.__invoker.services.board_records.delete(board_id)
@@ -50,30 +37,10 @@ class BoardService(BoardServiceABC):
         self, offset: int = 0, limit: int = 10, include_archived: bool = False
     ) -> OffsetPaginatedResults[BoardDTO]:
         board_records = self.__invoker.services.board_records.get_many(offset, limit, include_archived)
-        board_dtos = []
-        for r in board_records.items:
-            cover_image = self.__invoker.services.image_records.get_most_recent_image_for_board(r.board_id)
-            if cover_image:
-                cover_image_name = cover_image.image_name
-            else:
-                cover_image_name = None
-
-            image_count = self.__invoker.services.board_image_records.get_image_count_for_board(r.board_id)
-            board_dtos.append(board_record_to_dto(r, cover_image_name, image_count))
-
+        board_dtos = [BoardDTO.model_validate(r.model_dump()) for r in board_records.items]
         return OffsetPaginatedResults[BoardDTO](items=board_dtos, offset=offset, limit=limit, total=len(board_dtos))
 
     def get_all(self, include_archived: bool = False) -> list[BoardDTO]:
         board_records = self.__invoker.services.board_records.get_all(include_archived)
-        board_dtos = []
-        for r in board_records:
-            cover_image = self.__invoker.services.image_records.get_most_recent_image_for_board(r.board_id)
-            if cover_image:
-                cover_image_name = cover_image.image_name
-            else:
-                cover_image_name = None
-
-            image_count = self.__invoker.services.board_image_records.get_image_count_for_board(r.board_id)
-            board_dtos.append(board_record_to_dto(r, cover_image_name, image_count))
-
+        board_dtos = [BoardDTO.model_validate(r.model_dump()) for r in board_records]
         return board_dtos

invokeai/app/services/image_records/image_records_base.py

@@ -1,6 +1,6 @@
 from abc import ABC, abstractmethod
 from datetime import datetime
-from typing import Optional
+from typing import Literal, Optional
 
 from invokeai.app.invocations.fields import MetadataField
 from invokeai.app.services.image_records.image_records_common import (
@@ -97,3 +97,32 @@ class ImageRecordStorageBase(ABC):
     def get_most_recent_image_for_board(self, board_id: str) -> Optional[ImageRecord]:
         """Gets the most recent image for a board."""
         pass
+
+    @abstractmethod
+    def get_image_names(
+        self,
+        board_id: str | None,
+        category: Literal["images", "assets"],
+        starred_first: bool = True,
+        order_dir: SQLiteDirection = SQLiteDirection.Descending,
+        search_term: Optional[str] = None,
+    ) -> list[str]:
+        """Gets image names."""
+        pass
+
+    @abstractmethod
+    def get_images_by_name(self, image_names: list[str]) -> list[ImageRecord]:
+        pass
+
+    @abstractmethod
+    def get_images(
+        self,
+        board_id: str | None = None,
+        category: Literal["images", "assets"] = "images",
+        starred_first: bool = True,
+        order_dir: SQLiteDirection = SQLiteDirection.Descending,
+        search_term: str | None = None,
+        from_image_name: str | None = None,  # omit for first page
+        count: int = 10,
+    ) -> list[ImageRecord]:
+        pass

invokeai/app/services/image_records/image_records_sqlite.py

@@ -1,7 +1,7 @@
 import sqlite3
 import threading
 from datetime import datetime
-from typing import Optional, Union, cast
+from typing import Literal, Optional, Union, cast
 
 from invokeai.app.invocations.fields import MetadataField, MetadataFieldValidator
 from invokeai.app.services.image_records.image_records_base import ImageRecordStorageBase
@@ -140,6 +140,264 @@ class SqliteImageRecordStorage(ImageRecordStorageBase):
         finally:
             self._lock.release()
 
+    # def get_image_names(
+    #     self,
+    #     board_id: str | None = None,
+    #     category: Literal["images", "assets"] = "images",
+    #     starred_first: bool = True,
+    #     order_dir: SQLiteDirection = SQLiteDirection.Descending,
+    #     search_term: Optional[str] = None,
+    # ) -> list[str]:
+    #     try:
+    #         self._lock.acquire()
+
+    #         query = """
+    #         SELECT images.image_name
+    #         FROM images
+    #         LEFT JOIN board_images ON board_images.image_name = images.image_name
+    #         WHERE images.is_intermediate = FALSE
+    #         """
+    #         params: list[int | str | bool] = []
+
+    #         if board_id:
+    #             query += """
+    #             AND board_images.board_id = ?
+    #             """
+    #             params.append(board_id)
+    #         else:
+    #             query += """
+    #             AND board_images.board_id IS NULL
+    #             """
+
+    #         if category == "images":
+    #             query += """
+    #             AND images.image_category = 'general'
+    #             """
+    #         elif category == "assets":
+    #             query += """
+    #             AND images.image_category IN ('control', 'mask', 'user', 'other')
+    #             """
+    #         else:
+    #             raise ValueError(f"Invalid category: {category}")
+
+    #         if search_term:
+    #             query += """
+    #             AND images.metadata LIKE ?
+    #             """
+    #             params.append(f"%{search_term.lower()}%")
+
+    #         if starred_first:
+    #             query += f"""
+    #             ORDER BY images.starred DESC, images.created_at {order_dir.value} -- cannot use parameter substitution here
+    #             """
+    #         else:
+    #             query += f"""
+    #             ORDER BY images.created_at {order_dir.value} -- cannot use parameter substitution here
+    #             """
+
+    #         query += ";"
+    #         params_tuple = tuple(params)
+
+    #         self._cursor.execute(query, params_tuple)
+    #         result = cast(list[sqlite3.Row], self._cursor.fetchall())
+    #         image_names = [str(r[0]) for r in result]
+    #     except Exception:
+    #         raise
+    #     finally:
+    #         self._lock.release()
+
+    #     return image_names
+
+    def get_image_names(
+        self,
+        board_id: str | None = None,
+        category: Literal["images", "assets"] = "images",
+        starred_first: bool = True,
+        order_dir: SQLiteDirection = SQLiteDirection.Descending,
+        search_term: str | None = None,
+    ) -> list[str]:
+        try:
+            self._lock.acquire()
+
+            base_query = """
+            SELECT images.image_name
+            FROM images
+            LEFT JOIN board_images ON board_images.image_name = images.image_name
+            WHERE images.is_intermediate = FALSE
+            """
+            params: list[int | str | bool] = []
+
+            if board_id:
+                base_query += """
+                AND board_images.board_id = ?
+                """
+                params.append(board_id)
+            else:
+                base_query += """
+                AND board_images.board_id IS NULL
+                """
+
+            if category == "images":
+                base_query += """
+                AND images.image_category = 'general'
+                """
+            elif category == "assets":
+                base_query += """
+                AND images.image_category IN ('control', 'mask', 'user', 'other')
+                """
+            else:
+                raise ValueError(f"Invalid category: {category}")
+
+            if search_term:
+                base_query += """
+                AND images.metadata LIKE ?
+                """
+                params.append(f"%{search_term.lower()}%")
+
+            if starred_first:
+                base_query += f"""
+                ORDER BY images.starred DESC, images.created_at {order_dir.value}, images.image_name {order_dir.value}
+                """
+            else:
+                base_query += f"""
+                ORDER BY images.created_at {order_dir.value}, images.image_name {order_dir.value}
+                """
+
+            final_query = f"{base_query};"
+
+            self._cursor.execute(final_query, tuple(params))
+            result = cast(list[sqlite3.Row], self._cursor.fetchall())
+            images = [str(r[0]) for r in result]
+
+        except Exception:
+            raise
+        finally:
+            self._lock.release()
+
+        return images
+
+    def get_images_by_name(self, image_names: list[str]) -> list[ImageRecord]:
+        try:
+            self._lock.acquire()
+
+            query = f"""
+            SELECT {IMAGE_DTO_COLS}
+            FROM images
+            WHERE images.image_name in ({",".join("?" for _ in image_names)});
+            """
+            params = tuple(image_names)
+
+            self._cursor.execute(query, tuple(params))
+            result = cast(list[sqlite3.Row], self._cursor.fetchall())
+            images = [deserialize_image_record(dict(r)) for r in result]
+
+        except Exception:
+            raise
+        finally:
+            self._lock.release()
+
+        return images
+
+    def get_images(
+        self,
+        board_id: str | None = None,
+        category: Literal["images", "assets"] = "images",
+        starred_first: bool = True,
+        order_dir: SQLiteDirection = SQLiteDirection.Descending,
+        search_term: str | None = None,
+        from_image_name: str | None = None,  # omit for first page
+        count: int = 10,
+    ) -> list[ImageRecord]:
+        try:
+            self._lock.acquire()
+
+            base_query = f"""
+            SELECT {IMAGE_DTO_COLS}
+            FROM images
+            LEFT JOIN board_images ON board_images.image_name = images.image_name
+            WHERE images.is_intermediate = FALSE
+            """
+            params: list[int | str | bool] = []
+
+            if board_id:
+                base_query += """
+                AND board_images.board_id = ?
+                """
+                params.append(board_id)
+            else:
+                base_query += """
+                AND board_images.board_id IS NULL
+                """
+
+            if category == "images":
+                base_query += """
+                AND images.image_category = 'general'
+                """
+            elif category == "assets":
+                base_query += """
+                AND images.image_category IN ('control', 'mask', 'user', 'other')
+                """
+            else:
+                raise ValueError(f"Invalid category: {category}")
+
+            if search_term:
+                base_query += """
+                AND images.metadata LIKE ?
+                """
+                params.append(f"%{search_term.lower()}%")
+
+            if from_image_name:
+                # Use keyset pagination to get the next page of results
+
+                keyset_query = f"""
+                        WITH image_keyset AS (
+                        SELECT created_at,
+                            image_name
+                        FROM images
+                        WHERE image_name = ?
+                        )
+                        {base_query}
+                        AND (images.created_at, images.image_name) < (
+                            (
+                            SELECT created_at
+                            FROM image_keyset
+                            ),
+                            (
+                            SELECT image_name
+                            FROM image_keyset
+                            )
+                        )
+                        """
+                base_query = keyset_query
+                params.append(from_image_name)
+
+            if starred_first:
+                order_by_clause = f"""
+                ORDER BY images.starred DESC, images.created_at {order_dir.value}, images.image_name {order_dir.value}
+                """
+            else:
+                order_by_clause = f"""
+                ORDER BY images.created_at {order_dir.value}, images.image_name {order_dir.value}
+                """
+
+            final_query = f"""
+            {base_query}
+            {order_by_clause}
+            LIMIT ?;
+            """
+            params.append(count)
+
+            self._cursor.execute(final_query, tuple(params))
+            result = cast(list[sqlite3.Row], self._cursor.fetchall())
+            images = [deserialize_image_record(dict(r)) for r in result]
+
+        except Exception:
+            raise
+        finally:
+            self._lock.release()
+
+        return images
+
     def get_many(
         self,
         offset: int = 0,

invokeai/app/services/image_records/pagination notes.md

@@ -0,0 +1,59 @@
+these ideas are trying to figure out the macOS photos UX where you use scroll position instead of page number to go to a specific range of images.
+
+### Brute Force
+
+Two new methods/endpoints:
+
+- `get_image_names`: gets a list of ordered image names for the query params (e.g. board, starred_first)
+- `get_images_by_name`: gets the dtos for a list of image names
+
+Broad strokes of client handling:
+
+- Fetch a list of all image names for a board.
+- Render a big scroll area, large enough to hold all images. The list of image names is passed to `react-virtuoso` (virtualized list lib).
+- As you scroll, we use the rangeChanged callback from `react-virtuoso`, which provides the indices of the currently-visible images in the list of all images. These indices map back to the list of image names from which we can derive the list of image names we need to fetch
+- Debounce the rnageChanged callback
+- Call the `get_images_by_name` endpoint with hte image names to fetch, use the result to update the `getImageDTO` query cache. De-duplicate the image_names against existing cache before fetching so we aren't requesting the smae data over and over
+- Each item/image in the virtualized list fetches its image DTO from the cache _without initiating a network request_. it just kinda waits until the image is in the cache and then displays it
+
+this is roughed out in this branch
+
+#### FATAL FLAW
+
+Once you generate an image, you want to do an optimistic update and insert its name into the big ol' image_names list right? well, where do you insert it? depends on the query parms that can affect the sort order and which images are shown... we only have the image names at this point so we can't easily figure out where to insert
+
+workarounds (?):
+
+- along with the image names, we retrieve `starred_first` and `created_at`. then from the query params we can easily figure out where to insert the new image into the list to match the sort that he backend will be doing. eh
+- fetch `starred_first` images separately? so we don't have to worry about inserting the image into the right spot?
+
+ahh but also metadata search... we won't know when to insert the image into the list if the user has a search term...
+
+#### Sub-idea
+
+Ok let's still use pagination but use virtuoso to tell us which page we are on.
+
+virtuoso has an alternate mode where you just tell it how many items you have and it renders each item, passing only an index to it. Maybe we can derive the limit and offset from this information. here's an untested idea:
+
+- pass virtuoso the board count
+- Instead of rendering individual images in the list, we render pages (ranges) of images. The list library’s rangeChanged indices now refer to pages or ranges. To the user, it still looks like a bunch of individual images, but internally we group it into pages/ranges of whatever size.
+- The page/range size is calculated via DOM, or we can rely on virtuoso to tell us how many items are to be rendered. only thing is it the number can different depending on scroll position, so we'd probably want to like take `endIndex - startIndex` as the limit, add 20% buffer to each end of the limit and round it to the nearest multiple of 5 or 10. that would give us a consistent limit
+- then we can derive offset from that value
+
+still has the issue where we aren't sure if we should trigger a image list cache invalidation...
+
+### More Efficient Pagination
+
+sql OFFSET requires a scan thru the whole table upt othe offset. that means the higher the offset, the slower the query. unsure of the practical impact of this, probably negligible for us right now.
+
+I did some quick experiments with cursor/keyset pagination, using an image name as the cursor. this doesn't have the perf issue w/ offset.
+
+Also! This kind of pagination is unaffected by insertions and deletions, which is a problem for limit/offset pagination. When you insert or delete an image, it doesn't shift images at higher pages down. I think this pagination strategy suits our gallery better than limit/offset, given how volatile it is with adding and removing images regularly.
+
+see the `test_keyset` notebook for implementation (also some scattered methods in services as I was fiddling withh it)
+
+may be some way to use this pagination strat in combination with the above ideas to more elegantly handle inserting and deleting images...
+
+### Alternative approach to the whole "how do we know when to insert new images in the list (or invalidate the list cache)" issue
+
+What if we _always_ invalidate the cache when youa re at the top of the list ,but never invalidate it when you have scrolled down?

invokeai/app/services/image_records/test_keyset.ipynb

@@ -0,0 +1,210 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 8,
+   "metadata": {},
+   "outputs": [
+    {
+     "name": "stdout",
+     "output_type": "stream",
+     "text": [
+      "first query\n",
+      "36e62fec-5c3a-4b28-867b-9029fb6d2319.png False\n",
+      "c7f4f4b8-7ce6-4594-abf6-3f5e13fb7fe9.png False\n",
+      "d8f57fda-5084-4d87-8668-06fb300282e4.png False\n",
+      "a2fd7b8b-bbe5-4629-9d46-000f99b64931.png False\n",
+      "c0880bc1-5f7a-452b-acea-53a261f4c0c4.png False\n",
+      "0ad957df-c341-48e3-b384-f656985c2722.png False\n",
+      "8c788d82-c81c-4ffe-bf6b-bdad601c5add.png False\n",
+      "9b1179a0-09a0-4430-918d-60b618ff040c.png False\n",
+      "c8ad6a32-75db-4d8b-a865-066365fa1563.png False\n",
+      "e5eb1c19-8c69-4d29-a447-fbc2d649334a.png False\n",
+      "\n",
+      "next query, starting from the second image\n",
+      "36e62fec-5c3a-4b28-867b-9029fb6d2319.png False\n",
+      "c7f4f4b8-7ce6-4594-abf6-3f5e13fb7fe9.png False\n",
+      "d8f57fda-5084-4d87-8668-06fb300282e4.png False\n",
+      "a2fd7b8b-bbe5-4629-9d46-000f99b64931.png False\n",
+      "c0880bc1-5f7a-452b-acea-53a261f4c0c4.png False\n",
+      "0ad957df-c341-48e3-b384-f656985c2722.png False\n",
+      "8c788d82-c81c-4ffe-bf6b-bdad601c5add.png False\n",
+      "9b1179a0-09a0-4430-918d-60b618ff040c.png False\n",
+      "c8ad6a32-75db-4d8b-a865-066365fa1563.png False\n",
+      "e5eb1c19-8c69-4d29-a447-fbc2d649334a.png False\n"
+     ]
+    }
+   ],
+   "source": [
+    "import sqlite3\n",
+    "from typing import Literal, cast\n",
+    "from invokeai.app.services.image_records.image_records_common import (\n",
+    "    IMAGE_DTO_COLS,\n",
+    "    ImageRecord,\n",
+    "    deserialize_image_record,\n",
+    ")\n",
+    "from invokeai.app.services.shared.sqlite.sqlite_common import SQLiteDirection\n",
+    "\n",
+    "\n",
+    "def get_images(\n",
+    "    from_image_name: str | None = None,  # omit for first page\n",
+    "    count: int = 10,\n",
+    "    board_id: str | None = None,\n",
+    "    category: Literal[\"images\", \"assets\"] = \"images\",\n",
+    "    starred_first: bool = False,\n",
+    "    order_dir: SQLiteDirection = SQLiteDirection.Descending,\n",
+    "    search_term: str | None = None,\n",
+    ") -> list[ImageRecord]:\n",
+    "    conn = sqlite3.connect(\"/home/bat/invokeai-4.0.0/databases/invokeai.db\")\n",
+    "    conn.row_factory = sqlite3.Row\n",
+    "    cursor = conn.cursor()\n",
+    "\n",
+    "    base_query = f\"\"\"\n",
+    "    SELECT {IMAGE_DTO_COLS}\n",
+    "    FROM images\n",
+    "    LEFT JOIN board_images ON board_images.image_name = images.image_name\n",
+    "    WHERE images.is_intermediate = FALSE\n",
+    "    \"\"\"\n",
+    "    params: list[int | str | bool] = []\n",
+    "\n",
+    "    if board_id:\n",
+    "        base_query += \"\"\"\n",
+    "        AND board_images.board_id = ?\n",
+    "        \"\"\"\n",
+    "        params.append(board_id)\n",
+    "    else:\n",
+    "        base_query += \"\"\"\n",
+    "        AND board_images.board_id IS NULL\n",
+    "        \"\"\"\n",
+    "\n",
+    "    if category == \"images\":\n",
+    "        base_query += \"\"\"\n",
+    "        AND images.image_category = 'general'\n",
+    "        \"\"\"\n",
+    "    elif category == \"assets\":\n",
+    "        base_query += \"\"\"\n",
+    "        AND images.image_category IN ('control', 'mask', 'user', 'other')\n",
+    "        \"\"\"\n",
+    "    else:\n",
+    "        raise ValueError(f\"Invalid category: {category}\")\n",
+    "\n",
+    "    if search_term:\n",
+    "        base_query += \"\"\"\n",
+    "        AND images.metadata LIKE ?\n",
+    "        \"\"\"\n",
+    "        params.append(f\"%{search_term.lower()}%\")\n",
+    "\n",
+    "    if from_image_name:\n",
+    "        # Use keyset pagination to get the next page of results\n",
+    "\n",
+    "        # This uses `<` so that the cursor image is NOT included in the results - only images after it\n",
+    "        if starred_first:\n",
+    "            keyset_query = f\"\"\"\n",
+    "                WITH image_keyset AS (\n",
+    "                SELECT created_at,\n",
+    "                        image_name,\n",
+    "                        starred\n",
+    "                FROM images\n",
+    "                WHERE image_name = ?\n",
+    "                )\n",
+    "                {base_query}\n",
+    "                AND (images.starred, images.created_at, images.image_name) < ((SELECT starred FROM image_keyset), (SELECT created_at FROM image_keyset), (SELECT image_name FROM image_keyset))\n",
+    "            \"\"\"\n",
+    "        else:\n",
+    "            keyset_query = f\"\"\"\n",
+    "                WITH image_keyset AS (\n",
+    "                SELECT created_at,\n",
+    "                        image_name\n",
+    "                FROM images\n",
+    "                WHERE image_name = ?\n",
+    "                )\n",
+    "                {base_query}\n",
+    "                AND (images.created_at, images.image_name) < ((SELECT created_at FROM image_keyset), (SELECT image_name FROM image_keyset))\n",
+    "            \"\"\"\n",
+    "\n",
+    "        # This uses `<=` so that the cursor image IS included in the results\n",
+    "        # if starred_first:\n",
+    "        #     keyset_query = f\"\"\"\n",
+    "        #         WITH image_keyset AS (\n",
+    "        #         SELECT created_at,\n",
+    "        #                 image_name,\n",
+    "        #                 starred\n",
+    "        #         FROM images\n",
+    "        #         WHERE image_name = ?\n",
+    "        #         )\n",
+    "        #         {base_query}\n",
+    "        #         AND (images.starred, images.created_at, images.image_name) <= ((SELECT starred FROM image_keyset), (SELECT created_at FROM image_keyset), (SELECT image_name FROM image_keyset))\n",
+    "        #     \"\"\"\n",
+    "        # else:\n",
+    "        #     keyset_query = f\"\"\"\n",
+    "        #         WITH image_keyset AS (\n",
+    "        #         SELECT created_at,\n",
+    "        #                 image_name\n",
+    "        #         FROM images\n",
+    "        #         WHERE image_name = ?\n",
+    "        #         )\n",
+    "        #         {base_query}\n",
+    "        #         AND (images.created_at, images.image_name) <= ((SELECT created_at FROM image_keyset), (SELECT image_name FROM image_keyset))\n",
+    "        #     \"\"\"\n",
+    "        base_query = keyset_query\n",
+    "        params.append(from_image_name)\n",
+    "\n",
+    "    if starred_first:\n",
+    "        order_by_clause = f\"\"\"\n",
+    "        ORDER BY images.starred DESC, images.created_at {order_dir.value}, images.image_name {order_dir.value}\n",
+    "        \"\"\"\n",
+    "    else:\n",
+    "        order_by_clause = f\"\"\"\n",
+    "        ORDER BY images.created_at {order_dir.value}, images.image_name {order_dir.value}\n",
+    "        \"\"\"\n",
+    "\n",
+    "    final_query = f\"\"\"\n",
+    "    {base_query}\n",
+    "    {order_by_clause}\n",
+    "    LIMIT ?;\n",
+    "    \"\"\"\n",
+    "    params.append(count)\n",
+    "\n",
+    "    cursor.execute(final_query, tuple(params))\n",
+    "    result = cast(list[sqlite3.Row], cursor.fetchall())\n",
+    "    images = [deserialize_image_record(dict(r)) for r in result]\n",
+    "\n",
+    "    return images\n",
+    "\n",
+    "\n",
+    "kwargs = {\"starred_first\": False}\n",
+    "\n",
+    "images = get_images(**kwargs)\n",
+    "print(\"first query\")\n",
+    "for image in images:\n",
+    "    print(image.image_name, image.starred)\n",
+    "\n",
+    "print(\"\\nnext query, starting from the second image\")\n",
+    "images_2 = get_images(from_image_name=images[0].image_name, **kwargs)\n",
+    "for image in images_2:\n",
+    "    print(image.image_name, image.starred)"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": ".venv",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.12"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

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

@@ -166,8 +166,8 @@ export const createStore = (uniqueStoreKey?: string, persist = true) =>
     reducer: rememberedRootReducer,
     middleware: (getDefaultMiddleware) =>
       getDefaultMiddleware({
-        serializableCheck: import.meta.env.MODE === 'development',
-        immutableCheck: import.meta.env.MODE === 'development',
+        serializableCheck: false, // import.meta.env.MODE === 'development',
+        immutableCheck: false, // import.meta.env.MODE === 'development',
       })
         .concat(api.middleware)
         .concat(dynamicMiddlewares)

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

@@ -4,7 +4,6 @@ import { IAILoadingImageFallback, IAINoContentFallback } from 'common/components
 import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
 import { useImageUploadButton } from 'common/hooks/useImageUploadButton';
 import type { TypesafeDraggableData, TypesafeDroppableData } from 'features/dnd/types';
-import ImageContextMenu from 'features/gallery/components/ImageContextMenu/ImageContextMenu';
 import type { MouseEvent, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import { memo, useCallback, useMemo } from 'react';
 import { PiImageBold, PiUploadSimpleBold } from 'react-icons/pi';
@@ -125,36 +124,6 @@ const IAIDndImage = (props: IAIDndImageProps) => {
     [onMouseOut]
   );
 
-  const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
-    postUploadAction,
-    isDisabled: isUploadDisabled,
-  });
-
-  const uploadButtonStyles = useMemo<SystemStyleObject>(() => {
-    const styles: SystemStyleObject = {
-      minH: minSize,
-      w: 'full',
-      h: 'full',
-      alignItems: 'center',
-      justifyContent: 'center',
-      borderRadius: 'base',
-      transitionProperty: 'common',
-      transitionDuration: '0.1s',
-      color: 'base.500',
-    };
-    if (!isUploadDisabled) {
-      Object.assign(styles, {
-        cursor: 'pointer',
-        bg: 'base.700',
-        _hover: {
-          bg: 'base.650',
-          color: 'base.300',
-        },
-      });
-    }
-    return styles;
-  }, [isUploadDisabled, minSize]);
-
   const openInNewTab = useCallback(
     (e: MouseEvent) => {
       if (!imageDTO) {
@@ -169,10 +138,10 @@ const IAIDndImage = (props: IAIDndImageProps) => {
   );
 
   return (
-    <ImageContextMenu imageDTO={imageDTO}>
-      {(ref) => (
+    // <ImageContextMenu imageDTO={imageDTO}>
+    //   {(ref) => (
         <Flex
-          ref={ref}
+          // ref={ref}
           onMouseOver={handleMouseOver}
           onMouseOut={handleMouseOut}
           width="full"
@@ -216,12 +185,12 @@ const IAIDndImage = (props: IAIDndImageProps) => {
             </Flex>
           )}
           {!imageDTO && !isUploadDisabled && (
-            <>
-              <Flex sx={uploadButtonStyles} {...getUploadButtonProps()}>
-                <input {...getUploadInputProps()} />
-                {uploadElement}
-              </Flex>
-            </>
+            <UploadButton
+              isUploadDisabled={isUploadDisabled}
+              postUploadAction={postUploadAction}
+              uploadElement={uploadElement}
+              minSize={minSize}
+            />
           )}
           {!imageDTO && isUploadDisabled && noContentFallback}
           {imageDTO && !isDragDisabled && (
@@ -235,9 +204,58 @@ const IAIDndImage = (props: IAIDndImageProps) => {
           {children}
           {!isDropDisabled && <IAIDroppable data={droppableData} disabled={isDropDisabled} dropLabel={dropLabel} />}
         </Flex>
-      )}
-    </ImageContextMenu>
+    //   )}
+    // </ImageContextMenu>
   );
 };
 
 export default memo(IAIDndImage);
+
+const UploadButton = ({
+  isUploadDisabled,
+  postUploadAction,
+  uploadElement,
+  minSize,
+}: {
+  isUploadDisabled: boolean;
+  postUploadAction?: PostUploadAction;
+  uploadElement: ReactNode;
+  minSize: number;
+}) => {
+  const { getUploadButtonProps, getUploadInputProps } = useImageUploadButton({
+    postUploadAction,
+    isDisabled: isUploadDisabled,
+  });
+
+  const uploadButtonStyles = useMemo<SystemStyleObject>(() => {
+    const styles: SystemStyleObject = {
+      minH: minSize,
+      w: 'full',
+      h: 'full',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 'base',
+      transitionProperty: 'common',
+      transitionDuration: '0.1s',
+      color: 'base.500',
+    };
+    if (!isUploadDisabled) {
+      Object.assign(styles, {
+        cursor: 'pointer',
+        bg: 'base.700',
+        _hover: {
+          bg: 'base.650',
+          color: 'base.300',
+        },
+      });
+    }
+    return styles;
+  }, [isUploadDisabled, minSize]);
+
+  return (
+    <Flex sx={uploadButtonStyles} {...getUploadButtonProps()}>
+      <input {...getUploadInputProps()} />
+      {uploadElement}
+    </Flex>
+  );
+};

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

@@ -1,27 +1,23 @@
 import { Flex, Image, Text } from '@invoke-ai/ui-library';
 import { skipToken } from '@reduxjs/toolkit/query';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useGetBoardAssetsTotalQuery, useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
 import { useGetImageDTOQuery } from 'services/api/endpoints/images';
-import type { BoardDTO } from 'services/api/types';
 
 type Props = {
-  board: BoardDTO | null;
+  imageCount: number;
+  assetCount: number;
+  isArchived: boolean;
+  coverImageName?: string | null;
 };
 
-export const BoardTooltip = ({ board }: Props) => {
+export const BoardTooltip = ({ imageCount, assetCount, isArchived, coverImageName }: Props) => {
   const { t } = useTranslation();
-  const { imagesTotal } = useGetBoardImagesTotalQuery(board?.board_id || 'none', {
-    selectFromResult: ({ data }) => {
-      return { imagesTotal: data?.total ?? 0 };
-    },
-  });
-  const { assetsTotal } = useGetBoardAssetsTotalQuery(board?.board_id || 'none', {
-    selectFromResult: ({ data }) => {
-      return { assetsTotal: data?.total ?? 0 };
-    },
-  });
-  const { currentData: coverImage } = useGetImageDTOQuery(board?.cover_image_name ?? skipToken);
+  const { currentData: coverImage } = useGetImageDTOQuery(coverImageName ?? skipToken);
+
+  const totalString = useMemo(() => {
+    return `${t('boards.imagesWithCount', { count: imageCount })}, ${t('boards.assetsWithCount', { count: assetCount })}${isArchived ? ` (${t('boards.archived')})` : ''}`;
+  }, [assetCount, imageCount, isArchived, t]);
 
   return (
     <Flex flexDir="column" alignItems="center" gap={1}>
@@ -34,13 +30,11 @@ export const BoardTooltip = ({ board }: Props) => {
           aspectRatio="1/1"
           borderRadius="base"
           borderBottomRadius="lg"
+          mt={1}
         />
       )}
       <Flex flexDir="column" alignItems="center">
-        <Text noOfLines={1}>
-          {t('boards.imagesWithCount', { count: imagesTotal })}, {t('boards.assetsWithCount', { count: assetsTotal })}
-        </Text>
-        {board?.archived && <Text>({t('boards.archived')})</Text>}
+        <Text noOfLines={1}>{totalString}</Text>
       </Flex>
     </Flex>
   );

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

@@ -57,7 +57,18 @@ const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
   return (
     <BoardContextMenu board={board}>
       {(ref) => (
-        <Tooltip label={<BoardTooltip board={board} />} openDelay={1000} placement="left" closeOnScroll p={2}>
+        <Tooltip
+          label={
+            <BoardTooltip
+              imageCount={board.image_count}
+              assetCount={board.asset_count}
+              isArchived={board.archived}
+              coverImageName={board.cover_image_name}
+            />
+          }
+          placement="left"
+          closeOnScroll
+        >
           <Flex
             position="relative"
             ref={ref}
@@ -80,8 +91,7 @@ const GalleryBoard = ({ board, isSelected }: GalleryBoardProps) => {
             </Flex>
             {autoAddBoardId === board.board_id && <AutoAddBadge />}
             {board.archived && <Icon as={PiArchiveBold} fill="base.300" />}
-            <Text variant="subtext">{board.image_count}</Text>
-
+            <Text variant="subtext">{board.image_count + board.asset_count}</Text>
             <IAIDroppable data={droppableData} dropLabel={t('gallery.move')} />
           </Flex>
         </Tooltip>

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

@@ -14,7 +14,7 @@ import {
 import { autoAddBoardIdChanged, boardIdSelected } from 'features/gallery/store/gallerySlice';
 import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useGetBoardImagesTotalQuery } from 'services/api/endpoints/boards';
+import { useGetUncategorizedImageCountsQuery } from 'services/api/endpoints/boards';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
 interface Props {
@@ -27,11 +27,7 @@ const _hover: SystemStyleObject = {
 
 const NoBoardBoard = memo(({ isSelected }: Props) => {
   const dispatch = useAppDispatch();
-  const { imagesTotal } = useGetBoardImagesTotalQuery('none', {
-    selectFromResult: ({ data }) => {
-      return { imagesTotal: data?.total ?? 0 };
-    },
-  });
+  const { data } = useGetUncategorizedImageCountsQuery();
   const autoAddBoardId = useAppSelector(selectAutoAddBoardId);
   const autoAssignBoardOnClick = useAppSelector(selectAutoAssignBoardOnClick);
   const boardSearchText = useAppSelector(selectBoardSearchText);
@@ -60,7 +56,13 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
   return (
     <NoBoardBoardContextMenu>
       {(ref) => (
-        <Tooltip label={<BoardTooltip board={null} />} openDelay={1000} placement="left" closeOnScroll>
+        <Tooltip
+          label={
+            <BoardTooltip imageCount={data?.image_count ?? 0} assetCount={data?.asset_count ?? 0} isArchived={false} />
+          }
+          placement="left"
+          closeOnScroll
+        >
           <Flex
             position="relative"
             ref={ref}
@@ -97,7 +99,7 @@ const NoBoardBoard = memo(({ isSelected }: Props) => {
               {boardName}
             </Text>
             {autoAddBoardId === 'none' && <AutoAddBadge />}
-            <Text variant="subtext">{imagesTotal}</Text>
+            <Text variant="subtext">{(data?.image_count ?? 0) + (data?.asset_count ?? 0)}</Text>
             <IAIDroppable data={droppableData} dropLabel={t('gallery.move')} />
           </Flex>
         </Tooltip>

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

@@ -13,6 +13,7 @@ import {
 } from '@invoke-ai/ui-library';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { GalleryImageListExperiment } from 'features/gallery/components/ImageGrid/GalleryImageListExperiment';
 import { useGallerySearchTerm } from 'features/gallery/components/ImageGrid/useGallerySearchTerm';
 import { selectSelectedBoardId } from 'features/gallery/store/gallerySelectors';
 import { galleryViewChanged, selectGallerySlice } from 'features/gallery/store/gallerySlice';
@@ -22,7 +23,6 @@ import { useTranslation } from 'react-i18next';
 import { PiMagnifyingGlassBold } from 'react-icons/pi';
 import { useBoardName } from 'services/api/hooks/useBoardName';
 
-import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
 import { GalleryPagination } from './ImageGrid/GalleryPagination';
 import { GallerySearch } from './ImageGrid/GallerySearch';
 
@@ -101,7 +101,7 @@ export const Gallery = () => {
           />
         </Box>
       </Collapse>
-      <GalleryImageGrid />
+      <GalleryImageListExperiment />
       <GalleryPagination />
     </Flex>
   );

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx

@@ -19,9 +19,21 @@ import type { MouseEvent } from 'react';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowsOutBold, PiStarBold, PiStarFill, PiTrashSimpleFill } from 'react-icons/pi';
-import { useStarImagesMutation, useUnstarImagesMutation } from 'services/api/endpoints/images';
+import { imagesApi, useStarImagesMutation, useUnstarImagesMutation } from 'services/api/endpoints/images';
 import type { ImageDTO } from 'services/api/types';
 
+const useGetImageDTOCache = (imageName: string): ImageDTO | undefined => {
+  // get the image data for this image - useQueryState does not trigger a fetch
+  const queryState = imagesApi.endpoints.getImageDTO.useQueryState(imageName);
+  // but we want this component to be a subscriber of the cache! that way, when this component unmounts, the query cache is automatically cleared
+  // useQuerySubscription allows us to subscribe, but by default it fetches the data immediately. using skip we can prevent that
+  // the result is we never fetch data for this image from this component, it only subscribes to the cache
+  // unfortunately this subcribe-to-cache-but-don't-fetch functionality is not built in to RTKQ.
+  imagesApi.endpoints.getImageDTO.useQuerySubscription(imageName, { skip: queryState.isUninitialized });
+
+  return queryState.data;
+};
+
 // This class name is used to calculate the number of images that fit in the gallery
 export const GALLERY_IMAGE_CLASS_NAME = 'gallery-image';
 
@@ -36,7 +48,12 @@ const badgeSx: SystemStyleObject = {
   },
 };
 
-interface HoverableImageProps {
+interface GalleryImageProps {
+  imageName: string;
+  index: number;
+}
+
+interface GalleryImageContentProps {
   imageDTO: ImageDTO;
   index: number;
 }
@@ -46,7 +63,9 @@ const selectAlwaysShouldImageSizeBadge = createSelector(
   (gallery) => gallery.alwaysShowImageSizeBadge
 );
 
-export const GalleryImage = memo(({ index, imageDTO }: HoverableImageProps) => {
+export const GalleryImage = memo(({ index, imageName }: GalleryImageProps) => {
+  const imageDTO = useGetImageDTOCache(imageName);
+
   if (!imageDTO) {
     return <IAIFillSkeleton />;
   }
@@ -56,7 +75,7 @@ export const GalleryImage = memo(({ index, imageDTO }: HoverableImageProps) => {
 
 GalleryImage.displayName = 'GalleryImage';
 
-const GalleryImageContent = memo(({ index, imageDTO }: HoverableImageProps) => {
+const GalleryImageContent = memo(({ index, imageDTO }: GalleryImageContentProps) => {
   const dispatch = useAppDispatch();
   const selectedBoardId = useAppSelector(selectSelectedBoardId);
   const selectIsSelectedForCompare = useMemo(
@@ -142,10 +161,6 @@ const GalleryImageContent = memo(({ index, imageDTO }: HoverableImageProps) => {
 
   const dataTestId = useMemo(() => getGalleryImageDataTestId(imageDTO.image_name), [imageDTO.image_name]);
 
-  if (!imageDTO) {
-    return <IAIFillSkeleton />;
-  }
-
   return (
     <Box w="full" h="full" className={GALLERY_IMAGE_CLASS_NAME} data-testid={dataTestId} sx={boxSx}>
       <Flex
@@ -209,7 +224,7 @@ const GalleryImageContent = memo(({ index, imageDTO }: HoverableImageProps) => {
 
 GalleryImageContent.displayName = 'GalleryImageContent';
 
-const DeleteIcon = ({ imageDTO }: { imageDTO: ImageDTO }) => {
+const DeleteIcon = memo(({ imageDTO }: { imageDTO: ImageDTO }) => {
   const shift = useShiftModifier();
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
@@ -238,9 +253,9 @@ const DeleteIcon = ({ imageDTO }: { imageDTO: ImageDTO }) => {
       insetInlineEnd={2}
     />
   );
-};
+});
 
-const OpenInViewerIconButton = ({ imageDTO }: { imageDTO: ImageDTO }) => {
+const OpenInViewerIconButton = memo(({ imageDTO }: { imageDTO: ImageDTO }) => {
   const imageViewer = useImageViewer();
   const { t } = useTranslation();
 
@@ -258,4 +273,4 @@ const OpenInViewerIconButton = ({ imageDTO }: { imageDTO: ImageDTO }) => {
       insetInlineStart={2}
     />
   );
-};
+});

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageListExperiment.tsx

@@ -0,0 +1,165 @@
+import type { BoxProps, FlexProps } from '@invoke-ai/ui-library';
+import { Box, Flex, forwardRef, Grid, Image, Skeleton, Text } from '@invoke-ai/ui-library';
+import { useAppSelector, useAppStore } from 'app/store/storeHooks';
+import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
+import { GalleryImage } from 'features/gallery/components/ImageGrid/GalleryImage';
+import { debounce } from 'lodash-es';
+import { useOverlayScrollbars } from 'overlayscrollbars-react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { GridComponents, ListRange } from 'react-virtuoso';
+import { VirtuosoGrid } from 'react-virtuoso';
+import { imagesApi, useGetImageNamesQuery, useLazyGetImagesByNameQuery } from 'services/api/endpoints/images';
+import type { ImageDTO } from 'services/api/types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type TableVirtuosoScrollerRef = (ref: HTMLElement | Window | null) => any;
+
+const selectors = new Map<string, ReturnType<typeof imagesApi.endpoints.getImageDTO.select>>();
+const getSelector = (name: string) => {
+  let selector = selectors.get(name);
+  if (!selector) {
+    selector = imagesApi.endpoints.getImageDTO.select(name);
+    selectors.set(name, selector);
+  }
+  return selector;
+};
+
+export const GalleryImageListExperiment = memo(() => {
+  const store = useAppStore();
+  const { data } = useGetImageNamesQuery({ starred_first: false });
+  const [getImagesByName] = useLazyGetImagesByNameQuery();
+
+  const itemContent = useCallback((index: number, data: string) => {
+    return <GalleryImage index={index} imageName={data} />;
+  }, []);
+
+  const onRangeChanged = useCallback(
+    ({ startIndex, endIndex }: ListRange) => {
+      // user has scrolled to a new range, fetch images that are not already in the store
+      console.log('rangeChanged', startIndex, endIndex);
+
+      // get the list of image names represented by this range
+      // endIndex must be +1 bc else we miss the last image
+      const imageNames = data?.slice(startIndex, endIndex + 1);
+
+      if (imageNames) {
+        // optimisation: we may have already loaded some of these images, so filter out the ones we already have
+        const imageNamesToFetch: string[] = [];
+        const state = store.getState();
+        for (const name of imageNames) {
+          // check if we have this image cached already
+          if (!getSelector(name)(state).data) {
+            // nope, we need to fetch it
+            imageNamesToFetch.push(name);
+          }
+        }
+        console.log('imageNamesToFetch', imageNamesToFetch);
+        getImagesByName({ image_names: imageNamesToFetch });
+      }
+    },
+    [data, getImagesByName, store]
+  );
+
+  // debounce the onRangeChanged callback to avoid fetching images too frequently
+  const debouncedOnRangeChanged = useMemo(() => debounce(onRangeChanged, 100), [onRangeChanged]);
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [scroller, setScroller] = useState<HTMLElement | null>(null);
+  const [initialize, osInstance] = useOverlayScrollbars(overlayScrollbarsParams);
+
+  useEffect(() => {
+    const { current: root } = rootRef;
+    if (scroller && root) {
+      initialize({
+        target: root,
+        elements: {
+          viewport: scroller,
+        },
+      });
+    }
+    return () => osInstance()?.destroy();
+  }, [scroller, initialize, osInstance]);
+
+  const components = useMemo<GridComponents>(
+    () => ({
+      List: ListContainer,
+      Item: ItemContainer,
+    }),
+    []
+  );
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <Box ref={rootRef} position="relative" w="full" h="full" mt={2}>
+      <VirtuosoGrid
+        data={data}
+        components={components}
+        itemContent={itemContent}
+        rangeChanged={debouncedOnRangeChanged}
+        overscan={50}
+        // increases teh virual viewport by 200px in each direction, so we fetch a few more images than required
+        scrollerRef={setScroller as TableVirtuosoScrollerRef}
+      />
+    </Box>
+  );
+});
+
+GalleryImageListExperiment.displayName = 'GalleryImageListExperiment';
+
+const useGetImageDTOCache = (imageName: string): ImageDTO | undefined => {
+  // get the image data for this image - useQueryState does not trigger a fetch
+  const queryState = imagesApi.endpoints.getImageDTO.useQueryState(imageName);
+  // but we want this component to be a subscriber of the cache! that way, when this component unmounts, the query cache is automatically cleared
+  // useQuerySubscription allows us to subscribe, but by default it fetches the data immediately. using skip we can prevent that
+  // the result is we never fetch data for this image from this component, it only subscribes to the cache
+  // unfortunately this subcribe-to-cache-but-don't-fetch functionality is not built in to RTKQ.
+  imagesApi.endpoints.getImageDTO.useQuerySubscription(imageName, { skip: queryState.isUninitialized });
+
+  return queryState.data;
+};
+
+// the skeleton and real component need to be the same size else virtuoso will need to call rangeChanged multiples times to fill
+const HEIGHT = 24;
+
+const ListItem = ({ index, data }: { index: number; data: string }) => {
+  const imageDTO = useAppSelector(getSelector(data)).data;
+
+  if (!imageDTO) {
+    return <Skeleton w="full" h={HEIGHT} />;
+  }
+
+  return (
+    <Flex h={HEIGHT}>
+      <Image src={imageDTO.thumbnail_url} h="full" aspectRatio="1/1" />
+      <Flex flexDir="column">
+        <Text>{index}</Text>
+        <Text>{imageDTO.image_name}</Text>
+      </Flex>
+    </Flex>
+  );
+};
+
+const ListContainer = forwardRef((props: FlexProps, ref) => {
+  const galleryImageMinimumWidth = useAppSelector((s) => s.gallery.galleryImageMinimumWidth);
+
+  return (
+    <Grid
+      {...props}
+      className="list-container"
+      ref={ref}
+      gridTemplateColumns={`repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, 1fr))`}
+      gap={1}
+    >
+      {props.children}
+    </Grid>
+  );
+});
+
+const ItemContainer = forwardRef((props: BoxProps, ref) => (
+  <Box className="item-container" ref={ref} {...props}>
+    {props.children}
+  </Box>
+));

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

@@ -1,12 +1,4 @@
-import { ASSETS_CATEGORIES, IMAGE_CATEGORIES } from 'features/gallery/store/types';
-import type {
-  BoardDTO,
-  CreateBoardArg,
-  ListBoardsArgs,
-  OffsetPaginatedResults_ImageDTO_,
-  UpdateBoardArg,
-} from 'services/api/types';
-import { getListImagesUrl } from 'services/api/util';
+import type { BoardDTO, CreateBoardArg, ListBoardsArgs, S, UpdateBoardArg } from 'services/api/types';
 
 import type { ApiTagDescription } from '..';
 import { api, buildV1Url, LIST_TAG } from '..';
@@ -55,38 +47,11 @@ export const boardsApi = api.injectEndpoints({
       keepUnusedDataFor: 0,
     }),
 
-    getBoardImagesTotal: build.query<{ total: number }, string | undefined>({
-      query: (board_id) => ({
-        url: getListImagesUrl({
-          board_id: board_id ?? 'none',
-          categories: IMAGE_CATEGORIES,
-          is_intermediate: false,
-          limit: 0,
-          offset: 0,
-        }),
-        method: 'GET',
+    getUncategorizedImageCounts: build.query<S['UncategorizedImageCounts'], void>({
+      query: () => ({
+        url: buildBoardsUrl('uncategorized/counts'),
       }),
-      providesTags: (result, error, arg) => [{ type: 'BoardImagesTotal', id: arg ?? 'none' }, 'FetchOnReconnect'],
-      transformResponse: (response: OffsetPaginatedResults_ImageDTO_) => {
-        return { total: response.total };
-      },
-    }),
-
-    getBoardAssetsTotal: build.query<{ total: number }, string | undefined>({
-      query: (board_id) => ({
-        url: getListImagesUrl({
-          board_id: board_id ?? 'none',
-          categories: ASSETS_CATEGORIES,
-          is_intermediate: false,
-          limit: 0,
-          offset: 0,
-        }),
-        method: 'GET',
-      }),
-      providesTags: (result, error, arg) => [{ type: 'BoardAssetsTotal', id: arg ?? 'none' }, 'FetchOnReconnect'],
-      transformResponse: (response: OffsetPaginatedResults_ImageDTO_) => {
-        return { total: response.total };
-      },
+      providesTags: ['UncategorizedImageCounts', { type: 'Board', id: LIST_TAG }, { type: 'Board', id: 'none' }],
     }),
 
     /**
@@ -124,9 +89,8 @@ export const boardsApi = api.injectEndpoints({
 
 export const {
   useListAllBoardsQuery,
-  useGetBoardImagesTotalQuery,
-  useGetBoardAssetsTotalQuery,
   useCreateBoardMutation,
   useUpdateBoardMutation,
   useListAllImageNamesForBoardQuery,
+  useGetUncategorizedImageCountsQuery,
 } = boardsApi;

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

@@ -544,6 +544,33 @@ export const imagesApi = api.injectEndpoints({
         },
       }),
     }),
+    getImageNames: build.query<
+      paths['/api/v1/images/image_names']['get']['responses']['200']['content']['application/json'],
+      paths['/api/v1/images/image_names']['get']['parameters']['query']
+    >({
+      query: (params) => ({
+        url: buildImagesUrl('image_names'),
+        method: 'GET',
+        params,
+      }),
+    }),
+    getImagesByName: build.query<
+      paths['/api/v1/images/images/by_name']['post']['responses']['200']['content']['application/json'],
+      paths['/api/v1/images/images/by_name']['post']['requestBody']['content']['application/json']
+    >({
+      query: (body) => ({
+        url: buildImagesUrl('images/by_name'),
+        method: 'POST',
+        body,
+      }),
+      onQueryStarted: (_, { dispatch, queryFulfilled }) => {
+        queryFulfilled.then(({ data }) => {
+          for (const imageDTO of data) {
+            dispatch(imagesApi.util.upsertQueryData('getImageDTO', imageDTO.image_name, imageDTO));
+          }
+        });
+      },
+    }),
   }),
 });
 
@@ -564,6 +591,9 @@ export const {
   useStarImagesMutation,
   useUnstarImagesMutation,
   useBulkDownloadImagesMutation,
+  useGetImageNamesQuery,
+  useLazyGetImagesByNameQuery,
+  useLazyGetImageDTOQuery,
 } = imagesApi;
 
 /**

invokeai/frontend/web/src/services/api/index.ts

@@ -46,6 +46,7 @@ const tagTypes = [
   // This is invalidated on reconnect. It should be used for queries that have changing data,
   // especially related to the queue and generation.
   'FetchOnReconnect',
+  'UncategorizedImageCounts',
 ] as const;
 export type ApiTagDescription = TagDescription<(typeof tagTypes)[number]>;
 export const LIST_TAG = 'LIST';

invokeai/frontend/web/src/services/api/schema.ts

@@ -713,6 +713,66 @@ export type paths = {
         patch?: never;
         trace?: never;
     };
+    "/api/v1/images/image_names": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * List Image Names
+         * @description Gets a list of image names
+         */
+        get: operations["list_image_names"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/images/images": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Images
+         * @description Gets a list of image names
+         */
+        get: operations["list_images"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/images/images/by_name": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /**
+         * Get Images By Name
+         * @description Gets a list of image names
+         */
+        post: operations["get_images_by_name"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/v1/boards/": {
         parameters: {
             query?: never;
@@ -785,6 +845,46 @@ export type paths = {
         patch?: never;
         trace?: never;
     };
+    "/api/v1/boards/uncategorized/counts": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Uncategorized Image Counts
+         * @description Gets count of images and assets for uncategorized images (images with no board assocation)
+         */
+        get: operations["get_uncategorized_image_counts"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v1/boards/uncategorized/names": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /**
+         * Get Uncategorized Image Names
+         * @description Gets count of images and assets for uncategorized images (images with no board assocation)
+         */
+        get: operations["get_uncategorized_image_names"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/v1/board_images/": {
         parameters: {
             query?: never;
@@ -1973,7 +2073,7 @@ export type components = {
         };
         /**
          * BoardDTO
-         * @description Deserialized board record with cover image URL and image count.
+         * @description Deserialized board record.
          */
         BoardDTO: {
             /**
@@ -2003,9 +2103,9 @@ export type components = {
             deleted_at?: string | null;
             /**
              * Cover Image Name
-             * @description The name of the board's cover image.
+             * @description The name of the cover image of the board.
              */
-            cover_image_name: string | null;
+            cover_image_name?: string | null;
             /**
              * Archived
              * @description Whether or not the board is archived.
@@ -2021,6 +2121,11 @@ export type components = {
              * @description The number of images in the board.
              */
             image_count: number;
+            /**
+             * Asset Count
+             * @description The number of assets in the board.
+             */
+            asset_count: number;
         };
         /**
          * BoardField
@@ -2142,6 +2247,11 @@ export type components = {
              */
             prepend?: boolean;
         };
+        /** Body_get_images_by_name */
+        Body_get_images_by_name: {
+            /** Image Names */
+            image_names: string[];
+        };
         /** Body_import_style_presets */
         Body_import_style_presets: {
             /**
@@ -8528,6 +8638,71 @@ export type components = {
              */
             type: "img_paste";
         };
+        /**
+         * ImageRecord
+         * @description Deserialized image record without metadata.
+         */
+        ImageRecord: {
+            /**
+             * Image Name
+             * @description The unique name of the image.
+             */
+            image_name: string;
+            /** @description The type of the image. */
+            image_origin: components["schemas"]["ResourceOrigin"];
+            /** @description The category of the image. */
+            image_category: components["schemas"]["ImageCategory"];
+            /**
+             * Width
+             * @description The width of the image in px.
+             */
+            width: number;
+            /**
+             * Height
+             * @description The height of the image in px.
+             */
+            height: number;
+            /**
+             * Created At
+             * @description The created timestamp of the image.
+             */
+            created_at: string;
+            /**
+             * Updated At
+             * @description The updated timestamp of the image.
+             */
+            updated_at: string;
+            /**
+             * Deleted At
+             * @description The deleted timestamp of the image.
+             */
+            deleted_at?: string | null;
+            /**
+             * Is Intermediate
+             * @description Whether this is an intermediate image.
+             */
+            is_intermediate: boolean;
+            /**
+             * Session Id
+             * @description The session ID that generated this image, if it is a generated image.
+             */
+            session_id?: string | null;
+            /**
+             * Node Id
+             * @description The node ID that generated this image, if it is a generated image.
+             */
+            node_id?: string | null;
+            /**
+             * Starred
+             * @description Whether this image is starred.
+             */
+            starred: boolean;
+            /**
+             * Has Workflow
+             * @description Whether this image has a workflow.
+             */
+            has_workflow: boolean;
+        };
         /**
          * ImageRecordChanges
          * @description A set of changes to apply to an image record.
@@ -16498,6 +16673,19 @@ export type components = {
              */
             type: "url";
         };
+        /** UncategorizedImageCounts */
+        UncategorizedImageCounts: {
+            /**
+             * Image Count
+             * @description The number of uncategorized images.
+             */
+            image_count: number;
+            /**
+             * Asset Count
+             * @description The number of uncategorized assets.
+             */
+            asset_count: number;
+        };
         /**
          * Unsharp Mask
          * @description Applies an unsharp mask filter to an image
@@ -18745,6 +18933,111 @@ export interface operations {
             };
         };
     };
+    list_image_names: {
+        parameters: {
+            query?: {
+                board_id?: string | null;
+                category?: "images" | "assets";
+                starred_first?: boolean;
+                order_dir?: components["schemas"]["SQLiteDirection"];
+                search_term?: string | null;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": string[];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
+    list_images: {
+        parameters: {
+            query?: {
+                board_id?: string | null;
+                category?: "images" | "assets";
+                starred_first?: boolean;
+                order_dir?: components["schemas"]["SQLiteDirection"];
+                search_term?: string | null;
+                from_image_name?: string | null;
+                count?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ImageRecord"][];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
+    get_images_by_name: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["Body_get_images_by_name"];
+            };
+        };
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ImageDTO"][];
+                };
+            };
+            /** @description Validation Error */
+            422: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["HTTPValidationError"];
+                };
+            };
+        };
+    };
     list_boards: {
         parameters: {
             query?: {
@@ -18952,6 +19245,46 @@ export interface operations {
             };
         };
     };
+    get_uncategorized_image_counts: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["UncategorizedImageCounts"];
+                };
+            };
+        };
+    };
+    get_uncategorized_image_names: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Successful Response */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": string[];
+                };
+            };
+        };
+    };
     add_image_to_board: {
         parameters: {
             query?: never;

invokeai/frontend/web/src/services/api/types.ts

@@ -37,7 +37,6 @@ export type AppDependencyVersions = S['AppDependencyVersions'];
 export type ImageDTO = S['ImageDTO'];
 export type BoardDTO = S['BoardDTO'];
 export type ImageCategory = S['ImageCategory'];
-export type OffsetPaginatedResults_ImageDTO_ = S['OffsetPaginatedResults_ImageDTO_'];
 
 // Models
 export type ModelType = S['ModelType'];

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

@@ -6,7 +6,6 @@ import { stagingAreaImageStaged } from 'features/controlLayers/store/canvasStagi
 import { boardIdSelected, galleryViewChanged, imageSelected, offsetChanged } from 'features/gallery/store/gallerySlice';
 import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState';
 import { zNodeStatus } from 'features/nodes/types/invocation';
-import { boardsApi } from 'services/api/endpoints/boards';
 import { getImageDTOSafe, imagesApi } from 'services/api/endpoints/images';
 import type { ImageDTO, S } from 'services/api/types';
 import { getCategories, getListImagesUrl } from 'services/api/util';
@@ -31,10 +30,13 @@ export const buildOnInvocationComplete = (getState: () => RootState, dispatch: A
       return;
     }
 
-    // update the total images for the board
+    console.log('maybe updating getImageNames');
     dispatch(
-      boardsApi.util.updateQueryData('getBoardImagesTotal', imageDTO.board_id ?? 'none', (draft) => {
-        draft.total += 1;
+      imagesApi.util.updateQueryData('getImageNames', { starred_first: false }, (draft) => {
+        if (!draft.find((name) => name === imageDTO.image_name)) {
+          console.log('image not found, adding');
+          draft.unshift(imageDTO.image_name);
+        }
       })
     );
 

tests/app/services/bulk_download/test_bulk_download.py

@@ -127,7 +127,16 @@ def test_generate_id_with_board_id(monkeypatch: Any, mock_invoker: Invoker):
 
     def mock_board_get(*args, **kwargs):
         return BoardRecord(
-            board_id="12345", board_name="test_board_name", created_at="None", updated_at="None", archived=False
+            board_id="12345",
+            board_name="test_board_name",
+            created_at="None",
+            updated_at="None",
+            archived=False,
+            asset_count=0,
+            image_count=0,
+            cover_image_name="asdf.png",
+            deleted_at=None,
+            is_private=False,
         )
 
     monkeypatch.setattr(mock_invoker.services.board_records, "get", mock_board_get)
@@ -156,7 +165,16 @@ def test_handler_board_id(tmp_path: Path, monkeypatch: Any, mock_image_dto: Imag
 
     def mock_board_get(*args, **kwargs):
         return BoardRecord(
-            board_id="12345", board_name="test_board_name", created_at="None", updated_at="None", archived=False
+            board_id="12345",
+            board_name="test_board_name",
+            created_at="None",
+            updated_at="None",
+            archived=False,
+            asset_count=0,
+            image_count=0,
+            cover_image_name="asdf.png",
+            deleted_at=None,
+            is_private=False,
         )
 
     monkeypatch.setattr(mock_invoker.services.board_records, "get", mock_board_get)