Spaces:

huggingface
/

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

Running

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

File size: 12,155 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">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;">Hugging Face</a></li>
                <li>✦ <a href="https://x.com/ClementDelangue/status/1863576648253091934" style="color: inherit; text-decoration: underline;">X</a></li>
                <li>✦ <a href="https://www.linkedin.com/in/clementdelangue/" style="color: inherit; text-decoration: underline;">LinkedIn</a></li>
                <li>✦ <a href="https://bsky.app/profile/clem.hf.co/post/3lcdceiv7vk2h" style="color: inherit; text-decoration: underline;">Bluesky</a></li>
            </ul>
    `,
    2: `
        <h2>Day 2</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    3: `
        <h2>Day 3</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    4: `
        <h2>Day 4</h2>
        <p>Like the space to be notified when we release the next data 🤗</p>
    `,
    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>
    `
};

        // Create cards using the cardContents
        for (let i = 1; i <= 24; i++) {
            const card = document.createElement('div');
            card.className = 'card';
            card.dataset.day = i;
            card.innerHTML = `
                ${i}
                <div class="card-content">
                    ${cardContents[i]}
                </div>
            `;
            calendar.appendChild(card);
        }

        // // Handle card clicks
        // const cards = document.querySelectorAll('.card');
        // const currentDate = new Date();
        // const currentDay = currentDate.getDate();
        // const isDecember = currentDate.getMonth() === 11;

        // cards.forEach(card => {
        //     const day = parseInt(card.dataset.day);
        //     card.classList.add('active');
            
        //     card.addEventListener('click', () => {
        //         card.classList.add('opened');
        //         modalContent.innerHTML = card.querySelector('.card-content').innerHTML;
        //         modal.style.display = 'flex';
        //     });
        // });

        // Handle card clicks
        const cards = document.querySelectorAll('.card');
        const activeDays = [1]; // 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';
            }
        });
    </script>
</body>
</html>