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

Основы интеграции

Keras.js представляет собой библиотеку для запуска моделей Keras прямо в браузере с использованием JavaScript и WebGL. В связке с Angular это позволяет создавать интерактивные веб-приложения с машинным обучением без необходимости серверного бэкенда. Интеграция строится вокруг создания Angular-сервисов и компонентов, которые обеспечивают загрузку, инициализацию и использование нейронных сетей.

Установка и настройка проекта

Для начала необходимо установить Keras.js через npm:

npm install keras-js

После установки библиотека доступна для импорта в Angular-проектах:

import * as KerasJS from 'keras-js';

Важно убедиться, что Angular конфигурация поддерживает работу с WebGL и что бандлер (например, Webpack или Angular CLI) корректно обрабатывает зависимости библиотеки.

Создание сервиса для работы с Keras.js

Angular-сервис позволяет централизованно управлять моделями, обеспечивая повторное использование кода и упрощая тестирование.

import { Injectable } from '@angular/core';
import * as KerasJS from 'keras-js';

@Injectable({
  providedIn: 'root'
})
export class KerasService {
  private model: any;

  constructor() { }

  async loadModel(modelPath: string): Promise<void> {
    this.model = new KerasJS.Model({ filepath: modelPath, gpu: true });
    await this.model.ready();
  }

  async predict(inputData: any): Promise<any> {
    if (!this.model) {
      throw new Error('Модель не загружена');
    }
    return this.model.predict(inputData);
  }
}

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

  • filepath — путь к модели в формате Keras (.json с весами .bin).
  • gpu: true позволяет использовать ускорение через WebGL, значительно повышая производительность.
  • Метод ready() возвращает промис, сигнализирующий о полной загрузке и готовности модели.

Интеграция сервиса в компоненты

Компоненты Angular могут использовать сервис для предсказаний. Для примера создается компонент, который принимает входные данные из формы и отображает результат.

import { Component, OnInit } from '@angular/core';
import { KerasService } from './keras.service';

@Component({
  selector: 'app-predictor',
  template: `
    <input [(ngModel)]="inputData" placeholder="Введите данные">
    <button (click)="makePrediction()">Предсказать</button>
    <div *ngIf="outputData">Результат: {{ outputData }}</div>
  `
})
export class PredictorComponent implements OnInit {
  inputData: any;
  outputData: any;

  constructor(private kerasService: KerasService) { }

  async ngOnInit() {
    await this.kerasService.loadModel('assets/models/my_model.json');
  }

  async makePrediction() {
    this.outputData = await this.kerasService.predict(this.inputData);
  }
}

Особенности работы:

  • Данные необходимо подготавливать в формате, соответствующем входу модели Keras (например, массив чисел или тензор).
  • Асинхронные методы позволяют не блокировать UI, что критично для интерактивных приложений.
  • Angular шаблоны удобно связываются с данными с помощью двухсторонней привязки [(ngModel)].

Управление большими моделями

Для крупных моделей рекомендуется использовать ленивую загрузку и разбиение веса на несколько файлов, чтобы уменьшить время инициализации. Также можно кэшировать веса с использованием IndexedDB или LocalStorage через Keras.js, что позволяет повторно использовать загруженные данные без дополнительной загрузки с сервера.

Обработка ошибок и отладка

  • Проверка доступности WebGL: перед использованием модели важно убедиться, что браузер поддерживает WebGL.
  • Логирование: метод model.ready() позволяет отлавливать ошибки загрузки.
  • Валидация входных данных: Keras.js не выполняет автоматическую проверку размеров входного массива; ошибки могут привести к падению приложения.

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

  • Использование GPU: ключ gpu: true значительно ускоряет обработку.
  • Минимизация объема передаваемых данных: преобразование входных массивов в нужный формат до передачи в модель.
  • Предварительное вычисление: для неизменных данных можно хранить результаты предсказаний и повторно использовать их без повторного вычисления.

Примеры продвинутого использования

  1. Обработка изображений: интеграция с <canvas> для извлечения пиксельных данных и передачи их в модель.
  2. Пакетные предсказания: объединение нескольких входов в один массив для одновременной обработки.
  3. Интерактивные визуализации: использование результатов модели для динамического построения графиков и диаграмм в Angular-компонентах.

Angular и Keras.js создают мощное сочетание для построения современных веб-приложений с машинным обучением прямо на клиенте, позволяя реализовать предсказания в реальном времени, интерактивные интерфейсы и сложные вычислительные задачи без серверного бэкенда.

Оглавление