タイトルのとおりです。今更ながらではありますが機械学習に足を踏み入れたWebアプリを作ってみます。
機械学習に足を踏み入れかけの人をターゲットにしています、が投げやりなので不足点は公式ドキュメント等をご参照ください。
今回は機械学習をKerasで簡単に実装し、それを使ったWebアプリの作成を一通り行います。
また動作環境をDockerのコンテナにまとめ、どこでも使えるようなイメージにします。
MNISTとは
機械学習で言うところのHello Worldのようなものです。28×28の手書き文字画像が、どの数字が書かれているか予測する問題です。
学習用に28×28の画像と、答えの数字(0~9)が与えられます。
TF.Kerasで学習する
今回はそんなに細かいことをやるわけではないので、Kerasを使います。
Kerasは(TensorFlowなどに比べ)、ニューラルネットの記述に特化している、評価関数などの初期値がいい感じに定まっているという使いやすい点があります。
さておき細かい構成や実装については、各種書籍や記事にまとめられているので割愛し以下の構成で実装しました。
Layer (type) Output Shape Param #
=================================================================
input_1 (InputLayer) (None, 28, 28, 1) 0
_________________________________________________________________
conv2d_1 (Conv2D) (None, 26, 26, 32) 320
_________________________________________________________________
conv2d_2 (Conv2D) (None, 24, 24, 64) 18496
_________________________________________________________________
max_pooling2d_1 (MaxPooling2 (None, 12, 12, 64) 0
_________________________________________________________________
dropout_1 (Dropout) (None, 12, 12, 64) 0
_________________________________________________________________
flatten_1 (Flatten) (None, 9216) 0
_________________________________________________________________
dense_1 (Dense) (None, 120) 1106040
_________________________________________________________________
dropout_2 (Dropout) (None, 120) 0
_________________________________________________________________
dense_2 (Dense) (None, 10) 1210
=================================================================
Total params: 1,126,066
Trainable params: 1,126,066
Non-trainable params: 0
28×28の画像を正規化し、学習させます。学習したモデルはあとのWebアプリで使用するので保存しておきます。
import tensorflow as tf
print(tf.__version__)
print(tf.test.is_built_with_cuda())
from tensorflow.python import keras
print(keras.__version__)
from tensorflow.python.keras.callbacks import EarlyStopping
import numpy as np
from IPython.display import display
import matplotlib.pyplot as plt
from PIL import Image
%matplotlib inline
np.set_printoptions(threshold=100)
(x_train_src, y_train_src), (x_test_src, y_test_src) = keras.datasets.mnist.load_data()
print(x_train_src.shape)
print(y_train_src.shape)
print(x_test_src.shape)
print(y_test_src.shape)
keras.backend.image_data_format()
input_shape =(28,28,1)
x_train = x_train_src.reshape(x_train_src.shape[0], 28, 28, 1)
x_test = x_test_src.reshape(x_test_src.shape[0], 28, 28, 1)
x_train = x_train / 255.0
x_test = x_test / 255.0
y_train = keras.utils.to_categorical(y_train_src, 10)
y_test = keras.utils.to_categorical(y_test_src, 10)
print(x_train.shape)
print(x_test.shape)
def convert_image(arr, show=True, title="", w=28, h=28):
img = Image.fromarray(arr.reshape(w,h) * 255.0)
if show:
plt.imshow(img)
plt.title(title)
return img
def convert_images(srcs, length, show=True, cols=5, w=28, h=28):
rows = int(length / cols + 1)
dst = Image.new('1', (w * cols, h * rows))
for j in range(rows):
for i in range(cols):
ptr = i + j * cols
img = convert_image(srcs[ptr], show=False, w=w, h=h)
dst.paste(img, (i * w, j * h))
if show:
plt.imshow(dst)
return dst
plt.subplot(1,2,1)
convert_images(x_train, 50,)
plt.subplot(1,2,2)
convert_images(x_test, 50,)
plt.show()
def MNISTConvModel(input_shape, predicates_class_n):
inputs = keras.layers.Input(shape=input_shape)
x = keras.layers.Conv2D(32, kernel_size=(3,3), activation='relu')(inputs)
x = keras.layers.Conv2D(64, kernel_size=(3,3), activation='relu')(x)
x = keras.layers.MaxPooling2D(pool_size=(2,2))(x)
x = keras.layers.Dropout(0.25)(x)
x = keras.layers.Flatten()(x)
x = keras.layers.Dense(120, activation='relu')(x)
x = keras.layers.Dropout(0.5)(x)
predicates = keras.layers.Dense(predicates_class_n, activation='softmax')(x)
return keras.models.Model(inputs=inputs, outputs=predicates)
model = MNISTConvModel(input_shape=input_shape, predicates_class_n=10)
model.summary()
batch_size = 128
epochs = 20
model.compile(
loss=keras.losses.categorical_crossentropy,
optimizer='adadelta',
metrics=['accuracy']
)
tensorboard_cb = keras.callbacks.TensorBoard(log_dir="./tflogs/", histogram_freq=1)
history = model.fit(
x_train, y_train,
batch_size=batch_size,
epochs=epochs,
verbose=2,
validation_data=(x_test, y_test),
callbacks=[tensorboard_cb],
)
plt.subplot(2,1,1)
plt.plot(range(epochs), history.history['acc'], label='acc')
plt.plot(range(epochs), history.history['val_acc'], label='val_acc')
plt.legend(loc='center left', bbox_to_anchor=(1, 0.5))
plt.subplot(2,1,2)
plt.plot(range(epochs), history.history['loss'], label='loss')
plt.plot(range(epochs), history.history['val_loss'], label='val_loss')
plt.legend(loc='center left', bbox_to_anchor=(1, 0.5))
plt.show()
scores = model.evaluate(x_test, y_test, verbose=2)
print('loss', scores[0], 'accuracy', scores[1])
model.save('model.h5')
これで学習させると正答率99.3%でした。グラフを見ても10epochs付近で過学習に陥っているのでEarlyStopping入れても良かったかもしれません。
学習済みモデルを利用したREST APIサーバを作成する
モデルを変換したりKeras.jsを使う方法などがありますが、ユーザにモデルのダウンロードをさせるのは重荷なのでAPIとして提供します。
今回Pythonを使っているのでFlaskというライブラリを使用します。
下のようなコードhttpでjsonが返せるすぐれものです。
@app.route("/")
def index():
return make_response(jsonify({"hello": "world"})
今回はkerasのモデルを読み込みpredictを使って予測値を返します。
import os
os.environ["CUDA_VISIBLE_DEVICES"] = "-1"
import time
import tensorflow as tf
from tensorflow.python import keras
from flask import Flask, jsonify, abort, make_response, request, send_from_directory
import numpy as np
graph = tf.get_default_graph()
model = None
app = Flask(__name__)
@app.route("/info")
def index():
return make_response(jsonify({
"name": "mnist-cnn server",
"time": time.ctime(),
}))
@app.route("/predict", methods=['POST'])
def mnist():
data = request.json
if data == None:
return abort(400)
src = data["src"]
if (src == None) | (not isinstance(src, list)):
return abort(400)
src = np.array(src)
src = src.astype('float32') / 255.0
src = src.reshape(-1,28,28,1)
with graph.as_default():
start = time.time()
dst = model.predict(src)
elapsed = time.time() - start
return make_response(jsonify({
"predict" : dst.tolist(),
"elapsed" : elapsed,
}))
@app.route("/", defaults={"path": "index.html"})
@app.route("/<path:path>")
def send_file(path):
return send_from_directory("dist", path)
if __name__ == '__main__':
model = keras.models.load_model("./model.h5")
app.run(host="0.0.0.0", port=3000, debug=True)
最後の行でhostを0.0.0.0にしないと外部からアクセスできないので注意します。
ついでにこのあと作成する静的ページもホスティングできるようにしています。
ここまでで、POSTすると学習済みモデルのpredictの結果が得られるようになりました。
手書きができるWebページを作成する
最後に手書きされたデータを先程のFlaskの/predictに投げるWebページを作ります。
手書きにはhtml5のcanvasを使います。また作りやすくするためにvue.jsを読み込んで使います。
@touchmoveみたいな箇所はvue側のmethodsを呼び出してくれます。
v-modelは変数の双方向バインディング、{{ variable_name }}はViewへの単方向バインディングです。
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MNIST CNN Demo</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="container">
<h3>{{ message }}</h3>
<div id="canvas_container">
<canvas id="draw_canvas" width="28" height="28"
@touchmove="touch_draw"
@mousemove="drag_draw"
@mouseup="predict"
@touchend="predict"></canvas>
</div>
<input v-model="pen_size" type="range" min="1" max="100" step="1">
<span>Pen Size:{{ pen_size }}</span>
<button @click="clear">Clear</button>
</div>
<script src="vue.min.js"></script>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
次に動作を書きます。.new Vueする際にelで指定した要素に対して適用されます。
dataにはバインドする変数を定義し、methodsに使用する関数を記述します。もっと複雑なロジックや状態遷移がある場合はvuexなども検討してもいいかもしれません。
ポイントはcanvasのドラッグやタッチした際の位置を修正することと、サイズと実際に表示されるサイズが異なるためその変換を行っています。
最後にctx.getImageDataを叩いて得られたデータから、Flaskに送る配列に変換しています。（一緒にRGBからGrayScale画像にしています）
あとはpredictの結果から一番近しい数字を表示して終わりです。
const container = new Vue({
el: '#container',
data: {
message: '0から9の数字を書いたら識別します！',
pen_size: "50",
is_debug: false,
},
methods: {
update_message: function(str) {
this.message = str;
},
clear: function() {
const canvas = document.getElementById('draw_canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
this.update_message('また書いてね!');
},
touch_draw: function(e) {
const rect = e.target.getBoundingClientRect();
for(const t of e.touches) {
const x = t.clientX - rect.left;
const y = t.clientY - rect.top;
this.draw(x, y);
}
},
drag_draw: function(e) {
if(!e.buttons) return;
const rect = e.target.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
this.draw(x, y);
},
draw: function(mx, my) {
const canvas = document.getElementById('draw_canvas');
const x = mx / canvas.clientWidth * canvas.width;
const y = my / canvas.clientHeight * canvas.height;
if (x < 0 || y < 0 || canvas.width < x || canvas.height < y) return;
const ctx = canvas.getContext('2d');
const r = parseFloat(this.pen_size) / 100.0 * (canvas.width / 8);
ctx.beginPath();
ctx.fillStyle = 'white';
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.fill();
},
predict: function() {
const canvas = document.getElementById('draw_canvas');
const ctx = canvas.getContext('2d');
const img = ctx.getImageData(0,0,28,28).data;
const length = img.length / 4;
const src = [];
for(let i = 0 ; i < length ; ++i) {
const ptr = i * 4;
src.push(Math.floor((img[ptr] + img[ptr + 1] + img[ptr + 2]) / 3.0));
}
callback = this.update_message;
fetch('/predict', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({'src': src }),
}).then(function(res) {
return res.json();
}).then(function(data) {
const predict = data.predict[0];
let index = 0;
for(let i = 0 ; i < predict.length ; ++i) {
if (predict[index] < predict[i]) {
index = i;
}
}
callback(`たぶん${index}だと思う。(${Math.floor(predict[index] * 100)}% ${data.elapsed}[sec])`);
});
},
debug_print: function(src, predict) {
if (this.is_debug) {
let debug = "";
for(let j = 0 ; j < 28 ; ++j) {
for(let i = 0 ; i < 28 ; ++i) {
debug += ` ${src[j * 28 + i].toString(16)} `.slice(-3);
}
debug += '\r\n';
}
console.log(debug);
console.log(predict);
}
}
},
});
※面倒なのでhttpリクエストにfetchを使っていますが、vue公式としてはaxiosを推奨しています。
作成したKeras+FlaskアプリケーションをDockerコンテナにまとめる
システムのポータビリティを考え、コンテナで実行できるようにします
特にPythonのパッケージバージョン管理はいろいろと難があるので
pipのインストールやregistryなどにアップすることを考えてDockerfileからビルドします。
まず現在動作している環境のライブラリをrequirements.txtに出力します
$ pip freeze > requirements.txt
以下のようにパッケージ一覧が得られます。乱雑する場合は最小限動作する仮想環境を作り直してから同作業を行います。
absl-py==0.2.2
astor==0.7.1
bleach==1.5.0
certifi==2018.4.16
click==6.7
Flask==1.0.2
gast==0.2.0
grpcio==1.13.0
h5py==2.8.0
html5lib==0.9999999
itsdangerous==0.24
Jinja2==2.10
Markdown==2.6.11
MarkupSafe==1.0
numpy==1.14.5
protobuf==3.6.0
six==1.11.0
tensorflow==1.8.0
termcolor==1.1.0
Werkzeug==0.14.1
wincertstore==0.2
あとは、Dockerfileで公式のPythonパッケージを引っ張ってきてファイルのコピーとライブラリの追加を行います。
FROM python:3.5
# file copy
COPY . /app
WORKDIR /app
# lib install
RUN pip3 install --upgrade -r requirements.txt
# run flask server
EXPOSE 3000
CMD ["python", "mnist-server.py"]
EXPOSE 3000はポート開放なので忘れずに入れておきます。
最後にコンテナをビルドします
$ docker build -t <image-name> .
実行したいときはポート開放と合わせて以下のコマンドを実行します
$ docker run -p 3000:3000 -it <image-name>
pythonで実行したときと同様に動けば成功です。
毎回ビルドと実行が面倒なのでdocker-compose.ymlファイルも用意しておきます
mnist-server:
build: ./
ports:
- 3000:3000
これによってビルドと起動を$ docker-compose upでできるようになります。
まとめ
今回は手書き文字認識をベースに、ポータビリティに優れたWebアプリ作成例を示しました。
環境構築の手間がなくなるだけかなり便利なのでぜひ試してください。
今回作成したアプリをgithubに上げておきます。
github.com
