The primary interface to the visor is the visor() function.

This returns a singleton instance of the Visor class. The singleton object will be replaced if the visor is removed from the DOM for some reason.

// Show the visor
tfvis.visor();

Renders summary information about a layer and a histogram of parameters in that layer.

const model = tf.sequential({
 layers: [
   tf.layers.dense({inputShape: [784], units: 32, activation: 'relu'}),
   tf.layers.dense({units: 10, activation: 'softmax'}),
 ]
});

const surface = { name: 'Layer Summary', tab: 'Model Inspection'};
tfvis.show.layer(surface, model.getLayer(undefined, 1));

Renders a summary of a tf.Model. Displays a table with layer information.

const model = tf.sequential({
 layers: [
   tf.layers.dense({inputShape: [784], units: 32, activation: 'relu'}),
   tf.layers.dense({units: 10, activation: 'softmax'}),
 ]
});

const surface = { name: 'Model Summary', tab: 'Model Inspection'};
tfvis.show.modelSummary(surface, model);

Shows a histogram with the distribution of all values in a given tensor.

const tensor = tf.tensor1d([0, 0, 0, 0, 2, 3, 4]);

const surface = {name: 'Values Distribution', tab: 'Model Inspection'};
await tfvis.show.valuesDistribution(surface, tensor);

Returns a collection of callbacks to pass to tf.Model.fit. Callbacks are returned for the following events, onBatchEnd & onEpochEnd.

const model = tf.sequential({
 layers: [
   tf.layers.dense({inputShape: [784], units: 32, activation: 'relu'}),
   tf.layers.dense({units: 10, activation: 'softmax'}),
 ]
});

model.compile({
  optimizer: 'sgd',
  loss: 'categoricalCrossentropy',
  metrics: ['accuracy']
});

const data = tf.randomNormal([100, 784]);
const labels = tf.randomUniform([100, 10]);

function onBatchEnd(batch, logs) {
  console.log('Accuracy', logs.acc);
}

const surface = { name: 'show.fitCallbacks', tab: 'Training' };
// Train for 5 epochs with batch size of 32.
model.fit(data, labels, {
   epochs: 5,
   batchSize: 32,
   callbacks: tfvis.show.fitCallbacks(surface, ['loss', 'acc']),
});

Renders a tf.Model training 'History'.

const model = tf.sequential({
 layers: [
   tf.layers.dense({inputShape: [784], units: 32, activation: 'relu'}),
   tf.layers.dense({units: 10, activation: 'softmax'}),
 ]
});

model.compile({
  optimizer: 'sgd',
  loss: 'categoricalCrossentropy',
  metrics: ['accuracy']
});

const data = tf.randomNormal([100, 784]);
const labels = tf.randomUniform([100, 10]);

function onBatchEnd(batch, logs) {
  console.log('Accuracy', logs.acc);
}

const surface = { name: 'show.history', tab: 'Training' };
// Train for 5 epochs with batch size of 32.
const history = await model.fit(data, labels, {
   epochs: 5,
   batchSize: 32
});

tfvis.show.history(surface, history, ['loss', 'acc']);

const model = tf.sequential({
 layers: [
   tf.layers.dense({inputShape: [784], units: 32, activation: 'relu'}),
   tf.layers.dense({units: 10, activation: 'softmax'}),
 ]
});

model.compile({
  optimizer: 'sgd',
  loss: 'categoricalCrossentropy',
  metrics: ['accuracy']
});

const data = tf.randomNormal([100, 784]);
const labels = tf.randomUniform([100, 10]);

function onBatchEnd(batch, logs) {
  console.log('Accuracy', logs.acc);
}

const surface = { name: 'show.history live', tab: 'Training' };
// Train for 5 epochs with batch size of 32.
const history = [];
await model.fit(data, labels, {
   epochs: 5,
   batchSize: 32,
   callbacks: {
     onEpochEnd: (epoch, log) => {
       history.push(log);
       tfvis.show.history(surface, history, ['loss', 'acc']);
     }
   }
});

Renders a barchart.

const data = [
  { index: 0, value: 50 },
  { index: 1, value: 100 },
  { index: 2, value: 150 },
 ];

// Render to visor
const surface = { name: 'Bar chart', tab: 'Charts' };
tfvis.render.barchart(surface, data);

Renders a confusion matrix.

Can optionally exclude the diagonal from being shaded if one wants the visual focus to be on the incorrect classifications. Note that if the classification is perfect (i.e. only the diagonal has values) then the diagonal will always be shaded.

