Spaces:

fdaudens
/

ai-copyright-lawsuits

Running

File size: 15,762 Bytes

<!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-pending {
            background-color: #f59e0b;
        } */
        
        .status-dismissed {
            background-color: #6b7280;
        }
        
        .status-active {
            background-color: #3b82f6;
        }

        .status-ruling {
            background-color: #a855f7; /* purple-500 */
        }
        
        .expandable {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }
        
        /* Table view styles */
        .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-center mb-8">
            <div class="relative w-full max-w-md">
                <input type="text" id="searchInput" placeholder="Search cases..." class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
            </div>
        </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-yellow-100 text-yellow-700 hover:bg-yellow-200 transition" data-filter="pending">
              Pending
            </button> -->
            <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>
    // 1. Build each card from the row
    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 to create table row
    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>`;
    }

    // View toggle handler
    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';
      }
    });

    // Parse CSV data
    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();
      }
    });

    // 3. Filters & search (identical to before)
      function attachFiltersAndSearch() {
        document.querySelectorAll('.filter-btn').forEach(btn => {
          btn.addEventListener('click', () => {
            const f = btn.dataset.filter;
      
            // 1. Timeline cards
            document.querySelectorAll('.timeline-card').forEach(c => {
              c.style.display = (f === 'all' || c.dataset.status === f) ? 'block' : 'none';
            });
      
            // 2. Table rows
            document.querySelectorAll('#tableBody tr').forEach(r => {
              r.style.display = (f === 'all' || r.dataset.status === f) ? '' : 'none';
            });
      
            // 3. Update button styles
            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'
                           : /* dismissed */                   '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>