chunzhi/comfyui-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add native run proxy

Browse Source
This commit is contained in:
bennykok 2024-09-23 15:31:13 -07:00
parent aea456cba9
commit 3a6c3b1ae9
2 changed files with 128 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
custom_routes.py
View File

@ -193,6 +193,9 @@ bypass_upload = os.environ.get('CD_BYPASS_UPLOAD', 'false').lower() == 'true'
logger.info(f"CD_BYPASS_UPLOAD {bypass_upload}") logger.info(f"CD_BYPASS_UPLOAD {bypass_upload}")
create_native_run_endpoint = None
status_endpoint = None
file_upload_endpoint = None
def clear_current_prompt(sid): def clear_current_prompt(sid):
prompt_server = server.PromptServer.instance prompt_server = server.PromptServer.instance
@ -367,11 +370,39 @@ def send_prompt(sid: str, inputs: StreamingPrompt):
logger.info(f"error: {error_type}, {e}") logger.info(f"error: {error_type}, {e}")
logger.info(f"stack trace: {stack_trace_short}") logger.info(f"stack trace: {stack_trace_short}")
# # Add custom logic here
# if 'prompt_id' in response:
# prompt_id = response['prompt_id']
# if prompt_id in prompt_metadata:
# metadata = prompt_metadata[prompt_id]
# # Add additional information to the response
# response['status_endpoint'] = metadata.status_endpoint
# response['file_upload_endpoint'] = metadata.file_upload_endpoint
return response
@server.PromptServer.instance.routes.post("/comfyui-deploy/run") @server.PromptServer.instance.routes.post("/comfyui-deploy/run")
async def comfy_deploy_run(request): async def comfy_deploy_run(request):
# Extract the bearer token from the Authorization header # Extract the bearer token from the Authorization header
data = await request.json() data = await request.json()
client_id = data.get("client_id")
# We proxy the request to Comfy Deploy, this is a native run
if "is_native_run" in data:
async with aiohttp.ClientSession() as session:
pprint(data)
# headers = request.headers.copy()
# headers['Content-Type'] = 'application/json'
async with session.post(data.get("native_run_api_endpoint"), json=data, headers={
'Content-Type': 'application/json',
'Authorization': request.headers.get('Authorization')
}) as response:
data = await response.json()
print(data)
if "cd_token" in data: if "cd_token" in data:
token = data["cd_token"] token = data["cd_token"]
else: else:
@ -394,7 +425,7 @@ async def comfy_deploy_run(request):
prompt = { prompt = {
"prompt": workflow_api, "prompt": workflow_api,
"client_id": "comfy_deploy_instance", #api.client_id "client_id": "comfy_deploy_instance" if client_id is None else client_id,
"prompt_id": prompt_id, "prompt_id": prompt_id,
} }

133
web-plugin/index.js
View File

