From c293006ba43944ffeb4dcab17b2256f3a5491a36 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 15:10:19 +0100 Subject: build cloud --- site/assets/cloud/.gitignore | 1 + site/assets/cloud/.npmignore | 4 + site/assets/cloud/LICENSE | 21 +++++ site/assets/cloud/README.md | 109 +++++++++++++++++++++++ site/assets/cloud/THREE.TextSprite.js | 1 + site/assets/cloud/demo/script.js | 129 ++++++++++++++++++++++++++++ site/assets/cloud/index.html | 31 +++++++ site/assets/cloud/package.json | 40 +++++++++ site/assets/cloud/rollup.config.js | 25 ++++++ site/assets/cloud/src/getOptimalFontSize.js | 18 ++++ site/assets/cloud/src/index.js | 78 +++++++++++++++++ site/assets/css/css.css | 15 +++- site/assets/js/app/face.js | 68 ++++++++------- site/public/index.html | 30 ++++--- site/templates/home.html | 30 ++++--- 15 files changed, 537 insertions(+), 63 deletions(-) create mode 100644 site/assets/cloud/.gitignore create mode 100644 site/assets/cloud/.npmignore create mode 100644 site/assets/cloud/LICENSE create mode 100644 site/assets/cloud/README.md create mode 100644 site/assets/cloud/THREE.TextSprite.js create mode 100644 site/assets/cloud/demo/script.js create mode 100644 site/assets/cloud/index.html create mode 100644 site/assets/cloud/package.json create mode 100644 site/assets/cloud/rollup.config.js create mode 100644 site/assets/cloud/src/getOptimalFontSize.js create mode 100644 site/assets/cloud/src/index.js (limited to 'site') diff --git a/site/assets/cloud/.gitignore b/site/assets/cloud/.gitignore new file mode 100644 index 00000000..2ccbe465 --- /dev/null +++ b/site/assets/cloud/.gitignore @@ -0,0 +1 @@ +/node_modules/ diff --git a/site/assets/cloud/.npmignore b/site/assets/cloud/.npmignore new file mode 100644 index 00000000..dcaf4a28 --- /dev/null +++ b/site/assets/cloud/.npmignore @@ -0,0 +1,4 @@ +/demo/ +/index.html +/rollup.config.js +/src/ diff --git a/site/assets/cloud/LICENSE b/site/assets/cloud/LICENSE new file mode 100644 index 00000000..edeba37c --- /dev/null +++ b/site/assets/cloud/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017-2018 Sergej Sintschilin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/site/assets/cloud/README.md b/site/assets/cloud/README.md new file mode 100644 index 00000000..de6e882e --- /dev/null +++ b/site/assets/cloud/README.md @@ -0,0 +1,109 @@ +# THREE.TextSprite + +`class THREE.TextSprite extends THREE.Sprite` + +An instance of `TextSprite` automatically computes the optimal font size depending on the distance to the camera and the size of the renderer canvas. + +## demo + +[Try it out!](https://seregpie.github.io/THREE.TextSprite/) + +## dependencies + +- [THREE.TextTexture](https://github.com/SeregPie/THREE.TextTexture) + +## setup + +### npm + +```shell +npm install three.textsprite +``` + +### ES module + +```javascript +import TextSprite from 'three.textsprite'; +``` + +### browser + +```html + + + +``` + +The class `TextSprite` will be available under the namespace `THREE`. + +## members + +``` +.constructor({ + material, + maxFontSize, + minFontSize, + redrawInterval, + textSize, + texture, +}) +``` + +| argument | description | +| ---: | :--- | +| `material` | The parameters to pass to the constructor of [`SpriteMaterial`](https://threejs.org/docs/index.html#api/materials/SpriteMaterial). | +| `texture` | The parameters to pass to the constructor of [`TextTexture`](https://github.com/SeregPie/THREE.TextTexture). | + +```javascript +let sprite = new THREE.TextSprite({ + material: { + color: 0xffbbff, + fog: true, + }, + redrawInterval: 250, + textSize: 10, + texture: { + text: 'Carpe Diem', + fontFamily: 'Arial, Helvetica, sans-serif', + }, +}); +scene.add(sprite); +``` + +--- + +`.isTextSprite = true` + +Used to check whether this is an instance of `TextSprite`. + +You should not change this, as it is used internally for optimisation. + +--- + +`.textSize = 1` + +The size of the text. + +--- + +`.redrawInterval = 1` + +The minimum time that must elapse before the canvas is redrawn. If 0, the canvas is redrawn immediately whenever `TextSprite` is rendered, otherwise the redrawing is deferred. + +--- + +`.minFontSize = 0` + +The minimum font size. + +--- + +`.maxFontSize = Infinity` + +The maximum font size. + +--- + +`.dispose()` + +Disposes the texture and the material. diff --git a/site/assets/cloud/THREE.TextSprite.js b/site/assets/cloud/THREE.TextSprite.js new file mode 100644 index 00000000..525d22cd --- /dev/null +++ b/site/assets/cloud/THREE.TextSprite.js @@ -0,0 +1 @@ +(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b(require("three"),require("three.texttexture")):"function"==typeof define&&define.amd?define(["three","three.texttexture"],b):(a.THREE=a.THREE||{},a.THREE.TextSprite=b(a.THREE,a.THREE.TextTexture))})(this,function(a,b){"use strict";function c(a,b,c){var g=Math.round;if(b.domElement.width&&b.domElement.height&&a.material.map.textLines.length){var h=a.getWorldPosition(d).distanceTo(c.getWorldPosition(e));if(h){var i=a.getWorldScale(f).y*b.domElement.height/h;if(i)return g(i/a.material.map.imageHeight)}}return 0}b=b&&b.hasOwnProperty("default")?b["default"]:b;var d=new a.Vector3,e=new a.Vector3,f=new a.Vector3,g=function(d){function e(c){void 0===c&&(c={});var e=c.textSize;void 0===e&&(e=1);var f=c.redrawInterval;void 0===f&&(f=1);var g=c.minFontSize;void 0===g&&(g=0);var h=c.maxFontSize;void 0===h&&(h=1/0);var i=c.material;void 0===i&&(i={});var j=c.texture;void 0===j&&(j={}),d.call(this,new a.SpriteMaterial(Object.assign({},i,{map:new b(j)}))),this.textSize=e,this.redrawInterval=f,this.minFontSize=g,this.maxFontSize=h,this.lastRedraw=0}d&&(e.__proto__=d),e.prototype=Object.create(d&&d.prototype),e.prototype.constructor=e;var f={isTextSprite:{configurable:!0}};return f.isTextSprite.get=function(){return!0},e.prototype.onBeforeRender=function(a,b,c){this.redraw(a,c)},e.prototype.updateScale=function(){this.scale.set(this.material.map.imageAspect,1,1).multiplyScalar(this.textSize*this.material.map.imageHeight)},e.prototype.updateMatrix=function(){for(var a=[],b=arguments.length;b--;)a[b]=arguments[b];return this.updateScale(),d.prototype.updateMatrix.apply(this,a)},e.prototype.redraw=function(a,b){var c=this;this.lastRedraw+this.redrawInterval + + + + + THREE.TextSprite + + + + + + + + + + + + diff --git a/site/assets/cloud/package.json b/site/assets/cloud/package.json new file mode 100644 index 00000000..f7556104 --- /dev/null +++ b/site/assets/cloud/package.json @@ -0,0 +1,40 @@ +{ + "name": "three.textsprite", + "version": "18.10.24", + "description": "Automatically computes the optimal font size depending on the distance to the camera and the size of the renderer canvas.", + "keywords": [ + "3d", + "canvas", + "class", + "font", + "group", + "object", + "plugin", + "resolution", + "scale", + "size", + "text", + "texture", + "three" + ], + "license": "MIT", + "author": "Sergej Sintschilin ", + "main": "THREE.TextSprite.js", + "repository": "https://github.com/SeregPie/THREE.TextSprite.git", + "scripts": { + "build": "rollup -c", + "dev": "rollup -c -w", + "prepublishOnly": "npm run build" + }, + "dependencies": { + "three.texttexture": "^18.10.24" + }, + "devDependencies": { + "rollup": "^0.66.6", + "rollup-plugin-babel-minify": "^6.1.1", + "rollup-plugin-buble": "^0.19.4" + }, + "peerDependencies": { + "three": "^0.97.0" + } +} diff --git a/site/assets/cloud/rollup.config.js b/site/assets/cloud/rollup.config.js new file mode 100644 index 00000000..57415169 --- /dev/null +++ b/site/assets/cloud/rollup.config.js @@ -0,0 +1,25 @@ +import buble from 'rollup-plugin-buble'; +import minify from 'rollup-plugin-babel-minify'; +import path from 'path'; + +import {main} from './package.json'; + +let globals = { + 'three': 'THREE', + 'three.texttexture': 'THREE.TextTexture', +}; + +export default { + input: 'src/index.js', + external: Object.keys(globals), + output: { + file: main, + format: 'umd', + name: path.basename(main, path.extname(main)), + globals, + }, + plugins: [ + buble({objectAssign: 'Object.assign'}), + minify({comments: false}), + ], +}; diff --git a/site/assets/cloud/src/getOptimalFontSize.js b/site/assets/cloud/src/getOptimalFontSize.js new file mode 100644 index 00000000..02787516 --- /dev/null +++ b/site/assets/cloud/src/getOptimalFontSize.js @@ -0,0 +1,18 @@ +import {Vector3} from 'three'; + +let objectWorldPosition = new Vector3(); +let cameraWorldPosition = new Vector3(); +let objectWorldScale = new Vector3(); + +export default function(object, renderer, camera) { + if (renderer.domElement.width && renderer.domElement.height && object.material.map.textLines.length) { + let distance = object.getWorldPosition(objectWorldPosition).distanceTo(camera.getWorldPosition(cameraWorldPosition)); + if (distance) { + let heightInPixels = object.getWorldScale(objectWorldScale).y * renderer.domElement.height / distance; + if (heightInPixels) { + return Math.round(heightInPixels / object.material.map.imageHeight); + } + } + } + return 0; +} diff --git a/site/assets/cloud/src/index.js b/site/assets/cloud/src/index.js new file mode 100644 index 00000000..270891d5 --- /dev/null +++ b/site/assets/cloud/src/index.js @@ -0,0 +1,78 @@ +import { + Math as THREE_Math, + Sprite, + SpriteMaterial, +} from 'three'; +import TextTexture from 'three.texttexture'; + +import getOptimalFontSize from './getOptimalFontSize'; + +export default class extends Sprite { + constructor({ + textSize = 1, + redrawInterval = 1, + minFontSize = 0, + maxFontSize = Infinity, + material = {}, + texture = {}, + } = {}) { + super(new SpriteMaterial({ + ...material, + map: new TextTexture(texture), + })); + this.textSize = textSize; + this.redrawInterval = redrawInterval; + this.minFontSize = minFontSize; + this.maxFontSize = maxFontSize; + this.lastRedraw = 0; + } + + get isTextSprite() { + return true; + } + + onBeforeRender(renderer, scene, camera) { + this.redraw(renderer, camera); + } + + updateScale() { + this.scale + .set(this.material.map.imageAspect, 1, 1) + .multiplyScalar(this.textSize * this.material.map.imageHeight); + } + + updateMatrix(...args) { + this.updateScale(); + return super.updateMatrix(...args); + } + + redraw(renderer, camera) { + if (this.lastRedraw + this.redrawInterval < Date.now()) { + if (this.redrawInterval) { + setTimeout(() => { + this.redrawNow(renderer, camera); + }, 1); + } else { + this.redrawNow(renderer, camera); + } + } + } + + redrawNow(renderer, camera) { + this.updateScale(); + this.material.map.autoRedraw = true; + this.material.map.fontSize = THREE_Math.clamp( + THREE_Math.ceilPowerOfTwo( + getOptimalFontSize(this, renderer, camera) + ), + this.minFontSize, + this.maxFontSize, + ); + this.lastRedraw = Date.now(); + } + + dispose() { + this.material.map.dispose(); + this.material.dispose(); + } +} diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 8239cfc7..18959c12 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -376,11 +376,17 @@ section.fullwidth .image { /* home page */ .hero { - position: relative; width: 100%; - max-width: 1200px; + background: black; + background: linear-gradient(#000,#222); height: 50vw; max-height: 70vh; +} +.hero .inner { + position: relative; + width: 100%; + max-width: 1200px; + height: 100%; display: flex; align-items: center; margin: 0 auto; @@ -393,7 +399,7 @@ section.fullwidth .image { max-height: 70vh; top: 0; right: 0; - z-index: -1; + z-index: 0; text-align: center; } .currentFace { @@ -451,6 +457,9 @@ section.fullwidth .image { .desktop .intro .under a:hover { color: #fff; } +.dataset-intro h2 { + margin-top: 40px; +} /* intro - list of datasets */ diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js index f3f1f2bf..1818e9aa 100644 --- a/site/assets/js/app/face.js +++ b/site/assets/js/app/face.js @@ -1,4 +1,5 @@ -var face = (function(){ +/* eslint-disable */ +var faceInit = function () { var container = document.querySelector("#face_container") var camera, controls, scene, renderer var mouse = new THREE.Vector2(0.5, 0.5) @@ -16,6 +17,7 @@ var face = (function(){ return a })() var last_t = 0, start_t = 0 + var bgColor = 0x000000 // 0x191919 var colors = [ 0xff3333, 0xff8833, @@ -32,32 +34,33 @@ var face = (function(){ function init() { fetch("/assets/data/3dlm_0_10.json") - .then(req => req.json()) - .then(data => { - face_names = Object.keys(data) - faces = face_names.map(name => recenter(data[name])) - setup() - build(faces[0]) - updateFace(faces[0]) - setCurrentFace(face_names[0]) - swapTo = faces[0] - animate() - }) + .then(req => req.json()) + .then(data => { + face_names = Object.keys(data) + faces = face_names.map(name => recenter(data[name])) + setup() + build(faces[0]) + updateFace(faces[0]) + setCurrentFace(face_names[0]) + swapTo = faces[0] + animate() + }) } function setup() { - var w = window.innerWidth / 2 + var w = window.innerWidth * 2/3 var h = Math.min(window.innerWidth / 2, window.innerHeight * 0.7) camera = new THREE.PerspectiveCamera(70, w/h, 1, 10000) camera.position.x = 0 camera.position.y = 0 - camera.position.z = 250 + camera.position.z = 200 scene = new THREE.Scene() - scene.background = new THREE.Color(0x191919) + // scene.background = new THREE.Color(bgColor) - renderer = new THREE.WebGLRenderer({ antialias: true }) + renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }) renderer.setPixelRatio(window.devicePixelRatio) renderer.setSize(w, h) + renderer.setClearColor(0x000000, 0); container.appendChild(renderer.domElement) document.body.addEventListener('mousemove', onMouseMove) // renderer.domElement.addEventListener('mousedown', swap) @@ -75,7 +78,7 @@ var face = (function(){ // console.log("done") // } // }) - setInterval(swap, 5000) + swap() } function build(points) { var matrix = new THREE.Matrix4() @@ -125,27 +128,28 @@ var face = (function(){ return (b-a) * n + a } function swap(){ - if (swapping) return - start_t = last_t - swapping = true swap_count = (swap_count + 1) % faces.length - swapFrom = swapTo + swapFrom = swapTo || faces[0] swapTo = faces[swap_count] setCurrentFace(face_names[swap_count]) + oktween.add({ + from: { n: 0 }, + to: { n: 1 }, + duration: 1000, + easing: oktween.easing.quad_in_out, + update: function(obj){ + lerpPoints(obj.n, swapFrom, swapTo, faceBuffer) + updateFace(faceBuffer) + }, + finished: function(){ + setTimeout(swap, 2000) + } + }) } function setCurrentFace(name) { name = name.replace('.png', '').split('_').filter(s => !s.match(/\d+/)).join(' ') currentFace.innerHTML = name } - function update_swap(t){ - var n = (t - start_t) / SWAP_TIME - if (n > 1) { - swapping = false - n = 1 - } - lerpPoints(n, swapFrom, swapTo, faceBuffer) - updateFace(faceBuffer) - } function updateFace(points) { updateCubeGeometry(points) updateLineGeometry(points) @@ -214,7 +218,6 @@ var face = (function(){ } function animate(t) { requestAnimationFrame(animate) - if (swapping) update_swap(t) renderer.render(scene, camera) // scene.rotation.y += 0.01 * Math.PI mouseTarget.x += (mouse.x - mouseTarget.x) * 0.1 @@ -224,4 +227,5 @@ var face = (function(){ // scene.rotation.y += 0.01 last_t = t } -})() +} +faceInit() \ No newline at end of file diff --git a/site/public/index.html b/site/public/index.html index b322b093..a9f16f30 100644 --- a/site/public/index.html +++ b/site/public/index.html @@ -28,27 +28,29 @@
-
-
-
-
-
- MegaPixels is an art project that explores the dark side of face recognition datasets and the future of computer vision. +
+
+
+
+
+ MegaPixels is an art project that explores the dark side of face recognition datasets and the future of computer vision. +
-
- - -
+
+ + +
-
- Made by Adam Harvey in collaboration with Jules Laplace, and in partnership with Mozilla.
- Read more about MegaPixels +
+ Made by Adam Harvey in collaboration with Jules Laplace, and in partnership with Mozilla.
+ Read more about MegaPixels +
-
+

