Deployment ready (excluding model)

.gitignore

@@ -0,0 +1,10 @@
+__pycache__/
+*.py[cod]
+*$py.class
+.DS_Store
+.env
+venv/
+env/
+.idea/
+.vscode/
+models/*.pth

Dockerfile

@@ -0,0 +1,31 @@
+# Use official Python runtime as a parent image
+FROM python:3.10-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies required for OpenCV
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY server/requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the application code
+COPY server/ ./server/
+COPY client/ ./client/
+COPY models/ ./models/
+
+# Create a non-root user for security (recommended for HF Spaces)
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+# Expose the port (Hugging Face Spaces uses 7860 by default)
+EXPOSE 7860
+
+# Run the FastAPI server on port 7860
+CMD ["uvicorn", "server.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,328 @@
+---
+title: DermAI Skin Lesion Segmentation
+emoji: 🔬
+colorFrom: purple
+colorTo: pink
+sdk: docker
+app_port: 7860
+---
+
+# 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. **Clone/Navigate to the project:**
+   ```bash
+   cd "/home/raid/Desktop/isic2018 skin cancer app"
+   ```
+
+2. **Activate the virtual environment:**
+   ```bash
+   source ~/cv-env/bin/activate
+   ```
+
+3. **Install dependencies:**
+   ```bash
+   pip install -r server/requirements.txt
+   ```
+
+4. **Add your trained model:**
+   ```bash
+   # Copy your trained model to:
+   models/model.pth
+   ```
+
+5. **Run the server:**
+   ```bash
+   cd server
+   python main.py
+   ```
+   
+   Or with uvicorn:
+   ```bash
+   uvicorn server.main:app --reload --host 0.0.0.0 --port 8000
+   ```
+
+6. **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
+```http
+GET /api/health
+```
+**Response:**
+```json
+{
+  "status": "healthy",
+  "model_loaded": true,
+  "device": "cuda"
+}
+```
+
+### Segmentation
+```http
+POST /api/segment
+Content-Type: multipart/form-data
+
+file: <image_file>
+```
+**Response:**
+```json
+{
+  "success": true,
+  "mask_base64": "iVBORw0KGgo...",
+  "overlay_base64": "iVBORw0KGgo...",
+  "confidence": 85.5,
+  "lesion_area_percent": 12.3
+}
+```
+
+---
+
+## 🎨 Design System
+
+### Color Palette
+
+| Color | HSL | Usage |
+|-------|-----|-------|
+| Primary Purple | `hsl(250, 89%, 65%)` | Buttons, accents |
+| Accent Pink | `hsl(330, 81%, 60%)` | Highlights, gradients |
+| Success Green | `hsl(142, 71%, 45%)` | Positive indicators |
+| Background Dark | `hsl(240, 20%, 4%)` | Main background |
+
+### 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
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl/Cmd + O` | Open file dialog |
+| `Ctrl/Cmd + S` | Download results |
+| `Escape` | Reset analysis |
+
+---
+
+## 🛠️ Configuration
+
+### Server Configuration (server/main.py)
+
+```python
+# 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
+
+```bash
+uvicorn server.main:app --port 3000
+```
+
+### Production Mode
+
+```bash
+uvicorn server.main:app --host 0.0.0.0 --port 8000 --workers 4
+```
+
+---
+
+## 🧪 Testing
+
+### API Test with cURL
+
+```bash
+# 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
+
+```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:
+```python
+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:
+```bash
+lsof -i :8000  # Find process
+kill -9 <PID>  # Kill it
+```
+
+### Static files not serving
+**Solution**: Ensure the client directory exists and contains index.html:
+```bash
+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. Fork the repository
+2. Create a feature branch
+3. Make your changes
+4. Submit a pull request
+
+---
+
+## 📞 Support
+
+For issues and questions, please open a GitHub issue.
+
+---
+
+*Version 1.0.0 | Built with FastAPI, PyTorch & ❤️*

README_AI.md

@@ -0,0 +1,511 @@
+# DermAI - AI Model Documentation
+## Skin Lesion Segmentation using Attention U-Net
+
+This document provides a comprehensive overview of the AI/Deep Learning components used in the DermAI skin cancer lesion segmentation application.
+
+---
+
+## Table of Contents
+1. [Overview](#overview)
+2. [Model Architecture](#model-architecture)
+3. [Dataset](#dataset)
+4. [Training Pipeline](#training-pipeline)
+5. [Loss Functions](#loss-functions)
+6. [Data Augmentation](#data-augmentation)
+7. [Inference Pipeline](#inference-pipeline)
+8. [Performance Metrics](#performance-metrics)
+9. [Technical Specifications](#technical-specifications)
+
+---
+
+## Overview
+
+The AI system in DermAI is designed for **semantic segmentation** of skin lesions in dermoscopic images. The goal is to precisely identify and delineate the boundaries of potentially cancerous skin lesions, assisting dermatologists in their diagnostic workflow.
+
+### Key Features
+- **Encoder-Decoder Architecture**: U-Net style architecture with skip connections
+- **Transfer Learning**: MobileNetV2 pre-trained on ImageNet as the encoder
+- **Attention Mechanism**: Attention gates to focus on lesion regions
+- **Deep Supervision**: Multi-scale loss for better gradient flow
+- **Boundary Refinement**: Dedicated head for precise edge detection
+
+---
+
+## Model Architecture
+
+### 1. Encoder: MobileNetV2
+
+The encoder uses **MobileNetV2** pre-trained on ImageNet, which provides:
+
+- **Efficient Feature Extraction**: Inverted residual blocks with linear bottlenecks
+- **Depthwise Separable Convolutions**: Reduces computational cost
+- **Pre-trained Weights**: Transfer learning from ImageNet for robust feature representations
+
+#### Architecture Details:
+```
+Input: 256 × 256 × 3 (RGB image)
+├── Layer 0-1:   16 channels  (skip connection 1)
+├── Layer 2-3:   24 channels  (skip connection 2)
+├── Layer 4-6:   32 channels  (skip connection 3)
+├── Layer 7-13:  96 channels  (skip connection 4)
+└── Layer 14-18: 1280 channels (bottleneck)
+```
+
+### 2. Decoder: U-Net Style with Skip Connections
+
+The decoder progressively upsamples the feature maps while integrating skip connections from the encoder:
+
+```
+Bottleneck (1280 channels)
+    ↓ ConvTranspose2d
+Decoder Stage 1 (256 channels) + Skip[4] with Attention Gate
+    ↓ ConvTranspose2d
+Decoder Stage 2 (128 channels) + Skip[3] with Attention Gate
+    ↓ ConvTranspose2d
+Decoder Stage 3 (64 channels) + Skip[2] with Attention Gate
+    ↓ ConvTranspose2d
+Decoder Stage 4 (32 channels) + Skip[1] with Attention Gate
+    ↓ ConvTranspose2d
+Final Stage (16 channels)
+    ↓ Conv2d + Sigmoid
+Output: 256 × 256 × 1 (binary mask)
+```
+
+### 3. Attention Gates
+
+Attention gates are applied to each skip connection to help the decoder focus on relevant features:
+
+```python
+class AttentionGate(nn.Module):
+    """
+    Args:
+        F_g: Channels in gating signal (from decoder)
+        F_l: Channels in skip connection (from encoder)
+        F_int: Intermediate channels
+    
+    Operation:
+        1. Project gating signal: W_g(g) → features
+        2. Project skip connection: W_x(x) → features
+        3. Combine: ReLU(W_g + W_x)
+        4. Generate attention map: Sigmoid(psi)
+        5. Apply attention: x * attention_map
+    """
+```
+
+The attention mechanism learns to:
+- **Highlight lesion regions**: Focus on areas with suspicious features
+- **Suppress background**: Ignore hair, skin texture, and other noise
+- **Improve boundary detection**: Pay attention to lesion edges
+
+### 4. Boundary Refinement Head
+
+A dedicated convolutional head specifically for refining lesion boundaries:
+
+```
+Input: 16 channels (from decoder)
+    ↓ Conv2d(16 → 64) + ReLU
+    ↓ Conv2d(64 → 64) + ReLU
+    ↓ Conv2d(64 → 1) + Sigmoid
+Output: Boundary-refined mask
+```
+
+The final output is the average of the main segmentation output and the boundary-refined output.
+
+### 5. Deep Supervision (Training Only)
+
+During training, auxiliary outputs are generated at multiple decoder scales:
+
+| Stage | Resolution | Weight |
+|-------|------------|--------|
+| Decoder 1 | 16×16 | 0.5 |
+| Decoder 2 | 32×32 | 0.3 |
+| Decoder 3 | 64×64 | 0.2 |
+| Decoder 4 | 128×128 | 0.1 |
+| Final | 256×256 | 1.0 |
+
+Benefits:
+- Better gradient flow to early decoder layers
+- Faster convergence
+- Improved feature learning at multiple scales
+
+---
+
+## Dataset
+
+### ISIC 2018 Challenge Dataset
+
+The model is trained on the **International Skin Imaging Collaboration (ISIC) 2018** dataset:
+
+| Split | Images | Purpose |
+|-------|--------|---------|
+| Training | 2595 | Model training |
+| Validation | 100 | Hyperparameter tuning |
+| Test | 1000 | Final evaluation |
+
+### Data Characteristics
+- **Image Type**: Dermoscopic images of skin lesions
+- **Resolution**: Variable (resized to 256×256 for training)
+- **Annotations**: Binary segmentation masks (pixel-level)
+- **Lesion Types**: Melanoma, nevus, seborrheic keratosis, etc.
+
+---
+
+## Training Pipeline
+
+### 1. Training Loop
+
+```python
+for epoch in range(EPOCHS):
+    # Phase 1: Frozen encoder (first 5 epochs)
+    if epoch < ENCODER_FREEZE_EPOCHS:
+        # Only train decoder layers
+        frozen_layers = 7  # First 7 encoder layers frozen
+    else:
+        # Phase 2: Full fine-tuning
+        unfreeze_encoder()
+    
+    # Train epoch
+    for batch in train_loader:
+        optimizer.zero_grad()
+        
+        # Forward pass with deep supervision
+        main_output, ds_outputs = model(images)
+        
+        # Compute combined loss
+        loss = deep_supervision_loss(main_output, ds_outputs, masks)
+        
+        loss.backward()
+        optimizer.step()
+    
+    # Validate and update LR scheduler
+    scheduler.step(val_loss)
+    
+    # Early stopping check
+    if no_improvement_for(patience=7):
+        break
+```
+
+### 2. Hyperparameters
+
+| Parameter | Value | Description |
+|-----------|-------|-------------|
+| Image Size | 256×256 | Input resolution |
+| Batch Size | 32 | Training batch size |
+| Learning Rate | 1e-4 | Initial learning rate |
+| Optimizer | Adam | Optimizer algorithm |
+| Epochs | 50 | Maximum epochs |
+| Early Stopping Patience | 7 | Epochs without improvement |
+| Encoder Freeze Epochs | 5 | Epochs with frozen encoder |
+
+### 3. Learning Rate Scheduler
+
+```python
+scheduler = ReduceLROnPlateau(
+    optimizer,
+    mode='min',      # Reduce when val_loss stops decreasing
+    patience=3,      # Wait 3 epochs before reducing
+    factor=0.5,      # Reduce LR by half
+    min_lr=1e-7      # Minimum learning rate
+)
+```
+
+---
+
+## Loss Functions
+
+### Combined Loss Function
+
+The model is trained using a weighted combination of three loss functions:
+
+```
+Total Loss = 0.3 × BCE + 0.4 × Dice + 0.3 × Tversky
+```
+
+### 1. Binary Cross-Entropy (BCE) Loss
+
+Measures pixel-wise classification accuracy:
+
+```
+BCE = -1/N Σ [y·log(p) + (1-y)·log(1-p)]
+```
+
+**Purpose**: Ensures accurate per-pixel predictions
+
+### 2. Dice Loss
+
+Measures overlap between prediction and ground truth:
+
+```
+Dice = 2·|P ∩ G| / (|P| + |G|)
+Dice Loss = 1 - Dice
+```
+
+**Purpose**: Handles class imbalance, optimizes for segmentation quality
+
+### 3. Tversky Loss
+
+A generalization of Dice loss with asymmetric penalization:
+
+```
+Tversky = TP / (TP + α·FN + β·FP)
+Tversky Loss = 1 - Tversky
+```
+
+Configuration:
+- **α = 0.7**: Higher penalty for False Negatives (missing lesion parts)
+- **β = 0.3**: Lower penalty for False Positives
+
+**Purpose**: Addresses class imbalance by penalizing missed lesions more than false alarms
+
+### Deep Supervision Loss
+
+For multi-scale outputs during training:
+
+```
+Total_DS = L_main + Σ(wi × L_i)
+
+Where:
+- L_main: Loss on final output (weight = 1.0)
+- L_i: Loss on auxiliary output i
+- wi: Weight for scale i (0.5, 0.3, 0.2, 0.1)
+```
+
+---
+
+## Data Augmentation
+
+The training pipeline uses **Albumentations** for advanced data augmentation:
+
+### Geometric Augmentations
+
+| Augmentation | Parameters | Probability |
+|--------------|------------|-------------|
+| HorizontalFlip | - | 0.5 |
+| VerticalFlip | - | 0.5 |
+| RandomRotate90 | - | 0.5 |
+| Affine | translate=±10%, scale=0.8-1.2, rotate=±45° | 0.5 |
+| ElasticTransform | alpha=120, sigma=6 | 0.3 |
+
+**Rationale**: Skin lesions can appear at any orientation; dermoscopy captures images from various angles.
+
+### Color Augmentations
+
+| Augmentation | Parameters | Probability |
+|--------------|------------|-------------|
+| ColorJitter | brightness=0.2, contrast=0.2, saturation=0.2, hue=0.1 | 0.5 |
+| RandomBrightnessContrast | limit=0.2 | 0.5 |
+| HueSaturationValue | hue=±10, sat=±20, val=±10 | 0.3 |
+
+**Rationale**: Handles variations in camera settings, lighting conditions, and skin tones.
+
+### Noise & Blur Augmentations
+
+| Augmentation | Parameters | Probability |
+|--------------|------------|-------------|
+| GaussianBlur | blur_limit=3-5 | 0.2 |
+| GaussNoise | std=0.02-0.1 | 0.2 |
+
+**Rationale**: Simulates image quality variations and camera noise.
+
+### Cutout/Dropout
+
+| Augmentation | Parameters | Probability |
+|--------------|------------|-------------|
+| CoarseDropout | 1-8 holes, size=16-32 pixels | 0.5 |
+
+**Rationale**: Forces the model to learn from partial information, improving robustness to occlusions (hair, rulers, artifacts).
+
+### Normalization
+
+All images are normalized using ImageNet statistics:
+```python
+mean = (0.485, 0.456, 0.406)
+std = (0.229, 0.224, 0.225)
+```
+
+---
+
+## Inference Pipeline
+
+### Preprocessing
+
+```python
+def preprocess_image(image):
+    # 1. Convert to RGB
+    image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+    
+    # 2. Resize to 256×256
+    image_resized = cv2.resize(image_rgb, (256, 256))
+    
+    # 3. Normalize with ImageNet stats
+    image_normalized = (image_resized / 255.0 - mean) / std
+    
+    # 4. Convert to tensor [1, 3, 256, 256]
+    tensor = torch.from_numpy(image_normalized).permute(2, 0, 1).unsqueeze(0)
+    
+    return tensor.float()
+```
+
+### Inference
+
+```python
+def predict(model, image_tensor):
+    model.eval()
+    with torch.no_grad():
+        output = model(image_tensor)  # [1, 1, 256, 256]
+        mask = output.cpu().numpy().squeeze()  # [256, 256]
+    return mask
+```
+
+### Postprocessing
+
+```python
+def postprocess_mask(mask, original_size):
+    # 1. Apply threshold
+    binary_mask = (mask > 0.5).astype(np.float32)
+    
+    # 2. Resize to original image size
+    mask_resized = cv2.resize(binary_mask, 
+                               (original_size[1], original_size[0]),
+                               interpolation=cv2.INTER_LINEAR)
+    
+    return mask_resized
+```
+
+### Metrics Calculation
+
+```python
+# Confidence Score: Mean probability of lesion pixels
+confidence = np.mean(mask[mask > 0.5]) if np.any(mask > 0.5) else 0.0
+
+# Lesion Area: Percentage of image covered by lesion
+lesion_area = np.mean(mask > 0.5) * 100
+```
+
+---
+
+## Performance Metrics
+
+### Primary Metrics
+
+| Metric | Description | Target |
+|--------|-------------|--------|
+| **Dice Coefficient** | Overlap between prediction and ground truth | > 0.85 |
+| **Accuracy** | Per-pixel classification accuracy | > 0.95 |
+| **IoU (Jaccard)** | Intersection over Union | > 0.80 |
+
+### Dice Coefficient Calculation
+
+```python
+def dice_coefficient(pred, target, threshold=0.5):
+    pred_binary = (pred > threshold).float()
+    target_binary = (target > threshold).float()
+    
+    intersection = (pred_binary * target_binary).sum()
+    dice = (2 * intersection) / (pred_binary.sum() + target_binary.sum())
+    
+    return dice.item()
+```
+
+### Expected Performance
+
+### Actual Training Results (Epoch 39)
+
+| Split | Dice | Accuracy | Loss |
+|-------|------|----------|------|
+| Validation | 0.8864 | 0.9405 | 0.1470 |
+
+*Model achieved best validation loss at Epoch 39.*
+
+---
+
+## Technical Specifications
+
+### Model Size
+
+| Component | Parameters |
+|-----------|------------|
+| MobileNetV2 Encoder | ~3.4M |
+| Attention Gates | ~0.2M |
+| Decoder | ~2.0M |
+| Boundary Head | ~0.1M |
+| **Total Parameters** | **5,637,018** |
+| **Trainable Parameters** | **5,581,530** |
+
+### Computational Requirements
+
+| Metric | Value |
+|--------|-------|
+| Input Size | 256 × 256 × 3 |
+| FLOPs | ~1.2 GFLOPs |
+| GPU Memory (Inference) | ~500 MB |
+| Inference Time (GPU) | ~15 ms |
+| Inference Time (CPU) | ~200 ms |
+
+### Dependencies
+
+| Library | Version | Purpose |
+|---------|---------|---------|
+| PyTorch | ≥2.0.0 | Deep learning framework |
+| torchvision | ≥0.15.0 | Pre-trained models |
+| Albumentations | ≥1.3.0 | Data augmentation |
+| OpenCV | ≥4.8.0 | Image processing |
+| NumPy | ≥1.24.0 | Numerical operations |
+
+---
+
+## Model Files
+
+### Required Files
+
+```
+models/
+└── model.pth    # Trained model weights (~23 MB)
+```
+
+### Loading the Model
+
+```python
+from server.main import AttentionUNetMobileNet
+
+# Initialize model
+model = AttentionUNetMobileNet(deep_supervision=False)
+
+# Load trained weights
+model.load_state_dict(
+    torch.load('models/model.pth', map_location='cpu'),
+    strict=False
+)
+
+# Set to evaluation mode
+model.eval()
+```
+
+---
+
+## Future Improvements
+
+1. **Multi-class Segmentation**: Extend to classify lesion types
+2. **Ensemble Models**: Combine multiple architectures for robustness
+3. **Test-Time Augmentation**: Average predictions over augmented inputs
+4. **Model Quantization**: Reduce model size for mobile deployment
+5. **Uncertainty Estimation**: Provide confidence intervals for predictions
+
+---
+
+## References
+
+1. **U-Net**: Ronneberger, O., Fischer, P., & Brox, T. (2015). U-Net: Convolutional Networks for Biomedical Image Segmentation.
+2. **Attention U-Net**: Oktay, O., et al. (2018). Attention U-Net: Learning Where to Look for the Pancreas.
+3. **MobileNetV2**: Sandler, M., et al. (2018). MobileNetV2: Inverted Residuals and Linear Bottlenecks.
+4. **ISIC 2018**: Codella, N., et al. (2018). Skin Lesion Analysis Toward Melanoma Detection 2018.
+5. **Tversky Loss**: Salehi, S.S.M., et al. (2017). Tversky Loss Function for Image Segmentation.
+
+---
+
+## License
+
+This AI model is for **research and educational purposes only**. It should not be used as a substitute for professional medical diagnosis.
+
+---
+

client/app.js

@@ -0,0 +1,445 @@
+/**
+ * DermAI - Skin Lesion Segmentation Application
+ * Frontend JavaScript
+ * ============================================
+ */
+
+// ===== DOM ELEMENTS =====
+const uploadArea = document.getElementById('upload-area');
+const fileInput = document.getElementById('file-input');
+const uploadBtn = document.getElementById('upload-btn');
+const resultsSection = document.getElementById('results-section');
+const loadingOverlay = document.getElementById('loading-overlay');
+const statusBadge = document.getElementById('status-badge');
+
+// Result elements
+const originalImage = document.getElementById('original-image');
+const maskImage = document.getElementById('mask-image');
+const overlayImage = document.getElementById('overlay-image');
+const confidenceValue = document.getElementById('confidence-value');
+const areaValue = document.getElementById('area-value');
+
+// Action buttons
+const newAnalysisBtn = document.getElementById('new-analysis-btn');
+const downloadBtn = document.getElementById('download-btn');
+
+// ===== CONFIGURATION =====
+const API_BASE_URL = window.location.origin;
+
+// ===== STATE =====
+let currentResults = null;
+let currentOriginalImage = null;
+
+// ===== INITIALIZATION =====
+document.addEventListener('DOMContentLoaded', () => {
+    initializeEventListeners();
+    checkAPIHealth();
+});
+
+function initializeEventListeners() {
+    // Upload area click
+    uploadArea.addEventListener('click', (e) => {
+        if (e.target !== uploadBtn) {
+            fileInput.click();
+        }
+    });
+
+    // Upload button click
+    uploadBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        fileInput.click();
+    });
+
+    // File input change
+    fileInput.addEventListener('change', handleFileSelect);
+
+    // Drag and drop
+    uploadArea.addEventListener('dragover', handleDragOver);
+    uploadArea.addEventListener('dragleave', handleDragLeave);
+    uploadArea.addEventListener('drop', handleDrop);
+
+    // Action buttons
+    newAnalysisBtn.addEventListener('click', resetAnalysis);
+    downloadBtn.addEventListener('click', downloadResults);
+
+    // Smooth scroll for nav links
+    document.querySelectorAll('.nav-link').forEach(link => {
+        link.addEventListener('click', (e) => {
+            const href = link.getAttribute('href');
+            if (href.startsWith('#')) {
+                e.preventDefault();
+                const target = document.querySelector(href);
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth' });
+                }
+            }
+        });
+    });
+}
+
+// ===== API HEALTH CHECK =====
+async function checkAPIHealth() {
+    try {
+        const response = await fetch(`${API_BASE_URL}/api/health`);
+        const data = await response.json();
+        
+        if (data.status === 'healthy') {
+            statusBadge.classList.add('online');
+            statusBadge.classList.remove('offline');
+            statusBadge.querySelector('.status-text').textContent = 
+                data.model_loaded ? 'Model Ready' : 'API Online';
+        } else {
+            throw new Error('API not healthy');
+        }
+    } catch (error) {
+        console.error('API health check failed:', error);
+        statusBadge.classList.add('offline');
+        statusBadge.classList.remove('online');
+        statusBadge.querySelector('.status-text').textContent = 'Offline';
+    }
+}
+
+// ===== DRAG AND DROP HANDLERS =====
+function handleDragOver(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    uploadArea.classList.add('dragover');
+}
+
+function handleDragLeave(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    uploadArea.classList.remove('dragover');
+}
+
+function handleDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    uploadArea.classList.remove('dragover');
+
+    const files = e.dataTransfer.files;
+    if (files.length > 0) {
+        processFile(files[0]);
+    }
+}
+
+// ===== FILE HANDLING =====
+function handleFileSelect(e) {
+    const files = e.target.files;
+    if (files.length > 0) {
+        processFile(files[0]);
+    }
+}
+
+function processFile(file) {
+    // Validate file type
+    const validTypes = ['image/jpeg', 'image/png', 'image/webp'];
+    if (!validTypes.includes(file.type)) {
+        showNotification('Invalid file type. Please upload JPEG, PNG, or WebP images.', 'error');
+        return;
+    }
+
+    // Validate file size (max 10MB)
+    const maxSize = 10 * 1024 * 1024;
+    if (file.size > maxSize) {
+        showNotification('File too large. Maximum size is 10MB.', 'error');
+        return;
+    }
+
+    // Store original image for download
+    const reader = new FileReader();
+    reader.onload = (e) => {
+        currentOriginalImage = e.target.result;
+        originalImage.src = currentOriginalImage;
+    };
+    reader.readAsDataURL(file);
+
+    // Send to API
+    analyzeImage(file);
+}
+
+// ===== API COMMUNICATION =====
+async function analyzeImage(file) {
+    showLoading(true);
+
+    try {
+        const formData = new FormData();
+        formData.append('file', file);
+
+        const response = await fetch(`${API_BASE_URL}/api/segment`, {
+            method: 'POST',
+            body: formData
+        });
+
+        const data = await response.json();
+
+        if (data.success) {
+            currentResults = data;
+            displayResults(data);
+        } else {
+            throw new Error(data.message || 'Analysis failed');
+        }
+    } catch (error) {
+        console.error('Analysis error:', error);
+        showNotification(`Analysis failed: ${error.message}`, 'error');
+    } finally {
+        showLoading(false);
+    }
+}
+
+// ===== RESULTS DISPLAY =====
+function displayResults(data) {
+    // Set images
+    maskImage.src = `data:image/png;base64,${data.mask_base64}`;
+    overlayImage.src = `data:image/png;base64,${data.overlay_base64}`;
+
+    // Set metrics
+    confidenceValue.textContent = `${data.confidence}%`;
+    areaValue.textContent = `${data.lesion_area_percent}%`;
+
+    // Apply color coding to confidence
+    if (data.confidence >= 80) {
+        confidenceValue.style.color = 'var(--success-400)';
+    } else if (data.confidence >= 50) {
+        confidenceValue.style.color = '#fbbf24';
+    } else {
+        confidenceValue.style.color = '#f87171';
+    }
+
+    // Show results section
+    resultsSection.classList.remove('hidden');
+
+    // Scroll to results
+    resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
+// ===== RESET ANALYSIS =====
+function resetAnalysis() {
+    // Hide results
+    resultsSection.classList.add('hidden');
+
+    // Clear images
+    originalImage.src = '';
+    maskImage.src = '';
+    overlayImage.src = '';
+
+    // Reset metrics
+    confidenceValue.textContent = '--';
+    areaValue.textContent = '--';
+    confidenceValue.style.color = '';
+
+    // Clear state
+    currentResults = null;
+    currentOriginalImage = null;
+
+    // Reset file input
+    fileInput.value = '';
+
+    // Scroll to upload
+    uploadArea.scrollIntoView({ behavior: 'smooth', block: 'center' });
+}
+
+// ===== DOWNLOAD RESULTS =====
+function downloadResults() {
+    if (!currentResults || !currentOriginalImage) {
+        showNotification('No results to download', 'error');
+        return;
+    }
+
+    // Create canvas to composite results
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    // Load all images
+    const images = {
+        original: new Image(),
+        mask: new Image(),
+        overlay: new Image()
+    };
+
+    images.original.src = currentOriginalImage;
+    images.mask.src = `data:image/png;base64,${currentResults.mask_base64}`;
+    images.overlay.src = `data:image/png;base64,${currentResults.overlay_base64}`;
+
+    // Wait for all images to load
+    Promise.all([
+        new Promise(resolve => images.original.onload = resolve),
+        new Promise(resolve => images.mask.onload = resolve),
+        new Promise(resolve => images.overlay.onload = resolve)
+    ]).then(() => {
+        // Calculate dimensions
+        const imgWidth = images.original.width;
+        const imgHeight = images.original.height;
+        const padding = 20;
+        const headerHeight = 60;
+        const footerHeight = 80;
+
+        canvas.width = imgWidth * 3 + padding * 4;
+        canvas.height = imgHeight + headerHeight + footerHeight + padding * 2;
+
+        // Background
+        ctx.fillStyle = '#0a0a0f';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        // Header
+        ctx.fillStyle = '#fafafa';
+        ctx.font = 'bold 24px Inter, sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText('DermAI - Skin Lesion Analysis Results', canvas.width / 2, 40);
+
+        // Images
+        const y = headerHeight + padding;
+        
+        // Original
+        ctx.drawImage(images.original, padding, y, imgWidth, imgHeight);
+        ctx.fillStyle = '#a1a1aa';
+        ctx.font = '14px Inter, sans-serif';
+        ctx.fillText('Original', padding + imgWidth / 2, y - 10);
+
+        // Mask
+        ctx.drawImage(images.mask, imgWidth + padding * 2, y, imgWidth, imgHeight);
+        ctx.fillText('Segmentation Mask', imgWidth + padding * 2 + imgWidth / 2, y - 10);
+
+        // Overlay
+        ctx.drawImage(images.overlay, imgWidth * 2 + padding * 3, y, imgWidth, imgHeight);
+        ctx.fillText('Lesion Overlay', imgWidth * 2 + padding * 3 + imgWidth / 2, y - 10);
+
+        // Footer with metrics
+        const footerY = y + imgHeight + padding + 20;
+        ctx.fillStyle = '#fafafa';
+        ctx.font = 'bold 16px Inter, sans-serif';
+        ctx.textAlign = 'center';
+        ctx.fillText(
+            `Confidence: ${currentResults.confidence}% | Lesion Area: ${currentResults.lesion_area_percent}% | Model: Attention U-Net`,
+            canvas.width / 2,
+            footerY
+        );
+
+        ctx.fillStyle = '#71717a';
+        ctx.font = '12px Inter, sans-serif';
+        ctx.fillText(
+            `Generated: ${new Date().toLocaleString()} | DermAI - For research purposes only`,
+            canvas.width / 2,
+            footerY + 25
+        );
+
+        // Download
+        const link = document.createElement('a');
+        link.download = `dermai-analysis-${Date.now()}.png`;
+        link.href = canvas.toDataURL('image/png');
+        link.click();
+
+        showNotification('Results downloaded successfully!', 'success');
+    });
+}
+
+// ===== UTILITY FUNCTIONS =====
+function showLoading(show) {
+    if (show) {
+        loadingOverlay.classList.remove('hidden');
+        document.body.style.overflow = 'hidden';
+    } else {
+        loadingOverlay.classList.add('hidden');
+        document.body.style.overflow = '';
+    }
+}
+
+function showNotification(message, type = 'info') {
+    // Create notification element
+    const notification = document.createElement('div');
+    notification.className = `notification notification-${type}`;
+    notification.innerHTML = `
+        <span class="notification-icon">${type === 'success' ? '✓' : type === 'error' ? '✗' : 'ℹ'}</span>
+        <span class="notification-message">${message}</span>
+    `;
+
+    // Add styles
+    Object.assign(notification.style, {
+        position: 'fixed',
+        bottom: '20px',
+        right: '20px',
+        padding: '1rem 1.5rem',
+        background: type === 'success' ? 'rgba(34, 197, 94, 0.9)' : 
+                   type === 'error' ? 'rgba(239, 68, 68, 0.9)' : 
+                   'rgba(99, 102, 241, 0.9)',
+        color: 'white',
+        borderRadius: '12px',
+        boxShadow: '0 10px 40px rgba(0, 0, 0, 0.3)',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.75rem',
+        fontSize: '0.9rem',
+        fontWeight: '500',
+        zIndex: '9999',
+        animation: 'slideIn 0.3s ease',
+        backdropFilter: 'blur(10px)'
+    });
+
+    // Add animation keyframes
+    const style = document.createElement('style');
+    style.textContent = `
+        @keyframes slideIn {
+            from {
+                opacity: 0;
+                transform: translateX(100px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+        @keyframes slideOut {
+            from {
+                opacity: 1;
+                transform: translateX(0);
+            }
+            to {
+                opacity: 0;
+                transform: translateX(100px);
+            }
+        }
+    `;
+    document.head.appendChild(style);
+
+    document.body.appendChild(notification);
+
+    // Auto remove after 4 seconds
+    setTimeout(() => {
+        notification.style.animation = 'slideOut 0.3s ease';
+        setTimeout(() => {
+            notification.remove();
+        }, 300);
+    }, 4000);
+}
+
+// ===== KEYBOARD SHORTCUTS =====
+document.addEventListener('keydown', (e) => {
+    // Ctrl/Cmd + O to open file
+    if ((e.ctrlKey || e.metaKey) && e.key === 'o') {
+        e.preventDefault();
+        fileInput.click();
+    }
+
+    // Ctrl/Cmd + S to download results
+    if ((e.ctrlKey || e.metaKey) && e.key === 's' && currentResults) {
+        e.preventDefault();
+        downloadResults();
+    }
+
+    // Escape to reset
+    if (e.key === 'Escape' && !resultsSection.classList.contains('hidden')) {
+        resetAnalysis();
+    }
+});
+
+// ===== WINDOW EVENTS =====
+// Prevent accidental page leave when results are present
+window.addEventListener('beforeunload', (e) => {
+    if (currentResults) {
+        e.preventDefault();
+        e.returnValue = '';
+    }
+});
+
+// Re-check API health periodically
+setInterval(checkAPIHealth, 30000);

client/index.html

@@ -0,0 +1,322 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description"
+        content="DermAI - Advanced skin lesion segmentation using deep learning. Analyze dermoscopic images for potential skin cancer lesions.">
+    <meta name="keywords" content="skin cancer, dermoscopy, AI, deep learning, medical imaging, lesion segmentation">
+    <title>DermAI | AI-Powered Skin Lesion Analysis</title>
+
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"
+        rel="stylesheet">
+
+    <!-- Styles -->
+    <link rel="stylesheet" href="styles.css">
+</head>
+
+<body>
+    <!-- Gradient Background -->
+    <div class="gradient-bg"></div>
+    <div class="gradient-orbs">
+        <div class="orb orb-1"></div>
+        <div class="orb orb-2"></div>
+        <div class="orb orb-3"></div>
+    </div>
+
+    <!-- Main Container -->
+    <div class="app-container">
+        <!-- Header -->
+        <header class="header">
+            <div class="logo">
+                <div class="logo-icon">
+                    <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <circle cx="20" cy="20" r="18" stroke="url(#gradient1)" stroke-width="2" />
+                        <circle cx="20" cy="20" r="8" fill="url(#gradient1)" />
+                        <path d="M20 2C20 2 25 10 25 20C25 30 20 38 20 38" stroke="url(#gradient1)" stroke-width="2"
+                            stroke-linecap="round" />
+                        <path d="M20 2C20 2 15 10 15 20C15 30 20 38 20 38" stroke="url(#gradient1)" stroke-width="2"
+                            stroke-linecap="round" />
+                        <defs>
+                            <linearGradient id="gradient1" x1="0" y1="0" x2="40" y2="40">
+                                <stop offset="0%" stop-color="#6366f1" />
+                                <stop offset="100%" stop-color="#ec4899" />
+                            </linearGradient>
+                        </defs>
+                    </svg>
+                </div>
+                <span class="logo-text">Derm<span class="highlight">AI</span></span>
+            </div>
+            <nav class="nav">
+                <a href="#" class="nav-link active">Analysis</a>
+                <a href="#about" class="nav-link">About</a>
+                <a href="#technology" class="nav-link">Technology</a>
+            </nav>
+            <div class="status-badge" id="status-badge">
+                <span class="status-dot"></span>
+                <span class="status-text">Checking...</span>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Hero Section -->
+            <section class="hero">
+                <div class="hero-content">
+                    <h1 class="hero-title">
+                        AI-Powered <span class="gradient-text">Skin Lesion</span> Analysis
+                    </h1>
+                    <p class="hero-subtitle">
+                        Upload dermoscopic images for instant lesion segmentation using our
+                        state-of-the-art Attention U-Net deep learning model.
+                    </p>
+                </div>
+            </section>
+
+            <!-- Upload Section -->
+            <section class="upload-section">
+                <div class="upload-card" id="upload-area">
+                    <div class="upload-icon">
+                        <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <rect x="8" y="16" width="48" height="36" rx="4" stroke="currentColor" stroke-width="2" />
+                            <circle cx="24" cy="28" r="4" stroke="currentColor" stroke-width="2" />
+                            <path d="M8 44L24 32L36 40L56 28" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M32 8V16M28 12L32 8L36 12" stroke="currentColor" stroke-width="2"
+                                stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </div>
+                    <h3 class="upload-title">Drop your dermoscopic image here</h3>
+                    <p class="upload-subtitle">or click to browse • JPEG, PNG, WebP supported</p>
+                    <input type="file" id="file-input" accept="image/jpeg,image/png,image/webp" hidden>
+                    <button class="upload-btn" id="upload-btn">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                            <polyline points="17,8 12,3 7,8" />
+                            <line x1="12" y1="3" x2="12" y2="15" />
+                        </svg>
+                        Select Image
+                    </button>
+                </div>
+            </section>
+
+            <!-- Results Section (Hidden by default) -->
+            <section class="results-section hidden" id="results-section">
+                <div class="results-grid">
+                    <!-- Original Image -->
+                    <div class="result-card">
+                        <div class="card-header">
+                            <span class="card-icon">📷</span>
+                            <h3 class="card-title">Original Image</h3>
+                        </div>
+                        <div class="image-container">
+                            <img id="original-image" src="" alt="Original dermoscopic image">
+                        </div>
+                    </div>
+
+                    <!-- Segmentation Mask -->
+                    <div class="result-card">
+                        <div class="card-header">
+                            <span class="card-icon">🎯</span>
+                            <h3 class="card-title">Segmentation Mask</h3>
+                        </div>
+                        <div class="image-container">
+                            <img id="mask-image" src="" alt="Segmentation mask">
+                        </div>
+                    </div>
+
+                    <!-- Overlay -->
+                    <div class="result-card overlay-card">
+                        <div class="card-header">
+                            <span class="card-icon">🔬</span>
+                            <h3 class="card-title">Lesion Overlay</h3>
+                        </div>
+                        <div class="image-container">
+                            <img id="overlay-image" src="" alt="Overlay visualization">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Metrics Panel -->
+                <div class="metrics-panel">
+                    <div class="metric-card">
+                        <div class="metric-icon confidence-icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+                                <polyline points="22,4 12,14.01 9,11.01" />
+                            </svg>
+                        </div>
+                        <div class="metric-content">
+                            <span class="metric-value" id="confidence-value">--</span>
+                            <span class="metric-label">Confidence Score</span>
+                        </div>
+                    </div>
+                    <div class="metric-card">
+                        <div class="metric-icon area-icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="3" y="3" width="18" height="18" rx="2" />
+                                <circle cx="12" cy="12" r="4" />
+                            </svg>
+                        </div>
+                        <div class="metric-content">
+                            <span class="metric-value" id="area-value">--</span>
+                            <span class="metric-label">Lesion Area</span>
+                        </div>
+                    </div>
+                    <div class="metric-card">
+                        <div class="metric-icon model-icon">
+                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <polygon points="12,2 2,7 12,12 22,7" />
+                                <polyline points="2,17 12,22 22,17" />
+                                <polyline points="2,12 12,17 22,12" />
+                            </svg>
+                        </div>
+                        <div class="metric-content">
+                            <span class="metric-value model-name">Attention U-Net</span>
+                            <span class="metric-label">Model Architecture</span>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Action Buttons -->
+                <div class="action-buttons">
+                    <button class="btn btn-secondary" id="new-analysis-btn">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M23 4v6h-6" />
+                            <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
+                        </svg>
+                        New Analysis
+                    </button>
+                    <button class="btn btn-primary" id="download-btn">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+                            <polyline points="7,10 12,15 17,10" />
+                            <line x1="12" y1="15" x2="12" y2="3" />
+                        </svg>
+                        Download Results
+                    </button>
+                </div>
+            </section>
+
+            <!-- Loading State -->
+            <div class="loading-overlay hidden" id="loading-overlay">
+                <div class="loading-content">
+                    <div class="loading-spinner">
+                        <div class="spinner-ring"></div>
+                        <div class="spinner-ring"></div>
+                        <div class="spinner-ring"></div>
+                    </div>
+                    <p class="loading-text">Analyzing image...</p>
+                    <p class="loading-subtext">Running AI segmentation model</p>
+                </div>
+            </div>
+        </main>
+
+        <!-- About Section -->
+        <section class="info-section" id="about">
+            <div class="section-header">
+                <h2 class="section-title">About <span class="gradient-text">DermAI</span></h2>
+                <p class="section-subtitle">Empowering healthcare professionals with AI-assisted skin cancer detection
+                </p>
+            </div>
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <circle cx="12" cy="12" r="3" />
+                            <path
+                                d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
+                        </svg>
+                    </div>
+                    <h3>Advanced AI</h3>
+                    <p>Powered by Attention U-Net with MobileNetV2 encoder, trained on the ISIC 2018 dataset.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
+                        </svg>
+                    </div>
+                    <h3>Real-time Analysis</h3>
+                    <p>Get instant segmentation results with confidence scores and lesion area metrics.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                        </svg>
+                    </div>
+                    <h3>Privacy First</h3>
+                    <p>All processing happens locally. Your medical images never leave your environment.</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Technology Section -->
+        <section class="info-section" id="technology">
+            <div class="section-header">
+                <h2 class="section-title">The <span class="gradient-text">Technology</span></h2>
+                <p class="section-subtitle">State-of-the-art deep learning architecture for medical image segmentation
+                </p>
+            </div>
+            <div class="tech-grid">
+                <div class="tech-card">
+                    <div class="tech-header">
+                        <span class="tech-badge">Encoder</span>
+                        <h3>MobileNetV2</h3>
+                    </div>
+                    <p>Pre-trained on ImageNet, providing efficient feature extraction with inverted residuals and
+                        linear bottlenecks.</p>
+                </div>
+                <div class="tech-card">
+                    <div class="tech-header">
+                        <span class="tech-badge">Architecture</span>
+                        <h3>Attention U-Net</h3>
+                    </div>
+                    <p>Skip connections enhanced with attention gates to focus on lesion regions while suppressing
+                        irrelevant background features.</p>
+                </div>
+                <div class="tech-card">
+                    <div class="tech-header">
+                        <span class="tech-badge">Loss Function</span>
+                        <h3>Combined Loss</h3>
+                    </div>
+                    <p>Optimized with BCE, Dice, and Tversky losses to handle class imbalance and improve boundary
+                        precision.</p>
+                </div>
+                <div class="tech-card">
+                    <div class="tech-header">
+                        <span class="tech-badge">Training</span>
+                        <h3>Deep Supervision</h3>
+                    </div>
+                    <p>Multi-scale loss computation at different decoder levels for better gradient flow and feature
+                        learning.</p>
+                </div>
+            </div>
+        </section>
+
+        <!-- Disclaimer -->
+        <div class="disclaimer">
+            <div class="disclaimer-icon">⚠️</div>
+            <p><strong>Medical Disclaimer:</strong> This tool is for research and educational purposes only.
+                It should not be used as a substitute for professional medical advice, diagnosis, or treatment.
+                Always consult a qualified healthcare provider for medical concerns.</p>
+        </div>
+
+        <!-- Footer -->
+        <footer class="footer">
+            <p>© 2026 raid • Powered by PyTorch & FastAPI</p>
+            <p class="footer-tech">Built with Attention U-Net • Trained on ISIC 2018 Dataset</p>
+        </footer>
+    </div>
+
+    <!-- Scripts -->
+    <script src="app.js"></script>
+</body>
+
+</html>

client/styles.css

@@ -0,0 +1,975 @@
+/*
+ * DermAI - Skin Lesion Segmentation Application
+ * Modern Medical Theme Stylesheet
+ * ============================================
+ */
+
+/* ===== CSS VARIABLES ===== */
+:root {
+    /* Primary Colors - Medical Purple/Blue */
+    --primary-50: #f5f3ff;
+    --primary-100: #ede9fe;
+    --primary-200: #ddd6fe;
+    --primary-300: #c4b5fd;
+    --primary-400: #a78bfa;
+    --primary-500: #8b5cf6;
+    --primary-600: #7c3aed;
+    --primary-700: #6d28d9;
+    --primary-800: #5b21b6;
+    --primary-900: #4c1d95;
+
+    /* Accent Colors - Medical Pink/Magenta */
+    --accent-400: #f472b6;
+    --accent-500: #ec4899;
+    --accent-600: #db2777;
+
+    /* Success/Health Green */
+    --success-400: #4ade80;
+    --success-500: #22c55e;
+    --success-600: #16a34a;
+
+    /* Neutral Colors */
+    --neutral-50: #fafafa;
+    --neutral-100: #f4f4f5;
+    --neutral-200: #e4e4e7;
+    --neutral-300: #d4d4d8;
+    --neutral-400: #a1a1aa;
+    --neutral-500: #71717a;
+    --neutral-600: #52525b;
+    --neutral-700: #3f3f46;
+    --neutral-800: #27272a;
+    --neutral-900: #18181b;
+    --neutral-950: #09090b;
+
+    /* Semantic Colors */
+    --bg-primary: #0a0a0f;
+    --bg-secondary: #111118;
+    --bg-tertiary: #18181f;
+    --bg-card: rgba(24, 24, 31, 0.7);
+    --bg-card-hover: rgba(30, 30, 40, 0.8);
+    
+    --text-primary: #fafafa;
+    --text-secondary: #a1a1aa;
+    --text-muted: #71717a;
+
+    /* Gradients */
+    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
+    --gradient-accent: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
+    --gradient-success: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
+    --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
+
+    /* Shadows */
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
+    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
+    --shadow-glow: 0 0 40px rgba(139, 92, 246, 0.3);
+    --shadow-glow-accent: 0 0 40px rgba(236, 72, 153, 0.3);
+
+    /* Borders */
+    --border-primary: 1px solid rgba(255, 255, 255, 0.1);
+    --border-accent: 1px solid rgba(139, 92, 246, 0.3);
+    
+    /* Border Radius */
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.75rem;
+    --radius-xl: 1rem;
+    --radius-2xl: 1.5rem;
+    --radius-full: 9999px;
+
+    /* Transitions */
+    --transition-fast: 150ms ease;
+    --transition-base: 250ms ease;
+    --transition-slow: 350ms ease;
+    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    /* Typography */
+    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+}
+
+/* ===== RESET & BASE ===== */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: var(--font-sans);
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
+    min-height: 100vh;
+    overflow-x: hidden;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+    color: inherit;
+    text-decoration: none;
+}
+
+button {
+    font-family: inherit;
+    cursor: pointer;
+    border: none;
+    background: none;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+/* ===== ANIMATED BACKGROUND ===== */
+.gradient-bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: 
+        radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
+        radial-gradient(ellipse at 80% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
+        radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: -2;
+}
+
+.gradient-orbs {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: -1;
+    overflow: hidden;
+}
+
+.orb {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(80px);
+    opacity: 0.4;
+    animation: float 20s ease-in-out infinite;
+}
+
+.orb-1 {
+    width: 500px;
+    height: 500px;
+    background: var(--primary-600);
+    top: -200px;
+    right: -100px;
+    animation-delay: 0s;
+}
+
+.orb-2 {
+    width: 400px;
+    height: 400px;
+    background: var(--accent-500);
+    bottom: -150px;
+    left: -100px;
+    animation-delay: -7s;
+}
+
+.orb-3 {
+    width: 300px;
+    height: 300px;
+    background: var(--primary-500);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation-delay: -14s;
+}
+
+@keyframes float {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    25% { transform: translate(30px, -30px) scale(1.05); }
+    50% { transform: translate(-20px, 20px) scale(0.95); }
+    75% { transform: translate(-30px, -20px) scale(1.02); }
+}
+
+/* ===== APP CONTAINER ===== */
+.app-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* ===== HEADER ===== */
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1.5rem 0;
+    border-bottom: var(--border-primary);
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.logo-icon {
+    width: 40px;
+    height: 40px;
+}
+
+.logo-text {
+    font-size: 1.5rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+.logo-text .highlight {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.nav {
+    display: flex;
+    gap: 2rem;
+}
+
+.nav-link {
+    font-size: 0.9rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    transition: color var(--transition-fast);
+    position: relative;
+}
+
+.nav-link:hover,
+.nav-link.active {
+    color: var(--text-primary);
+}
+
+.nav-link.active::after {
+    content: '';
+    position: absolute;
+    bottom: -4px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: var(--gradient-primary);
+    border-radius: var(--radius-full);
+}
+
+.status-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: var(--bg-card);
+    border: var(--border-primary);
+    border-radius: var(--radius-full);
+    backdrop-filter: blur(10px);
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--neutral-500);
+    animation: pulse 2s ease-in-out infinite;
+}
+
+.status-badge.online .status-dot {
+    background: var(--success-500);
+}
+
+.status-badge.offline .status-dot {
+    background: #ef4444;
+}
+
+.status-text {
+    font-size: 0.8rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* ===== MAIN CONTENT ===== */
+.main-content {
+    flex: 1;
+    padding: 3rem 0;
+}
+
+/* ===== HERO SECTION ===== */
+.hero {
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+.hero-title {
+    font-size: clamp(2rem, 5vw, 3.5rem);
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    line-height: 1.1;
+    margin-bottom: 1rem;
+}
+
+.gradient-text {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-subtitle {
+    font-size: 1.125rem;
+    color: var(--text-secondary);
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+/* ===== UPLOAD SECTION ===== */
+.upload-section {
+    margin-bottom: 3rem;
+}
+
+.upload-card {
+    background: var(--bg-card);
+    border: 2px dashed rgba(139, 92, 246, 0.3);
+    border-radius: var(--radius-2xl);
+    padding: 4rem 2rem;
+    text-align: center;
+    transition: all var(--transition-base);
+    cursor: pointer;
+    backdrop-filter: blur(10px);
+}
+
+.upload-card:hover,
+.upload-card.dragover {
+    border-color: var(--primary-500);
+    background: var(--bg-card-hover);
+    box-shadow: var(--shadow-glow);
+    transform: translateY(-2px);
+}
+
+.upload-icon {
+    width: 80px;
+    height: 80px;
+    margin: 0 auto 1.5rem;
+    color: var(--primary-400);
+    opacity: 0.8;
+}
+
+.upload-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.upload-subtitle {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+    margin-bottom: 1.5rem;
+}
+
+.upload-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.875rem 1.5rem;
+    background: var(--gradient-primary);
+    color: white;
+    font-weight: 600;
+    font-size: 0.9rem;
+    border-radius: var(--radius-lg);
+    transition: all var(--transition-base);
+    box-shadow: var(--shadow-lg), 0 0 20px rgba(139, 92, 246, 0.2);
+}
+
+.upload-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-xl), 0 0 30px rgba(139, 92, 246, 0.3);
+}
+
+.upload-btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+/* ===== RESULTS SECTION ===== */
+.results-section {
+    animation: fadeIn 0.5s ease-out;
+}
+
+.results-section.hidden {
+    display: none;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.results-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.result-card {
+    background: var(--bg-card);
+    border: var(--border-primary);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+    backdrop-filter: blur(10px);
+    transition: all var(--transition-base);
+}
+
+.result-card:hover {
+    border-color: rgba(139, 92, 246, 0.3);
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-4px);
+}
+
+.card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1rem 1.25rem;
+    border-bottom: var(--border-primary);
+    background: rgba(255, 255, 255, 0.02);
+}
+
+.card-icon {
+    font-size: 1.25rem;
+}
+
+.card-title {
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+.image-container {
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--neutral-950);
+    padding: 1rem;
+}
+
+.image-container img {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: var(--radius-md);
+}
+
+/* ===== METRICS PANEL ===== */
+.metrics-panel {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.metric-card {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1.5rem;
+    background: var(--bg-card);
+    border: var(--border-primary);
+    border-radius: var(--radius-xl);
+    backdrop-filter: blur(10px);
+    transition: all var(--transition-base);
+}
+
+.metric-card:hover {
+    border-color: rgba(139, 92, 246, 0.3);
+    transform: translateY(-2px);
+}
+
+.metric-icon {
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-lg);
+    flex-shrink: 0;
+}
+
+.metric-icon svg {
+    width: 24px;
+    height: 24px;
+}
+
+.confidence-icon {
+    background: rgba(34, 197, 94, 0.1);
+    color: var(--success-400);
+}
+
+.area-icon {
+    background: rgba(139, 92, 246, 0.1);
+    color: var(--primary-400);
+}
+
+.model-icon {
+    background: rgba(236, 72, 153, 0.1);
+    color: var(--accent-400);
+}
+
+.metric-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.metric-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1.2;
+}
+
+.metric-value.model-name {
+    font-size: 1rem;
+    font-family: var(--font-mono);
+}
+
+.metric-label {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    font-weight: 500;
+}
+
+/* ===== ACTION BUTTONS ===== */
+.action-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+}
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.875rem 1.5rem;
+    font-weight: 600;
+    font-size: 0.9rem;
+    border-radius: var(--radius-lg);
+    transition: all var(--transition-base);
+}
+
+.btn svg {
+    width: 18px;
+    height: 18px;
+}
+
+.btn-primary {
+    background: var(--gradient-primary);
+    color: white;
+    box-shadow: var(--shadow-md), 0 0 20px rgba(139, 92, 246, 0.2);
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-lg), 0 0 30px rgba(139, 92, 246, 0.3);
+}
+
+.btn-secondary {
+    background: var(--bg-tertiary);
+    color: var(--text-primary);
+    border: var(--border-primary);
+}
+
+.btn-secondary:hover {
+    background: var(--bg-card-hover);
+    border-color: rgba(139, 92, 246, 0.3);
+}
+
+/* ===== LOADING OVERLAY ===== */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(10, 10, 15, 0.9);
+    backdrop-filter: blur(10px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.loading-overlay.hidden {
+    display: none;
+}
+
+.loading-content {
+    text-align: center;
+}
+
+.loading-spinner {
+    width: 80px;
+    height: 80px;
+    position: relative;
+    margin: 0 auto 1.5rem;
+}
+
+.spinner-ring {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    animation: spin 1.5s linear infinite;
+}
+
+.spinner-ring:nth-child(1) {
+    border-top-color: var(--primary-500);
+    animation-delay: 0s;
+}
+
+.spinner-ring:nth-child(2) {
+    width: 60%;
+    height: 60%;
+    top: 20%;
+    left: 20%;
+    border-right-color: var(--accent-500);
+    animation-delay: 0.2s;
+    animation-direction: reverse;
+}
+
+.spinner-ring:nth-child(3) {
+    width: 30%;
+    height: 30%;
+    top: 35%;
+    left: 35%;
+    border-bottom-color: var(--success-500);
+    animation-delay: 0.4s;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+.loading-text {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+}
+
+.loading-subtext {
+    font-size: 0.9rem;
+    color: var(--text-muted);
+}
+
+/* ===== INFO SECTIONS ===== */
+.info-section {
+    padding: 4rem 0;
+    border-top: var(--border-primary);
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 3rem;
+}
+
+.section-title {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 0.75rem;
+}
+
+.section-subtitle {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    max-width: 500px;
+    margin: 0 auto;
+}
+
+/* ===== FEATURES GRID ===== */
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+}
+
+.feature-card {
+    padding: 2rem;
+    background: var(--bg-card);
+    border: var(--border-primary);
+    border-radius: var(--radius-xl);
+    text-align: center;
+    transition: all var(--transition-base);
+    backdrop-filter: blur(10px);
+}
+
+.feature-card:hover {
+    border-color: rgba(139, 92, 246, 0.3);
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+}
+
+.feature-icon {
+    width: 60px;
+    height: 60px;
+    margin: 0 auto 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--gradient-primary);
+    border-radius: var(--radius-lg);
+}
+
+.feature-icon svg {
+    width: 28px;
+    height: 28px;
+    color: white;
+}
+
+.feature-card h3 {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin-bottom: 0.75rem;
+}
+
+.feature-card p {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+/* ===== TECH GRID ===== */
+.tech-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+}
+
+.tech-card {
+    padding: 1.5rem;
+    background: var(--bg-card);
+    border: var(--border-primary);
+    border-radius: var(--radius-xl);
+    transition: all var(--transition-base);
+    backdrop-filter: blur(10px);
+}
+
+.tech-card:hover {
+    border-color: rgba(139, 92, 246, 0.3);
+    transform: translateY(-2px);
+}
+
+.tech-header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+}
+
+.tech-badge {
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.25rem 0.5rem;
+    background: var(--gradient-primary);
+    color: white;
+    border-radius: var(--radius-sm);
+}
+
+.tech-header h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    font-family: var(--font-mono);
+}
+
+.tech-card p {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+/* ===== DISCLAIMER ===== */
+.disclaimer {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1.5rem;
+    background: rgba(234, 179, 8, 0.1);
+    border: 1px solid rgba(234, 179, 8, 0.3);
+    border-radius: var(--radius-xl);
+    margin: 2rem 0;
+}
+
+.disclaimer-icon {
+    font-size: 1.5rem;
+    flex-shrink: 0;
+}
+
+.disclaimer p {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+.disclaimer strong {
+    color: #fbbf24;
+}
+
+/* ===== FOOTER ===== */
+.footer {
+    padding: 2rem 0;
+    text-align: center;
+    border-top: var(--border-primary);
+}
+
+.footer p {
+    font-size: 0.875rem;
+    color: var(--text-muted);
+}
+
+.footer-tech {
+    font-size: 0.75rem;
+    margin-top: 0.5rem;
+    font-family: var(--font-mono);
+}
+
+/* ===== RESPONSIVE DESIGN ===== */
+@media (max-width: 1024px) {
+    .results-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .results-grid .overlay-card {
+        grid-column: span 2;
+    }
+    
+    .metrics-panel {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .metrics-panel .metric-card:last-child {
+        grid-column: span 2;
+    }
+    
+    .features-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .features-grid .feature-card:last-child {
+        grid-column: span 2;
+    }
+}
+
+@media (max-width: 768px) {
+    .app-container {
+        padding: 0 1rem;
+    }
+    
+    .header {
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
+    
+    .nav {
+        order: 3;
+        width: 100%;
+        justify-content: center;
+        gap: 1.5rem;
+    }
+    
+    .results-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .results-grid .overlay-card {
+        grid-column: span 1;
+    }
+    
+    .metrics-panel {
+        grid-template-columns: 1fr;
+    }
+    
+    .metrics-panel .metric-card:last-child {
+        grid-column: span 1;
+    }
+    
+    .features-grid,
+    .tech-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .features-grid .feature-card:last-child {
+        grid-column: span 1;
+    }
+    
+    .action-buttons {
+        flex-direction: column;
+    }
+    
+    .action-buttons .btn {
+        width: 100%;
+        justify-content: center;
+    }
+    
+    .upload-card {
+        padding: 2.5rem 1.5rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero-title {
+        font-size: 1.75rem;
+    }
+    
+    .hero-subtitle {
+        font-size: 1rem;
+    }
+    
+    .metric-card {
+        flex-direction: column;
+        text-align: center;
+    }
+}
+
+/* ===== UTILITY CLASSES ===== */
+.hidden {
+    display: none !important;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+}

notebooks/mobileNetUnetAttention.py

@@ -0,0 +1,844 @@
+import os
+import numpy as np
+import torch
+import torch.nn as nn
+import torch.optim as optim
+from torch.utils.data import Dataset, DataLoader
+import torchvision.transforms as transforms
+from torchvision.models import mobilenet_v2
+import matplotlib.pyplot as plt
+from tqdm.notebook import tqdm
+import cv2
+from glob import glob
+import albumentations as A
+from albumentations.pytorch import ToTensorV2
+
+# Set random seeds
+np.random.seed(42)
+torch.manual_seed(42)
+if torch.cuda.is_available():
+    torch.cuda.manual_seed(42)
+
+# Device configuration
+device = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
+print(f"Using device: {device}")
+
+# Paths
+TRAIN_IMG_PATH = '/kaggle/input/isic-2018/data/images/train'
+TRAIN_MASK_PATH = '/kaggle/input/isic-2018/data/annotations/train'
+VAL_IMG_PATH = '/kaggle/input/isic-2018/data/images/val'
+VAL_MASK_PATH = '/kaggle/input/isic-2018/data/annotations/val'
+TEST_IMG_PATH = '/kaggle/input/isic-2018/data/images/test'
+TEST_MASK_PATH = '/kaggle/input/isic-2018/data/annotations/test'
+
+IMG_SIZE = 256
+BATCH_SIZE = 32
+EPOCHS = 50
+LEARNING_RATE = 1e-4
+ENCODER_FREEZE_EPOCHS = 5  # Number of epochs to freeze encoder
+
+
+# =============================================
+# 1. ADVANCED DATA AUGMENTATION (Albumentations)
+# =============================================
+
+def get_train_transforms(img_size=IMG_SIZE):
+    """
+    Advanced augmentation pipeline for training:
+    - Horizontal/Vertical Flips: Lesions are orientation-independent
+    - Random Rotation: Skin images can be taken at any angle
+    - Color Jitter: To handle different camera lighting and skin tones
+    - CoarseDropout (Cutout): Forces model to look at edges if center is obscured
+    """
+    return A.Compose([
+        A.Resize(img_size, img_size),
+        # Geometric augmentations
+        A.HorizontalFlip(p=0.5),
+        A.VerticalFlip(p=0.5),
+        A.RandomRotate90(p=0.5),
+        # Using Affine instead of ShiftScaleRotate (recommended in Albumentations v2.x)
+        A.Affine(
+            translate_percent={"x": (-0.1, 0.1), "y": (-0.1, 0.1)},
+            scale=(0.8, 1.2),
+            rotate=(-45, 45),
+            border_mode=cv2.BORDER_REFLECT,  # Use border_mode instead of mode
+            p=0.5
+        ),
+        # Elastic deformation for shape variation
+        A.ElasticTransform(alpha=120, sigma=120 * 0.05, p=0.3),
+        # Color augmentations
+        A.ColorJitter(
+            brightness=0.2,
+            contrast=0.2,
+            saturation=0.2,
+            hue=0.1,
+            p=0.5
+        ),
+        A.RandomBrightnessContrast(brightness_limit=0.2, contrast_limit=0.2, p=0.5),
+        A.HueSaturationValue(hue_shift_limit=10, sat_shift_limit=20, val_shift_limit=10, p=0.3),
+        # Blur and noise augmentations
+        A.GaussianBlur(blur_limit=(3, 5), p=0.2),
+        A.GaussNoise(std_range=(0.02, 0.1), p=0.2),  # Updated for Albumentations v2.x
+        # CoarseDropout (Cutout): Forces the model to look at edges (Albumentations v2.x API)
+        A.CoarseDropout(
+            num_holes_range=(1, 8),
+            hole_height_range=(img_size // 16, img_size // 8),
+            hole_width_range=(img_size // 16, img_size // 8),
+            fill=0.0,       # Fill with black (numeric value, not string)
+            fill_mask=0.0,  # Fill mask with 0 (background)
+            p=0.5
+        ),
+        # Normalize
+        A.Normalize(mean=(0.485, 0.456, 0.406), std=(0.229, 0.224, 0.225)),
+        ToTensorV2(),
+    ])
+
+
+def get_val_transforms(img_size=IMG_SIZE):
+    """Minimal transforms for validation/test (only resize and normalize)"""
+    return A.Compose([
+        A.Resize(img_size, img_size),
+        A.Normalize(mean=(0.485, 0.456, 0.406), std=(0.229, 0.224, 0.225)),
+        ToTensorV2(),
+    ])
+
+
+# Custom Dataset with Albumentations
+class ISICDataset(Dataset):
+    def __init__(self, img_paths, mask_paths, transform=None, img_size=IMG_SIZE):
+        self.img_paths = img_paths
+        self.mask_paths = mask_paths
+        self.transform = transform
+        self.img_size = img_size
+        
+    def __len__(self):
+        return len(self.img_paths)
+    
+    def __getitem__(self, idx):
+        # Load image
+        img = cv2.imread(self.img_paths[idx])
+        img = cv2.cvtColor(img, cv2.COLOR_BGR2RGB)
+        
+        # Load mask
+        mask = cv2.imread(self.mask_paths[idx], cv2.IMREAD_GRAYSCALE)
+        mask = mask / 255.0  # Normalize mask to [0, 1]
+        
+        # Apply augmentations
+        if self.transform:
+            transformed = self.transform(image=img, mask=mask)
+            img = transformed['image']
+            mask = transformed['mask']
+        else:
+            # Fallback if no transform (shouldn't happen)
+            img = cv2.resize(img, (self.img_size, self.img_size))
+            img = img / 255.0
+            img = torch.FloatTensor(np.transpose(img, (2, 0, 1)))
+            mask = cv2.resize(mask, (self.img_size, self.img_size))
+            mask = torch.FloatTensor(mask)
+        
+        # Ensure mask has channel dimension
+        if mask.ndim == 2:
+            mask = mask.unsqueeze(0)
+        
+        return img.float(), mask.float()
+
+
+def get_matching_files(img_dir, mask_dir):
+    """Find matching image and mask pairs by filename"""
+    img_files = {}
+    for ext in ['*.jpg', '*.jpeg', '*.png', '*.bmp']:
+        for path in glob(os.path.join(img_dir, ext)):
+            basename = os.path.splitext(os.path.basename(path))[0]
+            img_files[basename] = path
+    
+    mask_files = {}
+    for ext in ['*.jpg', '*.jpeg', '*.png', '*.bmp']:
+        for path in glob(os.path.join(mask_dir, ext)):
+            basename = os.path.splitext(os.path.basename(path))[0]
+            basename = basename.replace('_segmentation', '').replace('_mask', '')
+            mask_files[basename] = path
+    
+    common = set(img_files.keys()) & set(mask_files.keys())
+    
+    img_paths = [img_files[k] for k in sorted(common)]
+    mask_paths = [mask_files[k] for k in sorted(common)]
+    
+    return img_paths, mask_paths
+
+
+# =============================================
+# 3. ARCHITECTURE REFINEMENTS - Attention Gate
+# =============================================
+
+class AttentionGate(nn.Module):
+    """
+    Attention U-Net gate for skip connections.
+    Helps the decoder focus on the lesion and ignore background noise/hairs.
+    """
+    def __init__(self, F_g, F_l, F_int):
+        """
+        Args:
+            F_g: Number of channels in gating signal (from decoder)
+            F_l: Number of channels in skip connection (from encoder)
+            F_int: Number of intermediate channels
+        """
+        super(AttentionGate, self).__init__()
+        
+        self.W_g = nn.Sequential(
+            nn.Conv2d(F_g, F_int, kernel_size=1, stride=1, padding=0, bias=True),
+            nn.BatchNorm2d(F_int)
+        )
+        
+        self.W_x = nn.Sequential(
+            nn.Conv2d(F_l, F_int, kernel_size=1, stride=1, padding=0, bias=True),
+            nn.BatchNorm2d(F_int)
+        )
+        
+        self.psi = nn.Sequential(
+            nn.Conv2d(F_int, 1, kernel_size=1, stride=1, padding=0, bias=True),
+            nn.BatchNorm2d(1),
+            nn.Sigmoid()
+        )
+        
+        self.relu = nn.ReLU(inplace=True)
+        
+    def forward(self, g, x):
+        """
+        Args:
+            g: Gating signal from decoder (coarse features)
+            x: Skip connection from encoder (fine features)
+        """
+        g1 = self.W_g(g)
+        x1 = self.W_x(x)
+        
+        # Upsample g1 to match x1's spatial size if needed
+        if g1.shape[2:] != x1.shape[2:]:
+            g1 = nn.functional.interpolate(g1, size=x1.shape[2:], mode='bilinear', align_corners=True)
+        
+        psi = self.relu(g1 + x1)
+        psi = self.psi(psi)
+        
+        return x * psi
+
+
+# Boundary Refinement Head
+class BoundaryRefinementHead(nn.Module):
+    def __init__(self, in_channels, filters=64):
+        super(BoundaryRefinementHead, self).__init__()
+        self.conv1 = nn.Conv2d(in_channels, filters, kernel_size=3, padding=1)
+        self.relu1 = nn.ReLU(inplace=True)
+        self.conv2 = nn.Conv2d(filters, filters, kernel_size=3, padding=1)
+        self.relu2 = nn.ReLU(inplace=True)
+        self.conv3 = nn.Conv2d(filters, 1, kernel_size=1)
+        self.sigmoid = nn.Sigmoid()
+        
+    def forward(self, x):
+        x = self.relu1(self.conv1(x))
+        x = self.relu2(self.conv2(x))
+        x = self.sigmoid(self.conv3(x))
+        return x
+
+
+# =============================================
+# 3. ARCHITECTURE - Attention U-Net with Deep Supervision
+# =============================================
+
+class AttentionUNetMobileNet(nn.Module):
+    """
+    Enhanced U-Net with:
+    - MobileNetV2 encoder (pre-trained)
+    - Attention Gates on skip connections
+    - Deep Supervision (multi-scale loss)
+    - Encoder freezing support for first N epochs
+    """
+    def __init__(self, deep_supervision=True):
+        super(AttentionUNetMobileNet, self).__init__()
+        self.deep_supervision = deep_supervision
+        
+        # Encoder (MobileNetV2 - pretrained)
+        mobilenet = mobilenet_v2(weights='DEFAULT')
+        self.encoder_features = mobilenet.features
+        
+        # Attention Gates for skip connections
+        self.att1 = AttentionGate(F_g=256, F_l=96, F_int=64)
+        self.att2 = AttentionGate(F_g=128, F_l=32, F_int=32)
+        self.att3 = AttentionGate(F_g=64, F_l=24, F_int=16)
+        self.att4 = AttentionGate(F_g=32, F_l=16, F_int=8)
+        
+        # Decoder with skip connections
+        self.up1 = nn.ConvTranspose2d(1280, 256, kernel_size=2, stride=2)
+        self.dec1_conv1 = nn.Conv2d(256 + 96, 256, kernel_size=3, padding=1)
+        self.dec1_bn1 = nn.BatchNorm2d(256)
+        self.dec1_relu1 = nn.ReLU(inplace=True)
+        self.dec1_conv2 = nn.Conv2d(256, 256, kernel_size=3, padding=1)
+        self.dec1_bn2 = nn.BatchNorm2d(256)
+        self.dec1_relu2 = nn.ReLU(inplace=True)
+        
+        self.up2 = nn.ConvTranspose2d(256, 128, kernel_size=2, stride=2)
+        self.dec2_conv1 = nn.Conv2d(128 + 32, 128, kernel_size=3, padding=1)
+        self.dec2_bn1 = nn.BatchNorm2d(128)
+        self.dec2_relu1 = nn.ReLU(inplace=True)
+        self.dec2_conv2 = nn.Conv2d(128, 128, kernel_size=3, padding=1)
+        self.dec2_bn2 = nn.BatchNorm2d(128)
+        self.dec2_relu2 = nn.ReLU(inplace=True)
+        
+        self.up3 = nn.ConvTranspose2d(128, 64, kernel_size=2, stride=2)
+        self.dec3_conv1 = nn.Conv2d(64 + 24, 64, kernel_size=3, padding=1)
+        self.dec3_bn1 = nn.BatchNorm2d(64)
+        self.dec3_relu1 = nn.ReLU(inplace=True)
+        self.dec3_conv2 = nn.Conv2d(64, 64, kernel_size=3, padding=1)
+        self.dec3_bn2 = nn.BatchNorm2d(64)
+        self.dec3_relu2 = nn.ReLU(inplace=True)
+        
+        self.up4 = nn.ConvTranspose2d(64, 32, kernel_size=2, stride=2)
+        self.dec4_conv1 = nn.Conv2d(32 + 16, 32, kernel_size=3, padding=1)
+        self.dec4_bn1 = nn.BatchNorm2d(32)
+        self.dec4_relu1 = nn.ReLU(inplace=True)
+        self.dec4_conv2 = nn.Conv2d(32, 32, kernel_size=3, padding=1)
+        self.dec4_bn2 = nn.BatchNorm2d(32)
+        self.dec4_relu2 = nn.ReLU(inplace=True)
+        
+        # Additional upsampling to reach 256x256
+        self.up5 = nn.ConvTranspose2d(32, 16, kernel_size=2, stride=2)
+        self.dec5_conv1 = nn.Conv2d(16, 16, kernel_size=3, padding=1)
+        self.dec5_bn1 = nn.BatchNorm2d(16)
+        self.dec5_relu1 = nn.ReLU(inplace=True)
+        self.dec5_conv2 = nn.Conv2d(16, 16, kernel_size=3, padding=1)
+        self.dec5_bn2 = nn.BatchNorm2d(16)
+        self.dec5_relu2 = nn.ReLU(inplace=True)
+        
+        # Main segmentation output
+        self.seg_output = nn.Sequential(
+            nn.Conv2d(16, 1, kernel_size=1),
+            nn.Sigmoid()
+        )
+        
+        # Boundary refinement head
+        self.boundary_head = BoundaryRefinementHead(16, filters=64)
+        
+        # Deep supervision outputs (at different scales)
+        if self.deep_supervision:
+            self.ds_out1 = nn.Sequential(
+                nn.Conv2d(256, 1, kernel_size=1),
+                nn.Sigmoid()
+            )
+            self.ds_out2 = nn.Sequential(
+                nn.Conv2d(128, 1, kernel_size=1),
+                nn.Sigmoid()
+            )
+            self.ds_out3 = nn.Sequential(
+                nn.Conv2d(64, 1, kernel_size=1),
+                nn.Sigmoid()
+            )
+            self.ds_out4 = nn.Sequential(
+                nn.Conv2d(32, 1, kernel_size=1),
+                nn.Sigmoid()
+            )
+    
+    def freeze_encoder(self, num_layers=7):
+        """Freeze the first N layers of the encoder to preserve pretrained features"""
+        for idx, layer in enumerate(self.encoder_features):
+            if idx < num_layers:
+                for param in layer.parameters():
+                    param.requires_grad = False
+        print(f"Froze first {num_layers} encoder layers")
+    
+    def unfreeze_encoder(self):
+        """Unfreeze all encoder layers for fine-tuning"""
+        for layer in self.encoder_features:
+            for param in layer.parameters():
+                param.requires_grad = True
+        print("Unfroze all encoder layers")
+        
+    def forward(self, x):
+        # Encoder with skip connections
+        skips = []
+        for idx, layer in enumerate(self.encoder_features):
+            x = layer(x)
+            if idx in [1, 3, 6, 13, 18]:  # Save skip connections
+                skips.append(x)
+        
+        ds_outputs = []  # Deep supervision outputs
+        
+        # Decoder Stage 1
+        d1 = self.up1(x)
+        skip1_att = self.att1(d1, skips[3])  # Apply attention
+        d1 = torch.cat([d1, skip1_att], dim=1)
+        d1 = self.dec1_relu1(self.dec1_bn1(self.dec1_conv1(d1)))
+        d1 = self.dec1_relu2(self.dec1_bn2(self.dec1_conv2(d1)))
+        if self.deep_supervision and self.training:
+            ds_outputs.append(self.ds_out1(d1))
+        
+        # Decoder Stage 2
+        d2 = self.up2(d1)
+        skip2_att = self.att2(d2, skips[2])
+        d2 = torch.cat([d2, skip2_att], dim=1)
+        d2 = self.dec2_relu1(self.dec2_bn1(self.dec2_conv1(d2)))
+        d2 = self.dec2_relu2(self.dec2_bn2(self.dec2_conv2(d2)))
+        if self.deep_supervision and self.training:
+            ds_outputs.append(self.ds_out2(d2))
+        
+        # Decoder Stage 3
+        d3 = self.up3(d2)
+        skip3_att = self.att3(d3, skips[1])
+        d3 = torch.cat([d3, skip3_att], dim=1)
+        d3 = self.dec3_relu1(self.dec3_bn1(self.dec3_conv1(d3)))
+        d3 = self.dec3_relu2(self.dec3_bn2(self.dec3_conv2(d3)))
+        if self.deep_supervision and self.training:
+            ds_outputs.append(self.ds_out3(d3))
+        
+        # Decoder Stage 4
+        d4 = self.up4(d3)
+        skip4_att = self.att4(d4, skips[0])
+        d4 = torch.cat([d4, skip4_att], dim=1)
+        d4 = self.dec4_relu1(self.dec4_bn1(self.dec4_conv1(d4)))
+        d4 = self.dec4_relu2(self.dec4_bn2(self.dec4_conv2(d4)))
+        if self.deep_supervision and self.training:
+            ds_outputs.append(self.ds_out4(d4))
+        
+        # Final upsampling to 256x256
+        d5 = self.up5(d4)
+        d5 = self.dec5_relu1(self.dec5_bn1(self.dec5_conv1(d5)))
+        d5 = self.dec5_relu2(self.dec5_bn2(self.dec5_conv2(d5)))
+        
+        # Main output
+        seg_output = self.seg_output(d5)
+        
+        # Boundary refinement
+        boundary_output = self.boundary_head(d5)
+        
+        # Average outputs
+        final_output = (seg_output + boundary_output) / 2
+        
+        if self.deep_supervision and self.training:
+            return final_output, ds_outputs
+        return final_output
+
+
+# =============================================
+# 4. LOSS FUNCTION TUNING - Tversky Loss + BCE/Dice weighting
+# =============================================
+
+class TverskyLoss(nn.Module):
+    """
+    Tversky Loss: A generalization of Dice loss that allows you to 
+    penalize False Negatives (missing part of a lesion) more than False Positives.
+    
+    Useful for class imbalance where lesion is much smaller than background.
+    """
+    def __init__(self, alpha=0.7, beta=0.3, smooth=1e-7):
+        """
+        Args:
+            alpha: Weight for False Negatives (higher = penalize FN more)
+            beta: Weight for False Positives
+            smooth: Smoothing factor to avoid division by zero
+        """
+        super(TverskyLoss, self).__init__()
+        self.alpha = alpha
+        self.beta = beta
+        self.smooth = smooth
+        
+    def forward(self, pred, target):
+        # Flatten predictions and targets
+        pred = pred.view(-1)
+        target = target.view(-1)
+        
+        # True Positives, False Negatives, False Positives
+        TP = (pred * target).sum()
+        FN = (target * (1 - pred)).sum()
+        FP = ((1 - target) * pred).sum()
+        
+        tversky = (TP + self.smooth) / (TP + self.alpha * FN + self.beta * FP + self.smooth)
+        
+        return 1 - tversky
+
+
+# Dice Coefficient metric
+def dice_coefficient(pred, target, threshold=0.5, smooth=1e-7):
+    pred = (pred > threshold).float()
+    target = (target > threshold).float()
+    intersection = (pred * target).sum()
+    dice = (2. * intersection + smooth) / (pred.sum() + target.sum() + smooth)
+    return dice.item()
+
+
+# Dice Loss
+class DiceLoss(nn.Module):
+    def __init__(self, smooth=1e-7):
+        super(DiceLoss, self).__init__()
+        self.smooth = smooth
+        
+    def forward(self, pred, target):
+        intersection = (pred * target).sum(dim=(2, 3))
+        dice = (2. * intersection + self.smooth) / (pred.sum(dim=(2, 3)) + target.sum(dim=(2, 3)) + self.smooth)
+        return 1 - dice.mean()
+
+
+# Combined Loss with Tversky + BCE + Dice
+class CombinedLoss(nn.Module):
+    """
+    Enhanced loss function combining:
+    - BCE Loss (pixel-wise accuracy)
+    - Dice Loss (overlap quality)  
+    - Tversky Loss (class imbalance handling)
+    
+    Weights: 0.3 BCE / 0.4 Dice / 0.3 Tversky (prioritizing Dice for overlap quality)
+    """
+    def __init__(self, bce_weight=0.3, dice_weight=0.4, tversky_weight=0.3, 
+                 tversky_alpha=0.7, tversky_beta=0.3):
+        super(CombinedLoss, self).__init__()
+        self.bce = nn.BCELoss()
+        self.dice = DiceLoss()
+        self.tversky = TverskyLoss(alpha=tversky_alpha, beta=tversky_beta)
+        self.bce_weight = bce_weight
+        self.dice_weight = dice_weight
+        self.tversky_weight = tversky_weight
+        
+    def forward(self, pred, target):
+        bce_loss = self.bce(pred, target)
+        dice_loss = self.dice(pred, target)
+        tversky_loss = self.tversky(pred, target)
+        return (self.bce_weight * bce_loss + 
+                self.dice_weight * dice_loss + 
+                self.tversky_weight * tversky_loss)
+
+
+class DeepSupervisionLoss(nn.Module):
+    """
+    Loss function for deep supervision with multi-scale outputs.
+    Calculates loss at different decoder scales and averages them.
+    """
+    def __init__(self, base_criterion, weights=None):
+        super(DeepSupervisionLoss, self).__init__()
+        self.base_criterion = base_criterion
+        # Weights for each deep supervision output (shallower = less weight)
+        self.weights = weights or [0.5, 0.3, 0.2, 0.1]
+        
+    def forward(self, main_output, ds_outputs, target):
+        # Main output loss (full weight)
+        loss = self.base_criterion(main_output, target)
+        
+        # Deep supervision losses at different scales
+        for i, ds_out in enumerate(ds_outputs):
+            # Upsample deep supervision output to target size
+            ds_upsampled = nn.functional.interpolate(
+                ds_out, size=target.shape[2:], mode='bilinear', align_corners=True
+            )
+            loss += self.weights[i] * self.base_criterion(ds_upsampled, target)
+        
+        return loss
+
+
+# =============================================
+# TRAINING AND VALIDATION FUNCTIONS
+# =============================================
+
+def train_epoch(model, dataloader, criterion, optimizer, device, deep_supervision=True):
+    """Training function with deep supervision support"""
+    model.train()
+    running_loss = 0.0
+    running_acc = 0.0
+    running_dice = 0.0
+    
+    pbar = tqdm(dataloader, desc='Training')
+    for images, masks in pbar:
+        images = images.to(device)
+        masks = masks.to(device)
+        
+        optimizer.zero_grad()
+        
+        if deep_supervision:
+            outputs, ds_outputs = model(images)
+            loss = criterion(outputs, ds_outputs, masks)
+        else:
+            outputs = model(images)
+            loss = criterion.base_criterion(outputs, masks)
+        
+        loss.backward()
+        optimizer.step()
+        
+        # Metrics (use main output)
+        running_loss += loss.item()
+        acc = ((outputs > 0.5).float() == masks).float().mean()
+        running_acc += acc.item()
+        running_dice += dice_coefficient(outputs, masks)
+        
+        pbar.set_postfix({'loss': loss.item(), 'acc': acc.item()})
+    
+    epoch_loss = running_loss / len(dataloader)
+    epoch_acc = running_acc / len(dataloader)
+    epoch_dice = running_dice / len(dataloader)
+    
+    return epoch_loss, epoch_acc, epoch_dice
+
+
+def validate_epoch(model, dataloader, criterion, device):
+    """Validation function (no deep supervision during eval)"""
+    model.eval()
+    running_loss = 0.0
+    running_acc = 0.0
+    running_dice = 0.0
+    
+    # Get base criterion for validation (no deep supervision)
+    if hasattr(criterion, 'base_criterion'):
+        val_criterion = criterion.base_criterion
+    else:
+        val_criterion = criterion
+    
+    with torch.no_grad():
+        pbar = tqdm(dataloader, desc='Validation')
+        for images, masks in pbar:
+            images = images.to(device)
+            masks = masks.to(device)
+            
+            outputs = model(images)  # No deep supervision during eval
+            loss = val_criterion(outputs, masks)
+            
+            running_loss += loss.item()
+            acc = ((outputs > 0.5).float() == masks).float().mean()
+            running_acc += acc.item()
+            running_dice += dice_coefficient(outputs, masks)
+            
+            pbar.set_postfix({'loss': loss.item(), 'acc': acc.item()})
+    
+    epoch_loss = running_loss / len(dataloader)
+    epoch_acc = running_acc / len(dataloader)
+    epoch_dice = running_dice / len(dataloader)
+    
+    return epoch_loss, epoch_acc, epoch_dice
+
+
+# =============================================
+# MAIN EXECUTION
+# =============================================
+
+# Load datasets
+print("Loading training data...")
+train_img_paths, train_mask_paths = get_matching_files(TRAIN_IMG_PATH, TRAIN_MASK_PATH)
+print(f"Found {len(train_img_paths)} training pairs")
+
+print("\nLoading validation data...")
+val_img_paths, val_mask_paths = get_matching_files(VAL_IMG_PATH, VAL_MASK_PATH)
+print(f"Found {len(val_img_paths)} validation pairs")
+
+print("\nLoading test data...")
+test_img_paths, test_mask_paths = get_matching_files(TEST_IMG_PATH, TEST_MASK_PATH)
+print(f"Found {len(test_img_paths)} test pairs")
+
+# Create datasets with augmentation transforms
+train_dataset = ISICDataset(train_img_paths, train_mask_paths, transform=get_train_transforms())
+val_dataset = ISICDataset(val_img_paths, val_mask_paths, transform=get_val_transforms())
+test_dataset = ISICDataset(test_img_paths, test_mask_paths, transform=get_val_transforms())
+
+train_loader = DataLoader(train_dataset, batch_size=BATCH_SIZE, shuffle=True, num_workers=2)
+val_loader = DataLoader(val_dataset, batch_size=BATCH_SIZE, shuffle=False, num_workers=2)
+test_loader = DataLoader(test_dataset, batch_size=BATCH_SIZE, shuffle=False, num_workers=2)
+
+# Build model with Attention U-Net and Deep Supervision
+print("\nBuilding Attention U-Net model with Deep Supervision...")
+model = AttentionUNetMobileNet(deep_supervision=True).to(device)
+
+# Freeze encoder for first N epochs
+model.freeze_encoder(num_layers=7)
+
+# Loss function with improved weighting (0.3 BCE / 0.4 Dice / 0.3 Tversky)
+base_criterion = CombinedLoss(
+    bce_weight=0.3, 
+    dice_weight=0.4, 
+    tversky_weight=0.3,
+    tversky_alpha=0.7,  # Higher penalty for False Negatives
+    tversky_beta=0.3     # Lower penalty for False Positives
+)
+criterion = DeepSupervisionLoss(base_criterion)
+
+# Optimizer
+optimizer = optim.Adam(model.parameters(), lr=LEARNING_RATE)
+
+# Learning Rate Scheduler (ReduceLROnPlateau)
+scheduler = optim.lr_scheduler.ReduceLROnPlateau(
+    optimizer, 
+    mode='min',          # Reduce LR when val_loss stops decreasing
+    patience=3,          # Wait 3 epochs before reducing
+    factor=0.5,          # Reduce LR by half
+    min_lr=1e-7          # Minimum LR
+)
+
+total_params = sum(p.numel() for p in model.parameters())
+trainable_params = sum(p.numel() for p in model.parameters() if p.requires_grad)
+print(f"Model built. Total parameters: {total_params:,}")
+print(f"Trainable parameters: {trainable_params:,}")
+
+# Training loop with early stopping, LR scheduling, and encoder unfreezing
+print("\nStarting training...")
+print(f"Encoder will be unfrozen after epoch {ENCODER_FREEZE_EPOCHS}")
+history = {
+    'train_loss': [], 'train_acc': [], 'train_dice': [],
+    'val_loss': [], 'val_acc': [], 'val_dice': [],
+    'learning_rate': []
+}
+
+best_val_loss = float('inf')
+patience = 7  # Increased patience due to LR scheduling
+patience_counter = 0
+
+for epoch in range(EPOCHS):
+    print(f"\nEpoch {epoch+1}/{EPOCHS}")
+    
+    # Unfreeze encoder after N epochs (for fine-tuning)
+    if epoch == ENCODER_FREEZE_EPOCHS:
+        model.unfreeze_encoder()
+        print(f"Starting fine-tuning of encoder layers")
+    
+    # Log current learning rate
+    current_lr = optimizer.param_groups[0]['lr']
+    history['learning_rate'].append(current_lr)
+    print(f"Current LR: {current_lr:.2e}")
+    
+    # Train
+    train_loss, train_acc, train_dice = train_epoch(
+        model, train_loader, criterion, optimizer, device, deep_supervision=True
+    )
+    history['train_loss'].append(train_loss)
+    history['train_acc'].append(train_acc)
+    history['train_dice'].append(train_dice)
+    
+    # Validate
+    val_loss, val_acc, val_dice = validate_epoch(model, val_loader, criterion, device)
+    history['val_loss'].append(val_loss)
+    history['val_acc'].append(val_acc)
+    history['val_dice'].append(val_dice)
+    
+    print(f"Train Loss: {train_loss:.4f}, Acc: {train_acc:.4f}, Dice: {train_dice:.4f}")
+    print(f"Val Loss: {val_loss:.4f}, Acc: {val_acc:.4f}, Dice: {val_dice:.4f}")
+    
+    # Step the learning rate scheduler based on validation loss
+    scheduler.step(val_loss)
+    
+    # Early stopping
+    if val_loss < best_val_loss:
+        best_val_loss = val_loss
+        patience_counter = 0
+        torch.save(model.state_dict(), 'best_model.pth')
+        print("✓ Model saved!")
+    else:
+        patience_counter += 1
+        if patience_counter >= patience:
+            print(f"\nEarly stopping triggered after {epoch+1} epochs")
+            break
+
+# Load best model
+model.load_state_dict(torch.load('best_model.pth'))
+
+# Plot training history
+fig, axes = plt.subplots(2, 2, figsize=(14, 10))
+
+# Loss
+axes[0, 0].plot(history['train_loss'], label='Train Loss')
+axes[0, 0].plot(history['val_loss'], label='Val Loss')
+axes[0, 0].set_title('Model Loss (BCE + Dice + Tversky)', fontsize=14, fontweight='bold')
+axes[0, 0].set_xlabel('Epoch')
+axes[0, 0].set_ylabel('Loss')
+axes[0, 0].legend()
+axes[0, 0].grid(True, alpha=0.3)
+
+# Accuracy
+axes[0, 1].plot(history['train_acc'], label='Train Accuracy')
+axes[0, 1].plot(history['val_acc'], label='Val Accuracy')
+axes[0, 1].set_title('Model Accuracy', fontsize=14, fontweight='bold')
+axes[0, 1].set_xlabel('Epoch')
+axes[0, 1].set_ylabel('Accuracy')
+axes[0, 1].legend()
+axes[0, 1].grid(True, alpha=0.3)
+
+# Dice Coefficient
+axes[1, 0].plot(history['train_dice'], label='Train Dice')
+axes[1, 0].plot(history['val_dice'], label='Val Dice')
+axes[1, 0].set_title('Dice Coefficient', fontsize=14, fontweight='bold')
+axes[1, 0].set_xlabel('Epoch')
+axes[1, 0].set_ylabel('Dice')
+axes[1, 0].legend()
+axes[1, 0].grid(True, alpha=0.3)
+
+# Learning Rate
+axes[1, 1].plot(history['learning_rate'], label='Learning Rate', color='orange')
+axes[1, 1].set_title('Learning Rate Schedule', fontsize=14, fontweight='bold')
+axes[1, 1].set_xlabel('Epoch')
+axes[1, 1].set_ylabel('Learning Rate')
+axes[1, 1].set_yscale('log')
+axes[1, 1].legend()
+axes[1, 1].grid(True, alpha=0.3)
+
+plt.tight_layout()
+plt.savefig('training_history.png', dpi=150, bbox_inches='tight')
+plt.show()
+
+# Evaluate on test set
+print("\nEvaluating on test set...")
+test_loss, test_acc, test_dice = validate_epoch(model, test_loader, criterion, device)
+print(f"Test Loss: {test_loss:.4f}")
+print(f"Test Accuracy: {test_acc:.4f}")
+print(f"Test Dice Coefficient: {test_dice:.4f}")
+
+# Visualize 3 test predictions
+print("\nGenerating predictions...")
+model.eval()
+test_samples = []
+for i in range(3):
+    img, mask = test_dataset[i]
+    test_samples.append((img, mask))
+
+fig, axes = plt.subplots(3, 3, figsize=(12, 12))
+
+# Denormalization for visualization
+mean = torch.tensor([0.485, 0.456, 0.406]).view(3, 1, 1)
+std = torch.tensor([0.229, 0.224, 0.225]).view(3, 1, 1)
+
+with torch.no_grad():
+    for i, (img, mask) in enumerate(test_samples):
+        img_input = img.unsqueeze(0).to(device)
+        pred = model(img_input).cpu().squeeze()
+        
+        # Denormalize image for display
+        img_denorm = img * std + mean
+        img_denorm = torch.clamp(img_denorm, 0, 1)
+        img_display = img_denorm.permute(1, 2, 0).numpy()
+        mask_display = mask.squeeze().numpy()
+        pred_display = pred.numpy()
+        
+        # Original image
+        axes[i, 0].imshow(img_display)
+        axes[i, 0].set_title('Original Image', fontweight='bold')
+        axes[i, 0].axis('off')
+        
+        # Ground truth mask
+        axes[i, 1].imshow(mask_display, cmap='gray')
+        axes[i, 1].set_title('Ground Truth', fontweight='bold')
+        axes[i, 1].axis('off')
+        
+        # Predicted mask
+        axes[i, 2].imshow(pred_display, cmap='gray')
+        axes[i, 2].set_title('Prediction', fontweight='bold')
+        axes[i, 2].axis('off')
+
+plt.tight_layout()
+plt.savefig('test_predictions.png', dpi=150, bbox_inches='tight')
+plt.show()
+
+print("\n✓ Training completed successfully!")
+print(f"Best validation loss: {best_val_loss:.4f}")
+print("\n=== ENHANCEMENTS APPLIED ===")
+print("1. ✓ Advanced Data Augmentation (Albumentations)")
+print("   - HorizontalFlip, VerticalFlip, RandomRotate90")
+print("   - ShiftScaleRotate, ElasticTransform")
+print("   - ColorJitter, RandomBrightnessContrast, HueSaturationValue")
+print("   - GaussianBlur, GaussNoise")
+print("   - CoarseDropout (Cutout)")
+print("2. ✓ Learning Rate Scheduler (ReduceLROnPlateau)")
+print("   - Patience: 3, Factor: 0.5, Min LR: 1e-7")
+print("3. ✓ Architecture Refinements")
+print("   - Attention Gates on skip connections")
+print("   - Deep Supervision at multiple scales")
+print(f"   - Encoder freezing for first {ENCODER_FREEZE_EPOCHS} epochs")
+print("4. ✓ Loss Function Tuning")
+print("   - Combined: 0.3 BCE + 0.4 Dice + 0.3 Tversky")
+print("   - Tversky: alpha=0.7 (penalize FN), beta=0.3 (FP)")

server/main.py

@@ -0,0 +1,440 @@
+"""
+Skin Cancer Lesion Segmentation - FastAPI Backend
+================================================
+This API provides endpoints for skin lesion segmentation using an
+Attention U-Net model with MobileNetV2 encoder.
+
+Features:
+- Real-time segmentation of dermoscopic images
+- Confidence score calculation
+- Lesion area analysis
+- Support for multiple image formats (JPEG, PNG, WebP)
+"""
+
+import os
+import io
+import base64
+import numpy as np
+import torch
+import torch.nn as nn
+from torchvision.models import mobilenet_v2
+import cv2
+from PIL import Image
+from fastapi import FastAPI, File, UploadFile, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import HTMLResponse, JSONResponse
+from pydantic import BaseModel
+from typing import Optional
+import albumentations as A
+from albumentations.pytorch import ToTensorV2
+
+# =============================================
+# CONFIGURATION
+# =============================================
+MODEL_PATH = os.path.join(os.path.dirname(__file__), "..", "models", "model.pth")
+IMG_SIZE = 256
+DEVICE = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
+
+# =============================================
+# MODEL ARCHITECTURE (must match training)
+# =============================================
+
+class AttentionGate(nn.Module):
+    """Attention U-Net gate for skip connections."""
+    def __init__(self, F_g, F_l, F_int):
+        super(AttentionGate, self).__init__()
+        self.W_g = nn.Sequential(
+            nn.Conv2d(F_g, F_int, kernel_size=1, stride=1, padding=0, bias=True),
+            nn.BatchNorm2d(F_int)
+        )
+        self.W_x = nn.Sequential(
+            nn.Conv2d(F_l, F_int, kernel_size=1, stride=1, padding=0, bias=True),
+            nn.BatchNorm2d(F_int)
+        )
+        self.psi = nn.Sequential(
+            nn.Conv2d(F_int, 1, kernel_size=1, stride=1, padding=0, bias=True),
+            nn.BatchNorm2d(1),
+            nn.Sigmoid()
+        )
+        self.relu = nn.ReLU(inplace=True)
+        
+    def forward(self, g, x):
+        g1 = self.W_g(g)
+        x1 = self.W_x(x)
+        if g1.shape[2:] != x1.shape[2:]:
+            g1 = nn.functional.interpolate(g1, size=x1.shape[2:], mode='bilinear', align_corners=True)
+        psi = self.relu(g1 + x1)
+        psi = self.psi(psi)
+        return x * psi
+
+
+class BoundaryRefinementHead(nn.Module):
+    """Refines segmentation boundaries."""
+    def __init__(self, in_channels, filters=64):
+        super(BoundaryRefinementHead, self).__init__()
+        self.conv1 = nn.Conv2d(in_channels, filters, kernel_size=3, padding=1)
+        self.relu1 = nn.ReLU(inplace=True)
+        self.conv2 = nn.Conv2d(filters, filters, kernel_size=3, padding=1)
+        self.relu2 = nn.ReLU(inplace=True)
+        self.conv3 = nn.Conv2d(filters, 1, kernel_size=1)
+        self.sigmoid = nn.Sigmoid()
+        
+    def forward(self, x):
+        x = self.relu1(self.conv1(x))
+        x = self.relu2(self.conv2(x))
+        x = self.sigmoid(self.conv3(x))
+        return x
+
+
+class AttentionUNetMobileNet(nn.Module):
+    """
+    Attention U-Net with MobileNetV2 encoder for skin lesion segmentation.
+    """
+    def __init__(self, deep_supervision=False):
+        super(AttentionUNetMobileNet, self).__init__()
+        self.deep_supervision = deep_supervision
+        
+        # Encoder (MobileNetV2 - pretrained)
+        mobilenet = mobilenet_v2(weights='DEFAULT')
+        self.encoder_features = mobilenet.features
+        
+        # Attention Gates
+        self.att1 = AttentionGate(F_g=256, F_l=96, F_int=64)
+        self.att2 = AttentionGate(F_g=128, F_l=32, F_int=32)
+        self.att3 = AttentionGate(F_g=64, F_l=24, F_int=16)
+        self.att4 = AttentionGate(F_g=32, F_l=16, F_int=8)
+        
+        # Decoder
+        self.up1 = nn.ConvTranspose2d(1280, 256, kernel_size=2, stride=2)
+        self.dec1_conv1 = nn.Conv2d(256 + 96, 256, kernel_size=3, padding=1)
+        self.dec1_bn1 = nn.BatchNorm2d(256)
+        self.dec1_relu1 = nn.ReLU(inplace=True)
+        self.dec1_conv2 = nn.Conv2d(256, 256, kernel_size=3, padding=1)
+        self.dec1_bn2 = nn.BatchNorm2d(256)
+        self.dec1_relu2 = nn.ReLU(inplace=True)
+        
+        self.up2 = nn.ConvTranspose2d(256, 128, kernel_size=2, stride=2)
+        self.dec2_conv1 = nn.Conv2d(128 + 32, 128, kernel_size=3, padding=1)
+        self.dec2_bn1 = nn.BatchNorm2d(128)
+        self.dec2_relu1 = nn.ReLU(inplace=True)
+        self.dec2_conv2 = nn.Conv2d(128, 128, kernel_size=3, padding=1)
+        self.dec2_bn2 = nn.BatchNorm2d(128)
+        self.dec2_relu2 = nn.ReLU(inplace=True)
+        
+        self.up3 = nn.ConvTranspose2d(128, 64, kernel_size=2, stride=2)
+        self.dec3_conv1 = nn.Conv2d(64 + 24, 64, kernel_size=3, padding=1)
+        self.dec3_bn1 = nn.BatchNorm2d(64)
+        self.dec3_relu1 = nn.ReLU(inplace=True)
+        self.dec3_conv2 = nn.Conv2d(64, 64, kernel_size=3, padding=1)
+        self.dec3_bn2 = nn.BatchNorm2d(64)
+        self.dec3_relu2 = nn.ReLU(inplace=True)
+        
+        self.up4 = nn.ConvTranspose2d(64, 32, kernel_size=2, stride=2)
+        self.dec4_conv1 = nn.Conv2d(32 + 16, 32, kernel_size=3, padding=1)
+        self.dec4_bn1 = nn.BatchNorm2d(32)
+        self.dec4_relu1 = nn.ReLU(inplace=True)
+        self.dec4_conv2 = nn.Conv2d(32, 32, kernel_size=3, padding=1)
+        self.dec4_bn2 = nn.BatchNorm2d(32)
+        self.dec4_relu2 = nn.ReLU(inplace=True)
+        
+        self.up5 = nn.ConvTranspose2d(32, 16, kernel_size=2, stride=2)
+        self.dec5_conv1 = nn.Conv2d(16, 16, kernel_size=3, padding=1)
+        self.dec5_bn1 = nn.BatchNorm2d(16)
+        self.dec5_relu1 = nn.ReLU(inplace=True)
+        self.dec5_conv2 = nn.Conv2d(16, 16, kernel_size=3, padding=1)
+        self.dec5_bn2 = nn.BatchNorm2d(16)
+        self.dec5_relu2 = nn.ReLU(inplace=True)
+        
+        # Main output
+        self.seg_output = nn.Sequential(
+            nn.Conv2d(16, 1, kernel_size=1),
+            nn.Sigmoid()
+        )
+        
+        # Boundary head
+        self.boundary_head = BoundaryRefinementHead(16, filters=64)
+        
+        # Deep supervision outputs (only used during training)
+        if self.deep_supervision:
+            self.ds_out1 = nn.Sequential(nn.Conv2d(256, 1, kernel_size=1), nn.Sigmoid())
+            self.ds_out2 = nn.Sequential(nn.Conv2d(128, 1, kernel_size=1), nn.Sigmoid())
+            self.ds_out3 = nn.Sequential(nn.Conv2d(64, 1, kernel_size=1), nn.Sigmoid())
+            self.ds_out4 = nn.Sequential(nn.Conv2d(32, 1, kernel_size=1), nn.Sigmoid())
+        
+    def forward(self, x):
+        # Encoder
+        skips = []
+        for idx, layer in enumerate(self.encoder_features):
+            x = layer(x)
+            if idx in [1, 3, 6, 13, 18]:
+                skips.append(x)
+        
+        # Decoder Stage 1
+        d1 = self.up1(x)
+        skip1_att = self.att1(d1, skips[3])
+        d1 = torch.cat([d1, skip1_att], dim=1)
+        d1 = self.dec1_relu1(self.dec1_bn1(self.dec1_conv1(d1)))
+        d1 = self.dec1_relu2(self.dec1_bn2(self.dec1_conv2(d1)))
+        
+        # Decoder Stage 2
+        d2 = self.up2(d1)
+        skip2_att = self.att2(d2, skips[2])
+        d2 = torch.cat([d2, skip2_att], dim=1)
+        d2 = self.dec2_relu1(self.dec2_bn1(self.dec2_conv1(d2)))
+        d2 = self.dec2_relu2(self.dec2_bn2(self.dec2_conv2(d2)))
+        
+        # Decoder Stage 3
+        d3 = self.up3(d2)
+        skip3_att = self.att3(d3, skips[1])
+        d3 = torch.cat([d3, skip3_att], dim=1)
+        d3 = self.dec3_relu1(self.dec3_bn1(self.dec3_conv1(d3)))
+        d3 = self.dec3_relu2(self.dec3_bn2(self.dec3_conv2(d3)))
+        
+        # Decoder Stage 4
+        d4 = self.up4(d3)
+        skip4_att = self.att4(d4, skips[0])
+        d4 = torch.cat([d4, skip4_att], dim=1)
+        d4 = self.dec4_relu1(self.dec4_bn1(self.dec4_conv1(d4)))
+        d4 = self.dec4_relu2(self.dec4_bn2(self.dec4_conv2(d4)))
+        
+        # Final upsampling
+        d5 = self.up5(d4)
+        d5 = self.dec5_relu1(self.dec5_bn1(self.dec5_conv1(d5)))
+        d5 = self.dec5_relu2(self.dec5_bn2(self.dec5_conv2(d5)))
+        
+        # Main output
+        seg_output = self.seg_output(d5)
+        boundary_output = self.boundary_head(d5)
+        final_output = (seg_output + boundary_output) / 2
+        
+        return final_output
+
+
+# =============================================
+# PREPROCESSING
+# =============================================
+
+def get_inference_transforms(img_size=IMG_SIZE):
+    """Transform pipeline for inference."""
+    return A.Compose([
+        A.Resize(img_size, img_size),
+        A.Normalize(mean=(0.485, 0.456, 0.406), std=(0.229, 0.224, 0.225)),
+        ToTensorV2(),
+    ])
+
+
+def preprocess_image(image: np.ndarray) -> torch.Tensor:
+    """Preprocess image for model inference."""
+    # Convert to RGB if needed
+    if len(image.shape) == 2:
+        image = cv2.cvtColor(image, cv2.COLOR_GRAY2RGB)
+    elif image.shape[2] == 4:
+        image = cv2.cvtColor(image, cv2.COLOR_RGBA2RGB)
+    elif image.shape[2] == 3:
+        image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+    
+    # Apply transforms
+    transform = get_inference_transforms()
+    transformed = transform(image=image)
+    img_tensor = transformed['image'].unsqueeze(0)
+    
+    return img_tensor
+
+
+def postprocess_mask(mask: np.ndarray, original_size: tuple) -> np.ndarray:
+    """Postprocess model output to original image size."""
+    # Resize to original size
+    mask_resized = cv2.resize(mask, (original_size[1], original_size[0]), 
+                               interpolation=cv2.INTER_LINEAR)
+    return mask_resized
+
+
+def mask_to_base64(mask: np.ndarray) -> str:
+    """Convert numpy mask to base64 string."""
+    # Normalize to 0-255
+    mask_uint8 = (mask * 255).astype(np.uint8)
+    # Encode as PNG
+    _, buffer = cv2.imencode('.png', mask_uint8)
+    return base64.b64encode(buffer).decode('utf-8')
+
+
+def create_overlay(image: np.ndarray, mask: np.ndarray, alpha: float = 0.5) -> np.ndarray:
+    """Create overlay of mask on original image."""
+    # Create colored mask (magenta for lesion)
+    colored_mask = np.zeros_like(image)
+    colored_mask[:, :, 0] = int(255 * 0.94)  # R
+    colored_mask[:, :, 1] = int(255 * 0.38)  # G
+    colored_mask[:, :, 2] = int(255 * 0.57)  # B
+    
+    # Apply mask
+    mask_3ch = np.stack([mask] * 3, axis=-1)
+    overlay = image * (1 - mask_3ch * alpha) + colored_mask * (mask_3ch * alpha)
+    
+    return overlay.astype(np.uint8)
+
+
+def image_to_base64(image: np.ndarray) -> str:
+    """Convert numpy image to base64 string."""
+    _, buffer = cv2.imencode('.png', cv2.cvtColor(image, cv2.COLOR_RGB2BGR))
+    return base64.b64encode(buffer).decode('utf-8')
+
+
+# =============================================
+# FASTAPI APP
+# =============================================
+
+app = FastAPI(
+    title="Skin Lesion Segmentation API",
+    description="AI-powered skin cancer lesion segmentation using Attention U-Net",
+    version="1.0.0"
+)
+
+# CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Global model variable
+model = None
+
+
+@app.on_event("startup")
+async def load_model():
+    """Load the model on startup."""
+    global model
+    print(f"Loading model from {MODEL_PATH}...")
+    print(f"Using device: {DEVICE}")
+    
+    try:
+        model = AttentionUNetMobileNet(deep_supervision=False).to(DEVICE)
+        
+        if os.path.exists(MODEL_PATH):
+            state_dict = torch.load(MODEL_PATH, map_location=DEVICE)
+            model.load_state_dict(state_dict, strict=False)
+            print("✓ Model loaded successfully!")
+        else:
+            print(f"⚠ Model file not found at {MODEL_PATH}")
+            print("  The API will work but predictions will use untrained weights.")
+        
+        model.eval()
+    except Exception as e:
+        print(f"✗ Error loading model: {e}")
+        model = AttentionUNetMobileNet(deep_supervision=False).to(DEVICE)
+        model.eval()
+
+
+class SegmentationResponse(BaseModel):
+    """Response model for segmentation endpoint."""
+    success: bool
+    mask_base64: Optional[str] = None
+    overlay_base64: Optional[str] = None
+    confidence: Optional[float] = None
+    lesion_area_percent: Optional[float] = None
+    message: Optional[str] = None
+
+
+@app.get("/", response_class=HTMLResponse)
+async def read_root():
+    """Redirect to frontend."""
+    return """
+    <html>
+        <head>
+            <meta http-equiv="refresh" content="0; url=/static/index.html" />
+        </head>
+        <body>
+            <p>Redirecting to the application...</p>
+        </body>
+    </html>
+    """
+
+
+@app.get("/api/health")
+async def health_check():
+    """Health check endpoint."""
+    return {
+        "status": "healthy",
+        "model_loaded": model is not None,
+        "device": str(DEVICE)
+    }
+
+
+@app.post("/api/segment", response_model=SegmentationResponse)
+async def segment_image(file: UploadFile = File(...)):
+    """
+    Segment a skin lesion from an uploaded dermoscopic image.
+    
+    Args:
+        file: Image file (JPEG, PNG, WebP)
+    
+    Returns:
+        SegmentationResponse with mask and overlay in base64
+    """
+    if model is None:
+        raise HTTPException(status_code=503, detail="Model not loaded")
+    
+    # Validate file type
+    allowed_types = ["image/jpeg", "image/png", "image/webp", "image/jpg"]
+    if file.content_type not in allowed_types:
+        return SegmentationResponse(
+            success=False,
+            message=f"Invalid file type. Allowed: {', '.join(allowed_types)}"
+        )
+    
+    try:
+        # Read image
+        contents = await file.read()
+        nparr = np.frombuffer(contents, np.uint8)
+        image = cv2.imdecode(nparr, cv2.IMREAD_COLOR)
+        image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+        original_size = image_rgb.shape[:2]
+        
+        # Preprocess
+        img_tensor = preprocess_image(image_rgb).to(DEVICE)
+        
+        # Inference
+        with torch.no_grad():
+            output = model(img_tensor)
+            mask = output.cpu().numpy().squeeze()
+        
+        # Calculate metrics
+        confidence = float(np.mean(mask[mask > 0.5])) if np.any(mask > 0.5) else 0.0
+        lesion_area = float(np.mean(mask > 0.5) * 100)
+        
+        # Threshold mask
+        mask_binary = (mask > 0.5).astype(np.float32)
+        
+        # Resize to original size
+        mask_resized = postprocess_mask(mask_binary, original_size)
+        
+        # Create overlay
+        overlay = create_overlay(image_rgb, mask_resized, alpha=0.4)
+        
+        return SegmentationResponse(
+            success=True,
+            mask_base64=mask_to_base64(mask_resized),
+            overlay_base64=image_to_base64(overlay),
+            confidence=round(confidence * 100, 2),
+            lesion_area_percent=round(lesion_area, 2)
+        )
+        
+    except Exception as e:
+        return SegmentationResponse(
+            success=False,
+            message=f"Error processing image: {str(e)}"
+        )
+
+
+# Mount static files (frontend)
+client_path = os.path.join(os.path.dirname(__file__), "..", "client")
+if os.path.exists(client_path):
+    app.mount("/static", StaticFiles(directory=client_path), name="static")
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

server/requirements.txt

@@ -0,0 +1,22 @@
+# Skin Cancer Lesion Segmentation - Python Dependencies
+# =====================================================
+
+# Web Framework
+fastapi>=0.104.0
+uvicorn>=0.24.0
+python-multipart>=0.0.6
+
+# Deep Learning
+torch>=2.0.0
+torchvision>=0.15.0
+
+# Image Processing
+opencv-python>=4.8.0
+Pillow>=10.0.0
+albumentations>=1.3.0
+
+# Data Processing
+numpy>=1.24.0
+
+# Type hints
+pydantic>=2.0.0