Update app.py

app.py

@@ -1693,25 +1693,25 @@ def create_demo():
     )
 
     css = """
-    /* Animated Background Styling */
+    /* ── Animated Background ── */
     @keyframes gradientBG {
         0% { background-position: 0% 50%; }
         50% { background-position: 100% 50%; }
         100% { background-position: 0% 50%; }
     }
-    
+
     body, .gradio-container {
         background: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #1a2a6c, #112240) !important;
         background-size: 400% 400% !important;
         animation: gradientBG 15s ease infinite !important;
         background-attachment: fixed !important;
-        color: #f8fafc !important;
+        color: #e2e8f0 !important;
         font-family: 'Outfit', sans-serif !important;
     }
-    
-    /* Advanced Glassmorphism Panels */
-    .gradio-container .form, 
-    .gradio-container .panel, 
+
+    /* ── Glassmorphism Panels ── */
+    .gradio-container .form,
+    .gradio-container .panel,
     .gradio-container .box {
         background: rgba(15, 23, 42, 0.4) !important;
         backdrop-filter: blur(20px) !important;
@@ -1721,7 +1721,26 @@ def create_demo():
         box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
     }
 
-    /* Headings */
+    /* ── GLOBAL TEXT OVERRIDES (Dark Theme) ── */
+    /* Force ALL text to be light on dark background */
+    .gradio-container label,
+    .gradio-container .label-wrap,
+    .gradio-container .label-wrap span,
+    .gradio-container span,
+    .gradio-container p,
+    .gradio-container h2,
+    .gradio-container h3,
+    .gradio-container h4,
+    .gradio-container h5,
+    .gradio-container h6,
+    .gradio-container .prose,
+    .gradio-container .prose *,
+    .gradio-container .block label span,
+    .gradio-container .block .label-wrap span {
+        color: #e2e8f0 !important;
+    }
+
+    /* ── Headings ── */
     h1 {
         text-align: center;
         background: linear-gradient(to right, #c084fc, #60a5fa);
@@ -1733,8 +1752,112 @@ def create_demo():
         text-shadow: 0px 4px 30px rgba(192, 132, 252, 0.3);
         letter-spacing: -1px;
     }
-    
-    /* Buttons */
+    /* Restore emoji visibility inside gradient headings */
+    h1 .emoji {
+        -webkit-text-fill-color: initial;
+        font-style: normal;
+    }
+
+    /* ── TAB LABELS (critical fix) ── */
+    .gradio-container .tabs .tab-nav button {
+        color: #94a3b8 !important;
+        font-weight: 600 !important;
+        font-size: 14px !important;
+        padding: 10px 16px !important;
+        background: transparent !important;
+        border: none !important;
+        border-bottom: 2px solid transparent !important;
+        transition: all 0.25s ease !important;
+    }
+    .gradio-container .tabs .tab-nav button.selected,
+    .gradio-container .tabs .tab-nav button[aria-selected="true"] {
+        color: #c084fc !important;
+        border-bottom-color: #8b5cf6 !important;
+        background: rgba(139, 92, 246, 0.1) !important;
+    }
+    .gradio-container .tabs .tab-nav button:hover {
+        color: #e2e8f0 !important;
+        background: rgba(255, 255, 255, 0.05) !important;
+    }
+
+    /* ── SLIDER / RANGE LABELS ── */
+    .gradio-container input[type="range"] + .rangeSlider,
+    .gradio-container .range-slider,
+    .gradio-container input[type="number"] {
+        color: #e2e8f0 !important;
+    }
+    /* Slider min/max number labels */
+    .gradio-container .wrap.default span,
+    .gradio-container .head span,
+    .gradio-container .range_slider span {
+        color: #94a3b8 !important;
+    }
+
+    /* ── ACCORDION HEADERS ── */
+    .gradio-container .accordion > button,
+    .gradio-container .accordion > .label-wrap,
+    .gradio-container details > summary,
+    .gradio-container details > summary span {
+        color: #e2e8f0 !important;
+        font-weight: 600 !important;
+    }
+
+    /* ── MARKDOWN / PROSE ── */
+    .gradio-container .md,
+    .gradio-container .md p,
+    .gradio-container .md li,
+    .gradio-container .md strong,
+    .gradio-container .md em,
+    .gradio-container .md h3,
+    .gradio-container .md h2 {
+        color: #cbd5e1 !important;
+    }
+    .gradio-container .md strong {
+        color: #f1f5f9 !important;
+    }
+    .gradio-container .md a {
+        color: #60a5fa !important;
+    }
+    /* Subheading markdown like "### ⚙️ Customization Settings" */
+    .gradio-container .prose h3,
+    .gradio-container h3 {
+        color: #c084fc !important;
+        font-weight: 700 !important;
+        font-size: 1.05em !important;
+    }
+
+    /* ── HINT TEXT (small italic helpers) ── */
+    .hint-text, .hint-text p, .hint-text * {
+        color: #64748b !important;
+        font-size: 13px !important;
+    }
+
+    /* ── FILE UPLOAD ── */
+    .gradio-container .file-upload,
+    .gradio-container .upload-button,
+    .gradio-container .file-preview {
+        background: rgba(0, 0, 0, 0.2) !important;
+        border: 1px dashed rgba(255, 255, 255, 0.15) !important;
+        color: #94a3b8 !important;
+        border-radius: 12px !important;
+    }
+
+    /* ── DROPDOWN / SELECT ── */
+    .gradio-container .dropdown-container,
+    .gradio-container .secondary-wrap,
+    .gradio-container ul[role="listbox"] {
+        background: rgba(15, 23, 42, 0.95) !important;
+        border: 1px solid rgba(255, 255, 255, 0.1) !important;
+        color: #e2e8f0 !important;
+    }
+    .gradio-container ul[role="listbox"] li {
+        color: #e2e8f0 !important;
+    }
+    .gradio-container ul[role="listbox"] li:hover {
+        background: rgba(139, 92, 246, 0.2) !important;
+    }
+
+    /* ── BUTTONS ── */
     button.primary {
         background: linear-gradient(135deg, #8b5cf6, #3b82f6) !important;
         border: none !important;
@@ -1750,6 +1873,20 @@ def create_demo():
         transform: translateY(-3px) scale(1.02) !important;
         box-shadow: 0 0 30px rgba(139, 92, 246, 0.8) !important;
     }
+    button.secondary {
+        background: rgba(100, 116, 139, 0.2) !important;
+        border: 1px solid rgba(100, 116, 139, 0.4) !important;
+        color: #e2e8f0 !important;
+        border-radius: 14px !important;
+        font-weight: 600 !important;
+        transition: all 0.25s ease !important;
+    }
+    button.secondary:hover {
+        background: rgba(100, 116, 139, 0.35) !important;
+        border-color: rgba(139, 92, 246, 0.5) !important;
+        color: #f8fafc !important;
+        transform: translateY(-2px) !important;
+    }
     button.stop {
         background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
         border: none !important;
@@ -1765,8 +1902,8 @@ def create_demo():
         transform: translateY(-3px) scale(1.02) !important;
         box-shadow: 0 0 30px rgba(239, 68, 68, 0.8) !important;
     }
-    
-    /* Inputs */
+
+    /* ── INPUTS ── */
     textarea, input[type="text"], input[type="number"], select {
         background: rgba(0, 0, 0, 0.3) !important;
         border: 1px solid rgba(255,255,255,0.1) !important;
@@ -1778,18 +1915,71 @@ def create_demo():
         border-color: #a855f7 !important;
         box-shadow: 0 0 15px rgba(168, 85, 247, 0.4), inset 0 0 0 1px rgba(168, 85, 247, 0.4) !important;
     }
+    /* Textbox label */
+    .gradio-container .textbox label span,
+    .gradio-container .input-label {
+        color: #c084fc !important;
+        font-weight: 600 !important;
+    }
+
+    /* ── EXPORT / DOWNLOAD FILE COMPONENT ── */
+    .gradio-container .download,
+    .gradio-container .file a {
+        color: #60a5fa !important;
+    }
+
+    /* ── GALLERY ── */
+    .gradio-container .gallery-item {
+        background: rgba(0, 0, 0, 0.3) !important;
+        border: 1px solid rgba(255, 255, 255, 0.08) !important;
+        border-radius: 12px !important;
+    }
+
+    /* ── INFO / TOOLTIP TEXT ── */
+    .gradio-container .info,
+    .gradio-container .wrap .info {
+        color: #64748b !important;
+    }
+
+    /* ── BLOCK BACKGROUNDS (inner panels) ── */
+    .gradio-container .block {
+        background: transparent !important;
+    }
+    .gradio-container .contain {
+        background: transparent !important;
+    }
+    /* Tab panel content area */
+    .gradio-container .tabitem {
+        background: transparent !important;
+    }
+
+    /* ── AUDIO PLAYER ── */
+    .gradio-container audio {
+        filter: invert(0.85) hue-rotate(180deg);
+        border-radius: 8px;
+    }
+
+    /* ── Hide Stream Box Duplicate Progress ── */
+    #stream_box .progress-text,
+    #stream_box .progress-level,
+    #stream_box .progress,
+    #stream_box .progress-container {
+        display: none !important;
+    }
 
-    /* Hide Stream Box Duplicate Progress */
-    #stream_box .progress-text, 
-    #stream_box .progress-level, 
-    #stream_box .progress, 
-    #stream_box .progress-container { 
-        display: none !important; 
+    /* ── SCROLLBAR (Firefox + Chrome) ── */
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: rgba(139, 92, 246, 0.4) transparent;
     }
+    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.4); border-radius: 3px; }
+    ::-webkit-scrollbar-thumb:hover { background: rgba(139, 92, 246, 0.6); }
     """
     
     with gr.Blocks(title="LocalDuo", theme=custom_theme, css=css) as demo:
-        gr.Markdown("# 🇰🇷✨ LocalDuo - Learn Korean from PDFs, Websites & YouTube")
+        gr.Markdown("# <span class='emoji'>🇰🇷</span><span class='emoji'>✨</span> LocalDuo - Learn Korean from PDFs, Websites & YouTube")
         gr.Markdown("Enter a website URL 🌐, upload a PDF 📄, upload an audio file 🎵, or paste a YouTube link 🎬. The app uses a **Vision-Language Model (VLM)** 🧠, **ASR** 🎤, and **TTS** 🗣️ to generate vocabulary flashcards.")
         
         active_tab = gr.State("Website URL")