Update app.py

app.py

@@ -1,12 +1,20 @@
-# app.py — Titanic Data Adventure (wit thema, vaste layout, 2D overleving vs leeftijd met ronde bolletjes)
+# app.py — Titanic Data Adventure
+# Wit thema • vaste layout • training zichtbaar bij opstart
+# 2D-projectie (t-SNE/PCA fallback): elk punt = een passagier (hover voor details)
+
 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 LabelEncoder
+from sklearn.preprocessing import LabelEncoder, OneHotEncoder, StandardScaler
+from sklearn.compose import ColumnTransformer
+from sklearn.pipeline import Pipeline
 from sklearn.ensemble import RandomForestClassifier
+from sklearn.manifold import TSNE
+from sklearn.decomposition import PCA
 
 # =========================
 # Data laden en voorbereiden
@@ -39,27 +47,20 @@ def load_data(path="Titanic-Dataset.csv"):
 
 df = load_data()
 
+# ============== Globale modelstaat (gevuld bij opstart) ==============
+MODEL = None
+MODEL_ACC = None
+
 # =========================
-# Model trainen (1x bij start)
+# Hero-afbeelding pad bepalen
 # =========================
-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
+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
 
-MODEL, MODEL_ACC = train_model(df)
+HERO_PATH = get_hero_image_path()
 
 # =========================
 # Plots (licht, informatief)
@@ -76,33 +77,6 @@ def make_plot(fig, title):
     )
     return fig
 
-def plot_survival_vs_age(dfx):
-    """
-    2D plot: ronde bolletjes; X = leeftijd, Y = overleving (twee rijen).
-    Kleur = geslacht (duidelijk contrast), hover toont rijke passagiersinfo.
-    """
-    d = dfx.copy()
-    d["overleving"] = d["survived"].map({0:"Niet overleefd", 1:"Overleefd"})
-    extra_cols = [c for c in ["name","ticket","cabin"] if c in d.columns]
-    hover_cols = ["pclass","sex","age","sibsp","parch","family_size","fare","embarked","overleving"] + extra_cols
-
-    fig = px.scatter(
-        d,
-        x="age",
-        y="overleving",                           # categorische y: twee nette rijen
-        color="sex",                              # extra dimensie zonder rommel
-        hover_data=hover_cols,
-        labels={"age":"Leeftijd (jaar)", "overleving":"Overleving"},
-        color_discrete_map={"Male":"#A3B1C6","Female":"#1B4B91"},
-        render_mode="auto"
-    )
-    fig.update_traces(
-        mode="markers",
-        marker=dict(symbol="circle", size=9, opacity=0.7, line=dict(width=0.6, color="white"))
-    )
-    fig.update_yaxes(categoryorder="array", categoryarray=["Niet overleefd","Overleefd"], title=None)
-    return make_plot(fig, "Overleving (y) versus Leeftijd (x) — ronde bolletjes (hover voor details)")
-
 def plot_leeftijdsverdeling(dfx):
     f = px.histogram(
         dfx, x="age", color="status", nbins=30, barmode="overlay", opacity=0.75,
@@ -126,31 +100,123 @@ def plot_fare_vs_klasse(dfx):
     return make_plot(f, "Ticketprijs per klasse (met overleving)")
 
 # =========================
-# Hero-afbeelding pad bepalen (png/jpg/jpeg fallback)
+# Training + 2D-projectie met voortgang
 # =========================
-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
+def train_and_embed(progress=gr.Progress(track_tqdm=True)):
+    """
+    Wordt automatisch aangeroepen bij app-load.
+    Toont voortgang + geeft 2D-projectie (elk punt = passagier).
+    """
+    global MODEL, MODEL_ACC
+
+    # Placeholder fig
+    placeholder = px.scatter(x=[], y=[])
+    placeholder = make_plot(placeholder, "Initialiseren…")
+
+    progress(0.05, desc="📦 Data laden…")
+    status = "📦 Data geladen. Aantal passagiers: **{}**".format(len(df))
+    yield status, placeholder
+
+    # Voorbewerking voor model + embedding
+    progress(0.20, desc="🔧 Voorbewerking…")
+    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]
+
+    preproc = ColumnTransformer(
+        transformers=[
+            ("num", StandardScaler(), num_cols),
+            ("cat", OneHotEncoder(handle_unknown="ignore"), cat_cols),
+        ]
+    )
 
