Upload folder using huggingface_hub

anxiety_app/services/face_emotion.py

@@ -1,12 +1,14 @@
-"""Facial emotion recognition from a live webcam feed.
+"""Facial emotion recognition.
 
 Loads the FER2013 CNN once (lazily) and classifies each detected face. Emotions
-are tallied across the session; the dominant affective signal is returned as a
+are tallied across a session; the dominant affective signal is returned as a
 supplementary cue (Anxious / Depressed / Normal) -- NOT a clinical diagnosis.
 
-Preprocessing: per-image standardization (subtract the face's mean, divide by
-its std) to match how the model was trained. This fixes a train/serve skew in
-the original code (which divided by 255) and roughly doubles accuracy.
+Detection robustness: faces are found on a CLAHE contrast-equalized image (helps
+low light) using two Haar cascades -- the bundled frontal-face plus OpenCV's
+``alt2`` cascade (better with glasses / slight angles). Boxes from both are
+merged. Classification still uses the raw crop with per-image standardization to
+match how the model was trained (fixes the original /255 train/serve skew).
 """
 import logging
 
@@ -19,11 +21,17 @@ logger = logging.getLogger(__name__)
 # Heavy deps (tf_keras, cv2) are imported lazily so the package can be imported
 # (e.g. for fast route tests) without TensorFlow/OpenCV present.
 _model = None
-_cascade = None
+_cascades = None
+_clahe = None
+
+# Detection tuning
+_SCALE_FACTOR = 1.1     # finer pyramid -> catches more faces (glasses/angles)
+_MIN_NEIGHBORS = 5
+_MIN_SIZE = (60, 60)
 
 
 def _load():
-    global _model, _cascade
+    global _model, _cascades, _clahe
     if _model is None:
         import cv2
         from tf_keras.models import model_from_json
@@ -31,8 +39,42 @@ def _load():
         logger.info("Loading face model from %s", config.FACE_MODEL_JSON)
         _model = model_from_json(config.FACE_MODEL_JSON.read_text())
         _model.load_weights(str(config.FACE_MODEL_WEIGHTS))
-        _cascade = cv2.CascadeClassifier(str(config.HAAR_CASCADE))
-    return _model, _cascade
+
+        # Our shipped cascade + OpenCV's bundled alt2 (more robust to glasses).
+        paths = [str(config.HAAR_CASCADE),
+                 cv2.data.haarcascades + "haarcascade_frontalface_alt2.xml"]
+        _cascades = [c for c in (cv2.CascadeClassifier(p) for p in paths) if not c.empty()]
+        _clahe = cv2.createCLAHE(clipLimit=2.0, tileGridSize=(8, 8))
+    return _model
+
+
+def _iou(a, b):
+    ax, ay, aw, ah = a
+    bx, by, bw, bh = b
+    ix, iy = max(ax, bx), max(ay, by)
+    iw = max(0, min(ax + aw, bx + bw) - ix)
+    ih = max(0, min(ay + ah, by + bh) - iy)
+    inter = iw * ih
+    if inter == 0:
+        return 0.0
+    return inter / float(aw * ah + bw * bh - inter)
+
+
+def _detect(gray):
+    """Return de-duplicated face boxes from CLAHE-equalized grayscale."""
+    eq = _clahe.apply(gray)
+    raw = []
+    for cascade in _cascades:
+        for box in cascade.detectMultiScale(eq, scaleFactor=_SCALE_FACTOR,
+                                             minNeighbors=_MIN_NEIGHBORS, minSize=_MIN_SIZE):
+            raw.append(tuple(int(v) for v in box))
+    # Keep the largest boxes first; drop ones that overlap an already-kept box.
+    raw.sort(key=lambda b: b[2] * b[3], reverse=True)
+    kept = []
+    for box in raw:
+        if all(_iou(box, k) < 0.4 for k in kept):
+            kept.append(box)
+    return kept
 
 
 def preprocess(face_gray):
@@ -46,7 +88,7 @@ def preprocess(face_gray):
 
 def classify_face(face_gray):
     """Return the predicted FER2013 emotion label for one grayscale face crop."""
-    model, _ = _load()
+    model = _load()
     preds = model.predict(preprocess(face_gray), verbose=0)
     return config.FACE_EMOTIONS[int(np.argmax(preds[0]))]
 
@@ -63,21 +105,20 @@ def classify_frame(image_bytes):
     """Detect faces in an encoded image (e.g. a browser JPEG) and classify each.
 
     Returns a list of {"box": [x, y, w, h], "emotion": str, "signal": str}.
-    Used by the browser-capture API so no server-side camera is required.
     """
     import cv2
 
-    _, cascade = _load()
+    _load()
     arr = np.frombuffer(image_bytes, np.uint8)
     img = cv2.imdecode(arr, cv2.IMREAD_COLOR)
     if img is None:
         return []
     gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
     results = []
-    for (x, y, w, h) in cascade.detectMultiScale(gray, 1.32, 5):
+    for (x, y, w, h) in _detect(gray):
         emotion = classify_face(gray[y:y + h, x:x + w])
         results.append({
-            "box": [int(x), int(y), int(w), int(h)],
+            "box": [x, y, w, h],
             "emotion": emotion,
             "signal": emotion_to_signal(emotion),
         })
@@ -101,7 +142,7 @@ def detect_emotion(camera_index=0):
     """
     import cv2
 
-    model, cascade = _load()
+    _load()
     cap = cv2.VideoCapture(camera_index)
     if not cap.isOpened():
         raise RuntimeError("Could not open the webcam (camera index %s)." % camera_index)
@@ -113,7 +154,7 @@ def detect_emotion(camera_index=0):
             if not ok:
                 continue
             gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
