Update app.py

app.py

@@ -17,23 +17,26 @@ from sklearn.decomposition import PCA
 # ======================================================
 #  DATA LADEN
 # ======================================================
-REQUIRED = {"survived","pclass","sex","age","sibsp","parch","fare","embarked"}
+VEREISTE_KOLOMMEN = {"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))}")
+    ontbrekend = VEREISTE_KOLOMMEN - set(df.columns)
+    if ontbrekend:
+        raise ValueError(f"Ontbrekende kolommen: {', '.join(sorted(ontbrekend))}")
+    # Missende waarden invullen (modus voor categorisch, mediaan voor numeriek)
     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())
+    # Afgeleide kolommen
     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()
+    # Consistente casing (laat intern Engels voor model/plots; vertaling doen we alleen in de preview-tabel)
+    df["sex"] = df["sex"].astype(str).str.title()        # 'Male'/'Female'
+    df["embarked"] = df["embarked"].astype(str).str.upper()  # 'S'/'C'/'Q'
     return df
 
 df = load_data()
@@ -61,6 +64,46 @@ def make_plot(fig, title):
     )
     return fig
 
+def maak_passagiers_preview(df_src: pd.DataFrame) -> pd.DataFrame:
+    """
+    Maakt een weergavetabel met Nederlandse kolomnamen/waarden (alleen voor tonen in de UI).
+    We wijzigen het originele df niet (het model gebruikt nog steeds de Engelse kolommen/waarden).
+    """
+    kolommen = ["pclass","sex","age","sibsp","parch","fare","embarked","family_size","status"]
+    optioneel = ["name","ticket","cabin"]
+    aanwezig_opt = [c for c in optioneel if c in df_src.columns]
+    selectie = kolommen + aanwezig_opt
+
+    d = df_src[selectie].copy()
+
+    # Waarde-vertalingen voor weergave
+    d["sex"] = d["sex"].map({"Male":"Man", "Female":"Vrouw"}).fillna(d["sex"])
+    d["embarked"] = d["embarked"].map({"S":"Southampton","C":"Cherbourg","Q":"Queenstown"}).fillna(d["embarked"])
+
+    # Kolomnamen naar NL
+    mapping = {
+        "pclass":"Klasse",
+        "sex":"Geslacht",
+        "age":"Leeftijd",
+        "sibsp":"Broers/Zussen",
+        "parch":"Ouders/Kinderen",
+        "fare":"Ticketprijs (£)",
+        "embarked":"Vertrekhaven",
+        "family_size":"Familieomvang",
+        "status":"Uitkomst",
+        "name":"Naam",
+        "ticket":"Ticket",
+        "cabin":"Hut",
+    }
+    d = d.rename(columns=mapping)
+
+    # Sorteer kolommen op een prettige volgorde
+    volgorde = [k for k in ["Naam","Klasse","Geslacht","Leeftijd","Familieomvang",
+                            "Broers/Zussen","Ouders/Kinderen","Ticketprijs (£)",
+                            "Vertrekhaven","Uitkomst","Ticket","Hut"] if k in d.columns]
+    d = d[volgorde]
+    return d.head(10)
+
 # ======================================================
 #  MODELTRAINING + 2D VISUALISATIE
 # ======================================================
@@ -122,23 +165,18 @@ def train_and_embed_solid():
 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 met routine.  
 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**.
-
 ---
-
 ### ⚓ De nacht die geschiedenis werd
 Op **14 april 1912**, net voor middernacht, raakte de *Titanic* een **ijsberg** in de ijskoude Noord-Atlantische Oceaan.  
 Binnen drie uur zonk het schip – het “onzinkbare” symbool van vooruitgang bleek kwetsbaar.  
 Meer dan **1.500 mensen** kwamen om, slechts een derde van de opvarenden vond redding in de sloepen.
-
 De verdeling tussen rijk en arm, man en vrouw, jong en oud bleek letterlijk van levensbelang.  
 In deze applicatie duiken we opnieuw die nacht in – niet met reddingsvesten, maar met grafieken, modellen en cijfers  
 die het menselijk verhaal achter de ramp zichtbaar maken.
