Foundations Updated 2026-09 View as Markdown

Convolutional Neural Networks with TensorFlow.js

Master computer vision with CNNs using TensorFlow.js.

Convolutional Neural Networks with TensorFlow.js#

Master computer vision with CNNs using TensorFlow.js. Learn to build image classifiers, object detectors, and visual recognition systems that run directly in the browser.

What You'll Learn#

Understanding CNN architecture and convolution operations

Building image classifiers from scratch

Transfer learning with pre-trained models

Real-time image processing in the browser

Advanced computer vision techniques

Prerequisites#

javascript

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@latest/dist/tfjs-vis.umd.min.js"></script>

1. CNN Fundamentals#

javascript

<script>
function explainCNNs() {
  const explanation = `
    <h4>🔍 Convolutional Neural Networks Explained</h4>
    
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0;">
      <h5>What Makes CNNs Special for Images?</h5>
      <ul>
        <li><strong>Spatial Hierarchy:</strong> Learn features from simple to complex</li>
        <li><strong>Translation Invariance:</strong> Recognize objects anywhere in image</li>
        <li><strong>Parameter Sharing:</strong> Same filter applied across entire image</li>
        <li><strong>Local Connectivity:</strong> Focus on local patterns first</li>
      </ul>
    </div>
    
    <div style="background: #e8f5e8; padding: 15px; border-radius: 8px; margin: 15px 0;">
      <h5>🏗️ CNN Architecture Layers</h5>
      <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
        <div>
          <h6>Feature Extraction</h6>
          <ul>
            <li>Convolutional layers</li>
            <li>Activation functions (ReLU)</li>
            <li>Pooling layers</li>
          </ul>
        </div>
        <div>
          <h6>Classification</h6>
          <ul>
            <li>Flatten layer</li>
            <li>Dense layers</li>
            <li>Output layer</li>
          </ul>
        </div>
      </div>
    </div>
  `;
  
  document.getElementById('cnn-explanation').innerHTML = explanation;
}

explainCNNs();
</script>

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

2. Building a CNN from Scratch#

javascript

<script>
async function buildCNNFromScratch() {
  const output = document.getElementById('cnn-build-output');
  output.innerHTML = '<p>🔧 Building CNN architecture...</p>';
  
  try {
    // Create a CNN for image classification
    const model = tf.sequential();
    
    // First convolutional block
    model.add(tf.layers.conv2d({
      inputShape: [28, 28, 1], // MNIST-style input
      filters: 32,
      kernelSize: 3,
      activation: 'relu',
      padding: 'same'
    }));
    
    model.add(tf.layers.maxPooling2d({
      poolSize: 2,
      strides: 2
    }));
    
    // Second convolutional block
    model.add(tf.layers.conv2d({
      filters: 64,
      kernelSize: 3,
      activation: 'relu',
      padding: 'same'
    }));
    
    model.add(tf.layers.maxPooling2d({
      poolSize: 2,
      strides: 2
    }));
    
    // Third convolutional block
    model.add(tf.layers.conv2d({
      filters: 128,
      kernelSize: 3,
      activation: 'relu',
      padding: 'same'
    }));
    
    model.add(tf.layers.maxPooling2d({
      poolSize: 2,
      strides: 2
    }));
    
    // Flatten and dense layers
    model.add(tf.layers.flatten());
    
    model.add(tf.layers.dropout({rate: 0.5}));
    
    model.add(tf.layers.dense({
      units: 128,
      activation: 'relu'
    }));
    
    model.add(tf.layers.dropout({rate: 0.3}));
    
    // Output layer for 10 classes (digits 0-9)
    model.add(tf.layers.dense({
      units: 10,
      activation: 'softmax'
    }));
    
    // Compile the model
    model.compile({
      optimizer: tf.train.adam(0.001),
      loss: 'categoricalCrossentropy',
      metrics: ['accuracy']
    });
    
    // Display model summary
    let resultHTML = '<h4>🏗️ CNN Architecture Built Successfully!</h4>';
    
    resultHTML += `
      <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0;">
        <h5>📊 Model Summary:</h5>
        <ul>
          <li><strong>Total Parameters:</strong> ${model.countParams().toLocaleString()}</li>
          <li><strong>Architecture:</strong> 3 Conv blocks + 2 Dense layers</li>
          <li><strong>Input Shape:</strong> 28×28 grayscale images</li>
          <li><strong>Output Classes:</strong> 10 (digits 0-9)</li>
        </ul>
      </div>
    `;
    
    resultHTML += `
      <div style="background: #e8f5e8; padding: 15px; border-radius: 8px; margin: 15px 0;">
        <h5>🎯 Layer Details:</h5>
        <table style="width: 100%; border-collapse: collapse;">
          <tr style="background: #f0f0f0;">
            <th style="padding: 8px; border: 1px solid #ddd;">Layer Type</th>
            <th style="padding: 8px; border: 1px solid #ddd;">Output Shape</th>
            <th style="padding: 8px; border: 1px solid #ddd;">Parameters</th>
          </tr>
        </table>
        <p><em>Conv2D layers extract features, MaxPooling reduces dimensions, Dense layers classify</em></p>
      </div>
    `;
    
    output.innerHTML = resultHTML;
    
    // Store model for potential training
    window.cnnModel = model;
    
  } catch (error) {
    output.innerHTML = `<p>❌ Error building CNN: ${error.message}</p>`;
  }
}

