Update README.md

README.md

@@ -45,174 +45,272 @@ model-index:
       name: Code Generation
       type: code-generation
 ---
-
-# HuggingFace Research Timeline
+# Snake Timeline Debug
 
 <style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+
 body {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    line-height: 1.6;
-    margin: 0;
-    padding: 20px;
     background: #fafafa;
+    margin: 0;
+    padding: 0;
 }
 
-.timeline-container {
-    max-width: 1000px;
+.page-container {
+    width: 100%;
+    max-width: 1200px;
     margin: 0 auto;
-    background: white;
-    border-radius: 12px;
-    padding: 30px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    padding: 60px 20px;
+    font-family: 'Inter', sans-serif;
 }
 
-.timeline-year {
-    margin: 30px 0;
+h2 {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 40px;
+    color: #1a1a1a;
+    letter-spacing: -0.5px;
 }
 
-.year-header {
-    font-size: 28px;
-    font-weight: bold;
-    color: #1a1a1a;
-    margin-bottom: 20px;
-    text-align: center;
-    padding: 10px;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-    border-radius: 8px;
+.snake-timeline {
+    position: relative;
+    padding: 20px 0;
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+    padding: 40px;
 }
 
-.timeline-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 20px;
-    margin-bottom: 30px;
+.timeline-row {
+    display: flex;
+    position: relative;
+    margin-bottom: 32px;
+    min-height: 140px;
+    border: 1px dashed #ccc; /* DEBUG: Show row boundaries */
 }
 
-.month-card {
-    background: #f8f9fa;
-    border: 1px solid #e9ecef;
-    border-radius: 8px;
-    padding: 15px;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+.timeline-row:last-child {
+    margin-bottom: 0;
 }
 
-.month-card:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+.timeline-row.reverse {
+    flex-direction: row-reverse;
+    background: rgba(255, 0, 0, 0.05); /* DEBUG: Highlight reverse rows */
 }
 
-.month-title {
-    font-weight: 600;
-    font-size: 16px;
-    color: #495057;
+.month-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    padding: 0 15px;
+    border: 1px dotted #999; /* DEBUG: Show month boundaries */
+    background: rgba(0, 255, 0, 0.02); /* DEBUG: Subtle green background */
+}
+
+.month-arrow {
+    width: 0;
+    height: 0;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;
+    border-left: 10px solid #ff6b6b; /* DEBUG: Make arrows red and visible */
+    position: relative;
+    z-index: 2;
     margin-bottom: 12px;
+    transition: all 0.2s ease;
+}
+
+.timeline-row.reverse .month-arrow {
+    border-left: none;
+    border-right: 10px solid #ff6b6b; /* DEBUG: Red arrows for reverse too */
+}
+
+.month-item:hover .month-arrow {
+    border-left-color: #333;
+    transform: scale(1.2); /* DEBUG: Make hover more obvious */
+}
+
+.timeline-row.reverse .month-item:hover .month-arrow {
+    border-right-color: #333;
+    border-left: none;
+    transform: scale(1.2);
+}
+
+.month-label {
+    font-weight: 500;
+    font-size: 13px;
+    margin-bottom: 16px;
+    color: #666;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    border-bottom: 2px solid #dee2e6;
-    padding-bottom: 5px;
+    background: yellow; /* DEBUG: Make labels highly visible */
+    padding: 2px 4px;
 }
 
-.event-item {
-    margin: 8px 0;
-    padding: 6px 0;
+.month-item.year-marker .month-label {
+    font-weight: 600;
     font-size: 14px;
-    color: #212529;
-    display: block;
-    transition: color 0.2s ease;
+    color: #1a1a1a;
+    background: #f0f0f0;
+    padding: 4px 12px;
+    border-radius: 12px;
 }
 
-.event-item:hover {
-    color: #007bff;
+.month-item.year-marker .month-arrow {
+    border-left-color: #1a1a1a;
 }
 
-.event-link {
+.timeline-row.reverse .month-item.year-marker .month-arrow {
+    border-right-color: #1a1a1a;
+    border-left: none;
+}
+
+.events-list {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    max-width: 180px;
+    background: rgba(0, 0, 255, 0.1); /* DEBUG: Blue background for events */
+    padding: 4px;
+    border-radius: 4px;
+}
+
+.event {
+    font-size: 12px;
+    display: flex;
+    align-items: flex-start;
+    gap: 6px;
+    padding: 3px 0;
+    color: #4a4a4a;
+    transition: all 0.2s ease;
+    background: white; /* DEBUG: White background for individual events */
+    margin: 1px;
+    padding: 2px 4px;
+    border-radius: 2px;
+}
+
+.event:hover {
+    transform: translateX(2px);
+    background: #ffeb3b; /* DEBUG: Yellow on hover */
+}
+
+.event a {
     text-decoration: none;
     color: inherit;
+    line-height: 1.4;
+}
+
+.event a:hover {
+    color: #1a1a1a;
+}
+
+.timeline-row::before {
+    content: '';
+    position: absolute;
+    top: 8px;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: #e0e0e0;
+    z-index: 1;
+}
+
+.vertical-connector {
+    position: absolute;
+    width: 1px;
+    height: calc(100% + 32px);
+    background: #e0e0e0;
+    top: 8px;
+    z-index: 1;
+}
+
+.connector-right {
+    right: 0;
+}
+
+.connector-left {
+    left: 0;
 }
 
-.event-link:hover {
-    color: #0056b3;
+/* DEBUG: Show what's happening */
+.debug-info {
+    background: #fff3cd;
+    padding: 10px;
+    margin: 20px 0;
+    border-radius: 5px;
+    font-family: monospace;
+    font-size: 12px;
 }
 
 @media (max-width: 768px) {
-    .timeline-grid {
-        grid-template-columns: 1fr;
+    .snake-timeline {
+        padding: 20px;
     }
     
-    .timeline-container {
-        padding: 20px;
-        margin: 10px;
+    .month-item {
+        padding: 0 8px;
+    }
+    
+    .events-list {
+        max-width: 120px;
+    }
+    
+    .event {
+        font-size: 11px;
+    }
+
+    .month-label {
+        font-size: 11px;
     }
 }
 </style>
 
-<div id="timeline-container" class="timeline-container">
-    <h2 style="text-align: center; margin-bottom: 30px; color: #1a1a1a;">Loading Timeline...</h2>
+<div class="page-container">
+    <h2>Snake Timeline Debug Version</h2>
+    
+    <div class="debug-info" id="debug-output">
+        Debug info will appear here...
+    </div>
+    
+    <div class="snake-timeline" id="timeline-container">
+        <p>Loading snake timeline...</p>
+    </div>
 </div>
 
 <script>
-// Release data
+// Debug function
+function debugLog(message) {
+    console.log(message);
+    const debugDiv = document.getElementById('debug-output');
+    if (debugDiv) {
+        debugDiv.innerHTML += message + '<br>';
+    }
+}
+
+debugLog('🐍 Starting Snake Timeline Debug...');
+
+// Your original release data (simplified for testing)
 const releaseData = [
-    // 2024
     { month: "2024-01", name: "🔥 Warming up", link: null },
     { month: "2024-02", name: "⚙️ Nanotron Release", link: "#" },
     { month: "2024-02", name: "⛅ Lighteval Release", link: "#" },
-    { month: "2024-02", name: "⚙️ Datatrove Release", link: "#" },
-    { month: "2024-02", name: "⭐ The Stack v2", link: "#" },
-    { month: "2024-02", name: "⭐ StarCoder2", link: "#" },
     { month: "2024-03", name: "🪁 Zephyr Gemma", link: "#" },
     { month: "2024-03", name: "🪐 Cosmopedia", link: "#" },
     { month: "2024-04", name: "🍷 FineWeb", link: "#" },
     { month: "2024-04", name: "🕵️ JAT Agent", link: "#" },
-    { month: "2024-04", name: "🪁 Zephyr Mixtral", link: "#" },
-    { month: "2024-04", name: "🐶 Idefics 2", link: "#" },
-    { month: "2024-04", name: "🏆 Community Leaderboards", link: "#" },
     { month: "2024-05", name: "🦾 LeRobot Release", link: "#" },
-    { month: "2024-05", name: "📈 WSD Analysis", link: "#" },
-    { month: "2024-06", name: "🍷 FineWeb Report", link: "#" },
-    { month: "2024-06", name: "🍷 FineWeb-Edu", link: "#" },
-    { month: "2024-06", name: "🌺 Florence 2 Blog", link: "#" },
-    { month: "2024-06", name: "🏆 Open LLM Leaderboard v2", link: "#" },
-    { month: "2024-06", name: "👩‍🏫 Stanford CS25", link: "#" },
-    { month: "2024-07", name: "🛟 Ring attention", link: "#" },
-    { month: "2024-07", name: "🦾 LeRobot TeleOps", link: "#" },
-    { month: "2024-07", name: "🥇 Win AIMO", link: "#" },
-    { month: "2024-07", name: "🐶 Docmatix", link: "#" },
-    { month: "2024-07", name: "🤏 SmolLM", link: "#" },
-    { month: "2024-08", name: "🦾 LeRobot Tutorial", link: "#" },
-    { month: "2024-08", name: "📣 Speech-to-Speech", link: "#" },
-    { month: "2024-08", name: "🐶 Idefics 3", link: "#" },
-    { month: "2024-08", name: "🤏 Instant SmolLM", link: "#" },
-    { month: "2024-09", name: "🦾 LeRobot Video", link: "#" },
-    { month: "2024-09", name: "🎥 FineVideo", link: "#" },
-    { month: "2024-09", name: "📣 Speech-to-Speech Multilingual", link: "#" },
-    { month: "2024-10", name: "🔎 LLM Evaluation Guidebook", link: "#" },
-    { month: "2024-10", name: "🦾 LeRobot Hackathon", link: "#" },
-    { month: "2024-10", name: "🗺️ FineTasks", link: "#" },
-    { month: "2024-10", name: "⛅ Lighteval now Multilingual", link: "#" },
-    { month: "2024-11", name: "🤏 SmolLM2", link: "#" },
-    { month: "2024-11", name: "🤓 SmolVLM", link: "#" },
-    { month: "2024-12", name: "🔢 Number Tokenization Blog", link: "#" },
-    { month: "2024-12", name: "🥂 FineWeb 2", link: "#" },
-    { month: "2024-12", name: "📈 Scaling Test Time Compute", link: "#" },
-    { month: "2024-12", name: "🤖 Picotron", link: "#" },
-    { month: "2024-12", name: "📐 FineMath", link: "#" },
-    // 2025
-    { month: "2025-01", name: "🎊 New year kickoff", link: "#" },
-    { month: "2025-02", name: "🔮 Planning", link: "#" },
-    { month: "2025-03", name: "🎯 In progress", link: "#" },
-    { month: "2025-04", name: "🚀 Coming soon", link: "#" },
-    { month: "2025-05", name: "🌸 Spring updates", link: "#" },
-    { month: "2025-06", name: "📅 Mid-year goals", link: "#" }
+    { month: "2024-06", name: "🍷 FineWeb Report", link: "#" }
 ];
 
+debugLog(`📊 Loaded ${releaseData.length} data items`);
+
 function parseMonth(monthStr) {
     const [year, month] = monthStr.split('-');
     return {
         year: parseInt(year),
         month: parseInt(month),
-        monthName: new Date(year, month - 1).toLocaleString('en', { month: 'long' })
+        monthName: new Date(year, month - 1).toLocaleString('en', { month: 'short' }).toUpperCase()
     };
 }
 
@@ -227,102 +325,129 @@ function groupByMonth(data) {
     return grouped;
 }
 
-function groupByYear(data) {
-    const years = {};
-    data.forEach(item => {
-        const year = item.month.split('-')[0];
-        if (!years[year]) {
-            years[year] = {};
-        }
-        if (!years[year][item.month]) {
-            years[year][item.month] = [];
-        }
-        years[year][item.month].push(item);
-    });
-    return years;
-}
-
 function generateTimeline() {
-    console.log('Generating timeline...');
+    debugLog('🔨 generateTimeline() called');
     
     const container = document.getElementById('timeline-container');
     if (!container) {
-        console.error('Timeline container not found!');
+        debugLog('❌ ERROR: timeline-container not found!');
         return;
     }
-
-    const yearlyData = groupByYear(releaseData);
-    const years = Object.keys(yearlyData).sort();
     
-    let html = '<h2 style="text-align: center; margin-bottom: 30px; color: #1a1a1a;">HuggingFace Research Timeline</h2>';
+    debugLog('✅ Container found');
+    
+    const groupedData = groupByMonth(releaseData);
+    const months = Object.keys(groupedData).sort();
     
-    years.forEach(year => {
-        html += `<div class="timeline-year">`;
-        html += `<div class="year-header">${year}</div>`;
-        html += `<div class="timeline-grid">`;
+    debugLog(`📅 Processing months: ${months.join(', ')}`);
+    
+    // Group months into rows of 4
+    const rows = [];
+    for (let i = 0; i < months.length; i += 4) {
+        rows.push(months.slice(i, i + 4));
+    }
+    
+    debugLog(`📏 Created ${rows.length} rows`);
+    
+    container.innerHTML = '';
+    
+    rows.forEach((row, rowIndex) => {
+        debugLog(`🏗️ Building row ${rowIndex + 1}: [${row.join(', ')}]`);
+        
+        const isReverse = rowIndex % 2 === 1;
+        const rowDiv = document.createElement('div');
+        rowDiv.className = `timeline-row${isReverse ? ' reverse' : ''}`;
         
-        const yearData = yearlyData[year];
-        const months = Object.keys(yearData).sort();
+        const displayRow = isReverse ? [...row].reverse() : row;
         
-        months.forEach(monthKey => {
+        displayRow.forEach((monthKey, monthIndex) => {
             const monthData = parseMonth(monthKey);
-            const events = yearData[monthKey];
+            const events = groupedData[monthKey] || [];
             
-            html += `<div class="month-card">`;
-            html += `<div class="month-title">${monthData.monthName}</div>`;
+            debugLog(`  📦 Adding month ${monthKey} with ${events.length} events`);
             
+            const monthDiv = document.createElement('div');
+            const isYearMarker = monthData.month === 1;
+            monthDiv.className = `month-item${isYearMarker ? ' year-marker' : ''}`;
+
+            const arrowDiv = document.createElement('div');
+            arrowDiv.className = 'month-arrow';
+
+            const labelDiv = document.createElement('div');
+            labelDiv.className = 'month-label';
+            labelDiv.textContent = isYearMarker ? 
+                `${monthData.monthName} ${monthData.year}` : 
+                monthData.monthName;
+
+            const eventsDiv = document.createElement('div');
+            eventsDiv.className = 'events-list';
+
             events.forEach(event => {
+                const eventDiv = document.createElement('div');
+                eventDiv.className = 'event';
+                
                 if (event.link && event.link !== '#') {
-                    html += `<div class="event-item">
-                                <a href="${event.link}" class="event-link" target="_blank">
-                                    ${event.name}
-                                </a>
-                             </div>`;
+                    const link = document.createElement('a');
+                    link.href = event.link;
+                    link.target = '_blank';
+                    link.textContent = event.name;
+                    eventDiv.appendChild(link);
                 } else {
-                    html += `<div class="event-item">${event.name}</div>`;
+                    eventDiv.textContent = event.name;
                 }
+                
+                eventsDiv.appendChild(eventDiv);
             });
-            
-            html += `</div>`;
+
+            monthDiv.appendChild(arrowDiv);
+            monthDiv.appendChild(labelDiv);
+            monthDiv.appendChild(eventsDiv);
+            rowDiv.appendChild(monthDiv);
         });
-        
-        html += `</div></div>`;
+
+        // Add connector if not the last row
+        if (rowIndex < rows.length - 1) {
+            const connectorDiv = document.createElement('div');
+            connectorDiv.className = `vertical-connector ${isReverse ? 'connector-left' : 'connector-right'}`;
+            rowDiv.appendChild(connectorDiv);
+            debugLog(`  🔗 Added connector (${isReverse ? 'left' : 'right'})`);
+        }
+
+        container.appendChild(rowDiv);
     });
     
-    container.innerHTML = html;
-    console.log('Timeline generated successfully!');
+    debugLog('🎉 Snake timeline generated successfully!');
+    debugLog(`📊 Final stats: ${rows.length} rows, ${months.length} months total`);
 }
 
-// Multiple approaches to ensure it runs
-function initTimeline() {
-    // Try immediately
+// Multiple initialization approaches
+function initSnakeTimeline() {
+    debugLog('🚀 Initializing snake timeline...');
     generateTimeline();
-    
-    // Try after a short delay
-    setTimeout(generateTimeline, 100);
-    
-    // Try after a longer delay as backup
-    setTimeout(generateTimeline, 500);
 }
 
-// Run when DOM is ready
+// Try different timing approaches
+setTimeout(() => {
+    debugLog('⏰ Timeout 100ms trigger');
+    initSnakeTimeline();
+}, 100);
+
+setTimeout(() => {
+    debugLog('⏰ Timeout 500ms trigger');
+    if (document.getElementById('timeline-container').innerHTML.includes('Loading')) {
+        debugLog('🔄 Timeline still loading, trying again...');
+        initSnakeTimeline();
+    }
+}, 500);
+
 if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initTimeline);
+    debugLog('⏳ DOM still loading, waiting for DOMContentLoaded...');
+    document.addEventListener('DOMContentLoaded', () => {
+        debugLog('✅ DOMContentLoaded fired');
+        initSnakeTimeline();
+    });
 } else {
-    initTimeline();
+    debugLog('⚡ DOM already loaded');
+    initSnakeTimeline();
 }
 </script>
-
----
-
-## 🛠️ Tooling & Infrastructure
-
-The foundation of ML research is tooling and infrastructure and we are working on a range of tools such as [datatrove](www.github.com/huggingface/datatrove), [nanotron](www.github.com/huggingface/nanotron), [TRL](www.github.com/huggingface/trl), [LeRobot](www.github.com/huggingface/lerobot), and [lighteval](www.github.com/huggingface/lighteval).
-
-## 📑 Datasets
-
-High quality datasets are the powerhouse of LLMs and require special care and skills to build. We focus on building high-quality datasets such as [no-robots](https://huggingface.co/datasets/HuggingFaceH4/no_robots), [FineWeb](https://huggingface.co/datasets/HuggingFaceFW/fineweb), [The Stack](https://huggingface.co/datasets/bigcode/the-stack-v2), and [FineVideo](https://huggingface.co/datasets/HuggingFaceFV/finevideo).
-
-## 🤖 Open Models
-
-The datatsets and training recipes of most state-of-the-art models are not released. We build cutting-edge models and release the full training pipeline as well fostering more innovation and reproducibility, such as [Zephyr](https://huggingface.co/HuggingFaceH4/zephyr-7b-beta), [StarCoder2](https://huggingface.co/bigcode/starcoder2-15b), or [SmolLM2](https://huggingface.co/HuggingFaceTB/SmolLM2-1.7B-Instruct).