Add comprehensive Privacy Attacks visualization page

- Create new /attacks route with interactive privacy attack demonstrations
- Add 5 attack types: Membership Inference, Data Reconstruction, Model Inversion, Property Inference, and Linkage Attack
- Redesign Membership Inference with beginner-friendly story-based flow (no confusing numbered steps)
- Add interactive demos with real-time privacy parameter adjustments
- Include visual confidence comparisons and attack success rate indicators
- Add real-world examples and defense mechanism explanations
- Update navigation to include Privacy Attacks page before Learning Hub
- Add comprehensive CSS styling and JavaScript for interactive features

app/analytics.log.jsonl

@@ -174,3 +174,8 @@
 {"t": 1757898352049, "sessionId": "e6fbeada-329d-41e3-aa40-155e0da60edb", "eventType": "ui_click", "path": "/learning", "payload": {"name": "Playground"}, "user": {}, "vid": "24e47deb0173460e8dd8a821f219efe9", "server_time": "2025-09-15T01:05:52.056017Z", "visitor_id": "a8e5594073f248f099de4e5497ddb0b4", "client_ip_truncated": "127.0.0.0", "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36", "referer": "http://127.0.0.1:5000/learning", "dnt": false, "gpc": false}
 {"t": 1757898431382, "sessionId": "e6fbeada-329d-41e3-aa40-155e0da60edb", "eventType": "ui_click", "path": "/", "payload": {"name": "Learning Hub"}, "user": {}, "vid": "e052efa6573a46f1bb059f505ada8544", "server_time": "2025-09-15T01:07:11.407601Z", "visitor_id": "6ae2cb63be1840929100920b940ae332", "client_ip_truncated": "127.0.0.0", "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36", "referer": "http://127.0.0.1:5000/", "dnt": false, "gpc": false}
 {"t": 1757898439032, "sessionId": "e6fbeada-329d-41e3-aa40-155e0da60edb", "eventType": "ui_click", "path": "/learning", "payload": {"name": "Playground"}, "user": {}, "vid": "287ddc28a4b24227a2076b5d34a49e6b", "server_time": "2025-09-15T01:07:19.037150Z", "visitor_id": "299e5e6dcaed47a990fc7c795739b3c3", "client_ip_truncated": "127.0.0.0", "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36", "referer": "http://127.0.0.1:5000/learning", "dnt": false, "gpc": false}
+{"t": 1761774994565, "sessionId": "29052a4b-7a1c-4f5c-8e36-9d2b50e4c8de", "eventType": "ui_click", "path": "/", "payload": {"name": "Privacy Attacks"}, "user": {}, "vid": "2c5db8a6a7634b4a9d9a4bbe9ebb3c5e", "server_time": "2025-10-29T21:56:34.573200Z", "visitor_id": "c228c7f12d2d4c3ead765becb9033c59", "client_ip_truncated": "127.0.0.0", "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36", "referer": "http://127.0.0.1:5000/", "dnt": false, "gpc": false}
+{"t": 1761775066392, "sessionId": "29052a4b-7a1c-4f5c-8e36-9d2b50e4c8de", "eventType": "ui_click", "path": "/attacks", "payload": {"name": "Run Attack"}, "user": {}, "vid": "539cbc63df294679bf0896d227154d34", "server_time": "2025-10-29T21:57:46.396352Z", "visitor_id": "104f7bb1325e4d00a803928450fe64b5", "client_ip_truncated": "127.0.0.0", "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36", "referer": "http://127.0.0.1:5000/attacks", "dnt": false, "gpc": false}
+{"t": 1761775075784, "sessionId": "29052a4b-7a1c-4f5c-8e36-9d2b50e4c8de", "eventType": "ui_click", "path": "/attacks", "payload": {"name": "Data Reconstruction"}, "user": {}, "vid": "539cbc63df294679bf0896d227154d34", "server_time": "2025-10-29T21:57:55.787095Z", "visitor_id": "78f83018bf744464a9f5c6c4b7592f9b", "client_ip_truncated": "127.0.0.0", "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36", "referer": "http://127.0.0.1:5000/attacks", "dnt": false, "gpc": false}
+{"t": 1761775244547, "sessionId": "29052a4b-7a1c-4f5c-8e36-9d2b50e4c8de", "eventType": "ui_click", "path": "/attacks", "payload": {"name": "Membership Inference"}, "user": {}, "vid": "539cbc63df294679bf0896d227154d34", "server_time": "2025-10-29T22:00:44.550688Z", "visitor_id": "fccadea4699a44878d739754ab550ce6", "client_ip_truncated": "127.0.0.0", "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36", "referer": "http://127.0.0.1:5000/attacks", "dnt": false, "gpc": false}
+{"t": 1761775654300, "sessionId": "17617756460465c10c07bc70e", "eventType": "ui_click", "path": "/", "payload": {"name": "Privacy Attacks"}, "user": {}, "vid": "69e1b401114b49fc822a08f11d3e5622", "server_time": "2025-10-29T22:07:34.307770Z", "visitor_id": "afea81103d01464694ace5666287fb3f", "client_ip_truncated": "172.16.85.0", "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36", "referer": "http://172.16.85.236:7860/", "dnt": false, "gpc": false}

app/routes.py

@@ -53,6 +53,10 @@ def get_or_create_trainer(dataset, model_architecture='simple-mlp'):
 def index():
     return render_template('index.html')
 
+@main.route('/attacks')
+def attacks():
+    return render_template('attacks.html')
+
 @main.route('/learning')
 def learning():
     return render_template('learning.html')
@@ -177,6 +181,77 @@ def trainer_status():
         'dataset': 'MNIST' if REAL_TRAINER_AVAILABLE else 'synthetic'
     })
 
