Update app.py

app.py

@@ -8,21 +8,132 @@ import gradio as gr
 from groq import Groq
 from docx import Document
 from docx.shared import Pt
+from string import Template
 
 # ---------- Branding ----------
-# ---------- Palette ----------
+APP_NAME = "ScholarLens"
+TAGLINE = "Query your literature, get page-level proof"
+
+# ---------- Palette (guarantees light text on dark, dark text on light) ----------
 PALETTE = {
-    "navy":   "#083D77",   # dark background
-    "gold":   "#F2B400",   # accents, primary buttons
-    "ice":    "#FBF8F9",   # off-white surfaces
-    "maroon": "#8B1E1E",   # emphasis chips / dividers
-    "amber":  "#F5C26B",   # secondary accents
-    "text_on_dark": "#EAF2FF",
-    "text_on_light": "#0B1220",
+    "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 for dark surfaces
+    "text_on_light": "#0B1220" # dark text for light (gold/amber/ice)
 }
 
-APP_NAME = "ScholarLens"
-TAGLINE = "Query your literature, get page-level proof"
+def build_custom_css():
+    """Safe CSS builder using string.Template so { } braces don't break Python."""
+    tmpl = Template(r"""
+:root {
+  --navy: $navy;
+  --gold: $gold;
+  --ice: $ice;
+  --maroon: $maroon;
+  --amber: $amber;
+  --text-dark: $text_dark;
+  --text-light: $text_light;
+}
+
+/* Global surfaces */
+body, .gradio-container {
+  background: var(--navy) !important;
+  color: var(--text-light) !important;
+}
+
+/* Blocks and tabs */
+.gradio-container .block,
+.gradio-container .tabs,
+.gradio-container .tabs > .tabitem {
+  background: color-mix(in srgb, var(--navy) 80%, black 20%) !important;
+  color: var(--text-light) !important;
+  border-radius: 12px;
+  border: 1px solid color-mix(in srgb, var(--navy) 70%, white 10%);
+}
+
+/* Hero stripe styled with your palette */
+#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 color-mix(in srgb, var(--gold) 40%, white 20%);
+  border-radius: 14px;
+  padding: 14px 16px;
+  color: var(--text-light);
+}
+
+/* Links */
+a, .prose a { color: var(--amber) !important; text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* KPI chips */
+.kpi {
+  text-align:center; padding:12px; border-radius:10px;
+  border:1px solid color-mix(in srgb, var(--ice) 35%, var(--navy) 65%);
+  background: color-mix(in srgb, var(--navy) 75%, black 25%);
+  color: var(--text-light);
+}
+
+/* Buttons */
+button, .gr-button { border-radius: 10px !important; font-weight: 600 !important; }
+.gr-button, button { color: var(--text-light) !important; }
+.gr-button-primary {
+  background: var(--gold) !important;
+  color: var(--text-dark) !important; /* dark text on light gold */
+  border: 1px solid color-mix(in srgb, var(--gold) 70%, black 10%) !important;
+}
+.gr-button-secondary {
+  background: color-mix(in srgb, var(--amber) 60%, var(--gold) 40%) !important;
+  color: var(--text-dark) !important;
+}
+
+/* Inputs */
+input, textarea, .gr-textbox, .gr-text-area, .gr-slider, .gr-dropdown, .gr-file {
+  background: color-mix(in srgb, var(--navy) 65%, black 35%) !important;
+  color: var(--text-light) !important;
+  border: 1px solid color-mix(in srgb, var(--ice) 25%, var(--navy) 75%) !important;
+  border-radius: 10px !important;
+}
+input::placeholder, textarea::placeholder {
+  color: color-mix(in srgb, var(--text-light) 60%, transparent) !important;
+}
+
+/* Text blocks */
+label, .label, .prose h1, .prose h2, .prose h3, .prose p, .markdown-body {
+  color: var(--text-light) !important;
+}
+
+/* Dataframe / table */
+.dataframe, table, .table, .gr-dataframe * { color: var(--text-light) !important; background: transparent !important; }
+.dataframe th {
+  background: color-mix(in srgb, var(--navy) 70%, black 30%) !important;
+  border-bottom: 1px solid color-mix(in srgb, var(--ice) 20%, var(--navy) 80%) !important;
+}
+.dataframe td {
+  border-bottom: 1px solid color-mix(in srgb, var(--ice) 15%, var(--navy) 85%) !important;
+}
+
+/* Accordions */
+.accordion, .gr-accordion {
+  background: color-mix(in srgb, var(--navy) 70%, black 30%) !important;
+  border: 1px solid color-mix(in srgb, var(--ice) 20%, var(--navy) 80%) !important;
+  border-radius: 10px !important;
+}
+
+/* Footer */
+footer, .footer { opacity:.75; color: var(--text-light); }
+""")
+    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"],
+    )
 
 # ---------- Config ----------
 EMBED_MODEL_NAME = "intfloat/multilingual-e5-small"
@@ -35,7 +146,7 @@ INDEX_PATH = "rag_index.faiss"
 STORE_PATH = "rag_store.pkl"
 
 MODEL_CHOICES = [
-    "llama-3.3-70b-versatile",
+    "llama-3.1-70b-versatile",
     "llama-3.1-8b-instant",
     "mixtral-8x7b-32768",
 ]
@@ -131,7 +242,6 @@ def _collect_pdf_paths(upload_paths: List[str]) -> List[str]:
                 for name in z.namelist():
                     if name.lower().endswith(".pdf"):
                         z.extract(name, tmpdir)
