M5Stack

深層学習×画像処理×M5Stackでアバターアプリを作る -AIアプリ開発チュートリアル-

深層学習×画像処理×M5Stack -AIアプリ開発チュートリアル-

こんにちは。

フクロウ大好きエンジニアの”はやぶさ”@Cpp_Learningです。

最近、M5Stack入門したので、色々なアプリを作って楽しんでいます。

M5Stack
【M5Stack入門】初心者におすすめしたい情報まとめこんにちは。 現役エンジニアの”はやぶさ”@Cpp_Learningです。 先日、Maker Faire Tokyoや趣味T...

また、『深層学習 × 画像処理』も大好きなので、本ブログ(はやぶさの技術ノート)で情報発信しています。

ソーベルフィルタ
【深層学習入門】画像処理の基礎(画素操作)からCNN設計まで画像処理の基礎(画素操作)から深層学習のCNN設計までカバーした記事です。画像処理にはOpenCVとPythonを使用しました。画像処理入門、深層学習入門、どちらも取り組みたい人におすすめの記事です。...
ONNX RuntimeとSSDでリアルタイム物体検出
TensorFlowの学習済みモデルを変換してONNXRuntimeで物体検出こんにちは。 コンピュータビジョン(『ロボットの眼』開発)が専門の”はやぶさ”@Cpp_Learningです。 前回『ONN...

など

今回は、自分の大好きなものを組み合わて…

『深層学習 × 画像処理 × M5Stack』でアバターアプリを作りました。

アバターアプリを作るモチベーション

我が家には、フクロウの”くるる”ちゃん@kururu_owlが住んでいます。

駆け出しエンジニアのフクロウ

好奇心旺盛な3歳児の行動は、休日ずーーっと見ていても飽きない(*・ω・)ノ♪

あっちへ行ったり、こっちへ飛んだり…普段は大人しいけどスイッチが入るとアクティブに!

はやぶさ
はやぶさ
どっちに向かって移動した?隣の部屋かな?

予測不可能な”くるる”ちゃんの行動が可愛らしい!

カメラで撮影した動物の動きに合わせてアバター(イラスト)が動いたら可愛らしいし、ちょっとした行動監視にも使えそうです。

アバターアプリのイメージ
【M5Stack】深層学習による物体検出を用いたアバターアプリ

…面白そうなので作ることにしました!以降から開発手順を解説します。

アバターアプリの要素技術

最初に「アバターアプリ」の要素技術を検討します。

「アバターアプリ」の要素技術
  1. カメラ画像からフクロウを検出する技術
  2. フクロウの座標データを送信する技術
  3. アバター(イラスト)を動かす画像処理技術

深層学習による物体検出

❶フクロウ検出については、深層学習による物体検出が使えそうです。

PytorchとMobileNet SSDでリアルタイム物体検出
PytorchでMobileNet SSDによるリアルタイム物体検出
PyTorchでMobileNet SSDによるリアルタイム物体検出深層学習フレームワークPytorchを使い、ディープラーニングによる物体検出の記事を書きました。物体検出手法にはいくつか種類がありますが、今回はMobileNetベースSSDによる『リアルタイム物体検出』を行いました。...
ChainerCVとYoloでリアルタイム物体検出
ChainerCVとYoloでリアルタイム物体検出
ChainerCVとYoloで『カメラ・動画対応!リアルタイム物体検出ソフト』を作るChainerファミリ一つChainerCVのYoloサンプルソースをカメラ・動画に対応できるよう改造した「リアルタイム物体検出ソフト」を開発した。その開発手順を紹介します。...
MXNetで物体検出 -Yolo, SSD, Faster-RCNNモデル対応-
MXnetとGluonで物体検出ソフトを作る
MXNetで『カメラ・動画対応!物体検出ソフト』を作った -Yolo, SSD, Faster-RCNNモデル対応-こんにちは。 コンピュータビジョン(『ロボットの眼』開発)が専門の”はやぶさ”@Cpp_Learningです。 『深層学習に...

