Update app.py

app.py

@@ -1,195 +1,212 @@
-# app.py – Titanic Gradio App (volledige versie, NL, met achtergrond + zonsondergangeffect)
+# app.py – Titanic Data Explorer – Gradio One-Page Edition (Glossy Night Sky)
 import gradio as gr
 import pandas as pd
+import numpy as np
+import os
+import plotly.express as px
+import plotly.graph_objects as go
 from sklearn.model_selection import train_test_split
 from sklearn.preprocessing import LabelEncoder
+from sklearn.metrics import accuracy_score, confusion_matrix, roc_auc_score, roc_curve
 from sklearn.ensemble import RandomForestClassifier
 from sklearn.linear_model import LogisticRegression
-from sklearn.metrics import accuracy_score
-import plotly.express as px
-import numpy as np
-import os
 
 # =======================
-# DATA LADEN
+# DATA
 # =======================
-REQUIRED_COLS = {"survived", "pclass", "sex", "age", "sibsp", "parch", "fare", "embarked"}
-
-def load_data(csv_path="Titanic-Dataset.csv"):
-    if not os.path.exists(csv_path):
-        raise FileNotFoundError(f"Bestand niet gevonden: {csv_path}. Plaats het in de root van de Space.")
-    df = pd.read_csv(csv_path)
-    df.columns = [c.strip().lower() for c in df.columns]
-    missing = REQUIRED_COLS - set(df.columns)
-    if missing:
-        raise ValueError(f"Ontbrekende kolommen in dataset: {', '.join(sorted(missing))}")
-    # Missende waarden invullen
+def load_data(path="Titanic-Dataset.csv"):
+    if not os.path.exists(path):
+        raise FileNotFoundError("❌ Titanic-Dataset.csv niet gevonden in de rootmap.")
+    df = pd.read_csv(path)
+    df.columns = [c.lower().strip() for c in df.columns]
+
+    # kolommen check
+    req = {"survived", "pclass", "sex", "age", "sibsp", "parch", "fare", "embarked"}
+    miss = req - set(df.columns)
+    if miss:
+        raise ValueError(f"Ontbrekende kolommen: {miss}")
+
+    # missende waarden vullen
     for col in df.columns:
         if df[col].isna().any():
             if df[col].dtype == "object":
-                df[col] = df[col].fillna(df[col].mode().iloc[0])
+                df[col] = df[col].fillna(df[col].mode()[0])
             else:
                 df[col] = df[col].fillna(df[col].median())
+
+    df["family_size"] = df["sibsp"] + df["parch"] + 1
+    df["sex"] = df["sex"].astype(str).str.title()
+    df["embarked"] = df["embarked"].astype(str).str.upper()
+    df["status"] = df["survived"].map({0: "Niet overleefd", 1: "Overleefd"})
     return df
 
 df = load_data()
 
 # =======================
-# MODEL FUNCTIES
+# PLOTS
+# =======================
+def make_plot(fig, title):
+    fig.update_layout(
+        title=title,
+        paper_bgcolor="rgba(0,0,0,0)",
+        plot_bgcolor="rgba(0,0,0,0)",
+        font=dict(color="#EAF2FF"),
+        title_font=dict(size=18, color="#FFD26A"),
+        margin=dict(l=40, r=40, t=60, b=40)
+    )
+    return fig
+
+def plot_class_distribution(x):
+    f = px.pie(x, names="pclass", color="pclass", color_discrete_sequence=px.colors.sequential.Blues)
+    return make_plot(f, "Verdeling per Klasse")
+
+def plot_survival_heatmap(x):
+    pivot = x.pivot_table(index="sex", columns="pclass", values="survived", aggfunc="mean")
+    f = go.Figure(data=go.Heatmap(
+        z=pivot.values,
+        x=[str(c) for c in pivot.columns],
+        y=pivot.index,
+        colorscale="YlGnBu",
+        zmin=0,
+        zmax=1
+    ))
+    return make_plot(f, "Overlevingspercentage per Geslacht en Klasse")
+
+def plot_density_age_fare(x):
+    f = px.density_contour(x, x="age", y="fare", color="status", marginal_x="histogram", marginal_y="histogram")
+    return make_plot(f, "Leeftijd vs Ticketprijs (dichtheidsverdeling)")
+
+def plot_bubble_family_fare(x):
+    f = px.scatter(
+        x, x="fare", y="family_size", size="age", color="status",
+        hover_data=["sex", "pclass"], size_max=40, color_discrete_sequence=px.colors.qualitative.Set3
+    )
+    return make_plot(f, "Bubble Chart — Fare vs Family Size vs Age")
+
+def plot_sunburst(x):
+    f = px.sunburst(x, path=["sex", "pclass", "status"], color="status",
+                    color_discrete_map={"Overleefd": "#FFD26A", "Niet overleefd": "#1E3E78"})
+    return make_plot(f, "Sunburst — Geslacht → Klasse → Overleving")
+
+def plot_treemap(x):
+    f = px.treemap(x, path=["embarked", "pclass", "status"], values="fare",
+                   color="status", color_discrete_map={"Overleefd": "#FFD26A", "Niet overleefd": "#1E3E78"})
+    return make_plot(f, "Treemap — Vertrekhaven → Klasse → Overleving")
+
+def plot_corr_heatmap(x):
+    corr = x[["age", "fare", "family_size", "pclass", "sibsp", "parch", "survived"]].corr()
+    f = go.Figure(data=go.Heatmap(z=corr.values, x=corr.columns, y=corr.columns,
+                                  colorscale="Blues", zmin=-1, zmax=1))
+    return make_plot(f, "Correlatiematrix (numerieke variabelen)")
+
 # =======================
