Upload 21 files

web/extensions/core/colorPalette.js

@@ -0,0 +1,351 @@
+import { app } from "/scripts/app.js";
+import { $el } from "/scripts/ui.js";
+import { api } from "/scripts/api.js";
+
+// Manage color palettes
+
+const colorPalettes = {
+	"palette_1": {
+		"id": "palette_1",
+		"name": "Palette 1",
+		"colors": {
+			"node_slot": {
+				"CLIP": "#FFD500", // bright yellow
+				"CLIP_VISION": "#A8DADC", // light blue-gray
+				"CLIP_VISION_OUTPUT": "#ad7452", // rusty brown-orange
+				"CONDITIONING": "#FFA931", // vibrant orange-yellow
+				"CONTROL_NET": "#6EE7B7", // soft mint green
+				"IMAGE": "#64B5F6", // bright sky blue
+				"LATENT": "#FF9CF9", // light pink-purple
+				"MASK": "#81C784", // muted green
+				"MODEL": "#B39DDB", // light lavender-purple
+				"STYLE_MODEL": "#C2FFAE", // light green-yellow
+				"VAE": "#FF6E6E", // bright red
+			}
+		}
+	},
+	"palette_2": {
+		"id": "palette_2",
+		"name": "Palette 2",
+		"colors": {
+			"node_slot": {
+				"CLIP": "#556B2F", // Dark Olive Green
+				"CLIP_VISION": "#4B0082", // Indigo
+				"CLIP_VISION_OUTPUT": "#006400", // Green
+				"CONDITIONING": "#FF1493", // Deep Pink
+				"CONTROL_NET": "#8B4513", // Saddle Brown
+				"IMAGE": "#8B0000", // Dark Red
+				"LATENT": "#00008B", // Dark Blue
+				"MASK": "#2F4F4F", // Dark Slate Grey
+				"MODEL": "#FF8C00", // Dark Orange
+				"STYLE_MODEL": "#004A4A", // Sherpa Blue
+				"UPSCALE_MODEL": "#4A004A", // Tyrian Purple
+				"VAE": "#4F394F", // Loulou
+			}
+		}
+	}
+};
+
+const id = "Comfy.ColorPalette";
+const idCustomColorPalettes = "Comfy.CustomColorPalettes";
+const defaultColorPaletteId = "palette_1";
+const els = {}
+// const ctxMenu = LiteGraph.ContextMenu;
+app.registerExtension({
+	name: id,
+	init() {
+		const sortObjectKeys = (unordered) => {
+			return Object.keys(unordered).sort().reduce((obj, key) => {
+				obj[key] = unordered[key];
+				return obj;
+			}, {});
+		};
+
+		const getSlotTypes = async () => {
+			var types = [];
+
+			const defs = await api.getNodeDefs();
+			for (const nodeId in defs) {
+				const nodeData = defs[nodeId];
+
+				var inputs = nodeData["input"]["required"];
+				if (nodeData["input"]["optional"] != undefined){
+					inputs = Object.assign({}, nodeData["input"]["required"], nodeData["input"]["optional"])
+				}
+
+				for (const inputName in inputs) {
+					const inputData = inputs[inputName];
+					const type = inputData[0];
+
+					if (!Array.isArray(type)) {
+						types.push(type);
+					}
+				}
+
+				for (const o in nodeData["output"]) {
+					const output = nodeData["output"][o];
+					types.push(output);
+				}
+			}
+
+			return types;
+		};
+
+		const completeColorPalette = async (colorPalette) => {
+			var types = await getSlotTypes();
+
+			for (const type of types) {
+				if (!colorPalette.colors.node_slot[type]) {
+					colorPalette.colors.node_slot[type] = "";
+				}
+			}
+
+			colorPalette.colors.node_slot = sortObjectKeys(colorPalette.colors.node_slot);
+
+			return colorPalette;
+		};
+
+		const getColorPaletteTemplate = async () => {
+			let colorPalette = {
+				"id": "my_color_palette_unique_id",
+				"name": "My Color Palette",
+				"colors": {
+					"node_slot": {
+					}
+				}
+			};
+
+			return completeColorPalette(colorPalette);
+		};
+
+		const getCustomColorPalettes = () => {
+			return app.ui.settings.getSettingValue(idCustomColorPalettes, {});
+		};
+
+		const setCustomColorPalettes = (customColorPalettes) => {
+			return app.ui.settings.setSettingValue(idCustomColorPalettes, customColorPalettes);
+		};
+
+		const addCustomColorPalette = async (colorPalette) => {
+			if (typeof(colorPalette) !== "object") {
+				app.ui.dialog.show("Invalid color palette");
+				return;
+			}
+
+			if (!colorPalette.id) {
+				app.ui.dialog.show("Color palette missing id");
+				return;
+			}
+
+			if (!colorPalette.name) {
+				app.ui.dialog.show("Color palette missing name");
+				return;
+			}
+
+			if (!colorPalette.colors) {
+				app.ui.dialog.show("Color palette missing colors");
+				return;
+			}
+
+			if (colorPalette.colors.node_slot && typeof(colorPalette.colors.node_slot) !== "object") {
+				app.ui.dialog.show("Invalid color palette colors.node_slot");
+				return;
+			}
+
+			let customColorPalettes = getCustomColorPalettes();
+			customColorPalettes[colorPalette.id] = colorPalette;
+			setCustomColorPalettes(customColorPalettes);
+
+			for (const option of els.select.childNodes) {
+				if (option.value === "custom_" + colorPalette.id) {
+					els.select.removeChild(option);
+				}
+			}
+
+			els.select.append($el("option", { textContent: colorPalette.name + " (custom)", value: "custom_" + colorPalette.id, selected: true }));
+
+			setColorPalette("custom_" + colorPalette.id);
+			await loadColorPalette(colorPalette);
+		};
+
+		const deleteCustomColorPalette = async (colorPaletteId) => {
+			let customColorPalettes = getCustomColorPalettes();
+			delete customColorPalettes[colorPaletteId];
+			setCustomColorPalettes(customColorPalettes);
+
+			for (const option of els.select.childNodes) {
+				if (option.value === defaultColorPaletteId) {
+					option.selected = true;
+				}
+
+				if (option.value === "custom_" + colorPaletteId) {
+					els.select.removeChild(option);
+				}
+			}
+
+			setColorPalette(defaultColorPaletteId);
+			await loadColorPalette(getColorPalette());
+		};
+
+		const loadColorPalette = async (colorPalette) => {
+			colorPalette = await completeColorPalette(colorPalette);
+			if (colorPalette.colors) {
+				if (colorPalette.colors.node_slot) {
+					Object.assign(app.canvas.default_connection_color_byType, colorPalette.colors.node_slot);
+					app.canvas.draw(true, true);
+				}
+			}
+		};
+
+		const getColorPalette = (colorPaletteId) => {
+			if (!colorPaletteId) {
+				colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
+			}
+
+			if (colorPaletteId.startsWith("custom_")) {
+				colorPaletteId = colorPaletteId.substr(7);
+				let customColorPalettes = getCustomColorPalettes();
+				if (customColorPalettes[colorPaletteId]) {
+					return customColorPalettes[colorPaletteId];
+				}
+			}
+
+			return colorPalettes[colorPaletteId];
+		};
+
+		const setColorPalette = (colorPaletteId) => {
+			app.ui.settings.setSettingValue(id, colorPaletteId);
+		};
+
+		const fileInput = $el("input", {
+			type: "file",
+			accept: ".json",
+			style: { display: "none" },
+			parent: document.body,
+			onchange: () => {
+				let file = fileInput.files[0];
+
+				if (file.type === "application/json" || file.name.endsWith(".json")) {
+					const reader = new FileReader();
+					reader.onload = async () => {
+						await addCustomColorPalette(JSON.parse(reader.result));
+					};
+					reader.readAsText(file);
+				}
+			},
+		});
+
+		app.ui.settings.addSetting({
+			id,
+			name: "Color Palette",
+			type: (name, setter, value) => {
+				let options = [];
+
+				for (const c in colorPalettes) {
+					const colorPalette = colorPalettes[c];
+					options.push($el("option", { textContent: colorPalette.name, value: colorPalette.id, selected: colorPalette.id === value }));
+				}
+
+				let customColorPalettes = getCustomColorPalettes();
+				for (const c in customColorPalettes) {
+					const colorPalette = customColorPalettes[c];
+					options.push($el("option", { textContent: colorPalette.name + " (custom)", value: "custom_" + colorPalette.id, selected: "custom_" + colorPalette.id === value }));
+				}
+
+				return $el("div", [
+					$el("label", { textContent: name || id }, [
+						els.select = $el("select", {
+							onchange: (e) => {
+								setter(e.target.value);
+							}
+						}, options)
+					]),
+					$el("input", {
+						type: "button",
+						value: "Export",
+						onclick: async () => {
+							const colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
+							const colorPalette = await completeColorPalette(getColorPalette(colorPaletteId));
+							const json = JSON.stringify(colorPalette, null, 2); // 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: colorPaletteId + ".json",
+								style: { display: "none" },
+								parent: document.body,
+							});
+							a.click();
+							setTimeout(function () {
+								a.remove();
+								window.URL.revokeObjectURL(url);
+							}, 0);
+						},
+					}),
+					$el("input", {
+						type: "button",
+						value: "Import",
+						onclick: () => {
+							fileInput.click();
+						}
+					}),
+					$el("input", {
+						type: "button",
+						value: "Template",
+						onclick: async () => {
+							const colorPalette = await getColorPaletteTemplate();
+							const json = JSON.stringify(colorPalette, null, 2); // 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: "color_palette.json",
+								style: { display: "none" },
+								parent: document.body,
+							});
+							a.click();
+							setTimeout(function () {
+								a.remove();
+								window.URL.revokeObjectURL(url);
+							}, 0);
+						}
+					}),
+					$el("input", {
+						type: "button",
+						value: "Delete",
+						onclick: async () => {
+							let colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
+
+							if (colorPalettes[colorPaletteId]) {
+								app.ui.dialog.show("You cannot delete built-in color palette");
+								return;
+							}
+
+							if (colorPaletteId.startsWith("custom_")) {
+								colorPaletteId = colorPaletteId.substr(7);
+							}
+
+							await deleteCustomColorPalette(colorPaletteId);
+						}
+					}),
+				]);
+			},
+			defaultValue: defaultColorPaletteId,
+			async onChange(value) {
+				if (!value) {
+					return;
+				}
+
+				if (colorPalettes[value]) {
+					await loadColorPalette(colorPalettes[value]);
+				} else if (value.startsWith("custom_")) {
+					value = value.substr(7);
+					let customColorPalettes = getCustomColorPalettes();
+					if (customColorPalettes[value]) {
+						await loadColorPalette(customColorPalettes[value]);
+					}
+				}
+			},
+		});
+	},
+});

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;
+				};
+			}
+		}
+	},
+});

web/extensions/core/invertMenuScrolling.js

@@ -0,0 +1,36 @@
+import { app } from "/scripts/app.js";
+
+// Inverts the scrolling of context menus
+
+const id = "Comfy.InvertMenuScrolling";
+const ctxMenu = LiteGraph.ContextMenu;
+app.registerExtension({
+	name: id,
+	init() {
+		const replace = () => {
+			LiteGraph.ContextMenu = function (values, options) {
+				options = options || {};
+				if (options.scroll_speed) {
+					options.scroll_speed *= -1;
+				} else {
+					options.scroll_speed = -0.1;
+				}
+				return ctxMenu.call(this, values, options);
+			};
+			LiteGraph.ContextMenu.prototype = ctxMenu.prototype;
+		};
+		app.ui.settings.addSetting({
+			id,
+			name: "Invert Menu Scrolling",
+			type: "boolean",
+			defaultValue: false,
+			onChange(value) {
+				if (value) {
+					replace();
+				} else {
+					LiteGraph.ContextMenu = ctxMenu;
+				}
+			},
+		});
+	},
+});

web/extensions/core/rerouteNode.js

