TensorFlow.js Visor

TensorFlow.js Visor is an interactive, browser-based tool designed to visualize machine learning models, training processes, and data in real time. It is a powerful addition to the TensorFlow.js ecosystem, making it easier for developers and data scientists to debug, understand, and optimize their machine-learning workflows.

In this guide, we’ll explore TensorFlow.js Visor, its features, and how to integrate it into your TensorFlow.js projects.

What Is TensorFlow.js Visor?

Visor is an integrated dashboard that runs directly in your browser and enables visualization of:

  • Model architecture.
  • Training metrics, such as loss and accuracy over epochs.
  • Dataset previews.
  • Tensors in memory.

It is part of the @tensorflow/tfjs-vis library, specifically designed to enhance the TensorFlow.js development experience.

Why Use TensorFlow.js Visor?

  1. Real-time Feedback: Visualize training progress and metrics in real time.
  2. Debugging Made Easy: Inspect tensors and monitor changes during model execution.
  3. User-friendly: No additional setup is required—just your browser and the TensorFlow.js library.

Setting Up TensorFlow.js Visor

To use TensorFlow.js Visor, you need to install the @tensorflow/tfjs-vis package:

npm install @tensorflow/tfjs-vis

You can also include it directly via a CDN:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>

Getting Started with TensorFlow.js Visor

Here’s a simple example to demonstrate Visor in action.

Step 1: Import TensorFlow.js and TensorFlow.js Visor

import * as tf from '@tensorflow/tfjs';
import * as tfvis from '@tensorflow/tfjs-vis';

Step 2: Open Visor in the Browser

tfvis.visor().open();

The Visor interface will appear as a panel in your browser.

Visualizing Model Training

Example: Linear Regression

// Define a simple linear regression model
const model = tf.sequential();
model.add(tf.layers.dense({units: 1, inputShape: [1]}));

// Compile the model
model.compile({
  optimizer: 'sgd',
  loss: 'meanSquaredError'
});

// Generate synthetic training data
const xs = tf.tensor2d([1, 2, 3, 4], [4, 1]);
const ys = tf.tensor2d([1, 3, 5, 7], [4, 1]);

// Train the model and visualize metrics in Visor
const history = await model.fit(xs, ys, {
  epochs: 100,
  callbacks: tfvis.show.fitCallbacks(
    { name: 'Training Metrics' },
    ['loss'], // Metrics to visualize
    { height: 200, callbacks: ['onEpochEnd'] }
  )
});

This code displays a real-time chart of the loss metric during training in the Visor panel.

Inspecting Tensors

You can inspect tensors created during the execution of your program.

// Create a tensor
const tensor = tf.tensor([1, 2, 3, 4]);

// Log the tensor in Visor
tfvis.visor().surface({
  name: 'Tensor Inspection',
  tab: 'Tensors'
});
tfvis.render.table(
  { name: 'Tensor Values', tab: 'Tensors' },
  { headers: ['Value'], values: tensor.arraySync().map(value => [value]) }
);

Visualizing Model Layers

To understand your model architecture, you can visualize its layers and properties.

// Display the model summary in Visor
tfvis.show.modelSummary(
  { name: 'Model Summary', tab: 'Model' },
  model
);

Visualizing Data

Preview your dataset before using it in training.

// Generate a sample dataset
const data = {
  values: [{ x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 5 }, { x: 4, y: 7 }],
};

// Render a scatter plot in Visor
tfvis.render.scatterplot(
  { name: 'Dataset Visualization', tab: 'Data' },
  data,
  { xLabel: 'X', yLabel: 'Y' }
);

TensorFlow.js Visor Features

  1. Tab-based Organization: Visor organizes visualizations into tabs, making it easy to navigate between data, models, and tensors.
  2. Custom Surfaces: Create your own surfaces for specific visualizations.
  3. Callbacks Integration: Use Visor with TensorFlow.js callbacks to monitor training in real time.

Use Cases for TensorFlow.js Visor

  1. Model Debugging: Identify overfitting or underfitting issues by analyzing training metrics.
  2. Tensor Visualization: Monitor intermediate tensor values to debug custom layers or operations.
  3. Educational Purposes: Teach machine learning concepts interactively in a browser environment.

Advanced Tips

  1. Interactive Visualizations: Use tfvis.show.history() to explore metrics interactively.
  2. Custom Visualizations: Build custom charts with tfvis.render.* methods.
  3. Close Visor Programmatically: tfvis.visor().close();

Leave a Comment