ComfyUI icon indicating copy to clipboard operation
ComfyUI copied to clipboard

[Announcement] ComfyUI Frontend Modernization: Transitioning to a New Era on August 15, 2024

Open huchenlei opened this issue 1 year ago • 38 comments

ComfyUI Frontend Update Announcement

Summary

Effective August 15, 2024, we will be replacing the legacy frontend currently hosted in this repository with our new frontend (https://github.com/Comfy-Org/ComfyUI_frontend).

Why a New Frontend?

Our current frontend is built using vanilla JavaScript ESM modules without package management, which has led to significant challenges in development. We've been reinventing solutions for problems that already have established, efficient answers. The new frontend leverages TypeScript, Vue, and Vite, offering a more robust and maintainable codebase. We've also developed a custom shim extension in the Vite build process to ensure full compatibility with our existing frontend extension ecosystem. This new tech stack will dramatically accelerate the development of new frontend features.

New Features

The new frontend introduces numerous quality-of-life improvements. For a comprehensive list, please visit: https://github.com/Comfy-Org/ComfyUI_frontend#qol-changes

Early Adoption

If you're eager to experience the new frontend before the official transition, you can opt-in now by adding the following command line argument to your ComfyUI launch script:

--front-end-version Comfy-Org/ComfyUI_frontend@latest

This will use the latest release of the new frontend. If you prefer to use a specific version for stability, you can specify a version number:

--front-end-version Comfy-Org/[email protected]

Legacy UI Access After Deprecation

Following the transition on August 15, 2024, we will preserve a snapshot of the legacy UI in a new repository: Comfy-Org/ComfyUI_legacy_frontend. Users who need to revert to the legacy UI can do so using the following command line argument:

--front-end-version Comfy-Org/ComfyUI_legacy_frontend@latest

We're excited about this update and the improvements it brings to ComfyUI. Thank you for your continued support and feedback as we evolve our platform.

huchenlei avatar Aug 02 '24 01:08 huchenlei

is this true? @comfyanonymous

aimgdev avatar Aug 03 '24 02:08 aimgdev

Yes

mcmonkey4eva avatar Aug 03 '24 02:08 mcmonkey4eva

Yes, if you have any concerns you can go test the new frontend and report any issues you have.

comfyanonymous avatar Aug 03 '24 03:08 comfyanonymous

Is the new frontend still noodle junction or is it actually made for regular people now?

EDIT : Never mind just tried it and noticed it's still made without regular users in mind.

tpcdaz avatar Aug 03 '24 14:08 tpcdaz

Is the new frontend still noodle junction or is it actually made for regular people now?

EDIT : Never mind just tried it and noticed it's still made without regular users in mind.

The current stage is more about laying the foundation rather than focusing on the outwardly visible aspects. The UI/UX will be improved gradually in stages.

ltdrdata avatar Aug 03 '24 15:08 ltdrdata

I try it on Mac M2. I get a white screen. Nothing appears.

Creative-comfyUI avatar Aug 03 '24 18:08 Creative-comfyUI

I try it on Mac M2. I get a white screen. Nothing appears.

Any browser console logs? (Toggle dev tools with f12)

huchenlei avatar Aug 03 '24 18:08 huchenlei

I try it on Mac M2. I get a white screen. Nothing appears.

Any browser console logs? (Toggle dev tools with f12)

This time the screen is not white. ComfyUI appeared after something seems to load

Error: Invalid ComfyNodeDef: {"input":{"required":{"data":["*",""],"text":["STRING",{"multiline":true}]},"hidden":{"prompt":"PROMPT","extra_pnginfo":"EXTRA_PNGINFO","unique_id":"UNIQUE_ID"}},"output":[],"output_is_list":[],"output_name":[],"name":"ImpactLogger","display_name":"ImpactLogger","description":"","python_module":"custom_nodes.ComfyUI-Impact-Pack","category":"ImpactPack/Debug","output_node":true} Validation error: Array must contain at most 1 element(s) at "input.required.data" validateComfyNodeDef apiTypes.ts:292 getNodeDefs api.ts:253 registerNodes app.ts:1968 registerNodes workflow-component.js:328 setup app.ts:1901 setup GraphCanvas.vue:45 createHook runtime-core.esm-bundler.js:1808 callWithErrorHandling runtime-core.esm-bundler.js:195 callWithAsyncErrorHandling runtime-core.esm-bundler.js:202 __weh runtime-core.esm-bundler.js:1788 flushPostFlushCbs runtime-core.esm-bundler.js:379 render3 runtime-core.esm-bundler.js:5805 mount runtime-core.esm-bundler.js:3062 mount runtime-dom.esm-bundler.js:1530 main.ts:41 Caused by: ZodValidationError: Validation error: Array must contain at most 1 element(s) at "input.required.data" ValidationError index.mjs:11 fromZodErrorWithoutRuntimeCheck index.mjs:207 fromZodError index.mjs:186 validateComfyNodeDef apiTypes.ts:291 getNodeDefs api.ts:253 registerNodes app.ts:1968 registerNodes workflow-component.js:328 setup app.ts:1901 setup GraphCanvas.vue:45 createHook runtime-core.esm-bundler.js:1808 callWithErrorHandling runtime-core.esm-bundler.js:195 callWithAsyncErrorHandling runtime-core.esm-bundler.js:202 __weh runtime-core.esm-bundler.js:1788 flushPostFlushCbs runtime-core.esm-bundler.js:379 render3 runtime-core.esm-bundler.js:5805 mount runtime-core.esm-bundler.js:3062 mount runtime-dom.esm-bundler.js:1530 main.ts:41 Caused by: ZodError: [ { "code": "too_big", "maximum": 1, "inclusive": true, "exact": false, "type": "array", "path": [ "input", "required", "data" ], "message": "Array must contain at most 1 element(s)" } ] ZodError index.mjs:164 get error index.mjs:587 validateComfyNodeDef apiTypes.ts:291 getNodeDefs api.ts:253 registerNodes app.ts:1968 registerNodes workflow-component.js:328 setup app.ts:1901 setup GraphCanvas.vue:45 createHook runtime-core.esm-bundler.js:1808 callWithErrorHandling runtime-core.esm-bundler.js:195 callWithAsyncErrorHandling runtime-core.esm-bundler.js:202 __weh runtime-core.esm-bundler.js:1788 flushPostFlushCbs runtime-core.esm-bundler.js:379 render3 runtime-core.esm-bundler.js:5805 mount runtime-core.esm-bundler.js:3062 mount runtime-dom.esm-bundler.js:1530 main.ts:41 api.ts:256:16 getNodeDefs api.ts:256 registerNodes app.ts:1968 registerNodes workflow-component.js:328 setup app.ts:1901 setup GraphCanvas.vue:45 createHook runtime-core.esm-bundler.js:1808 callWithErrorHandling runtime-core.esm-bundler.js:195 callWithAsyncErrorHandling runtime-core.esm-bundler.js:202 __weh runtime-core.esm-bundler.js:1788 flushPostFlushCbs runtime-core.esm-bundler.js:379 render3 runtime-core.esm-bundler.js:5805 mount runtime-core.esm-bundler.js:3062 mount runtime-dom.esm-bundler.js:1530 main.ts:41 15:36:02.731 Error: Invalid ComfyNodeDef: {"input":{"required":{"text":["STRING",{"forceInput":true}],"substring":["STRING",{"default":"","multiline":false}],"pattern":["STRING",{"default":"","multiline":false}]}},"output":"BOOLEAN","output_is_list":[false,false,false,false,false,false,false],"output_name":"found","name":"Text Find","display_name":"Text Find","description":"","python_module":"custom_nodes.was-node-suite-comfyui","category":"WAS Suite/Text/Search","output_node":false} Validation error: Expected array, received string at "output"; Expected array, received string at "output_name" validateComfyNodeDef apiTypes.ts:292 getNodeDefs api.ts:253 registerNodes app.ts:1968 registerNodes workflow-component.js:328 setup app.ts:1901 setup GraphCanvas.vue:45 createHook runtime-core.esm-bundler.js:1808 callWithErrorHandling runtime-core.esm-bundler.js:195 callWithAsyncErrorHandling runtime-core.esm-bundler.js:202 __weh runtime-core.esm-bundler.js:1788 flushPostFlushCbs runtime-core.esm-bundler.js:379 render3 runtime-core.esm-bundler.js:5805 mount runtime-core.esm-bundler.js:3062 mount runtime-dom.esm-bundler.js:1530 main.ts:41 Caused by: ZodValidationError: Validation error: Expected array, received string at "output"; Expected array, received string at "output_name" ValidationError index.mjs:11 fromZodErrorWithoutRuntimeCheck index.mjs:207 fromZodError index.mjs:186 validateComfyNodeDef apiTypes.ts:291 getNodeDefs api.ts:253 registerNodes app.ts:1968 registerNodes workflow-component.js:328 setup app.ts:1901 setup GraphCanvas.vue:45 createHook runtime-core.esm-bundler.js:1808 callWithErrorHandling runtime-core.esm-bundler.js:195 callWithAsyncErrorHandling runtime-core.esm-bundler.js:202 __weh runtime-core.esm-bundler.js:1788 flushPostFlushCbs runtime-core.esm-bundler.js:379 render3 runtime-core.esm-bundler.js:5805 mount runtime-core.esm-bundler.js:3062 mount runtime-dom.esm-bundler.js:1530 main.ts:41 Caused by: ZodError: [ { "code": "invalid_type", "expected": "array", "received": "string", "path": [ "output" ], "message": "Expected array, received string" }, { "code": "invalid_type", "expected": "array", "received": "string", "path": [ "output_name" ], "message": "Expected array, received string" } ] ZodError index.mjs:164 get error index.mjs:587 validateComfyNodeDef apiTypes.ts:291 getNodeDefs api.ts:253 registerNodes app.ts:1968 registerNodes workflow-component.js:328 setup app.ts:1901 setup GraphCanvas.vue:45 createHook runtime-core.esm-bundler.js:1808 callWithErrorHandling runtime-core.esm-bundler.js:195 callWithAsyncErrorHandling runtime-core.esm-bundler.js:202 __weh runtime-core.esm-bundler.js:1788 flushPostFlushCbs runtime-core.esm-bundler.js:379 render3 runtime-core.esm-bundler.js:5805 mount runtime-core.esm-bundler.js:3062 mount runtime-dom.esm-bundler.js:1530 main.ts:41

Creative-comfyUI avatar Aug 03 '24 19:08 Creative-comfyUI

@tpcdaz if you want a friendlier non-noodle frontend to the Comfy core you can use https://github.com/mcmonkeyprojects/SwarmUI

mcmonkey4eva avatar Aug 03 '24 19:08 mcmonkey4eva

@Creative-comfyUI

The impact pack def is fixed in the latest version. https://github.com/ltdrdata/ComfyUI-Impact-Pack/pull/674

The WAS def is still an unmerged PR to fix. https://github.com/WASasquatch/was-node-suite-comfyui/pull/440

These erorr messages only affect the corresponding nodes only (Not the whole pack). If you don't use these nodes. You should be fine.

huchenlei avatar Aug 03 '24 19:08 huchenlei

@Creative-comfyUI

The impact pack def is fixed in the latest version. ltdrdata/ComfyUI-Impact-Pack#674

The WAS def is still an unmerged PR to fix. WASasquatch/was-node-suite-comfyui#440

These erorr messages only affect the corresponding nodes only (Not the whole pack). If you don't use these nodes. You should be fine.

That is, if I disable these nodes, will I see the new interface? I hope WAS will fix it before the release date

Creative-comfyUI avatar Aug 03 '24 20:08 Creative-comfyUI

@Creative-comfyUI The impact pack def is fixed in the latest version. ltdrdata/ComfyUI-Impact-Pack#674 The WAS def is still an unmerged PR to fix. WASasquatch/was-node-suite-comfyui#440 These erorr messages only affect the corresponding nodes only (Not the whole pack). If you don't use these nodes. You should be fine.

That is, if I disable these nodes, will I see the new interface? I hope WAS will fix it before the release date

The new frontend is replacing the underlying code. You should still see the same ComfyUI interface you use in the legacy JS. There is a beta UI in progress, which is not part of this release, but you are welcomed to try it: image

The node def errors you see in the console do not block the normal functionality of the other frontend code. So you don't need to disable any node pack.

huchenlei avatar Aug 03 '24 20:08 huchenlei

@comfyanonymous @huchenlei the main feature I'm looking for is subgraphs. i.e. the ability to hide parts of the graph in subcomponents (or even have workflows themselves be subgraphs) so that we can compose things without creating monstrosities. @space-nuko @rsamf have both worked on their own versions of this , but with this rewrite will we get an officially supported version of this? thanks!

ofersadgat avatar Aug 05 '24 00:08 ofersadgat

@comfyanonymous @huchenlei the main feature I'm looking for is subgraphs. i.e. the ability to hide parts of the graph in subcomponents (or even have workflows themselves be subgraphs) so that we can compose things without creating monstrosities. @space-nuko @rsamf have both worked on their own versions of this , but with this rewrite will we get an officially supported version of this? thanks!

While it's not happening immediately, we are developing a roadmap for frontend improvements through various discussions.

ltdrdata avatar Aug 05 '24 15:08 ltdrdata

Is the new frontend still noodle junction or is it actually made for regular people now?

EDIT : Never mind just tried it and noticed it's still made without regular users in mind.

The limitations of the current vanilla framework are hindering the dev's ability to enhance user friendliness. Building a robust frontend is challenging when the underlying foundation is not optimal.

The new frontend aims to address these issues, among other enhancements. A recent improvement in regards to user friendliness is the addition of tooltips that appear when hovering over nodes.

While these changes take time, recent commits that the developers have made indicate they are working at a very fast pace.

hdworkstation103 avatar Aug 06 '24 14:08 hdworkstation103

Love the new UI! In addition, can the menu bar on the left be made left and right selectable?

amimi818 avatar Aug 07 '24 02:08 amimi818

I like the new UI Direction, but with over 1000 custom nodes and ZOD schema to validate the types, I see a lot of problems coming up for people. If one of the nodes works against the ZOD scheme, the workflow will no longer work. The majority of users will not have any dev experience and will struggle with debugging.

gisu avatar Aug 07 '24 03:08 gisu

Any plans on building a custom text area that doesn't use the html one? In order to avoid that ugly thing where the textareas' z-index takes precedence over anything else on the canvas.

dchatel avatar Aug 07 '24 04:08 dchatel

Awesome. Just wondering if you will/already are implementing a new font or the ability for the end user to select a font.

Many thanks!

siliconecomputervision avatar Aug 07 '24 14:08 siliconecomputervision

Haw can we access to manager?

davoodice avatar Aug 08 '24 13:08 davoodice

Haw can we access to manager?

image

Manager supports New UI, already.

ltdrdata avatar Aug 08 '24 13:08 ltdrdata

I like the new UI Direction, but with over 1000 custom nodes and ZOD schema to validate the types, I see a lot of problems coming up for people. If one of the nodes works against the ZOD scheme, the workflow will no longer work. The majority of users will not have any dev experience and will struggle with debugging.

The node def validation only drop the nodes with invalid defs. It should not block you using rest of nodes. We have tested most popular node packs and submitting fixing PRs to their repos to fix a few invalid defs. Please make sure your custom nodes are updated to include these fixing PRs.

huchenlei avatar Aug 08 '24 14:08 huchenlei

Haw can we access to manager?

image

Manager supports New UI, already.

image ] I cant see that

davoodice avatar Aug 08 '24 14:08 davoodice

Haw can we access to manager?

image Manager supports New UI, already.

image ] I cant see that

You probably need to update your ComfyUI manager.

huchenlei avatar Aug 08 '24 14:08 huchenlei

yes. you are right.

davoodice avatar Aug 08 '24 14:08 davoodice

did we lost the search button? (when we drag from an output slot) image image

davoodice avatar Aug 08 '24 14:08 davoodice

did we lost the search button? (when we drag from an output slot)

I can confirm this, the search is missing. Was it removed or just temporarily missing?

CambridgeComputing avatar Aug 08 '24 15:08 CambridgeComputing

image I think this menu should open to above itself.

davoodice avatar Aug 08 '24 16:08 davoodice

Just played for a few hours, and I'm unable to copy nodes and paste them. Right click menu is missing the Paste (Clipspace) option after right clicking on a node and selecting Copy (Clipspace).

CambridgeComputing avatar Aug 08 '24 17:08 CambridgeComputing

did we lost the search button? (when we drag from an output slot)

I can confirm this, the search is missing. Was it removed or just temporarily missing?

Release with shift brings up the searchbox. We might want to make that as default behavior without shift later.

huchenlei avatar Aug 08 '24 20:08 huchenlei