feat(ui): consolidate images slice

Now that images are in a database and we can make filtered queries, we can do away with the cumbersome `resultsSlice` and `uploadsSlice`.

- Remove `resultsSlice` and `uploadsSlice` entirely
- Add `imagesSlice` fills the same role
- Convert the application to use `imagesSlice`, reducing a lot of messy logic where we had to check which category was selected
- Add a simple filter popover to the gallery, which lets you select any number of image categories

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx

@@ -5,7 +5,6 @@ import { useGetUrl } from 'common/util/getUrl';
 import { clearInitialImage } from 'features/parameters/store/generationSlice';
 import { DragEvent, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { ResourceOrigin } from 'services/api';
 import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
 import { generationSelector } from 'features/parameters/store/generationSelectors';
 import { initialImageSelected } from 'features/parameters/store/actions';
@@ -55,11 +54,7 @@ const InitialImagePreview = () => {
   const handleDrop = useCallback(
     (e: DragEvent<HTMLDivElement>) => {
       const name = e.dataTransfer.getData('invokeai/imageName');
-      const type = e.dataTransfer.getData(
-        'invokeai/imageOrigin'
-      ) as ResourceOrigin;
-
-      dispatch(initialImageSelected({ image_name: name, image_origin: type }));
+      dispatch(initialImageSelected(name));
     },
     [dispatch]
   );

invokeai/frontend/web/src/features/parameters/hooks/useParameters.ts

@@ -88,7 +88,7 @@ export const useParameters = () => {
         return;
       }
 
-      dispatch(initialImageSelected(image));
+      dispatch(initialImageSelected(image.image_name));
       toaster({
         title: t('toast.initialImageSet'),
         status: 'info',

invokeai/frontend/web/src/features/parameters/store/actions.ts

@@ -26,6 +26,6 @@ export const isImageDTO = (image: any): image is ImageDTO => {
   );
 };
 
-export const initialImageSelected = createAction<
-  ImageDTO | ImageNameAndOrigin | undefined
->('generation/initialImageSelected');
+export const initialImageSelected = createAction<ImageDTO | string | undefined>(
+  'generation/initialImageSelected'
+);

invokeai/frontend/web/src/features/parameters/store/generationSelectors.ts

@@ -1,34 +1,3 @@
-import { createSelector } from '@reduxjs/toolkit';
 import { RootState } from 'app/store/store';
-import { selectResultsById } from 'features/gallery/store/resultsSlice';
-import { selectUploadsById } from 'features/gallery/store/uploadsSlice';
-import { isEqual } from 'lodash-es';
 
 export const generationSelector = (state: RootState) => state.generation;
-
-export const mayGenerateMultipleImagesSelector = createSelector(
-  generationSelector,
-  ({ shouldRandomizeSeed, shouldGenerateVariations }) => {
-    return shouldRandomizeSeed || shouldGenerateVariations;
-  },
-  {
-    memoizeOptions: {
-      resultEqualityCheck: isEqual,
-    },
-  }
-);
-
-export const initialImageSelector = createSelector(
-  [(state: RootState) => state, generationSelector],
-  (state, generation) => {
-    const { initialImage } = generation;
-
-    if (initialImage?.type === 'results') {
-      return selectResultsById(state, initialImage.name);
-    }
-
-    if (initialImage?.type === 'uploads') {
-      return selectUploadsById(state, initialImage.name);
-    }
-  }
-);