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, GIFs, audio, and 3D models 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!

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 and no manual refresh needed!
• Video and GIF Support: Seamlessly displays and plays .mp4, .webm videos and .gif animations alongside your generated images.
• 3D Model Support (v2.7.0): View .obj, .glb, .gltf, .fbx, .stl, .usd, .usdz 3D model files directly in the gallery with auto-generated thumbnails and an interactive 3D viewer.
• 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.
• Batch Delete (v2.3.0): Select multiple images (or entire folders) by holding Ctrl (or Cmd on Mac) and clicking, then click the "Delete Selected" button in the header to delete all selected images at once, with confirmation and progress feedback.
• Select Entire Folder (v2.3.0): Ctrl/Cmd+Click a folder in the sidebar to select or deselect all images in that folder for batch operations (download/delete). Visual highlight indicates full-folder selection.
• Improved Batch Download (v2.3.0): Download all selected images (including from multiple folders) as a ZIP file.
  • ⚠️ Browser Limitation: Batch download is performed client-side using JavaScript. Downloading very large folders or thousands of images may be limited by your browser's memory and performance. For best results, select a reasonable number of images at a time.
• 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.
  • Expand All Folders (v2.3.1): Choose whether the folder sidebar tree is fully expanded or collapsed by default, for easier navigation of large folder structures.
• 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).

New Features in this update

• 3D Model Support: View .obj, .glb, .gltf, .fbx, .stl, .usd, .usdz files directly in the gallery with auto-generated thumbnails and an interactive 3D viewer (orbit, zoom, pan).
• Image/Video Thumb Fit settings: New settings to control whether image and video thumbnails in the grid are constrained by width or height. Useful for portrait vs. landscape outputs.
• Subfolder path fix: Relative paths like ./video or video now work correctly for live monitoring, not just for scanning.
• Improved file scanning: Uses os.scandir for better performance on large output directories.
• Batch delete improvements: Better error handling and selection clearing after batch deletes.
• Audio support: .wav, .mp3, .m4a, .flac files are now detected and shown in the gallery with a generic thumbnail and an inline audio player.
• Persistent settings: Gallery settings are now saved to user_settings.json on the server and loaded automatically on startup.
• Configurable file extensions: You can configure which file extensions the gallery scans via the settings panel (comma-separated list).
• Non-blocking startup scan: The initial folder scan now runs in a background thread to avoid freezing ComfyUI on startup when scanning large collections.

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.

Global Logging and Observer Control (v2.4.0+)

The backend now support