diff --git a/web/src/components/DeploymentDisplay.tsx b/web/src/components/DeploymentDisplay.tsx index 1369e92..023e590 100644 --- a/web/src/components/DeploymentDisplay.tsx +++ b/web/src/components/DeploymentDisplay.tsx @@ -9,6 +9,7 @@ import { } from "@/components/ui/dialog"; import { TableCell, TableRow } from "@/components/ui/table"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { getInputsFromWorkflow } from "@/lib/getInputsFromWorkflow"; import { getRelativeTime } from "@/lib/getRelativeTime"; import type { findAllDeployments } from "@/server/findAllRuns"; import { headers } from "next/headers"; @@ -29,28 +30,29 @@ curl --request GET \ `; const jsTemplate = ` -fetch('', { +const { run_id } = await fetch('', { method: 'POST', - headers: {'Content-Type': 'application/json'}, + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + process.env.COMFY_DEPLOY_API_KEY, + }, body: JSON.stringify({ deployment_id: '', + inputs: {} }), -}) - .then(response => response.json()) - .then(response => console.log(response)) - .catch(err => console.error(err)); +}).then(response => response.json()) `; const jsTemplate_checkStatus = ` const run_id = ''; -fetch('?run_id=' + run_id, { +const output = fetch('?run_id=' + run_id, { method: 'GET', - headers: {'Content-Type': 'application/json'}, -}) - .then(response => response.json()) - .then(response => console.log(response)) - .catch(err => console.error(err)); + headers: { + 'Content-Type': 'application/json', + 'Authorization': 'Bearer ' + process.env.COMFY_DEPLOY_API_KEY, + }, +}).then(response => response.json()) `; export function DeploymentDisplay({ @@ -63,6 +65,8 @@ export function DeploymentDisplay({ const protocol = headersList.get("x-forwarded-proto") || ""; const domain = `${protocol}://${host}`; + const workflowInput = getInputsFromWorkflow(deployment.version); + return ( @@ -79,7 +83,7 @@ export function DeploymentDisplay({ - + {deployment.environment} Deployment @@ -95,7 +99,7 @@ export function DeploymentDisplay({ Trigger the workflow Check the status of the run, and retrieve the outputs >[0], - domain: string + domain: string, + inputs?: ReturnType ) { + if (inputs && inputs.length > 0) { + codeTemplate = codeTemplate.replace( + "inputs: {}", + `inputs: ${JSON.stringify( + Object.fromEntries( + inputs.map((x) => { + return [x?.input_id, ""]; + }) + ), + null, + 2 + ) + .split("\n") + .map((line, index) => (index === 0 ? line : ` ${line}`)) // Add two spaces indentation except for the first line + .join("\n")}` + ); + } else { + codeTemplate = codeTemplate.replace( + ` + inputs: {}`, + "" + ); + } return codeTemplate .replace("", `${domain ?? "http://localhost:3000"}/api/run`) .replace("", deployment.id); diff --git a/web/src/components/VersionSelect.tsx b/web/src/components/VersionSelect.tsx index 26b38d9..711d4f6 100644 --- a/web/src/components/VersionSelect.tsx +++ b/web/src/components/VersionSelect.tsx @@ -1,6 +1,8 @@ "use client"; +import { getInputsFromWorkflow } from "../lib/getInputsFromWorkflow"; import { callServerPromise } from "./callServerPromise"; +import { customInputNodes } from "./customInputNodes"; import { LoadingIcon } from "@/components/LoadingIcon"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; @@ -206,10 +208,16 @@ export function CreateDeploymentButton({ ); } -const customInputNodes: Record = { - ComfyUIDeployExternalText: "string", - ComfyUIDeployExternalImage: "string - (public image url)", -}; +export function getWorkflowVersionFromVersionIndex( + workflow: Awaited>, + version: number +) { + const workflow_version = workflow?.versions.find( + (x) => x.version === version + ); + + return workflow_version; +} export function VersionDetails({ workflow, @@ -220,46 +228,46 @@ export function VersionDetails({ defaultValue: workflow?.versions[0].version ?? 1, ...parseAsInteger, }); - const workflow_version = workflow?.versions.find( - (x) => x.version === version + const workflow_version = getWorkflowVersionFromVersionIndex( + workflow, + version ); + const inputs = getInputsFromWorkflow(workflow_version); return (
Workflow Details
- {workflow_version?.workflow_api && ( + {inputs && (
- {Object.entries(workflow_version.workflow_api).map( - ([key, value]) => { - if (!value.class_type) return <> ; - const nodeType = customInputNodes[value.class_type]; - if (nodeType) { - const input_id = value.inputs.input_id; - const defaultValue = value.inputs.default_value; - return ( -
- - - -
- {input_id} - {" : "} - {nodeType} -
- - {/* {nodeType}{" "} */} - {/* */} - - - Default Value: {defaultValue} - - -
- ); - } - return <>; + {inputs.map((value) => { + if (!value.class_type) return <> ; + const nodeType = customInputNodes[value.class_type]; + if (nodeType) { + const input_id = value.input_id; + const defaultValue = value.default_value; + return ( +
+ + + +
+ {input_id} + {" : "} + {nodeType} +
+ + {/* {nodeType}{" "} */} + {/* */} + + + Default Value: {defaultValue} + + +
+ ); } - )} + return <>; + })}
)}
diff --git a/web/src/components/customInputNodes.tsx b/web/src/components/customInputNodes.tsx new file mode 100644 index 0000000..95af87f --- /dev/null +++ b/web/src/components/customInputNodes.tsx @@ -0,0 +1,4 @@ +export const customInputNodes: Record = { + ComfyUIDeployExternalText: "string", + ComfyUIDeployExternalImage: "string - (public image url)", +}; diff --git a/web/src/lib/getInputsFromWorkflow.tsx b/web/src/lib/getInputsFromWorkflow.tsx new file mode 100644 index 0000000..2f347ea --- /dev/null +++ b/web/src/lib/getInputsFromWorkflow.tsx @@ -0,0 +1,24 @@ +import type { getWorkflowVersionFromVersionIndex } from "../components/VersionSelect"; +import { customInputNodes } from "@/components/customInputNodes"; + +export function getInputsFromWorkflow( + workflow_version: ReturnType +) { + if (!workflow_version || !workflow_version.workflow_api) return null; + return Object.entries(workflow_version.workflow_api) + .map(([_, value]) => { + if (!value.class_type) return undefined; + const nodeType = customInputNodes[value.class_type]; + if (nodeType) { + const input_id = value.inputs.input_id as string; + const default_value = value.inputs.default_value as string; + return { + class_type: value.class_type, + input_id, + default_value, + }; + } + return undefined; + }) + .filter((item) => item !== undefined); +} diff --git a/web/src/server/findAllRuns.tsx b/web/src/server/findAllRuns.tsx index eeadafa..d2c187a 100644 --- a/web/src/server/findAllRuns.tsx +++ b/web/src/server/findAllRuns.tsx @@ -8,7 +8,7 @@ export async function findAllRuns(workflow_id: string) { orderBy: desc(workflowRunsTable.created_at), limit: 10, extras: { - "number": sql`row_number() over (order by created_at)`.as("number"), + number: sql`row_number() over (order by created_at)`.as("number"), }, with: { machine: { @@ -36,11 +36,7 @@ export async function findAllDeployments(workflow_id: string) { name: true, }, }, - version: { - columns: { - version: true, - }, - }, + version: true, }, }); }