-HERO_PATH = get_hero_image_path()
+    # ================== Model trainen ==================
+    progress(0.55, desc="🤖 Model trainen (RandomForest)…")
+    model = Pipeline(steps=[
+        ("prep", preproc),
+        ("clf", RandomForestClassifier(n_estimators=300, random_state=42))
+    ])
+    X_train, X_test, y_train, y_test = train_test_split(
+        X, y, test_size=0.25, random_state=42, stratify=y
+    )
+    model.fit(X_train, y_train)
+    acc = model.score(X_test, y_test)
+    MODEL = model
+    MODEL_ACC = acc
+    status = f"✅ Model getraind: **RandomForest**, nauwkeurigheid: **{acc:.2%}**"
+    yield status, placeholder
+
+    # ================== 2D embedding ==================
+    progress(0.75, desc="🗺️ 2D-projectie berekenen (t-SNE)…")
+    X_all = preproc.fit_transform(X)  # fit opnieuw op alle data voor projectie
+    # t-SNE kan traag zijn; kies beperkte iteraties en perplexity passend bij dataset
+    try:
+        tsne = TSNE(n_components=2, perplexity=30, learning_rate="auto", init="random",
+                    n_iter=600, random_state=42)
+        emb = tsne.fit_transform(X_all.toarray() if hasattr(X_all, "toarray") else X_all)
+        method = "t-SNE"
+    except Exception:
+        # Fallback voor omgevingen zonder voldoende geheugen/opties
+        pca = PCA(n_components=2, random_state=42)
+        emb = pca.fit_transform(X_all.toarray() if hasattr(X_all, "toarray") else X_all)
+        method = "PCA"
+
+    dvis = pd.DataFrame({"x": emb[:,0], "y": emb[:,1]})
+    dvis["Geslacht"] = df["sex"].values
+    dvis["Overleving"] = df["status"].values
+    dvis["Klasse"] = df["pclass"].values
+    dvis["Leeftijd"] = df["age"].values
+    dvis["Fare (£)"] = df["fare"].values
+    dvis["Familie"] = df["family_size"].values
+    if "name" in df.columns: dvis["Naam"] = df["name"].values
+    if "ticket" in df.columns: dvis["Ticket"] = df["ticket"].values
+    if "cabin" in df.columns: dvis["Cabin"] = df["cabin"].values
+
+    fig = px.scatter(
+        dvis,
+        x="x", y="y",
+        color="Overleving",
+        symbol="Klasse",
+        hover_data=[c for c in ["Naam","Geslacht","Leeftijd","Familie","Fare (£)","Klasse","Overleving","Ticket","Cabin"] if c in dvis.columns],
+        color_discrete_map={"Overleefd":"#1B4B91","Niet overleefd":"#A3B1C6"},
+        opacity=0.78
+    )
+    fig.update_traces(marker=dict(symbol="circle", size=8, line=dict(width=0.6, color="white")))
+    fig = make_plot(fig, f"2D projectie ({method}) — elk bolletje is een passagier")
+
+    progress(1.0, desc="Klaar ✅")
+    status = f"✅ Model getraind (**{acc:.2%}**). 2D-projectie ({method}) gereed — beweeg met je muis over de bolletjes voor details."
+    yield status, fig
 
 # =========================
 # Interactieve voorspelling + avontuur-tekst
 # =========================
 def predict_and_story(pclass, sex, age, sibsp, parch, fare, embarked):
-    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
+    global MODEL, MODEL_ACC
+    if MODEL is None:
+        return "⏳ Het model is nog niet klaar met initialiseren. Probeer het zo nog eens."
+
+    # Maak invoer-DataFrame; MODEL bevat ColumnTransformer in de pipeline
+    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
+    }])
 
-    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
 
     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"
+    rol_txt = "vrouw" if sex.lower().startswith("v") else "man"
 
     if pct >= 75:
         tone = "Je kansen zijn uitzonderlijk goed."
@@ -170,7 +236,7 @@ def predict_and_story(pclass, sex, age, sibsp, parch, fare, embarked):
 
 **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}**.
+Je ticket kostte **£{float(fare):.2f}** en je **familiegrootte** is **{int(sibsp)+int(parch)+1}**.
 
 **Analyse:** {tone} Het model weegt o.a. klasse, geslacht, leeftijd en familieomvang mee—patronen in de historische data.
 
@@ -181,34 +247,13 @@ Je voelt de houten reling koud onder je hand. {ending}
     return story
 
 # =========================
