mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-10 01:50:08 +00:00
a28ac0c0fa
* Disable default searchbox Add headlessui and vue Add vite's vue plugin Vue app helloworld Format vue Add vue shim minimal working searchbox Add primevue dark mode Use primevue nit Add fuse fuzzy search Add tailwindcss / center searchbox Fix style Add node source chip desc text wrapping Add placeholder inputbox filter support wip Revert some filter designs Add filter modal Drop down show all nodes Change modal font Add filtered search nit Complete on focus Auto fill filterOption Fix dropdown Fix z-index Fix search bug Properly remove chip Adjust node source detection Resolve merge conflict nit * Refactor * Use badge to display filter type * nit * Trigger on canvas event * nit * Auto add data type filter when link released * nit * Auto focus when shown * Focus on add/remvoe filter * close dialog when escape pressed * Add node at fixed location * nit * Update litegraph * nit * Change theme * Increase search limit * Add node on event location * Clear filter when dialog closed * Enable/Disable new search bx * Improve app loading * Fix copy node * Update test expectations * Update test expectations [skip ci] --------- 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.
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
What to be done
-
Replace the existing ComfyUI front-end impl (https://github.com/comfyanonymous/ComfyUI/pull/3897).
-
Remove
@ts-ignores. -
Turn on
strictontsconfig.json. -
Introduce Vue to start managing part of the UI.
- Starting with node search box revamp
-
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 search. 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.