fix: download url

web/src/components/DownloadButton.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Download } from "lucide-react";
+
+export function DownloadButton(props: { href: string; filename: string }) {
+  return (
+    <Button
+      className="gap-2"
+      onClick={async () => {
+        const url = props.href;
+
+        console.log(url);
+
+        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>
+  );
+}

web/src/components/OutputRender.tsx

@@ -1,40 +1,22 @@
-"use client";
-
-import { Button } from "@/components/ui/button";
+import { DownloadButton } from "./DownloadButton";
 import { getFileDownloadUrl } from "@/server/getFileDownloadUrl";
-import { Download } from "lucide-react";
 
-export function OutputRender(props: { run_id: string; filename: string }) {
+export async function OutputRender(props: {
+  run_id: string;
+  filename: string;
+}) {
   if (props.filename.endsWith(".png")) {
-    return (
-      <img
-        className="max-w-[200px]"
-        alt={props.filename}
-        src={`/api/view?file=${encodeURIComponent(
-          `outputs/runs/${props.run_id}/${props.filename}`
-        )}`}
-      />
+    const url = await getFileDownloadUrl(
+      `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}`
-          );
 
-          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>
+    return <img className="max-w-[200px]" alt={props.filename} src={url} />;
+  } else {
+    const url = await getFileDownloadUrl(
+      `outputs/runs/${props.run_id}/${props.filename}`
     );
+    console.log(url);
+
+    return <DownloadButton filename={props.filename} href={url} />;
   }
 }