Update app.py

app.py

@@ -1,32 +1,123 @@
+# app.py — Titanic Data Adventure (met uitgebreide introductie naast foto)
+
 import gradio as gr
 import pandas as pd
+import numpy as np
+import os
 import plotly.express as px
+
 from sklearn.model_selection import train_test_split
+from sklearn.preprocessing import OneHotEncoder, StandardScaler
+from sklearn.compose import ColumnTransformer
+from sklearn.pipeline import Pipeline
 from sklearn.ensemble import RandomForestClassifier
-from sklearn.preprocessing import LabelEncoder
-
-# -------------------------
-# DATA INLADEN
-# -------------------------
-titanic = pd.read_csv("Titanic-Dataset.csv")
-
-# Verwerk dataset
-titanic = titanic.dropna(subset=["Age", "Sex", "Pclass", "Survived"])
-titanic["Sex"] = titanic["Sex"].map({"male": 0, "female": 1})
-X = titanic[["Pclass", "Sex", "Age", "SibSp", "Parch", "Fare"]]
-y = titanic["Survived"]
-
-# -------------------------
-# MODEL TRAINEN
-# -------------------------
-X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)
-model = RandomForestClassifier(random_state=42)
-model.fit(X_train, y_train)
-accuracy = model.score(X_test, y_test)
-
-# -------------------------
-# TITELS & TEKSTEN
-# -------------------------
+from sklearn.decomposition import PCA
+
+# ======================================================
+#  DATA LADEN
+# ======================================================
+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: {', '.join(sorted(missing))}")
+    for c in df.columns:
+        if df[c].isna().any():
+            df[c] = df[c].fillna(df[c].mode()[0] if df[c].dtype=='O' else df[c].median())
+    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()
+    return df
+
+df = load_data()
+MODEL = None
+MODEL_ACC = None
+
+# ======================================================
+#  HULPFUNCTIES
+# ======================================================
+def hero_path():
+    for n in ["titanic_bg.png","titanic_bg.jpg","titanic_bg.jpeg"]:
+        if os.path.exists(n):
+            return n
+    return None
+
+def make_plot(fig, title):
+    fig.update_layout(
+        title=title,
+        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
+
+# ======================================================
+#  MODELTRAINING + 2D VISUALISATIE
+# ======================================================
+def train_and_embed_solid():
+    global MODEL, MODEL_ACC
+    features = ["pclass","sex","age","sibsp","parch","fare","embarked","family_size"]
+    X = df[features].copy()
+    y = df["survived"].astype(int)
+
+    cat_cols = ["sex","embarked"]
+    num_cols = [c for c in features if c not in cat_cols]
+
+    pre = ColumnTransformer([
+        ("num", StandardScaler(), num_cols),
+        ("cat", OneHotEncoder(handle_unknown="ignore"), cat_cols),
+    ])
+
+    pipe = Pipeline([
+        ("prep", pre),
+        ("clf", RandomForestClassifier(n_estimators=300, random_state=42))
+    ])
+
+    Xtr, Xte, ytr, yte = train_test_split(X, y, test_size=0.25, random_state=42, stratify=y)
+    pipe.fit(Xtr, ytr)
+    MODEL = pipe
+    MODEL_ACC = pipe.score(Xte, yte)
+
+    Z = pre.fit_transform(X)
+    Z = Z.toarray() if hasattr(Z, "toarray") else Z
+    emb = PCA(n_components=2, random_state=42).fit_transform(Z)
+
+    dvis = pd.DataFrame({"x": emb[:,0], "y": emb[:,1]})
+    dvis["Overleving"] = df["status"].values
+    dvis["Geslacht"] = df["sex"].values
+    dvis["Klasse"] = df["pclass"].values
+    dvis["Leeftijd"] = df["age"].values
+    dvis["Fare (£)"] = df["fare"].values
+    dvis["Familie"] = df["family_size"].values
+    for c in ["name","ticket","cabin"]:
+        if c in df.columns:
+            dvis[c.capitalize()] = df[c].values
+
+    fig = px.scatter(
+        dvis, x="x", y="y",
+        color="Overleving", symbol="Klasse",
+        hover_data=[col for col in dvis.columns if col not in ["x","y"]],
+        color_discrete_map={"Overleefd":"#1B4B91","Niet overleefd":"#A3B1C6"},
+        opacity=0.8
+    )
+    fig.update_traces(marker=dict(symbol="circle", size=8, line=dict(width=0.6, color="white")))
+    fig = make_plot(fig, "2D-projectie (PCA) — elk bolletje is een passagier")
+
+    status = f"✅ Model getraind (RandomForest) — nauwkeurigheid: **{MODEL_ACC:.2%}**. 2D-projectie gereed; hover voor details."
+    return status, fig
+
+# ======================================================
+#  TEKST VOOR INTRODUCTIE (UITGEBREID)
+# ======================================================
 INTRO_MD = """
 # 🛳️ Titanic Data Adventure
 ### Een datagedreven reis door hoop, hiërarchie en toeval
@@ -52,6 +143,9 @@ In deze applicatie duiken we opnieuw die nacht in – niet met reddingsvesten, m
 die het menselijk verhaal achter de ramp zichtbaar maken.
 """
 
+# ======================================================
+#  UITLEGTEKST NAAST DE 2D-PLOT
+# ======================================================
 EXPLAIN_MD_SIDE = """
 ### 📘 Wat je ziet
 Bij het opstarten traint de computer een **RandomForest-model** dat leert wie op de Titanic **overleefde** – en waarom.  
@@ -68,91 +162,131 @@ Elk **bolletje** is één persoon. Met **PCA** brengen we veel kenmerken terug n
 Dichter bij elkaar = vergelijkbare profielen. **Hover** voor details.
 """
 
-SCENARIO_INTRO = """
-> Stel je voor: het is april 1912.  
-> De nacht is helder, de zee kalm, de lichten van de Titanic glinsteren als sterren op het water.  
-> Maar wat als jij aan boord was?  
-> Kies jouw plek, leeftijd en omstandigheden — en ontdek hoe groot jouw kans was om het avontuur te overleven.  
->  
-> De cijfers vertellen het verhaal.
+# ======================================================
+#  OVERIGE GRAFIEKEN
+# ======================================================
+def plot_age_hist(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_gender(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_box(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)")
+
+# ======================================================
+#  INTERACTIEVE VOORSPELLING
+# ======================================================
+def predict_and_story(pclass, sex, age, sibsp, parch, fare, embarked):
+    if MODEL is None:
+        return "⏳ Het model initialiseert nog. Probeer het zo nog eens."
+    X_row = pd.DataFrame([{
+        "pclass": int(pclass), "sex": sex, "age": float(age),
+        "sibsp": int(sibsp), "parch": int(parch), "fare": float(fare),
+        "embarked": embarked, "family_size": int(sibsp)+int(parch)+1
+    }])
+    prob = float(MODEL.predict_proba(X_row)[0,1]); pct = prob*100
+    klasse_txt = {1:"eerste",2:"tweede",3:"derde"}[int(pclass)]
+    haven_txt = {"C":"Cherbourg","Q":"Queenstown","S":"Southampton"}[embarked]
+    rol_txt = "vrouw" if sex.lower().startswith("v") else "man"
+    if pct>=75:
+        tone, ending = ("Je kansen zijn uitzonderlijk goed.",
+                        "Je bereikt de sloep; het schip helt achter je, maar je leeft.")
+    elif pct>=50:
+        tone, ending = ("Je kansen zijn behoorlijk goed.",
+                        "In de chaos vind je een plek in een halfgevulde sloep.")
+    elif pct>=25:
+        tone, ending = ("De kansen zijn fifty-fifty.",
+                        "Op het laatste moment spring je; de nacht is lang, maar de horizon gloeit.")
+    else:
+        tone, ending = ("Het ziet er somber uit.",
+                        "Je klampt je vast terwijl de oceaan meedogenloos wordt.")
+    return f"""### 🔮 Jouw overlevingskans: **{pct:.1f}%**
+
+**Situatie:** {rol_txt}, **{klasse_txt} klasse**, inscheping **{haven_txt}** — leeftijd **{int(age)}**, familie **{int(sibsp)}+{int(parch)}** (totaal {int(sibsp)+int(parch)+1}), ticket **£{float(fare):.2f}**.
+
+**Analyse:** {tone} Het model weegt o.a. klasse, geslacht, leeftijd en familieomvang mee.
+
+**Avontuur:** De nacht is stil; fluiten, geroep, voetstappen. {ending}
+"""
+
+# ======================================================
+#  UI + LAYOUT
+# ======================================================
+CUSTOM_CSS = """
+body { background:#FFFFFF; color:#0B1C3F; }
+.gradio-container { background:#FFFFFF; }
+h1, h2, h3, h4 { color:#1B4B91; }
+.panel, .intro-card { background:#F9FBFF; border:1px solid #E0E6F3; border-radius:12px; padding:16px; }
+.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; }
+.explain-card { background:#EAF0FF; border-radius:12px; padding:18px; border:1px solid #D5E0FA; }
 """
 
-# -------------------------
-# VISUALISATIES
-# -------------------------
-fig_age = px.histogram(titanic, x="Age", color="Survived",
-                       color_discrete_map={0: "#8d99ae", 1: "#0077b6"},
-                       nbins=30, title="Leeftijdsverdeling naar overleving")
+with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as demo:
+    # Header-intro + foto
+    with gr.Row():
+        with gr.Column(scale=2, min_width=420):
+            gr.Markdown(INTRO_MD, elem_classes=["intro-card"])
+        with gr.Column(scale=1, min_width=320):
+            hp = hero_path()
+            if hp: gr.Image(value=hp, interactive=False, show_label=False, elem_classes=["hero-img"])
+            else: gr.Markdown("⚠️ **Geen afbeelding gevonden.** Plaats `titanic_bg.png` of `titanic_bg.jpg` in de root.")
+
+    # Panel: status + 2D-plot links en uitleg rechts
+    with gr.Column(elem_classes=["panel"]):
+        gr.Markdown("## 🔧 Initialisatie & Modeltraining")
+        status_md = gr.Markdown("⏳ Initialiseren…")
+        with gr.Row():
+            with gr.Column(scale=2, min_width=420):
+                train_plot = gr.Plot(label="2D-projectie — elk bolletje is een passagier")
+            with gr.Column(scale=1, min_width=320):
+                gr.Markdown(EXPLAIN_MD_SIDE, elem_classes=["explain-card"])
 
-# 2D PCA-achtige projectie met willekeurige jitter
-import numpy as np
-np.random.seed(42)
-titanic["x"] = np.random.randn(len(titanic))
-titanic["y"] = np.random.randn(len(titanic))
-fig_scatter = px.scatter(
-    titanic, x="x", y="y",
-    color=titanic["Survived"].map({0: "Niet overleefd", 1: "Overleefd"}),
-    hover_data=["Sex", "Age", "Pclass", "Fare"],
-    title=f"Model getraind (RandomForest) — nauwkeurigheid: {accuracy*100:.2f}%",
-    color_discrete_map={"Niet overleefd": "#adb5bd", "Overleefd": "#0077b6"},
-    opacity=0.75
-)
-fig_scatter.update_traces(marker=dict(size=8, line=dict(width=0.5, color='white')))
-
-# -------------------------
-# INTERACTIEF SCENARIO
-# -------------------------
-def predict_survival(pclass, sex, age, sibsp, parch, fare):
-    data = pd.DataFrame([[pclass, sex, age, sibsp, parch, fare]],
-                        columns=["Pclass", "Sex", "Age", "SibSp", "Parch", "Fare"])
-    prediction = model.predict(data)[0]
-    prob = model.predict_proba(data)[0][prediction]
-    result = "🟦 Overleefd" if prediction == 1 else "⬜ Niet overleefd"
-    text = f"{result}\n\nVoorspelde kans: {prob*100:.1f}%"
-    return text
-
-# -------------------------
-# INTERFACE
-# -------------------------
-with gr.Blocks(css="body {background-color: white;}") as demo:
-    gr.Markdown("<h1 style='text-align:center; color:#003366;'>Titanic Data Adventure</h1>")
-    
+    # KPIs
     with gr.Row():
-        with gr.Column(scale=1):
-            gr.Image("titanic_bg.png", show_label=False)
-        with gr.Column(scale=1):
-            gr.Markdown(INTRO_MD)
-    
-    gr.Markdown("---")
-    
+        gr.HTML(f"<div class='kpi'><div class='value'>{len(df):,}</div><div class='label'>Totaal passagiers</div></div>")
+        gr.HTML(f"<div class='kpi'><div class='value'>{int(df['survived'].sum()):,}</div><div class='label'>Overlevenden</div></div>")
+        gr.HTML(f"<div class='kpi'><div class='value'>{df['survived'].mean()*100:.1f}%</div><div class='label'>% Overleefd</div></div>")
+        gr.HTML(f"<div class='kpi'><div class='value'>{', '.join(map(str, sorted(df['pclass'].unique())))}</div><div class='label'>Klassen</div></div>")
+
+    # Overige visualisaties
+    gr.Markdown("## 📊 Verken de data", elem_classes=["panel"])
     with gr.Row():
-        with gr.Column(scale=1):
-            gr.Plot(fig_scatter)
-        with gr.Column(scale=1):
-            gr.Markdown(EXPLAIN_MD_SIDE)
-    
-    gr.Markdown("---")
-    gr.Markdown("## 🔮 Jouw scenario — bereken je overlevingskans en lees je scène")
-    gr.Markdown(SCENARIO_INTRO)
-    
+        g2 = gr.Plot(label="Leeftijdsverdeling per status")
+        g3 = gr.Plot(label="Geslachtsverdeling")
     with gr.Row():
-        pclass = gr.Dropdown([1, 2, 3], label="Klasse (1 = luxe, 3 = economy)")
-        sex = gr.Radio(["man", "vrouw"], label="Geslacht", value="man")
-        age = gr.Slider(0, 80, value=30, label="Leeftijd")
-        sibsp = gr.Slider(0, 5, value=0, label="Aantal broers/zussen of echtgeno(o)t(e)")
-        parch = gr.Slider(0, 5, value=0, label="Aantal ouders/kinderen")
-        fare = gr.Slider(0, 500, value=50, label="Ticketprijs (£)")
-    
-    sex_map = {"man": 0, "vrouw": 1}
-    btn = gr.Button("🚢 Bereken mijn overlevingskans")
-    output = gr.Textbox(label="Resultaat", lines=2)
-    
-    btn.click(fn=lambda p, s, a, si, pa, f: predict_survival(p, sex_map[s], a, si, pa, f),
-              inputs=[pclass, sex, age, sibsp, parch, fare],
-              outputs=output)
-
-# -------------------------
-# LAUNCH
-# -------------------------
-if __name__ == "__main__":
-    demo.launch()
+        g4 = gr.Plot(label="Ticketprijs per klasse")
+
+    # Interactieve voorspelling
+    with gr.Column(elem_classes=["panel"]):
+        gr.Markdown("## 🔮 Jouw scenario — bereken je overlevingskans en lees je scène")
+        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", variant="primary")
+        story_out = gr.Markdown()
+
+    # Loads & acties
+    demo.load(fn=train_and_embed_solid, inputs=[], outputs=[status_md, train_plot])
+    demo.load(lambda: (plot_age_hist(df), plot_gender(df), plot_fare_box(df)), inputs=[], outputs=[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()