ui.js 19.8 KB
Newer Older
reaper47's avatar
reaper47 committed
1
import {api} from "./api.js";
pythongosssss's avatar
pythongosssss committed
2

Jairo Correa's avatar
Jairo Correa committed
3
export function $el(tag, propsOrChildren, children) {
pythongosssss's avatar
pythongosssss committed
4
5
	const split = tag.split(".");
	const element = document.createElement(split.shift());
reaper47's avatar
reaper47 committed
6
7
8
9
	if (split.length > 0) {
		element.classList.add(...split);
	}

pythongosssss's avatar
pythongosssss committed
10
11
12
13
	if (propsOrChildren) {
		if (Array.isArray(propsOrChildren)) {
			element.append(...propsOrChildren);
		} else {
reaper47's avatar
reaper47 committed
14
			const {parent, $: cb, dataset, style} = propsOrChildren;
pythongosssss's avatar
pythongosssss committed
15
16
			delete propsOrChildren.parent;
			delete propsOrChildren.$;
17
18
			delete propsOrChildren.dataset;
			delete propsOrChildren.style;
pythongosssss's avatar
pythongosssss committed
19

reaper47's avatar
reaper47 committed
20
21
22
23
			if (Object.hasOwn(propsOrChildren, "for")) {
				element.setAttribute("for", propsOrChildren.for)
			}

24
25
26
27
28
29
			if (style) {
				Object.assign(element.style, style);
			}

			if (dataset) {
				Object.assign(element.dataset, dataset);
pythongosssss's avatar
pythongosssss committed
30
31
			}

pythongosssss's avatar
pythongosssss committed
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
			Object.assign(element, propsOrChildren);
			if (children) {
				element.append(...children);
			}

			if (parent) {
				parent.append(element);
			}

			if (cb) {
				cb(element);
			}
		}
	}
	return element;
}

49
function dragElement(dragEl, settings) {
50
51
52
53
54
55
	var posDiffX = 0,
		posDiffY = 0,
		posStartX = 0,
		posStartY = 0,
		newPosX = 0,
		newPosY = 0;
56
	if (dragEl.getElementsByClassName("drag-handle")[0]) {
Jairo Correa's avatar
Jairo Correa committed
57
		// if present, the handle is where you move the DIV from:
58
		dragEl.getElementsByClassName("drag-handle")[0].onmousedown = dragMouseDown;
Jairo Correa's avatar
Jairo Correa committed
59
60
61
62
63
	} else {
		// otherwise, move the DIV from anywhere inside the DIV:
		dragEl.onmousedown = dragMouseDown;
	}

pythongosssss's avatar
pythongosssss committed
64
65
66
67
68
	// When the element resizes (e.g. view queue) ensure it is still in the windows bounds
	const resizeObserver = new ResizeObserver(() => {
		ensureInBounds();
	}).observe(dragEl);

69
	function ensureInBounds() {
pythongosssss's avatar
pythongosssss committed
70
		if (dragEl.classList.contains("comfy-menu-manual-pos")) {
pythongosssss's avatar
pythongosssss committed
71
72
			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));
73

pythongosssss's avatar
pythongosssss committed
74
75
			positionElement();
		}
pythongosssss's avatar
pythongosssss committed
76
	}
