Upload folder using huggingface_hub

web_demo/static/app.js

@@ -15,7 +15,7 @@ const fingerBreakdown = document.getElementById("fingerBreakdown");
 const defaultSampleUrl = window.DEFAULT_SAMPLE_URL || "";
 const failReasonMessageMap = {
   card_not_detected:
-    "Card not detected. A card of standard credit card dimensions (85.6 × 54 mm) is required as a scale reference to measure your finger width. Place the card beside your hand on a plain white background (e.g. a sheet of paper), and turn on your phone's flash.",
+    "Card not detected. A card of standard credit card dimensions (85.6 × 54 mm) is required as a scale reference to measure your finger diameter. Place the card beside your hand on a plain white background (e.g. a sheet of paper), and turn on your phone's flash.",
   card_not_parallel:
     "Card scale calibration failed. Keep your phone parallel to the card. Use a card of standard credit card dimensions (85.6 × 54 mm) as the reference.",
   card_near_edge:
@@ -39,11 +39,11 @@ const failReasonMessageMap = {
   zone_localization_failed:
     "Ring zone localization failed. Keep more of the finger base visible.",
   width_measurement_failed:
-    "Width measurement failed. Retake with phone parallel to the table and steady focus.",
+    "Diameter measurement failed. Retake with phone parallel to the table and steady focus.",
   sobel_edge_refinement_failed:
     "Edge refinement failed. Turn on flash or use stronger, even lighting.",
   width_unreasonable:
-    "Measured width is out of range. Retake with the phone parallel to the table.",
+    "Measured diameter is out of range. Retake with the phone parallel to the table.",
   disagreement_with_contour:
     "Edge methods disagree too much. Retake with cleaner edges and more even lighting.",
   all_fingers_failed:
@@ -134,7 +134,7 @@ const buildSizeRefTable = () => {
     <div class="size-ref-table">
       <h3 class="size-ref-title">Size Reference (${modelLabel})</h3>
       <table>
-        <thead><tr><th>Size</th><th>Inner ⌀ (mm)</th></tr></thead>
+        <thead><tr><th>Size</th><th>Inner Diameter (mm)</th></tr></thead>
         <tbody>${rows}</tbody>
       </table>
     </div>`;
@@ -150,7 +150,7 @@ const renderMultiResult = (result) => {
   overallSize.innerHTML = "";
 
   // Per-finger cards: size + range + width
-  const fingerNames = { index: "Index (Recommended)", middle: "Middle", ring: "Ring" };
+  const fingerNames = { index: "Index Finger", middle: "Middle Finger", ring: "Ring Finger" };
   const fingerColors = { index: "#00dddd", middle: "#00cc44", ring: "#dd44dd" };
   let html = '<div class="finger-cards">';
   for (const [fn, label] of Object.entries(fingerNames)) {
@@ -158,7 +158,9 @@ const renderMultiResult = (result) => {
     if (!pf) continue;
     const color = fingerColors[fn] || "#888";
     const ok = pf.status === "ok";
+    const badge = fn === "index" ? `<span class="finger-badge">Recommended</span>` : "";
     html += `<div class="finger-card" style="border-top: 3px solid ${color};">
+      ${badge}
       <div class="finger-name">${label}</div>`;
     if (ok) {
       const size = pf.best_match;
@@ -168,7 +170,7 @@ const renderMultiResult = (result) => {
       if (range) {
         html += `<div class="finger-range">Range: ${range[0]} – ${range[1]}</div>`;
       }
-      html += `<div class="finger-width">Width: ${(pf.diameter_cm * 10).toFixed(1)} mm</div>`;
+      html += `<div class="finger-width">Diameter: ${(pf.diameter_cm * 10).toFixed(1)} mm</div>`;
     } else {
       html += `<div class="finger-failed">Failed</div>
         <div class="finger-fail-reason">${pf.fail_reason || "unknown"}</div>`;

web_demo/static/mobile/mobile.css

@@ -724,10 +724,16 @@ body {
   display: flex;
   flex-direction: column;
   gap: 10px;
+  /* Padding-top (not margin-top) clears the floating "Recommended"
+     badge that overhangs the first card at top: -12px. Margin-top
+     would collapse with .panel-title's margin-bottom: 14px and produce
+     no visible change; padding doesn't collapse. */
+  padding-top: 16px;
   margin-bottom: 12px;
 }
 
 .finger-card {
+  position: relative;
   background: var(--sand);
   border-radius: 10px;
   padding: 14px 16px 16px;
@@ -735,6 +741,22 @@ body {
   box-shadow: 0 1px 4px var(--shadow);
 }
 
+.finger-card .finger-badge {
+  position: absolute;
+  top: -12px;
+  right: 12px;
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 5px 12px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+  line-height: 1;
+  box-shadow: 0 1px 3px var(--shadow);
+}
+
 .finger-card .finger-name {
   font-weight: 600;
   font-size: 0.95rem;
@@ -766,7 +788,7 @@ body {
 }
 
 .finger-card .finger-width {
-  font-size: 0.85rem;
+  font-size: 0.9rem;
   color: var(--ink-soft);
   margin-top: 4px;
 }
@@ -792,6 +814,7 @@ body {
   text-align: center;
   font-size: 0.85rem;
   color: var(--ink-soft);
+  margin-top: 8px;
   margin-bottom: 12px;
 }
 
@@ -809,7 +832,7 @@ body {
   margin: 0 0 8px;
   color: var(--ink);
   /* Center the model-label heading so it lines up with the centered
-     SIZE / Inner ⌀ (mm) columns below — same alignment story as
+     SIZE / Inner Diameter (mm) columns below — same alignment story as
      the desktop. */
   /*text-align: center;*/
 }

web_demo/static/mobile/steps/capture.js

@@ -71,8 +71,8 @@ function evaluateDistance(T) {
   // green / amber / red) to a strict 3-state read: too far / OK /
   // too close. The amber soft-zone is gone — clearer single-action
   // feedback at the cost of fewer intermediate hints.
-  const minRatio = T.HAND_SPAN_RATIO_MIN ?? 0.28;
-  const maxRatio = T.HAND_SPAN_RATIO_MAX ?? 0.55;
+  const minRatio = T.HAND_SPAN_RATIO_MIN ?? 0.3;
+  const maxRatio = T.HAND_SPAN_RATIO_MAX ?? 0.45;
 
   let result = null;
   try {

web_demo/static/mobile/steps/result.js

@@ -10,9 +10,9 @@ import { session, resetForRetake } from "../session.js";
 import { formatFailReason } from "../../shared/fail-reasons.js";
 
 const FINGER_LABEL = {
-  index: "Index (Recommended)",
-  middle: "Middle",
-  ring: "Ring",
+  index: "Index Finger",
+  middle: "Middle Finger",
+  ring: "Ring Finger",
 };
 const FINGER_COLOR = {
   index: "#00dddd",
@@ -35,9 +35,11 @@ function escape(s) {
 function fingerCardHtml(fn, pf) {
   const label = FINGER_LABEL[fn] || fn;
   const color = FINGER_COLOR[fn] || "#888";
+  const badge = fn === "index" ? `<span class="finger-badge">Recommended</span>` : "";
   if (pf.status !== "ok") {
     return `
       <div class="finger-card finger-card-failed" style="border-top: 3px solid ${color};">
+        ${badge}
         <div class="finger-name">${escape(label)}</div>
         <div class="finger-failed">Failed</div>
         <div class="finger-fail-reason">${escape(pf.fail_reason || "unknown")}</div>
@@ -48,11 +50,12 @@ function fingerCardHtml(fn, pf) {
   const range = pf.range ? `${pf.range[0]} – ${pf.range[1]}` : "";
   return `
     <div class="finger-card" style="border-top: 3px solid ${color};">
+      ${badge}
       <div class="finger-name">${escape(label)}</div>
       <div class="finger-size-label">Size</div>
       <div class="finger-size">${escape(pf.best_match)}</div>
       ${range ? `<div class="finger-range">Range: ${escape(range)}</div>` : ""}
-      <div class="finger-width">Width: ${escape(widthMm)} mm</div>
+      <div class="finger-width">Diameter: ${escape(widthMm)} mm</div>
     </div>
   `;
 }
@@ -67,7 +70,7 @@ function buildSizeRefTable(ringModel) {
     <div class="size-ref-table">
       <h3 class="size-ref-title">Size Reference (${escape(modelLabel)})</h3>
       <table>
-        <thead><tr><th>Size</th><th>Inner ⌀ (mm)</th></tr></thead>
+        <thead><tr><th>Size</th><th>Inner Diameter (mm)</th></tr></thead>
         <tbody>${rows}</tbody>
       </table>
     </div>
@@ -89,12 +92,12 @@ function renderRecommendation(payload, ringModel) {
   }
   const succeeded = (payload && payload.fingers_succeeded) ?? 0;
   const total = (payload && payload.fingers_measured) ?? 0;
-  // Count above the cards (not below) so the user reads
-  // "X/Y fingers measured" first and immediately understands the
-  // cards are a per-finger breakdown rather than a single result.
+  // Count below the cards so it reads as a footnote/summary on mobile;
+  // the cards themselves are large enough to communicate that this is
+  // a per-finger breakdown without a leading label.
   return `
-    <div class="finger-count">${escape(`${succeeded}/${total} fingers measured`)}</div>
     ${cards ? `<div class="finger-cards">${cards}</div>` : ""}
+    <div class="finger-count">${escape(`${succeeded}/${total} fingers measured`)}</div>
     ${buildSizeRefTable(ringModel)}
   `;
 }
@@ -128,22 +131,26 @@ export default {
         </div>
       `;
 
+    // The server always sends a result_image_url, but on hard failures
+    // (e.g. hand_not_detected) no PNG is actually written and the URL
+    // 404s. Soft failures (e.g. card_not_detected — hand was detected,
+    // mask was rendered) DO produce a partial overlay PNG that's useful
+    // for the user. So don't gate on `succeeded`; always try to load
+    // the image, and rely on <img onerror> to remove a broken one. CSS
+    // gives .image-frame a min-height and soft background, so an empty
+    // frame reads as a clean placeholder.
+    const overlayInner = overlayUrl
+      ? `<img src="${escape(overlayUrl)}" alt="Measurement overlay"
+              onerror="this.remove()" />`
+      : "";
     container.innerHTML = `
       <section class="step step-result">
         <div class="step-body">
           ${statusBanner}
-          ${
-            overlayUrl
-              ? `
-                <div class="panel">
-                  <h2 class="panel-title">Result Overlay</h2>
-                  <div class="image-frame show">
-                    <img src="${escape(overlayUrl)}" alt="Measurement overlay" />
-                  </div>
-                </div>
-              `
-              : ""
-          }
+          <div class="panel">
+            <h2 class="panel-title">Result Overlay</h2>
+            <div class="image-frame show">${overlayInner}</div>
+          </div>
 
           <div class="panel">
             <h2 class="panel-title">Ring Size Recommendation</h2>

web_demo/static/preview/thresholds.js

@@ -8,25 +8,24 @@
 
 window.PreviewThresholds = (function () {
   // Distance: ‖landmark[5] - landmark[17]‖ / min(videoWidth, videoHeight).
-  // Originally 0.239 (P10 of the success cohort) — narrowed to 0.3 on
-  // 2026-05-07 after user feedback that the previous bound accepted
-  // too many "still a bit far" frames as green.
-  const HAND_SPAN_RATIO_MIN = 0.3;
-
-  // Soft amber threshold (desktop only — mobile collapsed to red/green
-  // on the same date). Between 80% of the hard threshold and the
-  // threshold itself, the desktop UI shows "almost there".
-  const HAND_SPAN_RATIO_AMBER = HAND_SPAN_RATIO_MIN * 0.8;
+  // Tightened to the calibration-corpus distribution on 2026-05-09 after a
+  // KOL repro (Saun Jayy, n=5) showed monotonic diameter inflation when
+  // hand_span_ratio drifted above the calibration P90 — every +0.01 in
+  // ratio added ~0.04 cm to the index diameter, producing a 3-size spread
+  // across one user. New bounds bracket the calibration corpus
+  // (input/calibration_dataset/jpg, n=22): min 0.308, P10 0.318, P50 0.340,
+  // P90 0.372, max 0.389. Outside this band the calibration coefficient
+  // extrapolates and the per-user variance balloons.
+  const HAND_SPAN_RATIO_MIN = 0.3; // a touch below calibration min (0.308); generous floor
+  const HAND_SPAN_RATIO_AMBER = HAND_SPAN_RATIO_MIN * 0.95;
 
   // Upper distance bound. MediaPipe still returns landmarks when the hand
   // partially clips the frame, so without an upper threshold the gate
   // reads "Distance OK" even when the camera is too close — at which
   // point there is no room left for the credit card and lens distortion
-  // biases the edge measurement. Tightened from 0.55 → 0.5 on
-  // 2026-05-07 alongside the lower-bound bump; pending a P90 sweep of
-  // the success cohort via analyze_hand_span.py.
-  const HAND_SPAN_RATIO_MAX = 0.5;
-  const HAND_SPAN_RATIO_MAX_AMBER = HAND_SPAN_RATIO_MAX * 0.88;
+  // biases the edge measurement.
+  const HAND_SPAN_RATIO_MAX = 0.45; // ≈ calibration max (0.389) + ~0.06 headroom
+  const HAND_SPAN_RATIO_MAX_AMBER = HAND_SPAN_RATIO_MAX * 0.95;
 
   // Level: DeviceOrientationEvent beta (front-back) and gamma (left-right) in
   // degrees. Tightened from 10° to 5° on 2026-05-07 — the previous

web_demo/static/shared/fail-reasons.js

@@ -8,7 +8,7 @@
 
 export const FAIL_REASON_MESSAGES = {
   card_not_detected:
-    "Card not detected. A card of standard credit card dimensions (85.6 × 54 mm) is required as a scale reference to measure your finger width. Place the card beside your hand on a plain white background (e.g. a sheet of paper), and turn on your phone's flash.",
+    "Card not detected. A card of standard credit card dimensions (85.6 × 54 mm) is required as a scale reference to measure your finger diameter. Place the card beside your hand on a plain white background (e.g. a sheet of paper), and turn on your phone's flash.",
   card_not_parallel:
     "Card scale calibration failed. Keep your phone parallel to the card. Use a card of standard credit card dimensions (85.6 × 54 mm) as the reference.",
   card_near_edge:
@@ -32,11 +32,11 @@ export const FAIL_REASON_MESSAGES = {
   zone_localization_failed:
     "Ring zone localization failed. Keep more of the finger base visible.",
   width_measurement_failed:
-    "Width measurement failed. Retake with phone parallel to the table and steady focus.",
+    "Diameter measurement failed. Retake with phone parallel to the table and steady focus.",
   sobel_edge_refinement_failed:
     "Edge refinement failed. Turn on flash or use stronger, even lighting.",
   width_unreasonable:
-    "Measured width is out of range. Retake with the phone parallel to the table.",
+    "Measured diameter is out of range. Retake with the phone parallel to the table.",
   disagreement_with_contour:
     "Edge methods disagree too much. Retake with cleaner edges and more even lighting.",
   all_fingers_failed:

web_demo/static/styles.css

@@ -369,6 +369,7 @@ pre {
 }
 
 .finger-card {
+  position: relative;
   background: var(--sand);
   border-radius: 8px;
   padding: 12px;
@@ -376,6 +377,22 @@ pre {
   box-shadow: 0 1px 4px var(--shadow);
 }
 
+.finger-card .finger-badge {
+  position: absolute;
+  top: -10px;
+  right: 10px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 4px 10px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: #fff;
+  line-height: 1;
+  box-shadow: 0 1px 3px var(--shadow);
+}
+
 .finger-card .finger-name {
   font-weight: 600;
   font-size: 0.9rem;