Update app.py

app.py

@@ -49,6 +49,17 @@ def hero_path():
             return n
     return None
 
+def story_image_path():
+    """
+    Zoek naar de afbeelding voor het 'witte vlak' naast de gauge.
+    We checken zowel de projectroot als /mnt/data (handig voor Spaces).
+    """
+    candidates = ["sink.png", os.path.join("/mnt/data", "sink.png")]
+    for p in candidates:
+        if os.path.exists(p):
+            return p
+    return None
+
 def make_plot(fig, title):
     fig.update_layout(
         title=title,
@@ -122,23 +133,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 +158,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 +216,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}
 """
 
@@ -269,7 +268,7 @@ body { background:#FFFFFF; color:#0B1C3F; }
 .gradio-container { background:#FFFFFF; }
 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; }
+.hero-img img { border-radius:12px; border:1px solid #E0E6F3; width:100%; height:auto; }
 .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; }
@@ -317,9 +316,9 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
         # 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.
-
+                # Let op: de zin '— en meteen het verhaal van jouw nacht lezen.' is weggelaten
+                gr.Markdown("""## 🔮 Jouw scenario — bereken je overlevingskans
+Hier kun je ontdekken **hoe groot jouw kans op overleving** zou zijn geweest aan boord van de *Titanic*.
 1. **Kies je profiel**  
    - **Klasse:** 1e, 2e of 3e klasse (je reiscomfort en dekpositie).  
    - **Geslacht:** man of vrouw — dit had invloed op reddingsvoorrang.  
@@ -327,16 +326,17 @@ 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.*""")
+                sp = story_image_path()
+                if sp:
+                    # Plaats de afbeelding in het witte vlak onder de tekst
+                    gr.Image(value=sp, interactive=False, show_label=False, elem_classes=["hero-img"])
             with gr.Column(scale=1, min_width=320):
                 viz_plot = gr.Plot(label="Jouw overlevingskans (live)")