@@ -0,0 +1,201 @@
+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.onConnectionsChange = function (type, index, connected, link_info) {
+					// Prevent multiple connections to different types when we have no input
+					if (connected && type === LiteGraph.OUTPUT) {
+						// Ignore wildcard nodes as these will be updated to real types
+						const types = new Set(this.outputs[0].links.map((l) => app.graph.links[l].type).filter((t) => t !== "*"));
+						if (types.size > 1) {
+							for (let i = 0; i < this.outputs[0].links.length - 1; i++) {
+								const linkId = this.outputs[0].links[i];
+								const link = app.graph.links[linkId];
+								const node = app.graph.getNodeById(link.target_id);
+								node.disconnectInput(link.target_slot);
+							}
+						}
+					}
+
+					// Find root input
+					let currentNode = this;
+					let updateNodes = [];
+					let inputType = null;
+					let inputNode = null;
+					while (currentNode) {
+						updateNodes.unshift(currentNode);
+						const linkId = currentNode.inputs[0].link;
+						if (linkId !== null) {
+							const link = app.graph.links[linkId];
+							const node = app.graph.getNodeById(link.origin_id);
+							const type = node.constructor.type;
+							if (type === "Reroute") {
+								if (node === this) {
+									// We've found a circle
+									currentNode.disconnectInput(link.target_slot);
+									currentNode = null;
+								}
+								else {
+								// Move the previous node
+									currentNode = node;
+								}
+							} else {
+								// We've found the end
+								inputNode = currentNode;
+								inputType = node.outputs[link.origin_slot].type;
+								break;
+							}
+						} else {
+							// This path has no input node
+							currentNode = null;
+							break;
+						}
+					}
+
+					// Find all outputs
+					const nodes = [this];
+					let outputType = null;
+					while (nodes.length) {
+						currentNode = nodes.pop();
+						const outputs = (currentNode.outputs ? currentNode.outputs[0].links : []) || [];
+						if (outputs.length) {
+							for (const linkId of outputs) {
+								const link = app.graph.links[linkId];
+
+								// When disconnecting sometimes the link is still registered
+								if (!link) continue;
+
+								const node = app.graph.getNodeById(link.target_id);
+								const type = node.constructor.type;
+
+								if (type === "Reroute") {
+									// Follow reroute nodes
+									nodes.push(node);
+									updateNodes.push(node);
+								} else {
+									// We've found an output
+									const nodeOutType = node.inputs[link.target_slot].type;
+									if (inputType && nodeOutType !== inputType) {
+										// The output doesnt match our input so disconnect it
+										node.disconnectInput(link.target_slot);
+									} else {
+										outputType = nodeOutType;
+									}
+								}
+							}
+						} else {
+							// No more outputs for this path
+						}
+					}
+
+					const displayType = inputType || outputType || "*";
+					const color = LGraphCanvas.link_type_colors[displayType];
+
+					// Update the types of each node
+					for (const node of updateNodes) {
+						// If we dont have an input type we are always wildcard but we'll show the output type
+						// This lets you change the output link to a different type and all nodes will update
+						node.outputs[0].type = inputType || "*";
+						node.__outputType = displayType;
+						node.outputs[0].name = node.properties.showOutputText ? displayType : "";
+						node.size = node.computeSize();
+
+						for (const l of node.outputs[0].links || []) {
+							const link = app.graph.links[l];
+							if (link) {
+								link.color = color;
+							}
+						}
+					}
+
+					if (inputNode) {
+						const link = app.graph.links[inputNode.inputs[0].link];
+						if (link) {
+							link.color = color;
+						}
+					}
+				};
+
+				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.__outputType || this.outputs[0].type;
+							} else {
+								this.outputs[0].name = "";
+							}
+							this.size = this.computeSize();
+							app.graph.setDirtyCanvas(true, 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(75, LiteGraph.NODE_TEXT_SIZE * this.outputs[0].name.length * 0.6 + 40)
+						: 75,
+					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",
+				collapsable: false,
+			})
+		);
+
+		RerouteNode.category = "utils";
+	},
+});

web/extensions/core/saveImageExtraOutput.js

@@ -0,0 +1,100 @@
+import { app } from "/scripts/app.js";
+
+// Use widget values and dates in output filenames
+
+app.registerExtension({
+	name: "Comfy.SaveImageExtraOutput",
+	async beforeRegisterNodeDef(nodeType, nodeData, app) {
+		if (nodeData.name === "SaveImage") {
+			const onNodeCreated = nodeType.prototype.onNodeCreated;
+
+         // Simple date formatter
+			const parts = {
+				d: (d) => d.getDate(),
+				M: (d) => d.getMonth() + 1,
+				h: (d) => d.getHours(),
+				m: (d) => d.getMinutes(),
+				s: (d) => d.getSeconds(),
+			};
+			const format =
+				Object.keys(parts)
+					.map((k) => k + k + "?")
+					.join("|") + "|yyy?y?";
+
+			function formatDate(text, date) {
+				return text.replace(new RegExp(format, "g"), function (text) {
+					if (text === "yy") return (date.getFullYear() + "").substring(2);
+					if (text === "yyyy") return date.getFullYear();
+					if (text[0] in parts) {
+						const p = parts[text[0]](date);
+						return (p + "").padStart(text.length, "0");
+					}
+					return text;
+				});
+			}
+
+         // When the SaveImage node is created we want to override the serialization of the output name widget to run our S&R
+			nodeType.prototype.onNodeCreated = function () {
+				const r = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
+
+				const widget = this.widgets.find((w) => w.name === "filename_prefix");
+				widget.serializeValue = () => {
+					return widget.value.replace(/%([^%]+)%/g, function (match, text) {
+						const split = text.split(".");
+						if (split.length !== 2) {
+                     // Special handling for dates
+							if (split[0].startsWith("date:")) {
+								return formatDate(split[0].substring(5), new Date());
+							}
+
+							if (text !== "width" && text !== "height") {
+								// Dont warn on standard replacements
+								console.warn("Invalid replacement pattern", text);
+							}
+							return match;
+						}
+
+						// Find node with matching S&R property name
+						let nodes = app.graph._nodes.filter((n) => n.properties?.["Node name for S&R"] === split[0]);
+						// If we cant, see if there is a node with that title
+						if (!nodes.length) {
+							nodes = app.graph._nodes.filter((n) => n.title === split[0]);
+						}
+						if (!nodes.length) {
+							console.warn("Unable to find node", split[0]);
+							return match;
+						}
+
+						if (nodes.length > 1) {
+							console.warn("Multiple nodes matched", split[0], "using first match");
+						}
+
+						const node = nodes[0];
+
+						const widget = node.widgets?.find((w) => w.name === split[1]);
+						if (!widget) {
+							console.warn("Unable to find widget", split[1], "on node", split[0], node);
+							return match;
+						}
+
+						return ((widget.value ?? "") + "").replaceAll(/\/|\\/g, "_");
+					});
+				};
+
+				return r;
+			};
+		} else {
+         // When any other node is created add a property to alias the node
+			const onNodeCreated = nodeType.prototype.onNodeCreated;
+			nodeType.prototype.onNodeCreated = function () {
+				const r = onNodeCreated ? onNodeCreated.apply(this, arguments) : undefined;
+
+				if (!this.properties || !("Node name for S&R" in this.properties)) {
+					this.addProperty("Node name for S&R", this.title, "string");
+				}
+
+				return r;
+			};
+		}
+	},
+});

web/extensions/core/slotDefaults.js

@@ -0,0 +1,21 @@
+import { app } from "/scripts/app.js";
+
+// Adds defaults for quickly adding nodes with middle click on the input/output
+
+app.registerExtension({
+	name: "Comfy.SlotDefaults",
+	init() {
+		LiteGraph.middle_click_slot_add_default_node = true;
+		LiteGraph.slot_types_default_in = {
+			MODEL: "CheckpointLoaderSimple",
+			LATENT: "EmptyLatentImage",
+			VAE: "VAELoader",
+		};
+
+		LiteGraph.slot_types_default_out = {
+			LATENT: "VAEDecode",
+			IMAGE: "SaveImage",
+			CLIP: "CLIPTextEncode",
+		};
+	},
+});

web/extensions/core/snapToGrid.js

@@ -0,0 +1,89 @@
+import { app } from "/scripts/app.js";
+
+// Shift + drag/resize to snap to grid
+
+app.registerExtension({
+	name: "Comfy.SnapToGrid",
+	init() {
+		// Add setting to control grid size
+		app.ui.settings.addSetting({
+			id: "Comfy.SnapToGrid.GridSize",
+			name: "Grid Size",
+			type: "number",
+			attrs: {
+				min: 1,
+				max: 500,
+			},
+			tooltip:
+				"When dragging and resizing nodes while holding shift they will be aligned to the grid, this controls the size of that grid.",
+			defaultValue: LiteGraph.CANVAS_GRID_SIZE,
+			onChange(value) {
+				LiteGraph.CANVAS_GRID_SIZE = +value;
+			},
+		});
+
+		// After moving a node, if the shift key is down align it to grid
+		const onNodeMoved = app.canvas.onNodeMoved;
+		app.canvas.onNodeMoved = function (node) {
+			const r = onNodeMoved?.apply(this, arguments);
+
+			if (app.shiftDown) {
+				// Ensure all selected nodes are realigned
+				for (const id in this.selected_nodes) {
+					this.selected_nodes[id].alignToGrid();
+				}
+			}
+
+			return r;
+		};
+
+		// When a node is added, add a resize handler to it so we can fix align the size with the grid
+		const onNodeAdded = app.graph.onNodeAdded;
+		app.graph.onNodeAdded = function (node) {
+			const onResize = node.onResize;
+			node.onResize = function () {
+				if (app.shiftDown) {
+					const w = LiteGraph.CANVAS_GRID_SIZE * Math.round(node.size[0] / LiteGraph.CANVAS_GRID_SIZE);
+					const h = LiteGraph.CANVAS_GRID_SIZE * Math.round(node.size[1] / LiteGraph.CANVAS_GRID_SIZE);
+					node.size[0] = w;
+					node.size[1] = h;
+				}
+				return onResize?.apply(this, arguments);
+			};
+			return onNodeAdded?.apply(this, arguments);
+		};
+
+		// Draw a preview of where the node will go if holding shift and the node is selected
+		const origDrawNode = LGraphCanvas.prototype.drawNode;
+		LGraphCanvas.prototype.drawNode = function (node, ctx) {
+			if (app.shiftDown && this.node_dragged && node.id in this.selected_nodes) {
+				const x = LiteGraph.CANVAS_GRID_SIZE * Math.round(node.pos[0] / LiteGraph.CANVAS_GRID_SIZE);
+				const y = LiteGraph.CANVAS_GRID_SIZE * Math.round(node.pos[1] / LiteGraph.CANVAS_GRID_SIZE);
+
+				const shiftX = x - node.pos[0];
+				let shiftY = y - node.pos[1];
+
+				let w, h;
+				if (node.flags.collapsed) {
+					w = node._collapsed_width;
+					h = LiteGraph.NODE_TITLE_HEIGHT;
+					shiftY -= LiteGraph.NODE_TITLE_HEIGHT;
+				} else {
+					w = node.size[0];
+					h = node.size[1];
+					let titleMode = node.constructor.title_mode;
+					if (titleMode !== LiteGraph.TRANSPARENT_TITLE && titleMode !== LiteGraph.NO_TITLE) {
+						h += LiteGraph.NODE_TITLE_HEIGHT;
+						shiftY -= LiteGraph.NODE_TITLE_HEIGHT;
+					}
+				}
+				const f = ctx.fillStyle;
+				ctx.fillStyle = "rgba(100, 100, 100, 0.5)";
+				ctx.fillRect(shiftX, shiftY, w, h);
+				ctx.fillStyle = f;
+			}
+
+			return origDrawNode.apply(this, arguments);
+		};
+	},
+});

web/extensions/core/uploadImage.js

@@ -0,0 +1,12 @@
+import { app } from "/scripts/app.js";
+
+// Adds an upload button to the nodes
+
+app.registerExtension({
+	name: "Comfy.UploadImage",
+	async beforeRegisterNodeDef(nodeType, nodeData, app) {
+		if (nodeData.name === "LoadImage" || nodeData.name === "LoadImageMask") {
+			nodeData.input.required.upload = ["IMAGEUPLOAD"];
+		}
+	},
+});

web/extensions/core/widgetInputs.js

