ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で顔認識と感情分析を学ぶ
JavaScript で顔認識と感情分析を学ぶ
はじめに:
コンピュータ技術の急速な発展に伴い、人工知能技術はますます成熟しています。中でも顔認証や感情解析技術はさまざまな分野で広く活用されています。この記事では、JavaScript を使用して顔認識と感情分析を行う方法と、具体的なコード例を紹介します。
1. 顔認識
顔認識は、画像やビデオから顔を検出して認識するテクノロジーです。 JavaScript では、サードパーティ ライブラリ Face-api.js を使用して顔認識機能を実装できます。以下は、カメラ ビデオ ストリームからの顔の検出と認識を実装するサンプル コードです。
const video = document.getElementById('video'); Promise.all([ faceapi.nets.tinyFaceDetector.loadFromUri('/models'), faceapi.nets.faceLandmark68Net.loadFromUri('/models'), faceapi.nets.faceRecognitionNet.loadFromUri('/models'), faceapi.nets.faceExpressionNet.loadFromUri('/models') ]).then(startVideo); function startVideo() { navigator.getUserMedia( { video: {} }, stream => video.srcObject = stream, err => console.error(err) ) } video.addEventListener('play', () => { const canvas = faceapi.createCanvasFromMedia(video); document.body.append(canvas); const displaySize = { width: video.width, height: video.height }; faceapi.matchDimensions(canvas, displaySize); setInterval(async () => { const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions()) .withFaceLandmarks() .withFaceExpressions(); const resizedDetections = faceapi.resizeResults(detections, displaySize); canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height); faceapi.draw.drawDetections(canvas, resizedDetections); faceapi.draw.drawFaceLandmarks(canvas, resizedDetections); faceapi.draw.drawFaceExpressions(canvas, resizedDetections); }, 100) });
上記のコードでは、Face-api.js のモデルが最初に読み込まれ、次に getUserMedia() を呼び出して取得されます。メソッド video stream を作成し、それを video 要素に割り当てます。ビデオ再生イベント リスナーで、detectAllFaces() メソッドを使用してビデオ ストリーム内のすべての顔を検出し、drawDetections() メソッドとdrawFaceLandmarks() メソッドを通じて顔検出フレームと顔のキー ポイントを描画します。最後に、drawFaceExpressions() メソッドを使用して顔の表情を描画します。
2. 感情分析
感情分析とは、顔の表情を分析して識別することで、人の感情状態を判断することです。 JavaScript では、Face-api.js ライブラリを使用して感情分析関数を実装することもできます。以下は、写真から顔の表情を認識し、感情的な結果を出力するサンプル コードです。
const img = document.getElementById('img'); Promise.all([ faceapi.nets.tinyFaceDetector.loadFromUri('/models'), faceapi.nets.faceLandmark68Net.loadFromUri('/models'), faceapi.nets.faceRecognitionNet.loadFromUri('/models'), faceapi.nets.faceExpressionNet.loadFromUri('/models') ]).then(startAnalysis); function startAnalysis() { faceapi.detectAllFaces(img) .withFaceLandmarks() .withFaceExpressions() .then(result => { if (result.length > 0) { const expressions = result[0].expressions; const emotion = Object.keys(expressions).reduce((a, b) => expressions[a] > expressions[b] ? a : b); console.log(`Detected emotion: ${emotion}`); } else { console.log("No faces detected"); } }) .catch(err => console.error(err)); }
上記のコードでは、最初に Face-api.js モデルが読み込まれ、次に detectAllFaces() メソッドが使用されます。写真内の顔を検出し、withFaceLandmarks() メソッドによって顔のキー ポイントの位置を取得し、最後に withFaceExpressions() メソッドによって表現結果を取得します。 reduce() メソッドを使用して、表現結果の中で最も確率の高い感情を見つけて出力します。
結論:
この記事では、JavaScript を使用して顔認識および感情分析機能を実装する方法を紹介し、具体的なコード例を示します。これらのテクノロジーを学習して習得することで、人工知能テクノロジーをさまざまな分野に応用し、ユーザーにより良いエクスペリエンスとサービスを提供することができます。この記事の紹介とコード例を通じて、読者がこれらのテクノロジーをさらに理解して適用し、より多くの人工知能アプリケーションの開発を促進できることを願っています。
以上がJavaScript で顔認識と感情分析を学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。