feat: selezione immagini da cartella IMAGES_DIR via .env

- .env con IMAGES_DIR=Test
- server: _load_env legge .env senza dip extra
- GET /images lista file, POST /load_from_folder carica per nome
- frontend: file picker sostituiti con 2 select popolati all avvio

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

pm2d/web/static/app.js

@@ -62,15 +62,35 @@ function readAdvancedOverrides() {
   return out;
 }
 
-// ---------- Upload ----------
-async function uploadFile(file) {
-  const fd = new FormData();
-  fd.append("file", file);
-  const r = await fetch("/upload", { method: "POST", body: fd });
-  if (!r.ok) throw new Error("upload failed");
+// ---------- Image loading from folder ----------
+async function loadFromFolder(filename) {
+  const r = await fetch("/load_from_folder", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ filename }),
+  });
+  if (!r.ok) throw new Error(await r.text());
   return await r.json();
 }
 
+async function fetchImagesList() {
+  const r = await fetch("/images");
+  if (!r.ok) return { files: [], dir: "" };
+  return await r.json();
+}
+
+function populateSelect(selectEl, files) {
+  selectEl.innerHTML = "";
+  const opt0 = document.createElement("option");
+  opt0.value = ""; opt0.textContent = "-- seleziona --";
+  selectEl.appendChild(opt0);
+  for (const f of files) {
+    const o = document.createElement("option");
+    o.value = f; o.textContent = f;
+    selectEl.appendChild(o);
+  }
+}
+
 function loadImage(src) {
   return new Promise((res, rej) => {
     const img = new Image();
@@ -80,24 +100,35 @@ function loadImage(src) {
   });
 }
 
-async function onLoadModel(file) {
+async function onSelectModel(filename) {
+  if (!filename) return;
   setStatus("Caricamento modello...");
-  const meta = await uploadFile(file);
-  const img = await loadImage(`/image/${meta.id}/raw`);
-  state.model = { id: meta.id, w: meta.width, h: meta.height, img };
-  state.roi = null;
-  setStatus(`Modello: ${file.name} ${meta.width}x${meta.height} — trascina ROI`);
-  renderModel();
+  try {
+    const meta = await loadFromFolder(filename);
+    const img = await loadImage(`/image/${meta.id}/raw`);
+    state.model = { id: meta.id, w: meta.width, h: meta.height, img };
+    state.roi = null;
+    document.getElementById("roi-info").textContent = "ROI: (nessuna)";
+    setStatus(`Modello: ${filename} ${meta.width}x${meta.height} — trascina ROI`);
+    renderModel();
+  } catch (e) {
+    setStatus(`Errore modello: ${e.message}`);
+  }
 }
 
-async function onLoadScene(file) {
+async function onSelectScene(filename) {
+  if (!filename) return;
   setStatus("Caricamento scena...");
-  const meta = await uploadFile(file);
-  const img = await loadImage(`/image/${meta.id}/raw`);
-  state.scene = { id: meta.id, w: meta.width, h: meta.height, img };
-  state.matches = []; state.annotatedImg = null;
-  setStatus(`Scena: ${file.name} ${meta.width}x${meta.height}`);
-  renderScene();
+  try {
+    const meta = await loadFromFolder(filename);
+    const img = await loadImage(`/image/${meta.id}/raw`);
+    state.scene = { id: meta.id, w: meta.width, h: meta.height, img };
+    state.matches = []; state.annotatedImg = null;
+    setStatus(`Scena: ${filename} ${meta.width}x${meta.height}`);
+    renderScene();
+  } catch (e) {
+    setStatus(`Errore scena: ${e.message}`);
+  }
 }
 
 // ---------- Rendering ----------
@@ -274,15 +305,22 @@ function setStatus(s) {
 }
 
 // ---------- Init ----------
-window.addEventListener("DOMContentLoaded", () => {
+window.addEventListener("DOMContentLoaded", async () => {
   buildAdvancedForm();
   setupROI();
-  document.getElementById("file-model").addEventListener("change", (e) => {
-    if (e.target.files[0]) onLoadModel(e.target.files[0]);
-  });
-  document.getElementById("file-scene").addEventListener("change", (e) => {
-    if (e.target.files[0]) onLoadScene(e.target.files[0]);
-  });
+  // Popola dropdown immagini da IMAGES_DIR
+  const {files, dir} = await fetchImagesList();
+  const selM = document.getElementById("sel-model");
+  const selS = document.getElementById("sel-scene");
+  populateSelect(selM, files);
+  populateSelect(selS, files);
+  if (files.length === 0) {
+    setStatus(`Nessuna immagine in ${dir} (configura IMAGES_DIR in .env)`);
+  } else {
+    setStatus(`${files.length} immagini disponibili in ${dir}`);
+  }
+  selM.addEventListener("change", (e) => onSelectModel(e.target.value));
+  selS.addEventListener("change", (e) => onSelectScene(e.target.value));
   document.getElementById("btn-match").addEventListener("click", doMatch);
   const slider = document.getElementById("p-min-score");
   slider.addEventListener("input", (e) => {

pm2d/web/static/index.html

@@ -9,14 +9,16 @@
 <header>
   <h1>Pattern Matching 2D</h1>
   <div class="toolbar">
-    <label class="btn">📂 Modello
-      <input type="file" id="file-model" accept="image/*" hidden>
-    </label>
-    <label class="btn">📂 Scena
-      <input type="file" id="file-scene" accept="image/*" hidden>
-    </label>
+    <label class="tb-label">Modello:</label>
+    <select id="sel-model" class="tb-select">
+      <option value="">-- seleziona --</option>
+    </select>
+    <label class="tb-label">Scena:</label>
+    <select id="sel-scene" class="tb-select">
+      <option value="">-- seleziona --</option>
+    </select>
     <button class="btn btn-go" id="btn-match">▶ MATCH</button>
-    <span id="status">Carica modello, disegna ROI, carica scena</span>
+    <span id="status">Seleziona modello, disegna ROI, seleziona scena</span>
   </div>
 </header>
 

pm2d/web/static/style.css

@@ -26,6 +26,13 @@ header h1 {
   background: #0a7d3a; border-color: #0d9c48; color: #fff; font-weight: bold;
 }
 .btn-go:hover { background: #0d9c48; }
+.tb-label { color: #b0b0b0; font-size: 12px; margin-left: 8px; }
+.tb-select {
+  background: #2a2a2a; color: #dcdcdc; border: 1px solid #444;
+  padding: 5px 8px; border-radius: 3px; font-size: 13px;
+  min-width: 160px;
+}
+.tb-select:focus { outline: 1px solid #00c8ff; }
 #status {
   color: #00c8ff; margin-left: 12px; font-weight: 500;
 }