# Convolutional Neural Networks with TensorFlow.js

> Source: https://learn-javascript.org/tensorflow-cnns/
> Part of Learn JavaScript, free to read.

## 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