Progressive Web Apps с ML

ConvNetJS — это библиотека на JavaScript для работы с нейронными сетями прямо в браузере или на Node.js. Основные преимущества — независимость от серверной части и возможность мгновенной визуализации обучения.

Подключение в браузере производится через <script>:

<script src="https://cs.stanford.edu/people/karpathy/convnetjs/build/convnet-min.js"></script>

Для Node.js используется установка через npm:

npm install convnetjs

После этого можно подключить библиотеку:

const convnetjs = require('convnetjs');

Создание нейронной сети

Основная единица — объект ConvNetJS.Net. Его конфигурация описывается массивом слоев, где каждый слой задается объектом с типом и параметрами.

Пример простейшей сети для классификации изображений 28x28 пикселей:

let layer_defs = [];
layer_defs.push({type:'input', out_sx:28, out_sy:28, out_depth:1});
layer_defs.push({type:'conv', sx:5, filters:8, stride:1, pad:2, activation:'relu'});
layer_defs.push({type:'pool', sx:2, stride:2});
layer_defs.push({type:'fc', num_neurons:10, activation:'softmax'});

let net = new convnetjs.Net();
net.makeLayers(layer_defs);

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

  • input — входной слой, задает размерность данных.
  • conv — сверточный слой, sx — размер ядра, filters — количество фильтров, stride и pad регулируют сдвиг и заполнение.
  • pool — слой подвыборки, уменьшает размерность карты признаков.
  • fc — полносвязный слой, часто используется перед выходным слоем.
  • activation — функция активации (relu, sigmoid, tanh, softmax).

Настройка тренера

Для обучения используется объект ConvNetJS.Trainer, который принимает сеть и параметры обучения:

let trainer = new convnetjs.Trainer(net, {
    method: 'sgd', 
    learning_rate: 0.01, 
    l2_decay: 0.001, 
    batch_size: 20
});

Пояснения параметров:

  • method — алгоритм оптимизации (sgd, adagrad, adadelta, adam).
  • learning_rate — скорость обучения.
  • l2_decay — коэффициент регуляризации для предотвращения переобучения.
  • batch_size — размер мини-батча.

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

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

let x = new convnetjs.Vol([0,1,2,3,4,5,6,7,8]);

Для изображений размерностью 28x28:

let imageArray = new Array(28*28).fill(0); // заполнение нулями
let inputVol = new convnetjs.Vol(imageArray);

Обучение сети

Обучение проводится через вызов train у объекта Trainer:

trainer.train(inputVol, 3); // 3 — номер класса

Для нескольких эпох и батчей можно организовать цикл:

for (let i = 0; i < 1000; i++) {
    let x = new convnetjs.Vol(getNextImageData());
    let y = getNextLabel();
    trainer.train(x, y);
}

Предсказания и оценка

После обучения можно получать предсказания через метод forward:

let output = net.forward(inputVol);
let predictedClass = output.w.indexOf(Math.max(...output.w));
  • output.w — массив вероятностей по классам.
  • indexOf(Math.max(...)) — определение класса с наибольшей вероятностью.

Для оценки точности используется подсчет совпадений с эталонными метками:

let correct = 0;
for (let i = 0; i < testData.length; i++) {
    let x = new convnetjs.Vol(testData[i].image);
    let y = testData[i].label;
    let output = net.forward(x);
    let pred = output.w.indexOf(Math.max(...output.w));
    if(pred === y) correct++;
}
let accuracy = correct / testData.length;

Сохранение и загрузка сети

Сеть можно сериализовать в JSON для хранения или передачи:

let json = net.toJSON();
let jsonString = JSON.stringify(json);

Для восстановления сети:

let net2 = new convnetjs.Net();
net2.fromJSON(JSON.parse(jsonString));

Использование ConvNetJS в Progressive Web Apps

Интеграция с PWA позволяет создавать автономные ML-приложения, работающие без подключения к серверу. Основные шаги:

  1. Кэширование библиотек и моделей через Service Worker.
  2. Локальное хранение модели в IndexedDB или LocalStorage.
  3. Взаимодействие с пользовательским интерфейсом для ввода данных и отображения результатов в реальном времени.
  4. Обучение и инференс на клиенте, что уменьшает задержку и обеспечивает работу оффлайн.

Пример кэширования модели в IndexedDB:

async function saveModel(id, model) {
    const db = await indexedDB.open('ml-db', 1);
    db.onupgradenee ded = () => db.result.createObjectStore('models');
    db.result.transaction('models', 'readwrite').objectStore('models').put(model, id);
}

async function loadModel(id) {
    const db = await indexedDB.open('ml-db', 1);
    return new Promise(resolve => {
        db.result.transaction('models').objectStore('models').get(id).onsucc ess = e => resolve(e.target.result);
    });
}

Использование таких подходов позволяет PWA с ML работать полностью автономно, обеспечивая мгновенный отклик на действия пользователя без сетевых задержек.

Визуализация и отладка

ConvNetJS включает встроенные инструменты для визуализации карт признаков, весов и ошибок обучения. Пример интеграции с Canvas:

function drawFilters(ctx, net) {
    let convLayer = net.layers[1]; // первый сверточный слой
    convLayer.filters.forEach((filt, i) => {
        let img = filt.w.map(v => Math.floor((v+1)*128));
        // визуализация на canvas
        // ...
    });
}

Это позволяет наблюдать динамику обучения и выявлять проблемы на раннем этапе.

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

  • Использование batch_size > 1 ускоряет обучение за счет пакетной обработки.
  • Минимизация l2_decay помогает сохранить обучаемость при больших данных.
  • В PWA стоит ограничивать размер входных данных для быстрого отклика и экономии ресурсов устройства.

ConvNetJS подходит для экспериментальных и образовательных проектов, позволяет легко создавать интерактивные нейронные сети, визуализировать их работу и полностью интегрировать в современную архитектуру PWA.

Оглавление