Skip to content

Commit 9a54b06

Browse files
justadudewhohacksjustadudewhohacks
committed
fixed examples
1 parent df5ac5d commit 9a54b06

18 files changed

+102
-121
lines changed

‎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() {

0 commit comments

Comments
 (0)