[Javascript] Face-detection 웹에서 해보기

HTML, Javascript, CSS 배운지 이틀? 삼일? 밖에 안되어서 구성은 정말 허접하다..

 

일단 Face-detection model은 에서 https://trackingjs.com/ 다운로드 받았고

작업 환경은 구름ide이며

서버 코드는 깃허브의 https://github.com/gaibee/university_pass에 업로드 해놓았다.

호스팅은 http://app.netlify.com을 이용하였다.

 

이용된 Javascript는 trackingjs 라이브러리를 포함하여 jquery도 함께 이용되었고

CSS로는 bootstrap과 내 개인적인 코드가 포함되었고 이미지 업로드에는 codepen의 자료를 참고하였다.

(출처 : https://codepen.io/aaronvanston/pen/yNYOXR)

 

완성된 사이트 :

https://detect-your-face.netlify.app/

 

 

ADD IMAGE를 통해 사진을 업로드하고 예측하기 버튼을 누르면 1) 사람의 얼굴, 2) 눈 3) 입 의 위치를 인공지능 모델이 예측하여 Bonding box로 표시해준다.

 

맨날 파이썬으로만 Neural network 모델을 만지다가 js와 웹으로 이런 것들을 해보니 신기하고 좋은 경험이었다.