Upload folder using huggingface_hub

web_demo/app.py

@@ -9,6 +9,7 @@ from __future__ import annotations
 import csv
 import io
 import json
+import os
 import sys
 import uuid
 from pathlib import Path
@@ -25,7 +26,7 @@ sys.path.insert(0, str(ROOT_DIR))
 from measure_finger import measure_finger, measure_multi_finger, apply_calibration
 from src.ring_size import recommend_ring_size, RING_MODELS, VALID_RING_MODELS, DEFAULT_RING_MODEL
 from src.ai_recommendation import ai_explain_recommendation
-from web_demo.supabase_client import upload_file, save_measurement, list_measurements, update_ground_truth
+from web_demo.supabase_client import upload_file, save_measurement, list_measurements, update_ground_truth, delete_measurement
 
 APP_ROOT = Path(__file__).resolve().parent
 UPLOAD_DIR = APP_ROOT / "uploads"
@@ -358,19 +359,31 @@ def _run_multi_measurement(
 # Admin routes
 # ---------------------------------------------------------------------------
 
+ADMIN_TOKEN = os.environ.get("ADMIN_TOKEN", "ringsizer2026")
+
+
 @app.route("/admin")
 def admin_page():
     return render_template("admin.html")
 
 
+def _check_admin_token():
+    token = request.args.get("token") or request.headers.get("X-Admin-Token")
+    return token == ADMIN_TOKEN
+
+
 @app.route("/api/admin/measurements")
 def api_admin_measurements():
+    if not _check_admin_token():
+        return jsonify({"error": "Unauthorized"}), 401
     rows = list_measurements(limit=500)
     return jsonify(rows)
 
 
 @app.route("/api/admin/measurements/<measurement_id>/ground-truth", methods=["POST"])
 def api_admin_update_gt(measurement_id: str):
+    if not _check_admin_token():
+        return jsonify({"error": "Unauthorized"}), 401
     data = request.get_json(silent=True) or {}
     ok = update_ground_truth(measurement_id, data)
     if ok:
@@ -378,8 +391,20 @@ def api_admin_update_gt(measurement_id: str):
     return jsonify({"success": False, "error": "Update failed"}), 400
 
 
+@app.route("/api/admin/measurements/<measurement_id>", methods=["DELETE"])
+def api_admin_delete(measurement_id: str):
+    if not _check_admin_token():
+        return jsonify({"error": "Unauthorized"}), 401
+    ok = delete_measurement(measurement_id)
+    if ok:
+        return jsonify({"success": True})
+    return jsonify({"success": False, "error": "Delete failed"}), 400
+
+
 @app.route("/api/admin/export-csv")
 def api_admin_export_csv():
+    if not _check_admin_token():
+        return jsonify({"error": "Unauthorized"}), 401
     rows = list_measurements(limit=5000)
     output = io.StringIO()
     fieldnames = [
@@ -388,8 +413,8 @@ def api_admin_export_csv():
         "index_size", "index_diameter", "index_confidence",
         "middle_size", "middle_diameter", "middle_confidence",
         "ring_size", "ring_diameter", "ring_confidence",
-        "confidence", "fail_reason",
-        "gt_index_size", "gt_middle_size", "gt_ring_size", "ring_fit", "gt_notes",
+        "confidence", "fail_reason", "ai_explanation",
+        "ring_fit", "gt_best_finger", "gt_index_size", "gt_middle_size", "gt_ring_size", "gt_notes",
         "photo_url", "result_url", "id",
     ]
     writer = csv.DictWriter(output, fieldnames=fieldnames, extrasaction="ignore")
@@ -405,10 +430,12 @@ def api_admin_export_csv():
             "overall_range_max": row.get("overall_range_max", ""),
             "confidence": row.get("confidence", ""),
             "fail_reason": row.get("fail_reason", ""),
+            "ai_explanation": (row.get("result_json") or {}).get("ai_explanation", ""),
+            "ring_fit": row.get("ring_fit", ""),
+            "gt_best_finger": row.get("gt_best_finger", ""),
             "gt_index_size": row.get("gt_index_size", ""),
             "gt_middle_size": row.get("gt_middle_size", ""),
             "gt_ring_size": row.get("gt_ring_size", ""),
-            "ring_fit": row.get("ring_fit", ""),
             "gt_notes": row.get("gt_notes", ""),
             "photo_url": row.get("photo_url", ""),
             "result_url": row.get("result_url", ""),

web_demo/static/app.js

@@ -309,6 +309,11 @@ form.addEventListener("submit", async (event) => {
   event.preventDefault();
 
   const settings = buildMeasureSettings();
+  if (!settings.kol_name) {
+    setStatus("Please enter your Name / ID before measuring.");
+    kolNameInput.focus();
+    return;
+  }
   const formData = new FormData();
   formData.append("finger_index", settings.finger_index);
   formData.append("edge_method", settings.edge_method);

web_demo/static/styles.css

@@ -148,13 +148,15 @@ body {
   color: var(--ink-soft);
 }
 
-select {
+select,
+.controls input[type="text"] {
   border: 1px solid var(--border);
   border-radius: 12px;
   padding: 10px 12px;
   font-size: 0.95rem;
   background: white;
   color: var(--ink);
+  width: 100%;
 }
 
 .primary {

web_demo/supabase_client.py

@@ -60,15 +60,17 @@ def upload_file(local_path: str, storage_path: str) -> Optional[str]:
             ".png": "image/png",
         }.get(suffix, "application/octet-stream")
 
-        client.storage.from_(BUCKET).upload(
+        resp = client.storage.from_(BUCKET).upload(
             storage_path,
             data,
             file_options={"content-type": content_type},
         )
+        logger.info("Storage upload %s: %s bytes, response=%s", storage_path, len(data), resp)
         public_url = client.storage.from_(BUCKET).get_public_url(storage_path)
         return public_url
     except Exception as e:
-        logger.error("Failed to upload %s: %s", storage_path, e)
+        logger.error("Failed to upload %s (%s bytes): %s", storage_path,
+                     os.path.getsize(local_path) if os.path.exists(local_path) else "missing", e)
         return None
 
 
@@ -106,7 +108,20 @@ def list_measurements(limit: int = 200, offset: int = 0) -> List[Dict[str, Any]]
         return []
 
 
-GT_ALLOWED_FIELDS = {"gt_index_size", "gt_middle_size", "gt_ring_size", "ring_fit", "gt_notes"}
+def delete_measurement(measurement_id: str) -> bool:
+    """Delete a measurement record by ID."""
+    client = _get_client()
+    if client is None:
+        return False
+    try:
+        client.table("measurements").delete().eq("id", measurement_id).execute()
+        return True
+    except Exception as e:
+        logger.error("Failed to delete %s: %s", measurement_id, e)
+        return False
+
+
+GT_ALLOWED_FIELDS = {"gt_index_size", "gt_middle_size", "gt_ring_size", "ring_fit", "gt_best_finger", "gt_notes"}
 
 
 def update_ground_truth(measurement_id: str, updates: Dict[str, Any]) -> bool:

web_demo/templates/admin.html

@@ -23,6 +23,24 @@
       font-size: 14px;
     }
     h1 { font-size: 1.5rem; margin: 0 0 8px; }
+    /* --- Login gate --- */
+    .login-gate {
+      max-width: 320px; margin: 120px auto; text-align: center;
+    }
+    .login-gate h1 { margin-bottom: 16px; }
+    .login-gate input {
+      width: 100%; padding: 10px 12px; border: 1px solid var(--border);
+      border-radius: 8px; font-size: 14px; margin-bottom: 12px;
+    }
+    .login-gate button {
+      width: 100%; padding: 10px; border: none; border-radius: 8px;
+      background: var(--accent); color: #fff; font-size: 14px; cursor: pointer;
+    }
+    .login-gate button:hover { opacity: 0.9; }
+    .login-gate .error { color: var(--accent); font-size: 13px; margin-top: 8px; }
+    .login-gate .back { display: inline-block; margin-top: 16px; color: var(--ink-soft); font-size: 13px; text-decoration: none; }
+    /* --- Admin content --- */
+    .admin-content { display: none; }
     .toolbar {
       display: flex; gap: 12px; align-items: center;
       margin-bottom: 16px; flex-wrap: wrap;
@@ -63,11 +81,18 @@
     }
     .save-btn {
       padding: 2px 8px; font-size: 11px; cursor: pointer;
-      border: 1px solid var(--accent); border-radius: 4px;
-      background: #fff; color: var(--accent);
+      border: 1px solid #2a7; border-radius: 4px;
+      background: #fff; color: #2a7;
     }
-    .save-btn:hover { background: var(--accent); color: #fff; }
+    .save-btn:hover { background: #2a7; color: #fff; }
     .save-btn.saved { border-color: #2a7; color: #2a7; }
+    .del-btn {
+      padding: 2px 8px; font-size: 11px; cursor: pointer;
+      border: 1px solid var(--accent); border-radius: 4px;
+      background: #fff; color: var(--accent); margin-left: 4px;
+    }
+    .del-btn:hover { background: var(--accent); color: #fff; }
+    .ai-peek { color: var(--accent); cursor: pointer; text-decoration: underline; font-size: 12px; }
     .finger-cell { font-size: 12px; }
     .finger-cell .size { font-weight: 600; }
     .finger-cell .detail { color: var(--ink-soft); }
@@ -76,47 +101,102 @@
   </style>
 </head>
 <body>
-  <h1>KOL Measurement Records</h1>
-  <div class="toolbar">
-    <a href="/">Back to Demo</a>
-    <a href="/api/admin/export-csv" download>Export CSV</a>
-    <button id="refreshBtn">Refresh</button>
-    <span class="count" id="countLabel">Loading...</span>
+
+  <!-- Login gate -->
+  <div class="login-gate" id="loginGate">
+    <h1>Admin Access</h1>
+    <form id="loginForm">
+      <input type="password" id="tokenInput" placeholder="Enter passcode" autofocus />
+      <button type="submit">Unlock</button>
+    </form>
+    <div class="error" id="loginError"></div>
+    <a class="back" href="/">Back to Demo</a>
   </div>
 
-  <div class="scroll-wrap">
-    <table>
-      <thead>
-        <tr>
-          <th>KOL</th>
-          <th>Date</th>
-          <th>Photo</th>
-          <th>Mode</th>
-          <th>Size</th>
-          <th>Range</th>
-          <th>Index</th>
-          <th>Middle</th>
-          <th>Ring</th>
-          <th>Conf</th>
-          <th>Fail</th>
-          <th>GT Idx</th>
-          <th>GT Mid</th>
-          <th>GT Ring</th>
-          <th>Ring Fit</th>
-          <th>GT Notes</th>
-          <th></th>
-        </tr>
-      </thead>
-      <tbody id="tableBody">
-        <tr><td colspan="17" class="empty">Loading...</td></tr>
-      </tbody>
-    </table>
+  <!-- Admin content (hidden until authenticated) -->
+  <div class="admin-content" id="adminContent">
+    <h1>KOL Measurement Records</h1>
+    <div class="toolbar">
+      <a href="/">Back to Demo</a>
+      <a id="exportCsvLink" href="#" download>Export CSV</a>
+      <button id="refreshBtn">Refresh</button>
+      <span class="count" id="countLabel">Loading...</span>
+    </div>
+
+    <div class="scroll-wrap">
+      <table>
+        <thead>
+          <tr>
+            <th>KOL</th>
+            <th>Date</th>
+            <th>Photo</th>
+            <th>Mode</th>
+            <th>Size</th>
+            <th>Range</th>
+            <th>Index</th>
+            <th>Middle</th>
+            <th>Ring</th>
+            <th>Conf</th>
+            <th>Fail</th>
+            <th>AI Explain</th>
+            <th>Ring Fit</th>
+            <th>Best Finger</th>
+            <th>GT Idx</th>
+            <th>GT Mid</th>
+            <th>GT Ring</th>
+            <th>GT Notes</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody id="tableBody">
+          <tr><td colspan="19" class="empty">Loading...</td></tr>
+        </tbody>
+      </table>
+    </div>
   </div>
 
   <script>
+    const loginGate = document.getElementById("loginGate");
+    const adminContent = document.getElementById("adminContent");
+    const loginForm = document.getElementById("loginForm");
+    const tokenInput = document.getElementById("tokenInput");
+    const loginError = document.getElementById("loginError");
     const tbody = document.getElementById("tableBody");
     const countLabel = document.getElementById("countLabel");
 
+    let adminToken = sessionStorage.getItem("admin_token") || "";
+
+    const unlock = async (token) => {
+      const resp = await fetch(`/api/admin/measurements?token=${encodeURIComponent(token)}`);
+      if (resp.status === 401) return false;
+      adminToken = token;
+      sessionStorage.setItem("admin_token", token);
+      loginGate.style.display = "none";
+      adminContent.style.display = "block";
+      document.getElementById("exportCsvLink").href = `/api/admin/export-csv?token=${encodeURIComponent(adminToken)}`;
+      loadData();
+      return true;
+    };
+
+    // Auto-unlock if token saved in session
+    if (adminToken) {
+      unlock(adminToken).then((ok) => {
+        if (!ok) { adminToken = ""; sessionStorage.removeItem("admin_token"); }
+      });
+    }
+
+    loginForm.addEventListener("submit", async (e) => {
+      e.preventDefault();
+      const token = tokenInput.value.trim();
+      if (!token) return;
+      const ok = await unlock(token);
+      if (!ok) {
+        loginError.textContent = "Incorrect passcode";
+        tokenInput.value = "";
+        tokenInput.focus();
+      }
+    });
+
     const fmtDate = (iso) => {
       if (!iso) return "";
       const d = new Date(iso);
@@ -135,7 +215,14 @@
 
     const loadData = async () => {
       try {
-        const resp = await fetch("/api/admin/measurements");
+        const resp = await fetch(`/api/admin/measurements?token=${encodeURIComponent(adminToken)}`);
+        if (resp.status === 401) {
+          sessionStorage.removeItem("admin_token");
+          loginGate.style.display = "";
+          adminContent.style.display = "none";
+          loginError.textContent = "Session expired. Please log in again.";
+          return;
+        }
         const rows = await resp.json();
         countLabel.textContent = `${rows.length} records`;
         if (rows.length === 0) {
@@ -153,23 +240,30 @@
             <td>${photoThumb}</td>
             <td>${r.mode || "-"}</td>
             <td><strong>${r.overall_best_size != null ? r.overall_best_size : "-"}</strong></td>
-            <td>${r.overall_range_min != null ? r.overall_range_min + "–" + r.overall_range_max : "-"}</td>
+            <td>${r.overall_range_min != null ? r.overall_range_min + "\u2013" + r.overall_range_max : "-"}</td>
             <td class="finger-cell">${fmtFinger(pf, "index")}</td>
             <td class="finger-cell">${fmtFinger(pf, "middle")}</td>
             <td class="finger-cell">${fmtFinger(pf, "ring")}</td>
             <td>${r.confidence != null ? (r.confidence * 100).toFixed(0) + "%" : "-"}</td>
             <td>${r.fail_reason ? '<span class="fail">' + r.fail_reason + "</span>" : ""}</td>
-            <td><input class="gt-input" data-field="gt_index_size" type="number" min="4" max="15" value="${r.gt_index_size ?? ""}" /></td>
-            <td><input class="gt-input" data-field="gt_middle_size" type="number" min="4" max="15" value="${r.gt_middle_size ?? ""}" /></td>
-            <td><input class="gt-input" data-field="gt_ring_size" type="number" min="4" max="15" value="${r.gt_ring_size ?? ""}" /></td>
+            <td>${(r.result_json && r.result_json.ai_explanation) ? '<span class="ai-peek" title="Click to view" onclick="alert(this.dataset.full)" data-full="' + r.result_json.ai_explanation.replace(/"/g, '&quot;') + '">View</span>' : "-"}</td>
             <td><select class="gt-select" data-field="ring_fit">
               <option value="">-</option>
               <option value="fits_well" ${r.ring_fit === "fits_well" ? "selected" : ""}>Fits well</option>
               <option value="too_tight" ${r.ring_fit === "too_tight" ? "selected" : ""}>Too tight</option>
               <option value="too_loose" ${r.ring_fit === "too_loose" ? "selected" : ""}>Too loose</option>
             </select></td>
+            <td><select class="gt-select" data-field="gt_best_finger">
+              <option value="">-</option>
+              <option value="index" ${r.gt_best_finger === "index" ? "selected" : ""}>Index</option>
+              <option value="middle" ${r.gt_best_finger === "middle" ? "selected" : ""}>Middle</option>
+              <option value="ring" ${r.gt_best_finger === "ring" ? "selected" : ""}>Ring</option>
+            </select></td>
+            <td><input class="gt-input" data-field="gt_index_size" type="number" min="4" max="15" value="${r.gt_index_size ?? ""}" /></td>
+            <td><input class="gt-input" data-field="gt_middle_size" type="number" min="4" max="15" value="${r.gt_middle_size ?? ""}" /></td>
+            <td><input class="gt-input" data-field="gt_ring_size" type="number" min="4" max="15" value="${r.gt_ring_size ?? ""}" /></td>
             <td><input class="gt-notes-input" data-field="gt_notes" type="text" value="${r.gt_notes || ""}" placeholder="notes" /></td>
-            <td><button class="save-btn" onclick="saveGT(this)">Save</button></td>
+            <td><button class="save-btn" onclick="saveGT(this)">Save</button> <button class="del-btn" onclick="deleteRow(this)">Delete</button></td>
           </tr>`;
         }).join("");
       } catch (e) {
@@ -190,7 +284,7 @@
         }
       });
       try {
-        const resp = await fetch(`/api/admin/measurements/${id}/ground-truth`, {
+        const resp = await fetch(`/api/admin/measurements/${id}/ground-truth?token=${encodeURIComponent(adminToken)}`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(data),
@@ -208,8 +302,28 @@
       }
     };
 
+    window.deleteRow = async (btn) => {
+      if (!confirm("Delete this measurement record?")) return;
+      const tr = btn.closest("tr");
+      const id = tr.dataset.id;
+      try {
+        const resp = await fetch(`/api/admin/measurements/${id}?token=${encodeURIComponent(adminToken)}`, {
+          method: "DELETE",
+        });
+        const result = await resp.json();
+        if (result.success) {
+          tr.remove();
+          const rows = tbody.querySelectorAll("tr");
+          countLabel.textContent = `${rows.length} records`;
+        } else {
+          alert("Delete failed: " + (result.error || "unknown"));
+        }
+      } catch (e) {
+        alert("Network error: " + e.message);
+      }
+    };
+
     document.getElementById("refreshBtn").addEventListener("click", loadData);
-    loadData();
   </script>
 </body>
 </html>

web_demo/templates/index.html

@@ -12,10 +12,10 @@
 
   <header class="hero">
     <div class="hero-copy">
-      <p class="hero-kicker">Ring Size CV · Web Demo</p>
+      <p class="hero-kicker">Femometer Smart Ring Sizer</p>
       <h1>Upload a photo to quickly measure ring size</h1>
       <p class="hero-sub">
-        Runs locally with no cloud upload. Results include JSON output and a visual overlay.
+        AI-powered measurement using your hand photo and a standard-size card for scale.
       </p>
     </div>
     <div class="hero-card">
@@ -28,8 +28,15 @@
 
         <div class="controls">
           <label>
-            <span>Your Name / ID</span>
-            <input type="text" name="kol_name" id="kolNameInput" placeholder="e.g. KOL-001 or your name" />
+            <span>Name / ID</span>
+            <input type="text" name="kol_name" id="kolNameInput" placeholder="e.g. Your Name" />
+          </label>
+          <label>
+            <span>Ring Model</span>
+            <select name="ring_model" id="ringModelSelect">
+              <option value="gen" selected>Gen1/Gen2</option>
+              <option value="air">Air</option>
+            </select>
           </label>
           <label>
             <span>Mode</span>
@@ -48,23 +55,10 @@
               <option value="auto">Auto</option>
             </select>
           </label>
-          <label>
-            <span>Ring Model</span>
-            <select name="ring_model" id="ringModelSelect">
-              <option value="gen" selected>Gen1/Gen2</option>
-              <option value="air">Air</option>
-            </select>
-          </label>
-          <label>
-            <span>Edge Method</span>
-            <select name="edge_method" disabled aria-disabled="true">
-              <option value="sobel" selected>Sobel (Locked)</option>
-            </select>
-          </label>
           <label class="toggle-label">
             <span>AI Explanation</span>
             <div class="toggle-row">
-              <input type="checkbox" id="aiExplainToggle" />
+              <input type="checkbox" id="aiExplainToggle" checked />
               <span class="toggle-hint">Uses OpenAI tokens</span>
             </div>
           </label>
@@ -118,6 +112,10 @@
     </section>
   </main>
 
+  <footer style="text-align:center;padding:24px 0 12px;opacity:0.4;font-size:13px;">
+    <a href="/admin" style="color:var(--ink-soft);text-decoration:none;">Admin</a>
+  </footer>
+
   <script>window.DEFAULT_SAMPLE_URL = "{{ default_sample_url }}";</script>
   <script src="/static/app.js"></script>
 </body>