Свёрточные сети: LeNet, AlexNet-подобные архитектуры

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

Загрузка и инициализация моделей

Для работы с Keras.js необходимо импортировать библиотеку и создать экземпляр объекта KerasJS.Model, указав пути к файлам модели и весов:

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

await model.ready();
  • filepath — путь к JSON-файлу модели, экспортированной из Keras.
  • gpu — использование WebGL для ускорения вычислений на GPU браузера.

После вызова model.ready() модель готова к предсказаниям.

Структура входных и выходных данных

Keras.js принимает входные данные в виде TypedArray (Float32Array) с форматом, соответствующим Keras-модели. Для свёрточных сетей это обычно массив размерности [N, C, H, W] (N — размер батча, C — число каналов, H — высота, W — ширина).

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

const inputArray = new Float32Array(width * height * channels);
// Заполнение inputArray значениями пикселей в формате [R, G, B]

Выходные данные также возвращаются как TypedArray, требующий интерпретации в зависимости от задачи (классификация, детекция и т.д.).


Архитектуры LeNet и AlexNet в Keras.js

LeNet

LeNet — классическая архитектура свёрточных сетей, предназначенная для распознавания рукописных цифр (MNIST). Основные слои:

  1. Conv2D (C1) — свёртка 5×5, 6 фильтров, активация tanh.
  2. AveragePooling (S2) — субдискретизация 2×2.
  3. Conv2D (C3) — свёртка 5×5, 16 фильтров.
  4. AveragePooling (S4) — субдискретизация 2×2.
  5. Flatten + Dense (C5/F6) — полносвязные слои.
  6. Output — softmax для классификации 10 классов.

Пример использования LeNet в Keras.js:

const inputData = new Float32Array(28*28);
const outputData = await model.predict({input: inputData});
console.log(outputData); // Массив вероятностей классов

Особенности реализации в браузере:

  • Малый размер модели позволяет запускать предсказания на CPU без заметной задержки.
  • Использование gpu: true ускоряет обработку, особенно при пакетной классификации изображений.

AlexNet-подобные архитектуры

AlexNet значительно сложнее, состоит из 5 свёрточных слоев и 3 полносвязных, использует ReLU и dropout. Применяется для классификации на ImageNet (1000 классов).

Ключевые особенности:

  • Conv1: 11×11, stride 4, 96 фильтров.
  • MaxPooling1: 3×3, stride 2.
  • Conv2: 5×5, 256 фильтров, локальная нормализация.
  • Conv3–5: последовательные 3×3 свёртки, увеличение глубины до 384–256 фильтров.
  • Fully Connected Layers: FC6 и FC7 по 4096 нейронов, Dropout 0.5.
  • Output: softmax 1000 классов.

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

  • Использование модельных весов, уменьшенных с помощью quantization.
  • Разделение модели на несколько частей для постепенной загрузки.
  • Настройка gpu: true для ускоренного выполнения.

Пример предсказания:

const imageArray = preprocessImageHTMLCanvas(canvas, 224, 224); // Resize + normalize
const prediction = await model.predict({input: imageArray});
const top5 = Array.from(prediction)
                  .map((prob, index) => ({index, prob}))
                  .sort((a, b) => b.prob - a.prob)
                  .slice(0, 5);
console.log(top5);

Преобразование и нормализация данных

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

  • LeNet: значения пикселей в диапазоне [0,1].
  • AlexNet: центрирование по среднему изображения и масштабирование до [-1,1] или [0,1], в зависимости от реализации модели.
function normalizeImage(data, mean=0.5, std=0.5){
  const normalized = new Float32Array(data.length);
  for (let i = 0; i < data.length; i++) {
    normalized[i] = (data[i] / 255 - mean) / std;
  }
  return normalized;
}

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

Keras.js позволяет ускорять работу свёрточных сетей через:

  1. WebGL: включение GPU вычислений через параметр gpu: true.
  2. Пакетная обработка: обработка нескольких изображений за один вызов predict().
  3. Использование TypedArray: минимизирует накладные расходы на копирование данных.
  4. Lazy loading моделей: загружать только необходимые слои или веса по мере необходимости.

Отладка и визуализация

Для проверки работы модели:

  • Вывод активаций слоёв:
const activations = await model.predict({input: inputData, outputLayer: 'conv2d_2'});
console.log(activations);
  • Визуализация фильтров свёртки позволяет понять, какие признаки выделяются на ранних и глубоких слоях.

  • Проверка top-k предсказаний помогает оценить точность модели без полной обратной связи.


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

Keras.js идеально подходит для:

  • Реализации интерактивных классификаторов изображений.
  • Распознавания рукописного текста на клиентской стороне.
  • Приложений с ограниченной серверной мощностью.

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

  1. Подготовка модели в Keras и экспорт в JSON и бинарные веса.
  2. Импорт Keras.js в проект и инициализация модели.
  3. Преобразование входных изображений в формат Float32Array.
  4. Выполнение predict() и обработка результатов.