Распознавание рукописных цифр с помощью Tensorflow.js

Как машина может предсказать цифру, которую вы рисуете?

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

Благодаря tenorflow.js он переносит эту мощную технологию в браузер. В этой статье мы собираемся создать веб-приложение, которое может предсказать цифру, которую вы рисуете на холсте.

Ниже приведен окончательный результат веб-приложения, как вы можете видеть, мы получили довольно хороший результат, он предсказывает, что я нарисовал цифру 5 с уверенностью 99%.

Попробуйте сами по ссылке ниже:

Реализация

Это приложение сначала использует скрипт Python для обучения и сохранения модели, затем использует библиотеку JavaScript tenorflow.js для загрузки модели в браузер и предсказывает, какое число представляет собой цифру от руки. Пожалуйста, подпишитесь на меня ниже, чтобы узнать подробнее, как это устроено.

Структура папки

Начнем с настройки проекта с правильной структурой папок.

• js - содержат файлы JavaScript
• chart.min.js - библиотека JavaScript для отображения графиков
• digit-распознавание.js - JavaScript основного приложения
• модели - содержат сохраненные модели и веса
• style - содержит файл стиля css
• index.html - основной html файл
• MNIST.py - скрипт Python для обучения и сохранения модели

# Шаг 1. Обучите и сохраните модель

Чтобы начать наше путешествие, мы напишем сценарий Python для обучения модели CNN (сверточной нейронной сети) на известном наборе данных MNIST.

MNIST - это база данных компьютерного зрения, состоящая из рукописных цифр с метками, обозначающими цифры. Каждая точка данных MNIST состоит из двух частей: изображения рукописной цифры и соответствующей метки.

Импорт библиотек

Загрузить набор данных MNIST

Набор данных MNIST состоит из 60 000 примеров, мы разбиваем их на наборы данных для обучения и тестирования. После этого потребовалась некоторая предварительная обработка, прежде чем он может быть передан в CNN.

Во-первых, вы переделываете входной вектор в 4-мерные массивы.

Затем я нормализую ввод, разделив коды RGB на 255.

Определите модель CNN

Ниже я определяю сверточную базу, используя общий шаблон: стек слоев Conv2D и MaxPooling2D.

• Первый слой будет иметь фильтры 32–5 x 5,
• Второй слой будет иметь фильтры 64–5 x 5 и

Кроме того, есть два слоя max-pooling размером 2 x 2 каждый.

Обучите модель

Это обучение может занять пару минут, и мы можем получить довольно хороший результат с точностью 98,5% на тестовой выборке.

Сохранить модель в формате tfjs

Теперь у нас есть модель, нам нужно сохранить ее в каком-то формате, который tensorflowjs может загружать в браузер.

tfjs.converters.save_keras_model(model, 'models')

Модель будет сохранена в папке «models», которая содержит файл model.json и некоторые другие файлы веса.

# Шаг 2. Добавьте tensorflow.js

Просто включите сценарии для tfjs в раздел ‹head› файла html. Я также включаю библиотеку jquery и библиотеку диаграмм.

# Шаг 3. Настройка холста

Чтобы пользователь мог нарисовать цифру с помощью мыши на рабочем столе или пальца на мобильных устройствах, нам нужно создать элемент HTML5, называемый холстом. Внутри холста пользователь нарисует цифру. Мы будем вводить нарисованную пользователем цифру в глубокую нейронную сеть, которую мы создали, чтобы делать прогнозы.

HTML - index.html

Добавьте заполнитель ‹div›, чтобы он содержал холст, на котором можно рисовать цифры.

<div id="canvas_box" class="canvas-box"></div>

Добавьте кнопку «Прогноз», чтобы получить результат предсказания рукописных цифр, кнопку «Очистить», чтобы стереть холст и снова начать рисование.

<button id="clear-button" class="btn btn-dark">Clear</button>
<button id="predict-button" class="btn btn-dark">Predict</button>

В конце ‹body› включите основной файл JavaScript digit-распознавание.js.

    <script src="js/digit-recognition.js"></script>
  </body>
</html>

JavaScript - digit-распознавание.js

Инициализировать переменные

Создайте холст и добавьте его в заполнитель для отображения

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

Для настольных компьютеров и ноутбуков

• мышь
• мышь
• мышь
• мышь

Для мобильных устройств

• сенсорный старт
• Touchmove
• прикосновение
• коснуться

# Шаг 4: модель загрузки Tensorflow.js и прогнозирование

Теперь нам нужно использовать TensorFlow.js для загрузки модели, которую мы обучили ранее на Python, и использовать ее для прогнозирования цифры, которую мы нарисовали на холсте.

Загрузить модель

функция loadModel () для вызова tenorflow.js API tf.loadLayersModel

Предварительная обработка холста

функция preprocessCanvas для предварительной обработки холста, нарисованного пользователем, перед его передачей в модель CNN

Прогноз

При нажатии кнопки «Прогноз» мы получаем данные изображения с холста, предварительно обрабатываем их как тензор, а затем передаем их в API model.predict для получения результата прогноза.

Показать результат

функция loadChart для использования библиотеки Chart.js для отображения результата прогноза в виде визуальной гистограммы.

Репозиторий GitHub

Вы можете скачать полный код вышеуказанной демонстрации по ссылке ниже:

Заключение

Несомненно, в области распознавания рукописных текстов было проведено очень много исследований. А tensorflow.js делает эти предварительно обученные глубокие модели доступными в браузере. Надеюсь, вам понравится эта статья, и призываю вас узнать больше об этой библиотеке. Мне не терпится увидеть больше креативных идей по практическому применению этой передовой технологии.

Спасибо за чтение. Если вам понравилась эта статья, поделитесь ею в Facebook или Twitter. Дайте мне знать в комментарии, если у вас возникнут вопросы. Следуйте за мной на GitHub и Linkedin.