77
78
79
80
81
82
83
84
85
86
87
88
89

	function positionElement() {
		const halfWidth = document.body.clientWidth / 2;
		const anchorRight = newPosX + dragEl.clientWidth / 2 > halfWidth;

		// set the element's new position:
		if (anchorRight) {
			dragEl.style.left = "unset";
			dragEl.style.right = document.body.clientWidth - newPosX - dragEl.clientWidth + "px";
		} else {
			dragEl.style.left = newPosX + "px";
			dragEl.style.right = "unset";
		}
90

pythongosssss's avatar
pythongosssss committed
91
92
		dragEl.style.top = newPosY + "px";
		dragEl.style.bottom = "unset";
93
94
95
96
97

		if (savePos) {
			localStorage.setItem(
				"Comfy.MenuPosition",
				JSON.stringify({
pythongosssss's avatar
pythongosssss committed
98
99
					x: dragEl.offsetLeft,
					y: dragEl.offsetTop,
100
101
102
103
104
105
106
107
108
				})
			);
		}
	}

	function restorePos() {
		let pos = localStorage.getItem("Comfy.MenuPosition");
		if (pos) {
			pos = JSON.parse(pos);
pythongosssss's avatar
pythongosssss committed
109
110
111
			newPosX = pos.x;
			newPosY = pos.y;
			positionElement();
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
			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;
		},
	});
reaper47's avatar
reaper47 committed
129

Jairo Correa's avatar
Jairo Correa committed
130
131
132
133
	function dragMouseDown(e) {
		e = e || window.event;
		e.preventDefault();
		// get the mouse cursor position at startup:
134
135
		posStartX = e.clientX;
		posStartY = e.clientY;
Jairo Correa's avatar
Jairo Correa committed
136
137
138
139
140
141
142
143
		document.onmouseup = closeDragElement;
		// call a function whenever the cursor moves:
		document.onmousemove = elementDrag;
	}

	function elementDrag(e) {
		e = e || window.event;
		e.preventDefault();
144
145
146

		dragEl.classList.add("comfy-menu-manual-pos");

Jairo Correa's avatar
Jairo Correa committed
147
		// calculate the new cursor position:
148
149
150
151
		posDiffX = e.clientX - posStartX;
		posDiffY = e.clientY - posStartY;
		posStartX = e.clientX;
		posStartY = e.clientY;
152
153
154
155
156

		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();
Jairo Correa's avatar
Jairo Correa committed
157
158
	}

159
	window.addEventListener("resize", () => {
160
		ensureInBounds();
161
162
	});

Jairo Correa's avatar
Jairo Correa committed
163
164
165
166
167
168
169
	function closeDragElement() {
		// stop moving when mouse button is released:
		document.onmouseup = null;
		document.onmousemove = null;
	}
}

170
export class ComfyDialog {
pythongosssss's avatar
pythongosssss committed
171
	constructor() {
reaper47's avatar
reaper47 committed
172
173
		this.element = $el("div.comfy-modal", {parent: document.body}, [
			$el("div.comfy-modal-content", [$el("p", {$: (p) => (this.textElement = p)}), ...this.createButtons()]),
pythongosssss's avatar
pythongosssss committed
174
		]);
pythongosssss's avatar
pythongosssss committed
175
176
	}

177
178
179
180
181
182
183
184
185
186
	createButtons() {
		return [
			$el("button", {
				type: "button",
				textContent: "Close",
				onclick: () => this.close(),
			}),
		];
	}

pythongosssss's avatar
pythongosssss committed
187
188
189
190
191
	close() {
		this.element.style.display = "none";
	}

	show(html) {
192
193
194
195
196
		if (typeof html === "string") {
			this.textElement.innerHTML = html;
		} else {
			this.textElement.replaceChildren(html);
		}
pythongosssss's avatar
pythongosssss committed
197
198
199
200
		this.element.style.display = "flex";
	}
}

pythongosssss's avatar
pythongosssss committed
201
202
203
class ComfySettingsDialog extends ComfyDialog {
	constructor() {
		super();
reaper47's avatar
reaper47 committed
204
205
206
207
208
209
210
211
212
213
		this.element = $el("dialog", {
			id: "comfy-settings-dialog",
			parent: document.body,
		}, [
			$el("table.comfy-modal-content.comfy-table", [
				$el("caption", {textContent: "Settings"}),
				$el("tbody", {$: (tbody) => (this.textElement = tbody)}),
				$el("button", {
					type: "button",
					textContent: "Close",
reaper47's avatar
reaper47 committed
214
215
216
					style: {
						cursor: "pointer",
					},
reaper47's avatar
reaper47 committed
217
218
219
220
221
222
					onclick: () => {
						this.element.close();
					},
				}),
			]),
		]);
pythongosssss's avatar
pythongosssss committed
223
224
225
		this.settings = [];
	}

Jairo Correa's avatar
Jairo Correa committed
226
227
228
229
230
231
232
233
234
235
236
	getSettingValue(id, defaultValue) {
		const settingId = "Comfy.Settings." + id;
		const v = localStorage[settingId];
		return v == null ? defaultValue : JSON.parse(v);
	}

