如何将杂乱的 ComfyUI 工作流变成简洁的 Web 应用
任何在 ComfyUI 中构建过流水线的人都知道这种感觉。你花了三天时间，找到了完美的 LoRA，配置了 ControlNet，还写了巧妙的放大器。最终你得到了一个包含上百个节点的庞大图谱，看起来就像电路板原理图。一切都运行得完美无缺。
然后一位同事——设计师或产品经理——走过来说："嘿，能不能做成我只需要上传一张图片，点一下按钮，就能得到结果？"
你打开 ComfyUI，给他们展示界面，然后在他们眼中看到了纯粹的恐惧。给一个没有准备的人开放布满节点的空白画布访问权限，绝对会在五分钟内导致工作流出问题。
这正是 ViewComfy 要解决的问题。它是一个开源工具，可以从 ComfyUI 获取现成的 JSON 工作流，并构建带有标准输入表单的简洁 Web 界面。
底层原理与工作机制
该项目基于 Next.js 和 TypeScript 构建。概念很简单：从 ComfyUI 导出流水线为 workflow_api.json，放入 ViewComfy 编辑器，然后使用界面选择要向最终用户暴露哪些参数。
用户看到的不是杂乱无章的连线和数十个技术节点，而只是他们真正需要的内容：用于提示词的文本框、几个滑块、用于选择风格的下拉菜单，以及一个生成按钮。
ViewComfy 同时支持本地 ComfyUI 实例和通过 API 的无服务器端点。这意味着你可以在远程 GPU 服务器上运行计算，同时向用户交付轻量级前端。
主要功能
让我们详细了解一下该项目开箱即用的功能。
表单构建器与输入自定义
由你决定哪些参数要暴露，哪些要硬编码。
编辑器支持大多数基本控件：
- 文本字段和数字输入
- 带有最小/最大值约束的滑块
- 下拉框（选择框）和复选框
- 图片、视频和音频文件上传
字段可以包含辅助文本，并可标记为必填或可选。
内置遮罩编辑器
如果你的工作流是为局部重绘或本地编辑量身定制的，用户需要直接在浏览器中绘制遮罩。ViewComfy 包含一个内置的遮罩绘制工具，可以直接在上传的图片上操作。
Playground 模式与界面隔离
用于分享的最有用功能是 Playground 模式（或 ViewMode）。在此模式下，编辑器界面被完全隐藏，用户只能看到最终完成的 Web 应用。
这同时解决了两个问题：
- 保护流水线逻辑。如果你不希望分享你的技术诀窍，就不必暴露
workflow_api.json文件本身。 - 防止意外破坏。用户物理上无法移动节点或断开流水线中的连线。
用户认证
如果你计划将应用部署用于团队协作而不仅仅是本地使用，可以通过 Clerk 启用认证。只需将密钥添加到 .env 并设置相应的标志即可。
如何在本地运行
你需要安装较新版本的 Node.js 才能快速上手（作者推荐 v20.18+）。
克隆仓库并安装依赖：
git clone https://github.com/ViewComfy/ViewComfy.git
cd ViewComfy
npm install
npm run dev
启动开发服务器后，打开浏览器。将导出的 ComfyUI 文件 workflow_api.json 拖入编辑器窗口，配置字段显示，然后下载生成的配置 view_comfy.json。
要将项目切换到简洁应用模式（Playground 模式），请将两个 JSON 文件都放在根目录并编辑 .env：
NEXT_PUBLIC_VIEW_MODE="true"
VIEW_COMFY_FILE_NAME="view_comfy.json"
重启 npm run dev 后，你就得到了一个可直接使用的 Web 应用。如果你需要将所有内容打包到容器中，仓库中有一个 Dockerfile：
docker build \
--build-arg NEXT_PUBLIC_VIEW_MODE="true" \
-t viewcomfy .
docker run -it --name viewcomfy-container -p 3000:3000 viewcomfy
实际应用场景
我认为有三个明确的场景，ViewComfy 可以节省大量时间：
- 面向非技术团队的内部工具。 设计师、文案或营销人员需要一个用于图片放大、背景去除或生成符合特定品牌指南的横幅的工具。你只需配置一次图谱，然后给他们一个直观的表单。
- AI 服务原型验证。 当你需要使用神经网络快速测试新的产品假设，但还没有前端开发人员从头构建完整 UI 时。
- 客户演示。 不必在通话时启动笨重的 ComfyUI，而是打开一个简洁的网页，实时演示流水线。
注意事项与结论
该项目使用 AGPL-3.0 许可。如果你计划将其重建为商业闭源 SaaS，需要考虑许可限制。还有一个付费云平台（ViewComfy Cloud），因此某些功能（如内置计费和详细分析）是为其云平台设计的，尽管前端本身保持完全自主和开源。
谁应该尝试一下：
- 厌倦了为每个工作流在 Gradio 或 Streamlit 中构建重复性前端的开发者和 ML 工程师。
- 团队内部积极使用媒体生成功能，并希望为同事简化操作流程。
ViewComfy 看起来是一个扎实的工具，解决了"复杂流水线 — 简单用户"这一具体痛点。你可以在 10 分钟内在本地试用，因为该项目使用标准的 npm run dev 即可启动。
相关项目