ComfyUI Extension: ComfyUI-Gallery

Authored by PanicTitan

Created

Updated

25 stars

Real-time Output Gallery for ComfyUI with image metadata inspection.

Custom Nodes (0)

    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, move, and download files. Customize the gallery to your liking. No more digging through folders – your media output is instantly accessible and beautifully presented!

    ComfyUI Gallery Node in Action

    Visualize your creative output directly in ComfyUI, unlock image metadata, and manage your files with ease!

    Key Features:

    • Real-time Gallery Updates: Leveraging ComfyUI's event system, the gallery instantly reflects new images, videos, and GIFs saved to your ComfyUI output folder – no manual refresh needed!
    • Video and GIF Support: Seamlessly displays and plays .mp4, .webm videos and .gif animations alongside your generated images.
    • Image Metadata Inspection: Extracts and displays detailed metadata embedded in your image files (PNG and JPEG).
    • Enhanced Metadata Parser (v1.5.0, further improved in v2.0.0): A robust, customizable, and modular metadata parser provides accurate and flexible extraction of workflow details.
    • Easy Metadata Copy (v1.5.0): Click on any metadata value (e.g., prompt, seed, model) to instantly copy it to your clipboard.
    • Detailed Media Information Window: Click "Info" on image cards to access a popup with a larger preview, structured metadata, and navigation. Videos and GIFs open directly in fullscreen for playback.
    • Image Navigation (v1.5.0, React version in v2.0.0): Easily navigate between images within the info view using previous and next buttons.
    • Raw Metadata Viewer: Dive into the technical details with the "Show Raw Metadata" button, presenting data in an interactive JSON viewer.
    • Powerful Search and Sort: Quickly locate media by filename search and organize your gallery by newest, oldest, or name.
    • Move Files (v1.5.0, React version in v2.0.0): Drag and drop images between folders directly within the gallery to reorganize your output.
    • Delete Files (v1.5.0, React version in v2.0.0): Delete unwanted images directly from the gallery with a confirmation prompt.
    • Download Files (v1.5.0, React version in v2.0.0): Download individual images with a single click from the info view, using the original filename.
    • Batch Download (v2.0.0): Select multiple images by holding Ctrl (or Cmd on Mac) and clicking on them, then click the "Download Selected" button in the header to download all selected images at once as a ZIP file.
    • Asynchronous Image Loading (v1.5.0, significantly enhanced in v2.0.0): Images load asynchronously for a faster gallery startup and smoother browsing experience, utilizing a virtualized grid for performance.
    • Improved UI (v2.0.0): Complete rewrite with React for a modern, high-performance user interface.
    • Customizable Settings: Tailor the gallery with a dedicated settings panel:
      • Relative Path: Change to your ComfyUI output path if no images appear.
      • Open Button Box Query: Specify where the "Open Gallery" button is placed.
      • Open Button Label: Personalize the text on the "Open Gallery" button.
      • Floating Button Mode: Enable a draggable, floating "Open Gallery" button. Save its position across sessions.
      • Auto Play Videos: Control whether videos automatically play.
      • Hide Open Button: Hide/Show the Open Gallery Button.
      • Show Date Divider: Control visibility of date dividers in the grid.
      • Dark/Light Mode Toggle (v2.0.0): Instantly switch between dark and light themes for comfortable viewing, directly from the settings panel.
      • Enable/Disable Ctrl+G Shortcut (v2.1.0): Toggle the keyboard shortcut for opening the gallery (Ctrl+G) on or off from the settings panel.
    • Sidebar (Sider) Toggle (v2.0.0): Collapse or expand the sidebar for a distraction-free or navigational experience.
    • Hover to close button (v1.6.0, React version in v2.0.0): A button appears in the header when dragging an image, allowing you to hover over it to close the gallery (useful for dropping images into your workflow).
    • Hotkeys navigation (v1.7.0, React version in v2.0.0): Simple navigation with ← → arrows and ESC button while viewing images on fullscreen (provided by Ant Design's Image Preview).

    Get Started:

    1. Installation:

    • Using ComfyUI Manager (Recommended):

      • Open ComfyUI Manager.
      • Go to "Install Custom Nodes".
      • Search for ComfyUI-Gallery and install.
      • Restart ComfyUI.

    • Install via Git URL:

      • Navigate to your ComfyUI/custom_nodes directory.
      • Clone this repository: 
        git clone https://github.com/PanicTitan/ComfyUI-Gallery.git
      • Restart ComfyUI.

    2. Install Python Dependencies:

    • Using ComfyUI Manager (Recommended): ComfyUI Manager might prompt you to install missing dependencies. Click "Install Missing".
    • Manual Installation: 
      cd ComfyUI/custom_nodes/ComfyUI-Gallery
pip install -r requirements.txt
      (Note: The React frontend dependencies are built into the JavaScript bundle; requirements.txt is for Python backend dependencies if any are specific to this node beyond core ComfyUI.)

    3. Using the Gallery:

    • Open Gallery: Click the "Open Gallery" button (label and location customizable in settings) in your ComfyUI menu.
    • Browse, Search, Sort: Navigate folders in the sidebar, use the search bar, and sort images/media using the header controls.
    • View Media and Metadata: Click on image cards to view larger previews and metadata. Click on video/GIF cards for fullscreen playback. Click "Info" on an image card to access detailed metadata and management options. Use the navigation buttons (< and >) to browse through images within the info view.
    • Copy Metadata: Click on any metadata value (e.g., prompt, seed) within the info view to copy it to the clipboard.
    • Copy Image to Clipboard: In the image info view, click the copy icon button to copy the image to your clipboard.
    • Move Images: Click and drag an image card and drop it onto a folder in the left-hand navigation panel.
    • Delete Image: Click on "Info" for an image, then click on the "Delete" button in the info view, and confirm the deletion.
    • Download Image: Click on "Info" for an image, and in the image preview, click the "Download" icon button.
    • Batch Download: Hold Ctrl (or Cmd on Mac) and click multiple image cards to select them. Then click the "Download Selected" button in the gallery header to download all selected images as a ZIP file.
    • Access Settings: Click the "Settings" button in the gallery popup header.
    • Toggle Sidebar: Use the sidebar toggle button (◀ or ▶) in the gallery header to collapse or expand the navigation panel.
    • Switch Theme: Open Settings and toggle Dark/Light mode.
    • Raw Metadata View: In the info modal for an image, click "Show Raw Metadata" to inspect the full metadata.

    Changelog

    • v2.1.0:
      • New setting: Enable/Disable Ctrl+G shortcut for opening the gallery, configurable in the settings panel.
    • v2.0.0 (React Rewrite):
      • Complete rewrite with React for a modern, high-performance UI.
      • Asynchronous image loading and instant search, with a virtualized grid for smooth browsing of large collections.
      • Enhanced metadata viewer (with collapsible sections and raw JSON view) and batch file management (batch download as ZIP).
      • Improved drag-and-drop for moving files.
      • Redesigned settings panel with new options like Dark/Light mode.
      • Collapsible sidebar for a more focused view.
      • Ctrl+Click (Cmd+Click on Mac) images to select multiple for batch operations.
      • Numerous bug fixes and optimizations.
    • v1.7.0:
      • Hotkeys navigation: Use ← → arrows and ESC for fullscreen navigation.
    • v1.6.0:
      • Hover to close button for quick workflow actions.
    • v1.5.0 (Major Update):
      • New metadata parser: More customizable, modular, and accurate.
      • Easy metadata copy: Click any metadata value to copy.
      • Move files: Drag and drop images between folders.
      • Delete files: Delete images directly from the gallery.
      • Download files: Download images with their original filenames.
      • Image navigation: Browse images within the info view.
      • Asynchronous image loading: Faster gallery startup.
      • Improved UI: More responsive and user-friendly design.
      • Bug fixes.
    • Previous Versions:
      • Real-time Updates with Watchdog (Python).
      • Video and GIF Support.
      • No More Gallery Node (UI-based access).
      • Settings Panel.
      • Improved Floating Button.

    Credits and Inspiration:

    Enjoy using the ComfyUI Gallery! Contributions, bug reports, and feature requests are welcome!

    <div align="center"> <img src="logo.png" width="300" height="auto" alt="ComfyUI Gallery Viewer Logo"> </div>

    README.md Generated By AI Assistant ✨