HyperAI 소개
불행한 일은 잊어버리세요. 아직도 브라우저를 잘 만드는 사람들이 있으니까요.
최근 엔지니어 그룹은 tensorflow.js 핵심 프레임워크인 face-api.js를 기반으로 브라우저에서 실행될 수 있는 얼굴 인식 API를 개발했습니다. 이 API는 여러 얼굴을 동시에 인식할 수 있을 뿐만 아니라,더 많은 비전문 AI 엔지니어가 저렴한 비용으로 얼굴 인식 기술을 사용할 수 있도록 허용합니다.
얼굴 인식 원리
face-api.js는 Tensorflow.js 코어를 기반으로 하는 js 프레임워크입니다. 이 알고리즘은 세 가지 유형의 CNN을 사용하여 얼굴 인식과 얼굴 특징 감지를 수행하여 이미지 속의 사람을 식별합니다.
대부분의 이미지 인식 기술과 마찬가지로, 이 기술은 데이터베이스와 매칭하여 가장 유사성이 높은 이미지를 찾아 결과를 출력하는 방식으로 구현됩니다. 하지만 face-api.js는 이미지에서 여러 얼굴을 동시에 인식할 수 있습니다.
얼굴 인식 기술의 일반적인 작동 원리는 다음과 같습니다. 엔지니어는 먼저 이름과 같은 정보가 표시된 대량의 이미지를 시스템에 입력하여 데이터 학습 세트를 구축한 다음 인식 객체를 테스트 세트로 사용하여 학습 세트의 이미지와 비교합니다.
두 이미지의 유사도가 임계값에 도달하면 결과가 출력되고, 그렇지 않으면 "알 수 없음"이 출력됩니다.
face-api.js의 구현 원리
첫째, 얼굴 검출이 필요합니다. 즉, 이미지에 있는 모든 얼굴을 동그라미로 표시하는 것입니다.
face-api.js는 SSD(Single Shot Multibox Detector) 알고리즘을 사용하여 얼굴 감지를 수행합니다. SSD 알고리즘은 대상 카테고리를 직접 감지하고 경계 상자(일반적으로 b 상자라고 함)를 결정할 수 있는 다중 대상 감지 방법입니다. 이를 통해 인식 정확도와 인식 속도를 동시에 향상시킬 수 있습니다.
SSD는 추가적인 경계 예측 계층이 있는 MobileNetV1 기반 CNN으로 이해할 수 있습니다. 이 시스템은 먼저 경계 상자를 이용해 얼굴 윤곽을 동그라미로 표시하고 점수를 매깁니다. 이미지가 얼굴에 가까울수록 점수가 높아지며, 이를 통해 얼굴이 아닌 이미지 내용이 걸러집니다.
정확성을 보장하려면 테스트 세트에 입력되는 이미지의 중심이 얼굴에 있어야 하므로 얼굴 경계 상자를 정렬해야 합니다. 이를 위해 face-api.js는 간단한 CNN을 사용하여 68개의 랜드마크 포인트를 찾아 얼굴 이미지를 결정하고 얼굴 인식의 다음 단계를 준비합니다.
예
랜드마크 포인트를 통해 시스템은 얼굴 이미지를 더욱 정확하게 판단할 수 있습니다. 다음 그림은 얼굴 정렬 전(왼쪽)과 후(오른쪽)의 효과를 보여줍니다.
얼굴 정렬 효과 다이어그램
분명히 정렬 후에는 얼굴과 관련이 없는 것들이 줄어들어 시스템의 인식 정확도를 높이는 데 도움이 됩니다.
얼굴 인식 구현
얼굴을 동그라미로 표시한 후 얼굴 인식이 시작됩니다.
이 프로그램은 정렬된 얼굴을 얼굴 인식 딥러닝 네트워크에 입력합니다. ResNet-34 시스템 아키텍처, Dlib 라이브러리를 통한 얼굴 감지. 이 기술은 얼굴 특징을 얼굴 설명자(128개 값을 가진 특징 벡터)에 매핑할 수 있는데, 이 과정을 얼굴 임베딩이라고도 합니다.
그 후, 프로그램은 각 이미지의 얼굴 설명자를 훈련 세트의 얼굴 설명자와 비교하고 임계값(150×150 픽셀 얼굴 이미지의 경우 임계값 0.6이 더 적절함)을 기준으로 두 얼굴이 유사한지 여부를 판별합니다.
유클리드 거리(즉, 유클리드 계량)는 유사도 측정에 사용할 수 있으며 매우 효과적입니다. 실제 효과는 아래의 gif 그림에서 확인할 수 있습니다.
말은 쉬워요. 코드를 보여주세요!
이론적 지식을 소개한 후, 이제 실제 과정을 안내해 드리겠습니다. 다음 그림은 입력 이미지로 사용됩니다.
1단계: 스크립트 가져오기
dist/face-api.js에서 최신 스크립트를 받을 수 있습니다.
NPM을 통해서도 얻을 수 있습니다.
2단계: 데이터 모델 로드
모델 파일은 웹 애플리케이션의 정적 리소스로 사용되거나 다른 위치에 마운트될 수 있습니다. 파일 경로나 URL을 지정하여 모델을 로드할 수 있습니다.
모델이 public/models 디렉토리에 있다고 가정합니다.
특정 모델을 로드하는 경우:
3단계: 전체 설명 받기
HTML 이미지, 캔버스 또는 비디오를 네트워크의 입력으로 사용할 수 있습니다. 입력 이미지(모든 얼굴)를 얻는 방법에 대한 전체 설명은 다음과 같습니다.
얼굴 위치와 특징을 직접 선택할 수도 있습니다.
HTML 캔버스를 통해 테두리를 표시하여 결과를 시각화할 수도 있습니다.
얼굴 특징은 아래와 같습니다.
이제 입력 이미지에서 각 얼굴의 위치와 설명자를 계산할 수 있으며, 이는 참조 데이터로 사용될 수 있습니다.
다음 단계는 이미지의 URL을 가져와 사용하는 것입니다. faceapi.bufferToImage HTML 이미지 요소를 만듭니다.
각 이미지에서 얼굴을 찾아 설명자를 계산합니다.
그런 다음 입력 이미지의 얼굴 설명자를 반복하고 참조 데이터에서 가장 유사한 설명자를 찾습니다.
유클리드 행렬을 사용하여 입력 이미지의 각 얼굴에 가장 잘 맞는 항목을 찾고 경계 상자와 레이블을 HTML 캔버스에 표시합니다.
이는 face-api.js를 이용한 얼굴 인식의 전체 과정입니다. 매우 간단하지 않나요?관심 있는 친구들은 시도해 볼 수 있고, 여러분의 실험 결과와 경험을 보내 주시면 감사하겠습니다.