Fix bug

webui/app.py

@@ -174,6 +174,8 @@ runner = ModelRunner(
 
 @app.get("/", response_class=HTMLResponse)
 def index(request: Request):
+    task_ids = runner.list_task_ids()
+    task_items = [(tid, runner.id2task_name.get(str(tid), f"task_{tid}")) for tid in task_ids]
     return templates.TemplateResponse(
         "index.html",
         {
@@ -187,6 +189,7 @@ def index(request: Request):
             "od_choices": OD_CHOICES,
             "default_od": DEFAULT_OD,
             "task_ids": runner.list_task_ids(),
+            "task_items": task_items
         },
     )
 

webui/static/main.js

@@ -1,170 +1,325 @@
-// ==========================
-// DOM helpers
-// ==========================
+// ====== Error logger (best-effort) ======
+window.addEventListener("error", (e) => {
+  const log = document.getElementById("statusLog");
+  if (log) {
+    log.textContent =
+      "JS error: " + (e.message || String(e.error)) + "\n" + log.textContent;
+  }
+});
+
+// ====== Helpers ======
 const $ = (id) => document.getElementById(id);
+const qs = (sel) => document.querySelector(sel);
+const qsa = (sel) => Array.from(document.querySelectorAll(sel));
 
-// ==========================
-// Elements
-// ==========================
+// ====== Elements ======
 const form = $("runForm");
 const runBtn = $("runBtn");
 const runBtnText = $("runBtnText");
 const spinner = $("spinner");
+const resetBtn = $("resetBtn");
+
+const fileInput = $("fileInput");
+const dropzone = $("dropzone");
+const fileMeta = $("fileMeta");
+const previewWrap = $("previewWrap");
+const previewImg = $("previewImg");
+
+const statusDot = $("statusDot");
+const statusText = $("statusText");
+const statusLog = $("statusLog");
+const jobPill = $("jobPill");
 
-const noiseType = $("noiseType");
-const noiseStrengthHidden = $("noiseStrength");
-
-const noisePanels = {
-  none: $("noisePanelNone"),
-  gaussian: $("noisePanelGaussian"),
-  linear: $("noisePanelLinear"),
-  adv: $("noisePanelAdv"),
-};
-
-const noiseSliders = {
-  gaussian: $("noiseGaussian"),
-  linear: $("noiseLinear"),
-  adv: $("noiseAdv"),
-};
-
-const noiseVals = {
-  gaussian: $("noiseValGaussian"),
-  linear: $("noiseValLinear"),
-  adv: $("noiseValAdv"),
-};
-
-// HDC / score function
-const scoreSelect = document.querySelector('select[name="score_function"]');
-const hdcBitsField = $("hdcBitsField");
-const hdcBitsSelect = $("hdcBits");
-const hdvDimSelect = document.querySelector('select[name="hdv_dim"]');
-
-// HW noise
-const hwNoiseDist = $("hwNoiseDist");
-const hwNoiseWidth = $("hwNoiseWidth");
-const hwNoiseStrength = $("hwNoiseStrength");
-const hwNoiseWidthVal = $("hwNoiseWidthVal");
-const hwNoiseStrengthVal = $("hwNoiseStrengthVal");
-
-// Output
 const imgInput = $("imgInput");
 const imgYolo = $("imgYolo");
 const imgSelected = $("imgSelected");
-const metaBox = $("meta");
-
-// ==========================
-// Noise helpers
-// ==========================
-function noiseFamily(val) {
-  if (!val || val === "none") return "none";
-  if (val === "gaussian") return "gaussian";
-  if (val === "linear") return "linear";
-  if (val.startsWith("adv")) return "adv";
-  return "none";
+const meta = $("meta");
+
+const dlInput = $("dlInput");
+const dlYolo = $("dlYolo");
+const dlSelected = $("dlSelected");
+const copyMetaBtn = $("copyMetaBtn");
+
+// Guard: if your HTML hasn’t loaded / ids mismatch
+if (!form || !fileInput || !dropzone) {
+  console.error("Missing required DOM elements. Check your element ids.");
 }
 
-function updateNoiseUI() {
-  const fam = noiseFamily(noiseType.value);
+// ====== UI helpers ======
+function setStatus(kind, text, logLine) {
+  // kind: idle | run | ok | bad
+  if (statusDot) statusDot.className = `dot ${kind}`;
+  if (statusText) statusText.textContent = text;
+  if (statusLog && logLine) statusLog.textContent = logLine + "\n" + statusLog.textContent;
+}
 
-  Object.values(noisePanels).forEach((p) => p.classList.add("hidden"));
-  noiseStrengthHidden.value = "0";
+function setRunning(isRunning) {
+  if (!runBtn || !spinner || !runBtnText) return;
+  runBtn.disabled = isRunning;
+  spinner.classList.toggle("hidden", !isRunning);
+  runBtnText.textContent = isRunning ? "Running…" : "Run";
+}
 
-  if (fam === "none") {
-    noisePanels.none.classList.remove("hidden");
-    return;
-  }
+function clearResults() {
+  if (imgInput) imgInput.removeAttribute("src");
+  if (imgYolo) imgYolo.removeAttribute("src");
+  if (imgSelected) imgSelected.removeAttribute("src");
+  if (meta) meta.textContent = "";
+  if (jobPill) jobPill.textContent = "job: —";
 
-  noisePanels[fam].classList.remove("hidden");
-  const slider = noiseSliders[fam];
-  const val = slider.value;
-  noiseStrengthHidden.value = val;
-  noiseVals[fam].innerText = val;
+  [dlInput, dlYolo, dlSelected].forEach((a) => {
+    if (!a) return;
+    a.classList.add("hidden");
+    a.removeAttribute("href");
+  });
 }
 
-// ==========================
-// HDC helpers
-// ==========================
-function updateHdcBitsVisibility() {
-  if (scoreSelect.value === "HDC") {
-    hdcBitsField.style.display = "block";
-  } else {
-    hdcBitsField.style.display = "none";
+function setPreview(file) {
+  if (!previewWrap || !previewImg || !fileMeta) return;
+
+  if (!file) {
+    previewWrap.classList.add("hidden");
+    previewImg.removeAttribute("src");
+    fileMeta.textContent = "No file selected";
+    return;
   }
+
+  fileMeta.textContent = `${file.name} • ${(file.size / 1024).toFixed(1)} KB`;
+  const url = URL.createObjectURL(file);
+  previewImg.src = url;
+  previewWrap.classList.remove("hidden");
 }
 
-// ==========================
-// HW noise helpers
-// ==========================
-function updateHwNoiseUI() {
-  hwNoiseWidthVal.innerText = hwNoiseWidth.value;
-  hwNoiseStrengthVal.innerText = hwNoiseStrength.value;
+function setFileToInput(file) {
+  // Ensures FormData(form) sees the file even for drag/drop
+  const dt = new DataTransfer();
+  dt.items.add(file);
+  fileInput.files = dt.files;
 }
 
-// ==========================
-// Event bindings
-// ==========================
-noiseType.addEventListener("change", updateNoiseUI);
+// ====== Noise panel logic ======
+(function initNoisePanels() {
+  const noiseType = $("noiseType");
+  if (!noiseType) return;
 
-Object.keys(noiseSliders).forEach((k) => {
-  noiseSliders[k].addEventListener("input", () => {
-    noiseVals[k].innerText = noiseSliders[k].value;
-    noiseStrengthHidden.value = noiseSliders[k].value;
-  });
-});
+  const panels = {
+    none: $("noisePanelNone"),
+    gaussian: $("noisePanelGaussian"),
+    linear: $("noisePanelLinear"),
+    adv: $("noisePanelAdv"),
+  };
+
+  const sliders = {
+    gaussian: $("noiseGaussian"),
+    linear: $("noiseLinear"),
+    adv: $("noiseAdv"),
+  };
+
+  const labels = {
+    gaussian: $("noiseValGaussian"),
+    linear: $("noiseValLinear"),
+    adv: $("noiseValAdv"),
+  };
+
+  const hiddenStrength = $("noiseStrength");
+  if (!hiddenStrength) return;
 
-scoreSelect.addEventListener("change", updateHdcBitsVisibility);
+  function noiseFamily(val) {
+    const t = String(val || "none").toLowerCase();
 
-hwNoiseWidth.addEventListener("input", updateHwNoiseUI);
-hwNoiseStrength.addEventListener("input", updateHwNoiseUI);
+    if (t === "none" || t === "off") return "none";
+    if (t === "gaussian" || t.includes("gauss")) return "gaussian";
+    if (t === "linear" || t.includes("linear")) return "linear";
 
-// ==========================
-// Form submit
-// ==========================
-form.addEventListener("submit", async (e) => {
-  e.preventDefault();
+    // adversarial variants
+    if (
+      t === "adv" ||
+      t.startsWith("adv") ||
+      t.includes("adversarial") ||
+      t.includes("attack") ||
+      t.includes("fgsm") ||
+      t.includes("pgd")
+    ) return "adv";
+
+    return "none";
+  }
+
+  function updateHiddenStrength() {
+    const fam = noiseFamily(noiseType.value);
+    if (fam === "none") {
+      hiddenStrength.value = "0";
+      return;
+    }
+    hiddenStrength.value = String(sliders[fam]?.value ?? "0");
+  }
 
-  runBtn.disabled = true;
-  spinner.classList.remove("hidden");
-  runBtnText.innerText = "Running...";
+  function showPanelForCurrentSelection() {
+    const fam = noiseFamily(noiseType.value);
 
-  const fd = new FormData(form);
+    Object.values(panels).forEach((p) => p && p.classList.add("hidden"));
+    (panels[fam] || panels.none)?.classList.remove("hidden");
 
-  // --- Explicit HDC bits handling (IMPORTANT) ---
-  if (scoreSelect.value === "HDC") {
-    fd.set("hdc_bits", hdcBitsSelect.value);
-  } else {
-    fd.set("hdc_bits", "32"); // backend default
+    updateHiddenStrength();
   }
 
-  try {
-    const res = await fetch("/api/run", {
-      method: "POST",
-      body: fd,
+  Object.keys(sliders).forEach((k) => {
+    const s = sliders[k];
+    if (!s) return;
+    s.addEventListener("input", () => {
+      if (labels[k]) labels[k].textContent = s.value;
+      if (noiseFamily(noiseType.value) === k) updateHiddenStrength();
+    });
+  });
+
+  noiseType.addEventListener("change", showPanelForCurrentSelection);
+  showPanelForCurrentSelection();
+})();
+
+// ====== Tabs + HW noise labels ======
+(function initTabsAndHwNoise() {
+  const tabBtns = qsa(".tabBtn");
+  const tabPanels = qsa(".tabPanel");
+
+  tabBtns.forEach((b) => {
+    b.addEventListener("click", () => {
+      tabBtns.forEach((x) => x.classList.remove("active"));
+      tabPanels.forEach((p) => p.classList.add("hidden"));
+
+      b.classList.add("active");
+      const id = b.getAttribute("data-tab");
+      $(id)?.classList.remove("hidden");
+    });
+  });
+
+  const w = $("hwNoiseWidth");
+  const s = $("hwNoiseStrength");
+  const wv = $("hwNoiseWidthVal");
+  const sv = $("hwNoiseStrengthVal");
+  if (w && wv) w.addEventListener("input", () => (wv.textContent = w.value));
+  if (s && sv) s.addEventListener("input", () => (sv.textContent = s.value));
+})();
+
+// ====== Upload / Dropzone ======
+(function initUpload() {
+  if (!fileInput || !dropzone) return;
+
+  // Click to open picker
+  dropzone.addEventListener("click", () => fileInput.click());
+  dropzone.addEventListener("keydown", (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      fileInput.click();
+    }
+  });
+
+  // File picked
+  fileInput.addEventListener("change", () => {
+    const file = fileInput.files && fileInput.files[0];
+    setPreview(file);
+  });
+
+  // Drag styling
+  ["dragenter", "dragover"].forEach((evt) => {
+    dropzone.addEventListener(evt, (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dropzone.classList.add("drag");
+    });
+  });
+
+  ["dragleave", "drop"].forEach((evt) => {
+    dropzone.addEventListener(evt, (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dropzone.classList.remove("drag");
     });
+  });
+
+  // Drop file
+  dropzone.addEventListener("drop", (e) => {
+    const file = e.dataTransfer?.files?.[0];
+    if (!file) return;
+    setFileToInput(file);
+    setPreview(file);
+  });
+})();
+
+// ====== Reset + copy meta ======
+if (resetBtn) {
+  resetBtn.addEventListener("click", () => {
+    if (form) form.reset();
+    if (fileInput) fileInput.value = "";
+    setPreview(null);
+    clearResults();
+    if (statusLog) statusLog.textContent = "Waiting for input…";
+    setStatus("idle", "Idle", "Reset UI.");
+  });
+}
+
+if (copyMetaBtn) {
+  copyMetaBtn.addEventListener("click", async () => {
+    const text = meta?.textContent || "";
+    if (!text) return;
+    await navigator.clipboard.writeText(text);
+    setStatus("ok", "Done", "Copied metadata to clipboard.");
+  });
+}
 
-    const data = await res.json();
+// ====== Submit ======
+if (form) {
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
 
-    if (!data.ok) {
-      throw new Error(data.error || "Unknown error");
+    const file = fileInput?.files?.[0];
+    if (!file) {
+      setStatus("bad", "Error", "No file selected.");
+      return;
     }
 
-    imgInput.src = data.image_urls.input;
-    imgYolo.src = data.image_urls.yolo;
-    imgSelected.src = data.image_urls.selected;
-
-    metaBox.innerText = JSON.stringify(data, null, 2);
-  } catch (err) {
-    alert("Error: " + err.message);
-  } finally {
-    spinner.classList.add("hidden");
-    runBtn.disabled = false;
-    runBtnText.innerText = "Run";
-  }
-});
+    setRunning(true);
+    setStatus("run", "Running", "Submitting request to /api/run …");
+
+    const fd = new FormData(form);
 
-// ==========================
-// Init on page load
-// ==========================
-updateNoiseUI();
-updateHdcBitsVisibility();
-updateHwNoiseUI();
+    try {
+      const resp = await fetch("/api/run", { method: "POST", body: fd });
+      const data = await resp.json();
+
+      if (!resp.ok || !data.ok) {
+        throw new Error(data?.error || `HTTP ${resp.status}`);
+      }
+
+      if (jobPill) jobPill.textContent = `job: ${data.job_id}`;
+      setStatus("ok", "Done", `Inference finished. job_id=${data.job_id}`);
+
+      // Update images (cache-bust)
+      const bust = `t=${Date.now()}`;
+      if (imgInput) imgInput.src = `${data.image_urls.input}?${bust}`;
+      if (imgYolo) imgYolo.src = `${data.image_urls.yolo}?${bust}`;
+      if (imgSelected) imgSelected.src = `${data.image_urls.selected}?${bust}`;
+
+      // Open links
+      if (dlInput) { dlInput.href = data.image_urls.input; dlInput.classList.remove("hidden"); }
+      if (dlYolo) { dlYolo.href = data.image_urls.yolo; dlYolo.classList.remove("hidden"); }
+      if (dlSelected) { dlSelected.href = data.image_urls.selected; dlSelected.classList.remove("hidden"); }
+
+      // Meta
+      if (meta) {
+        meta.textContent = JSON.stringify(
+          {
+            task_id: data.task_id,
+            task_name: data.task_name,
+            selected_indices: data.selected_indices,
+            job_id: data.job_id,
+          },
+          null,
+          2
+        );
+      }
+    } catch (err) {
+      setStatus("bad", "Error", String(err));
+    } finally {
+      setRunning(false);
+    }
+  });
+}