From 4a9cca6c2d04e38c0eb6fd11676b517431b479b4 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 5 Mar 2024 23:07:43 +1100
Subject: [PATCH] fix(ui): format model API response data

---
 .../subpanels/ModelPanel/Metadata/ModelMetadata.tsx      | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Metadata/ModelMetadata.tsx b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Metadata/ModelMetadata.tsx
index 2c6294a987..5f94ac4d0a 100644
--- a/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Metadata/ModelMetadata.tsx
+++ b/invokeai/frontend/web/src/features/modelManagerV2/subpanels/ModelPanel/Metadata/ModelMetadata.tsx
@@ -21,6 +21,13 @@ export const ModelMetadata = () => {
     return MODEL_TYPE_TRIGGER_PHRASE.includes(data.type);
   }, [data]);
 
+  const apiResponseFormatted = useMemo(() => {
+    if (!data?.source_api_response) {
+      return {};
+    }
+    return JSON.parse(data.source_api_response);
+  }, [data?.source_api_response]);
+
   return (
     <Flex flexDir="column" height="full" gap="3">
       {shouldShowTriggerPhraseSettings && (
@@ -28,7 +35,7 @@ export const ModelMetadata = () => {
           <TriggerPhrases />
         </Box>
       )}
-      <DataViewer label="metadata" data={data?.source_api_response || {}} />
+      <DataViewer label="metadata" data={apiResponseFormatted} />
     </Flex>
   );
 };