Upload 2 files

app.py

@@ -74,6 +74,7 @@ def pca_biplot(color_label="BMI (Body Mass Index)", arrow_scale=2.0, point_size=
 
     cvals = df[color_key].values
 
+    # Biplot
     fig1 = plt.figure(figsize=(7.8, 5.6))
     ax = fig1.add_subplot(111)
     sc = ax.scatter(Z[:, 0], Z[:, 1], c=cvals, s=point_size, alpha=alpha)
@@ -94,6 +95,7 @@ def pca_biplot(color_label="BMI (Body Mass Index)", arrow_scale=2.0, point_size=
     ax.grid(True, linestyle=":", linewidth=0.6)
     plt.tight_layout()
 
+    # Explained variance plot
     fig2 = plt.figure(figsize=(7.8, 3.8))
     ax2 = fig2.add_subplot(111)
     xs = np.arange(1, len(expl) + 1)
@@ -106,6 +108,7 @@ def pca_biplot(color_label="BMI (Body Mass Index)", arrow_scale=2.0, point_size=
     ax2.grid(True, linestyle=":", linewidth=0.6)
     plt.tight_layout()
 
+    # Top-features table
     load_df = pd.DataFrame({
         "feature_key": feature_keys,
         "PC1_loading": loadings[:, 0],
@@ -135,8 +138,17 @@ def pca_biplot(color_label="BMI (Body Mass Index)", arrow_scale=2.0, point_size=
     return fig1, fig2, table, summary_md
 
 with gr.Blocks(title="PCA Biplot — Diabetes (NL labels)") as demo:
+    # Callout styles
+    gr.HTML("""
+    <style>
+      .callout {padding:12px 14px; border-left:4px solid #2563eb; background:#f1f5f9; border-radius:6px; margin: 8px 0 18px;}
+      .smallnote {font-size: 0.92em; opacity: 0.85;}
+    </style>
+    """)
+
     gr.Markdown("# PCA Biplot — Diabetes (NL labels)")
-    gr.Markdown("In deze demo zie je **live** hoe PCA de data samenvat. De punten zijn patiënten; pijlen laten zien welke metingen (zoals **BMI**, **Bloeddruk**, **Cholesterol**, **Glucose**) de richting van de componenten bepalen. De **kleur** toont standaard **BMI**.")
+    # Place the medical text at the very top so it's always visible
+    gr.Markdown(MEDICAL_MD)
 
     with gr.Row():
         with gr.Column(scale=1):
@@ -148,13 +160,12 @@ with gr.Blocks(title="PCA Biplot — Diabetes (NL labels)") as demo:
             n_components = gr.Slider(2, 10, value=10, step=1, label="Aantal PCA-componenten (voor variatieplot)")
             standardize = gr.Checkbox(value=True, label="Standaardiseer metingen (aanbevolen)")
             run_btn = gr.Button("Update visualisaties")
-            gr.Markdown("> *Medisch nut:* deze biplot maakt grote hoeveelheden patiëntmetingen direct inzichtelijk.")
+            gr.HTML('<div class="callout smallnote">💡 *Tip:* kies links een meting (bijv. BMI of cholesterol) en klik daarna op <b>Update visualisaties</b>.</div>')
         with gr.Column(scale=2):
             plot_biplot = gr.Plot(label="PCA-biplot — punten + pijlen")
             plot_expl = gr.Plot(label="Uitlegvariantie per component")
             table = gr.Dataframe(headers=["Feature (PC1)", "Loading PC1", "Feature (PC2)", "Loading PC2"], row_count=6)
             summary = gr.Markdown()
-            medical_md_block = gr.Markdown(MEDICAL_MD)
 
     inputs = [color_feat, arrow_scale, point_size, alpha, n_components, standardize]
     run_btn.click(fn=pca_biplot, inputs=inputs, outputs=[plot_biplot, plot_expl, table, summary])