Update app.py

app.py

@@ -1,222 +1,280 @@
-# app.py – Titanic Data Explorer – Night Sky Edition (Gradio 4.44 compatibel)
+# app.py – Titanic Data Adventure (wit thema, verhalend, centrale afbeelding, interactieve overlevingskans)
 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
 from sklearn.ensemble import RandomForestClassifier
 
-# =======================
-# DATA
-# =======================
+# =========================
+# Data laden en voorbereiden
+# =========================
+REQUIRED = {"survived","pclass","sex","age","sibsp","parch","fare","embarked"}
+
 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]
+    missing = REQUIRED - set(df.columns)
+    if missing:
+        raise ValueError(f"Ontbrekende kolommen in dataset: {', '.join(sorted(missing))}")
 
-    req = {"survived", "pclass", "sex", "age", "sibsp", "parch", "fare", "embarked"}
-    miss = req - set(df.columns)
-    if miss:
-        raise ValueError(f"Ontbrekende kolommen: {miss}")
-
+    # Missende waarden invullen
     for col in df.columns:
         if df[col].isna().any():
             if df[col].dtype == "object":
-                df[col] = df[col].fillna(df[col].mode()[0])
+                df[col] = df[col].fillna(df[col].mode().iloc[0])
             else:
                 df[col] = df[col].fillna(df[col].median())
 
+    # Afgeleide features
     df["family_size"] = df["sibsp"] + df["parch"] + 1
+    df["status"] = df["survived"].map({0:"Niet overleefd", 1:"Overleefd"})
     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()
 
-# =======================
-# PLOTS
-# =======================
+# =========================
+# Model trainen (1x bij start)
+# =========================
+def train_model(dfx: pd.DataFrame):
+    X = dfx[["pclass","sex","age","sibsp","parch","fare","embarked","family_size"]].copy()
+    y = dfx["survived"].astype(int)
+
+    # Encode categorisch
+    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.25, random_state=42, stratify=y
+    )
+    model = RandomForestClassifier(n_estimators=300, random_state=42)
+    model.fit(X_train, y_train)
+    acc = model.score(X_test, y_test)
+    return model, acc
+
+model, model_acc = train_model(df)
+
+# =========================
+# Plots (duidelijk en informatief)
+# =========================
 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)
+        paper_bgcolor="rgba(255,255,255,0)",
+        plot_bgcolor="rgba(255,255,255,0)",
+        font=dict(color="#0B1C3F"),
+        title_font=dict(size=18, color="#1B4B91"),
+        margin=dict(l=40, r=40, t=50, b=40),
+        legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1),
     )
     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
+def plot_overleving_per_klasse(dfx):
+    f = px.bar(
+        dfx, x="pclass", color="status", barmode="group",
+        category_orders={"pclass":[1,2,3]},
+        color_discrete_map={"Overleefd":"#1B4B91","Niet overleefd":"#A3B1C6"},
     )
-    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)")
-
-# =======================
-# 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])
+    return make_plot(f, "Overleving per klasse")
 
-    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)
-    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
-
-# =======================
-# DASHBOARD
-# =======================
-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)
+def plot_leeftijdsverdeling(dfx):
+    f = px.histogram(
+        dfx, x="age", color="status", nbins=30, barmode="overlay", opacity=0.75,
+        color_discrete_map={"Overleefd":"#1B4B91","Niet overleefd":"#A3B1C6"},
+    )
+    return make_plot(f, "Leeftijdsverdeling per overlevingsstatus")
+
+def plot_geslacht(dfx):
+    f = px.pie(
+        dfx, names="sex", color="sex",
+        color_discrete_map={"Male":"#A3B1C6","Female":"#1B4B91"},
+        hole=0.35
+    )
+    return make_plot(f, "Verdeling geslacht (alle passagiers)")
+
+def plot_fare_vs_klasse(dfx):
+    f = px.box(
+        dfx, x="pclass", y="fare", color="status",
+        color_discrete_map={"Overleefd":"#1B4B91","Niet overleefd":"#A3B1C6"},
     )
