feat(plugin): update comfyui json version, add missing nodes display

This commit is contained in:
bennykok 2024-02-08 22:54:37 +08:00
parent 7e86c20383
commit 5ddbfdf44b

View File

@ -1,7 +1,7 @@
import { app } from "./app.js"; import { app } from "./app.js";
import { api } from "./api.js"; import { api } from "./api.js";
import { ComfyWidgets, LGraphNode } from "./widgets.js"; import { ComfyWidgets, LGraphNode } from "./widgets.js";
import { generateDependencyGraph } from "https://esm.sh/comfyui-json@0.1.9"; import { generateDependencyGraph } from "https://esm.sh/comfyui-json@0.1.14";
/** @typedef {import('../../../web/types/comfy.js').ComfyExtension} ComfyExtension*/ /** @typedef {import('../../../web/types/comfy.js').ComfyExtension} ComfyExtension*/
/** @type {ComfyExtension} */ /** @type {ComfyExtension} */
@ -184,12 +184,28 @@ function createDynamicUIHtml(data) {
let html = let html =
'<div style="max-width: 1024px; margin: 14px auto; display: flex; flex-direction: column; gap: 24px;">'; '<div style="max-width: 1024px; margin: 14px auto; display: flex; flex-direction: column; gap: 24px;">';
const bgcolor = "var(--comfy-input-bg)"; const bgcolor = "var(--comfy-input-bg)";
const evenBg = "var(--border-color)";
const textColor = "var(--input-text)"; const textColor = "var(--input-text)";
// Custom Nodes // Custom Nodes
html += `<div style="background-color: ${bgcolor}; padding: 24px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">`; html += `<div style="background-color: ${bgcolor}; padding: 24px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">`;
html += html +=
'<h2 style="margin-top: 0px; font-size: 24px; font-weight: bold; margin-bottom: 16px;">Custom Nodes</h2>'; '<h2 style="margin-top: 0px; font-size: 24px; font-weight: bold; margin-bottom: 16px;">Custom Nodes</h2>';
if (data.missing_nodes?.length > 0) {
html += `
<div style="border-bottom: 1px solid #e2e8f0; padding: 4px 12px; background-color: ${evenBg}">
<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>
${data.missing_nodes
.map((node) => {
return `<p style="font-size: 14px; color: #d69e2e;">${node}</p>`;
})
.join("")}
</div>
`;
}
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;">
@ -346,10 +362,10 @@ function addButton() {
"Generating dependency graph", "Generating dependency graph",
"Please wait...", "Please wait...",
); );
deps = await generateDependencyGraph( deps = await generateDependencyGraph({
prompt.output, workflow_api: prompt.output,
snapshot, snapshot: snapshot,
async (file) => { computeFileHash: async (file) => {
console.log(file); console.log(file);
loadingDialog.showLoading("Generating hash", file); loadingDialog.showLoading("Generating hash", file);
const hash = await fetch( const hash = await fetch(
@ -361,7 +377,7 @@ function addButton() {
console.log(hash); console.log(hash);
return hash.file_hash; return hash.file_hash;
}, },
async (file, hash, prevhash) => { handleFileUpload: async (file, hash, prevhash) => {
console.log("Uploading ", file); console.log("Uploading ", file);
loadingDialog.showLoading("Uploading file", file); loadingDialog.showLoading("Uploading file", file);
try { try {
@ -388,8 +404,8 @@ function addButton() {
return undefined; return undefined;
} }
}, },
existing_workflow.dependencies, existingDependencies: existing_workflow.dependencies,
); });
loadingDialog.close(); loadingDialog.close();