@ -83,6 +83,21 @@ function dispatchAPIEventData(data) {
} }
} }
let selectedWorkflowInfo
// let selectedWorkflowInfo = {
// workflow_id: "05da8f2b-63af-4c0c-86dd-08d01ec512b7",
// machine_id: "45ac5f85-b7b6-436f-8d97-2383b25485f3",
// native_run_api_endpoint: "http://localhost:3011/api/run",
// };
function getSelectedWorkflowInfo() {
return selectedWorkflowInfo;
}
function setSelectedWorkflowInfo(info) {
selectedWorkflowInfo = info;
}
/** @typedef {import('../../../web/types/comfy.js').ComfyExtension} ComfyExtension*/ /** @typedef {import('../../../web/types/comfy.js').ComfyExtension} ComfyExtension*/
/** @type {ComfyExtension} */ /** @type {ComfyExtension} */
const ext = { const ext = {
@ -213,7 +228,7 @@ const ext = {
(v) => { (v) => {
this.properties.workflow_name = v; this.properties.workflow_name = v;
}, },
{ multiline: false } { multiline: false },
); );
this.addWidget( this.addWidget(
@ -223,7 +238,7 @@ const ext = {
(v) => { (v) => {
this.properties.workflow_id = v; this.properties.workflow_id = v;
}, },
{ multiline: false } { multiline: false },
); );
this.addWidget( this.addWidget(
@ -233,7 +248,7 @@ const ext = {
(v) => { (v) => {
this.properties.version = v; this.properties.version = v;
}, },
{ multiline: false } { multiline: false },
); );
this.widgets_start_y = 10; this.widgets_start_y = 10;
@ -270,11 +285,14 @@ const ext = {
} }
// Register the node type // Register the node type
LiteGraph.registerNodeType("ComfyDeploy", Object.assign(ComfyDeploy, { LiteGraph.registerNodeType(
title: "Comfy Deploy", "ComfyDeploy",
title_mode: LiteGraph.NORMAL_TITLE, Object.assign(ComfyDeploy, {
collapsable: true, title: "Comfy Deploy",
})); title_mode: LiteGraph.NORMAL_TITLE,
collapsable: true,
}),
);
ComfyDeploy.category = "deploy"; ComfyDeploy.category = "deploy";
}, },
@ -380,6 +398,8 @@ const ext = {
} }
animate(); animate();
} else if (message.type === "workflow_info") {
setSelectedWorkflowInfo(message.data);
} }
// else if (message.type === "refresh") { // else if (message.type === "refresh") {
// sendEventToCD("cd_plugin_onRefresh"); // sendEventToCD("cd_plugin_onRefresh");
@ -443,10 +463,10 @@ function createDynamicUIHtml(data) {
<h3 style="font-size: 14px; font-weight: semibold; margin-bottom: 8px;">Missing Nodes</h3> <h3 style="font-size: 14px; font-weight: semibold; margin-bottom: 8px;">Missing Nodes</h3>
<p style="font-size: 12px;">These nodes are not found with any matching custom_nodes in the ComfyUI Manager Database</p> <p style="font-size: 12px;">These nodes are not found with any matching custom_nodes in the ComfyUI Manager Database</p>
${data.missing_nodes ${data.missing_nodes
.map((node) => { .map((node) => {
return `<p style="font-size: 14px; color: #d69e2e;">${node}</p>`; return `<p style="font-size: 14px; color: #d69e2e;">${node}</p>`;
}) })
.join("")} .join("")}
</div> </div>
`; `;
} }
@ -454,14 +474,17 @@ function createDynamicUIHtml(data) {
Object.values(data.custom_nodes).forEach((node) => { Object.values(data.custom_nodes).forEach((node) => {
html += ` html += `
<div style="border-bottom: 1px solid #e2e8f0; padding-top: 16px;"> <div style="border-bottom: 1px solid #e2e8f0; padding-top: 16px;">
<a href="${node.url <a href="${
}" target="_blank" style="font-size: 18px; font-weight: semibold; color: white; text-decoration: none;">${node.name node.url
}</a> }" target="_blank" style="font-size: 18px; font-weight: semibold; color: white; text-decoration: none;">${
node.name
}</a>
<p style="font-size: 14px; color: #4b5563;">${node.hash}</p> <p style="font-size: 14px; color: #4b5563;">${node.hash}</p>
${node.warning ${
? `<p style="font-size: 14px; color: #d69e2e;">${node.warning}</p>` node.warning
: "" ? `<p style="font-size: 14px; color: #d69e2e;">${node.warning}</p>`
} : ""
}
</div> </div>
`; `;
}); });
@ -475,8 +498,9 @@ function createDynamicUIHtml(data) {
Object.entries(data.models).forEach(([section, items]) => { Object.entries(data.models).forEach(([section, items]) => {
html += ` html += `
<div style="border-bottom: 1px solid #e2e8f0; padding-top: 8px; padding-bottom: 8px;"> <div style="border-bottom: 1px solid #e2e8f0; padding-top: 8px; padding-bottom: 8px;">
<h3 style="font-size: 18px; font-weight: semibold; margin-bottom: 8px;">${section.charAt(0).toUpperCase() + section.slice(1) <h3 style="font-size: 18px; font-weight: semibold; margin-bottom: 8px;">${
}</h3>`; section.charAt(0).toUpperCase() + section.slice(1)
}</h3>`;
items.forEach((item) => { items.forEach((item) => {
html += `<p style="font-size: 14px; color: ${textColor};">${item.name}</p>`; html += `<p style="font-size: 14px; color: ${textColor};">${item.name}</p>`;
}); });
@ -492,8 +516,9 @@ function createDynamicUIHtml(data) {
Object.entries(data.files).forEach(([section, items]) => { Object.entries(data.files).forEach(([section, items]) => {
html += ` html += `
<div style="border-bottom: 1px solid #e2e8f0; padding-top: 8px; padding-bottom: 8px;"> <div style="border-bottom: 1px solid #e2e8f0; padding-top: 8px; padding-bottom: 8px;">
<h3 style="font-size: 18px; font-weight: semibold; margin-bottom: 8px;">${section.charAt(0).toUpperCase() + section.slice(1) <h3 style="font-size: 18px; font-weight: semibold; margin-bottom: 8px;">${
}</h3>`; section.charAt(0).toUpperCase() + section.slice(1)
}</h3>`;
items.forEach((item) => { items.forEach((item) => {
html += `<p style="font-size: 14px; color: ${textColor};">${item.name}</p>`; html += `<p style="font-size: 14px; color: ${textColor};">${item.name}</p>`;
}); });
@ -1013,12 +1038,14 @@ export class LoadingDialog extends ComfyDialog {
showLoading(title, message) { showLoading(title, message) {
this.show(` this.show(`
<div style="width: 400px; display: flex; gap: 18px; flex-direction: column; overflow: unset"> <div style="width: 400px; display: flex; gap: 18px; flex-direction: column; overflow: unset">
<h3 style="margin: 0px; display: flex; align-items: center; justify-content: center; gap: 12px;">${title} ${this.loadingIcon <h3 style="margin: 0px; display: flex; align-items: center; justify-content: center; gap: 12px;">${title} ${
}</h3> this.loadingIcon
${message }</h3>
? `<label style="max-width: 100%; white-space: pre-wrap; word-wrap: break-word;">${message}</label>` ${
: "" message
} ? `<label style="max-width: 100%; white-space: pre-wrap; word-wrap: break-word;">${message}</label>`
: ""
}
</div> </div>
`); `);
} }
@ -1284,17 +1311,21 @@ export class ConfigDialog extends ComfyDialog {
</label> </label>
<label style="color: white; width: 100%;"> <label style="color: white; width: 100%;">
Endpoint: Endpoint:
<input id="endpoint" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;" type="text" value="${data.endpoint <input id="endpoint" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;" type="text" value="${
}"> data.endpoint
}">
</label> </label>
<div style="color: white;"> <div style="color: white;">
API Key: User / Org <button style="font-size: 18px;">${data.displayName ?? "" API Key: User / Org <button style="font-size: 18px;">${
}</button> data.displayName ?? ""
<input id="apiKey" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;" type="password" value="${data.apiKey }</button>
}"> <input id="apiKey" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;" type="password" value="${
data.apiKey
}">
<button id="loginButton" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;"> <button id="loginButton" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;">
${data.apiKey ? "Re-login with ComfyDeploy" : "Login with ComfyDeploy" ${
} data.apiKey ? "Re-login with ComfyDeploy" : "Login with ComfyDeploy"
}
</button> </button>
</div> </div>
</div> </div>
@ -1483,3 +1514,31 @@ async function loadWorkflowApi(versionId) {
// Show an error message to the user // Show an error message to the user
} }
} }
const orginal_fetch_api = api.fetchApi;
api.fetchApi = async (route, options) => {
console.log("Fetch API called with args:", route, options);
const info = getSelectedWorkflowInfo();
if (info && route.startsWith("/prompt")) {
console.log("Prompt API called");
const body = JSON.parse(options.body);
return await fetch("/comfyui-deploy/run", {
method: "POST",
headers: {
Authorization: `Bearer ${getData().apiKey}`,
"Content-Type": "application/json",
},
body: JSON.stringify({
client_id: body.client_id,
workflow_api_json: body.prompt,
is_native_run: true,
...info,
}),
});
}
return await orginal_fetch_api.call(api, route, options);
};