Spaces:

huggingface
/

open-source-ai-year-in-review-2024

Running

open-source-ai-year-in-review-2024

File size: 21,495 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🤗 Open-source AI: year in review 2024</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            background: #f8f9fa;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }

        h1 {
        color: #1a1a1a;
            margin-bottom: 20px;
        }

        .intro {
            max-width: 800px;
            margin: 0 auto 40px;
            text-align: center;
            line-height: 1.6;
            color: #374151;
        }

        .calendar {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .card {
            aspect-ratio: 1;
            background: #6B7280;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            font-weight: bold;
            color: white;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .card.active {
            background: #FFD21E;
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .card.opened {
            background: #FF9D00;
        }

        .card-content {
            display: none;
            padding: 20px;
            text-align: center;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: white;
            padding: 40px;
            border-radius: 12px;
            max-width: 800px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }

        .close-button {
            position: absolute;
            top: 20px;
            right: 20px;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
        }
        .responsive-iframe-container {
            position: relative;
            width: 100%;
            height: 500px; /* Default height */
            transition: all 0.3s ease;
        }
        .responsive-iframe-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        .browser-fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            background: white;
        }
    </style>
</head>
<body>
    <div class="intro">
        <h1>🤗 Open-source AI: year in review 2024</h1>
        <p>We're excited to share what's been happening in AI this year—with a twist! In collaboration with <a href="https://aiworld.eu" target="_blank">aiworld.eu</a>, starting December 2, we'll release fresh content daily to share insights on what happened in open-source AI in 2024. Like the space to be notified when we release the next data! <img src="logos/huggingface_logo-noborder.svg" width="20"> <img src="logos/aiworld.svg" width="20"></p>
    </div>

    <div class="calendar">
        <!-- Cards will be generated here -->
    </div>

    <div class="modal">
        <div class="modal-content">
            <button class="close-button">&times;</button>
            <div class="modal-body"></div>
        </div>
    </div>

    <script>
        const calendar = document.querySelector('.calendar');
        const modal = document.querySelector('.modal');
        const modalContent = document.querySelector('.modal-body');
        const closeButton = document.querySelector('.close-button');

        // Add the cardContents object here
        const cardContents = {
    1: `
        <h2>Day 1 - Six Predictions for AI in 2025 (and a review of how my 2024 predictions turned out)</h2>
        <div style="display: flex; align-items: center; margin-bottom: 20px;">
            <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/1583857146757-5e67bdd61009063689407479.jpeg" style="width: 60px; height: 60px; border-radius: 50%; margin-right: 15px;">
            <div>
                <strong><a href="https://huggingface.co/clem" style="color: inherit; text-decoration: underline;">Clément Delangue</a></strong><br>
                <em>Hugging Face CEO</em>
            </div>
        </div>
            <h3>Predictions for 2025</h3>
            <ol>
                <li>There will be the first major public protest related to AI</li>
                <li>A big company will see its market cap divided by two or more because of AI</li>
                <li>At least 100,000 personal AI robots will be pre-ordered</li>
                <li>China will start to lead the AI race (as a consequence of leading the open-source AI race)</li>
                <li>There will be big breakthroughs in AI for biology and chemistry</li>
                <li>We will begin to see the economic and employment growth potential of AI, with 15M AI builders on Hugging Face</li>
            </ol>

            <h3>2024 Predictions Review</h3>
            <ul>
                <li>A hyped AI company will go bankrupt or get acquired for a ridiculously low price<br>
                ✅ (Inflexion, AdeptAI,...)</li>
                <li>Open-source LLMs will reach the level of the best closed-source LLMs<br>
                ✅ with QwQ and dozens of others</li>
                <li>Big breakthroughs in AI for video, time-series, biology and chemistry<br>
                ✅ for video 🔴for time-series, biology and chemistry</li>
                <li>We will talk much more about the cost (monetary and environmental) of AI<br>
                ✅Monetary 🔴Environmental (😢)</li>
                <li>A popular media will be mostly AI-generated<br>
                ✅ with NotebookLM by Google</li>
                <li>10 millions AI builders on Hugging Face leading to no increase of unemployment<br>
                🔜currently 7M of AI builders on Hugging Face</li>
            </ul>

            <p style="margin-top: 30px;"><i>Join the conversation about Clem's predictions for 2025:</i></p>
            <ul style="list-style-type: none; padding-left: 0;">
                <li>✦ <a href="https://huggingface.co/posts/clem/703679306559358" style="color: inherit; text-decoration: underline;" target="_blank">Hugging Face</a></li>
                <li>✦ <a href="https://x.com/ClementDelangue/status/1863576648253091934" style="color: inherit; text-decoration: underline;" target="_blank">X</a></li>
                <li>✦ <a href="https://www.linkedin.com/in/clementdelangue/" style="color: inherit; text-decoration: underline;" target="_blank">LinkedIn</a></li>
                <li>✦ <a href="https://bsky.app/profile/clem.hf.co/post/3lcdceiv7vk2h" style="color: inherit; text-decoration: underline;"  target="_blank">Bluesky</a></li>
            </ul>
    `,
    2: `
        <h2>Most liked and downloaded models, from 2022 to today</h2>
        <p>Explore the community's favourite models, ranging from tasks, likes to downloads, since 2022. What we're seeing: smol models are on the rise.📈👀</p>
        <p><em style="font-size: 0.8em;">💡Tip: Click the small square icon in the top right corner to access full screen view!</em></p>
        <div class="responsive-iframe-container">
            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
            <iframe src="https://aiworld.eu/embed/model/model/treemap" allowfullscreen></iframe>
        </div>
    `,
    3: `
        <h2>Fast & Furious model releases</h2>
        <p>This race chart shows cumulative likes for models over the first 48 weeks of 2024, with Meta (US), Stability (UK) and Black Forest Labs (GER) leading the pack.</p>
        <div class="responsive-iframe-container">
            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
            <iframe src="https://aiworld.eu/embed/model/author/racechart" allowfullscreen></iframe>
        </div>
    `,
    4: `
        <h2>Zero to One (Million Models)</h2>
        <p>This exponential growth chart tracks the Hugging Face community's journey from just a few thousand models in 2022 to surpassing the million-model milestone today.</p>
        <div class="responsive-iframe-container">
            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
            <iframe src="https://aiworld.eu/embed/model/tag/stacked-model-count-other" allowfullscreen></iframe>
        </div>
    `,
    5: `
        <h2>The HF Network: What your likes say about you</h2>
        <p>Network connections between users’ favourite models.</p>
        <div class="responsive-iframe-container">
            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
            <iframe src="https://aiworld.eu/embed/model/model/network-small" allowfullscreen></iframe>
        </div>    
        `,
    6: `
        <h2>33 Months of Models, per Task</h2>
        <p>Over the last 33 months, more than 1.1M models have been created for 53 specialized tasks. Watch until the end to see which task reigns supreme. 👀 <em>(Hint: this task makes up nearly half the models on the Hub.)</em></p>
        <div class="responsive-iframe-container">
            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
            <iframe src="https://aiworld.eu/embed/model/pipeline/racechart2" allowfullscreen></iframe>
        </div>         
        `,
    7: `
        <h2>The global top 500 model creators on the Hub</h2>
        <div class="responsive-iframe-container">
            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
            <iframe src="https://aiworld.eu/embed/map_country_data" allowfullscreen></iframe>
        </div>
        `,
    8: `
        <h2>Average daily downloads for the top 100 trending models for Dec 9 2024</h2>
        <div class="responsive-iframe-container">
            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
            <iframe src="https://aiworld.eu/embed/model/model/treemap-top-100-trending" allowfullscreen></iframe>
        </div>
        `,
    9: `
        <h2>NeurIPS Noel: Unwrapping the Keywords of AI's Holiday Spirit</h2>
        <p>Analyzing keywords from 4,495 papers accepted at NeurIPS 2024 and how the top 40 words co-occur within the same papers.</p>
        <div class="responsive-iframe-container">
            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
            <iframe src="https://aiworld.eu/embed/model/model/keywords-neurips" allowfullscreen></iframe>
        </div>    
        `,
    10: `
        <h2>The Great AI Bake-Off: Which Field is Rising?</h2>
        <p>This stacked chart shows the evolution of the number of research papers on Hugging Face</p>
        <div class="responsive-iframe-container">
            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
            <iframe src="https://aiworld.eu/embed/api/paper/hf_papers_stacked" allowfullscreen></iframe>
        </div> 

    `,
    11: `
        <h2>Paper Trail: Top upvoted papers on the Hub</h2>
        <p>This table presents the top most upvoted papers on HF, along with the top 20 presented at this year's NeurIPS.</p>
        <div class="responsive-iframe-container">
            <button onclick="toggleBrowserFullscreen(this.parentElement)" style="position: absolute; top: 10px; right: 10px; z-index: 10; padding: 8px; background: rgba(0,0,0,0.6); color: white; border: none; border-radius: 4px; cursor: pointer;">⛶</button>
            <iframe src="https://aiworld.eu/embed/api/paper/top-20-hf-papers-at-neurips" allowfullscreen></iframe>
        </div> 
    `,
    12: `
        <h2>Day 12</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `,
    13: `
        <h2>Day 13</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `,
    14: `
        <h2>Day 14</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `,
    15: `
        <h2>Day 15</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `,
    16: `
        <h2>Day 16</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `,
    17: `
        <h2>Day 17</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `,
    18: `
        <h2>Day 18</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `,
    19: `
        <h2>Day 19</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `,
    20: `
        <h2>Day 20</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `,
    21: `
        <h2>Day 21</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `,
    22: `
        <h2>Day 22</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `,
    23: `
        <h2>Day 23</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `,
    24: `
        <h2>Day 24</h2>
        <p>Wondering what tomorrow’s visualization will be? Like the space to get notified when we reveal it 🤗</p>
        <img src="/images/day3-teaser.png" style="width: 100%; margin: 20px 0;">
    `
};

        // Update the getCardLink function
        function getCardLink(day) {
            const rootUrl = "https://huggingface.co/spaces/huggingface/open-source-ai-year-in-review-2024";
            return `${rootUrl}?day=${day}" target="_blank`;
        }

        // Add this object before the card creation loop to define custom text labels
        const cardLabels = {
            1: "🔮<br>Clem's2025 predictions",
            2: "❤️<br>Most liked & downloaded models",
            3: "🏎️<br>Fast & Furious model releases",
            4: "🚀<br>Zero to One (Million Models)",
            5: "🤗<br>What your likes say about you?",
            6: "🏷️<br>Tasks on tasks on tasks",
            7: "🌍<br>Global top 500 model creators",
            8: "📈<br>Average daily downloads",
            9: "🎄<br>NeurIPS Noel",
            10: "🎂<br>The Great AI Bake-Off",
            11: "📄<br>Top upvoted papers on the Hub"
            // Add more custom labels as needed
            // 3: "Custom Text",
            // 4: "Another Label",
        };

        // Modify the card creation loop
        for (let i = 1; i <= 24; i++) {
            const card = document.createElement('div');
            card.className = 'card';
            card.dataset.day = i;
            card.dataset.link = getCardLink(i);

            // Define a condition to use a thumbnail for specific cards
            const useThumbnail = [].includes(i);
            
            // Get custom label if it exists, otherwise use the number
            const cardContent = useThumbnail 
                ? `<img src="images/${i}.png" style="width: 75%; height: 75%; object-fit: cover; border-radius: 12px;">`
                : `<div style="text-align: center; margin: 0 20%;">${cardLabels[i] || i}</div>`;

            card.innerHTML = `
                ${cardContent}
                <div class="card-content">
                    ${cardContents[i]}
                    <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee;">
                        <p><em style="font-size: 0.8em;">💡Tip: Click the small square icon in the top right corner to access full screen view!</em></p>
                        <p style="font-size: 0.8em;">🔗 Share this card:</p><input type="text" value="${getCardLink(i)}" readonly style="width: 100%; padding: 8px; margin: px 0; border: 1px solid #ddd; border-radius: 4px; background: #f5f5f5; font-size: 0.8em;" onclick="this.select(); document.execCommand('copy');">
                    </div>
                </div>
            `;
            calendar.appendChild(card);
        }

        // Handle card clicks
        const cards = document.querySelectorAll('.card');
        const activeDays = [1,2,3,4,5,6,7,8,9,10,11]; // Add the day numbers you want to highlight

        cards.forEach(card => {
            const day = parseInt(card.dataset.day);
            
            // Only add active class to specific cards
            if (activeDays.includes(day)) {
                card.classList.add('active');
            }
            
            // Keep click functionality for all cards
            card.addEventListener('click', () => {
                card.classList.add('opened');
                modalContent.innerHTML = card.querySelector('.card-content').innerHTML;
                modal.style.display = 'flex';
            });
        });

        // Close modal
        closeButton.addEventListener('click', () => {
            modal.style.display = 'none';
        });

        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                modal.style.display = 'none';
            }
        });

        // Add fullscreen function
        function toggleBrowserFullscreen(container) {
            container.classList.toggle('browser-fullscreen');
        }

        // Add this code after your existing event listeners
        // Handle direct links to cards
        window.addEventListener('load', () => {
            const params = new URLSearchParams(window.location.search);
            const day = params.get('day');
            if (day) {
                const card = document.querySelector(`[data-day="${day}"]`);
                if (card) {
                    card.click(); // Automatically open the modal for the linked card
                }
            }
        });
    </script>
</body>
</html>