Skip to content

F
face
Commit 7396324d by vincent
Options

toggle control for face landmark detection in video and webcam examples

parent 0ea55f92
Showing with 142 additions and 77 deletions
examples/public/js/commons.js
......@@ -127,7 +127,7 @@ function renderNavBar(navbarId, exampleUri) {
})
$('.button-collapse').sideNav({
menuWidth: 280
menuWidth: 240
})
}
......
examples/public/js/drawing.js 0 → 100644
function resizeCanvasAndResults(dimensions, canvas, results) {
const { width, height } = dimensions instanceof HTMLVideoElement
? faceapi.getMediaDimensions(dimensions)
: dimensions
canvas.width = width
canvas.height = height
// resize detections (and landmarks) in case displayed image is smaller than
// original size
return results.map(res => res.forSize(width, height))
}
function drawDetections(dimensions, canvas, detections) {
const resizedDetections = resizeCanvasAndResults(dimensions, canvas, detections)
faceapi.drawDetection(canvas, resizedDetections)
}
function drawLandmarks(dimensions, canvas, results, withBoxes = true) {
const resizedResults = resizeCanvasAndResults(dimensions, canvas, results)
if (withBoxes) {
const alignedFaceRectangles = resizedResults.map(det => det.alignedRect)
faceapi.drawDetection(canvas, alignedFaceRectangles)
}
const faceLandmarks = resizedResults.map(det => det.landmarks)
const drawLandmarksOptions = {
lineWidth: 2,
drawLines: true,
color: 'green'
}
faceapi.drawLandmarks(canvas, faceLandmarks, drawLandmarksOptions)
}
\ No newline at end of file
examples/public/js/faceDetectionControls.js
......@@ -93,7 +93,9 @@ async function changeFaceDetector(detector) {
.forEach(id => $(id).hide())
selectedFaceDetector = detector
$('#selectFaceDetector').val(detector)
const faceDetectorSelect = $('#selectFaceDetector')
faceDetectorSelect.val(detector)
faceDetectorSelect.material_select()
$('#loader').show()
if (!isFaceDetectionModelLoaded()) {
......
examples/public/styles.css
......@@ -3,7 +3,7 @@
right: 0;
margin: auto;
margin-top: 20px;
padding-left: 300px;
padding-left: 260px;
display: inline-flex !important;
}
......
examples/views/faceDetection.html
......@@ -3,6 +3,7 @@
<head>
<script src="face-api.js"></script>
<script src="js/commons.js"></script>
<script src="js/drawing.js"></script>
<script src="js/faceDetectionControls.js"></script>
<script src="js/imageSelectionControls.js"></script>
<link rel="stylesheet" href="styles.css">
......@@ -147,15 +148,7 @@
const detections = await faceapi.detectAllFaces(inputImgEl, options)
drawDetections(detections)
}
function drawDetections(detections) {
const { width, height } = $('#inputImg').get(0)
const canvas = $('#overlay').get(0)
canvas.width = width
canvas.height = height
faceapi.drawDetection(canvas, detections.map(det => det.forSize(width, height)))
drawDetections(inputImgEl, $('#overlay').get(0), detections)
}
async function run() {
......
examples/views/faceLandmarkDetection.html
......@@ -3,6 +3,7 @@
<head>
<script src="face-api.js"></script>
<script src="js/commons.js"></script>
<script src="js/drawing.js"></script>
<script src="js/faceDetectionControls.js"></script>
<script src="js/imageSelectionControls.js"></script>
<link rel="stylesheet" href="styles.css">
......@@ -147,33 +148,10 @@
const options = getFaceDetectorOptions()
const results = await faceapi
.detectAllFaces($('#inputImg').get(0), options)
.detectAllFaces(inputImgEl, options)
.withFaceLandmarks()
drawLandmarks(results)
}
function drawLandmarks(results) {
// draw results
const { width, height } = $('#inputImg').get(0)
const canvas = $('#overlay').get(0)
canvas.width = width
canvas.height = height
// resize detection and landmarks in case displayed image is smaller than
// original size
results = results.map(res => res.forSize(width, height))
const alignedFaceRectangles = results.map(det => det.alignedRect)
faceapi.drawDetection(canvas, alignedFaceRectangles)
const faceLandmarks = results.map(det => det.landmarks)
const drawLandmarksOptions = {
lineWidth: 2,
drawLines: true,
color: 'green'
}
faceapi.drawLandmarks(canvas, faceLandmarks, drawLandmarksOptions)
drawLandmarks(inputImgEl, $('#overlay').get(0), results)
}
async function run() {
......
examples/views/faceRecognition.html
......@@ -3,6 +3,7 @@
<head>
<script src="face-api.js"></script>
<script src="js/commons.js"></script>
<script src="js/drawing.js"></script>
<script src="js/faceDetectionControls.js"></script>
<script src="js/imageSelectionControls.js"></script>
<script src="js/bbt.js"></script>
......
examples/views/videoFaceTracking.html
......@@ -3,6 +3,7 @@
<head>
<script src="face-api.js"></script>
<script src="js/commons.js"></script>
<script src="js/drawing.js"></script>
<script src="js/faceDetectionControls.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">
......@@ -21,18 +22,7 @@
<canvas id="overlay" />
</div>
<!-- fps_meter -->
<div id="fps_meter" class="row side-by-side">
<div class="row">
<label for="time">Time:</label>
<input disabled value="-" id="time" type="text" class="bold">
</div>
<div class="row">
<label for="fps">Estimated Fps:</label>
<input disabled value="-" id="fps" type="text" class="bold">
</div>
</div>
<!-- fps_meter -->
<div class="row side-by-side">
<!-- face_detector_selection_control -->
<div id="face_detector_selection_control" class="row input-field" style="margin-right: 20px;">
......@@ -45,6 +35,28 @@
</div>
<!-- face_detector_selection_control -->
<!-- check boxes -->
<div class="row" style="width: 220px;">
<input type="checkbox" id="withFaceLandmarksCheckbox" onchange="onChangeWithFaceLandmarks(event)" />
<label for="withFaceLandmarksCheckbox">Detect Face Landmarks</label>
<input type="checkbox" id="hideBoundingBoxesCheckbox" onchange="onChangeHideBoundingBoxes(event)" />
<label for="hideBoundingBoxesCheckbox">Hide Bounding Boxes</label>
</div>
<!-- check boxes -->
<!-- fps_meter -->
<div id="fps_meter" class="row side-by-side">
<div>
<label for="time">Time:</label>
<input disabled value="-" id="time" type="text" class="bold">
<label for="fps">Estimated Fps:</label>
<input disabled value="-" id="fps" type="text" class="bold">
</div>
</div>
<!-- fps_meter -->
</div>
<!-- ssd_mobilenetv1_controls -->
<span id="ssd_mobilenetv1_controls">
<div class="row side-by-side">
......@@ -130,6 +142,16 @@
<script>
let forwardTimes = []
let withFaceLandmarks = false
let withBoxes = true
function onChangeWithFaceLandmarks(e) {
withFaceLandmarks = $(e.target).prop('checked')
}
function onChangeHideBoundingBoxes(e) {
withBoxes = !$(e.target).prop('checked')
}
function updateTimeStats(timeInMs) {
forwardTimes = [timeInMs].concat(forwardTimes).slice(0, 30)
......@@ -144,23 +166,29 @@
const options = getFaceDetectorOptions()
const ts = Date.now()
const detections = await faceapi.detectAllFaces(videoEl, options)
const faceDetectionTask = faceapi.detectAllFaces(videoEl, options)
const results = withFaceLandmarks
? await faceDetectionTask.withFaceLandmarks()
: await faceDetectionTask
updateTimeStats(Date.now() - ts)
// draw results
const canvas = $('#overlay').get(0)
const { width, height } = faceapi.getMediaDimensions(videoEl)
canvas.width = width
canvas.height = height
faceapi.drawDetection(canvas, detections.map(det => det.forSize(width, height)))
const drawFunction = withFaceLandmarks
? drawLandmarks
: drawDetections
drawFunction(videoEl, $('#overlay').get(0), results, withBoxes)
setTimeout(() => onPlay(videoEl))
}
async function run() {
// load face detection model
// load face detection and face landmark models
await changeFaceDetector(TINY_FACE_DETECTOR)
await faceapi.loadFaceLandmarkModel('/')
changeInputSize(416)
// start processing frames
......
examples/views/webcamFaceTracking.html
......@@ -3,6 +3,7 @@
<head>
<script src="face-api.js"></script>
<script src="js/commons.js"></script>
<script src="js/drawing.js"></script>
<script src="js/faceDetectionControls.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">
......@@ -21,18 +22,7 @@
<canvas id="overlay" />
</div>
<!-- fps_meter -->
<div id="fps_meter" class="row side-by-side">
<div class="row">
<label for="time">Time:</label>
<input disabled value="-" id="time" type="text" class="bold">
</div>
<div class="row">
<label for="fps">Estimated Fps:</label>
<input disabled value="-" id="fps" type="text" class="bold">
</div>
</div>
<!-- fps_meter -->
<div class="row side-by-side">
<!-- face_detector_selection_control -->
<div id="face_detector_selection_control" class="row input-field" style="margin-right: 20px;">
......@@ -45,6 +35,29 @@
</div>
<!-- face_detector_selection_control -->
<!-- check boxes -->
<div class="row" style="width: 220px;">
<input type="checkbox" id="withFaceLandmarksCheckbox" onchange="onChangeWithFaceLandmarks(event)" />
<label for="withFaceLandmarksCheckbox">Detect Face Landmarks</label>
<input type="checkbox" id="hideBoundingBoxesCheckbox" onchange="onChangeHideBoundingBoxes(event)" />
<label for="hideBoundingBoxesCheckbox">Hide Bounding Boxes</label>
</div>
<!-- check boxes -->
<!-- fps_meter -->
<div id="fps_meter" class="row side-by-side">
<div>
<label for="time">Time:</label>
<input disabled value="-" id="time" type="text" class="bold">
<label for="fps">Estimated Fps:</label>
<input disabled value="-" id="fps" type="text" class="bold">
</div>
</div>
<!-- fps_meter -->
</div>
<!-- ssd_mobilenetv1_controls -->
<span id="ssd_mobilenetv1_controls">
<div class="row side-by-side">
......@@ -131,6 +144,16 @@
<script>
let forwardTimes = []
let withFaceLandmarks = false
let withBoxes = true
function onChangeWithFaceLandmarks(e) {
withFaceLandmarks = $(e.target).prop('checked')
}
function onChangeHideBoundingBoxes(e) {
withBoxes = !$(e.target).prop('checked')
}
function updateTimeStats(timeInMs) {
forwardTimes = [timeInMs].concat(forwardTimes).slice(0, 30)
......@@ -145,23 +168,29 @@
const options = getFaceDetectorOptions()
const ts = Date.now()
const detections = await faceapi.detectAllFaces(videoEl, options)
const faceDetectionTask = faceapi.detectAllFaces(videoEl, options)
const results = withFaceLandmarks
? await faceDetectionTask.withFaceLandmarks()
: await faceDetectionTask
updateTimeStats(Date.now() - ts)
// draw results
const canvas = $('#overlay').get(0)
const { width, height } = faceapi.getMediaDimensions(videoEl)
canvas.width = width
canvas.height = height
faceapi.drawDetection(canvas, detections.map(det => det.forSize(width, height)))
const drawFunction = withFaceLandmarks
? drawLandmarks
: drawDetections
drawFunction(videoEl, $('#overlay').get(0), results, withBoxes)
setTimeout(() => onPlay(videoEl))
}
async function run() {
// load face detection model
// load face detection and face landmark models
await changeFaceDetector(TINY_FACE_DETECTOR)
await faceapi.loadFaceLandmarkModel('/')
changeInputSize(128)
// try to access users webcam and stream the images
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment