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・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI...
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
you(@youtoy)
PRO
December 01, 2023
Technology
3k
3
Share
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you(@youtoy)
PRO
December 01, 2023
More Decks by you(@youtoy)
See All by you(@youtoy)
最近の技術系の話題で気になったもの色々(IoT系以外も) / IoTLT 花見予定会(たぶんBBQ) @都立潮風公園バーベキュー広場
you
PRO
1
350
Babylon.js を使って試した色々な内容 / Various things I tried using Babylon.js / Babylon.js 勉強会 vol.5
you
PRO
0
410
イベントで大活躍する電子ペーパー名札を作る(その2) 〜 M5PaperとM5PaperS3 〜 / IoTLT @ JLCPCB オープンハードカンファレンス
you
PRO
0
270
Deno・Bunの標準機能やElysiaJSを使ったWebSocketサーバー実装 / ラーメン屋を貸し切ってLT会! IoTLT 2026新年会
you
PRO
0
350
M5Stack Chain DualKey を UIFlow 2.0 + USB接続で試す / ビジュアルプログラミングIoTLT vol.22
you
PRO
2
220
ローカルLLMをJavaScriptで(少しAIエージェントSDKなどの話も) / 冬のJavaScript祭り @Pleasanter Lounge
you
PRO
0
970
Webの技術で「特殊なゲーム用コントローラーや他デバイスなど」とブラウザを連携させる / HTML5 11th Anniversary
you
PRO
0
110
ブラウザのAPIで Nintendo Switch用の特殊なゲーム用コントローラーを体験型コンテンツに / IoTLT @ストラタシス・ジャパン
you
PRO
0
230
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
990
Other Decks in Technology
See All in Technology
OWASP APTSを眺めてみた
su3158
0
130
[Oracle TechNight#99] 生成AI時代のAI/ML入門 ~ AIとオラクルデータベースの関係 (後半)
oracle4engineer
PRO
3
240
Swift Sequence の便利 API 再発見
treastrain
1
170
サービスの信頼性を高めるため、形骸化した「プロダクションミーティング」を立て直すまでの取り組み
stefafafan
1
250
知ってた?JavaScriptの"正しさ"を検証するテストが5万以上もあること(Test262)
riyaamemiya
1
160
【技術書典20】OpenFOAM(自宅で深める流体解析)流れと熱移動(2)
kamakiri1225
0
380
"うちにはまだ早い"は本当? ─ 小さく始めるPlatform Engineering入門
harukasakihara
4
330
「強制アップデート」か「チームの自律」か?エンタープライズが辿り着いたプラットフォームのハイブリッド運用/cloudnative-kaigi-hybrid-platform-operations
mhrtech
0
140
AIの揺らぎに“コシ”を与える階層化品質設計
ickx
0
270
AIと乗り切った1,500ページ超のヘルプサイト基盤刷新とさらにその先の話
mugi_uno
2
320
Agents CLI と Gemini Enterprise Agent Platform で マルチエージェント開発が楽しくなる!
kaz1437
0
260
Oracle Cloud Infrastructure:2026年4月度サービス・アップデート
oracle4engineer
PRO
0
380
Featured
See All Featured
Marketing to machines
jonoalderson
1
5.2k
Agile Leadership in an Agile Organization
kimpetersen
PRO
0
140
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.3k
The Spectacular Lies of Maps
axbom
PRO
1
730
Building Adaptive Systems
keathley
44
3k
The Curious Case for Waylosing
cassininazir
0
340
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
550
Optimising Largest Contentful Paint
csswizardry
37
3.7k
Building AI with AI
inesmontani
PRO
1
970
GitHub's CSS Performance
jonrohan
1032
470k
Thoughts on Productivity
jonyablonski
76
5.1k
SEO for Brand Visibility & Recognition
aleyda
0
4.5k
Transcript
2023年12月1日 (金) Qiita Night~AI、機械学習 @オンライン 豊田陽介( ) @youtoy AI・機械学習ライブラリを使ったWebアプリで ワクワク体験!
自己紹介 豊田陽介( ) @youtoy ・IT系イベント主催、登壇や運営なども ・モノ作り系のイベントに作品出展 ・機械学習・IoTの書籍を出版 ・ワークショップ講師(大人/子ども向け) ・ Microsoft
MVP(2021/10 から) プライベートでの活動 IoT工作の本 (共著) 機械学習の本 (単著)
AI・機械学習を使って 自分がやっていること
AI・機械学習を使った体験型コンテンツの一つ 光学迷彩・透明マントを 体験できるWebアプリ
紹介したWebアプリの 仕組みの話
AI・機械学習に関する部分 Googleさん提供の「MediaPipe(の JavaScript版)」 ⇒ブラウザ/PCアプリ/モバイル/エッジデバイス向け などといった、様々な環境で利用可能
MediaPipeでできること(画像系の一部) 顔のキーポイント検出 姿勢推定 手のキーポイント/ ジェスチャー検出
公式ページでデモを簡単に体験できる ※ CodePen のページでコードサンプルを見ることもできる
利用しているライブラリとおおまかな流れ 処理の流れ 両手を認識 背景取得 映像の一部を 背景画像に 利用したライブラリ ・Googleさんが提供するAI・機械学習 ライブラリ ※
今回は手を対象にしたものを利用 ・高速・高精度なキーポイント検出など ・Python版やスマホ向けのものも ・JavaScript の描画ライブラリ ・Canvas API などが扱いやすくなる ・便利な関連ライブラリも多数 ・2Dだけでなく3Dも ▼ MediaPipe(JavaScript版) ▼ p5.js
タイトルにある 「ワクワク」の話 〜オンライン編〜
X(旧Twitter)にポスト 日本国内だけでなく、海外の 方からの反応・コメントも!
英語圏以外の方からの引用コメント
DeepLにコピペして翻訳
何が起こっているかが 見た目だけで伝わる ↓ 言語を問わず伝わる
SF映画・アニメの世界を感じてもらえたかも!? 他に、攻殻機動隊関連のキーワード などを含むポストも
ポストに対する反響
タイトルにある 「ワクワク」の話 〜オフライン編〜
2023年11月に モノ作り系イベントで展示
来場した方に体験いただける展示 IoT系の技術コミュニティの メンバーと一緒のブースにて
大人の方にも楽しんでいただけて
親子連れのお子さんにも楽しんでもらえた!
サクッと体験できて 説明ほぼ不要の内容で 展示イベントでも大活躍
分かりやすい出力との組み合わせ AI・機械学習を使った仕組みを入力に用いる ⇒出力で「描画」以外にも「光る」「音が鳴る」 「物体が動く」なども組み合わせやすい PC (Chromo・マイク) ロボットトイの動き BLE 音・声 音の分類(モデルを自前で作成)と組みわせた事例
他の事例も含めてQiitaの記事に アドベントカレンダー 12/1分の記事として投稿
こういった方向でも AI・機械学習を 活用してみませんか?
終わり!