65740a30c5
* Basic side tool bar skeleton + Theme toggle (#164) * Side bar skeleton * Fix grid layout * nit * Add theme toggle logic * Change primevue color theme to blue to match beta menu UI * Add litegraph canvas splitter overlay (#177) * Add vue wrapper * Splitter overlay * Move teleport to side bar comp * Toolbar placeholder * Move settings button from top menu to side bar (#178) * Reverse relationship between splitter overlay and sidebar component (#180) * Reverse relationship between splitter overlay and sidebar component * nit * Remove border on splitter * Fix canvas shift (#186) * Move queue/history display to side bar (#185) * Side bar placeholder * Pinia store for queue items * Flatten task item * Fix schema * computed * Switch running / pending order * Use class-transformer * nit * Show display status * Add tag severity style * Add execution time * nit * Rename to execution success * Add time display * Sort queue desc order * nit * Add remove item feature * Load workflow * Add confirmation popup * Add empty table placeholder * Remove beta menu UI's queue button/list * Add tests on litegraph widget text truncate (#191) * Add tests on litegraph widget text truncate * Updated screenshots * Revert port change * Remove screenshots * Update test expectations [skip ci] * Add back menu.settingsGroup for compatibility (#192) * Close side bar on menu location set as disabled (#194) * Remove placeholder side bar tabs (#196) --------- Co-authored-by: bymyself <abolkonsky.rem@gmail.com> Co-authored-by: github-actions <github-actions@github.com>
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
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. https://github.com/Comfy-Org/ComfyUI_frontend/pull/89
-
Introduce Vue to start managing part of the UI.
- Starting with node search box revamp
- Starting with node search box revamp
-
Easy install and version management (https://github.com/comfyanonymous/ComfyUI/pull/3897).
What to be done
- Replace the existing ComfyUI front-end impl
- Remove
@ts-ignores. - Turn on
strictontsconfig.json. - Introduce a UI library to add more widget types for node developers.
- LLM streaming node.
- Linear mode (Similar to InvokeAI's linear mode).
- Better node management. Sherlock https://github.com/Nuked88/ComfyUI-N-Sidebar.
- 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 installto install the necessary packages - Start local ComfyUI backend at
localhost:8188 - Run
npm run devto start the dev server
Test
git clone https://github.com/comfyanonymous/ComfyUI_examples.gittotests-ui/ComfyUI_examplesor the EXAMPLE_REPO_PATH location specified in .envnpm ito install all dependenciesnpm run test:generateto fetchtests-ui/data/object_info.jsonnpm run test:generate:examplesto extract the example workflowsnpm run testto execute all unit tests.
Deploy
- Option 1: Set
DEPLOY_COMFYUI_DIRin.envand runnpm run deploy. - Option 2: Copy everything under
dist/toComfyUI/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 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.