+    return make_plot(f, "Ticketprijs per klasse (met overleving)")
+
+# =========================
+# Hero-afbeelding pad bepalen (png/jpg/jpeg fallback)
+# =========================
+def get_hero_image_path():
+    for name in ["titanic_bg.png", "titanic_bg.jpg", "titanic_bg.jpeg"]:
+        if os.path.exists(name):
+            return name
+    return None  # geen afbeelding gevonden
+
+HERO_PATH = get_hero_image_path()
+
+# =========================
+# Interactieve voorspelling + avontuur-tekst
+# =========================
+def predict_and_story(pclass, sex, age, sibsp, parch, fare, embarked):
+    # Encode invoer net als model
+    sex_enc = 1 if str(sex).lower().startswith("v") else 0   # Vrouw=1, Man=0
+    embarked_enc = {"C":0,"Q":1,"S":2}.get(embarked, 2)
+    family_size = int(sibsp) + int(parch) + 1
+
+    X_row = [[int(pclass), sex_enc, float(age), int(sibsp), int(parch), float(fare), embarked_enc, family_size]]
+    prob = float(model.predict_proba(X_row)[0,1])
+    pct = prob * 100
+
+    # Avontuur-tekst op basis van invoer en kans
+    klasse_txt = {1:"eerste", 2:"tweede", 3:"derde"}.get(int(pclass), "onbekende")
+    haven_txt = {"C":"Cherbourg","Q":"Queenstown","S":"Southampton"}.get(embarked, "een onbekende haven")
+    rol_txt = "vrouw" if sex_enc==1 else "man"
+
+    if pct >= 75:
+        tone = "Je kansen zijn uitzonderlijk goed."
+        ending = "De kou snijdt, maar je bereikt de sloep. Wanneer het schip achter je kantelt, drijf je weg, stil – ademloos, maar levend."
+    elif pct >= 50:
+        tone = "Je kansen zijn behoorlijk goed."
+        ending = "Het is chaotisch, mensen duwen en roepen. Je vindt een plek in een halfgevulde sloep. De nacht is lang, maar je overleeft."
+    elif pct >= 25:
+        tone = "De kansen zijn fifty-fifty; spanning stijgt."
+        ending = "Je wacht, je aarzelt – en dan komt een laatste gelegenheid. Je springt. De zee is donker, maar de horizon gloeit zwak."
+    else:
+        tone = "Het ziet er somber uit; hartverscheurend."
+        ending = "De dekken hellen over. Je klampt je vast. De oceaan is meedogenloos, maar je verhaal – en dat van zovelen – wordt nooit vergeten."
+
+    story = f"""
+### 🔮 Jouw overlevingskans: **{pct:.1f}%**
+
+**Situatie:** Je bent een **{rol_txt}** in de **{klasse_txt} klasse**, ingescheept in **{haven_txt}**.  
+Je bent **{int(age)}** jaar oud, reist met **{int(sibsp)}** broer(s)/zus(sen) en **{int(parch)}** ouder(s)/kind(eren).  
+Je ticket kostte **£{float(fare):.2f}** en je **familiegrootte** is **{family_size}**.
+
+**Analyse:** {tone} Het model weegt o.a. klasse, geslacht, leeftijd en familieomvang mee—patronen in de historische data.
 
-# =======================
-# CSS THEMA
-# =======================
+**Avontuur:**  
+De nacht is stil, sterren spiegelen in een vlakke zee. Het schip siddert. Fluiten, geroep, voetstappen.  
+Je voelt de houten reling koud onder je hand. {ending}
+"""
+    return story
+
+# =========================
+# UI (vast lay-out, wit thema, veel uitleg)
+# =========================
 CUSTOM_CSS = """
-body {
-  background-image: url('titanic_bg.png');
-  background-size: cover;
-  background-position: center;
-  color: #EAF2FF;
-}
-.gradio-container {
-  background: rgba(10, 16, 26, 0.75);
+body { background: #FFFFFF; color: #0B1C3F; }
+.gradio-container { background: #FFFFFF; }
+h1, h2, h3, h4 { color: #1B4B91; }
+.intro-card, .section {
+  background: #F9FBFF;
+  border: 1px solid #E0E6F3;
+  border-radius: 12px;
+  padding: 16px;
 }
-.gradio-container::before {
-  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;}
-.dataframe-container {
-  height: 320px;
-  overflow-y: auto;
-  background: rgba(20,28,42,0.7);
-  border-radius: 10px;
-  padding: 5px;
+.subtitle { color: #4F6FA9; }
+.hero-img img { border-radius: 12px; border: 1px solid #E0E6F3; }
+.kpi {
+  display:flex; flex-direction:column; align-items:center; justify-content:center;
+  background:#FFFFFF; border:1px solid #E0E6F3; border-radius:12px; padding:14px;
 }
+.kpi .value { font-size:1.6rem; font-weight:800; color:#1B4B91; }
+.kpi .label { font-size:.9rem; color:#3F557A; }
 """
 
