|
<!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%; |
|
} |
|
.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"> |
|
|
|
</div> |
|
|
|
<div class="modal"> |
|
<div class="modal-content"> |
|
<button class="close-button">×</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> |
|
|
