MediaPipe와 Tensorflow.js로 브라우저에서 홍채인식하기

November 04, 2020

본 게시글은 구글 소프트웨어 엔지니어 Ann Yuan 과 Andrey Vakunov의 포스팅을 번역하였습니다.

 

홍채인식은 다양한 분야에서 사용된다.

예를 들면 신체기능중 일부가 본래의 기능을 못하게 된 사람들을 위한 손이 필요없는 인터페이스나,

단순한 클릭이나 제스쳐를 넘어서 사용자의 행동을 이해하려는 시도에도 적용된다.

그래서 홍채인식은 컴퓨터비전의 숙제이기도 하다.

눈은 밝은 조명 아래에 있을 때도 있고, 종종 머리카락에 가려질 때도 있고,

단지 머리를 움직이기나, 또는 감정상태에 의해 움직여지는 것도

매번 다르게 인식될 수가 있다.

 

여기에 대한 해결책은 특별히 설계된 하드웨어에 의존하거나,

지나치게 비싼 장비를 준비하는 것뿐이다.

이러한 접근방식은 컴퓨터 리소스가 제한된 모바일 장치에는 적합하지 않다.

홍채를 인식하여 색을 입힌 예시입니다.

 

이제 TensorFlow.js 얼굴 인식점 감지 모델에서 홍채인식도 가능하게 되었다.

이것은 MediaPipe Iris 모델에서  가능하며, 

원래의 facemesh 모델은 더 이상 지원하지 않고

향후 얼굴 인식점 감지 모델이 업데이트될 예정이다.

 

홍채인식은 사람들이 보고 있는 위치를 추론하는 것이 아니며,

어떠한 형태로도 신원을 특정하지 않는다.

또한 모델의 문서와 함께 제공되는 모델 카드에서

해당 모델의 의도와 사용처, 제한 및 공정성에 대해 자세히 설명한다.

(구글 AI원칙에 따라 조정됨.)

 

MediaPipe 홍채 모델은 특수한 하드웨어가 없어도

실시간으로 단일 RGB 카메라를 사용하여 홍채와 동공의 인식점을 추론할 수 있다.

또한 이 모델은 눈꺼풀과 눈썹 영역의 인식점을 반환하여 깜박임과 같은 약간의 눈 움직임을 감지할 수 있다.

지금 브라우저에서 바로 사용해보려면 여기 링크를 누르면 된다.

 

@TensorFlow/face-landmarks-detection을 소개합니다.

왼쪽은 facemesh 0.0.4의 추론이고, 오른쪽은 face-landmarksdetection 0.0.1의 추론이다. 참고로 홍채 인식점은 빨간색이다.

기존 facemesh 모델에 익숙한 사용자는 아래에 자세히 설명된 몇 가지 코드변경만으로

새로운 faceLandmarksDetection 모델로 업그레이드 할 수 있다.

faceLandmarksDetection은 facemesh에 비해 세 가지 주요 개선 사항을 제공한다.

• 홍채 키 포인트 감지
• 눈꺼풀 윤곽 감지 개선
• 회전된 얼굴에 대한 인식율 개선

이러한 개선 사항들은 위의 GIF에서 강조 표시되어

faceLandmarksDetection 및 facemesh에서 반환된 인식점이 얼마나 다른 지를 한 눈에 보여준다.

 

설치하는 법

faceLandmarksDetection 패키지를 설치하는 방법에는 두 가지가 있다.

첫번째는 스크립트를 통해 :

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.6.0/dist/tf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/face-landmarks-detection"></script>

 

npm 또는 yarn을 통해 :

$ yarn add @tensorflow-models/face-landmarks-detection@0.0.1
$ yarn add @tensorflow/tfjs@2.6.0

 

사용법

패키지가 설치되면 모델 가중치를 로드한 다음 이미지를 전달하여 얼굴 인식점 감지를 시작하면 된다.

// If you are using NPM, first require the model. If you are using script tags, you can skip this step because `faceLandmarksDetection` will already be available in the global scope.
const faceLandmarksDetection = require('@tensorflow-models/face-landmarks-detection');
 