-# =======================
-# UI
-# =======================
-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.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as demo:
+    # Titel
+    gr.Markdown("# 🛳️ Titanic Data Adventure")
+    gr.Markdown(
+        "<p class='subtitle' style='text-align:center;'>"
+        "Een verhalende ontdekkingstocht door data, besluitvorming en overlevingskansen."
+        "</p>"
+    )
 
+    # Intro: afbeelding + verhaal
     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>")
+        with gr.Column(scale=1, min_width=320):
+            gr.HTML("<div class='intro-card'><h3>📖 Proloog</h3>"
+                    "<p>April 1912. De RMS Titanic verlaat Europa richting New York. "
+                    "We kijken mee door de lens van data: wie stapten aan boord? "
+                    "Wie overleefden – en waarom?</p>"
+                    "<p>Links zie je een historisch beeld van het schip (jouw geüploade afbeelding). "
+                    "Rechts nemen we je mee langs inzichten en uiteindelijk jouw persoonlijke scenario.</p></div>")
+        with gr.Column(scale=1, min_width=320):
+            if HERO_PATH:
+                hero = gr.Image(value=HERO_PATH, interactive=False, show_label=False, elem_classes=["hero-img"])
+            else:
+                gr.Markdown("⚠️ **Geen afbeelding gevonden.** Plaats `titanic_bg.png` óf `titanic_bg.jpg` in de root.")
 
-    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")
+    # Kerncijfers
     with gr.Row():
-        fig5 = gr.Plot(label="Sunburst")
-        fig6 = gr.Plot(label="Treemap")
-    with gr.Row():
-        fig7 = gr.Plot(label="Correlaties")
+        k1 = gr.HTML(f"<div class='kpi'><div class='value'>{len(df):,}</div><div class='label'>Totaal passagiers</div></div>")
+        k2 = gr.HTML(f"<div class='kpi'><div class='value'>{int(df['survived'].sum()):,}</div><div class='label'>Overlevenden</div></div>")
+        k3 = gr.HTML(f"<div class='kpi'><div class='value'>{df['survived'].mean()*100:.1f}%</div><div class='label'>% Overleefd</div></div>")
+        k4 = gr.HTML(f"<div class='kpi'><div class='value'>{', '.join(map(str, sorted(df['pclass'].unique())))}</div><div class='label'>Klassen</div></div>")
+
+    # Hoofdstuk 1: Wie zaten er aan boord?
+    with gr.Column(elem_classes=["section"]):
+        gr.Markdown("## Hoofdstuk 1 — Wie zaten er aan boord?")
+        gr.Markdown(
+            "We beginnen bij de samenstelling van de passagiers: klasse, leeftijd en geslacht. "
+            "Historisch gezien zijn dit belangrijke factoren voor kansen op redding."
+        )
+        with gr.Row():
+            g1 = gr.Plot(label="Overleving per klasse")
+            g2 = gr.Plot(label="Leeftijdsverdeling per status")
+        with gr.Row():
+            g3 = gr.Plot(label="Geslachtsverdeling")
+            g4 = gr.Plot(label="Ticketprijs per klasse")
 
