브라우저에서 자세 추정에 대한 정보를 탐색하기 (MediaPipe JavaScript 버전, TensorFolow.js, BlazePose, MoveNet)

트위터에서'MoveNet'이라는 키워드를 보고 기존에 시도했던 미디어피프(JavaScript 에디션)와 자세 추측이 다르다는 점에 신경을 썼기 때문에 살짝 조사해봤다.
그나저나 여기 트위터에서 봤어요.
Huge congratulations! Been following your progress for a while now and super excited to see this. Thank you for being part of the #TensorFlowJS community 🙏 really great work! PS have you tried #MoveNet with this too?— Jason Mayes (@jason_mayes) July 14, 2021

MediaPipe(JavaScript Edition)의 자세 추정

MediaPipe의 자바스크립트 버전은 다음과 같다홈페이지 내용대로 2021년 7월 14일까지 6개 처리 가능.

이번에 열거할 것은 여섯 개 중 하나MediaPipe Pose입니다.

참고로 다른 5개는 어떤 물건일까요? 사람의 얼굴, 손 등을 식별하는 물건도 있고, 배경과 분리된 물건도 있습니다.br/>
나는 실제적으로 그 상황을 애니메이션으로 만들어 본 것이 있기 때문에 이 보도의 마지막에 몇 가지를 게재해 보려고 한다p>

MediaPipe Pose에서 사용되는 Blaze Pose

MediaPipe Pose의 페이지를 보고 "Blaze Pose"는 그곳에서 사용하는 물건의 이름으로 나타났습니다.br/>

BlazePose에서 검색하면 다음과 같은 링크가 나타납니다.p>

1. BlazePose: On-device Real-time Body Pose tracking
2. Google AI Blog: On-device, Real-time Body Pose Tracking with MediaPipe BlazePose

첫 번째는 ARXiv 페이지에 링크돼 컴퓨터 비주얼 관련 유명 국제학회 CVPR(Computer Vision and Pattern Recongnition)에 발표된 논문에 대한 정보입니다.p>
두 번째는'디바이스에서 실시간으로 자세를 추정할 수 있는 미디어피프 블레이즈포스트'라는 제목의 구글 AI 블로크의 기사다.br/>
그리고 두 번째 글에서 어떤 식별 결과를 그림과 결합시켜 소개할 것인가br/>

문장에서도 썼는데, 몸에서 33개의 관건을 검출할 수 있다br/>
상술한 블로그 보도와 MediaPipe Pose의 공식 페이지에서 실례를 볼 수 있는데 그걸 보면 가장 이해하기 쉽다고 생각합니다.p>

MoveNet 정보

그럼, 처음에 쓴 "MoveNet"을 제가 펼친 내용을 보고 싶어요.p>

다음은 공식 자습서 페이지의 URL입니다.

● MoveNet: 초고속 정확한 자세 검측 모형. |  TensorFlow Hub

　 https://www.tensorflow.org/hub/tutorials/movenet

의 첫머리에는 다음과 같은 기록이 있습니다:

MoveNet은 신체 17개 관건 부위를 측정하는 초고속, 정확한 모델이다.이 모델은 번개와 번개로 불리는 두 개의 변형 TF 허브를 제공한다.Lightning은 지연이 중요한 응용을 대상으로, Thunder는 고정밀이 필요한 응용을 대상으로 한다.최신 데스크탑, 노트북 및 전화는 어떤 모델이든지 대부분의 실시간(30+FPS)보다 빠르게 작동합니다.p>

BlazePose에서 몸에서 33개의 포인트를 얻었지만 17개의 포인트br/>
또한 Lightning과 Thunder는 속도를 중시하는지 정밀도를 중시하는지 두 가지가 있다.p>

다음은 공식 블로그 기사입니다

●Next-Generation Pose Detection with MoveNet and TensorFlow.js — The TensorFlow Blog

　 https://blog.tensorflow.org/2021/05/next-generation-pose-detection-with-movenet-and-tensorflowjs.html

보도에서 브라우저에서 실행될 때의 퍼포먼스 언급br/>
여러 장치의 데이터에서 WebGL과 WASM이 게재되었는데 대충 보니 프레임률이 좋은 수치가 나온 것 같았다br/>

재보기 기사에 콘서트 시연용 링크가 실렸다

　 https://storage.googleapis.com/tfjs-models/demos/pose-detection/index.html?model=movenet

그 URL의 페이지를 열면 설정을 변경할 수 있는 부분(화면 오른쪽), 식별 결과를 표시할 수 있는 부분 등의 프레젠테이션 페이지가 나타납니다



위의 이미지는 얼굴에만 비치기 때문에 포인트는 5개입니다...

아까 성능표에 적힌 바와 같이 프레임 속도가 30fps를 초과한 것 같다(※ 위 그림에 표시된 화면 왼쪽 상단).

나도 원본 코드 등을 검사하고 싶지만, 다른 기회가 있을 것 같아.p>

끝말

트위터에서 볼 수 있는 자세 추측의 모브넷에 대해 미디어피프 자바스크립트 버전의 자세 추측(BlazePose)과 차이점을 간단하게 조사하고 정보를 골랐습니다.p>

아직 원본 코드를 구하지 못했기 때문에 앞으로 계속 진행할 수 있다면p>

주제 밖의 말: 미디어피프의 자바스크립트 버전에 설치해 본 다양한 것들(일부만)

글에 적힌 자바스크립트 버전의 미디어 피프 6가지 처리 중'Hands','Selfie Segmentation'을 이용하여 HTML+자바스크립트로 실시된, 브라우저에서 실행된 시용 작품 중 일부를 소개하고 싶습니다.p>
참고로 이런 것들을 시작한 계기는 브라우저에서 실행되는 미디어피프 핸즈의 자바스크립트 버전 프레젠테이션을 한 번 시도한 적이 있다는 점입니다.br/>
그때는 두 손이 바삭바삭한 고정밀도를 잘 인식하는 모습에 놀라 "즐거운 일에 활용됐으면 좋겠다"고 생각했다.그리고 먼저 자신이 쓴 처리를 혼합하여 한번 돌려보려고 다음과 같은 내용을 손으로 썼다p>

MediaPipe Hands 및 p5.js 조합 사각형에 따라 그리기

MediaPipe Hands로 양손 인식, 각각의 손끝을 기점으로 직사각형 그리기br/>
또한 직사각형의 크기를 엄지손가락 끝과 검지손가락 끝의 거리에 따라 변화시키는 처리도 실현되었다p>