Spaces:

huggingface
/

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

Running

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

File size: 15,513 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%;
            padding-top: 56.25%; /* 16:9 aspect ratio */
        }
        .responsive-iframe-container iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border: 0;
        }
    </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="toggleFullscreen(this.nextElementSibling)" 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 in relation to model releases on the HF Hub 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="toggleFullscreen(this.nextElementSibling)" 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>Day 4</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;">
    `,
    5: `
        <h2>Day 5</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    6: `
        <h2>Day 6</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    7: `
        <h2>Day 7</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    8: `
        <h2>Day 8</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    9: `
        <h2>Day 9</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    10: `
        <h2>Day 10</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    11: `
        <h2>Day 11</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    12: `
        <h2>Day 12</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    13: `
        <h2>Day 13</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    14: `
        <h2>Day 14</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    15: `
        <h2>Day 15</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    16: `
        <h2>Day 16</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    17: `
        <h2>Day 17</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    18: `
        <h2>Day 18</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    19: `
        <h2>Day 19</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    20: `
        <h2>Day 20</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    21: `
        <h2>Day 21</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    22: `
        <h2>Day 22</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    23: `
        <h2>Day 23</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    24: `
        <h2>Day 24</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `
};

        // Add this function before the card creation loop
        function getCardLink(day) {
            const url = new URL(window.location.href);
            url.searchParams.set('day', day);
            return url.toString();
        }

        // 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",
            // 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: <a href="${getCardLink(i)}" onclick="event.stopPropagation();">${getCardLink(i)}</a></p>
                    </div>
                </div>
            `;
            calendar.appendChild(card);
        }

        // Handle card clicks
        const cards = document.querySelectorAll('.card');
        const activeDays = [1,2,3]; // 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 toggleFullscreen(iframe) {
            if (iframe.requestFullscreen) {
                iframe.requestFullscreen();
            } else if (iframe.webkitRequestFullscreen) { /* Safari */
                iframe.webkitRequestFullscreen();
            } else if (iframe.msRequestFullscreen) { /* IE11 */
                iframe.msRequestFullscreen();
            }
        }

        // 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>