From 23db3c1a45bcf730ba82fd288883d360b2b048d8 Mon Sep 17 00:00:00 2001 From: BennyKok Date: Fri, 15 Dec 2023 16:16:35 +0800 Subject: [PATCH] feat: add update failed display when the graph execution error --- routes.py | 9 ++++++ web/src/app/globals.css | 2 +- web/src/components/CodeBlock.tsx | 4 +-- web/src/components/LiveStatus.tsx | 41 ++++++++++++++++++++++++++ web/src/components/RunDisplay.tsx | 48 ++++++++++++------------------- web/src/components/RunOutputs.tsx | 48 ++++++++++++++++++++----------- web/src/server/createRun.ts | 2 ++ web/src/server/getRunsOutput.tsx | 5 ++++ 8 files changed, 110 insertions(+), 49 deletions(-) create mode 100644 web/src/components/LiveStatus.tsx diff --git a/routes.py b/routes.py index 7c9c1d7..8a5b1a3 100644 --- a/routes.py +++ b/routes.py @@ -162,6 +162,10 @@ async def send_json_override(self, event, data, sid=None): if event == 'executing' and data.get('node') is None: update_run(prompt_id, Status.SUCCESS) + if event == 'execution_error': + update_run(prompt_id, Status.FAILED) + asyncio.create_task(update_run_with_output(prompt_id, data)) + if event == 'executed' and 'node' in data and 'output' in data: asyncio.create_task(update_run_with_output(prompt_id, data.get('output'))) # update_run_with_output(prompt_id, data.get('output')) @@ -178,6 +182,11 @@ def update_run(prompt_id, status: Status): return if ('status' not in prompt_metadata[prompt_id] or prompt_metadata[prompt_id]['status'] != status): + + # when the status is already failed, we don't want to update it to success + if ('status' in prompt_metadata[prompt_id] and prompt_metadata[prompt_id]['status'] == Status.FAILED): + return + status_endpoint = prompt_metadata[prompt_id]['status_endpoint'] body = { "run_id": prompt_id, diff --git a/web/src/app/globals.css b/web/src/app/globals.css index d3f4ab8..1d95465 100644 --- a/web/src/app/globals.css +++ b/web/src/app/globals.css @@ -75,7 +75,7 @@ .shiki { /* @apply rounded-lg p-2 overflow-x-scroll */ - @apply rounded-lg p-2 overflow-hidden + @apply p-2 max-w-full overflow-auto w-full } @layer base { diff --git a/web/src/components/CodeBlock.tsx b/web/src/components/CodeBlock.tsx index 9989f76..ac0bf4b 100644 --- a/web/src/components/CodeBlock.tsx +++ b/web/src/components/CodeBlock.tsx @@ -8,12 +8,12 @@ export async function CodeBlock(props: { code: string; lang: Lang }) { }); return ( -
+
{/* max-w-[calc(32rem-1.5rem-1.5rem)] */} {/*
*/}