-# Introductietekst (aangepast: uitleg over 2D-bollenplot)
+# Introductietekst (kort, aangepast)
 # =========================
 INTRO_MD = """
 # 🛳️ Titanic Data Adventure
-### Een datagedreven reis door hoop, hiërarchie en toeval
-
-**April 1912.**  
-De RMS *Titanic* vertrekt richting New York: een drijvend paleis, gevuld met verwachtingen. Aan boord: industriëlen in avondkleding, jonge gezinnen met één koffer, bemanningsleden die elke dag routine tot ritueel verheffen. De zee is kalm; de toekomst lijkt maakbaar.
-
-Meer dan een eeuw later kijken wij mee — niet met verrekijkers of logboeken, maar met **data**. Elk record in deze dataset is een menselijk verhaal. Door de gegevens te verkennen, begrijpen we beter **wie overleefde — en waarom**.
-
----
-
-## Wat je in dit dashboard gaat zien
-- **Overleving versus leeftijd (2D)** — elk **rond bolletje** is één passagier.  
-  *X-as = leeftijd*, *Y-as = overleving* (twee rijen: *Niet overleefd* en *Overleefd*).  
-  **Kleur = geslacht**, en **hover** toont details (klasse, familieomvang, vertrekhaven, prijs en – als aanwezig – naam/ticket/cabin).
-- **Leeftijdsverdeling** — overlappende histogrammen tonen verschillen tussen overlevers en niet-overlevers.  
-- **Geslachtsverdeling** — verhoudingen mannen/vrouwen in de dataset.  
-- **Fare per klasse** — prijsverschillen en spreiding, gekoppeld aan overleving.
-- **Jouw scenario** — stel je eigen kenmerken in, bereken je kans en lees een korte scène uit die nacht.
-
----
-
-## Wat een model wél en niet doet
-- ✅ **Herkennen van patronen** in combinaties (bijv. *geslacht + klasse + leeftijd*).  
-- ✅ **Schatten, geen zekerheid** — het geeft **kansen**, geen waarheden.  
-- ❌ Geen moreel oordeel of individuele lotsbeschikking: context buiten de data blijft onzichtbaar.
+**Links** zie je de training live starten. We bouwen een model dat patronen uit 1912 leert.  
+Daaronder verschijnt een **2D-projectie**: elk **bolletje is één passagier** — beweeg erover voor details.  
+**Rechts** staat een visual van het schip ter context. Scrol daarna door voor meer grafieken en jouw persoonlijke scenario.
 """
 
 # =========================
@@ -231,14 +276,13 @@ h1, h2, h3, h4 { color: #1B4B91; }
 }
 .kpi .value { font-size:1.6rem; font-weight:800; color:#1B4B91; }
 .kpi .label { font-size:.9rem; color:#3F557A; }
-.scroll-md { max-height: 520px; overflow-y: auto; padding-right: 8px; }
 """
 
 with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as demo:
-    # Intro: lange tekst (links) + foto (rechts)
+    # Intro + foto
     with gr.Row():
         with gr.Column(scale=2, min_width=420):
-            gr.Markdown(INTRO_MD, elem_classes=["intro-card","scroll-md"])
+            gr.Markdown(INTRO_MD, elem_classes=["intro-card"])
         with gr.Column(scale=1, min_width=320):
             hero_path = get_hero_image_path()
             if hero_path:
@@ -246,6 +290,12 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
             else:
                 gr.Markdown("⚠️ **Geen afbeelding gevonden.** Plaats `titanic_bg.png` of `titanic_bg.jpg` in de root.")
 
+    # Training & 2D-projectie
+    with gr.Column(elem_classes=["panel"]):
+        gr.Markdown("## 🔧 Initialisatie & Modeltraining")
+        status_md = gr.Markdown("⏳ Start…")
+        train_plot = gr.Plot(label="2D projectie — elk bolletje is een passagier")
+
     # KPI's
     with gr.Row():
         gr.HTML(f"<div class='kpi'><div class='value'>{len(df):,}</div><div class='label'>Totaal passagiers</div></div>")
@@ -253,13 +303,12 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
         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>")
 
-    # Visualisaties
+    # Overige visualisaties
     gr.Markdown("## 📊 Verken de data", elem_classes=["panel"])
     with gr.Row():
-        g1 = gr.Plot(label="Overleving vs Leeftijd (2D)")
         g2 = gr.Plot(label="Leeftijdsverdeling per status")
-    with gr.Row():
         g3 = gr.Plot(label="Geslachtsverdeling")
+    with gr.Row():
         g4 = gr.Plot(label="Ticketprijs per klasse")
 
     # Interactieve voorspelling
@@ -277,16 +326,24 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
         btn = gr.Button("🎲 Bereken én vertel mijn verhaal", variant="primary")
         story_out = gr.Markdown()
 
-    # callbacks
+    # ================= Callbacks =================
+    # 1) Start training + 2D projectie (streamend via yields)
+    demo.load(
+        fn=train_and_embed,
+        inputs=[],
+        outputs=[status_md, train_plot]
+    )
+
+    # 2) Overige grafieken
     def load_graphs():
         return (
-            plot_survival_vs_age(df),    # NIEUW: ronde bolletjes, Y=overleving
             plot_leeftijdsverdeling(df),
             plot_geslacht(df),
             plot_fare_vs_klasse(df),
         )
+    demo.load(load_graphs, [], [g2, g3, g4])
 
-    demo.load(load_graphs, [], [g1, g2, g3, g4])
+    # 3) Interactieve voorspelling
     btn.click(
         predict_and_story,
         inputs=[ui_pclass, ui_sex, ui_age, ui_sibsp, ui_parch, ui_fare, ui_emb],