ComfyUI 浏览器

中文说明

这是一个用于 ComfyUI 的图像/视频/工作流浏览器和管理工具。您可以将您的工作流同步到远程 Git 仓库，并在任何地方使用它们。

欢迎通过提交 issue 来分享您的工作流源。让我们一起构建工作流库吧。

https://github.com/talesofai/comfyui-browser/assets/828837/803ce57a-1cf2-4e1c-be17-0efab401ef54

功能

• 浏览和管理输出文件夹中的图像、视频和工作流。
• 将您的工作流添加到“保存”中，以便更轻松地切换和管理。
• 通过 Git 将您的“保存”同步到任何地方。
• 订阅 Git 工作流源并更方便地加载它们。
• 通过关键词搜索您的工作流。
• 提供一些有用的自定义节点，如 xyz_plot 和 inputs_select。

自定义节点

选择输入

• 可以选择当前图中的任意输入。

XYZ 绘图

• 通过选择输入并填写数值来绘制简单的 XYZ 图。

预览

输出

保存

源

模型

侧边栏视图

安装

ComfyUI 管理器

安装 ComfyUI 管理器，在“安装自定义节点”中搜索 comfyui-browser 并安装。

配置

在您的 comfyui-browser 目录中，可以添加一个 config.json 文件来覆盖 comfyui-browser 使用的目录。例如：

{
  "collections": "/var/lib/comfyui/comfyui-browser-collections",
  "download_logs": "/var/lib/comfyui/comfyui-browser-download-logs",
  "outputs": "/var/lib/comfyui/outputs",
  "sources": "/var/lib/comfyui/comfyui-browser-sources"
}

默认配置值为：

{
  "collections": "[comfyui-browser]/collections",
  "download_logs": "[comfyui-browser]/download-logs",
  "outputs": "[comfyui]/outputs",
  "sources": "[comfyui-browser]/sources"
}

其中 [comfyui-browser] 是自动确定的 comfyui-browser 安装路径，而 [comfyui] 是自动确定的 comfyui 服务器路径。值得注意的是，outputs 目录默认为 comfyui 的 --output-directory 参数，或者 comfyui 希望使用的默认路径。

手动安装

将此仓库克隆到 custom_nodes 文件夹中，并重启 ComfyUI。

cd custom_nodes && git clone https://github.com/tzwm/comfyui-browser.git

注意事项

• 您的“保存”存储在 collections 配置值中。请参阅 配置部分，了解其默认值以及如何将其设置为其他路径。
• 按下 B 键可在 ComfyUI 中切换浏览器对话框。

开发

• 前提条件

  • 安装 Node

• 框架

  • 前端：Svelte
  • 后端：aiohttp（与 ComfyUI 相同）

• 项目结构

├── __init__.py  (后端服务器)
├── web          (由 ComfyUI 加载的前端代码)
    ├── build    (在 Svelte 中构建)
    └── index.js (与 ComfyUI 交互的前端)
├── svelte       (作为 iframe 的模态窗口中的前端，用 Svelte 编写)

• 构建和运行

  • 将 comfyui-browser 复制或链接到 ComfyUI/custom_nodes/
  • 通过 cd ComfyUI && python main.py --enable-cors-header 启动后端
  • 通过 cd ComfyUI/custom_nodes/comfyui-browser/svelte && npm i && npm run dev 启动前端
  • 打开并调试 http://localhost:5173/?comfyUrl=http://localhost:8188
    • 它将使用 localhost:8188 作为 ComfyUI 服务器
    • localhost:5173 是一个 Vite 开发服务器

• 注意事项

  • 请尽量在 Windows 上测试，因为我目前只有 Linux/macOS 环境。

待办事项

• 将收藏同步到远程 Git 仓库
• 将外部 Git 仓库添加到本地收藏
• 按节点名称和模型名称搜索工作流

更改日志

查看 更改日志。

致谢

• ComfyUI

ComfyUI Browser 快速上手指南

ComfyUI Browser 是一款专为 ComfyUI 设计的图像、视频及工作流（Workflow）浏览与管理工具。它支持将工作流同步至远程 Git 仓库，实现多端复用，并提供关键词搜索、自定义节点（如 XYZ Plot）等实用功能。

环境准备

• 系统要求：Linux, macOS 或 Windows（开发者主要在 Linux/macOS 测试，Windows 用户请留意兼容性）。
• 前置依赖：
  • 已安装并配置好 ComfyUI。
  • （可选但推荐）安装 Node.js：若需进行前端开发或调试，请访问 Node.js 官网 下载最新版。
  • Git：用于工作流的同步与订阅功能。

安装步骤

推荐使用 ComfyUI Manager 进行安装，也可选择手动克隆。

方法一：通过 ComfyUI Manager 安装（推荐）

1. 确保已安装 ComfyUI Manager。
2. 启动 ComfyUI，点击管理器菜单中的 "Install Custom Node"。
3. 在搜索框输入 comfyui-browser。
4. 找到对应插件并点击 Install。
5. 重启 ComfyUI 生效。

方法二：手动安装

在终端执行以下命令，将插件克隆至 custom_nodes 目录：

cd custom_nodes && git clone https://github.com/tzwm/comfyui-browser.git

完成后重启 ComfyUI。

配置说明（可选）

如需自定义输出目录或集合存储路径，可在 comfyui-browser 插件目录下创建 config.json 文件：

{
  "collections": "/var/lib/comfyui/comfyui-browser-collections",
  "download_logs": "/var/lib/comfyui/comfyui-browser-download-logs",
  "outputs": "/var/lib/comfyui/outputs",
  "sources": "/var/lib/comfyui/comfyui-browser-sources"
}

注：若不配置，系统将使用默认路径（通常位于插件目录或 ComfyUI 输出目录）。

基本使用

安装重启后，即可在 ComfyUI 界面中使用以下核心功能：

1. 打开浏览器面板

   • 在 ComfyUI 界面按下键盘快捷键 B，即可 toggles（切换）显示/隐藏 Browser 对话框。
   • 也可以通过侧边栏图标进入。

2. 管理工作流 (Saves)

   • 在面板中查看 Outputs（输出文件夹）内的历史图片与工作流。
   • 点击 "Add to Saves" 将常用工作流保存至集合中，便于后续快速切换和管理。
   • 保存的工作流存储在配置的 collections 目录中。

3. 订阅与同步 (Sources)

   • 在 Sources 标签页订阅远程 Git 仓库的工作流源。
   • 支持通过 Git 将本地的 Saves 同步到远程仓库，实现多设备共享。
   • 使用关键词搜索功能快速定位特定的工作流、节点或模型。

4. 使用自定义节点

   • Select Inputs：在选择器中快速选取当前图表的任何输入项。
   • XYZ Plot：通过选择输入项并填充数值，快速生成简单的 XYZ 对比图。

提示：欢迎通过提交 Issue 来分享你的工作流源，共同构建社区资源库。