Upload 2 files

README.md

@@ -1,36 +1,26 @@
 ---
 title: SentAI
-emoji: 🧠
+emoji: 🤖
 colorFrom: blue
-colorTo: green
+colorTo: purple
 sdk: static
-app_file: index.html
 pinned: false
-short_description: Live face expression, age and gender estimates
-tags:
-  - computer-vision
-  - face-analysis
-  - webcam
-  - mobile
+short_description: Live face expression age and gender estimates
 ---
 
 # SentAI
 
-Phase 2 switches SentAI from a server-side Gradio prototype to a browser-side static app.
+SentAI is a browser-based live camera application for face detection, expression scoring, apparent age range, and male/female presentation estimate.
 
-The browser handles the camera stream and runs face-api.js models directly on the device, which should improve FPS and enables a front/rear camera toggle on many mobile browsers.
+## Phase 3 changes
 
-## Current Phase 2 features
+- Keeps the fast on-device face box loop.
+- Adds a background accuracy pack using Transformers.js-compatible ONNX models.
+- Uses temporal smoothing so expression scores and age range do not flicker frame-by-frame.
+- Reduces the old neutral-to-confused behavior so "Confused" is not overconfident just because the face is neutral.
+- Adds an age offset control for quick calibration during demos.
+- Supports mobile camera permission and front/rear camera switching when the browser exposes it.
 
-- Live webcam video
-- Face bounding boxes
-- Possible feeling: Happy, Sad, Fear, Anger, Confused, Disgust
-- Apparent age range
-- Male/Female gender estimate
-- Front/rear camera toggle where supported by the browser
-- Responsive mobile-first UI
-- On-device FPS and latency display
+## Notes
 
-## Accuracy note
-
-These are appearance-based estimates from a camera frame. Lighting, face angle, glasses, camera quality, and dataset/model bias can affect results.
+The app estimates visible facial expression and apparent age from camera frames. It cannot know a person's true internal feeling. Lighting, pose, camera quality, glasses, occlusion, and model bias can affect results.

index.html

@@ -10,9 +10,9 @@
     :root {
       --bg-a: #050816;
       --bg-b: #0d1b2f;
-      --card: rgba(15, 23, 42, 0.74);
-      --card-strong: rgba(15, 23, 42, 0.92);
-      --stroke: rgba(148, 163, 184, 0.22);
+      --card: rgba(15, 23, 42, 0.76);
+      --card-strong: rgba(15, 23, 42, 0.94);
+      --stroke: rgba(148, 163, 184, 0.24);
       --text: #f8fafc;
       --muted: #a7b4c8;
       --soft: rgba(255,255,255,0.08);
@@ -34,7 +34,7 @@
       color: var(--text);
       background:
         radial-gradient(circle at 12% 10%, rgba(34, 211, 238, 0.26), transparent 34%),
-        radial-gradient(circle at 90% 0%, rgba(167, 139, 250, 0.24), transparent 34%),
+        radial-gradient(circle at 92% 2%, rgba(167, 139, 250, 0.23), transparent 34%),
         linear-gradient(135deg, var(--bg-a), var(--bg-b) 52%, #112236);
       overflow-x: hidden;
     }
@@ -52,7 +52,7 @@
     }
 
     .app-shell {
-      width: min(1440px, calc(100% - 32px));
+      width: min(1460px, calc(100% - 32px));
       margin: 0 auto;
       padding: 34px 0 42px;
       position: relative;
@@ -72,31 +72,37 @@
       font-size: clamp(3rem, 8vw, 7rem);
       line-height: 0.92;
       letter-spacing: -0.08em;
-      font-weight: 900;
+      font-weight: 950;
       text-shadow: 0 24px 70px rgba(34, 211, 238, 0.1);
     }
 
     .brand p {
       margin: 18px 0 0;
-      max-width: 870px;
+      max-width: 920px;
       color: var(--muted);
-      font-size: clamp(1rem, 1.8vw, 1.3rem);
+      font-size: clamp(1rem, 1.8vw, 1.24rem);
       line-height: 1.55;
     }
 
