18 подписчиков

Нейронная сеть на JavaScript

17 мая 202117 мая 2021

637

3 мин

Оглавление

Начальная страница
Страница распознавания цифр
Страница обучения нейросети

Создание веб-приложения с открытым исходным кодом на JavaScript для распознавания нарисованных цифр.

Вся работа c нейронными сетями будет происходить в браузере клиента. Для серверной части воспользуемся Node.js и декларативным фреймворком Evado, который предоставляет уже готовый функционал для запуска полноценного веб-приложения с пользовательским интерфейсом, правами доступа и многим другим.

Итак, устанавливаем Node.js и базу данных MongoDB, клонируем репозиторий шаблона приложения Evado Boilerplate. В настройках config/default добавляем новый модуль front.

Интерфейс модуля будет состоять из четырех страниц:

Класс MainPage отображает начальную страницу модуля.
Класс RecognitionPage отображает распознавание цифр.
Класс TrainingPage отображает обучение новой сети.
Класс TestingPage отображает тестирование нейронной сети.

Начальная страница

Начальная страница содержит только описание и кнопки переходов на остальные страницы.

Шаблон разметки находится в файле view/template/default/_main.

Для дизайна пользовательского интерфейса во фреймворке Evado по умолчанию используется Bootstrap 5.

Страница распознавания цифр

Здесь пользователь может нарисовать мышкой или пальцем цифру и попытаться ее распознать, выбрав нейронную сеть (созданную локально или загруженную с сервера).

Класс Drawing отвечает за рисование цифры в определенной области страницы.
Класс NetworkSelectionForm представляет выбор нейронной сети для распознавания.
Класс RecognitionResult отображает результат работы нейронной сети.

Шаблон разметки находится в файле view/template/default/_recognition.

Страница обучения нейросети

На этой странице можно обучать сеть, задавая различные начальные параметры. Для обучения используется набор данных MNIST из десятков тысяч рукописных цифр.

Время обучения сети зависит от размера скрытого слоя

Класс TrainingForm представляет форму с начальными параметрами обучения сети.
Класс NumericDataSet определяет данные для обучения.
Класс WebWorker отвечает за запуск скрипта в фоновом потоке.
Класс ProgressView представляет прогресс обучения сети.
Класс NetworkSaveForm представляет форму сохранения сети.

Обученную сеть можно сохранить либо в локальном хранилище, либо удаленно на сервер (при наличии прав доступа).

Локально хранимые нейросети доступны только в текущем браузере. Удаленно хранимые доступны всем пользователям.

Страница тестирования

Проверка нейронной сети - это подсчет распознанных цифр из тестового набора данных, которые отличаются от обучающих.

Шаблон разметки находится в файле view/template/default/_testing.

Реализация нейронной сети

В приложении реализована структура нейронной сети с одним скрытым слоем. В качестве входных параметров (i) используются 784 пикселя (яркость 0 - 255) матрицы изображения (28 на 28) . Количество нейронов скрытого слоя (h) можно задавать произвольно. Размер выходного слоя (o) равен количеству всех цифр (от 0 до 9).

Класс Network описывает структуру и основные параметры нейронной сети.
Класс Layer содержит ссылки на нейроны слоя. По сути это агрегирующий класс для общих операций над нейронами одного слоя.
Класс Neuron описывает отдельный нейрон и его связи.

Обучение и тестирование нейронной сети весьма ресурсоемкие операции, поэтому для корректной работы браузера запускать их необходимо в отдельных потоках (см. статью по многопоточности в браузере на примере игры в шашки). Для этого определены скрипты trainingWorker и testingWorker.

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

Несмотря на простоту как структуры сети, так реализации, обеспечивается высокий процент распознавания на тестовом наборе: