|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Copyright Lawsuit Timeline</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/[email protected]/papaparse.min.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.timeline-container { |
|
|
position: relative; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.timeline-container::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 6px; |
|
|
background-color: #3b82f6; |
|
|
top: 0; |
|
|
bottom: 0; |
|
|
left: 50%; |
|
|
margin-left: -3px; |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
.timeline-card { |
|
|
padding: 10px 40px; |
|
|
position: relative; |
|
|
width: 50%; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
.timeline-card::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 25px; |
|
|
height: 25px; |
|
|
background-color: white; |
|
|
border: 4px solid #3b82f6; |
|
|
border-radius: 50%; |
|
|
top: 15px; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.left { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.right { |
|
|
left: 50%; |
|
|
} |
|
|
|
|
|
.left::after { |
|
|
right: -12px; |
|
|
} |
|
|
|
|
|
.right::after { |
|
|
left: -12px; |
|
|
} |
|
|
|
|
|
.timeline-content { |
|
|
padding: 20px 30px; |
|
|
background-color: white; |
|
|
position: relative; |
|
|
border-radius: 6px; |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
|
|
|
@media screen and (max-width: 768px) { |
|
|
.timeline-container::after { |
|
|
left: 31px; |
|
|
} |
|
|
|
|
|
.timeline-card { |
|
|
width: 100%; |
|
|
padding-left: 70px; |
|
|
padding-right: 25px; |
|
|
} |
|
|
|
|
|
.timeline-card::after { |
|
|
left: 18px; |
|
|
} |
|
|
|
|
|
.left::after, .right::after { |
|
|
left: 18px; |
|
|
} |
|
|
|
|
|
.right { |
|
|
left: 0%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.status-dismissed { |
|
|
background-color: #6b7280; |
|
|
} |
|
|
|
|
|
.status-active { |
|
|
background-color: #3b82f6; |
|
|
} |
|
|
|
|
|
.status-ruling { |
|
|
background-color: #a855f7; |
|
|
} |
|
|
|
|
|
.expandable { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
|
|
|
|
|
|
.table-view { |
|
|
display: none; |
|
|
width: 100%; |
|
|
border-collapse: collapse; |
|
|
} |
|
|
|
|
|
.table-view th { |
|
|
background-color: #3b82f6; |
|
|
color: white; |
|
|
padding: 12px; |
|
|
text-align: left; |
|
|
} |
|
|
|
|
|
.table-view td { |
|
|
padding: 12px; |
|
|
border-bottom: 1px solid #e5e7eb; |
|
|
} |
|
|
|
|
|
.table-view tr:nth-child(even) { |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
|
|
|
.table-view tr:hover { |
|
|
background-color: #f3f4f6; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<header class="mb-12 text-center"> |
|
|
<h1 class="text-4xl font-bold text-blue-600 mb-4">AI Copyright Lawsuit Timeline</h1> |
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto"> |
|
|
Tracking key AI copyright lawsuits, their status, and outcomes. <br/>Feature requests? Drop them in the Discussion tab. |
|
|
</p> |
|
|
<p class="text-sm text-gray-500 mt-2"> |
|
|
Last update: June 27, 2025 |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6 max-w-4xl mx-auto"> |
|
|
|
|
|
<div class="flex items-baseline mb-4"> |
|
|
<h3 class="text-lg font-bold text-blue-800">Hugging Face Expert Commentary in Media</h3> |
|
|
<p class="text-sm text-blue-500 ml-2">(Not legal advice)</p> |
|
|
</div> |
|
|
|
|
|
<ul class="space-y-3 mb-6"> |
|
|
<li> |
|
|
<a |
|
|
href="https://www.youtube.com/live/1oirrAXe564?si=mdR7y4UezTQEsrEK&t=6268" |
|
|
target="_blank" |
|
|
class="text-blue-600 hover:underline flex items-start" |
|
|
> |
|
|
<i class="fas fa-external-link-alt mr-2 mt-1 text-xs"></i> |
|
|
<span> |
|
|
<strong>Clément Delangue:</strong> Open-source AI often aligns with fair use, and companies should feel motivated—not deterred—to release models and datasets, as it’s needed now more than ever. <em>– TBPN</em> |
|
|
</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a |
|
|
href="https://arstechnica.com/tech-policy/2024/03/novelists-sue-nvidia-to-stop-spread-of-ai-models-trained-on-copyrighted-books/" |
|
|
target="_blank" |
|
|
class="text-blue-600 hover:underline flex items-start" |
|
|
> |
|
|
<i class="fas fa-external-link-alt mr-2 mt-1 text-xs"></i> |
|
|
<span> |
|
|
<strong>Yacine Jernite:</strong> To facilitate technology development that respects established rights, we need minimum meaningful public transparency standards to support effective AI regulation. <em>– Ars Technica</em> |
|
|
</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a |
|
|
href="https://www.washingtonpost.com/technology/2023/07/16/ai-programs-training-lawsuits-fair-use/" |
|
|
target="_blank" |
|
|
class="text-blue-600 hover:underline flex items-start" |
|
|
> |
|
|
<i class="fas fa-external-link-alt mr-2 mt-1 text-xs"></i> |
|
|
<span> |
|
|
<strong>Margaret Mitchell:</strong> The current unfiltered scraping approach is “silly” and unscientific; the data collection system must change, even if via lawsuits. <em>– The Washington Post</em> |
|
|
</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<h3 class="text-lg font-bold text-blue-800 mb-4">Blog Posts</h3> |
|
|
|
|
|
<ul class="space-y-3"> |
|
|
<li> |
|
|
<a |
|
|
href="https://huggingface.co/blog/fdaudens/anthropic-ai-training-fair-use-ruling-2025" |
|
|
target="_blank" |
|
|
class="text-blue-600 hover:underline flex items-start" |
|
|
> |
|
|
<i class="fas fa-external-link-alt mr-2 mt-1 text-xs"></i> |
|
|
<span>The Anthropic Ruling: Why AI Training Just Got Legal (But Piracy Didn't)</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a |
|
|
href="https://huggingface.co/blog/fdaudens/ai-chatbot-privacy-risks" |
|
|
target="_blank" |
|
|
class="text-blue-600 hover:underline flex items-start" |
|
|
> |
|
|
<i class="fas fa-external-link-alt mr-2 mt-1 text-xs"></i> |
|
|
<span>What if Your AI Conversations Become Public?</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a |
|
|
href="https://huggingface.co/blog/yjernite/data-transparency" |
|
|
target="_blank" |
|
|
class="text-blue-600 hover:underline flex items-start" |
|
|
> |
|
|
<i class="fas fa-external-link-alt mr-2 mt-1 text-xs"></i> |
|
|
<span>Training Data Transparency in AI: Tools, Trends, and Policy Recommendations</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="flex justify-between items-center mb-6 max-w-4xl mx-auto"> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<button id="viewToggle" class="px-4 py-2 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition flex items-center"> |
|
|
<i class="fas fa-table mr-2"></i>Table View |
|
|
</button> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
|
|
|
|
|
|
|
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-blue-100 text-blue-700 hover:bg-blue-200 transition" data-filter="active"> |
|
|
Active |
|
|
</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-purple-100 text-purple-700 hover:bg-purple-200 transition" data-filter="ruling"> |
|
|
Ruling |
|
|
</button> |
|
|
<button class="filter-btn px-4 py-2 rounded-full bg-gray-100 text-gray-700 hover:bg-gray-200 transition" data-filter="dismissed"> |
|
|
Dismissed |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="timeline-container" id="timeline"></div> |
|
|
<div id="tableView" class="table-view max-w-4xl mx-auto"> |
|
|
<table class="w-full"> |
|
|
<thead> |
|
|
<tr> |
|
|
<th>Case</th> |
|
|
<th>Status</th> |
|
|
<th>Plaintiffs</th> |
|
|
<th>Defendants</th> |
|
|
<th>Filed</th> |
|
|
<th>Court</th> |
|
|
<th>Link</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="tableBody"></tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function createCard(data, idx) { |
|
|
const side = idx % 2 === 0 ? 'left' : 'right'; |
|
|
const stamp = data.status.toLowerCase(); |
|
|
return ` |
|
|
<div class="timeline-card ${side}" data-status="${stamp}" data-search=" |
|
|
${data.caseName} ${data.plaintiffs} ${data.defendants} ${data.filed} ${data.court} |
|
|
"> |
|
|
<div class="timeline-content"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h2 class="text-xl font-bold text-gray-800">${data.caseName}</h2> |
|
|
<span class="px-3 py-1 rounded-full text-xs font-semibold text-white status-${stamp}"> |
|
|
${stamp.charAt(0).toUpperCase()+stamp.slice(1)} |
|
|
</span> |
|
|
</div> |
|
|
<div class="flex flex-wrap gap-2 mb-3"> |
|
|
<span class="bg-gray-100 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-user-tie mr-1"></i>${data.plaintiffs} |
|
|
</span> |
|
|
<span class="bg-gray-100 px-2 py-1 rounded text-xs"> |
|
|
<i class="fas fa-user-shield mr-1"></i>${data.defendants} |
|
|
</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600 mb-3"> |
|
|
<span class="mr-3"> |
|
|
<i class="far fa-calendar mr-1"></i>Filed: ${data.filed} |
|
|
</span> |
|
|
<span> |
|
|
<i class="fas fa-gavel mr-1"></i>Court: ${data.court} |
|
|
</span> |
|
|
</div> |
|
|
<!-- ← insert the summary here --> |
|
|
<p class="text-gray-700 mb-3">${data.summary}</p> |
|
|
<a href="${data.link}" target="_blank" class="text-blue-600 hover:underline text-sm flex items-center"> |
|
|
<i class="fas fa-external-link-alt mr-2"></i>More Info |
|
|
</a> |
|
|
</div> |
|
|
</div>`; |
|
|
} |
|
|
|
|
|
|
|
|
function createTableRow(data) { |
|
|
const stamp = data.status.toLowerCase(); |
|
|
return ` |
|
|
<tr data-status="${stamp}"> |
|
|
<td class="font-medium">${data.caseName}</td> |
|
|
<td><span class="px-3 py-1 rounded-full text-xs font-semibold text-white status-${stamp}"> |
|
|
${stamp.charAt(0).toUpperCase()+stamp.slice(1)} |
|
|
</span></td> |
|
|
<td>${data.plaintiffs}</td> |
|
|
<td>${data.defendants}</td> |
|
|
<td>${data.filed}</td> |
|
|
<td>${data.court}</td> |
|
|
<td><a href="${data.link}" target="_blank" class="text-blue-600 hover:underline text-sm"> |
|
|
<i class="fas fa-external-link-alt mr-1"></i> |
|
|
</a></td> |
|
|
</tr>`; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('viewToggle').addEventListener('click', function() { |
|
|
const timeline = document.getElementById('timeline'); |
|
|
const table = document.getElementById('tableView'); |
|
|
const icon = this.querySelector('i'); |
|
|
|
|
|
if (timeline.style.display === 'none') { |
|
|
timeline.style.display = ''; |
|
|
table.style.display = 'none'; |
|
|
icon.className = 'fas fa-table mr-2'; |
|
|
this.innerHTML = '<i class="fas fa-table mr-2"></i>Table View'; |
|
|
} else { |
|
|
timeline.style.display = 'none'; |
|
|
table.style.display = 'block'; |
|
|
icon.className = 'fas fa-stream mr-2'; |
|
|
this.innerHTML = '<i class="fas fa-stream mr-2"></i>Timeline View'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
Papa.parse('cases.csv', { |
|
|
download: true, |
|
|
header: true, |
|
|
skipEmptyLines: true, |
|
|
complete: ({ data }) => { |
|
|
const timelineContainer = document.getElementById('timeline'); |
|
|
const tableBody = document.getElementById('tableBody'); |
|
|
|
|
|
data.forEach((row, i) => { |
|
|
timelineContainer.insertAdjacentHTML('beforeend', createCard(row, i)); |
|
|
tableBody.insertAdjacentHTML('beforeend', createTableRow(row)); |
|
|
}); |
|
|
|
|
|
attachFiltersAndSearch(); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
function attachFiltersAndSearch() { |
|
|
document.querySelectorAll('.filter-btn').forEach(btn => { |
|
|
btn.addEventListener('click', () => { |
|
|
const f = btn.dataset.filter; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.timeline-card').forEach(c => { |
|
|
c.style.display = (f === 'all' || c.dataset.status === f) ? 'block' : 'none'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('#tableBody tr').forEach(r => { |
|
|
r.style.display = (f === 'all' || r.dataset.status === f) ? '' : 'none'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.filter-btn').forEach(b => |
|
|
b.classList.remove('bg-blue-200','bg-purple-200','bg-gray-200') |
|
|
); |
|
|
const bgClass = btn.classList.contains('bg-blue-100') ? 'bg-blue-200' |
|
|
: btn.classList.contains('bg-purple-100')? 'bg-purple-200' |
|
|
: 'bg-gray-200'; |
|
|
btn.classList.add(bgClass); |
|
|
}); |
|
|
}); |
|
|
|
|
|
document.getElementById('searchInput').addEventListener('input', e => { |
|
|
const term = e.target.value.toLowerCase(); |
|
|
document.querySelectorAll('.timeline-card').forEach(c => { |
|
|
c.style.display = c.dataset.search.toLowerCase().includes(term) ? 'block' : 'none'; |
|
|
}); |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
