feat(web): anteprima edge sul modello + tracker pulizia rumore + UCS baricentro

Pannello "🔬 Anteprima edge / pulizia rumore" sotto il canvas modello.
Permette tuning interattivo dei parametri di selezione edge per
togliere "sporcizie" (rumore di sfondo, edge spuri) prima di
trainare il matcher.

Server:
- POST /preview_edges: dato modello+ROI+param edge, ritorna immagine
  ROI con overlay:
  * heatmap magnitude gradient (sfondo)
  * verde scuro: pixel sopra hysteresis edge
  * cerchietti colorati per bin: feature scelte (palette 16 bin)
  * UCS rosso/verde sul baricentro feature (richiesta utente):
    asse X destra, Y giu' (image y-down)
  Ritorna anche stats: n_features, n_edge_strong, percentili magnitude,
  ucs_baricentro {cx, cy}

UI:
- Slider weak_grad/strong_grad/num_features/spacing + checkbox polarity
- Re-fetch debounced (200ms) ad ogni input → preview live
- Bottone "Applica ai parametri Avanzate": copia i valori scelti
  nei campi Avanzate del matcher principale
- Auto-fetch quando il pannello viene aperto

Use case: operatore vede SUBITO quali edge il matcher userebbe,
regola soglie per escludere rumore, applica e poi MATCH.

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

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 =