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/services/api/endpoints/images.ts

@@ -1,13 +1,22 @@
 import { ApiFullTagDescription, api } from '..';
+import { components } from '../schema';
 import { ImageDTO } from '../types';
 
+/**
+ * This is an unsafe type; the object inside is not guaranteed to be valid.
+ */
+export type UnsafeImageMetadata = {
+  metadata: components['schemas']['CoreMetadata'];
+  graph: NonNullable<components['schemas']['Graph']>;
+};
+
 export const imagesApi = api.injectEndpoints({
   endpoints: (build) => ({
     /**
      * Image Queries
      */
     getImageDTO: build.query<ImageDTO, string>({
-      query: (image_name) => ({ url: `images/${image_name}/metadata` }),
+      query: (image_name) => ({ url: `images/${image_name}` }),
       providesTags: (result, error, arg) => {
         const tags: ApiFullTagDescription[] = [{ type: 'Image', id: arg }];
         if (result?.board_id) {
@@ -17,7 +26,17 @@ export const imagesApi = api.injectEndpoints({
       },
       keepUnusedDataFor: 86400, // 24 hours
     }),
+    getImageMetadata: build.query<UnsafeImageMetadata, string>({
+      query: (image_name) => ({ url: `images/${image_name}/metadata` }),
+      providesTags: (result, error, arg) => {
+        const tags: ApiFullTagDescription[] = [
+          { type: 'ImageMetadata', id: arg },
+        ];
+        return tags;
+      },
+      keepUnusedDataFor: 86400, // 24 hours
+    }),
   }),
 });
 
-export const { useGetImageDTOQuery } = imagesApi;
+export const { useGetImageDTOQuery, useGetImageMetadataQuery } = imagesApi;

invokeai/frontend/web/src/services/api/endpoints/models.ts

@@ -33,25 +33,28 @@ type AnyModelConfigEntity =
   | VaeModelConfigEntity;
 
 const mainModelsAdapter = createEntityAdapter<MainModelConfigEntity>({
-  sortComparer: (a, b) => a.name.localeCompare(b.name),
+  sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
 });
 const loraModelsAdapter = createEntityAdapter<LoRAModelConfigEntity>({
-  sortComparer: (a, b) => a.name.localeCompare(b.name),
+  sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
 });
 const controlNetModelsAdapter =
   createEntityAdapter<ControlNetModelConfigEntity>({
-    sortComparer: (a, b) => a.name.localeCompare(b.name),
+    sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
   });
 const textualInversionModelsAdapter =
   createEntityAdapter<TextualInversionModelConfigEntity>({
-    sortComparer: (a, b) => a.name.localeCompare(b.name),
+    sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
   });
 const vaeModelsAdapter = createEntityAdapter<VaeModelConfigEntity>({
-  sortComparer: (a, b) => a.name.localeCompare(b.name),
+  sortComparer: (a, b) => a.model_name.localeCompare(b.model_name),
 });
 
-export const getModelId = ({ base_model, type, name }: AnyModelConfig) =>
-  `${base_model}/${type}/${name}`;
+export const getModelId = ({
+  base_model,
+  model_type,
+  model_name,
+}: AnyModelConfig) => `${base_model}/${model_type}/${model_name}`;
 
 const createModelEntities = <T extends AnyModelConfigEntity>(
   models: AnyModelConfig[]