Upload 2 files

README.md

@@ -5,11 +5,11 @@ colorFrom: blue
 colorTo: purple
 sdk: static
 pinned: false
-short_description: Live facial expression and age estimates
+short_description: Live face emotion age gender estimates
 ---
 
 # SentAI
 
-Static browser-side live face analysis demo for Hugging Face Spaces.
+Simple browser-side live face analysis for Hugging Face Spaces.
 
-Phase 3C adds multi-crop transformer expression scoring and calibration to reduce Happy/Confused dominance, with better sensitivity for Sad, Fear, and Disgust.
+Phase 4 removes manual model and accuracy controls. Precision models load automatically in the background. The app estimates visible facial expression, apparent age range, and male/female presentation from live camera frames.

index.html

@@ -6,6 +6,7 @@
   <meta name="theme-color" content="#050816" />
   <title>SentAI</title>
   <script defer src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.21.0/dist/ort.min.js"></script>
   <style>
     :root {
       --bg-a: #050816;
@@ -69,18 +70,18 @@
 
     .brand h1 {
       margin: 0;
-      font-size: clamp(3rem, 8vw, 7rem);
-      line-height: 0.92;
+      font-size: clamp(4.2rem, 9vw, 8rem);
+      line-height: 0.88;
       letter-spacing: -0.08em;
       font-weight: 950;
-      text-shadow: 0 24px 70px rgba(34, 211, 238, 0.1);
+      text-shadow: 0 24px 70px rgba(34, 211, 238, 0.10);
     }
 
     .brand p {
       margin: 18px 0 0;
-      max-width: 920px;
+      max-width: 960px;
       color: var(--muted);
-      font-size: clamp(1rem, 1.8vw, 1.24rem);
+      font-size: clamp(1rem, 1.7vw, 1.22rem);
       line-height: 1.55;
     }
 
@@ -102,7 +103,7 @@
       color: var(--muted);
       box-shadow: var(--shadow);
       white-space: nowrap;
-      font-weight: 800;
+      font-weight: 850;
     }
 
     .dot {
@@ -124,7 +125,7 @@
       margin-bottom: 18px;
     }
 
-    button, select {
+    button {
       appearance: none;
       border: 1px solid var(--stroke);
       background: rgba(15, 23, 42, 0.76);
@@ -139,10 +140,9 @@
       min-height: 48px;
     }
 
-    button:hover, select:hover { transform: translateY(-1px); border-color: rgba(34, 211, 238, 0.55); }
+    button: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.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; }
 
@@ -160,7 +160,7 @@
 
     .grid {
       display: grid;
-      grid-template-columns: minmax(0, 1.44fr) minmax(360px, 0.74fr);
+      grid-template-columns: minmax(0, 1.42fr) minmax(360px, 0.76fr);
       gap: 18px;
       align-items: stretch;
     }
@@ -211,9 +211,9 @@
     }
 
     .empty-card {
-      max-width: 600px;
+      max-width: 620px;
       border: 1px solid var(--stroke);
-      background: rgba(15,23,42,0.7);
+      background: rgba(15,23,42,0.70);
       border-radius: 24px;
       padding: 28px;
     }
@@ -278,14 +278,14 @@
 
     .wide { grid-column: 1 / -1; }
 
