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

Основные концепции

Keras.js представляет собой библиотеку для запуска предобученных моделей Keras непосредственно в браузере на базе JavaScript. Она поддерживает выполнение как на CPU, так и с использованием WebGL для ускорения вычислений. Vue.js, в свою очередь, предоставляет реактивный фреймворк для построения интерфейсов, что позволяет динамически отображать результаты работы моделей и управлять пользовательским вводом.

Ключевой аспект интеграции заключается в обеспечении синхронизации реактивного состояния Vue с процессами загрузки, инициализации и инференса модели Keras.js.

Установка и подготовка

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

npm install keras-js

Или в index.html:

<script src="https://cdn.jsdelivr.net/npm/keras-js@0.8.0/dist/keras.min.js"></script>

После установки создаётся экземпляр модели, указывая путь к весам (.bin) и архитектуре (.json):

import KerasJS from 'keras-js';

const model = new KerasJS.Model({
  filepath: 'model/model.json',
  gpu: true
});

Организация кода во Vue.js

В Vue.js модель Keras.js удобно инициализировать в хукe жизненного цикла mounted, чтобы она была готова к работе после отрисовки компонента.

export default {
  data() {
    return {
      model: null,
      loading: true,
      result: null,
      error: null
    };
  },
  async mounted() {
    try {
      this.model = new KerasJS.Model({
        filepath: 'model/model.json',
        gpu: true
      });
      await this.model.ready();
      this.loading = false;
    } catch (err) {
      this.error = err;
    }
  },
  methods: {
    async predict(inputData) {
      if (!this.model) return;
      try {
        this.result = await this.model.predict({ input: inputData });
      } catch (err) {
        this.error = err;
      }
    }
  }
};

Работа с реактивными данными

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

<div v-if="loading">Загрузка модели...</div>
<div v-else>
  <input v-model="userInput" placeholder="Введите данные"/>
  <button @click="predict({ input: userInput })">Предсказать</button>
  <div v-if="result">Результат: {{ result }}</div>
  <div v-if="error">Ошибка: {{ error.message }}</div>
</div>

Использование v-model и реактивных переменных result, loading и error позволяет полностью отказаться от ручного обновления DOM.

Обработка изображений и массивов данных

Для инференса нейронных сетей, работающих с изображениями, необходимо подготовить данные в формате Float32Array и нормализовать их:

function preprocessImage(imgElement, width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imgElement, 0, 0, width, height);
  const imageData = ctx.getImageData(0, 0, width, height).data;
  const data = new Float32Array(width * height * 3);
  
  for (let i = 0; i < width * height; i++) {
    data[i * 3] = imageData[i * 4] / 255.0;       // R
    data[i * 3 + 1] = imageData[i * 4 + 1] / 255.0; // G
    data[i * 3 + 2] = imageData[i * 4 + 2] / 255.0; // B
  }

  return data;
}

Интеграция с Vue позволяет использовать реактивные элементы <input type="file"> и сразу передавать изображения в модель:

<input type="file" @change="onFileChange"/>
methods: {
  onFileChange(event) {
    const file = event.target.files[0];
    const img = new Image();
    img.onl oad = async () => {
      const inputData = preprocessImage(img, 224, 224);
      await this.predict({ input: inputData });
    };
    img.src = URL.createObjectURL(file);
  }
}

Использование Web Workers для асинхронного инференса

Для предотвращения блокировки интерфейса при работе с большими моделями, Keras.js можно запускать в Web Worker. Vue обеспечивает удобный механизм передачи сообщений между компонентом и воркером:

worker.js:

importScripts('keras.min.js');

let model;

self.onmess age = async (event) => {
  const { type, payload } = event.data;

  if (type === 'init') {
    model = new KerasJS.Model({ filepath: payload.path, gpu: true });
    await model.ready();
    postMessage({ type: 'ready' });
  } else if (type === 'predict') {
    const result = await model.predict(payload.input);
    postMessage({ type: 'result', result });
  }
};

Vue-компонент:

mounted() {
  this.worker = new Worker('worker.js');
  this.worker.postMessage({ type: 'init', payload: { path: 'model/model.json' } });

  this.worker.onmess age = (event) => {
    if (event.data.type === 'ready') this.loading = false;
    if (event.data.type === 'result') this.result = event.data.result;
  };
},
methods: {
  predict(inputData) {
    this.worker.postMessage({ type: 'predict', payload: { input: inputData } });
  }
}

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

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

  • WebGL ускоряет матричные операции и свёрточные слои. В Keras.js это активируется через параметр gpu: true.
  • Минимизация данных: передача только необходимых массивов Float32Array без лишней упаковки.
  • Кэширование модели: повторная инициализация модели не требуется, если она уже была загружена.
  • Динамическая загрузка компонентов Vue: позволяет подгружать модели только при необходимости, уменьшая первоначальное время загрузки страницы.

Сложные сценарии

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

computed: {
  topPrediction() {
    if (!this.result) return null;
    return Object.entries(this.result)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 3);
  }
}

Отображение в шаблоне:

<ul v-if="topPrediction">
  <li v-for="([label, score], index) in topPrediction" :key="index">
    {{ label }}: {{ (score * 100).toFixed(2) }}%
  </li>
</ul>

Заключение по архитектуре

Интеграция Keras.js с Vue.js строится на принципе реактивного управления состоянием модели и данных. Использование хуков жизненного цикла, Web Workers и WebGL позволяет создавать высокопроизводительные, отзывчивые и интерактивные интерфейсы для работы с нейронными сетями прямо в браузере. Правильная подготовка данных и их нормализация обеспечивает корректную работу модели, а реактивные вычисления Vue позволяют легко визуализировать результаты.

Оглавление