feat(web): match overlay con edge filtrati + UCS + rimozione bbox ROI

_draw_matches ora coerente con anteprima modello:

- Edge filtrati con stessa pipeline matcher (hysteresis weak/strong_grad)
  e selezione feature: l'overlay del match riflette esattamente quello
  che l'utente ha visto nel preview "Anteprima edge"
- Background tinta scura su pixel hysteresis (40% colore match)
- Feature scelte come dot colorati per bin (palette 16 bin)
- UCS rosso/verde sul centro pose: asse X destra, Y giu' (image y-down),
  ruotato secondo angle del match
- Origine UCS: cerchio bianco con bordo nero per visibilita'

Rimossi (richiesta utente "togli la ROI"):
- bbox poly perimetrale: ridondante, copriva il pezzo
- linea marker primo lato: sostituita da UCS rosso

Compatibilita': se matcher non passato (es. uso esterno), fallback
Canny legacy. Tutti e 3 endpoint match (/match, /match_simple,
/match_recipe) ora propagano il matcher a _draw_matches.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

pm2d/web/server.py

@@ -131,44 +131,100 @@ def _encode_png(img: np.ndarray) -> bytes:
 
 
 def _draw_matches(scene: np.ndarray, matches: list[Match],
-                   template_gray: np.ndarray | None) -> np.ndarray:
+                   template_gray: np.ndarray | None,
+                   matcher: "LineShapeMatcher | None" = None) -> np.ndarray:
+    """Disegna match annotati sulla scena.
+
+    Se matcher e' passato, usa la stessa pipeline di edge filtering
+    (hysteresis weak/strong_grad) e selezione feature usata in training,
+    cosi' l'overlay nel match riflette ESATTAMENTE quello che l'utente
+    ha visto nel preview "Anteprima edge". Inoltre disegna UCS
+    (asse X rosso, Y verde) sul centro pose del match.
+
+    Senza matcher: fallback Canny (legacy).
+    """
     out = scene.copy()
     H, W = scene.shape[:2]
     palette = [
         (0, 255, 0), (0, 200, 255), (255, 100, 100), (255, 200, 0),
         (200, 0, 255), (100, 255, 200), (255, 0, 0), (0, 255, 255),
     ]
+    bin_colors = [
+        (255, 0, 0), (255, 128, 0), (255, 255, 0), (0, 255, 0),
+        (0, 255, 255), (0, 128, 255), (0, 0, 255), (255, 0, 255),
+        (255, 100, 100), (255, 180, 100), (255, 230, 100), (180, 255, 100),
+        (100, 255, 200), (100, 180, 255), (180, 100, 255), (255, 100, 200),
+    ]
     for i, m in enumerate(matches):
         color = palette[i % len(palette)]
         if template_gray is not None:
             t = template_gray
             th, tw = t.shape
-            edge = cv2.Canny(t, 50, 150)
             cx_t = (tw - 1) / 2.0; cy_t = (th - 1) / 2.0
             M = cv2.getRotationMatrix2D((cx_t, cy_t), m.angle_deg, m.scale)
             M[0, 2] += m.cx - cx_t
             M[1, 2] += m.cy - cy_t
