CivArchive
    Image Comparer Slider ↔️ (ComfyUI-3R3BOS-Pack) - v1.0.0
    NSFW

    Tired of frantically switching between tabs or awkwardly overlaying images just to spot the differences in your renders?

    The Image Comparer Slider node delivers a smooth, interactive, and ultra-precise comparison slider directly inside your ComfyUI interface. Built for power users who demand absolute control, it lets you inspect upscale quality, evaluate different checkpoints, or scrutinize fine details without ever breaking your workflow.

    🚀 Key Features

    • Real-Time Interactive Comparison: Smoothly slide the divider left and right for a seamless, transparent transition between both renders.

    • Synchronized Zoom & Pan (Absolute Pixel-Peeping): Scroll your mouse wheel to zoom and drag to pan. Both images remain perfectly locked and synchronized, allowing you to track minute variations in grain, sharpness, or artifacts at the exact same pixel coordinates.

    • Native & Fluid UI Integration: Powered by a dedicated front-end implementation (image_comparer_slider.js), the canvas wrapper integrates flawlessly into the ComfyUI graph with zero latency.

    • VRAM Lightweight: Engineered with clean backend logic (image_comparer_slider.py) to ensure it leaves no performance footprint on your heavy generation pipelines.

    📦 Note: This node is included as part of the ComfyUI-3R3BOS-Pack suite. Installing the pack gives you instant access to this comparison tool along with our other workflow optimization utilities.

    🛠️ Installation

    Method 1: Via ComfyUI Manager (Recommended)

    1. Open the ComfyUI Manager.

    2. Click on Custom Nodes Manager.

    3. Search for ComfyUI-3R3BOS-Pack.

    4. Click Install, then restart your ComfyUI instance.

    Method 2: Manual Installation (Git)

    Navigate to your custom_nodes directory and clone the repository:

    Bash

    cd ComfyUI/custom_nodes
    git clone https://github.com/3R3BOS/ComfyUI-3R3BOS-Pack.git
    

    Restart ComfyUI to let the interface register the custom scripts.

    Star the repository to stay updated with the latest features and optimizations!

    💡 Quick Start Guide

    1. Right-click on the workspace -> Add Node -> 3R3BOS -> Image Comparer Slider.

    2. Connect your baseline image to the image_1 input slot.

    3. Connect your modified/upscaled image to the image_2 input slot.

    4. Queue the prompt.

    5. Inspect away: Use your mouse wheel to zoom, left-click and drag to move around, and drag the center bar to compare!

    Description