TumorClassifier-RAW-vs-DIP

Brain Tumor Detection: Comparing RAW vs Digital Image Processing (DIP) Pipelines

A comprehensive full-stack machine learning application that compares the effectiveness of RAW and DIP preprocessing pipelines for brain tumor classification using MRI scans. Built with React, TypeScript, and Python FastAPI.

🔗 Quick Links

📑 Table of Contents

🚀 Quick Start
📖 Abstract
✨ Key Highlights
About the Project
🏗️ Architecture
✨ Features
🛠 Tech Stack
📦 Dependencies & Packages
🚀 Installation
⚡ Usage
🤖 Model Training & Performance
🚀 Deployment
📸 Screenshots & Visualizations
🔬 Research & Clinical Context
📂 Folder Structure
🤝 Contributing
📜 License
🛡 Security
📏 Code of Conduct

🚀 Quick Start

For Users (No Installation)

Try the live demo: https://tumor-classifier-raw-vs-dip.vercel.app

Open the web application
Upload a brain MRI scan (JPG/PNG)
Click "Analyze" to get instant predictions
View side-by-side comparison of RAW vs DIP pipelines

For Developers (3 Steps)

# 1. Clone and install
git clone https://github.com/H0NEYP0T-466/TumorClassifier-RAW-vs-DIP.git
cd TumorClassifier-RAW-vs-DIP
npm install

# 2. Start backend
cd backend
pip install -r requirements.txt
python -m App.main

# 3. Start frontend (new terminal)
cd ..
npm run dev
# Open http://localhost:5173

📖 Abstract

TumorClassifier-RAW-vs-DIP is an advanced medical imaging platform that investigates the impact of preprocessing on brain tumor classification accuracy. This research-oriented application compares two distinct pipelines:

RAW Pipeline:

Minimal preprocessing (grayscale conversion only)
Direct feature extraction from MRI scans
Linear SVM classification
Baseline performance metrics

DIP (Digital Image Processing) Pipeline:

Advanced preprocessing: CLAHE (Contrast Limited Adaptive Histogram Equalization)
Gaussian blur for noise reduction
Morphological operations for feature enhancement
PCA dimensionality reduction
Linear SVM classification with optimized features

Research Question

Does sophisticated image preprocessing improve brain tumor classification accuracy, or is raw data sufficient?

The platform provides a side-by-side comparison enabling researchers and practitioners to evaluate the cost-benefit tradeoff between computational complexity and classification performance.

Clinical Relevance

Early Detection: Fast, automated screening of brain MRI scans
Decision Support: Assists radiologists with preliminary tumor detection
Accessibility: Web-based interface requires no specialized software
Transparency: Visual comparison of preprocessing steps builds trust

⚠️ Important: This is a research/educational tool. Clinical use requires regulatory approval and medical expert validation.

✨ Key Highlights

🔬 Dual-Pipeline Architecture - Compare RAW vs DIP preprocessing side-by-side
🧠 Brain Tumor Classification - Binary classification (tumor vs no tumor)
⚡ Linear SVM Classifier - Fast, interpretable machine learning model
📊 Real-time Predictions - Upload MRI, get instant results
🖼️ Preprocessing Visualization - Step-by-step DIP pipeline visualization
📈 Performance Metrics - Accuracy, precision, recall, F1-score comparisons
🌐 Modern Web Interface - React 19 + TypeScript + TailwindCSS v4
🚀 Production-Ready API - FastAPI backend with OpenAPI documentation
🔧 Modular Design - Easy to extend with new preprocessing techniques
📦 Deployable - Vercel-ready frontend, scalable backend

About the Project

TumorClassifier-RAW-vs-DIP is an advanced medical imaging application designed to classify brain MRI scans as either containing a tumor or being tumor-free. The project implements and compares two distinct preprocessing approaches:

RAW Pipeline: Minimal preprocessing - direct classification on grayscale MRI images
DIP Pipeline: Advanced Digital Image Processing with CLAHE, Gaussian blur, and morphological operations

The application features a modern React frontend with real-time prediction capabilities and a high-performance FastAPI backend powered by Support Vector Machine (SVM) classifiers.

🎯 Key Objectives

Compare effectiveness of RAW vs DIP preprocessing for medical image classification
Provide an intuitive web interface for real-time brain tumor detection
Demonstrate production-ready ML deployment with FastAPI
Visualize preprocessing steps and model predictions side-by-side