自分の好きな深層学習フレームワークを使えば良いです。

今回は、実験などで扱いやすい易いコードに仕上げた『MXNetの物体検出ソフト』を採用します。

M5StackとPCのUDP通信

❷フクロウの座標データ送信については、以前トライしたUDP通信が使えそうです。

M5StackとスマホのUDP通信
M5Stackでスマホのセンサ値を取得
【M5Stack】無線通信でスマホの各センサ値を取得する -加速度・ジャイロ・GPSまるっとGET-M5Stackとスマートフォン(iPhone/Android)を無線通信(UDP)で接続して、スマホの各センサ値(加速度・ジャイロ・GPSなど)を取得する汎用的なアプリを作りました。アプリの使い方やソースコードを公開するので、自由な発想で楽しんでほしいです。...
M5StackとPCのUDP通信
M5Stack(Arduino)とPC(Python)でUDP通信
M5Stack(Arduino)とPC(Python)でUDP通信する方法 -雛形ソースコードあり-M5Stack(Arduino)とPC(Python)でUDP通信する雛形ソースコードを公開しました。「深層学習などの負荷が大きい演算はPythonにやらせて、演算結果をM5Stackに送信して、何かを制御する」などの応用アプリを作るときの参考になれば嬉しいです。...

通信環境などを考慮して、通信方式を決めても良いと思います。

今回は「ノートPC + Webカメラで物体検出」⇒「座標データをM5Stackに送信」を実践します。

画像処理によるアニメーション

➌アバター(イラスト)を動かす画像処理については、私の専門分野です。本ブログで「画像処理チュートリアル」をいくつか公開しています。

pyxelでレトロゲームを作ろう Day1 -画像の扱い方-
Pyxelでレトロゲームを作る
【Pyxel】Pythonでレトロゲームを作ろう! Day 1 -画像の扱い方-こんにちは! 前回こんな記事を書きました↓ https://cpp-learning.com/object-...
Processingでオリジナルビデオを作ろう
Processing
【Processing入門】画像処理プログラミングでプロモーションビデオ作成教育用途やデジタルアートなど様々な用途があるプログラミング言語Processingの入門チュートリアルを作りました。オリジナル動画を作るためのサンプルコードも公開しています。...
M5Stackで画像処理 -静止画の表示から動画作成まで-
M5Stackで画像処理 -静止画表示から動画作成まで-
M5Stackで画像処理 -静止画の表示から動画作成まで-M5Stackで画像処理をするためのチュートリアル記事を書きました。静止画の表示からオリジナル動画(アニメーション)作成まで説明します。初心者にも優しいソースコード付きの解説です。ご参考までに...

『M5Stackでアニメーションを作成するチュートリアル』も公開しています。

つまり、『深層学習 × 画像処理 × M5Stack』によるアバターアプリを開発するための要素技術は全て、本ブログ(はやぶさの技術ノート)で公開しています(*・ω・)ノ♪

開発したいアプリが決まったら、まず最初に”そのアプリ”を実現するための要素技術を検討します。

  • 習得済みの技術で実現できるか?
  • どの技術を組み合わせれば良いか?
  • どんな技術を新規に習得する必要があるか?

など、自分のやりたいことを実現するために、多くの技術を習得しましょう!

スポンサーリンク

実践!深層学習×画像処理×M5Stackでアバターアプリ開発

開発するアプリのイメージを再確認します。

アバターアプリのイメージ
【M5Stack】深層学習による物体検出を用いたアバターアプリ

『深層学習でフクロウ検出して座標データを送信する”AIアプリ”』

『座標データを受信してアバター(イラスト)を動かす”画像処理アプリ”』

以上の二つのアプリを開発する必要があります。

また、座標データ通信用のネットワークも構築する必要があります。

本記事では、以下のネットワークを構築してアプリの動作確認を行いました。

ネットワークやIPアドレス

ホームルータやスマホ(テザリング)などをアクセスポイントとしたネットワークを構築し、UDP通信で座標データをやり取りします。

