feat: Off-Brand badge - custom FastAPI+HTML frontend, zero Gradio chrome

README.md

@@ -6,7 +6,7 @@ colorTo: blue
 sdk: gradio
 sdk_version: 6.16.0
 python_version: '3.12'
-app_file: app.py
+app_file: main.py
 pinned: false
 ---
 

app.py

@@ -237,4 +237,4 @@ with gr.Blocks(title="PaperProf", theme=edu_theme, css=CSS) as demo:
     )
 
 if __name__ == "__main__":
-    demo.launch()
+    pass  # launching is handled by main.py / HuggingFace Spaces

core/questioner.py

@@ -15,13 +15,21 @@ Public API:
 
 from model.llm import get_llm
 
+_DIFFICULTY_HINT = {
+    "Easy":   "Ask for simple factual recall (What is X? Define X.).",
+    "Normal": "Ask for conceptual understanding (Explain X. Why does X happen?).",
+    "Hard":   "Ask for analysis or application (Compare X and Y. How would you apply X to Y?).",
+}
+
 _PROMPT_TEMPLATE = """\
 You are a university professor creating exam questions.
-Given the following excerpt from a course, write ONE short, focused question that tests understanding of a single concept.
+Given the following excerpt from a course, write ONE focused question.
+
+Difficulty — {difficulty_hint}
 
 Rules:
 - ONE question only, on ONE concept
-- Maximum 20 words
+- Maximum 25 words
 - No sub-questions, no "and", no compound questions
 - Write in {language}
 - Output only the question, nothing else
@@ -32,8 +40,12 @@ Excerpt:
 Question:"""
 
 
-def generate_question(chunk: str, language: str = "English") -> str:
+def generate_question(chunk: str, language: str = "English", difficulty: str = "Normal") -> str:
     """Return a single study question generated from *chunk*."""
     llm = get_llm()
-    prompt = _PROMPT_TEMPLATE.format(chunk=chunk.strip(), language=language)
+    prompt = _PROMPT_TEMPLATE.format(
+        chunk=chunk.strip(),
+        language=language,
+        difficulty_hint=_DIFFICULTY_HINT.get(difficulty, _DIFFICULTY_HINT["Normal"]),
+    )
     return llm.generate(prompt).strip()

main.py

