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

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

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

you(@youtoy)

December 01, 2023
Tweet

More Decks by you(@youtoy)

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 自己紹介
    豊田陽介( )
    @youtoy
    ・IT系イベント主催、登壇や運営なども
    ・モノ作り系のイベントに作品出展
    ・機械学習・IoTの書籍を出版
    ・ワークショップ講師(大人/子ども向け)
    ・ Microsoft MVP(2021/10 から)
    プライベートでの活動
    IoT工作の本
    (共著)
    機械学習の本
    (単著)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 利用しているライブラリとおおまかな流れ
    処理の流れ
    両手を認識
    背景取得
    映像の一部を
    背景画像に
    利用したライブラリ
    ・Googleさんが提供するAI・機械学習
     ライブラリ
    ※ 今回は手を対象にしたものを利用
    ・高速・高精度なキーポイント検出など
    ・Python版やスマホ向けのものも
    ・JavaScript の描画ライブラリ
    ・Canvas API などが扱いやすくなる
    ・便利な関連ライブラリも多数
    ・2Dだけでなく3Dも
    ▼ MediaPipe(JavaScript版)
    ▼ p5.js

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. DeepLにコピペして翻訳

    View full-size slide

  14. 何が起こっているかが
    見た目だけで伝わる

    言語を問わず伝わる

    View full-size slide

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

    View full-size slide

  16. ポストに対する反響

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. 終わり!

    View full-size slide