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

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

Структура данных нейронной сети в Synaptic

Сеть в Synaptic строится на основе трёх основных компонентов:

  • Neuron (нейрон) — отдельная единица обработки сигнала.
  • Layer (слой) — совокупность нейронов, выполняющая общую функцию.
  • Network (сеть) — объединение слоёв с установленными связями.

Каждый нейрон имеет следующие ключевые свойства:

  • activation — текущее значение активации нейрона.
  • bias — смещение нейрона, которое влияет на порог активации.
  • connections — объект, содержащий ссылки на входящие (projected) и исходящие (connections) связи.
  • incoming и outgoing — списки с активными связями для вычислений в прямом и обратном проходе.

Слои позволяют объединять нейроны для упрощения построения сети. Они обладают методами:

  • add(neuron) — добавление нейрона в слой.
  • project(layer) — установка связей с другим слоем.
  • activate(input) — передача входных данных через слой.
  • propagate(rate, target) — обратное распространение ошибки.

Получение данных для визуализации

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

function extractNetworkData(network) {
    const neurons = [];
    const links = [];

    network.layers.input.list.forEach(n => neurons.push({id: n.ID, layer: 'input'}));
    network.layers.hidden.forEach((layer, idx) => {
        layer.list.forEach(n => neurons.push({id: n.ID, layer: `hidden_${idx}`}));
    });
    network.layers.output.list.forEach(n => neurons.push({id: n.ID, layer: 'output'}));

    neurons.forEach(neuron => {
        neuron.connections.forEach(conn => {
            links.push({
                source: neuron.id,
                target: conn.to.ID,
                weight: conn.weight
            });
        });
    });

    return {neurons, links};
}

В этом примере создаётся объект, содержащий список нейронов с их идентификаторами и список связей с весами. Это позволяет построить граф сети в любом визуализаторе, поддерживающем узлы и рёбра.

Визуализация с помощью D3.js

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

  1. Создание SVG-контейнера и настройка размеров.
  2. Подготовка данных о нейронах и связях.
  3. Использование d3.forceSimulation для автоматического расположения узлов.
  4. Настройка визуального отображения веса связи через толщину линии или цвет.

Пример кода для визуализации:

const svg = d3.select("svg")
    .attr("width", 800)
    .attr("height", 600);

const {neurons, links} = extractNetworkData(network);

const link = svg.selectAll(".link")
    .data(links)
    .enter()
    .append("line")
    .attr("stroke-width", d => Math.abs(d.weight) * 2)
    .attr("stroke", d => d.weight > 0 ? "green" : "red");

const node = svg.selectAll(".node")
    .data(neurons)
    .enter()
    .append("circle")
    .attr("r", 10)
    .attr("fill", d => d.layer.startsWith('input') ? 'blue' : d.layer.startsWith('hidden') ? 'orange' : 'purple'));

const simulation = d3.forceSimulation(neurons)
    .force("link", d3.forceLink(links).id(d => d.id).distance(50))
    .force("charge", d3.forceManyBody().strength(-200))
    .force("center", d3.forceCenter(400, 300));

simulation.on("tick", () => {
    link
        .attr("x1", d => d.source.x)
        .attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x)
        .attr("y2", d => d.target.y);

    node
        .attr("cx", d => d.x)
        .attr("cy", d => d.y);
});

Визуальное отображение весов и активности

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

Активация нейронов также может отображаться цветом узла: более интенсивный цвет — высокая активация, бледный — низкая.

Пример изменения цвета нейронов в реальном времени:

function updateNodeColors(neurons) {
    node.attr("fill", d => {
        const activation = d.activation || 0;
        return `rgb(${Math.floor(255 * activation)}, 0, ${Math.floor(255 * (1 - activation))})`;
    });
}

Это создаёт динамическую карту активности сети, полезную для анализа работы модели на конкретных входных данных.

Оптимизация отображения больших сетей

Для больших сетей с сотнями нейронов важно:

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

Выводы по построению карты связей

В Synaptic структура сети представлена явно через нейроны и их связи, что делает возможным построение наглядной и информативной визуализации. Использование D3.js или аналогичных библиотек позволяет:

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

Комплексный подход к визуализации помогает выявлять слабые места сети и оптимизировать её архитектуру ещё до обучения или тестирования.

Оглавление