feat(ui): gallery sort by created at or starred, asc or desc

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

@@ -352,11 +352,14 @@
     },
     "gallery": {
         "alwaysShowImageSizeBadge": "Always Show Image Size Badge",
+        "ascending": "Ascending",
         "assets": "Assets",
         "autoAssignBoardOnClick": "Auto-Assign Board on Click",
         "autoSwitchNewImages": "Auto-Switch to New Images",
         "copy": "Copy",
+        "createdDate": "Created Date",
         "currentlyInUse": "This image is currently in use in the following features:",
+        "descending": "Descending",
         "drop": "Drop",
         "dropOrUpload": "$t(gallery.drop) or Upload",
         "dropToUpload": "$t(gallery.drop) to Upload",
@@ -371,10 +374,15 @@
         "image": "image",
         "loading": "Loading",
         "loadMore": "Load More",
+        "newestFirst": "Newest First",
         "noImageSelected": "No Image Selected",
         "noImagesInGallery": "No Images to Display",
+        "oldestFirst": "Oldest First",
         "setCurrentImage": "Set as Current Image",
         "starImage": "Star Image",
+        "starred": "Starred",
+        "starredFirst": "Starred First",
+        "starredLast": "Starred Last",
         "unstarImage": "Unstar Image",
         "unableToLoad": "Unable to load Gallery",
         "deleteSelection": "Delete Selection",
@@ -395,6 +403,10 @@
         "selectAnImageToCompare": "Select an Image to Compare",
         "slider": "Slider",
         "sideBySide": "Side-by-Side",
+        "sortAscending": "Ascending",
+        "sortBy": "Sort By",
+        "sortingBy": "Sorting by",
+        "sortDescending": "Descending",
         "hover": "Hover",
         "swapImages": "Swap Images",
         "compareOptions": "Comparison Options",

invokeai/frontend/web/src/features/gallery/components/GalleryMenu/GalleryBulkSelect.tsx

@@ -1,4 +1,4 @@
-import { Tag, TagCloseButton, TagLabel } from '@invoke-ai/ui-library';
+import { Spacer, Tag, TagCloseButton, TagLabel } from '@invoke-ai/ui-library';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
 import { selectionChanged } from 'features/gallery/store/gallerySlice';
@@ -23,23 +23,11 @@ export const GalleryBulkSelect = () => {
   useHotkeys(['ctrl+a', 'meta+a'], onSelectPage, { preventDefault: true }, [onSelectPage]);
 
   if (selection.length <= 1) {
-    return null;
+    return <Spacer />;
   }
 
   return (
-    <Tag
+    <Tag py={1} px={3} userSelect="none" border={1} borderStyle="solid" borderColor="whiteAlpha.300">
-      position="absolute"
-      bg="invokeBlue.800"
-      color="base.50"
-      py={1}
-      px={3}
-      userSelect="none"
-      shadow="dark-lg"
-      fontWeight="semibold"
-      border={1}
-      borderStyle="solid"
-      borderColor="whiteAlpha.300"
-    >
       <TagLabel>
         {selection.length} {t('common.selected')}
       </TagLabel>

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

@@ -0,0 +1,13 @@
+import { Flex } from '@invoke-ai/ui-library';
+
+import { GalleryBulkSelect } from './GalleryBulkSelect';
+import { GallerySort } from './GallerySort';
+
+export const GalleryMenu = () => {
+  return (
+    <Flex alignItems="center" justifyContent="space-between">
+      <GalleryBulkSelect />
+      <GallerySort />
+    </Flex>
+  );
+};

invokeai/frontend/web/src/features/gallery/components/GalleryMenu/GallerySort.tsx

@@ -0,0 +1,109 @@
+import type { ComboboxOption } from '@invoke-ai/ui-library';
+import {
+  Button,
+  ButtonGroup,
+  Combobox,
+  Flex,
+  FormControl,
+  FormLabel,
+  IconButton,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+} from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import type { SingleValue } from 'chakra-react-select';
+import { orderByChanged, orderDirChanged } from 'features/gallery/store/gallerySlice';
+import type { OrderBy, OrderDir } from 'features/gallery/store/types';
+import { t } from 'i18next';
+import { useCallback, useMemo } from 'react';
+import { PiSortAscending, PiSortDescending } from 'react-icons/pi';
+
+const OPTIONS = [
+  { value: 'created_at', label: t('gallery.createdDate') },
+  { value: 'starred', label: t('gallery.starred') },
+];
+
+export const GallerySort = () => {
+  const { orderBy, orderDir } = useAppSelector((s) => s.gallery);
+  const dispatch = useAppDispatch();
+
+  const handleChangeOrderDir = useCallback(
+    (dir: OrderDir) => {
+      dispatch(orderDirChanged(dir));
+    },
+    [dispatch]
+  );
+
+  const handleChangeOrderBy = useCallback(
+    (v: SingleValue<ComboboxOption>) => {
+      if (v) {
+        dispatch(orderByChanged(v.value as OrderBy));
+      }
+    },
+    [dispatch]
+  );
+
+  const orderByValue = useMemo(() => {
+    return OPTIONS.find((opt) => opt.value === orderBy);
+  }, [orderBy]);
+
+  const ascendingText = useMemo(() => {
+    return orderBy === 'created_at' ? t('gallery.oldestFirst') : t('gallery.starredLast');
+  }, [orderBy]);
+
+  const descendingText = useMemo(() => {
+    return orderBy === 'created_at' ? t('gallery.newestFirst') : t('gallery.starredFirst');
+  }, [orderBy]);
+
+  const sortTooltip = useMemo(() => {
+    if (orderDir === 'ASC') {
+      return `${t('gallery.sortingBy')}: ${ascendingText}`;
+    } else {
+      return `${t('gallery.sortingBy')}: ${descendingText}`;
+    }
+  }, [orderDir, ascendingText, descendingText]);
+
+  return (
+    <Popover isLazy>
+      <PopoverTrigger>
+        <IconButton
+          tooltip={sortTooltip}
+          variant="outline"
+          size="sm"
+          icon={orderDir === 'ASC' ? <PiSortAscending /> : <PiSortDescending />}
+          aria-label="Sort"
+        />
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverBody>
+          <Flex direction="column" gap={4}>
+            <ButtonGroup>
+              <Button
+                size="sm"
+                flexShrink={0}
+                onClick={handleChangeOrderDir.bind(null, 'DESC')}
+                colorScheme={orderDir === 'DESC' ? 'invokeBlue' : 'base'}
+              >
+                {descendingText}
+              </Button>
+              <Button
+                size="sm"
+                flexShrink={0}
+                onClick={handleChangeOrderDir.bind(null, 'ASC')}
+                colorScheme={orderDir === 'ASC' ? 'invokeBlue' : 'base'}
+              >
+                {ascendingText}
+              </Button>
+            </ButtonGroup>
+            <FormControl>
+              <FormLabel>{t('gallery.sortBy')}</FormLabel>
+              <Combobox value={orderByValue} options={OPTIONS} onChange={handleChangeOrderBy} isSearchable={false} />
+            </FormControl>
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};

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

@@ -10,6 +10,7 @@ import { RiServerLine } from 'react-icons/ri';
 
 import BoardsList from './Boards/BoardsList/BoardsList';
 import GalleryBoardName from './GalleryBoardName';
+import { GalleryMenu } from './GalleryMenu/GalleryMenu';
 import GallerySettingsPopover from './GallerySettingsPopover';
 import GalleryImageGrid from './ImageGrid/GalleryImageGrid';
 import { GalleryPagination } from './ImageGrid/GalleryPagination';
@@ -80,7 +81,7 @@ const ImageGalleryContent = () => {
           </TabList>
         </Tabs>
       </Flex>
-
+      <GalleryMenu />
       <GalleryImageGrid />
       <GalleryPagination />
     </Flex>

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

@@ -2,7 +2,6 @@ import { Box, Flex, Grid } from '@invoke-ai/ui-library';
 import { EMPTY_ARRAY } from 'app/store/constants';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
-import { GalleryBulkSelect } from 'features/gallery/components/GalleryBulkSelect';
 import { useGalleryHotkeys } from 'features/gallery/hooks/useGalleryHotkeys';
 import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
 import { limitChanged } from 'features/gallery/store/gallerySlice';
@@ -145,7 +144,6 @@ const Content = () => {
           ))}
         </Grid>
       </Box>
-      <GalleryBulkSelect />
     </Box>
   );
 };

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

@@ -20,6 +20,8 @@ export const selectListImagesQueryArgs = createMemoizedSelector(
           offset: gallery.offset,
           limit: gallery.limit,
           is_intermediate: false,
+          order_by: gallery.orderBy,
+          order_dir: gallery.orderDir,
         }
       : skipToken
 );

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

