Интеграция с React

Для использования возможностей нейронных сетей в React-проекте необходимо установить библиотеку Brain.js через npm или yarn:

npm install brain.js

или

yarn add brain.js

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

import { NeuralNetwork } from 'brain.js';

Импортировать можно как отдельные классы (NeuralNetwork, recurrent.LSTM), так и весь пакет для доступа к дополнительным функциям.

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

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

const net = new NeuralNetwork({
  hiddenLayers: [10, 10], // два скрытых слоя по 10 нейронов
  activation: 'relu',      // функция активации: 'sigmoid', 'relu', 'tanh'
  learningRate: 0.01       // скорость обучения
});

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

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

Подготовка данных для обучения

Brain.js требует данных в формате массивов объектов с ключами input и output. Для React-проектов данные могут приходить с формы, API или локального состояния:

const trainingData = [
  { input: { red: 1, green: 0, blue: 0 }, output: { color: 1 } },
  { input: { red: 0, green: 1, blue: 0 }, output: { color: 0.5 } },
  { input: { red: 0, green: 0, blue: 1 }, output: { color: 0 } },
];

Важно:

  • Значения должны быть нормализованы (обычно в диапазоне 0–1).
  • input и output могут содержать несколько признаков, но их количество должно соответствовать архитектуре сети.

Обучение сети в React

Обучение сети можно выполнять как синхронно, так и асинхронно. Для интерфейсных приложений предпочтителен асинхронный подход, чтобы не блокировать рендер:

const trainNetwork = async () => {
  return new Promise((resolve) => {
    const stats = net.train(trainingData, {
      iterations: 20000,
      errorThresh: 0.005,
      log: true,
      logPeriod: 1000
    });
    resolve(stats);
  });
};

Опции метода train:

  • iterations — максимальное количество итераций обучения.
  • errorThresh — целевой уровень ошибки, при достижении которого обучение остановится.
  • log и logPeriod — вывод прогресса обучения каждые logPeriod итераций.

Использование сети для прогнозов

После обучения сеть можно применять для предсказаний. В React это удобно делать в обработчиках событий или эффектах:

const output = net.run({ red: 0.5, green: 0.2, blue: 0.1 });
console.log(output); // { color: 0.7 } например

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

Интеграция с состоянием React

Для динамического взаимодействия нейронной сети с интерфейсом состояния React рекомендуется хранить данные и результаты в useState или useReducer:

import { useState } from 'react';
import { NeuralNetwork } from 'brain.js';

const net = new NeuralNetwork({ hiddenLayers: [5] });

function ColorPredictor() {
  const [input, setInput] = useState({ red: 0, green: 0, blue: 0 });
  const [prediction, setPrediction] = useState({ color: 0 });

  const handlePredict = () => {
    const output = net.run(input);
    setPrediction(output);
  };

  return (
    <div>
      <button onCl ick={handlePredict}>Предсказать цвет</button>
      <div>Результат: {prediction.color}</div>
    </div>
  );
}

Сохранение и загрузка сети

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

// Сохранение
const json = net.toJSON();
localStorage.setItem('myNetwork', JSON.stringify(json));

// Загрузка
const savedNetwork = JSON.parse(localStorage.getItem('myNetwork'));
const net2 = new NeuralNetwork();
net2.fromJSON(savedNetwork);

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

  • toJSON сохраняет структуру и веса сети.
  • fromJSON восстанавливает сеть с теми же параметрами и результатами обучения.

Работа с LSTM для последовательностей

Для задач обработки текста или временных рядов используется recurrent.LSTM:

import { recurrent } from 'brain.js';

const lstm = new recurrent.LSTM();
const trainingData = [
  { input: 'Привет', output: 'Здравствуйте' },
  { input: 'Как дела?', output: 'Хорошо' },
];

lstm.train(trainingData, { iterations: 500 });
const reply = lstm.run('Привет'); // 'Здравствуйте'

LSTM хорошо подходит для генерации текста, предсказания последовательностей и анализа временных рядов.

Оптимизация производительности в React

  • Обучение больших сетей лучше выполнять вне основного потока рендеринга, используя Web Workers или серверные вычисления.
  • Для часто изменяющихся данных можно использовать мемоизацию сети через useMemo, чтобы не пересоздавать объект нейросети при каждом рендере.
  • Настройка iterations и errorThresh позволяет балансировать между точностью и временем отклика приложения.

Практическая схема интеграции

  1. Инициализация сети — при загрузке компонента или при старте приложения.
  2. Загрузка или обучение — извлечение сохранённой сети или обучение новой.
  3. Интерактивные прогнозы — вызов net.run на основе данных состояния.
  4. Сохранение результатов — при изменении модели или после обучения.

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

Оглавление