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 — классическая архитектура свёрточных сетей, предназначенная для распознавания рукописных цифр (MNIST). Основные слои:
Пример использования LeNet в Keras.js:
const inputData = new Float32Array(28*28);
const outputData = await model.predict({input: inputData});
console.log(outputData); // Массив вероятностей классов
Особенности реализации в браузере:
gpu: true ускоряет обработку, особенно
при пакетной классификации изображений.AlexNet значительно сложнее, состоит из 5 свёрточных слоев и 3 полносвязных, использует ReLU и dropout. Применяется для классификации на ImageNet (1000 классов).
Ключевые особенности:
Для запуска в Keras.js необходимо учитывать огромный объём весов, поэтому оптимальным является:
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);
Для обеих архитектур критично корректно нормализовать входные данные:
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 позволяет ускорять работу свёрточных сетей через:
gpu: true.predict().Для проверки работы модели:
const activations = await model.predict({input: inputData, outputLayer: 'conv2d_2'});
console.log(activations);
Визуализация фильтров свёртки позволяет понять, какие признаки выделяются на ранних и глубоких слоях.
Проверка top-k предсказаний помогает оценить точность модели без полной обратной связи.
Keras.js идеально подходит для:
Основные шаги интеграции:
Float32Array.predict() и обработка результатов.