🏗️ Architecture

System Overview

┌──────────────────────────────────────────────────────────┐
│              Frontend (React + TypeScript)               │
│  ┌────────────┐ ┌────────────┐ ┌───────────────────┐    │
│  │  Landing   │ │   Upload   │ │    Results        │    │
│  │    Page    │ │   Image    │ │  Comparison       │    │
│  └────────────┘ └────────────┘ └───────────────────┘    │
│        │              │                  │               │
│        └──────────────┴──────────────────┘               │
│                       │                                  │
│              ┌────────▼────────┐                         │
│              │   API Client     │                         │
│              └────────┬────────┘                         │
└───────────────────────┼──────────────────────────────────┘
                        │ HTTP/REST
┌───────────────────────▼──────────────────────────────────┐
│              Backend (FastAPI + Python)                  │
│  ┌─────────────────────────────────────────────────┐     │
│  │           API Routes (main.py)                  │     │
│  │  • /health - Health check                       │     │
│  │  • /api/v1/predict - Single model prediction    │     │
│  │  • /api/v1/predict/compare - Dual comparison   │     │
│  └──────────────────┬──────────────────────────────┘     │
│                     │                                    │
│  ┌──────────────────▼──────────────────────────────┐     │
│  │         Preprocessing Pipeline                  │     │
│  │  ┌──────────┐        ┌──────────────┐          │     │
│  │  │   RAW    │        │     DIP      │          │     │
│  │  │ Pipeline │        │   Pipeline   │          │     │
│  │  └──────────┘        └──────────────┘          │     │
│  │      ↓                       ↓                  │     │
│  │  Grayscale        CLAHE + Gaussian +           │     │
│  │   Only           Morphology + PCA              │     │
│  └──────────────────┬──────────────────────────────┘     │
│                     │                                    │
│  ┌──────────────────▼──────────────────────────────┐     │
│  │            SVM Classifiers                      │     │
│  │  ┌──────────────┐  ┌──────────────┐            │     │
│  │  │  RAW SVM     │  │   DIP SVM    │            │     │
│  │  │   Model      │  │    Model     │            │     │
│  │  └──────────────┘  └──────────────┘            │     │
│  └──────────────────┬──────────────────────────────┘     │
│                     │                                    │
│  ┌──────────────────▼──────────────────────────────┐     │
│  │          Prediction Results                     │     │
│  │  • Class: Tumor / No Tumor                      │     │
│  │  • Confidence Score                             │     │
│  │  • Preprocessing Steps (DIP)                    │     │
│  │  • Performance Metrics                          │     │
│  └─────────────────────────────────────────────────┘     │
└──────────────────────────────────────────────────────────┘

Data Flow

Image Upload: User uploads brain MRI scan (JPG/PNG)
Preprocessing:
- RAW: Convert to grayscale → Extract features → Predict
- DIP: Grayscale → CLAHE → Gaussian blur → Morphology → PCA → Predict
Classification: Both SVMs predict tumor presence independently
Results: Side-by-side comparison with confidence scores and preprocessing visualization

Pipeline Comparison

Stage	RAW Pipeline	DIP Pipeline
1. Grayscale	✅ Convert to grayscale	✅ Convert to grayscale
2. CLAHE	❌ Skipped	✅ Contrast enhancement
3. Gaussian Blur	❌ Skipped	✅ Noise reduction
4. Morphology	❌ Skipped	✅ Feature enhancement
5. PCA	❌ Skipped	✅ Dimensionality reduction
6. Classification	✅ Linear SVM	✅ Linear SVM
Complexity	🟢 Low	🟡 Medium
Speed	🟢 Fast (~50ms)	🟡 Moderate (~150ms)
Accuracy	📊 Baseline	📊 Enhanced

✨ Features

🔬 Core Functionality

Dual-Model Architecture: Compare predictions from both RAW and DIP pipelines simultaneously
Real-Time Prediction: Upload MRI scans and get instant tumor classification results
Preprocessing Visualization: View step-by-step image transformations in the DIP pipeline
Model Performance Metrics: Access detailed accuracy, precision, and recall statistics

💻 Frontend

Modern, responsive UI built with React 19 and TypeScript
TailwindCSS v4 for sleek, professional styling
Real-time image upload and preview
Side-by-side model comparison view
Interactive preprocessing step visualization

