chore: Remove old HTML files

complete-dpsgd-explorer.html

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

standalone-dpsgd-explorer.html

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