Nodes Browser

ComfyDeploy: How ComfyUI Browser works in ComfyUI?

What is ComfyUI Browser?

This is an image/video/workflow browser and manager for ComfyUI. You could add image/video/workflow to collections and load it to ComfyUI. You will be able to use your collections everywhere.

How to install it in ComfyDeploy?

Head over to the machine page

  1. Click on the "Create a new machine" button
  2. Select the Edit build steps
  3. Add a new step -> Custom Node
  4. Search for ComfyUI Browser and select it
  5. Close the build step dialig and then click on the "Save" button to rebuild the machine

ComfyUI Browser

中文说明

This is an image/video/workflow browser and manager for ComfyUI. You can sync your workflows to a remote Git repository and use them everywhere.

Welcome to submit your workflow source by submitting an issue. Let's build the workflows together.

https://github.com/talesofai/comfyui-browser/assets/828837/803ce57a-1cf2-4e1c-be17-0efab401ef54

Features

  • Browse and manage your images/videos/workflows in the output folder.
  • Add your workflows to the 'Saves' so that you can switch and manage them more easily.
  • Sync your 'Saves' anywhere by Git.
  • Subscribe workflow sources by Git and load them more easily.
  • Search your workflow by keywords.
  • Some useful custom nodes like xyz_plot, inputs_select.

Custom Nodes

Select Inputs

  • Select any inputs of the current graph.
<img width="256" alt="image" src="https://github.com/talesofai/comfyui-browser/assets/828837/8e505f62-f709-426a-8a0a-fca291784b08">

XYZ Plot

  • Simple XYZ Plot by selecting inputs and filling in the values.
<img width="512" alt="image" src="https://github.com/talesofai/comfyui-browser/assets/828837/23ce6a4d-3311-4058-9b46-ddb50d07e22a"> <img width="768" alt="image" src="https://github.com/talesofai/comfyui-browser/assets/828837/d46461ac-3fb3-4037-b1be-048a7ae5e89a">

Preview

Outputs

<img width="1212" alt="Outputs" src="https://github.com/talesofai/comfyui-browser/assets/1184998/49936e2f-9682-4df8-af8e-6e1653e78ca1">

Saves

<img width="1207" alt="Saves" src="https://github.com/talesofai/comfyui-browser/assets/1184998/de3327e3-643e-4ae4-9e31-86df6a0353e0">

Sources

<img width="1504" alt="Sources" src="https://github.com/talesofai/comfyui-browser/assets/1184998/07671822-c4d1-4327-bd87-6b1c7e85a354"> <img width="1212" alt="Recommended Sources" src="https://github.com/talesofai/comfyui-browser/assets/1184998/f37852b9-1030-4044-abf3-12bd8158c446">

Models

<img width="1510" alt="Models" src="https://github.com/talesofai/comfyui-browser/assets/1184998/4f36378e-05e0-49dc-a5b2-07d24a8b96bc">

Side Bar View

<img width="1506" alt="SideBar" src="https://github.com/talesofai/comfyui-browser/assets/1184998/746a031e-88b0-4ccf-8e2d-e448c001f319">

Installation

ComfyUI Manager

Install ComfyUI Manager, search comfyui-browser in Install Custom Node and install it.

Configuring

In your comfyui-browser directory, you can add a config.json to override the directories that comfyui-browser uses. Ex:

{
  "collections": "/var/lib/comfyui/comfyui-browser-collections",
  "download_logs": "/var/lib/comfyui/comfyui-browser-download-logs",
  "outputs": "/var/lib/comfyui/outputs",
  "sources": "/var/lib/comfyui/comfyui-browser-sources"
}

The default configuration values are:

{
  "collections": "[comfyui-browser]/collections",
  "download_logs": "[comfyui-browser]/download-logs",
  "outputs": "[comfyui]/outputs",
  "sources": "[comfyui-browser]/sources"
}

Where [comfyui-browser] is the automatically determined path of your comfyui-browser installation, and [comfyui] is the automatically determined path of your comfyui server. Notably, the outputs directory defaults to the --output-directory argument to comfyui itself, or the default path that comfyui wishes to use for the --output-directory argument.

Manually

Clone this repo into the custom_nodes folder and restart the ComfyUI.

cd custom_nodes && git clone https://github.com/tzwm/comfyui-browser.git

Notes

  • Your 'Saves' are stored in the collections configuration value. See <a href="#Configuring">Configuring</a> for its default, and how to set the path to something different.
  • Press 'B' to toggle the Browser dialog in the ComfyUI.

Development

  • Prerequisite

  • Framework

  • Project Structure

├── __init__.py  (Backend Server)
├── web          (Frontend code loaded by ComfyUI)
    ├── build    (Built in Svelte)
    └── index.js (Frontend that interact with ComfyUI)
├── svelte       (Frontend in the Modal as a iframe, written in Svelte)
  • Build and Run

    • Copy or link comfyui-browser to ComfyUI/custom_nodes/
    • Start backend by cd ComfyUI && python main.py --enable-cors-header
    • Start frontend by cd ComfyUI/custom_nodes/comfyui-browser/svelte && npm i && npm run dev
    • Open and debug by http://localhost:5173/?comfyUrl=http://localhost:8188
      • It will use localhost:8188 as ComfyUI server
      • localhost:5173 is a Vite dev server
  • Notes

    • Please try to test on Windows, because I only have Linux/macOS

TODO

  • ✅ Sync collections to remote git repository
  • ✅ Add external git repository to local collections
  • ⬜ Search workflow by node name and model name

ChangeLog

To see ChangeLog.

Credits