Skip to content

F
face
Commit 83d51e42 by vincent
Options

adjust examples to changes

parent 2ae76364
Showing with 42 additions and 47 deletions
examples/views/faceDetection.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="face-recognition.min.js"></script> <script src="face-recognition.js"></script>
<script src="axios.min.js"></script> <script src="axios.min.js"></script>
<script src="commons.js"></script> <script src="commons.js"></script>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<div class="indeterminate"></div> <div class="indeterminate"></div>
</div> </div>
<div style="position: relative" class="margin"> <div style="position: relative" class="margin">
<img id="img" src="" style="max-width: 800px;" /> <img id="inputImg" src="" style="max-width: 800px;" />
<canvas id="overlay" /> <canvas id="overlay" />
</div> </div>
<div class="row side-by-side"> <div class="row side-by-side">
...@@ -57,22 +57,19 @@ ...@@ -57,22 +57,19 @@
} }
async function updateResults() { async function updateResults() {
const imgEl = $(`#img`).get(0) const input = new facerecognition.NetInput('inputImg')
result = await net.locateFaces( const { width, height } = input
await facerecognition.mediaSrcToImageData(imgEl.src),
minConfidence
)
const canvas = $('#overlay').get(0) const canvas = $('#overlay').get(0)
const width = $(`#img`).width()
const height = $(`#img`).height()
canvas.width = width canvas.width = width
canvas.height = height canvas.height = height
result = await net.locateFaces(input, minConfidence)
facerecognition.drawDetection('overlay', result.map(det => det.forSize(width, height))) facerecognition.drawDetection('overlay', result.map(det => det.forSize(width, height)))
} }
async function onSelectionChanged(uri) { async function onSelectionChanged(uri) {
const imgBuf = await fetchImage(uri) const imgBuf = await fetchImage(uri)
$(`#img`).get(0).src = await facerecognition.bufferToImgSrc(imgBuf) $(`#inputImg`).get(0).src = (await facerecognition.bufferToImage(imgBuf)).src
updateResults() updateResults()
} }
......
examples/views/faceDetectionVideo.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="face-recognition.min.js"></script> <script src="face-recognition.js"></script>
<script src="axios.min.js"></script> <script src="axios.min.js"></script>
<script src="commons.js"></script> <script src="commons.js"></script>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
...@@ -38,6 +38,16 @@ ...@@ -38,6 +38,16 @@
<i class="material-icons left">+</i> <i class="material-icons left">+</i>
</button> </button>
</div> </div>
<div class="row side-by-side">
<div class="row">
<label for="time">Time:</label>
<input disabled value="-" id="time" type="text" class="bold">
</div>
<div class="row">
<label for="fps">Estimated Fps:</label>
<input disabled value="-" id="fps" type="text" class="bold">
</div>
</div>
</div> </div>
<script> <script>
...@@ -47,37 +57,32 @@ ...@@ -47,37 +57,32 @@
function onIncreaseThreshold() { function onIncreaseThreshold() {
minConfidence = Math.min(facerecognition.round(minConfidence + 0.1), 1.0) minConfidence = Math.min(facerecognition.round(minConfidence + 0.1), 1.0)
$('#minConfidence').val(minConfidence) $('#minConfidence').val(minConfidence)
updateResults()
} }
function onDecreaseThreshold() { function onDecreaseThreshold() {
minConfidence = Math.max(facerecognition.round(minConfidence - 0.1), 0.1) minConfidence = Math.max(facerecognition.round(minConfidence - 0.1), 0.1)
$('#minConfidence').val(minConfidence) $('#minConfidence').val(minConfidence)
updateResults() }
function displayTimeStats(timeInMs) {
$('#time').val(`${timeInMs} ms`)
$('#fps').val(`${facerecognition.round(1000 / timeInMs)}`)
} }
async function onPlay(videoEl) { async function onPlay(videoEl) {
if(videoEl.paused || videoEl.ended) if(videoEl.paused || videoEl.ended)
return false return false
console.time('frame') const input = new facerecognition.NetInput(videoEl)
const width = $(videoEl).innerWidth() const { width, height } = input
const height = $(videoEl).innerHeight()
videoEl.width = width
videoEl.height = height
const canvas = $('#overlay').get(0) const canvas = $('#overlay').get(0)
canvas.width = width canvas.width = width
canvas.height = height canvas.height = height
const fromPixelsCanvas = document.createElement('canvas') const ts = Date.now()
fromPixelsCanvas.width = videoEl.width result = await net.locateFaces(input, minConfidence)
fromPixelsCanvas.height = videoEl.height displayTimeStats(Date.now() - ts)
fromPixelsCanvas.getContext('2d').drawImage(
videoEl, 0, 0, videoEl.width, videoEl.height)
result = await net.locateFaces(fromPixelsCanvas, minConfidence)
console.timeEnd('frame')
console.log(facerecognition.tf.memory())
facerecognition.drawDetection('overlay', result.map(det => det.forSize(width, height))) facerecognition.drawDetection('overlay', result.map(det => det.forSize(width, height)))
setTimeout(() => onPlay(videoEl)) setTimeout(() => onPlay(videoEl))
} }
......
examples/views/faceRecognition.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="face-recognition.min.js"></script> <script src="face-recognition.js"></script>
<script src="axios.min.js"></script> <script src="axios.min.js"></script>
<script src="commons.js"></script> <script src="commons.js"></script>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
...@@ -108,10 +108,10 @@ ...@@ -108,10 +108,10 @@
getImg().src = src getImg().src = src
} }
async function loadTrainingData(cb) { async function loadTrainingImages() {
return await Promise.all(classes.map( return await Promise.all(classes.map(
async className => ({ async className => ({
imgData: await facerecognition.bufferToImageData( img: await facerecognition.bufferToImage(
await fetchImage(getFaceImageUri(className, 1)) await fetchImage(getFaceImageUri(className, 1))
), ),
className className
...@@ -135,16 +135,14 @@ ...@@ -135,16 +135,14 @@
async function runFaceRecognition() { async function runFaceRecognition() {
async function next() { async function next() {
const imgBuf = await fetchImage(getFaceImageUri(classes[currClassIdx], currImageIdx)) const imgBuf = await fetchImage(getFaceImageUri(classes[currClassIdx], currImageIdx))
const input = await facerecognition.bufferToImage(imgBuf)
const imgEl = $('#face').get(0) const imgEl = $('#face').get(0)
imgEl.src = await facerecognition.bufferToImgSrc(imgBuf) imgEl.src = input.src
const imageData = await facerecognition.mediaSrcToImageData(imgEl.src)
const ts = Date.now() const ts = Date.now()
const result = await net.forward(imageData) const descriptor = await net.computeFaceDescriptor(input)
displayTimeStats(Date.now() - ts) displayTimeStats(Date.now() - ts)
const descriptor = await result.data()
const bestMatch = getBestMatch(descriptor) const bestMatch = getBestMatch(descriptor)
$('#prediction').val(`${bestMatch.distance < threshold ? bestMatch.className : 'unkown'} (${bestMatch.distance})`) $('#prediction').val(`${bestMatch.distance < threshold ? bestMatch.className : 'unkown'} (${bestMatch.distance})`)
...@@ -166,10 +164,10 @@ ...@@ -166,10 +164,10 @@
net = await initFaceRecognitionNet() net = await initFaceRecognitionNet()
setStatusText('computing initial descriptors...') setStatusText('computing initial descriptors...')
const trainImgDatas = await loadTrainingData() const trainImgs = await loadTrainingImages()
trainDescriptorsByClass = await Promise.all(trainImgDatas.map( trainDescriptorsByClass = await Promise.all(trainImgs.map(
async ({ className, imgData }) => ({ async ({ className, img }) => ({
descriptor: await net.computeFaceDescriptor(imgData), descriptor: await net.computeFaceDescriptor(img),
className className
}) })
)) ))
......
examples/views/faceSimilarity.html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<script src="face-recognition.min.js"></script> <script src="face-recognition.js"></script>
<script src="axios.min.js"></script> <script src="axios.min.js"></script>
<script src="commons.js"></script> <script src="commons.js"></script>
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
...@@ -53,17 +53,12 @@ ...@@ -53,17 +53,12 @@
$('#distance').css('background-color', bgColor) $('#distance').css('background-color', bgColor)
} }
async function computeDescriptorFromSrc(imgEl) {
return net.computeFaceDescriptor(
await facerecognition.mediaSrcToImageData(imgEl.src)
)
}
async function onSelectionChanged(which, uri) { async function onSelectionChanged(which, uri) {
const imgBuf = await fetchImage(uri) const imgBuf = await fetchImage(uri)
const input = await facerecognition.bufferToImage(imgBuf)
const imgEl = $(`#face${which}`).get(0) const imgEl = $(`#face${which}`).get(0)
imgEl.src = await facerecognition.bufferToImgSrc(imgBuf) imgEl.src = input.src
descriptors[`desc${which}`] = await computeDescriptorFromSrc(imgEl) descriptors[`desc${which}`] = await net.computeFaceDescriptor(input)
} }
async function run() { async function run() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment