AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2

Transcript

1. 2024年7月5日 (金) 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2 豊田陽介（ ） @youtoy AIを活用したWebアプリのプロトタイプを作って コンテストや展示に出してみた話
2. 自己紹介 豊田陽介（ ） @youtoy ▶ IT系イベント主催、 　 登壇や運営なども ▶ 機械学習・IoT関連 　 の書籍を出版 ▶ モノ作り系のコンテストに応募したり 　 展示イベントに出展したりも 　（ヒーローズ・リーグ、Maker Faire等）　　 プライベートでの活動 ▶ ガジェット ▶ 描画系／IoT／AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きなもの・技術など
3. この後にデモする 作品を作った動機
4. 手軽に面白いことをしたい！ （SF・🎮ゲームの世界的な方向で）
5. ブラウザで動くAI・機械学習を使ったWebアプリ 光学迷彩・透明マント のような表現
6. 利用した技術と処理の流れ 処理の流れと素材の利用箇所 両手を認識 背景取得 映像の一部を 背景画像に 利用した技術 【MediaPipe】 ・Googleが提供する仕組み 　のJavaScript版の一つ ・高速・高精度な手の認識 【p5.js】 ・JavaScript の描画ライブラリ ・Canvas API が扱いやすくなる ・便利な関連ライブラリも多数 ・2Dだけでなく3Dも p5.js p5.js MediaPipe
7. 利用時の流れなどを示した動画
8. 作品を自分以外の人に 体験してもらう／見てもらう
9. 展示イベントに作品を出してみた IoT系の技術コミュニティ 「IoTLT」のメンバーで 一緒に出展 自分の作品展示
10. 子どもから大人まで様々な方に楽しんでもらえた
11. 作ったものを楽しそうに 体験してもらえるのは嬉しい！
12. モノ作り／作品作りを 楽しむお祭りに参加してみる
13. 1つオススメしたい内容「ヒーローズ・リーグ」
14. 作ったものを「とりあえず」応募してみる 「作り込もう！」とか気負いすぎず、まずは参加してみる 参加者も運営側も、みんなが応募した作品を楽しんでる
15. 様々な人との 作品作りを通じた つながりが！
16. 【時間があればちょっと紹介】 大阪での モノ作り系展示イベント
17. 楽しそうなので気軽に見に行ってみると良さそう モノ作り系の展示イベント 今週末！！
18. 【時間があればちょっと紹介】 MediaPipeについて
19. MediaPipeでできること（画像系の一部） 顔のキーポイント検出 姿勢推定 手のキーポイント／ ジェスチャー検出
20. 公式ページでデモを簡単に体験できる ※ CodePen のページでコードサンプルを見ることもできる
21. 終わり！