yoppa.org

芸大 - 人工知能と創作 2024

人工知能と創作最終課題制作のヒント3 – 機械学習ライブラリーを使ってみる MediaPipeとml5.js


Media Pipe – Face Landmark Detection

本日の内容

今回はこの講義の最終課題制作のためのヒントの3回目として、最新の機械学習のライブラリーとその活用方法について紹介します。

今回は2つのライブラリーを紹介します。

  • MediaPipe: Googleが提供するオープンソースの機械学習ライブラリー
    • ml5.js: 一般的な機械学習モデルを簡単に利用できるJavaScriptライブラリー

今回はソースコードの詳細な解説までは行いませんが、それぞれのライブラリーを活用してどのような作品が制作できるかを紹介していきます。

スライド資料

MediaPipe

MediaPipeとは

MediaPipeは、Googleが提供するオープンソースの機械学習ライブラリで、リアルタイムな画像や動画処理を効率的に行うためのツールです。

MediaPipe ソリューション ガイド (Google)

  • 多機能なビジョンタスク対応: 顔検出、手のランドマーク推定、ポーズ推定、物体検出など、さまざまなビジョンタスクをサポートしています。
  • リアルタイム処理: 軽量設計により、リアルタイムでのデータ処理が可能で、インタラクティブなアプリケーションの開発に適しています。
  • マルチプラットフォーム対応: Windows、Linux、macOSなどのデスクトップ環境だけでなく、AndroidやiOSなどのモバイルプラットフォーム、さらにはWebブラウザ上でも動作します。
  • 複数言語サポート: Python、C++、JavaScriptなど、さまざまなプログラミング言語で利用可能で、開発者は自身のプロジェクトに適した言語を選択できます。
  • モジュール化された設計: 各機能がモジュール化されており、必要な機能を組み合わせて柔軟にパイプラインを構築できます。
  • オープンソース: ソースコードが公開されており、コミュニティによる改善やカスタマイズが可能です。

MediaPipeのデモ

MediaPipeでどのようなことができるのか、GoogleではWeb上ですぐに試すことができるデモを公開しています。その内容を見てみましょう。

Object Detection (物体検出)

  • 映像や画像の中から物体を検出する技術
  • デモ

Image Classification (画像分類)

  • 画像の中に写っている物体を分類する技術
  • デモ

Image Segmentation (画像セグメンテーション)

  • 画像の領域を分割する技術
  • デモ

Hand Landmark Detection (手のランドマーク検出)

  • 画像や動画内の手とそのランドマーク（キーポイント）を検出
  • デモ

Face Stylization (顔のスタイル変換)

  • 画像内で検出された顔をカートゥーンやアニメ顔といったスタイルに変換
  • デモ

Face Detection (顔検出)

  • 複数の顔と各顔の6つのランドマークを検出
  • デモ

Face Landmark Detection (顔のランドマーク検出)

  • 顔のランドマーク（キーポイント）を検出
  • バーチャル試着や表情を模倣するバーチャルアバター作成に利用可能
  • デモ

Pose Landmark Detection (ポーズのランドマーク検出)

  • 画像や動画内の人体の主要ポイントを検出
  • デモ

MediaPipeの利用方法

  • MediaPipeでは、Web、Python、Android、iOSと用途にあわせてさまざまなプラットフォームで利用可能
  • 一部のソリューションではモデルをカスタマイズすることも
  • 詳細: MediaPipe ソリューション ガイド

MediaPipeの利用例

Face Mesh: 顔のランドマーク検出

ml5.js

MediaPipeとml5.js

MediaPipe

  • MediaPipeはとても高機能かつ様々なプラットフォームで利用可能
  • ただし、高度な機能を使うためにはそれなりのプログラミングスキルが必要

別のアプローチ – ml5.js

  • ml5.jsは、機械学習のモデルを簡単に利用できるJavaScriptライブラリー
  • p5.jsとの親和性が高く、クリエイティブコーディングに適している

ml5.jsについて

  • ml5.js | Friendly Machine Learning for the Web
  • ブラウザ上で人工知能を活用し学びと創造を促進する親しみやすいライブラリー
  • アーティストやクリエイティブコーダー、学生向けに機械学習を簡単に使えるよう設計されている
  • TensorFlow.jsを基盤とし、外部依存なしで動作。

ml5.jsでできること

  • BodyPose：全身のポーズ推定
  • HandPose：手の骨格と指の追跡
  • FaceMesh：顔のランドマーク検出
  • ImageClassifier：画像内容認識
  • SoundClassifier：音声の検出と分類
  • NeuralNetwork：独自のニューラルネットワークを訓練可能

ml5.js + Hand Pose

ml5.js + Face Mesh

ml5.jsでどんなことができるか

例 1: Fire breathing By Pierre B.

Fece meshを使用

例 2: Regular polygons playground By Juan Carlos Ponce Campuzano

Pose Detcetionを使用

例 3: handPose choose menu item by peymanx

Hand Poseを使用

おすすめ学習リソース


A Beginner’s Guide to Machine Learning in JavaScript with ml5.js

  • NYU ITPのDaniel Shiffmanによるml5.jsの入門ガイド
  • ml5.jsの基本から応用までを学べる

応用: TouchDesignerでMediaPipeを利用する!

TouchDesignerからのMediaPipeの利用は、Bryan Wai-ching CHUNGさんによる素晴しいサンプル集があります! ダウンロードして試してみましょう。Python 3.9系でMediaPipeが正しくインストールされていれば、そのまま利用できるはずです。

応用することで、下記のようにFaceMeshを使用した3Dサーフェスの合成なども可能になります!

最終制作アンケート

この講義ではここまで解説してきた生成AIの技術と自分自身の専門性を生かした作品制作を行い、その成果をAMCのギャラリーで展示します。どのような作品を制作する予定か下記のアンケートに記入してください。※まだ最終の確定版でなくても構いません

アンケート

本日の講義に参加した方は以下のアンケートに回答してください。

https://x.gd/6d9k3