diff options
Diffstat (limited to 'site')
| -rw-r--r-- | site/assets/css/css.css | 15 | ||||
| -rw-r--r-- | site/content/pages/datasets/index.md | 5 | ||||
| -rw-r--r-- | site/content/pages/index.md | 26 | ||||
| -rw-r--r-- | site/content/pages/info/index.md | 2 | ||||
| -rw-r--r-- | site/public/datasets/index.html | 2 | ||||
| -rw-r--r-- | site/public/index.html | 166 | ||||
| -rw-r--r-- | site/public/info/index.html | 2 | ||||
| -rw-r--r-- | site/templates/home.html | 113 |
8 files changed, 64 insertions, 267 deletions
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 @@ <section><h1>Facial Recognition Datasets</h1> -</section><section><div class='right-sidebar'><div class='meta'><div><div class='gray'>Found</div><div>275 datasets</div></div><div><div class='gray'>Created between</div><div>1993-2018</div></div><div><div class='gray'>Smallest dataset</div><div>20 images</div></div><div><div class='gray'>Largest dataset</div><div>10,000,000 images</div></div></div><div class='meta'><div><div class='gray'>Highest resolution faces</div><div>450x500 (Unconstrained College Students)</div></div><div><div class='gray'>Lowest resolution faces</div><div>16x20 pixels (QMUL SurvFace)</div></div></div></div></section> +</section><section><div class='meta'><div><div class='gray'>Found</div><div>275 datasets</div></div><div><div class='gray'>Created between</div><div>1993-2018</div></div><div><div class='gray'>Smallest dataset</div><div>20 images</div></div><div><div class='gray'>Largest dataset</div><div>10,000,000 images</div></div></div><section><section><div class='meta'><div><div class='gray'>Highest resolution faces</div><div>450x500 (Unconstrained College Students)</div></div><div><div class='gray'>Lowest resolution faces</div><div>16x20 pixels (QMUL SurvFace)</div></div></div><section> <section class='wide dataset-intro'> <p> 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 @@ <head> <title>MegaPixels</title> <meta charset="utf-8" /> - <meta name="author" content="Adam Harvey" /> - <meta name="description" content="" /> + <meta name="author" content="info@megapixels.cc" /> + <meta name="description" content="The Dark Side of Datasets" /> <meta name="referrer" content="no-referrer" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <link rel='stylesheet' href='/assets/css/fonts.css' /> - <link rel='stylesheet' href='/assets/css/tabulator.css' /> <link rel='stylesheet' href='/assets/css/css.css' /> - <link rel='stylesheet' href='/assets/css/leaflet.css' /> - <link rel='stylesheet' href='/assets/css/applets.css' /> + <link rel='stylesheet' href='/assets/css/splash.css' /> </head> <body> <header> @@ -20,166 +18,22 @@ <div class='site_name'>MegaPixels</div> </a> <div class='links'> - <a href="/datasets/">Datasets</a> - <a href="/research/">Research</a> - <a href="/about/">About</a> + <a href="/datasets/" class='aboutLink'>DATASETS</a> + <a href="/research/" class='aboutLink'>RESEARCH</a> + <a href="/about/" class='aboutLink'>ABOUT</a> </div> </header> - <div class="content"> - - <div class='hero'> - <div class='inner'> - <div id="face_container"> - <div class='currentFace'></div> - </div> - <div class='intro'> - <div class='headline'> - MegaPixels is an art project that explores the dark side of face recognition datasets and the future of computer vision. - </div> - - <div class='buttons'> - <a href="/datasets/lfw/"><button class='important'>Find Your Face</button></a> - <a href="/analyze/"><button class='normal'>Analyze Your Face</button></a> - </div> - - <div class='under'> - Made by Adam Harvey in collaboration with Jules Laplace, and in partnership with Mozilla.<br/> - <a href='/about/'>Read more about MegaPixels</a> - </div> - </div> - </div> - </div> - - <section class='wide dataset-intro'> - <h2>Face Recognition Datasets</h2> - <div class='right-sidebar'> - <h4>SUMMARY</h4> - <div class='meta'> - <div><div class='gray'>Found</div><div>275 datasets</div></div> - <div><div class='gray'>Created between</div><div>1993-2018</div></div> - <div><div class='gray'>Smallest dataset</div><div>20 images</div></div> - <div><div class='gray'>Largest dataset</div><div>10,000,000 images</div></div> - <div><div class='gray'>Highest resolution faces</div><div>450x500 (Unconstrained College Students)</div></div> - <div><div class='gray'>Lowest resolution faces</div><div>16x20 pixels (QMUL SurvFace)</div></div> - </div> - </div> - - <p> - 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. - </p> - <p> - 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. - </p> - <p> - 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. - </p> - <p> - 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. - </p> - </section> - - <section class='wide dataset-intro'> - <h2>Dataset Portraits</h2> - <p> - 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. - </p> - - <div class="dataset-list"> - - <a href="/datasets/afad/"> - <div class="dataset"> - Asian Face Age Dataset - </div> - </a> - - <a href="/datasets/aflw/"> - <div class="dataset"> - Annotated Facial Landmarks in The Wild - </div> - </a> - - <a href="/datasets/caltech_10k/"> - <div class="dataset"> - Caltech 10K Faces Dataset - </div> - </a> - - <a href="/datasets/cofw/"> - <div class="dataset"> - Caltech Occluded Faces in The Wild - </div> - </a> - - <a href="/datasets/facebook/"> - <div class="dataset"> - Facebook - </div> - </a> - - <a href="/datasets/feret/"> - <div class="dataset"> - FERET: FacE REcognition - </div> - </a> - - <a href="/datasets/lfpw/"> - <div class="dataset"> - Labeled Face Parts in The Wild - </div> - </a> - - <a href="/datasets/lfw/"> - <div class="dataset"> - Labeled Faces in The Wild - </div> - </a> - - <a href="/datasets/uccs/"> - <div class="dataset"> - Unconstrained College Students - </div> - </a> - - <a href="/datasets/vgg_face2/"> - <div class="dataset"> - VGG Face 2 Dataset - </div> - </a> - - <a href="/datasets/youtube_celebrities/"> - <div class="dataset"> - YouTube Celebrities - </div> - </a> - - </div> - </section> - - + <div class="splash"> + <div id="three_container"></div> </div> <footer> <div> - <a href="/">MegaPixels.cc</a> - <a href="/about/disclaimer/">Disclaimer</a> - <a href="/about/terms/">Terms of Use</a> - <a href="/about/privacy/">Privacy</a> - <a href="/about/">About</a> - <a href="/about/team/">Team</a> </div> <div> MegaPixels ©2017-19 Adam R. Harvey / - <a href="https://ahprojects.com">ahprojects.com</a> + <a href="https://ahprojects.com/megapixels/">ahprojects.com</a> </div> </footer> </body> - -<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script> -<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script> -<script src="https://unpkg.com/three.texttexture@18.10.24"></script> -<script src="/assets/demo/cloud/THREE.TextSprite.js"></script> -<script src="/assets/js/vendor/three.meshline.js"></script> -<script src="/assets/js/vendor/oktween.js"></script> -<script src="/assets/js/app/face.js"></script> - -<script src="/assets/js/dist/index.js"></script> +<script src="/assets/js/dist/splash.js"></script> </html>
\ 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 @@ </header> <div class="content"> - <section><h2> </h2> + <section><h2>Face Analysis</h2> </section><section class='applet_container'><div class='applet' data-payload='{"command": "face_analysis"}'></div></section><section><p>Results are only stored for the duration of the analysis and are deleted when you leave this page.</p> </section> 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 %} - <div class='hero'> - <div class='inner'> - <div id="face_container"> - <div class='currentFace'></div> - </div> - <div class='intro'> - <div class='headline'> - MegaPixels is an art project that explores the dark side of face recognition datasets and the future of computer vision. - </div> - - <div class='buttons'> - <a href="/datasets/lfw/"><button class='important'>Find Your Face</button></a> - <a href="/analyze/"><button class='normal'>Analyze Your Face</button></a> - </div> - - <div class='under'> - Made by Adam Harvey in collaboration with Jules Laplace, and in partnership with Mozilla.<br/> - <a href='/about/'>Read more about MegaPixels</a> - </div> - </div> +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="info@megapixels.cc" /> + <meta name="description" content="The Dark Side of Datasets" /> + <meta name="referrer" content="no-referrer" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <link rel='stylesheet' href='/assets/css/fonts.css' /> + <link rel='stylesheet' href='/assets/css/css.css' /> + <link rel='stylesheet' href='/assets/css/splash.css' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + </a> + <div class='links'> + <a href="/datasets/" class='aboutLink'>DATASETS</a> + <a href="/research/" class='aboutLink'>RESEARCH</a> + <a href="/about/" class='aboutLink'>ABOUT</a> </div> + </header> + <div class="splash"> + <div id="three_container"></div> </div> - - <section class='wide dataset-intro'> - <h2>Face Recognition Datasets</h2> - <div class='right-sidebar'> - <h4>SUMMARY</h4> - <div class='meta'> - <div><div class='gray'>Found</div><div>275 datasets</div></div> - <div><div class='gray'>Created between</div><div>1993-2018</div></div> - <div><div class='gray'>Smallest dataset</div><div>20 images</div></div> - <div><div class='gray'>Largest dataset</div><div>10,000,000 images</div></div> - <div><div class='gray'>Highest resolution faces</div><div>450x500 (Unconstrained College Students)</div></div> - <div><div class='gray'>Lowest resolution faces</div><div>16x20 pixels (QMUL SurvFace)</div></div> - </div> + <footer> + <div> </div> - - <p> - 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. - </p> - <p> - 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. - </p> - <p> - 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. - </p> - <p> - 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. - </p> - </section> - - <section class='wide dataset-intro'> - <h2>Dataset Portraits</h2> - <p> - 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. - </p> - - <div class="dataset-list"> - {% for dataset in datasets %} - <a href="{{ dataset.url }}"> - <div class="dataset"> - {{ dataset.title }} - </div> - </a> - {% endfor %} + <div> + MegaPixels ©2017-19 Adam R. Harvey / + <a href="https://ahprojects.com/megapixels/">ahprojects.com</a> </div> - </section> - -{% endblock %} - -{% block scripts %} -<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0/polyfill.min.js"></script> -<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/97/three.min.js"></script> -<script src="https://unpkg.com/three.texttexture@18.10.24"></script> -<script src="/assets/demo/cloud/THREE.TextSprite.js"></script> -<script src="/assets/js/vendor/three.meshline.js"></script> -<script src="/assets/js/vendor/oktween.js"></script> -<script src="/assets/js/app/face.js"></script> -{% endblock %} + </footer> +</body> +<script src="/assets/js/dist/splash.js"></script> +</html>
\ No newline at end of file |