Upload folder using huggingface_hub

measure_finger.py

@@ -40,6 +40,7 @@ from src.confidence import (
     compute_overall_confidence,
 )
 from src.debug_observer import draw_comprehensive_edge_overlay, draw_hand_skeleton
+from src.visualization import draw_card_overlay
 from src.ring_size import recommend_ring_size, aggregate_ring_sizes, VALID_RING_MODELS, DEFAULT_RING_MODEL
 from src.image_quality import (
     check_card_in_frame,
@@ -997,10 +998,14 @@ def measure_finger(
         # Tint SAM hand + card masks as underlays. Both masks live in the
         # pre-precise-rotation canonical frame, so apply the same rotation
         # matrix that was used to align the finger.
+        # Only the hand SAM mask gets tinted as an underlay. The card SAM
+        # mask often has stray blobs outside the actual card rectangle; the
+        # detected corners already give us a clean quadrilateral, so we
+        # shade that via draw_card_overlay below instead.
         debug_image = _overlay_sam_masks(
             debug_image,
             hand_mask=hand_data.get("mask") if hand_data else None,
-            card_mask=card_result.get("mask") if card_result else None,
+            card_mask=None,
             rotation_matrix=rotation_matrix,
         )
 
@@ -1013,16 +1018,16 @@ def measure_finger(
             rotation_matrix=rotation_matrix,
         )
 
-        # Draw card bounding box (transform corners if image was rotated)
-        if card_result is not None and "corners" in card_result:
-            corners = card_result["corners"]
-            if corners is not None:
-                pts = np.array(corners, dtype=np.float32)
-                if rotation_matrix is not None:
-                    pts = transform_points_rotation(pts, rotation_matrix)
-                pts = pts.astype(np.int32).reshape((-1, 1, 2))
-                cv2.polylines(debug_image, [pts], isClosed=True,
-                              color=(0, 255, 0), thickness=3, lineType=cv2.LINE_AA)
+        # Shade + outline the card using its detected corner rectangle.
+        if card_result is not None and card_result.get("corners") is not None:
+            pts = np.asarray(card_result["corners"], dtype=np.float32)
+            if rotation_matrix is not None:
+                pts = transform_points_rotation(pts, rotation_matrix)
+            draw_card_overlay(
+                debug_image,
+                {"corners": pts},
+                scale_px_per_cm=px_per_cm,
+            )
 
         # Save result image (downscaled + JPEG-encoded for speed)
         _save_debug_visualization(result_png_path, debug_image)
@@ -1468,11 +1473,13 @@ def _draw_multi_finger_debug(
     vis = image_canonical.copy()
     h, w = vis.shape[:2]
 
-    # SAM silhouettes (hand + card) as tinted underlays
+    # Hand SAM silhouette as a tinted underlay. The card is shaded via its
+    # clean corner rectangle in draw_card_overlay() below rather than the
+    # raw SAM mask (which often has stray blobs outside the card boundary).
     vis = _overlay_sam_masks(
         vis,
         hand_mask=hand_mask,
-        card_mask=(card_result.get("mask") if card_result else None),
+        card_mask=None,
     )
 
     # MediaPipe hand skeleton (canonical frame — no rotation needed since the

src/visualization.py

@@ -129,10 +129,22 @@ def draw_card_overlay(
     card_result: Dict[str, Any],
     scale_px_per_cm: Optional[float] = None,
 ) -> np.ndarray:
-    """Draw credit card detection overlay."""
-    corners = card_result["corners"].astype(np.int32)
+    """Draw credit card detection overlay.
+
+    The card region is highlighted by shading just the detected corner
+    rectangle (not the raw SAM mask, which can have noisy overspill). A
+    solid outline with TL/TR/BR/BL corner labels is drawn on top.
+    """
+    corners = np.asarray(card_result["corners"], dtype=np.int32)
     params = get_scaled_font_params(image.shape[0])
 
+    # Semi-transparent fill inside the corner quadrilateral. Avoids the
+    # visual clutter of drawing the raw SAM mask (which often has stray
+    # blobs outside the real card boundary).
+    tint = np.zeros_like(image)
+    cv2.fillConvexPoly(tint, corners, Color.CARD)
+    cv2.addWeighted(image, 1.0, tint, 0.22, 0, dst=image)
+
     # Draw quadrilateral
     cv2.polylines(image, [corners], isClosed=True, color=Color.CARD,
                   thickness=params["contour_thickness"])

web_demo/static/app.js

@@ -108,8 +108,9 @@ const buildMeasureSettings = () => {
   const aiToggle = document.getElementById("aiExplainToggle");
   const mode = modeSelect ? modeSelect.value : "multi";
   const ringModel = ringModelSelect ? ringModelSelect.value : "gen";
-  // Hidden inputs (non-dev mode) have no `checked` property — treat as on.
-  const aiOn = aiToggle ? (aiToggle.type === "checkbox" ? aiToggle.checked : true) : false;
+  // AI explanation is off by default. Dev mode shows a checkbox the user
+  // can opt into; non-dev mode has no UI control and therefore stays off.
+  const aiOn = aiToggle && aiToggle.type === "checkbox" ? aiToggle.checked : false;
   return {
     finger_index: fingerSelect ? fingerSelect.value : "index",
     edge_method: "mask",

web_demo/templates/index.html

@@ -26,11 +26,12 @@
           <span class="file-hint">JPG / PNG supported · 1080p or higher recommended</span>
         </label>
 
-        <ul class="capture-tips" hidden>
-          <li><strong>Turn on your phone's flash</strong>, it helps sharpen the finger edges.</li>
+        <ul class="capture-tips">
+          <li><strong>Turn on your phone's flash</strong>, it sharpens finger edges.</li>
+          <li>Hold phone <strong>directly above</strong> hand, <strong>parallel</strong> to table.</li>
           <li><strong>Use plain white background</strong>, a sheet of paper works great.</li>
-          <li><strong>Spread your fingers naturally</strong>, place the card beside your hand.</li>
-          <li>Hold the phone <strong>directly above</strong> your hand, keep it <strong>parallel</strong> to the table.</li>
+          <li><strong>Spread your fingers naturally</strong>.</li>
+          <li>Place the card <strong>beside your hand</strong>, fully visible.</li>
         </ul>
 
         <div class="controls">
@@ -66,7 +67,7 @@
           <label class="toggle-label">
             <span>AI Explanation</span>
             <div class="toggle-row">
-              <input type="checkbox" id="aiExplainToggle" checked />
+              <input type="checkbox" id="aiExplainToggle" />
               <span class="toggle-hint">Uses OpenAI tokens</span>
             </div>
           </label>