Upload folder using huggingface_hub

=2.0.0

@@ -0,0 +1,2 @@
+WARNING: You are using pip version 21.2.4; however, version 26.0.1 is available.
+You should consider upgrading via the '/Users/fengxie/Build/ring-size-cv/.venv/bin/python3 -m pip install --upgrade pip' command.

requirements.txt

@@ -6,3 +6,4 @@ scikit-learn>=1.3.0
 flask>=3.0.0
 gunicorn>=21.2.0
 openai>=1.0.0
+supabase>=2.0.0

web_demo/app.py

@@ -6,6 +6,8 @@ Upload an image, run measurement, and return JSON + debug overlay.
 
 from __future__ import annotations
 
+import csv
+import io
 import json
 import sys
 import uuid
@@ -14,7 +16,7 @@ from typing import Dict, Any
 
 import cv2
 import numpy as np
-from flask import Flask, jsonify, render_template, request, send_from_directory
+from flask import Flask, Response, jsonify, render_template, request, send_from_directory
 from werkzeug.utils import secure_filename
 
 ROOT_DIR = Path(__file__).resolve().parents[1]
@@ -23,6 +25,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
 
 APP_ROOT = Path(__file__).resolve().parent
 UPLOAD_DIR = APP_ROOT / "uploads"
@@ -109,6 +112,7 @@ def api_measure():
 
     finger_index = request.form.get("finger_index", "index")
     mode = request.form.get("mode", "single")
+    kol_name = request.form.get("kol_name", "").strip()
     ring_model = request.form.get("ring_model", DEFAULT_RING_MODEL)
     if ring_model not in VALID_RING_MODELS:
         ring_model = DEFAULT_RING_MODEL
@@ -128,6 +132,9 @@ def api_measure():
             image=image,
             input_image_url=f"/uploads/{upload_name}",
             ring_model=ring_model,
+            kol_name=kol_name,
+            upload_path=upload_path,
+            upload_name=upload_name,
         )
 
     return _run_measurement(
@@ -135,6 +142,9 @@ def api_measure():
         finger_index=finger_index,
         input_image_url=f"/uploads/{upload_name}",
         ring_model=ring_model,
+        kol_name=kol_name,
+        upload_path=upload_path,
+        upload_name=upload_name,
     )
 
 
@@ -142,6 +152,7 @@ def api_measure():
 def api_measure_default():
     finger_index = request.form.get("finger_index", "index")
     mode = request.form.get("mode", "single")
+    kol_name = request.form.get("kol_name", "").strip()
     ring_model = request.form.get("ring_model", DEFAULT_RING_MODEL)
     if ring_model not in VALID_RING_MODELS:
         ring_model = DEFAULT_RING_MODEL
@@ -157,6 +168,7 @@ def api_measure_default():
             image=image,
             input_image_url=DEFAULT_SAMPLE_URL,
             ring_model=ring_model,
+            kol_name=kol_name,
         )
 
     return _run_measurement(
@@ -164,6 +176,7 @@ def api_measure_default():
         finger_index=finger_index,
         input_image_url=DEFAULT_SAMPLE_URL,
         ring_model=ring_model,
+        kol_name=kol_name,
     )
 
 
@@ -172,6 +185,9 @@ def _run_measurement(
     finger_index: str,
     input_image_url: str,
     ring_model: str = DEFAULT_RING_MODEL,
+    kol_name: str = "",
+    upload_path: Path = None,
+    upload_name: str = "",
 ):
     run_id = uuid.uuid4().hex[:12]
 