	setSettingValue(id, value) {
		const settingId = "Comfy.Settings." + id;
		localStorage[settingId] = JSON.stringify(value);
	}

237
	addSetting({id, name, type, defaultValue, onChange, attrs = {}, tooltip = "", options = undefined}) {
pythongosssss's avatar
pythongosssss committed
238
239
240
		if (!id) {
			throw new Error("Settings must have an ID");
		}
reaper47's avatar
reaper47 committed
241

pythongosssss's avatar
pythongosssss committed
242
		if (this.settings.find((s) => s.id === id)) {
reaper47's avatar
reaper47 committed
243
			throw new Error(`Setting ${id} of type ${type} must have a unique ID.`);
pythongosssss's avatar
pythongosssss committed
244
245
		}

reaper47's avatar
reaper47 committed
246
		const settingId = `Comfy.Settings.${id}`;
pythongosssss's avatar
pythongosssss committed
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
		const v = localStorage[settingId];
		let value = v == null ? defaultValue : JSON.parse(v);

		// Trigger initial setting of value
		if (onChange) {
			onChange(value, undefined);
		}

		this.settings.push({
			render: () => {
				const setter = (v) => {
					if (onChange) {
						onChange(v, value);
					}
					localStorage[settingId] = JSON.stringify(v);
					value = v;
				};
reaper47's avatar
reaper47 committed
264
				value = this.getSettingValue(id, defaultValue);
pythongosssss's avatar
pythongosssss committed
265

266
				let element;
reaper47's avatar
reaper47 committed
267
268
269
270
271
272
				const htmlID = id.replaceAll(".", "-");

				const labelCell = $el("td", [
					$el("label", {
						for: htmlID,
						classList: [tooltip !== "" ? "comfy-tooltip-indicator" : ""],
reaper47's avatar
reaper47 committed
273
						textContent: name,
reaper47's avatar
reaper47 committed
274
275
					})
				]);
276

pythongosssss's avatar
pythongosssss committed
277
				if (typeof type === "function") {
278
279
280
281
					element = type(name, setter, value, attrs);
				} else {
					switch (type) {
						case "boolean":
reaper47's avatar
reaper47 committed
282
283
284
							element = $el("tr", [
								labelCell,
								$el("td", [
285
									$el("input", {
reaper47's avatar
reaper47 committed
286
										id: htmlID,
287
										type: "checkbox",
reaper47's avatar
reaper47 committed
288
289
290
291
292
293
294
										checked: value,
										onchange: (event) => {
											const isChecked = event.target.checked;
											if (onChange !== undefined) {
												onChange(isChecked)
											}
											this.setSettingValue(id, isChecked);
295
296
297
										},
									}),
								]),
reaper47's avatar
reaper47 committed
298
							])
299
300
							break;
						case "number":
reaper47's avatar
reaper47 committed
301
302
303
							element = $el("tr", [
								labelCell,
								$el("td", [
304
305
306
									$el("input", {
										type,
										value,
reaper47's avatar
reaper47 committed
307
										id: htmlID,
308
309
310
311
312
313
314
315
										oninput: (e) => {
											setter(e.target.value);
										},
										...attrs
									}),
								]),
							]);
							break;
missionfloyd's avatar
missionfloyd committed
316
						case "slider":
reaper47's avatar
reaper47 committed
317
318
319
320
321
322
323
							element = $el("tr", [
								labelCell,
								$el("td", [
									$el("div", {
										style: {
											display: "grid",
											gridAutoFlow: "column",
missionfloyd's avatar
missionfloyd committed
324
										},
reaper47's avatar
reaper47 committed
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
									}, [
										$el("input", {
											...attrs,
											value,
											type: "range",
											oninput: (e) => {
												setter(e.target.value);
												e.target.nextElementSibling.value = e.target.value;
											},
										}),
										$el("input", {
											...attrs,
											value,
											id: htmlID,
											type: "number",
											style: {maxWidth: "4rem"},
											oninput: (e) => {
												setter(e.target.value);
												e.target.previousElementSibling.value = e.target.value;
											},
										}),
									]),
missionfloyd's avatar
missionfloyd committed
347
348
349
								]),
							]);
							break;
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
						case "combo":
							element = $el("tr", [
								labelCell,
								$el("td", [
									$el(
										"select",
										{
											oninput: (e) => {
												setter(e.target.value);
											},
										},
										(typeof options === "function" ? options(value) : options || []).map((opt) => {
											if (typeof opt === "string") {
												opt = { text: opt };
											}
											const v = opt.value ?? opt.text;
											return $el("option", {
												value: v,
												textContent: opt.text,
												selected: value + "" === v + "",
											});
										})
									),
								]),
							]);
							break;
reaper47's avatar
reaper47 committed
376
						case "text":
377
						default:
reaper47's avatar
reaper47 committed
378
379
380
381
382
383
384
							if (type !== "text") {
								console.warn(`Unsupported setting type '${type}, defaulting to text`);
							}

							element = $el("tr", [
								labelCell,
								$el("td", [
385
386
									$el("input", {
										value,
reaper47's avatar
reaper47 committed
387
										id: htmlID,
388
389
390
										oninput: (e) => {
											setter(e.target.value);
										},
reaper47's avatar
reaper47 committed
391
										...attrs,
392
393
394
395
396
									}),
								]),
							]);
							break;
					}
pythongosssss's avatar
pythongosssss committed
397
				}
reaper47's avatar
reaper47 committed
398
				if (tooltip) {
399
					element.title = tooltip;
pythongosssss's avatar
pythongosssss committed
400
				}
401
402

				return element;
pythongosssss's avatar
pythongosssss committed
403
404
			},
		});
405
406
407
408
409
410
411
412
413
414

		const self = this;
		return {
			get value() {
				return self.getSettingValue(id, defaultValue);
			},
			set value(v) {
				self.setSettingValue(id, v);
			},
		};
pythongosssss's avatar
pythongosssss committed
415
416
417
	}

