Работа с предобученными весами MobileNet, VGG, ResNet

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

Установка выполняется стандартно через npm или подключением скрипта в HTML:

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

или через npm:

npm install keras-js

После подключения библиотека доступна через объект KerasJS.

Загрузка предобученной модели

Для загрузки модели необходимо иметь два файла: описание модели в формате .json и веса в формате .bin.

Пример инициализации модели:

const model = new KerasJS.Model({
  filepaths: {
    model: 'model.json',
    weights: 'model_weights.buf'
  },
  gpu: true // использование WebGL для ускорения
});

await model.ready();

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

  • gpu: true позволяет использовать WebGL для ускоренной обработки тензоров.
  • Метод model.ready() возвращает Promise, гарантируя, что модель полностью загружена перед началом инференса.

Использование MobileNet

MobileNet — это компактная CNN, оптимизированная для мобильных устройств. В Keras.js она используется аналогично другим моделям.

Пример инференса:

import ndarray from 'ndarray';

const input = new Float32Array(224 * 224 * 3); // RGB изображение 224x224
// Заполнить input значениями пикселей и нормализовать
for (let i = 0; i < input.length; i++) {
  input[i] = (input[i] / 127.5) - 1.0;
}

const inputData = {
  input_1: new Float32Array(input)
};

const outputData = await model.predict(inputData);
console.log(outputData);

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

  • Работает с изображениями размером 224x224.
  • Входные данные нормализуются в диапазон [-1, 1].
  • Выход модели — вероятности по 1000 классам ImageNet.

Работа с VGG

VGG — это глубокая сеть с большим количеством слоев (VGG16, VGG19). Отличается высокой точностью на ImageNet, но большой вычислительной нагрузкой.

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

const vggModel = new KerasJS.Model({
  filepaths: {
    model: 'vgg16.json',
    weights: 'vgg16_weights.buf'
  },
  gpu: true
});

await vggModel.ready();

Подготовка изображения:

  • Размер входного изображения: 224x224.
  • Нормализация: вычитание средних значений каналов RGB (обычно [123.68, 116.779, 103.939]).
function preprocessVGG(input) {
  for (let i = 0; i < input.length; i += 3) {
    input[i] -= 123.68;     // R
    input[i+1] -= 116.779;  // G
    input[i+2] -= 103.939;  // B
  }
  return input;
}

После этого данные можно передавать в model.predict.

Использование ResNet

ResNet отличается наличием residual connections, что позволяет строить очень глубокие сети без проблем с затуханием градиентов.

Пример загрузки ResNet50:

const resnetModel = new KerasJS.Model({
  filepaths: {
    model: 'resnet50.json',
    weights: 'resnet50_weights.buf'
  },
  gpu: true
});

await resnetModel.ready();

Особенности ResNet в Keras.js:

  • Входной размер: 224x224.
  • Выход: вероятности по 1000 классам ImageNet.
  • Необходима стандартная нормализация, аналогичная VGG.

Оптимизация инференса в браузере

  • Использование gpu: true ускоряет обработку через WebGL.
  • Для больших моделей (ResNet, VGG) рекомендуется предварительно уменьшать разрешение изображений, если точность допускает.
  • Асинхронная загрузка моделей с await model.ready() предотвращает блокировку UI.

Преобразование моделей Keras в Keras.js

  1. В Keras на Python:
from keras.models import load_model
import kerasjs

model = load_model('my_model.h5')
kerasjs.converters.save_keras_model(model, 'model_folder')
  1. В результате получится model.json и model_weights.buf, готовые для использования в Keras.js.

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

  • Входные данные: Float32Array, нормализованные согласно требованиям модели.
  • Выходные данные: объект с массивами вероятностей.
  • Для обработки изображений удобно использовать библиотеки ndarray или tfjs для преобразования данных.

Совместная работа с Canvas

Для браузерного инференса можно напрямую брать данные из <canvas>:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, 224, 224);
const input = new Float32Array(224 * 224 * 3);

for (let i = 0; i < 224*224; i++) {
  input[i*3] = imageData.data[i*4];      // R
  input[i*3+1] = imageData.data[i*4+1];  // G
  input[i*3+2] = imageData.data[i*4+2];  // B
}

После этого массив input можно передавать в model.predict.

Выводы по работе с предобученными моделями

  • MobileNet подходит для легких задач и быстрого инференса.
  • VGG требует больших ресурсов, но обеспечивает высокую точность.
  • ResNet оптимален для глубоких архитектур с residual connections.
  • В Keras.js ключевым является корректное преобразование входных данных и использование асинхронной загрузки моделей.

Ключевой принцип работы — точное соответствие формата входа и нормализации изображения требованиям каждой конкретной модели.

Оглавление