ITADN
Comfy-Org/ComfyUI_frontend
README.md
以下内容由 AI 翻译,如有问题请点此提交 issue 反馈

ComfyUI_frontend

ComfyUI 的官方前端实现。

Website Discord Matrix

发布计划

该项目针对每个次要版本遵循结构化的发布流程,包含三个不同的阶段:

  1. 开发阶段 - 2 周

    • 积极开发新功能
    • 代码更改合并到开发分支
  2. 功能冻结 - 2 周

    • 不接受新功能
    • 仅将错误修复 cherry-pick 到发布分支
    • 代码库的测试和稳定化
  3. 发布

    • 在冻结期结束时发布版本
    • 版本最终确定并向所有用户开放

每日构建版本

每日构建版本每天发布在 https://github.com/Comfy-Org/ComfyUI_frontend/releases

要使用最新的每日构建版本,请将以下命令行参数添加到您的 ComfyUI 启动脚本中:

--front-end-version Comfy-Org/ComfyUI_frontend@latest

重叠的发布周期

连续次要版本的开发存在重叠。例如,当版本 1.1 处于功能冻结阶段时,版本 1.2 的开发会同时开始。每个功能从合并到 ComfyUI 稳定版发布大约需要 4 周时间(在 main 分支上 2 周,在 RC 分支上冻结 2 周)。

示例发布周期

WeekDate RangeVersion 1.1Version 1.2Version 1.3Patch Releases
1-2Mar 1-14Development---
3-4Mar 15-28Feature FreezeDevelopment-1.1.0 through 1.1.13 (daily)
5-6Mar 29-Apr 11ReleasedFeature FreezeDevelopment1.1.14+ (daily)
1.2.0 through 1.2.13 (daily)
7-8Apr 12-25-ReleasedFeature Freeze1.2.14+ (daily)
1.3.0 through 1.3.13 (daily)

发布摘要

主要功能

v1.5: 原生翻译 (i18n)

ComfyUI 现在内置了翻译支持,取代了对第三方翻译扩展的需求。在 Comfy > Locale > Language 中选择您的语言,可将界面翻译为英语、简体中文、俄语、日语、韩语或阿拉伯语。与之前的解决方案相比,这种原生实现提供了更好的性能、可靠性和可维护性。

更多详情可在此处查看:https://blog.comfy.org/p/native-localization-support-i18n

v1.4: 新的遮罩编辑器

https://github.com/Comfy-Org/ComfyUI_frontend/pull/1284 实现了一个新的遮罩编辑器。

image

v1.3.22: 集成服务器终端