深層学習で物体検出して座標データを送信する”AIアプリ”

最初に『深層学習でフクロウ検出して座標データ送信する”AIアプリ”』のソースコードを紹介します。

既に説明した通りですが、以下の2つの記事で紹介したソースコードを組み合わせて、AIアプリを作成しました。

MXNetで物体検出 -Yolo, SSD, Faster-RCNNモデル対応-
MXnetとGluonで物体検出ソフトを作る
MXNetで『カメラ・動画対応!物体検出ソフト』を作った -Yolo, SSD, Faster-RCNNモデル対応-こんにちは。 コンピュータビジョン(『ロボットの眼』開発)が専門の”はやぶさ”@Cpp_Learningです。 『深層学習に...
M5StackとPCのUDP通信
M5Stack(Arduino)とPC(Python)でUDP通信
M5Stack(Arduino)とPC(Python)でUDP通信する方法 -雛形ソースコードあり-M5Stack(Arduino)とPC(Python)でUDP通信する雛形ソースコードを公開しました。「深層学習などの負荷が大きい演算はPythonにやらせて、演算結果をM5Stackに送信して、何かを制御する」などの応用アプリを作るときの参考になれば嬉しいです。...

「MXNetの物体検出ソフト」をベースに「UDP通信(送信用)コード」を追記しています。

ポイントは以下の通りです。

113~127行目の追記コード

  • ”bird”を検出したときのみM5Stackにx,y座標を送信
  • M5Stackの画面サイズに合わせてx,y座標をリサイズ
  • 送信データ(クラス名とx,y座標)をJSONフォーマットにひとまとめ
  • M5Stackのアドレスとポートを指定して送信

座標データを受信してアバター(イラスト)を動かす”画像処理アプリ”

次に『座標データを受信してアバター(イラスト)を動かす”画像処理アプリ”』のソースコードを紹介します。

既に説明した通りですが、以下の2つの記事で紹介したソースコードを組み合わせて、画像処理アプリを作成しました。

M5Stackで画像処理 -静止画の表示から動画作成まで-
M5Stackで画像処理 -静止画表示から動画作成まで-
M5Stackで画像処理 -静止画の表示から動画作成まで-M5Stackで画像処理をするためのチュートリアル記事を書きました。静止画の表示からオリジナル動画(アニメーション)作成まで説明します。初心者にも優しいソースコード付きの解説です。ご参考までに...
M5StackとスマホのUDP通信
M5Stackでスマホのセンサ値を取得
【M5Stack】無線通信でスマホの各センサ値を取得する -加速度・ジャイロ・GPSまるっとGET-M5Stackとスマートフォン(iPhone/Android)を無線通信(UDP)で接続して、スマホの各センサ値(加速度・ジャイロ・GPSなど)を取得する汎用的なアプリを作りました。アプリの使い方やソースコードを公開するので、自由な発想で楽しんでほしいです。...

「M5Stackで画像処理(動画編)のコード」をベースに「UDP通信(JSONフォーマット受信用)コード」を追記しています。

ポイントは以下の通りです。

UDP/JSON/画像処理(アバター描画)について

  • UDP通信で座標データ(JSONフォーマット)を受信
  • ArduinoJSONでJSONフォーマットを扱う
  • 受信したx,y座標がM5StackのWindowサイズ(320×240)に収まらない場合は画面の中心座標をx,yに代入
  • drawJpgFile関数でSDカードに保存したアバター(JPGファイル)をx,y座標を指定して描画
  • 受信データ(クラス名とx,y座標)を画面左下に表示

深層学習×画像処理×M5Stackによるアバターアプリ動作手順

以下の手順で『深層学習×画像処理×M5Stackによるアバターアプリ』を楽しめます。

