Recurrent Neural Networks with Brain.js

<script>
function explainRNNs() {
  const explanation = `
    <h4>🔄 Recurrent Neural Networks Explained</h4>
    
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0;">
      <h5>What Makes RNNs Special?</h5>
      <ul>
        <li><strong>Memory:</strong> Networks remember previous inputs</li>
        <li><strong>Sequential Processing:</strong> Handle variable-length sequences</li>
        <li><strong>Context Awareness:</strong> Current output depends on history</li>
        <li><strong>Shared Parameters:</strong> Same weights across time steps</li>
      </ul>
    </div>
    
    <div style="background: #e8f5e8; padding: 15px; border-radius: 8px; margin: 15px 0;">
      <h5>📊 RNN vs Traditional Neural Networks</h5>
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
        <div>
          <h6>Traditional Networks</h6>
          <ul>
            <li>Fixed input size</li>
            <li>No memory of previous inputs</li>
            <li>Good for: Images, tabular data</li>
          </ul>
        </div>
        <div>
          <h6>Recurrent Networks</h6>
          <ul>
            <li>Variable input sequences</li>
            <li>Maintains hidden state</li>
            <li>Good for: Text, time series, speech</li>
          </ul>
        </div>
      </div>
    </div>
  `;
  
  document.getElementById('rnn-explanation').innerHTML = explanation;
}

explainRNNs();
</script>

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

<script>
async function advancedTextGeneration() {
  const output = document.getElementById('text-gen-output');
  output.innerHTML = '<p>🔄 Training advanced text generator...</p>';
  
  // Create LSTM for more sophisticated text generation
  const lstm = new brain.recurrent.LSTM({
    inputSize: 50,
    hiddenLayers: [100, 100],
    outputSize: 50
  });
  
  // Extended training corpus for better results
  const corpus = [
    "The quick brown fox jumps over the lazy dog",
    "Machine learning is revolutionizing technology",
    "Artificial intelligence will transform our future",
    "Neural networks learn patterns from data",
    "Deep learning requires large datasets",
    "JavaScript makes machine learning accessible",
    "Brain.js simplifies neural network development",
    "Recurrent networks handle sequential data",
    "LSTM networks solve vanishing gradient problems",
    "Natural language processing enables chatbots"
  ];
  
  try {
    // Train the model
    const trainingStats = lstm.train(corpus, {
      iterations: 500,
      errorThresh: 0.01,
      log: true,
      logPeriod: 100
    });
    
    // Generate text with different seed phrases
    const seedPhrases = [
      "machine learning",
      "neural networks",
      "artificial intelligence"
    ];
    
    let resultHTML = '<h4>🤖 Advanced Text Generation Results</h4>';
    resultHTML += `<p><strong>Training completed!</strong> Final error: ${trainingStats.error.toFixed(6)}</p>`;
    
    resultHTML += '<div style="background: #f8f9fa; padding: 15px; border-radius: 8px; margin: 15px 0;">';
    resultHTML += '<h5>Generated Text Samples:</h5>';
    
    seedPhrases.forEach(seed => {
      try {
        const generated = lstm.run(seed);
        resultHTML += `<div style="margin: 10px 0; padding: 10px; border-left: 4px solid #4CAF50; background: white;">`;
        resultHTML += `<strong>Seed:</strong> "${seed}"<br>`;
        resultHTML += `<strong>Generated:</strong> "${generated}"</div>`;
      } catch (e) {
        resultHTML += `<div style="margin: 10px 0; padding: 10px; border-left: 4px solid #ff9800; background: white;">`;
        resultHTML += `<strong>Seed:</strong> "${seed}"<br>`;
        resultHTML += `<strong>Result:</strong> Generation failed - try different seed</div>`;
      }
    });
    
    resultHTML += '</div>';
    
    output.innerHTML = resultHTML;
    
  } catch (error) {
    output.innerHTML = `<p>❌ Error in text generation: ${error.message}</p>`;
  }
}

// Add training button
document.addEventListener('DOMContentLoaded', () => {
  const textGenSection = document.getElementById('text-gen-section');
  if (textGenSection) {
    textGenSection.innerHTML = `
      <button onclick="advancedTextGeneration()" 
              style="padding: 12px 24px; background: #9C27B0; color: white; border: none; border-radius: 6px; cursor: pointer; margin: 10px 0;">
        🤖 Train Advanced Text Generator
      </button>
      <div id="text-gen-output"></div>
    `;
  }
});
</script>

<div id="text-gen-section"></div>