Интерактивный демо-интерфейс для нейронной сети

Библиотека Synaptic является чисто JavaScript-решением для создания, обучения и тестирования нейронных сетей. Для использования в проекте достаточно подключить её через npm или напрямую через CDN.

Через npm:

npm install synaptic

Подключение в коде:

const synaptic = require('synaptic');
const { Layer, Network, Trainer } = synaptic;

При работе в браузере можно подключить библиотеку напрямую через скрипт:

<script src="https://cdn.jsdelivr.net/npm/synaptic@1.1.4/dist/synaptic.min.js"></script>

Основные компоненты Synaptic

  • Layer — слой нейронной сети. Может быть входным, скрытым или выходным.
  • Neuron — отдельный нейрон, используется при необходимости ручного построения сети.
  • Network — готовая сеть, состоящая из одного или нескольких слоев.
  • Trainer — объект, предоставляющий методы для обучения сети, включая train и trainAsync.

С помощью этих компонентов можно строить как простые перцептроны, так и многослойные сети.

Создание интерактивного интерфейса

Для демонстрационного интерфейса нейронной сети важны следующие элементы:

  1. Визуальное представление сети — отображение слоёв, нейронов и связей.
  2. Ввод данных — поля для задания входных значений.
  3. Вывод результатов — отображение предсказанных значений сети.
  4. Настройки обучения — возможность изменять скорость обучения, количество эпох и функции активации.

Пример структуры интерфейса

<div id="network-container"></div>
<div>
  <label>Вход 1: <input id="input1" type="number" step="0.01"></label>
  <label>Вход 2: <input id="input2" type="number" step="0.01"></label>
  <button id="predict">Предсказать</button>
</div>
<div id="output"></div>

Визуализация сети

Используется HTML5 <canvas> или SVG для рисования слоёв и связей. Каждая связь может иметь толщину или цвет, отражающие её вес.

Пример базового подхода:

function drawNetwork(network, canvas) {
  const ctx = canvas.getContext('2d');
  const layers = network.layers.input.size;
  // Пройтись по каждому нейрону и отрисовать его
  // Затем соединить с нейронами следующего слоя
}

Весовые коэффициенты можно визуализировать через цвет линии: положительные — зелёные, отрицательные — красные, а толщина линии пропорциональна величине веса.

Обработка пользовательского ввода

Для интерактивной работы создаются обработчики событий:

document.getElementById('predict').addEventListener('click', () => {
  const input1 = parseFloat(document.getElementById('input1').value);
  const input2 = parseFloat(document.getElementById('input2').value);
  const output = myNetwork.activate([input1, input2]);
  document.getElementById('output').innerText = 'Выход: ' + output.map(v => v.toFixed(2)).join(', ');
});

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

Настройка и обучение сети

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

  • Ползунки для скорости обучения (learningRate)
  • Поля для количества эпох
  • Выпадающие списки для выбора функции активации
const trainer = new Trainer(myNetwork);

function trainNetwork(trainingSet) {
  const learningRate = parseFloat(document.getElementById('learningRate').value);
  const epochs = parseInt(document.getElementById('epochs').value);
  
  trainer.train(trainingSet, {
    rate: learningRate,
    iterations: epochs,
    error: 0.005,
    shuffle: true,
    log: 1
  });
}

Обратная связь и интерактивная визуализация обучения

Для наглядности можно отображать графики ошибки в реальном времени. Используются JavaScript-библиотеки для графиков, такие как Chart.js или D3.js.

const errorHistory = [];

trainer.train(trainingSet, {
  rate: 0.1,
  iterations: 1000,
  log: 1,
  cost: Trainer.cost.MSE,
  schedule: (data) => {
    errorHistory.push(data.error);
    updateChart(errorHistory);
  }
});

График позволяет наблюдать уменьшение ошибки и динамику обучения сети.

Поддержка сложных сетевых архитектур

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

function createNetwork(type) {
  if (type === 'MLP') {
    const inputLayer = new Layer(2);
    const hiddenLayer = new Layer(3);
    const outputLayer = new Layer(1);
    
    inputLayer.project(hiddenLayer);
    hiddenLayer.project(outputLayer);
    
    return new Network({ input: inputLayer, hidden: [hiddenLayer], output: outputLayer });
  } else if (type === 'LSTM') {
    // Пример создания рекуррентной сети
  }
}

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

Интерактивная отладка и тестирование

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

function updateWeight(neuronIndex, targetIndex, newWeight) {
  myNetwork.layers.hidden[0].list[neuronIndex].connections.projected[targetIndex].weight = newWeight;
  drawNetwork(myNetwork, canvas);
}

В сочетании с визуализацией это создаёт полный интерактивный инструмент для исследования работы нейронной сети.

Оглавление