|
<!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; |
|
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"> |
|
|
|
</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;" 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 20 most upvoted papers on HF in 2024 that are also presented at NeurIPS this year. The yellow labels identify the top three!</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>China & US dominating AI research</h2> |
|
<p>This year's NeurIPS papers mapped to interesting domains with author affiliations grouped into US, Chinese, European and the rest of the world</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/sankey" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
13: ` |
|
<h2>The NeurIPS Class of 2024: Leading Research Institutions</h2> |
|
<p>Explore which institutions are leading AI research through their contributions to NeurIPS 2024, by region (this visualization focuses on papers connected to oral talks and spotlights, representing approximately the top 9.6% of submissions).</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/top_100_orgs_spotlight_oral" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
14: ` |
|
<h2>Machine Vision's Reign: Top Research Topics at NeurIPS 2022-2024</h2> |
|
<p>Explore how research priorities have evolved at NeurIPS, with rankings of top categories by number of papers for each year.</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/ranking_of_primary_areas" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
15: ` |
|
<h2>The Economic Case for Open-Source AI</h2> |
|
<p>Leading economists highlight key aspects of open-source AI, from innovation drivers to regulatory considerations, in <a href="https://open.mozilla.org/economists/" target="_blank">a joint statement published by the Mozilla Foundation</a> supporting open-source's critical role in technological progress.</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/datasets_wheel" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
16: ` |
|
<h2>The Dataset Boom: How Different AI Fields Grow on Hugging Face</h2> |
|
<p>Watch the explosive growth of datasets across categories, with Reinforcement Learning and Robotics showing remarkable acceleration. <em>Note: Some datasets appear in multiple categories.</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/api/data/stacked" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
17: ` |
|
<h2>Permission Granted: most used licenses across the Hub</h2> |
|
<p>Of the models that specify a license on the Hub, nearly 60% use permissive open-source licenses like Apache and MIT. Licenses are a crucial tool for giving developers flexible control over how their AI models are shared and used.</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/model/license/treemap" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
18: ` |
|
<h2>Dataset Darlings: Most Liked Datasets of 2024</h2> |
|
<p>From instruction-following and creative writing to scientific research and video understanding, explore the diverse datasets powering AI development. Note: Snapshot as of November 2024.</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/datasets/wheels" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
19: ` |
|
<h2>The Narrowing Gap: Open Source vs Closed Source AI</h2> |
|
<p>Performance comparison between closed-source and open-weight models from 2023-2024, showing open source AI closing the capability gap while maintaining smaller model sizes. Bubble size indicates number of parameters.</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/sota" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
20: ` |
|
<h2>Babel in the Machine: Language Distribution across Hugging Face Datasets</h2> |
|
<p>A treemap visualization showing the percentage distribution of languages in datasets available on the Hugging Face Hub, color-coded by language families.</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/languages/treemap-datasets" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
21: ` |
|
<h2>The Circle of Sharing: How Open Datasets Power AI Innovation</h2> |
|
<p>A Sankey diagram illustrating the flow from top open-source datasets through AI organizations to their derivative models, showcasing the collaborative nature of AI development.</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/sankey2" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
22: ` |
|
<h2>December Stars: Top Trending Spaces on Hugging Face</h2> |
|
<p>The 12 most popular Spaces on the Hub in December 2024, including virtual try-on, style shaping, and audio tools. Each star represents a Space with its creator.</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/spaces/christmas-lights" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
23: ` |
|
<h2>Mapping AI's Languages of Models & Datasets</h2> |
|
<p>Distribution of AI content across languages on the Hub, showing both models (blue) and datasets (yellow) per language.</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/languages/diverging-bar-chart" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
24: ` |
|
<h2>The Open Source AI Race: Top Models by Likes</h2> |
|
<p>Ranking of the most liked open source models on Hugging Face, with Black Forest Labs' FLUX and Meta's Llama models 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/api/model/model/racechart" allowfullscreen></iframe> |
|
</div> |
|
`, |
|
25: ` |
|
<h2>The AI Elo Tree: Top Open Source Models of 2024</h2> |
|
<p>A festive ranking of the most competitive open source models on Hugging Face. Each box shows a model's position, from #1 at the top to #21 at the base.</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/model/model/christmas-tree" allowfullscreen></iframe> |
|
</div> |
|
` |
|
}; |
|
|
|
// 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", |
|
12: "🌏<br>US & China dominating AI research", |
|
13: "🎓<br>The NeurIPS Class of 2024", |
|
14: "👑<br>Machine Vision's Reign", |
|
15: "🔓<br>The Economic Case for Open-Source AI", |
|
16: "💣<br>The Dataset Boom", |
|
17: "⚖️<br>Permission Granted", |
|
18: "⭐️<br>Dataset Darlings", |
|
19: "🎯<br>Closing the Gap", |
|
20: "📚<br>Babel in the Machine", |
|
21: "🔄<br>The Circle of Sharing", |
|
22: "⭐<br>December Stars", |
|
23: "🌍<br>Mapping AI's Languages", |
|
24: "🏆<br>The Open Source AI Race", |
|
25: "🎄<br>The AI Elo Tree" |
|
// Add more custom labels as needed |
|
// 3: "Custom Text", |
|
// 4: "Another Label", |
|
}; |
|
|
|
// Modify the card creation loop |
|
for (let i = 1; i <= 25; 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,12,13,14,15,16,17,18,19,20,21,22,23,24,25]; // 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> |
