Визуализация архитектуры сети

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

Структура слоев и их отображение

Каждая нейронная сеть в ConvNetJS создаётся как последовательность слоев. Слои определяются с помощью объектов класса Layer, таких как FullyConnLayer, ConvLayer, PoolLayer, SoftmaxLayer и других. Каждый слой имеет собственные параметры: количество нейронов или фильтров, функции активации, размеры входа и выхода.

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

for (let i = 0; i < net.layers.length; i++) {
    let layer = net.layers[i];
    console.log(`Слой ${i}: Тип = ${layer.layer_type}, Размер выхода = ${layer.out_sx}x${layer.out_sy}x${layer.out_depth}`);
}

Ключевые параметры для визуализации:

  • layer_type — тип слоя (полносвязный, свёрточный, пуллинг и т.д.).
  • out_sx, out_sy, out_depth — размеры выходного тензора слоя.
  • num_inputs — количество входов в слой, важно для анализа соединений.

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

Свёрточные слои (ConvLayer) содержат фильтры, которые обучаются во время тренировки сети. Для анализа того, какие паттерны извлекаются, удобно визуализировать сами фильтры:

let filters = convLayer.filters;
for (let i = 0; i < filters.length; i++) {
    let filter = filters[i];
    console.log(`Фильтр ${i}: ${filter.w.length} весов`);
}

Каждый фильтр представляет собой многомерный массив весов, который можно преобразовать в изображение для отображения. Часто применяют нормализацию весов к диапазону [0, 255] для визуализации.

Активации слоев

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

let x = new convnetjs.Vol(inputWidth, inputHeight, inputDepth);
let output = net.forward(x);
console.log("Активации последнего слоя:", output.w);

Для свёрточных и пуллинговых слоев активации можно визуализировать как набор карт признаков, где каждая карта соответствует одному фильтру. Важно сохранять правильное отображение пространственных размеров (out_sx, out_sy).

Графическая визуализация сети

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

function drawNetwork(ctx, net, startX, startY) {
    let x = startX;
    for (let i = 0; i < net.layers.length; i++) {
        let layer = net.layers[i];
        let height = layer.out_sy * 10;
        let width = layer.out_sx * 10;
        ctx.fillStyle = "rgba(100, 150, 255, 0.5)";
        ctx.fillRect(x, startY, width, height);
        ctx.strokeRect(x, startY, width, height);
        x += width + 20;
    }
}

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

Визуализация процесса тренировки

Для мониторинга процесса тренировки сети применяют графики функции потерь и точности. ConvNetJS содержит объект Trainer, который возвращает значения потерь на каждой итерации:

let trainer = new convnetjs.SGDTrainer(net, {learning_rate:0.01, momentum:0.9, batch_size:20});
let loss = trainer.train(x, y);
console.log(`Потери на шаге ${i}: ${loss}`);

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

Интерактивная визуализация

Для детального анализа полезно комбинировать отображение архитектуры, фильтров и активаций в интерактивной панели. Например, можно использовать HTML-элементы и Canvas для:

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

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

Оптимизация визуализации

При больших сетях необходимо учитывать производительность браузера. Для этого используют:

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

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

Оглавление