Update app.py

app.py

@@ -58,8 +58,8 @@ RED_FLAGS = [
     ("benefits clearly mentioned",          -4, ["health insurance", "paid leave", "meal vouchers", "transport", "benefits include", "profit-sharing"]),
 ]
 
-CHART_PALETTE = ["#4f46e5", "#06b6d4", "#0ea5e9", "#8b5cf6", "#ec4899",
-                 "#f59e0b", "#10b981", "#ef4444", "#6366f1", "#14b8a6"]
+CHART_PALETTE = ["#34d399", "#60a5fa", "#f472b6", "#fbbf24", "#a78bfa",
+                 "#22d3ee", "#fb7185", "#84cc16", "#f97316", "#e879f9"]
 
 # =========================================================
 # DATA LOADING
@@ -135,7 +135,7 @@ def analyze_job(text: str) -> Tuple[str, int, str, go.Figure]:
         cdf = pd.DataFrame(detected, columns=["Signal", "Weight"])
         cdf["Type"] = cdf["Weight"].apply(lambda w: "Red flag" if w > 0 else "Positive")
         fig = px.bar(cdf, x="Weight", y="Signal", color="Type", orientation="h",
-                     color_discrete_map={"Red flag": "#dc2626", "Positive": "#10b981"},
+                     color_discrete_map={"Red flag": "#ef4444", "Positive": "#34d399"},
                      title="Signal breakdown")
         fig.update_layout(**_styled_layout(height=420, showlegend=True))
     else:
@@ -150,15 +150,22 @@ def analyze_job(text: str) -> Tuple[str, int, str, go.Figure]:
 
 def _styled_layout(**kwargs) -> dict:
     defaults = dict(
-        template="plotly_white",
-        paper_bgcolor="#ffffff",
-        plot_bgcolor="#ffffff",
-        font=dict(family="Inter, system-ui, -apple-system, sans-serif", color="#0f172a", size=12),
+        template="plotly_dark",
+        paper_bgcolor="#131313",
+        plot_bgcolor="#131313",
+        font=dict(family="Geist, system-ui, -apple-system, sans-serif", color="#ededed", size=12),
         margin=dict(l=60, r=20, t=70, b=70),
         legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1,
-                    bgcolor="rgba(255,255,255,0.9)",
-                    bordercolor="#e2e8f0", borderwidth=1),
-        title=dict(font=dict(size=15, color="#0f172a", family="Inter, system-ui, sans-serif")),
+                    bgcolor="rgba(19,19,19,0.9)",
+                    bordercolor="#262626", borderwidth=1,
+                    font=dict(color="#a1a1a1", size=11)),
+        title=dict(font=dict(size=14, color="#ededed", family="Geist, system-ui, sans-serif")),
+        xaxis=dict(gridcolor="#1f1f1f", zerolinecolor="#262626",
+                   tickfont=dict(color="#a1a1a1", size=11),
+                   title=dict(font=dict(color="#a1a1a1", size=12))),
+        yaxis=dict(gridcolor="#1f1f1f", zerolinecolor="#262626",
+                   tickfont=dict(color="#a1a1a1", size=11),
+                   title=dict(font=dict(color="#a1a1a1", size=12))),
     )
     defaults.update(kwargs)
     return defaults
@@ -167,10 +174,12 @@ def _styled_layout(**kwargs) -> dict:
 def _empty_chart(title: str) -> go.Figure:
     fig = go.Figure()
     fig.update_layout(
-        title=title, height=420, template="plotly_white",
-        paper_bgcolor="#ffffff",
-        annotations=[dict(text="(no data)", x=0.5, y=0.5, xref="paper", yref="paper",
-                          showarrow=False, font=dict(size=14, color="#94a3b8"))],
+        title=title, height=420, template="plotly_dark",
+        paper_bgcolor="#131313",
+        plot_bgcolor="#131313",
+        font=dict(color="#ededed", family="Geist, system-ui, sans-serif"),
+        annotations=[dict(text="(no data available)", x=0.5, y=0.5, xref="paper", yref="paper",
+                          showarrow=False, font=dict(size=13, color="#666"))],
     )
     return fig
 
