Add bit selection

webui/static/main.js

@@ -1,285 +1,170 @@
-window.addEventListener("error", (e) => {
-  const log = document.querySelector("#statusLog");
-  if (log) log.textContent = "JS error: " + (e.message || e.error) + "\n" + log.textContent;
-});
-
-const $ = (sel) => document.querySelector(sel);
-
-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");
-
-function setStatus(kind, text, logLine) {
-  // kind: idle | run | ok | bad
-  statusDot.className = `dot ${kind}`;
-  statusText.textContent = text;
-  if (logLine) statusLog.textContent = logLine + "\n" + statusLog.textContent;
+// ==========================
+// DOM helpers
+// ==========================
+const $ = (id) => document.getElementById(id);
+
+// ==========================
+// Elements
+// ==========================
+const form = $("runForm");
+const runBtn = $("runBtn");
+const runBtnText = $("runBtnText");
+const spinner = $("spinner");
+
+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";
 }
 
-function setRunning(isRunning) {
-  runBtn.disabled = isRunning;
-  spinner.classList.toggle("hidden", !isRunning);
-  runBtnText.textContent = isRunning ? "Running…" : "Run";
-}
-
-function clearResults() {
-  imgInput.removeAttribute("src");
-  imgYolo.removeAttribute("src");
-  imgSelected.removeAttribute("src");
-  meta.textContent = "";
-  jobPill.textContent = "job: —";
+function updateNoiseUI() {
+  const fam = noiseFamily(noiseType.value);
 
-  [dlInput, dlYolo, dlSelected].forEach(a => {
-    a.classList.add("hidden");
-    a.removeAttribute("href");
-  });
-}
+  Object.values(noisePanels).forEach((p) => p.classList.add("hidden"));
+  noiseStrengthHidden.value = "0";
 
-function setPreview(file) {
-  if (!file) {
-    previewWrap.classList.add("hidden");
-    previewImg.removeAttribute("src");
-    fileMeta.textContent = "No file selected";
+  if (fam === "none") {
+    noisePanels.none.classList.remove("hidden");
     return;
   }
-  fileMeta.textContent = `${file.name} • ${(file.size / 1024).toFixed(1)} KB`;
-  const url = URL.createObjectURL(file);
-  previewImg.src = url;
-  previewWrap.classList.remove("hidden");
-}
-
-(function () {
-  const noiseType = document.getElementById("noiseType");
-  if (!noiseType) return;
-
-  const panels = {
-    none: document.getElementById("noisePanelNone"),
-    gaussian: document.getElementById("noisePanelGaussian"),
-    linear: document.getElementById("noisePanelLinear"),
-    adv: document.getElementById("noisePanelAdv"),
-  };
-
-  const sliders = {
-    gaussian: document.getElementById("noiseGaussian"),
-    linear: document.getElementById("noiseLinear"),
-    adv: document.getElementById("noiseAdv"),
-  };
-
-  const labels = {
-    gaussian: document.getElementById("noiseValGaussian"),
-    linear: document.getElementById("noiseValLinear"),
-    adv: document.getElementById("noiseValAdv"),
-  };
-
-  const hiddenStrength = document.getElementById("noiseStrength");
-
-  // Map dropdown values to ONE of the existing panel keys.
-  function noiseFamily(val) {
-    const t = String(val || "none").toLowerCase();
-
-    if (t === "none" || t === "off") return "none";
-
-    // gaussian variants
-    if (t === "gaussian" || t.includes("gauss")) return "gaussian";
-
-    // linear variants
-    if (t === "linear" || t.includes("linear")) return "linear";
-
-    // adversarial variants (covers: "simple_adversarial_noise", "fgsm", "pgd", etc.)
-    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");
-  }
+  noisePanels[fam].classList.remove("hidden");
+  const slider = noiseSliders[fam];
+  const val = slider.value;
+  noiseStrengthHidden.value = val;
+  noiseVals[fam].innerText = val;
+}
 
-  function showPanelForCurrentSelection() {
-    const fam = noiseFamily(noiseType.value);
-    Object.values(panels).forEach((p) => p && p.classList.add("hidden"));
-    (panels[fam] || panels.none).classList.remove("hidden");
-    updateHiddenStrength();
+// ==========================
+// HDC helpers
+// ==========================
+function updateHdcBitsVisibility() {
+  if (scoreSelect.value === "HDC") {
+    hdcBitsField.style.display = "block";
+  } else {
+    hdcBitsField.style.display = "none";
   }
+}
 
-  // Slider updates
-  Object.keys(sliders).forEach((k) => {
-    sliders[k]?.addEventListener("input", () => {
-      if (labels[k]) labels[k].textContent = sliders[k].value;
-      if (noiseFamily(noiseType.value) === k) updateHiddenStrength();
-    });
-  });
-
-  // Dropdown updates
-  noiseType.addEventListener("change", showPanelForCurrentSelection);
-
-  // Initialize from current dropdown value (NOT hard-coded none)
-  showPanelForCurrentSelection();
-})();
-
-(function () {
-  // Tabs
-  const tabBtns = document.querySelectorAll(".tabBtn");
-  const panels = document.querySelectorAll(".tabPanel");
-  tabBtns.forEach((b) => {
-    b.addEventListener("click", () => {
-      tabBtns.forEach((x) => x.classList.remove("active"));
-      panels.forEach((p) => p.classList.add("hidden"));
-      b.classList.add("active");
-      const id = b.getAttribute("data-tab");
-      document.getElementById(id)?.classList.remove("hidden");
-    });
-  });
-
-  // Hardware noise sliders -> label text
-  const w = document.getElementById("hwNoiseWidth");
-  const s = document.getElementById("hwNoiseStrength");
-  const wv = document.getElementById("hwNoiseWidthVal");
-  const sv = document.getElementById("hwNoiseStrengthVal");
-  if (w && wv) w.addEventListener("input", () => (wv.textContent = w.value));
-  if (s && sv) s.addEventListener("input", () => (sv.textContent = s.value));
-})();
-
-
-dropzone.addEventListener("click", () => fileInput.click());
-dropzone.addEventListener("keydown", (e) => {
-  if (e.key === "Enter" || e.key === " ") fileInput.click();
-});
-
-fileInput.addEventListener("change", () => {
-  const file = fileInput.files && fileInput.files[0];
-  setPreview(file);
-});
+// ==========================
+// HW noise helpers
+// ==========================
+function updateHwNoiseUI() {
+  hwNoiseWidthVal.innerText = hwNoiseWidth.value;
+  hwNoiseStrengthVal.innerText = hwNoiseStrength.value;
+}
 
-["dragenter", "dragover"].forEach(evt => {
-  dropzone.addEventListener(evt, (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    dropzone.classList.add("drag");
-  });
-});
+// ==========================
+// Event bindings
+// ==========================
+noiseType.addEventListener("change", updateNoiseUI);
 
-["dragleave", "drop"].forEach(evt => {
-  dropzone.addEventListener(evt, (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    dropzone.classList.remove("drag");
+Object.keys(noiseSliders).forEach((k) => {
+  noiseSliders[k].addEventListener("input", () => {
+    noiseVals[k].innerText = noiseSliders[k].value;
+    noiseStrengthHidden.value = noiseSliders[k].value;
   });
 });
 
-dropzone.addEventListener("drop", (e) => {
-  const file = e.dataTransfer.files && e.dataTransfer.files[0];
-  if (!file) return;
+scoreSelect.addEventListener("change", updateHdcBitsVisibility);
 
-  // Set preview
-  setPreview(file);
-
-  // Safely assign to input (works across browsers)
-  const dt = new DataTransfer();
-  dt.items.add(file);
-  fileInput.files = dt.files;
-});
-
-resetBtn.addEventListener("click", () => {
-  form.reset();
-  fileInput.value = "";
-  setPreview(null);
-  clearResults();
-  statusLog.textContent = "Waiting for input…";
-  setStatus("idle", "Idle", "Reset UI.");
-});
-
-copyMetaBtn.addEventListener("click", async () => {
-  const text = meta.textContent || "";
-  if (!text) return;
-  await navigator.clipboard.writeText(text);
-  setStatus("ok", "Done", "Copied metadata to clipboard.");
-});
+hwNoiseWidth.addEventListener("input", updateHwNoiseUI);
+hwNoiseStrength.addEventListener("input", updateHwNoiseUI);
 
+// ==========================
+// Form submit
+// ==========================
 form.addEventListener("submit", async (e) => {
   e.preventDefault();
 
-  const file = fileInput.files && fileInput.files[0];
-  if (!file) {
-    setStatus("bad", "Error", "No file selected.");
-    return;
-  }
-
-  setRunning(true);
-  setStatus("run", "Running", "Submitting request to /api/run …");
+  runBtn.disabled = true;
+  spinner.classList.remove("hidden");
+  runBtnText.innerText = "Running...";
 
   const fd = new FormData(form);
 
-  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}`);
-    }
+  // --- Explicit HDC bits handling (IMPORTANT) ---
+  if (scoreSelect.value === "HDC") {
+    fd.set("hdc_bits", hdcBitsSelect.value);
+  } else {
+    fd.set("hdc_bits", "32"); // backend default
+  }
 
-    jobPill.textContent = `job: ${data.job_id}`;
-    setStatus("ok", "Done", `Inference finished. job_id=${data.job_id}`);
+  try {
+    const res = await fetch("/api/run", {
+      method: "POST",
+      body: fd,
+    });
 
-    // Update images (cache-bust)
-    const bust = `t=${Date.now()}`;
-    imgInput.src = `${data.image_urls.input}?${bust}`;
-    imgYolo.src = `${data.image_urls.yolo}?${bust}`;
-    imgSelected.src = `${data.image_urls.selected}?${bust}`;
+    const data = await res.json();
 
-    // Open links
-    dlInput.href = data.image_urls.input;
-    dlYolo.href = data.image_urls.yolo;
-    dlSelected.href = data.image_urls.selected;
-    [dlInput, dlYolo, dlSelected].forEach(a => a.classList.remove("hidden"));
+    if (!data.ok) {
+      throw new Error(data.error || "Unknown error");
+    }
 
-    // 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);
+    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) {
-    setStatus("bad", "Error", String(err));
+    alert("Error: " + err.message);
   } finally {
-    setRunning(false);
+    spinner.classList.add("hidden");
+    runBtn.disabled = false;
+    runBtnText.innerText = "Run";
   }
 });
+
+// ==========================
+// Init on page load
+// ==========================
+updateNoiseUI();
+updateHdcBitsVisibility();
+updateHwNoiseUI();