【アバターアプリ動作手順】

  1. 「画像処理アプリ」をインストールしたM5Stackの電源ON
  2. M5Stackが自動でネットワークに接続され、座標データ受信待ちになる
  3. 「AIアプリ」をPCから起動する
  4. ”くるる”ちゃん(bird)をWebカメラで撮影する
  5. M5Stackに表示されたアバター(イラスト)が”くるる”ちゃんの座標に合わせて移動

実際に”くるる”ちゃんの映像を使い『アバターアプリ』で遊んでみました。

現実世界の”くるる”ちゃんに合わせてアバター(イラスト)が動くの面白し、可愛い!

深層学習×画像処理×M5Stackによるアバターアプリの改良ポイント

本アプリをベースに自分好みのアプリを作ってみましょう!改良ポイント紹介しますね。

ハードウェア選定

今回は「AIアプリ」をノートPC、「画像処理アプリ」をM5Stackで動かしましたが…

「AIアプリ」Jetson Nano「画像処理アプリ」Raspberry Pi(ラズパイ)で動かすなど、自分のやりたいことに合わせて、好きなディバイスを使ってください。

組込みAI向けエッジディバイスJetsonシリーズ
名刺サイズの汎用PCラズパイのスターターセット

AIアプリ(深層学習による物体検出アプリ)改良

今回は『MXNetの物体検出ソフト』をベースにしました。

本記事で公開している動画では「MobileNetV1-SSDモデル」を使って、物体検出(フクロウ検出)を実現しています。

Model Zoo(モデルの動物園)のObject Detectionカテゴリーで公開しているモデル(Faster-RCNN, YOLO-v3など)も使えるので、処理速度や検出精度を考慮して、目的に合うモデルを使ってください。

また、’bird’以外に‘person’, ‘car’, ‘cat’, ‘dog’なども検出できます。ソースコードの以下の部分を書き換えて、好きな対象の座標データを抽出してください。

もし、Model Zooのモデルで満足できない場合は、独自モデルを作成する必要があります。

検出したい対象の画像を大量に用意して、MXNet・Tensorflow・Pytorch・Chainerなどの深層学習フレームワークを使い、学習(モデル作成)に挑戦してみて下さい。

画像処理アプリ(M5Stackアプリ)改良

今回はフクロウの”くるる”ちゃん@kururu_owlを対象としたアバターアプリなので、以下のイラストをSDカードに保存して、LCDに描画させました。

サイズ90×70ピクセルのJPGファイル
くるる

 

 

 

イラストを変更して、自分好みのアバターアプリにして下さい。

また、以下の記事で紹介した通り、M5Stack用の拡張モジュールGroveセンサがあります。

M5Stack
【M5Stack入門】初心者におすすめしたい情報まとめこんにちは。 現役エンジニアの”はやぶさ”@Cpp_Learningです。 先日、Maker Faire Tokyoや趣味T...

モーターを駆動させたり、LEDを光らせたり…アバターの動きに合わせて何かを制御するのも楽しいと思いますよ(*・ω・)ノ♪

本記事で公開しているソースコード(アプリ)は改良OKです。自由な発想でAIアプリ開発を楽しんで頂けたら、とても嬉しいです。

AIアプリ開発チュートリアルまとめ

本記事で「AIアプリ開発チュートリアル」を書きました。本記事を読むことで以下のことを学べたと思います。

【本記事で学べる内容】

  • 【AI】深層学習による物体検出を利用したアプリの例
  • 【IoT】UDP通信でデータをやり取りする方法
  • 【画像処理】好きなイラストを自由に移動させる画像処理
  • 【VR】リアルな動物とバーチャルなアバターをリンクさせる方法
  • 【マイコン】M5Stack(Arduino)アプリ開発
  • 【プログラミング】自分のやりたいことを実現するためのヒント
  • インターネット未使用なので、正確には【IoT】一歩手前
  • 動物(人含む)の動きに合わせてアバターが動くので、【VR】ではなく【インターフェース】という表現の方が適切かもしれません
はやぶさ
はやぶさ
自分が思いつく限りの面白い技術を、本記事に”ギュッ”と凝縮しました!

