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
240
ブラウザで 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)
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
you
PRO
0
130
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
you
PRO
0
59
Node−RED で Ollama を使ったローカルLLM(node-red-contrib-ollamaを利用) / ビジュアルプログラミングIoTLT vol.20
you
PRO
0
180
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
you
PRO
0
110
ChatGPT からモックサーバー宛(Beeceptor宛)の HTTPリクエストを試す / IoTLT 202504
you
PRO
0
100
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会(2025年3月)
you
PRO
0
53
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
you
PRO
0
57
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
110
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
2.6k
Other Decks in Technology
See All in Technology
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
300
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
230
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1.9k
Geminiとv0による高速プロトタイピング
shinya337
1
270
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
200
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
270
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
120
React開発にStorybookとCopilotを導入して、爆速でUIを編集・確認する方法
yu_kod
1
270
OPENLOGI Company Profile
hr01
0
67k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Music & Morning Musume
bryan
46
6.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Scaling GitHub
holman
460
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
A better future with KSS
kneath
238
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
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 を 組み合わせて実装)
大人から子どもまでを対象に体験展示 音が鳴るものを手に持てれば、こんな小さなお子さんでも
終わり!