ml5.js + Teachable Machine Integration

<script>
function explainTeachableMachine() {
  const explanation = `
    <h4>🎓 What is Teachable Machine?</h4>
    
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0;">
      <p>Teachable Machine is Google's web-based tool that makes creating machine learning models fast, easy, and accessible to everyone. No coding required!</p>
      
      <h5>✨ Key Features:</h5>
      <ul>
        <li><strong>No Coding Required:</strong> Visual interface for model creation</li>
        <li><strong>Three Model Types:</strong> Images, Sounds, and Poses</li>
        <li><strong>Real-time Training:</strong> See results immediately</li>
        <li><strong>Easy Export:</strong> Use models in various platforms</li>
        <li><strong>Web-based:</strong> Works in any modern browser</li>
      </ul>
    </div>
    
    <div style="background: #e8f5e8; padding: 15px; border-radius: 8px; margin: 15px 0;">
      <h5>🔄 Teachable Machine → ml5.js Workflow</h5>
      <ol>
        <li><strong>Create:</strong> Train your model at teachablemachine.withgoogle.com</li>
        <li><strong>Export:</strong> Download or get shareable link</li>
        <li><strong>Load:</strong> Import into ml5.js with one line of code</li>
        <li><strong>Use:</strong> Make predictions in your web app</li>
      </ol>
    </div>
  `;
  
  document.getElementById('tm-explanation').innerHTML = explanation;
}

explainTeachableMachine();
</script>

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

<script>
// Example: Loading different types of Teachable Machine models
async function loadTeachableMachineModels() {
  const output = document.getElementById('tm-loading-output');
  output.innerHTML = '<p>🔄 Loading Teachable Machine model examples...</p>';
  
  try {
    // Example 1: Image Classification Model
    // Replace with your own Teachable Machine model URL
    const imageModelURL = 'https://teachablemachine.withgoogle.com/models/YOUR_MODEL_ID/';
    
    let resultHTML = '<h4>📥 Loading Teachable Machine Models</h4>';
    
    resultHTML += `
      <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0;">
        <h5>1. Image Classification Model</h5>
        <pre style="background: #e9ecef; padding: 12px; border-radius: 4px;">
// Load image classification model from Teachable Machine
const imageClassifier = await ml5.imageClassifier('${imageModelURL}');

// Classify an image
const predictions = await imageClassifier.classify(imageElement);
console.log(predictions);
        </pre>
      </div>
    `;
    
    resultHTML += `
      <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0;">
        <h5>2. Sound Classification Model</h5>
        <pre style="background: #e9ecef; padding: 12px; border-radius: 4px;">
// Load sound classification model
const soundClassifier = await ml5.soundClassifier('TeachableMachine', {
  modelUrl: 'https://teachablemachine.withgoogle.com/models/YOUR_SOUND_MODEL/'
});

// Start classifying sounds from microphone
soundClassifier.classify(gotSoundResult);

function gotSoundResult(error, results) {
  if (error) {
    console.error(error);
    return;
  }
  console.log(results);
}
        </pre>
      </div>
    `;
    
    output.innerHTML = resultHTML;
    
  } catch (error) {
    output.innerHTML = `<p>❌ Error loading models: ${error.message}</p>`;
  }
}

loadTeachableMachineModels();
</script>

<div id="tm-loading-output"></div>