mirrors/ComfyUI
1
0
Fork 0
mirror of https://github.com/comfyanonymous/ComfyUI.git synced 2025-09-13 13:05:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding built in extensions + example

Browse Source
This commit is contained in:
pythongosssss
2023-03-03 18:28:34 +00:00
parent 2e52d01cdc
commit 4ef4cf913f
8 changed files with 243 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
web/scripts/app.js
View File

@@ -7,34 +7,8 @@ import { getPngMetadata } from "./pnginfo.js";
class ComfyApp {
constructor() {
this.ui = new ComfyUI(this);
this.extensions = [];
this.nodeOutputs = {};
this.extensions = [
{
name: "TestExtension",
init(app) {
console.log("[ext:init]", app);
},
setup(app) {
console.log("[ext:setup]", app);
},
addCustomNodeDefs(defs, app) {
console.log("[ext:addCustomNodeDefs]", defs, app);
},
loadedGraphNode(node, app) {
// console.log("[ext:loadedGraphNode]", node, app);
},
getCustomWidgets(app) {
console.log("[ext:getCustomWidgets]", app);
return {};
},
beforeRegisterNode(nodeType, nodeData, app) {
// console.log("[ext:beforeRegisterNode]", nodeType, nodeData, app);
},
registerCustomNodes(app) {
console.log("[ext:registerCustomNodes]", app);
},
},
];
}
#log(message, ...other) {
@@ -49,7 +23,7 @@ class ComfyApp {
* Invoke an extension callback
* @param {string} method The extension callback to execute
* @param {...any} args Any arguments to pass to the callback
* @returns
* @returns
*/
#invokeExtensions(method, ...args) {
let results = [];
@@ -75,7 +49,7 @@ class ComfyApp {
* Each callback will be invoked concurrently
* @param {string} method The extension callback to execute
* @param {...any} args Any arguments to pass to the callback
* @returns
* @returns
*/
async #invokeExtensionsAsync(method, ...args) {
return await Promise.all(
@@ -540,6 +514,8 @@ class ComfyApp {
s[1] = Math.max(config.minHeight, s[1]);
this.size = s;
this.serialize_widgets = true;
app.#invokeExtensionsAsync("nodeCreated", this);
},
{
title: nodeData.name,
@@ -551,7 +527,7 @@ class ComfyApp {
this.#addNodeContextMenuHandler(node);
this.#addDrawBackgroundHandler(node, app);
await this.#invokeExtensionsAsync("beforeRegisterNode", node, nodeData);
await this.#invokeExtensionsAsync("beforeRegisterNodeDef", node, nodeData);
LiteGraph.registerNodeType(nodeId, node);
node.category = nodeData.category;
}
@@ -598,28 +574,55 @@ class ComfyApp {
* @returns The workflow and node links
*/
graphToPrompt() {
// TODO: Implement dynamic prompts
const workflow = this.graph.serialize();
const output = {};
for (const n of workflow.nodes) {
const inputs = {};
const node = this.graph.getNodeById(n.id);
if (node.isVirtualNode) {
// Don't serialize frontend only nodes
continue;
}
const inputs = {};
const widgets = node.widgets;
// Store all widget values
if (widgets) {
for (const widget of widgets) {
if (widget.options.serialize !== false) {
inputs[widget.name] = widget.value;
if (!widget.options || widget.options.serialize !== false) {
inputs[widget.name] = widget.serializeValue ? widget.serializeValue() : widget.value;
}
}
}
// Store all node links
for (let i in node.inputs) {
const link = node.getInputLink(i);
if (link) {
inputs[node.inputs[i].name] = [String(link.origin_id), parseInt(link.origin_slot)];
let parent = node.getInputNode(i);
if (parent) {
let link;
if (parent.isVirtualNode) {
// Follow the path of virtual nodes until we reach the first real one
while (parent != null) {
link = parent.getInputLink(0);
if (link) {
const from = graph.getNodeById(link.origin_id);
if (from.isVirtualNode) {
parent = from;
} else {
parent = null;
}
} else {
parent = null;
}
}
} else {
link = node.getInputLink(i);
}
if (link) {
inputs[node.inputs[i].name] = [String(link.origin_id), parseInt(link.origin_slot)];
}
}
}
@@ -655,15 +658,13 @@ class ComfyApp {
}
}
// TODO: check dynamic prompts here
this.canvas.draw(true, true);
await this.ui.queue.update();
}
/**
* Loads workflow data from the specified file
* @param {File} file
* @param {File} file
*/
async handleFile(file) {
if (file.type === "image/png") {
@@ -679,6 +680,16 @@ class ComfyApp {
reader.readAsText(file);
}
}
registerExtension(extension) {
if (!extension.name) {
throw new Error("Extensions must have a 'name' property.");
}
if (this.extensions.find((ext) => ext.name === extension.name)) {
throw new Error(`Extension named '${extension.name}' already registered.`);
}
this.extensions.push(extension);
}
}
export const app = new ComfyApp();

9
web/scripts/extensions.js
View File

@@ -1,9 +0,0 @@
export class ComfyExtension {
init(app) {}
setup(app) {}
loadedGraphNode(node, app) {}
addCustomNodeDefs(defs, app) {}
getCustomWidgets(app) {}
beforeRegisterNode(nodeType, nodeData, app) {}
registerCustomNodes(app) {}
}

10
web/scripts/widgets.js
View File

@@ -27,7 +27,7 @@ function seedWidget(node, inputName, inputData) {
return { widget: seed, randomize };
}
function addMultilineWidget(node, name, defaultVal, dynamicPrompt, app) {
function addMultilineWidget(node, name, defaultVal, app) {
const widget = {
type: "customtext",
name,
@@ -37,9 +37,6 @@ function addMultilineWidget(node, name, defaultVal, dynamicPrompt, app) {
set value(x) {
this.inputEl.value = x;
},
options: {
dynamicPrompt,
},
draw: function (ctx, _, widgetWidth, y, widgetHeight) {
const visible = app.canvas.ds.scale > 0.5;
const t = ctx.getTransform();
@@ -106,12 +103,11 @@ export const ComfyWidgets = {
STRING(node, inputName, inputData, app) {
const defaultVal = inputData[1].default || "";
const multiline = !!inputData[1].multiline;
const dynamicPrompt = !!inputData[1].dynamic_prompt;
if (multiline) {
return addMultilineWidget(node, inputName, defaultVal, dynamicPrompt, app);
return addMultilineWidget(node, inputName, defaultVal, app);
} else {
return { widget: node.addWidget("text", inputName, defaultVal, () => {}, { dynamicPrompt }) };
return { widget: node.addWidget("text", inputName, defaultVal, () => {}, {}) };
}
},
};