feat: add deployment endpoint

web/src/app/[workflow_id]/page.tsx

@@ -1,7 +1,8 @@
-import { RunsTable } from "../../components/RunsTable";
+import { DeploymentsTable, RunsTable } from "../../components/RunsTable";
 import { findFirstTableWithVersion } from "../../server/findFirstTableWithVersion";
 import { MachinesWSMain } from "@/components/MachinesWS";
 import {
+  CreateDeploymentButton,
   MachineSelect,
   RunWorkflowButton,
   VersionSelect,
@@ -28,24 +29,36 @@ export default async function Page({
 
   return (
     <div className="mt-4 w-full flex flex-col lg:flex-row gap-4 max-h-[calc(100dvh-100px)]">
-      <Card className="w-full lg:w-fit lg:min-w-[500px] h-fit">
-        <CardHeader>
-          <CardTitle>{workflow?.name}</CardTitle>
-          <CardDescription suppressHydrationWarning={true}>
-            {getRelativeTime(workflow?.updated_at)}
-          </CardDescription>
-        </CardHeader>
+      <div className="flex gap-4 flex-col">
+        <Card className="w-full lg:w-fit lg:min-w-[500px] h-fit">
+          <CardHeader>
+            <CardTitle>{workflow?.name}</CardTitle>
+            <CardDescription suppressHydrationWarning={true}>
+              {getRelativeTime(workflow?.updated_at)}
+            </CardDescription>
+          </CardHeader>
 
-        <CardContent>
-          <div className="flex gap-2 ">
-            <VersionSelect workflow={workflow} />
-            <MachineSelect machines={machines} />
-            <RunWorkflowButton workflow={workflow} machines={machines} />
-          </div>
+          <CardContent>
+            <div className="flex gap-2 ">
+              <VersionSelect workflow={workflow} />
+              <MachineSelect machines={machines} />
+              <RunWorkflowButton workflow={workflow} machines={machines} />
+              <CreateDeploymentButton workflow={workflow} machines={machines} />
+            </div>
 
-          <MachinesWSMain machines={machines} />
-        </CardContent>
-      </Card>
+            <MachinesWSMain machines={machines} />
+          </CardContent>
+        </Card>
+        <Card className="w-full ">
+          <CardHeader>
+            <CardTitle>Deployments</CardTitle>
+          </CardHeader>
+
+          <CardContent>
+            <DeploymentsTable workflow_id={workflow_id} />
+          </CardContent>
+        </Card>
+      </div>
 
       <Card className="w-full ">
         <CardHeader>

web/src/app/api/create-run/route.ts

@@ -1,45 +0,0 @@
-import { parseDataSafe } from "../../../lib/parseDataSafe";
-import { createRun } from "../../../server/createRun";
-import { NextResponse } from "next/server";
-import { z } from "zod";
-
-const Request = z.object({
-  workflow_version_id: z.string(),
-  // workflow_version: z.number().optional(),
-  machine_id: z.string(),
-});
-
-export async function POST(request: Request) {
-  const [data, error] = await parseDataSafe(Request, request);
-  if (!data || error) return error;
-
-  const origin = new URL(request.url).origin;
-
-  const { workflow_version_id, machine_id } = data;
-
-  try {
-    const workflow_run_id = await createRun(
-      origin,
-      workflow_version_id,
-      machine_id
-    );
-
-    return NextResponse.json(
-      {
-        workflow_run_id: workflow_run_id,
-      },
-      {
-        status: 200,
-      }
-    );
-  } catch (error: any) {
-    return NextResponse.json(
-      {
-        error: error.message,
-      },
-      {
-        status: 500,
-      }
-    );
-  }
-}

web/src/app/api/run/route.ts

@@ -0,0 +1,84 @@
+import { parseDataSafe } from "../../../lib/parseDataSafe";
+import { createRun } from "../../../server/createRun";
+import { db } from "@/db/db";
+import { deploymentsTable } from "@/db/schema";
+import { getRunsData } from "@/server/getRunsOutput";
+import { replaceCDNUrl } from "@/server/resource";
+import { eq } from "drizzle-orm";
+import { NextResponse } from "next/server";
+import { z } from "zod";
+
+const Request = z.object({
+  deployment_id: z.string(),
+});
+
+const Request2 = z.object({
+  run_id: z.string(),
+});
+
+export async function GET(request: Request) {
+  const [data, error] = await parseDataSafe(Request2, request);
+  if (!data || error) return error;
+
+  const run = await getRunsData(data.run_id);
+
+  if (run?.status === "success" && run?.outputs?.length > 0) {
+    for (let i = 0; i < run.outputs.length; i++) {
+      const output = run.outputs[i];
+
+      if (output.data?.images === undefined) continue;
+
+      for (let j = 0; j < output.data?.images.length; j++) {
+        const element = output.data?.images[j];
+        element.url = replaceCDNUrl(
+          `${process.env.SPACES_ENDPOINT}/comfyui-deploy/outputs/runs/${run.id}/${element.filename}`
+        );
+      }
+    }
+  }
+
+  return NextResponse.json(run, {
+    status: 200,
+  });
+}
+
+export async function POST(request: Request) {
+  const [data, error] = await parseDataSafe(Request, request);
+  if (!data || error) return error;
+
+  const origin = new URL(request.url).origin;
+
+  const { deployment_id } = data;
+
+  try {
+    const deploymentData = await db.query.deploymentsTable.findFirst({
+      where: eq(deploymentsTable.id, deployment_id),
+    });
+
+    if (!deploymentData) throw new Error("Deployment not found");
+
+    const run_id = await createRun(
+      origin,
+      deploymentData.workflow_version_id,
+      deploymentData.machine_id
+    );
+
+    return NextResponse.json(
+      {
+        run_id: run_id,
+      },
+      {
+        status: 200,
+      }
+    );
+  } catch (error: any) {
+    return NextResponse.json(
+      {
+        error: error.message,
+      },
+      {
+        status: 500,
+      }
+    );
+  }
+}

web/src/app/globals.css

@@ -65,6 +65,18 @@
     --ring: 212.7 26.8% 83.9%;
   }
 }
+
+.shiki>code>span {
+  /* text-wrap: wrap; */
+  /* word-wrap: break-word; */
+  /* @apply break-all ; */
+  text-wrap: wrap;
+}
+
+.shiki {
+  /* @apply rounded-lg p-2 overflow-x-scroll */
+  @apply rounded-lg p-2 overflow-hidden
+}
  
 @layer base {
   * {