ComfyUX 插件完全保姆级教程
1. 插件简介
插件地址: https://github.com/googincheng/ComfyUX
ComfyUX 是一个革命性的 ComfyUI 界面优化插件,就像给你的 ComfyUI 换了一套全新的豪华装修!这个插件专门为那些被满屏节点搞得头晕眼花的朋友设计,让你告别在画布上到处找节点的痛苦。
主要功能亮点:
- 🎯 智能侧边栏:把所有节点参数整齐排列,就像整理好的工具箱
- ⭐ 收藏功能:把常用参数标记为收藏,下次直接找到
- 🖼️ 图片画廊:生成的图片自动收集展示,不用到处找
- 📱 现代化界面:全新的顶部工具栏,操作更方便
- 🌍 多语言支持:中英文随意切换
- 🔍 智能搜索:节点搜索更精准,支持模糊匹配
能给我们带来什么效果:
- 告别节点迷宫:不用再在密密麻麻的节点中找参数
- 提高调参效率:常用参数一键收藏,批量生图时快速调整
- 界面更美观:现代化设计,看着就舒服
- 操作更便捷:所有功能集中在侧边栏,鼠标移动距离更短
- 工作流分享:收藏参数可以保存分享,降低学习门槛
2. 如何安装
方法一:通过 ComfyUI Manager(推荐)
- 打开 ComfyUI
- 点击右下角的 "Manager" 按钮
- 在搜索框中输入 "ComfyUX"
- 找到插件后点击 "Install" 安装
- 重启 ComfyUI
方法二:手动安装
- 从 GitHub Release 页面 下载最新版本
- 解压到你的 ComfyUI 安装目录下的
custom_nodes文件夹 - 重启 ComfyUI
3. 功能详细解析
重要说明: ComfyUX 是一个纯界面优化插件,它不添加新的处理节点,而是通过前端界面改进来提升用户体验。所有功能都通过 JavaScript 和 CSS 实现。
3.1 智能侧边栏系统
这个就像给你的工作台装了一个超级整理架,把所有工具都分门别类摆好!
功能详解:
| 功能名称 | 技术实现 | 功能描述 | 使用场景 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 节点参数面板 | JavaScript动态生成 | 自动收集所有节点参数 | 批量调参时使用 | 把散落的工具都放到一个工具箱里 | 动态解析节点widget并生成UI组件 | 工作流加载后自动显示在右侧 |
| 参数同步 | 实时双向绑定 | 侧边栏和画布参数实时同步 | 任何参数修改 | 就像遥控器,改一边另一边也跟着变 | 通过事件监听实现数据双向绑定 | 在侧边栏改数值,画布节点立即更新 |
| 节点折叠展开 | CSS动画+JS控制 | 可以折叠不需要的节点 | 专注特定节点时 | 像手风琴一样,不用的可以收起来 | 通过CSS transition实现平滑动画 | 点击节点标题可以展开或收起 |
| 节点颜色同步 | 颜色映射系统 | 侧边栏节点颜色与画布一致 | 视觉识别 | 就像给工具贴标签,一眼就知道是哪个 | 读取节点bgcolor属性并应用到UI | 画布节点改颜色,侧边栏也会变 |
3.2 收藏参数系统
这个功能就像给常用工具做标记,下次直接找到最重要的那几个!
功能详解:
| 功能名称 | 技术实现 | 功能描述 | 使用场景 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 参数收藏 | 本地存储+节点属性 | 可以标记常用参数为收藏 | 频繁调整的参数 | 就像书签,把重要页面标记起来 | 在节点properties中存储fav数组 | 点击参数旁边的星星图标收藏 |
| 收藏筛选 | 过滤器系统 | 只显示收藏的参数 | 批量生图调参时 | 像筛子一样,只留下重要的东西 | 通过filter函数控制元素显示隐藏 | 点击"Favorite"标签只看收藏参数 |
| 收藏计数 | 实时统计 | 显示当前收藏参数数量 | 了解收藏情况 | 像计数器,告诉你收藏了多少个 | 全局变量favWidgetCount实时更新 | 在筛选标签旁显示数字 |
| 收藏保存 | JSON序列化 | 收藏状态可以保存到文件 | 分享工作流时 | 像保存游戏进度一样 | 将fav数组序列化到workflow文件 | 保存工作流时自动包含收藏信息 |
3.3 图片画廊系统
这个就像一个自动相册,把你生成的所有图片都收集起来展示!
功能详解:
| 功能名称 | 技术实现 | 功能描述 | 使用场景 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 自动收集 | 图片监听系统 | 自动收集生成的图片 | 图片生成后 | 像自动收集器,新图片自动加进来 | 监听节点imgs属性变化并添加到画廊 | 生成图片后自动出现在画廊中 |
| 缩略图展示 | 轮播组件 | 以缩略图形式展示图片 | 浏览生成结果 | 像照片墙,一眼看到所有照片 | Carousel组件实现图片轮播展示 | 在侧边栏顶部看到所有生成图片 |
| 大图预览 | 模态框系统 | 点击可以查看大图 | 查看图片细节 | 像放大镜,点击就能看清楚 | Modal组件实现全屏图片预览 | 点击缩略图弹出大图查看 |
| 横向滚动 | 触摸板支持 | 支持鼠标滚轮横向滚动 | 浏览多张图片 | 像翻书一样,左右滑动看图片 | 监听wheel事件并转换为横向滚动 | 在缩略图区域滚动鼠标滚轮 |
3.4 现代化顶部工具栏
这个就像给你的工作台装了一个超级控制面板,所有常用功能都在手边!
功能详解:
| 功能名称 | 技术实现 | 功能描述 | 使用场景 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 快捷按钮 | 按钮组件封装 | 常用功能一键访问 | 日常操作 | 像遥控器上的快捷键 | Button组件封装原生ComfyUI功能 | 点击Run按钮直接运行工作流 |
| 全屏模式 | 显示隐藏控制 | 可以隐藏界面专注画布 | 需要大画布时 | 像看电影的全屏模式 | 通过CSS display控制元素显示 | 点击全屏按钮隐藏所有界面元素 |
| 批量设置 | 数值输入组件 | 设置批量生成数量 | 批量生图时 | 像复印机设置份数 | NumInput组件控制batchCount | 在工具栏设置要生成几张图 |
| 自动运行 | 开关组件 | 参数改变时自动运行 | 实时预览时 | 像自动档汽车,改了就自动跑 | Switch组件监听graphChanged事件 | 打开开关后改参数自动生成 |
| 语言切换 | 国际化系统 | 中英文界面切换 | 不同语言用户 | 像翻译器,一键换语言 | i18n系统实现多语言支持 | 点击"中文"按钮切换界面语言 |
3.5 智能搜索系统
这个就像给节点库装了一个超级搜索引擎,想要什么节点直接搜!
功能详解:
| 功能名称 | 技术实现 | 功能描述 | 使用场景 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 模糊搜索 | Fuse.js搜索引擎 | 支持模糊匹配搜索 | 记不清节点名时 | 像智能输入法,打一半就能找到 | 使用Fuse.js实现模糊字符串匹配 | 搜索"load"能找到"LoadImage" |
| 搜索高亮 | 文本高亮处理 | 搜索结果关键词高亮 | 快速定位匹配项 | 像荧光笔标记重点 | 正则表达式替换匹配文本为高亮 | 搜索结果中匹配的字符会变色 |
| 自动排序 | 相关度算法 | 搜索结果按相关度排序 | 找最匹配的节点 | 像搜索引擎,最相关的排前面 | 基于匹配度分数进行结果排序 | 最匹配的节点显示在最上面 |
| 实时搜索 | 输入事件监听 | 输入时实时显示结果 | 快速查找节点 | 像实时翻译,打字就有结果 | 监听input事件实时过滤结果 | 输入字符立即看到匹配结果 |
3.6 历史记录系统
这个就像一个智能助手,帮你管理所有的运行记录!
功能详解:
| 功能名称 | 技术实现 | 功能描述 | 使用场景 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 运行状态显示 | API轮询 | 显示当前运行状态 | 了解任务进度 | 像进度条,告诉你跑到哪了 | 定时调用API获取队列状态 | 看到"Running"表示正在运行 |
| 历史记录 | 列表组件 | 显示所有历史任务 | 查看过往结果 | 像浏览器历史记录 | ListItem组件展示历史数据 | 在History标签看到所有运行记录 |
| 一键恢复 | 工作流加载 | 点击可恢复历史工作流 | 回到之前状态 | 像时光机,一键回到过去 | 调用loadGraphData恢复工作流 | 点击"Restore"按钮恢复工作流 |
| 任务管理 | 队列操作 | 可以删除或停止任务 | 管理运行队列 | 像任务管理器,可以停止任务 | 调用API删除队列中的任务 | 点击垃圾桶图标删除任务 |
3.7 过滤筛选系统
这个就像一个智能分类器,帮你快速找到想要的节点!
功能详解:
| 功能名称 | 技术实现 | 功能描述 | 使用场景 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 全部显示 | 过滤器重置 | 显示所有节点 | 查看完整列表 | 像显示全部商品 | 重置所有过滤条件 | 点击"All"显示所有节点 |
| 收藏筛选 | 条件过滤 | 只显示收藏的参数 | 专注重要参数 | 像只看收藏夹 | 根据fav属性过滤显示 | 点击"Favorite"只看收藏参数 |
| 非空筛选 | 内容过滤 | 只显示有参数的节点 | 过滤空节点 | 像只看有内容的文件夹 | 根据widgets长度过滤 | 点击"Notnull"只看有参数节点 |
| 实时计数 | 动态统计 | 显示各类别数量 | 了解分布情况 | 像商品分类的数量标签 | 实时统计各过滤条件的数量 | 标签旁显示对应数量 |
3.8 自动更新系统
这个就像一个贴心管家,自动检查有没有新版本!
功能详解:
| 功能名称 | 技术实现 | 功能描述 | 使用场景 | 通俗解释 | 专业解释 | 怎么用/举个例子 |
|---|---|---|---|---|---|---|
| 版本检查 | GitHub API | 自动检查最新版本 | 启动时检查 | 像手机检查系统更新 | 对比本地和远程版本号 | 启动时自动检查是否有新版本 |
| 更新提醒 | 模态框提示 | 有新版本时弹出提醒 | 发现新版本时 | 像弹出的更新通知 | Modal组件显示更新信息 | 有新版本时弹出更新窗口 |
| 多源下载 | 链接跳转 | 提供GitHub和Gitee下载 | 不同网络环境 | 像多个下载镜像 | 提供多个下载链接选择 | 可选择GitHub或Gitee下载 |
| 更新日志 | 版本描述 | 显示新版本更新内容 | 了解新功能 | 像软件更新说明 | 从version.json读取描述信息 | 更新窗口显示新功能介绍 |
4. 使用技巧和建议
4.1 新手入门建议
- 先熟悉界面:安装后先看看新的顶部工具栏和右侧边栏
- 尝试收藏功能:把常用参数标记为收藏,提高效率
- 使用全屏模式:需要大画布时可以隐藏界面元素
- 善用搜索:找节点时直接搜索,比翻菜单快多了
4.2 高级使用技巧
- 批量调参:使用收藏功能筛选出重要参数,批量生图时快速调整
- 自动运行:打开自动运行开关,改参数就自动生成,适合实时预览
- 历史管理:善用历史记录功能,可以快速回到之前的设置
- 界面定制:可以调整侧边栏宽度,适应不同屏幕尺寸
4.3 性能优化建议
- 合理使用自动运行:复杂工作流建议关闭自动运行,避免频繁计算
- 及时清理历史:定期清理不需要的历史记录,保持界面整洁
- 收藏适量参数:不要收藏太多参数,保持收藏列表的实用性
- 关闭不需要的功能:如果不需要某些功能,可以通过设置关闭
5. 常见问题解答
Q1: 安装后界面没有变化怎么办?
A: 确保重启了ComfyUI,检查浏览器是否有缓存,可以尝试强制刷新(Ctrl+F5)。
Q2: 侧边栏显示不全怎么办?
A: 可以拖拽侧边栏左边缘调整宽度,或者使用全屏模式获得更大空间。
Q3: 收藏的参数丢失了怎么办?
A: 收藏信息保存在工作流文件中,确保保存了工作流。如果还是丢失,可能是工作流文件损坏。
Q4: 自动运行功能不工作怎么办?
A: 检查是否正确打开了自动运行开关,确保工作流没有错误,复杂工作流可能需要手动运行。
Q5: 搜索功能找不到节点怎么办?
A: 尝试使用更简短的关键词,或者检查节点是否正确安装,搜索支持模糊匹配。
Q6: 界面显示异常怎么办?
A: 可能是CSS冲突,尝试禁用其他界面插件,或者检查浏览器控制台是否有错误信息。
6. 实际应用场景
6.1 批量生图工作流
使用收藏功能标记种子、提示词强度等常调参数,批量生图时只需在侧边栏快速调整,不用在画布中寻找节点。
6.2 实时预览调参
打开自动运行功能,调整参数时自动生成预览,特别适合调整ControlNet强度、采样步数等参数。
6.3 复杂工作流管理
使用过滤功能只显示有参数的节点,减少界面混乱,专注于需要调整的部分。
6.4 工作流分享教学
保存工作流时包含收藏参数信息,分享给别人时可以快速了解哪些是重要参数。
7. 总结
ComfyUX是一个专注于用户体验优化的插件,它不改变ComfyUI的核心功能,而是通过界面改进让使用更加便捷。通过8个主要功能模块,你可以:
- 提高工作效率:侧边栏集中管理,收藏常用参数
- 改善视觉体验:现代化界面设计,操作更直观
- 简化复杂操作:智能搜索、自动运行等功能
- 增强协作能力:收藏参数可分享,降低学习门槛
最重要的建议:ComfyUX是一个渐进式的改进工具,不会破坏你现有的工作流程。建议先从简单功能开始使用,逐步探索更多高级功能。记住,好的工具应该让工作变得更简单,而不是更复杂。