From 406d857c61fb128a48281a52899ddf77b68201be Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 28 Feb 2019 18:32:39 +0100 Subject: threejs splash page on the index --- client/splash/index.js | 14 +-- megapixels/app/site/parser.py | 2 + site/assets/css/css.css | 15 +++- site/content/pages/datasets/index.md | 5 -- site/content/pages/index.md | 26 ++---- site/content/pages/info/index.md | 2 +- site/public/datasets/index.html | 2 +- site/public/index.html | 166 +++-------------------------------- site/public/info/index.html | 2 +- site/templates/home.html | 113 ++++++++---------------- 10 files changed, 74 insertions(+), 273 deletions(-) diff --git a/client/splash/index.js b/client/splash/index.js index e247b7f5..a21110f0 100644 --- a/client/splash/index.js +++ b/client/splash/index.js @@ -31,12 +31,14 @@ function build() { function bind() { document.querySelector('.slogan').addEventListener('click', modal.close) - toArray(document.querySelectorAll('.aboutLink')).forEach(el => { - el.addEventListener('click', modal.toggle) - }) - document.querySelector('.about .inner').addEventListener('click', e => e.stopPropagation()) - document.querySelector('.about').addEventListener('click', modal.close) - document.querySelector('.close').addEventListener('click', modal.close) + if (document.querySelector('.about')) { + toArray(document.querySelectorAll('.aboutLink')).forEach(el => { + el.addEventListener('click', modal.toggle) + }) + document.querySelector('.about .inner').addEventListener('click', e => e.stopPropagation()) + document.querySelector('.about').addEventListener('click', modal.close) + document.querySelector('.close').addEventListener('click', modal.close) + } } function animate() { diff --git a/megapixels/app/site/parser.py b/megapixels/app/site/parser.py index c17d3b8a..ad4256ad 100644 --- a/megapixels/app/site/parser.py +++ b/megapixels/app/site/parser.py @@ -198,6 +198,8 @@ def format_metadata(section): """ meta = [] for line in section.split('\n'): + if ': ' not in line: + continue key, value = line[2:].split(': ', 1) meta.append("
{}
{}
".format(key, value)) return "
{}
".format(''.join(meta)) diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 3bd09f23..732386bd 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -112,13 +112,19 @@ footer { justify-content: space-between; color: #888; font-size: 9pt; - padding: 20px 75px 20px; + padding: 20px 0 20px; font-family: "Roboto", sans-serif; } footer > div { display: flex; flex-direction: row; } +footer > div:nth-child(1) { + padding-left: 75px; +} +footer > div:nth-child(2) { + padding-right: 75px; +} footer a { display: inline-block; color: #888; @@ -237,6 +243,7 @@ p { align-items: flex-start; font-size: 10pt; margin-bottom: 20px; + font-family: 'Roboto', sans-serif; } .meta > div { margin-right: 30px; @@ -540,11 +547,11 @@ section.fullwidth .image { .desktop .dataset-list a:nth-child(3n+2):hover { background-color: rgba(255, 128, 0, 0.2); } .dataset-list a:nth-child(3n+3) { background-color: rgba(255, 255, 0, 0.1); } -.desktop .dataset-list .dataset:nth-child(3n+3):hover { background-color: rgba(255, 255, 0, 0.2); } +.desktop .dataset-list a:nth-child(3n+3):hover { background-color: rgba(255, 255, 0, 0.2); } .dataset-list span { - box-shadow: -3px -3px black, 3px -3px black, -3px 3px black, 3px 3px black; - background-color: black; + box-shadow: -3px -3px #181818, 3px -3px #181818, -3px 3px #181818, 3px 3px #181818; + background-color: #181818; box-decoration-break: clone; } diff --git a/site/content/pages/datasets/index.md b/site/content/pages/datasets/index.md index c408fba4..fa012758 100644 --- a/site/content/pages/datasets/index.md +++ b/site/content/pages/datasets/index.md @@ -13,8 +13,6 @@ sync: false # Facial Recognition Datasets -### Sidebar - + Found: 275 datasets + Created between: 1993-2018 + Smallest dataset: 20 images @@ -22,6 +20,3 @@ sync: false + Highest resolution faces: 450x500 (Unconstrained College Students) + Lowest resolution faces: 16x20 pixels (QMUL SurvFace) - -## End Sidebar - diff --git a/site/content/pages/index.md b/site/content/pages/index.md index d63cf9fa..1cf47aac 100644 --- a/site/content/pages/index.md +++ b/site/content/pages/index.md @@ -1,30 +1,14 @@ ------------ status: published -title: MegaPixels -desc: -slug: home +title: Megapixels +desc: The Darkside of Datasets +slug: analysis published: 2018-12-15 updated: 2018-12-15 authors: Adam Harvey sync: false - ------------- - -## Facial Recognition Datasets - -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. -### Summary - -+ Found: 275 datasets -+ Created between: 1993-2018 -+ Smallest dataset: 20 images -+ Largest dataset: 10,000,000 images - -+ Highest resolution faces: 450x500 (Unconstrained College Students) -+ Lowest resolution faces: 16x20 pixels (QMUL SurvFace) +------------ -``` -load_file https://megapixels.nyc3.digitaloceanspaces.com/v1/citations/datasets.csv -``` +## diff --git a/site/content/pages/info/index.md b/site/content/pages/info/index.md index 9cbb219e..090783d9 100644 --- a/site/content/pages/info/index.md +++ b/site/content/pages/info/index.md @@ -11,7 +11,7 @@ sync: false ------------ -## +## Face Analysis ``` face_analysis diff --git a/site/public/datasets/index.html b/site/public/datasets/index.html index 17c938ac..7398da17 100644 --- a/site/public/datasets/index.html +++ b/site/public/datasets/index.html @@ -29,7 +29,7 @@

Facial Recognition Datasets

-
Found
275 datasets
Created between
1993-2018
Smallest dataset
20 images
Largest dataset
10,000,000 images
Highest resolution faces
450x500 (Unconstrained College Students)
Lowest resolution faces
16x20 pixels (QMUL SurvFace)
+
Found
275 datasets
Created between
1993-2018
Smallest dataset
20 images
Largest dataset
10,000,000 images
Highest resolution faces
450x500 (Unconstrained College Students)
Lowest resolution faces
16x20 pixels (QMUL SurvFace)

diff --git a/site/public/index.html b/site/public/index.html index 8775f22d..d5a2e59f 100644 --- a/site/public/index.html +++ b/site/public/index.html @@ -3,15 +3,13 @@ MegaPixels - - + + - - - +

@@ -20,166 +18,22 @@
MegaPixels
- Datasets - Research - About + DATASETS + RESEARCH + ABOUT
-
- -
-
-
-
-
-
-
- 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 -
-
-
-
- -
-

Face Recognition Datasets

-
-

SUMMARY

-
-
Found
275 datasets
-
Created between
1993-2018
-
Smallest dataset
20 images
-
Largest dataset
10,000,000 images
-
Highest resolution faces
450x500 (Unconstrained College Students)
-
Lowest resolution faces
16x20 pixels (QMUL SurvFace)
-
-
- -

- 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 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. -

-

- 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 face recognition software that mistakenly identified an alarming 98% of people as criminals, which perhaps is a crime itself. -

-
- -
-

Dataset Portraits

-

- 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. -

- -
- - -
- Asian Face Age Dataset -
- - - -
- Annotated Facial Landmarks in The Wild -
- - - -
- Caltech 10K Faces Dataset -
- - - -
- Caltech Occluded Faces in The Wild -
- - - -
- Facebook -
- - - -
- FERET: FacE REcognition -
- - - -
- Labeled Face Parts in The Wild -
- - - -
- Labeled Faces in The Wild -
- - - -
- Unconstrained College Students -
- - - -
- VGG Face 2 Dataset -
- - - -
- YouTube Celebrities -
- - -
-
- - +
+
- - - - - - - - - - + \ No newline at end of file diff --git a/site/public/info/index.html b/site/public/info/index.html index 65510255..0b59e647 100644 --- a/site/public/info/index.html +++ b/site/public/info/index.html @@ -27,7 +27,7 @@
-

+

Face Analysis

Results are only stored for the duration of the analysis and are deleted when you leave this page.

diff --git a/site/templates/home.html b/site/templates/home.html index 9756e21f..d5a2e59f 100644 --- a/site/templates/home.html +++ b/site/templates/home.html @@ -1,82 +1,39 @@ -{% extends 'layout.html' %} - -{% block content %} -
-
-
-
-
-
-
- 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 -
-
+ + + + MegaPixels + + + + + + + + + + +
+ + +
MegaPixels
+ +
+ DATASETS + RESEARCH + ABOUT
+
+
+
- -
-

Face Recognition Datasets

-
-

SUMMARY

-
-
Found
275 datasets
-
Created between
1993-2018
-
Smallest dataset
20 images
-
Largest dataset
10,000,000 images
-
Highest resolution faces
450x500 (Unconstrained College Students)
-
Lowest resolution faces
16x20 pixels (QMUL SurvFace)
-
+
+
- -

- 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 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. -

-

- 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 face recognition software that mistakenly identified an alarming 98% of people as criminals, which perhaps is a crime itself. -

-
- -
-

Dataset Portraits

-

- 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. -

- -
- {% for dataset in datasets %} - -
- {{ dataset.title }} -
- - {% endfor %} +
+ MegaPixels ©2017-19 Adam R. Harvey /  + ahprojects.com
-
- -{% endblock %} - -{% block scripts %} - - - - - - - -{% endblock %} + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2