ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」

1. 2024年10月8日 (火) #さくらのAI Meetup vol.4「ブラウザ」@さくらインターネット東京支社 豊田陽介（ ） @youtoy ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話
2. 自己紹介 豊田陽介（ ） @youtoy ▶ IT系イベント主催、 　 登壇や運営なども ▶ 機械学習・IoT関連 　 の書籍を出版 ▶ モノ作りの活動（作品制作、展示） ▶ 子ども向けのIT関連活動 プライベートでの活動 ▶ ガジェット ▶ 描画系／IoT／AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きな技術など
3. AI・機械学習を使って 自分がやっていること （その一例）
4. AI・機械学習を使った体験型コンテンツの試作 光学迷彩・透明マントを 体験できるWebアプリ
5. 試作したWebアプリの活用： 「ワクワクする体験」へ
6. 技術系・モノ作り系イベントでの体験型展示 IoT系の技術コミュニティの メンバーと一緒のブースにて
7. 大人の方にも楽しんでいただけて
8. 親子連れのお子さんにも楽しんでもらえた！
9. 年齢を問わず楽しめる 「ワクワク体験」の入力で AI・機械学習を利用
10. 今日の話は それらの活動で多用している 「ブラウザでのAI・機械学習」
11. WASM・TensorFlow.jsベースの仕組み ・ブラウザでAI・機械学習を扱う 　JavaScript で使えるものの例： 　　・MediaPipe（WebAssembly実装） 　　・ml5.js（TensorFlow.jsベース） 　　・Teachable Machine（TensorFlow.jsベース）
12. 独断と偏見でそれぞれの説明を足してみる MediaPipe ml5.js Teachable Machine ・高速・高精度で様々な 　タイプに対応している 　画像認識 ・音声やテキスト関連の 　処理にも対応 ・Web用以外にも対応 　したクロスプラット 　フォームな仕組み ・画像・音声・テキスト 　に対応した処理 ・使いやすいAPI ・Web上のエディタと 　組み合わせた手軽な 　開発・実行環境も 　活用できる ・ブラウザ上でのマウス 　操作で機械学習モデル 　をお手軽作成 ・画像・音声・ポーズの 　3種に対応 ・モデルを複数の形式で 　書き出し可能
13. どんな感じなのか ↓ 百聞は一見に如かず
14. 「手軽に体験できる」 というのを紹介してみる
15. MediaPipeの公式サイトからデモを開いて試す 手順は Qiita の記事に
16. ml5.jsの公式サイトからデモを開いて試す 手順は Qiita の記事に
17. Teachable Machineを試してみる
18. どんなことができるか 少し紹介 （まずは MediaPipe から）
19. MediaPipeでできること（画像系の一部） 顔のキーポイント検出 手のキーポイント／ ジェスチャー検出 姿勢のキーポイント検出
20. MediaPipeでできること（画像系の一部） 画像セグメンテーション 画像の Embedding （数値ベクトルに変換） オブジェクト検出
21. MediaPipeでできること（テキスト系） Embedding 分類 言語の検出
22. MediaPipeでできること（音声系） Embedding 分類 準備中
23. ml5.js ＆ Teachable Machine
24. 画像・音声・テキストやモデル作成 画像系 音声系 テキスト系 作成した機会学習 モデルを利用 学習と推論
25. 画像・音声・ポーズの3つのプロジェクト
26. 【注意】 MediaPipe と ml5.js は 新旧バージョンあり
27. もし時間があれば紹介
28. Teachable Machine・ml5.jsの組み合わせ 小さなロボット 「toio」を音で動かす （デバイス系API を 　組み合わせて実装）
29. 大人から子どもまでを対象に体験展示 音が鳴るものを手に持てれば、こんな小さなお子さんでも
30. 終わり！