Upload folder using huggingface_hub

anxiety_app/__init__.py

@@ -1,6 +1,5 @@
 """Application factory for the multimodal affect-screening app."""
 from flask import Flask
-from flask_bootstrap import Bootstrap
 
 from .logging_config import configure_logging
 
@@ -8,7 +7,6 @@ from .logging_config import configure_logging
 def create_app():
     configure_logging()
     app = Flask(__name__)  # templates/ and static/ live inside this package
-    Bootstrap(app)
 
     from .routes import main
     app.register_blueprint(main)

anxiety_app/static/app.css

@@ -0,0 +1,191 @@
+:root {
+  --bg: #0b0f14;
+  --bg-soft: #0f151c;
+  --surface: #151c25;
+  --surface-2: #1b242f;
+  --border: #243040;
+  --text: #e6edf3;
+  --muted: #93a1b1;
+  --primary: #6366f1;
+  --primary-2: #8b5cf6;
+  --face: #38bdf8;
+  --voice: #fb7185;
+  --phq: #34d399;
+  --danger: #f87171;
+  --radius: 16px;
+  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
+  --maxw: 1080px;
+}
+
+* { box-sizing: border-box; }
+
+html, body { margin: 0; padding: 0; }
+
+body {
+  background:
+    radial-gradient(900px 500px at 80% -10%, rgba(99, 102, 241, 0.18), transparent 60%),
+    radial-gradient(700px 500px at 0% 0%, rgba(139, 92, 246, 0.12), transparent 55%),
+    var(--bg);
+  color: var(--text);
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  line-height: 1.6;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
+
+/* ---------- header / nav ---------- */
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  backdrop-filter: blur(10px);
+  background: rgba(11, 15, 20, 0.72);
+  border-bottom: 1px solid var(--border);
+}
+.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
+.brand { font-weight: 800; font-size: 1.15rem; text-decoration: none; color: var(--text); letter-spacing: -0.02em; }
+.brand-mark { color: var(--primary-2); margin-right: 4px; }
+.brand-accent { color: var(--muted); font-weight: 600; }
+.nav { display: flex; gap: 4px; }
+.nav a {
+  color: var(--muted);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.95rem;
+  padding: 8px 14px;
+  border-radius: 10px;
+  transition: all 0.15s ease;
+}
+.nav a:hover { color: var(--text); background: var(--surface); }
+.nav a.active { color: var(--text); background: var(--surface-2); }
+
+/* ---------- layout ---------- */
+.main { flex: 1; padding: 40px 20px 64px; width: 100%; max-width: var(--maxw); margin: 0 auto; }
+.page-title { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
+.page-sub { color: var(--muted); margin: 0 0 28px; }
+
+/* ---------- hero ---------- */
+.hero { text-align: center; padding: 48px 0 16px; }
+.hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 16px; }
+.hero h1 .grad {
+  background: linear-gradient(120deg, var(--primary), var(--primary-2));
+  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
+}
+.hero p { color: var(--muted); font-size: 1.12rem; max-width: 640px; margin: 0 auto 28px; }
+.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
+
+/* ---------- cards ---------- */
+.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 40px; }
+.card {
+  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 26px;
+  text-decoration: none;
+  color: var(--text);
+  display: block;
+  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
+}
+a.card:hover { transform: translateY(-4px); border-color: #36506e; box-shadow: var(--shadow); }
+.card .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.5rem; margin-bottom: 14px; }
+.ic.face { background: rgba(56, 189, 248, 0.15); }
+.ic.voice { background: rgba(251, 113, 133, 0.15); }
+.ic.phq { background: rgba(52, 211, 153, 0.15); }
+.card h3 { margin: 0 0 6px; font-size: 1.2rem; }
+.card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
+
+/* ---------- panel ---------- */
+.panel {
+  background: linear-gradient(180deg, var(--surface), var(--bg-soft));
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 28px;
+  box-shadow: var(--shadow);
+}
+.center { text-align: center; }
+
+/* ---------- buttons ---------- */
+.btn {
+  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
+  font: inherit; font-weight: 600; font-size: 1rem;
+  padding: 12px 22px; border-radius: 12px; border: 1px solid transparent;
+  cursor: pointer; text-decoration: none; transition: all 0.15s ease; color: #fff;
+}
+.btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.btn-primary { background: linear-gradient(120deg, var(--primary), var(--primary-2)); }
+.btn-primary:not(:disabled):hover { filter: brightness(1.08); transform: translateY(-1px); }
+.btn-face { background: linear-gradient(120deg, #0ea5e9, #38bdf8); }
+.btn-voice { background: linear-gradient(120deg, #f43f5e, #fb7185); }
+.btn-ghost { background: var(--surface-2); border-color: var(--border); color: var(--text); }
+.btn-ghost:not(:disabled):hover { border-color: #3a5273; }
+
+/* ---------- media capture ---------- */
+.stage { position: relative; display: inline-block; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); max-width: 100%; }
+.stage video { display: block; background: #000; width: 100%; height: auto; max-width: 640px; }
+.stage canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
+.controls { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 20px 0 8px; }
+
+.status { color: var(--muted); min-height: 1.5em; margin: 8px 0; }
+.result {
+  font-size: 1.5rem; font-weight: 800; margin: 12px 0 0; letter-spacing: -0.01em;
+}
+.result:empty { display: none; }
+
+/* signal chips */
+.chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
+.chip { font-size: 0.85rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); }
+.chip b { color: var(--text); }
+
+/* mic pulse */
+.mic-orb {
+  width: 92px; height: 92px; border-radius: 50%; margin: 6px auto 18px;
+  display: grid; place-items: center; font-size: 2rem;
+  background: rgba(251, 113, 133, 0.14); border: 1px solid rgba(251, 113, 133, 0.4);
+}
+.mic-orb.recording { animation: pulse 1.1s ease-in-out infinite; }
+@keyframes pulse {
+  0% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0.45); }
+  70% { box-shadow: 0 0 0 20px rgba(251, 113, 133, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(251, 113, 133, 0); }
+}
+audio { width: 100%; max-width: 420px; margin-top: 14px; }
+
+/* ---------- PHQ-9 ---------- */
+.q { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; background: var(--surface); }
+.q-text { font-weight: 600; margin-bottom: 12px; }
+.q-text .num { color: var(--muted); margin-right: 8px; }
+.opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
+.opt { position: relative; }
+.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
+.opt span {
+  display: block; text-align: center; padding: 10px 6px; border-radius: 10px;
+  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
+  font-size: 0.85rem; cursor: pointer; transition: all 0.12s ease;
+}
+.opt input:checked + span { border-color: var(--phq); background: rgba(52, 211, 153, 0.16); color: var(--text); font-weight: 600; }
+.opt:hover span { border-color: #3a5273; }
+
+.scorecard { margin-top: 20px; padding: 22px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
+.scorecard:empty { display: none; }
+.score-num { font-size: 2.4rem; font-weight: 800; }
+.sev { display: inline-block; padding: 4px 12px; border-radius: 999px; font-weight: 600; font-size: 0.9rem; }
+.sev-minimal { background: rgba(52,211,153,0.18); color: #6ee7b7; }
+.sev-mild { background: rgba(250,204,21,0.16); color: #fde047; }
+.sev-moderate { background: rgba(251,146,60,0.16); color: #fdba74; }
+.sev-modsevere { background: rgba(248,113,113,0.16); color: #fca5a5; }
+.sev-severe { background: rgba(239,68,68,0.22); color: #fecaca; }
+.crisis { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(248,113,113,0.4); background: rgba(248,113,113,0.1); color: #fecaca; font-size: 0.92rem; }
+
+/* ---------- disclaimer / footer ---------- */
+.note { color: var(--muted); font-size: 0.9rem; max-width: 640px; margin: 18px auto 0; }
+.site-footer { border-top: 1px solid var(--border); padding: 22px 0; color: var(--muted); font-size: 0.88rem; }
+.site-footer p { margin: 0; text-align: center; }
+
+@media (max-width: 560px) {
+  .opts { grid-template-columns: repeat(2, 1fr); }
+  .brand-accent { display: none; }
+  .nav a { padding: 8px 10px; }
+}

anxiety_app/static/face.js

@@ -8,15 +8,24 @@
   const statusEl = document.getElementById("status");
   const resultEl = document.getElementById("result");
 
+  const chip = { Anxious: document.getElementById("c-anx"),
+                 Depressed: document.getElementById("c-dep"),
+                 Normal: document.getElementById("c-nor") };
+
   const capture = document.createElement("canvas");
   const counts = { Anxious: 0, Depressed: 0, Normal: 0 };
   let stream = null, timer = null, busy = false;
 
+  function renderChips() {
+    Object.keys(counts).forEach((k) => { if (chip[k]) chip[k].textContent = counts[k]; });
+  }
+
   startBtn.onclick = async () => {
     try {
       stream = await navigator.mediaDevices.getUserMedia({ video: true });
       video.srcObject = stream;
       Object.keys(counts).forEach((k) => (counts[k] = 0));
+      renderChips();
       resultEl.textContent = "";
       startBtn.disabled = true;
       stopBtn.disabled = false;
@@ -74,5 +83,6 @@
       ctx.fillText(label, x * sx, y * sy > 20 ? y * sy - 6 : y * sy + 16);
       if (counts[f.signal] !== undefined) counts[f.signal]++;
     });
+    renderChips();
   }
 })();

anxiety_app/static/phq9.js

@@ -0,0 +1,43 @@
+// PHQ-9 scoring (client-side). Sums 9 items (0-3 each) -> severity band.
+(function () {
+  const form = document.getElementById("phq-form");
+  const card = document.getElementById("scorecard");
+
+  function severity(s) {
+    if (s <= 4) return { label: "Minimal", cls: "sev-minimal", desc: "Minimal or no depression symptoms." };
+    if (s <= 9) return { label: "Mild", cls: "sev-mild", desc: "Mild symptoms — keeping an eye on how you feel may help." };
+    if (s <= 14) return { label: "Moderate", cls: "sev-moderate", desc: "Moderate symptoms — consider speaking with a clinician." };
+    if (s <= 19) return { label: "Moderately severe", cls: "sev-modsevere", desc: "Moderately severe symptoms — professional support is recommended." };
+    return { label: "Severe", cls: "sev-severe", desc: "Severe symptoms — please reach out for professional support." };
+  }
+
+  form.addEventListener("submit", function (e) {
+    e.preventDefault();
+    let total = 0, answered = 0, q9 = 0;
+    for (let i = 0; i < 9; i++) {
+      const sel = form.querySelector('input[name="q' + i + '"]:checked');
+      if (sel) { answered++; const v = +sel.value; total += v; if (i === 8) q9 = v; }
+    }
+    if (answered < 9) {
+      card.innerHTML = '<p class="status">Please answer all 9 questions (' + answered + "/9 answered).</p>";
+      card.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      return;
+    }
+    const band = severity(total);
+    let html =
+      '<div class="score-num">' + total + '<span style="font-size:1rem;color:var(--muted)"> / 27</span></div>' +
+      '<p><span class="sev ' + band.cls + '">' + band.label + "</span></p>" +
+      '<p class="status">' + band.desc + "</p>";
+    if (q9 > 0) {
+      html +=
+        '<div class="crisis">⚠️ You indicated thoughts that you would be better off dead or of hurting ' +
+        "yourself. Please talk to someone now. India: iCall +91 9152987821, AASRA +91 9820466726. " +
+        "US: call or text <strong>988</strong>. If you are in immediate danger, contact local emergency services.</div>";
+    }
+    html += '<p class="note">This is a screening aid, not a diagnosis. Please discuss results with a clinician.</p>';
+    card.innerHTML = html;
+    card.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  });
+
+  form.addEventListener("reset", function () { card.innerHTML = ""; });
+})();

anxiety_app/static/voice.js

@@ -4,6 +4,7 @@
   const statusEl = document.getElementById("vstatus");
   const resultEl = document.getElementById("vresult");
   const player = document.getElementById("player");
+  const orb = document.getElementById("orb");
   const SECONDS = 4;
 
   recBtn.onclick = async () => {
@@ -18,6 +19,7 @@
     const recorder = new MediaRecorder(stream);
     recorder.ondataavailable = (e) => e.data.size && chunks.push(e.data);
     recorder.onstop = async () => {
+      if (orb) orb.classList.remove("recording");
       stream.getTracks().forEach((t) => t.stop());
       const type = recorder.mimeType || "audio/webm";
       const blob = new Blob(chunks, { type });
@@ -42,6 +44,7 @@
     recBtn.disabled = true;
     resultEl.textContent = "";
     statusEl.textContent = "Recording " + SECONDS + "s…";
+    if (orb) orb.classList.add("recording");
     recorder.start();
     setTimeout(() => recorder.state !== "inactive" && recorder.stop(), SECONDS * 1000);
   };

anxiety_app/templates/base.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{% block title %}AffectScreening{% endblock %}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="{{ url_for('static', filename='app.css') }}">
+  {% block head %}{% endblock %}
+</head>
+<body>
+  <header class="site-header">
+    <div class="container header-inner">
+      <a class="brand" href="{{ url_for('main.index') }}"><span class="brand-mark">◐</span>Affect<span class="brand-accent">Screening</span></a>
+      <nav class="nav">
+        <a href="{{ url_for('main.index') }}" class="{% if request.endpoint == 'main.index' %}active{% endif %}">Home</a>
+        <a href="{{ url_for('main.face') }}" class="{% if request.endpoint == 'main.face' %}active{% endif %}">Face</a>
+        <a href="{{ url_for('main.voice') }}" class="{% if request.endpoint == 'main.voice' %}active{% endif %}">Voice</a>
+        <a href="{{ url_for('main.phq') }}" class="{% if request.endpoint == 'main.phq' %}active{% endif %}">PHQ-9</a>
+      </nav>
+    </div>
+  </header>
+
+  <main class="main">
+    {% block content %}{% endblock %}
+  </main>
+
+  <footer class="site-footer">
+    <div class="container">
+      <p>⚠️ Educational demo — emotion signals are <strong>not a clinical diagnosis</strong>. The PHQ-9 is a screening aid, not a diagnosis. If you're struggling, please reach out to a professional.</p>
+    </div>
+  </footer>
+
+  {% block scripts %}{% endblock %}
+</body>
+</html>

anxiety_app/templates/face.html

@@ -1,36 +1,36 @@
-{% extends "bootstrap/base.html" %}
-{% block styles %}
-{{super()}}
-<link rel="stylesheet" href="{{url_for('static', filename='styles.css')}}">
-<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
-{% endblock %}
+{% extends "base.html" %}
+{% block title %}Face — AffectScreening{% endblock %}
 
 {% block content %}
-<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;">
-    <li style="float: left;"><a class="active" href="home" style="display: block; color: white;padding: 14px 16px;">Home</a></li>
-    <li style="float: left;"><a href="face" style="display: block; color: white;padding: 14px 16px;">Face</a></li>
-    <li style="float: left;"><a href="voice" style="display: block; color: white;padding: 14px 16px;">Voice</a></li>
-    <li style="float: left;"><a href="qstn" style="display: block; color: white;padding: 14px 16px;">PHQ-9</a></li>
-</ul>
-
-<h2 class="heading">Facial Emotion Detection</h2>
-
-<div style="text-align:center;">
-  <div style="position:relative; display:inline-block;">
-    <video id="video" autoplay playsinline muted width="640" height="480" style="background:#000;border-radius:8px;"></video>
-    <canvas id="overlay" width="640" height="480" style="position:absolute; left:0; top:0;"></canvas>
+<h1 class="page-title">Facial emotion detection</h1>
+<p class="page-sub">Allow webcam access, then we classify your expression live (FER2013 CNN).</p>
+
+<div class="panel center">
+  <div class="stage">
+    <video id="video" autoplay playsinline muted width="640" height="480"></video>
+    <canvas id="overlay" width="640" height="480"></canvas>
   </div>
-  <div style="margin:14px;">
-    <button id="startBtn" class="detect_btn">Start camera</button>
-    <button id="stopBtn" class="detect_btn" disabled>Stop &amp; get result</button>
+
+  <div class="controls">
+    <button id="startBtn" class="btn btn-face">▶ Start camera</button>
+    <button id="stopBtn" class="btn btn-ghost" disabled>■ Stop &amp; get result</button>
   </div>
-  <p id="status">Click &ldquo;Start camera&rdquo; and allow webcam access.</p>
-  <h3 id="result"></h3>
-  <p style="color:#888; max-width:640px; margin:10px auto; font-size:0.9em;">
-    Emotion signals are a demo cue, <strong>not a diagnosis</strong>. For screening use the PHQ-9.
-  </p>
+
+  <p id="status" class="status">Click “Start camera” and allow webcam access.</p>
+
+  <div class="chips">
+    <span class="chip">Anxious <b id="c-anx">0</b></span>
+    <span class="chip">Depressed <b id="c-dep">0</b></span>
+    <span class="chip">Normal <b id="c-nor">0</b></span>
+  </div>
+
+  <h3 id="result" class="result"></h3>
 </div>
 
-<script src="{{url_for('static', filename='face.js')}}"></script>
+<p class="note center">“fear” → Anxious and “sad” → Depressed are shown as supplementary cues,
+<strong>not a diagnosis</strong>.</p>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='face.js') }}"></script>
 {% endblock %}

anxiety_app/templates/index.html

@@ -1,20 +1,35 @@
-{% extends "bootstrap/base.html" %}
+{% extends "base.html" %}
+{% block title %}AffectScreening — multimodal well-being demo{% endblock %}
 
-{% block styles %}
-{{super()}}
-<link rel="stylesheet" href="{{url_for('static', filename='index.css')}}">
-<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
-{% endblock %}
-
-{% block content%}
-<ul>
-    <li><a class="active" href="#home">Home</a></li>
-    <li><a href="face">Face</a></li>
-    <li><a href="voice">Voice</a></li>
-  </ul>
-  <h2>Anxiety and Depression Detection</h2>
+{% block content %}
+<section class="hero">
+  <h1>Multimodal <span class="grad">Affect</span> &amp; Well-being Screening</h1>
+  <p>Recognize emotional cues from your face and voice with deep learning, alongside the
+     clinically validated PHQ-9 questionnaire — all running in your browser.</p>
+  <div class="hero-cta">
+    <a class="btn btn-primary" href="{{ url_for('main.face') }}">Try face detection</a>
+    <a class="btn btn-ghost" href="{{ url_for('main.phq') }}">Take the PHQ-9</a>
+  </div>
+</section>
 
+<div class="grid">
+  <a class="card" href="{{ url_for('main.face') }}">
+    <div class="ic face">🙂</div>
+    <h3>Facial emotion</h3>
+    <p>Stream your webcam and a CNN (FER2013) classifies expressions in real time.</p>
+  </a>
+  <a class="card" href="{{ url_for('main.voice') }}">
+    <div class="ic voice">🎙️</div>
+    <h3>Speech emotion</h3>
+    <p>Record a few seconds and a 1-D CNN (RAVDESS) predicts gender + emotion from your voice.</p>
+  </a>
+  <a class="card" href="{{ url_for('main.phq') }}">
+    <div class="ic phq">📋</div>
+    <h3>PHQ-9 screening</h3>
+    <p>Answer the standard 9-item depression-screening questionnaire and get a scored result.</p>
+  </a>
+</div>
 
-
-{% endblock %}
+<p class="note center">Emotion recognition is a supplementary cue, <strong>not a diagnosis</strong>.
+The PHQ-9 is the only clinically validated component here.</p>
+{% endblock %}

anxiety_app/templates/phq9.html

@@ -1,23 +1,52 @@
-{% extends "bootstrap/base.html" %}
-{% block styles %}
-{{super()}}
-<link rel="stylesheet" href="{{url_for('static', filename='styles.css')}}">
-<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
-{% endblock %}
+{% extends "base.html" %}
+{% block title %}PHQ-9 — AffectScreening{% endblock %}
+
+{% block content %}
+<h1 class="page-title">PHQ-9 depression screening</h1>
+<p class="page-sub">Over the last 2 weeks, how often have you been bothered by the following problems?</p>
 
-{% block content%}
-<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;">
-    <li style="float: left;"><a class="active" href="home" style="display: block; color: white;padding: 14px 16px;">Home</a></li>
-    <li style="float: left;"><a href="face" style="display: block; color: white;padding: 14px 16px;">Face</a></li>
-    <li style="float: left;"><a href="voice" style="display: block; color: white;padding: 14px 16px;">Voice</a></li>
-</ul>
-<img src="{{url_for('static',filename = 'Presentation2.jpg')}}">
-<h2 class="heading">{{data}}</br></h2>
-<img class="icon" src="{{url_for('static',filename = 'face-detection.svg')}}">
-<a href="expression"><button class="detect_btn">Detect</button></a>
-<p>Press q to quit</p>
+<div class="panel">
+  <form id="phq-form">
+    {% set questions = [
+      "Little interest or pleasure in doing things",
+      "Feeling down, depressed, or hopeless",
+      "Trouble falling or staying asleep, or sleeping too much",
+      "Feeling tired or having little energy",
+      "Poor appetite or overeating",
+      "Feeling bad about yourself — or that you are a failure or have let yourself or your family down",
+      "Trouble concentrating on things, such as reading or watching television",
+      "Moving or speaking so slowly that others could notice — or being so fidgety/restless that you move around a lot more than usual",
+      "Thoughts that you would be better off dead, or of hurting yourself in some way"
+    ] %}
+    {% set options = ["Not at all", "Several days", "More than half the days", "Nearly every day"] %}
+    {% for q in questions %}
+    {% set qi = loop.index0 %}
+    <div class="q">
+      <div class="q-text"><span class="num">{{ loop.index }}.</span>{{ q }}</div>
+      <div class="opts">
+        {% for opt in options %}
+        <label class="opt">
+          <input type="radio" name="q{{ qi }}" value="{{ loop.index0 }}">
+          <span>{{ opt }}</span>
+        </label>
+        {% endfor %}
+      </div>
+    </div>
+    {% endfor %}
 
+    <div class="controls" style="justify-content:flex-start; margin-top:6px;">
+      <button type="submit" class="btn btn-primary">Calculate score</button>
+      <button type="reset" class="btn btn-ghost">Reset</button>
+    </div>
+  </form>
 
+  <div id="scorecard" class="scorecard"></div>
+</div>
 
-{% endblock %}
+<p class="note">The PHQ-9 is a validated screening aid for depression severity. It does
+<strong>not</strong> provide a diagnosis — discuss any concerns with a qualified clinician.</p>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='phq9.js') }}"></script>
+{% endblock %}

anxiety_app/templates/voice.html

@@ -1,33 +1,26 @@
-{% extends "bootstrap/base.html" %}
-{% block styles %}
-{{super()}}
-<link rel="stylesheet" href="{{url_for('static', filename='styles.css')}}">
-<link rel="preconnect" href="https://fonts.gstatic.com">
-<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">
-{% endblock %}
+{% extends "base.html" %}
+{% block title %}Voice — AffectScreening{% endblock %}
 
 {% block content %}
-<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;">
-    <li style="float: left;"><a class="active" href="home" style="display: block; color: white;padding: 14px 16px;">Home</a></li>
-    <li style="float: left;"><a href="face" style="display: block; color: white;padding: 14px 16px;">Face</a></li>
-    <li style="float: left;"><a href="voice" style="display: block; color: white;padding: 14px 16px;">Voice</a></li>
-    <li style="float: left;"><a href="qstn" style="display: block; color: white;padding: 14px 16px;">PHQ-9</a></li>
-</ul>
+<h1 class="page-title">Speech emotion detection</h1>
+<p class="page-sub">Record a few seconds of speech; a 1-D CNN (RAVDESS) predicts gender + emotion.</p>
 
-<h2 class="heading">Voice Emotion Detection</h2>
+<div class="panel center">
+  <div id="orb" class="mic-orb">🎙️</div>
 
-<div style="text-align:center;">
-  <img class="icon" src="{{url_for('static', filename='microphone.svg')}}" alt="microphone" style="width:90px;">
-  <div style="margin:14px;">
-    <button id="recBtn" class="voice_detect_btn">Record 4s</button>
+  <div class="controls">
+    <button id="recBtn" class="btn btn-voice">● Record 4s</button>
   </div>
-  <p id="vstatus">{{data}}</p>
-  <h3 id="vresult"></h3>
-  <audio id="player" controls style="display:none; margin:10px auto;"></audio>
-  <p style="color:#888; max-width:640px; margin:10px auto; font-size:0.9em;">
-    Predicts gender + emotion from your voice. A demo cue, <strong>not a diagnosis</strong>.
-  </p>
+
+  <p id="vstatus" class="status">{{ data }}</p>
+  <h3 id="vresult" class="result"></h3>
+  <audio id="player" controls style="display:none;"></audio>
 </div>
 
-<script src="{{url_for('static', filename='voice.js')}}"></script>
+<p class="note center">Predicts a combined gender + emotion class from your voice — a demo cue,
+<strong>not a diagnosis</strong>.</p>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='voice.js') }}"></script>
 {% endblock %}

requirements-modern.txt

@@ -18,5 +18,4 @@ pandas
 scikit-learn
 soundfile
 flask
-flask-bootstrap
 gunicorn