fix(ui): use zod to parse metdata when fetching from api

Author: psychedelicious

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

@@ -1,14 +1,20 @@
 import { EntityState, Update } from '@reduxjs/toolkit';
+import { fetchBaseQuery } from '@reduxjs/toolkit/dist/query';
 import { PatchCollection } from '@reduxjs/toolkit/dist/query/core/buildThunks';
 import {
   ASSETS_CATEGORIES,
   BoardId,
   IMAGE_CATEGORIES,
   IMAGE_LIMIT,
 } from 'features/gallery/store/types';
+import {
+  ImageMetadataAndWorkflow,
+  zCoreMetadata,
+} from 'features/nodes/types/types';
 import { getMetadataAndWorkflowFromImageBlob } from 'features/nodes/util/getMetadataAndWorkflowFromImageBlob';
 import { keyBy } from 'lodash-es';
 import { ApiFullTagDescription, LIST_TAG, api } from '..';
+import { $authToken, $projectId } from '../client';
 import { components, paths } from '../schema';
 import {
   DeleteBoardResult,
@@ -27,9 +33,6 @@ import {
   imagesSelectors,
 } from '../util';
 import { boardsApi } from './boards';
-import { ImageMetadataAndWorkflow } from 'features/nodes/types/types';
-import { fetchBaseQuery } from '@reduxjs/toolkit/dist/query';
-import { $authToken, $projectId } from '../client';
 
 export const imagesApi = api.injectEndpoints({
   endpoints: (build) => ({
@@ -158,18 +161,23 @@ export const imagesApi = api.injectEndpoints({
         let metadata = blobData.metadata;
 
         if (args.shouldFetchMetadataFromApi) {
-          const metadataResult = await fetchWithBaseQuery(
+          const metadataResponse = await fetchWithBaseQuery(
             `images/i/${args.image.image_name}/metadata`
           );
-          if (metadataResult.data) {
-            metadata = (metadataResult.data as UnsafeImageMetadata)
-              .metadata as UnsafeImageMetadata['metadata'];
+          if (metadataResponse.data) {
+            const metadataResult = zCoreMetadata.safeParse(
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              (metadataResponse.data as any)?.metadata
+            );
+            if (metadataResult.success) {
+              metadata = metadataResult.data;
+            }
           }
         }
 
         return { data: { ...blobData, metadata } };
       },
-      providesTags: (result, error, { image, shouldFetchMetadataFromApi }) => [
+      providesTags: (result, error, { image }) => [
         { type: 'ImageMetadataFromFile', id: image.image_name },
       ],
       keepUnusedDataFor: 86400, // 24 hours