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

Slide 1

Slide 1 text

2024年10月8日 (火) #さくらのAI Meetup vol.4「ブラウザ」@さくらインターネット東京支社豊田陽介（） @youtoy ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話

Slide 2

Slide 2 text

自己紹介豊田陽介（） @youtoy ▶ IT系イベント主催、　登壇や運営なども ▶ 機械学習・IoT関連　の書籍を出版 ▶ モノ作りの活動（作品制作、展示） ▶ 子ども向けのIT関連活動プライベートでの活動 ▶ ガジェット ▶ 描画系／IoT／AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きな技術など

Slide 3

Slide 3 text

AI・機械学習を使って自分がやっていること（その一例）

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

試作したWebアプリの活用：「ワクワクする体験」へ

Slide 6

Slide 6 text

技術系・モノ作り系イベントでの体験型展示 IoT系の技術コミュニティのメンバーと一緒のブースにて

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

年齢を問わず楽しめる「ワクワク体験」の入力で AI・機械学習を利用

Slide 10

Slide 10 text

今日の話はそれらの活動で多用している「ブラウザでのAI・機械学習」

Slide 11

Slide 11 text

WASM・TensorFlow.jsベースの仕組み・ブラウザでAI・機械学習を扱う　JavaScript で使えるものの例：　　・MediaPipe（WebAssembly実装）　　・ml5.js（TensorFlow.jsベース）　　・Teachable Machine（TensorFlow.jsベース）

Slide 12

Slide 12 text

独断と偏見でそれぞれの説明を足してみる MediaPipe ml5.js Teachable Machine ・高速・高精度で様々な　タイプに対応している　画像認識・音声やテキスト関連の　処理にも対応・Web用以外にも対応　したクロスプラット　フォームな仕組み・画像・音声・テキスト　に対応した処理・使いやすいAPI ・Web上のエディタと　組み合わせた手軽な　開発・実行環境も　活用できる・ブラウザ上でのマウス　操作で機械学習モデル　をお手軽作成・画像・音声・ポーズの　3種に対応・モデルを複数の形式で　書き出し可能

Slide 13

Slide 13 text

どんな感じなのか ↓ 百聞は一見に如かず

Slide 14

Slide 14 text

「手軽に体験できる」というのを紹介してみる

Slide 15

Slide 15 text

MediaPipeの公式サイトからデモを開いて試す手順は Qiita の記事に

Slide 16

Slide 16 text

ml5.jsの公式サイトからデモを開いて試す手順は Qiita の記事に

Slide 17

Slide 17 text

Teachable Machineを試してみる

Slide 18

Slide 18 text

どんなことができるか少し紹介（まずは MediaPipe から）

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

MediaPipeでできること（画像系の一部）画像セグメンテーション画像の Embedding （数値ベクトルに変換）オブジェクト検出

Slide 21

Slide 21 text

MediaPipeでできること（テキスト系） Embedding 分類言語の検出

Slide 22

Slide 22 text

MediaPipeでできること（音声系） Embedding 分類準備中

Slide 23

Slide 23 text

ml5.js ＆ Teachable Machine

Slide 24

Slide 24 text

画像・音声・テキストやモデル作成画像系音声系テキスト系作成した機会学習モデルを利用学習と推論

Slide 25

Slide 25 text

画像・音声・ポーズの3つのプロジェクト

Slide 26

Slide 26 text

【注意】 MediaPipe と ml5.js は新旧バージョンあり

Slide 27

Slide 27 text

もし時間があれば紹介

Slide 28

Slide 28 text

Teachable Machine・ml5.jsの組み合わせ小さなロボット「toio」を音で動かす（デバイス系API を　組み合わせて実装）

Slide 29

Slide 29 text

大人から子どもまでを対象に体験展示音が鳴るものを手に持てれば、こんな小さなお子さんでも

Slide 30

Slide 30 text

終わり！