test

app.py

@@ -15,9 +15,6 @@ import spaces
 from sklearn.feature_extraction.text import TfidfVectorizer
 from sklearn.metrics.pairwise import cosine_similarity
 
-# ---------------------------------------------------------------------------
-# Resume content — the single source of truth the retrieval engine indexes.
-# ---------------------------------------------------------------------------
 CORPUS = [
     {"tag": "Experience · Flexday AI", "text": "Built and pitched INFERA, an AI-powered agentic solution that maps sales projects to real-world opportunities, winning 1st place at the Flexday AI Hackathon."},
     {"tag": "Experience · Flexday AI", "text": "Optimized a semantic search system using LLM and embedding based techniques, improving retrieval performance by 50 percent and enhancing user experience."},
@@ -45,7 +42,6 @@ _doc_matrix = _vectorizer.fit_transform(_texts)
 
 
 def retrieve(query: str, top_k: int = 3):
-    """Rank resume chunks against a query using TF-IDF cosine similarity."""
     if not query or not query.strip():
         return []
     q_vec = _vectorizer.transform([query])
@@ -88,9 +84,6 @@ EXAMPLE_QUERIES = [
     "What certifications do you have?",
 ]
 
-# ---------------------------------------------------------------------------
-# Leaderboard-style tables — sortable, scannable, MTEB-inspired.
-# ---------------------------------------------------------------------------
 SKILLS_DF = pd.DataFrame([
     {"Category": "AI/ML & GenAI", "Skills": "LLMs, Generative AI, Agentic AI, Prompt Engineering, Semantic Search, Classification, Regression, Decision Trees, SMOTE, OCR/NLP"},
     {"Category": "Programming", "Skills": "Python, JavaScript, Node.js"},
@@ -121,18 +114,44 @@ EDUCATION_DF = pd.DataFrame([
     {"Degree": "B.Tech, Computer Science & Engineering", "Institution": "KIET Group of Institutions", "Years": "2012–2016", "Highlight": "First Division"},
 ])
 
-# ---------------------------------------------------------------------------
-# Styling — dark "console" theme matching the static-site edition
-# ---------------------------------------------------------------------------
 CUSTOM_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+
 :root {
     --amber: #f5b841;
+    --amber-deep: #f97316;
     --teal: #4fd1c5;
+    --bg-0: #0d0f16;
+    --bg-1: #12151f;
+    --card: rgba(255,255,255,0.035);
+    --card-border: rgba(255,255,255,0.09);
+    --text-dim: #9aa3b5;
+    --text-faint: #6b7280;
 }
+
 .gradio-container {
-    background: radial-gradient(ellipse 1200px 800px at 20% -10%, #1a2130 0%, #12151c 55%) !important;
+    background:
+        radial-gradient(ellipse 900px 500px at 15% -8%, rgba(245,184,65,0.10) 0%, transparent 60%),
+        radial-gradient(ellipse 700px 600px at 100% 10%, rgba(79,209,197,0.08) 0%, transparent 55%),
+        radial-gradient(ellipse 1400px 900px at 50% 0%, #171b28 0%, var(--bg-0) 60%) !important;
+    background-attachment: fixed !important;
     font-family: 'Inter', sans-serif !important;
+    position: relative;
 }
+.gradio-container::before {
+    content: "";
+    position: fixed; inset: 0; pointer-events: none; z-index: 0;
+    background-image:
+        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
+    background-size: 48px 48px;
+    mask-image: radial-gradient(ellipse 900px 600px at 20% 0%, black 0%, transparent 70%);
+}
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: var(--bg-0); }
+::-webkit-scrollbar-thumb { background: #2a3040; border-radius: 8px; }
+::-webkit-scrollbar-thumb:hover { background: var(--amber-deep); }
+
 @keyframes revealUp {
     from { opacity: 0; transform: translateY(22px); }
     to   { opacity: 1; transform: translateY(0); }
@@ -146,75 +165,155 @@ CUSTOM_CSS = """
 #hero-headline { animation-delay: 0.28s; }
 #hero-bio      { animation-delay: 0.40s; }
 #hero-contact  { animation-delay: 0.52s; }
+
 #hero-name {
     font-family: 'Space Grotesk', sans-serif !important;
     font-weight: 700 !important;
-    font-size: 58px !important;
-    letter-spacing: -0.02em !important;
+    font-size: 60px !important;
+    letter-spacing: -0.025em !important;
     line-height: 1.05 !important;
-    margin-bottom: 4px !important;
-    background: linear-gradient(180deg, #ffffff 0%, #c9d2e3 100%);
+    margin-bottom: 6px !important;
+    background: linear-gradient(180deg, #ffffff 0%, #b9c3d9 100%);
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
+    filter: drop-shadow(0 2px 24px rgba(245,184,65,0.08));
+}
+#hero-headline {
+    display: inline-block;
+    color: var(--amber) !important;
+    font-family: 'Space Grotesk', sans-serif !important;
+    font-weight: 600 !important;
+    font-size: 18px !important;
+    margin-top: 8px !important;
+    padding: 6px 16px !important;
+    background: rgba(245,184,65,0.08);
+    border: 1px solid rgba(245,184,65,0.25);
+    border-radius: 999px;
 }
-#hero-headline { color: var(--amber) !important; font-weight: 600 !important; font-size: 19px !important; margin-top: 6px !important; }
 .status-badge {
     display: inline-flex; align-items: center; gap: 8px;
-    font-family: monospace; font-size: 12px; letter-spacing: 0.1em;
-    color: #9aa3b5; text-transform: uppercase; margin-bottom: 10px;
+    font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.12em;
+    color: var(--text-dim); text-transform: uppercase; margin-bottom: 14px;
 }
 .dot {
-    width: 8px; height: 8px; border-radius: 50%; background: var(--amber);
+    width: 8px; height: 8px; border-radius: 50%;
+    background: var(--amber);
+    box-shadow: 0 0 12px 2px rgba(245,184,65,0.7);
     display: inline-block; animation: pulse 2.2s infinite;
 }
 @keyframes pulse {
-    0% { box-shadow: 0 0 0 0 rgba(245,184,65,.55); }
-    70% { box-shadow: 0 0 0 9px rgba(245,184,65,0); }
-    100% { box-shadow: 0 0 0 0 rgba(245,184,65,0); }
+    0% { box-shadow: 0 0 0 0 rgba(245,184,65,.55), 0 0 12px 2px rgba(245,184,65,0.7); }
+    70% { box-shadow: 0 0 0 9px rgba(245,184,65,0), 0 0 12px 2px rgba(245,184,65,0.7); }
+    100% { box-shadow: 0 0 0 0 rgba(245,184,65,0), 0 0 12px 2px rgba(245,184,65,0.7); }
+}
+#hero-contact a {
+    color: var(--text-dim); text-decoration: none;
+    padding: 4px 12px; border-radius: 999px;
+    border: 1px solid var(--card-border); background: var(--card);
+    transition: all .18s ease;
 }
+#hero-contact a:hover { color: #0d0f16 !important; background: var(--teal); border-color: var(--teal); }
+
 .section-label {
-    font-family: monospace !important; color: var(--amber) !important;
-    letter-spacing: 0.1em !important; text-transform: uppercase; font-size: 13px !important;
+    font-family: 'JetBrains Mono', monospace !important; color: var(--amber) !important;
+    letter-spacing: 0.12em !important; text-transform: uppercase; font-size: 12.5px !important;
+    font-weight: 600 !important;
 }
-#hero-contact a {
-    color: #9aa3b5; text-decoration: none; border-bottom: 1px solid transparent;
-    transition: color .18s ease, border-color .18s ease;
+
+.ask-card {
+    background: var(--card) !important;
+    border: 1px solid var(--card-border) !important;
+    border-radius: 18px !important;
+    backdrop-filter: blur(18px);
+    box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04) !important;
+    padding: 22px !important;
+    position: relative;
+    z-index: 1;
 }
-#hero-contact a:hover { color: var(--teal) !important; border-color: var(--teal); }
+.ask-titlebar {
+    display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
+    font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-faint);
+    letter-spacing: 0.08em;
+}
+.ask-titlebar .tl-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
+
 .gradio-container button {
-    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease !important;
+    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
+}
+.gradio-container button:hover { transform: translateY(-2px); }
+button.primary, button[class*="primary"] {
+    background: linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%) !important;
+    border: none !important;
+    box-shadow: 0 8px 24px -8px rgba(245,184,65,0.55) !important;
+    color: #1a1305 !important;
+    font-weight: 700 !important;
 }
-.gradio-container button:hover {
-    transform: translateY(-2px);
+button.primary:hover, button[class*="primary"]:hover {
+    box-shadow: 0 12px 32px -8px rgba(245,184,65,0.75) !important;
 }
+
 .tabs > .tab-nav {
-    border-bottom: 1px solid #2a3040 !important;
-    gap: 4px !important;
+    border-bottom: none !important;
+    background: var(--card);
+    border: 1px solid var(--card-border);
+    border-radius: 999px !important;
+    padding: 5px !important;
+    display: inline-flex !important;
+    gap: 2px !important;
+    margin-bottom: 18px;
 }
 .tabs > .tab-nav button {
-    font-family: monospace !important;
-    font-size: 13px !important;
-    color: #9aa3b5 !important;
+    font-family: 'JetBrains Mono', monospace !important;
+    font-size: 12.5px !important;
+    color: var(--text-dim) !important;
     border: none !important;
     background: transparent !important;
-    padding: 10px 16px !important;
+    border-radius: 999px !important;
+    padding: 9px 18px !important;
+    margin: 0 !important;
 }
 .tabs > .tab-nav button.selected {
-    color: var(--amber) !important;
-    border-bottom: 2px solid var(--amber) !important;
-    font-weight: 600 !important;
+    background: linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%) !important;
+    color: #1a1305 !important;
+    font-weight: 700 !important;
+    box-shadow: 0 6px 18px -6px rgba(245,184,65,0.6);
+}
+
+.proj-card {
+    background: var(--card) !important;
+    border: 1px solid var(--card-border) !important;
+    border-radius: 14px !important;
+    padding: 18px !important;
+    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
+}
+.proj-card:hover {
+    transform: translateY(-4px);
+    border-color: rgba(245,184,65,0.4) !important;
+    box-shadow: 0 16px 40px -16px rgba(245,184,65,0.25) !important;
 }
-table {
-    font-size: 13.5px !important;
+
+.gr-accordion, [class*="accordion"] {
+    border-radius: 14px !important;
+}
+
+.cv-table {
+    border-radius: 14px !important;
+    overflow: hidden !important;
+    border: 1px solid var(--card-border) !important;
+    box-shadow: 0 12px 32px -18px rgba(0,0,0,0.6);
 }
-thead th {
-    font-family: monospace !important;
+.cv-table table { font-size: 13.5px !important; }
+.cv-table thead th {
+    font-family: 'JetBrains Mono', monospace !important;
     text-transform: uppercase !important;
-    font-size: 11px !important;
-    letter-spacing: 0.06em !important;
+    font-size: 10.5px !important;
+    letter-spacing: 0.08em !important;
     color: var(--amber) !important;
+    background: rgba(245,184,65,0.06) !important;
 }
+.cv-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.02) !important; }
+.cv-table tbody tr:hover { background: rgba(245,184,65,0.05) !important; }
 """
 
 with gr.Blocks(title="Angkit Sarma — Living CV") as demo:
@@ -223,32 +322,41 @@ with gr.Blocks(title="Angkit Sarma — Living CV") as demo:
         """
         <div class="status-badge"><span class="dot"></span> resume · live · self-querying</div>
         <div id="hero-name">Angkit Sarma</div>
-        <div id="hero-headline">AI/ML Engineer — Agentic Systems &amp; LLM Applications</div>
-        <p id="hero-bio" style="color:#9aa3b5; max-width:680px; margin-top:14px;">
+        <div><span id="hero-headline">AI/ML Engineer — Agentic Systems &amp; LLM Applications</span></div>
+        <p id="hero-bio" style="color:#9aa3b5; max-width:680px; margin-top:16px; line-height:1.6;">
         4+ years building and shipping ML and generative AI systems — from a 50%-faster semantic
         search pipeline to <b style="color:#eef0f4">INFERA</b>, an agentic AI tool that won 1st place
         at the Flexday AI Hackathon. Ask the panel below anything about my experience — it's a live
         TF-IDF retrieval engine running over this résumé's own content.
         </p>
-        <p id="hero-contact" style="font-family:monospace; font-size:13px;">
-        +91 9990797061 &nbsp;·&nbsp; angkit93@gmail.com &nbsp;·&nbsp;
+        <p id="hero-contact" style="font-family:'JetBrains Mono',monospace; font-size:12.5px; margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; align-items:center;">
+        <a href="tel:+919990797061">+91 9990797061</a>
+        <a href="mailto:angkit93@gmail.com">angkit93@gmail.com</a>
         <a href="https://www.linkedin.com/in/angkit-s-81b7131b0/" target="_blank">LinkedIn</a>
-        &nbsp;·&nbsp;
         <a href="https://github.com/angkit-hash" target="_blank">GitHub</a>
-        &nbsp;·&nbsp; Hyderabad, India
+        <a href="#" style="pointer-events:none;">Hyderabad, India</a>
         </p>
         """
     )
 
-    gr.HTML('<p class="section-label">// ask the cv</p>')
-    chatbot = gr.Chatbot(label=None, height=320, show_label=False)
-    with gr.Row():
-        query_box = gr.Textbox(placeholder="e.g. What's your experience with LLMs?", scale=5, show_label=False, container=False)
-        ask_btn = gr.Button("Ask", variant="primary", scale=1)
+    gr.HTML('<p class="section-label" style="margin-top:8px;">// ask the cv</p>')
+    with gr.Group(elem_classes=["ask-card"]):
+        gr.HTML(
+            '<div class="ask-titlebar">'
+            '<span class="tl-dot" style="background:#ff5f57;"></span>'
+            '<span class="tl-dot" style="background:#febc2e;"></span>'
+            '<span class="tl-dot" style="background:#28c840;"></span>'
+            '&nbsp;&nbsp;ask_the_cv.py — live TF-IDF retrieval, runs in this Space'
+            '</div>'
+        )
+        chatbot = gr.Chatbot(label=None, height=320, show_label=False)
+        with gr.Row():
+            query_box = gr.Textbox(placeholder="e.g. What's your experience with LLMs?", scale=5, show_label=False, container=False)
+            ask_btn = gr.Button("Ask", variant="primary", scale=1)
 
-    with gr.Row():
-        for q in EXAMPLE_QUERIES:
-            gr.Button(q, size="sm").click(fn=ask_the_cv, inputs=[gr.State(q), chatbot], outputs=[chatbot, query_box])
+        with gr.Row():
+            for q in EXAMPLE_QUERIES:
+                gr.Button(q, size="sm").click(fn=ask_the_cv, inputs=[gr.State(q), chatbot], outputs=[chatbot, query_box])
 
     ask_btn.click(fn=ask_the_cv, inputs=[query_box, chatbot], outputs=[chatbot, query_box])
     query_box.submit(fn=ask_the_cv, inputs=[query_box, chatbot], outputs=[chatbot, query_box])
@@ -267,6 +375,8 @@ with gr.Blocks(title="Angkit Sarma — Living CV") as demo:
             gr.Dataframe(
                 value=IMPACT_DF, interactive=False, wrap=True,
                 column_widths=["55%", "25%", "20%"],
+                row_count=(len(IMPACT_DF), "fixed"),
+                elem_classes=["cv-table"],
             )
 
         with gr.Tab("Experience"):
@@ -298,14 +408,14 @@ with gr.Blocks(title="Angkit Sarma — Living CV") as demo:
 
         with gr.Tab("Projects"):
             with gr.Row():
-                with gr.Column():
+                with gr.Column(elem_classes=["proj-card"]):
                     gr.Markdown("**INFERA** — Agentic AI Sales-Opportunity Mapper\n\n*LLMs · AI Agents · Python*\n\nAn AI agent that analyzes sales pipeline data and autonomously maps projects to real-world business opportunities.\n\n🏆 1st Place — Flexday AI Hackathon")
-                with gr.Column():
+                with gr.Column(elem_classes=["proj-card"]):
                     gr.Markdown("**Analytica** — End-to-End ML Analytics Platform\n\n*React · Python · Azure · SQL*\n\nFull-stack analytics tool surfacing ML model performance metrics and usage statistics.")
-                with gr.Column():
+                with gr.Column(elem_classes=["proj-card"]):
                     gr.Markdown("**Predictive Allocation** — ML Deployment Pipeline\n\n*Python · Azure SQL · Azure Blob · DevOps*\n\nRe-engineered end-to-end training/deployment pipeline; hardened security with Snyk and Wiz.")
             gr.HTML(
-                '<p style="font-family:monospace; font-size:13px; margin-top:10px;">'
+                '<p style="font-family:\'JetBrains Mono\',monospace; font-size:13px; margin-top:14px;">'
                 '<a href="https://github.com/angkit-hash" target="_blank" style="color:#4fd1c5; text-decoration:none; border-bottom:1px solid #4fd1c5;">'
                 '→ View source &amp; more projects on GitHub</a></p>'
             )
@@ -314,6 +424,8 @@ with gr.Blocks(title="Angkit Sarma — Living CV") as demo:
             gr.Dataframe(
                 value=SKILLS_DF, interactive=False, wrap=True,
                 column_widths=["25%", "75%"],
+                row_count=(len(SKILLS_DF), "fixed"),
+                elem_classes=["cv-table"],
             )
 
         with gr.Tab("Certifications & Education"):
@@ -321,11 +433,15 @@ with gr.Blocks(title="Angkit Sarma — Living CV") as demo:
             gr.Dataframe(
                 value=CERTS_DF, interactive=False, wrap=True,
                 column_widths=["55%", "45%"],
+                row_count=(len(CERTS_DF), "fixed"),
+                elem_classes=["cv-table"],
             )
             gr.HTML('<p class="section-label" style="margin-top:22px;">Education</p>')
             gr.Dataframe(
                 value=EDUCATION_DF, interactive=False, wrap=True,
                 column_widths=["30%", "28%", "14%", "28%"],
+                row_count=(len(EDUCATION_DF), "fixed"),
+                elem_classes=["cv-table"],
             )
 
 if __name__ == "__main__":