選自Medium，作者：Zaid Alyafeai，機(jī)器之心編譯，參與：Geek AI、路。

本文創(chuàng)建了一個(gè)簡(jiǎn)單的工具來識(shí)別手繪圖像，并且輸出當(dāng)前圖像的名稱。該應(yīng)用無需安裝任何額外的插件，可直接在瀏覽器上運(yùn)行。作者使用谷歌 Colab 來訓(xùn)練模型，并使用 TensorFlow.js 將它部署到瀏覽器上。

代碼和 demo

• demo 地址：https://zaidalyafeai.github.io/sketcher/
• 代碼地址：https://github.com/zaidalyafeai/zaidalyafeai.github.io/tree/master/sketcher
• 請(qǐng)通過以下鏈接在谷歌 Colab 上測(cè)試自己的 notebook：https://colab.research.google.com/github/zaidalyafeai/zaidalyafeai.github.io/blob/master/sketcher/Sketcher.ipynb

?

數(shù)據(jù)集

我們將使用卷積神經(jīng)網(wǎng)絡(luò)（CNN）來識(shí)別不同類型的手繪圖像。這個(gè)卷積神經(jīng)網(wǎng)絡(luò)將在 Quick Draw 數(shù)據(jù)集（https://github.com/googlecreativelab/quickdraw-dataset）上接受訓(xùn)練。該數(shù)據(jù)集包含 345 個(gè)類別的大約 5 千萬張手繪圖像。

部分圖像類別

流程

我們將使用 Keras 框架在谷歌 Colab 免費(fèi)提供的 GPU 上訓(xùn)練模型，然后使用 TensorFlow.js 直接在瀏覽器上運(yùn)行模型。我在 TensorFlow.js 上創(chuàng)建了一個(gè)教程（https://medium.com/tensorflow/a-gentle-introduction-to-tensorflow-js-dba2e5257702）。在繼續(xù)下面的工作之前，請(qǐng)務(wù)必先閱讀一下這個(gè)教程。下圖為該項(xiàng)目的處理流程：

流程

在 Colab 上進(jìn)行訓(xùn)練

谷歌 Colab 為我們提供了免費(fèi)的 GPU 處理能力。你可以閱讀下面的教程（https://medium.com/deep-learning-turkey/google-colab-free-gpu-tutorial-e113627b9f5d）了解如何創(chuàng)建 notebook 和開始進(jìn)行 GPU 編程。

?

導(dǎo)入

我們將使用以 TensorFlow 作為后端、Keras 作為前端的編程框架

import os import glob import numpy as np from tensorflow.keras import layers from tensorflow import keras import tensorflow as tf

?

加載數(shù)據(jù)

由于內(nèi)存容量有限，我們不會(huì)使用所有類別的圖像進(jìn)行訓(xùn)練。我們僅使用數(shù)據(jù)集中的 100 個(gè)類別（https://raw.githubusercontent.com/zaidalyafeai/zaidalyafeai.github.io/master/sketcher/mini_classes.txt）。每個(gè)類別的數(shù)據(jù)可以在谷歌 Colab（https://console.cloud.google.com/storage/browser/quickdrawdataset/full/numpybitmap?pli=1）上以 NumPy 數(shù)組的形式獲得，數(shù)組的大小為 [N, 784]，其中 N 為某類圖像的數(shù)量。我們首先下載這個(gè)數(shù)據(jù)集：

import urllib.request def download():base = 'https://storage.googleapis.com/quickdraw_dataset/full/numpy_bitmap/'for c in classes:cls_url = c.replace('_', '%20')path = base+cls_url+'.npy'print(path)urllib.request.urlretrieve(path, 'data/'+c+'.npy')

由于內(nèi)存限制，我們?cè)谶@里將每類圖像僅僅加載 5000 張。我們還將留出其中的 20% 作為測(cè)試數(shù)據(jù)。

def load_data(root, vfold_ratio=0.2, max_items_per_class= 5000 ):all_files = glob.glob(os.path.join(root, '*.npy'))#initialize variables x = np.empty([0, 784])y = np.empty([0])class_names = []#load a subset of the data to memory for idx, file in enumerate(all_files):data = np.load(file)data = data[0: max_items_per_class, :]labels = np.full(data.shape[0], idx)x = np.concatenate((x, data), axis=0)y = np.append(y, labels)class_name, ext = os.path.splitext(os.path.basename(file))class_names.append(class_name)data = Nonelabels = None#separate into training and testing permutation = np.random.permutation(y.shape[0])x = x[permutation, :]y = y[permutation]vfold_size = int(x.shape[0]/100*(vfold_ratio*100))x_test = x[0:vfold_size, :]y_test = y[0:vfold_size]x_train = x[vfold_size:x.shape[0], :]y_train = y[vfold_size:y.shape[0]]return x_train, y_train, x_test, y_test, class_names

