ComfyUI-Gallery - GitLite

KO | EN

gitlite — search

#python #typescript #llm #android #rust #docker #cli #awesome-list #vue #security #mcp #ios #openai #open-source

ComfyUI-Gallery

(★ 111)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- - publish.yml
- - ComfyAppApi.ts
  - Gallery.tsx
  - GalleryContext.tsx
  - GalleryHeader.tsx
  - GalleryImageGrid.tsx
  - GalleryModal.tsx
  - GalleryOpenButton.tsx
  - GallerySettingsModal.tsx
  - GallerySidebar.tsx
  - GlobalModelRenderer.tsx
  - ImageCard.tsx
  - main.tsx
  - metadataParser.ts
  - MetadataView.tsx
  - ModelViewer.tsx
  - types.ts
  - vite-env.d.ts
- eslint.config.js
- package.json
- README.md
- tsconfig.app.json
- tsconfig.json
- tsconfig.node.json
- vite.config.ts
__init__.py
exemple_user_settings.json
folder_monitor.py
folder_scanner.py
gallery_config.py
gallery_node.py
LICENSE
logo.png
metadata_extractor.py
prompt_config.py
pyproject.toml
README.md
requirements.txt
server.py
showcase.gif

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/PanicTitan/ComfyUI-Gallery

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd ComfyUI-Gallery

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

cd web

이 프로젝트의 관련 파일이 하위 폴더 안에 있어서, 먼저 그 폴더로 이동합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

3. Python

쉬움

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Python 3 설치 시 'Add Python to PATH' 옵션을 꼭 체크하세요 (Windows).

pip install -r requirements.txt

requirements.txt 등에 명시된 파이썬 라이브러리를 설치합니다.

✅ 에러 메시지 없이 실행되고 터미널에 안내 문구가 출력되면 정상입니다.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://raw.githubusercontent.com/PanicTitan/ComfyUI-Gallery/main/showcase.gif)

> **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 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:

*   **ComfyUI:** [https://github.com/comfyanonymous/ComfyUI](https://github.com/comfyanonymous/ComfyUI)
*   **ComfyUI-Crystools Metadata Extraction:** [https://github.com/crystian/ComfyUI-Crystools](https://github.com/crystian/ComfyUI-Crystools)
*   **aiohttp:** [https://github.com/aio-libs/aiohttp](https://github.com/aio-libs/aiohttp)
*   **Pillow (PIL):** [https://python-pillow.org/](https://python-pillow.org/)
*   **ComfyUI Manager:** [https://github.com/ltdrdata/ComfyUI-Manager](https://github.com/ltdrdata/ComfyUI-Manager)
*   **Ant Design:** [https://github.com/ant-design/ant-design](https://github.com/ant-design/ant-design)
*   **ahooks:** [https://github.com/alibaba/hooks](https://github.com/alibaba/hooks)
*   **JSZip:** [https://github.com/Stuk/jszip](https://github.com/Stuk/jszip)
*   **FileSaver.js:** [https://github.com/eligrey/FileSaver.js](https://github.com/eligrey/FileSaver.js)
*   **react-json-view:** [https://github.com/microlinkhq/react-json-view](https://github.com/microlinkhq/react-json-view)
*   **React:** [https://github.com/facebook/react](https://github.com/facebook/react)
*   **react-window:** [https://github.com/bvaughn/react-window](https://github.com/bvaughn/react-window)
*   **react-virtualized:** [https://github.com/bvaughn/react-virtualized](https://github.com/bvaughn/react-virtualized)
*   **React Three Fiber:** [https://github.com/pmndrs/react-three-fiber](https://github.com/pmndrs/react-three-fiber)
*   **Three.js:** [https://github.com/mrdoob/three.js](https://github.com/mrdoob/three.js)

**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 ✨*