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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Teachable Machineを試してみる

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

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

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

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

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

ml5.js ＆ Teachable Machine

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

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

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

もし時間があれば紹介

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

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

終わり！

ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの...