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
170
ブラウザで 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)
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
33
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
83
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.4k
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
94
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
610
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
2.4k
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
5k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
1
2.6k
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.6k
Other Decks in Technology
See All in Technology
EDRの検知の仕組みと検知回避について
chayakonanaika
2
270
エンジニアが加速させるプロダクトディスカバリー 〜最速で価値ある機能を見つける方法〜 / product discovery accelerated by engineers
rince
4
490
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
770
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
370
生成 AI プロダクトを育てる技術 〜データ品質向上による継続的な価値創出の実践〜
icoxfog417
PRO
5
1.8k
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
260
OpenID Connect for Identity Assurance の概要と翻訳版のご紹介 / 20250219-BizDay17-OIDC4IDA-Intro
oidfj
0
330
現場で役立つAPIデザイン
nagix
35
13k
クラウドサービス事業者におけるOSS
tagomoris
3
950
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
63k
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
130
RSNA2024振り返り
nanachi
0
620
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The World Runs on Bad Software
bkeepers
PRO
67
11k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
The Invisible Side of Design
smashingmag
299
50k
Facilitating Awesome Meetings
lara
52
6.2k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
500
Speed Design
sergeychernyshev
27
800
Raft: Consensus for Rubyists
vanstee
137
6.8k
How to Ace a Technical Interview
jacobian
276
23k
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 を 組み合わせて実装)
大人から子どもまでを対象に体験展示 音が鳴るものを手に持てれば、こんな小さなお子さんでも
終わり!