-    .bars, .note, .calibration {
+    .bars, .note {
       border: 1px solid var(--stroke);
       background: rgba(255,255,255,0.055);
       border-radius: 22px;
       padding: 16px;
     }
 
-    .bars h3, .calibration h3 {
+    .bars h3 {
       margin: 0 0 14px;
       font-size: 1rem;
       color: var(--text);
@@ -318,21 +318,6 @@
       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 {
       color: #cffafe;
       background: rgba(34,211,238,0.08);
@@ -371,15 +356,14 @@
       .stage-panel { padding: 10px; }
       .side { padding: 14px; }
       .toolbar { gap: 9px; }
-      button, select, .camera-tag { flex: 1 1 150px; justify-content: center; }
+      button, .camera-tag { flex: 1 1 150px; justify-content: center; }
     }
 
     @media (max-width: 560px) {
-      .brand h1 { font-size: clamp(3.6rem, 19vw, 5.4rem); }
+      .brand h1 { font-size: clamp(4rem, 22vw, 5.4rem); }
       .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; }
@@ -391,29 +375,18 @@
     <header class="hero" aria-label="SentAI heading">
       <div class="brand">
         <h1>SentAI</h1>
-        <p>Higher-accuracy live face analysis with multi-crop expression scoring, apparent age range, and male/female presentation estimate. Phase 3C is tuned to reduce Happy/Confused dominance.</p>
+        <p>Live facial analysis with automatic high-precision models for expression, apparent age range, and male/female estimate. No manual model switches.</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 class="status-pill" aria-live="polite"><span id="aiDot" class="dot"></span><span id="aiStatus">Preparing AI models...</span></div>
+        <div class="status-pill" aria-live="polite"><span id="precisionDot" class="dot"></span><span id="precisionStatus">Precision models loading automatically</span></div>
       </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="emotionMode" aria-label="Emotion scoring mode">
-        <option value="sensitive" selected>Boost sad/fear/disgust</option>
-        <option value="balanced">Balanced emotions</option>
-        <option value="raw">Raw model scores</option>
-      </select>
-      <select id="modeSelect" aria-label="Performance mode">
-        <option value="fast">Fast 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>
 
@@ -425,7 +398,7 @@
           <div id="emptyState" class="empty-state">
             <div class="empty-card">
               <strong>Ready for live analysis</strong>
-              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.
+              Tap <b>Start camera</b>. Use bright front lighting, keep one face centered, and hold each expression for a moment so the neural ensemble can stabilize.
             </div>
           </div>
         </div>
@@ -436,17 +409,17 @@
         <div class="metric-grid">
           <div class="metric">
             <span>Possible feeling</span>
-            <strong id="feelingValue">—</strong>
+            <strong id="feelingValue">-</strong>
             <small id="feelingConfidence">Waiting</small>
           </div>
           <div class="metric">
             <span>Gender</span>
-            <strong id="genderValue">—</strong>
+            <strong id="genderValue">-</strong>
             <small id="genderConfidence">Waiting</small>
           </div>
           <div class="metric">
             <span>Apparent age</span>
-            <strong id="ageValue">—</strong>
+            <strong id="ageValue">-</strong>
             <small id="ageSource">Waiting</small>
           </div>
           <div class="metric">
@@ -456,13 +429,13 @@
           </div>
           <div class="metric">
             <span>FPS</span>
-            <strong id="fpsValue">—</strong>
-            <small>Detection loop</small>
+            <strong id="fpsValue">-</strong>
+            <small>Live loop</small>
           </div>
           <div class="metric">
             <span>Latency</span>
-            <strong id="latencyValue">—</strong>
-            <small id="latencySource">Core model time</small>
+            <strong id="latencyValue">-</strong>
+            <small id="latencySource">Model time</small>
           </div>
         </div>
 
@@ -471,17 +444,8 @@
           <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">
-          The app estimates visible facial expression and apparent age from camera frames. Phase 3C uses multi-crop transformer averaging and sad/fear/disgust calibration to reduce Happy/Confused dominance. It still cannot know a person's true internal feeling.
+          SentAI estimates visible facial expression and apparent age from camera frames. It cannot know a person's true internal feeling, but this version uses an automatic multi-model deep-learning ensemble to improve sad, fear, and disgust detection.
         </div>
       </aside>
     </section>
@@ -491,22 +455,21 @@
 
   <script type="module">
     import { pipeline as xenovaPipeline, env as xenovaEnv } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2";
+    import { AutoModel, AutoProcessor, load_image, env as hfEnv } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1";
+
     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/@xenova/transformers@2.17.2";
-    const EMOTION_MODEL_ID = "Xenova/facial_emotions_image_detection";
-    const AGE_GENDER_MODEL_ID = null; // Phase 3B keeps age on the stable face-api model and improves it with smoothing + calibration.
+    const EMOTION_TRANSFORMER_MODEL_ID = "Xenova/facial_emotions_image_detection";
+    const AGE_GENDER_MODEL_ID = "onnx-community/age-gender-prediction-ONNX";
+    const OPENCV_FER_MODEL_URL = "https://huggingface.co/opencv/facial_expression_recognition/resolve/main/facial_expression_recognition_mobilefacenet_2022july.onnx";
 
     const els = {
-      coreDot: document.getElementById("coreDot"),
-      coreStatus: document.getElementById("coreStatus"),
-      proDot: document.getElementById("proDot"),
-      proStatus: document.getElementById("proStatus"),
+      aiDot: document.getElementById("aiDot"),
+      aiStatus: document.getElementById("aiStatus"),
+      precisionDot: document.getElementById("precisionDot"),
+      precisionStatus: document.getElementById("precisionStatus"),
       startBtn: document.getElementById("startBtn"),
       switchBtn: document.getElementById("switchBtn"),
-      accuracyBtn: document.getElementById("accuracyBtn"),
       stopBtn: document.getElementById("stopBtn"),
-      emotionMode: document.getElementById("emotionMode"),
-      modeSelect: document.getElementById("modeSelect"),
       cameraTag: document.getElementById("cameraTag"),
       video: document.getElementById("video"),
       overlay: document.getElementById("overlay"),
@@ -524,18 +487,12 @@
       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.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 ferLabels = ["Anger", "Disgust", "Fear", "Happy", "Confused", "Sad", "Confused"];
+    const detectorConfig = { inputSize: 416, scoreThreshold: 0.32, intervalMs: 65, precisionIntervalMs: 650, smoothing: 0.26 };
     const ctx = els.overlay.getContext("2d");
 
     let coreReady = false;
@@ -549,26 +506,28 @@
     let emotionEma = null;
     let genderMaleEma = null;
     let lastBaseAgeSample = 0;
+    let latestPrimary = null;
 
     const ageHistory = [];
-    const pro = {
+    const precision = {
       loading: false,
-      tried: false,
+      readyCount: 0,
+      ferSession: null,
       emotionPipe: null,
-      ageGenderModel: null,
-      ageGenderProcessor: null,
-      loadImage: null,
+      ageModel: null,
+      ageProcessor: null,
       lastRun: 0,
       busy: false,
-      emotionScores: null,
-      emotionAt: 0,
+      ferScores: null,
+      ferAt: 0,
+      transformerScores: null,
+      transformerAt: 0,
       age: null,
       ageAt: 0,
       gender: null,
       genderScore: 0,
       genderAt: 0,
       latency: 0,
-      device: "wasm",
     };
 
     function setPill(dot, label, text, kind = "loading") {
@@ -582,7 +541,7 @@
       els.toast.textContent = message;
       els.toast.classList.add("show");
       clearTimeout(showToast.timer);
-      showToast.timer = setTimeout(() => els.toast.classList.remove("show"), 3600);
+      showToast.timer = setTimeout(() => els.toast.classList.remove("show"), 3400);
     }
 
     function clamp01(value) {
@@ -597,6 +556,15 @@
       return 1 / (1 + Math.exp(-x));
     }
 
+    function softmax(values) {
+      const list = Array.from(values || []).map(v => Number(v));
+      if (!list.length) return [];
+      const max = Math.max(...list);
+      const exps = list.map(v => Math.exp(v - max));
+      const sum = exps.reduce((a, b) => a + b, 0) || 1;
+      return exps.map(v => v / sum);
+    }
+
     function median(values) {
       const list = values.filter(Number.isFinite).slice().sort((a, b) => a - b);
       if (!list.length) return NaN;
@@ -604,17 +572,6 @@
       return list.length % 2 ? list[mid] : (list[mid - 1] + list[mid]) / 2;
     }
 
-    function ageRange(age, source = "core", samples = 1) {
-      if (!Number.isFinite(age)) return "—";
-      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]));
     }
@@ -625,6 +582,24 @@
       return out;
     }
 
+    function renormalize(scores) {
+      const out = normalizeScores(scores);
+      const sum = emotionLabels.reduce((a, label) => a + out[label], 0);
+      if (sum <= 0) return out;
+      for (const label of emotionLabels) out[label] = out[label] / sum;
+      return out;
+    }
+
+    function ageRange(age, source = "core", samples = 1) {
+      if (!Number.isFinite(age)) return "-";
+      const corrected = Math.max(0, Math.min(100, age));
+      const half = source === "precision model" ? (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 calibrateFaceApiExpressions(expressions = {}) {
       const raw = {
         happy: clamp01(expressions.happy),
@@ -635,24 +610,21 @@
         surprised: clamp01(expressions.surprised),
         neutral: clamp01(expressions.neutral),
       };
-
       const nonNeutralTop = Math.max(raw.happy, raw.sad, raw.fearful, raw.angry, raw.disgusted, raw.surprised);
-      const uncertainty = clamp01((1 - nonNeutralTop) * 0.10 + raw.surprised * 0.42 + raw.neutral * 0.05);
-
+      const confused = Math.min(0.38, raw.neutral * 0.24 + raw.surprised * 0.42 + Math.max(0, 1 - nonNeutralTop) * 0.05);
       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.42, uncertainty),
+        Happy: Math.pow(raw.happy, 1.10),
+        Sad: Math.pow(raw.sad, 0.96),
+        Fear: Math.max(Math.pow(raw.fearful, 0.98), raw.surprised * raw.fearful * 0.55),
+        Anger: Math.pow(raw.angry, 1.02),
+        Disgust: Math.pow(raw.disgusted, 0.96),
+        Confused: confused,
       });
     }
 
     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);
