feat: amphitheater hero with mouse-tracking robot professor, fixed particles

app.py

@@ -435,6 +435,78 @@ BRIDGE_JS = """() => {
     if (btn) { btn.click(); return true; } return false;
   }
 
+  // ── Hero: professor eye tracking ───────────────────────────────────────────
+  // (Lives here, not in index.html: <script> tags injected via gr.HTML's
+  //  innerHTML are never executed by browsers.)
+  function initHeroProfessor() {
+    const prof = $('professor');
+    if (!prof || prof._pp) return;
+    prof._pp = true;
+    const pupils = prof.querySelectorAll('.prof-pupil');
+    let tx = 0, ty = 0, cx = 0, cy = 0;
+    document.addEventListener('mousemove', e => {
+      const r = prof.getBoundingClientRect();
+      // eyes sit in the head, around the top third of the character
+      const ox = r.left + r.width / 2, oy = r.top + r.height * 0.32;
+      const dx = e.clientX - ox, dy = e.clientY - oy;
+      const d = Math.min(4, Math.hypot(dx, dy) / 40); // max 4px displacement
+      const a = Math.atan2(dy, dx);
+      tx = Math.cos(a) * d; ty = Math.sin(a) * d;
+    });
+    (function track() {
+      cx += (tx - cx) * 0.18; cy += (ty - cy) * 0.18;
+      const t = 'translate(' + cx.toFixed(2) + 'px,' + cy.toFixed(2) + 'px)';
+      pupils.forEach(p => { p.style.transform = t; });
+      requestAnimationFrame(track);
+    })();
+  }
+
+  // ── Background particles (canvas is in gr.HTML markup; animation here) ────
+  function initParticles() {
+    const canvas = $('particles');
+    if (!canvas || canvas._pp) return;
+    canvas._pp = true;
+    const ctx = canvas.getContext('2d');
+    let W, H;
+    const rand = (a, b) => a + Math.random() * (b - a);
+    function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
+    window.addEventListener('resize', resize);
+    resize();
+    const parts = Array.from({length: 65}, () => ({
+      x: rand(0, W), y: rand(0, H),
+      vx: rand(-.25, .25), vy: rand(-.25, .25),
+      r: rand(1, 2.2),
+      purple: Math.random() > .5,
+      alpha: rand(.15, .55),
+    }));
+    (function draw() {
+      ctx.clearRect(0, 0, W, H);
+      for (let i = 0; i < parts.length; i++) {
+        const p = parts[i];
+        p.x += p.vx; p.y += p.vy;
+        if (p.x < -5) p.x = W + 5; if (p.x > W + 5) p.x = -5;
+        if (p.y < -5) p.y = H + 5; if (p.y > H + 5) p.y = -5;
+        for (let j = i + 1; j < parts.length; j++) {
+          const q = parts[j];
+          const dx = p.x - q.x, dy = p.y - q.y;
+          const dist = Math.hypot(dx, dy);
+          if (dist < 110) {
+            ctx.beginPath();
+            ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y);
+            ctx.strokeStyle = 'rgba(124,58,237,' + ((1 - dist / 110) * 0.12) + ')';
+            ctx.lineWidth = 1;
+            ctx.stroke();
+          }
+        }
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
+        ctx.fillStyle = 'rgba(' + (p.purple ? '124,58,237' : '6,182,212') + ',' + p.alpha + ')';
+        ctx.fill();
+      }
+      requestAnimationFrame(draw);
+    })();
+  }
+
   // ── Score ring ─────────────────────────────────────────────────────────────
   function updateScore() {
     const arc   = $('score-arc');
@@ -730,6 +802,8 @@ BRIDGE_JS = """() => {
   // ── Main polling loop ──────────────────────────────────────────────────────
   setInterval(function() {
     wireButtons();
+    initHeroProfessor();
+    initParticles();
 
     const statusEl = document.querySelector('#hidden-status-output textarea');
     if (statusEl && statusEl.value) applyStatus(statusEl.value);

core/image_gen.py

@@ -2,7 +2,6 @@
 Concept image generation via FLUX.2-klein.
 """
 
-import re
 import threading
 from functools import lru_cache
 
@@ -45,29 +44,16 @@ def _load_pipeline():
     return pipe
 
 
-def _clean_concept(question: str) -> str:
-    # FLUX.2 renders any sentence it sees as a title in the image, so strip
-    # the interrogative phrasing and keep only the underlying concept.
-    c = question.strip().replace("\n", " ")
-    c = re.sub(
-        r"^(please\s+)?(explain|describe|discuss|define|state|give|provide|name)"
-        r"(\s+(why|how|what|when|where|the|a|an))?\s+",
-        "", c, flags=re.IGNORECASE,
-    )
-    c = re.sub(r"^(why|how|what|when|where)\s+(is|are|does|do|can|would)\s+", "", c, flags=re.IGNORECASE)
-    return c.rstrip("?.! ")[:200]
-
-
 def generate_concept_image(concept: str) -> Image.Image:
+    # `concept` is intentionally ignored: FLUX.2 renders any text it sees
+    # into the image, so we use a fixed purely-visual celebration prompt.
     pipe = _load_pipeline()
     prompt = (
-        "A purely pictorial, completely wordless flat-design illustration "
-        f"visually representing the concept of {_clean_concept(concept)}, "
-        "expressed only through icons, symbols, arrows and visual metaphors. "
-        "The image contains no typography, no letters, no numbers, no labels, "
-        "no captions and no writing of any kind. "
-        "Dark navy background, purple and cyan accent colors, "
-        "clean minimalist scientific illustration style."
+        "A cute minimalist illustration celebrating learning and success, "
+        "no text, no words, no letters, no labels, purely visual, "
+        "soft glowing shapes, stars, abstract celebration, "
+        "dark navy background, purple and cyan colors, "
+        "warm and encouraging mood, flat design"
     )
     result = pipe(
         prompt=prompt,

ui/index.html

@@ -53,26 +53,189 @@
       display: flex; flex-direction: column; gap: 20px;
     }
 
-    /* ── Header ───────────────────────────────────────────────────────────── */
+    /* ── Header — amphitheater hero ───────────────────────────────────────── */
     .hero {
-      text-align: center;
-      padding: 48px 20px 36px;
+      padding: 12px 0 0;
       animation: fadeUp .6s ease both;
     }
-    .hero-icon { font-size: 3.2rem; display: block; margin-bottom: 12px;
-                 filter: drop-shadow(0 0 16px rgba(124,58,237,.6)); }
+    .amphitheater {
+      position: relative;
+      height: 380px;
+      perspective: 800px;
+      overflow: hidden;
+      border-radius: var(--r);
+      border: 1px solid var(--border);
+      background:
+        radial-gradient(ellipse 70% 45% at 50% -8%, rgba(167,139,250,.16) 0%, transparent 60%),
+        radial-gradient(ellipse 60% 35% at 50% 112%, rgba(6,182,212,.12) 0%, transparent 65%),
+        linear-gradient(180deg, #0B1126 0%, #0A0F1E 55%, #0C1226 100%);
+      box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
+    }
+
+    /* ceiling lights */
+    .amphi-light {
+      position: absolute; z-index: 1;
+      width: 4px; height: 4px; border-radius: 50%;
+      background: #CFE9FF;
+      box-shadow: 0 0 8px 2px rgba(167,139,250,.55);
+      animation: twinkle 3.2s ease-in-out infinite;
+    }
+    .amphi-light:nth-of-type(2n) {
+      box-shadow: 0 0 8px 2px rgba(103,232,249,.5);
+    }
+
+    /* ambient beam from above */
+    .amphi-beam {
+      position: absolute; inset: 0; z-index: 1; pointer-events: none;
+      background: radial-gradient(ellipse 55% 50% at 50% 0%, rgba(241,245,249,.07), transparent 70%);
+    }
+
+    /* curved seat rows receding into the distance */
+    .amphi-rows {
+      position: absolute; inset: 0; z-index: 1;
+      transform-style: preserve-3d;
+    }
+    .amphi-row {
+      position: absolute; left: 50%;
+      transform: translateX(-50%) rotateX(48deg);
+      transform-origin: 50% 100%;
+      border-radius: 50% 50% 0 0 / 90% 90% 0 0;
+      background:
+        linear-gradient(180deg, rgba(255,255,255,.09) 0%, transparent 35%),
+        repeating-linear-gradient(90deg,
+          #41322a 0,
+          #41322a calc(var(--seat) - 6px),
+          #221a15 calc(var(--seat) - 6px),
+          #221a15 var(--seat));
+      box-shadow: 0 10px 18px rgba(0,0,0,.55);
+    }
+    .amphi-row:nth-child(1) { --seat: 18px; width: 54%;  height: 16px; top: 30%; opacity: .45; }
+    .amphi-row:nth-child(2) { --seat: 21px; width: 66%;  height: 20px; top: 41%; opacity: .6;  }
+    .amphi-row:nth-child(3) { --seat: 24px; width: 80%;  height: 24px; top: 52%; opacity: .75; }
+    .amphi-row:nth-child(4) { --seat: 27px; width: 94%;  height: 28px; top: 64%; opacity: .88; }
+    .amphi-row:nth-child(5) { --seat: 30px; width: 110%; height: 32px; top: 77%; opacity: 1;   }
+
+    /* glowing stage + podium */
+    .amphi-stage {
+      position: absolute; bottom: -8px; left: 50%; z-index: 2;
+      transform: translateX(-50%);
+      width: 60%; height: 74px; pointer-events: none;
+      background: radial-gradient(ellipse at 50% 100%, rgba(6,182,212,.32), rgba(124,58,237,.16) 45%, transparent 72%);
+      filter: blur(2px);
+    }
+    .amphi-podium {
+      position: absolute; bottom: 18px; left: 50%; z-index: 2;
+      transform: translateX(-50%);
+      width: 130px; height: 26px; pointer-events: none;
+      border-radius: 50%;
+      background: radial-gradient(ellipse, rgba(103,232,249,.45), rgba(124,58,237,.22) 60%, transparent 78%);
+      box-shadow: 0 0 30px rgba(6,182,212,.35);
+    }
+
+    /* ── AI professor character ───────────────────────────────────────────── */
+    .professor {
+      position: absolute; bottom: 36px; left: 50%; z-index: 3;
+      width: 92px; margin-left: -46px; /* centered without transform — float animation owns transform */
+      cursor: pointer;
+      animation: prof-float 3.6s ease-in-out infinite;
+      filter: drop-shadow(0 10px 14px rgba(0,0,0,.5));
+    }
+    .prof-antenna {
+      width: 3px; height: 14px; margin: 0 auto; position: relative;
+      background: linear-gradient(180deg, var(--cyan-l), var(--purple));
+      border-radius: 2px;
+    }
+    .prof-antenna::after {
+      content: ''; position: absolute; top: -7px; left: 50%;
+      transform: translateX(-50%);
+      width: 9px; height: 9px; border-radius: 50%;
+      background: var(--cyan-l);
+      box-shadow: 0 0 10px 2px rgba(103,232,249,.8);
+      animation: pulse 2.2s ease-in-out infinite;
+    }
+    .prof-head {
+      width: 66px; height: 54px; margin: 0 auto; position: relative;
+      display: flex; align-items: center; justify-content: center; gap: 10px;
+      border-radius: 18px;
+      background: linear-gradient(145deg, #262C4F 0%, #161B36 100%);
+      border: 1.5px solid rgba(167,139,250,.45);
+      box-shadow: 0 0 18px rgba(124,58,237,.25), inset 0 1px 0 rgba(255,255,255,.08);
+      transition: transform .25s ease;
+    }
+    .professor:hover .prof-head { transform: rotate(-4deg); }
+    .prof-eye {
+      width: 17px; height: 19px; margin-top: -4px;
+      border-radius: 50%; background: #EAF2FF;
+      position: relative; overflow: hidden;
+      animation: prof-blink 5.2s infinite;
+    }
+    .prof-pupil {
+      position: absolute; left: 50%; top: 50%;
+      width: 8px; height: 8px; margin: -4px 0 0 -4px;
+      border-radius: 50%; background: #131A36;
+      transition: transform 0.1s ease;
+    }
+    .prof-pupil::after {
+      content: ''; position: absolute; top: 1px; left: 1.5px;
+      width: 2.5px; height: 2.5px; border-radius: 50%;
+      background: #fff; opacity: .9;
+    }
+    .prof-mouth {
+      position: absolute; bottom: 8px; left: 50%;
+      transform: translateX(-50%);
+      width: 16px; height: 7px;
+      border: 2px solid var(--cyan-l); border-top: none;
+      border-radius: 0 0 14px 14px;
+      opacity: .85; transition: width .2s, height .2s;
+    }
+    .professor:hover .prof-mouth { width: 22px; height: 10px; }
+    .prof-body {
+      width: 54px; height: 38px; margin: -3px auto 0; position: relative;
+      border-radius: 14px 14px 16px 16px;
+      background: linear-gradient(160deg, #2E2553 0%, #173A52 100%);
+      border: 1.5px solid rgba(103,232,249,.35);
+      box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
+    }
+    .prof-chest {
+      position: absolute; top: 50%; left: 50%;
+      transform: translate(-50%, -50%);
+      width: 12px; height: 12px; border-radius: 50%;
+      background: radial-gradient(circle at 35% 35%, var(--cyan-l), var(--purple));
+      box-shadow: 0 0 12px rgba(103,232,249,.7);
+      animation: pulse 2.8s ease-in-out infinite;
+    }
+    .prof-arm {
+      position: absolute; top: 4px;
+      width: 9px; height: 26px; border-radius: 6px;
+      background: linear-gradient(180deg, #2E2553, #1D2348);
+      border: 1.5px solid rgba(167,139,250,.3);
+      transform-origin: top center;
+      transition: transform .25s ease;
+    }
+    .prof-arm.left  { left: -12px;  transform: rotate(14deg); }
+    .prof-arm.right { right: -12px; transform: rotate(-14deg); }
+    .professor:hover .prof-arm.right { animation: prof-wave .8s ease-in-out infinite; }
+
+    /* ── Hero text overlay ────────────────────────────────────────────────── */
+    .hero-overlay {
+      position: absolute; top: 30px; left: 0; right: 0; z-index: 4;
+      text-align: center; pointer-events: none;
+    }
     .hero-title {
-      font-size: clamp(2.6rem, 8vw, 4.2rem);
+      font-size: clamp(2.2rem, 6vw, 3.4rem);
       font-weight: 900; line-height: 1;
       background: linear-gradient(135deg, var(--purple-l) 0%, var(--cyan-l) 100%);
       -webkit-background-clip: text; -webkit-text-fill-color: transparent;
       background-clip: text;
       letter-spacing: -1.5px;
-      margin-bottom: 10px;
+      margin-bottom: 8px;
+      filter: drop-shadow(0 4px 18px rgba(124,58,237,.35));
+      animation: fadeUp .7s .15s ease both;
     }
     .hero-sub {
-      color: var(--muted); font-size: 1rem; font-weight: 400;
+      color: var(--muted); font-size: .98rem; font-weight: 400;
       letter-spacing: .01em;
+      animation: fadeUp .7s .35s ease both;
     }
 
     /* ── Card ─────────────────────────────────────────────────────────────── */
@@ -379,6 +542,13 @@
     @keyframes popIn    { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }
     @keyframes spin     { to { transform: rotate(360deg); } }
     @keyframes pulse    { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
+    @keyframes twinkle  { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
+    @keyframes prof-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
+    @keyframes prof-blink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.12); } 96% { transform: scaleY(1); } }
+    @keyframes prof-wave {
+      0%, 100% { transform: rotate(-160deg); }
+      50%      { transform: rotate(-115deg); }
+    }
 
     .hidden { display: none !important; }
     .fade-in-up { animation: fadeUp .4s ease both; }
@@ -434,8 +604,10 @@
     @media (max-width: 520px) {
       #app { padding: 20px 14px 60px; }
       .card { padding: 20px 18px; }
-      .hero { padding: 32px 12px 24px; }
-      .hero-title { font-size: 2.4rem; }
+      .hero { padding: 8px 0 0; }
+      .amphitheater { height: 300px; }
+      .hero-overlay { top: 20px; }
+      .hero-title { font-size: 2.2rem; }
       .controls-row { gap: 8px; }
       .answer-actions { flex-direction: column; }
       .answer-actions button { width: 100%; justify-content: center; }
@@ -444,11 +616,54 @@
 <canvas id="particles"></canvas>
 
   <div id="app">
-    <!-- Hero -->
+    <!-- Hero — cinematic amphitheater with AI professor -->
     <header class="hero">
-      <span class="hero-icon">📄</span>
-      <h1 class="hero-title">PaperProf</h1>
-      <p class="hero-sub">Upload your course. Get quizzed by AI.</p>
+      <div class="amphitheater" id="amphitheater">
+        <div class="amphi-beam"></div>
+
+        <!-- ceiling lights -->
+        <span class="amphi-light" style="left:9%;  top:9%;  animation-delay:0s"></span>
+        <span class="amphi-light" style="left:21%; top:5%;  animation-delay:.7s"></span>
+        <span class="amphi-light" style="left:36%; top:11%; animation-delay:1.4s"></span>
+        <span class="amphi-light" style="left:51%; top:4%;  animation-delay:.3s"></span>
+        <span class="amphi-light" style="left:65%; top:10%; animation-delay:1.9s"></span>
+        <span class="amphi-light" style="left:79%; top:6%;  animation-delay:1.1s"></span>
+        <span class="amphi-light" style="left:91%; top:12%; animation-delay:.5s"></span>
+
+        <!-- curved seat rows, far → near -->
+        <div class="amphi-rows">
+          <div class="amphi-row"></div>
+          <div class="amphi-row"></div>
+          <div class="amphi-row"></div>
+          <div class="amphi-row"></div>
+          <div class="amphi-row"></div>
+        </div>
+
+        <!-- glowing stage -->
+        <div class="amphi-stage"></div>
+        <div class="amphi-podium"></div>
+
+        <!-- AI professor (eyes wired to the mouse in BRIDGE_JS) -->
+        <div class="professor" id="professor" title="Your AI professor">
+          <div class="prof-antenna"></div>
+          <div class="prof-head">
+            <div class="prof-eye"><div class="prof-pupil"></div></div>
+            <div class="prof-eye"><div class="prof-pupil"></div></div>
+            <div class="prof-mouth"></div>
+          </div>
+          <div class="prof-body">
+            <div class="prof-arm left"></div>
+            <div class="prof-arm right"></div>
+            <div class="prof-chest"></div>
+          </div>
+        </div>
+
+        <!-- floating text overlay -->
+        <div class="hero-overlay">
+          <h1 class="hero-title">PaperProf</h1>
+          <p class="hero-sub">Upload your course. Get quizzed by AI.</p>
+        </div>
+      </div>
     </header>
 
     <!-- ── Quiz card ────────────────────────────────────────────────────── -->
@@ -584,370 +799,8 @@
   </div>
 
   <script>
-  // Script intentionally left minimal — all quiz logic lives in BRIDGE_JS
-  // injected via demo.load(js=BRIDGE_JS) which actually executes.
-  // innerHTML-injected <script> tags are never run by browsers.
-
-  // (all logic removed — lives in BRIDGE_JS)
-  // placeholder to keep closing tag:
+  // Intentionally empty — browsers never execute <script> tags injected via
+  // innerHTML (gr.HTML), so ALL page logic (quiz flow, particles, professor
+  // eye tracking) lives in BRIDGE_JS in app.py, injected via demo.load(js=...).
   void 0;
-  /*
-  const emptyState   = $('empty-state');
-  const questionArea = $('question-area');
-  const qText        = $('q-text');
-  const qLoading     = $('q-loading');
-  const qLoadingMsg  = $('q-loading-msg');
-  const answerInput  = $('answer-input');
-  const charCount    = $('char-count');
-  const newQBtn      = $('new-q-btn');
-  const startBtn     = $('start-btn');
-  const submitBtn    = $('submit-btn');
-  const submitText   = $('submit-btn-text');
-  const submitSpinner= $('submit-spinner');
-  const endBtn       = $('end-btn');
-  const scoreArc     = $('score-arc');
-  const scoreLabel   = $('score-label');
-
-  const feedbackCard = $('feedback-card');
-  const verdictBadge = $('verdict-badge');
-  const feedbackBody = $('feedback-body');
-  const sourceText   = $('source-text');
-
-  const modal        = $('modal');
-  const modalScoreBig= $('modal-score-big');
-  const modalScoreLabel = $('modal-score-label');
-  const modalMessage = $('modal-message');
-  const modalHistory = $('modal-history');
-  const modalClose   = $('modal-close');
-
-  // ───────────────────────────────────────────────────────────────────────────
-  // API helpers
-  // ───────────────────────────────────────────────────────────────────────────
-  async function apiQuestion(chunk, language, difficulty) {
-    const r = await fetch('/api/question', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ chunk, language, difficulty }),
-    });
-    const d = await r.json();
-    if (!r.ok) throw new Error(d.detail || 'Failed to generate question');
-    return d;
-  }
-
-  async function apiEvaluate(question, chunk, answer, language) {
-    const r = await fetch('/api/evaluate', {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ question, chunk, answer, language }),
-    });
-    const d = await r.json();
-    if (!r.ok) throw new Error(d.detail || 'Failed to evaluate answer');
-    return d;
-  }
-
-  // ───────────────────────────────────────────────────────────────────────────
-  // UI helpers
-  // ───────────────────────────────────────────────────────────────────────────
-  function setLoadingBtn(btn, textEl, spinner, loading, label) {
-    btn.disabled = loading;
-    textEl.textContent = label || textEl.textContent;
-    spinner.classList.toggle('hidden', !loading);
-  }
-
-  function updateScore() {
-    const n = S.correct, d = S.total;
-    scoreLabel.textContent = d === 0 ? '—' : `${n}/${d}`;
-    const pct = d === 0 ? 0 : n / d;
-    const circ = 138.2;
-    scoreArc.style.strokeDashoffset = circ * (1 - pct);
-    const color = pct >= 0.7 ? '#10B981' : pct >= 0.4 ? '#F59E0B' : '#EF4444';
-    scoreArc.style.stroke = d === 0
-      ? 'url(#scoreGrad)'
-      : color;
-  }
-
-  function extractVerdict(text) {
-    const lower = text.toLowerCase();
-    const lines = lower.split('\n');
-    for (const l of lines) {
-      if (l.includes('verdict')) {
-        if (l.includes('partially') || l.includes('partiellement')) return 'partial';
-        if (l.includes('incorrect'))  return 'incorrect';
-        if (l.includes('correct'))    return 'correct';
-      }
-    }
-    if (lower.slice(0,200).includes('incorrect'))  return 'incorrect';
-    if (lower.slice(0,200).includes('partially') || lower.slice(0,200).includes('partiellement')) return 'partial';
-    if (lower.slice(0,200).includes('correct'))   return 'correct';
-    return 'unknown';
-  }
-
-  function renderFeedback(text) {
-    const sectionLabels = ['', 'Verdict', 'What was good', 'What was missing', 'Model answer'];
-    const frLabels = ['', 'Verdict', 'Ce qui était bien', 'Ce qui manquait', 'Réponse modèle'];
-    const labels = S.language === 'Français' ? frLabels : sectionLabels;
-    const sections = [];
-    let m;
-    const re = /(\d+)\.\s*([^:\n]*)[:：]?\s*([\s\S]*?)(?=\n\d+\.|$)/g;
-    while ((m = re.exec(text)) !== null) {
-      sections.push({ num: parseInt(m[1]), header: m[2].trim(), body: m[3].trim() });
-    }
-
-    if (sections.length >= 2) {
-      feedbackBody.innerHTML = sections.map(s => {
-        const label = labels[s.num] || s.header || `Part ${s.num}`;
-        return `<div class="section">
-          <span class="section-num">${label}</span>
-          <div class="section-content">${s.body.replace(/\n/g,'<br>')}</div>
-        </div>`;
-      }).join('');
-    } else {
-      feedbackBody.innerHTML = `<div class="feedback-raw">${
-        text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
-      }</div>`;
-    }
-  }
-
-  function showFeedback(text, chunk) {
-    const verdict = extractVerdict(text);
-    verdictBadge.className = `verdict-badge ${verdict === 'unknown' ? '' : verdict}`;
-    const labels = {
-      correct:   S.language === 'Français' ? '✓ Correct'              : '✓ Correct',
-      partial:   S.language === 'Français' ? '~ Partiellement correct' : '~ Partially Correct',
-      incorrect: S.language === 'Français' ? '✗ Incorrect'             : '✗ Incorrect',
-      unknown:   '— Unknown',
-    };
-    verdictBadge.textContent = labels[verdict] || labels.unknown;
-
-    renderFeedback(text);
-    sourceText.textContent = chunk;
-    feedbackCard.classList.remove('hidden');
-    feedbackCard.classList.add('fade-in-up');
-    feedbackCard.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-    return verdict;
-  }
-
-  function showModal() {
-    const pct = S.total > 0 ? Math.round((S.correct / S.total) * 100) : 0;
-    modalScoreBig.textContent = `${S.correct}/${S.total}`;
-    modalScoreLabel.textContent = S.total === 1 ? 'question answered' : 'questions answered';
-
-    const msgs = pct >= 90
-      ? ["Outstanding! You've mastered this material. 🌟", "Incroyable ! Tu maîtrises ce cours. 🌟"]
-      : pct >= 70
-      ? ["Great work — you have a solid grasp of this content. 💪", "Bon travail — tu maîtrises bien le contenu. 💪"]
-      : pct >= 50
-      ? ["Good start! Keep practising the tricky sections. 📖", "Bon début ! Continue à pratiquer les parties difficiles. 📖"]
-      : ["Keep going — each question makes you stronger. 🔥", "Continue — chaque question te rend plus fort. 🔥"];
-    modalMessage.textContent = S.language === 'Français' ? msgs[1] : msgs[0];
-
-    const recent = S.history.slice(-8);
-    if (recent.length > 0) {
-      modalHistory.classList.remove('hidden');
-      modalHistory.innerHTML = recent.map(h => {
-        const vc = h.verdict === 'correct' ? 'correct'
-                 : h.verdict === 'partial' ? 'partial' : 'incorrect';
-        const vl = h.verdict === 'correct'   ? '✓'
-                 : h.verdict === 'partial'   ? '~' : '✗';
-        return `<div class="modal-history-item">
-          <span class="hist-badge ${vc}">${vl}</span>
-          <span class="hist-q">${h.question}</span>
-        </div>`;
-      }).join('');
-    }
-
-    modal.classList.remove('hidden');
-  }
-
-  // ───────────────────────────────────────────────────────────────────────────
-  // Language / difficulty toggles
-  // ───────────────────────────────────────────────────────────────────────────
-  function setupToggle(groupId, stateKey) {
-    const group = $(groupId);
-    group.querySelectorAll('.pill').forEach(btn => {
-      btn.addEventListener('click', () => {
-        group.querySelectorAll('.pill').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
-        S[stateKey] = btn.dataset.val;
-      });
-    });
-  }
-  setupToggle('lang-toggle', 'language');
-  setupToggle('diff-toggle', 'difficulty');
-
-  // ───────────────────────────────────────────────────────────────────────────
-  // Generate question
-  // ───────────────────────────────────────────────────────────────────────────
-  async function fetchQuestion() {
-    if (!S.chunks.length) return;
-
-    if (emptyState && !emptyState.classList.contains('hidden')) {
-      emptyState.classList.add('hidden');
-      questionArea.classList.remove('hidden');
-      endBtn.classList.remove('hidden');
-    }
-
-    qText.textContent = '';
-    qLoading.classList.remove('hidden');
-    qLoadingMsg.textContent = S.total === 0
-      ? 'Generating question (model loading, ~30s first time)…'
-      : 'Generating question…';
-
-    answerInput.value = '';
-    charCount.textContent = '0 chars';
-    submitBtn.disabled = true;
-    feedbackCard.classList.add('hidden');
-    newQBtn.disabled = true;
-
-    try {
-      const chunk = S.chunks[Math.floor(Math.random() * S.chunks.length)];
-      S.currentChunk = chunk;
-      const data = await apiQuestion(chunk, S.language, S.difficulty);
-      S.currentQuestion = data.question;
-      qText.textContent = data.question;
-    } catch (err) {
-      qText.textContent = '⚠ ' + err.message;
-    } finally {
-      qLoading.classList.add('hidden');
-      newQBtn.disabled = false;
-    }
-  }
-
-  startBtn.addEventListener('click', fetchQuestion);
-  newQBtn.addEventListener('click', fetchQuestion);
-
-  // ───────────────────────────────────────────────────────────────────────────
-  // Answer input
-  // ───────────────────────────────────────────────────────────────────────────
-  answerInput.addEventListener('input', () => {
-    const len = answerInput.value.trim().length;
-    charCount.textContent = `${answerInput.value.length} chars`;
-    submitBtn.disabled = len === 0 || !S.currentQuestion;
-  });
-
-  // ───────────────────────────────────────────────────────────────────────────
-  // Submit answer
-  // ───────────────────────────────────────────────────────────────────────────
-  submitBtn.addEventListener('click', async () => {
-    const answer = answerInput.value.trim();
-    if (!answer || !S.currentQuestion) return;
-
-    setLoadingBtn(submitBtn, submitText, submitSpinner, true, 'Evaluating…');
-    newQBtn.disabled = true;
-
-    try {
-      const data = await apiEvaluate(
-        S.currentQuestion, S.currentChunk, answer, S.language
-      );
-      S.total++;
-      const verdict = showFeedback(data.feedback, S.currentChunk);
-      if (verdict === 'correct') S.correct++;
-      S.history.push({ question: S.currentQuestion, verdict });
-      updateScore();
-    } catch (err) {
-      feedbackBody.innerHTML = `<span style="color:var(--red)">⚠ ${err.message}</span>`;
-      verdictBadge.className = 'verdict-badge';
-      verdictBadge.textContent = 'Error';
-      feedbackCard.classList.remove('hidden');
-    } finally {
-      setLoadingBtn(submitBtn, submitText, submitSpinner, false, 'Submit Answer');
-      newQBtn.disabled = false;
-    }
-  });
-
-  // ───────────────────────────────────────────────────────────────────────────
-  // End session
-  // ───────────────────────────────────────────────────────────────────────────
-  endBtn.addEventListener('click', () => {
-    if (S.total === 0) {
-      modal.classList.remove('hidden');
-    } else {
-      showModal();
-    }
-  });
-
-  modalClose.addEventListener('click', () => {
-    modal.classList.add('hidden');
-    S.correct = 0; S.total = 0; S.history = [];
-    S.currentQuestion = ''; S.currentChunk = '';
-    updateScore();
-    answerInput.value = '';
-    charCount.textContent = '0 chars';
-    submitBtn.disabled = true;
-    feedbackCard.classList.add('hidden');
-    emptyState.classList.remove('hidden');
-    questionArea.classList.add('hidden');
-    endBtn.classList.add('hidden');
-    quizCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  });
-
-  modal.addEventListener('click', e => {
-    if (e.target === modal) modal.classList.add('hidden');
-  });
-
-  // ───────────────────────────────────────────────────────────────────────────
-  // Particles
-  // ───────────────────────────────────────────────────────────────────────────
-  (function initParticles() {
-    const canvas = $('particles');
-    const ctx = canvas.getContext('2d');
-    let W, H, particles;
-
-    function resize() {
-      W = canvas.width  = window.innerWidth;
-      H = canvas.height = window.innerHeight;
-    }
-    window.addEventListener('resize', resize);
-    resize();
-
-    function rand(a, b) { return a + Math.random() * (b - a); }
-
-    function makeParticle() {
-      return {
-        x: rand(0, W), y: rand(0, H),
-        vx: rand(-.25, .25), vy: rand(-.25, .25),
-        r: rand(1, 2.2),
-        hue: Math.random() > .5 ? '#7C3AED' : '#06B6D4',
-        alpha: rand(.15, .55),
-      };
-    }
-
-    function init() { particles = Array.from({ length: 65 }, makeParticle); }
-    init();
-
-    function draw() {
-      ctx.clearRect(0, 0, W, H);
-      for (let i = 0; i < particles.length; i++) {
-        const p = particles[i];
-        p.x += p.vx; p.y += p.vy;
-        if (p.x < -5) p.x = W + 5;
-        if (p.x > W + 5) p.x = -5;
-        if (p.y < -5) p.y = H + 5;
-        if (p.y > H + 5) p.y = -5;
-
-        for (let j = i + 1; j < particles.length; j++) {
-          const q = particles[j];
-          const dx = p.x - q.x, dy = p.y - q.y;
-          const dist = Math.sqrt(dx*dx + dy*dy);
-          if (dist < 110) {
-            ctx.beginPath();
-            ctx.moveTo(p.x, p.y); ctx.lineTo(q.x, q.y);
-            const a = (1 - dist / 110) * 0.12;
-            ctx.strokeStyle = `rgba(124,58,237,${a})`;
-            ctx.lineWidth = 1;
-            ctx.stroke();
-          }
-        }
-
-        ctx.beginPath();
-        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
-        const hex = p.hue === '#7C3AED' ? '124,58,237' : '6,182,212';
-        ctx.fillStyle = `rgba(${hex},${p.alpha})`;
-        ctx.fill();
-      }
-      requestAnimationFrame(draw);
-    }
-    draw();
-  })();
-  */
   </script>