feat(ui): update UI for new metadata

- Update for new routes
- Update model storage in state to be `MainModelField` type instead of `string`, simplifies a lot of model handling
- Update model-related stuff for model `name` --> `model_name`
- Update linear graphs to use `MetadataAccumulator`
- Update `ImageMetadataViewer` UI
- Ensure all `recall` functions work (well, the ones that are active anyways)

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

@@ -162,7 +162,7 @@ export const useRecallParameters = () => {
         parameterNotSetToast();
         return;
       }
-      dispatch(modelSelected(model?.id || ''));
+      dispatch(modelSelected(model));
       parameterSetToast();
     },
     [dispatch, parameterSetToast, parameterNotSetToast]

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

@@ -1,8 +1,10 @@
 import { createAction } from '@reduxjs/toolkit';
-import { ImageDTO } from 'services/api/types';
+import { ImageDTO, MainModelField } from 'services/api/types';
 
 export const initialImageSelected = createAction<ImageDTO | string | undefined>(
   'generation/initialImageSelected'
 );
 
-export const modelSelected = createAction<string>('generation/modelSelected');
+export const modelSelected = createAction<MainModelField>(
+  'generation/modelSelected'
+);

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

@@ -8,12 +8,11 @@ import {
   setShouldShowAdvancedOptions,
 } from 'features/ui/store/uiSlice';
 import { clamp } from 'lodash-es';
-import { ImageDTO } from 'services/api/types';
+import { ImageDTO, MainModelField } from 'services/api/types';
 import { clipSkipMap } from '../components/Parameters/Advanced/ParamClipSkip';
 import {
   CfgScaleParam,
   HeightParam,
-  MainModelParam,
   NegativePromptParam,
   PositivePromptParam,
   SchedulerParam,
@@ -54,7 +53,7 @@ export interface GenerationState {
   shouldUseSymmetry: boolean;
   horizontalSymmetrySteps: number;
   verticalSymmetrySteps: number;
-  model: MainModelParam | null;
+  model: MainModelField | null;
   vae: VaeModelParam | null;
   seamlessXAxis: boolean;
   seamlessYAxis: boolean;
@@ -227,23 +226,17 @@ export const generationSlice = createSlice({
       const { image_name, width, height } = action.payload;
       state.initialImage = { imageName: image_name, width, height };
     },
-    modelSelected: (state, action: PayloadAction<string>) => {
-      const [base_model, type, name] = action.payload.split('/');
+    modelChanged: (state, action: PayloadAction<MainModelField | null>) => {
+      if (!action.payload) {
+        state.model = null;
+      }
 
-      state.model = zMainModel.parse({
-        id: action.payload,
-        base_model,
-        name,
-        type,
-      });
+      state.model = zMainModel.parse(action.payload);
 
       // Clamp ClipSkip Based On Selected Model
       const { maxClip } = clipSkipMap[state.model.base_model];
       state.clipSkip = clamp(state.clipSkip, 0, maxClip);
     },
-    modelChanged: (state, action: PayloadAction<MainModelParam>) => {
-      state.model = action.payload;
-    },
     vaeSelected: (state, action: PayloadAction<VaeModelParam | null>) => {
       state.vae = action.payload;
     },

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

@@ -135,8 +135,7 @@ export type BaseModelParam = z.infer<typeof zBaseModel>;
  * TODO: Make this a dynamically generated enum?
  */
 export const zMainModel = z.object({
-  id: z.string(),
-  name: z.string(),
+  model_name: z.string(),
   base_model: zBaseModel,
 });