Upgrade to Pro — share decks privately, control downloads, hide ads and more …

AI・機械学習ライブラリを使ったWebアプリでワクワク体験！ / Qiita Night～AI...

Avatar for you（@youtoy） you（@youtoy）
PRO
December 01, 2023
Technology
3
2.8k

AI・機械学習ライブラリを使ったWebアプリでワクワク体験！ / Qiita Night～AI、機械学習 / 20231201

Avatar for you（@youtoy）

you（@youtoy）
PRO

December 01, 2023
Tweet

More Decks by you（@youtoy）

See All by you（@youtoy）
公開初日に Gemini CLI を試した話や FFmpeg と組み合わせてみた話など / Gemini CLI 初学者勉強会（#AI道場）
Avatar for you（@youtoy） you
PRO
0
1.4k
Node-REDのFunctionノードでMCPサーバーの実装を試してみた / Node-RED × MCP 勉強会 vol.1
Avatar for you（@youtoy） you
PRO
0
140
総額200円の入力インターフェースで年齢問わず楽しめる体験型展示 / エンジニアの自由研究発表会vol.10
Avatar for you（@youtoy） you
PRO
0
61
Node−RED で Ollama を使ったローカルLLM（node-red-contrib-ollamaを利用） / ビジュアルプログラミングIoTLT vol.20
Avatar for you（@youtoy） you
PRO
0
190
AIエージェント開発や最新の生成AIのAPI利用などJavaScriptで色々やってみる / IoTLT vol.123
Avatar for you（@youtoy） you
PRO
0
110
ChatGPT からモックサーバー宛（Beeceptor宛）の HTTPリクエストを試す / IoTLT 202504
Avatar for you（@youtoy） you
PRO
0
100
デモをまじえつつの生成AIの話題 / 横須賀プログラミング“夢”アカデミー発表会（2025年3月）
Avatar for you（@youtoy） you
PRO
0
53
もくはりでのモノ作りと自身のモノ作り活動 / もくはり文化祭2024 オープン記念イベント
Avatar for you（@youtoy） you
PRO
0
57
"かわいい" がテーマのハッカソンでWebの技術を使って魔法の世界を作った話など / HTML5 10th Anniversary
Avatar for you（@youtoy） you
PRO
0
110

Other Decks in Technology

See All in Technology
AI Ready API ─ AI時代に求められるAPI設計とは？/ AI-Ready API - Designing MCP and APIs in the AI Era
Avatar for Yoichi Kawasaki yokawasa
15
4.1k
AIコードアシスタントとiOS開発
Avatar for jollyjoester jollyjoester
0
150
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.7k
マルチプロダクト環境におけるSREの役割 / SRE NEXT 2025 lunch session
Avatar for sugamasao sugamasao
1
760
組織内、組織間の資産保護に必要なアイデンティティ基盤と関連技術の最新動向
Avatar for Naohiro Fujie fujie
0
310
安定した基盤システムのためのライブラリ選定
Avatar for KAKEHASHI kakehashi
PRO
3
140
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
Avatar for SMS tech sms_tech
1
190
Introduction to Sansan for Engineers / エンジニア向け会社紹介
Avatar for Sansan, Inc. sansan33
PRO
5
39k
An introduction to Claude Code SDK
Avatar for Akihiro Okuno choplin
2
1.5k
ABEMAの本番環境負荷試験への挑戦
Avatar for Miyazaki Taiga mk2taiga
5
1.3k
毎晩の 負荷試験自動実行による効果
Avatar for Recruit recruitengineers
PRO
5
180
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
Avatar for Shinichi Nakagawa shinyorke
PRO
0
130

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
613
210k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
430
65k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
189
11k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
460
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
233
17k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
31
8.7k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
25
1.7k

Transcript

  1. 2023年12月1日 (金) Qiita Night～AI、機械学習 @オンライン 豊田陽介（ ） @youtoy AI・機械学習ライブラリを使ったWebアプリで ワクワク体験！

  2. 自己紹介 豊田陽介（ ） @youtoy ・IT系イベント主催、登壇や運営なども ・モノ作り系のイベントに作品出展 ・機械学習・IoTの書籍を出版 ・ワークショップ講師（大人／子ども向け） ・ Microsoft

    MVP（2021/10 から） プライベートでの活動 IoT工作の本 （共著） 機械学習の本 （単著）

  3. AI・機械学習を使って 自分がやっていること

  4. AI・機械学習を使った体験型コンテンツの一つ 光学迷彩・透明マントを 体験できるWebアプリ

  5. 紹介したWebアプリの 仕組みの話

  6. AI・機械学習に関する部分 Googleさん提供の「MediaPipe（の JavaScript版）」 ⇒ブラウザ／PCアプリ／モバイル／エッジデバイス向け 　などといった、様々な環境で利用可能

  7. MediaPipeでできること（画像系の一部） 顔のキーポイント検出 姿勢推定 手のキーポイント／ ジェスチャー検出

  8. 公式ページでデモを簡単に体験できる ※ CodePen のページでコードサンプルを見ることもできる

  9. 利用しているライブラリとおおまかな流れ 処理の流れ 両手を認識 背景取得 映像の一部を 背景画像に 利用したライブラリ ・Googleさんが提供するAI・機械学習 　ライブラリ ※

    今回は手を対象にしたものを利用 ・高速・高精度なキーポイント検出など ・Python版やスマホ向けのものも ・JavaScript の描画ライブラリ ・Canvas API などが扱いやすくなる ・便利な関連ライブラリも多数 ・2Dだけでなく3Dも ▼ MediaPipe（JavaScript版） ▼ p5.js

  10. タイトルにある 「ワクワク」の話 〜オンライン編〜

  11. X（旧Twitter）にポスト 日本国内だけでなく、海外の 方からの反応・コメントも！

  12. 英語圏以外の方からの引用コメント

  13. DeepLにコピペして翻訳

  14. 何が起こっているかが 見た目だけで伝わる ↓ 言語を問わず伝わる

  15. SF映画・アニメの世界を感じてもらえたかも！？ 他に、攻殻機動隊関連のキーワード などを含むポストも

  16. ポストに対する反響

  17. タイトルにある 「ワクワク」の話 〜オフライン編〜

  18. 2023年11月に モノ作り系イベントで展示

  19. 来場した方に体験いただける展示 IoT系の技術コミュニティの メンバーと一緒のブースにて

  20. 大人の方にも楽しんでいただけて

  21. 親子連れのお子さんにも楽しんでもらえた！

  22. サクッと体験できて 説明ほぼ不要の内容で 展示イベントでも大活躍

  23. 分かりやすい出力との組み合わせ AI・機械学習を使った仕組みを入力に用いる ⇒出力で「描画」以外にも「光る」「音が鳴る」 　「物体が動く」なども組み合わせやすい PC （Chromo・マイク） ロボットトイの動き BLE 音・声 音の分類（モデルを自前で作成）と組みわせた事例

  24. 他の事例も含めてQiitaの記事に アドベントカレンダー 12/1分の記事として投稿

  25. こういった方向でも AI・機械学習を 活用してみませんか？

  26. 終わり！