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
you(@youtoy)
PRO
December 01, 2023
Technology
3
2.5k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you(@youtoy)
PRO
December 01, 2023
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
you
PRO
0
51
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
120
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
250
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you
PRO
0
56
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
470
WebHID API で Joy-Con・DUALSHOCK 4 のセンサーをブラウザから利用する / IoTLT vol.109
you
PRO
0
220
UIFlow 2.0 で MQTT をやってみた! / IoTLT vol.108
you
PRO
0
2.4k
UIFlow 2.0 と ATOMS3 の組み合わせで LINE通知を試す / ビジュアルプログラミングIoTLT vol.16
you
PRO
0
430
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
Other Decks in Technology
See All in Technology
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
0
300
端末が簡単にリモートから操作されるデモを通じて ソフトウェアサプライチェーン攻撃対策の重要性を理解しよう
kitaji0306
0
160
バイセルにおけるAI活用の取り組みについて紹介します/Generative AI at BuySell Technologies
kyuns
1
210
Databricksワークショップ - 生成AIとDWH
taka_aki
2
4.5k
現実のRuby/Railsアップグレード
takeyuweb
3
4.8k
Sidekiq vs Solid Queue
willnet
11
7.1k
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
110
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
17
2.9k
クライアントサイドでよく使われる Debounce処理 をサーバサイドで3回実装した話
yoshiori
1
130
都市伝説バスターズ「WebアプリのボトルネックはDBだから言語の性能は関係ない」 - Kaigi on Rails 2024
osyoyu
14
7.9k
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
380
カメラを用いた店内計測におけるオプトインの仕組みの実現 / ai-optin-camera
cyberagentdevelopers
PRO
0
100
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
228
52k
Faster Mobile Websites
deanohume
304
30k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Fireside Chat
paigeccino
32
3k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
How to train your dragon (web standard)
notwaldorf
88
5.6k
Being A Developer After 40
akosma
86
590k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Six Lessons from altMBA
skipperchong
26
3.4k
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・機械学習を 活用してみませんか?
終わり!