diff --git a/.gitignore b/.gitignore
index 7961356d8b25..6da32900f74a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,3 +4,4 @@ output/
models/checkpoints
models/vae
models/embeddings
+models/loras
diff --git a/nodes.py b/nodes.py
index e5800d0d6d37..4efd826ee2ae 100644
--- a/nodes.py
+++ b/nodes.py
@@ -53,7 +53,7 @@ def interrupt_processing(value=True):
class CLIPTextEncode:
@classmethod
def INPUT_TYPES(s):
- return {"required": {"text": ("STRING", {"multiline": True, "dynamic_prompt": True}), "clip": ("CLIP", )}}
+ return {"required": {"text": ("STRING", {"multiline": True}), "clip": ("CLIP", )}}
RETURN_TYPES = ("CONDITIONING",)
FUNCTION = "encode"
diff --git a/server.py b/server.py
index 307352fe9aa1..64b2f70aa856 100644
--- a/server.py
+++ b/server.py
@@ -5,6 +5,7 @@
import execution
import uuid
import json
+import glob
try:
import aiohttp
@@ -16,8 +17,12 @@
print("pip install -r requirements.txt")
sys.exit()
+import mimetypes;
+
class PromptServer():
def __init__(self, loop):
+ mimetypes.init();
+ mimetypes.types_map['.js'] = 'application/javascript; charset=utf-8'
self.prompt_queue = None
self.loop = loop
self.messages = asyncio.Queue()
@@ -25,7 +30,7 @@ def __init__(self, loop):
self.app = web.Application()
self.sockets = dict()
self.web_root = os.path.join(os.path.dirname(
- os.path.realpath(__file__)), "webshit")
+ os.path.realpath(__file__)), "web")
routes = web.RouteTableDef()
@routes.get('/ws')
@@ -48,6 +53,11 @@ async def websocket_handler(request):
async def get_root(request):
return web.FileResponse(os.path.join(self.web_root, "index.html"))
+ @routes.get("/extensions")
+ async def get_extensions(request):
+ files = glob.glob(os.path.join(self.web_root, 'extensions/**/*.js'), recursive=True)
+ return web.json_response(list(map(lambda f: "/" + os.path.relpath(f, self.web_root).replace("\\", "/"), files)))
+
@routes.get("/view/{file}")
async def view_image(request):
if "file" in request.match_info:
diff --git a/web/extensions/core/dynamicPrompts.js b/web/extensions/core/dynamicPrompts.js
new file mode 100644
index 000000000000..8528201d31e8
--- /dev/null
+++ b/web/extensions/core/dynamicPrompts.js
@@ -0,0 +1,40 @@
+import { app } from "../../scripts/app.js";
+
+// Allows for simple dynamic prompt replacement
+// Inputs in the format {a|b} will have a random value of a or b chosen when the prompt is queued.
+
+app.registerExtension({
+ name: "Comfy.DynamicPrompts",
+ nodeCreated(node) {
+ if (node.widgets) {
+ // Locate dynamic prompt text widgets
+ // Include any widgets with dynamicPrompts set to true, and customtext
+ const widgets = node.widgets.filter(
+ (n) => (n.type === "customtext" && n.dynamicPrompts !== false) || n.dynamicPrompts
+ );
+ for (const widget of widgets) {
+ // Override the serialization of the value to resolve dynamic prompts for all widgets supporting it in this node
+ widget.serializeValue = (workflowNode, widgetIndex) => {
+ let prompt = widget.value;
+ while (prompt.replace("\\{", "").includes("{") && prompt.replace("\\}", "").includes("}")) {
+ const startIndex = prompt.replace("\\{", "00").indexOf("{");
+ const endIndex = prompt.replace("\\}", "00").indexOf("}");
+
+ const optionsString = prompt.substring(startIndex + 1, endIndex);
+ const options = optionsString.split("|");
+
+ const randomIndex = Math.floor(Math.random() * options.length);
+ const randomOption = options[randomIndex];
+
+ prompt = prompt.substring(0, startIndex) + randomOption + prompt.substring(endIndex + 1);
+ }
+
+ // Overwrite the value in the serialized workflow pnginfo
+ workflowNode.widgets_values[widgetIndex] = prompt;
+
+ return prompt;
+ };
+ }
+ }
+ },
+});
diff --git a/web/extensions/core/rerouteNode.js b/web/extensions/core/rerouteNode.js
new file mode 100644
index 000000000000..bdc7306b037b
--- /dev/null
+++ b/web/extensions/core/rerouteNode.js
@@ -0,0 +1,93 @@
+import { app } from "../../scripts/app.js";
+
+// Node that allows you to redirect connections for cleaner graphs
+
+app.registerExtension({
+ name: "Comfy.RerouteNode",
+ registerCustomNodes() {
+ class RerouteNode {
+ constructor() {
+ if (!this.properties) {
+ this.properties = {};
+ }
+ this.properties.showOutputText = RerouteNode.defaultVisibility;
+
+ this.addInput("", "*");
+ this.addOutput(this.properties.showOutputText ? "*" : "", "*");
+ this.onConnectInput = function (_, type) {
+ if (type !== this.outputs[0].type) {
+ this.removeOutput(0);
+ this.addOutput(this.properties.showOutputText ? type : "", type);
+ this.size = this.computeSize();
+ }
+ };
+
+ this.clone = function () {
+ const cloned = RerouteNode.prototype.clone.apply(this);
+ cloned.removeOutput(0);
+ cloned.addOutput(this.properties.showOutputText ? "*" : "", "*");
+ cloned.size = cloned.computeSize();
+ return cloned;
+ };
+
+ // This node is purely frontend and does not impact the resulting prompt so should not be serialized
+ this.isVirtualNode = true;
+ }
+
+ getExtraMenuOptions(_, options) {
+ options.unshift(
+ {
+ content: (this.properties.showOutputText ? "Hide" : "Show") + " Type",
+ callback: () => {
+ this.properties.showOutputText = !this.properties.showOutputText;
+ if (this.properties.showOutputText) {
+ this.outputs[0].name = this.outputs[0].type;
+ } else {
+ this.outputs[0].name = "";
+ }
+ this.size = this.computeSize();
+ app.graph.setDirtyCanvas(true);
+ },
+ },
+ {
+ content: (RerouteNode.defaultVisibility ? "Hide" : "Show") + " Type By Default",
+ callback: () => {
+ RerouteNode.setDefaultTextVisibility(!RerouteNode.defaultVisibility);
+ },
+ }
+ );
+ }
+
+ computeSize() {
+ return [
+ this.properties.showOutputText && this.outputs && this.outputs.length
+ ? Math.max(55, LiteGraph.NODE_TEXT_SIZE * this.outputs[0].name.length * 0.6 + 40)
+ : 55,
+ 26,
+ ];
+ }
+
+ static setDefaultTextVisibility(visible) {
+ RerouteNode.defaultVisibility = visible;
+ if (visible) {
+ localStorage["Comfy.RerouteNode.DefaultVisibility"] = "true";
+ } else {
+ delete localStorage["Comfy.RerouteNode.DefaultVisibility"];
+ }
+ }
+ }
+
+ // Load default visibility
+ RerouteNode.setDefaultTextVisibility(!!localStorage["Comfy.RerouteNode.DefaultVisibility"]);
+
+ LiteGraph.registerNodeType(
+ "Reroute",
+ Object.assign(RerouteNode, {
+ title_mode: LiteGraph.NO_TITLE,
+ title: "Reroute",
+ })
+ );
+
+ RerouteNode.category = "utils";
+ },
+});
diff --git a/web/extensions/logging.js.example b/web/extensions/logging.js.example
new file mode 100644
index 000000000000..d015096a29f2
--- /dev/null
+++ b/web/extensions/logging.js.example
@@ -0,0 +1,55 @@
+import { app } from "../scripts/app.js";
+
+const ext = {
+ // Unique name for the extension
+ name: "Example.LoggingExtension",
+ async init(app) {
+ // Any initial setup to run as soon as the page loads
+ console.log("[logging]", "extension init");
+ },
+ async setup(app) {
+ // Any setup to run after the app is created
+ console.log("[logging]", "extension setup");
+ },
+ async addCustomNodeDefs(defs, app) {
+ // Add custom node definitions
+ // These definitions will be configured and registered automatically
+ // defs is a lookup core nodes, add yours into this
+ console.log("[logging]", "add custom node definitions", "current nodes:", Object.keys(defs));
+ },
+ async getCustomWidgets(app) {
+ // Return custom widget types
+ // See ComfyWidgets for widget examples
+ console.log("[logging]", "provide custom widgets");
+ },
+ async beforeRegisterNodeDef(nodeType, nodeData, app) {
+ // Run custom logic before a node definition is registered with the graph
+ console.log("[logging]", "before register node: ", nodeType, nodeData);
+
+ // This fires for every node definition so only log once
+ delete ext.beforeRegisterNodeDef;
+ },
+ async registerCustomNodes(app) {
+ // Register any custom node implementations here allowing for more flexability than a custom node def
+ console.log("[logging]", "register custom nodes");
+ },
+ loadedGraphNode(node, app) {
+ // Fires for each node when loading/dragging/etc a workflow json or png
+ // If you break something in the backend and want to patch workflows in the frontend
+ // This is the place to do this
+ console.log("[logging]", "loaded graph node: ", node);
+
+ // This fires for every node on each load so only log once
+ delete ext.loadedGraphNode;
+ },
+ nodeCreated(node, app) {
+ // Fires every time a node is constructed
+ // You can modify widgets/add handlers/etc here
+ console.log("[logging]", "node created: ", node);
+
+ // This fires for every node so only log once
+ delete ext.nodeCreated;
+ }
+};
+
+app.registerExtension(ext);
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 000000000000..cd95594f85a5
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/webshit/litegraph.core.js b/web/lib/litegraph.core.js
similarity index 100%
rename from webshit/litegraph.core.js
rename to web/lib/litegraph.core.js
diff --git a/webshit/litegraph.css b/web/lib/litegraph.css
similarity index 100%
rename from webshit/litegraph.css
rename to web/lib/litegraph.css
diff --git a/web/scripts/api.js b/web/scripts/api.js
new file mode 100644
index 000000000000..61b786f6e839
--- /dev/null
+++ b/web/scripts/api.js
@@ -0,0 +1,236 @@
+class ComfyApi extends EventTarget {
+ constructor() {
+ super();
+ }
+
+ /**
+ * Poll status for colab and other things that don't support websockets.
+ */
+ #pollQueue() {
+ setInterval(async () => {
+ try {
+ const resp = await fetch("/prompt");
+ const status = await resp.json();
+ this.dispatchEvent(new CustomEvent("status", { detail: status }));
+ } catch (error) {
+ this.dispatchEvent(new CustomEvent("status", { detail: null }));
+ }
+ }, 1000);
+ }
+
+ /**
+ * Creates and connects a WebSocket for realtime updates
+ * @param {boolean} isReconnect If the socket is connection is a reconnect attempt
+ */
+ #createSocket(isReconnect) {
+ if (this.socket) {
+ return;
+ }
+
+ let opened = false;
+ this.socket = new WebSocket(`ws${window.location.protocol === "https:" ? "s" : ""}://${location.host}/ws`);
+
+ this.socket.addEventListener("open", () => {
+ opened = true;
+ if (isReconnect) {
+ this.dispatchEvent(new CustomEvent("reconnected"));
+ }
+ });
+
+ this.socket.addEventListener("error", () => {
+ if (this.socket) this.socket.close();
+ if (!isReconnect && !opened) {
+ this.#pollQueue();
+ }
+ });
+
+ this.socket.addEventListener("close", () => {
+ setTimeout(() => {
+ this.socket = null;
+ this.#createSocket(true);
+ }, 300);
+ if (opened) {
+ this.dispatchEvent(new CustomEvent("status", { detail: null }));
+ this.dispatchEvent(new CustomEvent("reconnecting"));
+ }
+ });
+
+ this.socket.addEventListener("message", (event) => {
+ try {
+ const msg = JSON.parse(event.data);
+ switch (msg.type) {
+ case "status":
+ if (msg.data.sid) {
+ this.clientId = msg.data.sid;
+ }
+ this.dispatchEvent(new CustomEvent("status", { detail: msg.data.status }));
+ break;
+ case "progress":
+ this.dispatchEvent(new CustomEvent("progress", { detail: msg.data }));
+ break;
+ case "executing":
+ this.dispatchEvent(new CustomEvent("executing", { detail: msg.data.node }));
+ break;
+ case "executed":
+ this.dispatchEvent(new CustomEvent("executed", { detail: msg.data }));
+ break;
+ default:
+ throw new Error("Unknown message type");
+ }
+ } catch (error) {
+ console.warn("Unhandled message:", event.data);
+ }
+ });
+ }
+
+ /**
+ * Initialises sockets and realtime updates
+ */
+ init() {
+ this.#createSocket();
+ }
+
+ /**
+ * Gets a list of extension urls
+ * @returns An array of script urls to import
+ */
+ async getExtensions() {
+ const resp = await fetch("/extensions", { cache: "no-store" });
+ return await resp.json();
+ }
+
+ /**
+ * Loads node object definitions for the graph
+ * @returns The node definitions
+ */
+ async getNodeDefs() {
+ const resp = await fetch("object_info", { cache: "no-store" });
+ return await resp.json();
+ }
+
+ /**
+ *
+ * @param {number} number The index at which to queue the prompt, passing -1 will insert the prompt at the front of the queue
+ * @param {object} prompt The prompt data to queue
+ */
+ async queuePrompt(number, { output, workflow }) {
+ const body = {
+ client_id: this.clientId,
+ prompt: output,
+ extra_data: { extra_pnginfo: { workflow } },
+ };
+
+ if (number === -1) {
+ body.front = true;
+ } else if (number != 0) {
+ body.number = number;
+ }
+
+ const res = await fetch("/prompt", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(body),
+ });
+
+ if (res.status !== 200) {
+ throw {
+ response: await res.text(),
+ };
+ }
+ }
+
+ /**
+ * Loads a list of items (queue or history)
+ * @param {string} type The type of items to load, queue or history
+ * @returns The items of the specified type grouped by their status
+ */
+ async getItems(type) {
+ if (type === "queue") {
+ return this.getQueue();
+ }
+ return this.getHistory();
+ }
+
+ /**
+ * Gets the current state of the queue
+ * @returns The currently running and queued items
+ */
+ async getQueue() {
+ try {
+ const res = await fetch("/queue");
+ const data = await res.json();
+ return {
+ // Running action uses a different endpoint for cancelling
+ Running: data.queue_running.map((prompt) => ({
+ prompt,
+ remove: { name: "Cancel", cb: () => api.interrupt() },
+ })),
+ Pending: data.queue_pending.map((prompt) => ({ prompt })),
+ };
+ } catch (error) {
+ console.error(error);
+ return { Running: [], Pending: [] };
+ }
+ }
+
+ /**
+ * Gets the prompt execution history
+ * @returns Prompt history including node outputs
+ */
+ async getHistory() {
+ try {
+ const res = await fetch("/history");
+ return { History: Object.values(await res.json()) };
+ } catch (error) {
+ console.error(error);
+ return { History: [] };
+ }
+ }
+
+ /**
+ * Sends a POST request to the API
+ * @param {*} type The endpoint to post to
+ * @param {*} body Optional POST data
+ */
+ async #postItem(type, body) {
+ try {
+ await fetch("/" + type, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: body ? JSON.stringify(body) : undefined,
+ });
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ /**
+ * Deletes an item from the specified list
+ * @param {string} type The type of item to delete, queue or history
+ * @param {number} id The id of the item to delete
+ */
+ async deleteItem(type, id) {
+ await this.#postItem(type, { delete: [id] });
+ }
+
+ /**
+ * Clears the specified list
+ * @param {string} type The type of list to clear, queue or history
+ */
+ async clearItems(type) {
+ await this.#postItem(type, { clear: true });
+ }
+
+ /**
+ * Interrupts the execution of the running prompt
+ */
+ async interrupt() {
+ await this.#postItem("interrupt", null);
+ }
+}
+
+export const api = new ComfyApi();
diff --git a/web/scripts/app.js b/web/scripts/app.js
new file mode 100644
index 000000000000..1cf81b8f9cf5
--- /dev/null
+++ b/web/scripts/app.js
@@ -0,0 +1,701 @@
+import { ComfyWidgets } from "./widgets.js";
+import { ComfyUI } from "./ui.js";
+import { api } from "./api.js";
+import { defaultGraph } from "./defaultGraph.js";
+import { getPngMetadata } from "./pnginfo.js";
+
+class ComfyApp {
+ constructor() {
+ this.ui = new ComfyUI(this);
+ this.extensions = [];
+ this.nodeOutputs = {};
+ }
+
+ /**
+ * Invoke an extension callback
+ * @param {string} method The extension callback to execute
+ * @param {...any} args Any arguments to pass to the callback
+ * @returns
+ */
+ #invokeExtensions(method, ...args) {
+ let results = [];
+ for (const ext of this.extensions) {
+ if (method in ext) {
+ try {
+ results.push(ext[method](...args, this));
+ } catch (error) {
+ console.error(
+ `Error calling extension '${ext.name}' method '${method}'`,
+ { error },
+ { extension: ext },
+ { args }
+ );
+ }
+ }
+ }
+ return results;
+ }
+
+ /**
+ * Invoke an async extension callback
+ * 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
+ */
+ async #invokeExtensionsAsync(method, ...args) {
+ return await Promise.all(
+ this.extensions.map(async (ext) => {
+ if (method in ext) {
+ try {
+ return await ext[method](...args, this);
+ } catch (error) {
+ console.error(
+ `Error calling extension '${ext.name}' method '${method}'`,
+ { error },
+ { extension: ext },
+ { args }
+ );
+ }
+ }
+ })
+ );
+ }
+
+ /**
+ * Adds special context menu handling for nodes
+ * e.g. this adds Open Image functionality for nodes that show images
+ * @param {*} node The node to add the menu handler
+ */
+ #addNodeContextMenuHandler(node) {
+ node.prototype.getExtraMenuOptions = function (_, options) {
+ if (this.imgs) {
+ // If this node has images then we add an open in new tab item
+ let img;
+ if (this.imageIndex != null) {
+ // An image is selected so select that
+ img = this.imgs[this.imageIndex];
+ } else if (this.overIndex != null) {
+ // No image is selected but one is hovered
+ img = this.imgs[this.overIndex];
+ }
+ if (img) {
+ options.unshift({
+ content: "Open Image",
+ callback: () => window.open(img.src, "_blank"),
+ });
+ }
+ }
+ };
+ }
+
+ /**
+ * Adds Custom drawing logic for nodes
+ * e.g. Draws images and handles thumbnail navigation on nodes that output images
+ * @param {*} node The node to add the draw handler
+ */
+ #addDrawBackgroundHandler(node) {
+ const app = this;
+ node.prototype.onDrawBackground = function (ctx) {
+ if (!this.flags.collapsed) {
+ const output = app.nodeOutputs[this.id + ""];
+ if (output && output.images) {
+ if (this.images !== output.images) {
+ this.images = output.images;
+ this.imgs = null;
+ this.imageIndex = null;
+ Promise.all(
+ output.images.map((src) => {
+ return new Promise((r) => {
+ const img = new Image();
+ img.onload = () => r(img);
+ img.onerror = () => r(null);
+ img.src = "/view/" + src;
+ });
+ })
+ ).then((imgs) => {
+ if (this.images === output.images) {
+ this.imgs = imgs.filter(Boolean);
+ if (this.size[1] < 100) {
+ this.size[1] = 250;
+ }
+ app.graph.setDirtyCanvas(true);
+ }
+ });
+ }
+ }
+
+ if (this.imgs && this.imgs.length) {
+ const canvas = graph.list_of_graphcanvas[0];
+ const mouse = canvas.graph_mouse;
+ if (!canvas.pointer_is_down && this.pointerDown) {
+ if (mouse[0] === this.pointerDown.pos[0] && mouse[1] === this.pointerDown.pos[1]) {
+ this.imageIndex = this.pointerDown.index;
+ }
+ this.pointerDown = null;
+ }
+
+ let w = this.imgs[0].naturalWidth;
+ let h = this.imgs[0].naturalHeight;
+ let imageIndex = this.imageIndex;
+ const numImages = this.imgs.length;
+ if (numImages === 1 && !imageIndex) {
+ this.imageIndex = imageIndex = 0;
+ }
+ let shiftY = this.type === "SaveImage" ? 55 : 0;
+ let dw = this.size[0];
+ let dh = this.size[1];
+ dh -= shiftY;
+
+ if (imageIndex == null) {
+ let best = 0;
+ let cellWidth;
+ let cellHeight;
+ let cols = 0;
+ let shiftX = 0;
+ for (let c = 1; c <= numImages; c++) {
+ const rows = Math.ceil(numImages / c);
+ const cW = dw / c;
+ const cH = dh / rows;
+ const scaleX = cW / w;
+ const scaleY = cH / h;
+
+ const scale = Math.min(scaleX, scaleY, 1);
+ const imageW = w * scale;
+ const imageH = h * scale;
+ const area = imageW * imageH * numImages;
+
+ if (area > best) {
+ best = area;
+ cellWidth = imageW;
+ cellHeight = imageH;
+ cols = c;
+ shiftX = c * ((cW - imageW) / 2);
+ }
+ }
+
+ let anyHovered = false;
+ this.imageRects = [];
+ for (let i = 0; i < numImages; i++) {
+ const img = this.imgs[i];
+ const row = Math.floor(i / cols);
+ const col = i % cols;
+ const x = col * cellWidth + shiftX;
+ const y = row * cellHeight + shiftY;
+ if (!anyHovered) {
+ anyHovered = LiteGraph.isInsideRectangle(
+ mouse[0],
+ mouse[1],
+ x + this.pos[0],
+ y + this.pos[1],
+ cellWidth,
+ cellHeight
+ );
+ if (anyHovered) {
+ this.overIndex = i;
+ let value = 110;
+ if (canvas.pointer_is_down) {
+ if (!this.pointerDown || this.pointerDown.index !== i) {
+ this.pointerDown = { index: i, pos: [...mouse] };
+ }
+ value = 125;
+ }
+ ctx.filter = `contrast(${value}%) brightness(${value}%)`;
+ canvas.canvas.style.cursor = "pointer";
+ }
+ }
+ this.imageRects.push([x, y, cellWidth, cellHeight]);
+ ctx.drawImage(img, x, y, cellWidth, cellHeight);
+ ctx.filter = "none";
+ }
+
+ if (!anyHovered) {
+ this.pointerDown = null;
+ this.overIndex = null;
+ }
+ } else {
+ // Draw individual
+ const scaleX = dw / w;
+ const scaleY = dh / h;
+ const scale = Math.min(scaleX, scaleY, 1);
+
+ w *= scale;
+ h *= scale;
+
+ let x = (dw - w) / 2;
+ let y = (dh - h) / 2 + shiftY;
+ ctx.drawImage(this.imgs[imageIndex], x, y, w, h);
+
+ const drawButton = (x, y, sz, text) => {
+ const hovered = LiteGraph.isInsideRectangle(mouse[0], mouse[1], x + this.pos[0], y + this.pos[1], sz, sz);
+ let fill = "#333";
+ let textFill = "#fff";
+ let isClicking = false;
+ if (hovered) {
+ canvas.canvas.style.cursor = "pointer";
+ if (canvas.pointer_is_down) {
+ fill = "#1e90ff";
+ isClicking = true;
+ } else {
+ fill = "#eee";
+ textFill = "#000";
+ }
+ } else {
+ this.pointerWasDown = null;
+ }
+
+ ctx.fillStyle = fill;
+ ctx.beginPath();
+ ctx.roundRect(x, y, sz, sz, [4]);
+ ctx.fill();
+ ctx.fillStyle = textFill;
+ ctx.font = "12px Arial";
+ ctx.textAlign = "center";
+ ctx.fillText(text, x + 15, y + 20);
+
+ return isClicking;
+ };
+
+ if (numImages > 1) {
+ if (drawButton(x + w - 35, y + h - 35, 30, `${this.imageIndex + 1}/${numImages}`)) {
+ let i = this.imageIndex + 1 >= numImages ? 0 : this.imageIndex + 1;
+ if (!this.pointerDown || !this.pointerDown.index === i) {
+ this.pointerDown = { index: i, pos: [...mouse] };
+ }
+ }
+
+ if (drawButton(x + w - 35, y + 5, 30, `x`)) {
+ if (!this.pointerDown || !this.pointerDown.index === null) {
+ this.pointerDown = { index: null, pos: [...mouse] };
+ }
+ }
+ }
+ }
+ }
+ }
+ };
+ }
+
+ /**
+ * Adds a handler allowing drag+drop of files onto the window to load workflows
+ */
+ #addDropHandler() {
+ // Get prompt from dropped PNG or json
+ document.addEventListener("drop", async (event) => {
+ event.preventDefault();
+ event.stopPropagation();
+ const file = event.dataTransfer.files[0];
+ await this.handleFile(file);
+ });
+ }
+
+ /**
+ * Adds a handler on paste that extracts and loads workflows from pasted JSON data
+ */
+ #addPasteHandler() {
+ document.addEventListener("paste", (e) => {
+ let data = (e.clipboardData || window.clipboardData).getData("text/plain");
+ let workflow;
+ try {
+ data = data.slice(data.indexOf("{"));
+ workflow = JSON.parse(data);
+ } catch (err) {
+ try {
+ data = data.slice(data.indexOf("workflow\n"));
+ data = data.slice(data.indexOf("{"));
+ workflow = JSON.parse(data);
+ } catch (error) {}
+ }
+
+ if (workflow && workflow.version && workflow.nodes && workflow.extra) {
+ this.loadGraphData(workflow);
+ }
+ });
+ }
+
+ /**
+ * Draws currently executing node highlight and progress bar
+ */
+ #addDrawNodeProgressHandler() {
+ const orig = LGraphCanvas.prototype.drawNodeShape;
+ const self = this;
+ LGraphCanvas.prototype.drawNodeShape = function (node, ctx, size, fgcolor, bgcolor, selected, mouse_over) {
+ const res = orig.apply(this, arguments);
+
+ if (node.id + "" === self.runningNodeId) {
+ const shape = node._shape || node.constructor.shape || LiteGraph.ROUND_SHAPE;
+ ctx.lineWidth = 1;
+ ctx.globalAlpha = 0.8;
+ ctx.beginPath();
+ if (shape == LiteGraph.BOX_SHAPE)
+ ctx.rect(-6, -6 + LiteGraph.NODE_TITLE_HEIGHT, 12 + size[0] + 1, 12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT);
+ else if (shape == LiteGraph.ROUND_SHAPE || (shape == LiteGraph.CARD_SHAPE && node.flags.collapsed))
+ ctx.roundRect(
+ -6,
+ -6 - LiteGraph.NODE_TITLE_HEIGHT,
+ 12 + size[0] + 1,
+ 12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT,
+ this.round_radius * 2
+ );
+ else if (shape == LiteGraph.CARD_SHAPE)
+ ctx.roundRect(
+ -6,
+ -6 + LiteGraph.NODE_TITLE_HEIGHT,
+ 12 + size[0] + 1,
+ 12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT,
+ this.round_radius * 2,
+ 2
+ );
+ else if (shape == LiteGraph.CIRCLE_SHAPE)
+ ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5 + 6, 0, Math.PI * 2);
+ ctx.strokeStyle = "#0f0";
+ ctx.stroke();
+ ctx.strokeStyle = fgcolor;
+ ctx.globalAlpha = 1;
+
+ if (self.progress) {
+ ctx.fillStyle = "green";
+ ctx.fillRect(0, 0, size[0] * (self.progress.value / self.progress.max), 6);
+ ctx.fillStyle = bgcolor;
+ }
+ }
+
+ return res;
+ };
+ }
+
+ /**
+ * Handles updates from the API socket
+ */
+ #addApiUpdateHandlers() {
+ api.addEventListener("status", ({ detail }) => {
+ this.ui.setStatus(detail);
+ });
+
+ api.addEventListener("reconnecting", () => {
+ this.ui.dialog.show("Reconnecting...");
+ });
+
+ api.addEventListener("reconnected", () => {
+ this.ui.dialog.close();
+ });
+
+ api.addEventListener("progress", ({ detail }) => {
+ this.progress = detail;
+ this.graph.setDirtyCanvas(true, false);
+ });
+
+ api.addEventListener("executing", ({ detail }) => {
+ this.progress = null;
+ this.runningNodeId = detail;
+ this.graph.setDirtyCanvas(true, false);
+ });
+
+ api.addEventListener("executed", ({ detail }) => {
+ this.nodeOutputs[detail.node] = detail.output;
+ });
+
+ api.init();
+ }
+
+ /**
+ * Loads all extensions from the API into the window
+ */
+ async #loadExtensions() {
+ const extensions = await api.getExtensions();
+ for (const ext of extensions) {
+ try {
+ await import(ext);
+ } catch (error) {
+ console.error("Error loading extension", ext, error);
+ }
+ }
+ }
+
+ /**
+ * Set up the app on the page
+ */
+ async setup() {
+ await this.#loadExtensions();
+
+ // Create and mount the LiteGraph in the DOM
+ const canvasEl = Object.assign(document.createElement("canvas"), { id: "graph-canvas" });
+ document.body.prepend(canvasEl);
+
+ this.graph = new LGraph();
+ const canvas = (this.canvas = new LGraphCanvas(canvasEl, this.graph));
+ this.ctx = canvasEl.getContext("2d");
+
+ this.graph.start();
+
+ function resizeCanvas() {
+ canvasEl.width = canvasEl.offsetWidth;
+ canvasEl.height = canvasEl.offsetHeight;
+ canvas.draw(true, true);
+ }
+
+ // Ensure the canvas fills the window
+ resizeCanvas();
+ window.addEventListener("resize", resizeCanvas);
+
+ await this.#invokeExtensionsAsync("init");
+ await this.registerNodes();
+
+ // Load previous workflow
+ let restored = false;
+ try {
+ const json = localStorage.getItem("workflow");
+ if (json) {
+ const workflow = JSON.parse(json);
+ this.loadGraphData(workflow);
+ restored = true;
+ }
+ } catch (err) {}
+
+ // We failed to restore a workflow so load the default
+ if (!restored) {
+ this.loadGraphData();
+ }
+
+ // Save current workflow automatically
+ setInterval(() => localStorage.setItem("workflow", JSON.stringify(this.graph.serialize())), 1000);
+
+ this.#addDrawNodeProgressHandler();
+ this.#addApiUpdateHandlers();
+ this.#addDropHandler();
+ this.#addPasteHandler();
+
+ await this.#invokeExtensionsAsync("setup");
+ }
+
+ /**
+ * Registers nodes with the graph
+ */
+ async registerNodes() {
+ const app = this;
+ // Load node definitions from the backend
+ const defs = await api.getNodeDefs();
+ await this.#invokeExtensionsAsync("addCustomNodeDefs", defs);
+
+ // Generate list of known widgets
+ const widgets = Object.assign(
+ {},
+ ComfyWidgets,
+ ...(await this.#invokeExtensionsAsync("getCustomWidgets")).filter(Boolean)
+ );
+
+ // Register a node for each definition
+ for (const nodeId in defs) {
+ const nodeData = defs[nodeId];
+ const node = Object.assign(
+ function ComfyNode() {
+ const inputs = nodeData["input"]["required"];
+ const config = { minWidth: 1, minHeight: 1 };
+ for (const inputName in inputs) {
+ const inputData = inputs[inputName];
+ const type = inputData[0];
+
+ if (Array.isArray(type)) {
+ // Enums e.g. latent rotation
+ this.addWidget("combo", inputName, type[0], () => {}, { values: type });
+ } else if (`${type}:${inputName}` in widgets) {
+ // Support custom widgets by Type:Name
+ Object.assign(config, widgets[`${type}:${inputName}`](this, inputName, inputData, app) || {});
+ } else if (type in widgets) {
+ // Standard type widgets
+ Object.assign(config, widgets[type](this, inputName, inputData, app) || {});
+ } else {
+ // Node connection inputs
+ this.addInput(inputName, type);
+ }
+ }
+
+ for (const output of nodeData["output"]) {
+ this.addOutput(output, output);
+ }
+
+ const s = this.computeSize();
+ s[0] = Math.max(config.minWidth, s[0] * 1.5);
+ s[1] = Math.max(config.minHeight, s[1]);
+ this.size = s;
+ this.serialize_widgets = true;
+
+ app.#invokeExtensionsAsync("nodeCreated", this);
+ },
+ {
+ title: nodeData.name,
+ comfyClass: nodeData.name,
+ }
+ );
+ node.prototype.comfyClass = nodeData.name;
+
+ this.#addNodeContextMenuHandler(node);
+ this.#addDrawBackgroundHandler(node, app);
+
+ await this.#invokeExtensionsAsync("beforeRegisterNodeDef", node, nodeData);
+ LiteGraph.registerNodeType(nodeId, node);
+ node.category = nodeData.category;
+ }
+
+ await this.#invokeExtensionsAsync("registerCustomNodes");
+ }
+
+ /**
+ * Populates the graph with the specified workflow data
+ * @param {*} graphData A serialized graph object
+ */
+ loadGraphData(graphData) {
+ if (!graphData) {
+ graphData = defaultGraph;
+ }
+ this.graph.configure(graphData);
+
+ for (const node of this.graph._nodes) {
+ const size = node.computeSize();
+ size[0] = Math.max(node.size[0], size[0]);
+ size[1] = Math.max(node.size[1], size[1]);
+ node.size = size;
+
+ if (node.widgets) {
+ // If you break something in the backend and want to patch workflows in the frontend
+ // This is the place to do this
+ for (let widget of node.widgets) {
+ if (node.type == "KSampler" || node.type == "KSamplerAdvanced") {
+ if (widget.name == "sampler_name") {
+ if (widget.value.startsWith("sample_")) {
+ widget.value = widget.value.slice(7);
+ }
+ }
+ }
+ }
+ }
+
+ this.#invokeExtensions("loadedGraphNode", node);
+ }
+ }
+
+ /**
+ * Converts the current graph workflow for sending to the API
+ * @returns The workflow and node links
+ */
+ async graphToPrompt() {
+ const workflow = this.graph.serialize();
+ const output = {};
+ for (const n of workflow.nodes) {
+ 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 i in widgets) {
+ const widget = widgets[i];
+ if (!widget.options || widget.options.serialize !== false) {
+ inputs[widget.name] = widget.serializeValue ? await widget.serializeValue(n, i) : widget.value;
+ }
+ }
+ }
+
+ // Store all node links
+ for (let i in node.inputs) {
+ 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)];
+ }
+ }
+ }
+
+ output[String(node.id)] = {
+ inputs,
+ class_type: node.comfyClass,
+ };
+ }
+
+ return { workflow, output };
+ }
+
+ async queuePrompt(number) {
+ const p = await this.graphToPrompt();
+
+ try {
+ await api.queuePrompt(number, p);
+ } catch (error) {
+ this.ui.dialog.show(error.response || error.toString());
+ return;
+ }
+
+ for (const n of p.workflow.nodes) {
+ const node = graph.getNodeById(n.id);
+ if (node.widgets) {
+ for (const widget of node.widgets) {
+ // Allow widgets to run callbacks after a prompt has been queued
+ // e.g. random seed after every gen
+ if (widget.afterQueued) {
+ widget.afterQueued();
+ }
+ }
+ }
+ }
+
+ this.canvas.draw(true, true);
+ await this.ui.queue.update();
+ }
+
+ /**
+ * Loads workflow data from the specified file
+ * @param {File} file
+ */
+ async handleFile(file) {
+ if (file.type === "image/png") {
+ const pngInfo = await getPngMetadata(file);
+ if (pngInfo && pngInfo.workflow) {
+ this.loadGraphData(JSON.parse(pngInfo.workflow));
+ }
+ } else if (file.type === "application/json" || file.name.endsWith(".json")) {
+ const reader = new FileReader();
+ reader.onload = () => {
+ this.loadGraphData(JSON.parse(reader.result));
+ };
+ 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();
diff --git a/web/scripts/defaultGraph.js b/web/scripts/defaultGraph.js
new file mode 100644
index 000000000000..967377ad65d1
--- /dev/null
+++ b/web/scripts/defaultGraph.js
@@ -0,0 +1,119 @@
+export const defaultGraph = {
+ last_node_id: 9,
+ last_link_id: 9,
+ nodes: [
+ {
+ id: 7,
+ type: "CLIPTextEncode",
+ pos: [413, 389],
+ size: { 0: 425.27801513671875, 1: 180.6060791015625 },
+ flags: {},
+ order: 3,
+ mode: 0,
+ inputs: [{ name: "clip", type: "CLIP", link: 5 }],
+ outputs: [{ name: "CONDITIONING", type: "CONDITIONING", links: [6], slot_index: 0 }],
+ properties: {},
+ widgets_values: ["bad hands"],
+ },
+ {
+ id: 6,
+ type: "CLIPTextEncode",
+ pos: [415, 186],
+ size: { 0: 422.84503173828125, 1: 164.31304931640625 },
+ flags: {},
+ order: 2,
+ mode: 0,
+ inputs: [{ name: "clip", type: "CLIP", link: 3 }],
+ outputs: [{ name: "CONDITIONING", type: "CONDITIONING", links: [4], slot_index: 0 }],
+ properties: {},
+ widgets_values: ["masterpiece best quality girl"],
+ },
+ {
+ id: 5,
+ type: "EmptyLatentImage",
+ pos: [473, 609],
+ size: { 0: 315, 1: 106 },
+ flags: {},
+ order: 1,
+ mode: 0,
+ outputs: [{ name: "LATENT", type: "LATENT", links: [2], slot_index: 0 }],
+ properties: {},
+ widgets_values: [512, 512, 1],
+ },
+ {
+ id: 3,
+ type: "KSampler",
+ pos: [863, 186],
+ size: { 0: 315, 1: 262 },
+ flags: {},
+ order: 4,
+ mode: 0,
+ inputs: [
+ { name: "model", type: "MODEL", link: 1 },
+ { name: "positive", type: "CONDITIONING", link: 4 },
+ { name: "negative", type: "CONDITIONING", link: 6 },
+ { name: "latent_image", type: "LATENT", link: 2 },
+ ],
+ outputs: [{ name: "LATENT", type: "LATENT", links: [7], slot_index: 0 }],
+ properties: {},
+ widgets_values: [8566257, true, 20, 8, "euler", "normal", 1],
+ },
+ {
+ id: 8,
+ type: "VAEDecode",
+ pos: [1209, 188],
+ size: { 0: 210, 1: 46 },
+ flags: {},
+ order: 5,
+ mode: 0,
+ inputs: [
+ { name: "samples", type: "LATENT", link: 7 },
+ { name: "vae", type: "VAE", link: 8 },
+ ],
+ outputs: [{ name: "IMAGE", type: "IMAGE", links: [9], slot_index: 0 }],
+ properties: {},
+ },
+ {
+ id: 9,
+ type: "SaveImage",
+ pos: [1451, 189],
+ size: { 0: 210, 1: 26 },
+ flags: {},
+ order: 6,
+ mode: 0,
+ inputs: [{ name: "images", type: "IMAGE", link: 9 }],
+ properties: {},
+ },
+ {
+ id: 4,
+ type: "CheckpointLoaderSimple",
+ pos: [26, 474],
+ size: { 0: 315, 1: 98 },
+ flags: {},
+ order: 0,
+ mode: 0,
+ outputs: [
+ { name: "MODEL", type: "MODEL", links: [1], slot_index: 0 },
+ { name: "CLIP", type: "CLIP", links: [3, 5], slot_index: 1 },
+ { name: "VAE", type: "VAE", links: [8], slot_index: 2 },
+ ],
+ properties: {},
+ widgets_values: ["v1-5-pruned-emaonly.ckpt"],
+ },
+ ],
+ links: [
+ [1, 4, 0, 3, 0, "MODEL"],
+ [2, 5, 0, 3, 3, "LATENT"],
+ [3, 4, 1, 6, 0, "CLIP"],
+ [4, 6, 0, 3, 1, "CONDITIONING"],
+ [5, 4, 1, 7, 0, "CLIP"],
+ [6, 7, 0, 3, 2, "CONDITIONING"],
+ [7, 3, 0, 8, 0, "LATENT"],
+ [8, 4, 2, 8, 1, "VAE"],
+ [9, 8, 0, 9, 0, "IMAGE"],
+ ],
+ groups: [],
+ config: {},
+ extra: {},
+ version: 0.4,
+};
diff --git a/web/scripts/pnginfo.js b/web/scripts/pnginfo.js
new file mode 100644
index 000000000000..923f87450037
--- /dev/null
+++ b/web/scripts/pnginfo.js
@@ -0,0 +1,45 @@
+export function getPngMetadata(file) {
+ return new Promise((r) => {
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ // Get the PNG data as a Uint8Array
+ const pngData = new Uint8Array(event.target.result);
+ const dataView = new DataView(pngData.buffer);
+
+ // Check that the PNG signature is present
+ if (dataView.getUint32(0) !== 0x89504e47) {
+ console.error("Not a valid PNG file");
+ r();
+ return;
+ }
+
+ // Start searching for chunks after the PNG signature
+ let offset = 8;
+ let txt_chunks = {};
+ // Loop through the chunks in the PNG file
+ while (offset < pngData.length) {
+ // Get the length of the chunk
+ const length = dataView.getUint32(offset);
+ // Get the chunk type
+ const type = String.fromCharCode(...pngData.slice(offset + 4, offset + 8));
+ if (type === "tEXt") {
+ // Get the keyword
+ let keyword_end = offset + 8;
+ while (pngData[keyword_end] !== 0) {
+ keyword_end++;
+ }
+ const keyword = String.fromCharCode(...pngData.slice(offset + 8, keyword_end));
+ // Get the text
+ const text = String.fromCharCode(...pngData.slice(keyword_end + 1, offset + 8 + length));
+ txt_chunks[keyword] = text;
+ }
+
+ offset += 12 + length;
+ }
+
+ r(txt_chunks);
+ };
+
+ reader.readAsArrayBuffer(file);
+ });
+}
diff --git a/web/scripts/ui.js b/web/scripts/ui.js
new file mode 100644
index 000000000000..0bfb692736b1
--- /dev/null
+++ b/web/scripts/ui.js
@@ -0,0 +1,226 @@
+import { api } from "./api.js";
+
+function $el(tag, propsOrChildren, children) {
+ const split = tag.split(".");
+ const element = document.createElement(split.shift());
+ element.classList.add(...split);
+ if (propsOrChildren) {
+ if (Array.isArray(propsOrChildren)) {
+ element.append(...propsOrChildren);
+ } else {
+ const parent = propsOrChildren.parent;
+ delete propsOrChildren.parent;
+ const cb = propsOrChildren.$;
+ delete propsOrChildren.$;
+
+ Object.assign(element, propsOrChildren);
+ if (children) {
+ element.append(...children);
+ }
+
+ if (parent) {
+ parent.append(element);
+ }
+
+ if (cb) {
+ cb(element);
+ }
+ }
+ }
+ return element;
+}
+
+class ComfyDialog {
+ constructor() {
+ this.element = $el("div.comfy-modal", { parent: document.body }, [
+ $el("div.comfy-modal-content", [
+ $el("p", { $: (p) => (this.textElement = p) }),
+ $el("button", {
+ type: "button",
+ textContent: "CLOSE",
+ onclick: () => this.close(),
+ }),
+ ]),
+ ]);
+ }
+
+ close() {
+ this.element.style.display = "none";
+ }
+
+ show(html) {
+ this.textElement.innerHTML = html;
+ this.element.style.display = "flex";
+ }
+}
+
+class ComfyList {
+ #type;
+ #text;
+
+ constructor(text, type) {
+ this.#text = text;
+ this.#type = type || text.toLowerCase();
+ this.element = $el("div.comfy-list");
+ this.element.style.display = "none";
+ }
+
+ get visible() {
+ return this.element.style.display !== "none";
+ }
+
+ async load() {
+ const items = await api.getItems(this.#type);
+ this.element.replaceChildren(
+ ...Object.keys(items).flatMap((section) => [
+ $el("h4", {
+ textContent: section,
+ }),
+ $el("div.comfy-list-items", [
+ ...items[section].map((item) => {
+ // Allow items to specify a custom remove action (e.g. for interrupt current prompt)
+ const removeAction = item.remove || {
+ name: "Delete",
+ cb: () => api.deleteItem(this.#type, item.prompt[1]),
+ };
+ return $el("div", { textContent: item.prompt[0] + ": " }, [
+ $el("button", {
+ textContent: "Load",
+ onclick: () => {
+ if (item.outputs) {
+ app.nodeOutputs = item.outputs;
+ }
+ app.loadGraphData(item.prompt[3].extra_pnginfo.workflow);
+ },
+ }),
+ $el("button", {
+ textContent: removeAction.name,
+ onclick: async () => {
+ await removeAction.cb();
+ await this.update();
+ },
+ }),
+ ]);
+ }),
+ ]),
+ ]),
+ $el("div.comfy-list-actions", [
+ $el("button", {
+ textContent: "Clear " + this.#text,
+ onclick: async () => {
+ await api.clearItems(this.#type);
+ await this.load();
+ },
+ }),
+ $el("button", { textContent: "Refresh", onclick: () => this.load() }),
+ ])
+ );
+ }
+
+ async update() {
+ if (this.visible) {
+ await this.load();
+ }
+ }
+
+ async show() {
+ this.element.style.display = "block";
+ this.button.textContent = "Close";
+
+ await this.load();
+ }
+
+ hide() {
+ this.element.style.display = "none";
+ this.button.textContent = "See " + this.#text;
+ }
+
+ toggle() {
+ if (this.visible) {
+ this.hide();
+ return false;
+ } else {
+ this.show();
+ return true;
+ }
+ }
+}
+
+export class ComfyUI {
+ constructor(app) {
+ this.app = app;
+ this.dialog = new ComfyDialog();
+
+ this.queue = new ComfyList("Queue");
+ this.history = new ComfyList("History");
+
+ api.addEventListener("status", () => {
+ this.queue.update();
+ this.history.update();
+ });
+
+ const fileInput = $el("input", {
+ type: "file",
+ accept: ".json,image/png",
+ style: "display: none",
+ parent: document.body,
+ onchange: () => {
+ app.handleFile(fileInput.files[0]);
+ },
+ });
+
+ this.menuContainer = $el("div.comfy-menu", { parent: document.body }, [
+ $el("span", { $: (q) => (this.queueSize = q) }),
+ $el("button.comfy-queue-btn", { textContent: "Queue Prompt", onclick: () => app.queuePrompt(0) }),
+ $el("div.comfy-menu-btns", [
+ $el("button", { textContent: "Queue Front", onclick: () => app.queuePrompt(-1) }),
+ $el("button", {
+ $: (b) => (this.queue.button = b),
+ textContent: "View Queue",
+ onclick: () => {
+ this.history.hide();
+ this.queue.toggle();
+ },
+ }),
+ $el("button", {
+ $: (b) => (this.history.button = b),
+ textContent: "View History",
+ onclick: () => {
+ this.queue.hide();
+ this.history.toggle();
+ },
+ }),
+ ]),
+ this.queue.element,
+ this.history.element,
+ $el("button", {
+ textContent: "Save",
+ onclick: () => {
+ const json = JSON.stringify(app.graph.serialize()); // convert the data to a JSON string
+ const blob = new Blob([json], { type: "application/json" });
+ const url = URL.createObjectURL(blob);
+ const a = $el("a", {
+ href: url,
+ download: "workflow.json",
+ style: "display: none",
+ parent: document.body,
+ });
+ a.click();
+ setTimeout(function () {
+ a.remove();
+ window.URL.revokeObjectURL(url);
+ }, 0);
+ },
+ }),
+ $el("button", { textContent: "Load", onclick: () => fileInput.click() }),
+ $el("button", { textContent: "Clear", onclick: () => app.graph.clear() }),
+ $el("button", { textContent: "Load Default", onclick: () => app.loadGraphData() }),
+ ]);
+
+ this.setStatus({ exec_info: { queue_remaining: "X" } });
+ }
+
+ setStatus(status) {
+ this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR");
+ }
+}
diff --git a/web/scripts/widgets.js b/web/scripts/widgets.js
new file mode 100644
index 000000000000..f2e094ae0ab4
--- /dev/null
+++ b/web/scripts/widgets.js
@@ -0,0 +1,129 @@
+function getNumberDefaults(inputData, defaultStep) {
+ let defaultVal = inputData[1]["default"];
+ let { min, max, step } = inputData[1];
+
+ if (defaultVal == undefined) defaultVal = 0;
+ if (min == undefined) min = 0;
+ if (max == undefined) max = 2048;
+ if (step == undefined) step = defaultStep;
+
+ return { val: defaultVal, config: { min, max, step: 10.0 * step } };
+}
+
+function seedWidget(node, inputName, inputData) {
+ const seed = ComfyWidgets.INT(node, inputName, inputData);
+ const randomize = node.addWidget("toggle", "Random seed after every gen", true, function (v) {}, {
+ on: "enabled",
+ off: "disabled",
+ serialize: false, // Don't include this in prompt.
+ });
+
+ randomize.afterQueued = () => {
+ if (randomize.value) {
+ seed.widget.value = Math.floor(Math.random() * 1125899906842624);
+ }
+ };
+
+ return { widget: seed, randomize };
+}
+
+function addMultilineWidget(node, name, defaultVal, app) {
+ const widget = {
+ type: "customtext",
+ name,
+ get value() {
+ return this.inputEl.value;
+ },
+ set value(x) {
+ this.inputEl.value = x;
+ },
+ draw: function (ctx, _, widgetWidth, y, widgetHeight) {
+ const visible = app.canvas.ds.scale > 0.5;
+ const t = ctx.getTransform();
+ const margin = 10;
+ Object.assign(this.inputEl.style, {
+ left: `${t.a * margin + t.e}px`,
+ top: `${t.d * (y + widgetHeight - margin) + t.f}px`,
+ width: `${(widgetWidth - margin * 2 - 3) * t.a}px`,
+ height: `${(this.parent.size[1] - (y + widgetHeight) - 3) * t.d}px`,
+ position: "absolute",
+ zIndex: 1,
+ fontSize: `${t.d * 10.0}px`,
+ });
+ this.inputEl.hidden = !visible;
+ },
+ };
+ widget.inputEl = document.createElement("textarea");
+ widget.inputEl.className = "comfy-multiline-input";
+ widget.inputEl.value = defaultVal;
+ document.addEventListener("click", function (event) {
+ if (!widget.inputEl.contains(event.target)) {
+ widget.inputEl.blur();
+ }
+ });
+ widget.parent = node;
+ document.body.appendChild(widget.inputEl);
+
+ node.addCustomWidget(widget);
+
+ app.canvas.onDrawBackground = function () {
+ // Draw node isnt fired once the node is off the screen
+ // if it goes off screen quickly, the input may not be removed
+ // this shifts it off screen so it can be moved back if the node is visible.
+ for (let n in app.graph._nodes) {
+ n = graph._nodes[n];
+ for (let w in n.widgets) {
+ let wid = n.widgets[w];
+ if (Object.hasOwn(wid, "inputEl")) {
+ wid.inputEl.style.left = -8000 + "px";
+ wid.inputEl.style.position = "absolute";
+ }
+ }
+ }
+ };
+
+ node.onRemoved = function () {
+ // When removing this node we need to remove the input from the DOM
+ for (let y in this.widgets) {
+ if (this.widgets[y].inputEl) {
+ this.widgets[y].inputEl.remove();
+ }
+ }
+ };
+
+ return { minWidth: 400, minHeight: 200, widget };
+}
+
+export const ComfyWidgets = {
+ "INT:seed": seedWidget,
+ "INT:noise_seed": seedWidget,
+ FLOAT(node, inputName, inputData) {
+ const { val, config } = getNumberDefaults(inputData, 0.5);
+ return { widget: node.addWidget("number", inputName, val, () => {}, config) };
+ },
+ INT(node, inputName, inputData) {
+ const { val, config } = getNumberDefaults(inputData, 1);
+ return {
+ widget: node.addWidget(
+ "number",
+ inputName,
+ val,
+ function (v) {
+ const s = this.options.step / 10;
+ this.value = Math.round(v / s) * s;
+ },
+ config
+ ),
+ };
+ },
+ STRING(node, inputName, inputData, app) {
+ const defaultVal = inputData[1].default || "";
+ const multiline = !!inputData[1].multiline;
+
+ if (multiline) {
+ return addMultilineWidget(node, inputName, defaultVal, app);
+ } else {
+ return { widget: node.addWidget("text", inputName, defaultVal, () => {}, {}) };
+ }
+ },
+};
diff --git a/web/style.css b/web/style.css
new file mode 100644
index 000000000000..c262b2f46bbd
--- /dev/null
+++ b/web/style.css
@@ -0,0 +1,150 @@
+body {
+ width: 100vw;
+ height: 100vh;
+ margin: 0;
+ overflow: hidden;
+}
+
+#graph-canvas {
+ width: 100%;
+ height: 100%;
+}
+
+.comfy-multiline-input {
+ background-color: #ffffff;
+ overflow: hidden;
+ overflow-y: auto;
+ padding: 2px;
+ resize: none;
+ border: none;
+}
+
+.comfy-modal {
+ display: none; /* Hidden by default */
+ position: fixed; /* Stay in place */
+ z-index: 100; /* Sit on top */
+ padding: 30px 30px 10px 30px;
+ background-color: #ff0000; /* Modal background */
+ box-shadow: 0px 0px 20px #888888;
+ border-radius: 10px;
+ text-align: center;
+ top: 50%;
+ left: 50%;
+ max-width: 80vw;
+ max-height: 80vh;
+ transform: translate(-50%, -50%);
+ overflow: hidden;
+ min-width: 60%;
+ justify-content: center;
+}
+
+.comfy-modal-content {
+ display: flex;
+ flex-direction: column;
+}
+
+.comfy-modal p {
+ overflow: auto;
+ white-space: pre-line; /* This will respect line breaks */
+ margin-bottom: 20px; /* Add some margin between the text and the close button*/
+}
+
+.comfy-modal button {
+ cursor: pointer;
+ color: #aaaaaa;
+ border: none;
+ background-color: transparent;
+ font-size: 24px;
+ font-weight: bold;
+ width: 100%;
+}
+
+.comfy-modal button:hover,
+.comfy-modal button:focus {
+ color: #000;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.comfy-menu {
+ width: 200px;
+ font-size: 15px;
+ position: absolute;
+ top: 50%;
+ right: 0%;
+ background-color: white;
+ text-align: center;
+ z-index: 100;
+ width: 170px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.comfy-menu button {
+ font-size: 20px;
+}
+
+.comfy-menu-btns {
+ margin-bottom: 10px;
+ width: 100%;
+}
+
+.comfy-menu-btns button {
+ font-size: 10px;
+ width: 50%;
+}
+
+.comfy-queue-btn {
+ width: 100%;
+}
+
+.comfy-list {
+ background-color: rgb(225, 225, 225);
+ margin-bottom: 10px;
+}
+
+.comfy-list-items {
+ overflow-y: scroll;
+ max-height: 100px;
+ background-color: #d0d0d0;
+ padding: 5px;
+}
+
+.comfy-list h4 {
+ min-width: 160px;
+ margin: 0;
+ padding: 3px;
+ font-weight: normal;
+}
+
+.comfy-list-items button {
+ font-size: 10px;
+}
+
+.comfy-list-actions {
+ margin: 5px;
+ display: flex;
+ gap: 5px;
+ justify-content: center;
+}
+
+.comfy-list-actions button {
+ font-size: 12px;
+}
+
+@media (prefers-color-scheme: dark) {
+ body {
+ background-color: #202020;
+ }
+ .comfy-multiline-input {
+ background-color: #202020;
+ color: white;
+ }
+}
+
+@media only screen and (max-height: 850px) {
+ .comfy-menu {
+ margin-top: -70px;
+ }
+}
diff --git a/webshit/index.html b/webshit/index.html
deleted file mode 100644
index b75a5330e438..000000000000
--- a/webshit/index.html
+++ /dev/null
@@ -1,1123 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-