+@main.route('/api/attack-simulation', methods=['POST', 'OPTIONS'])
+@cross_origin()
+def simulate_attack():
+    """Simulate privacy attacks with given parameters."""
+    if request.method == 'OPTIONS':
+        return jsonify({'status': 'ok'})
+    
+    try:
+        data = request.json
+        if not data:
+            return jsonify({'error': 'No data provided'}), 400
+        
+        attack_type = data.get('attack_type')
+        epsilon = float(data.get('epsilon', 3.0))
+        noise_multiplier = float(data.get('noise_multiplier', 1.0))
+        
+        # Simulate different attack success rates based on privacy parameters
+        if attack_type == 'membership_inference':
+            # Membership inference attack simulation
+            base_success = 87  # No privacy baseline
+            privacy_reduction = max(0, (10 - epsilon) * 3.5)
+            noise_reduction = (noise_multiplier - 0.1) * 8
+            success_rate = max(50, min(95, base_success - privacy_reduction - noise_reduction))
+            
+            return jsonify({
+                'attack_type': 'membership_inference',
+                'success_rate': round(success_rate, 1),
+                'epsilon': epsilon,
+                'noise_multiplier': noise_multiplier,
+                'privacy_level': 'high' if epsilon < 2 else 'medium' if epsilon < 5 else 'low'
+            })
+            
+        elif attack_type == 'data_reconstruction':
+            # Data reconstruction attack simulation
+            clipping_norm = float(data.get('clipping_norm', 1.0))
+            base_quality = 0.95
+            clipping_reduction = (5 - clipping_norm) * 0.1
+            noise_reduction = noise_multiplier * 0.25
+            quality = max(0.1, base_quality - clipping_reduction - noise_reduction)
+            
+            return jsonify({
+                'attack_type': 'data_reconstruction',
+                'reconstruction_quality': round(quality, 3),
+                'epsilon': epsilon,
+                'noise_multiplier': noise_multiplier,
+                'clipping_norm': clipping_norm
+            })
+            
+        elif attack_type == 'linkage_attack':
+            # Linkage attack simulation
+            aux_data_quality = int(data.get('aux_data_quality', 3))
+            base_success = aux_data_quality * 15
+            privacy_penalty = (11 - epsilon) * 2
+            success_rate = max(25, min(95, base_success + privacy_penalty))
+            
+            return jsonify({
+                'attack_type': 'linkage_attack',
+                'success_rate': round(success_rate, 1),
+                'epsilon': epsilon,
+                'aux_data_quality': aux_data_quality,
+                'confidence': 'high' if success_rate > 75 else 'medium' if success_rate > 50 else 'low'
+            })
+            
+        else:
+            return jsonify({'error': 'Unknown attack type'}), 400
+            
+    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
+
 
 # ===== Analytics & Identity Endpoints =====
 COOKIE_NAME = "vid"

app/static/js/attacks.js

