Update app.py

app.py

@@ -1,4 +1,4 @@
-# app.py – Titanic Data Adventure (wit thema, verhalend, centrale afbeelding, interactieve overlevingskans)
+# app.py — Titanic Data Adventure (wit thema, vaste layout, uitgebreide intro naast foto)
 import gradio as gr
 import pandas as pd
 import numpy as np
@@ -59,10 +59,10 @@ def train_model(dfx: pd.DataFrame):
     acc = model.score(X_test, y_test)
     return model, acc
 
-model, model_acc = train_model(df)
+MODEL, MODEL_ACC = train_model(df)
 
 # =========================
-# Plots (duidelijk en informatief)
+# Plots (licht, informatief)
 # =========================
 def make_plot(fig, title):
     fig.update_layout(
@@ -127,7 +127,7 @@ def predict_and_story(pclass, sex, age, sibsp, parch, fare, 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])
+    prob = float(MODEL.predict_proba(X_row)[0,1])
     pct = prob * 100
 
     # Avontuur-tekst op basis van invoer en kans
@@ -164,19 +164,76 @@ Je voelt de houten reling koud onder je hand. {ending}
     return story
 
 # =========================
-# UI (vast lay-out, wit thema, veel uitleg)
+# Introductietekst (uitgebreid, modern paneel)
+# =========================
+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: iemand met een plek aan tafel, een ticket, een familie, een keuze. Door de gegevens te verkennen, begrijpen we beter **wie overleefde — en waarom**.
+
+---
+
+## Waarom deze data ertoe doet
+- **Patronen ontrafelen**: cijfers tonen structuur in chaos — welke groepen hadden toegang tot reddingsboten, wie bevond zich waar, en wat betekende dat?  
+- **Mens achter het datapunt**: elke rij is iemands dag, iemands kans, iemands lot.  
+- **Leren van geschiedenis**: ongelijkheid, beslissingen en beperkte middelen — thema’s die vandaag nog steeds resoneren.
+
+---
+
+## Wat je in dit dashboard gaat zien
+1. **Kerncijfers** – Hoeveel passagiers, hoeveel overlevenden, en hoe die verdeeld waren over de **klassen**.  
+2. **Verdelingen** – Leeftijd, geslacht, ticketprijs (*fare*), familieomvang.  
+3. **Verbanden** – Overleving t.o.v. klasse en geslacht; prijsverschillen per klasse; samenhang tussen variabelen.  
+4. **Machine learning** – Een model dat, op basis van historische patronen, jouw **persoonlijke overlevingskans** inschat.  
+5. **Jouw scenario** – Voer je kenmerken in en lees een korte scene die je terugplaatst op het dek, die nacht.
+
+---
+
+## De sociologie van de dekken
+- **Klasse** was letterlijk een **fysieke laag** aan boord: 1e klasse hoger en centraler, 3e klasse dieper in het schip.  
+- **Toegang** tot informatie, bemanning en reddingsmiddelen verschilde per dek.  
+- **Normen & regels** (“**women and children first**”) werden niet overal gelijk toegepast; context en chaos bepaalden veel.
+
+---
+
+## Hoe lees je de grafieken?
+- **Overleving per klasse**: staafdiagram dat laat zien hoe kans ongelijk verdeeld was.  
+- **Leeftijdsverdeling**: overlappende histogrammen; kijk waar de bulten liggen voor *Overleefd* vs. *Niet overleefd*.  
+- **Geslachtsverdeling**: cirkelgrafiek; benadrukt het effect van sociale normen.  
+- **Fare per klasse**: boxplot; toont spreiding en uitschieters — rijkdom was geen garantie, maar wel een voordeel.
+
+---
+
+## Wat een model wél en niet doet
+- ✅ **Herkennen van patronen**: het model leert uit combinaties (bijv. *geslacht + klasse + leeftijd*).  
+- ✅ **Schatten, geen zekerheid**: het geeft **kansen**, geen waarheden.  
+- ❌ **Geen moreel oordeel**: data verklaart, maar rechtvaardigt niet.  
+- ❌ **Geen individuele lotsbeschikking**: context die niet in data staat (locatie op het moment, gedrag van omstanders) blijft onzichtbaar.
+
+---
+
+### Klaar om te beginnen?
+Scroll door de grafieken, lees de toelichtingen en voer je eigen kenmerken in.  
+Het model berekent je **overlevingskans** en we schetsen een **scène** uit die nacht — zodat data weer mens wordt.
+"""
+
+# =========================
+# UI (vast lay-out, wit thema)
 # =========================
 CUSTOM_CSS = """
 body { background: #FFFFFF; color: #0B1C3F; }
 .gradio-container { background: #FFFFFF; }
 h1, h2, h3, h4 { color: #1B4B91; }
-.intro-card, .section {
+.panel, .intro-card {
   background: #F9FBFF;
   border: 1px solid #E0E6F3;
   border-radius: 12px;
   padding: 16px;
 }
-.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;
@@ -184,60 +241,39 @@ 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:
-    # 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
+    # Intro: lange tekst (links) + foto (rechts)
     with gr.Row():
-        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=2, min_width=420):
+            gr.Markdown(INTRO_MD, elem_classes=["intro-card","scroll-md"])
         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"])
+                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.Markdown("⚠️ **Geen afbeelding gevonden.** Plaats `titanic_bg.png` of `titanic_bg.jpg` in de root.")
 
-    # Kerncijfers
+    # KPI's
     with gr.Row():
-        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")
-
-    # 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."
-        )
+        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>")
+
+    # Visualisaties
+    gr.Markdown("## 📊 Verken de data", elem_classes=["panel"])
+    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")
+
+    # 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")
@@ -247,20 +283,9 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
             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")
+        btn = gr.Button("🎲 Bereken én vertel mijn verhaal", variant="primary")
         story_out = gr.Markdown()
 
-    # 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."
-        )
-
     # callbacks
     def load_graphs():
         return (