@@ -0,0 +1,362 @@
+import { ComfyWidgets, addRandomizeWidget } from "/scripts/widgets.js";
+import { app } from "/scripts/app.js";
+
+const CONVERTED_TYPE = "converted-widget";
+const VALID_TYPES = ["STRING", "combo", "number"];
+
+function isConvertableWidget(widget, config) {
+	return VALID_TYPES.includes(widget.type) || VALID_TYPES.includes(config[0]);
+}
+
+function hideWidget(node, widget, suffix = "") {
+	widget.origType = widget.type;
+	widget.origComputeSize = widget.computeSize;
+	widget.origSerializeValue = widget.serializeValue;
+	widget.computeSize = () => [0, -4]; // -4 is due to the gap litegraph adds between widgets automatically
+	widget.type = CONVERTED_TYPE + suffix;
+	widget.serializeValue = () => {
+		// Prevent serializing the widget if we have no input linked
+		const { link } = node.inputs.find((i) => i.widget?.name === widget.name);
+		if (link == null) {
+			return undefined;
+		}
+		return widget.origSerializeValue ? widget.origSerializeValue() : widget.value;
+	};
+
+	// Hide any linked widgets, e.g. seed+randomize
+	if (widget.linkedWidgets) {
+		for (const w of widget.linkedWidgets) {
+			hideWidget(node, w, ":" + widget.name);
+		}
+	}
+}
+
+function showWidget(widget) {
+	widget.type = widget.origType;
+	widget.computeSize = widget.origComputeSize;
+	widget.serializeValue = widget.origSerializeValue;
+
+	delete widget.origType;
+	delete widget.origComputeSize;
+	delete widget.origSerializeValue;
+
+	// Hide any linked widgets, e.g. seed+randomize
+	if (widget.linkedWidgets) {
+		for (const w of widget.linkedWidgets) {
+			showWidget(w);
+		}
+	}
+}
+
+function convertToInput(node, widget, config) {
+	hideWidget(node, widget);
+
+	const { linkType } = getWidgetType(config);
+
+	// Add input and store widget config for creating on primitive node
+	const sz = node.size;
+	node.addInput(widget.name, linkType, {
+		widget: { name: widget.name, config },
+	});
+
+	// Restore original size but grow if needed
+	node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])]);
+}
+
+function convertToWidget(node, widget) {
+	showWidget(widget);
+	const sz = node.size;
+	node.removeInput(node.inputs.findIndex((i) => i.widget?.name === widget.name));
+
+	// Restore original size but grow if needed
+	node.setSize([Math.max(sz[0], node.size[0]), Math.max(sz[1], node.size[1])]);
+}
+
+function getWidgetType(config) {
+	// Special handling for COMBO so we restrict links based on the entries
+	let type = config[0];
+	let linkType = type;
+	if (type instanceof Array) {
+		type = "COMBO";
+		linkType = linkType.join(",");
+	}
+	return { type, linkType };
+}
+
+app.registerExtension({
+	name: "Comfy.WidgetInputs",
+	async beforeRegisterNodeDef(nodeType, nodeData, app) {
+		// Add menu options to conver to/from widgets
+		const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
+		nodeType.prototype.getExtraMenuOptions = function (_, options) {
+			const r = origGetExtraMenuOptions ? origGetExtraMenuOptions.apply(this, arguments) : undefined;
+
+			if (this.widgets) {
+				let toInput = [];
+				let toWidget = [];
+				for (const w of this.widgets) {
+					if (w.type === CONVERTED_TYPE) {
+						toWidget.push({
+							content: `Convert ${w.name} to widget`,
+							callback: () => convertToWidget(this, w),
+						});
+					} else {
+						const config = nodeData?.input?.required[w.name] || nodeData?.input?.optional?.[w.name] || [w.type, w.options || {}];
+						if (isConvertableWidget(w, config)) {
+							toInput.push({
+								content: `Convert ${w.name} to input`,
+								callback: () => convertToInput(this, w, config),
+							});
+						}
+					}
+				}
+				if (toInput.length) {
+					options.push(...toInput, null);
+				}
+
+				if (toWidget.length) {
+					options.push(...toWidget, null);
+				}
+			}
+
+			return r;
+		};
+
+		// On initial configure of nodes hide all converted widgets
+		const origOnConfigure = nodeType.prototype.onConfigure;
+		nodeType.prototype.onConfigure = function () {
+			const r = origOnConfigure ? origOnConfigure.apply(this, arguments) : undefined;
+
+			if (this.inputs) {
+				for (const input of this.inputs) {
+					if (input.widget) {
+						const w = this.widgets.find((w) => w.name === input.widget.name);
+						if (w) {
+							hideWidget(this, w);
+						} else {
+							convertToWidget(this, input)
+						}
+					}
+				}
+			}
+
+			return r;
+		};
+
+		function isNodeAtPos(pos) {
+			for (const n of app.graph._nodes) {
+				if (n.pos[0] === pos[0] && n.pos[1] === pos[1]) {
+					return true;
+				}
+			}
+			return false;
+		}
+
+		// Double click a widget input to automatically attach a primitive
+		const origOnInputDblClick = nodeType.prototype.onInputDblClick;
+		const ignoreDblClick = Symbol();
+		nodeType.prototype.onInputDblClick = function (slot) {
+			const r = origOnInputDblClick ? origOnInputDblClick.apply(this, arguments) : undefined;
+
+			const input = this.inputs[slot];
+			if (input.widget && !input[ignoreDblClick]) {
+				const node = LiteGraph.createNode("PrimitiveNode");
+				app.graph.add(node);
+
+				// Calculate a position that wont directly overlap another node
+				const pos = [this.pos[0] - node.size[0] - 30, this.pos[1]];
+				while (isNodeAtPos(pos)) {
+					pos[1] += LiteGraph.NODE_TITLE_HEIGHT;
+				}
+
+				node.pos = pos;
+				node.connect(0, this, slot);
+				node.title = input.name;
+
+				// Prevent adding duplicates due to triple clicking
+				input[ignoreDblClick] = true;
+				setTimeout(() => {
+					delete input[ignoreDblClick];
+				}, 300);
+			}
+
+			return r;
+		};
+	},
+	registerCustomNodes() {
+		class PrimitiveNode {
+			constructor() {
+				this.addOutput("connect to widget input", "*");
+				this.serialize_widgets = true;
+				this.isVirtualNode = true;
+			}
+
+			applyToGraph() {
+				if (!this.outputs[0].links?.length) return;
+
+				// For each output link copy our value over the original widget value
+				for (const l of this.outputs[0].links) {
+					const linkInfo = app.graph.links[l];
+					const node = this.graph.getNodeById(linkInfo.target_id);
+					const input = node.inputs[linkInfo.target_slot];
+					const widgetName = input.widget.name;
+					if (widgetName) {
+						const widget = node.widgets.find((w) => w.name === widgetName);
+						if (widget) {
+							widget.value = this.widgets[0].value;
+							if (widget.callback) {
+								widget.callback(widget.value, app.canvas, node, app.canvas.graph_mouse, {});
+							}
+						}
+					}
+				}
+			}
+
+			onConnectionsChange(_, index, connected) {
+				if (connected) {
+					if (this.outputs[0].links?.length) {
+						if (!this.widgets?.length) {
+							this.#onFirstConnection();
+						}
+						if (!this.widgets?.length && this.outputs[0].widget) {
+							// On first load it often cant recreate the widget as the other node doesnt exist yet
+							// Manually recreate it from the output info
+							this.#createWidget(this.outputs[0].widget.config);
+						}
+					}
+				} else if (!this.outputs[0].links?.length) {
+					this.#onLastDisconnect();
+				}
+			}
+
+			onConnectOutput(slot, type, input, target_node, target_slot) {
+				// Fires before the link is made allowing us to reject it if it isn't valid
+
+				// No widget, we cant connect
+				if (!input.widget) return false;
+
+				if (this.outputs[slot].links?.length) {
+					return this.#isValidConnection(input);
+				}
+			}
+
+			#onFirstConnection() {
+				// First connection can fire before the graph is ready on initial load so random things can be missing
+				const linkId = this.outputs[0].links[0];
+				const link = this.graph.links[linkId];
+				if (!link) return;
+
+				const theirNode = this.graph.getNodeById(link.target_id);
+				if (!theirNode || !theirNode.inputs) return;
+
+				const input = theirNode.inputs[link.target_slot];
+				if (!input) return;
+
+				const widget = input.widget;
+				const { type, linkType } = getWidgetType(widget.config);
+
+				// Update our output to restrict to the widget type
+				this.outputs[0].type = linkType;
+				this.outputs[0].name = type;
+				this.outputs[0].widget = widget;
+
+				this.#createWidget(widget.config, theirNode, widget.name);
+			}
+
+			#createWidget(inputData, node, widgetName) {
+				let type = inputData[0];
+
+				if (type instanceof Array) {
+					type = "COMBO";
+				}
+
+				let widget;
+				if (type in ComfyWidgets) {
+					widget = (ComfyWidgets[type](this, "value", inputData, app) || {}).widget;
+				} else {
+					widget = this.addWidget(type, "value", null, () => {}, {});
+				}
+
+				if (node?.widgets && widget) {
+					const theirWidget = node.widgets.find((w) => w.name === widgetName);
+					if (theirWidget) {
+						widget.value = theirWidget.value;
+					}
+				}
+
+				if (widget.type === "number") {
+					addRandomizeWidget(this, widget, "Random after every gen");
+				}
+
+				// When our value changes, update other widgets to reflect our changes
+				// e.g. so LoadImage shows correct image
+				const callback = widget.callback;
+				const self = this;
+				widget.callback = function () {
+					const r = callback ? callback.apply(this, arguments) : undefined;
+					self.applyToGraph();
+					return r;
+				};
+
+				// Grow our node if required
+				const sz = this.computeSize();
+				if (this.size[0] < sz[0]) {
+					this.size[0] = sz[0];
+				}
+				if (this.size[1] < sz[1]) {
+					this.size[1] = sz[1];
+				}
+
+				requestAnimationFrame(() => {
+					if (this.onResize) {
+						this.onResize(this.size);
+					}
+				});
+			}
+
+			#isValidConnection(input) {
+				// Only allow connections where the configs match
+				const config1 = this.outputs[0].widget.config;
+				const config2 = input.widget.config;
+
+				if (config1[0] !== config2[0]) return false;
+
+				for (const k in config1[1]) {
+					if (k !== "default") {
+						if (config1[1][k] !== config2[1][k]) {
+							return false;
+						}
+					}
+				}
+
+				return true;
+			}
+
+			#onLastDisconnect() {
+				// We cant remove + re-add the output here as if you drag a link over the same link
+				// it removes, then re-adds, causing it to break
+				this.outputs[0].type = "*";
+				this.outputs[0].name = "connect to widget input";
+				delete this.outputs[0].widget;
+
+				if (this.widgets) {
+					// Allow widgets to cleanup
+					for (const w of this.widgets) {
+						if (w.onRemove) {
+							w.onRemove();
+						}
+					}
+					this.widgets.length = 0;
+				}
+			}
+		}
+
+		LiteGraph.registerNodeType(
+			"PrimitiveNode",
+			Object.assign(PrimitiveNode, {
+				title: "Primitive",
+			})
+		);
+		PrimitiveNode.category = "utils";
+	},
+});

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);

web/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+		<link rel="stylesheet" type="text/css" href="lib/litegraph.css" />
+		<link rel="stylesheet" type="text/css" href="style.css" />
+		<script type="text/javascript" src="lib/litegraph.core.js"></script>
+		<script type="module">
+			import { app } from "/scripts/app.js";
+			await app.setup();
+			window.app = app;
+			window.graph = app.graph;
+		</script>
+	</head>
+	<body></body>
+</html>

web/jsconfig.json

@@ -0,0 +1,9 @@
+{
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"/*": ["./*"]
+		}
+	},
+	"include": ["."]
+}

web/lib/litegraph.css

