mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
415 lines
12 KiB
Markdown
415 lines
12 KiB
Markdown
<div align="center">
|
|
|
|
# ComfyUI_frontend
|
|
|
|
**Official front-end implementation of [ComfyUI](https://github.com/comfyanonymous/ComfyUI).**
|
|
|
|
[![Website][website-shield]][website-url]
|
|
[![Discord][discord-shield]][discord-url]
|
|
[![Matrix][matrix-shield]][matrix-url]
|
|
<br>
|
|
[![][github-release-shield]][github-release-link]
|
|
[![][github-release-date-shield]][github-release-link]
|
|
[![][github-downloads-shield]][github-downloads-link]
|
|
[![][github-downloads-latest-shield]][github-downloads-link]
|
|
|
|
|
|
[github-release-shield]: https://img.shields.io/github/v/release/Comfy-Org/ComfyUI_frontend?style=flat&sort=semver
|
|
[github-release-link]: https://github.com/Comfy-Org/ComfyUI_frontend/releases
|
|
[github-release-date-shield]: https://img.shields.io/github/release-date/Comfy-Org/ComfyUI_frontend?style=flat
|
|
[github-downloads-shield]: https://img.shields.io/github/downloads/Comfy-Org/ComfyUI_frontend/total?style=flat
|
|
[github-downloads-latest-shield]: https://img.shields.io/github/downloads/Comfy-Org/ComfyUI_frontend/latest/total?style=flat&label=downloads%40latest
|
|
[github-downloads-link]: https://github.com/Comfy-Org/ComfyUI_frontend/releases
|
|
[matrix-shield]: https://img.shields.io/badge/Matrix-000000?style=flat&logo=matrix&logoColor=white
|
|
[matrix-url]: https://app.element.io/#/room/%23comfyui_space%3Amatrix.org
|
|
[website-shield]: https://img.shields.io/badge/ComfyOrg-4285F4?style=flat
|
|
[website-url]: https://www.comfy.org/
|
|
[discord-shield]: https://img.shields.io/discord/1218270712402415686?style=flat&logo=discord&logoColor=white&label=Discord
|
|
[discord-url]: https://www.comfy.org/discord
|
|
|
|
</div>
|
|
|
|
## Release Schedule
|
|
|
|
### Nightly Release
|
|
|
|
Nightly releases are published daily at [https://github.com/Comfy-Org/ComfyUI_frontend/releases](https://github.com/Comfy-Org/ComfyUI_frontend/releases).
|
|
|
|
To use the latest nightly release, add the following command line argument to your ComfyUI launch script:
|
|
|
|
```bat
|
|
--front-end-version Comfy-Org/ComfyUI_frontend@latest
|
|
```
|
|
|
|
#### For Windows Stand-alone Build Users
|
|
|
|
Edit your `run_cpu.bat` or `run_nvidia_gpu.bat` file as follows:
|
|
|
|
```bat
|
|
.\python_embeded\python.exe -s ComfyUI\main.py --windows-standalone-build --front-end-version Comfy-Org/ComfyUI_frontend@latest
|
|
pause
|
|
```
|
|
|
|
### Stable Release
|
|
|
|
Stable releases are published weekly in the ComfyUI main repository, aligned with ComfyUI backend's stable release schedule.
|
|
|
|
#### Feature Freeze
|
|
|
|
There will be a 2-day feature freeze before each stable release. During this period, no new major features will be merged.
|
|
|
|
## Release Summary
|
|
|
|
### Major features
|
|
|
|
<details>
|
|
<summary>v1.3.7: Keybinding customization</summary>
|
|
|
|
## Basic UI
|
|
|
|
|
|
## Reset button
|
|
|
|
|
|
## Edit Keybinding
|
|
|
|
|
|
|
|
[rec.webm](https://github.com/user-attachments/assets/a3984ed9-eb28-4d47-86c0-7fc3efc2b5d0)
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.2.4: Node library sidebar tab</summary>
|
|
|
|
#### Drag & Drop
|
|
https://github.com/user-attachments/assets/853e20b7-bc0e-49c9-bbce-a2ba7566f92f
|
|
|
|
#### Filter
|
|
https://github.com/user-attachments/assets/4bbca3ee-318f-4cf0-be32-a5a5541066cf
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.2.0: Queue/History sidebar tab</summary>
|
|
|
|
https://github.com/user-attachments/assets/86e264fe-4d26-4f07-aa9a-83bdd2d02b8f
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.1.0: Node search box</summary>
|
|
|
|
#### Fuzzy search & Node preview
|
|
|
|
|
|
#### Release link with shift
|
|
https://github.com/user-attachments/assets/a1b2b5c3-10d1-4256-b620-345de6858f25
|
|
</details>
|
|
|
|
### QoL changes
|
|
|
|
<details>
|
|
<summary>v1.3.6: **Litegraph** Toggle link visibility</summary>
|
|
|
|
[rec.webm](https://github.com/user-attachments/assets/34e460ac-fbbc-44ef-bfbb-99a84c2ae2be)
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.3.4: **Litegraph** Auto widget to input conversion</summary>
|
|
|
|
Dropping a link of correct type on node widget will automatically convert the widget to input.
|
|
|
|
[rec.webm](https://github.com/user-attachments/assets/15cea0b0-b225-4bec-af50-2cdb16dc46bf)
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.3.4: **Litegraph** Canvas pan mode</summary>
|
|
|
|
The canvas becomes readonly in pan mode. Pan mode is activated by clicking the pan mode button on the canvas menu
|
|
or by holding the space key.
|
|
|
|
[rec.webm](https://github.com/user-attachments/assets/c7872532-a2ac-44c1-9e7d-9e03b5d1a80b)
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.3.1: **Litegraph** Shift drag link to create a new link</summary>
|
|
|
|
[rec.webm](https://github.com/user-attachments/assets/7e73aaf9-79e2-4c3c-a26a-911cba3b85e4)
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.2.62: **Litegraph** Show optional input slots as donuts</summary>
|
|
|
|
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.2.44: **Litegraph** Double click group title to edit</summary>
|
|
|
|
https://github.com/user-attachments/assets/5bf0e2b6-8b3a-40a7-b44f-f0879e9ad26f
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.2.39: **Litegraph** Group selected nodes with Ctrl + G</summary>
|
|
|
|
https://github.com/user-attachments/assets/7805dc54-0854-4a28-8bcd-4b007fa01151
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.2.38: **Litegraph** Double click node title to edit</summary>
|
|
|
|
https://github.com/user-attachments/assets/d61d5d0e-f200-4153-b293-3e3f6a212b30
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.2.7: **Litegraph** drags multiple links with shift pressed</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** auto connects to correct slot</summary>
|
|
|
|
#### Before
|
|
https://github.com/user-attachments/assets/c253f778-82d5-4e6f-aec0-ea2ccf421651
|
|
|
|
#### After
|
|
https://github.com/user-attachments/assets/b6360ac0-f0d2-447c-9daa-8a2e20c0dc1d
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.1.8: **Litegraph** hides text overflow on widget value</summary>
|
|
|
|
https://github.com/user-attachments/assets/5696a89d-4a47-4fcc-9e8c-71e1264943f2
|
|
</details>
|
|
|
|
### Developer APIs
|
|
|
|
<details>
|
|
<summary>v1.3.22: Register bottom panel tabs</summary>
|
|
|
|
```js
|
|
app.registerExtension({
|
|
name: 'TestExtension',
|
|
bottomPanelTabs: [
|
|
{
|
|
id: 'TestTab',
|
|
title: 'Test Tab',
|
|
type: 'custom',
|
|
render: (el) => {
|
|
el.innerHTML = '<div>Custom tab</div>'
|
|
}
|
|
}
|
|
]
|
|
})
|
|
```
|
|
|
|
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.3.22: New settings API</summary>
|
|
|
|
Legacy settings API.
|
|
|
|
```js
|
|
// 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!')
|
|
```
|
|
|
|
New settings API.
|
|
|
|
```js
|
|
// 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!')
|
|
```
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.3.7: Register commands and keybindings</summary>
|
|
|
|
Extensions can call the following API to register commands and keybindings. Do
|
|
note that keybindings defined in core cannot be overwritten, and some keybindings
|
|
are reserved by the browser.
|
|
|
|
```js
|
|
app.registerExtension({
|
|
name: 'TestExtension1',
|
|
commands: [
|
|
{
|
|
id: 'TestCommand',
|
|
function: () => {
|
|
alert('TestCommand')
|
|
}
|
|
}
|
|
],
|
|
keybindings: [
|
|
{
|
|
combo: { key: 'k' },
|
|
commandId: 'TestCommand'
|
|
}
|
|
]
|
|
})
|
|
```
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.3.1: Extension API to register custom topbar menu items</summary>
|
|
|
|
Extensions can call the following API to register custom topbar menu items.
|
|
|
|
```js
|
|
app.registerExtension({
|
|
name: 'TestExtension1',
|
|
commands: [
|
|
{
|
|
id: 'foo-id',
|
|
label: 'foo',
|
|
function: () => {
|
|
alert(1)
|
|
}
|
|
}
|
|
],
|
|
menuCommands: [
|
|
{
|
|
path: ['ext', 'ext2'],
|
|
commands: ['foo-id']
|
|
}
|
|
]
|
|
})
|
|
```
|
|
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.2.27: Extension API to add toast message</summary>i
|
|
|
|
Extensions can call the following API to add toast messages.
|
|
|
|
```js
|
|
app.extensionManager.toast.add({
|
|
severity: 'info',
|
|
summary: 'Loaded!',
|
|
detail: 'Extension loaded!',
|
|
life: 3000
|
|
})
|
|
```
|
|
Documentation of all supported options can be found here: <https://primevue.org/toast/#api.toast.interfaces.ToastMessageOptions>
|
|
|
|
|
|
</details>
|
|
|
|
<details>
|
|
<summary>v1.2.4: Extension API to register custom sidebar tab</summary>
|
|
|
|
Extensions now can call the following API to register a sidebar tab.
|
|
|
|
```js
|
|
app.extensionManager.registerSidebarTab({
|
|
id: "search",
|
|
icon: "pi pi-search",
|
|
title: "search",
|
|
tooltip: "search",
|
|
type: "custom",
|
|
render: (el) => {
|
|
el.innerHTML = "<div>Custom search tab</div>";
|
|
},
|
|
});
|
|
```
|
|
|
|
The list of supported icons can be found here: <https://primevue.org/icons/#list>
|
|
|
|
We will support custom icons later.
|
|
|
|
|
|
</details>
|
|
|
|
## Development
|
|
|
|
### Git pre-commit hooks
|
|
|
|
Run `npm run prepare` to install Git pre-commit hooks. Currently, the pre-commit
|
|
hook is used to auto-format code on commit.
|
|
|
|
### Dev Server
|
|
|
|
Note: The dev server will NOT load any extension from the ComfyUI server. Only
|
|
core extensions will be loaded.
|
|
|
|
- Run `npm install` to install the necessary packages
|
|
- Start local ComfyUI backend at `localhost:8188`
|
|
- Run `npm run dev` to start the dev server
|
|
|
|
### Test
|
|
|
|
- `git clone https://github.com/comfyanonymous/ComfyUI_examples.git` to `tests-ui/ComfyUI_examples` or the EXAMPLE_REPO_PATH location specified in .env
|
|
- `npm i` to install all dependencies
|
|
- `npm run test:generate` to fetch `tests-ui/data/object_info.json`
|
|
- `npm run test:generate:examples` to extract the example workflows
|
|
- `npm run test` to execute all unit tests.
|
|
|
|
### LiteGraph
|
|
|
|
This repo is using litegraph package hosted on <https://github.com/Comfy-Org/litegraph.js>. Any changes to litegraph should be submitted in that repo instead.
|
|
|
|
### Test litegraph changes
|
|
|
|
- Run `npm link` in the local litegraph repo.
|
|
- Run `npm uninstall @comfyorg/litegraph` in this repo.
|
|
- Run `npm link @comfyorg/litegraph` in this repo.
|
|
|
|
This will replace the litegraph package in this repo with the local litegraph repo.
|
|
|
|
## Deploy
|
|
|
|
- Option 1: Set `DEPLOY_COMFYUI_DIR` in `.env` and run `npm run deploy`.
|
|
- Option 2: Copy everything under `dist/` to `ComfyUI/web/` in your ComfyUI checkout manually.
|
|
|
|
## Publish release to ComfyUI main repo
|
|
|
|
Run following command to publish a release to ComfyUI main repo. The script will create a new branch and do a commit to `web/` folder by checkout `dist.zip`
|
|
from GitHub release.
|
|
|
|
- `python scripts/main_repo_release.py <path_to_comfyui_main_repo> <version>`
|