Update app.py

app.py

@@ -1,4 +1,4 @@
-# app.py — Titanic Data Adventure (stabiele versie met PCA-visualisatie en uitgebreide introductie)
+# app.py — Titanic Data Adventure (met uitlegpaneel onder modeltraining)
 
 import gradio as gr
 import pandas as pd
@@ -64,13 +64,7 @@ def make_plot(fig, title):
 #  MODELTRAINING + 2D VISUALISATIE
 # ======================================================
 def train_and_embed_solid():
-    """
-    Robuuste initialisatie:
-    - traint het model
-    - maakt stabiele 2D-projectie (PCA)
-    """
     global MODEL, MODEL_ACC
-
     features = ["pclass","sex","age","sibsp","parch","fare","embarked","family_size"]
     X = df[features].copy()
     y = df["survived"].astype(int)
@@ -93,7 +87,6 @@ def train_and_embed_solid():
     MODEL = pipe
     MODEL_ACC = pipe.score(Xte, yte)
 
-    # 2D embedding met PCA (altijd stabiel)
     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)
@@ -105,9 +98,6 @@ def train_and_embed_solid():
     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",
@@ -122,6 +112,48 @@ def train_and_embed_solid():
     status = f"✅ Model getraind (RandomForest) — nauwkeurigheid: **{MODEL_ACC:.2%}**. 2D-projectie gereed; hover voor details."
     return status, fig
 
+# ======================================================
+#  EXTRA TEKSTBLOK: UITLEG
+# ======================================================
+EXPLAIN_MD = """
+### 📘 Wat je hier ziet
+Wanneer de applicatie start, traint de computer een **RandomForest-model**.  
+Dat model probeert te begrijpen wie op de Titanic **overleefde** en wie niet.
+
+Het doet dit door patronen te leren uit de gegevens van de passagiers:  
+- **Klasse:** 1e, 2e of 3e klasse.  
+- **Geslacht:** Man of vrouw.  
+- **Leeftijd** en **familieomvang**.  
+- **Ticketprijs** en **haven van vertrek**.
+
+De nauwkeurigheid (bijv. *74%*) betekent dat het model in 74 van de 100 gevallen goed voorspelt of iemand overleefde.
+
+---
+
+### 🗺️ De 2D-projectie
+De grafiek hierboven toont een **landkaart van passagiers**.  
+Elk **bolletje** is één persoon aan boord.  
+Omdat mensen veel eigenschappen hebben, gebruiken we **PCA** om die terug te brengen tot **twee dimensies** — zodat we alles in één beeld kunnen zien.
+
+- **Blauwe bolletjes:** overleefden de ramp.  
+- **Grijze bolletjes:** overleefden niet.  
+- **Verschillende symbolen:** geven de klasse weer.
+
+Hoe dichter twee bolletjes bij elkaar liggen,  
+hoe meer hun gegevens op elkaar lijken.  
+Beweeg met de muis over een bolletje om meer over die passagier te weten te komen.
+
+---
+
+### 💬 Wat betekent dit voor jou?
+Je kunt verderop jouw **eigen scenario** invullen —  
+hoe oud je zou zijn, in welke klasse, met wie je reisde —  
+en ontdekken wat jouw **overlevingskans** zou zijn geweest.  
+
+Het is geen waarzeggerij, maar een manier om te begrijpen  
+hoe omstandigheden en keuzes invloed hadden in één van de bekendste rampen ooit.
+"""
+
 # ======================================================
 #  OVERIGE GRAFIEKEN
 # ======================================================
@@ -191,20 +223,6 @@ 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: iemand met een plek aan tafel, een ticket, een familie, een keuze.  
 Door de gegevens te verkennen, begrijpen we beter **wie overleefde — en waarom**.
-
----
-
-## Wat je in dit dashboard ziet
-- **2D-Passagierskaart** — elk bolletje is één passagier (hover voor details).  
-- **Leeftijdsverdeling**, **Geslachtsverdeling**, **Fare per klasse**.  
-- **Jouw scenario** — stel je kenmerken in, bereken je kans en lees je scène uit die nacht.
-
----
-
-## Wat het model wél en niet doet
-- ✅ Herkent patronen (*geslacht + klasse + leeftijd*).  
-- ✅ Geeft **kansen**, geen zekerheden.  
-- ❌ Kent geen context buiten de data: emotie, paniek, toeval.
 """
 
 # ======================================================
@@ -220,6 +238,7 @@ h1, h2, h3, h4 { color:#1B4B91; }
       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; }
 """
 
 with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as demo:
@@ -235,6 +254,7 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
         gr.Markdown("## 🔧 Initialisatie & Modeltraining")
         status_md = gr.Markdown("⏳ Initialiseren…")
         train_plot = gr.Plot(label="2D-projectie — elk bolletje is een passagier")
+        gr.Markdown(EXPLAIN_MD, elem_classes=["explain-card"])
 
     with gr.Row():
         gr.HTML(f"<div class='kpi'><div class='value'>{len(df):,}</div><div class='label'>Totaal passagiers</div></div>")
@@ -263,7 +283,6 @@ 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()
 
-    # Laden van data en plots
     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,
@@ -271,4 +290,3 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
               outputs=story_out)
 
 demo.launch()
-