ComfyUI_webapp

This ComfyUI custom nodes library enables the definition of web app interfaces directly within your ComfyUI workflows. The definition must be converted by a web app framework to create the actual web app.

Overview

The ComfyUI WebApp Integration provides a straightforward way to define web apps by adding specialized nodes to your workflows. These nodes allow you to:

• Define user-configurable inputs for your workflow
• Provide guidance to end-users through tooltips and descriptions
• Connect directly to corresponding workflow nodes.

The resulting web application consists of:

• Workflow API export containing the web app definition and the actual workflow it unlocks
• A web app framework integration to convert the definition into an app
• configurations for the app framework and the ComfyUI server it must connect to.

When running the workflow, the application puts the selected values in the ComfyUI workflow API, and sends the prompt to the ComfyUI server for execution.

If you want more control over the resulting app, consider building it directly in your prefered web app framework.

For an example of a ComfyUI WebApp API integration, please refer to the Simian WebApps integration.

Recommended Workflow organization

To reduce visual clutter, we recommend organizing the WebApp API nodes (and steps in your workflow) in sub-graphs*. Connect the nodes' outputs with the output slots of the sub-graph and connect those with your workflow. Connect the input widgets to the inputs of the sub-graph, allowing the workflow to be directly run from the ComfyUI server.

The example workflow in the library shows this setup.

* Note that sub-graphs are unpacked in workflow API exports.

Goals

• Leverage existing skills: Build on your existing ComfyUI workflow creation skills by adding WebApp nodes to define user-configurable parameters.

• One integrated source: Keep the web app definition within your workflow graph, maintaining familiarity with your workflow structure.

• Front-end flexibility: Use a generic definition format that allows switching between different web app frameworks without major changes.

• Focus on content: Define what should be available in the web application, not how it should be presented. Implementation details should be handled by the web framework's look and feel configuration.

• A single export: Use the Workflow API export to define the app and its functionality, requiring only one file to be exported and shared.

• List processing: Take advantage of ComfyUI's list processing capabilities, where nodes operate on all items in a list, as all WebApp node outputs are lists.

Organizing the app

When you have more than a couple of inputs to add to your app, you may want to add some structure.

Grouping nodes

Grouping nodes group the connected nodes. Depending on the selected mode, this could be tabs, columns, and (collapsible) sections.

All nodes can be connected via the Parent input slot to a Grouping node. Nodes without a parent are added to the root of the app.

Setting a Grouping node to Repeating means connected nodes should have the same number of values. This may be achieved in the app with a table.

Node ordering

The order in which nodes with the same parent are added to the app is controlled by the following node properties:

• The order number. Nodes with lower order numbers are added first.
• The title. Nodes with the same order number are added alphabetically by their title.
• The workflow id. Lastly, a node with a lower workflow id is added before another node with the same order number and title.

Note that the interpret_json.py function described below implements this sorting.

Features

WebApp API Nodes

The library provides WebApp API definition nodes from webapp_api.py:

• Create nodes for numeric, text, boolean, selection, image and mask inputs, and grouping nodes to guide the layout.
• The nodes guide the user by restricting values, adding tooltips and descriptions, and grouping inputs.
• When run from the server, the nodes pass through connected inputs as-is.
• When run from an app, values are put in the workflow prompt as a stringified JSON list with the values. For instance, two image widths would be sent as "[800, 1024]". The WebApp node unpacks them to a list of integers and the workflow loops over the values.

Helper Nodes

Additional utility nodes from extra_nodes.py include:

• EnsureImage4D: Image inputs missing a dimension are output as an expected 4D Pytorch tensor.
• RandomNumber: Creates a random float and int number within the specified range. When any input is a list, you get a list of random numbers of the same length.
• CombineLists: Merges multiple input lists into one or more output lists based on the selected method.

Workflow Processing - [on Github]

The interpret_json.py file includes a helper function process_workflow_api that:

• Reads the WebApp API nodes from the workflow API file
• Creates a dictionary with node group identifiers as keys, and lists of child node definitions. Nodes without a parent are put in the 'root' list.
• Sorts the lists of child nodes based on their 'order', 'title', and 'id'.

Example - [on Github]

The basic_webapp_api_example.py script demonstrates:

• a workflow API DemoImageInputNodes.json that pastes a masked image onto a background image.
• The workflow is executed on localhost by base64 encoding three images and one mask (not included!). Two background images are combined in one JSON list to ensure the masked image is pasted on both.

To run the example:

• Add two background images, and name them "ComfyUI_back1.png" and "ComfyUI_back2.png",
• an image named "ComfyUI_image.png",
• and a mask named "ComfyUI_mask.png".
• Start your local ComfyUI server and run the script.