feat(ui, api): gallery search

invokeai/app/api/routers/images.py

@@ -323,18 +323,12 @@ async def list_image_dtos(
     limit: int = Query(default=10, description="The number of images per page"),
     order_dir: SQLiteDirection = Query(default=SQLiteDirection.Descending, description="The order of sort"),
     starred_first: bool = Query(default=True, description="Whether to sort by starred images first"),
+    search_term: Optional[str] = Query(default=None, description="The term to search for"),
 ) -> OffsetPaginatedResults[ImageDTO]:
     """Gets a list of image DTOs"""
 
     image_dtos = ApiDependencies.invoker.services.images.get_many(
-        offset,
-        limit,
-        starred_first,
-        order_dir,
-        image_origin,
-        categories,
-        is_intermediate,
-        board_id,
+        offset, limit, starred_first, order_dir, image_origin, categories, is_intermediate, board_id, search_term
     )
 
     return image_dtos

invokeai/app/services/image_records/image_records_base.py

@@ -44,6 +44,7 @@ def get_many(
         categories: Optional[list[ImageCategory]] = None,
         is_intermediate: Optional[bool] = None,
         board_id: Optional[str] = None,
+        search_term: Optional[str] = None,
     ) -> OffsetPaginatedResults[ImageRecord]:
         """Gets a page of image records."""
         pass

invokeai/app/services/image_records/image_records_sqlite.py

@@ -151,6 +151,7 @@ def get_many(
         categories: Optional[list[ImageCategory]] = None,
         is_intermediate: Optional[bool] = None,
         board_id: Optional[str] = None,
+        search_term: Optional[str] = None,
     ) -> OffsetPaginatedResults[ImageRecord]:
         try:
             self._lock.acquire()