@@ -152,18 +190,14 @@ EXPLAIN_MD_SIDE = """
 Bij het opstarten traint de computer een **RandomForest-model** dat leert wie op de Titanic **overleefde** – en waarom.  
 Het kijkt naar **klasse**, **geslacht**, **leeftijd**, **familieomvang**, **ticketprijs** en **haven van vertrek**.  
 De nauwkeurigheid (bijv. *74%*) betekent: in 74 van de 100 gevallen voorspelt het model correct.
-
 ---
-
 ### 🗺️ Landkaart van passagiers
 Elk **bolletje** is één persoon. Met **PCA** brengen we veel kenmerken terug naar **2 dimensies**.  
 - **Blauw** → overleefd  
 - **Grijs** → niet overleefd  
 - **Vorm** → klasse  
 Dichter bij elkaar = vergelijkbare profielen. **Hover** voor details.
-
 ---
-
 ### 💬 Jij in dit verhaal
 Vul onderaan je **eigen profiel** in, ontdek jouw kans en lees je scène uit die nacht.
 """
@@ -214,11 +248,8 @@ def predict_and_story(pclass, sex, age, sibsp, parch, fare, embarked):
         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}
 """
 
@@ -275,6 +306,9 @@ h1, h2, h3, h4 { color:#1B4B91; }
 .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; }
+
+/* Scrollbaar venster voor de passagierstabel */
+#passenger_table { overflow:auto; max-height:250px; }
 """
 
 with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as demo:
@@ -287,6 +321,18 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
             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.")
 
+    # NIEUW PANEEL: Passagierslijst (eerste 10 rijen) — scrollbaar
+    with gr.Column(elem_classes=["panel"]):
+        gr.Markdown("## 👥 Passagierslijst — eerste 10 rijen van de dataset")
+        gr.DataFrame(
+            value=maak_passagiers_preview(df),
+            wrap=True,
+            interactive=False,
+            label="Titanic-passagiers (voorbeeld)",
+            elem_id="passenger_table",
+            max_height=250
+        )
+
     # Panel: status + 2D-plot links en uitleg rechts
     with gr.Column(elem_classes=["panel"]):
         gr.Markdown("## 🔧 Initialisatie & Modeltraining")
@@ -297,7 +343,7 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
             with gr.Column(scale=1, min_width=320):
                 gr.Markdown(EXPLAIN_MD_SIDE, elem_classes=["explain-card"])
 
-    # KPIs
+    # KPI-tegels
     with gr.Row():
         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>")
@@ -319,7 +365,6 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
             with gr.Column(scale=2, min_width=420):
                 gr.Markdown("""## 🔮 Jouw scenario — bereken je overlevingskans en lees je scène
 Hier kun je ontdekken **hoe groot jouw kans op overleving** zou zijn geweest aan boord van de *Titanic* — en meteen het **verhaal van jouw nacht** lezen.
-
 1. **Kies je profiel**  
    - **Klasse:** 1e, 2e of 3e klasse (je reiscomfort en dekpositie).  
    - **Geslacht:** man of vrouw — dit had invloed op reddingsvoorrang.  
@@ -327,14 +372,11 @@ Hier kun je ontdekken **hoe groot jouw kans op overleving** zou zijn geweest aan
    - **Broers/zussen** en **ouders/kinderen**: hoeveel familieleden reisden met je mee.  
    - **Ticketprijs (£):** hoe duur je passage was.  
    - **Vertrekhaven:** Cherbourg (C), Queenstown (Q) of Southampton (S).
-
 2. **Klik op de knop “🎲 Bereken én vertel mijn verhaal”**  
    Het model schat jouw **overlevingskans** op basis van historische patronen.
-
 3. **Lees je persoonlijke scène**  
    Onder de knop verschijnt een korte beschrijving die je meeneemt naar die nacht —  
    gebaseerd op jouw ingevulde profiel en de berekende kans.
-
 > 💡 *De voorspelling is een statistische schatting, geen oordeel.  
 > Ze helpt je zien hoe factoren zoals klasse, geslacht en leeftijd destijds iemands lot konden bepalen.*""")
             with gr.Column(scale=1, min_width=320):
@@ -352,11 +394,11 @@ Hier kun je ontdekken **hoe groot jouw kans op overleving** zou zijn geweest aan
         btn = gr.Button("🎲 Bereken én vertel mijn verhaal", variant="primary")
         story_out = gr.Markdown()
 
-    # Loads & acties
+    # Laden & 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])
 
-    # Initiele gauge (na modeltraining): gebruik de default UI-waarden
+    # Initiële gauge (na modeltraining): gebruik de default UI-waarden
     demo.load(lambda: live_viz(2, "Man", 30, 1, 0, 50, "S"), inputs=[], outputs=[viz_plot])
 
     # Live updates bij elke wijziging