Thanks for this repository!

[Dnak-jb]

Very helpful nodes! Just wanted to give my thanks for all the work people have put into this.

The only thing that was missing that I wanted was a "quad" image comparer, so i could use both axis's to compare 4 images at once on comfyui. Alas, I am not a programmer nor could I find a node that fit this description. So I fed rgthree's duel image comparison files to Gemini and told him to hop to it. Within about 10 minutes of back and forth fixing various issues I finally had my own custom image comparison node based on your code using your back end work!

I hope that's allowed 😂

Just for reference, this is what the LLM spat out for me down below, considering my lack of experience i have no idea if they opened up a big ol backdoor to my PC or not!

import { app } from "../../scripts/app.js";
import { api } from "../../scripts/api.js";
import { RgthreeBaseServerNode } from "./base_node.js";
import { NodeTypesString } from "./constants.js";
import { RgthreeBaseWidget } from "./utils_widgets.js";
import { measureText } from "./utils_canvas.js";

function imageDataToUrl(data) {
    return api.apiURL(`/view?filename=${encodeURIComponent(data.filename)}&type=${data.type}&subfolder=${data.subfolder}${app.getPreviewFormatParam()}${app.getRandParam()}`);
}

export class RgthreeImageComparerQuad extends RgthreeBaseServerNode {
    constructor(title = "Image Comparer (4-Way)") {
        super(title);
        this.imgs = []; // Track loaded images
        this.pointerOverPos = [0, 0];
        this.isPointerOver = false;
        this.serialize_widgets = true;
    }

    onExecuted(output) {
        super.onExecuted?.(output);
        const keys = [['tl_images', 'TL'], ['tr_images', 'TR'], ['bl_images', 'BL'], ['br_images', 'BR']];
        const imagesToChoose = [];
        
        for (const [key, prefix] of keys) {
            const imgs = output[key] || [];
            for (const [i, d] of imgs.entries()) {
                imagesToChoose.push({
                    name: imgs.length > 1 ? `${prefix}${i + 1}` : prefix,
                    group: prefix,
                    selected: i === 0,
                    url: imageDataToUrl(d),
                });
            }
        }
        this.canvasWidget.value = { images: imagesToChoose };
    }

    onNodeCreated() {
        this.canvasWidget = this.addCustomWidget(new QuadComparerWidget("rgthree_comparer_quad", this));
        this.setSize([400, 420]);
    }

    onMouseMove(event, pos, canvas) {
        this.pointerOverPos = [...pos];
        this.setDirtyCanvas(true, false);
    }

    onMouseEnter() { this.isPointerOver = true; }
    onMouseLeave() { this.isPointerOver = false; }

    static setUp(comfyClass, nodeData) {
        RgthreeBaseServerNode.registerForOverride(comfyClass, nodeData, RgthreeImageComparerQuad);
    }
}

class QuadComparerWidget extends RgthreeBaseWidget {
    constructor(name, node) {
        super(name);
        this.type = "custom";
        this.node = node;
        this.hitAreas = {};
        this._value = { images: [] };
        this.selected = { TL: null, TR: null, BL: null, BR: null };
    }

    set value(v) {
        this._value = v || { images: [] };
        ['TL', 'TR', 'BL', 'BR'].forEach(g => {
            const groupImgs = this._value.images.filter(i => i.group === g);
            if (groupImgs.length && !groupImgs.some(i => i.selected)) groupImgs[0].selected = true;
            this.selected[g] = groupImgs.find(i => i.selected) || null;
        });
        this.refreshImages();
    }

    get value() { return this._value; }

    refreshImages() {
        Object.values(this.selected).forEach(sel => {
            if (sel && !sel.img) {
                sel.img = new Image();
                sel.img.src = sel.url;
                sel.img.onload = () => this.node.setDirtyCanvas(true);
            }
        });
    }

    onSelectionDown(event, pos, node, bounds) {
        const clickedImg = bounds.data;
        this._value.images.filter(i => i.group === clickedImg.group).forEach(i => i.selected = false);
        clickedImg.selected = true;
        this.selected[clickedImg.group] = clickedImg;
        this.refreshImages();
        return true; 
    }