@@ -0,0 +1,539 @@
+// Privacy Attacks Interactive Demonstrations
+class AttackSimulator {
+    constructor() {
+        this.charts = {};
+        this.initializeEventListeners();
+        this.initializeCharts();
+    }
+
+    initializeEventListeners() {
+        // Tab switching
+        document.querySelectorAll('.attack-tab').forEach(tab => {
+            tab.addEventListener('click', (e) => {
+                this.switchTab(e.target.dataset.attack);
+            });
+        });
+
+        // Slider updates
+        this.setupSliderUpdates();
+    }
+
+    setupSliderUpdates() {
+        // New membership privacy level slider
+        const privacyLevelSlider = document.getElementById('privacy-level-slider');
+        if (privacyLevelSlider) {
+            privacyLevelSlider.addEventListener('input', (e) => {
+                const levels = ['Very High', 'High', 'Medium', 'Low', 'Very Low'];
+                document.getElementById('privacy-level-text').textContent = levels[e.target.value - 1];
+                this.updateMembershipDemo();
+            });
+        }
+
+        // Reconstruction sliders
+        const reconClipping = document.getElementById('recon-clipping-slider');
+        const reconNoise = document.getElementById('recon-noise-slider');
+
+        if (reconClipping) {
+            reconClipping.addEventListener('input', (e) => {
+                document.getElementById('recon-clipping').textContent = e.target.value;
+                this.updateReconstructionAttack();
+            });
+        }
+
+        if (reconNoise) {
+            reconNoise.addEventListener('input', (e) => {
+                document.getElementById('recon-noise-level').textContent = e.target.value;
+                this.updateReconstructionAttack();
+            });
+        }
+
+        // Linkage sliders
+        const linkageQuality = document.getElementById('linkage-quality-slider');
+        const linkagePrivacy = document.getElementById('linkage-privacy-slider');
+
+        if (linkageQuality) {
+            linkageQuality.addEventListener('input', (e) => {
+                const qualities = ['Very Low', 'Low', 'Medium', 'High', 'Very High'];
+                document.getElementById('linkage-quality').textContent = qualities[e.target.value - 1];
+                this.updateLinkageAttack();
+            });
+        }
+
+        if (linkagePrivacy) {
+            linkagePrivacy.addEventListener('input', (e) => {
+                const epsilon = (11 - e.target.value).toFixed(1);
+                document.getElementById('linkage-model-privacy').textContent = `ε=${epsilon}`;
+                this.updateLinkageAttack();
+            });
+        }
+    }
+
+    switchTab(attackType) {
+        // Update tab buttons
+        document.querySelectorAll('.attack-tab').forEach(tab => {
+            tab.classList.remove('active');
+        });
+        document.querySelector(`[data-attack="${attackType}"]`).classList.add('active');
+
+        // Update content
+        document.querySelectorAll('.attack-content').forEach(content => {
+            content.classList.remove('active');
+        });
+        document.getElementById(`${attackType}-content`).classList.add('active');
+
+        // Initialize chart for this tab if needed
+        this.initializeTabChart(attackType);
+    }
+
+    initializeCharts() {
+        this.initializeMembershipChart();
+        this.initializeComparisonChart();
+    }
+
+    initializeMembershipChart() {
+        const ctx = document.getElementById('membership-chart');
+        if (!ctx) return;
+
+        this.charts.membership = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: ['ε=0.5', 'ε=1.0', 'ε=2.0', 'ε=3.0', 'ε=5.0', 'ε=8.0', 'ε=∞'],
+                datasets: [{
+                    label: 'Attack Success Rate',
+                    data: [52, 58, 65, 72, 78, 83, 87],
+                    borderColor: '#ff6b6b',
+                    backgroundColor: 'rgba(255, 107, 107, 0.1)',
+                    tension: 0.4,
+                    fill: true
+                }, {
+                    label: 'Random Guessing',
+                    data: [50, 50, 50, 50, 50, 50, 50],
+                    borderColor: '#666',
+                    borderDash: [5, 5],
+                    fill: false
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Membership Inference Attack Success vs Privacy Budget'
+                    },
+                    legend: {
+                        display: true
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        max: 100,
+                        title: {
+                            display: true,
+                            text: 'Attack Success Rate (%)'
+                        }
+                    },
+                    x: {
+                        title: {
+                            display: true,
+                            text: 'Privacy Budget (ε)'
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    initializeComparisonChart() {
+        const ctx = document.getElementById('comparison-chart');
+        if (!ctx) return;
+
+        this.charts.comparison = new Chart(ctx, {
+            type: 'radar',
+            data: {
+                labels: ['Membership Inference', 'Data Reconstruction', 'Model Inversion', 'Property Inference', 'Linkage Attack'],
+                datasets: [{
+                    label: 'No Privacy (ε=∞)',
+                    data: [87, 92, 78, 83, 89],
+                    borderColor: '#d32f2f',
+                    backgroundColor: 'rgba(211, 47, 47, 0.2)',
+                    pointBackgroundColor: '#d32f2f'
+                }, {
+                    label: 'Low Privacy (ε=8.0)',
+                    data: [72, 76, 65, 70, 74],
+                    borderColor: '#f57c00',
+                    backgroundColor: 'rgba(245, 124, 0, 0.2)',
+                    pointBackgroundColor: '#f57c00'
+                }, {
+                    label: 'Medium Privacy (ε=3.0)',
+                    data: [58, 61, 52, 56, 60],
+                    borderColor: '#fbc02d',
+                    backgroundColor: 'rgba(251, 192, 45, 0.2)',
+                    pointBackgroundColor: '#fbc02d'
+                }, {
+                    label: 'High Privacy (ε=1.0)',
+                    data: [42, 45, 38, 41, 44],
+                    borderColor: '#2e7d32',
+                    backgroundColor: 'rgba(46, 125, 50, 0.2)',
+                    pointBackgroundColor: '#2e7d32'
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Attack Success Rates Across Different Privacy Levels'
+                    }
+                },
+                scales: {
+                    r: {
+                        beginAtZero: true,
+                        max: 100,
+                        ticks: {
+                            stepSize: 20
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    initializeTabChart(attackType) {
+        if (attackType === 'reconstruction') {
+            this.initializeReconstructionChart();
+        } else if (attackType === 'property') {
+            this.initializePropertyChart();
+        } else if (attackType === 'linkage') {
+            this.initializeLinkageChart();
+        }
+    }
+
+    initializeReconstructionChart() {
+        const ctx = document.getElementById('reconstruction-chart');
+        if (!ctx || this.charts.reconstruction) return;
+
+        this.charts.reconstruction = new Chart(ctx, {
+            type: 'bar',
+            data: {
+                labels: ['No Noise', 'Low Noise (σ=0.5)', 'Medium Noise (σ=1.0)', 'High Noise (σ=2.0)', 'Very High Noise (σ=3.0)'],
+                datasets: [{
+                    label: 'Reconstruction Quality (SSIM)',
+                    data: [0.95, 0.78, 0.52, 0.31, 0.18],
+                    backgroundColor: ['#d32f2f', '#f57c00', '#fbc02d', '#689f38', '#2e7d32'],
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Data Reconstruction Quality vs Noise Level'
+                    }
+                },
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        max: 1,
+                        title: {
+                            display: true,
+                            text: 'Reconstruction Quality (SSIM Score)'
+                        }
+                    }
+                }
+            }
+        });
+    }
+
+    initializePropertyChart() {
+        const ctx = document.getElementById('property-chart');
+        if (!ctx || this.charts.property) return;
+
+        this.charts.property = new Chart(ctx, {
+            type: 'doughnut',
+            data: {
+                labels: ['Correctly Inferred', 'Incorrectly Inferred', 'Uncertain'],
+                datasets: [{
+                    data: [52, 18, 30],
+                    backgroundColor: ['#d32f2f', '#f57c00', '#2e7d32'],
+                    borderWidth: 2
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Property Inference Attack Results'
+                    },
+                    legend: {
+                        position: 'bottom'
+                    }
+                }
+            }
+        });
+    }
+
+    initializeLinkageChart() {
+        const ctx = document.getElementById('linkage-chart');
+        if (!ctx || this.charts.linkage) return;
+
+        this.charts.linkage = new Chart(ctx, {
+            type: 'scatter',
+            data: {
+                datasets: [{
+                    label: 'Successful Links',
+                    data: [
+                        {x: 1, y: 45}, {x: 2, y: 52}, {x: 3, y: 61}, {x: 4, y: 68}, {x: 5, y: 74},
+                        {x: 6, y: 79}, {x: 7, y: 83}, {x: 8, y: 86}, {x: 9, y: 89}, {x: 10, y: 91}
+                    ],
+                    backgroundColor: '#d32f2f',
+                    borderColor: '#d32f2f'
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Linkage Attack Success vs Privacy Budget'
+                    }
+                },
+                scales: {
+                    x: {
+                        title: {
+                            display: true,
+                            text: 'Privacy Budget (ε)'
+                        },
+                        min: 0,
+                        max: 11
+                    },
+                    y: {
+                        title: {
+                            display: true,
+                            text: 'Successful Links (%)'
+                        },
+                        min: 0,
+                        max: 100
+                    }
+                }
+            }
+        });
+    }
+
+    // Attack simulation functions
+    updateMembershipDemo() {
+        const privacyLevel = parseInt(document.getElementById('privacy-level-slider').value);
+        
+        // Calculate attack success based on privacy level (1=highest privacy, 5=lowest)
+        const successRates = [45, 52, 65, 78, 87]; // Success rates for each privacy level
+        const successRate = successRates[privacyLevel - 1];
+        
+        // Update confidence differences based on privacy
+        const confidenceDiffs = [6, 8, 14, 22, 28]; // Confidence differences
+        const trainingConf = [88, 90, 92, 94, 96]; // Training confidence
+        const testConf = trainingConf.map((tc, i) => tc - confidenceDiffs[i]); // Test confidence
+        
+        const currentTrainingConf = trainingConf[privacyLevel - 1];
+        const currentTestConf = testConf[privacyLevel - 1];
+        const currentDiff = confidenceDiffs[privacyLevel - 1];
+        
+        // Update visual elements
+        document.getElementById('training-confidence').style.width = `${currentTrainingConf}%`;
+        document.getElementById('training-confidence').textContent = `${currentTrainingConf}%`;
+        
+        document.getElementById('test-confidence').style.width = `${currentTestConf}%`;
+        document.getElementById('test-confidence').textContent = `${currentTestConf}%`;
+        
+        document.getElementById('confidence-diff').textContent = `${currentDiff}%`;
+        
+        // Update success rate circle
+        document.getElementById('membership-success').textContent = `${successRate}%`;
+        
+        // Update circle color based on success rate
+        const circle = document.getElementById('success-rate-circle');
+        if (successRate < 55) {
+            circle.style.background = 'linear-gradient(135deg, #28a745, #20c997)'; // Green - good privacy
+        } else if (successRate < 70) {
+            circle.style.background = 'linear-gradient(135deg, #ffc107, #fd7e14)'; // Yellow - medium privacy
+        } else {
+            circle.style.background = 'linear-gradient(135deg, #dc3545, #fd7e14)'; // Red - poor privacy
+        }
+        
+        // Update explanation text
+        const explanations = [
+            "Excellent! With very high privacy protection, the attacker can barely do better than random guessing (50%). Your data is well protected!",
+            "Great! High privacy protection makes the attack much less effective. The confidence differences are small and hard to exploit.",
+            "With medium privacy protection, the attacker can still succeed 65% of the time. Consider increasing privacy for sensitive data.",
+            "Low privacy protection allows attackers to succeed most of the time. The model shows clear differences between training and test data.",
+            "Very low privacy means the attack is highly successful. The model 'remembers' training data too well, making membership easy to detect."
+        ];
+        
+        document.getElementById('privacy-explanation').textContent = explanations[privacyLevel - 1];
+    }
+
+    updateReconstructionAttack() {
+        const clipping = parseFloat(document.getElementById('recon-clipping-slider').value);
+        const noise = parseFloat(document.getElementById('recon-noise-slider').value);
+        
+        // Calculate reconstruction quality
+        const baseQuality = 0.95;
+        const clippingReduction = (5 - clipping) * 0.1;
+        const noiseReduction = noise * 0.25;
+        
+        const quality = Math.max(0.1, baseQuality - clippingReduction - noiseReduction);
+        
+        const qualityElement = document.getElementById('recon-quality');
+        if (quality > 0.7) {
+            qualityElement.textContent = 'High Quality';
+            qualityElement.className = 'reconstruction-quality quality-high';
+        } else if (quality > 0.4) {
+            qualityElement.textContent = 'Medium Quality';
+            qualityElement.className = 'reconstruction-quality quality-medium';
+        } else {
+            qualityElement.textContent = 'Low Quality';
+            qualityElement.className = 'reconstruction-quality quality-low';
+        }
+    }
+
+    updateLinkageAttack() {
+        const quality = parseInt(document.getElementById('linkage-quality-slider').value);
+        const privacy = parseInt(document.getElementById('linkage-privacy-slider').value);
+        
+        // Calculate linkage success
+        const baseSuccess = quality * 15; // Quality factor
+        const privacyPenalty = (11 - privacy) * 2; // Privacy factor
+        
+        const successRate = Math.max(25, Math.min(95, baseSuccess + privacyPenalty));
+        
+        document.getElementById('linkage-success').textContent = `${Math.round(successRate)}%`;
+        
+        // Update confidence
+        const confidence = document.getElementById('linkage-confidence');
+        if (successRate > 75) {
+            confidence.textContent = 'High';
+        } else if (successRate > 50) {
+            confidence.textContent = 'Medium';
+        } else {
+            confidence.textContent = 'Low';
+        }
+    }
+}
+
+// Attack simulation functions (called by buttons)
+function updatePrivacyDemo() {
+    const simulator = window.attackSimulator;
+    simulator.updateMembershipDemo();
+    
+    // Add visual feedback
+    const button = event.target;
+    const originalText = button.textContent;
+    button.textContent = 'Updating...';
+    button.disabled = true;
+    
+    setTimeout(() => {
+        button.textContent = originalText;
+        button.disabled = false;
+    }, 800);
+}
+
+function runReconstructionAttack() {
+    const simulator = window.attackSimulator;
+    simulator.updateReconstructionAttack();
+    
+    // Add visual feedback
+    const button = event.target;
+    const originalText = button.textContent;
+    button.textContent = 'Reconstructing...';
+    button.disabled = true;
+    
+    setTimeout(() => {
+        button.textContent = originalText;
+        button.disabled = false;
+    }, 2000);
+}
+
+function runInversionAttack() {
+    const classSelect = document.getElementById('inversion-class-select');
+    const privacySlider = document.getElementById('inversion-privacy-slider');
+    
+    const selectedClass = classSelect.value;
+    const privacyLevel = parseInt(privacySlider.value);
+    
+    // Calculate confidence based on privacy level
+    const confidence = Math.max(30, 95 - (privacyLevel * 6));
+    document.getElementById('inversion-confidence').textContent = `${confidence}%`;
+    
+    // Update class display
+    document.getElementById('inversion-class').textContent = classSelect.options[classSelect.selectedIndex].text;
+    
+    // Add visual feedback
+    const button = event.target;
+    const originalText = button.textContent;
+    button.textContent = 'Generating...';
+    button.disabled = true;
+    
+    setTimeout(() => {
+        button.textContent = originalText;
+        button.disabled = false;
+    }, 1800);
+}
+
+function runPropertyAttack() {
+    const propertyType = document.getElementById('property-type').value;
+    const accessLevel = parseInt(document.getElementById('property-access-slider').value);
+    
+    // Calculate property inference accuracy
+    const baseAccuracy = 70;
+    const accessBonus = accessLevel * 8;
+    const accuracy = Math.min(95, baseAccuracy + accessBonus);
+    
+    // Update uncertainty based on privacy (simulated)
+    const uncertainty = Math.max(3, 15 - accessLevel * 2);
+    
+    document.getElementById('property-male').textContent = `${52}% ± ${uncertainty}%`;
+    document.getElementById('property-female').textContent = `${48}% ± ${uncertainty}%`;
+    
+    // Add visual feedback
+    const button = event.target;
+    const originalText = button.textContent;
+    button.textContent = 'Analyzing...';
+    button.disabled = true;
+    
+    setTimeout(() => {
+        button.textContent = originalText;
+        button.disabled = false;
+    }, 2200);
+}
+
+function runLinkageAttack() {
+    const simulator = window.attackSimulator;
+    simulator.updateLinkageAttack();
+    
+    // Add visual feedback
+    const button = event.target;
+    const originalText = button.textContent;
+    button.textContent = 'Linking Data...';
+    button.disabled = true;
+    
+    setTimeout(() => {
+        button.textContent = originalText;
+        button.disabled = false;
+    }, 2500);
+}
+
+// Initialize when page loads
+document.addEventListener('DOMContentLoaded', function() {
+    window.attackSimulator = new AttackSimulator();
+    
+    // Run initial updates
+    window.attackSimulator.updateMembershipDemo();
+    window.attackSimulator.updateReconstructionAttack();
+    window.attackSimulator.updateLinkageAttack();
+});

app/templates/attacks.html

@@ -0,0 +1,1092 @@
+{% extends "base.html" %}
+
+{% block title %}Privacy Attacks - DP-SGD Explorer{% endblock %}
+
+{% block extra_head %}
+<style>
+.attacks-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+}
+
+.attack-tabs {
+    display: flex;
+    background-color: var(--background-off);
+    border-radius: 8px;
+    padding: 4px;
+    margin-bottom: 2rem;
+    overflow-x: auto;
+}
+
+.attack-tab {
+    flex: 1;
+    min-width: 150px;
+    padding: 0.75rem 1rem;
+    text-align: center;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+}
+
+.attack-tab:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.attack-tab.active {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.attack-content {
+    display: none;
+    animation: fadeIn 0.3s ease-in;
+}
+
+.attack-content.active {
+    display: block;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.attack-header {
+    text-align: center;
+    margin-bottom: 2rem;
+    padding: 2rem;
+    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+    color: white;
+    border-radius: 12px;
+}
+
+.attack-header h1 {
+    margin: 0 0 0.5rem 0;
+    font-size: 2.5rem;
+}
+
+.attack-header p {
+    margin: 0;
+    font-size: 1.1rem;
+    opacity: 0.9;
+}
+
+.attack-section {
+    background: white;
+    border-radius: 12px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.attack-title {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.attack-icon {
+    font-size: 2rem;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+}
+
+.attack-demo {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin: 2rem 0;
+}
+
+.demo-panel {
+    background: var(--background-off);
+    padding: 1.5rem;
+    border-radius: 8px;
+}
+
+.demo-controls {
+    margin-bottom: 1rem;
+}
+
+.demo-slider {
+    width: 100%;
+    margin: 0.5rem 0;
+}
+
+.demo-result {
+    background: white;
+    padding: 1rem;
+    border-radius: 4px;
+    margin-top: 1rem;
+    border-left: 4px solid var(--primary-color);
+}
+
+.success-rate {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--primary-color);
+}
+
+.privacy-level {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    margin-left: 0.5rem;
+}
+
+.privacy-high { background: #e8f5e8; color: #2e7d32; }
+.privacy-medium { background: #fff3e0; color: #f57c00; }
+.privacy-low { background: #ffebee; color: #d32f2f; }
+
+.comparison-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+    margin: 2rem 0;
+}
+
+.comparison-card {
+    background: var(--background-off);
+    padding: 1.5rem;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.comparison-value {
+    font-size: 2rem;
+    font-weight: bold;
+    margin: 0.5rem 0;
+}
+
+.defense-section {
+    background: linear-gradient(135deg, #4caf50, #2e7d32);
+    color: white;
+    padding: 2rem;
+    border-radius: 12px;
+    margin-top: 2rem;
+}
+
+.defense-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+.defense-item {
+    background: rgba(255, 255, 255, 0.1);
+    padding: 1.5rem;
+    border-radius: 8px;
+}
+
+.chart-container {
+    position: relative;
+    height: 300px;
+    margin: 1rem 0;
+}
+
+.visual-demo {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin: 1.5rem 0;
+}
+
+.visual-item {
+    text-align: center;
+    padding: 1rem;
+    background: var(--background-off);
+    border-radius: 8px;
+}
+
+.visual-item img {
+    max-width: 100%;
+    height: 120px;
+    object-fit: cover;
+    border-radius: 4px;
+    margin-bottom: 0.5rem;
+}
+
+.reconstruction-quality {
+    font-weight: bold;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+}
+
+.quality-high { background: #ffebee; color: #d32f2f; }
+.quality-medium { background: #fff3e0; color: #f57c00; }
+.quality-low { background: #e8f5e8; color: #2e7d32; }
+
+.linkage-demo {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr auto 1fr;
+    gap: 1rem;
+    align-items: center;
+    margin: 2rem 0;
+}
+
+.linkage-source {
+    background: var(--background-off);
+    padding: 1rem;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.linkage-arrow {
+    font-size: 1.5rem;
+    color: var(--primary-color);
+}
+
+.warning-box {
+    background: #fff3cd;
+    border: 1px solid #ffeaa7;
+    color: #856404;
+    padding: 1rem;
+    border-radius: 8px;
+    margin: 1rem 0;
+}
+
+.info-box {
+    background: #d1ecf1;
+    border: 1px solid #bee5eb;
+    color: #0c5460;
+    padding: 1rem;
+    border-radius: 8px;
+    margin: 1rem 0;
+}
+
+/* Membership Attack Specific Styles */
+.attack-story {
+    margin: 2rem 0;
+}
+
+.story-flow {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin: 2rem 0;
+    overflow-x: auto;
+    padding: 1rem 0;
+}
+
+.story-card {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    min-width: 200px;
+    flex-shrink: 0;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    border: 2px solid #e9ecef;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.story-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.story-card.danger {
+    border-color: #dc3545;
+    background: linear-gradient(135deg, #fff5f5, #ffe6e6);
+}
+
+.story-icon {
+    font-size: 2.5rem;
+    text-align: center;
+    margin-bottom: 1rem;
+}
+
+.story-content h4 {
+    margin: 0 0 0.75rem 0;
+    color: #333;
+    font-size: 1.1rem;
+    text-align: center;
+}
+
+.story-content p {
+    margin: 0;
+    line-height: 1.5;
+    color: #666;
+    text-align: center;
+    font-size: 0.9rem;
+}
+
+.story-arrow {
+    font-size: 1.5rem;
+    color: var(--primary-color);
+    font-weight: bold;
+    flex-shrink: 0;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+    .story-flow {
+        flex-direction: column;
+    }
+    
+    .story-arrow {
+        transform: rotate(90deg);
+    }
+    
+    .story-card {
+        min-width: auto;
+        width: 100%;
+    }
+}
+
+.interactive-demo {
+    background: #f8f9fa;
+    padding: 2rem;
+    border-radius: 12px;
+    margin: 2rem 0;
+}
+
+.demo-scenario {
+    margin-top: 1.5rem;
+}
+
+.scenario-setup {
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.confidence-comparison {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: 2rem;
+    align-items: center;
+    margin: 2rem 0;
+}
+
+.data-sample {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.sample-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.sample-label {
+    font-weight: 600;
+    color: #333;
+}
+
+.sample-status {
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+.sample-status.training {
+    background: #d4edda;
+    color: #155724;
+}
+
+.sample-status.test {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.sample-image {
+    text-align: center;
+    margin: 1rem 0;
+}
+
+.digit-display {
+    width: 80px;
+    height: 80px;
+    background: #e9ecef;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+    color: #495057;
+    margin: 0 auto;
+}
+
+.confidence-bar {
+    margin-top: 1rem;
+}
+
+.confidence-label {
+    font-size: 0.9rem;
+    color: #666;
+    margin-bottom: 0.5rem;
+}
+
+.confidence-meter {
+    background: #e9ecef;
+    height: 30px;
+    border-radius: 15px;
+    position: relative;
+    overflow: hidden;
+}
+
+.confidence-fill {
+    height: 100%;
+    border-radius: 15px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    color: white;
+    transition: width 0.5s ease;
+}
+
+.training-confidence {
+    background: linear-gradient(90deg, #dc3545, #fd7e14);
+}
+
+.test-confidence {
+    background: linear-gradient(90deg, #28a745, #20c997);
+}
+
+.vs-divider {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: var(--primary-color);
+    text-align: center;
+}
+
+.attack-insight {
+    margin-top: 2rem;
+}
+
+.insight-box {
+    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
+    border: 1px solid #ffeaa7;
+    color: #856404;
+    padding: 1.5rem;
+    border-radius: 8px;
+    text-align: center;
+    font-size: 1.1rem;
+}
+
+.privacy-demo {
+    background: white;
+    padding: 2rem;
+    border-radius: 12px;
+    margin: 2rem 0;
+    border: 2px solid var(--primary-color);
+}
+
+.privacy-controls {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-top: 1.5rem;
+}
+
+.control-panel {
+    background: var(--background-off);
+    padding: 1.5rem;
+    border-radius: 8px;
+}
+
+.privacy-scale {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.8rem;
+    color: #666;
+    margin-top: 0.5rem;
+}
+
+.privacy-results {
+    text-align: center;
+}
+
+.success-rate-display {
+    margin: 1.5rem 0;
+}
+
+.rate-circle {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+.rate-number {
+    font-size: 1.8rem;
+    font-weight: bold;
+}
+
+.rate-label {
+    font-size: 0.9rem;
+    opacity: 0.9;
+}
+
+.privacy-explanation {
+    background: var(--background-off);
+    padding: 1rem;
+    border-radius: 8px;
+    margin-top: 1rem;
+    font-size: 0.9rem;
+    line-height: 1.5;
+}
+
+.real-world-examples {
+    margin: 2rem 0;
+}
+
+.example-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin: 1.5rem 0;
+}
+
+.example-card {
+    background: white;
+    padding: 1.5rem;
+    border-radius: 8px;
+    text-align: center;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    border-left: 4px solid var(--primary-color);
+}
+
+.example-icon {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+}
+
+.example-card h4 {
+    margin: 0 0 1rem 0;
+    color: var(--primary-color);
+}
+
+.example-card p {
+    margin: 0;
+    color: #666;
+    line-height: 1.5;
+}
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="attacks-container">
+    <!-- Header Section -->
+    <div class="attack-header">
+        <h1>🛡️ Privacy Attacks in Machine Learning</h1>
+        <p>Understand the threats that differential privacy protects against</p>
+    </div>
+
+    <!-- Navigation Tabs -->
+    <div class="attack-tabs">
+        <button class="attack-tab active" data-attack="membership">Membership Inference</button>
+        <button class="attack-tab" data-attack="reconstruction">Data Reconstruction</button>
+        <button class="attack-tab" data-attack="inversion">Model Inversion</button>
+        <button class="attack-tab" data-attack="property">Property Inference</button>
+        <button class="attack-tab" data-attack="linkage">Linkage Attack</button>
+        <button class="attack-tab" data-attack="comparison">Attack Comparison</button>
+    </div>
+
+    <!-- Membership Inference Attack -->
+    <div id="membership-content" class="attack-content active">
+        <div class="attack-section">
+            <div class="attack-title">
+                <div class="attack-icon">🎯</div>
+                <div>
+                    <h2>Membership Inference Attack</h2>
+                    <p>Can an attacker tell if your data was used to train this model?</p>
+                </div>
+            </div>
+
+            <!-- Story-based explanation -->
+            <div class="attack-story">
+                <h3>🤔 What is this attack?</h3>
+                <div class="story-flow">
+                    <div class="story-card">
+                        <div class="story-icon">🏥</div>
+                        <div class="story-content">
+                            <h4>A Hospital's AI Model</h4>
+                            <p>A hospital trains an AI to diagnose diseases using patient records. Alice was one of the patients whose data was used.</p>
+                        </div>
+                    </div>
+                    
+                    <div class="story-arrow">→</div>
+                    
+                    <div class="story-card">
+                        <div class="story-icon">🕵️</div>
+                        <div class="story-content">
+                            <h4>An Attacker's Question</h4>
+                            <p><strong>"Was Alice's medical record used to train this model?"</strong> The attacker wants to know if Alice was a patient here.</p>
+                        </div>
+                    </div>
+                    
+                    <div class="story-arrow">→</div>
+                    
+                    <div class="story-card">
+                        <div class="story-icon">🎯</div>
+                        <div class="story-content">
+                            <h4>The Attack Trick</h4>
+                            <p>The attacker feeds Alice's data to the model and checks: <strong>"How confident is the model?"</strong> Models remember training data!</p>
+                        </div>
+                    </div>
+                    
+                    <div class="story-arrow">→</div>
+                    
+                    <div class="story-card danger">
+                        <div class="story-icon">⚠️</div>
+                        <div class="story-content">
+                            <h4>Privacy Breach!</h4>
+                            <p>If the model is very confident, the attacker learns Alice was a patient at this hospital - a serious privacy violation!</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Interactive Demo -->
+            <div class="interactive-demo">
+                <h3>🧪 Try the Attack Yourself</h3>
+                <div class="demo-scenario">
+                    <div class="scenario-setup">
+                        <h4>The Setup</h4>
+                        <p>We have a model trained to recognize handwritten digits. Let's see if we can tell which images were in the training set!</p>
+                    </div>
+                    
+                    <div class="confidence-comparison">
+                        <div class="data-sample">
+                            <div class="sample-header">
+                                <span class="sample-label">Training Data Sample</span>
+                                <span class="sample-status training">✓ Was in training</span>
+                            </div>
+                            <div class="sample-image">
+                                <div class="digit-display">7</div>
+                            </div>
+                            <div class="confidence-bar">
+                                <div class="confidence-label">Model Confidence:</div>
+                                <div class="confidence-meter">
+                                    <div class="confidence-fill training-confidence" id="training-confidence" style="width: 92%;">92%</div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="vs-divider">VS</div>
+
+                        <div class="data-sample">
+                            <div class="sample-header">
+                                <span class="sample-label">Test Data Sample</span>
+                                <span class="sample-status test">✗ Not in training</span>
+                            </div>
+                            <div class="sample-image">
+                                <div class="digit-display">7</div>
+                            </div>
+                            <div class="confidence-bar">
+                                <div class="confidence-label">Model Confidence:</div>
+                                <div class="confidence-meter">
+                                    <div class="confidence-fill test-confidence" id="test-confidence" style="width: 78%;">78%</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="attack-insight">
+                        <div class="insight-box">
+                            <strong>🔍 The Attack Insight:</strong> The model is <span id="confidence-diff">14%</span> more confident on training data! 
+                            An attacker can use this difference to guess membership.
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Privacy Protection Demo -->
+            <div class="privacy-demo">
+                <h3>🛡️ How Does Differential Privacy Help?</h3>
+                <div class="privacy-controls">
+                    <div class="control-panel">
+                        <h4>Adjust Privacy Protection</h4>
+                        <div class="demo-controls">
+                            <label>Privacy Level: <span id="privacy-level-text">Medium</span></label>
+                            <input type="range" class="demo-slider" id="privacy-level-slider" min="1" max="5" step="1" value="3">
+                            <div class="privacy-scale">
+                                <span>High Privacy</span>
+                                <span>Low Privacy</span>
+                            </div>
+                        </div>
+                        <button class="control-button" onclick="updatePrivacyDemo()">Update Protection</button>
+                    </div>
+
+                    <div class="privacy-results">
+                        <h4>Attack Success Rate</h4>
+                        <div class="success-rate-display">
+                            <div class="rate-circle" id="success-rate-circle">
+                                <span class="rate-number" id="membership-success">65%</span>
+                                <span class="rate-label">Success</span>
+                            </div>
+                        </div>
+                        <div class="privacy-explanation" id="privacy-explanation">
+                            With medium privacy protection, the attacker can still succeed 65% of the time. Try increasing privacy!
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Real-world Examples -->
+            <div class="real-world-examples">
+                <h3>🌍 Real-World Impact</h3>
+                <div class="example-grid">
+                    <div class="example-card">
+                        <div class="example-icon">🏥</div>
+                        <h4>Healthcare</h4>
+                        <p>Revealing if someone's medical data was used in training could expose their health conditions</p>
+                    </div>
+                    <div class="example-card">
+                        <div class="example-icon">💳</div>
+                        <h4>Finance</h4>
+                        <p>Knowing if someone's financial data was in training could reveal their banking relationships</p>
+                    </div>
+                    <div class="example-card">
+                        <div class="example-icon">📱</div>
+                        <h4>Social Media</h4>
+                        <p>Determining if someone's posts were used could reveal their participation in studies</p>
+                    </div>
+                </div>
+            </div>
+
+            <div class="chart-container">
+                <canvas id="membership-chart"></canvas>
+            </div>
+        </div>
+    </div>
+
+    <!-- Data Reconstruction Attack -->
+    <div id="reconstruction-content" class="attack-content">
+        <div class="attack-section">
+            <div class="attack-title">
+                <div class="attack-icon">🔍</div>
+                <div>
+                    <h2>Data Reconstruction Attack</h2>
+                    <p>Recover training data from model gradients</p>
+                </div>
+            </div>
+
+            <div class="warning-box">
+                <strong>Threat:</strong> Attackers with access to gradients can potentially reconstruct original training images, especially in federated learning scenarios.
+            </div>
+
+            <div class="attack-demo">
+                <div class="demo-panel">
+                    <h3>Gradient Privacy Settings</h3>
+                    <div class="demo-controls">
+                        <label>Clipping Norm: <span id="recon-clipping">1.0</span></label>
+                        <input type="range" class="demo-slider" id="recon-clipping-slider" min="0.1" max="5" step="0.1" value="1.0">
+                        
+                        <label>Noise Level: <span id="recon-noise-level">1.0</span></label>
+                        <input type="range" class="demo-slider" id="recon-noise-slider" min="0" max="3" step="0.1" value="1.0">
+                    </div>
+                    <button class="control-button" onclick="runReconstructionAttack()">Simulate Reconstruction</button>
+                </div>
+
+                <div class="demo-panel">
+                    <h3>Reconstruction Quality</h3>
+                    <div class="visual-demo">
+                        <div class="visual-item">
+                            <div style="width: 120px; height: 120px; background: #f0f0f0; border-radius: 4px; margin: 0 auto 0.5rem; display: flex; align-items: center; justify-content: center;">
+                                Original Image
+                            </div>
+                            <div>Ground Truth</div>
+                        </div>
+                        <div class="visual-item">
+                            <div style="width: 120px; height: 120px; background: #ffcccb; border-radius: 4px; margin: 0 auto 0.5rem; display: flex; align-items: center; justify-content: center;">
+                                Reconstructed
+                            </div>
+                            <div class="reconstruction-quality quality-high" id="recon-quality">High Quality</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="chart-container">
+                <canvas id="reconstruction-chart"></canvas>
+            </div>
+        </div>
+    </div>
+
+    <!-- Model Inversion Attack -->
+    <div id="inversion-content" class="attack-content">
+        <div class="attack-section">
+            <div class="attack-title">
+                <div class="attack-icon">🔄</div>
+                <div>
+                    <h2>Model Inversion Attack</h2>
+                    <p>Extract representative features for each class</p>
+                </div>
+            </div>
+
+            <div class="info-box">
+                <strong>Attack Goal:</strong> Generate synthetic data that represents what the model learned about each class, potentially revealing sensitive attributes.
+            </div>
+
+            <div class="attack-demo">
+                <div class="demo-panel">
+                    <h3>Inversion Parameters</h3>
+                    <div class="demo-controls">
+                        <label>Target Class: <span id="inversion-class">Digit 7</span></label>
+                        <select id="inversion-class-select" class="parameter-select">
+                            <option value="0">Digit 0</option>
+                            <option value="1">Digit 1</option>
+                            <option value="7" selected>Digit 7</option>
+                            <option value="9">Digit 9</option>
+                        </select>
+                        
+                        <label>Privacy Level: <span id="inversion-privacy">Medium</span></label>
+                        <input type="range" class="demo-slider" id="inversion-privacy-slider" min="1" max="10" step="1" value="5">
+                    </div>
+                    <button class="control-button" onclick="runInversionAttack()">Generate Class Representative</button>
+                </div>
+
+                <div class="demo-panel">
+                    <h3>Generated Features</h3>
+                    <div class="visual-demo">
+                        <div class="visual-item">
+                            <div style="width: 120px; height: 120px; background: #e3f2fd; border-radius: 4px; margin: 0 auto 0.5rem; display: flex; align-items: center; justify-content: center; font-size: 3rem;">
+                                7
+                            </div>
+                            <div>Inverted Features</div>
+                            <div style="font-size: 0.8rem; color: #666; margin-top: 0.5rem;">
+                                Confidence: <span id="inversion-confidence">87%</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Property Inference Attack -->
+    <div id="property-content" class="attack-content">
+        <div class="attack-section">
+            <div class="attack-title">
+                <div class="attack-icon">📊</div>
+                <div>
+                    <h2>Property Inference Attack</h2>
+                    <p>Infer statistical properties of the training dataset</p>
+                </div>
+            </div>
+
+            <div class="warning-box">
+                <strong>Privacy Risk:</strong> Attackers can infer sensitive dataset properties like demographic distributions, even without seeing individual records.
+            </div>
+
+            <div class="attack-demo">
+                <div class="demo-panel">
+                    <h3>Target Properties</h3>
+                    <div class="demo-controls">
+                        <label>Property Type:</label>
+                        <select id="property-type" class="parameter-select">
+                            <option value="gender">Gender Distribution</option>
+                            <option value="age">Age Distribution</option>
+                            <option value="location">Geographic Distribution</option>
+                        </select>
+                        
+                        <label>Model Access: <span id="property-access">Black-box</span></label>
+                        <input type="range" class="demo-slider" id="property-access-slider" min="1" max="3" step="1" value="1">
+                    </div>
+                    <button class="control-button" onclick="runPropertyAttack()">Infer Properties</button>
+                </div>
+
+                <div class="demo-panel">
+                    <h3>Inferred Properties</h3>
+                    <div class="demo-result">
+                        <div>Inferred Distribution:</div>
+                        <div style="margin: 1rem 0;">
+                            <div style="display: flex; justify-content: space-between; margin: 0.5rem 0;">
+                                <span>Male:</span> <span id="property-male">52% ± 8%</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; margin: 0.5rem 0;">
+                                <span>Female:</span> <span id="property-female">48% ± 8%</span>
+                            </div>
+                        </div>
+                        <div style="font-size: 0.8rem; color: #666;">
+                            Confidence intervals show attack uncertainty
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="chart-container">
+                <canvas id="property-chart"></canvas>
+            </div>
+        </div>
+    </div>
+
+    <!-- Linkage Attack -->
+    <div id="linkage-content" class="attack-content">
+        <div class="attack-section">
+            <div class="attack-title">
+                <div class="attack-icon">🔗</div>
+                <div>
+                    <h2>Linkage Attack</h2>
+                    <p>Combine model outputs with auxiliary data sources</p>
+                </div>
+            </div>
+
+            <div class="warning-box">
+                <strong>Advanced Threat:</strong> Attackers combine model predictions with external datasets (social media, public records) to identify individuals and infer sensitive attributes.
+            </div>
+
+            <div class="linkage-demo">
+                <div class="linkage-source">
+                    <h4>Model Outputs</h4>
+                    <div>• Prediction scores</div>
+                    <div>• Confidence levels</div>
+                    <div>• Feature importance</div>
+                </div>
+                
+                <div class="linkage-arrow">+</div>
+                
+                <div class="linkage-source">
+                    <h4>Auxiliary Data</h4>
+                    <div>• Public records</div>
+                    <div>• Social media</div>
+                    <div>• Purchase history</div>
+                </div>
+                
+                <div class="linkage-arrow">→</div>
+                
+                <div class="linkage-source">
+                    <h4>Linked Profile</h4>
+                    <div>• Identity revealed</div>
+                    <div>• Sensitive attributes</div>
+                    <div>• Behavioral patterns</div>
+                </div>
+            </div>
+
+            <div class="attack-demo">
+                <div class="demo-panel">
+                    <h3>Linkage Scenario</h3>
+                    <div class="demo-controls">
+                        <label>Auxiliary Data Quality: <span id="linkage-quality">High</span></label>
+                        <input type="range" class="demo-slider" id="linkage-quality-slider" min="1" max="5" step="1" value="4">
+                        
+                        <label>Model Privacy: <span id="linkage-model-privacy">Low (ε=8.0)</span></label>
+                        <input type="range" class="demo-slider" id="linkage-privacy-slider" min="1" max="10" step="1" value="8">
+                    </div>
+                    <button class="control-button" onclick="runLinkageAttack()">Simulate Linkage</button>
+                </div>
+
+                <div class="demo-panel">
+                    <h3>Linkage Success</h3>
+                    <div class="demo-result">
+                        <div>Successful Links: <span class="success-rate" id="linkage-success">68%</span></div>
+                        <div>Confidence: <span id="linkage-confidence">High</span></div>
+                        <div style="margin-top: 1rem; font-size: 0.9rem;">
+                            <div>• 340 individuals identified</div>
+                            <div>• 89% attribute accuracy</div>
+                            <div>• 12% false positives</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="chart-container">
+                <canvas id="linkage-chart"></canvas>
+            </div>
+        </div>
+    </div>
+
+    <!-- Attack Comparison -->
+    <div id="comparison-content" class="attack-content">
+        <div class="attack-section">
+            <div class="attack-title">
+                <div class="attack-icon">⚖️</div>
+                <div>
+                    <h2>Attack Effectiveness Comparison</h2>
+                    <p>How different privacy levels affect attack success rates</p>
+                </div>
+            </div>
+
+            <div class="comparison-grid">
+                <div class="comparison-card">
+                    <h3>No Privacy (ε = ∞)</h3>
+                    <div class="comparison-value" style="color: #d32f2f;">85%</div>
+                    <div>Average Attack Success</div>
+                </div>
+                <div class="comparison-card">
+                    <h3>Low Privacy (ε = 8.0)</h3>
+                    <div class="comparison-value" style="color: #f57c00;">72%</div>
+                    <div>Average Attack Success</div>
+                </div>
+                <div class="comparison-card">
+                    <h3>Medium Privacy (ε = 3.0)</h3>
+                    <div class="comparison-value" style="color: #fbc02d;">58%</div>
+                    <div>Average Attack Success</div>
+                </div>
+                <div class="comparison-card">
+                    <h3>High Privacy (ε = 1.0)</h3>
+                    <div class="comparison-value" style="color: #2e7d32;">42%</div>
+                    <div>Average Attack Success</div>
+                </div>
+            </div>
+
+            <div class="chart-container">
+                <canvas id="comparison-chart"></canvas>
+            </div>
+
+            <div class="info-box">
+                <strong>Key Insight:</strong> As privacy budget (ε) decreases, attack success rates drop significantly. DP-SGD provides measurable protection against all attack types.
+            </div>
+        </div>
+    </div>
+
+    <!-- Defense Mechanisms -->
+    <div class="defense-section">
+        <h2>🛡️ How DP-SGD Defends Against These Attacks</h2>
+        <p>Differential privacy provides mathematical guarantees against all these attack types</p>
+        
+        <div class="defense-grid">
+            <div class="defense-item">
+                <h3>Gradient Noise</h3>
+                <p>Adds calibrated noise to gradients, making it impossible to perfectly reconstruct training data or infer membership with certainty.</p>
+            </div>
+            <div class="defense-item">
+                <h3>Gradient Clipping</h3>
+                <p>Limits the influence of any single training example, preventing attackers from identifying outliers or high-influence samples.</p>
+            </div>
+            <div class="defense-item">
+                <h3>Privacy Accounting</h3>
+                <p>Tracks cumulative privacy loss across training, ensuring mathematical bounds on what attackers can learn.</p>
+            </div>
+            <div class="defense-item">
+                <h3>Composition Guarantees</h3>
+                <p>Provides formal bounds even when multiple attacks are combined, protecting against sophisticated adversaries.</p>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', filename='js/attacks.js') }}"></script>
+{% endblock %}

app/templates/base.html

@@ -24,6 +24,7 @@
                 </div>
                 <nav>
                     <ul class="nav-list">
+                        <li><a href="{{ url_for('main.attacks') }}" class="nav-link {% if request.endpoint == 'main.attacks' %}active{% endif %}">Privacy Attacks</a></li>
                         <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>