122 lines
4.0 KiB
JavaScript
122 lines
4.0 KiB
JavaScript
// custom_nodes/FL_SystemCheck.js
|
||
// Render system info in a DOM widget so it stays visible on the current
|
||
// ComfyUI frontend instead of relying on legacy canvas foreground drawing.
|
||
|
||
import { app } from "../../scripts/app.js";
|
||
import { api } from "../../scripts/api.js";
|
||
|
||
const ICONS = {
|
||
"Operating System": "🖥️",
|
||
"CPU": "⚙️",
|
||
"RAM": "🧠",
|
||
"GPU": "🎮",
|
||
"CUDA version": "🚀",
|
||
"Python version": "🐍",
|
||
"PyTorch": "🔥",
|
||
"xformers": "⚡",
|
||
"torchvision": "👁️",
|
||
"numpy": "🔢",
|
||
"Pillow": "🖼️",
|
||
"OpenCV": "📷",
|
||
"transformers": "🤖",
|
||
};
|
||
|
||
const COLORS = {
|
||
"Operating System": "#4a90e2",
|
||
"CPU": "#50c878",
|
||
"RAM": "#9b59b6",
|
||
"GPU": "#e74c3c",
|
||
"CUDA version": "#f39c12",
|
||
"Python version": "#3498db",
|
||
"PyTorch": "#e67e22",
|
||
"xformers": "#1abc9c",
|
||
"torchvision": "#34495e",
|
||
"numpy": "#2ecc71",
|
||
"Pillow": "#e84393",
|
||
"OpenCV": "#c5a01c",
|
||
"transformers": "#6c5ce7",
|
||
};
|
||
|
||
const iconFor = (k) => ICONS[k] || "ℹ️";
|
||
const colorFor = (k) => COLORS[k] || "#95a5a6";
|
||
|
||
app.registerExtension({
|
||
name: "FL.SystemCheck",
|
||
async nodeCreated(node) {
|
||
const comfyClass = (node.constructor && node.constructor.comfyClass) || node.comfyClass || "";
|
||
if (comfyClass !== "FL_SystemCheck") return;
|
||
|
||
node.color = "#2a363b";
|
||
node.bgcolor = "#4F0074";
|
||
|
||
const container = document.createElement("div");
|
||
container.style.cssText =
|
||
"display:flex;flex-direction:column;gap:6px;padding:6px;box-sizing:border-box;" +
|
||
"width:100%;height:100%;overflow:auto;font-family:Arial,sans-serif;font-size:12px;color:#fff;";
|
||
|
||
const placeholder = document.createElement("div");
|
||
placeholder.textContent = 'Click "Run System Check".';
|
||
placeholder.style.opacity = "0.6";
|
||
container.appendChild(placeholder);
|
||
|
||
node.addWidget("button", "Run System Check", null, () => runSystemCheck(node, container));
|
||
|
||
node.addDOMWidget("fl_system_info", "div", container, {
|
||
getMinHeight: () => 260,
|
||
hideOnZoom: false,
|
||
serialize: false,
|
||
});
|
||
|
||
const [oldWidth, oldHeight] = node.size;
|
||
node.setSize([Math.max(oldWidth, 360), Math.max(oldHeight, 340)]);
|
||
},
|
||
});
|
||
|
||
async function runSystemCheck(node, container) {
|
||
container.innerHTML = "";
|
||
const loading = document.createElement("div");
|
||
loading.textContent = "Checking...";
|
||
loading.style.opacity = "0.7";
|
||
container.appendChild(loading);
|
||
|
||
try {
|
||
const response = await api.fetchApi("/fl_system_info");
|
||
if (!response.ok) throw new Error("HTTP " + response.status);
|
||
const info = await response.json();
|
||
["Env: PYTHONPATH", "Env: CUDA_HOME", "Env: LD_LIBRARY_PATH"].forEach((k) => delete info[k]);
|
||
renderInfo(container, info);
|
||
node.setDirtyCanvas(true, true);
|
||
} catch (e) {
|
||
container.innerHTML = "";
|
||
const err = document.createElement("div");
|
||
err.style.color = "#ff6b6b";
|
||
err.textContent = "Error: " + e.message + " (check the console).";
|
||
container.appendChild(err);
|
||
console.error("[FL System Check]", e);
|
||
}
|
||
}
|
||
|
||
function renderInfo(container, info) {
|
||
container.innerHTML = "";
|
||
for (const [key, value] of Object.entries(info)) {
|
||
const row = document.createElement("div");
|
||
row.style.cssText =
|
||
"display:flex;align-items:center;gap:8px;border-radius:5px;padding:5px 8px;" +
|
||
"background:" + colorFor(key) + ";";
|
||
|
||
const icon = document.createElement("span");
|
||
icon.textContent = iconFor(key);
|
||
|
||
const label = document.createElement("span");
|
||
label.textContent = key;
|
||
label.style.fontWeight = "bold";
|
||
|
||
const val = document.createElement("span");
|
||
val.textContent = value;
|
||
val.style.cssText = "margin-left:auto;text-align:right;word-break:break-word;";
|
||
|
||
row.append(icon, label, val);
|
||
container.appendChild(row);
|
||
}
|
||
}
|