feat(ui): wip update UI for migration

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

@@ -7,9 +7,9 @@ import { allParametersSet, setSeed } from '../store/generationSlice';
 import { isImageField } from 'services/types/guards';
 import { NUMPY_RAND_MAX } from 'app/constants';
 import { initialImageSelected } from '../store/actions';
-import { Image } from 'app/types/invokeai';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { useAppToaster } from 'app/components/Toaster';
+import { ImageDTO } from 'services/api';
 
 export const useParameters = () => {
   const dispatch = useAppDispatch();
@@ -88,9 +88,7 @@ export const useParameters = () => {
         return;
       }
 
-      dispatch(
-        initialImageSelected({ name: image.image_name, type: image.image_type })
-      );
+      dispatch(initialImageSelected(image));
       toaster({
         title: t('toast.initialImageSet'),
         status: 'info',
@@ -105,21 +103,21 @@ export const useParameters = () => {
    * Sets image as initial image with toast
    */
   const sendToImageToImage = useCallback(
-    (image: Image) => {
-      dispatch(initialImageSelected({ name: image.name, type: image.type }));
+    (image: ImageDTO) => {
+      dispatch(initialImageSelected(image));
     },
     [dispatch]
   );
 
   const recallAllParameters = useCallback(
-    (image: Image | undefined) => {
-      const type = image?.metadata?.invokeai?.node?.type;
+    (image: ImageDTO | undefined) => {
+      const type = image?.metadata?.type;
       if (['txt2img', 'img2img', 'inpaint'].includes(String(type))) {
         dispatch(allParametersSet(image));
 
-        if (image?.metadata?.invokeai?.node?.type === 'img2img') {
+        if (image?.metadata?.type === 'img2img') {
           dispatch(setActiveTab('img2img'));
-        } else if (image?.metadata?.invokeai?.node?.type === 'txt2img') {
+        } else if (image?.metadata?.type === 'txt2img') {
           dispatch(setActiveTab('txt2img'));
         }
 

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

@@ -1,12 +1,31 @@
 import { createAction } from '@reduxjs/toolkit';
-import { Image } from 'app/types/invokeai';
-import { ImageType } from 'services/api';
+import { isObject } from 'lodash-es';
+import { ImageDTO, ImageType } from 'services/api';
 
-export type SelectedImage = {
-  name: string;
-  type: ImageType;
+export type ImageNameAndType = {
+  image_name: string;
+  image_type: ImageType;
+};
+
+export const isImageDTO = (image: any): image is ImageDTO => {
+  return (
+    image &&
+    isObject(image) &&
+    'image_name' in image &&
+    image?.image_name !== undefined &&
+    'image_type' in image &&
+    image?.image_type !== undefined &&
+    'image_url' in image &&
+    image?.image_url !== undefined &&
+    'thumbnail_url' in image &&
+    image?.thumbnail_url !== undefined &&
+    'image_category' in image &&
+    image?.image_category !== undefined &&
+    'created_at' in image &&
+    image?.created_at !== undefined
+  );
 };
 
 export const initialImageSelected = createAction<
-  Image | SelectedImage | undefined
+  ImageDTO | ImageNameAndType | undefined
 >('generation/initialImageSelected');

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

@@ -6,13 +6,14 @@ import { clamp, sample } from 'lodash-es';
 import { setAllParametersReducer } from './setAllParametersReducer';
 import { receivedModels } from 'services/thunks/model';
 import { Scheduler } from 'app/constants';
+import { ImageDTO } from 'services/api';
 
 export interface GenerationState {
   cfgScale: number;
   height: number;
   img2imgStrength: number;
   infillMethod: string;
-  initialImage?: InvokeAI.Image;
+  initialImage?: ImageDTO;
   iterations: number;
   perlin: number;
   prompt: string;
@@ -213,7 +214,7 @@ export const generationSlice = createSlice({
     setShouldUseNoiseSettings: (state, action: PayloadAction<boolean>) => {
       state.shouldUseNoiseSettings = action.payload;
     },
-    initialImageChanged: (state, action: PayloadAction<InvokeAI.Image>) => {
+    initialImageChanged: (state, action: PayloadAction<ImageDTO>) => {
       state.initialImage = action.payload;
     },
     modelSelected: (state, action: PayloadAction<string>) => {

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

@@ -1,12 +1,11 @@
 import { Draft, PayloadAction } from '@reduxjs/toolkit';
-import { Image } from 'app/types/invokeai';
 import { GenerationState } from './generationSlice';
-import { ImageToImageInvocation } from 'services/api';
+import { ImageDTO, ImageToImageInvocation } from 'services/api';
 import { isScheduler } from 'app/constants';
 
 export const setAllParametersReducer = (
   state: Draft<GenerationState>,
-  action: PayloadAction<Image | undefined>
+  action: PayloadAction<ImageDTO | undefined>
 ) => {
   const node = action.payload?.metadata.invokeai?.node;