Webアプリ以外の「AIアプリ開発チュートリアル」ってあまり無い気がするので、参考になれば嬉しいです。

くるる
くるる
すごーーーく楽しく勉強できました♪

”くるる”ちゃんのように本記事で楽しく勉強してくれる人が一人でもいたら嬉しいです!

はやぶさ
はやぶさ
理系応援ブロガー”はやぶさ”@Cpp_Learningは頑張る理系を応援します!

おまけ -AIアプリ開発のヒントとメッセージ-

時間がある人は、以下の”おまけ”も読んでみてね。

”くるる”ちゃんが考えたAIアプリのアイデア

こんにちは。

くるる
くるる
駆け出しエンジニアの”くるる”だよー

本記事は面白い内容が”ギュッ”と凝縮されてて、しかもアプリを改良するときのポイントまで書いてある!

ノートPCとM5Stackで手軽に試せるので、初期投資も少ない!

くるる
くるる
AIアプリ開発ってもっと敷居の高いものだと思ってたけど…

本記事を参考にすれば”くるる”でもAIアプリ作れそう!!

”くるる”は暑いの苦手だから室温によって行動が違うと思うけど…あまり意識したことないからアバターで自分の行動を客観視してみたい!

M5Stackに温度センサ取り付けて、室温とアバターの座標から相関関係を~♪

くるる

 

はやぶさ
はやぶさ
スイッチ入った”くるる”ちゃんが黙々と作業してる姿が可愛い

実用的なアプリ・面白いアプリ…作りたいアプリは人それぞれだと思います。

”くるる”ちゃんのように自由な発想で『AIアプリ開発』を楽しんでくれたら嬉しいです!

メッセージ -本ブログのサポートについて-

本記事は、もし自分が技術書典(技術同人誌即売会)などで本を出すなら『深層学習×画像処理×M5Stack -AIアプリ開発チュートリアル-』というタイトルで書きたい!と想った内容を具現化したものです。

ただ、お金のない学生さんも含め、多くの人に『AIアプリ開発』を楽しんでもらいたい!という想いから、無料公開にしました。

(本は無理でも有料noteで公開したら、Jetson Nanoの購入資金くらい稼げたかな?とか考えたりもするけど…)

もし、本チュートリアルが参考になり、ブログ『はやぶさの技術ノート』をサポートしたいという人がいれば、以下の方法でサポートして頂けると嬉しいです!

【本ブログのサポート方法】

  • 本ブログの記事をSNS(Twitterやfacebookなど)でシェア
  • 本記事を参考に『アプリ開発』を実践したら、参考資料で本記事を紹介

記事に対して反応があると、次も良い記事書きたいな!というモチベーションに繋がります。気軽にシェアして頂けると嬉しいです。

また、本記事が拡散することで、以下のような『技術で繋がる輪』ができたら、最高に嬉しいと考えています。

  1. 本記事をシェア
  2. 多くの人が『AIアプリ開発』に興味をもつ
  3. 各自が『AIアプリ』に関するアイデアやソースコードを公開(シェア)
  4. 誰かの『AIアプリ』が新たなアイデアやソースコードの創出に繋がる

多くの人が『AIアプリ』の情報を公開することで、ひとりの人間では思いつかなかった素晴らしい『AIアプリ』が誕生するかもしれません。

名も知らない人同士が『技術で繋がり』イノベーションが起こるかもしれません。

想像するだけでワクワクしますね!もし『AIアプリ』を作ったら、是非”はやぶさ”@Cpp_Learningに自慢してくださいね。

皆様が楽しく『AIアプリ開発』を実践してくれたら、最高に嬉しいです。

(完)

LINEスタンプ配信中!

フクロウのLINEスタンプ

当サイトのマスコットキャラクター

「フクロウのくるる」が

LINEスタンプになりました!

勉強で疲れたあなたに癒しをお届け☆

お迎え待ってます(*・ω・)ノ♪

今すぐお迎えする

40個セットがたったの50コインとお得です