1. はじめに

mnisterツールを作成しました。このツールで自分の手書き数字をAIに認識させることができます。

「ツール作るのメンドクセ」という方はこちらからすぐに遊べます。
HEROKUへデプロイしました。すぐに遊べます😊！
→ https://mnister-web.herokuapp.com/
※HEROKU無料枠のため、サーバがSLEEPしている場合、初回起動のみ45秒程度時間がかかります。
こちらのモデルは汎化性能をUPさせた高認識版を使用しております。

※モデルは『0からはじめる「Python AIプログラミング」 for Google Colab』で作った認識精度99%のモデルを利用しています。

2. なぜ`mnisterツール`を作ったのか

MNISTを利用した数字認識モデルを作って「認識精度が99%だった、スゲー！」

「………………ん😒？………………でっ！？」ってなりますよね？
AIって何ぞやから始まって色々とモデルを作るために様々な知恵熱を絞り出して作りだした俺のMNISTモデル。そのやっとこ出来上がったモデルを「他人が用意したテストデータで、認識精度を確認して終わり！」とするのは、どうも納得できませんでした。

3. `mnisterツール`で遊ぼう

ということで、精魂込めて自分で作りあげた俺のMNISTモデルの効果を簡単に確認できるツールを作ってみました。自分の手書き文字が正しく認識されるか、意地悪に書いても正しく認識できるのか、なぜ認識されないのか、どうすれば認識するようになるのか、など色々考えて遊びましょう。

(1) 環境構築

mnisterツールをGithubに公開しており、環境構築手順などはこちらのREADME.mdに記載していますので、こちらを参照してください。なお、Google Colabでも、Local PCでも、どちらでも遊ぶことができますが、Google Colabの方が超簡単なのでオススメです。

mnisterダウンロード

git clone https://github.com/PoodleMaster/mnister

mnisterリスト

mnister
    │
    ├─Extra
    │     │
    │     ├─colab_mnist.hdf5           ← ImageDataGeneratorを使用した高汎化版モデル
    │     └─ImageDataGenerator.ipynb   ← モデルの作り方はこちら
    │
    ├─static
    │     │
    │     ├─favicon.ico
    │     ├─GitHub-Mark-32px.png
    │     ├─Input.js
    │     └─mnister-Mark-28px.png
    │
    ├─templates
    │     │
    │     └─index.html
    │
    ├─colab_mnist.hdf5                 ← サーバが読み込むモデル(普通に学習した低汎化版モデル)
    ├─LICENSE
    ├─README.md
    └─server.py                        ← サーバはこちらを起動

mnister起動

python server.py

(2) ソースコード

Github : https://github.com/PoodleMaster/mnister

・Google Colabで遊ぶ方への説明　(【参考】mnister.ipynb)
・Local PCで遊ぶ方への説明

※Google Colabの使用方法が良く分からない方は、こちらの記事を参考にしてください。

(3) 遊ぼう

webブラウザの黒いキャンバスのところにマウスで0～9の数字を書いたら、「Predict」をクリックしてください。結果が表示されます。

(4) 意外と認識できない

MNISTの認識精度99%モデルを使用しているので、ちょっとくらい意地悪してみても問題ないかなと思ったら、普通に書いたり、少し回転させたりしても認識できないものが結構あることが分かりました。このままでは、一般並みに実用化するにはもっと色々と工夫が必要ですね。

→結局、MNISTのテストデータを使った認識精度が99%だったということに過ぎないので、もっと様々なバリエーションの数字に対応させる(汎化させる)必要があることが分かりました。

4. オレのMNISTモデル

ここまででも十分かもしれませんが、他人が作ったMNISTモデルで認識させてもイマイチ楽しくないかもしれません。自分でオレのMNISTモデルを作ってみてください。

オレのMNISTモデルを作るのメンドクセという方に、スペシャルサービスとして出来上がった高汎化版のモデルも用意しております。「低汎化版モデル：mnister/colab_mnist.hdf5」を「高汎化版モデル：mnister/Extra/colab_mnist.hdf5」に置き換えて実行してみてください。こちらは、ImageDataGeneratorを利用して汎化性能を向上させたモデルとなっております。置き換えて認識率の違いを楽しんでみてください❤

5. 使用した技術など

ブラウザで文字入力させたものをAI認識させる様にできないかなぁと思ったら、AI処理部(Python)だけでも大変だったのに、flask、javascript、jQuery(Ajax)、json、base64、Createjs、html、公開プログラム格納のためのGithub………、などなど、色々と幅広い基礎知識が必要となってしまいとても結構大変でした。でも、おかげさまで幅広く勉強することができて良かったと思っています😊

■サーバ機能 (server.py)

技術	説明
Flask Flask-ngrok(Google Colab)	webサーバ起動とバックエンドでpython(AI)を使用したいため
Tensorflow	推定処理(AI)のため

■クライアント機能 (Input.js、index.html)

技術	説明
Createjs	文字入力インタフェースのため
jQuery(Ajax)	サーバ側との非同期通信のため

6. 以上

もしこの記事が、あなたに貢献することができたなら、ぜひLGTM、またはストックをお願い致します😉

お疲れ様でした！

【MNIST】手書き数字をAIに認識させよう【webアプリの開発】