Skip to content

Commit 256ee65

Browse files
justadudewhohacksjustadudewhohacks
committed
merge drawing-api into branch
2 parents e908bbd + 9ca0e1b commit 256ee65

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+409
-402
lines changed

‎.travis.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
sudo: required
22
language: node_js
33
node_js:
4-
- "node"
4+
#- "node"
5+
- "11"
56
- "10"
67
- "8"
78
# node 6 is not compatible with tfjs-node

‎examples/examples-browser/public/js/drawing.js

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

‎examples/examples-browser/views/batchFaceLandmarks.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
function drawLandmarkCanvas(img, landmarks) {
6666
const canvas = faceapi.createCanvasFromMedia(img)
6767
$('#faceContainer').append(canvas)
68-
faceapi.drawLandmarks(canvas, landmarks, { lineWidth: 2 , drawLines: true })
68+
new faceapi.draw.DrawFaceLandmarks(landmarks).draw(canvas)
6969
}
7070

7171
async function runLandmarkDetection(useBatchInput) {

‎examples/examples-browser/views/batchFaceRecognition.html

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -68,13 +68,10 @@
6868
$('#faceContainer').append(canvas)
6969

7070
const x = 20, y = canvas.height - 20
71-
faceapi.drawText(
72-
canvas.getContext('2d'),
73-
x,
74-
y,
75-
faceMatcher.findBestMatch(descriptor).toString(),
76-
Object.assign(faceapi.getDefaultDrawOptions(), { color: 'red', fontSize: 16 })
77-
)
71+
const ctx = faceapi.getContext2dOrThrow(canvas)
72+
ctx.font = '16px Georgia'
73+
ctx.fillStyle = 'red'
74+
ctx.fillText(faceMatcher.findBestMatch(descriptor).toString(), x, y)
7875
}
7976

8077
async function runComputeFaceDescriptors(useBatchInput) {

‎examples/examples-browser/views/bbtFaceLandmarkDetection.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,12 @@
4343
const canvas = faceapi.createCanvasFromMedia(currentImg)
4444
$('#faceContainer').empty()
4545
$('#faceContainer').append(canvas)
46-
faceapi.drawLandmarks(canvas, landmarks, { lineWidth: drawLines ? 2 : 4, drawLines })
46+
new faceapi.draw.DrawFaceLandmarks(landmarks, { drawLines }).draw(canvas)
4747
}
4848

4949
async function onSelectionChanged(uri) {
5050
currentImg = await faceapi.fetchImage(uri)
51-
landmarks = await faceapi.detectLandmarks(currentImg)
51+
landmarks = await faceapi.detectFaceLandmarks(currentImg)
5252
redraw()
5353
}
5454

‎examples/examples-browser/views/bbtFaceRecognition.html

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<script src="face-api.js"></script>
55
<script src="js/commons.js"></script>
6-
<script src="js/drawing.js"></script>
76
<script src="js/faceDetectionControls.js"></script>
87
<script src="js/imageSelectionControls.js"></script>
98
<script src="js/bbt.js"></script>
@@ -159,17 +158,19 @@
159158

160159
function drawFaceRecognitionResults(results) {
161160
const canvas = $('#overlay').get(0)
161+
const inputImgEl = $('#inputImg').get(0)
162+
163+
faceapi.matchDimensions(canvas, inputImgEl)
162164
// resize detection and landmarks in case displayed image is smaller than
163165
// original size
164-
resizedResults = resizeCanvasAndResults($('#inputImg').get(0), canvas, results)
165-
166-
const boxesWithText = resizedResults.map(({ detection, descriptor }) =>
167-
new faceapi.BoxWithText(
168-
detection.box,
169-
faceMatcher.findBestMatch(descriptor).toString()
170-
)
171-
)
172-
faceapi.drawDetection(canvas, boxesWithText)
166+
const resizedResults = faceapi.resizeResults(results, inputImgEl)
167+
168+
resizedResults.forEach(({ detection, descriptor }) => {
169+
const label = faceMatcher.findBestMatch(descriptor).toString()
170+
const options = { label }
171+
const drawBox = new faceapi.draw.DrawBox(detection.box, options)
172+
drawBox.draw(canvas)
173+
})
173174
}
174175

175176
async function run() {

‎examples/examples-browser/views/faceDetection.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<script src="face-api.js"></script>
55
<script src="js/commons.js"></script>
6-
<script src="js/drawing.js"></script>
76
<script src="js/faceDetectionControls.js"></script>
87
<script src="js/imageSelectionControls.js"></script>
98
<link rel="stylesheet" href="styles.css">
@@ -148,7 +147,9 @@
148147

149148
const results = await faceapi.detectAllFaces(inputImgEl, options)
150149

151-
drawDetections(inputImgEl, $('#overlay').get(0), results)
150+
const canvas = $('#overlay').get(0)
151+
faceapi.matchDimensions(canvas, inputImgEl)
152+
faceapi.draw.drawDetections(canvas, faceapi.resizeResults(results, inputImgEl))
152153
}
153154

