ui.js 19.3 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
434
435
436
437
438
	#type;
	#text;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

pythongosssss's avatar
pythongosssss committed
578
		const fileInput = $el("input", {
579
			id: "comfy-file-input",
pythongosssss's avatar
pythongosssss committed
580
			type: "file",
581
			accept: ".json,image/png,.latent,.safetensors",
reaper47's avatar
reaper47 committed
582
			style: {display: "none"},
pythongosssss's avatar
pythongosssss committed
583
584
585
586
			parent: document.body,
			onchange: () => {
				app.handleFile(fileInput.files[0]);
			},
pythongosssss's avatar
pythongosssss committed
587
		});
pythongosssss's avatar
pythongosssss committed
588

reaper47's avatar
reaper47 committed
589
590
591
592
593
594
595
596
597
		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
598
				$el("span.drag-handle"),
reaper47's avatar
reaper47 committed
599
600
				$el("span", {$: (q) => (this.queueSize = q)}),
				$el("button.comfy-settings-btn", {textContent: "⚙️", onclick: () => this.settings.show()}),
pythongosssss's avatar
pythongosssss committed
601
			]),
602
			$el("button.comfy-queue-btn", {
603
				id: "queue-button",
604
605
606
				textContent: "Queue Prompt",
				onclick: () => app.queuePrompt(0, this.batchCount),
			}),
m957ymj75urz's avatar
m957ymj75urz committed
607
			$el("div", {}, [
reaper47's avatar
reaper47 committed
608
				$el("label", {innerHTML: "Extra options"}, [
609
610
611
612
613
614
615
616
617
					$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
618
			]),
reaper47's avatar
reaper47 committed
619
			$el("div", {id: "extraOptions", style: {width: "100%", display: "none"}}, [
620
621
622
				$el("div",[

					$el("label", {innerHTML: "Batch count"}),
623
624
625
626
627
					$el("input", {
						id: "batchCountInputNumber",
						type: "number",
						value: this.batchCount,
						min: "1",
reaper47's avatar
reaper47 committed
628
						style: {width: "35%", "margin-left": "0.4em"},
629
						oninput: (i) => {
m957ymj75urz's avatar
m957ymj75urz committed
630
							this.batchCount = i.target.value;
631
632
							document.getElementById("batchCountInputRange").value = this.batchCount;
						},
m957ymj75urz's avatar
m957ymj75urz committed
633
					}),
634
635
636
637
638
639
					$el("input", {
						id: "batchCountInputRange",
						type: "range",
						min: "1",
						max: "100",
						value: this.batchCount,
m957ymj75urz's avatar
m957ymj75urz committed
640
641
						oninput: (i) => {
							this.batchCount = i.srcElement.value;
642
643
							document.getElementById("batchCountInputNumber").value = i.srcElement.value;
						},
644
645
646
647
648
649
650
651
					}),		
				]),

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

772
773
774
775
776
777
778
779
		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"},
		});

780
		dragElement(this.menuContainer, this.settings);
Jairo Correa's avatar
Jairo Correa committed
781

reaper47's avatar
reaper47 committed
782
		this.setStatus({exec_info: {queue_remaining: "X"}});
pythongosssss's avatar
pythongosssss committed
783
784
785
786
	}

	setStatus(status) {
		this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR");
comfyanonymous's avatar
comfyanonymous committed
787
		if (status) {
788
789
790
791
792
			if (
				this.lastQueueSize != 0 &&
				status.exec_info.queue_remaining == 0 &&
				document.getElementById("autoQueueCheckbox").checked
			) {
comfyanonymous's avatar
comfyanonymous committed
793
794
				app.queuePrompt(0, this.batchCount);
			}
795
			this.lastQueueSize = status.exec_info.queue_remaining;
comfyanonymous's avatar
comfyanonymous committed
796
		}
pythongosssss's avatar
pythongosssss committed
797
798
	}
}