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、機械学習 / 20231201
Search
you(@youtoy)
PRO
December 01, 2023
Technology
3
2.3k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you(@youtoy)
PRO
December 01, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
31
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
340
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
180
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
300
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
89
LINEでのコミュニケーションにマスコットキーホルダーを使ってみる / LINEを使ったLT大会 #5
you
PRO
0
2.4k
イベントで大活躍の電子ペーパー名札 〜M5PaperとUIFlow+α〜 / #ヒーローズリーグ 2023 予選 in 第二部
you
PRO
0
140
Other Decks in Technology
See All in Technology
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
20240717_イケコパ代表Copilot_in_Teams会社でこう使ってます
ponponmikankan
2
430
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
360
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
325
20k
Practical Orchestrator
shlominoach
185
10k
Leading Effective Engineering Teams 2024
addyosmani
3
300
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Become a Pro
speakerdeck
PRO
15
4.8k
Building Applications with DynamoDB
mza
89
5.8k
A better future with KSS
kneath
231
17k
Atom: Resistance is Futile
akmur
261
25k
Automating Front-end Workflow
addyosmani
1362
200k
Bash Introduction
62gerente
607
210k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Ruby is Unlike a Banana
tanoku
96
10k
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・機械学習を 活用してみませんか?
終わり!