8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-09-18

1. はじめに

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

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

mnister sample localhost

※モデルは『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」をクリックしてください。結果が表示されます。

mnister sample ngrok

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

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

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

誤認識1.png 誤認識2.png

4. オレのMNISTモデル

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

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

5. 使用した技術など

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

■サーバ機能 (server.py)

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

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

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

6. 以上

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

お疲れ様でした!

8
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?