?

數(shù)據(jù)預(yù)處理

我們對(duì)數(shù)據(jù)進(jìn)行預(yù)處理操作，為訓(xùn)練模型做準(zhǔn)備。該模型將使用規(guī)模為 [N, 28, 28, 1] 的批處理，并且輸出規(guī)模為 [N, 100] 的概率。

# Reshape and normalize x_train = x_train.reshape(x_train.shape[0], image_size, image_size, 1).astype('float32') x_test = x_test.reshape(x_test.shape[0], image_size, image_size, 1).astype('float32')x_train /= 255.0 x_test /= 255.0# Convert class vectors to class matrices y_train = keras.utils.to_categorical(y_train, num_classes) y_test = keras.utils.to_categorical(y_test, num_classes)

?

創(chuàng)建模型

我們將創(chuàng)建一個(gè)簡(jiǎn)單的卷積神經(jīng)網(wǎng)絡(luò)。請(qǐng)注意，模型越簡(jiǎn)單、參數(shù)越少越好。實(shí)際上，我們將把模型轉(zhuǎn)換到瀏覽器上然后再運(yùn)行，并希望模型能在預(yù)測(cè)任務(wù)中快速運(yùn)行。下面的模型包含 3 個(gè)卷積層和 2 個(gè)全連接層：

# Define model model = keras.Sequential() model.add(layers.Convolution2D(16, (3, 3),padding='same',input_shape=x_train.shape[1:], activation='relu')) model.add(layers.MaxPooling2D(pool_size=(2, 2))) model.add(layers.Convolution2D(32, (3, 3), padding='same', activation= 'relu')) model.add(layers.MaxPooling2D(pool_size=(2, 2))) model.add(layers.Convolution2D(64, (3, 3), padding='same', activation= 'relu')) model.add(layers.MaxPooling2D(pool_size =(2,2))) model.add(layers.Flatten()) model.add(layers.Dense(128, activation='relu')) model.add(layers.Dense(100, activation='softmax')) # Train model adam = tf.train.AdamOptimizer() model.compile(loss='categorical_crossentropy',optimizer=adam,metrics=['top_k_categorical_accuracy']) print(model.summary())

?

擬合、驗(yàn)證及測(cè)試

在這之后我們對(duì)模型進(jìn)行了 5 輪訓(xùn)練，將訓(xùn)練數(shù)據(jù)分成了 256 批輸入模型，并且分離出 10% 作為驗(yàn)證集。

#fit the model model.fit(x = x_train, y = y_train, validation_split=0.1, batch_size = 256, verbose=2, epochs=5)#evaluate on unseen data score = model.evaluate(x_test, y_test, verbose=0) print('Test accuarcy: {:0.2f}%'.format(score[1] * 100))

訓(xùn)練結(jié)果如下圖所示：

測(cè)試準(zhǔn)確率達(dá)到了 92.20% 的 top 5 準(zhǔn)確率。

?

準(zhǔn)備 WEB 格式的模型

在我們得到滿意的模型準(zhǔn)確率后，我們將模型保存下來，以便進(jìn)行下一步的轉(zhuǎn)換。

model.save('keras.h5')

為轉(zhuǎn)換安裝 tensorflow.js：

!pip install tensorflowjs

接著我們對(duì)模型進(jìn)行轉(zhuǎn)換：

!mkdir model !tensorflowjs_converter --input_format keras keras.h5 model/

這個(gè)步驟將創(chuàng)建一些權(quán)重文件和包含模型架構(gòu)的 json 文件。

通過 zip 將模型進(jìn)行壓縮，以便將其下載到本地機(jī)器上：

!zip -r model.zip model

最后下載模型：

from google.colab import files files.download('model.zip')

在瀏覽器上進(jìn)行推斷

本節(jié)中，我們將展示如何加載模型并且進(jìn)行推斷。假設(shè)我們有一個(gè)尺寸為 300*300 的畫布。在這里，我們不會(huì)詳細(xì)介紹函數(shù)接口，而是將重點(diǎn)放在 TensorFlow.js 的部分。

