눈코입 맞추기 게임 만들기 2편

눈코입 맞추기 게임 만들기 1편

---

문제점

1편에서는, 사진에서 얼굴 부분의 비율이 작으면 얼굴을 제대로 찾지 못한다는 문제가 있었다.

1편에서의 문제

1편의 마지막에 얼굴 부분만 잘라낸 이미지에서 face landmark를 찾도록 했더니 결과가 개선되는 것을 확인했으니, 이 작업을 그대로 코드로 작성했다.

변경할 파이프라인

해결

먼저 이미지에서 얼굴을 찾는 API로 faceapi.detectAllFaces 를 사용할 수 있다.
한 번의 호출로 이미지에서 찾은 모든 얼굴들의 bounding box 배열을 반환한다.

const options = new faceapi.SsdMobilenetv1Options({ minConfidence: 0.5 });
cosnts faces = await faceapi.detectAllFaces(currentImg, options);

대신 위 함수를 호출하기 전에, 아래와 같이 ML 모델을 먼저 로드해야한다.

async function loadModel() {
  const url =
    'https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@0.22.2/weights/';
  await faceapi.loadFaceLandmarkModel(url);
  await faceapi.loadSsdMobilenetv1Model(url); // SSD 모델을 추가로 로드
}

이렇게 변경했더니 안정적으로 얼굴 퍼즐이 만들어졌다.

여러 얼굴들 한 번에 스캔

어차피 얼굴을 찾는 API가 찾은 얼굴마다의 bounding box를 배열로 반환하기 때문에, 얼굴마다 캔버스를 생성해서 여러 퍼즐을 만들 수 있다.

NCT 127 사진으로 만들어 본 퍼즐

해치웠나

거의 완성된 것 같지만 아직 문제가 하나 남아있다.

비투비 사진으로 만들어 본 퍼즐

얼굴이 기울어져있다면 그 상태에서 눈코입을 잘라 만들기 때문에... 위와 같은 비투비 사진의 임현식처럼 누군가에게 사과해야 할 수도 있는 케이스가 생기고 만다.

그리고 지금 보니까 아랫입술 부분이 계속 잘리는 것 같다. 아무래도 퍼즐을 만들때 원본 이미지의 비율을 유지하면서 중앙이 밀린 모양인데, 이것도 수정해야할 듯 싶다.

만약 시간이 남으면 3편에서는 얼굴의 각도를 보정해보도록 하겠다.

코드

전체 코드는 아래에서 확인할 수 있다.

GitHub - joonas-yoon/face-quiz

직접 해보기

위 코드를 GitHub Pages 로 배포하고 있어서 직접 이미지로 만들어 볼 수 있다.

Face Quiz