Software 2.0

ComfyUI工作流转Web应用

admin -

在为用户组开发 ComfyUI 工作流时，共享你的工作可能很困难。接收者必须安装运行工作流所需的所有节点和模型，并克服界面可能令人生畏的事实。此外，在某些情况下，你可能希望保护你的 IP 并仅向用户显示工作流的输出。

解决此问题的一个简单且免费的解决方案是将 ViewComfy 的开源 UI 构建器与 ngrok 隧道一起使用。在本指南中，我们将介绍所有步骤。

对于不熟悉直接使用终端的人来说，我使用 Linux 终端来运行本指南中的所有命令。它们中的大多数也应该适用于 Mac 或 Windows 终端，但如果你遇到问题，我提供了一些带有有用资源的链接。

1、安装 NodeJS

ViewComfy 是一个 Next.js 应用程序，你需要做的第一件事是确保安装了节点版本 18.18 或更高版本。你可以使用以下命令检查节点版本：

node -v

如果你收到错误，或者正在运行过时的版本，你可以使用节点包管理器以编程方式安装 NodeJS。

或者，你可以直接从他们的网站下载。

2、启动 ComfyUI

ViewComfy 使用 ComfyUI API 作为后端。要使用它，你还需要启动 ComfyUI 并记下它运行的端口。在尝试使用 ViewComfy 之前，请确保你的工作流在 ComfyUI中可以无错误运行！

要启动 ComfyUI，可以运行常用命令：

python main.py

端口号是 ComfyUI 运行的 URL 末尾的四位数字。例如，如果 ComfyUI 在 http://localhost:3000运行，则端口号为 3000。

3、安装和运行 ViewComfy

一旦拥有正确版本的 Node，你就可以直接从 repo 安装 ViewComfy：

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

现在你已安装好所有内容并且 ComfyUI 正在运行，可以通过运行以下命令启动 ViewComfy 应用程序构建器：

COMFYUI_PORT=<The ComfyUI port number> npm run dev

因此，如果 ComfyUI 像上面示例一样指向端口 3000，则命令将是 COMFYUI_PORT=3000 npm run dev。

几秒钟后，你应该会得到一个类似于 http://localhost:8188 的链接。此链接可直接在你的浏览器中打开。记下此 URL，稍后你将再次需要它来共享你的应用。

ViewComfy repo 上有一个视频，解释了如何构建你的应用，因此我将在此省略所有细节。该应用操作起来相当简单，唯一需要注意的是，需要使用  Workflow_api.json 文件才能开始使用。你可以从 ComfyUI 下载它：

  • 在 ComfyUI 设置中启用开发模式选项
  • 使用“保存（API 格式）”按钮导出你的 API JSON。
共享你的 ViewComfy 应用

4、安装 ngrok

好的，你的应用已准备好并在 ViewComfy 上运行，现在是时候共享它了。为此，你可以使用名为 ngrok 的服务。这将有效地在运行 ViewComfy 的机器（你的计算机、RunPod 实例、Google Colab 等）和最终用户之间创建一条隧道。对于不熟悉这意味着什么的人来说，最终用户将有效地使用你的机器来运行应用程序，它不会在云中的某个地方运行。

安装 ngrok 是一个相对简单的过程。你可以按照此处说明的两个前两个步骤（安装 ngrok 和连接你的帐户）。

5、设置 ViewComfy 视图模式

你可以按原样共享你的 ViewComfy 应用程序，但如果只想让用户访问游乐场页面，则有一个方便的功能称为视图模式。

要激活它，首先要做的是将你的 Workflow_api.json 和 view_comfy.json 文件放在 ViewComfy 文件夹中。你可以直接从 ViewComfy 表单编辑器下载 view_comfy JSON：

然后，你需要将 .env文件中的 NEXT_PUBLIC_VIEW_MODE 设置为 true：

NEXT_PUBLIC_VIEW_MODE="true"

此文件应位于你下载 ViewComfy 的文件夹中。请注意，它通常是隐藏的，因此请确保您的文件管理器显示隐藏文件。如果你没有 IDE，可以使用记事本编辑文件，但要小心不要覆盖文件格式：

编辑 .env 文件后，你需要重新启动 ViewComfy。你可以关闭正在运行它的终端，然后在新终端中再次输入 npm run dev。

6、将你的应用放在网上

你的应用终于可以共享了。你可以运行：

ngrok http http://localhost:8188

确保你用于启动 ngrok 的 URL 是 ViewComfy 正在运行的 URL（例如  http://localhost:8188）。然后，Ngrok 将生成一个“转发”网址，你可以将其分享给你的受众。它看起来像这样： https://84c5df474.ngrok-free.dev。

拥有你的转发的人只要 ViewComfy 正在运行，url 就可以访问你的 ViewComfy 应用程序，因此请确保在共享完成后将其关闭。

原文链接：How to turn a ComfyUI workflow into a web app in minutes

汇智网翻译整理，转载请标明出处