Upload folder using huggingface_hub

web_demo/static/app.js

@@ -21,7 +21,7 @@ const failReasonMessageMap = {
   card_near_edge:
     "Card appears cropped. Place the entire card within the photo frame.",
   hand_not_detected:
-    "Hand not detected. Place your hand flat on a plain, white background (e.g. a sheet of paper), and spread your fingers naturally.",
+    "Hand not detected. Place your hand flat on a plain white background (e.g. a sheet of paper), and spread your fingers naturally.",
   finger_isolation_failed:
     "Could not isolate the selected finger. Keep one target finger extended and separated.",
   finger_not_fully_visible:

web_demo/templates/admin.html

@@ -67,32 +67,12 @@
     tr:hover td { background: #faf7f2; }
     .thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; cursor: pointer; }
     .fail { color: var(--accent); font-weight: 500; }
-    .gt-input {
-      width: 48px; padding: 2px 4px; border: 1px solid var(--border);
-      border-radius: 4px; font-size: 12px; text-align: center;
-    }
-    .gt-select {
-      padding: 2px 4px; border: 1px solid var(--border);
-      border-radius: 4px; font-size: 12px;
-    }
-    .gt-notes-input {
-      width: 100px; padding: 2px 4px; border: 1px solid var(--border);
-      border-radius: 4px; font-size: 12px;
-    }
-    .save-btn {
-      padding: 2px 8px; font-size: 11px; cursor: pointer;
-      border: 1px solid #2a7; border-radius: 4px;
-      background: #fff; color: #2a7;
-    }
-    .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;
+      background: #fff; color: var(--accent);
     }
     .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); }
@@ -120,6 +100,8 @@
       <a href="/">Back to Demo</a>
       <a id="exportCsvLink" href="#" download>Export CSV</a>
       <button id="refreshBtn">Refresh</button>
+      <button id="prevPageBtn" disabled>&lsaquo; Prev</button>
+      <button id="nextPageBtn" disabled>Next &rsaquo;</button>
       <span class="count" id="countLabel">Loading...</span>
     </div>
 
@@ -130,26 +112,16 @@
             <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>
+          <tr><td colspan="9" class="empty">Loading...</td></tr>
         </tbody>
       </table>
     </div>
@@ -163,6 +135,12 @@
     const loginError = document.getElementById("loginError");
     const tbody = document.getElementById("tableBody");
     const countLabel = document.getElementById("countLabel");
+    const prevPageBtn = document.getElementById("prevPageBtn");
+    const nextPageBtn = document.getElementById("nextPageBtn");
+
+    const PAGE_SIZE = 50;
+    let allRows = [];
+    let currentPage = 1;
 
     let adminToken = sessionStorage.getItem("admin_token") || "";
 
@@ -200,7 +178,7 @@
     const fmtDate = (iso) => {
       if (!iso) return "";
       const d = new Date(iso);
-      return d.toLocaleDateString("en-CA") + " " + d.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
+      return d.toLocaleDateString("en-CA") + " " + d.toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
     };
 
     const fmtFinger = (pf, name) => {
@@ -213,6 +191,42 @@
       return `<span class="size">${size}</span> <span class="detail">${diam} ${conf}</span>`;
     };
 
