Update app.py

app.py

@@ -11,119 +11,186 @@ from docx.shared import Pt
 from string import Template
 
 # =========================
-# Branding & Palette
+# Branding
 # =========================
 APP_NAME = "ScholarLens"
 TAGLINE = "Query your literature, get page-level proof"
 
+# =========================
+# Color System (accessible dark theme)
+# =========================
+# Primary palette chosen for high contrast and clear role separation.
 PALETTE = {
-    "navy": "#083D77",         # dark background
-    "gold": "#F2B400",         # primary buttons / accents
-    "ice": "#FBF8F9",          # off-white
-    "maroon": "#8B1E1E",       # emphasis chips / separators
-    "amber": "#F5C26B",        # secondary accent
-    "text_on_dark": "#EAF2FF", # light text on dark
-    "text_on_light": "#0B1220" # dark text on light (gold/amber)
+    "bg":        "#0D1224",  # deep slate/navy background
+    "panel":     "#121936",  # panel background
+    "panel_alt": "#0F1530",  # secondary panel
+    "text_light":"#EAF0FF",  # default light text on dark
+    "text_dark": "#0B111C",  # text on light surfaces
+
+    # Accents (all readable on dark):
+    "primary":   "#22D3EE",  # cyan (primary actions)
+    "secondary": "#A78BFA",  # purple (secondary actions)
+    "accent":    "#FBBF24",  # amber (highlights/links)
+    "success":   "#34D399",  # green (success state)
+    "danger":    "#FB7185",  # rose (errors)
+
+    # Borders & subtle strokes
+    "stroke":    "rgba(255,255,255,0.14)",
+    "stroke_alt":"rgba(255,255,255,0.10)",
 }
 
 def build_custom_css():
