https://github.com/PanicTitan/ComfyUI-Gallery
Real-time Output Gallery for ComfyUI with image metadata inspection.
https://github.com/PanicTitan/ComfyUI-Gallery
Last synced: 3 months ago
JSON representation
Real-time Output Gallery for ComfyUI with image metadata inspection.
- Host: GitHub
- URL: https://github.com/PanicTitan/ComfyUI-Gallery
- Owner: PanicTitan
- License: mit
- Created: 2025-03-04T18:27:05.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-04T19:04:53.000Z (3 months ago)
- Last Synced: 2025-03-04T19:32:56.476Z (3 months ago)
- Language: JavaScript
- Size: 7.91 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-comfyui - **ComfyUI-Gallery** - time Output Gallery for ComfyUI with image metadata inspection. (All Workflows Sorted by GitHub Stars)
README
# ComfyUI Gallery
**Effortlessly Browse Your ComfyUI Image Outputs!**
This ComfyUI custom node provides a feature-rich, real-time gallery directly within your ComfyUI interface. View images, videos, and GIFs generated by your workflows, explore metadata, search, sort, and customize the gallery to your liking. No more digging through folders – your media output is instantly accessible and beautifully presented!
> **Visualize your creative output directly in ComfyUI and unlock image metadata at your fingertips!**
## Key Features:
* **Real-time Gallery Updates:** Leveraging `watchdog`, the gallery instantly reflects new images, videos, and GIFs saved to your ComfyUI output folder – no manual refresh needed!
* **Video and GIF Support:** Go beyond images! The gallery now seamlessly displays and plays `.mp4` videos and `.gif` animations alongside your generated images.
* **Comprehensive File Support:** Supports `.png`, `.jpg`, `.jpeg`, `.webp` images, `.mp4` videos, and `.gif` animations.
* **Image Metadata Inspection:** Extracts and displays detailed metadata embedded in your image files (PNG and JPEG), including workflow, prompts, and generation settings (powered by adapted code from [ComfyUI-Crystools](https://github.com/crystian/ComfyUI-Crystools)).
* **Detailed Media Information Window:** Click "Info" on image cards to access a popup with a larger preview and structured metadata. Videos and GIFs open directly in fullscreen for playback.
* **Raw Metadata Viewer:** Dive into the technical details with the "Show Raw Metadata" button, revealing the raw JSON metadata for images.
* **Powerful Search and Sort:** Quickly locate media by filename search and organize your gallery by Newest, Oldest, Name (Ascending), or Name (Descending).
* **Customizable Settings:** Tailor the gallery to your workflow with a dedicated settings panel:
* **Relative Path:** Change this to your ComfyUI output path if no image appear in the gallery.
* **Open Button Box Query:** Specify where the "Open Gallery" button is placed in the ComfyUI interface using a CSS query selector.
* **Open Button Label:** Personalize the text displayed on the "Open Gallery" button.
* **Floating Button Mode:** Enable a draggable, floating "Open Gallery" button for convenient access anywhere on your ComfyUI workspace. Save and restore its position across sessions.
* **Auto Play Videos:** Control whether videos automatically play when opened in fullscreen view.
* **Clean and Intuitive UI:** Seamlessly integrates into ComfyUI with a user-friendly and responsive design.
## Get Started:
**1. Installation:**
* **Using ComfyUI Manager (Recommended):**
* Open ComfyUI Manager within ComfyUI.
* Go to "Install Custom Nodes".
* Search for `ComfyUI-Gallery` and install it.
* **Restart ComfyUI after installation.**
* **Install via Git URL:**
* Navigate to your `ComfyUI/custom_nodes` directory.
* Clone this repository using git:
```bash
git clone https://github.com/PanicTitan/ComfyUI-Gallery.git
```
* **Restart ComfyUI after installation.**
**2. Install Python Dependencies:**
* **Using ComfyUI Manager (Recommended):** After installing the node, ComfyUI Manager might prompt you to install missing dependencies. Click "Install Missing" to automatically install required Python packages.
* **Manual Installation:** If you installed manually via Git URL, you can install dependencies using pip:
```bash
cd ComfyUI/custom_nodes/ComfyUI-Gallery
pip install -r requirements.txt
```
**3. Using the Gallery Node:**
* **No Node Required!** The `GalleryNode` is no longer needed. The gallery is now accessed entirely through the "Open Gallery" button in your ComfyUI interface.
* **Open Gallery:** Click the "Open Gallery" button (label and location customizable in settings) in your ComfyUI menu to launch the gallery popup.
* **Browse, Search, Sort:** Navigate folders in the left panel, use the search bar to filter files, and sort images/media using the sort buttons in the header.
* **View Media and Metadata:** Click on image cards to view larger previews and metadata. Click on video/GIF cards to view them in fullscreen playback.
* **Access Settings:** Click the "Settings" button in the gallery popup header to open the settings panel and customize the gallery.
## Changelog
* **Real-time Updates with Watchdog:** Replaced polling-based monitoring with efficient, event-driven file system watching using `watchdog` for instant updates.
* **Video and GIF Support:** Added support for displaying and playing `.mp4` videos and `.gif` animations in the gallery.
* **No More Gallery Node:** Removed the `GalleryNode` for simplified usage. The gallery is now purely UI-based, accessed via the "Open Gallery" button.
* **Settings Panel:** Introduced a comprehensive settings panel accessible from the gallery popup, allowing customization of:
* **Relative Path:** Configurable output folder path.
* **Open Button Box Query:** Customizable CSS selector for the "Open Gallery" button placement.
* **Open Button Label:** Customizable text for the "Open Gallery" button.
* **Floating Button Mode:** Draggable, floating "Open Gallery" button with position persistence.
* **Auto Play Videos:** Option to enable/disable autoplay for videos in fullscreen view.
* **Improved Code Structure:** Refactored and split JavaScript and Python code into multiple files for better organization and maintainability.
* **Enhanced Floating Button:** Floating button now features a draggable handle, initial center positioning, viewport boundary adherence, and position saving/restoring across browser reloads.
## Credits and Inspiration:
* **ComfyUI:** [https://github.com/comfyanonymous/ComfyUI](https://github.com/comfyanonymous/ComfyUI) - The foundation and inspiration for this custom node.
* **ComfyUI-Crystools Metadata Extraction:** [https://github.com/crystian/ComfyUI-Crystools](https://github.com/crystian/ComfyUI-Crystools) - Code and logic adapted from Crystools for robust image metadata extraction.
* **aiohttp:** [https://github.com/aio-libs/aiohttp](https://github.com/aio-libs/aiohttp) - Used for the asynchronous web server component.
* **Pillow (PIL):** [https://python-pillow.org/](https://python-pillow.org/) - For image processing and metadata handling.
* **ComfyUI Manager:** [https://github.com/ltdrdata/ComfyUI-Manager](https://github.com/ltdrdata/ComfyUI-Manager) - For streamlined installation and dependency management.
**Enjoy using the ComfyUI Gallery Output Viewer Node! Contributions, bug reports, and feature requests are welcome!**
---
*README.md Generated By AI Assistant ✨*