Electron で face-api.js を使う

Webブラウザ と Electron で「face-api.js」の使い方に違いがあったのでまとめました。

1. Webブラウザ版の顔検出

Webブラウザ版の顔検出のコードは、次のとおり。
詳しくは「face-api.js - ブラウザでの顔認識を行うJavaScript API」で解説。

<!-- face-api.js -->
<script src="js/face-api.min.js"></script>

<!-- テストに使用する画像 -->
<img id="img" src="face.jpg"></img>

<script>
  // 画像の取得
  const img = document.getElementById('img')

  const app = async () => {
    // モデルの読み込み
    await faceapi.nets.tinyFaceDetector.load("models/")

    // 顔検出の実行
    const detections = await faceapi.detectAllFaces(img, new faceapi.TinyFaceDetectorOptions())
   
    // 結果の出力
    console.log(detections)
  }
  app()
</script>

2. Electron版の顔検出

Electron版の顔検出のコードは、次のとおり。

$ npm install @tensorflow/tfjs-node
$ npm install face-api.js
$ npm install canvas

(async () => {
  // パッケージのインポート
  require('@tensorflow/tfjs-node')
  const faceapi = require('face-api.js')
  const path = require('path')
  const { Canvas, Image, ImageData, loadImage } = require('canvas')

  // Node.js環境のパッチ適用
  faceapi.env.monkeyPatch({ Canvas, Image, ImageData })

  // 画像の読み込み
  const img = await loadImage('face.jpg')

  // モデルの読み込み
  await faceapi.nets.tinyFaceDetector.loadFromDisk(path.join(__dirname, 'models'))

  // 顔検出の実行
  const detections = await faceapi.detectAllFaces(img, new faceapi.TinyFaceDetectorOptions())

  // 結果の出力
  console.log(detections)
})().catch((err) => console.error(err))

ブラウザ版との違いは、次のとおり。

・monkeyPatch()でNode.js環境のパッチ適用が必要。
・loadFromDisk()でローカルから画像の読み込みを行う。
・モデルの読み込みのパスもローカルパスを指定。

OpenAI Gym / Baselines 深層学習・強化学習 人工知能プログラミング 実践入門