@@ -4,7 +4,7 @@ import type { PersistConfig, RootState } from 'app/store/store';
 import { uniqBy } from 'lodash-es';
 import type { ImageDTO } from 'services/api/types';
 
-import type { BoardId, ComparisonMode, GalleryState, GalleryView } from './types';
+import type { BoardId, ComparisonMode, GalleryState, GalleryView, OrderBy, OrderDir } from './types';
 import { IMAGE_LIMIT } from './types';
 
 const initialGalleryState: GalleryState = {
@@ -19,6 +19,8 @@ const initialGalleryState: GalleryState = {
   boardSearchText: '',
   limit: 20,
   offset: 0,
+  orderBy: 'starred',
+  orderDir: 'ASC',
   isImageViewerOpen: true,
   imageToCompare: null,
   comparisonMode: 'slider',
@@ -112,6 +114,12 @@ export const gallerySlice = createSlice({
     shouldShowArchivedBoardsChanged: (state, action: PayloadAction<boolean>) => {
       state.shouldShowArchivedBoards = action.payload;
     },
+    orderByChanged: (state, action: PayloadAction<OrderBy>) => {
+      state.orderBy = action.payload;
+    },
+    orderDirChanged: (state, action: PayloadAction<OrderDir>) => {
+      state.orderDir = action.payload;
+    },
   },
 });
 
@@ -134,7 +142,8 @@ export const {
   comparisonModeCycled,
   offsetChanged,
   limitChanged,
-  shouldShowArchivedBoardsChanged,
+  orderByChanged,
+  orderDirChanged,
 } = gallerySlice.actions;
 
 export const selectGallerySlice = (state: RootState) => state.gallery;

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

@@ -8,6 +8,8 @@ export type GalleryView = 'images' | 'assets';
 export type BoardId = 'none' | (string & Record<never, never>);
 export type ComparisonMode = 'slider' | 'side-by-side' | 'hover';
 export type ComparisonFit = 'contain' | 'fill';
+export type OrderBy = 'created_at' | 'starred';
+export type OrderDir = 'ASC' | 'DESC';
 
 export type GalleryState = {
   selection: ImageDTO[];
@@ -20,6 +22,8 @@ export type GalleryState = {
   boardSearchText: string;
   offset: number;
   limit: number;
+  orderBy: OrderBy;
+  orderDir: OrderDir;
   alwaysShowImageSizeBadge: boolean;
   imageToCompare: ImageDTO | null;
   comparisonMode: ComparisonMode;

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

@@ -7293,145 +7293,145 @@ export type components = {
       project_id: string | null;
     };
     InvocationOutputMap: {
-      l2i: components["schemas"]["ImageOutput"];
+      lscale: components["schemas"]["LatentsOutput"];
-      float_range: components["schemas"]["FloatCollectionOutput"];
-      img_scale: components["schemas"]["ImageOutput"];
-      img_pad_crop: components["schemas"]["ImageOutput"];
-      rand_float: components["schemas"]["FloatOutput"];
-      collect: components["schemas"]["CollectInvocationOutput"];
-      show_image: components["schemas"]["ImageOutput"];
-      img_mul: components["schemas"]["ImageOutput"];
-      img_resize: components["schemas"]["ImageOutput"];
-      t2i_adapter: components["schemas"]["T2IAdapterOutput"];
-      sdxl_model_loader: components["schemas"]["SDXLModelLoaderOutput"];
-      ideal_size: components["schemas"]["IdealSizeOutput"];
-      lresize: components["schemas"]["LatentsOutput"];
-      integer_math: components["schemas"]["IntegerOutput"];
-      depth_anything_image_processor: components["schemas"]["ImageOutput"];
-      hed_image_processor: components["schemas"]["ImageOutput"];
-      i2l: components["schemas"]["LatentsOutput"];
-      add: components["schemas"]["IntegerOutput"];
-      blank_image: components["schemas"]["ImageOutput"];
-      crop_latents: components["schemas"]["LatentsOutput"];
-      infill_cv2: components["schemas"]["ImageOutput"];
-      string_join_three: components["schemas"]["StringOutput"];
-      round_float: components["schemas"]["FloatOutput"];
-      mul: components["schemas"]["IntegerOutput"];
-      latents_collection: components["schemas"]["LatentsCollectionOutput"];
-      save_image: components["schemas"]["ImageOutput"];
-      face_off: components["schemas"]["FaceOffOutput"];
-      merge_metadata: components["schemas"]["MetadataOutput"];
-      img_conv: components["schemas"]["ImageOutput"];
-      infill_lama: components["schemas"]["ImageOutput"];
-      alpha_mask_to_tensor: components["schemas"]["MaskOutput"];
-      segment_anything_processor: components["schemas"]["ImageOutput"];
-      scheduler: components["schemas"]["SchedulerOutput"];
-      freeu: components["schemas"]["UNetOutput"];
-      sub: components["schemas"]["IntegerOutput"];
-      normalbae_image_processor: components["schemas"]["ImageOutput"];
-      color_correct: components["schemas"]["ImageOutput"];
-      float_collection: components["schemas"]["FloatCollectionOutput"];
-      mlsd_image_processor: components["schemas"]["ImageOutput"];
-      range_of_size: components["schemas"]["IntegerCollectionOutput"];
       noise: components["schemas"]["NoiseOutput"];
-      pair_tile_image: components["schemas"]["PairTileImageOutput"];
+      step_param_easing: components["schemas"]["FloatCollectionOutput"];
-      color_map_image_processor: components["schemas"]["ImageOutput"];
-      mask_combine: components["schemas"]["ImageOutput"];
-      seamless: components["schemas"]["SeamlessModeOutput"];
-      img_nsfw: components["schemas"]["ImageOutput"];
-      esrgan: components["schemas"]["ImageOutput"];
-      infill_patchmatch: components["schemas"]["ImageOutput"];
-      zoe_depth_image_processor: components["schemas"]["ImageOutput"];
-      controlnet: components["schemas"]["ControlOutput"];
-      div: components["schemas"]["IntegerOutput"];
-      canny_image_processor: components["schemas"]["ImageOutput"];
-      random_range: components["schemas"]["IntegerCollectionOutput"];
-      metadata_item: components["schemas"]["MetadataItemOutput"];
-      rand_int: components["schemas"]["IntegerOutput"];
-      image_mask_to_tensor: components["schemas"]["MaskOutput"];
-      sdxl_refiner_compel_prompt: components["schemas"]["ConditioningOutput"];
-      mask_edge: components["schemas"]["ImageOutput"];
-      img_chan: components["schemas"]["ImageOutput"];
-      string_split: components["schemas"]["String2Output"];
-      latents: components["schemas"]["LatentsOutput"];
       prompt_from_file: components["schemas"]["StringCollectionOutput"];
-      sdxl_compel_prompt: components["schemas"]["ConditioningOutput"];
+      infill_cv2: components["schemas"]["ImageOutput"];
-      canvas_paste_back: components["schemas"]["ImageOutput"];
+      img_pad_crop: components["schemas"]["ImageOutput"];
-      infill_rgba: components["schemas"]["ImageOutput"];
+      metadata: components["schemas"]["MetadataOutput"];
-      unsharp_mask: components["schemas"]["ImageOutput"];
+      tomask: components["schemas"]["ImageOutput"];
+      img_mul: components["schemas"]["ImageOutput"];
+      sub: components["schemas"]["IntegerOutput"];
+      scheduler: components["schemas"]["SchedulerOutput"];
+      image_mask_to_tensor: components["schemas"]["MaskOutput"];
+      sdxl_lora_loader: components["schemas"]["SDXLLoRALoaderOutput"];
+      tile_image_processor: components["schemas"]["ImageOutput"];
+      img_channel_multiply: components["schemas"]["ImageOutput"];
+      heuristic_resize: components["schemas"]["ImageOutput"];
+      integer_collection: components["schemas"]["IntegerCollectionOutput"];
+      sdxl_refiner_compel_prompt: components["schemas"]["ConditioningOutput"];
+      float_collection: components["schemas"]["FloatCollectionOutput"];
+      denoise_latents: components["schemas"]["LatentsOutput"];
+      esrgan: components["schemas"]["ImageOutput"];
+      pair_tile_image: components["schemas"]["PairTileImageOutput"];
+      infill_lama: components["schemas"]["ImageOutput"];
       float_math: components["schemas"]["FloatOutput"];
-      face_identifier: components["schemas"]["ImageOutput"];
+      range: components["schemas"]["IntegerCollectionOutput"];
+      mediapipe_face_processor: components["schemas"]["ImageOutput"];
+      infill_patchmatch: components["schemas"]["ImageOutput"];
+      lineart_anime_image_processor: components["schemas"]["ImageOutput"];
+      cv_inpaint: components["schemas"]["ImageOutput"];
+      vae_loader: components["schemas"]["VAEOutput"];
+      string_split: components["schemas"]["String2Output"];
+      content_shuffle_image_processor: components["schemas"]["ImageOutput"];
+      img_conv: components["schemas"]["ImageOutput"];
+      ip_adapter: components["schemas"]["IPAdapterOutput"];
+      merge_metadata: components["schemas"]["MetadataOutput"];
+      leres_image_processor: components["schemas"]["ImageOutput"];
+      create_denoise_mask: components["schemas"]["DenoiseMaskOutput"];
+      dw_openpose_image_processor: components["schemas"]["ImageOutput"];
+      latents_collection: components["schemas"]["LatentsCollectionOutput"];
+      div: components["schemas"]["IntegerOutput"];
+      sdxl_compel_prompt: components["schemas"]["ConditioningOutput"];
+      pidi_image_processor: components["schemas"]["ImageOutput"];
+      rand_int: components["schemas"]["IntegerOutput"];
+      freeu: components["schemas"]["UNetOutput"];
+      show_image: components["schemas"]["ImageOutput"];
       calculate_image_tiles_even_split: components["schemas"]["CalculateImageTilesOutput"];
       calculate_image_tiles_min_overlap: components["schemas"]["CalculateImageTilesOutput"];
+      infill_rgba: components["schemas"]["ImageOutput"];
       face_mask_detection: components["schemas"]["FaceMaskOutput"];
-      denoise_latents: components["schemas"]["LatentsOutput"];
-      step_param_easing: components["schemas"]["FloatCollectionOutput"];
-      img_ilerp: components["schemas"]["ImageOutput"];
-      mask_from_id: components["schemas"]["ImageOutput"];
-      lscale: components["schemas"]["LatentsOutput"];
-      integer_collection: components["schemas"]["IntegerCollectionOutput"];
-      img_channel_offset: components["schemas"]["ImageOutput"];
-      calculate_image_tiles: components["schemas"]["CalculateImageTilesOutput"];
       model_identifier: components["schemas"]["ModelIdentifierOutput"];
-      sdxl_lora_collection_loader: components["schemas"]["SDXLLoRALoaderOutput"];
+      unsharp_mask: components["schemas"]["ImageOutput"];
-      merge_tiles_to_image: components["schemas"]["ImageOutput"];
-      cv_inpaint: components["schemas"]["ImageOutput"];
       compel: components["schemas"]["ConditioningOutput"];
-      img_blur: components["schemas"]["ImageOutput"];
+      img_chan: components["schemas"]["ImageOutput"];
-      tile_image_processor: components["schemas"]["ImageOutput"];
+      midas_depth_image_processor: components["schemas"]["ImageOutput"];
-      heuristic_resize: components["schemas"]["ImageOutput"];
+      merge_tiles_to_image: components["schemas"]["ImageOutput"];
-      lora_collection_loader: components["schemas"]["LoRALoaderOutput"];
+      random_range: components["schemas"]["IntegerCollectionOutput"];
-      string_split_neg: components["schemas"]["StringPosNegOutput"];
+      save_image: components["schemas"]["ImageOutput"];
+      seamless: components["schemas"]["SeamlessModeOutput"];
+      face_identifier: components["schemas"]["ImageOutput"];
       float_to_int: components["schemas"]["IntegerOutput"];
-      img_crop: components["schemas"]["ImageOutput"];
+      lineart_image_processor: components["schemas"]["ImageOutput"];
-      string_join: components["schemas"]["StringOutput"];
-      lineart_anime_image_processor: components["schemas"]["ImageOutput"];
-      img_watermark: components["schemas"]["ImageOutput"];
-      sdxl_lora_loader: components["schemas"]["SDXLLoRALoaderOutput"];
-      iterate: components["schemas"]["IterateInvocationOutput"];
-      tile_to_properties: components["schemas"]["TileToPropertiesOutput"];
-      tiled_multi_diffusion_denoise_latents: components["schemas"]["LatentsOutput"];
-      ip_adapter: components["schemas"]["IPAdapterOutput"];
-      infill_tile: components["schemas"]["ImageOutput"];
-      mediapipe_face_processor: components["schemas"]["ImageOutput"];
-      rectangle_mask: components["schemas"]["MaskOutput"];
-      create_denoise_mask: components["schemas"]["DenoiseMaskOutput"];
-      string: components["schemas"]["StringOutput"];
-      img_paste: components["schemas"]["ImageOutput"];
-      dw_openpose_image_processor: components["schemas"]["ImageOutput"];
-      lora_selector: components["schemas"]["LoRASelectorOutput"];
-      leres_image_processor: components["schemas"]["ImageOutput"];
-      metadata: components["schemas"]["MetadataOutput"];
-      conditioning: components["schemas"]["ConditioningOutput"];
-      invert_tensor_mask: components["schemas"]["MaskOutput"];
-      img_hue_adjust: components["schemas"]["ImageOutput"];
-      content_shuffle_image_processor: components["schemas"]["ImageOutput"];
-      conditioning_collection: components["schemas"]["ConditioningCollectionOutput"];
-      clip_skip: components["schemas"]["CLIPSkipInvocationOutput"];
-      vae_loader: components["schemas"]["VAEOutput"];
-      lblend: components["schemas"]["LatentsOutput"];
-      tomask: components["schemas"]["ImageOutput"];
-      string_replace: components["schemas"]["StringOutput"];
-      lora_loader: components["schemas"]["LoRALoaderOutput"];
-      pidi_image_processor: components["schemas"]["ImageOutput"];
-      string_collection: components["schemas"]["StringCollectionOutput"];
-      img_lerp: components["schemas"]["ImageOutput"];
-      dynamic_prompt: components["schemas"]["StringCollectionOutput"];
-      range: components["schemas"]["IntegerCollectionOutput"];
-      color: components["schemas"]["ColorOutput"];
-      sdxl_refiner_model_loader: components["schemas"]["SDXLRefinerModelLoaderOutput"];
       boolean_collection: components["schemas"]["BooleanCollectionOutput"];
-      image: components["schemas"]["ImageOutput"];
+      rectangle_mask: components["schemas"]["MaskOutput"];
-      float: components["schemas"]["FloatOutput"];
-      image_collection: components["schemas"]["ImageCollectionOutput"];
-      create_gradient_mask: components["schemas"]["GradientMaskOutput"];
-      img_channel_multiply: components["schemas"]["ImageOutput"];
-      core_metadata: components["schemas"]["MetadataOutput"];
-      main_model_loader: components["schemas"]["ModelLoaderOutput"];
       integer: components["schemas"]["IntegerOutput"];
       boolean: components["schemas"]["BooleanOutput"];
-      lineart_image_processor: components["schemas"]["ImageOutput"];
+      create_gradient_mask: components["schemas"]["GradientMaskOutput"];
-      midas_depth_image_processor: components["schemas"]["ImageOutput"];
+      img_hue_adjust: components["schemas"]["ImageOutput"];
+      float_range: components["schemas"]["FloatCollectionOutput"];
+      img_nsfw: components["schemas"]["ImageOutput"];
+      string_split_neg: components["schemas"]["StringPosNegOutput"];
+      iterate: components["schemas"]["IterateInvocationOutput"];
+      dynamic_prompt: components["schemas"]["StringCollectionOutput"];
+      tile_to_properties: components["schemas"]["TileToPropertiesOutput"];
+      mask_combine: components["schemas"]["ImageOutput"];
+      string: components["schemas"]["StringOutput"];
+      calculate_image_tiles: components["schemas"]["CalculateImageTilesOutput"];
+      invert_tensor_mask: components["schemas"]["MaskOutput"];
+      img_ilerp: components["schemas"]["ImageOutput"];
+      latents: components["schemas"]["LatentsOutput"];
+      lresize: components["schemas"]["LatentsOutput"];
+      depth_anything_image_processor: components["schemas"]["ImageOutput"];
+      t2i_adapter: components["schemas"]["T2IAdapterOutput"];
+      lblend: components["schemas"]["LatentsOutput"];
+      blank_image: components["schemas"]["ImageOutput"];
+      conditioning: components["schemas"]["ConditioningOutput"];
+      string_join: components["schemas"]["StringOutput"];
+      metadata_item: components["schemas"]["MetadataItemOutput"];
+      infill_tile: components["schemas"]["ImageOutput"];
+      conditioning_collection: components["schemas"]["ConditioningCollectionOutput"];
+      hed_image_processor: components["schemas"]["ImageOutput"];
+      sdxl_refiner_model_loader: components["schemas"]["SDXLRefinerModelLoaderOutput"];
+      tiled_multi_diffusion_denoise_latents: components["schemas"]["LatentsOutput"];
+      clip_skip: components["schemas"]["CLIPSkipInvocationOutput"];
+      string_replace: components["schemas"]["StringOutput"];
+      string_collection: components["schemas"]["StringCollectionOutput"];
+      color: components["schemas"]["ColorOutput"];
+      canvas_paste_back: components["schemas"]["ImageOutput"];
+      mask_from_id: components["schemas"]["ImageOutput"];
+      segment_anything_processor: components["schemas"]["ImageOutput"];
+      image: components["schemas"]["ImageOutput"];
+      normalbae_image_processor: components["schemas"]["ImageOutput"];
+      image_collection: components["schemas"]["ImageCollectionOutput"];
+      core_metadata: components["schemas"]["MetadataOutput"];
+      mask_edge: components["schemas"]["ImageOutput"];
+      color_correct: components["schemas"]["ImageOutput"];
+      mlsd_image_processor: components["schemas"]["ImageOutput"];
+      rand_float: components["schemas"]["FloatOutput"];
+      img_blur: components["schemas"]["ImageOutput"];
+      img_channel_offset: components["schemas"]["ImageOutput"];
+      integer_math: components["schemas"]["IntegerOutput"];
+      range_of_size: components["schemas"]["IntegerCollectionOutput"];
+      i2l: components["schemas"]["LatentsOutput"];
+      img_lerp: components["schemas"]["ImageOutput"];
+      zoe_depth_image_processor: components["schemas"]["ImageOutput"];
+      main_model_loader: components["schemas"]["ModelLoaderOutput"];
+      color_map_image_processor: components["schemas"]["ImageOutput"];
+      lora_collection_loader: components["schemas"]["LoRALoaderOutput"];
+      sdxl_model_loader: components["schemas"]["SDXLModelLoaderOutput"];
+      round_float: components["schemas"]["FloatOutput"];
+      collect: components["schemas"]["CollectInvocationOutput"];
+      lora_loader: components["schemas"]["LoRALoaderOutput"];
+      img_resize: components["schemas"]["ImageOutput"];
+      controlnet: components["schemas"]["ControlOutput"];
+      l2i: components["schemas"]["ImageOutput"];
+      canny_image_processor: components["schemas"]["ImageOutput"];
+      img_crop: components["schemas"]["ImageOutput"];
+      crop_latents: components["schemas"]["LatentsOutput"];
+      float: components["schemas"]["FloatOutput"];
+      lora_selector: components["schemas"]["LoRASelectorOutput"];
+      alpha_mask_to_tensor: components["schemas"]["MaskOutput"];
+      img_paste: components["schemas"]["ImageOutput"];
+      sdxl_lora_collection_loader: components["schemas"]["SDXLLoRALoaderOutput"];
+      ideal_size: components["schemas"]["IdealSizeOutput"];
+      face_off: components["schemas"]["FaceOffOutput"];
+      mul: components["schemas"]["IntegerOutput"];
+      string_join_three: components["schemas"]["StringOutput"];
+      img_watermark: components["schemas"]["ImageOutput"];
+      add: components["schemas"]["IntegerOutput"];
+      img_scale: components["schemas"]["ImageOutput"];
     };
     /**
      * InvocationStartedEvent