【AI】LobeでMNISTをやってみた

# ➊はじめに
### ■コーディング0のAIツール
「AIって最先端技術だし、さらにpythonプログラミング知識がないと構築できないんでしょ～敷居が高くてムリポです」と言ってたものが、**AIの知識ゼロでAIが簡単にできちゃう**とんでもないツールが、「**[Microsoft Lobe](https://lobe.ai/)**」から出ています。

### ■Microsoft Lobe
まずは「**[Example](https://lobe.ai/examples)**」を見てみましょう。凄すぎて、ビクーリたまげます😲できるAIからサービスを考えていた人も、これからはサービス先行で物事を考えることができるようになるのではないでしょうか。あと、他の見どころは「[Watch Tourの08:35](https://youtu.be/Mdcw3Sb98DA?t=520)」のDrink識別をサービスにしたところです。とても興味深いです😊
<img width=300 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/2dcf3174-3bbe-f373-9af3-0d2c510818c8.gif'>

**[Lobe](https://lobe.ai/)**は、win/macのローカルアプリケーションですが、画像の取り込み、ラベル付け、学習によるモデル作成、作成したモデルでの推論、推論結果のフィードバック(モデル更新)まで、**まるっと全部ほぼ自動**でできちゃいます！

![SQ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/bd7dd7d9-3388-8c82-8a95-78b49d7e5670.png)


# ➋今回やること
### ■LobeでMNIST
**面白いサービスネタ**が思いつかなかったので**MNIST**をやりたいと思います。学習後の推論においては**Lobe単体でも完結可能**ですが、手書きUIがないことと、LobeとアプリケーションをAPIで連動させてみたいという思いから、今回は「Lobe」と「mnister_for_lobe」をAPI連携させたいと思います。

> 『[【MNIST】手書き数字をAIに認識させよう](https://qiita.com/PoodleMaster/items/33dae7a3b10dc117fbed)』のバックエンド(推論エンジン)が、**Lobe**になったバージョンだと思ってください。

### ■システム構成
システム構成は以下の通りです。
**推論エンジン側は「`Lobe`」**、**アプリケーション側は自作の「`mnister for Lobe`」**を使用します。
![system](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/52396c22-9b7e-c037-4243-049809d9a18b.png)


※Lobeで作ったモデルは**エキスポートが可能**で、エキスポートした情報から、pythonなどのプログラミング言語(Tensorflow)を用いて、新たに推論エンジンを構築することも可能です。今回は、新たに推論エンジンを構築せず、**Lobe**に推論させます。

# ➌MNISTのデータ取得
今回学習に使用する画像は、MNISTのテストデータ10,000枚を使用したいと思います。
データは、「[【MNIST】データをPNG変換](https://qiita.com/PoodleMaster/items/5caab3d60bef183bb7e2)」を使えば簡単に入手できます。

![mnist_test_data](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/ac97dd7a-4eed-9804-edd3-4193567e79e0.png)

# ➍【推論エンジン側】Lobe

### ■Lobeインストール
Lobeホームページ ( https://lobe.ai/ )から、ダウンロードしてインストールするだけです。

### ■Lobe起動
Lobeを起動します。いま(2020/11)はまだBETA版です。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/4696cd93-b460-e279-0b40-acd1c124c765.png)

### ■New Project
「`New Project`」を押下します。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/33e14207-39d0-e995-f05a-b62bc725cf2d.png)

### ■データのインポート
「`Import`」を押下します。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/04ae5992-f41c-512d-79b5-136d63b5f590.png)

「`Dataset`」を押下します。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/534c3086-d0e0-c0dc-c6e9-13f1567aba8e.png)

「`Choose Dataset`」を押下します。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/451bca66-f527-b21d-df1d-34e9b094754f.png)

先程用意した「MNISTのテストデータ」のフォルダを選択します。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/2701d029-a5f2-489c-7e08-97824380b259.png)

今回用意したMNISTデータのフォルダ構成は、ラベルと一致しているので、「`Label Using Folder Name`」をチェックし、「`Import`」を押下します。これで学習データの読込みとラベリングまで自動でやってくれます。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/3ec1ca54-2c2c-ced9-97f4-315997d0a751.png)

データの読込みを始めます。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/2fac9bf3-5945-3f15-c530-ff20a925a428.png)

データの読込みが終わると自動で学習を始めてくれます。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/d40f8708-019c-0a4b-9709-b61132a4359e.png)

### ■学習
「`Train`」を押下してください。
学習結果がリアルタイムで表示されます。どの画像がどのラベルに分類されてしまったか、そこからどいう画像を学習させるべきなのか、などを検証することができます。

![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/a70ec5d3-f3e2-683a-b380-07c0b468f8e0.png)
> この時点での学習結果は、学習データ10,000枚の内、83%が正解、17%が不正解と認識されました。その後、最適化により認識率はもっと上がっていきます。

### ■最適化
「`Optimizing`」を押下し最適化をしておきます。

※最適化は結構時間がかかります。「`Project Settings`」から、最適化方法として、精度重視か、スピード重視かを選択することができます。デフォルトでは「`精度重視`」となっています。
※故意に最適化をしなくても、時間をおくと勝手に最適化がかかり、勝手に認識率が上がっています。スゴイ！

