|
|
<!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="styles.css" /> |
|
|
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg" /> |
|
|
<link rel="icon" type="image/png" href="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="assets/nightshade-preview.png" |
|
|
alt="Nightshade Preview" |
|
|
class="resource-preview" |
|
|
style="display: none" |
|
|
/> |
|
|
<div class="resource-info" id="resource-info"> |
|
|
|
|
|
</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">×</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> |
|
|
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: `<strong>Understand Your Rights:</strong><br>In many countries, your work is protected the moment it's created—but enforcing that is another story.<br><br><u>Includes:</u><ul><li>How to formally register your copyright</li><li>Templates for takedown notices</li><li>Intro to fair use & derivative work laws</li></ul>`, |
|
|
}, |
|
|
licensing: { |
|
|
title: "Licensing Tools", |
|
|
html: `<strong>Put Terms in Writing:</strong><br>Use free or paid licenses to explicitly control how your work can be used.<br><br><u>Options to Explore:</u><ul><li>Creative Commons with "no AI use" clauses</li><li>Personal licensing agreements</li><li>Open-source licenses adapted for artists</li></ul>`, |
|
|
}, |
|
|
}; |
|
|
const categories = document.querySelectorAll(".resource-category"); |
|
|
const info = document.getElementById("resource-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 |
|
|
showResource("do-not-train"); |
|
|
</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> |
|
|
|
