diff options
Diffstat (limited to 'site/public')
25 files changed, 776 insertions, 63 deletions
diff --git a/site/public/about/credits/index.html b/site/public/about/credits/index.html index 65bc7ac4..025c0ffd 100644 --- a/site/public/about/credits/index.html +++ b/site/public/about/credits/index.html @@ -8,7 +8,10 @@ <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' /> </head> <body> <header> @@ -18,7 +21,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -27,7 +29,7 @@ <div class="content"> <section><h1>Credits</h1> -</section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/about/assets/test.jpg' alt='alt text'><div class='caption'>alt text</div></div></section><section><ul> +<ul> <li>MegaPixels by Adam Harvey</li> <li>Made with support from Mozilla</li> <li>Site developed by Jules Laplace</li> @@ -53,5 +55,5 @@ </footer> </body> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/about/disclaimer/index.html b/site/public/about/disclaimer/index.html index b0215bde..1bfb8bfb 100644 --- a/site/public/about/disclaimer/index.html +++ b/site/public/about/disclaimer/index.html @@ -8,7 +8,10 @@ <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' /> </head> <body> <header> @@ -18,7 +21,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -53,5 +55,5 @@ </footer> </body> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/about/index.html b/site/public/about/index.html index 65bc7ac4..025c0ffd 100644 --- a/site/public/about/index.html +++ b/site/public/about/index.html @@ -8,7 +8,10 @@ <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' /> </head> <body> <header> @@ -18,7 +21,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -27,7 +29,7 @@ <div class="content"> <section><h1>Credits</h1> -</section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/about/assets/test.jpg' alt='alt text'><div class='caption'>alt text</div></div></section><section><ul> +<ul> <li>MegaPixels by Adam Harvey</li> <li>Made with support from Mozilla</li> <li>Site developed by Jules Laplace</li> @@ -53,5 +55,5 @@ </footer> </body> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/about/press/index.html b/site/public/about/press/index.html index 09c89165..5a4e198b 100644 --- a/site/public/about/press/index.html +++ b/site/public/about/press/index.html @@ -8,7 +8,10 @@ <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' /> </head> <body> <header> @@ -18,7 +21,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -51,5 +53,5 @@ </footer> </body> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/about/privacy/index.html b/site/public/about/privacy/index.html index 5675f072..6b4ac42f 100644 --- a/site/public/about/privacy/index.html +++ b/site/public/about/privacy/index.html @@ -8,7 +8,10 @@ <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' /> </head> <body> <header> @@ -18,7 +21,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -130,5 +132,5 @@ You are advised to review this Privacy Policy periodically for any changes. Chan </footer> </body> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/about/style/index.html b/site/public/about/style/index.html index 39a44380..da0d718f 100644 --- a/site/public/about/style/index.html +++ b/site/public/about/style/index.html @@ -8,7 +8,9 @@ <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/applets.css' /> </head> <body> <header> @@ -18,7 +20,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -51,7 +52,10 @@ <div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/about/assets/man.jpg' alt='Person 3. Let me tell you about Person 3. This person has a very long description with text which wraps like crazy'><div class='caption'>Person 3. Let me tell you about Person 3. This person has a very long description with text which wraps like crazy</div></div></section><section><blockquote><p>est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non-numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem.</p> </blockquote> </section><section class='wide'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/about/assets/wide-test.jpg' alt='This image is extremely wide and the text beneath it will wrap but thats fine because it can also contain <a href="https://example.com/">hyperlinks</a>! Yes, you read that right—hyperlinks! Lorem ipsum dolor sit amet ad volotesque sic hoc ad nauseam'><div class='caption'>This image is extremely wide and the text beneath it will wrap but that's fine because it can also contain <a href="https://example.com/">hyperlinks</a>! Yes, you read that right—hyperlinks! Lorem ipsum dolor sit amet ad volotesque sic hoc ad nauseam</div></div></section><section><p>Inline <code>code</code> has <code>back-ticks around</code> it.</p> -</section><section><div class='applet' data-payload='{"command": "javascript"}'></div></section><section><div class='applet' data-payload='{"command": "python"}'></div></section><section><div class='applet' data-payload='{"command": "No language indicated, so no syntax highlighting. "}'></div></section><section><p>Horizontal rule</p> +</section><section><div class='applet' data-payload='{"command": "javascript"}'></div></section><section><pre><code class="lang-python">s = "Python syntax highlighting" +print(s) +</code></pre> +</section><section><div class='applet' data-payload='{"command": "No language indicated, so no syntax highlighting. "}'></div></section><section><p>Horizontal rule</p> <hr> <p>Citations below here</p> <div class="footnotes"> @@ -77,5 +81,5 @@ </footer> </body> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/about/terms/index.html b/site/public/about/terms/index.html index 078c339f..1e317715 100644 --- a/site/public/about/terms/index.html +++ b/site/public/about/terms/index.html @@ -8,7 +8,10 @@ <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' /> </head> <body> <header> @@ -18,7 +21,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -65,5 +67,5 @@ </footer> </body> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/datasets/index.html b/site/public/datasets/index.html new file mode 100644 index 00000000..bcc7c1ab --- /dev/null +++ b/site/public/datasets/index.html @@ -0,0 +1,54 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Adam Harvey" /> + <meta name="description" content="Facial Recognition 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' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + <span class='sub'>The Darkside of Datasets</span> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/research/">Research</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content"> + + <section><h1>Facial Recognition Datasets</h1> +<p>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.</p> +<h3>Summary</h3> +</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='applet_container'><div class='applet' data-payload='{"command": "load_file https://megapixels.nyc3.digitaloceanspaces.com/v1/citations/datasets.csv"}'></div></section> + + </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> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file diff --git a/site/public/datasets/lfw/index.html b/site/public/datasets/lfw/index.html index 3c83acd3..9adf29b1 100644 --- a/site/public/datasets/lfw/index.html +++ b/site/public/datasets/lfw/index.html @@ -8,7 +8,10 @@ <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' /> </head> <body> <header> @@ -18,7 +21,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -28,9 +30,9 @@ <section><h1>Labeled Faces in the Wild</h1> </section><section><div class='meta'><div><div class='gray'>Created</div><div>2007</div></div><div><div class='gray'>Images</div><div>13,233</div></div><div><div class='gray'>People</div><div>5,749</div></div><div><div class='gray'>Created From</div><div>Yahoo News images</div></div><div><div class='gray'>Search available</div><div>Searchable</div></div></div></section><section><p>Labeled Faces in The Wild (LFW) is amongst 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.</p> -</section><section><div class='applet' data-payload='{"command": "face_search"}'></div></section><section><div class='applet' data-payload='{"command": "name_search"}'></div></section><section><div class='applet' data-payload='{"command": "load file", "opt": "lfw_names_gender_kg_min.csv", "fields": "Name, Images, Gender, Description"}'></div></section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/lfw_feature.jpg' alt='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.'><div class='caption'>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.</div></div></section><section><h2>Intro</h2> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "face_search"}'></div></section><section class='applet_container'><div class='applet' data-payload='{"command": "name_search"}'></div></section><section class='applet_container'><div class='applet' data-payload='{"command": "load_file assets/lfw_names_gender_kg_min.csv", "fields": ["Name, Images, Gender, Description"]}'></div></section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/lfw_feature.jpg' alt='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.'><div class='caption'>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.</div></div></section><section><h2>Intro</h2> <p>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.</p> -</section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/lfw_montage_everyone_1920.jpg' alt=' all 5,749 people in the LFW Dataset sorted from most to least images collected.'><div class='caption'> all 5,749 people in the LFW Dataset sorted from most to least images collected.</div></div></section><section><h2>LFW by the Numbers</h2> +</section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/lfw_montage_everyone_nocrop_1920.jpg' alt=' all 5,749 people in the LFW Dataset sorted from most to least images collected.'><div class='caption'> all 5,749 people in the LFW Dataset sorted from most to least images collected.</div></div></section><section><h2>LFW by the Numbers</h2> <ul> <li>Was first published in 2007</li> <li>Developed out of a prior dataset from Berkely called "Faces in the Wild" or "Names and Faces" [^lfw_original_paper]</li> @@ -65,10 +67,7 @@ <p>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."</p> <p>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]."</p> <p>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.</p> -<pre><code>load file: lfw_commercial_use.csv -name_display,company_url,example_url,country,description -</code></pre> -<table> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "load_file assets/lfw_commercial_use.csv", "fields": ["name_display, company_url, example_url, country, description"]}'></div></section><section><table> <thead><tr> <th style="text-align:left">Company</th> <th style="text-align:left">Country</th> @@ -101,7 +100,7 @@ name_display,company_url,example_url,country,description <h2>Citations</h2> <p>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.</p> <p>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.</p> -</section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/temp_graph.jpg' alt='Distribution of citations per year per country for the top 5 countries with citations for the LFW Dataset'><div class='caption'>Distribution of citations per year per country for the top 5 countries with citations for the LFW Dataset</div></div></section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/temp_map.jpg' alt='Geographic distributions of citations for the LFW Dataset'><div class='caption'>Geographic distributions of citations for the LFW Dataset</div></div></section><section><h2>Conclusion</h2> +</section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/datasets/lfw/assets/temp_graph.jpg' alt='Distribution of citations per year per country for the top 5 countries with citations for the LFW Dataset'><div class='caption'>Distribution of citations per year per country for the top 5 countries with citations for the LFW Dataset</div></div></section><section class='applet_container'><div class='applet' data-payload='{"command": "map"}'></div></section><section class='applet_container'><div class='applet' data-payload='{"command": "citations"}'></div></section><section><h2>Conclusion</h2> <p>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.</p> <p>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.</p> <h2>Right to Removal</h2> @@ -219,28 +218,36 @@ name_display,company_url,example_url,country,description </tbody> </table> <h2>Code</h2> -</section><section><div class='applet' data-payload='{"command": "python"}'></div></section><section><p>import numpy as np +</section><section><pre><code class="lang-python">#!/usr/bin/python + +import numpy as np from sklearn.datasets import fetch_lfw_people import imageio -import imutils</p> -<h1>download LFW dataset (first run takes a while)</h1> -<p>lfw_people = fetch_lfw_people(min_faces_per_person=1, resize=1, color=True, funneled=False)</p> -<h1>introspect dataset</h1> -<p>n_samples, h, w, c = lfw_people.images.shape -print('{:,} images at {}x{}'.format(n_samples, w, h)) +import imutils + +# download LFW dataset (first run takes a while) +lfw_people = fetch_lfw_people(min_faces_per_person=1, resize=1, color=True, funneled=False) + +# introspect dataset +n_samples, h, w, c = lfw_people.images.shape +print('{:,} images at {}x{}'.format(n_samples, w, h)) cols, rows = (176, 76) -n_ims = cols * rows</p> -<h1>build montages</h1> -<p>im_scale = 0.5 +n_ims = cols * rows + +# build montages +im_scale = 0.5 ims = lfw_people.images[:n_ims -montages = imutils.build_montages(ims, (int(w<em>im_scale, int(h</em>im_scale)), (cols, rows)) -montage = montages[0]</p> -<h1>save full montage image</h1> -<p>imageio.imwrite('lfw_montage_full.png', montage)</p> -<h1>make a smaller version</h1> -<p>montage_960 = imutils.resize(montage, width=960) -imageio.imwrite('lfw_montage_960.jpg', montage_960)</p> -</section><section><div class='applet' data-payload='{"command": ""}'></div></section><section><h2>Disclaimer</h2> +montages = imutils.build_montages(ims, (int(w*im_scale, int(h*im_scale)), (cols, rows)) +montage = montages[0] + +# save full montage image +imageio.imwrite('lfw_montage_full.png', montage) + +# make a smaller version +montage_960 = imutils.resize(montage, width=960) +imageio.imwrite('lfw_montage_960.jpg', montage_960) +</code></pre> +</section><section><h2>Disclaimer</h2> <p>MegaPixels is an educational art project designed to encourage discourse about facial recognition datasets. Any ethical or legal issues should be directed to the researcher's parent organizations. Except where necessary for contact or clarity, the names of researchers have been subsituted by their parent organization. In no way does this project aim to villify researchers who produced the datasets.</p> <p>Read more about <a href="about/code-of-conduct">MegaPixels Code of Conduct</a></p> <div class="footnotes"> @@ -266,5 +273,5 @@ imageio.imwrite('lfw_montage_960.jpg', montage_960)</p> </footer> </body> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/datasets/vgg_face2/index.html b/site/public/datasets/vgg_face2/index.html index 817fc9a0..63715a4f 100644 --- a/site/public/datasets/vgg_face2/index.html +++ b/site/public/datasets/vgg_face2/index.html @@ -8,7 +8,10 @@ <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' /> </head> <body> <header> @@ -18,7 +21,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -28,7 +30,7 @@ <section><h1>VGG Faces2</h1> </section><section><div class='meta'><div><div class='gray'>Created</div><div>2018</div></div><div><div class='gray'>Images</div><div>3.3M</div></div><div><div class='gray'>People</div><div>9,000</div></div><div><div class='gray'>Created From</div><div>Scraping search engines</div></div><div><div class='gray'>Search available</div><div>[Searchable](#)</div></div></div></section><section><p>VGG Face2 is the updated version of the VGG Face dataset and now includes over 3.3M face images from over 9K people. The identities were selected by taking the top 500K identities in Google's Knowledge Graph of celebrities and then selecting only the names that yielded enough training images. The dataset was created in the UK but funded by Office of Director of National Intelligence in the United States.</p> -</section><section><div class='applet' data-payload='{"command": "face_search"}'></div></section><section><div class='applet' data-payload='{"command": "name_search"}'></div></section><section><div class='applet' data-payload='{"command": "load file", "opt": "lfw_names_gender_kg_min.csv", "fields": "Name, Images, Gender, Description"}'></div></section><section><h2>VGG Face2 by the Numbers</h2> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "face_search"}'></div></section><section class='applet_container'><div class='applet' data-payload='{"command": "name_search"}'></div></section><section class='applet_container'><div class='applet' data-payload='{"command": "load_file assets/lfw_names_gender_kg_min.csv", "fields": ["Name, Images, Gender, Description"]}'></div></section><section><h2>VGG Face2 by the Numbers</h2> <ul> <li>1,331 actresses, 139 presidents</li> <li>3 husbands and 16 wives</li> @@ -75,5 +77,5 @@ </footer> </body> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/index.html b/site/public/index.html index 91ff467a..6db6ccb7 100644 --- a/site/public/index.html +++ b/site/public/index.html @@ -8,7 +8,10 @@ <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' /> </head> <body> <header> @@ -18,7 +21,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -49,7 +51,7 @@ <section><h2>Facial Recognition Datasets</h2> <p>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.</p> <h3>Summary</h3> -</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></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='applet_container'><div class='applet' data-payload='{"command": "load_file https://megapixels.nyc3.digitaloceanspaces.com/v1/citations/datasets.csv"}'></div></section> </div> @@ -74,5 +76,5 @@ <script src="/assets/js/vendor/oktween.js"></script> <script src="/assets/js/app/face.js"></script> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/research/00_introduction/index.html b/site/public/research/00_introduction/index.html index 8f598f5b..7b132cd5 100644 --- a/site/public/research/00_introduction/index.html +++ b/site/public/research/00_introduction/index.html @@ -3,12 +3,15 @@ <head> <title>MegaPixels</title> <meta charset="utf-8" /> - <meta name="author" content="Adam Harvey" /> - <meta name="description" content="" /> + <meta name="author" content="Megapixels" /> + <meta name="description" content="Introduction to Megapixels" /> <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' /> </head> <body> <header> @@ -18,7 +21,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -27,21 +29,21 @@ <div class="content"> <section> - <h1>Untitled Page</h1> + <h1>00: Introduction</h1> <div class='meta'> <div> <div class='gray'>Posted</div> - <div>2018-12-31</div> + <div>2018-12-15</div> </div> <div> <div class='gray'>By</div> - <div>Adam Harvey</div> + <div>Megapixels</div> </div> </div> </section> - <section><p>It was the early 2000s. Face recognition was new and no one seemed sure exactly how well it was going to perform in practice. In theory, face recognition was poised to be a game changer, a force multiplier, a strategic military advantage, a way to make cities safer and to secure borders. This was the future John Ashcroft demanded with the Total Information Awareness act of the 2003 and that spooks had dreamed of for decades. It was a future that academics at Carnegie Mellon Universtiy and Colorado State University would help build. It was also a future that celebrities would play a significant role in building. And to the surprise of ordinary Internet users like myself and perhaps you, it was a future that millions of Internet users would unwittingly play role in creating.</p> + <section><div class='meta'><div><div class='gray'>Posted</div><div>Dec. 15</div></div><div><div class='gray'>Author</div><div>Adam Harvey</div></div></div></section><section><p>It was the early 2000s. Face recognition was new and no one seemed sure exactly how well it was going to perform in practice. In theory, face recognition was poised to be a game changer, a force multiplier, a strategic military advantage, a way to make cities safer and to secure borders. This was the future John Ashcroft demanded with the Total Information Awareness act of the 2003 and that spooks had dreamed of for decades. It was a future that academics at Carnegie Mellon Universtiy and Colorado State University would help build. It was also a future that celebrities would play a significant role in building. And to the surprise of ordinary Internet users like myself and perhaps you, it was a future that millions of Internet users would unwittingly play role in creating.</p> <p>Now the future has arrived and it doesn't make sense. Facial recognition works yet it doesn't actually work. Facial recognition is cheap and accessible but also expensive and out of control. Facial recognition research has achieved headline grabbing superhuman accuracies over 99.9% yet facial recognition is 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 <sup class="footnote-ref" id="fnref-met_police"><a href="#fn-met_police">1</a></sup>, which perhaps is a crime itself.</p> <p>MegaPixels is an online art project that explores the history of facial recognition from the perspective of datasets. To paraphrase the artist Trevor Paglen, whoever controls the dataset controls the meaning. 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 does not start with a conclusion, a moralistic slant, or a</p> <p>Whether or not to build facial recognition was a question that can no longer be asked. As an outspoken critic of face recognition I've developed, and hopefully furthered, my understanding during the last 10 years I've spent working with computer vision. Though I initially disagreed, I've come to see technocratic perspective as a non-negotiable reality. As Oren (nytimes article) wrote in NYT Op-Ed "the horse is out of the barn" and the only thing we can do collectively or individually is to steer towards the least worse outcome. Computational communication has entered a new era and it's both exciting and frightening to explore the potentials and opportunities. In 1997 getting access to 1 teraFLOPS of computational power would have cost you $55 million and required a strategic partnership with the Department of Defense. At the time of writing, anyone can rent 1 teraFLOPS on a cloud GPU marketplace for less than $1/day. <sup class="footnote-ref" id="fnref-asci_option_red"><a href="#fn-asci_option_red">2</a></sup>.</p> @@ -82,5 +84,5 @@ </footer> </body> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/research/01_from_1_to_100_pixels/index.html b/site/public/research/01_from_1_to_100_pixels/index.html index b4c85d00..aac4b7e1 100644 --- a/site/public/research/01_from_1_to_100_pixels/index.html +++ b/site/public/research/01_from_1_to_100_pixels/index.html @@ -8,7 +8,10 @@ <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' /> </head> <body> <header> @@ -18,7 +21,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -91,5 +93,5 @@ </footer> </body> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/research/index.html b/site/public/research/index.html index 59a5fee9..dc69cdc5 100644 --- a/site/public/research/index.html +++ b/site/public/research/index.html @@ -8,7 +8,10 @@ <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' /> </head> <body> <header> @@ -18,7 +21,6 @@ <span class='sub'>The Darkside of Datasets</span> </a> <div class='links'> - <a href="/search/">Face Search</a> <a href="/datasets/">Datasets</a> <a href="/research/">Research</a> <a href="/about/">About</a> @@ -28,7 +30,7 @@ <section><h1>Research Blog</h1> <h2>The darkside of datasets and the future of computer vision</h2> -</section><div class='research_index'><a href='/research/00_introduction/'><section class='wide'><img src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' alt='Research post' /><section><h1>Untitled Page</h1><h2></h2></section></section></a><a href='/research/01_from_1_to_100_pixels/'><section class='wide'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/research/01_from_1_to_100_pixels/assets/intro.jpg' alt='Research post' /><section><h1>From 1 to 100 Pixels</h1><h2>Photographs are for romantics. For the rest of us, it's all about data. And a photo contains a massive amount of information about who you are.</h2></section></section></a></div> +</section><div class='research_index'><a href='/research/00_introduction/'><section class='wide'><img src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' alt='Research post' /><section><h1>00: Introduction</h1><h2></h2></section></section></a><a href='/research/01_from_1_to_100_pixels/'><section class='wide'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/research/01_from_1_to_100_pixels/assets/intro.jpg' alt='Research post' /><section><h1>From 1 to 100 Pixels</h1><h2>Photographs are for romantics. For the rest of us, it's all about data. And a photo contains a massive amount of information about who you are.</h2></section></section></a></div> </div> <footer> @@ -47,5 +49,5 @@ </footer> </body> -<script src="/assets/js/app/site.js"></script> +<script src="/assets/js/dist/index.js"></script> </html>
\ No newline at end of file diff --git a/site/public/test/citations/index.html b/site/public/test/citations/index.html new file mode 100644 index 00000000..c2bed996 --- /dev/null +++ b/site/public/test/citations/index.html @@ -0,0 +1,53 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Megapixels" /> + <meta name="description" content="Citations Test" /> + <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' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + <span class='sub'>The Darkside of Datasets</span> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/research/">Research</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content"> + + <section><h1>Citations</h1> +<h2><a href="/test/">← Back to test index</a></h2> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "citations lfw"}'></div></section> + + </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> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file diff --git a/site/public/test/csv/index.html b/site/public/test/csv/index.html new file mode 100644 index 00000000..e53c1421 --- /dev/null +++ b/site/public/test/csv/index.html @@ -0,0 +1,53 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Megapixels" /> + <meta name="description" content="CSV Test" /> + <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' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + <span class='sub'>The Darkside of Datasets</span> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/research/">Research</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content"> + + <section><h1>CSV Test</h1> +<h2><a href="/test/">← Back to test index</a></h2> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "load_file /datasets/lfw/assets/lfw_names_gender_kg_min.csv", "fields": ["Name, Images, Gender, Description"]}'></div></section> + + </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> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file diff --git a/site/public/test/datasets/index.html b/site/public/test/datasets/index.html new file mode 100644 index 00000000..421ecb97 --- /dev/null +++ b/site/public/test/datasets/index.html @@ -0,0 +1,53 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Megapixels" /> + <meta name="description" content="Datasets Test" /> + <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' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + <span class='sub'>The Darkside of Datasets</span> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/research/">Research</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content"> + + <section><h1>Index of datasets</h1> +<h2><a href="/test/">← Back to test index</a></h2> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "load_file https://megapixels.nyc3.digitaloceanspaces.com/v1/citations/datasets.csv"}'></div></section> + + </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> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file diff --git a/site/public/test/face_search/index.html b/site/public/test/face_search/index.html new file mode 100644 index 00000000..1823318d --- /dev/null +++ b/site/public/test/face_search/index.html @@ -0,0 +1,53 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Megapixels" /> + <meta name="description" content="Face Search Test" /> + <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' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + <span class='sub'>The Darkside of Datasets</span> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/research/">Research</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content"> + + <section><h1>Face search</h1> +<h2><a href="/test/">← Back to test index</a></h2> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "face_search lfw"}'></div></section> + + </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> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file diff --git a/site/public/test/gallery/index.html b/site/public/test/gallery/index.html new file mode 100644 index 00000000..8ead03eb --- /dev/null +++ b/site/public/test/gallery/index.html @@ -0,0 +1,55 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Megapixels" /> + <meta name="description" content="Gallery Test" /> + <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' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + <span class='sub'>The Darkside of Datasets</span> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/research/">Research</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content"> + + <section><h1>Gallery test</h1> +<h2><a href="/test/">← Back to test index</a></h2> +</section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/man.jpg' alt='Modal image 1'><div class='caption'>Modal image 1</div></div> +<div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/man.jpg' alt='Modal image 2'><div class='caption'>Modal image 2</div></div> +<div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/man.jpg' alt='Modal image 3'><div class='caption'>Modal image 3</div></div></section> + + </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> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file diff --git a/site/public/test/index.html b/site/public/test/index.html new file mode 100644 index 00000000..62837b3b --- /dev/null +++ b/site/public/test/index.html @@ -0,0 +1,64 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Megapixels" /> + <meta name="description" content="Frontend tests" /> + <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' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + <span class='sub'>The Darkside of Datasets</span> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/research/">Research</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content"> + + <section><h1>Megapixels UI Tests</h1> +<ul> +<li><p><a href="/test/style">Style Guide</a></p> +</li> +<li><p><a href="/test/csv">CSV</a></p> +</li> +<li><a href="/test/datasets/">Dataset list</a></li> +<li><a href="/test/citations/">Citation list</a></li> +<li><a href="/test/map/">Citation map</a></li> +<li><a href="/test/search_face/">Face search</a></li> +<li><a href="/test/search_name/">Name search</a></li> +<li><a href="/test/gallery/">Modal image gallery</a></li> +</ul> +</section> + + </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> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file diff --git a/site/public/test/map/index.html b/site/public/test/map/index.html new file mode 100644 index 00000000..c1f67471 --- /dev/null +++ b/site/public/test/map/index.html @@ -0,0 +1,53 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Megapixels" /> + <meta name="description" content="Map Test" /> + <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' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + <span class='sub'>The Darkside of Datasets</span> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/research/">Research</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content"> + + <section><h1>Map test</h1> +<h2><a href="/test/">← Back to test index</a></h2> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "map lfw"}'></div></section> + + </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> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file diff --git a/site/public/test/name_search/index.html b/site/public/test/name_search/index.html new file mode 100644 index 00000000..db38ba04 --- /dev/null +++ b/site/public/test/name_search/index.html @@ -0,0 +1,53 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Megapixels" /> + <meta name="description" content="Name Search Test" /> + <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' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + <span class='sub'>The Darkside of Datasets</span> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/research/">Research</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content"> + + <section><h1>Name search</h1> +<h2><a href="/test/">← Back to test index</a></h2> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "name_search lfw"}'></div></section> + + </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> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file diff --git a/site/public/test/search_face/index.html b/site/public/test/search_face/index.html new file mode 100644 index 00000000..86123c1c --- /dev/null +++ b/site/public/test/search_face/index.html @@ -0,0 +1,51 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Megapixels" /> + <meta name="description" content="Face Search Test" /> + <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/applets.css' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + <span class='sub'>The Darkside of Datasets</span> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/research/">Research</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content"> + + <section><p><code></code></p> +</section> + + </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> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file diff --git a/site/public/test/search_name/index.html b/site/public/test/search_name/index.html new file mode 100644 index 00000000..b8f836cf --- /dev/null +++ b/site/public/test/search_name/index.html @@ -0,0 +1,51 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Megapixels" /> + <meta name="description" content="Name Search Test" /> + <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/applets.css' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + <span class='sub'>The Darkside of Datasets</span> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/research/">Research</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content"> + + <section><p><code></code></p> +</section> + + </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> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file diff --git a/site/public/test/style/index.html b/site/public/test/style/index.html new file mode 100644 index 00000000..3ef7d918 --- /dev/null +++ b/site/public/test/style/index.html @@ -0,0 +1,87 @@ +<!doctype html> +<html> +<head> + <title>MegaPixels</title> + <meta charset="utf-8" /> + <meta name="author" content="Adam Harvey" /> + <meta name="description" content="MegaPixels Style" /> + <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' /> +</head> +<body> + <header> + <a class='slogan' href="/"> + <div class='logo'></div> + <div class='site_name'>MegaPixels</div> + <span class='sub'>The Darkside of Datasets</span> + </a> + <div class='links'> + <a href="/datasets/">Datasets</a> + <a href="/research/">Research</a> + <a href="/about/">About</a> + </div> + </header> + <div class="content"> + + <section><h1>Style Examples</h1> +<h2><a href="/test/">← Back to test index</a></h2> +</section><section class='wide'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/test.jpg' alt='Style Guide Test'><div class='caption'>Style Guide Test</div></div></section><section><div class='meta'><div><div class='gray'>Date</div><div>17-Jan-2019</div></div><div><div class='gray'>Numbers</div><div>17</div></div><div><div class='gray'>Identities</div><div>12,139</div></div><div><div class='gray'>But also</div><div>This is a test of the stylesheet</div></div></div></section><section><h1>Header 1</h1> +<h2>Header 2</h2> +<h3>Header 3</h3> +<h4>Header 4</h4> +<h5>Header 5</h5> +<h6>Header 6</h6> +<p><strong>Bold text</strong>, <em>italic text</em>, <strong><em>bold italic text</em></strong></p> +<p>At vero eos et et iusto qui blanditiis <a href="#">praesentium voluptatum</a> deleniti atque corrupti[^1], quos dolores et quas molestias excepturi sint, obcaecati cupiditate non-provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio[^2]. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus[^3].</p> +<ul> +<li>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium</li> +<li>Totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo</li> +<li>Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut</li> +<li>Odit aut fugit, sed quia consequuntur magni dolores eos</li> +<li>Qui ratione voluptatem sequi nesciunt, neque porro quisquam </li> +</ul> +<h2>single image test</h2> +</section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/man.jpg' alt='This person is alone'><div class='caption'>This person is alone</div></div></section><section><h2>double image test</h2> +</section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/man.jpg' alt='This person is on the left'><div class='caption'>This person is on the left</div></div> +<div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/man.jpg' alt='This person is on the right'><div class='caption'>This person is on the right</div></div></section><section><h2>triple image test</h2> +</section><section class='images'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/man.jpg' alt='Person 1'><div class='caption'>Person 1</div></div> +<div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/man.jpg' alt='Person 2'><div class='caption'>Person 2</div></div> +<div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/man.jpg' alt='Person 3. Let me tell you about Person 3. This person has a very long description with text which wraps like crazy'><div class='caption'>Person 3. Let me tell you about Person 3. This person has a very long description with text which wraps like crazy</div></div></section><section><blockquote><p>est, qui dolorem ipsum, quia dolor sit amet consectetur adipisci[ng] velit, sed quia non-numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem.</p> +</blockquote> +</section><section class='wide'><div class='image'><img src='https://nyc3.digitaloceanspaces.com/megapixels/v1/site/test/assets/wide-test.jpg' alt='This image is extremely wide and the text beneath it will wrap but thats fine because it can also contain <a href="https://example.com/">hyperlinks</a>! Yes, you read that right—hyperlinks! Lorem ipsum dolor sit amet ad volotesque sic hoc ad nauseam'><div class='caption'>This image is extremely wide and the text beneath it will wrap but that's fine because it can also contain <a href="https://example.com/">hyperlinks</a>! Yes, you read that right—hyperlinks! Lorem ipsum dolor sit amet ad volotesque sic hoc ad nauseam</div></div></section><section><p>Inline <code>code</code> has <code>back-ticks around</code> it.</p> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "javascript", "fields": ["var s = \"JavaScript syntax highlighting\";", "alert(s);"]}'></div></section><section><pre><code class="lang-python">s = "Python syntax highlighting" +print(s) +</code></pre> +</section><section class='applet_container'><div class='applet' data-payload='{"command": "No language indicated, so no syntax highlighting. ", "fields": ["But let's throw in a <b>tag</b>."]}'></div></section><section><p>Horizontal rule</p> +<hr> +<p>Citations below here</p> +<div class="footnotes"> +<hr> +<ol></ol> +</div> +</section> + + </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> + </div> + </footer> +</body> + +<script src="/assets/js/dist/index.js"></script> +</html>
\ No newline at end of file |