Facial Recognition Datasets

SUMMARY

diff --git a/site/templates/home.html b/site/templates/home.html index fc821731..03a61af2 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -2,27 +2,29 @@ {% block content %}
-
-
-
-
-
- MegaPixels is an art project that explores the dark side of face recognition datasets and the future of computer vision. +
+
+
+
+
+ MegaPixels is an art project that explores the dark side of face recognition datasets and the future of computer vision. +
-
- - -
+
+ + +
-
- Made by Adam Harvey in collaboration with Jules Laplace, and in partnership with Mozilla.
- Read more about MegaPixels +
+ Made by Adam Harvey in collaboration with Jules Laplace, and in partnership with Mozilla.
+ Read more about MegaPixels +
-
+

Facial Recognition Datasets

SUMMARY

-- cgit v1.2.3-70-g09d2 From aa905ff8a384fbc6f9283bbdabb65bb0ae8bb0dd Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 15:13:14 +0100 Subject: mv --- site/assets/cloud/.gitignore | 1 - site/assets/cloud/.npmignore | 4 - site/assets/cloud/LICENSE | 21 ---- site/assets/cloud/README.md | 109 ------------------- site/assets/cloud/THREE.TextSprite.js | 1 - site/assets/cloud/demo/script.js | 129 ----------------------- site/assets/cloud/index.html | 31 ------ site/assets/cloud/package.json | 40 ------- site/assets/cloud/rollup.config.js | 25 ----- site/assets/cloud/src/getOptimalFontSize.js | 18 ---- site/assets/cloud/src/index.js | 78 -------------- site/assets/demo/cloud/.gitignore | 1 + site/assets/demo/cloud/.npmignore | 4 + site/assets/demo/cloud/LICENSE | 21 ++++ site/assets/demo/cloud/README.md | 109 +++++++++++++++++++ site/assets/demo/cloud/THREE.TextSprite.js | 1 + site/assets/demo/cloud/demo/script.js | 129 +++++++++++++++++++++++ site/assets/demo/cloud/index.html | 31 ++++++ site/assets/demo/cloud/package.json | 40 +++++++ site/assets/demo/cloud/rollup.config.js | 25 +++++ site/assets/demo/cloud/src/getOptimalFontSize.js | 18 ++++ site/assets/demo/cloud/src/index.js | 78 ++++++++++++++ 22 files changed, 457 insertions(+), 457 deletions(-) delete mode 100644 site/assets/cloud/.gitignore delete mode 100644 site/assets/cloud/.npmignore delete mode 100644 site/assets/cloud/LICENSE delete mode 100644 site/assets/cloud/README.md delete mode 100644 site/assets/cloud/THREE.TextSprite.js delete mode 100644 site/assets/cloud/demo/script.js delete mode 100644 site/assets/cloud/index.html delete mode 100644 site/assets/cloud/package.json delete mode 100644 site/assets/cloud/rollup.config.js delete mode 100644 site/assets/cloud/src/getOptimalFontSize.js delete mode 100644 site/assets/cloud/src/index.js create mode 100644 site/assets/demo/cloud/.gitignore create mode 100644 site/assets/demo/cloud/.npmignore create mode 100644 site/assets/demo/cloud/LICENSE create mode 100644 site/assets/demo/cloud/README.md create mode 100644 site/assets/demo/cloud/THREE.TextSprite.js create mode 100644 site/assets/demo/cloud/demo/script.js create mode 100644 site/assets/demo/cloud/index.html create mode 100644 site/assets/demo/cloud/package.json create mode 100644 site/assets/demo/cloud/rollup.config.js create mode 100644 site/assets/demo/cloud/src/getOptimalFontSize.js create mode 100644 site/assets/demo/cloud/src/index.js (limited to 'site') diff --git a/site/assets/cloud/.gitignore b/site/assets/cloud/.gitignore deleted file mode 100644 index 2ccbe465..00000000 --- a/site/assets/cloud/.gitignore +++ /dev/null @@ -1 +0,0 @@ -/node_modules/ diff --git a/site/assets/cloud/.npmignore b/site/assets/cloud/.npmignore deleted file mode 100644 index dcaf4a28..00000000 --- a/site/assets/cloud/.npmignore +++ /dev/null @@ -1,4 +0,0 @@ -/demo/ -/index.html -/rollup.config.js -/src/ diff --git a/site/assets/cloud/LICENSE b/site/assets/cloud/LICENSE deleted file mode 100644 index edeba37c..00000000 --- a/site/assets/cloud/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2017-2018 Sergej Sintschilin - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/site/assets/cloud/README.md b/site/assets/cloud/README.md deleted file mode 100644 index de6e882e..00000000 --- a/site/assets/cloud/README.md +++ /dev/null @@ -1,109 +0,0 @@ -# THREE.TextSprite - -`class THREE.TextSprite extends THREE.Sprite` - -An instance of `TextSprite` automatically computes the optimal font size depending on the distance to the camera and the size of the renderer canvas. - -## demo - -[Try it out!](https://seregpie.github.io/THREE.TextSprite/) - -## dependencies - -- [THREE.TextTexture](https://github.com/SeregPie/THREE.TextTexture) - -## setup - -### npm - -```shell -npm install three.textsprite -``` - -### ES module - -```javascript -import TextSprite from 'three.textsprite'; -``` - -### browser - -```html - - - -``` - -The class `TextSprite` will be available under the namespace `THREE`. - -## members - -``` -.constructor({ - material, - maxFontSize, - minFontSize, - redrawInterval, - textSize, - texture, -}) -``` - -| argument | description | -| ---: | :--- | -| `material` | The parameters to pass to the constructor of [`SpriteMaterial`](https://threejs.org/docs/index.html#api/materials/SpriteMaterial). | -| `texture` | The parameters to pass to the constructor of [`TextTexture`](https://github.com/SeregPie/THREE.TextTexture). | - -```javascript -let sprite = new THREE.TextSprite({ - material: { - color: 0xffbbff, - fog: true, - }, - redrawInterval: 250, - textSize: 10, - texture: { - text: 'Carpe Diem', - fontFamily: 'Arial, Helvetica, sans-serif', - }, -}); -scene.add(sprite); -``` - ---- - -`.isTextSprite = true` - -Used to check whether this is an instance of `TextSprite`. - -You should not change this, as it is used internally for optimisation. - ---- - -`.textSize = 1` - -The size of the text. - ---- - -`.redrawInterval = 1` - -The minimum time that must elapse before the canvas is redrawn. If 0, the canvas is redrawn immediately whenever `TextSprite` is rendered, otherwise the redrawing is deferred. - ---- - -`.minFontSize = 0` - -The minimum font size. - ---- - -`.maxFontSize = Infinity` - -The maximum font size. - ---- - -`.dispose()` - -Disposes the texture and the material. diff --git a/site/assets/cloud/THREE.TextSprite.js b/site/assets/cloud/THREE.TextSprite.js deleted file mode 100644 index 525d22cd..00000000 --- a/site/assets/cloud/THREE.TextSprite.js +++ /dev/null @@ -1 +0,0 @@ -(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b(require("three"),require("three.texttexture")):"function"==typeof define&&define.amd?define(["three","three.texttexture"],b):(a.THREE=a.THREE||{},a.THREE.TextSprite=b(a.THREE,a.THREE.TextTexture))})(this,function(a,b){"use strict";function c(a,b,c){var g=Math.round;if(b.domElement.width&&b.domElement.height&&a.material.map.textLines.length){var h=a.getWorldPosition(d).distanceTo(c.getWorldPosition(e));if(h){var i=a.getWorldScale(f).y*b.domElement.height/h;if(i)return g(i/a.material.map.imageHeight)}}return 0}b=b&&b.hasOwnProperty("default")?b["default"]:b;var d=new a.Vector3,e=new a.Vector3,f=new a.Vector3,g=function(d){function e(c){void 0===c&&(c={});var e=c.textSize;void 0===e&&(e=1);var f=c.redrawInterval;void 0===f&&(f=1);var g=c.minFontSize;void 0===g&&(g=0);var h=c.maxFontSize;void 0===h&&(h=1/0);var i=c.material;void 0===i&&(i={});var j=c.texture;void 0===j&&(j={}),d.call(this,new a.SpriteMaterial(Object.assign({},i,{map:new b(j)}))),this.textSize=e,this.redrawInterval=f,this.minFontSize=g,this.maxFontSize=h,this.lastRedraw=0}d&&(e.__proto__=d),e.prototype=Object.create(d&&d.prototype),e.prototype.constructor=e;var f={isTextSprite:{configurable:!0}};return f.isTextSprite.get=function(){return!0},e.prototype.onBeforeRender=function(a,b,c){this.redraw(a,c)},e.prototype.updateScale=function(){this.scale.set(this.material.map.imageAspect,1,1).multiplyScalar(this.textSize*this.material.map.imageHeight)},e.prototype.updateMatrix=function(){for(var a=[],b=arguments.length;b--;)a[b]=arguments[b];return this.updateScale(),d.prototype.updateMatrix.apply(this,a)},e.prototype.redraw=function(a,b){var c=this;this.lastRedraw+this.redrawInterval - - - - - THREE.TextSprite - - - - - - - - - - - - diff --git a/site/assets/cloud/package.json b/site/assets/cloud/package.json deleted file mode 100644 index f7556104..00000000 --- a/site/assets/cloud/package.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "name": "three.textsprite", - "version": "18.10.24", - "description": "Automatically computes the optimal font size depending on the distance to the camera and the size of the renderer canvas.", - "keywords": [ - "3d", - "canvas", - "class", - "font", - "group", - "object", - "plugin", - "resolution", - "scale", - "size", - "text", - "texture", - "three" - ], - "license": "MIT", - "author": "Sergej Sintschilin ", - "main": "THREE.TextSprite.js", - "repository": "https://github.com/SeregPie/THREE.TextSprite.git", - "scripts": { - "build": "rollup -c", - "dev": "rollup -c -w", - "prepublishOnly": "npm run build" - }, - "dependencies": { - "three.texttexture": "^18.10.24" - }, - "devDependencies": { - "rollup": "^0.66.6", - "rollup-plugin-babel-minify": "^6.1.1", - "rollup-plugin-buble": "^0.19.4" - }, - "peerDependencies": { - "three": "^0.97.0" - } -} diff --git a/site/assets/cloud/rollup.config.js b/site/assets/cloud/rollup.config.js deleted file mode 100644 index 57415169..00000000 --- a/site/assets/cloud/rollup.config.js +++ /dev/null @@ -1,25 +0,0 @@ -import buble from 'rollup-plugin-buble'; -import minify from 'rollup-plugin-babel-minify'; -import path from 'path'; - -import {main} from './package.json'; - -let globals = { - 'three': 'THREE', - 'three.texttexture': 'THREE.TextTexture', -}; - -export default { - input: 'src/index.js', - external: Object.keys(globals), - output: { - file: main, - format: 'umd', - name: path.basename(main, path.extname(main)), - globals, - }, - plugins: [ - buble({objectAssign: 'Object.assign'}), - minify({comments: false}), - ], -}; diff --git a/site/assets/cloud/src/getOptimalFontSize.js b/site/assets/cloud/src/getOptimalFontSize.js deleted file mode 100644 index 02787516..00000000 --- a/site/assets/cloud/src/getOptimalFontSize.js +++ /dev/null @@ -1,18 +0,0 @@ -import {Vector3} from 'three'; - -let objectWorldPosition = new Vector3(); -let cameraWorldPosition = new Vector3(); -let objectWorldScale = new Vector3(); - -export default function(object, renderer, camera) { - if (renderer.domElement.width && renderer.domElement.height && object.material.map.textLines.length) { - let distance = object.getWorldPosition(objectWorldPosition).distanceTo(camera.getWorldPosition(cameraWorldPosition)); - if (distance) { - let heightInPixels = object.getWorldScale(objectWorldScale).y * renderer.domElement.height / distance; - if (heightInPixels) { - return Math.round(heightInPixels / object.material.map.imageHeight); - } - } - } - return 0; -} diff --git a/site/assets/cloud/src/index.js b/site/assets/cloud/src/index.js deleted file mode 100644 index 270891d5..00000000 --- a/site/assets/cloud/src/index.js +++ /dev/null @@ -1,78 +0,0 @@ -import { - Math as THREE_Math, - Sprite, - SpriteMaterial, -} from 'three'; -import TextTexture from 'three.texttexture'; - -import getOptimalFontSize from './getOptimalFontSize'; - -export default class extends Sprite { - constructor({ - textSize = 1, - redrawInterval = 1, - minFontSize = 0, - maxFontSize = Infinity, - material = {}, - texture = {}, - } = {}) { - super(new SpriteMaterial({ - ...material, - map: new TextTexture(texture), - })); - this.textSize = textSize; - this.redrawInterval = redrawInterval; - this.minFontSize = minFontSize; - this.maxFontSize = maxFontSize; - this.lastRedraw = 0; - } - - get isTextSprite() { - return true; - } - - onBeforeRender(renderer, scene, camera) { - this.redraw(renderer, camera); - } - - updateScale() { - this.scale - .set(this.material.map.imageAspect, 1, 1) - .multiplyScalar(this.textSize * this.material.map.imageHeight); - } - - updateMatrix(...args) { - this.updateScale(); - return super.updateMatrix(...args); - } - - redraw(renderer, camera) { - if (this.lastRedraw + this.redrawInterval < Date.now()) { - if (this.redrawInterval) { - setTimeout(() => { - this.redrawNow(renderer, camera); - }, 1); - } else { - this.redrawNow(renderer, camera); - } - } - } - - redrawNow(renderer, camera) { - this.updateScale(); - this.material.map.autoRedraw = true; - this.material.map.fontSize = THREE_Math.clamp( - THREE_Math.ceilPowerOfTwo( - getOptimalFontSize(this, renderer, camera) - ), - this.minFontSize, - this.maxFontSize, - ); - this.lastRedraw = Date.now(); - } - - dispose() { - this.material.map.dispose(); - this.material.dispose(); - } -} diff --git a/site/assets/demo/cloud/.gitignore b/site/assets/demo/cloud/.gitignore new file mode 100644 index 00000000..2ccbe465 --- /dev/null +++ b/site/assets/demo/cloud/.gitignore @@ -0,0 +1 @@ +/node_modules/ diff --git a/site/assets/demo/cloud/.npmignore b/site/assets/demo/cloud/.npmignore new file mode 100644 index 00000000..dcaf4a28 --- /dev/null +++ b/site/assets/demo/cloud/.npmignore @@ -0,0 +1,4 @@ +/demo/ +/index.html +/rollup.config.js +/src/ diff --git a/site/assets/demo/cloud/LICENSE b/site/assets/demo/cloud/LICENSE new file mode 100644 index 00000000..edeba37c --- /dev/null +++ b/site/assets/demo/cloud/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2017-2018 Sergej Sintschilin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/site/assets/demo/cloud/README.md b/site/assets/demo/cloud/README.md new file mode 100644 index 00000000..de6e882e --- /dev/null +++ b/site/assets/demo/cloud/README.md @@ -0,0 +1,109 @@ +# THREE.TextSprite + +`class THREE.TextSprite extends THREE.Sprite` + +An instance of `TextSprite` automatically computes the optimal font size depending on the distance to the camera and the size of the renderer canvas. + +## demo + +[Try it out!](https://seregpie.github.io/THREE.TextSprite/) + +## dependencies + +- [THREE.TextTexture](https://github.com/SeregPie/THREE.TextTexture) + +## setup + +### npm + +```shell +npm install three.textsprite +``` + +### ES module + +```javascript +import TextSprite from 'three.textsprite'; +``` + +### browser + +```html + + + +``` + +The class `TextSprite` will be available under the namespace `THREE`. + +## members + +``` +.constructor({ + material, + maxFontSize, + minFontSize, + redrawInterval, + textSize, + texture, +}) +``` + +| argument | description | +| ---: | :--- | +| `material` | The parameters to pass to the constructor of [`SpriteMaterial`](https://threejs.org/docs/index.html#api/materials/SpriteMaterial). | +| `texture` | The parameters to pass to the constructor of [`TextTexture`](https://github.com/SeregPie/THREE.TextTexture). | + +```javascript +let sprite = new THREE.TextSprite({ + material: { + color: 0xffbbff, + fog: true, + }, + redrawInterval: 250, + textSize: 10, + texture: { + text: 'Carpe Diem', + fontFamily: 'Arial, Helvetica, sans-serif', + }, +}); +scene.add(sprite); +``` + +--- + +`.isTextSprite = true` + +Used to check whether this is an instance of `TextSprite`. + +You should not change this, as it is used internally for optimisation. + +--- + +`.textSize = 1` + +The size of the text. + +--- + +`.redrawInterval = 1` + +The minimum time that must elapse before the canvas is redrawn. If 0, the canvas is redrawn immediately whenever `TextSprite` is rendered, otherwise the redrawing is deferred. + +--- + +`.minFontSize = 0` + +The minimum font size. + +--- + +`.maxFontSize = Infinity` + +The maximum font size. + +--- + +`.dispose()` + +Disposes the texture and the material. diff --git a/site/assets/demo/cloud/THREE.TextSprite.js b/site/assets/demo/cloud/THREE.TextSprite.js new file mode 100644 index 00000000..525d22cd --- /dev/null +++ b/site/assets/demo/cloud/THREE.TextSprite.js @@ -0,0 +1 @@ +(function(a,b){"object"==typeof exports&&"undefined"!=typeof module?module.exports=b(require("three"),require("three.texttexture")):"function"==typeof define&&define.amd?define(["three","three.texttexture"],b):(a.THREE=a.THREE||{},a.THREE.TextSprite=b(a.THREE,a.THREE.TextTexture))})(this,function(a,b){"use strict";function c(a,b,c){var g=Math.round;if(b.domElement.width&&b.domElement.height&&a.material.map.textLines.length){var h=a.getWorldPosition(d).distanceTo(c.getWorldPosition(e));if(h){var i=a.getWorldScale(f).y*b.domElement.height/h;if(i)return g(i/a.material.map.imageHeight)}}return 0}b=b&&b.hasOwnProperty("default")?b["default"]:b;var d=new a.Vector3,e=new a.Vector3,f=new a.Vector3,g=function(d){function e(c){void 0===c&&(c={});var e=c.textSize;void 0===e&&(e=1);var f=c.redrawInterval;void 0===f&&(f=1);var g=c.minFontSize;void 0===g&&(g=0);var h=c.maxFontSize;void 0===h&&(h=1/0);var i=c.material;void 0===i&&(i={});var j=c.texture;void 0===j&&(j={}),d.call(this,new a.SpriteMaterial(Object.assign({},i,{map:new b(j)}))),this.textSize=e,this.redrawInterval=f,this.minFontSize=g,this.maxFontSize=h,this.lastRedraw=0}d&&(e.__proto__=d),e.prototype=Object.create(d&&d.prototype),e.prototype.constructor=e;var f={isTextSprite:{configurable:!0}};return f.isTextSprite.get=function(){return!0},e.prototype.onBeforeRender=function(a,b,c){this.redraw(a,c)},e.prototype.updateScale=function(){this.scale.set(this.material.map.imageAspect,1,1).multiplyScalar(this.textSize*this.material.map.imageHeight)},e.prototype.updateMatrix=function(){for(var a=[],b=arguments.length;b--;)a[b]=arguments[b];return this.updateScale(),d.prototype.updateMatrix.apply(this,a)},e.prototype.redraw=function(a,b){var c=this;this.lastRedraw+this.redrawInterval + + + + + Megapixels Datasets + + + + + + + + + + + + diff --git a/site/assets/demo/cloud/package.json b/site/assets/demo/cloud/package.json new file mode 100644 index 00000000..f7556104 --- /dev/null +++ b/site/assets/demo/cloud/package.json @@ -0,0 +1,40 @@ +{ + "name": "three.textsprite", + "version": "18.10.24", + "description": "Automatically computes the optimal font size depending on the distance to the camera and the size of the renderer canvas.", + "keywords": [ + "3d", + "canvas", + "class", + "font", + "group", + "object", + "plugin", + "resolution", + "scale", + "size", + "text", + "texture", + "three" + ], + "license": "MIT", + "author": "Sergej Sintschilin ", + "main": "THREE.TextSprite.js", + "repository": "https://github.com/SeregPie/THREE.TextSprite.git", + "scripts": { + "build": "rollup -c", + "dev": "rollup -c -w", + "prepublishOnly": "npm run build" + }, + "dependencies": { + "three.texttexture": "^18.10.24" + }, + "devDependencies": { + "rollup": "^0.66.6", + "rollup-plugin-babel-minify": "^6.1.1", + "rollup-plugin-buble": "^0.19.4" + }, + "peerDependencies": { + "three": "^0.97.0" + } +} diff --git a/site/assets/demo/cloud/rollup.config.js b/site/assets/demo/cloud/rollup.config.js new file mode 100644 index 00000000..57415169 --- /dev/null +++ b/site/assets/demo/cloud/rollup.config.js @@ -0,0 +1,25 @@ +import buble from 'rollup-plugin-buble'; +import minify from 'rollup-plugin-babel-minify'; +import path from 'path'; + +import {main} from './package.json'; + +let globals = { + 'three': 'THREE', + 'three.texttexture': 'THREE.TextTexture', +}; + +export default { + input: 'src/index.js', + external: Object.keys(globals), + output: { + file: main, + format: 'umd', + name: path.basename(main, path.extname(main)), + globals, + }, + plugins: [ + buble({objectAssign: 'Object.assign'}), + minify({comments: false}), + ], +}; diff --git a/site/assets/demo/cloud/src/getOptimalFontSize.js b/site/assets/demo/cloud/src/getOptimalFontSize.js new file mode 100644 index 00000000..02787516 --- /dev/null +++ b/site/assets/demo/cloud/src/getOptimalFontSize.js @@ -0,0 +1,18 @@ +import {Vector3} from 'three'; + +let objectWorldPosition = new Vector3(); +let cameraWorldPosition = new Vector3(); +let objectWorldScale = new Vector3(); + +export default function(object, renderer, camera) { + if (renderer.domElement.width && renderer.domElement.height && object.material.map.textLines.length) { + let distance = object.getWorldPosition(objectWorldPosition).distanceTo(camera.getWorldPosition(cameraWorldPosition)); + if (distance) { + let heightInPixels = object.getWorldScale(objectWorldScale).y * renderer.domElement.height / distance; + if (heightInPixels) { + return Math.round(heightInPixels / object.material.map.imageHeight); + } + } + } + return 0; +} diff --git a/site/assets/demo/cloud/src/index.js b/site/assets/demo/cloud/src/index.js new file mode 100644 index 00000000..270891d5 --- /dev/null +++ b/site/assets/demo/cloud/src/index.js @@ -0,0 +1,78 @@ +import { + Math as THREE_Math, + Sprite, + SpriteMaterial, +} from 'three'; +import TextTexture from 'three.texttexture'; + +import getOptimalFontSize from './getOptimalFontSize'; + +export default class extends Sprite { + constructor({ + textSize = 1, + redrawInterval = 1, + minFontSize = 0, + maxFontSize = Infinity, + material = {}, + texture = {}, + } = {}) { + super(new SpriteMaterial({ + ...material, + map: new TextTexture(texture), + })); + this.textSize = textSize; + this.redrawInterval = redrawInterval; + this.minFontSize = minFontSize; + this.maxFontSize = maxFontSize; + this.lastRedraw = 0; + } + + get isTextSprite() { + return true; + } + + onBeforeRender(renderer, scene, camera) { + this.redraw(renderer, camera); + } + + updateScale() { + this.scale + .set(this.material.map.imageAspect, 1, 1) + .multiplyScalar(this.textSize * this.material.map.imageHeight); + } + + updateMatrix(...args) { + this.updateScale(); + return super.updateMatrix(...args); + } + + redraw(renderer, camera) { + if (this.lastRedraw + this.redrawInterval < Date.now()) { + if (this.redrawInterval) { + setTimeout(() => { + this.redrawNow(renderer, camera); + }, 1); + } else { + this.redrawNow(renderer, camera); + } + } + } + + redrawNow(renderer, camera) { + this.updateScale(); + this.material.map.autoRedraw = true; + this.material.map.fontSize = THREE_Math.clamp( + THREE_Math.ceilPowerOfTwo( + getOptimalFontSize(this, renderer, camera) + ), + this.minFontSize, + this.maxFontSize, + ); + this.lastRedraw = Date.now(); + } + + dispose() { + this.material.map.dispose(); + this.material.dispose(); + } +} -- cgit v1.2.3-70-g09d2 From cacd7cc5a9296a192171e8046e12f62c7165f2e9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 15:52:15 +0100 Subject: build --- client/faceSearch/faceSearch.query.js | 2 +- client/nameSearch/nameSearch.query.js | 2 +- site/assets/css/css.css | 8 +++++--- site/assets/js/app/face.js | 21 +++++++++++++++++++++ site/public/index.html | 26 +++++++++++++++++++------- site/templates/home.html | 26 +++++++++++++++++++------- 6 files changed, 66 insertions(+), 19 deletions(-) (limited to 'site') diff --git a/client/faceSearch/faceSearch.query.js b/client/faceSearch/faceSearch.query.js index 2d140813..de7e47b6 100644 --- a/client/faceSearch/faceSearch.query.js +++ b/client/faceSearch/faceSearch.query.js @@ -47,7 +47,7 @@ class FaceSearchQuery extends Component {

