tfjs 2.0과 호환되므로 vladmandic-face-api을 사용합니다.

프로젝트 설정

우리는 프로젝트를 설정하고 이 프로젝트에 필요한 일부 패키지를 설치할 것입니다. 이미지를 업로드하고 파일/폴더를 탐색하기 위해 API를 설정하는 데 사용해야 하는 초기 설정입니다.npm install express express-fileupload fs path
그리고 이것은 face-api, tfjs이며 감지된 점을 그리기 위해 face api 및 canvas에도 필요합니다.npm install @vladmandic/face-api @tensorflow/tfjs canvas
익스프레스 API 및 파일 업로드 엔드포인트를 설정합니다.

const express = require("express");
const fileUpload = require("express-fileupload");

const app = express();
const port = process.env.PORT || 3000;

app.use(fileUpload());

app.post("/upload", async (req, res) => {
  const { file } = req.files;

  console.log(file);
  res.send("Successfile upload");
});

app.listen(port, () => {
  console.log("Server started on port" + port);
});

위의 코드에서 키를 파일로 설정했습니다.const { file } = req.files;
양식 데이터 본문과 파일을 키로 사용하여 API를 테스트하기 위해 Postman을 사용할 것입니다.

FaceAPI 추가

AI 모델 다운로드here . 모든 모델에서 플레이할 수 있지만 이 예에서는 얼굴 인식을 위해 ssd 모바일 네트워크만 사용합니다.

faceapiService.js

이 파일은 우리가 face api를 사용하는 곳입니다. main()에서 face api, tf를 초기화하고 모델을 찾습니다. image()에서 업로드한 이미지 데이터를 전달하고 tensorflow 객체로 디코딩하고 해당 객체를 detect()로 전달하여 업로드한 이미지에 대한 결과를 반환합니다.

const path = require("path");

const tf = require("@tensorflow/tfjs-node");

const faceapi = require("@vladmandic/face-api/dist/face-api.node.js");
const modelPathRoot = "./models";

let optionsSSDMobileNet;

async function image(file) {
  const decoded = tf.node.decodeImage(file);
  const casted = decoded.toFloat();
  const result = casted.expandDims(0);
  decoded.dispose();
  casted.dispose();
  return result;
}

async function detect(tensor) {
  const result = await faceapi.detectAllFaces(tensor, optionsSSDMobileNet);
  return result;
}

async function main(file) {
  console.log("FaceAPI single-process test");

  await faceapi.tf.setBackend("tensorflow");
  await faceapi.tf.enableProdMode();
  await faceapi.tf.ENV.set("DEBUG", false);
  await faceapi.tf.ready();

  console.log(
    `Version: TensorFlow/JS ${faceapi.tf?.version_core} FaceAPI ${
      faceapi.version.faceapi
    } Backend: ${faceapi.tf?.getBackend()}`
  );

  console.log("Loading FaceAPI models");
  const modelPath = path.join(__dirname, modelPathRoot);
  await faceapi.nets.ssdMobilenetv1.loadFromDisk(modelPath);
  optionsSSDMobileNet = new faceapi.SsdMobilenetv1Options({
    minConfidence: 0.5,
  });

  const tensor = await image(file);
  const result = await detect(tensor);
  console.log("Detected faces:", result.length);

  tensor.dispose();

  return result;
}

module.exports = {
  detect: main,
};

업로드 엔드포인트 업데이트

엔드포인트를 업데이트하고 작동하는지 테스트합니다.

app.post("/upload", async (req, res) => {
  const { file } = req.files;

  const result = await faceApiService.detect(file.data);

  res.json({
    detectedFaces: result.length,
  });
});

자, 우리는 그것을 작동시키고 얼굴을 감지합니다.

사람들이 있는 모든 사진을 사용할 수 있습니다. 이 예에서는 이 사진을 사용했습니다.

그리기 감지

이제 감지된 결과를 추가하고 이미지에 그려서 실제로 올바른 얼굴을 감지하는지 확인합니다.

saveFile.js

이 파일로 새 utils 폴더를 만들어 감지된 이미지를 저장하는 유틸리티를 추가합니다. 또한 감지된 이미지를 보관하는 out 폴더를 추가하고 있습니다.

const fs = require("fs");
const path = require("path");

const baseDir = path.resolve(__dirname, "../out");

function saveFile(fileName, buf) {
  if (!fs.existsSync(baseDir)) {
    fs.mkdirSync(baseDir);
  }

  fs.writeFileSync(path.resolve(baseDir, fileName), buf);
}

module.exports = {
  saveFile,
};

faceapiService.js 업데이트

탐지를 그리기 위해 이 코드를 추가하고 있습니다.

const canvas = require("canvas");
const { Canvas, Image, ImageData } = canvas;
faceapi.env.monkeyPatch({ Canvas, Image, ImageData });

async function main(file, filename){

 //...Existing code

  const result = await detect(tensor);
  console.log("Detected faces:", result.length);

  const canvasImg = await canvas.loadImage(file);
  const out = await faceapi.createCanvasFromMedia(canvasImg);
  faceapi.draw.drawDetections(out, result);
  save.saveFile(filename, out.toBuffer("image/jpeg"));
  console.log(`done, saved results to ${filename}`);
}

업로드 끝점 업데이트 중

이제 거의 끝났습니다. 저장된 이미지를 노출하고 업로드 응답에 URL을 추가합니다.

app.post("/upload", async (req, res) => {
  const { file } = req.files;

  const result = await faceApiService.detect(file.data, file.name);

  res.json({
    detectedFaces: result.length,
    url: `http://localhost:3000/out/${file.name}`,
  });
});

app.use("/out", express.static("out"));

이제 우편 배달부를 다시 시도합니다.

이제 감지된 얼굴을 얻었고 이미지를 그리고 노출할 수 있습니다.


참고용으로 github 저장소도 만들었습니다. face-api .