Fix bug

webui/static/main.js

@@ -1,325 +1,313 @@
-// ====== 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;
+// static/main.js
+(() => {
+  // Helpers
+  const $ = (id) => document.getElementById(id);
+  const qsa = (sel) => Array.from(document.querySelectorAll(sel));
+
+  // 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 imgInput = $("imgInput");
+  const imgYolo = $("imgYolo");
+  const imgSelected = $("imgSelected");
+  const meta = $("meta");
+
+  const dlInput = $("dlInput");
+  const dlYolo = $("dlYolo");
+  const dlSelected = $("dlSelected");
+  const copyMetaBtn = $("copyMetaBtn");
+
+  // Noise elements
+  const noiseType = $("noiseType");
+  const noiseStrengthHidden = $("noiseStrength");
+  const noisePanelNone = $("noisePanelNone");
+  const noisePanelGaussian = $("noisePanelGaussian");
+  const noisePanelLinear = $("noisePanelLinear");
+  const noisePanelAdv = $("noisePanelAdv");
+  const noiseGaussian = $("noiseGaussian");
+  const noiseLinear = $("noiseLinear");
+  const noiseAdv = $("noiseAdv");
+  const noiseValGaussian = $("noiseValGaussian");
+  const noiseValLinear = $("noiseValLinear");
+  const noiseValAdv = $("noiseValAdv");
+
+  // HW noise elements (UI only; backend currently doesn't accept them unless you add to api_run)
+  const hwNoiseWidth = $("hwNoiseWidth");
+  const hwNoiseStrength = $("hwNoiseStrength");
+  const hwNoiseWidthVal = $("hwNoiseWidthVal");
+  const hwNoiseStrengthVal = $("hwNoiseStrengthVal");
+
+  function setStatus(kind, text, logLine) {
+    if (statusDot) statusDot.className = `dot ${kind}`;
+    if (statusText) statusText.textContent = text;
+    if (statusLog && logLine) statusLog.textContent = logLine;
   }
-});
-
-// ====== Helpers ======
-const $ = (id) => document.getElementById(id);
-const qs = (sel) => document.querySelector(sel);
-const qsa = (sel) => Array.from(document.querySelectorAll(sel));
-
-// ====== 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 imgInput = $("imgInput");
-const imgYolo = $("imgYolo");
-const imgSelected = $("imgSelected");
-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.");
-}
-
-// ====== 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;
-}
-
-function setRunning(isRunning) {
-  if (!runBtn || !spinner || !runBtnText) return;
-  runBtn.disabled = isRunning;
-  spinner.classList.toggle("hidden", !isRunning);
-  runBtnText.textContent = isRunning ? "Running…" : "Run";
-}
-
-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: —";
-
-  [dlInput, dlYolo, dlSelected].forEach((a) => {
-    if (!a) return;
-    a.classList.add("hidden");
-    a.removeAttribute("href");
-  });
-}
-
-function setPreview(file) {
-  if (!previewWrap || !previewImg || !fileMeta) return;
 
-  if (!file) {
-    previewWrap.classList.add("hidden");
-    previewImg.removeAttribute("src");
-    fileMeta.textContent = "No file selected";
-    return;
+  function setRunning(isRunning) {
+    if (!runBtn) return;
+    runBtn.disabled = isRunning;
+    if (spinner) spinner.classList.toggle("hidden", !isRunning);
+    if (runBtnText) runBtnText.textContent = isRunning ? "Running…" : "Run";
   }
 
-  fileMeta.textContent = `${file.name} • ${(file.size / 1024).toFixed(1)} KB`;
-  const url = URL.createObjectURL(file);
-  previewImg.src = url;
-  previewWrap.classList.remove("hidden");
-}
-
-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;
-}
-
-// ====== Noise panel logic ======
-(function initNoisePanels() {
-  const noiseType = $("noiseType");
-  if (!noiseType) return;
-
-  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;
+  function setPreview(file) {
+    if (!fileMeta || !previewWrap || !previewImg) return;
 
-  function noiseFamily(val) {
-    const t = String(val || "none").toLowerCase();
+    if (!file) {
+      fileMeta.textContent = "No file selected";
+      previewWrap.classList.add("hidden");
+      previewImg.removeAttribute("src");
+      return;
+    }
 
-    if (t === "none" || t === "off") return "none";
-    if (t === "gaussian" || t.includes("gauss")) return "gaussian";
-    if (t === "linear" || t.includes("linear")) return "linear";
+    fileMeta.textContent = `${file.name} • ${(file.size / 1024).toFixed(1)} KB`;
+    const url = URL.createObjectURL(file);
+    previewImg.src = url;
+    previewWrap.classList.remove("hidden");
+  }
 
-    // adversarial variants
-    if (
-      t === "adv" ||
-      t.startsWith("adv") ||
-      t.includes("adversarial") ||
-      t.includes("attack") ||
-      t.includes("fgsm") ||
-      t.includes("pgd")
-    ) return "adv";
+  function setFileToInput(file) {
+    const dt = new DataTransfer();
+    dt.items.add(file);
+    fileInput.files = dt.files;
+  }
 
-    return "none";
+  // Tabs
+  function initTabs() {
+    const tabBtns = qsa(".tabBtn");
+    const tabPanels = qsa(".tabPanel");
+
+    tabBtns.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        tabBtns.forEach((b) => b.classList.remove("active"));
+        tabPanels.forEach((p) => p.classList.add("hidden"));
+
+        btn.classList.add("active");
+        const id = btn.getAttribute("data-tab");
+        const panel = $(id);
+        if (panel) panel.classList.remove("hidden");
+      });
+    });
   }
 