@@ -662,85 +634,80 @@
         else if (label.includes("angry") || label.includes("anger")) scores.Anger = Math.max(scores.Anger, score);
         else if (label.includes("disgust") || label.includes("disgusted")) scores.Disgust = Math.max(scores.Disgust, score);
         else if (label.includes("surprise") || label.includes("neutral")) {
-          // Neutral/surprise should not dominate. They only become Confused when no clear emotion wins.
-          const scaled = label.includes("neutral") ? score * 0.045 : score * 0.30;
-          scores.Confused = Math.max(scores.Confused, Math.min(0.30, scaled));
+          const scaled = label.includes("neutral") ? score * 0.45 : score * 0.52;
+          scores.Confused = Math.max(scores.Confused, Math.min(0.58, scaled));
         }
       }
       return normalizeScores(scores);
     }
 
-    function emotionWeights() {
-      const mode = els.emotionMode?.value || "sensitive";
-      if (mode === "raw") {
-        return { Happy: 1.00, Sad: 1.00, Fear: 1.00, Anger: 1.00, Confused: 1.00, Disgust: 1.00 };
-      }
-      if (mode === "balanced") {
-        return { Happy: 0.88, Sad: 1.28, Fear: 1.38, Anger: 0.95, Confused: 0.58, Disgust: 1.48 };
-      }
-      // Default: compensate for webcam models over-predicting smile/neutral/anger and under-predicting subtle negative expressions.
-      return { Happy: 0.70, Sad: 1.62, Fear: 1.82, Anger: 0.86, Confused: 0.42, Disgust: 2.05 };
-    }
-
-    function applyEmotionCalibration(scores) {
-      const mode = els.emotionMode?.value || "sensitive";
-      if (mode === "raw") return normalizeScores(scores);
-      const weights = emotionWeights();
+    function calibrateFinalEmotion(scores) {
+      const priors = { Happy: 0.86, Sad: 1.18, Fear: 1.24, Anger: 0.96, Confused: 0.72, Disgust: 1.34 };
       const out = blankScores();
       for (const label of emotionLabels) {
         let v = clamp01(scores[label] || 0);
-        // Make low but consistent sad/fear/disgust evidence visible instead of crushed by happy/confused.
-        if (["Sad", "Fear", "Disgust"].includes(label)) v = Math.pow(v, 0.82);
-        if (label === "Happy") v = Math.pow(v, 1.12);
-        if (label === "Confused") v = Math.pow(v, 1.18);
-        out[label] = clamp01(v * weights[label]);
+        if (["Sad", "Fear", "Disgust"].includes(label)) v = Math.pow(v, 0.92);
+        if (label === "Happy") v = Math.pow(v, 1.08);
+        if (label === "Confused") v = Math.pow(v, 1.04);
+        out[label] = clamp01(v * priors[label]);
       }
-      // Confused is a fallback label, not a high-confidence emotion class.
-      out.Confused = Math.min(out.Confused, mode === "balanced" ? 0.34 : 0.24);
-      return normalizeScores(out);
+      return renormalize(out);
     }
 
     function combineEmotionScores(faceScores) {
       const now = performance.now();
-      const freshPro = pro.emotionScores && (now - pro.emotionAt < 6500);
+      const ferFresh = precision.ferScores && (now - precision.ferAt < 3400);
+      const transformerFresh = precision.transformerScores && (now - precision.transformerAt < 5000);
       const combined = blankScores();
-      for (const label of emotionLabels) {
-        const base = faceScores[label] || 0;
-        const proValue = freshPro ? (pro.emotionScores[label] || 0) : 0;
-        // Trust the transformer crop classifier more than face-api expressions when it is fresh.
-        combined[label] = freshPro ? (proValue * 0.88 + base * 0.12) : base;
+
+      let totalWeight = 0;
+      const addWeighted = (scores, weight) => {
+        if (!scores || weight <= 0) return;
+        totalWeight += weight;
+        for (const label of emotionLabels) combined[label] += (scores[label] || 0) * weight;
+      };
+
+      if (ferFresh && transformerFresh) {
+        addWeighted(precision.ferScores, 0.55);
+        addWeighted(precision.transformerScores, 0.34);
+        addWeighted(faceScores, 0.11);
+      } else if (ferFresh) {
+        addWeighted(precision.ferScores, 0.76);
+        addWeighted(faceScores, 0.24);
+      } else if (transformerFresh) {
+        addWeighted(precision.transformerScores, 0.78);
+        addWeighted(faceScores, 0.22);
+      } else {
+        addWeighted(faceScores, 1.0);
       }
 
-      const calibrated = applyEmotionCalibration(combined);
-      const cfg = modes[els.modeSelect.value] || modes.accurate;
+      if (totalWeight > 0) {
+        for (const label of emotionLabels) combined[label] /= totalWeight;
+      }
+      const calibrated = calibrateFinalEmotion(combined);
       if (!emotionEma) {
         emotionEma = calibrated;
       } else {
         for (const label of emotionLabels) {
-          emotionEma[label] = emotionEma[label] * (1 - cfg.smoothing) + calibrated[label] * cfg.smoothing;
+          emotionEma[label] = emotionEma[label] * (1 - detectorConfig.smoothing) + calibrated[label] * detectorConfig.smoothing;
         }
       }
-      return normalizeScores(emotionEma);
+      return renormalize(emotionEma);
     }
 
     function topEmotion(scores) {
-      const nonConfused = Object.entries(scores).filter(([label]) => label !== "Confused").sort((a, b) => b[1] - a[1]);
-      let [label, score] = nonConfused[0] || ["Confused", 0];
-      const rare = ["Disgust", "Fear", "Sad"].map(name => [name, scores[name] || 0]).sort((a, b) => b[1] - a[1])[0];
-      const mode = els.emotionMode?.value || "sensitive";
-      if (mode !== "raw" && rare && rare[1] >= 0.24) {
-        const rescueMargin = mode === "sensitive" ? 0.20 : 0.12;
-        if (rare[1] >= score - rescueMargin) {
-          label = rare[0];
-          score = rare[1];
-        }
+      const entries = Object.entries(scores).sort((a, b) => b[1] - a[1]);
+      let [label, score] = entries[0] || ["Confused", 0];
+      const nonConfused = entries.filter(([name]) => name !== "Confused");
+      const [altLabel, altScore] = nonConfused[0] || [label, score];
+
+      if (label === "Confused" && altScore >= 0.22 && (score - altScore) < 0.10) {
+        label = altLabel;
+        score = altScore;
       }
-      if (score < 0.16) {
-        label = "Confused";
-        score = Math.max(scores.Confused || 0, 0.16);
-      } else if ((scores.Confused || 0) > score && score < 0.26) {
+      if (score < 0.18) {
         label = "Confused";
-        score = Math.min(scores.Confused || 0.22, 0.28);
+        score = Math.max(scores.Confused || 0.16, 0.16);
       }
       return { label, score: clamp01(score) };
     }
@@ -749,14 +716,14 @@
       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 > 50) ageHistory.shift();
+      const cutoff = now - 45000;
       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;
+      const precisionSamples = ageHistory.filter(s => s.source === "precision model");
+      const usable = precisionSamples.length >= 2 ? precisionSamples : ageHistory;
       if (!usable.length) return { age: NaN, source: "Waiting", samples: 0 };
       const expanded = [];
       for (const sample of usable) {
@@ -765,7 +732,7 @@
       }
       return {
         age: median(expanded),
-        source: proSamples.length >= 2 ? "accuracy pack" : "core model",
+        source: precisionSamples.length >= 2 ? "precision model" : "core model",
         samples: usable.length,
       };
     }
@@ -773,12 +740,12 @@
     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);
+      const alpha = Math.min(0.68, 0.15 * weight);
       genderMaleEma = genderMaleEma === null ? pMale : genderMaleEma * (1 - alpha) + pMale * alpha;
     }
 
     function currentGender() {
-      if (genderMaleEma === null) return { label: "—", confidence: 0 };
+      if (genderMaleEma === null) return { label: "-", confidence: 0 };
       const label = genderMaleEma >= 0.5 ? "Male" : "Female";
       const confidence = Math.max(genderMaleEma, 1 - genderMaleEma);
       return { label, confidence };
@@ -790,20 +757,17 @@
       const emotion = topEmotion(scores);
 
       const now = performance.now();
-      if (Number.isFinite(det.age) && now - lastBaseAgeSample > 550) {
+      if (Number.isFinite(det.age) && now - lastBaseAgeSample > 700) {
         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);
-      }
+      if (precision.gender && (now - precision.genderAt < 9000)) updateGenderEstimate(precision.gender, precision.genderScore, 3.8);
 
       const age = stableAgeEstimate();
       const gender = currentGender();
-
       return {
         emotionLabel: emotion.label,
         emotionScore: emotion.score,
@@ -832,16 +796,16 @@
       emotionEma = null;
       genderMaleEma = null;
       ageHistory.length = 0;
-      els.feelingValue.textContent = "—";
+      els.feelingValue.textContent = "-";
       els.feelingConfidence.textContent = "Waiting";
-      els.genderValue.textContent = "—";
+      els.genderValue.textContent = "-";
       els.genderConfidence.textContent = "Waiting";
-      els.ageValue.textContent = "—";
+      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";
+      els.latencyValue.textContent = "-";
+      els.latencySource.textContent = "Model time";
       renderBars({});
     }
 
@@ -854,10 +818,21 @@
       })[0];
     }
 