@@ -0,0 +1,125 @@
+"""
+main.py — FastAPI entry point for PaperProf.
+
+Serves the custom HTML/CSS/JS frontend at / and exposes the ML pipeline
+as a stateless JSON API at /api/*. The original Gradio interface is mounted
+at /gradio as a fallback.
+
+HuggingFace Spaces: README.md has app_file: main.py
+"""
+import os
+import tempfile
+
+import gradio as gr
+from fastapi import FastAPI, File, HTTPException, UploadFile
+from fastapi.responses import HTMLResponse
+from pydantic import BaseModel
+
+from core.parser import extract_text
+from core.chunker import chunk_text
+from core.questioner import generate_question
+from core.evaluator import evaluate_answer
+from app import demo  # Gradio demo — mounted at /gradio for ZeroGPU fallback
+
+try:
+    import spaces
+    _GPU = spaces.GPU
+except ImportError:
+    def _GPU(duration=60):  # no-op decorator for local dev
+        def wrap(fn):
+            return fn
+        return wrap
+
+# ─────────────────────────────────────────────────────────────────────────────
+# FastAPI base
+# ─────────────────────────────────────────────────────────────────────────────
+
+_base = FastAPI(title="PaperProf", docs_url=None, redoc_url=None)
+
+
+@_base.get("/", response_class=HTMLResponse)
+async def root():
+    with open("ui/index.html", encoding="utf-8") as fh:
+        return fh.read()
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# /api/load — parse PDF into chunks (CPU, no ZeroGPU needed)
+# ─────────────────────────────────────────────────────────────────────────────
+
+@_base.post("/api/load")
+async def api_load(file: UploadFile = File(...)):
+    if not (file.filename or "").lower().endswith(".pdf"):
+        raise HTTPException(400, "Only PDF files are supported.")
+    content = await file.read()
+    with tempfile.NamedTemporaryFile(suffix=".pdf", delete=False) as tmp:
+        tmp.write(content)
+        tmp_path = tmp.name
+    try:
+        text = extract_text(tmp_path)
+        chunks = chunk_text(text)
+        if not chunks:
+            raise HTTPException(400, "No text found in PDF (scanned or too short?).")
+        return {"chunks": chunks, "count": len(chunks)}
+    except HTTPException:
+        raise
+    except ValueError as exc:
+        raise HTTPException(400, str(exc))
+    except Exception as exc:
+        raise HTTPException(500, f"Unexpected error: {exc}")
+    finally:
+        os.unlink(tmp_path)
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# /api/question — generate a question from a chunk (GPU)
+# ─────────────────────────────────────────────────────────────────────────────
+
+class QuestionRequest(BaseModel):
+    chunk: str
+    language: str = "English"
+    difficulty: str = "Normal"
+
+
+@_GPU(duration=60)
+def _run_generate_question(chunk: str, language: str, difficulty: str) -> str:
+    return generate_question(chunk, language=language, difficulty=difficulty)
+
+
+@_base.post("/api/question")
+def api_question(req: QuestionRequest):
+    try:
+        return {"question": _run_generate_question(req.chunk, req.language, req.difficulty)}
+    except Exception as exc:
+        raise HTTPException(500, str(exc))
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# /api/evaluate — evaluate student answer (GPU)
+# ─────────────────────────────────────────────────────────────────────────────
+
+class EvaluateRequest(BaseModel):
+    question: str
+    chunk: str
+    answer: str
+    language: str = "English"
+
+
+@_GPU(duration=120)
+def _run_evaluate_answer(question: str, chunk: str, answer: str, language: str) -> str:
+    return evaluate_answer(question, chunk, answer, language=language)
+
+
+@_base.post("/api/evaluate")
+def api_evaluate(req: EvaluateRequest):
+    try:
+        return {"feedback": _run_evaluate_answer(req.question, req.chunk, req.answer, req.language)}
+    except Exception as exc:
+        raise HTTPException(500, str(exc))
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# Mount Gradio at /gradio and export the combined ASGI app
+# ─────────────────────────────────────────────────────────────────────────────
+
+app = gr.mount_gradio_app(_base, demo, path="/gradio")

requirements.txt

@@ -1,6 +1,11 @@
 # Core UI
 gradio>=4.36.0
 
+# Custom frontend server
+fastapi>=0.100.0
+uvicorn>=0.23.0
+python-multipart>=0.0.6
+
 # PDF extraction
 PyMuPDF>=1.24.0
 

ui/index.html

