CardioVisionAI

CardioVision AI: Bridging predictive health metrics and 3D organ-level vulnerability mapping

Comment

Cardiovascular disease remains the leading cause of mortality worldwide, yet most digital screening tools present risk as an opaque percentage on a screen. For patients and healthcare providers, an abstract score like "82.5% Model Probability" lacks spatial context and tangible urgency. We asked ourselves: What if an AI didn’t just output a statistical number, but visually demonstrated what that risk means directly on the human heart? CardioVision AI was conceived to merge predictive machine learning, explainable AI (XAI), and interactive 3D anatomical visualization. By transforming tabular health vitals into an interactive, organ-level stress map, we aim to make cardiac risk assessments transparent, educational, and clinically intuitive. What It Does CardioVision AI is an interactive clinical intelligence interface designed to assess and visualize cardiovascular vulnerability:

  • Multimodal Patient Assessment: Collects demographic data, physiological vitals, and lifestyle metrics—including age, systolic/diastolic blood pressure, cholesterol levels, glucose, smoking status, alcohol consumption, and physical activity—or loads pre-configured clinical benchmark profiles (Low, Moderate, and High Risk).
  • Predictive AI Scoring: Computes an aggregated AI Risk Index (0–100) alongside a calibrated classification probability for cardiovascular disease (CVD) detection.
  • Explainable Feature Attribution: Unpacks the "black box" by computing real-time directional impacts, showing which physiological factors push risk upward (e.g., elevated Systolic BP, Age) and which factors provide protective baseline contributions (e.g., optimal Weight, controlled Cholesterol).
  • 3D Cardiovascular Vulnerability Mapping: Renders a fully interactive 3D heart with 360^\circ rotation, anatomic leader lines, and targeted camera presets:
    • Front View: Left Anterior Descending artery (LAD) and anterior ventricles.
    • Left Side View: Left Circumflex artery (LCx).
    • Right Side View: Right Coronary Artery (RCA).
    • Posterior View: Pulmonary veins and back cardiac topography.
  • Pathophysiological Stress Mapping: Translates statistical anomalies directly into localized structural vulnerabilities:
    • \text{Systolic BP} \ge 140\text{ mmHg} \implies Highlights Left Ventricle & Aorta (pathological afterload and hypertrophy risk).
    • \text{Cholesterol Level } \in {2, 3} \implies Highlights LAD & RCA Coronary Arteries (accelerated atheroma progression).
    • Widened Pulse Pressure (PP = SBP - DBP \ge 60\text{ mmHg}) \implies Highlights Aortic Arch (arterial stiffness and compliance decay). How We Built It CardioVision AI pairs a lightweight machine learning backend with modern client-side WebGL rendering:
  • Predictive ML & Decision Logic: Built with Python, NumPy, and Scikit-learn. The predictive engine processes patient biomarkers to estimate disease likelihood:

The model probability is normalized into an intuitive scalar index:

Feature attribution scores are computed to determine the magnitude and sign (risk elevation vs. risk reduction) of each clinical indicator.

  • 3D Anatomy & Shader Visualization: Implemented using Three.js / WebGL. We mapped biological cardiac structures—including the pulmonary trunk, auricles, LAD, RCA, and ventricles—to coordinate anchors that respond dynamically to clinical threshold violations.
  • Frontend & Architecture: Built with HTML5, CSS3, and JavaScript, designed to operate smoothly across mobile and desktop viewports with zero client-side installation overhead.
  • Backend & Hosting: Served via a lightweight Python web service hosted on PythonAnywhere. Challenges We Faced
  • Bridging Statistical Weights to Anatomical Geometry: Connecting abstract feature vectors (such as pulse pressure and lipid thresholds) to localized 3D mesh points required strict pathophysiological validation rather than arbitrary visual effects.
  • Mobile WebGL Optimization: Delivering responsive 60 FPS 3D model rotation and smooth leader-line pointer alignment on constrained mobile browsers without degrading texture fidelity.
  • Designing for Clinical Clarity: Creating an informative risk-factor breakdown that non-specialists can understand while preserving technical rigor and maintaining responsible AI disclaimers. What We Learned
  • Visual Explainability Matters: Presenting risk through dynamic anatomical visualization shifts the conversation from passive data consumption to active visual understanding.
  • Directional Context is Crucial: Patients and clinicians need to know not just that their risk is high, but which specific variables are driving that change and what anatomical structures are bearing that load.
  • Multimodal Synergy: Combining tabular classification models with real-time 3D graphics creates a much more engaging, trustworthy decision-support interface than traditional dashboard charts.

Built With

Share this project:

Updates