使用tensorflow.js的facemesh对人脸进行三维特征点追踪标记

TensorFlow 最近在博客发文表示发布了两款新的软件包:facemesh 和 handpose,分别用于跟踪面部和手部的关键特征点。这两个软件包是由 MediaPipe 和谷歌研究部门的 TensorFlow.js 团队合作完成的。

项目 链接
Tensorflow.js https://github.com/tensorflow/tfjs-models/tree/master/facemesh
ml5 https://github.com/ml5js/ml5-library/tree/development/examples/p5js/Facemesh/Facemesh_Webcam

index.html

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Facemesh with Webcamtitle>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js">script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js">script>
    <script src="http://localhost:8080/ml5.js" type="text/javascript">script>

    <style>style>
  head>

  <script src="sketch.js">script>

  <body>
    <h1>Facemesh with Webcamh1>
  body>
html>

sketch.js

let facemesh;
let video;
let predictions = [];

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(width, height);

  facemesh = ml5.facemesh(video, modelReady);

  // This sets up an event that fills the global variable "predictions"
  // with an array every time new predictions are made
  facemesh.on("predict", results => {
    predictions = results;
  });

  // Hide the video element, and just show the canvas
  video.hide();
}

function modelReady() {
  console.log("Model ready!");
}

function draw() {
  image(video, 0, 0, width, height);

  // We can call both functions to draw all keypoints
  drawKeypoints();
}

// A function to draw ellipses over the detected keypoints
function drawKeypoints() {
  for (let i = 0; i < predictions.length; i += 1) {
    const keypoints = predictions[i].scaledMesh;

    // Draw facial keypoints.
    for (let j = 0; j < keypoints.length; j += 1) {
      const [x, y] = keypoints[j];

      fill(0, 255, 0);
      ellipse(x, y, 5, 5);
    }
  }
}

你可能感兴趣的:(node.js,神经网络,tensorflow,机器学习,javascript)