-            for (x, y, w, h) in cascade.detectMultiScale(gray, 1.32, 5):
+            for (x, y, w, h) in _detect(gray):
                 cv2.rectangle(frame, (x, y), (x + w, y + h), (255, 0, 0), 3)
                 emotion = classify_face(gray[y:y + h, x:x + w])
                 counts[emotion] = counts.get(emotion, 0) + 1

anxiety_app/static/app.css

@@ -156,11 +156,52 @@ audio { width: 100%; max-width: 420px; margin-top: 16px; }
 /* ---------- misc ---------- */
 .note { color: var(--muted); font-size: 0.92rem; max-width: 64ch; margin: 22px auto 0; }
 .note.center { margin-left: auto; margin-right: auto; }
+
+/* ---------- use-case / explainer ---------- */
+.section { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
+.section-eyebrow { font-family: var(--display); font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); font-weight: 600; margin: 0 0 10px; }
+.section h2 { font-family: var(--display); font-weight: 600; font-size: 1.8rem; letter-spacing: -0.02em; margin: 0 0 24px; }
+.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
+.two-col h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin: 0 0 14px; }
+.ticks, .steps { margin: 0; padding: 0; list-style: none; }
+.ticks li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--text); }
+.ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--amber); font-weight: 700; }
+.ticks li span { color: var(--muted); }
+.steps { counter-reset: step; }
+.steps li { position: relative; padding-left: 42px; margin-bottom: 16px; min-height: 30px; }
+.steps li::before {
+  counter-increment: step; content: counter(step); position: absolute; left: 0; top: -2px;
+  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
+  background: rgba(45, 212, 191, 0.14); border: 1px solid var(--amber); color: var(--amber);
+  font-family: var(--display); font-weight: 600; font-size: 0.9rem;
+}
+.steps li b { display: block; }
+.steps li span { color: var(--muted); }
+@media (max-width: 640px) { .two-col { grid-template-columns: 1fr; gap: 28px; } }
 .site-footer { border-top: 1px solid var(--line); padding: 26px 0; color: var(--muted); font-size: 0.9rem; }
 .site-footer p { margin: 0 auto; text-align: center; max-width: var(--maxw); padding: 0 24px; }
 
+/* ---------- responsive ---------- */
+@media (max-width: 760px) {
+  .container, .header-inner, .main, .site-footer p { padding-left: 18px; padding-right: 18px; }
+  .main { padding-top: 36px; padding-bottom: 56px; }
+  .header-inner { height: auto; min-height: 60px; flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; }
+  .nav { gap: 16px; flex-wrap: wrap; }
+  .panel { padding: 22px 18px; }
+  .page-title { font-size: 2rem; }
+  .hero { padding: 14px 0 30px; }
+}
+
 @media (max-width: 520px) {
-  .opts { grid-template-columns: repeat(2, 1fr); }
-  .nav { gap: 16px; }
   body { font-size: 16px; }
+  .brand-accent { display: none; }
+  .nav { width: 100%; justify-content: space-between; gap: 10px; }
+  .nav a { font-size: 0.74rem; letter-spacing: 0.08em; }
+  .opts { grid-template-columns: repeat(2, 1fr); }
+  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
+  .hero p { font-size: 1.05rem; }
+  /* full-width, comfortable tap targets */
+  .hero-cta, .controls { flex-direction: column; align-items: stretch; }
+  .hero-cta .btn, .controls .btn { width: 100%; padding: 14px 20px; }
+  .score-num { font-size: 2.4rem; }
 }

anxiety_app/templates/face.html

@@ -17,6 +17,8 @@
   </div>
 
   <p id="status" class="status">Click “Start camera” and allow webcam access.</p>
+  <p class="note center" style="margin-top:0;">Tip: face the camera with even lighting for best
+     detection — strong backlight or very dim rooms reduce accuracy.</p>
 
   <div class="chips">
     <span class="chip">Anxious <b id="c-anx">0</b></span>

anxiety_app/templates/index.html

@@ -37,7 +37,31 @@
   </a>
 </div>
 
-<p class="note">Emotion recognition is a supplementary signal, <strong>not a diagnosis</strong>.
-The PHQ-9 is the only clinically validated component, and it is a screening aid — not a substitute
-for a clinician.</p>
+<section class="section">
+  <p class="section-eyebrow">What this is</p>
+  <h2>A demo of multimodal well-being screening</h2>
+  <div class="two-col">
+    <div>
+      <h3>What it's for</h3>
+      <p style="color:var(--muted); margin-top:0;">A hands-on demonstration of how machine
+         learning can read emotional cues, paired with a validated questionnaire. Useful for:</p>
+      <ul class="ticks">
+        <li>Quick self-reflection &amp; mood check-ins <span>— gauge how you're presenting right now.</span></li>
+        <li>Showcasing an end-to-end ML pipeline <span>— vision + audio models behind a web app.</span></li>
+        <li>Education &amp; awareness <span>— see what affect-recognition can (and can't) do.</span></li>
+      </ul>
+    </div>
+    <div>
+      <h3>How to use it</h3>
+      <ol class="steps">
+        <li><b>Pick a modality</b><span>Face (webcam), Voice (mic), or the PHQ-9 form.</span></li>
+        <li><b>Run it in your browser</b><span>Grant camera/mic access — nothing is uploaded or stored.</span></li>
+        <li><b>Read the result</b><span>An emotion cue, or a scored PHQ-9 severity band with guidance.</span></li>
+      </ol>
+    </div>
+  </div>
+  <p class="note">Emotion recognition is a supplementary signal, <strong>not a diagnosis</strong>.
+     The PHQ-9 is the only clinically validated component, and it is a screening aid — not a
+     substitute for a clinician.</p>
+</section>
 {% endblock %}