TensorFlow.jsを使用してフェイストラッキングを行います、ローカルPCから画像ファイルを入力とするHTMLコードです。
TensorFlow.js：ブラウザ上でニューラルネットワークの推論や学習を行うためのライブラリ。
BlazeFace：リアルタイムでの顔検出に特化したTensorFlow.jsのモデル。
コードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」の拡張子で.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Face Tracking with TensorFlow.js</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/blazeface"></script>
<style>
img, canvas {
display: block;
margin: 20px auto;
max-width: 100%;
}
</style>
</head>
<body>
<h1>Face Tracking with TensorFlow.js</h1>
<!-- 画像ファイル入力 -->
<input type="file" id="imageUpload" accept="image/*" />
<!-- 画像の表示 -->
<img id="inputImage" alt="Selected Image" />
<!-- 顔トラッキング結果のキャンバス -->
<canvas id="faceCanvas"></canvas>
<script>
// BlazeFaceモデルを読み込む
let model;
async function loadModel() {
model = await blazeface.load();
console.log("BlazeFace model loaded.");
}
// ロード時にモデルを読み込む
loadModel();
// 画像が選択された時の処理
document.getElementById('imageUpload').addEventListener('change', async (event) => {
const file = event.target.files[0];
if (!file) return;
const img = document.getElementById('inputImage');
img.src = URL.createObjectURL(file);
img.onload = async () => {
const canvas = document.getElementById('faceCanvas');
const ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.clearRect(0, 0, canvas.width, canvas.height);
// モデルを使用して顔を検出
const returnTensors = false; // 結果をテンソルでなくオブジェクト形式で返す
const predictions = await model.estimateFaces(img, returnTensors);
if (predictions.length > 0) {
console.log(predictions);
// 検出された顔の四角形を描画
ctx.drawImage(img, 0, 0, img.width, img.height);
predictions.forEach(prediction => {
const [startX, startY] = prediction.topLeft;
const [endX, endY] = prediction.bottomRight;
const width = endX - startX;
const height = endY - startY;
// 四角形の枠を描く
ctx.beginPath();
ctx.rect(startX, startY, width, height);
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.stroke();
// 顔のランドマーク（目や鼻など）の点を描画
prediction.landmarks.forEach(landmark => {
ctx.beginPath();
ctx.arc(landmark[0], landmark[1], 5, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();
});
});
} else {
console.log("No faces detected");
}
};
});
</script>
</body>
</html>
説明
TensorFlow.jsとBlazeFaceの読み込み:
TensorFlow.jsと事前訓練された顔検出モデルBlazeFaceを使用しています。
これにより、ローカルで動作する顔検出を可能にしています。
画像ファイルの入力:
でローカルPCから画像ファイルを選択できます。
画像の読み込みと表示:
画像が選択されると、タグに画像が表示されます。
顔検出と描画:
選択された画像が表示された後、BlazeFaceモデルを使って顔を検出します。
検出された顔の位置に赤い四角が描画され、目や鼻などのランドマークは青い点で描かれます。
検出結果の表示:
顔が検出されると、四角形とランドマークがキャンバス上に表示されます。
顔が検出されない場合には、コンソールに「No faces detected」と表示されます。