summaryrefslogtreecommitdiff
path: root/site/templates/home.html
blob: 03a61af220eb66940c7a0b67c0d4e4a8bf12fc20 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
{% 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/"><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>Facial 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>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>
    <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>
    <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>
  </section>

  <section class='wide'>
    <h2>Dataset Portraits</h2>
    <p>
      We have prepared detailed studies of some of the more noteworthy datasets.
    </p>

    <div class="dataset-list">
    {% for dataset in datasets %}
      <a href="{{ dataset.url }}">
        <div class="dataset">
          {{ dataset.title }}
        </div>
      </a>
    {% endfor %}
    </div>
  </section>

{% endblock %}

{% block scripts %}
<script src="/assets/js/vendor/three.min.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 %}