AI・機械学習ライブラリを使ったWebアプリでワクワク体験！ / Qiita Night～AI、機械学習 / 20231201

Slide 1

Slide 1 text

2023年12月1日 (金) Qiita Night～AI、機械学習 @オンライン豊田陽介（） @youtoy AI・機械学習ライブラリを使ったWebアプリでワクワク体験！

Slide 2

Slide 2 text

自己紹介豊田陽介（） @youtoy ・IT系イベント主催、登壇や運営なども・モノ作り系のイベントに作品出展・機械学習・IoTの書籍を出版・ワークショップ講師（大人／子ども向け）・ Microsoft MVP（2021/10 から）プライベートでの活動 IoT工作の本（共著）機械学習の本（単著）

Slide 3

Slide 3 text

AI・機械学習を使って自分がやっていること

Slide 4

Slide 4 text

AI・機械学習を使った体験型コンテンツの一つ光学迷彩・透明マントを体験できるWebアプリ

Slide 5

Slide 5 text

紹介したWebアプリの仕組みの話

Slide 6

Slide 6 text

AI・機械学習に関する部分 Googleさん提供の「MediaPipe（の JavaScript版）」 ⇒ブラウザ／PCアプリ／モバイル／エッジデバイス向け　などといった、様々な環境で利用可能

Slide 7

Slide 7 text

MediaPipeでできること（画像系の一部）顔のキーポイント検出姿勢推定手のキーポイント／ジェスチャー検出

Slide 8

Slide 8 text

公式ページでデモを簡単に体験できる ※ CodePen のページでコードサンプルを見ることもできる

Slide 9

Slide 9 text

利用しているライブラリとおおまかな流れ処理の流れ両手を認識背景取得映像の一部を背景画像に利用したライブラリ・Googleさんが提供するAI・機械学習　ライブラリ ※ 今回は手を対象にしたものを利用・高速・高精度なキーポイント検出など・Python版やスマホ向けのものも・JavaScript の描画ライブラリ・Canvas API などが扱いやすくなる・便利な関連ライブラリも多数・2Dだけでなく3Dも ▼ MediaPipe（JavaScript版） ▼ p5.js

Slide 10

Slide 10 text

タイトルにある「ワクワク」の話〜オンライン編〜

Slide 11

Slide 11 text

X（旧Twitter）にポスト日本国内だけでなく、海外の方からの反応・コメントも！

Slide 12

Slide 12 text

英語圏以外の方からの引用コメント

Slide 13

Slide 13 text

DeepLにコピペして翻訳

Slide 14

Slide 14 text

何が起こっているかが見た目だけで伝わる ↓ 言語を問わず伝わる

Slide 15

Slide 15 text

SF映画・アニメの世界を感じてもらえたかも！？他に、攻殻機動隊関連のキーワードなどを含むポストも

Slide 16

Slide 16 text

ポストに対する反響

Slide 17

Slide 17 text

タイトルにある「ワクワク」の話〜オフライン編〜

Slide 18

Slide 18 text

2023年11月にモノ作り系イベントで展示

Slide 19

Slide 19 text

来場した方に体験いただける展示 IoT系の技術コミュニティのメンバーと一緒のブースにて

Slide 20

Slide 20 text

大人の方にも楽しんでいただけて

Slide 21

Slide 21 text

親子連れのお子さんにも楽しんでもらえた！

Slide 22

Slide 22 text

サクッと体験できて説明ほぼ不要の内容で展示イベントでも大活躍

Slide 23

Slide 23 text

分かりやすい出力との組み合わせ AI・機械学習を使った仕組みを入力に用いる ⇒出力で「描画」以外にも「光る」「音が鳴る」　「物体が動く」なども組み合わせやすい PC （Chromo・マイク）ロボットトイの動き BLE 音・声音の分類（モデルを自前で作成）と組みわせた事例

Slide 24

Slide 24 text

他の事例も含めてQiitaの記事にアドベントカレンダー 12/1分の記事として投稿