NeuroScan AI: Technical Architecture and Practice of an Open-Source AI Brain Tumor Detection Platform

NeuroScan AI is an open-source medical AI platform based on React, Supabase, and Google Gemini Vision, enabling automatic detection, classification, grading of brain tumors from MRI images, 3D visualization, and PDF report generation, demonstrating the application of modern web technologies and multimodal AI in the field of medical diagnosis. The original author is dineshit27, and the project is open-sourced on GitHub (link: https://github.com/dineshit27/NeuroScan-AI), released on June 9, 2026.

Brain tumors are one of the diseases that seriously threaten human health worldwide. Early detection and accurate diagnosis are crucial for treatment outcomes. Traditional MRI image diagnosis relies heavily on the experience and professional judgment of radiologists, while in areas with scarce medical resources, the shortage of professionals often leads to delayed diagnosis or misdiagnosis.

The NeuroScan AI project emerged as a solution. It is an open-source AI-driven medical web platform aimed at assisting doctors in early detection and analysis of brain tumors through multimodal artificial intelligence technology. This project not only demonstrates the combination of modern frontend engineering, serverless backend architecture, and advanced AI models but also provides a complete reference implementation for the development of medical AI applications.

Intelligent Tumor Detection and Classification

Based on Google Gemini Vision AI, it实现:

• Tumor existence detection
• Type identification (glioma, meningioma, pituitary tumor, etc.)
• Severity assessment

3D Visualization and Image Enhancement

Using Three.js and React Three Fiber to实现 3D rendering of MRI images and tumor region overlay, with WebGL supporting smooth operation in browsers.

Personalized Diet Recommendations and Report System

• AI-generated personalized diet advice
• Automatic PDF report generation (including charts and summaries), supporting email sharing and history management

Modern User Experience

React18+TypeScript+Vite+Tailwind CSS+shadcn/ui, supporting light/dark theme switching and responsive layout.

Frontend Architecture

React18+TypeScript+Vite, components using Radix UI+Tailwind CSS, state management with TanStack Query, forms with React Hook Form+Zod, routing with React Router, charts with Recharts.

Backend and Data Layer

Supabase (PostgreSQL alternative):

• Authentication: Supabase Auth
• Database: PostgreSQL for storing user data and scan history
• Edge Functions: Deno runtime for processing AI tasks
• Storage: Supabase Storage for managing MRI files

AI Inference Architecture

Through two Supabase Edge Functions:

1. analyze-brain-mri: Calls Google Gemini Vision API for detection and classification
2. segment-brain-tumor: Tumor region segmentation (supports 3D visualization)

Report Generation

html2canvas (converts React components to Canvas) + jsPDF (converts Canvas to PDF), supporting download and email sharing.

Data Privacy and Security

• Supabase Row-Level Security (RLS) for access control
• Images and results are only visible to authorized users
• Secure links for email sharing

AI Model Accuracy and Interpretability

Multimodal models provide diagnostic results + visualized AI attention areas to help doctors understand the basis for decision-making.

Balance Between User Experience and Professionalism

Clear workflow, friendly design, and detailed explanations to lower the threshold for non-professional users while retaining professional features.

• Supabase vs Self-built Backend: Out-of-the-box authentication, database, and storage reduce development effort, suitable for open-source projects to quickly validate ideas.
• Google Gemini Vision: Multimodal large model with strong image understanding generalization ability; zero-shot learning is suitable for diverse MRI data.
• React Three Fiber vs Traditional 3D Libraries: Combines React's declarative programming, lowers the learning curve, and makes code organization more intuitive.

Current Limitations

1. Prototype stage; more considerations are needed for production deployment
2. Limited scale and diversity of training data
3. Unclear regulatory compliance status

Improvement Directions

1. Fine-tune models with more annotated data to improve detection accuracy for specific tumors
2. Explore federated learning to utilize multi-center data while protecting privacy
3. Develop native mobile apps to support image upload via phones
4. Add multilingual interfaces to expand coverage

Insights for Developers

• Pragmatic tech stack selection: Mature React ecosystem + Supabase, suitable for long-term maintenance
• Value of open-source collaboration: Cross-disciplinary cooperation (developers, doctors, researchers)
• UX cannot be ignored: Good experience improves doctors' work efficiency

Conclusion

NeuroScan AI is a typical example of AI in medical diagnosis, integrating web technologies, cloud computing, and multimodal AI. Although it is a prototype, its architecture and design provide a reference. Future AI-assisted diagnostic tools will play a greater role in improving efficiency, reducing costs, and improving prognosis, making it an open-source project worth studying for medical AI developers.