// Load the faceLandmarksDetection model assets.
const model = await faceLandmarksDetection.load(
    faceLandmarksDetection.SupportedPackages.mediapipeFacemesh);
 
// Pass in a video stream to the model to obtain an array of detected faces from the MediaPipe graph.
// For Node users, the `estimateFaces` API also accepts a `tf.Tensor3D`, or an ImageData object.
const video = document.querySelector("video");
const faces = await model.estimateFaces({ input: video });

 

입력값으로 주어지는 estimateFaces는

비디오, 정적이미지, tf.Tensor3D 또는 node.js 파이프라인으로 부터 얻어진 ImageData 객체도 주입이 가능하다.

그런 다음 FaceLandmarksDetection은

각 얼굴에 대한 정보(예 : 신뢰도 점수 및 얼굴 내 478개의 인식점 위치)를 포함하는

입력(얼굴)에 대한 예측 값으로 된 배열을 반환한다.

 

아래에서 샘플로 확인해볼 수 있다.

{
    faceInViewConfidence: 1,
    boundingBox: {
        topLeft: [232.28, 145.26], // [x, y]
        bottomRight: [449.75, 308.36],
    },
    mesh: [
        [92.07, 119.49, -17.54], // [x, y, z]
        [91.97, 102.52, -30.54],
        ...
    ],
 	    // x,y,z positions of each facial landmark within the input space.
    scaledMesh: [  
        [322.32, 297.58, -17.54],
        [322.18, 263.95, -30.54]
    ],
    // Semantic groupings of x,y,z positions.
    annotations: {
        silhouette: [
            [326.19, 124.72, -3.82],
            [351.06, 126.30, -3.00],
            ...
        ],
        ...
    }
}

나머지 자세한 내용은 README API에서 확인할 수 있다.

 

성능 평가

FaceLandmarksDetection은 3MB 이하의 가중치만 포함하는 가벼운 모델로

다양한 모바일 장치에서 실시간 추론에 적합하다.

테스트를 위해서 TensorFlow.js는 저가형 GPU가 있는 기기용 패키지와

WebGL 및 WebAssembly(WASM)를 포함하여 여러 백엔드 선택지를 제공한다.

아래의 표는 여러 기기와 TensorFlow.js 백엔드에서 패키지가 얼마나 잘 동작하는 지를 보여준다.

Desktop :

Mobile :

모든 벤치 마크는 Chrome브라우저에서 수집되었다.

TF.js WebAssembly 백엔드에 대해 SIMD를 활성화하는 방법에 대한 자세한 내용은

이전 블로그 게시물을 참조하면 된다.

 

앞으로의 계획

TensorFlow.js 및 MediaPipe 팀은 개선된 홍채 인식좌표을 사용하여

얼굴 인식점 감지 솔루션에 3차원 깊이를 추론하는 기능을 추가할 계획이다.

우리는 재생산성이 높은 연구와 빠른 테스트를 가능하게 하는 코드 쉐어링을 믿으며

더 넓은 커뮤니티가 MediaPipe 홍채 모델을 어떻게 사용하는 지 기대하고 있다.

 

데모 사용하기!

본인의 브라우저에서 새로운 패키지를 사용해보고 싶다면 해당 링크를 누르면 된다.

 

유익한 정보들

• MediaPipe Iris 모델에 대해 더 알아보고 싶다면 : MediaPipe Iris
• 모델의 의도와 제한, 공정성에 대해 알아보고 싶다면 : Model Card
• MediaPipe Iris의 소개가 적힌 원래 구글 인공지능의 포스팅을 읽고 싶다면 : Real-time  Iris Tracking & Depth Estimataion
• arXiv에 대한 논문을 읽고 싶다면 : Real-time Pupil Tracking from Monocular Video for Digital Puppetry

 

이상 번역을 마치겠습니다.

해당 포스팅에서 web assembly에 대한 언급이 나오는데 

저도 관심이 많기 때문에 추후에 꼭 포스팅하도록 하겠습니다.

감사합니다. : )