Support VHELM and image2struct in React app (#2469)

stanford-crfm · Mar 15, 2024 · 329805e · 329805e
1 parent c205e6f
commit 329805e
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 26 deletions.
diff --git a/helm-frontend/public/config.js b/helm-frontend/public/config.js
@@ -1,5 +1,5 @@
 window.SUITE = null;
 window.RELEASE = "v1.0.0";
 window.BENCHMARK_OUTPUT_BASE_URL =
-  "https://storage.googleapis.com/crfm-helm-public/lite/benchmark_output/";
+	"https://storage.googleapis.com/crfm-helm-public/lite/benchmark_output/";
 window.RELEASE_INDEX_ID = "lite";
diff --git a/helm-frontend/src/components/InstanceData.tsx b/helm-frontend/src/components/InstanceData.tsx
@@ -25,17 +25,26 @@ export default function InstanceData({
         {`Instance id: ${instance.id} [split:  ${instance.split}]`}
       </h3>
       <h3>Input</h3>
-      <Preview value={instance.input.text} />
-      {instance.references && instance.references.length > 0 ? (
-        <References references={instance.references} />
-      ) : null}
-      {predictions && requests ? (
-        <Predictions
-          predictions={predictions}
-          requests={requests}
-          metricFieldMap={metricFieldMap}
-        />
-      ) : null}
+      {instance.input.text.includes(`<br><img src="data:image;base64`) ? (
+        <div dangerouslySetInnerHTML={{ __html: instance.input.text }} />
+      ) : (
+        <Preview value={instance.input.text} />
+      )}
+
+      <div>
+        {instance.references && instance.references.length > 0 ? (
+          <References references={instance.references} />
+        ) : null}
+      </div>
+      <div>
+        {predictions && requests ? (
+          <Predictions
+            predictions={predictions}
+            requests={requests}
+            metricFieldMap={metricFieldMap}
+          />
+        ) : null}
+      </div>
     </div>
   );
 }
diff --git a/helm-frontend/src/components/Predictions.tsx b/helm-frontend/src/components/Predictions.tsx
@@ -31,7 +31,8 @@ export default function Predictions({
           <div className="w-full" key={idx}>
             {predictions.length > 1 ? <h2>Trial {idx}</h2> : null}
             <div className="mt-2 w-full">
-              {prediction.base64_images && prediction.base64_images.length ? (
+              {prediction.base64_images &&
+              prediction.base64_images.length > 0 ? (
                 <>
                   <h3 className="mr-4">Prediction image</h3>
                   {prediction.base64_images.map((base64_image) => (

diff --git a/helm-frontend/src/components/Request/Request.tsx b/helm-frontend/src/components/Request/Request.tsx
@@ -9,11 +9,11 @@ type Props = {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function formatArray(arr: any): any {
   if (!Array.isArray(arr)) {
-    return arr;
+    return String(arr);
   }
 
-  if (arr.length === 0) {
-    return "";
+  if (arr.length == 0) {
+    return "[]";
   }
 
   return String(
@@ -24,18 +24,27 @@ function formatArray(arr: any): any {
 export default function Request({ request }: Props) {
   return (
     <div>
-      <h3 className="block text text-gray-400">
-        Prompt ({request.request.prompt.length} Chars)
-      </h3>
-      <Preview value={request.request.prompt} />
-
+      {request.request.prompt.length > 0 ? (
+        <div>
+          <h3 className="block text text-gray-400">
+            Prompt ({request.request.prompt.length} Chars)
+          </h3>
+          <Preview value={request.request.prompt} />
+        </div>
+      ) : (
+        <h3 className="block text text-gray-400">Empty Prompt</h3>
+      )}
       <List>
         {(Object.keys(request.request) as (keyof typeof request.request)[])
           .filter((key) => key !== "prompt")
           .map((key, idx) => (
             <ListItem key={idx + 1}>
               <span>{key}:</span>
-              <span>{formatArray(request.request[key])}</span>
+              {request.request && request.request[key] ? (
+                <span>{formatArray(request.request[key])}</span>
+              ) : (
+                "null"
+              )}
             </ListItem>
           ))}
       </List>

diff --git a/helm-frontend/src/services/getRunsToRunSuites.ts b/helm-frontend/src/services/getRunsToRunSuites.ts
@@ -1,14 +1,12 @@
 import getBenchmarkEndpoint from "@/utils/getBenchmarkEndpoint";
-import getBenchmarkRelease from "@/utils/getBenchmarkRelease";
+import getVersionBaseUrl from "@/utils/getVersionBaseUrl";
 
 export default async function getRunsToRunSuites(
   signal: AbortSignal,
 ): Promise<Record<string, string>> {
   try {
     const runsToRunSuites = await fetch(
-      getBenchmarkEndpoint(
-        `/releases/${getBenchmarkRelease()}/runs_to_run_suites.json`,
-      ),
+      getBenchmarkEndpoint(`${getVersionBaseUrl()}/runs_to_run_suites.json`),
       { signal },
     );