@@ -0,0 +1,680 @@
+/* this CSS contains only the basic CSS needed to run the app and use it */
+
+.lgraphcanvas {
+    /*cursor: crosshair;*/
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+	outline: none;
+    font-family: Tahoma, sans-serif;
+}
+
+.lgraphcanvas * {
+    box-sizing: border-box;
+}
+
+.litegraph.litecontextmenu {
+    font-family: Tahoma, sans-serif;
+    position: fixed;
+    top: 100px;
+    left: 100px;
+    min-width: 100px;
+    color: #aaf;
+    padding: 0;
+    box-shadow: 0 0 10px black !important;
+    background-color: #2e2e2e !important;
+	z-index: 10;
+}
+
+.litegraph.litecontextmenu.dark {
+    background-color: #000 !important;
+}
+
+.litegraph.litecontextmenu .litemenu-title img {
+    margin-top: 2px;
+    margin-left: 2px;
+    margin-right: 4px;
+}
+
+.litegraph.litecontextmenu .litemenu-entry {
+    margin: 2px;
+    padding: 2px;
+}
+
+.litegraph.litecontextmenu .litemenu-entry.submenu {
+    background-color: #2e2e2e !important;
+}
+
+.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
+    background-color: #000 !important;
+}
+
+.litegraph .litemenubar ul {
+    font-family: Tahoma, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+.litegraph .litemenubar li {
+    font-size: 14px;
+    color: #999;
+    display: inline-block;
+    min-width: 50px;
+    padding-left: 10px;
+    padding-right: 10px;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    cursor: pointer;
+}
+
+.litegraph .litemenubar li:hover {
+    background-color: #777;
+    color: #eee;
+}
+
+.litegraph .litegraph .litemenubar-panel {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    min-width: 100px;
+    background-color: #444;
+    box-shadow: 0 0 3px black;
+    padding: 4px;
+    border-bottom: 2px solid #aaf;
+    z-index: 10;
+}
+
+.litegraph .litemenu-entry,
+.litemenu-title {
+    font-size: 12px;
+    color: #aaa;
+    padding: 0 0 0 4px;
+    margin: 2px;
+    padding-left: 2px;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+}
+
+.litegraph .litemenu-entry .icon {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin: 2px;
+    vertical-align: top;
+}
+
+.litegraph .litemenu-entry.checked .icon {
+    background-color: #aaf;
+}
+
+.litegraph .litemenu-entry .more {
+    float: right;
+    padding-right: 5px;
+}
+
+.litegraph .litemenu-entry.disabled {
+    opacity: 0.5;
+    cursor: default;
+}
+
+.litegraph .litemenu-entry.separator {
+    display: block;
+    border-top: 1px solid #333;
+    border-bottom: 1px solid #666;
+    width: 100%;
+    height: 0px;
+    margin: 3px 0 2px 0;
+    background-color: transparent;
+    padding: 0 !important;
+    cursor: default !important;
+}
+
+.litegraph .litemenu-entry.has_submenu {
+    border-right: 2px solid cyan;
+}
+
+.litegraph .litemenu-title {
+    color: #dde;
+    background-color: #111;
+    margin: 0;
+    padding: 2px;
+    cursor: default;
+}
+
+.litegraph .litemenu-entry:hover:not(.disabled):not(.separator) {
+    background-color: #444 !important;
+    color: #eee;
+    transition: all 0.2s;
+}
+
+.litegraph .litemenu-entry .property_name {
+    display: inline-block;
+    text-align: left;
+    min-width: 80px;
+    min-height: 1.2em;
+}
+
+.litegraph .litemenu-entry .property_value {
+    display: inline-block;
+    background-color: rgba(0, 0, 0, 0.5);
+    text-align: right;
+    min-width: 80px;
+    min-height: 1.2em;
+    vertical-align: middle;
+    padding-right: 10px;
+}
+
+.litegraph.litesearchbox {
+    font-family: Tahoma, sans-serif;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding-top: 4px;
+}
+
+.litegraph.litesearchbox input,
+.litegraph.litesearchbox select {
+    margin-top: 3px;
+    min-width: 60px;
+    min-height: 1.5em;
+    background-color: black;
+    border: 0;
+    color: white;
+    padding-left: 10px;
+    margin-right: 5px;
+}
+
+.litegraph.litesearchbox .name {
+    display: inline-block;
+    min-width: 60px;
+    min-height: 1.5em;
+    padding-left: 10px;
+}
+
+.litegraph.litesearchbox .helper {
+    overflow: auto;
+    max-height: 200px;
+    margin-top: 2px;
+}
+
+.litegraph.lite-search-item {
+    font-family: Tahoma, sans-serif;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    padding-top: 2px;
+}
+
+.litegraph.lite-search-item.not_in_filter{
+    /*background-color: rgba(50, 50, 50, 0.5);*/
+    /*color: #999;*/
+    color: #B99;
+    font-style: italic;
+}
+
+.litegraph.lite-search-item.generic_type{
+    /*background-color: rgba(50, 50, 50, 0.5);*/
+    /*color: #DD9;*/
+    color: #999;
+    font-style: italic;
+}
+
+.litegraph.lite-search-item:hover,
+.litegraph.lite-search-item.selected {
+    cursor: pointer;
+    background-color: white;
+    color: black;
+}
+
+/* DIALOGs ******/
+
+.litegraph .dialog {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -150px;
+    margin-left: -200px;
+
+    background-color: #2A2A2A;
+
+    min-width: 400px;
+    min-height: 200px;
+	box-shadow: 0 0 4px #111;
+    border-radius: 6px;
+}
+
+.litegraph .dialog.settings {
+	left: 10px;
+	top: 10px;
+	height: calc( 100% - 20px );
+	margin: auto;
+    max-width: 50%;
+}
+
+.litegraph .dialog.centered {
+    top: 50px;
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+    min-width: 600px;
+    min-height: 300px;
+    height: calc( 100% - 100px );
+	margin: auto;
+}
+
+.litegraph .dialog .close {
+    float: right;
+	margin: 4px;
+	margin-right: 10px;
+	cursor: pointer;
+	font-size: 1.4em;
+}
+
+.litegraph .dialog .close:hover {
+	color: white;
+}
+
+.litegraph .dialog .dialog-header {
+	color: #AAA;
+	border-bottom: 1px solid #161616;
+}
+
+.litegraph .dialog .dialog-header { height: 40px; }
+.litegraph .dialog .dialog-footer { height: 50px; padding: 10px; border-top: 1px solid #1a1a1a;}
+
+.litegraph .dialog .dialog-header .dialog-title {
+    font: 20px "Arial";
+    margin: 4px;
+    padding: 4px 10px;
+    display: inline-block;
+}
+
+.litegraph .dialog .dialog-content, .litegraph .dialog .dialog-alt-content {
+    height: calc(100% - 90px);
+    width: 100%;
+	min-height: 100px;
+    display: inline-block;
+	color: #AAA;
+    /*background-color: black;*/
+    overflow: auto;
+}
+
+.litegraph .dialog .dialog-content h3 {
+	margin: 10px;
+}
+
+.litegraph .dialog .dialog-content .connections {
+	flex-direction: row;
+}
+
+.litegraph .dialog .dialog-content .connections .connections_side {
+	width: calc(50% - 5px);
+	min-height: 100px;
+	background-color: black;
+	display: flex;
+}
+
+.litegraph .dialog .node_type {
+	font-size: 1.2em;
+	display: block;
+	margin: 10px;
+}
+
+.litegraph .dialog .node_desc {
+	opacity: 0.5;
+	display: block;
+	margin: 10px;
+}
+
+.litegraph .dialog .separator {
+	display: block;
+	width: calc( 100% - 4px );
+	height: 1px;
+	border-top: 1px solid #000;
+	border-bottom: 1px solid #333;
+	margin: 10px 2px;
+	padding: 0;
+}
+
+.litegraph .dialog .property {
+	margin-bottom: 2px;
+	padding: 4px;
+}
+
+.litegraph .dialog .property:hover {
+	background: #545454;
+}
+
+.litegraph .dialog .property_name {
+	color: #737373;
+    display: inline-block;
+    text-align: left;
+    vertical-align: top;
+    width: 160px;
+	padding-left: 4px;
+	overflow: hidden;
+    margin-right: 6px;
+}
+
+.litegraph .dialog .property:hover .property_name {
+    color: white;
+}
+
+.litegraph .dialog .property_value {
+    display: inline-block;
+    text-align: right;
+	color: #AAA;
+	background-color: #1A1A1A;
+    /*width: calc( 100% - 122px );*/
+    max-width: calc( 100% - 162px );
+    min-width: 200px;
+	max-height: 300px;
+    min-height: 20px;
+    padding: 4px;
+	padding-right: 12px;
+	overflow: hidden;
+	cursor: pointer;
+	border-radius: 3px;
+}
+
+.litegraph .dialog .property_value:hover {
+	color: white;
+}
+
+.litegraph .dialog .property.boolean .property_value {
+	padding-right: 30px;
+    color: #A88;
+    /*width: auto;
+    float: right;*/
+}
+
+.litegraph .dialog .property.boolean.bool-on .property_name{
+    color: #8A8;
+}
+.litegraph .dialog .property.boolean.bool-on .property_value{
+    color: #8A8;
+}
+
+.litegraph .dialog .btn {
+	border: 0;
+	border-radius: 4px;
+    padding: 4px 20px;
+    margin-left: 0px;
+    background-color: #060606;
+    color: #8e8e8e;
+}
+
+.litegraph .dialog .btn:hover {
+    background-color: #111;
+    color: #FFF;
+}
+
+.litegraph .dialog .btn.delete:hover {
+    background-color: #F33;
+    color: black;
+}
+
+.litegraph .subgraph_property {
+	padding: 4px;
+}
+
+.litegraph .subgraph_property:hover {
+	background-color: #333;
+}
+
+.litegraph .subgraph_property.extra {
+    margin-top: 8px;
+}
+
+.litegraph .subgraph_property span.name {
+	font-size: 1.3em;
+	padding-left: 4px;
+}
+
+.litegraph .subgraph_property span.type {
+	opacity: 0.5;
+	margin-right: 20px;
+	padding-left: 4px;
+}
+
+.litegraph .subgraph_property span.label {
+	display: inline-block;
+	width: 60px;
+	padding:  0px 10px;
+}
+
+.litegraph .subgraph_property input {
+	width: 140px;
+	color: #999;
+	background-color: #1A1A1A;
+	border-radius: 4px;
+	border: 0;
+	margin-right: 10px;
+	padding: 4px;
+	padding-left: 10px;
+}
+
+.litegraph .subgraph_property button {
+	background-color: #1c1c1c;
+	color: #aaa;
+	border: 0;
+	border-radius: 2px;
+	padding: 4px 10px;
+	cursor: pointer;
+}
+
+.litegraph .subgraph_property.extra {
+	color: #ccc;
+}
+
+.litegraph .subgraph_property.extra input {
+	background-color: #111;
+}
+
+.litegraph .bullet_icon {
+	margin-left: 10px;
+	border-radius: 10px;
+	width: 12px;
+	height: 12px;
+	background-color: #666;
+	display: inline-block;
+	margin-top: 2px;
+	margin-right: 4px;
+    transition: background-color 0.1s ease 0s;
+    -moz-transition: background-color 0.1s ease 0s;
+}
+
+.litegraph .bullet_icon:hover {
+	background-color: #698;
+	cursor: pointer;
+} 
+
+/* OLD */
+
+.graphcontextmenu {
+    padding: 4px;
+    min-width: 100px;
+}
+
+.graphcontextmenu-title {
+    color: #dde;
+    background-color: #222;
+    margin: 0;
+    padding: 2px;
+    cursor: default;
+}
+
+.graphmenu-entry {
+    box-sizing: border-box;
+    margin: 2px;
+    padding-left: 20px;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    transition: all linear 0.3s;
+}
+
+.graphmenu-entry.event,
+.litemenu-entry.event {
+    border-left: 8px solid orange;
+    padding-left: 12px;
+}
+
+.graphmenu-entry.disabled {
+    opacity: 0.3;
+}
+
+.graphmenu-entry.submenu {
+    border-right: 2px solid #eee;
+}
+
+.graphmenu-entry:hover {
+    background-color: #555;
+}
+
+.graphmenu-entry.separator {
+    background-color: #111;
+    border-bottom: 1px solid #666;
+    height: 1px;
+    width: calc(100% - 20px);
+    -moz-width: calc(100% - 20px);
+    -webkit-width: calc(100% - 20px);
+}
+
+.graphmenu-entry .property_name {
+    display: inline-block;
+    text-align: left;
+    min-width: 80px;
+    min-height: 1.2em;
+}
+
+.graphmenu-entry .property_value,
+.litemenu-entry .property_value {
+    display: inline-block;
+    background-color: rgba(0, 0, 0, 0.5);
+    text-align: right;
+    min-width: 80px;
+    min-height: 1.2em;
+    vertical-align: middle;
+    padding-right: 10px;
+}
+
+.graphdialog {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    min-height: 2em;
+    background-color: #333;
+    font-size: 1.2em;
+    box-shadow: 0 0 10px black !important;
+	z-index: 10;
+}
+
+.graphdialog.rounded {
+    border-radius: 12px;
+    padding-right: 2px;
+}
+
+.graphdialog .name {
+    display: inline-block;
+    min-width: 60px;
+    min-height: 1.5em;
+    padding-left: 10px;
+}
+
+.graphdialog input,
+.graphdialog textarea,
+.graphdialog select {
+    margin: 3px;
+    min-width: 60px;
+    min-height: 1.5em;
+    background-color: black;
+    border: 0;
+    color: white;
+    padding-left: 10px;
+    outline: none;
+}
+
+.graphdialog textarea {
+	min-height: 150px;
+}
+
+.graphdialog button {
+    margin-top: 3px;
+    vertical-align: top;
+    background-color: #999;
+	border: 0;
+}
+
+.graphdialog button.rounded,
+.graphdialog input.rounded {
+    border-radius: 0 12px 12px 0;
+}
+
+.graphdialog .helper {
+    overflow: auto;
+    max-height: 200px;
+}
+
+.graphdialog .help-item {
+    padding-left: 10px;
+}
+
+.graphdialog .help-item:hover,
+.graphdialog .help-item.selected {
+    cursor: pointer;
+    background-color: white;
+    color: black;
+}
+
+.litegraph .dialog {
+    min-height: 0;
+}
+.litegraph .dialog .dialog-content {
+display: block;
+}
+.litegraph .dialog .dialog-content .subgraph_property {
+padding: 5px;
+}
+.litegraph .dialog .dialog-footer {
+margin: 0;
+}
+.litegraph .dialog .dialog-footer .subgraph_property {
+margin-top: 0;
+display: flex;
+align-items: center;
+padding: 5px;
+}
+.litegraph .dialog .dialog-footer .subgraph_property .name {
+flex: 1;
+}
+.litegraph .graphdialog {
+display: flex;
+align-items: center;
+border-radius: 20px;
+padding: 4px 10px;
+position: fixed;
+}
+.litegraph .graphdialog .name {
+padding: 0;
+min-height: 0;
+font-size: 16px;
+vertical-align: middle;
+}
+.litegraph .graphdialog .value {
+font-size: 16px;
+min-height: 0;
+margin: 0 10px;
+padding: 2px 5px;
+}
+.litegraph .graphdialog input[type="checkbox"] {
+width: 16px;
+height: 16px;
+}
+.litegraph .graphdialog button {
+padding: 4px 18px;
+border-radius: 20px;
+cursor: pointer;
+}
+  

web/scripts/api.js

@@ -0,0 +1,263 @@
+class ComfyApi extends EventTarget {
+	#registered = new Set();
+
+	constructor() {
+		super();
+	}
+
+	addEventListener(type, callback, options) {
+		super.addEventListener(type, callback, options);
+		this.#registered.add(type);
+	}
+
+	/**
+	 * 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;
+		let existingSession = sessionStorage["Comfy.SessionId"] || "";
+		if (existingSession) {
+			existingSession = "?clientId=" + existingSession;
+		}
+		this.socket = new WebSocket(
+			`ws${window.location.protocol === "https:" ? "s" : ""}://${location.host}/ws${existingSession}`
+		);
+
+		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;
+							sessionStorage["Comfy.SessionId"] = this.clientId;
+						}
+						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:
+						if (this.#registered.has(msg.type)) {
+							this.dispatchEvent(new CustomEvent(msg.type, { detail: msg.data }));
+						} else {
+							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();
+	}
+
+	/**
+	 * Gets a list of embedding names
+	 * @returns An array of script urls to import
+	 */
+	async getEmbeddings() {
+		const resp = await fetch("/embeddings", { 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();

web/scripts/app.js

@@ -0,0 +1,1046 @@
+import { ComfyWidgets } from "./widgets.js";
+import { ComfyUI } from "./ui.js";
+import { api } from "./api.js";
+import { defaultGraph } from "./defaultGraph.js";
+import { getPngMetadata, importA1111 } from "./pnginfo.js";
+
+class ComfyApp {
+	/** 
+	 * List of {number, batchCount} entries to queue
+	 */
+	#queueItems = [];
+	/**
+	 * If the queue is currently being processed
+	 */
+	#processingQueue = false;
+
+	constructor() {
+		this.ui = new ComfyUI(this);
+		this.extensions = [];
+		this.nodeOutputs = {};
+		this.shiftDown = false;
+	}
+
+	/**
+	 * 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"),
+						},
+						{
+							content: "Save Image",
+							callback: () => {
+								const a = document.createElement("a");
+								a.href = img.src;
+								a.setAttribute("download", new URLSearchParams(new URL(img.src).search).get("filename"));
+								document.body.append(a);
+								a.click();
+								requestAnimationFrame(() => a.remove());
+							},
+						}
+					);
+				}
+			}
+		};
+	}
+
+	/**
+	 * 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?" + new URLSearchParams(src).toString();
+								});
+							})
+						).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;
+					if (this.imageOffset != null) {
+						shiftY = this.imageOffset;
+					} else {
+						shiftY = this.computeSize()[1];
+					}
+
+					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 n = this.dragOverNode;
+			this.dragOverNode = null;
+			// Node handles file drop, we dont use the built in onDropFile handler as its buggy
+			// If you drag multiple files it will call it multiple times with the same file
+			if (n && n.onDragDrop && (await n.onDragDrop(event))) {
+				return;
+			}
+
+			await this.handleFile(event.dataTransfer.files[0]);
+		});
+
+		// Always clear over node on drag leave
+		this.canvasEl.addEventListener("dragleave", async () => {
+			if (this.dragOverNode) {
+				this.dragOverNode = null;
+				this.graph.setDirtyCanvas(false, true);
+			}
+		});
+
+		// Add handler for dropping onto a specific node
+		this.canvasEl.addEventListener(
+			"dragover",
+			(e) => {
+				this.canvas.adjustMouseEvent(e);
+				const node = this.graph.getNodeOnPos(e.canvasX, e.canvasY);
+				if (node) {
+					if (node.onDragOver && node.onDragOver(e)) {
+						this.dragOverNode = node;
+
+						// dragover event is fired very frequently, run this on an animation frame
+						requestAnimationFrame(() => {
+							this.graph.setDirtyCanvas(false, true);
+						});
+						return;
+					}
+				}
+				this.dragOverNode = null;
+			},
+			false
+		);
+	}
+
+	/**
+	 * 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);
+			}
+		});
+	}
+
+	/**
+	 * Handle mouse
+	 *
+	 * Move group by header
+	 */
+	#addProcessMouseHandler() {
+		const self = this;
+
+		const origProcessMouseDown = LGraphCanvas.prototype.processMouseDown;
+		LGraphCanvas.prototype.processMouseDown = function(e) {
+			const res = origProcessMouseDown.apply(this, arguments);
+
+			this.selected_group_moving = false;
+
+			if (this.selected_group && !this.selected_group_resizing) {
+				var font_size =
+					this.selected_group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE;
+				var height = font_size * 1.4;
+
+				// Move group by header
+				if (LiteGraph.isInsideRectangle(e.canvasX, e.canvasY, this.selected_group.pos[0], this.selected_group.pos[1], this.selected_group.size[0], height)) {
+					this.selected_group_moving = true;
+				}
+			}
+
+			return res;
+		}
+
+		const origProcessMouseMove = LGraphCanvas.prototype.processMouseMove;
+		LGraphCanvas.prototype.processMouseMove = function(e) {
+			const orig_selected_group = this.selected_group;
+
+			if (this.selected_group && !this.selected_group_resizing && !this.selected_group_moving) {
+				this.selected_group = null;
+			}
+
+			const res = origProcessMouseMove.apply(this, arguments);
+
+			if (orig_selected_group && !this.selected_group_resizing && !this.selected_group_moving) {
+				this.selected_group = orig_selected_group;
+			}
+
+			return res;
+		};
+	}
+
+	/**
+	 * Handle keypress
+	 *
+	 * Ctrl + M mute/unmute selected nodes
+	 */
+	#addProcessKeyHandler() {
+		const self = this;
+		const origProcessKey = LGraphCanvas.prototype.processKey;
+		LGraphCanvas.prototype.processKey = function(e) {
+			const res = origProcessKey.apply(this, arguments);
+
+			if (res === false) {
+				return res;
+			}
+
+			if (!this.graph) {
+				return;
+			}
+
+			var block_default = false;
+
+			if (e.target.localName == "input") {
+				return;
+			}
+
+			if (e.type == "keydown") {
+				// Ctrl + M mute/unmute
+				if (e.keyCode == 77 && e.ctrlKey) {
+					if (this.selected_nodes) {
+						for (var i in this.selected_nodes) {
+							if (this.selected_nodes[i].mode === 2) { // never
+								this.selected_nodes[i].mode = 0; // always
+							} else {
+								this.selected_nodes[i].mode = 2; // never
+							}
+						}
+					}
+					block_default = true;
+				}
+			}
+
+			this.graph.change();
+
+			if (block_default) {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				return false;
+			}
+
+			return res;
+		};
+	}
+
+	/**
+	 * Draws group header bar
+	 */
+	#addDrawGroupsHandler() {
+		const self = this;
+
+		const origDrawGroups = LGraphCanvas.prototype.drawGroups;
+		LGraphCanvas.prototype.drawGroups = function(canvas, ctx) {
+			if (!this.graph) {
+				return;
+			}
+
+			var groups = this.graph._groups;
+
+			ctx.save();
+			ctx.globalAlpha = 0.7 * this.editor_alpha;
+
+			for (var i = 0; i < groups.length; ++i) {
+				var group = groups[i];
+
+				if (!LiteGraph.overlapBounding(this.visible_area, group._bounding)) {
+					continue;
+				} //out of the visible area
+
+				ctx.fillStyle = group.color || "#335";
+				ctx.strokeStyle = group.color || "#335";
+				var pos = group._pos;
+				var size = group._size;
+				ctx.globalAlpha = 0.25 * this.editor_alpha;
+				ctx.beginPath();
+				var font_size =
+					group.font_size || LiteGraph.DEFAULT_GROUP_FONT_SIZE;
+				ctx.rect(pos[0] + 0.5, pos[1] + 0.5, size[0], font_size * 1.4);
+				ctx.fill();
+				ctx.globalAlpha = this.editor_alpha;
+			}
+
+			ctx.restore();
+
+			const res = origDrawGroups.apply(this, arguments);
+			return res;
+		}
+	}
+
+	/**
+	 * Draws node highlights (executing, drag drop) and progress bar
+	 */
+	#addDrawNodeHandler() {
+		const origDrawNodeShape = LGraphCanvas.prototype.drawNodeShape;
+		const self = this;
+
+		LGraphCanvas.prototype.drawNodeShape = function (node, ctx, size, fgcolor, bgcolor, selected, mouse_over) {
+			const res = origDrawNodeShape.apply(this, arguments);
+
+			let color = null;
+			if (node.id === +self.runningNodeId) {
+				color = "#0f0";
+			} else if (self.dragOverNode && node.id === self.dragOverNode.id) {
+				color = "dodgerblue";
+			}
+
+			if (color) {
+				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 = color;
+				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;
+		};
+
+		const origDrawNode = LGraphCanvas.prototype.drawNode;
+		LGraphCanvas.prototype.drawNode = function (node, ctx) {
+			var editor_alpha = this.editor_alpha;
+
+			if (node.mode === 2) { // never
+				this.editor_alpha = 0.4;
+			}
+
+			const res = origDrawNode.apply(this, arguments);
+
+			this.editor_alpha = editor_alpha;
+
+			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;
+			const node = this.graph.getNodeById(detail.node);
+			if (node?.onExecuted) {
+				node.onExecuted(detail.output);
+			}
+		});
+
+		api.init();
+	}
+
+	#addKeyboardHandler() {
+		window.addEventListener("keydown", (e) => {
+			this.shiftDown = e.shiftKey;
+
+			// Queue prompt using ctrl or command + enter
+			if ((e.ctrlKey || e.metaKey) && (e.key === "Enter" || e.keyCode === 13 || e.keyCode === 10)) {
+				this.queuePrompt(e.shiftKey ? -1 : 0);
+			}
+		});
+		window.addEventListener("keyup", (e) => {
+			this.shiftDown = e.shiftKey;
+		});
+	}
+
+	/**
+	 * 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 = (this.canvasEl = Object.assign(document.createElement("canvas"), { id: "graph-canvas" }));
+		canvasEl.tabIndex = "1";
+		document.body.prepend(canvasEl);
+
+		this.#addProcessMouseHandler();
+		this.#addProcessKeyHandler();
+
+		this.graph = new LGraph();
+		const canvas = (this.canvas = new LGraphCanvas(canvasEl, this.graph));
+		this.ctx = canvasEl.getContext("2d");
+
+		LiteGraph.release_link_on_empty_shows_menu = true;
+		LiteGraph.alt_drag_do_clone_nodes = true;
+
+		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) {
+			console.error("Error loading previous workflow", 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.#addDrawNodeHandler();
+		this.#addDrawGroupsHandler();
+		this.#addApiUpdateHandlers();
+		this.#addDropHandler();
+		this.#addPasteHandler();
+		this.#addKeyboardHandler();
+
+		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() {
+					var inputs = nodeData["input"]["required"];
+					if (nodeData["input"]["optional"] != undefined){
+					    inputs = Object.assign({}, nodeData["input"]["required"], nodeData["input"]["optional"])
+					}
+					const config = { minWidth: 1, minHeight: 1 };
+					for (const inputName in inputs) {
+						const inputData = inputs[inputName];
+						const type = inputData[0];
+
+						if(inputData[1]?.forceInput) {
+							this.addInput(inputName, type);
+						} else {
+							if (Array.isArray(type)) {
+								// Enums
+								Object.assign(config, widgets.COMBO(this, inputName, inputData, app) || {});
+							} 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 o in nodeData["output"]) {
+						const output = nodeData["output"][o];
+						const outputName = nodeData["output_name"][o] || output;
+						this.addOutput(outputName, 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) {
+		this.clean();
+
+		if (!graphData) {
+			graphData = structuredClone(defaultGraph);
+		}
+
+		// Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
+		for (let n of graphData.nodes) {
+			if (n.type == "T2IAdapterLoader") n.type = "ControlNetLoader";
+		}
+
+		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 = {};
+		// Process nodes in order of execution
+		for (const node of this.graph.computeExecutionOrder(false)) {
+			const n = workflow.nodes.find((n) => n.id === node.id);
+
+			if (node.isVirtualNode) {
+				// Don't serialize frontend only nodes but let them make changes
+				if (node.applyToGraph) {
+					node.applyToGraph(workflow);
+				}
+				continue;
+			}
+
+			if (node.mode === 2) {
+				// Don't serialize muted 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 = node.getInputLink(i);
+					while (parent && parent.isVirtualNode) {
+						link = parent.getInputLink(link.origin_slot);
+						if (link) {
+							parent = parent.getInputNode(link.origin_slot);
+						} else {
+							parent = null;
+						}
+					}
+
+					if (link) {
+						inputs[node.inputs[i].name] = [String(link.origin_id), parseInt(link.origin_slot)];
+					}
+				}
+			}
+
+			output[String(node.id)] = {
+				inputs,
+				class_type: node.comfyClass,
+			};
+		}
+
+		// Remove inputs connected to removed nodes
+
+		for (const o in output) {
+			for (const i in output[o].inputs) {
+				if (Array.isArray(output[o].inputs[i])
+					&& output[o].inputs[i].length === 2
+					&& !output[output[o].inputs[i][0]]) {
+					delete output[o].inputs[i];
+				}
+			}
+		}
+
+		return { workflow, output };
+	}
+
+	async queuePrompt(number, batchCount = 1) {
+		this.#queueItems.push({ number, batchCount });
+
+		// Only have one action process the items so each one gets a unique seed correctly
+		if (this.#processingQueue) {
+			return;
+		}
+	
+		this.#processingQueue = true;
+		try {
+			while (this.#queueItems.length) {
+				({ number, batchCount } = this.#queueItems.pop());
+
+				for (let i = 0; i < batchCount; i++) {
+					const p = await this.graphToPrompt();
+
+					try {
+						await api.queuePrompt(number, p);
+					} catch (error) {
+						this.ui.dialog.show(error.response || error.toString());
+						break;
+					}
+
+					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();
+				}
+			}
+		} finally {
+			this.#processingQueue = false;
+		}
+	}
+
+	/**
+	 * 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) {
+				if (pngInfo.workflow) {
+					this.loadGraphData(JSON.parse(pngInfo.workflow));
+				} else if (pngInfo.parameters) {
+					importA1111(this.graph, pngInfo.parameters);
+				}
+			}
+		} 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);
+	}
+
+	/**
+	 * Refresh combo list on whole nodes
+	 */
+	async refreshComboInNodes() {
+		const defs = await api.getNodeDefs();
+
+		for(let nodeNum in this.graph._nodes) {
+			const node = this.graph._nodes[nodeNum];
+
+			const def = defs[node.type];
+
+			for(const widgetNum in node.widgets) {
+				const widget = node.widgets[widgetNum]
+
+				if(widget.type == "combo" && def["input"]["required"][widget.name] !== undefined) {
+					widget.options.values = def["input"]["required"][widget.name][0];
+
+					if(!widget.options.values.includes(widget.value)) {
+						widget.value = widget.options.values[0];
+					}
+				}
+			}
+		}
+	}
+
+	/**
+	 * Clean current state
+	 */
+	clean() {
+		this.nodeOutputs = {};
+	}
+}
+
+export const app = new ComfyApp();

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,
+};

