face landmark example

justadudewhohacks · justadudewhohacks · commit 1cba5ada8e6b · 2018-06-16T12:28:52.000+02:00
diff --git a/examples/public/commons.js b/examples/public/commons.js
@@ -24,6 +24,12 @@ async function initFaceRecognitionNet() {
   return faceapi.faceRecognitionNet(weights)
 }
 
+async function initFaceLandmarkNet() {
+  const res = await axios.get('face_landmark_68_model.weights', { responseType: 'arraybuffer' })
+  const weights = new Float32Array(res.data)
+  return faceapi.faceLandmarkNet(weights)
+}
+
 // fetch first image of each class and compute their descriptors
 async function initTrainDescriptorsByClass(net, numImagesForTraining = 1) {
   const maxAvailableImagesPerClass = 5
@@ -82,6 +88,10 @@ function renderNavBar(navbarId, exampleUri) {
       uri: 'face_similarity',
       name: 'Face Similarity'
     },
+    {
+      uri: 'face_landmarks',
+      name: 'Face Landmarks'
+    },
     {
       uri: 'detect_and_draw_faces',
       name: 'Detect and Draw Faces'
diff --git a/examples/server.js b/examples/server.js
@@ -15,6 +15,7 @@ app.get('/face_detection', (req, res) => res.sendFile(path.join(viewsDir, 'faceD
 app.get('/face_detection_video', (req, res) => res.sendFile(path.join(viewsDir, 'faceDetectionVideo.html')))
 app.get('/face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'faceRecognition.html')))
 app.get('/face_similarity', (req, res) => res.sendFile(path.join(viewsDir, 'faceSimilarity.html')))
+app.get('/face_landmarks', (req, res) => res.sendFile(path.join(viewsDir, 'faceLandmarks.html')))
 app.get('/detect_and_draw_faces', (req, res) => res.sendFile(path.join(viewsDir, 'detectAndDrawFaces.html')))
 app.get('/detect_and_recognize_faces', (req, res) => res.sendFile(path.join(viewsDir, 'detectAndRecognizeFaces.html')))
 
diff --git a/examples/views/faceLandmarks.html b/examples/views/faceLandmarks.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="face-api.js"></script>
+  <script src="axios.min.js"></script>
+  <script src="commons.js"></script>
+  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
+  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
+</head>
+<body>
+  <div class="center-content page-container">
+    <div id="navbar"></div>
+
+    <div>
+      <div class="progress" id="loader">
+        <div class="indeterminate"></div>
+      </div>
+      <div class="row side-by-side">
+        <div class="center-content">
+          <div id="faceContainer"></div>
+          <div id="selectList"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let net
+
+    async function onSelectionChanged(uri) {
+      const imgBuf = await fetchImage(uri)
+      const img = await faceapi.bufferToImage(imgBuf)
+      const canvas = faceapi.createCanvasFromMedia(img)
+      $('#faceContainer').empty()
+      $('#faceContainer').append(canvas)
+
+      const landmarks = await net.detectLandmarks(canvas)
+      faceapi.drawLandmarks(canvas, landmarks, { lineWidth: 4 })
+    }
+
+    async function run() {
+      net = await initFaceLandmarkNet()
+      $('#loader').hide()
+      await onSelectionChanged($('#selectList select').val())
+    }
+
+    $(document).ready(function() {
+      renderNavBar('#navbar', 'face_landmarks')
+      renderFaceImageSelectList(
+        '#selectList',
+        onSelectionChanged,
+        { className: 'sheldon', imageIdx: 1 }
+      )
+      run()
+    })
+
+  </script>
+
+</body>
+</html>
