大家好,我是每天分享AI应用的萤火君!

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

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

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

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

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

效果展示

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_人工智能

安装部署

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

这里假设你已经安装好了ComfyUI,ComfyUI需要Nvidia显卡8G显存以上,有这个条件的同学可以看我之前写的安装说明:mp.weixin.qq.com/s?__biz=Mzk…

没有这个条件的同学也可以直接使用我的云环境镜像,不用再费劲吧啦的踩坑:mp.weixin.qq.com/s?__biz=Mzk…

安装ComfyFlowApp

这个程序就是今天的主角,目前开源在Github上:github.com/xingren23/C…

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

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_AIGC_02

下面是完整的安装命令:

# 下载程序:已经通过别的方式下载到程序的同学请跳过这一步
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
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_低代码_03

介绍下这三个参数:

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

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

# 启动程序,Linux环境请执行:sh bin/creator_run.sh 
.\bin\creator_run.bat
  • 1.
  • 2.

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_人工智能_04

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

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

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
  • 1.
  • 2.

使用ComfyFlowApp

登陆

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_AIGC_05

创建应用

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_人工智能_06

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_API_07

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_AIGC_08

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

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

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

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

最后点击 Submit 创建应用。

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_AIGC_09

发布应用

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_API_10

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_人工智能_11

使用应用

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_API_12

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

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_低代码_13

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

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

资源下载

为了方便大家入门,我也整理了一批工作流,包括基本的文生图、图生图、ControlNet的使用、视频的处理等等,发消息“工作流”到公/众\号“萤火遛AI”,即可领取。

ComfyUI 实战教程:无代码,工作流转漂亮Web应用_API_14

另外我创建了一个AI绘画专栏。加入专栏,可以零门槛,全面系统的学习 Stable Diffusion 创作,让灵感轻松落地!如有需要请点击链接或下方扫码进入:xiaobot.net/post/033402…


以上就是本文的主要内容,如有问题,欢迎留言。

用好 ComfyUI:

  • 首先需要对 Stable Diffusion 的基本概念有清晰的理解,熟悉 ComfyUI 的基本使用方式;
  • 然后需要在实践过程中不断尝试、不断加深理解,逐步掌握各类节点的能力和使用方法,提升综合运用各类节点进行创作的能力。

我将在后续文章中持续输出 ComfyUI 的相关知识和热门作品的工作流,帮助大家更快的掌握 Stable Diffusion,创作出满足自己需求的高质量作品,感兴趣的同学请及时关注。