ComfyUI_frontend

Front-end of ComfyUI modernized. This repo is fully compatible with the existing extension system.

How To Use

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

Trouble Shooting

Empty white screen (Fixed by comfyanonymous/ComfyUI#4211)

Behavior

After you enable the new frontend in commandline, and open ComfyUI in the browser, you see a blank screen. If you toggle dev tools with F12, you can observe litegraph.core.js:1 404 in console messages.

Cause

The browser is caching the index.html file previously served from localhost:8188.

How to fix

Step 1: Disable cache in devtools

Step 2: Refresh your browser

Release Summary

Major features

v1.2.4: Node library sidebar tab

Drag & Drop

nodelib_dnd.mp4

Filter

nodelist_filter.mp4

v1.2.0: Queue/History sidebar tab

QueueDemo2.mp4

v1.1.0: Node search box

Fuzzy search & Node preview

Release link with shift

07.07.2024_23.27.39_REC.mp4

QoL changes

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

Before

link_slot_broken.mp4

After

link_slot_fixed.mp4

v1.1.8: **Litegraph** hides text overflow on widget value

overflowfix.mp4

Node developers API

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.

Road Map

What has been done

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.

What to be done

Replace the existing ComfyUI front-end impl
Remove @ts-ignores.
Turn on strict on tsconfig.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.

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.

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.

Breaking changes

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 the api/ 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.

huchenlei/ComfyUI_frontend