More work on UI

web/scripts/api.js

@@ -1,6 +1,6 @@
 class ComfyApi extends EventTarget {
 	constructor() {
-      super();
+		super();
 	}
 
 	#pollQueue() {
@@ -74,9 +74,9 @@ class ComfyApi extends EventTarget {
 		});
 	}
 
-   init() {
-      this.#createSocket();
-   }
+	init() {
+		this.#createSocket();
+	}
 
 	async getNodeDefs() {
 		const resp = await fetch("object_info", { cache: "no-store" });
@@ -110,6 +110,64 @@ class ComfyApi extends EventTarget {
 			};
 		}
 	}
+
+	async getItems(type) {
+		if (type === "queue") {
+			return this.getQueue();
+		}
+		return this.getHistory();
+	}
+
+	async getQueue() {
+		try {
+			const res = await fetch("/queue");
+			const data = await res.json();
+			return {
+				// Running action uses a different endpoint for cancelling
+				Running: data.queue_running.map((prompt) => ({ prompt, remove: { name: "Cancel", cb: () => api.interrupt() } })),
+				Pending: data.queue_pending.map((prompt) => ({ prompt })),
+			};
+		} catch (error) {
+			console.error(error);
+			return { Running: [], Pending: [] };
+		}
+	}
+
+	async getHistory() {
+		try {
+			const res = await fetch("/history");
+			return { History: Object.values(await res.json()) };
+		} catch (error) {
+			console.error(error);
+			return { History: [] };
+		}
+	}
+
+	async #postItem(type, body) {
+		try {
+			await fetch("/" + type, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: body ? JSON.stringify(body) : undefined,
+			});
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	async deleteItem(type, id) {
+		await this.#postItem(type, { delete: [id] });
+	}
+
+	async clearItems(type) {
+		await this.#postItem(type, { clear: true });
+	}
+
+	async interrupt() {
+		await this.#postItem("interrupt", null);
+	}
 }
 
 export const api = new ComfyApi();

web/scripts/app.js

@@ -313,8 +313,27 @@ class ComfyApp {
 				};
 				reader.readAsText(file);
 			}
+		});
+	}
 
-			prompt_file_load(file);
+	#addPasteHandler() {
+		document.addEventListener("paste", (e) => {
+			let data = (e.clipboardData || window.clipboardData).getData("text/plain");
+			let workflow;
+			try {
+				data = data.slice(data.indexOf("{"));
+				workflow = JSON.parse(data);
+			} catch (err) {
+				try {
+					data = data.slice(data.indexOf("workflow\n"));
+					data = data.slice(data.indexOf("{"));
+					workflow = JSON.parse(data);
+				} catch (error) {}
+			}
+
+			if (workflow && workflow.version && workflow.nodes && workflow.extra) {
+				this.loadGraphData(workflow);
+			}
 		});
 	}
 
@@ -367,13 +386,17 @@ class ComfyApp {
 	}
 
 	#addApiUpdateHandlers() {
