v0.56.0

CHANGELOG.md

@@ -1,4 +1,8 @@
 # Changelog
+
+## [0.56.0] - 2025-04-3
+- 增加Resource monitor
+
 ## [0.51.0] - 2025-03-31
 - node align 新增快捷键`Shift+WASD`
 

README.md

@@ -15,6 +15,15 @@ This is a custom node utility package developed for ComfyUI. Initially created f
 **📌 所有 KayTool 节点包用到的资源都在 `ComfyUI/custom_nodes/kaytool` 文件夹内。| All KayTool node packages use resources in the `ComfyUI/custom_nodes/kaytool` folder.**
 
 
+## 资源监视器 Resource Monitor
+
+- 实时显示当前 ComfyUI 资源使用情况，包括内存占用、显存占用、CPU 占用等。
+  Displays real-time resource usage information, including memory usage, GPU memory usage, and CPU usage.
+- 支持曲线统计表以精确评估工作流资源消耗情况。
+  Supports curve statistics for accurate evaluation of workflow resource consumption.
+- 支持自定义颜色设置，可根据个人喜好调整显示效果。
+  Supports custom color settings, allowing personal preference adjustments.
+
 ## 节点排版工具栏 Node Align Toolbar
 
 - 支持节点多种对齐方式的工具栏

__init__.py

@@ -1,6 +1,8 @@
 import os
 import json
 from aiohttp import web
+from .api import resources
+
 from .nodes.custom_save_image import CustomSaveImage
 from .nodes.color_adjustment import ColorAdjustment
 from .nodes.strong_prompt import StrongPrompt
@@ -90,28 +92,3 @@ NODE_DISPLAY_NAME_MAPPINGS = {
 }
 
 WEB_DIRECTORY = "web"
-SETTINGS_FILE = os.path.join(os.path.dirname(os.path.realpath(__file__)), "settings.json")
-
-# async def load_settings(request):
-#     if os.path.exists(SETTINGS_FILE):
-#         with open(SETTINGS_FILE, "r") as f:
-#             return web.json_response(json.load(f))
-#     return web.json_response({"ShowRunOption": True, "ShowSetGetOptions": True})
-
-# async def save_settings(request):
-#     data = await request.json()
-#     settings = {}
-#     if os.path.exists(SETTINGS_FILE):
-#         with open(SETTINGS_FILE, "r") as f:
-#             settings = json.load(f)
-#     settings.update(data)
-#     with open(SETTINGS_FILE, "w") as f:
-#         json.dump(settings, f, indent=2)
-#     return web.Response(status=200)
-
-# import server
-# app = server.PromptServer.instance
-# app.app.add_routes([
-#     web.get("/kaytool/load_settings", load_settings),
-#     web.post("/kaytool/save_settings", save_settings),
-# ])

api/resources.py

@@ -0,0 +1,84 @@
+from server import PromptServer
+import psutil
+import asyncio
+import json
+from aiohttp import web
+from cpuinfo import get_cpu_info
+import pynvml
+import platform
+
+PLATFORM = platform.system()
+IS_MACOS = PLATFORM == "Darwin"
+IS_LINUX = PLATFORM == "Linux"
+IS_WINDOWS = PLATFORM == "Windows"
+
+PYNVML_AVAILABLE = False
+if IS_LINUX or IS_WINDOWS:
+    try:
+        pynvml.nvmlInit()
+        PYNVML_AVAILABLE = True
+    except pynvml.NVMLError:
+        PYNVML_AVAILABLE = False
+
+CPU_NAME = get_cpu_info().get('brand_raw', "Unknown")
+GPU_INFO_CACHE = None
+LAST_GPU_UPDATE = 0
+GPU_CACHE_INTERVAL = 0.5
+
+async def get_gpu_info():
+    global GPU_INFO_CACHE, LAST_GPU_UPDATE
+    current_time = asyncio.get_event_loop().time()
+    if GPU_INFO_CACHE is None or (current_time - LAST_GPU_UPDATE) >= GPU_CACHE_INTERVAL:
+        if IS_MACOS:
+            GPU_INFO_CACHE = "GPU monitoring not supported on macOS"
+        elif PYNVML_AVAILABLE:
+            try:
+                device_count = pynvml.nvmlDeviceGetCount()
+                gpu_info = []
+                for i in range(device_count):
+                    handle = pynvml.nvmlDeviceGetHandleByIndex(i)
+                    name = pynvml.nvmlDeviceGetName(handle)
+                    if isinstance(name, bytes):
+                        name = name.decode('utf-8')
+                    util = pynvml.nvmlDeviceGetUtilizationRates(handle)
+                    mem_info = pynvml.nvmlDeviceGetMemoryInfo(handle)
+                    gpu_info.append({
+                        "index": i,
+                        "name": name,
+                        "load": float(util.gpu),
+                        "memory_used": float(mem_info.used) / (1024 ** 3),
+                        "memory_total": float(mem_info.total) / (1024 ** 3),
+                        "memory_percent": (float(mem_info.used) / float(mem_info.total)) * 100
+                    })
+                GPU_INFO_CACHE = gpu_info
+            except Exception:
+                GPU_INFO_CACHE = "GPU information unavailable"
+        else:
+            GPU_INFO_CACHE = "GPU information unavailable"
+        LAST_GPU_UPDATE = current_time
+    return GPU_INFO_CACHE
+
+@PromptServer.instance.routes.get("/kaytool/resources")
+async def fetch_resources(request):
+    try:
+        cpu_percent = psutil.cpu_percent(interval=0.1)
+        cpu_count = psutil.cpu_count()
+        ram = psutil.virtual_memory()
+        ram_total = round(ram.total / (1024 ** 3), 1)
+        ram_used = round(ram.used / (1024 ** 3), 1)
+        ram_percent = ram.percent
+
+        gpu_info = await get_gpu_info()
+
+        data = {
+            "cpu_percent": cpu_percent,
+            "cpu_count": cpu_count,
+            "cpu_name": CPU_NAME,
+            "ram_total": ram_total,
+            "ram_used": ram_used,
+            "ram_percent": ram_percent,
+            "gpu": gpu_info
+        }
+        return web.Response(text=json.dumps(data), content_type='application/json')
+    except Exception as e:
+        return web.Response(text=json.dumps({"error": str(e)}), status=500)

locales/zh/main.json

@@ -5,7 +5,8 @@
       "KayTool Menu": "右键菜单",
       "Custom Web Logo (BETA)": "自定义网页徽标",
       "Workflow PNG": "Workflow PNG",
