Chapter 23: TensorFlow.js Visor
Step 1: What Exactly is the TensorFlow.js Visor?
TensorFlow.js Visor (or tfjs-vis Visor) is a small, in-browser visualization library (called @tensorflow/tfjs-vis) designed specifically to work with TensorFlow.js.
Its main job:
- Show live graphs, charts, tables, and other visuals inside your web page (or in a separate floating panel) while your model trains or runs.
- Help you understand what your model is doing — loss curves, accuracy over time, confusion matrices, sample predictions, data distributions, weight histograms, etc.
- Keep visualizations organized and non-intrusive — they don’t mess up your main app UI.
The Visor itself is a singleton UI panel (a floating window or tabbed interface) that tfjs-vis creates automatically. You call functions like tfvis.show.fitCallbacks() or tfvis.visor().surface() to send visuals to it.
Key features (still relevant in 2026):
- Live training monitoring (loss/accuracy plots that update every epoch)
- Data visualization (scatter plots, histograms of your dataset)
- Model inspection (confusion matrix, prediction tables)
- Custom surfaces (place charts/tables anywhere on page or in Visor)
- Works entirely in browser — no server needed
It’s lightweight (~100–200 KB minified) and uses libraries like d3.js under the hood for rendering.
Important 2026 note: tfjs-vis was a separate repo but has been archived and integrated/maintained within the main TensorFlow.js ecosystem. You still install it via npm or CDN, and it works great with the latest tfjs.
Step 2: Why Use the Visor? (Real-Life Analogy)
Imagine you’re teaching a child (your model) to recognize handwritten Telugu digits (0–9 like in MNIST).
- Without Visor: You train for 10 epochs → only see final accuracy in console → “Did it improve? Was it overfitting? What went wrong?”
- With Visor: Every epoch, a nice graph pops up showing loss dropping, accuracy rising → you watch live like a progress chart → spot if loss explodes or plateaus → see sample predictions (good/bad) → understand the learning process.
It’s like having a live dashboard for your ML training — makes debugging 10× easier and more fun!
Step 3: How to Set It Up (Super Easy)
Two ways:
- CDN (quick demos):
|
0 1 2 3 4 5 6 7 |
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@latest"></script> |
- NPM (real projects):
|
0 1 2 3 4 5 6 |
npm install @tensorflow/tfjs @tensorflow/tfjs-vis |
|
0 1 2 3 4 5 6 7 |
import * as tf from '@tensorflow/tfjs'; import * as tfvis from '@tensorflow/tfjs-vis'; |
Step 4: Classic Example – Training with Live Visor Graphs
This is the most common use: monitor loss & accuracy during training.
Full HTML file — copy-paste and open in browser:
|
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 |
<!DOCTYPE html> <html> <head> <title>TensorFlow.js + tfjs-vis Tutorial</title> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script> <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@latest"></script> <style> body { font-family: Arial; text-align: center; padding: 40px; } button { padding: 12px 24px; font-size: 1.2em; } #status { font-size: 1.3em; margin: 20px; color: #333; } </style> </head> <body> <h1>TensorFlow.js Visor Demo: Training Monitor</h1> <button onclick="trainModel()">Start Training</button> <div id="status">Click to train a simple model...</div> <script> async function trainModel() { const status = document.getElementById('status'); status.innerHTML = 'Preparing data and model...'; // 1. Simple data: y ≈ 2x + noise const xs = tf.tensor2d([[1], [2], [3], [4], [5], [6], [7], [8], [9], [10]], [10, 1]); const ys = tf.tensor2d([[2.1], [4.2], [5.8], [8.3], [10.1], [12.4], [14.2], [16.0], [18.1], [20.3]], [10, 1]); // 2. Model: single neuron const model = tf.sequential(); model.add(tf.layers.dense({units: 1, inputShape: [1]})); model.compile({optimizer: 'sgd', loss: 'meanSquaredError'}); status.innerHTML = 'Training... Watch the Visor window!'; // 3. Train with tfjs-vis callbacks → opens Visor automatically const surface = tfvis.visor().surface({tab: 'Training Progress', name: 'Loss & Accuracy'}); await model.fit(xs, ys, { epochs: 200, callbacks: tfvis.show.fitCallbacks( surface, ['loss'], // can add 'val_loss', 'acc' if you have validation {callbacks: ['onEpochEnd']} ) }); status.innerHTML = 'Training complete! Check Visor for live loss graph.'; // Predict example const predInput = tf.tensor2d([[15]], [1, 1]); const pred = model.predict(predInput); const value = (await pred.data())[0]; console.log('Predicted for x=15:', value); // ≈30 } </script> </body> </html> |
What happens when you run this:
- Click button → training starts
- A floating Visor panel appears (or new tab if you prefer)
- Inside Visor: Live line chart of loss dropping over epochs
- You see the model learning in real-time — beautiful!
Step 5: More Cool tfjs-vis Features (Quick Examples)
- Scatter Plot of Data
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const data = [ {x: 1, y: 2.1}, {x: 2, y: 4.2}, /* ... */ ]; const values = data.map(d => ({x: d.x, y: d.y})); tfvis.render.scatterplot( {name: 'Training Data', tab: 'Data Viz'}, {values}, {xLabel: 'Input', yLabel: 'Output'} ); |
- Confusion Matrix (after classification)
|
0 1 2 3 4 5 6 7 8 9 10 11 |
const classNames = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; tfvis.show.perClassAccuracy( {name: 'Confusion Matrix', tab: 'Evaluation'}, confusionMatrixData, // array of {label, values} classNames ); |
- Custom Surface (place chart anywhere)
|
0 1 2 3 4 5 6 7 |
const mySurface = {name: 'My Custom Chart', tab: 'Custom'}; tfvis.visor().surface(mySurface); // or render directly |
Step 6: Quick Summary Table
| Feature | What It Does | How to Use | Why Useful in 2026 |
|---|---|---|---|
| Visor Panel | Floating/tabbed window for all visuals | tfvis.visor() | Keeps UI clean, non-intrusive |
| fitCallbacks | Auto-plots loss/accuracy during .fit() | tfvis.show.fitCallbacks(surface, [‘loss’]) | Live training monitoring |
| Scatterplot | Plot data points | tfvis.render.scatterplot(…) | Visualize dataset before training |
| Confusion Matrix | Show classification errors | tfvis.show.perClassAccuracy(…) | Debug model mistakes |
| Custom Surfaces | Place charts/tables anywhere | tfvis.visor().surface(…) | Flexible for complex apps |
Final Teacher Words
TensorFlow.js Visor (from tfjs-vis) = your best friend for visualizing what’s happening inside TensorFlow.js models in the browser.
- No more staring at console logs — see beautiful live graphs!
- Great for learning, debugging, demos, teaching ML in web apps.
In 2026: Still the go-to tool for tfjs visualization — lightweight, no extra servers, and integrates perfectly with training loops.
Got it now? 🔥
Questions?
- Want code for confusion matrix on MNIST?
- How to open Visor in new tab only?
- tfjs-vis vs other viz libs (Chart.js)?
Just ask — class is open! 🚀
