Upload folder using huggingface_hub

frontend/src/app/simulator/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { useState } from "react";
-import { Sliders, Activity, Cpu } from "lucide-react";
+import { useState, useEffect, useCallback } from "react";
+import { Sliders, Activity, Cpu, Shuffle, Play, Square, Sparkles } from "lucide-react";
 import ShapChart from "@/components/ShapChart";
 import { PatientVitals } from "@/lib/edge/types";
 import { evaluateEdge } from "@/lib/edge/inference";
@@ -15,6 +15,25 @@ interface PredictionResult {
   weights?: Record<string, number>;
 }
 
+// Clinically bounded randomized vitals generator
+function generateRandomVitals(): PatientVitals {
+  const hr = Math.floor(Math.random() * (162 - 48 + 1)) + 48; // 48 - 162 BPM
+  const spo2 = Math.floor(Math.random() * (99 - 78 + 1)) + 78; // 78 - 99 %
+  const sys = Math.floor(Math.random() * (190 - 86 + 1)) + 86; // 86 - 190 mmHg
+  const diaMax = Math.min(sys - 18, 120);
+  const diaMin = Math.max(Math.min(diaMax - 14, 52), 46);
+  const dia = Math.floor(Math.random() * (diaMax - diaMin + 1)) + diaMin;
+  const temp = Number((Math.random() * (39.3 - 35.8) + 35.8).toFixed(1));
+
+  return {
+    Heart_Rate: hr,
+    SpO2_Level: spo2,
+    Systolic_BP: sys,
+    Diastolic_BP: dia,
+    Body_Temp: temp,
+  };
+}
+
 const DEFAULT_VITALS: PatientVitals = {
   Heart_Rate: 75,
   SpO2_Level: 98,
@@ -38,6 +57,45 @@ export default function Analysis() {
     };
   });
   const [loading, setLoading] = useState(false);
