Быстрое внедрение распознавания рукописных цифр CNN в браузере на основе keras-js

внешний интерфейс JavaScript Нейронные сети Keras

В этом посте я быстро расскажу, как использовать keras для обучения простой CNN (сверточной нейронной сети), которая распознает MNIST (набор данных рукописных цифр), и применить обученную сеть к веб-браузеру.

ДЕМО адрес:stark.github.io/can ras-is-of…

Ноль, подготовительные работы

Во-первых, вам нужно установить keras на свой компьютер.Пожалуйста, обратитесь к конкретным шагам установки.Керас официальная документация

1. Быстрый старт

В первую очередь настоятельно рекомендуется прочитать официальную документацию tensorflow.MNIST For ML Beginners, вотКитайский перевод Geek Academy

MNIST — это популярный набор данных начального уровня для машинного обучения/компьютерного зрения, который содержит изображения различных рукописных цифр от 0 до 9:

Размер каждого изображения составляет 28 * 28, что представлено двумерным массивом 28 * 28. Другими словами, каждое изображение состоит из 784 пикселей, а значение каждого пикселя находится в диапазоне от 0 до 255. Между ними.

Например, ниже приведены данные «3»:

000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 038 043 105 255 253 253 253 253 253 174 006 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 043 139 224 226 252 253 252 252 252 252 252 252 158 014 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 178 252 252 252 252 253 252 252 252 252 252 252 252 059 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 109 252 252 230 132 133 132 132 189 252 252 252 252 059 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 004 029 029 024 000 000 000 000 014 226 252 252 172 007 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 085 243 252 252 144 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 088 189 252 252 252 014 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 000 000 000 091 212 247 252 252 252 204 009 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 032 125 193 193 193 253 252 252 252 238 102 028 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 045 222 252 252 252 252 253 252 252 252 177 000 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 045 223 253 253 253 253 255 253 253 253 253 074 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 031 123 052 044 044 044 044 143 252 252 074 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 015 252 252 074 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 086 252 252 074 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 005 075 009 000 000 000 000 000 000 098 242 252 252 074 000 000 000 000 000 000 000 000 
000 000 000 000 000 061 183 252 029 000 000 000 000 018 092 239 252 252 243 065 000 000 000 000 000 000 000 000 
000 000 000 000 000 208 252 252 147 134 134 134 134 203 253 252 252 188 083 000 000 000 000 000 000 000 000 000 
000 000 000 000 000 208 252 252 252 252 252 252 252 252 253 230 153 008 000 000 000 000 000 000 000 000 000 000 
000 000 000 000 000 049 157 252 252 252 252 252 217 207 146 045 000 000 000 000 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 007 103 235 252 172 103 024 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 
000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000

Используя keras, набор данных MNIST можно легко импортировать:

from keras.datasets import mnist
(x_train, y_train), (x_test, y_test) = mnist.load_data()

В общем, модель сети, которую мы хотим получить, имеет фиксированные вход и выход:

  • Входные данные представляют собой двумерный целочисленный массив 28 * 28.
  • Выход представляет собой массив длины 10, представляющий вероятность 0-9 по порядку (например, если есть изображение с 80% вероятностью 1 и 20% вероятностью 7, то массив[0, 0.8, 0, 0, 0, 0, 0, 0.2, 0, 0])

2. Используйте keras для обучения сети

Модель, которую мы хотим обучить, состоит из следующих слоев:

  1. 32 сверточных слоя с ядрами 3x3
  2. 64 сверточных слоя с ядрами 3x3
  3. Слой пула с коэффициентом дискретизации (2, 2)
  4. выпадающий слой
  5. Сгладить слой
  6. Полносвязный слой ReLu
  7. выпадающий слой
  8. Полносвязный слой Softmax

Очень удобно использовать keras для обучения сети CNN, распознающей MNIST.Вот официальный пример(Исходный код здесь):

from __future__ import print_function
import keras
from keras.datasets import mnist
from keras.models import Sequential
from keras.layers import Dense, Dropout, Flatten
from keras.layers import Conv2D, MaxPooling2D
from keras import backend as K

batch_size = 128
num_classes = 10
epochs = 12

# input image dimensions
img_rows, img_cols = 28, 28

