1. 다른 재미있는게 없을까?
영상통화 웹사이트를 기획하다가 무언가 더 추가하면 재미있을 것 같다는 생각이 들었다. 그러다가 Tenserflow.js를 통해 웹에서 ML 모델을 사용할 수 있다는 것을 알게되었다.
2. 사용할 라이브러리?
TensorFlow는 머신러닝을 위한 엔드 투 엔드 오픈소스 플랫폼입니다. TensorFlow
TensorFlow.js는 브라우저 및 Node.js에서 머신러닝 모델을 학습시키고 배포하기 위한 자바스크립트 라이브러리입니다. TensorFlow.js
ml5.js는 TensorFlow.js를 사용하기 위한 오픈소스 인터페이스입니다. ml5.js
p5.js는 웹상에서 영상, 인터랙션등을 쉽게 구현할 수 있도록 기능을 제공하는 자바스크립트 라이브러리입니다. p5.js
정리하자면, TensorFlow는 python, C++로 작동하는 머신러닝 플랫폼이고, TenserFlow.js는 TensorFlow의 자바스크립트 버전이며, ml5.js는 TensorFLow.js 쉽게 사용하게 만들어주는 라이브러리다.
3. 예시
4. 샘플코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script>
</head>
<body>
<script src="main.js"></script>
</body>
</html>main.js
let capture;
let poseNet;
let pose;
let skeleton;
function setup() {
createCanvas(640, 480);
video = createCapture(VIDEO);
video.hide();
poseNet = ml5.poseNet(video, modelLoaded);
poseNet.on('pose', gotPoses);
}
function gotPoses(poses) {
if (poses.length > 0) {
pose = poses[0].pose;
skeleton = poses[0].skeleton;
}
}
function modelLoaded() {
console.log('poseNet ready');
}
function draw() {
translate(video.width, 0);
scale(-1, 1);
image(video, 0, 0, video.width, video.height);
if (pose) {
let eyeR = pose.rightEye;
let eyeL = pose.leftEye;
let distance = dist(eyeR.x, eyeR.y, eyeL.x, eyeL.y);
for (let i = 0; i < pose.keypoints.length; i++) {
let x = pose.keypoints[i].position.x;
let y = pose.keypoints[i].position.y;
fill(0, 255, 0);
ellipse(x, y, distance / 3);
}
for (let i = 0; i < skeleton.length; i++) {
let a = skeleton[i][0];
let b = skeleton[i][1];
strokeWeight(2);
stroke(255);
line(a.position.x, a.position.y, b.position.x, b.position.y);
}
}
}
I build stuff.