buildCNNFromScratch();
</script>

<div id="cnn-build-output"></div>

3. Transfer Learning with Pre-trained Models#

javascript

<script>
async function demonstrateTransferLearning() {
  const output = document.getElementById('transfer-learning-output');
  output.innerHTML = '<p>📥 Loading pre-trained model for transfer learning...</p>';
  
  try {
    // Load MobileNet pre-trained model
    const mobilenet = await tf.loadLayersModel('https://storage.googleapis.com/tfjs-models/tfjs/mobilenet_v1_0.25_224/model.json');
    
    let resultHTML = '<h4>🔄 Transfer Learning Setup</h4>';
    
    resultHTML += `
      <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 15px 0;">
        <h5>✨ What is Transfer Learning?</h5>
        <p>Transfer learning leverages pre-trained models to solve new tasks faster and with less data.</p>
        
        <h6>🎯 Benefits:</h6>
        <ul>
          <li><strong>Faster Training:</strong> Start with learned features</li>
          <li><strong>Less Data Required:</strong> Leverage existing knowledge</li>
          <li><strong>Better Performance:</strong> Often beats training from scratch</li>
          <li><strong>Resource Efficient:</strong> Less computational power needed</li>
        </ul>
      </div>
    `;
    
    resultHTML += `
      <div style="background: #e8f5e8; padding: 15px; border-radius: 8px; margin: 15px 0;">
        <h5>🏗️ Creating Custom Classifier</h5>
        <pre style="background: #f0f0f0; padding: 12px; border-radius: 4px; overflow-x: auto;">
// Remove the top classification layer
const featureExtractor = tf.model({
  inputs: mobilenet.input,
  outputs: mobilenet.getLayer('conv_pw_13_relu').output
});

// Add custom classification layers
const customModel = tf.sequential();
customModel.add(featureExtractor);
customModel.add(tf.layers.globalAveragePooling2d());
customModel.add(tf.layers.dense({
  units: 128,
  activation: 'relu'
}));
customModel.add(tf.layers.dropout({rate: 0.5}));
customModel.add(tf.layers.dense({
  units: 3, // For 3 custom classes
  activation: 'softmax'
}));

// Freeze feature extractor layers
featureExtractor.trainable = false;
        </pre>
      </div>
    `;
    
    output.innerHTML = resultHTML;
    
  } catch (error) {
    output.innerHTML = `<p>❌ Error with transfer learning: ${error.message}</p>`;
  }
}

demonstrateTransferLearning();
</script>

<div id="transfer-learning-output"></div>

🏆 Code Challenge: Custom Image Classifier#

🎯 Challenge: Build a Real-time Webcam Classifier#

Goal: Create a CNN that classifies objects from your webcam in real-time.

Requirements:

Use transfer learning with a pre-trained model

Capture video from webcam

Classify images every 500ms

Display top 3 predictions with confidence scores

Add smooth prediction averaging

💡 Show Solution Hints

Use tf.loadLayersModel() to load MobileNet

Create video element with getUserMedia()

Use tf.browser.fromPixels() to convert video frames

Implement prediction smoothing with exponential moving average

Use requestAnimationFrame() for smooth updates

🎓 Congratulations!#

You've mastered CNNs with TensorFlow.js! You can now build sophisticated computer vision applications that run directly in the browser.

🚀 Next Steps in Computer Vision

Explore object detection with YOLO or SSD models

Learn about semantic segmentation for pixel-level classification

Experiment with generative models like StyleGAN

Build augmented reality applications with pose estimation

Create real-time style transfer effects

Get the JavaScript agent pack

A battle-tested AGENTS.md, the review checklist, and the failure-mode cheat sheet for JavaScript. One email, then occasional updates when the tooling shifts. No course pitch.

Unsubscribe in one click. We never sell the list. Or just take the AGENTS.md now — no email needed.