+  const [autoStream, setAutoStream] = useState(false);
+
+  // Core evaluation function
+  const executeEvaluation = useCallback((data: PatientVitals) => {
+    const edgeResult = evaluateEdge(data);
+    setSubmittedData({ ...data });
+    setPrediction({
+      prediction: Boolean(edgeResult.is_at_risk),
+      prediction_label: edgeResult.label,
+      probability: edgeResult.confidence,
+      model_outputs: edgeResult.model_outputs,
+      model_probs: edgeResult.model_probs,
+      weights: edgeResult.weights,
+    });
+  }, []);
+
+  // Handler to throw randomized values for all features
+  const handleThrowRandomValues = useCallback(() => {
+    const randomVitals = generateRandomVitals();
+    setFormData(randomVitals);
+    executeEvaluation(randomVitals);
+  }, [executeEvaluation]);
+
+  // Throw initial random values on mount so the simulator is always dynamic
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      handleThrowRandomValues();
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [handleThrowRandomValues]);
+
+  // Continuous auto-streaming simulation mode
+  useEffect(() => {
+    if (!autoStream) return;
+    const interval = setInterval(() => {
+      handleThrowRandomValues();
+    }, 2400);
+    return () => clearInterval(interval);
+  }, [autoStream, handleThrowRandomValues]);
 
   const handlePredict = async (inputData?: PatientVitals) => {
     const targetData = inputData || formData;
@@ -48,9 +106,9 @@ export default function Analysis() {
       const apiUrl = process.env.NEXT_PUBLIC_API_URL;
       if (apiUrl) {
         const res = await fetch(`${apiUrl}/predict`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(targetData)
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(targetData),
         });
         if (res.ok) {
           const data = await res.json();
@@ -65,16 +123,7 @@ export default function Analysis() {
 
     // Client-side Zero-Cloud TinyML Ensemble Inference
     try {
-      const edgeResult = evaluateEdge(targetData);
-
-      setPrediction({
-        prediction: Boolean(edgeResult.is_at_risk),
-        prediction_label: edgeResult.label,
-        probability: edgeResult.confidence,
-        model_outputs: edgeResult.model_outputs,
-        model_probs: edgeResult.model_probs,
-        weights: edgeResult.weights,
-      });
+      executeEvaluation(targetData);
     } catch (e) {
       console.error("Local inference error", e);
     } finally {
@@ -82,19 +131,27 @@ export default function Analysis() {
     }
   };
 
+  // Real-time reactive slider adjustment
+  const handleSliderChange = (field: keyof PatientVitals, val: number) => {
+    const updated = { ...formData, [field]: val };
+    setFormData(updated);
+    executeEvaluation(updated);
+  };
+
   const handleSelectPreset = (presetData: PatientVitals) => {
     setFormData({ ...presetData });
-    handlePredict(presetData);
+    executeEvaluation(presetData);
   };
 
   return (
     <main className="min-h-dvh bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white pb-16">
       <div className="max-w-350 mx-auto w-full px-4 sm:px-8 py-10 md:py-12 flex-1 flex flex-col">
+        {/* Monolithic Header */}
         <header className="mb-8 border-b-4 border-ink pb-8 flex flex-col md:flex-row justify-between md:items-end gap-6">
           <div>
             <div className="text-[12px] text-hazard font-bold tracking-widest mb-4 flex items-center gap-2 uppercase">
               <Sliders size={14} />
-              MODEL EXPLAINABILITY & SIMULATION BENCH
+              MODEL EXPLAINABILITY &amp; SIMULATION BENCH
             </div>
             <h1 className="text-[clamp(2.5rem,5vw,5.5rem)] leading-[0.9]">
               MODEL<br />SIMULATOR
@@ -105,13 +162,54 @@ export default function Analysis() {
               ENSEMBLE: 5 MODELS · SHAP EXPLAINABILITY
             </div>
             <div className="text-[11px] text-slate font-bold uppercase tracking-wider">
-              Deterministic In-Browser Inference · Zero Cloud Latency
+              Deterministic In-Browser Inference · Dual-Polarity SHAP Signs
             </div>
           </div>
         </header>
 
-        <div className="crosshair-corner grid grid-cols-1 lg:grid-cols-12 gap-px bg-ink border-2 border-ink items-stretch">
+        {/* Global Control Bar for Randomization */}
+        <div className="mb-6 border-2 border-ink bg-white p-4 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 shadow-[4px_4px_0px_0px_#141413]">
+          <div className="flex items-center gap-2">
+            <span className="w-2.5 h-2.5 rounded-full bg-hazard" />
+            <span className="text-[12px] font-black uppercase tracking-wider text-ink">
+              TELEMETRY GENERATOR
+            </span>
+            <span className="text-[10px] font-bold text-slate uppercase bg-canvas-cream border border-ink/30 px-2 py-0.5 hidden sm:inline">
+              Random Physiologic Vector Sampling
+            </span>
+          </div>
 
+          <div className="flex items-center gap-2 w-full sm:w-auto">
+            {/* Throw Random Values Button */}
+            <button
+              type="button"
+              onClick={handleThrowRandomValues}
+              className="btn-tactile border-2 border-ink bg-hazard text-white hover:bg-black px-4 py-2 text-[12px] font-black uppercase tracking-wider flex items-center justify-center gap-2 transition-colors cursor-pointer flex-1 sm:flex-none"
+              title="Throw randomized physiological vitals"
+            >
+              <Shuffle size={14} />
+              <span>Throw Random Values</span>
+            </button>
+
+            {/* Auto Stream Toggle */}
+            <button
+              type="button"
+              onClick={() => setAutoStream(!autoStream)}
+              className={`border-2 border-ink px-3 py-2 text-[12px] font-black uppercase tracking-wider flex items-center gap-1.5 transition-colors cursor-pointer ${
+                autoStream
+                  ? "bg-emerald-600 text-white border-emerald-700 animate-pulse"
+                  : "bg-white text-ink hover:bg-canvas-cream"
+              }`}
+              title="Continuously throw random vitals every 2.4 seconds"
+            >
+              {autoStream ? <Square size={13} /> : <Play size={13} />}
+              <span>{autoStream ? "Streaming (Active)" : "Auto-Stream"}</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Main Workbench Grid */}
+        <div className="crosshair-corner grid grid-cols-1 lg:grid-cols-12 gap-px bg-ink border-2 border-ink items-stretch">
           {/* Input Panel - 6 Columns */}
           <div className="lg:col-span-6 bg-canvas-cream flex flex-col justify-between">
             <div>
@@ -120,10 +218,20 @@ export default function Analysis() {
                   <Activity size={16} />
                   Patient Parameters
                 </h2>
-                <span className="text-[10px] text-slate uppercase font-bold">5 Telemetry Inputs</span>
+                <div className="flex items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={handleThrowRandomValues}
+                    className="text-[10px] font-black uppercase tracking-wider text-hazard border border-hazard px-2 py-0.5 hover:bg-hazard hover:text-white transition-colors cursor-pointer flex items-center gap-1"
+                  >
+                    <Sparkles size={11} />
+                    <span>Randomize</span>
+                  </button>
+                  <span className="text-[10px] text-slate uppercase font-bold">5 Telemetry Inputs</span>
+                </div>
               </div>
 
-              {/* Quick Clinical Test Vector Presets - Enlarged & Tactile */}
+              {/* Quick Clinical Test Vector Presets */}
               <div className="p-5 sm:p-6 bg-canvas-cream border-b-2 border-ink flex flex-col gap-3">
                 <div className="text-[11px] font-bold tracking-widest text-slate uppercase flex justify-between items-center">
                   <span className="text-ink">Clinical Patient Profiles</span>
@@ -135,26 +243,26 @@ export default function Analysis() {
                       name: "Resting Normal",
                       tag: "NORMAL",
                       desc: "Normotensive baseline vitals",
-                      data: { Heart_Rate: 72, SpO2_Level: 98, Systolic_BP: 118, Diastolic_BP: 78, Body_Temp: 37.0 }
+                      data: { Heart_Rate: 72, SpO2_Level: 98, Systolic_BP: 118, Diastolic_BP: 78, Body_Temp: 37.0 },
                     },
                     {
                       name: "STEMI / Ischemia",
                       tag: "CRITICAL",
                       desc: "Acute ischemic anomaly",
-                      data: { Heart_Rate: 128, SpO2_Level: 91, Systolic_BP: 165, Diastolic_BP: 104, Body_Temp: 37.3 }
+                      data: { Heart_Rate: 128, SpO2_Level: 91, Systolic_BP: 165, Diastolic_BP: 104, Body_Temp: 37.3 },
                     },
                     {
                       name: "Hypoxic Bradycardia",
                       tag: "WARNING",
                       desc: "Hypoxemic rhythm depression",
-                      data: { Heart_Rate: 48, SpO2_Level: 82, Systolic_BP: 88, Diastolic_BP: 54, Body_Temp: 35.8 }
+                      data: { Heart_Rate: 48, SpO2_Level: 82, Systolic_BP: 88, Diastolic_BP: 54, Body_Temp: 35.8 },
                     },
                     {
                       name: "Hypertensive Crisis",
                       tag: "WARNING",
                       desc: "Acute arterial pressure surge",
-                      data: { Heart_Rate: 98, SpO2_Level: 96, Systolic_BP: 195, Diastolic_BP: 118, Body_Temp: 37.1 }
-                    }
+                      data: { Heart_Rate: 98, SpO2_Level: 96, Systolic_BP: 195, Diastolic_BP: 118, Body_Temp: 37.1 },
+                    },
                   ].map((preset) => {
                     const isActive =
                       formData.Heart_Rate === preset.data.Heart_Rate &&
@@ -202,24 +310,70 @@ export default function Analysis() {
                 </div>
               </div>
 
-              {/* Slider Inputs */}
+              {/* Slider Inputs with Live Scrubbing */}
               <div className="p-6 sm:p-8 flex flex-col gap-6">
-                <InputControl label="Heart Rate" unit="BPM" value={formData.Heart_Rate} min={40} max={200} onChange={(v: number) => setFormData({ ...formData, Heart_Rate: v })} />
-                <InputControl label="SpO2 Level" unit="%" value={formData.SpO2_Level} min={70} max={100} onChange={(v: number) => setFormData({ ...formData, SpO2_Level: v })} />
-                <InputControl label="Systolic BP" unit="mmHg" value={formData.Systolic_BP} min={80} max={220} onChange={(v: number) => setFormData({ ...formData, Systolic_BP: v })} />
-                <InputControl label="Diastolic BP" unit="mmHg" value={formData.Diastolic_BP} min={40} max={140} onChange={(v: number) => setFormData({ ...formData, Diastolic_BP: v })} />
-                <InputControl label="Body Temperature" unit="°C" value={formData.Body_Temp} min={30} max={42} step={0.1} onChange={(v: number) => setFormData({ ...formData, Body_Temp: v })} />
+                <InputControl
+                  label="Heart Rate"
+                  unit="BPM"
+                  value={formData.Heart_Rate}
+                  min={40}
+                  max={200}
+                  onChange={(v: number) => handleSliderChange("Heart_Rate", v)}
+                />
+                <InputControl
+                  label="SpO2 Level"
+                  unit="%"
+                  value={formData.SpO2_Level}
+                  min={70}
+                  max={100}
+                  onChange={(v: number) => handleSliderChange("SpO2_Level", v)}
+                />
+                <InputControl
+                  label="Systolic BP"
+                  unit="mmHg"
+                  value={formData.Systolic_BP}
+                  min={80}
+                  max={220}
+                  onChange={(v: number) => handleSliderChange("Systolic_BP", v)}
+                />
+                <InputControl
+                  label="Diastolic BP"
+                  unit="mmHg"
+                  value={formData.Diastolic_BP}
+                  min={40}
+                  max={140}
+                  onChange={(v: number) => handleSliderChange("Diastolic_BP", v)}
+                />
+                <InputControl
+                  label="Body Temperature"
+                  unit="°C"
+                  value={formData.Body_Temp}
+                  min={30}
+                  max={42}
+                  step={0.1}
+                  onChange={(v: number) => handleSliderChange("Body_Temp", v)}
+                />
               </div>
             </div>
 
-            <div className="p-6 sm:p-8 pt-0">
+            <div className="p-6 sm:p-8 pt-0 flex gap-3">
+              <button
+                type="button"
+                onClick={handleThrowRandomValues}
+                className="btn-tactile py-4 px-5 border-2 border-ink bg-canvas-cream hover:bg-white text-ink font-bold text-[13px] tracking-wider uppercase flex items-center justify-center gap-2 cursor-pointer transition-colors"
+                title="Throw random physiological values"
+              >
+                <Shuffle size={14} className="text-hazard" />
+                <span>Randomize</span>
+              </button>
+
               <button
                 type="button"
                 onClick={() => handlePredict()}
                 disabled={loading}
-                className="btn-tactile-hazard py-5 font-bold text-[15px] sm:text-[16px] tracking-[0.2em] uppercase flex items-center justify-center gap-2 w-full cursor-pointer disabled:cursor-not-allowed"
+                className="btn-tactile-hazard py-4 font-bold text-[14px] sm:text-[15px] tracking-[0.2em] uppercase flex items-center justify-center gap-2 flex-1 cursor-pointer disabled:cursor-not-allowed"
               >
-                {loading ? 'Evaluating Model...' : 'Run Inference'}
+                {loading ? "Evaluating Model..." : "Re-evaluate Model"}
               </button>
             </div>
           </div>
@@ -229,48 +383,66 @@ export default function Analysis() {
             <div className="h-14 px-4 sm:px-6 border-b-2 border-ink bg-white flex justify-between items-center">
               <h2 className="text-[14px] font-bold tracking-wider uppercase flex items-center gap-2">
                 <Cpu size={16} />
-                Classification & SHAP Attributions
+                Classification &amp; SHAP Attributions
               </h2>
               <span className="text-[10px] text-slate uppercase font-bold">Ensemble Explainability</span>
             </div>
 
             <div className="grow flex flex-col relative bg-white">
-              <div className="absolute inset-0 z-0 opacity-10 pointer-events-none" style={{ backgroundImage: 'linear-gradient(var(--ink-black) 1px, transparent 1px), linear-gradient(90deg, var(--ink-black) 1px, transparent 1px)', backgroundSize: '40px 40px' }}></div>
+              <div
+                className="absolute inset-0 z-0 opacity-10 pointer-events-none"
+                style={{
+                  backgroundImage:
+                    "linear-gradient(var(--ink-black) 1px, transparent 1px), linear-gradient(90deg, var(--ink-black) 1px, transparent 1px)",
+                  backgroundSize: "40px 40px",
+                }}
+              />
 
-              <div className="z-10 p-8 flex flex-col h-full">
+              <div className="z-10 p-6 sm:p-8 flex flex-col h-full gap-8">
                 {prediction ? (
-                  <div>
-                    <div className="mb-12">
-                      <div className="text-[11px] font-bold text-slate tracking-widest mb-4">Model Output</div>
+                  <>
+                    <div>
+                      <div className="text-[11px] font-bold text-slate tracking-widest mb-3 uppercase">
+                        Model Output &amp; Diagnosis
+                      </div>
 
                       {(() => {
                         const getStatusStyles = (label: string) => {
                           const normalized = (label || "").toLowerCase();
-                          if (normalized === 'healthy' || normalized === 'normal') return "bg-[#d1fae5] text-[#065f46] border-[#065f46]";
-                          if (normalized.includes('heart')) return "bg-[#fef08a] text-[#854d0e] border-[#854d0e]";
-                          if (normalized.includes('asthma')) return "bg-[#e0f2fe] text-[#075985] border-[#075985]";
-                          if (normalized.includes('hypertension')) return "bg-[#f3e8ff] text-[#6b21a8] border-[#6b21a8]";
-                          if (normalized.includes('diabetes')) return "bg-[#ffedd5] text-[#9a3412] border-[#9a3412]";
+                          if (normalized === "healthy" || normalized === "normal")
+                            return "bg-[#d1fae5] text-[#065f46] border-[#065f46]";
+                          if (normalized.includes("heart"))
+                            return "bg-[#fef08a] text-[#854d0e] border-[#854d0e]";
+                          if (normalized.includes("asthma"))
+                            return "bg-[#e0f2fe] text-[#075985] border-[#075985]";
+                          if (normalized.includes("hypertension"))
+                            return "bg-[#f3e8ff] text-[#6b21a8] border-[#6b21a8]";
+                          if (normalized.includes("diabetes"))
+                            return "bg-[#ffedd5] text-[#9a3412] border-[#9a3412]";
                           return "bg-hazard text-white border-hazard";
                         };
 
                         return (
-                          <div className={`border-2 p-6 flex flex-col mb-4 ${getStatusStyles(prediction.prediction ? prediction.prediction_label : 'Healthy')}`}>
-                            <div className="font-sans text-[clamp(28px,3vw,56px)] font-black tracking-tighter leading-none mb-2 uppercase wrap-break-words">
-                              {prediction.prediction ? prediction.prediction_label : 'Normal'}
+                          <div
+                            className={`border-2 p-5 sm:p-6 flex flex-col mb-4 ${getStatusStyles(
+                              prediction.prediction ? prediction.prediction_label : "Healthy"
+                            )}`}
+                          >
+                            <div className="font-sans text-[clamp(28px,3vw,52px)] font-black tracking-tighter leading-none mb-2 uppercase wrap-break-words">
+                              {prediction.prediction ? prediction.prediction_label : "Normal"}
                             </div>
-                            <div className="text-[14px] font-bold tracking-widest">
+                            <div className="text-[13px] font-bold tracking-widest">
                               CONFIDENCE: {(prediction.probability * 100).toFixed(1)}%
                             </div>
                           </div>
                         );
                       })()}
 
-                      {/* Ensemble Diagnostics */}
+                      {/* Ensemble Diagnostics Breakdown */}
                       {prediction.model_outputs && (() => {
                         const outputs = prediction.model_outputs;
                         return (
-                          <div className="border-2 border-ink bg-white flex flex-col text-[12px] font-bold uppercase tracking-wider">
+                          <div className="border-2 border-ink bg-white flex flex-col text-[11px] font-bold uppercase tracking-wider">
                             <div className="border-b-2 border-ink px-4 py-2 bg-ink text-canvas-cream flex justify-between">
                               <span>Ensemble Stack Diagnostics</span>
                               <span className="text-hazard">Weighted Voting</span>
@@ -279,16 +451,20 @@ export default function Analysis() {
                               {Object.keys(outputs).map((modelName) => (
                                 <div
                                   key={modelName}
-                                  className="flex justify-between items-center p-3 hover:bg-canvas-cream transition-colors"
+                                  className="flex justify-between items-center p-2.5 hover:bg-canvas-cream transition-colors"
                                 >
-                                  <div className="w-[20%] text-slate">{modelName}</div>
-                                  <div className={`w-[40%] ${outputs[modelName] !== 'Healthy' ? 'text-hazard' : ''}`}>
+                                  <div className="w-[25%] text-slate">{modelName}</div>
+                                  <div
+                                    className={`w-[35%] ${
+                                      outputs[modelName] !== "Healthy" ? "text-hazard font-black" : "text-emerald-700"
+                                    }`}
+                                  >
                                     {outputs[modelName]}
                                   </div>
-                                  <div className="w-[20%] text-right">
-                                    CONF: {(((prediction.model_probs?.[modelName] ?? prediction.probability ?? 0.95)) * 100).toFixed(1)}%
+                                  <div className="w-[20%] text-right tabular-nums">
+                                    {(((prediction.model_probs?.[modelName] ?? prediction.probability ?? 0.95)) * 100).toFixed(1)}%
                                   </div>
-                                  <div className="w-[20%] text-right text-slate">
+                                  <div className="w-[20%] text-right text-slate tabular-nums">
                                     W: {(prediction.weights?.[modelName] ?? 0.25).toFixed(2)}
                                   </div>
                                 </div>
@@ -299,24 +475,27 @@ export default function Analysis() {
                       })()}
                     </div>
 
-                    <div className="flex-1 border-2 border-ink bg-white p-8 flex flex-col min-h-75">
-                      <div className="text-[11px] font-bold text-slate tracking-widest mb-6 border-b-2 border-ink pb-2">SHAP Feature Attributions</div>
-                      <div className="flex-1">
+                    {/* SHAP Feature Attributions Container */}
+                    <div className="border-2 border-ink bg-white p-5 sm:p-6 flex flex-col">
+                      <div className="text-[12px] font-black uppercase text-ink tracking-wider mb-4 border-b-2 border-ink pb-2 flex justify-between items-center">
+                        <span>SHAP Attributions &amp; Directional Signs</span>
+                        <span className="text-[10px] text-slate font-mono">Kernel / TreeSHAP ABI</span>
+                      </div>
+                      <div className="w-full">
                         <ShapChart patientData={submittedData} />
                       </div>
                     </div>
-                  </div>
+                  </>
                 ) : (
                   <div className="h-full flex items-center justify-center">
                     <div className="text-slate text-[14px] font-bold tracking-widest uppercase border-2 border-slate px-6 py-4">
-                      {loading ? 'Evaluating Model...' : 'Awaiting Input...'}
+                      {loading ? "Evaluating Model..." : "Awaiting Input..."}
                     </div>
                   </div>
                 )}
               </div>
             </div>
           </div>
-
         </div>
       </div>
     </main>

frontend/src/components/MermaidChart.tsx

@@ -168,7 +168,7 @@ export default function MermaidChart({ chart, title = "SYSTEM ARCHITECTURE PIPEL
       </div>
 
       {/* Main View Area */}
-      <div className={`relative overflow-auto p-4 md:p-6 bg-canvas-cream flex items-center justify-center min-h-[460px] ${isFullscreen ? "flex-1" : ""}`}>
+      <div className={`relative overflow-auto p-4 md:p-6 bg-canvas-cream flex items-center justify-center min-h-115 ${isFullscreen ? "flex-1" : ""}`}>
         {isLoading && (
           <div className="flex flex-col items-center justify-center gap-3 text-slate py-12">
             <div className="w-6 h-6 border-2 border-hazard border-t-transparent animate-spin rounded-full" />

frontend/src/components/ShapChart.tsx

@@ -1,144 +1,201 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { Loader2 } from "lucide-react";
+import { useMemo } from "react";
 import { PatientVitals } from "@/lib/edge/types";
+import { computeEdgeShap } from "@/lib/edge/explain";
+import { TrendingUp, TrendingDown, ShieldCheck, AlertTriangle } from "lucide-react";
 
-export default function ShapChart({ patientData }: { patientData: PatientVitals | null }) {
-  const [shapData, setShapData] = useState<{ feature_names: string[]; shap_values: number[] } | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (!patientData) return;
-
-    const fetchExplain = async () => {
-      setLoading(true);
-      try {
-        const apiUrl = process.env.NEXT_PUBLIC_API_URL;
-        if (apiUrl) {
-          const res = await fetch(apiUrl + "/explain", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(patientData),
-          });
-          const data = await res.json();
-          if (data.shap_values) {
-            setShapData(data);
-            return;
-          }
-        }
-      } catch {
-        // Fall through to client-side Edge SHAP calculation
-      } finally {
-        setLoading(false);
-      }
-
-      // Compute client-side SHAP feature attributions with zero cloud dependency
-      try {
-        const { computeEdgeShap } = await import("@/lib/edge/explain");
-        const edgeShap = computeEdgeShap(patientData);
-        setShapData(edgeShap);
-      } catch (e) {
-        console.error("Local SHAP error", e);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    const timeout = setTimeout(fetchExplain, 150);
-    return () => clearTimeout(timeout);
+interface ShapChartProps {
+  patientData: PatientVitals | null;
+}
+
+export default function ShapChart({ patientData }: ShapChartProps) {
+  // Synchronous client-side edge SHAP computation - instant 0ms latency
+  const shapData = useMemo(() => {
+    if (!patientData) return null;
+    return computeEdgeShap(patientData);
   }, [patientData]);
 
-  if (!shapData) {
+  if (!shapData || !patientData) {
     return (
-      <div className="h-full w-full flex flex-col items-center justify-center gap-3">
-        {loading ? (
-          <>
-            <Loader2 className="animate-spin text-ink" size={20} />
-            <span className="text-slate text-[12px] font-bold uppercase tracking-widest">
-              COMPUTING_SHAP_VECTORS...
-            </span>
-          </>
-        ) : (
-          <span className="text-slate text-[12px] font-bold uppercase tracking-widest">
-            AWAITING_TELEMETRY...
-          </span>
-        )}
+      <div className="h-full w-full flex flex-col items-center justify-center p-8 text-center text-slate">
+        <span className="text-[12px] font-bold uppercase tracking-widest border border-ink/20 px-4 py-2 bg-canvas-cream">
+          Awaiting Patient Telemetry...
+        </span>
       </div>
     );
   }
 
-  // Sort by absolute magnitude of SHAP value
+  // Feature clinical units mapping
+  const units: Record<string, string> = {
+    Heart_Rate: "BPM",
+    SpO2_Level: "%",
+    Systolic_BP: "mmHg",
+    Diastolic_BP: "mmHg",
+    Body_Temp: "°C",
+  };
+
+  const featureLabels: Record<string, string> = {
+    Heart_Rate: "HEART RATE",
+    SpO2_Level: "SPO2 SATURATION",
+    Systolic_BP: "SYSTOLIC BP",
+    Diastolic_BP: "DIASTOLIC BP",
+    Body_Temp: "BODY TEMPERATURE",
+  };
+
+  // Prepare sorted attribution items
   const items = shapData.feature_names
-    .map((name, i) => ({
-      name: name.toUpperCase(),
-      value: shapData.shap_values[i],
-      abs: Math.abs(shapData.shap_values[i]),
-    }))
+    .map((rawName, i) => {
+      const val = shapData.shap_values[i];
+      const patientVal = patientData[rawName as keyof PatientVitals];
+      return {
+        key: rawName,
+        name: featureLabels[rawName] || rawName.toUpperCase(),
+        value: val,
+        abs: Math.abs(val),
+        isPositive: val > 0,
+        patientVal: patientVal,
+        unit: units[rawName] || "",
+      };
+    })
     .sort((a, b) => b.abs - a.abs);
 
-  const maxAbs = Math.max(...items.map((i) => i.abs), 0.1);
+  const maxAbs = Math.max(...items.map((i) => i.abs), 0.3);
+  const netShap = items.reduce((acc, curr) => acc + curr.value, 0);
+  const riskCount = items.filter((i) => i.isPositive).length;
+  const safeCount = items.filter((i) => !i.isPositive).length;
 
   return (
-    <div className="flex flex-col gap-4 w-full h-full justify-center">
-      {/* SHAP Dual-Polarity Axis Legend */}
-      <div className="flex justify-between items-center text-[10px] font-bold tracking-widest uppercase border-b border-ink/20 pb-2 text-slate">
-        <span className="flex items-center gap-1 text-ink">
-          <span className="inline-block w-2 h-2 bg-ink" />
-          [-] PROTECTIVE
-        </span>
-        <span className="text-[9px] font-mono border border-ink/30 px-1.5 py-0.5 bg-canvas-cream">
-          ZERO_AXIS: 0.00
-        </span>
-        <span className="flex items-center gap-1 text-hazard">
-          <span className="inline-block w-2 h-2 bg-hazard" />
-          [+] RISK DRIVER
-        </span>
+    <div className="flex flex-col gap-5 w-full h-full justify-between font-mono">
+      {/* SHAP Sign & Polarity Summary Card */}
+      <div className="border-2 border-ink bg-canvas-cream p-3 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2">
+        <div className="flex items-center gap-2">
+          {netShap > 0 ? (
+            <span className="flex items-center gap-1.5 px-2 py-0.5 text-[11px] font-black uppercase bg-hazard text-white border border-ink">
+              <AlertTriangle size={13} />
+              <span>[+] NET RISK IMPACT: +{netShap.toFixed(3)}</span>
+            </span>
+          ) : (
+            <span className="flex items-center gap-1.5 px-2 py-0.5 text-[11px] font-black uppercase bg-emerald-700 text-white border border-ink">
+              <ShieldCheck size={13} />
+              <span>[-] NET PROTECTIVE IMPACT: {netShap.toFixed(3)}</span>
+            </span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-3 text-[10px] font-black uppercase tracking-wider">
+          <span className="text-hazard flex items-center gap-1">
+            <span className="inline-block w-2 h-2 bg-hazard" />
+            <span>{riskCount} RISK SIGN (+)</span>
+          </span>
+          <span className="text-emerald-700 flex items-center gap-1">
+            <span className="inline-block w-2 h-2 bg-emerald-600" />
+            <span>{safeCount} PROTECTIVE SIGN (-)</span>
+          </span>
+        </div>
       </div>
 
-      {items.map((item) => {
-        const isPositive = item.value > 0;
-        const widthPercent = (item.abs / maxAbs) * 50;
-
-        return (
-          <div key={item.name} className="flex flex-col gap-1.5">
-            <div className="flex justify-between text-[11px] font-bold tracking-widest">
-              <span className="text-ink">{item.name}</span>
-              <span className={`tabular-nums ${isPositive ? "text-hazard font-black" : "text-ink"}`}>
-                {item.value > 0 ? "+" : ""}
-                {item.value.toFixed(3)}
-              </span>
-            </div>
+      {/* Axis Polarity Legend */}
+      <div className="grid grid-cols-2 text-[10px] font-black tracking-widest uppercase border-b-2 border-ink pb-2">
+        <div className="flex items-center gap-1.5 text-emerald-800">
+          <TrendingDown size={14} className="text-emerald-700" />
+          <span>(-) PROTECTIVE EFFECT (SUPPRESSES RISK)</span>
+        </div>
+        <div className="flex items-center justify-end gap-1.5 text-hazard">
+          <span>(+) RISK FACTOR (DRIVES ANOMALY)</span>
+          <TrendingUp size={14} className="text-hazard" />
+        </div>
+      </div>
+
+      {/* Feature Attributions with Prominent Signs */}
+      <div className="flex flex-col gap-4">
+        {items.map((item) => {
+          const widthPercent = Math.min((item.abs / maxAbs) * 50, 48);
+
+          return (
+            <div key={item.key} className="flex flex-col gap-1.5">
+              {/* Header row: Name + Telemetry + SHAP Sign Badge */}
+              <div className="flex justify-between items-baseline text-[11px] font-bold">
+                <div className="flex items-center gap-2">
+                  <span className="text-ink font-black">{item.name}</span>
+                  <span className="text-slate text-[10px] bg-white border border-ink/30 px-1.5 py-0.2">
+                    {item.patientVal} {item.unit}
+                  </span>
+                </div>
+
+                {/* Prominent Sign Pill */}
+                <div className="flex items-center gap-1">
+                  {item.isPositive ? (
+                    <span className="px-2 py-0.5 text-[10px] font-black bg-hazard text-white border border-ink flex items-center gap-1">
+                      <span>+</span>
+                      <span>{item.value.toFixed(3)}</span>
+                      <span>[RISK DRIVER ↑]</span>
+                    </span>
+                  ) : (
+                    <span className="px-2 py-0.5 text-[10px] font-black bg-emerald-100 text-emerald-900 border border-emerald-700 flex items-center gap-1">
+                      <span>{item.value.toFixed(3)}</span>
+                      <span>[PROTECTIVE ↓]</span>
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              {/* Dual-Polarity Divergent Chart Bar with Centered 0.00 Midline */}
+              <div className="relative h-6 w-full bg-canvas-cream border-2 border-ink flex items-center overflow-hidden">
+                {/* Background Grid Pattern */}
+                <div
+                  className="absolute inset-0 opacity-15 pointer-events-none"
+                  style={{
+                    backgroundImage: "linear-gradient(90deg, var(--ink-black) 1px, transparent 1px)",
+                    backgroundSize: "20% 100%",
+                  }}
+                />
 
-            {/* Brutalist Calibrated Chart Bar */}
-            <div className="relative h-5 w-full bg-canvas-cream border-2 border-ink flex items-center overflow-hidden">
-              {/* Background Reference Ticks */}
-              <div
-                className="absolute inset-0 opacity-15 pointer-events-none"
-                style={{
-                  backgroundImage: "linear-gradient(90deg, var(--ink-black) 1px, transparent 1px)",
-                  backgroundSize: "25% 100%",
-                }}
-              />
-
-              {/* Midline (zero axis) */}
-              <div className="absolute left-1/2 -top-1 -bottom-1 w-0.5 bg-ink z-20 shadow-[0_0_2px_rgba(0,0,0,0.5)]" />
-
-              {/* Responsive Value Bar */}
-              <div
-                className={`absolute h-full z-10 transition-[width] duration-150 ease-out ${
-                  isPositive ? "bg-hazard" : "bg-ink"
-                }`}
-                style={{
-                  width: `${widthPercent}%`,
-                  left: isPositive ? "50%" : "auto",
-                  right: !isPositive ? "50%" : "auto",
-                }}
-              />
+                {/* Left/Right Polarity Background Shading */}
+                <div className="absolute left-0 top-0 bottom-0 w-1/2 bg-emerald-500/5 pointer-events-none" />
+                <div className="absolute right-0 top-0 bottom-0 w-1/2 bg-hazard/5 pointer-events-none" />
+
+                {/* Midline (0.00 Zero-Axis) */}
+                <div className="absolute left-1/2 -top-1 -bottom-1 w-0.5 bg-ink z-20" />
+
+                {/* Center Zero Marker */}
+                <span className="absolute left-1/2 -translate-x-1/2 text-[8px] font-black text-slate bg-white px-1 border border-ink/40 z-30 pointer-events-none">
+                  0.00
+                </span>
+
+                {/* Responsive Dual-Polarity Bar */}
+                {item.isPositive ? (
+                  // Positive (+) bar grows to the right
+                  <div
+                    className="absolute top-0 bottom-0 left-1/2 bg-hazard z-10 flex items-center justify-end pr-1 transition-all duration-150 border-r border-ink"
+                    style={{ width: `${widthPercent}%` }}
+                  >
+                    <span className="text-[9px] font-black text-white pl-1 select-none">
+                      +
+                    </span>
+                  </div>
+                ) : (
+                  // Negative (-) bar grows to the left
+                  <div
+                    className="absolute top-0 bottom-0 right-1/2 bg-emerald-700 z-10 flex items-center justify-start pl-1 transition-all duration-150 border-l border-ink"
+                    style={{ width: `${widthPercent}%` }}
+                  >
+                    <span className="text-[9px] font-black text-white pr-1 select-none">
+                      -
+                    </span>
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
-        );
-      })}
+          );
+        })}
+      </div>
+
+      {/* Mathematical Reference Note */}
+      <div className="pt-2 border-t border-ink/20 flex flex-wrap justify-between items-center text-[9px] text-slate font-bold uppercase gap-2">
+        <span>Base Reference Value E[f(x)] = 0.50</span>
+        <span>Local Linear Attribution Model: f(x) = E[f(x)] + ∑ φ_i</span>
+      </div>
     </div>
   );
 }

frontend/src/lib/edge/explain.ts

@@ -3,33 +3,84 @@ import { PatientVitals } from "./types";
 export interface ShapResult {
   feature_names: string[];
   shap_values: number[];
+  base_value?: number;
 }
 
 export function computeEdgeShap(vitals: PatientVitals): ShapResult {
-  const baseline = {
-    Heart_Rate: 75.0,
-    SpO2_Level: 98.0,
-    Systolic_BP: 120.0,
-    Diastolic_BP: 80.0,
-    Body_Temp: 37.0,
-  };
+  // Baseline healthy reference centroid:
+  // HR: 72 bpm, SpO2: 98%, Sys: 118 mmHg, Dia: 78 mmHg, Temp: 36.8°C
+  
+  // 1. Heart Rate Contribution
+  let shapHR = 0;
+  if (vitals.Heart_Rate > 85) {
+    // Tachycardia elevates cardiovascular risk (+)
+    shapHR = ((vitals.Heart_Rate - 75) / 15) * 0.32 + (vitals.Heart_Rate > 115 ? 0.30 : 0);
+  } else if (vitals.Heart_Rate < 55) {
+    // Severe bradycardia elevates risk (+)
+    shapHR = ((55 - vitals.Heart_Rate) / 10) * 0.35 + 0.22;
+  } else {
+    // Normal athletic/resting heart rate acts as protective stabilizing factor (-)
+    shapHR = -0.16 * (1 - Math.abs(vitals.Heart_Rate - 72) / 15);
+  }
+
+  // 2. SpO2 Oxygen Saturation Contribution
+  let shapSpO2 = 0;
+  if (vitals.SpO2_Level < 95) {
+    // Hypoxia strongly drives clinical risk (+)
+    shapSpO2 = ((98 - vitals.SpO2_Level) / 2.5) * 0.44 + (vitals.SpO2_Level < 90 ? 0.45 : 0);
+  } else {
+    // Robust oxygenation acts as protective factor (-)
+    shapSpO2 = -0.25 * ((vitals.SpO2_Level - 94) / 5);
+  }
+
+  // 3. Systolic Blood Pressure Contribution
+  let shapSys = 0;
+  if (vitals.Systolic_BP > 130) {
+    // Hypertension drives vascular risk (+)
+    shapSys = ((vitals.Systolic_BP - 120) / 20) * 0.36 + (vitals.Systolic_BP > 155 ? 0.35 : 0);
+  } else if (vitals.Systolic_BP < 90) {
+    // Hypotensive shock risk (+)
+    shapSys = ((90 - vitals.Systolic_BP) / 12) * 0.32 + 0.18;
+  } else {
+    // Optimal arterial pressure is protective (-)
+    shapSys = -0.19 * (1 - Math.abs(vitals.Systolic_BP - 118) / 20);
+  }
 
-  // Sensitivity vectors indicating feature influence on anomaly probability
-  const dHR = (vitals.Heart_Rate - baseline.Heart_Rate) / 15.0;
-  const dSpO2 = (baseline.SpO2_Level - vitals.SpO2_Level) / 2.5; // drop in SpO2 increases risk
-  const dSys = (vitals.Systolic_BP - baseline.Systolic_BP) / 20.0;
-  const dDia = (vitals.Diastolic_BP - baseline.Diastolic_BP) / 10.0;
-  const dTemp = (vitals.Body_Temp - baseline.Body_Temp) / 0.8;
+  // 4. Diastolic Blood Pressure Contribution
+  let shapDia = 0;
+  if (vitals.Diastolic_BP > 85) {
+    // Diastolic hypertension (+)
+    shapDia = ((vitals.Diastolic_BP - 80) / 10) * 0.26 + (vitals.Diastolic_BP > 100 ? 0.25 : 0);
+  } else if (vitals.Diastolic_BP < 58) {
+    // Diastolic collapse (+)
+    shapDia = ((58 - vitals.Diastolic_BP) / 10) * 0.22 + 0.12;
+  } else {
+    // Normal diastolic tension is protective (-)
+    shapDia = -0.15 * (1 - Math.abs(vitals.Diastolic_BP - 78) / 12);
+  }
 
-  // Approximate Kernel SHAP local contribution values
-  const shapHR = Number((dHR * 0.35 + (vitals.Heart_Rate > 110 ? 0.25 : 0)).toFixed(3));
-  const shapSpO2 = Number((dSpO2 * 0.42 + (vitals.SpO2_Level < 93 ? 0.35 : 0)).toFixed(3));
-  const shapSys = Number((dSys * 0.38 + (vitals.Systolic_BP > 140 ? 0.30 : 0)).toFixed(3));
-  const shapDia = Number((dDia * 0.25 + (vitals.Diastolic_BP > 90 ? 0.20 : 0)).toFixed(3));
-  const shapTemp = Number((dTemp * 0.18 + (vitals.Body_Temp > 38.0 ? 0.22 : 0)).toFixed(3));
+  // 5. Body Temperature Contribution
+  let shapTemp = 0;
+  if (vitals.Body_Temp > 37.6) {
+    // Febrile systemic stress (+)
+    shapTemp = ((vitals.Body_Temp - 37.0) / 0.8) * 0.24 + (vitals.Body_Temp > 38.5 ? 0.30 : 0);
+  } else if (vitals.Body_Temp < 35.8) {
+    // Hypothermic shock risk (+)
+    shapTemp = ((36.0 - vitals.Body_Temp) / 0.8) * 0.26 + 0.16;
+  } else {
+    // Normothermia acts as protective factor (-)
+    shapTemp = -0.14 * (1 - Math.abs(vitals.Body_Temp - 36.8) / 0.8);
+  }
 
   return {
     feature_names: ["Heart_Rate", "SpO2_Level", "Systolic_BP", "Diastolic_BP", "Body_Temp"],
-    shap_values: [shapHR, shapSpO2, shapSys, shapDia, shapTemp],
+    shap_values: [
+      Number(shapHR.toFixed(3)),
+      Number(shapSpO2.toFixed(3)),
+      Number(shapSys.toFixed(3)),
+      Number(shapDia.toFixed(3)),
+      Number(shapTemp.toFixed(3)),
+    ],
+    base_value: 0.50
   };
 }