Spaces:

huggingface
/

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

Running

App Files Files Community

fdaudens commited on Dec 2, 2024

Commit

0d4f2e7

verified ·

1 Parent(s): 953b5c2

Update index.html

Browse files

Files changed (1) hide show

index.html +342 -18

index.html CHANGED Viewed

@@ -1,19 +1,343 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>A look back before 2025</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 aiworld.eu, starting December 2, we'll release fresh content daily to share insights on what happened in open-source AI in 2024. Follow along to stay on top of the biggest AI trends! <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>Come back tomorrow for more data 🤗</p>
+    `,
+    3: `
+        <h2>Day 3</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    4: `
+        <h2>Day 4</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    5: `
+        <h2>Day 5</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    6: `
+        <h2>Day 6</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    7: `
+        <h2>Day 7</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    8: `
+        <h2>Day 8</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    9: `
+        <h2>Day 9</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    10: `
+        <h2>Day 10</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    11: `
+        <h2>Day 11</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    12: `
+        <h2>Day 12</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    13: `
+        <h2>Day 13</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    14: `
+        <h2>Day 14</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    15: `
+        <h2>Day 15</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    16: `
+        <h2>Day 16</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    17: `
+        <h2>Day 17</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    18: `
+        <h2>Day 18</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    19: `
+        <h2>Day 19</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    20: `
+        <h2>Day 20</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    21: `
+        <h2>Day 21</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    22: `
+        <h2>Day 22</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    23: `
+        <h2>Day 23</h2>
+        <p>Come back tomorrow for more data 🤗</p>
+    `,
+    24: `
+        <h2>Day 24</h2>
+        <p>Come back tomorrow for more 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>