Update app.py

app.py

@@ -1,4 +1,4 @@
-# app.py — Titanic Data Adventure (alleen blauwe tekst, zonder zwart/vetgedrukt)
+# app.py — Titanic Data Adventure (met uitgebreide introductie naast foto)
 
 import gradio as gr
 import pandas as pd
@@ -117,23 +117,23 @@ def train_and_embed_solid():
     return status, fig
 
 # ======================================================
-#  TEKSTEN (alleen blauwe kleur, geen vet of zwart)
+#  TEKSTBLOKKEN — ALLEEN BLAUW, GEEN ZWART/GEEN VET
 # ======================================================
 INTRO_MD = """
 <span style='color:#1B4B91'>
-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.  
+April 1912.<br>
+De RMS Titanic vertrekt richting New York: een drijvend paleis, gevuld met verwachtingen.<br>
+Aan boord: industriëlen in avondkleding, jonge gezinnen met één koffer, bemanningsleden met routine.<br>
+De zee is kalm; de toekomst lijkt maakbaar. Meer dan een eeuw later kijken wij mee — niet met verrekijkers of logboeken, maar met data.<br>
+Elk record in deze dataset is een menselijk verhaal: iemand met een plek aan tafel, een ticket, een familie, een keuze.<br>
 Door de gegevens te verkennen, begrijpen we beter wie overleefde — en waarom.
 </span>
 """
 
 EXPLAIN_MD_SIDE = """
 <span style='color:#1B4B91'>
-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.  
+Bij het opstarten traint de computer een RandomForest-model dat leert wie op de Titanic overleefde – en waarom.<br>
+Het kijkt naar klasse, geslacht, leeftijd, familieomvang, ticketprijs en haven van vertrek.<br>
 De nauwkeurigheid (bijv. 74%) betekent: in 74 van de 100 gevallen voorspelt het model correct.
 </span>
 """
@@ -156,6 +156,78 @@ def plot_fare_box(dfx):
                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}
+"""
+
+# ======================================================
+#  LIVE GAUGE VOOR JOUW SCENARIO (met kleurbanden + threshold)
+# ======================================================
+def live_viz(pclass, sex, age, sibsp, parch, fare, embarked):
+    # Retourneer een gauge die live de kans toont (0–100%) met kleurbanden
+    if MODEL is None:
+        return make_plot(go.Figure(), "Jouw overlevingskans (live)")
+    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]) * 100.0
+
+    fig = go.Figure(go.Indicator(
+        mode="gauge+number",
+        value=prob,
+        number={"suffix": "%", "valueformat": ".1f"},
+        gauge={
+            "axis": {"range": [0, 100]},
+            "bar": {"thickness": 0.25},
+            # Kleurbanden (0–25 rood, 25–50 oranje, 50–75 geel, 75–100 groen)
+            "steps": [
+                {"range": [0, 25], "color": "#FDECEC"},
+                {"range": [25, 50], "color": "#FFF2E0"},
+                {"range": [50, 75], "color": "#FFF9D6"},
+                {"range": [75, 100], "color": "#E8F6EA"},
+            ],
+            # Threshold-lijn op actuele waarde
+            "threshold": {
+                "line": {"color": "#1B4B91", "width": 4},
+                "thickness": 0.9,
+                "value": prob
+            },
+        },
+        title={"text": "Jouw overlevingskans (live)"}
+    ))
+    return make_plot(fig, "Jouw overlevingskans (live)")
+
 # ======================================================
 #  UI + LAYOUT
 # ======================================================
@@ -165,21 +237,41 @@ body { background:#FFFFFF; color:#0B1C3F; }
 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; }
 """
 
 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"], unsafe_allow_html=True)
+            # Alleen blauwe tekst (HTML inline), geen vet/zwart
+            gr.Markdown(INTRO_MD, elem_classes=["intro-card"])
         with gr.Column(scale=1, min_width=320):
             hp = hero_path()
-            if hp:
+            if hp: 
                 gr.Image(value=hp, interactive=False, show_label=False, elem_classes=["hero-img"])
-            else:
+            else: 
                 gr.Markdown("⚠️ **Geen afbeelding gevonden.** Plaats `titanic_bg.png` of `titanic_bg.jpg` in de root.")
 
+    # Passagierslijst — volledige dataset, scrollbaar
+    with gr.Column(elem_classes=["panel"]):
+        gr.Markdown("## 👥 Passagierslijst — volledige dataset (scrollbaar)")
+        gr.DataFrame(
+            value=df,               # volledige dataset
+            wrap=True,
+            interactive=False,      # alleen-lezen
+            label="Titanic-passagiers",
+            max_height=320          # vaste hoogte -> scroll binnen de tabel
+        )
+
+    # Spacer om overlap te voorkomen
     gr.Markdown("")
 
+    # Panel: status + 2D-plot links en uitleg rechts
     with gr.Column(elem_classes=["panel"]):
         gr.Markdown("## 🔧 Initialisatie & Modeltraining")
         status_md = gr.Markdown("⏳ Initialiseren…")
@@ -187,13 +279,17 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
             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"], unsafe_allow_html=True)
+                # Alleen blauwe tekst (HTML inline), geen vet/zwart
+                gr.Markdown(EXPLAIN_MD_SIDE, elem_classes=["explain-card"])
 
+    # KPIs
     with gr.Row():
-        gr.HTML(f"<div style='color:#1B4B91;'><strong>Totaal passagiers:</strong> {len(df):,}</div>")
-        gr.HTML(f"<div style='color:#1B4B91;'><strong>Overlevenden:</strong> {int(df['survived'].sum()):,}</div>")
-        gr.HTML(f"<div style='color:#1B4B91;'><strong>Percentage overleefd:</strong> {df['survived'].mean()*100:.1f}%</div>")
+        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():
         g2 = gr.Plot(label="Leeftijdsverdeling per status")
@@ -201,7 +297,61 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
     with gr.Row():
         g4 = gr.Plot(label="Ticketprijs per klasse")
 
+    # Interactieve voorspelling
+    with gr.Column(elem_classes=["panel"]):
+        # Tekstblok + gauge naast elkaar
+        with gr.Row():
+            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.  
+   - **Leeftijd:** jouw leeftijd in jaren.  
+   - **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):
+                viz_plot = gr.Plot(label="Jouw overlevingskans (live)")
+
+        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])
 
+    # Initiele 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
+    for comp in [ui_pclass, ui_sex, ui_age, ui_sibsp, ui_parch, ui_fare, ui_emb]:
+        comp.change(live_viz,
+                    inputs=[ui_pclass, ui_sex, ui_age, ui_sibsp, ui_parch, ui_fare, ui_emb],
+                    outputs=viz_plot)
+
+    # Ook updaten bij de knop
+    btn.click(predict_and_story,
+              inputs=[ui_pclass, ui_sex, ui_age, ui_sibsp, ui_parch, ui_fare, ui_emb],
+              outputs=story_out)
+    btn.click(live_viz,
+              inputs=[ui_pclass, ui_sex, ui_age, ui_sibsp, ui_parch, ui_fare, ui_emb],
+              outputs=viz_plot)
+
 demo.launch()