Add settings drawer and selectable Beni YOLOv8n model

README.md

@@ -34,4 +34,17 @@ compact, and the primary Run Analysis action appears immediately after upload
 and before advanced settings so the upload-to-predict workflow is visible
 without scrolling on common desktop displays.
 
+## Selectable models
+
+The Reader can switch between two locally hosted ONNX models while keeping the
+same 12-class decoder and post-processing pipeline:
+
+- AquaVision YOLO12n (`960 x 960`) from `kagabo/hf_water_meter_models`
+- Beni YOLOv8n (`640 x 640`) from `Beni4/rwanda-water-meter-reading-demo`
+
+Both publish the same class order (`meter`, `window`, digits `0-9`) and declare
+the AGPL-3.0 license in their model/Space metadata. The Performance tab is
+explicitly labeled as AquaVision YOLO12n evidence and should not be interpreted
+as validation evidence for Beni's model.
+
 Source model: [`kagabo/hf_water_meter_models`](https://huggingface.co/kagabo/hf_water_meter_models)

app.js

@@ -1,5 +1,7 @@
-const MODEL_SIZE = 960;
-const MODEL_URL = "models/new_clean_yolo12n_raw_pascal_best.onnx";
+const MODEL_CONFIGS = {
+  aquavision: { name: "YOLO12n · AquaVision", shortName: "AquaVision YOLO12n", url: "models/new_clean_yolo12n_raw_pascal_best.onnx", sourceUrl: "https://huggingface.co/kagabo/hf_water_meter_models", size: 960 },
+  beni: { name: "YOLOv8n · Beni", shortName: "Beni YOLOv8n", url: "models/beni_yolov8n_water_meter.onnx", sourceUrl: "https://huggingface.co/spaces/Beni4/rwanda-water-meter-reading-demo", size: 640 },
+};
 const RECOVERY_CONFIDENCE_FLOOR = 0.001;
 const CLASS_NAMES = ["meter", "window", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
 const COLORS = ["#51a7ff", "#39e6c6", "#ffc66d", "#ffc66d", "#ffc66d", "#ffc66d", "#ffc66d", "#ffc66d", "#ffc66d", "#ffc66d", "#ffc66d", "#ffc66d"];
@@ -12,6 +14,10 @@ const elements = {
   runButton: document.querySelector("#runButton"),
   runLabel: document.querySelector("#runLabel"),
   modelStatus: document.querySelector("#modelStatus"),
+  activeModelName: document.querySelector("#activeModelName"),
+  activeModelInput: document.querySelector("#activeModelInput"),
+  activeModelSource: document.querySelector("#activeModelSource"),
+  modelButtons: [...document.querySelectorAll("[data-model]")],
   headerStatus: document.querySelector("#headerStatus"),
   headerStatusDot: document.querySelector("#headerStatusDot"),
   canvasWrap: document.querySelector("#canvasWrap"),
@@ -42,6 +48,10 @@ const elements = {
   historyList: document.querySelector("#historyList"),
   clearHistoryButton: document.querySelector("#clearHistoryButton"),
   applyRecommendedButton: document.querySelector("#applyRecommendedButton"),
+  settingsToggleButton: document.querySelector("#settingsToggleButton"),
+  settingsCloseButton: document.querySelector("#settingsCloseButton"),
+  settingsPanel: document.querySelector("#settingsPanel"),
+  settingsBackdrop: document.querySelector("#settingsBackdrop"),
   tabButtons: [...document.querySelectorAll("[data-tab]")],
   tabPanels: [...document.querySelectorAll("[data-tab-panel]")],
   toast: document.querySelector("#toast"),
@@ -49,6 +59,8 @@ const elements = {
 
 const context = elements.canvas.getContext("2d");
 let session = null;
+let activeModelKey = "aquavision";
+let modelLoadGeneration = 0;
 let selectedImage = null;
 let selectedObjectUrl = null;
 let running = false;
@@ -69,6 +81,10 @@ function unknownThreshold() {
   return Number(elements.unknownSlider.value) / 100;
 }
 
+function activeModel() {
+  return MODEL_CONFIGS[activeModelKey];
+}
+
 function showToast(message) {
   elements.toast.textContent = message;
   elements.toast.classList.add("show");
@@ -103,6 +119,28 @@ function applyRecommendedSettings() {
   showToast("Recommended settings applied: 10% / 45% / 40%");
 }
 
+function setSettingsOpen(open) {
+  elements.settingsPanel.classList.toggle("open", open);
+  elements.settingsBackdrop.classList.toggle("open", open);
+  elements.settingsPanel.setAttribute("aria-hidden", String(!open));
+  elements.settingsBackdrop.setAttribute("aria-hidden", String(!open));
+  elements.settingsToggleButton.setAttribute("aria-expanded", String(open));
+  document.body.classList.toggle("settings-open", open);
+  if (open) elements.settingsCloseButton.focus();
+}
+
+async function switchModel(modelKey) {
+  if (!MODEL_CONFIGS[modelKey] || modelKey === activeModelKey) return;
+  activeModelKey = modelKey;
+  elements.modelButtons.forEach((button) => button.classList.toggle("active", button.dataset.model === modelKey));
+  elements.activeModelName.textContent = activeModel().name;
+  elements.activeModelInput.textContent = `${activeModel().size} x ${activeModel().size}`;
+  elements.activeModelSource.href = activeModel().sourceUrl;
+  resetResults();
+  await loadModel();
+  showToast(`${activeModel().shortName} selected`);
+}
+
 function setSystemStatus(message, state = "ready") {
   elements.headerStatus.textContent = message;
   elements.headerStatusDot.className = state;
@@ -118,15 +156,26 @@ function updateRunButton() {
 }
 
 async function loadModel() {
+  const generation = ++modelLoadGeneration;
+  const model = activeModel();
   try {
-    setSystemStatus("Loading AI model", "loading");
+    const previousSession = session;
+    session = null;
+    updateRunButton();
+    setSystemStatus(`Loading ${model.shortName}`, "loading");
+    if (previousSession?.release) await previousSession.release();
     ort.env.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.2/dist/";
     ort.env.wasm.numThreads = 1;
-    session = await ort.InferenceSession.create(MODEL_URL, {
+    const nextSession = await ort.InferenceSession.create(model.url, {
       executionProviders: ["wasm"],
       graphOptimizationLevel: "all",
     });
-    setSystemStatus("AI model ready");
+    if (generation !== modelLoadGeneration) {
+      if (nextSession.release) await nextSession.release();
+      return;
+    }
+    session = nextSession;
+    setSystemStatus(`${model.shortName} ready`);
   } catch (error) {
     console.error(error);
     setSystemStatus("Model failed to load", "error");
@@ -199,22 +248,23 @@ function clearImage() {
 }
 
 function prepareInput(image) {
+  const modelSize = activeModel().size;
   const workCanvas = document.createElement("canvas");
-  workCanvas.width = MODEL_SIZE;
-  workCanvas.height = MODEL_SIZE;
+  workCanvas.width = modelSize;
+  workCanvas.height = modelSize;
   const workContext = workCanvas.getContext("2d", { willReadFrequently: true });
-  const scale = Math.min(MODEL_SIZE / image.naturalWidth, MODEL_SIZE / image.naturalHeight);
+  const scale = Math.min(modelSize / image.naturalWidth, modelSize / image.naturalHeight);
   const width = Math.round(image.naturalWidth * scale);
   const height = Math.round(image.naturalHeight * scale);
-  const padX = Math.floor((MODEL_SIZE - width) / 2);
-  const padY = Math.floor((MODEL_SIZE - height) / 2);
+  const padX = Math.floor((modelSize - width) / 2);
+  const padY = Math.floor((modelSize - height) / 2);
 
   workContext.fillStyle = "rgb(114, 114, 114)";
-  workContext.fillRect(0, 0, MODEL_SIZE, MODEL_SIZE);
+  workContext.fillRect(0, 0, modelSize, modelSize);
   workContext.drawImage(image, padX, padY, width, height);
 
-  const pixels = workContext.getImageData(0, 0, MODEL_SIZE, MODEL_SIZE).data;
-  const planeSize = MODEL_SIZE * MODEL_SIZE;
+  const pixels = workContext.getImageData(0, 0, modelSize, modelSize).data;
+  const planeSize = modelSize * modelSize;
   const input = new Float32Array(3 * planeSize);
   for (let pixel = 0, offset = 0; pixel < planeSize; pixel += 1, offset += 4) {
     input[pixel] = pixels[offset] / 255;
@@ -223,7 +273,7 @@ function prepareInput(image) {
   }
 
   return {
-    tensor: new ort.Tensor("float32", input, [1, 3, MODEL_SIZE, MODEL_SIZE]),
+    tensor: new ort.Tensor("float32", input, [1, 3, modelSize, modelSize]),
     scale,
     padX,
     padY,
@@ -579,7 +629,14 @@ elements.unknownSlider.addEventListener("input", () => {
   }
 });
 elements.tabButtons.forEach((button) => button.addEventListener("click", () => activateTab(button.dataset.tab)));
+elements.modelButtons.forEach((button) => button.addEventListener("click", () => switchModel(button.dataset.model)));
 elements.applyRecommendedButton.addEventListener("click", applyRecommendedSettings);
+elements.settingsToggleButton.addEventListener("click", () => setSettingsOpen(true));
+elements.settingsCloseButton.addEventListener("click", () => setSettingsOpen(false));
+elements.settingsBackdrop.addEventListener("click", () => setSettingsOpen(false));
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Escape" && elements.settingsPanel.classList.contains("open")) setSettingsOpen(false);
+});
 elements.clearHistoryButton.addEventListener("click", () => {
   localStorage.removeItem(HISTORY_KEY);
   renderHistory();

index.html

@@ -51,11 +51,16 @@
         <div class="model-card" aria-label="Model information">
           <div class="model-card-head">
             <span class="model-orbit"><i></i></span>
-            <div><small>ACTIVE MODEL</small><strong>YOLO12n · WMRS</strong></div>
+            <div><small>ACTIVE MODEL</small><strong id="activeModelName">YOLO12n · AquaVision</strong></div>
             <span class="live-tag">LIVE</span>
           </div>
+          <div class="model-selector" role="group" aria-label="Choose inference model">
+            <button class="model-option active" type="button" data-model="aquavision"><b>AquaVision</b><small>YOLO12n</small></button>
+            <button class="model-option" type="button" data-model="beni"><b>Beni</b><small>YOLOv8n</small></button>
+          </div>
+          <a id="activeModelSource" class="active-model-source" href="https://huggingface.co/kagabo/hf_water_meter_models" target="_blank" rel="noreferrer">Open active model source ↗</a>
           <dl>
-            <div><dt>Input</dt><dd>960 x 960</dd></div>
+            <div><dt>Input</dt><dd id="activeModelInput">960 x 960</dd></div>
             <div><dt>Classes</dt><dd>12</dd></div>
             <div><dt>Runtime</dt><dd>ONNX Web</dd></div>
           </dl>
@@ -87,17 +92,22 @@
             </div>
           </article>
 
-          <button id="runButton" class="analyze-button" type="button" disabled>
-            <span class="button-icon"><svg viewBox="0 0 24 24"><path d="m13 2-2 8h7l-9 12 2-8H4l9-12Z"/></svg></span>
-            <span><b id="runLabel">Preparing AI model</b><small>Run local computer vision</small></span>
-            <svg class="button-arrow" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
-          </button>
+          <div class="primary-actions">
+            <button id="runButton" class="analyze-button" type="button" disabled>
+              <span class="button-icon"><svg viewBox="0 0 24 24"><path d="m13 2-2 8h7l-9 12 2-8H4l9-12Z"/></svg></span>
+              <span><b id="runLabel">Preparing AI model</b><small>Run local computer vision</small></span>
+              <svg class="button-arrow" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
+            </button>
+            <button id="settingsToggleButton" class="settings-toggle" type="button" aria-controls="settingsPanel" aria-expanded="false"><span>⚙</span><b>Tune settings</b></button>
+          </div>
           <div id="modelStatus" class="model-status" role="status" aria-live="polite"><i class="loading"></i>Loading model for first use...</div>
 
-          <article class="glass-panel settings-panel">
+          <div id="settingsBackdrop" class="settings-backdrop" aria-hidden="true"></div>
+          <article id="settingsPanel" class="glass-panel settings-panel" aria-hidden="true" aria-label="Detection settings">
             <div class="section-title compact">
               <span class="step-number">02</span>
               <div><small>AI CONTROL</small><h2>Detection settings</h2></div>
+              <button id="settingsCloseButton" class="drawer-close" type="button" aria-label="Close settings">×</button>
             </div>
             <label class="range-control">
               <span><b>Confidence threshold</b><output id="confidenceValue">10%</output></span>
@@ -184,7 +194,7 @@
       <section class="performance-section" id="model-performance">
         <div class="performance-heading">
           <div>
-            <div class="kicker"><span></span> VALIDATION EVIDENCE</div>
+            <div class="kicker"><span></span> AQUAVISION YOLO12N VALIDATION EVIDENCE</div>
             <h2>How well does the model perform?</h2>
             <p>Aggregate object-detection results from the final clean YOLO12n model on the held-out 52-image combat test set.</p>
           </div>

models/beni_yolov8n_water_meter.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fdf3016d0081d2a6eb0885d643790baf7620e31e972de91da13c77d1570d0bd3
+size 12247048

styles.css

@@ -63,6 +63,13 @@ svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-l
 #tab-reader .model-orbit { width: 30px; height: 30px; }
 #tab-reader .model-card dl { margin-top: 9px; }
 #tab-reader .model-card dl div { gap: 2px; }
+.model-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 9px; }
+.model-option { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.02); cursor: pointer; }
+.model-option b { font-size: 8px; }
+.model-option small { font-size: 7px; }
+.model-option.active { color: #031713; border-color: var(--aqua); background: var(--aqua); }
+.active-model-source { display: block; margin-top: 6px; color: var(--muted); font-size: 7px; text-align: right; text-decoration: none; }
+.active-model-source:hover { color: var(--aqua); }
 #tab-reader .upload-panel, #tab-reader .settings-panel { padding: 15px; }
 #tab-reader .upload-panel .section-title { margin-bottom: 10px; }
 #tab-reader .drop-zone { min-height: 138px; gap: 4px; padding: 13px; }
@@ -72,10 +79,21 @@ svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-l
 #tab-reader .settings-panel { gap: 11px; }
 #tab-reader .range-control { gap: 5px; }
 #tab-reader .range-control small { line-height: 1.3; }
-#tab-reader .analyze-button { order: 2; }
+#tab-reader .primary-actions { order: 2; }
 #tab-reader .model-status { order: 3; margin-top: -7px; }
-#tab-reader .settings-panel { order: 4; }
 #tab-reader .canvas-wrap { min-height: 380px; }
+.primary-actions { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 9px; }
+.settings-toggle { display: grid; place-items: center; align-content: center; gap: 3px; padding: 8px; border: 1px solid var(--line-bright); border-radius: 14px; color: var(--aqua); background: rgba(57,230,198,.06); cursor: pointer; }
+.settings-toggle span { font-size: 17px; line-height: 1; }
+.settings-toggle b { font-size: 8px; }
+.settings-toggle:hover { background: rgba(57,230,198,.12); }
+.settings-backdrop { position: fixed; inset: 0; z-index: 54; visibility: hidden; background: rgba(2,8,15,.62); opacity: 0; backdrop-filter: blur(3px); transition: .2s ease; }
+.settings-backdrop.open { visibility: visible; opacity: 1; }
+#tab-reader .settings-panel { position: fixed; z-index: 55; top: 92px; right: max(20px, calc((100vw - 1240px) / 2)); width: min(370px, calc(100vw - 28px)); max-height: calc(100vh - 116px); overflow-y: auto; padding: 22px; visibility: hidden; opacity: 0; transform: translateX(24px); pointer-events: none; transition: .22s ease; }
+#tab-reader .settings-panel.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
+.drawer-close { width: 30px; height: 30px; display: grid; place-items: center; margin-left: auto; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.025); font-size: 19px; cursor: pointer; }
+.drawer-close:hover { color: var(--text); border-color: var(--line-bright); }
+body.settings-open { overflow: hidden; }
 .intro { display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: end; gap: 48px; margin-bottom: 38px; }
 .kicker { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; color: var(--aqua); font: 800 10px ui-monospace, monospace; letter-spacing: .18em; }
 .kicker span { width: 22px; height: 1px; background: var(--aqua); box-shadow: 0 0 8px var(--aqua); }
@@ -344,6 +362,8 @@ footer strong { color: #c8d4de; }
   .tech-strip { grid-template-columns: 1fr; }
   .tech-strip > div { border-left: 0; border-top: 1px solid var(--line); }
   .reading-flow { grid-template-columns: 1fr; }
+  .primary-actions { grid-template-columns: 1fr 96px; }
+  #tab-reader .settings-panel { inset: auto 0 0; width: 100%; max-height: 82dvh; border-radius: 20px 20px 0 0; transform: translateY(24px); }
   .tech-strip > div:first-child { border-top: 0; }
   footer { width: calc(100% - 20px); align-items: flex-start; gap: 18px; }
   footer > div:first-child { flex-direction: column; gap: 3px; }