+    .status-stack {
+      display: grid;
+      gap: 10px;
+      justify-items: end;
+    }
+
     .status-pill {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       border: 1px solid var(--stroke);
-      background: rgba(15, 23, 42, 0.6);
+      background: rgba(15, 23, 42, 0.64);
       backdrop-filter: blur(18px);
       border-radius: 999px;
       padding: 12px 16px;
       color: var(--muted);
       box-shadow: var(--shadow);
       white-space: nowrap;
-      font-weight: 700;
+      font-weight: 800;
     }
 
     .dot {
@@ -121,12 +127,12 @@
     button, select {
       appearance: none;
       border: 1px solid var(--stroke);
-      background: rgba(15, 23, 42, 0.74);
+      background: rgba(15, 23, 42, 0.76);
       color: var(--text);
       border-radius: 999px;
       padding: 13px 18px;
       font-size: 0.98rem;
-      font-weight: 800;
+      font-weight: 850;
       letter-spacing: -0.01em;
       cursor: pointer;
       transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, opacity 160ms ease;
@@ -135,7 +141,8 @@
 
     button:hover, select:hover { transform: translateY(-1px); border-color: rgba(34, 211, 238, 0.55); }
     button:active { transform: translateY(0); }
-    button.primary { background: linear-gradient(135deg, rgba(34,211,238,0.95), rgba(167,139,250,0.92)); color: #06111f; border-color: transparent; }
+    button.primary { background: linear-gradient(135deg, rgba(34,211,238,0.96), rgba(167,139,250,0.94)); color: #06111f; border-color: transparent; }
+    button.accent { color: #cffafe; border-color: rgba(34, 211, 238, 0.4); }
     button.danger { color: #fecdd3; }
     button:disabled { opacity: 0.46; cursor: not-allowed; transform: none; }
 
@@ -148,12 +155,12 @@
       border: 1px solid var(--stroke);
       background: rgba(255,255,255,0.055);
       color: var(--muted);
-      font-weight: 800;
+      font-weight: 850;
     }
 
     .grid {
       display: grid;
-      grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.72fr);
+      grid-template-columns: minmax(0, 1.44fr) minmax(360px, 0.74fr);
       gap: 18px;
       align-items: stretch;
     }
@@ -189,13 +196,8 @@
       object-fit: contain;
     }
 
-    video {
-      background: #020617;
-    }
-
-    canvas#overlay {
-      pointer-events: none;
-    }
+    video { background: #020617; }
+    canvas#overlay { pointer-events: none; }
 
     .empty-state {
       position: absolute;
@@ -209,9 +211,9 @@
     }
 
     .empty-card {
-      max-width: 560px;
+      max-width: 600px;
       border: 1px solid var(--stroke);
-      background: rgba(15,23,42,0.68);
+      background: rgba(15,23,42,0.7);
       border-radius: 24px;
       padding: 28px;
     }
@@ -254,7 +256,7 @@
       display: block;
       color: var(--muted);
       font-size: 0.82rem;
-      font-weight: 800;
+      font-weight: 850;
       text-transform: uppercase;
       letter-spacing: 0.08em;
     }
@@ -271,19 +273,19 @@
       display: block;
       margin-top: 7px;
       color: var(--muted);
-      font-weight: 700;
+      font-weight: 750;
     }
 
     .wide { grid-column: 1 / -1; }
 
-    .bars {
+    .bars, .note, .calibration {
       border: 1px solid var(--stroke);
       background: rgba(255,255,255,0.055);
       border-radius: 22px;
       padding: 16px;
     }
 
-    .bars h3 {
+    .bars h3, .calibration h3 {
       margin: 0 0 14px;
       font-size: 1rem;
       color: var(--text);
@@ -298,7 +300,7 @@
       margin: 11px 0;
       color: var(--muted);
       font-size: 0.9rem;
-      font-weight: 800;
+      font-weight: 850;
     }
 
     .bar-track {
@@ -316,12 +318,25 @@
       transition: width 180ms ease;
     }
 
+    .calibration-row {
+      display: grid;
+      grid-template-columns: 90px 1fr 60px;
+      gap: 12px;
+      align-items: center;
+      color: var(--muted);
+      font-weight: 800;
+      margin-top: 10px;
+    }
+
+    input[type="range"] {
+      width: 100%;
+      accent-color: var(--accent);
+    }
+
     .note {
-      border: 1px solid rgba(34,211,238,0.25);
-      background: rgba(34,211,238,0.08);
       color: #cffafe;
-      border-radius: 22px;
-      padding: 15px 16px;
+      background: rgba(34,211,238,0.08);
+      border-color: rgba(34,211,238,0.24);
       line-height: 1.5;
       font-size: 0.94rem;
     }
@@ -339,9 +354,9 @@
       padding: 13px 18px;
       box-shadow: var(--shadow);
       color: var(--text);
-      font-weight: 800;
+      font-weight: 850;
       transition: opacity 180ms ease, transform 180ms ease;
-      max-width: min(92vw, 720px);
+      max-width: min(92vw, 760px);
       text-align: center;
     }
 
@@ -350,6 +365,7 @@
     @media (max-width: 980px) {
       .app-shell { width: min(100% - 20px, 760px); padding-top: 22px; }
       header.hero { grid-template-columns: 1fr; }
+      .status-stack { justify-items: start; }
       .status-pill { width: fit-content; }
       .grid { grid-template-columns: 1fr; }
       .stage-panel { padding: 10px; }
@@ -363,6 +379,7 @@
       .brand p { font-size: 0.98rem; }
       .metric-grid { grid-template-columns: 1fr; }
       .bar-row { grid-template-columns: 76px 1fr 44px; font-size: 0.82rem; }
+      .calibration-row { grid-template-columns: 78px 1fr 52px; }
       .empty-card { padding: 20px; }
       .app-shell { width: min(100% - 14px, 760px); }
       body { background-attachment: fixed; }
@@ -374,19 +391,23 @@
     <header class="hero" aria-label="SentAI heading">
       <div class="brand">
         <h1>SentAI</h1>
-        <p>Live face boxes with possible feeling, apparent age range, and male/female gender estimate. Runs in the browser for faster desktop and mobile camera performance.</p>
+        <p>Higher-accuracy live face analysis with stabilized expression scores, apparent age range, and male/female presentation estimate. The fast face box runs continuously; heavier transformer models run on cropped faces in the background.</p>
+      </div>
+      <div class="status-stack">
+        <div class="status-pill" aria-live="polite"><span id="coreDot" class="dot"></span><span id="coreStatus">Loading core models...</span></div>
+        <div class="status-pill" aria-live="polite"><span id="proDot" class="dot"></span><span id="proStatus">Accuracy pack: idle</span></div>
       </div>
-      <div class="status-pill" aria-live="polite"><span id="modelDot" class="dot"></span><span id="modelStatus">Loading AI models...</span></div>
     </header>
 
     <section class="toolbar" aria-label="Camera controls">
       <button id="startBtn" class="primary" disabled>Start camera</button>
       <button id="switchBtn" disabled>Switch front/rear</button>
+      <button id="accuracyBtn" class="accent" disabled>Load accuracy pack</button>
       <button id="stopBtn" class="danger" disabled>Stop</button>
       <select id="modeSelect" aria-label="Performance mode">
         <option value="fast">Fast mode</option>
-        <option value="balanced" selected>Balanced mode</option>
-        <option value="accurate">Accurate mode</option>
+        <option value="balanced">Balanced mode</option>
+        <option value="accurate" selected>Accurate mode</option>
       </select>
       <span id="cameraTag" class="camera-tag">Camera: not started</span>
     </section>
@@ -399,7 +420,7 @@
           <div id="emptyState" class="empty-state">
             <div class="empty-card">
               <strong>Ready for live analysis</strong>
-              Tap <b>Start camera</b>, allow permission, then keep one face well-lit and centered. On phones, use <b>Switch front/rear</b> to toggle cameras when supported by the browser.
+              Tap <b>Start camera</b>. For best accuracy, use strong front lighting, keep one face centered, and load the <b>accuracy pack</b>. On phones, use <b>Switch front/rear</b> when supported by the browser.
             </div>
           </div>
         </div>
@@ -421,7 +442,7 @@
           <div class="metric">
             <span>Apparent age</span>
             <strong id="ageValue">—</strong>
-            <small>Range estimate</small>
+            <small id="ageSource">Waiting</small>
           </div>
           <div class="metric">
             <span>Faces</span>
@@ -431,12 +452,12 @@
           <div class="metric">
             <span>FPS</span>
             <strong id="fpsValue">—</strong>
-            <small>On-device loop</small>
+            <small>Detection loop</small>
           </div>
           <div class="metric">
             <span>Latency</span>
             <strong id="latencyValue">—</strong>
-            <small>Model time</small>
+            <small id="latencySource">Core model time</small>
           </div>
         </div>
 
@@ -445,8 +466,17 @@
           <div id="emotionBars"></div>
         </div>
 
+        <div class="calibration wide">
+          <h3>Age fine tune</h3>
+          <div class="calibration-row">
+            <span>Offset</span>
+            <input id="ageOffset" type="range" min="-12" max="12" value="0" step="1" aria-label="Age offset calibration" />
+            <b id="ageOffsetValue">0y</b>
+          </div>
+        </div>
+
         <div class="note wide">
-          Results are estimates from facial appearance and expression. Lighting, pose, glasses, camera quality, and model bias can affect accuracy.
+          The app estimates visible facial expression and apparent age from camera frames. It cannot know a person's true internal feeling. The accuracy pack improves expression and age estimates but may download larger ONNX model files the first time.
         </div>
       </aside>
     </section>
@@ -454,14 +484,20 @@
 
   <div id="toast" class="toast" role="status" aria-live="polite"></div>
 
-  <script>
-    const MODEL_URL = "https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@0.22.2/weights";
+  <script type="module">
+    const FACE_API_MODEL_URL = "https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@0.22.2/weights";
+    const TRANSFORMERS_CDN = "https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.2.0";
+    const EMOTION_MODEL_ID = "Xenova/facial_emotions_image_detection";
+    const AGE_GENDER_MODEL_ID = "onnx-community/age-gender-prediction-ONNX";
 
     const els = {
-      modelDot: document.getElementById("modelDot"),
-      modelStatus: document.getElementById("modelStatus"),
+      coreDot: document.getElementById("coreDot"),
+      coreStatus: document.getElementById("coreStatus"),
+      proDot: document.getElementById("proDot"),
+      proStatus: document.getElementById("proStatus"),
       startBtn: document.getElementById("startBtn"),
       switchBtn: document.getElementById("switchBtn"),
+      accuracyBtn: document.getElementById("accuracyBtn"),
       stopBtn: document.getElementById("stopBtn"),
       modeSelect: document.getElementById("modeSelect"),
       cameraTag: document.getElementById("cameraTag"),
@@ -474,23 +510,28 @@
       genderValue: document.getElementById("genderValue"),
       genderConfidence: document.getElementById("genderConfidence"),
       ageValue: document.getElementById("ageValue"),
+      ageSource: document.getElementById("ageSource"),
       facesValue: document.getElementById("facesValue"),
       faceScore: document.getElementById("faceScore"),
       fpsValue: document.getElementById("fpsValue"),
       latencyValue: document.getElementById("latencyValue"),
+      latencySource: document.getElementById("latencySource"),
       emotionBars: document.getElementById("emotionBars"),
+      ageOffset: document.getElementById("ageOffset"),
+      ageOffsetValue: document.getElementById("ageOffsetValue"),
       toast: document.getElementById("toast"),
     };
 
     const modes = {
-      fast: { inputSize: 224, scoreThreshold: 0.48, interval: 35 },
-      balanced: { inputSize: 320, scoreThreshold: 0.45, interval: 55 },
-      accurate: { inputSize: 416, scoreThreshold: 0.4, interval: 90 },
+      fast: { inputSize: 224, scoreThreshold: 0.52, interval: 22, proInterval: 2800, smoothing: 0.18 },
+      balanced: { inputSize: 320, scoreThreshold: 0.45, interval: 42, proInterval: 2100, smoothing: 0.24 },
+      accurate: { inputSize: 416, scoreThreshold: 0.38, interval: 65, proInterval: 1550, smoothing: 0.30 },
     };
 
     const emotionLabels = ["Happy", "Sad", "Fear", "Anger", "Confused", "Disgust"];
     const ctx = els.overlay.getContext("2d");
-    let modelsReady = false;
+
+    let coreReady = false;
     let stream = null;
     let running = false;
     let detecting = false;
@@ -498,77 +539,230 @@
     let lastLoopTime = performance.now();
     let fpsSmooth = 0;
     let lastDetections = [];
+    let emotionEma = null;
+    let genderMaleEma = null;
+    let lastBaseAgeSample = 0;
+
+    const ageHistory = [];
+    const pro = {
+      loading: false,
+      tried: false,
+      emotionPipe: null,
+      ageGenderModel: null,
+      ageGenderProcessor: null,
+      loadImage: null,
+      lastRun: 0,
+      busy: false,
+      emotionScores: null,
+      emotionAt: 0,
+      age: null,
+      ageAt: 0,
+      gender: null,
+      genderScore: 0,
+      genderAt: 0,
+      latency: 0,
+      device: "wasm",
+    };
 
-    function setModelStatus(text, kind = "loading") {
-      els.modelStatus.textContent = text;
-      els.modelDot.classList.remove("ready", "error");
-      if (kind === "ready") els.modelDot.classList.add("ready");
-      if (kind === "error") els.modelDot.classList.add("error");
+    function setPill(dot, label, text, kind = "loading") {
+      label.textContent = text;
+      dot.classList.remove("ready", "error");
+      if (kind === "ready") dot.classList.add("ready");
+      if (kind === "error") dot.classList.add("error");
     }
 
     function showToast(message) {
       els.toast.textContent = message;
       els.toast.classList.add("show");
       clearTimeout(showToast.timer);
-      showToast.timer = setTimeout(() => els.toast.classList.remove("show"), 3200);
+      showToast.timer = setTimeout(() => els.toast.classList.remove("show"), 3600);
+    }
+
+    function clamp01(value) {
+      return Math.max(0, Math.min(1, Number.isFinite(value) ? value : 0));
     }
 
     function percent(value) {
-      return `${Math.round(Math.max(0, Math.min(1, value || 0)) * 100)}%`;
+      return `${Math.round(clamp01(value) * 100)}%`;
+    }
+
+    function sigmoid(x) {
+      return 1 / (1 + Math.exp(-x));
+    }
+
+    function median(values) {
+      const list = values.filter(Number.isFinite).slice().sort((a, b) => a - b);
+      if (!list.length) return NaN;
+      const mid = Math.floor(list.length / 2);
+      return list.length % 2 ? list[mid] : (list[mid - 1] + list[mid]) / 2;
     }
 
-    function ageRange(age) {
+    function ageRange(age, source = "core", samples = 1) {
       if (!Number.isFinite(age)) return "—";
-      const a = Math.max(0, Math.round(age));
-      if (a <= 12) return "0-12";
-      if (a <= 17) return "13-17";
-      if (a <= 24) return "18-24";
-      if (a <= 34) return "25-34";
-      if (a <= 44) return "35-44";
-      if (a <= 54) return "45-54";
-      if (a <= 64) return "55-64";
-      return "65+";
-    }
-
-    function makeEmotionScores(expressions = {}) {
+      const offset = Number(els.ageOffset.value || 0);
+      const corrected = Math.max(0, Math.min(100, age + offset));
+      const half = source === "accuracy pack" ? (samples >= 3 ? 4 : 5) : (samples >= 6 ? 6 : 8);
+      const lo = Math.max(0, Math.round(corrected - half));
+      const hi = Math.min(100, Math.round(corrected + half));
+      if (hi <= 12) return "0-12";
+      return `${lo}-${hi}`;
+    }
+
+    function blankScores() {
+      return Object.fromEntries(emotionLabels.map(label => [label, 0]));
+    }
+
+    function normalizeScores(scores) {
+      const out = blankScores();
+      for (const label of emotionLabels) out[label] = clamp01(scores[label] || 0);
+      return out;
+    }
+
+    function calibrateFaceApiExpressions(expressions = {}) {
       const raw = {
-        happy: expressions.happy || 0,
-        sad: expressions.sad || 0,
-        fearful: expressions.fearful || 0,
-        angry: expressions.angry || 0,
-        disgusted: expressions.disgusted || 0,
-        surprised: expressions.surprised || 0,
-        neutral: expressions.neutral || 0,
+        happy: clamp01(expressions.happy),
+        sad: clamp01(expressions.sad),
+        fearful: clamp01(expressions.fearful),
+        angry: clamp01(expressions.angry),
+        disgusted: clamp01(expressions.disgusted),
+        surprised: clamp01(expressions.surprised),
+        neutral: clamp01(expressions.neutral),
       };
 
-      const mapped = {
-        Happy: raw.happy,
-        Sad: raw.sad,
-        Fear: raw.fearful,
-        Anger: raw.angry,
-        Disgust: raw.disgusted,
-        Confused: Math.max(raw.surprised, raw.neutral * 0.86),
-      };
+      const nonNeutralTop = Math.max(raw.happy, raw.sad, raw.fearful, raw.angry, raw.disgusted, raw.surprised);
+      const uncertainty = clamp01((1 - nonNeutralTop) * 0.28 + raw.surprised * 0.54 + raw.neutral * 0.16);
+
+      return normalizeScores({
+        Happy: Math.pow(raw.happy, 1.08),
+        Sad: Math.pow(raw.sad, 1.02),
+        Fear: Math.max(Math.pow(raw.fearful, 1.04), raw.surprised * raw.fearful * 0.55),
+        Anger: Math.pow(raw.angry, 1.03),
+        Disgust: Math.pow(raw.disgusted, 1.02),
+        Confused: Math.min(0.62, uncertainty),
+      });
+    }
+
+    function normalizeExternalEmotion(outputs) {
+      const scores = blankScores();
+      const list = Array.isArray(outputs) ? outputs : [outputs];
+
+      for (const item of list) {
+        const label = String(item.label || item.class || "").toLowerCase();
+        const score = clamp01(item.score || item.probability || 0);
+        if (label.includes("happy") || label.includes("joy")) scores.Happy = Math.max(scores.Happy, score);
+        else if (label.includes("sad")) scores.Sad = Math.max(scores.Sad, score);
+        else if (label.includes("fear")) scores.Fear = Math.max(scores.Fear, score);
+        else if (label.includes("angry") || label.includes("anger")) scores.Anger = Math.max(scores.Anger, score);
+        else if (label.includes("disgust")) scores.Disgust = Math.max(scores.Disgust, score);
+        else if (label.includes("surprise") || label.includes("neutral")) {
+          const scaled = label.includes("neutral") ? score * 0.30 : score * 0.72;
+          scores.Confused = Math.max(scores.Confused, Math.min(0.68, scaled));
+        }
+      }
+      return normalizeScores(scores);
+    }
+
+    function combineEmotionScores(faceScores) {
+      const now = performance.now();
+      const freshPro = pro.emotionScores && (now - pro.emotionAt < 6500);
+      const combined = blankScores();
+      for (const label of emotionLabels) {
+        const base = faceScores[label] || 0;
+        const proValue = freshPro ? (pro.emotionScores[label] || 0) : 0;
+        combined[label] = freshPro ? (proValue * 0.76 + base * 0.24) : base;
+      }
+
+      const cfg = modes[els.modeSelect.value] || modes.accurate;
+      if (!emotionEma) {
+        emotionEma = combined;
+      } else {
+        for (const label of emotionLabels) {
+          emotionEma[label] = emotionEma[label] * (1 - cfg.smoothing) + combined[label] * cfg.smoothing;
+        }
+      }
+      return normalizeScores(emotionEma);
+    }
 
-      const sorted = Object.entries(mapped).sort((a, b) => b[1] - a[1]);
+    function topEmotion(scores) {
+      const sorted = Object.entries(scores).sort((a, b) => b[1] - a[1]);
       const top = sorted[0] || ["Confused", 0];
       const second = sorted[1] || ["", 0];
-      if ((top[1] - second[1]) < 0.08 || top[1] < 0.34) {
-        return { label: "Confused", score: Math.max(mapped.Confused, 0.42), mapped };
+      let label = top[0];
+      let score = top[1];
+      if (score < 0.22 || (score - second[1] < 0.055 && label !== "Confused")) {
+        label = "Confused";
+        score = Math.max(scores.Confused || 0, 0.24);
+      }
+      return { label, score: clamp01(score) };
+    }
+
+    function pushAgeSample(age, source, weight = 1) {
+      if (!Number.isFinite(age) || age < 0 || age > 100) return;
+      const now = performance.now();
+      ageHistory.push({ age, source, weight, t: now });
+      while (ageHistory.length > 40) ageHistory.shift();
+      const cutoff = now - 30000;
+      while (ageHistory.length && ageHistory[0].t < cutoff) ageHistory.shift();
+    }
+
+    function stableAgeEstimate() {
+      const proSamples = ageHistory.filter(s => s.source === "accuracy pack");
+      const usable = proSamples.length >= 2 ? proSamples : ageHistory;
+      if (!usable.length) return { age: NaN, source: "Waiting", samples: 0 };
+      const expanded = [];
+      for (const sample of usable) {
+        const repeats = Math.max(1, Math.round(sample.weight || 1));
+        for (let i = 0; i < repeats; i += 1) expanded.push(sample.age);
       }
-      return { label: top[0], score: top[1], mapped };
+      return {
+        age: median(expanded),
+        source: proSamples.length >= 2 ? "accuracy pack" : "core model",
+        samples: usable.length,
+      };
+    }
+
+    function updateGenderEstimate(label, confidence, weight = 1) {
+      if (!label) return;
+      const pMale = label.toLowerCase() === "male" ? clamp01(confidence) : 1 - clamp01(confidence);
+      const alpha = Math.min(0.6, 0.16 * weight);
+      genderMaleEma = genderMaleEma === null ? pMale : genderMaleEma * (1 - alpha) + pMale * alpha;
+    }
+
+    function currentGender() {
+      if (genderMaleEma === null) return { label: "—", confidence: 0 };
+      const label = genderMaleEma >= 0.5 ? "Male" : "Female";
+      const confidence = Math.max(genderMaleEma, 1 - genderMaleEma);
+      return { label, confidence };
     }
 
     function makeInsight(det) {
-      const emotion = makeEmotionScores(det.expressions);
-      const genderRaw = (det.gender || "").toLowerCase() === "female" ? "Female" : "Male";
+      const faceScores = calibrateFaceApiExpressions(det.expressions || {});
+      const scores = combineEmotionScores(faceScores);
+      const emotion = topEmotion(scores);
+
+      const now = performance.now();
+      if (Number.isFinite(det.age) && now - lastBaseAgeSample > 550) {
+        pushAgeSample(det.age, "core model", 1);
+        lastBaseAgeSample = now;
+      }
+
+      const coreGender = (det.gender || "").toLowerCase() === "female" ? "Female" : "Male";
+      updateGenderEstimate(coreGender, det.genderProbability || 0, 1);
+      if (pro.gender && (now - pro.genderAt < 8000)) {
+        updateGenderEstimate(pro.gender, pro.genderScore, 3.2);
+      }
+
+      const age = stableAgeEstimate();
+      const gender = currentGender();
+
       return {
         emotionLabel: emotion.label,
         emotionScore: emotion.score,
-        emotionScores: emotion.mapped,
-        gender: genderRaw,
-        genderScore: det.genderProbability || 0,
-        ageRange: ageRange(det.age),
+        emotionScores: scores,
+        gender: gender.label,
+        genderScore: gender.confidence,
+        ageRange: ageRange(age.age, age.source, age.samples),
+        ageSource: age.samples ? `${age.source}, ${age.samples} samples` : "Waiting",
         faceScore: det.detection && det.detection.score ? det.detection.score : 0,
       };
     }
@@ -586,13 +780,19 @@
     }
 
     function resetDetails() {
+      emotionEma = null;
+      genderMaleEma = null;
+      ageHistory.length = 0;
       els.feelingValue.textContent = "—";
       els.feelingConfidence.textContent = "Waiting";
       els.genderValue.textContent = "—";
       els.genderConfidence.textContent = "Waiting";
       els.ageValue.textContent = "—";
+      els.ageSource.textContent = "Waiting";
       els.facesValue.textContent = "0";
       els.faceScore.textContent = "No face yet";
+      els.latencyValue.textContent = "—";
+      els.latencySource.textContent = "Core model time";
       renderBars({});
     }
 
@@ -608,6 +808,7 @@
     function updateDetails(detections, elapsedMs) {
       els.facesValue.textContent = String(detections.length);
       els.latencyValue.textContent = `${Math.round(elapsedMs)}ms`;
+      els.latencySource.textContent = pro.latency ? `Core + accuracy pack ${Math.round(pro.latency)}ms` : "Core model time";
 
       const now = performance.now();
       const instantFps = 1000 / Math.max(1, now - lastLoopTime);
@@ -622,17 +823,20 @@
         els.genderValue.textContent = "—";
         els.genderConfidence.textContent = "No face";
         els.ageValue.textContent = "—";
+        els.ageSource.textContent = "No face";
         els.faceScore.textContent = "No face yet";
         renderBars({});
         return;
       }
 
+      maybeRunAccuracyPack(primary);
       const insight = makeInsight(primary);
       els.feelingValue.textContent = insight.emotionLabel;
       els.feelingConfidence.textContent = `${percent(insight.emotionScore)} confidence`;
       els.genderValue.textContent = insight.gender;
-      els.genderConfidence.textContent = `${percent(insight.genderScore)} confidence`;
+      els.genderConfidence.textContent = insight.gender === "—" ? "Waiting" : `${percent(insight.genderScore)} confidence`;
       els.ageValue.textContent = insight.ageRange;
+      els.ageSource.textContent = insight.ageSource;
       els.faceScore.textContent = `${percent(insight.faceScore)} face score`;
       renderBars(insight.emotionScores);
     }
@@ -727,33 +931,227 @@
       if (lastDetections.length) drawDetections(lastDetections);
     }
 
-    async function loadModels() {
-      try {
-        const waitForFaceApi = () => new Promise((resolve, reject) => {
-          const started = performance.now();
-          const tick = () => {
-            if (window.faceapi) return resolve();
-            if (performance.now() - started > 12000) return reject(new Error("face-api.js did not load"));
-            setTimeout(tick, 80);
-          };
-          tick();
-        });
+    function cropFaceCanvas(det, targetSize = 256) {
+      const box = det.detection.box;
+      const videoW = els.video.videoWidth || els.overlay.width;
+      const videoH = els.video.videoHeight || els.overlay.height;
+      const pad = 0.32;
+      const cx = box.x + box.width / 2;
+      const cy = box.y + box.height / 2;
+      const side = Math.max(box.width, box.height) * (1 + pad * 2);
+      const sx = Math.max(0, Math.round(cx - side / 2));
+      const sy = Math.max(0, Math.round(cy - side / 2));
+      const sw = Math.min(videoW - sx, Math.round(side));
+      const sh = Math.min(videoH - sy, Math.round(side));
+
+      const canvas = document.createElement("canvas");
+      canvas.width = targetSize;
+      canvas.height = targetSize;
+      const c = canvas.getContext("2d", { willReadFrequently: true });
+      c.fillStyle = "#000";
+      c.fillRect(0, 0, targetSize, targetSize);
+      c.drawImage(els.video, sx, sy, sw, sh, 0, 0, targetSize, targetSize);
+      return canvas;
+    }
+
+    function canvasToBlobUrl(canvas) {
+      return new Promise((resolve, reject) => {
+        canvas.toBlob(blob => {
+          if (!blob) reject(new Error("Could not create face crop"));
+          else resolve(URL.createObjectURL(blob));
+        }, "image/jpeg", 0.92);
+      });
+    }
 
+    async function waitForFaceApi() {
+      const started = performance.now();
+      while (!window.faceapi) {
+        if (performance.now() - started > 12000) throw new Error("face-api.js did not load");
+        await new Promise(resolve => setTimeout(resolve, 80));
+      }
+    }
+
+    async function loadCoreModels() {
+      try {
         await waitForFaceApi();
         await Promise.all([
-          faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
-          faceapi.nets.faceLandmark68TinyNet.loadFromUri(MODEL_URL),
-          faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL),
-          faceapi.nets.ageGenderNet.loadFromUri(MODEL_URL),
+          faceapi.nets.tinyFaceDetector.loadFromUri(FACE_API_MODEL_URL),
+          faceapi.nets.faceLandmark68TinyNet.loadFromUri(FACE_API_MODEL_URL),
+          faceapi.nets.faceExpressionNet.loadFromUri(FACE_API_MODEL_URL),
+          faceapi.nets.ageGenderNet.loadFromUri(FACE_API_MODEL_URL),
         ]);
-        modelsReady = true;
-        setModelStatus("AI models ready", "ready");
+        coreReady = true;
+        setPill(els.coreDot, els.coreStatus, "Core models ready", "ready");
         els.startBtn.disabled = false;
+        els.accuracyBtn.disabled = false;
         renderBars({});
+        setTimeout(() => loadAccuracyPack(true), 600);
       } catch (err) {
         console.error(err);
-        setModelStatus("Model loading failed", "error");
-        showToast("Model loading failed. Refresh the Space and check that the browser can access the CDN.");
+        setPill(els.coreDot, els.coreStatus, "Core model loading failed", "error");
+        showToast("Core model loading failed. Refresh the Space and check CDN access.");
+      }
+    }
+
+    async function getTransformersModule() {
+      const mod = await import(TRANSFORMERS_CDN);
+      if (mod.env) {
+        mod.env.allowLocalModels = false;
+        if (mod.env.backends && mod.env.backends.onnx && mod.env.backends.onnx.wasm) {
+          mod.env.backends.onnx.wasm.numThreads = Math.max(1, Math.min(4, navigator.hardwareConcurrency || 2));
+        }
+      }
+      return mod;
+    }
+
+    async function loadPipelineWithFallback(pipeline, task, modelId) {
+      const preferWebGpu = !!navigator.gpu;
+      const attempts = preferWebGpu
+        ? [{ device: "webgpu", dtype: "q8" }, { device: "wasm", dtype: "q8" }, { device: "wasm" }]
+        : [{ device: "wasm", dtype: "q8" }, { device: "wasm" }];
+      let lastErr = null;
+      for (const opts of attempts) {
+        try {
+          const pipe = await pipeline(task, modelId, opts);
+          pro.device = opts.device || "wasm";
+          return pipe;
+        } catch (err) {
+          lastErr = err;
+          console.warn(`Failed loading ${modelId} with`, opts, err);
+        }
+      }
+      throw lastErr || new Error(`Could not load ${modelId}`);
+    }
+
+    async function loadAgeGenderWithFallback(mod) {
+      const preferWebGpu = !!navigator.gpu;
+      const attempts = preferWebGpu
+        ? [{ device: "webgpu", dtype: "q4" }, { device: "wasm", dtype: "q4" }, { device: "wasm", dtype: "q8" }, { device: "wasm" }]
+        : [{ device: "wasm", dtype: "q4" }, { device: "wasm", dtype: "q8" }, { device: "wasm" }];
+      let model = null;
+      let lastErr = null;
+      for (const opts of attempts) {
+        try {
+          model = await mod.AutoModel.from_pretrained(AGE_GENDER_MODEL_ID, opts);
+          pro.device = opts.device || "wasm";
+          break;
+        } catch (err) {
+          lastErr = err;
+          console.warn("Age/gender model load attempt failed", opts, err);
+        }
+      }
+      if (!model) throw lastErr || new Error("Could not load age/gender model");
+      const processor = await mod.AutoProcessor.from_pretrained(AGE_GENDER_MODEL_ID);
+      return { model, processor };
+    }
+
+    async function loadAccuracyPack(auto = false) {
+      if (pro.loading || (pro.emotionPipe && pro.ageGenderModel)) return;
+      pro.loading = true;
+      pro.tried = true;
+      els.accuracyBtn.disabled = true;
+      setPill(els.proDot, els.proStatus, auto ? "Accuracy pack: loading in background..." : "Accuracy pack: loading...", "loading");
+      if (!auto) showToast("Loading higher-accuracy transformer models. First load can take time.");
+
+      try {
+        const mod = await getTransformersModule();
+        pro.loadImage = mod.load_image || mod.RawImage?.fromURL;
+
+        try {
+          pro.emotionPipe = await loadPipelineWithFallback(mod.pipeline, "image-classification", EMOTION_MODEL_ID);
+        } catch (emotionErr) {
+          console.warn("Emotion transformer unavailable", emotionErr);
+        }
+
+        try {
+          if (mod.AutoModel && mod.AutoProcessor && (mod.load_image || mod.RawImage?.fromURL)) {
+            const pair = await loadAgeGenderWithFallback(mod);
+            pro.ageGenderModel = pair.model;
+            pro.ageGenderProcessor = pair.processor;
+          }
+        } catch (ageErr) {
+          console.warn("Age/gender transformer unavailable", ageErr);
+        }
+
+        if (pro.emotionPipe || pro.ageGenderModel) {
+          const parts = [];
+          if (pro.emotionPipe) parts.push("emotion");
+          if (pro.ageGenderModel) parts.push("age/gender");
+          setPill(els.proDot, els.proStatus, `Accuracy pack ready: ${parts.join(" + ")} (${pro.device})`, "ready");
+          showToast(`Accuracy pack ready: ${parts.join(" + ")}`);
+        } else {
+          throw new Error("No accuracy models loaded");
+        }
+      } catch (err) {
+        console.error(err);
+        setPill(els.proDot, els.proStatus, "Accuracy pack unavailable; using core model", "error");
+        if (!auto) showToast("Accuracy pack could not load. The app will keep using the core model.");
+      } finally {
+        pro.loading = false;
+        els.accuracyBtn.disabled = !!(pro.emotionPipe && pro.ageGenderModel);
+      }
+    }
+
+    async function maybeRunAccuracyPack(primary) {
+      const cfg = modes[els.modeSelect.value] || modes.accurate;
+      const now = performance.now();
+      if (!primary || pro.busy || (!pro.emotionPipe && !pro.ageGenderModel)) return;
+      if (now - pro.lastRun < cfg.proInterval) return;
+      pro.busy = true;
+      pro.lastRun = now;
+
+      let url = null;
+      const started = performance.now();
+      try {
+        const crop = cropFaceCanvas(primary, 288);
+        url = await canvasToBlobUrl(crop);
+
+        if (pro.emotionPipe) {
+          let output;
+          try {
+            output = await pro.emotionPipe(url, { topK: 7 });
+          } catch (_) {
+            output = await pro.emotionPipe(url);
+          }
+          pro.emotionScores = normalizeExternalEmotion(output);
+          pro.emotionAt = performance.now();
+        }
+
+        if (pro.ageGenderModel && pro.ageGenderProcessor && pro.loadImage) {
+          let image;
+          if (typeof pro.loadImage === "function") {
+            image = await pro.loadImage(url);
+          }
+          const inputs = await pro.ageGenderProcessor(image);
+          const output = await pro.ageGenderModel(inputs);
+          const logits = output.logits || output.last_hidden_state || output[0];
+          let values = [];
+          if (logits?.tolist) {
+            values = logits.tolist().flat(Infinity);
+          } else if (logits?.data) {
+            values = Array.from(logits.data);
+          }
+          const rawAge = Number(values[0]);
+          const rawGender = Number(values[1]);
+          if (Number.isFinite(rawAge)) {
+            const age = Math.max(0, Math.min(100, Math.round(rawAge)));
+            pro.age = age;
+            pro.ageAt = performance.now();
+            pushAgeSample(age, "accuracy pack", 4);
+          }
+          if (Number.isFinite(rawGender)) {
+            const pFemale = rawGender >= 0 && rawGender <= 1 ? rawGender : sigmoid(rawGender);
+            pro.gender = pFemale >= 0.5 ? "Female" : "Male";
+            pro.genderScore = Math.max(pFemale, 1 - pFemale);
+            pro.genderAt = performance.now();
+          }
+        }
+      } catch (err) {
+        console.warn("Accuracy inference failed", err);
+      } finally {
+        if (url) URL.revokeObjectURL(url);
+        pro.latency = performance.now() - started;
+        pro.busy = false;
       }
     }
 
@@ -767,7 +1165,7 @@
       els.video.srcObject = null;
       ctx.clearRect(0, 0, els.overlay.width, els.overlay.height);
       els.emptyState.style.display = "grid";
-      els.startBtn.disabled = !modelsReady;
+      els.startBtn.disabled = !coreReady;
       els.switchBtn.disabled = true;
       els.stopBtn.disabled = true;
       els.cameraTag.textContent = "Camera: stopped";
@@ -775,8 +1173,8 @@
     }
 
     async function startCamera(facing = currentFacing) {
-      if (!modelsReady) {
-        showToast("Please wait until the AI models finish loading.");
+      if (!coreReady) {
+        showToast("Please wait until the core models finish loading.");
         return;
       }
 
@@ -822,12 +1220,12 @@
     }
 
     async function detectLoop() {
-      if (!running || !modelsReady || detecting) return;
+      if (!running || !coreReady || detecting) return;
       detecting = true;
       const started = performance.now();
       try {
         fitCanvas();
-        const cfg = modes[els.modeSelect.value] || modes.balanced;
+        const cfg = modes[els.modeSelect.value] || modes.accurate;
         const options = new faceapi.TinyFaceDetectorOptions({ inputSize: cfg.inputSize, scoreThreshold: cfg.scoreThreshold });
         const raw = await faceapi
           .detectAllFaces(els.video, options)
@@ -856,13 +1254,19 @@
       currentFacing = currentFacing === "user" ? "environment" : "user";
       startCamera(currentFacing);
     });
+    els.accuracyBtn.addEventListener("click", () => loadAccuracyPack(false));
     els.stopBtn.addEventListener("click", stopStream);
     els.video.addEventListener("loadedmetadata", fitCanvas);
     window.addEventListener("resize", fitCanvas);
+    els.ageOffset.addEventListener("input", () => {
+      const value = Number(els.ageOffset.value || 0);
+      els.ageOffsetValue.textContent = `${value > 0 ? "+" : ""}${value}y`;
+    });
 
     resetDetails();
     renderBars({});
-    loadModels();
+    setPill(els.proDot, els.proStatus, "Accuracy pack: idle", "loading");
+    loadCoreModels();
   </script>
 </body>
 </html>