분류 javascript

TensorFlow.js로 모나리자 효과에 생명을 불어 넣다

컨텐츠 정보

  • 조회 304 (작성일 )

본문

배경 


도시의 전설에 따르면 방을 돌아 다닐 때 모나리자의 눈이 당신을 따라갈 것이라고 합니다. 이를 "모나리자 효과"라고 합니다. 재미로 저는 최근에 브라우저와 웹캠을 통해 이 현상을 생생하게 표현하는 인터랙티브 디지털 초상화를 프로그래밍 했습니다.


https://blog.tensorflow.org/2020/09/bringing-mona-lisa-effect-to-life-tensorflow-js.html


monalisa.gif 



핵심에서 이 프로젝트는 TensorFlow.js, 딥 러닝 및 일부 이미지 처리 기술을 활용합니다. 일반적인 아이디어는 다음과 같습니다. 먼저 왼쪽에서 오른쪽으로 응시하는 눈으로 모나리자의 머리 이미지 시퀀스를 생성해야 합니다. 이 풀에서 시청자의 위치에 따라 실시간으로 단일 프레임을 지속적으로 선택하여 표시합니다.


이 게시물에서는 프로젝트의 기술 설계 및 구현에 대한 세부 사항을 살펴 보겠습니다.


딥 러닝으로 모나리자 애니메이션 


영상 애니메이션은 운전 영상을 통해 정지 영상을 인형으로 조종 할 수 있는 기술입니다. 딥 러닝 기반의 접근 방식을 사용하여 모나리자의 시선을 매우 설득력 있는 애니메이션으로 만들 수 있었습니다.


특히 Aliaksandr Siarohin 등이 발표 한 FOMM (First Order Motion Model)을 사용했습니다. 매우 높은 수준에서 이 방법은 모션 추출을 위한 모듈과 이미지 생성을 위한 모듈의 두 가지 모듈로 구성됩니다. 모션 모듈은 주행 비디오에서 키포인트 및 로컬 아핀 변환을 감지합니다. 연속적인 프레임 사이의 이러한 값의 차이는 수정하거나 상황에 따라 추론해야 하는 이미지 영역을 지정하는 폐색 마스크와 함께 조밀 한 모션 필드를 예측하는 네트워크에 대한 입력으로 사용됩니다. 그런 다음 이미지 생성 네트워크는 얼굴 랜드 마크를 감지하고 모션 모듈의 결과에 따라 뒤틀리고 칠해진 소스 이미지 인 최종 출력을 생성합니다.


특히 사용하기 쉽기 때문에 FOMM을 선택했습니다. 이 도메인의 이전 모델은 "개체 별"이어서 애니메이션 할 개체의 세부 데이터가 필요했지만 FOMM은 이에 대해 불가지론 적으로 작동했습니다. 더 중요한 것은 저자가 얼굴 애니메이션에 대해 사전 훈련 된 가중치를 사용하여 바로 사용할 수 있는 오픈 소스 구현을 출시했다는 것입니다. 이 때문에 모델을 Mona Lisa에 적용하는 것은 놀랍도록 간단한 작업이 되었습니다. Repo를 Colab 노트북에 복제하고 눈이 움직이는 짧은 운전 비디오를 제작하고 스크린 샷과 함께 모델을 통해 공급했습니다. La Gioconda의 머리. 그 결과 영화는 훌륭했습니다. 이로부터 최종 애니메이션을 구성하기 위해 최종적으로 33 개의 이미지를 샘플링 했습니다.


FOMMgenerated.gif 


firstordermotionmodel.png이미지 블렌딩 


프로젝트 목적에 맞게 모델을 재교육 할 수 있었지만, 그렇지 않으면 필요했던 시간과 계산 리소스를 피하기 위해 Siarohin 가중치의 제약 내에서 작업하기로 결정했습니다. 그러나 이는 결과 프레임이 원하는 것보다 낮은 해상도로 고정되고 피사체의 머리만으로 구성되었음을 의미합니다. 하지만 최종 비주얼에는 손, 몸통, 배경 등 모나리자 전체가 포함되기를 원했기 때문에 출력 헤드 프레임을 그림 이미지에 겹쳐 놓는 것이었습니다.


Mona Lisa 


