AI

手書き文字を作れるJavascriptをつくってTensorFlowで予測させてみた

#Javascript#Python#TensorFlow#機械学習

MNISTでテストしているだけだと味気ないので、ブラウザで数字を手書きして、それを予測するようにしてみました。JavascriptのCanvasでお絵かきアプリみたいのを作って、そこに手書きで数字を書いてボタン押したら、28x28に縮小して、Base64の状態でサーバに送ります。サーバでPythonが、numpyの配列にして、TensorFlowに渡して推測しております。

多分やり方は大体あってるのではないかと思ってるのですが、いかんせん精度が超悪いです。そもそもまだTensorFlowがCNNになっていないのですが、それでもMNISTで学習・テストすると97%位にはなっているものです。背景黒・文字色白で0-255の明るさを28x28もつ配列にしているので、形式は合っているはずなのですが、やはり文字の太さとか大きさとかそういうのによって、全然違うということなのかなと思っております。ブラウザで割と適当に数字を書いてもいい感じの精度で答えを言ってくるのかなと期待していたので残念です。とりあえず、今度CNNで対応してみて、それでもダメだったら、Javascriptの画像自体で訓練をしていくようにしてみようかなと思ってます。（何か根本的な原因がありそうな気もしますが）

GitHub

一応GitHubに入れておきました。誰か精度よくしてくれたら嬉しいです。

追記(2017/01/25) 上記のリポジトリは、「手書き文字を作れるJavascriptをつくってTensorFlowで予測させてみた（２）」の内容に更新しました。

PythonでWEBサーバ起動して、必要なディレクトリ・ファイルを作成

$ mkdir mnist_test
$ cd mnist_test
$ python -m http.server --cgi
$ touch index.html
$ mkdir cgi-bin
$ touch cgi-bin/mnist.py
$ touch cgi-bin/mytensor.py
$ mkdir cgi-bin/mnist
$ mkdir cgi-bin/ckpt

各ファイルの中身を作成

index.html

<html>
<head>
<title>MNIST TEST</title>
</head>
<body>
<h1>MNIST TEST</h1>
<canvas id="canvas1" width="400" height="400" style="border: 1px solid #999;"></canvas><br><br>
<input id="clear" type="button" value="Clear" onclick="canvasClear();">
<input id="submit" type="button" value="Submit" onclick="saveImg();"><br><br>
<img id="preview"><span id="answer"></span>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
var url = 'http://127.0.0.1:8000/cgi-bin/mnist.py';
var lineWidth = 50;
var lineColor = '#ffffff';
var imgW = imgH = 28;


var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');
var cleft = canvas.getBoundingClientRect().left;
var ctop = canvas.getBoundingClientRect().top;
var mouseX = mouseY = null;


canvasClear();
canvas.addEventListener('mousemove', mmove, false);
canvas.addEventListener('mousedown', mdown, false);
canvas.addEventListener('mouseup', mouseInit, false);
canvas.addEventListener('mouseout', mouseInit, false);


function mmove(e){
    if (e.buttons == 1 || e.witch == 1) {
        draw(e.clientX - cleft, e.clientY - ctop);
    };
}


function mdown(e){
    draw(e.clientX - cleft, e.clientY - ctop);
}


function draw(x, y){
    ctx.beginPath();
    if(mouseX === null) ctx.moveTo(x, y);
    else ctx.moveTo(mouseX, mouseY);
    ctx.lineTo(x, y);
    ctx.lineCap = "round";
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = lineColor;
    ctx.stroke();
    mouseX = x;
    mouseY = y;
}


function mouseInit(){
    mouseX = mouseY = null;
}


function canvasClear(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#000000';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    $('#preview').attr('src', '');
    $('#answer').empty();
}


function toImg(){
    var tmp = document.createElement('canvas');
    tmp.width = imgW;
    tmp.height = imgH;
    var tmpCtx = tmp.getContext('2d');
    tmpCtx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, imgW, imgH);
    var img = tmp.toDataURL('image/jpeg');
    $('#preview').attr('src', img)
    return img;
}


