Merge pull request #1 from ShuyaFeng/shuya

.gitignore

@@ -0,0 +1,21 @@
+# Python
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+.env
+.venv
+env/
+venv/
+ENV/
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# OS
+.DS_Store
+Thumbs.db 

Procfile

@@ -0,0 +1 @@
+web: gunicorn run:app 

README.md

@@ -1 +1,77 @@
-# DPSGDTool
+# DP-SGD Explorer
+
+An interactive web application for exploring and learning about Differentially Private Stochastic Gradient Descent (DP-SGD).
+
+## Features
+
+- Interactive playground for experimenting with DP-SGD parameters
+- Comprehensive learning hub with detailed explanations
+- Real-time privacy budget calculations
+- Training visualizations and metrics
+- Parameter recommendations
+
+## Requirements
+
+- Python 3.8 or higher
+- Modern web browser (Chrome, Firefox, Safari, or Edge)
+
+## Quick Start
+
+1. Clone this repository:
+   ```bash
+   git clone https://github.com/yourusername/dpsgd-explorer.git
+   cd dpsgd-explorer
+   ```
+
+2. Run the start script:
+   ```bash
+   ./start_server.sh
+   ```
+
+3. Open your web browser and navigate to:
+   ```
+   http://127.0.0.1:5000
+   ```
+
+The start script will automatically:
+- Check for Python installation
+- Create a virtual environment
+- Install required dependencies
+- Start the Flask development server
+
+## Manual Setup (if the script doesn't work)
+
+1. Create a virtual environment:
+   ```bash
+   python3 -m venv .venv
+   source .venv/bin/activate  # On Windows: .venv\Scripts\activate
+   ```
+
+2. Install dependencies:
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+3. Start the server:
+   ```bash
+   PYTHONPATH=. python3 run.py
+   ```
+
+## Project Structure
+
+```
+dpsgd-explorer/
+├── app/
+│   ├── static/          # Static files (CSS, JS)
+│   ├── templates/       # HTML templates
+│   ├── training/        # Training simulation
+│   ├── routes.py        # Flask routes
+│   └── __init__.py      # App initialization
+├── requirements.txt     # Python dependencies
+├── run.py              # Application entry point
+└── start_server.sh     # Start script
+```
+
+## License
+
+MIT License - Feel free to use this project for learning and educational purposes.

app/__init__.py