@@ -204,12 +220,39 @@ def _run_measurement(
     result_json_path = RESULTS_DIR / result_json_name
     _save_json(result_json_path, result)
 
+    # --- Persist to Supabase ---
+    photo_public_url = None
+    result_public_url = None
+    if upload_path and upload_path.exists():
+        photo_public_url = upload_file(str(upload_path), f"photos/{upload_name}")
+    if result_png_path.exists():
+        result_public_url = upload_file(str(result_png_path), f"results/{result_png_name}")
+
+    ring_size = result.get("ring_size", {})
+    measurement_id = save_measurement({
+        "run_id": run_id,
+        "kol_name": kol_name,
+        "mode": "single",
+        "ring_model": ring_model,
+        "finger_index": finger_index,
+        "diameter_cm": result.get("finger_outer_diameter_cm"),
+        "confidence": result.get("confidence"),
+        "overall_best_size": ring_size.get("best_match"),
+        "overall_range_min": ring_size.get("range_min"),
+        "overall_range_max": ring_size.get("range_max"),
+        "photo_url": photo_public_url,
+        "result_url": result_public_url,
+        "result_json": result,
+        "fail_reason": result.get("fail_reason"),
+    })
+
     payload = {
         "success": result.get("fail_reason") is None,
         "result": result,
         "result_image_url": f"/results/{result_png_name}",
         "input_image_url": input_image_url,
         "result_json_url": f"/results/{result_json_name}",
+        "measurement_id": measurement_id,
     }
 
     return jsonify(payload)
@@ -219,6 +262,9 @@ def _run_multi_measurement(
     image,
     input_image_url: str,
     ring_model: str = DEFAULT_RING_MODEL,
+    kol_name: str = "",
+    upload_path: Path = None,
+    upload_name: str = "",
 ):
     """Run multi-finger measurement pipeline."""
     run_id = uuid.uuid4().hex[:12]
@@ -264,6 +310,37 @@ def _run_multi_measurement(
     result_json_path = RESULTS_DIR / result_json_name
     _save_json(result_json_path, result)
 
+    # --- Persist to Supabase ---
+    photo_public_url = None
+    result_public_url = None
+    if upload_path and upload_path.exists():
+        photo_public_url = upload_file(str(upload_path), f"photos/{upload_name}")
+    if result_png_path.exists():
+        result_public_url = upload_file(str(result_png_path), f"results/{result_png_name}")
+
+    # Compute overall confidence from per-finger data
+    confidences = [
+        pf.get("confidence") for pf in per_finger.values()
+        if pf.get("status") == "ok" and pf.get("confidence") is not None
+    ]
+    overall_confidence = min(confidences) if confidences else None
+
+    measurement_id = save_measurement({
+        "run_id": run_id,
+        "kol_name": kol_name,
+        "mode": "multi",
+        "ring_model": ring_model,
+        "overall_best_size": result.get("overall_best_size"),
+        "overall_range_min": result.get("overall_range_min"),
+        "overall_range_max": result.get("overall_range_max"),
+        "per_finger": per_finger,
+        "confidence": overall_confidence,
+        "photo_url": photo_public_url,
+        "result_url": result_public_url,
+        "result_json": result,
+        "fail_reason": result.get("fail_reason"),
+    })
+
     payload = {
         "success": result.get("fail_reason") is None,
         "mode": "multi",
@@ -271,10 +348,86 @@ def _run_multi_measurement(
         "result_image_url": f"/results/{result_png_name}",
         "input_image_url": input_image_url,
         "result_json_url": f"/results/{result_json_name}",
+        "measurement_id": measurement_id,
     }
 
     return jsonify(payload)
 
 
+# ---------------------------------------------------------------------------
+# Admin routes
+# ---------------------------------------------------------------------------
+
+@app.route("/admin")
+def admin_page():
+    return render_template("admin.html")
+
+
+@app.route("/api/admin/measurements")
+def api_admin_measurements():
+    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):
+    data = request.get_json(silent=True) or {}
+    ok = update_ground_truth(measurement_id, data)
+    if ok:
+        return jsonify({"success": True})
+    return jsonify({"success": False, "error": "Update failed"}), 400
+
+
+@app.route("/api/admin/export-csv")
+def api_admin_export_csv():
+    rows = list_measurements(limit=5000)
+    output = io.StringIO()
+    fieldnames = [
+        "kol_name", "created_at", "mode", "ring_model",
+        "overall_best_size", "overall_range_min", "overall_range_max",
+        "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",
+        "photo_url", "result_url", "id",
+    ]
+    writer = csv.DictWriter(output, fieldnames=fieldnames, extrasaction="ignore")
+    writer.writeheader()
+    for row in rows:
+        flat = {
+            "kol_name": row.get("kol_name", ""),
+            "created_at": row.get("created_at", ""),
+            "mode": row.get("mode", ""),
+            "ring_model": row.get("ring_model", ""),
+            "overall_best_size": row.get("overall_best_size", ""),
+            "overall_range_min": row.get("overall_range_min", ""),
+            "overall_range_max": row.get("overall_range_max", ""),
+            "confidence": row.get("confidence", ""),
+            "fail_reason": row.get("fail_reason", ""),
+            "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", ""),
+            "id": row.get("id", ""),
+        }
+        pf = row.get("per_finger") or {}
+        for finger in ("index", "middle", "ring"):
+            fd = pf.get(finger, {})
+            flat[f"{finger}_size"] = fd.get("best_match", "")
+            flat[f"{finger}_diameter"] = fd.get("diameter_cm", "")
+            flat[f"{finger}_confidence"] = fd.get("confidence", "")
+        writer.writerow(flat)
+
+    return Response(
+        output.getvalue(),
+        mimetype="text/csv",
+        headers={"Content-Disposition": "attachment; filename=kol_measurements.csv"},
+    )
+
+
 if __name__ == "__main__":
     app.run(host="0.0.0.0", port=8000, debug=True)

web_demo/static/app.js

@@ -100,6 +100,8 @@ const RING_SIZE_TABLES = {
 };
 const RING_MODEL_LABELS = { gen: "Gen1/Gen2", air: "Air" };
 
+const kolNameInput = document.getElementById("kolNameInput");
+
 const buildMeasureSettings = () => {
   const fingerSelect = form.querySelector('select[name="finger_index"]');
   const aiToggle = document.getElementById("aiExplainToggle");
@@ -111,6 +113,7 @@ const buildMeasureSettings = () => {
     mode: mode,
     ring_model: ringModel,
     ai_explain: aiToggle && aiToggle.checked ? "1" : "0",
+    kol_name: kolNameInput ? kolNameInput.value.trim() : "",
   };
 };
 
@@ -312,6 +315,7 @@ form.addEventListener("submit", async (event) => {
   formData.append("mode", settings.mode);
   formData.append("ring_model", settings.ring_model);
   formData.append("ai_explain", settings.ai_explain);
+  formData.append("kol_name", settings.kol_name);
 
   const file = imageInput.files[0];
   if (file) {

web_demo/supabase_client.py

@@ -0,0 +1,126 @@
+"""Supabase persistence layer for ring-size-cv web demo.
+
+Graceful degradation: if SUPABASE_URL or SUPABASE_SERVICE_KEY env vars
+are missing, all functions return None/empty and the app works without
+persistence.
+"""
+
+from __future__ import annotations
+
+import logging
+import os
+from pathlib import Path
+from typing import Any, Dict, List, Optional
+
+logger = logging.getLogger(__name__)
+
+_client = None
+_initialized = False
+
+
+def _get_client():
+    """Lazy-init Supabase client. Returns None if env vars missing."""
+    global _client, _initialized
+    if _initialized:
+        return _client
+    _initialized = True
+
+    url = os.environ.get("SUPABASE_URL", "").strip()
+    key = os.environ.get("SUPABASE_SERVICE_KEY", "").strip()
+    if not url or not key:
+        logger.warning("SUPABASE_URL or SUPABASE_SERVICE_KEY not set — persistence disabled")
+        return None
+
+    try:
+        from supabase import create_client
+        _client = create_client(url, key)
+        logger.info("Supabase client initialized (%s)", url)
+    except Exception as e:
+        logger.error("Failed to initialize Supabase client: %s", e)
+        _client = None
+    return _client
+
+
+BUCKET = "ring-measurements"
+
+
+def upload_file(local_path: str, storage_path: str) -> Optional[str]:
+    """Upload a file to Supabase Storage. Returns public URL or None."""
+    client = _get_client()
+    if client is None:
+        return None
+    try:
+        with open(local_path, "rb") as f:
+            data = f.read()
+        # Determine content type
+        suffix = Path(local_path).suffix.lower()
+        content_type = {
+            ".jpg": "image/jpeg",
+            ".jpeg": "image/jpeg",
+            ".png": "image/png",
+        }.get(suffix, "application/octet-stream")
+
+        client.storage.from_(BUCKET).upload(
+            storage_path,
+            data,
+            file_options={"content-type": content_type},
+        )
+        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)
+        return None
+
+
+def save_measurement(record: Dict[str, Any]) -> Optional[str]:
+    """Insert a measurement record. Returns row UUID or None."""
+    client = _get_client()
+    if client is None:
+        return None
+    try:
+        resp = client.table("measurements").insert(record).execute()
+        if resp.data and len(resp.data) > 0:
+            return resp.data[0].get("id")
+        return None
+    except Exception as e:
+        logger.error("Failed to save measurement: %s", e)
+        return None
+
+
+def list_measurements(limit: int = 200, offset: int = 0) -> List[Dict[str, Any]]:
+    """Fetch measurements for admin page, newest first."""
+    client = _get_client()
+    if client is None:
+        return []
+    try:
+        resp = (
+            client.table("measurements")
+            .select("*")
+            .order("created_at", desc=True)
+            .range(offset, offset + limit - 1)
+            .execute()
+        )
+        return resp.data or []
+    except Exception as e:
+        logger.error("Failed to list measurements: %s", e)
+        return []
+
+
+GT_ALLOWED_FIELDS = {"gt_index_size", "gt_middle_size", "gt_ring_size", "ring_fit", "gt_notes"}
+
+
+def update_ground_truth(measurement_id: str, updates: Dict[str, Any]) -> bool:
+    """Update only ground-truth columns for a measurement."""
+    client = _get_client()
+    if client is None:
+        return False
+    # Whitelist filter
+    safe = {k: v for k, v in updates.items() if k in GT_ALLOWED_FIELDS}
+    if not safe:
+        return False
+    try:
+        client.table("measurements").update(safe).eq("id", measurement_id).execute()
+        return True
+    except Exception as e:
+        logger.error("Failed to update GT for %s: %s", measurement_id, e)
+        return False

web_demo/templates/admin.html

@@ -0,0 +1,215 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Ring Sizer — Admin</title>
+  <style>
+    :root {
+      --bg-1: #f5f1e7;
+      --ink: #2b1f1f;
+      --ink-soft: #4b3d3d;
+      --accent: #bf3a2b;
+      --sand: #f9f4ec;
+      --shadow: rgba(34, 26, 26, 0.12);
+      --border: rgba(45, 33, 33, 0.18);
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0; padding: 24px;
+      color: var(--ink);
+      background: var(--bg-1);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      font-size: 14px;
+    }
+    h1 { font-size: 1.5rem; margin: 0 0 8px; }
+    .toolbar {
+      display: flex; gap: 12px; align-items: center;
+      margin-bottom: 16px; flex-wrap: wrap;
+    }
+    .toolbar a, .toolbar button {
+      padding: 6px 14px; border-radius: 6px; text-decoration: none;
+      font-size: 13px; cursor: pointer; border: 1px solid var(--border);
+      background: #fff; color: var(--ink);
+    }
+    .toolbar a:hover, .toolbar button:hover { background: var(--sand); }
+    .toolbar .count { color: var(--ink-soft); font-size: 13px; }
+    table {
+      width: 100%; border-collapse: collapse;
+      background: #fff; border-radius: 8px;
+      box-shadow: 0 1px 4px var(--shadow);
+      overflow: hidden;
+    }
+    th, td {
+      padding: 8px 10px; text-align: left;
+      border-bottom: 1px solid var(--border);
+      white-space: nowrap; font-size: 13px;
+    }
+    th { background: var(--sand); font-weight: 600; position: sticky; top: 0; z-index: 1; }
+    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 var(--accent); border-radius: 4px;
+      background: #fff; color: var(--accent);
+    }
+    .save-btn:hover { background: var(--accent); color: #fff; }
+    .save-btn.saved { border-color: #2a7; color: #2a7; }
+    .finger-cell { font-size: 12px; }
+    .finger-cell .size { font-weight: 600; }
+    .finger-cell .detail { color: var(--ink-soft); }
+    .empty { text-align: center; padding: 48px; color: var(--ink-soft); }
+    .scroll-wrap { overflow-x: auto; }
+  </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>
+  </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>
+  </div>
+
+  <script>
+    const tbody = document.getElementById("tableBody");
+    const countLabel = document.getElementById("countLabel");
+
+    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" });
+    };
+
+    const fmtFinger = (pf, name) => {
+      if (!pf || !pf[name]) return '<span class="detail">-</span>';
+      const f = pf[name];
+      if (f.status !== "ok") return `<span class="fail">${f.fail_reason || "fail"}</span>`;
+      const size = f.best_match != null ? f.best_match : "-";
+      const diam = f.diameter_cm != null ? (f.diameter_cm * 10).toFixed(1) + "mm" : "";
+      const conf = f.confidence != null ? (f.confidence * 100).toFixed(0) + "%" : "";
+      return `<span class="size">${size}</span> <span class="detail">${diam} ${conf}</span>`;
+    };
+
+    const loadData = async () => {
+      try {
+        const resp = await fetch("/api/admin/measurements");
+        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 + "–" + 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><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><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>
+          </tr>`;
+        }).join("");
+      } 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`, {
+          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);
+      }
+    };
+
+    document.getElementById("refreshBtn").addEventListener("click", loadData);
+    loadData();
+  </script>
+</body>
+</html>

web_demo/templates/index.html

@@ -27,6 +27,10 @@
         </label>
 
         <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" />
+          </label>
           <label>
             <span>Mode</span>
             <select name="mode" id="modeSelect">