-    """Dark UI with light text and gold primary button — safe for Python via Template."""
+    """
+    Strong-contrast dark UI, light text everywhere by default.
+    Uses string.Template so CSS braces don't break Python parsing.
+    """
     tmpl = Template(r"""
 :root{
-  --navy: $navy; --gold: $gold; --ice: $ice; --maroon: $maroon; --amber: $amber;
-  --text-dark: $text_dark; --text-light: $text_light;
-
-  /* Gradio tokens (force our palette) */
-  --body-background-fill: var(--navy);
+  --bg: $bg;
+  --panel: $panel;
+  --panel-alt: $panel_alt;
+  --text-light: $text_light;
+  --text-dark: $text_dark;
+
+  --primary: $primary;
+  --secondary: $secondary;
+  --accent: $accent;
+  --success: $success;
+  --danger: $danger;
+
+  --stroke: $stroke;
+  --stroke-alt: $stroke_alt;
+
+  /* Feed Gradio's CSS variables so components comply */
+  --body-background-fill: var(--bg);
   --body-text-color: var(--text-light);
-  --block-background-fill: rgba(8,61,119,0.82);
+  --block-background-fill: var(--panel);
   --block-title-text-color: var(--text-light);
-  --border-color-primary: rgba(255,255,255,0.12);
+  --border-color-primary: var(--stroke);
 
-  --button-primary-background-fill: var(--gold);
+  --button-primary-background-fill: var(--primary);
   --button-primary-text-color: var(--text-dark);
-  --button-primary-border-color: #c89200;
-
-  --button-secondary-background-fill: var(--amber);
+  --button-primary-border-color: color-mix(in srgb, var(--primary) 75%, black 25%);
+  --button-secondary-background-fill: var(--secondary);
   --button-secondary-text-color: var(--text-dark);
-  --button-secondary-border-color: #caa157;
+  --button-secondary-border-color: color-mix(in srgb, var(--secondary) 70%, black 30%);
 
-  --link-text-color: var(--amber);
+  --link-text-color: var(--accent);
 }
 
-/* Global surfaces & text */
-body, .gradio-container{
-  background: var(--body-background-fill) !important;
-  color: var(--body-text-color) !important;
+/* Global */
+html, body, .gradio-container{
+  background: var(--bg) !important;
+  color: var(--text-light) !important;
+  font-size: 16px; line-height: 1.5;
 }
 
-/* Blocks / tabs */
-.gradio-container .block, .gradio-container .tabs, .gradio-container .tabs>.tabitem{
-  background: var(--block-background-fill) !important;
+/* Panels / Tabs */
+.gradio-container .block,
+.gradio-container .tabs,
+.gradio-container .tabs > .tabitem{
+  background: var(--panel) !important;
   color: var(--text-light) !important;
+  border: 1px solid var(--stroke);
   border-radius: 12px;
-  border: 1px solid var(--border-color-primary);
 }
 
-/* Hero stripe using your palette */
+/* Hero (subtle gradient from brand accents) */
 #hero{
-  background: linear-gradient(90deg, var(--navy) 0%, var(--gold) 25%, var(--ice) 45%, var(--maroon) 65%, var(--amber) 85%, transparent 100%);
-  border: 1px solid rgba(242,180,0,0.6);
-  border-radius: 14px; padding: 14px 16px; color: var(--text-light);
+  background:
+    radial-gradient(900px 350px at 20% -20%, color-mix(in srgb, var(--secondary) 25%, transparent) 0%, transparent 100%),
+    radial-gradient(900px 350px at 120% 10%, color-mix(in srgb, var(--primary) 25%, transparent) 0%, transparent 100%),
+    var(--panel-alt);
+  border: 1px solid var(--stroke);
+  border-radius: 14px; padding: 16px 18px;
+  color: var(--text-light);
 }
 
-/* KPI chips */
-.kpi{ text-align:center; padding:12px; border-radius:10px;
-  border:1px solid rgba(255,255,255,.14); background: rgba(8,61,119,0.65); color: var(--text-light);}
+/* KPI cards */
+.kpi{
+  text-align:center; padding:12px;
+  border-radius:10px; border:1px solid var(--stroke);
+  background: var(--panel-alt); color: var(--text-light);
+}
 
 /* Buttons */
-.gradio-container .gr-button, .gradio-container button{ border-radius:10px !important; font-weight:600 !important; }
+.gradio-container .gr-button, .gradio-container button{
+  border-radius: 10px !important; font-weight: 650 !important;
+  letter-spacing: .2px;
+}
 .gradio-container .gr-button-primary, .gradio-container button.primary{
-  background: var(--button-primary-background-fill) !important;
-  color: var(--button-primary-text-color) !important;
+  background: var(--primary) !important;
+  color: var(--text-dark) !important;
   border: 1px solid var(--button-primary-border-color) !important;
+  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--primary) 50%, transparent);
 }
 .gradio-container .gr-button-secondary, .gradio-container button.secondary{
-  background: var(--button-secondary-background-fill) !important;
-  color: var(--button-secondary-text-color) !important;
+  background: var(--secondary) !important;
+  color: var(--text-dark) !important;
   border: 1px solid var(--button-secondary-border-color) !important;
 }
 
-/* Inputs */
-input, textarea, select, .gr-textbox, .gr-text-area, .gr-dropdown, .gr-file, .gr-slider{
-  background: rgba(8,61,119,0.55) !important;
+/* Inputs / dropdowns / file */
+input, textarea, select,
+.gr-textbox, .gr-text-area, .gr-dropdown, .gr-file, .gr-slider{
+  background: var(--panel-alt) !important;
   color: var(--text-light) !important;
-  border: 1px solid rgba(255,255,255,0.18) !important;
+  border: 1px solid var(--stroke-alt) !important;
   border-radius: 10px !important;
 }
-input::placeholder, textarea::placeholder{ color: rgba(234,242,255,0.65) !important; }
+input::placeholder, textarea::placeholder{
+  color: color-mix(in srgb, var(--text-light) 60%, transparent) !important;
+}
+
+/* Markdown / labels */
+label, .label, .prose h1, .prose h2, .prose h3, .prose p, .markdown-body{
+  color: var(--text-light) !important;
+}
 
-/* Links & text */
-a, .prose a{ color: var(--amber) !important; text-decoration:none; } a:hover{ text-decoration:underline; }
-label, .label, .prose h1, .prose h2, .prose h3, .prose p, .markdown-body{ color: var(--text-light) !important; }
+/* Links */
+a, .prose a{ color: var(--accent) !important; text-decoration:none; }
+a:hover{ text-decoration: underline; }
 
-/* Dataframe */
-.dataframe, table, .table, .gr-dataframe *{ color: var(--text-light) !important; background: transparent !important; }
-.dataframe th{ background: rgba(8,61,119,0.72) !important; border-bottom: 1px solid rgba(255,255,255,0.18) !important; }
-.dataframe td{ border-bottom: 1px solid rgba(255,255,255,0.12) !important; }
+/* Dataframe / tables */
+.dataframe, table, .table, .gr-dataframe *{
+  color: var(--text-light) !important; background: transparent !important;
+}
+.dataframe th{
+  background: var(--panel-alt) !important;
+  border-bottom: 1px solid var(--stroke) !important;
+}
+.dataframe td{
+  border-bottom: 1px solid var(--stroke-alt) !important;
+}
 
 /* Accordion */
 .accordion, .gr-accordion{
-  background: rgba(8,61,119,0.65) !important; border: 1px solid rgba(255,255,255,0.14) !important; border-radius: 10px !important;
+  background: var(--panel-alt) !important;
+  border: 1px solid var(--stroke) !important;
+  border-radius: 10px !important;
 }
 
-/* Tabs active underline color */
+/* Tabs active underline */
 .gradio-container .tabs .tab-nav button.selected{
-  box-shadow: inset 0 -3px 0 0 var(--gold) !important; color: var(--text-light) !important;
+  box-shadow: inset 0 -3px 0 0 var(--primary) !important;
+  color: var(--text-light) !important;
+}
+
+/* Focus outlines for a11y */
+:focus-visible{
+  outline: 3px solid var(--accent) !important;
+  outline-offset: 2px !important;
 }
 
-/* Optional: center content */
+/* Page width for large screens */
 .gradio-container{ max-width: 1120px; margin: 0 auto; }
 """)
     return tmpl.substitute(
-        navy=PALETTE["navy"], gold=PALETTE["gold"], ice=PALETTE["ice"],
-        maroon=PALETTE["maroon"], amber=PALETTE["amber"],
-        text_dark=PALETTE["text_on_light"], text_light=PALETTE["text_on_dark"]
+        bg=PALETTE["bg"], panel=PALETTE["panel"], panel_alt=PALETTE["panel_alt"],
+        text_light=PALETTE["text_light"], text_dark=PALETTE["text_dark"],
+        primary=PALETTE["primary"], secondary=PALETTE["secondary"],
+        accent=PALETTE["accent"], success=PALETTE["success"], danger=PALETTE["danger"],
+        stroke=PALETTE["stroke"], stroke_alt=PALETTE["stroke_alt"],
     )
 
 # =========================
