얼굴 표정을 식별하고 faceapi를 사용하여 얼굴 표정을 이모티콘으로 변경합니다.제이스와 다음.js+TypeScript

이봐, 동료들,
나는 face-api.js로 얼굴 표정을 식별하고 실시간으로 얼굴 표정을 이모티콘으로 바꿀 수 있는 프로그램을 개발했다!

본문에서, 나는 어떻게 이 응용 프로그램을 개발하는지 설명할 것이다.
데모→ https://face2emoji.vercel.app/
github→ https://github.com/yuikoito/face2emoji

내가 왜 발전했는지

최근에 나의 인터넷 회의가 갈수록 많아져서 때때로 나는 얼굴을 내밀고 싶지 않지만, 나는 나의 표정을 표현하고 싶다.
나는 개인적으로 내 얼굴을 드러내고 싶지 않지만, 당연히 얼굴 표정이 많은 것을 알려주는 것을 이해한다.
그리고 내 얼굴 표정만 보여줄 수 있다면 정말 좋을지 궁금해!큰 소리로 웃다
이 프로그램을 진정한 네트워크 회의로 사용할 수는 없지만, 충분한 수요가 있다면, 실제 네트워크 회의에 사용할 수 있도록 크롬으로 확장할 것입니다.
지금, 그것의 작업 원리를 시험해 보고 너의 생각을 나에게 말해라.)

애플리케이션 구조 및 기능

넥스트 쓰고 있어요.js+TypeScript를 사용하여 응용 프로그램을 만듭니다.
얼굴 표정 인식은 얼굴api로 이루어진다.js, TensorFlow 기반 모듈.js.
사회자는 비셀이다.
기능은 간단하다. 프로그램이 시작될 때 얼굴과 얼굴 표정을 식별하고 얼굴에 이모티콘을 놓는다.
사용하는 이모티콘은 애플 이모티콘이다.
face api를 사용합니다.js, 7가지 얼굴 표정 모드를 얻을 수 있으며, 각각의 표정에 대해 다음과 같은 표정을 설정할 수 있다.


자, 이제 이 프로그램을 어떻게 개발하는지 설명할 때가 되었습니다.

face api를 설정하고 설치합니다.js

$ yarn create next-app <app-name>
$ cd <app-name>
$ touch tsconfig.json
$ yarn add --dev typescript @types/react

그런 다음 색인 이름을 바꿉니다.js 및 적용.js 인덱스.tsx, 응용 프로그램.tsx.
웹캠을 설치합니다.

$ yarn add react-webcam @types/react-webcam

이제 faceapi를 설치할 준비가 됐습니다.js.

$ yarn add face-api.js

자술한 파일에서 말했듯이faceapi입니다.js는 모델을 불러와야 합니다.
따라서 face-api.js github에서 '권중' 폴더를 복사하여 '공공' 아래에 두십시오.
가중치를 모델로 변경합니다.
모델을 로드합니다.
여기에는 tinyFaceDetector와faceExpressionNet을 사용합니다.
ssdMobilenetv1이 있으면 정확도가 더 좋지만 무게가 더 무거워 일부 설비가 작동하지 않는다.

  const loadModels = async () => {
    const MODEL_URL = "/models";
    await Promise.all([
      faceapi.nets.tinyFaceDetector.load(MODEL_URL),
      faceapi.nets.faceExpressionNet.load(MODEL_URL),
    ]);
  };

로그가 올바르게 출력되었는지 확인하겠습니다.
단추를 누르면 얼굴을 식별하고 다음 로그를 보십시오.

// pages/index.tsx

import * as faceapi from "face-api.js";
import { useRef } from "react";
import Webcam from "react-webcam";

export default function Home() {
  const webcamRef = useRef<Webcam>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const loadModels = async () => {
    const MODEL_URL = "/models";
    await Promise.all([
      faceapi.nets.tinyFaceDetector.load(MODEL_URL),
      faceapi.nets.faceExpressionNet.load(MODEL_URL),
    ]);
  };

  const faceDetectHandler = async () => {
    await loadModels();
    if (webcamRef.current && canvasRef.current) {
      const webcam = webcamRef.current.video as HTMLVideoElement;
      const canvas = canvasRef.current;
      webcam.width = webcam.videoWidth;
      webcam.height = webcam.videoHeight;
      canvas.width = webcam.videoWidth;
      canvas.height = webcam.videoHeight;
      const video = webcamRef.current.video;
      const detectionsWithExpressions = await faceapi
        .detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
        .withFaceExpressions();
      console.log(detectionsWithExpressions);
    }
  };

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <Webcam audio={false} ref={webcamRef} className={styles.video} />
        <canvas ref={canvasRef} className={styles.video} />
        <button onClick={faceDetectHandler}>顔認識</button>
      </main>
    </div>
  );
}

좋아, 괜찮아 보여!
검측 부분은 얼굴 인식 부분으로 좌표 등을 포함한다. 표정 부분은 얼굴 표정으로 각 표정의 점수를 포함한다.
지금 우리가 해야 할 일은 얼굴의 위치를 확인하고 가장 높은 점수를 받은 표정에 따라 이모티콘을 그리는 것이다.

얼굴 표정에 따라 이모티콘을 바꾸다

그림 부분이 매우 길기 때문에 나는 논리를 하나의 단독 파일에 두었다.
표현식과 화포의 검측은 index.tsx를 통해 발송해야 한다.
표현식 대상을 계산하기 쉬운 형식으로 변경합니다.

// expressions output
{
  angry: 0.00012402892753016204
  disgusted: 0.00000494607138534775
  fearful: 2.4963259193100384e-7
  happy: 0.00011926032311748713
  neutral: 0.9996343851089478
  sad: 0.00010264792217640206
  surprised: 0.000014418363207369111
}

그리고 우리는 다음과 같이 바꾼다.

    const Array = Object.entries(detectionsWithExpression.expressions);
    const scoresArray = Array.map((i) => i[1]);
    const expressionsArray = Array.map((i) => i[0]);

전체 코드는 다음과 같다.

// utils/drawEmoji.ts

import {
  WithFaceExpressions,
  FaceDetection,
  FaceExpressions,
} from "face-api.js";

export const drawEmoji = async (
  detectionsWithExpressions: WithFaceExpressions<{
    detection: FaceDetection;
    expressions: FaceExpressions;
  }>[],
  canvas: HTMLCanvasElement
) => {
  detectionsWithExpressions.map((detectionsWithExpression) => {
    const ctx = canvas.getContext("2d");
    const Array = Object.entries(detectionsWithExpression.expressions);
    const scoresArray = Array.map((i) => i[1]);
    const expressionsArray = Array.map((i) => i[0]);
    const max = Math.max.apply(null, scoresArray);
    const index = scoresArray.findIndex((score) => score === max);
    const expression = expressionsArray[index];
    const image = document.createElement("img");
    image.onload = () => {
      const width = detectionsWithExpression.detection.box.height * 1.2;
      const height = detectionsWithExpression.detection.box.height * 1.2;
      const x = detectionsWithExpression.detection.box.x - width * 0.1;
      const y = detectionsWithExpression.detection.box.y - height * 0.2;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(image, x, y, width, height);
    };
    image.src = `/emojis/${expression}.png`;
  });
};

그나저나 이번에 여러 사람이 검출될 수 있기 때문에 Detection SwitExpressions는 멀티플렉스로 설정되어 있지만, ctx.clearRect(0, 0, canvas.width, canvas.height); 위에 놓으면 지도가 순서대로 흐르고, 여러 사람이 있으면 다른 사람을 그리지 않고 한 사람을 검출하고 그립니다.
따라서 여러 사람을 지원하려면 모든 사용자를 그린 다음 메인 캔버스에 임시 캔버스 요소를 준비해야 할 수도 있습니다.
여기서는 여러 사람이 사용할 수 없다.
어쨌든, 현재 논리 부분은 이미 완성되었습니다. 당신이 해야 할 일은 index.tsx 에서 상술한 함수를 호출하는 것입니다.

배치 설명: 모듈을 찾을 수 없음: "fs" 지원을 처리할 수 없음

얼굴에 있는api부터js는 node에서도 사용할 수 있습니다.js, 일부는 fs를 사용합니다.단, 물론 브라우저를 사용하여 실행할 때 fs가 필요하지 않기 때문에 이 부분에 배치할 때 오류가 발생할 수 있습니다.
따라서 브라우저에서 실행할 때 fs를 사용하지 않는다는 것을 명확하게 설명할 필요가 있다.
이 부분은 다음 호에서 보도될 것이다.
https://github.com/justadudewhohacks/face-api.js/issues/154
그리고 다음 걸로 바꿔요.배치하다.js는 다음과 같다.

// next.config.js
module.exports = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        fs: false,
      };
    }
    return config;
  },
};

필요한 경우 my github를 참조하십시오.

이렇게!

이 글은 매주 적어도 한 편의 글을 쓰는 12주째다.
만약 당신이 원한다면, 나의 이전 매주 댓글을 보십시오.
곧 당신을 만날 것을 기대합니다!

연락처

만약 당신이 일자리를 제공하거나 나에게 몇 가지 질문을 하고 싶다면, 나에게 메시지를 남겨 주세요.

[email protected]