-		api.addEventListener("status", (status) => {
-			console.log(status);
+		api.addEventListener("status", ({ detail }) => {
+			this.ui.setStatus(detail);
 		});
 
-		api.addEventListener("reconnecting", () => {});
+		api.addEventListener("reconnecting", () => {
+			this.ui.dialog.show("Reconnecting...");
+		});
 
-		api.addEventListener("reconnected", () => {});
+		api.addEventListener("reconnected", () => {
+			this.ui.dialog.close();
+		});
 
 		api.addEventListener("progress", ({ detail }) => {
 			this.progress = detail;
@@ -386,7 +409,9 @@ class ComfyApp {
 			this.graph.setDirtyCanvas(true, false);
 		});
 
-		api.addEventListener("executed", (e) => {});
+		api.addEventListener("executed", ({ detail }) => {
+			this.nodeOutputs[detail.node] = detail.output;
+		});
 
 		api.init();
 	}
@@ -431,7 +456,7 @@ class ComfyApp {
 
 		// We failed to restore a workflow so load the default
 		if (!restored) {
-			this.loadGraphData(defaultGraph);
+			this.loadGraphData();
 		}
 
 		// Save current workflow automatically
@@ -440,6 +465,8 @@ class ComfyApp {
 		this.#addDrawNodeProgressHandler();
 		this.#addApiUpdateHandlers();
 		this.#addDropHandler();
+		this.#addPasteHandler();
+
 		await this.#invokeExtensionsAsync("setup");
 	}
 
@@ -511,6 +538,9 @@ class ComfyApp {
 	 * @param {*} graphData A serialized graph object
 	 */
 	loadGraphData(graphData) {
+		if (!graphData) {
+			graphData = defaultGraph;
+		}
 		this.graph.configure(graphData);
 
 		for (const node of this.graph._nodes) {
@@ -526,7 +556,7 @@ class ComfyApp {
 					if (node.type == "KSampler" || node.type == "KSamplerAdvanced") {
 						if (widget.name == "sampler_name") {
 							if (widget.value.startsWith("sample_")) {
-								wid.value = widget.value.slice(7);
+								widget.value = widget.value.slice(7);
 							}
 						}
 					}

web/scripts/extensions.js

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

web/scripts/ui.js

@@ -1,23 +1,47 @@
 import { api } from "./api.js";
 
+function $el(tag, propsOrChildren, children) {
+	const split = tag.split(".");
+	const element = document.createElement(split.shift());
+	element.classList.add(...split);
+	if (propsOrChildren) {
+		if (Array.isArray(propsOrChildren)) {
+			element.append(...propsOrChildren);
+		} else {
+			const parent = propsOrChildren.parent;
+			delete propsOrChildren.parent;
+			const cb = propsOrChildren.$;
+			delete propsOrChildren.$;
+
+			Object.assign(element, propsOrChildren);
+			if (children) {
+				element.append(...children);
+			}
+
+			if (parent) {
+				parent.append(element);
+			}
+
+			if (cb) {
+				cb(element);
+			}
+		}
+	}
+	return element;
+}
+
 class ComfyDialog {
 	constructor() {
-		this.element = document.createElement("div");
-		this.element.classList.add("comfy-modal");
-
-		const content = document.createElement("div");
-		content.classList.add("comfy-modal-content");
-		this.textElement = document.createElement("p");
-		content.append(this.textElement);
-
-		const closeBtn = document.createElement("button");
-		closeBtn.type = "button";
-		closeBtn.textContent = "CLOSE";
-		content.append(closeBtn);
-		closeBtn.onclick = () => this.close();
-
-		this.element.append(content);
-		document.body.append(this.element);
+		this.element = $el("div.comfy-modal", { parent: document.body }, [
+			$el("div.comfy-modal-content", [
+				$el("p", { $: (p) => (this.textElement = p) }),
+				$el("button", {
+					type: "button",
+					textContent: "CLOSE",
+					onclick: () => this.close(),
+				}),
+			]),
+		]);
 	}
 
 	close() {
@@ -31,10 +55,14 @@ class ComfyDialog {
 }
 
 class ComfyList {
-	constructor() {
-		this.element = document.createElement("div");
+	#type;
+	#text;
+
+	constructor(text, type) {
+		this.#text = text;
+		this.#type = type || text.toLowerCase();
+		this.element = $el("div.comfy-list");
 		this.element.style.display = "none";
-		this.element.textContent = "hello";
 	}
 
 	get visible() {
@@ -42,7 +70,51 @@ class ComfyList {
 	}
 
 	async load() {
-		// const queue = await api.getQueue();
+		const items = await api.getItems(this.#type);
+		this.element.replaceChildren(
+			...Object.keys(items).flatMap((section) => [
+				$el("h4", {
+					textContent: section,
+				}),
+				$el("div.comfy-list-items", [
+					...items[section].map((item) => {
+						// Allow items to specify a custom remove action (e.g. for interrupt current prompt)
+						const removeAction = item.remove || {
+							name: "Delete",
+							cb: () => api.deleteItem(this.#type, item.prompt[1]),
+						};
+						return $el("div", { textContent: item.prompt[0] + ": " }, [
+							$el("button", {
+								textContent: "Load",
+								onclick: () => {
+									if (item.outputs) {
+										app.nodeOutputs = item.outputs;
+									}
+									app.loadGraphData(item.prompt[3].extra_pnginfo.workflow);
+								},
+							}),
+							$el("button", {
+								textContent: removeAction.name,
+								onclick: async () => {
+									await removeAction.cb();
+									await this.update();
+								},
+							}),
+						]);
+					}),
+				]),
+			]),
+			$el("div.comfy-list-actions", [
+				$el("button", {
+					textContent: "Clear " + this.#text,
+					onclick: async () => {
+						await api.clearItems(this.#type);
+						await this.load();
+					},
+				}),
+				$el("button", { textContent: "Refresh", onclick: () => this.load() }),
+			])
+		);
 	}
 
 	async update() {
@@ -53,11 +125,14 @@ class ComfyList {
 
 	async show() {
 		this.element.style.display = "block";
+		this.button.textContent = "Close";
+
 		await this.load();
 	}
 
 	hide() {
 		this.element.style.display = "none";
+		this.button.textContent = "See " + this.#text;
 	}
 
 	toggle() {
@@ -75,77 +150,78 @@ export class ComfyUI {
 	constructor(app) {
 		this.app = app;
 		this.dialog = new ComfyDialog();
-		this.queue = new ComfyList();
-		this.history = new ComfyList();
 
-		this.menuContainer = document.createElement("div");
-		this.menuContainer.classList.add("comfy-menu");
+		this.queue = new ComfyList("Queue");
+		this.history = new ComfyList("History");
 
-		this.queueSize = document.createElement("span");
-		this.menuContainer.append(this.queueSize);
-
-		this.addAction("Queue Prompt", () => {
-			app.queuePrompt(0);
-		}, "queue");
-
-		this.btnContainer = document.createElement("div");
-		this.btnContainer.classList.add("comfy-menu-btns");
-		this.menuContainer.append(this.btnContainer);
-
-		this.addAction(
-			"Queue Front",
-			() => {
-				app.queuePrompt(-1);
-			},
-			"sm"
-		);
-
-		this.addAction(
-			"See Queue",
-			(btn) => {
-				btn.textContent = this.queue.toggle() ? "Close" : "See Queue";
-			},
-			"sm"
-		);
-
-		this.addAction(
-			"See History",
-			(btn) => {
-				btn.textContent = this.history.toggle() ? "Close" : "See History";
-			},
-			"sm"
-		);
-
-		this.menuContainer.append(this.queue.element);
-		this.menuContainer.append(this.history.element);
-
-		this.addAction("Save", () => {
-			app.queuePrompt(-1);
-		});
-		this.addAction("Load", () => {
-			app.queuePrompt(-1);
-		});
-		this.addAction("Clear", () => {
-			app.queuePrompt(-1);
-		});
-		this.addAction("Load Default", () => {
-			app.queuePrompt(-1);
+		api.addEventListener("status", () => {
+			this.queue.update();
+			this.history.update();
 		});
 
-		document.body.append(this.menuContainer);
+		var input = document.createElement("input");
+		input.setAttribute("type", "file");
+		input.setAttribute("accept", ".json,image/png");
+		input.style.display = "none";
+		document.body.appendChild(input);
+
+		input.addEventListener("change", function () {
+			var file = input.files[0];
+			prompt_file_load(file);
+		});
+
+
+		this.menuContainer = $el("div.comfy-menu", { parent: document.body }, [
+			$el("span", { $: (q) => (this.queueSize = q) }),
+			$el("button.comfy-queue-btn", { textContent: "Queue Prompt", onclick: () => app.queuePrompt(0) }),
+			$el("div.comfy-menu-btns", [
+				$el("button", { textContent: "Queue Front", onclick: () => app.queuePrompt(-1) }),
+				$el("button", {
+					$: (b) => (this.queue.button = b),
+					textContent: "View Queue",
+					onclick: () => {
+						this.history.hide();
+						this.queue.toggle();
+					},
+				}),
+				$el("button", {
+					$: (b) => (this.history.button = b),
+					textContent: "View History",
+					onclick: () => {
+						this.queue.hide();
+						this.history.toggle();
+					},
+				}),
+			]),
+			this.queue.element,
+			this.history.element,
+			$el("button", {
+				textContent: "Save",
+				onclick: () => {
+					const json = JSON.stringify(app.graph.serialize()); // convert the data to a JSON string
+					const blob = new Blob([json], { type: "application/json" });
+					const url = URL.createObjectURL(blob);
+					const a = $el("a", {
+						href: url,
+						download: "workflow.json",
+						style: "display: none",
+						parent: document.body,
+					});
+					a.click();
+					setTimeout(function () {
+						a.remove();
+						window.URL.revokeObjectURL(url);
+					}, 0);
+				},
+			}),
+			$el("button", { textContent: "Load", onclick: () => {} }),
+			$el("button", { textContent: "Clear", onclick: () => app.graph.clear() }),
+			$el("button", { textContent: "Load Default", onclick: () => app.loadGraphData() }),
+		]);
+
 		this.setStatus({ exec_info: { queue_remaining: "X" } });
 	}
 
-	addAction(text, cb, cls) {
-		const btn = document.createElement("button");
-		btn.classList.add("comfy-menu-btn-" + (cls || "lg"));
-		btn.textContent = text;
-		btn.onclick = () => {
-			cb(btn);
-		};
-		(cls === "sm" ? this.btnContainer : this.menuContainer).append(btn);
-	}
-
 	setStatus(status) {
 		this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR");
 	}