Initial ChestXpert deployment

.gitattributes

@@ -0,0 +1,3 @@
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,17 @@
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+*.env
+.env
+env/
+venv/
+uploads/
+*.log
+.DS_Store
+.idea/
+.vscode/
+*.egg-info/
+dist/
+build/

Dockerfile

@@ -0,0 +1,20 @@
+FROM python:3.10-slim
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+RUN pip install --no-cache-dir --upgrade pip
+
+COPY --chown=user requirements.txt requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY --chown=user . /app
+
+RUN mkdir -p /app/models /app/samples /app/uploads
+
+EXPOSE 7860
+
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,427 @@
+import os
+import io
+import json
+import base64
+import uuid
+from datetime import datetime
+import numpy as np
+from PIL import Image
+import torch
+import torch.nn as nn
+from torchvision import models
+from transformers import AutoModel
+import albumentations as A
+from albumentations.pytorch import ToTensorV2
+from flask import Flask, render_template, request, jsonify, send_from_directory
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
+
+DEVICE = torch.device('cuda' if torch.cuda.is_available() else 'cpu')
+TARGET_LABELS = ["Atelectasis", "Cardiomegaly", "Consolidation", "Edema", "Pleural Effusion"]
+LABEL_INFO = {
+    "Atelectasis": {
+        "description": "Partial or complete collapse of the lung or a section of the lung.",
+        "icon": ""
+    },
+    "Cardiomegaly": {
+        "description": "Enlargement of the heart, often indicating heart disease.",
+        "icon": ""
+    },
+    "Consolidation": {
+        "description": "Region of lung tissue filled with liquid instead of air.",
+        "icon": ""
+    },
+    "Edema": {
+        "description": "Excess fluid in the lungs, often due to heart failure.",
+        "icon": ""
+    },
+    "Pleural Effusion": {
+        "description": "Buildup of fluid between the lung and chest wall.",
+        "icon": ""
+    }
+}
+ENSEMBLE_WEIGHT_RD = 0.60
+ENSEMBLE_WEIGHT_DN = 0.40
+MODEL_DIR = os.path.join(os.path.dirname(__file__), 'models')
+SAMPLES_DIR = os.path.join(os.path.dirname(__file__), 'samples')
+
+# In-memory store for analysis results (for report generation)
+analysis_store = {}
+
+
+# --- Model Definitions ---
+class RADDINOClassifier(nn.Module):
+    def __init__(self, num_classes=5, dropout=0.3):
+        super().__init__()
+        self.backbone = AutoModel.from_pretrained("microsoft/rad-dino")
+        self.hidden_dim = self.backbone.config.hidden_size
+        self.classifier = nn.Sequential(
+            nn.LayerNorm(self.hidden_dim),
+            nn.Dropout(dropout),
+            nn.Linear(self.hidden_dim, 256),
+            nn.GELU(),
+            nn.Dropout(dropout / 2),
+            nn.Linear(256, num_classes)
+        )
+
+    def forward(self, x):
+        features = self.backbone(x).last_hidden_state[:, 0]
+        return self.classifier(features)
+
+
+class DenseNetClassifier(nn.Module):
+    def __init__(self, num_classes=5, dropout=0.4):
+        super().__init__()
+        self.backbone = models.densenet121(weights=None)
+        nf = self.backbone.classifier.in_features
+        self.backbone.classifier = nn.Sequential(
+            nn.Dropout(dropout),
+            nn.Linear(nf, 256),
+            nn.ReLU(),
+            nn.Dropout(dropout / 2),
+            nn.Linear(256, num_classes)
+        )
+
+    def forward(self, x):
+        return self.backbone(x)
+
+
+# --- Grad-CAM ---
+class GradCAM:
+    def __init__(self, model):
+        self.model = model
+        self.gradients = None
+        self.activations = None
+        target_layer = model.backbone.features.denseblock4
+        target_layer.register_forward_hook(self._forward_hook)
+        target_layer.register_full_backward_hook(self._backward_hook)
+
+    def _forward_hook(self, module, input, output):
+        self.activations = output.detach()
+
+    def _backward_hook(self, module, grad_input, grad_output):
+        self.gradients = grad_output[0].detach()
+
+    def generate(self, input_tensor, class_idx=None):
+        self.model.eval()
+        input_tensor.requires_grad_(True)
+        output = self.model(input_tensor)
+
+        if class_idx is None:
+            class_idx = output.sigmoid().mean(dim=0).argmax().item()
+
+        self.model.zero_grad()
+        target = output[0, class_idx]
+        target.backward()
+
+        gradients = self.gradients[0]
+        activations = self.activations[0]
+        weights = gradients.mean(dim=(1, 2), keepdim=True)
+        cam = (weights * activations).sum(dim=0)
+        cam = torch.relu(cam)
+        cam = cam - cam.min()
+        if cam.max() > 0:
+            cam = cam / cam.max()
+        return cam.cpu().numpy()
+
+
+# --- Image Preprocessing ---
+def get_transform(size):
+    return A.Compose([
+        A.Resize(size, size),
+        A.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225]),
+        ToTensorV2()
+    ])
+
+transform_384 = get_transform(384)
+transform_320 = get_transform(320)
+
+
+def preprocess_image(image_bytes, transform):
+    img = Image.open(io.BytesIO(image_bytes)).convert('RGB')
+    img_np = np.array(img)
+    augmented = transform(image=img_np)
+    tensor = augmented['image'].unsqueeze(0).to(DEVICE)
+    return tensor, img_np
+
+
+# --- DICOM Support ---
+def read_dicom_as_bytes(file_bytes):
+    """Convert DICOM file bytes to standard image bytes."""
+    try:
+        import pydicom
+        ds = pydicom.dcmread(io.BytesIO(file_bytes))
+        pixel_array = ds.pixel_array
+
+        # Normalize to 0-255
+        arr = pixel_array.astype(float)
+        if arr.max() != arr.min():
+            arr = (arr - arr.min()) / (arr.max() - arr.min()) * 255
+        arr = arr.astype(np.uint8)
+
+        # Handle MONOCHROME1 (inverted)
+        if hasattr(ds, 'PhotometricInterpretation'):
+            if ds.PhotometricInterpretation == 'MONOCHROME1':
+                arr = 255 - arr
+
+        img = Image.fromarray(arr).convert('RGB')
+        buffer = io.BytesIO()
+        img.save(buffer, format='PNG')
+        return buffer.getvalue()
+    except Exception as e:
+        raise ValueError(f"Failed to read DICOM file: {str(e)}")
+
+
+# --- Heatmap Generation ---
+def create_heatmap_overlay(original_img, cam, alpha=0.4):
+    import cv2
+    h, w = original_img.shape[:2]
+    cam_resized = cv2.resize(cam, (w, h))
+    heatmap = cv2.applyColorMap(np.uint8(255 * cam_resized), cv2.COLORMAP_JET)
+    heatmap = cv2.cvtColor(heatmap, cv2.COLOR_BGR2RGB)
+    overlay = np.float32(heatmap) * alpha + np.float32(original_img) * (1 - alpha)
+    overlay = np.clip(overlay, 0, 255).astype(np.uint8)
+    img_pil = Image.fromarray(overlay)
+    buffer = io.BytesIO()
+    img_pil.save(buffer, format='PNG')
+    return base64.b64encode(buffer.getvalue()).decode('utf-8')
+
+
+def image_to_base64(img_np):
+    img_pil = Image.fromarray(img_np)
+    buffer = io.BytesIO()
+    img_pil.save(buffer, format='PNG')
+    return base64.b64encode(buffer.getvalue()).decode('utf-8')
+
+
+# --- Load Models ---
+rd_model = None
+dn_model = None
+grad_cam = None
+
+
+def load_models():
+    global rd_model, dn_model, grad_cam
+
+    rd_path = os.path.join(MODEL_DIR, 'rad_dino_best.pth')
+    dn_path = os.path.join(MODEL_DIR, 'densenet_best.pth')
+
+    if os.path.exists(dn_path):
+        print("Loading DenseNet121...")
+        dn_model = DenseNetClassifier(num_classes=5, dropout=0.4)
+        state = torch.load(dn_path, map_location='cpu', weights_only=True)
+        dn_model.load_state_dict(state)
+        dn_model.to(DEVICE).eval()
+        grad_cam = GradCAM(dn_model)
+        print("[OK] DenseNet121 loaded")
+    else:
+        print(f"[WARN] DenseNet weights not found at {dn_path}")
+
+    if os.path.exists(rd_path):
+        print("Loading RAD-DINO...")
+        rd_model = RADDINOClassifier(num_classes=5, dropout=0.3)
+        state = torch.load(rd_path, map_location='cpu', weights_only=True)
+        rd_model.load_state_dict(state)
+        rd_model.to(DEVICE).eval()
+        print("[OK] RAD-DINO loaded")
+    else:
+        print(f"[WARN] RAD-DINO weights not found at {rd_path}")
+
+
+# --- Core prediction logic ---
+def run_prediction(image_bytes):
+    """Run ensemble prediction and return results dict."""
+    heatmaps = {}
+
+    # DenseNet prediction + Grad-CAM
+    dn_probs = None
+    if dn_model is not None:
+        tensor_320, img_np = preprocess_image(image_bytes, transform_320)
+        with torch.no_grad():
+            logits = dn_model(tensor_320)
+            dn_probs = torch.sigmoid(logits).cpu().numpy()[0]
+
+        for i, label in enumerate(TARGET_LABELS):
+            tensor_for_cam, _ = preprocess_image(image_bytes, transform_320)
+            cam = grad_cam.generate(tensor_for_cam, class_idx=i)
+            heatmaps[label] = create_heatmap_overlay(img_np, cam, alpha=0.45)
+
+    # RAD-DINO prediction
+    rd_probs = None
+    if rd_model is not None:
+        tensor_384, img_np = preprocess_image(image_bytes, transform_384)
+        with torch.no_grad():
+            logits = rd_model(tensor_384)
+            rd_probs = torch.sigmoid(logits).cpu().numpy()[0]
+
+    # Ensemble
+    if rd_probs is not None and dn_probs is not None:
+        ensemble_probs = ENSEMBLE_WEIGHT_RD * rd_probs + ENSEMBLE_WEIGHT_DN * dn_probs
+    elif rd_probs is not None:
+        ensemble_probs = rd_probs
+    elif dn_probs is not None:
+        ensemble_probs = dn_probs
+    else:
+        return None
+
+    original_b64 = image_to_base64(img_np)
+
+    results = []
+    for i, label in enumerate(TARGET_LABELS):
+        prob = float(ensemble_probs[i])
+        risk = 'high' if prob > 0.6 else ('medium' if prob > 0.3 else 'low')
+        results.append({
+            'label': label,
+            'probability': round(prob * 100, 1),
+            'risk': risk,
+            'description': LABEL_INFO[label]['description'],
+            'icon': LABEL_INFO[label]['icon'],
+            'heatmap': heatmaps.get(label, ''),
+            'rd_prob': round(float(rd_probs[i]) * 100, 1) if rd_probs is not None else None,
+            'dn_prob': round(float(dn_probs[i]) * 100, 1) if dn_probs is not None else None,
+        })
+
+    results.sort(key=lambda x: x['probability'], reverse=True)
+
+    return {
+        'success': True,
+        'results': results,
+        'original_image': original_b64,
+        'models_used': {
+            'rad_dino': rd_probs is not None,
+            'densenet': dn_probs is not None,
+            'ensemble': rd_probs is not None and dn_probs is not None,
+        }
+    }
+
+
+# --- Routes ---
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/analyze')
+def analyze():
+    return render_template('analyze.html')
+
+
+@app.route('/login')
+def login():
+    return render_template('login.html')
+
+@app.route('/register')
+def register():
+    return render_template('register.html')
+
+@app.route('/about')
+def about():
+    return render_template('about.html')
+
+
+@app.route('/history')
+def history():
+    return render_template('history.html')
+
+
+@app.route('/compare')
+def compare():
+    return render_template('compare.html')
+
+
+@app.route('/report/<analysis_id>')
+def report(analysis_id):
+    data = analysis_store.get(analysis_id)
+    if not data:
+        return render_template('report.html', error=True)
+    return render_template('report.html', error=False, data=json.dumps(data))
+
+
+@app.route('/samples')
+def samples_page():
+    return render_template('analyze.html', show_samples=True)
+
+
+# --- API Endpoints ---
+@app.route('/predict', methods=['POST'])
+def predict():
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file uploaded'}), 400
+
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No file selected'}), 400
+
+    allowed = {'png', 'jpg', 'jpeg', 'bmp', 'dcm', 'dicom'}
+    ext = file.filename.rsplit('.', 1)[-1].lower() if '.' in file.filename else ''
+    if ext not in allowed:
+        return jsonify({'error': f'File type .{ext} not supported'}), 400
+
+    image_bytes = file.read()
+
+    # DICOM handling
+    if ext in ('dcm', 'dicom'):
+        try:
+            image_bytes = read_dicom_as_bytes(image_bytes)
+        except ValueError as e:
+            return jsonify({'error': str(e)}), 400
+
+    result = run_prediction(image_bytes)
+    if result is None:
+        return jsonify({'error': 'No models loaded'}), 500
+
+    # Store result for report generation
+    analysis_id = str(uuid.uuid4())[:8]
+    result['analysis_id'] = analysis_id
+    result['timestamp'] = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
+    result['filename'] = file.filename
+    analysis_store[analysis_id] = result
+
+    # Keep only last 50 analyses in memory
+    if len(analysis_store) > 50:
+        oldest_key = next(iter(analysis_store))
+        del analysis_store[oldest_key]
+
+    return jsonify(result)
+
+
+@app.route('/api/samples')
+def api_samples():
+    """List available sample X-ray images."""
+    samples = []
+    if os.path.exists(SAMPLES_DIR):
+        for f in os.listdir(SAMPLES_DIR):
+            if f.lower().endswith(('.png', '.jpg', '.jpeg', '.bmp')):
+                name = os.path.splitext(f)[0].replace('_', ' ').replace('-', ' ').title()
+                samples.append({
+                    'filename': f,
+                    'name': name,
+                    'url': f'/samples/{f}'
+                })
+    return jsonify(samples)
+
+
+@app.route('/samples/<path:filename>')
+def serve_sample(filename):
+    return send_from_directory(SAMPLES_DIR, filename)
+
+
+@app.route('/health')
+def health():
+    return jsonify({
+        'status': 'ok',
+        'models': {
+            'rad_dino': rd_model is not None,
+            'densenet': dn_model is not None,
+        },
+        'device': str(DEVICE)
+    })
+
+
+if __name__ == '__main__':
+    os.makedirs(MODEL_DIR, exist_ok=True)
+    os.makedirs(SAMPLES_DIR, exist_ok=True)
+    os.makedirs('uploads', exist_ok=True)
+    load_models()
+    app.run(debug=False, host='0.0.0.0', port=int(os.environ.get('PORT', 7860)))

app.py_patch

@@ -0,0 +1,9 @@
+@app.route('/login')
+def login():
+    return render_template('login.html')
+
+@app.route('/register')
+def register():
+    return render_template('register.html')
+
+@app.route('/about')

models/README.txt

@@ -0,0 +1,3 @@
+Place your model files here:
+- rad_dino_best.pth (download from Kaggle notebook output)
+- densenet_best.pth (download from Kaggle notebook output)

models/densenet_best.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0a81fdeedb10246eff1943edf356791dbc052813c9b5d0a39f5590f03e5fbb75
+size 29504839

models/rad_dino_best.pth

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d0b9ff91b504c2fe6034104bd1ea14ee87e94799585e08f37668713acd71c02b
+size 347217911

requirements.txt

@@ -0,0 +1,10 @@
+flask==3.1.0
+torch>=2.0.0
+torchvision>=0.15.0
+transformers>=4.30.0
+Pillow>=10.0.0
+albumentations>=1.3.0
+numpy>=1.24.0
+opencv-python>=4.8.0
+pydicom>=2.4.0
+gunicorn>=21.2.0

samples/README.txt

@@ -0,0 +1,10 @@
+Place sample chest X-ray images here.
+Files should be in PNG, JPG, or BMP format.
+They will automatically appear in the sample gallery on the Analyze page.
+
+Suggested naming convention:
+- normal_chest.png
+- pleural_effusion.png
+- cardiomegaly.png
+- edema.png
+- consolidation.png

static/app.js