-    gr.HTML("<div class='section-title'>🤖 Machine Learning</div>")
-    acc_md = gr.Markdown()
-    fig_cm = gr.Plot(label="Confusion Matrix")
+    # Hoofdstuk 2: Jouw scenario – interactieve kans + verhaal
+    with gr.Column(elem_classes=["section"]):
+        gr.Markdown("## Hoofdstuk 2 — Stel jezelf voor...")
+        gr.Markdown(
+            "Voer jouw gegevens in. We gebruiken een getraind model (Random Forest) om je overlevingskans te schatten "
+            "én we vertellen jouw verhaal — een korte scène op het dek."
+        )
+        with gr.Row():
+            ui_pclass = gr.Slider(1, 3, value=2, step=1, label="Klasse (1=1e, 3=3e)")
+            ui_sex = gr.Radio(["Man","Vrouw"], value="Man", label="Geslacht")
+            ui_age = gr.Slider(0, 80, value=30, label="Leeftijd")
+        with gr.Row():
+            ui_sibsp = gr.Slider(0, 8, value=1, step=1, label="Broers/Zussen aan boord")
+            ui_parch = gr.Slider(0, 6, value=0, step=1, label="Ouders/Kinder(en) aan boord")
+            ui_fare = gr.Slider(0, 600, value=50, label="Ticketprijs (£)")
+            ui_emb = gr.Radio(["C","Q","S"], value="S", label="Vertrekhaven")
+        btn = gr.Button("🎲 Bereken én vertel mijn verhaal")
+        story_out = gr.Markdown()
 
-    gr.HTML("<div class='section-title'>🗂️ Data voorbeeld</div>")
-    with gr.Column(elem_classes=["dataframe-container"]):
-        table = gr.Dataframe(interactive=False)
+    # Hoofdstuk 3: Hoe lezen we deze grafieken?
+    with gr.Column(elem_classes=["section"]):
+        gr.Markdown("## Hoofdstuk 3 — Wat leren we hieruit?")
+        gr.Markdown(
+            "- **Klasse** maakt een groot verschil: reddingsboten waren beter bereikbaar voor de 1e klasse.\n"
+            "- **Vrouwen en kinderen** kregen vaak voorrang, wat zichtbaar is in de verdeling naar geslacht.\n"
+            "- **Leeftijd** en **familiegrootte** spelen mee: jonge gezinnen hadden andere kansen en keuzes.\n"
+            "- **Ticketprijs** (fare) en **klasse** hangen sterk samen, en correleren indirect met overleving.\n\n"
+            "Let op: een model is een benadering van de historische patronen. Achter elke datapunt schuilt een persoonlijk verhaal."
+        )
 
-    def update_dashboard():
-        return dashboard()
+    # callbacks
+    def load_graphs():
+        return (
+            plot_overleving_per_klasse(df),
+            plot_leeftijdsverdeling(df),
+            plot_geslacht(df),
+            plot_fare_vs_klasse(df),
+        )
 
-    demo.load(
-        fn=update_dashboard,
-        inputs=[],
-        outputs=[kpi1, kpi2, kpi3, kpi4,
-                 fig1, fig2, fig3, fig4, fig5, fig6, fig7,
-                 acc_md, fig_cm, table]
+    demo.load(load_graphs, [], [g1, g2, g3, g4])
+    btn.click(
+        predict_and_story,
+        inputs=[ui_pclass, ui_sex, ui_age, ui_sibsp, ui_parch, ui_fare, ui_emb],
+        outputs=story_out
     )
 
 demo.launch()