ux: add a new sidebar, where we can expose handpicked controls from every node

[tresorama]

Feature Idea

Hi, i want to share a new idea to improve the UX of comfy.

TLDR

add new sidebar to comfy, where we can expose node controls from the node graph, as well as image preview. This way we can layout workflow so that its readable, and have a central location to edit node controls that are crucial for "finetuning the generation"

Similar to the left sidebar of replicate

Problem

A workflow is a node graph.
A node graph, to be readable, should have a layout where:

• nodes are placed from left to right, where left is "start of pipeline" and right is "end of pipeline"
• node placement should convey the flow
• just by zooming out and looking at all node connections you should grasp the implementation of the workflow

This layout technique has the benefit of readability, but has this UX downside:

• the graph become wider, real estate occupied by the graph became usually bigger then the screen we are using -> This means that for us to edit node controls we need to zoom and pan constantly -> THIS IS NOT GOOD UX.

From UX side is important to declare that:

• we don't edit every node controls after the graph setup. Usually only a subset of node controls are edited by us to "finetune the generation". So we care only to a subset of node controls. Other node are untouched after the initial graph setup.
• at current state, to have a section in our workflow where we have all node controls that we use to finetune the generation, we must kill the node graph readability by moving these node to a central location.

What about custom group node 2.0?

Comfy team is currently working on a 2.0 version of custom group nodes to improve UX. It's great and will open a lot of ways to simplify the UX, and can resolve a lot in UX space.

This issue can be seen as an alternative to that, in the sense that shares a similar UX goal, with different implementation.

They can be combined as well in case we have both features (Custom Nodes Group 2.0 + This issue)

Idea

Legend:

• node control: a single parameter of a node (like KSampler -> denoise)
• current top bar: the horizontal top bar of comfy (currently available)
• current left sidebar: the vertical sidebar of comfy (currently available) (Queue, Nodes, Workflows, ... )

The idea is :

• to have a new sidebar (on the left or right), with css position fixed (or alternative for canvas html) , so it's always visible while we zoom/pan.
• the new sidebar can be hidden/revealed with a button, the button location can be:
  • in the current top bar
  • or in the current left sidebar
• the new sidebar will render UI widget the the workflow is exposing
• the workflow author decide which node control to expose by:
  • right click on the node control to open context menu, then Context Menu > Expose Control
  • further investigation is needed here or definig the flow after user click on "Expose Control"

With this in place the UX flow will be:

1. Author create the node graph
2. Author handpick "important to edit" controls
3. Author expose them
4. Author open the sidebar
5. Author use the sidebar to edit the generation and preview result

Side Notes:

• in the new sidebar, author can expose controls
• in the new sidebar, controls can be re-ordered, and also re-labeled
• in the new sidebar, author can expose node controls that doesn't have an input (like "PreviewImage")
• in the new sidebar, author can expose "bypass a node" (rendered as checkbox input)
• in the new sidebar, author can expose "bypass a node group" (rendered as checkbox input)

Useful Resources

• in three js the gold standard UX is to have a floating panel built with datGui where coder expose controls
• an example implementation of the frontend can be similar to replicate playground

Existing Solutions

---

Other

---