feat: hybrid approach native Gradio file upload styled with custom CSS

app.py

@@ -40,10 +40,43 @@ body {
     background: #0A0F1E !important;
     margin: 0 !important;
 }
-/* Hide all visible Gradio components - only show our custom HTML */
-.gr-file, .gr-textbox, .gr-button, .gr-radio {
-    display: none !important;
+/* Style native Gradio file upload to match dark theme */
+[data-testid="upload-zone"],
+.file-drop-zone,
+.upload-container {
+    background: rgba(124,58,237,0.05) !important;
+    border: 2px dashed rgba(124,58,237,0.35) !important;
+    border-radius: 10px !important;
+    min-height: 120px !important;
+    color: rgba(255,255,255,0.6) !important;
 }
+[data-testid="upload-zone"]:hover,
+.file-drop-zone:hover {
+    border-color: #06B6D4 !important;
+    background: rgba(6,182,212,0.04) !important;
+    box-shadow: 0 0 28px rgba(6,182,212,0.15) !important;
+}
+/* Style Load PDF button */
+#hidden-load-btn button {
+    background: linear-gradient(135deg, #7C3AED, #06B6D4) !important;
+    border-radius: 50px !important;
+    color: white !important;
+    font-weight: 700 !important;
+    border: none !important;
+    box-shadow: 0 4px 20px rgba(124,58,237,0.35) !important;
+    padding: 12px 28px !important;
+}
+#hidden-load-btn button:hover {
+    box-shadow: 0 6px 28px rgba(124,58,237,0.5) !important;
+}
+/* File preview area */
+.file-preview-holder, .file-name-wrapper {
+    color: #A78BFA !important;
+    background: rgba(124,58,237,0.07) !important;
+    border-radius: 8px !important;
+}
+/* Labels */
+.block label span { color: rgba(255,255,255,0.6) !important; }
 """
 
 import pathlib
@@ -313,8 +346,8 @@ document.addEventListener('DOMContentLoaded', function() {
     total_state   = gr.State(0)
 
     with gr.Row():
-        pdf_input         = gr.File(label="📎 Cours PDF", file_types=[".pdf"], scale=3, visible=False)
-        load_btn          = gr.Button("Load PDF", variant="primary", scale=2, visible=False, elem_id="hidden-load-btn")
+        pdf_input         = gr.File(label="📎 Cours PDF", file_types=[".pdf"], scale=3)
+        load_btn          = gr.Button("Load PDF", variant="primary", scale=2, elem_id="hidden-load-btn")
         language_selector = gr.Radio(["English", "Français"], value="English", label="🌐 Language", visible=False)
 
     with gr.Row():

ui/index.html

@@ -94,38 +94,6 @@
     }
     .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; }
@@ -156,17 +124,6 @@
     }
     .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; }
 
@@ -182,19 +139,6 @@
       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;
@@ -401,25 +345,6 @@
       <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">
 
@@ -546,9 +471,8 @@
     total: 0,
     language: 'English',
     difficulty: 'Normal',
-    history: [],   // [{question, verdict}]
+    history: [],
     loaded: false,
-    selectedFile: null,
   };
 
   // ───────────────────────────────────────────────────────────────────────────
@@ -556,16 +480,6 @@
   // ───────────────────────────────────────────────────────────────────────────
   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');
@@ -598,15 +512,6 @@
   // ───────────────────────────────────────────────────────────────────────────
   // 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',
@@ -632,13 +537,6 @@
   // ───────────────────────────────────────────────────────────────────────────
   // 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;
@@ -651,7 +549,6 @@
     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)'
@@ -668,7 +565,6 @@
         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';
@@ -676,8 +572,6 @@
   }
 
   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;
@@ -697,7 +591,6 @@
         </div>`;
       }).join('');
     } else {
-      // Plain fallback
       feedbackBody.innerHTML = `<div class="feedback-raw">${
         text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
       }</div>`;
@@ -708,9 +601,9 @@
     const verdict = extractVerdict(text);
     verdictBadge.className = `verdict-badge ${verdict === 'unknown' ? '' : verdict}`;
     const labels = {
-      correct:   S.language === 'Français' ? '✓ Correct'             : '✓ Correct',
+      correct:   S.language === 'Français' ? '✓ Correct'              : '✓ Correct',
       partial:   S.language === 'Français' ? '~ Partiellement correct' : '~ Partially Correct',
-      incorrect: S.language === 'Français' ? '✗ Incorrect'            : '✗ Incorrect',
+      incorrect: S.language === 'Français' ? '✗ Incorrect'             : '✗ Incorrect',
       unknown:   '— Unknown',
     };
     verdictBadge.textContent = labels[verdict] || labels.unknown;
@@ -737,7 +630,6 @@
       : ["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');
@@ -756,63 +648,6 @@
     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
   // ───────────────────────────────────────────────────────────────────────────
@@ -835,14 +670,12 @@
   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
@@ -924,7 +757,6 @@
 
   modalClose.addEventListener('click', () => {
     modal.classList.add('hidden');
-    // Reset session
     S.correct = 0; S.total = 0; S.history = [];
     S.currentQuestion = ''; S.currentChunk = '';
     updateScore();
@@ -982,7 +814,6 @@
         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;
@@ -997,7 +828,6 @@
           }
         }
 
-        // 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';