+    const rowHtml = (r) => {
+      const pf = r.per_finger || {};
+      const photoThumb = r.photo_url
+        ? `<img class="thumb" loading="lazy" src="${r.photo_url}" onclick="window.open('${r.photo_url}')" />`
+        : "-";
+      return `<tr data-id="${r.id}">
+        <td><strong>${r.kol_name || "-"}</strong></td>
+        <td>${fmtDate(r.created_at)}</td>
+        <td>${photoThumb}</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><button class="del-btn" onclick="deleteRow(this)">Delete</button></td>
+      </tr>`;
+    };
+
+    const renderPage = () => {
+      const total = allRows.length;
+      const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+      if (currentPage > totalPages) currentPage = totalPages;
+      if (currentPage < 1) currentPage = 1;
+      if (total === 0) {
+        countLabel.textContent = "0 records";
+        tbody.innerHTML = '<tr><td colspan="9" class="empty">No measurements yet</td></tr>';
+      } else {
+        const start = (currentPage - 1) * PAGE_SIZE;
+        const slice = allRows.slice(start, start + PAGE_SIZE);
+        countLabel.textContent = `${total} records · page ${currentPage}/${totalPages}`;
+        tbody.innerHTML = slice.map(rowHtml).join("");
+      }
+      prevPageBtn.disabled = currentPage <= 1;
+      nextPageBtn.disabled = currentPage >= totalPages;
+    };
+
     const loadData = async () => {
       try {
         const resp = await fetch(`/api/admin/measurements?token=${encodeURIComponent(adminToken)}`);
@@ -223,82 +237,11 @@
           loginError.textContent = "Session expired. Please log in again.";
           return;
         }
-        const rows = await resp.json();
-        countLabel.textContent = `${rows.length} records`;
-        if (rows.length === 0) {
-          tbody.innerHTML = '<tr><td colspan="17" class="empty">No measurements yet</td></tr>';
-          return;
-        }
-        tbody.innerHTML = rows.map((r) => {
-          const pf = r.per_finger || {};
-          const photoThumb = r.photo_url
-            ? `<img class="thumb" src="${r.photo_url}" onclick="window.open('${r.photo_url}')" />`
-            : "-";
-          return `<tr data-id="${r.id}">
-            <td><strong>${r.kol_name || "-"}</strong></td>
-            <td>${fmtDate(r.created_at)}</td>
-            <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 + "\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>${(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> <button class="del-btn" onclick="deleteRow(this)">Delete</button></td>
-          </tr>`;
-        }).join("");
+        allRows = await resp.json();
+        currentPage = 1;
+        renderPage();
       } catch (e) {
-        tbody.innerHTML = `<tr><td colspan="17" class="empty">Error loading data: ${e.message}</td></tr>`;
-      }
-    };
-
-    window.saveGT = async (btn) => {
-      const tr = btn.closest("tr");
-      const id = tr.dataset.id;
-      const data = {};
-      tr.querySelectorAll("[data-field]").forEach((el) => {
-        const field = el.dataset.field;
-        if (el.type === "number") {
-          data[field] = el.value ? parseInt(el.value, 10) : null;
-        } else {
-          data[field] = el.value || null;
-        }
-      });
-      try {
-        const resp = await fetch(`/api/admin/measurements/${id}/ground-truth?token=${encodeURIComponent(adminToken)}`, {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify(data),
-        });
-        const result = await resp.json();
-        if (result.success) {
-          btn.textContent = "Saved";
-          btn.classList.add("saved");
-          setTimeout(() => { btn.textContent = "Save"; btn.classList.remove("saved"); }, 2000);
-        } else {
-          alert("Save failed: " + (result.error || "unknown"));
-        }
-      } catch (e) {
-        alert("Network error: " + e.message);
+        tbody.innerHTML = `<tr><td colspan="9" class="empty">Error loading data: ${e.message}</td></tr>`;
       }
     };
 
@@ -312,9 +255,8 @@
         });
         const result = await resp.json();
         if (result.success) {
-          tr.remove();
-          const rows = tbody.querySelectorAll("tr");
-          countLabel.textContent = `${rows.length} records`;
+          allRows = allRows.filter((r) => r.id !== id);
+          renderPage();
         } else {
           alert("Delete failed: " + (result.error || "unknown"));
         }
@@ -323,6 +265,8 @@
       }
     };
 
+    prevPageBtn.addEventListener("click", () => { currentPage--; renderPage(); });
+    nextPageBtn.addEventListener("click", () => { currentPage++; renderPage(); });
     document.getElementById("refreshBtn").addEventListener("click", loadData);
   </script>
 </body>

web_demo/templates/index.html

@@ -15,7 +15,7 @@
       <p class="hero-kicker">Femometer Smart Ring Sizer</p>
       <h1>Upload a photo to quickly measure ring size</h1>
       <p class="hero-sub">
-        Use a hand photo with a card of standard credit card dimensions for scale.
+        Using a photo of your hand with a card of standard credit card size for scale.
       </p>
     </div>
     <div class="hero-card">