322 lines
14 KiB
JavaScript
322 lines
14 KiB
JavaScript
// ComfyUI Progress Panel — shows live execution events in a toggleable side panel.
|
|
// Install: ComfyUI/custom_nodes/progress-panel/web/progressPanel.js
|
|
// Also create an empty __init__.py in progress-panel/ so ComfyUI loads the pack.
|
|
|
|
import { app } from "../../scripts/app.js";
|
|
|
|
const MAX_LINES = 500;
|
|
|
|
app.registerExtension({
|
|
name: "local.toolbox",
|
|
|
|
async setup() {
|
|
// ---- build DOM ----
|
|
const panel = document.createElement("div");
|
|
panel.id = "pp-panel";
|
|
panel.innerHTML = `
|
|
<div id="pp-header">
|
|
<span>Toolbox</span>
|
|
<div id="pp-header-btns">
|
|
<span id="pp-vram" title="VRAM usage">--</span>
|
|
<button id="pp-free" title="Free VRAM / unload models">💨 VRAM</button>
|
|
<button id="pp-reboot" title="Restart ComfyUI (requires Manager)">⟳ Restart</button>
|
|
<button id="pp-clear" title="Clear log">Clear</button>
|
|
<button id="pp-close" title="Close panel">✕</button>
|
|
</div>
|
|
</div>
|
|
<div id="pp-bar">
|
|
<div id="pp-bar-fill"></div>
|
|
<div id="pp-bar-text">idle</div>
|
|
</div>
|
|
<div id="pp-log"></div>
|
|
`;
|
|
|
|
const toggle = document.createElement("button");
|
|
toggle.id = "pp-toggle";
|
|
toggle.textContent = "🧰 Toolbox";
|
|
toggle.title = "Toolbox — drag to move, click to open";
|
|
|
|
const style = document.createElement("style");
|
|
style.textContent = `
|
|
#pp-toggle {
|
|
position: fixed; left: 12px; top: 60px; z-index: 9998;
|
|
background: #2a2a2a; color: #ddd; border: 1px solid #444;
|
|
padding: 6px 12px; border-radius: 6px; font: 12px sans-serif;
|
|
cursor: grab; user-select: none;
|
|
}
|
|
#pp-toggle.dragging { cursor: grabbing; opacity: 0.8; }
|
|
#pp-toggle:hover { background: #3a3a3a; }
|
|
#pp-panel {
|
|
position: fixed; width: 460px; height: 360px;
|
|
background: #1a1a1a; border: 1px solid #444; border-radius: 8px;
|
|
display: none; flex-direction: column; z-index: 9999;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.5); font: 12px monospace;
|
|
color: #ddd;
|
|
}
|
|
#pp-panel.open { display: flex; }
|
|
#pp-header {
|
|
padding: 6px 10px; background: #252525; border-bottom: 1px solid #444;
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
border-radius: 8px 8px 0 0; font-family: sans-serif;
|
|
}
|
|
#pp-header-btns { display: flex; gap: 4px; }
|
|
#pp-header-btns button {
|
|
background: #333; border: 1px solid #555; color: #ddd;
|
|
padding: 3px 8px; border-radius: 4px; cursor: pointer;
|
|
font: 11px sans-serif;
|
|
}
|
|
#pp-header-btns button:hover { background: #444; }
|
|
#pp-header-btns button:disabled { opacity: 0.4; cursor: not-allowed; }
|
|
#pp-vram {
|
|
font: 11px monospace; padding: 3px 6px;
|
|
background: #222; border: 1px solid #444; border-radius: 4px;
|
|
color: #7c7; min-width: 80px; text-align: center;
|
|
}
|
|
#pp-vram.warn { color: #e9a; }
|
|
#pp-vram.crit { color: #f66; }
|
|
#pp-bar {
|
|
position: relative;
|
|
height: 18px; background: #2a2a2a; overflow: hidden;
|
|
}
|
|
#pp-bar-fill {
|
|
height: 100%; width: 0%; background: linear-gradient(90deg, #4a9eff, #6ac);
|
|
transition: width 0.15s ease;
|
|
}
|
|
#pp-bar-text {
|
|
position: absolute; inset: 0;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font: 11px sans-serif; color: #fff;
|
|
text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 3px rgba(0,0,0,0.9);
|
|
pointer-events: none;
|
|
}
|
|
#pp-log {
|
|
flex: 1; overflow-y: auto; padding: 8px 12px;
|
|
white-space: pre-wrap; word-break: break-word; line-height: 1.5;
|
|
}
|
|
#pp-log .ts { color: #666; }
|
|
#pp-log .ok { color: #7c7; }
|
|
#pp-log .warn { color: #e9a; }
|
|
#pp-log .err { color: #f66; }
|
|
#pp-log .info { color: #9cf; }
|
|
`;
|
|
document.head.appendChild(style);
|
|
document.body.appendChild(panel);
|
|
document.body.appendChild(toggle);
|
|
|
|
const logEl = panel.querySelector("#pp-log");
|
|
const barEl = panel.querySelector("#pp-bar-fill");
|
|
const barText = panel.querySelector("#pp-bar-text");
|
|
|
|
// ---- position restore ----
|
|
const POS_KEY = "pp-toggle-pos";
|
|
try {
|
|
const saved = JSON.parse(localStorage.getItem(POS_KEY) || "null");
|
|
if (saved && typeof saved.x === "number" && typeof saved.y === "number") {
|
|
toggle.style.left = `${saved.x}px`;
|
|
toggle.style.top = `${saved.y}px`;
|
|
}
|
|
} catch {}
|
|
|
|
const anchorPanel = () => {
|
|
// position panel just below the toggle button, keep on-screen
|
|
const r = toggle.getBoundingClientRect();
|
|
const pw = 460, ph = 360, margin = 8;
|
|
let x = r.left;
|
|
let y = r.bottom + 6;
|
|
if (x + pw > window.innerWidth - margin) x = window.innerWidth - pw - margin;
|
|
if (y + ph > window.innerHeight - margin) y = r.top - ph - 6;
|
|
if (x < margin) x = margin;
|
|
if (y < margin) y = margin;
|
|
panel.style.left = `${x}px`;
|
|
panel.style.top = `${y}px`;
|
|
};
|
|
|
|
// ---- drag logic ----
|
|
let dragging = false, moved = false, startX = 0, startY = 0, origX = 0, origY = 0;
|
|
toggle.addEventListener("pointerdown", (e) => {
|
|
dragging = true; moved = false;
|
|
startX = e.clientX; startY = e.clientY;
|
|
const r = toggle.getBoundingClientRect();
|
|
origX = r.left; origY = r.top;
|
|
toggle.classList.add("dragging");
|
|
toggle.setPointerCapture(e.pointerId);
|
|
});
|
|
toggle.addEventListener("pointermove", (e) => {
|
|
if (!dragging) return;
|
|
const dx = e.clientX - startX, dy = e.clientY - startY;
|
|
if (Math.abs(dx) + Math.abs(dy) > 3) moved = true;
|
|
const nx = Math.max(0, Math.min(window.innerWidth - toggle.offsetWidth, origX + dx));
|
|
const ny = Math.max(0, Math.min(window.innerHeight - toggle.offsetHeight, origY + dy));
|
|
toggle.style.left = `${nx}px`;
|
|
toggle.style.top = `${ny}px`;
|
|
toggle.style.right = "auto"; toggle.style.bottom = "auto";
|
|
if (panel.classList.contains("open")) anchorPanel();
|
|
});
|
|
toggle.addEventListener("pointerup", (e) => {
|
|
if (!dragging) return;
|
|
dragging = false;
|
|
toggle.classList.remove("dragging");
|
|
toggle.releasePointerCapture(e.pointerId);
|
|
const r = toggle.getBoundingClientRect();
|
|
localStorage.setItem(POS_KEY, JSON.stringify({ x: r.left, y: r.top }));
|
|
if (!moved) {
|
|
panel.classList.toggle("open");
|
|
if (panel.classList.contains("open")) {
|
|
anchorPanel();
|
|
startVramPolling();
|
|
} else {
|
|
stopVramPolling();
|
|
}
|
|
}
|
|
});
|
|
window.addEventListener("resize", () => {
|
|
if (panel.classList.contains("open")) anchorPanel();
|
|
});
|
|
|
|
// ---- header buttons ----
|
|
panel.querySelector("#pp-close").onclick = () => {
|
|
panel.classList.remove("open");
|
|
stopVramPolling();
|
|
};
|
|
panel.querySelector("#pp-clear").onclick = () => { logEl.innerHTML = ""; };
|
|
|
|
panel.querySelector("#pp-free").onclick = async () => {
|
|
line("info", "→ freeing VRAM…");
|
|
try {
|
|
const r = await fetch("/free", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ unload_models: true, free_memory: true }),
|
|
});
|
|
line(r.ok ? "ok" : "err", r.ok ? "✓ VRAM freed" : `✗ /free returned ${r.status}`);
|
|
updateVram(); // refresh readout immediately
|
|
} catch (err) {
|
|
line("err", `✗ ${err.message}`);
|
|
}
|
|
};
|
|
|
|
// ---- VRAM polling ----
|
|
const vramEl = panel.querySelector("#pp-vram");
|
|
let vramLoggedShape = false;
|
|
const updateVram = async () => {
|
|
try {
|
|
const r = await fetch("/api/system_stats");
|
|
if (!r.ok) { vramEl.textContent = "n/a"; return; }
|
|
const data = await r.json();
|
|
const dev = data?.devices?.[0];
|
|
if (!dev || typeof dev.vram_total !== "number" || typeof dev.vram_free !== "number") {
|
|
vramEl.textContent = "??";
|
|
if (!vramLoggedShape) {
|
|
console.log("[toolbox] system_stats shape:", data);
|
|
vramLoggedShape = true;
|
|
}
|
|
return;
|
|
}
|
|
const total = dev.vram_total;
|
|
const used = total - dev.vram_free;
|
|
const pct = (used / total) * 100;
|
|
const gb = (n) => (n / (1024 ** 3)).toFixed(1);
|
|
vramEl.textContent = `${gb(used)}/${gb(total)} GB (${pct.toFixed(0)}%)`;
|
|
vramEl.classList.toggle("warn", pct >= 70 && pct < 90);
|
|
vramEl.classList.toggle("crit", pct >= 90);
|
|
} catch (err) {
|
|
vramEl.textContent = "err";
|
|
}
|
|
};
|
|
let vramTimer = null;
|
|
const startVramPolling = () => {
|
|
updateVram();
|
|
if (vramTimer) clearInterval(vramTimer);
|
|
vramTimer = setInterval(updateVram, 2000);
|
|
};
|
|
const stopVramPolling = () => {
|
|
if (vramTimer) { clearInterval(vramTimer); vramTimer = null; }
|
|
};
|
|
|
|
panel.querySelector("#pp-reboot").onclick = async () => {
|
|
if (!confirm("Restart ComfyUI? Current run will be lost.")) return;
|
|
line("warn", "→ requesting reboot…");
|
|
try {
|
|
// ComfyUI-Manager exposes /manager/reboot
|
|
const r = await fetch("/manager/reboot", { method: "GET" });
|
|
if (r.ok) {
|
|
line("ok", "✓ reboot requested — reload page when server is back");
|
|
} else {
|
|
line("err", `✗ /manager/reboot returned ${r.status} (is ComfyUI-Manager installed?)`);
|
|
}
|
|
} catch (err) {
|
|
// server actually going down often causes a network error — that's the success case
|
|
line("warn", `server dropped connection (likely restarting): ${err.message}`);
|
|
}
|
|
};
|
|
|
|
const line = (cls, text) => {
|
|
const ts = new Date().toLocaleTimeString();
|
|
const row = document.createElement("div");
|
|
row.innerHTML = `<span class="ts">[${ts}]</span> <span class="${cls}">${text}</span>`;
|
|
logEl.appendChild(row);
|
|
while (logEl.children.length > MAX_LINES) logEl.removeChild(logEl.firstChild);
|
|
logEl.scrollTop = logEl.scrollHeight;
|
|
};
|
|
|
|
// ---- hook into ComfyUI's api events ----
|
|
const api = app.api;
|
|
let runStart = 0;
|
|
let currentNodeLabel = "";
|
|
|
|
api.addEventListener("execution_start", (e) => {
|
|
runStart = performance.now();
|
|
barEl.style.width = "0%";
|
|
barText.textContent = "starting…";
|
|
line("info", `▶ Run started (prompt ${e.detail?.prompt_id ?? "?"})`);
|
|
});
|
|
|
|
api.addEventListener("executing", (e) => {
|
|
const nodeId = e.detail;
|
|
if (nodeId === null) {
|
|
const dur = ((performance.now() - runStart) / 1000).toFixed(1);
|
|
barEl.style.width = "100%";
|
|
barText.textContent = `done in ${dur}s`;
|
|
currentNodeLabel = "";
|
|
line("ok", `✓ Run finished in ${dur}s`);
|
|
} else {
|
|
const node = app.graph?.getNodeById?.(Number(nodeId));
|
|
currentNodeLabel = node ? `${node.type} #${nodeId}` : `node #${nodeId}`;
|
|
barEl.style.width = "0%";
|
|
barText.textContent = currentNodeLabel;
|
|
line("info", `→ ${currentNodeLabel}`);
|
|
}
|
|
});
|
|
|
|
api.addEventListener("progress", (e) => {
|
|
const { value, max } = e.detail || {};
|
|
if (typeof value === "number" && typeof max === "number" && max > 0) {
|
|
const pct = (value / max) * 100;
|
|
barEl.style.width = `${pct}%`;
|
|
const prefix = currentNodeLabel ? `${currentNodeLabel} — ` : "";
|
|
barText.textContent = `${prefix}${value}/${max} (${pct.toFixed(0)}%)`;
|
|
}
|
|
});
|
|
|
|
api.addEventListener("execution_cached", (e) => {
|
|
const n = e.detail?.nodes?.length ?? 0;
|
|
if (n) line("ts", `cached ${n} node${n === 1 ? "" : "s"}`);
|
|
});
|
|
|
|
api.addEventListener("execution_error", (e) => {
|
|
const d = e.detail || {};
|
|
line("err", `✗ ${d.exception_type || "Error"}: ${d.exception_message || "unknown"}`);
|
|
if (d.node_type) line("err", ` in ${d.node_type} (#${d.node_id})`);
|
|
if (d.traceback) {
|
|
const tb = Array.isArray(d.traceback) ? d.traceback.join("") : d.traceback;
|
|
line("err", tb.split("\n").slice(-8).join("\n"));
|
|
}
|
|
panel.classList.add("open"); // auto-open on error
|
|
});
|
|
|
|
api.addEventListener("execution_interrupted", () => line("warn", "⊘ Interrupted"));
|
|
|
|
line("ts", "Progress panel ready");
|
|
},
|
|
});
|