Zenn
📺

InsightFaceの顔検出結果をNext.jsで可視化してみた

2021/07/29に公開
Next.js
Python
ディープラーニング
機械学習
insightface
tech

目次

初めに

先日、InsightFaceとFastAPIを使った顔検出サーバを実装し、「InsightFaceとFastAPIで顔検出サーバを作ってみた」という記事を書きました。
先の記事の中では検出結果として数値が出力されているだけで、どのような結果なのかが確認しづらい状態でした。
今回はその結果を、Next.jsを使って可視化してみたいと思います。

なお本記事には、Next.js自体に関する説明は一切ありません。ご了承ください。

実行例

文章で説明するよりも実行例を見た方が早いと思うので、女性1人、男女2人ずつが写った画像の認識結果を以下に示します。

なお、画像はぱくたそから以下の2枚をお借りしました。

女性1人

男女2人ずつ

環境

環境は先の記事と同様です。

ソースコード

ソースコード一式はGitHubの以下のリポジトリに置いています。
本記事執筆時のタグは20210729aです。

https://github.com/nayutaya/202107-face-detector

ビルド＆実行

タグが異なる以外は、ビルド方法は先の記事と同様です。例を以下に示します。

# リポジトリを取得
git clone https://github.com/nayutaya/202107-face-detector.git
cd 202107-face-detector
# タグをチェックアウト
git checkout 20210729a
# Dockerイメージをビルドする
docker-compose build
# Dockerコンテナをバックグラウンドで起動する
docker-compose up -d

# ウェブアプリを開く
open http://localhost:8001/

# （試したあとに）Dockerコンテナを停止する
docker-compose down

使い方

説明するほどでもありませんが、使い方は以下の通りです。

  1. http://localhost:8001/ にウェブブラウザからアクセスします。
  2. 「入力」の枠内にJPEG形式の画像ファイルをドラッグ＆ドロップするか、枠内をクリックしてダイアログボックスから画像ファイルを選択します。
  3. 「認識結果」に結果が表示されます。

表示内容

認識結果として以下が表示されます。オーバーレイされた結果は、チェックボックスを使って個別に表示/非表示を切り替えることができます。

  • 結果がオーバーレイされた画像
    • バウンディングボックス（顔を囲む枠）
    • 顔検出のスコア
    • 属性
      • 性別（M: 男性 / F: 女性）
      • 年齢
    • キーポイント（5点）
    • ランドマーク（顔器官点）
      • 2D 106点
      • 3D 68点
  • 表形式の結果
    • 切り出された顔画像
    • 顔検出のスコア
    • 属性
      • 性別
      • 年齢
    • バウンディングボックスの座標

ポイント

実装のポイントは以下の通りです。

  • 結果をSVGで表示
  • Next.jsサーバでAPIをプロキシ
  • ドラッグ＆ドロップに対応

結果をSVGで表示

結果の表示にはSVG（Scalable Vector Graphics）を使用しています。
検出処理のために顔検出サーバに画像を送信していますが、返される結果はJSONのみで、画像はすべてクライアント側で生成しています。
結果をオーバーレイした画像の他、顔を切り抜いた画像もクライアント側で生成しています。

SVGを用いることでサーバ側の負荷、転送量を減らし、またクライアント側で自由に表示を切り替えることができます。

Next.jsサーバでAPIをプロキシ

顔検出処理のエンドポイントは http://localhost:8000/detect ですが、Next.jsのサーバで http://localhost:8001/api/detect としてプロキシするエンドポイントを公開しています。

プロキシすることで単一のオリジンとの通信で済み、各種制御が容易になります。

ドラッグ＆ドロップに対応

画像ファイルをダイアログボックスから選ぶのは面倒なので、直接ドラッグ＆ドロップできるようにしました。現代のウェブアプリでは一般的ですね。

ドラッグ＆ドロップに対応することでサクサクと実験できます。

終わりに

Next.jsとSVGを組み合わせることで、良い感じに顔検出の結果を可視化することができました。

今後は、顔認証の可視化、動画のアップロード、バックグラウンド処理、動画への結果のオーバーレイなどに挑戦したいと思っています。

『InsightFaceで顔認証（特徴量抽出、比較）してみた』に続く。

Discussion