Spaces:

s-ahal
/

infer

Running

File size: 9,931 Bytes

<!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="/" 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" class="nav-link">Resources</a>
        <span class="nav-separator">⎈</span>
        <a href="mailto:hello@infer.ai" 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() {
        // About overlay logic
        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';
            }
          });
        }

        // Resource data handling
        const resourceData = {
          "do-not-train": {
            title: "Do Not Train",
            html: `<strong>What It Is:</strong> A simple metadata tag artists can add to their images to declare they don't consent to their work being used for training AI.<br><strong>How To Use:</strong> Add a do-not-train tag to your website's HTML or use platforms that support the tag.<br><strong>Note:</strong> It's not enforceable yet, but signals intent for future protections.<br><a href='https://spawning.ai/rightsholders-faq' class='action-button' target='_blank'><span>Learn more</span><span class='arrow'>⟶</span></a>`
          },
          "nightshade": {
            title: "Nightshade",
            html: `<strong>What It Is:</strong> A tool that poisons your artwork's pixels—imperceptibly to humans, but disruptive to training algorithms.<br><strong>Why It Works:</strong> It corrupts how AI models interpret your work, deterring them from using it.<br><a href='https://nightshade.cs.uchicago.edu/' class='action-button' target='_blank'><span>Try it out</span><span class='arrow'>⟶</span></a>`
          },
          "glaze": {
            title: "Glaze",
            html: `<strong>What It Is:</strong> A style cloak that protects your artistic fingerprint.<br><strong>What It Does:</strong> Applies a subtle, AI-visible filter that makes your work harder to mimic.<br><strong>Best For:</strong> Artists with a strong visual signature.<br><a href='https://glaze.cs.uchicago.edu/' class='action-button' target='_blank'><span>Try it out</span><span class='arrow'>⟶</span></a>`
          },
          "copyright": {
            title: "Copyright Resources",
            html: `<p><strong>Understand Your Rights</strong><br>
    In many countries, your work is automatically protected the moment it’s created. But enforcement—especially against AI companies scraping images at scale—is a more difficult process.
  </p>
  <p>This section offers a starting point for understanding your legal footing and knowing where to go next.</p>

  <ul>
    <li><strong><a href="https://www.copyright.gov/registration/" target="_blank" rel="noopener noreferrer">Registering Your Copyright</a></strong><br>
      In the U.S., registration through the U.S. Copyright Office gives you legal standing in court and potential access to statutory damages. Other countries offer similar systems.
    </li>
    <li><strong><a href="https://www.lumendatabase.org/" target="_blank" rel="noopener noreferrer">Submitting Takedown Notices</a></strong><br>
      Platforms often respond to takedown requests filed under laws like the DMCA. The Lumen Database tracks these requests and offers guidance.
    </li>
    <li><strong><a href="https://www.law.cornell.edu/wex/fair_use" target="_blank" rel="noopener noreferrer">Fair Use & Derivative Work</a></strong><br>
      The U.S. doctrine of fair use—and similar doctrines elsewhere—can be complicated. Learn the basics to assess how AI-generated derivatives might (or might not) infringe.
    </li>
  </ul>

  <p>You won’t find legal advice here—but you will find links to public resources, artist coalitions, and legal organizations working on this issue.</p>
`
          },
          "licensing": {
            title: "Licensing Tools",
            html: `<p><strong>Put Terms in Writing</strong><br>
    Licensing gives you a way to state your boundaries. Whether you want your work widely shared or strictly controlled, it's useful to communicate usage terms clearly and in writing.
  </p>

  <ul>
    <li><strong><a href="https://noai.org" target="_blank" rel="noopener noreferrer">Creative Commons with "No AI" Clauses</a></strong><br>
      Some artists are adapting Creative Commons licenses to include restrictions against AI training. Projects like NoAI.org are working to formalize this.
    </li>
    <li><strong>Custom Personal Licenses</strong><br>
      Artists working with clients or collaborators often draft their own terms. These can explicitly limit AI-related use, resale, or reproduction.
    </li>
    <li><strong><a href="https://firstdonoharm.dev" target="_blank" rel="noopener noreferrer">Ethical & Anti-Exploitation Licenses</a></strong><br>
      Licenses like the <em>Hippocratic License</em> and <a href="https://anticapitalist.software" target="_blank" rel="noopener noreferrer">ACSL</a> are being adapted for visual media. These support boundaries around ethical use and labor protection.
    </li>
  </ul>

  <p>We encourage you to read through these public resources and choose what fits your work and your politics. You don’t need to be a lawyer to set limits.</p>`
          }
        };
        
        const categories = document.querySelectorAll('.resource-category');
        const info = document.getElementById('resource-info');
        
        if (categories.length && info) {
          function showResource(key) {
            categories.forEach(btn => 
              btn.classList.toggle('active', btn.dataset.resource === key)
            );
            info.innerHTML = `<h3>${resourceData[key].title}</h3><p>${resourceData[key].html}</p>`;
          }

          categories.forEach(btn => {
            btn.addEventListener('click', () => showResource(btn.dataset.resource));
          });

          // Show default resource
          showResource('do-not-train');
        }
      });
    </script>
  </body>
</html>