ViewComfy

ViewComfy 是一个开源项目，旨在帮助用户将 ComfyUI 的工作流轻松封装为功能完整、界面友好的 Web 应用。它支持：

• 在同一界面运行多个工作流
• 输出图像、视频和文本内容
• 桌面与移动端自适应优化

无论你是 AI 艺术创作者、模型工程师还是前端开发者，ViewComfy 都能帮你快速构建可分享、可部署的交互式应用。

🛠️ 安装指南

1. 安装 Node.js

确保你已安装 Node.js v20.18 或更高版本（推荐使用 v20.18）。

node -v

如果未安装或版本过低，可以前往以下链接下载安装包：

• Node.js 官网

2. 克隆代码仓库

git clone https://github.com/ViewComfy/ViewComfy.git
cd ViewComfy

3. 安装依赖并启动开发服务器

npm install
npm run dev

默认情况下，服务将在 http://localhost:8188 上运行。

⚙️ 配置 ComfyUI 后端

ViewComfy 使用 ComfyUI 的 API 作为后端处理引擎。

记录下运行的端口号（通常为 8188），并在启动 ViewComfy 时指定：

COMFYUI_PORT=8188 npm run dev

在 ComfyUI 中启用“开发者模式”，并通过“Save (API format)”导出 workflow_api.json 文件，这是 ViewComfy 运行所需的核心配置文件。

📱 如何分享你的 Web 应用？

ViewComfy 提供多种方式来发布和分享你的应用，满足不同场景需求。

方式一：通过 ngrok 分享本地应用

ngrok 可以将本地运行的服务暴露到公网，方便测试和临时分享。

步骤：

1. 安装 ngrok 并登录账户。
2. 创建隧道：

ngrok http http://localhost:8188

3. 复制生成的 URL（如 https://abc123.ngrok.io）即可分享给他人。

⚠️ 注意：只要本地服务运行着，该链接就有效。关闭电脑或终止进程后，链接失效。

方式二：使用 ViewComfy Cloud 快速部署

如果你希望跳过本地配置，可以直接使用 ViewComfy Cloud：

• 上传 workflow_api.json 文件
• 自定义 UI 布局（通过 view_comfy.json）
• 一键部署并获取专属访问链接

这种方式适合需要快速上线、无需维护基础设施的用户。

方式三：前后端分离部署（推荐）

后端部署（GPU 环境）

将 ComfyUI 工作流部署为无服务器 API 端点，仅在生成内容时运行 GPU，节省资源成本。

• 获取 API 密钥并配置 .env 文件：

VIEWCOMFY_CLIENT_ID="your_client_id"
VIEWCOMFY_CLIENT_SECRET="your_secret_key"

前端部署（CPU 环境）

将 ViewComfy 项目部署在任意静态托管平台（如 Vercel、Netlify、Modal 等），实现轻量级前端展示。

优点：

• 成本更低，仅在需要时调用 GPU
• 更易扩展和维护

🧩 核心功能详解

表单编辑器（Form Editor）

你可以将 workflow_api.json 文件拖入表单编辑器，系统会自动生成输入表单项，便于用户在 Playground 中进行交互式操作。

Playground 模式

Playground 是一个简化版的用户界面，用于运行和调试工作流。结合 ngrok 或云端部署，你可以将其变为一个完整的 Web 应用。

ViewMode 模式

启用 ViewMode 后，只显示 Playground 页面，隐藏其他设置项，非常适合对外演示或嵌入网页。

启用方法：

修改 .env 文件：

NEXT_PUBLIC_VIEW_MODE="true"

重启服务：

npm run dev

✅ 提示：可通过 VIEW_COMFY_FILE_NAME 指定不同的配置文件名。

🔒 用户管理（可选）

ViewComfy 支持基于 Clerk 的用户管理系统，适用于需要权限控制的场景。

启用方式：

NEXT_PUBLIC_USER_MANAGEMENT="true"
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="your_clerk_publishable_key"
CLERK_SECRET_KEY="your_clerk_secret_key"

建议仅在 ViewMode 下启用此功能，以提供更安全的访问体验。

🐳 使用 Docker 快速部署

构建镜像

docker build -t viewcomfy .

运行容器

docker run -it --name viewcomfy-container -p 3000:3000 viewcomfy

Docker 方式适合生产环境部署，便于集成 CI/CD 流程。

📌 总结

ViewComfy 让你能够轻松地将 ComfyUI 工作流转化为高质量的 Web 应用，无论是用于个人创作、团队协作，还是商业展示，都提供了灵活的部署选项和强大的功能支持。

如果你正在寻找一种简单、高效、可扩展的方式来共享你的 AI 工作流，ViewComfy 是一个值得尝试的开源工具。