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>
This commit is contained in:
@@ -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 =
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user