Update app.py

app.py

@@ -17,34 +17,54 @@ from src.precompute import build_candidate_text, build_jd_text
 
 # Set Page Config
 st.set_page_config(
-    page_title="Vettly Talent Intelligence Portal",
-    page_icon="💼",
+    page_title="Vettly Talent Portal",
     layout="wide",
     initial_sidebar_state="expanded"
 )
 
-# Custom HR-Themed Styling
+# Custom Premium Dark Theme Styling
 st.markdown("""
 <style>
-    /* Light Offwhite & Green Theme */
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+    
+    /* Global Backgrounds */
     .stApp {
-        background-color: #F8FAF8;
+        background-color: #0f111a;
+        color: #ffffff;
+        font-family: 'Inter', sans-serif;
+    }
+    
+    [data-testid="stSidebar"] {
+        background-color: #161925;
+        border-right: 1px solid #24293e;
+    }
+    
+    /* File Uploader Customization */
+    [data-testid="stFileUploader"] {
+        background-color: #1c2035;
+        border: 1px dashed #24293e;
+        border-radius: 8px;
+        padding: 1rem;
+    }
+    
+    /* Slider & Accent styling */
+    .stSlider > div > div > div > div {
+        background-color: #ff7b00 !important;
     }
     
     /* Candidate Cards */
     .candidate-card {
-        background-color: #FFFFFF;
-        border: 1px solid #E2E8F0;
-        border-left: 5px solid #2E7D32; /* Green accent */
+        background-color: #161925;
+        border: 1px solid #24293e;
+        border-left: 4px solid #ff7b00;
         padding: 1.5rem;
         border-radius: 8px;
         margin-bottom: 1.2rem;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
-        transition: transform 0.2s ease, box-shadow 0.2s ease;
+        transition: transform 0.2s ease, border-color 0.2s ease;
     }
     .candidate-card:hover {
         transform: translateY(-2px);
-        box-shadow: 0 6px 12px rgba(0,0,0,0.05);
+        border-color: #ff7b00;
     }
     
     /* Badges & Metrics */
@@ -55,70 +75,81 @@ st.markdown("""
         font-size: 0.8rem;
         font-weight: 600;
         margin-right: 0.5rem;
+        background-color: #24293e;
+        color: #e2e8f0;
+        border: 1px solid #333a56;
     }
-    .badge-rose {
-        background-color: #E8F5E9;
-        color: #2E7D32;
-    }
-    .badge-indigo {
-        background-color: #F1F8E9;
-        color: #33691E;
-    }
-    .badge-emerald {
-        background-color: #E0F2F1;
-        color: #00695C;
+    .badge-accent {
+        color: #ff7b00;
+        background-color: rgba(255, 123, 0, 0.1);
+        border-color: rgba(255, 123, 0, 0.2);
     }
     
     /* Stats Layout */
     .stat-box {
-        background-color: #FFFFFF;
-        border: 1px solid #C8E6C9;
-        padding: 1rem;
+        background-color: #161925;
+        border: 1px solid #24293e;
+        padding: 1.5rem;
         border-radius: 8px;
         text-align: center;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.01);
+    }
+    .stat-box h4 {
+        color: #94a3b8 !important;
+        font-size: 0.9rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        margin-bottom: 0.5rem;
+    }
+    .stat-box h2 {
+        color: #ffffff !important;
+        font-size: 2rem;
+        margin: 0;
     }
     
     /* Typography adjustments */
