Azure Percept Visionのサンプルコード+カスタムAIモデルを動かす

***
**Azure Percept記事一覧**

* [Azure Perceptってどんなもの？](https://qiita.com/matsujirushi/items/407e21a42da561773469)
* [Azure Perceptデバイスのセットアップ](https://qiita.com/matsujirushi/items/3a8be8f4f6d046b9e0f3)
* [Azure Perceptデバイスのセットアップ・ツアー](https://qiita.com/matsujirushi/items/283f13ca10a4ed683c46)
* [Azure Percept Visionのサンプルコード+サンプルAIモデルを動かす](https://qiita.com/matsujirushi/items/23bae41f79db24a1719e)
* Azure Percept Visionのサンプルコード+カスタムAIモデルを動かす
* [Azure Perceptデバイスを初期化](https://qiita.com/matsujirushi/items/37cfa5dc7ebd4295bb13)

***

**Azure Percept**は、プログラマ目線で言うと、次の3段階に分かれています。

1. サンプルコード+サンプルAIモデルを動かす
2. サンプルコード+**カスタムAIモデル**を動かす
3. **カスタムコード**+**カスタムAIモデル**を動かす

今回は、2.のVision系の**サンプルコード+カスタムAIモデル**（vision prototype）を動かしてみました。

# 「サンプルコード+カスタムAIモデル」を動かすには？

大まかには、**Custom Vision Project**に画像を投入してタグ付け、トレーニングしてカスタムAIモデルを生成します。そして、カスタムAIモデルを**Azure Percept Studio**を使ってAzure Perceptデバイスへデプロイします。
（Custom Vision Projectを保持する）**Cognitive Services**の作成や、**Custom Vision Project**の作成はいくつかの手段で出来ますが、ここでは**Azure Percept Studio**を使うことにします。

以下の画像の、パトカー、乗用車、消防車を認識するObject Detectionを作りたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/7149c161-7cc2-46dc-4f54-a45f9230ae6f.png)

# Custom Vision Projectを作成 @ Azure Percept Studio

**Azure Percept Studio**を使って、**Custom Vision Project**を作成「しようと」します。
先に**Cognitive Services**が必要なのですが、**Custom Vision Project**を作成する途中で**Cognitive Services**の作成ができるので、**Custom Vision Project**を作成します。（あぁ、ややこしい）

**Azure Percept Studio**のOverview -> Demos & tutorialsにある、Create a vision prototypeを実行します。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/b9dc6d77-5a8f-3bd1-4c5c-53027503a83b.png">

Resourceと書かれた欄が**Custom Vision**です。（微妙に分かりにくいｗ）
Create a new resourceをクリックして、**Cognitive Services**の作成に進みます。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/583fd48a-3dbf-a9cc-be9b-f9b3b3f67943.png">

# Cognitive Servicesを作成 @ Azure Percept Studio

諸々、入力してCreateをクリックします。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/3876950e-f668-5655-8b62-7a9efd7f40fa.png">

# Custom Vision Projectを作成（2度目） @ Azure Percept Studio

諸々、入力してCreateをクリックします。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/a231b166-e404-7dfb-d774-60dddefb4467.png">

無事、**Custom Vision Project**が作成されると、Image captureの画面に切り替わります。
**Cognitive Services**（のCustom Vision）側から、**Custom Vision Project**が作成されているかを確認するために、このウィンドウは置いておいて、別のWebブラウザを起動します。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/255c3c29-000b-d5f5-36d3-7fe4333ab315.png">

# Custom Visionポータルで確認 @ Custom Vision

下記URLを開いて、SIGN INをクリックしてサインインします。

https://www.customvision.ai/

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/acedadaa-1ecb-503a-58f6-0eb0a48a1bd5.png">

**Custom Vision Project**の一覧が表示されます。
さきほど作成した「cars」が作成されているので、これをクリックします。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/120b779e-dc2b-5fad-2b0a-b86d8b719715.png">

TaggedやUntaggedをクリックして、学習用の画像が有るか確認します。
まだ画像をキャプチャしていないので表示されません。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/fd43ff3d-7182-9a54-0771-a1d0cf4fb060.png">

# 画像をキャプチャ @ Azure Percept Studio / Custom Vision

では、学習用の画像をキャプチャしましょう。
**Azure Percept Studio**のVision -> (Custom Vision Project名)をクリックします。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/f416c8e6-3c79-3ccd-ac79-206a8d054fc8.png">

Image captureをクリックします。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/c3d731e6-047b-19ff-3f38-e7070135f740.png">

Azure Perceptデバイスを選んでTake photoをクリックすると、Azure Perceptデバイスのカメラから画像を取り込んで、**Custom Vision Project**へ転送します。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/72a01d09-52df-a7ef-815c-ecca55d02d43.png">

Custom Vision側は、画像をキャプチャしても即時表示されません。
TaggedやUntaggedをクリックして再表示すると確認できます。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/73a12c19-c69d-a7f5-5a6d-6439fc04c92a.png">

（おもちゃの）クルマを動かしながら、ビシバシと画像をキャプチャします。
が！
やってみると、この部分の操作性が悪すぎて`イライライライラMax`になっちゃいました。もー。

> カメラ近くにシャッターボタンがあるとか、（自動キャプチャの場合に）キャプチャしたタイミングが分かるようにLEDがついているとかすると良いなーと思いました。

というわけで、デジカメでパパっと撮影して、この画像ファイルをCustom Visionの「+」マークで取り込みました。ふー。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/c6c45c36-738e-c23f-3a10-f1fe82035a67.png">

# 画像のオブジェクトにタグ付け @ Custom Vision

キャプチャした画像のオブジェクト１つ１つに、タグを付けます。

<img width="600" alt="image.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/55882606-05a5-62c9-6eab-6cb369aa7395.gif">

結果、タグ付け完了画像が23枚になりました。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/93ab46a2-30fd-5d3f-0b7d-a85388be71e0.png">

# トレーニング @ Custom Vision

タグ付け画像から、AIモデルを生成します。
歯車マークをクリックして、Trainを実行します。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/e05eb0b9-9c10-5df7-d5c6-046ffcbf63b6.png">

待つこと数分。
出来上がりました。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/5bba10b2-75ce-dbea-22ee-d7c24b624803.png">

# Azure Perceptデバイスへデプロイ @ Azure Percept Studio

いよいよ、Azure Perceptデバイスへデプロイです。
**Azure Percept Studio**の**Custom Vision Project**にある、Project summaryを開くと、Itarationがあることが確認できます。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/0f554a63-1dfb-e095-ab00-31380da19de8.png">

Evaluate and deploy画面に切り替えて、Azure PerceptデバイスとItarationを選択、Deploy modelをクリックします。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/aa751b20-3b95-7d67-3bcf-dcd750c07ba5.png">

即、デプロイ完了となりますが、View streamするといつものように「Loading Model」と書かれています。

<img width="600" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/a0c850da-ace0-b504-b73d-1577cd95c7c6.png">

# 実行

しばらく待つと、新しいAIモデルで動きだしました！！

<img width="600" alt="image.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/109634/5fcfcb6c-0d64-8d7a-a0cf-f1aac44927c4.gif">

乗用車と消防車がうまく区別できていませんね。。。
学習データを作るのに、なにかコツが必要なのかも。

# まとめ

Vision系の**サンプルコード+カスタムAIモデル**（vision prototype）を動かしてみました。

* Custom Vision ProjectをAzure Perceptデバイスへデプロイが簡単
* AIモデルはCustom Visionで作る
* Azure PerceptデバイスのTake photoは辛い、デジカメ->Custom Visionが楽