Recover uncertain trailing digits and use Poppins

README.md

@@ -18,5 +18,8 @@ The interface includes final-model validation metrics and evidence from the
 52-image combat test. During prediction, low-confidence digit detections are
 shown as `?` in the safe reading while preserving the model's raw digit guess;
 `unknown` is post-processing logic, not a trained class in the final model.
+The browser decoder can also recover one very-low-confidence trailing digit
+when it is inside the detected window and follows the established digit spacing.
+Recovered digits remain unknown (`?`) unless they pass the unknown threshold.
 
 Source model: [`kagabo/hf_water_meter_models`](https://huggingface.co/kagabo/hf_water_meter_models)

app.js

@@ -1,5 +1,6 @@
 const MODEL_SIZE = 960;
 const MODEL_URL = "models/new_clean_yolo12n_raw_pascal_best.onnx";
+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"];
 const HISTORY_KEY = "aquavision-reading-history-v1";
@@ -220,7 +221,7 @@ function decodeOutput(output, transform, image) {
         classId = channel - 4;
       }
     }
-    if (confidence < confidenceThreshold() || classId >= CLASS_NAMES.length) continue;
+    if (confidence < RECOVERY_CONFIDENCE_FLOOR || classId >= CLASS_NAMES.length) continue;
 
     const cx = outputValue(output, 0, prediction, channels, count);
     const cy = outputValue(output, 1, prediction, channels, count);
@@ -235,7 +236,9 @@ function decodeOutput(output, transform, image) {
   }
 
   candidates.sort((a, b) => b.confidence - a.confidence);
-  return nonMaxSuppression(candidates.slice(0, 1000));
+  const allDetections = nonMaxSuppression(candidates.slice(0, 1000));
+  const regularDetections = allDetections.filter((item) => item.confidence >= confidenceThreshold());
+  return recoverTrailingDigit(allDetections, regularDetections);
 }
 
 function intersectionOverUnion(a, b) {
@@ -267,6 +270,65 @@ function centerInside(box, container) {
   return centerX >= container.x1 && centerX <= container.x2 && centerY >= container.y1 && centerY <= container.y2;
 }
 
+function median(values) {
+  if (!values.length) return 0;
+  const sorted = [...values].sort((a, b) => a - b);
+  const middle = Math.floor(sorted.length / 2);
+  return sorted.length % 2 ? sorted[middle] : (sorted[middle - 1] + sorted[middle]) / 2;
+}
+
+function recoverTrailingDigit(allDetections, regularDetections) {
+  const bestWindow = regularDetections
+    .filter((item) => item.classId === 1)
+    .sort((a, b) => b.confidence - a.confidence)[0];
+  if (!bestWindow) return regularDetections;
+
+  const trustedDigits = regularDetections
+    .filter((item) => item.classId >= 2 && item.classId <= 11 && centerInside(item, bestWindow))
+    .sort((a, b) => (a.x1 + a.x2) / 2 - (b.x1 + b.x2) / 2);
+  if (trustedDigits.length < 4) return regularDetections;
+
+  const centers = trustedDigits.map((item) => (item.x1 + item.x2) / 2);
+  const pitch = median(centers.slice(1).map((center, index) => center - centers[index]));
+  if (pitch <= 0) return regularDetections;
+
+  const lastCenter = centers.at(-1);
+  const expectedCenter = lastCenter + pitch;
+  const medianY = median(trustedDigits.map((item) => (item.y1 + item.y2) / 2));
+  const medianHeight = median(trustedDigits.map((item) => item.y2 - item.y1));
+
+  const candidates = allDetections
+    .filter((item) => (
+      item.classId >= 2
+      && item.classId <= 11
+      && item.confidence < confidenceThreshold()
+      && centerInside(item, bestWindow)
+    ))
+    .map((item) => {
+      const centerX = (item.x1 + item.x2) / 2;
+      const centerY = (item.y1 + item.y2) / 2;
+      return {
+        item,
+        centerX,
+        positionError: Math.abs(centerX - expectedCenter),
+        verticalError: Math.abs(centerY - medianY),
+      };
+    })
+    .filter(({ centerX, positionError, verticalError }) => (
+      centerX > lastCenter + pitch * 0.45
+      && centerX < lastCenter + pitch * 1.6
+      && positionError <= pitch * 0.55
+      && verticalError <= Math.max(4, medianHeight * 0.7)
+    ))
+    .sort((a, b) => (
+      (a.positionError / pitch) - (b.positionError / pitch)
+      || b.item.confidence - a.item.confidence
+    ));
+
+  if (!candidates.length) return regularDetections;
+  return [...regularDetections, { ...candidates[0].item, recovered: true }];
+}
+
 function reconstructReading(detections) {
   const windows = detections.filter((item) => item.classId === 1);
   let digits = detections.filter((item) => item.classId >= 2 && item.classId <= 11);

index.html

@@ -7,6 +7,9 @@
     <meta name="description" content="A privacy-first AI system for detecting and reading water meters." />
     <title>AquaVision AI | Water Meter Reader</title>
     <link rel="preconnect" href="https://cdn.jsdelivr.net" />
+    <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=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="styles.css" />
     <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.23.2/dist/ort.min.js"></script>
     <script src="app.js" defer></script>

styles.css

@@ -18,7 +18,7 @@
 
 * { box-sizing: border-box; }
 html { scroll-behavior: smooth; }
-body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
+body { margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
 body::before { content: ""; position: fixed; inset: 0; z-index: -3; opacity: .28; background-image: linear-gradient(rgba(87, 145, 180, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(87, 145, 180, .08) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
 button, input { font: inherit; }
 button, a { -webkit-tap-highlight-color: transparent; }