LobeとNode-REDでメガネチェッカーをノーコーディングで作ってみた

2020年10月27日にMicrosoft社が買収した [Lobe](https://lobe.ai/)のプレビュー版がリリースされていたので、
メガネをかけていないかどうか判定するツールをNode-REDを使って完全ノーコーディングで作ってみました。

# Lobeアプリをダウンロード
下記URLにアクセスしてLobeのアプリをダウンロードします。

https://lobe.ai/

諸々情報を入力して 「Downｌoad」ボタンをクリックします。

![s100.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/7b1801f6-c6de-23d5-7220-e7481e8ffa26.png)

# デモ動画
[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/co6v2xV9ijI/0.jpg)](http://www.youtube.com/watch?v=co6v2xV9ijI)


# 1. 学習データを登録する

## 1-1. プロジェクト作成
プロジェクト名を入力して、右上の 「Import」をクリックし、画像、カメラ、データセットからインポートしたい形式を選びます。
今回はカメラを選択しました。

![s101.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/b8b78cd5-a6ad-011c-f26f-1e555fd24220.png)

## 1-2. 学習データ登録
カメラ画像の左下に学習するラベル名を入力します。入力したら、画面中央にあるシャッターボタンをクリックします。
長押しすることで連続して撮影することも可能です。学習が終われば、右上の「Done」をクリックします。

![s102.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/286c9570-0523-4faf-9e98-a55ff1bcb7b0.png)

同様にメガネをかけているタイプの写真を撮影して学習させます。

## 1-3. トレーニング
撮影したデータの学習はバックグラウンドでされます。100%になれば効果音で知らせてくれました。

![s103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/2464dc25-34d9-a88c-657c-ff2613c26b85.png)

## 1-4. 確認する
学習したデータが正しくできているか確認します。左側メニューの「Play」から確認できます。判定ラベルはリアルタイムで切り替わります。

![s104.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/c954667c-193f-18c2-2a77-687e8e24fad6.png)

# 2. Node-REDで使う
学習したデータは様々な形でプログラムに組み込むことができます。サポートされているのは、`CoreML` `TensorFlow` `TensorFlow Lite` `Local API` の4つがありました。
今回はNode-REDで使うので、 `Local API` を使用します。

## 2-1. エクスポートする
メニューから「Export」をクリックします。

![s200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/e2b1a904-b3b8-393b-d076-5773e7b58680.png)

`Local API` をクリックします。

![s201.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/6529351e-a349-3349-0c0b-7cdbd1f9ae6b.png)

APIのURLが発行されるので、メモしておきましょう。

![s202.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/8011df06-6d95-1310-c9c6-bc7cda26de4c.png)

## 2-2. Node-REDの設定
ローカルでサクッと試したかったので、[Node-RED Desktop](https://sakazuki.github.io/node-red-desktop/ja/) アプリを使いました。

事前に必要なノードをインストールしておいてください。

* [node-red-contrib-browser-utils](https://flows.nodered.org/node/node-red-contrib-browser-utils)
* [node-red-contrib-image-output](https://flows.nodered.org/node/node-red-contrib-image-output)
* [node-red-node-base64](https://flows.nodered.org/node/node-red-node-base64)

今回使用したノードは下記です。インポートして使ってみてください。LobeのリクエストURLはご自身のものに書き換えてください。

```json
[{"id":"cbddaee0.148cf","type":"tab","label":"Lobeデモ","disabled":false,"info":""},{"id":"a66e7200.6dcef","type":"camera","z":"cbddaee0.148cf","name":"","x":120,"y":160,"wires":[["3bd46f55.db5af","c5dfc04.b48214"]]},{"id":"c5dfc04.b48214","type":"image","z":"cbddaee0.148cf","name":"","width":160,"data":"payload","dataType":"msg","thumbnail":false,"active":true,"pass":false,"outputs":0,"x":300,"y":240,"wires":[]},{"id":"3bd46f55.db5af","type":"base64","z":"cbddaee0.148cf","name":"","action":"","property":"payload","x":280,"y":160,"wires":[["1c49be5.9c8a942"]]},{"id":"1c49be5.9c8a942","type":"template","z":"cbddaee0.148cf","name":"パラメータ設定","field":"payload","fieldType":"msg","format":"json","syntax":"mustache","template":"{\n  \"inputs\": {\n    \"Image\": \"{{{payload}}}\"\n  }\n}","output":"json","x":480,"y":160,"wires":[["ccd3517.d677bb"]]},{"id":"ccd3517.d677bb","type":"http request","z":"cbddaee0.148cf","name":"Lobeリクエスト","method":"POST","ret":"obj","paytoqs":"ignore","url":"","tls":"","persist":false,"proxy":"","authType":"","x":700,"y":160,"wires":[["4756ec42.083764"]]},{"id":"4756ec42.083764","type":"debug","z":"cbddaee0.148cf","name":"結果表示","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload.outputs.Prediction[0]","targetType":"msg","statusVal":"","statusType":"auto","x":900,"y":160,"wires":[]}]
```

カメラの左側にあるボタンをクリックすると撮影が始まります。撮影した結果がデバッグエリアに出力されます。

![s203.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/154355/5ca0da84-b723-faee-558f-4093fbbb28e8.png)

# まとめ
同様のサービスにGoogleの [Teachable Machine](https://teachablemachine.withgoogle.com/)もあります。どちらもノーコーディングで学習できて、簡単にプログラムに組み込むことが可能です。

Teachable Machineはウェブベースですが、Lobeはアプリなのでローカル上で学習させることが可能です。
学習する写真などをクラウドにアップしたくないという方には良いと思いました。あと、Lobeの方がUIもオシャレに作られている印象でした。

ただ、Lobeは今の所画像のみ学習可能でした。Teachable Machineは骨格や音声も学習できます。
今後もこのようにノーコーディングで様々なツールがリリースされると思います。とても楽しみですね！

システム化のご検討やご相談は弊社までお問い合わせください。
https://i-enter.co.jp/contact/