CardioVision-AI

🫀 CardioVision AI — Real-time biometric health dashboard powered by interactive 3D WebGL heart visualization & AI risk prognosis ⚡🩺📊

Comment

Inspiration

Cardiovascular diseases (CVDs) remain the leading cause of mortality globally, yet clinical risk communication often relies on static risk percentages, dense numeric charts, and opaque diagnostic terminology that alienate patients. Traditional diagnostic workflows like coronary CT angiography (CTA) and invasive catheterization are critical, but patients and medical trainees rarely have intuitive ways to visualize where and why specific coronary vessels face occlusion risks. Inspired by the need for transparent, patient-centric healthcare, we envisioned CardioVision-AI: an interactive decision-support and educational platform that bridges the gap between predictive machine learning, explainable AI, and spatial anatomical visualization.

What it does

CardioVision-AI provides an end-to-end interactive dashboard for cardiovascular risk assessment and anatomical exploration:

  1. Interactive 3D Coronary Anatomy: Delivers a real-time WebGL/Three.js 3D heart and vascular viewport where users can inspect individual primary coronary arteries—including the Left Anterior Descending (LAD), Left Circumflex (LCX), and Right Coronary Artery (RCA)—alongside thoracic structures.

  2. Multitarget Clinical Risk Prediction: Evaluates a patient's biometric inputs (blood pressure, heart rate, glucose, SpO₂, lifestyle markers) to simultaneously predict overall coronary artery disease (CAD) risk and estimate specific vessel-level stenosis likelihoods.

  3. Explainable AI (Shapley Values): Employs permutation-sampled Shapley (SHAP-style) attribution to break down positive and negative risk contributors into clear, additive probability points, ensuring clinical transparent reasoning over black-box scoring.

  4. Cohort & Telemetry Context: Benchmarks individual risk distributions against synthetic demographic cohorts and provides a telemetry-style interface for wearable and biometric health monitoring.

How we built it

  1. Frontend Visualization: Built using native Python 3.14, HTML5, CSS3, and modern JavaScript (ES Modules). We leveraged Three.js to procedurally construct the coronary mesh trees, apply dynamic shader risk-color scaling, and manage camera orbits, vessel picking, and zoom controls.

  2. Zero-Dependency Asset Serving: Configured local Three.js builds via JavaScript import maps directly within the static frontend to eliminate external CDN dependencies and ensure zero-latency local runs.

  3. Backend Architecture & Inference Engine: Developed with Node.js and Express (server.js, src/app.js) to handle API routing, clinical feature schema validation (schema.js), baseline cohort generation (cohort.js), and predictive calculations (model.js) in Python Files for backend process strucuture ├── app.py # FastAPI entrypoint, CORS & routes (server.js / src/app.js) ├── schema.py # Clinical feature validation schemas (src/schema.js) ├── cohort.py # Baseline distribution & percentile logic (src/cohort.js) ├── model.py # Multi-vessel risk predictor & Shapley engine (src/model.js) └── requirements.txt

  4. Explainability Pipeline: Implemented an in-engine Shapley calculation layer in src/model.js that samples permutations across clinical covariates to generate exact additive feature attributions for risk scores.

  5. Deployment & Cloud: Configured seamless serverless routing on Vercel via vercel.json and containerized the service using Docker/Google Cloud Run readiness (0.0.0.0:${PORT:-3000}).

Challenges we ran into

  1. Procedural 3D Vascular Modeling: Procedurally rendering biologically plausible, curving coronary paths (LAD, LCX, RCA) and mapping risk heatmaps dynamically onto 3D tube geometries without performance drops required substantial fine-tuning of Three.js geometry buffers and raycasting.

  2. Computing Shapley Explanations in Real Time: Exact Shapley calculations scale exponentially with feature count. We had to optimize permutation sampling in pure JavaScript to deliver instant waterfall attribution feedback on the frontend without blocking the Express event loop.

  3. Zero-CDN Architecture: Ensuring all Three.js modules and mathematical utilities operated completely locally without CDN reliance required resolving strict browser module resolution rules and import map boundaries.

Accomplishments that we're proud of

  1. Built a fully interactive 3D WebGL anatomical viewport that runs smoothly in browser environments without demanding heavy GPU overhead.

  2. Delivered transparent, explainable machine-learning insights directly inside the browser, transforming abstract percentages into actionable, visual factor attributions.

  3. Created an integrated platform combining real-time biometric telemetry tracking, appointment workflows, and multi-vessel risk mapping into a cohesive clinical design system.

  4. Achieved zero external runtime dependencies on the frontend for resilient, offline-ready decision support.

What we learned

  1. Deepened our domain understanding of coronary hemodynamics, coronary artery disease progression, and the clinical weight of individual biometric parameters.

  2. Gained hands-on experience optimizing WebGL matrix transformations, scene graph hierarchies, and raycasting within complex organic meshes.

  3. Discovered practical algorithmic strategies for balancing Explainable AI mathematical rigor with interactive, sub-second web responsiveness.

What's next for CardioVision-AI

  1. DICOM / CT Angiography Mesh Ingestion: Allowing clinicians to upload patient-specific DICOM scans to generate custom patient-tailored 3D coronary geometries rather than procedural meshes.

  2. Real-Time Wearable Bluetooth API Integration: Streaming continuous live telemetry directly from BLE-enabled smartwatches and ECG patches for dynamic, rolling CAD risk alerts.

  3. Expanded Hemodynamic Simulation: Implementing real-time computational fluid dynamics (CFD) approximations to visualize fractional flow reserve (FFR) and wall shear stress across stenosed arteries.

  4. Federated Clinical Training: Expanding the underlying risk models with federated learning architectures across diverse institutional healthcare datasets to enhance predictive generalization while preserving patient privacy.

Built With

Share this project:

Updates

Submission history