update front page

webui/runner.py

@@ -485,7 +485,14 @@ class ModelRunner:
                 tgt = bbox_embeddings
                 memory = text_embeddings
                 image_embedding_2d = image_embedding.view(1, -1)
-                _, _, score_res, _ = taskclip(tgt, memory, image_embedding_2d)
+                _, _, score_res, _ = taskclip(
+                    tgt, 
+                    memory, 
+                    image_embedding_2d,
+                    hw_noise_dist=hw_noise_dist,
+                    hw_noise_width=int(hw_noise_width),
+                    hw_noise_strength=int(hw_noise_strength),
+                    hdc_bits=hdc_bits)
                 score = score_res.view(-1).detach().cpu().numpy().tolist()
 
             # post-process

webui/static/main.js

@@ -33,6 +33,7 @@ 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;
@@ -70,6 +71,112 @@ function setPreview(file) {
   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");
+  }
+
+  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();
+  }
+
+  // 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();
@@ -100,8 +207,10 @@ dropzone.addEventListener("drop", (e) => {
   const file = e.dataTransfer.files && e.dataTransfer.files[0];
   if (!file) return;
 
+  // Set preview
   setPreview(file);
 
+  // Safely assign to input (works across browsers)
   const dt = new DataTransfer();
   dt.items.add(file);
   fileInput.files = dt.files;
@@ -139,33 +248,28 @@ form.addEventListener("submit", async (e) => {
 
   try {
     const resp = await fetch("/api/run", { method: "POST", body: fd });
+    const data = await resp.json();
 
-    // Read as text first so we can show raw errors if not JSON
-    const text = await resp.text();
-    let data;
-    try {
-      data = JSON.parse(text);
-    } catch {
-      throw new Error(`Server returned non-JSON (HTTP ${resp.status}): ${text.slice(0, 300)}`);
-    }
-
-    if (!resp.ok || data.ok === false) {
-      throw new Error(data.error || `Request failed: HTTP ${resp.status}`);
+    if (!resp.ok || !data.ok) {
+      throw new Error(data?.error || `HTTP ${resp.status}`);
     }
 
     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()}`;
     imgInput.src = `${data.image_urls.input}?${bust}`;
     imgYolo.src = `${data.image_urls.yolo}?${bust}`;
     imgSelected.src = `${data.image_urls.selected}?${bust}`;
 
+    // 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"));
 
+    // Meta
     meta.textContent = JSON.stringify({
       task_id: data.task_id,
       task_name: data.task_name,
@@ -178,4 +282,4 @@ form.addEventListener("submit", async (e) => {
   } finally {
     setRunning(false);
   }
-});
+});

webui/static/style.css

@@ -170,6 +170,12 @@ select:focus, input[type="text"]:focus, textarea:focus{border-color: rgba(106,22
 
 .tinyBtn{padding:8px 10px; font-weight:900}
 .hidden{display:none !important}
+.hidden { display: none; }
+.tabBar { display: flex; gap: 8px; margin: 8px 0 12px; }
+.tabBtn { padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: transparent; color: inherit; cursor: pointer; }
+.tabBtn.active { background: rgba(255,255,255,.08); }
+.tabPanel { margin-top: 8px; }
+
 
 /* Spinner */
 .spinner{

webui/templates/index.html

@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=device-width,initial-scale=1" />
   <title>TaskCLIP Web UI</title>
 
-  <!-- Fonts / Icons (same “style family” as your advisor’s demo) -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
@@ -16,8 +15,6 @@
 
 <body>
   <div class="app">
-
-    <!-- Left: Controls -->
     <aside class="sidebar">
       <div class="sideTop">
         <div class="sideTitle">
@@ -56,6 +53,19 @@
               </select>
             </div>
 
+            <div class="field" id="hdcBitsField" style="display:none;">
+              <label>HDC Precision</label>
+              <select name="hdc_bits" id="hdcBits">
+                <option value="1">1-bit</option>
+                <option value="2">2-bit</option>
+                <option value="4">4-bit</option>
+                <option value="8">8-bit</option>
+                <option value="16">16-bit (fp16/bf16)</option>
+                <option value="32" selected>32-bit (fp32)</option>
+              </select>
+              <div class="hint">Applies to HDC score function only (weights + activations).</div>
+            </div>
+
             <div class="field">
               <label>HDV Dim</label>
               <select name="hdv_dim">
@@ -79,10 +89,10 @@
             </div>
 
             <div class="field">
-              <label>Task ID</label>
+              <label>Task</label>
               <select name="task_id">
-                {% for t in task_ids %}
-                  <option value="{{t}}">{{t}}</option>
+                {% for tid, tname in task_items %}
+                  <option value="{{tid}}">{{tid}} — {{tname}}</option>
                 {% endfor %}
               </select>
             </div>
@@ -98,12 +108,94 @@
 
           <div class="divider"></div>
 
+          <div class="sectionTitle">
+            <i class="fa-solid fa-microchip"></i>
+            <span>Noise</span>
+          </div>
+
+          <div class="tabBar">
+            <button type="button" class="tabBtn active" data-tab="tabInputNoise">Input noise</button>
+            <button type="button" class="tabBtn" data-tab="tabHwNoise">Hardware related noise</button>
+          </div>
+
+          <!-- ✅ FIX: input noise UI must be INSIDE this tab panel -->
+          <div class="tabPanel" id="tabInputNoise">
+            <div class="field">
+              <label>Input Noise</label>
+              <select name="noise_type" id="noiseType">
+                <option value="none" selected>default (no noise)</option>
+                <option value="gaussian">Gaussian noise</option>
+                <option value="linear">Linear noise</option>
+                <option value="adv">Simple adversarial noise</option>
+                <option value="adv_rand_sign">Adversarial: random sign (fast)</option>
+                <option value="adv_edge_sign">Adversarial: edge-sign (Laplacian)</option>
+                <option value="adv_patch">Adversarial: patch occlusion/noise</option>
+                <option value="adv_stripes">Adversarial: stripe/periodic</option>
+                <option value="adv_jpeg">Adversarial: JPEG compression artifacts</option>
+              </select>
+              <div class="hint">Applies noise to the uploaded image before running YOLO/TaskCLIP</div>
+            </div>
+
+            <div class="field" id="noisePanelNone">
+              <label>Noise Strength</label>
+              <div class="hint">No noise (strength ignored)</div>
+            </div>
+
+            <div class="field hidden" id="noisePanelGaussian">
+              <label>Gaussian Strength: <span class="mono" id="noiseValGaussian">0</span></label>
+              <input type="range" min="0" max="100" value="0" name="noise_strength_gaussian" id="noiseGaussian" />
+              <div class="hint">0–100 → sigma scaling</div>
+            </div>
+
+            <div class="field hidden" id="noisePanelLinear">
+              <label>Linear Strength: <span class="mono" id="noiseValLinear">0</span></label>
+              <input type="range" min="0" max="100" value="0" name="noise_strength_linear" id="noiseLinear" />
+              <div class="hint">0–100 → gradient amplitude</div>
+            </div>
+
+            <div class="field hidden" id="noisePanelAdv">
+              <label>Adversarial Strength: <span class="mono" id="noiseValAdv">0</span></label>
+              <input type="range" min="0" max="100" value="0" name="noise_strength_adv" id="noiseAdv" />
+              <div class="hint">0–100 → adversarial-style perturbation strength</div>
+            </div>
+
+            <input type="hidden" name="noise_strength" id="noiseStrength" value="0" />
+          </div>
+
+          <div class="tabPanel hidden" id="tabHwNoise">
+            <div class="grid2">
+              <div class="field">
+                <label>Hardware noise distribution</label>
+                <select name="hw_noise_dist" id="hwNoiseDist">
+                  <option value="none" selected>default (no noise)</option>
+                  <option value="gaussian">Gaussian</option>
+                  <option value="uniform">Uniform</option>
+                  <option value="laplace">Laplace</option>
+                </select>
+                <div class="hint">Injected into TaskCLIP scoring (score_raw) before the score function.</div>
+              </div>
+
+              <div class="field">
+                <label>Width: <span class="mono" id="hwNoiseWidthVal">0</span></label>
+                <input type="range" min="0" max="100" value="0" name="hw_noise_width" id="hwNoiseWidth" />
+                <div class="hint">Controls σ (Gaussian), range (Uniform), b (Laplace)</div>
+              </div>
+
+              <div class="field">
+                <label>Strength: <span class="mono" id="hwNoiseStrengthVal">0</span></label>
+                <input type="range" min="0" max="100" value="0" name="hw_noise_strength" id="hwNoiseStrength" />
+                <div class="hint">Scales injected noise amplitude</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="divider"></div>
+
           <div class="field">
             <label>Upload Image</label>
 
             <input id="fileInput" name="upload" type="file" accept="image/*" class="fileHidden" required />
 
-            <!-- Fancy dropzone -->
             <div id="dropzone" class="dropzone" role="button" tabindex="0">
               <div class="dzLeft">
                 <i class="fa-solid fa-file-arrow-up"></i>
@@ -152,7 +244,6 @@
       </div>
     </aside>
 
-    <!-- Right: Results -->
     <main class="main">
       <header class="topbar card">
         <div class="topLeft">