@@ -0,0 +1,903 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // ========== Auth Check ==========
+    initAuth();
+
+    // ========== Common: Health Check ==========
+    fetch('/health').then(r => r.json()).then(data => {
+        const dot = document.getElementById('status-dot');
+        const txt = document.getElementById('status-text');
+        if (!dot || !txt) return;
+        const both = data.models.rad_dino && data.models.densenet;
+        const any = data.models.rad_dino || data.models.densenet;
+        dot.className = 'status-dot ' + (both ? 'online' : (any ? 'partial' : 'offline'));
+        txt.textContent = both ? 'Models Ready' : (any ? 'Partial' : 'No Models');
+    }).catch(() => { });
+
+    // ========== Analyze Page ==========
+    initAnalyzePage();
+
+    // ========== History Page ==========
+    initHistoryPage();
+
+    // ========== Compare Page ==========
+    initComparePage();
+
+    // ========== Load Samples ==========
+    loadSamples();
+});
+
+// ---------- AUTHENTICATION ----------
+function initAuth() {
+    const userJson = localStorage.getItem('cx_user');
+    const user = userJson ? JSON.parse(userJson) : null;
+
+    const navAuth = document.getElementById('nav-auth');
+    const navProfile = document.getElementById('nav-profile');
+
+    if (user && navProfile) {
+        if (navAuth) navAuth.style.display = 'none';
+        navProfile.style.display = 'flex';
+
+        const navName = document.getElementById('nav-user-name');
+        const dropName = document.getElementById('dropdown-name');
+        const dropEmail = document.getElementById('dropdown-email');
+
+        if (navName) navName.textContent = user.name.split(' ')[0];
+        if (dropName) dropName.textContent = user.name;
+        if (dropEmail) dropEmail.textContent = user.email;
+
+        // Dropdown toggle
+        const trigger = document.getElementById('profile-trigger');
+        const dropdown = document.getElementById('profile-dropdown');
+        if (trigger && dropdown) {
+            trigger.addEventListener('click', (e) => {
+                e.stopPropagation();
+                dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
+            });
+            document.addEventListener('click', (e) => {
+                if (!trigger.contains(e.target) && !dropdown.contains(e.target)) {
+                    dropdown.style.display = 'none';
+                }
+            });
+        }
+
+        // Logout
+        const logoutBtn = document.getElementById('logout-btn');
+        if (logoutBtn) {
+            logoutBtn.addEventListener('click', () => {
+                localStorage.removeItem('cx_user');
+                window.location.href = '/';
+            });
+        }
+    } else if (navAuth) {
+        navAuth.style.display = 'flex';
+        if (navProfile) navProfile.style.display = 'none';
+    }
+
+    // Login Form
+    const loginForm = document.getElementById('login-form');
+    if (loginForm) {
+        loginForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const email = document.getElementById('email').value;
+            // Mock login
+            const mockName = email.split('@')[0].charAt(0).toUpperCase() + email.split('@')[0].slice(1);
+            localStorage.setItem('cx_user', JSON.stringify({ name: mockName, email: email }));
+            window.location.href = '/history';
+        });
+    }
+
+    // Register Form
+    const registerForm = document.getElementById('register-form');
+    if (registerForm) {
+        registerForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            const name = document.getElementById('name').value;
+            const email = document.getElementById('email').value;
+            localStorage.setItem('cx_user', JSON.stringify({ name: name, email: email }));
+            window.location.href = '/history';
+        });
+    }
+}
+
+
+// ---------- HISTORY HELPERS ----------
+function saveToHistory(data) {
+    try {
+        let history = JSON.parse(localStorage.getItem('chestxpert_history') || '[]');
+        const entry = {
+            id: data.analysis_id,
+            timestamp: data.timestamp,
+            filename: data.filename,
+            results: data.results.map(r => ({ label: r.label, probability: r.probability, risk: r.risk })),
+            thumbnail: data.original_image ? data.original_image.substring(0, 200) : ''
+        };
+        history.unshift(entry);
+        if (history.length > 30) history = history.slice(0, 30);
+        localStorage.setItem('chestxpert_history', JSON.stringify(history));
+    } catch (e) { console.warn('Could not save history', e); }
+}
+
+
+// ---------- ANALYZE PAGE ----------
+function initAnalyzePage() {
+    const uploadZone = document.getElementById('upload-zone');
+    if (!uploadZone) return;
+
+    const fileInput = document.getElementById('file-input');
+    const previewCard = document.getElementById('preview-card');
+    const previewImg = document.getElementById('preview-img');
+    const fileInfo = document.getElementById('file-info');
+    const btnChange = document.getElementById('btn-change');
+    const btnAnalyze = document.getElementById('btn-analyze');
+    const btnNew = document.getElementById('btn-new');
+    const btnPdf = document.getElementById('btn-pdf');
+    const btnReport = document.getElementById('btn-report-link');
+    const btnExportJson = document.getElementById('btn-export-json');
+    const uploadSection = document.getElementById('upload-section');
+    const loadingSection = document.getElementById('loading-section');
+    const resultsSection = document.getElementById('results-section');
+    const samplesSection = document.getElementById('samples-section');
+
+    let selectedFile = null;
+    let currentData = null;
+
+    uploadZone.addEventListener('click', () => fileInput.click());
+    uploadZone.addEventListener('dragover', (e) => { e.preventDefault(); uploadZone.classList.add('dragover'); });
+    uploadZone.addEventListener('dragleave', () => uploadZone.classList.remove('dragover'));
+    uploadZone.addEventListener('drop', (e) => { e.preventDefault(); uploadZone.classList.remove('dragover'); if (e.dataTransfer.files.length > 0) handleFile(e.dataTransfer.files[0]); });
+    fileInput.addEventListener('change', (e) => { if (e.target.files.length > 0) handleFile(e.target.files[0]); });
+
+    btnChange.addEventListener('click', resetUpload);
+    btnAnalyze.addEventListener('click', () => { if (selectedFile) analyzeImage(selectedFile); });
+    btnNew.addEventListener('click', resetAll);
+
+    if (btnPdf) btnPdf.addEventListener('click', () => { if (currentData) generatePDF(currentData); });
+    if (btnExportJson) btnExportJson.addEventListener('click', () => { if (currentData) exportJSON(currentData); });
+
+    function handleFile(file) {
+        const ext = file.name.split('.').pop().toLowerCase();
+        const validExts = ['png', 'jpg', 'jpeg', 'bmp', 'dcm', 'dicom'];
+        if (!file.type.startsWith('image/') && !validExts.includes(ext)) {
+            showToast('Please upload an image or DICOM file', 'error');
+            return;
+        }
+        selectedFile = file;
+
+        if (ext === 'dcm' || ext === 'dicom') {
+            previewImg.src = '';
+            previewImg.alt = 'DICOM file - preview after analysis';
+            uploadZone.style.display = 'none';
+            previewCard.style.display = 'block';
+            fileInfo.textContent = `${file.name} (DICOM, ${(file.size / 1024).toFixed(0)} KB)`;
+        } else {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                previewImg.src = e.target.result;
+                uploadZone.style.display = 'none';
+                previewCard.style.display = 'block';
+                fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(0)} KB)`;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+
+    function resetUpload() {
+        selectedFile = null;
+        fileInput.value = '';
+        uploadZone.style.display = '';
+        previewCard.style.display = 'none';
+    }
+
+    function resetAll() {
+        resetUpload();
+        resultsSection.style.display = 'none';
+        loadingSection.style.display = 'none';
+        uploadSection.style.display = '';
+        if (samplesSection) samplesSection.style.display = '';
+        currentData = null;
+    }
+
+    function showLoading() {
+        uploadSection.style.display = 'none';
+        loadingSection.style.display = '';
+        resultsSection.style.display = 'none';
+        if (samplesSection) samplesSection.style.display = 'none';
+        animateSteps();
+    }
+
+    function animateSteps() {
+        const steps = ['step-1', 'step-2', 'step-3', 'step-4', 'step-5'];
+        let current = 0;
+        const bar = document.getElementById('loading-bar-fill');
+        function next() {
+            if (current > 0) { const prev = document.getElementById(steps[current - 1]); prev.classList.remove('active'); prev.classList.add('done'); }
+            if (current < steps.length) {
+                document.getElementById(steps[current]).classList.add('active');
+                bar.style.width = ((current + 1) / steps.length * 100) + '%';
+                current++;
+                setTimeout(next, 600 + Math.random() * 400);
+            }
+        }
+        next();
+    }
+
+    async function analyzeImage(file) {
+        showLoading();
+        const formData = new FormData();
+        formData.append('file', file);
+        try {
+            const res = await fetch('/predict', { method: 'POST', body: formData });
+            const data = await res.json();
+            if (data.error) { showToast(data.error, 'error'); resetAll(); return; }
+            currentData = data;
+            saveToHistory(data);
+            setTimeout(() => showResults(data), 2000);
+        } catch (err) {
+            showToast('Analysis failed. Check if the server is running.', 'error');
+            resetAll();
+        }
+    }
+
+    // Expose for sample clicks
+    window._analyzeFile = analyzeImage;
+    window._handleFile = handleFile;
+}
+
+function showResults(data) {
+    const loadingSection = document.getElementById('loading-section');
+    const resultsSection = document.getElementById('results-section');
+    loadingSection.style.display = 'none';
+    resultsSection.style.display = '';
+
+    document.getElementById('result-original').src = 'data:image/png;base64,' + data.original_image;
+
+    const reportLink = document.getElementById('btn-report-link');
+    if (reportLink && data.analysis_id) {
+        reportLink.href = '/report/' + data.analysis_id;
+    }
+
+    const list = document.getElementById('predictions-list');
+    const pills = document.getElementById('heatmap-pills');
+    list.innerHTML = '';
+    pills.innerHTML = '';
+
+    const pillElements = [];
+    const predElements = [];
+
+    data.results.forEach((r, i) => {
+        const el = document.createElement('div');
+        el.className = 'pred-item p-3 rounded-sm border-l-4 border-transparent cursor-pointer hover:bg-slate-50 transition-colors';
+        el.innerHTML = `
+            <div class="pred-top">
+                <span class="pred-name">${r.label}</span>
+                <div class="pred-right">
+                    <span class="risk-tag ${r.risk}">${r.risk.toUpperCase()}</span>
+                    <span class="pred-pct ${r.risk}">${r.probability}%</span>
+                </div>
+            </div>
+            <div class="pred-bar-bg"><div class="pred-bar ${r.risk}" id="pred-bar-${i}"></div></div>
+            <p class="pred-desc">${r.description}</p>
+            ${r.rd_prob !== null && r.dn_prob !== null ? `<div class="pred-models text-slate-700"><span>RAD-DINO: ${r.rd_prob}%</span><span>DenseNet: ${r.dn_prob}%</span></div>` : ''}
+        `;
+        list.appendChild(el);
+        predElements.push(el);
+
+        setTimeout(() => { document.getElementById('pred-bar-' + i).style.width = r.probability + '%'; }, 150 + i * 120);
+
+        if (r.heatmap) {
+            const pill = document.createElement('button');
+            pill.className = 'pill';
+            pill.textContent = r.label;
+
+            const activate = () => {
+                pills.querySelectorAll('.pill').forEach(p => p.classList.remove('active'));
+                pill.classList.add('active');
+                document.getElementById('result-heatmap').src = 'data:image/png;base64,' + r.heatmap;
+
+                predElements.forEach(item => {
+                    item.classList.remove('bg-blue-50/50', 'border-blue-900');
+                    item.classList.add('border-transparent');
+                });
+                el.classList.remove('border-transparent');
+                el.classList.add('bg-blue-50/50', 'border-blue-900');
+
+                document.getElementById('result-heatmap').style.display = '';
+                document.getElementById('result-original').style.display = 'none';
+                document.querySelectorAll('.card-tab').forEach(t => t.classList.remove('active'));
+                const heatmapTab = document.querySelector('[data-tab="heatmap"]');
+                if (heatmapTab) heatmapTab.classList.add('active');
+            };
+
+            pill.addEventListener('click', activate);
+            el.addEventListener('click', activate);
+
+            pills.appendChild(pill);
+            pillElements.push({ pill, activate });
+        }
+    });
+
+    if (pillElements.length > 0) {
+        pillElements[0].activate();
+    }
+
+    document.querySelectorAll('.card-tab').forEach(tab => {
+        tab.addEventListener('click', () => {
+            document.querySelectorAll('.card-tab').forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            const t = tab.dataset.tab;
+            document.getElementById('result-original').style.display = t === 'original' ? '' : 'none';
+            document.getElementById('result-heatmap').style.display = t === 'heatmap' ? '' : 'none';
+            document.getElementById('heatmap-selector').style.display = t === 'heatmap' ? '' : 'none';
+        });
+    });
+
+    const tags = document.getElementById('model-tags');
+    tags.innerHTML = '';
+    const ms = data.models_used;
+    if (ms.rad_dino) tags.innerHTML += `<span class="model-tag on">RAD-DINO</span>`;
+    if (ms.densenet) tags.innerHTML += `<span class="model-tag on">DenseNet121</span>`;
+    if (ms.ensemble) tags.innerHTML += `<span class="model-tag on">Ensemble</span>`;
+
+    const high = data.results.filter(r => r.risk === 'high');
+    const med = data.results.filter(r => r.risk === 'medium');
+    const title = document.getElementById('summary-title');
+    const text = document.getElementById('summary-text');
+
+    if (high.length > 0) {
+        title.textContent = 'Findings Detected';
+        text.textContent = `High probability: ${high.map(r => r.label).join(', ')}.${med.length > 0 ? ' Moderate: ' + med.map(r => r.label).join(', ') + '.' : ''} Consult a radiologist.`;
+    } else if (med.length > 0) {
+        title.textContent = 'Possible Findings';
+        text.textContent = `Moderate probability: ${med.map(r => r.label).join(', ')}. Clinical correlation recommended.`;
+    } else {
+        title.textContent = 'No Significant Findings';
+        text.textContent = 'All conditions show low probability. This does not rule out other pathologies.';
+    }
+}
+
+
+// ---------- PDF GENERATION ----------
+function generatePDF(data) {
+    try {
+        const { jsPDF } = window.jspdf;
+        const doc = new jsPDF();
+
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(18);
+        doc.text('ChestXpert Analysis Report', 20, 20);
+
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(10);
+        doc.text(`Date: ${data.timestamp || new Date().toLocaleString()}`, 20, 30);
+        doc.text(`File: ${data.filename || 'Unknown'}`, 20, 36);
+        doc.text(`Report ID: ${data.analysis_id || '-'}`, 20, 42);
+
+        // Original image
+        if (data.original_image) {
+            try {
+                doc.addImage('data:image/png;base64,' + data.original_image, 'PNG', 20, 50, 70, 70);
+            } catch (e) { /* skip image if it fails */ }
+        }
+
+        // Top heatmap
+        if (data.results[0] && data.results[0].heatmap) {
+            try {
+                doc.addImage('data:image/png;base64,' + data.results[0].heatmap, 'PNG', 110, 50, 70, 70);
+                doc.setFontSize(8);
+                doc.text('Grad-CAM: ' + data.results[0].label, 110, 48);
+            } catch (e) { /* skip */ }
+        }
+
+        // Findings table
+        let y = 130;
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(14);
+        doc.text('Findings', 20, y);
+        y += 10;
+
+        doc.setFontSize(9);
+        doc.setFont('helvetica', 'bold');
+        doc.text('Condition', 20, y);
+        doc.text('Probability', 90, y);
+        doc.text('Risk', 120, y);
+        doc.text('RAD-DINO', 145, y);
+        doc.text('DenseNet', 170, y);
+        y += 2;
+        doc.line(20, y, 190, y);
+        y += 6;
+
+        doc.setFont('helvetica', 'normal');
+        data.results.forEach(r => {
+            doc.text(r.label, 20, y);
+            doc.text(r.probability + '%', 90, y);
+            doc.text(r.risk.toUpperCase(), 120, y);
+            doc.text(r.rd_prob !== null ? r.rd_prob + '%' : 'N/A', 145, y);
+            doc.text(r.dn_prob !== null ? r.dn_prob + '%' : 'N/A', 170, y);
+            y += 7;
+        });
+
+        y += 10;
+        doc.setFontSize(8);
+        doc.setFont('helvetica', 'italic');
+        doc.text('Disclaimer: This report is for educational and research purposes only.', 20, y);
+        doc.text('It is not a substitute for professional medical diagnosis.', 20, y + 5);
+
+        doc.save(`chestxpert_report_${data.analysis_id || 'analysis'}.pdf`);
+        showToast('PDF downloaded', 'info');
+    } catch (e) {
+        showToast('PDF generation failed: ' + e.message, 'error');
+    }
+}
+
+
+// ---------- JSON EXPORT ----------
+function exportJSON(data) {
+    const exportData = {
+        analysis_id: data.analysis_id,
+        timestamp: data.timestamp,
+        filename: data.filename,
+        models_used: data.models_used,
+        results: data.results.map(r => ({
+            label: r.label,
+            probability: r.probability,
+            risk: r.risk,
+            rad_dino_prob: r.rd_prob,
+            densenet_prob: r.dn_prob
+        }))
+    };
+    const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `chestxpert_${data.analysis_id || 'results'}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    showToast('JSON exported', 'info');
+}
+
+
+function initHistoryPage() {
+    const historyList = document.getElementById('history-list');
+    const tableContainer = document.getElementById('history-table');
+    if (!historyList) return;
+
+    const emptyState = document.getElementById('history-empty');
+    const emptyTitle = document.getElementById('empty-title');
+    const emptyDesc = document.getElementById('empty-desc');
+    const emptyAction = document.getElementById('empty-action');
+    const btnClear = document.getElementById('btn-clear-history');
+
+    function renderRow(entry, index) {
+        const topResult = entry.results[0];
+        let statusHtml = '';
+        let statusClass = 'bg-slate-100 text-slate-700 border-slate-200';
+
+        if (entry.results.some(r => r.risk === 'high')) {
+            statusHtml = `<span class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-red-500"></span>High Risk</span>`;
+            statusClass = 'bg-red-50 text-red-700 border-red-200';
+        } else if (entry.results.some(r => r.risk === 'medium')) {
+            statusHtml = `<span class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>Moderate Risk</span>`;
+            statusClass = 'bg-amber-50 text-amber-700 border-amber-200';
+        } else {
+            statusHtml = `<span class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-slate-400"></span>Low Risk</span>`;
+        }
+
+        const dateStr = entry.timestamp ? entry.timestamp.substring(0, 16).replace('T', ' ') : 'N/A';
+        const studyId = entry.id ? 'CX-' + entry.id.substring(0, 6).toUpperCase() : (entry.filename || 'UNKNOWN');
+
+        const tr = document.createElement('tr');
+        tr.className = 'bg-white hover:bg-slate-50 border-b border-slate-100 transition-colors cursor-pointer group';
+        tr.innerHTML = `
+            <td class="px-6 py-4 whitespace-nowrap text-xs font-medium text-slate-700">${dateStr}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-xs font-mono text-slate-500 uppercase">${studyId}</td>
+            <td class="px-6 py-4 whitespace-nowrap text-xs font-bold text-slate-900">${topResult.label}</td>
+            <td class="px-6 py-4 whitespace-nowrap">
+                <div class="inline-flex items-center px-2 py-0.5 rounded-sm border ${statusClass} text-[10px] uppercase font-bold tracking-wider">
+                    ${statusHtml}
+                </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap">
+                <div class="flex items-center gap-3">
+                    <div class="w-24 h-1.5 bg-slate-100 rounded-none overflow-hidden border border-slate-200">
+                        <div class="h-full bg-blue-900 transition-all" style="width: ${topResult.probability}%"></div>
+                    </div>
+                    <span class="text-xs font-bold text-slate-700 w-8 text-right">${topResult.probability}%</span>
+                </div>
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-right text-xs font-medium">
+                <a href="/report/${entry.id}" target="_blank" class="text-blue-900 hover:text-blue-700 font-bold uppercase tracking-widest text-[10px] border border-transparent hover:border-blue-200 px-3 py-1.5 rounded-sm transition-colors" onclick="event.stopPropagation()">View Report</a>
+            </td>
+        `;
+
+        const detailsTr = document.createElement('tr');
+        detailsTr.className = 'bg-slate-50 border-b border-slate-200';
+        detailsTr.style.display = 'none';
+
+        let detailsHtml = '<td colspan="6" class="px-6 py-4"><div class="grid grid-cols-1 md:grid-cols-5 gap-6">';
+        entry.results.forEach(r => {
+            let barColor = 'bg-slate-400';
+            if (r.risk === 'high') barColor = 'bg-red-500';
+            else if (r.risk === 'medium') barColor = 'bg-amber-500';
+
+            detailsHtml += `
+                <div class="flex flex-col gap-1">
+                    <div class="flex justify-between items-center">
+                        <span class="text-[10px] font-bold uppercase tracking-widest text-slate-500">${r.label}</span>
+                        <span class="text-[10px] font-bold text-slate-700">${r.probability}%</span>
+                    </div>
+                    <div class="w-full h-1 bg-slate-200 rounded-none overflow-hidden">
+                        <div class="h-full ${barColor}" style="width: ${r.probability}%"></div>
+                    </div>
+                </div>
+            `;
+        });
+        detailsHtml += '</div></td>';
+        detailsTr.innerHTML = detailsHtml;
+
+        tr.addEventListener('click', () => {
+            const isVisible = detailsTr.style.display !== 'none';
+            document.querySelectorAll('#history-list tr:nth-child(even)').forEach(row => row.style.display = 'none');
+            document.querySelectorAll('#history-list tr:nth-child(odd)').forEach(row => row.classList.remove('bg-slate-100'));
+
+            if (!isVisible) {
+                detailsTr.style.display = '';
+                tr.classList.add('bg-slate-100');
+            }
+        });
+
+        historyList.appendChild(tr);
+        historyList.appendChild(detailsTr);
+    }
+
+    function render() {
+        const history = JSON.parse(localStorage.getItem('chestxpert_history') || '[]');
+        historyList.innerHTML = '';
+
+        if (!localStorage.getItem('cx_user')) {
+            tableContainer.style.display = 'none';
+            emptyState.style.display = 'flex';
+            emptyTitle.textContent = 'Sign In Required';
+            emptyDesc.textContent = 'Clinical history access requires active authentication.';
+            emptyAction.innerHTML = '<a href="/login" class="bg-slate-800 hover:bg-slate-700 text-white text-[10px] font-bold py-2 px-6 rounded-sm uppercase tracking-widest shadow-sm transition-colors inline-block">Secure Login</a>';
+            if (btnClear) btnClear.style.display = 'none';
+            return;
+        }
+
+        if (history.length === 0) {
+            tableContainer.style.display = 'none';
+            emptyState.style.display = 'flex';
+            emptyTitle.textContent = 'Archive Empty';
+            emptyDesc.textContent = 'No clinical studies are currently stored in the local registry.';
+            emptyAction.innerHTML = '<a href="/analyze" class="bg-blue-900 hover:bg-blue-800 text-white text-[10px] font-bold py-2 px-6 rounded-sm uppercase tracking-widest shadow-sm transition-colors border border-blue-900 inline-block">Initialize New Study</a>';
+            return;
+        }
+
+        tableContainer.style.display = 'table';
+        emptyState.style.display = 'none';
+        if (btnClear) btnClear.style.display = 'block';
+
+        history.forEach((entry, idx) => renderRow(entry, idx));
+
+        const searchInput = document.querySelector('input[placeholder="Search by ID or Date..."]');
+        if (searchInput) {
+            searchInput.addEventListener('input', (e) => {
+                const term = e.target.value.toLowerCase();
+                const rows = historyList.querySelectorAll('tr:nth-child(odd)');
+                const details = historyList.querySelectorAll('tr:nth-child(even)');
+                rows.forEach((row, i) => {
+                    const text = row.textContent.toLowerCase();
+                    if (text.includes(term)) {
+                        row.style.display = '';
+                    } else {
+                        row.style.display = 'none';
+                        details[i].style.display = 'none';
+                    }
+                });
+            });
+        }
+    }
+
+    btnClear.addEventListener('click', () => {
+        localStorage.removeItem('chestxpert_history');
+        render();
+    });
+
+    render();
+}
+
+
+function initComparePage() {
+    const zoneA = document.getElementById('upload-zone-a');
+    if (!zoneA) return;
+
+    const zoneB = document.getElementById('upload-zone-b');
+    const inputA = document.getElementById('file-input-a');
+    const inputB = document.getElementById('file-input-b');
+    const previewA = document.getElementById('preview-a');
+    const previewB = document.getElementById('preview-b');
+    const imgA = document.getElementById('preview-img-a');
+    const imgB = document.getElementById('preview-img-b');
+    const btnChangeA = document.getElementById('btn-change-a');
+    const btnChangeB = document.getElementById('btn-change-b');
+    const btnCompare = document.getElementById('btn-compare');
+    const loadingDiv = document.getElementById('compare-loading');
+    const resultsDiv = document.getElementById('compare-results');
+    const btnNew = document.getElementById('btn-compare-new');
+
+    const predsEmptyA = document.getElementById('compare-preds-a-empty');
+    const predsA = document.getElementById('compare-preds-a');
+    const predsEmptyB = document.getElementById('compare-preds-b-empty');
+    const predsB = document.getElementById('compare-preds-b');
+    const diffContainer = document.getElementById('compare-diff');
+
+    let fileA = null, fileB = null;
+
+    if (zoneA) zoneA.addEventListener('click', () => inputA && inputA.click());
+    if (zoneB) zoneB.addEventListener('click', () => inputB && inputB.click());
+
+    inputA.addEventListener('change', (e) => { if (e.target.files[0]) setFile('a', e.target.files[0]); });
+    inputB.addEventListener('change', (e) => { if (e.target.files[0]) setFile('b', e.target.files[0]); });
+
+    btnChangeA.addEventListener('click', (e) => { e.stopPropagation(); clearFile('a'); });
+    btnChangeB.addEventListener('click', (e) => { e.stopPropagation(); clearFile('b'); });
+    btnCompare.addEventListener('click', runComparison);
+    btnNew.addEventListener('click', () => {
+        clearFile('a'); clearFile('b');
+        resetDiffs();
+    });
+
+    function setupToolbar(zoneId, imgId) {
+        const zone = document.getElementById(zoneId);
+        const img = document.getElementById(imgId);
+        if (!zone || !img) return;
+
+        const btns = Array.from(zone.querySelectorAll('button'));
+        const invertBtn = btns.find(b => b.textContent.trim() === 'INVERT');
+        const resetBtn = btns.find(b => b.textContent.trim() === 'RESET');
+        const gradcamBtn = btns.find(b => b.textContent.trim() === 'GRAD-CAM');
+
+        let inverted = false;
+
+        if (invertBtn) {
+            invertBtn.addEventListener('click', () => {
+                inverted = !inverted;
+                img.style.filter = inverted ? 'invert(1)' : 'none';
+            });
+        }
+
+        if (resetBtn) {
+            resetBtn.addEventListener('click', () => {
+                inverted = false;
+                img.style.filter = 'none';
+                if (img.dataset.original) img.src = img.dataset.original;
+            });
+        }
+
+        if (gradcamBtn) {
+            gradcamBtn.addEventListener('click', () => {
+                if (img.dataset.heatmap) {
+                    img.src = img.src === img.dataset.heatmap ? (img.dataset.original || img.src) : img.dataset.heatmap;
+                } else {
+                    showToast('Compute Differential first to generate Grad-CAM.', 'info');
+                }
+            });
+        }
+    }
+
+    setupToolbar('compare-zone-1', 'preview-img-a');
+    setupToolbar('compare-zone-2', 'preview-img-b');
+
+    function setFile(side, file) {
+        if (side === 'a') { fileA = file; } else { fileB = file; }
+        const zone = side === 'a' ? zoneA : zoneB;
+        const preview = side === 'a' ? previewA : previewB;
+        const img = side === 'a' ? imgA : imgB;
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            img.src = e.target.result;
+            zone.style.display = 'none';
+            preview.style.display = 'flex';
+        };
+        reader.readAsDataURL(file);
+    }
+
+    function clearFile(side) {
+        if (side === 'a') { fileA = null; inputA.value = ''; } else { fileB = null; inputB.value = ''; }
+        const zone = side === 'a' ? zoneA : zoneB;
+        const preview = side === 'a' ? previewA : previewB;
+        zone.style.display = 'flex';
+        preview.style.display = 'none';
+
+        if (side === 'a') {
+            predsA.style.display = 'none';
+            predsEmptyA.style.display = 'flex';
+            predsA.innerHTML = '';
+            delete imgA.dataset.original;
+            delete imgA.dataset.heatmap;
+        } else {
+            predsB.style.display = 'none';
+            predsEmptyB.style.display = 'flex';
+            predsB.innerHTML = '';
+            delete imgB.dataset.original;
+            delete imgB.dataset.heatmap;
+        }
+    }
+
+    function resetDiffs() {
+        if (!diffContainer) return;
+        diffContainer.innerHTML = `
+            <div class="bg-slate-100 border border-slate-200 rounded-sm p-3 flex flex-col items-center justify-center h-20">
+                <span class="text-[9px] font-bold uppercase tracking-widest text-slate-500 mb-1">Atelectasis</span>
+                <span class="text-lg font-bold text-slate-400">---</span>
+            </div>
+            <div class="bg-slate-100 border border-slate-200 rounded-sm p-3 flex flex-col items-center justify-center h-20">
+                <span class="text-[9px] font-bold uppercase tracking-widest text-slate-500 mb-1">Cardiomegaly</span>
+                <span class="text-lg font-bold text-slate-400">---</span>
+            </div>
+            <div class="bg-slate-100 border border-slate-200 rounded-sm p-3 flex flex-col items-center justify-center h-20">
+                <span class="text-[9px] font-bold uppercase tracking-widest text-slate-500 mb-1">Consolidation</span>
+                <span class="text-lg font-bold text-slate-400">---</span>
+            </div>
+            <div class="bg-slate-100 border border-slate-200 rounded-sm p-3 flex flex-col items-center justify-center h-20">
+                <span class="text-[9px] font-bold uppercase tracking-widest text-slate-500 mb-1">Edema</span>
+                <span class="text-lg font-bold text-slate-400">---</span>
+            </div>
+            <div class="bg-slate-100 border border-slate-200 rounded-sm p-3 flex flex-col items-center justify-center h-20">
+                <span class="text-[9px] font-bold uppercase tracking-widest text-slate-500 mb-1">Pleural Effusion</span>
+                <span class="text-lg font-bold text-slate-400">---</span>
+            </div>
+        `;
+    }
+
+    async function runComparison() {
+        if (!fileA || !fileB) {
+            showToast('Please upload both Baseline and Follow-up studies.', 'error');
+            return;
+        }
+
+        loadingDiv.style.display = 'flex';
+
+        let bar = document.getElementById('compare-loading-bar');
+        if (bar) {
+            bar.style.width = '0%';
+            setTimeout(() => { bar.style.width = '85%'; }, 100);
+        }
+
+        try {
+            const [resA, resB] = await Promise.all([
+                analyzeFile(fileA),
+                analyzeFile(fileB)
+            ]);
+
+            loadingDiv.style.display = 'none';
+
+            if (resA.error || resB.error) {
+                showToast('Analysis failed: ' + (resA.error || resB.error), 'error');
+                return;
+            }
+
+            showCompareResults(resA, resB);
+        } catch (e) {
+            showToast('Comparison failed', 'error');
+            loadingDiv.style.display = 'none';
+        }
+    }
+
+    async function analyzeFile(file) {
+        const formData = new FormData();
+        formData.append('file', file);
+        const res = await fetch('/predict', { method: 'POST', body: formData });
+        return res.json();
+    }
+
+    function showCompareResults(dataA, dataB) {
+        predsEmptyA.style.display = 'none';
+        predsEmptyB.style.display = 'none';
+        predsA.style.display = 'flex';
+        predsB.style.display = 'flex';
+
+        imgA.dataset.original = 'data:image/png;base64,' + dataA.original_image;
+        if (dataA.results[0] && dataA.results[0].heatmap) imgA.dataset.heatmap = 'data:image/png;base64,' + dataA.results[0].heatmap;
+
+        imgB.dataset.original = 'data:image/png;base64,' + dataB.original_image;
+        if (dataB.results[0] && dataB.results[0].heatmap) imgB.dataset.heatmap = 'data:image/png;base64,' + dataB.results[0].heatmap;
+
+        renderComparePreds(predsA, dataA.results);
+        renderComparePreds(predsB, dataB.results);
+        renderDiff(dataA.results, dataB.results);
+    }
+
+    function renderComparePreds(el, results) {
+        el.innerHTML = '<div class="flex flex-col gap-3">';
+        results.forEach(r => {
+            let color = 'bg-slate-400';
+            if (r.risk === 'high') color = 'bg-red-500';
+            else if (r.risk === 'medium') color = 'bg-amber-500';
+
+            el.innerHTML += `
+                <div class="flex items-center justify-between text-xs">
+                    <span class="font-bold text-slate-700 uppercase tracking-wide">${r.label}</span>
+                    <div class="flex items-center gap-3 w-3/5">
+                        <div class="h-1.5 rounded-none bg-slate-200 w-full overflow-hidden border border-slate-300">
+                            <div class="h-full ${color}" style="width: ${r.probability}%"></div>
+                        </div>
+                        <span class="text-[10px] font-bold text-slate-700 w-8 text-right">${r.probability}%</span>
+                    </div>
+                </div>
+            `;
+        });
+        el.innerHTML += '</div>';
+    }
+
+    function renderDiff(resultsA, resultsB) {
+        if (!diffContainer) return;
+        diffContainer.innerHTML = '';
+
+        const mapA = {};
+        resultsA.forEach(r => { mapA[r.label] = r.probability; });
+
+        resultsB.forEach(r => {
+            const probA = mapA[r.label] || 0;
+            const diff = (r.probability - probA).toFixed(1);
+
+            let colorClass = 'text-slate-600 bg-slate-100 border-slate-200';
+            let sign = '';
+
+            if (diff > 5) {
+                colorClass = 'text-red-700 bg-red-50 border-red-200';
+                sign = '+';
+            } else if (diff < -5) {
+                colorClass = 'text-emerald-700 bg-emerald-50 border-emerald-200';
+            }
+
+            diffContainer.innerHTML += `
+                <div class="${colorClass} border rounded-sm p-3 flex flex-col items-center justify-center h-20 transition-colors">
+                    <span class="text-[9px] font-bold uppercase tracking-widest opacity-80 mb-1">${r.label}</span>
+                    <span class="text-lg font-bold">${sign}${diff}%</span>
+                </div>
+            `;
+        });
+    }
+}
+
+
+// ---------- SAMPLE GALLERY ----------
+function loadSamples() {
+    const grid = document.getElementById('samples-grid');
+    if (!grid) return;
+
+    fetch('/api/samples').then(r => r.json()).then(samples => {
+        if (samples.length === 0) {
+            grid.closest('.samples-section').style.display = 'none';
+            return;
+        }
+
+        samples.forEach(s => {
+            const card = document.createElement('div');
+            card.className = 'sample-card';
+            card.innerHTML = `<img src="${s.url}" alt="${s.name}"><p>${s.name}</p>`;
+            card.addEventListener('click', async () => {
+                const res = await fetch(s.url);
+                const blob = await res.blob();
+                const file = new File([blob], s.filename, { type: blob.type });
+                if (window._handleFile) window._handleFile(file);
+            });
+            grid.appendChild(card);
+        });
+    }).catch(() => {
+        const section = grid.closest('.samples-section');
+        if (section) section.style.display = 'none';
+    });
+}
+
+
+// ---------- TOAST ----------
+function showToast(msg, type) {
+    const t = document.createElement('div');
+    t.className = 'toast ' + type;
+    t.textContent = msg;
+    document.body.appendChild(t);
+    setTimeout(() => t.remove(), 3500);
+}