@@ -0,0 +1,1013 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PaperProf — AI Study Buddy</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <style>
+    /* ── Reset & base ─────────────────────────────────────────────────────── */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg:           #0A0F1E;
+      --surface:      rgba(255,255,255,0.04);
+      --surface-2:    rgba(255,255,255,0.07);
+      --border:       rgba(255,255,255,0.08);
+      --border-glow:  rgba(124,58,237,0.5);
+      --purple:       #7C3AED;
+      --purple-l:     #A78BFA;
+      --cyan:         #06B6D4;
+      --cyan-l:       #67E8F9;
+      --green:        #10B981;
+      --amber:        #F59E0B;
+      --red:          #EF4444;
+      --text:         #F1F5F9;
+      --muted:        #94A3B8;
+      --dim:          #475569;
+      --r:            18px;
+      --r-sm:         10px;
+    }
+
+    html { scroll-behavior: smooth; }
+
+    body {
+      font-family: 'Inter', system-ui, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      min-height: 100vh;
+      overflow-x: hidden;
+      background-image:
+        radial-gradient(ellipse at 15% 40%, rgba(124,58,237,0.10) 0%, transparent 55%),
+        radial-gradient(ellipse at 85% 15%, rgba(6,182,212,0.08) 0%, transparent 55%),
+        radial-gradient(ellipse at 60% 90%, rgba(124,58,237,0.06) 0%, transparent 50%);
+    }
+
+    /* ── Particles canvas ─────────────────────────────────────────────────── */
+    #particles {
+      position: fixed; inset: 0;
+      pointer-events: none; z-index: 0;
+    }
+
+    /* ── Layout ───────────────────────────────────────────────────────────── */
+    #app {
+      position: relative; z-index: 1;
+      max-width: 760px;
+      margin: 0 auto;
+      padding: 28px 20px 80px;
+      display: flex; flex-direction: column; gap: 20px;
+    }
+
+    /* ── Header ───────────────────────────────────────────────────────────── */
+    .hero {
+      text-align: center;
+      padding: 48px 20px 36px;
+      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)); }
+    .hero-title {
+      font-size: clamp(2.6rem, 8vw, 4.2rem);
+      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;
+    }
+    .hero-sub {
+      color: var(--muted); font-size: 1rem; font-weight: 400;
+      letter-spacing: .01em;
+    }
+
+    /* ── Card ─────────────────────────────────────────────────────────────── */
+    .card {
+      background: rgba(10,15,30,0.65);
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
+      border: 1px solid var(--border);
+      border-radius: var(--r);
+      padding: 28px;
+      box-shadow: 0 8px 32px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
+      transition: border-color .25s;
+    }
+    .card:hover { border-color: rgba(255,255,255,.12); }
+
+    /* ── Drop zone ────────────────────────────────────────────────────────── */
+    .drop-zone {
+      border: 2px dashed rgba(124,58,237,.35);
+      border-radius: var(--r-sm);
+      padding: 40px 24px;
+      text-align: center;
+      cursor: pointer;
+      transition: border-color .2s, box-shadow .2s, background .2s;
+      position: relative;
+    }
+    .drop-zone:hover, .drop-zone.drag-over {
+      border-color: var(--cyan);
+      box-shadow: 0 0 28px rgba(6,182,212,.15);
+      background: rgba(6,182,212,.04);
+    }
+    .drop-zone.has-file {
+      border-color: var(--purple);
+      box-shadow: 0 0 28px rgba(124,58,237,.15);
+      background: rgba(124,58,237,.04);
+    }
+    .upload-icon { font-size: 2.4rem; display: block; margin-bottom: 12px;
+                   transition: transform .2s; }
+    .drop-zone:hover .upload-icon { transform: translateY(-4px); }
+    .drop-title { font-weight: 600; font-size: 1rem; margin-bottom: 4px; }
+    .drop-hint { color: var(--muted); font-size: .85rem; margin-bottom: 16px; }
+    .file-name {
+      margin-top: 12px; font-size: .9rem; font-weight: 600;
+      color: var(--purple-l);
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+      max-width: 280px; margin-inline: auto;
+    }
+
+    /* ── Buttons ──────────────────────────────────────────────────────────── */
+    button { cursor: pointer; font-family: inherit; font-size: .95rem;
+             border: none; outline: none; transition: all .2s; }
+
+    .btn-primary {
+      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+      padding: 12px 28px; border-radius: 50px; font-weight: 700;
+      background: linear-gradient(135deg, var(--purple) 0%, var(--cyan) 100%);
+      color: #fff;
+      box-shadow: 0 4px 20px rgba(124,58,237,.35);
+    }
+    .btn-primary:hover:not(:disabled) {
+      transform: translateY(-1px) scale(1.02);
+      box-shadow: 0 6px 28px rgba(124,58,237,.5);
+    }
+    .btn-primary:active:not(:disabled) { transform: scale(.98); }
+    .btn-primary:disabled { opacity: .4; cursor: not-allowed; }
+
+    .btn-ghost {
+      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+      padding: 10px 22px; border-radius: 50px; font-weight: 600;
+      background: transparent; color: var(--muted);
+      border: 1px solid var(--border);
+    }
+    .btn-ghost:hover:not(:disabled) {
+      background: var(--surface-2); color: var(--text);
+      border-color: rgba(255,255,255,.2);
+    }
+    .btn-ghost:disabled { opacity: .35; cursor: not-allowed; }
+
+    .btn-browse {
+      display: inline-block;
+      padding: 9px 22px; border-radius: 50px; font-weight: 600; font-size: .9rem;
+      border: 1px solid rgba(124,58,237,.5); color: var(--purple-l);
+      background: rgba(124,58,237,.08);
+      cursor: pointer; transition: all .2s;
+    }
+    .btn-browse:hover {
+      background: rgba(124,58,237,.18); border-color: var(--purple);
+    }
+
+    /* ── Pill toggles ─────────────────────────────────────────────────────── */
+    .toggle-group { display: flex; gap: 6px; }
+
+    .pill {
+      padding: 6px 16px; border-radius: 50px; font-size: .82rem; font-weight: 600;
+      border: 1px solid var(--border); color: var(--muted);
+      background: transparent; transition: all .18s;
+    }
+    .pill:hover { background: var(--surface-2); color: var(--text); border-color: rgba(255,255,255,.2); }
+    .pill.active {
+      background: linear-gradient(135deg, var(--purple), var(--cyan));
+      border-color: transparent; color: #fff;
+      box-shadow: 0 2px 12px rgba(124,58,237,.4);
+    }
+
+    /* ── Status / alerts ──────────────────────────────────────────────────── */
+    .status {
+      margin-top: 14px; padding: 11px 16px; border-radius: var(--r-sm);
+      font-size: .9rem; font-weight: 500; line-height: 1.4;
+      animation: fadeUp .3s ease both;
+    }
+    .status.info  { background: rgba(6,182,212,.12);  border: 1px solid rgba(6,182,212,.3);  color: var(--cyan-l); }
+    .status.ok    { background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); color: #6EE7B7; }
+    .status.error { background: rgba(239,68,68,.12);  border: 1px solid rgba(239,68,68,.3);  color: #FCA5A5; }
+
+    /* ── Upload actions row ───────────────────────────────────────────────── */
+    .upload-actions { margin-top: 20px; display: flex; justify-content: center; }
+
+    /* ── Quiz controls row ───────────────────────────────────────────────── */
+    .controls-row {
+      display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
+      margin-bottom: 24px;
+    }
+    .controls-row .toggle-group:last-of-type { margin-right: auto; }
+    .diff-label { font-size: .75rem; color: var(--dim); font-weight: 500;
+                  letter-spacing: .04em; margin-bottom: 4px; }
+
+    /* ── Score ring ───────────────────────────────────────────────────────── */
+    .score-wrap { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
+    .score-ring { width: 56px; height: 56px; }
+    .score-label {
+      position: absolute; inset: 0;
+      display: flex; align-items: center; justify-content: center;
+      font-size: .72rem; font-weight: 700; color: var(--text);
+      letter-spacing: -.5px;
+    }
+    #score-arc { transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1); }
+
+    /* ── Question card ────────────────────────────────────────────────────── */
+    .q-label {
+      font-size: .72rem; font-weight: 700; letter-spacing: .1em;
+      text-transform: uppercase; color: var(--purple-l); margin-bottom: 10px;
+    }
+    .q-text {
+      font-size: 1.1rem; font-weight: 600; line-height: 1.55;
+      color: var(--text); min-height: 3.2em;
+    }
+    .q-inner {
+      background: rgba(124,58,237,.07); border: 1px solid rgba(124,58,237,.2);
+      border-radius: var(--r-sm); padding: 18px 20px; margin-bottom: 20px;
+    }
+
+    /* ── Answer area ──────────────────────────────────────────────────────── */
+    .answer-header {
+      display: flex; justify-content: space-between; align-items: center;
+      margin-bottom: 8px;
+    }
+    .answer-header label { font-size: .85rem; font-weight: 600; color: var(--muted); }
+    .char-count { font-size: .78rem; color: var(--dim); font-variant-numeric: tabular-nums; }
+
+    textarea.answer-input {
+      width: 100%; resize: vertical; min-height: 110px;
+      background: rgba(255,255,255,.04); border: 1px solid var(--border);
+      border-radius: var(--r-sm); padding: 14px 16px;
+      color: var(--text); font-family: inherit; font-size: .95rem; line-height: 1.5;
+      outline: none; transition: border-color .2s, box-shadow .2s;
+    }
+    textarea.answer-input:focus {
+      border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124,58,237,.15);
+    }
+    textarea.answer-input::placeholder { color: var(--dim); }
+
+    .answer-actions {
+      display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px;
+      flex-wrap: wrap;
+    }
+
+    /* ── No question prompt ───────────────────────────────────────────────── */
+    .empty-state {
+      text-align: center; padding: 32px 0;
+      color: var(--muted); font-size: .95rem;
+    }
+    .empty-state p { margin-bottom: 18px; }
+
+    /* ── End session button ───────────────────────────────────────────────── */
+    .end-row { margin-top: 20px; display: flex; justify-content: center; }
+
+    /* ── Spinner ──────────────────────────────────────────────────────────── */
+    .spinner {
+      width: 16px; height: 16px; border-radius: 50%;
+      border: 2px solid rgba(255,255,255,.25);
+      border-top-color: #fff;
+      animation: spin .65s linear infinite;
+      display: inline-block; flex-shrink: 0;
+    }
+
+    /* ── Feedback card ────────────────────────────────────────────────────── */
+    .feedback-header {
+      display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
+    }
+    .verdict-badge {
+      padding: 6px 18px; border-radius: 50px;
+      font-size: .82rem; font-weight: 800; letter-spacing: .05em;
+      text-transform: uppercase; flex-shrink: 0;
+      animation: popIn .35s cubic-bezier(.34,1.56,.64,1) both;
+    }
+    .verdict-badge.correct   { background: rgba(16,185,129,.18); border: 1px solid var(--green);  color: #6EE7B7; }
+    .verdict-badge.partial   { background: rgba(245,158,11,.18); border: 1px solid var(--amber);  color: #FCD34D; }
+    .verdict-badge.incorrect { background: rgba(239,68,68,.18);  border: 1px solid var(--red);    color: #FCA5A5; }
+
+    .feedback-body {
+      font-size: .95rem; line-height: 1.7; color: var(--text);
+    }
+    .feedback-body .section { margin-bottom: 12px; }
+    .feedback-body .section-num {
+      font-size: .75rem; font-weight: 700; letter-spacing: .08em;
+      text-transform: uppercase; color: var(--muted); display: block;
+      margin-bottom: 4px;
+    }
+    .feedback-body .section-content { color: var(--text); }
+    .feedback-raw { white-space: pre-wrap; }
+
+    /* ── Collapsible source ───────────────────────────────────────────────── */
+    details.source-details { margin-top: 18px; }
+    details.source-details summary {
+      cursor: pointer; color: var(--dim); font-size: .82rem; font-weight: 600;
+      letter-spacing: .03em; list-style: none; user-select: none;
+      transition: color .2s;
+    }
+    details.source-details summary::before { content: '▶ '; font-size: .7em; }
+    details.source-details[open] summary::before { content: '▼ '; }
+    details.source-details summary:hover { color: var(--muted); }
+    .source-text {
+      margin-top: 10px; padding: 14px 16px;
+      background: rgba(255,255,255,.03); border: 1px solid var(--border);
+      border-radius: var(--r-sm);
+      font-size: .82rem; line-height: 1.6; color: var(--muted);
+      max-height: 180px; overflow-y: auto;
+    }
+
+    /* ── Modal ────────────────────────────────────────────────────────────── */
+    .modal-overlay {
+      position: fixed; inset: 0; z-index: 100;
+      background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
+      display: flex; align-items: center; justify-content: center;
+      padding: 20px;
+      animation: fadeIn .2s ease both;
+    }
+    .modal-card {
+      background: rgba(15,20,40,.95); border: 1px solid rgba(124,58,237,.3);
+      border-radius: 24px; padding: 40px 36px;
+      max-width: 420px; width: 100%; text-align: center;
+      box-shadow: 0 0 60px rgba(124,58,237,.25), 0 20px 60px rgba(0,0,0,.6);
+      animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both;
+    }
+    .modal-icon { font-size: 3.5rem; display: block; margin-bottom: 16px;
+                  filter: drop-shadow(0 0 12px rgba(124,58,237,.5)); }
+    .modal-title { font-size: 1.7rem; font-weight: 800; margin-bottom: 20px;
+                   background: linear-gradient(135deg, var(--purple-l), var(--cyan-l));
+                   -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+                   background-clip: text; }
+    .modal-score-big {
+      font-size: 3.5rem; font-weight: 900; line-height: 1;
+      background: linear-gradient(135deg, var(--purple-l), var(--cyan-l));
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+      background-clip: text; margin-bottom: 8px;
+    }
+    .modal-score-label { color: var(--muted); font-size: .9rem; margin-bottom: 20px; }
+    .modal-message { color: var(--muted); font-size: .95rem; line-height: 1.5;
+                     margin-bottom: 28px; }
+    .modal-history { text-align: left; margin-bottom: 24px; }
+    .modal-history-item {
+      display: flex; align-items: flex-start; gap: 10px;
+      padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .85rem;
+    }
+    .modal-history-item:last-child { border-bottom: none; }
+    .hist-badge {
+      flex-shrink: 0; padding: 2px 10px; border-radius: 50px; font-size: .72rem;
+      font-weight: 700; text-transform: uppercase;
+    }
+    .hist-badge.correct   { background: rgba(16,185,129,.2);  color: #6EE7B7; }
+    .hist-badge.partial   { background: rgba(245,158,11,.2);  color: #FCD34D; }
+    .hist-badge.incorrect { background: rgba(239,68,68,.2);   color: #FCA5A5; }
+    .hist-q { color: var(--muted); flex: 1; }
+
+    /* ── Loading overlay (inside card) ───────────────────────────────────── */
+    .loading-msg {
+      display: flex; align-items: center; justify-content: center; gap: 10px;
+      padding: 14px; color: var(--muted); font-size: .9rem;
+    }
+
+    /* ── Animations ───────────────────────────────────────────────────────── */
+    @keyframes fadeUp   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
+    @keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
+    @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; } }
+
+    .hidden { display: none !important; }
+    .fade-in-up { animation: fadeUp .4s ease both; }
+
+    /* ── Responsive ───────────────────────────────────────────────────────── */
+    @media (max-width: 520px) {
+      #app { padding: 20px 14px 60px; }
+      .card { padding: 20px 18px; }
+      .hero { padding: 32px 12px 24px; }
+      .hero-title { font-size: 2.4rem; }
+      .controls-row { gap: 8px; }
+      .answer-actions { flex-direction: column; }
+      .answer-actions button { width: 100%; justify-content: center; }
+    }
+  </style>
+</head>
+<body>
+  <canvas id="particles"></canvas>
+
+  <div id="app">
+    <!-- Hero -->
+    <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>
+    </header>
+
+    <!-- ── Upload card ──────────────────────────────────────────────────── -->
+    <div class="card fade-in-up" id="upload-card" style="animation-delay:.05s">
+      <div class="drop-zone" id="drop-zone">
+        <span class="upload-icon" id="upload-icon">📎</span>
+        <p class="drop-title" id="drop-title">Drop your PDF here</p>
+        <p class="drop-hint">or</p>
+        <label class="btn-browse" for="file-input">Browse files</label>
+        <input type="file" id="file-input" accept=".pdf" style="display:none">
+        <p class="file-name hidden" id="file-name"></p>
+      </div>
+      <div class="upload-actions">
+        <button class="btn-primary" id="load-btn" disabled>
+          <span id="load-btn-text">Load PDF</span>
+          <span class="spinner hidden" id="load-spinner"></span>
+        </button>
+      </div>
+      <div class="status hidden" id="status-msg"></div>
+    </div>
+
+    <!-- ── Quiz card ────────────────────────────────────────────────────── -->
+    <div class="card hidden fade-in-up" id="quiz-card" style="animation-delay:.1s">
+
+      <!-- Controls row -->
+      <div class="controls-row">
+        <!-- Language toggle -->
+        <div>
+          <div class="diff-label">Language</div>
+          <div class="toggle-group" id="lang-toggle">
+            <button class="pill active" data-val="English">EN</button>
+            <button class="pill"        data-val="Français">FR</button>
+          </div>
+        </div>
+
+        <!-- Difficulty toggle -->
+        <div>
+          <div class="diff-label">Difficulty</div>
+          <div class="toggle-group" id="diff-toggle">
+            <button class="pill"        data-val="Easy">Easy</button>
+            <button class="pill active" data-val="Normal">Normal</button>
+            <button class="pill"        data-val="Hard">Hard</button>
+          </div>
+        </div>
+
+        <!-- Score ring -->
+        <div class="score-wrap" style="margin-left:auto" title="Score">
+          <svg class="score-ring" viewBox="0 0 56 56">
+            <circle cx="28" cy="28" r="22" fill="none"
+              stroke="rgba(255,255,255,0.08)" stroke-width="4"/>
+            <circle id="score-arc" cx="28" cy="28" r="22" fill="none"
+              stroke="url(#scoreGrad)" stroke-width="4" stroke-linecap="round"
+              stroke-dasharray="138.2" stroke-dashoffset="138.2"
+              transform="rotate(-90 28 28)"/>
+            <defs>
+              <linearGradient id="scoreGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stop-color="#7C3AED"/>
+                <stop offset="100%" stop-color="#06B6D4"/>
+              </linearGradient>
+            </defs>
+          </svg>
+          <div class="score-label" id="score-label">—</div>
+        </div>
+      </div>
+
+      <!-- Empty state (before first question) -->
+      <div class="empty-state" id="empty-state">
+        <p>Ready! Click to generate your first question.</p>
+        <button class="btn-primary" id="start-btn">
+          New Question
+        </button>
+      </div>
+
+      <!-- Question + answer (shown after first question) -->
+      <div class="hidden" id="question-area">
+        <div class="q-inner">
+          <div class="q-label">Question</div>
+          <p class="q-text" id="q-text"></p>
+          <div class="loading-msg hidden" id="q-loading">
+            <span class="spinner"></span>
+            <span id="q-loading-msg">Generating question…</span>
+          </div>
+        </div>
+
+        <div class="answer-header">
+          <label for="answer-input">Your Answer</label>
+          <span class="char-count" id="char-count">0 chars</span>
+        </div>
+        <textarea class="answer-input" id="answer-input"
+          placeholder="Type your answer here…" rows="4"></textarea>
+        <div class="answer-actions">
+          <button class="btn-ghost" id="new-q-btn">↺ New Question</button>
+          <button class="btn-primary" id="submit-btn" disabled>
+            <span id="submit-btn-text">Submit Answer</span>
+            <span class="spinner hidden" id="submit-spinner"></span>
+          </button>
+        </div>
+      </div>
+
+      <div class="end-row">
+        <button class="btn-ghost hidden" id="end-btn" style="font-size:.82rem;padding:7px 18px">
+          End Session
+        </button>
+      </div>
+    </div>
+
+    <!-- ── Feedback card ─────────────────────────────────────────────────── -->
+    <div class="card hidden" id="feedback-card">
+      <div class="feedback-header">
+        <div class="verdict-badge" id="verdict-badge"></div>
+        <span style="font-size:.85rem;color:var(--muted);font-weight:600">Feedback</span>
+      </div>
+      <div class="feedback-body" id="feedback-body"></div>
+      <details class="source-details" id="source-details">
+        <summary>View source passage</summary>
+        <p class="source-text" id="source-text"></p>
+      </details>
+    </div>
+  </div>
+
+  <!-- ── Session modal ───────────────────────────────────────────────────── -->
+  <div class="modal-overlay hidden" id="modal">
+    <div class="modal-card">
+      <span class="modal-icon">🎓</span>
+      <h2 class="modal-title">Session Complete</h2>
+      <div class="modal-score-big" id="modal-score-big">—</div>
+      <div class="modal-score-label" id="modal-score-label">questions answered</div>
+      <p class="modal-message" id="modal-message"></p>
+      <div class="modal-history hidden" id="modal-history"></div>
+      <button class="btn-primary" id="modal-close" style="width:100%;justify-content:center">
+        Study Again
+      </button>
+    </div>
+  </div>
+
+  <script>
+  // ───────────────────────────────────────────────────────────────────────────
+  // State
+  // ───────────────────────────────────────────────────────────────────────────
+  const S = {
+    chunks: [],
+    currentChunk: '',
+    currentQuestion: '',
+    correct: 0,
+    total: 0,
+    language: 'English',
+    difficulty: 'Normal',
+    history: [],   // [{question, verdict}]
+    loaded: false,
+    selectedFile: null,
+  };
+
+  // ───────────────────────────────────────────────────────────────────────────
+  // DOM refs
+  // ───────────────────────────────────────────────────────────────────────────
+  const $ = id => document.getElementById(id);
+
+  const dropZone     = $('drop-zone');
+  const fileInput    = $('file-input');
+  const fileNameEl   = $('file-name');
+  const dropTitle    = $('drop-title');
+  const uploadIcon   = $('upload-icon');
+  const loadBtn      = $('load-btn');
+  const loadBtnText  = $('load-btn-text');
+  const loadSpinner  = $('load-spinner');
+  const statusEl     = $('status-msg');
+
+  const quizCard     = $('quiz-card');
+  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 apiLoad(file) {
+    const fd = new FormData();
+    fd.append('file', file);
+    const r = await fetch('/api/load', { method: 'POST', body: fd });
+    const d = await r.json();
+    if (!r.ok) throw new Error(d.detail || 'Failed to load PDF');
+    return d;
+  }
+
+  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 setStatus(msg, type = 'info') {
+    statusEl.textContent = msg;
+    statusEl.className = `status ${type}`;
+    statusEl.classList.remove('hidden');
+  }
+  function clearStatus() { statusEl.classList.add('hidden'); }
+
+  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);
+    // colour: green when >70%, amber when >40%, red otherwise
+    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';
+      }
+    }
+    // fallback: scan first 200 chars
+    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) {
+    // Try to split into numbered sections, fallback to raw text
+    const sectionRe = /^(\d+)\.\s*(.*?)(?=\n\d+\.|$)/gms;
+    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 {
+      // Plain fallback
+      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];
+
+    // History list (last 8 items)
+    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');
+  }
+
+  // ───────────────────────────────────────────────────────────────────────────
+  // File handling
+  // ───────────────────────────────────────────────────────────────────────────
+  function handleFile(file) {
+    if (!file || !file.name.toLowerCase().endsWith('.pdf')) {
+      setStatus('Please select a PDF file.', 'error');
+      return;
+    }
+    S.selectedFile = file;
+    fileNameEl.textContent = '📄 ' + file.name;
+    fileNameEl.classList.remove('hidden');
+    dropTitle.textContent = 'PDF selected';
+    uploadIcon.textContent = '✅';
+    dropZone.classList.add('has-file');
+    loadBtn.disabled = false;
+    clearStatus();
+  }
+
+  dropZone.addEventListener('dragover', e => {
+    e.preventDefault();
+    dropZone.classList.add('drag-over');
+  });
+  dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
+  dropZone.addEventListener('drop', e => {
+    e.preventDefault();
+    dropZone.classList.remove('drag-over');
+    const file = e.dataTransfer.files[0];
+    if (file) { fileInput.files = e.dataTransfer.files; handleFile(file); }
+  });
+  dropZone.addEventListener('click', () => fileInput.click());
+  fileInput.addEventListener('change', () => {
+    if (fileInput.files[0]) handleFile(fileInput.files[0]);
+  });
+
+  // ───────────────────────────────────────────────────────────────────────────
+  // Load PDF
+  // ───────────────────────────────────────────────────────────────────────────
+  loadBtn.addEventListener('click', async () => {
+    if (!S.selectedFile) return;
+    setLoadingBtn(loadBtn, loadBtnText, loadSpinner, true, 'Loading…');
+    setStatus('Parsing PDF…', 'info');
+    try {
+      const data = await apiLoad(S.selectedFile);
+      S.chunks = data.chunks;
+      S.loaded = true;
+      S.correct = 0; S.total = 0; S.history = [];
+      updateScore();
+      setStatus(`✓ ${data.count} sections extracted — ready to quiz!`, 'ok');
+      quizCard.classList.remove('hidden');
+      quizCard.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    } catch (err) {
+      setStatus(err.message, 'error');
+    } finally {
+      setLoadingBtn(loadBtn, loadBtnText, loadSpinner, false, 'Load PDF');
+    }
+  });
+
+  // ───────────────────────────────────────────────────────────────────────────
+  // 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;
+
+    // Switch from empty state to question area on first use
+    if (emptyState && !emptyState.classList.contains('hidden')) {
+      emptyState.classList.add('hidden');
+      questionArea.classList.remove('hidden');
+      endBtn.classList.remove('hidden');
+    }
+
+    // Show loading inside question box
+    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');
+    // Reset session
+    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;
+
+        // Connections
+        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();
+          }
+        }
+
+        // Dot
+        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>
+</body>
+</html>