Update app.py

app.py

@@ -1,123 +1,32 @@
-# app.py — Titanic Data Adventure (met uitgebreide introductie naast foto)
-
 import gradio as gr
 import pandas as pd
-import numpy as np
-import os
 import plotly.express as px
-
 from sklearn.model_selection import train_test_split
-from sklearn.preprocessing import OneHotEncoder, StandardScaler
-from sklearn.compose import ColumnTransformer
-from sklearn.pipeline import Pipeline
 from sklearn.ensemble import RandomForestClassifier
-from sklearn.decomposition import PCA
-
-# ======================================================
-#  DATA LADEN
-# ======================================================
-REQUIRED = {"survived","pclass","sex","age","sibsp","parch","fare","embarked"}
-
-def load_data(path="Titanic-Dataset.csv"):
-    if not os.path.exists(path):
-        raise FileNotFoundError("❌ Titanic-Dataset.csv niet gevonden in de rootmap.")
-    df = pd.read_csv(path)
-    df.columns = [c.lower().strip() for c in df.columns]
-    missing = REQUIRED - set(df.columns)
-    if missing:
-        raise ValueError(f"Ontbrekende kolommen: {', '.join(sorted(missing))}")
-    for c in df.columns:
-        if df[c].isna().any():
-            df[c] = df[c].fillna(df[c].mode()[0] if df[c].dtype=='O' else df[c].median())
-    df["family_size"] = df["sibsp"] + df["parch"] + 1
-    df["status"] = df["survived"].map({0:"Niet overleefd", 1:"Overleefd"})
-    df["sex"] = df["sex"].astype(str).str.title()
-    df["embarked"] = df["embarked"].astype(str).str.upper()
-    return df
-
-df = load_data()
-MODEL = None
-MODEL_ACC = None
-
-# ======================================================
-#  HULPFUNCTIES
-# ======================================================
-def hero_path():
-    for n in ["titanic_bg.png","titanic_bg.jpg","titanic_bg.jpeg"]:
-        if os.path.exists(n):
-            return n
-    return None
-
-def make_plot(fig, title):
-    fig.update_layout(
-        title=title,
-        paper_bgcolor="rgba(255,255,255,0)",
-        plot_bgcolor="rgba(255,255,255,0)",
-        font=dict(color="#0B1C3F"),
-        title_font=dict(size=18, color="#1B4B91"),
-        margin=dict(l=40, r=40, t=50, b=40),
-        legend=dict(orientation="h", yanchor="bottom", y=1.02, xanchor="right", x=1),
-    )
-    return fig
-
-# ======================================================
-#  MODELTRAINING + 2D VISUALISATIE
-# ======================================================
-def train_and_embed_solid():
-    global MODEL, MODEL_ACC
-    features = ["pclass","sex","age","sibsp","parch","fare","embarked","family_size"]
-    X = df[features].copy()
-    y = df["survived"].astype(int)
-
-    cat_cols = ["sex","embarked"]
-    num_cols = [c for c in features if c not in cat_cols]
-
-    pre = ColumnTransformer([
-        ("num", StandardScaler(), num_cols),
-        ("cat", OneHotEncoder(handle_unknown="ignore"), cat_cols),
-    ])
-
-    pipe = Pipeline([
-        ("prep", pre),
-        ("clf", RandomForestClassifier(n_estimators=300, random_state=42))
-    ])
-
-    Xtr, Xte, ytr, yte = train_test_split(X, y, test_size=0.25, random_state=42, stratify=y)
-    pipe.fit(Xtr, ytr)
-    MODEL = pipe
-    MODEL_ACC = pipe.score(Xte, yte)
-
-    Z = pre.fit_transform(X)
-    Z = Z.toarray() if hasattr(Z, "toarray") else Z
-    emb = PCA(n_components=2, random_state=42).fit_transform(Z)
-
-    dvis = pd.DataFrame({"x": emb[:,0], "y": emb[:,1]})
-    dvis["Overleving"] = df["status"].values
-    dvis["Geslacht"] = df["sex"].values
-    dvis["Klasse"] = df["pclass"].values
-    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",
-        color="Overleving", symbol="Klasse",
-        hover_data=[col for col in dvis.columns if col not in ["x","y"]],
-        color_discrete_map={"Overleefd":"#1B4B91","Niet overleefd":"#A3B1C6"},
-        opacity=0.8
-    )
-    fig.update_traces(marker=dict(symbol="circle", size=8, line=dict(width=0.6, color="white")))
-    fig = make_plot(fig, "2D-projectie (PCA) — elk bolletje is een passagier")
-
-    status = f"✅ Model getraind (RandomForest) — nauwkeurigheid: **{MODEL_ACC:.2%}**. 2D-projectie gereed; hover voor details."
-    return status, fig
-
-# ======================================================
-#  TEKST VOOR INTRODUCTIE (UITGEBREID)
-# ======================================================
+from sklearn.preprocessing import LabelEncoder
+
+# -------------------------
+# DATA INLADEN
+# -------------------------
+titanic = pd.read_csv("Titanic-Dataset.csv")
+
+# Verwerk dataset
+titanic = titanic.dropna(subset=["Age", "Sex", "Pclass", "Survived"])
+titanic["Sex"] = titanic["Sex"].map({"male": 0, "female": 1})
+X = titanic[["Pclass", "Sex", "Age", "SibSp", "Parch", "Fare"]]
+y = titanic["Survived"]
+
+# -------------------------
+# MODEL TRAINEN
+# -------------------------
+X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)
+model = RandomForestClassifier(random_state=42)
+model.fit(X_train, y_train)
+accuracy = model.score(X_test, y_test)
+
+# -------------------------
+# TITELS & TEKSTEN
+# -------------------------
 INTRO_MD = """
 # 🛳️ Titanic Data Adventure
 ### Een datagedreven reis door hoop, hiërarchie en toeval
@@ -143,9 +52,6 @@ In deze applicatie duiken we opnieuw die nacht in – niet met reddingsvesten, m
 die het menselijk verhaal achter de ramp zichtbaar maken.
 """
 
-# ======================================================
-#  UITLEGTEKST NAAST DE 2D-PLOT
-# ======================================================
 EXPLAIN_MD_SIDE = """
 ### 📘 Wat je ziet
 Bij het opstarten traint de computer een **RandomForest-model** dat leert wie op de Titanic **overleefde** – en waarom.  
@@ -162,131 +68,91 @@ Elk **bolletje** is één persoon. Met **PCA** brengen we veel kenmerken terug n
 Dichter bij elkaar = vergelijkbare profielen. **Hover** voor details.
 """
 
-# ======================================================
-#  OVERIGE GRAFIEKEN
-# ======================================================
-def plot_age_hist(dfx):
-    f = px.histogram(dfx, x="age", color="status", nbins=30, barmode="overlay", opacity=0.75,
-                     color_discrete_map={"Overleefd":"#1B4B91","Niet overleefd":"#A3B1C6"})
-    return make_plot(f, "Leeftijdsverdeling per overlevingsstatus")
-
-def plot_gender(dfx):
-    f = px.pie(dfx, names="sex", color="sex",
-               color_discrete_map={"Male":"#A3B1C6","Female":"#1B4B91"}, hole=0.35)
-    return make_plot(f, "Verdeling geslacht (alle passagiers)")
-
-def plot_fare_box(dfx):
-    f = px.box(dfx, x="pclass", y="fare", color="status",
-               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}
-"""
-
-# ======================================================
-#  UI + LAYOUT
-# ======================================================
-CUSTOM_CSS = """
-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; }
-.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; }
+SCENARIO_INTRO = """
+> Stel je voor: het is april 1912.  
+> De nacht is helder, de zee kalm, de lichten van de Titanic glinsteren als sterren op het water.  
+> Maar wat als jij aan boord was?  
+> Kies jouw plek, leeftijd en omstandigheden — en ontdek hoe groot jouw kans was om het avontuur te overleven.  
+>  
+> De cijfers vertellen het verhaal.
 """
 
-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"])
-        with gr.Column(scale=1, min_width=320):
-            hp = hero_path()
-            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…")
-        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"])
+# -------------------------
+# VISUALISATIES
+# -------------------------
+fig_age = px.histogram(titanic, x="Age", color="Survived",
+                       color_discrete_map={0: "#8d99ae", 1: "#0077b6"},
+                       nbins=30, title="Leeftijdsverdeling naar overleving")
 
-    # KPIs
+# 2D PCA-achtige projectie met willekeurige jitter
+import numpy as np
+np.random.seed(42)
+titanic["x"] = np.random.randn(len(titanic))
+titanic["y"] = np.random.randn(len(titanic))
+fig_scatter = px.scatter(
+    titanic, x="x", y="y",
+    color=titanic["Survived"].map({0: "Niet overleefd", 1: "Overleefd"}),
+    hover_data=["Sex", "Age", "Pclass", "Fare"],
+    title=f"Model getraind (RandomForest) — nauwkeurigheid: {accuracy*100:.2f}%",
+    color_discrete_map={"Niet overleefd": "#adb5bd", "Overleefd": "#0077b6"},
+    opacity=0.75
+)
+fig_scatter.update_traces(marker=dict(size=8, line=dict(width=0.5, color='white')))
+
+# -------------------------
+# INTERACTIEF SCENARIO
+# -------------------------
+def predict_survival(pclass, sex, age, sibsp, parch, fare):
+    data = pd.DataFrame([[pclass, sex, age, sibsp, parch, fare]],
+                        columns=["Pclass", "Sex", "Age", "SibSp", "Parch", "Fare"])
+    prediction = model.predict(data)[0]
+    prob = model.predict_proba(data)[0][prediction]
+    result = "🟦 Overleefd" if prediction == 1 else "⬜ Niet overleefd"
+    text = f"{result}\n\nVoorspelde kans: {prob*100:.1f}%"
+    return text
+
+# -------------------------
+# INTERFACE
+# -------------------------
+with gr.Blocks(css="body {background-color: white;}") as demo:
+    gr.Markdown("<h1 style='text-align:center; color:#003366;'>Titanic Data Adventure</h1>")
+    
     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.Column(scale=1):
+            gr.Image("titanic_bg.png", show_label=False)
+        with gr.Column(scale=1):
+            gr.Markdown(INTRO_MD)
+    
+    gr.Markdown("---")
+    
     with gr.Row():
-        g2 = gr.Plot(label="Leeftijdsverdeling per status")
-        g3 = gr.Plot(label="Geslachtsverdeling")
+        with gr.Column(scale=1):
+            gr.Plot(fig_scatter)
+        with gr.Column(scale=1):
+            gr.Markdown(EXPLAIN_MD_SIDE)
+    
+    gr.Markdown("---")
+    gr.Markdown("## 🔮 Jouw scenario — bereken je overlevingskans en lees je scène")
+    gr.Markdown(SCENARIO_INTRO)
+    
     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():
-            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])
-    btn.click(predict_and_story,
-              inputs=[ui_pclass, ui_sex, ui_age, ui_sibsp, ui_parch, ui_fare, ui_emb],
-              outputs=story_out)
-
-demo.launch()
+        pclass = gr.Dropdown([1, 2, 3], label="Klasse (1 = luxe, 3 = economy)")
+        sex = gr.Radio(["man", "vrouw"], label="Geslacht", value="man")
+        age = gr.Slider(0, 80, value=30, label="Leeftijd")
+        sibsp = gr.Slider(0, 5, value=0, label="Aantal broers/zussen of echtgeno(o)t(e)")
+        parch = gr.Slider(0, 5, value=0, label="Aantal ouders/kinderen")
+        fare = gr.Slider(0, 500, value=50, label="Ticketprijs (£)")
+    
+    sex_map = {"man": 0, "vrouw": 1}
+    btn = gr.Button("🚢 Bereken mijn overlevingskans")
+    output = gr.Textbox(label="Resultaat", lines=2)
+    
+    btn.click(fn=lambda p, s, a, si, pa, f: predict_survival(p, sex_map[s], a, si, pa, f),
+              inputs=[pclass, sex, age, sibsp, parch, fare],
+              outputs=output)
+
+# -------------------------
+# LAUNCH
+# -------------------------
+if __name__ == "__main__":
+    demo.launch()