    draw(ctx, node, width, y) {
        this.hitAreas = {};
        const [nodeW, nodeH] = node.size;

        // --- DRAW BATCH BUTTONS (Matching original style) ---
        if (this._value.images.length > 4) {
            ctx.textAlign = "left";
            ctx.textBaseline = "top";
            ctx.font = `14px Arial`;
            const spacing = 5;
            let totalX = 0;
            const drawData = [];

            // Calculate total width for centering
            for (const img of this._value.images) {
                const txtW = measureText(ctx, img.name);
                drawData.push({ img, text: img.name, width: txtW });
                totalX += txtW + spacing;
            }

            let x = (nodeW - (totalX - spacing)) / 2;
            for (const d of drawData) {
                ctx.fillStyle = d.img.selected ? "rgba(180, 180, 180, 1)" : "rgba(180, 180, 180, 0.5)";
                ctx.fillText(d.text, x, y);
                this.hitAreas[d.text] = {
                    bounds: [x, y, d.width, 14],
                    data: d.img,
                    onDown: this.onSelectionDown.bind(this),
                };
                x += d.width + spacing;
            }
            y += 20; 
        }

        const widgetStartY = y;
        const [rawMouseX, rawMouseY] = node.pointerOverPos;
        const mouseX = Math.max(0, Math.min(rawMouseX, nodeW));
        const mouseY = Math.max(widgetStartY, Math.min(rawMouseY, nodeH));

        // Draw the quadrants
        this.drawImg(ctx, this.selected.TL?.img, 0, widgetStartY, mouseX, mouseY - widgetStartY, widgetStartY);
        this.drawImg(ctx, this.selected.TR?.img, mouseX, widgetStartY, nodeW - mouseX, mouseY - widgetStartY, widgetStartY);
        this.drawImg(ctx, this.selected.BL?.img, 0, mouseY, mouseX, nodeH - mouseY, widgetStartY);
        this.drawImg(ctx, this.selected.BR?.img, mouseX, mouseY, nodeW - mouseX, nodeH - mouseY, widgetStartY);

        // Draw crosshair
        if (node.isPointerOver) {
            ctx.beginPath();
            ctx.strokeStyle = "rgba(255,255,255,0.6)";
            ctx.lineWidth = 1;
            ctx.moveTo(mouseX, widgetStartY); ctx.lineTo(mouseX, nodeH);
            ctx.moveTo(0, mouseY); ctx.lineTo(nodeW, mouseY);
            ctx.stroke();
        }
    }

    drawImg(ctx, img, clipX, clipY, clipW, clipH, widgetStartY) {
        if (!img || !img.naturalWidth || clipW <= 0 || clipH <= 0) return;
        const [nodeW, nodeH] = this.node.size;
        const containerW = nodeW;
        const containerH = nodeH - widgetStartY;

        ctx.save();
        ctx.beginPath();
        ctx.rect(clipX, clipY, clipW, clipH);
        ctx.clip();

        const imgAspect = img.naturalWidth / img.naturalHeight;
        const containerAspect = containerW / containerH;
        let dW, dH;
        if (imgAspect > containerAspect) {
            dW = containerW; dH = containerW / imgAspect;
        } else {
            dH = containerH; dW = containerH * imgAspect;
        }

        const dX = (containerW - dW) / 2;
        const dY = widgetStartY + (containerH - dH) / 2;
        ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, dX, dY, dW, dH);
        ctx.restore();
    }
}

app.registerExtension({
    name: "rgthree.ImageComparerQuad",
    async beforeRegisterNodeDef(nodeType, nodeData) {
        if (nodeData.name === "Image Comparer 4-Way (rgthree)") {
            RgthreeImageComparerQuad.setUp(nodeType, nodeData);
        }
    },
});

from nodes import PreviewImage
from .constants import get_category, get_name

class RgthreeImageComparerQuad(PreviewImage):
    NAME = get_name('Image Comparer 4-Way')
    CATEGORY = get_category()
    FUNCTION = "compare_images"
    DESCRIPTION = "Compares four images using a 2D quadrant hover slider."

    @classmethod
    def INPUT_TYPES(cls):
        return {
            "required": {},
            "optional": {
                "image_tl": ("IMAGE",),
                "image_tr": ("IMAGE",),
                "image_bl": ("IMAGE",),
                "image_br": ("IMAGE",),
            },
            "hidden": {
                "prompt": "PROMPT",
                "extra_pnginfo": "EXTRA_PNGINFO"
            },
        }

    def compare_images(self, image_tl=None, image_tr=None, image_bl=None, image_br=None,
                       filename_prefix="rgthree.compare.quad.", prompt=None, extra_pnginfo=None):
        result = { "ui": { "tl_images":[], "tr_images": [], "bl_images": [], "br_images": [] } }
        inputs = [("tl_images", image_tl), ("tr_images", image_tr), 
                  ("bl_images", image_bl), ("br_images", image_br)]
        for key, img_data in inputs:
            if img_data is not None and len(img_data) > 0:
                saved = self.save_images(img_data, filename_prefix, prompt, extra_pnginfo)
                result['ui'][key] = saved['ui']['images']
        return result

The first block was the JS file "image_comparer_quad.js", the second was the "image_comparer_quad.py"

Thanks again to all those that contribute to great projects like this!