@@ -211,6 +212,13 @@ def get_many(
                 """
                 query_params.append(board_id)
 
+            # Search term condition
+            if search_term:
+                query_conditions += """--sql
+                AND json_extract(images.metadata, '$') LIKE ?
+                """
+                query_params.append(f"%{search_term}%")
+
             if starred_first:
                 query_pagination = f"""--sql
                 ORDER BY images.starred DESC, images.created_at {order_dir.value} LIMIT ? OFFSET ?

invokeai/app/services/images/images_base.py

@@ -123,6 +123,7 @@ def get_many(
         categories: Optional[list[ImageCategory]] = None,
         is_intermediate: Optional[bool] = None,
         board_id: Optional[str] = None,
+        search_term: Optional[str] = None,
     ) -> OffsetPaginatedResults[ImageDTO]:
         """Gets a paginated list of image DTOs."""
         pass

invokeai/app/services/images/images_default.py

@@ -214,6 +214,7 @@ def get_many(
         categories: Optional[list[ImageCategory]] = None,
         is_intermediate: Optional[bool] = None,
         board_id: Optional[str] = None,
+        search_term: Optional[str] = None,
     ) -> OffsetPaginatedResults[ImageDTO]:
         try:
             results = self.__invoker.services.image_records.get_many(
@@ -225,6 +226,7 @@ def get_many(
                 categories,
                 is_intermediate,
                 board_id,
+                search_term,
             )
 
             image_dtos = [

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

@@ -392,6 +392,7 @@
         "viewerImage": "Viewer Image",
         "compareImage": "Compare Image",
         "openInViewer": "Open in Viewer",
+        "searchImages": "Search Images by Metadata...",
         "selectAllOnPage": "Select All On Page",
         "selectAllOnBoard": "Select All On Board",
         "showArchivedBoards": "Show Archived Boards",

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

@@ -13,6 +13,7 @@ import GalleryBoardName from './GalleryBoardName';
 import GallerySettingsPopover from './GallerySettingsPopover/GallerySettingsPopover';
 import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
 import { GalleryPagination } from './ImageGrid/GalleryPagination';
+import { GallerySearch } from './ImageGrid/GallerySearch';
 
 const ImageGalleryContent = () => {
   const { t } = useTranslation();
@@ -81,6 +82,7 @@ const ImageGalleryContent = () => {
         </Tabs>
       </Flex>
 
+      <GallerySearch />
       <GalleryImageGrid />
       <GalleryPagination />
     </Flex>

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

@@ -19,10 +19,11 @@ const GalleryImageGrid = () => {
   useGalleryHotkeys();
   const { t } = useTranslation();
   const queryArgs = useAppSelector(selectListImagesQueryArgs);
-  const { imageDTOs, isLoading, isError } = useListImagesQuery(queryArgs, {
-    selectFromResult: ({ data, isLoading, isSuccess, isError }) => ({
+  const { imageDTOs, isLoading, isFetching, isError } = useListImagesQuery(queryArgs, {
+    selectFromResult: ({ data, isLoading, isFetching, isSuccess, isError }) => ({
       imageDTOs: data?.items ?? EMPTY_ARRAY,
       isLoading,
+      isFetching,
       isSuccess,
       isError,
     }),
@@ -36,7 +37,7 @@ const GalleryImageGrid = () => {
     );
   }
 
-  if (isLoading) {
+  if (isLoading || isFetching) {
     return (
       <Flex w="full" h="full" alignItems="center" justifyContent="center">
         <IAINoContentFallback label={t('gallery.loading')} icon={PiImageBold} />

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

@@ -0,0 +1,57 @@
+import { IconButton, Input, InputGroup, InputRightElement } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import { searchTermChanged } from 'features/gallery/store/gallerySlice';
+import { debounce } from 'lodash-es';
+import type { ChangeEvent } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiXBold } from 'react-icons/pi';
+
+export const GallerySearch = () => {
+  const dispatch = useAppDispatch();
+  const { searchTerm } = useAppSelector((s) => s.gallery);
+  const { t } = useTranslation();
+
+  const [searchTermInput, setSearchTermInput] = useState(searchTerm);
+
+  const debouncedSetSearchTerm = useMemo(() => {
+    return debounce((value: string) => {
+      dispatch(searchTermChanged(value));
+    }, 1000);
+  }, [dispatch]);
+
+  const handleChangeInput = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setSearchTermInput(e.target.value);
+      debouncedSetSearchTerm(e.target.value);
+    },
+    [debouncedSetSearchTerm]
+  );
+
+  const handleClearInput = useCallback(() => {
+    setSearchTermInput('');
+    dispatch(searchTermChanged(''));
+  }, [dispatch]);
+
+  return (
+    <InputGroup>
+      <Input
+        placeholder={t('gallery.searchImages')}
+        value={searchTermInput}
+        onChange={handleChangeInput}
+        data-testid="image-search-input"
+      />
+      {searchTermInput && searchTermInput.length && (
+        <InputRightElement h="full" pe={2}>
+          <IconButton
+            onClick={handleClearInput}
+            size="sm"
+            variant="link"
+            aria-label={t('boards.clearSearch')}
+            icon={<PiXBold />}
+          />
+        </InputRightElement>
+      )}
+    </InputGroup>
+  );
+};

invokeai/frontend/web/src/features/gallery/store/gallerySelectors.ts

@@ -22,6 +22,7 @@ export const selectListImagesQueryArgs = createMemoizedSelector(
           is_intermediate: false,
           starred_first: gallery.starredFirst,
           order_dir: gallery.orderDir,
+          search_term: gallery.searchTerm,
         }
       : skipToken
 );

invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts

@@ -118,6 +118,9 @@ export const gallerySlice = createSlice({
     orderDirChanged: (state, action: PayloadAction<OrderDir>) => {
       state.orderDir = action.payload;
     },
+    searchTermChanged: (state, action: PayloadAction<string | undefined>) => {
+      state.searchTerm = action.payload;
+    },
   },
 });
 
@@ -143,6 +146,7 @@ export const {
   orderDirChanged,
   starredFirstChanged,
   shouldShowArchivedBoardsChanged,
+  searchTermChanged,
 } = gallerySlice.actions;
 
 export const selectGallerySlice = (state: RootState) => state.gallery;

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

@@ -22,6 +22,7 @@ export type GalleryState = {
   limit: number;
   starredFirst: boolean;
   orderDir: OrderDir;
+  searchTerm?: string;
   alwaysShowImageSizeBadge: boolean;
   imageToCompare: ImageDTO | null;
   comparisonMode: ComparisonMode;