fix: output display

This commit is contained in:
BennyKok 2023-12-21 00:10:21 +08:00
parent df2f18eda9
commit ef3c2e4348
2 changed files with 26 additions and 16 deletions

View File

@ -1,11 +1,10 @@
'use client' "use client";
import { Download } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { getFileDownloadUrl } from "@/server/getFileDownloadUrl"; 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")) { if (props.filename.endsWith(".png")) {
return ( return (
<img <img
@ -13,19 +12,29 @@ export function OutputRender(props: { run_id: string; filename: string; }) {
alt={props.filename} alt={props.filename}
src={`/api/view?file=${encodeURIComponent( src={`/api/view?file=${encodeURIComponent(
`outputs/runs/${props.run_id}/${props.filename}` `outputs/runs/${props.run_id}/${props.filename}`
)}`} /> )}`}
/>
); );
} else { } else {
return <Button className="gap-2" onClick={async () => { return (
const url = await getFileDownloadUrl(`outputs/runs/${props.run_id}/${props.filename}`); <Button
className="gap-2"
onClick={async () => {
const url = await getFileDownloadUrl(
`outputs/runs/${props.run_id}/${props.filename}`
);
const a = document.createElement('a'); const a = document.createElement("a");
a.href = url; a.href = url;
a.download = props.filename; a.download = props.filename;
a.target = '_blank'; // Add this line a.target = "_blank"; // Add this line
document.body.appendChild(a); document.body.appendChild(a);
a.click(); a.click();
document.body.removeChild(a); document.body.removeChild(a);
}}>Download <Download size={14} /></Button>; }}
>
Download <Download size={14} />
</Button>
);
} }
} }

View File

@ -22,7 +22,8 @@ export async function RunOutputs({ run_id }: { run_id: string }) {
</TableHeader> </TableHeader>
<TableBody> <TableBody>
{outputs?.map((run) => { {outputs?.map((run) => {
const fileName = run.data.images?.[0].filename; const fileName =
run.data.images?.[0].filename || run.data.files?.[0].filename;
if (!fileName) if (!fileName)
return ( return (