🔧 Backend

RESTful API built with FastAPI
Dual SVM model architecture (RAW + DIP)
Advanced image preprocessing pipeline (CLAHE, Gaussian blur, morphological operations)
PCA dimensionality reduction for optimal performance
Comprehensive logging and error handling
CORS-enabled for seamless frontend integration

🛡 Production-Ready

Type-safe TypeScript implementation
Comprehensive error handling and validation
Health check and status monitoring endpoints
Structured logging for debugging and monitoring
Scalable architecture for future enhancements

🛠 Tech Stack

Languages

Frameworks & Libraries

DevOps / CI / Tools

📦 Dependencies & Packages

Frontend Dependencies

Runtime Dependencies

- Vite plugin for TailwindCSS v4
- Beautiful & consistent icon toolkit
- JavaScript library for building user interfaces
- React package for working with the DOM
- Utility-first CSS framework

Dev Dependencies

- ESLint JavaScript rules
- TypeScript definitions for Node.js
- TypeScript definitions for React
- TypeScript definitions for React DOM
- Official React plugin for Vite
- Pluggable linting utility for JavaScript and TypeScript
- ESLint rules for React Hooks
- ESLint plugin for React Fast Refresh
- Global identifiers from different JavaScript environments
- TypeScript language and compiler
- Tooling for TypeScript with ESLint
- Next generation frontend build tool

Backend Dependencies

Runtime Dependencies

- Fundamental package for scientific computing
- Machine learning library for Python
- Lightweight pipelining and caching for Python
- Computer vision and image processing library
- Modern, high-performance web framework for APIs
- Lightning-fast ASGI server
- Multipart form data parser
- Python logging made simple
- Backported and experimental type hints

🚀 Installation

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18.0.0 or higher) - Download
Python (v3.8 or higher) - Download
npm or yarn - Comes with Node.js
Git - Download

Setup Steps

Clone the repository

git clone https://github.com/H0NEYP0T-466/TumorClassifier-RAW-vs-DIP.git
cd TumorClassifier-RAW-vs-DIP

Install Frontend Dependencies
```
npm install
# or
yarn install
```

Install Backend Dependencies

cd backend
pip install -r requirements.txt
# or using a virtual environment (recommended)
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install -r requirements.txt

Verify Model Files

Ensure the pre-trained models exist in the models/ directory:
- raw_svm_model.pkl
- dip_svm_model.pkl
- raw_metrics.pkl
- dip_metrics.pkl
If models are missing, you'll need to train them first (see Usage section).

⚡ Usage

Running the Application

1. Start the Backend Server

cd backend
python -m App.main

# Or using uvicorn directly:
uvicorn App.main:app --reload --host 0.0.0.0 --port 8000

The API will be available at: http://localhost:8000

API Documentation:

Swagger UI: http://localhost:8000/docs
ReDoc: http://localhost:8000/redoc

2. Start the Frontend Development Server

In a new terminal:

npm run dev
# or
yarn dev

The application will be available at: http://localhost:5173

API Endpoints

Health Check

GET /health

Predict (Single Model - RAW)

POST /api/v1/predict
Content-Type: multipart/form-data

file: <MRI_image.jpg>

Compare Predictions (RAW vs DIP)

POST /api/v1/predict/compare
Content-Type: multipart/form-data

file: <MRI_image.jpg>

Building for Production

Frontend

npm run build
# Output will be in the 'dist' directory

Backend

# The backend can be deployed with Uvicorn
uvicorn App.main:app --host 0.0.0.0 --port 8000 --workers 4

🤖 Model Training & Performance

Training Details

Dataset:

Source: Brain MRI dataset (tumor/no tumor classification)
Training split: 80% training, 20% testing
Image format: Grayscale MRI scans
Image size: Standardized to 128x128 pixels

RAW Pipeline Training:

cd backend/Model
python RawDataModel.py

Preprocessing: Grayscale conversion only
Feature extraction: Flattened pixel values
Classifier: Linear SVM (sklearn.svm.LinearSVC)
Hyperparameters: Default LinearSVC parameters
Training time: ~2-5 minutes (CPU)

DIP Pipeline Training:

cd backend/Model
python DipDataModel.py