按 Ctrl + ` 切换集成终端。

https://github.com/user-attachments/assets/eddedc6a-07a3-4a83-9475-63b3977f6d94

v1.3.7:键位自定义

基础 UI

image

重置按钮

image

编辑键位绑定

image image

rec.webm

v1.2.4:Node 库侧边栏选项卡

拖放

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

过滤器

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

v1.2.0:队列/历史记录侧边栏选项卡

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

体验优化

v1.3.32: **Litegraph** 嵌套组

https://github.com/user-attachments/assets/f51adeb1-028e-40af-81e4-0ac13075198a

v1.3.24: **Litegraph** 组选择

https://github.com/user-attachments/assets/e6230a94-411e-4fba-90cb-6c694200adaa

v1.3.4: **Litegraph** 自动将 widget 转换为 input

将正确类型的链接拖放到节点 widget 上时,会自动将该 widget 转换为 input。

rec.webm

v1.3.4: **Litegraph** 画布平移模式

在平移模式下,画布变为只读。平移模式可通过点击画布菜单上的平移模式按钮或按住空格键来激活。

rec.webm

v1.2.62: **Litegraph** 将可选输入插槽显示为甜甜圈

GYEIRidb0AYGO-v

v1.2.44: **Litegraph** 双击组标题以编辑

https://github.com/user-attachments/assets/5bf0e2b6-8b3a-40a7-b44f-f0879e9ad26f

v1.2.39: **Litegraph** 使用 Ctrl + G 将选中的节点分组

https://github.com/user-attachments/assets/7805dc54-0854-4a28-8bcd-4b007fa01151

v1.2.38: **Litegraph** 双击节点标题以编辑

https://github.com/user-attachments/assets/d61d5d0e-f200-4153-b293-3e3f6a212b30

v1.1.8: **Litegraph** 隐藏 widget 值上的文本溢出

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

开发者 API

v1.6.13:ComfyUI 桌面版中 prompt/confirm/alert 的替代方案

某些仅限浏览器使用的 API 在 ComfyUI 桌面版的 electron 环境中不可用。

  • window.prompt
  • window.confirm
  • window.alert

请使用以下 API 作为替代。

// window.prompt
window['app'].extensionManager.dialog
  .prompt({
    title: 'Test Prompt',
    message: 'Test Prompt Message'
  })
  .then((value: string) => {
    // Do something with the value user entered
  })

image

// window.confirm
window['app'].extensionManager.dialog
  .confirm({
    title: 'Test Confirm',
    message: 'Test Confirm Message'
  })
  .then((value: boolean) => {
    // Do something with the value user entered
  })

image

// window.alert
window['app'].extensionManager.toast.addAlert('Test Alert')

image

v1.3.34: 注册关于面板徽章
app.registerExtension({
  name: 'TestExtension1',
  aboutPageBadges: [
    {
      label: 'Test Badge',
      url: 'https://example.com',
      icon: 'pi pi-box'
    }
  ]
})

image

v1.3.22: 注册底部面板选项卡
app.registerExtension({
  name: 'TestExtension',
  bottomPanelTabs: [
    {
      id: 'TestTab',
      title: 'Test Tab',
      type: 'custom',
      render: (el) => {
        el.innerHTML = '<div>Custom tab</div>'
      }
    }
  ]
})

image

v1.3.22: 新的设置 API

旧版设置 API。

// Register a new setting
app.ui.settings.addSetting({
  id: 'TestSetting',
  name: 'Test Setting',
  type: 'text',
  defaultValue: 'Hello, world!'
})

// Get the value of a setting
const value = app.ui.settings.getSettingValue('TestSetting')

// Set the value of a setting
app.ui.settings.setSettingValue('TestSetting', 'Hello, universe!')

新的设置 API。

// Register a new setting
app.registerExtension({
  name: 'TestExtension1',
  settings: [
    {
      id: 'TestSetting',
      name: 'Test Setting',
      type: 'text',
      defaultValue: 'Hello, world!'
    }
  ]
})

// Get the value of a setting
const value = app.extensionManager.setting.get('TestSetting')

// Set the value of a setting
app.extensionManager.setting.set('TestSetting', 'Hello, universe!')
v1.3.7: 注册命令和键绑定

扩展可以调用以下 API 来注册命令和键绑定。请注意,核心中定义的键绑定不能被覆盖,且某些键绑定被浏览器保留。

app.registerExtension({
  name: 'TestExtension1',
  commands: [
    {
      id: 'TestCommand',
      function: () => {
        alert('TestCommand')
      }
    }
  ],
  keybindings: [
    {
      combo: { key: 'k' },
      commandId: 'TestCommand'
    }
  ]
})
v1.3.1:用于注册自定义顶栏菜单项的扩展 API

扩展可以调用以下 API 来注册自定义顶栏菜单项。

app.registerExtension({
  name: 'TestExtension1',
  commands: [
    {
      id: 'foo-id',
      label: 'foo',
      function: () => {
        alert(1)
      }
    }
  ],
  menuCommands: [
    {
      path: ['ext', 'ext2'],
      commands: ['foo-id']
    }
  ]
})

image

v1.2.27: Extension API to add toast messagei

Extensions 可以调用以下 API 来添加 toast 消息。

app.extensionManager.toast.add({
  severity: 'info',
  summary: 'Loaded!',
  detail: 'Extension loaded!',
  life: 3000
})

所有受支持选项的文档可在此处找到:https://primevue.org/toast/#api.toast.interfaces.ToastMessageOptions

image

v1.2.4: 用于注册自定义侧边栏标签的 Extension API

扩展现在可以调用以下 API 来注册侧边栏选项卡。

app.extensionManager.registerSidebarTab({
  id: 'search',
  icon: 'pi pi-search',
  title: 'search',
  tooltip: 'search',
  type: 'custom',
  render: (el) => {
    el.innerHTML = '<div>Custom search tab</div>'
  }
})

支持的图标列表可在此处找到:https://primevue.org/icons/#list

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

image

v1.10.9: Selection Toolbox API

扩展可以注册命令,当在画布上选中特定项目时,这些命令会出现在选择工具箱中。

app.registerExtension({
  name: 'TestExtension1',
  commands: [
    {
      id: 'test.selection.command',
      label: 'Test Command',
      icon: 'pi pi-star',
      function: () => {
        // Command logic here
      }
    }
  ],
  // Return an array of command IDs to show in the selection toolbox
  // when an item is selected
  getSelectionToolboxCommands: (selectedItem) => ['test.selection.command']
})

选择工具箱将在选中项目时显示命令按钮: Image

贡献

我们欢迎对 ComfyUI Frontend 的贡献!请参阅我们的贡献指南,了解:

  • 贡献方式(代码、文档、测试、社区支持)
  • 开发环境搭建与工作流
  • 代码风格指南
  • 测试要求
  • 如何提交拉取请求
  • 将修复回移到发布分支

开发

有关详细的开发环境搭建、测试流程和技术信息,请参阅 CONTRIBUTING.md

i18n

有关详细信息,请参阅 locales/README.md

Storybook

参见 .storybook/README.md 以获取组件开发和视觉测试文档。

故障排除

如需全面的故障排除和技术支持,请参阅我们的官方文档: