File size: 4,494 Bytes
04fa58e
 
 
 
 
 
fb852b6
 
 
04fa58e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fb852b6
04fa58e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fb852b6
04fa58e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
fb852b6
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Infer</title>
    <link rel="stylesheet" href="static/styles.css" />
    <link rel="icon" type="image/svg+xml" href="static/assets/favicon.svg" />
    <link rel="icon" type="image/png" href="static/assets/favicon.png" />
  </head>
  <body>
    <header class="main-header">
      <div class="header-left">
        <h1>
          <a href="index.html" class="home-link"
            >Infer <span class="star"></span></a
          >
        </h1>
        <p class="subtitle">Making AI accountability tools for artists.</p>
      </div>
      <nav class="header-nav">
        <a href="#" class="nav-link">About</a>
        <span class="nav-separator"></span>
        <a href="resources.html" class="nav-link">Resources</a>
        <span class="nav-separator"></span>
        <a href="mailto:[email protected]" class="nav-link">Contact</a>
      </nav>
    </header>
    <main class="main-content">
      <section class="resources-section">
        <div class="card-header">
          <h2>Resources</h2>
          <p>
            A compiled list of applications and legal resources to help you
            protect your work.
          </p>
        </div>
        <div class="resources-content">
          <div class="resource-categories">
            <button
              class="resource-category active"
              data-resource="do-not-train"
            >
              Do Not Train
            </button>
            <button class="resource-category" data-resource="nightshade">
              Nightshade
            </button>
            <button class="resource-category" data-resource="glaze">
              Glaze
            </button>
            <button class="resource-category" data-resource="copyright">
              Copyright Resources
            </button>
            <button class="resource-category" data-resource="licensing">
              Licensing Options
            </button>
          </div>
          <div class="resource-details">
            <img
              src="static/assets/nightshade-preview.png"
              alt="Nightshade Preview"
              class="resource-preview"
              style="display: none"
            />
            <div class="resource-info" id="resource-info">
              <!-- JS will inject content here -->
            </div>
          </div>
        </div>
      </section>
    </main>
    <div id="aboutOverlay" class="about-overlay" style="display:none;">
      <div class="about-modal">
        <button class="about-close" id="aboutCloseBtn" aria-label="Close About">&times;</button>
        <h2>About Infer</h2>
        <p>
          Infer helps artists and image creators check whether their work was likely used to train popular AI models. By comparing your image against model behaviors, we can estimate its presence in the training data—something that's often invisible by design.
        </p>
        <p>
          If your image comes up as a likely match, you'll get two paths:
          <ul>
            <li>Protect Your Art with tools to cloak, license, or fight back</li>
            <li>Get Organized with others facing the same issue—through legal coordination, shared resources, and community defense</li>
          </ul>
        </p>
      </div>
    </div>
    <script src="static/app.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        var aboutOverlay = document.getElementById('aboutOverlay');
        var aboutCloseBtn = document.getElementById('aboutCloseBtn');
        var aboutLink = Array.from(document.querySelectorAll('.nav-link')).find(function(link) {
          return link.textContent.trim().toLowerCase() === 'about';
        });
        if (aboutLink) {
          aboutLink.addEventListener('click', function(e) {
            e.preventDefault();
            if (aboutOverlay) aboutOverlay.style.display = 'flex';
          });
        }
        if (aboutCloseBtn) {
          aboutCloseBtn.addEventListener('click', function() {
            if (aboutOverlay) aboutOverlay.style.display = 'none';
          });
        }
        if (aboutOverlay) {
          aboutOverlay.addEventListener('click', function(e) {
            if (e.target === aboutOverlay) {
              aboutOverlay.style.display = 'none';
            }
          });
        }
      });
    </script>
  </body>
</html>