Интеграция с браузерными инструментами

ConvNetJS — это библиотека для создания и обучения сверточных нейронных сетей прямо в браузере на JavaScript. Она предоставляет мощный набор инструментов для обработки изображений, распознавания объектов и других задач машинного обучения без необходимости серверной инфраструктуры. Интеграция с браузерными средствами позволяет создавать интерактивные веб-приложения с нейронными сетями, используя стандартные возможности DOM, Canvas и событий браузера.

Подключение библиотеки

Для начала работы с ConvNetJS в браузере достаточно подключить скрипт в HTML-документе:

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

После этого все объекты библиотеки становятся доступны глобально, включая ConvNetJS.Net, ConvNetJS.Vol, ConvNetJS.Trainer.

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

Создание сверточной сети начинается с описания её структуры через JSON-конфигурацию:

var layer_defs = [];
layer_defs.push({type:'input', out_sx:32, out_sy:32, out_depth:3});
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:64, activation:'relu'});
layer_defs.push({type:'softmax', num_classes:10});

var net = new ConvNetJS.Net();
net.makeLayers(layer_defs);

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

  • out_sx, out_sy, out_depth задают размеры входного тензора.
  • sx и stride в сверточных слоях определяют размер фильтра и шаг свертки.
  • pool слой уменьшает пространственные размеры через подвыборку.
  • fc слой — полносвязный, объединяет все признаки в один вектор для классификации.

Использование Canvas для ввода данных

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

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

canvas.addEventListener('mousemove', function(e){
    if(e.buttons === 1){
        ctx.fillStyle = 'black';
        ctx.fillRect(e.offsetX, e.offsetY, 5, 5);
    }
});

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

function getInputVol() {
    var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var vol = new ConvNetJS.Vol(canvas.width, canvas.height, 3, 0.0);
    for(var y=0;y<canvas.height;y++){
        for(var x=0;x<canvas.width;x++){
            var i = (y*canvas.width + x)*4;
            vol.set(x, y, 0, imgData.data[i]/255.0);
            vol.set(x, y, 1, imgData.data[i+1]/255.0);
            vol.set(x, y, 2, imgData.data[i+2]/255.0);
        }
    }
    return vol;
}

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

  • Значения пикселей нормализуются в диапазон [0, 1].
  • Тензор Vol используется напрямую для прогонки через сеть (net.forward(vol)).

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

Для отладки полезно визуализировать активность слоёв:

function visualizeLayer(layer) {
    var canvas = document.getElementById('layerCanvas');
    var ctx = canvas.getContext('2d');
    var data = layer.w;
    var size = Math.sqrt(data.length);
    var imageData = ctx.createImageData(size, size);
    for(var i=0;i<data.length;i++){
        var val = Math.floor(data[i] * 255);
        imageData.data[i*4] = val;
        imageData.data[i*4+1] = val;
        imageData.data[i*4+2] = val;
        imageData.data[i*4+3] = 255;
    }
    ctx.putImageData(imageData, 0, 0);
}

Такой подход позволяет отслеживать весовые коэффициенты и выходные активации на каждом шаге.

Обучение в браузере

Обучение сети можно производить онлайн, используя Trainer:

var trainer = new ConvNetJS.Trainer(net, {method:'sgd', learning_rate:0.01, momentum:0.9, batch_size:5});

Процесс обучения происходит итеративно:

function trainStep(vol, label) {
    var stats = trainer.train(vol, label);
    console.log('loss:', stats.loss);
}

Особенности обучения в браузере:

  • Поддерживаются методы SGD, Adagrad, RMSProp.
  • Возможна визуализация графика потерь с использованием Canvas или библиотек вроде Chart.js.
  • Размер батча влияет на производительность и стабильность обучения.

Интеграция с событиями DOM

ConvNetJS легко связывается с интерактивными элементами страницы:

document.getElementById('predictButton').addEventListener('click', function(){
    var vol = getInputVol();
    var output = net.forward(vol);
    console.log('Prediction:', output.w.indexOf(Math.max(...output.w)));
});

Это позволяет реализовать интерфейсы типа “нарисуй цифру и узнай результат”, где обработка и предсказание происходят полностью на клиентской стороне.

Хранение и восстановление моделей

Сети можно сохранять в JSON и загружать без сервера:

var json = net.toJSON();
var restoredNet = new ConvNetJS.Net();
restoredNet.fromJSON(json);

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

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

Для снижения нагрузки на браузер:

  • Использовать меньшие размеры входных изображений.
  • Ограничивать количество фильтров в сверточных слоях.
  • Применять requestAnimationFrame для визуализации и интерактивных обновлений.
  • Разбивать обучение на небольшие шаги (batch_size) вместо единовременной обработки больших данных.

Эта интеграция позволяет создавать полноценные нейронные приложения в браузере, сочетая возможности ConvNetJS с интерактивными средствами веб-платформы. Взаимодействие с Canvas, DOM и событиями делает процесс обучения и предсказания на клиенте быстрым, наглядным и автономным.

Оглавление