加載模型

為了使用 TensorFlow.js，我們首先使用下面的腳本：

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"> </script>

你的本地機(jī)器上需要有一臺(tái)運(yùn)行中的服務(wù)器來托管權(quán)重文件。你可以在 GitHub 上創(chuàng)建一個(gè) apache 服務(wù)器或者托管網(wǎng)頁，就像我在我的項(xiàng)目中所做的那樣（https://github.com/zaidalyafeai/zaidalyafeai.github.io/tree/master/sketcher）。

接著，通過下面的代碼將模型加載到瀏覽器：

model = await tf.loadModel('model/model.json')

關(guān)鍵字 await 的意思是等待模型被瀏覽器加載。

?

預(yù)處理

在進(jìn)行預(yù)測(cè)前，我們需要對(duì)數(shù)據(jù)進(jìn)行預(yù)處理。首先從畫布中獲取圖像數(shù)據(jù)：

//the minimum boudning box around the current drawing const mbb = getMinBox() //cacluate the dpi of the current window const dpi = window.devicePixelRatio //extract the image data const imgData = canvas.contextContainer.getImageData(mbb.min.x * dpi, mbb.min.y * dpi,(mbb.max.x - mbb.min.x) * dpi, (mbb.max.y - mbb.min.y) * dpi);

文章稍后將介紹 getMinBox()。dpi 變量被用于根據(jù)屏幕像素的密度對(duì)裁剪出的畫布進(jìn)行拉伸。

我們將畫布當(dāng)前的圖像數(shù)據(jù)轉(zhuǎn)化為一個(gè)張量，調(diào)整大小并進(jìn)行歸一化處理：

function preprocess(imgData) { return tf.tidy(()=>{//convert the image data to a tensor let tensor = tf.fromPixels(imgData, numChannels= 1)//resize to 28 x 28 const resized = tf.image.resizeBilinear(tensor, [28, 28]).toFloat()// Normalize the image const offset = tf.scalar(255.0);const normalized = tf.scalar(1.0).sub(resized.div(offset));//We add a dimension to get a batch shape const batched = normalized.expandDims(0)return batched }) }

我們使用 model.predict 進(jìn)行預(yù)測(cè)，這將返回一個(gè)規(guī)模為「N, 100」的概率。

const pred = model.predict(preprocess(imgData)).dataSync()

我們可以使用簡(jiǎn)單的函數(shù)找到 top 5 概率。

?

提升準(zhǔn)確率

請(qǐng)記住，我們的模型接受的輸入數(shù)據(jù)是規(guī)模為 [N, 28, 28, 1] 的張量。我們繪圖畫布的尺寸為 300*300，這可能是兩個(gè)手繪圖像的大小，或者用戶可以在上面繪制一個(gè)小圖像。最好只裁剪包含當(dāng)前手繪圖像的方框。為了做到這一點(diǎn)，我們通過找到左上方和右下方的點(diǎn)來提取圍繞圖像的最小邊界框。

//record the current drawing coordinates function recordCoor(event) {//get current mouse coordinate var pointer = canvas.getPointer(event.e);var posX = pointer.x;var posY = pointer.y;//record the point if withing the canvas and the mouse is pressed if(posX >=0 && posY >= 0 && mousePressed) { coords.push(pointer) } }//get the best bounding box by finding the top left and bottom right cornders function getMinBox(){var coorX = coords.map(function(p) {return p.x});var coorY = coords.map(function(p) {return p.y});//find top left corner var min_coords = {x : Math.min.apply(null, coorX),y : Math.min.apply(null, coorY)}//find right bottom corner var max_coords = {x : Math.max.apply(null, coorX),y : Math.max.apply(null, coorY)}return {min : min_coords,max : max_coords} }

用手繪圖像進(jìn)行測(cè)試

下圖顯示了一些第一次繪制的圖像以及準(zhǔn)確率最高的類別。所有的手繪圖像都是我用鼠標(biāo)畫的，用筆繪制的話應(yīng)該會(huì)得到更高的準(zhǔn)確率。

原文鏈接：https://medium.com/tensorflow/train-on-google-colab-and-run-on-the-browser-a-case-study-8a45f9b1474e

總結(jié)

以上是生活随笔為你收集整理的如何利用TensorFlow.js部署简单AI版「你画我猜」的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。