AITRIOSのDevSiteで公開されているサンプルアプリケーションを触ってみた


こんにちは。
ソニーセミコンダクタソリューションズの細井です。

今回はAITRIOSのDeveloper Siteで公開されているサンプルアプリの一つ、[Keypoint Detection](https://github.com/SonySemiconductorSolutions/aitrios-sample-application-keypoint-detection)を用いて`Keypoint Detectionのサンプルアプリを動かしてみた`という記事を投稿します。

![visualize_keypoint_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/086d5229-c7e1-f8ae-b73a-889cf05d7754.png)

## この記事の要約
- AITRIOS Developer SiteのGuideでは数種類のサンプルアプリケーションが公開されている
- GitHub Codespacesを用いることで簡単にサンプルアプリケーションが試せる

## 始めに
今回の記事では下記のステップでサンプルアプリを試してみようと思います。
1. Developer SiteからKeypoint DetectionのGitHubにアクセスする
2. Readme.mdをもとに、学習済みのPoseNetをImportする
3. Developer SiteからKeypoint DetectionのEdgeApp（Vision and Sensing Application）をDownloadする
4. Consolec上でエッジデバイスにPoseNetのAIモデルとKeypoint DetectionのEdgeAppをデプロイする
5. お試しで推論をしてみる
6. Keypoint DetectionのGitHubリポジトリからCodespacesを実行し、可視化する

## 1. Developer SiteからKeypoint DetectionのGitHubにアクセスする

AITRIOSの[Developer Site](https://developer.aitrios.sony-semicon.com/edge-ai-sensing/guides)では下記のように複数のサンプルアプリを公開しています。

![Developer_Site_Guide_sample_app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/f71e63a8-93f2-8c95-11e1-f2e4aa7afe31.png)

今後も要望に応じて、様々なサンプルアプリが公開されていく予定なのでご期待ください！
今回はその中のKeypoint Detection: Sample Application on AITRIOSにアクセスします。

![Keypoint-detecton-github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/088f11c0-97f2-4bc9-7fe7-bb4470ec0549.png)

画面右上の「Code」→「Codespaces」→ 「Create codespace on main」をクリックしてcodespacesを起動します。

:::note info
CodespacesはGitHubの個人アカウントで利用可能な開発環境です。利用にはアカウント登録が必要ですが、無料アカウントでも月あたり2コア・60時間まで利用できるのでおすすめです。詳しくは公式ページをご覧ください。[GitHub Codespaces](https://github.com/features/codespaces)
:::

## 2. Readme.mdをもとに、学習済みのPoseNetをImportする
tutorialフォルダのReadmeをもとにエッジデバイスへImportするAIモデル（学習済みのPoseNet）をImportします。

まず、下記のような記載がある通り、[Google Coral repository](https://github.com/google-coral/project-posenet/blob/master/models/mobilenet/components/posenet_mobilenet_v1_075_353_481_quant.tflite)から`posenet_mobilenet_v1_075_353_481_quant.tflite`をダウンロードします。

![import_pose_net.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/a3729ad8-36bc-959e-53bd-c81ccf097951.png)

GitHub上の下記のボタンを押すことでダウンロードできます。

![import_pose_net_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/ff2afa00-4e5f-3613-e82f-5d1a85d556f8.png)

次にAITRIOS Consoleを開き、「Create Model」から「Import」をクリックし、ダイアログを入力します。
私はModel IDをposenet_for_keypointとし、Import ModelのLocal Importで先ほどダウンロードしたtfliteファイルを選択しました。

![import_pose_net_console.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/75414874-b33c-b956-8db3-b2aea0732e10.png)

「Next」ボタンをクリックし、Model required Applicationを「ON」、Converted Modelを「OFF」、Metadata Format IDに何も入力せず、「Import」ボタンをクリックしました。

![import_pose_net_console_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/c1ef0ddd-8d93-f9d5-49ee-aa4f09c5cb10.png)

次にListに表示されたPoseNetのAIモデルをクリックし、右Paneの「Convert」ボタンをクリックします。ダイアログが出て来ますので再度ダイアログの「Convert」ボタンを押してください。
ListのSatusがBefore ConversionからConvertingに変わったことが確認できればConsoleへのAIモデルのImportは完了です。
5 ~ 10分ほどでConvertingからAdd to configuration completedというStatusに変わりますと、エッジデバイスへのDeployが可能になったことを示しています。

:::note info
現在のConsoleは自動ではStatusは更新されません。都度ヘッダ―近くにあるReloadを押して、画面更新を行ってください。
:::

## 3. Developer SiteからKeypoint DetectionのEdge Application（Vision and Sensing Application）をDownloadしImportする

AITRIOSの[Developer SiteにおけるDownloadページ](https://developer.aitrios.sony-semicon.com/edge-ai-sensing/downloads)においてある[Sample Keypoint Detection Posenet Edge App V1.1.2.1](https://developer.aitrios.sony-semicon.com/file/download/sample-keypoint-detection-posenet-edge-app-v1-1-2-1)をダウンロードします。
Developer SiteのDownloadページはAITRIOSアカウントをお持ちの方のみ見ることができます。

![keypoint_detection_dev_site.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/4cb940bf-a6ca-bd30-19dc-df310941aec5.png)

ダウンロードしたEdge Applicationのzipファイルを解凍します。
zipファイルの中は下記の構成になっているはずです。

```
- sample_keypoint-detection-posenet_edge-app_v1.1.2.1
  - edge_app_posenet_v1.1.2.wasm
  - LICENSE
  - PosenetPPLParameterSample.json
  - Readme.txt
```

ConsoleのSettings -> Applicationをクリックし、Importを押します。ダイアログが出てくるので、私は先ほどダウンロードした`edge_app_posenet_v1.1.2.wasm`を選択、Nameは`edge_app_keypoint`、versionは`1.1.2`としました。こちらは自分の管理用なのでバージョンはなんでも良いです。

![import_edge_app.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/f33841ad-4737-0071-5bdc-f53aaafb80af.png)


「Next」ボタンを押すと次のページに移行しますが、今回はMetadata Format IDには何も入力せず「Create」ボタンを押しました。
ListにEdge Applicationが表示されます。StatusがProcessingとなっているのは、Console内部でWASMコンパイルが走っているためです。
WASMコンパイルが完了したら、StatusがReadyに変わります。


## 4. Consolec上でエッジデバイスにPoseNetのAIモデルとKeypoint DetectionのEdgeAppをデプロイする

Deploy to DeviceでAIモデルをデプロイするためのConfigファイルを作成します。
ConfigファイルではAIモデルとFirmwareを同時に一つのConfigファイルでデプロイ可能ですが、今回はAIモデルのみデプロイします。
Configタブを押し、New Configを押します。

:::note info
Deploy to Deviceではv2と記載のあるタブがありますが、今回は利用しません。
v2タブは今後利用できるようになります。
:::

先ほどインポートしたAIモデルを選択し「Create」を押します。

![create_config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/e8cacaab-bd0f-0f5e-7083-9a7f2dc88ea8.png)

作成されたConfigファイルを選択し、右Paneに表示された「Deploy」ボタンを押します。
ダイアログが表示されるので、Deployしたいエッジデバイスを選択し、「Next」→「Deploy」を押してください。

![deploy_by_config_0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/5ae808d9-bb99-5e73-0205-d9d87dbb6218.png)

![deploy_by_config.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/0dabaaf7-86d0-659c-6a8b-d2dbc9c1f050.png)

:::note info
デプロイする際に、「Add new AI model」と「Replace other AI model」が選択できますが、まだ一度もデプロイしたことがない人は「Add new AI model」で問題ありません。
エッジデバイスには最大4つまでAIモデルをデプロイできますが、4つすでにAIモデルをデプロイしている場合やモデルを入れ替えたい場合は「Replace other AI model」からモデルを入れ替えることができます。
:::

次に、Keypoint DetectionのEdgeAppをデプロイします。
Deploy to Deviceを押して、Applicationタブをクリックします。

:::note info
Application v2ではありません
:::

先ほどインポートしたedge_app_keypointを選択すると、右PaneにDeployボタンがでるので押すとダイアログが出ます。
デプロイしたいデバイスを選択し「Deploy」ボタンを押します。

![edge_app_deploy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/c0c77af8-52f0-5c06-94f2-67538cb31fb3.png)

デプロイ状況はManage Deviceにおけるデバイスの右Pane → Status -> Deploymentで確認できます。
図のようにそれぞれSuccessになっていることが確認できました！

## 5. お試しで推論をしてみる
つぎに実際にConsole上で推論を試してみます。
Developer Siteでダウンロードした、フォルダの中に`PosenetPPLParameterSample.json`というものがあります。
こちらは推論をする時に設定するパラメータファイルの一部です。
Usermanualを参考に下記のCommandParameterファイルをテキストエディタで作成しました。

```
{
  "commands": [
    {
      "command_name": "StartUploadInferenceData",
      "parameters": {
        "MaxDetectionsPerFrame": 5,
        "Mode": 2,
        "NumberOfInferencesPerMessage": 1,
        "PPLParameter": {
          "header": {
            "id": "00",
            "version": "01.01.00"
          },
          "input_width" : 481,
          "input_height" : 353,
          "output_width" : 31,
          "output_height" : 23,
          "score_threshold" : 0.5,
          "iou_threshold" : 0.28,
          "nms_radius" : 20,
          "max_pose_detections" : 15,
          "heatmap_index" : 0,
          "offset_index" : 1,
          "forward_displacement_index" : 2,
          "backward_displacement_index" : 3
        },
        "UploadInterval": 30,
        "UploadMethodIR": "MQTT"
      }
    }
  ]
}
```
こちらをjson形式で保存し、Settings -> Command ParameterからImportを押し上で作成したcommand parameter fileをインポートしてください。

![console_import_comparam.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/fa67dc00-a043-7f71-f74a-9738d9f75e1f.png)

私はめんどくさかったのでもともとあるファイルを上書きしてしまったので、名前はPosenetPPLParameterSample.jsonになっています。

次にManage Device -> Settings -> Command Parameter fileで先ほどインポートしたファイルをBindします。

![bind_comparam.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/8475355e-9563-2b0d-77a3-c95e35f70c4b.png)

Bindをしてチェックマークがついたら、同じく、Settings -> Infernece Control -> Get Inference DataのトグルをOnにします。

![start_comparam.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/b5704eb4-897d-8642-4314-b046574215ad.png)

しばらく待ちます・・・

Check Dataで自分のデバイスを選択し、Meta Dataを開くと推論データがあることができます。ただしこちらのデータはDeserializeされており、よくわからないですね・・・

![see_checkdata.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/bcd15db5-d073-5223-2796-31450dcee5a4.png)


実際にこの後、SampleAppを用いて可視化してみます！！！

## 6. Keypoint DetectionのGitHubリポジトリからCodespacesを実行し、可視化する

ここからCodespecesに戻ります！
Sample Appを実行するために、`backend/src/config/console_access_settings.yaml.sample`の`.sample`を除き、それぞれプロジェクトに紐づいた設定値を入力します。


:::note info
console_endpointとportal_authorization_endpointはそれぞれ、AITRIOS Developer SiteのPortal / Console Endpoint Informationを参考に取得してください
console_endpoint = Console Endopoint、portal_authorization_endpoint = Portal Endpointです。
また、client_id、client_scretについては[Get Started 3.6.2. AITRIOSにアクセスするためのクライアントを取得する](https://developer.aitrios.sony-semicon.com/edge-ai-sensing/documents/get-started)を参考にしてください。
:::

![codespaces_config_yaml.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/a836722c-5ee8-00a4-8965-ada650e6e1a5.png)

ターミナル上で`docker compose up -d`を実行します。

![docker_compose_up.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/cfccb3c2-894d-0a18-9f16-ed6026261b85.png)

![codespaces_port.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/48ac2b5d-20b0-c70d-93ff-ef68e251f04b.png)

dockerが立ち上がったら、ポートをクリックし、5000番の表示範囲を右クリック→Portの表示範囲→Publicに変更してください。

Publicに変更したら、右下に出ているダイアログからブラウザで開くを押してください。
もしくはPort上の3000番の地球マークでもよいです。

![docker_compose_up_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/4b222cf8-dd93-8337-caa5-32825f715ac6.png)

別タブでSampleAppが開くはずです！！！

まずはデバイスを選択しましょう。

![select_device.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/e341edd6-c9bd-d44b-2534-bba53b1992c4.png)


次にAIモデルを選択しましょう。
今回は1つしかデプロイしていないので、選択肢は1つしかありません。

![select_ai_model.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/a7ecbb77-360d-c593-cdf3-1ffdc28f2aba.png)


次にCommandParameterを設定しましょう。
既にBindしているので、あらかじめ入力されていましたが、こちらでParameterの値を手動で変更することもできます。
変更した場合は下のBind Command Parameterを押してください。

![set_comparam.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/4d2ade87-151e-6f8e-02ec-0c9f1419c430.png)

Start Infrenceを押しましょう。
少し待つと、右側に推論結果が出るはずです！！！
出ない場合はDocker Composeを再度立ち上げたり、Command Parameterの`score_threshold`を下げてみると出てくるかもしれません。

![visualize_keypoint_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/711e62c4-8f24-ded0-868e-d8137fe3a112.png)

Deserializeされた推論結果も見ることができます。

![visualize_keypoint_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/8304a266-2afa-6c9f-1154-3b81edc470ca.png)

以外と近くでも検出されることが分かります。

![visualize_keypoint_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3724589/a6ff67e2-f7f1-1225-a1d3-b707a0ab5403.png)

以上でサンプルアプリケーションを触ってみたの記事は終わりです。
お付き合いいただきありがとうございました。

## 困った時は
もし、記事の途中でうまくいかなかった場合は、気軽にこの記事にコメントいただいたり、以下のサポートのページもご覧ください。  
コメントのお返事にはお時間を頂く可能性もありますがご了承ください。
 
- [Support (FAQ)](
https://developer.aitrios.sony-semicon.com/edge-ai-sensing/support)
 
また、記事の内容以外で AITRIOS についてお困りごとなどあれば以下よりお問い合わせください。
- [Contact Us](
https://developer.aitrios.sony-semicon.com/edge-ai-sensing/contact-us)


## さいごに

今回はAITRIOSのDeveloper Siteで公開されているサンプルアプリケーションの一部を触ってみました。
AITRIOSではこれらのサンプルアプリケーションのソースコードもGitHub上で公開しているので、このアプリケーションからオリジナルのアプリケーションも比較的簡単に作れると思います。
ぜひ作ってみてください！そしてQiitaに投稿してください。

長い記事となりましたが改めて、見ていただきありがとうございました！