ComfyUI 实战教程：无代码，工作流转漂亮Web应用

AI绘画小33

于 2024-09-27 14:25:28 发布

阅读量475

点赞数 9

文章标签：前端人工智能 comfyui AI AI绘画 AIGC

本文链接：https://blog.csdn.net/2401_84760527/article/details/142592594

版权

前言

大家好，我是每天分享AI应用的小33！

刚开始接触ComfyUI的同学可能会被它的各种节点和连接线所困扰，搞不清楚它们的概念和用途，当然要学好ComfyUI，这是一道必须要闯过的难关。怎么过？每天看看我写的文章就好啦，哈哈哈，开个小玩笑。

不过即使我们自己学废了，当把工作流交给用户使用的时候，问题仍然存在，用户同样搞不清楚这些形形色色的输入框和连接线都是什么鬼，使用起来心理压力很大，很可能一不小心就会把工作流搞坏。

怎么办？ComfyUI提供了API，我们可以自己做一个好看的前端页面，来调用自己做好的工作流。不过这还是有点麻烦，想想看，你得掌握一些页面绘制和交互技术，还得知道每个API具体都是干什么用，有哪些参数和返回值，太难了，太难了。

今天给大家分享一个简单的将ComfyUI工作流转漂亮网页应用的小工具，拖拖拽拽，输输点点，就可以快速将自己的工作流发布为一个漂亮的Web应用，再也不用担心用户暴走的问题。

接触过企业应用的同学可能听说过低代码或者无代码工具，拖拖拽拽就能创建一个Web应用，今天介绍的这个工具就可以称之为ComfyUI的无代码工具。

效果展示

废话不多少了，看看我创建的这个简单的文生图Web应用。应用的名字和描述完全可以自定义，输入参数来自工作流中的输入节点，可以自定义参数名；生成区域会显示排队情况、生成进度和最终生成的图片。

所有的AI设计工具，模型和插件，都已经整理好了，👇获取~

安装部署

下面开始介绍程序安装步骤。

这里假设你已经安装好了ComfyUI，ComfyUI需要Nvidia显卡8G显存以上，有这个条件的同学可以看我之前写的安装说明：[ComfyUI 完全入门：安装部署]

没有这个条件的同学也可以直接使用我的云环境镜像，不用再耗费精力的踩各种坑：[云环境使用ComfyUI：一键开启，无需安装部署、无需特殊网络、无需懂技术]

安装ComfyFlowApp

这个程序就是今天的主角，目前开源在Github上：https://github.com/xingren23/ComfyFlowApp

网络访问不便的同学可以发消息“ComfyAPP”到公/众\号“萤火遛AI”，即可获取。

我们将要在 conda 的命令窗口中执行若干命令，没有的同学参考上面的安装说明。

下面是完整的安装命令：

# 下载程序：已经通过别的方式下载到程序的同学请跳过这一步  
git clone --depth 1 https://github.com/xingren23/ComfyFlowApp.git  
  
# 安装运行环境  
conda create -n ComfyFlowApp python=3.11  
  
# 激活运行环境，Linux环境请执行：source activate ComfyFlowApp  
conda activate ComfyFlowApp  
  
# 安装依赖的其它程序包  
cd ComfyFlowApp  
pip install -r requirements.txt

这个程序有几个配置，Windows文件是 ComfyFlowApp/bin/creator_run.bat ，Linux文件是 ComfyFlowApp/bin/creator_run.sh，使用记事本等编辑器打开，找到下图中三个参数，修改成你自己的。

介绍下这三个参数：

STREAMLIT_SERVER_PORT：ComfyFlowApp 前端页面的监听端口，一般默认即可。
COMFYFLOW_API_URL：ComfyFlowApp 后端API的访问地址，设置为本机一个不使用的端口即可。
COMFYUI_SERVER_ADDR：这个工具是基于ComfyUI的，所以必须指定ComfyUI的地址。

然后我们继续在之前的命令行工具中执行以下命令，启动程序：

# 启动程序，Linux环境请执行：sh bin/creator_run.sh   
.\bin\creator_run.bat

输出类似下图中的信息，代表启动成功：

接着我们就可以在浏览器中使用 http://localhost:8501 访问 ComfyFlowApp了。

如果你使用的是AutoDL这种云服务器，默认只能开放一个外网端口，如果要使用多个，可以使用SSH隧道的方式打通网络（参考：https://www.autodl.com/docs/ssh_proxy/）。注意：一个命令行窗口只能用来打通一个端口，需要打通几个端口，就要开启几个命令行窗口，我这里需要开启两个。

sudo ssh -CNg -L 9009:127.0.0.1:9009 root@connect.westb.seetacloud.com -p 36666  
sudo ssh -CNg -L 8501:127.0.0.1:8501 root@connect.westb.seetacloud.com -p 36666

使用ComfyFlowApp

登陆

首次进入的页面样子如下图，需要输入一个用户名和密码，默认的是：demo、comfyflowapp

创建应用

然后点击页面右侧菜单中的 Workspace，继续点击打开页面右上角的“New APP”。

在这里插入图片描述

在创建应用的页面上传一张ComfyUI生成的照片，ComfyUI生成的照片中默认会包含ComfyUI工作流的信息，上传成功后，程序就会读到工作流信息了。

在页面的下方，需要我们设置应用的一些信息，如下图所示：

1、应用名称，自己随便取名。

2、应用的描述，自己随便写。

3-5、应用的输入参数，目前只能设置3个，应该可以通过修改程序进行扩展。每个参数包含三个信息，分别是：参数对应到ComfyUI工作流中的节点输入项（这里需要仔细选择，对应到ComfyUI节点中的参数，忘记了就去ComfyUI中看看）、参数显示的名称、参数的更多使用说明。

6、应用的输出参数，目前只能设置1个，应该可以通过修改程序进行扩展。输出参数包含的信息和输入参数类似。

最后点击 Submit 创建应用。

应用创建成功后，我们可以点击页面右上角的 “Back Workspace” 回到应用管理列表页面。

发布应用

在应用管理列表页面，我们需要依次点击“Preview”预览应用，然后再点击“Install”安装应用。

预览应用的界面如下，可以测试应用的实际效果，输入相关参数，点击 Generate 即可开始生成图片。

使用应用

发布后的应用会出现在 My Apps 页面中，我们在页面右侧的应用列表中找到对应的应用，点击 Enter 即可进入。

在这里插入图片描述

如下图所示，左边是应用的输入区域，右边是生成区域，生成时可以看到自己的排队情况（也就是多人使用的情况下什么时候轮到自己）、生成的进度。生成完成后，在图片上点击右键可以将图片保存到本地。

以上就是 ComfyFlowApp 的基本使用方法，有兴趣的同学快去试试吧。

这个程序还有很大的改善空间，有需要的同学欢迎和我交流。

资源下载

为了方便大家入门，我也整理了一批工作流，包括基本的文生图、图生图、ControlNet的使用、视频的处理等等。

为了帮助大家更好地掌握 ComfyUI，我在去年花了几个月的时间，撰写并录制了一套ComfyUI的基础教程，共六篇。这套教程详细介绍了选择ComfyUI的理由、其优缺点、下载安装方法、模型与插件的安装、工作流节点和底层逻辑详解、遮罩修改重绘/Inpenting模块以及SDXL工作流手把手搭建。