>[0]; +}) { + const data = useStore( + (state) => + state.data + .filter((x) => x.id === run.id) + .sort((a, b) => b.timestamp - a.timestamp)?.[0] + ); + + let status = run.status; + + // const [view, setView] = useState(); + if (data?.json.event == "executing" && data.json.data.node == undefined) { + status = "success"; + } else if (data?.json.event == "executing") { + status = "running"; + } + + return ( + <> + + {data && status != "success" + ? `${data.json.event} - ${data.json.data.node}` + : "-"} + + + + + + ); +} diff --git a/web/src/components/RunDisplay.tsx b/web/src/components/RunDisplay.tsx index 9b3d723..f9b7704 100644 --- a/web/src/components/RunDisplay.tsx +++ b/web/src/components/RunDisplay.tsx @@ -1,8 +1,6 @@ "use client"; -import { RunOutputs } from "./RunOutputs"; -import { useStore } from "@/components/MachinesWS"; -import { StatusBadge } from "@/components/StatusBadge"; +import { LiveStatus } from "./LiveStatus"; import { Dialog, DialogContent, @@ -14,52 +12,44 @@ import { import { TableCell, TableRow } from "@/components/ui/table"; import { getRelativeTime } from "@/lib/getRelativeTime"; import { type findAllRuns } from "@/server/findAllRuns"; +import { getRunsOutputDisplay } from "@/server/getRunsOutput"; +import { useState } from "react"; export function RunDisplay({ run, }: { run: Awaited>[0]; }) { - const data = useStore( - (state) => - state.data - .filter((x) => x.id === run.id) - .sort((a, b) => b.timestamp - a.timestamp)?.[0] - ); - - let status = run.status; - - if (data?.json.event == "executing" && data.json.data.node == undefined) { - status = "success"; - } else if (data?.json.event == "executing") { - status = "running"; - } - + const [view, setView] = useState(); return (

- + { + if (view) return; + const _view = await getRunsOutputDisplay(run.id); + setView(_view); + }} + > {run.version?.version} {run.machine?.name} {getRelativeTime(run.created_at)} - - {data && status != "success" - ? `${data.json.event} - ${data.json.data.node}` - : "-"} - - - - + - + Run outputs You can view your run's outputs here - + {/* + + */} + {view} ); diff --git a/web/src/components/RunOutputs.tsx b/web/src/components/RunOutputs.tsx index 0e8874c..1368aa1 100644 --- a/web/src/components/RunOutputs.tsx +++ b/web/src/components/RunOutputs.tsx @@ -1,7 +1,5 @@ -"use client"; - import { OutputRender } from "./RunDisplay"; -import { callServerPromise } from "@/components/MachineList"; +import { CodeBlock } from "@/components/CodeBlock"; import { Table, TableBody, @@ -11,22 +9,24 @@ import { TableRow, } from "@/components/ui/table"; import { getRunsOutput } from "@/server/getRunsOutput"; -import { useEffect, useState } from "react"; -export function RunOutputs({ run_id }: { run_id: string }) { - const [outputs, setOutputs] = - useState>>(); +export async function RunOutputs({ run_id }: { run_id: string }) { + const outputs = await getRunsOutput(run_id); + console.log("Getting runs out put"); - useEffect(() => { - if (!run_id) return; - // fetch(`/api/run?run_id=${run_id}`) - // .then((x) => x.json()) - // .then((x) => setOutputs(x)); - callServerPromise(getRunsOutput(run_id).then((x) => setOutputs(x))); - }, [run_id]); + // const [outputs, setOutputs] = + // useState>>(); + + // useEffect(() => { + // if (!run_id) return; + // // fetch(`/api/run?run_id=${run_id}`) + // // .then((x) => x.json()) + // // .then((x) => setOutputs(x)); + // callServerPromise(getRunsOutput(run_id).then((x) => setOutputs(x))); + // }, [run_id]); return ( - +
{/* A list of your recent runs. */} @@ -36,11 +36,25 @@ export function RunOutputs({ run_id }: { run_id: string }) { {outputs?.map((run) => { - const fileName = run.data.images[0].filename; + const fileName = run.data.images?.[0].filename; + + if (!fileName) + return ( + + Output + + + + + ); + // const filePath return ( - {fileName} + {fileName} diff --git a/web/src/server/createRun.ts b/web/src/server/createRun.ts index a9c88f3..d17c79b 100644 --- a/web/src/server/createRun.ts +++ b/web/src/server/createRun.ts @@ -60,6 +60,8 @@ export async function createRun( } } + console.log(workflow_api); + // Sending to comfyui const result = await fetch(comfyui_endpoint, { method: "POST", diff --git a/web/src/server/getRunsOutput.tsx b/web/src/server/getRunsOutput.tsx index 79d0210..e6b0069 100644 --- a/web/src/server/getRunsOutput.tsx +++ b/web/src/server/getRunsOutput.tsx @@ -1,9 +1,14 @@ "use server"; +import { RunOutputs } from "@/components/RunOutputs"; import { db } from "@/db/db"; import { workflowRunOutputs, workflowRunsTable } from "@/db/schema"; import { eq } from "drizzle-orm"; +export async function getRunsOutputDisplay(run_id: string) { + return ; +} + export async function getRunsOutput(run_id: string) { // throw new Error("Not implemented"); return await db