v5.0: Add PDP tab, JSON API endpoints, SHAP in mobile HTML

app.py

@@ -1,5 +1,5 @@
 """
-EVB Prognosis: 1-Year Mortality Risk Calculator
+EVB Prognosis: 1-Year Mortality Risk Calculator v5.0
 Calibrated Random Forest with Isotonic Calibration (AUC 0.915)
 
 Architecture:
@@ -7,8 +7,10 @@ Architecture:
 - JSON isotonic calibration data
 - Fallback to joblib if ONNX unavailable
 - SHAP feature importance (global + patient-specific)
+- Partial Dependence Plots (PDP) for numeric features
 - Glassmorphism dark theme with classic toggle
 - Landing page with device detection
+- JSON API endpoints for mobile/external consumers
 """
 import os
 import gradio as gr
@@ -98,22 +100,47 @@ for fn in FEATURE_NAMES:
     }
     CLEAN_NAMES[fn] = mappings.get(clean, clean.replace("_", " ").title())
 
+# Numeric features for PDP
+NUMERIC_FEATURES = {
+    "age": {"min": 18, "max": 100, "step": 1, "label": "Age (years)"},
+    "albumin": {"min": 1.0, "max": 5.0, "step": 0.1, "label": "Albumin (g/dL)"},
+    "total_bilirrubin": {"min": 0.1, "max": 30.0, "step": 0.5, "label": "Total Bilirubin (mg/dL)"},
+    "direct_bilirrubina": {"min": 0.1, "max": 10.0, "step": 0.2, "label": "Direct Bilirubin (mg/dL)"},
+    "inr": {"min": 0.5, "max": 5.0, "step": 0.1, "label": "INR"},
+    "creatinine": {"min": 0.1, "max": 10.0, "step": 0.2, "label": "Creatinine (mg/dL)"},
+    "platelets": {"min": 10, "max": 500, "step": 10, "label": "Platelets (x10^3/uL)"},
+    "ast": {"min": 10, "max": 500, "step": 10, "label": "AST (U/L)"},
+    "alt": {"min": 10, "max": 500, "step": 10, "label": "ALT (U/L)"},
+    "hemoglobin": {"min": 5.0, "max": 20.0, "step": 0.5, "label": "Hemoglobin (g/dL)"},
+    "hematocrit": {"min": 15, "max": 60, "step": 1, "label": "Hematocrit (%)"},
+    "leucocytes": {"min": 1.0, "max": 50.0, "step": 1.0, "label": "Leukocytes (x10^3/uL)"},
+    "sodium": {"min": 120, "max": 160, "step": 1, "label": "Sodium (mEq/L)"},
+    "potassium": {"min": 2.0, "max": 6.0, "step": 0.1, "label": "Potassium (mEq/L)"},
+    "terlipressin_dose": {"min": 0, "max": 20, "step": 1, "label": "Terlipressin Dose (mg)"},
+    "time-to-endoscophy_hours": {"min": 0, "max": 48, "step": 1, "label": "Time to Endoscopy (hours)"},
+}
+
+# Default patient for PDP baseline
+DEFAULT_PATIENT = {
+    "age": 50, "sex": "male", "race": "white", "etiology_cirrosis": "alcohol",
+    "hepatorenal_syndrome": "no", "omeprazole": "no", "spironolactone": "yes",
+    "furosemide": "yes", "propanolol": "no", "dialisis": "no",
+    "portal_vein_thrombosis": "no", "ascitis": "yes", "hepatocellular_carcinoma": "no",
+    "albumin": 3.5, "total_bilirrubin": 2.0, "direct_bilirrubina": 0.5,
+    "inr": 1.2, "creatinine": 1.0, "platelets": 150, "ast": 35, "alt": 25,
+    "hemoglobin": 13, "hematocrit": 40, "leucocytes": 6, "sodium": 140,
+    "potassium": 4, "varices": "yes", "red_wale_marks": "no",
+    "rupture_point": "no", "active_bleeding": "no", "therapy": "Banding",
+    "terlipressin_dose": 2, "time-to-endoscophy_hours": 12, "rebleeding": "no"
+}
+
 # Precompute global feature importance at startup
 GLOBAL_IMPORTANCE = None
+GLOBAL_SHAP_DATA = None  # For JSON API
 if SHAP_AVAILABLE:
     try:
-        # Use a representative set of patients to compute global importance
         representative_patients = [
-            {"age": 50, "sex": "male", "race": "white", "etiology_cirrosis": "alcohol",
-             "hepatorenal_syndrome": "no", "omeprazole": "no", "spironolactone": "yes",
-             "furosemide": "yes", "propanolol": "no", "dialisis": "no",
-             "portal_vein_thrombosis": "no", "ascitis": "yes", "hepatocellular_carcinoma": "no",
-             "albumin": 3.5, "total_bilirrubin": 2.0, "direct_bilirrubina": 0.5,
-             "inr": 1.2, "creatinine": 1.0, "platelets": 150, "ast": 35, "alt": 25,
-             "hemoglobin": 13, "hematocrit": 40, "leucocytes": 6, "sodium": 140,
-             "potassium": 4, "varices": "yes", "red_wale_marks": "no",
-             "rupture_point": "no", "active_bleeding": "no", "therapy": "Banding",
-             "terlipressin_dose": 2, "time-to-endoscophy_hours": 12, "rebleeding": "no"},
+            DEFAULT_PATIENT,
             {"age": 75, "sex": "female", "race": "black", "etiology_cirrosis": "hcv",
              "hepatorenal_syndrome": "yes", "omeprazole": "yes", "spironolactone": "no",
              "furosemide": "no", "propanolol": "yes", "dialisis": "yes",
@@ -144,19 +171,26 @@ if SHAP_AVAILABLE:
                 rf = cc.base_estimator
                 explainer = shap.TreeExplainer(rf)
                 sv = explainer.shap_values(proc)
-                # sv shape: (1, n_features, 2) — index [:, :, 1] for death class
                 shap_vals = np.array(sv)[0, :, 1]
                 global_shap_accum += np.abs(shap_vals)
         
-        n_total = len(representative_patients) * 5  # patients * folds
+        n_total = len(representative_patients) * 5
         GLOBAL_IMPORTANCE = global_shap_accum / n_total
         
-        # Sort and get top 20
+        # Build JSON-friendly global SHAP data
         sorted_idx = np.argsort(GLOBAL_IMPORTANCE)[::-1]
-        print("Global SHAP feature importance (top 10):")
-        for i in range(min(10, len(sorted_idx))):
+        GLOBAL_SHAP_DATA = []
+        for i in range(min(20, len(sorted_idx))):
             idx = int(sorted_idx[i])
-            print(f"  {CLEAN_NAMES[FEATURE_NAMES[idx]]:35s} {float(GLOBAL_IMPORTANCE[idx]):.4f}")
+            GLOBAL_SHAP_DATA.append({
+                "feature": CLEAN_NAMES[FEATURE_NAMES[idx]],
+                "raw_feature": FEATURE_NAMES[idx],
+                "importance": round(float(GLOBAL_IMPORTANCE[idx]), 6)
+            })
+        
+        print("Global SHAP feature importance (top 10):")
+        for item in GLOBAL_SHAP_DATA[:10]:
+            print(f"  {item['feature']:35s} {item['importance']:.4f}")
         print("Global SHAP computed successfully")
     except Exception as e:
         print(f"Error computing global SHAP: {e}")
@@ -164,6 +198,60 @@ if SHAP_AVAILABLE:
         traceback.print_exc()
         GLOBAL_IMPORTANCE = None
 
+# ===== PDP Computation =====
+PDP_CACHE = {}
+
+def compute_pdp(feature_name, n_points=30):
+    """Compute partial dependence plot data for a numeric feature."""
+    if feature_name in PDP_CACHE:
+        return PDP_CACHE[feature_name]
+    
+    if feature_name not in NUMERIC_FEATURES:
+        return None
+    
+    finfo = NUMERIC_FEATURES[feature_name]
+    values = np.linspace(finfo["min"], finfo["max"], n_points)
+    probabilities = []
+    
+    for val in values:
+        patient = DEFAULT_PATIENT.copy()
+        patient[feature_name] = float(val)
+        df = pd.DataFrame([patient])
+        processed = preprocessor.transform(df)
+        
+        if USE_ONNX:
+            processed_f32 = processed.astype(np.float32)
+            fold_probs = []
+            for i, sess in enumerate(onnx_sessions):
+                result = sess.run(None, {"X": processed_f32})
+                raw_prob = float(result[1][0][1])
+                cal = calibration_data[f"fold_{i}"]
+                cal_prob = float(np.interp(raw_prob, cal["X_thresholds"], cal["y_thresholds"]))
+                fold_probs.append(cal_prob)
+            prob = float(np.mean(fold_probs))
+        else:
+            prob = float(joblib_model.predict_proba(processed)[:, 1][0])
+        
+        probabilities.append(prob)
+    
+    result = {
+        "feature": feature_name,
+        "label": finfo["label"],
+        "values": [round(float(v), 2) for v in values],
+        "probabilities": [round(p, 6) for p in probabilities],
+        "default_value": DEFAULT_PATIENT.get(feature_name, finfo["min"]),
+        "min": finfo["min"],
+        "max": finfo["max"]
+    }
+    PDP_CACHE[feature_name] = result
+    return result
+
+# Precompute PDP for top features
+print("Precomputing PDP curves...")
+for feat in ["albumin", "inr", "creatinine", "total_bilirrubin", "sodium", "age", "hemoglobin", "platelets"]:
+    compute_pdp(feat)
+print(f"PDP precomputed for {len(PDP_CACHE)} features")
+
 def compute_patient_shap(processed):
     """Compute patient-specific SHAP values averaged across 5 folds."""
     if not SHAP_AVAILABLE:
@@ -236,12 +324,10 @@ def render_patient_shap_html(shap_values, base_value, probability):
         
         if val > 0:
             color = "#ff4b2b"
-            direction = "RISK"
             arrow = "+"
             bar_style = f"width:{abs_pct:.1f}%; margin-left:50%; background:linear-gradient(90deg, rgba(255,75,43,0.3), rgba(255,75,43,0.7));"
         else:
             color = "#00e5a0"
-            direction = "PROTECTIVE"
             arrow = ""
             bar_style = f"width:{abs_pct:.1f}%; margin-left:{50 - abs_pct/2:.1f}%; background:linear-gradient(90deg, rgba(0,229,160,0.7), rgba(0,229,160,0.3));"
         
@@ -255,7 +341,6 @@ def render_patient_shap_html(shap_values, base_value, probability):
             <div style="width:65px; font-size:10px; color:{color}; font-weight:600; font-family:monospace;">{arrow}{val:.4f}</div>
         </div>"""
     
-    # Summary
     total_shap = float(np.sum(shap_values))
     direction_text = "above" if total_shap > 0 else "below"
     direction_color = "#ff4b2b" if total_shap > 0 else "#00e5a0"
@@ -280,6 +365,125 @@ def render_patient_shap_html(shap_values, base_value, probability):
         </div>
     </div>"""
 
+def render_pdp_html(feature_name):
+    """Render a PDP chart as an SVG inside HTML."""
+    pdp_data = compute_pdp(feature_name)
+    if pdp_data is None:
+        return f"<div style='color:#687076; text-align:center; padding:20px;'>PDP not available for {feature_name}</div>"
+    
+    values = pdp_data["values"]
+    probs = pdp_data["probabilities"]
+    label = pdp_data["label"]
+    default_val = pdp_data["default_value"]
+    
+    # SVG dimensions
+    w, h = 600, 300
+    pad_l, pad_r, pad_t, pad_b = 60, 20, 30, 50
+    plot_w = w - pad_l - pad_r
+    plot_h = h - pad_t - pad_b
+    
+    min_v, max_v = min(values), max(values)
+    min_p, max_p = min(probs), max(probs)
+    # Add some padding to y-axis
+    p_range = max_p - min_p
+    if p_range < 0.01:
+        p_range = 0.1
+        min_p = max(0, min_p - 0.05)
+        max_p = min(1, max_p + 0.05)
+    else:
+        min_p = max(0, min_p - p_range * 0.1)
+        max_p = min(1, max_p + p_range * 0.1)
+    
+    def x_pos(v):
+        return pad_l + (v - min_v) / (max_v - min_v) * plot_w if max_v > min_v else pad_l + plot_w / 2
+    
+    def y_pos(p):
+        return pad_t + (1 - (p - min_p) / (max_p - min_p)) * plot_h if max_p > min_p else pad_t + plot_h / 2
+    
+    # Build path
+    points = []
+    for v, p in zip(values, probs):
+        points.append(f"{x_pos(v):.1f},{y_pos(p):.1f}")
+    path_d = "M " + " L ".join(points)
+    
+    # Gradient fill area
+    fill_points = [f"{x_pos(values[0]):.1f},{y_pos(min_p):.1f}"]
+    for v, p in zip(values, probs):
+        fill_points.append(f"{x_pos(v):.1f},{y_pos(p):.1f}")
+    fill_points.append(f"{x_pos(values[-1]):.1f},{y_pos(min_p):.1f}")
+    fill_d = "M " + " L ".join(fill_points) + " Z"
+    
+    # Default value marker
+    default_x = x_pos(default_val)
+    default_prob = float(np.interp(default_val, values, probs))
+    default_y = y_pos(default_prob)
+    
+    # Y-axis ticks
+    y_ticks = np.linspace(min_p, max_p, 5)
+    y_tick_html = ""
+    for yt in y_ticks:
+        yp = y_pos(yt)
+        y_tick_html += f'<line x1="{pad_l}" y1="{yp:.1f}" x2="{pad_l + plot_w}" y2="{yp:.1f}" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>'
+        y_tick_html += f'<text x="{pad_l - 8}" y="{yp:.1f}" text-anchor="end" fill="#687076" font-size="10" dominant-baseline="middle">{yt:.1%}</text>'
+    
+    # X-axis ticks
+    x_ticks = np.linspace(min_v, max_v, 6)
+    x_tick_html = ""
+    for xt in x_ticks:
+        xp = x_pos(xt)
+        x_tick_html += f'<text x="{xp:.1f}" y="{h - 10}" text-anchor="middle" fill="#687076" font-size="10">{xt:.1f}</text>'
+    
+    svg = f"""
+    <svg viewBox="0 0 {w} {h}" xmlns="http://www.w3.org/2000/svg" style="width:100%; max-width:600px;">
+        <defs>
+            <linearGradient id="pdp-fill-{feature_name}" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="rgba(0,229,160,0.25)"/>
+                <stop offset="100%" stop-color="rgba(0,229,160,0.02)"/>
+            </linearGradient>
+            <linearGradient id="pdp-line-{feature_name}" x1="0" y1="0" x2="1" y2="0">
+                <stop offset="0%" stop-color="#00e5a0"/>
+                <stop offset="100%" stop-color="#00b4d8"/>
+            </linearGradient>
+        </defs>
+        
+        <!-- Grid -->
+        {y_tick_html}
+        
+        <!-- Fill area -->
+        <path d="{fill_d}" fill="url(#pdp-fill-{feature_name})"/>
+        
+        <!-- Line -->
+        <path d="{path_d}" fill="none" stroke="url(#pdp-line-{feature_name})" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+        
+        <!-- Default value marker -->
+        <line x1="{default_x:.1f}" y1="{pad_t}" x2="{default_x:.1f}" y2="{pad_t + plot_h}" stroke="rgba(255,180,0,0.4)" stroke-width="1" stroke-dasharray="4,4"/>
+        <circle cx="{default_x:.1f}" cy="{default_y:.1f}" r="5" fill="#ffb400" stroke="#0a0e17" stroke-width="2"/>
+        <text x="{default_x:.1f}" y="{default_y - 12:.1f}" text-anchor="middle" fill="#ffb400" font-size="10" font-weight="600">{default_prob:.1%}</text>
+        
+        <!-- X-axis label -->
+        {x_tick_html}
+        <text x="{w/2}" y="{h - 2}" text-anchor="middle" fill="#9ba1a6" font-size="11" font-weight="500">{label}</text>
+        
+        <!-- Y-axis label -->
+        <text x="12" y="{h/2}" text-anchor="middle" fill="#9ba1a6" font-size="11" font-weight="500" transform="rotate(-90, 12, {h/2})">Mortality Probability</text>
+    </svg>
+    """
+    
+    return f"""
+    <div style="padding:8px 0; text-align:center;">
+        <div style="font-size:13px; color:#00e5a0; font-weight:600; margin-bottom:4px;">
+            {label} &mdash; Partial Dependence
+        </div>
+        <div style="font-size:10px; color:#687076; margin-bottom:8px;">
+            How varying {label.lower()} affects predicted mortality (other features held at defaults)
+        </div>
+        {svg}
+        <div style="display:flex; justify-content:center; gap:16px; margin-top:8px; font-size:10px;">
+            <span style="color:#ffb400;">&#9679; Default value ({default_val})</span>
+            <span style="color:#687076;">Min: {min(probs):.1%} | Max: {max(probs):.1%}</span>
+        </div>
+    </div>"""
+
 # ===== Clinical Score Calculations =====
 def calculate_meld(bilirubin, inr, creatinine):
     bilirubin = max(bilirubin, 1.0)
@@ -312,7 +516,6 @@ def calculate_albi(bilirubin, albumin):
     return round(albi, 2), grade
 
 def apply_isotonic(raw_prob, x_thresholds, y_thresholds):
-    """Apply isotonic calibration using linear interpolation."""
     return float(np.interp(raw_prob, x_thresholds, y_thresholds))
 
 # ===== Prediction Function =====
@@ -349,7 +552,6 @@ def predict_patient_outcome(
     df = pd.DataFrame([input_data])
     processed = preprocessor.transform(df)
     
-    # ML prediction
     if USE_ONNX:
         processed_f32 = processed.astype(np.float32)
         fold_probs = []
@@ -367,21 +569,17 @@ def predict_patient_outcome(
         probability = joblib_model.predict_proba(processed)[:, 1][0]
         inference_engine = "joblib"
     
-    # SHAP computation
     patient_shap, base_value = compute_patient_shap(processed)
     
-    # Confidence interval (simplified)
     confidence_margin = 0.15
     ci_lower = max(0, probability - confidence_margin)
     ci_upper = min(1, probability + confidence_margin)
     
-    # Traditional scores
     meld = calculate_meld(total_bilirrubin, inr, creatinine)
     meld_na = calculate_meld_na(total_bilirrubin, inr, creatinine, sodium)
     child_pugh, cp_class = calculate_child_pugh(total_bilirrubin, albumin, inr, ascitis)
     albi, albi_grade = calculate_albi(total_bilirrubin, albumin)
     
-    # Risk category
     if probability < 0.3:
         risk_category, risk_icon, risk_bar_color = "LOW RISK", "OK", "#00e5a0"
     elif probability < 0.6:
@@ -392,7 +590,6 @@ def predict_patient_outcome(
     pct = probability * 100
     bar_width = int(pct)
     
-    # Styled ML output
     ml_output = f"""
 <div style="text-align:center; padding:10px 0;">
 <div style="font-size:48px; font-weight:800; background: linear-gradient(135deg, {risk_bar_color}, #fff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:2px;">{pct:.1f}%</div>
@@ -407,7 +604,6 @@ def predict_patient_outcome(
 </div>
 """
     
-    # Styled traditional scores
     traditional_scores = f"""
 <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:8px 0;">
 <div style="background:rgba(0,229,160,0.08); border:1px solid rgba(0,229,160,0.2); border-radius:12px; padding:16px; text-align:center;">
@@ -433,7 +629,6 @@ def predict_patient_outcome(
 </div>
 """
     
-    # Styled comparison table
     comparison = f"""
 <div style="padding:8px 0;">
 <table style="width:100%; border-collapse:separate; border-spacing:0 6px;">
@@ -477,21 +672,25 @@ def predict_patient_outcome(
 </div>
 """
     
-    # SHAP outputs
     global_shap_html = render_global_shap_html()
     patient_shap_html = render_patient_shap_html(patient_shap, base_value, probability)
     
     return ml_output, traditional_scores, comparison, global_shap_html, patient_shap_html
 
+# ===== PDP Gradio Function =====
+def generate_pdp_plot(feature_name):
+    """Generate PDP HTML for the selected feature."""
+    if not feature_name or feature_name not in NUMERIC_FEATURES:
+        return "<div style='color:#687076; text-align:center; padding:40px;'>Select a feature to view its partial dependence plot</div>"
+    return render_pdp_html(feature_name)
+
 # ===== CSS Themes =====
 GLASSMORPHISM_CSS = """
-/* === Root dark background with subtle gradient === */
 .gradio-container {
     background: linear-gradient(135deg, #0a0e17 0%, #0d1520 30%, #0a1628 60%, #0f0a1a 100%) !important;
     min-height: 100vh;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
 }
-/* === Animated vapor cloud background === */
 .gradio-container::before {
     content: '';
     position: fixed;
@@ -511,7 +710,6 @@ GLASSMORPHISM_CSS = """
     75% { transform: translate(1%, -2%) rotate(0.5deg); }
 }
 .gradio-container > * { position: relative; z-index: 1; }
-/* === Glass card effect === */
 .block, .form, .panel {
     background: rgba(15, 23, 42, 0.6) !important;
     backdrop-filter: blur(20px) !important;
@@ -520,7 +718,6 @@ GLASSMORPHISM_CSS = """
     border-radius: 16px !important;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
 }
-/* === Tab styling === */
 .tab-nav {
     background: rgba(15, 23, 42, 0.4) !important;
     border-radius: 12px !important; padding: 4px !important;
@@ -537,7 +734,6 @@ GLASSMORPHISM_CSS = """
     color: #00e5a0 !important; font-weight: 600 !important;
     box-shadow: 0 0 20px rgba(0, 229, 160, 0.1) !important;
 }
-/* === Input styling === */
 input, select, textarea, .wrap {
     background: rgba(15, 23, 42, 0.8) !important;
     border: 1px solid rgba(0, 229, 160, 0.15) !important;
@@ -550,12 +746,10 @@ input:focus, select:focus, textarea:focus {
     outline: none !important;
 }
 label, .label-wrap span { color: #9ba1a6 !important; font-weight: 500 !important; font-size: 13px !important; }
-/* === Slider === */
 input[type="range"] { background: transparent !important; border: none !important; }
 input[type="range"]::-webkit-slider-track { background: rgba(0, 229, 160, 0.15) !important; height: 4px !important; border-radius: 2px !important; }
 input[type="range"]::-webkit-slider-thumb { background: #00e5a0 !important; border: 2px solid rgba(0, 229, 160, 0.5) !important; box-shadow: 0 0 10px rgba(0, 229, 160, 0.3) !important; }
 .range_input input[type="number"], input[type="number"] { background: rgba(15, 23, 42, 0.8) !important; color: #00e5a0 !important; font-weight: 600 !important; border: 1px solid rgba(0, 229, 160, 0.2) !important; }
-/* === Primary button === */
 .primary {
     background: linear-gradient(135deg, #00e5a0 0%, #00b4d8 100%) !important;
     border: none !important; color: #0a0e17 !important;
@@ -566,35 +760,23 @@ input[type="range"]::-webkit-slider-thumb { background: #00e5a0 !important; bord
     transition: all 0.3s ease !important;
 }
 .primary:hover { box-shadow: 0 6px 30px rgba(0, 229, 160, 0.5) !important; transform: translateY(-1px) !important; }
-/* === Markdown text === */
 .markdown-text, .prose, .md { color: #ecedee !important; }
 .markdown-text h1, .prose h1 { background: linear-gradient(135deg, #00e5a0, #00b4d8) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; font-weight: 800 !important; letter-spacing: 1px !important; }
 .markdown-text h3, .prose h3 { color: #00e5a0 !important; font-weight: 600 !important; }
 .markdown-text p, .prose p { color: #9ba1a6 !important; line-height: 1.7 !important; }
 .markdown-text strong, .prose strong { color: #ecedee !important; }
-/* === Dropdown === */
 .wrap .secondary-wrap { background: rgba(15, 23, 42, 0.8) !important; border: 1px solid rgba(0, 229, 160, 0.15) !important; }
 ul.options li { color: #ecedee !important; background: rgba(15, 23, 42, 0.95) !important; }
 ul.options li:hover, ul.options li.selected { background: rgba(0, 229, 160, 0.15) !important; color: #00e5a0 !important; }
-/* === Scrollbar === */
 ::-webkit-scrollbar { width: 6px; }
 ::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.3); }
 ::-webkit-scrollbar-thumb { background: rgba(0, 229, 160, 0.2); border-radius: 3px; }
 ::-webkit-scrollbar-thumb:hover { background: rgba(0, 229, 160, 0.4); }
-/* === Footer === */
 footer { display: none !important; }
 .gap { gap: 12px !important; }
-/* === Theme toggle button === */
-#theme-toggle-btn {
-    position: fixed !important; top: 12px; right: 12px; z-index: 9999;
-    padding: 8px 16px; border-radius: 8px; cursor: pointer;
-    font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
-    transition: all 0.3s ease;
-}
 """
 
 CLASSIC_OVERRIDE_CSS = """
-/* Classic theme overrides - injected via JS toggle */
 .classic-mode .gradio-container { background: #f7f8fa !important; }
 .classic-mode .gradio-container::before { display: none !important; }
 .classic-mode .block, .classic-mode .form, .classic-mode .panel {
@@ -649,7 +831,6 @@ THEME_JS = """
 
 with gr.Blocks(css=FULL_CSS, title="EVB Prognosis Calculator", js=THEME_JS) as demo:
     
-    # Theme toggle (JavaScript-based)
     gr.HTML("""
     <div id="theme-controls" style="position:fixed; top:12px; right:12px; z-index:9999; display:flex; gap:8px; align-items:center;">
         <button id="theme-toggle" onclick="toggleTheme()" style="
@@ -665,7 +846,6 @@ with gr.Blocks(css=FULL_CSS, title="EVB Prognosis Calculator", js=THEME_JS) as d
             background:rgba(0,180,216,0.15); color:#00b4d8;
             border:1px solid rgba(0,180,216,0.3);
             text-decoration:none;
-            transition:all 0.3s ease;
         ">Mobile Version</a>
     </div>
     """)
@@ -735,6 +915,32 @@ with gr.Blocks(css=FULL_CSS, title="EVB Prognosis Calculator", js=THEME_JS) as d
             sodium = gr.Slider(minimum=120, maximum=160, step=1, label="Sodium (mEq/L)", value=140)
             potassium = gr.Slider(minimum=2, maximum=6, step=0.1, label="Potassium (mEq/L)", value=4)
 
+    # PDP Tab
+    with gr.Tab("4. Partial Dependence"):
+        gr.Markdown("""
+### Partial Dependence Plots (PDP)
+
+Explore how varying a single feature affects the predicted mortality probability, while holding all other features at their default values. Select a feature below to visualize its marginal effect on the model output.
+        """)
+        
+        feature_choices = [(v["label"], k) for k, v in NUMERIC_FEATURES.items()]
+        pdp_feature = gr.Dropdown(
+            choices=feature_choices,
+            label="Select Feature",
+            value="albumin"
+        )
+        pdp_output = gr.HTML(value=render_pdp_html("albumin"))
+        
+        pdp_feature.change(
+            fn=generate_pdp_plot,
+            inputs=[pdp_feature],
+            outputs=[pdp_output]
+        )
+        
+        gr.Markdown("""
+*PDP curves show the average predicted probability when the selected feature is varied across its range. The orange dot marks the default patient value. These plots help clinicians understand which features have the strongest marginal effects on predicted mortality.*
+        """)
+
     with gr.Tab("About"):
         gr.Markdown("""
 ### Model Architecture & Validation
@@ -751,6 +957,12 @@ with gr.Blocks(css=FULL_CSS, title="EVB Prognosis Calculator", js=THEME_JS) as d
 - Prospective validation (n=24): AUC 0.927 (SD +/- 0.053)
 - Superior performance vs. traditional scores (p < 0.001)
 
+### Interpretability Features
+
+- **Global SHAP**: Mean absolute SHAP values across representative patients
+- **Patient-Specific SHAP**: Per-prediction feature contributions (waterfall chart)
+- **Partial Dependence Plots**: Marginal effect of each numeric feature on mortality
+
 ### Limitations
 - Single-center development (external validation ongoing)
 - Small prospective validation cohort (n=24)
@@ -773,7 +985,6 @@ with gr.Blocks(css=FULL_CSS, title="EVB Prognosis Calculator", js=THEME_JS) as d
     with gr.Row():
         predict_btn = gr.Button("CALCULATE RISK ASSESSMENT", variant="primary", scale=2)
 
-    # Results section
     with gr.Row():
         with gr.Column():
             ml_output = gr.HTML(label="ML Model Results")
@@ -783,7 +994,6 @@ with gr.Blocks(css=FULL_CSS, title="EVB Prognosis Calculator", js=THEME_JS) as d
     with gr.Row():
         comparison_output = gr.HTML(label="Model Comparison")
     
-    # SHAP Feature Importance section
     gr.Markdown("---")
     gr.Markdown("### Feature Importance Analysis (SHAP)")
     
@@ -804,12 +1014,12 @@ with gr.Blocks(css=FULL_CSS, title="EVB Prognosis Calculator", js=THEME_JS) as d
 **Citation:** Rech MM, Soldera J, Corso LL et al. Development, Internal and Prospective validation of a machine learning model 
 for the prediction of mortality in cirrhotic patients with acute esophageal variceal bleeding. *World J Hepatol* 2025.
 
-**Contact:** mmrech@ucs.br | **Version:** 4.0 (ONNX + SHAP + Glassmorphism)
+**Contact:** mmrech@ucs.br | **Version:** 5.0 (ONNX + SHAP + PDP + Glassmorphism)
     """)
 
-# ===== Custom routes for HTML pages =====
+# ===== Custom routes for HTML pages + JSON APIs =====
 import fastapi
-from fastapi.responses import HTMLResponse
+from fastapi.responses import HTMLResponse, JSONResponse
 
 app = fastapi.FastAPI()
 
@@ -833,6 +1043,31 @@ async def calculator_page():
             return HTMLResponse(content=f.read())
     return HTMLResponse(content="<h1>File not found</h1>", status_code=404)
 
+# JSON API endpoints for mobile/external consumers
+@app.get("/api/global-shap")
+async def api_global_shap():
+    """Return global SHAP feature importance as JSON."""
+    if GLOBAL_SHAP_DATA is None:
+        return JSONResponse(content={"error": "Global SHAP not available"}, status_code=503)
+    return JSONResponse(content={"features": GLOBAL_SHAP_DATA})
+
+@app.get("/api/pdp/{feature_name}")
+async def api_pdp(feature_name: str):
+    """Return PDP data for a specific numeric feature."""
+    if feature_name not in NUMERIC_FEATURES:
+        return JSONResponse(
+            content={"error": f"Unknown feature: {feature_name}", "available": list(NUMERIC_FEATURES.keys())},
+            status_code=400
+        )
+    data = compute_pdp(feature_name)
+    return JSONResponse(content=data)
+
+@app.get("/api/pdp")
+async def api_pdp_list():
+    """List available features for PDP."""
+    features = [{"name": k, "label": v["label"], "min": v["min"], "max": v["max"]} for k, v in NUMERIC_FEATURES.items()]
+    return JSONResponse(content={"features": features})
+
 # Mount Gradio app under the FastAPI app
 app = gr.mount_gradio_app(app, demo, path="/")
 

evb_prognosis_mobile.html

@@ -484,6 +484,85 @@
       color: var(--accent);
       text-decoration: none;
     }
+
+    /* SHAP Feature Importance */
+    .shap-section {
+      margin: 16px 0;
+      padding: 16px 0;
+      border-top: 1px solid var(--glass-border);
+    }
+    .shap-section h3 {
+      font-size: 0.7rem;
+      color: var(--accent);
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      margin-bottom: 4px;
+    }
+    .shap-subtitle {
+      font-size: 0.6rem;
+      color: var(--text-dim);
+      margin-bottom: 12px;
+    }
+    .shap-bar-row {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin: 3px 0;
+    }
+    .shap-bar-label {
+      width: 90px;
+      text-align: right;
+      font-size: 0.55rem;
+      color: var(--text-dim);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      flex-shrink: 0;
+    }
+    .shap-bar-track {
+      flex: 1;
+      height: 14px;
+      background: rgba(255,255,255,0.04);
+      border-radius: 3px;
+      overflow: hidden;
+      position: relative;
+    }
+    .shap-bar-fill {
+      height: 100%;
+      border-radius: 3px;
+      transition: width 0.5s;
+    }
+    .shap-bar-value {
+      width: 50px;
+      font-size: 0.52rem;
+      font-family: 'JetBrains Mono', monospace;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+    .shap-legend {
+      display: flex;
+      justify-content: center;
+      gap: 12px;
+      font-size: 0.55rem;
+      margin-bottom: 8px;
+    }
+    .shap-summary {
+      margin-top: 10px;
+      padding: 8px;
+      background: rgba(255,255,255,0.03);
+      border-radius: 8px;
+      text-align: center;
+      font-size: 0.6rem;
+      color: var(--text-dim);
+    }
+    .shap-center-line {
+      position: absolute;
+      left: 50%;
+      top: 0;
+      bottom: 0;
+      width: 1px;
+      background: rgba(255,255,255,0.12);
+    }
   </style>
 </head>
 <body>
@@ -667,12 +746,32 @@
       </div>
 
       <button class="btn-export" id="btn-export" onclick="exportResults()">&#128190; Export JSON</button>
+
+      <!-- SHAP Global Feature Importance -->
+      <div class="shap-section" id="shap-global-section" style="display:none;">
+        <h3>Global Feature Importance</h3>
+        <div class="shap-subtitle">Mean |SHAP| across representative patients (prospective-validated model)</div>
+        <div id="shap-global-bars"></div>
+      </div>
+
+      <!-- SHAP Patient-Specific -->
+      <div class="shap-section" id="shap-patient-section" style="display:none;">
+        <h3>This Patient's Feature Contributions</h3>
+        <div class="shap-subtitle" id="shap-patient-subtitle">How each feature shifts risk from the population baseline</div>
+        <div class="shap-legend">
+          <span style="color:var(--danger);">Red = increases risk &rarr;</span>
+          <span style="color:rgba(255,255,255,0.2);">|</span>
+          <span style="color:var(--accent2);">&larr; Green = decreases risk</span>
+        </div>
+        <div id="shap-patient-bars"></div>
+        <div class="shap-summary" id="shap-patient-summary"></div>
+      </div>
     </div>
   </div>
 
   <div class="footer">
     <p><strong>Citation:</strong> Rech MM, Soldera J, Corso LL et al. <em>World J Hepatol</em>. 2025.</p>
-    <p style="margin-top:6px;"><a href="mailto:mmrech@ucs.br">mmrech@ucs.br</a> | v3.0 Mobile</p>
+    <p style="margin-top:6px;"><a href="mailto:mmrech@ucs.br">mmrech@ucs.br</a> | v5.0 Mobile (SHAP)</p>
   </div>
 
   <script>
@@ -756,22 +855,75 @@
       throw new Error('No data from API');
     }
 
+    // SHAP rendering functions
+    function renderGlobalShapBars(htmlContent) {
+      const container = $('shap-global-bars');
+      if (!htmlContent || htmlContent.includes('not available')) {
+        $('shap-global-section').style.display = 'none';
+        return;
+      }
+      // The API returns pre-rendered HTML from the Gradio backend
+      container.innerHTML = htmlContent;
+      $('shap-global-section').style.display = 'block';
+    }
+
+    function renderPatientShapBars(htmlContent) {
+      const container = $('shap-patient-bars');
+      if (!htmlContent || htmlContent.includes('not available')) {
+        $('shap-patient-section').style.display = 'none';
+        return;
+      }
+      // The API returns pre-rendered HTML from the Gradio backend
+      container.innerHTML = htmlContent;
+      $('shap-patient-section').style.display = 'block';
+    }
+
     function parseMLOutput(md) {
       const r = { probability: null, ciLower: null, ciUpper: null, prediction: null, riskCategory: null };
-      const pm = md.match(/Mortality Probability:\*\*\s*([\d.]+)%\s*\(95% CI:\s*([\d.]+)%\s*-\s*([\d.]+)%\)/);
-      if (pm) { r.probability = parseFloat(pm[1])/100; r.ciLower = parseFloat(pm[2])/100; r.ciUpper = parseFloat(pm[3])/100; }
+      // Try HTML format first (v5 returns styled HTML)
+      const htmlPct = md.match(/>([\d.]+)%<\/div>\s*<div[^>]*>1-Year Mortality/);
+      if (htmlPct) {
+        r.probability = parseFloat(htmlPct[1]) / 100;
+      }
+      // Try markdown format as fallback
+      if (r.probability === null) {
+        const pm = md.match(/Mortality Probability:\*\*\s*([\d.]+)%\s*\(95% CI:\s*([\d.]+)%\s*-\s*([\d.]+)%\)/);
+        if (pm) { r.probability = parseFloat(pm[1])/100; r.ciLower = parseFloat(pm[2])/100; r.ciUpper = parseFloat(pm[3])/100; }
+      }
+      // Parse CI from HTML format
+      const ciMatch = md.match(/95% CI:\s*([\d.]+)%\s*-\s*([\d.]+)%/);
+      if (ciMatch) { r.ciLower = parseFloat(ciMatch[1])/100; r.ciUpper = parseFloat(ciMatch[2])/100; }
       r.prediction = md.includes('Death within 1 year') ? 'Death within 1 year' : 'Survival beyond 1 year';
-      const rm = md.match(/(Low Risk|Moderate Risk|High Risk)/);
-      if (rm) r.riskCategory = rm[1];
+      // Try both HTML and markdown risk category formats
+      const rm = md.match(/(LOW RISK|MODERATE RISK|HIGH RISK|Low Risk|Moderate Risk|High Risk)/i);
+      if (rm) {
+        const cat = rm[1].toLowerCase();
+        if (cat.includes('low')) r.riskCategory = 'Low Risk';
+        else if (cat.includes('moderate')) r.riskCategory = 'Moderate Risk';
+        else r.riskCategory = 'High Risk';
+      }
       return r;
     }
 
     function parseTraditionalScores(md) {
       const r = { meld: null, meldNa: null, childPugh: null, cpClass: null };
+      // Try markdown format
       const m1 = md.match(/MELD Score:\*\*\s*(\d+)/); if (m1) r.meld = parseInt(m1[1]);
       const m2 = md.match(/MELD-Na Score:\*\*\s*(\d+)/); if (m2) r.meldNa = parseInt(m2[1]);
       const m3 = md.match(/Child-Pugh Score:\*\*\s*(\d+)\s*\(Class\s*([ABC])\)/);
       if (m3) { r.childPugh = parseInt(m3[1]); r.cpClass = m3[2]; }
+      // Try HTML format (v5 returns styled HTML cards)
+      if (r.meld === null) {
+        // Look for pattern: >NUMBER</div>...MELD Score
+        const hm1 = md.match(/>\s*(\d+)\s*<\/div>[^<]*<div[^>]*>MELD Score/); if (hm1) r.meld = parseInt(hm1[1]);
+      }
+      if (r.meldNa === null) {
+        const hm2 = md.match(/>\s*(\d+)\s*<\/div>[^<]*<div[^>]*>MELD-Na Score/); if (hm2) r.meldNa = parseInt(hm2[1]);
+      }
+      if (r.childPugh === null) {
+        const hm3 = md.match(/>\s*(\d+)\s*<\/div>[^<]*<div[^>]*>Child-Pugh \(Class ([ABC])\)/);
+        if (hm3) { r.childPugh = parseInt(hm3[1]); r.cpClass = hm3[2]; }
+      }
       return r;
     }
 
@@ -786,7 +938,12 @@
       $('results-section').scrollIntoView({ behavior: 'smooth', block: 'start' });
 
       try {
-        const [mlOut, tradOut] = await callGradioAPI();
+        const apiResult = await callGradioAPI();
+        // API returns 5 outputs: [ml_html, traditional_html, comparison_html, global_shap_html, patient_shap_html]
+        const mlOut = apiResult[0];
+        const tradOut = apiResult[1];
+        const globalShapHtml = apiResult.length > 3 ? apiResult[3] : null;
+        const patientShapHtml = apiResult.length > 4 ? apiResult[4] : null;
         const ml = parseMLOutput(mlOut);
         const trad = parseTraditionalScores(tradOut);
 
@@ -843,6 +1000,10 @@
 
         $('comparison-section').style.display = 'block';
 
+        // Render SHAP visualizations
+        if (globalShapHtml) renderGlobalShapBars(globalShapHtml);
+        if (patientShapHtml) renderPatientShapBars(patientShapHtml);
+
       } catch (err) {
         console.error(err);
         errBanner.textContent = 'API Error: ' + err.message + '. Showing local scores only.';