Интеграция с фреймворками

Mind.js — это легковесная библиотека для работы с нейронными сетями на стороне клиента и сервера. Основная задача при интеграции с фронтенд-фреймворками заключается в корректном управлении состоянием модели, обработке данных и связывании с UI-компонентами.

Подключение Mind.js в проект

В большинстве современных проектов используется модульная система ES6. Mind.js можно подключить через npm:

import { NeuralNetwork } from "mindjs";

Для проектов без сборщика можно использовать CDN:

<script src="https://cdn.jsdelivr.net/npm/mindjs/dist/mind.min.js"></script>

После подключения библиотека доступна через глобальный объект mind.

Создание и обучение нейронной сети

Нейронная сеть создаётся объектом NeuralNetwork. Основные параметры, влияющие на интеграцию с UI:

  • hiddenLayers — массив с количеством нейронов в скрытых слоях.
  • learningRate — скорость обучения.
  • iterations — количество итераций тренировки.

Пример создания сети:

const network = new NeuralNetwork({
  hiddenLayers: [10, 10],
  learningRate: 0.05,
  iterations: 20000
});

const trainingData = [
  { input: [0, 0], output: [0] },
  { input: [0, 1], output: [1] },
  { input: [1, 0], output: [1] },
  { input: [1, 1], output: [0] }
];

network.train(trainingData);

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

Для React ключевой момент — синхронизация состояния модели с компонентами. Эффективнее всего хранить экземпляр сети в useRef, чтобы избежать пересоздания при каждом рендере.

import React, { useRef, useState } from "react";
import { NeuralNetwork } from "mindjs";

function XORComponent() {
  const networkRef = useRef(new NeuralNetwork({ hiddenLayers: [5] }));
  const [output, setOutput] = useState(null);

  const handleTrain = () => {
    const trainingData = [
      { input: [0, 0], output: [0] },
      { input: [0, 1], output: [1] },
      { input: [1, 0], output: [1] },
      { input: [1, 1], output: [0] }
    ];
    networkRef.current.train(trainingData);
  };

  const handlePredict = (input) => {
    const result = networkRef.current.run(input);
    setOutput(result[0].toFixed(2));
  };

  return (
    <div>
      <button onCl ick={handleTrain}>Обучить сеть</button>
      <button onCl ick={() => handlePredict([1, 0])}>Прогноз</button>
      {output && <p>Результат: {output}</p>}
    </div>
  );
}

Особое внимание уделяется отдельному хранению состояния модели, чтобы React не рендерил её повторно.

Интеграция с Vue.js

В Vue.js нейронная сеть обычно хранится в data или ref. Методы train и run вызываются внутри методов компонента. Для больших моделей рекомендуется выполнять обучение асинхронно, чтобы не блокировать основной поток.

<template>
  <div>
    <button @click="trainNetwork">Обучить сеть</button>
    <button @click="predict([1, 0])">Прогноз</button>
    <p v-if="output">Результат: {{ output }}</p>
  </div>
</template>

<script>
import { NeuralNetwork } from "mindjs";

export default {
  setup() {
    const network = new NeuralNetwork({ hiddenLayers: [5] });
    const output = Vue.ref(null);

    const trainNetwork = () => {
      const trainingData = [
        { input: [0, 0], output: [0] },
        { input: [0, 1], output: [1] },
        { input: [1, 0], output: [1] },
        { input: [1, 1], output: [0] }
      ];
      network.train(trainingData);
    };

    const predict = (input) => {
      const result = network.run(input);
      output.value = result[0].toFixed(2);
    };

    return { output, trainNetwork, predict };
  }
};
</script>

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

В Angular нейронную сеть удобно инкапсулировать в сервис, что позволяет использовать её в разных компонентах через dependency injection.

import { Injectable } from '@angular/core';
import { NeuralNetwork } from 'mindjs';

@Injectable({ providedIn: 'root' })
export class NeuralService {
  private network: NeuralNetwork;

  constructor() {
    this.network = new NeuralNetwork({ hiddenLayers: [5] });
  }

  train(data: { input: number[]; output: number[] }[]) {
    this.network.train(data);
  }

  predict(input: number[]): number {
    return this.network.run(input)[0];
  }
}

Использование в компоненте:

@Component({
  selector: 'app-xor',
  template: `
    <button (click)="train()">Обучить сеть</button>
    <button (click)="predict([1,0])">Прогноз</button>
    <p *ngIf="output">Результат: {{ output }}</p>
  `
})
export class XorComponent {
  output: number | null = null;

  constructor(private neuralService: NeuralService) {}

  train() {
    const trainingData = [
      { input: [0, 0], output: [0] },
      { input: [0, 1], output: [1] },
      { input: [1, 0], output: [1] },
      { input: [1, 1], output: [0] }
    ];
    this.neuralService.train(trainingData);
  }

  predict(input: number[]) {
    this.output = this.neuralService.predict(input);
  }
}

Асинхронное обучение и визуализация прогресса

Для больших наборов данных или сложных моделей обучение может занимать значительное время. Mind.js поддерживает пошаговое обучение с возможностью отслеживания прогресса через trainAsync.

network.trainAsync(trainingData, {
  iterations: 100000,
  callback: (stats) => {
    console.log(`Итерация: ${stats.iterations}, Ошибка: ${stats.error}`);
  }
});

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

Связь с компонентами UI

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

Сохранение и загрузка модели

Для повторного использования или передачи модели между фронтендом и сервером можно использовать сериализацию:

const json = network.toJSON();
// сохранение в локальное хранилище
localStorage.setItem('network', JSON.stringify(json));

// восстановление модели
const loadedNetwork = new NeuralNetwork();
loadedNetwork.fromJSON(JSON.parse(localStorage.getItem('network')));

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

Лучшие практики

  • Хранение экземпляра сети вне цикла рендеринга компонентов.
  • Асинхронное обучение для больших моделей.
  • Визуализация прогресса обучения.
  • Сериализация для долговременного хранения.
  • Декуплирование логики модели и UI.

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

Оглавление