Skip to content

Commit 004ef80

Browse files
justadudewhohacksjustadudewhohacks
committed
merge face detection and face landmark detection examples
1 parent a95d39d commit 004ef80

File tree

5 files changed

+62
-207
lines changed

5 files changed

+62
-207
lines changed

‎examples/public/js/commons.js

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,17 @@ async function requestExternalImage(imageUrl) {
2929
function renderNavBar(navbarId, exampleUri) {
3030
const examples = [
3131
{
32-
uri: 'face_detection',
33-
name: 'Face Detection'
34-
},
35-
{
36-
uri: 'face_extraction',
37-
name: 'Face Extraction'
38-
},
39-
{
40-
uri: 'face_landmark_detection',
41-
name: 'Face Landmark Detection'
32+
uri: 'face_and_landmark_detection',
33+
name: 'Face And Landmark Detection'
4234
},
4335
{
4436
uri: 'face_recognition',
4537
name: 'Face Recognition'
4638
},
39+
{
40+
uri: 'face_extraction',
41+
name: 'Face Extraction'
42+
},
4743
{
4844
uri: 'video_face_tracking',
4945
name: 'Video Face Tracking'

‎examples/public/js/drawing.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,7 @@ function drawLandmarks(dimensions, canvas, results, withBoxes = true) {
1919
const resizedResults = resizeCanvasAndResults(dimensions, canvas, results)
2020

2121
if (withBoxes) {
22-
const alignedFaceRectangles = resizedResults.map(det => det.alignedRect)
23-
faceapi.drawDetection(canvas, alignedFaceRectangles)
22+
faceapi.drawDetection(canvas, resizedResults.map(det => det.detection))
2423
}
2524

2625
const faceLandmarks = resizedResults.map(det => det.landmarks)

‎examples/server.js

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,18 @@ app.use(express.static(path.join(__dirname, '../weights_uncompressed')))
1515
app.use(express.static(path.join(__dirname, '../dist')))
1616
app.use(express.static(path.join(__dirname, './node_modules/axios/dist')))
1717

18-
app.get('/', (req, res) => res.redirect('/face_detection'))
19-
app.get('/batch_face_landmarks', (req, res) => res.sendFile(path.join(viewsDir, 'batchFaceLandmarks.html')))
20-
app.get('/batch_face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'batchFaceRecognition.html')))
21-
app.get('/bbt_face_landmark_detection', (req, res) => res.sendFile(path.join(viewsDir, 'bbtFaceLandmarkDetection.html')))
22-
app.get('/bbt_face_similarity', (req, res) => res.sendFile(path.join(viewsDir, 'bbtFaceSimilarity.html')))
23-
app.get('/bbt_face_matching', (req, res) => res.sendFile(path.join(viewsDir, 'bbtFaceMatching.html')))
24-
app.get('/bbt_face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'bbtFaceRecognition.html')))
25-
app.get('/face_detection', (req, res) => res.sendFile(path.join(viewsDir, 'faceDetection.html')))
18+
app.get('/', (req, res) => res.redirect('/face_and_landmark_detection'))
19+
app.get('/face_and_landmark_detection', (req, res) => res.sendFile(path.join(viewsDir, 'faceAndLandmarkDetection.html')))
2620
app.get('/face_extraction', (req, res) => res.sendFile(path.join(viewsDir, 'faceExtraction.html')))
27-
app.get('/face_landmark_detection', (req, res) => res.sendFile(path.join(viewsDir, 'faceLandmarkDetection.html')))
2821
app.get('/face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'faceRecognition.html')))
2922
app.get('/video_face_tracking', (req, res) => res.sendFile(path.join(viewsDir, 'videoFaceTracking.html')))
3023
app.get('/webcam_face_tracking', (req, res) => res.sendFile(path.join(viewsDir, 'webcamFaceTracking.html')))
24+
app.get('/bbt_face_landmark_detection', (req, res) => res.sendFile(path.join(viewsDir, 'bbtFaceLandmarkDetection.html')))
25+
app.get('/bbt_face_similarity', (req, res) => res.sendFile(path.join(viewsDir, 'bbtFaceSimilarity.html')))
26+
app.get('/bbt_face_matching', (req, res) => res.sendFile(path.join(viewsDir, 'bbtFaceMatching.html')))
27+
app.get('/bbt_face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'bbtFaceRecognition.html')))
28+
app.get('/batch_face_landmarks', (req, res) => res.sendFile(path.join(viewsDir, 'batchFaceLandmarks.html')))
29+
app.get('/batch_face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'batchFaceRecognition.html')))
3130

3231
app.post('/fetch_external_image', async (req, res) => {
3332
const { imageUrl } = req.body

‎examples/views/faceLandmarkDetection.html renamed to ‎examples/views/faceAndLandmarkDetection.html

Lines changed: 47 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,6 @@
2424
</div>
2525

2626
<div class="row side-by-side">
27-
28-
<!-- face_detector_selection_control -->
29-
<div id="face_detector_selection_control" class="row input-field" style="margin-right: 20px;">
30-
<select id="selectFaceDetector">
31-
<option value="ssd_mobilenetv1">SSD Mobilenet V1</option>
32-
<option value="tiny_face_detector">Tiny Face Detector</option>
33-
<option value="mtcnn">MTCNN</option>
34-
</select>
35-
<label>Select Face Detector</label>
36-
</div>
37-
<!-- face_detector_selection_control -->
38-
3927
<!-- image_selection_control -->
4028
<div id="selectList"></div>
4129
<div class="row">
@@ -49,6 +37,29 @@
4937
Ok
5038
</button>
5139
<!-- image_selection_control -->
40+
</div>
41+
42+
<div class="row side-by-side">
43+
44+
<!-- face_detector_selection_control -->
45+
<div id="face_detector_selection_control" class="row input-field" style="margin-right: 20px;">
46+
<select id="selectFaceDetector">
47+
<option value="ssd_mobilenetv1">SSD Mobilenet V1</option>
48+
<option value="tiny_face_detector">Tiny Face Detector</option>
49+
<option value="mtcnn">MTCNN</option>
50+
</select>
51+
<label>Select Face Detector</label>
52+
</div>
53+
<!-- face_detector_selection_control -->
54+
55+
<!-- check boxes -->
56+
<div class="row" style="width: 220px;">
57+
<input type="checkbox" id="withFaceLandmarksCheckbox" onchange="onChangeWithFaceLandmarks(event)" />
58+
<label for="withFaceLandmarksCheckbox">Detect Face Landmarks</label>
59+
<input type="checkbox" id="hideBoundingBoxesCheckbox" onchange="onChangeHideBoundingBoxes(event)" />
60+
<label for="hideBoundingBoxesCheckbox">Hide Bounding Boxes</label>
61+
</div>
62+
<!-- check boxes -->
5263

5364
</div>
5465

@@ -136,6 +147,18 @@
136147
</body>
137148

138149
<script>
150+
let withFaceLandmarks = false
151+
let withBoxes = true
152+
153+
function onChangeWithFaceLandmarks(e) {
154+
withFaceLandmarks = $(e.target).prop('checked')
155+
updateResults()
156+
}
157+
158+
function onChangeHideBoundingBoxes(e) {
159+
withBoxes = !$(e.target).prop('checked')
160+
updateResults()
161+
}
139162

140163
async function updateResults() {
141164
if (!isFaceDetectionModelLoaded()) {
@@ -145,24 +168,30 @@
145168
const inputImgEl = $('#inputImg').get(0)
146169
const options = getFaceDetectorOptions()
147170

148-
const results = await faceapi
149-
.detectAllFaces(inputImgEl, options)
150-
.withFaceLandmarks()
171+
const faceDetectionTask = faceapi.detectAllFaces(inputImgEl, options)
172+
const results = withFaceLandmarks
173+
? await faceDetectionTask.withFaceLandmarks()
174+
: await faceDetectionTask
175+
176+
177+
const drawFunction = withFaceLandmarks
178+
? drawLandmarks
179+
: drawDetections
151180

152-
drawLandmarks(inputImgEl, $('#overlay').get(0), results)
181+
drawFunction(inputImgEl, $('#overlay').get(0), results, withBoxes)
153182
}
154183

155184
async function run() {
156185
// load face detection and face landmark models
157-
await changeFaceDetector(selectedFaceDetector)
186+
await changeFaceDetector(SSD_MOBILENETV1)
158187
await faceapi.loadFaceLandmarkModel('/')
159188

160189
// start processing image
161190
updateResults()
162191
}
163192

164193
$(document).ready(function() {
165-
renderNavBar('#navbar', 'face_landmark_detection')
194+
renderNavBar('#navbar', 'face_and_landmark_detection')
166195
initImageSelectionControls()
167196
initFaceDetectionControls()
168197
run()

‎examples/views/faceDetection.html

Lines changed: 0 additions & 168 deletions
This file was deleted.

0 commit comments

Comments
 (0)