-    h1, h2, h3 {
-        color: #1B5E20 !important;
+    h1, h2, h3, h4, h5, p, span {
         font-family: 'Inter', sans-serif;
     }
+    h1 { color: #ffffff !important; font-weight: 700; }
+    h2, h3 { color: #e2e8f0 !important; font-weight: 600; }
+    p { color: #cbd5e1 !important; }
+    
+    /* Override markdown text colors */
+    .stMarkdown p { color: #cbd5e1; }
+    .stMarkdown strong { color: #ffffff; }
 </style>
 """, unsafe_allow_html=True)
 
 # App Title & Welcome Banner
-st.title("Vettly Talent Portal")
-st.markdown("#### AI-Assisted Candidate Discovery, Fit Analysis, and Talent Alignment")
-st.markdown("<hr style='border-color: #C8E6C9;'>", unsafe_allow_html=True)
+st.markdown("<h1 style='font-size: 2.8rem; margin-bottom: 0;'>Vettly Talent Portal</h1>", unsafe_allow_html=True)
+st.markdown("<h3 style='color: #94a3b8 !important; margin-top: 0.5rem; font-weight: 400;'>AI-Assisted Candidate Discovery, Fit Analysis, and Role Alignment</h3>", unsafe_allow_html=True)
+st.markdown("<hr style='border-color: #24293e; margin: 2rem 0;'>", unsafe_allow_html=True)
 
 # Center Uploads
-st.markdown("### 📋 Upload Datasets")
+st.markdown("### Upload Datasets")
 col_up1, col_up2 = st.columns(2)
 with col_up1:
-    uploaded_jd = st.file_uploader("Upload Job Description (JSON)", type=["json"])
+    uploaded_jd = st.file_uploader("Job Description (JSON)", type=["json"])
 with col_up2:
-    uploaded_candidates = st.file_uploader("Upload Candidates Dataset (JSONL)", type=["jsonl"])
+    uploaded_candidates = st.file_uploader("Candidates Dataset (JSONL)", type=["jsonl"])
     use_default_candidates = st.checkbox("Use Demo Candidates Dataset (100,000 Profiles) - Instant Load", value=False)
 
 if use_default_candidates:
-    # Use the pre-existing local file directly to skip browser uploading
     uploaded_candidates = open("data/candidates.jsonl", "rb")
 
 # Sidebar Setup
 with st.sidebar:
-    st.markdown("<h4 style='color: #1B5E20 !important;'>⚙️ Score Weights</h4>", unsafe_allow_html=True)
+    st.markdown("### Score Weights Configuration")
     w_A = st.slider("Career Fit Weight (A)", 0.0, 1.0, 0.40, 0.05)
     w_B = st.slider("Skill Trust Weight (B)", 0.0, 1.0, 0.35, 0.05)
     w_C = st.slider("Semantic Similarity Weight (C)", 0.0, 1.0, 0.25, 0.05)
     
-    # Check normalization
     if abs((w_A + w_B + w_C) - 1.0) > 0.001:
         st.warning(f"Weights sum to {w_A+w_B+w_C:.2f}. They will be normalized to 1.0 internally.")
 
 # Check if inputs are uploaded
 if not uploaded_jd or not uploaded_candidates:
-    st.info("👋 Welcome! Please **upload the Job Description** and the **Candidates Dataset** (or check the Demo Dataset box) above to begin. The Start button will appear once files are loaded.")
+    st.info("Welcome. Please upload the Job Description and the Candidates Dataset (or check the Demo Dataset box) above to begin. The start action will appear once files are loaded.")
 else:
     jd_data = json.load(uploaded_jd)
     
@@ -142,7 +173,7 @@ else:
         st.write(", ".join([f"`{k}`" for k in kws]))
 
     # Start Button
-    if st.button("🚀 Start Talent Search & Vetting Pipeline", use_container_width=True):
+    if st.button("Start Talent Search & Vetting Pipeline", type="primary", use_container_width=True):
         # Normalize weights
         total_w = w_A + w_B + w_C
         nw_A, nw_B, nw_C = w_A/total_w, w_B/total_w, w_C/total_w
@@ -260,24 +291,27 @@ else:
         progress_bar.empty()
         
         # Display Stats Summary Dashboard
+        st.markdown("<hr style='border-color: #24293e; margin: 2rem 0;'>", unsafe_allow_html=True)
         st.markdown("### Talent Pipeline Summary Dashboard")
         d_col1, d_col2, d_col3, d_col4 = st.columns(4)
         with d_col1:
-            st.markdown(f"<div class='stat-box'><h4>Total Profiles</h4><h2 style='color:#1B5E20;'>100,000</h2></div>", unsafe_allow_html=True)
+            st.markdown(f"<div class='stat-box'><h4>Total Profiles</h4><h2>100,000</h2></div>", unsafe_allow_html=True)
         with d_col2:
-            st.markdown(f"<div class='stat-box'><h4>Filtered Out</h4><h2 style='color:#4CAF50;'>{100000 - len(survivors):,}</h2></div>", unsafe_allow_html=True)
+            st.markdown(f"<div class='stat-box'><h4>Filtered Out</h4><h2>{100000 - len(survivors):,}</h2></div>", unsafe_allow_html=True)
         with d_col3:
-            st.markdown(f"<div class='stat-box'><h4>Qualified Survivors</h4><h2 style='color:#2E7D32;'>{len(survivors):,}</h2></div>", unsafe_allow_html=True)
+            st.markdown(f"<div class='stat-box'><h4>Qualified Survivors</h4><h2 style='color: #ff7b00 !important;'>{len(survivors):,}</h2></div>", unsafe_allow_html=True)
         with d_col4:
-            st.markdown(f"<div class='stat-box'><h4>Pruned Ratio</h4><h2 style='color:#81C784;'>{((100000 - len(survivors))/100000)*100:.2f}%</h2></div>", unsafe_allow_html=True)
+            st.markdown(f"<div class='stat-box'><h4>Pruned Ratio</h4><h2>{((100000 - len(survivors))/100000)*100:.2f}%</h2></div>", unsafe_allow_html=True)
             
         # Draw Bar chart of filtering reasons
-        st.markdown("#### Primary Reasons for Candidate Disqualification")
+        st.markdown("<br><h4>Primary Reasons for Candidate Disqualification</h4>", unsafe_allow_html=True)
         df_reasons = pd.DataFrame(list(killed_reasons.items()), columns=["Disqualification Category", "Candidate Count"])
-        st.bar_chart(df_reasons.set_index("Disqualification Category"), color="#4CAF50")
+        st.bar_chart(df_reasons.set_index("Disqualification Category"), color="#ff7b00")
+        
+        st.markdown("<hr style='border-color: #24293e; margin: 2rem 0;'>", unsafe_allow_html=True)
         
         # Output Top Candidates list in a gorgeous card design
-        st.markdown("### 🏆 Top 50 Matched Candidates")
+        st.markdown("### Top 50 Matched Candidates")
         
         for rank, cand_item in enumerate(top_candidates, 1):
             cand = cand_item["candidate"]
@@ -299,28 +333,28 @@ else:
             <div class="candidate-card">
                 <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
                     <div>
-                        <span class="metric-badge badge-rose" style="font-size:1rem; padding: 0.4rem 0.8rem;">Rank #{rank}</span>
-                        <strong style="font-size:1.2rem; color:#1B5E20; margin-left: 0.5rem;">{anom_name}</strong>
-                        <span style="color:#64748B; margin-left:1rem;">{curr_title} @ {curr_company}</span>
+                        <span class="metric-badge badge-accent" style="font-size:1rem; padding: 0.4rem 0.8rem;">Rank #{rank}</span>
+                        <strong style="font-size:1.2rem; color:#ffffff; margin-left: 0.5rem;">{anom_name}</strong>
+                        <span style="color:#94a3b8; margin-left:1rem;">{curr_title} @ {curr_company}</span>
                     </div>
                     <div>
-                        <span style="font-size:1.6rem; font-weight:700; color:#2E7D32;">{final_pct}% Match</span>
+                        <span style="font-size:1.6rem; font-weight:700; color:#ff7b00;">{final_pct}% Match</span>
                     </div>
                 </div>
-                <div style="margin-bottom: 0.8rem;">
-                    <span class="metric-badge badge-indigo">💼 {yoe} Years Experience</span>
-                    <span class="metric-badge badge-indigo">📍 {loc}</span>
-                    <span class="metric-badge badge-emerald">Career Fit: {score_A_pct}%</span>
-                    <span class="metric-badge badge-emerald">Skills Trust: {score_B_pct}%</span>
-                    <span class="metric-badge badge-emerald">Semantic Sim: {score_C_pct}%</span>
+                <div style="margin-bottom: 0.4rem;">
+                    <span class="metric-badge">Exp: {yoe} Yrs</span>
+                    <span class="metric-badge">Loc: {loc}</span>
+                    <span class="metric-badge">Career Fit: {score_A_pct}%</span>
+                    <span class="metric-badge">Skills Trust: {score_B_pct}%</span>
+                    <span class="metric-badge">Semantic Sim: {score_C_pct}%</span>
                 </div>
             </div>
             """, unsafe_allow_html=True)
             
             # Details Expander
-            with st.expander(f"Inspect profile details & hiring alignment for {anom_name}"):
+            with st.expander(f"Inspect Profile Details & Alignment: {anom_name}"):
                 st.markdown("**Core Fit Analysis:**")
-                st.write(f"✅ Candidate has a match score of {final_pct}%. They possess {yoe} years of relevant industry experience in {profile.get('current_industry', 'tech')}. Matched locations include {loc}.")
+                st.write(f"Candidate has a match score of {final_pct}%. They possess {yoe} years of relevant industry experience in {profile.get('current_industry', 'tech')}. Matched locations include {loc}.")
                 
                 # Show career history
                 st.markdown("**Career History Summary:**")