Skip to content

Commit 1416877

Browse files
justadudewhohacksjustadudewhohacks
committed
new face recognition example
1 parent 174e0c2 commit 1416877

File tree

11 files changed

+551
-275
lines changed

11 files changed

+551
-275
lines changed

‎examples/public/js/commons.js

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,14 +56,18 @@ function renderNavBar(navbarId, exampleUri) {
5656
uri: 'bbt_face_landmark_detection',
5757
name: 'BBT Face Landmark Detection'
5858
},
59-
{
60-
uri: 'bbt_face_recognition',
61-
name: 'BBT Face Recognition'
62-
},
6359
{
6460
uri: 'bbt_face_similarity',
6561
name: 'BBT Face Similarity'
6662
},
63+
{
64+
uri: 'bbt_face_matching',
65+
name: 'BBT Face Matching'
66+
},
67+
{
68+
uri: 'bbt_face_recognition',
69+
name: 'BBT Face Recognition'
70+
},
6771
{
6872
uri: 'batch_face_landmarks',
6973
name: 'Batch Face Landmark Detection'

‎examples/public/styles.css

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,7 @@
6161
margin-bottom: 10px;
6262
}
6363

64-
#overlay {
65-
position: absolute;
66-
top: 0;
67-
left: 0;
68-
}
69-
70-
.overlay {
64+
#overlay, .overlay {
7165
position: absolute;
7266
top: 0;
7367
left: 0;

‎examples/server.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ app.get('/', (req, res) => res.redirect('/face_detection'))
1919
app.get('/batch_face_landmarks', (req, res) => res.sendFile(path.join(viewsDir, 'batchFaceLandmarks.html')))
2020
app.get('/batch_face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'batchFaceRecognition.html')))
2121
app.get('/bbt_face_landmark_detection', (req, res) => res.sendFile(path.join(viewsDir, 'bbtFaceLandmarkDetection.html')))
22-
app.get('/bbt_face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'bbtFaceRecognition.html')))
2322
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')))
2425
app.get('/face_detection', (req, res) => res.sendFile(path.join(viewsDir, 'faceDetection.html')))
2526
app.get('/face_extraction', (req, res) => res.sendFile(path.join(viewsDir, 'faceExtraction.html')))
2627
app.get('/face_landmark_detection', (req, res) => res.sendFile(path.join(viewsDir, 'faceLandmarkDetection.html')))

‎examples/views/bbtFaceMatching.html

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="face-api.js"></script>
5+
<script src="js/commons.js"></script>
6+
<script src="js/bbt.js"></script>
7+
<link rel="stylesheet" href="styles.css">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
9+
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
11+
</head>
12+
<body>
13+
<div id="navbar"></div>
14+
<div class="center-content page-container">
15+
<div>
16+
<div class="row center-content" id="loader">
17+
<input disabled value="" id="status" type="text" class="bold">
18+
<div class="progress">
19+
<div class="indeterminate"></div>
20+
</div>
21+
</div>
22+
<div class="row center-content">
23+
<img id="face" src=""/>
24+
</div>
25+
<div class="row">
26+
<label for="prediction">Prediction:</label>
27+
<input disabled value="-" id="prediction" type="text" class="bold">
28+
</div>
29+
<div class="row">
30+
<label for="time">Time:</label>
31+
<input disabled value="-" id="time" type="text" class="bold">
32+
</div>
33+
<div class="row">
34+
<label for="fps">Estimated Fps:</label>
35+
<input disabled value="-" id="fps" type="text" class="bold">
36+
</div>
37+
<div class="row">
38+
<button
39+
class="waves-effect waves-light btn"
40+
id="stop"
41+
onclick="onToggleStop()"
42+
>
43+
Stop
44+
</button>
45+
<button
46+
class="waves-effect waves-light btn"
47+
onclick="onSlower()"
48+
>
49+
<i class="material-icons left">-</i> Slower
50+
</button>
51+
<button
52+
class="waves-effect waves-light btn"
53+
onclick="onFaster()"
54+
>
55+
<i class="material-icons left">+</i> Faster
56+
</button>
57+
</div>
58+
<div class="row">
59+
<label for="interval">Interval:</label>
60+
<input disabled value="2000" id="interval" type="text" class="bold">
61+
</div>
62+
</div>
63+
</div>
64+
65+
<script>
66+
let interval = 2000
67+
68+
let isStop = false
69+
let faceMatcher = null
70+
let currImageIdx = 2, currClassIdx = 0
71+
let to = null
72+
73+
function onSlower() {
74+
interval = Math.min(interval + 100, 2000)
75+
$('#interval').val(interval)
76+
}
77+
78+
function onFaster() {
79+
interval = Math.max(interval - 100, 0)
80+
$('#interval').val(interval)
81+
}
82+
83+
function onToggleStop() {
84+
clearTimeout(to)
85+
isStop = !isStop
86+
document.getElementById('stop').innerHTML = isStop ? 'Continue' : 'Stop'
87+
setStatusText(isStop ? 'stopped' : 'running face recognition:')
88+
if (!isStop) {
89+
runFaceRecognition()
90+
}
91+
}
92+
93+
function setStatusText(text) {
94+
$('#status').val(text)
95+
}
96+
97+
function displayTimeStats(timeInMs) {
98+
$('#time').val(`${timeInMs} ms`)
99+
$('#fps').val(`${faceapi.round(1000 / timeInMs)}`)
100+
}
101+
102+
function displayImage(src) {
103+
getImg().src = src
104+
}
105+
106+
async function runFaceRecognition() {
107+
async function next() {
108+
const input = await faceapi.fetchImage(getFaceImageUri(classes[currClassIdx], currImageIdx))
109+
const imgEl = $('#face').get(0)
110+
imgEl.src = input.src
111+
112+
const ts = Date.now()
113+
const descriptor = await faceapi.computeFaceDescriptor(input)
114+
displayTimeStats(Date.now() - ts)
115+
116+
const bestMatch = faceMatcher.findBestMatch(descriptor)
117+
$('#prediction').val(bestMatch.toString())
118+
119+
currImageIdx = currClassIdx === (classes.length - 1)
120+
? currImageIdx + 1
121+
: currImageIdx
122+
currClassIdx = (currClassIdx + 1) % classes.length
123+
124+
currImageIdx = (currImageIdx % 6) || 2
125+
to = setTimeout(next, interval)
126+
}
127+
await next(0, 0)
128+
}
129+
130+
async function run() {
131+
try {
132+
setStatusText('loading model file...')
133+
134+
await faceapi.loadFaceRecognitionModel('/')
135+
136+
setStatusText('computing initial descriptors...')
137+
138+
faceMatcher = await createBbtFaceMatcher(1)
139+
$('#loader').hide()
140+
141+
runFaceRecognition()
142+
} catch (err) {
143+
console.error(err)
144+
}
145+
}
146+
147+
$(document).ready(function() {
148+
renderNavBar('#navbar', 'bbt_face_matching')
149+
run()
150+
})
151+
152+
</script>
153+
154+
</body>
155+
</html>

0 commit comments

Comments
 (0)