Merge pull request #18 from justadudewhohacks/examples-image-from-url

examples/package.json

@@ -5,6 +5,7 @@
   "author": "justadudewhohacks",
   "license": "MIT",
   "dependencies": {
-    "express": "^4.16.3"
+    "express": "^4.16.3",
+    "request": "^2.87.0"
   }
 }

examples/public/commons.js

@@ -12,6 +12,30 @@ async function fetchImage(uri) {
   return (await fetch(uri)).blob()
 }
 
+async function requestExternalImage(imageUrl) {
+  const res = await fetch('fetch_external_image', {
+    method: 'post',
+    headers: {
+      'content-type': 'application/json'
+    },
+    body: JSON.stringify({ imageUrl })
+  })
+  if (!(res.status < 400)) {
+    console.error(res.status + ' : ' + await res.text())
+    throw new Error('failed to fetch image from url: ' + imageUrl)
+  }
+
+  let blob
+  try {
+    blob = await res.blob()
+    return await faceapi.bufferToImage(blob)
+  } catch (e) {
+    console.error('received blob:', blob)
+    console.error('error:', e)
+    throw new Error('failed to load image from url: ' + imageUrl)
+  }
+}
+
 // fetch first image of each class and compute their descriptors
 async function initTrainDescriptorsByClass(net, numImagesForTraining = 1) {
   const maxAvailableImagesPerClass = 5
@@ -113,17 +137,30 @@ function renderNavBar(navbarId, exampleUri) {
   menuButton.appendChild(menuButtonIcon)
   navbar.appendChild(menuButton)
 
+  const li = document.createElement('li')
+  const githubLink = document.createElement('a')
+  githubLink.classList.add('waves-effect', 'waves-light', 'side-by-side')
+  githubLink.id = 'github-link'
+  githubLink.href = 'https://github.com/justadudewhohacks/face-api.js'
+  const h5 = document.createElement('h5')
+  h5.innerHTML = 'face-api.js'//'If you like this project, feel free to leave a star on github :)'
+  githubLink.appendChild(h5)
+  const githubLinkIcon = document.createElement('img')
+  githubLinkIcon.src = 'github_link_icon.png'
+  githubLink.appendChild(githubLinkIcon)
+  li.appendChild(githubLink)
+  menuContent.appendChild(li)
+
   examples
     .filter(ex => ex.uri !== exampleUri)
     .forEach(ex => {
       const li = document.createElement('li')
       const a = document.createElement('a')
-      li.appendChild(a)
-      menuContent.appendChild(li)
-
       a.classList.add('waves-effect', 'waves-light')
       a.href = ex.uri
       a.innerHTML = ex.name
+      li.appendChild(a)
+      menuContent.appendChild(li)
     })
 
   $('.button-collapse').sideNav({

examples/public/styles.css

@@ -25,6 +25,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .side-by-side {
@@ -48,6 +49,14 @@
   margin: 20px;
 }
 
+#github-link {
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid;
+  margin-bottom: 10px;
+}
+
 #overlay {
   position: absolute;
   top: 0;

examples/server.js

 const express = require('express')
 const path = require('path')
+const { get } = require('request')
 
 const app = express()
 
+app.use(express.json())
+app.use(express.urlencoded({ extended: true }))
+
 const viewsDir = path.join(__dirname, 'views')
 app.use(express.static(viewsDir))
 app.use(express.static(path.join(__dirname, './public')))
@@ -21,4 +25,40 @@ app.get('/detect_and_draw_landmarks', (req, res) => res.sendFile(path.join(views
 app.get('/face_alignment', (req, res) => res.sendFile(path.join(viewsDir, 'faceAlignment.html')))
 app.get('/detect_and_recognize_faces', (req, res) => res.sendFile(path.join(viewsDir, 'detectAndRecognizeFaces.html')))
 
-app.listen(3000, () => console.log('Listening on port 3000!'))
+app.post('/fetch_external_image', async (req, res) => {
\ No newline at end of file
+  const { imageUrl } = req.body
+  if (!imageUrl) {
+    return res.status(400).send('imageUrl param required')
+  }
+  try {
+    const externalResponse = await request(imageUrl)
+    res.set('content-type', externalResponse.headers['content-type'])
+    return res.status(202).send(Buffer.from(externalResponse.body))
+  } catch (err) {
+    return res.status(404).send(err.toString())
+  }
+})
+
+app.listen(3000, () => console.log('Listening on port 3000!'))
+
+function request(url, returnBuffer = true, timeout = 10000) {
+  return new Promise(function(resolve, reject) {
+    const options = Object.assign(
+      {},
+      {
+        url,
+        isBuffer: true,
+        timeout,
+        headers: {
+          'User-Agent': 'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36'
+        }
+      },
+      returnBuffer ? { encoding: null } : {}
+    )
+
+    get(options, function(err, res) {
+      if (err) return reject(err)
+      return resolve(res)
+    })
+  })
+}
\ No newline at end of file

examples/views/detectAndDrawFaces.html

@@ -22,6 +22,18 @@
     <div class="row side-by-side">
       <div id="selectList"></div>
       <div class="row">
+        <label for="imgUrlInput">Get image from URL:</label>
+        <input id="imgUrlInput" type="text" class="bold">
+      </div>
+      <button
+        class="waves-effect waves-light btn"
+        onclick="loadImageFromUrl()"
+      >
+        Ok
+      </button>
+    </div>
+    <div class="row side-by-side">
+      <div class="row">
         <label for="minConfidence">Min Confidence:</label>
         <input disabled value="0.7" id="minConfidence" type="text" class="bold">
       </div>
@@ -56,6 +68,12 @@
       updateResults()
     }
 
+    async function loadImageFromUrl(url) {
+      const img = await requestExternalImage($('#imgUrlInput').val())
+      $('#inputImg').get(0).src = img.src
+      updateResults()
+    }
+
     async function updateResults() {
       const inputImgEl = $('#inputImg').get(0)
       const { width, height } = inputImgEl

examples/views/detectAndDrawLandmarks.html

@@ -21,6 +21,18 @@
     <div class="row side-by-side">
       <div id="selectList"></div>
       <div class="row">
+        <label for="imgUrlInput">Get image from URL:</label>
+        <input id="imgUrlInput" type="text" class="bold">
+      </div>
+      <button
+        class="waves-effect waves-light btn"
+        onclick="loadImageFromUrl()"
+      >
+        Ok
+      </button>
+    </div>
+    <div class="row side-by-side">
+      <div class="row">
         <label for="minConfidence">Min Confidence:</label>
         <input disabled value="0.7" id="minConfidence" type="text" class="bold">
       </div>
@@ -56,6 +68,18 @@
       updateResults()
     }
 
+    async function onSelectionChanged(uri) {
+      const imgBuf = await fetchImage(uri)
+      $(`#inputImg`).get(0).src = (await faceapi.bufferToImage(imgBuf)).src
+      updateResults()
+    }
+
+    async function loadImageFromUrl(url) {
+      const img = await requestExternalImage($('#imgUrlInput').val())
+      $('#inputImg').get(0).src = img.src
+      updateResults()
+    }
+
     async function updateResults() {
       const inputImgEl = $('#inputImg').get(0)
       const { width, height } = inputImgEl
@@ -81,12 +105,6 @@
       faceapi.drawDetection('overlay', locations.map(det => det.forSize(width, height)))
     }
 
-    async function onSelectionChanged(uri) {
-      const imgBuf = await fetchImage(uri)
-      $(`#inputImg`).get(0).src = (await faceapi.bufferToImage(imgBuf)).src
-      updateResults()
-    }
-
     async function run() {
       detectionNet = new faceapi.FaceDetectionNet()
       await detectionNet.load('/')

examples/views/detectAndRecognizeFaces.html

@@ -21,6 +21,18 @@
     <div class="row side-by-side">
       <div id="selectList"></div>
       <div class="row">
+        <label for="imgUrlInput">Get image from URL:</label>
+        <input id="imgUrlInput" type="text" class="bold">
+      </div>
+      <button
+        class="waves-effect waves-light btn"
+        onclick="loadImageFromUrl()"
+      >
+        Ok
+      </button>
+    </div>
+    <div class="row side-by-side">
+      <div class="row">
         <label for="minConfidence">Min Confidence:</label>
         <input disabled value="0.7" id="minConfidence" type="text" class="bold">
       </div>
@@ -38,7 +50,7 @@
       </button>
       <div class="row">
         <label for="maxDistance">Max Descriptor Distance:</label>
-        <input disabled value="0.8" id="maxDistance" type="text" class="bold">
+        <input disabled value="0.6" id="maxDistance" type="text" class="bold">
       </div>
       <button
         class="waves-effect waves-light btn"
@@ -56,7 +68,7 @@
   </div>
 
   <script>
-    let maxDistance = 0.8
+    let maxDistance = 0.6
     let minConfidence = 0.7
     let detectionNet, recognitionNet, landmarkNet
     let trainDescriptorsByClass = []
@@ -85,6 +97,12 @@
       updateResults()
     }
 
+    async function loadImageFromUrl(url) {
+      const img = await requestExternalImage($('#imgUrlInput').val())
+      $('#inputImg').get(0).src = img.src
+      updateResults()
+    }
+
     async function updateResults() {
       const inputImgEl = $('#inputImg').get(0)
       const { width, height } = inputImgEl

examples/views/faceAlignment.html

@@ -22,6 +22,18 @@
     <div class="row side-by-side">
       <div id="selectList"></div>
       <div class="row">
+        <label for="imgUrlInput">Get image from URL:</label>
+        <input id="imgUrlInput" type="text" class="bold">
+      </div>
+      <button
+        class="waves-effect waves-light btn"
+        onclick="loadImageFromUrl()"
+      >
+        Ok
+      </button>
+    </div>
+    <div class="row side-by-side">
+      <div class="row">
         <label for="minConfidence">Min Confidence:</label>
         <input disabled value="0.7" id="minConfidence" type="text" class="bold">
       </div>
@@ -57,6 +69,12 @@
       updateResults()
     }
 
+    async function loadImageFromUrl(url) {
+      const img = await requestExternalImage($('#imgUrlInput').val())
+      $('#inputImg').get(0).src = img.src
+      updateResults()
+    }
+
     async function updateResults() {
       const inputImgEl = $('#inputImg').get(0)
       const { width, height } = inputImgEl

examples/views/faceDetection.html

@@ -21,6 +21,18 @@
     <div class="row side-by-side">
       <div id="selectList"></div>
       <div class="row">
+        <label for="imgUrlInput">Get image from URL:</label>
+        <input id="imgUrlInput" type="text" class="bold">
+      </div>
+      <button
+        class="waves-effect waves-light btn"
+        onclick="loadImageFromUrl()"
+      >
+        Ok
+      </button>
+    </div>
+    <div class="row side-by-side">
+      <div class="row">
         <label for="minConfidence">Min Confidence:</label>
         <input disabled value="0.7" id="minConfidence" type="text" class="bold">
       </div>
@@ -55,6 +67,12 @@
       updateResults()
     }
 
+    async function loadImageFromUrl(url) {
+      const img = await requestExternalImage($('#imgUrlInput').val())
+      $('#inputImg').get(0).src = img.src
+      updateResults()
+    }
+
     async function updateResults() {
       const inputImgEl = $('#inputImg').get(0)
       const { width, height } = inputImgEl