web/scripts/pnginfo.js

@@ -0,0 +1,306 @@
+import { api } from "./api.js";
+
+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);
+	});
+}
+
+export async function importA1111(graph, parameters) {
+	const p = parameters.lastIndexOf("\nSteps:");
+	if (p > -1) {
+		const embeddings = await api.getEmbeddings();
+		const opts = parameters
+			.substr(p)
+			.split(",")
+			.reduce((p, n) => {
+				const s = n.split(":");
+				p[s[0].trim().toLowerCase()] = s[1].trim();
+				return p;
+			}, {});
+		const p2 = parameters.lastIndexOf("\nNegative prompt:", p);
+		if (p2 > -1) {
+			let positive = parameters.substr(0, p2).trim();
+			let negative = parameters.substring(p2 + 18, p).trim();
+
+			const ckptNode = LiteGraph.createNode("CheckpointLoaderSimple");
+			const clipSkipNode = LiteGraph.createNode("CLIPSetLastLayer");
+			const positiveNode = LiteGraph.createNode("CLIPTextEncode");
+			const negativeNode = LiteGraph.createNode("CLIPTextEncode");
+			const samplerNode = LiteGraph.createNode("KSampler");
+			const imageNode = LiteGraph.createNode("EmptyLatentImage");
+			const vaeNode = LiteGraph.createNode("VAEDecode");
+			const vaeLoaderNode = LiteGraph.createNode("VAELoader");
+			const saveNode = LiteGraph.createNode("SaveImage");
+			let hrSamplerNode = null;
+
+			const ceil64 = (v) => Math.ceil(v / 64) * 64;
+
+			function getWidget(node, name) {
+				return node.widgets.find((w) => w.name === name);
+			}
+
+			function setWidgetValue(node, name, value, isOptionPrefix) {
+				const w = getWidget(node, name);
+				if (isOptionPrefix) {
+					const o = w.options.values.find((w) => w.startsWith(value));
+					if (o) {
+						w.value = o;
+					} else {
+						console.warn(`Unknown value '${value}' for widget '${name}'`, node);
+						w.value = value;
+					}
+				} else {
+					w.value = value;
+				}
+			}
+
+			function createLoraNodes(clipNode, text, prevClip, prevModel) {
+				const loras = [];
+				text = text.replace(/<lora:([^:]+:[^>]+)>/g, function (m, c) {
+					const s = c.split(":");
+					const weight = parseFloat(s[1]);
+					if (isNaN(weight)) {
+						console.warn("Invalid LORA", m);
+					} else {
+						loras.push({ name: s[0], weight });
+					}
+					return "";
+				});
+
+				for (const l of loras) {
+					const loraNode = LiteGraph.createNode("LoraLoader");
+					graph.add(loraNode);
+					setWidgetValue(loraNode, "lora_name", l.name, true);
+					setWidgetValue(loraNode, "strength_model", l.weight);
+					setWidgetValue(loraNode, "strength_clip", l.weight);
+					prevModel.node.connect(prevModel.index, loraNode, 0);
+					prevClip.node.connect(prevClip.index, loraNode, 1);
+					prevModel = { node: loraNode, index: 0 };
+					prevClip = { node: loraNode, index: 1 };
+				}
+
+				prevClip.node.connect(1, clipNode, 0);
+				prevModel.node.connect(0, samplerNode, 0);
+				if (hrSamplerNode) {
+					prevModel.node.connect(0, hrSamplerNode, 0);
+				}
+
+				return { text, prevModel, prevClip };
+			}
+
+			function replaceEmbeddings(text) {
+				return text.replaceAll(
+					new RegExp(
+						"\\b(" + embeddings.map((e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("\\b|\\b") + ")\\b",
+						"ig"
+					),
+					"embedding:$1"
+				);
+			}
+
+			function popOpt(name) {
+				const v = opts[name];
+				delete opts[name];
+				return v;
+			}
+
+			graph.clear();
+			graph.add(ckptNode);
+			graph.add(clipSkipNode);
+			graph.add(positiveNode);
+			graph.add(negativeNode);
+			graph.add(samplerNode);
+			graph.add(imageNode);
+			graph.add(vaeNode);
+			graph.add(vaeLoaderNode);
+			graph.add(saveNode);
+
+			ckptNode.connect(1, clipSkipNode, 0);
+			clipSkipNode.connect(0, positiveNode, 0);
+			clipSkipNode.connect(0, negativeNode, 0);
+			ckptNode.connect(0, samplerNode, 0);
+			positiveNode.connect(0, samplerNode, 1);
+			negativeNode.connect(0, samplerNode, 2);
+			imageNode.connect(0, samplerNode, 3);
+			vaeNode.connect(0, saveNode, 0);
+			samplerNode.connect(0, vaeNode, 0);
+			vaeLoaderNode.connect(0, vaeNode, 1);
+
+			const handlers = {
+				model(v) {
+					setWidgetValue(ckptNode, "ckpt_name", v, true);
+				},
+				"cfg scale"(v) {
+					setWidgetValue(samplerNode, "cfg", +v);
+				},
+				"clip skip"(v) {
+					setWidgetValue(clipSkipNode, "stop_at_clip_layer", -v);
+				},
+				sampler(v) {
+					let name = v.toLowerCase().replace("++", "pp").replaceAll(" ", "_");
+					if (name.includes("karras")) {
+						name = name.replace("karras", "").replace(/_+$/, "");
+						setWidgetValue(samplerNode, "scheduler", "karras");
+					} else {
+						setWidgetValue(samplerNode, "scheduler", "normal");
+					}
+					const w = getWidget(samplerNode, "sampler_name");
+					const o = w.options.values.find((w) => w === name || w === "sample_" + name);
+					if (o) {
+						setWidgetValue(samplerNode, "sampler_name", o);
+					}
+				},
+				size(v) {
+					const wxh = v.split("x");
+					const w = ceil64(+wxh[0]);
+					const h = ceil64(+wxh[1]);
+					const hrUp = popOpt("hires upscale");
+					const hrSz = popOpt("hires resize");
+					let hrMethod = popOpt("hires upscaler");
+
+					setWidgetValue(imageNode, "width", w);
+					setWidgetValue(imageNode, "height", h);
+
+					if (hrUp || hrSz) {
+						let uw, uh;
+						if (hrUp) {
+							uw = w * hrUp;
+							uh = h * hrUp;
+						} else {
+							const s = hrSz.split("x");
+							uw = +s[0];
+							uh = +s[1];
+						}
+
+						let upscaleNode;
+						let latentNode;
+
+						if (hrMethod.startsWith("Latent")) {
+							latentNode = upscaleNode = LiteGraph.createNode("LatentUpscale");
+							graph.add(upscaleNode);
+							samplerNode.connect(0, upscaleNode, 0);
+
+							switch (hrMethod) {
+								case "Latent (nearest-exact)":
+									hrMethod = "nearest-exact";
+									break;
+							}
+							setWidgetValue(upscaleNode, "upscale_method", hrMethod, true);
+						} else {
+							const decode = LiteGraph.createNode("VAEDecodeTiled");
+							graph.add(decode);
+							samplerNode.connect(0, decode, 0);
+							vaeLoaderNode.connect(0, decode, 1);
+
+							const upscaleLoaderNode = LiteGraph.createNode("UpscaleModelLoader");
+							graph.add(upscaleLoaderNode);
+							setWidgetValue(upscaleLoaderNode, "model_name", hrMethod, true);
+
+							const modelUpscaleNode = LiteGraph.createNode("ImageUpscaleWithModel");
+							graph.add(modelUpscaleNode);
+							decode.connect(0, modelUpscaleNode, 1);
+							upscaleLoaderNode.connect(0, modelUpscaleNode, 0);
+
+							upscaleNode = LiteGraph.createNode("ImageScale");
+							graph.add(upscaleNode);
+							modelUpscaleNode.connect(0, upscaleNode, 0);
+
+							const vaeEncodeNode = (latentNode = LiteGraph.createNode("VAEEncodeTiled"));
+							graph.add(vaeEncodeNode);
+							upscaleNode.connect(0, vaeEncodeNode, 0);
+							vaeLoaderNode.connect(0, vaeEncodeNode, 1);
+						}
+
+						setWidgetValue(upscaleNode, "width", ceil64(uw));
+						setWidgetValue(upscaleNode, "height", ceil64(uh));
+
+						hrSamplerNode = LiteGraph.createNode("KSampler");
+						graph.add(hrSamplerNode);
+						ckptNode.connect(0, hrSamplerNode, 0);
+						positiveNode.connect(0, hrSamplerNode, 1);
+						negativeNode.connect(0, hrSamplerNode, 2);
+						latentNode.connect(0, hrSamplerNode, 3);
+						hrSamplerNode.connect(0, vaeNode, 0);
+					}
+				},
+				steps(v) {
+					setWidgetValue(samplerNode, "steps", +v);
+				},
+				seed(v) {
+					setWidgetValue(samplerNode, "seed", +v);
+				},
+			};
+
+			for (const opt in opts) {
+				if (opt in handlers) {
+					handlers[opt](popOpt(opt));
+				}
+			}
+
+			if (hrSamplerNode) {
+				setWidgetValue(hrSamplerNode, "steps", getWidget(samplerNode, "steps").value);
+				setWidgetValue(hrSamplerNode, "cfg", getWidget(samplerNode, "cfg").value);
+				setWidgetValue(hrSamplerNode, "scheduler", getWidget(samplerNode, "scheduler").value);
+				setWidgetValue(hrSamplerNode, "sampler_name", getWidget(samplerNode, "sampler_name").value);
+				setWidgetValue(hrSamplerNode, "denoise", +(popOpt("denoising strength") || "1"));
+			}
+
+			let n = createLoraNodes(positiveNode, positive, { node: clipSkipNode, index: 0 }, { node: ckptNode, index: 0 });
+			positive = n.text;
+			n = createLoraNodes(negativeNode, negative, n.prevClip, n.prevModel);
+			negative = n.text;
+
+			setWidgetValue(positiveNode, "text", replaceEmbeddings(positive));
+			setWidgetValue(negativeNode, "text", replaceEmbeddings(negative));
+
+			graph.arrange();
+
+			for (const opt of ["model hash", "ensd"]) {
+				delete opts[opt];
+			}
+
+			console.warn("Unhandled parameters:", opts);
+		}
+	}
+}

web/scripts/ui.js

@@ -0,0 +1,537 @@
+import { api } from "./api.js";
+
+export 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.$;
+
+			if (propsOrChildren.style) {
+				Object.assign(element.style, propsOrChildren.style);
+				delete propsOrChildren.style;
+			}
+
+			Object.assign(element, propsOrChildren);
+			if (children) {
+				element.append(...children);
+			}
+
+			if (parent) {
+				parent.append(element);
+			}
+
+			if (cb) {
+				cb(element);
+			}
+		}
+	}
+	return element;
+}
+
+function dragElement(dragEl, settings) {
+	var posDiffX = 0,
+		posDiffY = 0,
+		posStartX = 0,
+		posStartY = 0,
+		newPosX = 0,
+		newPosY = 0;
+	if (dragEl.getElementsByClassName("drag-handle")[0]) {
+		// if present, the handle is where you move the DIV from:
+		dragEl.getElementsByClassName("drag-handle")[0].onmousedown = dragMouseDown;
+	} else {
+		// otherwise, move the DIV from anywhere inside the DIV:
+		dragEl.onmousedown = dragMouseDown;
+	}
+
+	// When the element resizes (e.g. view queue) ensure it is still in the windows bounds
+	const resizeObserver = new ResizeObserver(() => {
+		ensureInBounds();
+	}).observe(dragEl);
+
+	function ensureInBounds() {
+		if (dragEl.classList.contains("comfy-menu-manual-pos")) {
+			newPosX = Math.min(document.body.clientWidth - dragEl.clientWidth, Math.max(0, dragEl.offsetLeft));
+			newPosY = Math.min(document.body.clientHeight - dragEl.clientHeight, Math.max(0, dragEl.offsetTop));
+
+			positionElement();
+		}
+	}
+
+	function positionElement() {
+		const halfWidth = document.body.clientWidth / 2;
+		const anchorRight = newPosX + dragEl.clientWidth / 2 > halfWidth;
+
+		// set the element's new position:
+		if (anchorRight) {
+			dragEl.style.left = "unset";
+			dragEl.style.right = document.body.clientWidth - newPosX - dragEl.clientWidth + "px";
+		} else {
+			dragEl.style.left = newPosX + "px";
+			dragEl.style.right = "unset";
+		}
+		
+		dragEl.style.top = newPosY + "px";
+		dragEl.style.bottom = "unset";
+
+		if (savePos) {
+			localStorage.setItem(
+				"Comfy.MenuPosition",
+				JSON.stringify({
+					x: dragEl.offsetLeft,
+					y: dragEl.offsetTop,
+				})
+			);
+		}
+	}
+
+	function restorePos() {
+		let pos = localStorage.getItem("Comfy.MenuPosition");
+		if (pos) {
+			pos = JSON.parse(pos);
+			newPosX = pos.x;
+			newPosY = pos.y;
+			positionElement();
+			ensureInBounds();
+		}
+	}
+
+	let savePos = undefined;
+	settings.addSetting({
+		id: "Comfy.MenuPosition",
+		name: "Save menu position",
+		type: "boolean",
+		defaultValue: savePos,
+		onChange(value) {
+			if (savePos === undefined && value) {
+				restorePos();
+			}
+			savePos = value;
+		},
+	});
+
+	function dragMouseDown(e) {
+		e = e || window.event;
+		e.preventDefault();
+		// get the mouse cursor position at startup:
+		posStartX = e.clientX;
+		posStartY = e.clientY;
+		document.onmouseup = closeDragElement;
+		// call a function whenever the cursor moves:
+		document.onmousemove = elementDrag;
+	}
+
+	function elementDrag(e) {
+		e = e || window.event;
+		e.preventDefault();
+
+		dragEl.classList.add("comfy-menu-manual-pos");
+
+		// calculate the new cursor position:
+		posDiffX = e.clientX - posStartX;
+		posDiffY = e.clientY - posStartY;
+		posStartX = e.clientX;
+		posStartY = e.clientY;
+
+		newPosX = Math.min(document.body.clientWidth - dragEl.clientWidth, Math.max(0, dragEl.offsetLeft + posDiffX));
+		newPosY = Math.min(document.body.clientHeight - dragEl.clientHeight, Math.max(0, dragEl.offsetTop + posDiffY));
+
+		positionElement();
+	}
+
+	window.addEventListener("resize", () => {
+			ensureInBounds();
+	});
+
+	function closeDragElement() {
+		// stop moving when mouse button is released:
+		document.onmouseup = null;
+		document.onmousemove = null;
+	}
+}
+
+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 ComfySettingsDialog extends ComfyDialog {
+	constructor() {
+		super();
+		this.element.classList.add("comfy-settings");
+		this.settings = [];
+	}
+
+	getSettingValue(id, defaultValue) {
+		const settingId = "Comfy.Settings." + id;
+		const v = localStorage[settingId];
+		return v == null ? defaultValue : JSON.parse(v);
+	}
+
+	setSettingValue(id, value) {
+		const settingId = "Comfy.Settings." + id;
+		localStorage[settingId] = JSON.stringify(value);
+	}
+
+	addSetting({ id, name, type, defaultValue, onChange, attrs = {}, tooltip = "", }) {
+		if (!id) {
+			throw new Error("Settings must have an ID");
+		}
+		if (this.settings.find((s) => s.id === id)) {
+			throw new Error("Setting IDs must be unique");
+		}
+
+		const settingId = "Comfy.Settings." + id;
+		const v = localStorage[settingId];
+		let value = v == null ? defaultValue : JSON.parse(v);
+
+		// Trigger initial setting of value
+		if (onChange) {
+			onChange(value, undefined);
+		}
+
+		this.settings.push({
+			render: () => {
+				const setter = (v) => {
+					if (onChange) {
+						onChange(v, value);
+					}
+					localStorage[settingId] = JSON.stringify(v);
+					value = v;
+				};
+
+				let element;
+
+				if (typeof type === "function") {
+					element = type(name, setter, value, attrs);
+				} else {
+					switch (type) {
+						case "boolean":
+							element = $el("div", [
+								$el("label", { textContent: name || id }, [
+									$el("input", {
+										type: "checkbox",
+										checked: !!value,
+										oninput: (e) => {
+											setter(e.target.checked);
+										},
+										...attrs
+									}),
+								]),
+							]);
+							break;
+						case "number":
+							element = $el("div", [
+								$el("label", { textContent: name || id }, [
+									$el("input", {
+										type,
+										value,
+										oninput: (e) => {
+											setter(e.target.value);
+										},
+										...attrs
+									}),
+								]),
+							]);
+							break;
+						default:
+							console.warn("Unsupported setting type, defaulting to text");
+							element = $el("div", [
+								$el("label", { textContent: name || id }, [
+									$el("input", {
+										value,
+										oninput: (e) => {
+											setter(e.target.value);
+										},
+										...attrs
+									}),
+								]),
+							]);
+							break;
+					}
+				}
+				if(tooltip) {
+					element.title = tooltip;
+				}
+
+				return element;
+			},
+		});
+	}
+
+	show() {
+		super.show();
+		Object.assign(this.textElement.style, {
+			display: "flex",
+			flexDirection: "column",
+			gap: "10px"
+		});
+		this.textElement.replaceChildren(...this.settings.map((s) => s.render()));
+	}
+}
+
+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: () => {
+									app.loadGraphData(item.prompt[3].extra_pnginfo.workflow);
+									if (item.outputs) {
+										app.nodeOutputs = item.outputs;
+									}
+								},
+							}),
+							$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.settings = new ComfySettingsDialog();
+
+		this.batchCount = 1;
+		this.lastQueueSize = 0;
+		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("div", { style: { overflow: "hidden", position: "relative", width: "100%" } }, [
+				$el("span.drag-handle"),
+				$el("span", { $: (q) => (this.queueSize = q) }),
+				$el("button.comfy-settings-btn", { textContent: "⚙️", onclick: () => this.settings.show() }),
+			]),
+			$el("button.comfy-queue-btn", {
+				textContent: "Queue Prompt",
+				onclick: () => app.queuePrompt(0, this.batchCount),
+			}),
+			$el("div", {}, [
+				$el("label", { innerHTML: "Extra options" }, [
+					$el("input", {
+						type: "checkbox",
+						onchange: (i) => {
+							document.getElementById("extraOptions").style.display = i.srcElement.checked ? "block" : "none";
+							this.batchCount = i.srcElement.checked ? document.getElementById("batchCountInputRange").value : 1;
+							document.getElementById("autoQueueCheckbox").checked = false;
+						},
+					}),
+				]),
+			]),
+			$el("div", { id: "extraOptions", style: { width: "100%", display: "none" } }, [
+				$el("label", { innerHTML: "Batch count" }, [
+					$el("input", {
+						id: "batchCountInputNumber",
+						type: "number",
+						value: this.batchCount,
+						min: "1",
+						style: { width: "35%", "margin-left": "0.4em" },
+						oninput: (i) => {
+							this.batchCount = i.target.value;
+							document.getElementById("batchCountInputRange").value = this.batchCount;
+						},
+					}),
+					$el("input", {
+						id: "batchCountInputRange",
+						type: "range",
+						min: "1",
+						max: "100",
+						value: this.batchCount,
+						oninput: (i) => {
+							this.batchCount = i.srcElement.value;
+							document.getElementById("batchCountInputNumber").value = i.srcElement.value;
+						},
+					}),
+					$el("input", {
+						id: "autoQueueCheckbox",
+						type: "checkbox",
+						checked: false,
+						title: "automatically queue prompt when the queue size hits 0",
+					}),
+				]),
+			]),
+			$el("div.comfy-menu-btns", [
+				$el("button", { textContent: "Queue Front", onclick: () => app.queuePrompt(-1, this.batchCount) }),
+				$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(), null, 2); // 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: "Refresh", onclick: () => app.refreshComboInNodes() }),
+			$el("button", { textContent: "Clear", onclick: () => {
+				app.clean();
+				app.graph.clear();
+			}}),
+			$el("button", { textContent: "Load Default", onclick: () => app.loadGraphData() }),
+		]);
+
+		dragElement(this.menuContainer, this.settings);
+
+		this.setStatus({ exec_info: { queue_remaining: "X" } });
+	}
+
+	setStatus(status) {
+		this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR");
+		if (status) {
+			if (
+				this.lastQueueSize != 0 &&
+				status.exec_info.queue_remaining == 0 &&
+				document.getElementById("autoQueueCheckbox").checked
+			) {
+				app.queuePrompt(0, this.batchCount);
+			}
+			this.lastQueueSize = status.exec_info.queue_remaining;
+		}
+	}
+}

