Chapter 33: Example 2 Training

What is “Example 2 Training”?

Example 2 Training = the model.fitDataset() (or model.fit()) call when training the convolutional neural network (CNN) on the full MNIST dataset (60,000 training images).

In simple words:

• Before training → model has random weights → it basically guesses randomly (≈10% accuracy — like picking a digit out of 10)
• During training → the model sees all 60,000 images many times (epochs)
• For each batch of images:
  • Makes predictions (10 probabilities per image)
  • Compares predictions to true labels
  • Calculates how wrong it was (categorical crossentropy loss)
  • Computes gradients → gently updates millions of weights (backpropagation + Adam optimizer)
• After each epoch → loss drops, accuracy climbs
• After 5–6 epochs → accuracy reaches 97–99% on test set

After training → you can draw your own digit on canvas → model tells you what it thinks it is — and it usually gets it right!

Why This Training Feels So Impressive

• 60,000 images × 28×28 pixels × 6 epochs = millions of operations — all in your browser!
• Loss starts high (~2.3) → drops to ~0.05–0.1
• Accuracy starts ~10–20% → climbs to 97–99%
• Validation accuracy (on unseen test images) follows closely → shows real learning, not memorizing

Full Runnable Code – Example 2 Training (with Live Monitoring)

Save as tfjs-example2-training.html and open in browser (Chrome/Edge/Firefox).

What You Should See During Example 2 Training

1. Click “Start Training” → data loads (takes 10–30 sec)
2. tfjs-vis Visor opens automatically (floating window or tab)
3. Graphs update every epoch:
   • Loss: starts ~2.3 → drops to ~0.05–0.1
   • Accuracy: starts ~10–30% → climbs to 97–99%
   • Validation curves follow closely (good generalization)
4. Log shows progress
5. After 6 epochs (~1–3 min on decent laptop) → accuracy usually 97.5–99.2%
6. Draw any digit → “Predict” → model guesses correctly most times

Typical Training Progress (What Numbers to Expect)

• Epoch 1: loss ≈ 0.4–0.6, acc ≈ 85–90%
• Epoch 3: loss ≈ 0.1–0.15, acc ≈ 96–97%
• Epoch 6: loss ≈ 0.05–0.08, acc ≈ 98–99%

If accuracy stays low → common reasons:

• Too few epochs (try 10 instead of 6)
• Bad drawing (draw slowly, thicker lines)
• Browser using CPU instead of GPU (Chrome usually uses WebGL)

Final Teacher Summary

Example 2 Training = the model.fitDataset() step where the small CNN learns to classify 60,000 handwritten digits.

• Starts almost random (~10% accuracy)
• Sees 60,000 images many times (6 epochs)
• Conv layers learn edges → shapes → digit patterns
• Loss drops fast at first, then slowly fine-tunes
• Ends with 97–99% accuracy — model can now read digits you draw!

This training step is where you first feel real deep learning power in the browser — from guessing randomly to almost perfect digit recognition in minutes.

Understood completely? 🌟

Want next?

• How to improve this model to 99.2%+ accuracy?
• Add confusion matrix to see which digits confuse it most?
• Save/load this trained model & use it in another project?

Just tell me — next class is ready! 🚀