Enhanced privacy attack visualizations and DP-SGD defense explanations

Major improvements:
- Replaced digit 7 with realistic medical patient records in membership inference
- Fixed tab overlap with responsive flex layout
- Added concrete 4x4 grid visualization for data reconstruction with varying privacy levels
- Implemented dynamic Model Inversion attack with privacy-based noise/blur
- Added privacy sliders and real-time feedback for Property Inference
- Fixed linkage attack logic (correct epsilon to success rate mapping)
- Removed redundant privacy indicator bars for cleaner UI
- Added personalized DP-SGD defense cards within each attack section
- Each defense explanation is specific to its attack type with unique analogies

app/static/js/attacks.js

@@ -336,8 +336,8 @@ class AttackSimulator {
         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 confidenceDiffs = [8, 12, 18, 24, 28]; // Confidence differences
+        const trainingConf = [76, 80, 86, 92, 96]; // Training confidence
         const testConf = trainingConf.map((tc, i) => tc - confidenceDiffs[i]); // Test confidence
         
         const currentTrainingConf = trainingConf[privacyLevel - 1];
@@ -382,35 +382,156 @@ class AttackSimulator {
         const clipping = parseFloat(document.getElementById('recon-clipping-slider').value);
         const noise = parseFloat(document.getElementById('recon-noise-slider').value);
         
-        // Calculate reconstruction quality
+        // Calculate reconstruction quality (SSIM score)
         const baseQuality = 0.95;
-        const clippingReduction = (5 - clipping) * 0.1;
-        const noiseReduction = noise * 0.25;
+        const clippingReduction = (5 - clipping) * 0.08;
+        const noiseReduction = noise * 0.22;
         
-        const quality = Math.max(0.1, baseQuality - clippingReduction - noiseReduction);
+        const quality = Math.max(0.05, baseQuality - clippingReduction - noiseReduction);
+        const ssimScore = quality.toFixed(2);
         
+        // Update SSIM score display
+        const ssimElement = document.getElementById('ssim-score');
+        if (ssimElement) {
+            ssimElement.textContent = ssimScore;
+            ssimElement.style.color = quality > 0.7 ? '#dc3545' : quality > 0.4 ? '#f57c00' : '#28a745';
+        }
+        
+        // Update quality badge
         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';
+        if (qualityElement) {
+            if (quality > 0.7) {
+                qualityElement.textContent = '❌ High Quality (Vulnerable!)';
+                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 (Protected!)';
+                qualityElement.className = 'reconstruction-quality quality-low';
+            }
+        }
+        
+        // Calculate privacy level
+        const epsilon = Math.max(0.5, 10 - (clipping * 0.5 + noise * 2));
+        const privacyStatus = document.getElementById('privacy-status');
+        if (privacyStatus) {
+            if (epsilon > 6) {
+                privacyStatus.textContent = `❌ Low (ε ≈ ${epsilon.toFixed(1)})`;
+                privacyStatus.style.color = '#dc3545';
+            } else if (epsilon > 3) {
+                privacyStatus.textContent = `⚠️ Medium (ε ≈ ${epsilon.toFixed(1)})`;
+                privacyStatus.style.color = '#f57c00';
+            } else {
+                privacyStatus.textContent = `✅ High (ε ≈ ${epsilon.toFixed(1)})`;
+                privacyStatus.style.color = '#28a745';
+            }
+        }
+        
+        // Update attack success rate
+        const attackSuccess = Math.round(quality * 100);
+        const attackSuccessElement = document.getElementById('attack-success');
+        if (attackSuccessElement) {
+            attackSuccessElement.textContent = `${attackSuccess}%`;
+            attackSuccessElement.style.color = attackSuccess > 70 ? '#dc3545' : attackSuccess > 40 ? '#f57c00' : '#28a745';
+        }
+        
+        // Update reconstructed image visualization
+        this.updateReconstructedImage(quality, noise);
+        
+        // Update explanation
+        const explanationElement = document.getElementById('recon-explanation');
+        if (explanationElement) {
+            if (quality > 0.7) {
+                explanationElement.textContent = '⚠️ Without sufficient privacy protection, attackers can reconstruct training images with high fidelity from gradient information alone!';
+                explanationElement.style.background = '#fff3cd';
+                explanationElement.style.borderLeft = '4px solid #ffc107';
+            } else if (quality > 0.4) {
+                explanationElement.textContent = '🛡️ Medium privacy protection degrades reconstruction quality, but some features may still be visible. Consider increasing noise level.';
+                explanationElement.style.background = '#fff3e0';
+                explanationElement.style.borderLeft = '4px solid #f57c00';
+            } else {
+                explanationElement.textContent = '✅ Excellent! With strong differential privacy, reconstructed images are too noisy to reveal sensitive information. Training data is well protected!';
+                explanationElement.style.background = '#e8f5e9';
+                explanationElement.style.borderLeft = '4px solid #28a745';
+            }
+        }
+    }
+    
+    updateReconstructedImage(quality, noise) {
+        const reconstructedImg = document.getElementById('reconstructed-img');
+        const privacyOverlay = document.getElementById('privacy-overlay');
+        const leakStatus = document.getElementById('leak-status');
+        const modelPrivacyLevel = document.getElementById('model-privacy-level');
+        
+        if (!reconstructedImg) return;
+        
+        // Calculate epsilon for display
+        const epsilon = Math.max(0.5, 10 - (parseFloat(document.getElementById('recon-clipping-slider').value) * 0.5 + noise * 2));
+        if (modelPrivacyLevel) {
+            modelPrivacyLevel.textContent = `ε = ${epsilon.toFixed(1)}`;
+        }
+        
+        if (quality < 0.4) {
+            // High privacy - show heavily obscured/protected image with overlay
+            const svg = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3Cfilter id='heavynoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${1.5 + noise * 0.5}' numOctaves='8' /%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3ClinearGradient id='protectgrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23e8f5e9;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23c8e6c9;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23protectgrad)'/%3E%3Crect width='400' height='500' fill='gray' opacity='0.95' filter='url(%23heavynoise)'/%3E%3C/svg%3E`;
+            reconstructedImg.src = svg;
+            
+            if (privacyOverlay) {
+                privacyOverlay.style.display = 'flex';
+                privacyOverlay.innerHTML = '<div style="font-size: 3rem;">🔒</div><div>PROTECTED</div>';
+            }
+            
+            if (leakStatus) {
+                leakStatus.innerHTML = '✅ ATTACK<br/>FAILED!';
+                leakStatus.style.color = '#28a745';
+            }
+        } else if (quality < 0.7) {
+            // Medium privacy - show partially obscured image
+            const svg = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3Cfilter id='mednoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${0.8 + noise * 0.3}' numOctaves='5' /%3E%3CfeColorMatrix type='saturate' values='0.2'/%3E%3C/filter%3E%3ClinearGradient id='medgrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23fff3e0;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23ffe0b2;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23medgrad)'/%3E%3Crect width='400' height='500' fill='gray' opacity='${0.5 + noise * 0.15}' filter='url(%23mednoise)'/%3E%3Cellipse cx='200' cy='180' rx='80' ry='90' fill='%238b6f47' opacity='0.25'/%3E%3Crect x='140' y='260' width='120' height='160' fill='%236b8e6b' opacity='0.2' rx='8'/%3E%3C/svg%3E`;
+            reconstructedImg.src = svg;
+            
+            if (privacyOverlay) {
+                privacyOverlay.style.display = 'none';
+            }
+            
+            if (leakStatus) {
+                leakStatus.innerHTML = '⚠️ PARTIAL<br/>LEAK';
+                leakStatus.style.color = '#f57c00';
+            }
         } else {
-            qualityElement.textContent = 'Low Quality';
-            qualityElement.className = 'reconstruction-quality quality-low';
+            // Low privacy - show clear reconstruction (vulnerable)
+            const svg = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500'%3E%3Cdefs%3E%3Cfilter id='lightnoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='${0.3 + noise * 0.1}' numOctaves='2' /%3E%3CfeColorMatrix type='saturate' values='0.4'/%3E%3C/filter%3E%3ClinearGradient id='vulngrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23e8b4b8;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23d4a5a8;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='500' fill='url(%23vulngrad)'/%3E%3Crect width='400' height='500' fill='gray' opacity='${0.15 + noise * 0.05}' filter='url(%23lightnoise)'/%3E%3Cellipse cx='200' cy='180' rx='80' ry='90' fill='%238b6f47' opacity='0.5'/%3E%3Crect x='140' y='260' width='120' height='160' fill='%236b8e6b' opacity='0.4' rx='8'/%3E%3Ccircle cx='280' cy='140' r='35' fill='%23fff' opacity='0.2'/%3E%3Crect x='80' y='350' width='240' height='100' fill='%23a0826d' opacity='0.3' rx='6'/%3E%3C/svg%3E`;
+            reconstructedImg.src = svg;
+            
+            if (privacyOverlay) {
+                privacyOverlay.style.display = 'none';
+            }
+            
+            if (leakStatus) {
+                leakStatus.innerHTML = '🚨 LEAKED<br/>PRIVATE DATA!';
+                leakStatus.style.color = '#c1272d';
+            }
         }
     }
 
     updateLinkageAttack() {
         const quality = parseInt(document.getElementById('linkage-quality-slider').value);
-        const privacy = parseInt(document.getElementById('linkage-privacy-slider').value);
+        const privacySlider = parseInt(document.getElementById('linkage-privacy-slider').value);
+        
+        // Calculate epsilon: epsilon = 11 - privacySlider
+        // privacySlider = 1 → ε = 10.0 (LOW privacy, HIGH success)
+        // privacySlider = 10 → ε = 1.0 (HIGH privacy, LOW success)
+        const epsilon = 11 - privacySlider;
         
         // Calculate linkage success
-        const baseSuccess = quality * 15; // Quality factor
-        const privacyPenalty = (11 - privacy) * 2; // Privacy factor
+        // Higher quality = easier to link (increases success)
+        // Higher epsilon (lower privacy) = easier to link (increases success)
+        const qualityBonus = quality * 10; // Quality factor (0-60)
+        const epsilonBonus = epsilon * 4; // Epsilon: 1.0 (high privacy) = 4, 10.0 (low privacy) = 40
         
-        const successRate = Math.max(25, Math.min(95, baseSuccess + privacyPenalty));
+        // Base success is 20%, add quality scaled by epsilon influence
+        const successRate = Math.max(15, Math.min(95, 20 + qualityBonus * (epsilon / 10)));
         
         document.getElementById('linkage-success').textContent = `${Math.round(successRate)}%`;
         
@@ -447,6 +568,9 @@ function runReconstructionAttack() {
     const simulator = window.attackSimulator;
     simulator.updateReconstructionAttack();
     
+    // Update the canvas examples
+    updateCurrentReconstructionExamples();
+    
     // Add visual feedback
     const button = event.target;
     const originalText = button.textContent;
@@ -464,15 +588,42 @@ function runInversionAttack() {
     const privacySlider = document.getElementById('inversion-privacy-slider');
     
     const selectedClass = classSelect.value;
-    const privacyLevel = parseInt(privacySlider.value);
+    const sliderValue = parseInt(privacySlider.value);
     
-    // Calculate confidence based on privacy level
-    const confidence = Math.max(30, 95 - (privacyLevel * 6));
-    document.getElementById('inversion-confidence').textContent = `${confidence}%`;
+    // Invert the slider: slider 1 = high privacy (ε=1), slider 10 = low privacy (ε=10)
+    const privacyLevel = 11 - sliderValue; // For drawing function
+    const epsilon = sliderValue; // epsilon matches slider position now
+    const confidence = Math.max(30, 35 + (sliderValue * 6)); // Higher slider = higher confidence
     
-    // Update class display
+    // Update displays
+    document.getElementById('inversion-confidence').textContent = `${confidence}%`;
     document.getElementById('inversion-class').textContent = classSelect.options[classSelect.selectedIndex].text;
     
+    // Update privacy bar
+    const privacyLevels = ['Very High', 'Very High', 'High', 'High', 'Medium', 'Medium', 'Low', 'Low', 'Very Low', 'Very Low'];
+    updateInversionPrivacyBar(sliderValue, privacyLevels[sliderValue - 1]);
+    
+    // Update explanation based on slider value (1=high privacy, 10=low privacy)
+    const explanation = document.getElementById('inversion-explanation');
+    if (explanation) {
+        if (sliderValue <= 3) {
+            explanation.textContent = '✅ High privacy! The inverted features are very noisy and don\'t reveal clear class characteristics. Training data is well protected!';
+            explanation.style.background = '#e8f5e9';
+            explanation.style.borderLeft = '4px solid #4caf50';
+        } else if (sliderValue <= 6) {
+            explanation.textContent = '⚠️ Medium privacy. Some class features are visible but degraded. Consider increasing privacy for sensitive data.';
+            explanation.style.background = '#fff3e0';
+            explanation.style.borderLeft = '4px solid #ff9800';
+        } else {
+            explanation.textContent = '❌ Low privacy! The model reveals clear, detailed class features. An attacker can learn what the model associates with this class.';
+            explanation.style.background = '#ffebee';
+            explanation.style.borderLeft = '4px solid #f44336';
+        }
+    }
+    
+    // Draw the inverted features on canvas
+    drawInvertedFeatures(selectedClass, privacyLevel);
+    
     // Add visual feedback
     const button = event.target;
     const originalText = button.textContent;
@@ -485,20 +636,119 @@ function runInversionAttack() {
     }, 1800);
 }
 
+function getPrivacyLevelText(level) {
+    if (level <= 2) return 'Very High';
+    if (level <= 4) return 'High';
+    if (level <= 6) return 'Medium';
+    if (level <= 8) return 'Low';
+    return 'Very Low';
+}
+
+function updateInversionPrivacyBar(sliderValue, privacyText) {
+    // Privacy bar has been removed - function kept for compatibility
+}
+
+function drawInvertedFeatures(classDigit, privacyLevel) {
+    const canvas = document.getElementById('inversion-canvas');
+    if (!canvas) return;
+    
+    const ctx = canvas.getContext('2d');
+    const width = canvas.width;
+    const height = canvas.height;
+    
+    ctx.clearRect(0, 0, width, height);
+    
+    // Background
+    ctx.fillStyle = '#e3f2fd';
+    ctx.fillRect(0, 0, width, height);
+    
+    // Calculate noise level based on privacy (1=high privacy/more noise, 10=low privacy/less noise)
+    const noiseLevel = (privacyLevel - 1) / 9; // 0 to 1, where 0 = most noise
+    const clarity = 1 - noiseLevel; // Inverted: high privacy = low clarity
+    
+    // Draw the digit with varying clarity
+    ctx.save();
+    ctx.globalAlpha = Math.max(0.3, clarity);
+    
+    // Draw digit based on selected class - scale font size based on canvas size
+    ctx.fillStyle = '#1976d2';
+    ctx.font = `bold ${Math.floor(width * 0.6)}px Arial`;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText(classDigit, width / 2, height / 2);
+    
+    ctx.restore();
+    
+    // Add noise based on privacy level
+    if (privacyLevel <= 7) {
+        const noiseIntensity = (7 - privacyLevel) / 7; // More noise for higher privacy
+        addCanvasNoise(ctx, noiseIntensity, width, height);
+    }
+    
+    // For very high privacy, add blur effect
+    if (privacyLevel <= 3) {
+        ctx.filter = `blur(${(4 - privacyLevel) * 4}px)`;
+        ctx.drawImage(canvas, 0, 0);
+        ctx.filter = 'none';
+    }
+}
+
+function addCanvasNoise(ctx, intensity, width, height) {
+    if (intensity < 0.1) return;
+    
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const data = imageData.data;
+    
+    for (let i = 0; i < data.length; i += 4) {
+        const noise = (Math.random() - 0.5) * intensity * 200;
+        data[i] += noise;     // R
+        data[i + 1] += noise; // G
+        data[i + 2] += noise; // B
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+}
+
 function runPropertyAttack() {
     const propertyType = document.getElementById('property-type').value;
     const accessLevel = parseInt(document.getElementById('property-access-slider').value);
+    const privacySlider = document.getElementById('property-privacy-slider');
+    const sliderValue = privacySlider ? parseInt(privacySlider.value) : 5;
     
-    // Calculate property inference accuracy
-    const baseAccuracy = 70;
+    // Calculate property inference accuracy based on privacy and access
+    // Lower privacy (higher slider value) = more accurate inference
+    const privacyPenalty = (11 - sliderValue) * 5; // High privacy reduces accuracy
     const accessBonus = accessLevel * 8;
-    const accuracy = Math.min(95, baseAccuracy + accessBonus);
+    const baseAccuracy = 50;
+    const accuracy = Math.min(95, baseAccuracy + accessBonus + (sliderValue * 3));
+    
+    // Update uncertainty based on privacy (high privacy = high uncertainty)
+    const uncertainty = Math.max(2, 20 - sliderValue * 1.5 - accessLevel * 2);
+    
+    document.getElementById('property-male').textContent = `${52}% ± ${Math.round(uncertainty)}%`;
+    document.getElementById('property-female').textContent = `${48}% ± ${Math.round(uncertainty)}%`;
     
-    // Update uncertainty based on privacy (simulated)
-    const uncertainty = Math.max(3, 15 - accessLevel * 2);
+    // Update privacy bar
+    const privacyLevels = ['Very High', 'Very High', 'High', 'High', 'Medium', 'Medium', 'Low', 'Low', 'Very Low', 'Very Low'];
+    updatePropertyPrivacyBar(sliderValue, privacyLevels[sliderValue - 1]);
     
-    document.getElementById('property-male').textContent = `${52}% ± ${uncertainty}%`;
-    document.getElementById('property-female').textContent = `${48}% ± ${uncertainty}%`;
+    // Update explanation
+    const explanation = document.getElementById('property-explanation');
+    if (explanation) {
+        if (sliderValue <= 3) {
+            explanation.textContent = '✅ High privacy! The attacker cannot accurately infer dataset properties. Large confidence intervals show high uncertainty.';
+            explanation.style.background = '#e8f5e9';
+            explanation.style.borderLeft = '4px solid #4caf50';
+        } else if (sliderValue <= 6) {
+            explanation.textContent = '⚠️ Medium privacy. The attacker can infer properties with moderate accuracy. Consider increasing privacy for sensitive datasets.';
+            explanation.style.background = '#fff3e0';
+            explanation.style.borderLeft = '4px solid #ff9800';
+        } else {
+            explanation.textContent = '❌ Low privacy! The attacker can accurately infer sensitive dataset properties like demographic distributions. Privacy breach risk!';
+            explanation.style.background = '#ffebee';
+            explanation.style.borderLeft = '4px solid #f44336';
+        }
+    }
     
     // Add visual feedback
     const button = event.target;
@@ -512,6 +762,10 @@ function runPropertyAttack() {
     }, 2200);
 }
 
+function updatePropertyPrivacyBar(sliderValue, privacyText) {
+    // Privacy bar has been removed - function kept for compatibility
+}
+
 function runLinkageAttack() {
     const simulator = window.attackSimulator;
     simulator.updateLinkageAttack();
@@ -528,6 +782,303 @@ function runLinkageAttack() {
     }, 2500);
 }
 
+// Draw reconstruction examples on canvases
+function drawReconstructionExamples() {
+    // Example data patterns
+    const examples = [
+        { // Face-like
+            draw: (ctx, noise) => {
+                // Head
+                ctx.fillStyle = `rgba(139, 111, 71, ${1 - noise * 0.8})`;
+                ctx.beginPath();
+                ctx.ellipse(60, 45, 30, 35, 0, 0, Math.PI * 2);
+                ctx.fill();
+                
+                // Eyes
+                ctx.fillStyle = `rgba(50, 50, 50, ${1 - noise * 0.9})`;
+                ctx.fillRect(45 + Math.random() * noise * 5, 35, 8, 8);
+                ctx.fillRect(67 + Math.random() * noise * 5, 35, 8, 8);
+                
+                // Nose
+                ctx.fillStyle = `rgba(100, 80, 60, ${1 - noise * 0.85})`;
+                ctx.fillRect(57, 50, 6, 12);
+                
+                // Mouth
+                ctx.fillStyle = `rgba(80, 60, 50, ${1 - noise * 0.9})`;
+                ctx.fillRect(48, 70, 24, 5);
+                
+                // Body
+                ctx.fillStyle = `rgba(107, 142, 107, ${1 - noise * 0.8})`;
+                ctx.fillRect(35, 85, 50, 30);
+            }
+        },
+        { // Eye-like medical scan
+            draw: (ctx, noise) => {
+                // Dark background
+                ctx.fillStyle = '#1a1a1a';
+                ctx.fillRect(0, 0, 120, 120);
+                
+                // Eye socket (bright)
+                ctx.fillStyle = `rgba(255, 200, 100, ${0.9 - noise * 0.7})`;
+                ctx.beginPath();
+                ctx.ellipse(60, 60, 35, 30, 0, 0, Math.PI * 2);
+                ctx.fill();
+                
+                // Pupil (dark)
+                ctx.fillStyle = `rgba(20, 20, 20, ${1 - noise * 0.8})`;
+                ctx.beginPath();
+                ctx.ellipse(60, 60, 15, 15, 0, 0, Math.PI * 2);
+                ctx.fill();
+                
+                // Highlight
+                ctx.fillStyle = `rgba(255, 255, 255, ${0.8 - noise * 0.7})`;
+                ctx.beginPath();
+                ctx.arc(55, 52, 5, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        },
+        { // Medical scan with bright center
+            draw: (ctx, noise) => {
+                // Dark background
+                ctx.fillStyle = '#0a0a0a';
+                ctx.fillRect(0, 0, 120, 120);
+                
+                // Bright center (hot spot)
+                const gradient = ctx.createRadialGradient(60, 60, 5, 60, 60, 40);
+                gradient.addColorStop(0, `rgba(255, 100, 50, ${1 - noise * 0.6})`);
+                gradient.addColorStop(0.5, `rgba(200, 80, 40, ${0.8 - noise * 0.6})`);
+                gradient.addColorStop(1, `rgba(100, 40, 20, ${0.3 - noise * 0.3})`);
+                ctx.fillStyle = gradient;
+                ctx.fillRect(0, 0, 120, 120);
+                
+                // Green markers
+                ctx.fillStyle = `rgba(100, 255, 100, ${0.7 - noise * 0.6})`;
+                ctx.fillRect(20, 20, 8, 8);
+                ctx.fillRect(92, 20, 8, 8);
+                ctx.fillRect(20, 92, 8, 8);
+                ctx.fillRect(92, 92, 8, 8);
+            }
+        },
+        { // Computer/object
+            draw: (ctx, noise) => {
+                // Screen
+                ctx.fillStyle = `rgba(100, 150, 255, ${0.9 - noise * 0.7})`;
+                ctx.fillRect(30, 20, 60, 45);
+                
+                // Screen content
+                ctx.fillStyle = `rgba(200, 220, 255, ${0.8 - noise * 0.7})`;
+                ctx.fillRect(35, 25, 50, 35);
+                
+                // Base
+                ctx.fillStyle = `rgba(80, 80, 80, ${1 - noise * 0.8})`;
+                ctx.fillRect(40, 70, 40, 8);
+                
+                // Stand
+                ctx.fillStyle = `rgba(100, 100, 100, ${1 - noise * 0.8})`;
+                ctx.fillRect(55, 65, 10, 15);
+                
+                // Keyboard
+                ctx.fillStyle = `rgba(60, 60, 60, ${0.9 - noise * 0.7})`;
+                ctx.fillRect(20, 85, 80, 25);
+            }
+        }
+    ];
+    
+    // Draw each example at different privacy levels
+    examples.forEach((example, idx) => {
+        const exampleNum = idx + 1;
+        
+        // Ground truth (original)
+        const originalCanvas = document.getElementById(`original-${exampleNum}`);
+        if (originalCanvas) {
+            const ctx = originalCanvas.getContext('2d');
+            ctx.clearRect(0, 0, 120, 120);
+            example.draw(ctx, 0);
+        }
+        
+        // No privacy (nearly perfect reconstruction - privacy breach!)
+        const noPrivacyCanvas = document.getElementById(`no-privacy-${exampleNum}`);
+        if (noPrivacyCanvas) {
+            const ctx = noPrivacyCanvas.getContext('2d');
+            ctx.clearRect(0, 0, 120, 120);
+            example.draw(ctx, 0.02); // Almost no degradation
+            addNoise(ctx, 0.01, 120, 120); // Minimal noise
+        }
+        
+        // High privacy (ε = 0.1) - complete noise/static
+        const highPrivacyCanvas = document.getElementById(`high-privacy-${exampleNum}`);
+        if (highPrivacyCanvas) {
+            const ctx = highPrivacyCanvas.getContext('2d');
+            ctx.clearRect(0, 0, 120, 120);
+            // Draw pure random noise - no original features visible
+            drawCompleteNoise(ctx, 120, 120);
+        }
+    });
+    
+    // Update current setting examples
+    updateCurrentReconstructionExamples();
+}
+
+function updateCurrentReconstructionExamples() {
+    const clipping = parseFloat(document.getElementById('recon-clipping-slider')?.value || 1.0);
+    const noise = parseFloat(document.getElementById('recon-noise-slider')?.value || 1.0);
+    
+    // Calculate quality/noise level
+    const quality = Math.max(0.05, 0.95 - (5 - clipping) * 0.08 - noise * 0.22);
+    const noiseLevel = 1 - quality;
+    
+    // Calculate epsilon
+    const epsilon = Math.max(0.5, 10 - (clipping * 0.5 + noise * 2));
+    
+    // Update epsilon display
+    const epsilonDisplay = document.getElementById('current-epsilon');
+    if (epsilonDisplay) {
+        epsilonDisplay.textContent = `(ε = ${epsilon.toFixed(1)})`;
+    }
+    
+    // Example patterns (same as above)
+    const examples = [
+        { // Face-like
+            draw: (ctx, noise) => {
+                ctx.fillStyle = `rgba(139, 111, 71, ${1 - noise * 0.8})`;
+                ctx.beginPath();
+                ctx.ellipse(60, 45, 30, 35, 0, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.fillStyle = `rgba(50, 50, 50, ${1 - noise * 0.9})`;
+                ctx.fillRect(45 + Math.random() * noise * 5, 35, 8, 8);
+                ctx.fillRect(67 + Math.random() * noise * 5, 35, 8, 8);
+                ctx.fillStyle = `rgba(100, 80, 60, ${1 - noise * 0.85})`;
+                ctx.fillRect(57, 50, 6, 12);
+                ctx.fillStyle = `rgba(80, 60, 50, ${1 - noise * 0.9})`;
+                ctx.fillRect(48, 70, 24, 5);
+                ctx.fillStyle = `rgba(107, 142, 107, ${1 - noise * 0.8})`;
+                ctx.fillRect(35, 85, 50, 30);
+            }
+        },
+        { // Eye-like
+            draw: (ctx, noise) => {
+                ctx.fillStyle = '#1a1a1a';
+                ctx.fillRect(0, 0, 120, 120);
+                ctx.fillStyle = `rgba(255, 200, 100, ${0.9 - noise * 0.7})`;
+                ctx.beginPath();
+                ctx.ellipse(60, 60, 35, 30, 0, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.fillStyle = `rgba(20, 20, 20, ${1 - noise * 0.8})`;
+                ctx.beginPath();
+                ctx.ellipse(60, 60, 15, 15, 0, 0, Math.PI * 2);
+                ctx.fill();
+                ctx.fillStyle = `rgba(255, 255, 255, ${0.8 - noise * 0.7})`;
+                ctx.beginPath();
+                ctx.arc(55, 52, 5, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        },
+        { // Medical scan
+            draw: (ctx, noise) => {
+                ctx.fillStyle = '#0a0a0a';
+                ctx.fillRect(0, 0, 120, 120);
+                const gradient = ctx.createRadialGradient(60, 60, 5, 60, 60, 40);
+                gradient.addColorStop(0, `rgba(255, 100, 50, ${1 - noise * 0.6})`);
+                gradient.addColorStop(0.5, `rgba(200, 80, 40, ${0.8 - noise * 0.6})`);
+                gradient.addColorStop(1, `rgba(100, 40, 20, ${0.3 - noise * 0.3})`);
+                ctx.fillStyle = gradient;
+                ctx.fillRect(0, 0, 120, 120);
+                ctx.fillStyle = `rgba(100, 255, 100, ${0.7 - noise * 0.6})`;
+                ctx.fillRect(20, 20, 8, 8);
+                ctx.fillRect(92, 20, 8, 8);
+                ctx.fillRect(20, 92, 8, 8);
+                ctx.fillRect(92, 92, 8, 8);
+            }
+        },
+        { // Computer
+            draw: (ctx, noise) => {
+                ctx.fillStyle = `rgba(100, 150, 255, ${0.9 - noise * 0.7})`;
+                ctx.fillRect(30, 20, 60, 45);
+                ctx.fillStyle = `rgba(200, 220, 255, ${0.8 - noise * 0.7})`;
+                ctx.fillRect(35, 25, 50, 35);
+                ctx.fillStyle = `rgba(80, 80, 80, ${1 - noise * 0.8})`;
+                ctx.fillRect(40, 70, 40, 8);
+                ctx.fillStyle = `rgba(100, 100, 100, ${1 - noise * 0.8})`;
+                ctx.fillRect(55, 65, 10, 15);
+                ctx.fillStyle = `rgba(60, 60, 60, ${0.9 - noise * 0.7})`;
+                ctx.fillRect(20, 85, 80, 25);
+            }
+        }
+    ];
+    
+    // Draw current setting for each example
+    examples.forEach((example, idx) => {
+        const currentCanvas = document.getElementById(`current-${idx + 1}`);
+        if (currentCanvas) {
+            const ctx = currentCanvas.getContext('2d');
+            ctx.clearRect(0, 0, 120, 120);
+            
+            // If very high privacy (epsilon < 1.0), show mostly noise
+            if (epsilon < 1.0) {
+                // Draw mostly random noise with tiny hint of original
+                example.draw(ctx, 0.98);
+                drawCompleteNoise(ctx, 120, 120);
+            } else if (epsilon < 3.0) {
+                // High privacy - heavy noise
+                example.draw(ctx, noiseLevel);
+                addNoise(ctx, Math.min(0.85, noiseLevel * 1.2), 120, 120);
+            } else if (epsilon < 6.0) {
+                // Medium privacy - moderate noise
+                example.draw(ctx, noiseLevel * 0.7);
+                addNoise(ctx, noiseLevel * 0.8, 120, 120);
+            } else {
+                // Low privacy - more visible noise (increased from 0.4 to 0.6)
+                example.draw(ctx, noiseLevel * 0.4);
+                addNoise(ctx, Math.max(0.3, noiseLevel * 0.6), 120, 120);
+            }
+        }
+    });
+}
+
+function addNoise(ctx, intensity, width, height) {
+    if (intensity < 0.05) return;
+    
+    const imageData = ctx.getImageData(0, 0, width, height);
+    const data = imageData.data;
+    
+    // For high intensity, make it more aggressive
+    if (intensity > 0.7) {
+        // Very high noise - almost complete randomization
+        for (let i = 0; i < data.length; i += 4) {
+            const randomness = intensity * 1.5;
+            data[i] = Math.random() * 255 * randomness + data[i] * (1 - randomness);     // R
+            data[i + 1] = Math.random() * 255 * randomness + data[i + 1] * (1 - randomness); // G
+            data[i + 2] = Math.random() * 255 * randomness + data[i + 2] * (1 - randomness); // B
+        }
+    } else {
+        // Normal noise addition
+        for (let i = 0; i < data.length; i += 4) {
+            const noise = (Math.random() - 0.5) * intensity * 300;
+            data[i] += noise;     // R
+            data[i + 1] += noise; // G
+            data[i + 2] += noise; // B
+        }
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+}
+
+function drawCompleteNoise(ctx, width, height) {
+    // Draw pure random static - complete privacy protection
+    const imageData = ctx.createImageData(width, height);
+    const data = imageData.data;
+    
+    for (let i = 0; i < data.length; i += 4) {
+        // Random RGB values - pure noise
+        data[i] = Math.random() * 255;     // R
+        data[i + 1] = Math.random() * 255; // G
+        data[i + 2] = Math.random() * 255; // B
+        data[i + 3] = 255;                 // A (fully opaque)
+    }
+    
+    ctx.putImageData(imageData, 0, 0);
+}
+
 // Initialize when page loads
 document.addEventListener('DOMContentLoaded', function() {
     window.attackSimulator = new AttackSimulator();
@@ -536,4 +1087,120 @@ document.addEventListener('DOMContentLoaded', function() {
     window.attackSimulator.updateMembershipDemo();
     window.attackSimulator.updateReconstructionAttack();
     window.attackSimulator.updateLinkageAttack();
+    
+    // Draw reconstruction examples
+    setTimeout(() => {
+        drawReconstructionExamples();
+    }, 100);
+    
+    // Initialize inversion canvas and privacy bar with default values
+    setTimeout(() => {
+        drawInvertedFeatures('7', 6); // Default: digit 7, privacy level 6 (slider=5, inverted to 6)
+        updateInversionPrivacyBar(5, 'Medium'); // Initialize privacy bar at slider position 5
+        updatePropertyPrivacyBar(5, 'Medium'); // Initialize property privacy bar
+    }, 100);
+    
+    // Add event listeners for inversion attack controls
+    const inversionPrivacySlider = document.getElementById('inversion-privacy-slider');
+    if (inversionPrivacySlider) {
+        inversionPrivacySlider.addEventListener('input', function() {
+            const sliderValue = parseInt(this.value);
+            // Invert the slider: slider 1 = high privacy, slider 10 = low privacy
+            const privacyLevel = 11 - sliderValue;
+            const privacyLevels = ['Very High', 'Very High', 'High', 'High', 'Medium', 'Medium', 'Low', 'Low', 'Very Low', 'Very Low'];
+            document.getElementById('inversion-privacy').textContent = privacyLevels[sliderValue - 1];
+            
+            // Update visualization in real-time
+            const classSelect = document.getElementById('inversion-class-select');
+            const selectedClass = classSelect ? classSelect.value : '7';
+            drawInvertedFeatures(selectedClass, privacyLevel);
+            
+            // Update privacy bar indicator
+            updateInversionPrivacyBar(sliderValue, privacyLevels[sliderValue - 1]);
+            
+            // Update explanation based on slider value (1=high privacy, 10=low privacy)
+            const explanation = document.getElementById('inversion-explanation');
+            if (explanation) {
+                if (sliderValue <= 3) {
+                    explanation.textContent = '✅ High privacy! The inverted features are very noisy and don\'t reveal clear class characteristics. Training data is well protected!';
+                    explanation.style.background = '#e8f5e9';
+                    explanation.style.borderLeft = '4px solid #4caf50';
+                } else if (sliderValue <= 6) {
+                    explanation.textContent = '⚠️ Medium privacy. Some class features are visible but degraded. Consider increasing privacy for sensitive data.';
+                    explanation.style.background = '#fff3e0';
+                    explanation.style.borderLeft = '4px solid #ff9800';
+                } else {
+                    explanation.textContent = '❌ Low privacy! The model reveals clear, detailed class features. An attacker can learn what the model associates with this class.';
+                    explanation.style.background = '#ffebee';
+                    explanation.style.borderLeft = '4px solid #f44336';
+                }
+            }
+        });
+    }
+    
+    // Add event listener for class selection
+    const inversionClassSelect = document.getElementById('inversion-class-select');
+    if (inversionClassSelect) {
+        inversionClassSelect.addEventListener('change', function() {
+            const privacySlider = document.getElementById('inversion-privacy-slider');
+            const sliderValue = privacySlider ? parseInt(privacySlider.value) : 5;
+            const privacyLevel = 11 - sliderValue; // Invert for drawing
+            drawInvertedFeatures(this.value, privacyLevel);
+            document.getElementById('inversion-class').textContent = this.options[this.selectedIndex].text;
+        });
+    }
+    
+    // Add event listeners for property inference attack controls
+    const propertyPrivacySlider = document.getElementById('property-privacy-slider');
+    if (propertyPrivacySlider) {
+        propertyPrivacySlider.addEventListener('input', function() {
+            const sliderValue = parseInt(this.value);
+            const privacyLevels = ['Very High', 'Very High', 'High', 'High', 'Medium', 'Medium', 'Low', 'Low', 'Very Low', 'Very Low'];
+            document.getElementById('property-privacy').textContent = privacyLevels[sliderValue - 1];
+            
+            // Update privacy bar in real-time
+            updatePropertyPrivacyBar(sliderValue, privacyLevels[sliderValue - 1]);
+            
+            // Update uncertainty display in real-time
+            const accessLevel = parseInt(document.getElementById('property-access-slider').value);
+            const uncertainty = Math.max(2, 20 - sliderValue * 1.5 - accessLevel * 2);
+            document.getElementById('property-male').textContent = `${52}% ± ${Math.round(uncertainty)}%`;
+            document.getElementById('property-female').textContent = `${48}% ± ${Math.round(uncertainty)}%`;
+            
+            // Update explanation
+            const explanation = document.getElementById('property-explanation');
+            if (explanation) {
+                if (sliderValue <= 3) {
+                    explanation.textContent = '✅ High privacy! The attacker cannot accurately infer dataset properties. Large confidence intervals show high uncertainty.';
+                    explanation.style.background = '#e8f5e9';
+                    explanation.style.borderLeft = '4px solid #4caf50';
+                } else if (sliderValue <= 6) {
+                    explanation.textContent = '⚠️ Medium privacy. The attacker can infer properties with moderate accuracy. Consider increasing privacy for sensitive datasets.';
+                    explanation.style.background = '#fff3e0';
+                    explanation.style.borderLeft = '4px solid #ff9800';
+                } else {
+                    explanation.textContent = '❌ Low privacy! The attacker can accurately infer sensitive dataset properties like demographic distributions. Privacy breach risk!';
+                    explanation.style.background = '#ffebee';
+                    explanation.style.borderLeft = '4px solid #f44336';
+                }
+            }
+        });
+    }
+    
+    // Add event listener for model access slider
+    const propertyAccessSlider = document.getElementById('property-access-slider');
+    if (propertyAccessSlider) {
+        propertyAccessSlider.addEventListener('input', function() {
+            const accessLevel = parseInt(this.value);
+            const accessLevels = ['Black-box', 'Gray-box', 'White-box'];
+            document.getElementById('property-access').textContent = accessLevels[accessLevel - 1];
+            
+            // Update uncertainty display when access changes
+            const privacySlider = document.getElementById('property-privacy-slider');
+            const sliderValue = privacySlider ? parseInt(privacySlider.value) : 5;
+            const uncertainty = Math.max(2, 20 - sliderValue * 1.5 - accessLevel * 2);
+            document.getElementById('property-male').textContent = `${52}% ± ${Math.round(uncertainty)}%`;
+            document.getElementById('property-female').textContent = `${48}% ± ${Math.round(uncertainty)}%`;
+        });
+    }
 });

app/templates/attacks.html

@@ -17,11 +17,13 @@
     padding: 4px;
     margin-bottom: 2rem;
     overflow-x: auto;
+    gap: 4px;
+    flex-wrap: wrap;
 }
 
 .attack-tab {
-    flex: 1;
-    min-width: 150px;
+    flex: 1 1 auto;
+    min-width: 160px;
     padding: 0.75rem 1rem;
     text-align: center;
     background: transparent;
@@ -31,6 +33,7 @@
     font-weight: 500;
     transition: all 0.3s ease;
     white-space: nowrap;
+    font-size: 0.9rem;
 }
 
 .attack-tab:hover {
@@ -332,8 +335,28 @@
     flex-shrink: 0;
 }
 
-/* Mobile responsive */
+/* Responsive design */
+@media (max-width: 1024px) {
+    .attack-tab {
+        flex: 1 1 calc(33.333% - 4px);
+        min-width: 150px;
+        font-size: 0.88rem;
+    }
+}
+
 @media (max-width: 768px) {
+    .attack-tabs {
+        gap: 4px;
+        padding: 4px;
+    }
+    
+    .attack-tab {
+        flex: 1 1 calc(50% - 4px);
+        min-width: 140px;
+        font-size: 0.85rem;
+        padding: 0.6rem 0.75rem;
+    }
+    
     .story-flow {
         flex-direction: column;
     }
@@ -348,6 +371,13 @@
     }
 }
 
+@media (max-width: 480px) {
+    .attack-tab {
+        flex: 1 1 100%;
+        min-width: auto;
+    }
+}
+
 .interactive-demo {
     background: #f8f9fa;
     padding: 2rem;
@@ -590,6 +620,374 @@
     color: #666;
     line-height: 1.5;
 }
+
+/* Reconstruction Grid Styles */
+.reconstruction-visual-demo {
+    background: white;
+    padding: 2rem;
+    border-radius: 12px;
+    margin: 1.5rem 0;
+}
+
+.reconstruction-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 1rem;
+    margin: 0 auto;
+    max-width: 800px;
+}
+
+.grid-header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 0.75rem 0.5rem;
+    text-align: center;
+    font-weight: bold;
+    font-size: 0.9rem;
+    border-radius: 8px 8px 0 0;
+    line-height: 1.3;
+}
+
+.example-cell {
+    background: #f8f9fa;
+    border: 2px solid #dee2e6;
+    border-radius: 8px;
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+}
+
+.example-cell:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    z-index: 10;
+}
+
+.example-cell canvas {
+    display: block;
+    border-radius: 4px;
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+}
+
+.example-cell.current-setting {
+    border: 3px solid #ffc107;
+    background: #fffbf0;
+    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2);
+}
+
+.reconstruction-legend {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1rem;
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background: #f8f9fa;
+    border-radius: 8px;
+}
+
+.legend-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.legend-box {
+    width: 30px;
+    height: 30px;
+    border-radius: 4px;
+    flex-shrink: 0;
+}
+
+.current-highlight {
+    background: #fffbf0;
+    border: 3px solid #ffc107;
+    animation: pulse-border 2s infinite;
+}
+
+@keyframes pulse-border {
+    0%, 100% { border-color: #ffc107; }
+    50% { border-color: #ff9800; }
+}
+
+.legend-item span {
+    font-size: 0.85rem;
+    line-height: 1.4;
+}
+
+@media (max-width: 768px) {
+    .reconstruction-grid {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 0.5rem;
+    }
+    
+    .grid-header {
+        font-size: 0.75rem;
+        padding: 0.5rem 0.25rem;
+    }
+    
+    .example-cell canvas {
+        width: 80px;
+        height: 80px;
+    }
+    
+    .reconstruction-legend {
+        grid-template-columns: 1fr;
+        gap: 0.75rem;
+    }
+}
+
+.three-panel-container {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr auto 1fr;
+    gap: 1rem;
+    align-items: stretch;
+    max-width: 1400px;
+    margin: 0 auto;
+}
+
+.privacy-panel {
+    display: flex;
+    flex-direction: column;
+    border-radius: 12px;
+    overflow: hidden;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+    transition: transform 0.3s ease;
+}
+
+.privacy-panel:hover {
+    transform: translateY(-4px);
+}
+
+.panel-header {
+    padding: 1.5rem 1rem;
+    text-align: center;
+    font-weight: bold;
+}
+
+.panel-header h3 {
+    margin: 0;
+    font-size: 1rem;
+    line-height: 1.4;
+    letter-spacing: 0.5px;
+}
+
+.private-panel {
+    background: #f5e6d3;
+    border: 4px solid #c89968;
+}
+
+.private-panel .panel-header {
+    background: #f5e6d3;
+    color: #8b4513;
+}
+
+.safe-panel {
+    background: #e8f4f8;
+    border: 4px solid #7fb3d5;
+}
+
+.safe-panel .panel-header {
+    background: #e8f4f8;
+    color: #2c5f2d;
+}
+
+.attack-panel {
+    background: #fce4e4;
+    border: 4px solid #d4a5a8;
+}
+
+.attack-panel .panel-header {
+    background: #fce4e4;
+    color: #c1272d;
+}
+
+.panel-image-wrapper {
+    position: relative;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    background: #f8f9fa;
+}
+
+.panel-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.privacy-lock-overlay {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(255, 255, 255, 0.95);
+    padding: 0.75rem 1.5rem;
+    border-radius: 30px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.lock-icon {
+    font-size: 2rem;
+    text-align: center;
+}
+
+.privacy-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(30px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #28a745;
+    transition: all 0.5s ease;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.panel-footer {
+    padding: 1rem;
+    text-align: center;
+    font-size: 0.9rem;
+    background: rgba(255, 255, 255, 0.5);
+}
+
+.safe-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    background: rgba(255, 255, 255, 0.7);
+}
+
+.check-icon {
+    font-size: 1.5rem;
+    color: #28a745;
+    background: white;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    border: 2px solid #28a745;
+}
+
+.footer-metrics {
+    text-align: left;
+    font-size: 0.85rem;
+}
+
+.small-text {
+    font-size: 0.75rem;
+    color: #666;
+    margin-top: 0.25rem;
+}
+
+.danger-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    background: rgba(255, 255, 255, 0.7);
+    padding: 1.25rem;
+}
+
+.alert-icon {
+    font-size: 2rem;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.7; transform: scale(1.1); }
+}
+
+.danger-text {
+    font-weight: bold;
+    color: #c1272d;
+    font-size: 1rem;
+    line-height: 1.3;
+    text-align: center;
+}
+
+.footer-text {
+    color: #666;
+    font-size: 0.9rem;
+}
+
+.flow-arrow {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.arrow-symbol {
+    font-size: 2.5rem;
+    color: #dc3545;
+    font-weight: bold;
+}
+
+.attack-arrow .arrow-symbol {
+    color: #c1272d;
+}
+
+.arrow-label {
+    font-size: 0.85rem;
+    color: #666;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+@media (max-width: 1200px) {
+    .three-panel-container {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+    }
+    
+    .flow-arrow {
+        flex-direction: row;
+        gap: 1rem;
+    }
+    
+    .arrow-symbol {
+        transform: rotate(90deg);
+    }
+    
+    .panel-header h3 {
+        font-size: 0.95rem;
+    }
+}
+
+@media (max-width: 768px) {
+    .panel-header h3 {
+        font-size: 0.85rem;
+    }
+    
+    .arrow-symbol {
+        font-size: 2rem;
+    }
+    
+    .reconstruction-visual-demo {
+        padding: 1rem;
+    }
+}
 </style>
 {% endblock %}
 
@@ -672,7 +1070,7 @@
                 <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>
+                        <p>A hospital trained a model to predict heart disease risk. Let's see if an attacker can tell which patient records were in the training set!</p>
                     </div>
                     
                     <div class="confidence-comparison">
@@ -682,12 +1080,16 @@
                                 <span class="sample-status training">✓ Was in training</span>
                             </div>
                             <div class="sample-image">
-                                <div class="digit-display">7</div>
+                                <div class="digit-display" style="font-size: 1rem; flex-direction: column; gap: 0.5rem; height: auto; padding: 1rem;">
+                                    <div style="font-size: 2.5rem;">🏥</div>
+                                    <div style="font-size: 0.85rem; color: #666;">Patient #A2847</div>
+                                    <div style="font-size: 0.8rem; color: #999; line-height: 1.3;">Age: 58 | BP: 145/92<br/>Cholesterol: High</div>
+                                </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 class="confidence-fill training-confidence" id="training-confidence" style="width: 96%;">96%</div>
                                 </div>
                             </div>
                         </div>
@@ -700,12 +1102,16 @@
                                 <span class="sample-status test">✗ Not in training</span>
                             </div>
                             <div class="sample-image">
-                                <div class="digit-display">7</div>
+                                <div class="digit-display" style="font-size: 1rem; flex-direction: column; gap: 0.5rem; height: auto; padding: 1rem;">
+                                    <div style="font-size: 2.5rem;">🏥</div>
+                                    <div style="font-size: 0.85rem; color: #666;">Patient #B3192</div>
+                                    <div style="font-size: 0.8rem; color: #999; line-height: 1.3;">Age: 56 | BP: 142/90<br/>Cholesterol: High</div>
+                                </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 class="confidence-fill test-confidence" id="test-confidence" style="width: 68%;">68%</div>
                                 </div>
                             </div>
                         </div>
@@ -713,8 +1119,8 @@
 
                     <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.
+                            <strong>🔍 The Attack Insight:</strong> The model is <span id="confidence-diff">28%</span> more confident on training data! 
+                            An attacker can use this difference to infer that Patient A2847 was treated at this hospital - a serious privacy breach.
                         </div>
                     </div>
                 </div>
@@ -777,6 +1183,16 @@
             <div class="chart-container">
                 <canvas id="membership-chart"></canvas>
             </div>
+            
+            <!-- Defense against this attack -->
+            <div style="margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); border-radius: 8px; color: white;">
+                <h3 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
+                    <span style="font-size: 1.5rem;">🛡️</span> How DP-SGD Defends Against This Attack
+                </h3>
+                <p style="font-size: 1rem; line-height: 1.6; margin: 0;">
+                    <strong>Random noise addition:</strong> DP-SGD adds carefully calibrated noise to model outputs, making Alice's record indistinguishable from any other patient. The model gives similar confidence scores whether or not someone was in the training data - attackers can't tell the difference between training and test examples.
+                </p>
+            </div>
         </div>
     </div>
 
@@ -795,41 +1211,173 @@
                 <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="attack-scenario-intro" style="background: #f8f9fa; padding: 1.5rem; border-radius: 8px; margin-bottom: 1.5rem;">
+                <h3>📋 Scenario: Federated Learning Attack</h3>
+                <p style="margin: 0.5rem 0 0 0; color: #666;">
+                    In federated learning, a company trains a model using images from users' devices. An attacker with access to 
+                    gradient updates attempts to reconstruct the original training images. Let's see how differential privacy protects against this!
+                </p>
+            </div>
+
+            <div class="reconstruction-visual-demo">
+                <h3 style="text-align: center; margin-bottom: 1.5rem;">🔍 Reconstruction Quality at Different Privacy Levels</h3>
+                
+                <!-- Multi-example comparison grid -->
+                <div class="reconstruction-grid">
+                    <!-- Header Row -->
+                    <div class="grid-header">Ground Truth</div>
+                    <div class="grid-header">No Privacy<br/><span style="font-size: 0.85rem; font-weight: normal;">(ε = ∞)</span></div>
+                    <div class="grid-header">Low Privacy<br/><span style="font-size: 0.85rem; font-weight: normal;" id="current-epsilon">(ε = 8.0)</span></div>
+                    <div class="grid-header">High Privacy<br/><span style="font-size: 0.85rem; font-weight: normal;">(ε = 0.1)</span></div>
+                    
+                    <!-- Example 1: Face-like -->
+                    <div class="example-cell">
+                        <canvas id="original-1" width="120" height="120"></canvas>
+                    </div>
+                    <div class="example-cell">
+                        <canvas id="no-privacy-1" width="120" height="120"></canvas>
+                    </div>
+                    <div class="example-cell current-setting">
+                        <canvas id="current-1" width="120" height="120"></canvas>
+                    </div>
+                    <div class="example-cell">
+                        <canvas id="high-privacy-1" width="120" height="120"></canvas>
+                    </div>
+                    
+                    <!-- Example 2: Eye-like -->
+                    <div class="example-cell">
+                        <canvas id="original-2" width="120" height="120"></canvas>
+                    </div>
+                    <div class="example-cell">
+                        <canvas id="no-privacy-2" width="120" height="120"></canvas>
+                    </div>
+                    <div class="example-cell current-setting">
+                        <canvas id="current-2" width="120" height="120"></canvas>
+                    </div>
+                    <div class="example-cell">
+                        <canvas id="high-privacy-2" width="120" height="120"></canvas>
+                    </div>
+                    
+                    <!-- Example 3: Medical scan-like -->
+                    <div class="example-cell">
+                        <canvas id="original-3" width="120" height="120"></canvas>
+                    </div>
+                    <div class="example-cell">
+                        <canvas id="no-privacy-3" width="120" height="120"></canvas>
+                    </div>
+                    <div class="example-cell current-setting">
+                        <canvas id="current-3" width="120" height="120"></canvas>
+                    </div>
+                    <div class="example-cell">
+                        <canvas id="high-privacy-3" width="120" height="120"></canvas>
+                    </div>
+                    
+                    <!-- Example 4: Object-like -->
+                    <div class="example-cell">
+                        <canvas id="original-4" width="120" height="120"></canvas>
+                    </div>
+                    <div class="example-cell">
+                        <canvas id="no-privacy-4" width="120" height="120"></canvas>
+                    </div>
+                    <div class="example-cell current-setting">
+                        <canvas id="current-4" width="120" height="120"></canvas>
+                    </div>
+                    <div class="example-cell">
+                        <canvas id="high-privacy-4" width="120" height="120"></canvas>
+                    </div>
+                </div>
+
+                <!-- Legend -->
+                <div class="reconstruction-legend">
+                    <div class="legend-item">
+                        <div class="legend-box" style="background: #e8f5e9; border: 2px solid #4caf50;"></div>
+                        <span><strong>Ground Truth:</strong> Original private training images</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-box" style="background: #ffebee; border: 2px solid #f44336;"></div>
+                        <span><strong>No Privacy:</strong> Perfect reconstruction - privacy breach!</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-box current-highlight"></div>
+                        <span><strong>Your Settings:</strong> Adjust sliders below to see changes</span>
+                    </div>
+                    <div class="legend-item">
+                        <div class="legend-box" style="background: #e3f2fd; border: 2px solid #2196f3;"></div>
+                        <span><strong>High Privacy:</strong> Reconstruction fails - data protected!</span>
+                    </div>
+                </div>
+
+                <!-- Quality Badge Below -->
+                <div style="text-align: center; margin-top: 1.5rem;">
+                    <div class="reconstruction-quality quality-high" id="recon-quality" style="display: inline-block; padding: 0.75rem 1.5rem; font-size: 1.1rem;">
+                        ⚠️ Medium Quality
+                    </div>
+                </div>
+            </div>
+
+            <div class="attack-demo" style="margin-top: 2rem;">
                 <div class="demo-panel">
-                    <h3>Gradient Privacy Settings</h3>
+                    <h3>🛡️ Differential Privacy Settings</h3>
                     <div class="demo-controls">
-                        <label>Clipping Norm: <span id="recon-clipping">1.0</span></label>
+                        <label>Gradient 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">
+                        <div class="privacy-scale">
+                            <span style="font-size: 0.75rem;">🔒 Tight Clipping (More Private)</span>
+                            <span style="font-size: 0.75rem;">🔓 Loose Clipping (Less Private)</span>
+                        </div>
                         
-                        <label>Noise Level: <span id="recon-noise-level">1.0</span></label>
+                        <label style="margin-top: 1rem;">Noise Multiplier (σ): <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 class="privacy-scale">
+                            <span style="font-size: 0.75rem;">🔇 No Noise (Vulnerable)</span>
+                            <span style="font-size: 0.75rem;">🔊 High Noise (Protected)</span>
+                        </div>
                     </div>
-                    <button class="control-button" onclick="runReconstructionAttack()">Simulate Reconstruction</button>
+                    <button class="control-button" onclick="runReconstructionAttack()">🔄 Update 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
+                    <h3>📊 Attack Analysis</h3>
+                    <div class="demo-result">
+                        <div style="margin-bottom: 1rem;">
+                            <strong>Reconstruction SSIM Score:</strong>
+                            <div style="font-size: 1.8rem; color: #dc3545; font-weight: bold; margin: 0.5rem 0;" id="ssim-score">0.85</div>
+                            <div style="font-size: 0.85rem; color: #666;">
+                                (1.0 = perfect reconstruction, 0.0 = completely failed)
                             </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 style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #ddd;">
+                            <div style="display: flex; justify-content: space-between; margin: 0.5rem 0;">
+                                <span>Privacy Level:</span>
+                                <span id="privacy-status" style="font-weight: bold; color: #dc3545;">❌ Low (ε ≈ 8.0)</span>
+                            </div>
+                            <div style="display: flex; justify-content: space-between; margin: 0.5rem 0;">
+                                <span>Attack Success:</span>
+                                <span id="attack-success" style="font-weight: bold; color: #dc3545;">92%</span>
                             </div>
-                            <div class="reconstruction-quality quality-high" id="recon-quality">High Quality</div>
                         </div>
                     </div>
+                    
+                    <div class="privacy-explanation" id="recon-explanation" style="margin-top: 1rem;">
+                        ⚠️ Without sufficient privacy protection, attackers can reconstruct training images with high fidelity from gradient information alone!
+                    </div>
                 </div>
             </div>
 
             <div class="chart-container">
                 <canvas id="reconstruction-chart"></canvas>
             </div>
+            
+            <!-- Defense against this attack -->
+            <div style="margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); border-radius: 8px; color: white;">
+                <h3 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
+                    <span style="font-size: 1.5rem;">🛡️</span> How DP-SGD Defends Against This Attack
+                </h3>
+                <p style="font-size: 1rem; line-height: 1.6; margin: 0;">
+                    <strong>Gradient clipping + noise:</strong> DP-SGD clips each person's influence on the model, then drowns it in noise - like taking a photo and adding so much blur that faces become unrecognizable blobs. Attackers cannot reverse-engineer the original training images from the model's outputs.
+                </p>
+            </div>
         </div>
     </div>
 
@@ -849,38 +1397,64 @@
             </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>
+                <div class="demo-panel" style="padding: 1.5rem;">
+                    <h3 style="margin-bottom: 1.5rem;">Inversion Parameters</h3>
+                    <div class="demo-controls" style="gap: 1.5rem;">
+                        <div style="margin-bottom: 1.5rem;">
+                            <label style="display: block; margin-bottom: 0.75rem; font-weight: 500;">
+                                Target Class: <span id="inversion-class" style="color: #1976d2; font-weight: 600;">Digit 7</span>
+                            </label>
+                            <select id="inversion-class-select" class="parameter-select" style="width: 100%; padding: 0.5rem; font-size: 1rem; border-radius: 4px; border: 2px solid #e0e0e0;">
+                                <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>
+                        </div>
                         
-                        <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 style="margin-bottom: 1.5rem;">
+                            <label style="display: block; margin-bottom: 0.75rem; font-weight: 500;">
+                                Privacy Level: <span id="inversion-privacy" style="color: #1976d2; font-weight: 600;">Medium</span>
+                            </label>
+                            <input type="range" class="demo-slider" id="inversion-privacy-slider" min="1" max="10" step="1" value="5" style="width: 100%; margin-top: 0.5rem;">
+                            <div style="display: flex; justify-content: space-between; font-size: 0.75rem; color: #999; margin-top: 0.5rem;">
+                                <span style="text-align: left;">🔒 High Privacy<br/>(ε = 1.0)</span>
+                                <span style="text-align: right;">🔓 Low Privacy<br/>(ε = 10.0)</span>
+                            </div>
+                        </div>
                     </div>
-                    <button class="control-button" onclick="runInversionAttack()">Generate Class Representative</button>
+                    <button class="control-button" onclick="runInversionAttack()" style="width: 100%; padding: 0.75rem; font-size: 1rem; margin-top: 1rem;">Generate Class Representative</button>
                 </div>
 
-                <div class="demo-panel">
-                    <h3>Generated Features</h3>
+                <div class="demo-panel" style="padding: 1.5rem;">
+                    <h3 style="margin-bottom: 1.5rem;">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>
+                            <canvas id="inversion-canvas" width="160" height="160" style="border-radius: 8px; margin: 0 auto 1rem; display: block; border: 3px solid #2196f3; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"></canvas>
+                            <div style="font-size: 1rem; font-weight: 500; margin-bottom: 0.75rem;">Inverted Features</div>
+                            <div style="font-size: 0.9rem; color: #666; margin-bottom: 0.5rem;">
+                                Confidence: <span id="inversion-confidence" style="font-weight: 600; color: #1976d2;">87%</span>
                             </div>
                         </div>
                     </div>
+                    
+                    <div class="privacy-explanation" style="margin-top: 1.5rem; padding: 1.25rem; background: #fff3e0; border-radius: 6px; font-size: 0.9rem; line-height: 1.5; border-left: 4px solid #ff9800;">
+                        <div id="inversion-explanation">
+                            ⚠️ Medium privacy. Some class features are visible but degraded. Move the slider left for higher privacy!
+                        </div>
+                    </div>
                 </div>
             </div>
+            
+            <!-- Defense against this attack -->
+            <div style="margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); border-radius: 8px; color: white;">
+                <h3 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
+                    <span style="font-size: 1.5rem;">🛡️</span> How DP-SGD Defends Against This Attack
+                </h3>
+                <p style="font-size: 1rem; line-height: 1.6; margin: 0;">
+                    <strong>Feature scrambling:</strong> DP-SGD scrambles what the model "remembers" about each class. Instead of learning "digit 7 looks like this sharp image," it learns "7 is somewhere in this fuzzy cloud." Attackers cannot extract clear class representatives or features.
+                </p>
+            </div>
         </div>
     </div>
 
@@ -900,44 +1474,82 @@
             </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>
+                <div class="demo-panel" style="padding: 1.5rem;">
+                    <h3 style="margin-bottom: 1.5rem;">Target Properties</h3>
+                    <div class="demo-controls" style="gap: 1.5rem;">
+                        <div style="margin-bottom: 1.5rem;">
+                            <label style="display: block; margin-bottom: 0.75rem; font-weight: 500;">Property Type:</label>
+                            <select id="property-type" class="parameter-select" style="width: 100%; padding: 0.5rem; font-size: 1rem; border-radius: 4px; border: 2px solid #e0e0e0;">
+                                <option value="gender">Gender Distribution</option>
+                                <option value="age">Age Distribution</option>
+                                <option value="location">Geographic Distribution</option>
+                            </select>
+                        </div>
                         
-                        <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 style="margin-bottom: 1.5rem;">
+                            <label style="display: block; margin-bottom: 0.75rem; font-weight: 500;">
+                                Privacy Level: <span id="property-privacy" style="color: #1976d2; font-weight: 600;">Medium</span>
+                            </label>
+                            <input type="range" class="demo-slider" id="property-privacy-slider" min="1" max="10" step="1" value="5" style="width: 100%; margin-top: 0.5rem;">
+                            <div style="display: flex; justify-content: space-between; font-size: 0.75rem; color: #999; margin-top: 0.5rem;">
+                                <span style="text-align: left;">🔒 High Privacy<br/>(ε = 1.0)</span>
+                                <span style="text-align: right;">🔓 Low Privacy<br/>(ε = 10.0)</span>
+                            </div>
+                        </div>
+                        
+                        <div style="margin-bottom: 1.5rem;">
+                            <label style="display: block; margin-bottom: 0.75rem; font-weight: 500;">
+                                Model Access: <span id="property-access" style="color: #1976d2; font-weight: 600;">Black-box</span>
+                            </label>
+                            <input type="range" class="demo-slider" id="property-access-slider" min="1" max="3" step="1" value="1" style="width: 100%; margin-top: 0.5rem;">
+                            <div style="display: flex; justify-content: space-between; font-size: 0.75rem; color: #999; margin-top: 0.5rem;">
+                                <span>Black-box</span>
+                                <span>Gray-box</span>
+                                <span>White-box</span>
+                            </div>
+                        </div>
                     </div>
-                    <button class="control-button" onclick="runPropertyAttack()">Infer Properties</button>
+                    <button class="control-button" onclick="runPropertyAttack()" style="width: 100%; padding: 0.75rem; font-size: 1rem; margin-top: 1rem;">Infer Properties</button>
                 </div>
 
-                <div class="demo-panel">
-                    <h3>Inferred Properties</h3>
+                <div class="demo-panel" style="padding: 1.5rem;">
+                    <h3 style="margin-bottom: 1.5rem;">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 style="font-size: 1rem; font-weight: 500; margin-bottom: 1rem;">Inferred Distribution:</div>
+                        <div style="margin: 1.5rem 0;">
+                            <div style="display: flex; justify-content: space-between; margin: 0.75rem 0; padding: 0.5rem; background: #f5f5f5; border-radius: 4px;">
+                                <span style="font-weight: 500;">Male:</span> <span id="property-male" style="font-weight: 600; color: #1976d2;">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 style="display: flex; justify-content: space-between; margin: 0.75rem 0; padding: 0.5rem; background: #f5f5f5; border-radius: 4px;">
+                                <span style="font-weight: 500;">Female:</span> <span id="property-female" style="font-weight: 600; color: #1976d2;">48% ± 8%</span>
                             </div>
                         </div>
-                        <div style="font-size: 0.8rem; color: #666;">
+                        <div style="font-size: 0.85rem; color: #666; font-style: italic;">
                             Confidence intervals show attack uncertainty
                         </div>
                     </div>
+                    
+                    <div class="privacy-explanation" style="margin-top: 1.5rem; padding: 1.25rem; background: #fff3e0; border-radius: 6px; font-size: 0.9rem; line-height: 1.5; border-left: 4px solid #ff9800;">
+                        <div id="property-explanation">
+                            ⚠️ Medium privacy. The attacker can infer dataset properties with moderate accuracy. Move the slider left for higher privacy!
+                        </div>
+                    </div>
                 </div>
             </div>
 
             <div class="chart-container">
                 <canvas id="property-chart"></canvas>
             </div>
+            
+            <!-- Defense against this attack -->
+            <div style="margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); border-radius: 8px; color: white;">
+                <h3 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
+                    <span style="font-size: 1.5rem;">🛡️</span> How DP-SGD Defends Against This Attack
+                </h3>
+                <p style="font-size: 1rem; line-height: 1.6; margin: 0;">
+                    <strong>Privacy budget tracking:</strong> DP-SGD keeps a "privacy budget" (ε) - like a bank account that tracks how much information leaked. When the budget runs low, training stops to prevent dataset statistics (like gender distribution or age ranges) from being exposed.
+                </p>
+            </div>
         </div>
     </div>
 
@@ -1013,6 +1625,16 @@
             <div class="chart-container">
                 <canvas id="linkage-chart"></canvas>
             </div>
+            
+            <!-- Defense against this attack -->
+            <div style="margin-top: 2rem; padding: 1.5rem; background: linear-gradient(135deg, #4caf50 0%, #45a049 100%); border-radius: 8px; color: white;">
+                <h3 style="margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
+                    <span style="font-size: 1.5rem;">🛡️</span> How DP-SGD Defends Against This Attack
+                </h3>
+                <p style="font-size: 1rem; line-height: 1.6; margin: 0;">
+                    <strong>Output noise + bounded leakage:</strong> DP-SGD adds noise to model predictions AND tracks total privacy loss (ε). Even when attackers combine model outputs with external datasets (social media, public records), the mathematical privacy guarantee ensures they cannot reliably link individuals or infer sensitive attributes.
+                </p>
+            </div>
         </div>
     </div>
 
@@ -1060,30 +1682,6 @@
         </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 %}