From 27340ac4cd43f8eec7414495b541a65566ae2656 Mon Sep 17 00:00:00 2001 From: adamhrv Date: Tue, 8 Oct 2019 16:02:47 +0200 Subject: update site, white --- site/assets/css/applets.css | 3 +- site/assets/css/css.css | 117 +++++++++++++-------- site/assets/css/tabulator.css | 2 +- site/includes/age_gender_disclaimer.html | 3 + site/includes/chart.html | 14 --- site/includes/dashboard.html | 4 +- site/includes/map.html | 22 ---- site/public/about/index.html | 29 ++--- site/public/about/legal/index.html | 4 +- site/public/datasets/adience/index.html | 7 +- site/public/datasets/brainwash/index.html | 17 +-- site/public/datasets/duke_mtmc/index.html | 11 +- site/public/datasets/helen/index.html | 94 +++++++++++++++-- site/public/datasets/ibm_dif/index.html | 29 ++--- site/public/datasets/ijb_c/index.html | 7 +- site/public/datasets/index.html | 30 +++++- site/public/datasets/lfpw/index.html | 15 ++- site/public/datasets/megaface/index.html | 12 ++- site/public/datasets/msceleb/index.html | 29 +++-- site/public/datasets/oxford_town_centre/index.html | 10 +- site/public/datasets/pipa/index.html | 7 +- site/public/datasets/uccs/index.html | 11 +- site/public/datasets/who_goes_there/index.html | 7 +- site/public/research/index.html | 2 +- .../research/munich_security_conference/index.html | 5 +- 25 files changed, 295 insertions(+), 196 deletions(-) create mode 100644 site/includes/age_gender_disclaimer.html delete mode 100644 site/includes/chart.html delete mode 100644 site/includes/map.html (limited to 'site') diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css index daf36a19..245643f1 100644 --- a/site/assets/css/applets.css +++ b/site/assets/css/applets.css @@ -187,6 +187,7 @@ .tabulator { font-family: 'Roboto', sans-serif; + font-size:10px; } .tabulator-row { transition: background-color 100ms cubic-bezier(0,0,1,1); @@ -247,7 +248,7 @@ stroke: rgba(64,64,64,0.3); } .chartCaption { - color: #888; + color: #333; font-size: 12px; font-family: 'Roboto', sans-serif; font-weight: 400; diff --git a/site/assets/css/css.css b/site/assets/css/css.css index 6b1f40cd..75f1ad3f 100644 --- a/site/assets/css/css.css +++ b/site/assets/css/css.css @@ -12,11 +12,11 @@ html, body { min-height: 100%; /*font-family: 'Roboto Mono', sans-serif;*/ font-family: 'Roboto', sans-serif; - color: #eee; + color: #000; overflow-x: hidden; } html { - background: #181818; + background: #fff; } a { outline: none; } img { border: 0; } @@ -32,6 +32,7 @@ html.mobile .content { html.mobile .content{ } +/* header */ /* header */ header { @@ -155,7 +156,7 @@ footer { display: flex; flex-direction: row; justify-content: space-between; - color: #666; + color: #000; font-size: 13px; /*line-height: 17px;*/ padding: 15px; @@ -211,30 +212,34 @@ footer ul:last-child li { /* headings */ h1 { - color: #eee; - font-weight: 400; - font-size: 34pt; + color: #000; + font-weight: 500; + font-size: 30pt; margin: 20px auto 10px auto; padding: 0; transition: color 0.1s cubic-bezier(0,0,1,1); font-family: 'Roboto Mono', monospace; + text-transform: uppercase; } h2 { - color: #eee; - font-weight: 400; + color: #111; + font-weight: 500; font-size: 34px; line-height: 43px; margin: 20px auto 20px auto; padding: 0; transition: color 0.1s cubic-bezier(0,0,1,1); font-family: 'Roboto Mono', monospace; + text-transform: uppercase; } h3 { + color: #333; margin: 20px auto 10px auto; font-size: 28px; font-weight: 400; transition: color 0.1s cubic-bezier(0,0,1,1); font-family: 'Roboto Mono', monospace; + text-transform: uppercase; } h4 { margin: 6px auto 10px auto; @@ -243,6 +248,7 @@ h4 { font-weight: 400; transition: color 0.1s cubic-bezier(0,0,1,1); font-family: 'Roboto Mono', monospace; + text-transform: uppercase; } h5 { margin: 6px auto 10px auto; @@ -253,11 +259,11 @@ h5 { font-family: 'Roboto Mono', monospace; } .content h3 a { - color: #888; + color: #333; text-decoration: none; } .desktop .content h3 a:hover { - color: #fff; + color: #111; text-decoration: underline; } .right-sidebar h3 { @@ -272,12 +278,15 @@ h5 { .right-sidebar ul li a { border-bottom: 0; } +.right-sidebar ul li:last-child{ + border-bottom: 0; +} th, .gray { font-family: 'Roboto', monospace; font-weight: 500; text-transform: uppercase; letter-spacing: .15rem; - color: #777; + color: #333; } th, .gray { font-size: 9pt; @@ -354,10 +363,10 @@ section { } section p { margin: 10px auto 20px auto; - line-height: 1.9rem; - font-size: 17px; + line-height: 1.95rem; + font-size: 16px; font-weight: 400; - color: #cdcdcd; + color: #111; } section ul { margin: 10px auto 20px auto; @@ -367,22 +376,32 @@ section h1, section h2, section h3, section h4, section h5, section h6, section max-width: 720px; } -.content-dataset section:nth-child(2) p:first-child{ - font-size:19px; +.content-dataset-list section:nth-child(1) p:nth-child(2){ + font-size:22px; + line-height:34px; +} +.content-dataset section:nth-child(4) p:nth-child(2){ + font-size:20px; + line-height: 32px; + color:#000; +} +.content-dataset section:nth-child(3) p:nth-child(2) { + /* highlight news text */ + color:#f00; } p.subp{ font-size: 14px; } .content a { - color: #dedede; + color: #333; text-decoration: none; - border-bottom: 2px solid #666; + border-bottom: 1px solid #333; padding-bottom: 1px; transition: color 0.1s cubic-bezier(0,0,1,1); } .desktop .content a:hover { - color: #fff; - border-bottom: 2px solid #ccc; + color: #111; + border-bottom: 1px solid #111; } /* top of post metadata */ @@ -393,7 +412,7 @@ p.subp{ justify-content: flex-start; align-items: flex-start; font-size: 12px; - color: #ccc; + color: #111; margin-bottom: 20px; font-family: 'Roboto', sans-serif; margin-right: 20px; @@ -412,7 +431,6 @@ p.subp{ float: right; width: 200px; margin: 0px 20px 20px 20px; - padding-top: 12px; padding-left: 20px; border-left: 1px solid #333; font-family: 'Roboto'; @@ -442,7 +460,10 @@ p.subp{ border-bottom: 1px solid #333; padding:10px 10px 10px 0; margin: 0 4px 4px 0; - color: #bbb; + color: #111; +} +.right-sidebar .meta:last-child{ + border-bottom: 0; } .right-sidebar ul { margin-bottom: 10px; @@ -477,7 +498,7 @@ ul { } ul li { margin-bottom: 8px; - color: #dedede; + color: #333; font-weight: 400; font-size: 14px; } @@ -497,8 +518,9 @@ pre { border-radius: 2px; padding: 10px; display: block; - background: #333; + background: #ddd; overflow: auto + /*margin-bottom: 10px;*/ } pre code { display: block; @@ -533,10 +555,10 @@ table tr td{ font-size:12px; } table tbody tr:nth-child(odd){ - background-color:#292929; + background-color:#ebebeb; } table tbody tr:nth-child(even){ - background-color:#333; + background-color:#ccc; } hr { @@ -670,22 +692,24 @@ section.fullwidth .image { } .image .caption.intro-caption{ text-align: center; + color:#666; } .caption { text-align: center; font-size: 10pt; - color: #999; + line-height: 14pt; + color: #555; max-width: 960px; margin: 10px auto 10px auto; font-family: 'Roboto'; } .caption a { - color: #ccc; - border: 0; + color: #333; + border-bottom: 1px solid #333; } .desktop .caption a:hover { - color: #fff; - border: 0; + color: #111; + border-bottom: 1px solid #111; } @@ -873,7 +897,7 @@ section.fullwidth .image { .dataset-list .dataset { width: 300px; padding: 12px; - color: white; + color: #000; font-weight: 400; font-family: 'Roboto'; position: relative; @@ -884,21 +908,22 @@ section.fullwidth .image { height: 178px; } .desktop .content .dataset-list a { - border: 1px solid #333; + border: 1px solid #999; } .desktop .dataset-list a:hover { - border: 1px solid #666; + border: 1px solid #000; } .dataset-list .fields { font-size: 12px; - color: #ccc; + line-height: 17px; + color: #333; } .dataset-list .dataset .title{ font-size: 16px; line-height: 20px; margin-bottom: 4px; - font-weight: 400; + font-weight: 500; display: block; } .dataset-list .fields div { @@ -965,7 +990,7 @@ section.intro_section { justify-content: center; align-items: center; background-color: #111111; - margin-bottom: 20px; + /*margin-bottom: 20px;*/ padding: 0; } .intro_section .inner { @@ -1091,7 +1116,8 @@ ul.map-legend li:before { } ul.map-legend li.active { text-decoration: underline; - color: #fff; + color: #000; + font-weight: 500; } ul.map-legend li.edu:before { background-color: #f2f293; @@ -1118,7 +1144,7 @@ ul.map-legend li.source:before { } .content-about { - color: #fff; + /*color: #fff;*/ } .content-about p { font-size: 16px; @@ -1141,12 +1167,13 @@ ul.map-legend li.source:before { } .content-about .about-menu ul li a { border-bottom: 0; - color: #aaa; + color: #555; } .content-about .about-menu ul li a.current { - border-bottom: 1px solid #ddd; - color: #ddd; + border-bottom: 1px solid #000; + color: #000; + font-weight: 500; } /* columns */ @@ -1237,7 +1264,7 @@ a.footnote { /*display: inline-block;*/ bottom: 7px; text-decoration: none; - color: #ff8; + color: #666; border: 0; left: -1px; transition-duration: 0s; @@ -1255,7 +1282,7 @@ a.footnote_shim { } .desktop a.footnote:hover { /*background-color: #ff8;*/ - color: #fff; + color: #000; border: 0; } .backlinks { diff --git a/site/assets/css/tabulator.css b/site/assets/css/tabulator.css index d7a3fab3..baf44536 100755 --- a/site/assets/css/tabulator.css +++ b/site/assets/css/tabulator.css @@ -1,7 +1,7 @@ /* Tabulator v4.1.3 (c) Oliver Folkerd */ .tabulator { position: relative; - font-size: 13px; + font-size: 12px; text-align: left; overflow: hidden; -ms-transform: translatez(0); diff --git a/site/includes/age_gender_disclaimer.html b/site/includes/age_gender_disclaimer.html new file mode 100644 index 00000000..f8dceb62 --- /dev/null +++ b/site/includes/age_gender_disclaimer.html @@ -0,0 +1,3 @@ +
+

Age and gender estimation distribution were calculated by anlayzing all faces in the dataset images. This may include additional faces appearing next to an annotated face, or this may skip false faces that were erroneously included as part of the original dataset. These numbers are provided as an estimation and not a factual representation of the exact gender and age of all faces.

+
\ No newline at end of file diff --git a/site/includes/chart.html b/site/includes/chart.html deleted file mode 100644 index 01c2e83b..00000000 --- a/site/includes/chart.html +++ /dev/null @@ -1,14 +0,0 @@ -
-

Who used {{ metadata.meta.dataset.name_display }}?

- -

- This bar chart presents a ranking of the top countries where dataset citations originated. Mouse over individual columns to see yearly totals. These charts show at most the top 10 countries. -

- -
- -
- -
-
diff --git a/site/includes/dashboard.html b/site/includes/dashboard.html index d5e5693d..02d054b5 100644 --- a/site/includes/dashboard.html +++ b/site/includes/dashboard.html @@ -19,10 +19,10 @@
-

Information Supply chain

+

Information Supply Chain

- To help understand how {{ metadata.meta.dataset.name_display }} has been used around the world by commercial, military, and academic organizations; existing publicly available research citing {{ metadata.meta.dataset.name_full }} was collected, verified, and geocoded to show the biometric trade routes of people appearing in the images. Click on the markers to reveal research projects at that location. + To help understand how {{ metadata.meta.dataset.name_display }} has been used around the world by commercial, military, and academic organizations; existing publicly available research citing {{ metadata.meta.dataset.name_full }} was collected, verified, and geocoded to show how AI training data has proliferated around the world. Click on the markers to reveal research projects at that location.

diff --git a/site/includes/map.html b/site/includes/map.html deleted file mode 100644 index 372bed8d..00000000 --- a/site/includes/map.html +++ /dev/null @@ -1,22 +0,0 @@ -
- -

Information Supply Chain

- -

- To help understand how {{ metadata.meta.dataset.name_display }} has been used around the world by commercial, military, and academic organizations; existing publicly available research citing {{ metadata.meta.dataset.name_full }} was collected, verified, and geocoded to show the biometric trade routes of people appearing in the images. Click on the location markers to reveal research projects at that location. -

- -
- -
-
-
- -
- -
Citation data is collected using SemanticScholar.org and then dataset usage verified and geolocated.
-
\ No newline at end of file diff --git a/site/public/about/index.html b/site/public/about/index.html index ce2b6228..427a97a2 100644 --- a/site/public/about/index.html +++ b/site/public/about/index.html @@ -63,22 +63,9 @@
  • Attribution
  • Legal / Privacy
    • -

    MegaPixels is an independent art and research project by Adam Harvey and Jules LaPlace that investigates the ethics, origins, and individual privacy implications of face recognition image datasets and their role in the expansion of biometric surveillance technologies.

    +

    MegaPixels is an independent art and research project by Adam Harvey and Jules LaPlace that investigates the ethics, origins, and individual privacy implications of face recognition image datasets and their role in the expansion of biometric surveillance technologies.

    MegaPixels is made possible with support from Mozilla

    -
    -
    -

    Adam Harvey

    -

    is Berlin-based American artist and researcher. His previous projects (CV Dazzle, Stealth Wear, and SkyLift) explore the potential for counter-surveillance as artwork. He is the founder of VFRAME (visual forensics software for human rights groups) and is a currently researcher in residence at Karlsruhe HfG.

    -

    ahprojects.com

    -

    -
    -
    -

    Jules LaPlace

    -

    is an American technologist and artist also based in Berlin. He was previously the CTO of a digital agency in NYC and now also works at VFRAME, developing computer vision and data analysis software for human rights groups. Jules also builds experimental software for artists and musicians. -

    -

    asdf.us

    -
    -

    MegaPixels is an art and research project first launched in 2017 for an installation at Tactical Technology Collective's GlassRoom about face recognition datasets. In 2018 MegaPixels was extended to cover pedestrian analysis datasets for a commission by Elevate Arts festival in Austria. Since then MegaPixels has evolved into a large-scale interrogation of hundreds of publicly-available face and person analysis datasets, the first of which launched on this site in April 2019.

    +

    MegaPixels is an art and research project first launched in 2017 for an installation at Tactical Technology Collective's GlassRoom about face recognition datasets. In 2018 MegaPixels was extended to cover pedestrian analysis datasets for a commission by Elevate Arts festival in Austria. Since then MegaPixels has evolved into a large-scale interrogation of hundreds of publicly-available face and person analysis datasets, the first of which launched on this site in April 2019.

    MegaPixels aims to provide a critical perspective on machine learning image datasets, one that might otherwise escape academia and industry funded artificial intelligence think tanks that are often supported by the same technology companies who created many of the datasets presented on this site.

    MegaPixels is an independent project, designed as a public resource for educators, students, journalists, and researchers. Each dataset presented on this site undergoes a thorough review of its images, intent, and citations. MegaPixels is a website-first research project, with an academic publication to follow in fall 2019.

    A dataset of verified geocoded citations and dataset statistics will be published in Fall 2019 along with a research paper as part of a research fellowship for KIM (Critical Artificial Intelligence) Karlsruhe HfG.

    @@ -90,18 +77,18 @@
  • June 26, 2019: The Atlantic writes about image training datasets "in the wild" and research ethics: Universities Record Students on Campuses for Research by Sidney Fussell

    • Read more news

    -
    Team
    +
    Team
    • Adam Harvey: Concept, research and analysis, design, computer vision
    • Jules LaPlace: Information and systems architecture, data management, web applications
    -
    Contributing Researchers
    +
    Contributing Researchers
    • Beth (aka Ms. Celeb)
    • Berit Gilma
    • Mathana Stender
    -
    Code and Libraries
    +
    Code and Libraries
    • Semantic Scholar for citation aggregation
    • Leaflet.js for maps
      • @@ -109,7 +96,7 @@
    • ThreeJS for 3D visualizations
    • PDFMiner.Six and Pandas for research paper analysis
    -
    Attribution
    +
    Attribution

    If you use MegaPixels or any data derived from it for your work, please cite our original work as follows:

     @online{megapixels,
@@ -119,9 +106,7 @@
  url = {https://megapixels.cc/},
  urldate = {2019-04-18}
 }
-
    Contact
    -

    Please direct questions, comments, or feedback to mastodon.social/@adamhrv or contact via https://ahprojects.com/about

    -
    +