fix(sam-picker): real per-mask thumbnails + correct widget position (v1.14.0)

- Python: serialize 3 candidate masks as PNGs to temp dir, ship via ui.mask_thumbs

- JS: load/composite real masks per-thumbnail (was flat-red fillRect on all 3)

- JS: fix doubled offset that pushed picker ~600px below node body

- Remove IS_CHANGED=NaN that force-rerun SAM on every queue

- Visually verified via Playwright screenshot

Author: Code2Collapse

CHANGELOG.md

@@ -2,6 +2,34 @@
 
 All notable changes to ComfyUI-CustomNodePacks are documented here.
 
+## [1.14.0] – 2026-05-04
+
+### Fixed
+
+- **SAM Multi-Mask Picker — render real per-mask thumbnails**: the JS
+  widget previously called an empty `buildMaskThumbnails()` stub and then
+  drew a flat red `fillRect` over all three thumbnails identically, so
+  every candidate looked the same regardless of what SAM produced. The
+  Python node now serializes the three candidate masks as grayscale PNGs
+  to ComfyUI's temp directory (stable input-hash filenames) and ships
+  them on the UI payload as `mask_thumbs`. The JS now loads each PNG via
+  `/view?...&type=temp` into `this.maskImages[i]` and composites the
+  real mask onto each thumbnail using an offscreen canvas with
+  `globalCompositeOperation="source-in"` plus a per-thumb tint.
+- **SAM Multi-Mask Picker — widget no longer renders ~600 px below the
+  node body**: the `addCustomWidget` registration was forwarding
+  `node.pos[0]` and `node.pos[1] + widgetY` into the inner draw/mouse
+  handlers, but LiteGraph already translates the canvas context to the
+  node origin before invoking widget callbacks — the result was a
+  doubled offset that pushed the picker off the bottom of the node.
+  Registration now passes widget-local coordinates (`0, widgetY` for
+  draw; `pos[0], pos[1]` for mouse), so the picker lives inside the
+  node body where it belongs.
+- **SAM Multi-Mask Picker — stop force-rerunning SAM on every queue**:
+  removed `IS_CHANGED → NaN`, which was unconditionally invalidating
+  the cache and re-running SAM on identical inputs. Standard cache
+  semantics now apply.
+
 ## [1.13.1] – 2026-05-04
 
 ### Fixed

js/sam_multi_mask_picker.js

@@ -150,12 +150,34 @@ class SamMultiMaskPickerWidget {
         }
     }
 
