まつまる どうも、まつまるです。前回の記事で、Flutterで骨格推定するための準備ができたので、今回は実践していきます。
実装するためには準備が必要なので、前回の記事もご覧ください。
完成動画
🎞ギャラリーから画像を取得
👀画像を解析して体の部位を推定
📝推定した部位を画像の上にプロット
肝心の骨格推定はものの数行で実行できるので、拍子抜けするかもしれません。推定したデータの処理が僕にとっては1番の障害でした。
今回参考している記事はこちらです。
全体像
まずは全体像を眺めてください。
画面はAppBarとStackとFloatingActionButtonで構成されています。Stackの中にあるrenderKeypointsに体の部位をプロットしている●が入っており、画像に重ね合わせています。
FAB（FloatingActionButton）を押したらギャラリーの画像を取得しにいきます。下はワークフローのイメージ図です。
さあ、それでは順々に説明しておきます。
モデルの読み込み
ここはloadModelについてです。
モデルを使うためには最初にロードする必要があります。これはおまじないと思ってください。モデルのロードに失敗したら“Failed to load model”がプリントされます。
ギャラリーから画像を選択
ここはimageFromGalleryについてです。
FloatingActionButtonをプッシュしたら呼び出されます。image pickerを使って画像を取得して、predictImageに画像を渡します。predictImageは次で説明します。
画像情報の取得
predictImageでは大きく２つのことをしています。
- 骨格推定モデルに画像を渡す
- 画像の縦横の大きさを取得
await poseNet(image)を実行することで骨格推定をしてくれます。poseNetの詳細については次に紹介します。
FileImageでは画像の縦と横の大きさを取得しています。
モデルを実行
ここはposeNetについてです。
recognitionsに推定結果が入ります。
print(recognitions)してみると、各パーツのx,y座標がマップ化されていることが分かります。たった数行でこの結果が出てくるってすごない？ありがて～。
ちなみにkeyと部位の関係は以下のようになっています。参照元はこちら。
| Id | Part |
| 0 | nose |
| 1 | leftEye |
| 2 | rightEye |
| 3 | leftEar |
| 4 | rightEar |
| 5 | leftShoulder |
| 6 | rightShoulder |
| 7 | leftElbow |
| 8 | rightElbow |
| 9 | leftWrist |
| 10 | rightWrist |
| 11 | leftHip |
| 12 | rightHip |
| 13 | leftKnee |
| 14 | rightKnee |
| 15 | leftAnkle |
| 16 | rightAnkle |
推定結果をリサイズ
ここはrenderKeypointsについてです。
renderKeypointsの引数にあるscreenはデバイスのスクリーンサイズを取得して持ってきています。後ほど出てくるので安心してください。
そして、recognitionsに入っている座標と解析した画像のサイズと合うように変換します。
構成画面
構成画面は最初に見てもらったやつです。MediaQueryがデバイスごとのスクリーンサイズを取得をサポートしてくれています。あとは図を見ながら構成しているパーツを確認してみてください。
コード全文
もし、実際に動かしてみたいならコピペしてください。
次は部位と部位を繋ぐ線を表示して、その角度も表示させたいと思っています。
