웹용 FaceApi 기계 학습 모델에 대한 빠른 가이드 - ML5.js

4999 단어 beginnersjavascriptapimachinelearning

ML5.js란 무엇입니까?



ml5.js는 웹 브라우저에서 웹용 기계 학습입니다. 몇 가지 영리하고 흥미로운 발전을 통해 TensorFlow.js를 구축하는 사람들은 웹 브라우저의 내장 그래픽 처리 장치(GPU)를 사용하여 중앙 처리 장치(CPU)를 사용하여 매우 느리게 실행되는 계산을 수행할 수 있음을 알아냈습니다. ml5는 모든 사람이 웹에서 기계 학습의 이러한 모든 새로운 개발에 더 쉽게 접근할 수 있도록 노력하고 있습니다.

ML5.js에 대해 내가 찾은 놀라운 점은 초보자가 시작하기가 정말 쉽고 기계 학습 모델 실행에 대한 좋은 아이디어도 제공한다는 것입니다.

시작하기



ML5는 놀랍도록 사용하기 쉬운 얼굴 API를 제공합니다. 얼굴 및 얼굴 랜드마크 감지에 액세스할 수 있는 이 face-api.js를 제공합니다.

기본 HTML 페이지 만들기

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>face-api</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/ml5js/Intro-ML-Arts-IMA@ml5-build-10-7-19/ml5_build/ml5.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>


Ml5.js와 가장 잘 작동하는 p5.js도 가져오고 있습니다.
필요한 모든 항목을 가져오면 sketch.js를 시작할 수 있습니다.

따라서 기본 아이디어는 시작할 때 비디오 요소를 만드는 것입니다. 한 번

// initialized variables
let faceapi;
let detections = [];

let video;
let canvas;

function setup() {
  canvas = createCanvas(1080, 720); // canvas window
  canvas.id("canvas");

  // getting video of user
  video = createCapture(video);
  video.id("video");
  video.size(width, height);

  // making face details
  const faceOptions = {
    withLandmarks: true,
    withExpressions: true,
    withDescriptors: true,
    minConfidence: 0.5,
  };

  //Initialize the model:
  faceapi = ml5.faceApi(video, faceOptions, faceReady);
}


비디오 및 캔버스와 같은 일부 변수를 초기화하여 비디오 요소를 설정합니다. ML5용 배열faceOption을 생성했으며 모델을 초기화할 때 보낸 얼굴 데이터에 대한 세부 정보를 반환합니다. 얼굴을 감지하기 위한 것이므로 이 프로젝트에 ml5.faceapi()를 사용했습니다. 비디오 요소에서 얼굴이 감지되면 이를 호출해야 합니다.

// on face detection
function faceReady() {
  faceapi.detect(gotFaces);
}


여기서 gotFaces는 콜백 함수이므로 faceApi가 얼굴을 감지하면 다른 함수를 만들어 보겠습니다.
까다로운 부분입니다!

// Got faces:
function gotFaces(error, result) {
  if (error) {
    console.log(error);
    return;
  }

  detections = result; //Now all the data in this detections:

  clear(); //Draw transparent background;:
  drawBoxs(detections); //Draw detection box:
  drawLandmarks(detections); //// Draw all the face points:

  faceapi.detect(gotFaces); // Call the function again at here:
}


얼굴 세부 정보를 얻으면 탐지 변수에 세부 정보를 저장하고 다음 단계에서 발생한 이전 화면 렌더링을 지웁니다.
다음으로 사용자의 얼굴 위에 상자와 얼굴 랜드마크를 그려야 합니다.

여기서 우리는 상자 사용자의 얼굴을 그리는 두 가지 기능을 만듭니다.

function drawBoxs(detections) {
  if (detections.length > 0) {
    //If at least 1 face is detected:
    for (f = 0; f < detections.length; f++) {
      let { _x, _y, _width, _height } = detections[f].alignedRect._box;
      stroke(44, 169, 225);
      strokeWeight(1);
      noFill();
      rect(_x, _y, _width, _height);
    }
  }
}


위의 경우 detections 배열에 체크인하면 하나 이상의 얼굴이 감지되면 Ml5 라이브러리의 도움으로 제공되는 좌표의 도움으로 상자를 만듭니다. 이전clear() 함수에서 gotFaces()를 수행한 것을 기억하십니까? 얼굴이 감지되면 그 주위에 상자를 만들고 몇 프레임 후에 상자를 지우고 다시 만듭니다. 좌표를 업데이트하기 위해.

이제 얼굴 랜드마크를 만들기 위해 유사한 작업을 수행합니다.

function drawLandmarks(detections) {
  if (detections.length > 0) {
    //If at least 1 face is detected:
    for (f = 0; f < detections.length; f++) {
      let points = detections[f].landmarks.positions;
      for (let i = 0; i < points.length; i++) {
        stroke(47, 255, 0); // points color
        strokeWeight(5); // points weight
        point(points[i]._x, points[i]._y);
      }
    }
  }
}


여기서 랜드마크 포인트와 좌표는 ML5 api에 의해 반환됩니다.

캔버스 중앙에 몇 가지 기본 CSS를 추가합니다.

body {
  background-color: #000;
}

#canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  border: 3px #fff solid;
  border-radius: 10px;
}



그리고 우리의 얼굴 감지 응용 프로그램이 준비되었습니다!
이 기본 시작 가이드가 마음에 드셨기를 바랍니다. 읽어 주셔서 감사합니다
GitHub - Vamos de Matemática
Rxjs로 쉬운 캐싱

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage