v3.0: Expanded HTML frontend with all 34 ML inputs + Gradio API integration

evb_prognosis_complete.html

@@ -31,7 +31,7 @@
       min-height: 100vh;
       display: flex;
       justify-content: center;
-      align-items: center;
+      align-items: flex-start;
       overflow-x: hidden;
       padding: 40px 20px;
     }
@@ -73,7 +73,7 @@
 
     .calculator-card {
       width: 100%;
-      max-width: 1300px;
+      max-width: 1400px;
       background: var(--glass-bg);
       backdrop-filter: blur(25px) saturate(180%);
       -webkit-backdrop-filter: blur(25px) saturate(180%);
@@ -86,7 +86,12 @@
 
     .main-grid {
       display: grid;
-      grid-template-columns: 1fr 400px;
+      grid-template-columns: 1fr 420px;
+    }
+
+    @media (max-width: 900px) {
+      .main-grid { grid-template-columns: 1fr; }
+      .input-region { border-right: none; border-bottom: 1px solid var(--glass-border); }
     }
 
     .input-region {
@@ -103,9 +108,9 @@
       -webkit-text-fill-color: transparent;
       margin-bottom: 8px;
     }
-    header p { 
-      color: var(--text-dim); 
-      font-size: 0.9rem; 
+    header p {
+      color: var(--text-dim);
+      font-size: 0.9rem;
       max-width: 620px;
       line-height: 1.5;
     }
@@ -140,9 +145,9 @@
     }
 
     .input-group { display: flex; flex-direction: column; gap: 8px; }
-    label { 
-      font-size: 0.8rem; 
-      color: var(--text-dim); 
+    label {
+      font-size: 0.8rem;
+      color: var(--text-dim);
       font-weight: 600;
       display: flex;
       align-items: center;
@@ -232,7 +237,11 @@
       background: rgba(0, 0, 0, 0.2);
       display: flex;
       flex-direction: column;
-      gap: 32px;
+      gap: 24px;
+      position: sticky;
+      top: 0;
+      max-height: 100vh;
+      overflow-y: auto;
     }
 
     .score-ring {
@@ -244,11 +253,11 @@
       place-items: center;
       background:
         radial-gradient(circle at center, rgba(0,0,0,0.55) 58%, transparent 60%),
-        conic-gradient(var(--accent-primary) var(--p, 0%), rgba(255,255,255,0.08) 0);
+        conic-gradient(var(--ring-color, var(--accent-primary)) var(--p, 0%), rgba(255,255,255,0.08) 0);
       border: 1px solid var(--glass-border);
       box-shadow: 0 18px 40px rgba(0,0,0,0.35);
       position: relative;
-      transition: all 0.5s ease;
+      transition: all 0.6s ease;
     }
 
     .score-core {
@@ -279,6 +288,11 @@
       text-align: center;
       padding: 0 10px;
     }
+    .score-core .sub-label {
+      font-size: 0.6rem;
+      color: var(--accent-primary);
+      margin-top: 2px;
+    }
 
     .status-badge {
       padding: 6px 16px;
@@ -294,38 +308,71 @@
       box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
       transition: all 0.3s ease;
     }
-    .status-low { 
-      background: var(--success); 
+    .status-low {
+      background: var(--success);
       color: #000;
       box-shadow: 0 0 20px rgba(0, 242, 254, 0.4);
     }
-    .status-mid { 
-      background: var(--warning); 
+    .status-mid {
+      background: var(--warning);
       color: #000;
       box-shadow: 0 0 20px rgba(249, 212, 35, 0.4);
     }
-    .status-high { 
-      background: var(--danger); 
+    .status-high {
+      background: var(--danger);
       color: #fff;
       box-shadow: 0 0 20px rgba(255, 75, 43, 0.4);
     }
 
-    .metrics-list { display: flex; flex-direction: column; gap: 16px; }
+    .ci-bar {
+      width: 100%;
+      height: 8px;
+      background: rgba(255,255,255,0.08);
+      border-radius: 4px;
+      position: relative;
+      margin: 4px 0;
+    }
+    .ci-bar-fill {
+      position: absolute;
+      height: 100%;
+      border-radius: 4px;
+      background: linear-gradient(90deg, var(--success), var(--warning), var(--danger));
+      opacity: 0.6;
+      transition: all 0.5s ease;
+    }
+    .ci-bar-marker {
+      position: absolute;
+      width: 3px;
+      height: 14px;
+      top: -3px;
+      background: #fff;
+      border-radius: 2px;
+      transition: all 0.5s ease;
+    }
+    .ci-text {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.65rem;
+      color: var(--text-dim);
+      font-family: 'JetBrains Mono', monospace;
+    }
+
+    .metrics-list { display: flex; flex-direction: column; gap: 14px; }
     .metric-item {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
-      padding-bottom: 12px;
+      padding-bottom: 10px;
       border-bottom: 1px solid var(--glass-border);
     }
-    .metric-item .m-label { font-size: 0.85rem; color: var(--text-dim); }
+    .metric-item .m-label { font-size: 0.82rem; color: var(--text-dim); }
     .metric-item .m-value {
       font-family: 'JetBrains Mono', monospace;
-      font-size: 1.2rem;
+      font-size: 1.15rem;
       color: #fff;
     }
     .metric-item .m-sub {
-      font-size: 0.65rem;
+      font-size: 0.62rem;
       color: var(--accent-primary);
       text-align: right;
       display: block;
@@ -345,73 +392,119 @@
     }
 
     .btn-calculate {
-      background: #fff;
+      background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
       color: #000;
+      font-size: 0.95rem;
     }
 
     .btn-calculate:hover {
       transform: translateY(-2px);
-      box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2);
+      box-shadow: 0 10px 25px rgba(0, 210, 255, 0.3);
+    }
+
+    .btn-calculate:disabled {
+      opacity: 0.5;
+      cursor: wait;
+      transform: none;
     }
 
     .btn-export {
       background: transparent;
       border: 1px solid var(--glass-border);
-      color: var(--text-main);
-      padding: 12px;
-      font-size: 0.85rem;
+      color: var(--text-dim);
+      font-size: 0.8rem;
     }
 
     .btn-export:hover {
-      background: rgba(255, 255, 255, 0.05);
       border-color: var(--accent-primary);
+      color: var(--accent-primary);
     }
 
     .references-section {
-      grid-column: 1/-1;
       padding: 32px 48px;
       border-top: 1px solid var(--glass-border);
-      font-size: 0.8rem;
-      color: var(--text-dim);
-      background: rgba(0, 0, 0, 0.2);
+      background: rgba(0,0,0,0.15);
     }
-
     .references-section h3 {
+      font-size: 0.85rem;
       color: var(--accent-primary);
       margin-bottom: 16px;
-      font-size: 0.9rem;
-      text-transform: uppercase;
-      letter-spacing: 1px;
     }
-
     .references-section ol {
-      line-height: 1.8;
       padding-left: 20px;
+      font-size: 0.72rem;
+      color: var(--text-dim);
+      line-height: 1.8;
     }
 
-    .references-section em {
-      color: var(--text-main);
-      font-style: italic;
+    .fade-in {
+      animation: fadeIn 0.4s ease-out;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
     }
 
-    .fade-in { animation: fadeIn 0.65s ease forwards; }
-    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    .model-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      background: rgba(0, 210, 255, 0.1);
+      border: 1px solid rgba(0, 210, 255, 0.3);
+      border-radius: 20px;
+      padding: 4px 12px;
+      font-size: 0.7rem;
+      color: var(--accent-primary);
+      margin-top: 8px;
+    }
+    .model-badge .dot {
+      width: 6px; height: 6px;
+      border-radius: 50%;
+      background: var(--accent-primary);
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.3; }
+    }
 
-    @media (max-width: 1100px) {
-      .main-grid { grid-template-columns: 1fr; }
-      .input-region { border-right: none; border-bottom: 1px solid var(--glass-border); }
-      .grid-layout { grid-template-columns: 1fr; }
+    .error-banner {
+      background: rgba(239, 68, 68, 0.15);
+      border: 1px solid rgba(239, 68, 68, 0.4);
+      border-radius: 8px;
+      padding: 12px 16px;
+      font-size: 0.8rem;
+      color: #ff8a8a;
+      display: none;
     }
 
-    @media (max-width: 768px) {
-      body { padding: 20px 10px; }
-      .input-region, .result-region, .references-section { padding: 24px; }
-      header h1 { font-size: 2rem; }
-      .val-display { min-width: 60px; font-size: 1rem; }
+    .comparison-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 0.72rem;
+      margin-top: 8px;
+    }
+    .comparison-table th, .comparison-table td {
+      padding: 6px 8px;
+      text-align: left;
+      border-bottom: 1px solid var(--glass-border);
+    }
+    .comparison-table th {
+      color: var(--accent-primary);
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      font-size: 0.65rem;
+    }
+    .comparison-table td {
+      color: var(--text-dim);
+    }
+    .comparison-table td:last-child {
+      font-family: 'JetBrains Mono', monospace;
+      color: #fff;
     }
   </style>
 </head>
-
 <body>
   <div class="vapor-field">
     <div class="vapor-cloud c1"></div>
@@ -421,20 +514,24 @@
 
   <main class="calculator-card">
     <div class="disclaimer-banner">
-      <strong>⚠️ FOR EDUCATIONAL AND RESEARCH PURPOSES ONLY</strong>
-      This calculator is not validated for clinical decision-making without physician supervision. Not a substitute for clinical judgment. Always consult appropriate medical expertise.
+      <strong>RESEARCH USE ONLY &mdash; NOT FOR CLINICAL DECISION-MAKING</strong>
+      This tool is for educational and research purposes. Predictions are generated by a Random Forest machine learning model (AUC 0.915). It has not been approved by any regulatory agency. Always rely on clinical judgment.
     </div>
 
     <div class="main-grid">
       <section class="input-region">
         <header>
           <h1>EVB Prognosis Calculator</h1>
-          <p>Clinical risk calculator for acute esophageal variceal bleeding using validated prognostic scores (MELD, MELD-Na, Child-Pugh, ALBI) with weighted heuristic model. <strong style="color: var(--warning);">Not a machine learning model.</strong> Estimates based on published mortality data.</p>
+          <p>Machine learning-based risk calculator for acute esophageal variceal bleeding. Uses a calibrated Random Forest model trained on clinical data with 34 features.</p>
+          <div class="model-badge">
+            <span class="dot"></span>
+            ML Model &mdash; Random Forest (AUC 0.915)
+          </div>
         </header>
 
         <!-- Preset Scenarios -->
         <div class="section-tab">
-          <h2 class="section-title">Quick Start - Clinical Scenarios</h2>
+          <h2 class="section-title">Quick Start &mdash; Clinical Scenarios</h2>
           <div class="grid-layout">
             <div class="input-group preset-row">
               <label>Load Example Case</label>
@@ -449,17 +546,17 @@
           </div>
         </div>
 
+        <!-- Section 1: Demographics -->
         <div class="section-tab">
-          <h2 class="section-title">1. Demographics & Clinical Status</h2>
+          <h2 class="section-title">1. Demographics &amp; History</h2>
           <div class="grid-layout">
             <div class="input-group">
               <label for="age">Patient Age</label>
               <div class="slider-wrap">
-                <input type="range" id="age" min="18" max="100" value="52" />
-                <span class="val-display" id="age-val">52</span>
+                <input type="range" id="age" min="18" max="100" value="50" />
+                <span class="val-display" id="age-val">50</span>
               </div>
             </div>
-
             <div class="input-group">
               <label for="sex">Sex</label>
               <select id="sex">
@@ -467,162 +564,361 @@
                 <option value="female">Female</option>
               </select>
             </div>
-
             <div class="input-group">
-              <label for="etiology">Etiology
-                <span class="info-icon" data-tip="Primary cause of cirrhosis. Alcohol and HCV are most common in variceal bleeding.">ⓘ</span>
+              <label for="race">Race*
+                <span class="info-icon" data-tip="Included as a model feature per original training data. May reflect social determinants of health rather than biological differences.">&#9432;</span>
               </label>
-              <select id="etiology">
+              <select id="race">
+                <option value="white">White</option>
+                <option value="black">Black</option>
+                <option value="asian">Asian</option>
+                <option value="other">Other</option>
+              </select>
+            </div>
+            <div class="input-group">
+              <label for="etiology_cirrosis">Etiology of Cirrhosis
+                <span class="info-icon" data-tip="Primary cause of cirrhosis. Alcohol and HCV are most common in variceal bleeding.">&#9432;</span>
+              </label>
+              <select id="etiology_cirrosis">
                 <option value="alcohol">Alcohol</option>
                 <option value="hcv">HCV</option>
-                <option value="hbv">HBV</option>
-                <option value="nash">NASH</option>
+                <option value="alcohol+hcv">Alcohol + HCV</option>
                 <option value="other">Other</option>
               </select>
             </div>
+          </div>
+        </div>
 
+        <!-- Section 2: Clinical Status -->
+        <div class="section-tab">
+          <h2 class="section-title">2. Clinical Status</h2>
+          <div class="grid-layout">
+            <div class="input-group">
+              <label for="ascitis">Ascites
+                <span class="info-icon" data-tip="Fluid accumulation in abdomen. Marker of portal hypertension and hepatic decompensation.">&#9432;</span>
+              </label>
+              <select id="ascitis">
+                <option value="no">No</option>
+                <option value="yes" selected>Yes</option>
+              </select>
+            </div>
             <div class="input-group">
-              <label for="ascites">Ascites
-                <span class="info-icon" data-tip="Fluid accumulation in abdomen. Marker of portal hypertension and hepatic decompensation.">ⓘ</span>
+              <label for="hepatorenal_syndrome">Hepatorenal Syndrome
+                <span class="info-icon" data-tip="Renal failure in the setting of advanced liver disease without other identifiable cause.">&#9432;</span>
               </label>
-              <select id="ascites">
-                <option value="none">None</option>
-                <option value="mild">Mild–Moderate</option>
-                <option value="severe">Moderate–Severe</option>
+              <select id="hepatorenal_syndrome">
+                <option value="no" selected>No</option>
+                <option value="yes">Yes</option>
               </select>
             </div>
+            <div class="input-group">
+              <label for="hepatocellular_carcinoma">Hepatocellular Carcinoma
+                <span class="info-icon" data-tip="Primary liver cancer, common in cirrhotic patients. Worsens prognosis.">&#9432;</span>
+              </label>
+              <select id="hepatocellular_carcinoma">
+                <option value="no" selected>No</option>
+                <option value="yes">Yes</option>
+              </select>
+            </div>
+            <div class="input-group">
+              <label for="portal_vein_thrombosis">Portal Vein Thrombosis
+                <span class="info-icon" data-tip="Blood clot in the portal vein. Increases portal hypertension and bleeding risk.">&#9432;</span>
+              </label>
+              <select id="portal_vein_thrombosis">
+                <option value="no" selected>No</option>
+                <option value="yes">Yes</option>
+              </select>
+            </div>
+            <div class="input-group">
+              <label for="dialisis">Dialysis
+                <span class="info-icon" data-tip="Dialysis &ge;2x in past week. Indicates severe renal impairment.">&#9432;</span>
+              </label>
+              <select id="dialisis">
+                <option value="no" selected>No</option>
+                <option value="yes">Yes</option>
+              </select>
+            </div>
+          </div>
+        </div>
 
+        <!-- Section 3: Medications -->
+        <div class="section-tab">
+          <h2 class="section-title">3. Current Medications</h2>
+          <div class="grid-layout">
             <div class="input-group">
-              <label for="enc">Encephalopathy
-                <span class="info-icon" data-tip="Hepatic encephalopathy grades: I-II = altered sleep, mild confusion. III-IV = somnolent to coma.">ⓘ</span>
+              <label for="omeprazole">Omeprazole (PPI)
+                <span class="info-icon" data-tip="Proton pump inhibitor. Used for gastric acid suppression.">&#9432;</span>
               </label>
-              <select id="enc">
-                <option value="none">None</option>
-                <option value="mild">Grade I–II</option>
-                <option value="severe">Grade III–IV</option>
+              <select id="omeprazole">
+                <option value="no" selected>No</option>
+                <option value="yes">Yes</option>
+              </select>
+            </div>
+            <div class="input-group">
+              <label for="spironolactone">Spironolactone
+                <span class="info-icon" data-tip="Aldosterone antagonist diuretic. Used for ascites management.">&#9432;</span>
+              </label>
+              <select id="spironolactone">
+                <option value="no">No</option>
+                <option value="yes" selected>Yes</option>
+              </select>
+            </div>
+            <div class="input-group">
+              <label for="furosemide">Furosemide
+                <span class="info-icon" data-tip="Loop diuretic. Used in combination with spironolactone for ascites.">&#9432;</span>
+              </label>
+              <select id="furosemide">
+                <option value="no">No</option>
+                <option value="yes" selected>Yes</option>
+              </select>
+            </div>
+            <div class="input-group">
+              <label for="propanolol">Propranolol
+                <span class="info-icon" data-tip="Non-selective beta-blocker. Used for portal hypertension prophylaxis.">&#9432;</span>
+              </label>
+              <select id="propanolol">
+                <option value="no" selected>No</option>
+                <option value="yes">Yes</option>
               </select>
             </div>
           </div>
         </div>
 
+        <!-- Section 4: Laboratory Profile -->
         <div class="section-tab">
-          <h2 class="section-title">2. Laboratory Profile</h2>
+          <h2 class="section-title">4. Laboratory Profile</h2>
           <div class="grid-layout">
             <div class="input-group">
-              <label for="bilirubin">Total Bilirubin (mg/dL)
-                <span class="info-icon" data-tip="Reflects hepatic synthetic dysfunction and cholestasis. Normal: 0.1-1.2 mg/dL. Major MELD component.">ⓘ</span>
+              <label for="albumin">Albumin (g/dL)
+                <span class="info-icon" data-tip="Reflects hepatic synthetic function. Normal: 3.5-5.5 g/dL. Child-Pugh component.">&#9432;</span>
               </label>
               <div class="slider-wrap">
-                <input type="range" id="bilirubin" min="0.1" max="30" step="0.1" value="2.1" />
-                <span class="val-display" id="bilirubin-val">2.1</span>
+                <input type="range" id="albumin" min="1" max="5" step="0.1" value="3.5" />
+                <span class="val-display" id="albumin-val">3.5</span>
+              </div>
+            </div>
+            <div class="input-group">
+              <label for="total_bilirrubin">Total Bilirubin (mg/dL)
+                <span class="info-icon" data-tip="Reflects hepatic dysfunction and cholestasis. Normal: 0.1-1.2 mg/dL. Major MELD component.">&#9432;</span>
+              </label>
+              <div class="slider-wrap">
+                <input type="range" id="total_bilirrubin" min="0.1" max="30" step="0.1" value="2.0" />
+                <span class="val-display" id="total_bilirrubin-val">2.0</span>
+              </div>
+            </div>
+            <div class="input-group">
+              <label for="direct_bilirrubina">Direct Bilirubin (mg/dL)
+                <span class="info-icon" data-tip="Conjugated bilirubin. Elevated in cholestatic conditions. Normal: 0.0-0.3 mg/dL.">&#9432;</span>
+              </label>
+              <div class="slider-wrap">
+                <input type="range" id="direct_bilirrubina" min="0.1" max="10" step="0.1" value="0.5" />
+                <span class="val-display" id="direct_bilirrubina-val">0.5</span>
               </div>
             </div>
-
             <div class="input-group">
               <label for="inr">INR
-                <span class="info-icon" data-tip="International Normalized Ratio. Measures coagulation status. Normal: 0.8-1.2. Major MELD component.">ⓘ</span>
+                <span class="info-icon" data-tip="International Normalized Ratio. Measures coagulation. Normal: 0.8-1.2. Major MELD component.">&#9432;</span>
               </label>
               <div class="slider-wrap">
-                <input type="range" id="inr" min="0.5" max="6" step="0.1" value="1.3" />
-                <span class="val-display" id="inr-val">1.3</span>
+                <input type="range" id="inr" min="0.5" max="5" step="0.1" value="1.2" />
+                <span class="val-display" id="inr-val">1.2</span>
               </div>
             </div>
-
             <div class="input-group">
               <label for="creatinine">Creatinine (mg/dL)
-                <span class="info-icon" data-tip="Serum creatinine reflects renal function. Normal: 0.6-1.2 mg/dL. Major MELD component.">ⓘ</span>
+                <span class="info-icon" data-tip="Serum creatinine reflects renal function. Normal: 0.6-1.2 mg/dL. Major MELD component.">&#9432;</span>
               </label>
               <div class="slider-wrap">
                 <input type="range" id="creatinine" min="0.1" max="10" step="0.1" value="1.0" />
                 <span class="val-display" id="creatinine-val">1.0</span>
               </div>
             </div>
-
             <div class="input-group">
-              <label for="albumin">Albumin (g/dL)
-                <span class="info-icon" data-tip="Serum albumin reflects hepatic synthetic function. Normal: 3.5-5.5 g/dL. Child-Pugh component.">ⓘ</span>
+              <label for="sodium">Sodium (mEq/L)
+                <span class="info-icon" data-tip="Serum sodium. Hyponatremia indicates poor prognosis. Normal: 135-145 mEq/L.">&#9432;</span>
               </label>
               <div class="slider-wrap">
-                <input type="range" id="albumin" min="1" max="5" step="0.1" value="3.4" />
-                <span class="val-display" id="albumin-val">3.4</span>
+                <input type="range" id="sodium" min="120" max="160" step="1" value="140" />
+                <span class="val-display" id="sodium-val">140</span>
               </div>
             </div>
-
             <div class="input-group">
-              <label for="sodium">Sodium (mEq/L)
-                <span class="info-icon" data-tip="Serum sodium. Hyponatremia indicates dilutional state and poor prognosis. Normal: 135-145 mEq/L.">ⓘ</span>
+              <label for="potassium">Potassium (mEq/L)
+                <span class="info-icon" data-tip="Serum potassium. Normal: 3.5-5.0 mEq/L. Abnormalities common in liver disease.">&#9432;</span>
               </label>
               <div class="slider-wrap">
-                <input type="range" id="sodium" min="120" max="150" step="1" value="138" />
-                <span class="val-display" id="sodium-val">138</span>
+                <input type="range" id="potassium" min="2" max="6" step="0.1" value="4.0" />
+                <span class="val-display" id="potassium-val">4.0</span>
               </div>
             </div>
-
             <div class="input-group">
-              <label for="dialysis">Dialysis Status
-                <span class="info-icon" data-tip="Dialysis ≥2x in past week sets creatinine to 4.0 per UNOS MELD guidelines.">ⓘ</span>
+              <label for="platelets">Platelets (&times;10&sup3;/&mu;L)
+                <span class="info-icon" data-tip="Platelet count. Low platelets suggest portal hypertension/hypersplenism. Normal: 150-400.">&#9432;</span>
               </label>
-              <select id="dialysis">
-                <option value="no">No</option>
-                <option value="yes">Yes (≥2x/week)</option>
-              </select>
+              <div class="slider-wrap">
+                <input type="range" id="platelets" min="10" max="500" step="1" value="150" />
+                <span class="val-display" id="platelets-val">150</span>
+              </div>
+            </div>
+            <div class="input-group">
+              <label for="hemoglobin">Hemoglobin (g/dL)
+                <span class="info-icon" data-tip="Blood hemoglobin. Low values indicate anemia/bleeding. Normal: 12-17 g/dL.">&#9432;</span>
+              </label>
+              <div class="slider-wrap">
+                <input type="range" id="hemoglobin" min="5" max="20" step="0.1" value="13" />
+                <span class="val-display" id="hemoglobin-val">13.0</span>
+              </div>
+            </div>
+            <div class="input-group">
+              <label for="hematocrit">Hematocrit (%)
+                <span class="info-icon" data-tip="Percentage of blood volume occupied by red blood cells. Normal: 36-48%.">&#9432;</span>
+              </label>
+              <div class="slider-wrap">
+                <input type="range" id="hematocrit" min="15" max="60" step="1" value="40" />
+                <span class="val-display" id="hematocrit-val">40</span>
+              </div>
+            </div>
+            <div class="input-group">
+              <label for="leucocytes">Leukocytes (&times;10&sup3;/&mu;L)
+                <span class="info-icon" data-tip="White blood cell count. Elevated in infection/inflammation. Normal: 4-11.">&#9432;</span>
+              </label>
+              <div class="slider-wrap">
+                <input type="range" id="leucocytes" min="1" max="50" step="0.1" value="6.0" />
+                <span class="val-display" id="leucocytes-val">6.0</span>
+              </div>
+            </div>
+            <div class="input-group">
+              <label for="ast">AST (U/L)
+                <span class="info-icon" data-tip="Aspartate aminotransferase. Liver enzyme. Normal: 10-40 U/L.">&#9432;</span>
+              </label>
+              <div class="slider-wrap">
+                <input type="range" id="ast" min="10" max="500" step="1" value="35" />
+                <span class="val-display" id="ast-val">35</span>
+              </div>
+            </div>
+            <div class="input-group">
+              <label for="alt">ALT (U/L)
+                <span class="info-icon" data-tip="Alanine aminotransferase. Liver enzyme. Normal: 7-56 U/L.">&#9432;</span>
+              </label>
+              <div class="slider-wrap">
+                <input type="range" id="alt" min="10" max="500" step="1" value="25" />
+                <span class="val-display" id="alt-val">25</span>
+              </div>
             </div>
           </div>
         </div>
 
+        <!-- Section 5: Endoscopic Findings & Bleeding -->
         <div class="section-tab">
-          <h2 class="section-title">3. Bleeding Episode Details</h2>
+          <h2 class="section-title">5. Endoscopic Findings &amp; Bleeding Episode</h2>
           <div class="grid-layout">
             <div class="input-group">
-              <label for="bleeding">Active Bleeding at Endoscopy
-                <span class="info-icon" data-tip="Active bleeding or spurting at time of endoscopy indicates higher risk.">ⓘ</span>
+              <label for="varices">Varices Present
+                <span class="info-icon" data-tip="Presence of esophageal or gastric varices on endoscopy.">&#9432;</span>
               </label>
-              <select id="bleeding">
+              <select id="varices">
                 <option value="no">No</option>
+                <option value="yes" selected>Yes</option>
+              </select>
+            </div>
+            <div class="input-group">
+              <label for="red_wale_marks">Red Wale Marks
+                <span class="info-icon" data-tip="Longitudinal red streaks on varices. Indicate high risk of rupture.">&#9432;</span>
+              </label>
+              <select id="red_wale_marks">
+                <option value="no" selected>No</option>
                 <option value="yes">Yes</option>
               </select>
             </div>
-
             <div class="input-group">
-              <label for="terlipressin">Terlipressin Dose (mg)
-                <span class="info-icon" data-tip="Vasoactive drug for variceal bleeding. Typical dose 1-2mg q4-6h initially.">ⓘ</span>
+              <label for="rupture_point">Rupture Point Visible
+                <span class="info-icon" data-tip="Visible point of variceal rupture on endoscopy.">&#9432;</span>
               </label>
-              <input type="number" id="terlipressin" value="2" min="0" max="20" step="0.5" />
+              <select id="rupture_point">
+                <option value="no" selected>No</option>
+                <option value="yes">Yes</option>
+              </select>
             </div>
-
             <div class="input-group">
-              <label for="endo_time">Time to Endoscopy (hours)
-                <span class="info-icon" data-tip="Time from presentation to therapeutic endoscopy. Guidelines recommend <12 hours.">ⓘ</span>
+              <label for="active_bleeding">Active Bleeding
+                <span class="info-icon" data-tip="Active bleeding or spurting at time of endoscopy.">&#9432;</span>
               </label>
-              <input type="number" id="endo_time" value="12" min="0" max="48" step="1" />
+              <select id="active_bleeding">
+                <option value="no" selected>No</option>
+                <option value="yes">Yes</option>
+              </select>
             </div>
-
             <div class="input-group">
-              <label for="sbp">Spontaneous Bacterial Peritonitis
-                <span class="info-icon" data-tip="SBP significantly increases mortality in cirrhotic patients.">ⓘ</span>
+              <label for="rebleeding">Rebleeding
+                <span class="info-icon" data-tip="Recurrence of bleeding after initial hemostasis.">&#9432;</span>
               </label>
-              <select id="sbp">
-                <option value="no">No</option>
+              <select id="rebleeding">
+                <option value="no" selected>No</option>
                 <option value="yes">Yes</option>
               </select>
             </div>
+            <div class="input-group">
+              <label for="therapy">Endoscopic Therapy
+                <span class="info-icon" data-tip="Type of endoscopic treatment performed for variceal bleeding.">&#9432;</span>
+              </label>
+              <select id="therapy">
+                <option value="Banding" selected>Banding</option>
+                <option value="Sclerotherapy">Sclerotherapy</option>
+                <option value="No therapy">No therapy</option>
+              </select>
+            </div>
+            <div class="input-group">
+              <label for="terlipressin_dose">Terlipressin Dose (mg)
+                <span class="info-icon" data-tip="Vasoactive drug for variceal bleeding. Typical dose 1-2mg q4-6h initially.">&#9432;</span>
+              </label>
+              <div class="slider-wrap">
+                <input type="range" id="terlipressin_dose" min="0" max="20" step="0.5" value="2" />
+                <span class="val-display" id="terlipressin_dose-val">2.0</span>
+              </div>
+            </div>
+            <div class="input-group">
+              <label for="time_to_endoscophy_hours">Time to Endoscopy (hours)
+                <span class="info-icon" data-tip="Time from presentation to therapeutic endoscopy. Guidelines recommend &lt;12 hours.">&#9432;</span>
+              </label>
+              <div class="slider-wrap">
+                <input type="range" id="time_to_endoscophy_hours" min="0" max="48" step="1" value="12" />
+                <span class="val-display" id="time_to_endoscophy_hours-val">12</span>
+              </div>
+            </div>
           </div>
         </div>
       </section>
 
+      <!-- ============= RESULTS PANEL ============= -->
       <section class="result-region">
-        <button class="btn-calculate" id="btn-run">🔮 Calculate Risk</button>
+        <button class="btn-calculate" id="btn-run">&#128302; Calculate Risk (ML Model)</button>
+
+        <div id="error-banner" class="error-banner"></div>
 
         <div id="results-content">
           <div class="score-ring" id="score-ring" style="--p:0%">
             <div class="score-core">
               <span class="pct" id="mortality-pct">--</span>
               <span class="label">1-Year Mortality</span>
+              <span class="sub-label" id="prediction-label"></span>
             </div>
           </div>
 
           <div id="risk-badge" class="status-badge">Awaiting Input</div>
 
+          <!-- Confidence Interval -->
+          <div id="ci-section" style="display:none;">
+            <div style="font-size:0.72rem; color:var(--text-dim); margin-bottom:4px;">95% Confidence Interval</div>
+            <div class="ci-bar">
+              <div class="ci-bar-fill" id="ci-fill"></div>
+              <div class="ci-bar-marker" id="ci-marker"></div>
+            </div>
+            <div class="ci-text">
+              <span id="ci-lower">--</span>
+              <span id="ci-upper">--</span>
+            </div>
+          </div>
+
           <div class="metrics-list">
             <div class="metric-item">
               <span class="m-label">MELD Score</span>
@@ -631,7 +927,6 @@
                 <span class="m-sub" id="meld-mort">3-mo mortality: --</span>
               </div>
             </div>
-
             <div class="metric-item">
               <span class="m-label">MELD-Na</span>
               <div>
@@ -639,7 +934,6 @@
                 <span class="m-sub">Sodium adjusted</span>
               </div>
             </div>
-
             <div class="metric-item">
               <span class="m-label">Child-Pugh</span>
               <div>
@@ -647,7 +941,6 @@
                 <span class="m-sub" id="cp-class">Class --</span>
               </div>
             </div>
-
             <div class="metric-item">
               <span class="m-label">ALBI Score</span>
               <div>
@@ -656,286 +949,391 @@
               </div>
             </div>
           </div>
+
+          <!-- Model Comparison -->
+          <div id="comparison-section" style="display:none;">
+            <div style="font-size:0.72rem; color:var(--accent-primary); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px;">Model Performance</div>
+            <table class="comparison-table">
+              <thead>
+                <tr><th>Model</th><th>AUC</th></tr>
+              </thead>
+              <tbody>
+                <tr><td>Random Forest (this model)</td><td>0.915</td></tr>
+                <tr><td>MELD-Na</td><td>0.742</td></tr>
+                <tr><td>MELD</td><td>0.726</td></tr>
+                <tr><td>Child-Pugh</td><td>0.685</td></tr>
+              </tbody>
+            </table>
+          </div>
         </div>
 
-        <button class="btn-export" id="btn-export">📊 Export Results (JSON)</button>
+        <button class="btn-export" id="btn-export">&#128202; Export Results (JSON)</button>
 
-        <p style="font-size: 0.65rem; color: var(--text-dim); line-height: 1.5; text-align: center; margin-top: 16px;">
-          <strong>Model Performance:</strong><br>
-          This heuristic model is for educational demonstration. Clinical scores have established validation (MELD AUC ~0.83, MELD-Na AUC ~0.87 for transplant mortality).
+        <p style="font-size: 0.62rem; color: var(--text-dim); line-height: 1.5; text-align: center; margin-top: 8px;">
+          <strong>Citation:</strong> 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. <em>World J Hepatol</em>. 2025.<br>
+          <strong>Contact:</strong> mmrech@ucs.br
         </p>
       </section>
     </div>
 
     <section class="references-section">
-      <h3>📚 Clinical References</h3>
+      <h3>&#128218; Clinical References</h3>
       <ol>
-        <li>Kamath PS, et al. A model to predict survival in patients with end-stage liver disease. <em>Hepatology</em>. 2001;33(2):464-470. doi:10.1053/jhep.2001.22172</li>
-        <li>Biggins SW, et al. Serum sodium predicts mortality in patients listed for liver transplantation. <em>Hepatology</em>. 2005;41(1):32-39. doi:10.1002/hep.20517</li>
-        <li>Pugh RN, et al. Transection of the oesophagus for bleeding oesophageal varices. <em>Br J Surg</em>. 1973;60(8):646-649. doi:10.1002/bjs.1800600817</li>
-        <li>Johnson PJ, et al. Assessment of liver function in patients with hepatocellular carcinoma: a new evidence-based approach-the ALBI grade. <em>J Clin Oncol</em>. 2015;33(6):550-558. doi:10.1200/JCO.2014.57.9151</li>
-        <li>Garcia-Tsao G, et al. Prevention and management of gastroesophageal varices and variceal hemorrhage in cirrhosis. <em>Hepatology</em>. 2007;46(3):922-938. doi:10.1002/hep.21907</li>
-        <li>de Franchis R, et al. Baveno VII – Renewing consensus in portal hypertension. <em>J Hepatol</em>. 2022;76(4):959-974. doi:10.1016/j.jhep.2021.12.022</li>
+        <li>Kamath PS, et al. A model to predict survival in patients with end-stage liver disease. <em>Hepatology</em>. 2001;33(2):464-470.</li>
+        <li>Biggins SW, et al. Serum sodium predicts mortality in patients listed for liver transplantation. <em>Hepatology</em>. 2005;41(1):32-39.</li>
+        <li>Pugh RN, et al. Transection of the oesophagus for bleeding oesophageal varices. <em>Br J Surg</em>. 1973;60(8):646-649.</li>
+        <li>Johnson PJ, et al. Assessment of liver function in patients with hepatocellular carcinoma: the ALBI grade. <em>J Clin Oncol</em>. 2015;33(6):550-558.</li>
+        <li>Garcia-Tsao G, et al. Prevention and management of gastroesophageal varices and variceal hemorrhage in cirrhosis. <em>Hepatology</em>. 2007;46(3):922-938.</li>
+        <li>de Franchis R, et al. Baveno VII &ndash; Renewing consensus in portal hypertension. <em>J Hepatol</em>. 2022;76(4):959-974.</li>
       </ol>
     </section>
   </main>
 
   <script>
     const $ = (id) => document.getElementById(id);
+    const API_BASE = window.location.origin;
 
     function clamp(n, a, b) { return Math.min(Math.max(n, a), b); }
 
     function syncDisplay(el) {
       const out = $(el.id + '-val');
-      if (out) out.innerText = el.value;
+      if (out) out.innerText = parseFloat(el.value).toFixed(el.step && el.step.includes('.') ? el.step.split('.')[1].length : 0);
     }
 
-    // ============= CLINICAL SCORE CALCULATIONS =============
+    // ============= TRADITIONAL SCORE CALCULATIONS (local) =============
 
-    function meldScore(bili, inr, creat, dialysis) {
-      // UNOS MELD formula with dialysis handling
+    function meldScore(bili, inr, creat) {
       const b = Math.max(bili, 1);
       const i = Math.max(inr, 1);
-      
-      // If on dialysis ≥2x/week, creatinine = 4.0 per UNOS guidelines
-      let c = Math.max(creat, 1);
-      if (dialysis === 'yes') {
-        c = 4.0;
-      } else {
-        c = Math.min(c, 4.0); // Cap at 4.0 if not on dialysis
-      }
-
+      const c = Math.min(Math.max(creat, 1), 4.0);
       let meld = 3.78 * Math.log(b) + 11.2 * Math.log(i) + 9.57 * Math.log(c) + 6.43;
-      meld = Math.round(meld);
-      return clamp(meld, 6, 40);
+      return clamp(Math.round(meld), 6, 40);
     }
 
     function meldNaScore(meld, sodium) {
-      // MELD-Na: sodium clipped to [125, 137]
       const s = clamp(sodium, 125, 137);
       const delta = 137 - s;
       let meldNa = meld + 1.32 * delta - (0.033 * meld * delta);
-      meldNa = Math.round(meldNa);
-      return clamp(meldNa, 6, 40);
+      return clamp(Math.round(meldNa), 6, 40);
     }
 
-    function childPugh(bili, alb, inr, asc, enc) {
+    function childPugh(bili, alb, inr, asc) {
       let pts = 0;
-      
-      // Bilirubin
       pts += (bili < 2) ? 1 : (bili <= 3 ? 2 : 3);
-      
-      // Albumin
       pts += (alb > 3.5) ? 1 : (alb >= 2.8 ? 2 : 3);
-      
-      // INR
       pts += (inr < 1.7) ? 1 : (inr <= 2.3 ? 2 : 3);
-      
-      // Ascites (none/mild/severe)
-      pts += (asc === 'none') ? 1 : (asc === 'mild' ? 2 : 3);
-      
-      // Encephalopathy (none/mild/severe)
-      pts += (enc === 'none') ? 1 : (enc === 'mild' ? 2 : 3);
-
+      pts += (asc === 'no') ? 1 : 3;
+      // Encephalopathy not in the 34-feature model, default to 1 point
+      pts += 1;
       const cls = (pts <= 6) ? 'A' : (pts <= 9 ? 'B' : 'C');
       return { pts, cls };
     }
 
     function albiScore(albumin, bilirubin) {
-      // ALBI = (log10 bilirubin × 0.66) + (albumin × -0.085)
       const score = (Math.log10(bilirubin) * 0.66) + (albumin * -0.085);
-      
       let grade;
       if (score <= -2.60) grade = '1 (Best)';
       else if (score <= -1.39) grade = '2';
       else grade = '3 (Worst)';
-      
       return { score: score.toFixed(2), grade };
     }
 
-    // ============= VALIDATION =============
-
-    function validateInputs() {
-      const errors = [];
-      
-      const bili = parseFloat($('bilirubin').value);
-      const inr = parseFloat($('inr').value);
-      const creat = parseFloat($('creatinine').value);
-      const alb = parseFloat($('albumin').value);
-      const sod = parseFloat($('sodium').value);
-      
-      // Physiologic range checks
-      if (bili > 50) {
-        errors.push('⚠️ Bilirubin >50 mg/dL is extremely rare. Please verify the value.');
-      }
-      
-      if (inr > 10) {
-        errors.push('⚠️ INR >10 suggests possible lab error or critical coagulopathy requiring immediate intervention.');
-      }
-      
-      if (creat > 15) {
-        errors.push('⚠️ Creatinine >15 mg/dL is extremely elevated. Verify value and dialysis status.');
-      }
-      
-      if (alb < 1.5 || alb > 5.5) {
-        errors.push('⚠️ Albumin outside typical range (1.5-5.5 g/dL). Please verify.');
+    // ============= GRADIO API CALL =============
+
+    async function callGradioAPI() {
+      // Collect all 34 inputs in the exact order the Gradio function expects
+      const data = [
+        parseInt($('age').value),                        // age
+        $('sex').value,                                  // sex
+        $('race').value,                                 // race
+        $('etiology_cirrosis').value,                    // etiology_cirrosis
+        $('hepatorenal_syndrome').value,                 // hepatorenal_syndrome
+        $('omeprazole').value,                           // omeprazole
+        $('spironolactone').value,                       // spironolactone
+        $('furosemide').value,                           // furosemide
+        $('propanolol').value,                           // propanolol
+        $('dialisis').value,                             // dialisis
+        $('portal_vein_thrombosis').value,               // portal_vein_thrombosis
+        $('ascitis').value,                              // ascitis
+        $('hepatocellular_carcinoma').value,             // hepatocellular_carcinoma
+        parseFloat($('albumin').value),                  // albumin
+        parseFloat($('total_bilirrubin').value),         // total_bilirrubin
+        parseFloat($('direct_bilirrubina').value),       // direct_bilirrubina
+        parseFloat($('inr').value),                      // inr
+        parseFloat($('creatinine').value),               // creatinine
+        parseFloat($('platelets').value),                // platelets
+        parseFloat($('ast').value),                      // ast
+        parseFloat($('alt').value),                      // alt
+        parseFloat($('hemoglobin').value),               // hemoglobin
+        parseFloat($('hematocrit').value),               // hematocrit
+        parseFloat($('leucocytes').value),               // leucocytes
+        parseFloat($('sodium').value),                   // sodium
+        parseFloat($('potassium').value),                // potassium
+        $('varices').value,                              // varices
+        $('red_wale_marks').value,                       // red_wale_marks
+        $('rupture_point').value,                        // rupture_point
+        $('active_bleeding').value,                      // active_bleeding
+        $('therapy').value,                              // therapy
+        parseFloat($('terlipressin_dose').value),        // terlipressin_dose
+        parseFloat($('time_to_endoscophy_hours').value), // time_to_endoscophy_hours
+        $('rebleeding').value                            // rebleeding
+      ];
+
+      // Gradio 4.x API: POST /call/predict_patient_outcome then GET event stream
+      const callResp = await fetch(`${API_BASE}/call/predict_patient_outcome`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ data })
+      });
+
+      if (!callResp.ok) {
+        throw new Error(`API call failed: ${callResp.status} ${callResp.statusText}`);
       }
-      
-      if (sod < 115 || sod > 160) {
-        errors.push('⚠️ Sodium critically abnormal (<115 or >160 mEq/L). This requires immediate medical attention. Please verify value.');
+
+      const callResult = await callResp.json();
+      const eventId = callResult.event_id;
+
+      // Poll the event stream for the result
+      const resultResp = await fetch(`${API_BASE}/call/predict_patient_outcome/${eventId}`);
+      const text = await resultResp.text();
+
+      // Parse SSE response: find the "data:" line with the JSON array
+      const lines = text.split('\n');
+      for (const line of lines) {
+        if (line.startsWith('data: ')) {
+          const payload = JSON.parse(line.substring(6));
+          return payload; // Array of 3 markdown strings
+        }
       }
-      
-      if (errors.length > 0) {
-        const proceed = confirm(
-          'INPUT VALIDATION WARNINGS:\n\n' + 
-          errors.join('\n\n') + 
-          '\n\nDo you want to proceed with calculation anyway?'
-        );
-        return proceed;
+      throw new Error('No data received from API');
+    }
+
+    // ============= PARSE ML OUTPUT =============
+
+    function parseMLOutput(mlMarkdown) {
+      const result = { probability: null, ciLower: null, ciUpper: null, prediction: null, riskCategory: null };
+
+      // Extract probability: "**Mortality Probability:** 45.2% (95% CI: 30.2% - 60.2%)"
+      const probMatch = mlMarkdown.match(/Mortality Probability:\*\*\s*([\d.]+)%\s*\(95% CI:\s*([\d.]+)%\s*-\s*([\d.]+)%\)/);
+      if (probMatch) {
+        result.probability = parseFloat(probMatch[1]) / 100;
+        result.ciLower = parseFloat(probMatch[2]) / 100;
+        result.ciUpper = parseFloat(probMatch[3]) / 100;
       }
-      
-      return true;
-    }
-
-    // ============= RISK PROBABILITY MODEL =============
-
-    function estimateRisk({ meldNa, age, asc, enc, bleeding, endoTime, sbp, cp }) {
-      // Weighted heuristic model based on published mortality predictors
-      // This is NOT machine learning - it's a rule-based estimation
-      
-      // Base risk from MELD-Na (strongest predictor)
-      // MELD-Na 6-15: ~5-10% 1yr mortality
-      // MELD-Na 16-25: ~20-40% 1yr mortality  
-      // MELD-Na 26-40: ~50-80% 1yr mortality
-      let baseRisk = (meldNa - 6) / 34 * 0.65; // 0-0.65 range
-      
-      // Age adjustment (>65 increases risk)
-      const ageWeight = age > 65 ? 0.08 : (age > 75 ? 0.12 : 0);
-      
-      // Ascites (portal hypertension marker)
-      const ascWeight = (asc === 'none') ? 0 : (asc === 'mild' ? 0.06 : 0.12);
-      
-      // Encephalopathy (hepatic decompensation)
-      const encWeight = (enc === 'none') ? 0 : (enc === 'mild' ? 0.07 : 0.14);
-      
-      // Active bleeding (immediate risk)
-      const bleedWeight = (bleeding === 'yes') ? 0.08 : 0;
-      
-      // Delayed endoscopy (>12h associated with worse outcomes)
-      const endoWeight = endoTime > 12 ? Math.min((endoTime - 12) / 36, 1) * 0.05 : 0;
-      
-      // SBP (major infection risk)
-      const sbpWeight = (sbp === 'yes') ? 0.10 : 0;
-      
-      // Child-Pugh adjustment
-      const cpWeight = cp === 'C' ? 0.08 : (cp === 'B' ? 0.04 : 0);
-      
-      let totalRisk = baseRisk + ageWeight + ascWeight + encWeight + 
-                     bleedWeight + endoWeight + sbpWeight + cpWeight;
-      
-      return clamp(totalRisk, 0.02, 0.98);
-    }
-
-    // ============= RENDERING =============
-
-    function render() {
-      if (!validateInputs()) return;
-      
-      // Get all inputs
-      const bili = parseFloat($('bilirubin').value);
-      const inr = parseFloat($('inr').value);
-      const creat = parseFloat($('creatinine').value);
-      const sod = parseFloat($('sodium').value);
-      const alb = parseFloat($('albumin').value);
-      const dialysis = $('dialysis').value;
-      
-      const asc = $('ascites').value;
-      const enc = $('enc').value;
-      const bleeding = $('bleeding').value;
-      const sbp = $('sbp').value;
-      
-      const age = parseInt($('age').value, 10);
-      const endoTime = parseFloat($('endo_time').value || '0');
-
-      // Calculate scores
-      const meld = meldScore(bili, inr, creat, dialysis);
-      const meldNa = meldNaScore(meld, sod);
-      const cp = childPugh(bili, alb, inr, asc, enc);
-      const albi = albiScore(alb, bili);
-
-      // Estimate risk
-      const riskProb = estimateRisk({ 
-        meldNa, age, asc, enc, bleeding, endoTime, sbp, cp: cp.cls 
-      });
 
-      // Animate results
-      const results = $('results-content');
-      results.classList.remove('fade-in');
-      void results.offsetWidth;
-      results.classList.add('fade-in');
-
-      // Update display
-      $('mortality-pct').innerText = (riskProb * 100).toFixed(1) + '%';
-      $('meld-score').innerText = meld;
-      $('meld-na-score').innerText = meldNa;
-      $('cp-score').innerText = cp.pts;
-      $('cp-class').innerText = 'Class ' + cp.cls;
-      $('albi-score').innerText = albi.score;
-      $('albi-grade').innerText = 'Grade ' + albi.grade;
-
-      // Progress ring
-      $('score-ring').style.setProperty('--p', (riskProb * 100).toFixed(1) + '%');
-
-      // Risk category
-      const badge = $('risk-badge');
-      if (riskProb < 0.30) {
-        badge.innerText = 'Low Risk';
-        badge.className = 'status-badge status-low';
-      } else if (riskProb < 0.60) {
-        badge.innerText = 'Moderate Risk';
-        badge.className = 'status-badge status-mid';
+      // Extract prediction
+      if (mlMarkdown.includes('Death within 1 year')) {
+        result.prediction = 'Death within 1 year';
       } else {
-        badge.innerText = 'High Risk';
-        badge.className = 'status-badge status-high';
+        result.prediction = 'Survival beyond 1 year';
       }
 
-      // MELD mortality interpretation
-      const meldMort =
-        meld < 10 ? '<10%' :
-        meld < 20 ? '10–19%' :
-        meld < 30 ? '20–50%' : '>50%';
+      // Extract risk category
+      const riskMatch = mlMarkdown.match(/(Low Risk|Moderate Risk|High Risk)/);
+      if (riskMatch) result.riskCategory = riskMatch[1];
 
-      $('meld-mort').innerText = '3-mo mortality: ' + meldMort;
+      return result;
+    }
+
+    function parseTraditionalScores(tradMarkdown) {
+      const result = { meld: null, meldNa: null, childPugh: null, cpClass: null };
+
+      const meldMatch = tradMarkdown.match(/MELD Score:\*\*\s*(\d+)/);
+      if (meldMatch) result.meld = parseInt(meldMatch[1]);
+
+      const meldNaMatch = tradMarkdown.match(/MELD-Na Score:\*\*\s*(\d+)/);
+      if (meldNaMatch) result.meldNa = parseInt(meldNaMatch[1]);
+
+      const cpMatch = tradMarkdown.match(/Child-Pugh Score:\*\*\s*(\d+)\s*\(Class\s*([ABC])\)/);
+      if (cpMatch) {
+        result.childPugh = parseInt(cpMatch[1]);
+        result.cpClass = cpMatch[2];
+      }
+
+      return result;
+    }
+
+    // ============= MAIN RENDER =============
+
+    async function render() {
+      const btn = $('btn-run');
+      const errorBanner = $('error-banner');
+      errorBanner.style.display = 'none';
+
+      btn.disabled = true;
+      btn.textContent = '⏳ Calculating...';
+
+      try {
+        // Call the ML model API
+        const apiResult = await callGradioAPI();
+        const [mlOutput, tradOutput, compOutput] = apiResult;
+
+        const ml = parseMLOutput(mlOutput);
+        const trad = parseTraditionalScores(tradOutput);
+
+        // Animate results
+        const results = $('results-content');
+        results.classList.remove('fade-in');
+        void results.offsetWidth;
+        results.classList.add('fade-in');
+
+        // Update mortality display
+        if (ml.probability !== null) {
+          const pct = (ml.probability * 100).toFixed(1);
+          $('mortality-pct').innerText = pct + '%';
+          $('score-ring').style.setProperty('--p', pct + '%');
+          $('prediction-label').innerText = ml.prediction || '';
+
+          // Color the ring based on risk
+          if (ml.probability < 0.3) {
+            $('score-ring').style.setProperty('--ring-color', 'var(--success)');
+          } else if (ml.probability < 0.6) {
+            $('score-ring').style.setProperty('--ring-color', 'var(--warning)');
+          } else {
+            $('score-ring').style.setProperty('--ring-color', 'var(--danger)');
+          }
+
+          // Confidence interval
+          if (ml.ciLower !== null) {
+            $('ci-section').style.display = 'block';
+            $('ci-lower').innerText = (ml.ciLower * 100).toFixed(1) + '%';
+            $('ci-upper').innerText = (ml.ciUpper * 100).toFixed(1) + '%';
+            $('ci-fill').style.left = (ml.ciLower * 100) + '%';
+            $('ci-fill').style.width = ((ml.ciUpper - ml.ciLower) * 100) + '%';
+            $('ci-marker').style.left = (ml.probability * 100) + '%';
+          }
+        }
+
+        // Risk badge
+        const badge = $('risk-badge');
+        if (ml.riskCategory === 'Low Risk') {
+          badge.innerText = 'Low Risk';
+          badge.className = 'status-badge status-low';
+        } else if (ml.riskCategory === 'Moderate Risk') {
+          badge.innerText = 'Moderate Risk';
+          badge.className = 'status-badge status-mid';
+        } else {
+          badge.innerText = 'High Risk';
+          badge.className = 'status-badge status-high';
+        }
+
+        // Traditional scores — use API values if available, else compute locally
+        const bili = parseFloat($('total_bilirrubin').value);
+        const inr = parseFloat($('inr').value);
+        const creat = parseFloat($('creatinine').value);
+        const sod = parseFloat($('sodium').value);
+        const alb = parseFloat($('albumin').value);
+        const asc = $('ascitis').value;
+
+        const localMeld = meldScore(bili, inr, creat);
+        const localMeldNa = meldNaScore(localMeld, sod);
+        const localCp = childPugh(bili, alb, inr, asc);
+        const localAlbi = albiScore(alb, bili);
+
+        $('meld-score').innerText = trad.meld || localMeld;
+        $('meld-na-score').innerText = trad.meldNa || localMeldNa;
+        $('cp-score').innerText = trad.childPugh || localCp.pts;
+        $('cp-class').innerText = 'Class ' + (trad.cpClass || localCp.cls);
+        $('albi-score').innerText = localAlbi.score;
+        $('albi-grade').innerText = 'Grade ' + localAlbi.grade;
+
+        const meldVal = trad.meld || localMeld;
+        const meldMort = meldVal < 10 ? '<10%' : meldVal < 20 ? '10-19%' : meldVal < 30 ? '20-50%' : '>50%';
+        $('meld-mort').innerText = '3-mo mortality: ' + meldMort;
+
+        // Show comparison
+        $('comparison-section').style.display = 'block';
+
+      } catch (err) {
+        console.error('API Error:', err);
+        errorBanner.textContent = '⚠ API Error: ' + err.message + '. Falling back to local score calculation.';
+        errorBanner.style.display = 'block';
+
+        // Fallback: compute local scores only
+        const bili = parseFloat($('total_bilirrubin').value);
+        const inr = parseFloat($('inr').value);
+        const creat = parseFloat($('creatinine').value);
+        const sod = parseFloat($('sodium').value);
+        const alb = parseFloat($('albumin').value);
+        const asc = $('ascitis').value;
+
+        const meld = meldScore(bili, inr, creat);
+        const meldNa = meldNaScore(meld, sod);
+        const cp = childPugh(bili, alb, inr, asc);
+        const albi = albiScore(alb, bili);
+
+        $('meld-score').innerText = meld;
+        $('meld-na-score').innerText = meldNa;
+        $('cp-score').innerText = cp.pts;
+        $('cp-class').innerText = 'Class ' + cp.cls;
+        $('albi-score').innerText = albi.score;
+        $('albi-grade').innerText = 'Grade ' + albi.grade;
+        $('meld-mort').innerText = '3-mo mortality: ' + (meld < 10 ? '<10%' : meld < 20 ? '10-19%' : meld < 30 ? '20-50%' : '>50%');
+
+        $('mortality-pct').innerText = 'N/A';
+        $('risk-badge').innerText = 'API Unavailable';
+        $('risk-badge').className = 'status-badge';
+      } finally {
+        btn.disabled = false;
+        btn.textContent = '🔮 Calculate Risk (ML Model)';
+      }
     }
 
     // ============= PRESETS =============
 
     const PRESETS = {
       compensated: {
-        age: 55, bilirubin: 1.2, inr: 1.1, creatinine: 0.9, 
-        albumin: 3.8, sodium: 140, ascites: 'none', enc: 'none',
-        bleeding: 'no', dialysis: 'no', sbp: 'no', endo_time: 8
+        age: 55, sex: 'male', race: 'white', etiology_cirrosis: 'alcohol',
+        hepatorenal_syndrome: 'no', omeprazole: 'no', spironolactone: 'no', furosemide: 'no',
+        propanolol: 'yes', dialisis: 'no', portal_vein_thrombosis: 'no',
+        ascitis: 'no', hepatocellular_carcinoma: 'no',
+        albumin: 3.8, total_bilirrubin: 1.2, direct_bilirrubina: 0.3, inr: 1.1,
+        creatinine: 0.9, platelets: 180, ast: 28, alt: 22,
+        hemoglobin: 14, hematocrit: 42, leucocytes: 5.5, sodium: 140, potassium: 4.2,
+        varices: 'yes', red_wale_marks: 'no', rupture_point: 'no',
+        active_bleeding: 'no', rebleeding: 'no', therapy: 'Banding',
+        terlipressin_dose: 2, time_to_endoscophy_hours: 8
       },
       decompensated: {
-        age: 62, bilirubin: 2.8, inr: 1.6, creatinine: 1.3,
-        albumin: 3.0, sodium: 134, ascites: 'mild', enc: 'none',
-        bleeding: 'yes', dialysis: 'no', sbp: 'no', endo_time: 14
+        age: 62, sex: 'male', race: 'white', etiology_cirrosis: 'alcohol',
+        hepatorenal_syndrome: 'no', omeprazole: 'yes', spironolactone: 'yes', furosemide: 'yes',
+        propanolol: 'no', dialisis: 'no', portal_vein_thrombosis: 'no',
+        ascitis: 'yes', hepatocellular_carcinoma: 'no',
+        albumin: 3.0, total_bilirrubin: 2.8, direct_bilirrubina: 1.2, inr: 1.6,
+        creatinine: 1.3, platelets: 95, ast: 52, alt: 38,
+        hemoglobin: 10.5, hematocrit: 32, leucocytes: 7.2, sodium: 134, potassium: 4.5,
+        varices: 'yes', red_wale_marks: 'yes', rupture_point: 'no',
+        active_bleeding: 'yes', rebleeding: 'no', therapy: 'Banding',
+        terlipressin_dose: 2, time_to_endoscophy_hours: 14
       },
       advanced: {
-        age: 58, bilirubin: 5.2, inr: 2.4, creatinine: 2.1,
-        albumin: 2.4, sodium: 128, ascites: 'severe', enc: 'severe',
-        bleeding: 'yes', dialysis: 'no', sbp: 'yes', endo_time: 18
+        age: 58, sex: 'male', race: 'white', etiology_cirrosis: 'alcohol+hcv',
+        hepatorenal_syndrome: 'no', omeprazole: 'yes', spironolactone: 'yes', furosemide: 'yes',
+        propanolol: 'no', dialisis: 'no', portal_vein_thrombosis: 'yes',
+        ascitis: 'yes', hepatocellular_carcinoma: 'no',
+        albumin: 2.4, total_bilirrubin: 5.2, direct_bilirrubina: 2.8, inr: 2.4,
+        creatinine: 2.1, platelets: 55, ast: 120, alt: 85,
+        hemoglobin: 8.5, hematocrit: 26, leucocytes: 12.0, sodium: 128, potassium: 5.1,
+        varices: 'yes', red_wale_marks: 'yes', rupture_point: 'yes',
+        active_bleeding: 'yes', rebleeding: 'yes', therapy: 'Banding',
+        terlipressin_dose: 4, time_to_endoscophy_hours: 18
       },
       hrs: {
-        age: 64, bilirubin: 3.5, inr: 1.8, creatinine: 3.2,
-        albumin: 2.7, sodium: 130, ascites: 'severe', enc: 'mild',
-        bleeding: 'yes', dialysis: 'yes', sbp: 'yes', endo_time: 10
+        age: 64, sex: 'male', race: 'white', etiology_cirrosis: 'alcohol',
+        hepatorenal_syndrome: 'yes', omeprazole: 'yes', spironolactone: 'yes', furosemide: 'yes',
+        propanolol: 'no', dialisis: 'yes', portal_vein_thrombosis: 'no',
+        ascitis: 'yes', hepatocellular_carcinoma: 'no',
+        albumin: 2.7, total_bilirrubin: 3.5, direct_bilirrubina: 1.8, inr: 1.8,
+        creatinine: 3.2, platelets: 72, ast: 68, alt: 45,
+        hemoglobin: 9.2, hematocrit: 28, leucocytes: 9.5, sodium: 130, potassium: 5.3,
+        varices: 'yes', red_wale_marks: 'yes', rupture_point: 'no',
+        active_bleeding: 'yes', rebleeding: 'no', therapy: 'Banding',
+        terlipressin_dose: 4, time_to_endoscophy_hours: 10
       }
     };
 
     function loadPreset(name) {
       if (!name || !PRESETS[name]) return;
-      
       const preset = PRESETS[name];
       Object.keys(preset).forEach(key => {
         const el = $(key);
@@ -951,39 +1349,38 @@
 
     function exportResults() {
       const timestamp = new Date().toISOString();
-      
+      const allInputIds = [
+        'age','sex','race','etiology_cirrosis','hepatorenal_syndrome','omeprazole',
+        'spironolactone','furosemide','propanolol','dialisis','portal_vein_thrombosis',
+        'ascitis','hepatocellular_carcinoma','albumin','total_bilirrubin',
+        'direct_bilirrubina','inr','creatinine','platelets','ast','alt','hemoglobin',
+        'hematocrit','leucocytes','sodium','potassium','varices','red_wale_marks',
+        'rupture_point','active_bleeding','therapy','terlipressin_dose',
+        'time_to_endoscophy_hours','rebleeding'
+      ];
+
+      const inputs = {};
+      allInputIds.forEach(id => {
+        const el = $(id);
+        if (el) {
+          const val = el.value;
+          inputs[id] = isNaN(val) || val === '' ? val : parseFloat(val);
+        }
+      });
+
       const data = {
         timestamp,
         disclaimer: "FOR RESEARCH/EDUCATIONAL USE ONLY - NOT MEDICAL ADVICE",
-        calculatorVersion: "2.0-Clinical",
-        inputs: {
-          demographics: {
-            age: parseInt($('age').value),
-            sex: $('sex').value,
-            etiology: $('etiology').value
-          },
-          clinical: {
-            ascites: $('ascites').value,
-            encephalopathy: $('enc').value,
-            activeBleeding: $('bleeding').value,
-            sbp: $('sbp').value,
-            dialysisStatus: $('dialysis').value
-          },
-          laboratory: {
-            bilirubin_mg_dL: parseFloat($('bilirubin').value),
-            inr: parseFloat($('inr').value),
-            creatinine_mg_dL: parseFloat($('creatinine').value),
-            albumin_g_dL: parseFloat($('albumin').value),
-            sodium_mEq_L: parseFloat($('sodium').value)
-          },
-          therapy: {
-            terlipressinDose_mg: parseFloat($('terlipressin').value),
-            timeToEndoscopy_hours: parseFloat($('endo_time').value)
-          }
-        },
+        calculatorVersion: "3.0-ML-Clinical",
+        model: "Random Forest with Isotonic Calibration (AUC 0.915)",
+        inputs,
         results: {
           estimatedMortality1Year: $('mortality-pct').innerText,
           riskCategory: $('risk-badge').innerText,
+          confidenceInterval: {
+            lower: $('ci-lower').innerText,
+            upper: $('ci-upper').innerText
+          },
           scores: {
             MELD: $('meld-score').innerText,
             MELDNa: $('meld-na-score').innerText,
@@ -993,15 +1390,14 @@
             ALBIGrade: $('albi-grade').innerText.replace('Grade ', '')
           }
         },
-        notes: "This is a heuristic model for educational purposes. Not validated for clinical decisions."
+        citation: "Rech MM, Soldera J, Corso LL et al. World J Hepatol. 2025."
       };
-      
+
       const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'});
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
-      const dateStr = timestamp.split('T')[0];
-      a.download = `evb_risk_assessment_${dateStr}_${Date.now()}.json`;
+      a.download = `evb_ml_risk_assessment_${timestamp.split('T')[0]}_${Date.now()}.json`;
       a.click();
       URL.revokeObjectURL(url);
     }
@@ -1009,23 +1405,24 @@
     // ============= INITIALIZATION =============
 
     function wireLiveUpdates() {
-      const liveIds = [
-        'age','sex','etiology','ascites','enc','dialysis',
-        'bilirubin','inr','creatinine','albumin','sodium',
-        'bleeding','terlipressin','endo_time','sbp'
+      const allIds = [
+        'age','sex','race','etiology_cirrosis','hepatorenal_syndrome','omeprazole',
+        'spironolactone','furosemide','propanolol','dialisis','portal_vein_thrombosis',
+        'ascitis','hepatocellular_carcinoma','albumin','total_bilirrubin',
+        'direct_bilirrubina','inr','creatinine','platelets','ast','alt','hemoglobin',
+        'hematocrit','leucocytes','sodium','potassium','varices','red_wale_marks',
+        'rupture_point','active_bleeding','therapy','terlipressin_dose',
+        'time_to_endoscophy_hours','rebleeding'
       ];
 
-      liveIds.forEach(id => {
+      allIds.forEach(id => {
         const el = $(id);
         if (!el) return;
-
         const handler = () => {
           if (el.type === 'range') syncDisplay(el);
         };
-
         el.addEventListener('input', handler);
         el.addEventListener('change', handler);
-
         if (el.type === 'range') syncDisplay(el);
       });