function saveImg(){
    var img = toImg();
    console.log(img);
    $.ajax({
        url: url,
        type: 'POST',
        data: {img: img},
        dataType: 'json',
        success: function(data){
            if(data.status){
                $('#answer').html('は、' + data.num + 'です');
            }else{
                $('#answer').html('は、分かりません');
            }
        },
    });
}
</script>
</body>
</html>

cgi-bin/mnist.py

#!/usr/bin/env python


import sys
import os
import cgi
import json
import cgitb
cgitb.enable()


from PIL import Image
import numpy as np
from io import BytesIO
from binascii import a2b_base64


from mytensor import MyTensor


import logging


print('Content-Type: text/json; charset=utf-8')
print()


if os.environ['REQUEST_METHOD'] == 'POST':
    data = cgi.FieldStorage()
    img_str = data.getvalue('img', None)
    if img_str:
        b64_str = img_str.split(',')[1]
        img = Image.open(BytesIO(a2b_base64(b64_str))).convert('L')
        img_arr = np.array(img).reshape(1, -1)
        tf = MyTensor()
        result = tf.predict(img_arr)
        print(json.dumps({'status': True, 'num': result}))
        sys.exit()
print(json.dumps({'status': False, 'num': False}))

cgi-bin/mytensor.py

import tensorflow as tf
import numpy as np
from tensorflow.examples.tutorials.mnist import input_data
from PIL import Image


class MyTensor:
    H = 625
    BATCH_SIZE = 100
    DROP_OUT_RATE = 0.5


    def __init__(self):
        self.x = tf.placeholder(tf.float32, [None, 784])
        self.t = tf.placeholder(tf.float32, [None, 10])
        self.w1 = tf.Variable(tf.random_normal([784, self.H], mean=0.0, stddev=0.05))
        self.b1 = tf.Variable(tf.zeros([self.H]))
        self.w2 = tf.Variable(tf.random_normal([self.H, self.H], mean=0.0, stddev=0.05))
        self.b2 = tf.Variable(tf.zeros([self.H]))
        self.w3 = tf.Variable(tf.random_normal([self.H, 10], mean=0.0, stddev=0.05))
        self.b3 = tf.Variable(tf.zeros([10]))


        self.a1 = tf.sigmoid(tf.matmul(self.x, self.w1) + self.b1)
        self.a2 = tf.sigmoid(tf.matmul(self.a1, self.w2) + self.b2)
        self.keep_prob = tf.placeholder(tf.float32)
        self.drop = tf.nn.dropout(self.a2, self.keep_prob)
        self.y = tf.nn.relu(tf.matmul(self.drop, self.w3) + self.b3)
        self.loss = tf.nn.l2_loss(self.y - self.t) / self.BATCH_SIZE


        self.train_step = tf.train.AdamOptimizer(1e-4).minimize(self.loss)
        self.correct = tf.equal(tf.argmax(self.y, 1), tf.argmax(self.t, 1))
        self.accuracy = tf.reduce_mean(tf.cast(self.correct, tf.float32))
        self.saver = tf.train.Saver()
        if not self.ckpt():
            self.train()


    def ckpt(self):
        return tf.train.get_checkpoint_state('.\cgi-bin\ckpt')


    def predict(self, img):
        with tf.Session() as sess:
            self.saver.restore(sess, self.ckpt().model_checkpoint_path)
            result = sess.run(self.y, feed_dict={self.x: img, self.keep_prob:1.0})
            return int(np.argmax(result))


    def train(self):
        mnist = input_data.read_data_sets('.\cgi-bin\mnist', one_hot=True, dtype=tf.uint8)
        with tf.Session() as sess:
            sess.run(tf.global_variables_initializer())
            for _ in range(20000):
                batch_x, batch_t = mnist.train.next_batch(100)
                sess.run(self.train_step, feed_dict={self.x: batch_x, self.t: batch_t, self.keep_prob:(1-self.DROP_OUT_RATE)})
            self.saver.save(sess, '.\cgi-bin\ckpt\model.ckpt')

ブラウザでアクセス

下記URLにアクセスすると、MNIST TESTというお絵かきページみたいのがでてきます。ちなみに、最初にsubmitボタン押すと、MNISTのダウンロードから学習までをするので、時間かかるし、結果も表示されません。2回目からはちゃんと結果が（一応）表示されます。

http://127.0.0.1:8000