> 最適化が完了し、最終的には99%(9,900枚)が正解、1%(100枚)が不正解の認識率となりました。

### ■エクスポート
「`Export`」を押下します。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/305ff0bd-5ad5-cf02-45a5-b15bc9c770e4.png)


「`TensorFlow`、`TensorFlow Lite`」用などにもエキスポートできますが、今回は「`Local API`」を選択します。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/41970436-b23d-138e-b367-64601e85412e.png)

「`Format：JSON`」のところにAPI仕様(リクエスト先URLとInterface)が表示されます。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/3637cabf-5490-15b9-9e3b-683014068d34.png)

各言語を使用してAIサーバへ接続する際は、「`Format：`」欄から使用する言語を選択するとインタフェースのサンプルコード(イマドキ用語だと`スニペット`かな)が表示されます。今回アプリケーションはjavascriptで書いているのでこちらを参考にします。
![Lobe](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/853adb87-54f8-72e5-185d-6abb27c1aa8d.png)

``` .js:javascript：Prepare&ensp;Request
URL http://localhost:38100/predict/5c1fbf69-651f-40d2-aab7-c0b94f1b5a0c
```
```.js:
var data = JSON.stringify({
  "inputs": {
    "Image": "<base64 image>"
  }
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseText);
  }
});

xhr.open("POST", "http://localhost:38100/predict/5c1fbf69-651f-40d2-aab7-c0b94f1b5a0c");
xhr.send(data);
```

``` .js:javascript：Parse&ensp;Output
{
  "labels": [
    {
      "name": "0",
      "type": "<float32 confidence>"
    },
    {
      "name": "1",
      "type": "<float32 confidence>"
    },
    {
      "name": "2",
      "type": "<float32 confidence>"
    },
    {
      "name": "3",
      "type": "<float32 confidence>"
    },
    {
      "name": "4",
      "type": "<float32 confidence>"
    },
    {
      "name": "5",
      "type": "<float32 confidence>"
    },
    {
      "name": "6",
      "type": "<float32 confidence>"
    },
    {
      "name": "7",
      "type": "<float32 confidence>"
    },
    {
      "name": "8",
      "type": "<float32 confidence>"
    },
    {
      "name": "9",
      "type": "<float32 confidence>"
    }
  ],
  "prediction": "0"
}
```
# ➎【アプリケーション側】mnister for lobe

### ■ダウンロード
local PCで、`mnister_for_lobe`を格納するディレクトリに移動後、以下の`git clone`コマンドを打ち込んで`mnister_for_lobe`ツールをGETしてください。

``` .bat:command
git clone https://github.com/PoodleMaster/mnister_for_lobe
```
> <img width=64 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/3a342531-d030-6a66-678e-45f328de072f.png'><img width=120 src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/7e2c1f12-f920-922c-81f2-312da1406ad0.png'>
> Github : https://github.com/PoodleMaster/mnister_for_lobe

### ■アプリ起動
ダウンロード後、`mnister_for_lobe`フォルダ直下にある「`index.html`」をchrome、EdgeなどのBrowserで直接開いてください。(本アプリはwebサーバのデプロイ等は不要です)

``` file_folder:
mnister_for_lobe
    │
    ├─static
    │     │
    │     ├─favicon.ico
    │     ├─GitHub-Mark-32px.png
    │     ├─Input.js                  ← ここでAPIによりLobeへ画像の送信と推論結果の受信を実施
    │     └─mnister-Mark-28px.png
    │
    ├─index.html                      ← これをBrowserで直接起動してください
    ├─LICENSE
    └─README.md
```
起動画面はこんな感じです。
![mnister](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/2d26a3cc-69db-9cf5-19bf-93a816f57df7.png)

### ■初期設定
「Get the request URL from Lobe and enter it.」と書かれたテキストボックス欄に、Lobeから取得した「`リクエスト先URL`」をコピペしてください。
※リクエスト先URLは、「`Lobe->Export->Local API`」のところに記載されています。
![mnister](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/07f807a4-ef28-9003-0ad4-4036c2160a94.png)

# ➏システム実行
黒い四角枠内に数字を書き、「Predict」を押下してください。推論結果が表示されれば成功です！
![mnister](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/405376/3924bd76-8b3a-00bc-e19e-93f79c9aaa3d.gif)


# ➐Lobeを使ってみて
AI側について、**プログラミングすることなく推論エンジンを構築できる**のはスゴイですね。もちろんTensorflow用にモデルをエクスポートできるので、本来はそれを使うのでしょうが。

**Lobe**など無料の高機能アプリを使う際に気になる点ですが、 **画像やモデルが収集されたり、クラウドにアップロードされたりすることはない**とのこと。安心して使えますね。あと気になる点としては、**まだGPUには対応していない**とのことで、CPU負荷が結構高いです。高性能なGPUを持っている訳ではないので、Google Colabみたいな環境で実行できると尚良いのですが…

# ➑以上
今回は認識率云々ではなく、Lobeで推論サーバを構築し手書き数字を推論させることができるかを検証しましたが、簡単に推論までさせることができました。次回は、Lobeからエキスポートしたモデルを使用してPythonプログラミングにより推論でもさせてみようと思います。
お疲れ様でした。