Add files via upload

complete-dpsgd-explorer.html

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

standalone-dpsgd-explorer.html

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