顔画像を扱うWebアプリを作るとき、画像をサーバーへアップロードせずに処理できないかと考えることがあります。
MediaPipe Face Landmarkerを使えば、JavaScriptだけで顔の特徴点を検出し、ブラウザ内で画像解析を実行できます。
今回は、静止画像から顔のランドマークを取得する基本的な実装と、プライバシーや測定精度についての注意点をまとめます。
1. MediaPipe Face Landmarkerとは？
MediaPipe Face Landmarkerは、画像や動画から顔の特徴点を検出するための機械学習ツールです。
目、鼻、口、顎、顔の輪郭などの位置を取得できます。
これらの点を使うことで、以下のような処理が可能になります。
- 顔の特徴点の可視化
- 目の位置や間隔の測定
- 顔の左右対称性の比較
- 顔の各領域の相対的な比率の計算
Web版では、モデルをブラウザ側で実行できます。
2. パッケージをインストールする
JavaScriptプロジェクトにMediaPipe Tasks Visionを追加します。
npm install @mediapipe/tasks-vision
Face Landmarkerのモデルファイルを取得し、Webアプリから読み込める場所に配置します。
例えば、Nuxtなどのプロジェクトでは public/models/face_landmarker.task に配置できます。
3. 顔の特徴点を検出する
以下は、静止画像を解析するための簡略化した実装例です。
import {
FaceLandmarker,
FilesetResolver
} from "@mediapipe/tasks-vision";
const vision = await FilesetResolver.forVisionTasks(
"https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);
const landmarker = await FaceLandmarker.createFromOptions(
vision,
{
baseOptions: {
modelAssetPath: "/models/face_landmarker.task"
},
runningMode: "IMAGE",
numFaces: 1
}
);
async function analyzePhoto(file) {
const bitmap = await createImageBitmap(file);
try {
const result = landmarker.detect(bitmap);
if (!result.faceLandmarks.length) {
return null;
}
return result.faceLandmarks[0];
} finally {
bitmap.close();
}
}
analyzePhoto() にユーザーが選択した画像ファイルを渡すと、顔の特徴点を取得できます。
このサンプルでは、画像を外部サーバーへ送信する処理は行っていません。
なお、上記は静止画像向けの基本例です。実際のアプリでは、ファイル形式の検証、エラーハンドリング、モデルの読み込み状態の管理なども必要になります。
4. ランドマークから顔の比率を計算する
検出されたランドマークには、画像内で正規化された座標が含まれています。
例えば、2点間の距離は次のように計算できます。
function distance(a, b) {
return Math.hypot(
a.x - b.x,
a.y - b.y
);
}
ただし、画像内の距離をそのまま顔の特徴として比較するのは適切ではありません。
顔の大きさや撮影距離、頭の向きなどによる影響を考慮する必要があります。
例えば、基準となる顔の幅や特徴点間距離で値を正規化する方法があります。
それでも、二次元画像から取得した測定値は実際の三次元形状と同じではありません。
5. プライバシーを守るための設計
ブラウザ内で画像解析を行う場合、ユーザーの写真をアプリケーションサーバーに送信する必要はありません。
ただし、プライバシーを守るためには実装全体を確認する必要があります。
特に注意したいのは次の点です。
- 画像をAPIやアクセス解析サービスへ送信しない
- 顔画像や特徴点を不要に保存しない
- 分析終了後に画像データを適切に破棄する
- モデルファイルのダウンロードと写真のアップロードを区別して説明する
また、初回はモデルの読み込みに時間がかかる可能性があるため、進行状況を表示すると使いやすくなります。
6. 応用例：ブラウザ内で動く顔分析ツール
この技術を応用したWebアプリの一例として、私が開発しているPSL Rating AIがあります。
このツールは顔のランドマークを使って、左右対称性や顔のプロポーション、目の位置関係などを分析し、実験的な0〜8のPSLスコアを表示します。
顔写真の処理はブラウザ内で行われ、アプリケーションサーバーにはアップロードされません。
無料で利用でき、アカウント登録も不要です。
なお、PSLスコアは科学的に検証された魅力度の評価基準ではありません。18歳以上を対象とした、娯楽・探索目的の機能です。
実際の画面はこちらです。
PSL Rating AI — Browser-Based Face Analysis
まとめ
MediaPipe Face Landmarkerを利用すると、顔の特徴点をブラウザ上で取得できます。
画像のアップロードを必要としない構成は、プライバシーに配慮したWebアプリを作る際の有効な選択肢です。
一方で、特徴点の検出精度や撮影条件による誤差、測定値の解釈には注意が必要です。
顔の幾何学的な情報を取得できることと、人の魅力を客観的に評価できることは別の問題として考えるべきでしょう。