🫀 CardioLens: Project Story
"Interactive 3D cardiac risk mapping with explainable, uncertainty-aware AI."
💡 Inspiration
Cardiovascular diseases (CVDs) remain the leading cause of global mortality. While modern machine learning algorithms achieve high predictive accuracy in identifying Coronary Artery Disease (CAD), traditional diagnostic outputs are often "black boxes"-delivering raw probability percentages without intuitive context for clinicians or patients. We were inspired to build CardioLens to bridge this gap between complex, multimodal machine learning models and clinical interpretability. By combining explainable AI (XAI), uncertainty quantification, and an interactive, web-based 3D anatomical viewer, CardioLens translates quantitative risk estimates directly onto a patient's coronary anatomy (LAD, LCX, RCA), making AI predictions visible, dynamic, and actionable.
🛠️ How We Built It
CardioLens was developed as a full-stack, multimodal clinical decision-support system featuring: Backend & ML Pipeline: Built using FastAPI, Joblib, and Python. We integrated group-based ensemble models trained on clinical history, vitals, baseline ECGs, blood panels, and echocardiograms. Uncertainty & Explainability: Confidence Intervals: Quantified prediction uncertainty with $95\%$ confidence bounds computed using non-parametric percentile bootstrap intervals:
〖"CI" 〗_(95%)=[q_0.025 (θ ˆ^* ), q_0.975 (θ ˆ^* )]
Feature Impact (SHAP): Local feature attribution computed via SHAP (SHapley Additive exPlanations) based on cooperative game theory:
ϕi (v)=∑(S⊆N∖{i})▒(|S|!(|N|-|S|-1)!)/(|N|!) [v(S∪{i})-v(S)]
Interactive 3D Visualization: Developed with React, Three.js, and React Three Fiber (@react-three/drei). Features custom spline curves snapping to heart geometry, real-time particle blood flow shaders, camera fly-to transitions, anatomical pin labels, and dynamic hover tooltips.
Cloud & CI/CD: Hosted on Render (FastAPI backend) and modern frontend tooling (Vite, React), version-controlled on GitHub.
📚 What We Learned
- Spatial Representation Enhances Interpretability: Mapping numerical risk scores onto a 3D physical anatomical model radically improves comprehension compared to isolated static charts.
- Uncertainty is Mandatory in Healthcare: High point-estimate predictions without confidence bounds ($95\%$ CIs) can lead to overconfidence in marginal clinical cases.
- Performance Optimization in 3D Web Graphics: Managing geometry frame rates ($60\text{ FPS}$) alongside complex React state hooks requires careful use of
useFrame, instanced meshes, and object disposal.
🚧 Challenges We Faced
Coronary Artery Geometry Snapping: Curve generation for the Left Anterior Descending (LAD), Left Circumflex (LCX), and Right Coronary Artery (RCA) required non-trivial surface raycasting and distance-based snapping onto the underlying heart body mesh. Real-time Instanced Particle Shaders: Animating blood flow particles along dynamic 3D Bezier curves without causing frame drops or WebGL crashes. Handling Multimodal Missingness: Designing a flexible backend architecture capable of handling partial diagnostic test inputs (e.g., baseline vitals only vs. full lab and echo panels) while dynamically calculating the "Next Best Diagnostic Test." 🚀 What's Next for CardioLens
CT/MRI Integration: Supporting patient-specific 3D mesh reconstruction directly from DICOM medical imaging scans. EHR Integration: Connecting seamlessly with FHIR/HL7 standards for real-time electronic health record workflows.
Log in or sign up for Devpost to join the conversation.