+    function updatePrecisionStatus() {
+      const parts = [];
+      if (precision.ferSession) parts.push("MobileFaceNet emotion");
+      if (precision.emotionPipe) parts.push("ViT emotion");
+      if (precision.ageModel && precision.ageProcessor) parts.push("ViT age/gender");
+      if (parts.length >= 2) setPill(els.precisionDot, els.precisionStatus, `Precision ready: ${parts.join(" + ")}`, "ready");
+      else if (parts.length === 1) setPill(els.precisionDot, els.precisionStatus, `Precision partially ready: ${parts[0]}`, "ready");
+      else if (precision.loading) setPill(els.precisionDot, els.precisionStatus, "Precision models loading automatically", "loading");
+      else setPill(els.precisionDot, els.precisionStatus, "Precision models unavailable; using core AI", "error");
+    }
+
     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";
+      els.latencySource.textContent = precision.latency ? `Core + precision ${Math.round(precision.latency)}ms` : "Core model time";
 
       const now = performance.now();
       const instantFps = 1000 / Math.max(1, now - lastLoopTime);
@@ -866,24 +841,25 @@
       els.fpsValue.textContent = fpsSmooth.toFixed(1);
 
       const primary = choosePrimary(detections);
+      latestPrimary = primary;
       if (!primary) {
-        els.feelingValue.textContent = "—";
+        els.feelingValue.textContent = "-";
         els.feelingConfidence.textContent = "No face";
-        els.genderValue.textContent = "—";
+        els.genderValue.textContent = "-";
         els.genderConfidence.textContent = "No face";
-        els.ageValue.textContent = "—";
+        els.ageValue.textContent = "-";
         els.ageSource.textContent = "No face";
         els.faceScore.textContent = "No face yet";
         renderBars({});
         return;
       }
 
