Skip to content

F
face
Commit 331e323a by vincent
Options

refactor some stuff in examples + init face detection example

parent d1d0bd4c
Showing with 242 additions and 132 deletions
examples/faceRecognition/public/commons.js deleted 100644 → 0
const classes = ['amy', 'bernadette', 'howard', 'leonard', 'penny', 'raj', 'sheldon', 'stuart']
function getImageUri(className, idx) {
return `/${className}/${className}${idx}.png`
}
async function initNet() {
const res = await axios.get('face_recognition_model.weights', { responseType: 'arraybuffer' })
const weights = new Float32Array(res.data)
return facerecognition.faceRecognitionNet(weights)
}
function bufferToImgSrc(buf) {
return new Promise((resolve, reject) => {
const reader = new window.FileReader()
reader.onload = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(buf)
})
}
function imgSrcToData(src) {
return new Promise((resolve, reject) => {
const canvas = document.createElement('canvas')
canvas.width = 150
canvas.height = 150
const ctx = canvas.getContext('2d')
const img = new Image()
img.onload = function() {
ctx.drawImage(img, 0, 0)
resolve(ctx.getImageData(0, 0, 150, 150))
}
img.onerror = reject
img.src = src
})
}
async function bufferToImageData(buf) {
return imgSrcToData(await bufferToImgSrc(buf))
}
async function fetchImage(uri) {
return (await axios.get(uri, { responseType: 'blob' })).data
}
function round(num) {
return Math.floor(num * 100) / 100
}
\ No newline at end of file
examples/faceRecognition/server.js deleted 100644 → 0
const express = require('express')
const path = require('path')
const app = express()
const viewsDir = path.join(__dirname, 'views')
app.use(express.static(path.join(__dirname, '../images')))
app.use(express.static(path.join(__dirname, '../../weights')))
app.use(express.static(path.join(__dirname, '../../dist')))
app.use(express.static(path.join(__dirname, './node_modules/axios/dist')))
app.use(express.static(viewsDir))
app.use(express.static(path.join(__dirname, './public')))
app.get('/', (req, res) => res.redirect('/faceRecognition'))
app.get('/faceRecognition', (req, res) => res.sendFile(path.join(viewsDir, 'faceRecognition.html')))
app.get('/faceSimilarity', (req, res) => res.sendFile(path.join(viewsDir, 'faceSimilarity.html')))
app.listen(3000, () => console.log('Listening on port 3000!'))
\ No newline at end of file
examples/public/commons.js 0 → 100644
const classes = ['amy', 'bernadette', 'howard', 'leonard', 'penny', 'raj', 'sheldon', 'stuart']
function getImageUri(imageName) {
return `images/${imageName}`
}
function getFaceImageUri(className, idx) {
return `images/${className}/${className}${idx}.png`
}
async function initNet() {
const res = await axios.get('face_recognition_model.weights', { responseType: 'arraybuffer' })
const weights = new Float32Array(res.data)
return facerecognition.faceRecognitionNet(weights)
}
function bufferToImgSrc(buf) {
return new Promise((resolve, reject) => {
const reader = new window.FileReader()
reader.onload = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(buf)
})
}
function imgSrcToData(src) {
return new Promise((resolve, reject) => {
const canvas = document.createElement('canvas')
canvas.width = 150
canvas.height = 150
const ctx = canvas.getContext('2d')
const img = new Image()
img.onload = function() {
ctx.drawImage(img, 0, 0)
resolve(ctx.getImageData(0, 0, 150, 150))
}
img.onerror = reject
img.src = src
})
}
async function bufferToImageData(buf) {
return imgSrcToData(await bufferToImgSrc(buf))
}
async function fetchImage(uri) {
return (await axios.get(uri, { responseType: 'blob' })).data
}
function round(num) {
return Math.floor(num * 100) / 100
}
function renderNavBar(navbarId, exampleUri) {
const examples = [
{
uri: 'face_detection',
name: 'Face Detection'
},
{
uri: 'face_recognition',
name: 'Face Recognition'
},
{
uri: 'face_similarity',
name: 'Face Similarity'
}
]
const navbar = $(navbarId).get(0)
navbar.classList.add('row')
examples
.filter(ex => ex.uri !== exampleUri)
.forEach(ex => {
const a = document.createElement('a')
navbar.appendChild(a)
a.classList.add('waves-effect', 'waves-light', 'btn', 'margin-sm')
a.href = ex.uri
a.innerHTML = ex.name
})
}
function renderSelectList(selectListId, onChange, initialValue, renderChildren) {
const select = document.createElement('select')
$(selectListId).get(0).appendChild(select)
renderChildren(select)
$(select).val(initialValue)
$(select).on('change', (e) => onChange(e.target.value))
$(select).material_select()
}
function renderOption(parent, text, value) {
const option = document.createElement('option')
option.innerHTML = text
option.value = value
parent.appendChild(option)
}
function renderFaceImageSelectList(selectListId, onChange, initialValue) {
const indices = [1, 2, 3, 4, 5]
function renderChildren(select) {
classes.forEach(className => {
const optgroup = document.createElement('optgroup')
optgroup.label = className
select.appendChild(optgroup)
indices.forEach(imageIdx =>
renderOption(
optgroup,
`${className} ${imageIdx}`,
getFaceImageUri(className, imageIdx)
)
)
})
}
renderSelectList(
selectListId,
onChange,
getFaceImageUri(initialValue.className, initialValue.imageIdx),
renderChildren
)
}
function renderImageSelectList(selectListId, onChange, initialValue) {
const images = [1, 2, 3, 4, 5]
function renderChildren(select) {
images.forEach(imageName =>
renderOption(
select,
`${imageName}.jpg`,
getImageUri(`${imageName}.jpg`)
)
)
}
renderSelectList(
selectListId,
onChange,
getImageUri(`${initialValue}.jpg`),
renderChildren
)
}
\ No newline at end of file
examples/faceRecognition/public/styles.css → examples/public/styles.css
...@@ -23,6 +23,10 @@ ...@@ -23,6 +23,10 @@
font-weight: bold; font-weight: bold;
} }
.margin-sm {
margin: 5px;
}
.margin { .margin {
margin: 20px; margin: 20px;
} }
......
examples/server.js 0 → 100644
const express = require('express')
const path = require('path')
const app = express()
const viewsDir = path.join(__dirname, 'views')
app.use(express.static(viewsDir))
app.use(express.static(path.join(__dirname, './public')))
app.use(express.static(path.join(__dirname, '../weights')))
app.use(express.static(path.join(__dirname, '../dist')))
app.use(express.static(path.join(__dirname, './node_modules/axios/dist')))
app.get('/', (req, res) => res.redirect('/face_detection'))
app.get('/face_detection', (req, res) => res.sendFile(path.join(viewsDir, 'faceDetection.html')))
app.get('/face_recognition', (req, res) => res.sendFile(path.join(viewsDir, 'faceRecognition.html')))
app.get('/face_similarity', (req, res) => res.sendFile(path.join(viewsDir, 'faceSimilarity.html')))
app.listen(3000, () => console.log('Listening on port 3000!'))
\ No newline at end of file
examples/views/faceDetection.html 0 → 100644
<!DOCTYPE html>
<html>
<head>
<script src="face-recognition.min.js"></script>
<script src="axios.min.js"></script>
<script src="commons.js"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<div class="center-content page-container">
<div id="navbar"></div>
<div class="center-content">
<img id="img" src="" class="margin"/>
<div id="selectList" class="input-field"></div>
</div>
</div>
<script>
async function onSelectionChanged(uri) {
const imgBuf = await fetchImage(uri)
const imgEl = $(`#img`).get(0)
imgEl.src = await bufferToImgSrc(imgBuf)
}
$(document).ready(function() {
renderNavBar('#navbar')
renderImageSelectList(
'#selectList',
async (uri) => {
await onSelectionChanged(uri)
},
1
)
onSelectionChanged($('#selectList select').val())
})
</script>
</body>
</html>
\ No newline at end of file
examples/faceRecognition/views/faceRecognition.html → examples/views/faceRecognition.html
...@@ -11,14 +11,8 @@ ...@@ -11,14 +11,8 @@
</head> </head>
<body> <body>
<div class="center-content page-container"> <div class="center-content page-container">
<div class="row"> <div id="navbar"></div>
<a
class="waves-effect waves-light btn"
href="faceSimilarity.html"
>
Go To Face Similarity Example
</a>
</div>
<div> <div>
<div class="row center-content" id="loader"> <div class="row center-content" id="loader">
<input disabled value="" id="status" type="text" class="bold"> <input disabled value="" id="status" type="text" class="bold">
...@@ -118,7 +112,7 @@ ...@@ -118,7 +112,7 @@
return await Promise.all(classes.map( return await Promise.all(classes.map(
async className => ({ async className => ({
imgData: await bufferToImageData( imgData: await bufferToImageData(
await fetchImage(getImageUri(className, 1)) await fetchImage(getFaceImageUri(className, 1))
), ),
className className
}) })
...@@ -138,7 +132,7 @@ ...@@ -138,7 +132,7 @@
async function runFaceRecognition() { async function runFaceRecognition() {
async function next() { async function next() {
const imgBuf = await fetchImage(getImageUri(classes[currClassIdx], currImageIdx)) const imgBuf = await fetchImage(getFaceImageUri(classes[currClassIdx], currImageIdx))
const imgEl = $('#face').get(0) const imgEl = $('#face').get(0)
imgEl.src = await bufferToImgSrc(imgBuf) imgEl.src = await bufferToImgSrc(imgBuf)
...@@ -185,7 +179,11 @@ ...@@ -185,7 +179,11 @@
} }
} }
run() $(document).ready(function() {
renderNavBar('#navbar', 'face_recognition')
run()
})
</script> </script>
</body> </body>
......
examples/faceRecognition/views/faceSimilarity.html → examples/views/faceSimilarity.html
...@@ -11,14 +11,8 @@ ...@@ -11,14 +11,8 @@
</head> </head>
<body> <body>
<div class="center-content page-container"> <div class="center-content page-container">
<div class="row"> <div id="navbar"></div>
<a
class="waves-effect waves-light btn"
href="faceRecognition"
>
Go To Face Recognition Example
</a>
</div>
<div> <div>
<div class="progress" id="loader"> <div class="progress" id="loader">
<div class="indeterminate"></div> <div class="indeterminate"></div>
...@@ -45,25 +39,6 @@ ...@@ -45,25 +39,6 @@
const threshold = 0.6 const threshold = 0.6
let net, descriptors = { desc1: null, desc2: null } let net, descriptors = { desc1: null, desc2: null }
function renderSelectList(parent) {
const select = document.createElement('select')
parent.appendChild(select)
classes.forEach((className) => {
const optgroup = document.createElement('optgroup')
optgroup.label = className
select.appendChild(optgroup)
const indices = [1, 2, 3, 4, 5]
indices.forEach((imageIdx) => {
const option = document.createElement('option')
option.innerHTML = `${className} ${imageIdx}`
option.value = getImageUri(className, imageIdx)
optgroup.appendChild(option)
})
})
}
function updateResult() { function updateResult() {
const distance = round(facerecognition.euclideanDistance(descriptors.desc1, descriptors.desc2)) const distance = round(facerecognition.euclideanDistance(descriptors.desc1, descriptors.desc2))
let text = distance let text = distance
...@@ -80,44 +55,40 @@ ...@@ -80,44 +55,40 @@
return net.computeFaceDescriptor(await imgSrcToData(imgEl.src)) return net.computeFaceDescriptor(await imgSrcToData(imgEl.src))
} }
async function onSelectionChanged(which) { async function onSelectionChanged(which, uri) {
const selectElSelector = `#selectList${which} select`
const imgElSelector = `#face${which}`
const whichDesc = `desc${which}`
const uri = $(selectElSelector).val()
const imgEl = $(imgElSelector).get(0)
const imgBuf = await fetchImage(uri) const imgBuf = await fetchImage(uri)
const imgEl = $(`#face${which}`).get(0)
imgEl.src = await bufferToImgSrc(imgBuf) imgEl.src = await bufferToImgSrc(imgBuf)
descriptors[whichDesc] = await computeDescriptorFromSrc($(imgElSelector).get(0)) descriptors[`desc${which}`] = await computeDescriptorFromSrc(imgEl)
} }
async function run() { async function run() {
$('#selectList1 select').val(getImageUri('sheldon', 1))
$('#selectList1 select').material_select()
$('#selectList2 select').val(getImageUri('howard', 1))
$('#selectList2 select').material_select()
net = await initNet() net = await initNet()
$('#loader').hide() $('#loader').hide()
await onSelectionChanged(1) await onSelectionChanged(1, $('#selectList1 select').val())
await onSelectionChanged(2) await onSelectionChanged(2, $('#selectList2 select').val())
updateResult() updateResult()
} }
$(document).ready(function() { $(document).ready(function() {
renderSelectList($('#selectList1').get(0)) renderNavBar('#navbar', 'face_similarity')
renderSelectList($('#selectList2').get(0)) renderFaceImageSelectList(
$('select').material_select() '#selectList1',
$('#selectList1 select').on('change', async () => { async (uri) => {
await onSelectionChanged(1) await onSelectionChanged(1, uri)
updateResult() updateResult()
}) },
$('#selectList2 select').on('change', async () => { { className: 'sheldon', imageIdx: 1 }
await onSelectionChanged(2) )
updateResult()
})
renderFaceImageSelectList(
'#selectList2',
async (uri) => {
await onSelectionChanged(2, uri)
updateResult()
},
{ className: 'howard', imageIdx: 1 }
)
run() 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