Upload 71 files

ComfyUI/web/extensions/core/clipspace.js

@@ -0,0 +1,166 @@
+import { app } from "../../scripts/app.js";
+import { ComfyDialog, $el } from "../../scripts/ui.js";
+import { ComfyApp } from "../../scripts/app.js";
+
+export class ClipspaceDialog extends ComfyDialog {
+	static items = [];
+	static instance = null;
+
+	static registerButton(name, contextPredicate, callback) {
+		const item =
+			$el("button", {
+				type: "button",
+				textContent: name,
+				contextPredicate: contextPredicate,
+				onclick: callback
+			})
+
+		ClipspaceDialog.items.push(item);
+	}
+
+	static invalidatePreview() {
+		if(ComfyApp.clipspace && ComfyApp.clipspace.imgs && ComfyApp.clipspace.imgs.length > 0) {
+			const img_preview = document.getElementById("clipspace_preview");
+			if(img_preview) {
+				img_preview.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src;
+				img_preview.style.maxHeight = "100%";
+				img_preview.style.maxWidth = "100%";
+			}
+		}
+	}
+
+	static invalidate() {
+		if(ClipspaceDialog.instance) {
+			const self = ClipspaceDialog.instance;
+			// allow reconstruct controls when copying from non-image to image content.
+			const children = $el("div.comfy-modal-content", [ self.createImgSettings(), ...self.createButtons() ]);
+
+			if(self.element) {
+				// update
+				self.element.removeChild(self.element.firstChild);
+				self.element.appendChild(children);
+			}
+			else {
+				// new
+				self.element = $el("div.comfy-modal", { parent: document.body }, [children,]);
+			}
+
+			if(self.element.children[0].children.length <= 1) {
+				self.element.children[0].appendChild($el("p", {}, ["Unable to find the features to edit content of a format stored in the current Clipspace."]));
+			}
+
+			ClipspaceDialog.invalidatePreview();
+		}
+	}
+
+	constructor() {
+		super();
+	}
+
+	createButtons(self) {
+		const buttons = [];
+
+		for(let idx in ClipspaceDialog.items) {
+			const item = ClipspaceDialog.items[idx];
+			if(!item.contextPredicate || item.contextPredicate())
+				buttons.push(ClipspaceDialog.items[idx]);
+		}
+
+		buttons.push(
+			$el("button", {
+				type: "button",
+				textContent: "Close",
+				onclick: () => { this.close(); }
+			})
+		);
+
+		return buttons;
+	}
+
+	createImgSettings() {
+		if(ComfyApp.clipspace.imgs) {
+			const combo_items = [];
+			const imgs = ComfyApp.clipspace.imgs;
+
+			for(let i=0; i < imgs.length; i++) {
+				combo_items.push($el("option", {value:i}, [`${i}`]));
+			}
+
+			const combo1 = $el("select",
+				{id:"clipspace_img_selector", onchange:(event) => {
+					ComfyApp.clipspace['selectedIndex'] = event.target.selectedIndex;
+					ClipspaceDialog.invalidatePreview();
+				} }, combo_items);
+
+			const row1 =
+				$el("tr", {},
+						[
+							$el("td", {}, [$el("font", {color:"white"}, ["Select Image"])]),
+							$el("td", {}, [combo1])
+						]);
+
+
+			const combo2 = $el("select",
+								{id:"clipspace_img_paste_mode", onchange:(event) => {
+									ComfyApp.clipspace['img_paste_mode'] = event.target.value;
+								} },
+								[
+									$el("option", {value:'selected'}, 'selected'),
+									$el("option", {value:'all'}, 'all')
+								]);
+			combo2.value = ComfyApp.clipspace['img_paste_mode'];
+
+			const row2 =
+				$el("tr", {},
+						[
+							$el("td", {}, [$el("font", {color:"white"}, ["Paste Mode"])]),
+							$el("td", {}, [combo2])
+						]);
+
+			const td = $el("td", {align:'center', width:'100px', height:'100px', colSpan:'2'},
+								[ $el("img",{id:"clipspace_preview", ondragstart:() => false},[]) ]);
+
+			const row3 =
+				$el("tr", {}, [td]);
+
+			return $el("table", {}, [row1, row2, row3]);
+		}
+		else {
+			return [];
+		}
+	}
+
+	createImgPreview() {
+		if(ComfyApp.clipspace.imgs) {
+			return $el("img",{id:"clipspace_preview", ondragstart:() => false});
+		}
+		else
+			return [];
+	}
+
+	show() {
+		const img_preview = document.getElementById("clipspace_preview");
+		ClipspaceDialog.invalidate();
+		
+		this.element.style.display = "block";
+	}
+}
+
+app.registerExtension({
+	name: "Comfy.Clipspace",
+	init(app) {
+		app.openClipspace =
+			function () {
+				if(!ClipspaceDialog.instance) {
+					ClipspaceDialog.instance = new ClipspaceDialog(app);
+					ComfyApp.clipspace_invalidate_handler = ClipspaceDialog.invalidate;
+				}
+
+				if(ComfyApp.clipspace) {
+					ClipspaceDialog.instance.show();
+				}
+				else
+					app.ui.dialog.show("Clipspace is Empty!");
+			};
+	}
+});

ComfyUI/web/extensions/core/colorPalette.js

@@ -0,0 +1,785 @@
+import {app} from "../../scripts/app.js";
+import {$el} from "../../scripts/ui.js";
+
+// Manage color palettes
+
+const colorPalettes = {
+	"dark": {
+		"id": "dark",
+		"name": "Dark (Default)",
+		"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
+				"NOISE": "#B0B0B0", // gray
+				"GUIDER": "#66FFFF", // cyan
+				"SAMPLER": "#ECB4B4", // very soft red
+				"SIGMAS": "#CDFFCD", // soft lime green
+				"TAESD": "#DCC274", // cheesecake
+			},
+			"litegraph_base": {
+				"BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAQBJREFUeNrs1rEKwjAUhlETUkj3vP9rdmr1Ysammk2w5wdxuLgcMHyptfawuZX4pJSWZTnfnu/lnIe/jNNxHHGNn//HNbbv+4dr6V+11uF527arU7+u63qfa/bnmh8sWLBgwYJlqRf8MEptXPBXJXa37BSl3ixYsGDBMliwFLyCV/DeLIMFCxYsWLBMwSt4Be/NggXLYMGCBUvBK3iNruC9WbBgwYJlsGApeAWv4L1ZBgsWLFiwYJmCV/AK3psFC5bBggULloJX8BpdwXuzYMGCBctgwVLwCl7Be7MMFixYsGDBsu8FH1FaSmExVfAxBa/gvVmwYMGCZbBg/W4vAQYA5tRF9QYlv/QAAAAASUVORK5CYII=",
+				"CLEAR_BACKGROUND_COLOR": "#222",
+				"NODE_TITLE_COLOR": "#999",
+				"NODE_SELECTED_TITLE_COLOR": "#FFF",
+				"NODE_TEXT_SIZE": 14,
+				"NODE_TEXT_COLOR": "#AAA",
+				"NODE_SUBTEXT_SIZE": 12,
+				"NODE_DEFAULT_COLOR": "#333",
+				"NODE_DEFAULT_BGCOLOR": "#353535",
+				"NODE_DEFAULT_BOXCOLOR": "#666",
+				"NODE_DEFAULT_SHAPE": "box",
+				"NODE_BOX_OUTLINE_COLOR": "#FFF",
+				"DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+				"DEFAULT_GROUP_FONT": 24,
+
+				"WIDGET_BGCOLOR": "#222",
+				"WIDGET_OUTLINE_COLOR": "#666",
+				"WIDGET_TEXT_COLOR": "#DDD",
+				"WIDGET_SECONDARY_TEXT_COLOR": "#999",
+
+				"LINK_COLOR": "#9A9",
+				"EVENT_LINK_COLOR": "#A86",
+				"CONNECTING_LINK_COLOR": "#AFA",
+			},
+			"comfy_base": {
+				"fg-color": "#fff",
+				"bg-color": "#202020",
+				"comfy-menu-bg": "#353535",
+				"comfy-input-bg": "#222",
+				"input-text": "#ddd",
+				"descrip-text": "#999",
+				"drag-text": "#ccc",
+				"error-text": "#ff4444",
+				"border-color": "#4e4e4e",
+				"tr-even-bg-color": "#222",
+				"tr-odd-bg-color": "#353535",
+				"content-bg": "#4e4e4e",
+				"content-fg": "#fff",
+				"content-hover-bg": "#222",
+				"content-hover-fg": "#fff"
+			}
+		},
+	},
+	"light": {
+		"id": "light",
+		"name": "Light",
+		"colors": {
+			"node_slot": {
+				"CLIP": "#FFA726", // orange
+				"CLIP_VISION": "#5C6BC0", // indigo
+				"CLIP_VISION_OUTPUT": "#8D6E63", // brown
+				"CONDITIONING": "#EF5350", // red
+				"CONTROL_NET": "#66BB6A", // green
+				"IMAGE": "#42A5F5", // blue
+				"LATENT": "#AB47BC", // purple
+				"MASK": "#9CCC65", // light green
+				"MODEL": "#7E57C2", // deep purple
+				"STYLE_MODEL": "#D4E157", // lime
+				"VAE": "#FF7043", // deep orange
+			},
+			"litegraph_base": {
+				"BACKGROUND_IMAGE": "data:image/gif;base64,R0lGODlhZABkALMAAAAAAP///+vr6+rq6ujo6Ofn5+bm5uXl5d3d3f///wAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAkALAAAAABkAGQAAAT/UMhJq7046827HkcoHkYxjgZhnGG6si5LqnIM0/fL4qwwIMAg0CAsEovBIxKhRDaNy2GUOX0KfVFrssrNdpdaqTeKBX+dZ+jYvEaTf+y4W66mC8PUdrE879f9d2mBeoNLfH+IhYBbhIx2jkiHiomQlGKPl4uZe3CaeZifnnijgkESBqipqqusra6vsLGys62SlZO4t7qbuby7CLa+wqGWxL3Gv3jByMOkjc2lw8vOoNSi0czAncXW3Njdx9Pf48/Z4Kbbx+fQ5evZ4u3k1fKR6cn03vHlp7T9/v8A/8Gbp4+gwXoFryXMB2qgwoMMHyKEqA5fxX322FG8tzBcRnMW/zlulPbRncmQGidKjMjyYsOSKEF2FBlJQMCbOHP6c9iSZs+UnGYCdbnSo1CZI5F64kn0p1KnTH02nSoV3dGTV7FFHVqVq1dtWcMmVQZTbNGu72zqXMuW7danVL+6e4t1bEy6MeueBYLXrNO5Ze36jQtWsOG97wIj1vt3St/DjTEORss4nNq2mDP3e7w4r1bFkSET5hy6s2TRlD2/mSxXtSHQhCunXo26NevCpmvD/UU6tuullzULH76q92zdZG/Ltv1a+W+osI/nRmyc+fRi1Xdbh+68+0vv10dH3+77KD/i6IdnX669/frn5Zsjh4/2PXju8+8bzc9/6fj27LFnX11/+IUnXWl7BJfegm79FyB9JOl3oHgSklefgxAC+FmFGpqHIYcCfkhgfCohSKKJVo044YUMttggiBkmp6KFXw1oII24oYhjiDByaKOOHcp3Y5BD/njikSkO+eBREQAAOw==",
+				"CLEAR_BACKGROUND_COLOR": "lightgray",
+				"NODE_TITLE_COLOR": "#222",
+				"NODE_SELECTED_TITLE_COLOR": "#000",
+				"NODE_TEXT_SIZE": 14,
+				"NODE_TEXT_COLOR": "#444",
+				"NODE_SUBTEXT_SIZE": 12,
+				"NODE_DEFAULT_COLOR": "#F7F7F7",
+				"NODE_DEFAULT_BGCOLOR": "#F5F5F5",
+				"NODE_DEFAULT_BOXCOLOR": "#CCC",
+				"NODE_DEFAULT_SHAPE": "box",
+				"NODE_BOX_OUTLINE_COLOR": "#000",
+				"DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.1)",
+				"DEFAULT_GROUP_FONT": 24,
+
+				"WIDGET_BGCOLOR": "#D4D4D4",
+				"WIDGET_OUTLINE_COLOR": "#999",
+				"WIDGET_TEXT_COLOR": "#222",
+				"WIDGET_SECONDARY_TEXT_COLOR": "#555",
+
+				"LINK_COLOR": "#4CAF50",
+				"EVENT_LINK_COLOR": "#FF9800",
+				"CONNECTING_LINK_COLOR": "#2196F3",
+			},
+			"comfy_base": {
+				"fg-color": "#222",
+				"bg-color": "#DDD",
+				"comfy-menu-bg": "#F5F5F5",
+				"comfy-input-bg": "#C9C9C9",
+				"input-text": "#222",
+				"descrip-text": "#444",
+				"drag-text": "#555",
+				"error-text": "#F44336",
+				"border-color": "#888",
+				"tr-even-bg-color": "#f9f9f9",
+				"tr-odd-bg-color": "#fff",
+				"content-bg": "#e0e0e0",
+				"content-fg": "#222",
+				"content-hover-bg": "#adadad",
+				"content-hover-fg": "#222"
+			}
+		},
+	},
+	"solarized": {
+		"id": "solarized",
+		"name": "Solarized",
+		"colors": {
+			"node_slot": {
+				"CLIP": "#2AB7CA", // light blue
+				"CLIP_VISION": "#6c71c4", // blue violet
+				"CLIP_VISION_OUTPUT": "#859900", // olive green
+				"CONDITIONING": "#d33682", // magenta
+				"CONTROL_NET": "#d1ffd7", // light mint green
+				"IMAGE": "#5940bb", // deep blue violet
+				"LATENT": "#268bd2", // blue
+				"MASK": "#CCC9E7", // light purple-gray
+				"MODEL": "#dc322f", // red
+				"STYLE_MODEL": "#1a998a", // teal
+				"UPSCALE_MODEL": "#054A29", // dark green
+				"VAE": "#facfad", // light pink-orange
+			},
+			"litegraph_base": {
+				"NODE_TITLE_COLOR": "#fdf6e3", // Base3
+				"NODE_SELECTED_TITLE_COLOR": "#A9D400",
+				"NODE_TEXT_SIZE": 14,
+				"NODE_TEXT_COLOR": "#657b83", // Base00
+				"NODE_SUBTEXT_SIZE": 12,
+				"NODE_DEFAULT_COLOR": "#094656",
+				"NODE_DEFAULT_BGCOLOR": "#073642", // Base02
+				"NODE_DEFAULT_BOXCOLOR": "#839496", // Base0
+				"NODE_DEFAULT_SHAPE": "box",
+				"NODE_BOX_OUTLINE_COLOR": "#fdf6e3", // Base3
+				"DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+				"DEFAULT_GROUP_FONT": 24,
+
+				"WIDGET_BGCOLOR": "#002b36", // Base03
+				"WIDGET_OUTLINE_COLOR": "#839496", // Base0
+				"WIDGET_TEXT_COLOR": "#fdf6e3", // Base3
+				"WIDGET_SECONDARY_TEXT_COLOR": "#93a1a1", // Base1
+
+				"LINK_COLOR": "#2aa198", // Solarized Cyan
+				"EVENT_LINK_COLOR": "#268bd2", // Solarized Blue
+				"CONNECTING_LINK_COLOR": "#859900", // Solarized Green
+			},
+			"comfy_base": {
+				"fg-color": "#fdf6e3", // Base3
+				"bg-color": "#002b36", // Base03
+				"comfy-menu-bg": "#073642", // Base02
+				"comfy-input-bg": "#002b36", // Base03
+				"input-text": "#93a1a1", // Base1
+				"descrip-text": "#586e75", // Base01
+				"drag-text": "#839496", // Base0
+				"error-text": "#dc322f", // Solarized Red
+				"border-color": "#657b83", // Base00
+				"tr-even-bg-color": "#002b36",
+				"tr-odd-bg-color": "#073642",
+				"content-bg": "#657b83",
+				"content-fg": "#fdf6e3",
+				"content-hover-bg": "#002b36",
+				"content-hover-fg": "#fdf6e3"
+			}
+		},
+	},
+	"arc": {
+		"id": "arc",
+		"name": "Arc",
+		"colors": {
+			"node_slot": {
+			  "BOOLEAN": "",
+			  "CLIP": "#eacb8b",
+			  "CLIP_VISION": "#A8DADC",
+			  "CLIP_VISION_OUTPUT": "#ad7452",
+			  "CONDITIONING": "#cf876f",
+			  "CONTROL_NET": "#00d78d",
+			  "CONTROL_NET_WEIGHTS": "",
+			  "FLOAT": "",
+			  "GLIGEN": "",
+			  "IMAGE": "#80a1c0",
+			  "IMAGEUPLOAD": "",
+			  "INT": "",
+			  "LATENT": "#b38ead",
+			  "LATENT_KEYFRAME": "",
+			  "MASK": "#a3bd8d",
+			  "MODEL": "#8978a7",
+			  "SAMPLER": "",
+			  "SIGMAS": "",
+			  "STRING": "",
+			  "STYLE_MODEL": "#C2FFAE",
+			  "T2I_ADAPTER_WEIGHTS": "",
+			  "TAESD": "#DCC274",
+			  "TIMESTEP_KEYFRAME": "",
+			  "UPSCALE_MODEL": "",
+			  "VAE": "#be616b"
+			},
+			"litegraph_base": {
+			  "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABcklEQVR4nO3YMUoDARgF4RfxBqZI6/0vZqFn0MYtrLIQMFN8U6V4LAtD+Jm9XG/v30OGl2e/AP7yevz4+vx45nvgF/+QGITEICQGITEIiUFIjNNC3q43u3/YnRJyPOzeQ+0e220nhRzReC8e7R7bbdvl+Jal1Bs46jEIiUFIDEJiEBKDkBhKPbZT6qHdptRTu02p53DUYxASg5AYhMQgJAYhMZR6bKfUQ7tNqad2m1LP4ajHICQGITEIiUFIDEJiKPXYTqmHdptST+02pZ7DUY9BSAxCYhASg5AYhMRQ6rGdUg/tNqWe2m1KPYejHoOQGITEICQGITEIiaHUYzulHtptSj2125R6Dkc9BiExCIlBSAxCYhASQ6nHdko9tNuUemq3KfUcjnoMQmIQEoOQGITEICSGUo/tlHpotyn11G5T6jkc9RiExCAkBiExCIlBSAylHtsp9dBuU+qp3abUczjqMQiJQUgMQmIQEoOQGITE+AHFISNQrFTGuwAAAABJRU5ErkJggg==",
+			  "CLEAR_BACKGROUND_COLOR": "#2b2f38",
+			  "NODE_TITLE_COLOR": "#b2b7bd",
+			  "NODE_SELECTED_TITLE_COLOR": "#FFF",
+			  "NODE_TEXT_SIZE": 14,
+			  "NODE_TEXT_COLOR": "#AAA",
+			  "NODE_SUBTEXT_SIZE": 12,
+			  "NODE_DEFAULT_COLOR": "#2b2f38",
+			  "NODE_DEFAULT_BGCOLOR": "#242730",
+			  "NODE_DEFAULT_BOXCOLOR": "#6e7581",
+			  "NODE_DEFAULT_SHAPE": "box",
+			  "NODE_BOX_OUTLINE_COLOR": "#FFF",
+			  "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+			  "DEFAULT_GROUP_FONT": 22,
+			  "WIDGET_BGCOLOR": "#2b2f38",
+			  "WIDGET_OUTLINE_COLOR": "#6e7581",
+			  "WIDGET_TEXT_COLOR": "#DDD",
+			  "WIDGET_SECONDARY_TEXT_COLOR": "#b2b7bd",
+			  "LINK_COLOR": "#9A9",
+			  "EVENT_LINK_COLOR": "#A86",
+			  "CONNECTING_LINK_COLOR": "#AFA"
+			},
+			"comfy_base": {
+			  "fg-color": "#fff",
+			  "bg-color": "#2b2f38",
+			  "comfy-menu-bg": "#242730",
+			  "comfy-input-bg": "#2b2f38",
+			  "input-text": "#ddd",
+			  "descrip-text": "#b2b7bd",
+			  "drag-text": "#ccc",
+			  "error-text": "#ff4444",
+			  "border-color": "#6e7581",
+			  "tr-even-bg-color": "#2b2f38",
+			  "tr-odd-bg-color": "#242730",
+			  "content-bg": "#6e7581",
+			  "content-fg": "#fff",
+			  "content-hover-bg": "#2b2f38",
+			  "content-hover-fg": "#fff"
+			}
+		},
+	},
+	"nord": {
+		"id": "nord",
+		"name": "Nord",
+		"colors": {
+			"node_slot": {
+			  "BOOLEAN": "",
+			  "CLIP": "#eacb8b",
+			  "CLIP_VISION": "#A8DADC",
+			  "CLIP_VISION_OUTPUT": "#ad7452",
+			  "CONDITIONING": "#cf876f",
+			  "CONTROL_NET": "#00d78d",
+			  "CONTROL_NET_WEIGHTS": "",
+			  "FLOAT": "",
+			  "GLIGEN": "",
+			  "IMAGE": "#80a1c0",
+			  "IMAGEUPLOAD": "",
+			  "INT": "",
+			  "LATENT": "#b38ead",
+			  "LATENT_KEYFRAME": "",
+			  "MASK": "#a3bd8d",
+			  "MODEL": "#8978a7",
+			  "SAMPLER": "",
+			  "SIGMAS": "",
+			  "STRING": "",
+			  "STYLE_MODEL": "#C2FFAE",
+			  "T2I_ADAPTER_WEIGHTS": "",
+			  "TAESD": "#DCC274",
+			  "TIMESTEP_KEYFRAME": "",
+			  "UPSCALE_MODEL": "",
+			  "VAE": "#be616b"
+			},
+			"litegraph_base": {
+			  "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFu2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMTEtMTVUMDE6MjA6NDUrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMTEtMTVUMDE6MjA6NDUrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUwNDFhMmZjLTEzNzQtMTk0ZC1hZWY4LTYxMzM1MTVmNjUwMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMzFiMTBiMC1iNGZiLTAyNGUtYjEyZS0zMDUzMDNjZDA3YzgiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoyMzFiMTBiMC1iNGZiLTAyNGUtYjEyZS0zMDUzMDNjZDA3YzgiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjIzMWIxMGIwLWI0ZmItMDI0ZS1iMTJlLTMwNTMwM2NkMDdjOCIgc3RFdnQ6d2hlbj0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MDQxYTJmYy0xMzc0LTE5NGQtYWVmOC02MTMzNTE1ZjY1MDAiIHN0RXZ0OndoZW49IjIwMjMtMTEtMTVUMDE6MjA6NDUrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz73jWg/AAAAyUlEQVR42u3WKwoAIBRFQRdiMb1idv9Lsxn9gEFw4Dbb8JCTojbbXEJwjJVL2HKwYMGCBQuWLbDmjr+9zrBGjHl1WVcvy2DBggULFizTWQpewSt4HzwsgwULFiwFr7MUvMtS8D54WLBgGSxYCl7BK3iXZbBgwYIFC5bpLAWv4BW8Dx6WwYIFC5aC11kK3mUpeB88LFiwDBYsBa/gFbzLMliwYMGCBct0loJX8AreBw/LYMGCBUvB6ywF77IUvA8eFixYBgsWrNfWAZPltufdad+1AAAAAElFTkSuQmCC",
+			  "CLEAR_BACKGROUND_COLOR": "#212732",
+			  "NODE_TITLE_COLOR": "#999",
+			  "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
+			  "NODE_TEXT_SIZE": 14,
+			  "NODE_TEXT_COLOR": "#bcc2c8",
+			  "NODE_SUBTEXT_SIZE": 12,
+			  "NODE_DEFAULT_COLOR": "#2e3440",
+			  "NODE_DEFAULT_BGCOLOR": "#161b22",
+			  "NODE_DEFAULT_BOXCOLOR": "#545d70",
+			  "NODE_DEFAULT_SHAPE": "box",
+			  "NODE_BOX_OUTLINE_COLOR": "#e5eaf0",
+			  "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+			  "DEFAULT_GROUP_FONT": 24,
+			  "WIDGET_BGCOLOR": "#2e3440",
+			  "WIDGET_OUTLINE_COLOR": "#545d70",
+			  "WIDGET_TEXT_COLOR": "#bcc2c8",
+			  "WIDGET_SECONDARY_TEXT_COLOR": "#999",
+			  "LINK_COLOR": "#9A9",
+			  "EVENT_LINK_COLOR": "#A86",
+			  "CONNECTING_LINK_COLOR": "#AFA"
+			},
+			"comfy_base": {
+			  "fg-color": "#e5eaf0",
+			  "bg-color": "#2e3440",
+			  "comfy-menu-bg": "#161b22",
+			  "comfy-input-bg": "#2e3440",
+			  "input-text": "#bcc2c8",
+			  "descrip-text": "#999",
+			  "drag-text": "#ccc",
+			  "error-text": "#ff4444",
+			  "border-color": "#545d70",
+			  "tr-even-bg-color": "#2e3440",
+			  "tr-odd-bg-color": "#161b22",
+			  "content-bg": "#545d70",
+			  "content-fg": "#e5eaf0",
+			  "content-hover-bg": "#2e3440",
+			  "content-hover-fg": "#e5eaf0"
+			}
+		},
+	},
+	"github": {
+		"id": "github",
+		"name": "Github",
+		"colors": {
+			"node_slot": {
+			  "BOOLEAN": "",
+			  "CLIP": "#eacb8b",
+			  "CLIP_VISION": "#A8DADC",
+			  "CLIP_VISION_OUTPUT": "#ad7452",
+			  "CONDITIONING": "#cf876f",
+			  "CONTROL_NET": "#00d78d",
+			  "CONTROL_NET_WEIGHTS": "",
+			  "FLOAT": "",
+			  "GLIGEN": "",
+			  "IMAGE": "#80a1c0",
+			  "IMAGEUPLOAD": "",
+			  "INT": "",
+			  "LATENT": "#b38ead",
+			  "LATENT_KEYFRAME": "",
+			  "MASK": "#a3bd8d",
+			  "MODEL": "#8978a7",
+			  "SAMPLER": "",
+			  "SIGMAS": "",
+			  "STRING": "",
+			  "STYLE_MODEL": "#C2FFAE",
+			  "T2I_ADAPTER_WEIGHTS": "",
+			  "TAESD": "#DCC274",
+			  "TIMESTEP_KEYFRAME": "",
+			  "UPSCALE_MODEL": "",
+			  "VAE": "#be616b"
+			},
+			"litegraph_base": {
+			  "BACKGROUND_IMAGE": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGlmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4xLWMwMDEgNzkuMTQ2Mjg5OSwgMjAyMy8wNi8yNS0yMDowMTo1NSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0xMS0xM1QwMDoxODowMiswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmIyYzRhNjA5LWJmYTctYTg0MC1iOGFlLTk3MzE2ZjM1ZGIyNyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjk0ZmNlZGU4LTE1MTctZmQ0MC04ZGU3LWYzOTgxM2E3ODk5ZiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjIzMWIxMGIwLWI0ZmItMDI0ZS1iMTJlLTMwNTMwM2NkMDdjOCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjMxYjEwYjAtYjRmYi0wMjRlLWIxMmUtMzA1MzAzY2QwN2M4IiBzdEV2dDp3aGVuPSIyMDIzLTExLTEzVDAwOjE4OjAyKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjUuMSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ4OWY1NzlmLTJkNjUtZWQ0Zi04OTg0LTA4NGE2MGE1ZTMzNSIgc3RFdnQ6d2hlbj0iMjAyMy0xMS0xNVQwMjowNDo1OSswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIDI1LjEgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiMmM0YTYwOS1iZmE3LWE4NDAtYjhhZS05NzMxNmYzNWRiMjciIHN0RXZ0OndoZW49IjIwMjMtMTEtMTVUMDI6MDQ6NTkrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyNS4xIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4OTe6GAAAAx0lEQVR42u3WMQoAIQxFwRzJys77X8vSLiRgITif7bYbgrwYc/mKXyBoY4VVBgsWLFiwYFmOlTv+9jfDOjHmr8u6eVkGCxYsWLBgmc5S8ApewXvgYRksWLBgKXidpeBdloL3wMOCBctgwVLwCl7BuyyDBQsWLFiwTGcpeAWv4D3wsAwWLFiwFLzOUvAuS8F74GHBgmWwYCl4Ba/gXZbBggULFixYprMUvIJX8B54WAYLFixYCl5nKXiXpeA98LBgwTJYsGC9tg1o8f4TTtqzNQAAAABJRU5ErkJggg==",
+			  "CLEAR_BACKGROUND_COLOR": "#040506",
+			  "NODE_TITLE_COLOR": "#999",
+			  "NODE_SELECTED_TITLE_COLOR": "#e5eaf0",
+			  "NODE_TEXT_SIZE": 14,
+			  "NODE_TEXT_COLOR": "#bcc2c8",
+			  "NODE_SUBTEXT_SIZE": 12,
+			  "NODE_DEFAULT_COLOR": "#161b22",
+			  "NODE_DEFAULT_BGCOLOR": "#13171d",
+			  "NODE_DEFAULT_BOXCOLOR": "#30363d",
+			  "NODE_DEFAULT_SHAPE": "box",
+			  "NODE_BOX_OUTLINE_COLOR": "#e5eaf0",
+			  "DEFAULT_SHADOW_COLOR": "rgba(0,0,0,0.5)",
+			  "DEFAULT_GROUP_FONT": 24,
+			  "WIDGET_BGCOLOR": "#161b22",
+			  "WIDGET_OUTLINE_COLOR": "#30363d",
+			  "WIDGET_TEXT_COLOR": "#bcc2c8",
+			  "WIDGET_SECONDARY_TEXT_COLOR": "#999",
+			  "LINK_COLOR": "#9A9",
+			  "EVENT_LINK_COLOR": "#A86",
+			  "CONNECTING_LINK_COLOR": "#AFA"
+			},
+			"comfy_base": {
+			  "fg-color": "#e5eaf0",
+			  "bg-color": "#161b22",
+			  "comfy-menu-bg": "#13171d",
+			  "comfy-input-bg": "#161b22",
+			  "input-text": "#bcc2c8",
+			  "descrip-text": "#999",
+			  "drag-text": "#ccc",
+			  "error-text": "#ff4444",
+			  "border-color": "#30363d",
+			  "tr-even-bg-color": "#161b22",
+			  "tr-odd-bg-color": "#13171d",
+			  "content-bg": "#30363d",
+			  "content-fg": "#e5eaf0",
+			  "content-hover-bg": "#161b22",
+			  "content-hover-fg": "#e5eaf0"
+			}
+		},
+	}
+};
+
+const id = "Comfy.ColorPalette";
+const idCustomColorPalettes = "Comfy.CustomColorPalettes";
+const defaultColorPaletteId = "dark";
+const els = {}
+// const ctxMenu = LiteGraph.ContextMenu;
+app.registerExtension({
+	name: id,
+	addCustomNodeDefs(node_defs) {
+		const sortObjectKeys = (unordered) => {
+			return Object.keys(unordered).sort().reduce((obj, key) => {
+				obj[key] = unordered[key];
+				return obj;
+			}, {});
+		};
+
+		function getSlotTypes() {
+			var types = [];
+
+			const defs = node_defs;
+			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;
+		}
+
+		function completeColorPalette(colorPalette) {
+			var types = 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": {},
+					"litegraph_base": {},
+					"comfy_base": {}
+				}
+			};
+
+			// Copy over missing keys from default color palette
+			const defaultColorPalette = colorPalettes[defaultColorPaletteId];
+			for (const key in defaultColorPalette.colors.litegraph_base) {
+				if (!colorPalette.colors.litegraph_base[key]) {
+					colorPalette.colors.litegraph_base[key] = "";
+				}
+			}
+			for (const key in defaultColorPalette.colors.comfy_base) {
+				if (!colorPalette.colors.comfy_base[key]) {
+					colorPalette.colors.comfy_base[key] = "";
+				}
+			}
+
+			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") {
+				alert("Invalid color palette.");
+				return;
+			}
+
+			if (!colorPalette.id) {
+				alert("Color palette missing id.");
+				return;
+			}
+
+			if (!colorPalette.name) {
+				alert("Color palette missing name.");
+				return;
+			}
+
+			if (!colorPalette.colors) {
+				alert("Color palette missing colors.");
+				return;
+			}
+
+			if (colorPalette.colors.node_slot && typeof (colorPalette.colors.node_slot) !== "object") {
+				alert("Invalid color palette colors.node_slot.");
+				return;
+			}
+
+			const 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) => {
+			const 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) {
+				// Sets the colors of node slots and links
+				if (colorPalette.colors.node_slot) {
+					Object.assign(app.canvas.default_connection_color_byType, colorPalette.colors.node_slot);
+					Object.assign(LGraphCanvas.link_type_colors, colorPalette.colors.node_slot);
+				}
+				// Sets the colors of the LiteGraph objects
+				if (colorPalette.colors.litegraph_base) {
+					// Everything updates correctly in the loop, except the Node Title and Link Color for some reason
+					app.canvas.node_title_color = colorPalette.colors.litegraph_base.NODE_TITLE_COLOR;
+					app.canvas.default_link_color = colorPalette.colors.litegraph_base.LINK_COLOR;
+
+					for (const key in colorPalette.colors.litegraph_base) {
+						if (colorPalette.colors.litegraph_base.hasOwnProperty(key) && LiteGraph.hasOwnProperty(key)) {
+							LiteGraph[key] = colorPalette.colors.litegraph_base[key];
+						}
+					}
+				}
+				// Sets the color of ComfyUI elements
+				if (colorPalette.colors.comfy_base) {
+					const rootStyle = document.documentElement.style;
+					for (const key in colorPalette.colors.comfy_base) {
+						rootStyle.setProperty('--' + key, colorPalette.colors.comfy_base[key]);
+					}
+				}
+				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: () => {
+				const 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) => {
+				const options = [
+					...Object.values(colorPalettes).map(c=> $el("option", {
+						textContent: c.name,
+						value: c.id,
+						selected: c.id === value
+					})),
+					...Object.values(getCustomColorPalettes()).map(c=>$el("option", {
+						textContent: `${c.name} (custom)`,
+						value: `custom_${c.id}`,
+						selected: `custom_${c.id}` === value
+					}))	,
+				];
+
+				els.select = $el("select", {
+					style: {
+						marginBottom: "0.15rem",
+						width: "100%",
+					},
+					onchange: (e) => {
+						setter(e.target.value);
+					}
+				}, options)
+
+				return $el("tr", [
+					$el("td", [
+						$el("label", {
+							for: id.replaceAll(".", "-"),
+							textContent: "Color palette",
+						}),
+					]),
+					$el("td", [
+						els.select,
+						$el("div", {
+							style: {
+								display: "grid",
+								gap: "4px",
+								gridAutoFlow: "column",
+							},
+						}, [
+							$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]) {
+										alert("You cannot delete a built-in color palette.");
+										return;
+									}
+
+									if (colorPaletteId.startsWith("custom_")) {
+										colorPaletteId = colorPaletteId.substr(7);
+									}
+
+									await deleteCustomColorPalette(colorPaletteId);
+								}
+							}),
+						]),
+					]),
+				])
+			},
+			defaultValue: defaultColorPaletteId,
+			async onChange(value) {
+				if (!value) {
+					return;
+				}
+
+				let palette = colorPalettes[value];
+				if (palette) {
+					await loadColorPalette(palette);
+				} else if (value.startsWith("custom_")) {
+					value = value.substr(7);
+					let customColorPalettes = getCustomColorPalettes();
+					if (customColorPalettes[value]) {
+						palette = customColorPalettes[value];
+						await loadColorPalette(customColorPalettes[value]);
+					}
+				}
+
+				let {BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR} = palette.colors.litegraph_base;
+				if (BACKGROUND_IMAGE === undefined || CLEAR_BACKGROUND_COLOR === undefined) {
+					const base = colorPalettes["dark"].colors.litegraph_base;
+					BACKGROUND_IMAGE = base.BACKGROUND_IMAGE;
+					CLEAR_BACKGROUND_COLOR = base.CLEAR_BACKGROUND_COLOR;
+				}
+				app.canvas.updateBackground(BACKGROUND_IMAGE, CLEAR_BACKGROUND_COLOR);
+			},
+		});
+	},
+});

ComfyUI/web/extensions/core/contextMenuFilter.js

@@ -0,0 +1,148 @@
+import {app} from "../../scripts/app.js";
+
+// Adds filtering to combo context menus
+
+const ext = {
+	name: "Comfy.ContextMenuFilter",
+	init() {
+		const ctxMenu = LiteGraph.ContextMenu;
+
+		LiteGraph.ContextMenu = function (values, options) {
+			const ctx = ctxMenu.call(this, values, options);
+
+			// If we are a dark menu (only used for combo boxes) then add a filter input
+			if (options?.className === "dark" && values?.length > 10) {
+				const filter = document.createElement("input");
+				filter.classList.add("comfy-context-menu-filter");
+				filter.placeholder = "Filter list";
+				this.root.prepend(filter);
+
+				const items = Array.from(this.root.querySelectorAll(".litemenu-entry"));
+				let displayedItems = [...items];
+				let itemCount = displayedItems.length;
+
+				// We must request an animation frame for the current node of the active canvas to update.
+				requestAnimationFrame(() => {
+					const currentNode = LGraphCanvas.active_canvas.current_node;
+					const clickedComboValue = currentNode.widgets
+						?.filter(w => w.type === "combo" && w.options.values.length === values.length)
+						.find(w => w.options.values.every((v, i) => v === values[i]))
+						?.value;
+
+					let selectedIndex = clickedComboValue ? values.findIndex(v => v === clickedComboValue) : 0;
+					if (selectedIndex < 0) {
+						selectedIndex = 0;
+					} 
+					let selectedItem = displayedItems[selectedIndex];
+					updateSelected();
+
+					// Apply highlighting to the selected item
+					function updateSelected() {
+						selectedItem?.style.setProperty("background-color", "");
+						selectedItem?.style.setProperty("color", "");
+						selectedItem = displayedItems[selectedIndex];
+						selectedItem?.style.setProperty("background-color", "#ccc", "important");
+						selectedItem?.style.setProperty("color", "#000", "important");
+					}
+
+					const positionList = () => {
+						const rect = this.root.getBoundingClientRect();
+
+						// If the top is off-screen then shift the element with scaling applied
+						if (rect.top < 0) {
+							const scale = 1 - this.root.getBoundingClientRect().height / this.root.clientHeight;
+							const shift = (this.root.clientHeight * scale) / 2;
+							this.root.style.top = -shift + "px";
+						}
+					}
+
+					// Arrow up/down to select items
+					filter.addEventListener("keydown", (event) => {
+						switch (event.key) {
+							case "ArrowUp":
+								event.preventDefault();
+								if (selectedIndex === 0) {
+									selectedIndex = itemCount - 1;
+								} else {
+									selectedIndex--;
+								}
+								updateSelected();
+								break;
+							case "ArrowRight":
+								event.preventDefault();
+								selectedIndex = itemCount - 1;
+								updateSelected();
+								break;
+							case "ArrowDown":
+								event.preventDefault();
+								if (selectedIndex === itemCount - 1) {
+									selectedIndex = 0;
+								} else {
+									selectedIndex++;
+								}
+								updateSelected();
+								break;
+							case "ArrowLeft":
+								event.preventDefault();
+								selectedIndex = 0;
+								updateSelected();
+								break;
+							case "Enter":
+								selectedItem?.click();
+								break;
+							case "Escape":
+								this.close();
+								break;
+						}
+					});
+
+					filter.addEventListener("input", () => {
+						// Hide all items that don't match our filter
+						const term = filter.value.toLocaleLowerCase();
+						// When filtering, recompute which items are visible for arrow up/down and maintain selection.
+						displayedItems = items.filter(item => {
+							const isVisible = !term || item.textContent.toLocaleLowerCase().includes(term);
+							item.style.display = isVisible ? "block" : "none";
+							return isVisible;
+						});
+
+						selectedIndex = 0;
+						if (displayedItems.includes(selectedItem)) {
+							selectedIndex = displayedItems.findIndex(d => d === selectedItem);
+						}
+						itemCount = displayedItems.length;
+
+						updateSelected();
+
+						// If we have an event then we can try and position the list under the source
+						if (options.event) {
+							let top = options.event.clientY - 10;
+
+							const bodyRect = document.body.getBoundingClientRect();
+							const rootRect = this.root.getBoundingClientRect();
+							if (bodyRect.height && top > bodyRect.height - rootRect.height - 10) {
+								top = Math.max(0, bodyRect.height - rootRect.height - 10);
+							}
+
+							this.root.style.top = top + "px";
+							positionList();
+						}
+					});
+
+					requestAnimationFrame(() => {
+						// Focus the filter box when opening
+						filter.focus();
+
+						positionList();
+					});
+				})
+			}
+
+			return ctx;
+		};
+
+		LiteGraph.ContextMenu.prototype = ctxMenu.prototype;
+	},
+}
+
+app.registerExtension(ext);

ComfyUI/web/extensions/core/dynamicPrompts.js

@@ -0,0 +1,48 @@
+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.
+
+/*
+ * Strips C-style line and block comments from a string
+ */
+function stripComments(str) {
+	return str.replace(/\/\*[\s\S]*?\*\/|\/\/.*/g,'');
+}
+
+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.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 = stripComments(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
+					if (workflowNode?.widgets_values)
+						workflowNode.widgets_values[widgetIndex] = prompt;
+
+					return prompt;
+				};
+			}
+		}
+	},
+});

ComfyUI/web/extensions/core/editAttention.js

@@ -0,0 +1,144 @@
+import { app } from "../../scripts/app.js";
+
+// Allows you to edit the attention weight by holding ctrl (or cmd) and using the up/down arrow keys
+
+app.registerExtension({
+    name: "Comfy.EditAttention",
+    init() {
+        const editAttentionDelta = app.ui.settings.addSetting({
+            id: "Comfy.EditAttention.Delta",
+            name: "Ctrl+up/down precision",
+            type: "slider",
+            attrs: {
+                min: 0.01,
+                max: 0.5,
+                step: 0.01,
+            },
+            defaultValue: 0.05,
+        });
+
+        function incrementWeight(weight, delta) {
+            const floatWeight = parseFloat(weight);
+            if (isNaN(floatWeight)) return weight;
+            const newWeight = floatWeight + delta;
+            if (newWeight < 0) return "0";
+            return String(Number(newWeight.toFixed(10)));
+        }
+
+        function findNearestEnclosure(text, cursorPos) {
+            let start = cursorPos, end = cursorPos;
+            let openCount = 0, closeCount = 0;
+
+            // Find opening parenthesis before cursor
+            while (start >= 0) {
+                start--;
+                if (text[start] === "(" && openCount === closeCount) break;
+                if (text[start] === "(") openCount++;
+                if (text[start] === ")") closeCount++;
+            }
+            if (start < 0) return false;
+
+            openCount = 0;
+            closeCount = 0;
+
+            // Find closing parenthesis after cursor
+            while (end < text.length) {
+                if (text[end] === ")" && openCount === closeCount) break;
+                if (text[end] === "(") openCount++;
+                if (text[end] === ")") closeCount++;
+                end++;
+            }
+            if (end === text.length) return false;
+
+            return { start: start + 1, end: end };
+        }
+
+        function addWeightToParentheses(text) {
+            const parenRegex = /^\((.*)\)$/;
+            const parenMatch = text.match(parenRegex);
+
+            const floatRegex = /:([+-]?(\d*\.)?\d+([eE][+-]?\d+)?)/;
+            const floatMatch = text.match(floatRegex);
+
+            if (parenMatch && !floatMatch) {
+                return `(${parenMatch[1]}:1.0)`;
+            } else {
+                return text;
+            }
+        };
+
+        function editAttention(event) {
+            const inputField = event.composedPath()[0];
+            const delta = parseFloat(editAttentionDelta.value);
+
+            if (inputField.tagName !== "TEXTAREA") return;
+            if (!(event.key === "ArrowUp" || event.key === "ArrowDown")) return;
+            if (!event.ctrlKey && !event.metaKey) return;
+
+            event.preventDefault();
+
+            let start = inputField.selectionStart;
+            let end = inputField.selectionEnd;
+            let selectedText = inputField.value.substring(start, end);
+
+            // If there is no selection, attempt to find the nearest enclosure, or select the current word
+            if (!selectedText) {
+                const nearestEnclosure = findNearestEnclosure(inputField.value, start);
+                if (nearestEnclosure) {
+                    start = nearestEnclosure.start;
+                    end = nearestEnclosure.end;
+                    selectedText = inputField.value.substring(start, end);
+                } else {
+                    // Select the current word, find the start and end of the word
+                    const delimiters = " .,\\/!?%^*;:{}=-_`~()\r\n\t";
+                    
+                    while (!delimiters.includes(inputField.value[start - 1]) && start > 0) {
+                        start--;
+                    }
+                    
+                    while (!delimiters.includes(inputField.value[end]) && end < inputField.value.length) {
+                        end++;
+                    }
+
+                    selectedText = inputField.value.substring(start, end);
+                    if (!selectedText) return;
+                }
+            }
+
+            // If the selection ends with a space, remove it
+            if (selectedText[selectedText.length - 1] === " ") {
+                selectedText = selectedText.substring(0, selectedText.length - 1);
+                end -= 1;
+            }
+
+            // If there are parentheses left and right of the selection, select them
+            if (inputField.value[start - 1] === "(" && inputField.value[end] === ")") {
+                start -= 1;
+                end += 1;
+                selectedText = inputField.value.substring(start, end);
+            }
+
+            // If the selection is not enclosed in parentheses, add them
+            if (selectedText[0] !== "(" || selectedText[selectedText.length - 1] !== ")") {
+                selectedText = `(${selectedText})`;
+            }
+
+            // If the selection does not have a weight, add a weight of 1.0
+            selectedText = addWeightToParentheses(selectedText);
+
+            // Increment the weight
+            const weightDelta = event.key === "ArrowUp" ? delta : -delta;
+            const updatedText = selectedText.replace(/\((.*):(\d+(?:\.\d+)?)\)/, (match, text, weight) => {
+                weight = incrementWeight(weight, weightDelta);
+                if (weight == 1) {
+                    return text;
+                } else {
+                    return `(${text}:${weight})`;
+                }
+            });
+
+            inputField.setRangeText(updatedText, start, end, "select");
+        }
+        window.addEventListener("keydown", editAttention);
+    },
+});

ComfyUI/web/extensions/core/groupNode.js

@@ -0,0 +1,1281 @@
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js";
+import { mergeIfValid } from "./widgetInputs.js";
+import { ManageGroupDialog } from "./groupNodeManage.js";
+
+const GROUP = Symbol();
+
+const Workflow = {
+	InUse: {
+		Free: 0,
+		Registered: 1,
+		InWorkflow: 2,
+	},
+	isInUseGroupNode(name) {
+		const id = `workflow/${name}`;
+		// Check if lready registered/in use in this workflow
+		if (app.graph.extra?.groupNodes?.[name]) {
+			if (app.graph._nodes.find((n) => n.type === id)) {
+				return Workflow.InUse.InWorkflow;
+			} else {
+				return Workflow.InUse.Registered;
+			}
+		}
+		return Workflow.InUse.Free;
+	},
+	storeGroupNode(name, data) {
+		let extra = app.graph.extra;
+		if (!extra) app.graph.extra = extra = {};
+		let groupNodes = extra.groupNodes;
+		if (!groupNodes) extra.groupNodes = groupNodes = {};
+		groupNodes[name] = data;
+	},
+};
+
+class GroupNodeBuilder {
+	constructor(nodes) {
+		this.nodes = nodes;
+	}
+
+	build() {
+		const name = this.getName();
+		if (!name) return;
+
+		// Sort the nodes so they are in execution order
+		// this allows for widgets to be in the correct order when reconstructing
+		this.sortNodes();
+
+		this.nodeData = this.getNodeData();
+		Workflow.storeGroupNode(name, this.nodeData);
+
+		return { name, nodeData: this.nodeData };
+	}
+
+	getName() {
+		const name = prompt("Enter group name");
+		if (!name) return;
+		const used = Workflow.isInUseGroupNode(name);
+		switch (used) {
+			case Workflow.InUse.InWorkflow:
+				alert(
+					"An in use group node with this name already exists embedded in this workflow, please remove any instances or use a new name."
+				);
+				return;
+			case Workflow.InUse.Registered:
+				if (!confirm("A group node with this name already exists embedded in this workflow, are you sure you want to overwrite it?")) {
+					return;
+				}
+				break;
+		}
+		return name;
+	}
+
+	sortNodes() {
+		// Gets the builders nodes in graph execution order
+		const nodesInOrder = app.graph.computeExecutionOrder(false);
+		this.nodes = this.nodes
+			.map((node) => ({ index: nodesInOrder.indexOf(node), node }))
+			.sort((a, b) => a.index - b.index || a.node.id - b.node.id)
+			.map(({ node }) => node);
+	}
+
+	getNodeData() {
+		const storeLinkTypes = (config) => {
+			// Store link types for dynamically typed nodes e.g. reroutes
+			for (const link of config.links) {
+				const origin = app.graph.getNodeById(link[4]);
+				const type = origin.outputs[link[1]].type;
+				link.push(type);
+			}
+		};
+
+		const storeExternalLinks = (config) => {
+			// Store any external links to the group in the config so when rebuilding we add extra slots
+			config.external = [];
+			for (let i = 0; i < this.nodes.length; i++) {
+				const node = this.nodes[i];
+				if (!node.outputs?.length) continue;
+				for (let slot = 0; slot < node.outputs.length; slot++) {
+					let hasExternal = false;
+					const output = node.outputs[slot];
+					let type = output.type;
+					if (!output.links?.length) continue;
+					for (const l of output.links) {
+						const link = app.graph.links[l];
+						if (!link) continue;
+						if (type === "*") type = link.type;
+
+						if (!app.canvas.selected_nodes[link.target_id]) {
+							hasExternal = true;
+							break;
+						}
+					}
+					if (hasExternal) {
+						config.external.push([i, slot, type]);
+					}
+				}
+			}
+		};
+
+		// Use the built in copyToClipboard function to generate the node data we need
+		const backup = localStorage.getItem("litegrapheditor_clipboard");
+		try {
+			app.canvas.copyToClipboard(this.nodes);
+			const config = JSON.parse(localStorage.getItem("litegrapheditor_clipboard"));
+
+			storeLinkTypes(config);
+			storeExternalLinks(config);
+
+			return config;
+		} finally {
+			localStorage.setItem("litegrapheditor_clipboard", backup);
+		}
+	}
+}
+
+export class GroupNodeConfig {
+	constructor(name, nodeData) {
+		this.name = name;
+		this.nodeData = nodeData;
+		this.getLinks();
+
+		this.inputCount = 0;
+		this.oldToNewOutputMap = {};
+		this.newToOldOutputMap = {};
+		this.oldToNewInputMap = {};
+		this.oldToNewWidgetMap = {};
+		this.newToOldWidgetMap = {};
+		this.primitiveDefs = {};
+		this.widgetToPrimitive = {};
+		this.primitiveToWidget = {};
+		this.nodeInputs = {};
+		this.outputVisibility = [];
+	}
+
+	async registerType(source = "workflow") {
+		this.nodeDef = {
+			output: [],
+			output_name: [],
+			output_is_list: [],
+			output_is_hidden: [],
+			name: source + "/" + this.name,
+			display_name: this.name,
+			category: "group nodes" + ("/" + source),
+			input: { required: {} },
+
+			[GROUP]: this,
+		};
+
+		this.inputs = [];
+		const seenInputs = {};
+		const seenOutputs = {};
+		for (let i = 0; i < this.nodeData.nodes.length; i++) {
+			const node = this.nodeData.nodes[i];
+			node.index = i;
+			this.processNode(node, seenInputs, seenOutputs);
+		}
+
+		for (const p of this.#convertedToProcess) {
+			p();
+		}
+		this.#convertedToProcess = null;
+		await app.registerNodeDef("workflow/" + this.name, this.nodeDef);
+	}
+
+	getLinks() {
+		this.linksFrom = {};
+		this.linksTo = {};
+		this.externalFrom = {};
+
+		// Extract links for easy lookup
+		for (const l of this.nodeData.links) {
+			const [sourceNodeId, sourceNodeSlot, targetNodeId, targetNodeSlot] = l;
+
+			// Skip links outside the copy config
+			if (sourceNodeId == null) continue;
+
+			if (!this.linksFrom[sourceNodeId]) {
+				this.linksFrom[sourceNodeId] = {};
+			}
+			if (!this.linksFrom[sourceNodeId][sourceNodeSlot]) {
+				this.linksFrom[sourceNodeId][sourceNodeSlot] = [];
+			}
+			this.linksFrom[sourceNodeId][sourceNodeSlot].push(l);
+
+			if (!this.linksTo[targetNodeId]) {
+				this.linksTo[targetNodeId] = {};
+			}
+			this.linksTo[targetNodeId][targetNodeSlot] = l;
+		}
+
+		if (this.nodeData.external) {
+			for (const ext of this.nodeData.external) {
+				if (!this.externalFrom[ext[0]]) {
+					this.externalFrom[ext[0]] = { [ext[1]]: ext[2] };
+				} else {
+					this.externalFrom[ext[0]][ext[1]] = ext[2];
+				}
+			}
+		}
+	}
+
+	processNode(node, seenInputs, seenOutputs) {
+		const def = this.getNodeDef(node);
+		if (!def) return;
+
+		const inputs = { ...def.input?.required, ...def.input?.optional };
+
+		this.inputs.push(this.processNodeInputs(node, seenInputs, inputs));
+		if (def.output?.length) this.processNodeOutputs(node, seenOutputs, def);
+	}
+
+	getNodeDef(node) {
+		const def = globalDefs[node.type];
+		if (def) return def;
+
+		const linksFrom = this.linksFrom[node.index];
+		if (node.type === "PrimitiveNode") {
+			// Skip as its not linked
+			if (!linksFrom) return;
+
+			let type = linksFrom["0"][0][5];
+			if (type === "COMBO") {
+				// Use the array items
+				const source = node.outputs[0].widget.name;
+				const fromTypeName = this.nodeData.nodes[linksFrom["0"][0][2]].type;
+				const fromType = globalDefs[fromTypeName];
+				const input = fromType.input.required[source] ?? fromType.input.optional[source];
+				type = input[0];
+			}
+
+			const def = (this.primitiveDefs[node.index] = {
+				input: {
+					required: {
+						value: [type, {}],
+					},
+				},
+				output: [type],
+				output_name: [],
+				output_is_list: [],
+			});
+			return def;
+		} else if (node.type === "Reroute") {
+			const linksTo = this.linksTo[node.index];
+			if (linksTo && linksFrom && !this.externalFrom[node.index]?.[0]) {
+				// Being used internally
+				return null;
+			}
+
+			let config = {};
+			let rerouteType = "*";
+			if (linksFrom) {
+				for (const [, , id, slot] of linksFrom["0"]) {
+					const node = this.nodeData.nodes[id];
+					const input = node.inputs[slot];
+					if (rerouteType === "*") {
+						rerouteType = input.type;
+					}
+					if (input.widget) {
+						const targetDef = globalDefs[node.type];
+						const targetWidget = targetDef.input.required[input.widget.name] ?? targetDef.input.optional[input.widget.name];
+
+						const widget = [targetWidget[0], config];
+						const res = mergeIfValid(
+							{
+								widget,
+							},
+							targetWidget,
+							false,
+							null,
+							widget
+						);
+						config = res?.customConfig ?? config;
+					}
+				}
+			} else if (linksTo) {
+				const [id, slot] = linksTo["0"];
+				rerouteType = this.nodeData.nodes[id].outputs[slot].type;
+			} else {
+				// Reroute used as a pipe
+				for (const l of this.nodeData.links) {
+					if (l[2] === node.index) {
+						rerouteType = l[5];
+						break;
+					}
+				}
+				if (rerouteType === "*") {
+					// Check for an external link
+					const t = this.externalFrom[node.index]?.[0];
+					if (t) {
+						rerouteType = t;
+					}
+				}
+			}
+
+			config.forceInput = true;
+			return {
+				input: {
+					required: {
+						[rerouteType]: [rerouteType, config],
+					},
+				},
+				output: [rerouteType],
+				output_name: [],
+				output_is_list: [],
+			};
+		}
+
+		console.warn("Skipping virtual node " + node.type + " when building group node " + this.name);
+	}
+
+	getInputConfig(node, inputName, seenInputs, config, extra) {
+		const customConfig = this.nodeData.config?.[node.index]?.input?.[inputName];
+		let name = customConfig?.name ?? node.inputs?.find((inp) => inp.name === inputName)?.label ?? inputName;
+		let key = name;
+		let prefix = "";
+		// Special handling for primitive to include the title if it is set rather than just "value"
+		if ((node.type === "PrimitiveNode" && node.title) || name in seenInputs) {
+			prefix = `${node.title ?? node.type} `;
+			key = name = `${prefix}${inputName}`;
+			if (name in seenInputs) {
+				name = `${prefix}${seenInputs[name]} ${inputName}`;
+			}
+		}
+		seenInputs[key] = (seenInputs[key] ?? 1) + 1;
+
+		if (inputName === "seed" || inputName === "noise_seed") {
+			if (!extra) extra = {};
+			extra.control_after_generate = `${prefix}control_after_generate`;
+		}
+		if (config[0] === "IMAGEUPLOAD") {
+			if (!extra) extra = {};
+			extra.widget = this.oldToNewWidgetMap[node.index]?.[config[1]?.widget ?? "image"] ?? "image";
+		}
+
+		if (extra) {
+			config = [config[0], { ...config[1], ...extra }];
+		}
+
+		return { name, config, customConfig };
+	}
+
+	processWidgetInputs(inputs, node, inputNames, seenInputs) {
+		const slots = [];
+		const converted = new Map();
+		const widgetMap = (this.oldToNewWidgetMap[node.index] = {});
+		for (const inputName of inputNames) {
+			let widgetType = app.getWidgetType(inputs[inputName], inputName);
+			if (widgetType) {
+				const convertedIndex = node.inputs?.findIndex((inp) => inp.name === inputName && inp.widget?.name === inputName);
+				if (convertedIndex > -1) {
+					// This widget has been converted to a widget
+					// We need to store this in the correct position so link ids line up
+					converted.set(convertedIndex, inputName);
+					widgetMap[inputName] = null;
+				} else {
+					// Normal widget
+					const { name, config } = this.getInputConfig(node, inputName, seenInputs, inputs[inputName]);
+					this.nodeDef.input.required[name] = config;
+					widgetMap[inputName] = name;
+					this.newToOldWidgetMap[name] = { node, inputName };
+				}
+			} else {
+				// Normal input
+				slots.push(inputName);
+			}
+		}
+		return { converted, slots };
+	}
+
+	checkPrimitiveConnection(link, inputName, inputs) {
+		const sourceNode = this.nodeData.nodes[link[0]];
+		if (sourceNode.type === "PrimitiveNode") {
+			// Merge link configurations
+			const [sourceNodeId, _, targetNodeId, __] = link;
+			const primitiveDef = this.primitiveDefs[sourceNodeId];
+			const targetWidget = inputs[inputName];
+			const primitiveConfig = primitiveDef.input.required.value;
+			const output = { widget: primitiveConfig };
+			const config = mergeIfValid(output, targetWidget, false, null, primitiveConfig);
+			primitiveConfig[1] = config?.customConfig ?? inputs[inputName][1] ? { ...inputs[inputName][1] } : {};
+
+			let name = this.oldToNewWidgetMap[sourceNodeId]["value"];
+			name = name.substr(0, name.length - 6);
+			primitiveConfig[1].control_after_generate = true;
+			primitiveConfig[1].control_prefix = name;
+
+			let toPrimitive = this.widgetToPrimitive[targetNodeId];
+			if (!toPrimitive) {
+				toPrimitive = this.widgetToPrimitive[targetNodeId] = {};
+			}
+			if (toPrimitive[inputName]) {
+				toPrimitive[inputName].push(sourceNodeId);
+			}
+			toPrimitive[inputName] = sourceNodeId;
+
+			let toWidget = this.primitiveToWidget[sourceNodeId];
+			if (!toWidget) {
+				toWidget = this.primitiveToWidget[sourceNodeId] = [];
+			}
+			toWidget.push({ nodeId: targetNodeId, inputName });
+		}
+	}
+
+	processInputSlots(inputs, node, slots, linksTo, inputMap, seenInputs) {
+		this.nodeInputs[node.index] = {};
+		for (let i = 0; i < slots.length; i++) {
+			const inputName = slots[i];
+			if (linksTo[i]) {
+				this.checkPrimitiveConnection(linksTo[i], inputName, inputs);
+				// This input is linked so we can skip it
+				continue;
+			}
+
+			const { name, config, customConfig } = this.getInputConfig(node, inputName, seenInputs, inputs[inputName]);
+
+			this.nodeInputs[node.index][inputName] = name;
+			if(customConfig?.visible === false) continue;
+			
+			this.nodeDef.input.required[name] = config;
+			inputMap[i] = this.inputCount++;
+		}
+	}
+
+	processConvertedWidgets(inputs, node, slots, converted, linksTo, inputMap, seenInputs) {
+		// Add converted widgets sorted into their index order (ordered as they were converted) so link ids match up
+		const convertedSlots = [...converted.keys()].sort().map((k) => converted.get(k));
+		for (let i = 0; i < convertedSlots.length; i++) {
+			const inputName = convertedSlots[i];
+			if (linksTo[slots.length + i]) {
+				this.checkPrimitiveConnection(linksTo[slots.length + i], inputName, inputs);
+				// This input is linked so we can skip it
+				continue;
+			}
+
+			const { name, config } = this.getInputConfig(node, inputName, seenInputs, inputs[inputName], {
+				defaultInput: true,
+			});
+
+			this.nodeDef.input.required[name] = config;
+			this.newToOldWidgetMap[name] = { node, inputName };
+
+			if (!this.oldToNewWidgetMap[node.index]) {
+				this.oldToNewWidgetMap[node.index] = {};
+			}
+			this.oldToNewWidgetMap[node.index][inputName] = name;
+
+			inputMap[slots.length + i] = this.inputCount++;
+		}
+	}
+
+	#convertedToProcess = [];
+	processNodeInputs(node, seenInputs, inputs) {
+		const inputMapping = [];
+
+		const inputNames = Object.keys(inputs);
+		if (!inputNames.length) return;
+
+		const { converted, slots } = this.processWidgetInputs(inputs, node, inputNames, seenInputs);
+		const linksTo = this.linksTo[node.index] ?? {};
+		const inputMap = (this.oldToNewInputMap[node.index] = {});
+		this.processInputSlots(inputs, node, slots, linksTo, inputMap, seenInputs);
+
+		// Converted inputs have to be processed after all other nodes as they'll be at the end of the list
+		this.#convertedToProcess.push(() => this.processConvertedWidgets(inputs, node, slots, converted, linksTo, inputMap, seenInputs));
+
+		return inputMapping;
+	}
+
+	processNodeOutputs(node, seenOutputs, def) {
+		const oldToNew = (this.oldToNewOutputMap[node.index] = {});
+
+		// Add outputs
+		for (let outputId = 0; outputId < def.output.length; outputId++) {
+			const linksFrom = this.linksFrom[node.index];
+			// If this output is linked internally we flag it to hide
+			const hasLink = linksFrom?.[outputId] && !this.externalFrom[node.index]?.[outputId];
+			const customConfig = this.nodeData.config?.[node.index]?.output?.[outputId];
+			const visible = customConfig?.visible ?? !hasLink;
+			this.outputVisibility.push(visible);
+			if (!visible) {
+				continue;
+			}
+
+			oldToNew[outputId] = this.nodeDef.output.length;
+			this.newToOldOutputMap[this.nodeDef.output.length] = { node, slot: outputId };
+			this.nodeDef.output.push(def.output[outputId]);
+			this.nodeDef.output_is_list.push(def.output_is_list[outputId]);
+
+			let label = customConfig?.name;
+			if (!label) {
+				label = def.output_name?.[outputId] ?? def.output[outputId];
+				const output = node.outputs.find((o) => o.name === label);
+				if (output?.label) {
+					label = output.label;
+				}
+			}
+
+			let name = label;
+			if (name in seenOutputs) {
+				const prefix = `${node.title ?? node.type} `;
+				name = `${prefix}${label}`;
+				if (name in seenOutputs) {
+					name = `${prefix}${node.index} ${label}`;
+				}
+			}
+			seenOutputs[name] = 1;
+
+			this.nodeDef.output_name.push(name);
+		}
+	}
+
+	static async registerFromWorkflow(groupNodes, missingNodeTypes) {
+		const clean = app.clean;
+		app.clean = function () {
+			for (const g in groupNodes) {
+				try {
+					LiteGraph.unregisterNodeType("workflow/" + g);
+				} catch (error) {}
+			}
+			app.clean = clean;
+		};
+
+		for (const g in groupNodes) {
+			const groupData = groupNodes[g];
+
+			let hasMissing = false;
+			for (const n of groupData.nodes) {
+				// Find missing node types
+				if (!(n.type in LiteGraph.registered_node_types)) {
+					missingNodeTypes.push({
+						type: n.type,
+						hint: ` (In group node 'workflow/${g}')`,
+					});
+
+					missingNodeTypes.push({
+						type: "workflow/" + g,
+						action: {
+							text: "Remove from workflow",
+							callback: (e) => {
+								delete groupNodes[g];
+								e.target.textContent = "Removed";
+								e.target.style.pointerEvents = "none";
+								e.target.style.opacity = 0.7;
+							},
+						},
+					});
+
+					hasMissing = true;
+				}
+			}
+
+			if (hasMissing) continue;
+
+			const config = new GroupNodeConfig(g, groupData);
+			await config.registerType();
+		}
+	}
+}
+
+export class GroupNodeHandler {
+	node;
+	groupData;
+
+	constructor(node) {
+		this.node = node;
+		this.groupData = node.constructor?.nodeData?.[GROUP];
+
+		this.node.setInnerNodes = (innerNodes) => {
+			this.innerNodes = innerNodes;
+
+			for (let innerNodeIndex = 0; innerNodeIndex < this.innerNodes.length; innerNodeIndex++) {
+				const innerNode = this.innerNodes[innerNodeIndex];
+
+				for (const w of innerNode.widgets ?? []) {
+					if (w.type === "converted-widget") {
+						w.serializeValue = w.origSerializeValue;
+					}
+				}
+
+				innerNode.index = innerNodeIndex;
+				innerNode.getInputNode = (slot) => {
+					// Check if this input is internal or external
+					const externalSlot = this.groupData.oldToNewInputMap[innerNode.index]?.[slot];
+					if (externalSlot != null) {
+						return this.node.getInputNode(externalSlot);
+					}
+
+					// Internal link
+					const innerLink = this.groupData.linksTo[innerNode.index]?.[slot];
+					if (!innerLink) return null;
+
+					const inputNode = innerNodes[innerLink[0]];
+					// Primitives will already apply their values
+					if (inputNode.type === "PrimitiveNode") return null;
+
+					return inputNode;
+				};
+
+				innerNode.getInputLink = (slot) => {
+					const externalSlot = this.groupData.oldToNewInputMap[innerNode.index]?.[slot];
+					if (externalSlot != null) {
+						// The inner node is connected via the group node inputs
+						const linkId = this.node.inputs[externalSlot].link;
+						let link = app.graph.links[linkId];
+
+						// Use the outer link, but update the target to the inner node
+						link = {
+							...link,
+							target_id: innerNode.id,
+							target_slot: +slot,
+						};
+						return link;
+					}
+
+					let link = this.groupData.linksTo[innerNode.index]?.[slot];
+					if (!link) return null;
+					// Use the inner link, but update the origin node to be inner node id
+					link = {
+						origin_id: innerNodes[link[0]].id,
+						origin_slot: link[1],
+						target_id: innerNode.id,
+						target_slot: +slot,
+					};
+					return link;
+				};
+			}
+		};
+
+		this.node.updateLink = (link) => {
+			// Replace the group node reference with the internal node
+			link = { ...link };
+			const output = this.groupData.newToOldOutputMap[link.origin_slot];
+			let innerNode = this.innerNodes[output.node.index];
+			let l;
+			while (innerNode?.type === "Reroute") {
+				l = innerNode.getInputLink(0);
+				innerNode = innerNode.getInputNode(0);
+			}
+
+			if (!innerNode) {
+				return null;
+			}
+
+			if (l && GroupNodeHandler.isGroupNode(innerNode)) {
+				return innerNode.updateLink(l);
+			}
+
+			link.origin_id = innerNode.id;
+			link.origin_slot = l?.origin_slot ?? output.slot;
+			return link;
+		};
+
+		this.node.getInnerNodes = () => {
+			if (!this.innerNodes) {
+				this.node.setInnerNodes(
+					this.groupData.nodeData.nodes.map((n, i) => {
+						const innerNode = LiteGraph.createNode(n.type);
+						innerNode.configure(n);
+						innerNode.id = `${this.node.id}:${i}`;
+						return innerNode;
+					})
+				);
+			}
+
+			this.updateInnerWidgets();
+
+			return this.innerNodes;
+		};
+
+		this.node.recreate = async () => {
+			const id = this.node.id;
+			const sz = this.node.size;
+			const nodes = this.node.convertToNodes();
+
+			const groupNode = LiteGraph.createNode(this.node.type);
+			groupNode.id = id;
+
+			// Reuse the existing nodes for this instance
+			groupNode.setInnerNodes(nodes);
+			groupNode[GROUP].populateWidgets();
+			app.graph.add(groupNode);
+			groupNode.size = [Math.max(groupNode.size[0], sz[0]), Math.max(groupNode.size[1], sz[1])];
+
+			// Remove all converted nodes and relink them
+			groupNode[GROUP].replaceNodes(nodes);
+			return groupNode;
+		};
+
+		this.node.convertToNodes = () => {
+			const addInnerNodes = () => {
+				const backup = localStorage.getItem("litegrapheditor_clipboard");
+				// Clone the node data so we dont mutate it for other nodes
+				const c = { ...this.groupData.nodeData };
+				c.nodes = [...c.nodes];
+				const innerNodes = this.node.getInnerNodes();
+				let ids = [];
+				for (let i = 0; i < c.nodes.length; i++) {
+					let id = innerNodes?.[i]?.id;
+					// Use existing IDs if they are set on the inner nodes
+					if (id == null || isNaN(id)) {
+						id = undefined;
+					} else {
+						ids.push(id);
+					}
+					c.nodes[i] = { ...c.nodes[i], id };
+				}
+				localStorage.setItem("litegrapheditor_clipboard", JSON.stringify(c));
+				app.canvas.pasteFromClipboard();
+				localStorage.setItem("litegrapheditor_clipboard", backup);
+
+				const [x, y] = this.node.pos;
+				let top;
+				let left;
+				// Configure nodes with current widget data
+				const selectedIds = ids.length ? ids : Object.keys(app.canvas.selected_nodes);
+				const newNodes = [];
+				for (let i = 0; i < selectedIds.length; i++) {
+					const id = selectedIds[i];
+					const newNode = app.graph.getNodeById(id);
+					const innerNode = innerNodes[i];
+					newNodes.push(newNode);
+
+					if (left == null || newNode.pos[0] < left) {
+						left = newNode.pos[0];
+					}
+					if (top == null || newNode.pos[1] < top) {
+						top = newNode.pos[1];
+					}
+
+					if (!newNode.widgets) continue;
+
+					const map = this.groupData.oldToNewWidgetMap[innerNode.index];
+					if (map) {
+						const widgets = Object.keys(map);
+
+						for (const oldName of widgets) {
+							const newName = map[oldName];
+							if (!newName) continue;
+
+							const widgetIndex = this.node.widgets.findIndex((w) => w.name === newName);
+							if (widgetIndex === -1) continue;
+
+							// Populate the main and any linked widgets
+							if (innerNode.type === "PrimitiveNode") {
+								for (let i = 0; i < newNode.widgets.length; i++) {
+									newNode.widgets[i].value = this.node.widgets[widgetIndex + i].value;
+								}
+							} else {
+								const outerWidget = this.node.widgets[widgetIndex];
+								const newWidget = newNode.widgets.find((w) => w.name === oldName);
+								if (!newWidget) continue;
+
+								newWidget.value = outerWidget.value;
+								for (let w = 0; w < outerWidget.linkedWidgets?.length; w++) {
+									newWidget.linkedWidgets[w].value = outerWidget.linkedWidgets[w].value;
+								}
+							}
+						}
+					}
+				}
+
+				// Shift each node
+				for (const newNode of newNodes) {
+					newNode.pos = [newNode.pos[0] - (left - x), newNode.pos[1] - (top - y)];
+				}
+
+				return { newNodes, selectedIds };
+			};
+
+			const reconnectInputs = (selectedIds) => {
+				for (const innerNodeIndex in this.groupData.oldToNewInputMap) {
+					const id = selectedIds[innerNodeIndex];
+					const newNode = app.graph.getNodeById(id);
+					const map = this.groupData.oldToNewInputMap[innerNodeIndex];
+					for (const innerInputId in map) {
+						const groupSlotId = map[innerInputId];
+						if (groupSlotId == null) continue;
+						const slot = node.inputs[groupSlotId];
+						if (slot.link == null) continue;
+						const link = app.graph.links[slot.link];
+						if (!link) continue;
+						//  connect this node output to the input of another node
+						const originNode = app.graph.getNodeById(link.origin_id);
+						originNode.connect(link.origin_slot, newNode, +innerInputId);
+					}
+				}
+			};
+
+			const reconnectOutputs = (selectedIds) => {
+				for (let groupOutputId = 0; groupOutputId < node.outputs?.length; groupOutputId++) {
+					const output = node.outputs[groupOutputId];
+					if (!output.links) continue;
+					const links = [...output.links];
+					for (const l of links) {
+						const slot = this.groupData.newToOldOutputMap[groupOutputId];
+						const link = app.graph.links[l];
+						const targetNode = app.graph.getNodeById(link.target_id);
+						const newNode = app.graph.getNodeById(selectedIds[slot.node.index]);
+						newNode.connect(slot.slot, targetNode, link.target_slot);
+					}
+				}
+			};
+
+			const { newNodes, selectedIds } = addInnerNodes();
+			reconnectInputs(selectedIds);
+			reconnectOutputs(selectedIds);
+			app.graph.remove(this.node);
+
+			return newNodes;
+		};
+
+		const getExtraMenuOptions = this.node.getExtraMenuOptions;
+		this.node.getExtraMenuOptions = function (_, options) {
+			getExtraMenuOptions?.apply(this, arguments);
+
+			let optionIndex = options.findIndex((o) => o.content === "Outputs");
+			if (optionIndex === -1) optionIndex = options.length;
+			else optionIndex++;
+			options.splice(
+				optionIndex,
+				0,
+				null,
+				{
+					content: "Convert to nodes",
+					callback: () => {
+						return this.convertToNodes();
+					},
+				},
+				{
+					content: "Manage Group Node",
+					callback: () => {
+						new ManageGroupDialog(app).show(this.type);
+					},
+				}
+			);
+		};
+
+		// Draw custom collapse icon to identity this as a group
+		const onDrawTitleBox = this.node.onDrawTitleBox;
+		this.node.onDrawTitleBox = function (ctx, height, size, scale) {
+			onDrawTitleBox?.apply(this, arguments);
+
+			const fill = ctx.fillStyle;
+			ctx.beginPath();
+			ctx.rect(11, -height + 11, 2, 2);
+			ctx.rect(14, -height + 11, 2, 2);
+			ctx.rect(17, -height + 11, 2, 2);
+			ctx.rect(11, -height + 14, 2, 2);
+			ctx.rect(14, -height + 14, 2, 2);
+			ctx.rect(17, -height + 14, 2, 2);
+			ctx.rect(11, -height + 17, 2, 2);
+			ctx.rect(14, -height + 17, 2, 2);
+			ctx.rect(17, -height + 17, 2, 2);
+
+			ctx.fillStyle = this.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
+			ctx.fill();
+			ctx.fillStyle = fill;
+		};
+
+		// Draw progress label
+		const onDrawForeground = node.onDrawForeground;
+		const groupData = this.groupData.nodeData;
+		node.onDrawForeground = function (ctx) {
+			const r = onDrawForeground?.apply?.(this, arguments);
+			if (+app.runningNodeId === this.id && this.runningInternalNodeId !== null) {
+				const n = groupData.nodes[this.runningInternalNodeId];
+				if(!n) return;
+				const message = `Running ${n.title || n.type} (${this.runningInternalNodeId}/${groupData.nodes.length})`;
+				ctx.save();
+				ctx.font = "12px sans-serif";
+				const sz = ctx.measureText(message);
+				ctx.fillStyle = node.boxcolor || LiteGraph.NODE_DEFAULT_BOXCOLOR;
+				ctx.beginPath();
+				ctx.roundRect(0, -LiteGraph.NODE_TITLE_HEIGHT - 20, sz.width + 12, 20, 5);
+				ctx.fill();
+
+				ctx.fillStyle = "#fff";
+				ctx.fillText(message, 6, -LiteGraph.NODE_TITLE_HEIGHT - 6);
+				ctx.restore();
+			}
+		};
+
+		// Flag this node as needing to be reset
+		const onExecutionStart = this.node.onExecutionStart;
+		this.node.onExecutionStart = function () {
+			this.resetExecution = true;
+			return onExecutionStart?.apply(this, arguments);
+		};
+
+		const self = this;
+		const onNodeCreated = this.node.onNodeCreated;
+		this.node.onNodeCreated = function () {
+			if (!this.widgets) {
+				return;
+			}
+			const config = self.groupData.nodeData.config;
+			if (config) {
+				for (const n in config) {
+					const inputs = config[n]?.input;
+					for (const w in inputs) {
+						if (inputs[w].visible !== false) continue;
+						const widgetName = self.groupData.oldToNewWidgetMap[n][w];
+						const widget = this.widgets.find((w) => w.name === widgetName);
+						if (widget) {
+							widget.type = "hidden";
+							widget.computeSize = () => [0, -4];
+						}
+					}
+				}
+			}
+
+			return onNodeCreated?.apply(this, arguments);
+		};
+
+		function handleEvent(type, getId, getEvent) {
+			const handler = ({ detail }) => {
+				const id = getId(detail);
+				if (!id) return;
+				const node = app.graph.getNodeById(id);
+				if (node) return;
+
+				const innerNodeIndex = this.innerNodes?.findIndex((n) => n.id == id);
+				if (innerNodeIndex > -1) {
+					this.node.runningInternalNodeId = innerNodeIndex;
+					api.dispatchEvent(new CustomEvent(type, { detail: getEvent(detail, this.node.id + "", this.node) }));
+				}
+			};
+			api.addEventListener(type, handler);
+			return handler;
+		}
+
+		const executing = handleEvent.call(
+			this,
+			"executing",
+			(d) => d,
+			(d, id, node) => id
+		);
+
+		const executed = handleEvent.call(
+			this,
+			"executed",
+			(d) => d?.node,
+			(d, id, node) => ({ ...d, node: id, merge: !node.resetExecution })
+		);
+
+		const onRemoved = node.onRemoved;
+		this.node.onRemoved = function () {
+			onRemoved?.apply(this, arguments);
+			api.removeEventListener("executing", executing);
+			api.removeEventListener("executed", executed);
+		};
+
+		this.node.refreshComboInNode = (defs) => {
+			// Update combo widget options
+			for (const widgetName in this.groupData.newToOldWidgetMap) {
+				const widget = this.node.widgets.find((w) => w.name === widgetName);
+				if (widget?.type === "combo") {
+					const old = this.groupData.newToOldWidgetMap[widgetName];
+					const def = defs[old.node.type];
+					const input = def?.input?.required?.[old.inputName] ?? def?.input?.optional?.[old.inputName];
+					if (!input) continue;
+
+					widget.options.values = input[0];
+
+					if (old.inputName !== "image" && !widget.options.values.includes(widget.value)) {
+						widget.value = widget.options.values[0];
+						widget.callback(widget.value);
+					}
+				}
+			}
+		};
+	}
+
+	updateInnerWidgets() {
+		for (const newWidgetName in this.groupData.newToOldWidgetMap) {
+			const newWidget = this.node.widgets.find((w) => w.name === newWidgetName);
+			if (!newWidget) continue;
+
+			const newValue = newWidget.value;
+			const old = this.groupData.newToOldWidgetMap[newWidgetName];
+			let innerNode = this.innerNodes[old.node.index];
+
+			if (innerNode.type === "PrimitiveNode") {
+				innerNode.primitiveValue = newValue;
+				const primitiveLinked = this.groupData.primitiveToWidget[old.node.index];
+				for (const linked of primitiveLinked ?? []) {
+					const node = this.innerNodes[linked.nodeId];
+					const widget = node.widgets.find((w) => w.name === linked.inputName);
+
+					if (widget) {
+						widget.value = newValue;
+					}
+				}
+				continue;
+			} else if (innerNode.type === "Reroute") {
+				const rerouteLinks = this.groupData.linksFrom[old.node.index];
+				if (rerouteLinks) {
+					for (const [_, , targetNodeId, targetSlot] of rerouteLinks["0"]) {
+						const node = this.innerNodes[targetNodeId];
+						const input = node.inputs[targetSlot];
+						if (input.widget) {
+							const widget = node.widgets?.find((w) => w.name === input.widget.name);
+							if (widget) {
+								widget.value = newValue;
+							}
+						}
+					}
+				}
+			}
+
+			const widget = innerNode.widgets?.find((w) => w.name === old.inputName);
+			if (widget) {
+				widget.value = newValue;
+			}
+		}
+	}
+
+	populatePrimitive(node, nodeId, oldName, i, linkedShift) {
+		// Converted widget, populate primitive if linked
+		const primitiveId = this.groupData.widgetToPrimitive[nodeId]?.[oldName];
+		if (primitiveId == null) return;
+		const targetWidgetName = this.groupData.oldToNewWidgetMap[primitiveId]["value"];
+		const targetWidgetIndex = this.node.widgets.findIndex((w) => w.name === targetWidgetName);
+		if (targetWidgetIndex > -1) {
+			const primitiveNode = this.innerNodes[primitiveId];
+			let len = primitiveNode.widgets.length;
+			if (len - 1 !== this.node.widgets[targetWidgetIndex].linkedWidgets?.length) {
+				// Fallback handling for if some reason the primitive has a different number of widgets
+				// we dont want to overwrite random widgets, better to leave blank
+				len = 1;
+			}
+			for (let i = 0; i < len; i++) {
+				this.node.widgets[targetWidgetIndex + i].value = primitiveNode.widgets[i].value;
+			}
+		}
+		return true;
+	}
+
+	populateReroute(node, nodeId, map) {
+		if (node.type !== "Reroute") return;
+
+		const link = this.groupData.linksFrom[nodeId]?.[0]?.[0];
+		if (!link) return;
+		const [, , targetNodeId, targetNodeSlot] = link;
+		const targetNode = this.groupData.nodeData.nodes[targetNodeId];
+		const inputs = targetNode.inputs;
+		const targetWidget = inputs?.[targetNodeSlot]?.widget;
+		if (!targetWidget) return;
+
+		const offset = inputs.length - (targetNode.widgets_values?.length ?? 0);
+		const v = targetNode.widgets_values?.[targetNodeSlot - offset];
+		if (v == null) return;
+
+		const widgetName = Object.values(map)[0];
+		const widget = this.node.widgets.find((w) => w.name === widgetName);
+		if (widget) {
+			widget.value = v;
+		}
+	}
+
+	populateWidgets() {
+		if (!this.node.widgets) return;
+
+		for (let nodeId = 0; nodeId < this.groupData.nodeData.nodes.length; nodeId++) {
+			const node = this.groupData.nodeData.nodes[nodeId];
+			const map = this.groupData.oldToNewWidgetMap[nodeId] ?? {};
+			const widgets = Object.keys(map);
+
+			if (!node.widgets_values?.length) {
+				// special handling for populating values into reroutes
+				// this allows primitives connect to them to pick up the correct value
+				this.populateReroute(node, nodeId, map);
+				continue;
+			}
+
+			let linkedShift = 0;
+			for (let i = 0; i < widgets.length; i++) {
+				const oldName = widgets[i];
+				const newName = map[oldName];
+				const widgetIndex = this.node.widgets.findIndex((w) => w.name === newName);
+				const mainWidget = this.node.widgets[widgetIndex];
+				if (this.populatePrimitive(node, nodeId, oldName, i, linkedShift) || widgetIndex === -1) {
+					// Find the inner widget and shift by the number of linked widgets as they will have been removed too
+					const innerWidget = this.innerNodes[nodeId].widgets?.find((w) => w.name === oldName);
+					linkedShift += innerWidget?.linkedWidgets?.length ?? 0;
+				}
+				if (widgetIndex === -1) {
+					continue;
+				}
+
+				// Populate the main and any linked widget
+				mainWidget.value = node.widgets_values[i + linkedShift];
+				for (let w = 0; w < mainWidget.linkedWidgets?.length; w++) {
+					this.node.widgets[widgetIndex + w + 1].value = node.widgets_values[i + ++linkedShift];
+				}
+			}
+		}
+	}
+
+	replaceNodes(nodes) {
+		let top;
+		let left;
+
+		for (let i = 0; i < nodes.length; i++) {
+			const node = nodes[i];
+			if (left == null || node.pos[0] < left) {
+				left = node.pos[0];
+			}
+			if (top == null || node.pos[1] < top) {
+				top = node.pos[1];
+			}
+
+			this.linkOutputs(node, i);
+			app.graph.remove(node);
+		}
+
+		this.linkInputs();
+		this.node.pos = [left, top];
+	}
+
+	linkOutputs(originalNode, nodeId) {
+		if (!originalNode.outputs) return;
+
+		for (const output of originalNode.outputs) {
+			if (!output.links) continue;
+			// Clone the links as they'll be changed if we reconnect
+			const links = [...output.links];
+			for (const l of links) {
+				const link = app.graph.links[l];
+				if (!link) continue;
+
+				const targetNode = app.graph.getNodeById(link.target_id);
+				const newSlot = this.groupData.oldToNewOutputMap[nodeId]?.[link.origin_slot];
+				if (newSlot != null) {
+					this.node.connect(newSlot, targetNode, link.target_slot);
+				}
+			}
+		}
+	}
+
+	linkInputs() {
+		for (const link of this.groupData.nodeData.links ?? []) {
+			const [, originSlot, targetId, targetSlot, actualOriginId] = link;
+			const originNode = app.graph.getNodeById(actualOriginId);
+			if (!originNode) continue; // this node is in the group
+			originNode.connect(originSlot, this.node.id, this.groupData.oldToNewInputMap[targetId][targetSlot]);
+		}
+	}
+
+	static getGroupData(node) {
+		return (node.nodeData ?? node.constructor?.nodeData)?.[GROUP];
+	}
+
+	static isGroupNode(node) {
+		return !!node.constructor?.nodeData?.[GROUP];
+	}
+
+	static async fromNodes(nodes) {
+		// Process the nodes into the stored workflow group node data
+		const builder = new GroupNodeBuilder(nodes);
+		const res = builder.build();
+		if (!res) return;
+
+		const { name, nodeData } = res;
+
+		// Convert this data into a LG node definition and register it
+		const config = new GroupNodeConfig(name, nodeData);
+		await config.registerType();
+
+		const groupNode = LiteGraph.createNode(`workflow/${name}`);
+		// Reuse the existing nodes for this instance
+		groupNode.setInnerNodes(builder.nodes);
+		groupNode[GROUP].populateWidgets();
+		app.graph.add(groupNode);
+
+		// Remove all converted nodes and relink them
+		groupNode[GROUP].replaceNodes(builder.nodes);
+		return groupNode;
+	}
+}
+
+function addConvertToGroupOptions() {
+	function addConvertOption(options, index) {
+		const selected = Object.values(app.canvas.selected_nodes ?? {});
+		const disabled = selected.length < 2 || selected.find((n) => GroupNodeHandler.isGroupNode(n));
+		options.splice(index + 1, null, {
+			content: `Convert to Group Node`,
+			disabled,
+			callback: async () => {
+				return await GroupNodeHandler.fromNodes(selected);
+			},
+		});
+	}
+
+	function addManageOption(options, index) {
+		const groups = app.graph.extra?.groupNodes;
+		const disabled = !groups || !Object.keys(groups).length;
+		options.splice(index + 1, null, {
+			content: `Manage Group Nodes`,
+			disabled,
+			callback: () => {
+				new ManageGroupDialog(app).show();
+			},
+		});
+	}
+
+	// Add to canvas
+	const getCanvasMenuOptions = LGraphCanvas.prototype.getCanvasMenuOptions;
+	LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+		const options = getCanvasMenuOptions.apply(this, arguments);
+		const index = options.findIndex((o) => o?.content === "Add Group") + 1 || options.length;
+		addConvertOption(options, index);
+		addManageOption(options, index + 1);
+		return options;
+	};
+
+	// Add to nodes
+	const getNodeMenuOptions = LGraphCanvas.prototype.getNodeMenuOptions;
+	LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
+		const options = getNodeMenuOptions.apply(this, arguments);
+		if (!GroupNodeHandler.isGroupNode(node)) {
+			const index = options.findIndex((o) => o?.content === "Outputs") + 1 || options.length - 1;
+			addConvertOption(options, index);
+		}
+		return options;
+	};
+}
+
+const id = "Comfy.GroupNode";
+let globalDefs;
+const ext = {
+	name: id,
+	setup() {
+		addConvertToGroupOptions();
+	},
+	async beforeConfigureGraph(graphData, missingNodeTypes) {
+		const nodes = graphData?.extra?.groupNodes;
+		if (nodes) {
+			await GroupNodeConfig.registerFromWorkflow(nodes, missingNodeTypes);
+		}
+	},
+	addCustomNodeDefs(defs) {
+		// Store this so we can mutate it later with group nodes
+		globalDefs = defs;
+	},
+	nodeCreated(node) {
+		if (GroupNodeHandler.isGroupNode(node)) {
+			node[GROUP] = new GroupNodeHandler(node);
+		}
+	},
+	async refreshComboInNodes(defs) {
+		// Re-register group nodes so new ones are created with the correct options
+		Object.assign(globalDefs, defs);
+		const nodes = app.graph.extra?.groupNodes;
+		if (nodes) {
+			await GroupNodeConfig.registerFromWorkflow(nodes, {});
+		}
+	}
+};
+
+app.registerExtension(ext);

ComfyUI/web/extensions/core/groupNodeManage.css

@@ -0,0 +1,149 @@
+.comfy-group-manage {
+	background: var(--bg-color);
+	color: var(--fg-color);
+	padding: 0;
+	font-family: Arial, Helvetica, sans-serif;
+	border-color: black;
+	margin: 20vh auto;
+	max-height: 60vh;
+}
+.comfy-group-manage-outer {
+	max-height: 60vh;
+	min-width: 500px;
+	display: flex;
+	flex-direction: column;
+}
+.comfy-group-manage-outer > header {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	justify-content: space-between;
+	background: var(--comfy-menu-bg);
+	padding: 15px 20px;
+}
+.comfy-group-manage-outer > header select {
+	background: var(--comfy-input-bg);
+	border: 1px solid var(--border-color);
+	color: var(--input-text);
+	padding: 5px 10px;
+	border-radius: 5px;
+}
+.comfy-group-manage h2 {
+	margin: 0;
+	font-weight: normal;
+}
+.comfy-group-manage main {
+	display: flex;
+	overflow: hidden;
+}
+.comfy-group-manage .drag-handle {
+	font-weight: bold;
+}
+.comfy-group-manage-list {
+	border-right: 1px solid var(--comfy-menu-bg);
+}
+.comfy-group-manage-list ul {
+	margin: 40px 0 0;
+	padding: 0;
+	list-style: none;
+}
+.comfy-group-manage-list-items {
+	max-height: calc(100% - 40px);
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+.comfy-group-manage-list li {
+	display: flex;
+	padding: 10px 20px 10px 10px;
+	cursor: pointer;
+	align-items: center;
+	gap: 5px;
+}
+.comfy-group-manage-list div {
+	display: flex;
+	flex-direction: column;
+}
+.comfy-group-manage-list li:not(.selected):hover div {
+	text-decoration: underline;
+}
+.comfy-group-manage-list li.selected {
+	background: var(--border-color);
+}
+.comfy-group-manage-list li span {
+	opacity: 0.7;
+	font-size: smaller;
+}
+.comfy-group-manage-node {
+	flex: auto;
+	background: var(--border-color);
+	display: flex;
+	flex-direction: column;
+}
+.comfy-group-manage-node > div {
+	overflow: auto;
+}
+.comfy-group-manage-node header {
+	display: flex;
+	background: var(--bg-color);
+	height: 40px;
+}
+.comfy-group-manage-node header a {
+	text-align: center;
+	flex: auto;
+	border-right: 1px solid var(--comfy-menu-bg);
+	border-bottom: 1px solid var(--comfy-menu-bg);
+	padding: 10px;
+	cursor: pointer;
+	font-size: 15px;
+}
+.comfy-group-manage-node header a:last-child {
+    border-right: none;
+}
+.comfy-group-manage-node header a:not(.active):hover {
+	text-decoration: underline;
+}
+.comfy-group-manage-node header a.active {
+	background: var(--border-color);
+	border-bottom: none;
+}
+.comfy-group-manage-node-page {
+	display: none;
+	overflow: auto;
+}
+.comfy-group-manage-node-page.active {
+	display: block;
+}
+.comfy-group-manage-node-page div {
+	padding: 10px;
+	display: flex;
+	align-items: center;
+	gap: 10px;
+}
+.comfy-group-manage-node-page input {
+	border: none;
+	color: var(--input-text);
+	background: var(--comfy-input-bg);
+	padding: 5px 10px;
+}
+.comfy-group-manage-node-page input[type="text"] {
+	flex: auto;
+}
+.comfy-group-manage-node-page label {
+	display: flex;
+	gap: 5px;
+	align-items: center;
+}
+.comfy-group-manage footer {
+	border-top: 1px solid var(--comfy-menu-bg);
+	padding: 10px;
+	display: flex;
+	gap: 10px;
+}
+.comfy-group-manage footer button {
+	font-size: 14px;
+	padding: 5px 10px;
+	border-radius: 0;
+}
+.comfy-group-manage footer button:first-child {
+	margin-right: auto;
+}

ComfyUI/web/extensions/core/groupNodeManage.js

@@ -0,0 +1,422 @@
+import { $el, ComfyDialog } from "../../scripts/ui.js";
+import { DraggableList } from "../../scripts/ui/draggableList.js";
+import { addStylesheet } from "../../scripts/utils.js";
+import { GroupNodeConfig, GroupNodeHandler } from "./groupNode.js";
+
+addStylesheet(import.meta.url);
+
+const ORDER = Symbol();
+
+function merge(target, source) {
+	if (typeof target === "object" && typeof source === "object") {
+		for (const key in source) {
+			const sv = source[key];
+			if (typeof sv === "object") {
+				let tv = target[key];
+				if (!tv) tv = target[key] = {};
+				merge(tv, source[key]);
+			} else {
+				target[key] = sv;
+			}
+		}
+	}
+
+	return target;
+}
+
+export class ManageGroupDialog extends ComfyDialog {
+	/** @type { Record<"Inputs" | "Outputs" | "Widgets", {tab: HTMLAnchorElement, page: HTMLElement}> } */
+	tabs = {};
+	/** @type { number | null | undefined } */
+	selectedNodeIndex;
+	/** @type { keyof ManageGroupDialog["tabs"] } */
+	selectedTab = "Inputs";
+	/** @type { string | undefined } */
+	selectedGroup;
+
+	/** @type { Record<string, Record<string, Record<string, { name?: string | undefined, visible?: boolean | undefined }>>> } */
+	modifications = {};
+
+	get selectedNodeInnerIndex() {
+		return +this.nodeItems[this.selectedNodeIndex].dataset.nodeindex;
+	}
+
+	constructor(app) {
+		super();
+		this.app = app;
+		this.element = $el("dialog.comfy-group-manage", {
+			parent: document.body,
+		});
+	}
+
+	changeTab(tab) {
+		this.tabs[this.selectedTab].tab.classList.remove("active");
+		this.tabs[this.selectedTab].page.classList.remove("active");
+		this.tabs[tab].tab.classList.add("active");
+		this.tabs[tab].page.classList.add("active");
+		this.selectedTab = tab;
+	}
+
+	changeNode(index, force) {
+		if (!force && this.selectedNodeIndex === index) return;
+
+		if (this.selectedNodeIndex != null) {
+			this.nodeItems[this.selectedNodeIndex].classList.remove("selected");
+		}
+		this.nodeItems[index].classList.add("selected");
+		this.selectedNodeIndex = index;
+
+		if (!this.buildInputsPage() && this.selectedTab === "Inputs") {
+			this.changeTab("Widgets");
+		}
+		if (!this.buildWidgetsPage() && this.selectedTab === "Widgets") {
+			this.changeTab("Outputs");
+		}
+		if (!this.buildOutputsPage() && this.selectedTab === "Outputs") {
+			this.changeTab("Inputs");
+		}
+
+		this.changeTab(this.selectedTab);
+	}
+
+	getGroupData() {
+		this.groupNodeType = LiteGraph.registered_node_types["workflow/" + this.selectedGroup];
+		this.groupNodeDef = this.groupNodeType.nodeData;
+		this.groupData = GroupNodeHandler.getGroupData(this.groupNodeType);
+	}
+
+	changeGroup(group, reset = true) {
+		this.selectedGroup = group;
+		this.getGroupData();
+
+		const nodes = this.groupData.nodeData.nodes;
+		this.nodeItems = nodes.map((n, i) =>
+			$el(
+				"li.draggable-item",
+				{
+					dataset: {
+						nodeindex: n.index + "",
+					},
+					onclick: () => {
+						this.changeNode(i);
+					},
+				},
+				[
+					$el("span.drag-handle"),
+					$el(
+						"div",
+						{
+							textContent: n.title ?? n.type,
+						},
+						n.title
+							? $el("span", {
+									textContent: n.type,
+							  })
+							: []
+					),
+				]
+			)
+		);
+
+		this.innerNodesList.replaceChildren(...this.nodeItems);
+
+		if (reset) {
+			this.selectedNodeIndex = null;
+			this.changeNode(0);
+		} else {
+			const items = this.draggable.getAllItems();
+			let index = items.findIndex(item => item.classList.contains("selected"));
+			if(index === -1) index = this.selectedNodeIndex;
+			this.changeNode(index, true);
+		}
+
+		const ordered = [...nodes];
+		this.draggable?.dispose();
+		this.draggable = new DraggableList(this.innerNodesList, "li");
+		this.draggable.addEventListener("dragend", ({ detail: { oldPosition, newPosition } }) => {
+			if (oldPosition === newPosition) return;
+			ordered.splice(newPosition, 0, ordered.splice(oldPosition, 1)[0]);
+			for (let i = 0; i < ordered.length; i++) {
+				this.storeModification({ nodeIndex: ordered[i].index, section: ORDER, prop: "order", value: i });
+			}
+		});
+	}
+
+	storeModification({ nodeIndex, section, prop, value }) {
+		const groupMod = (this.modifications[this.selectedGroup] ??= {});
+		const nodesMod = (groupMod.nodes ??= {});
+		const nodeMod = (nodesMod[nodeIndex ?? this.selectedNodeInnerIndex] ??= {});
+		const typeMod = (nodeMod[section] ??= {});
+		if (typeof value === "object") {
+			const objMod = (typeMod[prop] ??= {});
+			Object.assign(objMod, value);
+		} else {
+			typeMod[prop] = value;
+		}
+	}
+
+	getEditElement(section, prop, value, placeholder, checked, checkable = true) {
+		if (value === placeholder) value = "";
+
+		const mods = this.modifications[this.selectedGroup]?.nodes?.[this.selectedNodeInnerIndex]?.[section]?.[prop];
+		if (mods) {
+			if (mods.name != null) {
+				value = mods.name;
+			}
+			if (mods.visible != null) {
+				checked = mods.visible;
+			}
+		}
+
+		return $el("div", [
+			$el("input", {
+				value,
+				placeholder,
+				type: "text",
+				onchange: (e) => {
+					this.storeModification({ section, prop, value: { name: e.target.value } });
+				},
+			}),
+			$el("label", { textContent: "Visible" }, [
+				$el("input", {
+					type: "checkbox",
+					checked,
+					disabled: !checkable,
+					onchange: (e) => {
+						this.storeModification({ section, prop, value: { visible: !!e.target.checked } });
+					},
+				}),
+			]),
+		]);
+	}
+
+	buildWidgetsPage() {
+		const widgets = this.groupData.oldToNewWidgetMap[this.selectedNodeInnerIndex];
+		const items = Object.keys(widgets ?? {});
+		const type = app.graph.extra.groupNodes[this.selectedGroup];
+		const config = type.config?.[this.selectedNodeInnerIndex]?.input;
+		this.widgetsPage.replaceChildren(
+			...items.map((oldName) => {
+				return this.getEditElement("input", oldName, widgets[oldName], oldName, config?.[oldName]?.visible !== false);
+			})
+		);
+		return !!items.length;
+	}
+
+	buildInputsPage() {
+		const inputs = this.groupData.nodeInputs[this.selectedNodeInnerIndex];
+		const items = Object.keys(inputs ?? {});
+		const type = app.graph.extra.groupNodes[this.selectedGroup];
+		const config = type.config?.[this.selectedNodeInnerIndex]?.input;
+		this.inputsPage.replaceChildren(
+			...items
+				.map((oldName) => {
+					let value = inputs[oldName];
+					if (!value) {
+						return;
+					}
+
+					return this.getEditElement("input", oldName, value, oldName, config?.[oldName]?.visible !== false);
+				})
+				.filter(Boolean)
+		);
+		return !!items.length;
+	}
+
+	buildOutputsPage() {
+		const nodes = this.groupData.nodeData.nodes;
+		const innerNodeDef = this.groupData.getNodeDef(nodes[this.selectedNodeInnerIndex]);
+		const outputs = innerNodeDef?.output ?? [];
+		const groupOutputs = this.groupData.oldToNewOutputMap[this.selectedNodeInnerIndex];
+
+		const type = app.graph.extra.groupNodes[this.selectedGroup];
+		const config = type.config?.[this.selectedNodeInnerIndex]?.output;
+		const node = this.groupData.nodeData.nodes[this.selectedNodeInnerIndex];
+		const checkable = node.type !== "PrimitiveNode";
+		this.outputsPage.replaceChildren(
+			...outputs
+				.map((type, slot) => {
+					const groupOutputIndex = groupOutputs?.[slot];
+					const oldName = innerNodeDef.output_name?.[slot] ?? type;
+					let value = config?.[slot]?.name;
+					const visible = config?.[slot]?.visible || groupOutputIndex != null;
+					if (!value || value === oldName) {
+						value = "";
+					}
+					return this.getEditElement("output", slot, value, oldName, visible, checkable);
+				})
+				.filter(Boolean)
+		);
+		return !!outputs.length;
+	}
+
+	show(type) {
+		const groupNodes = Object.keys(app.graph.extra?.groupNodes ?? {}).sort((a, b) => a.localeCompare(b));
+
+		this.innerNodesList = $el("ul.comfy-group-manage-list-items");
+		this.widgetsPage = $el("section.comfy-group-manage-node-page");
+		this.inputsPage = $el("section.comfy-group-manage-node-page");
+		this.outputsPage = $el("section.comfy-group-manage-node-page");
+		const pages = $el("div", [this.widgetsPage, this.inputsPage, this.outputsPage]);
+
+		this.tabs = [
+			["Inputs", this.inputsPage],
+			["Widgets", this.widgetsPage],
+			["Outputs", this.outputsPage],
+		].reduce((p, [name, page]) => {
+			p[name] = {
+				tab: $el("a", {
+					onclick: () => {
+						this.changeTab(name);
+					},
+					textContent: name,
+				}),
+				page,
+			};
+			return p;
+		}, {});
+
+		const outer = $el("div.comfy-group-manage-outer", [
+			$el("header", [
+				$el("h2", "Group Nodes"),
+				$el(
+					"select",
+					{
+						onchange: (e) => {
+							this.changeGroup(e.target.value);
+						},
+					},
+					groupNodes.map((g) =>
+						$el("option", {
+							textContent: g,
+							selected: "workflow/" + g === type,
+							value: g,
+						})
+					)
+				),
+			]),
+			$el("main", [
+				$el("section.comfy-group-manage-list", this.innerNodesList),
+				$el("section.comfy-group-manage-node", [
+					$el(
+						"header",
+						Object.values(this.tabs).map((t) => t.tab)
+					),
+					pages,
+				]),
+			]),
+			$el("footer", [
+				$el(
+					"button.comfy-btn",
+					{
+						onclick: (e) => {
+							const node = app.graph._nodes.find((n) => n.type === "workflow/" + this.selectedGroup);
+							if (node) {
+								alert("This group node is in use in the current workflow, please first remove these.");
+								return;
+							}
+							if (confirm(`Are you sure you want to remove the node: "${this.selectedGroup}"`)) {
+								delete app.graph.extra.groupNodes[this.selectedGroup];
+								LiteGraph.unregisterNodeType("workflow/" + this.selectedGroup);
+							}
+							this.show();
+						},
+					},
+					"Delete Group Node"
+				),
+				$el(
+					"button.comfy-btn",
+					{
+						onclick: async () => {
+							let nodesByType;
+							let recreateNodes = [];
+							const types = {};
+							for (const g in this.modifications) {
+								const type = app.graph.extra.groupNodes[g];
+								let config = (type.config ??= {});
+
+								let nodeMods = this.modifications[g]?.nodes;
+								if (nodeMods) {
+									const keys = Object.keys(nodeMods);
+									if (nodeMods[keys[0]][ORDER]) {
+										// If any node is reordered, they will all need sequencing
+										const orderedNodes = [];
+										const orderedMods = {};
+										const orderedConfig = {};
+
+										for (const n of keys) {
+											const order = nodeMods[n][ORDER].order;
+											orderedNodes[order] = type.nodes[+n];
+											orderedMods[order] = nodeMods[n];
+											orderedNodes[order].index = order;
+										}
+
+										// Rewrite links
+										for (const l of type.links) {
+											if (l[0] != null) l[0] = type.nodes[l[0]].index;
+											if (l[2] != null) l[2] = type.nodes[l[2]].index;
+										}
+
+										// Rewrite externals
+										if (type.external) {
+											for (const ext of type.external) {
+												ext[0] = type.nodes[ext[0]];
+											}
+										}
+
+										// Rewrite modifications
+										for (const id of keys) {
+											if (config[id]) {
+												orderedConfig[type.nodes[id].index] = config[id];
+											}
+											delete config[id];
+										}
+
+										type.nodes = orderedNodes;
+										nodeMods = orderedMods;
+										type.config = config = orderedConfig;
+									}
+
+									merge(config, nodeMods);
+								}
+
+								types[g] = type;
+
+								if (!nodesByType) {
+									nodesByType = app.graph._nodes.reduce((p, n) => {
+										p[n.type] ??= [];
+										p[n.type].push(n);
+										return p;
+									}, {});
+								}
+
+								const nodes = nodesByType["workflow/" + g];
+								if (nodes) recreateNodes.push(...nodes);
+							}
+
+							await GroupNodeConfig.registerFromWorkflow(types, {});
+
+							for (const node of recreateNodes) {
+								node.recreate();
+							}
+
+							this.modifications = {};
+							this.app.graph.setDirtyCanvas(true, true);
+							this.changeGroup(this.selectedGroup, false);
+						},
+					},
+					"Save"
+				),
+				$el("button.comfy-btn", { onclick: () => this.element.close() }, "Close"),
+			]),
+		]);
+
+		this.element.replaceChildren(outer);
+		this.changeGroup(type ? groupNodes.find((g) => "workflow/" + g === type) : groupNodes[0]);
+		this.element.showModal();
+
+		this.element.addEventListener("close", () => {
+			this.draggable?.dispose();
+		});
+	}
+}

ComfyUI/web/extensions/core/groupOptions.js

@@ -0,0 +1,259 @@
+import {app} from "../../scripts/app.js";
+
+function setNodeMode(node, mode) {
+    node.mode = mode;
+    node.graph.change();
+}
+
+function addNodesToGroup(group, nodes=[]) {
+    var x1, y1, x2, y2;
+    var nx1, ny1, nx2, ny2;
+    var node;
+
+    x1 = y1 = x2 = y2 = -1;
+    nx1 = ny1 = nx2 = ny2 = -1;
+
+    for (var n of [group._nodes, nodes]) {
+        for (var i in n) {
+            node = n[i]
+
+            nx1 = node.pos[0]
+            ny1 = node.pos[1]
+            nx2 = node.pos[0] + node.size[0]
+            ny2 = node.pos[1] + node.size[1]
+
+            if (node.type != "Reroute") {
+                ny1 -= LiteGraph.NODE_TITLE_HEIGHT;
+            }
+
+            if (node.flags?.collapsed) {
+                ny2 = ny1 + LiteGraph.NODE_TITLE_HEIGHT;
+
+                if (node?._collapsed_width) {
+                    nx2 = nx1 + Math.round(node._collapsed_width);
+                }
+            }
+
+            if (x1 == -1 || nx1 < x1) {
+                x1 = nx1;
+            }
+
+            if (y1 == -1 || ny1 < y1) {
+                y1 = ny1;
+            }
+
+            if (x2 == -1 || nx2 > x2) {
+                x2 = nx2;
+            }
+
+            if (y2 == -1 || ny2 > y2) {
+                y2 = ny2;
+            }
+        }
+    }
+
+    var padding = 10;
+
+    y1 = y1 - Math.round(group.font_size * 1.4);
+
+    group.pos = [x1 - padding, y1 - padding];
+    group.size = [x2 - x1 + padding * 2, y2 - y1 + padding * 2];
+}
+
+app.registerExtension({
+    name: "Comfy.GroupOptions",
+    setup() {
+        const orig = LGraphCanvas.prototype.getCanvasMenuOptions;
+        // graph_mouse
+        LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+            const options = orig.apply(this, arguments);
+            const group = this.graph.getGroupOnPos(this.graph_mouse[0], this.graph_mouse[1]);
+            if (!group) {
+                options.push({
+                    content: "Add Group For Selected Nodes",
+                    disabled: !Object.keys(app.canvas.selected_nodes || {}).length,
+                    callback: () => {
+                        var group = new LiteGraph.LGraphGroup();
+                        addNodesToGroup(group, this.selected_nodes)
+                        app.canvas.graph.add(group);
+                        this.graph.change();
+                    }
+                });
+
+                return options;
+            }
+
+            // Group nodes aren't recomputed until the group is moved, this ensures the nodes are up-to-date
+            group.recomputeInsideNodes();
+            const nodesInGroup = group._nodes;
+
+            options.push({
+                content: "Add Selected Nodes To Group",
+                disabled: !Object.keys(app.canvas.selected_nodes || {}).length,
+                callback: () => {
+                    addNodesToGroup(group, this.selected_nodes)
+                    this.graph.change();
+                }
+            });
+
+            // No nodes in group, return default options
+            if (nodesInGroup.length === 0) {
+                return options;
+            } else {
+                // Add a separator between the default options and the group options
+                options.push(null);
+            }
+
+            // Check if all nodes are the same mode
+            let allNodesAreSameMode = true;
+            for (let i = 1; i < nodesInGroup.length; i++) {
+                if (nodesInGroup[i].mode !== nodesInGroup[0].mode) {
+                    allNodesAreSameMode = false;
+                    break;
+                }
+            }
+
+            options.push({
+                content: "Fit Group To Nodes",
+                callback: () => {
+                    addNodesToGroup(group)
+                    this.graph.change();
+                }
+            });
+
+            options.push({
+                content: "Select Nodes",
+                callback: () => {
+                    this.selectNodes(nodesInGroup);
+                    this.graph.change();
+                    this.canvas.focus();
+                }
+            });
+
+            // Modes
+            // 0: Always
+            // 1: On Event
+            // 2: Never
+            // 3: On Trigger
+            // 4: Bypass
+            // If all nodes are the same mode, add a menu option to change the mode
+            if (allNodesAreSameMode) {
+                const mode = nodesInGroup[0].mode;
+                switch (mode) {
+                    case 0:
+                        // All nodes are always, option to disable, and bypass
+                        options.push({
+                            content: "Set Group Nodes to Never",
+                            callback: () => {
+                                for (const node of nodesInGroup) {
+                                    setNodeMode(node, 2);
+                                }
+                            }
+                        });
+                        options.push({
+                            content: "Bypass Group Nodes",
+                            callback: () => {
+                                for (const node of nodesInGroup) {
+                                    setNodeMode(node, 4);
+                                }
+                            }
+                        });
+                        break;
+                    case 2:
+                        // All nodes are never, option to enable, and bypass
+                        options.push({
+                            content: "Set Group Nodes to Always",
+                            callback: () => {
+                                for (const node of nodesInGroup) {
+                                    setNodeMode(node, 0);
+                                }
+                            }
+                        });
+                        options.push({
+                            content: "Bypass Group Nodes",
+                            callback: () => {
+                                for (const node of nodesInGroup) {
+                                    setNodeMode(node, 4);
+                                }
+                            }
+                        });
+                        break;
+                    case 4:
+                        // All nodes are bypass, option to enable, and disable
+                        options.push({
+                            content: "Set Group Nodes to Always",
+                            callback: () => {
+                                for (const node of nodesInGroup) {
+                                    setNodeMode(node, 0);
+                                }
+                            }
+                        });
+                        options.push({
+                            content: "Set Group Nodes to Never",
+                            callback: () => {
+                                for (const node of nodesInGroup) {
+                                    setNodeMode(node, 2);
+                                }
+                            }
+                        });
+                        break;
+                    default:
+                        // All nodes are On Trigger or On Event(Or other?), option to disable, set to always, or bypass
+                        options.push({
+                            content: "Set Group Nodes to Always",
+                            callback: () => {
+                                for (const node of nodesInGroup) {
+                                    setNodeMode(node, 0);
+                                }
+                            }
+                        });
+                        options.push({
+                            content: "Set Group Nodes to Never",
+                            callback: () => {
+                                for (const node of nodesInGroup) {
+                                    setNodeMode(node, 2);
+                                }
+                            }
+                        });
+                        options.push({
+                            content: "Bypass Group Nodes",
+                            callback: () => {
+                                for (const node of nodesInGroup) {
+                                    setNodeMode(node, 4);
+                                }
+                            }
+                        });
+                        break;
+                }
+            } else {
+                // Nodes are not all the same mode, add a menu option to change the mode to always, never, or bypass
+                options.push({
+                    content: "Set Group Nodes to Always",
+                    callback: () => {
+                        for (const node of nodesInGroup) {
+                            setNodeMode(node, 0);
+                        }
+                    }
+                });
+                options.push({
+                    content: "Set Group Nodes to Never",
+                    callback: () => {
+                        for (const node of nodesInGroup) {
+                            setNodeMode(node, 2);
+                        }
+                    }
+                });
+                options.push({
+                    content: "Bypass Group Nodes",
+                    callback: () => {
+                        for (const node of nodesInGroup) {
+                            setNodeMode(node, 4);
+                        }
+                    }
+                });
+            }
+
+            return options
+        }
+    }
+});

ComfyUI/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";
+app.registerExtension({
+	name: id,
+	init() {
+		const ctxMenu = LiteGraph.ContextMenu;
+		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;
+				}
+			},
+		});
+	},
+});

ComfyUI/web/extensions/core/keybinds.js

@@ -0,0 +1,69 @@
+import {app} from "../../scripts/app.js";
+
+app.registerExtension({
+	name: "Comfy.Keybinds",
+	init() {
+		const keybindListener = function (event) {
+			const modifierPressed = event.ctrlKey || event.metaKey;
+
+			// Queue prompt using ctrl or command + enter
+			if (modifierPressed && event.key === "Enter") {
+				app.queuePrompt(event.shiftKey ? -1 : 0).then();
+				return;
+			}
+
+			const target = event.composedPath()[0];
+			if (["INPUT", "TEXTAREA"].includes(target.tagName)) {
+				return;
+			}
+
+			const modifierKeyIdMap = {
+				s: "#comfy-save-button",
+				o: "#comfy-file-input",
+				Backspace: "#comfy-clear-button",
+				d: "#comfy-load-default-button",
+			};
+
+			const modifierKeybindId = modifierKeyIdMap[event.key];
+			if (modifierPressed && modifierKeybindId) {
+				event.preventDefault();
+
+				const elem = document.querySelector(modifierKeybindId);
+				elem.click();
+				return;
+			}
+
+			// Finished Handling all modifier keybinds, now handle the rest
+			if (event.ctrlKey || event.altKey || event.metaKey) {
+				return;
+			}
+
+			// Close out of modals using escape
+			if (event.key === "Escape") {
+				const modals = document.querySelectorAll(".comfy-modal");
+				const modal = Array.from(modals).find(modal => window.getComputedStyle(modal).getPropertyValue("display") !== "none");
+				if (modal) {
+					modal.style.display = "none";
+				}
+
+				[...document.querySelectorAll("dialog")].forEach(d => {
+					d.close();
+				});
+			}
+
+			const keyIdMap = {
+				q: "#comfy-view-queue-button",
+				h: "#comfy-view-history-button",
+				r: "#comfy-refresh-button",
+			};
+
+			const buttonId = keyIdMap[event.key];
+			if (buttonId) {
+				const button = document.querySelector(buttonId);
+				button.click();
+			}
+		}
+
+		window.addEventListener("keydown", keybindListener, true);
+	}
+});

ComfyUI/web/extensions/core/linkRenderMode.js

@@ -0,0 +1,25 @@
+import { app } from "../../scripts/app.js";
+
+const id = "Comfy.LinkRenderMode";
+const ext = {
+	name: id,
+	async setup(app) {
+		app.ui.settings.addSetting({
+			id,
+			name: "Link Render Mode",
+			defaultValue: 2,
+			type: "combo",
+			options: [...LiteGraph.LINK_RENDER_MODES, "Hidden"].map((m, i) => ({
+				value: i,
+				text: m,
+				selected: i == app.canvas.links_render_mode,
+			})),
+			onChange(value) {
+				app.canvas.links_render_mode = +value;
+				app.graph.setDirtyCanvas(true);
+			},
+		});
+	},
+};
+
+app.registerExtension(ext);

ComfyUI/web/extensions/core/maskeditor.js

@@ -0,0 +1,967 @@
+import { app } from "../../scripts/app.js";
+import { ComfyDialog, $el } from "../../scripts/ui.js";
+import { ComfyApp } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js"
+import { ClipspaceDialog } from "./clipspace.js";
+
+// Helper function to convert a data URL to a Blob object
+function dataURLToBlob(dataURL) {
+	const parts = dataURL.split(';base64,');
+	const contentType = parts[0].split(':')[1];
+	const byteString = atob(parts[1]);
+	const arrayBuffer = new ArrayBuffer(byteString.length);
+	const uint8Array = new Uint8Array(arrayBuffer);
+	for (let i = 0; i < byteString.length; i++) {
+		uint8Array[i] = byteString.charCodeAt(i);
+	}
+	return new Blob([arrayBuffer], { type: contentType });
+}
+
+function loadedImageToBlob(image) {
+	const canvas = document.createElement('canvas');
+
+	canvas.width = image.width;
+	canvas.height = image.height;
+
+	const ctx = canvas.getContext('2d');
+
+	ctx.drawImage(image, 0, 0);
+
+	const dataURL = canvas.toDataURL('image/png', 1);
+	const blob = dataURLToBlob(dataURL);
+
+	return blob;
+}
+
+function loadImage(imagePath) {
+	return new Promise((resolve, reject) => {
+		const image = new Image();
+
+		image.onload = function() {
+			resolve(image);
+		};
+
+		image.src = imagePath;
+	});
+}
+
+async function uploadMask(filepath, formData) {
+	await api.fetchApi('/upload/mask', {
+		method: 'POST',
+		body: formData
+	}).then(response => {}).catch(error => {
+		console.error('Error:', error);
+	});
+
+	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']] = new Image();
+	ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src = api.apiURL("/view?" + new URLSearchParams(filepath).toString() + app.getPreviewFormatParam() + app.getRandParam());
+
+	if(ComfyApp.clipspace.images)
+		ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']] = filepath;
+
+	ClipspaceDialog.invalidatePreview();
+}
+
+function prepare_mask(image, maskCanvas, maskCtx, maskColor) {
+	// paste mask data into alpha channel
+	maskCtx.drawImage(image, 0, 0, maskCanvas.width, maskCanvas.height);
+	const maskData = maskCtx.getImageData(0, 0, maskCanvas.width, maskCanvas.height);
+
+	// invert mask
+	for (let i = 0; i < maskData.data.length; i += 4) {
+		if(maskData.data[i+3] == 255)
+			maskData.data[i+3] = 0;
+		else
+			maskData.data[i+3] = 255;
+
+		maskData.data[i] = maskColor.r;
+		maskData.data[i+1] = maskColor.g;
+		maskData.data[i+2] = maskColor.b;
+	}
+
+	maskCtx.globalCompositeOperation = 'source-over';
+	maskCtx.putImageData(maskData, 0, 0);
+}
+
+class MaskEditorDialog extends ComfyDialog {
+	static instance = null;
+
+	static getInstance() {
+		if(!MaskEditorDialog.instance) {
+			MaskEditorDialog.instance = new MaskEditorDialog(app);
+		}
+
+		return MaskEditorDialog.instance;
+	}
+
+	is_layout_created =  false;
+
+	constructor() {
+		super();
+		this.element = $el("div.comfy-modal", { parent: document.body }, 
+			[ $el("div.comfy-modal-content", 
+				[...this.createButtons()]),
+			]);
+	}
+
+	createButtons() {
+		return [];
+	}
+
+	createButton(name, callback) {
+		var button = document.createElement("button");
+		button.style.pointerEvents = "auto";
+		button.innerText = name;
+		button.addEventListener("click", callback);
+		return button;
+	}
+
+	createLeftButton(name, callback) {
+		var button = this.createButton(name, callback);
+		button.style.cssFloat = "left";
+		button.style.marginRight = "4px";
+		return button;
+	}
+
+	createRightButton(name, callback) {
+		var button = this.createButton(name, callback);
+		button.style.cssFloat = "right";
+		button.style.marginLeft = "4px";
+		return button;
+	}
+
+	createLeftSlider(self, name, callback) {
+		const divElement = document.createElement('div');
+		divElement.id = "maskeditor-slider";
+		divElement.style.cssFloat = "left";
+		divElement.style.fontFamily = "sans-serif";
+		divElement.style.marginRight = "4px";
+		divElement.style.color = "var(--input-text)";
+		divElement.style.backgroundColor = "var(--comfy-input-bg)";
+		divElement.style.borderRadius = "8px";
+		divElement.style.borderColor = "var(--border-color)";
+		divElement.style.borderStyle = "solid";
+		divElement.style.fontSize = "15px";
+		divElement.style.height = "21px";
+		divElement.style.padding = "1px 6px";
+		divElement.style.display = "flex";
+		divElement.style.position = "relative";
+		divElement.style.top = "2px";
+		divElement.style.pointerEvents = "auto";
+		self.brush_slider_input = document.createElement('input');
+		self.brush_slider_input.setAttribute('type', 'range');
+		self.brush_slider_input.setAttribute('min', '1');
+		self.brush_slider_input.setAttribute('max', '100');
+		self.brush_slider_input.setAttribute('value', '10');
+		const labelElement = document.createElement("label");
+		labelElement.textContent = name;
+
+		divElement.appendChild(labelElement);
+		divElement.appendChild(self.brush_slider_input);
+
+		self.brush_slider_input.addEventListener("change", callback);
+
+		return divElement;
+	}
+
+	createOpacitySlider(self, name, callback) {
+		const divElement = document.createElement('div');
+		divElement.id = "maskeditor-opacity-slider";
+		divElement.style.cssFloat = "left";
+		divElement.style.fontFamily = "sans-serif";
+		divElement.style.marginRight = "4px";
+		divElement.style.color = "var(--input-text)";
+		divElement.style.backgroundColor = "var(--comfy-input-bg)";
+		divElement.style.borderRadius = "8px";
+		divElement.style.borderColor = "var(--border-color)";
+		divElement.style.borderStyle = "solid";
+		divElement.style.fontSize = "15px";
+		divElement.style.height = "21px";
+		divElement.style.padding = "1px 6px";
+		divElement.style.display = "flex";
+		divElement.style.position = "relative";
+		divElement.style.top = "2px";
+		divElement.style.pointerEvents = "auto";
+		self.opacity_slider_input = document.createElement('input');
+		self.opacity_slider_input.setAttribute('type', 'range');
+		self.opacity_slider_input.setAttribute('min', '0.1');
+		self.opacity_slider_input.setAttribute('max', '1.0');
+		self.opacity_slider_input.setAttribute('step', '0.01')
+		self.opacity_slider_input.setAttribute('value', '0.7');
+		const labelElement = document.createElement("label");
+		labelElement.textContent = name;
+
+		divElement.appendChild(labelElement);
+		divElement.appendChild(self.opacity_slider_input);
+
+		self.opacity_slider_input.addEventListener("input", callback);
+
+		return divElement;
+	}
+
+	setlayout(imgCanvas, maskCanvas) {
+		const self = this;
+
+		// If it is specified as relative, using it only as a hidden placeholder for padding is recommended
+		// to prevent anomalies where it exceeds a certain size and goes outside of the window.
+		var bottom_panel = document.createElement("div");
+		bottom_panel.style.position = "absolute";
+		bottom_panel.style.bottom = "0px";
+		bottom_panel.style.left = "20px";
+		bottom_panel.style.right = "20px";
+		bottom_panel.style.height = "50px";
+		bottom_panel.style.pointerEvents = "none";
+
+		var brush = document.createElement("div");
+		brush.id = "brush";
+		brush.style.backgroundColor = "transparent";
+		brush.style.outline = "1px dashed black";
+		brush.style.boxShadow = "0 0 0 1px white";
+		brush.style.borderRadius = "50%";
+		brush.style.MozBorderRadius = "50%";
+		brush.style.WebkitBorderRadius = "50%";
+		brush.style.position = "absolute";
+		brush.style.zIndex = 8889;
+		brush.style.pointerEvents = "none";
+		this.brush = brush;
+		this.element.appendChild(imgCanvas);
+		this.element.appendChild(maskCanvas);
+		this.element.appendChild(bottom_panel);
+		document.body.appendChild(brush);
+
+		var clearButton = this.createLeftButton("Clear", () => {
+			self.maskCtx.clearRect(0, 0, self.maskCanvas.width, self.maskCanvas.height);
+		});
+		
+		this.brush_size_slider = this.createLeftSlider(self, "Thickness", (event) => {
+			self.brush_size = event.target.value;
+			self.updateBrushPreview(self, null, null);
+		});
+
+		this.brush_opacity_slider = this.createOpacitySlider(self, "Opacity", (event) => {
+			self.brush_opacity = event.target.value;
+			if (self.brush_color_mode !== "negative") {
+			    self.maskCanvas.style.opacity = self.brush_opacity;
+			}
+		});
+
+		this.colorButton = this.createLeftButton(this.getColorButtonText(), () => {
+			if (self.brush_color_mode === "black") {
+				self.brush_color_mode = "white";
+			}
+			else if (self.brush_color_mode === "white") {
+				self.brush_color_mode = "negative";
+			}
+			else {
+				self.brush_color_mode = "black";
+			}
+
+			self.updateWhenBrushColorModeChanged();
+		});
+
+		var cancelButton = this.createRightButton("Cancel", () => {
+			document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
+			document.removeEventListener("keydown", MaskEditorDialog.handleKeyDown);
+			self.close();
+		});
+
+		this.saveButton = this.createRightButton("Save", () => {
+			document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
+			document.removeEventListener("keydown", MaskEditorDialog.handleKeyDown);
+				self.save();
+			});
+
+		this.element.appendChild(imgCanvas);
+		this.element.appendChild(maskCanvas);
+		this.element.appendChild(bottom_panel);
+
+		bottom_panel.appendChild(clearButton);
+		bottom_panel.appendChild(this.saveButton);
+		bottom_panel.appendChild(cancelButton);
+		bottom_panel.appendChild(this.brush_size_slider);
+		bottom_panel.appendChild(this.brush_opacity_slider);
+		bottom_panel.appendChild(this.colorButton);
+
+		imgCanvas.style.position = "absolute";
+		maskCanvas.style.position = "absolute";
+
+		imgCanvas.style.top = "200";
+		imgCanvas.style.left = "0";
+
+		maskCanvas.style.top = imgCanvas.style.top;
+		maskCanvas.style.left = imgCanvas.style.left;
+
+		const maskCanvasStyle = this.getMaskCanvasStyle();
+		maskCanvas.style.mixBlendMode = maskCanvasStyle.mixBlendMode;
+		maskCanvas.style.opacity = maskCanvasStyle.opacity;
+	}
+
+	async show() {
+		this.zoom_ratio = 1.0;
+		this.pan_x = 0;
+		this.pan_y = 0;
+
+		if(!this.is_layout_created) {
+			// layout
+			const imgCanvas = document.createElement('canvas');
+			const maskCanvas = document.createElement('canvas');
+
+			imgCanvas.id = "imageCanvas";
+			maskCanvas.id = "maskCanvas";
+
+			this.setlayout(imgCanvas, maskCanvas);
+
+			// prepare content
+			this.imgCanvas = imgCanvas;
+			this.maskCanvas = maskCanvas;
+			this.maskCtx = maskCanvas.getContext('2d', {willReadFrequently: true });
+
+			this.setEventHandler(maskCanvas);
+
+			this.is_layout_created = true;
+
+			// replacement of onClose hook since close is not real close
+			const self = this;
+			const observer = new MutationObserver(function(mutations) {
+			mutations.forEach(function(mutation) {
+					if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
+						if(self.last_display_style && self.last_display_style != 'none' && self.element.style.display == 'none') {
+							document.removeEventListener("mouseup", MaskEditorDialog.handleMouseUp);
+							self.brush.style.display = "none";
+							ComfyApp.onClipspaceEditorClosed();
+						}
+
+						self.last_display_style = self.element.style.display;
+					}
+				});
+			});
+
+			const config = { attributes: true };
+			observer.observe(this.element, config);
+		}
+
+		// The keydown event needs to be reconfigured when closing the dialog as it gets removed.
+		document.addEventListener('keydown', MaskEditorDialog.handleKeyDown);
+
+		if(ComfyApp.clipspace_return_node) {
+			this.saveButton.innerText = "Save to node";
+		}
+		else {
+			this.saveButton.innerText = "Save";
+		}
+		this.saveButton.disabled = false;
+
+		this.element.style.display = "block";
+		this.element.style.width = "85%";
+		this.element.style.margin = "0 7.5%";
+		this.element.style.height = "100vh";
+		this.element.style.top = "50%";
+		this.element.style.left = "42%";
+		this.element.style.zIndex = 8888; // NOTE: alert dialog must be high priority.
+
+		await this.setImages(this.imgCanvas);
+
+		this.is_visible = true;
+	}
+
+	isOpened() {
+		return this.element.style.display == "block";
+	}
+
+	invalidateCanvas(orig_image, mask_image) {
+		this.imgCanvas.width = orig_image.width;
+		this.imgCanvas.height = orig_image.height;
+
+		this.maskCanvas.width = orig_image.width;
+		this.maskCanvas.height = orig_image.height;
+
+		let imgCtx = this.imgCanvas.getContext('2d', {willReadFrequently: true });
+		let maskCtx = this.maskCanvas.getContext('2d', {willReadFrequently: true });
+
+		imgCtx.drawImage(orig_image, 0, 0, orig_image.width, orig_image.height);
+		prepare_mask(mask_image, this.maskCanvas, maskCtx, this.getMaskColor());
+	}
+
+	async setImages(imgCanvas) {
+		let self = this;
+
+		const imgCtx = imgCanvas.getContext('2d', {willReadFrequently: true });
+		const maskCtx = this.maskCtx;
+		const maskCanvas = this.maskCanvas;
+
+		imgCtx.clearRect(0,0,this.imgCanvas.width,this.imgCanvas.height);
+		maskCtx.clearRect(0,0,this.maskCanvas.width,this.maskCanvas.height);
+
+		// image load
+		const filepath = ComfyApp.clipspace.images;
+
+		const alpha_url = new URL(ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src)
+		alpha_url.searchParams.delete('channel');
+		alpha_url.searchParams.delete('preview');
+		alpha_url.searchParams.set('channel', 'a');
+		let mask_image = await loadImage(alpha_url);
+
+		// original image load
+		const rgb_url = new URL(ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src);
+		rgb_url.searchParams.delete('channel');
+		rgb_url.searchParams.set('channel', 'rgb');
+		this.image = new Image();
+		this.image.onload = function() {
+			maskCanvas.width = self.image.width;
+			maskCanvas.height = self.image.height;
+
+			self.invalidateCanvas(self.image, mask_image);
+			self.initializeCanvasPanZoom();
+		};
+		this.image.src = rgb_url;
+	}
+
+	initializeCanvasPanZoom() {
+		// set initialize
+		let drawWidth = this.image.width;
+		let drawHeight = this.image.height;
+
+		let width = this.element.clientWidth;
+		let height = this.element.clientHeight;
+
+		if (this.image.width > width) {
+			drawWidth = width;
+			drawHeight = (drawWidth / this.image.width) * this.image.height;
+		}
+
+		if (drawHeight > height) {
+			drawHeight = height;
+			drawWidth = (drawHeight / this.image.height) * this.image.width;
+		}
+
+		this.zoom_ratio = drawWidth/this.image.width;
+
+		const canvasX = (width - drawWidth) / 2;
+		const canvasY = (height - drawHeight) / 2;
+		this.pan_x = canvasX;
+		this.pan_y = canvasY;
+
+		this.invalidatePanZoom();
+	}
+
+
+	invalidatePanZoom() {
+		let raw_width = this.image.width * this.zoom_ratio;
+		let raw_height = this.image.height * this.zoom_ratio;
+
+		if(this.pan_x + raw_width < 10) {
+			this.pan_x = 10 - raw_width;
+		}
+
+		if(this.pan_y + raw_height < 10) {
+			this.pan_y = 10 - raw_height;
+		}
+
+		let width = `${raw_width}px`;
+		let height = `${raw_height}px`;
+
+		let left = `${this.pan_x}px`;
+		let top = `${this.pan_y}px`;
+
+		this.maskCanvas.style.width = width;
+		this.maskCanvas.style.height = height;
+		this.maskCanvas.style.left = left;
+		this.maskCanvas.style.top = top;
+
+		this.imgCanvas.style.width = width;
+		this.imgCanvas.style.height = height;
+		this.imgCanvas.style.left = left;
+		this.imgCanvas.style.top = top;
+	}
+
+
+	setEventHandler(maskCanvas) {
+		const self = this;
+
+		if(!this.handler_registered) {
+			maskCanvas.addEventListener("contextmenu", (event) => {
+				event.preventDefault();
+			});
+
+			this.element.addEventListener('wheel', (event) => this.handleWheelEvent(self,event));
+			this.element.addEventListener('pointermove', (event) => this.pointMoveEvent(self,event));
+			this.element.addEventListener('touchmove', (event) => this.pointMoveEvent(self,event));
+
+			this.element.addEventListener('dragstart', (event) => {
+				if(event.ctrlKey) {
+					event.preventDefault();
+				}
+			});
+
+			maskCanvas.addEventListener('pointerdown', (event) => this.handlePointerDown(self,event));
+			maskCanvas.addEventListener('pointermove', (event) => this.draw_move(self,event));
+			maskCanvas.addEventListener('touchmove', (event) => this.draw_move(self,event));
+			maskCanvas.addEventListener('pointerover', (event) => { this.brush.style.display = "block"; });
+			maskCanvas.addEventListener('pointerleave', (event) => { this.brush.style.display = "none"; });
+
+			document.addEventListener('pointerup', MaskEditorDialog.handlePointerUp);
+
+			this.handler_registered = true;
+		}
+	}
+
+	getMaskCanvasStyle() {
+		if (this.brush_color_mode === "negative") {
+			return {
+				mixBlendMode: "difference",
+				opacity: "1",
+			};
+		}
+		else {
+			return {
+				mixBlendMode: "initial",
+				opacity: this.brush_opacity,
+			};
+		}
+	}
+
+	getMaskColor() {
+		if (this.brush_color_mode === "black") {
+			return { r: 0, g: 0, b: 0 };
+		}
+		if (this.brush_color_mode === "white") {
+			return { r: 255, g: 255, b: 255 };
+		}
+		if (this.brush_color_mode === "negative") {
+			// negative effect only works with white color
+			return { r: 255, g: 255, b: 255 };
+		}
+
+		return { r: 0, g: 0, b: 0 };
+	}
+
+	getMaskFillStyle() {
+		const maskColor = this.getMaskColor();
+
+		return "rgb(" + maskColor.r + "," + maskColor.g + "," + maskColor.b + ")";
+	}
+
+	getColorButtonText() {
+		let colorCaption = "unknown";
+
+		if (this.brush_color_mode === "black") {
+			colorCaption = "black";
+		}
+		else if (this.brush_color_mode === "white") {
+			colorCaption = "white";
+		}
+		else if (this.brush_color_mode === "negative") {
+			colorCaption = "negative";
+		}
+
+		return "Color: " + colorCaption;
+	}
+
+	updateWhenBrushColorModeChanged() {
+		this.colorButton.innerText = this.getColorButtonText();
+
+		// update mask canvas css styles
+
+		const maskCanvasStyle = this.getMaskCanvasStyle();
+		this.maskCanvas.style.mixBlendMode = maskCanvasStyle.mixBlendMode;
+		this.maskCanvas.style.opacity = maskCanvasStyle.opacity;
+
+		// update mask canvas rgb colors
+
+		const maskColor = this.getMaskColor();
+
+		const maskData = this.maskCtx.getImageData(0, 0, this.maskCanvas.width, this.maskCanvas.height);
+		
+		for (let i = 0; i < maskData.data.length; i += 4) {
+			maskData.data[i] = maskColor.r;
+			maskData.data[i+1] = maskColor.g;
+			maskData.data[i+2] = maskColor.b;
+		}
+	
+		this.maskCtx.putImageData(maskData, 0, 0);
+	}
+
+	brush_opacity = 0.7;
+	brush_size = 10;
+	brush_color_mode = "black";
+	drawing_mode = false;
+	lastx = -1;
+	lasty = -1;
+	lasttime = 0;
+
+	static handleKeyDown(event) {
+		const self = MaskEditorDialog.instance;
+		if (event.key === ']') {
+			self.brush_size = Math.min(self.brush_size+2, 100);
+			self.brush_slider_input.value = self.brush_size;
+		} else if (event.key === '[') {
+			self.brush_size = Math.max(self.brush_size-2, 1);
+			self.brush_slider_input.value = self.brush_size;
+		} else if(event.key === 'Enter') {
+			self.save();
+		}
+
+		self.updateBrushPreview(self);
+	}
+
+	static handlePointerUp(event) {
+		event.preventDefault();
+
+		this.mousedown_x = null;
+		this.mousedown_y = null;
+
+		MaskEditorDialog.instance.drawing_mode = false;
+	}
+
+	updateBrushPreview(self) {
+		const brush = self.brush;
+
+		var centerX = self.cursorX;
+		var centerY = self.cursorY;
+
+		brush.style.width = self.brush_size * 2 * this.zoom_ratio + "px";
+		brush.style.height = self.brush_size * 2 * this.zoom_ratio + "px";
+		brush.style.left = (centerX - self.brush_size * this.zoom_ratio) + "px";
+		brush.style.top = (centerY - self.brush_size * this.zoom_ratio) + "px";
+	}
+
+	handleWheelEvent(self, event) {
+		event.preventDefault();
+
+		if(event.ctrlKey) {
+			// zoom canvas
+			if(event.deltaY < 0) {
+				this.zoom_ratio = Math.min(10.0, this.zoom_ratio+0.2);
+			}
+			else {
+				this.zoom_ratio = Math.max(0.2, this.zoom_ratio-0.2);
+			}
+
+			this.invalidatePanZoom();
+		}
+		else {
+			// adjust brush size
+			if(event.deltaY < 0)
+				this.brush_size = Math.min(this.brush_size+2, 100);
+			else
+				this.brush_size = Math.max(this.brush_size-2, 1);
+
+			this.brush_slider_input.value = this.brush_size;
+
+			this.updateBrushPreview(this);
+		}
+	}
+
+	pointMoveEvent(self, event) {
+		this.cursorX = event.pageX;
+		this.cursorY = event.pageY;
+
+		self.updateBrushPreview(self);
+
+		if(event.ctrlKey) {
+			event.preventDefault();
+			self.pan_move(self, event);
+		}
+
+		let left_button_down = window.TouchEvent && event instanceof TouchEvent || event.buttons == 1;
+
+		if(event.shiftKey && left_button_down) {
+			self.drawing_mode = false;
+
+			const y = event.clientY;
+			let delta = (self.zoom_lasty - y)*0.005;
+			self.zoom_ratio = Math.max(Math.min(10.0, self.last_zoom_ratio - delta), 0.2);
+
+			this.invalidatePanZoom();
+			return;
+		}
+	}
+
+	pan_move(self, event) {
+		if(event.buttons == 1) {
+			if(this.mousedown_x) {
+				let deltaX = this.mousedown_x - event.clientX;
+				let deltaY = this.mousedown_y - event.clientY;
+
+				self.pan_x = this.mousedown_pan_x - deltaX;
+				self.pan_y = this.mousedown_pan_y - deltaY;
+
+				self.invalidatePanZoom();
+			}
+		}
+	}
+
+	draw_move(self, event) {
+		if(event.ctrlKey || event.shiftKey) {
+			return;
+		}
+
+		event.preventDefault();
+
+		this.cursorX = event.pageX;
+		this.cursorY = event.pageY;
+
+		self.updateBrushPreview(self);
+
+		let left_button_down = window.TouchEvent && event instanceof TouchEvent || event.buttons == 1;
+		let right_button_down = [2, 5, 32].includes(event.buttons);
+
+		if (!event.altKey && left_button_down) {
+			var diff = performance.now() - self.lasttime;
+
+			const maskRect = self.maskCanvas.getBoundingClientRect();
+
+			var x = event.offsetX;
+			var y = event.offsetY
+
+			if(event.offsetX == null) {
+				x = event.targetTouches[0].clientX - maskRect.left;
+			}
+
+			if(event.offsetY == null) {
+				y = event.targetTouches[0].clientY - maskRect.top;
+			}
+
+			x /= self.zoom_ratio;
+			y /= self.zoom_ratio;
+
+			var brush_size = this.brush_size;
+			if(event instanceof PointerEvent && event.pointerType == 'pen') {
+				brush_size *= event.pressure;
+				this.last_pressure = event.pressure;
+			}
+			else if(window.TouchEvent && event instanceof TouchEvent && diff < 20){
+				// The firing interval of PointerEvents in Pen is unreliable, so it is supplemented by TouchEvents.
+				brush_size *= this.last_pressure;
+			}
+			else {
+				brush_size = this.brush_size;
+			}
+
+			if(diff > 20 && !this.drawing_mode)
+				requestAnimationFrame(() => {
+					self.maskCtx.beginPath();
+					self.maskCtx.fillStyle = this.getMaskFillStyle();
+					self.maskCtx.globalCompositeOperation = "source-over";
+					self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
+					self.maskCtx.fill();
+					self.lastx = x;
+					self.lasty = y;
+				});
+			else
+				requestAnimationFrame(() => {
+					self.maskCtx.beginPath();
+					self.maskCtx.fillStyle = this.getMaskFillStyle();
+					self.maskCtx.globalCompositeOperation = "source-over";
+
+					var dx = x - self.lastx;
+					var dy = y - self.lasty;
+
+					var distance = Math.sqrt(dx * dx + dy * dy);
+					var directionX = dx / distance;
+					var directionY = dy / distance;
+
+					for (var i = 0; i < distance; i+=5) {
+						var px = self.lastx + (directionX * i);
+						var py = self.lasty + (directionY * i);
+						self.maskCtx.arc(px, py, brush_size, 0, Math.PI * 2, false);
+						self.maskCtx.fill();
+					}
+					self.lastx = x;
+					self.lasty = y;
+				});
+
+			self.lasttime = performance.now();
+		}
+		else if((event.altKey && left_button_down) || right_button_down) {
+			const maskRect = self.maskCanvas.getBoundingClientRect();
+			const x = (event.offsetX || event.targetTouches[0].clientX - maskRect.left) / self.zoom_ratio;
+			const y = (event.offsetY || event.targetTouches[0].clientY - maskRect.top) / self.zoom_ratio;
+
+			var brush_size = this.brush_size;
+			if(event instanceof PointerEvent && event.pointerType == 'pen') {
+				brush_size *= event.pressure;
+				this.last_pressure = event.pressure;
+			}
+			else if(window.TouchEvent && event instanceof TouchEvent && diff < 20){
+				brush_size *= this.last_pressure;
+			}
+			else {
+				brush_size = this.brush_size;
+			}
+
+			if(diff > 20 && !drawing_mode) // cannot tracking drawing_mode for touch event
+				requestAnimationFrame(() => {
+					self.maskCtx.beginPath();
+					self.maskCtx.globalCompositeOperation = "destination-out";
+					self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
+					self.maskCtx.fill();
+					self.lastx = x;
+					self.lasty = y;
+				});
+			else
+				requestAnimationFrame(() => {
+					self.maskCtx.beginPath();
+					self.maskCtx.globalCompositeOperation = "destination-out";
+					
+					var dx = x - self.lastx;
+					var dy = y - self.lasty;
+
+					var distance = Math.sqrt(dx * dx + dy * dy);
+					var directionX = dx / distance;
+					var directionY = dy / distance;
+
+					for (var i = 0; i < distance; i+=5) {
+						var px = self.lastx + (directionX * i);
+						var py = self.lasty + (directionY * i);
+						self.maskCtx.arc(px, py, brush_size, 0, Math.PI * 2, false);
+						self.maskCtx.fill();
+					}
+					self.lastx = x;
+					self.lasty = y;
+				});
+
+				self.lasttime = performance.now();
+		}
+	}
+
+	handlePointerDown(self, event) {
+		if(event.ctrlKey) {
+			if (event.buttons == 1) {
+				this.mousedown_x = event.clientX;
+				this.mousedown_y = event.clientY;
+
+				this.mousedown_pan_x = this.pan_x;
+				this.mousedown_pan_y = this.pan_y;
+			}
+			return;
+		}
+
+		var brush_size = this.brush_size;
+		if(event instanceof PointerEvent && event.pointerType == 'pen') {
+			brush_size *= event.pressure;
+			this.last_pressure = event.pressure;
+		}
+
+		if ([0, 2, 5].includes(event.button)) {
+			self.drawing_mode = true;
+
+			event.preventDefault();
+
+			if(event.shiftKey) {
+				self.zoom_lasty = event.clientY;
+				self.last_zoom_ratio = self.zoom_ratio;
+				return;
+			}
+
+			const maskRect = self.maskCanvas.getBoundingClientRect();
+			const x = (event.offsetX || event.targetTouches[0].clientX - maskRect.left) / self.zoom_ratio;
+			const y = (event.offsetY || event.targetTouches[0].clientY - maskRect.top) / self.zoom_ratio;
+
+			self.maskCtx.beginPath();
+			if (!event.altKey && event.button == 0) {
+				self.maskCtx.fillStyle = this.getMaskFillStyle();
+				self.maskCtx.globalCompositeOperation = "source-over";
+			} else {
+				self.maskCtx.globalCompositeOperation = "destination-out";
+			}
+			self.maskCtx.arc(x, y, brush_size, 0, Math.PI * 2, false);
+			self.maskCtx.fill();
+			self.lastx = x;
+			self.lasty = y;
+			self.lasttime = performance.now();
+		}
+	}
+
+	async save() {
+		const backupCanvas = document.createElement('canvas');
+		const backupCtx = backupCanvas.getContext('2d', {willReadFrequently:true});
+		backupCanvas.width = this.image.width;
+		backupCanvas.height = this.image.height;
+
+		backupCtx.clearRect(0,0, backupCanvas.width, backupCanvas.height);
+		backupCtx.drawImage(this.maskCanvas,
+			0, 0, this.maskCanvas.width, this.maskCanvas.height,
+			0, 0, backupCanvas.width, backupCanvas.height);
+
+		// paste mask data into alpha channel
+		const backupData = backupCtx.getImageData(0, 0, backupCanvas.width, backupCanvas.height);
+
+		// refine mask image
+		for (let i = 0; i < backupData.data.length; i += 4) {
+			if(backupData.data[i+3] == 255)
+				backupData.data[i+3] = 0;
+			else
+				backupData.data[i+3] = 255;
+
+			backupData.data[i] = 0;
+			backupData.data[i+1] = 0;
+			backupData.data[i+2] = 0;
+		}
+
+		backupCtx.globalCompositeOperation = 'source-over';
+		backupCtx.putImageData(backupData, 0, 0);
+
+		const formData = new FormData();
+		const filename = "clipspace-mask-" + performance.now() + ".png";
+
+		const item =
+			{
+				"filename": filename,
+				"subfolder": "clipspace",
+				"type": "input",
+			};
+
+		if(ComfyApp.clipspace.images)
+			ComfyApp.clipspace.images[0] = item;
+
+		if(ComfyApp.clipspace.widgets) {
+			const index = ComfyApp.clipspace.widgets.findIndex(obj => obj.name === 'image');
+
+			if(index >= 0)
+				ComfyApp.clipspace.widgets[index].value = item;
+		}
+
+		const dataURL = backupCanvas.toDataURL();
+		const blob = dataURLToBlob(dataURL);
+
+		let original_url = new URL(this.image.src);
+
+		const original_ref = { filename: original_url.searchParams.get('filename') };
+
+		let original_subfolder = original_url.searchParams.get("subfolder");
+		if(original_subfolder)
+			original_ref.subfolder = original_subfolder;
+
+		let original_type = original_url.searchParams.get("type");
+		if(original_type)
+			original_ref.type = original_type;
+
+		formData.append('image', blob, filename);
+		formData.append('original_ref', JSON.stringify(original_ref));
+		formData.append('type', "input");
+		formData.append('subfolder', "clipspace");
+
+		this.saveButton.innerText = "Saving...";
+		this.saveButton.disabled = true;
+		await uploadMask(item, formData);
+		ComfyApp.onClipspaceEditorSave();
+		this.close();
+	}
+}
+
+app.registerExtension({
+	name: "Comfy.MaskEditor",
+	init(app) {
+		ComfyApp.open_maskeditor =
+			function () {
+				const dlg = MaskEditorDialog.getInstance();
+				if(!dlg.isOpened()) {
+					dlg.show();
+				}
+			};
+
+		const context_predicate = () => ComfyApp.clipspace && ComfyApp.clipspace.imgs && ComfyApp.clipspace.imgs.length > 0
+		ClipspaceDialog.registerButton("MaskEditor", context_predicate, ComfyApp.open_maskeditor);
+	}
+});

ComfyUI/web/extensions/core/nodeTemplates.js

@@ -0,0 +1,412 @@
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js";
+import { ComfyDialog, $el } from "../../scripts/ui.js";
+import { GroupNodeConfig, GroupNodeHandler } from "./groupNode.js";
+
+// Adds the ability to save and add multiple nodes as a template
+// To save:
+// Select multiple nodes (ctrl + drag to select a region or ctrl+click individual nodes)
+// Right click the canvas
+// Save Node Template -> give it a name
+//
+// To add:
+// Right click the canvas
+// Node templates -> click the one to add
+//
+// To delete/rename:
+// Right click the canvas
+// Node templates -> Manage
+//
+// To rearrange:
+// Open the manage dialog and Drag and drop elements using the "Name:" label as handle
+
+const id = "Comfy.NodeTemplates";
+const file = "comfy.templates.json";
+
+class ManageTemplates extends ComfyDialog {
+	constructor() {
+		super();
+		this.load().then((v) => {
+			this.templates = v;
+		});
+
+		this.element.classList.add("comfy-manage-templates");
+		this.draggedEl = null;
+		this.saveVisualCue = null;
+		this.emptyImg = new Image();
+		this.emptyImg.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+
+		this.importInput = $el("input", {
+			type: "file",
+			accept: ".json",
+			multiple: true,
+			style: { display: "none" },
+			parent: document.body,
+			onchange: () => this.importAll(),
+		});
+	}
+
+	createButtons() {
+		const btns = super.createButtons();
+		btns[0].textContent = "Close";
+		btns[0].onclick = (e) => {
+			clearTimeout(this.saveVisualCue);
+			this.close();
+		};
+		btns.unshift(
+			$el("button", {
+				type: "button",
+				textContent: "Export",
+				onclick: () => this.exportAll(),
+			})
+		);
+		btns.unshift(
+			$el("button", {
+				type: "button",
+				textContent: "Import",
+				onclick: () => {
+					this.importInput.click();
+				},
+			})
+		);
+		return btns;
+	}
+
+	async load() {
+		let templates = [];
+		if (app.storageLocation === "server") {
+			if (app.isNewUserSession) {
+				// New user so migrate existing templates
+				const json = localStorage.getItem(id);
+				if (json) {
+					templates = JSON.parse(json);
+				}
+				await api.storeUserData(file, json, { stringify: false });
+			} else {
+				const res = await api.getUserData(file);
+				if (res.status === 200) {
+					try {
+						templates = await res.json();
+					} catch (error) {
+					}
+				} else if (res.status !== 404) {
+					console.error(res.status + " " + res.statusText);
+				}
+			}
+		} else {
+			const json = localStorage.getItem(id);
+			if (json) {
+				templates = JSON.parse(json);
+			}
+		}
+
+		return templates ?? [];
+	}
+
+	async store() {
+		if(app.storageLocation === "server") {
+			const templates = JSON.stringify(this.templates, undefined, 4);
+			localStorage.setItem(id, templates); // Backwards compatibility
+			try {
+				await api.storeUserData(file, templates, { stringify: false });
+			} catch (error) {
+				console.error(error);
+				alert(error.message);
+			}
+		} else {
+			localStorage.setItem(id, JSON.stringify(this.templates));
+		}
+	}
+
+	async importAll() {
+		for (const file of this.importInput.files) {
+			if (file.type === "application/json" || file.name.endsWith(".json")) {
+				const reader = new FileReader();
+				reader.onload = async () => {
+					const importFile = JSON.parse(reader.result);
+					if (importFile?.templates) {
+						for (const template of importFile.templates) {
+							if (template?.name && template?.data) {
+								this.templates.push(template);
+							}
+						}
+						await this.store();
+					}
+				};
+				await reader.readAsText(file);
+			}
+		}
+
+		this.importInput.value = null;
+
+		this.close();
+	}
+
+	exportAll() {
+		if (this.templates.length == 0) {
+			alert("No templates to export.");
+			return;
+		}
+
+		const json = JSON.stringify({ templates: this.templates }, 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: "node_templates.json",
+			style: { display: "none" },
+			parent: document.body,
+		});
+		a.click();
+		setTimeout(function () {
+			a.remove();
+			window.URL.revokeObjectURL(url);
+		}, 0);
+	}
+
+	show() {
+		// Show list of template names + delete button
+		super.show(
+			$el(
+				"div",
+				{},
+				this.templates.flatMap((t,i) => {
+					let nameInput;
+					return [
+						$el(
+							"div",
+							{
+								dataset: { id: i },
+								className: "tempateManagerRow",
+								style: {
+									display: "grid",
+									gridTemplateColumns: "1fr auto",
+									border: "1px dashed transparent",
+									gap: "5px",
+									backgroundColor: "var(--comfy-menu-bg)"
+								},
+								ondragstart: (e) => {
+									this.draggedEl = e.currentTarget;
+									e.currentTarget.style.opacity = "0.6";
+									e.currentTarget.style.border = "1px dashed yellow";
+									e.dataTransfer.effectAllowed = 'move';
+									e.dataTransfer.setDragImage(this.emptyImg, 0, 0);
+								},
+								ondragend: (e) => {
+									e.target.style.opacity = "1";
+									e.currentTarget.style.border = "1px dashed transparent";
+									e.currentTarget.removeAttribute("draggable");
+
+									// rearrange the elements
+									this.element.querySelectorAll('.tempateManagerRow').forEach((el,i) => {
+										var prev_i = el.dataset.id;
+
+										if ( el == this.draggedEl && prev_i != i ) {
+											this.templates.splice(i, 0, this.templates.splice(prev_i, 1)[0]);
+										}
+										el.dataset.id = i;
+									});
+									this.store();
+								},
+								ondragover: (e) => {
+									e.preventDefault();
+									if ( e.currentTarget == this.draggedEl )
+										return;
+
+									let rect = e.currentTarget.getBoundingClientRect();
+									if (e.clientY > rect.top + rect.height / 2) {
+										e.currentTarget.parentNode.insertBefore(this.draggedEl, e.currentTarget.nextSibling);
+									} else {
+										e.currentTarget.parentNode.insertBefore(this.draggedEl, e.currentTarget);
+									}
+								}
+							},
+							[
+								$el(
+									"label",
+									{
+										textContent: "Name: ",
+										style: {
+											cursor: "grab",
+										},
+										onmousedown: (e) => {
+											// enable dragging only from the label
+											if (e.target.localName == 'label')
+												e.currentTarget.parentNode.draggable = 'true';
+										}
+									},
+									[
+										$el("input", {
+											value: t.name,
+											dataset: { name: t.name },
+											style: {
+												transitionProperty: 'background-color',
+												transitionDuration: '0s',
+											},
+											onchange: (e) => {
+												clearTimeout(this.saveVisualCue);
+												var el = e.target;
+												var row = el.parentNode.parentNode;
+												this.templates[row.dataset.id].name = el.value.trim() || 'untitled';
+												this.store();
+												el.style.backgroundColor = 'rgb(40, 95, 40)';
+												el.style.transitionDuration = '0s';
+												this.saveVisualCue = setTimeout(function () {
+													el.style.transitionDuration = '.7s';
+													el.style.backgroundColor = 'var(--comfy-input-bg)';
+												}, 15);
+											},
+											onkeypress: (e) => {
+												var el = e.target;
+												clearTimeout(this.saveVisualCue);
+												el.style.transitionDuration = '0s';
+												el.style.backgroundColor = 'var(--comfy-input-bg)';
+											},
+											$: (el) => (nameInput = el),
+										})
+									]
+								),
+								$el(
+									"div",
+									{},
+									[
+										$el("button", {
+											textContent: "Export",
+											style: {
+												fontSize: "12px",
+												fontWeight: "normal",
+											},
+											onclick: (e) => {
+												const json = JSON.stringify({templates: [t]}, 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: (nameInput.value || t.name) + ".json",
+													style: {display: "none"},
+													parent: document.body,
+												});
+												a.click();
+												setTimeout(function () {
+													a.remove();
+													window.URL.revokeObjectURL(url);
+												}, 0);
+											},
+										}),
+										$el("button", {
+											textContent: "Delete",
+											style: {
+												fontSize: "12px",
+												color: "red",
+												fontWeight: "normal",
+											},
+											onclick: (e) => {
+												const item = e.target.parentNode.parentNode;
+												item.parentNode.removeChild(item);
+												this.templates.splice(item.dataset.id*1, 1);
+												this.store();
+												// update the rows index, setTimeout ensures that the list is updated
+												var that = this;
+												setTimeout(function (){
+													that.element.querySelectorAll('.tempateManagerRow').forEach((el,i) => {
+														el.dataset.id = i;
+													});
+												}, 0);
+											},
+										}),
+									]
+								),
+							]
+						)
+					];
+				})
+			)
+		);
+	}
+}
+
+app.registerExtension({
+	name: id,
+	setup() {
+		const manage = new ManageTemplates();
+
+		const clipboardAction = async (cb) => {
+			// We use the clipboard functions but dont want to overwrite the current user clipboard
+			// Restore it after we've run our callback
+			const old = localStorage.getItem("litegrapheditor_clipboard");
+			await cb();
+			localStorage.setItem("litegrapheditor_clipboard", old);
+		};
+
+		const orig = LGraphCanvas.prototype.getCanvasMenuOptions;
+		LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+			const options = orig.apply(this, arguments);
+
+			options.push(null);
+			options.push({
+				content: `Save Selected as Template`,
+				disabled: !Object.keys(app.canvas.selected_nodes || {}).length,
+				callback: () => {
+					const name = prompt("Enter name");
+					if (!name?.trim()) return;
+
+					clipboardAction(() => {
+						app.canvas.copyToClipboard();
+						let data = localStorage.getItem("litegrapheditor_clipboard");
+						data = JSON.parse(data);
+						const nodeIds = Object.keys(app.canvas.selected_nodes);
+						for (let i = 0; i < nodeIds.length; i++) {
+							const node = app.graph.getNodeById(nodeIds[i]);
+							const nodeData = node?.constructor.nodeData;
+							
+							let groupData = GroupNodeHandler.getGroupData(node);
+							if (groupData) {
+								groupData = groupData.nodeData;
+								if (!data.groupNodes) {
+									data.groupNodes = {};
+								}
+								data.groupNodes[nodeData.name] = groupData;
+								data.nodes[i].type = nodeData.name;
+							}
+						}
+
+						manage.templates.push({
+							name,
+							data: JSON.stringify(data),
+						});
+						manage.store();
+					});
+				},
+			});
+
+			// Map each template to a menu item
+			const subItems = manage.templates.map((t) => {
+				return {
+					content: t.name,
+					callback: () => {
+						clipboardAction(async () => {
+							const data = JSON.parse(t.data);
+							await GroupNodeConfig.registerFromWorkflow(data.groupNodes, {});
+							localStorage.setItem("litegrapheditor_clipboard", t.data);
+							app.canvas.pasteFromClipboard();
+						});
+					},
+				};
+			});
+
+			subItems.push(null, {
+				content: "Manage",
+				callback: () => manage.show(),
+			});
+
+			options.push({
+				content: "Node Templates",
+				submenu: {
+					options: subItems,
+				},
+			});
+
+			return options;
+		};
+	},
+});

ComfyUI/web/extensions/core/noteNode.js

@@ -0,0 +1,41 @@
+import {app} from "../../scripts/app.js";
+import {ComfyWidgets} from "../../scripts/widgets.js";
+// Node that add notes to your project
+
+app.registerExtension({
+    name: "Comfy.NoteNode",
+    registerCustomNodes() {
+        class NoteNode {
+            color=LGraphCanvas.node_colors.yellow.color;
+            bgcolor=LGraphCanvas.node_colors.yellow.bgcolor;
+            groupcolor = LGraphCanvas.node_colors.yellow.groupcolor;
+            constructor() {
+                if (!this.properties) {
+                    this.properties = {};
+                    this.properties.text="";
+                }
+
+                ComfyWidgets.STRING(this, "", ["", {default:this.properties.text, multiline: true}], app)
+
+                this.serialize_widgets = true;
+                this.isVirtualNode = true;
+
+            }
+
+
+        }
+
+        // Load default visibility
+
+        LiteGraph.registerNodeType(
+            "Note",
+            Object.assign(NoteNode, {
+                title_mode: LiteGraph.NORMAL_TITLE,
+                title: "Note",
+                collapsable: true,
+            })
+        );
+
+        NoteNode.category = "utils";
+    },
+});

ComfyUI/web/extensions/core/rerouteNode.js

@@ -0,0 +1,274 @@
+import { app } from "../../scripts/app.js";
+import { mergeIfValid, getWidgetConfig, setWidgetConfig } from "./widgetInputs.js";
+
+// Node that allows you to redirect connections for cleaner graphs
+
+app.registerExtension({
+	name: "Comfy.RerouteNode",
+	registerCustomNodes(app) {
+		class RerouteNode {
+			constructor() {
+				if (!this.properties) {
+					this.properties = {};
+				}
+				this.properties.showOutputText = RerouteNode.defaultVisibility;
+				this.properties.horizontal = false;
+
+				this.addInput("", "*");
+				this.addOutput(this.properties.showOutputText ? "*" : "", "*");
+
+				this.onAfterGraphConfigured = function () {
+					requestAnimationFrame(() => {
+						this.onConnectionsChange(LiteGraph.INPUT, null, true, null);
+					});
+				};
+
+				this.onConnectionsChange = function (type, index, connected, link_info) {
+					this.applyOrientation();
+
+					// 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) {
+							const linksToDisconnect = [];
+							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];
+								linksToDisconnect.push(link);
+							}
+							for (const link of linksToDisconnect) {
+								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];
+							if (!link) return;
+							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 ?? null;
+								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 && node.inputs[link?.target_slot] && node.inputs[link.target_slot].type
+											? node.inputs[link.target_slot].type
+											: null;
+									if (inputType && 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];
+
+					let widgetConfig;
+					let targetWidget;
+					let widgetType;
+					// 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();
+						node.applyOrientation();
+
+						for (const l of node.outputs[0].links || []) {
+							const link = app.graph.links[l];
+							if (link) {
+								link.color = color;
+
+								if (app.configuringGraph) continue;
+								const targetNode = app.graph.getNodeById(link.target_id);
+								const targetInput = targetNode.inputs?.[link.target_slot];
+								if (targetInput?.widget) {
+									const config = getWidgetConfig(targetInput);
+									if (!widgetConfig) {
+										widgetConfig = config[1] ?? {};
+										widgetType = config[0];
+									}
+									if (!targetWidget) {
+										targetWidget = targetNode.widgets?.find((w) => w.name === targetInput.widget.name);
+									}
+
+									const merged = mergeIfValid(targetInput, [config[0], widgetConfig]);
+									if (merged.customConfig) {
+										widgetConfig = merged.customConfig;
+									}
+								}
+							}
+						}
+					}
+
+					for (const node of updateNodes) {
+						if (widgetConfig && outputType) {
+							node.inputs[0].widget = { name: "value" };
+							setWidgetConfig(node.inputs[0], [widgetType ?? displayType, widgetConfig], targetWidget);
+						} else {
+							setWidgetConfig(node.inputs[0], null);
+						}
+					}
+
+					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();
+							this.applyOrientation();
+							app.graph.setDirtyCanvas(true, true);
+						},
+					},
+					{
+						content: (RerouteNode.defaultVisibility ? "Hide" : "Show") + " Type By Default",
+						callback: () => {
+							RerouteNode.setDefaultTextVisibility(!RerouteNode.defaultVisibility);
+						},
+					},
+					{
+						// naming is inverted with respect to LiteGraphNode.horizontal
+						// LiteGraphNode.horizontal == true means that
+						// each slot in the inputs and outputs are layed out horizontally,
+						// which is the opposite of the visual orientation of the inputs and outputs as a node
+						content: "Set " + (this.properties.horizontal ? "Horizontal" : "Vertical"),
+						callback: () => {
+							this.properties.horizontal = !this.properties.horizontal;
+							this.applyOrientation();
+						},
+					}
+				);
+			}
+			applyOrientation() {
+				this.horizontal = this.properties.horizontal;
+				if (this.horizontal) {
+					// we correct the input position, because LiteGraphNode.horizontal
+					// doesn't account for title presence
+					// which reroute nodes don't have
+					this.inputs[0].pos = [this.size[0] / 2, 0];
+				} else {
+					delete this.inputs[0].pos;
+				}
+				app.graph.setDirtyCanvas(true, true);
+			}
+
+			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";
+	},
+});

ComfyUI/web/extensions/core/saveImageExtraOutput.js

@@ -0,0 +1,35 @@
+import { app } from "../../scripts/app.js";
+import { applyTextReplacements } from "../../scripts/utils.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;
+			// 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 applyTextReplacements(app, widget.value);
+				};
+
+				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.constructor.type, "string");
+				}
+
+				return r;
+			};
+		}
+	},
+});

ComfyUI/web/extensions/core/simpleTouchSupport.js

@@ -0,0 +1,102 @@
+import { app } from "../../scripts/app.js";
+
+let touchZooming;
+let touchCount = 0;
+
+app.registerExtension({
+	name: "Comfy.SimpleTouchSupport",
+	setup() {
+		let zoomPos;
+		let touchTime;
+		let lastTouch;
+
+		function getMultiTouchPos(e) {
+			return Math.hypot(e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY);
+		}
+
+		app.canvasEl.addEventListener(
+			"touchstart",
+			(e) => {
+				touchCount++;
+				lastTouch = null;
+				if (e.touches?.length === 1) {
+					// Store start time for press+hold for context menu
+					touchTime = new Date();
+					lastTouch = e.touches[0];
+				} else {
+					touchTime = null;
+					if (e.touches?.length === 2) {
+						// Store center pos for zoom
+						zoomPos = getMultiTouchPos(e);
+						app.canvas.pointer_is_down = false;
+					}
+				}
+			},
+			true
+		);
+
+		app.canvasEl.addEventListener("touchend", (e) => {
+			touchZooming = false;
+			touchCount = e.touches?.length ?? touchCount - 1;
+			if (touchTime && !e.touches?.length) {
+				if (new Date() - touchTime > 600) {
+					try {
+						// hack to get litegraph to use this event
+						e.constructor = CustomEvent;
+					} catch (error) {}
+					e.clientX = lastTouch.clientX;
+					e.clientY = lastTouch.clientY;
+
+					app.canvas.pointer_is_down = true;
+					app.canvas._mousedown_callback(e);
+				}
+				touchTime = null;
+			}
+		});
+
+		app.canvasEl.addEventListener(
+			"touchmove",
+			(e) => {
+				touchTime = null;
+				if (e.touches?.length === 2) {
+					app.canvas.pointer_is_down = false;
+					touchZooming = true;
+					LiteGraph.closeAllContextMenus();
+					app.canvas.search_box?.close();
+					const newZoomPos = getMultiTouchPos(e);
+
+					const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+					const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+
+					let scale = app.canvas.ds.scale;
+					const diff = zoomPos - newZoomPos;
+					if (diff > 0.5) {
+						scale *= 1 / 1.07;
+					} else if (diff < -0.5) {
+						scale *= 1.07;
+					}
+					app.canvas.ds.changeScale(scale, [midX, midY]);
+					app.canvas.setDirty(true, true);
+					zoomPos = newZoomPos;
+				}
+			},
+			true
+		);
+	},
+});
+
+const processMouseDown = LGraphCanvas.prototype.processMouseDown;
+LGraphCanvas.prototype.processMouseDown = function (e) {
+	if (touchZooming || touchCount) {
+		return;
+	}
+	return processMouseDown.apply(this, arguments);
+};
+
+const processMouseMove = LGraphCanvas.prototype.processMouseMove;
+LGraphCanvas.prototype.processMouseMove = function (e) {
+	if (touchZooming || touchCount > 1) {
+		return;
+	}
+	return processMouseMove.apply(this, arguments);
+};

ComfyUI/web/extensions/core/slotDefaults.js

@@ -0,0 +1,91 @@
+import { app } from "../../scripts/app.js";
+import { ComfyWidgets } from "../../scripts/widgets.js";
+// Adds defaults for quickly adding nodes with middle click on the input/output
+
+app.registerExtension({
+	name: "Comfy.SlotDefaults",
+	suggestionsNumber: null,
+	init() {
+		LiteGraph.search_filter_enabled = true;
+		LiteGraph.middle_click_slot_add_default_node = true;
+		this.suggestionsNumber = app.ui.settings.addSetting({
+			id: "Comfy.NodeSuggestions.number",
+			name: "Number of nodes suggestions",
+			type: "slider",
+			attrs: {
+				min: 1,
+				max: 100,
+				step: 1,
+			},
+			defaultValue: 5,
+			onChange: (newVal, oldVal) => {
+				this.setDefaults(newVal);
+			}
+		});
+	},
+	slot_types_default_out: {},
+	slot_types_default_in: {},
+	async beforeRegisterNodeDef(nodeType, nodeData, app) {
+				var nodeId = nodeData.name;
+		var inputs = [];
+		inputs = nodeData["input"]["required"]; //only show required inputs to reduce the mess also not logical to create node with optional inputs
+		for (const inputKey in inputs) {
+			var input = (inputs[inputKey]);
+			if (typeof input[0] !== "string") continue;
+
+			var type = input[0]
+			if (type in ComfyWidgets) {
+				var customProperties = input[1]
+				if (!(customProperties?.forceInput)) continue; //ignore widgets that don't force input
+			}
+
+			if (!(type in this.slot_types_default_out)) {
+				this.slot_types_default_out[type] = ["Reroute"];
+			}
+			if (this.slot_types_default_out[type].includes(nodeId)) continue;
+			this.slot_types_default_out[type].push(nodeId);
+
+			// Input types have to be stored as lower case
+			// Store each node that can handle this input type
+			const lowerType = type.toLocaleLowerCase();
+			if (!(lowerType in LiteGraph.registered_slot_in_types)) {
+				LiteGraph.registered_slot_in_types[lowerType] = { nodes: [] };
+			}
+			LiteGraph.registered_slot_in_types[lowerType].nodes.push(nodeType.comfyClass);
+		} 
+
+		var outputs = nodeData["output"];
+		for (const key in outputs) {
+			var type = outputs[key];
+			if (!(type in this.slot_types_default_in)) {
+				this.slot_types_default_in[type] = ["Reroute"];// ["Reroute", "Primitive"];  primitive doesn't always work :'()
+			}
+
+			this.slot_types_default_in[type].push(nodeId);
+
+			// Store each node that can handle this output type
+			if (!(type in LiteGraph.registered_slot_out_types)) {
+				LiteGraph.registered_slot_out_types[type] = { nodes: [] };
+			}
+			LiteGraph.registered_slot_out_types[type].nodes.push(nodeType.comfyClass);
+
+			if(!LiteGraph.slot_types_out.includes(type)) {
+				LiteGraph.slot_types_out.push(type);
+			}
+		}
+		var maxNum = this.suggestionsNumber.value;
+		this.setDefaults(maxNum);
+	},
+	setDefaults(maxNum) {
+
+		LiteGraph.slot_types_default_out = {};
+		LiteGraph.slot_types_default_in = {};
+
+		for (const type in this.slot_types_default_out) {
+			LiteGraph.slot_types_default_out[type] = this.slot_types_default_out[type].slice(0, maxNum);
+		}
+		for (const type in this.slot_types_default_in) {
+			LiteGraph.slot_types_default_in[type] = this.slot_types_default_in[type].slice(0, maxNum);
+		}
+	}
+});

ComfyUI/web/extensions/core/snapToGrid.js

@@ -0,0 +1,171 @@
+import { app } from "../../scripts/app.js";
+
+// Shift + drag/resize to snap to grid
+
+/** Rounds a Vector2 in-place to the current CANVAS_GRID_SIZE. */
+function roundVectorToGrid(vec) {
+	vec[0] = LiteGraph.CANVAS_GRID_SIZE * Math.round(vec[0] / LiteGraph.CANVAS_GRID_SIZE);
+	vec[1] = LiteGraph.CANVAS_GRID_SIZE * Math.round(vec[1] / LiteGraph.CANVAS_GRID_SIZE);
+	return vec;
+}
+
+app.registerExtension({
+	name: "Comfy.SnapToGrid",
+	init() {
+		// Add setting to control grid size
+		app.ui.settings.addSetting({
+			id: "Comfy.SnapToGrid.GridSize",
+			name: "Grid Size",
+			type: "slider",
+			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) {
+					roundVectorToGrid(node.size);
+				}
+				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, y] = roundVectorToGrid([...node.pos]);
+				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);
+		};
+
+		
+		
+		/**
+  		 * The currently moving, selected group only. Set after the `selected_group` has actually started
+		 * moving.
+   		 */
+		let selectedAndMovingGroup = null;
+
+		/**
+  		 * Handles moving a group; tracking when a group has been moved (to show the ghost in `drawGroups`
+     		 * below) as well as handle the last move call from LiteGraph's `processMouseUp`.
+		 */
+		const groupMove = LGraphGroup.prototype.move;
+		LGraphGroup.prototype.move = function(deltax, deltay, ignore_nodes) {
+			const v = groupMove.apply(this, arguments);
+			// When we've started moving, set `selectedAndMovingGroup` as LiteGraph sets `selected_group`
+			// too eagerly and we don't want to behave like we're moving until we get a delta.
+			if (!selectedAndMovingGroup && app.canvas.selected_group === this && (deltax || deltay)) {
+				selectedAndMovingGroup = this;
+			}
+
+			// LiteGraph will call group.move both on mouse-move as well as mouse-up though we only want
+			// to snap on a mouse-up which we can determine by checking if `app.canvas.last_mouse_dragging`
+			// has been set to `false`. Essentially, this check here is the equivilant to calling an
+			// `LGraphGroup.prototype.onNodeMoved` if it had existed.
+			if (app.canvas.last_mouse_dragging === false && app.shiftDown) {
+				// After moving a group (while app.shiftDown), snap all the child nodes and, finally,
+				//  align the group itself.
+				this.recomputeInsideNodes();
+				for (const node of this._nodes) {
+					node.alignToGrid();
+				}
+				LGraphNode.prototype.alignToGrid.apply(this);
+			}
+			return v;
+		};
+
+		/**
+  		 * Handles drawing a group when, snapping the size when one is actively being resized tracking and/or
+     		 * drawing a ghost box when one is actively being moved. This mimics the node snapping behavior for
+		 * both.
+		 */
+		const drawGroups = LGraphCanvas.prototype.drawGroups;
+		LGraphCanvas.prototype.drawGroups = function (canvas, ctx) {
+			if (this.selected_group && app.shiftDown) {
+				if (this.selected_group_resizing) {
+					roundVectorToGrid(this.selected_group.size);
+				} else if (selectedAndMovingGroup) {
+					const [x, y] = roundVectorToGrid([...selectedAndMovingGroup.pos]);
+					const f = ctx.fillStyle;
+					const s = ctx.strokeStyle;
+					ctx.fillStyle = "rgba(100, 100, 100, 0.33)";
+					ctx.strokeStyle = "rgba(100, 100, 100, 0.66)";
+					ctx.rect(x, y, ...selectedAndMovingGroup.size);
+					ctx.fill();
+					ctx.stroke();
+					ctx.fillStyle = f;
+					ctx.strokeStyle = s;
+				}
+			} else if (!this.selected_group) {
+				selectedAndMovingGroup = null;
+			}
+			return drawGroups.apply(this, arguments);
+		};
+
+
+		/** Handles adding a group in a snapping-enabled state. */
+		const onGroupAdd = LGraphCanvas.onGroupAdd;
+		LGraphCanvas.onGroupAdd = function() {
+			const v = onGroupAdd.apply(app.canvas, arguments);
+			if (app.shiftDown) {
+				const lastGroup = app.graph._groups[app.graph._groups.length - 1];
+				if (lastGroup) {
+					roundVectorToGrid(lastGroup.pos);
+					roundVectorToGrid(lastGroup.size);
+				}
+			}
+			return v;
+		};
+	},
+});

ComfyUI/web/extensions/core/uploadAudio.js

@@ -0,0 +1,186 @@
+import { app } from "../../scripts/app.js"
+import { api } from "../../scripts/api.js"
+
+function splitFilePath(path) {
+  const folder_separator = path.lastIndexOf("/")
+  if (folder_separator === -1) {
+    return ["", path]
+  }
+  return [
+    path.substring(0, folder_separator),
+    path.substring(folder_separator + 1)
+  ]
+}
+
+function getResourceURL(subfolder, filename, type = "input") {
+  const params = [
+    "filename=" + encodeURIComponent(filename),
+    "type=" + type,
+    "subfolder=" + subfolder,
+    app.getRandParam().substring(1)
+  ].join("&")
+
+  return `/view?${params}`
+}
+
+async function uploadFile(
+  audioWidget,
+  audioUIWidget,
+  file,
+  updateNode,
+  pasted = false
+) {
+  try {
+    // Wrap file in formdata so it includes filename
+    const body = new FormData()
+    body.append("image", file)
+    if (pasted) body.append("subfolder", "pasted")
+    const resp = await api.fetchApi("/upload/image", {
+      method: "POST",
+      body
+    })
+
+    if (resp.status === 200) {
+      const data = await resp.json()
+      // Add the file to the dropdown list and update the widget value
+      let path = data.name
+      if (data.subfolder) path = data.subfolder + "/" + path
+
+      if (!audioWidget.options.values.includes(path)) {
+        audioWidget.options.values.push(path)
+      }
+
+      if (updateNode) {
+        audioUIWidget.element.src = api.apiURL(
+          getResourceURL(...splitFilePath(path))
+        )
+        audioWidget.value = path
+      }
+    } else {
+      alert(resp.status + " - " + resp.statusText)
+    }
+  } catch (error) {
+    alert(error)
+  }
+}
+
+// AudioWidget MUST be registered first, as AUDIOUPLOAD depends on AUDIO_UI to be
+// present.
+app.registerExtension({
+  name: "Comfy.AudioWidget",
+  async beforeRegisterNodeDef(nodeType, nodeData) {
+    if (["LoadAudio", "SaveAudio", "PreviewAudio"].includes(nodeType.comfyClass)) {
+      nodeData.input.required.audioUI = ["AUDIO_UI"]
+    }
+  },
+  getCustomWidgets() {
+    return {
+      AUDIO_UI(node, inputName) {
+        const audio = document.createElement("audio")
+        audio.controls = true
+        audio.classList.add("comfy-audio")
+        audio.setAttribute("name", "media")
+
+        const audioUIWidget = node.addDOMWidget(
+          inputName,
+          /* name=*/ "audioUI",
+          audio
+        )
+        // @ts-ignore
+        // TODO: Sort out the DOMWidget type.
+        audioUIWidget.serialize = false
+
+        const isOutputNode = node.constructor.nodeData.output_node
+        if (isOutputNode) {
+          // Hide the audio widget when there is no audio initially.
+          audioUIWidget.element.classList.add("empty-audio-widget")
+          // Populate the audio widget UI on node execution.
+          const onExecuted = node.onExecuted
+          node.onExecuted = function(message) {
+            onExecuted?.apply(this, arguments)
+            const audios = message.audio
+            if (!audios) return
+            const audio = audios[0]
+            audioUIWidget.element.src = api.apiURL(
+              getResourceURL(audio.subfolder, audio.filename, audio.type)
+            )
+            audioUIWidget.element.classList.remove("empty-audio-widget")
+          }
+        }
+        return { widget: audioUIWidget }
+      }
+    }
+  },
+  onNodeOutputsUpdated(nodeOutputs) {
+    for (const [nodeId, output] of Object.entries(nodeOutputs)) {
+      const node = app.graph.getNodeById(Number.parseInt(nodeId));
+      if ("audio" in output) {
+        const audioUIWidget = node.widgets.find((w) => w.name === "audioUI");
+        const audio = output.audio[0];
+        audioUIWidget.element.src = api.apiURL(getResourceURL(audio.subfolder, audio.filename, audio.type));
+        audioUIWidget.element.classList.remove("empty-audio-widget");
+      }
+    }
+  },
+})
+
+app.registerExtension({
+  name: "Comfy.UploadAudio",
+  async beforeRegisterNodeDef(nodeType, nodeData) {
+    if (nodeData?.input?.required?.audio?.[1]?.audio_upload === true) {
+      nodeData.input.required.upload = ["AUDIOUPLOAD"]
+    }
+  },
+  getCustomWidgets() {
+    return {
+      AUDIOUPLOAD(node, inputName) {
+        // The widget that allows user to select file.
+        const audioWidget = node.widgets.find(w => w.name === "audio")
+        const audioUIWidget = node.widgets.find(w => w.name === "audioUI")
+
+        const onAudioWidgetUpdate = () => {
+          audioUIWidget.element.src = api.apiURL(
+            getResourceURL(...splitFilePath(audioWidget.value))
+          )
+        }
+        // Initially load default audio file to audioUIWidget.
+        if (audioWidget.value) {
+          onAudioWidgetUpdate()
+        }
+        audioWidget.callback = onAudioWidgetUpdate
+
+        // Load saved audio file widget values if restoring from workflow
+        const onGraphConfigured = node.onGraphConfigured;
+        node.onGraphConfigured = function() {
+          onGraphConfigured?.apply(this, arguments)
+          if (audioWidget.value) {
+            onAudioWidgetUpdate()
+          }
+        }
+
+        const fileInput = document.createElement("input")
+        fileInput.type = "file"
+        fileInput.accept = "audio/*"
+        fileInput.style.display = "none"
+        fileInput.onchange = () => {
+          if (fileInput.files.length) {
+            uploadFile(audioWidget, audioUIWidget, fileInput.files[0], true)
+          }
+        }
+        // The widget to pop up the upload dialog.
+        const uploadWidget = node.addWidget(
+          "button",
+          inputName,
+          /* value=*/ "",
+          () => {
+            fileInput.click()
+          }
+        )
+        uploadWidget.label = "choose file to upload"
+        uploadWidget.serialize = false
+
+        return { widget: uploadWidget }
+      }
+    }
+  }
+})

ComfyUI/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?.input?.required?.image?.[1]?.image_upload === true) {
+			nodeData.input.required.upload = ["IMAGEUPLOAD"];
+		}
+	},
+});

ComfyUI/web/extensions/core/webcamCapture.js

@@ -0,0 +1,126 @@
+import { app } from "../../scripts/app.js";
+import { api } from "../../scripts/api.js";
+
+const WEBCAM_READY = Symbol();
+
+app.registerExtension({
+	name: "Comfy.WebcamCapture",
+	getCustomWidgets(app) {
+		return {
+			WEBCAM(node, inputName) {
+				let res;
+				node[WEBCAM_READY] = new Promise((resolve) => (res = resolve));
+
+				const container = document.createElement("div");
+				container.style.background = "rgba(0,0,0,0.25)";
+				container.style.textAlign = "center";
+
+				const video = document.createElement("video");
+				video.style.height = video.style.width = "100%";
+
+				const loadVideo = async () => {
+					try {
+						const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
+						container.replaceChildren(video);
+
+						setTimeout(() => res(video), 500); // Fallback as loadedmetadata doesnt fire sometimes?
+						video.addEventListener("loadedmetadata", () => res(video), false);
+						video.srcObject = stream;
+						video.play();
+					} catch (error) {
+						const label = document.createElement("div");
+						label.style.color = "red";
+						label.style.overflow = "auto";
+						label.style.maxHeight = "100%";
+						label.style.whiteSpace = "pre-wrap";
+
+						if (window.isSecureContext) {
+							label.textContent = "Unable to load webcam, please ensure access is granted:\n" + error.message;
+						} else {
+							label.textContent = "Unable to load webcam. A secure context is required, if you are not accessing ComfyUI on localhost (127.0.0.1) you will have to enable TLS (https)\n\n" + error.message;
+						}
+
+						container.replaceChildren(label);
+					}
+				};
+
+				loadVideo();
+
+				return { widget: node.addDOMWidget(inputName, "WEBCAM", container) };
+			},
+		};
+	},
+	nodeCreated(node) {
+		if ((node.type, node.constructor.comfyClass !== "WebcamCapture")) return;
+
+		let video;
+		const camera = node.widgets.find((w) => w.name === "image");
+		const w = node.widgets.find((w) => w.name === "width");
+		const h = node.widgets.find((w) => w.name === "height");
+		const captureOnQueue = node.widgets.find((w) => w.name === "capture_on_queue");
+
+		const canvas = document.createElement("canvas");
+
+		const capture = () => {
+			canvas.width = w.value;
+			canvas.height = h.value;
+			const ctx = canvas.getContext("2d");
+			ctx.drawImage(video, 0, 0, w.value, h.value);
+			const data = canvas.toDataURL("image/png");
+
+			const img = new Image();
+			img.onload = () => {
+				node.imgs = [img];
+				app.graph.setDirtyCanvas(true);
+				requestAnimationFrame(() => {
+					node.setSizeForImage?.();
+				});
+			};
+			img.src = data;
+		};
+
+		const btn = node.addWidget("button", "waiting for camera...", "capture", capture);
+		btn.disabled = true;
+		btn.serializeValue = () => undefined;
+
+		camera.serializeValue = async () => {
+			if (captureOnQueue.value) {
+				capture();
+			} else if (!node.imgs?.length) {
+				const err = `No webcam image captured`;
+				alert(err);
+				throw new Error(err);
+			}
+
+			// Upload image to temp storage
+			const blob = await new Promise((r) => canvas.toBlob(r));
+			const name = `${+new Date()}.png`;
+			const file = new File([blob], name);
+			const body = new FormData();
+			body.append("image", file);
+			body.append("subfolder", "webcam");
+			body.append("type", "temp");
+			const resp = await api.fetchApi("/upload/image", {
+				method: "POST",
+				body,
+			});
+			if (resp.status !== 200) {
+				const err = `Error uploading camera image: ${resp.status} - ${resp.statusText}`;
+				alert(err);
+				throw new Error(err);
+			}
+			return `webcam/${name} [temp]`;
+		};
+
+		node[WEBCAM_READY].then((v) => {
+			video = v;
+			// If width isnt specified then use video output resolution
+			if (!w.value) {
+				w.value = video.videoWidth || 640;
+				h.value = video.videoHeight || 480; 
+			}
+			btn.disabled = false;
+			btn.label = "capture";
+		});
+	},
+});

ComfyUI/web/extensions/core/widgetInputs.js

@@ -0,0 +1,800 @@
+import { ComfyWidgets, addValueControlWidgets } from "../../scripts/widgets.js";
+import { app } from "../../scripts/app.js";
+import { applyTextReplacements } from "../../scripts/utils.js";
+
+const CONVERTED_TYPE = "converted-widget";
+const VALID_TYPES = ["STRING", "combo", "number", "BOOLEAN"];
+const CONFIG = Symbol();
+const GET_CONFIG = Symbol();
+const TARGET = Symbol(); // Used for reroutes to specify the real target widget
+
+export function getWidgetConfig(slot) {
+	return slot.widget[CONFIG] ?? slot.widget[GET_CONFIG]();
+}
+
+function getConfig(widgetName) {
+	const { nodeData } = this.constructor;
+	return nodeData?.input?.required[widgetName] ?? nodeData?.input?.optional?.[widgetName];
+}
+
+function isConvertableWidget(widget, config) {
+	return (VALID_TYPES.includes(widget.type) || VALID_TYPES.includes(config[0])) && !widget.options?.forceInput;
+}
+
+function hideWidget(node, widget, suffix = "") {
+	if (widget.type?.startsWith(CONVERTED_TYPE)) return;
+	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
+		if (!node.inputs) {
+			return undefined;
+		}
+		let node_input = node.inputs.find((i) => i.widget?.name === widget.name);
+
+		if (!node_input || !node_input.link) {
+			return undefined;
+		}
+		return widget.origSerializeValue ? widget.origSerializeValue() : widget.value;
+	};
+
+	// Hide any linked widgets, e.g. seed+seedControl
+	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+seedControl
+	if (widget.linkedWidgets) {
+		for (const w of widget.linkedWidgets) {
+			showWidget(w);
+		}
+	}
+}
+
+function convertToInput(node, widget, config) {
+	hideWidget(node, widget);
+
+	const { type } = getWidgetType(config);
+
+	// Add input and store widget config for creating on primitive node
+	const sz = node.size;
+	node.addInput(widget.name, type, {
+		widget: { name: widget.name, [GET_CONFIG]: () => config },
+	});
+
+	for (const widget of node.widgets) {
+		widget.last_y += LiteGraph.NODE_SLOT_HEIGHT;
+	}
+
+	// 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));
+
+	for (const widget of node.widgets) {
+		widget.last_y -= LiteGraph.NODE_SLOT_HEIGHT;
+	}
+
+	// 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];
+	if (type instanceof Array) {
+		type = "COMBO";
+	}
+	return { type };
+}
+
+function isValidCombo(combo, obj) {
+	// New input isnt a combo
+	if (!(obj instanceof Array)) {
+		console.log(`connection rejected: tried to connect combo to ${obj}`);
+		return false;
+	}
+	// New imput combo has a different size
+	if (combo.length !== obj.length) {
+		console.log(`connection rejected: combo lists dont match`);
+		return false;
+	}
+	// New input combo has different elements
+	if (combo.find((v, i) => obj[i] !== v)) {
+		console.log(`connection rejected: combo lists dont match`);
+		return false;
+	}
+
+	return true;
+}
+
+export function setWidgetConfig(slot, config, target) {
+	if (!slot.widget) return;
+	if (config) {
+		slot.widget[GET_CONFIG] = () => config;
+		slot.widget[TARGET] = target;
+	} else {
+		delete slot.widget;
+	}
+
+	if (slot.link) {
+		const link = app.graph.links[slot.link];
+		if (link) {
+			const originNode = app.graph.getNodeById(link.origin_id);
+			if (originNode.type === "PrimitiveNode") {
+				if (config) {
+					originNode.recreateWidget();
+				} else if(!app.configuringGraph) {
+					originNode.disconnectOutput(0);
+					originNode.onLastDisconnect();
+				}
+			}
+		}
+	}
+}
+
+export function mergeIfValid(output, config2, forceUpdate, recreateWidget, config1) {
+	if (!config1) {
+		config1 = output.widget[CONFIG] ?? output.widget[GET_CONFIG]();
+	}
+
+	if (config1[0] instanceof Array) {
+		if (!isValidCombo(config1[0], config2[0])) return false;
+	} else if (config1[0] !== config2[0]) {
+		// Types dont match
+		console.log(`connection rejected: types dont match`, config1[0], config2[0]);
+		return false;
+	}
+
+	const keys = new Set([...Object.keys(config1[1] ?? {}), ...Object.keys(config2[1] ?? {})]);
+
+	let customConfig;
+	const getCustomConfig = () => {
+		if (!customConfig) {
+			if (typeof structuredClone === "undefined") {
+				customConfig = JSON.parse(JSON.stringify(config1[1] ?? {}));
+			} else {
+				customConfig = structuredClone(config1[1] ?? {});
+			}
+		}
+		return customConfig;
+	};
+
+	const isNumber = config1[0] === "INT" || config1[0] === "FLOAT";
+	for (const k of keys.values()) {
+		if (k !== "default" && k !== "forceInput" && k !== "defaultInput" && k !== "control_after_generate" && k !== "multiline") {
+			let v1 = config1[1][k];
+			let v2 = config2[1]?.[k];
+
+			if (v1 === v2 || (!v1 && !v2)) continue;
+
+			if (isNumber) {
+				if (k === "min") {
+					const theirMax = config2[1]?.["max"];
+					if (theirMax != null && v1 > theirMax) {
+						console.log("connection rejected: min > max", v1, theirMax);
+						return false;
+					}
+					getCustomConfig()[k] = v1 == null ? v2 : v2 == null ? v1 : Math.max(v1, v2);
+					continue;
+				} else if (k === "max") {
+					const theirMin = config2[1]?.["min"];
+					if (theirMin != null && v1 < theirMin) {
+						console.log("connection rejected: max < min", v1, theirMin);
+						return false;
+					}
+					getCustomConfig()[k] = v1 == null ? v2 : v2 == null ? v1 : Math.min(v1, v2);
+					continue;
+				} else if (k === "step") {
+					let step;
+					if (v1 == null) {
+						// No current step
+						step = v2;
+					} else if (v2 == null) {
+						// No new step
+						step = v1;
+					} else {
+						if (v1 < v2) {
+							// Ensure v1 is larger for the mod
+							const a = v2;
+							v2 = v1;
+							v1 = a;
+						}
+						if (v1 % v2) {
+							console.log("connection rejected: steps not divisible", "current:", v1, "new:", v2);
+							return false;
+						}
+
+						step = v1;
+					}
+
+					getCustomConfig()[k] = step;
+					continue;
+				}
+			}
+
+			console.log(`connection rejected: config ${k} values dont match`, v1, v2);
+			return false;
+		}
+	}
+
+	if (customConfig || forceUpdate) {
+		if (customConfig) {
+			output.widget[CONFIG] = [config1[0], customConfig];
+		}
+
+		const widget = recreateWidget?.call(this);
+		// When deleting a node this can be null
+		if (widget) {
+			const min = widget.options.min;
+			const max = widget.options.max;
+			if (min != null && widget.value < min) widget.value = min;
+			if (max != null && widget.value > max) widget.value = max;
+			widget.callback(widget.value);
+		}
+	}
+
+	return { customConfig };
+}
+
+let useConversionSubmenusSetting;
+app.registerExtension({
+	name: "Comfy.WidgetInputs",
+	init() {
+		useConversionSubmenusSetting = app.ui.settings.addSetting({
+			id: "Comfy.NodeInputConversionSubmenus",
+			name: "Node widget/input conversion sub-menus",
+			tooltip: "In the node context menu, place the entries that convert between input/widget in sub-menus.",
+			type: "boolean",
+			defaultValue: true,
+		});
+	},
+	async beforeRegisterNodeDef(nodeType, nodeData, app) {
+		// Add menu options to conver to/from widgets
+		const origGetExtraMenuOptions = nodeType.prototype.getExtraMenuOptions;
+		nodeType.prototype.convertWidgetToInput = function (widget) {
+			const config = getConfig.call(this, widget.name) ?? [widget.type, widget.options || {}];
+			if (!isConvertableWidget(widget, config)) return false;
+			convertToInput(this, widget, config);
+			return true;
+		};
+		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.options?.forceInput) {
+						continue;
+					}
+					if (w.type === CONVERTED_TYPE) {
+						toWidget.push({
+							content: `Convert ${w.name} to widget`,
+							callback: () => convertToWidget(this, w),
+						});
+					} else {
+						const config = getConfig.call(this, w.name) ?? [w.type, w.options || {}];
+						if (isConvertableWidget(w, config)) {
+							toInput.push({
+								content: `Convert ${w.name} to input`,
+								callback: () => convertToInput(this, w, config),
+							});
+						}
+					}
+				}
+				
+				//Convert.. main menu
+				if (toInput.length) {
+					if (useConversionSubmenusSetting.value) {
+						options.push({
+							content: "Convert Widget to Input",
+							submenu: {
+								options: toInput,
+							},
+						});
+					} else {
+						options.push(...toInput, null);
+					}
+				}
+				if (toWidget.length) {
+					if (useConversionSubmenusSetting.value) {
+						options.push({
+							content: "Convert Input to Widget",
+							submenu: {
+								options: toWidget,
+							},
+						});
+					} else {
+						options.push(...toWidget, null);
+					}
+				}
+			}
+
+			return r;
+		};
+
+		nodeType.prototype.onGraphConfigured = function () {
+			if (!this.inputs) return;
+
+			for (const input of this.inputs) {
+				if (input.widget) {
+					if (!input.widget[GET_CONFIG]) {
+						input.widget[GET_CONFIG] = () => getConfig.call(this, input.widget.name);
+					}
+
+					// Cleanup old widget config
+					if (input.widget.config) {
+						if (input.widget.config[0] instanceof Array) {
+							// If we are an old converted combo then replace the input type and the stored link data
+							input.type = "COMBO";
+
+							const link = app.graph.links[input.link];
+							if (link) {
+								link.type = input.type;
+							}
+						}
+						delete input.widget.config;
+					}
+
+					const w = this.widgets.find((w) => w.name === input.widget.name);
+					if (w) {
+						hideWidget(this, w);
+					} else {
+						convertToWidget(this, input);
+					}
+				}
+			}
+		};
+
+		const origOnNodeCreated = nodeType.prototype.onNodeCreated;
+		nodeType.prototype.onNodeCreated = function () {
+			const r = origOnNodeCreated ? origOnNodeCreated.apply(this) : undefined;
+
+			// When node is created, convert any force/default inputs
+			if (!app.configuringGraph && this.widgets) {
+				for (const w of this.widgets) {
+					if (w?.options?.forceInput || w?.options?.defaultInput) {
+						const config = getConfig.call(this, w.name) ?? [w.type, w.options || {}];
+						convertToInput(this, w, config);
+					}
+				}
+			}
+
+			return r;
+		};
+
+		const origOnConfigure = nodeType.prototype.onConfigure;
+		nodeType.prototype.onConfigure = function () {
+			const r = origOnConfigure ? origOnConfigure.apply(this, arguments) : undefined;
+			if (!app.configuringGraph && this.inputs) {
+				// On copy + paste of nodes, ensure that widget configs are set up
+				for (const input of this.inputs) {
+					if (input.widget && !input.widget[GET_CONFIG]) {
+						input.widget[GET_CONFIG] = () => getConfig.call(this, input.widget.name);
+						const w = this.widgets.find((w) => w.name === input.widget.name);
+						if (w) {
+							hideWidget(this, w);
+						}
+					}
+				}
+			}
+
+			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]) {
+				// Not a widget input or already handled input
+				if (!(input.type in ComfyWidgets) && !(input.widget[GET_CONFIG]?.()?.[0] instanceof Array)) {
+					return r; //also Not a ComfyWidgets input or combo (do nothing)
+				}
+			}
+
+			// Create a primitive node
+			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;
+		};
+
+		// Prevent connecting COMBO lists to converted inputs that dont match types
+		const onConnectInput = nodeType.prototype.onConnectInput;
+		nodeType.prototype.onConnectInput = function (targetSlot, type, output, originNode, originSlot) {
+			const v = onConnectInput?.(this, arguments);
+			// Not a combo, ignore
+			if (type !== "COMBO") return v;
+			// Primitive output, allow that to handle
+			if (originNode.outputs[originSlot].widget) return v;
+
+			// Ensure target is also a combo
+			const targetCombo = this.inputs[targetSlot].widget?.[GET_CONFIG]?.()?.[0];
+			if (!targetCombo || !(targetCombo instanceof Array)) return v;
+
+			// Check they match
+			const originConfig = originNode.constructor?.nodeData?.output?.[originSlot];
+			if (!originConfig || !isValidCombo(targetCombo, originConfig)) {
+				return false;
+			}
+
+			return v;
+		};
+	},
+	registerCustomNodes() {
+		const replacePropertyName = "Run widget replace on values";
+		class PrimitiveNode {
+			constructor() {
+				this.addOutput("connect to widget input", "*");
+				this.serialize_widgets = true;
+				this.isVirtualNode = true;
+
+				if (!this.properties || !(replacePropertyName in this.properties)) {
+					this.addProperty(replacePropertyName, false, "boolean");
+				}
+			}
+
+			applyToGraph(extraLinks = []) {
+				if (!this.outputs[0].links?.length) return;
+
+				function get_links(node) {
+					let links = [];
+					for (const l of node.outputs[0].links) {
+						const linkInfo = app.graph.links[l];
+						const n = node.graph.getNodeById(linkInfo.target_id);
+						if (n.type == "Reroute") {
+							links = links.concat(get_links(n));
+						} else {
+							links.push(l);
+						}
+					}
+					return links;
+				}
+
+				let links = [...get_links(this).map((l) => app.graph.links[l]), ...extraLinks];
+				let v = this.widgets?.[0].value;
+				if(v && this.properties[replacePropertyName]) {
+					v = applyTextReplacements(app, v);
+				}
+
+				// For each output link copy our value over the original widget value
+				for (const linkInfo of links) {
+					const node = this.graph.getNodeById(linkInfo.target_id);
+					const input = node.inputs[linkInfo.target_slot];
+					let widget;
+					if (input.widget[TARGET]) {
+						widget = input.widget[TARGET];
+					} else {
+						const widgetName = input.widget.name;
+						if (widgetName) {
+							widget = node.widgets.find((w) => w.name === widgetName);
+						}
+					}
+
+					if (widget) {
+						widget.value = v;
+						if (widget.callback) {
+							widget.callback(widget.value, app.canvas, node, app.canvas.graph_mouse, {});
+						}
+					}
+				}
+			}
+
+			refreshComboInNode() {
+				const widget = this.widgets?.[0];
+				if (widget?.type === "combo") {
+					widget.options.values = this.outputs[0].widget[GET_CONFIG]()[0];
+
+					if (!widget.options.values.includes(widget.value)) {
+						widget.value = widget.options.values[0];
+						widget.callback(widget.value);
+					}
+				}
+			}
+
+			onAfterGraphConfigured() {
+				if (this.outputs[0].links?.length && !this.widgets?.length) {
+					if (!this.#onFirstConnection()) return;
+
+					// Populate widget values from config data
+					if (this.widgets) {
+						for (let i = 0; i < this.widgets_values.length; i++) {
+							const w = this.widgets[i];
+							if (w) {
+								w.value = this.widgets_values[i];
+							}
+						}
+					}
+
+					// Merge values if required
+					this.#mergeWidgetConfig();
+				}
+			}
+
+			onConnectionsChange(_, index, connected) {
+				if (app.configuringGraph) {
+					// Dont run while the graph is still setting up
+					return;
+				}
+
+				const links = this.outputs[0].links;
+				if (connected) {
+					if (links?.length && !this.widgets?.length) {
+						this.#onFirstConnection();
+					}
+				} else {
+					// We may have removed a link that caused the constraints to change
+					this.#mergeWidgetConfig();
+
+					if (!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) {
+					if (!(input.type in ComfyWidgets)) return false;
+				}
+
+				if (this.outputs[slot].links?.length) {
+					const valid = this.#isValidConnection(input);
+					if (valid) {
+						// On connect of additional outputs, copy our value to their widget
+						this.applyToGraph([{ target_id: target_node.id, target_slot }]);
+					}
+					return valid;
+				}
+			}
+
+			#onFirstConnection(recreating) {
+				// First connection can fire before the graph is ready on initial load so random things can be missing
+				if (!this.outputs[0].links) {
+					this.onLastDisconnect();
+					return;
+				}
+				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;
+
+				let widget;
+				if (!input.widget) {
+					if (!(input.type in ComfyWidgets)) return;
+					widget = { name: input.name, [GET_CONFIG]: () => [input.type, {}] }; //fake widget
+				} else {
+					widget = input.widget;
+				}
+
+				const config = widget[GET_CONFIG]?.();
+				if (!config) return;
+
+				const { type } = getWidgetType(config);
+				// Update our output to restrict to the widget type
+				this.outputs[0].type = type;
+				this.outputs[0].name = type;
+				this.outputs[0].widget = widget;
+
+				this.#createWidget(widget[CONFIG] ?? config, theirNode, widget.name, recreating, widget[TARGET]);
+			}
+
+			#createWidget(inputData, node, widgetName, recreating, targetWidget) {
+				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 (targetWidget) {
+					widget.value = targetWidget.value;
+				} else if (node?.widgets && widget) {
+					const theirWidget = node.widgets.find((w) => w.name === widgetName);
+					if (theirWidget) {
+						widget.value = theirWidget.value;
+					}
+				}
+
+				if (!inputData?.[1]?.control_after_generate && (widget.type === "number" || widget.type === "combo")) {
+					let control_value = this.widgets_values?.[1];
+					if (!control_value) {
+						control_value = "fixed";
+					}
+					addValueControlWidgets(this, widget, control_value, undefined, inputData);
+					let filter = this.widgets_values?.[2];
+					if (filter && this.widgets.length === 3) {
+						this.widgets[2].value = filter;
+					}
+				}
+
+				// Restore any saved control values
+				const controlValues = this.controlValues;
+				if(this.lastType === this.widgets[0].type && controlValues?.length === this.widgets.length - 1) {
+					for(let i = 0; i < controlValues.length; i++) {
+						this.widgets[i + 1].value = controlValues[i];
+					}
+				}
+
+				// 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;
+				};
+
+				if (!recreating) {
+					// 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);
+						}
+					});
+				}
+			}
+
+			recreateWidget() {
+				const values = this.widgets?.map((w) => w.value);
+				this.#removeWidgets();
+				this.#onFirstConnection(true);
+				if (values?.length) {
+					for (let i = 0; i < this.widgets?.length; i++) this.widgets[i].value = values[i];
+				}
+				return this.widgets?.[0];
+			}
+
+			#mergeWidgetConfig() {
+				// Merge widget configs if the node has multiple outputs
+				const output = this.outputs[0];
+				const links = output.links;
+
+				const hasConfig = !!output.widget[CONFIG];
+				if (hasConfig) {
+					delete output.widget[CONFIG];
+				}
+
+				if (links?.length < 2 && hasConfig) {
+					// Copy the widget options from the source
+					if (links.length) {
+						this.recreateWidget();
+					}
+
+					return;
+				}
+
+				const config1 = output.widget[GET_CONFIG]();
+				const isNumber = config1[0] === "INT" || config1[0] === "FLOAT";
+				if (!isNumber) return;
+
+				for (const linkId of links) {
+					const link = app.graph.links[linkId];
+					if (!link) continue; // Can be null when removing a node
+
+					const theirNode = app.graph.getNodeById(link.target_id);
+					const theirInput = theirNode.inputs[link.target_slot];
+
+					// Call is valid connection so it can merge the configs when validating
+					this.#isValidConnection(theirInput, hasConfig);
+				}
+			}
+
+			#isValidConnection(input, forceUpdate) {
+				// Only allow connections where the configs match
+				const output = this.outputs[0];
+				const config2 = input.widget[GET_CONFIG]();
+				return !!mergeIfValid.call(this, output, config2, forceUpdate, this.recreateWidget);
+			}
+
+			#removeWidgets() {
+				if (this.widgets) {
+					// Allow widgets to cleanup
+					for (const w of this.widgets) {
+						if (w.onRemove) {
+							w.onRemove();
+						}
+					}
+
+					// Temporarily store the current values in case the node is being recreated
+					// e.g. by group node conversion
+					this.controlValues = [];
+					this.lastType = this.widgets[0]?.type;
+					for(let i = 1; i < this.widgets.length; i++) {
+						this.controlValues.push(this.widgets[i].value);
+					}
+					setTimeout(() => { delete this.lastType; delete this.controlValues }, 15);
+					this.widgets.length = 0;
+				}
+			}
+
+			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;
+
+				this.#removeWidgets();
+			}
+		}
+
+		LiteGraph.registerNodeType(
+			"PrimitiveNode",
+			Object.assign(PrimitiveNode, {
+				title: "Primitive",
+			})
+		);
+		PrimitiveNode.category = "utils";
+	},
+});

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

ComfyUI/web/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>ComfyUI</title>
+		<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="./lib/materialdesignicons.min.css" />
+		<link rel="stylesheet" type="text/css" href="./style.css" />
+		<link rel="stylesheet" type="text/css" href="./user.css" />
+		<script type="text/javascript" src="./lib/litegraph.core.js"></script>
+		<script type="text/javascript" src="./lib/litegraph.extensions.js" defer></script>
+		<script type="module">
+			import { app } from "./scripts/app.js";
+			await app.setup();
+			window.app = app;
+			window.graph = app.graph;
+		</script>
+	</head>
+	<body class="litegraph">
+		<div id="comfy-user-selection" class="comfy-user-selection" style="display: none;">
+			<main class="comfy-user-selection-inner">
+				<h1>ComfyUI</h1>
+				<form>
+					<section>
+						<label>New user:
+							<input placeholder="Enter a username" />
+						</label>
+					</section>
+					<div class="comfy-user-existing">
+						<span class="or-separator">OR</span>
+						<section>
+							<label>
+								Existing user:
+								<select>
+									<option hidden disabled selected value> Select a user </option>
+								</select>
+							</label>
+						</section>
+					</div>
+					<footer>
+						<span class="comfy-user-error">&nbsp;</span>
+						<button class="comfy-btn comfy-user-button-next">Next</button>
+					</footer>
+				</form>
+			</main>
+		</div>
+	</body>
+</html>

ComfyUI/web/jsconfig.json

@@ -0,0 +1,12 @@
+{
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"/*": ["./*"]
+		},
+		"lib": ["DOM", "ES2022", "DOM.Iterable"],
+		"target": "ES2015",
+		"module": "es2020"
+	},
+	"include": ["."]
+}

ComfyUI/web/lib/litegraph.css

@@ -0,0 +1,693 @@
+/* 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;
+    max-width: 300px;
+}
+
+.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;
+}
+
+.litegraph.lite-search-item-type {
+    display: inline-block;
+    background: rgba(0,0,0,0.2);
+    margin-left: 5px;
+    font-size: 14px;
+    padding: 2px 5px;
+    position: relative;
+    top: -2px;
+    opacity: 0.8;
+    border-radius: 4px;
+ }
+
+/* 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;
+}
+  

ComfyUI/web/lib/litegraph.extensions.js

@@ -0,0 +1,21 @@
+/**
+ * Changes the background color of the canvas.
+ *
+ * @method updateBackground
+ * @param {image} String
+ * @param {clearBackgroundColor} String
+ * @
+ */
+LGraphCanvas.prototype.updateBackground = function (image, clearBackgroundColor) {
+	this._bg_img = new Image();
+	this._bg_img.name = image;
+	this._bg_img.src = image;
+	this._bg_img.onload = () => {
+		this.draw(true, true);
+	};
+	this.background_image = image;
+
+	this.clear_background = true;
+	this.clear_background_color = clearBackgroundColor;
+	this._pattern = null
+}

ComfyUI/web/scripts/api.js

@@ -0,0 +1,482 @@
+class ComfyApi extends EventTarget {
+	#registered = new Set();
+
+	constructor() {
+		super();
+		this.api_host = location.host;
+		this.api_base = location.pathname.split('/').slice(0, -1).join('/');
+		this.initialClientId = sessionStorage.getItem("clientId");
+	}
+
+	apiURL(route) {
+		return this.api_base + route;
+	}
+
+	fetchApi(route, options) {
+		if (!options) {
+			options = {};
+		}
+		if (!options.headers) {
+			options.headers = {};
+		}
+		options.headers["Comfy-User"] = this.user;
+		return fetch(this.apiURL(route), options);
+	}
+
+	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 this.fetchApi("/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 = window.name;
+		if (existingSession) {
+			existingSession = "?clientId=" + existingSession;
+		}
+		this.socket = new WebSocket(
+			`ws${window.location.protocol === "https:" ? "s" : ""}://${this.api_host}${this.api_base}/ws${existingSession}`
+		);
+		this.socket.binaryType = "arraybuffer";
+
+		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 {
+				if (event.data instanceof ArrayBuffer) {
+					const view = new DataView(event.data);
+					const eventType = view.getUint32(0);
+					const buffer = event.data.slice(4);
+					switch (eventType) {
+					case 1:
+						const view2 = new DataView(event.data);
+						const imageType = view2.getUint32(0)
+						let imageMime
+						switch (imageType) {
+							case 1:
+							default:
+								imageMime = "image/jpeg";
+								break;
+							case 2:
+								imageMime = "image/png"
+						}
+						const imageBlob = new Blob([buffer.slice(4)], { type: imageMime });
+						this.dispatchEvent(new CustomEvent("b_preview", { detail: imageBlob }));
+						break;
+					default:
+						throw new Error(`Unknown binary websocket message of type ${eventType}`);
+					}
+				}
+				else {
+				    const msg = JSON.parse(event.data);
+				    switch (msg.type) {
+					    case "status":
+						    if (msg.data.sid) {
+							    this.clientId = msg.data.sid;
+							    window.name = this.clientId; // use window name so it isnt reused when duplicating tabs
+								sessionStorage.setItem("clientId", this.clientId); // store in session storage so duplicate tab can load correct workflow
+						    }
+						    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;
+					    case "execution_start":
+						    this.dispatchEvent(new CustomEvent("execution_start", { detail: msg.data }));
+						    break;
+					    case "execution_success":
+						    this.dispatchEvent(new CustomEvent("execution_success", { detail: msg.data }));
+						    break;
+					    case "execution_error":
+						    this.dispatchEvent(new CustomEvent("execution_error", { detail: msg.data }));
+						    break;
+					    case "execution_cached":
+						    this.dispatchEvent(new CustomEvent("execution_cached", { 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 ${msg.type}`);
+						    }
+				    }
+				}
+			} catch (error) {
+				console.warn("Unhandled message:", event.data, error);
+			}
+		});
+	}
+
+	/**
+	 * 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 this.fetchApi("/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 this.fetchApi("/embeddings", { cache: "no-store" });
+		return await resp.json();
+	}
+
+	/**
+	 * Loads node object definitions for the graph
+	 * @returns The node definitions
+	 */
+	async getNodeDefs() {
+		const resp = await this.fetchApi("/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 this.fetchApi("/prompt", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify(body),
+		});
+
+		if (res.status !== 200) {
+			throw {
+				response: await res.json(),
+			};
+		}
+
+		return await res.json();
+	}
+
+	/**
+	 * 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 this.fetchApi("/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(max_items=200) {
+		try {
+			const res = await this.fetchApi(`/history?max_items=${max_items}`);
+			return { History: Object.values(await res.json()) };
+		} catch (error) {
+			console.error(error);
+			return { History: [] };
+		}
+	}
+
+	/**
+	 * Gets system & device stats
+	 * @returns System stats such as python version, OS, per device info
+	 */
+	async getSystemStats() {
+		const res = await this.fetchApi("/system_stats");
+		return await res.json();
+	}
+
+	/**
+	 * 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 this.fetchApi("/" + 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);
+	}
+
+	/**
+	 * Gets user configuration data and where data should be stored
+	 * @returns { Promise<{ storage: "server" | "browser", users?: Promise<string, unknown>, migrated?: boolean }> }
+	 */
+	async getUserConfig() {
+		return (await this.fetchApi("/users")).json();
+	}
+
+	/**
+	 * Creates a new user
+	 * @param { string } username
+	 * @returns The fetch response
+	 */
+	createUser(username) {
+		return this.fetchApi("/users", {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+			},
+			body: JSON.stringify({ username }),
+		});
+	}
+
+	/**
+	 * Gets all setting values for the current user
+	 * @returns { Promise<string, unknown> } A dictionary of id -> value
+	 */
+	async getSettings() {
+		return (await this.fetchApi("/settings")).json();
+	}
+
+	/**
+	 * Gets a setting for the current user
+	 * @param { string } id The id of the setting to fetch
+	 * @returns { Promise<unknown> } The setting value
+	 */
+	async getSetting(id) {
+		return (await this.fetchApi(`/settings/${encodeURIComponent(id)}`)).json();
+	}
+
+	/**
+	 * Stores a dictionary of settings for the current user
+	 * @param { Record<string, unknown> } settings Dictionary of setting id -> value to save
+	 * @returns { Promise<void> }
+	 */
+	async storeSettings(settings) {
+		return this.fetchApi(`/settings`, {
+			method: "POST",
+			body: JSON.stringify(settings)
+		});
+	}
+
+	/**
+	 * Stores a setting for the current user
+	 * @param { string } id The id of the setting to update
+	 * @param { unknown } value The value of the setting
+	 * @returns { Promise<void> }
+	 */
+	async storeSetting(id, value) {
+		return this.fetchApi(`/settings/${encodeURIComponent(id)}`, {
+			method: "POST",
+			body: JSON.stringify(value)
+		});
+	}
+
+	/**
+	 * Gets a user data file for the current user
+	 * @param { string } file The name of the userdata file to load
+	 * @param { RequestInit } [options]
+	 * @returns { Promise<Response> } The fetch response object
+	 */
+	async getUserData(file, options) {
+		return this.fetchApi(`/userdata/${encodeURIComponent(file)}`, options);
+	}
+
+	/**
+	 * Stores a user data file for the current user
+	 * @param { string } file The name of the userdata file to save
+	 * @param { unknown } data The data to save to the file
+	 * @param { RequestInit & { overwrite?: boolean, stringify?: boolean, throwOnError?: boolean } } [options]
+	 * @returns { Promise<Response> }
+	 */
+	async storeUserData(file, data, options = { overwrite: true, stringify: true, throwOnError: true }) {
+		const resp = await this.fetchApi(`/userdata/${encodeURIComponent(file)}?overwrite=${options?.overwrite}`, {
+			method: "POST",
+			body: options?.stringify ? JSON.stringify(data) : data,
+			...options,
+		});
+		if (resp.status !== 200 && options?.throwOnError !== false) {
+			throw new Error(`Error storing user data file '${file}': ${resp.status} ${(await resp).statusText}`);
+		}
+		return resp;
+	}
+
+	/**
+	 * Deletes a user data file for the current user
+	 * @param { string } file The name of the userdata file to delete
+	 */
+	async deleteUserData(file) {
+		const resp = await this.fetchApi(`/userdata/${encodeURIComponent(file)}`, {
+			method: "DELETE",
+		});
+		if (resp.status !== 204) {
+			throw new Error(`Error removing user data file '${file}': ${resp.status} ${(resp).statusText}`);
+		}
+	}
+
+	/**
+	 * Move a user data file for the current user
+	 * @param { string } source The userdata file to move
+	 * @param { string } dest The destination for the file
+	 */
+	async moveUserData(source, dest, options = { overwrite: false }) {
+		const resp = await this.fetchApi(`/userdata/${encodeURIComponent(source)}/move/${encodeURIComponent(dest)}?overwrite=${options?.overwrite}`, {
+			method: "POST",
+		});
+		return resp;
+	}
+
+	/**
+	 * @overload
+	 * Lists user data files for the current user
+	 * @param { string } dir The directory in which to list files
+	 * @param { boolean } [recurse] If the listing should be recursive
+	 * @param { true } [split] If the paths should be split based on the os path separator
+	 * @returns { Promise<string[][]>> } The list of split file paths in the format [fullPath, ...splitPath]
+	 */
+	/**
+	 * @overload
+	 * Lists user data files for the current user
+	 * @param { string } dir The directory in which to list files
+	 * @param { boolean } [recurse] If the listing should be recursive
+	 * @param { false | undefined } [split] If the paths should be split based on the os path separator
+	 * @returns { Promise<string[]>> } The list of files
+	 */
+	async listUserData(dir, recurse, split) {
+		const resp = await this.fetchApi(
+			`/userdata?${new URLSearchParams({
+				recurse,
+				dir,
+				split,
+			})}`
+		);
+		if (resp.status === 404) return [];
+		if (resp.status !== 200) {
+			throw new Error(`Error getting user data list '${dir}': ${resp.status} ${resp.statusText}`);
+		}
+		return resp.json();
+	}
+}
+
+export const api = new ComfyApi();

ComfyUI/web/scripts/app.js

@@ -0,0 +1,2459 @@
+import { ComfyLogging } from "./logging.js";
+import { ComfyWidgets, initWidgets } from "./widgets.js";
+import { ComfyUI, $el } from "./ui.js";
+import { api } from "./api.js";
+import { defaultGraph } from "./defaultGraph.js";
+import { getPngMetadata, getWebpMetadata, getFlacMetadata, importA1111, getLatentMetadata } from "./pnginfo.js";
+import { addDomClippingSetting } from "./domWidget.js";
+import { createImageHost, calculateImageGrid } from "./ui/imagePreview.js";
+import { ComfyAppMenu } from "./ui/menu/index.js";
+import { getStorageValue, setStorageValue } from "./utils.js";
+import { ComfyWorkflowManager } from "./workflows.js";
+export const ANIM_PREVIEW_WIDGET = "$$comfy_animation_preview";
+
+function sanitizeNodeName(string) {
+	let entityMap = {
+	'&': '',
+	'<': '',
+	'>': '',
+	'"': '',
+	"'": '',
+	'`': '',
+	'=': ''
+	};
+	return String(string).replace(/[&<>"'`=]/g, function fromEntityMap (s) {
+		return entityMap[s];
+	});
+}
+
+/**
+ * @typedef {import("types/comfy").ComfyExtension} ComfyExtension
+ */
+
+export class ComfyApp {
+	/**
+	 * List of entries to queue
+	 * @type {{number: number, batchCount: number}[]}
+	 */
+	#queueItems = [];
+	/**
+	 * If the queue is currently being processed
+	 * @type {boolean}
+	 */
+	#processingQueue = false;
+
+	/**
+	 * Content Clipboard
+	 * @type {serialized node object}
+	 */
+	static clipspace = null;
+	static clipspace_invalidate_handler = null;
+	static open_maskeditor = null;
+	static clipspace_return_node = null;
+
+	constructor() {
+		this.ui = new ComfyUI(this);
+		this.logging = new ComfyLogging(this);
+		this.workflowManager = new ComfyWorkflowManager(this);
+		this.bodyTop = $el("div.comfyui-body-top", { parent: document.body });
+		this.bodyLeft = $el("div.comfyui-body-left", { parent: document.body });
+		this.bodyRight = $el("div.comfyui-body-right", { parent: document.body });
+		this.bodyBottom = $el("div.comfyui-body-bottom", { parent: document.body });		  
+		this.menu = new ComfyAppMenu(this);
+
+		/**
+		 * List of extensions that are registered with the app
+		 * @type {ComfyExtension[]}
+		 */
+		this.extensions = [];
+
+		/**
+		 * Stores the execution output data for each node
+		 * @type {Record<string, any>}
+		 */
+		this._nodeOutputs = {};
+
+		/**
+		 * Stores the preview image data for each node
+		 * @type {Record<string, Image>}
+		 */
+		this.nodePreviewImages = {};
+
+		/**
+		 * If the shift key on the keyboard is pressed
+		 * @type {boolean}
+		 */
+		this.shiftDown = false;
+	}
+
+	get nodeOutputs() {
+		return this._nodeOutputs;
+	}
+
+	set nodeOutputs(value) {
+		this._nodeOutputs = value;
+		this.#invokeExtensions("onNodeOutputsUpdated", value);
+	}
+
+	getPreviewFormatParam() {
+		let preview_format = this.ui.settings.getSettingValue("Comfy.PreviewFormat");
+		if(preview_format)
+			return `&preview=${preview_format}`;
+		else
+			return "";
+	}
+
+	getRandParam() {
+		return "&rand=" + Math.random();
+	}
+
+	static isImageNode(node) {
+		return node.imgs || (node && node.widgets && node.widgets.findIndex(obj => obj.name === 'image') >= 0);
+	}
+
+	static onClipspaceEditorSave() {
+		if(ComfyApp.clipspace_return_node) {
+			ComfyApp.pasteFromClipspace(ComfyApp.clipspace_return_node);
+		}
+	}
+
+	static onClipspaceEditorClosed() {
+		ComfyApp.clipspace_return_node = null;
+	}
+
+	static copyToClipspace(node) {
+		var widgets = null;
+		if(node.widgets) {
+			widgets = node.widgets.map(({ type, name, value }) => ({ type, name, value }));
+		}
+
+		var imgs = undefined;
+		var orig_imgs = undefined;
+		if(node.imgs != undefined) {
+			imgs = [];
+			orig_imgs = [];
+
+			for (let i = 0; i < node.imgs.length; i++) {
+				imgs[i] = new Image();
+				imgs[i].src = node.imgs[i].src;
+				orig_imgs[i] = imgs[i];
+			}
+		}
+
+		var selectedIndex = 0;
+		if(node.imageIndex) {
+			selectedIndex = node.imageIndex;
+		}
+
+		ComfyApp.clipspace = {
+			'widgets': widgets,
+			'imgs': imgs,
+			'original_imgs': orig_imgs,
+			'images': node.images,
+			'selectedIndex': selectedIndex,
+			'img_paste_mode': 'selected' // reset to default im_paste_mode state on copy action
+		};
+
+		ComfyApp.clipspace_return_node = null;
+
+		if(ComfyApp.clipspace_invalidate_handler) {
+			ComfyApp.clipspace_invalidate_handler();
+		}
+	}
+
+	static pasteFromClipspace(node) {
+		if(ComfyApp.clipspace) {
+			// image paste
+			if(ComfyApp.clipspace.imgs && node.imgs) {
+				if(node.images && ComfyApp.clipspace.images) {
+					if(ComfyApp.clipspace['img_paste_mode'] == 'selected') {
+						node.images = [ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']]];
+					}
+					else {
+						node.images = ComfyApp.clipspace.images;
+					}
+
+					if(app.nodeOutputs[node.id + ""])
+						app.nodeOutputs[node.id + ""].images = node.images;
+				}
+
+				if(ComfyApp.clipspace.imgs) {
+					// deep-copy to cut link with clipspace
+					if(ComfyApp.clipspace['img_paste_mode'] == 'selected') {
+						const img = new Image();
+						img.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src;
+						node.imgs = [img];
+						node.imageIndex = 0;
+					}
+					else {
+						const imgs = [];
+						for(let i=0; i<ComfyApp.clipspace.imgs.length; i++) {
+							imgs[i] = new Image();
+							imgs[i].src = ComfyApp.clipspace.imgs[i].src;
+							node.imgs = imgs;
+						}
+					}
+				}
+			}
+
+			if(node.widgets) {
+				if(ComfyApp.clipspace.images) {
+					const clip_image = ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']];
+					const index = node.widgets.findIndex(obj => obj.name === 'image');
+					if(index >= 0) {
+						if(node.widgets[index].type != 'image' && typeof node.widgets[index].value == "string" && clip_image.filename) {
+							node.widgets[index].value = (clip_image.subfolder?clip_image.subfolder+'/':'') + clip_image.filename + (clip_image.type?` [${clip_image.type}]`:'');
+						}
+						else {
+							node.widgets[index].value = clip_image;
+						}
+					}
+				}
+				if(ComfyApp.clipspace.widgets) {
+					ComfyApp.clipspace.widgets.forEach(({ type, name, value }) => {
+						const prop = Object.values(node.widgets).find(obj => obj.type === type && obj.name === name);
+						if (prop && prop.type != 'button') {
+							if(prop.type != 'image' && typeof prop.value == "string" && value.filename) {
+								prop.value = (value.subfolder?value.subfolder+'/':'') + value.filename + (value.type?` [${value.type}]`:'');
+							}
+							else {
+								prop.value = value;
+								prop.callback(value);
+							}
+						}
+					});
+				}
+			}
+
+			app.graph.setDirtyCanvas(true);
+		}
+	}
+
+	/**
+	 * Invoke an extension callback
+	 * @param {keyof ComfyExtension} 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 }
+						);
+					}
+				}
+			})
+		);
+	}
+	
+	#addRestoreWorkflowView() {
+		const serialize = LGraph.prototype.serialize;
+		const self = this;
+		LGraph.prototype.serialize = function() {
+			const workflow = serialize.apply(this, arguments);
+
+			// Store the drag & scale info in the serialized workflow if the setting is enabled
+			if (self.enableWorkflowViewRestore.value) {
+				if (!workflow.extra) {
+					workflow.extra = {};
+				}
+				workflow.extra.ds = {
+					scale: self.canvas.ds.scale,
+					offset: self.canvas.ds.offset,
+				};
+			} else if (workflow.extra?.ds) {
+				// Clear any old view data
+				delete workflow.extra.ds;
+			}
+
+			return workflow;
+		}
+		this.enableWorkflowViewRestore = this.ui.settings.addSetting({
+			id: "Comfy.EnableWorkflowViewRestore",
+			name: "Save and restore canvas position and zoom level in workflows",
+			type: "boolean",
+			defaultValue: true
+		});
+	}
+
+	/**
+	 * 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) {
+		function getCopyImageOption(img) {
+			if (typeof window.ClipboardItem === "undefined") return [];
+			return [
+				{
+					content: "Copy Image",
+					callback: async () => {
+						const url = new URL(img.src);
+						url.searchParams.delete("preview");
+
+						const writeImage = async (blob) => {
+							await navigator.clipboard.write([
+								new ClipboardItem({
+									[blob.type]: blob,
+								}),
+							]);
+						};
+
+						try {
+							const data = await fetch(url);
+							const blob = await data.blob();
+							try {
+								await writeImage(blob);
+							} catch (error) {
+								// Chrome seems to only support PNG on write, convert and try again
+								if (blob.type !== "image/png") {
+									const canvas = $el("canvas", {
+										width: img.naturalWidth,
+										height: img.naturalHeight,
+									});
+									const ctx = canvas.getContext("2d");
+									let image;
+									if (typeof window.createImageBitmap === "undefined") {
+										image = new Image();
+										const p = new Promise((resolve, reject) => {
+											image.onload = resolve;
+											image.onerror = reject;
+										}).finally(() => {
+											URL.revokeObjectURL(image.src);
+										});
+										image.src = URL.createObjectURL(blob);
+										await p;
+									} else {
+										image = await createImageBitmap(blob);
+									}
+									try {
+										ctx.drawImage(image, 0, 0);
+										canvas.toBlob(writeImage, "image/png");
+									} finally {
+										if (typeof image.close === "function") {
+											image.close();
+										}
+									}
+
+									return;
+								}
+								throw error;
+							}
+						} catch (error) {
+							alert("Error copying image: " + (error.message ?? error));
+						}
+					},
+				},
+			];
+		}
+
+		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: () => {
+								let url = new URL(img.src);
+								url.searchParams.delete("preview");
+								window.open(url, "_blank");
+							},
+						},
+						...getCopyImageOption(img), 
+						{
+							content: "Save Image",
+							callback: () => {
+								const a = document.createElement("a");
+								let url = new URL(img.src);
+								url.searchParams.delete("preview");
+								a.href = url;
+								a.setAttribute("download", new URLSearchParams(url.search).get("filename"));
+								document.body.append(a);
+								a.click();
+								requestAnimationFrame(() => a.remove());
+							},
+						}
+					);
+				}
+			}
+
+			options.push({
+				content: "Bypass",
+				callback: (obj) => {
+					if (this.mode === 4) this.mode = 0;
+					else this.mode = 4;
+					this.graph.change();
+				},
+			});
+
+			// prevent conflict of clipspace content
+			if (!ComfyApp.clipspace_return_node) {
+				options.push({
+					content: "Copy (Clipspace)",
+					callback: (obj) => {
+						ComfyApp.copyToClipspace(this);
+					},
+				});
+
+				if (ComfyApp.clipspace != null) {
+					options.push({
+						content: "Paste (Clipspace)",
+						callback: () => {
+							ComfyApp.pasteFromClipspace(this);
+						},
+					});
+				}
+
+				if (ComfyApp.isImageNode(this)) {
+					options.push({
+						content: "Open in MaskEditor",
+						callback: (obj) => {
+							ComfyApp.copyToClipspace(this);
+							ComfyApp.clipspace_return_node = this;
+							ComfyApp.open_maskeditor();
+						},
+					});
+				}
+			}
+		};
+	}
+
+	#addNodeKeyHandler(node) {
+		const app = this;
+		const origNodeOnKeyDown = node.prototype.onKeyDown;
+
+		node.prototype.onKeyDown = function(e) {
+			if (origNodeOnKeyDown && origNodeOnKeyDown.apply(this, e) === false) {
+				return false;
+			}
+
+			if (this.flags.collapsed || !this.imgs || this.imageIndex === null) {
+				return;
+			}
+
+			let handled = false;
+
+			if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+				if (e.key === "ArrowLeft") {
+					this.imageIndex -= 1;
+				} else if (e.key === "ArrowRight") {
+					this.imageIndex += 1;
+				}
+				this.imageIndex %= this.imgs.length;
+
+				if (this.imageIndex < 0) {
+					this.imageIndex = this.imgs.length + this.imageIndex;
+				}
+				handled = true;
+			} else if (e.key === "Escape") {
+				this.imageIndex = null;
+				handled = true;
+			}
+
+			if (handled === true) {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				return false;
+			}
+		}
+	}
+
+	/**
+	 * 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;
+
+		function getImageTop(node) {
+			let shiftY;
+			if (node.imageOffset != null) {
+				shiftY = node.imageOffset;
+			} else {
+				if (node.widgets?.length) {
+					const w = node.widgets[node.widgets.length - 1];
+					shiftY = w.last_y;
+					if (w.computeSize) {
+						shiftY += w.computeSize()[1] + 4;
+					}
+					else if(w.computedHeight) {
+						shiftY += w.computedHeight;
+					}
+					else {
+						shiftY += LiteGraph.NODE_WIDGET_HEIGHT + 4;
+					}
+				} else {
+					shiftY = node.computeSize()[1];
+				}
+			}
+			return shiftY;
+		}
+
+		node.prototype.setSizeForImage = function (force) {
+			if(!force && this.animatedImages) return;
+
+			if (this.inputHeight || this.freeWidgetSpace > 210) {
+				this.setSize(this.size);
+				return;
+			}
+			const minHeight = getImageTop(this) + 220;
+			if (this.size[1] < minHeight) {
+				this.setSize([this.size[0], minHeight]);
+			}
+		};
+
+		node.prototype.onDrawBackground = function (ctx) {
+			if (!this.flags.collapsed) {
+				let imgURLs = []
+				let imagesChanged = false
+
+				const output = app.nodeOutputs[this.id + ""];
+				if (output?.images) {
+					this.animatedImages = output?.animated?.find(Boolean);
+					if (this.images !== output.images) {
+						this.images = output.images;
+						imagesChanged = true;
+						imgURLs = imgURLs.concat(
+							output.images.map((params) => {
+								return api.apiURL(
+									"/view?" +
+										new URLSearchParams(params).toString() +
+										(this.animatedImages ? "" : app.getPreviewFormatParam()) + app.getRandParam()
+								);
+							})
+						);
+					}
+				}
+
+				const preview = app.nodePreviewImages[this.id + ""]
+				if (this.preview !== preview) {
+					this.preview = preview
+					imagesChanged = true;
+					if (preview != null) {
+						imgURLs.push(preview);
+					}
+				}
+
+				if (imagesChanged) {
+					this.imageIndex = null;
+					if (imgURLs.length > 0) {
+						Promise.all(
+							imgURLs.map((src) => {
+								return new Promise((r) => {
+									const img = new Image();
+									img.onload = () => r(img);
+									img.onerror = () => r(null);
+									img.src = src
+								});
+							})
+						).then((imgs) => {
+							if ((!output || this.images === output.images) && (!preview || this.preview === preview)) {
+								this.imgs = imgs.filter(Boolean);
+								this.setSizeForImage?.();
+								app.graph.setDirtyCanvas(true);
+							}
+						});
+					}
+					else {
+						this.imgs = null;
+					}
+				}
+
+				function calculateGrid(w, h, n) {
+					let columns, rows, cellsize;
+
+					if (w > h) {
+						cellsize = h;
+						columns = Math.ceil(w / cellsize);
+						rows = Math.ceil(n / columns);
+					} else {
+						cellsize = w;
+						rows = Math.ceil(h / cellsize);
+						columns = Math.ceil(n / rows);
+					}
+
+					while (columns * rows < n) {
+						cellsize++;
+						if (w >= h) {
+							columns = Math.ceil(w / cellsize);
+							rows = Math.ceil(n / columns);
+						} else {
+							rows = Math.ceil(h / cellsize);
+							columns = Math.ceil(n / rows);
+						}
+					}
+
+					const cell_size = Math.min(w/columns, h/rows);
+					return {cell_size, columns, rows};
+				}
+
+				function is_all_same_aspect_ratio(imgs) {
+					// assume: imgs.length >= 2
+					let ratio = imgs[0].naturalWidth/imgs[0].naturalHeight;
+
+					for(let i=1; i<imgs.length; i++) {
+						let this_ratio = imgs[i].naturalWidth/imgs[i].naturalHeight;
+						if(ratio != this_ratio)
+							return false;
+					}
+
+					return true;
+				}
+
+				if (this.imgs?.length) {
+					const widgetIdx = this.widgets?.findIndex((w) => w.name === ANIM_PREVIEW_WIDGET);
+				
+					if(this.animatedImages) {
+						// Instead of using the canvas we'll use a IMG
+						if(widgetIdx > -1) {
+							// Replace content
+							const widget = this.widgets[widgetIdx];
+							widget.options.host.updateImages(this.imgs);
+						} else {
+							const host = createImageHost(this);
+							this.setSizeForImage(true);
+							const widget = this.addDOMWidget(ANIM_PREVIEW_WIDGET, "img", host.el, {
+								host,
+								getHeight: host.getHeight,
+								onDraw: host.onDraw,
+								hideOnZoom: false
+							});
+							widget.serializeValue = () => undefined;
+							widget.options.host.updateImages(this.imgs);
+						}
+						return;
+					}
+
+					if (widgetIdx > -1) {
+						this.widgets[widgetIdx].onRemove?.();
+						this.widgets.splice(widgetIdx, 1);
+					}
+
+					const canvas = app.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 imageIndex = this.imageIndex;
+					const numImages = this.imgs.length;
+					if (numImages === 1 && !imageIndex) {
+						this.imageIndex = imageIndex = 0;
+					}
+
+					const top = getImageTop(this);
+					var shiftY = top;
+
+					let dw = this.size[0];
+					let dh = this.size[1];
+					dh -= shiftY;
+
+					if (imageIndex == null) {
+						var cellWidth, cellHeight, shiftX, cell_padding, cols;
+
+						const compact_mode = is_all_same_aspect_ratio(this.imgs);
+						if(!compact_mode) {
+							// use rectangle cell style and border line
+							cell_padding = 2;
+							const { cell_size, columns, rows } = calculateGrid(dw, dh, numImages);
+							cols = columns;
+
+							cellWidth = cell_size;
+							cellHeight = cell_size;
+							shiftX = (dw-cell_size*cols)/2;
+							shiftY = (dh-cell_size*rows)/2 + top;
+						}
+						else {
+							cell_padding = 0;
+							({ cellWidth, cellHeight, cols, shiftX } = calculateImageGrid(this.imgs, dw, dh));
+						}
+
+						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]);
+
+							let wratio = cellWidth/img.width;
+							let hratio = cellHeight/img.height;
+							var ratio = Math.min(wratio, hratio);
+
+							let imgHeight = ratio * img.height;
+							let imgY = row * cellHeight + shiftY + (cellHeight - imgHeight)/2;
+							let imgWidth = ratio * img.width;
+							let imgX = col * cellWidth + shiftX + (cellWidth - imgWidth)/2;
+
+							ctx.drawImage(img, imgX+cell_padding, imgY+cell_padding, imgWidth-cell_padding*2, imgHeight-cell_padding*2);
+							if(!compact_mode) {
+								// rectangle cell and border line style
+								ctx.strokeStyle = "#8F8F8F";
+								ctx.lineWidth = 1;
+								ctx.strokeRect(x+cell_padding, y+cell_padding, cellWidth-cell_padding*2, cellHeight-cell_padding*2);
+							}
+
+							ctx.filter = "none";
+						}
+
+						if (!anyHovered) {
+							this.pointerDown = null;
+							this.overIndex = null;
+						}
+					} else {
+						// Draw individual
+						let w = this.imgs[imageIndex].naturalWidth;
+						let h = this.imgs[imageIndex].naturalHeight;
+
+						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(dw - 40, dh + top - 40, 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(dw - 40, top + 10, 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;
+			}
+			// Dragging from Chrome->Firefox there is a file but its a bmp, so ignore that
+			if (event.dataTransfer.files.length && event.dataTransfer.files[0].type !== "image/bmp") {
+			await this.handleFile(event.dataTransfer.files[0]);
+			} else {
+				// Try loading the first URI in the transfer list
+				const validTypes = ["text/uri-list", "text/x-moz-url"];
+				const match = [...event.dataTransfer.types].find((t) => validTypes.find(v => t === v));
+				if (match) {
+					const uri = event.dataTransfer.getData(match)?.split("\n")?.[0];
+					if (uri) {
+						await this.handleFile(await (await fetch(uri)).blob());
+					}
+				}
+			}
+		});
+
+		// 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 images or workflows from pasted JSON data
+	 */
+	#addPasteHandler() {
+		document.addEventListener("paste", async (e) => {
+			// ctrl+shift+v is used to paste nodes with connections
+			// this is handled by litegraph
+			if(this.shiftDown) return;
+
+			let data = (e.clipboardData || window.clipboardData);
+			const items = data.items;
+
+			// Look for image paste data
+			for (const item of items) {
+				if (item.type.startsWith('image/')) {
+					var imageNode = null;
+
+					// If an image node is selected, paste into it
+					if (this.canvas.current_node &&
+						this.canvas.current_node.is_selected &&
+						ComfyApp.isImageNode(this.canvas.current_node)) {
+						imageNode = this.canvas.current_node;
+					}
+
+					// No image node selected: add a new one
+					if (!imageNode) {
+						const newNode = LiteGraph.createNode("LoadImage");
+						newNode.pos = [...this.canvas.graph_mouse];
+						imageNode = this.graph.add(newNode);
+						this.graph.change();
+					}
+					const blob = item.getAsFile();
+					imageNode.pasteFile(blob);
+					return;
+				}
+			}
+
+			// No image found. Look for node data
+			data = data.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) {
+				await this.loadGraphData(workflow);
+			}
+			else {
+				if (e.target.type === "text" || e.target.type === "textarea") {
+					return;
+				}
+
+				// Litegraph default paste
+				this.canvas.pasteFromClipboard();
+			}
+
+
+		});
+	}
+
+
+	/**
+	 * Adds a handler on copy that serializes selected nodes to JSON
+	 */
+	#addCopyHandler() {
+		document.addEventListener("copy", (e) => {
+			if (e.target.type === "text" || e.target.type === "textarea") {
+				// Default system copy
+				return;
+			}
+
+			// copy nodes and clear clipboard
+			if (e.target.className === "litegraph" && this.canvas.selected_nodes) {
+				this.canvas.copyToClipboard();
+				e.clipboardData.setData('text', ' '); //clearData doesn't remove images from clipboard
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				return false;
+			}
+		});
+	}
+
+
+	/**
+	 * Handle mouse
+	 *
+	 * Move group by header
+	 */
+	#addProcessMouseHandler() {
+		const self = this;
+
+		const origProcessMouseDown = LGraphCanvas.prototype.processMouseDown;
+		LGraphCanvas.prototype.processMouseDown = function(e) {
+			// prepare for ctrl+shift drag: zoom start
+			if(e.ctrlKey && e.shiftKey && e.buttons) {
+				self.zoom_drag_start = [e.x, e.y, this.ds.scale];
+				return;
+			}
+
+			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) {
+			// handle ctrl+shift drag
+			if(e.ctrlKey && e.shiftKey && self.zoom_drag_start) {
+				// stop canvas zoom action
+				if(!e.buttons) {
+					self.zoom_drag_start = null;
+					return;
+				}
+
+				// calculate delta
+				let deltaY = e.y - self.zoom_drag_start[1];
+				let startScale = self.zoom_drag_start[2];
+
+				let scale = startScale - deltaY/100;
+
+				this.ds.changeScale(scale, [this.ds.element.width/2, this.ds.element.height/2]);
+				this.graph.change();
+
+				return;
+			}
+
+			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) {
+			if (!this.graph) {
+				return;
+			}
+
+			var block_default = false;
+
+			if (e.target.localName == "input") {
+				return;
+			}
+
+			if (e.type == "keydown" && !e.repeat) {
+
+				// Ctrl + M mute/unmute
+				if (e.key === 'm' && (e.metaKey || 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;
+				}
+
+				// Ctrl + B bypass
+				if (e.key === 'b' && (e.metaKey || e.ctrlKey)) {
+					if (this.selected_nodes) {
+						for (var i in this.selected_nodes) {
+							if (this.selected_nodes[i].mode === 4) { // never
+								this.selected_nodes[i].mode = 0; // always
+							} else {
+								this.selected_nodes[i].mode = 4; // never
+							}
+						}
+					}
+					block_default = true;
+				}
+
+				// Alt + C collapse/uncollapse
+				if (e.key === 'c' && e.altKey) {
+					if (this.selected_nodes) {
+						for (var i in this.selected_nodes) {
+							this.selected_nodes[i].collapse()
+						}
+					}
+					block_default = true;
+				}
+
+				// Ctrl+C Copy
+				if ((e.key === 'c') && (e.metaKey || e.ctrlKey)) {
+					// Trigger onCopy
+					return true;
+				}
+
+				// Ctrl+V Paste
+				if ((e.key === 'v' || e.key == 'V') && (e.metaKey || e.ctrlKey) && !e.shiftKey) {
+					// Trigger onPaste
+					return true;
+				}
+
+				if((e.key === '+') && e.altKey) {
+					block_default = true;
+					let scale = this.ds.scale * 1.1;
+					this.ds.changeScale(scale, [this.ds.element.width/2, this.ds.element.height/2]);
+					this.graph.change();
+				}
+
+				if((e.key === '-') && e.altKey) {
+					block_default = true;
+					let scale = this.ds.scale * 1 / 1.1;
+					this.ds.changeScale(scale, [this.ds.element.width/2, this.ds.element.height/2]);
+					this.graph.change();
+				}
+			}
+
+			this.graph.change();
+
+			if (block_default) {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				return false;
+			}
+
+			// Fall through to Litegraph defaults
+			return origProcessKey.apply(this, arguments);
+		};
+	}
+
+	/**
+	 * 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);
+
+			const nodeErrors = self.lastNodeErrors?.[node.id];
+
+			let color = null;
+			let lineWidth = 1;
+			if (node.id === +self.runningNodeId) {
+				color = "#0f0";
+			} else if (self.dragOverNode && node.id === self.dragOverNode.id) {
+				color = "dodgerblue";
+			}
+			else if (nodeErrors?.errors) {
+				color = "red";
+				lineWidth = 2;
+			}
+			else if (self.lastExecutionError && +self.lastExecutionError.node_id === node.id) {
+				color = "#f0f";
+				lineWidth = 2;
+			}
+
+			if (color) {
+				const shape = node._shape || node.constructor.shape || LiteGraph.ROUND_SHAPE;
+				ctx.lineWidth = lineWidth;
+				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, this.round_radius * 2, 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 && node.id === +self.runningNodeId) {
+				ctx.fillStyle = "green";
+				ctx.fillRect(0, 0, size[0] * (self.progress.value / self.progress.max), 6);
+				ctx.fillStyle = bgcolor;
+			}
+
+			// Highlight inputs that failed validation
+			if (nodeErrors) {
+				ctx.lineWidth = 2;
+				ctx.strokeStyle = "red";
+				for (const error of nodeErrors.errors) {
+					if (error.extra_info && error.extra_info.input_name) {
+						const inputIndex = node.findInputSlot(error.extra_info.input_name)
+						if (inputIndex !== -1) {
+							let pos = node.getConnectionPos(true, inputIndex);
+							ctx.beginPath();
+							ctx.arc(pos[0] - node.pos[0], pos[1] - node.pos[1], 12, 0, 2 * Math.PI, false)
+							ctx.stroke();
+						}
+					}
+				}
+			}
+
+			return res;
+		};
+
+		const origDrawNode = LGraphCanvas.prototype.drawNode;
+		LGraphCanvas.prototype.drawNode = function (node, ctx) {
+			var editor_alpha = this.editor_alpha;
+			var old_color = node.bgcolor;
+
+			if (node.mode === 2) { // never
+				this.editor_alpha = 0.4;
+			}
+
+			if (node.mode === 4) { // never
+				node.bgcolor = "#FF00FF";
+				this.editor_alpha = 0.2;
+			}
+
+			const res = origDrawNode.apply(this, arguments);
+
+			this.editor_alpha = editor_alpha;
+			node.bgcolor = old_color;
+
+			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 }) => {
+			if (this.workflowManager.activePrompt?.workflow 
+				&& this.workflowManager.activePrompt.workflow !== this.workflowManager.activeWorkflow) return;
+			this.progress = detail;
+			this.graph.setDirtyCanvas(true, false);
+		});
+
+		api.addEventListener("executing", ({ detail }) => {
+			if (this.workflowManager.activePrompt ?.workflow
+				&& this.workflowManager.activePrompt.workflow !== this.workflowManager.activeWorkflow) return;
+			this.progress = null;
+			this.runningNodeId = detail;
+			this.graph.setDirtyCanvas(true, false);
+			delete this.nodePreviewImages[this.runningNodeId]
+		});
+
+		api.addEventListener("executed", ({ detail }) => {
+			if (this.workflowManager.activePrompt ?.workflow
+				&& this.workflowManager.activePrompt.workflow !== this.workflowManager.activeWorkflow) return;
+			const output = this.nodeOutputs[detail.node];
+			if (detail.merge && output) {
+				for (const k in detail.output ?? {}) {
+					const v = output[k];
+					if (v instanceof Array) {
+						output[k] = v.concat(detail.output[k]);
+					} else {
+						output[k] = detail.output[k];
+					}
+				}
+			} else {
+				this.nodeOutputs[detail.node] = detail.output;
+			}
+			const node = this.graph.getNodeById(detail.node);
+			if (node) {
+				if (node.onExecuted)
+					node.onExecuted(detail.output);
+			}
+		});
+
+		api.addEventListener("execution_start", ({ detail }) => {
+			this.runningNodeId = null;
+			this.lastExecutionError = null
+			this.graph._nodes.forEach((node) => {
+				if (node.onExecutionStart)
+					node.onExecutionStart()
+			})
+		});
+
+		api.addEventListener("execution_error", ({ detail }) => {
+			this.lastExecutionError = detail;
+			const formattedError = this.#formatExecutionError(detail);
+			this.ui.dialog.show(formattedError);
+			this.canvas.draw(true, true);
+		});
+
+		api.addEventListener("b_preview", ({ detail }) => {
+			const id = this.runningNodeId
+			if (id == null)
+				return;
+
+			const blob = detail
+			const blobUrl = URL.createObjectURL(blob)
+			this.nodePreviewImages[id] = [blobUrl]
+		});
+
+		api.init();
+	}
+
+	#addKeyboardHandler() {
+		window.addEventListener("keydown", (e) => {
+			this.shiftDown = e.shiftKey;
+		});
+		window.addEventListener("keyup", (e) => {
+			this.shiftDown = e.shiftKey;
+		});
+	}
+
+	#addConfigureHandler() {
+		const app = this;
+		const configure = LGraph.prototype.configure;
+		// Flag that the graph is configuring to prevent nodes from running checks while its still loading
+		LGraph.prototype.configure = function () {
+			app.configuringGraph = true;
+			try {
+				return configure.apply(this, arguments);
+			} finally {
+				app.configuringGraph = false;
+			}
+		};
+	}
+
+	#addAfterConfigureHandler() {
+		const app = this;
+		const onConfigure = app.graph.onConfigure;
+		app.graph.onConfigure = function () {
+			// Fire callbacks before the onConfigure, this is used by widget inputs to setup the config
+			for (const node of app.graph._nodes) {
+				node.onGraphConfigured?.();
+			}
+			
+			const r = onConfigure?.apply(this, arguments);
+			
+			// Fire after onConfigure, used by primitves to generate widget using input nodes config
+			for (const node of app.graph._nodes) {
+				node.onAfterGraphConfigured?.();
+			}
+
+			return r;
+		};
+	}
+
+	/**
+	 * Loads all extensions from the API into the window in parallel
+	 */
+	async #loadExtensions() {
+	    const extensions = await api.getExtensions();
+	    this.logging.addEntry("Comfy.App", "debug", { Extensions: extensions });
+	
+	    const extensionPromises = extensions.map(async ext => {
+	        try {
+	            await import(api.apiURL(ext));
+	        } catch (error) {
+	            console.error("Error loading extension", ext, error);
+	        }
+	    });
+	
+	    await Promise.all(extensionPromises);
+		try {
+			this.menu.workflows.registerExtension(this);
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	async #migrateSettings() {
+		this.isNewUserSession = true;
+		// Store all current settings
+		const settings = Object.keys(this.ui.settings).reduce((p, n) => {
+			const v = localStorage[`Comfy.Settings.${n}`];
+			if (v) {
+				try {
+					p[n] = JSON.parse(v);
+				} catch (error) {}
+			}
+			return p;
+		}, {});
+
+		await api.storeSettings(settings);
+	}
+
+	async #setUser() {
+		const userConfig = await api.getUserConfig();
+		this.storageLocation = userConfig.storage;
+		if (typeof userConfig.migrated == "boolean") {
+			// Single user mode migrated true/false for if the default user is created
+			if (!userConfig.migrated && this.storageLocation === "server") {
+				// Default user not created yet
+				await this.#migrateSettings();
+			}
+			return;
+		}
+
+		this.multiUserServer = true;
+		let user = localStorage["Comfy.userId"];
+		const users = userConfig.users ?? {};
+		if (!user || !users[user]) {
+			// This will rarely be hit so move the loading to on demand
+			const { UserSelectionScreen } = await import("./ui/userSelection.js");
+		
+			this.ui.menuContainer.style.display = "none";
+			const { userId, username, created } = await new UserSelectionScreen().show(users, user);
+			this.ui.menuContainer.style.display = "";
+
+			user = userId;
+			localStorage["Comfy.userName"] = username;
+			localStorage["Comfy.userId"] = user;
+
+			if (created) {
+				api.user = user;
+				await this.#migrateSettings();
+			}
+		}
+
+		api.user = user;
+
+		this.ui.settings.addSetting({
+			id: "Comfy.SwitchUser",
+			name: "Switch User",
+			type: (name) => {
+				let currentUser = localStorage["Comfy.userName"];
+				if (currentUser) {
+					currentUser = ` (${currentUser})`;
+				}
+				return $el("tr", [
+					$el("td", [
+						$el("label", {
+							textContent: name,
+						}),
+					]),
+					$el("td", [
+						$el("button", {
+							textContent: name + (currentUser ?? ""),
+							onclick: () => {
+								delete localStorage["Comfy.userId"];
+								delete localStorage["Comfy.userName"];
+								window.location.reload();
+							},
+						}),
+					]),
+				]);
+			},
+		});
+	}
+
+	/**
+	 * Set up the app on the page
+	 */
+	async setup() {
+		await this.#setUser();
+
+		// Create and mount the LiteGraph in the DOM
+		const mainCanvas = document.createElement("canvas")
+		mainCanvas.style.touchAction = "none"
+		const canvasEl = (this.canvasEl = Object.assign(mainCanvas, { id: "graph-canvas" }));
+		canvasEl.tabIndex = "1";
+		document.body.append(canvasEl);
+		this.resizeCanvas();
+
+		await Promise.all([this.workflowManager.loadWorkflows(), this.ui.settings.load()]);
+		await this.#loadExtensions();
+
+		addDomClippingSetting();
+		this.#addProcessMouseHandler();
+		this.#addProcessKeyHandler();
+		this.#addConfigureHandler();
+		this.#addApiUpdateHandlers();
+		this.#addRestoreWorkflowView();
+
+		this.graph = new LGraph();
+
+		this.#addAfterConfigureHandler();
+
+		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();
+
+		// Ensure the canvas fills the window
+		this.resizeCanvas();
+		window.addEventListener("resize", () => this.resizeCanvas());
+		const ro = new ResizeObserver(() => this.resizeCanvas());
+		ro.observe(this.bodyTop);
+		ro.observe(this.bodyLeft);
+		ro.observe(this.bodyRight);
+		ro.observe(this.bodyBottom);
+
+		await this.#invokeExtensionsAsync("init");
+		await this.registerNodes();
+		initWidgets(this);
+
+		// Load previous workflow
+		let restored = false;
+		try {
+			const loadWorkflow = async (json) => {
+				if (json) {
+					const workflow = JSON.parse(json);
+					const workflowName = getStorageValue("Comfy.PreviousWorkflow");
+					await this.loadGraphData(workflow, true, true, workflowName);
+					return true;
+				}
+			};
+			const clientId = api.initialClientId ?? api.clientId;
+			restored =
+				(clientId && (await loadWorkflow(sessionStorage.getItem(`workflow:${clientId}`)))) ||
+				(await loadWorkflow(localStorage.getItem("workflow")));
+		} catch (err) {
+			console.error("Error loading previous workflow", err);
+		}
+
+		// We failed to restore a workflow so load the default
+		if (!restored) {
+			await this.loadGraphData();
+		}
+
+		// Save current workflow automatically
+		setInterval(() => {
+			const workflow = JSON.stringify(this.graph.serialize());
+			localStorage.setItem("workflow", workflow);
+			if (api.clientId) {
+				sessionStorage.setItem(`workflow:${api.clientId}`, workflow);
+			}
+		}, 1000);
+
+		this.#addDrawNodeHandler();
+		this.#addDrawGroupsHandler();
+		this.#addDropHandler();
+		this.#addCopyHandler();
+		this.#addPasteHandler();
+		this.#addKeyboardHandler();
+
+		await this.#invokeExtensionsAsync("setup");
+	}
+
+	resizeCanvas() {
+		// Limit minimal scale to 1, see https://github.com/comfyanonymous/ComfyUI/pull/845
+		const scale = Math.max(window.devicePixelRatio, 1);
+		
+		// Clear fixed width and height while calculating rect so it uses 100% instead
+		this.canvasEl.height = this.canvasEl.width = "";
+		const { width, height } = this.canvasEl.getBoundingClientRect();
+		this.canvasEl.width = Math.round(width * scale);
+		this.canvasEl.height = Math.round(height * scale);
+		this.canvasEl.getContext("2d").scale(scale, scale);
+		this.canvas?.draw(true, true);
+	}
+
+	/**
+	 * Registers nodes with the graph
+	 */
+	async registerNodes() {
+		const app = this;
+		// Load node definitions from the backend
+		const defs = await api.getNodeDefs();
+		await this.registerNodesFromDefs(defs);
+		await this.#invokeExtensionsAsync("registerCustomNodes");
+	}
+
+	getWidgetType(inputData, inputName) {
+		const type = inputData[0];
+
+		if (Array.isArray(type)) {
+			return "COMBO";
+		} else if (`${type}:${inputName}` in this.widgets) {
+			return `${type}:${inputName}`;
+		} else if (type in this.widgets) {
+			return type;
+		} else {
+			return null;
+		}
+	}
+
+	async registerNodeDef(nodeId, nodeData) {
+		const self = this;
+		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];
+
+					let widgetCreated = true;
+					const widgetType = self.getWidgetType(inputData, inputName);
+					if(widgetType) {
+						if(widgetType === "COMBO") {
+							Object.assign(config, self.widgets.COMBO(this, inputName, inputData, app) || {});
+						} else {
+							Object.assign(config, self.widgets[widgetType](this, inputName, inputData, app) || {});
+						}
+					} else {
+						// Node connection inputs
+						this.addInput(inputName, type);
+						widgetCreated = false;
+					}
+
+					if(widgetCreated && inputData[1]?.forceInput && config?.widget) {
+						if (!config.widget.options) config.widget.options = {};
+						config.widget.options.forceInput = inputData[1].forceInput;
+					}
+					if(widgetCreated && inputData[1]?.defaultInput && config?.widget) {
+						if (!config.widget.options) config.widget.options = {};
+						config.widget.options.defaultInput = inputData[1].defaultInput;
+					}
+				}
+
+				for (const o in nodeData["output"]) {
+					let output = nodeData["output"][o];
+					if(output instanceof Array) output = "COMBO";
+					const outputName = nodeData["output_name"][o] || output;
+					const outputShape = nodeData["output_is_list"][o] ? LiteGraph.GRID_SHAPE : LiteGraph.CIRCLE_SHAPE ;
+					this.addOutput(outputName, output, { shape: outputShape });
+				}
+
+				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.display_name || nodeData.name,
+				comfyClass: nodeData.name,
+				nodeData
+			}
+		);
+		node.prototype.comfyClass = nodeData.name;
+
+		this.#addNodeContextMenuHandler(node);
+		this.#addDrawBackgroundHandler(node, app);
+		this.#addNodeKeyHandler(node);
+
+		await this.#invokeExtensionsAsync("beforeRegisterNodeDef", node, nodeData);
+		LiteGraph.registerNodeType(nodeId, node);
+		node.category = nodeData.category;
+	}
+
+    async registerNodesFromDefs(defs) {
+		await this.#invokeExtensionsAsync("addCustomNodeDefs", defs);
+
+		// Generate list of known widgets
+		this.widgets = Object.assign(
+			{},
+			ComfyWidgets,
+			...(await this.#invokeExtensionsAsync("getCustomWidgets")).filter(Boolean)
+		);
+
+		// Register a node for each definition
+		for (const nodeId in defs) {
+			this.registerNodeDef(nodeId, defs[nodeId]);
+		}
+	}
+
+	loadTemplateData(templateData) {
+		if (!templateData?.templates) {
+			return;
+		}
+
+		const old = localStorage.getItem("litegrapheditor_clipboard");
+
+		var maxY, nodeBottom, node;
+
+		for (const template of templateData.templates) {
+			if (!template?.data) {
+				continue;
+			}
+
+			localStorage.setItem("litegrapheditor_clipboard", template.data);
+			app.canvas.pasteFromClipboard();
+
+			// Move mouse position down to paste the next template below
+
+			maxY = false;
+
+			for (const i in app.canvas.selected_nodes) {
+				node = app.canvas.selected_nodes[i];
+
+				nodeBottom = node.pos[1] + node.size[1];
+
+				if (maxY === false || nodeBottom > maxY) {
+					maxY = nodeBottom;
+				}
+			}
+
+			app.canvas.graph_mouse[1] = maxY + 50;
+		}
+
+		localStorage.setItem("litegrapheditor_clipboard", old);
+	}
+
+	showMissingNodesError(missingNodeTypes, hasAddedNodes = true) {
+		let seenTypes = new Set();
+
+		this.ui.dialog.show(
+			$el("div.comfy-missing-nodes", [
+				$el("span", { textContent: "When loading the graph, the following node types were not found: " }),
+				$el(
+					"ul",
+					Array.from(new Set(missingNodeTypes)).map((t) => {
+						let children = [];
+						if (typeof t === "object") {
+							if(seenTypes.has(t.type)) return null;
+							seenTypes.add(t.type);
+							children.push($el("span", { textContent: t.type }));
+							if (t.hint) {
+								children.push($el("span", { textContent: t.hint }));
+							}
+							if (t.action) {
+								children.push($el("button", { onclick: t.action.callback, textContent: t.action.text }));
+							}
+						} else {
+							if(seenTypes.has(t)) return null;
+							seenTypes.add(t);
+							children.push($el("span", { textContent: t }));
+						}
+						return $el("li", children);
+					}).filter(Boolean)
+				),
+				...(hasAddedNodes
+					? [$el("span", { textContent: "Nodes that have failed to load will show as red on the graph." })]
+					: []),
+			])
+		);
+		this.logging.addEntry("Comfy.App", "warn", {
+			MissingNodes: missingNodeTypes,
+		});
+	}
+
+	async changeWorkflow(callback, workflow = null) {
+		try {
+			this.workflowManager.activeWorkflow?.changeTracker?.store()
+		} catch (error) {
+			console.error(error);
+		}
+		await callback();
+		try {
+			this.workflowManager.setWorkflow(workflow);
+			this.workflowManager.activeWorkflow?.track()
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	/**
+	 * Populates the graph with the specified workflow data
+	 * @param {*} graphData A serialized graph object
+	 * @param { boolean } clean If the graph state, e.g. images, should be cleared
+	 * @param { boolean } restore_view If the graph position should be restored
+	 * @param { import("./workflows.js").ComfyWorkflowInstance | null } workflow The workflow
+	 */
+	async loadGraphData(graphData, clean = true, restore_view = true, workflow = null) {
+		if (clean !== false) {
+			this.clean();
+		}
+
+		let reset_invalid_values = false;
+		if (!graphData) {
+			graphData = defaultGraph;
+			reset_invalid_values = true;
+		}
+
+		if (typeof structuredClone === "undefined")
+		{
+			graphData = JSON.parse(JSON.stringify(graphData));
+		}else
+		{
+			graphData = structuredClone(graphData);
+		}
+	
+		try {
+			this.workflowManager.setWorkflow(workflow);
+		} catch (error) {
+			console.error(error);
+		}
+
+		const missingNodeTypes = [];
+		await this.#invokeExtensionsAsync("beforeConfigureGraph", graphData, missingNodeTypes);
+		for (let n of graphData.nodes) {
+			// Patch T2IAdapterLoader to ControlNetLoader since they are the same node now
+			if (n.type == "T2IAdapterLoader") n.type = "ControlNetLoader";
+			if (n.type == "ConditioningAverage ") n.type = "ConditioningAverage"; //typo fix
+			if (n.type == "SDV_img2vid_Conditioning") n.type = "SVD_img2vid_Conditioning"; //typo fix
+
+			// Find missing node types
+			if (!(n.type in LiteGraph.registered_node_types)) {
+				missingNodeTypes.push(n.type);
+				n.type = sanitizeNodeName(n.type);
+			}
+		}
+
+		try {
+			this.graph.configure(graphData);
+			if (restore_view && this.enableWorkflowViewRestore.value && graphData.extra?.ds) {
+				this.canvas.ds.offset = graphData.extra.ds.offset;
+				this.canvas.ds.scale = graphData.extra.ds.scale;
+			}
+			
+			try {
+				this.workflowManager.activeWorkflow?.track()
+			} catch (error) {
+			}
+		} catch (error) {
+			let errorHint = [];
+			// Try extracting filename to see if it was caused by an extension script
+			const filename = error.fileName || (error.stack || "").match(/(\/extensions\/.*\.js)/)?.[1];
+			const pos = (filename || "").indexOf("/extensions/");
+			if (pos > -1) {
+				errorHint.push(
+					$el("span", { textContent: "This may be due to the following script:" }),
+					$el("br"),
+					$el("span", {
+						style: {
+							fontWeight: "bold",
+						},
+						textContent: filename.substring(pos),
+					})
+				);
+			}
+
+			// Show dialog to let the user know something went wrong loading the data
+			this.ui.dialog.show(
+				$el("div", [
+					$el("p", { textContent: "Loading aborted due to error reloading workflow data" }),
+					$el("pre", {
+						style: { padding: "5px", backgroundColor: "rgba(255,0,0,0.2)" },
+						textContent: error.toString(),
+					}),
+					$el("pre", {
+						style: {
+							padding: "5px",
+							color: "#ccc",
+							fontSize: "10px",
+							maxHeight: "50vh",
+							overflow: "auto",
+							backgroundColor: "rgba(0,0,0,0.2)",
+						},
+						textContent: error.stack || "No stacktrace available",
+					}),
+					...errorHint,
+				]).outerHTML
+			);
+
+			return;
+		}
+
+		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);
+							}
+							if (widget.value === "euler_pp" || widget.value === "euler_ancestral_pp") {
+								widget.value = widget.value.slice(0, -3);
+								for (let w of node.widgets) {
+									if (w.name == "cfg") {
+										w.value *= 2.0;
+									}
+								}
+							}
+						}
+					}
+					if (node.type == "KSampler" || node.type == "KSamplerAdvanced" || node.type == "PrimitiveNode") {
+						if (widget.name == "control_after_generate") {
+							if (widget.value === true) {
+								widget.value = "randomize";
+							} else if (widget.value === false) {
+								widget.value = "fixed";
+							}
+						}
+					}
+					if (reset_invalid_values) {
+						if (widget.type == "combo") {
+							if (!widget.options.values.includes(widget.value) && widget.options.values.length > 0) {
+								widget.value = widget.options.values[0];
+							}
+						}
+					}
+				}
+			}
+
+			this.#invokeExtensions("loadedGraphNode", node);
+		}
+
+		if (missingNodeTypes.length) {
+			this.showMissingNodesError(missingNodeTypes);
+		}
+		await this.#invokeExtensionsAsync("afterConfigureGraph", missingNodeTypes);
+		requestAnimationFrame(() => {
+			this.graph.setDirtyCanvas(true, true);
+		});
+	}
+
+	/**
+	 * Converts the current graph workflow for sending to the API
+	 * @returns The workflow and node links
+	 */
+	async graphToPrompt(graph = this.graph, clean = true) {
+		for (const outerNode of graph.computeExecutionOrder(false)) {
+			if (outerNode.widgets) {
+				for (const widget of outerNode.widgets) {
+					// Allow widgets to run callbacks before a prompt has been queued
+					// e.g. random seed before every gen
+					widget.beforeQueued?.();
+				}
+			}
+
+			const innerNodes = outerNode.getInnerNodes ? outerNode.getInnerNodes() : [outerNode];
+			for (const node of innerNodes) {
+				if (node.isVirtualNode) {
+					// Don't serialize frontend only nodes but let them make changes
+					if (node.applyToGraph) {
+						node.applyToGraph();
+					}
+				}
+			}
+		}
+
+		const workflow = graph.serialize();
+		const output = {};
+		// Process nodes in order of execution
+		for (const outerNode of graph.computeExecutionOrder(false)) {
+			const skipNode = outerNode.mode === 2 || outerNode.mode === 4;
+			const innerNodes = (!skipNode && outerNode.getInnerNodes) ? outerNode.getInnerNodes() : [outerNode];
+			for (const node of innerNodes) {
+				if (node.isVirtualNode) {
+					continue;
+				}
+
+				if (node.mode === 2 || node.mode === 4) {
+					// 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(node, 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.mode === 4 || parent.isVirtualNode) {
+							let found = false;
+							if (parent.isVirtualNode) {
+								link = parent.getInputLink(link.origin_slot);
+								if (link) {
+									parent = parent.getInputNode(link.target_slot);
+									if (parent) {
+										found = true;
+									}
+								}
+							} else if (link && parent.mode === 4) {
+								let all_inputs = [link.origin_slot];
+								if (parent.inputs) {
+									all_inputs = all_inputs.concat(Object.keys(parent.inputs))
+									for (let parent_input in all_inputs) {
+										parent_input = all_inputs[parent_input];
+										if (parent.inputs[parent_input]?.type === node.inputs[i].type) {
+											link = parent.getInputLink(parent_input);
+											if (link) {
+												parent = parent.getInputNode(parent_input);
+											}
+											found = true;
+											break;
+										}
+									}
+								}
+							}
+
+							if (!found) {
+								break;
+							}
+						}
+
+						if (link) {
+							if (parent?.updateLink) {
+								link = parent.updateLink(link);
+							}
+							if (link) {
+								inputs[node.inputs[i].name] = [String(link.origin_id), parseInt(link.origin_slot)];
+							}
+						}
+					}
+				}
+
+				let node_data = {
+					inputs,
+					class_type: node.comfyClass,
+				};
+
+				if (this.ui.settings.getSettingValue("Comfy.DevMode")) {
+					// Ignored by the backend.
+					node_data["_meta"] = {
+						title: node.title,
+					}
+				}
+
+				output[String(node.id)] = node_data;
+			}
+		}
+
+		// Remove inputs connected to removed nodes
+		if(clean) {
+			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 };
+	}
+
+	#formatPromptError(error) {
+		if (error == null) {
+			return "(unknown error)"
+		}
+		else if (typeof error === "string") {
+			return error;
+		}
+		else if (error.stack && error.message) {
+			return error.toString()
+		}
+		else if (error.response) {
+			let message = error.response.error.message;
+			if (error.response.error.details)
+			message += ": " + error.response.error.details;
+			for (const [nodeID, nodeError] of Object.entries(error.response.node_errors)) {
+			message += "\n" + nodeError.class_type + ":"
+				for (const errorReason of nodeError.errors) {
+					message += "\n    - " + errorReason.message + ": " + errorReason.details
+				}
+			}
+			return message
+		}
+		return "(unknown error)"
+	}
+
+	#formatExecutionError(error) {
+		if (error == null) {
+			return "(unknown error)"
+		}
+
+		const traceback = error.traceback.join("")
+		const nodeId = error.node_id
+		const nodeType = error.node_type
+
+		return `Error occurred when executing ${nodeType}:\n\n${error.exception_message}\n\n${traceback}`
+	}
+
+	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;
+		this.lastNodeErrors = null;
+
+		try {
+			while (this.#queueItems.length) {
+				({ number, batchCount } = this.#queueItems.pop());
+
+				for (let i = 0; i < batchCount; i++) {
+					const p = await this.graphToPrompt();
+
+					try {
+						const res = await api.queuePrompt(number, p);
+						this.lastNodeErrors = res.node_errors;
+						if (this.lastNodeErrors.length > 0) {
+							this.canvas.draw(true, true);
+						} else {
+							try {
+								this.workflowManager.storePrompt({
+									id: res.prompt_id,
+									nodes: Object.keys(p.output)
+								});
+							} catch (error) {
+							}
+						}
+					} catch (error) {
+						const formattedError = this.#formatPromptError(error)
+						this.ui.dialog.show(formattedError);
+						if (error.response) {
+							this.lastNodeErrors = error.response.node_errors;
+							this.canvas.draw(true, true);
+						}
+						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;
+		}
+		api.dispatchEvent(new CustomEvent("promptQueued", { detail: { number, batchCount } }));
+		return !this.lastNodeErrors;
+	}
+
+	showErrorOnFileLoad(file) {
+		this.ui.dialog.show(
+			$el("div", [
+				$el("p", {textContent: `Unable to find workflow in ${file.name}`})
+			]).outerHTML
+		);
+	}
+
+	/**
+	 * Loads workflow data from the specified file
+	 * @param {File} file
+	 */
+	async handleFile(file) {
+		const removeExt = f => {
+			if(!f) return f;
+			const p = f.lastIndexOf(".");
+			if(p === -1) return f;
+			return f.substring(0, p);
+		};
+
+		const fileName = removeExt(file.name);
+		if (file.type === "image/png") {
+			const pngInfo = await getPngMetadata(file);
+			if (pngInfo?.workflow) {
+				await this.loadGraphData(JSON.parse(pngInfo.workflow), true, true, fileName);
+			} else if (pngInfo?.prompt) {
+				this.loadApiJson(JSON.parse(pngInfo.prompt), fileName);
+			} else if (pngInfo?.parameters) {
+				this.changeWorkflow(() => {
+					importA1111(this.graph, pngInfo.parameters);
+				}, fileName)
+			} else {
+				this.showErrorOnFileLoad(file);
+			}
+		} else if (file.type === "image/webp") {
+			const pngInfo = await getWebpMetadata(file);
+			// Support loading workflows from that webp custom node.
+			const workflow = pngInfo?.workflow || pngInfo?.Workflow;
+			const prompt = pngInfo?.prompt || pngInfo?.Prompt;
+
+			if (workflow) {
+				this.loadGraphData(JSON.parse(workflow), true, true, fileName);
+			} else if (prompt) {
+				this.loadApiJson(JSON.parse(prompt), fileName);
+			} else {
+				this.showErrorOnFileLoad(file);
+			}
+		} else if (file.type === "audio/flac" || file.type === "audio/x-flac") {
+			const pngInfo = await getFlacMetadata(file);
+			// Support loading workflows from that webp custom node.
+			const workflow = pngInfo?.workflow;
+			const prompt = pngInfo?.prompt;
+
+			if (workflow) {
+				this.loadGraphData(JSON.parse(workflow), true, true, fileName);
+			} else if (prompt) {
+				this.loadApiJson(JSON.parse(prompt), fileName);
+			} else {
+				this.showErrorOnFileLoad(file);
+			}
+		} else if (file.type === "application/json" || file.name?.endsWith(".json")) {
+			const reader = new FileReader();
+			reader.onload = async () => {
+				const jsonContent = JSON.parse(reader.result);
+				if (jsonContent?.templates) {
+					this.loadTemplateData(jsonContent);
+				} else if(this.isApiJson(jsonContent)) {
+					this.loadApiJson(jsonContent, fileName);
+				} else {
+					await this.loadGraphData(jsonContent, true, true, fileName);
+				}
+			};
+			reader.readAsText(file);
+		} else if (file.name?.endsWith(".latent") || file.name?.endsWith(".safetensors")) {
+			const info = await getLatentMetadata(file);
+			if (info.workflow) {
+				await this.loadGraphData(JSON.parse(info.workflow), true, true, fileName);
+			} else if (info.prompt) {
+				this.loadApiJson(JSON.parse(info.prompt));
+			} else {
+				this.showErrorOnFileLoad(file);
+			}
+		} else {
+			this.showErrorOnFileLoad(file);
+		}
+	}
+
+	isApiJson(data) {
+		return Object.values(data).every((v) => v.class_type);
+	}
+
+	loadApiJson(apiData, fileName) {
+		const missingNodeTypes = Object.values(apiData).filter((n) => !LiteGraph.registered_node_types[n.class_type]);
+		if (missingNodeTypes.length) {
+			this.showMissingNodesError(missingNodeTypes.map(t => t.class_type), false);
+			return;
+		}
+
+		const ids = Object.keys(apiData);
+		app.graph.clear();
+		for (const id of ids) {
+			const data = apiData[id];
+			const node = LiteGraph.createNode(data.class_type);
+			node.id = isNaN(+id) ? id : +id;
+			node.title = data._meta?.title ?? node.title
+			app.graph.add(node);
+		}
+
+		this.changeWorkflow(() => {
+			for (const id of ids) {
+				const data = apiData[id];
+				const node = app.graph.getNodeById(id);
+				for (const input in data.inputs ?? {}) {
+					const value = data.inputs[input];
+					if (value instanceof Array) {
+						const [fromId, fromSlot] = value;
+						const fromNode = app.graph.getNodeById(fromId);
+						let toSlot = node.inputs?.findIndex((inp) => inp.name === input);
+						if (toSlot == null || toSlot === -1) {
+							try {
+								// Target has no matching input, most likely a converted widget
+								const widget = node.widgets?.find((w) => w.name === input);
+								if (widget && node.convertWidgetToInput?.(widget)) {
+									toSlot = node.inputs?.length - 1;
+								}
+							} catch (error) {}
+						}
+						if (toSlot != null || toSlot !== -1) {
+							fromNode.connect(fromSlot, node, toSlot);
+						}
+					} else {
+						const widget = node.widgets?.find((w) => w.name === input);
+						if (widget) {
+							widget.value = value;
+							widget.callback?.(value);
+						}
+					}
+				}
+			}
+			app.graph.arrange();
+		}, fileName);
+	}
+
+	/**
+	 * Registers a Comfy web extension with the app
+	 * @param {ComfyExtension} extension
+	 */
+	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 (const nodeId in defs) {
+			this.registerNodeDef(nodeId, defs[nodeId]);
+		}
+
+		for(let nodeNum in this.graph._nodes) {
+			const node = this.graph._nodes[nodeNum];
+			const def = defs[node.type];
+
+			// Allow primitive nodes to handle refresh
+			node.refreshComboInNode?.(defs);
+
+			if(!def)
+				continue;
+
+			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.name != 'image' && !widget.options.values.includes(widget.value)) {
+						widget.value = widget.options.values[0];
+						widget.callback(widget.value);
+					}
+				}
+			}
+		}
+
+		await this.#invokeExtensionsAsync("refreshComboInNodes", defs);
+	}
+
+	resetView() {
+		app.canvas.ds.scale = 1;
+		app.canvas.ds.offset = [0, 0]
+		app.graph.setDirtyCanvas(true, true);
+	}
+
+	/**
+	 * Clean current state
+	 */
+	clean() {
+		this.nodeOutputs = {};
+		this.nodePreviewImages = {}
+		this.lastNodeErrors = null;
+		this.lastExecutionError = null;
+		this.runningNodeId = null;
+	}
+}
+
+export const app = new ComfyApp();

ComfyUI/web/scripts/changeTracker.js

@@ -0,0 +1,255 @@
+// @ts-check
+
+import { api } from "./api.js";
+import { clone } from "./utils.js";
+
+export class ChangeTracker {
+	static MAX_HISTORY = 50;
+	#app;
+	undo = [];
+	redo = [];
+	activeState = null;
+	isOurLoad = false;
+	/** @type { import("./workflows").ComfyWorkflow | null } */
+	workflow;
+
+	ds;
+	nodeOutputs;
+
+	get app() {
+		return this.#app ?? this.workflow.manager.app;
+	}
+
+	constructor(workflow) {
+		this.workflow = workflow;
+	}
+
+	#setApp(app) {
+		this.#app = app;
+	}
+
+	store() {
+		this.ds = { scale: this.app.canvas.ds.scale, offset: [...this.app.canvas.ds.offset] };
+	}
+
+	restore() {
+		if (this.ds) {
+			this.app.canvas.ds.scale = this.ds.scale;
+			this.app.canvas.ds.offset = this.ds.offset;
+		}
+		if (this.nodeOutputs) {
+			this.app.nodeOutputs = this.nodeOutputs;
+		}
+	}
+
+	checkState() {
+		if (!this.app.graph) return;
+
+		const currentState = this.app.graph.serialize();
+		if (!this.activeState) {
+			this.activeState = clone(currentState);
+			return;
+		}
+		if (!ChangeTracker.graphEqual(this.activeState, currentState)) {
+			this.undo.push(this.activeState);
+			if (this.undo.length > ChangeTracker.MAX_HISTORY) {
+				this.undo.shift();
+			}
+			this.activeState = clone(currentState);
+			this.redo.length = 0;
+			this.workflow.unsaved = true;
+			api.dispatchEvent(new CustomEvent("graphChanged", { detail: this.activeState }));
+		}
+	}
+
+	async updateState(source, target) {
+		const prevState = source.pop();
+		if (prevState) {
+			target.push(this.activeState);
+			this.isOurLoad = true;
+			await this.app.loadGraphData(prevState, false, false, this.workflow);
+			this.activeState = prevState;
+		}
+	}
+
+	async undoRedo(e) {
+		if (e.ctrlKey || e.metaKey) {
+			if (e.key === "y") {
+				this.updateState(this.redo, this.undo);
+				return true;
+			} else if (e.key === "z") {
+				this.updateState(this.undo, this.redo);
+				return true;
+			}
+		}
+	}
+
+	/** @param { import("./app.js").ComfyApp } app */
+	static init(app) {
+		const changeTracker = () => app.workflowManager.activeWorkflow?.changeTracker ?? globalTracker;
+		globalTracker.#setApp(app);
+
+		const loadGraphData = app.loadGraphData;
+		app.loadGraphData = async function () {
+			const v = await loadGraphData.apply(this, arguments);
+			const ct = changeTracker();
+			if (ct.isOurLoad) {
+				ct.isOurLoad = false;
+			} else {
+				ct.checkState();
+			}
+			return v;
+		};
+
+		let keyIgnored = false;
+		window.addEventListener(
+			"keydown",
+			(e) => {
+				const activeEl = document.activeElement;
+				requestAnimationFrame(async () => {
+					let bindInputEl;
+					// If we are auto queue in change mode then we do want to trigger on inputs
+					if (!app.ui.autoQueueEnabled || app.ui.autoQueueMode === "instant") {
+						if (activeEl?.tagName === "INPUT" || activeEl?.["type"] === "textarea") {
+							// Ignore events on inputs, they have their native history
+							return;
+						}
+						bindInputEl = activeEl;
+					}
+
+					keyIgnored = e.key === "Control" || e.key === "Shift" || e.key === "Alt" || e.key === "Meta";
+					if (keyIgnored) return;
+
+					// Check if this is a ctrl+z ctrl+y
+					if (await changeTracker().undoRedo(e)) return;
+
+					// If our active element is some type of input then handle changes after they're done
+					if (ChangeTracker.bindInput(bindInputEl)) return;
+					changeTracker().checkState();
+				});
+			},
+			true
+		);
+
+		window.addEventListener("keyup", (e) => {
+			if (keyIgnored) {
+				keyIgnored = false;
+				changeTracker().checkState();
+			}
+		});
+
+		// Handle clicking DOM elements (e.g. widgets)
+		window.addEventListener("mouseup", () => {
+			changeTracker().checkState();
+		});
+
+		// Handle prompt queue event for dynamic widget changes
+		api.addEventListener("promptQueued", () => {
+			changeTracker().checkState();
+		});
+
+		// Handle litegraph clicks
+		const processMouseUp = LGraphCanvas.prototype.processMouseUp;
+		LGraphCanvas.prototype.processMouseUp = function (e) {
+			const v = processMouseUp.apply(this, arguments);
+			changeTracker().checkState();
+			return v;
+		};
+		const processMouseDown = LGraphCanvas.prototype.processMouseDown;
+		LGraphCanvas.prototype.processMouseDown = function (e) {
+			const v = processMouseDown.apply(this, arguments);
+			changeTracker().checkState();
+			return v;
+		};
+
+		// Handle litegraph context menu for COMBO widgets
+		const close = LiteGraph.ContextMenu.prototype.close;
+		LiteGraph.ContextMenu.prototype.close = function (e) {
+			const v = close.apply(this, arguments);
+			changeTracker().checkState();
+			return v;
+		};
+
+		// Detects nodes being added via the node search dialog
+		const onNodeAdded = LiteGraph.LGraph.prototype.onNodeAdded;
+		LiteGraph.LGraph.prototype.onNodeAdded = function () {
+			const v = onNodeAdded?.apply(this, arguments);
+			if (!app?.configuringGraph) {
+				const ct = changeTracker();
+				if (!ct.isOurLoad) {
+					ct.checkState();
+				}
+			}
+			return v;
+		};
+
+		// Store node outputs
+		api.addEventListener("executed", ({ detail }) => {
+			const prompt = app.workflowManager.queuedPrompts[detail.prompt_id];
+			if (!prompt?.workflow) return;
+			const nodeOutputs = (prompt.workflow.changeTracker.nodeOutputs ??= {});
+			const output = nodeOutputs[detail.node];
+			if (detail.merge && output) {
+				for (const k in detail.output ?? {}) {
+					const v = output[k];
+					if (v instanceof Array) {
+						output[k] = v.concat(detail.output[k]);
+					} else {
+						output[k] = detail.output[k];
+					}
+				}
+			} else {
+				nodeOutputs[detail.node] = detail.output;
+			}
+		});
+	}
+
+	static bindInput(app, activeEl) {
+		if (activeEl && activeEl.tagName !== "CANVAS" && activeEl.tagName !== "BODY") {
+			for (const evt of ["change", "input", "blur"]) {
+				if (`on${evt}` in activeEl) {
+					const listener = () => {
+						app.workflowManager.activeWorkflow.changeTracker.checkState();
+						activeEl.removeEventListener(evt, listener);
+					};
+					activeEl.addEventListener(evt, listener);
+					return true;
+				}
+			}
+		}
+	}
+
+	static graphEqual(a, b, path = "") {
+		if (a === b) return true;
+
+		if (typeof a == "object" && a && typeof b == "object" && b) {
+			const keys = Object.getOwnPropertyNames(a);
+
+			if (keys.length != Object.getOwnPropertyNames(b).length) {
+				return false;
+			}
+
+			for (const key of keys) {
+				let av = a[key];
+				let bv = b[key];
+				if (!path && key === "nodes") {
+					// Nodes need to be sorted as the order changes when selecting nodes
+					av = [...av].sort((a, b) => a.id - b.id);
+					bv = [...bv].sort((a, b) => a.id - b.id);
+				} else if (path === "extra.ds") {
+					// Ignore view changes
+					continue;
+				}
+				if (!ChangeTracker.graphEqual(av, bv, path + (path ? "." : "") + key)) {
+					return false;
+				}
+			}
+
+			return true;
+		}
+
+		return false;
+	}
+}
+
+const globalTracker = new ChangeTracker({});

ComfyUI/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: ["text, watermark"],
+		},
+		{
+			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: ["beautiful scenery nature glass bottle landscape, , purple galaxy bottle,"],
+		},
+		{
+			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: [156680208700286, 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,
+};

ComfyUI/web/scripts/domWidget.js

@@ -0,0 +1,329 @@
+import { app, ANIM_PREVIEW_WIDGET } from "./app.js";
+
+const SIZE = Symbol();
+
+function intersect(a, b) {
+	const x = Math.max(a.x, b.x);
+	const num1 = Math.min(a.x + a.width, b.x + b.width);
+	const y = Math.max(a.y, b.y);
+	const num2 = Math.min(a.y + a.height, b.y + b.height);
+	if (num1 >= x && num2 >= y) return [x, y, num1 - x, num2 - y];
+	else return null;
+}
+
+function getClipPath(node, element) {
+	const selectedNode = Object.values(app.canvas.selected_nodes)[0];
+	if (selectedNode && selectedNode !== node) {
+		const elRect = element.getBoundingClientRect();
+		const MARGIN = 7;
+		const scale = app.canvas.ds.scale;
+
+		const bounding = selectedNode.getBounding();
+		const intersection = intersect(
+			{ x: elRect.x / scale, y: elRect.y / scale, width: elRect.width / scale, height: elRect.height / scale },
+			{
+				x: selectedNode.pos[0] + app.canvas.ds.offset[0] - MARGIN,
+				y: selectedNode.pos[1] + app.canvas.ds.offset[1] - LiteGraph.NODE_TITLE_HEIGHT - MARGIN,
+				width: bounding[2] + MARGIN + MARGIN,
+				height: bounding[3] + MARGIN + MARGIN,
+			}
+		);
+
+		if (!intersection) {
+			return "";
+		}
+
+		const widgetRect = element.getBoundingClientRect();
+		const clipX = elRect.left + intersection[0] - widgetRect.x / scale + "px";
+		const clipY = elRect.top + intersection[1] - widgetRect.y / scale + "px";
+		const clipWidth = intersection[2] + "px";
+		const clipHeight = intersection[3] + "px";
+		const path = `polygon(0% 0%, 0% 100%, ${clipX} 100%, ${clipX} ${clipY}, calc(${clipX} + ${clipWidth}) ${clipY}, calc(${clipX} + ${clipWidth}) calc(${clipY} + ${clipHeight}), ${clipX} calc(${clipY} + ${clipHeight}), ${clipX} 100%, 100% 100%, 100% 0%)`;
+		return path;
+	}
+	return "";
+}
+
+function computeSize(size) {
+	if (this.widgets?.[0]?.last_y == null) return;
+
+	let y = this.widgets[0].last_y;
+	let freeSpace = size[1] - y;
+
+	let widgetHeight = 0;
+	let dom = [];
+	for (const w of this.widgets) {
+		if (w.type === "converted-widget") {
+			// Ignore
+			delete w.computedHeight;
+		} else if (w.computeSize) {
+			widgetHeight += w.computeSize()[1] + 4;
+		} else if (w.element) {
+			// Extract DOM widget size info
+			const styles = getComputedStyle(w.element);
+			let minHeight = w.options.getMinHeight?.() ?? parseInt(styles.getPropertyValue("--comfy-widget-min-height"));
+			let maxHeight = w.options.getMaxHeight?.() ?? parseInt(styles.getPropertyValue("--comfy-widget-max-height"));
+
+			let prefHeight = w.options.getHeight?.() ?? styles.getPropertyValue("--comfy-widget-height");
+			if (prefHeight.endsWith?.("%")) {
+				prefHeight = size[1] * (parseFloat(prefHeight.substring(0, prefHeight.length - 1)) / 100);
+			} else {
+				prefHeight = parseInt(prefHeight);
+				if (isNaN(minHeight)) {
+					minHeight = prefHeight;
+				}
+			}
+			if (isNaN(minHeight)) {
+				minHeight = 50;
+			}
+			if (!isNaN(maxHeight)) {
+				if (!isNaN(prefHeight)) {
+					prefHeight = Math.min(prefHeight, maxHeight);
+				} else {
+					prefHeight = maxHeight;
+				}
+			}
+			dom.push({
+				minHeight,
+				prefHeight,
+				w,
+			});
+		} else {
+			widgetHeight += LiteGraph.NODE_WIDGET_HEIGHT + 4;
+		}
+	}
+
+	freeSpace -= widgetHeight;
+
+	// Calculate sizes with all widgets at their min height
+	const prefGrow = []; // Nodes that want to grow to their prefd size
+	const canGrow = []; // Nodes that can grow to auto size
+	let growBy = 0;
+	for (const d of dom) {
+		freeSpace -= d.minHeight;
+		if (isNaN(d.prefHeight)) {
+			canGrow.push(d);
+			d.w.computedHeight = d.minHeight;
+		} else {
+			const diff = d.prefHeight - d.minHeight;
+			if (diff > 0) {
+				prefGrow.push(d);
+				growBy += diff;
+				d.diff = diff;
+			} else {
+				d.w.computedHeight = d.minHeight;
+			}
+		}
+	}
+
+	if (this.imgs && !this.widgets.find((w) => w.name === ANIM_PREVIEW_WIDGET)) {
+		// Allocate space for image
+		freeSpace -= 220;
+	}
+
+	this.freeWidgetSpace = freeSpace;
+
+	if (freeSpace < 0) {
+		// Not enough space for all widgets so we need to grow
+		size[1] -= freeSpace;
+		this.graph.setDirtyCanvas(true);
+	} else {
+		// Share the space between each
+		const growDiff = freeSpace - growBy;
+		if (growDiff > 0) {
+			// All pref sizes can be fulfilled
+			freeSpace = growDiff;
+			for (const d of prefGrow) {
+				d.w.computedHeight = d.prefHeight;
+			}
+		} else {
+			// We need to grow evenly
+			const shared = -growDiff / prefGrow.length;
+			for (const d of prefGrow) {
+				d.w.computedHeight = d.prefHeight - shared;
+			}
+			freeSpace = 0;
+		}
+
+		if (freeSpace > 0 && canGrow.length) {
+			// Grow any that are auto height
+			const shared = freeSpace / canGrow.length;
+			for (const d of canGrow) {
+				d.w.computedHeight += shared;
+			}
+		}
+	}
+
+	// Position each of the widgets
+	for (const w of this.widgets) {
+		w.y = y;
+		if (w.computedHeight) {
+			y += w.computedHeight;
+		} else if (w.computeSize) {
+			y += w.computeSize()[1] + 4;
+		} else {
+			y += LiteGraph.NODE_WIDGET_HEIGHT + 4;
+		}
+	}
+}
+
+// Override the compute visible nodes function to allow us to hide/show DOM elements when the node goes offscreen
+const elementWidgets = new Set();
+const computeVisibleNodes = LGraphCanvas.prototype.computeVisibleNodes;
+LGraphCanvas.prototype.computeVisibleNodes = function () {
+	const visibleNodes = computeVisibleNodes.apply(this, arguments);
+	for (const node of app.graph._nodes) {
+		if (elementWidgets.has(node)) {
+			const hidden = visibleNodes.indexOf(node) === -1;
+			for (const w of node.widgets) {
+				if (w.element) {
+					w.element.hidden = hidden;
+					w.element.style.display = hidden ? "none" : undefined;
+					if (hidden) {
+						w.options.onHide?.(w);
+					}
+				}
+			}
+		}
+	}
+
+	return visibleNodes;
+};
+
+let enableDomClipping = true;
+
+export function addDomClippingSetting() {
+	app.ui.settings.addSetting({
+		id: "Comfy.DOMClippingEnabled",
+		name: "Enable DOM element clipping (enabling may reduce performance)",
+		type: "boolean",
+		defaultValue: enableDomClipping,
+		onChange(value) {
+			enableDomClipping = !!value;
+		},
+	});
+}
+
+LGraphNode.prototype.addDOMWidget = function (name, type, element, options) {
+	options = { hideOnZoom: true, selectOn: ["focus", "click"], ...options };
+
+	if (!element.parentElement) {
+		document.body.append(element);
+	}
+	element.hidden = true;
+	element.style.display = "none";
+	
+	let mouseDownHandler;
+	if (element.blur) {
+		mouseDownHandler = (event) => {
+			if (!element.contains(event.target)) {
+				element.blur();
+			}
+		};
+		document.addEventListener("mousedown", mouseDownHandler);
+	}
+
+	const widget = {
+		type,
+		name,
+		get value() {
+			return options.getValue?.() ?? undefined;
+		},
+		set value(v) {
+			options.setValue?.(v);
+			widget.callback?.(widget.value);
+		},
+		draw: function (ctx, node, widgetWidth, y, widgetHeight) {
+			if (widget.computedHeight == null) {
+				computeSize.call(node, node.size);
+			}
+
+			const hidden =
+				node.flags?.collapsed ||
+				(!!options.hideOnZoom && app.canvas.ds.scale < 0.5) ||
+				widget.computedHeight <= 0 ||
+				widget.type === "converted-widget"||
+				widget.type === "hidden";
+			element.hidden = hidden;
+			element.style.display = hidden ? "none" : null;
+			if (hidden) {
+				widget.options.onHide?.(widget);
+				return;
+			}
+
+			const margin = 10;
+			const elRect = ctx.canvas.getBoundingClientRect();
+			const transform = new DOMMatrix()
+				.scaleSelf(elRect.width / ctx.canvas.width, elRect.height / ctx.canvas.height)
+				.multiplySelf(ctx.getTransform())
+				.translateSelf(margin, margin + y );
+
+			const scale = new DOMMatrix().scaleSelf(transform.a, transform.d);
+
+			Object.assign(element.style, {
+				transformOrigin: "0 0",
+				transform: scale,
+				left: `${transform.a + transform.e + elRect.left}px`,
+				top: `${transform.d + transform.f + elRect.top}px`,
+				width: `${widgetWidth - margin * 2}px`,
+				height: `${(widget.computedHeight ?? 50) - margin * 2}px`,
+				position: "absolute",
+				zIndex: app.graph._nodes.indexOf(node),
+			});
+
+			if (enableDomClipping) {
+				element.style.clipPath = getClipPath(node, element);
+				element.style.willChange = "clip-path";
+			}
+
+			this.options.onDraw?.(widget);
+		},
+		element,
+		options,
+		onRemove() {
+			if (mouseDownHandler) {
+				document.removeEventListener("mousedown", mouseDownHandler);
+			}
+			element.remove();
+		},
+	};
+
+	for (const evt of options.selectOn) {
+		element.addEventListener(evt, () => {
+			app.canvas.selectNode(this);
+			app.canvas.bringToFront(this);
+		});
+	}
+
+	this.addCustomWidget(widget);
+	elementWidgets.add(this);
+
+	const collapse = this.collapse;
+	this.collapse = function() {
+		collapse.apply(this, arguments);
+		if(this.flags?.collapsed) {
+			element.hidden = true;
+			element.style.display = "none";
+		}
+	}
+
+	const onRemoved = this.onRemoved;
+	this.onRemoved = function () {
+		element.remove();
+		elementWidgets.delete(this);
+		onRemoved?.apply(this, arguments);
+	};
+
+	if (!this[SIZE]) {
+		this[SIZE] = true;
+		const onResize = this.onResize;
+		this.onResize = function (size) {
+			options.beforeResize?.call(widget, this);
+			computeSize.call(this, size);
+			onResize?.apply(this, arguments);
+			options.afterResize?.call(widget, this);
+		};
+	}
+
+	return widget;
+};

ComfyUI/web/scripts/logging.js

@@ -0,0 +1,370 @@
+import { $el, ComfyDialog } from "./ui.js";
+import { api } from "./api.js";
+
+$el("style", {
+	textContent: `
+        .comfy-logging-logs {
+            display: grid;
+            color: var(--fg-color);
+            white-space: pre-wrap;
+        }
+        .comfy-logging-log {
+            display: contents;
+        }
+        .comfy-logging-title {
+            background: var(--tr-even-bg-color);
+            font-weight: bold;
+            margin-bottom: 5px;
+            text-align: center;
+        }
+        .comfy-logging-log div {
+            background: var(--row-bg);
+            padding: 5px;
+        }
+    `,
+	parent: document.body,
+});
+
+// Stringify function supporting max depth and removal of circular references
+// https://stackoverflow.com/a/57193345
+function stringify(val, depth, replacer, space, onGetObjID) {
+	depth = isNaN(+depth) ? 1 : depth;
+	var recursMap = new WeakMap();
+	function _build(val, depth, o, a, r) {
+		// (JSON.stringify() has it's own rules, which we respect here by using it for property iteration)
+		return !val || typeof val != "object"
+			? val
+			: ((r = recursMap.has(val)),
+			  recursMap.set(val, true),
+			  (a = Array.isArray(val)),
+			  r
+					? (o = (onGetObjID && onGetObjID(val)) || null)
+					: JSON.stringify(val, function (k, v) {
+							if (a || depth > 0) {
+								if (replacer) v = replacer(k, v);
+								if (!k) return (a = Array.isArray(v)), (val = v);
+								!o && (o = a ? [] : {});
+								o[k] = _build(v, a ? depth : depth - 1);
+							}
+					  }),
+			  o === void 0 ? (a ? [] : {}) : o);
+	}
+	return JSON.stringify(_build(val, depth), null, space);
+}
+
+const jsonReplacer = (k, v, ui) => {
+	if (v instanceof Array && v.length === 1) {
+		v = v[0];
+	}
+	if (v instanceof Date) {
+		v = v.toISOString();
+		if (ui) {
+			v = v.split("T")[1];
+		}
+	}
+	if (v instanceof Error) {
+		let err = "";
+		if (v.name) err += v.name + "\n";
+		if (v.message) err += v.message + "\n";
+		if (v.stack) err += v.stack + "\n";
+		if (!err) {
+			err = v.toString();
+		}
+		v = err;
+	}
+	return v;
+};
+
+const fileInput = $el("input", {
+	type: "file",
+	accept: ".json",
+	style: { display: "none" },
+	parent: document.body,
+});
+
+class ComfyLoggingDialog extends ComfyDialog {
+	constructor(logging) {
+		super();
+		this.logging = logging;
+	}
+
+	clear() {
+		this.logging.clear();
+		this.show();
+	}
+
+	export() {
+		const blob = new Blob([stringify([...this.logging.entries], 20, jsonReplacer, "\t")], {
+			type: "application/json",
+		});
+		const url = URL.createObjectURL(blob);
+		const a = $el("a", {
+			href: url,
+			download: `comfyui-logs-${Date.now()}.json`,
+			style: { display: "none" },
+			parent: document.body,
+		});
+		a.click();
+		setTimeout(function () {
+			a.remove();
+			window.URL.revokeObjectURL(url);
+		}, 0);
+	}
+
+	import() {
+		fileInput.onchange = () => {
+			const reader = new FileReader();
+			reader.onload = () => {
+				fileInput.remove();
+				try {
+					const obj = JSON.parse(reader.result);
+					if (obj instanceof Array) {
+						this.show(obj);
+					} else {
+						throw new Error("Invalid file selected.");
+					}
+				} catch (error) {
+					alert("Unable to load logs: " + error.message);
+				}
+			};
+			reader.readAsText(fileInput.files[0]);
+		};
+		fileInput.click();
+	}
+
+	createButtons() {
+		return [
+			$el("button", {
+				type: "button",
+				textContent: "Clear",
+				onclick: () => this.clear(),
+			}),
+			$el("button", {
+				type: "button",
+				textContent: "Export logs...",
+				onclick: () => this.export(),
+			}),
+			$el("button", {
+				type: "button",
+				textContent: "View exported logs...",
+				onclick: () => this.import(),
+			}),
+			...super.createButtons(),
+		];
+	}
+
+	getTypeColor(type) {
+		switch (type) {
+			case "error":
+				return "red";
+			case "warn":
+				return "orange";
+			case "debug":
+				return "dodgerblue";
+		}
+	}
+
+	show(entries) {
+		if (!entries) entries = this.logging.entries;
+		this.element.style.width = "100%";
+		const cols = {
+			source: "Source",
+			type: "Type",
+			timestamp: "Timestamp",
+			message: "Message",
+		};
+		const keys = Object.keys(cols);
+		const headers = Object.values(cols).map((title) =>
+			$el("div.comfy-logging-title", {
+				textContent: title,
+			})
+		);
+		const rows = entries.map((entry, i) => {
+			return $el(
+				"div.comfy-logging-log",
+				{
+					$: (el) => el.style.setProperty("--row-bg", `var(--tr-${i % 2 ? "even" : "odd"}-bg-color)`),
+				},
+				keys.map((key) => {
+					let v = entry[key];
+					let color;
+					if (key === "type") {
+						color = this.getTypeColor(v);
+					} else {
+						v = jsonReplacer(key, v, true);
+
+						if (typeof v === "object") {
+							v = stringify(v, 5, jsonReplacer, "  ");
+						}
+					}
+
+					return $el("div", {
+						style: {
+							color,
+						},
+						textContent: v,
+					});
+				})
+			);
+		});
+
+		const grid = $el(
+			"div.comfy-logging-logs",
+			{
+				style: {
+					gridTemplateColumns: `repeat(${headers.length}, 1fr)`,
+				},
+			},
+			[...headers, ...rows]
+		);
+		const els = [grid];
+		if (!this.logging.enabled) {
+			els.unshift(
+				$el("h3", {
+					style: { textAlign: "center" },
+					textContent: "Logging is disabled",
+				})
+			);
+		}
+		super.show($el("div", els));
+	}
+}
+
+export class ComfyLogging {
+	/**
+	 * @type Array<{ source: string, type: string, timestamp: Date, message: any }>
+	 */
+	entries = [];
+
+	#enabled;
+	#console = {};
+
+	get enabled() {
+		return this.#enabled;
+	}
+
+	set enabled(value) {
+		if (value === this.#enabled) return;
+		if (value) {
+			this.patchConsole();
+		} else {
+			this.unpatchConsole();
+		}
+		this.#enabled = value;
+	}
+
+	constructor(app) {
+		this.app = app;
+
+		this.dialog = new ComfyLoggingDialog(this);
+		this.addSetting();
+		this.catchUnhandled();
+		this.addInitData();
+	}
+
+	addSetting() {
+		const settingId = "Comfy.Logging.Enabled";
+		const htmlSettingId = settingId.replaceAll(".", "-");
+		const setting = this.app.ui.settings.addSetting({
+			id: settingId,
+			name: settingId,
+			defaultValue: true,
+			onChange: (value) => {
+				this.enabled = value;
+			},
+			type: (name, setter, value) => {
+				return $el("tr", [
+					$el("td", [
+						$el("label", {
+							textContent: "Logging",
+							for: htmlSettingId,
+						}),
+					]),
+					$el("td", [
+						$el("input", {
+							id: htmlSettingId,
+							type: "checkbox",
+							checked: value,
+							onchange: (event) => {
+								setter(event.target.checked);
+							},
+						}),
+						$el("button", {
+							textContent: "View Logs",
+							onclick: () => {
+								this.app.ui.settings.element.close();
+								this.dialog.show();
+							},
+							style: {
+								fontSize: "14px",
+								display: "block",
+								marginTop: "5px",
+							},
+						}),
+					]),
+				]);
+			},
+		});
+		this.enabled = setting.value;
+	}
+
+	patchConsole() {
+		// Capture common console outputs
+		const self = this;
+		for (const type of ["log", "warn", "error", "debug"]) {
+			const orig = console[type];
+			this.#console[type] = orig;
+			console[type] = function () {
+				orig.apply(console, arguments);
+				self.addEntry("console", type, ...arguments);
+			};
+		}
+	}
+
+	unpatchConsole() {
+		// Restore original console functions
+		for (const type of Object.keys(this.#console)) {
+			console[type] = this.#console[type];
+		}
+		this.#console = {};
+	}
+
+	catchUnhandled() {
+		// Capture uncaught errors
+		window.addEventListener("error", (e) => {
+			this.addEntry("window", "error", e.error ?? "Unknown error");
+			return false;
+		});
+
+		window.addEventListener("unhandledrejection", (e) => {
+			this.addEntry("unhandledrejection", "error", e.reason ?? "Unknown error");
+		});
+	}
+
+	clear() {
+		this.entries = [];
+	}
+
+	addEntry(source, type, ...args) {
+		if (this.enabled) {
+			this.entries.push({
+				source,
+				type,
+				timestamp: new Date(),
+				message: args,
+			});
+		}
+	}
+
+	log(source, ...args) {
+		this.addEntry(source, "log", ...args);
+	}
+
+	async addInitData() {
+		if (!this.enabled) return;
+		const source = "ComfyUI.Logging";
+		this.addEntry(source, "debug", { UserAgent: navigator.userAgent });
+		const systemStats = await api.getSystemStats();
+		this.addEntry(source, "debug", systemStats);
+	}
+}

ComfyUI/web/scripts/pnginfo.js

@@ -0,0 +1,506 @@
+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" || type == "comf" || type === "iTXt") {
+					// 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 contentArraySegment = pngData.slice(keyword_end + 1, offset + 8 + length);
+					const contentJson = new TextDecoder("utf-8").decode(contentArraySegment);
+					txt_chunks[keyword] = contentJson;
+				}
+
+				offset += 12 + length;
+			}
+
+			r(txt_chunks);
+		};
+
+		reader.readAsArrayBuffer(file);
+	});
+}
+
+function parseExifData(exifData) {
+	// Check for the correct TIFF header (0x4949 for little-endian or 0x4D4D for big-endian)
+	const isLittleEndian = String.fromCharCode(...exifData.slice(0, 2)) === "II";
+
+	// Function to read 16-bit and 32-bit integers from binary data
+	function readInt(offset, isLittleEndian, length) {
+		let arr = exifData.slice(offset, offset + length)
+		if (length === 2) {
+			return new DataView(arr.buffer, arr.byteOffset, arr.byteLength).getUint16(0, isLittleEndian);
+		} else if (length === 4) {
+			return new DataView(arr.buffer, arr.byteOffset, arr.byteLength).getUint32(0, isLittleEndian);
+		}
+	}
+
+	// Read the offset to the first IFD (Image File Directory)
+	const ifdOffset = readInt(4, isLittleEndian, 4);
+
+	function parseIFD(offset) {
+		const numEntries = readInt(offset, isLittleEndian, 2);
+		const result = {};
+
+		for (let i = 0; i < numEntries; i++) {
+			const entryOffset = offset + 2 + i * 12;
+			const tag = readInt(entryOffset, isLittleEndian, 2);
+			const type = readInt(entryOffset + 2, isLittleEndian, 2);
+			const numValues = readInt(entryOffset + 4, isLittleEndian, 4);
+			const valueOffset = readInt(entryOffset + 8, isLittleEndian, 4);
+
+			// Read the value(s) based on the data type
+			let value;
+			if (type === 2) {
+				// ASCII string
+				value = String.fromCharCode(...exifData.slice(valueOffset, valueOffset + numValues - 1));
+			}
+
+			result[tag] = value;
+		}
+
+		return result;
+	}
+
+	// Parse the first IFD
+	const ifdData = parseIFD(ifdOffset);
+	return ifdData;
+}
+
+function splitValues(input) {
+    var output = {};
+    for (var key in input) {
+		var value = input[key];
+		var splitValues = value.split(':', 2);
+		output[splitValues[0]] = splitValues[1];
+    }
+    return output;
+}
+
+export function getWebpMetadata(file) {
+	return new Promise((r) => {
+		const reader = new FileReader();
+		reader.onload = (event) => {
+			const webp = new Uint8Array(event.target.result);
+			const dataView = new DataView(webp.buffer);
+
+			// Check that the WEBP signature is present
+			if (dataView.getUint32(0) !== 0x52494646 || dataView.getUint32(8) !== 0x57454250) {
+				console.error("Not a valid WEBP file");
+				r();
+				return;
+			}
+
+			// Start searching for chunks after the WEBP signature
+			let offset = 12;
+			let txt_chunks = {};
+			// Loop through the chunks in the WEBP file
+			while (offset < webp.length) {
+				const chunk_length = dataView.getUint32(offset + 4, true);
+				const chunk_type = String.fromCharCode(...webp.slice(offset, offset + 4));
+				if (chunk_type === "EXIF") {
+					if (String.fromCharCode(...webp.slice(offset + 8, offset + 8 + 6)) == "Exif\0\0") {
+						offset += 6;
+					}
+					let data = parseExifData(webp.slice(offset + 8, offset + 8 + chunk_length));
+					for (var key in data) {
+						var value = data[key];
+						let index = value.indexOf(':');
+						txt_chunks[value.slice(0, index)] = value.slice(index + 1);
+					}
+					break;
+				}
+
+				offset += 8 + chunk_length;
+			}
+
+			r(txt_chunks);
+		};
+
+		reader.readAsArrayBuffer(file);
+	});
+}
+
+export function getLatentMetadata(file) {
+	return new Promise((r) => {
+		const reader = new FileReader();
+		reader.onload = (event) => {
+			const safetensorsData = new Uint8Array(event.target.result);
+			const dataView = new DataView(safetensorsData.buffer);
+			let header_size = dataView.getUint32(0, true);
+			let offset = 8;
+			let header = JSON.parse(new TextDecoder().decode(safetensorsData.slice(offset, offset + header_size)));
+			r(header.__metadata__);
+		};
+
+		var slice = file.slice(0, 1024 * 1024 * 4);
+		reader.readAsArrayBuffer(slice);
+	});
+}
+
+
+function getString(dataView, offset, length) {
+	let string = '';
+	for (let i = 0; i < length; i++) {
+		string += String.fromCharCode(dataView.getUint8(offset + i));
+	}
+	return string;
+}
+
+// Function to parse the Vorbis Comment block
+function parseVorbisComment(dataView) {
+	let offset = 0;
+	const vendorLength = dataView.getUint32(offset, true);
+	offset += 4;
+	const vendorString = getString(dataView, offset, vendorLength);
+	offset += vendorLength;
+
+	const userCommentListLength = dataView.getUint32(offset, true);
+	offset += 4;
+	const comments = {};
+	for (let i = 0; i < userCommentListLength; i++) {
+		const commentLength = dataView.getUint32(offset, true);
+		offset += 4;
+		const comment = getString(dataView, offset, commentLength);
+		offset += commentLength;
+
+		const [key, value] = comment.split('=');
+
+		comments[key] = value;
+	}
+
+	return comments;
+}
+
+// Function to read a FLAC file and parse Vorbis comments
+export function getFlacMetadata(file) {
+	return new Promise((r) => {
+		const reader = new FileReader();
+		reader.onload = function(event) {
+			const arrayBuffer = event.target.result;
+			const dataView = new DataView(arrayBuffer);
+
+			// Verify the FLAC signature
+			const signature = String.fromCharCode(...new Uint8Array(arrayBuffer, 0, 4));
+			if (signature !== 'fLaC') {
+				console.error('Not a valid FLAC file');
+				return;
+			}
+
+			// Parse metadata blocks
+			let offset = 4;
+			let vorbisComment = null;
+			while (offset < dataView.byteLength) {
+				const isLastBlock = dataView.getUint8(offset) & 0x80;
+				const blockType = dataView.getUint8(offset) & 0x7F;
+				const blockSize = dataView.getUint32(offset, false) & 0xFFFFFF;
+				offset += 4;
+
+				if (blockType === 4) { // Vorbis Comment block type
+					vorbisComment = parseVorbisComment(new DataView(arrayBuffer, offset, blockSize));
+				}
+
+				offset += blockSize;
+				if (isLastBlock) break;
+			}
+
+			r(vorbisComment);
+		};
+		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("\n")[1]
+			.match(new RegExp("\\s*([^:]+:\\s*([^\"\\{].*?|\".*?\"|\\{.*?\\}))\\s*(,|$)", "g"))
+			.reduce((p, n) => {
+				const s = n.split(":");
+				if (s[1].endsWith(',')) {
+					s[1] = s[1].substr(0, s[1].length -1);
+				}
+				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;
+			let hrSteps = 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) {
+				if(!embeddings.length) return 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);
+				},
+				"vae"(v) {
+					setWidgetValue(vaeLoaderNode, "vae_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");
+					hrSteps = popOpt("hires steps");
+					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", hrSteps? +hrSteps : 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", "version", "vae hash", "ti hashes", "lora hashes", "hashes"]) {
+				delete opts[opt];
+			}
+
+			console.warn("Unhandled parameters:", opts);
+		}
+	}
+}

ComfyUI/web/scripts/ui.js

@@ -0,0 +1,660 @@
+import { api } from "./api.js";
+import { ComfyDialog as _ComfyDialog } from "./ui/dialog.js";
+import { toggleSwitch } from "./ui/toggleSwitch.js";
+import { ComfySettingsDialog } from "./ui/settings.js";
+
+export const ComfyDialog = _ComfyDialog;
+
+/**
+ * @template { string | (keyof HTMLElementTagNameMap) } K
+ * @typedef { K extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[K] : HTMLElement } ElementType 
+ */
+
+/**
+ * @template { string | (keyof HTMLElementTagNameMap) } K 
+ * @param { K } tag HTML Element Tag and optional classes e.g. div.class1.class2
+ * @param { string | Element | Element[] | ({
+ * 	 parent?: Element,
+ *   $?: (el: ElementType<K>) => void, 
+ *   dataset?: DOMStringMap,
+ *   style?: Partial<CSSStyleDeclaration>,
+ * 	 for?: string
+ * } & Omit<Partial<ElementType<K>>, "style">) | undefined } [propsOrChildren]
+ * @param { string | Element | Element[] | undefined } [children]
+ * @returns { ElementType<K> }
+ */
+export function $el(tag, propsOrChildren, children) {
+	const split = tag.split(".");
+	const element = document.createElement(split.shift());
+	if (split.length > 0) {
+		element.classList.add(...split);
+	}
+
+	if (propsOrChildren) {
+		if (typeof propsOrChildren === "string") {
+			propsOrChildren = { textContent: propsOrChildren };
+		} else if (propsOrChildren instanceof Element) {
+			propsOrChildren = [propsOrChildren];
+		}
+		if (Array.isArray(propsOrChildren)) {
+			element.append(...propsOrChildren);
+		} else {
+			const {parent, $: cb, dataset, style} = propsOrChildren;
+			delete propsOrChildren.parent;
+			delete propsOrChildren.$;
+			delete propsOrChildren.dataset;
+			delete propsOrChildren.style;
+
+			if (Object.hasOwn(propsOrChildren, "for")) {
+				element.setAttribute("for", propsOrChildren.for)
+			}
+
+			if (style) {
+				Object.assign(element.style, style);
+			}
+
+			if (dataset) {
+				Object.assign(element.dataset, dataset);
+			}
+
+			Object.assign(element, propsOrChildren);
+			if (children) {
+				element.append(...(children instanceof Array ? children.filter(Boolean) : [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() {
+		try {
+			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();
+		}
+		catch(exception){
+			// robust
+		}
+	}
+
+	function positionElement() {
+		if(dragEl.style.display === "none") return;
+
+		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;
+	}
+
+	return restorePos;
+}
+
+class ComfyList {
+	#type;
+	#text;
+	#reverse;
+
+	constructor(text, type, reverse) {
+		this.#text = text;
+		this.#type = type || text.toLowerCase();
+		this.#reverse = reverse || false;
+		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", [
+					...(this.#reverse ? items[section].reverse() : 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: async () => {
+									await app.loadGraphData(item.prompt[3].extra_pnginfo.workflow, true, false);
+									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 = "View " + 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(app);
+
+		this.batchCount = 1;
+		this.lastQueueSize = 0;
+		this.queue = new ComfyList("Queue");
+		this.history = new ComfyList("History", "history", true);
+
+		api.addEventListener("status", () => {
+			this.queue.update();
+			this.history.update();
+		});
+
+		const confirmClear = this.settings.addSetting({
+			id: "Comfy.ConfirmClear",
+			name: "Require confirmation when clearing workflow",
+			type: "boolean",
+			defaultValue: true,
+		});
+
+		const promptFilename = this.settings.addSetting({
+			id: "Comfy.PromptFilename",
+			name: "Prompt for filename when saving workflow",
+			type: "boolean",
+			defaultValue: true,
+		});
+
+		/**
+		 * file format for preview
+		 *
+		 * format;quality
+		 *
+		 * ex)
+		 * webp;50 -> webp, quality 50
+		 * jpeg;80 -> rgb, jpeg, quality 80
+		 *
+		 * @type {string}
+		 */
+		const previewImage = this.settings.addSetting({
+			id: "Comfy.PreviewFormat",
+			name: "When displaying a preview in the image widget, convert it to a lightweight image, e.g. webp, jpeg, webp;50, etc.",
+			type: "text",
+			defaultValue: "",
+		});
+
+		this.settings.addSetting({
+			id: "Comfy.DisableSliders",
+			name: "Disable sliders.",
+			type: "boolean",
+			defaultValue: false,
+		});
+
+		this.settings.addSetting({
+			id: "Comfy.DisableFloatRounding",
+			name: "Disable rounding floats (requires page reload).",
+			type: "boolean",
+			defaultValue: false,
+		});
+
+		this.settings.addSetting({
+			id: "Comfy.FloatRoundingPrecision",
+			name: "Decimal places [0 = auto] (requires page reload).",
+			type: "slider",
+			attrs: {
+				min: 0,
+				max: 6,
+				step: 1,
+			},
+			defaultValue: 0,
+		});
+
+		const fileInput = $el("input", {
+			id: "comfy-file-input",
+			type: "file",
+			accept: ".json,image/png,.latent,.safetensors,image/webp,audio/flac",
+			style: {display: "none"},
+			parent: document.body,
+			onchange: () => {
+				app.handleFile(fileInput.files[0]);
+			},
+		});
+
+		this.loadFile = () => fileInput.click();
+
+		const autoQueueModeEl = toggleSwitch(
+			"autoQueueMode",
+			[
+				{ text: "instant", tooltip: "A new prompt will be queued as soon as the queue reaches 0" },
+				{ text: "change", tooltip: "A new prompt will be queued when the queue is at 0 and the graph is/has changed" },
+			],
+			{
+				onChange: (value) => {
+					this.autoQueueMode = value.item.value;
+				},
+			}
+		);
+		autoQueueModeEl.style.display = "none";
+
+		api.addEventListener("graphChanged", () => {
+			if (this.autoQueueMode === "change" && this.autoQueueEnabled === true) {
+				if (this.lastQueueSize === 0) {
+					this.graphHasChanged = false;
+					app.queuePrompt(0, this.batchCount);
+				} else {
+					this.graphHasChanged = true;
+				}
+			}
+		});
+
+		this.menuHamburger = $el(
+			"div.comfy-menu-hamburger",
+			{
+				parent: document.body,
+				onclick: () => {
+					this.menuContainer.style.display = "block";
+					this.menuHamburger.style.display = "none";
+				},
+			},
+			[$el("div"), $el("div"), $el("div")]
+		);
+
+		this.menuContainer = $el("div.comfy-menu", { parent: document.body }, [
+			$el("div.drag-handle.comfy-menu-header", {
+				style: {
+					overflow: "hidden",
+					position: "relative",
+					width: "100%",
+					cursor: "default"
+				}
+			}, 	[
+				$el("span.drag-handle"),
+				$el("span.comfy-menu-queue-size", { $: (q) => (this.queueSize = q) }),
+				$el("div.comfy-menu-actions", [
+					$el("button.comfy-settings-btn", {
+						textContent: "⚙️",
+						onclick: () => this.settings.show(),
+					}),
+					$el("button.comfy-close-menu-btn", {
+						textContent: "\u00d7",
+						onclick: () => {
+							this.menuContainer.style.display = "none";
+							this.menuHamburger.style.display = "flex";
+						},
+					}),
+				]),
+			]),
+			$el("button.comfy-queue-btn", {
+				id: "queue-button",
+				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;
+							this.autoQueueEnabled = false;
+						},
+					}),
+				]),
+			]),
+			$el("div", {id: "extraOptions", style: {width: "100%", display: "none"}}, [
+				$el("div",[
+
+					$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("div",[
+					$el("label",{
+						for:"autoQueueCheckbox",
+						innerHTML: "Auto Queue"
+					}),
+					$el("input", {
+						id: "autoQueueCheckbox",
+						type: "checkbox",
+						checked: false,
+						title: "Automatically queue prompt when the queue size hits 0",
+						onchange: (e) => {
+							this.autoQueueEnabled = e.target.checked;
+							autoQueueModeEl.style.display = this.autoQueueEnabled ? "" : "none";
+						}
+					}),
+					autoQueueModeEl
+				])
+			]),
+			$el("div.comfy-menu-btns", [
+				$el("button", {
+					id: "queue-front-button",
+					textContent: "Queue Front",
+					onclick: () => app.queuePrompt(-1, this.batchCount)
+				}),
+				$el("button", {
+					$: (b) => (this.queue.button = b),
+					id: "comfy-view-queue-button",
+					textContent: "View Queue",
+					onclick: () => {
+						this.history.hide();
+						this.queue.toggle();
+					},
+				}),
+				$el("button", {
+					$: (b) => (this.history.button = b),
+					id: "comfy-view-history-button",
+					textContent: "View History",
+					onclick: () => {
+						this.queue.hide();
+						this.history.toggle();
+					},
+				}),
+			]),
+			this.queue.element,
+			this.history.element,
+			$el("button", {
+				id: "comfy-save-button",
+				textContent: "Save",
+				onclick: () => {
+					let filename = "workflow.json";
+					if (promptFilename.value) {
+						filename = prompt("Save workflow as:", filename);
+						if (!filename) return;
+						if (!filename.toLowerCase().endsWith(".json")) {
+							filename += ".json";
+						}
+					}
+					app.graphToPrompt().then(p=>{
+						const json = JSON.stringify(p.workflow, 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: filename,
+							style: {display: "none"},
+							parent: document.body,
+						});
+						a.click();
+						setTimeout(function () {
+							a.remove();
+							window.URL.revokeObjectURL(url);
+						}, 0);
+					});
+				},
+			}),
+			$el("button", {
+				id: "comfy-dev-save-api-button",
+				textContent: "Save (API Format)",
+				style: {width: "100%", display: "none"},
+				onclick: () => {
+					let filename = "workflow_api.json";
+					if (promptFilename.value) {
+						filename = prompt("Save workflow (API) as:", filename);
+						if (!filename) return;
+						if (!filename.toLowerCase().endsWith(".json")) {
+							filename += ".json";
+						}
+					}
+					app.graphToPrompt().then(p=>{
+						const json = JSON.stringify(p.output, 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: filename,
+							style: {display: "none"},
+							parent: document.body,
+						});
+						a.click();
+						setTimeout(function () {
+							a.remove();
+							window.URL.revokeObjectURL(url);
+						}, 0);
+					});
+				},
+			}),
+			$el("button", {id: "comfy-load-button", textContent: "Load", onclick: () => fileInput.click()}),
+			$el("button", {
+				id: "comfy-refresh-button",
+				textContent: "Refresh",
+				onclick: () => app.refreshComboInNodes()
+			}),
+			$el("button", {id: "comfy-clipspace-button", textContent: "Clipspace", onclick: () => app.openClipspace()}),
+			$el("button", {
+				id: "comfy-clear-button", textContent: "Clear", onclick: () => {
+					if (!confirmClear.value || confirm("Clear workflow?")) {
+						app.clean();
+						app.graph.clear();
+						app.resetView();
+					}
+				}
+			}),
+			$el("button", {
+				id: "comfy-load-default-button", textContent: "Load Default", onclick: async () => {
+					if (!confirmClear.value || confirm("Load default workflow?")) {
+						app.resetView();
+						await app.loadGraphData()
+					}
+				}
+			}),
+			$el("button", {
+				id: "comfy-reset-view-button", textContent: "Reset View", onclick: async () => {
+					app.resetView();
+				}
+			}),
+		]);
+
+		const devMode = this.settings.addSetting({
+			id: "Comfy.DevMode",
+			name: "Enable Dev mode Options",
+			type: "boolean",
+			defaultValue: false,
+			onChange: function(value) { document.getElementById("comfy-dev-save-api-button").style.display = value ? "flex" : "none"},
+		});
+
+		this.restoreMenuPosition = 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 &&
+				this.autoQueueEnabled &&
+				(this.autoQueueMode === "instant" || this.graphHasChanged) &&
+				!app.lastExecutionError
+			) {
+				app.queuePrompt(0, this.batchCount);
+				status.exec_info.queue_remaining += this.batchCount;
+				this.graphHasChanged = false;
+			}
+			this.lastQueueSize = status.exec_info.queue_remaining;
+		}
+	}
+}

ComfyUI/web/scripts/ui/components/asyncDialog.js

@@ -0,0 +1,64 @@
+import { ComfyDialog } from "../dialog.js";
+import { $el } from "../../ui.js";
+
+export class ComfyAsyncDialog extends ComfyDialog {
+	#resolve;
+
+	constructor(actions) {
+		super(
+			"dialog.comfy-dialog.comfyui-dialog",
+			actions?.map((opt) => {
+				if (typeof opt === "string") {
+					opt = { text: opt };
+				}
+				return $el("button.comfyui-button", {
+					type: "button",
+					textContent: opt.text,
+					onclick: () => this.close(opt.value ?? opt.text),
+				});
+			})
+		);
+	}
+
+	show(html) {
+		this.element.addEventListener("close", () => {
+			this.close();
+		});
+
+		super.show(html);
+
+		return new Promise((resolve) => {
+			this.#resolve = resolve;
+		});
+	}
+
+	showModal(html) {
+		this.element.addEventListener("close", () => {
+			this.close();
+		});
+
+		super.show(html);
+		this.element.showModal();
+
+		return new Promise((resolve) => {
+			this.#resolve = resolve;
+		});
+	}
+
+	close(result = null) {
+		this.#resolve(result);
+		this.element.close();
+		super.close();
+	}
+
+	static async prompt({ title = null, message, actions }) {
+		const dialog = new ComfyAsyncDialog(actions);
+		const content = [$el("span", message)];
+		if (title) {
+			content.unshift($el("h3", title));
+		}
+		const res = await dialog.showModal(content);
+		dialog.element.remove();
+		return res;
+	}
+}

ComfyUI/web/scripts/ui/components/button.js

@@ -0,0 +1,163 @@
+// @ts-check
+
+import { $el } from "../../ui.js";
+import { applyClasses, toggleElement } from "../utils.js";
+import { prop } from "../../utils.js";
+
+/**
+ * @typedef {{
+ *    icon?: string;
+ *    overIcon?: string;
+ *    iconSize?: number;
+ *    content?: string | HTMLElement;
+ *    tooltip?: string;
+ *    enabled?: boolean;
+ *    action?: (e: Event, btn: ComfyButton) => void,
+ *    classList?: import("../utils.js").ClassList,
+ * 	  visibilitySetting?: { id: string, showValue: any },
+ * 	  app?: import("../../app.js").ComfyApp
+ * }} ComfyButtonProps
+ */
+export class ComfyButton {
+	#over = 0;
+	#popupOpen = false;
+	isOver = false;	
+	iconElement = $el("i.mdi");
+	contentElement = $el("span");
+	/**
+	 * @type {import("./popup.js").ComfyPopup}
+	 */
+	popup;
+
+	/**
+	 * @param {ComfyButtonProps} opts
+	 */
+	constructor({
+		icon,
+		overIcon,
+		iconSize,
+		content,
+		tooltip,
+		action,
+		classList = "comfyui-button",
+		visibilitySetting,
+		app,
+		enabled = true,
+	}) {
+		this.element = $el("button", {
+			onmouseenter: () => {
+				this.isOver = true;
+				if(this.overIcon) {
+					this.updateIcon();
+				}
+			},
+			onmouseleave: () => {
+				this.isOver = false;
+				if(this.overIcon) {
+					this.updateIcon();
+				}
+			}
+
+		}, [this.iconElement, this.contentElement]);
+
+		this.icon = prop(this, "icon", icon, toggleElement(this.iconElement, { onShow: this.updateIcon }));
+		this.overIcon = prop(this, "overIcon", overIcon, () => {
+			if(this.isOver) {
+				this.updateIcon();
+			}
+		});
+		this.iconSize = prop(this, "iconSize", iconSize, this.updateIcon);
+		this.content = prop(
+			this,
+			"content",
+			content,
+			toggleElement(this.contentElement, {
+				onShow: (el, v) => {
+					if (typeof v === "string") {
+						el.textContent = v;
+					} else {
+						el.replaceChildren(v);
+					}
+				},
+			})
+		);
+
+		this.tooltip = prop(this, "tooltip", tooltip, (v) => {
+			if (v) {
+				this.element.title = v;
+			} else {
+				this.element.removeAttribute("title");
+			}
+		});
+		this.classList = prop(this, "classList", classList, this.updateClasses);
+		this.hidden = prop(this, "hidden", false, this.updateClasses);
+		this.enabled = prop(this, "enabled", enabled, () => {
+			this.updateClasses();
+			this.element.disabled = !this.enabled;
+		});
+		this.action = prop(this, "action", action);
+		this.element.addEventListener("click", (e) => {
+			if (this.popup) {
+				// we are either a touch device or triggered by click not hover
+				if (!this.#over) {
+					this.popup.toggle();
+				}
+			}
+			this.action?.(e, this);
+		});
+
+		if (visibilitySetting?.id) {
+			const settingUpdated = () => {
+				this.hidden = app.ui.settings.getSettingValue(visibilitySetting.id) !== visibilitySetting.showValue;
+			};
+			app.ui.settings.addEventListener(visibilitySetting.id + ".change", settingUpdated);
+			settingUpdated();
+		}
+	}
+
+	updateIcon = () => (this.iconElement.className = `mdi mdi-${(this.isOver && this.overIcon) || this.icon}${this.iconSize ? " mdi-" + this.iconSize + "px" : ""}`);
+	updateClasses = () => {
+		const internalClasses = [];
+		if (this.hidden) {
+			internalClasses.push("hidden");
+		}
+		if (!this.enabled) {
+			internalClasses.push("disabled");
+		}
+		if (this.popup) {
+			if (this.#popupOpen) {
+				internalClasses.push("popup-open");
+			} else {
+				internalClasses.push("popup-closed");
+			}
+		}
+		applyClasses(this.element, this.classList, ...internalClasses);
+	};
+
+	/**
+	 *
+	 * @param { import("./popup.js").ComfyPopup } popup
+	 * @param { "click" | "hover" } mode
+	 */
+	withPopup(popup, mode = "click") {
+		this.popup = popup;
+
+		if (mode === "hover") {
+			for (const el of [this.element, this.popup.element]) {
+				el.addEventListener("mouseenter", () => {
+					this.popup.open = !!++this.#over;
+				});
+				el.addEventListener("mouseleave", () => {
+					this.popup.open = !!--this.#over;
+				});
+			}
+		}
+
+		popup.addEventListener("change", () => {
+			this.#popupOpen = popup.open;
+			this.updateClasses();
+		});
+
+		return this;
+	}
+}

ComfyUI/web/scripts/ui/components/buttonGroup.js

@@ -0,0 +1,45 @@
+// @ts-check
+
+import { $el } from "../../ui.js";
+import { ComfyButton } from "./button.js";
+import { prop } from "../../utils.js";
+
+export class ComfyButtonGroup {
+	element = $el("div.comfyui-button-group");
+
+	/** @param {Array<ComfyButton | HTMLElement>} buttons */
+	constructor(...buttons) {
+		this.buttons = prop(this, "buttons", buttons, () => this.update());
+	}
+
+	/**
+	 * @param {ComfyButton} button
+	 * @param {number} index
+	 */
+	insert(button, index) {
+		this.buttons.splice(index, 0, button);
+		this.update();
+	}
+
+	/** @param {ComfyButton} button */
+	append(button) {
+		this.buttons.push(button);
+		this.update();
+	}
+
+	/** @param {ComfyButton|number} indexOrButton */
+	remove(indexOrButton) {
+		if (typeof indexOrButton !== "number") {
+			indexOrButton = this.buttons.indexOf(indexOrButton);
+		}
+		if (indexOrButton > -1) {
+			const r = this.buttons.splice(indexOrButton, 1);
+			this.update();
+			return r;
+		}
+	}
+
+	update() {
+		this.element.replaceChildren(...this.buttons.map((b) => b["element"] ?? b));
+	}
+}

ComfyUI/web/scripts/ui/components/popup.js

@@ -0,0 +1,128 @@
+// @ts-check
+
+import { prop } from "../../utils.js";
+import { $el } from "../../ui.js";
+import { applyClasses } from "../utils.js";
+
+export class ComfyPopup extends EventTarget {
+	element = $el("div.comfyui-popup");
+
+	/**
+	 * @param {{
+	 *     target: HTMLElement,
+	 *      container?: HTMLElement,
+	 *      classList?: import("../utils.js").ClassList,
+	 * 		ignoreTarget?: boolean,
+	 * 		closeOnEscape?: boolean,
+	 * 		position?: "absolute" | "relative",
+	 * 		horizontal?: "left" | "right"
+	 * }} param0
+	 * @param  {...HTMLElement} children
+	 */
+	constructor(
+		{
+			target,
+			container = document.body,
+			classList = "",
+			ignoreTarget = true,
+			closeOnEscape = true,
+			position = "absolute",
+			horizontal = "left",
+		},
+		...children
+	) {
+		super();
+		this.target = target;
+		this.ignoreTarget = ignoreTarget;
+		this.container = container;
+		this.position = position;
+		this.closeOnEscape = closeOnEscape;
+		this.horizontal = horizontal;
+
+		container.append(this.element);
+
+		this.children = prop(this, "children", children, () => {
+			this.element.replaceChildren(...this.children);
+			this.update();
+		});
+		this.classList = prop(this, "classList", classList, () => applyClasses(this.element, this.classList, "comfyui-popup", horizontal));
+		this.open = prop(this, "open", false, (v, o) => {
+			if (v === o) return;
+			if (v) {
+				this.#show();
+			} else {
+				this.#hide();
+			}
+		});
+	}
+
+	toggle() {
+		this.open = !this.open;
+	}
+
+	#hide() {
+		this.element.classList.remove("open");
+		window.removeEventListener("resize", this.update);
+		window.removeEventListener("click", this.#clickHandler, { capture: true });
+		window.removeEventListener("keydown", this.#escHandler, { capture: true });
+
+		this.dispatchEvent(new CustomEvent("close"));
+		this.dispatchEvent(new CustomEvent("change"));
+	}
+
+	#show() {
+		this.element.classList.add("open");
+		this.update();
+
+		window.addEventListener("resize", this.update);
+		window.addEventListener("click", this.#clickHandler, { capture: true });
+		if (this.closeOnEscape) {
+			window.addEventListener("keydown", this.#escHandler, { capture: true });
+		}
+
+		this.dispatchEvent(new CustomEvent("open"));
+		this.dispatchEvent(new CustomEvent("change"));
+	}
+
+	#escHandler = (e) => {
+		if (e.key === "Escape") {
+			this.open = false;
+			e.preventDefault();
+			e.stopImmediatePropagation();
+		}
+	};
+
+	#clickHandler = (e) => {
+		/** @type {any} */
+		const target = e.target;
+		if (!this.element.contains(target) && this.ignoreTarget && !this.target.contains(target)) {
+			this.open = false;
+		}
+	};
+
+	update = () => {
+		const rect = this.target.getBoundingClientRect();
+		this.element.style.setProperty("--bottom", "unset");
+		if (this.position === "absolute") {
+			if (this.horizontal === "left") {
+				this.element.style.setProperty("--left", rect.left + "px");
+			} else {
+				this.element.style.setProperty("--left", rect.right - this.element.clientWidth + "px");
+			}
+			this.element.style.setProperty("--top", rect.bottom + "px");
+			this.element.style.setProperty("--limit", rect.bottom + "px");
+		} else {
+			this.element.style.setProperty("--left", 0 + "px");
+			this.element.style.setProperty("--top", rect.height + "px");
+			this.element.style.setProperty("--limit", rect.height + "px");
+		}
+
+		const thisRect = this.element.getBoundingClientRect();
+		if (thisRect.height < 30) {
+			// Move up instead
+			this.element.style.setProperty("--top", "unset");
+			this.element.style.setProperty("--bottom", rect.height + 5 + "px");
+			this.element.style.setProperty("--limit", rect.height + 5 + "px");
+		}
+	};
+}

ComfyUI/web/scripts/ui/components/splitButton.js

@@ -0,0 +1,43 @@
+// @ts-check
+
+import { $el } from "../../ui.js";
+import { ComfyButton } from "./button.js";
+import { prop } from "../../utils.js";
+import { ComfyPopup } from "./popup.js";
+
+export class ComfySplitButton {
+	/**
+	 *  @param {{
+	 * 		primary: ComfyButton,
+	 * 		mode?: "hover" | "click",
+	 * 		horizontal?: "left" | "right",
+	 * 		position?: "relative" | "absolute"
+	 *  }} param0
+	 *  @param {Array<ComfyButton> | Array<HTMLElement>} items
+	 */
+	constructor({ primary, mode, horizontal = "left", position = "relative" }, ...items) {
+		this.arrow = new ComfyButton({
+			icon: "chevron-down",
+		});
+		this.element = $el("div.comfyui-split-button" + (mode === "hover" ? ".hover" : ""), [
+			$el("div.comfyui-split-primary", primary.element),
+			$el("div.comfyui-split-arrow", this.arrow.element),
+		]);
+		this.popup = new ComfyPopup({
+			target: this.element,
+			container: position === "relative" ? this.element : document.body,
+			classList: "comfyui-split-button-popup" + (mode === "hover" ? " hover" : ""),
+			closeOnEscape: mode === "click",
+			position,
+			horizontal,
+		});
+
+		this.arrow.withPopup(this.popup, mode);
+
+		this.items = prop(this, "items", items, () => this.update());
+	}
+
+	update() {
+		this.popup.element.replaceChildren(...this.items.map((b) => b.element ?? b));
+	}
+}

ComfyUI/web/scripts/ui/dialog.js

@@ -0,0 +1,38 @@
+import { $el } from "../ui.js";
+
+export class ComfyDialog extends EventTarget {
+	#buttons;
+
+	constructor(type = "div", buttons = null) {
+		super();
+		this.#buttons = buttons;
+		this.element = $el(type + ".comfy-modal", { parent: document.body }, [
+			$el("div.comfy-modal-content", [$el("p", { $: (p) => (this.textElement = p) }), ...this.createButtons()]),
+		]);
+	}
+
+	createButtons() {
+		return (
+			this.#buttons ?? [
+				$el("button", {
+					type: "button",
+					textContent: "Close",
+					onclick: () => this.close(),
+				}),
+			]
+		);
+	}
+
+	close() {
+		this.element.style.display = "none";
+	}
+
+	show(html) {
+		if (typeof html === "string") {
+			this.textElement.innerHTML = html;
+		} else {
+			this.textElement.replaceChildren(...(html instanceof Array ? html : [html]));
+		}
+		this.element.style.display = "flex";
+	}
+}

ComfyUI/web/scripts/ui/draggableList.js

@@ -0,0 +1,287 @@
+// @ts-check
+/*
+	Original implementation:
+    https://github.com/TahaSh/drag-to-reorder
+    MIT License
+
+    Copyright (c) 2023 Taha Shashtari
+
+    Permission is hereby granted, free of charge, to any person obtaining a copy
+    of this software and associated documentation files (the "Software"), to deal
+    in the Software without restriction, including without limitation the rights
+    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+    copies of the Software, and to permit persons to whom the Software is
+    furnished to do so, subject to the following conditions:
+
+    The above copyright notice and this permission notice shall be included in all
+    copies or substantial portions of the Software.
+
+    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+    SOFTWARE.
+*/
+
+import { $el } from "../ui.js";
+
+$el("style", {
+    parent: document.head,
+    textContent: `
+        .draggable-item {
+            position: relative;
+            will-change: transform;
+            user-select: none;
+        }
+        .draggable-item.is-idle {
+            transition: 0.25s ease transform;
+        }
+        .draggable-item.is-draggable {
+            z-index: 10;
+        }
+    `
+});
+
+export class DraggableList extends EventTarget {
+	listContainer;
+	draggableItem;
+	pointerStartX;
+	pointerStartY;
+	scrollYMax;
+	itemsGap = 0;
+	items = [];
+	itemSelector;
+	handleClass = "drag-handle";
+	off = [];
+	offDrag = [];
+
+	constructor(element, itemSelector) {
+        super();
+		this.listContainer = element;
+        this.itemSelector = itemSelector;
+
+		if (!this.listContainer) return;
+
+		this.off.push(this.on(this.listContainer, "mousedown", this.dragStart));
+		this.off.push(this.on(this.listContainer, "touchstart", this.dragStart));
+		this.off.push(this.on(document, "mouseup", this.dragEnd));
+		this.off.push(this.on(document, "touchend", this.dragEnd));
+	}
+
+	getAllItems() {
+		if (!this.items?.length) {
+			this.items = Array.from(this.listContainer.querySelectorAll(this.itemSelector));
+			this.items.forEach((element) => {
+				element.classList.add("is-idle");
+			});
+		}
+		return this.items;
+	}
+
+	getIdleItems() {
+		return this.getAllItems().filter((item) => item.classList.contains("is-idle"));
+	}
+
+	isItemAbove(item) {
+		return item.hasAttribute("data-is-above");
+	}
+
+	isItemToggled(item) {
+		return item.hasAttribute("data-is-toggled");
+	}
+
+	on(source, event, listener, options) {
+		listener = listener.bind(this);
+		source.addEventListener(event, listener, options);
+		return () => source.removeEventListener(event, listener);
+	}
+
+	dragStart(e) {
+		if (e.target.classList.contains(this.handleClass)) {
+			this.draggableItem = e.target.closest(this.itemSelector);
+		}
+
+		if (!this.draggableItem) return;
+
+		this.pointerStartX = e.clientX || e.touches[0].clientX;
+		this.pointerStartY = e.clientY || e.touches[0].clientY;
+		this.scrollYMax = this.listContainer.scrollHeight - this.listContainer.clientHeight;
+
+		this.setItemsGap();
+		this.initDraggableItem();
+		this.initItemsState();
+
+		this.offDrag.push(this.on(document, "mousemove", this.drag));
+		this.offDrag.push(this.on(document, "touchmove", this.drag, { passive: false }));
+
+		this.dispatchEvent(
+			new CustomEvent("dragstart", {
+				detail: { element: this.draggableItem, position: this.getAllItems().indexOf(this.draggableItem) },
+			})
+		);
+	}
+
+	setItemsGap() {
+		if (this.getIdleItems().length <= 1) {
+			this.itemsGap = 0;
+			return;
+		}
+
+		const item1 = this.getIdleItems()[0];
+		const item2 = this.getIdleItems()[1];
+
+		const item1Rect = item1.getBoundingClientRect();
+		const item2Rect = item2.getBoundingClientRect();
+
+		this.itemsGap = Math.abs(item1Rect.bottom - item2Rect.top);
+	}
+
+	initItemsState() {
+		this.getIdleItems().forEach((item, i) => {
+			if (this.getAllItems().indexOf(this.draggableItem) > i) {
+				item.dataset.isAbove = "";
+			}
+		});
+	}
+
+	initDraggableItem() {
+		this.draggableItem.classList.remove("is-idle");
+		this.draggableItem.classList.add("is-draggable");
+	}
+
+	drag(e) {
+		if (!this.draggableItem) return;
+
+		e.preventDefault();
+
+		const clientX = e.clientX || e.touches[0].clientX;
+		const clientY = e.clientY || e.touches[0].clientY;
+
+		const listRect = this.listContainer.getBoundingClientRect();
+
+		if (clientY > listRect.bottom) {
+			if (this.listContainer.scrollTop < this.scrollYMax) {
+				this.listContainer.scrollBy(0, 10);
+				this.pointerStartY -= 10;
+			}
+		} else if (clientY < listRect.top && this.listContainer.scrollTop > 0) {
+			this.pointerStartY += 10;
+			this.listContainer.scrollBy(0, -10);
+		}
+
+		const pointerOffsetX = clientX - this.pointerStartX;
+		const pointerOffsetY = clientY - this.pointerStartY;
+
+		this.updateIdleItemsStateAndPosition();
+		this.draggableItem.style.transform = `translate(${pointerOffsetX}px, ${pointerOffsetY}px)`;
+	}
+
+	updateIdleItemsStateAndPosition() {
+		const draggableItemRect = this.draggableItem.getBoundingClientRect();
+		const draggableItemY = draggableItemRect.top + draggableItemRect.height / 2;
+
+		// Update state
+		this.getIdleItems().forEach((item) => {
+			const itemRect = item.getBoundingClientRect();
+			const itemY = itemRect.top + itemRect.height / 2;
+			if (this.isItemAbove(item)) {
+				if (draggableItemY <= itemY) {
+					item.dataset.isToggled = "";
+				} else {
+					delete item.dataset.isToggled;
+				}
+			} else {
+				if (draggableItemY >= itemY) {
+					item.dataset.isToggled = "";
+				} else {
+					delete item.dataset.isToggled;
+				}
+			}
+		});
+
+		// Update position
+		this.getIdleItems().forEach((item) => {
+			if (this.isItemToggled(item)) {
+				const direction = this.isItemAbove(item) ? 1 : -1;
+				item.style.transform = `translateY(${direction * (draggableItemRect.height + this.itemsGap)}px)`;
+			} else {
+				item.style.transform = "";
+			}
+		});
+	}
+
+	dragEnd() {
+		if (!this.draggableItem) return;
+
+		this.applyNewItemsOrder();
+		this.cleanup();
+	}
+
+	applyNewItemsOrder() {
+		const reorderedItems = [];
+
+		let oldPosition = -1;
+		this.getAllItems().forEach((item, index) => {
+			if (item === this.draggableItem) {
+				oldPosition = index;
+				return;
+			}
+			if (!this.isItemToggled(item)) {
+				reorderedItems[index] = item;
+				return;
+			}
+			const newIndex = this.isItemAbove(item) ? index + 1 : index - 1;
+			reorderedItems[newIndex] = item;
+		});
+
+		for (let index = 0; index < this.getAllItems().length; index++) {
+			const item = reorderedItems[index];
+			if (typeof item === "undefined") {
+				reorderedItems[index] = this.draggableItem;
+			}
+		}
+
+		reorderedItems.forEach((item) => {
+			this.listContainer.appendChild(item);
+		});
+
+		this.items = reorderedItems;
+
+		this.dispatchEvent(
+			new CustomEvent("dragend", {
+				detail: { element: this.draggableItem, oldPosition, newPosition: reorderedItems.indexOf(this.draggableItem) },
+			})
+		);
+	}
+
+	cleanup() {
+		this.itemsGap = 0;
+		this.items = [];
+		this.unsetDraggableItem();
+		this.unsetItemState();
+
+		this.offDrag.forEach((f) => f());
+		this.offDrag = [];
+	}
+
+	unsetDraggableItem() {
+		this.draggableItem.style = null;
+		this.draggableItem.classList.remove("is-draggable");
+		this.draggableItem.classList.add("is-idle");
+		this.draggableItem = null;
+	}
+
+	unsetItemState() {
+		this.getIdleItems().forEach((item, i) => {
+			delete item.dataset.isAbove;
+			delete item.dataset.isToggled;
+			item.style.transform = "";
+		});
+	}
+
+	dispose() {
+		this.off.forEach((f) => f());
+	}
+}

ComfyUI/web/scripts/ui/imagePreview.js

@@ -0,0 +1,97 @@
+import { $el } from "../ui.js";
+
+export function calculateImageGrid(imgs, dw, dh) {
+	let best = 0;
+	let w = imgs[0].naturalWidth;
+	let h = imgs[0].naturalHeight;
+	const numImages = imgs.length;
+
+	let cellWidth, cellHeight, cols, rows, shiftX;
+	// compact style
+	for (let c = 1; c <= numImages; c++) {
+		const r = Math.ceil(numImages / c);
+		const cW = dw / c;
+		const cH = dh / r;
+		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;
+			rows = r;
+			shiftX = c * ((cW - imageW) / 2);
+		}
+	}
+
+	return { cellWidth, cellHeight, cols, rows, shiftX };
+}
+
+export function createImageHost(node) {
+	const el = $el("div.comfy-img-preview");
+	let currentImgs;
+	let first = true;
+
+	function updateSize() {
+		let w = null;
+		let h = null;
+
+		if (currentImgs) {
+			let elH = el.clientHeight;
+			if (first) {
+				first = false;
+				// On first run, if we are small then grow a bit
+				if (elH < 190) {
+					elH = 190;
+				}
+				el.style.setProperty("--comfy-widget-min-height", elH);
+			} else {
+				el.style.setProperty("--comfy-widget-min-height", null);
+			}
+
+			const nw = node.size[0];
+			({ cellWidth: w, cellHeight: h } = calculateImageGrid(currentImgs, nw - 20, elH));
+			w += "px";
+			h += "px";
+
+			el.style.setProperty("--comfy-img-preview-width", w);
+			el.style.setProperty("--comfy-img-preview-height", h);
+		}
+	}
+	return {
+		el,
+		updateImages(imgs) {
+			if (imgs !== currentImgs) {
+				if (currentImgs == null) {
+					requestAnimationFrame(() => {
+						updateSize();
+					});
+				}
+				el.replaceChildren(...imgs);
+				currentImgs = imgs;
+				node.onResize(node.size);
+				node.graph.setDirtyCanvas(true, true);
+			}
+		},
+		getHeight() {
+			updateSize();
+		},
+		onDraw() {
+			// Element from point uses a hittest find elements so we need to toggle pointer events
+			el.style.pointerEvents = "all";
+			const over = document.elementFromPoint(app.canvas.mouse[0], app.canvas.mouse[1]);
+			el.style.pointerEvents = "none";
+
+			if(!over) return;
+			// Set the overIndex so Open Image etc work
+			const idx = currentImgs.indexOf(over);
+			node.overIndex = idx;
+		},
+	};
+}

ComfyUI/web/scripts/ui/menu/index.js

@@ -0,0 +1,302 @@
+// @ts-check
+
+import { $el } from "../../ui.js";
+import { downloadBlob } from "../../utils.js";
+import { ComfyButton } from "../components/button.js";
+import { ComfyButtonGroup } from "../components/buttonGroup.js";
+import { ComfySplitButton } from "../components/splitButton.js";
+import { ComfyViewHistoryButton } from "./viewHistory.js";
+import { ComfyQueueButton } from "./queueButton.js";
+import { ComfyWorkflowsMenu } from "./workflows.js";
+import { ComfyViewQueueButton } from "./viewQueue.js";
+import { getInteruptButton } from "./interruptButton.js";
+
+const collapseOnMobile = (t) => {
+	(t.element ?? t).classList.add("comfyui-menu-mobile-collapse");
+	return t;
+};
+const showOnMobile = (t) => {
+	(t.element ?? t).classList.add("lt-lg-show");
+	return t;
+};
+
+export class ComfyAppMenu {
+	#sizeBreak = "lg";
+	#lastSizeBreaks = {
+		lg: null,
+		md: null,
+		sm: null,
+		xs: null,
+	};
+	#sizeBreaks = Object.keys(this.#lastSizeBreaks);
+	#cachedInnerSize = null;
+	#cacheTimeout = null;
+
+	/**
+	 * @param { import("../../app.js").ComfyApp } app
+	 */
+	constructor(app) {
+		this.app = app;
+
+		this.workflows = new ComfyWorkflowsMenu(app);
+		const getSaveButton = (t) =>
+			new ComfyButton({
+				icon: "content-save",
+				tooltip: "Save the current workflow",
+				action: () => app.workflowManager.activeWorkflow.save(),
+				content: t,
+			});
+
+		this.logo = $el("h1.comfyui-logo.nlg-hide", { title: "ComfyUI" }, "ComfyUI");
+		this.saveButton = new ComfySplitButton(
+			{
+				primary: getSaveButton(),
+				mode: "hover",
+				position: "absolute",
+			},
+			getSaveButton("Save"),
+			new ComfyButton({
+				icon: "content-save-edit",
+				content: "Save As",
+				tooltip: "Save the current graph as a new workflow",
+				action: () => app.workflowManager.activeWorkflow.save(true),
+			}),
+			new ComfyButton({
+				icon: "download",
+				content: "Export",
+				tooltip: "Export the current workflow as JSON",
+				action: () => this.exportWorkflow("workflow", "workflow"),
+			}),
+			new ComfyButton({
+				icon: "api",
+				content: "Export (API Format)",
+				tooltip: "Export the current workflow as JSON for use with the ComfyUI API",
+				action: () => this.exportWorkflow("workflow_api", "output"),
+				visibilitySetting: { id: "Comfy.DevMode", showValue: true },
+				app,
+			})
+		);
+		this.actionsGroup = new ComfyButtonGroup(
+			new ComfyButton({
+				icon: "refresh",
+				content: "Refresh",
+				tooltip: "Refresh widgets in nodes to find new models or files",
+				action: () => app.refreshComboInNodes(),
+			}),
+			new ComfyButton({
+				icon: "clipboard-edit-outline",
+				content: "Clipspace",
+				tooltip: "Open Clipspace window",
+				action: () => app["openClipspace"](),
+			}),
+			new ComfyButton({
+				icon: "fit-to-page-outline",
+				content: "Reset View",
+				tooltip: "Reset the canvas view",
+				action: () => app.resetView(),
+			}),
+			new ComfyButton({
+				icon: "cancel",
+				content: "Clear",
+				tooltip: "Clears current workflow",
+				action: () => {
+					if (!app.ui.settings.getSettingValue("Comfy.ConfirmClear", true) || confirm("Clear workflow?")) {
+						app.clean();
+						app.graph.clear();
+					}
+				},
+			})
+		);
+		this.settingsGroup = new ComfyButtonGroup(
+			new ComfyButton({
+				icon: "cog",
+				content: "Settings",
+				tooltip: "Open settings",
+				action: () => {
+					app.ui.settings.show();
+				},
+			})
+		);
+		this.viewGroup = new ComfyButtonGroup(
+			new ComfyViewHistoryButton(app).element,
+			new ComfyViewQueueButton(app).element,
+			getInteruptButton("nlg-hide").element
+		);
+		this.mobileMenuButton = new ComfyButton({
+			icon: "menu",
+			action: (_, btn) => {
+				btn.icon = this.element.classList.toggle("expanded") ? "menu-open" : "menu";
+				window.dispatchEvent(new Event("resize"));
+			},
+			classList: "comfyui-button comfyui-menu-button",
+		});
+
+		this.element = $el("nav.comfyui-menu.lg", { style: { display: "none" } }, [
+			this.logo,
+			this.workflows.element,
+			this.saveButton.element,
+			collapseOnMobile(this.actionsGroup).element,
+			$el("section.comfyui-menu-push"),
+			collapseOnMobile(this.settingsGroup).element,
+			collapseOnMobile(this.viewGroup).element,
+
+			getInteruptButton("lt-lg-show").element,
+			new ComfyQueueButton(app).element,
+			showOnMobile(this.mobileMenuButton).element,
+		]);
+
+		let resizeHandler;
+		this.menuPositionSetting = app.ui.settings.addSetting({
+			id: "Comfy.UseNewMenu",
+			defaultValue: "Disabled",
+			name: "[Beta] Use new menu and workflow management. Note: On small screens the menu will always be at the top.",
+			type: "combo",
+			options: ["Disabled", "Top", "Bottom"],
+			onChange: async (v) => {
+				if (v && v !== "Disabled") {
+					if (!resizeHandler) {
+						resizeHandler = () => {
+							this.calculateSizeBreak();
+						};
+						window.addEventListener("resize", resizeHandler);
+					}
+					this.updatePosition(v);
+				} else {
+					if (resizeHandler) {
+						window.removeEventListener("resize", resizeHandler);
+						resizeHandler = null;
+					}
+					document.body.style.removeProperty("display");
+					app.ui.menuContainer.style.removeProperty("display");
+					this.element.style.display = "none";
+					app.ui.restoreMenuPosition();
+				}
+				window.dispatchEvent(new Event("resize"));
+			},
+		});
+	}
+
+	updatePosition(v) {
+		document.body.style.display = "grid";
+		this.app.ui.menuContainer.style.display = "none";
+		this.element.style.removeProperty("display");
+		this.position = v;
+		if (v === "Bottom") {
+			this.app.bodyBottom.append(this.element);
+		} else {
+			this.app.bodyTop.prepend(this.element);
+		}
+		this.calculateSizeBreak();
+	}
+
+	updateSizeBreak(idx, prevIdx, direction) {
+		const newSize = this.#sizeBreaks[idx];
+		if (newSize === this.#sizeBreak) return;
+		this.#cachedInnerSize = null;
+		clearTimeout(this.#cacheTimeout);
+
+		this.#sizeBreak = this.#sizeBreaks[idx];
+		for (let i = 0; i < this.#sizeBreaks.length; i++) {
+			const sz = this.#sizeBreaks[i];
+			if (sz === this.#sizeBreak) {
+				this.element.classList.add(sz);
+			} else {
+				this.element.classList.remove(sz);
+			}
+			if (i < idx) {
+				this.element.classList.add("lt-" + sz);
+			} else {
+				this.element.classList.remove("lt-" + sz);
+			}
+		}
+
+		if (idx) {
+			// We're on a small screen, force the menu at the top
+			if (this.position !== "Top") {
+				this.updatePosition("Top");
+			}
+		} else if (this.position != this.menuPositionSetting.value) {
+			// Restore user position
+			this.updatePosition(this.menuPositionSetting.value);
+		}
+
+		// Allow multiple updates, but prevent bouncing
+		if (!direction) {
+			direction = prevIdx - idx;
+		} else if (direction != prevIdx - idx) {
+			return;
+		}
+		this.calculateSizeBreak(direction);
+	}
+
+	calculateSizeBreak(direction = 0) {
+		let idx = this.#sizeBreaks.indexOf(this.#sizeBreak);
+		const currIdx = idx;
+		const innerSize = this.calculateInnerSize(idx);
+		if (window.innerWidth >= this.#lastSizeBreaks[this.#sizeBreaks[idx - 1]]) {
+			if (idx > 0) {
+				idx--;
+			}
+		} else if (innerSize > this.element.clientWidth) {
+			this.#lastSizeBreaks[this.#sizeBreak] = Math.max(window.innerWidth, innerSize);
+			// We need to shrink
+			if (idx < this.#sizeBreaks.length - 1) {
+				idx++;
+			}
+		}
+
+		this.updateSizeBreak(idx, currIdx, direction);
+	}
+
+	calculateInnerSize(idx) {
+		// Cache the inner size to prevent too much calculation when resizing the window
+		clearTimeout(this.#cacheTimeout);
+		if (this.#cachedInnerSize) {
+			// Extend cache time
+			this.#cacheTimeout = setTimeout(() => (this.#cachedInnerSize = null), 100);
+		} else {
+			let innerSize = 0;
+			let count = 1;
+			for (const c of this.element.children) {
+				if (c.classList.contains("comfyui-menu-push")) continue; // ignore right push
+				if (idx && c.classList.contains("comfyui-menu-mobile-collapse")) continue; // ignore collapse items
+				innerSize += c.clientWidth;
+				count++;
+			}
+			innerSize += 8 * count;
+			this.#cachedInnerSize = innerSize;
+			this.#cacheTimeout = setTimeout(() => (this.#cachedInnerSize = null), 100);
+		}
+		return this.#cachedInnerSize;
+	}
+
+	/**
+	 * @param {string} defaultName
+	 */
+	getFilename(defaultName) {
+		if (this.app.ui.settings.getSettingValue("Comfy.PromptFilename", true)) {
+			defaultName = prompt("Save workflow as:", defaultName);
+			if (!defaultName) return;
+			if (!defaultName.toLowerCase().endsWith(".json")) {
+				defaultName += ".json";
+			}
+		}
+		return defaultName;
+	}
+
+	/**
+	 * @param {string} [filename]
+	 * @param { "workflow" | "output" } [promptProperty]
+	 */
+	async exportWorkflow(filename, promptProperty) {
+		if (this.app.workflowManager.activeWorkflow?.path) {
+			filename = this.app.workflowManager.activeWorkflow.name;
+		}
+		const p = await this.app.graphToPrompt();
+		const json = JSON.stringify(p[promptProperty], null, 2);
+		const blob = new Blob([json], { type: "application/json" });
+		const file = this.getFilename(filename);
+		if (!file) return;
+		downloadBlob(file, blob);
+	}
+}

ComfyUI/web/scripts/ui/menu/interruptButton.js

@@ -0,0 +1,23 @@
+// @ts-check
+
+import { api } from "../../api.js";
+import { ComfyButton } from "../components/button.js";
+
+export function getInteruptButton(visibility) {
+	const btn = new ComfyButton({
+		icon: "close",
+		tooltip: "Cancel current generation",
+		enabled: false,
+		action: () => {
+			api.interrupt();
+		},
+		classList: ["comfyui-button", "comfyui-interrupt-button", visibility],
+	});
+
+	api.addEventListener("status", ({ detail }) => {
+		const sz = detail?.exec_info?.queue_remaining;
+		btn.enabled = sz > 0;
+	});
+
+	return btn;
+}