-      maybeRunAccuracyPack(primary);
+      maybeRunPrecision(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 = insight.gender === "—" ? "Waiting" : `${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`;
@@ -930,7 +906,7 @@
       const font2 = Math.round(14 * scale);
       const lineH = font1 + 9 * scale;
       const label1 = `${insight.emotionLabel} ${percent(insight.emotionScore)}`;
-      const label2 = `${insight.gender} ${percent(insight.genderScore)} · Age ${insight.ageRange}`;
+      const label2 = `${insight.gender} ${percent(insight.genderScore)} | Age ${insight.ageRange}`;
 
       ctx.font = `900 ${font1}px Inter, system-ui, sans-serif`;
       const textW = Math.max(ctx.measureText(label1).width, ctx.measureText(label2).width);
@@ -980,7 +956,7 @@
       if (lastDetections.length) drawDetections(lastDetections);
     }
 
-    function cropFaceCanvas(det, targetSize = 256, pad = 0.32, filter = "none", mirror = false) {
+    function cropFaceCanvas(det, targetSize = 288, pad = 0.28, filter = "none", mirror = false) {
       const box = det.detection.box;
       const videoW = els.video.videoWidth || els.overlay.width;
       const videoH = els.video.videoHeight || els.overlay.height;
@@ -1020,228 +996,323 @@
       });
     }
 
