Update app.py

app.py

@@ -5,6 +5,7 @@ import pandas as pd
 import numpy as np
 import os
 import plotly.express as px
+import plotly.graph_objects as go  # voor de gauge
 
 from sklearn.model_selection import train_test_split
 from sklearn.preprocessing import OneHotEncoder, StandardScaler
@@ -221,6 +222,45 @@ def predict_and_story(pclass, sex, age, sibsp, parch, fare, embarked):
 **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
 # ======================================================
@@ -274,7 +314,10 @@ with gr.Blocks(css=CUSTOM_CSS, theme=gr.themes.Default(primary_hue="blue")) as d
 
     # Interactieve voorspelling
     with gr.Column(elem_classes=["panel"]):
-        gr.Markdown("""## 🔮 Jouw scenario — bereken je overlevingskans en lees je scène
+        # 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**  
@@ -294,6 +337,9 @@ Hier kun je ontdekken **hoe groot jouw kans op overleving** zou zijn geweest aan
 
 > 💡 *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")
@@ -309,8 +355,22 @@ Hier kun je ontdekken **hoe groot jouw kans op overleving** zou zijn geweest aan
     # 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()