From ef3c2e4348a6e46a91cfcc5d1ca7c7aa0e034465 Mon Sep 17 00:00:00 2001
From: BennyKok <itechbenny@gmail.com>
Date: Thu, 21 Dec 2023 00:10:21 +0800
Subject: [PATCH] fix: output display

---
 web/src/components/OutputRender.tsx | 39 ++++++++++++++++++-----------
 web/src/components/RunOutputs.tsx   |  3 ++-
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/web/src/components/OutputRender.tsx b/web/src/components/OutputRender.tsx
index b0b652f..f84bdc5 100644
--- a/web/src/components/OutputRender.tsx
+++ b/web/src/components/OutputRender.tsx
@@ -1,11 +1,10 @@
-'use client'
+"use client";
 
-import { Download } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { getFileDownloadUrl } from "@/server/getFileDownloadUrl";
+import { Download } from "lucide-react";
 
-
-export function OutputRender(props: { run_id: string; filename: string; }) {
+export function OutputRender(props: { run_id: string; filename: string }) {
   if (props.filename.endsWith(".png")) {
     return (
       <img
@@ -13,19 +12,29 @@ export function OutputRender(props: { run_id: string; filename: string; }) {
         alt={props.filename}
         src={`/api/view?file=${encodeURIComponent(
           `outputs/runs/${props.run_id}/${props.filename}`
-        )}`} />
+        )}`}
+      />
     );
   } else {
-    return <Button className="gap-2" onClick={async () => {
-      const url = await getFileDownloadUrl(`outputs/runs/${props.run_id}/${props.filename}`);
+    return (
+      <Button
+        className="gap-2"
+        onClick={async () => {
+          const url = await getFileDownloadUrl(
+            `outputs/runs/${props.run_id}/${props.filename}`
+          );
 
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = props.filename;
-      a.target = '_blank'; // Add this line
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-    }}>Download <Download size={14} /></Button>;
+          const a = document.createElement("a");
+          a.href = url;
+          a.download = props.filename;
+          a.target = "_blank"; // Add this line
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+        }}
+      >
+        Download <Download size={14} />
+      </Button>
+    );
   }
 }
diff --git a/web/src/components/RunOutputs.tsx b/web/src/components/RunOutputs.tsx
index ae61ff6..ad453cf 100644
--- a/web/src/components/RunOutputs.tsx
+++ b/web/src/components/RunOutputs.tsx
@@ -22,7 +22,8 @@ export async function RunOutputs({ run_id }: { run_id: string }) {
       </TableHeader>
       <TableBody>
         {outputs?.map((run) => {
-          const fileName = run.data.images?.[0].filename;
+          const fileName =
+            run.data.images?.[0].filename || run.data.files?.[0].filename;
 
           if (!fileName)
             return (