Preprocessing: CLAHE → Gaussian → Morphology
Feature extraction: PCA-reduced features
Classifier: Linear SVM (sklearn.svm.LinearSVC)
PCA components: Optimized for 95% variance retention
Training time: ~5-10 minutes (CPU)

Performance Metrics

Performance metrics are saved to models/ directory:

raw_metrics.pkl - RAW pipeline performance
dip_metrics.pkl - DIP pipeline performance

Typical Results:

Metric	RAW Pipeline	DIP Pipeline	Improvement
Accuracy	~85-90%	~90-95%	+5-10%
Precision	~82-88%	~88-93%	+6-8%
Recall	~80-87%	~87-92%	+7-10%
F1-Score	~81-87%	~87-92%	+6-8%

Note: Exact metrics depend on dataset and train/test split. Run training scripts to generate current metrics.

Model Artifacts

Pre-trained models are stored in models/ directory:

raw_svm_model.pkl - RAW pipeline SVM (serialized with joblib)
dip_svm_model.pkl - DIP pipeline SVM (serialized with joblib)
dip_trainingLOGS.txt - Detailed training logs

Model Size:

RAW SVM: ~5-10 MB
DIP SVM: ~3-8 MB (smaller due to PCA reduction)

Preprocessing Steps (DIP Pipeline)

CLAHE (Contrast Limited Adaptive Histogram Equalization)
- Enhances local contrast
- Clip limit: 2.0
- Tile grid size: 8x8
Gaussian Blur
- Reduces noise and smooths images
- Kernel size: 5x5
- Sigma: 1.0
Morphological Operations
- Opening: Removes small noise
- Closing: Fills small gaps
- Kernel: 3x3 ellipse
PCA (Principal Component Analysis)
- Reduces dimensionality
- Retains 95% variance
- Speeds up training and inference

🚀 Deployment

Live Demo

Try it now: https://tumor-classifier-raw-vs-dip.vercel.app

Frontend Deployment (Vercel)

# 1. Build the frontend
npm run build

# 2. Deploy to Vercel
npm install -g vercel
vercel

# 3. Configure environment variables in Vercel dashboard:
# VITE_API_URL = https://your-backend-api.com

Vercel Configuration (vercel.json):

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite"
}

Backend Deployment (Railway/Render/Fly.io)

Option 1: Railway

# 1. Install Railway CLI
npm install -g @railway/cli

# 2. Login and deploy
railway login
railway init
railway up

Option 2: Render

Connect GitHub repository
Set build command: pip install -r requirements.txt
Set start command: cd backend && uvicorn App.main:app --host 0.0.0.0 --port $PORT
Add environment variables

Option 3: Docker Deployment

# Dockerfile (backend)
FROM python:3.10-slim

WORKDIR /app

COPY backend/requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY backend/ .
COPY models/ /app/models/

EXPOSE 8000

CMD ["uvicorn", "App.main:app", "--host", "0.0.0.0", "--port", "8000"]

# Build and run
docker build -t tumor-classifier-backend .
docker run -p 8000:8000 tumor-classifier-backend

Environment Variables

Frontend (.env):

VITE_API_URL=http://localhost:8000  # Development
# VITE_API_URL=https://your-backend.com  # Production

Backend (No .env needed):

FastAPI runs with default settings
CORS configured for local development
Update CORS origins in main.py for production

Performance Optimization

Frontend:

Use lazy loading for images
Implement code splitting
Enable Vite build optimizations
Use CDN for static assets

Backend:

Use gunicorn with multiple workers
Implement response caching
Optimize image preprocessing
Use async file uploads

🔬 Research & Clinical Context

Medical Background

Brain Tumors:

Abnormal growths of cells in the brain
Can be benign (non-cancerous) or malignant (cancerous)
Early detection critical for treatment success
MRI is the gold standard for brain imaging

Challenges:

Manual MRI analysis is time-consuming
Requires expert radiologist interpretation
Inter-observer variability in diagnosis
Need for fast, automated screening tools

AI-Powered Solution

This platform addresses these challenges by:

Automating initial tumor detection screening
Standardizing image analysis with consistent preprocessing
Comparing different preprocessing approaches scientifically
Providing instant results for preliminary assessment

Preprocessing Impact Study

Research Question:

Does sophisticated digital image processing improve brain tumor classification accuracy compared to minimal (RAW) preprocessing?