-            # collect extracted PDFs
             for root, _, files in os.walk(tmpdir):
                 for f in files:
                     if f.lower().endswith(".pdf"):
@@ -195,7 +305,7 @@ def retrieve(query: str, top_k=5, must_contain: str = ""):
     return hits
 
 # ---------- Groq LLM ----------
-def groq_answer(query: str, contexts, model_name="llama-3.1-70b-versatile", temperature=0.2, max_tokens=1000):
+def groq_answer(query: str, contexts, model_name="llama-3.3-70b-versatile", temperature=0.2, max_tokens=1000):
     try:
         if not os.environ.get("GROQ_API_KEY"):
             return "GROQ_API_KEY is not set. Add it in your Space secrets or the key box."
@@ -233,10 +343,7 @@ def groq_answer(query: str, contexts, model_name="llama-3.1-70b-versatile", temp
 
 # ---------- Export helpers ----------
 def export_answer_to_docx(question: str, answer_md: str, rows: List[List[str]]) -> str:
-    """
-    Save Q&A with sources table to a .docx and return path.
-    rows: [Source, Page, Score, Snippet]
-    """
+    """Save Q&A with sources table to a .docx and return path (rows = [Source, Page, Score, Snippet])."""
     doc = Document()
     styles = doc.styles
     try:
@@ -331,113 +438,15 @@ def do_export_docx(question, answer_md, sources_rows):
     except Exception:
         return None
 
-# ---------- Theme (no .set used; styling via CSS) ----------
-theme = gr.themes.Soft(
-    primary_hue="indigo",
-    secondary_hue="blue",
-    neutral_hue="slate",
-)
+# ---------- Theme (simple; main styling via CSS for compatibility) ----------
+theme = gr.themes.Soft(primary_hue="indigo", secondary_hue="blue", neutral_hue="slate")
 
 # ---------- Gradio UI ----------
 with gr.Blocks(
     title=f"{APP_NAME} | RAG over PDFs",
     theme=theme,
-    css=f"""
-:root {{
-  --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']};
-}}
-
-body, .gradio-container { color: var(--text-light) !important; }
-
-}}
-
-.gradio-container .block, 
-.gradio-container .tabs, 
-.gradio-container .tabs > .tabitem {{
-  background: color-mix(in srgb, var(--navy) 80%, black 20%) !important;
-  color: var(--text-light) !important;
-  border-radius: 12px;
-  border: 1px solid color-mix(in srgb, var(--navy) 70%, white 10%);
-}}
-
-#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 color-mix(in srgb, var(--gold) 40%, white 20%);
-  border-radius: 14px;
-  padding: 14px 16px;
-  color: var(--text-light);
-}}
-
-a, .prose a { color: var(--amber) !important; }          /* normal */
-a:hover { text-decoration: underline; }
-
-}}
-a:hover {{ text-decoration: underline; }}
-
-.kpi {{
-  text-align:center;
-  padding:12px;
-  border-radius:10px;
-  border:1px solid color-mix(in srgb, var(--ice) 35%, var(--navy) 65%);
-  background: color-mix(in srgb, var(--navy) 75%, black 25%);
-  color: var(--text-light);
-}}
-
-button, .gr-button {{
-  border-radius: 10px !important;
-  font-weight: 600 !important;
-  color: var(--text-light) !important;
-}}
-button.primary, .gr-button-primary {{
-  background: var(--gold) !important;
-  color: var(--text-dark) !important;
-  border: 1px solid color-mix(in srgb, var(--gold) 70%, black 10%) !important;
-}}
-button.secondary, .gr-button-secondary {{
-  background: color-mix(in srgb, var(--amber) 60%, var(--gold) 40%) !important;
-  color: var(--text-dark) !important;
-}}
-
-input, textarea, .gr-textbox, .gr-text-area, .gr-slider, .gr-dropdown, .gr-file, .wrap.svelte* {{
-  background: color-mix(in srgb, var(--navy) 65%, black 35%) !important;
-  color: var(--text-light) !important;
-  border: 1px solid color-mix(in srgb, var(--ice) 25%, var(--navy) 75%) !important;
-  border-radius: 10px !important;
-}}
-
-label, .label, .prose h1, .prose h2, .prose h3, .prose p, .markdown-body {{
-  color: var(--text-light) !important;
-}}
-
-.dataframe, table, .table, .gr-dataframe * {{
-  color: var(--text-light) !important;
-  background: transparent !important;
-}}
-.dataframe th {{
-  background: color-mix(in srgb, var(--navy) 70%, black 30%) !important;
-  border-bottom: 1px solid color-mix(in srgb, var(--ice) 20%, var(--navy) 80%) !important;
-}}
-.dataframe td {{
-  border-bottom: 1px solid color-mix(in srgb, var(--ice) 15%, var(--navy) 85%) !important;
-}}
-
-.accordion, .gr-accordion {{
-  background: color-mix(in srgb, var(--navy) 70%, black 30%) !important;
-  border: 1px solid color-mix(in srgb, var(--ice) 20%, var(--navy) 80%) !important;
-  border-radius: 10px !important;
-}}
-
-footer, .footer {{ opacity:.75; color: var(--text-light); }}
-"""
+    css=build_custom_css()
 ) as demo:
-
     # --- Header / Hero ---
     with gr.Group(elem_id="hero"):
         gr.Markdown(