🧠 ScanSense

Have you ever wondered what your MRI report actually says? What does “hyperintense T2-weighted signal” even mean? Why does your report sound scarier than it probably is?

Not anymore.

ScanSense is an AI-powered web application designed to help non-medical users understand MRI scans and MRI reports (including multi-page PDFs). It translates dense radiology language into clear, human-readable explanations, visually highlights important findings directly on the scans or reports, and helps patients prepare informed questions for their doctors.

⚠️ Medical Disclaimer This tool is for educational and informational purposes only. It does not provide medical advice, diagnosis, or treatment. Always consult a licensed healthcare professional.

Left: MRI Upload Screen Light mode • Right: MRI Upload Screen Dark mode

---

✨ Features

📄 MRI Reports & Scans (Full Coverage)

• Supports MRI images and multi-page PDF MRI reports
• Reads all pages in a document, including critical sections like Impression, Conclusion, and Summary
• Treats multi-page PDFs as a single continuous report for proper context
• Intelligently ignores non-medical pages (e.g. billing or insurance)

🎯 Intelligent Visual Highlighting

• Text-based MRI reports (PDFs) → soft, semi-transparent highlighter overlays

• MRI scans (images) → precise bounding-box highlights

• Severity-based color coding:

  • 🔴 Critical
  • 🟠 Concern
  • 🟢 Normal
  • 🔵 Informational

• Highlights scale correctly on desktop, tablet, and mobile screens

🧩 Multi-Page & Multi-Image Analysis

• Analyze multiple pages simultaneously

• Findings are:

  • Grouped by image / page
  • Sorted by medical severity

• Each finding is explicitly linked to its source page

🧠 Plain-English AI Insights

• Simplified explanations for non-technical users
• Automatically prioritizes Impression sections
• Presents the doctor’s “bottom line” clearly and first

🧍 Anatomical Context Visualization

• Interactive human body model
• Highlights the anatomical region corresponding to the MRI
• Helps users understand where the scan is focused

💬 Ask-Anything AI Chat

• Ask follow-up questions about the uploaded MRI
• Context-aware responses grounded in the analyzed scans/reports
• Clean, readable chat layout with proper spacing

🩺 Doctor Visit Preparation

• Auto-generated questions to ask your doctor
• Tailored to the actual findings in the MRI
• Designed to improve patient–doctor conversations

🌍 Accessibility & User Experience

• 🌙 Dark Mode
• 🌐 Multi-language support
• 🔊 Text-to-speech for summaries
• 🖨️ Print-friendly report view
• 📱 Fully responsive design (mobile-first)

⏳ Polished Loading Experience

• Skeleton loaders for image previews
• Progress bars for PDF processing and AI analysis

🔒 Strict MRI-Only Scope

• Accepts only MRI scans and MRI reports
• Automatically rejects CT scans, X-rays, or unrelated images
• Prevents misuse and improves analysis reliability

Left: Sample MRI analysis (Light mode) • Right: Sample MRI analysis with AI assistant (Dark mode)

---

🛠️ Tech Stack

Frontend

• React + TypeScript
• Tailwind CSS (light & dark mode)
• SVG-based overlays for precise highlighting

AI & Document Processing

• Google Gemini (Vision + Structured JSON)
• PDF.js for multi-page PDF rendering

UX & Polish

• Glassmorphism-inspired UI
• Skeleton loaders & animated progress bars
• Print-specific CSS for real-world doctor visits

---

📂 Project Structure

src/
├── components/
│   ├── AnalysisOverlay.tsx   # Responsive highlight overlays
│   ├── Report.tsx            # Findings, summaries, doctor questions
│   ├── ChatInterface.tsx     # Ask-anything AI chat
│   ├── Dropzone.tsx          # Upload + PDF page selection
│   ├── BodyModel.tsx         # Anatomical visualization
│   └── Disclaimer.tsx
│
├── services/
│   └── gemini.ts             # AI prompt & schema enforcement
│
├── types.ts                  # Strongly typed AI responses
├── App.tsx                   # App layout, theming, global state
└── index.html                # Print & theme support

---

🚀 Getting Started

1. Install Dependencies

npm install

2. Environment Variables

Create a .env file:

VITE_GEMINI_API_KEY=your_api_key_here

3. Run Locally

npm run dev

---

🧪 Supported Inputs

✅ MRI scans (PNG, JPG) ✅ MRI reports (PDF, multi-page)

❌ CT scans ❌ X-rays ❌ Random photos or documents

---

🧠 Future Improvements

• Timeline comparison across multiple MRI studies
• Secure user accounts & report history
• Doctor-facing clinical view
• Export annotated reports as PDFs
• HIPAA-compliant backend integration

---

⭐ If you find this project useful, consider starring the repository or contributing!