	show() {
reaper47's avatar
reaper47 committed
418
419
420
421
422
423
424
425
426
427
		this.textElement.replaceChildren(
			$el("tr", {
				style: {display: "none"},
			}, [
				$el("th"),
				$el("th", {style: {width: "33%"}})
			]),
			...this.settings.map((s) => s.render()),
		)
		this.element.showModal();
pythongosssss's avatar
pythongosssss committed
428
429
430
	}
}

pythongosssss's avatar
pythongosssss committed
431
class ComfyList {
pythongosssss's avatar
pythongosssss committed
432
433
	#type;
	#text;
434
	#reverse;
pythongosssss's avatar
pythongosssss committed
435

436
	constructor(text, type, reverse) {
pythongosssss's avatar
pythongosssss committed
437
438
		this.#text = text;
		this.#type = type || text.toLowerCase();
439
		this.#reverse = reverse || false;
pythongosssss's avatar
pythongosssss committed
440
		this.element = $el("div.comfy-list");
pythongosssss's avatar
pythongosssss committed
441
442
443
444
445
446
447
448
		this.element.style.display = "none";
	}

	get visible() {
		return this.element.style.display !== "none";
	}

	async load() {
pythongosssss's avatar
pythongosssss committed
449
450
451
452
453
454
455
		const items = await api.getItems(this.#type);
		this.element.replaceChildren(
			...Object.keys(items).flatMap((section) => [
				$el("h4", {
					textContent: section,
				}),
				$el("div.comfy-list-items", [
456
					...(this.#reverse ? items[section].reverse() : items[section]).map((item) => {
pythongosssss's avatar
pythongosssss committed
457
458
459
460
461
						// 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]),
						};
reaper47's avatar
reaper47 committed
462
						return $el("div", {textContent: item.prompt[0] + ": "}, [
pythongosssss's avatar
pythongosssss committed
463
464
465
							$el("button", {
								textContent: "Load",
								onclick: () => {
466
									app.loadGraphData(item.prompt[3].extra_pnginfo.workflow);
pythongosssss's avatar
pythongosssss committed
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
									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();
					},
				}),
reaper47's avatar
reaper47 committed
491
				$el("button", {textContent: "Refresh", onclick: () => this.load()}),
pythongosssss's avatar
pythongosssss committed
492
493
			])
		);
pythongosssss's avatar
pythongosssss committed
494
495
496
497
498
499
500
501
502
503
	}

	async update() {
		if (this.visible) {
			await this.load();
		}
	}

	async show() {
		this.element.style.display = "block";
pythongosssss's avatar
pythongosssss committed
504
505
		this.button.textContent = "Close";

pythongosssss's avatar
pythongosssss committed
506
507
508
509
510
		await this.load();
	}

	hide() {
		this.element.style.display = "none";
comfyanonymous's avatar
comfyanonymous committed
511
		this.button.textContent = "View " + this.#text;
pythongosssss's avatar
pythongosssss committed
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
	}

	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();
pythongosssss's avatar
pythongosssss committed
529
		this.settings = new ComfySettingsDialog();
pythongosssss's avatar
pythongosssss committed
530

m957ymj75urz's avatar
m957ymj75urz committed
531
		this.batchCount = 1;
comfyanonymous's avatar
comfyanonymous committed
532
		this.lastQueueSize = 0;
pythongosssss's avatar
pythongosssss committed
533
		this.queue = new ComfyList("Queue");
534
		this.history = new ComfyList("History", "history", true);
pythongosssss's avatar
pythongosssss committed
535

pythongosssss's avatar
pythongosssss committed
536
537
538
539
		api.addEventListener("status", () => {
			this.queue.update();
			this.history.update();
		});
pythongosssss's avatar
pythongosssss committed
540

541
542
543
544
545
546
		const confirmClear = this.settings.addSetting({
			id: "Comfy.ConfirmClear",
			name: "Require confirmation when clearing workflow",
			type: "boolean",
			defaultValue: true,
		});
547

548
549
550
551
552
553
554
		const promptFilename = this.settings.addSetting({
			id: "Comfy.PromptFilename",
			name: "Prompt for filename when saving workflow",
			type: "boolean",
			defaultValue: true,
		});

555
556
557
		/**
		 * file format for preview
		 *
558
		 * format;quality
559
560
		 *
		 * ex)
561
		 * webp;50 -> webp, quality 50
562
563
564
565
566
567
		 * jpeg;80 -> rgb, jpeg, quality 80
		 *
		 * @type {string}
		 */
		const previewImage = this.settings.addSetting({
			id: "Comfy.PreviewFormat",
reaper47's avatar
reaper47 committed
568
569
			name: "When displaying a preview in the image widget, convert it to a lightweight image, e.g. webp, jpeg, webp;50, etc.",
			type: "text",
570
571
572
			defaultValue: "",
		});

573
574
575
576
577
578
579
		this.settings.addSetting({
			id: "Comfy.DisableSliders",
			name: "Disable sliders.",
			type: "boolean",
			defaultValue: false,
		});

580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
		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,
		});

pythongosssss's avatar
pythongosssss committed
599
		const fileInput = $el("input", {
600
			id: "comfy-file-input",
pythongosssss's avatar
pythongosssss committed
601
			type: "file",
602
			accept: ".json,image/png,.latent,.safetensors",
reaper47's avatar
reaper47 committed
603
			style: {display: "none"},
pythongosssss's avatar
pythongosssss committed
604
605
606
607
			parent: document.body,
			onchange: () => {
				app.handleFile(fileInput.files[0]);
			},
pythongosssss's avatar
pythongosssss committed
608
		});
pythongosssss's avatar
pythongosssss committed
609

reaper47's avatar
reaper47 committed
610
611
612
613
614
615
616
617
618
		this.menuContainer = $el("div.comfy-menu", {parent: document.body}, [
			$el("div.drag-handle", {
				style: {
					overflow: "hidden",
					position: "relative",
					width: "100%",
					cursor: "default"
				}
			}, [
Jairo Correa's avatar
Jairo Correa committed
619
				$el("span.drag-handle"),
reaper47's avatar
reaper47 committed
620
621
				$el("span", {$: (q) => (this.queueSize = q)}),
				$el("button.comfy-settings-btn", {textContent: "⚙️", onclick: () => this.settings.show()}),
pythongosssss's avatar
pythongosssss committed
622
			]),
623
			$el("button.comfy-queue-btn", {
624
				id: "queue-button",
625
626
627
				textContent: "Queue Prompt",
				onclick: () => app.queuePrompt(0, this.batchCount),
			}),
m957ymj75urz's avatar
m957ymj75urz committed
628
			$el("div", {}, [
reaper47's avatar
reaper47 committed
629
				$el("label", {innerHTML: "Extra options"}, [
630
631
632
633
634
635
636
637
638
					$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;
						},
					}),
				]),
m957ymj75urz's avatar
m957ymj75urz committed
639
			]),
reaper47's avatar
reaper47 committed
640
			$el("div", {id: "extraOptions", style: {width: "100%", display: "none"}}, [
641
642
643
				$el("div",[

					$el("label", {innerHTML: "Batch count"}),
644
645
646
647
648
					$el("input", {
						id: "batchCountInputNumber",
						type: "number",
						value: this.batchCount,
						min: "1",
reaper47's avatar
reaper47 committed
649
						style: {width: "35%", "margin-left": "0.4em"},
650
						oninput: (i) => {
m957ymj75urz's avatar
m957ymj75urz committed
651
							this.batchCount = i.target.value;
652
653
							document.getElementById("batchCountInputRange").value = this.batchCount;
						},
m957ymj75urz's avatar
m957ymj75urz committed
654
					}),
655
656
657
658
659
660
					$el("input", {
						id: "batchCountInputRange",
						type: "range",
						min: "1",
						max: "100",
						value: this.batchCount,
m957ymj75urz's avatar
m957ymj75urz committed
661
662
						oninput: (i) => {
							this.batchCount = i.srcElement.value;
663
664
							document.getElementById("batchCountInputNumber").value = i.srcElement.value;
						},
665
666
667
668
669
670
671
672
					}),		
				]),

				$el("div",[
					$el("label",{
						for:"autoQueueCheckbox",
						innerHTML: "Auto Queue"
						// textContent: "Auto Queue"
673
674
675
676
677
					}),
					$el("input", {
						id: "autoQueueCheckbox",
						type: "checkbox",
						checked: false,
678
679
						title: "Automatically queue prompt when the queue size hits 0",
						
m957ymj75urz's avatar
m957ymj75urz committed
680
					}),
681
				])
m957ymj75urz's avatar
m957ymj75urz committed
682
			]),
pythongosssss's avatar
pythongosssss committed
683
			$el("div.comfy-menu-btns", [
reaper47's avatar
reaper47 committed
684
685
686
687
688
				$el("button", {
					id: "queue-front-button",
					textContent: "Queue Front",
					onclick: () => app.queuePrompt(-1, this.batchCount)
				}),
pythongosssss's avatar
pythongosssss committed
689
690
				$el("button", {
					$: (b) => (this.queue.button = b),
691
					id: "comfy-view-queue-button",
pythongosssss's avatar
pythongosssss committed
692
693
694
695
696
697
698
699
					textContent: "View Queue",
					onclick: () => {
						this.history.hide();
						this.queue.toggle();
					},
				}),
				$el("button", {
					$: (b) => (this.history.button = b),
700
					id: "comfy-view-history-button",
pythongosssss's avatar
pythongosssss committed
701
702
703
704
705
706
707
708
709
710
					textContent: "View History",
					onclick: () => {
						this.queue.hide();
						this.history.toggle();
					},
				}),
			]),
			this.queue.element,
			this.history.element,
			$el("button", {
711
				id: "comfy-save-button",
pythongosssss's avatar
pythongosssss committed
712
713
				textContent: "Save",
				onclick: () => {
714
715
716
717
718
719
720
721
					let filename = "workflow.json";
					if (promptFilename.value) {
						filename = prompt("Save workflow as:", filename);
						if (!filename) return;
						if (!filename.toLowerCase().endsWith(".json")) {
							filename += ".json";
						}
					}
comfyanonymous's avatar
comfyanonymous committed
722
					const json = JSON.stringify(app.graph.serialize(), null, 2); // convert the data to a JSON string
reaper47's avatar
reaper47 committed
723
					const blob = new Blob([json], {type: "application/json"});
pythongosssss's avatar
pythongosssss committed
724
725
726
					const url = URL.createObjectURL(blob);
					const a = $el("a", {
						href: url,
727
						download: filename,
reaper47's avatar
reaper47 committed
728
						style: {display: "none"},
pythongosssss's avatar
pythongosssss committed
729
730
731
732
733
734
735
736
737
						parent: document.body,
					});
					a.click();
					setTimeout(function () {
						a.remove();
						window.URL.revokeObjectURL(url);
					}, 0);
				},
			}),
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
			$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);
					});
				},
			}),
