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
180
ブラウザで 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.5k
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
AIエージェント入門
minorun365
PRO
4
860
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
120
分解して理解する Aspire
nenonaninu
2
640
ソフトウェアエンジニアと仕事するときに知っておいたほうが良いこと / Key points for working with software engineers
pinkumohikan
1
130
利用終了したドメイン名の最強終活〜観測環境を育てて、分析・供養している件〜 / The Ultimate End-of-Life Preparation for Discontinued Domain Names
nttcom
2
360
OSS構成管理ツールCMDBuildを使ったAWSリソース管理の自動化
satorufunai
0
390
内製化を加速させるlaC活用術
nrinetcom
PRO
2
100
日経のデータベース事業とElasticsearch
hinatades
PRO
0
190
Cloud Spanner 導入で実現した快適な開発と運用について
colopl
1
1k
AIエージェント元年
shukob
0
140
Oracle Cloud Infrastructure:2025年2月度サービス・アップデート
oracle4engineer
PRO
1
420
Active Directory攻防
cryptopeg
PRO
8
4.9k
Featured
See All Featured
Facilitating Awesome Meetings
lara
52
6.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Designing Experiences People Love
moore
140
23k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
BBQ
matthewcrist
87
9.5k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Into the Great Unknown - MozCon
thekraken
35
1.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 を 組み合わせて実装)
大人から子どもまでを対象に体験展示 音が鳴るものを手に持てれば、こんな小さなお子さんでも
終わり!