Визуализация результатов

ConvNetJS предоставляет встроенные инструменты для наблюдения за процессом обучения нейронных сетей и анализа их производительности. Визуализация позволяет отслеживать динамику ошибки, распределение весов, активность нейронов и эффективность модели на тестовых данных, что критически важно для отладки и оптимизации сети.

Графики потерь и точности

Одним из базовых методов визуализации является построение графиков потерь (loss) и точности (accuracy). ConvNetJS предоставляет объекты типа Trainer и Net для сбора статистики:

var trainer = new convnetjs.SGDTrainer(net, {
  method: 'adadelta',
  batch_size: 10,
  l2_decay: 0.001
});

При каждом вызове trainer.train(x, y) можно сохранять текущие значения потерь и точности:

var stats = trainer.getStats();
loss_history.push(stats.loss);
accuracy_history.push(stats.accuracy);

Эти данные можно визуализировать с помощью простого HTML5 canvas или библиотек вроде Chart.js. Ключевой момент — важно сохранять значения на каждом шаге, чтобы наблюдать как локальные минимумы и шум влияют на процесс обучения.

Визуализация фильтров свёрточных слоёв

Для ConvNetJS характерны свёрточные сети, где каждый фильтр в сверточном слое извлекает определённые признаки. Их визуализация позволяет понять, какие паттерны сеть обучается распознавать.

Фильтры можно получить следующим образом:

var conv_layer = net.layers[0]; // первый свёрточный слой
var filters = conv_layer.filters;

Каждый filter содержит веса в виде многомерного массива (vol), который можно преобразовать в изображение. Для 2D-фильтров с одним каналом:

function renderFilter(filter) {
  var canvas = document.createElement('canvas');
  canvas.width = filter.sx;
  canvas.height = filter.sy;
  var ctx = canvas.getContext('2d');
  var imgData = ctx.createImageData(filter.sx, filter.sy);
  for (var i = 0; i < filter.w.length; i++) {
    var val = Math.floor((filter.w[i] + 1) * 128); // нормализация
    imgData.data[i * 4 + 0] = val;
    imgData.data[i * 4 + 1] = val;
    imgData.data[i * 4 + 2] = val;
    imgData.data[i * 4 + 3] = 255;
  }
  ctx.putImageData(imgData, 0, 0);
  document.body.appendChild(canvas);
}

Такой подход позволяет наблюдать, как фильтры реагируют на различные структуры изображений.

Активации нейронов

Для анализа внутренней работы сети полезно визуализировать активации нейронов на скрытых слоях. Это помогает выявить “мертвые” нейроны и понять распределение признаков:

var x = new convnetjs.Vol(input_array);
net.forward(x, false); // прямой проход
var activations = net.layers[1].out; // второй слой

Полученный объект activations можно визуализировать в виде тепловой карты. Для плотного слоя часто используют 1D-гистограмму, для свёрточного слоя — 2D-карту интенсивностей.

Визуализация градиентов

Отдельное внимание стоит уделять градиентам, особенно при настройке скорости обучения и регуляризации. ConvNetJS хранит градиенты в объекте dw каждого фильтра или нейрона. Визуализация этих градиентов помогает:

  • Проверить корректность обратного распространения ошибки.
  • Выявить слишком большие или маленькие градиенты, которые могут привести к затуханию или взрыву градиентов.

Пример для свёрточного слоя:

var grads = conv_layer.filters.map(f => f.dw);

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

Тестовые изображения и предсказания

Для задач компьютерного зрения удобно визуализировать входные изображения вместе с предсказаниями сети. Для этого создают canvas, на который рисуют изображение и подписывают результат модели:

var pred = net.forward(new convnetjs.Vol(test_image)).w;
ctx.fillStyle = 'red';
ctx.font = '16px Arial';
ctx.fillText(pred.indexOf(Math.max(...pred)), 10, 20);

Такой способ позволяет напрямую оценить, где сеть ошибается, и на каких примерах её производительность снижается.

Динамическая визуализация обучения

ConvNetJS поддерживает пошаговое отслеживание обучения. Используя комбинацию setInterval и trainer.trainBatch(), можно строить анимацию изменения весов и потерь в реальном времени. Это особенно полезно для экспериментов с архитектурой сети, параметрами оптимизатора и регуляризацией.

Интерактивные панели

Для комплексного анализа удобно объединять:

  • Графики потерь и точности.
  • Визуализацию фильтров.
  • Тепловые карты активаций.
  • Предсказания на тестовых изображениях.

В HTML это реализуется с помощью div-контейнеров и canvas, где каждый блок отвечает за отдельный аспект визуализации. Интерактивность достигается через обновление DOM в реальном времени и возможность выбора слоя или фильтра для отображения.

Визуализация в ConvNetJS — это не просто демонстрация данных, а мощный инструмент для анализа, отладки и улучшения архитектуры нейронной сети, позволяющий выявлять узкие места в обучении и делать процесс более прозрачным и управляемым.

Оглавление