Nodes/Comfyui-ImageAB-Compare/图形比比看--ImageABCompareSee
ComfyUI Node

图形比比看--ImageABCompareSee

Slide between two images without blind guessing — a real-time A/B compare node

By shmbatom·Created 8 months ago·Updated 8 months ago· 1
图形比比看--ImageABCompareSee
  • ImageA
  • ImageB
  • Image_output
split_directionvertical
split_ratio_when_output0.50

If you've ever stared at two near-identical renders and tried to remember which one had the better hands, this is the node for you. ImageABCompare (display name "图形比比看--ImageABCompareSee") pastes ImageA and ImageB into one preview and lets you drag a split line across them in real time. Left side is one image, right side is the other - move the mouse, the boundary follows your cursor, and suddenly the small differences (skin texture, a changed background, a botched finger) jump out instead of hiding behind your working memory. It's the slide-to-compare trick you already know from rgthree's Image Comparer, packaged as a standalone node with a couple of extra moves.

How it works

Most "comparison" nodes in ComfyUI render one static side-by-side image and call it done. This one is different: it's a two-part machine. The Python side (nodes.py) takes your two IMAGE tensors, converts them to PIL, resizes ImageB to match ImageA's dimensions (LANCZOS, so no dimension-mismatch errors), and saves both to ComfyUI's temp directory. Then it hands the filenames to a custom frontend widget (js/compare_imageab_see.js).

That widget is where the magic lives. It loads both images onto a canvas and draws ImageA clipped to one side of a split line, ImageB on the other. Hover your mouse over the preview and it recomputes the ratio from your cursor position on every move - no re-run, no queue, just instant redraw. The slider and the mouse are bidirectionally linked: drag the slider, the line moves; move the mouse, the slider snaps to match. When you're happy, the backend bakes a proper export with a red 3px split line drawn at your chosen ratio. That last part is worth knowing: the exported image has the split line baked in, so don't ship it to a client without cropping.

Inputs and outputs

The inputs that matter:

  • ImageA / ImageB - the two images to compare. Order decides the split, not a winner. ImageA is the size reference; everything is resized to match it.
  • split_direction - vertical (left-right) or horizontal (top-bottom). Flipping it resets the ratio to 0.5, by design.
  • split_ratio_when_output - a 0.0–1.0 slider that controls the split position in the exported file. For interactive preview, just use your mouse.

Output: a single Image_output (IMAGE). Wire it to a Save Image node to write the comparison to ComfyUI/output, or a Preview Image node to eyeball it.

Installing it

Zero dependencies. No requirements.txt, no model files - the node only uses torch, numpy, and PIL, which ComfyUI ships with. That's genuinely rare in the custom-node ecosystem and it means install is painless.

Via ComfyUI Manager: search "Comfyui-ImageAB-Compare" and install. Or manually:

cd ComfyUI/custom_nodes
git clone https://github.com/shmbatom/Comfyui-ImageAB-Compare.git

Restart ComfyUI, then double-click in the editor, search abc, and drop in the "图形比比看--ImageABCompareSee" node. The README's sample girl.png lives in custom_nodes/Comfyui-ImageAB-Compare/images/ if you want a test image.

Gotchas

  • Nodes 2.0 isn't supported yet. The README says "to be adapted" for ComfyUI's Nodes 2.0 frontend, and that's a real risk: the Node 2.0 rollout famously broke JS-widget nodes like rgthree's comparer overnight. If your preview stays blank after the frontend update, this is why - and there may not be a fix yet.
  • The node is new (v1.0.0, January 2026) and has essentially no community footprint. Expect rough edges, and report them via GitHub Issues rather than expecting a quick answer.
  • If images don't appear, re-run the node once after wiring both inputs - the frontend widget loads images after the backend executes, so a stale cache can leave the canvas blank.

It won't replace rgthree if you already live in that pack. But if you just want a tiny, dependency-free A/B slide node - especially one that exports a marked split line - this is a clean choice.

Category🎨 图形比比看--ImageABCompareSee

Inputs (4)

NameTypeDefaultDescription
ImageAIMAGE
ImageBIMAGE
split_directionCOMBOvertical2 options: vertical, horizontal
split_ratio_when_outputFLOAT0.500–1

Outputs (1)

NameTypeDescription
Image_outputIMAGE