GPU Acceleration with Brain.js

<script>
function explainGPUComputing() {
  const explanation = `
    <h4>⚡ GPU Acceleration Benefits</h4>
    
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0;">
      <h5>Why GPU for Neural Networks?</h5>
      <ul>
        <li><strong>Parallel Processing:</strong> Thousands of cores vs 4-16 CPU cores</li>
        <li><strong>Matrix Operations:</strong> Optimized for the math neural networks use</li>
        <li><strong>Speed Increase:</strong> 10-100x faster training for large networks</li>
        <li><strong>Scalability:</strong> Handle larger models and datasets</li>
      </ul>
    </div>
    
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 20px 0;">
      <div style="border: 1px solid #ddd; padding: 15px; border-radius: 8px;">
        <h6>🖥️ CPU Characteristics</h6>
        <ul>
          <li>4-16 powerful cores</li>
          <li>Sequential processing</li>
          <li>Large cache memory</li>
          <li>Complex instruction sets</li>
          <li>Good for: Control logic, complex branching</li>
        </ul>
      </div>
      
      <div style="border: 1px solid #ddd; padding: 15px; border-radius: 8px;">
        <h6>🎮 GPU Characteristics</h6>
        <ul>
          <li>1000+ simpler cores</li>
          <li>Massive parallelism</li>
          <li>High memory bandwidth</li>
          <li>Optimized for simple operations</li>
          <li>Good for: Matrix math, parallel tasks</li>
        </ul>
      </div>
    </div>
  `;
  
  document.getElementById('gpu-explanation').innerHTML = explanation;
}

explainGPUComputing();
</script>

<div id="gpu-explanation"></div>

<script>
// GPU-accelerated neural network setup
function setupGPUNetwork() {
  const output = document.getElementById('gpu-setup-output');
  
  try {
    // Create GPU-accelerated neural network
    const gpuNet = new brain.NeuralNetworkGPU({
      hiddenLayers: [512, 256, 128], // Larger networks benefit more from GPU
      activation: 'relu',
      learningRate: 0.01
    });
    
    output.innerHTML = `
      <h4>🚀 GPU Network Configuration</h4>
      <div style="background: #e8f5e8; padding: 15px; border-radius: 8px;">
        <p><strong>✅ GPU Network Created Successfully!</strong></p>
        <p><strong>Architecture:</strong> 512 → 256 → 128 hidden units</p>
        <p><strong>Activation:</strong> ReLU (GPU optimized)</p>
        <p><strong>Learning Rate:</strong> 0.01</p>
        
        <h5>Key Differences from CPU Version:</h5>
        <ul>
          <li>Uses WebGL shaders for parallel computation</li>
          <li>Automatically handles memory transfers</li>
          <li>Optimized matrix operations</li>
          <li>Falls back to CPU if GPU unavailable</li>
        </ul>
      </div>
    `;
    
    // Store for later use
    window.gpuNetwork = gpuNet;
    
  } catch (error) {
    output.innerHTML = `
      <div style="background: #fff3cd; padding: 15px; border-radius: 8px;">
        <h5>⚠️ GPU Setup Note</h5>
        <p>GPU acceleration may not be available in all browsers or devices.</p>
        <p><strong>Fallback:</strong> Using CPU version</p>
        <p><strong>Error:</strong> ${error.message}</p>
      </div>
    `;
  }
}

setupGPUNetwork();
</script>

<div id="gpu-setup-output"></div>