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

feat: update plugin js

Browse Source
This commit is contained in:
bennykok 2024-07-12 12:24:10 -07:00
parent 48d21f8d52
commit 6e4532078f
1 changed files with 55 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
web-plugin/index.js
View File

@ -19,11 +19,8 @@ function dispatchAPIEventData(data) {
// Custom parse error // Custom parse error
if (msg.error) { if (msg.error) {
let message = msg.error.message; let message = msg.error.message;
if (msg.error.details) if (msg.error.details) message += ": " + msg.error.details;
message += ": " + msg.error.details; for (const [nodeID, nodeError] of Object.entries(msg.node_errors)) {
for (const [nodeID, nodeError] of Object.entries(
msg.node_errors,
)) {
message += "\n" + nodeError.class_type + ":"; message += "\n" + nodeError.class_type + ":";
for (const errorReason of nodeError.errors) { for (const errorReason of nodeError.errors) {
message += message +=
@ -261,26 +258,49 @@ const ext = {
// const graphCanvas = document.getElementById("graph-canvas"); // const graphCanvas = document.getElementById("graph-canvas");
window.addEventListener("message", async (event) => { window.addEventListener("message", async (event) => {
// console.log("message", event);
try { try {
const message = JSON.parse(event.data); const message = JSON.parse(event.data);
if (message.type === "graph_load") { if (message.type === "graph_load") {
const comfyUIWorkflow = message.data; const comfyUIWorkflow = message.data;
console.log("recieved: ", comfyUIWorkflow); // console.log("recieved: ", comfyUIWorkflow);
// Assuming there's a method to load the workflow data into the ComfyUI // Assuming there's a method to load the workflow data into the ComfyUI
// This part of the code would depend on how the ComfyUI expects to receive and process the workflow data // This part of the code would depend on how the ComfyUI expects to receive and process the workflow data
// For demonstration, let's assume there's a loadWorkflow method in the ComfyUI API // For demonstration, let's assume there's a loadWorkflow method in the ComfyUI API
if (comfyUIWorkflow && app && app.loadGraphData) { if (comfyUIWorkflow && app && app.loadGraphData) {
console.log("loadGraphData");
app.loadGraphData(comfyUIWorkflow); app.loadGraphData(comfyUIWorkflow);
} }
} else if (message.type === "deploy") { } else if (message.type === "deploy") {
// deployWorkflow(); // deployWorkflow();
const prompt = await app.graphToPrompt(); const prompt = await app.graphToPrompt();
// api.handlePromptGenerated(prompt);
sendEventToCD("cd_plugin_onDeployChanges", prompt); sendEventToCD("cd_plugin_onDeployChanges", prompt);
} else if (message.type === "queue_prompt") { } else if (message.type === "queue_prompt") {
const prompt = await app.graphToPrompt(); const prompt = await app.graphToPrompt();
api.handlePromptGenerated(prompt);
sendEventToCD("cd_plugin_onQueuePrompt", prompt); sendEventToCD("cd_plugin_onQueuePrompt", prompt);
} else if (message.type === "get_prompt") {
const prompt = await app.graphToPrompt();
sendEventToCD("cd_plugin_onGetPrompt", prompt);
} else if (message.type === "event") { } else if (message.type === "event") {
dispatchAPIEventData(message.data); dispatchAPIEventData(message.data);
} else if (message.type === "add_node") {
console.log("add node", message.data);
app.graph.beforeChange();
var node = LiteGraph.createNode(message.data.type);
node.configure({
widgets_values: message.data.widgets_values,
});
console.log("node", node);
const graphMouse = app.canvas.graph_mouse;
node.pos = [graphMouse[0], graphMouse[1]];
app.graph.add(node);
app.graph.afterChange();
} }
// else if (message.type === "refresh") { // else if (message.type === "refresh") {
// sendEventToCD("cd_plugin_onRefresh"); // sendEventToCD("cd_plugin_onRefresh");
@ -288,10 +308,6 @@ const ext = {
} catch (error) { } catch (error) {
// console.error("Error processing message:", error); // console.error("Error processing message:", error);
} }
// if (!event.data.flow || Object.entries(event.data.flow).length <= 0)
// return;
// updateBlendshapesPrompts(event.data.flow);
}); });
api.addEventListener("executed", (evt) => { api.addEventListener("executed", (evt) => {
@ -348,10 +364,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>
`; `;
} }
@ -359,17 +375,14 @@ 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="${ <a href="${node.url
node.url }" target="_blank" style="font-size: 18px; font-weight: semibold; color: white; text-decoration: none;">${node.name
}" target="_blank" style="font-size: 18px; font-weight: semibold; color: white; text-decoration: none;">${ }</a>
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
node.warning ? `<p style="font-size: 14px; color: #d69e2e;">${node.warning}</p>`
? `<p style="font-size: 14px; color: #d69e2e;">${node.warning}</p>` : ""
: "" }
}
</div> </div>
`; `;
}); });
@ -383,9 +396,8 @@ 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;">${ <h3 style="font-size: 18px; font-weight: semibold; margin-bottom: 8px;">${section.charAt(0).toUpperCase() + section.slice(1)
section.charAt(0).toUpperCase() + section.slice(1) }</h3>`;
}</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>`;
}); });
@ -401,9 +413,8 @@ 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;">${ <h3 style="font-size: 18px; font-weight: semibold; margin-bottom: 8px;">${section.charAt(0).toUpperCase() + section.slice(1)
section.charAt(0).toUpperCase() + section.slice(1) }</h3>`;
}</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>`;
}); });
@ -826,14 +837,12 @@ 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} ${ <h3 style="margin: 0px; display: flex; align-items: center; justify-content: center; gap: 12px;">${title} ${this.loadingIcon
this.loadingIcon }</h3>
}</h3> ${message
${ ? `<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>
`); `);
} }
@ -1099,21 +1108,17 @@ 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="${ <input id="endpoint" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;" type="text" value="${data.endpoint
data.endpoint }">
}">
</label> </label>
<div style="color: white;"> <div style="color: white;">
API Key: User / Org <button style="font-size: 18px;">${ API Key: User / Org <button style="font-size: 18px;">${data.displayName ?? ""
data.displayName ?? "" }</button>
}</button> <input id="apiKey" style="margin-top: 8px; width: 100%; height:40px; box-sizing: border-box; padding: 0px 6px;" type="password" value="${data.apiKey
<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>