Визуализация слоёв и весов через tfjs-vis

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

Подключение tfjs-vis

Для использования tfjs-vis в проекте необходимо добавить библиотеку через CDN или npm:

// Через CDN
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis"></script>

// Через npm
npm install @tensorflow/tfjs-vis

После подключения можно обращаться к объекту tfvis, который содержит все методы визуализации.

Визуализация функции потерь и метрик

Одной из ключевых задач при обучении нейронной сети является отслеживание функции потерь и метрик точности. Tfjs-vis предоставляет функцию show.history для визуализации динамики обучения:

const metrics = ['loss', 'acc'];

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

Ключевые моменты:

  • fitCallbacks автоматически создает интерактивный график по каждой эпохе.
  • Параметр metrics указывает, какие метрики отображать.
  • Параметр callbacks позволяет настроить момент обновления графика (например, onEpochEnd).

Визуализация весов и слоёв модели

Для анализа структуры нейронной сети и распределения весов каждого слоя используется tfvis.show.modelSummary и tfvis.show.layer:

// Отображение сводки модели
tfvis.show.modelSummary({ name: 'Сводка модели' }, model);

// Визуализация весов первого слоя
const layer = model.getLayer(undefined, 0);
tfvis.show.layer({ name: 'Первый слой' }, layer);

Особенности визуализации весов:

  • model.getLayer(index) возвращает слой модели по индексу или имени.
  • Визуализация позволяет видеть матрицы весов и смещения, что помогает выявлять аномалии на ранней стадии обучения.
  • Для плотных слоёв (Dense) отображается тепловая карта весов, для сверточных (Conv2D) — визуализация фильтров.

Интерактивные графики и распределения данных

Tfjs-vis поддерживает построение интерактивных графиков для анализа данных и распределений:

const data = [
  { x: 1, y: 2 },
  { x: 2, y: 3 },
  { x: 3, y: 5 }
];

tfvis.render.scatterplot(
  { name: 'Распределение данных' },
  { values: data },
  { xLabel: 'X', yLabel: 'Y', height: 300 }
);

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

  • Scatterplot позволяет наблюдать корреляцию между переменными.
  • Можно использовать render.histogram для изучения распределения весов или активаций.
  • Встроенные интерактивные элементы позволяют масштабировать и исследовать отдельные области графика.

Мониторинг активаций и фильтров

Для глубокого анализа нейронной сети полезно визуализировать активации промежуточных слоёв:

const layerOutputs = model.layers.map(layer => layer.output);
const activationModel = tf.model({ inputs: model.input, outputs: layerOutputs });

const activations = activationModel.predict(tf.tensor([inputData]));

activations.forEach((activation, i) => {
  tfvis.show.image({ name: `Активации слоя ${i}` }, activation.squeeze());
});

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

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

Настройка внешнего вида графиков

Tfjs-vis поддерживает гибкую настройку графиков:

tfvis.render.linechart(
  { name: 'Функция потерь' },
  { values: lossValues, series: ['train', 'val'] },
  {
    xLabel: 'Эпоха',
    yLabel: 'Потеря',
    width: 400,
    height: 300,
    zoomToFit: true
  }
);

Основные параметры:

  • xLabel, yLabel — подписи осей.
  • width, height — размеры графика.
  • zoomToFit — масштабирование под размер данных.

Работа с большим количеством слоёв

При больших моделях с десятками слоёв удобнее использовать циклы для автоматической визуализации:

model.layers.forEach((layer, i) => {
  tfvis.show.layer({ name: `Слой ${i}: ${layer.name}` }, layer);
});

Это позволяет создавать панель визуализации, где все слои отображены последовательно, облегчая отладку и анализ сети.

Интеграция с браузерными интерфейсами

Tfjs-vis может быть встроен в интерфейсы на базе HTML и CSS. Элементы графиков создаются в контейнерах, например:

<div id="charts-container"></div>
tfvis.visor().surface({ name: 'Графики', tab: 'Обучение', styles: { width: 600 } });
  • visor() управляет панелью визуализации.
  • Можно создавать несколько вкладок для различных типов графиков (метрики, распределение весов, активации).

Практические рекомендации

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

Tfjs-vis делает возможным полноценный анализ и мониторинг моделей в реальном времени, без необходимости перехода на Python или внешние инструменты. Правильное использование визуализации ускоряет отладку, улучшает понимание работы слоёв и повышает качество создаваемых нейросетей.

Оглавление