reaper47's avatar
reaper47 committed
769
770
771
772
773
774
775
776
777
778
779
780
781
			$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();
					}
782
				}
reaper47's avatar
reaper47 committed
783
784
785
786
787
788
			}),
			$el("button", {
				id: "comfy-load-default-button", textContent: "Load Default", onclick: () => {
					if (!confirmClear.value || confirm("Load default workflow?")) {
						app.loadGraphData()
					}
789
				}
reaper47's avatar
reaper47 committed
790
			}),
pythongosssss's avatar
pythongosssss committed
791
		]);
pythongosssss's avatar
pythongosssss committed
792

793
794
795
796
797
798
799
800
		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 ? "block" : "none"},
		});

801
		dragElement(this.menuContainer, this.settings);
Jairo Correa's avatar
Jairo Correa committed
802

reaper47's avatar
reaper47 committed
803
		this.setStatus({exec_info: {queue_remaining: "X"}});
pythongosssss's avatar
pythongosssss committed
804
805
806
807
	}

	setStatus(status) {
		this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR");
comfyanonymous's avatar
comfyanonymous committed
808
		if (status) {
809
810
811
			if (
				this.lastQueueSize != 0 &&
				status.exec_info.queue_remaining == 0 &&
Jairo Correa's avatar
Jairo Correa committed
812
813
				document.getElementById("autoQueueCheckbox").checked &&
				! app.lastExecutionError
814
			) {
comfyanonymous's avatar
comfyanonymous committed
815
816
				app.queuePrompt(0, this.batchCount);
			}
817
			this.lastQueueSize = status.exec_info.queue_remaining;
comfyanonymous's avatar
comfyanonymous committed
818
		}
pythongosssss's avatar
pythongosssss committed
819
820
	}
}