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アプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大...
Search
you(@youtoy)
PRO
July 05, 2024
Technology
0
56
AIを活用したWebアプリのプロトタイプを作ってコンテストや展示に出してみた話 / 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2
you(@youtoy)
PRO
July 05, 2024
Tweet
Share
More Decks by you(@youtoy)
See All by you(@youtoy)
ブラウザで AI・機械学習が扱える TensorFlow.js が使われているライブラリなどの話 / #さくらのAI Meetup vol.4「ブラウザ」
you
PRO
0
98
Blynk と Raspberry Pi Pico W で IoT 〜 MQTT・HTTPリクエストの組み合わせも 〜 / IoTLT vol.114
you
PRO
0
230
Babylon.jsと色々なものを組み合わせる:ブラウザのAPIやガジェットや2D描画ライブラリなど / Babylon.js 勉強会 vol.3
you
PRO
0
450
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
410
技術コミュニティの中での生成AI(自身の観測範囲での事例について) / 23 Xmas Talk / 20231209
you
PRO
0
1.5k
AI・機械学習ライブラリを使ったWebアプリでワクワク体験! / Qiita Night~AI、機械学習 / 20231201
you
PRO
3
2.5k
p5.js・p5playを使った体験イベントに参加した子達が手を動かすこと・考えることを楽しんでくれた話 / p5.js勉強会(第九回) / 20231126
you
PRO
0
130
Other Decks in Technology
See All in Technology
RAG: from dumb implementation to serious results
glaforge
0
470
Kubernetes Meetup Tokyo #67 - KEP-3619: Fine-grained SupplementalGroups Control / k8sjp67-kep-3619
everpeace
0
290
寒冷地稲作の歴史にみるコミュニティ
miu_crescent
2
130
Do you know “Environment Variables” ?
akimiya
0
130
道具としてのGraphQLから見る用途や解決する課題
saboyutaka
0
100
それでもやっぱり ExpressRoute が好き!
skmkzyk
0
430
テクニカルライターのチームで「目標」をどう決めたか / MVV for a Team of Technical Writers
lycorptech_jp
PRO
3
140
Bluesky 2019〜2022
yamarten
1
110
The road to green code (with Sonar)
bluehats
0
100
今こそ変化対応力を向上させるとき 〜ログラスが FAST に挑戦する理由〜 / Why Loglass is Talking on the Challenge of Agile Framework FAST
shioyang
0
230
プロダクト開発の貢献をアピールするための目標設計や認知活動 / Goal design and recognition activities to promote product development contributions.
oomatomo
5
1k
テストを楽に書きたい
tomorrowkey
2
240
Featured
See All Featured
Optimizing for Happiness
mojombo
375
69k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.6k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
Rails Girls Zürich Keynote
gr2m
93
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
249
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
130k
Ruby is Unlike a Banana
tanoku
96
11k
Done Done
chrislema
181
16k
The Language of Interfaces
destraynor
154
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Faster Mobile Websites
deanohume
304
30k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
Transcript
2024年7月5日 (金) 大阪工業大学 ネットワークデザイン学科 LT大会 2024v2 豊田陽介( ) @youtoy AIを活用したWebアプリのプロトタイプを作って
コンテストや展示に出してみた話
自己紹介 豊田陽介( ) @youtoy ▶ IT系イベント主催、 登壇や運営なども ▶ 機械学習・IoT関連
の書籍を出版 ▶ モノ作り系のコンテストに応募したり 展示イベントに出展したりも (ヒーローズ・リーグ、Maker Faire等) プライベートでの活動 ▶ ガジェット ▶ 描画系/IoT/AI・機械学習系 ▶ ビジュアルプログラミング ▶ JavaScript 好きなもの・技術など
この後にデモする 作品を作った動機
手軽に面白いことをしたい! (SF・🎮ゲームの世界的な方向で)
ブラウザで動くAI・機械学習を使ったWebアプリ 光学迷彩・透明マント のような表現
利用した技術と処理の流れ 処理の流れと素材の利用箇所 両手を認識 背景取得 映像の一部を 背景画像に 利用した技術 【MediaPipe】 ・Googleが提供する仕組み のJavaScript版の一つ
・高速・高精度な手の認識 【p5.js】 ・JavaScript の描画ライブラリ ・Canvas API が扱いやすくなる ・便利な関連ライブラリも多数 ・2Dだけでなく3Dも p5.js p5.js MediaPipe
利用時の流れなどを示した動画
作品を自分以外の人に 体験してもらう/見てもらう
展示イベントに作品を出してみた IoT系の技術コミュニティ 「IoTLT」のメンバーで 一緒に出展 自分の作品展示
子どもから大人まで様々な方に楽しんでもらえた
作ったものを楽しそうに 体験してもらえるのは嬉しい!
モノ作り/作品作りを 楽しむお祭りに参加してみる
1つオススメしたい内容「ヒーローズ・リーグ」
作ったものを「とりあえず」応募してみる 「作り込もう!」とか気負いすぎず、まずは参加してみる 参加者も運営側も、みんなが応募した作品を楽しんでる
様々な人との 作品作りを通じた つながりが!
【時間があればちょっと紹介】 大阪での モノ作り系展示イベント
楽しそうなので気軽に見に行ってみると良さそう モノ作り系の展示イベント 今週末!!
【時間があればちょっと紹介】 MediaPipeについて
MediaPipeでできること(画像系の一部) 顔のキーポイント検出 姿勢推定 手のキーポイント/ ジェスチャー検出
公式ページでデモを簡単に体験できる ※ CodePen のページでコードサンプルを見ることもできる
終わり!