-def train_model(modeltype="Random Forest"):
-    X = df.drop("survived", axis=1).copy()
-    y = df["survived"].astype(int).copy()
-    # Encode categorisch
+# MACHINE LEARNING
+# =======================
+def train_and_evaluate(x):
+    X = x[["pclass", "sex", "age", "fare", "embarked", "family_size", "sibsp", "parch"]].copy()
+    y = x["survived"].astype(int)
     for c in X.select_dtypes("object").columns:
         le = LabelEncoder()
         X[c] = le.fit_transform(X[c])
-    X_train, X_test, y_train, y_test = train_test_split(
-        X, y, test_size=0.2, random_state=42, stratify=y
-    )
-    if modeltype == "Random Forest":
-        model = RandomForestClassifier(n_estimators=300, random_state=42)
-    else:
-        model = LogisticRegression(max_iter=1000)
+
+    X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.25, random_state=42)
+    model = RandomForestClassifier(n_estimators=300, random_state=42)
     model.fit(X_train, y_train)
-    pred = model.predict(X_test)
-    acc = accuracy_score(y_test, pred)
-    return model, acc
+    y_pred = model.predict(X_test)
+    acc = accuracy_score(y_test, y_pred)
+    auc = roc_auc_score(y_test, model.predict_proba(X_test)[:, 1])
+    cm = confusion_matrix(y_test, y_pred)
+
+    fig_cm = go.Figure(data=go.Heatmap(z=cm, text=cm, texttemplate="%{text}", colorscale="Blues"))
+    fig_cm = make_plot(fig_cm, "Confusion Matrix")
+
+    return f"🎯 **Nauwkeurigheid:** {acc:.2%} | **ROC AUC:** {auc:.3f}", fig_cm
 
 # =======================
-# TABS
+# GRADIO INTERFACE
 # =======================
