Update resources.html
Browse files- resources.html +6 -42
resources.html
CHANGED
|
@@ -4,9 +4,9 @@
|
|
| 4 |
<meta charset="UTF-8" />
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
<title>Infer</title>
|
| 7 |
-
<link rel="stylesheet" href="styles.css" />
|
| 8 |
-
<link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
|
| 9 |
-
<link rel="icon" type="image/png" href="assets/favicon.png" />
|
| 10 |
</head>
|
| 11 |
<body>
|
| 12 |
<header class="main-header">
|
|
@@ -58,7 +58,7 @@
|
|
| 58 |
</div>
|
| 59 |
<div class="resource-details">
|
| 60 |
<img
|
| 61 |
-
src="assets/nightshade-preview.png"
|
| 62 |
alt="Nightshade Preview"
|
| 63 |
class="resource-preview"
|
| 64 |
style="display: none"
|
|
@@ -86,43 +86,7 @@
|
|
| 86 |
</p>
|
| 87 |
</div>
|
| 88 |
</div>
|
| 89 |
-
<script>
|
| 90 |
-
const resourceData = {
|
| 91 |
-
"do-not-train": {
|
| 92 |
-
title: "Do Not Train",
|
| 93 |
-
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>`,
|
| 94 |
-
},
|
| 95 |
-
nightshade: {
|
| 96 |
-
title: "Nightshade",
|
| 97 |
-
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>`,
|
| 98 |
-
},
|
| 99 |
-
glaze: {
|
| 100 |
-
title: "Glaze",
|
| 101 |
-
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>`,
|
| 102 |
-
},
|
| 103 |
-
copyright: {
|
| 104 |
-
title: "Copyright Resources",
|
| 105 |
-
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>`,
|
| 106 |
-
},
|
| 107 |
-
licensing: {
|
| 108 |
-
title: "Licensing Tools",
|
| 109 |
-
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>`,
|
| 110 |
-
},
|
| 111 |
-
};
|
| 112 |
-
const categories = document.querySelectorAll(".resource-category");
|
| 113 |
-
const info = document.getElementById("resource-info");
|
| 114 |
-
function showResource(key) {
|
| 115 |
-
categories.forEach((btn) =>
|
| 116 |
-
btn.classList.toggle("active", btn.dataset.resource === key)
|
| 117 |
-
);
|
| 118 |
-
info.innerHTML = `<h3>${resourceData[key].title}</h3><p>${resourceData[key].html}</p>`;
|
| 119 |
-
}
|
| 120 |
-
categories.forEach((btn) => {
|
| 121 |
-
btn.addEventListener("click", () => showResource(btn.dataset.resource));
|
| 122 |
-
});
|
| 123 |
-
// Show default
|
| 124 |
-
showResource("do-not-train");
|
| 125 |
-
</script>
|
| 126 |
<script>
|
| 127 |
document.addEventListener('DOMContentLoaded', function() {
|
| 128 |
var aboutOverlay = document.getElementById('aboutOverlay');
|
|
@@ -151,4 +115,4 @@
|
|
| 151 |
});
|
| 152 |
</script>
|
| 153 |
</body>
|
| 154 |
-
</html>
|
|
|
|
| 4 |
<meta charset="UTF-8" />
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 |
<title>Infer</title>
|
| 7 |
+
<link rel="stylesheet" href="static/styles.css" />
|
| 8 |
+
<link rel="icon" type="image/svg+xml" href="static/assets/favicon.svg" />
|
| 9 |
+
<link rel="icon" type="image/png" href="static/assets/favicon.png" />
|
| 10 |
</head>
|
| 11 |
<body>
|
| 12 |
<header class="main-header">
|
|
|
|
| 58 |
</div>
|
| 59 |
<div class="resource-details">
|
| 60 |
<img
|
| 61 |
+
src="static/assets/nightshade-preview.png"
|
| 62 |
alt="Nightshade Preview"
|
| 63 |
class="resource-preview"
|
| 64 |
style="display: none"
|
|
|
|
| 86 |
</p>
|
| 87 |
</div>
|
| 88 |
</div>
|
| 89 |
+
<script src="static/app.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 90 |
<script>
|
| 91 |
document.addEventListener('DOMContentLoaded', function() {
|
| 92 |
var aboutOverlay = document.getElementById('aboutOverlay');
|
|
|
|
| 115 |
});
|
| 116 |
</script>
|
| 117 |
</body>
|
| 118 |
+
</html>
|