-      "NodeAlignment": "节点对齐工具栏"
+      "NodeAlignment": "节点对齐工具栏",
+      "Resource Monitor": "资源监视器"
     },
     "nodeCategories": {
       "Image": "图像",

locales/zh/settings.json

@@ -18,11 +18,20 @@
       "name": "Workflow PNG 导出的边距大小",
       "tooltip": "建议设置 100"
     },
+    "KayTool_EnableResourceMonitor": {
+      "name": "启用资源监视器"
+    },
+    "KayTool_ResourceMonitorEdgeFade": {
+      "name": "统计表边缘渐隐"
+    },
+    "KayTool_ResourceMonitorBackgroundOpacity": {
+      "name": "资源监视器背景不透明度"
+    },
     "KayTool_SetGetForegroundColor": {
-      "name": " '🛜 Set/Get' 节点颜色"
+      "name": "节点颜色"
     },
     "KayTool_SetGetBackgroundColor": {
-      "name": " '🛜 Set/Get' 标题颜色"
+      "name": "标题颜色"
     },
     "KayTool_CustomWebLogo": {
       "name": "文件必须 < 1MB",

nodes/ab_images.py

@@ -14,7 +14,6 @@ class ABImages(PreviewImage):
                 "a": ("IMAGE",), 
             },
             "optional": {
-                
                 "b": ("IMAGE",),  
             },
             "hidden": {

pyproject.toml

@@ -1,9 +1,9 @@
 [project]
 name = "kaytool"
-description ="KayTool enhances ComfyUI workflow efficiency with practical tools, including: image processing (resize, color, blur, expand, merge, crop), background/mask tasks via BiRefNet/RemBG, wireless data transfer (Get & Out), AI translation (Tencent/Baidu), dynamic math operations, flexible text handling, precision sliders, metadata/color profile-supported image saving, batch processing via image folder loading, canvas workflow node map export as PNG with embedded metadata, quick Run options via right-click (Run Group/Node), node alignment toolbar with custom styled styles, and custom ComfyUI logo integration."
-version = "0.52.2"
+description ="KayTool enhances ComfyUI workflow efficiency with practical tools, including: image processing (resize, color, blur, expand, merge, crop), background/mask tasks via BiRefNet/RemBG, wireless data transfer (Get & Out), AI translation (Tencent/Baidu),Professional high-precision resource monitor and statistics table, dynamic math operations, flexible text handling, precision sliders, metadata/color profile-supported image saving, batch processing via image folder loading, canvas workflow node map export as PNG with embedded metadata, quick Run options via right-click (Run Group/Node), node alignment toolbar with custom styled styles, and custom ComfyUI logo integration."
+version = "0.56.0"
 license = {file = "LICENSE"}
-dependencies = ["rembg, timm, opencv-python, requests"]
+dependencies = ["rembg, timm, opencv-python, requests, py-cpuinfo, pynvml"]
 
 [project.urls]
 Repository = "https://github.com/kk8bit/KayTool"

requirements.txt

@@ -1,4 +1,6 @@
 rembg
 timm
 opencv-python
-requests
+requests
+py-cpuinfo
+pynvml

web/resourcemonitor.js

@@ -0,0 +1,563 @@
+import { app } from "../../../scripts/app.js";
+
+const KayResourceMonitor = {
+    toolbar: null,
+    chartCanvas: null,
+    dataDisplay: null,
+    menuButton: null,
+
+    dataHistory: { cpu: [], ram: [], gpu: [], gpuMem: [] },
+    displayHistory: { cpu: [], ram: [], gpu: [], gpuMem: [] },
+    current: { 
+        cpu: 0, ram: 0, gpu: 0, gpuMem: 0,
+        ramUsed: 0, ramTotal: 0, gpuMemUsed: 0, gpuMemTotal: 0
+    },
+    target: {
+        cpu: 0, ram: 0, gpu: 0, gpuMem: 0,
+        ramTotal: 0, ramUsed: 0, gpuMemTotal: 0, gpuMemUsed: 0,
+        cpuName: "Unknown", gpuName: "Unknown"
+    },
+
+    cpuCores: 4,
+    dragState: { isDragging: false, offsetX: 0, offsetY: 0 },
+    resizeState: { isResizing: false, direction: null, startX: 0, startY: 0, startWidth: 0, startHeight: 0 },
+    position: { left: 0, top: 0 },
+    size: { width: 250, height: 200 },
+    lastUpdate: 0, lastCurveUpdate: 0, lastDisplayUpdate: 0,
+    maxPoints: 6000,
+    fetchInterval: 500,
+    curveInterval: 0,
+    displayInterval: 0,
+    smoothFactor: 0.01,
+    minWidth: 150,
+    minHeight: 100,
+    maxHeight: 200,
+    edgeThreshold: 10,
+
+    colors: {
+        cpu: 'rgb(232, 166, 0)',
+        ram: 'rgb(88, 207, 3)',
+        gpu: 'rgb(224, 0, 153)',
+        gpuMem: 'rgb(0, 115, 255)'
+    },
+
+    styles: {
+        toolbar: `position: fixed; display: flex; flex-direction: column; color: rgba(186, 186, 186, 0.8); padding: 10px; border-radius: 5px; z-index: 10000; user-select: none; pointer-events: auto; max-height: 200px;`,
+        header: `cursor: grab; margin-bottom: 10px; font-weight: bold; font-size: 10px;`,
+        canvas: `margin-bottom: 10px; width: 100%; height: 100px;`,
+        display: `display: flex; flex-direction: column; font-size: 10px; flex-grow: 1; overflow: hidden;`,
+        dot: (color) => `display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: ${color}; margin-right: 5px; flex-shrink: 0;`,
+        bar: (width) => `display: inline-block; width: ${width}px; height: 3px; background: rgba(200, 200, 200, 0.3); margin-right: 5px; position: relative; flex-shrink: 0;`,
+        fill: (color, percent) => `position: absolute; top: 0; left: 0; width: ${percent}%; height: 100%; background: ${color};`,
+        row: `display: flex; align-items: center; height: 12px; white-space: nowrap;`,
+        text: `overflow: hidden; text-overflow: ellipsis;`
+    },
+
+    isVisible: true,
+    animationFrameId: null,
+    isEnabled: true,
+    isInitialized: false,
+    edgeFadeEnabled: true,
+
+    async init() {
+        if (this.isInitialized) return;
+        this.isInitialized = true;
+
+        this.loadVisibility();
+        this.startMonitoring();
+        this.bindEvents();
+
+        await this.loadSettings();
+        this.setupUI();
+    },
+
+    async loadSettings() {
+        this.isEnabled = app.ui.settings.getSettingValue("KayTool.EnableResourceMonitor");
+        this.edgeFadeEnabled = app.ui.settings.getSettingValue("KayTool.ResourceMonitorEdgeFade");
+    },
+
+    loadVisibility() {
+        const visible = localStorage.getItem('KayResourceMonitorVisible');
+        this.isVisible = visible === null ? true : visible === 'true';
+    },
+
+    saveVisibility() {
+        localStorage.setItem('KayResourceMonitorVisible', this.isVisible.toString());
+    },
+
+    setupUI() {
+        this.toolbar = document.createElement('div');
+        this.toolbar.id = 'kay-resource-monitor';
+        const opacity = app.ui.settings.getSettingValue("KayTool.ResourceMonitorBackgroundOpacity") / 100;
+        this.toolbar.style.cssText = `${this.styles.toolbar} width: ${this.size.width}px; height: ${this.size.height}px; left: ${this.position.left}px; top: ${this.position.top}px; display: ${this.isVisible && this.isEnabled ? 'flex' : 'none'}; background: rgba(0, 0, 0, ${opacity});`;
+
+        const header = document.createElement('div');
+        header.style.cssText = this.styles.header;
+        header.textContent = "𝙆 Resource Monitor";
+        this.toolbar.appendChild(header);
+
+        this.chartCanvas = document.createElement('canvas');
+        this.chartCanvas.style.cssText = this.styles.canvas;
+        this.chartCanvas.width = this.size.width - 20;
+        this.chartCanvas.height = 100;
+        this.toolbar.appendChild(this.chartCanvas);
+
+        this.dataDisplay = document.createElement('div');
+        this.dataDisplay.style.cssText = this.styles.display;
+        this.toolbar.appendChild(this.dataDisplay);
+
+        document.body.appendChild(this.toolbar);
+        this.loadPosition();
+        this.loadSize();
+        this.onResize();
+        this.bindToolbarEvents();
+
+        if (this.isEnabled && this.isVisible) {
+            this.startAnimation();
+        }
+    },
+
+    show() {
+        this.isVisible = true;
+        if (this.toolbar && this.isEnabled) {
+            this.toolbar.style.display = 'flex';
+            this.refreshCanvas();
+            this.startAnimation();
+        }
+        this.saveVisibility();
+    },
+
+    hide() {
+        this.isVisible = false;
+        if (this.toolbar) {
+            this.toolbar.style.display = 'none';
+            this.stopAnimation();
+        }
+        this.saveVisibility();
+    },
+
+    updateEnabledState(enabled) {
+        this.isEnabled = enabled;
+        if (this.menuButton) {
+            this.menuButton.style.display = enabled ? '' : 'none';
+        }
+        if (this.toolbar) {
+            this.toolbar.style.display = enabled && this.isVisible ? 'flex' : 'none';
+            if (enabled && this.isVisible) {
+                this.refreshCanvas();
+                this.startAnimation();
+            } else {
+                this.stopAnimation();
+            }
+        }
+    },
+
+    refreshCanvas() {
+        if (this.chartCanvas) {
+            const headerHeight = this.toolbar.firstChild.getBoundingClientRect().height + 10;
+            const dataHeight = this.dataDisplay.clientHeight;
+            this.chartCanvas.width = this.toolbar.clientWidth - 20;
+            this.chartCanvas.height = this.toolbar.clientHeight - headerHeight - dataHeight - 10;
+        }
+    },
+
+    async fetchResources() {
+        try {
+            const response = await fetch('/kaytool/resources', { timeout: 5000 });
+            if (!response.ok) throw new Error(`HTTP error: ${response.status}`);
+            const data = await response.json();
+            this.updateTarget(data);
+        } catch (error) {
+            this.updateTarget({
+                cpu_percent: 0,
+                cpu_count: this.cpuCores,
+                cpu_name: "Unknown",
+                ram_total: 0,
+                ram_used: 0,
+                ram_percent: 0,
+                gpu: "Fetch failed"
+            });
+        }
+    },
+
+    updateTarget(data) {
+        this.target.cpu = data.cpu_percent || 0;
+        this.cpuCores = data.cpu_count || 4;
+        this.target.ram = data.ram_percent || 0;
+        this.target.ramTotal = data.ram_total || 0;
+        this.target.ramUsed = data.ram_used || 0;
+        this.target.cpuName = data.cpu_name || "Unknown";
+        this.dataHistory.cpu.push(this.target.cpu);
+        this.dataHistory.ram.push(this.target.ram);
+
+        if (data.gpu && typeof data.gpu !== 'string' && data.gpu.length > 0) {
+            this.target.gpu = data.gpu[0].load || 0;
+            this.target.gpuMem = data.gpu[0].memory_percent || 0;
+            this.target.gpuMemTotal = data.gpu[0].memory_total || 0;
+            this.target.gpuMemUsed = data.gpu[0].memory_used || 0;
+            this.target.gpuName = data.gpu[0].name || "Unknown";
+            this.dataHistory.gpu.push(this.target.gpu);
+            this.dataHistory.gpuMem.push(this.target.gpuMem);
+        } else {
+            this.target.gpu = 0;
+            this.target.gpuMem = 0;
+            this.target.gpuMemTotal = 0;
+            this.target.gpuMemUsed = 0;
+            this.target.gpuName = "Unknown";
+            this.dataHistory.gpu.push(0);
+            this.dataHistory.gpuMem.push(0);
+        }
+
+        if (this.dataHistory.cpu.length > this.maxPoints) {
+            this.dataHistory.cpu.shift();
+            this.dataHistory.ram.shift();
+            this.dataHistory.gpu.shift();
+            this.dataHistory.gpuMem.shift();
+        }
+    },
+
+    updateDisplay() {
+        const { cpu, ram, gpu, gpuMem, ramUsed, ramTotal, gpuMemUsed, gpuMemTotal } = this.current;
+        const { styles, colors } = this;
+        this.dataDisplay.innerHTML = [
+            this.renderRow('CPU', colors.cpu, cpu, `${cpu.toFixed(1)}% (${this.cpuCores} cores) - ${this.target.cpuName}`),
+            this.renderRow('RAM', colors.ram, ram, `${ramUsed.toFixed(1)}/${ramTotal.toFixed(1)}GB (${ram.toFixed(1)}%)`),
+            this.target.gpu || this.target.gpuMem
+                ? [
+                    this.renderRow('GPU', colors.gpu, gpu, `${gpu.toFixed(1)}% - ${this.target.gpuName}`),
+                    this.renderRow('VRAM', colors.gpuMem, gpuMem, `${gpuMemUsed.toFixed(1)}/${gpuMemTotal.toFixed(1)}GB (${gpuMem.toFixed(1)}%)`)
+                ].join('')
+                : [
+                    this.renderRow('GPU', colors.gpu, 0, 'N/A'),
+                    this.renderRow('VRAM', colors.gpuMem, 0, 'N/A')
+                ].join('')
+        ].join('');
+    },
+
+    renderRow(label, color, value, text) {
+        const { styles } = this;
+        const containerWidth = this.toolbar.clientWidth - 20;
+        const minBarWidth = 50;
+        const maxBarWidth = 200;
+        const fixedSpacing = 3 + 5 + 5;
+        const availableWidth = containerWidth - fixedSpacing;
+        const barWidth = Math.min(maxBarWidth, Math.max(minBarWidth, availableWidth * 0.3));
+
+        const textAvailableWidth = containerWidth - fixedSpacing - barWidth;
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        ctx.font = '10px sans-serif';
+        const textWidth = ctx.measureText(`${label}: ${text}`).width;
+        let displayText = `${label}: ${text}`;
+        if (textWidth > textAvailableWidth) {
+            const ellipsisWidth = ctx.measureText('...').width;
+            let truncatedText = `${label}: `;
+            let remainingWidth = textAvailableWidth - ctx.measureText(truncatedText).width - ellipsisWidth;
+            for (let i = 0; i < text.length; i++) {
+                const charWidth = ctx.measureText(text[i]).width;
+                if (remainingWidth < charWidth) {
+                    truncatedText += '...';
+                    break;
+                }
+                truncatedText += text[i];
+                remainingWidth -= charWidth;
+            }
+            displayText = truncatedText;
+        }
+        return `<div style="${styles.row}">
+            <span style="${styles.dot(color)}"></span>
+            <span style="${styles.bar(barWidth)}"><span style="${styles.fill(color, value)}"></span></span>
+            <span style="${styles.text}">${displayText}</span>
+        </div>`;
+    },
+
+    animate() {
+        if (!this.isVisible || !this.isEnabled || !this.toolbar) return;
+
+        const now = performance.now();
+
+        if (now - this.lastUpdate >= this.fetchInterval) {
+            this.fetchResources();
+            this.lastUpdate = now;
+        }
+
+        for (const key in this.current) {
+            if (this.current[key] === 0 && this.target[key] !== 0) {
+                this.current[key] = this.target[key];
+            } else {
+                this.current[key] += (this.target[key] - this.current[key]) * this.smoothFactor;
+            }
+        }
+
+        if (now - this.lastCurveUpdate >= this.curveInterval) {
+            for (const key in this.displayHistory) {
+                this.displayHistory[key].push(this.current[key]);
+                if (this.displayHistory[key].length > this.maxPoints) this.displayHistory[key].shift();
+            }
+            this.lastCurveUpdate = now;
+        }
+
+        if (now - this.lastDisplayUpdate >= this.displayInterval) {
+            this.updateDisplay();
+            this.lastDisplayUpdate = now;
+        }
+
+        if (typeof this.drawCurves === 'function') {
+            this.drawCurves();
+        }
+        
+        this.animationFrameId = requestAnimationFrame(() => this.animate());
+    },
+
+    startAnimation() {
+        if (!this.animationFrameId && this.isEnabled && this.isVisible && this.toolbar) {
+            this.lastUpdate = performance.now();
+            this.lastCurveUpdate = performance.now();
+            this.lastDisplayUpdate = performance.now();
+            this.animationFrameId = requestAnimationFrame(() => this.animate());
+        }
+    },
+
+    stopAnimation() {
+        if (this.animationFrameId) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+    },
+
+    drawCurves() {
+        const ctx = this.chartCanvas.getContext('2d');
+        const w = this.chartCanvas.width;
+        const h = this.chartCanvas.height;
+
+        ctx.clearRect(0, 0, w, h);
+
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)';
+        ctx.lineWidth = 0.5;
+        ctx.beginPath();
+        for (let y = 0; y <= h; y += h / 4) {
+            ctx.moveTo(0, y);
+            ctx.lineTo(w, y);
+        }
+        ctx.stroke();
+
+        const step = w / (this.maxPoints - 1);
+        const { colors } = this;
+        [
+            { data: this.displayHistory.cpu, color: colors.cpu },
+            { data: this.displayHistory.ram, color: colors.ram },
+            { data: this.displayHistory.gpu, color: colors.gpu },
+            { data: this.displayHistory.gpuMem, color: colors.gpuMem }
+        ].forEach(({ data, color }) => {
+            ctx.strokeStyle = color;
+            ctx.lineWidth = 0.8;
+            ctx.beginPath();
+            data.forEach((v, i) => {
+                const x = i * step;
+                const y = h - (v / 100) * h;
+                if (i === 0) ctx.moveTo(x, y);
+                else ctx.lineTo(x, y);
+            });
+            ctx.stroke();
+        });
+
+        if (this.edgeFadeEnabled) {
+            const gradient = ctx.createLinearGradient(0, 0, w, 0);
+            gradient.addColorStop(0, 'rgba(255, 255, 255, 0)');
+            gradient.addColorStop(0.1, 'rgba(255, 255, 255, 1)');
+            gradient.addColorStop(0.9, 'rgba(255, 255, 255, 1)');
+            gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+
+            ctx.save();
+            ctx.globalCompositeOperation = 'destination-in';
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, 0, w, h);
+            ctx.restore();
+        }
+    },
+
+    startMonitoring() {
+        for (const key in this.displayHistory) {
+            this.displayHistory[key] = Array(this.maxPoints).fill(0);
+        }
+    },
+
+    bindEvents() {
+        document.addEventListener('mousemove', (e) => {
+            if (this.dragState.isDragging) this.onDrag(e);
+            if (this.resizeState.isResizing) this.onResizeDrag(e);
+        });
+        document.addEventListener('mouseup', (e) => {
+            if (this.dragState.isDragging) this.endDrag();
+            if (this.resizeState.isResizing) this.endResize();
+        });
+        document.addEventListener('selectstart', (e) => (this.dragState.isDragging || this.resizeState.isResizing) && e.preventDefault());
+        window.addEventListener('resize', () => this.onResize());
+    },
+
+    bindToolbarEvents() {
+        if (this.toolbar) {
+            this.toolbar.addEventListener('mousemove', (e) => this.onMouseMove(e));
+            this.toolbar.addEventListener('mousedown', (e) => {
+                if (e.target.style.cursor === 'grab') this.startDrag(e);
+                else if (['e-resize', 's-resize', 'se-resize'].includes(e.target.style.cursor)) this.startResize(e, e.target.style.cursor.split('-')[0]);
+            });
+        }
+    },
+
+    loadPosition() {
+        const pos = JSON.parse(localStorage.getItem('KayResourceMonitorPosition')) || {};
+        this.position.left = pos.left || 0;
+        this.position.top = pos.top || 0;
+        this.toolbar.style.left = `${this.position.left}px`;
+        this.toolbar.style.top = `${this.position.top}px`;
+    },
+
+    loadSize() {
+        const size = JSON.parse(localStorage.getItem('KayResourceMonitorSize')) || {};
+        this.size.width = Math.max(size.width || 250, this.minWidth);
+        this.size.height = Math.max(size.height || 200, this.minHeight);
+        this.toolbar.style.width = `${this.size.width}px`;
+        this.toolbar.style.height = `${this.size.height}px`;
+    },
+
+    savePositionAndSize() {
+        localStorage.setItem('KayResourceMonitorPosition', JSON.stringify(this.position));
+        localStorage.setItem('KayResourceMonitorSize', JSON.stringify(this.size));
+    },
+
+    onResize() {
+        if (!this.toolbar) return;
+        const winW = window.innerWidth;
+        const winH = window.innerHeight;
+        this.position.left = Math.max(0, Math.min(this.position.left, winW - this.size.width));
+        this.position.top = Math.max(0, Math.min(this.position.top, winH - this.size.height));
+        this.toolbar.style.left = `${this.position.left}px`;
+        this.toolbar.style.top = `${this.position.top}px`;
+        this.chartCanvas.width = this.toolbar.clientWidth - 20;
+        const headerHeight = this.toolbar.firstChild.getBoundingClientRect().height + 10;
+        const dataHeight = this.dataDisplay.clientHeight;
+        this.chartCanvas.height = this.toolbar.clientHeight - headerHeight - dataHeight - 10;
+        this.updateDisplay();
+    },
+
+    onMouseMove(e) {
+        if (!this.toolbar || !this.toolbar.contains(e.target)) return;
+
+        if (this.dragState.isDragging) {
+            this.onDrag(e);
+            return;
+        }
+        if (this.resizeState.isResizing) {
+            this.onResizeDrag(e);
+            return;
+        }
+
+        const rect = this.toolbar.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        const nearRight = x >= rect.width - this.edgeThreshold && x <= rect.width;
+        const nearBottom = y >= rect.height - this.edgeThreshold && y <= rect.height;
+
+        if (e.target.style.cursor === 'grab') {
+            this.toolbar.style.cursor = 'grab';
+        } else if (nearRight && nearBottom) {
+            this.toolbar.style.cursor = 'se-resize';
+        } else if (nearRight) {
+            this.toolbar.style.cursor = 'e-resize';
+        } else if (nearBottom) {
+            this.toolbar.style.cursor = 's-resize';
+        } else {
+            this.toolbar.style.cursor = 'default';
+        }
+    },
+
+    startDrag(e) {
+        e.preventDefault();
+        const rect = this.toolbar.getBoundingClientRect();
+        this.dragState.isDragging = true;
+        this.dragState.offsetX = e.clientX - rect.left;
+        this.dragState.offsetY = e.clientY - rect.top;
+        this.toolbar.style.cursor = 'grabbing';
+    },
+
+    onDrag(e) {
+        if (!this.dragState.isDragging) return;
+        const winW = window.innerWidth;
+        const winH = window.innerHeight;
+        this.position.left = Math.max(0, Math.min(e.clientX - this.dragState.offsetX, winW - this.size.width));
+        this.position.top = Math.max(0, Math.min(e.clientY - this.dragState.offsetY, winH - this.size.height));
+        this.toolbar.style.left = `${this.position.left}px`;
+        this.toolbar.style.top = `${this.position.top}px`;
+    },
+
+    endDrag() {
+        if (!this.dragState.isDragging) return;
+        this.dragState.isDragging = false;
+        this.toolbar.style.cursor = 'default';
+        this.savePositionAndSize();
+    },
+
+    startResize(e, direction) {
+        e.preventDefault();
+        this.resizeState.isResizing = true;
+        this.resizeState.direction = direction;
+        this.resizeState.startX = e.clientX;
+        this.resizeState.startY = e.clientY;
+        this.resizeState.startWidth = this.toolbar.clientWidth;
+        this.resizeState.startHeight = this.toolbar.clientHeight;
+        this.toolbar.style.cursor = `${direction}-resize`;
+    },
+
+    onResizeDrag(e) {
+        if (!this.resizeState.isResizing) return;
+        const dx = e.clientX - this.resizeState.startX;
+        const dy = e.clientY - this.resizeState.startY;
+
+        if (this.resizeState.direction === 'e' || this.resizeState.direction === 'se') {
+            this.size.width = Math.max(this.minWidth, this.resizeState.startWidth + dx);
+            this.toolbar.style.width = `${this.size.width}px`;
+        }
+        if (this.resizeState.direction === 's' || this.resizeState.direction === 'se') {
+            this.size.height = Math.min(this.maxHeight, Math.max(this.minHeight, this.resizeState.startHeight + dy));
+            this.toolbar.style.height = `${this.size.height}px`;
+        }
+        this.onResize();
+    },
+
+    endResize() {
+        if (!this.resizeState.isResizing) return;
+        this.resizeState.isResizing = false;
+        this.resizeState.direction = null;
+        this.toolbar.style.cursor = 'default';
+        this.savePositionAndSize();
+    }
+};
+
+app.registerExtension({
+    name: "KayTool.ResourceMonitor",
+    async setup() {
+        await KayResourceMonitor.init();
+
+        const showMenuButton = new (await import("/scripts/ui/components/button.js")).ComfyButton({
+            content: "𝙆 Monitor",
+            action: () => {
+                if (KayResourceMonitor.isVisible) {
+                    KayResourceMonitor.hide();
+                    showMenuButton.tooltip = "Show Monitor";
+                } else {
+                    KayResourceMonitor.show();
+                    showMenuButton.tooltip = "Hide Monitor";
+                }
+            },
+            tooltip: KayResourceMonitor.isVisible ? "Hide Monitor" : "Show Monitor"
+        });
+
+        KayResourceMonitor.menuButton = showMenuButton.element;
+        if (app.menu?.settingsGroup) {
+            app.menu.settingsGroup.append(showMenuButton);
+        }
+        KayResourceMonitor.updateEnabledState(KayResourceMonitor.isEnabled);
+        window.KayResourceMonitor = KayResourceMonitor;
+    }
+});