@@ -189,7 +198,7 @@ def build_flag_frequency_chart() -> go.Figure:
     fig = go.Figure(go.Bar(
         y=counts.index[::-1], x=counts.values[::-1], orientation="h",
         marker=dict(color=counts.values[::-1],
-                    colorscale=[[0, "#c7d2fe"], [1, "#4f46e5"]]),
+                    colorscale=[[0, "#0d4d3a"], [1, "#34d399"]]),
         hovertemplate="<b>%{y}</b><br>Detected in %{x} jobs<extra></extra>",
     ))
     fig.update_layout(**_styled_layout(
@@ -203,7 +212,7 @@ def build_risk_distribution_chart() -> go.Figure:
     if DF.empty or "Risk Level" not in DF.columns:
         return _empty_chart("Dataset not loaded")
     counts = DF["Risk Level"].value_counts()
-    colors = {"Low": "#10b981", "Medium": "#f59e0b", "High": "#dc2626"}
+    colors = {"Low": "#34d399", "Medium": "#f59e0b", "High": "#ef4444"}
     fig = go.Figure(go.Pie(
         labels=counts.index, values=counts.values,
         marker=dict(colors=[colors.get(l, "#888") for l in counts.index]),
@@ -219,7 +228,8 @@ def build_score_distribution_chart() -> go.Figure:
         return _empty_chart("Dataset not loaded")
     scores = DF["Score"].dropna()
     fig = go.Figure(go.Histogram(
-        x=scores, nbinsx=15, marker_color="#4f46e5",
+        x=scores, nbinsx=15, marker_color="#34d399",
+        marker_line_color="#0d4d3a", marker_line_width=1,
         hovertemplate="Score range: %{x}<br>Jobs: %{y}<extra></extra>",
     ))
     fig.update_layout(**_styled_layout(
@@ -236,11 +246,14 @@ def build_score_distribution_chart() -> go.Figure:
 
 def render_kpi_cards() -> str:
     if DF.empty:
-        return ('<div style="background:#fff;padding:32px;text-align:center;'
-                'border-radius:20px;border:1px solid #e2e8f0;">'
-                '<div style="font-size:32px;margin-bottom:8px;">📊</div>'
-                '<div style="color:#475569;font-size:14px;">'
-                'Upload <code style="background:#eef2ff;color:#4f46e5;padding:2px 6px;border-radius:4px;">job_description_data.xlsx</code> to populate KPIs.'
+        return ('<div style="background:#131313;padding:32px;text-align:center;'
+                'border-radius:12px;border:1px solid #262626;">'
+                '<div style="font-family:\'Geist Mono\',monospace;font-size:11px;'
+                'color:#666;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:12px;">No Data</div>'
+                '<div style="color:#a1a1a1;font-size:14px;">'
+                'Upload <code style="background:#161616;color:#34d399;padding:2px 6px;border-radius:4px;'
+                'font-family:\'Geist Mono\',monospace;font-size:0.85em;border:1px solid #1f1f1f;">'
+                'job_description_data.xlsx</code> to populate metrics.'
                 '</div></div>')
 
     total_jobs = len(DF)
@@ -254,37 +267,38 @@ def render_kpi_cards() -> str:
             all_flags.extend(label for label, _ in extract_flag_labels(str(cell)))
     top_flag = pd.Series(all_flags).value_counts().index[0] if all_flags else "—"
 
-    def card(label, value, sublabel, accent):
+    def card(label, value, delta_text, accent_color="#34d399"):
         return f"""
-        <div style="position:relative;background:#ffffff;border-radius:16px;
-                    padding:24px 22px;border:1px solid #e2e8f0;
-                    box-shadow:0 1px 2px rgba(15,23,42,0.04),0 1px 3px rgba(15,23,42,0.06);
-                    overflow:hidden;transition:transform 0.15s,box-shadow 0.15s;">
-            <div style="position:absolute;top:0;left:0;right:0;height:3px;
-                        background:linear-gradient(90deg,{accent},#06b6d4);"></div>
-            <div style="color:#94a3b8;font-size:11px;font-weight:600;
-                        text-transform:uppercase;letter-spacing:0.08em;margin-bottom:12px;">
+        <div style="background:#131313;border:1px solid #262626;border-radius:12px;
+                    padding:20px 22px;position:relative;overflow:hidden;
+                    transition:border-color 0.15s, background 0.15s;">
+            <div style="font-family:'Geist Mono','SF Mono',monospace;
+                        color:#666;font-size:11px;font-weight:500;
+                        text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;">
                 {label}
             </div>
-            <div style="color:#0f172a;font-size:32px;font-weight:800;line-height:1;
-                        letter-spacing:-0.03em;margin-bottom:8px;
-                        font-family:'Inter',-apple-system,system-ui,sans-serif;">
+            <div style="color:#ededed;font-size:32px;font-weight:600;line-height:1;
+                        letter-spacing:-0.03em;margin-bottom:10px;
+                        font-family:'Geist',-apple-system,system-ui,sans-serif;">
                 {value}
             </div>
-            <div style="color:#475569;font-size:13px;font-weight:500;">
-                {sublabel}
+            <div style="display:flex;align-items:center;gap:6px;
+                        font-family:'Geist Mono',monospace;font-size:11px;color:#a1a1a1;">
+                <span style="display:inline-block;width:6px;height:6px;border-radius:50%;
+                             background:{accent_color};box-shadow:0 0 8px {accent_color};"></span>
+                <span>{delta_text}</span>
             </div>
         </div>"""
 
     cards = [
-        card("Jobs Analyzed",   f"{total_jobs}",        "Real labeled postings",  "#4f46e5"),
-        card("Avg Risk Score",  f"{avg_score:.1f}",     "Across all postings",    "#0ea5e9"),
-        card("High-Risk Share", f"{high_pct:.0f}%",     "Postings flagged High",  "#dc2626"),
-        card("Top Red Flag",    top_flag.split(' ')[0].title() if top_flag != "—" else "—",
-             top_flag if top_flag != "—" else "No data",                          "#ea580c"),
+        card("Total.Jobs",      f"{total_jobs}",        "real labeled postings",   "#34d399"),
+        card("Avg.Score",       f"{avg_score:.1f}",     "weighted across dataset", "#60a5fa"),
+        card("High.Risk %",     f"{high_pct:.0f}%",     f"{risk_counts.get('High', 0)} postings flagged", "#ef4444"),
+        card("Top.Signal",      top_flag.split(' ')[0].title() if top_flag != "—" else "—",
+             top_flag if top_flag != "—" else "no data", "#f59e0b"),
     ]
-    return ('<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));'
-            'gap:16px;margin-bottom:32px;">' + "".join(cards) + "</div>")
+    return ('<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));'
+            'gap:12px;margin-bottom:32px;">' + "".join(cards) + "</div>")
 
 
 # =========================================================
@@ -415,8 +429,9 @@ def load_css() -> str:
 with gr.Blocks(title="Job Risk Analyzer — CS1 Group 14") as demo:
 
     gr.Markdown(
-        "# Job Description Risk Analyzer\n"
-        "*AI-powered red-flag detection — CS1 Group 14 — AI for Big Data Management*",
+        "# Job Risk Analyzer\n"
+        "Detect hidden risk patterns in job postings using a weighted signal taxonomy "
+        "calibrated on 47 real labeled descriptions.",
         elem_id="escp_title",
     )