用JavaScript监听ComfyUI事件实现DDColor进度条更新
在处理老照片修复这类视觉任务时，用户最怕的不是等待本身，而是“不知道还要等多久”。尤其是在使用 ComfyUI 这类基于节点的工作流工具进行图像上色时，点击“运行”之后页面静悄悄，既没有进度提示，也无法判断是正在推理还是已经卡死——这种“黑盒体验”极大削弱了用户的操作信心。
而当我们将 DDColor 这一类高效图像着色模型集成进 ComfyUI 后，虽然技术能力提升了，但若缺乏直观反馈机制，整体体验依然大打折扣。幸运的是，ComfyUI 的前端架构为开发者留出了足够的扩展空间：通过注入一段轻量级 JavaScript 脚本，我们完全可以实现实时监听任务进度，并动态渲染一个漂浮在界面上的进度条，让整个处理过程变得“可见”。
这不仅是 UI 层面的小优化，更是一种对用户体验的尊重。尤其在批量修复家庭老照片、构建数字档案系统等实际场景中，这种看似微小的交互改进，往往能显著降低误操作率、提升工作效率。
DDColor 是近年来在黑白图像智能上色领域表现突出的一个模型。它不像早期方法那样依赖大量手工调参或颜色锚点，而是通过双分支编码器结构自主学习语义与色彩之间的映射关系。其中一个分支专注于提取图像内容的高层语义（比如人脸轮廓、衣物材质），另一个则从训练数据中归纳常见物体的颜色先验（如天空通常是蓝色、皮肤接近暖色调）。两者融合后，由解码器逐步重建出自然且合理的彩色图像。
这种设计使得 DDColor 在保持细节清晰度的同时，避免了过度饱和或色彩错乱的问题。更重要的是，它的推理速度足够快——在消费级 GPU 上单张图像处理通常不超过5秒，模型体积也控制在2GB以内，非常适合本地部署。相比之下，像 DeOldify 这样的老牌项目虽然功能丰富，但模型庞大、运行缓慢，在实时性要求较高的场景下显得有些笨重。
正因为 DDColor 兼具性能和效果优势，越来越多开发者开始将其整合进 ComfyUI 工作流中。你可以预设好“加载图像 → 调整尺寸 → 执行 DDColor 推理 → 输出结果”的完整流程，一键完成修复任务。然而问题也随之而来：如何让用户清楚地知道当前处于哪个阶段？是否真的在推进？有没有可能中途失败？
答案就藏在 ComfyUI 内部的事件通信机制里。
ComfyUI 前端基于 Web 技术栈构建，后端使用 Python 驱动 PyTorch 模型执行计算任务，两者之间通过 WebSocket 实现双向通信。每当工作流中的某个节点开始执行、完成输出或报告进度时，后端都会主动推送一条结构化消息到前端。这些消息类型包括：
comfy.executing：表示某节点即将开始执行；comfy.executed：该节点已完成；comfy.progress：携带当前进度值（value）和最大值（max），可用于计算百分比；comfy.status：连接状态更新。
这意味着我们无需修改任何核心代码，只需在浏览器环境中注册一个全局消息监听器，就能捕获这些事件并作出响应。比如，当收到comfy.progress消息时，提取其中的value / max比例，即可换算成进度条宽度。
下面这段 JavaScript 就实现了这一功能：
// ddcolor-progress-monitor.js (function() { // 创建进度条容器 const createProgressBar = () => { const container = document.createElement('div'); container.id = 'ddcolor-progress-container'; container.style.cssText = ` position: fixed; top: 10px; right: 10px; width: 300px; background: rgba(0,0,0,0.7); color: white; padding: 10px; border-radius: 8px; font-family: Arial, sans-serif; z-index: 9999; display: none; `; const label = document.createElement('div'); label.textContent = 'DDColor 处理进度：'; const barOuter = document.createElement('div'); barOuter.style.cssText = `width: 100%; height: 20px; background: #333; border-radius: 10px; overflow: hidden; margin-top: 5px;`; const barInner = document.createElement('div'); barInner.id = 'ddcolor-progress-bar'; barInner.style.cssText = `height: 100%; width: 0%; background: #4CAF50; transition: width 0.3s ease;`; barOuter.appendChild(barInner); container.appendChild(label); container.appendChild(barOuter); document.body.appendChild(container); return { container, barInner }; }; const { container, barInner } = createProgressBar(); let isProcessing = false; // 监听进度更新 const handleProgressUpdate = (event) => { if (event.detail.data?.value && event.detail.data?.max) { const progress = event.detail.data.value / event.detail.data.max; barInner.style.width = `${progress * 100}%`; container.style.display = 'block'; isProcessing = true; } }; const handleExecutionStart = () => { isProcessing = true; container.style.display = 'block'; barInner.style.width = '0%'; }; const handleExecutionEnd = () => { setTimeout(() => { if (isProcessing) { barInner.style.width = '100%'; setTimeout(() => { container.style.display = 'none'; isProcessing = false; }, 800); } }, 500); }; // 绑定事件监听 window.addEventListener('message', (e) => { if (e.data?.type === 'comfy.progress') { handleProgressUpdate(e); } else if (e.data?.type === 'comfy.executing' && e.data.data?.node) { handleExecutionStart(); } else if (e.data?.type === 'comfy.executed') { handleExecutionEnd(); } }); console.log('[DDColor Monitor] 进度条监听已启用'); })();脚本采用 IIFE 包裹以防止污染全局作用域，确保安全性和独立性。它会在页面加载时动态创建一个半透明的浮动面板，包含文字标签和带过渡动画的绿色进度条。通过监听window.message事件，精准捕捉来自 ComfyUI 后端的状态变化。
值得注意的是，transition: width 0.3s ease的加入让进度条不再是突兀跳变，而是平滑推进，视觉上更符合人类对“持续进行中”的认知预期。同时，在任务结束时故意延迟隐藏进度条，短暂展示满进度状态，也能给用户带来明确的完成感。
将此脚本保存为.js文件并放入 ComfyUI 的web/extensions/目录后，下次启动服务时便会自动注入，无需额外配置。
这套方案的实际价值远不止于“加个进度条”这么简单。试想一下，当你需要修复上百张家族老照片时，如果每张都得盯着看是否出图，效率会非常低。而现在有了可视化反馈，你甚至可以一边处理一边做其他事，只要瞥一眼角落里的进度条就知道系统仍在正常运行。
更重要的是，这种机制为后续功能拓展打开了大门。例如：
- 可以记录每次任务的耗时，形成历史统计图表；
- 在进度异常停滞超过一定时间后触发警告弹窗；
- 支持暂停/恢复功能，便于资源调度；
- 结合 Notification API 发送桌面提醒，彻底解放注意力。
从工程实践角度看，这个实现也体现了一种“低侵入式扩展”的设计理念：不改动原有系统逻辑，仅通过监听公开事件来增强交互，既保证了稳定性，又具备良好的可移植性。哪怕未来 ComfyUI 升级版本，只要保留基本的事件格式，这段脚本仍可继续使用。
当然，在部署时也有一些细节需要注意。比如应尽量避免频繁操作 DOM，可通过requestAnimationFrame控制更新频率；建议添加兼容性检测，确保在 Safari 或 Firefox 中也能正常显示；还可以考虑增加手动关闭按钮或音效提示，进一步提升可用性。
安全性方面，推荐不要引入外部 CDN 资源，所有逻辑封闭在本地脚本内，防止潜在的 XSS 风险。
最终呈现的效果是这样的：你在 ComfyUI 中上传一张黑白人像照片，点击运行，右上角立刻浮现出一个简洁的进度条，“正在处理…”字样伴随绿色条纹缓缓推进。几秒钟后，进度抵达100%，稍作停留便悄然隐去——整个过程无需刷新、无需查看日志，一切尽在掌握之中。
这正是现代 AI 工具应有的样子：强大而不晦涩，智能且懂人性。技术的价值不仅体现在模型精度有多高，更在于它能否被普通人顺畅使用。而一段小小的 JavaScript，恰恰成为了连接复杂算法与真实用户之间的桥梁。
未来，随着更多类似 DDColor 的专用模型涌现，以及 ComfyUI 插件生态的不断完善，我们有望看到更多这样“润物细无声”的优化。它们或许不会出现在论文里，也不会成为发布会的亮点，但却实实在在地改变着每一个使用者的日常体验。