그러나 이것은 자체적인 도전을 낳았습니다. 위의 예를 살펴보면 모델의 저해상도 출력 (FOMM의 뒤틀림 절차로 인한 일부 미묘한 부수적 배경 변경과 함께)으로 인해 헤드 프레임이 시각적으로 돌출되는 것을 알 수 있습니다. 즉, 이것이 다른 사진 위에 있는 사진이라는 것이 조금 분명했습니다. 이 문제를 해결하기 위해 머리 이미지를 기본 이미지로 "혼합"하기 위해 Python에서 몇 가지 이미지 처리를 수행했습니다.


먼저 헤드 프레임의 크기를 원래 해상도로 조정했습니다. 거기에서 저는 이러한 흐릿한 픽셀과 기본 이미지의 해당 픽셀의 가중치 평균을 사용하여 새 프레임을 만들었습니다. 여기서 헤드 프레임의 픽셀의 가중치 (또는 알파)는 중간 점에서 멀어짐에 따라 감소합니다.


알파를 결정하는 함수는 2D 시그 모이 드에서 조정되었으며 다음과 같이 표현됩니다.


function.png 




여기서 j는 로지스틱 함수의 기울기를 결정하고 k는 변곡점, m은 입력 값의 중간 점입니다. 그래프로 표시하면 함수는 다음과 같습니다.


Function graph 



위의 절차를 애니메이션 세트의 모든 33 개 프레임에 적용한 후 결과 중첩은 의심하지 않는 눈에 각각 단일 이미지로 나타납니다.


superimpositions.png 


BlazeFace를 통해 시청자의 머리 추적 


이 시점에서 남은 것은 웹캠을 통해 사용자를 추적하고 해당 프레임을 표시하는 방법을 결정하는 것입니다.


당연히 TensorFlow.js를 사용했습니다. 이 라이브러리는 시각적 입력이 주어진 사람의 존재를 감지하는 상당히 강력한 모델 세트를 제공했지만 몇 가지 연구와 생각 끝에 BlazeFace를 선택 방법으로 선택했습니다.


BlazeFace는 사람의 얼굴과 얼굴 랜드 마크를 감지하는 딥 러닝 기반 객체 인식 모델입니다. 모바일 카메라 입력을 사용하도록 특별히 훈련되었습니다. 대부분의 시청자가 자신의 머리가 프레임에 있고 전면을 향하고 카메라에 상당히 가까운 방식으로 모바일 장치를 통하든 카메라에 있든 비슷한 방식으로 웹캠을 사용하기를 기대했기 때문에 이것은 제 사용 사례에 적합했습니다. 노트북.


그러나 이 모델을 선택할 때 가장 중요한 고려 사항은 탁월한 감지 속도였습니다. 이 프로젝트를 설득력 있게 만들기 위해 얼굴 인식 단계를 포함하여 전체 애니메이션을 실시간으로 실행할 수 있어야 했습니다. BlazeFace는 경계 상자를 동시에 제안하고 네트워크의 단 한 번의 순방향 패스에서 객체를 감지하는 딥 러닝 기반 객체 감지 알고리즘 인 싱글 샷 감지 (SSD) 모델을 채택합니다. BlazeFace의 경량 감지기는 초당 200 프레임의 빠른 속도로 얼굴 랜드 마크를 인식 할 수 있습니다.


BlazeFace%2Bdemo.png 


모델을 결정한 후 사용자의 웹캠 데이터를 BlazeFace로 계속 파이프 하는 코드를 작성했습니다. 각 실행에서 모델은 일련의 얼굴 랜드 마크와 해당 2D 좌표 위치를 출력했습니다. 이를 사용하여 눈 사이의 중간 점을 계산하여 얼굴 중심의 X 좌표를 근사했습니다.


마지막으로 이 결과를 0에서 32 사이의 정수로 매핑했습니다. 기억 하시겠지만 이 값은 각각 애니메이션 시퀀스의 프레임을 나타냅니다. 0은 왼쪽에 눈이 있는 모나리자를 나타내고 32는 권리. 거기에서 화면에 프레임을 표시하는 문제였습니다.


그것을 시도하십시오! 


monalisaeffect.com에서 프로젝트를 재생할 수 있습니다.