# the data, shuffled and split between train and test sets
(x_train, y_train), (x_test, y_test) = mnist.load_data()

if K.image_data_format() == 'channels_first':
    x_train = x_train.reshape(x_train.shape[0], 1, img_rows, img_cols)
    x_test = x_test.reshape(x_test.shape[0], 1, img_rows, img_cols)
    input_shape = (1, img_rows, img_cols)
else:
    x_train = x_train.reshape(x_train.shape[0], img_rows, img_cols, 1)
    x_test = x_test.reshape(x_test.shape[0], img_rows, img_cols, 1)
    input_shape = (img_rows, img_cols, 1)

x_train = x_train.astype('float32')
x_test = x_test.astype('float32')
x_train /= 255
x_test /= 255
print('x_train shape:', x_train.shape)
print(x_train.shape[0], 'train samples')
print(x_test.shape[0], 'test samples')

# convert class vectors to binary class matrices
y_train = keras.utils.to_categorical(y_train, num_classes)
y_test = keras.utils.to_categorical(y_test, num_classes)

model = Sequential()
model.add(Conv2D(32, kernel_size=(3, 3),
                 activation='relu',
                 input_shape=input_shape))
model.add(Conv2D(64, (3, 3), activation='relu'))
model.add(MaxPooling2D(pool_size=(2, 2)))
model.add(Dropout(0.25))
model.add(Flatten())
model.add(Dense(128, activation='relu'))
model.add(Dropout(0.5))
model.add(Dense(num_classes, activation='softmax'))

model.compile(loss=keras.losses.categorical_crossentropy,
              optimizer=keras.optimizers.Adadelta(),
              metrics=['accuracy'])

model.fit(x_train, y_train,
          batch_size=batch_size,
          epochs=epochs,
          verbose=1,
          validation_data=(x_test, y_test))
score = model.evaluate(x_test, y_test, verbose=0)
print('Test loss:', score[0])
print('Test accuracy:', score[1])

# Save model
model.save('myMnistCNN.h5')

Если keras уже установлен, просто запустите его напрямую:

python mnist_cnn.py

В-третьих, модель вывода конверсии

После получения обученного файла .h5 модель нельзя использовать напрямую, потому что нам нужно ее перекодировать.keras-js предоставляетскрипт питонаавтоматизировать:

python ./python/encoder.py -q myMnistCNN.h5

Этот скрипт перекодирует файл .h5 в читаемый формат keras-js, который содержит все модели и параметры обученной нейронной сети.

В-четвертых, используйте keras-js для импорта модели

Во-первых, вам нужно импортировать keras-js, который можно импортировать напрямую через тег script:

<script src="https://unpkg.com/keras-js"></script>

Вы также можете создавать и импортировать с помощью веб-пакета после установки через npm, см.здесь

Затем вы можете создать модель напрямую, и keras-js автоматически загрузит соответствующий bin-файл:

const model = new KerasJS.Model({
    filepath: '/path/to/mnist_cnn.bin',
    gpu: true,
    transferLayerOutputs: true
})

После инициализации его можно использовать для распознавания MNIST.Вход представляет собой массив длиной 784 (включая значения оттенков серого 28*28 пикселей), а выход — массив длиной 10 (вероятность 0-9):

(Вы можете использовать пример данных «3», приведенный выше)

model
  .ready()
  .then(() => {
    // data 是一个长度为 784 的数组，每一项都介于 0 - 255 之间
    // 这里我们需要把数组转换为 Float32 类型
    const inputData = new Float32Array(data)
    // 识别
    return model.predict(inputData)
  })
  .then(outputData => {
    // 输出为 0-9 的概率，例如：
    // { output: [0, 0, 0, 0.8, 0, 0, 0.2, 0, 0, 0] }
  })
  .catch(err => {
    // ...
  })

5. Canvas реализует планшет

Последним шагом является реализация доски для рукописного ввода,специальный кодне поставлю, главное пройтиmousedown,mousemove,mouseupсобытия для рисования графики.

После рисования позвонитеctx.getImageData, вы можете получить данные о пикселях на холсте.Каждый пиксель соответствует четырем значениям, за которыми следует значение rgba каждой точки.После обработки можно получить массив оттенков серого длиной 784. Затем используйте вышеупомянутыйmodel.predictВот и все.

Категории