const rows = 5;
const cols = 5;
const values = [];
for (let i = 0; i < rows; i++) {
  const row = []
  for (let j = 0; j < cols; j++) {
    row.push(Math.round(Math.random() * 50));
  }
  values.push(row);
}
const data = { values };

// Render to visor
const surface = { name: 'Confusion Matrix', tab: 'Charts' };
tfvis.render.confusionMatrix(surface, data);

// The diagonal can be excluded from shading.

const data = {
  values: [[4, 2, 8], [1, 7, 2], [3, 3, 20]],
}

// Render to visor
const surface = {
 name: 'Confusion Matrix with Excluded Diagonal', tab: 'Charts'
};

tfvis.render.confusionMatrix(surface, data, {
  shadeDiagonal: false
});

Renders a heatmap.

const rows = 50;
const cols = 20;
const values = [];
for (let i = 0; i < rows; i++) {
  const row = []
  for (let j = 0; j < cols; j++) {
    row.push(i * j)
  }
  values.push(row);
}
const data = { values };

// Render to visor
const surface = { name: 'Heatmap', tab: 'Charts' };
tfvis.render.heatmap(surface, data);

const data = {
  values: [[4, 2, 8, 20], [1, 7, 2, 10], [3, 3, 20, 13]],
  xTickLabels: ['cheese', 'pig', 'font'],
  yTickLabels: ['speed', 'smoothness', 'dexterity', 'mana'],
}

// Render to visor
const surface = { name: 'Heatmap w Custom Labels', tab: 'Charts' };
tfvis.render.heatmap(surface, data);

Renders a histogram of values

const data = Array(100).fill(0)
  .map(x => Math.random() * 100 - (Math.random() * 50))

// Push some special values for the stats table.
data.push(Infinity);
data.push(NaN);
data.push(0);

const surface = { name: 'Histogram', tab: 'Charts' };
tfvis.render.histogram(surface, data);

Renders a line chart

const series1 = Array(100).fill(0)
  .map(y => Math.random() * 100 - (Math.random() * 50))
  .map((y, x) => ({ x, y, }));

const series2 = Array(100).fill(0)
  .map(y => Math.random() * 100 - (Math.random() * 150))
  .map((y, x) => ({ x, y, }));

const series = ['First', 'Second'];
const data = { values: [series1, series2], series }

const surface = { name: 'Line chart', tab: 'Charts' };
tfvis.render.linechart(surface, data);

const series1 = Array(100).fill(0)
  .map(y => Math.random() * 100 + 50)
  .map((y, x) => ({ x, y, }));

const data = { values: [series1] }

// Render to visor
const surface = { name: 'Zoomed Line Chart', tab: 'Charts' };
tfvis.render.linechart(surface, data, { zoomToFit: true });

Renders a scatter plot

const series1 = Array(100).fill(0)
  .map(y => Math.random() * 100 - (Math.random() * 50))
  .map((y, x) => ({ x, y, }));

const series2 = Array(100).fill(0)
  .map(y => Math.random() * 100 - (Math.random() * 150))
  .map((y, x) => ({ x, y, }));

const series = ['First', 'Second'];
const data = { values: [series1, series2], series }

const surface = { name: 'Scatterplot', tab: 'Charts' };
tfvis.render.scatterplot(surface, data);

Renders a table

const headers = [
 'Col 1',
 'Col 2',
 'Col 3',
];

const values = [
 [1, 2, 3],
 ['4', '5', '6'],
 ['strong>7</strong>', true, false],
];

const surface = { name: 'Table', tab: 'Charts' };
tfvis.render.table(surface, { headers, values });

Computes how often predictions matches labels

const labels = tf.tensor1d([0, 0, 1, 2, 2, 2]);
const predictions = tf.tensor1d([0, 0, 0, 2, 1, 1]);

const result = await tfvis.metrics.accuracy(labels, predictions);
console.log(result)

Computes a confusion matrix from predictions and labels. Each value in labels and predictions should correspond to some output class. It is assumed that these values go from 0 to numClasses - 1.

const labels = tf.tensor1d([1, 2, 4]);
const predictions = tf.tensor1d([2, 2, 4]);
const result = await tfvis.metrics.confusionMatrix(labels, predictions);
console.log(JSON.stringify(result, null, 2))

Computes per class accuracy between prediction and labels. Each value in labels and predictions should correspond to some output class. It is assumed that these values go from 0 to numClasses - 1.

const labels = tf.tensor1d([0, 0, 1, 2, 2, 2]);
const predictions = tf.tensor1d([0, 0, 0, 2, 1, 1]);

const result = await tfvis.metrics.perClassAccuracy(labels, predictions);
console.log(JSON.stringify(result, null, 2))

Returns an array of objects that each have an an accuracy and a count property for each class.