@@ -439,7 +506,7 @@ def do_export_docx(question, answer_md, sources_rows):
 theme = gr.themes.Soft(primary_hue="indigo", secondary_hue="blue", neutral_hue="slate")
 
 with gr.Blocks(title=f"{APP_NAME} | RAG over PDFs", theme=theme, css=build_custom_css()) as demo:
-    # Header / Hero
+    # Hero
     with gr.Group(elem_id="hero"):
         gr.Markdown(f"""
 <div style="display:flex;align-items:center;gap:16px;">
@@ -450,13 +517,13 @@ with gr.Blocks(title=f"{APP_NAME} | RAG over PDFs", theme=theme, css=build_custo
 Upload your papers, build an index, and ask research questions with verifiable, page-level citations.
 </p>""")
 
-    # KPI Row
+    # KPIs
     with gr.Row():
         gr.Markdown("**Meaning-aware retrieval**<br><span class='kpi'>E5 + FAISS</span>", elem_classes=["kpi"])
         gr.Markdown("**Cited answers**<br><span class='kpi'>Page-level proof</span>", elem_classes=["kpi"])
         gr.Markdown("**Runs anywhere**<br><span class='kpi'>HF Spaces or Colab</span>", elem_classes=["kpi"])
 
-    # API Key
+    # Key
     with gr.Row():
         api_box = gr.Textbox(label="(Optional) Set GROQ_API_KEY", type="password", placeholder="sk_...")
         set_btn = gr.Button("Set Key")
@@ -464,13 +531,13 @@ Upload your papers, build an index, and ask research questions with verifiable,
     set_btn.click(set_api_key, inputs=[api_box], outputs=[set_out])
 
     with gr.Tabs():
-        # Tab 1: Build / Load
+        # Build / Load
         with gr.Tab("1) Build or Load Index"):
             gr.Markdown("Upload PDFs or a ZIP of PDFs, then click **Build Index**.")
             file_u = gr.Files(label="Upload PDFs or ZIP", file_types=[".pdf", ".zip"], type="filepath")
             with gr.Row():
                 build_btn = gr.Button("Build Index", variant="primary")
-                reload_btn = gr.Button("Reload Saved Index")
+                reload_btn = gr.Button("Reload Saved Index", variant="secondary")
                 download_btn = gr.Button("Download Index (.zip)")
             build_out = gr.Markdown()
 
@@ -486,7 +553,7 @@ Upload your papers, build an index, and ask research questions with verifiable,
             zpath = gr.File(label="Index bundle", interactive=False)
             download_btn.click(fn=download_index_zip, outputs=[zpath])
 
-        # Tab 2: Ask
+        # Ask
         with gr.Tab("2) Ask Questions"):
             with gr.Row():
                 with gr.Column(scale=1):
@@ -498,7 +565,7 @@ Upload your papers, build an index, and ask research questions with verifiable,
                         temp = gr.Slider(0.0, 1.0, value=0.2, step=0.05, label="Temperature")
                     with gr.Row():
                         ask_btn = gr.Button("Answer", variant="primary")
-                        clear_btn = gr.Button("Clear")
+                        clear_btn = gr.Button("Clear", variant="secondary")
 
                     gr.Examples(
                         examples=[
@@ -523,7 +590,7 @@ Upload your papers, build an index, and ask research questions with verifiable,
             export_btn.click(fn=do_export_docx, inputs=[q, ans, src], outputs=[exported])
             clear_btn.click(lambda: ("", [], "", gr.update(visible=False)), outputs=[ans, src, snippets_md, export_btn])
 
-        # Tab 3: About
+        # About
         with gr.Tab("About"):
             gr.Markdown("""
 **ScholarLens** helps researchers move from reading to results with answers grounded in the papers you upload.