-  function updateHiddenStrength() {
-    const fam = noiseFamily(noiseType.value);
-    if (fam === "none") {
-      hiddenStrength.value = "0";
-      return;
-    }
-    hiddenStrength.value = String(sliders[fam]?.value ?? "0");
+  // Noise panel switching
+  function noiseFamily(val) {
+    const t = String(val || "none").toLowerCase();
+    if (t === "none" || t === "default" || t === "off") return "none";
+    if (t === "gaussian") return "gaussian";
+    if (t === "linear") return "linear";
+    if (t.startsWith("adv")) return "adv";
+    return "none";
   }
 
-  function showPanelForCurrentSelection() {
+  function updateNoiseHidden() {
+    if (!noiseType || !noiseStrengthHidden) return;
     const fam = noiseFamily(noiseType.value);
 
-    Object.values(panels).forEach((p) => p && p.classList.add("hidden"));
-    (panels[fam] || panels.none)?.classList.remove("hidden");
+    let v = 0;
+    if (fam === "gaussian" && noiseGaussian) v = Number(noiseGaussian.value || 0);
+    if (fam === "linear" && noiseLinear) v = Number(noiseLinear.value || 0);
+    if (fam === "adv" && noiseAdv) v = Number(noiseAdv.value || 0);
 
-    updateHiddenStrength();
+    noiseStrengthHidden.value = String(v);
   }
 
-  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();
+  function showNoisePanel() {
+    if (!noiseType) return;
+    const fam = noiseFamily(noiseType.value);
+
+    [noisePanelNone, noisePanelGaussian, noisePanelLinear, noisePanelAdv].forEach((p) => {
+      if (p) p.classList.add("hidden");
     });
-  });
 
-  noiseType.addEventListener("change", showPanelForCurrentSelection);
-  showPanelForCurrentSelection();
-})();
+    if (fam === "none" && noisePanelNone) noisePanelNone.classList.remove("hidden");
+    if (fam === "gaussian" && noisePanelGaussian) noisePanelGaussian.classList.remove("hidden");
+    if (fam === "linear" && noisePanelLinear) noisePanelLinear.classList.remove("hidden");
+    if (fam === "adv" && noisePanelAdv) noisePanelAdv.classList.remove("hidden");
 
-// ====== Tabs + HW noise labels ======
-(function initTabsAndHwNoise() {
-  const tabBtns = qsa(".tabBtn");
-  const tabPanels = qsa(".tabPanel");
+    updateNoiseHidden();
+  }
 
-  tabBtns.forEach((b) => {
-    b.addEventListener("click", () => {
-      tabBtns.forEach((x) => x.classList.remove("active"));
-      tabPanels.forEach((p) => p.classList.add("hidden"));
+  function initNoise() {
+    if (!noiseType) return;
+    noiseType.addEventListener("change", showNoisePanel);
 
-      b.classList.add("active");
-      const id = b.getAttribute("data-tab");
-      $(id)?.classList.remove("hidden");
+    if (noiseGaussian) noiseGaussian.addEventListener("input", () => {
+      if (noiseValGaussian) noiseValGaussian.textContent = noiseGaussian.value;
+      updateNoiseHidden();
+    });
+    if (noiseLinear) noiseLinear.addEventListener("input", () => {
+      if (noiseValLinear) noiseValLinear.textContent = noiseLinear.value;
+      updateNoiseHidden();
+    });
+    if (noiseAdv) noiseAdv.addEventListener("input", () => {
+      if (noiseValAdv) noiseValAdv.textContent = noiseAdv.value;
+      updateNoiseHidden();
     });
-  });
-
-  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;
+    showNoisePanel();
+  }
 
-  // Click to open picker
-  dropzone.addEventListener("click", () => fileInput.click());
-  dropzone.addEventListener("keydown", (e) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      fileInput.click();
+  function initHwNoiseLabels() {
+    if (hwNoiseWidth && hwNoiseWidthVal) {
+      hwNoiseWidth.addEventListener("input", () => (hwNoiseWidthVal.textContent = hwNoiseWidth.value));
     }
-  });
+    if (hwNoiseStrength && hwNoiseStrengthVal) {
+      hwNoiseStrength.addEventListener("input", () => (hwNoiseStrengthVal.textContent = hwNoiseStrength.value));
+    }
+  }
 
-  // File picked
-  fileInput.addEventListener("change", () => {
-    const file = fileInput.files && fileInput.files[0];
-    setPreview(file);
-  });
+  // Upload handlers
+  function initUpload() {
+    if (!fileInput || !dropzone) return;
+
+    dropzone.addEventListener("click", () => fileInput.click());
+    dropzone.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        fileInput.click();
+      }
+    });
+
+    fileInput.addEventListener("change", () => {
+      const f = fileInput.files && fileInput.files[0];
+      setPreview(f);
+    });
 