Search by Image

-

Searching {13456} images

+

Searching {13233} images

{'Use facial recognition to reverse search into the LFW dataset '} {'and see if it contains your photos.'} diff --git a/client/nameSearch/nameSearch.query.js b/client/nameSearch/nameSearch.query.js index 99c1da84..c0798c58 100644 --- a/client/nameSearch/nameSearch.query.js +++ b/client/nameSearch/nameSearch.query.js @@ -20,7 +20,7 @@ class NameSearchQuery extends Component { return (

Search by Name

-

Searching {13456} identities

+

Searching {13233} identities

{'Enter your name to see if you were included in this dataset..'}

diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 18959c12..4689f67b 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -394,11 +394,11 @@ section.fullwidth .image { #face_container { pointer-events: none; position: absolute; - width: 50vw; + width: 66vw; height: 50vw; max-height: 70vh; top: 0; - right: 0; + right: -16vw; z-index: 0; text-align: center; } @@ -460,7 +460,9 @@ section.fullwidth .image { .dataset-intro h2 { margin-top: 40px; } - +.content .dataset-intro .first_paragraph { + margin-top: 10px; +} /* intro - list of datasets */ .dataset-list { diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js index 1818e9aa..ab3d950f 100644 --- a/site/assets/js/app/face.js +++ b/site/assets/js/app/face.js @@ -16,6 +16,7 @@ var faceInit = function () { } return a })() + var lastSprite var last_t = 0, start_t = 0 var bgColor = 0x000000 // 0x191919 var colors = [ @@ -149,6 +150,26 @@ var faceInit = function () { function setCurrentFace(name) { name = name.replace('.png', '').split('_').filter(s => !s.match(/\d+/)).join(' ') currentFace.innerHTML = name + // if (lastSprite) { + // scene.remove(lastSprite) + // } + // var sprite = new THREE.TextSprite({ + // textSize: 12, + // redrawInterval: 1000, + // material: { + // color: 0xcccccc, + // }, + // texture: { + // text: name, + // fontFamily: '"Roboto", "Helvetica", sans-serif', + // }, + // }); + // sprite.position + // .setX(0) + // .setY(0) + // .setZ(0) + // scene.add(sprite); + // lastSprite = sprite } function updateFace(points) { updateCubeGeometry(points) diff --git a/site/public/index.html b/site/public/index.html index a9f16f30..df5121a8 100644 --- a/site/public/index.html +++ b/site/public/index.html @@ -38,7 +38,7 @@
- +
@@ -64,15 +64,24 @@
-

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+

+ MegaPixels is an online art project that explores the history of facial recognition from the perspective of datasets. MegaPixels aims to unravel the meanings behind the data and expose the darker corners of the biometric industry that have contributed to its growth. +

+

+ Through a mix of case studies, visualizations, and interactive tools, Megapixels will use facial recognition datasets to tell the history of modern biometrics. Many people have contributed to the development of facial recignition technology, both wittingly and unwittingly. Not only scientists, but also celebrities and regular internet users have played a part. +

+

+ Facial recognition is a mess of contradictinos. It works, yet it doesn't actually work. It's cheap and accessible, but also expensive and out of control. Facial recognition research has achieved headline grabbing superhuman accuracies over 99.9%, yet in practice it's also dangerously inaccurate. +

+

+ During a trial installation at Sudkreuz station in Berlin in 2018, 20% of the matches were wrong, a number so low that it should not have any connection to law enforcement or justice. And in London, the Metropolitan police had been using facial recognition software that mistakenly identified an alarming 98% of people as criminals, which perhaps is a crime itself. +

-
+

Dataset Portraits

- We have prepared detailed studies of some of the more noteworthy datasets. + We have prepared detailed case studies of some of the more noteworthy datasets, including tools to help you learn what is contained in these datasets, and even whether your own face has been used to train these algorithms.

@@ -110,7 +119,10 @@ - + + + + diff --git a/site/templates/home.html b/site/templates/home.html index 03a61af2..a8695b4e 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -12,7 +12,7 @@
- +
@@ -38,15 +38,24 @@
-

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

-

Regular Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+

+ MegaPixels is an online art project that explores the history of facial recognition from the perspective of datasets. MegaPixels aims to unravel the meanings behind the data and expose the darker corners of the biometric industry that have contributed to its growth. +

+

+ Through a mix of case studies, visualizations, and interactive tools, Megapixels will use facial recognition datasets to tell the history of modern biometrics. Many people have contributed to the development of facial recignition technology, both wittingly and unwittingly. Not only scientists, but also celebrities and regular internet users have played a part. +

+

+ Facial recognition is a mess of contradictinos. It works, yet it doesn't actually work. It's cheap and accessible, but also expensive and out of control. Facial recognition research has achieved headline grabbing superhuman accuracies over 99.9%, yet in practice it's also dangerously inaccurate. +

+

+ During a trial installation at Sudkreuz station in Berlin in 2018, 20% of the matches were wrong, a number so low that it should not have any connection to law enforcement or justice. And in London, the Metropolitan police had been using facial recognition software that mistakenly identified an alarming 98% of people as criminals, which perhaps is a crime itself. +

-
+

Dataset Portraits

- We have prepared detailed studies of some of the more noteworthy datasets. + We have prepared detailed case studies of some of the more noteworthy datasets, including tools to help you learn what is contained in these datasets, and even whether your own face has been used to train these algorithms.

@@ -63,7 +72,10 @@ {% endblock %} {% block scripts %} - + + + + -- cgit v1.2.3-70-g09d2 From 8580197b2e7b72cfeebeb8483a50908d0601706b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 15:53:53 +0100 Subject: load besser --- site/assets/css/applets.css | 3 +++ 1 file changed, 3 insertions(+) (limited to 'site') diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css index 0c566a9f..1b4bd7d2 100644 --- a/site/assets/css/applets.css +++ b/site/assets/css/applets.css @@ -1,3 +1,6 @@ +.applet_container { + min-height: 340px; +} .applet { margin-bottom: 40px; transition: opacity 0.2s cubic-bezier(0,0,1,1); -- cgit v1.2.3-70-g09d2 From 0bbcee858eebc5d659c490f30fb94a9e3c79312f Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 16:03:05 +0100 Subject: text rotation --- site/assets/css/applets.css | 3 +++ site/assets/css/css.css | 3 +++ site/assets/js/app/face.js | 1 + 3 files changed, 7 insertions(+) (limited to 'site') diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css index 1b4bd7d2..1e57578e 100644 --- a/site/assets/css/applets.css +++ b/site/assets/css/applets.css @@ -57,6 +57,9 @@ .results > div:nth-child(3n+1) { margin-left: 0; } +.applet h2 { + font-size: 20pt; +} .query h2 { margin-top: 0; padding-top: 0; } diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 4689f67b..8b99f740 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -401,6 +401,8 @@ section.fullwidth .image { right: -16vw; z-index: 0; text-align: center; + perspective: 500px; + perspective-origin: 50% 80%; } .currentFace { position: absolute; @@ -408,6 +410,7 @@ section.fullwidth .image { width: 100%; left: 0; text-align: center; + font-size: 26px; } .intro { max-width: 640px; diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js index ab3d950f..0d3ce232 100644 --- a/site/assets/js/app/face.js +++ b/site/assets/js/app/face.js @@ -245,6 +245,7 @@ var faceInit = function () { mouseTarget.y += (mouse.y - mouseTarget.y) * 0.1 scene.rotation.x = (mouseTarget.y - 0.5) * Math.PI / 2 scene.rotation.y = (mouseTarget.x - 0.5) * Math.PI + currentFace.style.transform = "translateZ(0) rotateY(" + (scene.rotation.y/2) + "rad)" // scene.rotation.y += 0.01 last_t = t } -- cgit v1.2.3-70-g09d2 From f85178189b2675edd967bb4c80acd7be3194fe80 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 16:07:57 +0100 Subject: better css --- site/assets/css/css.css | 1 + site/assets/js/app/face.js | 1 + 2 files changed, 2 insertions(+) (limited to 'site') diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 8b99f740..50958427 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -6,6 +6,7 @@ html, body { min-height: 100%; font-family: 'Roboto', sans-serif; color: #b8b8b8; + overflow-x: hidden; } html { background: #191919; diff --git a/site/assets/js/app/face.js b/site/assets/js/app/face.js index 0d3ce232..0a87d2b2 100644 --- a/site/assets/js/app/face.js +++ b/site/assets/js/app/face.js @@ -9,6 +9,7 @@ var faceInit = function () { var SWAP_TIME = 500 var cubes = [], meshes = [] var currentFace = document.querySelector('.currentFace') + var introEl = document.querySelector('.intro') var faceBuffer = (function () { var a = new Array(FACE_POINT_COUNT) for (let i = 0; i < FACE_POINT_COUNT; i++) { -- cgit v1.2.3-70-g09d2 From 927170748d5ae9f67df94059afda3d9620b97cd4 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 16:08:58 +0100 Subject: better css --- site/public/index.html | 10 +++++----- site/templates/home.html | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) (limited to 'site') diff --git a/site/public/index.html b/site/public/index.html index df5121a8..d2986084 100644 --- a/site/public/index.html +++ b/site/public/index.html @@ -51,7 +51,7 @@
-

Facial Recognition Datasets

+

Face Recognition Datasets

SUMMARY

@@ -65,16 +65,16 @@

- MegaPixels is an online art project that explores the history of facial recognition from the perspective of datasets. MegaPixels aims to unravel the meanings behind the data and expose the darker corners of the biometric industry that have contributed to its growth. + MegaPixels is an online art project that explores the history of face recognition from the perspective of datasets. MegaPixels aims to unravel the meanings behind the data and expose the darker corners of the biometric industry that have contributed to its growth.

- Through a mix of case studies, visualizations, and interactive tools, Megapixels will use facial recognition datasets to tell the history of modern biometrics. Many people have contributed to the development of facial recignition technology, both wittingly and unwittingly. Not only scientists, but also celebrities and regular internet users have played a part. + Through a mix of case studies, visualizations, and interactive tools, Megapixels will use face recognition datasets to tell the history of modern biometrics. Many people have contributed to the development of face recignition technology, both wittingly and unwittingly. Not only scientists, but also celebrities and regular internet users have played a part.

- Facial recognition is a mess of contradictinos. It works, yet it doesn't actually work. It's cheap and accessible, but also expensive and out of control. Facial recognition research has achieved headline grabbing superhuman accuracies over 99.9%, yet in practice it's also dangerously inaccurate. + Face recognition is a mess of contradictinos. It works, yet it doesn't actually work. It's cheap and accessible, but also expensive and out of control. Face recognition research has achieved headline grabbing superhuman accuracies over 99.9%, yet in practice it's also dangerously inaccurate.

- During a trial installation at Sudkreuz station in Berlin in 2018, 20% of the matches were wrong, a number so low that it should not have any connection to law enforcement or justice. And in London, the Metropolitan police had been using facial recognition software that mistakenly identified an alarming 98% of people as criminals, which perhaps is a crime itself. + During a trial installation at Sudkreuz station in Berlin in 2018, 20% of the matches were wrong, a number so low that it should not have any connection to law enforcement or justice. And in London, the Metropolitan police had been using face recognition software that mistakenly identified an alarming 98% of people as criminals, which perhaps is a crime itself.

diff --git a/site/templates/home.html b/site/templates/home.html index a8695b4e..9756e21f 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -25,7 +25,7 @@
-

Facial Recognition Datasets

+

Face Recognition Datasets

SUMMARY

@@ -39,16 +39,16 @@

- MegaPixels is an online art project that explores the history of facial recognition from the perspective of datasets. MegaPixels aims to unravel the meanings behind the data and expose the darker corners of the biometric industry that have contributed to its growth. + MegaPixels is an online art project that explores the history of face recognition from the perspective of datasets. MegaPixels aims to unravel the meanings behind the data and expose the darker corners of the biometric industry that have contributed to its growth.

- Through a mix of case studies, visualizations, and interactive tools, Megapixels will use facial recognition datasets to tell the history of modern biometrics. Many people have contributed to the development of facial recignition technology, both wittingly and unwittingly. Not only scientists, but also celebrities and regular internet users have played a part. + Through a mix of case studies, visualizations, and interactive tools, Megapixels will use face recognition datasets to tell the history of modern biometrics. Many people have contributed to the development of face recignition technology, both wittingly and unwittingly. Not only scientists, but also celebrities and regular internet users have played a part.

- Facial recognition is a mess of contradictinos. It works, yet it doesn't actually work. It's cheap and accessible, but also expensive and out of control. Facial recognition research has achieved headline grabbing superhuman accuracies over 99.9%, yet in practice it's also dangerously inaccurate. + Face recognition is a mess of contradictinos. It works, yet it doesn't actually work. It's cheap and accessible, but also expensive and out of control. Face recognition research has achieved headline grabbing superhuman accuracies over 99.9%, yet in practice it's also dangerously inaccurate.

- During a trial installation at Sudkreuz station in Berlin in 2018, 20% of the matches were wrong, a number so low that it should not have any connection to law enforcement or justice. And in London, the Metropolitan police had been using facial recognition software that mistakenly identified an alarming 98% of people as criminals, which perhaps is a crime itself. + During a trial installation at Sudkreuz station in Berlin in 2018, 20% of the matches were wrong, a number so low that it should not have any connection to law enforcement or justice. And in London, the Metropolitan police had been using face recognition software that mistakenly identified an alarming 98% of people as criminals, which perhaps is a crime itself.

-- cgit v1.2.3-70-g09d2 From 40ff7c823c1ccb026c1e638baba7bcb20864e19c Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 16:31:25 +0100 Subject: pyramids=2 --- megapixels/app/server/api.py | 2 +- megapixels/app/server/tasks/demo.py | 2 +- site/public/datasets/lfw/index.html | 15 ++------------- 3 files changed, 4 insertions(+), 15 deletions(-) (limited to 'site') diff --git a/megapixels/app/server/api.py b/megapixels/app/server/api.py index b3bce9bc..61789fb9 100644 --- a/megapixels/app/server/api.py +++ b/megapixels/app/server/api.py @@ -66,7 +66,7 @@ def upload(dataset_name): detector = face_detector.DetectorDLIBHOG() # get detection as BBox object - bboxes = detector.detect(im_np, largest=True) + bboxes = detector.detect(im_np, largest=True, pyramids=2) if not bboxes or not len(bboxes): return jsonify({ 'error': 'bbox' diff --git a/megapixels/app/server/tasks/demo.py b/megapixels/app/server/tasks/demo.py index f7db9034..12d83383 100644 --- a/megapixels/app/server/tasks/demo.py +++ b/megapixels/app/server/tasks/demo.py @@ -81,7 +81,7 @@ def demo_task(self, uuid_name, fn): face_detector_instance = face_detector.DetectorDLIBCNN(gpu=opt_gpu) # -1 for CPU step('Detecting face') st = time.time() - bboxes = face_detector_instance.detect(im_resized, largest=True) + bboxes = face_detector_instance.detect(im_resized, largest=True, pyramids=2) bbox = bboxes[0] dim = im_resized.shape[:2][::-1] bbox_dim = bbox.to_dim(dim) diff --git a/site/public/datasets/lfw/index.html b/site/public/datasets/lfw/index.html index 3f7dce60..d079c978 100644 --- a/site/public/datasets/lfw/index.html +++ b/site/public/datasets/lfw/index.html @@ -28,7 +28,7 @@

Labeled Faces in the Wild

-
Created
2007
Images
13,233
People
5,749
Created From
Yahoo News images
Search available
Searchable
Eighteen of the 5,749 people in the Labeled Faces in the Wild Dataset. The most widely used face dataset for benchmarking commercial face recognition algorithms.
Eighteen of the 5,749 people in the Labeled Faces in the Wild Dataset. The most widely used face dataset for benchmarking commercial face recognition algorithms.

Intro

+
Created
2007
Images
13,233
People
5,749
Created From
Yahoo News images
Search available
Searchable
Eighteen of the 5,749 people in the Labeled Faces in the Wild Dataset. The most widely used face dataset for benchmarking commercial face recognition algorithms.
Eighteen of the 5,749 people in the Labeled Faces in the Wild Dataset. The most widely used face dataset for benchmarking commercial face recognition algorithms.

Intro

Labeled Faces in The Wild (LFW) is among the most widely used facial recognition training datasets in the world and is the first of its kind to be created entirely from images posted online. The LFW dataset includes 13,233 images of 5,749 people that were collected between 2002-2004. Use the tools below to check if you were included in this dataset or scroll down to read the analysis.

Three paragraphs describing the LFW dataset in a format that can be easily replicated for the other datasets. Nothing too custom. An analysis of the initial research papers with context relative to all the other dataset papers.

From George W. Bush to Jamie Lee Curtis: all 5,749 people in the LFW Dataset sorted from most to least images collected.
From George W. Bush to Jamie Lee Curtis: all 5,749 people in the LFW Dataset sorted from most to least images collected.

LFW by the Numbers

@@ -66,7 +66,7 @@

According to BiometricUpdate.com [^lfw_pingan], LFW is "the most widely used evaluation set in the field of facial recognition, LFW attracts a few dozen teams from around the globe including Google, Facebook, Microsoft Research Asia, Baidu, Tencent, SenseTime, Face++ and Chinese University of Hong Kong."

According to researchers at the Baidu Research – Institute of Deep Learning "LFW has been the most popular evaluation benchmark for face recognition, and played a very important role in facilitating the face recognition society to improve algorithm. [^lfw_baidu]."

In addition to commercial use as an evaluation tool, alll of the faces in LFW dataset are prepackaged into a popular machine learning code framework called scikit-learn.

-
+
@@ -102,17 +102,6 @@
Distribution of citations per year per country for the top 5 countries with citations for the LFW Dataset
Distribution of citations per year per country for the top 5 countries with citations for the LFW Dataset

Conclusion

The LFW face recognition training and evaluation dataset is a historically important face dataset as it was the first popular dataset to be created entirely from Internet images, paving the way for a global trend towards downloading anyone’s face from the Internet and adding it to a dataset. As will be evident with other datasets, LFW’s approach has now become the norm.

For all the 5,000 people in this datasets, their face is forever a part of facial recognition history. It would be impossible to remove anyone from the dataset because it is so ubiquitous. For their rest of the lives and forever after, these 5,000 people will continue to be used for training facial recognition surveillance.

-

Right to Removal

-

If you are affected by disclosure of your identity in this dataset please do contact the authors. Many have stated that they are willing to remove images upon request. The authors of the LFW dataset provide the following email for inquiries:

-

You can use the following message to request removal from the dataset:

-

To: Gary Huang mailto:gbhuang@cs.umass.edu

-

Subject: Request for Removal from LFW Face Dataset

-

Dear [researcher name],

-

I am writing to you about the "Labeled Faces in The Wild Dataset". Recently I discovered that your dataset includes my identity and I no longer wish to be included in your dataset.

-

The dataset is being used thousands of companies around the world to improve facial recognition software including usage by governments for the purpose of law enforcement, national security, tracking consumers in retail environments, and tracking individuals through public spaces.

-

My name as it appears in your dataset is [your name]. Please remove all images from your dataset and inform your newsletter subscribers to likewise update their copies.

-

- [your name]

-

Supplementary Data

Researchers, journ

Company Country
-- cgit v1.2.3-70-g09d2 From 270499f33acbc61eb2389bfb923832a851366a37 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 17:03:49 +0100 Subject: border --- site/assets/css/applets.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'site') diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css index 1e57578e..e450b46e 100644 --- a/site/assets/css/applets.css +++ b/site/assets/css/applets.css @@ -31,6 +31,25 @@ /* search results */ +.name_search, .face_search { + box-shadow: inset 0 0 40px #000; + background: #111; + padding: 20px 0; + /*background: black;*/ + width: 100%; +} +.name_search { + margin-top: 0px; + margin-bottom: 20px; +} +.face_search .applet { + max-width: 640px; + margin: 0 auto; +} +.name_search .applet { + max-width: 640px; + margin: 0 auto; +} .results { margin-top: 10px; padding-bottom: 10px; -- cgit v1.2.3-70-g09d2 From e3838e679f5709361ee26cbdf87d9d55ffd52b97 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 17:04:03 +0100 Subject: k --- site/public/datasets/lfw/index.html | 103 ------------------------------------ 1 file changed, 103 deletions(-) (limited to 'site') diff --git a/site/public/datasets/lfw/index.html b/site/public/datasets/lfw/index.html index d079c978..6526c4f8 100644 --- a/site/public/datasets/lfw/index.html +++ b/site/public/datasets/lfw/index.html @@ -102,109 +102,6 @@
Distribution of citations per year per country for the top 5 countries with citations for the LFW Dataset
Distribution of citations per year per country for the top 5 countries with citations for the LFW Dataset

Conclusion

The LFW face recognition training and evaluation dataset is a historically important face dataset as it was the first popular dataset to be created entirely from Internet images, paving the way for a global trend towards downloading anyone’s face from the Internet and adding it to a dataset. As will be evident with other datasets, LFW’s approach has now become the norm.

For all the 5,000 people in this datasets, their face is forever a part of facial recognition history. It would be impossible to remove anyone from the dataset because it is so ubiquitous. For their rest of the lives and forever after, these 5,000 people will continue to be used for training facial recognition surveillance.

-

Supplementary Data

-

Researchers, journ

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TitleOrganizationCountryType
3D-aided face recognition from videosUniversity of LyonFranceedu
A Community Detection Approach to Cleaning Extremely Large Face DatabaseNational University of Defense Technology, ChinaChinaedu
3D-aided face recognition from videosUniversity of LyonFranceedu
3D-aided face recognition from videosUniversity of LyonFranceedu
3D-aided face recognition from videosUniversity of LyonFranceedu
3D-aided face recognition from videosUniversity of LyonFranceedu
3D-aided face recognition from videosUniversity of LyonFranceedu
3D-aided face recognition from videosUniversity of LyonFranceedu
3D-aided face recognition from videosUniversity of LyonFranceedu
3D-aided face recognition from videosUniversity of LyonFranceedu
3D-aided face recognition from videosUniversity of LyonFranceedu
3D-aided face recognition from videosUniversity of LyonFranceedu
3D-aided face recognition from videosUniversity of LyonFranceedu
3D-aided face recognition from videosUniversity of LyonFranceedu
3D-aided face recognition from videosUniversity of LyonFranceedu

Code

#!/usr/bin/python
 
-- 
cgit v1.2.3-70-g09d2


From 37c1cd8f75e05490067d132f60f7e378809c6b49 Mon Sep 17 00:00:00 2001
From: Jules Laplace 
Date: Thu, 17 Jan 2019 17:13:52 +0100
Subject: border

---
 client/index.js                     |  2 +-
 site/assets/css/applets.css         |  6 ++++++
 site/public/datasets/lfw/index.html | 31 ++-----------------------------
 3 files changed, 9 insertions(+), 30 deletions(-)

(limited to 'site')

diff --git a/client/index.js b/client/index.js
index 2c003888..c9335f14 100644
--- a/client/index.js
+++ b/client/index.js
@@ -36,7 +36,7 @@ function appendApplets(applets) {
         appendTable(el, payload)
         break
       case 'map':
-        el.parentNode.classList.add('fullwidth')
+        el.parentNode.classList.add('wide')
         appendMap(el, payload)
         el.classList.add('loaded')
         break
diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css
index e450b46e..f437d1e8 100644
--- a/site/assets/css/applets.css
+++ b/site/assets/css/applets.css
@@ -132,6 +132,12 @@
   max-width: 40px;
 }
 
+.map, .map .applet {
+  height: 500px;
+}
+.map {
+  margin-bottom: 20px;
+}
 
 /* tabulator */
 
diff --git a/site/public/datasets/lfw/index.html b/site/public/datasets/lfw/index.html
index 6526c4f8..057413ae 100644
--- a/site/public/datasets/lfw/index.html
+++ b/site/public/datasets/lfw/index.html
@@ -66,40 +66,13 @@
 
According to BiometricUpdate.com [^lfw_pingan], LFW is "the most widely used evaluation set in the field of facial recognition, LFW attracts a few dozen teams from around the globe including Google, Facebook, Microsoft Research Asia, Baidu, Tencent, SenseTime, Face++ and Chinese University of Hong Kong."

 
According to researchers at the Baidu Research – Institute of Deep Learning "LFW has been the most popular evaluation benchmark for face recognition, and played a very important role in facilitating the face recognition society to improve algorithm. [^lfw_baidu]."

 
In addition to commercial use as an evaluation tool, alll of the faces in LFW dataset are prepackaged into a popular machine learning code framework called scikit-learn.

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
CompanyCountryIndustries
AratekChinaBiometric sensors for telecom, civil identification, finance, education, POS, and transportation
AratekChinaBiometric sensors for telecom, civil identification, finance, education, POS, and transportation
AratekChinaBiometric sensors for telecom, civil identification, finance, education, POS, and transportation

-
Add 2-4 screenshots of companies mentioning LFW here
"PING AN Tech facial recognition receives high score in latest LFW test results"
"PING AN Tech facial recognition receives high score in latest LFW test results"
"Face Recognition Performance in LFW benchmark"
"Face Recognition Performance in LFW benchmark"
"The 1st place in face verification challenge, LFW"
"The 1st place in face verification challenge, LFW"

In benchmarking, companies use a dataset to evaluate their algorithms which are typically trained on other data. After training, researchers will use LFW as a benchmark to compare results with other algorithms.

For example, Baidu (est. net worth $13B) uses LFW to report results for their "Targeting Ultimate Accuracy: Face Recognition via Deep Embedding". According to the three Baidu researchers who produced the paper:

Citations

-

Overall, LFW has at least 456 citations from 123 countries. Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.

-

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.

-
Distribution of citations per year per country for the top 5 countries with citations for the LFW Dataset
Distribution of citations per year per country for the top 5 countries with citations for the LFW Dataset

Conclusion

+

Overall, LFW has at least 116 citations from 11 countries.

+

Conclusion

The LFW face recognition training and evaluation dataset is a historically important face dataset as it was the first popular dataset to be created entirely from Internet images, paving the way for a global trend towards downloading anyone’s face from the Internet and adding it to a dataset. As will be evident with other datasets, LFW’s approach has now become the norm.

For all the 5,000 people in this datasets, their face is forever a part of facial recognition history. It would be impossible to remove anyone from the dataset because it is so ubiquitous. For their rest of the lives and forever after, these 5,000 people will continue to be used for training facial recognition surveillance.

Code

-- cgit v1.2.3-70-g09d2 From 190ec7cf857951f005ef9ec8de5e6945f97f80df Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 17:26:07 +0100 Subject: k --- site/public/datasets/lfw/index.html | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) (limited to 'site') diff --git a/site/public/datasets/lfw/index.html b/site/public/datasets/lfw/index.html index 057413ae..25e53596 100644 --- a/site/public/datasets/lfw/index.html +++ b/site/public/datasets/lfw/index.html @@ -52,12 +52,11 @@
  • The faces were detected using the Viola-Jones haarcascade face detector [^lfw_website] [^lfw_survey]
  • Is considered the "most popular benchmark for face recognition" [^lfw_baidu]
  • Is "the most widely used evaluation set in the field of facial recognition" [^lfw_pingan]
    • -
  • Is used by several of the largest tech companies in the world including "Google, Facebook, Microsoft Research Asia, Baidu, Tencent, SenseTime, Face++ and Chinese University of Hong Kong." [^lfw_pingan]
    • - -

    need citations

    -
      -
    • All images were copied from Yahoo News between 2002 - 2004 [^lfw_original_paper]
      • -
    • SenseTime, who has relied on LFW for benchmarking their facial recognition performance, is the leading provider of surveillance to the Chinese Government (need citation)
      • +

    • Is used by several of the largest tech companies in the world including "Google, Facebook, Microsoft Research Asia, Baidu, Tencent, SenseTime, Face++ and Chinese University of Hong Kong." [^lfw_pingan]

      +
      • +

    • All images were copied from Yahoo News between 2002 - 2004 [^lfw_original_paper]

      +
      • +
    • SenseTime, who has relied on LFW for benchmarking their facial recognition performance, is the leading provider of surveillance to the Chinese Government
    former President George W. Bush
    former President George W. Bush
    Colin Powel (236), Tony Blair (144), and Donald Rumsfeld (121)
    Colin Powel (236), Tony Blair (144), and Donald Rumsfeld (121)

    People and Companies using the LFW Dataset

    -- cgit v1.2.3-70-g09d2 From 3ea3d6991f50c9cd94d8a9b4130c3194bd50e160 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 17 Jan 2019 17:27:50 +0100 Subject: k --- site/public/datasets/lfw/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'site') diff --git a/site/public/datasets/lfw/index.html b/site/public/datasets/lfw/index.html index 25e53596..a6226720 100644 --- a/site/public/datasets/lfw/index.html +++ b/site/public/datasets/lfw/index.html @@ -59,7 +59,7 @@
  • SenseTime, who has relied on LFW for benchmarking their facial recognition performance, is the leading provider of surveillance to the Chinese Government
    • former President George W. Bush
    former President George W. Bush
    -
    Colin Powel (236), Tony Blair (144), and Donald Rumsfeld (121)
    Colin Powel (236), Tony Blair (144), and Donald Rumsfeld (121)

    People and Companies using the LFW Dataset

    +
    Colin Powell (236), Tony Blair (144), and Donald Rumsfeld (121)
    Colin Powell (236), Tony Blair (144), and Donald Rumsfeld (121)

    People and Companies using the LFW Dataset

    This section describes who is using the dataset and for what purposes. It should include specific examples of people or companies with citations and screenshots. This section is followed up by the graph, the map, and then the supplementary material.

    The LFW dataset is used by numerous companies for benchmarking algorithms and in some cases training. According to the benchmarking results page [^lfw_results] provided by the authors, over 2 dozen companies have contributed their benchmark results.

    According to BiometricUpdate.com [^lfw_pingan], LFW is "the most widely used evaluation set in the field of facial recognition, LFW attracts a few dozen teams from around the globe including Google, Facebook, Microsoft Research Asia, Baidu, Tencent, SenseTime, Face++ and Chinese University of Hong Kong."

    -- cgit v1.2.3-70-g09d2