|
|
|
|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>🤗 HuggingFace Timeline</title> |
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script> |
|
|
</head> |
|
|
<body style="font-family: 'Inter', sans-serif; background-color: #f5f5f5;"> |
|
|
<div class="container" style="max-width: 1200px; margin: 0 auto; padding: 2rem;"> |
|
|
<div style="text-align: center; margin-bottom: 3rem;"> |
|
|
<h1 style="font-size: 2.5rem; font-weight: 700; color: #ffd21e; margin-bottom: 1rem;"> |
|
|
🤗 HuggingFace Hub Timeline |
|
|
</h1> |
|
|
<p style="font-size: 1.25rem; color: #555;"> |
|
|
2020 → 2025: Key milestones in the evolution |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="timeline-wrapper" style="background: white; border-radius: 12px; padding: 2rem; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"> |
|
|
<div id="timeline-container" style="position: relative; min-height: 300px;"> |
|
|
<div style="position: relative; height: 4px; background: linear-gradient(to right, #ffd21e, #ff6b00); margin: 0 4rem 4rem; border-radius: 2px;"></div> |
|
|
|
|
|
<div style="display: flex; justify-content: space-between; padding: 0 3rem;"> |
|
|
|
|
|
<div class="timeline-item" style="width: 200px; position: relative;"> |
|
|
<div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ff6b00; border-radius: 50%; border: 3px solid white;"></div> |
|
|
<div style="background: white; padding: 1.5rem; border-radius: 8px; margin-top: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);"> |
|
|
<h3 style="font-weight: 600; color: #ff6b00; margin: 0 0 0.5rem 0;">Foundation</h3> |
|
|
<p style="font-size: 0.875rem; color: #888; margin: 0 0 1rem 0;">2020-2021</p> |
|
|
<ul style="padding-left: 1rem; margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6;"> |
|
|
<li>• First release</li> |
|
|
<li>• Git wrapper</li> |
|
|
<li>• Token auth</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="timeline-item" style="width: 200px; position: relative;"> |
|
|
<div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ff6b00; border-radius: 50%; border: 3px solid white;"></div> |
|
|
<div style="background: white; padding: 1.5rem; border-radius: 8px; margin-top: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);"> |
|
|
<h3 style="font-weight: 600; color: #ff6b00; margin: 0 0 0.5rem 0;">Git to HTTP</h3> |
|
|
<p style="font-size: 0.875rem; color: #888; margin: 0 0 1rem 0;">2022</p> |
|
|
<ul style="padding-left: 1rem; margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6;"> |
|
|
<li>• HTTP Commit API</li> |
|
|
<li>• Git-aware cache</li> |
|
|
<li>• Spaces</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="timeline-item" style="width: 200px; position: relative;"> |
|
|
<div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ff6b00; border-radius: 50%; border: 3px solid white;"></div> |
|
|
<div style="background: white; padding: 1.5rem; border-radius: 8px; margin-top: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);"> |
|
|
<h3 style="font-weight: 600; color: #ff6b00; margin: 0 0 0.5rem 0;">API Expansion</h3> |
|
|
<p style="font-size: 0.875rem; color: #888; margin: 0 0 1rem 0;">2023-2024</p> |
|
|
<ul style="padding-left: 1rem; margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6;"> |
|
|
<li>• Inference API</li> |
|
|
<li>• Community features</li> |
|
|
<li>• Collections</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="timeline-item" style="width: 200px; position: relative;"> |
|
|
<div style="position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; background: #ff6b00; border-radius: 50%; border: 3px solid white;"></div> |
|
|
<div style="background: white; padding: 1.5rem; border-radius: 8px; margin-top: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.05);"> |
|
|
<h3 style="font-weight: 600; color: #ff6b00; margin: 0 0 0.5rem 0;">Xet Protocol</h3> |
|
|
<p style="font-size: 0.875rem; color: #888; margin: 0 0 1rem 0;">2025</p> |
|
|
<ul style="padding-left: 1rem; margin: 0; font-size: 0.875rem; color: #555; line-height: 1.6;"> |
|
|
<li>• Chunk storage</li> |
|
|
<li>• 77PB+ migrated</li> |
|
|
<li>• Faster transfers</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div style="margin-top: 2rem; display: flex; justify-content: center; gap: 1rem;"> |
|
|
<button id="downloadPng" style="background: #ff6b00; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; cursor: pointer; display: flex; align-items: center;"> |
|
|
<span>Download PNG</span> |
|
|
</button> |
|
|
<button id="generateGif" style="background: #ffd21e; color: #222; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; cursor: pointer; display: flex; align-items: center;"> |
|
|
<span>Generate GIF</span> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div id="gif-preview" style="margin-top: 2rem; display: none; text-align: center;"> |
|
|
<h3 style="font-weight: 600; margin-bottom: 1rem;">GIF Preview</h3> |
|
|
<img id="gif-result" style="max-width: 100%; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"> |
|
|
<button id="downloadGif" style="margin-top: 1rem; background: #ff6b00; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; cursor: pointer;"> |
|
|
Download GIF |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
