Update app.py

app.py

@@ -7,9 +7,11 @@ from langchain_community.vectorstores import FAISS
 from langchain_openai import OpenAIEmbeddings, ChatOpenAI
 from langchain_core.documents import Document
 
-APP_TITLE = "Election Archice"
+APP_TITLE = "Election Archive"
 APP_TAGLINE = "What Happened Last Elections."
 
+with gr.Blocks(css=CUSTOM_CSS, title=APP_TITLE) as demo:
+
 CATEGORIES = ["PRESIDENTIAL VOTE", "POLITICANS", "POLITICAL PARTIES", "WHO VIED", "WOMEN IN POLITICS", "CAMPAIGN SLOGANS"]
 
 # ---------- Core logic ----------
@@ -71,113 +73,58 @@ Context:
 # ---------- UI styling ----------
 CUSTOM_CSS = """
 :root{
-  --bg:#0b0f14;
-  --panel:#0f1620;
-  --panel2:#0c121b;
-  --text:#e9eef6;
-  --muted:#9db0c6;
-  --line:rgba(255,255,255,.08);
-  --accent:#7c3aed; /* purple */
-  --accent2:#22c55e;
-  --shadow: 0 10px 30px rgba(0,0,0,.35);
-  --radius:18px;
-  --radius2:14px;
-  --pad:18px;
+  --bg:#ffffff;
+  --text:#111827;
+  --muted:#6b7280;
+  --accent:#4f46e5;
+  --line:#e5e7eb;
+  --radius:16px;
 }
 
 .gradio-container{
-  background: radial-gradient(1200px 600px at 30% -10%, rgba(124,58,237,.22), transparent 55%),
-              radial-gradient(900px 500px at 85% 20%, rgba(34,197,94,.12), transparent 55%),
-              var(--bg) !important;
+  background: var(--bg) !important;
   color: var(--text) !important;
-  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
-}
-
-#topbar{
-  display:flex; align-items:center; justify-content:space-between;
-  padding: 10px 0 4px 0;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial !important;
 }
 
-#brand{
-  font-size: 22px; font-weight: 800; letter-spacing: .2px;
+h1{
+  font-size: 48px !important;
+  font-weight: 800 !important;
+  line-height: 1.1 !important;
+  letter-spacing: -1px;
 }
 
-#tagline{
-  color: var(--muted);
-  margin-top: 2px;
-  font-size: 13px;
+h3{
+  font-size: 18px !important;
+  color: var(--muted) !important;
+  font-weight: 400 !important;
 }
 
-.card{
-  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  padding: var(--pad);
-}
-
-.searchWrap{
-  display:flex; gap:10px; align-items:center;
-}
-
-.pill{
-  border: 1px solid var(--line);
-  background: rgba(255,255,255,.04);
-  border-radius: 999px;
-  padding: 6px 10px;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.catBtn button{
-  width: 100%;
-  text-align: left;
+button{
   border-radius: 12px !important;
-  border: 1px solid var(--line) !important;
-  background: rgba(255,255,255,.03) !important;
-}
-
-.catBtn button:hover{
-  border-color: rgba(124,58,237,.55) !important;
-  background: rgba(124,58,237,.12) !important;
+  padding: 12px 20px !important;
+  font-weight: 600 !important;
 }
 
 .primary button{
-  border-radius: 12px !important;
   background: var(--accent) !important;
+  color: white !important;
   border: none !important;
 }
 
-.primary button:hover{
-  filter: brightness(1.05);
-}
-
 .soft button{
-  border-radius: 12px !important;
-  background: rgba(255,255,255,.06) !important;
+  background: white !important;
   border: 1px solid var(--line) !important;
+  color: var(--text) !important;
 }
 
-#archiveArt{
-  width: 100%;
-  height: 260px;
-  display:flex; align-items:center; justify-content:center;
+.card{
+  border: 1px solid var(--line);
   border-radius: var(--radius);
-  border: 1px dashed rgba(255,255,255,.14);
-  background: rgba(255,255,255,.02);
-}
-
-#results h3{
-  margin-top: 0;
+  padding: 24px;
+  background: white;
 }
-
-.small{
-  color: var(--muted);
-  font-size: 12px;
-}
-
 """
-
 ARCHIVE_SVG = """
 <div id="archiveArt">
   <svg width="360" height="220" viewBox="0 0 360 220" fill="none" xmlns="http://www.w3.org/2000/svg" style="opacity:.95">