-
-# Tab 1 – Introductie
-def tab_intro():
-    html = """
-    <h1 style='text-align:center; color:white;'>🛳️ Titanic Overlevingsanalyse</h1>
-    <p style='text-align:center; color:white; max-width:820px; margin:auto;'>
-        Ontdek de data achter de tragedie van de Titanic. 
-        Verken patronen, train machine-learningmodellen en bereken jouw kans om te overleven.
-    </p>
-    <div style='text-align:center; color:#d6e3ff; margin-top:10px;'>
-        Datasetkolommen gedetecteerd: <code>survived, pclass, sex, age, sibsp, parch, fare, embarked</code>
-    </div>
-    """
-    return html
-
-# Tab 2 – Verkenning
-def tab_verkenning():
-    fig1 = px.histogram(
-        df,
-        x="age",
-        color=df["survived"].map({0: "Niet overleefd", 1: "Overleefd"}),
-        nbins=30,
-        title="Leeftijdsverdeling per overlevingsstatus",
-    )
-    fig1.update_layout(legend_title_text="Status", bargap=0.05)
-    fig2 = px.box(
-        df,
-        x="pclass",
-        y="fare",
-        color=df["survived"].map({0: "Niet overleefd", 1: "Overleefd"}),
-        title="Ticketprijs per klasse",
+def dashboard():
+    acc_text, cm_fig = train_and_evaluate(df)
+    return (
+        f"{len(df)}", f"{df['survived'].sum()}",
+        f"{df['survived'].mean()*100:.1f}%", ", ".join(map(str, sorted(df['pclass'].unique()))),
+        plot_class_distribution(df),
+        plot_survival_heatmap(df),
+        plot_density_age_fare(df),
+        plot_bubble_family_fare(df),
+        plot_sunburst(df),
+        plot_treemap(df),
+        plot_corr_heatmap(df),
+        acc_text, cm_fig,
+        df.head(200)
     )
-    fig2.update_layout(legend_title_text="Status")
-    return fig1, fig2
-
-# Tab 3 – Machine Learning
-def tab_model(model_type):
-    try:
-        _, acc = train_model(model_type)
-        return f"Het {model_type}-model behaalt een nauwkeurigheid van **{acc:.2%}**."
-    except Exception as e:
-        return f"⚠️ Fout bij trainen: {e}"
-
-# Tab 4 – Voorspelling
-def predict_overleven(pclass, sex, age, sibsp, parch, fare, embarked):
-    X = df.drop("survived", axis=1).copy()
-    y = df["survived"].astype(int).copy()
-    for c in X.select_dtypes("object").columns:
-        le = LabelEncoder()
-        X[c] = le.fit_transform(X[c])
-    rf = RandomForestClassifier(n_estimators=300, random_state=42)
-    rf.fit(X, y)
-    # Encode invoer
-    sex_enc = 1 if str(sex).lower().startswith("v") else 0  # Vrouw=1, Man=0
-    embarked_enc = {"C": 0, "Q": 1, "S": 2}.get(str(embarked).strip()[0].upper(), 2)
-    row = [[int(pclass), sex_enc, float(age), int(sibsp), int(parch), float(fare), embarked_enc]]
-    p = rf.predict_proba(row)[0, 1]
-    return f"🎯 Je geschatte overlevingskans is **{p:.1%}**."
 
 # =======================
-# UI – Gradio
+# CSS THEMA
 # =======================
-custom_css = """
+CUSTOM_CSS = """
 body {
-    background: url('titanic_bg.png') no-repeat center center fixed;
-    background-size: cover;
-    color: white;
+  background-image: url('titanic_bg.png');
+  background-size: cover;
+  background-position: center;
+  color: #EAF2FF;
 }
 .gradio-container {
-    background: rgba(10, 16, 26, 0.70);
+  background: rgba(10, 16, 26, 0.7);
 }
 .gradio-container::before {
-    content: '';
-    position: fixed;
-    top: 0; right: 0;
-    width: 42vw; height: 42vh;
-    background: radial-gradient(circle at top right, rgba(255,190,120,0.45) 0%, rgba(255,190,120,0.10) 45%, transparent 70%);
-    pointer-events: none;
-    z-index: 0;
-}
-h1, h2, h3, p, label, .gr-markdown { color: #eef5ff !important; }
-label { font-weight: 600; }
-div.svelte-1ipelgc, .block.padded { 
-    background: rgba(20, 28, 42, 0.70) !important; 
-    border-radius: 16px; 
-    border: 1px solid rgba(60, 80, 110, 0.5);
-}
-button.svelte-1ipelgc, .tabitem { 
-    backdrop-filter: blur(2px);
+  content: "";
+  position: fixed;
+  top: 0; right: 0;
+  width: 40vw; height: 40vh;
+  background: radial-gradient(circle at top right, rgba(255,190,120,0.4) 0%, transparent 70%);
+  pointer-events: none;
 }
+.kpi {background: rgba(20,28,42,0.8); border-radius: 12px; padding: 12px; text-align:center;}
+.kpi .value {font-size:1.6rem; font-weight:800; color:#FFD26A;}
+.kpi .label {font-size:0.9rem; color:#C4D7F0;}
+.section-title {font-size:1.3rem; font-weight:800; color:#FFD26A; margin-top:12px;}
 """
 
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="blue", secondary_hue="blue")) as demo:
-    gr.Markdown("<h1 style='text-align:center;'>🛳️ Titanic Data Explorer</h1>")
-    with gr.Tabs():
-        with gr.Tab("Introductie"):
-            gr.HTML(tab_intro())
-
-        with gr.Tab("Verkenning"):
-            btn1 = gr.Button("Toon grafieken")
-            out1 = gr.Plot(label="Leeftijdsverdeling")
-            out2 = gr.Plot(label="Ticketprijs per klasse")
-            btn1.click(fn=tab_verkenning, outputs=[out1, out2])
-
-        with gr.Tab("Machine Learning"):
-            with gr.Row():
-                model_dropdown = gr.Dropdown(
-                    ["Random Forest", "Logistic Regression"],
-                    label="Kies modeltype",
-                    value="Random Forest",
-                )
-                btn2 = gr.Button("Train model")
-            out3 = gr.Markdown()
-            btn2.click(fn=tab_model, inputs=model_dropdown, outputs=out3)
-
-        with gr.Tab("Voorspel je kans"):
-            with gr.Row():
-                pclass = gr.Slider(1, 3, 2, step=1, label="Klasse (1=1e, 3=3e)")
-                sex = gr.Radio(["Man", "Vrouw"], label="Geslacht", value="Man")
-                age = gr.Slider(0, 80, 30, label="Leeftijd")
-            with gr.Row():
-                sibsp = gr.Slider(0, 8, 1, step=1, label="Aantal broers/zussen aan boord")
-                parch = gr.Slider(0, 6, 0, step=1, label="Aantal ouders/kinderen aan boord")
-                fare = gr.Slider(0, 500, 50, label="Ticketprijs (£)")
-                embarked = gr.Radio(["C", "Q", "S"], label="Vertrekhaven", value="S")
-            btn3 = gr.Button("Voorspel")
-            out4 = gr.Markdown()
-            btn3.click(
-                fn=predict_overleven,
-                inputs=[pclass, sex, age, sibsp, parch, fare, embarked],
-                outputs=out4,
-            )
+with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Soft(primary_hue="blue", secondary_hue="blue")) as demo:
+    gr.HTML("<h1 style='text-align:center;margin-top:10px;'>🛳️ Titanic Data Explorer – Night Sky Edition</h1>")
+    gr.HTML("<p style='text-align:center;color:#C4D7F0;'>Interactieve visualisatie & machine learning analyse</p>")
+
+    with gr.Row():
+        kpi1 = gr.HTML("<div class='kpi'><div class='value'>–</div><div class='label'>Totaal passagiers</div></div>")
+        kpi2 = gr.HTML("<div class='kpi'><div class='value'>–</div><div class='label'>Overlevenden</div></div>")
+        kpi3 = gr.HTML("<div class='kpi'><div class='value'>–</div><div class='label'>% Overleefd</div></div>")
+        kpi4 = gr.HTML("<div class='kpi'><div class='value'>–</div><div class='label'>Klassen aanwezig</div></div>")
+
+    gr.HTML("<div class='section-title'>📊 Verkenning & Patronen</div>")
+    with gr.Row():
+        fig1 = gr.Plot(label="Klasse")
+        fig2 = gr.Plot(label="Heatmap")
+    with gr.Row():
+        fig3 = gr.Plot(label="Density")
+        fig4 = gr.Plot(label="Bubble Chart")
+    with gr.Row():
+        fig5 = gr.Plot(label="Sunburst")
+        fig6 = gr.Plot(label="Treemap")
+    with gr.Row():
+        fig7 = gr.Plot(label="Correlaties")
+
+    gr.HTML("<div class='section-title'>🤖 Machine Learning</div>")
+    acc_md = gr.Markdown()
+    fig_cm = gr.Plot(label="Confusion Matrix")
+
+    gr.HTML("<div class='section-title'>🗂️ Data voorbeeld</div>")
+    table = gr.Dataframe(height=300)
+
+    def update_dashboard():
+        return dashboard()
+
+    demo.load(
+        fn=update_dashboard,
+        inputs=[],
+        outputs=[kpi1, kpi2, kpi3, kpi4,
+                 fig1, fig2, fig3, fig4, fig5, fig6, fig7,
+                 acc_md, fig_cm, table]
+    )
 
 demo.launch()