Hypothesis: Advanced preprocessing (CLAHE, Gaussian blur, morphological operations) will:

✅ Enhance tumor boundary visibility
✅ Reduce noise and artifacts
✅ Improve feature extraction quality
✅ Result in higher classification accuracy

Expected Trade-offs:

⏱️ Increased computational time
🔧 Additional preprocessing complexity
💻 Higher implementation maintenance

Limitations & Disclaimers

⚠️ This is a research and educational tool. It is NOT intended for clinical diagnosis.

Current Limitations:

Binary classification only (tumor vs no tumor)
No tumor type classification (glioma, meningioma, etc.)
No tumor size/location analysis
No multi-modal MRI support (T1, T2, FLAIR)
No 3D volumetric analysis
Limited to specific dataset characteristics

For Clinical Use:

Requires FDA/regulatory approval
Needs validation on diverse patient populations
Must be integrated into clinical workflow
Requires radiologist oversight and final decision
Needs continuous monitoring and updates

Future Enhancements

Potential improvements:

🔹 Multi-class tumor type classification
🔹 Tumor segmentation and localization
🔹 3D volumetric analysis
🔹 Multi-modal MRI fusion
🔹 Deep learning models (CNN, ViT)
🔹 Explainable AI visualizations
🔹 DICOM format support
🔹 Batch processing for multiple scans

📂 Folder Structure

TumorClassifier-RAW-vs-DIP/
│
├── backend/                      # Python FastAPI backend
│   ├── App/
│   │   ├── Utils/
│   │   │   ├── preprocessing.py  # Image preprocessing utilities
│   │   │   ├── logger.py         # Logging configuration
│   │   │   └── __init__.py
│   │   ├── main.py               # FastAPI application entry point
│   │   └── __init__.py
│   ├── Model/
│   │   ├── RawDataModel.py       # RAW pipeline model training
│   │   ├── DipDataModel.py       # DIP pipeline model training
│   │   └── __init__.py
│   ├── requirements.txt          # Python dependencies
│   └── run_commands.txt          # Backend setup commands
│
├── models/                       # Trained ML models
│   ├── raw_svm_model.pkl         # RAW pipeline SVM model
│   ├── dip_svm_model.pkl         # DIP pipeline SVM model
│   ├── raw_metrics.pkl           # RAW model performance metrics
│   ├── dip_metrics.pkl           # DIP model performance metrics
│   └── dip_trainingLOGS.txt      # Training logs
│
├── src/                          # React frontend source
│   ├── components/
│   │   └── LandingPage.tsx       # Main UI component
│   ├── assets/                   # Static assets
│   ├── App.tsx                   # Root React component
│   ├── main.tsx                  # React entry point
│   ├── App.css                   # Global styles
│   └── index.css                 # Base styles
│
├── public/                       # Static public assets
│   └── vite.svg
│
├── .github/                      # GitHub configuration
│   ├── ISSUE_TEMPLATE/           # Issue templates
│   └── pull_request_template.md  # PR template
│
├── eslint.config.js              # ESLint configuration
├── tsconfig.json                 # TypeScript configuration (base)
├── tsconfig.app.json             # TypeScript config for app
├── tsconfig.node.json            # TypeScript config for Node
├── vite.config.ts                # Vite build configuration
├── index.html                    # HTML entry point
├── package.json                  # Node.js dependencies
├── package-lock.json             # Locked versions
├── README.md                     # Project documentation
├── LICENSE                       # MIT License
├── CONTRIBUTING.md               # Contribution guidelines
├── SECURITY.md                   # Security policy
└── CODE_OF_CONDUCT.md            # Code of conduct

🤝 Contributing

We welcome contributions from the community! Whether you're fixing bugs, adding new features, or improving documentation, your help is appreciated.

Please read our Contributing Guidelines to get started.

Quick Start for Contributors

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.

🛡 Security

Security is a top priority for this project. If you discover a security vulnerability, please follow our responsible disclosure guidelines.

See SECURITY.md for more information on reporting vulnerabilities.

📏 Code of Conduct

We are committed to providing a welcoming and inspiring community for all. Please read our Code of Conduct before participating.

Made with ❤️ by H0NEYP0T-466

Name		Name	Last commit message	Last commit date
Latest commit History 31 Commits
.github		.github
backend		backend
models		models
public		public
src		src
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
SECURITY.md		SECURITY.md
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation