얼굴 표정 훈련 앱 출시: Next.js의 다국어, 동적 OGP, face-api.js의 얼굴 표정 인식

안녕하세요 여러분 저번주에 글을 쓰고 이번주에 얼굴 표정 트레이닝이 가능한 앱을 업데이트해서 출시했습니다.



주요 업데이트는 다음과 같습니다

여러 언어 지원

난이도를 선택하는 기능을 추가했습니다

.

동적 OGP 지원

사용자가 성공하면 계속 진행할 수 있음

전체 디자인 업데이트

전체 코드는 다음과 같습니다.

https://github.com/yuikoito/face-expression-challenge

URL: https://face-expression-challenge.vercel.app/

난이도를 선택하려면 활성화합니다.

매번 같은 난이도를 갖는 것은 바람직하지 않다고 생각하여 난이도를 선택할 수 있도록 했습니다.



쉬움, 보통, 어려움, 악마 중에서 선택할 수 있습니다.

난이도별로 시간을 변경하는 것 외에도 판정 자체를 어렵게 하기 위해 임계값도 변경했습니다.

식을 구하는 부분에서는 아래와 같이 임계값을 사용합니다. (나는 지금부터 detectSingleFace를 사용했습니다)

      const detectionsWithExpression = await faceapi
        .detectSingleFace(video, new faceapi.TinyFaceDetectorOptions())
        .withFaceExpressions();
      if (detectionsWithExpression) {
        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];
        if (
          expression === subject &&
          // Don't make a decision unless it's above the specified threshold here.
          Array[index][1] >= levelConfig[level].threshold
        ) {
          clearInterval(intervalHandler);
          setIsMatch(true);
          setStage("result");
        }
      }

성공하면 다음 주제로 넘어갑니다.

원래는 1.5초 주제를 주고 1.5초 뒤에 판단했는데 성공하면 다음 주제로 넘어가게 하기로 했다.

그래서 1.5초 발표 후 3초 제한 시간을 추가했고, 그 시간 안에 표정이 잘 맞으면 다음 주제로 넘어갈 수 있습니다.

일치하는 항목이 없더라도 3초 이내에 일치하지 않으면 다음 단계로 넘어갑니다.

동적 OGP 지원

결과는 이제 동적 OGP이므로 공유할 때 더 쉽게 이해할 수 있습니다.

배경 이미지와 텍스트가 있는 단순한 구조입니다.
배경 이미지를 표시하기 위해 캔버스 내에서 loadImage를 가져와서 사용했습니다.

  const backgroundImage = await loadImage(
    path.resolve("./images/background.jpg")
  );
  ctx.drawImage(backgroundImage, 0, 0, WIDTH, HEIGHT);

다국어 지원

Next.js는 v10부터 i18n이 내장되어 있으므로 아무것도 가져오지 않고도 다국어화할 수 있습니다.

사전 파일은 TypeScript 파일로 준비되어 있으며 useTranslate.ts라는 파일은 언어에 따라 어떤 것을 로드할지 결정됩니다.

import { useRouter } from "next/router";
import { JaTexts } from "../locales/ja";
import { EnTexts } from "../locales/en";

const useTranlate = () => {
  const { locale } = useRouter();
  return locale === "ja" ? JaTexts : EnTexts;
};

export default useTranlate;

그런 다음 next.config.js에서 다음 설정을 지정하는 것을 잊지 마십시오.

  i18n: {
    locales: ["en", "ja"],
    defaultLocale: "en",
  },

자동으로 해당 언어로 된 파일로 롤백되는 것은 처음 알았네요...

공유 URL이 영어인지 일본어인지에 따라 OGP 부분도 다국어로 만들고 싶어서 공유할 때 locale 매개변수가 공유 URL에 남도록 만들었습니다. (URL이 일본어인 경우 공유 URL은 /ja/share... ) )

이후 전체적인 디자인을 개선해 출시했다.

그게 다야!

이 글은 매주 적어도 하나의 글을 쓰려고 노력하는 17주차 입니다.

궁금하신 분들은 지난 포스팅을 참고해주세요!
곧 봐요!

🍎🍎🍎🍎🍎🍎

필요하시면 쪽지 주세요.

[email protected]

🍎🍎🍎🍎🍎🍎