fix: hero visible, polling replaces MutationObserver for Svelte compat

app.py

@@ -24,7 +24,9 @@ except Exception as e:
 CSS = """
 /* ── Base ──────────────────────────────────────────────────────────────────── */
 footer { display: none !important; }
-header { display: none !important; }
+/* Only hide Gradio's own header chrome — NOT our custom <header class="hero"> */
+.gradio-container > header,
+.app > header { display: none !important; }
 * { box-sizing: border-box; }
 body { background: #0A0F1E !important; margin: 0 !important; }
 
@@ -41,14 +43,19 @@ body { background: #0A0F1E !important; margin: 0 !important; }
 .contain { padding: 0 !important; }
 #component-0 { padding: 0 !important; }
 
-/* ── Centre upload row, stack components vertically ────────────────────────── */
+/* ── Upload row: centred column, card look ──────────────────────────────────── */
 #upload-row {
     max-width: 760px !important;
-    margin-left: auto !important;
-    margin-right: auto !important;
-    padding: 0 20px !important;
+    margin: 0 auto !important;
+    padding: 20px !important;
     flex-direction: column !important;
     gap: 12px !important;
+    background: rgba(10,15,30,0.65) !important;
+    border: 1px solid rgba(255,255,255,0.08) !important;
+    border-radius: 18px !important;
+    backdrop-filter: blur(24px) !important;
+    -webkit-backdrop-filter: blur(24px) !important;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.45) !important;
 }
 
 /* ── Completely hide the thin-line rows (DOM still present for JS) ───────────── */
@@ -141,8 +148,11 @@ body { background: #0A0F1E !important; margin: 0 !important; }
     pointer-events: none !important;
 }
 
-/* ── feedback_box is standalone (not in a row) — hide it off-screen ────────── */
-#hidden-feedback-output {
+/* ── Standalone hidden components (no row wrapper) ──────────────────────────── */
+#hidden-feedback-output,
+#hidden-answer-input,
+#hidden-submit-btn,
+#hidden-question-btn {
     position: fixed !important;
     top: -9999px !important;
     left: -9999px !important;
@@ -298,35 +308,23 @@ with gr.Blocks(title="PaperProf", css=CSS) as demo:
 
     gr.HTML("""
 <script>
-document.addEventListener('DOMContentLoaded', function() {
-
+(function() {
     let lastStatus = '';
+    let quizRevealed = false;
 
-    // Inject status bar before quiz-card
     function ensureStatusBar() {
         if (document.getElementById('gradio-status-bar')) return;
-        const quizCard = document.getElementById('quiz-card');
-        if (!quizCard) return;
+        const anchor = document.getElementById('quiz-card') || document.getElementById('app');
+        if (!anchor) return;
         const bar = document.createElement('div');
         bar.id = 'gradio-status-bar';
-        bar.style.cssText = [
-            'display:none',
-            'max-width:760px',
-            'margin:0 auto',
-            'padding:12px 20px',
-            'border-radius:10px',
-            'font-size:.9rem',
-            'font-weight:500',
-            'font-family:Inter,system-ui,sans-serif',
-            'transition:all .3s ease',
-        ].join(';');
-        quizCard.parentNode.insertBefore(bar, quizCard);
+        bar.style.cssText = 'display:none;max-width:760px;margin:8px auto 0;padding:12px 20px;border-radius:10px;font-size:.9rem;font-weight:500;font-family:Inter,system-ui,sans-serif;transition:all .3s ease;';
+        anchor.parentNode.insertBefore(bar, anchor);
     }
 
     function applyStatus(text) {
         if (text === lastStatus) return;
         lastStatus = text;
-
         ensureStatusBar();
         const bar = document.getElementById('gradio-status-bar');
         if (!bar) return;
@@ -339,44 +337,43 @@ document.addEventListener('DOMContentLoaded', function() {
 
         if (isError) {
             bar.style.background = 'rgba(239,68,68,0.12)';
-            bar.style.border     = '1px solid rgba(239,68,68,0.3)';
-            bar.style.color      = '#FCA5A5';
+            bar.style.border = '1px solid rgba(239,68,68,0.3)';
+            bar.style.color = '#FCA5A5';
         } else if (isSuccess) {
             bar.style.background = 'rgba(16,185,129,0.12)';
-            bar.style.border     = '1px solid rgba(16,185,129,0.3)';
-            bar.style.color      = '#6EE7B7';
-
-            // Reveal quiz card
-            const quizCard = document.getElementById('quiz-card');
-            if (quizCard) {
-                quizCard.classList.remove('hidden');
-                setTimeout(() => quizCard.scrollIntoView({ behavior: 'smooth', block: 'start' }), 300);
-            }
-
-            // Recede upload area — find the Gradio row that holds pdf_input + load_btn
-            const gradioMain = document.querySelector('.gradio-container .main');
-            if (gradioMain) {
-                const rows = gradioMain.querySelectorAll(':scope > .flex > *, :scope > .gap > *');
-                rows.forEach(row => {
-                    if (row.querySelector('[data-testid="upload-zone"], .file-drop-zone, #hidden-load-btn')) {
-                        row.classList.add('upload-receded');
-                    }
-                });
+            bar.style.border = '1px solid rgba(16,185,129,0.3)';
+            bar.style.color = '#6EE7B7';
+
+            if (!quizRevealed) {
+                quizRevealed = true;
+                const quizCard = document.getElementById('quiz-card');
+                if (quizCard) {
+                    quizCard.classList.remove('hidden');
+                    setTimeout(() => quizCard.scrollIntoView({ behavior: 'smooth', block: 'start' }), 400);
+                }
+                // Recede upload row
+                const uploadRow = document.getElementById('upload-row');
+                if (uploadRow) {
+                    uploadRow.style.opacity = '0.5';
+                    uploadRow.style.transform = 'scale(0.97)';
+                    uploadRow.style.transition = 'all .4s ease';
+                    uploadRow.style.pointerEvents = 'none';
+                }
             }
         } else {
             bar.style.background = 'rgba(6,182,212,0.12)';
-            bar.style.border     = '1px solid rgba(6,182,212,0.3)';
-            bar.style.color      = '#67E8F9';
+            bar.style.border = '1px solid rgba(6,182,212,0.3)';
+            bar.style.color = '#67E8F9';
         }
     }
 
-    const observer = new MutationObserver(() => {
-        const statusEl = document.querySelector('#hidden-status-output textarea');
-        if (statusEl && statusEl.value) applyStatus(statusEl.value);
-    });
-
-    observer.observe(document.body, { childList: true, subtree: true, characterData: true });
-});
+    // Poll every 300ms — Svelte updates textarea.value as a property,
+    // which MutationObserver characterData does NOT catch.
+    setInterval(function() {
+        const el = document.querySelector('#hidden-status-output textarea');
+        if (el && el.value) applyStatus(el.value);
+    }, 300);
+})();
 </script>
 """)