Hugging Face's logo

Peter-Young
/
workerflux

ONNX
Safetensors
Model card Files
xet
 Community
workerflux
File size: 2,944 Bytes
5193146
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import { api } from "../../../scripts/api.js";
import { app } from "../../../scripts/app.js";
import { $el } from "../../../scripts/ui.js";
import { ConfigSetting, addJNodesSetting } from "./common/SettingsManager.js"

// Simple script that adds the current queue size to the window title
// Adds a favicon that changes color while active and a percentage complete of the current job
// And adds a progress bar to the comfy menu

// Thank you to pythongsssss and Kijai on discord for lighting the way toward this functionality!

var progressBar;
var progressBarContainer;

app.registerExtension({
	name: "JNodes.StatusProgressBar",
	async setup() {

		const featureName = "StatusIndicators.ProgressBar.";

		class CustomConfigSetting extends ConfigSetting {
			constructor(settingName, defaultValue) {
				super(featureName + settingName, defaultValue);
			}
		}
		
		let setting_bEnabled = new CustomConfigSetting("bEnabled", false);

		const labelWidget = $el("label", {
			textContent: "Show Progress Bar Above menu:",
		});

		const settingWidget = $el("input", {
			type: "checkbox",
			checked: setting_bEnabled.value,
			onchange: (e) => {
				setting_bEnabled.value = e.target.checked;

				if (e.target.checked) {
					setup();
				} else {
					teardown();
				}
			},
		});

		addJNodesSetting(labelWidget, settingWidget);

		function createProgressBar() {
			const menu = document.querySelector(".comfy-menu");

			progressBar = $el("div", {
				id: "progressBar",
				style: {
					transition: 'width 0.25s',
					width: '0%',
					height: '100%',
					clipPath: 'inset(0)',
					background: "green",
					marginTop: '0',
					marginLeft: '0',
					marginRight: '0',
					marginBottom: '0h',
				}
			});

			progressBarContainer = $el("div", {
				id: "progressBarContainer",
				style: {
					width: '100%',
					height: '0.5vh',
					display: 'flex',
					marginTop: '0',
					marginLeft: '0.1vh',
					marginRight: '0.1vh',
					marginBottom: '0.5vh',
				}
			}, [
				progressBar
			]
			);

			menu.prepend(progressBarContainer);
		}

		function removeProgressBar() {
			if (progressBarContainer) {
				const menu = document.querySelector(".comfy-menu");

				menu.removeChild(progressBarContainer);
			}
		}

		function updateProgressBar(progress) {
			if (setting_bEnabled.value && progressBar) {
				progressBar.style.width = `${progress}%`;
			}
		}

		function addListeners() {
			api.addEventListener("progress", ({ detail }) => {
				if (setting_bEnabled.value) {
					const { value, max } = detail;
					const progress = Math.floor((value / max) * 100);

					if (!isNaN(progress)) {
						updateProgressBar(progress);
					}
				}
			});

			api.addEventListener("executed", async ({ detail }) => {
				updateProgressBar(0);
			});
		}

		function setup() {
			createProgressBar();
			addListeners();
		}

		function teardown() {
			removeProgressBar();
		}

		if (setting_bEnabled.value) {
			setup();
		}
	},
});