-    // ── Build mask overlay thumbnails from all_masks output ──────────
-    buildMaskThumbnails(allMasksData) {
-        // allMasksData would be (3, H, W) tensor data
-        // In practice, JS doesn't have direct tensor access,
-        // so we render a visual approximation on re-execution.
-        // The real mask data is sent to the widget via node output images.
+    // ── Build mask overlay thumbnails from server-rendered PNGs ──────
+    // The Python node renders each of the 3 SAM candidate masks to a PNG in
+    // ComfyUI's temp dir and passes the file infos via the ``ui`` payload.
+    // We download them as <img> elements once (browser caches by filename)
+    // and store them in maskImages[] so draw() can composite each thumbnail.
+    receiveMaskThumbnails(thumbInfos) {
+        if (!Array.isArray(thumbInfos)) return;
+        for (let i = 0; i < Math.min(3, thumbInfos.length); i++) {
+            const info = thumbInfos[i];
+            if (!info || !info.filename) {
+                this.maskImages[i] = null;
+                continue;
+            }
+            const url = `/view?filename=${encodeURIComponent(info.filename)}`
+                      + `&subfolder=${encodeURIComponent(info.subfolder || "")}`
+                      + `&type=${encodeURIComponent(info.type || "temp")}`
+                      + `&t=${Date.now()}`;
+            const img = new Image();
+            img.onload = () => {
+                this.maskImages[i] = img;
+                this._needsRedraw = true;
+                this.node.setDirtyCanvas(true, true);
+            };
+            img.onerror = () => {
+                this.maskImages[i] = null;
+            };
+            img.src = url;
+        }
     }
 
     // ── Draw the picker widget ───────────────────────────────────────
@@ -224,10 +246,33 @@ class SamMultiMaskPickerWidget {
                 }
                 ctx.drawImage(this.sourceImage, sx, sy, sw, sh, tx, ty, thumbW, thumbH);
 
-                // Overlay: semi-transparent colored tint for "mask area"
-                const overlayAlpha = 0.5;
-                ctx.fillStyle = `rgba(${theme.overlayColor[0]}, ${theme.overlayColor[1]}, ${theme.overlayColor[2]}, ${overlayAlpha})`;
-                ctx.fillRect(tx, ty, thumbW, thumbH);
+                // Real mask overlay if Python sent the per-mask PNG. The PNG is
+                // a grayscale L-mode image where pixel value == mask probability.
+                // We composite by drawing the mask in a colored tint using
+                // ``destination-in``-style masking via an offscreen canvas.
+                const maskImg = this.maskImages[i];
+                if (maskImg && maskImg.complete && maskImg.naturalWidth > 0) {
+                    // Match the same letterboxed crop the source image used,
+                    // so alignment matches frame-for-frame.
+                    const off = document.createElement("canvas");
+                    off.width = thumbW;
+                    off.height = thumbH;
+                    const octx = off.getContext("2d");
+                    // Draw the grayscale mask scaled to thumb size with the
+                    // same source crop as the base image (mask is full-res).
+                    octx.drawImage(maskImg, sx, sy, sw, sh, 0, 0, thumbW, thumbH);
+                    // Tint: replace the RGB with the overlay color, keep mask
+                    // luminance as alpha multiplier.
+                    octx.globalCompositeOperation = "source-in";
+                    octx.fillStyle = `rgba(${theme.overlayColor[0]}, ${theme.overlayColor[1]}, ${theme.overlayColor[2]}, 0.55)`;
+                    octx.fillRect(0, 0, thumbW, thumbH);
+                    ctx.drawImage(off, tx, ty);
+                } else {
+                    // No real mask available yet -> faint hint that this card
+                    // is selectable, but no fake-red full overlay anymore.
+                    ctx.fillStyle = `rgba(${theme.overlayColor[0]}, ${theme.overlayColor[1]}, ${theme.overlayColor[2]}, 0.10)`;
+                    ctx.fillRect(tx, ty, thumbW, thumbH);
+                }
 
                 ctx.restore();
             } else {
@@ -371,12 +416,16 @@ app.registerExtension({
                     if (!this._mecPicker) return;
                     this._mecPicker.updateFromNode();
                     this._mecPicker.tryLoadSourceImage();
+                    // ctx is already translated to the node origin by LiteGraph,
+                    // so widget-local coordinates start at (0, widgetY). Passing
+                    // absolute node.pos[*] here doubled the offset and pushed
+                    // the widget far below the node body.
                     return this._mecPicker.draw(
                         ctx,
-                        node.pos[0],
-                        node.pos[1] + widgetY,
+                        0,
+                        widgetY,
                         widgetWidth,
-                        node.pos[1] + widgetY,
+                        widgetY,
                         widgetHeight
                     );
                 },
@@ -385,8 +434,10 @@ app.registerExtension({
                 },
                 mouse: (event, pos, node) => {
                     if (!this._mecPicker) return false;
-                    const localX = pos[0] + node.pos[0];
-                    const localY = pos[1] + node.pos[1];
+                    // ``pos`` is already in widget-local coordinates that match
+                    // the (0, widgetY) origin we draw from above.
+                    const localX = pos[0];
+                    const localY = pos[1];
 
                     if (event.type === "mousemove") {
                         this._mecPicker.onMouseMove(localX, localY);
@@ -421,30 +472,37 @@ app.registerExtension({
             return false;
         };
 
-        // Parse output scores on execution complete
+        // Parse output scores + receive per-mask thumbnail PNGs on execution
         const onExecuted = nodeType.prototype.onExecuted;
         nodeType.prototype.onExecuted = function (message) {
             if (onExecuted) onExecuted.apply(this, arguments);
 
             if (this._mecPicker && message) {
-                // Try to extract scores from the output
+                // Scores can arrive either as ui.scores (preferred) or via the
+                // legacy output.scores path. Try both.
                 try {
-                    const scoresOutput = message.output?.scores;
-                    if (scoresOutput && typeof scoresOutput === "string") {
-                        const parsed = JSON.parse(scoresOutput);
-                        if (Array.isArray(parsed) && parsed.length >= 3) {
-                            this._mecPicker.scores = parsed.slice(0, 3);
-                        }
+                    let parsed = null;
+                    if (Array.isArray(message.scores) && message.scores.length > 0) {
+                        parsed = JSON.parse(message.scores[0]);
+                    } else if (message.output?.scores) {
+                        const raw = message.output.scores;
+                        parsed = JSON.parse(typeof raw === "string" ? raw : raw[0]);
                     } else if (message.output?.ui?.scores) {
-                        const parsed = JSON.parse(message.output.ui.scores);
-                        if (Array.isArray(parsed)) {
-                            this._mecPicker.scores = parsed.slice(0, 3);
-                        }
+                        parsed = JSON.parse(message.output.ui.scores);
+                    }
+                    if (Array.isArray(parsed) && parsed.length >= 3) {
+                        this._mecPicker.scores = parsed.slice(0, 3);
                     }
                 } catch (_) {
                     // Score parsing optional
                 }
 
+                // Real mask thumbnails sent by the Python side.
+                const thumbs = message.mask_thumbs;
+                if (Array.isArray(thumbs) && thumbs.length > 0) {
+                    this._mecPicker.receiveMaskThumbnails(thumbs);
+                }
+
                 this._mecPicker._needsRedraw = true;
                 this.setDirtyCanvas(true, true);
             }

nodes/sam_multi_mask_picker.py

@@ -13,13 +13,25 @@
 from __future__ import annotations
 
 import gc
+import hashlib
 import json
 import logging
+import os
 from typing import Optional
 
 import numpy as np
 import torch
 
+try:
+    import folder_paths  # type: ignore
+except Exception:  # pragma: no cover - only at import-time outside ComfyUI
+    folder_paths = None  # type: ignore
+
+try:
+    from PIL import Image as _PILImage  # type: ignore
+except Exception:  # pragma: no cover
+    _PILImage = None  # type: ignore
+
 from .model_manager import (
     MODEL_REGISTRY,
     get_or_load_model,
@@ -130,10 +142,12 @@ def INPUT_TYPES(cls):
             },
         }
 
-    @classmethod
-    def IS_CHANGED(cls, **kwargs):
-        """Force re-execution when selected_index changes (JS widget interaction)."""
-        return float("nan")
+    # NOTE: IS_CHANGED removed intentionally. Returning float("nan") forced SAM
+    # to re-run on every prompt queue, even when only ``selected_index`` changed,
+    # which is wasteful (SAM inference is heavy). With normal caching, ComfyUI
+    # re-executes only when an input value changes -- which still includes
+    # ``selected_index`` -- so the JS picker continues to work, but identical
+    # re-queues are now properly cached. See docs/inpaint-suite-guide.md.
 
     def pick_mask(
         self,
@@ -315,7 +329,48 @@ def pick_mask(
             "device": device,
         }, indent=2)
 
-        return (selected_mask_t, all_masks_t, idx, scores_str, info)
+        # ── Render mask thumbnails for the JS picker ──────────────
+        # Without this, the JS widget falls back to a flat red overlay on every
+        # thumbnail (it has no access to torch tensors). We save each mask as a
+        # grayscale PNG into ComfyUI's temp dir and return them via the ``ui``
+        # payload so the JS ``onExecuted`` hook can load and composite them.
+        mask_thumb_files: list[dict] = []
+        if folder_paths is not None and _PILImage is not None:
+            try:
+                temp_dir = folder_paths.get_temp_directory()
+                os.makedirs(temp_dir, exist_ok=True)
+                # Stable hash of the inputs so reusing the same prompts hits the
+                # browser cache instead of re-uploading three PNGs every run.
+                key_blob = (
+                    img_np.tobytes()[:16384]
+                    + str(points_list).encode()
+                    + str(box_np.tolist() if box_np is not None else None).encode()
+                    + model_name.encode()
+                )
+                digest = hashlib.sha256(key_blob).hexdigest()[:12]
+                for i in range(3):
+                    mask_arr = (np.clip(masks_np[i], 0.0, 1.0) * 255.0).astype(np.uint8)
+                    fname = f"mec_sam_mask_{digest}_{i}.png"
+                    fpath = os.path.join(temp_dir, fname)
+                    _PILImage.fromarray(mask_arr, mode="L").save(fpath, compress_level=1)
+                    mask_thumb_files.append({
+                        "filename": fname,
+                        "subfolder": "",
+                        "type": "temp",
+                    })
+            except Exception as exc:
+                logger.warning("[MEC] failed to write mask thumbnails: %s", exc)
+                mask_thumb_files = []
+
+        ui_payload = {
+            "mask_thumbs": mask_thumb_files,
+            "scores": [scores_str],
+            "selected_index": [idx],
+        }
+        return {
+            "ui": ui_payload,
+            "result": (selected_mask_t, all_masks_t, idx, scores_str, info),
+        }
 
     @staticmethod
     def _detect_model_type(model_name: str) -> str:

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "comfyui-customnodepacks"
 description = "Custom node packs for ComfyUI: FolderIncrementer (auto-versioning) + MaskEditControl (pinpoint mask editing with SAM 2.1 / SAM 3, per-axis erode/expand, point editor, bbox tools, video mask propagation)."
-version = "1.13.2"
+version = "1.14.0"
 license = { file = "MIT-License" }
 requires-python = ">=3.10"
 readme = "README.md"