Chapter 29: Example 2
What is “Example 2” in TensorFlow.js?
Example 2 = training a convolutional neural network (CNN) on the MNIST handwritten digit dataset to classify images of digits 0–9.
- Dataset: 60,000 training + 10,000 test images (28×28 grayscale)
- Goal: look at a new 28×28 image → say “this is a 7” (or 3, 8, etc.)
- Model: simple CNN → Conv2D + MaxPooling + Dense layers
- Output: 10 probabilities (one for each digit 0–9) → pick the highest
This is the first real deep learning example — the same pattern powers Google Photos tagging, face recognition, medical scans, Ola object detection, etc.
Full Working Code for Example 2 (Browser-ready)
This version uses the official small subset loading method + live training progress. Save as tfjs-example2.html and open in browser.
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>TensorFlow.js Example 2 – MNIST Digit Recognition</title> <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"></script> <style> body { font-family: Arial, sans-serif; text-align: center; padding: 40px; background: #f8f9fa; } h1 { color: #4285f4; } button { padding: 14px 32px; font-size: 1.3em; background: #4285f4; color: white; border: none; border-radius: 8px; cursor: pointer; margin: 20px; } button:hover { background: #3367d6; } #status { font-size: 1.4em; margin: 30px; color: #444; min-height: 60px; } #log { background: #1e1e1e; color: #d4d4d4; padding: 20px; border-radius: 10px; max-width: 900px; margin: 20px auto; text-align: left; font-family: monospace; max-height: 400px; overflow-y: auto; white-space: pre-wrap; } canvas { border: 2px solid #4285f4; border-radius: 8px; margin: 20px; background: black; } </style> </head> <body> <h1>TensorFlow.js Example 2: Recognize Handwritten Digits (MNIST)</h1> <p style="max-width:800px; margin:20px auto; font-size:1.1em;"> Click below → the model trains a CNN on 60,000 handwritten digits.<br> Watch accuracy climb live in the Visor (floating window) and log.<br> Then draw your own digit on the canvas → click Predict! </p> <button onclick="trainMNIST()">Train Model (takes ~1–3 min)</button> <div id="status">Waiting for you to start training...</div> <div id="log">Training log will appear here...\n</div> <h3>Draw a digit here (0–9)</h3> <canvas id="canvas" width="280" height="280"></canvas><br> <button onclick="clearCanvas()">Clear Canvas</button> <button onclick="predictDigit()">Predict My Drawing</button> <div id="prediction" style="font-size:2em; margin:20px; color:#4285f4;"></div> <script> let model; let isDrawing = false; const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); ctx.lineWidth = 25; ctx.lineCap = 'round'; ctx.strokeStyle = 'white'; canvas.addEventListener('mousedown', () => isDrawing = true); canvas.addEventListener('mouseup', () => { isDrawing = false; ctx.beginPath(); }); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseleave', () => isDrawing = false); function draw(e) { if (!isDrawing) return; ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); ctx.stroke(); ctx.beginPath(); ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); } function clearCanvas() { ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); } clearCanvas(); // start clean async function trainMNIST() { const status = document.getElementById('status'); status.innerHTML = 'Loading MNIST data...'; // ── Load data (official helper – full 60k train / 10k test) ─────── const mnist = await tf.data.mnist({version: '1.0.0', split: 'train'}); const trainData = mnist.map(({xs, ys}) => { return { xs: xs.reshape([28, 28, 1]).div(255.0), ys: ys }; }).batch(32).shuffle(1000); const testMnist = await tf.data.mnist({version: '1.0.0', split: 'test'}); const testData = testMnist.map(({xs, ys}) => { return { xs: xs.reshape([28, 28, 1]).div(255.0), ys: ys }; }).batch(32); status.innerHTML = 'Building CNN model...'; // ── Example 2 Model: Simple CNN for digits ─────────────────────── model = tf.sequential(); model.add(tf.layers.conv2d({ inputShape: [28, 28, 1], filters: 32, kernelSize: 3, activation: 'relu' })); model.add(tf.layers.maxPooling2d({poolSize: [2, 2]})); model.add(tf.layers.conv2d({filters: 64, kernelSize: 3, activation: 'relu'})); model.add(tf.layers.maxPooling2d({poolSize: [2, 2]})); model.add(tf.layers.flatten()); model.add(tf.layers.dense({units: 128, activation: 'relu'})); model.add(tf.layers.dropout({rate: 0.2})); model.add(tf.layers.dense({units: 10, activation: 'softmax'})); model.compile({ optimizer: 'adam', loss: 'categoricalCrossentropy', metrics: ['accuracy'] }); log("Model ready – CNN with 2 conv + pooling + dense layers"); status.innerHTML = 'Training... (watch Visor for live graphs + log)'; // ── Train with live visualization ─────────────────────────────── const surface = tfvis.visor().surface({tab: 'Training', name: 'Progress'}); await model.fitDataset(trainData, { epochs: 5, validationData: testData, callbacks: tfvis.show.fitCallbacks( surface, ['loss', 'val_loss', 'acc', 'val_acc'], {callbacks: ['onEpochEnd']} ) }); status.innerHTML = 'Training finished! 🎉 Accuracy usually 97–99%'; log("Training complete – check Visor for loss/accuracy curves"); // Enable prediction button document.querySelector('button[onclick="predictDigit()"]').disabled = false; } async function predictDigit() { if (!model) { alert("Please train the model first!"); return; } // Process canvas drawing to 28x28 grayscale tensor let img = tf.browser.fromPixels(canvas, 1) .resizeBilinear([28, 28]) .mean(2) .expandDims() .expandDims(-1) .div(255.0); const pred = model.predict(img); const predArray = await pred.argMax(-1).data(); const digit = predArray[0]; document.getElementById('prediction').innerHTML = `Predicted digit: <b>${digit}</b>`; img.dispose(); pred.dispose(); } </script> </body> </html> |
What Happens When You Run This
- Click “Train Model” → data loads, model builds
- Training starts → tfjs-vis Visor opens automatically
- You see live graphs:
- Loss dropping (from ~2.3 → ~0.05–0.1)
- Accuracy climbing (from ~10% → 97–99%)
- Validation curves (shows generalization)
- After 5 epochs (~1–3 min on decent laptop) → accuracy usually 97–99%
- Draw a digit (mouse on canvas) → click “Predict My Drawing” → model tells you what it sees
Line-by-Line – Why This is Example 2
- Data loading: tf.data.mnist() → official helper, gives batched tensors
- Model: 2 convolutional layers + pooling → learns edges → shapes → digits
- Compile: categoricalCrossentropy + adam → standard for multi-class
- fitDataset: trains on streaming data (memory efficient for large datasets)
- tfvis.show.fitCallbacks: plots loss/accuracy live — magic for understanding
Why Example 2 is the Game-Changer
- Example 1 → linear regression (1 neuron, 2 params)
- Example 2 → real deep learning (CNN, many layers, thousands of params)
- You see image input → classification output
- You get 97–99% accuracy in browser — proves tf.js is powerful
In Hyderabad 2026, this exact Example 2 pattern is still the second thing every student/developer runs — because once you see handwritten digits recognized in your browser, you believe you can build real AI apps.
Understood now? 🌟
Want next?
- Improve accuracy to 99%+ with more epochs / better model?
- Add confusion matrix in Visor after training?
- Save/load this model & use it in another project?
Just say — next class ready! 🚀
