Tfjs-vis: установка и использование

TensorFlow.js предоставляет мощный инструмент для визуализации данных и моделей — библиотеку tfjs-vis. Она облегчает анализ работы нейронных сетей, отображение графиков потерь, точности и структуры модели прямо в браузере. Для использования библиотеки в проекте существуют два основных способа подключения:

1. Через CDN

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

Этот метод подходит для быстрого прототипирования и демонстраций, так как не требует установки npm-пакетов.

2. Через npm

npm install @tensorflow/tfjs @tensorflow/tfjs-vis

В коде JavaScript подключение выглядит так:

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

Использование npm обеспечивает более строгий контроль версий и позволяет интегрировать библиотеку в современные фронтенд-проекты.

Основные возможности tfjs-vis

tfjs-vis предоставляет несколько категорий инструментов для визуализации:

  • Графики и диаграммы (render.linechart, render.scatterplot) – для отображения данных, метрик обучения, предсказаний модели.
  • Таблицы (render.table) – для представления исходных данных или результатов модели в табличном виде.
  • Сводки (render.values, render.history) – для отслеживания динамики метрик, таких как loss и accuracy.
  • Слои модели (show.modelSummary, show.layer) – для визуального анализа структуры сети, количества параметров, размеров тензоров.
  • Отображение изображений и тензоров (render.image, render.canvas) – для работы с изображениями и визуализации тензоров в виде пиксельной сетки.

Визуализация данных

Для начала работы с данными используется метод tfvis.render.scatterplot или tfvis.render.linechart. Пример построения графика функции:

const data = Array.from({length: 100}, (_, i) => ({
  x: i / 10,
  y: Math.sin(i / 10)
}));

tfvis.render.scatterplot(
  {name: 'График синусоиды'},
  {values: data},
  {
    xLabel: 'x',
    yLabel: 'y',
    height: 300
  }
);

Ключевые параметры:

  • name — заголовок графика.
  • values — массив объектов {x, y} или объектов с series.
  • Опции xLabel, yLabel, height, width позволяют настроить визуальное представление.

Отслеживание обучения модели

Для мониторинга процесса обучения моделей используется функция tfvis.show.fitCallbacks, которая создает удобные панели с графиками потерь и точности.

const model = tf.sequential();
model.add(tf.layers.dense({units: 10, activation: 'relu', inputShape: [2]}));
model.add(tf.layers.dense({units: 1}));

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

const data = {
  xs: tf.tensor2d([[0,0],[0,1],[1,0],[1,1]]),
  ys: tf.tensor2d([[0],[1],[1],[0]])
};

await model.fit(data.xs, data.ys, {
  epochs: 50,
  callbacks: tfvis.show.fitCallbacks(
    {name: 'Обучение XOR модели'},
    ['loss', 'acc'],
    {height: 300, callbacks: ['onEpochEnd']}
  )
});

Особенности fitCallbacks:

  • Автоматически строит графики метрик на каждом шаге эпохи.
  • Позволяет отслеживать несколько метрик одновременно.
  • Опция callbacks принимает массив событий, таких как onEpochEnd или onBatchEnd, для гибкого контроля визуализации.

Анализ структуры модели

tfjs-vis позволяет визуализировать архитектуру нейронной сети, включая количество слоев, параметры и формы тензоров.

tfvis.show.modelSummary({name: 'Структура модели'}, model);

Дополнительно можно анализировать отдельные слои:

tfvis.show.layer({name: 'Первый слой'}, model.layers[0]);

Преимущества:

  • Быстрая оценка сложности модели.
  • Возможность выявить несоответствия входных и выходных размеров.
  • Поддержка всех стандартных слоев TensorFlow.js.

Визуализация изображений и тензоров

Для работы с изображениями используется метод tfvis.render.image. Например, отображение массива тензоров:

const imageTensor = tf.randomUniform([28, 28, 1]);
tfvis.render.image({name: 'Случайное изображение'}, imageTensor, {width: 200, height: 200});

Особенности:

  • Поддержка черно-белых и цветных изображений.
  • Автоматическое масштабирование значений тензора для корректного отображения.
  • Можно использовать массивы тензоров для визуализации батчей изображений.

Настройка интерфейса визуализации

Все графики и панели создаются в DOM-элементах, которые можно настраивать:

  • container — указывает конкретный HTML-элемент для рендера.
  • width и height — задают размеры визуализации.
  • seriesColors — позволяет задать цвета для разных серий данных.
  • xLabel и yLabel — подписи осей для наглядности.

Пример кастомного контейнера:

const container = {name: 'Кастомный график', tab: 'Данные', styles: {width: '500px', height: '400px'}};
tfvis.render.linechart(container, {values: data}, {xLabel: 'Время', yLabel: 'Значение'});

Использование tab позволяет организовывать панели по вкладкам, создавая аккуратный интерфейс для большого числа графиков.

Работа с таблицами и метками

Для визуального анализа данных и предсказаний удобно использовать tfvis.render.table:

const tableData = [
  {input: [0,0], output: 0},
  {input: [0,1], output: 1},
  {input: [1,0], output: 1},
  {input: [1,1], output: 0}
];

tfvis.render.table({name: 'Данные XOR'}, {headers: ['input', 'output'], values: tableData});

Особенности:

  • Поддержка кастомных заголовков.
  • Автоматическая генерация строк из объектов.
  • Совместимость с различными форматами данных, включая JSON.

Источники производительности и рекомендации

  • Для больших наборов данных лучше использовать батчи визуализации (series), чтобы не перегружать браузер.
  • Избегать частого обновления графиков для каждого шага батча — достаточно обновлять раз в несколько эпох.
  • Использовать отдельные контейнеры для разных графиков, чтобы упорядочить интерфейс.
  • Для сложных моделей использовать визуализацию структуры слоев и веса отдельно, чтобы легче было выявлять проблемы.

tfjs-vis является мощным инструментом для анализа нейронных сетей в браузере, сочетая гибкость графиков, таблиц и визуализации слоев с простым и понятным API.

Оглавление