検索

ホームページ >ウェブフロントエンド >jsチュートリアル >FACE-API.jsを使用したWeb上の顔検出

FACE-API.jsを使用したWeb上の顔検出

Christopher Nolan
Christopher Nolanオリジナル
2025-02-09 09:46:12392ブラウズ

Face Detection on the Web with Face-api.js

Webブラウザーはますます強力になっており、WebサイトやWebアプリケーションの複雑さも増加しています。スーパーコンピューターが数十年前に行う必要があることは、1つのスマートフォンでできるようになりました。顔の検出はその1つです。

顔の検出と分析機能は、巧妙な機能を追加できるため、非常に便利です。顔（Google Mapsなど）の自動的にぼやけた顔（Microsoftチームなど）に焦点を当て、パスポートの検証、楽しいフィルター（InstagramやSnapchatなど）の追加、および多機能を自動的にぼやけしてズームして、Webカメラの画像をズームしてズームしてください。しかし、これらすべてを行う前に、最初に顔を見つける必要があります！

FACE-API.JSは、開発者が機械学習の背景なしにアプリケーションで顔検出を使用できるようにするライブラリです。

このチュートリアルのコードは、githubで見つけることができます。

キーポイント

FACE-API.JSは、開発者が機械学習の背景なしにWebアプリケーションでフェイス検出を使用できるようにするライブラリです。顔を検出し、顔のさまざまな機能を推定し、写真の人が誰であるかを特定することさえできます。
    このライブラリは、ブラウザでニューラルネットワークを作成、トレーニング、および使用するために、人気のJavaScript Machine Learning LibraryであるTensorflow.jsを使用しています。ただし、直感的なAPIでこれらすべてをカプセル化して、使いやすくなります。
    • FACE-API.JSは、アマチュアプロジェクト、実験、さらにはMVPに最適です。ただし、パフォーマンスに影響を与える可能性があり、開発者は帯域幅とパフォーマンスまたは精度を選択する必要がある場合があります。
    • FACE-API.JSは強力なツールですが、人工知能はバイアスの増幅に優れていることに注意する必要があります。したがって、開発者はこのテクノロジーを慎重に使用し、多様なテストグループを使用して徹底的なテストを行う必要があります。
    • 機械学習を使用した顔の検出
オブジェクトの検出（人間の顔など）は非常に複雑です。考えてみてください：ピクセルをスキャンして目、鼻、口を見つけるプログラムを書くことができます。これは行うことができますが、考慮すべき多くの要因があるため、実際には完全に信頼できるものにすることは不可能です。照明の状態、顔の毛、形と色の大きな違い、メイクアップ、角度、マスクなどについて考えてください。

しかし、ニューラルネットワークはそのような問題に対処するのに優れており、すべてではないにしても、ほとんどの条件に合わせて一般化することができます。 Tensorflow.js（人気のJavaScript Machine Learning Library）を使用して、ブラウザでニューラルネットワークを作成、トレーニング、および使用できます。ただし、既製の事前に守られたモデルを使用していても、Tensorflowに情報を提供する方法と出力の解釈方法を深く掘り下げる必要があります。機械学習の技術的な詳細に興味がある場合は、「Pythonを使用した機械学習の初心者」をご覧ください。

face-api.jsが生まれました。これは、直感的なAPIですべてをカプセル化します。 IMG、キャンバス、またはビデオDOM要素に合格すると、ライブラリは1つまたは一連の結果を返します。 FACE-API.JSは、以下に示すように、顔を検出し、顔のさまざまな機能を推定できます。

  • 顔検出：1つ以上の顔の境界を取得します。これは、写真の顔の位置とサイズを決定するのに非常に役立ちます。
  • 顔の特徴の検出：眉、目、鼻、口、唇の位置と形状を取得します。これを使用して、顔の向きを決定したり、鼻と唇の間のあごひげなどの特定の領域に数字を投影することもできます。
  • 顔認識：写真の人が誰であるかを判断します。
  • 顔の表現検出：顔から式を取得します。結果は文化によって異なる場合があることに注意してください。
  • 年齢と性別のテスト：顔から年齢と性別を取得します。 「性別」分類は、顔を女性または男性として分類しますが、それは必ずしも彼らの性別を明らかにするわけではありません。

このコンテンツを実験以外で使用する前に、AIはバイアスの増幅に優れていることに注意してください。性別分類は、シスジェンダーの人々にとってうまく機能しますが、私の非バイナリの友人の性別を検出することはできません。ほとんどの場合、白人を認識しますが、多くの場合、色の人を検出できません。

このテクノロジーを使用する場合は

非常に注意し、多様なテストチームを使用して徹底的なテストを行います。

インストール

npm：

からface-api.jsをインストールできます 
<code>npm install face-api.js
</code>
ただし、ビルドツールのセットアップをスキップするには、unpkg.orgを介してUMDパッケージを含めます：

