ComfyUI-Drawer：将复杂工作流转化为触控友好的移动端 UI，让 ComfyUI 在手机上真正可用

ComfyUI 以其强大的节点式工作流闻名，但在手机或小屏幕设备上，密集的连线和微小的参数框往往让操作变得极其痛苦。ComfyUI-Drawer不是一个简单的 APP 模式封装，而是一个智能的模块化 UI 平台。它能将复杂的节点图“折叠”成紧凑、直观的触控面板，让你只需关注真正的参数调整、素材管理和结果预览。

• GitHub：https://github.com/Kuroi961/ComfyUI-Drawer

无论是在桌面端作为辅助遥控器，还是在移动端作为主界面，Drawer 都能极大提升你的创作效率。

核心亮点：化繁为简，触手可及

1. 移动端友好的 Deck 面板

• 参数提取：自动识别工作流中的关键节点，将滑块、下拉菜单、开关等控件集中到底部 Drawer 中。
• 智能标记：通过在节点标题添加 📝（显示控件）、⚡（ bypass 开关）或 [标签]（互斥组），自定义 Deck 显示内容。
• 布局优化：节点按 Y 轴排序，分组按 X 轴排列，逻辑清晰，一目了然。

2. 专业的 XYZ Plot 扫描

• A1111 风格体验：支持将任意参数设为 X/Y/Z 轴，进行批量参数扫描。
• 智能锁定：扫描期间自动锁定队列，固定种子，强制 batch_size 为 1，确保结果准确。
• 自动合成：生成带轴标签的网格图，并嵌入工作流元数据，方便后续分析。
• 安全机制：监听 WebSocket 状态，服务器断开时立即中止，防止资源浪费。

3. 强大的 Gallery 媒体管理

• 全文搜索：基于 SQLite 索引，可按节点类型、标题、输入值等元数据搜索图片。
• 文件操作：支持重命名、移动（拖拽/批量）、删除，以及新建文件夹。
• 面包屑导航：清晰的目录结构，支持按名称、日期、大小排序。

4. 智能 Model Viewer

• CivitAI 同步：通过 SHA256 哈希匹配，自动获取模型的预览图、元数据和触发词。
• 一键应用：从信息卡直接将模型应用到兼容的 Loader 节点，支持子图和 Combo Clone。
• 多格式预览：支持图片、视频（.mp4/.webm）预览，以及 sidecar 缩略图管理。

5. 高效的 Prompt 辅助

• 内置词典：支持 Danbooru 标签补全、用户自定义词典（CSV 导入）。
• 通配符支持：使用 __名称__ 语法，基于种子随机展开，无需额外节点。
• 注释语法：支持 //、#、/* */ 注释，入队时自动移除，保留元数据。

6. 简易蒙版编辑器

• 全屏绘图：从图片上下文菜单打开，提供画笔、橡皮擦等工具。
• 无缝集成：生成的蒙版自动保存至 input/drawer_masks，可直接被 LoadImageMask 节点读取。

安装与快速开始

安装方式

推荐：通过 ComfyUI-Manager 安装

1. 打开 ComfyUI-Manager。
2. 点击 “Install Custom Nodes”。
3. 搜索 ComfyUI-Drawer。
4. 点击安装并重启 ComfyUI。

手动安装

cd ComfyUI/custom_nodes
git clone https://github.com/Kuroi961/ComfyUI-Drawer.git
pip install -r ComfyUI-Drawer/requirements.txt

快速上手

1. 加载示例工作流：
   • 从模板界面加载 drawer-sample-anima（基础用法）或 drawer-sample-anima-advanced（含 SAM3/SeedVR2）。
   • 或加载教程工作流 drawer-tutorial-deck-zh 学习如何标记节点。
2. 配置 Deck：
   • 在关键节点（如 KSampler, CLIP Text Encode）的标题前添加 📝。
   • 在需要快速开关的节点前添加 ⚡。
   • 刷新页面，底部 Drawer 将自动显示这些控件。
3. 使用 XYZ Plot：
   • 在 Deck 中找到 XYZ Plot 小工具。
   • 选择要扫描的参数（如 CFG, Steps, Seed）。
   • 设置范围，点击运行，等待网格图生成。
4. 浏览与管理：
   • 点击 Gallery 图标，浏览 output 目录。
   • 长按图片打开上下文菜单，可发送到 Lightbox 全屏查看，或拖拽回画布。

开发者扩展：创建你的小工具

ComfyUI-Drawer 采用开放式架构，你可以轻松创建自定义小工具（Gadget）：

import { app } from "../../../scripts/app.js";

app.registerExtension({
    name: "Comfy.Drawer.MyGadget",
    async setup() {
        const drawer = window.ComfyDrawer ?? await new Promise(resolve =>
            window.addEventListener('comfy-drawer:ready', e => resolve(e.detail), { once: true })
        );
        const { GadgetBase } = drawer;

        class MyGadget extends GadgetBase {
            constructor() {
                super('my-gadget', { label: 'My Gadget', icon: '🔧', order: 10 });
            }
            onMount(container, bus, bridge) {
                container.innerHTML = '<p>Hello World</p>';
            }
        }

        drawer.registerGadget(new MyGadget());
    },
});

只需将脚本放入任意 custom_nodes/*/web/js/ 文件夹，重启即可生效。更多 API 细节请参考 GADGET_API.md。