ghostmaxxing/index.html at main · vecna/ghostmaxxing · GitHub

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/svg+xml" href="/images/ghostmaxxing-favicon.svg">
  <title>Ghostmaxxing</title>
  <meta name="description"
    content="Ghostmaxxing is a public lab for testing face-recognition camouflage through browser experiments, Ghostyles, references, and reporting." />
  <meta property="og:title" content="Ghostmaxxing" />
  <meta property="og:description" content="A public lab for testing face-recognition camouflage." />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="/images/social-card.svg" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Ghostmaxxing" />
  <meta name="twitter:description" content="A public lab for testing face-recognition camouflage." />
  <meta name="twitter:image" content="/images/social-card.svg" />
  <link rel="stylesheet" href="styles/pages.css" />
</head>

<body>
  <main class="editorial-homepage variant-a editorial-homepage--svg-footer-band">
    <div class="editorial-homepage__shell">
      <header class="editorial-homepage__header">
        <a class="wordmark" href="#" aria-label="Ghostmaxxing homepage prototype" data-i18n-aria-label="homepage_wordmark_label">
          <span class="wordmark__main">
            <img class="wordmark__mark" src="images/ghostmaxxing-mark.svg" alt="" aria-hidden="true" />
            <span class="wordmark__title">Ghostmaxxing</span>
          </span>
          <span class="wordmark__subtitle" data-i18n="homepage_subtitle">
            A public lab for testing face-recognition camouflage
          </span>
        </a>

        <nav class="editorial-homepage__nav" aria-label="Prototype navigation" data-i18n-aria-label="prototype_navigation_label">
          <a class="navlink" href="/references/" target="_blank" rel="noopener noreferrer" data-i18n="research_references_link">Research References</a>
          <a class="navlink" href="about.html" data-i18n="vision_about_link">Vision & About</a>
          <a class="cta-inline" href="report.html" data-i18n-html="leak_to_us_link_html">How to <i>leak</i> to us<span aria-hidden="true">↗</span></a>
          <span class="locale-control" aria-hidden="false">
            <span class="locale-control__flag" aria-hidden="true"></span>
            <select id="localeSelect" class="locale-select" aria-label="Language" data-i18n-aria-label="language_label"></select>
          </span>
        </nav>
      </header>

      <section class="editorial-homepage__hero" aria-labelledby="hero-title-a">
        <div class="hero-copy">
          <h1 class="hero-copy__title" id="hero-title-a" data-i18n-html="hero_title_html">Disrupt<br>the read.</h1>
          <p class="hero-copy__lead" data-i18n="homepage_lead">Ghostmaxxing is a real-time web app for testing face-recognition
            camouflage. Point your camera, change how your face looks, and watch a local recognition
            pipeline react &mdash; live. Everything runs in your browser, so your data stays with you.</p>
          <p class="hero-copy__small" data-i18n-html="homepage_small_html">Built for hands-on <a href="workshops.html">workshops</a> and
            self-experiments: see for yourself when a look stops a match, under your own conditions
            &mdash; not a promise that it will hold anywhere else.</p>
          <div class="hero-copy__actions">
            <a class="btn-primary" href="lab.html" data-i18n-html="open_lab_link_html">Open the lab <span aria-hidden="true">↗</span></a>
          </div>
          <div class="hero-copy__meta" aria-label="Internal tools" data-i18n-aria-label="internal_tools_label">
            <span><a href="loader.html" data-i18n="video_loader_link">Video Loader</a></span>
            <!-- RELEASE: unreleased tools — uncomment on launch of Ghostyle Transfer / Latent Space Visualizer.
                 The i18n keys (ghostyle_transfer_link, realtime_visualizer_link) are already in the catalog.
            <span><a href="ghostyle-transfer.html" data-i18n="ghostyle_transfer_link">Ghostyle Transfer</a></span>
            <span><a href="realtime.html" data-i18n="realtime_visualizer_link">Latent Space Visualizer</a></span>
            -->
          </div>
          <div class="hero-copy__meta" aria-label="Explore further" data-i18n-aria-label="explore_further_label">
            <span><a href="/docs" data-i18n="technical_documentation_link">Technical documentation</a></span>
            <span><a href="https://github.com/vecna/ghostmaxxing" data-i18n="code_link">Code</a></span>
          </div>
        </div>

        <figure class="hero-figure">
          <div class="hero-figure__frame">
            <img class="hero-figure__image" src="images/ghostmaxxing-homepage.webp"
              alt="Portrait split between face-recognition overlay and adversarial camouflage." data-i18n-alt="homepage_hero_alt" />
          </div>
          <!-- <figcaption class="hero-figure__origin">Ghostmaxxing helps you in understanding and mitigating facial recognition technologies.</figcaption> -->
        </figure>
      </section>
    </div>
    <br class="editorial-homepage__spacer" />
    <br class="editorial-homepage__spacer" />
    <div class="camera-band" aria-hidden="true"></div>
  </main>
  <script type="module" src="scripts/home.js"></script>
</body>

</html>