Skip to content

Commit 83d51e4

Browse files
justadudewhohacksjustadudewhohacks
committed
adjust examples to changes
1 parent 2ae7636 commit 83d51e4

File tree

4 files changed

+42
-47
lines changed

4 files changed

+42
-47
lines changed

‎examples/views/faceDetection.html

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<script src="face-recognition.min.js"></script>
4+
<script src="face-recognition.js"></script>
55
<script src="axios.min.js"></script>
66
<script src="commons.js"></script>
77
<link rel="stylesheet" href="styles.css">
@@ -16,7 +16,7 @@
1616
<div class="indeterminate"></div>
1717
</div>
1818
<div style="position: relative" class="margin">
19-
<img id="img" src="" style="max-width: 800px;" />
19+
<img id="inputImg" src="" style="max-width: 800px;" />
2020
<canvas id="overlay" />
2121
</div>
2222
<div class="row side-by-side">
@@ -57,22 +57,19 @@
5757
}
5858

5959
async function updateResults() {
60-
const imgEl = $(`#img`).get(0)
61-
result = await net.locateFaces(
62-
await facerecognition.mediaSrcToImageData(imgEl.src),
63-
minConfidence
64-
)
60+
const input = new facerecognition.NetInput('inputImg')
61+
const { width, height } = input
6562
const canvas = $('#overlay').get(0)
66-
const width = $(`#img`).width()
67-
const height = $(`#img`).height()
6863
canvas.width = width
6964
canvas.height = height
65+
66+
result = await net.locateFaces(input, minConfidence)
7067
facerecognition.drawDetection('overlay', result.map(det => det.forSize(width, height)))
7168
}
7269

7370
async function onSelectionChanged(uri) {
7471
const imgBuf = await fetchImage(uri)
75-
$(`#img`).get(0).src = await facerecognition.bufferToImgSrc(imgBuf)
72+
$(`#inputImg`).get(0).src = (await facerecognition.bufferToImage(imgBuf)).src
7673
updateResults()
7774
}
7875

‎examples/views/faceDetectionVideo.html

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<script src="face-recognition.min.js"></script>
4+
<script src="face-recognition.js"></script>
55
<script src="axios.min.js"></script>
66
<script src="commons.js"></script>
77
<link rel="stylesheet" href="styles.css">
@@ -38,6 +38,16 @@
3838
<i class="material-icons left">+</i>
3939
</button>
4040
</div>
41+
<div class="row side-by-side">
42+
<div class="row">
43+
<label for="time">Time:</label>
44+
<input disabled value="-" id="time" type="text" class="bold">
45+
</div>
46+
<div class="row">
47+
<label for="fps">Estimated Fps:</label>
48+
<input disabled value="-" id="fps" type="text" class="bold">
49+
</div>
50+
</div>
4151
</div>
4252

4353
<script>
@@ -47,37 +57,32 @@
4757
function onIncreaseThreshold() {
4858
minConfidence = Math.min(facerecognition.round(minConfidence + 0.1), 1.0)
4959
$('#minConfidence').val(minConfidence)
50-
updateResults()
5160
}
5261

5362
function onDecreaseThreshold() {
5463
minConfidence = Math.max(facerecognition.round(minConfidence - 0.1), 0.1)
5564
$('#minConfidence').val(minConfidence)
56-
updateResults()
65+
}
66+
67+
function displayTimeStats(timeInMs) {
68+
$('#time').val(`${timeInMs} ms`)
69+
$('#fps').val(`${facerecognition.round(1000 / timeInMs)}`)
5770
}
5871

5972
async function onPlay(videoEl) {
6073
if(videoEl.paused || videoEl.ended)
6174
return false
6275

63-
console.time('frame')
64-
const width = $(videoEl).innerWidth()
65-
const height = $(videoEl).innerHeight()
66-
videoEl.width = width
67-
videoEl.height = height
76+
const input = new facerecognition.NetInput(videoEl)
77+
const { width, height } = input
6878
const canvas = $('#overlay').get(0)
6979
canvas.width = width
7080
canvas.height = height
7181

72-
const fromPixelsCanvas = document.createElement('canvas')
73-
fromPixelsCanvas.width = videoEl.width
74-
fromPixelsCanvas.height = videoEl.height
75-
fromPixelsCanvas.getContext('2d').drawImage(
76-
videoEl, 0, 0, videoEl.width, videoEl.height)
82+
const ts = Date.now()
83+
result = await net.locateFaces(input, minConfidence)
84+
displayTimeStats(Date.now() - ts)
7785

78-
result = await net.locateFaces(fromPixelsCanvas, minConfidence)
79-
console.timeEnd('frame')
80-
console.log(facerecognition.tf.memory())
8186
facerecognition.drawDetection('overlay', result.map(det => det.forSize(width, height)))
8287
setTimeout(() => onPlay(videoEl))
8388
}

