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

故障排除

发布摘要

主要功能

生活质量改进

节点开发者API

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

路线图

已完成的工作

• 将所有代码迁移到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执行所有单元测试

LiteGraph

此仓库使用托管在https://github.com/Comfy-Org/litegraph.js的litegraph包。对litegraph的任何更改都应该提交到该仓库。

部署

• 选项1：在.env中设置DEPLOY_COMFYUI_DIR并运行npm run deploy。
• 选项2：手动将dist/下的所有内容复制到ComfyUI检出中的ComfyUI/web/。

重大变更

• api.api_url现在为通过该方法的每个URL添加api/前缀。如果自定义节点注册了一个新的API端点，但没有提供带有api/前缀的替代端点，将会出现问题。幸运的是，很少有扩展这样做。我们可以在启动前进行审核以解决这个问题。