Update gradients clipping chart

Procfile

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

app/__init__.py

@@ -2,8 +2,26 @@ from flask import Flask
 from flask_cors import CORS
 
 def create_app():
-    app = Flask(__name__)
-    CORS(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/routes.py

@@ -1,6 +1,7 @@
-from flask import Blueprint, render_template, jsonify, request
+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()
@@ -14,30 +15,61 @@ def index():
 def learning():
     return render_template('learning.html')
 
-@main.route('/api/train', methods=['POST'])
+@main.route('/api/train', methods=['POST', 'OPTIONS'])
+@cross_origin()
 def train():
-    data = request.json
-    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)
-    return jsonify(results)
-
-@main.route('/api/privacy-budget', methods=['POST'])
+    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():
-    data = request.json
-    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}) 
+    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/styles.css

@@ -204,16 +204,15 @@ body {
 
 /* Charts */
 .chart-container {
+    position: relative;
     height: 300px;
+    width: 100%;
     margin-bottom: 1rem;
-    position: relative;
 }
 
-.chart {
-    width: 100%;
-    height: 100%;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
+.chart-container canvas {
+    width: 100% !important;
+    height: 100% !important;
 }
 
 /* Metrics */
@@ -295,30 +294,35 @@ body {
 .status-badge {
     display: flex;
     align-items: center;
-    margin-top: 1rem;
-    padding: 0.5rem;
-    background-color: var(--background-off);
+    gap: 1rem;
+    padding: 0.5rem 1rem;
+    background-color: #f5f5f5;
     border-radius: 4px;
+    margin-top: 1rem;
 }
 
 .pulse {
     display: inline-block;
-    width: 10px;
-    height: 10px;
+    width: 8px;
+    height: 8px;
     border-radius: 50%;
-    background: var(--secondary-color);
-    margin-right: 0.5rem;
-    animation: pulse 1.5s infinite;
+    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);
     }
 }
@@ -454,4 +458,26 @@ body {
 
 .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

@@ -2,6 +2,7 @@ class DPSGDExplorer {
     constructor() {
         this.trainingChart = null;
         this.privacyChart = null;
+        this.gradientChart = null;
         this.isTraining = false;
         this.initializeUI();
     }
@@ -31,11 +32,29 @@ class DPSGDExplorer {
         for (const [id, slider] of Object.entries(sliders)) {
             if (slider) {
                 slider.addEventListener('input', (e) => {
-                    document.getElementById(`${id}-value`).textContent = e.target.value;
+                    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() {
@@ -92,6 +111,7 @@ class DPSGDExplorer {
     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, {
@@ -115,6 +135,7 @@ class DPSGDExplorer {
                 },
                 options: {
                     responsive: true,
+                    maintainAspectRatio: false,
                     interaction: {
                         mode: 'index',
                         intersect: false,
@@ -127,7 +148,9 @@ class DPSGDExplorer {
                             title: {
                                 display: true,
                                 text: 'Accuracy (%)'
-                            }
+                            },
+                            min: 0,
+                            max: 100
                         },
                         y1: {
                             type: 'linear',
@@ -137,6 +160,8 @@ class DPSGDExplorer {
                                 display: true,
                                 text: 'Loss'
                             },
+                            min: 0,
+                            max: 2,
                             grid: {
                                 drawOnChartArea: false,
                             },
@@ -159,17 +184,80 @@ class DPSGDExplorer {
                 },
                 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: 'Epoch'
+                                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'
+                                    }
+                                }
                             }
                         }
                     }
@@ -236,6 +324,8 @@ class DPSGDExplorer {
         this.resetCharts();
 
         try {
+            console.log('Starting training with parameters:', this.getParameters()); // Debug log
+
             const response = await fetch('/api/train', {
                 method: 'POST',
                 headers: {
@@ -245,10 +335,28 @@ class DPSGDExplorer {
             });
 
             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();
         }
@@ -277,12 +385,21 @@ class DPSGDExplorer {
             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;
 
-        const labels = epochsData.map(d => d.epoch);
+        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);
 
@@ -291,14 +408,85 @@ class DPSGDExplorer {
         this.trainingChart.data.datasets[1].data = losses;
         this.trainingChart.update();
 
-        // Update privacy chart
+        // 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) {
-            this.privacyChart.data.labels = labels;
-            this.privacyChart.data.datasets[0].data = epochsData.map((_, i) => 
+            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) {
@@ -363,6 +551,95 @@ class DPSGDExplorer {
         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

app/templates/base.html

@@ -7,6 +7,11 @@
     <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>

app/templates/index.html

@@ -190,8 +190,8 @@
             </div>
             
             <div id="training-tab" class="tab-content active">
-                <div class="chart-container">
-                    <canvas id="training-chart" class="chart"></canvas>
+                <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;">
@@ -214,8 +214,8 @@
                     </p>
                 </div>
                 
-                <div class="canvas-container">
-                    <canvas id="gradient-canvas" width="600" height="300"></canvas>
+                <div class="chart-container">
+                    <canvas id="gradient-chart" class="chart"></canvas>
                 </div>
             </div>
             
@@ -231,8 +231,8 @@
                     </p>
                 </div>
                 
-                <div class="chart-container">
-                    <canvas id="privacy-chart" class="chart"></canvas>
+                <div class="chart-container" style="position: relative; height: 300px; width: 100%;">
+                    <canvas id="privacy-chart"></canvas>
                 </div>
             </div>
         </div>

app/training/mock_trainer.py

@@ -41,10 +41,17 @@ class MockTrainer:
         # 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
+            'recommendations': recommendations,
+            'gradient_info': gradient_info
         }
     
     def _calculate_privacy_factor(self, clipping_norm: float, noise_multiplier: float) -> float:
@@ -149,4 +156,32 @@ class MockTrainer:
                 'text': 'Model accuracy is low. Consider adjusting privacy parameters.'
             })
         
-        return recommendations 
+        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] 

run.py

@@ -1,6 +1,12 @@
 from app import create_app
+import os
 
 app = create_app()
 
 if __name__ == '__main__':
-    app.run(debug=True) 
+    # 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