@@ -0,0 +1,30 @@
+from flask import Flask
+from flask_cors import CORS
+
+def create_app():
+    app = Flask(__name__, 
+                static_folder='static',
+                template_folder='templates')
+    
+    # Configure CORS
+    CORS(app, resources={
+        r"/*": {
+            "origins": ["http://localhost:5000", "http://127.0.0.1:5000"],
+            "methods": ["GET", "POST", "OPTIONS"],
+            "allow_headers": ["Content-Type"]
+        }
+    })
+    
+    # Configure security headers
+    @app.after_request
+    def add_security_headers(response):
+        response.headers['Access-Control-Allow-Origin'] = '*'
+        response.headers['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS'
+        response.headers['Access-Control-Allow-Headers'] = 'Content-Type'
+        return response
+    
+    # Register blueprints
+    from app.routes import main
+    app.register_blueprint(main)
+    
+    return app 

app/routes.py

@@ -0,0 +1,75 @@
+from flask import Blueprint, render_template, jsonify, request, current_app
+from app.training.mock_trainer import MockTrainer
+from app.training.privacy_calculator import PrivacyCalculator
+from flask_cors import cross_origin
+
+main = Blueprint('main', __name__)
+mock_trainer = MockTrainer()
+privacy_calculator = PrivacyCalculator()
+
+@main.route('/')
+def index():
+    return render_template('index.html')
+
+@main.route('/learning')
+def learning():
+    return render_template('learning.html')
+
+@main.route('/api/train', methods=['POST', 'OPTIONS'])
+@cross_origin()
+def train():
+    if request.method == 'OPTIONS':
+        return jsonify({'status': 'ok'})
+
+    try:
+        data = request.json
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+
+        params = {
+            'clipping_norm': float(data.get('clipping_norm', 1.0)),
+            'noise_multiplier': float(data.get('noise_multiplier', 1.0)),
+            'batch_size': int(data.get('batch_size', 64)),
+            'learning_rate': float(data.get('learning_rate', 0.01)),
+            'epochs': int(data.get('epochs', 5))
+        }
+        
+        # Get mock training results
+        results = mock_trainer.train(params)
+        
+        # Add gradient information for visualization
+        results['gradient_info'] = {
+            'before_clipping': mock_trainer.generate_gradient_norms(params['clipping_norm']),
+            'after_clipping': mock_trainer.generate_clipped_gradients(params['clipping_norm'])
+        }
+        
+        return jsonify(results)
+    except (TypeError, ValueError) as e:
+        return jsonify({'error': f'Invalid parameter values: {str(e)}'}), 400
+    except Exception as e:
+        return jsonify({'error': f'Server error: {str(e)}'}), 500
+
+@main.route('/api/privacy-budget', methods=['POST', 'OPTIONS'])
+@cross_origin()
+def calculate_privacy_budget():
+    if request.method == 'OPTIONS':
+        return jsonify({'status': 'ok'})
+
+    try:
+        data = request.json
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+
+        params = {
+            'clipping_norm': float(data.get('clipping_norm', 1.0)),
+            'noise_multiplier': float(data.get('noise_multiplier', 1.0)),
+            'batch_size': int(data.get('batch_size', 64)),
+            'epochs': int(data.get('epochs', 5))
+        }
+        
+        epsilon = privacy_calculator.calculate_epsilon(params)
+        return jsonify({'epsilon': epsilon})
+    except (TypeError, ValueError) as e:
+        return jsonify({'error': f'Invalid parameter values: {str(e)}'}), 400
+    except Exception as e:
+        return jsonify({'error': f'Server error: {str(e)}'}), 500 

app/static/css/learning.css

@@ -0,0 +1,202 @@
+/* Learning Hub Container */
+.learning-container {
+    display: flex;
+    gap: 2rem;
+    padding: 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+/* Sidebar Styles */
+.learning-sidebar {
+    flex: 0 0 300px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    height: fit-content;
+    position: sticky;
+    top: 2rem;
+}
+
+.learning-steps {
+    list-style: none;
+    padding: 0;
+    margin: 1rem 0;
+}
+
+.learning-step {
+    padding: 0.75rem 1rem;
+    margin: 0.5rem 0;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.95rem;
+    color: #495057;
+}
+
+.learning-step:hover {
+    background: #e9ecef;
+    color: #212529;
+}
+
+.learning-step.active {
+    background: #007bff;
+    color: white;
+    font-weight: 500;
+}
+
+/* Content Area Styles */
+.learning-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.step-content {
+    display: none;
+    animation: fadeIn 0.3s ease;
+}
+
+.step-content.active {
+    display: block;
+}
+
+/* Typography */
+.section-title {
+    font-size: 2.5rem;
+    color: #212529;
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.panel-title {
+    font-size: 1.25rem;
+    color: #343a40;
+    margin-bottom: 1rem;
+}
+
+.step-content h2 {
+    font-size: 2rem;
+    color: #212529;
+    margin-bottom: 1.5rem;
+}
+
+.step-content h3 {
+    font-size: 1.5rem;
+    color: #343a40;
+    margin: 2rem 0 1rem;
+}
+
+.step-content p {
+    font-size: 1rem;
+    line-height: 1.6;
+    color: #495057;
+    margin-bottom: 1rem;
+}
+
+/* Concept Box Styles */
+.concept-box {
+    display: flex;
+    gap: 1.5rem;
+    margin: 2rem 0;
+}
+
+.box1, .box2 {
+    flex: 1;
+    background: #f8f9fa;
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.concept-highlight {
+    background: #e9ecef;
+    padding: 1.5rem;
+    border-radius: 8px;
+    margin: 1.5rem 0;
+    border-left: 4px solid #007bff;
+}
+
+/* Formula Styles */
+.formula {
+    background: #f8f9fa;
+    padding: 1.5rem;
+    border-radius: 8px;
+    margin: 1rem 0;
+    text-align: center;
+    font-family: 'Times New Roman', serif;
+    font-size: 1.2rem;
+}
+
+/* List Styles */
+.step-content ul, .step-content ol {
+    padding-left: 1.5rem;
+    margin: 1rem 0;
+}
+
+.step-content li {
+    margin-bottom: 0.5rem;
+    color: #495057;
+    line-height: 1.5;
+}
+
+/* Animation */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .learning-container {
+        flex-direction: column;
+    }
+    
+    .learning-sidebar {
+        flex: none;
+        position: static;
+        width: 100%;
+    }
+    
+    .concept-box {
+        flex-direction: column;
+    }
+}
+
+/* Code and Math Styles */
+code {
+    background: #f8f9fa;
+    padding: 0.2rem 0.4rem;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+}
+
+sub {
+    font-size: 0.75em;
+    vertical-align: sub;
+}
+
+/* Links */
+.step-content a {
+    color: #007bff;
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.step-content a:hover {
+    color: #0056b3;
+    text-decoration: underline;
+}
+
+/* Strong Text */
+strong {
+    color: #212529;
+    font-weight: 600;
+} 

app/static/css/styles.css

@@ -0,0 +1,483 @@
+:root {
+    --primary-color: #3f51b5;
+    --primary-light: #757de8;
+    --primary-dark: #002984;
+    --secondary-color: #4caf50;
+    --accent-color: #ff9800;
+    --error-color: #f44336;
+    --text-primary: #333;
+    --text-secondary: #666;
+    --background-light: #fff;
+    --background-off: #f5f7fa;
+    --border-color: #ddd;
+    
+    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+/* Base Styles */
+body {
+    font-family: var(--font-family);
+    margin: 0;
+    padding: 0;
+    background: var(--background-off);
+    color: var(--text-primary);
+}
+
+.app-container {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header */
+.main-header {
+    background-color: var(--primary-color);
+    color: white;
+    padding: 1rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.header-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+.tagline {
+    font-size: 0.8rem;
+    opacity: 0.8;
+}
+
+/* Navigation */
+.nav-list {
+    list-style: none;
+    display: flex;
+    gap: 1rem;
+    padding: 0;
+    margin: 0;
+}
+
+.nav-link {
+    color: white;
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    text-decoration: none;
+}
+
+.nav-link:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.nav-link.active {
+    background-color: rgba(255, 255, 255, 0.2);
+}
+
+/* Main Content */
+.main-content {
+    flex: 1;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+.section-title {
+    font-size: 2rem;
+    color: var(--primary-dark);
+    margin-bottom: 1.5rem;
+}
+
+/* Grid Layout */
+.lab-container {
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    gap: 1.5rem;
+}
+
+@media (max-width: 900px) {
+    .lab-container {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Panels */
+.panel {
+    background: white;
+    border-radius: 8px;
+    padding: 1rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.panel-title {
+    font-size: 1.2rem;
+    margin-bottom: 1rem;
+    color: var(--primary-dark);
+}
+
+/* Parameter Controls */
+.parameter-control {
+    margin-bottom: 1rem;
+}
+
+.parameter-label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+}
+
+.parameter-slider {
+    width: 100%;
+    margin-bottom: 0.5rem;
+}
+
+.slider-display {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+}
+
+/* Privacy Budget Display */
+.budget-display {
+    margin-top: 1.5rem;
+    padding: 1rem;
+    background: var(--background-off);
+    border-radius: 4px;
+}
+
+.budget-bar {
+    height: 8px;
+    background-color: #e0e0e0;
+    border-radius: 4px;
+    position: relative;
+    margin: 0.5rem 0;
+}
+
+.budget-fill {
+    height: 100%;
+    border-radius: 4px;
+    background-color: var(--accent-color);
+    transition: width 0.3s ease;
+}
+
+.budget-fill.low {
+    background-color: var(--secondary-color);
+}
+
+.budget-fill.medium {
+    background-color: var(--accent-color);
+}
+
+.budget-fill.high {
+    background-color: var(--error-color);
+}
+
+/* Buttons */
+.control-button {
+    width: 100%;
+    padding: 0.8rem;
+    border: none;
+    border-radius: 4px;
+    background-color: var(--primary-color);
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+    margin-top: 1rem;
+    transition: background-color 0.3s ease;
+}
+
+.control-button:hover {
+    background-color: var(--primary-dark);
+}
+
+.control-button.running {
+    background-color: var(--error-color);
+}
+
+/* Charts */
+.chart-container {
+    position: relative;
+    height: 300px;
+    width: 100%;
+    margin-bottom: 1rem;
+}
+
+.chart-container canvas {
+    width: 100% !important;
+    height: 100% !important;
+}
+
+/* Metrics */
+.metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.metric-card {
+    background-color: var(--background-off);
+    border-radius: 4px;
+    padding: 1rem;
+    text-align: center;
+}
+
+.metric-value {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+
+.metric-label {
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+/* Recommendations */
+.recommendation-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.recommendation-item {
+    display: flex;
+    align-items: flex-start;
+    padding: 0.8rem 0;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.recommendation-icon {
+    margin-right: 0.5rem;
+    font-size: 1.2rem;
+}
+
+/* Tabs */
+.tabs {
+    display: flex;
+    margin-bottom: 1rem;
+}
+
+.tab {
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.3s ease;
+}
+
+.tab:hover {
+    color: var(--primary-color);
+}
+
+.tab.active {
+    border-bottom: 2px solid var(--primary-color);
+    color: var(--primary-color);
+}
+
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+/* Training Status */
+.status-badge {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 1rem;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+    margin-top: 1rem;
+}
+
+.pulse {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #4caf50;
+    animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
+    }
+    
+    70% {
+        transform: scale(1);
+        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
+    }
+    
+    100% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
+    }
+}
+
+/* Footer */
+.footer {
+    text-align: center;
+    padding: 1rem;
+    background-color: var(--primary-dark);
+    color: white;
+    margin-top: 2rem;
+}
+
+/* Tooltips */
+.tooltip {
+    position: relative;
+    display: inline-block;
+    margin-left: 0.5rem;
+}
+
+.tooltip-icon {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: var(--primary-light);
+    color: white;
+    font-size: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: help;
+}
+
+.tooltip-text {
+    visibility: hidden;
+    width: 200px;
+    background-color: #333;
+    color: white;
+    text-align: center;
+    border-radius: 4px;
+    padding: 0.5rem;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -100px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 0.8rem;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+
+/* Learning Hub Styles */
+.learning-container {
+    display: grid;
+    grid-template-columns: 250px 1fr;
+    gap: 1.5rem;
+}
+
+.learning-sidebar {
+    background: white;
+    border-radius: 8px;
+    padding: 1rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.learning-content {
+    background: white;
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.learning-steps {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.learning-step {
+    padding: 0.75rem 0.5rem;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-bottom: 0.5rem;
+    transition: all 0.3s ease;
+}
+
+.learning-step:hover {
+    background-color: var(--background-off);
+}
+
+.learning-step.active {
+    background-color: var(--background-off);
+    color: var(--primary-color);
+    font-weight: 500;
+}
+
+/* Concept Boxes */
+.concept-highlight {
+    background-color: var(--background-off);
+    border-radius: 4px;
+    padding: 1rem;
+    margin: 1rem 0;
+}
+
+.formula {
+    background-color: #f5f7fa;
+    padding: 0.75rem;
+    border-radius: 4px;
+    font-family: monospace;
+    margin: 1rem 0;
+}
+
+.concept-box {
+    display: flex;
+    margin: 1rem 0;
+    gap: 1rem;
+}
+
+.concept-box > div {
+    flex: 1;
+    padding: 1rem;
+    border-radius: 8px;
+}
+
+.concept-box .box1 {
+    background-color: #e3f2fd;
+}
+
+.concept-box .box2 {
+    background-color: #fff8e1;
+}
+
+/* Error Message */
+.error-message {
+    background-color: #ffebee;
+    color: #c62828;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border-radius: 4px;
+    border-left: 4px solid #c62828;
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateY(-20px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+} 

app/static/js/main.js

@@ -0,0 +1,648 @@
+class DPSGDExplorer {
+    constructor() {
+        this.trainingChart = null;
+        this.privacyChart = null;
+        this.gradientChart = null;
+        this.isTraining = false;
+        this.initializeUI();
+    }
+
+    initializeUI() {
+        // Initialize parameter controls
+        this.initializeSliders();
+        this.initializePresets();
+        this.initializeTabs();
+        this.initializeCharts();
+        
+        // Add event listeners
+        document.getElementById('train-button')?.addEventListener('click', () => this.toggleTraining());
+    }
+
+    initializeSliders() {
+        // Parameter sliders
+        const sliders = {
+            'clipping-norm': document.getElementById('clipping-norm'),
+            'noise-multiplier': document.getElementById('noise-multiplier'),
+            'batch-size': document.getElementById('batch-size'),
+            'learning-rate': document.getElementById('learning-rate'),
+            'epochs': document.getElementById('epochs')
+        };
+
+        // Add event listeners to sliders
+        for (const [id, slider] of Object.entries(sliders)) {
+            if (slider) {
+                slider.addEventListener('input', (e) => {
+                    const value = parseFloat(e.target.value);
+                    document.getElementById(`${id}-value`).textContent = value.toFixed(1);
+                    
+                    // Update privacy budget
+                    this.updatePrivacyBudget();
+                    
+                    // Update gradient visualization when clipping norm changes
+                    if (id === 'clipping-norm') {
+                        this.updateGradientVisualization(value);
+                    }
+                });
+            }
+        }
+
+        // Add event listener for the visual clipping norm slider
+        const visualSlider = document.getElementById('clipping-norm-visual');
+        if (visualSlider) {
+            visualSlider.addEventListener('input', (e) => {
+                const value = parseFloat(e.target.value);
+                document.getElementById('clipping-norm-visual-value').textContent = value.toFixed(1);
+                this.updateGradientVisualization(value);
+            });
+        }
+    }
+
+    initializePresets() {
+        const presets = {
+            'high-privacy': {
+                clippingNorm: 1.0,
+                noiseMultiplier: 1.5,
+                batchSize: 256,
+                learningRate: 0.005,
+                epochs: 10
+            },
+            'balanced': {
+                clippingNorm: 1.0,
+                noiseMultiplier: 1.0,
+                batchSize: 128,
+                learningRate: 0.01,
+                epochs: 8
+            },
+            'high-utility': {
+                clippingNorm: 1.5,
+                noiseMultiplier: 0.5,
+                batchSize: 64,
+                learningRate: 0.02,
+                epochs: 5
+            }
+        };
+
+        // Add event listeners to preset buttons
+        for (const [preset, values] of Object.entries(presets)) {
+            document.getElementById(`preset-${preset}`)?.addEventListener('click', () => {
+                this.applyPreset(values);
+            });
+        }
+    }
+
+    initializeTabs() {
+        const tabs = document.querySelectorAll('.tab');
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                const tabsContainer = tab.closest('.tabs');
+                tabsContainer.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+
+                const tabName = tab.getAttribute('data-tab');
+                const panel = tab.closest('.panel');
+                panel.querySelectorAll('.tab-content').forEach(content => {
+                    content.classList.remove('active');
+                });
+                panel.querySelector(`#${tabName}-tab`)?.classList.add('active');
+            });
+        });
+    }
+
+    initializeCharts() {
+        const trainingCtx = document.getElementById('training-chart')?.getContext('2d');
+        const privacyCtx = document.getElementById('privacy-chart')?.getContext('2d');
+        const gradientCtx = document.getElementById('gradient-chart')?.getContext('2d');
+
+        if (trainingCtx) {
+            this.trainingChart = new Chart(trainingCtx, {
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [
+                        {
+                            label: 'Accuracy',
+                            borderColor: '#4caf50',
+                            data: [],
+                            yAxisID: 'y'
+                        },
+                        {
+                            label: 'Loss',
+                            borderColor: '#f44336',
+                            data: [],
+                            yAxisID: 'y1'
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    interaction: {
+                        mode: 'index',
+                        intersect: false,
+                    },
+                    scales: {
+                        y: {
+                            type: 'linear',
+                            display: true,
+                            position: 'left',
+                            title: {
+                                display: true,
+                                text: 'Accuracy (%)'
+                            },
+                            min: 0,
+                            max: 100
+                        },
+                        y1: {
+                            type: 'linear',
+                            display: true,
+                            position: 'right',
+                            title: {
+                                display: true,
+                                text: 'Loss'
+                            },
+                            min: 0,
+                            max: 2,
+                            grid: {
+                                drawOnChartArea: false,
+                            },
+                        }
+                    }
+                }
+            });
+        }
+
+        if (privacyCtx) {
+            this.privacyChart = new Chart(privacyCtx, {
+                type: 'line',
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'Privacy Budget (ε)',
+                        borderColor: '#3f51b5',
+                        data: []
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Privacy Budget (ε)'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+
+        if (gradientCtx) {
+            this.gradientChart = new Chart(gradientCtx, {
+                type: 'scatter',
+                data: {
+                    datasets: [
+                        {
+                            label: 'Before Clipping',
+                            borderColor: '#2196f3',
+                            backgroundColor: 'rgba(33, 150, 243, 0.1)',
+                            data: [],
+                            showLine: true
+                        },
+                        {
+                            label: 'After Clipping',
+                            borderColor: '#f44336',
+                            backgroundColor: 'rgba(244, 67, 54, 0.1)',
+                            data: [],
+                            showLine: true
+                        }
+                    ]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: {
+                            type: 'linear',
+                            position: 'bottom',
+                            title: {
+                                display: true,
+                                text: 'Gradient Norm'
+                            },
+                            min: 0
+                        },
+                        y: {
+                            type: 'linear',
+                            position: 'left',
+                            title: {
+                                display: true,
+                                text: 'Density'
+                            },
+                            min: 0
+                        }
+                    },
+                    plugins: {
+                        annotation: {
+                            annotations: {
+                                line1: {
+                                    type: 'line',
+                                    xMin: 1,
+                                    xMax: 1,
+                                    borderColor: '#f44336',
+                                    borderWidth: 2,
+                                    borderDash: [5, 5],
+                                    label: {
+                                        content: 'Clipping Threshold',
+                                        display: true,
+                                        position: 'top'
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+    }
+
+    async updatePrivacyBudget() {
+        const params = this.getParameters();
+        try {
+            const response = await fetch('/api/privacy-budget', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(params)
+            });
+            const data = await response.json();
+            
+            // Update UI
+            const budgetValue = document.getElementById('budget-value');
+            const budgetFill = document.getElementById('budget-fill');
+            
+            if (budgetValue && budgetFill) {
+                budgetValue.textContent = data.epsilon.toFixed(2);
+                budgetFill.style.width = `${Math.min(data.epsilon / 10 * 100, 100)}%`;
+                
+                // Update class for coloring
+                budgetFill.classList.remove('low', 'medium', 'high');
+                if (data.epsilon <= 1) {
+                    budgetFill.classList.add('low');
+                } else if (data.epsilon <= 5) {
+                    budgetFill.classList.add('medium');
+                } else {
+                    budgetFill.classList.add('high');
+                }
+            }
+        } catch (error) {
+            console.error('Error calculating privacy budget:', error);
+        }
+    }
+
+    async toggleTraining() {
+        if (this.isTraining) {
+            this.stopTraining();
+        } else {
+            await this.startTraining();
+        }
+    }
+
+    async startTraining() {
+        const trainButton = document.getElementById('train-button');
+        const trainingStatus = document.getElementById('training-status');
+        
+        if (!trainButton || this.isTraining) return;
+
+        this.isTraining = true;
+        trainButton.textContent = 'Stop Training';
+        trainButton.classList.add('running');
+        trainingStatus.style.display = 'flex';
+
+        // Reset charts
+        this.resetCharts();
+
+        try {
+            console.log('Starting training with parameters:', this.getParameters()); // Debug log
+
+            const response = await fetch('/api/train', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(this.getParameters())
+            });
+
+            const data = await response.json();
+            
+            if (!response.ok) {
+                throw new Error(data.error || 'Unknown error occurred');
+            }
+
+            console.log('Received training data:', data); // Debug log
+
+            // Update charts and results
+            this.updateCharts(data.epochs_data);
+            this.updateResults(data);
+        } catch (error) {
+            console.error('Training error:', error);
+            // Show error message to user
+            const errorMessage = document.createElement('div');
+            errorMessage.className = 'error-message';
+            errorMessage.textContent = error.message || 'An error occurred during training';
+            document.querySelector('.lab-main').insertBefore(errorMessage, document.querySelector('.lab-main').firstChild);
+            
+            // Remove error message after 5 seconds
+            setTimeout(() => {
+                errorMessage.remove();
+            }, 5000);
+        } finally {
+            this.stopTraining();
+        }
+    }
+
+    stopTraining() {
+        this.isTraining = false;
+        const trainButton = document.getElementById('train-button');
+        if (trainButton) {
+            trainButton.textContent = 'Run Training';
+            trainButton.classList.remove('running');
+        }
+        document.getElementById('training-status').style.display = 'none';
+    }
+
+    resetCharts() {
+        if (this.trainingChart) {
+            this.trainingChart.data.labels = [];
+            this.trainingChart.data.datasets[0].data = [];
+            this.trainingChart.data.datasets[1].data = [];
+            this.trainingChart.update();
+        }
+
+        if (this.privacyChart) {
+            this.privacyChart.data.labels = [];
+            this.privacyChart.data.datasets[0].data = [];
+            this.privacyChart.update();
+        }
+
+        if (this.gradientChart) {
+            this.gradientChart.data.datasets[0].data = [];
+            this.gradientChart.data.datasets[1].data = [];
+            this.gradientChart.update();
+        }
+    }
+
+    updateCharts(epochsData) {
+        if (!this.trainingChart || !epochsData) return;
+
+        console.log('Updating charts with data:', epochsData); // Debug log
+
+        // Update training metrics chart
+        const labels = epochsData.map(d => `Epoch ${d.epoch}`);
+        const accuracies = epochsData.map(d => d.accuracy);
+        const losses = epochsData.map(d => d.loss);
+
+        this.trainingChart.data.labels = labels;
+        this.trainingChart.data.datasets[0].data = accuracies;
+        this.trainingChart.data.datasets[1].data = losses;
+        this.trainingChart.update();
+
+        // Update current epoch display
+        const currentEpoch = document.getElementById('current-epoch');
+        const totalEpochs = document.getElementById('total-epochs');
+        if (currentEpoch && totalEpochs) {
+            currentEpoch.textContent = epochsData.length;
+            totalEpochs.textContent = this.getParameters().epochs;
+        }
+
+        // Update privacy budget chart
+        if (this.privacyChart) {
+            const privacyBudgets = epochsData.map((_, i) => 
+                this.calculateEpochPrivacy(i + 1)
+            );
+            this.privacyChart.data.labels = labels;
+            this.privacyChart.data.datasets[0].data = privacyBudgets;
+            this.privacyChart.update();
+        }
+
+        // Update gradient visualization
+        if (this.gradientChart) {
+            const clippingNorm = this.getParameters().clipping_norm;
+            
+            // Generate gradient data if not provided in epochsData
+            let gradientData;
+            if (epochsData[epochsData.length - 1]?.gradient_info) {
+                gradientData = epochsData[epochsData.length - 1].gradient_info;
+            } else {
+                // Generate synthetic gradient data
+                const beforeClipping = [];
+                const afterClipping = [];
+                
+                // Generate log-normal distributed gradients
+                const mu = Math.log(clippingNorm) - 0.5;
+                const sigma = 0.8;
+                
+                for (let i = 0; i < 100; i++) {
+                    const u1 = Math.random();
+                    const u2 = Math.random();
+                    const z = Math.sqrt(-2.0 * Math.log(u1)) * Math.cos(2.0 * Math.PI * u2);
+                    const norm = Math.exp(mu + sigma * z);
+                    
+                    const density = Math.exp(-(Math.pow(Math.log(norm) - mu, 2) / (2 * sigma * sigma))) / 
+                                  (norm * sigma * Math.sqrt(2 * Math.PI));
+                    const y = 0.2 + 0.8 * (density / 0.8) + 0.1 * (Math.random() - 0.5);
+                    
+                    beforeClipping.push({ x: norm, y: y });
+                    afterClipping.push({ x: Math.min(norm, clippingNorm), y: y });
+                }
+                
+                gradientData = {
+                    before_clipping: beforeClipping.sort((a, b) => a.x - b.x),
+                    after_clipping: afterClipping.sort((a, b) => a.x - b.x)
+                };
+            }
+            
+            // Update gradient chart
+            this.gradientChart.data.datasets[0].data = gradientData.before_clipping;
+            this.gradientChart.data.datasets[1].data = gradientData.after_clipping;
+            
+            // Update clipping threshold line
+            this.gradientChart.options.plugins.annotation.annotations.line1 = {
+                type: 'line',
+                xMin: clippingNorm,
+                xMax: clippingNorm,
+                borderColor: '#f44336',
+                borderWidth: 2,
+                borderDash: [5, 5],
+                label: {
+                    content: `Clipping Threshold (C=${clippingNorm.toFixed(1)})`,
+                    display: true,
+                    position: 'top'
+                }
+            };
+            
+            // Update x-axis scale based on clipping norm
+            this.gradientChart.options.scales.x.max = Math.max(clippingNorm * 2.5, 5);
+            
+            this.gradientChart.update('active');
+        }
+    }
+
+    updateResults(data) {
+        // Hide no-results message and show results content
+        document.getElementById('no-results').style.display = 'none';
+        document.getElementById('results-content').style.display = 'block';
+
+        // Update metrics
+        document.getElementById('accuracy-value').textContent = 
+            data.final_metrics.accuracy.toFixed(1) + '%';
+        document.getElementById('loss-value').textContent = 
+            data.final_metrics.loss.toFixed(3);
+        document.getElementById('training-time-value').textContent = 
+            data.final_metrics.training_time.toFixed(1) + 's';
+
+        // Update recommendations
+        const recommendationList = document.querySelector('.recommendation-list');
+        recommendationList.innerHTML = '';
+        data.recommendations.forEach(rec => {
+            const item = document.createElement('li');
+            item.className = 'recommendation-item';
+            item.innerHTML = `
+                <span class="recommendation-icon">${rec.icon}</span>
+                <span>${rec.text}</span>
+            `;
+            recommendationList.appendChild(item);
+        });
+    }
+
+    getParameters() {
+        return {
+            clipping_norm: parseFloat(document.getElementById('clipping-norm').value),
+            noise_multiplier: parseFloat(document.getElementById('noise-multiplier').value),
+            batch_size: parseInt(document.getElementById('batch-size').value),
+            learning_rate: parseFloat(document.getElementById('learning-rate').value),
+            epochs: parseInt(document.getElementById('epochs').value)
+        };
+    }
+
+    applyPreset(values) {
+        document.getElementById('clipping-norm').value = values.clippingNorm;
+        document.getElementById('noise-multiplier').value = values.noiseMultiplier;
+        document.getElementById('batch-size').value = values.batchSize;
+        document.getElementById('learning-rate').value = values.learningRate;
+        document.getElementById('epochs').value = values.epochs;
+
+        // Update displayed values
+        document.getElementById('clipping-norm-value').textContent = values.clippingNorm;
+        document.getElementById('noise-multiplier-value').textContent = values.noiseMultiplier;
+        document.getElementById('batch-size-value').textContent = values.batchSize;
+        document.getElementById('learning-rate-value').textContent = values.learningRate;
+        document.getElementById('epochs-value').textContent = values.epochs;
+
+        this.updatePrivacyBudget();
+    }
+
+    calculateEpochPrivacy(epoch) {
+        const params = this.getParameters();
+        const samplingRate = params.batch_size / 60000; // Assuming MNIST size
+        const steps = epoch * (1 / samplingRate);
+        const delta = 1e-5;
+        const c = Math.sqrt(2 * Math.log(1.25 / delta));
+        return Math.min((c * samplingRate * Math.sqrt(steps)) / params.noise_multiplier, 10);
+    }
+
+    updateGradientVisualization(clippingNorm) {
+        if (!this.gradientChart) return;
+
+        // Generate random gradient norms following a log-normal distribution
+        const numPoints = 100;
+        const beforeClipping = [];
+        const afterClipping = [];
+
+        // Parameters for log-normal distribution
+        const mu = Math.log(clippingNorm) - 0.5;
+        const sigma = 0.8;
+
+        // Generate gradient norms
+        for (let i = 0; i < numPoints; i++) {
+            // Generate log-normal distributed gradient norms
+            const u1 = Math.random();
+            const u2 = Math.random();
+            const z = Math.sqrt(-2.0 * Math.log(u1)) * Math.cos(2.0 * Math.PI * u2);
+            const norm = Math.exp(mu + sigma * z);
+
+            // Calculate density using kernel density estimation
+            const density = Math.exp(-(Math.pow(Math.log(norm) - mu, 2) / (2 * sigma * sigma))) / (norm * sigma * Math.sqrt(2 * Math.PI));
+            
+            // Normalize density and add some randomness
+            const y = 0.2 + 0.8 * (density / 0.8) + 0.1 * (Math.random() - 0.5);
+            
+            beforeClipping.push({ x: norm, y: y });
+            afterClipping.push({ x: Math.min(norm, clippingNorm), y: y });
+        }
+
+        // Sort points by x-value for smoother lines
+        beforeClipping.sort((a, b) => a.x - b.x);
+        afterClipping.sort((a, b) => a.x - b.x);
+
+        // Update chart data
+        this.gradientChart.data.datasets[0].data = beforeClipping;
+        this.gradientChart.data.datasets[1].data = afterClipping;
+        
+        // Update clipping threshold line
+        this.gradientChart.options.plugins.annotation.annotations.line1 = {
+            type: 'line',
+            xMin: clippingNorm,
+            xMax: clippingNorm,
+            borderColor: '#f44336',
+            borderWidth: 2,
+            borderDash: [5, 5],
+            label: {
+                content: `Clipping Threshold (C=${clippingNorm.toFixed(1)})`,
+                display: true,
+                position: 'top'
+            }
+        };
+
+        // Update x-axis scale based on clipping norm
+        this.gradientChart.options.scales.x.max = Math.max(clippingNorm * 2.5, 5);
+        
+        // Update the chart with animation
+        this.gradientChart.update('active');
+    }
+
+    updateGradientVisualizationWithData(beforeClipping, afterClipping, clippingNorm) {
+        if (!this.gradientChart) return;
+
+        // Update chart data with real training data
+        this.gradientChart.data.datasets[0].data = beforeClipping;
+        this.gradientChart.data.datasets[1].data = afterClipping;
+        
+        // Update clipping threshold line
+        this.gradientChart.options.plugins.annotation.annotations.line1 = {
+            type: 'line',
+            xMin: clippingNorm,
+            xMax: clippingNorm,
+            borderColor: '#f44336',
+            borderWidth: 2,
+            borderDash: [5, 5],
+            label: {
+                content: `Clipping Threshold (C=${clippingNorm.toFixed(1)})`,
+                display: true,
+                position: 'top'
+            }
+        };
+
+        // Update x-axis scale based on clipping norm
+        this.gradientChart.options.scales.x.max = Math.max(clippingNorm * 2.5, 5);
+        
+        // Update the chart with animation
+        this.gradientChart.update('active');
+    }
+}
+
+// Initialize the application when the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.dpsgdExplorer = new DPSGDExplorer();
+}); 

app/templates/base.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}DP-SGD Explorer{% endblock %}</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/learning.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation"></script>
+    <script>
+        // Register the annotation plugin
+        Chart.register(ChartAnnotation);
+    </script>
+    {% block extra_head %}{% endblock %}
+</head>
+<body>
+    <div class="app-container">
+        <header class="main-header">
+            <div class="header-container">
+                <div>
+                    <div class="logo">DP-SGD Explorer</div>
+                    <div class="tagline">Interactive Learning & Experimentation</div>
+                </div>
+                <nav>
+                    <ul class="nav-list">
+                        <li><a href="{{ url_for('main.learning') }}" class="nav-link {% if request.endpoint == 'main.learning' %}active{% endif %}">Learning Hub</a></li>
+                        <li><a href="{{ url_for('main.index') }}" class="nav-link {% if request.endpoint == 'main.index' %}active{% endif %}">Playground</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+
+        <main class="main-content">
+            {% block content %}{% endblock %}
+        </main>
+
+        <footer class="footer">
+            <p>DP-SGD Explorer - An Educational Tool for Differential Privacy in Machine Learning</p>
+            <p>© 2024 - For educational purposes</p>
+        </footer>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    {% block extra_scripts %}{% endblock %}
+</body>
+</html> 

app/templates/index.html

@@ -0,0 +1,331 @@
+{% extends "base.html" %}
+
+{% block title %}DP-SGD Explorer - Interactive Playground{% endblock %}
+
+{% block content %}
+<h1 class="section-title">DP-SGD Interactive Playground</h1>
+
+<div class="lab-container">
+    <!-- Sidebar - Configuration Panels -->
+    <div class="lab-sidebar">
+        <!-- Model Configuration Panel -->
+        <div class="panel">
+            <h2 class="panel-title">Model Configuration</h2>
+            
+            <div class="parameter-control">
+                <label for="dataset-select" class="parameter-label">
+                    Dataset
+                    <span class="tooltip">
+                        <span class="tooltip-icon">?</span>
+                        <span class="tooltip-text">The dataset used for training affects privacy budget calculations and model accuracy.</span>
+                    </span>
+                </label>
+                <select id="dataset-select" class="parameter-select">
+                    <option value="mnist">MNIST Digits</option>
+                    <option value="fashion-mnist">Fashion MNIST</option>
+                    <option value="cifar10">CIFAR-10</option>
+                </select>
+            </div>
+            
+            <div class="parameter-control">
+                <label for="model-select" class="parameter-label">
+                    Model Architecture
+                    <span class="tooltip">
+                        <span class="tooltip-icon">?</span>
+                        <span class="tooltip-text">The model architecture affects training time, capacity to learn, and resilience to noise.</span>
+                    </span>
+                </label>
+                <select id="model-select" class="parameter-select">
+                    <option value="simple-mlp">Simple MLP</option>
+                    <option value="simple-cnn">Simple CNN</option>
+                    <option value="advanced-cnn">Advanced CNN</option>
+                </select>
+            </div>
+            
+            <div style="margin-top: 1.5rem;">
+                <h3 style="margin-bottom: 0.5rem; font-size: 1rem;">Quick Presets</h3>
+                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;">
+                    <button id="preset-high-privacy" style="padding: 0.5rem; text-align: center; background-color: #e3f2fd; border: none; border-radius: 4px; cursor: pointer;">
+                        <div style="font-size: 1.2rem; margin-bottom: 0.2rem;">🔒</div>
+                        <div style="font-weight: 500; margin-bottom: 0.2rem;">High Privacy</div>
+                        <div style="font-size: 0.8rem; color: #666;">ε ≈ 1.2</div>
+                    </button>
+                    <button id="preset-balanced" style="padding: 0.5rem; text-align: center; background-color: #f1f8e9; border: none; border-radius: 4px; cursor: pointer;">
+                        <div style="font-size: 1.2rem; margin-bottom: 0.2rem;">⚖️</div>
+                        <div style="font-weight: 500; margin-bottom: 0.2rem;">Balanced</div>
+                        <div style="font-size: 0.8rem; color: #666;">ε ≈ 3.0</div>
+                    </button>
+                    <button id="preset-high-utility" style="padding: 0.5rem; text-align: center; background-color: #fff8e1; border: none; border-radius: 4px; cursor: pointer;">
+                        <div style="font-size: 1.2rem; margin-bottom: 0.2rem;">📈</div>
+                        <div style="font-weight: 500; margin-bottom: 0.2rem;">High Utility</div>
+                        <div style="font-size: 0.8rem; color: #666;">ε ≈ 8.0</div>
+                    </button>
+                </div>
+            </div>
+        </div>
+        
+        <!-- DP-SGD Parameters Panel -->
+        <div class="panel" style="margin-top: 1rem;">
+            <h2 class="panel-title">DP-SGD Parameters</h2>
+            
+            <div class="parameter-control">
+                <label for="clipping-norm" class="parameter-label">
+                    Clipping Norm (C)
+                    <span class="tooltip">
+                        <span class="tooltip-icon">?</span>
+                        <span class="tooltip-text">Limits how much any single training example can affect the model update. Smaller values provide stronger privacy but can slow learning.</span>
+                    </span>
+                </label>
+                <input type="range" id="clipping-norm" class="parameter-slider" min="0.1" max="5.0" step="0.1" value="1.0">
+                <div class="slider-display">
+                    <span>0.1</span>
+                    <span id="clipping-norm-value">1.0</span>
+                    <span>5.0</span>
+                </div>
+            </div>
+            
+            <div class="parameter-control">
+                <label for="noise-multiplier" class="parameter-label">
+                    Noise Multiplier (σ)
+                    <span class="tooltip">
+                        <span class="tooltip-icon">?</span>
+                        <span class="tooltip-text">Controls how much noise is added to protect privacy. Higher values increase privacy but may reduce accuracy.</span>
+                    </span>
+                </label>
+                <input type="range" id="noise-multiplier" class="parameter-slider" min="0.1" max="5.0" step="0.1" value="1.0">
+                <div class="slider-display">
+                    <span>0.1</span>
+                    <span id="noise-multiplier-value">1.0</span>
+                    <span>5.0</span>
+                </div>
+            </div>
+            
+            <div class="parameter-control">
+                <label for="batch-size" class="parameter-label">
+                    Batch Size
+                    <span class="tooltip">
+                        <span class="tooltip-icon">?</span>
+                        <span class="tooltip-text">Number of examples processed in each training step. Affects both privacy accounting and training stability.</span>
+                    </span>
+                </label>
+                <input type="range" id="batch-size" class="parameter-slider" min="16" max="512" step="16" value="64">
+                <div class="slider-display">
+                    <span>16</span>
+                    <span id="batch-size-value">64</span>
+                    <span>512</span>
+                </div>
+            </div>
+            
+            <div class="parameter-control">
+                <label for="learning-rate" class="parameter-label">
+                    Learning Rate (η)
+                    <span class="tooltip">
+                        <span class="tooltip-icon">?</span>
+                        <span class="tooltip-text">Controls how quickly model parameters update. For DP-SGD, often needs to be smaller than standard SGD.</span>
+                    </span>
+                </label>
+                <input type="range" id="learning-rate" class="parameter-slider" min="0.001" max="0.1" step="0.001" value="0.01">
+                <div class="slider-display">
+                    <span>0.001</span>
+                    <span id="learning-rate-value">0.01</span>
+                    <span>0.1</span>
+                </div>
+            </div>
+            
+            <div class="parameter-control">
+                <label for="epochs" class="parameter-label">
+                    Epochs
+                    <span class="tooltip">
+                        <span class="tooltip-icon">?</span>
+                        <span class="tooltip-text">Number of complete passes through the dataset. More epochs improves learning but increases privacy budget consumption.</span>
+                    </span>
+                </label>
+                <input type="range" id="epochs" class="parameter-slider" min="1" max="20" step="1" value="5">
+                <div class="slider-display">
+                    <span>1</span>
+                    <span id="epochs-value">5</span>
+                    <span>20</span>
+                </div>
+            </div>
+            
+            <div class="budget-display">
+                <h3 style="margin-top: 0; margin-bottom: 0.5rem;">
+                    Estimated Privacy Budget (ε)
+                    <span class="tooltip">
+                        <span class="tooltip-icon">?</span>
+                        <span class="tooltip-text">This is the estimated privacy loss from training with these parameters. Lower ε means stronger privacy guarantees.</span>
+                    </span>
+                </h3>
+                <div style="display: flex; align-items: center; gap: 1rem;">
+                    <div id="budget-value" style="font-size: 1.5rem; font-weight: bold; min-width: 60px;">2.47</div>
+                    <div style="flex: 1;">
+                        <div class="budget-bar">
+                            <div id="budget-fill" class="budget-fill medium" style="width: 25%;"></div>
+                        </div>
+                        <div class="budget-scale">
+                            <span>Stronger Privacy</span>
+                            <span>Weaker Privacy</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <button id="train-button" class="control-button">
+                Run Training
+            </button>
+        </div>
+    </div>
+    
+    <!-- Main Content - Visualizations and Results -->
+    <div class="lab-main">
+        <!-- Training Visualizer -->
+        <div class="panel">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+                <h2 class="panel-title">Training Progress</h2>
+                <div class="tabs">
+                    <div class="tab active" data-tab="training">Training Metrics</div>
+                    <div class="tab" data-tab="gradients">Gradient Clipping</div>
+                    <div class="tab" data-tab="privacy">Privacy Budget</div>
+                </div>
+            </div>
+            
+            <div id="training-tab" class="tab-content active">
+                <div class="chart-container" style="position: relative; height: 300px; width: 100%;">
+                    <canvas id="training-chart"></canvas>
+                </div>
+                
+                <div id="training-status" class="status-badge" style="display: none;">
+                    <span class="pulse"></span>
+                    <span style="font-weight: 500; color: #4caf50;">Training in progress</span>
+                    <span style="margin-left: auto; font-weight: 500;">Epoch: <span id="current-epoch">1</span> / <span id="total-epochs">5</span></span>
+                </div>
+            </div>
+            
+            <div id="gradients-tab" class="tab-content">
+                <div style="margin-bottom: 1rem;">
+                    <h3 style="font-size: 1rem; margin-bottom: 0.5rem;">Gradient Clipping Visualization</h3>
+                    <p style="font-size: 0.9rem; color: var(--text-secondary);">
+                        The chart below shows a distribution of gradient norms before and after clipping.
+                        The vertical red line indicates the clipping threshold.
+                        <span class="tooltip">
+                            <span class="tooltip-icon">?</span>
+                            <span class="tooltip-text">Clipping ensures no single example has too much influence on model updates, which is essential for differential privacy.</span>
+                        </span>
+                    </p>
+                </div>
+                
+                <div class="chart-container">
+                    <canvas id="gradient-chart" class="chart"></canvas>
+                </div>
+            </div>
+            
+            <div id="privacy-tab" class="tab-content">
+                <div style="margin-bottom: 1rem;">
+                    <h3 style="font-size: 1rem; margin-bottom: 0.5rem;">Privacy Budget Consumption</h3>
+                    <p style="font-size: 0.9rem; color: var(--text-secondary);">
+                        This chart shows how the privacy budget (ε) accumulates during training.
+                        <span class="tooltip">
+                            <span class="tooltip-icon">?</span>
+                            <span class="tooltip-text">In differential privacy, we track the 'privacy budget' (ε) which represents the amount of privacy loss. Lower values mean stronger privacy guarantees.</span>
+                        </span>
+                    </p>
+                </div>
+                
+                <div class="chart-container" style="position: relative; height: 300px; width: 100%;">
+                    <canvas id="privacy-chart"></canvas>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Results Panel -->
+        <div class="panel" style="margin-top: 1rem;">
+            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+                <h2 class="panel-title">Results</h2>
+                <div class="tabs">
+                    <div class="tab active" data-tab="metrics">Final Metrics</div>
+                    <div class="tab" data-tab="recommendations">Recommendations</div>
+                </div>
+            </div>
+            
+            <!-- Initial no-results state -->
+            <div id="no-results" style="text-align: center; padding: 2rem 0;">
+                <p style="color: var(--text-secondary); margin-bottom: 1rem;">Run training to see results here</p>
+                <div style="font-size: 3rem; opacity: 0.5;">📊</div>
+            </div>
+            
+            <!-- Results content (hidden initially) -->
+            <div id="results-content" style="display: none;">
+                <div id="metrics-tab" class="tab-content active">
+                    <div class="metrics-grid">
+                        <div class="metric-card">
+                            <div id="accuracy-value" class="metric-value" style="color: var(--primary-color);">92.4%</div>
+                            <div class="metric-label">
+                                Accuracy
+                                <span class="tooltip">
+                                    <span class="tooltip-icon">?</span>
+                                    <span class="tooltip-text">Model performance on test data. Higher values are better.</span>
+                                </span>
+                            </div>
+                        </div>
+                        
+                        <div class="metric-card">
+                            <div id="loss-value" class="metric-value">0.283</div>
+                            <div class="metric-label">
+                                Loss
+                                <span class="tooltip">
+                                    <span class="tooltip-icon">?</span>
+                                    <span class="tooltip-text">Final training loss. Lower values generally indicate better model fit.</span>
+                                </span>
+                            </div>
+                        </div>
+                        
+                        <div class="metric-card">
+                            <div id="privacy-budget-value" class="metric-value" style="color: var(--accent-color);">ε = 2.1</div>
+                            <div class="metric-label">
+                                Privacy Budget
+                                <span class="tooltip">
+                                    <span class="tooltip-icon">?</span>
+                                    <span class="tooltip-text">Final privacy loss (ε). Lower values mean stronger privacy guarantees.</span>
+                                </span>
+                            </div>
+                        </div>
+                        
+                        <div class="metric-card">
+                            <div id="training-time-value" class="metric-value">3.7s</div>
+                            <div class="metric-label">
+                                Training Time
+                                <span class="tooltip">
+                                    <span class="tooltip-icon">?</span>
+                                    <span class="tooltip-text">Total time spent on training, including privacy mechanisms.</span>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div style="background-color: var(--background-off); border-radius: 4px; padding: 1rem; margin-top: 1rem;">
+                        <h3 style="margin-top: 0; margin-bottom: 0.5rem; font-size: 1rem;">Privacy-Utility Trade-off</h3>
+                        <div style="position: relative; height: 8px; background-color: #e0e0e0; border-radius: 4px; margin: 1.5rem 0;">
+                            <div style="position: absolute; top: -20px; left: 92%; transform: translateX(-50%);">
+                                <span style="font-weight: 500; font-size: 0.8rem; color: var(--secondary-color);">Utility</span>
+                            </div>
+                            <div style="position: absolute; top: -20px; right: 79%; transform: translateX(50%);">
+                                <span style="font-weight: 500; font-size: 0.8rem; color: var(--primary-color);">Privacy</span>
+                            </div>
+                        </div>
+                        <p id="tradeoff-explanation" style="font-size: 0.9rem; color: var(--text-secondary); margin-top: 1rem;">
+                            This model achieved 92.4% accuracy with a privacy budget of ε=2.1. This is a good trade-off for most applications.
+                        </p>
+                    </div>
+                </div>
+                
+                <div id="recommendations-tab" class="tab-content">
+                    <h3 style="margin-top: 0; margin-bottom: 1rem; font-size: 1rem;">Recommendations</h3>
+                    <ul class="recommendation-list">
+                        <!-- Recommendations will be dynamically added here -->
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %} 

app/templates/learning.html

@@ -0,0 +1,261 @@
+{% extends "base.html" %}
+
+{% block title %}DP-SGD Explorer - Learning Hub{% endblock %}
+
+{% block content %}
+<h1 class="section-title">Learning Hub</h1>
+
+<div class="learning-container">
+    <div class="learning-sidebar">
+        <h2 class="panel-title">DP-SGD Concepts</h2>
+        <ul class="learning-steps">
+            <li class="learning-step active" data-step="intro">Introduction to Differential Privacy</li>
+            <li class="learning-step" data-step="dp-concepts">Core DP Concepts</li>
+            <li class="learning-step" data-step="sgd-basics">SGD Refresher</li>
+            <li class="learning-step" data-step="dpsgd-intro">DP-SGD: Core Modifications</li>
+            <li class="learning-step" data-step="parameters">Hyperparameter Deep Dive</li>
+            <li class="learning-step" data-step="privacy-accounting">Privacy Accounting</li>
+        </ul>
+    </div>
+    
+    <div class="learning-content">
+        <div id="intro-content" class="step-content active">
+            <h2>Introduction to Differential Privacy</h2>
+            <p>Differential Privacy (DP) is a mathematical framework that provides strong privacy guarantees when performing analyses on sensitive data. It ensures that the presence or absence of any single individual's data has a minimal effect on the output of an analysis.</p>
+            
+            <h3>Why is Differential Privacy Important?</h3>
+            <p>Traditional anonymization techniques often fail to protect privacy. With enough auxiliary information, it's possible to re-identify individuals in supposedly "anonymized" datasets. Differential privacy addresses this by adding carefully calibrated noise to the analysis process.</p>
+            
+            <div class="concept-highlight">
+                <h4>Key Insight</h4>
+                <p>Differential privacy creates plausible deniability. By adding controlled noise, it becomes mathematically impossible to confidently determine whether any individual's data was used in the analysis.</p>
+            </div>
+            
+            <h3>The Privacy-Utility Trade-off</h3>
+            <p>There's an inherent trade-off between privacy and utility (accuracy) in DP. More privacy means more noise, which typically reduces accuracy. The challenge is finding the right balance for your specific application.</p>
+            
+            <div class="concept-box">
+                <div class="box1">
+                    <h4>Strong Privacy (Low ε)</h4>
+                    <ul>
+                        <li>More noise added</li>
+                        <li>Lower accuracy</li>
+                        <li>Better protection for sensitive data</li>
+                    </ul>
+                </div>
+                <div class="box2">
+                    <h4>Strong Utility (Higher ε)</h4>
+                    <ul>
+                        <li>Less noise added</li>
+                        <li>Higher accuracy</li>
+                        <li>Reduced privacy guarantees</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+        
+        <div id="dp-concepts-content" class="step-content">
+            <h2>Core Differential Privacy Concepts</h2>
+            
+            <h3>The Formal Definition</h3>
+            <p>A mechanism M is (ε,δ)-differentially private if for all neighboring datasets D and D' (differing in one record), and for all possible outputs S:</p>
+            <div class="formula">
+                P(M(D) ∈ S) ≤ e^ε × P(M(D') ∈ S) + δ
+            </div>
+            
+            <h3>Key Parameters</h3>
+            <p><strong>ε (epsilon)</strong>: The privacy budget. Lower values mean stronger privacy but typically lower utility.</p>
+            <p><strong>δ (delta)</strong>: The probability of the privacy guarantee being broken. Usually set very small (e.g., 10^-5).</p>
+            
+            <h3>Differential Privacy Mechanisms</h3>
+            <p><strong>Laplace Mechanism</strong>: Adds noise from a Laplace distribution to numeric queries.</p>
+            <p><strong>Gaussian Mechanism</strong>: Adds noise from a Gaussian (normal) distribution. This is used in DP-SGD.</p>
+            <p><strong>Exponential Mechanism</strong>: Used for non-numeric outputs, selects an output based on a probability distribution.</p>
+            
+            <h3>Privacy Accounting</h3>
+            <p>When you apply multiple differentially private operations, the privacy loss (ε) accumulates. This is known as composition.</p>
+            <p>Advanced composition theorems and privacy accountants help track the total privacy spend.</p>
+        </div>
+        
+        <div id="sgd-basics-content" class="step-content">
+            <h2>Stochastic Gradient Descent Refresher</h2>
+            
+            <h3>Standard SGD</h3>
+            <p>Stochastic Gradient Descent (SGD) is an optimization algorithm used to train machine learning models by iteratively updating parameters based on gradients computed from mini-batches of data.</p>
+            
+            <h3>The Basic Update Rule</h3>
+            <p>The standard SGD update for a batch B is:</p>
+            <div class="formula">
+                θ ← θ - η∇L(θ; B)
+            </div>
+            <p>Where:</p>
+            <ul>
+                <li>θ represents the model parameters</li>
+                <li>η is the learning rate</li>
+                <li>∇L(θ; B) is the average gradient of the loss over the batch B</li>
+            </ul>
+            
+            <h3>Privacy Concerns with Standard SGD</h3>
+            <p>Standard SGD can leak information about individual training examples through the gradients. For example:</p>
+            <ul>
+                <li>Gradients might be larger for outliers or unusual examples</li>
+                <li>Model memorization of sensitive data can be extracted through attacks</li>
+                <li>Gradient values can be used in reconstruction attacks</li>
+            </ul>
+            
+            <p>These privacy concerns motivate the need for differentially private training methods.</p>
+        </div>
+        
+        <div id="dpsgd-intro-content" class="step-content">
+            <h2>DP-SGD: Core Modifications</h2>
+            
+            <h3>How DP-SGD Differs from Standard SGD</h3>
+            <p>Differentially Private SGD modifies standard SGD in two key ways:</p>
+            
+            <div class="concept-box">
+                <div class="box1">
+                    <h4>1. Per-Sample Gradient Clipping</h4>
+                    <p>Compute gradients for each example individually, then clip their L2 norm to a threshold C.</p>
+                    <p>This limits the influence of any single training example on the model update.</p>
+                </div>
+                
+                <div class="box2">
+                    <h4>2. Noise Addition</h4>
+                    <p>Add Gaussian noise to the sum of clipped gradients before applying the update.</p>
+                    <p>The noise scale is proportional to the clipping threshold and the noise multiplier.</p>
+                </div>
+            </div>
+            
+            <h3>The DP-SGD Update Rule</h3>
+            <p>The DP-SGD update can be summarized as:</p>
+            <ol>
+                <li>Compute per-sample gradients: g<sub>i</sub> = ∇L(θ; x<sub>i</sub>)</li>
+                <li>Clip each gradient: g̃<sub>i</sub> = g<sub>i</sub> × min(1, C/||g<sub>i</sub>||<sub>2</sub>)</li>
+                <li>Add noise: ḡ = (1/|B|) × (∑g̃<sub>i</sub> + N(0, σ²C²I))</li>
+                <li>Update parameters: θ ← θ - η × ḡ</li>
+            </ol>
+            
+            <p>Where:</p>
+            <ul>
+                <li>C is the clipping norm</li>
+                <li>σ is the noise multiplier</li>
+                <li>B is the batch</li>
+            </ul>
+        </div>
+        
+        <div id="parameters-content" class="step-content">
+            <h2>Hyperparameter Deep Dive</h2>
+            
+            <p>DP-SGD introduces several new hyperparameters that need to be tuned carefully:</p>
+            
+            <h3>Clipping Norm (C)</h3>
+            <p>The maximum allowed L2 norm for any individual gradient.</p>
+            <ul>
+                <li><strong>Too small:</strong> Gradients are over-clipped, limiting learning</li>
+                <li><strong>Too large:</strong> Requires more noise to achieve the same privacy guarantee</li>
+                <li><strong>Typical range:</strong> 0.1 to 10.0, depending on the dataset and model</li>
+            </ul>
+            
+            <h3>Noise Multiplier (σ)</h3>
+            <p>Controls the amount of noise added to the gradients.</p>
+            <ul>
+                <li><strong>Higher σ:</strong> Better privacy, worse utility</li>
+                <li><strong>Lower σ:</strong> Better utility, worse privacy</li>
+                <li><strong>Typical range:</strong> 0.5 to 2.0 for most practical applications</li>
+            </ul>
+            
+            <h3>Batch Size</h3>
+            <p>Affects both training dynamics and privacy accounting.</p>
+            <ul>
+                <li><strong>Larger batches:</strong> Reduce variance from noise, but change sampling probability</li>
+                <li><strong>Smaller batches:</strong> More update steps, potentially consuming more privacy budget</li>
+                <li><strong>Typical range:</strong> 64 to 1024, larger than standard SGD</li>
+            </ul>
+            
+            <h3>Learning Rate (η)</h3>
+            <p>May need adjustment compared to non-private training.</p>
+            <ul>
+                <li><strong>DP-SGD often requires:</strong> Lower learning rates or careful scheduling</li>
+                <li><strong>Reason:</strong> Added noise can destabilize training with high learning rates</li>
+            </ul>
+            
+            <h3>Number of Epochs</h3>
+            <p>More epochs consume more privacy budget.</p>
+            <ul>
+                <li><strong>Trade-off:</strong> More training vs. privacy budget consumption</li>
+                <li><strong>Early stopping:</strong> Often beneficial for balancing accuracy and privacy</li>
+            </ul>
+        </div>
+        
+        <div id="privacy-accounting-content" class="step-content">
+            <h2>Privacy Accounting</h2>
+            
+            <h3>Tracking Privacy Budget</h3>
+            <p>Privacy accounting is the process of keeping track of the total privacy loss (ε) throughout training.</p>
+            
+            <h3>Common Methods</h3>
+            <div style="display: flex; flex-direction: column; gap: 15px; margin: 15px 0;">
+                <div class="concept-highlight">
+                    <h4>Moment Accountant</h4>
+                    <p>Used in the original DP-SGD paper, provides tight bounds on the privacy loss.</p>
+                    <p>Tracks the moments of the privacy loss random variable.</p>
+                </div>
+                
+                <div class="concept-highlight">
+                    <h4>Rényi Differential Privacy (RDP)</h4>
+                    <p>Alternative accounting method based on Rényi divergence.</p>
+                    <p>Often used in modern implementations like TensorFlow Privacy and Opacus.</p>
+                </div>
+                
+                <div class="concept-highlight">
+                    <h4>Analytical Gaussian Mechanism</h4>
+                    <p>Simpler method for specific mechanisms like the Gaussian Mechanism.</p>
+                    <p>Less tight bounds but easier to compute.</p>
+                </div>
+            </div>
+            
+            <h3>Privacy Budget Allocation</h3>
+            <p>With a fixed privacy budget (ε), you must decide how to allocate it:</p>
+            <ul>
+                <li><strong>Fixed noise, variable epochs:</strong> Set noise level, train until budget is exhausted</li>
+                <li><strong>Fixed epochs, variable noise:</strong> Set desired epochs, calculate required noise</li>
+                <li><strong>Advanced techniques:</strong> Privacy filters, odometers, and adaptive mechanisms</li>
+            </ul>
+            
+            <h3>Practical Implementation</h3>
+            <p>In practice, privacy accounting is handled by libraries like:</p>
+            <ul>
+                <li>TensorFlow Privacy</li>
+                <li>PyTorch Opacus</li>
+                <li>Diffprivlib (IBM)</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const steps = document.querySelectorAll('.learning-step');
+    steps.forEach(step => {
+        step.addEventListener('click', () => {
+            // Remove active class from all steps
+            steps.forEach(s => s.classList.remove('active'));
+            // Add active class to clicked step
+            step.classList.add('active');
+            
+            // Hide all content
+            document.querySelectorAll('.step-content').forEach(content => {
+                content.classList.remove('active');
+            });
+            
+            // Show selected content
+            const stepName = step.getAttribute('data-step');
+            document.getElementById(`${stepName}-content`).classList.add('active');
+        });
+    });
+});
+</script>
+{% endblock %} 

app/training/__init__.py

@@ -0,0 +1,4 @@
+"""
+Training module for DP-SGD Explorer.
+Contains mock trainer and privacy calculator implementations.
+""" 

app/training/mock_trainer.py

@@ -0,0 +1,187 @@
+import numpy as np
+import time
+from typing import Dict, List, Any
+
+class MockTrainer:
+    def __init__(self):
+        self.base_accuracy = 0.95  # Base accuracy for non-private training
+        self.base_loss = 0.15      # Base loss for non-private training
+        
+    def train(self, params: Dict[str, Any]) -> Dict[str, Any]:
+        """
+        Simulate DP-SGD training with given parameters.
+        
+        Args:
+            params: Dictionary containing training parameters:
+                - clipping_norm: float
+                - noise_multiplier: float
+                - batch_size: int
+                - learning_rate: float
+                - epochs: int
+                
+        Returns:
+            Dictionary containing training results and metrics
+        """
+        # Extract parameters
+        clipping_norm = params['clipping_norm']
+        noise_multiplier = params['noise_multiplier']
+        batch_size = params['batch_size']
+        learning_rate = params['learning_rate']
+        epochs = params['epochs']
+        
+        # Calculate privacy impact on performance
+        privacy_factor = self._calculate_privacy_factor(clipping_norm, noise_multiplier)
+        
+        # Generate epoch-wise data
+        epochs_data = self._generate_epoch_data(epochs, privacy_factor)
+        
+        # Calculate final metrics
+        final_metrics = self._calculate_final_metrics(epochs_data, privacy_factor)
+        
+        # Generate recommendations
+        recommendations = self._generate_recommendations(params, final_metrics)
+        
+        # Generate gradient information
+        gradient_info = {
+            'before_clipping': self.generate_gradient_norms(clipping_norm),
+            'after_clipping': self.generate_clipped_gradients(clipping_norm)
+        }
+        
+        return {
+            'epochs_data': epochs_data,
+            'final_metrics': final_metrics,
+            'recommendations': recommendations,
+            'gradient_info': gradient_info
+        }
+    
+    def _calculate_privacy_factor(self, clipping_norm: float, noise_multiplier: float) -> float:
+        """Calculate how much privacy mechanisms affect model performance."""
+        # Higher noise and stricter clipping reduce performance
+        return 1.0 - (0.3 * noise_multiplier + 0.2 * (1.0 / clipping_norm))
+    
+    def _generate_epoch_data(self, epochs: int, privacy_factor: float) -> List[Dict[str, float]]:
+        """Generate realistic training metrics for each epoch."""
+        epochs_data = []
+        
+        # Base learning curve parameters
+        base_accuracy = self.base_accuracy * privacy_factor
+        base_loss = self.base_loss / privacy_factor
+        
+        for epoch in range(1, epochs + 1):
+            # Simulate learning curve with some randomness
+            progress = epoch / epochs
+            noise = np.random.normal(0, 0.02)  # Small random fluctuations
+            
+            accuracy = base_accuracy * (0.7 + 0.3 * progress) + noise
+            loss = base_loss * (1.2 - 0.2 * progress) + noise
+            
+            epochs_data.append({
+                'epoch': epoch,
+                'accuracy': max(0, min(1, accuracy)) * 100,  # Convert to percentage
+                'loss': max(0, loss)
+            })
+        
+        return epochs_data
+    
+    def _calculate_final_metrics(self, epochs_data: List[Dict[str, float]], privacy_factor: float) -> Dict[str, float]:
+        """Calculate final training metrics."""
+        final_epoch = epochs_data[-1]
+        
+        # Add some randomness to training time based on batch size and epochs
+        base_time = 0.5  # Base time in seconds
+        time_factor = (1.0 / privacy_factor) * (1.0 + np.random.normal(0, 0.1))
+        
+        return {
+            'accuracy': final_epoch['accuracy'],
+            'loss': final_epoch['loss'],
+            'training_time': base_time * time_factor
+        }
+    
+    def _generate_recommendations(self, params: Dict[str, Any], metrics: Dict[str, float]) -> List[Dict[str, str]]:
+        """Generate recommendations based on training results."""
+        recommendations = []
+        
+        # Check clipping norm
+        if params['clipping_norm'] < 0.5:
+            recommendations.append({
+                'icon': '⚠️',
+                'text': 'Clipping norm is very low. This might slow down learning.'
+            })
+        elif params['clipping_norm'] > 2.0:
+            recommendations.append({
+                'icon': '🔒',
+                'text': 'Consider reducing clipping norm for stronger privacy guarantees.'
+            })
+        
+        # Check noise multiplier
+        if params['noise_multiplier'] < 0.5:
+            recommendations.append({
+                'icon': '🔒',
+                'text': 'Noise multiplier is low. Consider increasing it for better privacy.'
+            })
+        elif params['noise_multiplier'] > 2.0:
+            recommendations.append({
+                'icon': '⚠️',
+                'text': 'High noise multiplier might significantly impact model accuracy.'
+            })
+        
+        # Check batch size
+        if params['batch_size'] < 64:
+            recommendations.append({
+                'icon': '⚡',
+                'text': 'Small batch size might lead to noisy updates. Consider increasing it.'
+            })
+        elif params['batch_size'] > 256:
+            recommendations.append({
+                'icon': '🔍',
+                'text': 'Large batch size might reduce model generalization.'
+            })
+        
+        # Check learning rate
+        if params['learning_rate'] > 0.05:
+            recommendations.append({
+                'icon': '⚠️',
+                'text': 'High learning rate might destabilize training with DP-SGD.'
+            })
+        elif params['learning_rate'] < 0.001:
+            recommendations.append({
+                'icon': '⏳',
+                'text': 'Very low learning rate might slow down convergence.'
+            })
+        
+        # Check final metrics
+        if metrics['accuracy'] < 80:
+            recommendations.append({
+                'icon': '📉',
+                'text': 'Model accuracy is low. Consider adjusting privacy parameters.'
+            })
+        
+        return recommendations
+
+    def generate_gradient_norms(self, clipping_norm: float) -> List[Dict[str, float]]:
+        """Generate realistic gradient norms following a log-normal distribution."""
+        num_points = 100
+        gradients = []
+        
+        # Parameters for log-normal distribution
+        mu = np.log(clipping_norm) - 0.5
+        sigma = 0.8
+        
+        for _ in range(num_points):
+            # Generate log-normal distributed gradient norms
+            u1, u2 = np.random.random(2)
+            z = np.sqrt(-2.0 * np.log(u1)) * np.cos(2.0 * np.pi * u2)
+            norm = np.exp(mu + sigma * z)
+            
+            # Calculate density using kernel density estimation
+            density = np.exp(-(np.power(np.log(norm) - mu, 2) / (2 * sigma * sigma))) / (norm * sigma * np.sqrt(2 * np.pi))
+            density = 0.2 + 0.8 * (density / 0.8) + 0.1 * (np.random.random() - 0.5)
+            
+            gradients.append({'x': float(norm), 'y': float(density)})
+        
+        return sorted(gradients, key=lambda x: x['x'])
+
+    def generate_clipped_gradients(self, clipping_norm: float) -> List[Dict[str, float]]:
+        """Generate clipped versions of the gradient norms."""
+        original_gradients = self.generate_gradient_norms(clipping_norm)
+        return [{'x': min(g['x'], clipping_norm), 'y': g['y']} for g in original_gradients] 

app/training/privacy_calculator.py

@@ -0,0 +1,104 @@
+import numpy as np
+from typing import Dict, Any
+
+class PrivacyCalculator:
+    def __init__(self):
+        self.delta = 1e-5  # Standard delta value for DP guarantees
+        
+    def calculate_epsilon(self, params: Dict[str, Any]) -> float:
+        """
+        Calculate the privacy budget (ε) using the moment accountant method.
+        
+        Args:
+            params: Dictionary containing training parameters:
+                - clipping_norm: float
+                - noise_multiplier: float
+                - batch_size: int
+                - epochs: int
+                
+        Returns:
+            The calculated privacy budget (ε)
+        """
+        # Extract parameters
+        clipping_norm = params['clipping_norm']
+        noise_multiplier = params['noise_multiplier']
+        batch_size = params['batch_size']
+        epochs = params['epochs']
+        
+        # Calculate sampling rate (assuming MNIST dataset size of 60,000)
+        sampling_rate = batch_size / 60000
+        
+        # Calculate number of steps
+        steps = epochs * (1 / sampling_rate)
+        
+        # Calculate moments for different orders
+        orders = [1.25, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5, 5.0]
+        moments = [self._calculate_moment(order, sampling_rate, noise_multiplier) for order in orders]
+        
+        # Find the minimum ε that satisfies all moment bounds
+        epsilon = float('inf')
+        for moment in moments:
+            # Convert moment bound to (ε,δ)-DP bound
+            moment_epsilon = moment + np.log(1/self.delta) / (orders[0] - 1)
+            epsilon = min(epsilon, moment_epsilon)
+        
+        # Add some randomness to make it more realistic
+        epsilon *= (1 + np.random.normal(0, 0.05))
+        
+        return max(0.1, epsilon)  # Ensure ε is at least 0.1
+    
+    def _calculate_moment(self, order: float, sampling_rate: float, noise_multiplier: float) -> float:
+        """
+        Calculate the moment bound for a given order.
+        
+        Args:
+            order: The moment order
+            sampling_rate: The probability of sampling each example
+            noise_multiplier: The noise multiplier used in DP-SGD
+            
+        Returns:
+            The calculated moment bound
+        """
+        # Simplified moment calculation based on the moment accountant method
+        # This is a simplified version that captures the key relationships
+        c = np.sqrt(2 * np.log(1.25 / self.delta))
+        moment = (order * sampling_rate * c) / noise_multiplier
+        
+        # Add some non-linear effects
+        moment *= (1 + 0.1 * np.sin(order))
+        
+        return moment
+    
+    def calculate_optimal_noise(self, target_epsilon: float, params: Dict[str, Any]) -> float:
+        """
+        Calculate the optimal noise multiplier for a target privacy budget.
+        
+        Args:
+            target_epsilon: The desired privacy budget
+            params: Dictionary containing training parameters:
+                - clipping_norm: float
+                - batch_size: int
+                - epochs: int
+                
+        Returns:
+            The calculated optimal noise multiplier
+        """
+        # Extract parameters
+        clipping_norm = params['clipping_norm']
+        batch_size = params['batch_size']
+        epochs = params['epochs']
+        
+        # Calculate sampling rate
+        sampling_rate = batch_size / 60000
+        
+        # Calculate number of steps
+        steps = epochs * (1 / sampling_rate)
+        
+        # Calculate optimal noise using the analytical Gaussian mechanism
+        c = np.sqrt(2 * np.log(1.25 / self.delta))
+        optimal_noise = (c * sampling_rate * np.sqrt(steps)) / target_epsilon
+        
+        # Add some randomness to make it more realistic
+        optimal_noise *= (1 + np.random.normal(0, 0.05))
+        
+        return max(0.1, optimal_noise)  # Ensure noise is at least 0.1 

complete-dpsgd-explorer.html

@@ -1,1654 +0,0 @@
-                <div id="recommendations-tab" class="tab-content">
-                  <h3 style="margin-top: 0; margin-bottom: 1rem; font-size: 1rem;">Recommendations</h3>
-                  <ul class="recommendation-list">
-                    <li class="recommendation-item">
-                      <span class="recommendation-icon">👍</span>
-                      <span>Current configuration seems well-balanced. Experiment with small parameter changes to optimize further.</span>
-                    </li>
-                    <li class="recommendation-item">
-                      <span class="recommendation-icon">🔍</span>
-                      <span>Try increasing the clipping norm slightly to see if it improves accuracy without significantly affecting privacy.</span>
-                    </li>
-                    <li class="recommendation-item">
-                      <span class="recommendation-icon">⚙️</span>
-                      <span>Consider increasing batch size to stabilize training with the current noise level.</span>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <!-- Learning Hub Section (hidden initially) -->
-      <div id="learning-hub-section" style="display: none;">
-        <h1 class="section-title">Learning Hub</h1>
-        
-        <div class="learning-container">
-          <div class="learning-sidebar">
-            <h2 class="panel-title">DP-SGD Concepts</h2>
-            <ul class="learning-steps">
-              <li class="learning-step active" data-step="intro">Introduction to Differential Privacy</li>
-              <li class="learning-step" data-step="dp-concepts">Core DP Concepts</li>
-              <li class="learning-step" data-step="sgd-basics">SGD Refresher</li>
-              <li class="learning-step" data-step="dpsgd-intro">DP-SGD: Core Modifications</li>
-              <li class="learning-step" data-step="parameters">Hyperparameter Deep Dive</li>
-              <li class="learning-step" data-step="privacy-accounting">Privacy Accounting</li>
-            </ul>
-          </div>
-          
-          <div class="learning-content">
-            <div id="intro-content" class="step-content active">
-              <h2>Introduction to Differential Privacy</h2>
-              <p>Differential Privacy (DP) is a mathematical framework that provides strong privacy guarantees when performing analyses on sensitive data. It ensures that the presence or absence of any single individual's data has a minimal effect on the output of an analysis.</p>
-              
-              <h3>Why is Differential Privacy Important?</h3>
-              <p>Traditional anonymization techniques often fail to protect privacy. With enough auxiliary information, it's possible to re-identify individuals in supposedly "anonymized" datasets. Differential privacy addresses this by adding carefully calibrated noise to the analysis process.</p>
-              
-              <div class="concept-highlight">
-                <h4>Key Insight</h4>
-                <p>Differential privacy creates plausible deniability. By adding controlled noise, it becomes mathematically impossible to confidently determine whether any individual's data was used in the analysis.</p>
-              </div>
-              
-              <h3>The Privacy-Utility Trade-off</h3>
-              <p>There's an inherent trade-off between privacy and utility (accuracy) in DP. More privacy means more noise, which typically reduces accuracy. The challenge is finding the right balance for your specific application.</p>
-              
-              <div class="concept-box">
-                <div class="box1">
-                  <h4>Strong Privacy (Low ε)</h4>
-                  <ul>
-                    <li>More noise added</li>
-                    <li>Lower accuracy</li>
-                    <li>Better protection for sensitive data</li>
-                  </ul>
-                </div>
-                <div class="box2">
-                  <h4>Strong Utility (Higher ε)</h4>
-                  <ul>
-                    <li>Less noise added</li>
-                    <li>Higher accuracy</li>
-                    <li>Reduced privacy guarantees</li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-            
-            <div id="dp-concepts-content" class="step-content">
-              <h2>Core Differential Privacy Concepts</h2>
-              
-              <h3>The Formal Definition</h3>
-              <p>A mechanism M is (ε,δ)-differentially private if for all neighboring datasets D and D' (differing in one record), and for all possible outputs S:</p>
-              <div class="formula">
-                P(M(D) ∈ S) ≤ e^ε × P(M(D') ∈ S) + δ
-              </div>
-              
-              <h3>Key Parameters</h3>
-              <p><strong>ε (epsilon)</strong>: The privacy budget. Lower values mean stronger privacy but typically lower utility.</p>
-              <p><strong>δ (delta)</strong>: The probability of the privacy guarantee being broken. Usually set very small (e.g., 10^-5).</p>
-              
-              <h3>Differential Privacy Mechanisms</h3>
-              <p><strong>Laplace Mechanism</strong>: Adds noise from a Laplace distribution to numeric queries.</p>
-              <p><strong>Gaussian Mechanism</strong>: Adds noise from a Gaussian (normal) distribution. This is used in DP-SGD.</p>
-              <p><strong>Exponential Mechanism</strong>: Used for non-numeric outputs, selects an output based on a probability distribution.</p>
-              
-              <h3>Privacy Accounting</h3>
-              <p>When you apply multiple differentially private operations, the privacy loss (ε) accumulates. This is known as composition.</p>
-              <p>Advanced composition theorems and privacy accountants help track the total privacy spend.</p>
-            </div>
-            
-            <div id="sgd-basics-content" class="step-content">
-              <h2>Stochastic Gradient Descent Refresher</h2>
-              
-              <h3>Standard SGD</h3>
-              <p>Stochastic Gradient Descent (SGD) is an optimization algorithm used to train machine learning models by iteratively updating parameters based on gradients computed from mini-batches of data.</p>
-              
-              <h3>The Basic Update Rule</h3>
-              <p>The standard SGD update for a batch B is:</p>
-              <div class="formula">
-                θ ← θ - η∇L(θ; B)
-              </div>
-              <p>Where:</p>
-              <ul>
-                <li>θ represents the model parameters</li>
-                <li>η is the learning rate</li>
-                <li>∇L(θ; B) is the average gradient of the loss over the batch B</li>
-              </ul>
-              
-              <h3>Privacy Concerns with Standard SGD</h3>
-              <p>Standard SGD can leak information about individual training examples through the gradients. For example:</p>
-              <ul>
-                <li>Gradients might be larger for outliers or unusual examples</li>
-                <li>Model memorization of sensitive data can be extracted through attacks</li>
-                <li>Gradient values can be used in reconstruction attacks</li>
-              </ul>
-              
-              <p>These privacy concerns motivate the need for differentially private training methods.</p>
-            </div>
-            
-            <div id="dpsgd-intro-content" class="step-content">
-              <h2>DP-SGD: Core Modifications</h2>
-              
-              <h3>How DP-SGD Differs from Standard SGD</h3>
-              <p>Differentially Private SGD modifies standard SGD in two key ways:</p>
-              
-              <div class="concept-box">
-                <div class="box1">
-                  <h4>1. Per-Sample Gradient Clipping</h4>
-                  <p>Compute gradients for each example individually, then clip their L2 norm to a threshold C.</p>
-                  <p>This limits the influence of any single training example on the model update.</p>
-                </div>
-                
-                <div class="box2">
-                  <h4>2. Noise Addition</h4>
-                  <p>Add Gaussian noise to the sum of clipped gradients before applying the update.</p>
-                  <p>The noise scale is proportional to the clipping threshold and the noise multiplier.</p>
-                </div>
-              </div>
-              
-              <h3>The DP-SGD Update Rule</h3>
-              <p>The DP-SGD update can be summarized as:</p>
-              <ol>
-                <li>Compute per-sample gradients: g<sub>i</sub> = ∇L(θ; x<sub>i</sub>)</li>
-                <li>Clip each gradient: g̃<sub>i</sub> = g<sub>i</sub> × min(1, C/||g<sub>i</sub>||<sub>2</sub>)</li>
-                <li>Add noise: ḡ = (1/|B|) × (∑g̃<sub>i</sub> + N(0, σ²C²I))</li>
-                <li>Update parameters: θ ← θ - η × ḡ</li>
-              </ol>
-              
-              <p>Where:</p>
-              <ul>
-                <li>C is the clipping norm</li>
-                <li>σ is the noise multiplier</li>
-                <li>B is the batch</li>
-              </ul>
-            </div>
-            
-            <div id="parameters-content" class="step-content">
-              <h2>Hyperparameter Deep Dive</h2>
-              
-              <p>DP-SGD introduces several new hyperparameters that need to be tuned carefully:</p>
-              
-              <h3>Clipping Norm (C)</h3>
-              <p>The maximum allowed L2 norm for any individual gradient.</p>
-              <ul>
-                <li><strong>Too small:</strong> Gradients are over-clipped, limiting learning</li>
-                <li><strong>Too large:</strong> Requires more noise to achieve the same privacy guarantee</li>
-                <li><strong>Typical range:</strong> 0.1 to 10.0, depending on the dataset and model</li>
-              </ul>
-              
-              <h3>Noise Multiplier (σ)</h3>
-              <p>Controls the amount of noise added to the gradients.</p>
-              <ul>
-                <li><strong>Higher σ:</strong> Better privacy, worse utility</li>
-                <li><strong>Lower σ:</strong> Better utility, worse privacy</li>
-                <li><strong>Typical range:</strong> 0.5 to 2.0 for most practical applications</li>
-              </ul>
-              
-              <h3>Batch Size</h3>
-              <p>Affects both training dynamics and privacy accounting.</p>
-              <ul>
-                <li><strong>Larger batches:</strong> Reduce variance from noise, but change sampling probability</li>
-                <li><strong>Smaller batches:</strong> More update steps, potentially consuming more privacy budget</li>
-                <li><strong>Typical range:</strong> 64 to 1024, larger than standard SGD</li>
-              </ul>
-              
-              <h3>Learning Rate (η)</h3>
-              <p>May need adjustment compared to non-private training.</p>
-              <ul>
-                <li><strong>DP-SGD often requires:</strong> Lower learning rates or careful scheduling</li>
-                <li><strong>Reason:</strong> Added noise can destabilize training with high learning rates</li>
-              </ul>
-              
-              <h3>Number of Epochs</h3>
-              <p>More epochs consume more privacy budget.</p>
-              <ul>
-                <li><strong>Trade-off:</strong> More training vs. privacy budget consumption</li>
-                <li><strong>Early stopping:</strong> Often beneficial for balancing accuracy and privacy</li>
-              </ul>
-            </div>
-            
-            <div id="privacy-accounting-content" class="step-content">
-              <h2>Privacy Accounting</h2>
-              
-              <h3>Tracking Privacy Budget</h3>
-              <p>Privacy accounting is the process of keeping track of the total privacy loss (ε) throughout training.</p>
-              
-              <h3>Common Methods</h3>
-              <div style="display: flex; flex-direction: column; gap: 15px; margin: 15px 0;">
-                <div class="concept-highlight">
-                  <h4>Moment Accountant</h4>
-                  <p>Used in the original DP-SGD paper, provides tight bounds on the privacy loss.</p>
-                  <p>Tracks the moments of the privacy loss random variable.</p>
-                </div>
-                
-                <div class="concept-highlight">
-                  <h4>Rényi Differential Privacy (RDP)</h4>
-                  <p>Alternative accounting method based on Rényi divergence.</p>
-                  <p>Often used in modern implementations like TensorFlow Privacy and Opacus.</p>
-                </div>
-                
-                <div class="concept-highlight">
-                  <h4>Analytical Gaussian Mechanism</h4>
-                  <p>Simpler method for specific mechanisms like the Gaussian Mechanism.</p>
-                  <p>Less tight bounds but easier to compute.</p>
-                </div>
-              </div>
-              
-              <h3>Privacy Budget Allocation</h3>
-              <p>With a fixed privacy budget (ε), you must decide how to allocate it:</p>
-              <ul>
-                <li><strong>Fixed noise, variable epochs:</strong> Set noise level, train until budget is exhausted</li>
-                <li><strong>Fixed epochs, variable noise:</strong> Set desired epochs, calculate required noise</li>
-                <li><strong>Advanced techniques:</strong> Privacy filters, odometers, and adaptive mechanisms</li>
-              </ul>
-              
-              <h3>Practical Implementation</h3>
-              <p>In practice, privacy accounting is handled by libraries like:</p>
-              <ul>
-                <li>TensorFlow Privacy</li>
-                <li>PyTorch Opacus</li>
-                <li>Diffprivlib (IBM)</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-    
-    <footer class="footer">
-      <p>DP-SGD Explorer - An Educational Tool for Differential Privacy in Machine Learning</p>
-      <p>© 2023 - For educational purposes</p>
-    </footer>
-  </div>
-
-  <script>
-    // Load Chart.js library dynamically
-    (function loadScript() {
-      const script = document.createElement('script');
-      script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
-      script.onload = function() {
-        // Initialize the app after Chart.js loads
-        initializeApp();
-      };
-      script.onerror = function() {
-        alert('Failed to load Chart.js. Please check your internet connection.');
-      };
-      document.head.appendChild(script);
-    })();
-
-    function initializeApp() {
-      // Navigation
-      const navLearning = document.getElementById('nav-learning');
-      const navPlayground = document.getElementById('nav-playground');
-      const learningSection = document.getElementById('learning-hub-section');
-      const playgroundSection = document.getElementById('playground-section');
-      
-      navLearning.addEventListener('click', function() {
-        navLearning.classList.add('active');
-        navPlayground.classList.remove('active');
-        learningSection.style.display = 'block';
-        playgroundSection.style.display = 'none';
-      });
-      
-      navPlayground.addEventListener('click', function() {
-        navPlayground.classList.add('active');
-        navLearning.classList.remove('active');
-        playgroundSection.style.display = 'block';
-        learningSection.style.display = 'none';
-      });
-      
-      // Tabs in Playground
-      const tabs = document.querySelectorAll('.tab');
-      tabs.forEach(tab => {
-        tab.addEventListener('click', function() {
-          // Get parent tabs container
-          const tabsContainer = this.closest('.tabs');
-          // Remove active class from all sibling tabs
-          tabsContainer.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-          // Add active class to clicked tab
-          this.classList.add('active');
-          
-          // Handle tab content
-          const tabName = this.getAttribute('data-tab');
-          const panel = this.closest('.panel');
-          panel.querySelectorAll('.tab-content').forEach(content => {
-            content.classList.remove('active');
-          });
-          
-          // Find the tab content in the panel
-          panel.querySelector(`#${tabName}-tab`)?.classList.add('active');
-        });
-      });
-      
-      // Learning Hub Steps
-      const learningSteps = document.querySelectorAll('.learning-step');
-      learningSteps.forEach(step => {
-        step.addEventListener('click', function() {
-          // Remove active class from all steps
-          learningSteps.forEach(s => s.classList.remove('active'));
-          // Add active class to clicked step
-          this.classList.add('active');
-          
-          // Handle step content
-          const stepName = this.getAttribute('data-step');
-          document.querySelectorAll('.step-content').forEach(content => {
-            content.classList.remove('active');
-          });
-          document.getElementById(`${stepName}-content`).classList.add('active');
-        });
-      });
-      
-      // Parameter sliders
-      const clipNormSlider = document.getElementById('clipping-norm');
-      const clipNormValue = document.getElementById('clipping-norm-value');
-      const noiseMultiplierSlider = document.getElementById('noise-multiplier');
-      const noiseMultiplierValue = document.getElementById('noise-multiplier-value');
-      const batchSizeSlider = document.getElementById('batch-size');
-      const batchSizeValue = document.getElementById('batch-size-value');
-      const learningRateSlider = document.getElementById('learning-rate');
-      const learningRateValue = document.getElementById('learning-rate-value');
-      const epochsSlider = document.getElementById('epochs');
-      const epochsValue = document.getElementById('epochs-value');
-      
-      // Update displayed values
-      clipNormSlider.addEventListener('input', function() {
-        clipNormValue.textContent = this.value;
-        updatePrivacyBudget();
-        
-        // Update gradient clipping visualization if visible
-        const gradientTab = document.getElementById('gradients-tab');
-        if (gradientTab.classList.contains('active')) {
-          const gradCanvas = document.getElementById('gradient-canvas');
-          const gradCtx = gradCanvas.getContext('2d');
-          drawGradientVisualization(gradCtx, parseFloat(this.value));
-        }
-      });
-      
-      noiseMultiplierSlider.addEventListener('input', function() {
-        noiseMultiplierValue.textContent = this.value;
-        updatePrivacyBudget();
-      });
-      
-      batchSizeSlider.addEventListener('input', function() {
-        batchSizeValue.textContent = this.value;
-        updatePrivacyBudget();
-      });
-      
-      learningRateSlider.addEventListener('input', function() {
-        learningRateValue.textContent = parseFloat(this.value).toFixed(3);
-      });
-      
-      epochsSlider.addEventListener('input', function() {
-        epochsValue.textContent = this.value;
-        updatePrivacyBudget();
-      });
-      
-      // Privacy budget calculation (simplified educational version)
-      function updatePrivacyBudget() {
-        const clipNorm = parseFloat(clipNormSlider.value);
-        const noiseMultiplier = parseFloat(noiseMultiplierSlider.value);
-        const batchSize = parseInt(batchSizeSlider.value);
-        const epochs = parseInt(epochsSlider.value);
-        
-        // Sample rate (percentage of dataset seen in each batch)
-        const sampleRate = batchSize / 60000; // Assuming MNIST size
-        
-        // Number of steps
-        const steps = epochs * (1 / sampleRate);
-        
-        // Simple formula for analytical Gaussian (simplified for educational purposes)
-        const delta = 1e-5; // Common delta value
-        const c = Math.sqrt(2 * Math.log(1.25 / delta));
-        let epsilon = (c * sampleRate * Math.sqrt(steps)) / noiseMultiplier;
-        epsilon = Math.min(epsilon, 10); // Cap at 10 for UI purposes
-        
-        // Update UI
-        const budgetValue = document.getElementById('budget-value');
-        const budgetFill = document.getElementById('budget-fill');
-        
-        budgetValue.textContent = epsilon.toFixed(2);
-        budgetFill.style.width = `${Math.min(epsilon / 10 * 100, 100)}%`;
-        
-        // Update class for coloring
-        budgetFill.classList.remove('low', 'medium', 'high');
-        if (epsilon <= 1) {
-          budgetFill.classList.add('low');
-        } else if (epsilon <= 5) {
-          budgetFill.classList.add('medium');
-        } else {
-          budgetFill.classList.add('high');
-        }
-      }
-      
-      // Initialize charts
-      function initializeCharts() {
-        // Training chart (dummy data to start)
-        const trainingCtx = document.getElementById('training-chart').getContext('2d');
-        window.trainingChart = new Chart(trainingCtx, {
-          type: 'line',
-          data: {
-            labels: [],
-            datasets: [
-              {
-                label: 'Accuracy',
-                borderColor: '#4caf50',
-                data: [],
-                yAxisID: 'y'
-              },
-              {
-                label: 'Loss',
-                borderColor: '#f44336',
-                data: [],
-                yAxisID: 'y1'
-              }
-            ]
-          },
-          options: {
-            responsive: true,
-            interaction: {
-              mode: 'index',
-              intersect: false,
-            },
-            scales: {
-              y: {
-                type: 'linear',
-                display: true,
-                position: 'left',
-                title: {
-                  display: true,
-                  text: 'Accuracy (%)'
-                }
-              },
-              y1: {
-                type: 'linear',
-                display: true,
-                position: 'right',
-                title: {
-                  display: true,
-                  text: 'Loss'
-                },
-                grid: {
-                  drawOnChartArea: false,
-                },
-              }
-            }
-          }
-        });
-        
-        // Privacy budget chart (dummy data to start)
-        const privacyCtx = document.getElementById('privacy-chart').getContext('2d');
-        window.privacyChart = new Chart(privacyCtx, {
-          type: 'line',
-          data: {
-            labels: [],
-            datasets: [{
-              label: 'Privacy Budget (ε)',
-              borderColor: '#3f51b5',
-              data: []
-            }]
-          },
-          options: {
-            responsive: true,
-            scales: {
-              y: {
-                title: {
-                  display: true,
-                  text: 'Privacy Budget (ε)'
-                }
-              },
-              x: {
-                title: {
-                  display: true,
-                  text: 'Epoch'
-                }
-              }
-            }
-          }
-        });
-        
-        // Draw gradient clipping visualization
-        const gradCanvas = document.getElementById('gradient-canvas');
-        const gradCtx = gradCanvas.getContext('2d');
-        drawGradientVisualization(gradCtx, parseFloat(clipNormSlider.value));
-      }
-      
-      // Draw gradient clipping visualization
-      function drawGradientVisualization(ctx, clipNorm) {
-        const width = ctx.canvas.width;
-        const height = ctx.canvas.height;
-        const padding = { top: 20, right: 30, bottom: 40, left: 60 };
-        
-        // Clear canvas
-        ctx.clearRect(0, 0, width, height);
-        
-        // Draw axes
-        ctx.strokeStyle = '#ccc';
-        ctx.lineWidth = 1;
-        
-        // Y-axis
-        ctx.beginPath();
-        ctx.moveTo(padding.left, padding.top);
-        ctx.lineTo(padding.left, height - padding.bottom);
-        ctx.stroke();
-        
-        // X-axis
-        ctx.beginPath();
-        ctx.moveTo(padding.left, height - padding.bottom);
-        ctx.lineTo(width - padding.right, height - padding.bottom);
-        ctx.stroke();
-        
-        // Draw distribution curve - before clipping
-        ctx.beginPath();
-        ctx.moveTo(padding.left, height - padding.bottom);
-        
-        // Lognormal-like curve
-        const chartWidth = width - padding.left - padding.right;
-        const chartHeight = height - padding.top - padding.bottom;
-        
-        for (let i = 0; i < chartWidth; i++) {
-          const x = padding.left + i;
-          const xValue = (i / chartWidth) * 10; // Scale to 0-10 range
-          
-          // Lognormal-ish function
-          let y = Math.exp(-Math.pow(Math.log(xValue + 0.1) - Math.log(clipNorm * 0.7), 2) / 0.5);
-          y = height - padding.bottom - y * chartHeight * 0.8;
-          
-          if (i === 0) {
-            ctx.moveTo(x, y);
-          } else {
-            ctx.lineTo(x, y);
-          }
-        }
-        
-        ctx.strokeStyle = '#ff9800';
-        ctx.lineWidth = 3;
-        ctx.stroke();
-        
-        // Calculate clipping threshold position
-        const clipX = padding.left + (clipNorm / 10) * chartWidth;
-        
-        // Draw clipping threshold line
-        ctx.beginPath();
-        ctx.moveTo(clipX, padding.top);
-        ctx.lineTo(clipX, height - padding.bottom);
-        ctx.strokeStyle = '#f44336';
-        ctx.lineWidth = 2;
-        ctx.setLineDash([5, 3]);
-        ctx.stroke();
-        ctx.setLineDash([]);
-        
-        // Add labels
-        ctx.fillStyle = '#333';
-        ctx.font = '12px Arial';
-        ctx.textAlign = 'center';
-        ctx.fillText('Gradient L2 Norm', width / 2, height - 5);
-        ctx.textAlign = 'left';
-        ctx.fillText(`Clipping Threshold (C = ${clipNorm})`, clipX + 5, padding.top + 15);
-        
-        // Draw clipped curve
-        ctx.beginPath();
-        ctx.moveTo(padding.left, height - padding.bottom);
-        
-        // Draw up to clipping threshold
-        for (let i = 0; i < chartWidth; i++) {
-          const x = padding.left + i;
-          const xValue = (i / chartWidth) * 10;
-          
-          if (x > clipX) break;
-          
-          // Same curve as before
-          let y = Math.exp(-Math.pow(Math.log(xValue + 0.1) - Math.log(clipNorm * 0.7), 2) / 0.5);
-          y = height - padding.bottom - y * chartHeight * 0.8;
-          
-          if (i === 0) {
-            ctx.moveTo(x, y);
-          } else {
-            ctx.lineTo(x, y);
-          }
-        }
-        
-        // Calculate y at clipping point
-        const clipY = height - padding.bottom - Math.exp(-Math.pow(Math.log(clipNorm + 0.1) - Math.log(clipNorm * 0.7), 2) / 0.5) * chartHeight * 0.8;
-        
-        // Draw horizontal line at clipping threshold
-        ctx.lineTo(clipX, clipY);
-        ctx.lineTo(width - padding.right, clipY);
-        
-        ctx.strokeStyle = '#4caf50';
-        ctx.lineWidth = 3;
-        ctx.stroke();
-        
-        // Legend
-        ctx.fillStyle = '#ff9800';
-        ctx.fillRect(padding.left, padding.top, 10, 10);
-        ctx.fillStyle = '#333';
-        ctx.textAlign = 'left';
-        ctx.fillText('Original Gradients', padding.left + 15, padding.top + 10);
-        
-        ctx.fillStyle = '#4caf50';
-        ctx.fillRect(padding.left, padding.top + 20, 10, 10);
-        ctx.fillStyle = '#333';
-        ctx.fillText('Clipped Gradients', padding.left + 15, padding.top + 30);
-      }
-      
-      // Train button functionality
-      const trainButton = document.getElementById('train-button');
-      trainButton.addEventListener('click', function() {
-        if (this.textContent.trim() === 'Run Training') {
-          startTraining();
-        } else {
-          stopTraining();
-        }
-      });
-      
-      // Presets
-      document.getElementById('preset-high-privacy').addEventListener('click', function() {
-        clipNormSlider.value = 1.0;
-        clipNormValue.textContent = 1.0;
-        noiseMultiplierSlider.value = 1.5;
-        noiseMultiplierValue.textContent = 1.5;
-        batchSizeSlider.value = 256;
-        batchSizeValue.textContent = 256;
-        learningRateSlider.value = 0.005;
-        learningRateValue.textContent = 0.005;
-        epochsSlider.value = 10;
-        epochsValue.textContent = 10;
-        updatePrivacyBudget();
-      });
-      
-      document.getElementById('preset-balanced').addEventListener('click', function() {
-        clipNormSlider.value = 1.0;
-        clipNormValue.textContent = 1.0;
-        noiseMultiplierSlider.value = 1.0;
-        noiseMultiplierValue.textContent = 1.0;
-        batchSizeSlider.value = 128;
-        batchSizeValue.textContent = 128;
-        learningRateSlider.value = 0.01;
-        learningRateValue.textContent = 0.01;
-        epochsSlider.value = 8;
-        epochsValue.textContent = 8;
-        updatePrivacyBudget();
-      });
-      
-      document.getElementById('preset-high-utility').addEventListener('click', function() {
-        clipNormSlider.value = 1.5;
-        clipNormValue.textContent = 1.5;
-        noiseMultiplierSlider.value = 0.5;
-        noiseMultiplierValue.textContent = 0.5;
-        batchSizeSlider.value = 64;
-        batchSizeValue.textContent = 64;
-        learningRateSlider.value = 0.02;
-        learningRateValue.textContent = 0.02;
-        epochsSlider.value = 5;
-        epochsValue.textContent = 5;
-        updatePrivacyBudget();
-      });
-      
-      // Simulated training
-      let trainingInterval;
-      let currentEpoch = 0;
-      const totalEpochs = () => parseInt(epochsSlider.value);
-      
-      function startTraining() {
-        // Update UI
-        trainButton.textContent = 'Stop Training';
-        trainButton.classList.add('running');
-        document.getElementById('training-status').style.display = 'flex';
-        document.getElementById('total-epochs').textContent = totalEpochs();
-        
-        // Reset training data
-        currentEpoch = 0;
-        const epochs = Array.from({length: totalEpochs()}, (_, i) => i + 1);
-        
-        // Reset charts
-        window.trainingChart.data.labels = epochs;
-        window.trainingChart.data.datasets[0].data = [];
-        window.trainingChart.data.datasets[1].data = [];
-        window.trainingChart.update();
-        
-        window.privacyChart.data.labels = epochs;
-        window.privacyChart.data.datasets[0].data = [];
-        window.privacyChart.update();
-        
-        // Start training simulation
-        trainingInterval = setInterval(simulateEpoch, 1000);
-      }
-      
-      function stopTraining() {
-        clearInterval(trainingInterval);
-        trainButton.textContent = 'Run Training';
-        trainButton.classList.remove('running');
-        document.getElementById('training-status').style.display = 'none';
-      }
-      
-      function simulateEpoch() {
-        if (currentEpoch >= totalEpochs()) {
-          // Training complete
-          stopTraining();
-          showResults();
-          return;
-        }
-        
-        // Update epoch counter
-        currentEpoch++;
-        document.getElementById('current-epoch').textContent = currentEpoch;
-        
-        // Get parameters
-        const noiseMultiplier = parseFloat(noiseMultiplierSlider.value);
-        const clipNorm = parseFloat(clipNormSlider.value);
-        
-        // Calculate simulated metrics
-        const baseAccuracy = 0.75;
-        const noisePenalty = noiseMultiplier * 0.05;
-        const clipPenalty = Math.abs(1.0 - clipNorm) * 0.03;
-        const epochBonus = Math.min(currentEpoch * 0.05, 0.15);
-        
-        // Calculate accuracy with some randomness
-        const accuracy = Math.min(
-          0.98,
-          baseAccuracy - noisePenalty - clipPenalty + epochBonus + (Math.random() * 0.02)
-        );
-        
-        // Calculate loss
-        const loss = Math.max(0.1, 1.0 - accuracy + (Math.random() * 0.05));
-        
-        // Calculate privacy budget
-        const batchSize = parseInt(batchSizeSlider.value);
-        const samplingRate = batchSize / 60000;
-        const steps = currentEpoch * (1 / samplingRate);
-        const delta = 1e-5;
-        const c = Math.sqrt(2 * Math.log(1.25 / delta));
-        const epsilon = (c * samplingRate * Math.sqrt(steps)) / noiseMultiplier;
-        
-        // Update charts
-        window.trainingChart.data.datasets[0].data.push(accuracy * 100);
-        window.trainingChart.data.datasets[1].data.push(loss);
-        window.trainingChart.update();
-        
-        window.privacyChart.data.datasets[0].data.push(epsilon);
-        window.privacyChart.update();
-        
-        // If this is the last epoch, show results
-        if (currentEpoch >= totalEpochs()) {
-          stopTraining();
-          showResults();
-        }
-      }
-      
-      function showResults() {
-        // Hide no-results message and show results content
-        document.getElementById('no-results').style.display = 'none';
-        document.getElementById('results-content').style.display = 'block';
-        
-        // Get final values from the charts
-        const accuracy = window.trainingChart.data.datasets[0].data[window.trainingChart.data.datasets[0].data.length - 1];
-        const loss = window.trainingChart.data.datasets[1].data[window.trainingChart.data.datasets[1].data.length - 1];
-        const privacyBudget = window.privacyChart.data.datasets[0].data[window.privacyChart.data.datasets[0].data.length - 1];
-        
-        // Update results display
-        document.getElementById('accuracy-value').textContent = accuracy.toFixed(1) + '%';
-        document.getElementById('loss-value').textContent = loss.toFixed(3);
-        document.getElementById('privacy-budget-value').textContent = 'ε = ' + privacyBudget.toFixed(2);
-        document.getElementById('training-time-value').textContent = (totalEpochs() * 0.8).toFixed(1) + 's';
-        
-        // Update trade-off explanation
-        const tradeoffExplanation = document.getElementById('tradeoff-explanation');
-        let explanationText = `This model achieved ${accuracy.toFixed(1)}% accuracy with a privacy budget of ε=${privacyBudget.toFixed(2)}.`;
-        
-        if (accuracy > 90 && privacyBudget < 3) {
-          explanationText += " This is an excellent balance of privacy and utility.";
-        } else if (accuracy > 85 && privacyBudget < 5) {
-          explanationText += " This is a good trade-off for most applications.";
-        } else if (accuracy > 80) {
-          explanationText += " Consider if this level of privacy is sufficient for your use case.";
-        } else {
-          explanationText += " You may want to adjust parameters to improve accuracy while maintaining privacy.";
-        }
-        
-        tradeoffExplanation.textContent = explanationText;
-        
-        // Generate recommendations
-        const recommendationList = document.querySelector('.recommendation-list');
-        recommendationList.innerHTML = '';
-        
-        // Based on current parameters
-        if (accuracy < 70) {
-          addRecommendation('⚠️', 'Accuracy is low. Consider decreasing noise multiplier or increasing the number of epochs.');
-        }
-        
-        if (privacyBudget > 8) {
-          addRecommendation('🔓', 'Privacy budget is high. Consider increasing noise multiplier or reducing epochs for stronger privacy.');
-        } else if (privacyBudget < 1 && accuracy < 85) {
-          addRecommendation('🔒', 'Very strong privacy may be limiting accuracy. Consider a slight increase in privacy budget.');
-        }
-        
-        if (parseFloat(clipNormSlider.value) < 0.5) {
-          addRecommendation('✂️', 'Clipping norm is very low. This might be over-clipping gradients and limiting learning.');
-        }
-        
-        if (parseInt(batchSizeSlider.value) < 32) {
-          addRecommendation('📊', 'Small batch size can make training with DP-SGD unstable. Consider increasing batch size.');
-        }
-        
-        // Add generic recommendation if none were added
-        if (recommendationList.children.length === 0) {
-          addRecommendation('👍', 'Current configuration seems well-balanced. Experiment with small parameter changes to optimize further.');
-        }
-      }
-      
-      function addRecommendation(icon, text) {
-        const recommendationList = document.querySelector('.recommendation-list');
-        const item = document.createElement('li');
-        item.className = 'recommendation-item';
-        item.innerHTML = `<span class="recommendation-icon">${icon}</span><span>${text}</span>`;
-        recommendationList.appendChild(item);
-      }
-      
-      // Initialize on page load
-      updatePrivacyBudget();
-      initializeCharts();
-    }
-  </script>
-</body>
-</html>
-        <!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>DP-SGD Explorer</title>
-  <style>
-    :root {
-      --primary-color: #3f51b5;
-      --primary-light: #757de8;
-      --primary-dark: #002984;
-      --secondary-color: #4caf50;
-      --accent-color: #ff9800;
-      --error-color: #f44336;
-      --text-primary: #333;
-      --text-secondary: #666;
-      --background-light: #fff;
-      --background-off: #f5f7fa;
-      --border-color: #ddd;
-      
-      --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    }
-    
-    body {
-      font-family: var(--font-family);
-      margin: 0;
-      padding: 0;
-      background: var(--background-off);
-      color: var(--text-primary);
-    }
-    
-    .app-container {
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-    
-    .main-header {
-      background-color: var(--primary-color);
-      color: white;
-      padding: 1rem;
-      box-shadow: var(--shadow-sm);
-    }
-    
-    .header-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      max-width: 1200px;
-      margin: 0 auto;
-    }
-    
-    .logo {
-      font-size: 1.5rem;
-      font-weight: bold;
-    }
-    
-    .tagline {
-      font-size: 0.8rem;
-      opacity: 0.8;
-    }
-    
-    .main-content {
-      flex: 1;
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 1rem;
-    }
-    
-    .nav-list {
-      list-style: none;
-      display: flex;
-      gap: 1rem;
-      padding: 0;
-      margin: 0;
-    }
-    
-    .nav-link {
-      color: white;
-      cursor: pointer;
-      padding: 0.5rem 1rem;
-      border-radius: 4px;
-    }
-    
-    .nav-link.active {
-      background-color: rgba(255, 255, 255, 0.2);
-    }
-    
-    .section-title {
-      font-size: 2rem;
-      color: var(--primary-dark);
-      margin-bottom: 1.5rem;
-    }
-    
-    .lab-container {
-      display: grid;
-      grid-template-columns: 300px 1fr;
-      gap: 1.5rem;
-    }
-    
-    @media (max-width: 900px) {
-      .lab-container {
-        grid-template-columns: 1fr;
-      }
-    }
-    
-    .panel {
-      background: white;
-      border-radius: 8px;
-      padding: 1rem;
-      box-shadow: var(--shadow-sm);
-    }
-    
-    .panel-title {
-      font-size: 1.2rem;
-      margin-bottom: 1rem;
-      color: var(--primary-dark);
-    }
-    
-    .parameter-control {
-      margin-bottom: 1rem;
-    }
-    
-    .parameter-label {
-      display: block;
-      margin-bottom: 0.5rem;
-      font-weight: 500;
-    }
-    
-    .parameter-slider {
-      width: 100%;
-      margin-bottom: 0.5rem;
-    }
-    
-    .slider-display {
-      display: flex;
-      justify-content: space-between;
-    }
-    
-    .budget-display {
-      margin-top: 1.5rem;
-      padding: 1rem;
-      background: var(--background-off);
-      border-radius: 4px;
-    }
-    
-    .budget-bar {
-      height: 8px;
-      background-color: #e0e0e0;
-      border-radius: 4px;
-      position: relative;
-      margin: 0.5rem 0;
-    }
-    
-    .budget-fill {
-      height: 100%;
-      border-radius: 4px;
-      background-color: var(--accent-color);
-      transition: width 0.3s ease;
-    }
-    
-    .budget-fill.low {
-      background-color: var(--secondary-color);
-    }
-    
-    .budget-fill.medium {
-      background-color: var(--accent-color);
-    }
-    
-    .budget-fill.high {
-      background-color: var(--error-color);
-    }
-    
-    .budget-scale {
-      display: flex;
-      justify-content: space-between;
-      font-size: 0.8rem;
-      color: var(--text-secondary);
-    }
-    
-    .control-button {
-      width: 100%;
-      padding: 0.8rem;
-      border: none;
-      border-radius: 4px;
-      background-color: var(--primary-color);
-      color: white;
-      font-weight: bold;
-      cursor: pointer;
-      margin-top: 1rem;
-    }
-    
-    .control-button:hover {
-      background-color: var(--primary-dark);
-    }
-    
-    .control-button.running {
-      background-color: var(--error-color);
-    }
-    
-    .control-button:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
-    }
-    
-    .chart-container {
-      height: 300px;
-      margin-bottom: 1rem;
-      position: relative;
-    }
-    
-    .chart {
-      width: 100%;
-      height: 100%;
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-    }
-    
-    .metrics-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 1rem;
-      margin-bottom: 1rem;
-    }
-    
-    .metric-card {
-      background-color: var(--background-off);
-      border-radius: 4px;
-      padding: 1rem;
-      text-align: center;
-    }
-    
-    .metric-value {
-      font-size: 1.5rem;
-      font-weight: bold;
-      margin-bottom: 0.5rem;
-    }
-    
-    .metric-label {
-      color: var(--text-secondary);
-      font-weight: 500;
-    }
-    
-    .recommendation-list {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-    }
-    
-    .recommendation-item {
-      display: flex;
-      align-items: flex-start;
-      padding: 0.8rem 0;
-      border-bottom: 1px solid var(--border-color);
-    }
-    
-    .recommendation-icon {
-      margin-right: 0.5rem;
-      font-size: 1.2rem;
-    }
-    
-    .footer {
-      text-align: center;
-      padding: 1rem;
-      background-color: var(--primary-dark);
-      color: white;
-      margin-top: 2rem;
-    }
-    
-    .tooltip {
-      position: relative;
-      display: inline-block;
-      margin-left: 0.5rem;
-    }
-    
-    .tooltip-icon {
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background-color: var(--primary-light);
-      color: white;
-      font-size: 12px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: help;
-    }
-    
-    .tooltip-text {
-      visibility: hidden;
-      width: 200px;
-      background-color: #333;
-      color: white;
-      text-align: center;
-      border-radius: 4px;
-      padding: 0.5rem;
-      position: absolute;
-      z-index: 1;
-      bottom: 125%;
-      left: 50%;
-      margin-left: -100px;
-      opacity: 0;
-      transition: opacity 0.3s;
-      font-size: 0.8rem;
-    }
-    
-    .tooltip:hover .tooltip-text {
-      visibility: visible;
-      opacity: 1;
-    }
-    
-    .tabs {
-      display: flex;
-      margin-bottom: 1rem;
-    }
-    
-    .tab {
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      border-bottom: 2px solid transparent;
-    }
-    
-    .tab.active {
-      border-bottom: 2px solid var(--primary-color);
-      color: var(--primary-color);
-    }
-    
-    .tab-content {
-      display: none;
-    }
-    
-    .tab-content.active {
-      display: block;
-    }
-    
-    .canvas-container {
-      width: 100%;
-      height: 300px;
-      background: var(--background-off);
-      border-radius: 4px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-    
-    canvas {
-      max-width: 100%;
-    }
-    
-    .status-badge {
-      display: flex;
-      align-items: center;
-      margin-top: 1rem;
-      padding: 0.5rem;
-      background-color: var(--background-off);
-      border-radius: 4px;
-    }
-    
-    .pulse {
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      background: var(--secondary-color);
-      margin-right: 0.5rem;
-      animation: pulse 1.5s infinite;
-    }
-    
-    @keyframes pulse {
-      0% {
-        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
-      }
-      70% {
-        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
-      }
-      100% {
-        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
-      }
-    }
-
-    /* Learning Hub styles */
-    .learning-container {
-      display: grid;
-      grid-template-columns: 250px 1fr;
-      gap: 1.5rem;
-    }
-
-    .learning-sidebar {
-      background: white;
-      border-radius: 8px;
-      padding: 1rem;
-      box-shadow: var(--shadow-sm);
-    }
-
-    .learning-content {
-      background: white;
-      border-radius: 8px;
-      padding: 1.5rem;
-      box-shadow: var(--shadow-sm);
-    }
-
-    .learning-steps {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-    }
-
-    .learning-step {
-      padding: 0.75rem 0.5rem;
-      border-radius: 4px;
-      cursor: pointer;
-      margin-bottom: 0.5rem;
-    }
-
-    .learning-step.active {
-      background-color: var(--background-off);
-      color: var(--primary-color);
-      font-weight: 500;
-    }
-
-    .step-content {
-      display: none;
-    }
-
-    .step-content.active {
-      display: block;
-    }
-
-    .concept-highlight {
-      background-color: var(--background-off);
-      border-radius: 4px;
-      padding: 1rem;
-      margin: 1rem 0;
-    }
-
-    .formula {
-      background-color: #f5f7fa;
-      padding: 0.75rem;
-      border-radius: 4px;
-      font-family: monospace;
-      margin: 1rem 0;
-    }
-
-    .concept-box {
-      display: flex;
-      margin: 1rem 0;
-      gap: 1rem;
-    }
-
-    .concept-box > div {
-      flex: 1;
-      padding: 1rem;
-      border-radius: 8px;
-    }
-
-    .concept-box .box1 {
-      background-color: #e3f2fd;
-    }
-
-    .concept-box .box2 {
-      background-color: #fff8e1;
-    }
-  </style>
-</head>
-<body>
-  <div class="app-container">
-    <header class="main-header">
-      <div class="header-container">
-        <div>
-          <div class="logo">DP-SGD Explorer</div>
-          <div class="tagline">Interactive Learning & Experimentation</div>
-        </div>
-        <nav>
-          <ul class="nav-list">
-            <li><div class="nav-link" id="nav-learning">Learning Hub</div></li>
-            <li><div class="nav-link active" id="nav-playground">Playground</div></li>
-          </ul>
-        </nav>
-      </div>
-    </header>
-    
-    <main class="main-content">
-      <div id="playground-section">
-        <h1 class="section-title">DP-SGD Interactive Playground</h1>
-        
-        <div class="lab-container">
-          <!-- Sidebar - Configuration Panels -->
-          <div class="lab-sidebar">
-            <!-- Model Configuration Panel -->
-            <div class="panel">
-              <h2 class="panel-title">Model Configuration</h2>
-              
-              <div class="parameter-control">
-                <label for="dataset-select" class="parameter-label">
-                  Dataset
-                  <span class="tooltip">
-                    <span class="tooltip-icon">?</span>
-                    <span class="tooltip-text">The dataset used for training affects privacy budget calculations and model accuracy.</span>
-                  </span>
-                </label>
-                <select id="dataset-select" class="parameter-select">
-                  <option value="mnist">MNIST Digits</option>
-                  <option value="fashion-mnist">Fashion MNIST</option>
-                  <option value="cifar10">CIFAR-10</option>
-                </select>
-              </div>
-              
-              <div class="parameter-control">
-                <label for="model-select" class="parameter-label">
-                  Model Architecture
-                  <span class="tooltip">
-                    <span class="tooltip-icon">?</span>
-                    <span class="tooltip-text">The model architecture affects training time, capacity to learn, and resilience to noise.</span>
-                  </span>
-                </label>
-                <select id="model-select" class="parameter-select">
-                  <option value="simple-mlp">Simple MLP</option>
-                  <option value="simple-cnn">Simple CNN</option>
-                  <option value="advanced-cnn">Advanced CNN</option>
-                </select>
-              </div>
-              
-              <div style="margin-top: 1.5rem;">
-                <h3 style="margin-bottom: 0.5rem; font-size: 1rem;">Quick Presets</h3>
-                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;">
-                  <button id="preset-high-privacy" style="padding: 0.5rem; text-align: center; background-color: #e3f2fd; border: none; border-radius: 4px; cursor: pointer;">
-                    <div style="font-size: 1.2rem; margin-bottom: 0.2rem;">🔒</div>
-                    <div style="font-weight: 500; margin-bottom: 0.2rem;">High Privacy</div>
-                    <div style="font-size: 0.8rem; color: #666;">ε ≈ 1.2</div>
-                  </button>
-                  <button id="preset-balanced" style="padding: 0.5rem; text-align: center; background-color: #f1f8e9; border: none; border-radius: 4px; cursor: pointer;">
-                    <div style="font-size: 1.2rem; margin-bottom: 0.2rem;">⚖️</div>
-                    <div style="font-weight: 500; margin-bottom: 0.2rem;">Balanced</div>
-                    <div style="font-size: 0.8rem; color: #666;">ε ≈ 3.0</div>
-                  </button>
-                  <button id="preset-high-utility" style="padding: 0.5rem; text-align: center; background-color: #fff8e1; border: none; border-radius: 4px; cursor: pointer;">
-                    <div style="font-size: 1.2rem; margin-bottom: 0.2rem;">📈</div>
-                    <div style="font-weight: 500; margin-bottom: 0.2rem;">High Utility</div>
-                    <div style="font-size: 0.8rem; color: #666;">ε ≈ 8.0</div>
-                  </button>
-                </div>
-              </div>
-            </div>
-            
-            <!-- DP-SGD Parameters Panel -->
-            <div class="panel" style="margin-top: 1rem;">
-              <h2 class="panel-title">DP-SGD Parameters</h2>
-              
-              <div class="parameter-control">
-                <label for="clipping-norm" class="parameter-label">
-                  Clipping Norm (C)
-                  <span class="tooltip">
-                    <span class="tooltip-icon">?</span>
-                    <span class="tooltip-text">Limits how much any single training example can affect the model update. Smaller values provide stronger privacy but can slow learning.</span>
-                  </span>
-                </label>
-                <input type="range" id="clipping-norm" class="parameter-slider" min="0.1" max="5.0" step="0.1" value="1.0">
-                <div class="slider-display">
-                  <span>0.1</span>
-                  <span id="clipping-norm-value">1.0</span>
-                  <span>5.0</span>
-                </div>
-              </div>
-              
-              <div class="parameter-control">
-                <label for="noise-multiplier" class="parameter-label">
-                  Noise Multiplier (σ)
-                  <span class="tooltip">
-                    <span class="tooltip-icon">?</span>
-                    <span class="tooltip-text">Controls how much noise is added to protect privacy. Higher values increase privacy but may reduce accuracy.</span>
-                  </span>
-                </label>
-                <input type="range" id="noise-multiplier" class="parameter-slider" min="0.1" max="5.0" step="0.1" value="1.0">
-                <div class="slider-display">
-                  <span>0.1</span>
-                  <span id="noise-multiplier-value">1.0</span>
-                  <span>5.0</span>
-                </div>
-              </div>
-              
-              <div class="parameter-control">
-                <label for="batch-size" class="parameter-label">
-                  Batch Size
-                  <span class="tooltip">
-                    <span class="tooltip-icon">?</span>
-                    <span class="tooltip-text">Number of examples processed in each training step. Affects both privacy accounting and training stability.</span>
-                  </span>
-                </label>
-                <input type="range" id="batch-size" class="parameter-slider" min="16" max="512" step="16" value="64">
-                <div class="slider-display">
-                  <span>16</span>
-                  <span id="batch-size-value">64</span>
-                  <span>512</span>
-                </div>
-              </div>
-              
-              <div class="parameter-control">
-                <label for="learning-rate" class="parameter-label">
-                  Learning Rate (η)
-                  <span class="tooltip">
-                    <span class="tooltip-icon">?</span>
-                    <span class="tooltip-text">Controls how quickly model parameters update. For DP-SGD, often needs to be smaller than standard SGD.</span>
-                  </span>
-                </label>
-                <input type="range" id="learning-rate" class="parameter-slider" min="0.001" max="0.1" step="0.001" value="0.01">
-                <div class="slider-display">
-                  <span>0.001</span>
-                  <span id="learning-rate-value">0.01</span>
-                  <span>0.1</span>
-                </div>
-              </div>
-              
-              <div class="parameter-control">
-                <label for="epochs" class="parameter-label">
-                  Epochs
-                  <span class="tooltip">
-                    <span class="tooltip-icon">?</span>
-                    <span class="tooltip-text">Number of complete passes through the dataset. More epochs improves learning but increases privacy budget consumption.</span>
-                  </span>
-                </label>
-                <input type="range" id="epochs" class="parameter-slider" min="1" max="20" step="1" value="5">
-                <div class="slider-display">
-                  <span>1</span>
-                  <span id="epochs-value">5</span>
-                  <span>20</span>
-                </div>
-              </div>
-              
-              <div class="budget-display">
-                <h3 style="margin-top: 0; margin-bottom: 0.5rem; font-size: 1rem;">
-                  Estimated Privacy Budget (ε)
-                  <span class="tooltip">
-                    <span class="tooltip-icon">?</span>
-                    <span class="tooltip-text">This is the estimated privacy loss from training with these parameters. Lower ε means stronger privacy guarantees.</span>
-                  </span>
-                </h3>
-                <div style="display: flex; align-items: center; gap: 1rem;">
-                  <div id="budget-value" style="font-size: 1.5rem; font-weight: bold; min-width: 60px;">2.47</div>
-                  <div style="flex: 1;">
-                    <div class="budget-bar">
-                      <div id="budget-fill" class="budget-fill medium" style="width: 25%;"></div>
-                    </div>
-                    <div class="budget-scale">
-                      <span>Stronger Privacy</span>
-                      <span>Weaker Privacy</span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              
-              <button id="train-button" class="control-button">
-                Run Training
-              </button>
-            </div>
-          </div>
-          
-          <!-- Main Content - Visualizations and Results -->
-          <div class="lab-main">
-            <!-- Training Visualizer -->
-            <div class="panel">
-              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
-                <h2 class="panel-title">Training Progress</h2>
-                <div class="tabs">
-                  <div class="tab active" data-tab="training">Training Metrics</div>
-                  <div class="tab" data-tab="gradients">Gradient Clipping</div>
-                  <div class="tab" data-tab="privacy">Privacy Budget</div>
-                </div>
-              </div>
-              
-              <div id="training-tab" class="tab-content active">
-                <div class="chart-container">
-                  <canvas id="training-chart" class="chart"></canvas>
-                </div>
-                
-                <div id="training-status" class="status-badge" style="display: none;">
-                  <span class="pulse"></span>
-                  <span style="font-weight: 500; color: #4caf50;">Training in progress</span>
-                  <span style="margin-left: auto; font-weight: 500;">Epoch: <span id="current-epoch">1</span> / <span id="total-epochs">5</span></span>
-                </div>
-              </div>
-              
-              <div id="gradients-tab" class="tab-content">
-                <div style="margin-bottom: 1rem;">
-                  <h3 style="font-size: 1rem; margin-bottom: 0.5rem;">Gradient Clipping Visualization</h3>
-                  <p style="font-size: 0.9rem; color: var(--text-secondary);">
-                    The chart below shows a distribution of gradient norms before and after clipping.
-                    The vertical red line indicates the clipping threshold.
-                    <span class="tooltip">
-                      <span class="tooltip-icon">?</span>
-                      <span class="tooltip-text">Clipping ensures no single example has too much influence on model updates, which is essential for differential privacy.</span>
-                    </span>
-                  </p>
-                </div>
-                
-                <div class="canvas-container">
-                  <canvas id="gradient-canvas" width="600" height="300"></canvas>
-                </div>
-              </div>
-              
-              <div id="privacy-tab" class="tab-content">
-                <div style="margin-bottom: 1rem;">
-                  <h3 style="font-size: 1rem; margin-bottom: 0.5rem;">Privacy Budget Consumption</h3>
-                  <p style="font-size: 0.9rem; color: var(--text-secondary);">
-                    This chart shows how the privacy budget (ε) accumulates during training.
-                    <span class="tooltip">
-                      <span class="tooltip-icon">?</span>
-                      <span class="tooltip-text">In differential privacy, we track the 'privacy budget' (ε) which represents the amount of privacy loss. Lower values mean stronger privacy guarantees.</span>
-                    </span>
-                  </p>
-                </div>
-                
-                <div class="chart-container">
-                  <canvas id="privacy-chart" class="chart"></canvas>
-                </div>
-              </div>
-            </div>
-            
-            <!-- Results Panel -->
-            <div class="panel" style="margin-top: 1rem;">
-              <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
-                <h2 class="panel-title">Results</h2>
-                <div class="tabs">
-                  <div class="tab active" data-tab="metrics">Final Metrics</div>
-                  <div class="tab" data-tab="recommendations">Recommendations</div>
-                </div>
-              </div>
-              
-              <!-- Initial no-results state -->
-              <div id="no-results" style="text-align: center; padding: 2rem 0;">
-                <p style="color: var(--text-secondary); margin-bottom: 1rem;">Run training to see results here</p>
-                <div style="font-size: 3rem; opacity: 0.5;">📊</div>
-              </div>
-              
-              <!-- Results content (hidden initially) -->
-              <div id="results-content" style="display: none;">
-                <div id="metrics-tab" class="tab-content active">
-                  <div class="metrics-grid">
-                    <div class="metric-card">
-                      <div id="accuracy-value" class="metric-value" style="color: var(--primary-color);">92.4%</div>
-                      <div class="metric-label">
-                        Accuracy
-                        <span class="tooltip">
-                          <span class="tooltip-icon">?</span>
-                          <span class="tooltip-text">Model performance on test data. Higher values are better.</span>
-                        </span>
-                      </div>
-                    </div>
-                    
-                    <div class="metric-card">
-                      <div id="loss-value" class="metric-value">0.283</div>
-                      <div class="metric-label">
-                        Loss
-                        <span class="tooltip">
-                          <span class="tooltip-icon">?</span>
-                          <span class="tooltip-text">Final training loss. Lower values generally indicate better model fit.</span>
-                        </span>
-                      </div>
-                    </div>
-                    
-                    <div class="metric-card">
-                      <div id="privacy-budget-value" class="metric-value" style="color: var(--accent-color);">ε = 2.1</div>
-                      <div class="metric-label">
-                        Privacy Budget
-                        <span class="tooltip">
-                          <span class="tooltip-icon">?</span>
-                          <span class="tooltip-text">Final privacy loss (ε). Lower values mean stronger privacy guarantees.</span>
-                        </span>
-                      </div>
-                    </div>
-                    
-                    <div class="metric-card">
-                      <div id="training-time-value" class="metric-value">3.7s</div>
-                      <div class="metric-label">
-                        Training Time
-                        <span class="tooltip">
-                          <span class="tooltip-icon">?</span>
-                          <span class="tooltip-text">Total time spent on training, including privacy mechanisms.</span>
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  
-                  <div style="background-color: var(--background-off); border-radius: 4px; padding: 1rem; margin-top: 1rem;">
-                    <h3 style="margin-top: 0; margin-bottom: 0.5rem; font-size: 1rem;">Privacy-Utility Trade-off</h3>
-                    <div style="position: relative; height: 8px; background-color: #e0e0e0; border-radius: 4px; margin: 1.5rem 0;">
-                      <div style="position: absolute; top: -20px; left: 92%; transform: translateX(-50%);">
-                        <span style="font-weight: 500; font-size: 0.8rem; color: var(--secondary-color);">Utility</span>
-                      </div>
-                      <div style="position: absolute; top: -20px; right: 79%; transform: translateX(50%);">
-                        <span style="font-weight: 500; font-size: 0.8rem; color: var(--primary-color);">Privacy</span>
-                      </div>
-                    </div>
-                    <p id="tradeoff-explanation" style="font-size: 0.9rem; color: var(--text-secondary); margin-top: 1rem;">
-                      This model achieved 92.4% accuracy with a privacy budget of ε=2.1. This is a good trade-off for most applications.
-                    </p>
-                  </div>
-                </div>
-                
-                <div id="recommendations-tab" class="tab-content">
-                  <h3 style

requirements.txt

@@ -0,0 +1,5 @@
+flask==3.0.0
+flask-cors==4.0.0
+python-dotenv==1.0.0
+gunicorn==21.2.0
+numpy==1.24.3 

run.py

@@ -0,0 +1,12 @@
+from app import create_app
+import os
+
+app = create_app()
+
+if __name__ == '__main__':
+    # Enable debug mode for development
+    app.config['DEBUG'] = True
+    # Disable CORS in development
+    app.config['CORS_HEADERS'] = 'Content-Type'
+    # Run the application
+    app.run(host='127.0.0.1', port=5000, debug=True) 

runtime.txt

@@ -0,0 +1 @@
+python-3.8.12 

standalone-dpsgd-explorer.html

@@ -1,2546 +0,0 @@
-      // Generate explanation about privacy-utility tradeoff
-      const getTradeoffExplanation = (accuracy, privacyBudget) => {
-        if (accuracy > 0.9 && privacyBudget < 3) {
-          return " This is an excellent balance of privacy and utility.";
-        } else if (accuracy > 0.85 && privacyBudget < 5) {
-          return " This is a good trade-off for most applications.";
-        } else if (accuracy > 0.8) {
-          return " Consider if this level of privacy is sufficient for your use case.";
-        } else {
-          return " You may want to adjust parameters to improve accuracy while maintaining privacy.";
-        }
-      };
-      
-      // Generate recommendations based on training results
-      const generateRecommendations = (results, config) => {
-        const recommendations = [];
-        
-        // Based on accuracy
-        if (results.accuracy < 0.7) {
-          recommendations.push({
-            icon: "⚠️",
-            text: "Accuracy is low. Consider decreasing noise multiplier or increasing the number of epochs."
-          });
-        }
-        
-        // Based on privacy budget
-        if (results.privacyBudget > 8) {
-          recommendations.push({
-            icon: "🔓",
-            text: "Privacy budget is high. Consider increasing noise multiplier or reducing epochs for stronger privacy."
-          });
-        } else if (results.privacyBudget < 1 && results.accuracy < 0.85) {
-          recommendations.push({
-            icon: "🔒",
-            text: "Very strong privacy may be limiting accuracy. Consider a slight increase in privacy budget."
-          });
-        }
-        
-        // Based on clipping
-        if (config.dpParams.clipNorm < 0.5) {
-          recommendations.push({
-            icon: "✂️",
-            text: "Clipping norm is very low. This might be over-clipping gradients and limiting learning."
-          });
-        }
-        
-        // Based on batch size
-        if (config.dpParams.batchSize < 32) {
-          recommendations.push({
-            icon: "📊",
-            text: "Small batch size can make training with DP-SGD unstable. Consider increasing batch size."
-          });
-        }
-        
-        // Add a generic recommendation if none were generated
-        if (recommendations.length === 0) {
-          recommendations.push({
-            icon: "👍",
-            text: "Current configuration seems well-balanced. Experiment with small parameter changes to optimize further."
-          });
-        }
-        
-        return recommendations;
-      };
-      
-      // If no results, show placeholder
-      if (!results) {
-        return (
-          <div className="results-panel">
-            <h2 className="panel-title">Results</h2>
-            <div className="no-results">
-              <p className="placeholder-text">Run training to see results here</p>
-              <div className="placeholder-icon">📊</div>
-            </div>
-          </div>
-        );
-      }
-      
-      return (
-        <div className="results-panel">
-          <div className="results-header">
-            <h2 className="panel-title">Results</h2>
-            <div className="view-toggle">
-              <button
-                className={`toggle-button ${showFinalMetrics ? 'active' : ''}`}
-                onClick={() => setShowFinalMetrics(true)}
-              >
-                Final Metrics
-              </button>
-              <button
-                className={`toggle-button ${!showFinalMetrics ? 'active' : ''}`}
-                onClick={() => setShowFinalMetrics(false)}
-              >
-                Recommendations
-              </button>
-            </div>
-          </div>
-          
-          {showFinalMetrics ? (
-            <div className="metrics-section">
-              <div className="metrics-grid">
-                <div className="metric-card">
-                  <div className="metric-value primary">
-                    {formatMetric(results.accuracy * 100, 1)}%
-                  </div>
-                  <div className="metric-label">
-                    Accuracy
-                    <TechnicalTooltip text="Model performance on test data. Higher values are better." />
-                  </div>
-                </div>
-                
-                <div className="metric-card">
-                  <div className="metric-value">
-                    {formatMetric(results.loss, 3)}
-                  </div>
-                  <div className="metric-label">
-                    Loss
-                    <TechnicalTooltip text="Final training loss. Lower values generally indicate better model fit." />
-                  </div>
-                </div>
-                
-                <div className="metric-card">
-                  <div className={`metric-value privacy-budget ${getPrivacyClass(results.privacyBudget)}`}>
-                    ε = {formatMetric(results.privacyBudget, 2)}
-                  </div>
-                  <div className="metric-label">
-                    Privacy Budget
-                    <TechnicalTooltip text="Final privacy loss (ε). Lower values mean stronger privacy guarantees." />
-                  </div>
-                </div>
-                
-                <div className="metric-card">
-                  <div className="metric-value">
-                    {formatMetric(results.trainingTime, 1)}s
-                  </div>
-                  <div className="metric-label">
-                    Training Time
-                    <TechnicalTooltip text="Total time spent on training, including privacy mechanisms." />
-                  </div>
-                </div>
-              </div>
-              
-              <div className="privacy-utility-summary">
-                <h3>Privacy-Utility Trade-off</h3>
-                <div className="tradeoff-meter">
-                  <div className="meter-bar">
-                    <div 
-                      className="utility-indicator"
-                      style={{ left: `${Math.min(results.accuracy * 100, 100)}%` }}
-                    >
-                      <span className="indicator-label">Utility</span>
-                    </div>
-                    <div 
-                      className="privacy-indicator"
-                      style={{ right: `${Math.min(100 - (results.privacyBudget / 10 * 100), 100)}%` }}
-                    >
-                      <span className="indicator-label">Privacy</span>
-                    </div>
-                  </div>
-                  <div className="meter-explanation">
-                    <p>
-                      This model achieved {formatMetric(results.accuracy * 100, 1)}% accuracy with a privacy budget of ε={formatMetric(results.privacyBudget, 2)}.
-                      {getTradeoffExplanation(results.accuracy, results.privacyBudget)}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className="recommendation-section">
-              <h3>Recommendations</h3>
-              <ul className="recommendations-list">
-                {generateRecommendations(results, config).map((rec, idx) => (
-                  <li key={idx} className="recommendation-item">
-                    <span className="recommendation-icon">{rec.icon}</span>
-                    <span className="recommendation-text">{rec.text}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
-        </div>
-      );
-    };
-    
-    // Learning Hub Component
-    const LearningHub = ({ userRole }) => {
-      const [activeStep, setActiveStep] = React.useState('introduction');
-      
-      const steps = [
-        { id: 'introduction', title: 'Introduction to Differential Privacy', completed: true },
-        { id: 'dp-concepts', title: 'Core DP Concepts', completed: true },
-        { id: 'sgd-basics', title: 'Stochastic Gradient Descent Refresher', completed: false },
-        { id: 'dpsgd-intro', title: 'DP-SGD: Core Modifications', completed: false },
-        { id: 'parameters', title: 'Hyperparameter Deep Dive', completed: false },
-        { id: 'privacy-accounting', title: 'Privacy Accounting', completed: false }
-      ];
-      
-      const stepContent = {
-        'introduction': (
-          <div>
-            <h2>Introduction to Differential Privacy</h2>
-            <p>Differential Privacy (DP) is a mathematical framework that provides strong privacy guarantees when performing analyses on sensitive data. It ensures that the presence or absence of any single individual's data has a minimal effect on the output of an analysis.</p>
-            
-            <h3>Why is Differential Privacy Important?</h3>
-            <p>Traditional anonymization techniques often fail to protect privacy. With enough auxiliary information, it's possible to re-identify individuals in supposedly "anonymized" datasets. Differential privacy addresses this by adding carefully calibrated noise to the analysis process.</p>
-            
-            <h3>The Privacy-Utility Trade-off</h3>
-            <p>There's an inherent trade-off between privacy and utility (accuracy) in DP. More privacy means more noise, which typically reduces accuracy. The challenge is finding the right balance for your specific application.</p>
-            
-            <div className="role-specific-content">
-              <h4>For {userRole === 'ml-engineer' ? 'ML Engineers' : 
-                      userRole === 'data-scientist' ? 'Data Scientists' :
-                      userRole === 'privacy-officer' ? 'Privacy Officers' : 'Business Stakeholders'}</h4>
-              
-              {userRole === 'ml-engineer' && (
-                <p>As an ML engineer, you'll need to understand how to implement DP-SGD in your machine learning pipelines, balancing privacy guarantees with model performance.</p>
-              )}
-              
-              {userRole === 'data-scientist' && (
-                <p>As a data scientist, focus on understanding how different privacy parameters affect model accuracy and how to tune these for optimal performance.</p>
-              )}
-              
-              {userRole === 'privacy-officer' && (
-                <p>As a privacy officer, pay special attention to the formal privacy guarantees and how DP can help meet regulatory requirements like GDPR or HIPAA.</p>
-              )}
-              
-              {userRole === 'business-stakeholder' && (
-                <p>As a business stakeholder, focus on understanding the trade-offs between privacy and utility, and how these impact business metrics and compliance requirements.</p>
-              )}
-            </div>
-          </div>
-        ),
-        
-        'dp-concepts': (
-          <div>
-            <h2>Core Differential Privacy Concepts</h2>
-            
-            <h3>The Formal Definition</h3>
-            <p>A mechanism M is (ε,δ)-differentially private if for all neighboring datasets D and D' (differing in one record), and for all possible outputs S:</p>
-            <div style={{ padding: '10px', backgroundColor: '#f5f7fa', borderRadius: '4px', fontFamily: 'monospace' }}>
-              P(M(D) ∈ S) ≤ e^ε × P(M(D') ∈ S) + δ
-            </div>
-            
-            <h3>Key Parameters</h3>
-            <p><strong>ε (epsilon)</strong>: The privacy budget. Lower values mean stronger privacy but typically lower utility.</p>
-            <p><strong>δ (delta)</strong>: The probability of the privacy guarantee being broken. Usually set very small (e.g., 10^-5).</p>
-            
-            <h3>Differential Privacy Mechanisms</h3>
-            <p><strong>Laplace Mechanism</strong>: Adds noise from a Laplace distribution to numeric queries.</p>
-            <p><strong>Gaussian Mechanism</strong>: Adds noise from a Gaussian (normal) distribution. This is used in DP-SGD.</p>
-            <p><strong>Exponential Mechanism</strong>: Used for non-numeric outputs, selects an output based on a probability distribution.</p>
-            
-            <h3>Privacy Accounting</h3>
-            <p>When you apply multiple differentially private operations, the privacy loss (ε) accumulates. This is known as composition.</p>
-            <p>Advanced composition theorems and privacy accountants help track the total privacy spend.</p>
-          </div>
-        ),
-        
-        'sgd-basics': (
-          <div>
-            <h2>Stochastic Gradient Descent Refresher</h2>
-            
-            <h3>Standard SGD</h3>
-            <p>Stochastic Gradient Descent (SGD) is an optimization algorithm used to train machine learning models by iteratively updating parameters based on gradients computed from mini-batches of data.</p>
-            
-            <h3>The Basic Update Rule</h3>
-            <p>The standard SGD update for a batch B is:</p>
-            <div style={{ padding: '10px', backgroundColor: '#f5f7fa', borderRadius: '4px', fontFamily: 'monospace' }}>
-              θ ← θ - η∇L(θ; B)
-            </div>
-            <p>Where:</p>
-            <ul>
-              <li>θ represents the model parameters</li>
-              <li>η is the learning rate</li>
-              <li>∇L(θ; B) is the average gradient of the loss over the batch B</li>
-            </ul>
-            
-            <h3>Privacy Concerns with Standard SGD</h3>
-            <p>Standard SGD can leak information about individual training examples through the gradients. For example:</p>
-            <ul>
-              <li>Gradients might be larger for outliers or unusual examples</li>
-              <li>Model memorization of sensitive data can be extracted through attacks</li>
-              <li>Gradient values can be used in reconstruction attacks</li>
-            </ul>
-            
-            <p>These privacy concerns motivate the need for differentially private training methods.</p>
-          </div>
-        ),
-        
-        'dpsgd-intro': (
-          <div>
-            <h2>DP-SGD: Core Modifications</h2>
-            
-            <h3>How DP-SGD Differs from Standard SGD</h3>
-            <p>Differentially Private SGD modifies standard SGD in two key ways:</p>
-            
-            <div style={{ display: 'flex', gap: '20px', margin: '20px 0' }}>
-              <div style={{ flex: 1, padding: '15px', backgroundColor: '#e3f2fd', borderRadius: '8px' }}>
-                <h4>1. Per-Sample Gradient Clipping</h4>
-                <p>Compute gradients for each example individually, then clip their L2 norm to a threshold C.</p>
-                <p>This limits the influence of any single training example on the model update.</p>
-              </div>
-              
-              <div style={{ flex: 1, padding: '15px', backgroundColor: '#fff8e1', borderRadius: '8px' }}>
-                <h4>2. Noise Addition</h4>
-                <p>Add Gaussian noise to the sum of clipped gradients before applying the update.</p>
-                <p>The noise scale is proportional to the clipping threshold and the noise multiplier.</p>
-              </div>
-            </div>
-            
-            <h3>The DP-SGD Update Rule</h3>
-            <p>The DP-SGD update can be summarized as:</p>
-            <ol>
-              <li>Compute per-sample gradients: g<sub>i</sub> = ∇L(θ; x<sub>i</sub>)</li>
-              <li>Clip each gradient: g̃<sub>i</sub> = g<sub>i</sub> × min(1, C/||g<sub>i</sub>||<sub>2</sub>)</li>
-              <li>Add noise: ḡ = (1/|B|) × (∑g̃<sub>i</sub> + N(0, σ²C²I))</li>
-              <li>Update parameters: θ ← θ - η × ḡ</li>
-            </ol>
-            
-            <p>Where:</p>
-            <ul>
-              <li>C is the clipping norm</li>
-              <li>σ is the noise multiplier</li>
-              <li>B is the batch</li>
-            </ul>
-          </div>
-        ),
-        
-        'parameters': (
-          <div>
-            <h2>Hyperparameter Deep Dive</h2>
-            
-            <p>DP-SGD introduces several new hyperparameters that need to be tuned carefully:</p>
-            
-            <h3>Clipping Norm (C)</h3>
-            <p>The maximum allowed L2 norm for any individual gradient.</p>
-            <ul>
-              <li><strong>Too small:</strong> Gradients are over-clipped, limiting learning</li>
-              <li><strong>Too large:</strong> Requires more noise to achieve the same privacy guarantee</li>
-              <li><strong>Typical range:</strong> 0.1 to 10.0, depending on the dataset and model</li>
-            </ul>
-            
-            <h3>Noise Multiplier (σ)</h3>
-            <p>Controls the amount of noise added to the gradients.</p>
-            <ul>
-              <li><strong>Higher σ:</strong> Better privacy, worse utility</li>
-              <li><strong>Lower σ:</strong> Better utility, worse privacy</li>
-              <li><strong>Typical range:</strong> 0.5 to 2.0 for most practical applications</li>
-            </ul>
-            
-            <h3>Batch Size</h3>
-            <p>Affects both training dynamics and privacy accounting.</p>
-            <ul>
-              <li><strong>Larger batches:</strong> Reduce variance from noise, but change sampling probability</li>
-              <li><strong>Smaller batches:</strong> More update steps, potentially consuming more privacy budget</li>
-              <li><strong>Typical range:</strong> 64 to 1024, larger than standard SGD</li>
-            </ul>
-            
-            <h3>Learning Rate (η)</h3>
-            <p>May need adjustment compared to non-private training.</p>
-            <ul>
-              <li><strong>DP-SGD often requires:</strong> Lower learning rates or careful scheduling</li>
-              <li><strong>Reason:</strong> Added noise can destabilize training with high learning rates</li>
-            </ul>
-            
-            <h3>Number of Epochs</h3>
-            <p>More epochs consume more privacy budget.</p>
-            <ul>
-              <li><strong>Trade-off:</strong> More training vs. privacy budget consumption</li>
-              <li><strong>Early stopping:</strong> Often beneficial for balancing accuracy and privacy</li>
-            </ul>
-          </div>
-        ),
-        
-        'privacy-accounting': (
-          <div>
-            <h2>Privacy Accounting</h2>
-            
-            <h3>Tracking Privacy Budget</h3>
-            <p>Privacy accounting is the process of keeping track of the total privacy loss (ε) throughout training.</p>
-            
-            <h3>Common Methods</h3>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', margin: '15px 0' }}>
-              <div style={{ padding: '15px', backgroundColor: '#f5f7fa', borderRadius: '8px' }}>
-                <h4>Moment Accountant</h4>
-                <p>Used in the original DP-SGD paper, provides tight bounds on the privacy loss.</p>
-                <p>Tracks the moments of the privacy loss random variable.</p>
-              </div>
-              
-              <div style={{ padding: '15px', backgroundColor: '#f5f7fa', borderRadius: '8px' }}>
-                <h4>Rényi Differential Privacy (RDP)</h4>
-                <p>Alternative accounting method based on Rényi divergence.</p>
-                <p>Often used in modern implementations like TensorFlow Privacy and Opacus.</p>
-              </div>
-              
-              <div style={{ padding: '15px', backgroundColor: '#f5f7fa', borderRadius: '8px' }}>
-                <h4>Analytical Gaussian Mechanism</h4>
-                <p>Simpler method for specific mechanisms like the Gaussian Mechanism.</p>
-                <p>Less tight bounds but easier to compute.</p>
-              </div>
-            </div>
-            
-            <h3>Privacy Budget Allocation</h3>
-            <p>With a fixed privacy budget (ε), you must decide how to allocate it:</p>
-            <ul>
-              <li><strong>Fixed noise, variable epochs:</strong> Set noise level, train until budget is exhausted</li>
-              <li><strong>Fixed epochs, variable noise:</strong> Set desired epochs, calculate required noise</li>
-              <li><strong>Advanced techniques:</strong> Privacy filters, odometers, and adaptive mechanisms</li>
-            </ul>
-            
-            <h3>Practical Implementation</h3>
-            <p>In practice, privacy accounting is handled by libraries like:</p>
-            <ul>
-              <li>TensorFlow Privacy</li>
-              <li>PyTorch Opacus</li>
-              <li>Diffprivlib (IBM)</li>
-            </ul>
-          </div>
-        )
-      };
-      
-      return (
-        <div className="learning-hub">
-          <h1 className="section-title">Learning Hub</h1>
-          
-          <div className="learning-container">
-            <div className="learning-sidebar">
-              <h2 className="panel-title">Differential Privacy in ML</h2>
-              
-              <ul className="learning-steps">
-                {steps.map(step => (
-                  <li 
-                    key={step.id}
-                    className={`learning-step ${activeStep === step.id ? 'active' : ''}`}
-                    onClick={() => setActiveStep(step.id)}
-                  >
-                    <div className={`step-indicator ${step.completed ? 'completed' : ''} ${activeStep === step.id ? 'active' : ''}`}></div>
-                    <span className={`step-title ${activeStep === step.id ? 'active' : ''} ${step.completed ? 'completed' : ''}`}>
-                      {step.title}
-                    </span>
-                  </li>
-                ))}
-              </ul>
-              
-              <div className="role-info" style={{ marginTop: '20px', padding: '15px', backgroundColor: '#f5f7fa', borderRadius: '8px' }}>
-                <p><strong>Content tailored for:</strong> {userRole === 'ml-engineer' ? 'ML Engineers' : 
-                    userRole === 'data-scientist' ? 'Data Scientists' :
-                    userRole === 'privacy-officer' ? 'Privacy Officers' : 'Business Stakeholders'}</p>
-                <p style={{ fontSize: 'var(--font-size-small)', marginTop: '8px' }}>
-                  You can change your role in the top navigation bar.
-                </p>
-              </div>
-            </div>
-            
-            <div className="learning-content">
-              {stepContent[activeStep]}
-            </div>
-          </div>
-        </div>
-      );
-    };
-    
-    // Main App Component
-    const App = () => {
-      // State for active section
-      const [activeSection, setActiveSection] = React.useState('learning-hub');
-      
-      // State for user role
-      const [userRole, setUserRole] = React.useState('ml-engineer');
-      const [showRoleSelector, setShowRoleSelector] = React.useState(false);
-      
-      // DP-SGD Configuration
-      const [config, setConfig] = React.useState({
-        dataset: 'mnist',
-        modelArchitecture: 'simple-cnn',
-        dpParams: {
-          clipNorm: 1.0,
-          noiseMultiplier: 1.0,
-          batchSize: 64,
-          learningRate: 0.01,
-          epochs: 5
-        }
-      });
-      
-      // Training state
-      const [isTraining, setIsTraining] = React.useState(false);
-      const [trainingProgress, setTrainingProgress] = React.useState({
-        currentEpoch: 0,
-        accuracy: [],
-        loss: [],
-        privacyBudgetUsed: []
-      });
-      
-      // Results state
-      const [results, setResults] = React.useState(null);
-      
-      // Roles configuration
-      const roles = [
-        { id: 'ml-engineer', label: 'ML Engineer' },
-        { id: 'data-scientist', label: 'Data Scientist' },
-        { id: 'privacy-officer', label: 'Privacy/Legal' },
-        { id: 'business-stakeholder', label: 'Business Stakeholder' }
-      ];
-      
-      const currentRole = roles.find(role => role.id === userRole) || roles[0];
-      
-      // Handle role selection
-      const handleRoleSelect = (roleId) => {
-        setUserRole(roleId);
-        setShowRoleSelector(false);
-      };
-      
-      // Update configuration
-      const handleConfigChange = (newConfig) => {
-        setConfig(prevConfig => ({
-          ...prevConfig,
-          ...newConfig
-        }));
-      };
-      
-      // Update DP parameters
-      const handleDpParamChange = (paramName, value) => {
-        setConfig(prevConfig => ({
-          ...prevConfig,
-          dpParams: {
-            ...prevConfig.dpParams,
-            [paramName]: value
-          }
-        }));
-      };
-      
-      // Start training process
-      const handleStartTraining = async () => {
-        if (isTraining) return;
-        
-        setIsTraining(true);
-        setTrainingProgress({
-          currentEpoch: 0,
-          accuracy: [],
-          loss: [],
-          privacyBudgetUsed: []
-        });
-        setResults(null);
-        
-        try {
-          // Initialize DP-SGD
-          const dpsgd = new DPSGD({
-            learningRate: config.dpParams.learningRate,
-            clipNorm: config.dpParams.clipNorm,
-            noiseMultiplier: config.dpParams.noiseMultiplier,
-            batchSize: config.dpParams.batchSize
-          });
-          
-          // Simulate training
-          const trainingResult = await dpsgd.train(config, (progress) => {
-            setTrainingProgress(prevProgress => ({
-              ...prevProgress,
-              currentEpoch: progress.currentEpoch,
-              accuracy: [...prevProgress.accuracy, progress.accuracy],
-              loss: [...prevProgress.loss, progress.loss],
-              privacyBudgetUsed: [...prevProgress.privacyBudgetUsed, progress.privacyBudgetUsed]
-            }));
-          });
-          
-          setResults(trainingResult);
-        } catch (error) {
-          console.error("Training error:", error);
-        } finally {
-          setIsTraining(false);
-        }
-      };
-      
-      // Stop ongoing training
-      const handleStopTraining = () => {
-        if (!isTraining) return;
-        setIsTraining(false);
-      };
-      
-      // Calculate estimated privacy budget
-      const calculatePrivacyBudget = () => {
-        // Simplified Analytical Gaussian method for educational purposes
-        const { noiseMultiplier, batchSize, epochs } = config.dpParams;
-        const samplingRate = batchSize / 60000; // Assuming MNIST size
-        const steps = epochs * (1 / samplingRate);
-        const delta = 1e-5; // Common delta value
-        
-        const c = Math.sqrt(2 * Math.log(1.25 / delta));
-        const epsilon = (c * samplingRate * Math.sqrt(steps)) / noiseMultiplier;
-        
-        return Math.min(epsilon, 100); // Cap at 100
-      };
-      
-      // Estimated privacy budget
-      const expectedPrivacyBudget = calculatePrivacyBudget();
-      
-      return (
-        <div className="app-container">
-          <header className="main-header">
-            <div className="header-container">
-              <div className="logo-container">
-                <span className="logo">DP-SGD Explorer</span>
-                <span className="tagline">Interactive Learning & Experimentation</span>
-              </div>
-              
-              <nav className="main-nav">
-                <ul className="nav-list">
-                  <li>
-                    <div 
-                      className={`nav-link ${activeSection === 'learning-hub' ? 'active' : ''}`}
-                      onClick={() => setActiveSection('learning-hub')}
-                    >
-                      <span className="nav-icon">📚</span>
-                      Learning Hub
-                    </div>
-                  </li>
-                  <li>
-                    <div 
-                      className={`nav-link ${activeSection === 'playground' ? 'active' : ''}`}
-                      onClick={() => setActiveSection('playground')}
-                    >
-                      <span className="nav-icon">🧪</span>
-                      Playground
-                    </div>
-                  </li>
-                </ul>
-              </nav>
-              
-              <div className="user-role-selector">
-                <button 
-                  className="role-button"
-                  onClick={() => setShowRoleSelector(!showRoleSelector)}
-                >
-                  <span className="current-role">{currentRole.label}</span>
-                  <span className="role-icon">⌄</span>
-                </button>
-                
-                {showRoleSelector && (
-                  <div className="role-dropdown">
-                    <ul>
-                      {roles.map(role => (
-                        <li key={role.id}>
-                          <button 
-                            className={role.id === userRole ? 'active' : ''}
-                            onClick={() => handleRoleSelect(role.id)}
-                          >
-                            {role.label}
-                            {role.id === userRole && <span className="check-icon">✓</span>}
-                          </button>
-                        </li>
-                      ))}
-                    </ul>
-                    <div className="role-info">
-                      <p>Selecting a role customizes content to your needs.</p>
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </header>
-          
-          <main className="main-content">
-            {activeSection === 'learning-hub' && (
-              <LearningHub userRole={userRole} />
-            )}
-            
-            {activeSection === 'playground' && (
-              <div className="hands-on-lab">
-                <h1 className="section-title">DP-SGD Interactive Playground</h1>
-                
-                <div className="lab-container">
-                  <div className="lab-sidebar">
-                    <ModelConfigurationPanel 
-                      config={config}
-                      onConfigChange={handleConfigChange}
-                      disabled={isTraining}
-                    />
-                    
-                    <ParameterControlPanel 
-                      dpParams={config.dpParams}
-                      onParamChange={handleDpParamChange}
-                      expectedPrivacyBudget={expectedPrivacyBudget}
-                      disabled={isTraining}
-                    />
-                    
-                    <div className="control-buttons">
-                      <button 
-                        className={`primary-button ${isTraining ? 'running' : ''}`}
-                        onClick={isTraining ? handleStopTraining : handleStartTraining}
-                        aria-label={isTraining ? "Stop Training" : "Start Training"}
-                      >
-                        {isTraining ? 'Stop' : 'Run Training'}
-                      </button>
-                    </div>
-                  </div>
-                  
-                  <div className="lab-main">
-                    <div className="visualizer-container">
-                      <TrainingVisualizer 
-                        progress={trainingProgress}
-                        isTraining={isTraining}
-                        config={config}
-                      />
-                    </div>
-                    
-                    <div className="results-container">
-                      <ResultsPanel 
-                        results={results}
-                        config={config}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )}
-          </main>
-          
-          <footer className="main-footer">
-            <p>DP-SGD Explorer - An Educational Tool for Differential Privacy in Machine Learning</p>
-            <p>© {new Date().getFullYear()} - For educational purposes</p>
-          </footer>
-        </div>
-      );
-    };
-    
-    // Render the App
-    const root = ReactDOM.createRoot(document.getElementById('root'));
-    root.render(<App />);
-  </script>
-</body>
-</html>    .step-title {
-      font-weight: 500;
-      color: var(--text-secondary);
-    }
-    
-    .step-title.active {
-      color: var(--primary-color);
-    }
-    
-    .step-title.completed {
-      color: var(--text-primary);
-    }
-    
-    /* Footer */
-    .main-footer {
-      background-color: var(--primary-dark);
-      color: var(--text-light);
-      padding: var(--spacing-lg);
-      text-align: center;
-      margin-top: var(--spacing-xxl);
-    }
-    
-    /* Responsive Adjustments */
-    @media screen and (max-width: 1200px) {
-      .metrics-grid {
-        grid-template-columns: repeat(2, 1fr);
-      }
-      
-      .learning-container {
-        grid-template-columns: 1fr;
-      }
-    }
-
-    @media screen and (max-width: 900px) {
-      .lab-container {
-        grid-template-columns: 1fr;
-      }
-      
-      .nav-list {
-        gap: var(--spacing-md);
-      }
-      
-      .nav-link {
-        padding: var(--spacing-sm);
-      }
-    }
-
-    @media screen and (max-width: 600px) {
-      .preset-buttons {
-        grid-template-columns: 1fr;
-      }
-      
-      .metrics-grid {
-        grid-template-columns: 1fr;
-      }
-      
-      .nav-icon {
-        display: none;
-      }
-    }
-  </style>
-</head>
-<body>
-  <div id="root"></div>
-
-  <script type="text/babel">
-    // ========== Utility Components ==========
-    
-    // Technical Tooltip Component
-    const TechnicalTooltip = ({ text, wide = false }) => {
-      const [isVisible, setIsVisible] = React.useState(false);
-      const tooltipRef = React.useRef(null);
-      
-      // Handle clicks outside to close tooltip
-      React.useEffect(() => {
-        const handleClickOutside = (event) => {
-          if (tooltipRef.current && !tooltipRef.current.contains(event.target)) {
-            setIsVisible(false);
-          }
-        };
-        
-        if (isVisible) {
-          document.addEventListener('mousedown', handleClickOutside);
-        }
-        
-        return () => {
-          document.removeEventListener('mousedown', handleClickOutside);
-        };
-      }, [isVisible]);
-      
-      return (
-        <div className="tooltip-container" ref={tooltipRef}>
-          <button
-            className="tooltip-icon"
-            onClick={() => setIsVisible(!isVisible)}
-            aria-label="Show explanation"
-            type="button"
-          >
-            ?
-          </button>
-          
-          {isVisible && (
-            <div 
-              className={`tooltip-content ${wide ? 'wide' : ''}`}
-              role="tooltip"
-            >
-              {text}
-            </div>
-          )}
-        </div>
-      );
-    };
-    
-    // ========== Core DPSGD Components ==========
-    
-    // DPSGD Class - Simplified for educational purposes
-    class DPSGD {
-      constructor(config) {
-        this.learningRate = config.learningRate || 0.01;
-        this.clipNorm = config.clipNorm || 1.0;
-        this.noiseMultiplier = config.noiseMultiplier || 1.0;
-        this.batchSize = config.batchSize || 32;
-        this.onBatchEnd = config.onBatchEnd || (() => {});
-        
-        // Privacy tracking
-        this.stepCount = 0;
-      }
-      
-      // Simulate training for educational purposes
-      async train(config, onProgress) {
-        const { epochs = 5 } = config;
-        
-        // History to track metrics
-        const history = {
-          accuracy: [],
-          loss: [],
-          privacyBudgetUsed: []
-        };
-        
-        // Reset step counter
-        this.stepCount = 0;
-        
-        // Simulate training loop
-        for (let epoch = 0; epoch < epochs; epoch++) {
-          console.log(`Starting epoch ${epoch + 1}/${epochs}`);
-          
-          // Calculate synthetic metrics (simulated)
-          const baseAccuracy = 0.75; // Starting point
-          const noisePenalty = this.noiseMultiplier * 0.05; // Higher noise = lower accuracy
-          const clipPenalty = Math.abs(1.0 - this.clipNorm) * 0.03; // Clipping too high or too low hurts
-          const epochBonus = Math.min(epoch * 0.05, 0.15); // Improvement with epochs
-          
-          // Calculate accuracy with some randomness
-          const accuracy = Math.min(
-            0.98, // max possible
-            baseAccuracy - noisePenalty - clipPenalty + epochBonus + (Math.random() * 0.02)
-          );
-          
-          // Calculate loss (inverse relationship with accuracy)
-          const loss = Math.max(0.1, 1.0 - accuracy + (Math.random() * 0.05));
-          
-          // Calculate privacy budget used based on parameters
-          const samplingRate = this.batchSize / 60000; // Assume MNIST size
-          const privacyBudgetUsed = this.calculatePrivacyBudget(
-            this.noiseMultiplier,
-            samplingRate,
-            epoch + 1
-          );
-          
-          // Store metrics
-          history.accuracy.push(accuracy);
-          history.loss.push(loss);
-          history.privacyBudgetUsed.push(privacyBudgetUsed);
-          
-          // Report progress after a slight delay to simulate computation
-          await new Promise(resolve => setTimeout(resolve, 500));
-          onProgress({
-            currentEpoch: epoch,
-            accuracy: accuracy,
-            loss: loss,
-            privacyBudgetUsed: privacyBudgetUsed
-          });
-          
-          this.stepCount += Math.floor(60000 / this.batchSize); // Simulate steps per epoch
-        }
-        
-        // Return final results
-        return {
-          accuracy: history.accuracy[history.accuracy.length - 1],
-          loss: history.loss[history.loss.length - 1],
-          privacyBudget: history.privacyBudgetUsed[history.privacyBudgetUsed.length - 1],
-          trainingTime: epochs * 2.5, // Simulated time in seconds
-          history: history
-        };
-      }
-      
-      // Calculate privacy budget (simplified Analytical Gaussian method)
-      calculatePrivacyBudget(noiseMultiplier, samplingRate, epochs) {
-        const steps = epochs * (1 / samplingRate);
-        const delta = 1e-5; // Common delta value
-        
-        // Simple formula for analytical Gaussian (simplified)
-        const c = Math.sqrt(2 * Math.log(1.25 / delta));
-        const epsilon = (c * samplingRate * Math.sqrt(steps)) / noiseMultiplier;
-        
-        return Math.min(epsilon, 100); // Cap at 100 to prevent overflow
-      }
-    }
-    
-    // ========== Page Components ==========
-    
-    // Model Configuration Panel
-    const ModelConfigurationPanel = ({ config, onConfigChange, disabled }) => {
-      const datasets = [
-        { id: 'mnist', name: 'MNIST Digits', description: 'Handwritten digits (0-9)', examples: 60000, dimensions: '28×28 px' },
-        { id: 'fashion-mnist', name: 'Fashion MNIST', description: 'Clothing items (10 classes)', examples: 60000, dimensions: '28×28 px' },
-        { id: 'cifar10', name: 'CIFAR-10', description: 'Natural images (10 classes)', examples: 50000, dimensions: '32×32 px' },
-        { id: 'synthetic', name: 'Synthetic Data', description: 'Generated tabular data', examples: 10000, dimensions: '20 features' }
-      ];
-      
-      const modelArchitectures = [
-        { id: 'simple-mlp', name: 'Simple MLP', description: 'Multi-layer perceptron with 2 hidden layers', params: '15K', complexity: 'Low' },
-        { id: 'simple-cnn', name: 'Simple CNN', description: 'Convolutional network with 2 conv layers', params: '120K', complexity: 'Medium' },
-        { id: 'advanced-cnn', name: 'Advanced CNN', description: 'Deeper CNN with residual connections', params: '1.2M', complexity: 'High' }
-      ];
-      
-      const handleDatasetChange = (e) => {
-        onConfigChange({ dataset: e.target.value });
-      };
-      
-      const handleModelChange = (e) => {
-        onConfigChange({ modelArchitecture: e.target.value });
-      };
-      
-      const currentDataset = datasets.find(d => d.id === config.dataset) || datasets[0];
-      const currentModel = modelArchitectures.find(m => m.id === config.modelArchitecture) || modelArchitectures[0];
-      
-      return (
-        <div className="model-configuration-panel">
-          <h2 className="panel-title">Model Configuration</h2>
-          
-          <div className="config-section">
-            <div className="section-header">
-              <h3>Dataset</h3>
-              <TechnicalTooltip text="The dataset used for training affects privacy budget calculations and model accuracy." />
-            </div>
-            
-            <select 
-              id="dataset-select"
-              value={config.dataset}
-              onChange={handleDatasetChange}
-              disabled={disabled}
-              className="config-select"
-            >
-              {datasets.map(dataset => (
-                <option key={dataset.id} value={dataset.id}>
-                  {dataset.name}
-                </option>
-              ))}
-            </select>
-            
-            <div className="dataset-info">
-              <div className="info-item">
-                <span className="info-label">Description:</span>
-                <span className="info-value">{currentDataset.description}</span>
-              </div>
-              <div className="info-item">
-                <span className="info-label">Training Examples:</span>
-                <span className="info-value">{currentDataset.examples.toLocaleString()}</span>
-              </div>
-              <div className="info-item">
-                <span className="info-label">Dimensions:</span>
-                <span className="info-value">{currentDataset.dimensions}</span>
-              </div>
-            </div>
-          </div>
-          
-          <div className="config-section">
-            <div className="section-header">
-              <h3>Model Architecture</h3>
-              <TechnicalTooltip text="The model architecture affects training time, capacity to learn, and resilience to noise." />
-            </div>
-            
-            <select 
-              id="model-select"
-              value={config.modelArchitecture}
-              onChange={handleModelChange}
-              disabled={disabled}
-              className="config-select"
-            >
-              {modelArchitectures.map(model => (
-                <option key={model.id} value={model.id}>
-                  {model.name}
-                </option>
-              ))}
-            </select>
-            
-            <div className="model-info">
-              <div className="info-item">
-                <span className="info-label">Description:</span>
-                <span className="info-value">{currentModel.description}</span>
-              </div>
-              <div className="info-item">
-                <span className="info-label">Parameters:</span>
-                <span className="info-value">{currentModel.params}</span>
-              </div>
-              <div className="info-item">
-                <span className="info-label">Complexity:</span>
-                <span className="info-value">
-                  <span className={`complexity-badge ${currentModel.complexity.toLowerCase()}`}>
-                    {currentModel.complexity}
-                  </span>
-                </span>
-              </div>
-            </div>
-          </div>
-          
-          <div className="config-section preset-section">
-            <div className="section-header">
-              <h3>Quick Presets</h3>
-              <TechnicalTooltip text="Pre-configured settings to demonstrate different privacy-utility trade-offs." />
-            </div>
-            
-            <div className="preset-buttons">
-              <button 
-                className="preset-button high-privacy"
-                disabled={disabled}
-                onClick={() => onConfigChange({
-                  dpParams: {
-                    clipNorm: 1.0,
-                    noiseMultiplier: 1.5,
-                    batchSize: 256,
-                    learningRate: 0.005,
-                    epochs: 10
-                  }
-                })}
-              >
-                <span className="preset-icon">🔒</span>
-                <span className="preset-name">High Privacy</span>
-                <span className="preset-description">ε ≈ 1.2</span>
-              </button>
-              
-              <button 
-                className="preset-button balanced"
-                disabled={disabled}
-                onClick={() => onConfigChange({
-                  dpParams: {
-                    clipNorm: 1.0,
-                    noiseMultiplier: 1.0,
-                    batchSize: 128,
-                    learningRate: 0.01,
-                    epochs: 8
-                  }
-                })}
-              >
-                <span className="preset-icon">⚖️</span>
-                <span className="preset-name">Balanced</span>
-                <span className="preset-description">ε ≈ 3.0</span>
-              </button>
-              
-              <button 
-                className="preset-button high-utility"
-                disabled={disabled}
-                onClick={() => onConfigChange({
-                  dpParams: {
-                    clipNorm: 1.5,
-                    noiseMultiplier: 0.5,
-                    batchSize: 64,
-                    learningRate: 0.02,
-                    epochs: 5
-                  }
-                })}
-              >
-                <span className="preset-icon">📈</span>
-                <span className="preset-name">High Utility</span>
-                <span className="preset-description">ε ≈ 8.0</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      );
-    };
-    
-    // Parameter Control Panel
-    const ParameterControlPanel = ({ dpParams, onParamChange, expectedPrivacyBudget, disabled }) => {
-      const parameterDescriptions = {
-        clipNorm: "Limits how much any single training example can affect the model update. Smaller values provide stronger privacy but can slow learning.",
-        noiseMultiplier: "Controls how much noise is added to protect privacy. Higher values increase privacy but may reduce accuracy.",
-        batchSize: "Number of examples processed in each training step. Affects both privacy accounting and training stability.",
-        learningRate: "Controls how quickly model parameters update. For DP-SGD, often needs to be smaller than standard SGD.",
-        epochs: "Number of complete passes through the dataset. More epochs improves learning but increases privacy budget consumption."
-      };
-
-      const handleSliderChange = (paramName, event) => {
-        const value = parseFloat(event.target.value);
-        onParamChange(paramName, value);
-      };
-
-      const renderSlider = (paramName, min, max, step, formatter = (v) => v) => {
-        return (
-          <div className="parameter-control" key={paramName}>
-            <div className="parameter-header">
-              <label htmlFor={`param-${paramName}`} className="parameter-label">
-                {getParameterLabel(paramName)}
-              </label>
-              <TechnicalTooltip text={parameterDescriptions[paramName]} />
-            </div>
-            
-            <div className="slider-container">
-              <input
-                id={`param-${paramName}`}
-                type="range"
-                min={min}
-                max={max}
-                step={step}
-                value={dpParams[paramName]}
-                onChange={(e) => handleSliderChange(paramName, e)}
-                disabled={disabled}
-                className="parameter-slider"
-              />
-              <span className="parameter-value">{formatter(dpParams[paramName])}</span>
-            </div>
-          </div>
-        );
-      };
-
-      const getParameterLabel = (paramName) => {
-        switch (paramName) {
-          case 'clipNorm':
-            return 'Clipping Norm (C)';
-          case 'noiseMultiplier':
-            return 'Noise Multiplier (σ)';
-          case 'batchSize':
-            return 'Batch Size';
-          case 'learningRate':
-            return 'Learning Rate (η)';
-          case 'epochs':
-            return 'Epochs';
-          default:
-            return paramName;
-        }
-      };
-
-      // Helper to classify privacy budget for styling
-      const getBudgetClass = (epsilon) => {
-        if (epsilon <= 1) return 'excellent';
-        if (epsilon <= 3) return 'good';
-        if (epsilon <= 6) return 'moderate';
-        return 'weak';
-      };
-
-      return (
-        <div className="parameter-control-panel">
-          <h2 className="panel-title">DP-SGD Parameters</h2>
-          
-          {renderSlider('clipNorm', 0.1, 5.0, 0.1, (v) => v.toFixed(1))}
-          {renderSlider('noiseMultiplier', 0.1, 5.0, 0.1, (v) => v.toFixed(1))}
-          {renderSlider('batchSize', 16, 512, 16, (v) => v)}
-          {renderSlider('learningRate', 0.001, 0.1, 0.001, (v) => v.toFixed(3))}
-          {renderSlider('epochs', 1, 20, 1, (v) => v)}
-          
-          <div className="privacy-budget-estimate">
-            <div className="budget-header">
-              <h3>Estimated Privacy Budget (ε)</h3>
-              <TechnicalTooltip text="This is the estimated privacy loss from training with these parameters. Lower ε means stronger privacy guarantees." />
-            </div>
-            
-            <div className="budget-display">
-              <div className="budget-value">{expectedPrivacyBudget.toFixed(2)}</div>
-              <div className="budget-indicator">
-                <div className="budget-bar">
-                  <div 
-                    className={`budget-fill ${getBudgetClass(expectedPrivacyBudget)}`}
-                    style={{ width: `${Math.min(expectedPrivacyBudget / 10 * 100, 100)}%` }}
-                  ></div>
-                </div>
-                <div className="budget-scale">
-                  <span>Stronger Privacy</span>
-                  <span>Weaker Privacy</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      );
-    };
-    
-    // Training Visualizer with Recharts
-    const TrainingVisualizer = ({ progress, isTraining, config }) => {
-      const { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } = Recharts;
-      const [activeTab, setActiveTab] = React.useState('training');
-      const gradientCanvasRef = React.useRef(null);
-      
-      // Prepare chart data
-      const chartData = React.useMemo(() => {
-        if (!progress.accuracy || !progress.loss) return [];
-        
-        return progress.accuracy.map((acc, idx) => ({
-          epoch: idx + 1,
-          accuracy: acc * 100, // Convert to percentage
-          loss: progress.loss[idx] || 0,
-          privacyBudget: progress.privacyBudgetUsed[idx] || 0
-        }));
-      }, [progress]);
-      
-      // Draw gradient clipping visualization in canvas
-      React.useEffect(() => {
-        if (activeTab === 'gradients' && gradientCanvasRef.current) {
-          const canvas = gradientCanvasRef.current;
-          const ctx = canvas.getContext('2d');
-          
-          // Clear canvas
-          ctx.clearRect(0, 0, canvas.width, canvas.height);
-          
-          // Mock drawing gradient distribution
-          drawGradientDistribution(ctx, canvas.width, canvas.height, config.dpParams.clipNorm);
-        }
-      }, [activeTab, config.dpParams.clipNorm]);
-      
-      // Helper to draw gradient clipping visualization
-      const drawGradientDistribution = (ctx, width, height, clipNorm) => {
-        // Setup
-        const padding = { top: 20, right: 30, bottom: 40, left: 60 };
-        const chartWidth = width - padding.left - padding.right;
-        const chartHeight = height - padding.top - padding.bottom;
-        
-        // Draw axes
-        ctx.strokeStyle = '#ccc';
-        ctx.lineWidth = 1;
-        
-        // Y-axis
-        ctx.beginPath();
-        ctx.moveTo(padding.left, padding.top);
-        ctx.lineTo(padding.left, height - padding.bottom);
-        ctx.stroke();
-        
-        // X-axis
-        ctx.beginPath();
-        ctx.moveTo(padding.left, height - padding.bottom);
-        ctx.lineTo(width - padding.right, height - padding.bottom);
-        ctx.stroke();
-        
-        // Draw distribution curve - before clipping
-        ctx.beginPath();
-        ctx.moveTo(padding.left, height - padding.bottom);
-        
-        // Lognormal-like curve
-        for (let i = 0; i < chartWidth; i++) {
-          const x = padding.left + i;
-          const xValue = (i / chartWidth) * 10; // Scale to 0-10 range
-          
-          // Lognormal-ish function
-          let y = Math.exp(-Math.pow(Math.log(xValue + 0.1) - Math.log(clipNorm * 0.7), 2) / 0.5);
-          y = height - padding.bottom - y * chartHeight * 0.8;
-          
-          if (i === 0) {
-            ctx.moveTo(x, y);
-          } else {
-            ctx.lineTo(x, y);
-          }
-        }
-        
-        ctx.strokeStyle = '#ff9800';
-        ctx.lineWidth = 3;
-        ctx.stroke();
-        
-        // Draw distribution curve - after clipping
-        ctx.beginPath();
-        ctx.moveTo(padding.left, height - padding.bottom);
-        
-        // Calculate clipping threshold position
-        const clipX = padding.left + (clipNorm / 10) * chartWidth;
-        
-        // Draw up to clipping threshold
-        for (let i = 0; i < chartWidth; i++) {
-          const x = padding.left + i;
-          const xValue = (i / chartWidth) * 10;
-          
-          // If beyond clipping threshold, flatline at the threshold value
-          if (x > clipX) break;
-          
-          // Same curve as before
-          let y = Math.exp(-Math.pow(Math.log(xValue + 0.1) - Math.log(clipNorm * 0.7), 2) / 0.5);
-          y = height - padding.bottom - y * chartHeight * 0.8;
-          
-          if (i === 0) {
-            ctx.moveTo(x, y);
-          } else {
-            ctx.lineTo(x, y);
-          }
-        }
-        
-        // Calculate y at clipping point
-        const clipY = height - padding.bottom - Math.exp(-Math.pow(Math.log(clipNorm + 0.1) - Math.log(clipNorm * 0.7), 2) / 0.5) * chartHeight * 0.8;
-        
-        // Draw the rest of the clipped distribution
-        for (let i = Math.floor(clipX - padding.left); i < chartWidth; i++) {
-          const x = padding.left + i;
-          
-          // Values beyond are clipped
-          if (i === Math.floor(clipX - padding.left)) {
-            ctx.lineTo(clipX, clipY);
-          } else {
-            // Add spikes at the clipping threshold to show accumulation
-            const spike = Math.sin(i * 0.5) * 5;
-            ctx.lineTo(x, clipY - spike);
-          }
-        }
-        
-        ctx.strokeStyle = '#4caf50';
-        ctx.lineWidth = 3;
-        ctx.stroke();
-        
-        // Draw clipping threshold line
-        ctx.beginPath();
-        ctx.moveTo(clipX, padding.top);
-        ctx.lineTo(clipX, height - padding.bottom);
-        ctx.strokeStyle = '#f44336';
-        ctx.lineWidth = 2;
-        ctx.setLineDash([5, 3]);
-        ctx.stroke();
-        ctx.setLineDash([]);
-        
-        // Draw labels
-        ctx.fillStyle = '#333';
-        ctx.font = '12px Arial';
-        ctx.textAlign = 'center';
-        
-        // X-axis label
-        ctx.fillText('Gradient L2 Norm', width / 2, height - 5);
-        
-        // Clipping threshold label
-        ctx.fillText(`Clipping Threshold (C = ${clipNorm})`, clipX, padding.top - 5);
-        
-        // Legend
-        ctx.textAlign = 'left';
-        ctx.fillStyle = '#ff9800';
-        ctx.fillRect(padding.left, padding.top, 10, 10);
-        ctx.fillStyle = '#333';
-        ctx.fillText('Original Gradients', padding.left + 15, padding.top + 9);
-        
-        ctx.fillStyle = '#4caf50';
-        ctx.fillRect(padding.left, padding.top + 20, 10, 10);
-        ctx.fillStyle = '#333';
-        ctx.fillText('Clipped Gradients', padding.left + 15, padding.top + 29);
-      };
-      
-      return (
-        <div className="training-visualizer">
-          <div className="visualizer-header">
-            <h2 className="visualizer-title">Training Progress</h2>
-            <div className="visualizer-tabs">
-              <button
-                className={`tab-button ${activeTab === 'training' ? 'active' : ''}`}
-                onClick={() => setActiveTab('training')}
-              >
-                Training Metrics
-              </button>
-              <button
-                className={`tab-button ${activeTab === 'gradients' ? 'active' : ''}`}
-                onClick={() => setActiveTab('gradients')}
-              >
-                Gradient Clipping
-              </button>
-              <button
-                className={`tab-button ${activeTab === 'privacy' ? 'active' : ''}`}
-                onClick={() => setActiveTab('privacy')}
-              >
-                Privacy Budget
-              </button>
-            </div>
-          </div>
-          
-          <div className="visualizer-content">
-            {activeTab === 'training' && (
-              <div className="metrics-chart">
-                <ResponsiveContainer width="100%" height={300}>
-                  <LineChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="epoch" label={{ value: 'Epoch', position: 'insideBottomRight', offset: -5 }} />
-                    <YAxis yAxisId="left" label={{ value: 'Accuracy (%)', angle: -90, position: 'insideLeft' }} />
-                    <YAxis yAxisId="right" orientation="right" label={{ value: 'Loss', angle: 90, position: 'insideRight' }} />
-                    <Tooltip />
-                    <Legend />
-                    <Line yAxisId="left" type="monotone" dataKey="accuracy" stroke="#4caf50" name="Accuracy" />
-                    <Line yAxisId="right" type="monotone" dataKey="loss" stroke="#f44336" name="Loss" />
-                  </LineChart>
-                </ResponsiveContainer>
-                
-                {isTraining && (
-                  <div className="training-status">
-                    <div className="status-badge">
-                      <span className="pulse"></span>
-                      <span className="status-text">Training in progress</span>
-                    </div>
-                    <div className="current-epoch">
-                      Epoch: {progress.currentEpoch + 1} / {config.dpParams.epochs}
-                    </div>
-                  </div>
-                )}
-              </div>
-            )}
-            
-            {activeTab === 'gradients' && (
-              <div className="gradients-visualization">
-                <div className="explanation-block">
-                  <h3>Gradient Clipping Visualization</h3>
-                  <p>
-                    The chart below shows a distribution of gradient norms before and after clipping.
-                    The vertical red line indicates the clipping threshold (C = {config.dpParams.clipNorm}).
-                    <TechnicalTooltip text="Clipping ensures no single example has too much influence on model updates, which is essential for differential privacy." />
-                  </p>
-                </div>
-                
-                <div className="gradient-canvas-container">
-                  <canvas 
-                    ref={gradientCanvasRef}
-                    width={600}
-                    height={300}
-                    className="gradient-canvas"
-                  />
-                </div>
-              </div>
-            )}
-            
-            {activeTab === 'privacy' && (
-              <div className="privacy-visualization">
-                <div className="explanation-block">
-                  <h3>Privacy Budget Consumption</h3>
-                  <p>
-                    This chart shows how the privacy budget (ε) accumulates during training.
-                    <TechnicalTooltip text="In differential privacy, we track the 'privacy budget' (ε) which represents the amount of privacy loss. Lower values mean stronger privacy guarantees." />
-                  </p>
-                </div>
-                
-                <ResponsiveContainer width="100%" height={300}>
-                  <LineChart data={chartData} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
-                    <CartesianGrid strokeDasharray="3 3" />
-                    <XAxis dataKey="epoch" label={{ value: 'Epoch', position: 'insideBottomRight', offset: -5 }} />
-                    <YAxis label={{ value: 'Privacy Budget (ε)', angle: -90, position: 'insideLeft' }} />
-                    <Tooltip />
-                    <Legend />
-                    <Line type="monotone" dataKey="privacyBudget" stroke="#3f51b5" name="Privacy Budget (ε)" />
-                  </LineChart>
-                </ResponsiveContainer>
-              </div>
-            )}
-          </div>
-        </div>
-      );
-    };
-    
-    // Results Panel
-    const ResultsPanel = ({ results, config }) => {
-      const [showFinalMetrics, setShowFinalMetrics] = React.useState(true);
-      
-      // Format metrics for display
-      const formatMetric = (value, precision = 2) => {
-        return typeof value === 'number' ? value.toFixed(precision) : 'N/A';
-      };
-      
-      // Get privacy class for styling
-      const getPrivacyClass = (epsilon) => {
-        if (epsilon <= 1) return 'excellent';
-        if (epsilon <= 3) return 'good';
-        if (epsilon <= 6) return 'moderate';
-        return 'weak';
-      };
-      
-      // Generate explanation about privacy-utility tradeoff
-      const getTradeoffExplanation = (accuracy, priv<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>DP-SGD Explorer - Interactive Educational Tool</title>
-
-  <!-- Load React -->
-  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
-  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
-  
-  <!-- Load Babel for JSX -->
-  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-  
-  <!-- Load TensorFlow.js -->
-  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
-  
-  <!-- Load Recharts for visualization -->
-  <script src="https://unpkg.com/[email protected]/umd/Recharts.min.js"></script>
-
-  <style>
-    /* Base Styles */
-    :root {
-      /* Color Palette */
-      --primary-color: #3f51b5;
-      --primary-light: #757de8;
-      --primary-dark: #002984;
-      --secondary-color: #4caf50;
-      --secondary-light: #80e27e;
-      --secondary-dark: #087f23;
-      --accent-color: #ff9800;
-      --error-color: #f44336;
-      --text-primary: #333333;
-      --text-secondary: #666666;
-      --text-light: #ffffff;
-      --background-light: #ffffff;
-      --background-off: #f5f7fa;
-      --background-dark: #e0e0e0;
-      --border-color: #dddddd;
-      
-      /* Typography */
-      --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, sans-serif;
-      --font-size-small: 0.875rem;
-      --font-size-medium: 1rem;
-      --font-size-large: 1.125rem;
-      --font-size-xlarge: 1.5rem;
-      --font-size-xxlarge: 2rem;
-      
-      /* Spacing */
-      --spacing-xs: 0.25rem;
-      --spacing-sm: 0.5rem;
-      --spacing-md: 1rem;
-      --spacing-lg: 1.5rem;
-      --spacing-xl: 2rem;
-      --spacing-xxl: 3rem;
-      
-      /* Shadows */
-      --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-      --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
-      --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
-      
-      /* Border Radius */
-      --border-radius-sm: 0.25rem;
-      --border-radius-md: 0.5rem;
-      --border-radius-lg: 1rem;
-      
-      /* Transitions */
-      --transition-fast: 0.2s ease;
-      --transition-normal: 0.3s ease;
-      --transition-slow: 0.5s ease;
-    }
-
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    html, body {
-      font-family: var(--font-family);
-      font-size: var(--font-size-medium);
-      color: var(--text-primary);
-      background-color: var(--background-off);
-      line-height: 1.5;
-    }
-
-    .app-container {
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-    }
-
-    .main-content {
-      flex: 1;
-      padding: var(--spacing-lg);
-      max-width: 1400px;
-      margin: 0 auto;
-      width: 100%;
-    }
-
-    h1, h2, h3, h4, h5, h6 {
-      margin-bottom: var(--spacing-md);
-      font-weight: 500;
-    }
-
-    a {
-      color: var(--primary-color);
-      text-decoration: none;
-      transition: color var(--transition-fast);
-    }
-
-    a:hover {
-      color: var(--primary-light);
-    }
-
-    button {
-      cursor: pointer;
-      font-family: var(--font-family);
-      font-size: var(--font-size-medium);
-      border: none;
-      background: none;
-    }
-
-    button:disabled {
-      cursor: not-allowed;
-      opacity: 0.6;
-    }
-
-    /* Header & Navigation */
-    .main-header {
-      background-color: var(--primary-color);
-      color: var(--text-light);
-      padding: var(--spacing-md) var(--spacing-lg);
-      box-shadow: var(--shadow-md);
-      position: sticky;
-      top: 0;
-      z-index: 100;
-    }
-
-    .header-container {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      max-width: 1400px;
-      margin: 0 auto;
-    }
-
-    .logo-container {
-      display: flex;
-      flex-direction: column;
-    }
-
-    .logo {
-      font-size: var(--font-size-xlarge);
-      font-weight: 700;
-      color: var(--text-light);
-      text-decoration: none;
-    }
-
-    .tagline {
-      font-size: var(--font-size-small);
-      opacity: 0.8;
-    }
-
-    .main-nav .nav-list {
-      display: flex;
-      list-style: none;
-      gap: var(--spacing-lg);
-    }
-
-    .nav-link {
-      color: var(--text-light);
-      opacity: 0.9;
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-xs);
-      padding: var(--spacing-sm) var(--spacing-md);
-      border-radius: var(--border-radius-sm);
-      transition: all var(--transition-fast);
-      cursor: pointer;
-    }
-
-    .nav-link:hover {
-      opacity: 1;
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-
-    .nav-link.active {
-      background-color: rgba(255, 255, 255, 0.2);
-      opacity: 1;
-    }
-
-    .nav-icon {
-      font-size: var(--font-size-large);
-    }
-
-    /* User selector */
-    .user-role-selector {
-      position: relative;
-    }
-
-    .role-button {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-sm);
-      background-color: rgba(255, 255, 255, 0.2);
-      color: var(--text-light);
-      padding: var(--spacing-sm) var(--spacing-md);
-      border-radius: var(--border-radius-sm);
-      transition: all var(--transition-fast);
-    }
-
-    .role-button:hover {
-      background-color: rgba(255, 255, 255, 0.3);
-    }
-
-    .role-dropdown {
-      position: absolute;
-      top: 100%;
-      right: 0;
-      margin-top: var(--spacing-xs);
-      background-color: var(--background-light);
-      box-shadow: var(--shadow-md);
-      border-radius: var(--border-radius-sm);
-      min-width: 200px;
-      overflow: hidden;
-      z-index: 1000;
-    }
-
-    .role-dropdown ul {
-      list-style: none;
-    }
-
-    .role-dropdown button {
-      width: 100%;
-      text-align: left;
-      padding: var(--spacing-md);
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      transition: all var(--transition-fast);
-    }
-
-    .role-dropdown button:hover {
-      background-color: var(--background-off);
-    }
-
-    .role-dropdown button.active {
-      background-color: var(--primary-light);
-      color: var(--text-light);
-    }
-
-    /* Tooltips */
-    .tooltip-container {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      margin-left: var(--spacing-xs);
-    }
-
-    .tooltip-icon {
-      cursor: help;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background-color: var(--primary-light);
-      color: var(--text-light);
-      font-size: 11px;
-    }
-
-    .tooltip-content {
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      margin-top: var(--spacing-xs);
-      padding: var(--spacing-sm);
-      background-color: var(--text-primary);
-      color: var(--text-light);
-      font-size: var(--font-size-small);
-      border-radius: var(--border-radius-sm);
-      box-shadow: var(--shadow-md);
-      width: max-content;
-      max-width: 250px;
-      z-index: 1000;
-    }
-
-    .tooltip-content::before {
-      content: '';
-      position: absolute;
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      border: 6px solid transparent;
-      border-bottom-color: var(--text-primary);
-    }
-
-    .tooltip-content.wide {
-      max-width: 300px;
-    }
-
-    /* Section Titles */
-    .section-title {
-      font-size: var(--font-size-xxlarge);
-      color: var(--primary-dark);
-      margin-bottom: var(--spacing-xl);
-      position: relative;
-      display: inline-block;
-    }
-
-    .section-title::after {
-      content: '';
-      position: absolute;
-      bottom: -8px;
-      left: 0;
-      width: 60px;
-      height: 4px;
-      background-color: var(--primary-color);
-      border-radius: 2px;
-    }
-
-    .panel-title {
-      font-size: var(--font-size-large);
-      margin-bottom: var(--spacing-md);
-      color: var(--primary-dark);
-    }
-
-    /* Hands-On Lab Layout */
-    .hands-on-lab {
-      margin-top: var(--spacing-md);
-    }
-
-    .lab-container {
-      display: grid;
-      grid-template-columns: 300px 1fr;
-      gap: var(--spacing-lg);
-    }
-
-    .lab-sidebar {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-lg);
-    }
-
-    .lab-main {
-      display: flex;
-      flex-direction: column;
-      gap: var(--spacing-lg);
-    }
-
-    .visualizer-container, 
-    .results-container {
-      background-color: var(--background-light);
-      border-radius: var(--border-radius-md);
-      padding: var(--spacing-lg);
-      box-shadow: var(--shadow-sm);
-    }
-
-    /* Model Configuration Panel */
-    .model-configuration-panel,
-    .parameter-control-panel {
-      background-color: var(--background-light);
-      border-radius: var(--border-radius-md);
-      padding: var(--spacing-lg);
-      box-shadow: var(--shadow-sm);
-    }
-
-    .config-section {
-      margin-bottom: var(--spacing-lg);
-    }
-
-    .section-header {
-      display: flex;
-      align-items: center;
-      margin-bottom: var(--spacing-sm);
-    }
-
-    .section-header h3 {
-      font-size: var(--font-size-medium);
-      margin-bottom: 0;
-    }
-
-    .config-select {
-      width: 100%;
-      padding: var(--spacing-sm);
-      border-radius: var(--border-radius-sm);
-      border: 1px solid var(--border-color);
-      font-family: var(--font-family);
-      font-size: var(--font-size-medium);
-      margin-bottom: var(--spacing-sm);
-    }
-
-    .dataset-info, .model-info {
-      background-color: var(--background-off);
-      border-radius: var(--border-radius-sm);
-      padding: var(--spacing-sm);
-      font-size: var(--font-size-small);
-    }
-
-    .info-item {
-      display: flex;
-      margin-bottom: var(--spacing-xs);
-      gap: var(--spacing-sm);
-    }
-
-    .info-label {
-      font-weight: 500;
-      color: var(--text-secondary);
-      min-width: 100px;
-    }
-
-    .complexity-badge {
-      display: inline-block;
-      padding: 2px 8px;
-      border-radius: var(--border-radius-sm);
-      font-size: var(--font-size-small);
-      font-weight: 500;
-    }
-
-    .complexity-badge.low {
-      background-color: #81c784;
-      color: #1b5e20;
-    }
-
-    .complexity-badge.medium {
-      background-color: #fff176;
-      color: #f57f17;
-    }
-
-    .complexity-badge.high {
-      background-color: #ef9a9a;
-      color: #b71c1c;
-    }
-
-    .preset-section {
-      margin-bottom: 0;
-    }
-
-    .preset-buttons {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: var(--spacing-sm);
-    }
-
-    .preset-button {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: var(--spacing-sm);
-      border-radius: var(--border-radius-sm);
-      background-color: var(--background-off);
-      transition: all var(--transition-fast);
-      text-align: center;
-    }
-
-    .preset-button:hover:not(:disabled) {
-      box-shadow: var(--shadow-sm);
-    }
-
-    .preset-button .preset-icon {
-      font-size: var(--font-size-xlarge);
-      margin-bottom: var(--spacing-xs);
-    }
-
-    .preset-button .preset-name {
-      font-weight: 500;
-      margin-bottom: var(--spacing-xs);
-    }
-
-    .preset-button .preset-description {
-      font-size: var(--font-size-small);
-      color: var(--text-secondary);
-    }
-
-    .preset-button.high-privacy {
-      background-color: #e3f2fd;
-    }
-
-    .preset-button.balanced {
-      background-color: #f1f8e9;
-    }
-
-    .preset-button.high-utility {
-      background-color: #fff8e1;
-    }
-
-    /* Parameter Control Panel */
-    .parameter-control {
-      margin-bottom: var(--spacing-md);
-    }
-
-    .parameter-header {
-      display: flex;
-      align-items: center;
-      margin-bottom: var(--spacing-xs);
-    }
-
-    .parameter-label {
-      font-weight: 500;
-    }
-
-    .slider-container {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-md);
-    }
-
-    .parameter-slider {
-      flex: 1;
-      height: 4px;
-      -webkit-appearance: none;
-      appearance: none;
-      background: var(--background-dark);
-      outline: none;
-      border-radius: 2px;
-    }
-
-    .parameter-slider::-webkit-slider-thumb {
-      -webkit-appearance: none;
-      appearance: none;
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background: var(--primary-color);
-      cursor: pointer;
-      box-shadow: var(--shadow-sm);
-    }
-
-    .parameter-slider::-moz-range-thumb {
-      width: 16px;
-      height: 16px;
-      border-radius: 50%;
-      background: var(--primary-color);
-      cursor: pointer;
-      box-shadow: var(--shadow-sm);
-      border: none;
-    }
-
-    .parameter-value {
-      min-width: 40px;
-      font-weight: 500;
-    }
-
-    .privacy-budget-estimate {
-      margin-top: var(--spacing-lg);
-      background-color: var(--background-off);
-      border-radius: var(--border-radius-sm);
-      padding: var(--spacing-md);
-    }
-
-    .budget-header {
-      display: flex;
-      align-items: center;
-      margin-bottom: var(--spacing-sm);
-    }
-
-    .budget-header h3 {
-      font-size: var(--font-size-medium);
-      margin-bottom: 0;
-    }
-
-    .budget-display {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-md);
-    }
-
-    .budget-value {
-      font-size: var(--font-size-xlarge);
-      font-weight: 500;
-      min-width: 60px;
-    }
-
-    .budget-indicator {
-      flex: 1;
-    }
-
-    .budget-bar {
-      height: 8px;
-      background-color: var(--background-dark);
-      border-radius: 4px;
-      position: relative;
-      margin-bottom: var(--spacing-xs);
-    }
-
-    .budget-fill {
-      height: 100%;
-      border-radius: 4px;
-      transition: width var(--transition-normal);
-    }
-
-    .budget-fill.excellent {
-      background-color: var(--secondary-color);
-    }
-
-    .budget-fill.good {
-      background-color: var(--accent-color);
-    }
-
-    .budget-fill.moderate {
-      background-color: #ff9800;
-    }
-
-    .budget-fill.weak {
-      background-color: var(--error-color);
-    }
-
-    .budget-scale {
-      display: flex;
-      justify-content: space-between;
-      font-size: var(--font-size-small);
-      color: var(--text-secondary);
-    }
-
-    .control-buttons {
-      display: flex;
-      gap: var(--spacing-md);
-      margin-top: var(--spacing-md);
-    }
-
-    .primary-button, .secondary-button {
-      padding: var(--spacing-md) var(--spacing-lg);
-      border-radius: var(--border-radius-sm);
-      font-weight: 500;
-      text-align: center;
-      transition: all var(--transition-fast);
-      flex: 1;
-    }
-
-    .primary-button {
-      background-color: var(--primary-color);
-      color: var(--text-light);
-    }
-
-    .primary-button:hover:not(:disabled) {
-      background-color: var(--primary-dark);
-    }
-
-    .primary-button.running {
-      background-color: var(--error-color);
-    }
-
-    .secondary-button {
-      background-color: var(--background-off);
-      color: var(--primary-color);
-      border: 1px solid var(--primary-color);
-    }
-
-    .secondary-button:hover:not(:disabled) {
-      background-color: var(--primary-color);
-      color: var(--text-light);
-    }
-
-    /* Training Visualizer */
-    .training-visualizer {
-      margin-bottom: var(--spacing-lg);
-    }
-
-    .visualizer-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: var(--spacing-md);
-    }
-
-    .visualizer-tabs {
-      display: flex;
-      gap: var(--spacing-xs);
-    }
-
-    .tab-button {
-      padding: var(--spacing-sm) var(--spacing-md);
-      border-radius: var(--border-radius-sm);
-      font-size: var(--font-size-small);
-      transition: all var(--transition-fast);
-    }
-
-    .tab-button:hover {
-      background-color: var(--background-off);
-    }
-
-    .tab-button.active {
-      background-color: var(--primary-color);
-      color: var(--text-light);
-    }
-
-    .training-status {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-top: var(--spacing-md);
-      padding: var(--spacing-sm) var(--spacing-md);
-      background-color: var(--background-off);
-      border-radius: var(--border-radius-sm);
-    }
-
-    .status-badge {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-sm);
-    }
-
-    .pulse {
-      display: inline-block;
-      width: 10px;
-      height: 10px;
-      border-radius: 50%;
-      background-color: #4caf50;
-      animation: pulse 1.5s infinite;
-    }
-
-    @keyframes pulse {
-      0% {
-        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
-      }
-      70% {
-        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
-      }
-      100% {
-        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
-      }
-    }
-
-    .status-text {
-      font-weight: 500;
-      color: #4caf50;
-    }
-
-    .current-epoch {
-      font-weight: 500;
-    }
-
-    .explanation-block {
-      margin-bottom: var(--spacing-md);
-    }
-
-    .explanation-block h3 {
-      font-size: var(--font-size-medium);
-      margin-bottom: var(--spacing-xs);
-      display: flex;
-      align-items: center;
-    }
-
-    .explanation-block p {
-      color: var(--text-secondary);
-      font-size: var(--font-size-small);
-      display: flex;
-      align-items: center;
-    }
-
-    .gradient-canvas-container {
-      background-color: var(--background-off);
-      border-radius: var(--border-radius-sm);
-      padding: var(--spacing-md);
-      display: flex;
-      justify-content: center;
-    }
-
-    .gradient-canvas {
-      max-width: 100%;
-    }
-
-    /* Results Panel */
-    .results-panel {
-      padding: var(--spacing-md);
-    }
-
-    .results-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: var(--spacing-lg);
-    }
-
-    .view-toggle {
-      display: flex;
-      gap: var(--spacing-xs);
-    }
-
-    .toggle-button {
-      padding: var(--spacing-sm) var(--spacing-md);
-      border-radius: var(--border-radius-sm);
-      font-size: var(--font-size-small);
-      transition: all var(--transition-fast);
-    }
-
-    .toggle-button:hover {
-      background-color: var(--background-off);
-    }
-
-    .toggle-button.active {
-      background-color: var(--primary-color);
-      color: var(--text-light);
-    }
-
-    .no-results {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      min-height: 300px;
-      gap: var(--spacing-md);
-      color: var(--text-secondary);
-    }
-
-    .placeholder-icon {
-      font-size: 48px;
-      opacity: 0.5;
-    }
-
-    .metrics-grid {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: var(--spacing-md);
-      margin-bottom: var(--spacing-lg);
-    }
-
-    .metric-card {
-      background-color: var(--background-off);
-      border-radius: var(--border-radius-sm);
-      padding: var(--spacing-md);
-      text-align: center;
-    }
-
-    .metric-value {
-      font-size: var(--font-size-xlarge);
-      font-weight: 700;
-      margin-bottom: var(--spacing-sm);
-    }
-
-    .metric-value.primary {
-      color: var(--primary-color);
-    }
-
-    .metric-value.privacy-budget {
-      font-size: var(--font-size-large);
-    }
-
-    .metric-value.privacy-budget.excellent {
-      color: var(--secondary-color);
-    }
-
-    .metric-value.privacy-budget.good {
-      color: var(--accent-color);
-    }
-
-    .metric-value.privacy-budget.moderate {
-      color: #ff9800;
-    }
-
-    .metric-value.privacy-budget.weak {
-      color: var(--error-color);
-    }
-
-    .metric-label {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-weight: 500;
-      color: var(--text-secondary);
-    }
-
-    .privacy-utility-summary {
-      background-color: var(--background-off);
-      border-radius: var(--border-radius-sm);
-      padding: var(--spacing-md);
-      margin-bottom: var(--spacing-lg);
-    }
-
-    .tradeoff-meter {
-      margin-top: var(--spacing-sm);
-    }
-
-    .meter-bar {
-      height: 8px;
-      background-color: var(--background-dark);
-      border-radius: 4px;
-      position: relative;
-      margin: var(--spacing-md) 0;
-    }
-
-    .utility-indicator,
-    .privacy-indicator {
-      position: absolute;
-      top: -20px;
-      transform: translateX(-50%);
-    }
-
-    .utility-indicator {
-      color: var(--secondary-color);
-    }
-
-    .privacy-indicator {
-      color: var(--primary-color);
-    }
-
-    .indicator-label {
-      font-weight: 500;
-      font-size: var(--font-size-small);
-    }
-
-    .utility-indicator::after,
-    .privacy-indicator::after {
-      content: '';
-      position: absolute;
-      left: 50%;
-      top: 100%;
-      transform: translateX(-50%);
-      width: 2px;
-      height: 25px;
-    }
-
-    .utility-indicator::after {
-      background-color: var(--secondary-color);
-    }
-
-    .privacy-indicator::after {
-      background-color: var(--primary-color);
-    }
-
-    .meter-explanation {
-      font-size: var(--font-size-small);
-      color: var(--text-secondary);
-    }
-
-    .recommendation-section {
-      background-color: var(--background-off);
-      border-radius: var(--border-radius-sm);
-      padding: var(--spacing-md);
-    }
-
-    .recommendations-list {
-      list-style: none;
-      margin-top: var(--spacing-sm);
-    }
-
-    .recommendation-item {
-      display: flex;
-      align-items: flex-start;
-      gap: var(--spacing-sm);
-      padding: var(--spacing-sm) 0;
-      border-bottom: 1px solid var(--border-color);
-    }
-
-    .recommendation-item:last-child {
-      border-bottom: none;
-    }
-
-    .recommendation-icon {
-      font-size: var(--font-size-large);
-    }
-    
-    /* Learning Hub */
-    .learning-hub {
-      margin-top: var(--spacing-md);
-    }
-    
-    .learning-container {
-      display: grid;
-      grid-template-columns: 1fr 1.5fr;
-      gap: var(--spacing-lg);
-    }
-    
-    .learning-sidebar {
-      background-color: var(--background-light);
-      border-radius: var(--border-radius-md);
-      padding: var(--spacing-lg);
-      box-shadow: var(--shadow-sm);
-    }
-    
-    .learning-content {
-      background-color: var(--background-light);
-      border-radius: var(--border-radius-md);
-      padding: var(--spacing-lg);
-      box-shadow: var(--shadow-sm);
-    }
-    
-    .learning-steps {
-      list-style: none;
-    }
-    
-    .learning-step {
-      display: flex;
-      align-items: center;
-      padding: var(--spacing-sm) 0;
-      margin-bottom: var(--spacing-sm);
-      cursor: pointer;
-      position: relative;
-      padding-left: 36px;
-    }
-    
-    .learning-step::before {
-      content: '';
-      position: absolute;
-      left: 14px;
-      top: 50%;
-      width: 2px;
-      height: calc(100% + var(--spacing-sm));
-      background-color: var(--primary-light);
-      transform: translateY(-50%);
-    }
-    
-    .learning-step:last-child::before {
-      height: 50%;
-    }
-    
-    .learning-step:first-child::before {
-      top: 75%;
-      height: calc(50% + var(--spacing-sm));
-    }
-    
-    .step-indicator {
-      position: absolute;
-      left: 10px;
-      height: 10px;
-      width: 10px;
-      background-color: var(--primary-light);
-      border-radius: 50%;
-      z-index: 1;
-    }
-    
-    .step-indicator.completed {
-      background-color: var(--secondary-color);
-    }
-    
-    .step-indicator.active {
-      background-color: var(--primary-color);
-      height: 16px;
-      width: 16px;
-      left: 7px;
-    }
-    
-    .step-title {
-      font-weight: 500;
-      color: var(--text-secondary);
-    }
-    
-    .step-title.active {
-      color: var(--primary-color);
-    }
-    
-    .step-title.completed {
-      color: var(--text-primary);

start_server.sh

@@ -0,0 +1,60 @@
+#!/bin/bash
+
+# Colors for output
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+RED='\033[0;31m'
+NC='\033[0m' # No Color
+
+# Function to print colored messages
+print_message() {
+    echo -e "${2}${1}${NC}"
+}
+
+# Check if Python 3 is installed
+if ! command -v python3 &> /dev/null; then
+    print_message "Python 3 is not installed. Please install Python 3 first." "$RED"
+    exit 1
+fi
+
+# Check Python version
+PYTHON_VERSION=$(python3 -c 'import sys; print(".".join(map(str, sys.version_info[:2])))')
+print_message "Found Python version: $PYTHON_VERSION" "$GREEN"
+
+# Create virtual environment if it doesn't exist
+if [ ! -d ".venv" ]; then
+    print_message "Creating virtual environment..." "$YELLOW"
+    python3 -m venv .venv
+    if [ $? -ne 0 ]; then
+        print_message "Failed to create virtual environment. Please install python3-venv package." "$RED"
+        exit 1
+    fi
+fi
+
+# Activate virtual environment
+print_message "Activating virtual environment..." "$GREEN"
+source .venv/bin/activate
+if [ $? -ne 0 ]; then
+    print_message "Failed to activate virtual environment." "$RED"
+    exit 1
+fi
+
+# Install or upgrade pip
+print_message "Upgrading pip..." "$YELLOW"
+python3 -m pip install --upgrade pip
+
+# Install requirements
+print_message "Installing dependencies..." "$YELLOW"
+pip install -r requirements.txt
+if [ $? -ne 0 ]; then
+    print_message "Failed to install dependencies." "$RED"
+    exit 1
+fi
+
+# Start the Flask application
+print_message "\n=== DP-SGD Explorer Backend ===" "$GREEN"
+print_message "Starting server..." "$GREEN"
+print_message "The application will be available at http://127.0.0.1:5000\n" "$YELLOW"
+
+# Set Python path and start server
+PYTHONPATH=. python3 run.py