kittinan/example_face-api.html

## example_face-api.html
<html>

<head>

  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/face-api.min.js"></script>

</head>
<body>

  <canvas id="overlay" width="400" style="position:absolute; top: 0;"></canvas>
  <img id="myImg"  width="400" crossOrigin="Anonymous" src="https://scontent.fbkk14-1.fna.fbcdn.net/v/t1.0-9/34849814_460907171011677_5545358483479592960_n.jpg?_nc_cat=0&_nc_eui2=AeGAXko3zvM_iwpyXo-ZxsunnuUH-ha3uwaY4mNhFgYhhOgR89H79HcO9_ASeXOAMphniDyKXy3h4TFHBB1szWMkAt1QDieSFJwMWj2zY2oSew&oh=78729205da0ccb67f3a7b91b34826e28&oe=5B9FF2D6" />

  <script>
    $(document).ready(initPage);

    function initPage() {
      console.log('test');

      start();
    }

    async function start(){
      const minConfidence = 0.7
      const maxResults = 10
      var MODEL_URL = '/model/face';
      await faceapi.loadFaceDetectionModel(MODEL_URL);
      const myImg = document.getElementById('myImg');
      const detections = await faceapi.locateFaces(myImg, minConfidence, maxResults);

      const detectionsForSize = detections.map(det => det.forSize(myImg.width, myImg.height))
      const canvas = document.getElementById('overlay')
      canvas.width = myImg.width
      canvas.height = myImg.height
      faceapi.drawDetection(canvas, detectionsForSize, { withScore: false })
      console.log(detections);
    }
  </script>

</body>
</html>
	<html>

	<head>

	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="js/face-api.min.js"></script>

	</head>
	<body>

	<canvas id="overlay" width="400" style="position:absolute; top: 0;"></canvas>
	<img id="myImg" width="400" crossOrigin="Anonymous" src="https://scontent.fbkk14-1.fna.fbcdn.net/v/t1.0-9/34849814_460907171011677_5545358483479592960_n.jpg?_nc_cat=0&_nc_eui2=AeGAXko3zvM_iwpyXo-ZxsunnuUH-ha3uwaY4mNhFgYhhOgR89H79HcO9_ASeXOAMphniDyKXy3h4TFHBB1szWMkAt1QDieSFJwMWj2zY2oSew&oh=78729205da0ccb67f3a7b91b34826e28&oe=5B9FF2D6" />

	<script>
	$(document).ready(initPage);

	function initPage() {
	console.log('test');

	start();
	}

	async function start(){
	const minConfidence = 0.7
	const maxResults = 10
	var MODEL_URL = '/model/face';
	await faceapi.loadFaceDetectionModel(MODEL_URL);
	const myImg = document.getElementById('myImg');
	const detections = await faceapi.locateFaces(myImg, minConfidence, maxResults);

	const detectionsForSize = detections.map(det => det.forSize(myImg.width, myImg.height))
	const canvas = document.getElementById('overlay')
	canvas.width = myImg.width
	canvas.height = myImg.height
	faceapi.drawDetection(canvas, detectionsForSize, { withScore: false })
	console.log(detections);
	}
	</script>

	</body>
	</html>