-            warped = cv2.warpAffine(edge, M, (W, H),
+            if matcher is not None:
-                                     flags=cv2.INTER_NEAREST, borderValue=0)
+                # Edge filtrati con stessi param matcher (hysteresis)
-            mask = warped > 0
+                warped_gray = cv2.warpAffine(
-            if mask.any():
+                    t, M, (W, H), flags=cv2.INTER_LINEAR, borderValue=0)
-                overlay = np.zeros_like(out)
+                mag, bins = matcher._gradient(warped_gray)
-                overlay[mask] = color
+                if matcher.weak_grad < matcher.strong_grad:
-                out[mask] = (0.3 * out[mask] + 0.7 * overlay[mask]).astype(np.uint8)
+                    edge_mask = matcher._hysteresis_mask(mag)
-        poly = m.bbox_poly.astype(np.int32).reshape(-1, 1, 2)
+                else:
-        cv2.polylines(out, [poly], True, color, 2, cv2.LINE_AA)
+                    edge_mask = mag >= matcher.strong_grad
-        p0 = tuple(m.bbox_poly[0].astype(int))
+                # Background edge filtrati: tinta scura colore match
-        p1 = tuple(m.bbox_poly[1].astype(int))
+                if edge_mask.any():
-        cv2.line(out, p0, p1, color, 4, cv2.LINE_AA)
+                    bg_overlay = np.zeros_like(out)
+                    dark = tuple(int(c * 0.35) for c in color)
+                    bg_overlay[edge_mask] = dark
+                    out = cv2.addWeighted(out, 1.0, bg_overlay, 0.7, 0)
+                # Feature scelte: estrazione alla pose, dot colorati per bin
+                fx, fy, fb = matcher._extract_features(mag, bins, None)
+                for k in range(len(fx)):
+                    px, py = int(fx[k]), int(fy[k])
+                    if 0 <= px < W and 0 <= py < H:
+                        bcol = bin_colors[int(fb[k]) % len(bin_colors)]
+                        cv2.circle(out, (px, py), 2, bcol, -1, cv2.LINE_AA)
+            else:
+                # Legacy Canny
+                edge = cv2.Canny(t, 50, 150)
+                warped = cv2.warpAffine(edge, M, (W, H),
+                                         flags=cv2.INTER_NEAREST, borderValue=0)
+                mask = warped > 0
+                if mask.any():
+                    overlay = np.zeros_like(out)
+                    overlay[mask] = color
+                    out[mask] = (0.3 * out[mask] + 0.7 * overlay[mask]).astype(np.uint8)
+        # bbox poly e linea-marker rimossi (richiesta utente "togli la ROI"):
+        # UCS + edge filtrati gia' identificano pose e orientamento,
+        # il rettangolo aggiunto era ridondante e copriva il pezzo.
         cx, cy = int(round(m.cx)), int(round(m.cy))
-        cv2.drawMarker(out, (cx, cy), color, cv2.MARKER_CROSS, 22, 2, cv2.LINE_AA)
+        # UCS sul centro pose match (richiesta utente: come nell'anteprima
+        # modello). Asse X rosso destra, Y verde basso (image y-down).
+        # Lunghezza derivata dalla diagonale bbox per scala-invariante.
         L = int(np.linalg.norm(m.bbox_poly[1] - m.bbox_poly[0])) // 2
-        a = np.deg2rad(m.angle_deg)
+        if L < 10:
-        cv2.arrowedLine(out, (cx, cy),
+            L = 30  # fallback se bbox degenere
-                        (int(cx + L * np.cos(a)), int(cy - L * np.sin(a))),
+        ax = np.deg2rad(m.angle_deg)
-                        color, 2, cv2.LINE_AA, tipLength=0.2)
+        # X axis ruotato (rosso)
+        x_end = (int(cx + L * np.cos(ax)), int(cy - L * np.sin(ax)))
+        cv2.arrowedLine(out, (cx, cy), x_end,
+                        (0, 0, 255), 2, cv2.LINE_AA, tipLength=0.2)
+        cv2.putText(out, "X", (x_end[0] + 4, x_end[1] + 5),
+                    cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 0, 255), 1, cv2.LINE_AA)
+        # Y axis perpendicolare (verde, +90° in image coords = giu' visivo)
+        y_end = (int(cx + L * np.cos(ax + np.pi / 2)),
+                 int(cy - L * np.sin(ax + np.pi / 2)))
+        cv2.arrowedLine(out, (cx, cy), y_end,
+                        (0, 255, 0), 2, cv2.LINE_AA, tipLength=0.2)
+        cv2.putText(out, "Y", (y_end[0] + 4, y_end[1] + 12),
+                    cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 1, cv2.LINE_AA)
+        # Origine UCS: cerchio bianco con bordo nero
+        cv2.circle(out, (cx, cy), 4, (0, 0, 0), -1, cv2.LINE_AA)
+        cv2.circle(out, (cx, cy), 3, (255, 255, 255), -1, cv2.LINE_AA)
         label = f"#{i+1} {m.angle_deg:.0f}d s={m.scale:.2f} {m.score:.2f}"
-        cv2.putText(out, label, (cx + 8, cy - 8),
+        cv2.putText(out, label, (cx + 12, cy - 12),
                     cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 2, cv2.LINE_AA)
     return out
 
@@ -511,7 +567,7 @@ def match(p: MatchParams):
 
     # Render annotated image
     tg = cv2.cvtColor(roi_img, cv2.COLOR_BGR2GRAY)
-    annotated = _draw_matches(scene, matches, tg)
+    annotated = _draw_matches(scene, matches, tg, matcher=m)
     ann_id = _store_image(annotated)
 
     return MatchResp(
@@ -588,7 +644,7 @@ def match_simple(p: SimpleMatchParams):
     t_find = time.time() - t0
 
     tg = cv2.cvtColor(roi_img, cv2.COLOR_BGR2GRAY)
-    annotated = _draw_matches(scene, matches, tg)
+    annotated = _draw_matches(scene, matches, tg, matcher=m)
     ann_id = _store_image(annotated)
 
     return MatchResp(
@@ -631,6 +687,107 @@ class SaveRecipeParams(BaseModel):
     name: str  # nome file ricetta (no path)
 
 
+class EdgePreviewParams(BaseModel):
+    model_id: str
+    roi: list[int]
+    weak_grad: float = 30.0
+    strong_grad: float = 60.0
+    num_features: int = 96
+    min_feature_spacing: int = 3
+    use_polarity: bool = False
+
+
+@app.post("/preview_edges")
+def preview_edges(p: EdgePreviewParams):
+    """Estrae edge feature dalla ROI con i parametri dati e ritorna
+    immagine annotata con i pixel selezionati come overlay.
+
+    Permette tuning interattivo delle soglie weak/strong_grad e
+    num_features per "togliere le sporcizie" (rumore di sfondo,
+    edge spuri) prima di trainare il matcher vero.
+    """
+    model = _load_image(p.model_id)
+    if model is None:
+        raise HTTPException(404, "Modello non trovato")
+    x, y, w, h = p.roi
+    H_m, W_m = model.shape[:2]
+    x = max(0, min(int(x), W_m - 1)); y = max(0, min(int(y), H_m - 1))
+    w = max(1, min(int(w), W_m - x)); h = max(1, min(int(h), H_m - y))
+    roi_img = model[y:y + h, x:x + w]
+    # Matcher temporaneo solo per estrazione feature (no train completo)
+    m = LineShapeMatcher(
+        weak_grad=p.weak_grad,
+        strong_grad=p.strong_grad,
+        num_features=p.num_features,
+        min_feature_spacing=p.min_feature_spacing,
+        use_polarity=p.use_polarity,
+    )
+    gray = cv2.cvtColor(roi_img, cv2.COLOR_BGR2GRAY) if roi_img.ndim == 3 else roi_img
+    mag, bins = m._gradient(gray)
+    fx, fy, fb = m._extract_features(mag, bins, None)
+    # Mostra anche i pixel "weak/strong" come heatmap di sfondo
+    out = roi_img.copy() if roi_img.ndim == 3 else cv2.cvtColor(roi_img, cv2.COLOR_GRAY2BGR)
+    # Overlay magnitude leggera
+    mag_norm = np.clip(mag / max(1.0, mag.max()) * 255, 0, 255).astype(np.uint8)
+    mag_color = cv2.applyColorMap(mag_norm, cv2.COLORMAP_BONE)
+    out = cv2.addWeighted(out, 0.6, mag_color, 0.4, 0)
+    # Pixel "strong" con hysteresis: contorno verde scuro tenue
+    if m.weak_grad < m.strong_grad:
+        edge_mask = m._hysteresis_mask(mag).astype(np.uint8) * 255
+    else:
+        edge_mask = (mag >= m.strong_grad).astype(np.uint8) * 255
+    edge_overlay = np.zeros_like(out)
+    edge_overlay[edge_mask > 0] = (0, 80, 0)  # verde scuro
+    out = cv2.addWeighted(out, 1.0, edge_overlay, 0.5, 0)
+    # Feature scelte: cerchietti colorati per bin
+    bin_colors = [
+        (255, 0, 0), (255, 128, 0), (255, 255, 0), (0, 255, 0),
+        (0, 255, 255), (0, 128, 255), (0, 0, 255), (255, 0, 255),
+        (255, 100, 100), (255, 180, 100), (255, 230, 100), (180, 255, 100),
+        (100, 255, 200), (100, 180, 255), (180, 100, 255), (255, 100, 200),
+    ]
+    for i in range(len(fx)):
+        b = int(fb[i])
+        col = bin_colors[b % len(bin_colors)]
+        cv2.circle(out, (int(fx[i]), int(fy[i])), 2, col, -1, cv2.LINE_AA)
+    # UCS sul baricentro feature (richiesta utente): assi X rosso, Y verde
+    bary_cx = bary_cy = None
+    if len(fx) > 0:
+        bary_cx = float(np.mean(fx))
+        bary_cy = float(np.mean(fy))
+        bx, by = int(round(bary_cx)), int(round(bary_cy))
+        axis_len = max(20, int(0.15 * max(out.shape[:2])))
+        # X axis (rosso, verso destra)
+        cv2.arrowedLine(out, (bx, by), (bx + axis_len, by),
+                        (0, 0, 255), 2, cv2.LINE_AA, tipLength=0.2)
+        cv2.putText(out, "X", (bx + axis_len + 4, by + 5),
+                    cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 0, 255), 1, cv2.LINE_AA)
+        # Y axis (verde, verso il basso = convenzione image y-down)
+        cv2.arrowedLine(out, (bx, by), (bx, by + axis_len),
+                        (0, 255, 0), 2, cv2.LINE_AA, tipLength=0.2)
+        cv2.putText(out, "Y", (bx + 4, by + axis_len + 12),
+                    cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 1, cv2.LINE_AA)
+        # Origine: cerchio bianco con bordo nero
+        cv2.circle(out, (bx, by), 4, (0, 0, 0), -1, cv2.LINE_AA)
+        cv2.circle(out, (bx, by), 3, (255, 255, 255), -1, cv2.LINE_AA)
+    img_id = _store_image(out)
+    n_edge_strong = int((mag >= m.strong_grad).sum())
+    n_edge_total = int(edge_mask.sum() / 255)
+    return {
+        "preview_id": img_id,
+        "n_features": len(fx),
+        "n_edge_strong": n_edge_strong,
+        "n_edge_after_hysteresis": n_edge_total,
+        "mag_max": float(mag.max()),
+        "mag_p50": float(np.percentile(mag, 50)),
+        "mag_p85": float(np.percentile(mag, 85)),
+        "ucs_baricentro": (
+            {"cx": round(bary_cx, 2), "cy": round(bary_cy, 2)}
+            if bary_cx is not None else None
+        ),
+    }
+
+
 @app.post("/recipes")
 def save_recipe(p: SaveRecipeParams):
     """Allena matcher e salva su disco come ricetta riutilizzabile."""
@@ -763,7 +920,7 @@ def match_recipe(p: RecipeMatchParams):
     )
     t_find = time.time() - t0
     tg = m.template_gray if m.template_gray is not None else np.zeros((1, 1), np.uint8)
-    annotated = _draw_matches(scene, matches, tg)
+    annotated = _draw_matches(scene, matches, tg, matcher=m)
     ann_id = _store_image(annotated)
     return MatchResp(
         matches=[MatchResult(

pm2d/web/static/app.js

@@ -438,6 +438,109 @@ function setStatus(s) {
 }
 
 // ---------- Init ----------
+// ---------- Edge preview (clean rumore) ----------
+let _epDebounce = null;
+let _epLastImg = null;
+
+async function fetchEdgePreview() {
+  if (!state.model || !state.roi) {
+    document.getElementById("edge-preview-info").textContent =
+      "Disegna prima la ROI sul modello";
+    return;
+  }
+  const body = {
+    model_id: state.model.id,
+    roi: state.roi,
+    weak_grad: parseFloat(document.getElementById("ep-weak").value),
+    strong_grad: parseFloat(document.getElementById("ep-strong").value),
+    num_features: parseInt(document.getElementById("ep-nf").value, 10),
+    min_feature_spacing: parseInt(document.getElementById("ep-sp").value, 10),
+    use_polarity: document.getElementById("ep-pol").checked,
+  };
+  try {
+    const r = await fetch("/preview_edges", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    if (!r.ok) throw new Error(await r.text());
+    const j = await r.json();
+    _epLastImg = await loadImage(`/image/${j.preview_id}/raw?t=${Date.now()}`);
+    drawEdgePreview();
+    const ucs = j.ucs_baricentro
+      ? ` | UCS=(${j.ucs_baricentro.cx},${j.ucs_baricentro.cy})`
+      : "";
+    document.getElementById("edge-preview-info").innerHTML =
+      `<b>${j.n_features}</b> feature scelte (di ${j.n_edge_after_hysteresis} edge totali)<br>` +
+      `mag: max=${j.mag_max.toFixed(0)} p50=${j.mag_p50.toFixed(0)} ` +
+      `p85=${j.mag_p85.toFixed(0)}${ucs}`;
+  } catch (e) {
+    document.getElementById("edge-preview-info").textContent =
+      `Errore preview: ${e.message}`;
+  }
+}
+
+function drawEdgePreview() {
+  const cnv = document.getElementById("c-edge-preview");
+  if (!_epLastImg) return;
+  const ctx = cnv.getContext("2d");
+  // Fit-contain
+  const r = Math.min(cnv.width / _epLastImg.width,
+                     cnv.height / _epLastImg.height);
+  const w = _epLastImg.width * r;
+  const h = _epLastImg.height * r;
+  const ox = (cnv.width - w) / 2;
+  const oy = (cnv.height - h) / 2;
+  ctx.fillStyle = "#000"; ctx.fillRect(0, 0, cnv.width, cnv.height);
+  ctx.imageSmoothingEnabled = false;
+  ctx.drawImage(_epLastImg, ox, oy, w, h);
+}
+
+function scheduleEdgePreview() {
+  if (_epDebounce) clearTimeout(_epDebounce);
+  _epDebounce = setTimeout(fetchEdgePreview, 200);
+}
+
+function bindEdgePreviewControls() {
+  const slid = (id, valEl) => {
+    const el = document.getElementById(id);
+    const v = document.getElementById(valEl);
+    el.addEventListener("input", () => {
+      v.textContent = el.value;
+      scheduleEdgePreview();
+    });
+  };
+  slid("ep-weak", "ep-weak-v");
+  slid("ep-strong", "ep-strong-v");
+  slid("ep-nf", "ep-nf-v");
+  slid("ep-sp", "ep-sp-v");
+  document.getElementById("ep-pol").addEventListener("change",
+    scheduleEdgePreview);
+  // Auto-refresh quando il pannello viene aperto
+  document.getElementById("edge-preview-panel").addEventListener("toggle",
+    (e) => { if (e.target.open) fetchEdgePreview(); });
+  document.getElementById("btn-edge-apply").addEventListener("click", () => {
+    // Copia i valori correnti nei campi avanzati
+    const map = {
+      "ep-weak": "adv-weak_grad",
+      "ep-strong": "adv-strong_grad",
+      "ep-nf": "adv-num_features",
+      "ep-sp": "adv-min_feature_spacing",
+    };
+    for (const [src, dst] of Object.entries(map)) {
+      const dstEl = document.getElementById(dst);
+      if (dstEl) dstEl.value = document.getElementById(src).value;
+    }
+    // use_polarity: alla checkbox della modalita Halcon
+    const polCb = document.getElementById("hc-use-polarity");
+    if (polCb) polCb.checked = document.getElementById("ep-pol").checked;
+    // Apri pannello Avanzate per feedback
+    const advDetails = document.querySelectorAll("#col-params details");
+    advDetails.forEach((d) => { d.open = true; });
+    alert("Parametri edge applicati. Esegui MATCH per usare i valori scelti.");
+  });
+}
+
 // ---------- CC: Diagnostica match ----------
 function renderDiag(diag, n_matches) {
   const el = document.getElementById("diag-content");
@@ -665,6 +768,7 @@ window.addEventListener("DOMContentLoaded", async () => {
   document.getElementById("btn-unload-recipe").addEventListener("click",
     unloadRecipe);
   refreshRecipeList();
+  bindEdgePreviewControls();
   const slider = document.getElementById("p-min-score");
   slider.addEventListener("input", (e) => {
     document.getElementById("v-score").textContent =

pm2d/web/static/index.html

@@ -45,6 +45,40 @@
       <canvas id="c-model" width="380" height="420"></canvas>
     </div>
     <div id="roi-info">ROI: (nessuna)</div>
+    <details id="edge-preview-panel" style="margin-top:10px">
+      <summary>🔬 Anteprima edge / pulizia rumore</summary>
+      <div style="font-size:11px; color:#aaa; margin:4px 0">
+        Regola le soglie per togliere edge spuri (sporcizie). UCS rosso/verde
+        sul baricentro feature.
+      </div>
+      <div class="ep-grid">
+        <label class="ep-row">weak_grad <span id="ep-weak-v">30</span>
+          <input type="range" id="ep-weak" min="5" max="200" value="30" step="1">
+        </label>
+        <label class="ep-row">strong_grad <span id="ep-strong-v">60</span>
+          <input type="range" id="ep-strong" min="10" max="400" value="60" step="1">
+        </label>
+        <label class="ep-row">num_features <span id="ep-nf-v">96</span>
+          <input type="range" id="ep-nf" min="16" max="300" value="96" step="1">
+        </label>
+        <label class="ep-row">spacing <span id="ep-sp-v">3</span>
+          <input type="range" id="ep-sp" min="1" max="15" value="3" step="1">
+        </label>
+        <label class="ep-row" style="flex-direction:row; gap:6px">
+          <input type="checkbox" id="ep-pol"> polarity
+        </label>
+        <button class="btn" id="btn-edge-apply" type="button"
+                style="grid-column:1/-1">
+          ✓ Applica ai parametri Avanzate
+        </button>
+      </div>
+      <div class="canvas-wrap" style="margin-top:6px">
+        <canvas id="c-edge-preview" width="380" height="380"></canvas>
+      </div>
+      <div id="edge-preview-info" style="font-size:11px; color:#888; margin-top:4px">
+        Disegna ROI e apri questo pannello per generare anteprima
+      </div>
+    </details>
   </section>
 
   <section class="col" id="col-scene">

pm2d/web/static/style.css

@@ -173,3 +173,18 @@ footer h2 {
 }
 .hc-row.hc-num label { font-size: 11px; color: #aaa; }
 .hc-row.hc-num input { width: 100%; }
+
+/* Edge preview panel */
+.ep-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px 12px;
+  margin-top: 6px;
+  font-size: 12px;
+}
+.ep-row {
+  display: flex; flex-direction: column; gap: 2px;
+  font-size: 11px; color: #aaa;
+}
+.ep-row input[type="range"] { width: 100%; }
+.ep-row span { color: #fff; font-weight: bold; font-family: monospace; }