Нейронная сеть на JavaScript
Создание веб-приложения с открытым исходным кодом на 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.
Для обучения сети используется стохастический градиентный спуск, при котором каждая ошибка распознавания корректирует веса связей.
Несмотря на простоту как структуры сети, так реализации, обеспечивается высокий процент распознавания на тестовом наборе:
- более 90% для 8 нейронов скрытого слоя
- более 94% для 16 нейронов скрытого слоя
- более 96% для 32 нейронов скрытого слоя
Ссылка на онлайн демо-версию приложения. Репозиторий приложения доступен на GitHub.