-    async function waitForFaceApi() {
+    async function waitForGlobal(name, timeoutMs = 14000) {
       const started = performance.now();
-      while (!window.faceapi) {
-        if (performance.now() - started > 12000) throw new Error("face-api.js did not load");
+      while (!window[name]) {
+        if (performance.now() - started > timeoutMs) throw new Error(`${name} did not load`);
         await new Promise(resolve => setTimeout(resolve, 80));
       }
+      return window[name];
     }
 
     async function loadCoreModels() {
       try {
-        await waitForFaceApi();
+        await waitForGlobal("faceapi");
         await Promise.all([
+          faceapi.nets.ssdMobilenetv1.loadFromUri(FACE_API_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),
         ]);
         coreReady = true;
-        setPill(els.coreDot, els.coreStatus, "Core models ready", "ready");
+        setPill(els.aiDot, els.aiStatus, "AI ready", "ready");
         els.startBtn.disabled = false;
-        els.accuracyBtn.disabled = false;
         renderBars({});
-        setTimeout(() => loadAccuracyPack(true), 600);
+        loadPrecisionModels();
       } catch (err) {
         console.error(err);
-        setPill(els.coreDot, els.coreStatus, "Core model loading failed", "error");
-        showToast("Core model loading failed. Refresh the Space and check CDN access.");
+        setPill(els.aiDot, els.aiStatus, "AI model loading failed", "error");
+        showToast("Model loading failed. Refresh the Space and check browser network access.");
       }
     }
 
-    async function getTransformersModule() {
-      // Use the legacy Xenova build because the selected emotion model was published for it.
-      // This avoids the Phase 3A failure where the newer package could import but could not initialize the model.
-      const mod = { pipeline: xenovaPipeline, env: xenovaEnv };
-      if (mod.env) {
-        mod.env.allowLocalModels = false;
-        mod.env.useBrowserCache = true;
-        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 loadOpenCvFerModel() {
+      await waitForGlobal("ort", 16000);
+      ort.env.wasm.wasmPaths = "https://cdn.jsdelivr.net/npm/onnxruntime-web@1.21.0/dist/";
+      ort.env.wasm.numThreads = Math.max(1, Math.min(4, navigator.hardwareConcurrency || 2));
+      precision.ferSession = await ort.InferenceSession.create(OPENCV_FER_MODEL_URL, { executionProviders: ["wasm"] });
+      updatePrecisionStatus();
     }
 
-    async function loadPipelineWithFallback(pipeline, task, modelId) {
-      const attempts = [
-        { quantized: true, progress_callback: p => { if (p?.status) console.log("accuracy pack", p.status, p.file || ""); } },
-        { quantized: true },
-        {},
+    async function loadTransformerEmotionModel() {
+      if (xenovaEnv) {
+        xenovaEnv.allowLocalModels = false;
+        xenovaEnv.useBrowserCache = true;
+        xenovaEnv.backends ??= {};
+        xenovaEnv.backends.onnx ??= {};
+        xenovaEnv.backends.onnx.wasm ??= {};
+        xenovaEnv.backends.onnx.wasm.numThreads = Math.max(1, Math.min(4, navigator.hardwareConcurrency || 2));
+      }
+      precision.emotionPipe = await xenovaPipeline("image-classification", EMOTION_TRANSFORMER_MODEL_ID, { quantized: true });
+      updatePrecisionStatus();
+    }
+
+    async function loadAgeGenderModel() {
+      if (hfEnv) {
+        hfEnv.allowLocalModels = false;
+        hfEnv.useBrowserCache = true;
+        hfEnv.backends ??= {};
+        hfEnv.backends.onnx ??= {};
+        hfEnv.backends.onnx.wasm ??= {};
+        hfEnv.backends.onnx.wasm.numThreads = Math.max(1, Math.min(4, navigator.hardwareConcurrency || 2));
+      }
+      const opts = navigator.gpu ? { device: "webgpu", dtype: "q8" } : { device: "wasm", dtype: "q8" };
+      try {
+        precision.ageModel = await AutoModel.from_pretrained(AGE_GENDER_MODEL_ID, opts);
+      } catch (err) {
+        console.warn("Age/gender preferred backend failed; retrying wasm", err);
+        precision.ageModel = await AutoModel.from_pretrained(AGE_GENDER_MODEL_ID, { device: "wasm", dtype: "q8" });
+      }
+      precision.ageProcessor = await AutoProcessor.from_pretrained(AGE_GENDER_MODEL_ID);
+      updatePrecisionStatus();
+    }
+
+    async function loadPrecisionModels() {
+      if (precision.loading) return;
+      precision.loading = true;
+      updatePrecisionStatus();
+      const tasks = [
+        loadOpenCvFerModel().catch(err => console.warn("OpenCV FER model unavailable", err)),
+        loadTransformerEmotionModel().catch(err => console.warn("Transformer emotion model unavailable", err)),
+        loadAgeGenderModel().catch(err => console.warn("Age/gender transformer unavailable", err)),
       ];
-      let lastErr = null;
-      for (const opts of attempts) {
-        try {
-          const pipe = await pipeline(task, modelId, opts);
-          pro.device = "wasm";
-          return pipe;
-        } catch (err) {
-          lastErr = err;
-          console.warn(`Failed loading ${modelId} with`, opts, err);
+      await Promise.allSettled(tasks);
+      precision.loading = false;
+      updatePrecisionStatus();
+      if (precision.ferSession || precision.emotionPipe || precision.ageModel) showToast("Precision models are ready.");
+    }
+
+    function averagePoint(points) {
+      const list = (points || []).map(p => ({ x: p.x, y: p.y })).filter(p => Number.isFinite(p.x) && Number.isFinite(p.y));
+      if (!list.length) return null;
+      return {
+        x: list.reduce((a, p) => a + p.x, 0) / list.length,
+        y: list.reduce((a, p) => a + p.y, 0) / list.length,
+      };
+    }
+
+    function getLandmarkPoints(det) {
+      if (!det.landmarks) return null;
+      const leftEye = averagePoint(det.landmarks.getLeftEye?.() || []);
+      const rightEye = averagePoint(det.landmarks.getRightEye?.() || []);
+      const noseList = det.landmarks.getNose?.() || [];
+      const mouthList = det.landmarks.getMouth?.() || [];
+      const noseTip = noseList.length ? noseList[Math.min(3, noseList.length - 1)] : null;
+      if (!leftEye || !rightEye || !noseTip || !mouthList.length) return null;
+      const eyes = [leftEye, rightEye].sort((a, b) => a.x - b.x);
+      const mouths = mouthList.slice().sort((a, b) => a.x - b.x);
+      const leftMouth = mouths[0];
+      const rightMouth = mouths[mouths.length - 1];
+      return [eyes[0], eyes[1], noseTip, leftMouth, rightMouth];
+    }
+
+    function solveLinearSystem(A, b) {
+      const n = b.length;
+      const M = A.map((row, i) => row.concat([b[i]]));
+      for (let col = 0; col < n; col += 1) {
+        let pivot = col;
+        for (let r = col + 1; r < n; r += 1) if (Math.abs(M[r][col]) > Math.abs(M[pivot][col])) pivot = r;
+        if (Math.abs(M[pivot][col]) < 1e-8) return null;
+        [M[col], M[pivot]] = [M[pivot], M[col]];
+        const div = M[col][col];
+        for (let c = col; c <= n; c += 1) M[col][c] /= div;
+        for (let r = 0; r < n; r += 1) {
+          if (r === col) continue;
+          const factor = M[r][col];
+          for (let c = col; c <= n; c += 1) M[r][c] -= factor * M[col][c];
         }
       }
-      throw lastErr || new Error(`Could not load ${modelId}`);
+      return M.map(row => row[n]);
+    }
+
+    function estimateAffine(srcPts, dstPts) {
+      const rows = [];
+      const vals = [];
+      for (let i = 0; i < srcPts.length; i += 1) {
+        const sx = srcPts[i].x;
+        const sy = srcPts[i].y;
+        const dx = dstPts[i].x;
+        const dy = dstPts[i].y;
+        rows.push([sx, sy, 1, 0, 0, 0]); vals.push(dx);
+        rows.push([0, 0, 0, sx, sy, 1]); vals.push(dy);
+      }
+      const ATA = Array.from({ length: 6 }, () => Array(6).fill(0));
+      const ATb = Array(6).fill(0);
+      for (let r = 0; r < rows.length; r += 1) {
+        for (let i = 0; i < 6; i += 1) {
+          ATb[i] += rows[r][i] * vals[r];
+          for (let j = 0; j < 6; j += 1) ATA[i][j] += rows[r][i] * rows[r][j];
+        }
+      }
+      return solveLinearSystem(ATA, ATb);
+    }
+
+    function makeAlignedFaceCanvas(det, targetSize = 112) {
+      const points = getLandmarkPoints(det);
+      if (!points) return cropFaceCanvas(det, targetSize, 0.25, "contrast(1.08)");
+      const dst = [
+        { x: 38.2946, y: 51.6963 },
+        { x: 73.5318, y: 51.5014 },
+        { x: 56.0252, y: 71.7366 },
+        { x: 41.5493, y: 92.3655 },
+        { x: 70.7299, y: 92.2041 },
+      ];
+      const sol = estimateAffine(points, dst);
+      if (!sol) return cropFaceCanvas(det, targetSize, 0.25, "contrast(1.08)");
+      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.setTransform(sol[0], sol[3], sol[1], sol[4], sol[2], sol[5]);
+      c.filter = "contrast(1.08) saturate(0.95)";
+      c.drawImage(els.video, 0, 0);
+      c.setTransform(1, 0, 0, 1, 0, 0);
+      c.filter = "none";
+      return canvas;
     }
 
-    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);
-        }
+    function canvasToNchwTensor(canvas) {
+      const c = canvas.getContext("2d", { willReadFrequently: true });
+      const { data } = c.getImageData(0, 0, canvas.width, canvas.height);
+      const size = canvas.width * canvas.height;
+      const out = new Float32Array(3 * size);
+      for (let i = 0; i < size; i += 1) {
+        const j = i * 4;
+        out[i] = (data[j] / 255 - 0.5) / 0.5;
+        out[size + i] = (data[j + 1] / 255 - 0.5) / 0.5;
+        out[size * 2 + i] = (data[j + 2] / 255 - 0.5) / 0.5;
       }
-      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 };
+      return out;
     }
 
-    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 ? "Emotion accuracy pack: loading in background..." : "Emotion accuracy pack: loading...", "loading");
-      if (!auto) showToast("Loading higher-accuracy transformer models. First load can take time.");
+    async function runOpenCvFer(det) {
+      if (!precision.ferSession || !window.ort) return null;
+      const canvas = makeAlignedFaceCanvas(det, 112);
+      const input = canvasToNchwTensor(canvas);
+      const tensor = new ort.Tensor("float32", input, [1, 3, 112, 112]);
+      const feeds = {};
+      feeds[precision.ferSession.inputNames[0]] = tensor;
+      const results = await precision.ferSession.run(feeds);
+      const outputName = precision.ferSession.outputNames[0];
+      const logits = Array.from(results[outputName].data).slice(0, 7);
+      const probs = softmax(logits);
+      const scores = blankScores();
+      for (let i = 0; i < probs.length && i < ferLabels.length; i += 1) {
+        const label = ferLabels[i];
+        scores[label] = Math.max(scores[label], probs[i]);
+      }
+      return normalizeScores(scores);
+    }
 
+    async function runTransformerEmotion(det) {
+      if (!precision.emotionPipe) return null;
+      const variants = [
+        cropFaceCanvas(det, 288, 0.14, "contrast(1.10) saturate(0.95)", false),
+        cropFaceCanvas(det, 288, 0.30, "contrast(1.16) saturate(0.92)", false),
+        cropFaceCanvas(det, 288, 0.08, "contrast(1.18) brightness(1.02)", false),
+        cropFaceCanvas(det, 288, 0.20, "contrast(1.12) saturate(0.94)", true),
+      ];
+      const aggregate = blankScores();
+      const urls = [];
+      let count = 0;
       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 (AGE_GENDER_MODEL_ID && mod.AutoModel && mod.AutoProcessor && (mod.load_image || mod.RawImage?.fromURL)) {
-            const pair = await loadAgeGenderWithFallback(mod);
-            pro.ageGenderModel = pair.model;
-            pro.ageGenderProcessor = pair.processor;
+        for (const variant of variants) {
+          const url = await canvasToBlobUrl(variant);
+          urls.push(url);
+          let output;
+          try {
+            output = await precision.emotionPipe(url, { topK: 7 });
+          } catch (_) {
+            output = await precision.emotionPipe(url);
           }
-        } catch (ageErr) {
-          console.warn("Age/gender transformer unavailable", ageErr);
+          const scores = normalizeExternalEmotion(output);
+          for (const label of emotionLabels) aggregate[label] += scores[label] || 0;
+          count += 1;
         }
+      } finally {
+        for (const url of urls) URL.revokeObjectURL(url);
+      }
+      if (!count) return null;
+      for (const label of emotionLabels) aggregate[label] /= count;
+      return normalizeScores(aggregate);
+    }
 
-        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");
+    async function tensorValues(tensor) {
+      if (!tensor) return [];
+      if (tensor.tolist) {
+        const listed = tensor.tolist();
+        return Array.isArray(listed) ? listed.flat(Infinity) : [];
+      }
+      if (tensor.data) return Array.from(tensor.data);
+      return [];
+    }
+
+    async function runAgeGender(det) {
+      if (!precision.ageModel || !precision.ageProcessor || !load_image) return;
+      const canvas = cropFaceCanvas(det, 384, 0.22, "contrast(1.07) saturate(0.96)");
+      let url = null;
+      try {
+        url = await canvasToBlobUrl(canvas);
+        const image = await load_image(url);
+        const inputs = await precision.ageProcessor(image);
+        const output = await precision.ageModel(inputs);
+        const values = await tensorValues(output.logits || output[0]);
+        if (values.length < 2) return;
+        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)));
+          precision.age = age;
+          precision.ageAt = performance.now();
+          pushAgeSample(age, "precision model", 5);
+        }
+        if (Number.isFinite(rawGender)) {
+          const pFemale = rawGender >= 0 && rawGender <= 1 ? rawGender : sigmoid(rawGender);
+          precision.gender = pFemale >= 0.5 ? "Female" : "Male";
+          precision.genderScore = Math.max(pFemale, 1 - pFemale);
+          precision.genderAt = performance.now();
         }
-      } catch (err) {
-        console.error(err);
-        setPill(els.proDot, els.proStatus, "Emotion 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);
+        if (url) URL.revokeObjectURL(url);
       }
     }
 
-    async function maybeRunAccuracyPack(primary) {
-      const cfg = modes[els.modeSelect.value] || modes.accurate;
+    async function maybeRunPrecision(primary) {
       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;
+      if (!primary || precision.busy || (!precision.ferSession && !precision.emotionPipe && !precision.ageModel)) return;
+      if (now - precision.lastRun < detectorConfig.precisionIntervalMs) return;
+      precision.busy = true;
+      precision.lastRun = now;
       const started = performance.now();
       try {
-        const crop = cropFaceCanvas(primary, 288);
-        url = await canvasToBlobUrl(crop);
-
-        if (pro.emotionPipe) {
-          const cropVariants = [
-            cropFaceCanvas(primary, 288, 0.16, "contrast(1.10) saturate(0.96)", false),
-            cropFaceCanvas(primary, 288, 0.34, "contrast(1.18) saturate(0.92)", false),
-            cropFaceCanvas(primary, 288, 0.06, "contrast(1.22) brightness(1.03)", false),
-            cropFaceCanvas(primary, 288, 0.22, "contrast(1.14) saturate(0.92)", true),
-          ];
-          const urls = [];
-          const aggregate = blankScores();
-          let count = 0;
-          try {
-            for (const variant of cropVariants) {
-              const variantUrl = await canvasToBlobUrl(variant);
-              urls.push(variantUrl);
-              let output;
-              try {
-                output = await pro.emotionPipe(variantUrl, { topK: 7 });
-              } catch (_) {
-                output = await pro.emotionPipe(variantUrl);
-              }
-              const scores = normalizeExternalEmotion(output);
-              for (const label of emotionLabels) aggregate[label] += scores[label] || 0;
-              count += 1;
-            }
-          } finally {
-            for (const variantUrl of urls) URL.revokeObjectURL(variantUrl);
+        if (precision.ferSession) {
+          const fer = await runOpenCvFer(primary);
+          if (fer) {
+            precision.ferScores = fer;
+            precision.ferAt = performance.now();
           }
-          for (const label of emotionLabels) aggregate[label] = count ? aggregate[label] / count : 0;
-          pro.emotionScores = normalizeScores(aggregate);
-          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();
+        if (precision.emotionPipe) {
+          const transformer = await runTransformerEmotion(primary);
+          if (transformer) {
+            precision.transformerScores = transformer;
+            precision.transformerAt = performance.now();
           }
         }
+        if (precision.ageModel && precision.ageProcessor) await runAgeGender(primary);
       } catch (err) {
-        console.warn("Accuracy inference failed", err);
+        console.warn("Precision inference failed", err);
       } finally {
-        if (url) URL.revokeObjectURL(url);
-        pro.latency = performance.now() - started;
-        pro.busy = false;
+        precision.latency = performance.now() - started;
+        precision.busy = false;
       }
     }
 
     function stopStream() {
-      if (stream) {
-        for (const track of stream.getTracks()) track.stop();
-      }
+      if (stream) for (const track of stream.getTracks()) track.stop();
       stream = null;
       running = false;
       detecting = false;
@@ -1257,7 +1328,7 @@
 
     async function startCamera(facing = currentFacing) {
       if (!coreReady) {
-        showToast("Please wait until the core models finish loading.");
+        showToast("Please wait until the AI models finish loading.");
         return;
       }
 
@@ -1269,7 +1340,7 @@
         audio: false,
         video: {
           facingMode: { ideal: currentFacing },
-          width: { ideal: 960 },
+          width: { ideal: 1280 },
           height: { ideal: 720 },
         }
       };
@@ -1302,19 +1373,32 @@
       detectLoop();
     }
 
+    async function detectFacesAccurate() {
+      try {
+        const options = new faceapi.SsdMobilenetv1Options({ minConfidence: 0.42 });
+        return await faceapi
+          .detectAllFaces(els.video, options)
+          .withFaceLandmarks(true)
+          .withFaceExpressions()
+          .withAgeAndGender();
+      } catch (err) {
+        console.warn("SSD detector failed; using tiny detector", err);
+        const tiny = new faceapi.TinyFaceDetectorOptions({ inputSize: detectorConfig.inputSize, scoreThreshold: detectorConfig.scoreThreshold });
+        return await faceapi
+          .detectAllFaces(els.video, tiny)
+          .withFaceLandmarks(true)
+          .withFaceExpressions()
+          .withAgeAndGender();
+      }
+    }
+
     async function detectLoop() {
       if (!running || !coreReady || detecting) return;
       detecting = true;
       const started = performance.now();
       try {
         fitCanvas();
-        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)
-          .withFaceLandmarks(true)
-          .withFaceExpressions()
-          .withAgeAndGender();
+        const raw = await detectFacesAccurate();
         const displaySize = { width: els.overlay.width, height: els.overlay.height };
         const resized = faceapi.resizeResults(raw, displaySize);
         const elapsed = performance.now() - started;
@@ -1323,7 +1407,7 @@
         setTimeout(() => {
           detecting = false;
           requestAnimationFrame(detectLoop);
-        }, cfg.interval);
+        }, detectorConfig.intervalMs);
       } catch (err) {
         console.error(err);
         detecting = false;
@@ -1337,18 +1421,13 @@
       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({});
-    setPill(els.proDot, els.proStatus, "Accuracy pack: idle", "loading");
+    setPill(els.precisionDot, els.precisionStatus, "Precision models loading automatically", "loading");
     loadCoreModels();
   </script>
 </body>