raidAthmaneBenlala/derm-ai

DermAI - Web Application

Skin Lesion Segmentation System

A modern web application for AI-powered skin lesion segmentation using Attention U-Net deep learning model.

🚀 Quick Start

Prerequisites

• —Python 3.8+
• —pip (Python package manager)

Installation

1. 1.Clone/Navigate to the project:

   cd "/home/raid/Desktop/isic2018 skin cancer app"

1. 1.Activate the virtual environment:

   source ~/cv-env/bin/activate

1. 1.Install dependencies:

   pip install -r server/requirements.txt

1. 1.Add your trained model:

   # Copy your trained model to:
   models/model.pth

1. 1.Run the server:

   cd server
   python main.py

Or with uvicorn:

   uvicorn server.main:app --reload --host 0.0.0.0 --port 8000

1. 1.Open in browser:

   http://localhost:8000

📁 Project Structure

isic2018-skin-cancer-app/
├── client/                     # Frontend (HTML/CSS/JS)
│   ├── index.html              # Main HTML page
│   ├── styles.css              # CSS styles (dark medical theme)
│   └── app.js                  # JavaScript (file upload, API calls)
│
├── server/                     # Backend (FastAPI)
│   ├── main.py                 # FastAPI application & model
│   └── requirements.txt        # Python dependencies
│
├── models/                     # Trained model weights
│   └── model.pth               # (add your trained model here)
│
├── notebooks/                  # Training notebooks
│   └── mobileNetUnetAttention.py
│
├── README.md                   # This file
└── README_AI.md               # AI/Model documentation

🖥️ Features

Frontend

• —Modern Medical Theme: Dark mode with purple/pink gradient accents
• —Drag & Drop Upload: Easy image upload with drag-and-drop support
• —Real-time Results: Instant visualization of segmentation results
• —Responsive Design: Works on desktop, tablet, and mobile
• —Download Results: Export combined analysis as PNG image

Backend (API)

• —FastAPI Framework: High-performance async Python server
• —CORS Enabled: Cross-origin requests supported
• —Health Check: API status monitoring endpoint
• —Image Validation: Supports JPEG, PNG, WebP formats

🔌 API Endpoints

Health Check

GET /api/health

Response:

{
  "status": "healthy",
  "model_loaded": true,
  "device": "cuda"
}

Segmentation

POST /api/segment
Content-Type: multipart/form-data

file: <image_file>

Response:

{
  "success": true,
  "mask_base64": "iVBORw0KGgo...",
  "overlay_base64": "iVBORw0KGgo...",
  "confidence": 85.5,
  "lesion_area_percent": 12.3
}

🎨 Design System

Color Palette

Typography

• —Primary Font: Inter (Google Fonts)
• —Monospace Font: JetBrains Mono
• —Headings: 700-800 weight
• —Body: 400-500 weight

Effects

• —Glassmorphism: Blur + transparency on cards
• —Gradient Orbs: Animated background blobs
• —Smooth Transitions: 250ms ease animations
• —Hover States: Lift + glow effects

⌨️ Keyboard Shortcuts

🛠️ Configuration

Server Configuration (server/main.py)

# Model path
MODEL_PATH = "../models/model.pth"

# Image size (must match training)
IMG_SIZE = 256

# Device (auto-detected)
DEVICE = torch.device('cuda' if torch.cuda.is_available() else 'cpu')

Running on Different Port

uvicorn server.main:app --port 3000

Production Mode

uvicorn server.main:app --host 0.0.0.0 --port 8000 --workers 4

🧪 Testing

API Test with cURL

# Health check
curl http://localhost:8000/api/health

# Segmentation
curl -X POST http://localhost:8000/api/segment \
  -F "file=@test_image.jpg"

API Test with Python

import requests

# Health check
response = requests.get("http://localhost:8000/api/health")
print(response.json())

# Segmentation
with open("test_image.jpg", "rb") as f:
    response = requests.post(
        "http://localhost:8000/api/segment",
        files={"file": f}
    )
print(response.json())

📦 Dependencies

Python (Backend)

fastapi>=0.104.0
uvicorn>=0.24.0
python-multipart>=0.0.6
torch>=2.0.0
torchvision>=0.15.0
opencv-python>=4.8.0
Pillow>=10.0.0
albumentations>=1.3.0
numpy>=1.24.0
pydantic>=2.0.0

Frontend

• —Vanilla HTML5
• —Vanilla CSS3
• —Vanilla JavaScript (ES6+)
• —Google Fonts (Inter, JetBrains Mono)

🔒 Security Notes

• —All image processing is done locally (no external API calls)
• —Images are processed in memory and not stored
• —CORS is enabled for development (restrict in production)

🐛 Troubleshooting

Model not found

⚠ Model file not found at models/model.pth

Solution: Add your trained model to the models/ directory.

CUDA out of memory

RuntimeError: CUDA out of memory

Solution: Reduce batch size or use CPU:

DEVICE = torch.device('cpu')

Port already in use

OSError: [Errno 98] Address already in use

Solution: Kill the existing process or use a different port:

lsof -i :8000  # Find process
kill -9 <PID>  # Kill it

Static files not serving

Solution: Ensure the client directory exists and contains index.html:

ls -la client/

📄 License

This project is for research and educational purposes only. ⚠️ Medical Disclaimer: This tool should not be used as a substitute for professional medical advice, diagnosis, or treatment.

👥 Contributing

1. 1.Fork the repository
2. 2.Create a feature branch
3. 3.Make your changes
4. 4.Submit a pull request

📞 Support

For issues and questions, please open a GitHub issue.

Version 1.0.0 | Built with FastAPI, PyTorch & ❤️