static/style.css

@@ -0,0 +1,1879 @@
+/* ── ChestXpert — Professional Light Medical Theme ──────────────────── */
+:root {
+    --bg: #f8fafc;
+    --bg-white: #ffffff;
+    --bg-subtle: #f1f5f9;
+    --border: #e2e8f0;
+    --border-focus: #2563eb;
+    --text: #0f172a;
+    --text-secondary: #475569;
+    --text-muted: #94a3b8;
+    --primary: #2563eb;
+    --primary-light: #eff6ff;
+    --primary-hover: #1d4ed8;
+    --green: #16a34a;
+    --green-bg: #f0fdf4;
+    --yellow: #ca8a04;
+    --yellow-bg: #fefce8;
+    --red: #dc2626;
+    --red-bg: #fef2f2;
+    --radius: 12px;
+    --radius-sm: 8px;
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
+    --font: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: var(--font);
+    background: var(--bg);
+    color: var(--text);
+    line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+}
+
+.container {
+    max-width: 1120px;
+    margin: 0 auto;
+    padding: 0 24px;
+}
+
+a {
+    color: var(--primary);
+    text-decoration: none;
+}
+
+/* ── Navigation ─────────────────────────────────────────────────────── */
+.navbar {
+    background: var(--bg-white);
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+.nav-container {
+    max-width: 1120px;
+    margin: 0 auto;
+    padding: 0 24px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.nav-brand {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-weight: 700;
+    font-size: 1.1rem;
+    color: var(--text);
+}
+
+.nav-logo {
+    width: 32px;
+    height: 32px;
+}
+
+.brand-mark {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border-radius: 8px;
+    background: var(--primary);
+    color: white;
+    font-size: 0.72rem;
+    font-weight: 700;
+}
+
+.feature-num {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: var(--primary-light);
+    color: var(--primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    font-weight: 700;
+    margin: 0 auto 14px;
+}
+
+.hero-tag {
+    font-size: 0.82rem;
+    color: var(--primary);
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+
+.nav-links {
+    display: flex;
+    gap: 4px;
+}
+
+.nav-link {
+    padding: 8px 16px;
+    border-radius: var(--radius-sm);
+    font-size: 0.88rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    transition: all 0.2s;
+}
+
+.nav-link:hover {
+    color: var(--text);
+    background: var(--bg-subtle);
+}
+
+.nav-link.active {
+    color: var(--primary);
+    background: var(--primary-light);
+}
+
+.nav-status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.78rem;
+    color: var(--text-muted);
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--text-muted);
+}
+
+.status-dot.online {
+    background: var(--green);
+    box-shadow: 0 0 4px var(--green);
+}
+
+.status-dot.partial {
+    background: var(--yellow);
+}
+
+.status-dot.offline {
+    background: var(--red);
+}
+
+/* ── Buttons ────────────────────────────────────────────────────────── */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 9px 18px;
+    border-radius: var(--radius-sm);
+    border: none;
+    font-family: var(--font);
+    font-weight: 600;
+    font-size: 0.88rem;
+    cursor: pointer;
+    transition: all 0.2s;
+    line-height: 1.4;
+}
+
+.btn-primary {
+    background: var(--primary);
+    color: white;
+}
+
+.btn-primary:hover {
+    background: var(--primary-hover);
+}
+
+.btn-lg {
+    padding: 12px 28px;
+    font-size: 0.95rem;
+}
+
+.btn-outline {
+    background: var(--bg-white);
+    color: var(--text-secondary);
+    border: 1px solid var(--border);
+}
+
+.btn-outline:hover {
+    border-color: var(--primary);
+    color: var(--primary);
+}
+
+.btn-text {
+    background: none;
+    color: var(--primary);
+    padding: 4px 8px;
+}
+
+/* ── Cards ──────────────────────────────────────────────────────────── */
+.card {
+    background: var(--bg-white);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 24px;
+}
+
+/* ── Hero Section ───────────────────────────────────���───────────────── */
+.hero {
+    padding: 60px 0 80px;
+    background: linear-gradient(180deg, var(--primary-light) 0%, var(--bg) 100%);
+}
+
+.hero-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 60px;
+    align-items: center;
+}
+
+.hero-badge {
+    display: inline-block;
+    padding: 4px 14px;
+    background: var(--primary-light);
+    color: var(--primary);
+    font-size: 0.78rem;
+    font-weight: 600;
+    border-radius: 20px;
+    border: 1px solid rgba(37, 99, 235, 0.2);
+    margin-bottom: 16px;
+}
+
+.hero h1 {
+    font-size: 2.6rem;
+    font-weight: 800;
+    line-height: 1.15;
+    letter-spacing: -0.03em;
+    color: var(--text);
+    margin-bottom: 16px;
+}
+
+.hero-desc {
+    font-size: 1.02rem;
+    color: var(--text-secondary);
+    line-height: 1.7;
+    margin-bottom: 28px;
+}
+
+.hero-stats {
+    display: flex;
+    align-items: center;
+    gap: 24px;
+    margin-bottom: 32px;
+}
+
+.stat-value {
+    display: block;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary);
+}
+
+.stat-label {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    font-weight: 500;
+}
+
+.stat-divider {
+    width: 1px;
+    height: 36px;
+    background: var(--border);
+}
+
+/* Hero Visual */
+.hero-card {
+    background: var(--bg-white);
+    border-radius: var(--radius);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-md);
+    overflow: hidden;
+}
+
+.hero-card-header {
+    padding: 10px 14px;
+    display: flex;
+    gap: 6px;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-subtle);
+}
+
+.card-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+}
+
+.card-dot.red {
+    background: #fca5a5;
+}
+
+.card-dot.yellow {
+    background: #fde68a;
+}
+
+.card-dot.green {
+    background: #86efac;
+}
+
+.hero-preview {
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f9fafb;
+}
+
+.preview-placeholder {
+    text-align: center;
+    color: var(--text-muted);
+}
+
+.preview-placeholder p {
+    margin-top: 8px;
+    font-size: 0.82rem;
+}
+
+.hero-bars {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.hero-bar-item {
+    display: grid;
+    grid-template-columns: 120px 1fr 40px;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+}
+
+.hero-bar-track {
+    height: 6px;
+    border-radius: 3px;
+    background: var(--bg-subtle);
+    overflow: hidden;
+}
+
+.hero-bar-fill {
+    height: 100%;
+    border-radius: 3px;
+    background: var(--red);
+    transition: width 1s ease;
+}
+
+.hero-bar-fill.medium {
+    background: var(--yellow);
+}
+
+.hero-bar-fill.low {
+    background: var(--green);
+}
+
+.hero-bar-pct {
+    text-align: right;
+    font-weight: 600;
+    font-size: 0.78rem;
+}
+
+/* ── Features ───────────────────────────────────────────────────────── */
+.features {
+    padding: 80px 0;
+}
+
+.section-title {
+    text-align: center;
+    font-size: 1.6rem;
+    font-weight: 700;
+    margin-bottom: 8px;
+}
+
+.section-desc {
+    text-align: center;
+    color: var(--text-secondary);
+    margin-bottom: 40px;
+    font-size: 0.95rem;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+}
+
+.feature-card {
+    background: var(--bg-white);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 28px 24px;
+    text-align: center;
+    transition: box-shadow 0.2s;
+}
+
+.feature-card:hover {
+    box-shadow: var(--shadow-md);
+}
+
+.feature-icon {
+    width: 56px;
+    height: 56px;
+    border-radius: 14px;
+    background: var(--primary-light);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+}
+
+.feature-card h3 {
+    font-size: 1rem;
+    font-weight: 700;
+    margin-bottom: 8px;
+}
+
+.feature-card p {
+    font-size: 0.88rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
+
+/* ── Conditions ─────────────────────────────────────────────────────── */
+.conditions {
+    padding: 60px 0 80px;
+    background: var(--bg-white);
+}
+
+.conditions-grid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 16px;
+}
+
+.condition-card {
+    text-align: center;
+    padding: 24px 16px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    transition: box-shadow 0.2s;
+}
+
+.condition-card:hover {
+    box-shadow: var(--shadow-md);
+}
+
+.condition-icon {
+    font-size: 2rem;
+    margin-bottom: 12px;
+}
+
+.condition-card h4 {
+    font-size: 0.88rem;
+    font-weight: 700;
+    margin-bottom: 6px;
+}
+
+.condition-card p {
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
+
+/* ── CTA ────────────────────────────────────────────────────────────── */
+.cta {
+    padding: 60px 0;
+}
+
+.cta-card {
+    background: var(--primary);
+    color: white;
+    border-radius: var(--radius);
+    text-align: center;
+    padding: 48px 40px;
+}
+
+.cta-card h2 {
+    font-size: 1.5rem;
+    margin-bottom: 8px;
+}
+
+.cta-card p {
+    opacity: 0.85;
+    margin-bottom: 24px;
+}
+
+.cta-card .btn {
+    background: white;
+    color: var(--primary);
+}
+
+.cta-card .btn:hover {
+    background: #f0f0f0;
+}
+
+/* ── Page Content ───────────────────────────────────────────────────── */
+.page-content {
+    padding: 32px 0 60px;
+    min-height: calc(100vh - 140px);
+}
+
+.page-header {
+    margin-bottom: 32px;
+}
+
+.page-header h1 {
+    font-size: 1.6rem;
+    font-weight: 700;
+    margin-bottom: 4px;
+}
+
+.page-header p {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+}
+
+/* ── Upload ─────────────────────────────────────────────────────────── */
+.upload-card {
+    border: 2px dashed var(--border);
+    border-radius: var(--radius);
+    padding: 60px 40px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    background: var(--bg-white);
+}
+
+.upload-card:hover,
+.upload-card.dragover {
+    border-color: var(--primary);
+    background: var(--primary-light);
+}
+
+.upload-icon-wrap {
+    width: 72px;
+    height: 72px;
+    border-radius: 50%;
+    background: var(--primary-light);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 16px;
+}
+
+.upload-card h3 {
+    font-size: 1.15rem;
+    font-weight: 700;
+    margin-bottom: 6px;
+}
+
+.upload-card p {
+    color: var(--text-secondary);
+    font-size: 0.92rem;
+    margin-bottom: 8px;
+}
+
+.upload-hint {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+}
+
+/* Preview Card */
+.preview-card {
+    background: var(--bg-white);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    max-width: 560px;
+    margin: 0 auto;
+}
+
+.preview-header {
+    padding: 14px 20px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.preview-header h3 {
+    font-size: 0.92rem;
+    font-weight: 600;
+}
+
+.preview-body {
+    background: #f9fafb;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-height: 380px;
+    overflow: hidden;
+}
+
+.preview-body img {
+    width: 100%;
+    max-height: 380px;
+    object-fit: contain;
+}
+
+.preview-footer {
+    padding: 14px 20px;
+    border-top: 1px solid var(--border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.file-info {
+    font-size: 0.82rem;
+    color: var(--text-muted);
+}
+
+/* ── Loading ────────────────────────────────────────────────────────── */
+.loading-card {
+    max-width: 420px;
+    margin: 40px auto;
+    background: var(--bg-white);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 36px 32px;
+    text-align: center;
+}
+
+.loading-bar {
+    height: 4px;
+    background: var(--bg-subtle);
+    border-radius: 2px;
+    overflow: hidden;
+    margin-bottom: 24px;
+}
+
+.loading-bar-fill {
+    width: 0%;
+    height: 100%;
+    background: var(--primary);
+    border-radius: 2px;
+    transition: width 0.4s;
+    animation: loading-pulse 2s ease-in-out infinite;
+}
+
+@keyframes loading-pulse {
+
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.6;
+    }
+}
+
+.loading-card h3 {
+    font-size: 1.05rem;
+    font-weight: 700;
+    margin-bottom: 4px;
+}
+
+.loading-card p {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    margin-bottom: 20px;
+}
+
+.loading-steps-list {
+    text-align: left;
+}
+
+.step-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 0;
+    font-size: 0.84rem;
+    color: var(--text-muted);
+    transition: color 0.2s;
+}
+
+.step-item.active {
+    color: var(--primary);
+    font-weight: 500;
+}
+
+.step-item.done {
+    color: var(--green);
+}
+
+.step-num {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--bg-subtle);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.72rem;
+    font-weight: 700;
+}
+
+.step-item.active .step-num {
+    background: var(--primary-light);
+    color: var(--primary);
+}
+
+.step-item.done .step-num {
+    background: var(--green-bg);
+    color: var(--green);
+}
+
+/* ── Results ────────────────────────────────────────────────────────── */
+.results-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.results-bar h2 {
+    font-size: 1.2rem;
+    font-weight: 700;
+}
+
+.results-layout {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    align-items: start;
+}
+
+/* Image Column */
+.card-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border);
+    margin: -24px -24px 0;
+    padding: 0 24px;
+}
+
+.card-tab {
+    padding: 12px 16px;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    font-family: var(--font);
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.card-tab.active {
+    color: var(--primary);
+    border-bottom-color: var(--primary);
+}
+
+.card-tab:hover:not(.active) {
+    color: var(--text);
+}
+
+.card-image-wrap {
+    margin: 16px -24px;
+    background: #f9fafb;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+}
+
+.card-image {
+    width: 100%;
+    max-height: 400px;
+    object-fit: contain;
+}
+
+.heatmap-selector {
+    border-top: 1px solid var(--border);
+    margin: 0 -24px -24px;
+    padding: 14px 24px;
+}
+
+.heatmap-selector label {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    display: block;
+    margin-bottom: 8px;
+}
+
+.pill-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.pill {
+    padding: 4px 12px;
+    border-radius: 20px;
+    border: 1px solid var(--border);
+    background: var(--bg-white);
+    font-family: var(--font);
+    font-size: 0.78rem;
+    font-weight: 500;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.15s;
+}
+
+.pill:hover {
+    border-color: var(--primary);
+    color: var(--primary);
+}
+
+.pill.active {
+    background: var(--primary-light);
+    border-color: var(--primary);
+    color: var(--primary);
+}
+
+.model-card {
+    margin-top: 16px;
+}
+
+.model-card h4 {
+    font-size: 0.88rem;
+    font-weight: 600;
+    margin-bottom: 10px;
+}
+
+.model-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.model-tag {
+    padding: 5px 12px;
+    border-radius: 20px;
+    font-size: 0.76rem;
+    font-weight: 600;
+}
+
+.model-tag.on {
+    background: var(--green-bg);
+    color: var(--green);
+    border: 1px solid rgba(22, 163, 74, 0.2);
+}
+
+.model-tag.off {
+    background: var(--bg-subtle);
+    color: var(--text-muted);
+    border: 1px solid var(--border);
+}
+
+/* Predictions */
+.card-title {
+    font-size: 1rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+}
+
+.pred-item {
+    padding: 14px 16px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    margin-bottom: 10px;
+    transition: box-shadow 0.2s;
+}
+
+.pred-item:hover {
+    box-shadow: var(--shadow);
+}
+
+.pred-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+}
+
+.pred-name {
+    font-weight: 600;
+    font-size: 0.9rem;
+}
+
+.pred-name span {
+    margin-right: 6px;
+}
+
+.pred-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.pred-pct {
+    font-weight: 700;
+    font-size: 1rem;
+    font-variant-numeric: tabular-nums;
+}
+
+.pred-pct.low {
+    color: var(--green);
+}
+
+.pred-pct.medium {
+    color: var(--yellow);
+}
+
+.pred-pct.high {
+    color: var(--red);
+}
+
+.risk-tag {
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 0.68rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+}
+
+.risk-tag.low {
+    background: var(--green-bg);
+    color: var(--green);
+}
+
+.risk-tag.medium {
+    background: var(--yellow-bg);
+    color: var(--yellow);
+}
+
+.risk-tag.high {
+    background: var(--red-bg);
+    color: var(--red);
+}
+
+.pred-bar-bg {
+    height: 6px;
+    border-radius: 3px;
+    background: var(--bg-subtle);
+    overflow: hidden;
+    margin-bottom: 8px;
+}
+
+.pred-bar {
+    height: 100%;
+    border-radius: 3px;
+    width: 0%;
+    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.pred-bar.low {
+    background: var(--green);
+}
+
+.pred-bar.medium {
+    background: var(--yellow);
+}
+
+.pred-bar.high {
+    background: var(--red);
+}
+
+.pred-desc {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    line-height: 1.4;
+}
+
+.pred-models {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    margin-top: 4px;
+    display: flex;
+    gap: 12px;
+}
+
+/* Summary */
+.summary-card {
+    margin-top: 16px;
+}
+
+.summary-top {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+
+.summary-badge {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+}
+
+.summary-top h4 {
+    font-size: 0.95rem;
+    font-weight: 700;
+}
+
+.summary-card>p {
+    font-size: 0.88rem;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+/* Disclaimer */
+.disclaimer {
+    margin-top: 16px;
+    padding: 14px 18px;
+    background: var(--yellow-bg);
+    border: 1px solid rgba(202, 138, 4, 0.15);
+    border-radius: var(--radius-sm);
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
+
+.disclaimer.lg {
+    padding: 24px;
+    font-size: 0.88rem;
+}
+
+.disclaimer.lg h4 {
+    margin-bottom: 8px;
+    color: var(--text);
+}
+
+/* ── About Page ─────────────────────────────────────────────────────── */
+.about-section {
+    margin-bottom: 40px;
+}
+
+.about-section h2 {
+    font-size: 1.2rem;
+    font-weight: 700;
+    margin-bottom: 16px;
+}
+
+.about-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+}
+
+.about-grid.two-col {
+    grid-template-columns: repeat(2, 1fr);
+}
+
+.about-card {
+    text-align: center;
+}
+
+.about-card-icon {
+    font-size: 2rem;
+    margin-bottom: 12px;
+}
+
+.about-card h3 {
+    font-size: 1rem;
+    font-weight: 700;
+    margin-bottom: 4px;
+}
+
+.about-card-sub {
+    font-size: 0.8rem;
+    color: var(--text-muted);
+    margin-bottom: 14px;
+}
+
+.about-card ul {
+    list-style: none;
+    text-align: left;
+    font-size: 0.84rem;
+    color: var(--text-secondary);
+}
+
+.about-card ul li {
+    padding: 4px 0;
+    padding-left: 16px;
+    position: relative;
+}
+
+.about-card ul li::before {
+    content: '•';
+    position: absolute;
+    left: 0;
+    color: var(--primary);
+}
+
+.about-card-badge {
+    display: inline-block;
+    margin-top: 14px;
+    padding: 4px 14px;
+    border-radius: 20px;
+    background: var(--bg-subtle);
+    font-size: 0.82rem;
+    font-weight: 700;
+    color: var(--text-secondary);
+}
+
+.about-card-badge.highlight {
+    background: var(--primary-light);
+    color: var(--primary);
+}
+
+/* Performance Table */
+.perf-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.88rem;
+}
+
+.perf-table th {
+    text-align: left;
+    padding: 10px 14px;
+    border-bottom: 2px solid var(--border);
+    font-weight: 600;
+    color: var(--text-secondary);
+    font-size: 0.82rem;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.perf-table td {
+    padding: 10px 14px;
+    border-bottom: 1px solid var(--border);
+}
+
+.perf-table tfoot td {
+    font-weight: 700;
+    border-top: 2px solid var(--border);
+    border-bottom: none;
+}
+
+.perf-badge {
+    padding: 2px 10px;
+    border-radius: 10px;
+    font-size: 0.72rem;
+    font-weight: 700;
+}
+
+.perf-badge.excellent {
+    background: var(--green-bg);
+    color: var(--green);
+}
+
+.perf-badge.good {
+    background: var(--primary-light);
+    color: var(--primary);
+}
+
+.perf-badge.fair {
+    background: var(--yellow-bg);
+    color: var(--yellow);
+}
+
+/* Dataset */
+.dataset-info {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 24px;
+    align-items: center;
+}
+
+.dataset-item h4 {
+    font-size: 1rem;
+    font-weight: 700;
+    margin-bottom: 6px;
+}
+
+.dataset-item p {
+    font-size: 0.88rem;
+    color: var(--text-secondary);
+}
+
+.dataset-stats {
+    display: flex;
+    gap: 24px;
+    justify-content: flex-end;
+}
+
+.ds-stat {
+    text-align: center;
+}
+
+.ds-num {
+    display: block;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--primary);
+}
+
+.ds-label {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    font-weight: 500;
+}
+
+/* Detail Card */
+.detail-card h4 {
+    font-size: 0.95rem;
+    font-weight: 700;
+    margin-bottom: 14px;
+}
+
+.detail-card dl {
+    display: grid;
+    grid-template-columns: 120px 1fr;
+    gap: 8px 12px;
+    font-size: 0.84rem;
+}
+
+.detail-card dt {
+    font-weight: 600;
+    color: var(--text-secondary);
+}
+
+.detail-card dd {
+    color: var(--text);
+}
+
+/* ── Footer ─────────────────────────────────────────────────────────── */
+.footer {
+    background: var(--bg-white);
+    border-top: 1px solid var(--border);
+    padding: 40px 0;
+    margin-top: 40px;
+}
+
+.footer-grid {
+    display: grid;
+    grid-template-columns: 2fr 1fr 1fr;
+    gap: 40px;
+    margin-bottom: 24px;
+}
+
+.footer h4 {
+    font-size: 0.88rem;
+    font-weight: 700;
+    margin-bottom: 12px;
+}
+
+.footer p {
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
+
+.footer a {
+    display: block;
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+    padding: 3px 0;
+}
+
+.footer a:hover {
+    color: var(--primary);
+}
+
+.footer-bottom {
+    border-top: 1px solid var(--border);
+    padding-top: 20px;
+    text-align: center;
+}
+
+.footer-bottom p {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+}
+
+/* ── Responsive ─────────────────────────────────────────────────────── */
+@media (max-width: 768px) {
+    .hero-content {
+        grid-template-columns: 1fr;
+        gap: 32px;
+    }
+
+    .hero-visual {
+        display: none;
+    }
+
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .conditions-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .results-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .about-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .about-grid.two-col {
+        grid-template-columns: 1fr;
+    }
+
+    .dataset-info {
+        grid-template-columns: 1fr;
+    }
+
+    .footer-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ── Animations ─────────────────────────────────────────────────────── */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(8px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.results-section {
+    animation: fadeIn 0.4s ease;
+}
+
+.pred-item {
+    animation: fadeIn 0.35s ease backwards;
+}
+
+.pred-item:nth-child(1) {
+    animation-delay: 0.05s;
+}
+
+.pred-item:nth-child(2) {
+    animation-delay: 0.1s;
+}
+
+.pred-item:nth-child(3) {
+    animation-delay: 0.15s;
+}
+
+.pred-item:nth-child(4) {
+    animation-delay: 0.2s;
+}
+
+.pred-item:nth-child(5) {
+    animation-delay: 0.25s;
+}
+
+/* Toast */
+.toast {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    padding: 12px 20px;
+    border-radius: var(--radius-sm);
+    font-family: var(--font);
+    font-size: 0.85rem;
+    font-weight: 600;
+    z-index: 9999;
+    box-shadow: var(--shadow-md);
+    animation: fadeIn 0.3s ease;
+}
+
+.toast.error {
+    background: var(--red);
+    color: white;
+}
+
+.toast.info {
+    background: var(--primary);
+    color: white;
+}
+
+/* ── Hero Actions ───────────────────────────────────────────────────── */
+.hero-actions {
+    display: flex;
+    gap: 12px;
+}
+
+/* ── Features Overview (4-col) ──────────────────────────────────────── */
+.features-overview {
+    padding: 60px 0;
+    background: var(--bg-white);
+}
+
+.four-col {
+    grid-template-columns: repeat(4, 1fr);
+}
+
+/* ── Page Header Row ────────────────────────────────────────────────── */
+.page-header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+/* ── Results Actions ────────────────────────────────────────────────── */
+.results-actions {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+/* ── Sample Gallery ─────────────────────────────────────────────────── */
+.samples-section {
+    margin-bottom: 24px;
+}
+
+.samples-section h3 {
+    font-size: 1rem;
+    font-weight: 600;
+    margin-bottom: 4px;
+}
+
+.samples-hint {
+    font-size: 0.82rem;
+    color: var(--text-muted);
+    margin-bottom: 12px;
+}
+
+.samples-grid {
+    display: flex;
+    gap: 12px;
+    overflow-x: auto;
+    padding-bottom: 8px;
+}
+
+.sample-card {
+    min-width: 120px;
+    max-width: 140px;
+    background: var(--bg-white);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    cursor: pointer;
+    transition: all 0.2s;
+    flex-shrink: 0;
+}
+
+.sample-card:hover {
+    border-color: var(--primary);
+    box-shadow: var(--shadow);
+}
+
+.sample-card img {
+    width: 100%;
+    height: 100px;
+    object-fit: cover;
+}
+
+.sample-card p {
+    padding: 6px 10px;
+    font-size: 0.72rem;
+    font-weight: 500;
+    text-align: center;
+    color: var(--text-secondary);
+}
+
+/* ── History Page ───────────────────────────────────────────────────── */
+.empty-state {
+    text-align: center;
+    padding: 60px 20px;
+}
+
+.empty-state h3 {
+    font-size: 1.1rem;
+    margin-bottom: 8px;
+}
+
+.empty-state p {
+    color: var(--text-secondary);
+    margin-bottom: 20px;
+}
+
+.history-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.history-card {
+    background: var(--bg-white);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 18px 20px;
+    transition: box-shadow 0.2s;
+}
+
+.history-card:hover {
+    box-shadow: var(--shadow);
+}
+
+.history-card-main {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 12px;
+}
+
+.history-info h4 {
+    font-size: 0.92rem;
+    font-weight: 600;
+    margin-bottom: 2px;
+}
+
+.history-date {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+}
+
+.history-id {
+    font-size: 0.72rem;
+    color: var(--text-muted);
+    font-family: monospace;
+}
+
+.history-preds {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
+.history-pred {
+    display: grid;
+    grid-template-columns: 130px 1fr 50px;
+    gap: 8px;
+    align-items: center;
+    font-size: 0.82rem;
+}
+
+.history-bar-bg {
+    height: 4px;
+    border-radius: 2px;
+    background: var(--bg-subtle);
+    overflow: hidden;
+}
+
+.history-bar {
+    height: 100%;
+    border-radius: 2px;
+}
+
+.history-bar.low {
+    background: var(--green);
+}
+
+.history-bar.medium {
+    background: var(--yellow);
+}
+
+.history-bar.high {
+    background: var(--red);
+}
+
+.history-pct {
+    text-align: right;
+    font-weight: 600;
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+}
+
+.history-actions {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid var(--border);
+}
+
+/* ── Compare Page ───────────────────────────────────────────────────── */
+.compare-uploads {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin-bottom: 20px;
+}
+
+.compare-upload-card {
+    position: relative;
+}
+
+.compare-label {
+    font-size: 0.82rem;
+    font-weight: 700;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-bottom: 8px;
+}
+
+.upload-card.compact {
+    padding: 30px 20px;
+}
+
+.upload-card.compact p {
+    font-size: 0.85rem;
+    margin-bottom: 0;
+}
+
+.compare-preview {
+    background: var(--bg-white);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    text-align: center;
+}
+
+.compare-preview img {
+    width: 100%;
+    max-height: 250px;
+    object-fit: contain;
+    background: #f9fafb;
+}
+
+.compare-preview .btn {
+    margin: 8px;
+}
+
+.compare-actions {
+    text-align: center;
+    margin-bottom: 24px;
+}
+
+.compare-results-grid {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 16px;
+    align-items: start;
+}
+
+.compare-col-title {
+    font-size: 0.88rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--text-secondary);
+    margin-bottom: 10px;
+}
+
+.card-image-wrap.compact {
+    min-height: 180px;
+}
+
+.compare-pred-row {
+    display: grid;
+    grid-template-columns: 110px 1fr 50px;
+    gap: 8px;
+    align-items: center;
+    padding: 6px 0;
+    font-size: 0.82rem;
+}
+
+.compare-pred-label {
+    font-weight: 500;
+}
+
+.compare-diff-col {
+    min-width: 160px;
+}
+
+.diff-row {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    border-bottom: 1px solid var(--border);
+    font-size: 0.84rem;
+}
+
+.diff-row:last-child {
+    border-bottom: none;
+}
+
+.diff-label {
+    font-weight: 500;
+}
+
+.diff-value {
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+}
+
+.diff-up {
+    color: var(--red);
+}
+
+.diff-down {
+    color: var(--green);
+}
+
+.diff-neutral {
+    color: var(--text-muted);
+}
+
+/* ── Report Page ────────────────────────────────────────────────────── */
+.report-container {
+    max-width: 900px;
+}
+
+.report-header {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+    margin-bottom: 20px;
+}
+
+.report-page {
+    background: var(--bg-white);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+}
+
+.report-title-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 28px 32px;
+    border-bottom: 2px solid var(--primary);
+}
+
+.report-title-bar h1 {
+    font-size: 1.3rem;
+    font-weight: 700;
+}
+
+.report-subtitle {
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+}
+
+.report-meta {
+    text-align: right;
+    font-size: 0.78rem;
+    color: var(--text-secondary);
+}
+
+.report-meta p {
+    margin-bottom: 2px;
+}
+
+.report-body {
+    padding: 28px 32px;
+}
+
+.report-body h3 {
+    font-size: 1rem;
+    font-weight: 700;
+    margin: 20px 0 12px;
+}
+
+.report-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+.report-image-box {
+    background: #f9fafb;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+}
+
+.report-image-box img {
+    width: 100%;
+    max-height: 300px;
+    object-fit: contain;
+}
+
+.report-heatmap-label {
+    font-size: 0.78rem;
+    color: var(--text-muted);
+    margin-top: 6px;
+}
+
+.report-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.88rem;
+    margin-bottom: 20px;
+}
+
+.report-table th {
+    text-align: left;
+    padding: 8px 12px;
+    border-bottom: 2px solid var(--border);
+    font-size: 0.78rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+}
+
+.report-table td {
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border);
+}
+
+.report-disclaimer {
+    margin-top: 24px;
+    padding: 16px;
+    background: var(--yellow-bg);
+    border: 1px solid rgba(202, 138, 4, 0.15);
+    border-radius: var(--radius-sm);
+    font-size: 0.82rem;
+    color: var(--text-secondary);
+}
+
+/* ── Responsive (Additional) ────────────────────────────────────────── */
+@media (max-width: 768px) {
+    .compare-uploads {
+        grid-template-columns: 1fr;
+    }
+
+    .compare-results-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .report-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .four-col {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .hero-actions {
+        flex-direction: column;
+    }
+
+    .results-actions {
+        flex-direction: column;
+    }
+
+    .history-pred {
+        grid-template-columns: 100px 1fr 40px;
+    }
+}
+
+.btn-sm {
+    font-size: 0.78rem;
+    padding: 4px 10px;
+}

templates/about.html

@@ -0,0 +1,299 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>System Specifications & Methodology | ChestXpert</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            letter-spacing: -0.015em;
+        }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-900 min-h-screen flex flex-col">
+    <nav class="bg-white border-b border-slate-200 h-14 flex items-center px-6 justify-between shrink-0">
+        <div class="flex items-center gap-2">
+            <svg class="text-blue-900 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+            </svg>
+            <span class="text-blue-900 font-bold tracking-tight text-lg">ChestXpert</span>
+        </div>
+        <div class="hidden md:flex items-center gap-6 text-sm text-slate-600 font-medium">
+            <a href="/" class="hover:text-slate-900 transition-colors">Home</a>
+            <a href="/analyze" class="hover:text-slate-900 transition-colors">Analyze</a>
+            <a href="/compare" class="hover:text-slate-900 transition-colors">Compare</a>
+            <a href="/history" class="hover:text-slate-900 transition-colors">History</a>
+            <a href="/about" class="text-slate-900 font-semibold transition-colors">About</a>
+        </div>
+        <div class="flex items-center gap-4 text-sm font-medium">
+            <div
+                class="flex items-center gap-2 px-2.5 py-1 rounded-sm bg-slate-50 border border-slate-200 text-slate-700 text-[10px] uppercase font-bold tracking-wider">
+                <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" id="status-dot"></span>
+                <span id="status-text">Models Ready</span>
+            </div>
+            <div id="nav-auth" class="flex items-center gap-2" style="display: none;">
+                <a href="/login" class="text-blue-900 hover:underline transition-colors px-2">Login</a>
+            </div>
+            <div id="nav-profile" class="flex items-center relative" style="display: none;">
+                <div id="profile-trigger"
+                    class="flex items-center gap-2 cursor-pointer border border-slate-200 px-2 py-0.5 rounded-sm bg-slate-50 hover:bg-slate-100">
+                    <img src="/static/default-avatar.svg" alt="Profile"
+                        class="w-5 h-5 rounded-full border border-slate-200 bg-white">
+                    <span id="nav-user-name" class="text-slate-700 text-xs font-bold">User</span>
+                </div>
+                <div id="profile-dropdown"
+                    class="absolute top-8 right-0 bg-white border border-slate-200 rounded-sm shadow-sm min-w-[200px] z-50 text-left flex flex-col"
+                    style="display:none;">
+                    <div class="p-3 border-b border-slate-200 bg-slate-50">
+                        <strong id="dropdown-name" class="block text-slate-800 text-sm">User</strong>
+                        <span id="dropdown-email"
+                            class="text-slate-500 text-[10px] uppercase tracking-wider block mt-0.5 truncate">user@example.com</span>
+                    </div>
+                    <div class="p-1">
+                        <a href="/history"
+                            class="block px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-sm">My
+                            Analyses</a>
+                        <a href="#"
+                            class="block px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-sm">Account
+                            Settings</a>
+                        <div class="h-px bg-slate-200 my-1"></div>
+                        <button id="logout-btn"
+                            class="w-full text-left px-3 py-2 text-xs font-bold text-red-600 hover:bg-red-50 rounded-sm">Sign
+                            Out</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <div class="bg-white border-b border-slate-200 py-4 px-6 shrink-0">
+        <h1 class="text-xl font-bold text-slate-800 tracking-tight">System Specifications & Methodology</h1>
+        <p class="text-sm text-slate-600 mt-1">Technical documentation for the ChestXpert diagnostic ensemble.</p>
+    </div>
+
+    <main class="w-full flex-1 p-6 max-w-7xl mx-auto flex flex-col gap-6">
+
+        <div class="bg-white border border-slate-300 rounded-sm">
+            <div class="px-6 py-3 border-b border-slate-300">
+                <h2 class="text-sm font-bold text-slate-800 uppercase tracking-widest">Ensemble Architecture</h2>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-slate-200">
+                <div class="p-6 flex flex-col h-full">
+                    <div class="mb-4">
+                        <h3 class="font-bold text-slate-900 text-base">RAD-DINO</h3>
+                        <span class="text-xs font-medium text-slate-500 uppercase tracking-wide">Vision Transformer
+                            (ViT-B/14)</span>
+                    </div>
+                    <ul class="list-disc pl-4 text-sm text-slate-600 space-y-1.5 flex-1 mb-6">
+                        <li>Pre-trained by Microsoft on radiology images</li>
+                        <li>Fine-tuned on CheXpert</li>
+                        <li>Input resolution: 384x384</li>
+                        <li>~86M parameters</li>
+                    </ul>
+                    <div class="mt-auto">
+                        <span
+                            class="inline-block bg-slate-100 border border-slate-200 text-slate-700 px-2 py-1 text-xs font-mono font-bold rounded-sm tracking-wider">AUC:
+                            0.8380</span>
+                    </div>
+                </div>
+                <div class="p-6 flex flex-col h-full">
+                    <div class="mb-4">
+                        <h3 class="font-bold text-slate-900 text-base">DenseNet121</h3>
+                        <span class="text-xs font-medium text-slate-500 uppercase tracking-wide">Convolutional Neural
+                            Network</span>
+                    </div>
+                    <ul class="list-disc pl-4 text-sm text-slate-600 space-y-1.5 flex-1 mb-6">
+                        <li>Pre-trained on ImageNet</li>
+                        <li>Fine-tuned on CheXpert</li>
+                        <li>Input resolution: 320x320</li>
+                        <li>~7M parameters</li>
+                    </ul>
+                    <div class="mt-auto">
+                        <span
+                            class="inline-block bg-slate-100 border border-slate-200 text-slate-700 px-2 py-1 text-xs font-mono font-bold rounded-sm tracking-wider">AUC:
+                            0.8470</span>
+                    </div>
+                </div>
+                <div class="p-6 flex flex-col h-full bg-slate-50/50">
+                    <div class="mb-4">
+                        <h3 class="font-bold text-slate-900 text-base">Ensemble Integration</h3>
+                        <span class="text-xs font-medium text-slate-500 uppercase tracking-wide">Weighted Average
+                            Mechanism</span>
+                    </div>
+                    <ul class="list-disc pl-4 text-sm text-slate-600 space-y-1.5 flex-1 mb-6">
+                        <li>RAD-DINO weight constraint: 60%</li>
+                        <li>DenseNet121 weight constraint: 40%</li>
+                        <li>Optimized entirely on validation set distribution</li>
+                        <li>Leverages complementary inductive biases</li>
+                    </ul>
+                    <div class="mt-auto">
+                        <span
+                            class="inline-block bg-blue-50 border border-blue-200 text-blue-800 px-2 py-1 text-xs font-mono font-bold rounded-sm tracking-wider">AUC:
+                            0.8523</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-white border border-slate-300 rounded-sm">
+            <div class="px-6 py-3 border-b border-slate-300">
+                <h2 class="text-sm font-bold text-slate-800 uppercase tracking-widest">Validation Performance</h2>
+            </div>
+            <div class="overflow-x-auto">
+                <table class="w-full text-left text-sm whitespace-nowrap">
+                    <thead
+                        class="bg-slate-100 text-slate-700 font-bold uppercase text-xs tracking-widest border-b border-slate-300">
+                        <tr>
+                            <th scope="col" class="px-6 py-3">Condition</th>
+                            <th scope="col" class="px-6 py-3">RAD-DINO</th>
+                            <th scope="col" class="px-6 py-3">DenseNet121</th>
+                            <th scope="col" class="px-6 py-3 text-slate-900">Ensemble</th>
+                            <th scope="col" class="px-6 py-3">Rating</th>
+                        </tr>
+                    </thead>
+                    <tbody class="text-slate-700 font-medium">
+                        <tr class="bg-white border-b border-slate-100">
+                            <td class="px-6 py-3 font-bold text-slate-900">Pleural Effusion</td>
+                            <td class="px-6 py-3 font-mono">0.892</td>
+                            <td class="px-6 py-3 font-mono">0.901</td>
+                            <td class="px-6 py-3 font-mono font-bold text-slate-900">0.908</td>
+                            <td class="px-6 py-3"><span
+                                    class="inline-block bg-green-50 text-green-700 border border-green-200 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-sm">Excellent</span>
+                            </td>
+                        </tr>
+                        <tr class="bg-slate-50 border-b border-slate-100">
+                            <td class="px-6 py-3 font-bold text-slate-900">Cardiomegaly</td>
+                            <td class="px-6 py-3 font-mono">0.878</td>
+                            <td class="px-6 py-3 font-mono">0.885</td>
+                            <td class="px-6 py-3 font-mono font-bold text-slate-900">0.892</td>
+                            <td class="px-6 py-3"><span
+                                    class="inline-block bg-green-50 text-green-700 border border-green-200 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-sm">Excellent</span>
+                            </td>
+                        </tr>
+                        <tr class="bg-white border-b border-slate-100">
+                            <td class="px-6 py-3 font-bold text-slate-900">Edema</td>
+                            <td class="px-6 py-3 font-mono">0.810</td>
+                            <td class="px-6 py-3 font-mono">0.840</td>
+                            <td class="px-6 py-3 font-mono font-bold text-slate-900">0.845</td>
+                            <td class="px-6 py-3"><span
+                                    class="inline-block bg-green-50 text-green-700 border border-green-200 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-sm">Excellent</span>
+                            </td>
+                        </tr>
+                        <tr class="bg-slate-50 border-b border-slate-100">
+                            <td class="px-6 py-3 font-bold text-slate-900">Atelectasis</td>
+                            <td class="px-6 py-3 font-mono">0.805</td>
+                            <td class="px-6 py-3 font-mono">0.810</td>
+                            <td class="px-6 py-3 font-mono font-bold text-slate-900">0.815</td>
+                            <td class="px-6 py-3"><span
+                                    class="inline-block bg-green-50 text-green-700 border border-green-200 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-sm">Excellent</span>
+                            </td>
+                        </tr>
+                        <tr class="bg-white border-b border-slate-200">
+                            <td class="px-6 py-3 font-bold text-slate-900">Consolidation</td>
+                            <td class="px-6 py-3 font-mono">0.805</td>
+                            <td class="px-6 py-3 font-mono">0.799</td>
+                            <td class="px-6 py-3 font-mono font-bold text-slate-900">0.801</td>
+                            <td class="px-6 py-3"><span
+                                    class="inline-block bg-green-50 text-green-700 border border-green-200 text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-sm">Excellent</span>
+                            </td>
+                        </tr>
+                        <tr class="bg-slate-100/80">
+                            <td class="px-6 py-3 font-bold text-slate-900">Mean AUC</td>
+                            <td class="px-6 py-3 font-mono font-bold">0.838</td>
+                            <td class="px-6 py-3 font-mono font-bold">0.847</td>
+                            <td class="px-6 py-3 font-mono font-bold text-slate-900 text-base">0.8523</td>
+                            <td class="px-6 py-3"></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+
+            <div class="bg-white border border-slate-300 rounded-sm">
+                <div class="px-6 py-3 border-b border-slate-300">
+                    <h2 class="text-sm font-bold text-slate-800 uppercase tracking-widest">Training & Interpretability
+                    </h2>
+                </div>
+                <div class="p-6 flex flex-col gap-3">
+                    <div class="flex items-center gap-4 py-1 border-b border-slate-100">
+                        <span
+                            class="w-24 shrink-0 text-xs font-bold text-slate-500 uppercase tracking-widest">Approach</span>
+                        <span class="text-sm text-slate-800 font-medium">Progressive unfreezing</span>
+                    </div>
+                    <div class="flex items-center gap-4 py-1 border-b border-slate-100">
+                        <span
+                            class="w-24 shrink-0 text-xs font-bold text-slate-500 uppercase tracking-widest">Optimizer</span>
+                        <span class="text-sm text-slate-800 font-medium">AdamW</span>
+                    </div>
+                    <div class="flex items-center gap-4 py-1 border-b border-slate-100">
+                        <span
+                            class="w-24 shrink-0 text-xs font-bold text-slate-500 uppercase tracking-widest">Loss</span>
+                        <span class="text-sm text-slate-800 font-medium">BCE with class weights</span>
+                    </div>
+                    <div class="flex items-center gap-4 py-1 border-b border-slate-100">
+                        <span
+                            class="w-24 shrink-0 text-xs font-bold text-slate-500 uppercase tracking-widest">Method</span>
+                        <span class="text-sm text-slate-800 font-medium">Grad-CAM (Gradient-weighted Class Activation
+                            Mapping)</span>
+                    </div>
+                    <div class="flex items-center gap-4 py-1">
+                        <span class="w-24 shrink-0 text-xs font-bold text-slate-500 uppercase tracking-widest">Target
+                            Layer</span>
+                        <span class="text-sm text-slate-800 font-medium">DenseNet DenseBlock4 spatial
+                            convolutions</span>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bg-white border border-slate-300 rounded-sm">
+                <div class="px-6 py-3 border-b border-slate-300">
+                    <h2 class="text-sm font-bold text-slate-800 uppercase tracking-widest">Dataset Specifications</h2>
+                </div>
+                <div class="p-6">
+                    <h3 class="font-bold text-slate-900 mb-4 whitespace-nowrap overflow-hidden text-ellipsis">CheXpert
+                        v1.0 Small <span class="text-slate-500 font-normal ml-2">Stanford ML Group</span></h3>
+                    <div
+                        class="bg-slate-50 border border-slate-200 rounded-sm p-4 text-sm font-mono text-slate-700 leading-relaxed shadow-inner">
+                        Total Radiographs: 224,316<br>
+                        Unique Patients: 65,240<br>
+                        <div class="h-px bg-slate-200 my-2"></div>
+                        Training Split: 153,000<br>
+                        Validation Set: 18,900<br>
+                        Target Labels: 5 (Diagnostic)
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-amber-50 border border-amber-200 rounded-sm p-4 flex items-start gap-3 mt-4">
+            <svg class="w-5 h-5 text-amber-600 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z">
+                </path>
+            </svg>
+            <div>
+                <span class="font-bold text-amber-800 text-sm tracking-wide">REGULATORY NOTICE:</span>
+                <span class="text-sm text-amber-800 ml-1">ChestXpert is for educational and research use only. Not
+                    intended or cleared for clinical diagnostics. Consult a qualified radiologist or physician for
+                    medical decisions.</span>
+            </div>
+        </div>
+
+    </main>
+
+    <footer class="w-full bg-slate-50 py-6 px-4 shrink-0 text-center border-t border-slate-200">
+        <p class="text-[10px] uppercase tracking-widest text-slate-400 font-bold">&copy; 2026 ChestXpert &mdash; For
+            Research & Educational Use Only.</p>
+    </footer>
+
+    <script src="/static/app.js"></script>
+</body>
+
+</html>

templates/analyze.html

@@ -0,0 +1,513 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Analyze | ChestXpert</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            letter-spacing: -0.015em;
+        }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-900 min-h-screen flex flex-col">
+    <nav class="bg-white border-b border-slate-200 h-14 flex items-center px-6 justify-between shrink-0">
+        <div class="flex items-center gap-2">
+            <svg class="text-blue-900 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+            </svg>
+            <span class="text-blue-900 font-bold tracking-tight text-lg">ChestXpert</span>
+        </div>
+        <div class="hidden md:flex items-center gap-6 text-sm text-slate-600 font-medium">
+            <a href="/" class="hover:text-slate-900 transition-colors">Home</a>
+            <a href="/analyze" class="text-slate-900 font-semibold transition-colors">Analyze</a>
+            <a href="/compare" class="hover:text-slate-900 transition-colors">Compare</a>
+            <a href="/history" class="hover:text-slate-900 transition-colors">History</a>
+            <a href="/about" class="hover:text-slate-900 transition-colors">About</a>
+        </div>
+        <div class="flex items-center gap-4 text-sm font-medium">
+            <div
+                class="flex items-center gap-2 px-2.5 py-1 rounded-sm bg-slate-50 border border-slate-200 text-slate-700 text-[10px] uppercase font-bold tracking-wider">
+                <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" id="status-dot"></span>
+                <span id="status-text">Models Ready</span>
+            </div>
+            <div id="nav-auth" class="flex items-center gap-2" style="display: none;">
+                <a href="/login" class="text-blue-900 hover:underline transition-colors px-2">Login</a>
+            </div>
+            <div id="nav-profile" class="flex items-center relative" style="display: none;">
+                <div id="profile-trigger"
+                    class="flex items-center gap-2 cursor-pointer border border-slate-200 px-2 py-0.5 rounded-sm bg-slate-50 hover:bg-slate-100">
+                    <img src="/static/default-avatar.svg" alt="Profile"
+                        class="w-5 h-5 rounded-full border border-slate-200 bg-white">
+                    <span id="nav-user-name" class="text-slate-700 text-xs font-bold">User</span>
+                </div>
+                <div id="profile-dropdown"
+                    class="absolute top-8 right-0 bg-white border border-slate-200 rounded-sm shadow-sm min-w-[200px] z-50 text-left flex flex-col"
+                    style="display:none;">
+                    <div class="p-3 border-b border-slate-200 bg-slate-50">
+                        <strong id="dropdown-name" class="block text-slate-800 text-sm">User</strong>
+                        <span id="dropdown-email"
+                            class="text-slate-500 text-[10px] uppercase tracking-wider block mt-0.5 truncate">user@example.com</span>
+                    </div>
+                    <div class="p-1">
+                        <a href="/history"
+                            class="block px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-sm">My
+                            Analyses</a>
+                        <a href="#"
+                            class="block px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-sm">Account
+                            Settings</a>
+                        <div class="h-px bg-slate-200 my-1"></div>
+                        <button id="logout-btn"
+                            class="w-full text-left px-3 py-2 text-xs font-bold text-red-600 hover:bg-red-50 rounded-sm">Sign
+                            Out</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="max-w-7xl mx-auto w-full px-4 py-6 flex-1 flex flex-col gap-6" id="upload-section">
+        <div class="flex flex-col md:flex-row gap-6 lg:h-[600px]">
+            <div class="w-full md:w-[30%] bg-white border border-slate-200 rounded-sm flex flex-col">
+                <div class="border-b border-slate-200 p-3 bg-slate-50/50">
+                    <h2 class="text-xs font-bold uppercase tracking-wider text-slate-500">Image Acquisition</h2>
+                </div>
+                <div class="p-4 flex-1 flex flex-col gap-4">
+                    <input type="file" id="file-input" class="hidden" accept=".png,.jpg,.jpeg,.bmp,.dcm,.dicom">
+                    <div id="upload-zone"
+                        class="border-2 border-dashed border-slate-300 bg-slate-50 rounded-sm p-6 flex flex-col items-center justify-center text-center cursor-pointer hover:bg-slate-100 transition-colors shrink-0 min-h-[160px]">
+                        <svg class="w-8 h-8 text-slate-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12">
+                            </path>
+                        </svg>
+                        <span class="text-xs font-semibold text-slate-500 leading-relaxed">Drag & Drop Chest
+                            X-Ray<br>Supports DICOM, PNG, JPG</span>
+                    </div>
+                    <div id="preview-card" style="display:none;"
+                        class="border border-slate-200 rounded-sm overflow-hidden h-40 flex flex-col relative bg-slate-900 shrink-0">
+                        <img id="preview-img" class="w-full h-full object-contain opacity-50" src="">
+                        <div class="absolute inset-0 flex flex-col items-center justify-center p-2 text-center">
+                            <span id="file-info"
+                                class="text-white text-[10px] font-mono tracking-wide bg-slate-900/80 px-2 py-1 rounded-sm truncate w-full mb-3 border border-slate-700"></span>
+                            <button id="btn-change"
+                                class="text-xs bg-white text-slate-900 px-3 py-1.5 rounded-sm font-bold shadow hover:bg-slate-200 uppercase tracking-widest">Change</button>
+                        </div>
+                    </div>
+                    <div class="flex-1 mt-4">
+                        <h3
+                            class="text-[10px] font-bold text-slate-400 mb-2 uppercase tracking-widest border-b border-slate-100 pb-2">
+                            Active Ensemble</h3>
+                        <div class="flex flex-col gap-2">
+                            <div
+                                class="flex items-center justify-between text-xs p-2.5 bg-slate-50 border border-slate-200 rounded-sm text-slate-700">
+                                <span class="font-bold text-slate-600 tracking-wide font-mono">RAD-DINO</span>
+                                <span class="w-1.5 h-1.5 rounded-full bg-blue-600"></span>
+                            </div>
+                            <div
+                                class="flex items-center justify-between text-xs p-2.5 bg-slate-50 border border-slate-200 rounded-sm text-slate-700">
+                                <span class="font-bold text-slate-600 tracking-wide font-mono">DenseNet121</span>
+                                <span class="w-1.5 h-1.5 rounded-full bg-blue-600"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <button id="btn-analyze"
+                        class="w-full bg-blue-900 hover:bg-blue-800 text-white text-sm font-bold py-3.5 rounded-sm transition-colors mt-auto flex justify-center items-center gap-2 uppercase tracking-widest shadow-sm">
+                        Run Analysis
+                    </button>
+                </div>
+            </div>
+            <div
+                class="w-full md:w-[70%] bg-slate-900 flex flex-col relative overflow-hidden ring-1 ring-slate-300 rounded-sm">
+                <div class="h-10 border-b border-slate-700 flex items-center px-4 gap-4 bg-[#0a0f1c] shrink-0">
+                    <svg class="w-4 h-4 text-slate-500 hover:text-white cursor-pointer" fill="none"
+                        stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
+                    </svg>
+                    <svg class="w-4 h-4 text-slate-500 hover:text-white cursor-pointer" fill="none"
+                        stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"></path>
+                    </svg>
+                    <div class="w-px h-4 bg-slate-700 mx-1"></div>
+                    <svg class="w-4 h-4 text-slate-500 hover:text-white cursor-pointer" fill="none"
+                        stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5">
+                        </path>
+                    </svg>
+                    <div class="w-px h-4 bg-slate-700 mx-1"></div>
+                    <span
+                        class="text-slate-400 text-[9px] font-bold tracking-widest px-2 py-0.5 border border-slate-600 rounded-sm cursor-pointer hover:text-white hover:border-slate-400">INVERT</span>
+                    <span
+                        class="text-slate-400 text-[9px] font-bold tracking-widest px-2 py-0.5 border border-slate-600 rounded-sm cursor-pointer hover:text-white hover:border-slate-400">RESET</span>
+                </div>
+                <div class="flex-1 flex items-center justify-center p-4 relative" id="viewer-container">
+                    <p id="viewer-placeholder"
+                        class="text-slate-500 text-xs tracking-widest font-mono uppercase text-center opacity-50">
+                        Awaiting image input.<br>Grad-CAM visualization will render here.</p>
+                </div>
+            </div>
+        </div>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="bg-white border border-slate-200 rounded-sm p-5 shadow-sm">
+                <h3
+                    class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-3 border-b border-slate-100 pb-2">
+                    Model Performance</h3>
+                <div class="flex items-center gap-4 mt-4">
+                    <div class="text-slate-900 font-bold text-2xl tracking-tight">85%</div>
+                    <div class="flex flex-col">
+                        <span class="text-xs font-bold text-slate-700">Val AUC</span>
+                        <span class="text-[10px] text-slate-500 uppercase tracking-wider">Verified Ensemble</span>
+                    </div>
+                </div>
+            </div>
+            <div class="bg-white border border-slate-200 rounded-sm p-5 shadow-sm">
+                <h3
+                    class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-3 border-b border-slate-100 pb-2">
+                    Diagnostic Labels</h3>
+                <div class="flex flex-wrap gap-2 mt-3">
+                    <span
+                        class="px-2 py-1 bg-slate-50 border border-slate-200 rounded-sm text-[10px] uppercase font-bold text-slate-600 tracking-wider">Atelectasis</span>
+                    <span
+                        class="px-2 py-1 bg-slate-50 border border-slate-200 rounded-sm text-[10px] uppercase font-bold text-slate-600 tracking-wider">Cardiomegaly</span>
+                    <span
+                        class="px-2 py-1 bg-slate-50 border border-slate-200 rounded-sm text-[10px] uppercase font-bold text-slate-600 tracking-wider">Consolidation</span>
+                    <span
+                        class="px-2 py-1 bg-slate-50 border border-slate-200 rounded-sm text-[10px] uppercase font-bold text-slate-600 tracking-wider">Edema</span>
+                    <span
+                        class="px-2 py-1 bg-slate-50 border border-slate-200 rounded-sm text-[10px] uppercase font-bold text-slate-600 tracking-wider">Pleural
+                        Effusion</span>
+                </div>
+            </div>
+            <div class="bg-white border border-slate-200 rounded-sm p-5 shadow-sm">
+                <h3
+                    class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-2 border-b border-slate-100 pb-2">
+                    System Notice</h3>
+                <p class="text-[11px] text-slate-600 leading-relaxed font-medium mt-3 uppercase tracking-wide">For
+                    Research & Educational Use Only. All image processing is executed locally to ensure complete data
+                    privacy.</p>
+            </div>
+        </div>
+    </main>
+    <section class="samples-section max-w-7xl mx-auto w-full px-4 mb-6" id="samples-section">
+        <div class="bg-white border border-slate-200 rounded-sm p-4 shadow-sm">
+            <h3
+                class="text-[10px] font-bold uppercase tracking-widest text-slate-400 border-b border-slate-100 pb-2 mb-3">
+                Sample Library</h3>
+            <div id="samples-grid" class="flex gap-4 overflow-x-auto pb-2"></div>
+        </div>
+        <style>
+            .sample-card {
+                border: 1px solid #e2e8f0;
+                border-radius: 2px;
+                cursor: pointer;
+                padding: 0.2rem;
+                min-width: 100px;
+                background: #f8fafc;
+                transition: border-color 0.2s;
+            }
+
+            .sample-card img {
+                width: 100px;
+                height: 100px;
+                object-fit: cover;
+            }
+
+            .sample-card p {
+                font-size: 0.6rem;
+                text-align: center;
+                margin-top: 0.3rem;
+                color: #475569;
+                font-weight: 600;
+                text-transform: uppercase;
+                letter-spacing: 0.05em;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+
+            .sample-card:hover {
+                border-color: #64748b;
+            }
+        </style>
+    </section>
+
+    <main class="max-w-7xl mx-auto w-full px-4 py-12 flex-1 flex-col justify-center items-center" id="loading-section"
+        style="display:none;">
+        <div class="w-full max-w-md bg-white border border-slate-200 p-8 rounded-sm text-center shadow-sm mx-auto">
+            <h2 class="text-sm font-bold text-slate-800 mb-1 tracking-widest uppercase">Processing Image</h2>
+            <p class="text-xs text-slate-500 mb-6 font-medium">Running ensemble inference...</p>
+            <div class="w-full bg-slate-100 h-1.5 rounded-sm overflow-hidden mb-6 border border-slate-200">
+                <div class="bg-blue-900 h-full w-0 transition-all duration-300" id="loading-bar-fill"></div>
+            </div>
+            <div class="flex flex-col gap-3 text-left text-[10px] font-bold uppercase tracking-wider text-slate-400">
+                <div id="step-1" class="flex gap-3 items-center"><span
+                        class="w-2.5 h-2.5 rounded-full border border-slate-300"></span> Preprocessing</div>
+                <div id="step-2" class="flex gap-3 items-center"><span
+                        class="w-2.5 h-2.5 rounded-full border border-slate-300"></span> RAD-DINO Analysis</div>
+                <div id="step-3" class="flex gap-3 items-center"><span
+                        class="w-2.5 h-2.5 rounded-full border border-slate-300"></span> DenseNet Feature Extraction
+                </div>
+                <div id="step-4" class="flex gap-3 items-center"><span
+                        class="w-2.5 h-2.5 rounded-full border border-slate-300"></span> Grad-CAM Generation</div>
+                <div id="step-5" class="flex gap-3 items-center"><span
+                        class="w-2.5 h-2.5 rounded-full border border-slate-300"></span> Finalizing Report</div>
+            </div>
+            <style>
+                .active {
+                    color: #1e293b;
+                }
+
+                .active span {
+                    border-color: #1e3a8a;
+                    border-left-color: transparent;
+                    border-bottom-color: transparent;
+                    animation: spin 1s linear infinite;
+                }
+
+                .done {
+                    color: #10b981;
+                }
+
+                .done span {
+                    background: #10b981;
+                    border-color: #10b981;
+                }
+
+                @keyframes spin {
+                    100% {
+                        transform: rotate(360deg);
+                    }
+                }
+            </style>
+        </div>
+    </main>
+
+    <main class="max-w-7xl mx-auto w-full px-4 py-6 flex-1 flex flex-col gap-6" id="results-section"
+        style="display:none;">
+        <div class="flex justify-between items-center bg-white border border-slate-200 p-3 rounded-sm shadow-sm">
+            <div>
+                <h2 class="text-sm font-bold text-slate-800 tracking-widest uppercase" id="summary-title">Analysis
+                    Complete</h2>
+                <p class="text-xs text-slate-500 font-medium tracking-wide mt-1" id="summary-text">Review the findings
+                    below.</p>
+            </div>
+            <div class="flex gap-2">
+                <button id="btn-pdf"
+                    class="px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest bg-white border border-slate-300 text-slate-700 hover:bg-slate-50 rounded-sm">PDF
+                    Report</button>
+                <button id="btn-export-json"
+                    class="px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest bg-white border border-slate-300 text-slate-700 hover:bg-slate-50 rounded-sm">JSON</button>
+                <a id="btn-report-link" href="#" target="_blank"
+                    class="px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest bg-white border border-slate-300 text-slate-700 hover:bg-slate-50 rounded-sm flex items-center justify-center">Printable
+                    Report</a>
+                <button id="btn-new"
+                    class="px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest bg-slate-800 border border-slate-800 text-white hover:bg-slate-700 rounded-sm ml-2">New
+                    Analysis</button>
+            </div>
+        </div>
+        <div class="flex flex-col md:flex-row gap-6">
+            <div class="w-full md:w-[30%] bg-white border border-slate-200 rounded-sm flex flex-col lg:max-h-[600px]">
+                <div class="border-b border-slate-200 p-3 bg-slate-50/50">
+                    <h2 class="text-[10px] font-bold uppercase tracking-widest text-slate-500">Predicted Findings</h2>
+                </div>
+                <div class="p-4 flex flex-col gap-5 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-300"
+                    id="predictions-list">
+                </div>
+                <div class="border-t border-slate-200 p-3 mt-auto flex flex-col gap-2 shrink-0 bg-slate-50">
+                    <h3 class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mb-1">Models Extracted
+                    </h3>
+                    <div id="model-tags" class="flex gap-1.5 flex-wrap"></div>
+                </div>
+                <style>
+                    .risk-tag {
+                        font-size: 0.55rem;
+                        padding: 0.15rem 0.3rem;
+                        border-radius: 2px;
+                        font-weight: 800;
+                        letter-spacing: 0.05em;
+                        text-transform: uppercase;
+                        border: 1px solid currentColor;
+                    }
+
+                    .risk-tag.high {
+                        color: #dc2626;
+                        background: #fef2f2;
+                    }
+
+                    .risk-tag.medium {
+                        color: #d97706;
+                        background: #fffbeb;
+                    }
+
+                    .risk-tag.low {
+                        color: #059669;
+                        background: #ecfdf5;
+                    }
+
+                    .pred-pct {
+                        font-size: 0.8rem;
+                        font-weight: 800;
+                    }
+
+                    .pred-pct.high {
+                        color: #dc2626;
+                    }
+
+                    .pred-pct.medium {
+                        color: #d97706;
+                    }
+
+                    .pred-pct.low {
+                        color: #059669;
+                    }
+
+                    .pred-bar-bg {
+                        width: 100%;
+                        height: 4px;
+                        background: #f1f5f9;
+                        border-radius: 0px;
+                        overflow: hidden;
+                        margin: 0.4rem 0;
+                        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+                    }
+
+                    .pred-bar {
+                        height: 100%;
+                        transition: width 0.8s ease-out;
+                    }
+
+                    .pred-bar.high {
+                        background: #dc2626;
+                    }
+
+                    .pred-bar.medium {
+                        background: #f59e0b;
+                    }
+
+                    .pred-bar.low {
+                        background: #10b981;
+                    }
+
+                    .pred-name {
+                        font-size: 0.75rem;
+                        font-weight: 700;
+                        color: #1e293b;
+                        text-transform: uppercase;
+                        letter-spacing: 0.05em;
+                    }
+
+                    .pred-desc {
+                        font-size: 0.65rem;
+                        color: #64748b;
+                        margin-top: 0.2rem;
+                        font-weight: 500;
+                    }
+
+                    .pred-models {
+                        font-size: 0.6rem;
+                        color: #94a3b8;
+                        display: flex;
+                        justify-content: space-between;
+                        margin-top: 0.4rem;
+                        font-family: monospace;
+                        font-weight: 600;
+                    }
+
+                    .model-tag.on {
+                        background: #fff;
+                        border: 1px solid #cbd5e1;
+                        font-size: 0.6rem;
+                        padding: 0.1rem 0.3rem;
+                        font-weight: 700;
+                        border-radius: 2px;
+                        color: #334155;
+                        text-transform: uppercase;
+                        letter-spacing: 0.05em;
+                    }
+
+                    .scrollbar-thin::-webkit-scrollbar {
+                        width: 4px;
+                    }
+
+                    .scrollbar-thin::-webkit-scrollbar-track {
+                        background: transparent;
+                    }
+
+                    .scrollbar-thin::-webkit-scrollbar-thumb {
+                        background-color: #cbd5e1;
+                        border-radius: 20px;
+                    }
+                </style>
+            </div>
+            <div
+                class="w-full md:w-[70%] bg-slate-900 flex flex-col relative h-[600px] overflow-hidden rounded-sm ring-1 ring-slate-300">
+                <div
+                    class="h-10 border-b border-slate-700 flex justify-between items-center px-4 bg-[#0a0f1c] shrink-0">
+                    <div class="flex items-center gap-1">
+                        <button
+                            class="card-tab active px-3 py-1 text-[9px] font-bold tracking-widest border border-slate-600 text-white bg-slate-700 rounded-sm uppercase"
+                            data-tab="heatmap">Heatmap</button>
+                        <button
+                            class="card-tab px-3 py-1 text-[9px] font-bold tracking-widest border border-slate-600 text-slate-400 hover:text-white rounded-sm uppercase"
+                            data-tab="original">Original</button>
+                    </div>
+                    <div class="flex items-center gap-2" id="heatmap-selector">
+                        <span class="text-[9px] uppercase font-bold text-slate-500 tracking-widest">Target:</span>
+                        <div id="heatmap-pills" class="flex gap-1.5"></div>
+                        <style>
+                            .pill {
+                                background: #1e293b;
+                                border: 1px solid #334155;
+                                color: #94a3b8;
+                                font-size: 0.6rem;
+                                padding: 0.15rem 0.4rem;
+                                font-weight: 700;
+                                cursor: pointer;
+                                border-radius: 2px;
+                                text-transform: uppercase;
+                                letter-spacing: 0.1em;
+                            }
+
+                            .pill:hover {
+                                background: #334155;
+                                color: white;
+                            }
+
+                            .pill.active {
+                                background: #1e3a8a;
+                                border-color: #3b82f6;
+                                color: white;
+                            }
+
+                            .card-tab.active {
+                                background: #1e293b;
+                                color: white;
+                                border-color: #475569;
+                            }
+                        </style>
+                    </div>
+                </div>
+                <div class="flex-1 flex items-center justify-center p-4 relative h-full" id="viewer-container">
+                    <div class="absolute top-3 left-4 text-[10px] text-white/70 font-mono z-10 opacity-70">ID: CX-99281
+                        | Sex: M | Age: 45</div>
+                    <div class="absolute top-3 right-4 text-[10px] text-white/70 font-mono z-10 text-right opacity-70">
+                        View: AP | Study: Thorax</div>
+                    <img id="result-heatmap" src="" class="max-w-full max-h-full object-contain">
+                    <img id="result-original" src="" class="max-w-full max-h-full object-contain" style="display:none;">
+                </div>
+            </div>
+        </div>
+    </main>
+    <script src="/static/app.js"></script>
+</body>
+
+</html>

templates/compare.html

@@ -0,0 +1,367 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Compare | ChestXpert</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            letter-spacing: -0.015em;
+        }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-900 min-h-screen flex flex-col">
+    <nav class="bg-white border-b border-slate-200 h-14 flex items-center px-6 justify-between shrink-0">
+        <div class="flex items-center gap-2">
+            <svg class="text-blue-900 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+            </svg>
+            <span class="text-blue-900 font-bold tracking-tight text-lg">ChestXpert</span>
+        </div>
+        <div class="hidden md:flex items-center gap-6 text-sm text-slate-600 font-medium">
+            <a href="/" class="hover:text-slate-900 transition-colors">Home</a>
+            <a href="/analyze" class="hover:text-slate-900 transition-colors">Analyze</a>
+            <a href="/compare" class="text-slate-900 font-semibold transition-colors">Compare</a>
+            <a href="/history" class="hover:text-slate-900 transition-colors">History</a>
+            <a href="/about" class="hover:text-slate-900 transition-colors">About</a>
+        </div>
+        <div class="flex items-center gap-4 text-sm font-medium">
+            <div
+                class="flex items-center gap-2 px-2.5 py-1 rounded-sm bg-slate-50 border border-slate-200 text-slate-700 text-[10px] uppercase font-bold tracking-wider">
+                <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" id="status-dot"></span>
+                <span id="status-text">Models Ready</span>
+            </div>
+            <div id="nav-auth" class="flex items-center gap-2" style="display: none;">
+                <a href="/login" class="text-blue-900 hover:underline transition-colors px-2">Login</a>
+            </div>
+            <div id="nav-profile" class="flex items-center relative" style="display: none;">
+                <div id="profile-trigger"
+                    class="flex items-center gap-2 cursor-pointer border border-slate-200 px-2 py-0.5 rounded-sm bg-slate-50 hover:bg-slate-100">
+                    <img src="/static/default-avatar.svg" alt="Profile"
+                        class="w-5 h-5 rounded-full border border-slate-200 bg-white">
+                    <span id="nav-user-name" class="text-slate-700 text-xs font-bold">User</span>
+                </div>
+                <div id="profile-dropdown"
+                    class="absolute top-8 right-0 bg-white border border-slate-200 rounded-sm shadow-sm min-w-[200px] z-50 text-left flex flex-col"
+                    style="display:none;">
+                    <div class="p-3 border-b border-slate-200 bg-slate-50">
+                        <strong id="dropdown-name" class="block text-slate-800 text-sm">User</strong>
+                        <span id="dropdown-email"
+                            class="text-slate-500 text-[10px] uppercase tracking-wider block mt-0.5 truncate">user@example.com</span>
+                    </div>
+                    <div class="p-1">
+                        <a href="/history"
+                            class="block px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-sm">My
+                            Analyses</a>
+                        <a href="#"
+                            class="block px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-sm">Account
+                            Settings</a>
+                        <div class="h-px bg-slate-200 my-1"></div>
+                        <button id="logout-btn"
+                            class="w-full text-left px-3 py-2 text-xs font-bold text-red-600 hover:bg-red-50 rounded-sm">Sign
+                            Out</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <div class="bg-white border-b border-slate-200 py-3 px-6 flex justify-between items-center w-full shrink-0">
+        <h1 class="text-lg font-bold text-slate-800 tracking-tight">Comparative Analysis: Baseline vs Follow-up</h1>
+        <div class="flex items-center gap-4">
+            <div class="flex items-center gap-2">
+                <span class="text-xs font-bold uppercase tracking-widest text-slate-500">Sync Views</span>
+                <button class="w-8 h-4 bg-slate-200 rounded-full relative cursor-pointer outline-none">
+                    <div class="w-3 h-3 bg-white rounded-full absolute left-0.5 top-0.5 shadow-sm transition-transform">
+                    </div>
+                </button>
+            </div>
+            <div class="h-4 w-px bg-slate-300"></div>
+            <button id="btn-compare-new"
+                class="text-[10px] uppercase tracking-widest font-bold text-slate-600 hover:text-slate-900 border border-slate-300 rounded-sm px-4 py-1.5 transition-colors">Clear
+                Studies</button>
+            <button id="btn-compare"
+                class="text-[10px] uppercase tracking-widest font-bold text-white bg-blue-900 hover:bg-blue-800 rounded-sm px-4 py-1.5 transition-colors shadow-sm ml-2">Compute
+                Differential</button>
+        </div>
+    </div>
+
+    <main class="w-full flex-1 p-6" id="compare-uploads">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 h-full max-w-[1600px] mx-auto">
+            <div class="bg-white border border-slate-300 rounded-sm flex flex-col h-full shadow-sm" id="compare-zone-1">
+                <div class="grid grid-cols-2 bg-slate-50 border-b border-slate-300 py-2 px-3 gap-y-1">
+                    <p class="text-[9px] uppercase tracking-widest text-slate-500 font-bold col-span-1">PATIENT ID:
+                        <span class="text-slate-800">CX-0091</span></p>
+                    <p class="text-[9px] uppercase tracking-widest text-slate-500 font-bold col-span-1 text-right">DATE:
+                        <span class="text-slate-800">2026-01-15</span></p>
+                    <p class="text-[9px] uppercase tracking-widest text-slate-500 font-bold col-span-1">MODALITY: <span
+                            class="text-slate-800">CR</span></p>
+                    <p class="text-[9px] uppercase tracking-widest text-slate-500 font-bold col-span-1 text-right">VIEW:
+                        <span class="text-slate-800">PA</span></p>
+                </div>
+                <div class="h-8 bg-slate-100 border-b border-slate-300 flex items-center px-2 gap-1 shrink-0">
+                    <button
+                        class="w-6 h-6 flex items-center justify-center hover:bg-slate-200 rounded-sm text-slate-500"><svg
+                            class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
+                        </svg></button>
+                    <button
+                        class="w-6 h-6 flex items-center justify-center hover:bg-slate-200 rounded-sm text-slate-500"><svg
+                            class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5">
+                            </path>
+                        </svg></button>
+                    <div class="w-px h-4 bg-slate-300 mx-1"></div>
+                    <button
+                        class="text-[9px] uppercase tracking-widest font-bold text-slate-500 hover:text-slate-800 px-1">INVERT</button>
+                    <button
+                        class="text-[9px] uppercase tracking-widest font-bold text-slate-500 hover:text-slate-800 px-1">RESET</button>
+                    <div class="w-px h-4 bg-slate-300 mx-1"></div>
+                    <button
+                        class="text-[9px] uppercase tracking-widest font-bold text-slate-500 hover:text-slate-800 px-1">GRAD-CAM</button>
+                </div>
+                <div class="bg-slate-900 aspect-[4/3] flex items-center justify-center relative p-4 group cursor-pointer"
+                    id="upload-zone-a" onclick="document.getElementById('file-input-a').click()">
+                    <div
+                        class="absolute inset-4 border-2 border-dashed border-slate-700 rounded-sm flex flex-col items-center justify-center transition-colors group-hover:border-slate-500 group-hover:bg-slate-800/50">
+                        <svg class="w-6 h-6 text-slate-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
+                        </svg>
+                        <span class="text-[10px] uppercase font-bold tracking-widest text-slate-500">Drop Study A X-Ray
+                            Here</span>
+                    </div>
+                    <input type="file" id="file-input-a" accept="image/*,.dcm,.dicom" class="hidden">
+                </div>
+                <div class="bg-slate-900 aspect-[4/3] relative flex items-center justify-center" id="preview-a"
+                    style="display:none">
+                    <img id="preview-img-a" src="" class="max-w-full max-h-full object-contain">
+                    <div
+                        class="absolute inset-0 bg-slate-900/50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+                        <button class="bg-white text-slate-900 text-xs font-bold py-1.5 px-4 rounded-sm shadow-sm"
+                            id="btn-change-a">Change Image</button>
+                    </div>
+                </div>
+                <div class="p-4 flex-1 flex flex-col border-t border-slate-300 min-h-0 bg-slate-50"
+                    id="compare-preds-a-empty">
+                    <div class="flex flex-col gap-3 opacity-40 grayscale pointer-events-none">
+                        <div class="flex items-center justify-between text-xs">
+                            <span class="font-bold text-slate-700 uppercase tracking-wide">Atelectasis</span>
+                            <div class="flex items-center gap-3 w-3/5">
+                                <div class="h-1.5 rounded-none bg-slate-200 w-full overflow-hidden"></div>
+                                <span class="text-[10px] font-bold text-slate-500 w-8 text-right">--%</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs">
+                            <span class="font-bold text-slate-700 uppercase tracking-wide">Cardiomegaly</span>
+                            <div class="flex items-center gap-3 w-3/5">
+                                <div class="h-1.5 rounded-none bg-slate-200 w-full overflow-hidden"></div>
+                                <span class="text-[10px] font-bold text-slate-500 w-8 text-right">--%</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs">
+                            <span class="font-bold text-slate-700 uppercase tracking-wide">Consolidation</span>
+                            <div class="flex items-center gap-3 w-3/5">
+                                <div class="h-1.5 rounded-none bg-slate-200 w-full overflow-hidden"></div>
+                                <span class="text-[10px] font-bold text-slate-500 w-8 text-right">--%</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs">
+                            <span class="font-bold text-slate-700 uppercase tracking-wide">Edema</span>
+                            <div class="flex items-center gap-3 w-3/5">
+                                <div class="h-1.5 rounded-none bg-slate-200 w-full overflow-hidden"></div>
+                                <span class="text-[10px] font-bold text-slate-500 w-8 text-right">--%</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs">
+                            <span class="font-bold text-slate-700 uppercase tracking-wide">Pleural Effusion</span>
+                            <div class="flex items-center gap-3 w-3/5">
+                                <div class="h-1.5 rounded-none bg-slate-200 w-full overflow-hidden"></div>
+                                <span class="text-[10px] font-bold text-slate-500 w-8 text-right">--%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-4 flex-1 flex flex-col border-t border-slate-300 min-h-0 bg-slate-50 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-300"
+                    id="compare-preds-a" style="display:none"></div>
+            </div>
+            <div class="bg-white border border-slate-300 rounded-sm flex flex-col h-full shadow-sm" id="compare-zone-2">
+                <div class="grid grid-cols-2 bg-slate-50 border-b border-slate-300 py-2 px-3 gap-y-1">
+                    <p class="text-[9px] uppercase tracking-widest text-slate-500 font-bold col-span-1">PATIENT ID:
+                        <span class="text-slate-800">CX-0091</span></p>
+                    <p class="text-[9px] uppercase tracking-widest text-slate-500 font-bold col-span-1 text-right">DATE:
+                        <span class="text-slate-800">2026-03-01</span></p>
+                    <p class="text-[9px] uppercase tracking-widest text-slate-500 font-bold col-span-1">MODALITY: <span
+                            class="text-slate-800">CR</span></p>
+                    <p class="text-[9px] uppercase tracking-widest text-slate-500 font-bold col-span-1 text-right">VIEW:
+                        <span class="text-slate-800">PA</span></p>
+                </div>
+                <div class="h-8 bg-slate-100 border-b border-slate-300 flex items-center px-2 gap-1 shrink-0">
+                    <button
+                        class="w-6 h-6 flex items-center justify-center hover:bg-slate-200 rounded-sm text-slate-500"><svg
+                            class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
+                        </svg></button>
+                    <button
+                        class="w-6 h-6 flex items-center justify-center hover:bg-slate-200 rounded-sm text-slate-500"><svg
+                            class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5">
+                            </path>
+                        </svg></button>
+                    <div class="w-px h-4 bg-slate-300 mx-1"></div>
+                    <button
+                        class="text-[9px] uppercase tracking-widest font-bold text-slate-500 hover:text-slate-800 px-1">INVERT</button>
+                    <button
+                        class="text-[9px] uppercase tracking-widest font-bold text-slate-500 hover:text-slate-800 px-1">RESET</button>
+                    <div class="w-px h-4 bg-slate-300 mx-1"></div>
+                    <button
+                        class="text-[9px] uppercase tracking-widest font-bold text-slate-500 hover:text-slate-800 px-1">GRAD-CAM</button>
+                </div>
+                <div class="bg-slate-900 aspect-[4/3] flex items-center justify-center relative p-4 group cursor-pointer"
+                    id="upload-zone-b" onclick="document.getElementById('file-input-b').click()">
+                    <div
+                        class="absolute inset-4 border-2 border-dashed border-slate-700 rounded-sm flex flex-col items-center justify-center transition-colors group-hover:border-slate-500 group-hover:bg-slate-800/50">
+                        <svg class="w-6 h-6 text-slate-600 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
+                        </svg>
+                        <span class="text-[10px] uppercase font-bold tracking-widest text-slate-500">Drop Study B X-Ray
+                            Here</span>
+                    </div>
+                    <input type="file" id="file-input-b" accept="image/*,.dcm,.dicom" class="hidden">
+                </div>
+                <div class="bg-slate-900 aspect-[4/3] relative flex items-center justify-center" id="preview-b"
+                    style="display:none">
+                    <img id="preview-img-b" src="" class="max-w-full max-h-full object-contain">
+                    <div
+                        class="absolute inset-0 bg-slate-900/50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+                        <button class="bg-white text-slate-900 text-xs font-bold py-1.5 px-4 rounded-sm shadow-sm"
+                            id="btn-change-b">Change Image</button>
+                    </div>
+                </div>
+                <div class="p-4 flex-1 flex flex-col border-t border-slate-300 min-h-0 bg-slate-50"
+                    id="compare-preds-b-empty">
+                    <div class="flex flex-col gap-3 opacity-40 grayscale pointer-events-none">
+                        <div class="flex items-center justify-between text-xs">
+                            <span class="font-bold text-slate-700 uppercase tracking-wide">Atelectasis</span>
+                            <div class="flex items-center gap-3 w-3/5">
+                                <div class="h-1.5 rounded-none bg-slate-200 w-full overflow-hidden"></div>
+                                <span class="text-[10px] font-bold text-slate-500 w-8 text-right">--%</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs">
+                            <span class="font-bold text-slate-700 uppercase tracking-wide">Cardiomegaly</span>
+                            <div class="flex items-center gap-3 w-3/5">
+                                <div class="h-1.5 rounded-none bg-slate-200 w-full overflow-hidden"></div>
+                                <span class="text-[10px] font-bold text-slate-500 w-8 text-right">--%</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs">
+                            <span class="font-bold text-slate-700 uppercase tracking-wide">Consolidation</span>
+                            <div class="flex items-center gap-3 w-3/5">
+                                <div class="h-1.5 rounded-none bg-slate-200 w-full overflow-hidden"></div>
+                                <span class="text-[10px] font-bold text-slate-500 w-8 text-right">--%</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs">
+                            <span class="font-bold text-slate-700 uppercase tracking-wide">Edema</span>
+                            <div class="flex items-center gap-3 w-3/5">
+                                <div class="h-1.5 rounded-none bg-slate-200 w-full overflow-hidden"></div>
+                                <span class="text-[10px] font-bold text-slate-500 w-8 text-right">--%</span>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-between text-xs">
+                            <span class="font-bold text-slate-700 uppercase tracking-wide">Pleural Effusion</span>
+                            <div class="flex items-center gap-3 w-3/5">
+                                <div class="h-1.5 rounded-none bg-slate-200 w-full overflow-hidden"></div>
+                                <span class="text-[10px] font-bold text-slate-500 w-8 text-right">--%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-4 flex-1 flex flex-col border-t border-slate-300 min-h-0 bg-slate-50 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-300"
+                    id="compare-preds-b" style="display:none"></div>
+            </div>
+        </div>
+    </main>
+
+    <section class="max-w-[1600px] mx-auto w-full px-6 pb-6">
+        <div class="bg-white border text-center border-slate-300 rounded-sm shadow-sm pt-4 pb-5 px-6"
+            id="compare-results">
+            <h2
+                class="text-sm font-bold uppercase tracking-wider text-slate-500 mb-6 text-left border-b border-slate-100 pb-2">
+                Automated Differential Insights</h2>
+            <div class="grid grid-cols-1 sm:grid-cols-5 gap-3" id="compare-diff">
+                <div
+                    class="bg-slate-100 border border-slate-200 rounded-sm p-3 flex flex-col items-center justify-center h-20">
+                    <span class="text-[9px] font-bold uppercase tracking-widest text-slate-500 mb-1">Atelectasis</span>
+                    <span class="text-lg font-bold text-slate-400">---</span>
+                </div>
+                <div
+                    class="bg-slate-100 border border-slate-200 rounded-sm p-3 flex flex-col items-center justify-center h-20">
+                    <span class="text-[9px] font-bold uppercase tracking-widest text-slate-500 mb-1">Cardiomegaly</span>
+                    <span class="text-lg font-bold text-slate-400">---</span>
+                </div>
+                <div
+                    class="bg-slate-100 border border-slate-200 rounded-sm p-3 flex flex-col items-center justify-center h-20">
+                    <span
+                        class="text-[9px] font-bold uppercase tracking-widest text-slate-500 mb-1">Consolidation</span>
+                    <span class="text-lg font-bold text-slate-400">---</span>
+                </div>
+                <div
+                    class="bg-slate-100 border border-slate-200 rounded-sm p-3 flex flex-col items-center justify-center h-20">
+                    <span class="text-[9px] font-bold uppercase tracking-widest text-slate-500 mb-1">Edema</span>
+                    <span class="text-lg font-bold text-slate-400">---</span>
+                </div>
+                <div
+                    class="bg-slate-100 border border-slate-200 rounded-sm p-3 flex flex-col items-center justify-center h-20">
+                    <span class="text-[9px] font-bold uppercase tracking-widest text-slate-500 mb-1">Pleural
+                        Effusion</span>
+                    <span class="text-lg font-bold text-slate-400">---</span>
+                </div>
+            </div>
+            <p class="text-[9px] uppercase tracking-widest text-slate-400 mt-4 text-right pr-1">Variance computed using
+                RAD-DINO and DenseNet121 ensemble probability deltas.</p>
+        </div>
+    </section>
+
+    <div id="compare-loading"
+        class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-50 flex items-center justify-center"
+        style="display:none">
+        <div class="bg-white p-8 rounded-sm shadow-xl max-w-sm w-full text-center border border-slate-200">
+            <h3 class="text-sm font-bold uppercase tracking-widest text-slate-800 mb-2">Analyzing Studies</h3>
+            <p class="text-[10px] text-slate-500 font-bold tracking-wider mb-6">Computing comparative differential
+                metrics...</p>
+            <div class="w-full h-1.5 bg-slate-100 rounded-none overflow-hidden border border-slate-200">
+                <div id="compare-loading-bar" class="h-full bg-blue-900 w-0 transition-all duration-300"></div>
+            </div>
+        </div>
+    </div>
+
+    <style>
+        .scrollbar-thin::-webkit-scrollbar {
+            width: 4px;
+        }
+
+        .scrollbar-thin::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        .scrollbar-thin::-webkit-scrollbar-thumb {
+            background-color: #cbd5e1;
+            border-radius: 20px;
+        }
+    </style>
+    <script src="/static/app.js"></script>
+</body>
+
+</html>

templates/history.html

@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Study Archive | ChestXpert</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            letter-spacing: -0.015em;
+        }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-900 min-h-screen flex flex-col">
+    <nav class="bg-white border-b border-slate-200 h-14 flex items-center px-6 justify-between shrink-0">
+        <div class="flex items-center gap-2">
+            <svg class="text-blue-900 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+            </svg>
+            <span class="text-blue-900 font-bold tracking-tight text-lg">ChestXpert</span>
+        </div>
+        <div class="hidden md:flex items-center gap-6 text-sm text-slate-600 font-medium">
+            <a href="/" class="hover:text-slate-900 transition-colors">Home</a>
+            <a href="/analyze" class="hover:text-slate-900 transition-colors">Analyze</a>
+            <a href="/compare" class="hover:text-slate-900 transition-colors">Compare</a>
+            <a href="/history" class="text-slate-900 font-semibold transition-colors">History</a>
+            <a href="/about" class="hover:text-slate-900 transition-colors">About</a>
+        </div>
+        <div class="flex items-center gap-4 text-sm font-medium">
+            <div
+                class="flex items-center gap-2 px-2.5 py-1 rounded-sm bg-slate-50 border border-slate-200 text-slate-700 text-[10px] uppercase font-bold tracking-wider">
+                <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" id="status-dot"></span>
+                <span id="status-text">Models Ready</span>
+            </div>
+            <div id="nav-auth" class="flex items-center gap-2" style="display: none;">
+                <a href="/login" class="text-blue-900 hover:underline transition-colors px-2">Login</a>
+            </div>
+            <div id="nav-profile" class="flex items-center relative" style="display: none;">
+                <div id="profile-trigger"
+                    class="flex items-center gap-2 cursor-pointer border border-slate-200 px-2 py-0.5 rounded-sm bg-slate-50 hover:bg-slate-100">
+                    <img src="/static/default-avatar.svg" alt="Profile"
+                        class="w-5 h-5 rounded-full border border-slate-200 bg-white">
+                    <span id="nav-user-name" class="text-slate-700 text-xs font-bold">User</span>
+                </div>
+                <div id="profile-dropdown"
+                    class="absolute top-8 right-0 bg-white border border-slate-200 rounded-sm shadow-sm min-w-[200px] z-50 text-left flex flex-col"
+                    style="display:none;">
+                    <div class="p-3 border-b border-slate-200 bg-slate-50">
+                        <strong id="dropdown-name" class="block text-slate-800 text-sm">User</strong>
+                        <span id="dropdown-email"
+                            class="text-slate-500 text-[10px] uppercase tracking-wider block mt-0.5 truncate">user@example.com</span>
+                    </div>
+                    <div class="p-1">
+                        <a href="/history"
+                            class="block px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-sm">My
+                            Analyses</a>
+                        <a href="#"
+                            class="block px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-sm">Account
+                            Settings</a>
+                        <div class="h-px bg-slate-200 my-1"></div>
+                        <button id="logout-btn"
+                            class="w-full text-left px-3 py-2 text-xs font-bold text-red-600 hover:bg-red-50 rounded-sm">Sign
+                            Out</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <div class="bg-white border-b border-slate-200 py-3 px-6 flex justify-between items-center w-full shrink-0">
+        <h1 class="text-lg font-bold text-slate-800 tracking-wider uppercase">Study Archive</h1>
+        <div class="flex items-center gap-4">
+            <div class="relative">
+                <svg class="w-4 h-4 text-slate-400 absolute left-2.5 top-1.5" fill="none" stroke="currentColor"
+                    viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                </svg>
+                <input type="text" placeholder="Search by ID or Date..."
+                    class="pl-8 pr-3 py-1.5 text-xs text-slate-800 border border-slate-300 outline-none focus:border-blue-900 rounded-sm w-64 shadow-sm bg-slate-50 focus:bg-white transition-colors">
+            </div>
+            <button id="btn-clear-history"
+                class="text-[10px] uppercase tracking-widest font-bold text-slate-600 hover:text-red-700 hover:bg-red-50 border border-slate-300 hover:border-red-200 rounded-sm px-4 py-1.5 transition-colors bg-white shadow-sm">Clear
+                Registry</button>
+        </div>
+    </div>
+
+    <main class="w-full flex-1 p-6 max-w-7xl mx-auto flex flex-col gap-6">
+        <div class="bg-white border border-slate-200 rounded-sm shadow-sm flex flex-col min-h-[500px]">
+            <div class="w-full overflow-x-auto text-left text-sm text-slate-500">
+                <table class="w-full min-w-[800px]" id="history-table">
+                    <thead
+                        class="text-xs text-slate-700 uppercase bg-slate-100 border-b border-slate-200 font-bold tracking-widest sticky top-0">
+                        <tr>
+                            <th scope="col" class="px-6 py-3 whitespace-nowrap">Date & Time</th>
+                            <th scope="col" class="px-6 py-3 whitespace-nowrap">Study ID</th>
+                            <th scope="col" class="px-6 py-3 whitespace-nowrap">Primary Finding</th>
+                            <th scope="col" class="px-6 py-3 whitespace-nowrap">Risk Level</th>
+                            <th scope="col" class="px-6 py-3 whitespace-nowrap">Model Confidence</th>
+                            <th scope="col" class="px-6 py-3 whitespace-nowrap text-right">Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="history-list">
+                    </tbody>
+                </table>
+            </div>
+
+            <div id="history-empty" class="flex-1 flex flex-col items-center justify-center p-12 text-center"
+                style="display:none">
+                <div
+                    class="w-16 h-16 bg-slate-100 border border-slate-200 rounded-full flex items-center justify-center mb-4">
+                    <svg class="w-8 h-8 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10">
+                        </path>
+                    </svg>
+                </div>
+                <h3 class="text-sm font-bold text-slate-800 uppercase tracking-widest mb-2" id="empty-title">Archive
+                    Empty</h3>
+                <p class="text-xs text-slate-500 font-medium tracking-wide mb-6" id="empty-desc">No clinical studies are
+                    currently stored in the local registry.</p>
+                <div id="empty-action">
+                    <a href="/analyze"
+                        class="bg-blue-900 hover:bg-blue-800 text-white text-[10px] font-bold py-2 px-6 rounded-sm uppercase tracking-widest shadow-sm transition-colors border border-blue-900 inline-block">Initialize
+                        New Study</a>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <footer class="w-full bg-slate-50 py-6 px-4 shrink-0 text-center border-t border-slate-200">
+        <p class="text-[10px] uppercase tracking-widest text-slate-400 font-bold">&copy; 2026 ChestXpert &mdash; For
+            Research & Educational Use Only.</p>
+    </footer>
+
+    <script src="/static/app.js"></script>
+</body>
+
+</html>

templates/index.html

@@ -0,0 +1,224 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChestXpert | Clinical Radiology Analysis</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+            letter-spacing: -0.015em;
+        }
+    </style>
+</head>
+
+<body class="bg-slate-50 text-slate-900 min-h-screen flex flex-col">
+    <nav class="bg-white border-b border-slate-200 h-14 flex items-center px-6 justify-between shrink-0">
+        <div class="flex items-center gap-2">
+            <svg class="text-blue-900 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+            </svg>
+            <span class="text-blue-900 font-bold tracking-tight text-lg">ChestXpert</span>
+        </div>
+        <div class="hidden md:flex items-center gap-6 text-sm text-slate-600 font-medium">
+            <a href="/" class="text-slate-900 font-semibold transition-colors">Home</a>
+            <a href="/analyze" class="hover:text-slate-900 transition-colors">Analyze</a>
+            <a href="/compare" class="hover:text-slate-900 transition-colors">Compare</a>
+            <a href="/history" class="hover:text-slate-900 transition-colors">History</a>
+            <a href="/about" class="hover:text-slate-900 transition-colors">About</a>
+        </div>
+        <div class="flex items-center gap-4 text-sm font-medium">
+            <div
+                class="flex items-center gap-2 px-2.5 py-1 rounded-sm bg-slate-50 border border-slate-200 text-slate-700 text-[10px] uppercase font-bold tracking-wider">
+                <span class="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" id="status-dot"></span>
+                <span id="status-text">Models Ready</span>
+            </div>
+            <div id="nav-auth" class="flex items-center gap-2" style="display: none;">
+                <a href="/login" class="text-blue-900 hover:underline transition-colors px-2">Login</a>
+            </div>
+            <div id="nav-profile" class="flex items-center relative" style="display: none;">
+                <div id="profile-trigger"
+                    class="flex items-center gap-2 cursor-pointer border border-slate-200 px-2 py-0.5 rounded-sm bg-slate-50 hover:bg-slate-100">
+                    <img src="/static/default-avatar.svg" alt="Profile"
+                        class="w-5 h-5 rounded-full border border-slate-200 bg-white">
+                    <span id="nav-user-name" class="text-slate-700 text-xs font-bold">User</span>
+                </div>
+                <div id="profile-dropdown"
+                    class="absolute top-8 right-0 bg-white border border-slate-200 rounded-sm shadow-sm min-w-[200px] z-50 text-left flex flex-col"
+                    style="display:none;">
+                    <div class="p-3 border-b border-slate-200 bg-slate-50">
+                        <strong id="dropdown-name" class="block text-slate-800 text-sm">User</strong>
+                        <span id="dropdown-email"
+                            class="text-slate-500 text-[10px] uppercase tracking-wider block mt-0.5 truncate">user@example.com</span>
+                    </div>
+                    <div class="p-1">
+                        <a href="/history"
+                            class="block px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-sm">My
+                            Analyses</a>
+                        <a href="#"
+                            class="block px-3 py-2 text-xs font-semibold text-slate-700 hover:bg-slate-100 rounded-sm">Account
+                            Settings</a>
+                        <div class="h-px bg-slate-200 my-1"></div>
+                        <button id="logout-btn"
+                            class="w-full text-left px-3 py-2 text-xs font-bold text-red-600 hover:bg-red-50 rounded-sm">Sign
+                            Out</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="max-w-7xl mx-auto w-full px-4 py-12 flex-1 flex flex-col gap-16">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+            <div class="flex flex-col items-start text-left">
+                <h1 class="text-4xl md:text-5xl font-bold tracking-tight text-slate-900 leading-tight">ChestXpert
+                    Radiology Analysis</h1>
+                <p class="mt-4 text-base text-slate-600 leading-relaxed font-medium">AI-powered thoracic screening
+                    utilizing an optimized RAD-DINO and DenseNet121 ensemble architecture.</p>
+                <div class="mt-6 mb-8 px-3 py-2 bg-white border border-slate-200 rounded-sm inline-flex">
+                    <p class="text-[11px] font-bold text-slate-700 uppercase tracking-widest">85% Mean AUC <span
+                            class="text-slate-300 mx-2">|</span> 5 Conditions <span class="text-slate-300 mx-2">|</span>
+                        Grad-CAM Visualization</p>
+                </div>
+                <div class="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
+                    <a href="/analyze"
+                        class="bg-blue-900 hover:bg-blue-800 text-white text-xs font-bold py-3 px-6 rounded-sm uppercase tracking-widest text-center shadow-sm transition-colors border border-blue-900">Launch
+                        Analysis Workspace</a>
+                    <a href="/compare"
+                        class="bg-white hover:bg-slate-50 text-slate-900 text-xs font-bold py-3 px-6 rounded-sm uppercase tracking-widest text-center shadow-sm transition-colors border border-slate-200">Compare
+                        Studies</a>
+                </div>
+            </div>
+            <div
+                class="bg-slate-900 rounded-sm border-slate-700 border shadow-md h-64 md:h-96 w-full flex items-center justify-center relative overflow-hidden ring-1 ring-slate-800">
+                <div
+                    class="absolute top-0 w-full h-8 bg-[#0a0f1c] border-b border-slate-700 flex items-center px-4 gap-2">
+                    <div class="w-2 h-2 rounded-sm bg-slate-600"></div>
+                    <div class="w-2 h-2 rounded-sm bg-slate-600"></div>
+                </div>
+                <div
+                    class="absolute inset-0 top-8 bg-slate-900 opacity-50 bg-[radial-gradient(#1e293b_1px,transparent_1px)] [background-size:16px_16px]">
+                </div>
+                <span class="text-slate-600 text-[10px] font-mono tracking-widest uppercase z-10">[Dashboard Preview
+                    Mockup]</span>
+            </div>
+        </div>
+
+        <div class="flex flex-col">
+            <h2 class="text-xs font-bold uppercase tracking-wider text-slate-500 border-b border-slate-200 pb-3 mb-6">
+                System Capabilities</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                <div class="bg-white border border-slate-200 rounded-sm p-6 shadow-sm flex flex-col gap-2">
+                    <div
+                        class="w-8 h-8 rounded-sm bg-slate-50 border border-slate-100 flex items-center justify-center mb-2">
+                        <svg class="w-4 h-4 text-blue-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2">
+                            </path>
+                        </svg>
+                    </div>
+                    <h3 class="text-sm font-bold text-slate-900">Diagnostic Scope</h3>
+                    <p class="text-xs text-slate-600 leading-relaxed font-medium">Multi-label classification evaluating
+                        frontal chest radiographs across 5 key pathologies simultaneously.</p>
+                </div>
+                <div class="bg-white border border-slate-200 rounded-sm p-6 shadow-sm flex flex-col gap-2">
+                    <div
+                        class="w-8 h-8 rounded-sm bg-slate-50 border border-slate-100 flex items-center justify-center mb-2">
+                        <svg class="w-4 h-4 text-blue-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 002-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10">
+                            </path>
+                        </svg>
+                    </div>
+                    <h3 class="text-sm font-bold text-slate-900">Model Architecture</h3>
+                    <p class="text-xs text-slate-600 leading-relaxed font-medium">State-of-the-art dual ensemble
+                        consisting of a Vision Transformer (RAD-DINO) and a robust CNN (DenseNet121).</p>
+                </div>
+                <div class="bg-white border border-slate-200 rounded-sm p-6 shadow-sm flex flex-col gap-2">
+                    <div
+                        class="w-8 h-8 rounded-sm bg-slate-50 border border-slate-100 flex items-center justify-center mb-2">
+                        <svg class="w-4 h-4 text-blue-900" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
+                            </path>
+                        </svg>
+                    </div>
+                    <h3 class="text-sm font-bold text-slate-900">Clinical Output</h3>
+                    <p class="text-xs text-slate-600 leading-relaxed font-medium">Native DICOM & PNG support,
+                        comprehensive Grad-CAM heatmaps, with structured JSON and PDF report exports.</p>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <section class="w-full bg-white border-y border-slate-200 py-12">
+        <div class="max-w-7xl mx-auto px-4">
+            <h2 class="text-xs font-bold uppercase tracking-wider text-slate-500 border-b border-slate-100 pb-3 mb-0">
+                Target Pathologies</h2>
+            <div class="flex flex-col border border-t-0 border-slate-200 bg-white shadow-sm rounded-b-sm">
+                <div
+                    class="flex flex-col sm:flex-row items-start sm:items-center py-4 px-6 bg-white border-b border-slate-100">
+                    <span class="w-48 text-sm font-bold text-slate-900 shrink-0 mb-1 sm:mb-0">Atelectasis</span>
+                    <span class="text-xs text-slate-600 leading-relaxed font-medium">Complete or partial collapse of the
+                        lung or lobe, occurring when alveoli become deflated or filled with fluid. Radiographically
+                        presents as increased opacification with volume loss and potential mediastinal shift. It is a
+                        common post-operative respiratory complication or consequence of airway obstruction.</span>
+                </div>
+                <div
+                    class="flex flex-col sm:flex-row items-start sm:items-center py-4 px-6 bg-slate-50 border-b border-slate-100">
+                    <span class="w-48 text-sm font-bold text-slate-900 shrink-0 mb-1 sm:mb-0">Cardiomegaly</span>
+                    <span class="text-xs text-slate-600 leading-relaxed font-medium">Radiographic enlargement of the
+                        cardiac silhouette, typically defined by a cardiothoracic ratio &gt;0.5 on a PA chest
+                        radiograph. It serves as a critical indicator of underlying cardiovascular pathology, including
+                        congestive heart failure, valvular disease, or ventricular hypertrophy.</span>
+                </div>
+                <div
+                    class="flex flex-col sm:flex-row items-start sm:items-center py-4 px-6 bg-white border-b border-slate-100">
+                    <span class="w-48 text-sm font-bold text-slate-900 shrink-0 mb-1 sm:mb-0">Consolidation</span>
+                    <span class="text-xs text-slate-600 leading-relaxed font-medium">Region of normally compressible
+                        lung tissue that has filled with liquid, cellular debris, or other exudate. Classic radiologic
+                        presentation includes air bronchograms and dense opacification without volume loss, frequently
+                        indicative of pneumonia, pulmonary hemorrhage, or malignancy.</span>
+                </div>
+                <div
+                    class="flex flex-col sm:flex-row items-start sm:items-center py-4 px-6 bg-slate-50 border-b border-slate-100">
+                    <span class="w-48 text-sm font-bold text-slate-900 shrink-0 mb-1 sm:mb-0">Edema</span>
+                    <span class="text-xs text-slate-600 leading-relaxed font-medium">Accumulation of excess fluid within
+                        the pulmonary interstitium and alveolar spaces, impairing optimal gas exchange. Clinically
+                        correlates with heart failure (cardiogenic) or acute respiratory distress syndrome
+                        (non-cardiogenic), presenting with prominent vascular markings, Kerley B lines, and perihilar
+                        haze.</span>
+                </div>
+                <div class="flex flex-col sm:flex-row items-start sm:items-center py-4 px-6 bg-white rounded-b-sm">
+                    <span class="w-48 text-sm font-bold text-slate-900 shrink-0 mb-1 sm:mb-0">Pleural Effusion</span>
+                    <span class="text-xs text-slate-600 leading-relaxed font-medium">Pathological accumulation of fluid
+                        in the pleural cavity between the parietal and visceral pleura. Radiographically characterized
+                        by blunting of the costophrenic angles and a distinct meniscus sign, commonly associated with
+                        heart failure, pneumonia, pulmonary embolism, or advanced malignancy.</span>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <section class="w-full bg-slate-100 border-y border-slate-200 py-6 mt-12 shrink-0">
+        <div class="max-w-7xl mx-auto px-4 flex flex-col sm:flex-row items-center justify-between gap-4">
+            <span class="text-sm font-bold text-slate-900 uppercase tracking-widest">Initialize Diagnostic
+                Session</span>
+            <a href="/analyze"
+                class="bg-blue-900 hover:bg-blue-800 text-white text-[11px] font-bold py-3 px-8 rounded-sm uppercase tracking-widest text-center shadow-sm transition-colors border border-blue-900">Go
+                to Analysis</a>
+        </div>
+    </section>
+
+    <footer class="w-full bg-slate-50 py-6 px-4 shrink-0 text-center">
+        <p class="text-[10px] uppercase tracking-widest text-slate-400 font-bold">&copy; 2026 ChestXpert &mdash; For
+            Research & Educational Use Only. Not for primary diagnostic use.</p>
+    </footer>
+
+    <script src="/static/app.js"></script>
+</body>
+
+</html>

templates/login.html

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign In &mdash; ChestXpert</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/style.css">
+    <style>
+        .auth-container {
+            max-width: 400px;
+            margin: 4rem auto;
+            padding: 2rem;
+        }
+
+        .auth-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .auth-header h1 {
+            font-size: 1.5rem;
+            margin-bottom: 0.5rem;
+            color: var(--text-dark);
+        }
+
+        .auth-header p {
+            color: var(--text-light);
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+            color: var(--text-color);
+        }
+
+        .form-control {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            font-family: inherit;
+            font-size: 1rem;
+            transition: all 0.2s;
+        }
+
+        .form-control:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+        }
+
+        .auth-btn {
+            width: 100%;
+            padding: 0.75rem;
+            font-size: 1rem;
+        }
+
+        .auth-footer {
+            margin-top: 1.5rem;
+            text-align: center;
+            font-size: 0.9rem;
+            color: var(--text-light);
+        }
+    </style>
+</head>
+
+<body>
+    <nav class="navbar">
+        <div class="nav-container">
+            <a href="/" class="nav-brand"><span class="brand-mark">CX</span><span>ChestXpert</span></a>
+            <div class="nav-links">
+                <a href="/" class="nav-link">Home</a>
+                <a href="/analyze" class="nav-link">Analyze</a>
+            </div>
+            <div class="nav-auth" id="nav-auth"
+                style="display: none; align-items: center; gap: 0.5rem; margin-left: 1rem;">
+                <a href="/login" class="btn btn-outline" style="padding: 0.4rem 1rem;">Sign In</a>
+                <a href="/register" class="btn btn-primary" style="padding: 0.4rem 1rem;">Sign Up</a>
+            </div>
+            <div class="nav-profile" id="nav-profile"
+                style="display: none; align-items: center; margin-left: 1rem; position: relative;">
+                <div class="profile-trigger" id="profile-trigger"
+                    style="cursor: pointer; display: flex; align-items: center; gap: 0.5rem;">
+                    <img src="/static/default-avatar.svg" alt="Profile"
+                        style="width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-color); background: #f1f5f9;">
+                    <span id="nav-user-name" style="font-weight: 500; font-size: 0.9rem;">User</span>
+                </div>
+                <div class="profile-dropdown" id="profile-dropdown"
+                    style="display: none; position: absolute; top: 120%; right: 0; background: white; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); min-width: 220px; z-index: 100;">
+                    <div style="padding: 1rem; border-bottom: 1px solid var(--border-color);">
+                        <strong id="dropdown-name"
+                            style="display: block; color: var(--text-dark); margin-bottom: 0.25rem;">User</strong>
+                        <span id="dropdown-email"
+                            style="font-size: 0.8rem; color: var(--text-light); word-break: break-all;">user@example.com</span>
+                    </div>
+                    <div style="padding: 0.5rem;">
+                        <a href="/history"
+                            style="display: block; padding: 0.5rem 1rem; color: var(--text-color); text-decoration: none; border-radius: 4px; font-size: 0.9rem; transition: background 0.2s;"
+                            onmouseover="this.style.background='var(--bg-light)'"
+                            onmouseout="this.style.background='transparent'">My Analyses</a>
+                        <a href="#"
+                            style="display: block; padding: 0.5rem 1rem; color: var(--text-color); text-decoration: none; border-radius: 4px; font-size: 0.9rem; transition: background 0.2s;"
+                            onmouseover="this.style.background='var(--bg-light)'"
+                            onmouseout="this.style.background='transparent'">Account Settings</a>
+                        <div style="height: 1px; background: var(--border-color); margin: 0.5rem 0;"></div>
+                        <button id="logout-btn"
+                            style="display: block; width: 100%; text-align: left; padding: 0.5rem 1rem; color: #ef4444; border: none; background: transparent; cursor: pointer; border-radius: 4px; font-size: 0.9rem; transition: background 0.2s;"
+                            onmouseover="this.style.background='#fef2f2'"
+                            onmouseout="this.style.background='transparent'">Sign Out</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="page-content">
+        <div class="container">
+            <div class="card auth-container">
+                <div class="auth-header">
+                    <h1>Sign In</h1>
+                    <p>Welcome back to ChestXpert</p>
+                </div>
+                <form id="login-form">
+                    <div class="form-group">
+                        <label for="email">Email Address</label>
+                        <input type="email" id="email" class="form-control" required placeholder="you@example.com">
+                    </div>
+                    <div class="form-group">
+                        <label for="password">Password</label>
+                        <input type="password" id="password" class="form-control" required placeholder="••••••••">
+                    </div>
+                    <button type="submit" class="btn btn-primary auth-btn">Sign In</button>
+                    <div class="auth-footer">
+                        Don't have an account? <a href="/register">Sign Up</a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+
+    <script src="/static/app.js"></script>
+</body>
+
+</html>

templates/register.html

@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up &mdash; ChestXpert</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/style.css">
+    <style>
+        .auth-container {
+            max-width: 400px;
+            margin: 4rem auto;
+            padding: 2rem;
+        }
+
+        .auth-header {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
+
+        .auth-header h1 {
+            font-size: 1.5rem;
+            margin-bottom: 0.5rem;
+            color: var(--text-dark);
+        }
+
+        .auth-header p {
+            color: var(--text-light);
+        }
+
+        .form-group {
+            margin-bottom: 1.5rem;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 0.5rem;
+            font-weight: 500;
+            color: var(--text-color);
+        }
+
+        .form-control {
+            width: 100%;
+            padding: 0.75rem 1rem;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            font-family: inherit;
+            font-size: 1rem;
+            transition: all 0.2s;
+        }
+
+        .form-control:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+        }
+
+        .auth-btn {
+            width: 100%;
+            padding: 0.75rem;
+            font-size: 1rem;
+        }
+
+        .auth-footer {
+            margin-top: 1.5rem;
+            text-align: center;
+            font-size: 0.9rem;
+            color: var(--text-light);
+        }
+    </style>
+</head>
+
+<body>
+    <nav class="navbar">
+        <div class="nav-container">
+            <a href="/" class="nav-brand"><span class="brand-mark">CX</span><span>ChestXpert</span></a>
+            <div class="nav-links">
+                <a href="/" class="nav-link">Home</a>
+                <a href="/analyze" class="nav-link">Analyze</a>
+            </div>
+            <div class="nav-auth" id="nav-auth"
+                style="display: none; align-items: center; gap: 0.5rem; margin-left: 1rem;">
+                <a href="/login" class="btn btn-outline" style="padding: 0.4rem 1rem;">Sign In</a>
+                <a href="/register" class="btn btn-primary" style="padding: 0.4rem 1rem;">Sign Up</a>
+            </div>
+            <div class="nav-profile" id="nav-profile"
+                style="display: none; align-items: center; margin-left: 1rem; position: relative;">
+                <div class="profile-trigger" id="profile-trigger"
+                    style="cursor: pointer; display: flex; align-items: center; gap: 0.5rem;">
+                    <img src="/static/default-avatar.svg" alt="Profile"
+                        style="width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-color); background: #f1f5f9;">
+                    <span id="nav-user-name" style="font-weight: 500; font-size: 0.9rem;">User</span>
+                </div>
+                <div class="profile-dropdown" id="profile-dropdown"
+                    style="display: none; position: absolute; top: 120%; right: 0; background: white; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); min-width: 220px; z-index: 100;">
+                    <div style="padding: 1rem; border-bottom: 1px solid var(--border-color);">
+                        <strong id="dropdown-name"
+                            style="display: block; color: var(--text-dark); margin-bottom: 0.25rem;">User</strong>
+                        <span id="dropdown-email"
+                            style="font-size: 0.8rem; color: var(--text-light); word-break: break-all;">user@example.com</span>
+                    </div>
+                    <div style="padding: 0.5rem;">
+                        <a href="/history"
+                            style="display: block; padding: 0.5rem 1rem; color: var(--text-color); text-decoration: none; border-radius: 4px; font-size: 0.9rem; transition: background 0.2s;"
+                            onmouseover="this.style.background='var(--bg-light)'"
+                            onmouseout="this.style.background='transparent'">My Analyses</a>
+                        <a href="#"
+                            style="display: block; padding: 0.5rem 1rem; color: var(--text-color); text-decoration: none; border-radius: 4px; font-size: 0.9rem; transition: background 0.2s;"
+                            onmouseover="this.style.background='var(--bg-light)'"
+                            onmouseout="this.style.background='transparent'">Account Settings</a>
+                        <div style="height: 1px; background: var(--border-color); margin: 0.5rem 0;"></div>
+                        <button id="logout-btn"
+                            style="display: block; width: 100%; text-align: left; padding: 0.5rem 1rem; color: #ef4444; border: none; background: transparent; cursor: pointer; border-radius: 4px; font-size: 0.9rem; transition: background 0.2s;"
+                            onmouseover="this.style.background='#fef2f2'"
+                            onmouseout="this.style.background='transparent'">Sign Out</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </nav>
+
+    <main class="page-content">
+        <div class="container">
+            <div class="card auth-container">
+                <div class="auth-header">
+                    <h1>Create an Account</h1>
+                    <p>Join ChestXpert to save your analyses</p>
+                </div>
+                <form id="register-form">
+                    <div class="form-group">
+                        <label for="name">Full Name</label>
+                        <input type="text" id="name" class="form-control" required placeholder="Dr. Jane Doe">
+                    </div>
+                    <div class="form-group">
+                        <label for="email">Email Address</label>
+                        <input type="email" id="email" class="form-control" required placeholder="you@example.com">
+                    </div>
+                    <div class="form-group">
+                        <label for="password">Password</label>
+                        <input type="password" id="password" class="form-control" required placeholder="••••••••"
+                            minlength="6">
+                    </div>
+                    <button type="submit" class="btn btn-primary auth-btn">Sign Up</button>
+                    <div class="auth-footer">
+                        Already have an account? <a href="/login">Sign In</a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </main>
+
+    <script src="/static/app.js"></script>
+</body>
+
+</html>

templates/report.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Report — ChestXpert</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/style.css">
+    <style>
+        @media print {
+
+            .navbar,
+            .no-print {
+                display: none !important;
+            }
+
+            body {
+                background: white;
+            }
+
+            .report-container {
+                max-width: 100%;
+                padding: 0;
+            }
+
+            .card {
+                border: 1px solid #ddd;
+                box-shadow: none;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <nav class="navbar no-print">
+        <div class="nav-container">
+            <a href="/" class="nav-brand"><span class="brand-mark">CX</span><span>ChestXpert</span></a>
+            <div class="nav-links">
+                <a href="/" class="nav-link">Home</a>
+                <a href="/analyze" class="nav-link">Analyze</a>
+                <a href="/compare" class="nav-link">Compare</a>
+                <a href="/history" class="nav-link">History</a>
+                <a href="/about" class="nav-link">About</a>
+            </div>
+        </div>
+    </nav>
+
+    <main class="page-content">
+        <div class="container report-container">
+            {% if error %}
+            <div class="empty-state">
+                <h3>Report Not Found</h3>
+                <p>This analysis report has expired or does not exist.</p>
+                <a href="/analyze" class="btn btn-primary">New Analysis</a>
+            </div>
+            {% else %}
+            <div class="report-header no-print">
+                <button class="btn btn-outline" onclick="window.print()">Print Report</button>
+                <button class="btn btn-outline" onclick="window.close()">Close</button>
+            </div>
+
+            <div class="report-page" id="report-page">
+                <div class="report-title-bar">
+                    <div>
+                        <h1>ChestXpert Analysis Report</h1>
+                        <p class="report-subtitle">AI-Powered Chest X-Ray Analysis</p>
+                    </div>
+                    <div class="report-meta">
+                        <p><strong>Report ID:</strong> <span id="report-id"></span></p>
+                        <p><strong>Date:</strong> <span id="report-date"></span></p>
+                        <p><strong>File:</strong> <span id="report-file"></span></p>
+                    </div>
+                </div>
+
+                <div class="report-body">
+                    <div class="report-grid">
+                        <div>
+                            <h3>Original Image</h3>
+                            <div class="report-image-box">
+                                <img id="report-original" src="" alt="X-Ray">
+                            </div>
+                        </div>
+                        <div>
+                            <h3>Grad-CAM Heatmap</h3>
+                            <div class="report-image-box">
+                                <img id="report-heatmap" src="" alt="Heatmap">
+                            </div>
+                            <p class="report-heatmap-label" id="report-heatmap-label"></p>
+                        </div>
+                    </div>
+
+                    <h3>Findings</h3>
+                    <table class="report-table">
+                        <thead>
+                            <tr>
+                                <th>Condition</th>
+                                <th>Probability</th>
+                                <th>Risk Level</th>
+                                <th>RAD-DINO</th>
+                                <th>DenseNet</th>
+                            </tr>
+                        </thead>
+                        <tbody id="report-findings"></tbody>
+                    </table>
+
+                    <h3>Models Used</h3>
+                    <p id="report-models"></p>
+
+                    <div class="report-disclaimer">
+                        <strong>Disclaimer:</strong> This report is generated by an AI system for educational and
+                        research purposes only. It is not a substitute for professional medical diagnosis. Always
+                        consult a qualified healthcare provider for clinical decisions.
+                    </div>
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </main>
+
+    {% if not error %}
+    <script>
+        const reportData = {{ data | safe }};
+        document.getElementById('report-id').textContent = reportData.analysis_id || '-';
+        document.getElementById('report-date').textContent = reportData.timestamp || new Date().toLocaleString();
+        document.getElementById('report-file').textContent = reportData.filename || '-';
+        document.getElementById('report-original').src = 'data:image/png;base64,' + reportData.original_image;
+
+        // Show heatmap of highest probability condition
+        const topResult = reportData.results[0];
+        if (topResult && topResult.heatmap) {
+            document.getElementById('report-heatmap').src = 'data:image/png;base64,' + topResult.heatmap;
+            document.getElementById('report-heatmap-label').textContent = 'Showing: ' + topResult.label;
+        }
+
+        // Findings table
+        const tbody = document.getElementById('report-findings');
+        reportData.results.forEach(r => {
+            const tr = document.createElement('tr');
+            tr.innerHTML = `
+                <td><strong>${r.label}</strong></td>
+                <td>${r.probability}%</td>
+                <td><span class="risk-tag ${r.risk}">${r.risk.toUpperCase()}</span></td>
+                <td>${r.rd_prob !== null ? r.rd_prob + '%' : 'N/A'}</td>
+                <td>${r.dn_prob !== null ? r.dn_prob + '%' : 'N/A'}</td>
+            `;
+            tbody.appendChild(tr);
+        });
+
+        // Models
+        const m = reportData.models_used;
+        const parts = [];
+        if (m.rad_dino) parts.push('RAD-DINO (ViT-B/14)');
+        if (m.densenet) parts.push('DenseNet121');
+        if (m.ensemble) parts.push('Weighted Ensemble (60/40)');
+        document.getElementById('report-models').textContent = parts.join(', ');
+    </script>
+    {% endif %}
+    <script src="/static/app.js"></script>
+</body>
+
+</html>

update_nav.py

@@ -0,0 +1,37 @@
+import os
+import glob
+
+nav_extension = """
+            <div class="nav-auth" id="nav-auth" style="display: none; align-items: center; gap: 0.5rem; margin-left: 1rem;">
+                <a href="/login" class="btn btn-outline" style="padding: 0.4rem 1rem;">Sign In</a>
+                <a href="/register" class="btn btn-primary" style="padding: 0.4rem 1rem;">Sign Up</a>
+            </div>
+            <div class="nav-profile" id="nav-profile" style="display: none; align-items: center; margin-left: 1rem; position: relative;">
+                <div class="profile-trigger" id="profile-trigger" style="cursor: pointer; display: flex; align-items: center; gap: 0.5rem;">
+                    <img src="/static/default-avatar.svg" alt="Profile" style="width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-color); background: #f1f5f9;">
+                    <span id="nav-user-name" style="font-weight: 500; font-size: 0.9rem;">User</span>
+                </div>
+                <div class="profile-dropdown" id="profile-dropdown" style="display: none; position: absolute; top: 120%; right: 0; background: white; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); min-width: 220px; z-index: 100;">
+                    <div style="padding: 1rem; border-bottom: 1px solid var(--border-color);">
+                        <strong id="dropdown-name" style="display: block; color: var(--text-dark); margin-bottom: 0.25rem;">User</strong>
+                        <span id="dropdown-email" style="font-size: 0.8rem; color: var(--text-light); word-break: break-all;">user@example.com</span>
+                    </div>
+                    <div style="padding: 0.5rem;">
+                        <a href="/history" style="display: block; padding: 0.5rem 1rem; color: var(--text-color); text-decoration: none; border-radius: 4px; font-size: 0.9rem; transition: background 0.2s;" onmouseover="this.style.background='var(--bg-light)'" onmouseout="this.style.background='transparent'">My Analyses</a>
+                        <a href="#" style="display: block; padding: 0.5rem 1rem; color: var(--text-color); text-decoration: none; border-radius: 4px; font-size: 0.9rem; transition: background 0.2s;" onmouseover="this.style.background='var(--bg-light)'" onmouseout="this.style.background='transparent'">Account Settings</a>
+                        <div style="height: 1px; background: var(--border-color); margin: 0.5rem 0;"></div>
+                        <button id="logout-btn" style="display: block; width: 100%; text-align: left; padding: 0.5rem 1rem; color: #ef4444; border: none; background: transparent; cursor: pointer; border-radius: 4px; font-size: 0.9rem; transition: background 0.2s;" onmouseover="this.style.background='#fef2f2'" onmouseout="this.style.background='transparent'">Sign Out</button>
+                    </div>
+                </div>
+            </div>"""
+
+for f in glob.glob('templates/*.html'):
+    if 'login.html' in f or 'register.html' in f:
+        continue
+    with open(f, 'r', encoding='utf-8') as file:
+        content = file.read()
+    if 'id="nav-auth"' not in content:
+        content = content.replace('</div>\\n            <div class="nav-status">', '</div>\\n' + nav_extension + '\\n            <div class="nav-status">')
+        with open(f, 'w', encoding='utf-8') as file:
+            file.write(content)
+        print(f"Updated {f}")