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.

comfyui_browser_231215_subtitle.mov

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.

XYZ Plot

• Simple XYZ Plot by selecting inputs and filling in the values.

Preview

Outputs

Saves

Sources

Models

Side Bar View

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 Configuring for its default, and how to set the path to something different.
• Press 'B' to toggle the Browser dialog in the ComfyUI.

Development

• Prerequisite

  • Install Node

• Framework

  • Frontend: Svelte
  • Backend: aiohttp(the same as ComfyUI)

• 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

• ComfyUI