Adriano
a12574f3c5
MatchResp ora include diag dict (CC feature). UI rendering: - Nuovo pannello pieghevole "🔍 Diagnostica" sotto i tempi - Per ogni match mostra: * pipeline pruning (vars total → top_eval → top_pass → full_eval) * candidati (raw → pre_nms → final) * drop reasons (NCC, score, recall, bbox, NMS) con counter * soglie effettive applicate * flag attivi (polarity, soft, subpix-LM) - Quando 0 match → pannello si apre automaticamente + mostra hint contestuale specifico: * "0 candidati top" → suggerisce ↓ min_score / top_thresh * "tutti dropped da NCC" → ↓ verify_threshold (filtro_fp) * "score post-NCC sotto" → ↓ min_score * "recall basso" → ↓ min_recall * "bbox out-of-scene" → check pose / search_roi Risolve il pattern "0 match perche'?" con guida actionable invece del black-box. Tutti e 3 endpoint match (/match, /match_simple, /match_recipe) propagano il diag. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
238 lines
8.7 KiB
HTML
238 lines
8.7 KiB
HTML
<!doctype html>
|
||
<html lang="it">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Pattern Matching 2D</title>
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Pattern Matching 2D</h1>
|
||
<div class="toolbar">
|
||
<label class="tb-label">Modello:</label>
|
||
<div class="thumb-picker" id="picker-model">
|
||
<div class="picker-current" tabindex="0">
|
||
<span class="picker-text">-- seleziona --</span>
|
||
<span class="caret">▾</span>
|
||
</div>
|
||
<div class="picker-list"></div>
|
||
</div>
|
||
<label class="tb-label">Scena:</label>
|
||
<div class="thumb-picker" id="picker-scene">
|
||
<div class="picker-current" tabindex="0">
|
||
<span class="picker-text">-- seleziona --</span>
|
||
<span class="caret">▾</span>
|
||
</div>
|
||
<div class="picker-list"></div>
|
||
</div>
|
||
<button class="btn btn-go" id="btn-match">▶ MATCH</button>
|
||
<button class="btn" id="btn-autotune"
|
||
title="Analizza ROI e derivata parametri ottimali (Halcon-style)">
|
||
⚙ Auto-tune
|
||
</button>
|
||
<label class="btn" title="Carica nuovo file nella cartella immagini">
|
||
⬆ Carica file
|
||
<input type="file" id="file-upload" accept="image/*" hidden>
|
||
</label>
|
||
<span id="status">Seleziona modello, disegna ROI, seleziona scena</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="col" id="col-model">
|
||
<h2>MODELLO</h2>
|
||
<div class="canvas-wrap">
|
||
<canvas id="c-model" width="380" height="420"></canvas>
|
||
</div>
|
||
<div id="roi-info">ROI: (nessuna)</div>
|
||
</section>
|
||
|
||
<section class="col" id="col-scene">
|
||
<h2>SCENA</h2>
|
||
<div class="canvas-wrap">
|
||
<canvas id="c-scene" width="820" height="620"></canvas>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="col" id="col-params">
|
||
<h2>IMPOSTAZIONI</h2>
|
||
|
||
<div class="field">
|
||
<label>Tipo modello</label>
|
||
<select id="p-tipo">
|
||
<option value="intero">Oggetto intero</option>
|
||
<option value="parziale">Parte di oggetto</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Simmetria</label>
|
||
<select id="p-simmetria">
|
||
<option value="invariante">Invariante (cerchi — no rotazione)</option>
|
||
<option value="nessuna">Nessuna (0..360°)</option>
|
||
<option value="bilaterale">Bilaterale (speculare 180°)</option>
|
||
<option value="rot_3">Rotazionale 3× (120°)</option>
|
||
<option value="rot_4">Rotazionale 4× (90°)</option>
|
||
<option value="rot_6">Rotazionale 6× (60°)</option>
|
||
<option value="rot_8">Rotazionale 8× (45°)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Variazione scala</label>
|
||
<select id="p-scala">
|
||
<option value="fissa">Fissa (setup calibrato)</option>
|
||
<option value="mini">±10%</option>
|
||
<option value="medio">±25%</option>
|
||
<option value="max">±50%</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Precisione angolare</label>
|
||
<select id="p-precisione">
|
||
<option value="veloce">Veloce (10°)</option>
|
||
<option value="normale" selected>Normale (5°)</option>
|
||
<option value="preciso">Preciso (2°)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Filtro falsi positivi
|
||
<span class="hint">(verifica intensità colori)</span>
|
||
</label>
|
||
<select id="p-filtro-fp">
|
||
<option value="off">Disattivato (massimo recall)</option>
|
||
<option value="leggero">Leggero (tollera illuminazione)</option>
|
||
<option value="medio" selected>Medio (consigliato)</option>
|
||
<option value="forte">Forte (massima selettività)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Peso dimensione nel score
|
||
<span class="hint">(penalizza scala ≠ 1.0)</span>
|
||
</label>
|
||
<select id="p-penalita-scala">
|
||
<option value="0" selected>Nessuno (score shape puro)</option>
|
||
<option value="0.3">Leggero (−30% max)</option>
|
||
<option value="0.5">Medio (−50% max)</option>
|
||
<option value="0.8">Forte (−80% max)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Score minimo <span id="v-score">0.65</span>
|
||
<span class="hint">(più basso = più match anche incerti)</span>
|
||
</label>
|
||
<input type="range" id="p-min-score" min="0.30" max="0.95" step="0.05" value="0.65">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label>Max match</label>
|
||
<input type="number" id="p-max-matches" value="25" min="1" max="200">
|
||
</div>
|
||
|
||
<details>
|
||
<summary>Modalità Halcon</summary>
|
||
<div class="halcon-grid">
|
||
<label class="hc-row" title="16-bin orientation polarity-aware (mod 2π)">
|
||
<input type="checkbox" id="hc-use-polarity">
|
||
<span>Polarity 16-bin (F)</span>
|
||
</label>
|
||
<label class="hc-row" title="Score continuo cos(θ_t-θ_s) invece di bin">
|
||
<input type="checkbox" id="hc-soft-score">
|
||
<span>Soft-margin score (Y)</span>
|
||
</label>
|
||
<label class="hc-row" title="Sub-pixel refinement gradient field LM">
|
||
<input type="checkbox" id="hc-subpixel-lm">
|
||
<span>Sub-pixel LM 0.05 px (Z)</span>
|
||
</label>
|
||
<label class="hc-row" title="Refine congiunto Nelder-Mead (cx,cy,θ)">
|
||
<input type="checkbox" id="hc-refine-joint">
|
||
<span>Refine pose joint</span>
|
||
</label>
|
||
<label class="hc-row" title="Pyramid candidates propagation">
|
||
<input type="checkbox" id="hc-pyr-propagate">
|
||
<span>Pyramid propagate</span>
|
||
</label>
|
||
<label class="hc-row" title="OpenCL GPU offload (silent fallback CPU)">
|
||
<input type="checkbox" id="hc-use-gpu">
|
||
<span>GPU OpenCL (R)</span>
|
||
</label>
|
||
|
||
<div class="hc-row hc-num">
|
||
<label>Min recall (M)</label>
|
||
<input type="number" id="hc-min-recall" value="0.0" min="0" max="1" step="0.05">
|
||
</div>
|
||
<div class="hc-row hc-num">
|
||
<label>NMS IoU thr (A)</label>
|
||
<input type="number" id="hc-nms-iou" value="0.3" min="0" max="1" step="0.05">
|
||
</div>
|
||
<div class="hc-row hc-num">
|
||
<label>Greediness</label>
|
||
<input type="number" id="hc-greediness" value="0.0" min="0" max="1" step="0.1">
|
||
</div>
|
||
<div class="hc-row hc-num">
|
||
<label>Coarse stride</label>
|
||
<input type="number" id="hc-coarse-stride" value="1" min="1" max="4" step="1">
|
||
</div>
|
||
<div class="hc-row hc-num" style="grid-column:1/-1">
|
||
<label title="Limita area di ricerca scena: x,y,w,h (vuoto = tutta scena)">
|
||
Search ROI (x,y,w,h)
|
||
</label>
|
||
<input type="text" id="hc-search-roi" placeholder="es. 100,50,800,400">
|
||
</div>
|
||
|
||
<div class="hc-row" style="grid-column:1/-1; border-top:1px solid #444; padding-top:8px">
|
||
<label>Ricetta pre-trained (V)</label>
|
||
<div style="display:flex; gap:6px; margin-top:4px">
|
||
<input type="text" id="hc-recipe-name" placeholder="nome_ricetta" style="flex:1">
|
||
<button class="btn" id="btn-save-recipe" type="button">💾 Salva</button>
|
||
</div>
|
||
<div style="display:flex; gap:6px; margin-top:6px; align-items:center">
|
||
<select id="hc-recipe-list" style="flex:1">
|
||
<option value="">— ricette disponibili —</option>
|
||
</select>
|
||
<button class="btn" id="btn-load-recipe" type="button">📂 Carica</button>
|
||
<button class="btn" id="btn-unload-recipe" type="button" disabled>✖ Stacca</button>
|
||
</div>
|
||
<div id="recipe-status" style="margin-top:4px; font-size:11px; color:#888">
|
||
Nessuna ricetta caricata
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
|
||
<details>
|
||
<summary>Avanzate</summary>
|
||
<div id="adv-form"></div>
|
||
</details>
|
||
|
||
<h2 style="margin-top:14px">TEMPI</h2>
|
||
<div class="kv"><span>train:</span><span id="t-train">-</span></div>
|
||
<div class="kv"><span>find:</span><span id="t-find">-</span></div>
|
||
<div class="kv"><span>varianti:</span><span id="t-var">-</span></div>
|
||
<div class="kv"><span>match:</span><span id="t-match">-</span></div>
|
||
|
||
<details id="diag-panel" style="margin-top:10px">
|
||
<summary>🔍 Diagnostica (CC)</summary>
|
||
<div id="diag-content" style="font-family:monospace; font-size:11px;
|
||
background:#1a1a1a; padding:8px;
|
||
border-radius:3px; margin-top:6px;
|
||
line-height:1.5">
|
||
<em style="color:#888">Esegui un MATCH per vedere la diagnostica</em>
|
||
</div>
|
||
</details>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<h2>LEGENDA</h2>
|
||
<div id="legend"></div>
|
||
</footer>
|
||
|
||
<script src="/static/app.js"></script>
|
||
</body>
|
||
</html>
|