その後、ライブラリのリポジトリから正しい前提型モデルをダウンロードする必要があります。顔から知りたいことを決定し、利用可能なモデルセクションを使用して、必要なモデルを決定します。一部の機能では、複数のモデルを使用できます。この場合、帯域幅/パフォーマンスと精度を選択する必要があります。利用可能なさまざまなモデルのファイルサイズを比較し、プロジェクトに最適だと思われるモデルを選択します。 
<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

使用するために必要なモデルがわかりませんか？後でこのステップに戻ることができます。必要なモデルをロードせずにAPIを使用すると、エラーがスローされ、ライブラリが期待するモデルを示します。

Face Detection on the Web with Face-api.js face-api.js APIを使用できるようになりました。

例

何かを作りましょう！

次の例では、この関数を使用して、Unsplashからランダムイメージをロードします。ソース：

トリミングされた写真
<code>function loadRandomImage() {
  const image = new Image();

  image.crossOrigin = true;

  return new Promise((resolve, reject) => {
    image.addEventListener('error', (error) => reject(error));
    image.addEventListener('load', () => resolve(image));
    image.src = 'https://source.unsplash.com/512x512/?face,friends';
  });
}
</code>

このデモのコードは、付属のgithubリポジトリに見つけることができます。

最初に、モデルを選択してロードする必要があります。画像をトリミングするには、顔の境界ボックスを知る必要があるため、顔の検出で十分です。これは、SSD MobileNet V1モデル（6MB未満）と小さな顔検出器モデル（遅い200kb）の2つのモデルで行うことができます。ユーザーも手動でトリミングできるため、精度は無関係であると仮定します。また、訪問者がこの機能を遅いインターネット接続で使用していると仮定しましょう。帯域幅とパフォーマンスに焦点を当てているため、小さな小さなフェイス検出器モデルを選択します。

モデルをダウンロードした後、ロードできます：

<code>npm install face-api.js
</code>

画像をロードして、face-api.jsに渡すことができます。 FACEAPI.DETECTALLFACESはデフォルトでSSD MobileNet V1モデルを使用するため、新しいFACEAPI.TINYFACEDETECTOROPTIONS（）を明示的に通過させる必要があります。 

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

変数面には結果配列が含まれるようになりました。各結果にはボックスとスコア属性があります。スコアは、ニューラルネットワークが実際に顔にあるという自信の程度を示します。ボックス属性には、顔座標のオブジェクトが含まれています。最初の結果を選択できます（またはfaceapi.detectsingleface（）を使用できます）が、ユーザーがグループ写真を提出する場合は、トリミングされた画像のすべての顔を確認する必要があります。これを行うには、カスタム境界ボックスを計算できます。 

<code>function loadRandomImage() {
  const image = new Image();

  image.crossOrigin = true;

  return new Promise((resolve, reject) => {
    image.addEventListener('error', (error) => reject(error));
    image.addEventListener('load', () => resolve(image));
    image.src = 'https://source.unsplash.com/512x512/?face,friends';
  });
}
</code>
最後に、キャンバスを作成して結果を表示できます。 

<code>await faceapi.nets.tinyFaceDetector.loadFromUri('/models');
</code>

emoji

このデモのコードは、付属のgithubリポジトリに見つけることができます。

少し楽しいのはなぜですか？すべての目に口の絵文字（？）を置くフィルターを作ることができます。目の特徴ポイントを見つけるには、別のモデルが必要です。今回は、精度が懸念されるため、SSD MobileNet V1および68ポイントのフェイスフィーチャポイント検出モデルを使用します。

同様に、最初にモデルと画像をロードする必要があります。

機能ポイントを取得するには、withfacelandmarks（）function callをDetectallfaces（）に追加する必要があります。

前回と同様に、顔には結果のリストが含まれています。顔の位置に加えて、各結果には、機能ポイントの元のポイントのリストも含まれています。各機能の正しい機能ポイントを取得するには、ポイントのリストをスライスする必要があります。ポイントの数が固定されているため、ハードコードインデックスを選択しました：
<code>const image = await loadRandomImage();
const faces = await faceapi.detectAllFaces(image, new faceapi.TinyFaceDetectorOptions());
</code>
<code>npm install face-api.js
</code>

今、写真に絵文字を描き始めることができます。両目でこれを行う必要があるため、feature.eyeleftとfeature.eyerightを配列に入れて、各目の同じコードを実行するためにそれらを繰り返すことができます。残っているのは、絵文字をキャンバスに引き寄せることです！ 

<code>/* globals faceapi */
import 'https://unpkg.com/face-api.js@0.22.2/dist/face-api.min.js';
</code>

フォントサイズと正確なテキスト位置を調整するためにいくつかのマジック番号を使用したことに注意してください。絵文字はユニコードであり、ウェブ上のタイポグラフィは奇妙であるため（少なくとも私にとっては）、数字がほぼ同じになるまで調整します。より強力な選択肢は、画像をオーバーレイとして使用することです。

