Update app.py

app.py

@@ -1,4 +1,4 @@
-# app.py — Titanic Data Adventure (met uitlegpaneel onder modeltraining)
+# app.py — Titanic Data Adventure (uitleg naast de 2D-plot, strak en compact)
 
 import gradio as gr
 import pandas as pd
@@ -98,6 +98,9 @@ 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",
@@ -113,45 +116,27 @@ def train_and_embed_solid():
     return status, fig
 
 # ======================================================
-#  EXTRA TEKSTBLOK: UITLEG
+#  UITLEGTEKST (compact, bedoeld voor naast de plot)
 # ======================================================
-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.
+EXPLAIN_MD_SIDE = """
+### 📘 Wat je ziet
+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.
 
 ---
 
-### 🗺️ 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.
+### 🗺️ 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.
 
 ---
 
-### 💬 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.
+### 💬 Jij in dit verhaal
+Vul onderaan je **eigen profiel** in, ontdek jouw kans en lees je scène uit die nacht.
 """
 
 # ======================================================
@@ -242,6 +227,7 @@ h1, h2, h3, h4 { color:#1B4B91; }
 """
 
 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"])
@@ -250,18 +236,24 @@ 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.")
 
+    # Panel: status + 2D-plot links en uitleg rechts
     with gr.Column(elem_classes=["panel"]):
         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():
+            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"])
 
+    # KPIs
     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>")
         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")
@@ -269,6 +261,7 @@ 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"]):
         gr.Markdown("## 🔮 Jouw scenario — bereken je overlevingskans en lees je scène")
         with gr.Row():
@@ -283,6 +276,7 @@ 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()
 
+    # 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])
     btn.click(predict_and_story,