web/settings.js

@@ -1,204 +1,243 @@
 import { app } from "../../../scripts/app.js";
- 
+
 app.registerExtension({
     name: "KayTool.Settings",
-    setup() {
-        app.ui.settings.addSetting({
-            id: "KayTool.ShowRunOption",
-            name: "Show '▶️ Run' option in node context menu",
-            type: "boolean",
-            defaultValue: true,
-            category: ["KayTool", "▶️ Run", "ShowRunOption"],
-        });
-
-        app.ui.settings.addSetting({
-            id: "KayTool.ShowSetGetOptions",
-            name: "Show 'Set/Get' options in node context menu",
-            type: "boolean",
-            defaultValue: true,
-            category: ["KayTool", "🛜 Set/Get", "ShowSetGetOptions"],
-            tooltip: "Toggles visibility of 'Set/Get' options in node context menus."
-        });
-
-        app.ui.settings.addSetting({
-            id: "KayTool.ShiftR",
-            name: "Use 'Shift+R' to quickly run selected node",
-            type: "boolean",
-            defaultValue: true,
-            category: ["KayTool", "▶️ Run", "ShiftR"],
-        });
-
-        app.ui.settings.addSetting({
-            id: "KayTool.ShowWorkflowPNG",
-            name: "Show 'Workflow PNG' option in KayTool menu",
-            type: "boolean",
-            defaultValue: true,
-            category: ["KayTool", "Workflow PNG", "ShowWorkflowPNG"],
-        });
-
-        app.ui.settings.addSetting({
-            id: "KayTool.ShowStarToMe",
-            name: "Show 'Star to me' option in KayTool menu",
-            type: "boolean",
-            defaultValue: true,
-            category: ["KayTool", "Menu", "ShowStarToMe"],
-        });
-
-        app.ui.settings.addSetting({
-            id: "KayTool.WorkflowPNG",
-            name: "Margin size for Workflow PNG export",
-            type: "slider",
-            defaultValue: 100,
-            attrs: { min: 0, max: 200, step: 10 },
-            category: ["KayTool", "Workflow PNG", "MarginSize"],
-            tooltip: "Default value: 100."
-        });
-
-        app.ui.settings.addSetting({
-            id: "KayTool.SetGetForegroundColor",
-            name: "Set/Get Node Foreground Color",
-            type: "color",
-            defaultValue: "000000",
-            category: ["KayTool", "🛜 Set/Get", "ForegroundColor"],
-            onChange: (newVal) => {
-                if (/^[0-9A-Fa-f]{6}$/.test(newVal)) {
-                    updateSetGetNodeColors();
-                    if (app.graph) app.graph.setDirtyCanvas(true, true);
+    async setup() {
+        const settings = [
+            {
+                id: "KayTool.ShowRunOption",
+                name: "Show '▶️ Run' option in node context menu",
+                type: "boolean",
+                defaultValue: true,
+                category: ["KayTool", "▶️ Run", "ShowRunOption"],
+            },
+            {
+                id: "KayTool.ShowSetGetOptions",
+                name: "Show 'Set/Get' options in node context menu",
+                type: "boolean",
+                defaultValue: true,
+                category: ["KayTool", "🛜 Set/Get", "ShowSetGetOptions"],
+                tooltip: "Toggles visibility of 'Set/Get' options in node context menus."
+            },
+            {
+                id: "KayTool.ShiftR",
+                name: "Use 'Shift+R' to quickly run selected node",
+                type: "boolean",
+                defaultValue: true,
+                category: ["KayTool", "▶️ Run", "ShiftR"],
+            },
+            {
+                id: "KayTool.ShowWorkflowPNG",
+                name: "Show 'Workflow PNG' option in KayTool menu",
+                type: "boolean",
+                defaultValue: true,
+                category: ["KayTool", "Workflow PNG", "ShowWorkflowPNG"],
+            },
+            {
+                id: "KayTool.ShowStarToMe",
+                name: "Show 'Star to me' option in KayTool menu",
+                type: "boolean",
+                defaultValue: true,
+                category: ["KayTool", "Menu", "ShowStarToMe"],
+            },
+            {
+                id: "KayTool.WorkflowPNG",
+                name: "Margin size for Workflow PNG export",
+                type: "slider",
+                defaultValue: 100,
+                attrs: { min: 0, max: 200, step: 10 },
+                category: ["KayTool", "Workflow PNG", "MarginSize"],
+                tooltip: "Default value: 100."
+            },
+            {
+                id: "KayTool.SetGetForegroundColor",
+                name: "Set/Get Node Foreground Color",
+                type: "color",
+                defaultValue: "000000",
+                category: ["KayTool", "🛜 Set/Get", "ForegroundColor"],
+                onChange: (newVal) => {
+                    if (/^[0-9A-Fa-f]{6}$/.test(newVal)) {
+                        updateSetGetNodeColors();
+                        if (app.graph) app.graph.setDirtyCanvas(true, true);
+                    }
                 }
-            }
-        });
-
-        app.ui.settings.addSetting({
-            id: "KayTool.SetGetBackgroundColor",
-            name: "Set/Get Node Background Color",
-            type: "color",
-            defaultValue: "000000",
-            category: ["KayTool", "🛜 Set/Get", "BackgroundColor"],
-            onChange: (newVal) => {
-                if (/^[0-9A-Fa-f]{6}$/.test(newVal)) {
-                    updateSetGetNodeColors();
-                    if (app.graph) app.graph.setDirtyCanvas(true, true);
+            },
+            {
+                id: "KayTool.SetGetBackgroundColor",
+                name: "Set/Get Node Background Color",
+                type: "color",
+                defaultValue: "000000",
+                category: ["KayTool", "🛜 Set/Get", "BackgroundColor"],
+                onChange: (newVal) => {
+                    if (/^[0-9A-Fa-f]{6}$/.test(newVal)) {
+                        updateSetGetNodeColors();
+                        if (app.graph) app.graph.setDirtyCanvas(true, true);
+                    }
                 }
-            }
-        });
+            },
+            {
+                id: "KayTool.NodeAlignDisplayMode",
+                name: "Node Alignment Toolbar Display Mode",
+                type: "combo",
+                options: [
+                    { value: "permanent", text: "Permanent" },
+                    { value: "on-select", text: "Show on Node Selection" },
+                    { value: "disabled", text: "Disabled" }
+                ],
+                defaultValue: "permanent",
+                category: ["KayTool", "NodeAlignment", "DisplayMode"],
+                onChange: (value) => {
+                    const manager = window.KayNodeAlignmentManager;
+                    const initFn = window.initializeKayNodeAlignment;
+                    if (!manager || !initFn) return;
 
-        app.ui.settings.addSetting({
-            id: "KayTool.NodeAlignDisplayMode",
-            name: "Node Alignment Toolbar Display Mode",
-            type: "combo",
-            options: [
-                { value: "permanent", text: "Permanent" },
-                { value: "on-select", text: "Show on Node Selection" },
-                { value: "disabled", text: "Disabled" }
-            ],
-            defaultValue: "permanent",
-            category: ["KayTool", "NodeAlignment", "DisplayMode"],
-            onChange: (value) => {
-                const manager = window.KayNodeAlignmentManager;
-                const initFn = window.initializeKayNodeAlignment;
-                if (!manager || !initFn) return;
-
-                if (!manager.isInitialized) {
-                    initFn(); 
+                    if (!manager.isInitialized) {
+                        initFn(); 
+                    }
+                    manager.updateDisplayMode(value);
                 }
-                manager.updateDisplayMode(value); // 
-            }
-        });
-
-        app.ui.settings.addSetting({
-            id: "KayTool.EnableAlignmentShortcuts",
-            name: "Enable Shift+WASD for Quick Alignment (Up/Left/Down/Right)",
-            type: "boolean",
-            defaultValue: true,
-            category: ["KayTool", "NodeAlignment", "Shortcuts"],
-            tooltip: "Use Shift+W (Up), Shift+A (Left), Shift+S (Down), Shift+D (Right) to align selected nodes."
-        });
-
-        app.ui.settings.addSetting({
-            id: "KayTool.NodeAlignBackgroundOpacity",
-            name: "Node Alignment Toolbar Background Opacity",
-            type: "slider",
-            defaultValue: 100,
-            attrs: { min: 0, max: 100, step: 1 },
-            category: ["KayTool", "NodeAlignment", "BackgroundOpacity"],
-            onChange: (newVal) => {
-                const toolbar = document.getElementById('kay-node-alignment-toolbar');
-                if (toolbar) {
-                    const bgColor = app.ui.settings.getSettingValue("KayTool.NodeAlignBackgroundColor");
+            },
+            {
+                id: "KayTool.EnableAlignmentShortcuts",
+                name: "Enable Shift+WASD for Quick Alignment (Up/Left/Down/Right)",
+                type: "boolean",
+                defaultValue: true,
+                category: ["KayTool", "NodeAlignment", "Shortcuts"],
+                tooltip: "Use Shift+W (Up), Shift+A (Left), Shift+S (Down), Shift+D (Right) to align selected nodes."
+            },
+            {
+                id: "KayTool.NodeAlignBackgroundOpacity",
+                name: "Node Alignment Toolbar Background Opacity",
+                type: "slider",
+                defaultValue: 100,
+                attrs: { min: 0, max: 100, step: 1 },
+                category: ["KayTool", "NodeAlignment", "BackgroundOpacity"],
+                onChange: (newVal) => {
+                    const toolbar = document.getElementById('kay-node-alignment-toolbar');
+                    if (toolbar) {
+                        const bgColor = app.ui.settings.getSettingValue("KayTool.NodeAlignBackgroundColor");
+                        const opacity = newVal / 100;
+                        if (opacity > 0 && /^[0-9A-Fa-f]{6}$/.test(bgColor)) {
+                            toolbar.style.background = `rgba(${parseInt(bgColor.substr(0, 2), 16)}, ${parseInt(bgColor.substr(2, 2), 16)}, ${parseInt(bgColor.substr(4, 2), 16)}, ${opacity})`;
+                        } else {
+                            toolbar.style.background = '';
+                        }
+                    }
+                }
+            },
+            {
+                id: "KayTool.NodeAlignBackgroundColor",
+                name: "Node Alignment Toolbar Background Color",
+                type: "color",
+                defaultValue: "000000",
+                category: ["KayTool", "NodeAlignment", "BackgroundColor"],
+                onChange: (newVal) => {
+                    const toolbar = document.getElementById('kay-node-alignment-toolbar');
+                    if (toolbar && /^[0-9A-Fa-f]{6}$/.test(newVal)) {
+                        const opacity = app.ui.settings.getSettingValue("KayTool.NodeAlignBackgroundOpacity") / 100;
+                        if (opacity > 0) {
+                            toolbar.style.background = `rgba(${parseInt(newVal.substr(0, 2), 16)}, ${parseInt(newVal.substr(2, 2), 16)}, ${parseInt(newVal.substr(4, 2), 16)}, ${opacity})`;
+                        } else {
+                            toolbar.style.background = '';
+                        }
+                    }
+                }
+            },
+            {
+                id: "KayTool.NodeAlignIconBackgroundColor",
+                name: "Node Alignment Icon Background Color",
+                type: "color",
+                defaultValue: "2b2b2b",
+                category: ["KayTool", "NodeAlignment", "IconBackgroundColor"],
+                tooltip: "Use parameter “363636” to match ComfyUI menu bar color for an icon-free background effect",
+                onChange: (newVal) => {
+                    if (/^[0-9A-Fa-f]{6}$/.test(newVal)) {
+                        const buttons = document.querySelectorAll('.kay-align-button');
+                        buttons.forEach(btn => btn.style.backgroundColor = `#${newVal}`);
+                    }
+                }
+            },
+            {
+                id: "KayTool.NodeAlignIconColor",
+                name: "Node Alignment Icon Color",
+                type: "color",
+                defaultValue: "666666",
+                category: ["KayTool", "NodeAlignment", "IconColor"],
+                onChange: (newVal) => {
+                    if (/^[0-9A-Fa-f]{6}$/.test(newVal)) {
+                        const buttons = document.querySelectorAll('.kay-align-button');
+                        buttons.forEach(btn => {
+                            const svg = btn.querySelector('svg');
+                            if (svg) svg.querySelectorAll('path').forEach(path => path.setAttribute('fill', `#${newVal}`));
+                        });
+                    }
+                }
+            },
+            {
+                id: "KayTool.NodeAlignDividerColor",
+                name: "Node Alignment Divider Color",
+                type: "color",
+                defaultValue: "1e1e1e",
+                category: ["KayTool", "NodeAlignment", "DividerColor"],
+                onChange: (newVal) => {
+                    if (/^[0-9A-Fa-f]{6}$/.test(newVal)) {
+                        const dividers = document.querySelectorAll('.kay-toolbar-divider');
+                        dividers.forEach(divider => divider.style.background = `#${newVal}`);
+                    }
+                }
+            },
+            {
+                id: "KayTool.EnableResourceMonitor",
+                name: "Enable Resource Monitor button in menu",
+                type: "boolean",
+                defaultValue: true,
+                category: ["KayTool", "Resource Monitor", "EnableResourceMonitor"],
+                onChange: (newVal) => {
+                    if (window.KayResourceMonitor) {
+                        window.KayResourceMonitor.updateEnabledState(newVal);
+                    }
+                }
+            },
+            {
+                id: "KayTool.ResourceMonitorEdgeFade",
+                name: "Enable Resource Monitor Chart Edge Fade",
+                type: "boolean",
+                defaultValue: true,
+                category: ["KayTool", "Resource Monitor", "EdgeFade"],
+                onChange: (newVal) => {
+                    if (window.KayResourceMonitor) {
+                        window.KayResourceMonitor.edgeFadeEnabled = newVal;
+                        if (window.KayResourceMonitor.isVisible && window.KayResourceMonitor.isEnabled) {
+                            window.KayResourceMonitor.drawCurves();
+                        }
+                    }
+                }
+            },
+            {
+                id: "KayTool.ResourceMonitorBackgroundOpacity",
+                name: "Resource Monitor Background Opacity",
+                type: "slider",
+                defaultValue: 80,
+                attrs: { min: 0, max: 100, step: 1 },
+                category: ["KayTool", "Resource Monitor", "BackgroundOpacity"],
+                onChange: (newVal) => {
                     const opacity = newVal / 100;
-                    if (opacity > 0 && /^[0-9A-Fa-f]{6}$/.test(bgColor)) {
-                        toolbar.style.background = `rgba(${parseInt(bgColor.substr(0, 2), 16)}, ${parseInt(bgColor.substr(2, 2), 16)}, ${parseInt(bgColor.substr(4, 2), 16)}, ${opacity})`;
-                    } else {
-                        toolbar.style.background = '';
+                    if (window.KayResourceMonitor && window.KayResourceMonitor.toolbar) {
+                        window.KayResourceMonitor.toolbar.style.background = `rgba(0, 0, 0, ${opacity})`;
                     }
                 }
             }
-        });
+        ];
 
-        app.ui.settings.addSetting({
-            id: "KayTool.NodeAlignBackgroundColor",
-            name: "Node Alignment Toolbar Background Color",
-            type: "color",
-            defaultValue: "000000",
-            category: ["KayTool", "NodeAlignment", "BackgroundColor"],
-            onChange: (newVal) => {
-                const toolbar = document.getElementById('kay-node-alignment-toolbar');
-                if (toolbar && /^[0-9A-Fa-f]{6}$/.test(newVal)) {
-                    const opacity = app.ui.settings.getSettingValue("KayTool.NodeAlignBackgroundOpacity") / 100;
-                    if (opacity > 0) {
-                        toolbar.style.background = `rgba(${parseInt(newVal.substr(0, 2), 16)}, ${parseInt(newVal.substr(2, 2), 16)}, ${parseInt(newVal.substr(4, 2), 16)}, ${opacity})`;
-                    } else {
-                        toolbar.style.background = '';
-                    }
-                }
-            }
-        });
 
-        app.ui.settings.addSetting({
-            id: "KayTool.NodeAlignIconBackgroundColor",
-            name: "Node Alignment Icon Background Color",
-            type: "color",
-            defaultValue: "2b2b2b",
-            category: ["KayTool", "NodeAlignment", "IconBackgroundColor"],
-            tooltip: "Use parameter “363636” to match ComfyUI menu bar color for an icon-free background effect",
-            onChange: (newVal) => {
-                if (/^[0-9A-Fa-f]{6}$/.test(newVal)) {
-                    const buttons = document.querySelectorAll('.kay-align-button');
-                    buttons.forEach(btn => btn.style.backgroundColor = `#${newVal}`);
-                }
-            }
-        });
+        for (const setting of settings) {
+            app.ui.settings.addSetting(setting);
 
-        app.ui.settings.addSetting({
-            id: "KayTool.NodeAlignIconColor",
-            name: "Node Alignment Icon Color",
-            type: "color",
-            defaultValue: "666666",
-            category: ["KayTool", "NodeAlignment", "IconColor"],
-            onChange: (newVal) => {
-                if (/^[0-9A-Fa-f]{6}$/.test(newVal)) {
-                    const buttons = document.querySelectorAll('.kay-align-button');
-                    buttons.forEach(btn => {
-                        const svg = btn.querySelector('svg');
-                        if (svg) svg.querySelectorAll('path').forEach(path => path.setAttribute('fill', `#${newVal}`));
-                    });
-                }
+            const currentValue = app.ui.settings.getSettingValue(setting.id);
+            if (currentValue === undefined) {
+                await app.ui.settings.setSettingValue(setting.id, setting.defaultValue);
             }
-        });
-
-        app.ui.settings.addSetting({
-            id: "KayTool.NodeAlignDividerColor",
-            name: "Node Alignment Divider Color",
-            type: "color",
-            defaultValue: "1e1e1e",
-            category: ["KayTool", "NodeAlignment", "DividerColor"],
-            onChange: (newVal) => {
-                if (/^[0-9A-Fa-f]{6}$/.test(newVal)) {
-                    const dividers = document.querySelectorAll('.kay-toolbar-divider');
-                    dividers.forEach(divider => divider.style.background = `#${newVal}`);
-                }
-            }
-        });
+        }
     },
     init() {
         if (!app.graph) {
@@ -222,7 +261,7 @@ function updateSetGetNodeColors() {
             if (node.type === "KaySetNode" || node.type === "KayGetNode" || node.type === "KayGet多元Node") {
                 node.color = fgColor;
                 node.bgcolor = bgColor;
-  node.updateColors();
+                node.updateColors();
             }
         });
         app.graph.setDirtyCanvas(true, true);