Spaces:

reach-vb
/

2025-ai-timeline

Running

2025-ai-timeline

File size: 9,420 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Timeline Template</title>
  <style>
    body {
      font-family: 'Arial', sans-serif;
      background-color: #f4f4f9;
      color: #333;
      margin: 0;
      padding: 0;
      overflow-x: scroll;
      scrollbar-width: thin;
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    .timeline {
      display: flex;
      flex-direction: row;
      padding: 20px;
      gap: 10px;
      overflow-x: auto;
    }
    .month {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 300px;
      flex: 0 0 300px;
    }
    .month h3 {
      margin: 0;
      padding: 10px;
      background-color: #6200ea;
      color: white;
      border-radius: 5px;
      text-align: center;
    }
    .event {
      background-color: white;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      position: relative;
      transition: all 0.3s ease;
    }
    
    /* Make category-1 events more prominent */
    .event:has(.tag.open-source) {
      background-color: #e8f5e9;
      border-left: 4px solid #4caf50;
      transform: scale(1.02);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }
    
    /* Slightly dim category-2 events */
    .event:has(.tag.api-only) {
      background-color: #fafafa;
      border-left: 4px solid #f44336;
    }
    
    /* Hover effects */
    .event:has(.tag.open-source):hover {
      transform: scale(1.03);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }
    .event h4 {
      margin: 0;
      font-size: 14px;
    }
    .event p {
      margin: 5px 0 0;
      font-size: 12px;
      color: #666;
    }
    .tag {
      display: inline-block;
      padding: 2px 5px;
      font-size: 10px;
      border-radius: 3px;
      margin-top: 5px;
    }
    .tag.open-source {
      background-color: #4caf50;
      color: white;
    }
    .tag.api-only {
      background-color: #f44336;
      color: white;
    }
    .event p a {
      color: #4caf50;
      text-decoration: none;
    }
    .event p a:hover {
      text-decoration: underline;
    }
    .github-link {
      text-align: center;
      padding: 8px;
      background-color: #24292e;
      color: white;
      font-size: 14px;
    }
    .github-link a {
      color: white;
      text-decoration: none;
    }
    .github-link a:hover {
      text-decoration: underline;
    }
    /* Scrollbar styles */
    body::-webkit-scrollbar {
      height: 8px;
    }

    body::-webkit-scrollbar-track {
      background: #f1f1f1;
    }

    body::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 4px;
    }

    body::-webkit-scrollbar-thumb:hover {
      background: #555;
    }

    .tag.text {
      background-color: #9c27b0;
      color: white;
    }
    .tag.audio {
      background-color: #ff9800;
      color: white;
    }
    .tag.vision {
      background-color: #03a9f4;
      color: white;
    }
    .tag.multimodal {
      background-color: #795548;
      color: white;
    }
    .tag.announcement {
      background-color: #607d8b;
      color: white;
    }

    .filter-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      padding: 20px 0;
      background-color: white;
      border-bottom: 1px solid #eee;
    }

    .toggle-container {
      display: flex;
      gap: 8px;
    }

    .dropdown-filters {
      display: flex;
      gap: 8px;
    }

    .toggle-button {
      padding: 6px 12px;
      border: 1px solid #ddd;
      border-radius: 15px;
      background-color: white;
      font-size: 13px;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .toggle-button.active {
      background-color: #2196f3;
      border-color: #2196f3;
      color: white;
    }

    select {
      padding: 6px 12px;
      border: 1px solid #ddd;
      border-radius: 15px;
      font-size: 13px;
      background-color: white;
      cursor: pointer;
    }

    .counter-container {
      text-align: center;
      padding: 15px;
      font-size: 14px;
      color: #666;
      background-color: #f8f9fa;
    }

    .counter-item span {
      font-weight: bold;
      color: #2196f3;
    }

    .counter-divider {
      margin: 0 10px;
      color: #ddd;
    }
  </style>
</head>
<body>
  <div class="github-link">
    <a href="#" target="_blank">View on GitHub</a>
  </div>
  <div class="filter-group">
    <div class="toggle-container">
      <button class="toggle-button active" data-filter="all">All Models</button>
      <button class="toggle-button" data-filter="open-source">Open Weights</button>
      <button class="toggle-button" data-filter="api-only">API Only</button>
    </div>
    <div class="dropdown-filters">
      <select id="modalityFilter" onchange="filterByModality(this.value)">
        <option value="all">All Modalities</option>
        <option value="text">Text</option>
        <option value="audio">Audio</option>
        <option value="vision">Vision</option>
        <option value="multimodal">Multimodal</option>
      </select>
      <select id="typeFilter" onchange="filterByType(this.value)">
        <option value="all">All Types</option>
        <option value="model">Models</option>
        <option value="announcement">Announcements</option>
      </select>
    </div>
  </div>
  <div class="counter-container">
    <span class="counter-item">
      <span id="open-source-count">0</span> Open Source
    </span>
    <span class="counter-divider">·</span>
    <span class="counter-item">
      <span id="api-only-count">0</span> API Only
    </span>
  </div>
  <div class="timeline">
    <div class="month">
      <h3>January 2025</h3>
      <div class="event">
        <h4>OpenBMB PRIME</h4>
        <p>o1 like Eurus 2 7B (<a href="https://huggingface.co/PRIME-RL/Eurus-2-7B-PRIME" target="_blank">open weights</a>).</p>
        <span class="tag open-source">Open Weights</span>
        <span class="tag text">Text</span>
      </div>
      <div class="event">
        <h4>Nvidia Cosmos</h4>
        <p>Diffusion + Autoregressive World Models (<a href="https://huggingface.co/collections/nvidia/cosmos-6751e884dc10e013a0a0d8e6" target="_blank">open weights</a>).</p>
        <span class="tag open-source">Open Weights</span>
        <span class="tag multimodal">Multimodal</span>
      </div>
      <div class="event">
        <h4>Moondream2</h4>
        <p>Moondream2 w/ Gaze Detection (<a href="https://huggingface.co/vikhyatk/moondream2" target="_blank">open weights</a>).</p>
        <span class="tag open-source">Open Weights</span>
        <span class="tag multimodal">Multimodal</span>
      </div>      
    </div>
  </div>
  <script>
    function updateCounts() {
      const openSourceCount = document.querySelectorAll('.tag.open-source').length;
      const apiOnlyCount = document.querySelectorAll('.tag.api-only').length;
      
      document.getElementById('open-source-count').textContent = openSourceCount;
      document.getElementById('api-only-count').textContent = apiOnlyCount;
    }

    let currentFilters = {
      category: 'all',
      modality: 'all',
      type: 'all'
    };

    function filterByModality(modality) {
      currentFilters.modality = modality;
      applyFilters();
    }

    function filterByType(type) {
      currentFilters.type = type;
      applyFilters();
    }

    function filterEvents(category) {
      // Update button states
      const buttons = document.querySelectorAll('.toggle-button');
      buttons.forEach(button => {
        button.classList.remove('active');
        if (button.getAttribute('data-filter') === category) {
          button.classList.add('active');
        }
      });

      currentFilters.category = category;
      applyFilters();
    }

    function applyFilters() {
      const events = document.querySelectorAll('.event');
      
      events.forEach(event => {
        const matchesCategory = currentFilters.category === 'all' || 
          event.querySelector(`.tag.${currentFilters.category}`);
        const matchesModality = currentFilters.modality === 'all' || 
          event.querySelector(`.tag.${currentFilters.modality}`);
        const matchesType = currentFilters.type === 'all' || 
          (currentFilters.type === 'announcement' ? 
            event.querySelector('.tag.announcement') : 
            !event.querySelector('.tag.announcement'));

        event.style.display = (matchesCategory && matchesModality && matchesType) ? 'block' : 'none';
      });

      // Check for empty months and hide them
      const months = document.querySelectorAll('.month');
      months.forEach(month => {
        const visibleEvents = Array.from(month.querySelectorAll('.event')).filter(event => 
          event.style.display !== 'none'
        );
        month.style.display = visibleEvents.length > 0 ? 'flex' : 'none';
      });

      updateCounts();
    }

    // Update event listeners when the page loads
    document.addEventListener('DOMContentLoaded', function() {
      const buttons = document.querySelectorAll('.toggle-button');
      buttons.forEach(button => {
        button.addEventListener('click', function() {
          filterEvents(this.getAttribute('data-filter'));
        });
      });
      updateCounts();
    });
  </script>
</body>
</html>