‎examples/views/faceRecognition.html

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<script src="face-recognition.min.js"></script>
4+
<script src="face-recognition.js"></script>
55
<script src="axios.min.js"></script>
66
<script src="commons.js"></script>
77
<link rel="stylesheet" href="styles.css">
@@ -108,10 +108,10 @@
108108
getImg().src = src
109109
}
110110

111-
async function loadTrainingData(cb) {
111+
async function loadTrainingImages() {
112112
return await Promise.all(classes.map(
113113
async className => ({
114-
imgData: await facerecognition.bufferToImageData(
114+
img: await facerecognition.bufferToImage(
115115
await fetchImage(getFaceImageUri(className, 1))
116116
),
117117
className
@@ -135,16 +135,14 @@
135135
async function runFaceRecognition() {
136136
async function next() {
137137
const imgBuf = await fetchImage(getFaceImageUri(classes[currClassIdx], currImageIdx))
138+
const input = await facerecognition.bufferToImage(imgBuf)
138139
const imgEl = $('#face').get(0)
139-
imgEl.src = await facerecognition.bufferToImgSrc(imgBuf)
140-
141-
const imageData = await facerecognition.mediaSrcToImageData(imgEl.src)
140+
imgEl.src = input.src
142141

143142
const ts = Date.now()
144-
const result = await net.forward(imageData)
143+
const descriptor = await net.computeFaceDescriptor(input)
145144
displayTimeStats(Date.now() - ts)
146145

147-
const descriptor = await result.data()
148146
const bestMatch = getBestMatch(descriptor)
149147
$('#prediction').val(`${bestMatch.distance < threshold ? bestMatch.className : 'unkown'} (${bestMatch.distance})`)
150148

@@ -166,10 +164,10 @@
166164
net = await initFaceRecognitionNet()
167165
setStatusText('computing initial descriptors...')
168166

169-
const trainImgDatas = await loadTrainingData()
170-
trainDescriptorsByClass = await Promise.all(trainImgDatas.map(
171-
async ({ className, imgData }) => ({
172-
descriptor: await net.computeFaceDescriptor(imgData),
167+
const trainImgs = await loadTrainingImages()
168+
trainDescriptorsByClass = await Promise.all(trainImgs.map(
169+
async ({ className, img }) => ({
170+
descriptor: await net.computeFaceDescriptor(img),
173171
className
174172
})
175173
))

‎examples/views/faceSimilarity.html

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<script src="face-recognition.min.js"></script>
4+
<script src="face-recognition.js"></script>
55
<script src="axios.min.js"></script>
66
<script src="commons.js"></script>
77
<link rel="stylesheet" href="styles.css">
@@ -53,17 +53,12 @@
5353
$('#distance').css('background-color', bgColor)
5454
}
5555

56-
async function computeDescriptorFromSrc(imgEl) {
57-
return net.computeFaceDescriptor(
58-
await facerecognition.mediaSrcToImageData(imgEl.src)
59-
)
60-
}
61-
6256
async function onSelectionChanged(which, uri) {
6357
const imgBuf = await fetchImage(uri)
58+
const input = await facerecognition.bufferToImage(imgBuf)
6459
const imgEl = $(`#face${which}`).get(0)
65-
imgEl.src = await facerecognition.bufferToImgSrc(imgBuf)
66-
descriptors[`desc${which}`] = await computeDescriptorFromSrc(imgEl)
60+
imgEl.src = input.src
61+
descriptors[`desc${which}`] = await net.computeFaceDescriptor(input)
6762
}
6863

6964
async function run() {

0 commit comments

Comments
 (0)