Face Detection on the Web with Face-api.js

要約

face-api.jsは、顔の検出と認識を本当にアクセスできる素晴らしいライブラリです。機械学習やニューラルネットワークに精通する必要はありません。機能を有効にしているツールが大好きです。これは間違いなくその1つです。

私の経験から、ウェブ上の顔の認識はパフォーマンスに影響を与える可能性があります。帯域幅とパフォーマンスまたは精度を選択する必要があります。小さなモデルは確かに精度が低く、前述のいくつかの要因で顔を見逃します。たとえば、光や顔が覆われていません。

Microsoft Azure、Google Cloud、およびおそらく他のビジネスは、クラウドで顔の検出を提供します。大規模なモデルのダウンロードを避けるため、クラウドベースの検出はページの読み込みを避け、しばしば改善され、ハードウェアが最適化されているため速くなる可能性があるため、より正確になります。高精度が必要な場合は、満足している計画を検討することをお勧めします。

アマチュアプロジェクト、実験、およびMVPにFace-api.jsを使用することをお勧めします。

FACE API.js

についての

FAQ（FAQ）

Face API.jsとは何ですか？それはどのように機能しますか？

Face API.jsは、Tensorflow.jsを使用して、ブラウザで顔の検出、顔認識、フェイスフィーチャポイント検出を実行するJavaScriptライブラリです。機械学習モデルを使用して、画像またはライブビデオストリームの顔を検出および認識します。ライブラリは、開発者が画像内のすべての顔を検出し、特定の人の顔を識別し、目、鼻、口などの顔の特徴を特定するなどのタスクを実行できるようにするAPIを提供します。

私のプロジェクトにFace API.jsをインストールして使用する方法は？

Face API.jsをインストールするには、NPMまたはYARNを使用できます。インストールしたら、ライブラリをプロジェクトにインポートし、APIの使用を開始できます。このライブラリは、あなたを始めるための包括的な例とチュートリアルを提供します。

フェイスAPI.jsは、リアルタイムの顔の検出と認識に使用できますか？

はい、フェイスAPI.jsは、リアルタイムの顔の検出と認識に使用できます。このライブラリは、ビデオストリームを処理し、顔をリアルタイムで検出または認識できるAPIを提供します。これにより、監視、ビデオ会議、インタラクティブなインストールなどのアプリケーションに適しています。

Face API.jsを使用するためのシステム要件は何ですか？

Face API.jsには、WebGLとWebAssemblyをサポートする最新のブラウザが必要です。また、顔の検出と認識は計算集約型のタスクであるため、比較的強力なCPUとGPUも必要です。ただし、正確な要件は、特定のユースケースと処理される顔の数に依存します。

顔の検出と識別において、Face API.jsはどれくらい正確ですか？

顔API.jsの精度は、入力画像またはビデオの品質、照明条件、顔の姿勢など、いくつかの要因に依存します。ただし、ライブラリは大規模なデータセットで訓練された最新の機械学習モデルを使用するため、ほとんどの条件で高精度を達成できます。

フェイスAPI.jsは、さまざまな照明条件や姿勢で顔を検出して認識できますか？

はい、Face API.jsは、さまざまな照明条件や姿勢で顔を検出して認識できます。ただし、すべての機械学習モデルと同様に、そのパフォーマンスは極端な照明条件や異常な姿勢の影響を受ける可能性があります。

api.jsには商業プロジェクトに使用できますか？

はい、Face API.jsはオープンソースであり、個人および商業プロジェクトに使用できます。ただし、商業プロジェクトでオープンソースライブラリを使用する前に、ライセンス条件を確認するのが最善です。

アプリケーションでFace API.jsのパフォーマンスを改善する方法は？

Face API.JSのパフォーマンスを改善する方法はいくつかあります。 1つの方法は、たとえば解像度を減らしたり、グレースケールに変換したりするなどして、入力画像またはビデオを最適化することです。別の方法は、顔の検出および認識アルゴリズムのパラメーターを微調整することです。

Face API.jsは、複数の人を含む画像またはビデオで顔を認識できますか？

はい、Face API.jsは、同じ画像またはビデオで複数の顔を検出および認識できます。このライブラリは、検出されたフェイスアレイを返すAPIを提供し、それぞれに独自の境界ボックスと認識の結果があります。

Face API.jsは、他のJavaScriptライブラリまたはフレームワークで使用できますか？

はい、Face API.jsは、JavaScriptライブラリまたはフレームワークで使用できます。柔軟で既存のプロジェクトに統合しやすくなるように設計されています。

以上がFACE-API.jsを使用したWeb上の顔検出の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

Python JavaScript npm yarn 封装 切片 JS 对象 dom canvas github 算法 人工智能 tensorflow microsoft azure webgl
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Denoのファイルシステムを操作します次の記事：Denoのファイルシステムを操作します

関連記事

続きを見る