MCPcopy Index your code
hub / github.com/PanicTitan/ComfyUI-Gallery

github.com/PanicTitan/ComfyUI-Gallery @main

Chat with this repo
repository ↗ · DeepWiki ↗ · + Follow
177 symbols 406 edges 32 files 21 documented · 12%
What it actually does AI analysis from the code graph — generated when you open this
loading…
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, 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!

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 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: bash 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: bash 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 supports global log suppression and observer type switching via the Gallery UI settings:

  • Disable Logs: Suppresses all backend logs for a cleaner console. Toggle this in the Gallery settings panel. All logs are routed through a global gallery_log() helper and respect the setting at runtime.
  • Observer Type: Switch between native and polling observers for file monitoring. This can help with compatibility on some systems. Change this in the Gallery settings panel.

If you still see logs: - Make sure you are running the latest version and have restarted ComfyUI after updating. - All custom node logs (not from dependencies) should be suppressed when "Disable Logs" is enabled in the Gallery settings.

Changelog

  • v2.7.1:

    • Performance Improvement: Changes in how the folders are parsed to improve gallery loading times for folders with many images.
    • Symlink Deduplication Setting: Added a new setting "Deduplicate Symlinks". When enabled (default), symlinked content is shown only once. When disabled, symlinks are shown everywhere they appear without causing infinite recursion.
    • Fix: Resolved a frontend tree parsing issue on Windows where subfolders wouldn't nest properly due to backslash paths.
    • Fix: Addressed an issue where portrait videos and images would open in a very large size, ignoring the "Fit Height" constraint.
  • v2.7.0:

    • 3D model support: View .obj, .glb, .gltf, .fbx, .stl, .usd, .usdz files with auto-generated thumbnails and interactive 3D viewer.
    • New thumb fit settings: Control whether image and video thumbnails are constrained by width or height (imageThumbFit, videoThumbFit).
    • Fix: Relative subfolder paths (e.g., ./video, video) now correctly resolve for both scanning and live file monitoring (Issue #37).
    • Fix: Video thumbnails in the grid no longer appear overly zoomed (Issue #36) — videos default to fitting by height.
    • Improved file scanning performance using os.scandir instead of os.listdir.
    • Improved batch delete: Better error handling, selection clearing after deletion, and success/failure feedback.
    • Improved raw metadata modal: Prevents accidental drag/swipe interactions.
    • Audio cards now display a large icon and inline player.
    • Static file serving always serves from base output directory for correct subfolder URL resolution.
  • v2.6.0:

    • Audio support: .wav, .mp3, .m4a, .flac files are detected and shown in the gallery with a generic thumbnail, inline audio player.
    • Persistent settings: Gallery settings are saved to user_settings.json on the server and automatically loaded on startup (GET/POST /Gallery/settings).
    • Configurable file extensions: Specify which file extensions the gallery scans via the settings panel (comma-separated list).
    • Non-blocking startup scan: The initial folder scan runs in a background thread to avoid freezing ComfyUI on startup when scanning large collections.
    • Fix: Resolved preview-type persistence bug where images could open with the media renderer after viewing video.
    • Misc: Settings UI and server-side handling improved for more robust defaults and safer merging of saved settings.
  • 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 v

Extension points exported contracts — how you extend this code

ModelThumbnailContextType (Interface)
(no doc)
web/src/GlobalModelRenderer.tsx
SettingsState (Interface)
(no doc)
web/src/GalleryContext.tsx
GalleryContextType (Interface)
(no doc)
web/src/GalleryContext.tsx
TreeDataNode (Interface)
(no doc)
web/src/GallerySidebar.tsx
FileInfo (Interface)
(no doc)
web/src/types.ts

Core symbols most depended-on inside this repo

gallery_log
called by 32
gallery_config.py
isPlainPromptString
called by 18
web/src/metadata-parser/heuristicMetadataParser.ts
isNegativePrompt
called by 12
web/src/metadata-parser/validator.ts
useGalleryContext
called by 9
web/src/GalleryContext.tsx
isPositivePrompt
called by 9
web/src/metadata-parser/validator.ts
extractParametersFromPromptObject
called by 8
web/src/metadata-parser/promptMetadataParser.ts
findSourcePromptNode
called by 6
web/src/metadata-parser/workflowMetadataParser.ts
finish
called by 4
web/src/main.tsx

Shape

Function 113
Method 35
Class 11
Interface 10
Route 8

Languages

TypeScript74%
Python26%

Modules by API surface

web/src/metadata-parser/promptMetadataParser.ts30 symbols
web/src/metadata-parser/workflowMetadataParser.ts23 symbols
server.py22 symbols
folder_monitor.py13 symbols
web/src/metadata-parser/metadataParser.ts10 symbols
web/src/metadata-parser/heuristicMetadataParser.ts7 symbols
web/src/main.tsx7 symbols
web/src/GalleryContext.tsx7 symbols
web/src/types.ts6 symbols
web/src/GallerySidebar.tsx6 symbols
web/src/metadata-parser/validator.ts5 symbols
web/src/ImageCard.tsx5 symbols

For agents

$ claude mcp add ComfyUI-Gallery \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact