Front-end of ComfyUI modernized. This repo is fully compatible with the existing extension system.
Add command line argument --front-end-version Comfy-Org/ComfyUI_frontend@latest
to your
ComfyUI launch script.
For Windows stand-alone build users, please edit the run_cpu.bat
/ run_nvidia_gpu.bat
file as following
.\python_embeded\python.exe -s ComfyUI\main.py --windows-standalone-build --front-end-version Comfy-Org/ComfyUI_frontend@latest
pause
v1.2.0: Queue/History sidebar tab
QueueDemo2.mp4
v1.1.0: Node search box
07.07.2024_23.27.39_REC.mp4
v1.2.7: **Litegraph** drags multiple links with shift pressed
batch_connect_demo.mp4
batch_disconnect.mp4
v1.2.2: **Litegraph** auto connects to correct slot
link_slot_broken.mp4
link_slot_fixed.mp4
v1.1.8: **Litegraph** hides text overflow on widget value
overflowfix.mp4
v1.2.4: Extension API to register custom side bar tab
Extensions now can call following API to register a sidebar tab.
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 find here: https://primevue.org/icons/#list
We will support custom icon later.
- Migrate all code to TypeScript with minimal change modification to the original logic.
- Bundle all code with vite's rollup build.
- Added a shim layer to be backward compatible with the existing extension system. https://github.com/huchenlei/ComfyUI_frontend/pull/15
- Front-end dev server.
- Zod schema for input validation on ComfyUI workflow.
- Make litegraph a npm dependency. Comfy-Org#89
- Introduce Vue to start managing part of the UI.
- Easy install and version management (comfyanonymous/ComfyUI#3897).
- Better node management. Sherlock https://github.com/Nuked88/ComfyUI-N-Sidebar.
- Replace the existing ComfyUI front-end impl
- Remove
@ts-ignore
s. - Turn on
strict
ontsconfig.json
. - Add more widget types for node developers.
- LLM streaming node.
- Linear mode (Similar to InvokeAI's linear mode).
- Keybinding settings management. Register keybindings API for custom nodes.
- New extensions API for adding UI-related features.
Run npm run prepare
to install Git pre-commit hooks. Currently, the pre-commit
hook is used to auto-format code on commit.
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
git clone https://github.com/comfyanonymous/ComfyUI_examples.git
totests-ui/ComfyUI_examples
or the EXAMPLE_REPO_PATH location specified in .envnpm i
to install all dependenciesnpm run test:generate
to fetchtests-ui/data/object_info.json
npm run test:generate:examples
to extract the example workflowsnpm run test
to execute all unit tests.
- Option 1: Set
DEPLOY_COMFYUI_DIR
in.env
and runnpm run deploy
. - Option 2: Copy everything under
dist/
toComfyUI/web/
in your ComfyUI checkout manually.
- api.api_url now adds a prefix
api/
to every url going through the method. If the custom node registers a new api endpoint but does not offer theapi/
prefixed alt endpoint, it will have issue. Luckily there aren't many extensions that do that. We can perform an audit before launching to resolve this issue.