---
language: code
tags:
- code
- gpt2
- generation
datasets:
- lvwerra/codeparrot-clean-train
widget:
- text: from transformer import
  example_title: Transformers
- text: "def print_hello_world():\n\t"
  example_title: Hello World!
- text: 'def get_file_size(filepath):'
  example_title: File size
- text: import numpy as
  example_title: Numpy
model-index:
- name: codeparrot
  results:
  - task:
      name: Code Generation
      type: code-generation
    dataset:
      name: HumanEval
      type: openai_humaneval
    metrics:
    - name: pass@1
      type: code_eval
      value: 3.14
    - name: pass@10
      type: code_eval
      value: 8.69
    - name: pass@100
      type: code_eval
      value: 17.88
  - dataset:
      name: HumanEval!
      type: openai_humaneval
    metrics:
    - name: pass@1
      type: code_eval
      value: 3.17
    task:
      name: Code Generation
      type: code-generation
---

# Science Timeline

The org card can't display JS HTML embedded in the markdown. So the workaround is to render it in a model card (here) and export the rendered HTML. Steps:

- Edit the `const releases` section in embedded HTML here with the new release data
- Export the static HTML with the buttons below
- If you are nice, prettify the resulting HTML
- Copy-paste the result into the Org [README](https://huggingface.co/spaces/science/README/blob/main/README.md)
- Tada!

<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.timeline-container { max-width: 1000px; margin: 20px auto; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.timeline-row { display: flex; margin-bottom: 20px; min-height: 120px; position: relative; }
.timeline-row.reverse { flex-direction: row-reverse; }
.month-box { flex: 1; padding: 10px; text-align: center; position: relative; }
.month-arrow { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #666; margin: 0 auto 8px; }
.reverse .month-arrow { border-left: none; border-right: 12px solid #666; }
.month-title { font-weight: 600; font-size: 12px; color: #666; text-transform: uppercase; margin-bottom: 8px; }
.event-list { font-size: 11px; color: #333; }
.event-item { margin: 3px 0; padding: 2px 4px; background: #f8f9fa; border-radius: 3px; }
.timeline-row::before { content: ''; position: absolute; top: 12px; left: 0; right: 0; height: 1px; background: #ddd; z-index: 1; }
.month-box { z-index: 2; background: white; }
</style>

<!-- ADD THESE BUTTONS WHEREVER YOU WANT THEM -->
<div style="margin: 20px 0;">
    <button onclick="exportStaticHTML()" style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; margin-right: 10px;">📋 Export Static HTML</button>
    <button onclick="copyToClipboard()" style="background: #28a745; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer;">📋 Copy to Clipboard</button>
</div>

<div id="static-output" style="display: none;"></div>

<div id="snake-timeline-container" style="max-width: 1000px; margin: 20px auto; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
Loading timeline...
</div>

<script>
// Release data with links
const releases = [
    { month: "2024-01", name: "🔥 Warming up", link: null },
    { month: "2024-02", name: "⚙️ Nanotron Release", link: "https://github.com/huggingface/nanotron/" },
    { month: "2024-02", name: "⛅ Lighteval Release", link: "https://github.com/huggingface/lighteval/" },
    { month: "2024-02", name: "⚙️ Datatrove Release", link: "https://github.com/huggingface/datatrove/" },
    { month: "2024-02", name: "⭐️ The Stack v2", link: "https://huggingface.co/datasets/bigcode/the-stack-v2" },
    { month: "2024-02", name: "⭐️ StarCoder2", link: "https://huggingface.co/bigcode/starcoder2-15b" },
    { month: "2024-03", name: "🪁 Zephyr Gemma", link: "https://huggingface.co/HuggingFaceH4/zephyr-7b-gemma-v0.1" },
    { month: "2024-03", name: "🪐 Cosmopedia", link: "https://huggingface.co/datasets/HuggingFaceTB/cosmopedia" },
    { month: "2024-04", name: "🍷 FineWeb", link: "https://huggingface.co/datasets/HuggingFaceFW/fineweb" },
    { month: "2024-04", name: "🕵️ JAT Agent", link: "https://huggingface.co/blog/jat" },
    { month: "2024-04", name: "🪁 Zephyr Mixtral", link: "HuggingFaceH4/zephyr-orpo-141b-A35b-v0.1" },
    { month: "2024-04", name: "🐶 Idefics 2", link: "https://huggingface.co/HuggingFaceM4/idefics2-8bb" },
    { month: "2024-04", name: "🏆 Community Leaderboards", link: "https://huggingface.co/blog/leaderboard-medicalllm" },
    { month: "2024-05", name: "🦾 LeRobot Release", link: "https://github.com/huggingface/lerobot" },
    { month: "2024-05", name: "📈 WSD Analysis", link: "https://arxiv.org/abs/2405.18392" },
    { month: "2024-06", name: "🍷 FineWeb Report", link: "https://huggingface.co/spaces/HuggingFaceFW/blogpost-fineweb-v1f" },
    { month: "2024-06", name: "🍷 FineWeb-Edu", link: "https://huggingface.co/datasets/HuggingFaceFW/fineweb-edu" },
    { month: "2024-06", name: "🌺 Florence 2 Blog", link: "https://huggingface.co/blog/finetune-florence2" },
    { month: "2024-06", name: "🏆 Open LLM Leaderboard v2", link: "https://huggingface.co/spaces/open-llm-leaderboard/blog" },
    { month: "2024-06", name: "👩‍🏫 Stanford CS25", link: "https://www.youtube.com/watch?v=jm2hyJLFfN8" },
    { month: "2024-07", name: "🛟 Ring attention", link: "https://x.com/Haojun_Zhao14/status/1815419356408336738" },
    { month: "2024-07", name: "🦾 LeRobot TeleOps", link: "https://x.com/RemiCadene/status/1805583409382932620" },
    { month: "2024-07", name: "🥇 Win AIMO", link: "https://x.com/_lewtun/status/1808898804822720769" },
    { month: "2024-07", name: "🐶 Docmatix", link: "https://huggingface.co/blog/docmatix" },
    { month: "2024-07", name: "🤏 SmolLM", link: "https://huggingface.co/blog/smollm" },
    { month: "2024-08", name: "🦾 LeRobot Tutorial", link: "https://github.com/huggingface/lerobot/blob/main/examples/7_get_started_with_real_robot.md" },
    { month: "2024-08", name: "📣 Speech-to-Speech", link: "https://github.com/huggingface/speech-to-speech" },
    { month: "2024-08", name: "🐶 Idefics 3", link: "https://huggingface.co/HuggingFaceM4/Idefics3-8B-Llama3" },
    { month: "2024-08", name: "🤏 Instant SmolLM", link: "https://huggingface.co/spaces/HuggingFaceTB/instant-smollm" },
    { month: "2024-09", name: "🦾 LeRobot Video", link: "https://x.com/alibert_s/status/1828760527730082024" },
    { month: "2024-09", name: "🎥 FineVideo", link: "https://huggingface.co/spaces/HuggingFaceFV/FineVideo-Explorer" },
    { month: "2024-09", name: "📣 Speech-to-Speech Multilingual", link: "https://x.com/andi_marafioti/status/1830862304906268725" },
    { month: "2024-10", name: "🔎 LLM Evaluation Guidebook", link: "https://github.com/huggingface/evaluation-guidebook" },
    { month: "2024-10", name: "🦾 LeRobot Hackathon", link: "https://x.com/Thom_Wolf/status/1851557379294286176" },
    { month: "2024-10", name: "🗺️ FineTasks", link: "https://huggingface.co/spaces/HuggingFaceFW/blogpost-fine-tasks" },
    { month: "2024-10", name: "⛅ Lighteval now Multilingual", link: "https://x.com/nathanhabib1011/status/1849160216438587466" },
    { month: "2024-11", name: "🤏 SmolLM2", link: "https://huggingface.co/HuggingFaceTB/SmolLM2-1.7B-Instruct" },
    { month: "2024-11", name: "🤓 SmolVLM", link: "https://huggingface.co/HuggingFaceTB/SmolVLM-Instruct" },
    { month: "2024-12", name: "🔢 Number Tokenization Blog", link: "https://huggingface.co/spaces/huggingface/number-tokenization-blog" },
    { month: "2024-12", name: "🥂 FineWeb 2", link: "https://huggingface.co/datasets/HuggingFaceFW/fineweb-2" },
    { month: "2024-12", name: "📈 Scaling Test Time Compute", link: "https://huggingface.co/spaces/HuggingFaceH4/blogpost-scaling-test-time-compute" },
    { month: "2024-12", name: "🤖 Picotron", link: "https://github.com/huggingface/picotron" },
    { month: "2024-12", name: "📐 FineMath", link: "https://huggingface.co/datasets/HuggingFaceTB/finemath" },
    // 2025
    { month: "2025-01", name: "🧮 Math Verify", link: "https://x.com/HKydlicek/status/1881734376696041659" },
    { month: "2025-01", name: "🐳 Open-R1", link: "https://github.com/huggingface/open-r1" },
    { month: "2025-01", name: "🛠️ SmolAgents", link: "https://huggingface.co/docs/smolagents" },
    { month: "2025-02", name: "🎥 SmolVLM2", link: "https://huggingface.co/blog/smolvlm2" },
    { month: "2025-02", name: "🪐 Ultra-Scale Playbook", link: "https://huggingface.co/spaces/nanotron/ultrascale-playbook" },
    { month: "2025-02", name: "🐋 OpenR1-Math-220k", link: "https://huggingface.co/datasets/open-r1/OpenR1-Math-220k" },
    { month: "2025-02", name: "🕺 DABstep", link: "https://huggingface.co/blog/dabstep" },
    { month: "2025-02", name: "🔎 Open Deep Research", link: "https://huggingface.co/blog/open-deep-research" },
    { month: "2025-02", name: "📝 SmolLM2 report", link: "https://huggingface.co/papers/2502.02737" },
    { month: "2025-02", name: "🤖 Pi0 Integration", link: "https://x.com/RemiCadene/status/1886823939856589296" },
    { month: "2025-03", name: "📄 SmolDocling", link: "https://huggingface.co/ds4sd/SmolDocling-256M-preview" },
    { month: "2025-03", name: "🧑‍🎓 DCLM-edu", link: "https://huggingface.co/datasets/HuggingFaceTB/dclm-edu" },
    { month: "2025-03", name: "💾 Stack-edu", link: "https://huggingface.co/datasets/HuggingFaceTB/stack-edu" },
    { month: "2025-03", name: "🏅 Olympic Coder", link: "https://huggingface.co/open-r1/OlympicCoder-7B" },
    { month: "2025-03", name: "🌅 Leaderboard Sunset", link: "https://x.com/clefourrier/status/1900280339613860057" },
    { month: "2025-03", name: "🔎 Find a Leaderboard", link: "https://huggingface.co/spaces/OpenEvals/find-a-leaderboard" },
    { month: "2025-03", name: "🚗 LeKiwi", link: "https://x.com/RemiCadene/status/1896535455325442390" },
    { month: "2025-04", name: "🪑 YourBench", link: "https://huggingface.co/spaces/yourbench/demo" },
    { month: "2025-04", name: "🦾 SO-101", link: "https://x.com/RemiCadene/status/1916751964807057515" },
    { month: "2025-04", name: "🧑‍🎓 DeepLearning AI Agent Course", link: "https://x.com/DeepLearningAI/status/1915081924302839984" },
    { month: "2025-05", name: "🤏 nanoVLM", link: "https://github.com/huggingface/nanoVLM" },
    { month: "2025-05", name: "📝 OpenR1-Codeforces", link: "https://huggingface.co/datasets/open-r1/codeforces" },
    { month: "2025-05", name: "🧠 Mixture of Thoughts", link: "https://huggingface.co/datasets/open-r1/Mixture-of-Thoughts" },
    { month: "2025-05", name: "💻 Open Computer Agent", link: "https://huggingface.co/spaces/smolagents/computer-agent" },
    { month: "2025-05", name: "🐣 Reachy Mini", link: "https://x.com/Thom_Wolf/status/1928103448970473962" },
    { month: "2025-06", name: "🤖 LeRobot Hackathon", link: "https://x.com/RemiCadene/status/1917118988959813699" },
    { month: "2025-06", name: "🤖 SmolVLA", link: "https://huggingface.co/collections/lerobot/smolvla-683c072ec3ef6ab0fcb87e60" },
    { month: "2025-06", name: "🖥️ ScreenSuite", link: "https://github.com/huggingface/screensuite" }
];


function createSnakeTimeline() {
    // Group by month
    const grouped = {};
    releases.forEach(item => {
        if (!grouped[item.month]) grouped[item.month] = [];
        grouped[item.month].push(item);
    });
    
    const months = Object.keys(grouped).sort().reverse(); // Reverse to show latest first
    
    // Create rows of 4 months each
    const rows = [];
    for (let i = 0; i < months.length; i += 4) {
        rows.push(months.slice(i, i + 4));
    }
    
    let html = '<div style="font-family: -apple-system, BlinkMacSystemFont, \'Segoe UI\', sans-serif; position: relative;">';
    
    rows.forEach((row, rowIndex) => {
        const isReverse = rowIndex % 2 === 1;
        // For reverse rows, we need to reverse the month order, not the display order
        const displayRow = isReverse ? [...row].reverse() : row;
        const isLastRow = rowIndex === rows.length - 1;
        
        // Row container - the flex direction should always be normal
        html += `<div style="display: flex; margin-bottom: 32px; min-height: 140px; position: relative;">`;
        
        // Horizontal connecting line (aligned with arrows)
        html += `<div style="position: absolute; top: 8px; left: 0; right: 0; height: 1px; background: #e0e0e0; z-index: 1;"></div>`;
        
        displayRow.forEach((monthKey, monthIndex) => {
            const [year, month] = monthKey.split('-');
            const monthName = new Date(year, month - 1).toLocaleString('en', { month: 'short' }).toUpperCase();
            const events = grouped[monthKey] || [];
            const isYearMarker = month === '01';
            
            // Month container
            html += `<div style="flex: 1; padding: 0 15px; text-align: center; position: relative; z-index: 2;">`;
            
            // Arrow (positioned to align with horizontal line) - flipped for reverse chronological order
            const arrowStyle = isReverse 
                ? 'width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #666; margin: 2px auto 12px;'
                : 'width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 10px solid #666; margin: 2px auto 12px;';
            
            html += `<div style="${arrowStyle}"></div>`;
            
            // Month title
            const titleStyle = isYearMarker 
                ? 'font-weight: 600; font-size: 14px; color: #1a1a1a; background: #f0f0f0; padding: 4px 12px; border-radius: 12px; margin-bottom: 16px; display: inline-block;'
                : 'font-weight: 500; font-size: 13px; color: #666; text-transform: uppercase; margin-bottom: 16px; letter-spacing: 0.5px;';
            
            const titleText = isYearMarker ? `${monthName} ${year}` : monthName;
            html += `<div style="${titleStyle}">${titleText}</div>`;
            
            // Events
            html += `<div style="font-size: 12px; color: #4a4a4a; max-width: 180px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px;">`;
            events.forEach(event => {
                if (event.link && event.link !== '#') {
                    // Clickable event with link
                    html += `<a href="${event.link}" target="_blank" style="text-decoration: none; color: inherit;">
                                <div style="padding: 6px 8px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; line-height: 1.4; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.05); cursor: pointer;" onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 2px 4px rgba(0,0,0,0.1)'; this.style.background='#e3f2fd'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 1px 2px rgba(0,0,0,0.05)'; this.style.background='#f8f9fa'">${event.name}</div>
                             </a>`;
                } else {
                    // Non-clickable event
                    html += `<div style="padding: 6px 8px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; line-height: 1.4; color: #6c757d;">${event.name}</div>`;
                }
            });
            html += `</div>`;
            
            html += `</div>`; // Close month container
        });
        
        // Add vertical connector if not the last row
        if (!isLastRow) {
            const connectorStyle = isReverse 
                ? 'position: absolute; width: 1px; height: calc(100% + 32px); background: #e0e0e0; top: 8px; left: 0; z-index: 1;'
                : 'position: absolute; width: 1px; height: calc(100% + 32px); background: #e0e0e0; top: 8px; right: 0; z-index: 1;';
            
            html += `<div style="${connectorStyle}"></div>`;
        }
        
        html += `</div>`; // Close row
    });
    
    html += '</div>';
    
    // Insert the timeline
    const container = document.getElementById('snake-timeline-container');
    if (container) {
        container.innerHTML = html;
    }
    return html;
}

// Export functions - ADD THESE TO YOUR EXISTING SCRIPT
function exportStaticHTML() {
    const staticHTML = createSnakeTimeline();
    const output = document.getElementById('static-output');
    if (!output) {
        // Create output div if it doesn't exist
        const outputDiv = document.createElement('div');
        outputDiv.id = 'static-output';
        outputDiv.style.cssText = 'background: #f8f9fa; border: 1px solid #ddd; padding: 15px; border-radius: 6px; font-family: monospace; font-size: 12px; max-height: 300px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; margin-top: 15px;';
        document.body.appendChild(outputDiv);
    }
    output.style.display = 'block';
    output.textContent = `<div id="snake-timeline-container" style="max-width: 1000px; margin: 20px auto; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
${staticHTML}
</div>`;
}

function copyToClipboard() {
    const output = document.getElementById('static-output');
    if (output && output.textContent) {
        navigator.clipboard.writeText(output.textContent).then(() => {
            alert('✅ Static HTML copied to clipboard!');
        });
    } else {
        alert('⚠️ Please export first!');
    }
}

// Run with multiple fallbacks
setTimeout(createSnakeTimeline, 100);
setTimeout(createSnakeTimeline, 500);
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', createSnakeTimeline);
} else {
    createSnakeTimeline();
}
</script>