-  // Drag styling
-  ["dragenter", "dragover"].forEach((evt) => {
-    dropzone.addEventListener(evt, (e) => {
+    dropzone.addEventListener("dragover", (e) => {
       e.preventDefault();
-      e.stopPropagation();
       dropzone.classList.add("drag");
     });
-  });
+    dropzone.addEventListener("dragleave", () => dropzone.classList.remove("drag"));
 
-  ["dragleave", "drop"].forEach((evt) => {
-    dropzone.addEventListener(evt, (e) => {
+    dropzone.addEventListener("drop", (e) => {
       e.preventDefault();
-      e.stopPropagation();
       dropzone.classList.remove("drag");
+      const f = e.dataTransfer?.files?.[0];
+      if (!f) return;
+      setFileToInput(f);
+      setPreview(f);
     });
-  });
-
-  // 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.");
-  });
-}
-
-// ====== Submit ======
-if (form) {
-  form.addEventListener("submit", async (e) => {
-    e.preventDefault();
+  }
 
-    const file = fileInput?.files?.[0];
-    if (!file) {
-      setStatus("bad", "Error", "No file selected.");
-      return;
-    }
+  // Reset
+  function initReset() {
+    if (!resetBtn || !form) return;
+    resetBtn.addEventListener("click", () => {
+      form.reset();
+      if (fileInput) fileInput.value = "";
+      setPreview(null);
+      if (jobPill) jobPill.textContent = "job: —";
+      if (imgInput) imgInput.removeAttribute("src");
+      if (imgYolo) imgYolo.removeAttribute("src");
+      if (imgSelected) imgSelected.removeAttribute("src");
+      if (meta) meta.textContent = "";
+      setStatus("idle", "Idle", "Waiting for input…");
+      setRunning(false);
+      showNoisePanel();
+    });
+  }
 
-    setRunning(true);
-    setStatus("run", "Running", "Submitting request to /api/run …");
+  // Copy metadata
+  function initCopyMeta() {
+    if (!copyMetaBtn || !meta) return;
+    copyMetaBtn.addEventListener("click", async () => {
+      const text = meta.textContent || "";
+      if (!text) return;
+      await navigator.clipboard.writeText(text);
+      setStatus("ok", "Done", "Copied metadata to clipboard.");
+    });
+  }
 
-    const fd = new FormData(form);
+  // Submit
+  function initSubmit() {
+    if (!form) return;
 
-    try {
-      const resp = await fetch("/api/run", { method: "POST", body: fd });
-      const data = await resp.json();
+    form.addEventListener("submit", async (e) => {
+      e.preventDefault();
 
-      if (!resp.ok || !data.ok) {
-        throw new Error(data?.error || `HTTP ${resp.status}`);
+      const file = fileInput?.files?.[0];
+      if (!file) {
+        setStatus("bad", "Error", "No file selected.");
+        return;
       }
 
-      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
-        );
+      updateNoiseHidden(); // ensure hidden noise_strength matches slider
+      setRunning(true);
+      setStatus("run", "Running", "Submitting request…");
+
+      try {
+        const fd = new FormData(form);
+
+        // NOTE: backend currently ignores HW noise + hdc_bits unless you add them to api_run.
+        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}`;
+
+        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}`;
+
+        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"); }
+
+        if (meta) {
+          meta.textContent = JSON.stringify(
+            {
+              job_id: data.job_id,
+              task_id: data.task_id,
+              task_name: data.task_name,
+              selected_indices: data.selected_indices,
+            },
+            null,
+            2
+          );
+        }
+
+        setStatus("ok", "Done", "Finished.");
+      } catch (err) {
+        setStatus("bad", "Error", String(err));
+      } finally {
+        setRunning(false);
       }
-    } catch (err) {
-      setStatus("bad", "Error", String(err));
-    } finally {
-      setRunning(false);
+    });
+  }
+
+  // Boot
+  document.addEventListener("DOMContentLoaded", () => {
+    // Basic sanity: show you in logs if ids are missing
+    if (!form || !fileInput || !dropzone) {
+      console.error("DOM ids mismatch: runForm/fileInput/dropzone not found.");
+      if (statusLog) statusLog.textContent = "JS init failed: missing DOM elements (check ids).";
+      return;
     }
+    initTabs();
+    initNoise();
+    initHwNoiseLabels();
+    initUpload();
+    initReset();
+    initCopyMeta();
+    initSubmit();
+    setStatus("idle", "Idle", "Waiting for input…");
   });
-}
+})();

webui/templates/index.html

@@ -308,6 +308,6 @@
     </main>
   </div>
 
-  <script src="/static/main.js"></script>
+  <script src="/static/main.js?v=20260125_1"></script>
 </body>
 </html>