ComfyUI前端

现代化的ComfyUI前端。此仓库与现有的扩展系统完全兼容。

使用方法

在ComfyUI启动脚本中添加命令行参数--front-end-version Comfy-Org/ComfyUI_frontend@latest。

对于Windows独立版本用户，请按如下方式编辑run_cpu.bat / run_nvidia_gpu.bat文件：

.\python_embeded\python.exe -s ComfyUI\main.py --windows-standalone-build --front-end-version Comfy-Org/ComfyUI_frontend@latest
pause

故障排除

<details> <summary>空白屏幕（已通过https://github.com/comfyanonymous/ComfyUI/pull/4211修复）</summary>

现象

在命令行中启用新前端后，在浏览器中打开ComfyUI，你会看到一个空白屏幕。如果你按F12打开开发者工具，你可以在控制台消息中看到litegraph.core.js:1 404错误。

原因

浏览器正在缓存之前从localhost:8188提供的index.html文件。

解决方法

第1步：在开发者工具中禁用缓存

第2步：刷新浏览器

</details>

发布摘要

主要功能

<details> <summary>v1.2.4：节点库侧边栏标签</summary>

拖放

https://github.com/user-attachments/assets/853e20b7-bc0e-49c9-bbce-a2ba7566f92f

过滤

https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf

</details> <details> <summary>v1.2.0：队列/历史侧边栏标签</summary>

https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f

</details> <details> <summary>v1.1.0：节点搜索框</summary>

模糊搜索和节点预览

按住Shift键释放

https://github.com/user-attachments/assets/a1b2b5c3-10d1-4256-b620-345de6858f25

</details>

生活质量改进

<details> <summary>v1.2.7：**Litegraph** 按住Shift键拖动多个连接</summary>

https://github.com/user-attachments/assets/68826715-bb55-4b2a-be6e-675cfc424afe

https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d

</details> <details> <summary>v1.2.2：**Litegraph** 自动连接到正确的插槽</summary>

之前

https://github.com/user-attachments/assets/c253f778-82d5-4e6f-aec0-ea2ccf421651

之后

https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d

</details> <details> <summary>v1.1.8：**Litegraph** 隐藏小部件值的文本溢出</summary>

https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2

</details>

节点开发者API

<details> <summary>v1.2.4：注册自定义侧边栏标签的扩展API</summary>

扩展现在可以调用以下API来注册侧边栏标签。

  app.extensionManager.registerSidebarTab({
    id: "search",
    icon: "pi pi-search",
    title: "search",
    tooltip: "search",
    type: "custom",
    render: (el) => {
      el.innerHTML = "<div>自定义搜索标签</div>";
    },
  });

支持的图标列表可以在这里找到：https://primevue.org/icons/#list

我们稍后将支持自定义图标。

</details>

路线图

已完成的工作

将所有代码迁移到TypeScript，对原始逻辑进行最小修改。
使用Vite的rollup构建打包所有代码。
添加一个兼容层，以向后兼容现有的扩展系统。https://github.com/huchenlei/ComfyUI_frontend/pull/15
前端开发服务器。
用于ComfyUI工作流输入验证的Zod模式。
将litegraph作为npm依赖项。https://github.com/Comfy-Org/ComfyUI_frontend/pull/89
引入Vue来开始管理部分UI。
简易安装和版本管理（https://github.com/comfyanonymous/ComfyUI/pull/3897）。
更好的节点管理。Sherlock https://github.com/Nuked88/ComfyUI-N-Sidebar。

待完成的工作

替换现有的ComfyUI前端实现
移除@ts-ignore。
在tsconfig.json中开启strict。
为节点开发者添加更多小部件类型。
LLM流式节点。
线性模式（类似于InvokeAI的线性模式）。
按键绑定设置管理。为自定义节点注册按键绑定API。
用于添加UI相关功能的新扩展API。

开发

Git预提交钩子

运行npm run prepare以安装Git预提交钩子。目前，预提交钩子用于在提交时自动格式化代码。

开发服务器

注意：开发服务器不会从ComfyUI服务器加载任何扩展。只会加载核心扩展。

运行npm install安装必要的包
在localhost:8188启动本地ComfyUI后端
运行npm run dev启动开发服务器

测试

将https://github.com/comfyanonymous/ComfyUI_examples.git克隆到tests-ui/ComfyUI_examples或.env中指定的EXAMPLE_REPO_PATH位置
npm i安装所有依赖
npm run test:generate获取tests-ui/data/object_info.json
npm run test:generate:examples提取示例工作流
npm run test执行所有单元测试