Локализация объектов: регрессия координат

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

Установка через npm:

npm install keras-js

Подключение через CDN:

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

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

Загрузка модели Keras

Keras.js работает с моделями, экспортированными из Python Keras. Для этого используется формат JSON и бинарные файлы весов .bin. Экспорт модели в Keras Python:

from keras.models import model_from_json

# Сохранение структуры модели
model_json = model.to_json()
with open("model.json", "w") as json_file:
    json_file.write(model_json)

# Сохранение весов
model.save_weights("model_weights.h5")

Для использования в Keras.js веса необходимо конвертировать в бинарный формат с помощью встроенного инструмента kerasjs-converter.

kerasjs-converter --input_model model.h5 --output_path ./kerasjs_model

В результате получаем model.json и папку с весами.

Инициализация модели в JavaScript

const KerasJS = require('keras-js');

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

Параметр gpu: true позволяет использовать WebGL для ускорения вычислений, что критично для больших моделей.

Формат входных данных

Для задачи локализации объектов модель обычно предсказывает координаты прямоугольника, ограничивающего объект. Выходные данные — вектор [x_min, y_min, x_max, y_max] или [x_center, y_center, width, height].

Входные данные должны быть представлены в формате тензора Float32Array. Для изображений размерность обычно [каналы, высота, ширина]. Пример подготовки изображения:

function preprocessImage(image, width, height) {
  // Создание канала для RGB
  const tensor = new Float32Array(3 * width * height);
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0, width, height);
  const imageData = ctx.getImageData(0, 0, width, height).data;

  for (let i = 0; i < width * height; i++) {
    tensor[i] = imageData[i * 4] / 255;       // R
    tensor[i + width * height] = imageData[i * 4 + 1] / 255; // G
    tensor[i + 2 * width * height] = imageData[i * 4 + 2] / 255; // B
  }
  return tensor;
}

Выполнение предсказания

Предсказание выполняется методом model.predict() и возвращает промис. Пример:

const inputTensor = preprocessImage(imageElement, 224, 224);

model.ready().then(() => {
  return model.predict({ input: inputTensor });
}).then(outputData => {
  const coordinates = outputData.output; // [x_min, y_min, x_max, y_max]
  console.log('Предсказанные координаты:', coordinates);
});

Важно учитывать нормализацию координат: если модель обучалась на нормализованных значениях [0,1], необходимо масштабировать их обратно до размеров изображения.

const x_min = coordinates[0] * imageWidth;
const y_min = coordinates[1] * imageHeight;
const x_max = coordinates[2] * imageWidth;
const y_max = coordinates[3] * imageHeight;

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

  • Использование WebGL: ключевой параметр для ускорения выполнения модели на клиентской стороне.
  • Минимизация размера модели: при локализации объектов часто достаточно лёгкой CNN для предварительной обработки.
  • Пакетная обработка: если необходимо предсказывать координаты для множества объектов, лучше объединять изображения в батчи.

Визуализация результатов

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

const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.strokeRect(x_min, y_min, x_max - x_min, y_max - y_min);

Это позволит мгновенно оценить точность регрессии координат.

Интеграция с веб-приложением

Keras.js легко интегрируется с существующими фронтенд-фреймворками, такими как React или Vue. Модель можно загружать один раз при инициализации компонента и вызывать метод predict() при каждом новом изображении, что обеспечивает интерактивную работу в браузере без серверной обработки.

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

Keras.js возвращает ошибки при неправильном формате данных или несовпадении структуры модели. Основные рекомендации:

  • Проверять размерность входного тензора.
  • Убедиться, что веса загружены корректно.
  • Для больших моделей контролировать использование памяти, особенно при работе на GPU через WebGL.

Использование кастомных слоёв

Для сложных моделей локализации иногда применяются нестандартные слои, которых нет в Keras.js по умолчанию. В этом случае необходимо либо переписать модель с использованием стандартных слоёв, либо реализовать кастомный слой на JavaScript, используя API KerasJS.layers.

Заключение

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

Оглавление