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
200
ブラウザで 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)
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
35
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
38
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
90
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.5k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
110
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
640
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.4k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
5.1k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
1
2.7k
Other Decks in Technology
See All in Technology
KCD Brazil '25: Enabling Developers with Dapr & Backstage
salaboy
1
120
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
260
アプリケーション固有の「ロジックの脆弱性」を防ぐ開発者のためのセキュリティ観点
flatt_security
32
11k
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
9
1.2k
大規模アジャイル開発のリアル!コミュニケーション×進捗管理×高品質
findy_eventslides
0
530
製造業の会計システムをDDDで開発した話
caddi_eng
3
960
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
150
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
モノリスの認知負荷に立ち向かう、コードの所有者という思想と現実
kzkmaeda
0
110
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
280
大規模サービスにおける カスケード障害
takumiogawa
1
210
Agile TPIを活用した品質改善事例
tomasagi
0
310
Featured
See All Featured
It's Worth the Effort
3n
184
28k
A Philosophy of Restraint
colly
203
16k
The Invisible Side of Design
smashingmag
299
50k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Cost Of JavaScript in 2023
addyosmani
48
7.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
320
Building Applications with DynamoDB
mza
94
6.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
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 を 組み合わせて実装)
大人から子どもまでを対象に体験展示 音が鳴るものを手に持てれば、こんな小さなお子さんでも
終わり!