web/scripts/widgets.js

@@ -0,0 +1,351 @@
+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 } };
+}
+
+export function addRandomizeWidget(node, targetWidget, name, defaultValue = false) {
+	const randomize = node.addWidget("toggle", name, defaultValue, function (v) {}, {
+		on: "enabled",
+		off: "disabled",
+		serialize: false, // Don't include this in prompt.
+	});
+
+	randomize.afterQueued = () => {
+		if (randomize.value) {
+			const min = targetWidget.options?.min;
+			let max = targetWidget.options?.max;
+			if (min != null || max != null) {
+				if (max) {
+					// limit max to something that javascript can handle
+					max = Math.min(1125899906842624, max);
+				}
+				targetWidget.value = Math.floor(Math.random() * ((max ?? 9999999999) - (min ?? 0) + 1) + (min ?? 0));
+			} else {
+				targetWidget.value = Math.floor(Math.random() * 1125899906842624);
+			}
+		}
+	};
+	return randomize;
+}
+
+function seedWidget(node, inputName, inputData) {
+	const seed = ComfyWidgets.INT(node, inputName, inputData);
+	const randomize = addRandomizeWidget(node, seed.widget, "Random seed after every gen", true);
+
+	seed.widget.linkedWidgets = [randomize];
+	return { widget: seed, randomize };
+}
+
+const MultilineSymbol = Symbol();
+const MultilineResizeSymbol = Symbol();
+
+function addMultilineWidget(node, name, opts, app) {
+	const MIN_SIZE = 50;
+
+	function computeSize(size) {
+		if (node.widgets[0].last_y == null) return;
+
+		let y = node.widgets[0].last_y;
+		let freeSpace = size[1] - y;
+
+		// Compute the height of all non customtext widgets
+		let widgetHeight = 0;
+		const multi = [];
+		for (let i = 0; i < node.widgets.length; i++) {
+			const w = node.widgets[i];
+			if (w.type === "customtext") {
+				multi.push(w);
+			} else {
+				if (w.computeSize) {
+					widgetHeight += w.computeSize()[1] + 4;
+				} else {
+					widgetHeight += LiteGraph.NODE_WIDGET_HEIGHT + 4;
+				}
+			}
+		}
+
+		// See how large each text input can be
+		freeSpace -= widgetHeight;
+		freeSpace /= multi.length;
+
+		if (freeSpace < MIN_SIZE) {
+			// There isnt enough space for all the widgets, increase the size of the node
+			freeSpace = MIN_SIZE;
+			node.size[1] = y + widgetHeight + freeSpace * multi.length;
+			node.graph.setDirtyCanvas(true);
+		}
+
+		// Position each of the widgets
+		for (const w of node.widgets) {
+			w.y = y;
+			if (w.type === "customtext") {
+				y += freeSpace;
+			} else if (w.computeSize) {
+				y += w.computeSize()[1] + 4;
+			} else {
+				y += LiteGraph.NODE_WIDGET_HEIGHT + 4;
+			}
+		}
+
+		node.inputHeight = freeSpace;
+	}
+
+	const widget = {
+		type: "customtext",
+		name,
+		get value() {
+			return this.inputEl.value;
+		},
+		set value(x) {
+			this.inputEl.value = x;
+		},
+		draw: function (ctx, _, widgetWidth, y, widgetHeight) {
+			if (!this.parent.inputHeight) {
+				// If we are initially offscreen when created we wont have received a resize event
+				// Calculate it here instead
+				computeSize(node.size);
+			}
+			const visible = app.canvas.ds.scale > 0.5 && this.type === "customtext";
+			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 - 3) + t.f}px`,
+				width: `${(widgetWidth - margin * 2 - 3) * t.a}px`,
+				height: `${(this.parent.inputHeight - margin * 2 - 4) * 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 = opts.defaultVal;
+	widget.inputEl.placeholder = opts.placeholder || "";
+	document.addEventListener("mousedown", 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();
+			}
+		}
+	};
+
+	widget.onRemove = () => {
+		widget.inputEl?.remove();
+
+		// Restore original size handler if we are the last
+		if (!--node[MultilineSymbol]) {
+			node.onResize = node[MultilineResizeSymbol];
+			delete node[MultilineSymbol];
+			delete node[MultilineResizeSymbol];
+		}
+	};
+
+	if (node[MultilineSymbol]) {
+		node[MultilineSymbol]++;
+	} else {
+		node[MultilineSymbol] = 1;
+		const onResize = (node[MultilineResizeSymbol] = node.onResize);
+
+		node.onResize = function (size) {
+			computeSize(size);
+
+			// Call original resizer handler
+			if (onResize) {
+				onResize.apply(this, arguments);
+			}
+		};
+	}
+
+	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);
+		Object.assign(config, { precision: 0 });
+		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, ...inputData[1] }, app);
+		} else {
+			return { widget: node.addWidget("text", inputName, defaultVal, () => {}, {}) };
+		}
+	},
+	COMBO(node, inputName, inputData) {
+		const type = inputData[0];
+		let defaultValue = type[0];
+		if (inputData[1] && inputData[1].default) {
+			defaultValue = inputData[1].default;
+		}
+		return { widget: node.addWidget("combo", inputName, defaultValue, () => {}, { values: type }) };
+	},
+	IMAGEUPLOAD(node, inputName, inputData, app) {
+		const imageWidget = node.widgets.find((w) => w.name === "image");
+		let uploadWidget;
+
+		function showImage(name) {
+			// Position the image somewhere sensible
+			if (!node.imageOffset) {
+				node.imageOffset = uploadWidget.last_y ? uploadWidget.last_y + 25 : 75;
+			}
+
+			const img = new Image();
+			img.onload = () => {
+				node.imgs = [img];
+				app.graph.setDirtyCanvas(true);
+			};
+			img.src = `/view?filename=${name}&type=input`;
+		}
+
+		// Add our own callback to the combo widget to render an image when it changes
+		const cb = node.callback;
+		imageWidget.callback = function () {
+			showImage(imageWidget.value);
+			if (cb) {
+				return cb.apply(this, arguments);
+			}
+		};
+
+		// On load if we have a value then render the image
+		// The value isnt set immediately so we need to wait a moment
+		// No change callbacks seem to be fired on initial setting of the value
+		requestAnimationFrame(() => {
+			if (imageWidget.value) {
+				showImage(imageWidget.value);
+			}
+		});
+
+		async function uploadFile(file, updateNode) {
+			try {
+				// Wrap file in formdata so it includes filename
+				const body = new FormData();
+				body.append("image", file);
+				const resp = await fetch("/upload/image", {
+					method: "POST",
+					body,
+				});
+
+				if (resp.status === 200) {
+					const data = await resp.json();
+					// Add the file as an option and update the widget value
+					if (!imageWidget.options.values.includes(data.name)) {
+						imageWidget.options.values.push(data.name);
+					}
+
+					if (updateNode) {
+						showImage(data.name);
+
+						imageWidget.value = data.name;
+					}
+				} else {
+					alert(resp.status + " - " + resp.statusText);
+				}
+			} catch (error) {
+				alert(error);
+			}
+		}
+
+		const fileInput = document.createElement("input");
+		Object.assign(fileInput, {
+			type: "file",
+			accept: "image/jpeg,image/png",
+			style: "display: none",
+			onchange: async () => {
+				if (fileInput.files.length) {
+					await uploadFile(fileInput.files[0], true);
+				}
+			},
+		});
+		document.body.append(fileInput);
+
+		// Create the button widget for selecting the files
+		uploadWidget = node.addWidget("button", "choose file to upload", "image", () => {
+			fileInput.click();
+		});
+		uploadWidget.serialize = false;
+
+		// Add handler to check if an image is being dragged over our node
+		node.onDragOver = function (e) {
+			if (e.dataTransfer && e.dataTransfer.items) {
+				const image = [...e.dataTransfer.items].find((f) => f.kind === "file" && f.type.startsWith("image/"));
+				return !!image;
+			}
+
+			return false;
+		};
+
+		// On drop upload files
+		node.onDragDrop = function (e) {
+			console.log("onDragDrop called");
+			let handled = false;
+			for (const file of e.dataTransfer.files) {
+				if (file.type.startsWith("image/")) {
+					uploadFile(file, !handled); // Dont await these, any order is fine, only update on first one
+					handled = true;
+				}
+			}
+
+			return handled;
+		};
+
+		return { widget: uploadWidget };
+	},
+};

web/style.css

@@ -0,0 +1,239 @@
+:root {
+	--fg-color: #000;
+	--bg-color: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--fg-color: #fff;
+		--bg-color: #202020;
+	}
+}
+
+body {
+	width: 100vw;
+	height: 100vh;
+	margin: 0;
+	overflow: hidden;
+	background-color: var(--bg-color);
+	color: var(--fg-color);
+}
+
+#graph-canvas {
+	width: 100%;
+	height: 100%;
+}
+
+.comfy-multiline-input {
+	background-color: var(--bg-color);
+	color: var(--fg-color);
+	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 select,
+.comfy-modal input[type=button],
+.comfy-modal input[type=checkbox] {
+	margin: 3px 3px 3px 4px;
+}
+
+.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;
+	color: #000;
+	text-align: center;
+	z-index: 100;
+	width: 170px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	color: #999;
+	background-color: #353535;
+	font-family: sans-serif;
+	padding: 10px;
+	border-radius: 0 8px 8px 8px;
+	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
+}
+
+.comfy-menu button {
+	font-size: 20px;
+}
+
+.comfy-menu-btns {
+	margin-bottom: 10px;
+	width: 100%;
+}
+
+.comfy-menu-btns button {
+	font-size: 10px;
+	width: 50%;
+	color: #999 !important;
+}
+
+.comfy-menu > button {
+	width: 100%;
+}
+
+.comfy-menu > button,
+.comfy-menu-btns button,
+.comfy-menu .comfy-list button {
+	color: #ddd;
+	background-color: #222;
+	border-radius: 8px;
+	border-color: #4e4e4e;
+	border-style: solid;
+	margin-top: 2px;
+}
+
+.comfy-menu span.drag-handle {
+	width: 10px;
+	height: 20px;
+	display: inline-block;
+	overflow: hidden;
+	line-height: 5px;
+	padding: 3px 4px;
+	cursor: move;
+	vertical-align: middle;
+	margin-top: -.4em;
+	margin-left: -.2em;
+	font-size: 12px;
+	font-family: sans-serif;
+	letter-spacing: 2px;
+	color: #cccccc;
+	text-shadow: 1px 0 1px black;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.comfy-menu span.drag-handle::after {
+	content: '.. .. ..';
+}
+
+.comfy-queue-btn {
+	width: 100%;
+}
+
+.comfy-list {
+	color: #999;
+	background-color: #333;
+	margin-bottom: 10px;
+	border-color: #4e4e4e;
+	border-style: solid;
+}
+
+.comfy-list-items {
+	overflow-y: scroll;
+	max-height: 100px;
+	min-height: 25px;
+	background-color: #222;
+	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;
+}
+
+button.comfy-settings-btn {
+	background-color: rgba(0, 0, 0, 0);
+	font-size: 12px;
+	padding: 0;
+	position: absolute;
+	right: 0;
+	border: none;
+}
+
+button.comfy-queue-btn {
+	margin: 6px 0 !important;
+}
+
+.comfy-modal.comfy-settings {
+	background-color: var(--bg-color);
+	color: var(--fg-color);
+	z-index: 99;
+}
+
+@media only screen and (max-height: 850px) {
+	.comfy-menu {
+		top: 0 !important;
+		bottom: 0 !important;
+		left: auto !important;
+		right: 0 !important;
+		border-radius: 0px;
+	}
+	.comfy-menu span.drag-handle {
+		visibility:hidden
+	}
+}