Upload 2 files

src/app.py

@@ -0,0 +1,322 @@
+import streamlit as st
+import pandas as pd
+import numpy as np
+import time
+import os
+
+st.set_page_config(
+    page_title="BurnoutIQ — Developer Burnout Intelligence",
+    page_icon="🔥",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
+
+# ── Custom CSS ──────────────────────────────────────────────────────────────
+st.markdown("""
+<style>
+@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Mono:wght@400;500&family=Epilogue:wght@300;400;500;600&display=swap');
+
+html, body, [data-testid="stAppViewContainer"], [data-testid="stMain"] {
+  background: #0d0f12 !important;
+  color: #e8eaf0 !important;
+  font-family: 'Epilogue', sans-serif !important;
+}
+[data-testid="stHeader"] { background: #151820 !important; border-bottom: 1px solid rgba(255,255,255,0.07); }
+#MainMenu, footer { visibility: hidden; }
+[data-testid="stMainBlockContainer"] { padding-top: 0 !important; max-width: 1100px; }
+
+[data-testid="stSlider"] label {
+  font-family: 'DM Mono', monospace !important;
+  font-size: 11px !important;
+  color: #7a7f8e !important;
+  text-transform: uppercase;
+  letter-spacing: .4px;
+}
+[data-testid="stButton"] button {
+  background: #5b8dee !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 10px !important;
+  font-family: 'Epilogue', sans-serif !important;
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  padding: 0.65rem 2rem !important;
+}
+[data-testid="stButton"] button:hover { opacity: 0.88 !important; }
+
+[data-testid="stTabs"] [role="tab"] {
+  font-family: 'DM Mono', monospace !important;
+  font-size: 12px !important;
+  color: #7a7f8e !important;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+}
+[data-testid="stTabs"] [role="tab"][aria-selected="true"] {
+  color: #e8eaf0 !important;
+  border-bottom: 2px solid #5b8dee !important;
+}
+</style>
+""", unsafe_allow_html=True)
+
+
+# ── Data ─────────────────────────────────────────────────────────────────────
+DATASET = "developer_burnout_dataset_7000.csv"
+
+@st.cache_data
+def load_data():
+    if os.path.exists(DATASET):
+        return pd.read_csv(DATASET)
+    np.random.seed(42)
+    n = 7000
+    df = pd.DataFrame({
+        "age":               np.random.randint(22, 55, n).astype(float),
+        "experience_years":  np.random.randint(0, 25, n).astype(float),
+        "daily_work_hours":  np.round(np.random.uniform(4, 14, n), 2),
+        "sleep_hours":       np.round(np.random.uniform(3, 10, n), 2),
+        "caffeine_intake":   np.random.randint(0, 8, n).astype(float),
+        "bugs_per_day":      np.random.randint(0, 25, n).astype(float),
+        "commits_per_day":   np.random.randint(0, 30, n).astype(float),
+        "meetings_per_day":  np.random.randint(0, 10, n).astype(float),
+        "screen_time":       np.round(np.random.uniform(6, 18, n), 2),
+        "exercise_hours":    np.round(np.random.uniform(0, 5, n), 2),
+        "stress_level":      np.round(np.random.uniform(5, 98, n), 2),
+    })
+    df["burnout_level"] = pd.cut(df["stress_level"], bins=[0,35,65,100], labels=["Low","Medium","High"])
+    return df
+
+df       = load_data()
+df_clean = df.dropna(subset=["burnout_level"])
+low_df   = df_clean[df_clean["burnout_level"] == "Low"]
+med_df   = df_clean[df_clean["burnout_level"] == "Medium"]
+high_df  = df_clean[df_clean["burnout_level"] == "High"]
+total    = len(df_clean)
+
+def pct(n): return round(n / total * 100, 1)
+
+
+# ── Hero ──────────────────────────────────────────────────────────────────────
+st.markdown("""
+<div style="max-width:700px;margin:0 auto;padding:3.5rem 1rem 2rem;text-align:center">
+  <div style="display:inline-block;background:rgba(91,141,238,.12);border:1px solid rgba(91,141,238,.25);
+    color:#5b8dee;font-family:'DM Mono',monospace;font-size:11px;padding:4px 14px;
+    border-radius:100px;margin-bottom:1.2rem;letter-spacing:.5px">
+    7,000 developer records · live analysis
+  </div>
+  <h1 style="font-family:'DM Serif Display',serif;font-size:clamp(1.9rem,4vw,2.8rem);
+    line-height:1.15;letter-spacing:-.4px;margin-bottom:1rem;color:#f0f2f8">
+    Developer Burnout <em style="font-style:italic;color:#3ecfb2">Intelligence</em>
+  </h1>
+  <p style="color:#7a7f8e;font-size:15px;max-width:500px;margin:0 auto;line-height:1.7">
+    Explore burnout patterns, analyze risk factors, and predict burnout levels
+    across 7,000 software engineers.
+  </p>
+</div>
+""", unsafe_allow_html=True)
+
+
+# ── Tabs ────────────���─────────────────────────────────────────────────────────
+tab1, tab2, tab3 = st.tabs(["Dashboard", "Risk Predictor", "Dataset"])
+
+
+# ════════════════════════════════════════
+# TAB 1 — DASHBOARD
+# ════════════════════════════════════════
+with tab1:
+    st.markdown(f"""
+    <div style="display:flex;align-items:baseline;gap:.8rem;margin:1.5rem 0 1.2rem;
+      padding-bottom:.6rem;border-bottom:1px solid rgba(255,255,255,0.07)">
+      <span style="font-family:'DM Serif Display',serif;font-size:1.3rem;color:#f0f2f8;font-weight:400">Dataset Overview</span>
+      <span style="font-family:'DM Mono',monospace;font-size:11px;color:#7a7f8e">{total:,} clean records</span>
+    </div>
+    """, unsafe_allow_html=True)
+
+    # Stat cards
+    for col, label, value, sub, color in zip(
+        st.columns(4),
+        ["total developers", "low burnout", "medium burnout", "high burnout"],
+        [f"{total:,}", f"{pct(len(low_df))}%", f"{pct(len(med_df))}%", f"{pct(len(high_df))}%"],
+        ["records analyzed", f"{len(low_df):,} developers", f"{len(med_df):,} developers", f"{len(high_df):,} developers"],
+        ["#5b8dee", "#3ecfb2", "#e5c07b", "#e06c75"]
+    ):
+        with col:
+            st.markdown(f"""
+            <div style="background:#1c2029;border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:.5rem">
+              <div style="font-family:'DM Mono',monospace;font-size:11px;color:#7a7f8e;text-transform:uppercase;letter-spacing:.4px;margin-bottom:.4rem">{label}</div>
+              <div style="font-size:2rem;font-weight:600;color:{color};line-height:1">{value}</div>
+              <div style="font-size:11px;color:#7a7f8e;margin-top:.3rem">{sub}</div>
+            </div>""", unsafe_allow_html=True)
+
+    # Distribution bar
+    lp, mp, hp = pct(len(low_df)), pct(len(med_df)), pct(len(high_df))
+    st.markdown(f"""
+    <div style="height:7px;display:flex;border-radius:100px;overflow:hidden;gap:2px;margin:.5rem 0">
+      <div style="width:{lp}%;background:#3ecfb2;border-radius:100px"></div>
+      <div style="width:{mp}%;background:#e5c07b;border-radius:100px"></div>
+      <div style="width:{hp}%;background:#e06c75;border-radius:100px"></div>
+    </div>
+    <div style="display:flex;gap:1.3rem;font-family:'DM Mono',monospace;font-size:11px;color:#7a7f8e;margin-bottom:1.8rem">
+      <span><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#3ecfb2;margin-right:5px;vertical-align:middle"></span>Low {lp}%</span>
+      <span><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#e5c07b;margin-right:5px;vertical-align:middle"></span>Medium {mp}%</span>
+      <span><span style="display:inline-block;width:7px;height:7px;border-radius:50%;background:#e06c75;margin-right:5px;vertical-align:middle"></span>High {hp}%</span>
+    </div>
+    """, unsafe_allow_html=True)
+
+    # Charts
+    import altair as alt
+
+    chart_data = pd.DataFrame({
+        "Burnout Level": ["Low", "Medium", "High"],
+        "Avg Stress":   [round(low_df["stress_level"].mean(),1), round(med_df["stress_level"].mean(),1), round(high_df["stress_level"].mean(),1)],
+        "Avg Sleep":    [round(low_df["sleep_hours"].mean(),1),  round(med_df["sleep_hours"].mean(),1),  round(high_df["sleep_hours"].mean(),1)],
+        "Avg Work Hrs": [round(low_df["daily_work_hours"].mean(),1), round(med_df["daily_work_hours"].mean(),1), round(high_df["daily_work_hours"].mean(),1)],
+    })
+
+    COLOR_SCALE = alt.Scale(domain=["Low","Medium","High"], range=["#3ecfb2","#e5c07b","#e06c75"])
+    CHART_BG    = dict(background="#1c2029", view=alt.ViewConfig(stroke="transparent"))
+
+    def make_bar(field, title):
+        return alt.Chart(chart_data).mark_bar(
+            cornerRadiusTopLeft=6, cornerRadiusTopRight=6, opacity=0.85
+        ).encode(
+            x=alt.X("Burnout Level:N", axis=alt.Axis(labelColor="#7a7f8e", tickColor="transparent", domainColor="transparent", labelFont="DM Mono", title=None)),
+            y=alt.Y(f"{field}:Q", axis=alt.Axis(labelColor="#7a7f8e", gridColor="rgba(255,255,255,0.05)", domainOpacity=0, tickOpacity=0, labelFont="DM Mono", title=None)),
+            color=alt.Color("Burnout Level:N", scale=COLOR_SCALE, legend=None),
+            tooltip=["Burnout Level", field]
+        ).properties(
+            title=alt.TitleParams(title, color="#7a7f8e", font="DM Mono", fontSize=11), height=200
+        ).configure(**CHART_BG)
+
+    col1, col2 = st.columns(2)
+    with col1:
+        st.markdown('<div style="background:#1c2029;border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:1.2rem">', unsafe_allow_html=True)
+        st.altair_chart(make_bar("Avg Stress",   "AVG STRESS LEVEL BY BURNOUT"),    use_container_width=True)
+        st.markdown('</div>', unsafe_allow_html=True)
+    with col2:
+        st.markdown('<div style="background:#1c2029;border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:1.2rem">', unsafe_allow_html=True)
+        st.altair_chart(make_bar("Avg Sleep",    "AVG SLEEP HOURS BY BURNOUT"),     use_container_width=True)
+        st.markdown('</div>', unsafe_allow_html=True)
+
+    col3, col4 = st.columns(2)
+    with col3:
+        st.markdown('<div style="background:#1c2029;border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:1.2rem">', unsafe_allow_html=True)
+        st.altair_chart(make_bar("Avg Work Hrs", "AVG DAILY WORK HOURS BY BURNOUT"), use_container_width=True)
+        st.markdown('</div>', unsafe_allow_html=True)
+    with col4:
+        st.markdown('<div style="background:#1c2029;border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:1.2rem">', unsafe_allow_html=True)
+        dist_data = pd.DataFrame({
+            "Level": ["Low","Medium","High"],
+            "Count": [len(low_df), len(med_df), len(high_df)]
+        })
+        pie = alt.Chart(dist_data).mark_arc(
+            innerRadius=55, outerRadius=90, padAngle=0.02
+        ).encode(
+            theta=alt.Theta("Count:Q"),
+            color=alt.Color("Level:N", scale=COLOR_SCALE,
+                legend=alt.Legend(labelColor="#7a7f8e", labelFont="DM Mono", title=None, orient="bottom", symbolSize=60)),
+            tooltip=["Level","Count"]
+        ).properties(
+            title=alt.TitleParams("BURNOUT DISTRIBUTION", color="#7a7f8e", font="DM Mono", fontSize=11), height=200
+        ).configure(**CHART_BG)
+        st.altair_chart(pie, use_container_width=True)
+        st.markdown('</div>', unsafe_allow_html=True)
+
+
+# ════════════════════════════════════════
+# TAB 2 — PREDICTOR
+# ════════════════════════════════════════
+with tab2:
+    st.markdown("""
+    <div style="display:flex;align-items:baseline;gap:.8rem;margin:1.5rem 0 1.5rem;
+      padding-bottom:.6rem;border-bottom:1px solid rgba(255,255,255,0.07)">
+      <span style="font-family:'DM Serif Display',serif;font-size:1.3rem;color:#f0f2f8;font-weight:400">Burnout Risk Predictor</span>
+      <span style="font-family:'DM Mono',monospace;font-size:11px;color:#7a7f8e">heuristic model</span>
+    </div>
+    """, unsafe_allow_html=True)
+
+    st.markdown('<div style="background:#1c2029;border:1px solid rgba(255,255,255,0.07);border-radius:14px;padding:2rem 2.2rem">', unsafe_allow_html=True)
+
+    ca, cb, cc = st.columns(3)
+    with ca:
+        work_hours  = st.slider("Daily Work Hours",    2.0, 16.0, 8.0,  0.5)
+        sleep_hours = st.slider("Sleep Hours / Night", 2.0, 12.0, 7.0,  0.5)
+    with cb:
+        stress      = st.slider("Stress Level (0–100)", 0,  100,  45,   1)
+        meetings    = st.slider("Meetings / Day",        0,  12,   3,    1)
+    with cc:
+        exercise    = st.slider("Exercise Hrs / Week",  0.0, 14.0, 2.0, 0.5)
+        screen_time = st.slider("Screen Time hrs/day",  4.0, 20.0, 10.0, 0.5)
+
+    st.markdown("<div style='height:.5rem'></div>", unsafe_allow_html=True)
+
+    if st.button("Analyze Risk →"):
+        with st.spinner("Analyzing..."):
+            time.sleep(0.6)
+
+        score = ((work_hours - 6) * 4.5 + (7 - sleep_hours) * 5 + stress * 0.6
+                 + (meetings - 2) * 2.5 - exercise * 3 + (screen_time - 8) * 1.5)
+        score = max(0.0, min(100.0, score))
+
+        if score < 33:
+            level, desc  = "Low Burnout Risk", "Your current habits indicate a healthy work-life balance. Sleep is adequate and exercise offsets screen time effectively."
+            color, bg, bc = "#3ecfb2", "rgba(62,207,178,.06)", "rgba(62,207,178,.3)"
+        elif score < 66:
+            level, desc  = "Medium Burnout Risk", "Some risk factors are elevated. Consider reducing meetings, improving sleep, or adding more physical activity weekly."
+            color, bg, bc = "#e5c07b", "rgba(229,192,123,.06)", "rgba(229,192,123,.3)"
+        else:
+            level, desc  = "High Burnout Risk", "Multiple risk factors are significantly elevated. Reducing work hours, improving sleep, and managing stress are strongly advised."
+            color, bg, bc = "#e06c75", "rgba(224,108,117,.06)", "rgba(224,108,117,.3)"
+
+        st.markdown(f"""
+        <div style="background:{bg};border:1px solid {bc};border-radius:12px;padding:1.4rem;margin-top:1.2rem">
+          <div style="font-family:'DM Serif Display',serif;font-size:1.8rem;color:{color};margin-bottom:.3rem">{level}</div>
+          <div style="color:#7a7f8e;font-size:13px;line-height:1.65;margin-bottom:1rem">{desc}</div>
+          <div style="height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-bottom:5px">
+            <div style="width:{round(score)}%;height:100%;background:{color};border-radius:3px"></div>
+          </div>
+          <div style="display:flex;justify-content:space-between;font-family:'DM Mono',monospace;font-size:10px;color:#7a7f8e">
+            <span>Low risk</span><span>Score: {round(score)}/100</span><span>High risk</span>
+          </div>
+        </div>
+        """, unsafe_allow_html=True)
+
+        st.session_state["result"] = level
+        st.session_state["inputs"] = [work_hours, sleep_hours, stress, meetings, exercise, screen_time]
+
+    st.markdown('</div>', unsafe_allow_html=True)
+
+
+# ════════════════════════════════════════
+# TAB 3 — DATASET
+# ════════════════════════════════════════
+with tab3:
+    st.markdown("""
+    <div style="display:flex;align-items:baseline;gap:.8rem;margin:1.5rem 0 1.2rem;
+      padding-bottom:.6rem;border-bottom:1px solid rgba(255,255,255,0.07)">
+      <span style="font-family:'DM Serif Display',serif;font-size:1.3rem;color:#f0f2f8;font-weight:400">Dataset Sample</span>
+      <span style="font-family:'DM Mono',monospace;font-size:11px;color:#7a7f8e">first 20 records</span>
+    </div>
+    """, unsafe_allow_html=True)
+
+    cols = ["age","experience_years","daily_work_hours","sleep_hours",
+            "caffeine_intake","bugs_per_day","commits_per_day",
+            "meetings_per_day","stress_level","exercise_hours","burnout_level"]
+    display_df = df_clean[cols].head(20).reset_index(drop=True)
+
+    def color_burnout(val):
+        m = {"Low": "color: #3ecfb2", "Medium": "color: #e5c07b", "High": "color: #e06c75"}
+        return m.get(str(val), "")
+
+    st.dataframe(
+        display_df.style.map(color_burnout, subset=["burnout_level"]),
+        use_container_width=True,
+        height=420
+    )
+
+
+# ── Footer ────────────────────────────────────────────────────────────────────
+st.markdown("""
+<div style="border-top:1px solid rgba(255,255,255,0.07);margin-top:2rem;padding:1.5rem;
+  text-align:center;color:#7a7f8e;font-family:'DM Mono',monospace;font-size:12px">
+  BurnoutIQ &nbsp;·&nbsp; Streamlit &nbsp;·&nbsp; 7,000 developer records
+</div>
+""", unsafe_allow_html=True)