154155
async function run() {

‎examples/examples-browser/views/faceExpressionRecognition.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<script src="face-api.js"></script>
55
<script src="js/commons.js"></script>
6-
<script src="js/drawing.js"></script>
76
<script src="js/faceDetectionControls.js"></script>
87
<script src="js/imageSelectionControls.js"></script>
98
<link rel="stylesheet" href="styles.css">
@@ -150,7 +149,14 @@
150149
const options = getFaceDetectorOptions()
151150

152151
const results = await faceapi.detectAllFaces(inputImgEl, options).withFaceExpressions()
153-
drawExpressions(inputImgEl, $('#overlay').get(0), results, thresh, true)
152+
153+
const canvas = $('#overlay').get(0)
154+
faceapi.matchDimensions(canvas, inputImgEl)
155+
156+
const resizedResults = faceapi.resizeResults(results, inputImgEl)
157+
const minConfidence = 0.05
158+
faceapi.draw.drawDetections(canvas, resizedResults)
159+
faceapi.draw.drawFaceExpressions(canvas, resizedResults, minConfidence)
154160
}
155161

156162
async function run() {

‎examples/examples-browser/views/faceExtraction.html

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -150,9 +150,7 @@
150150

151151
function displayExtractedFaces(faceImages) {
152152
const canvas = $('#overlay').get(0)
153-
const { width, height } = $('#inputImg').get(0)
154-
canvas.width = width
155-
canvas.height = height
153+
faceapi.matchDimensions(canvas, $('#inputImg').get(0))
156154

157155
$('#facesContainer').empty()
158156
faceImages.forEach(canvas => $('#facesContainer').append(canvas))

‎examples/examples-browser/views/faceLandmarkDetection.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<script src="face-api.js"></script>
55
<script src="js/commons.js"></script>
6-
<script src="js/drawing.js"></script>
76
<script src="js/faceDetectionControls.js"></script>
87
<script src="js/imageSelectionControls.js"></script>
98
<link rel="stylesheet" href="styles.css">
@@ -162,7 +161,14 @@
162161

163162
const results = await faceapi.detectAllFaces(inputImgEl, options).withFaceLandmarks()
164163

165-
drawLandmarks(inputImgEl, $('#overlay').get(0), results, withBoxes)
164+
const canvas = $('#overlay').get(0)
165+
faceapi.matchDimensions(canvas, inputImgEl)
166+
const resizedResults = faceapi.resizeResults(results, inputImgEl)
167+
168+
if (withBoxes) {
169+
faceapi.draw.drawDetections(canvas, resizedResults)
170+
}
171+
faceapi.draw.drawFaceLandmarks(canvas, resizedResults)
166172
}
167173

168174
async function run() {

‎examples/examples-browser/views/faceRecognition.html

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<script src="face-api.js"></script>
55
<script src="js/commons.js"></script>
6-
<script src="js/drawing.js"></script>
76
<script src="js/faceDetectionControls.js"></script>
87
<link rel="stylesheet" href="styles.css">
98
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
@@ -205,11 +204,11 @@
205204
}
206205

207206
async function updateReferenceImageResults() {
208-
const imgEl = $('#refImg').get(0)
207+
const inputImgEl = $('#refImg').get(0)
209208
const canvas = $('#refImgOverlay').get(0)
210209

211210
const fullFaceDescriptions = await faceapi
212-
.detectAllFaces(imgEl, getFaceDetectorOptions())
211+
.detectAllFaces(inputImgEl, getFaceDetectorOptions())
213212
.withFaceLandmarks()
214213
.withFaceDescriptors()
215214

@@ -221,44 +220,45 @@
221220
// from the detection results for the reference image
222221
faceMatcher = new faceapi.FaceMatcher(fullFaceDescriptions)
223222

223+
faceapi.matchDimensions(canvas, inputImgEl)
224224
// resize detection and landmarks in case displayed image is smaller than
225225
// original size
226-
resizedResults = resizeCanvasAndResults(imgEl, canvas, fullFaceDescriptions)
226+
const resizedResults = faceapi.resizeResults(fullFaceDescriptions, inputImgEl)
227227
// draw boxes with the corresponding label as text
228228
const labels = faceMatcher.labeledDescriptors
229229
.map(ld => ld.label)
230-
const boxesWithText = resizedResults
231-
.map(res => res.detection.box)
232-
.map((box, i) => new faceapi.BoxWithText(box, labels[i]))
233-
faceapi.drawDetection(canvas, boxesWithText)
230+
resizedResults.forEach(({ detection, descriptor }) => {
231+
const label = faceMatcher.findBestMatch(descriptor).toString()
232+
const options = { label }
233+
const drawBox = new faceapi.draw.DrawBox(detection.box, options)
234+
drawBox.draw(canvas)
235+
})
234236
}
235237

236238
async function updateQueryImageResults() {
237239
if (!faceMatcher) {
238240
return
239241
}
240242

241-
const imgEl = $('#queryImg').get(0)
243+
const inputImgEl = $('#queryImg').get(0)
242244
const canvas = $('#queryImgOverlay').get(0)
243245

244246
const results = await faceapi
245-
.detectAllFaces(imgEl, getFaceDetectorOptions())
247+
.detectAllFaces(inputImgEl, getFaceDetectorOptions())
246248
.withFaceLandmarks()
247249
.withFaceDescriptors()
248250

251+
faceapi.matchDimensions(canvas, inputImgEl)
249252
// resize detection and landmarks in case displayed image is smaller than
250253
// original size
251-
resizedResults = resizeCanvasAndResults(imgEl, canvas, results)
252-
// draw boxes with the corresponding label as text
253-
const boxesWithText = resizedResults.map(({ detection, descriptor }) =>
254-
new faceapi.BoxWithText(
255-
detection.box,
256-
// match each face descriptor to the reference descriptor
257-
// with lowest euclidean distance and display the result as text
258-
faceMatcher.findBestMatch(descriptor).toString()
259-
)
260-
)
261-
faceapi.drawDetection(canvas, boxesWithText)
254+
const resizedResults = faceapi.resizeResults(results, inputImgEl)
255+
256+
resizedResults.forEach(({ detection, descriptor }) => {
257+
const label = faceMatcher.findBestMatch(descriptor).toString()
258+
const options = { label }
259+
const drawBox = new faceapi.draw.DrawBox(detection.box, options)
260+
drawBox.draw(canvas)
261+
})
262262
}
263263

264264
async function updateResults() {

‎examples/examples-browser/views/videoFaceTracking.html

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<script src="face-api.js"></script>
55
<script src="js/commons.js"></script>
6-
<script src="js/drawing.js"></script>
76
<script src="js/faceDetectionControls.js"></script>
87
<link rel="stylesheet" href="styles.css">
98
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
@@ -169,18 +168,25 @@
169168

170169
const ts = Date.now()
171170

172-
const faceDetectionTask = faceapi.detectAllFaces(videoEl, options)
173-
const results = withFaceLandmarks
174-
? await faceDetectionTask.withFaceLandmarks()
175-
: await faceDetectionTask
171+
const drawBoxes = withBoxes
172+
const drawLandmarks = withFaceLandmarks
173+
174+
let task = faceapi.detectAllFaces(videoEl, options)
175+
task = withFaceLandmarks ? task.withFaceLandmarks() : task
176+
const results = await task
176177

177178
updateTimeStats(Date.now() - ts)
178179

179-
const drawFunction = withFaceLandmarks
180-
? drawLandmarks
181-
: drawDetections
180+
const canvas = $('#overlay').get(0)
181+
const dims = faceapi.matchDimensions(canvas, videoEl, true)
182182

183-
drawFunction(videoEl, $('#overlay').get(0), results, withBoxes)
183+
const resizedResults = faceapi.resizeResults(results, dims)
184+
if (drawBoxes) {
185+
faceapi.draw.drawDetections(canvas, resizedResults)
186+
}
187+
if (drawLandmarks) {
188+
faceapi.draw.drawFaceLandmarks(canvas, resizedResults)
189+
}
184190

185191
setTimeout(() => onPlay(videoEl))
186192
}

‎examples/examples-browser/views/webcamFaceDetection.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<script src="face-api.js"></script>
55
<script src="js/commons.js"></script>
6-
<script src="js/drawing.js"></script>
76
<script src="js/faceDetectionControls.js"></script>
87
<link rel="stylesheet" href="styles.css">
98
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
@@ -159,7 +158,9 @@
159158
updateTimeStats(Date.now() - ts)
160159

161160
if (result) {
162-
drawDetections(videoEl, $('#overlay').get(0), [result])
161+
const canvas = $('#overlay').get(0)
162+
const dims = faceapi.matchDimensions(canvas, videoEl, true)
163+
faceapi.draw.drawDetections(canvas, faceapi.resizeResults(result, dims))
163164
}
164165

165166
setTimeout(() => onPlay())

‎examples/examples-browser/views/webcamFaceExpressionRecognition.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
<head>
44
<script src="face-api.js"></script>
55
<script src="js/commons.js"></script>
6-
<script src="js/drawing.js"></script>
76
<script src="js/faceDetectionControls.js"></script>
87
<link rel="stylesheet" href="styles.css">
98
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
@@ -171,7 +170,15 @@
171170
updateTimeStats(Date.now() - ts)
172171

173172
if (result) {
174-
drawExpressions(videoEl, $('#overlay').get(0), [result], withBoxes)
173+
const canvas = $('#overlay').get(0)
174+
const dims = faceapi.matchDimensions(canvas, videoEl, true)
175+
176+
const resizedResult = faceapi.resizeResults(result, dims)
177+
const minConfidence = 0.05
178+
if (withBoxes) {
179+
faceapi.draw.drawDetections(canvas, resizedResult)
180+
}
181+
faceapi.draw.drawFaceExpressions(canvas, resizedResult, minConfidence)
175182
}
176183

177184
setTimeout(() => onPlay())

0 commit comments

Comments
 (0)