Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの...
Search
you(@youtoy)
PRO
October 08, 2024
Technology
0
120
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you(@youtoy)
PRO
October 08, 2024
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
55
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
260
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
64
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
480
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
230
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2.5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
450
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
3
2.5k
Other Decks in Technology
See All in Technology
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
Fargateを使った研修の話
takesection
0
160
徹底比較!HA Kubernetes ClusterにおけるControl Plane LoadBalancerの選択肢
logica0419
2
140
家具家電付アパートの冷蔵庫をIoT化してみた!
scbc1167
0
140
ライブラリでしかお目にかかれない珍しい実装
mikanichinose
2
270
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
2.6k
mikroBus HAT を用いた簡易ベアメタル開発
tarotene
0
230
組み込みLinuxの時系列
puhitaku
3
950
運用イベント対応への生成AIの活用 with Failure Analysis Assistant
suzukyz
0
190
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.6k
全社横断データ活用推進のコツと その負債とのつき合い方
masatoshi0205
0
160
利きプロセススケジューラ
sat
PRO
4
2.5k
Featured
See All Featured
Fireside Chat
paigeccino
33
3k
Thoughts on Productivity
jonyablonski
67
4.3k
Happy Clients
brianwarren
97
6.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
15
2k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Ruby is Unlike a Banana
tanoku
96
11k
Designing for humans not robots
tammielis
249
25k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Measuring & Analyzing Core Web Vitals
bluesmoon
2
69
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Transcript
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 を 組み合わせて実装)
大人から子どもまでを対象に体験展示 音が鳴るものを手に持てれば、こんな小さなお子さんでも
終わり!