Update

index.html

@@ -108,20 +108,20 @@
 				}
 
 				const pypi_svg = `<svg clip-rule="evenodd" fill-rule="evenodd" height="20" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="1.5" viewBox=".006 0 673.409 600" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m.006 0h600v600h-600z" fill="#111827"/><g transform="translate(72.59 -63.209)"><path d="m673.41 236.016-64.271 8.252v281.357h64.276z" fill="#ffca1e" stroke="#d7c5b2" stroke-width="1.11" transform="matrix(1.02365 -.37275 .22115 .08093 -423.086 457.448)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#ffd241" stroke="#d7c5b2" stroke-width=".35" transform="matrix(3.93359 -1.43837 0 .53084 -2266.43 1087.94)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#2f6490" stroke="#d1e3f2" stroke-width=".62" transform="matrix(1.9604 -.71685 .2216 .07927 -1118.55 639.339)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#3775a8" stroke="#d1e3f2" stroke-width="1.15" transform="matrix(1.02281 -.374 0 1.05695 -430.773 214.178)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#2f6490" stroke="#fff" stroke-width="1.17" transform="matrix(-.97499 -.34924 0 1.05695 786.194 199.208)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#efeeea" stroke="#d8d8d8" stroke-width="1.44" transform="matrix(-.97499 -.35652 0 .26885 786.194 618.355)"/><g stroke="#d1e3f2"><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#2f6490" stroke-width="1.44" transform="matrix(-.96834 -.35409 0 .53077 719.483 427.5)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#3775a8" stroke-width="1.2" transform="matrix(.93554 -.3421 0 1.05695 -311.892 170.492)"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#3775a8" stroke-width="1.43" transform="matrix(.9742 -.35623 0 .53084 -463.744 428.761)"/><path d="m67.575 393.161 62.121 22.465 188.708-68.299m-125.165-29.141 124.732-45.602" fill="none"/></g><path d="m318.404 347.327 63.939-23.209" fill="none" stroke="#d7c5b2"/><path d="m609.139 244.268h64.276v281.357h-64.276z" fill="#2f6490" stroke="#d1e3f2" stroke-width="1.16" transform="matrix(.96788 -.35244 .22115 .08093 -576.168 513.583)"/><circle cx="637.517" cy="260.001" fill="#fff" r="15.71" transform="matrix(.7826 -.4024 .05494 .8614 -295.363 304.934)"/><path d="m195.786 198.125 61.696 22.126" fill="none" stroke="#d1e3f2"/><path d="m673.415 244.268h-64.276l.018 282.405 64.258-1.048z" fill="#ffd241" stroke="#d7c5b2" stroke-width="1.37" transform="matrix(1.02281 -.374 0 .52843 -430.773 491.983)"/><path d="m673.415 244.268h-64.276l.001 281.758 64.275-.401z" fill="#ffd241" stroke="#d7c5b2" stroke-width="1.48" transform="matrix(.93554 -.3421 0 .52743 -311.892 448.822)"/><circle cx="637.517" cy="260.001" fill="#fefdfd" r="15.71" transform="matrix(.77074 -.3963 .05156 .80832 -205.916 509.411)"/><path d="m192.412 468.059 126.028-45.977" fill="none" stroke="#d7c5b2"/></g></svg>`
-				const github_svg = `<svg width="20" height="20" viewBox="0 0 20 20" fill="#fff" xmlns="http://www.w3.org/2000/svg"><script xmlns=""/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/></svg>`
 
-				const releases = [
-					{title: "v4.51.3", desc: "Patch release v4.51.3, released on 14th April, 2025"},
-					{title: "Janus (based on v4.51.3)", desc: "v4.51.3-Janus-preview, released on 22nd April, 2025"},
-					{title: "TimesFM (based on v4.51.3)", desc: "v4.51.3-TimesFM-preview, released on 22nd April, 2025"},
-					{title: "Qwen2.5-Omni (based on 4.51.3)", desc: "v4.51.3-Qwen2.5-Omni-preview, released on 22nd April, 2025"},
-					{title: "LlamaGuard-4 (based on v4.51.3)", desc: "v4.51.3-LlamaGuard-preview, released on 22nd April, 2025"},
-					{title: "BitNet (based on v4.51.3)", desc: "v4.51.3-BitNet-preview, released on 22nd April, 2025"},
-					{title: "CSM (based on v4.51.3)", desc: "v4.51.3-CSM-preview, released on 22nd April, 2025"},
-					{title: "D-FINE (based on v4.51.3)", desc: "v4.51.3-D-FINE-preview, released on 22nd April, 2025"},
-					{title: "GraniteMoeHybrid (based on v4.51.3)", desc: "v4.51.3-GraniteMoeHybrid-preview, released on 22nd April, 2025"},
-					{title: "SAM-HQ (based on v4.51.3)", desc: "v4.51.3-SAM-HQ-preview, released on 22nd April, 2025"},
-				];
+				const dataURL = 'https://datasets-server.huggingface.co/rows?dataset=reach-vb%2Ftransformers-releases&config=default&split=train&offset=0&length=100'
+				const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+				const releases = await fetch(dataURL)
+						.then(e => e.json())
+						.then(e => e.rows.map(a => {
+							return {
+								title: a['row']['name'],
+								publishedAt: a['row']['published_at'],
+								desc: `${a['row']['tag_name']}, released on ${new Date(a['row']['published_at']).toLocaleString("en-US", dateOptions)}`,
+								pypi: !a['row']['name'].includes('based'),
+								tag: a['row']['tag_name'],
+							}
+						}).sort((a, b) => new Date(a.publishedAt) - new Date(b.publishedAt)))
 
 				for (let i = 1; i < releases.length + 1; i++) {
 					const release = releases[i - 1];
@@ -134,16 +134,17 @@
 					commitNode.classList.add('commit-node');
 					commitNode.style.top = styleTop;
 
+					tooltip.style.animation = "fade-in ease 1s";
+
 					tooltip.innerHTML = `<div class="tooltip">
 						<div class="title relative h-[4.25rem] w-full overflow-hidden">
 							<a class="group flex h-full items-stretch overflow-hidden rounded-lg border border-gray-100 dark:border-gray-800"
-							   href="https://huggingface.co/spaces/transformers-discussion-board/Support/discussions/5">
+							   href="https://github.com/huggingface/transformers/releases/tag/${release.tag}">
 								<div class="flex-1 overflow-hidden whitespace-nowrap px-4 bg-white dark:bg-gray-800 dark:bg-gradient-to-r dark:from-gray-900 dark:to-gray-950">
 									<div class="mt-2.5 flex items-center justify-between overflow-hidden leading-snug">
 										<div class="flex items-center overflow-hidden">
 											<h4 class="truncate font-semibold group-hover:underline dark:text-white">${release.title}</h4>
-											<div class="outer_svg">${pypi_svg}</div>
-											<div class="outer_svg">${github_svg}</div>
+											${release.pypi ? `<div class="outer_svg">${pypi_svg}</div>` : ""}
 										</div>
 										<div class="flex h-full items-start pt-2.5"></div>
 									</div>
@@ -348,71 +349,6 @@
 				</div>
 			</div>
 		</div>
-		<div class="commit-tree" id="commit-tree">
-<!--			<div class="commit-node" style="top: 10%;">-->
-<!--				<div class="tooltip">-->
-<!--					<div class="title relative h-[4.25rem] w-full overflow-hidden">-->
-<!--						<a class="group flex h-full items-stretch overflow-hidden rounded-lg border border-gray-100 dark:border-gray-800" href="https://huggingface.co/spaces/transformers-discussion-board/Support/discussions/5">-->
-<!--							<div class="flex-1 overflow-hidden whitespace-nowrap px-4 bg-white dark:bg-gray-800 dark:bg-gradient-to-r dark:from-gray-900 dark:to-gray-950">-->
-<!--								<div class="mt-2.5 flex items-center justify-between overflow-hidden leading-snug">-->
-<!--									<div class="flex items-center overflow-hidden">-->
-<!--										<h4 class="truncate font-semibold group-hover:underline dark:text-white">MLCD (based on 4.51.3)</h4>-->
-<!--									</div>-->
-<!--									<div class="flex h-full items-start pt-2.5"></div>-->
-<!--								</div>-->
-<!--							</div>-->
-<!--						</a>-->
-<!--						<div class="desc absolute bottom-2.5 max-w-full truncate pl-4 pr-4 text-sm text-gray-500 dark:text-gray-400">-->
-<!--							<span class="discussion-num">v4.51.3-MLCD-preview,</span>-->
-<!--							<span class="timeago">22nd April, 2025</span>-->
-<!--						</div>-->
-<!--					</div>-->
-<!--				</div>-->
-<!--			</div>-->
-<!--			<div class="commit-node" style="top: 20%;">-->
-<!--				<div class="tooltip">-->
-<!--					<div class="relative h-[4.25rem] w-full overflow-hidden">-->
-<!--						<a class="group flex h-full items-stretch overflow-hidden rounded-lg border border-gray-100 dark:border-gray-800" href="https://huggingface.co/spaces/transformers-discussion-board/Support/discussions/5">-->
-<!--							<div class="flex-1 overflow-hidden whitespace-nowrap px-4 bg-white dark:bg-gray-800 dark:bg-gradient-to-r dark:from-gray-900 dark:to-gray-950">-->
-<!--								<div class="mt-2.5 flex items-center justify-between overflow-hidden leading-snug">-->
-<!--									<div class="flex items-center overflow-hidden">-->
-<!--										<h4 class="truncate font-semibold group-hover:underline dark:text-white">Janus (based on v4.51.3)</h4>-->
-<!--									</div>-->
-<!--									<div class="flex h-full items-start pt-2.5"></div>-->
-<!--								</div>-->
-<!--							</div>-->
-<!--						</a>-->
-<!--						<div class="absolute bottom-2.5 max-w-full truncate pl-4 pr-4 text-sm text-gray-500 dark:text-gray-400">-->
-<!--							<span class="discussion-num">v4.51.3-Janus-preview,</span>-->
-<!--							<span class="timeago">8th of May, 2025</span>-->
-<!--						</div>-->
-<!--					</div>-->
-<!--				</div>-->
-<!--			</div>-->
-<!--			<div class="commit-node" style="top: 30%;">-->
-<!--				<div class="tooltip">Update Dependencies<br>def456</div>-->
-<!--			</div>-->
-<!--			<div class="commit-node" style="top: 40%;">-->
-<!--				<div class="tooltip">Update Dependencies<br>def456</div>-->
-<!--			</div>-->
-<!--			<div class="commit-node" style="top: 50%;">-->
-<!--				<div class="tooltip">Update Dependencies<br>def456</div>-->
-<!--			</div>-->
-<!--			<div class="commit-node" style="top: 60%;">-->
-<!--				<div class="tooltip">Fix Bug<br>ghi789</div>-->
-<!--			</div>-->
-<!--			<div class="commit-node" style="top: 70%;">-->
-<!--				<div class="tooltip">Fix Bug<br>ghi789</div>-->
-<!--			</div>-->
-<!--			<div class="commit-node" style="top: 80%;">-->
-<!--				<div class="tooltip">Fix Bug<br>ghi789</div>-->
-<!--			</div>-->
-<!--			<div class="commit-node" style="top: 90%;">-->
-<!--				<div class="tooltip">Fix Bug<br>ghi789</div>-->
-<!--			</div>-->
-<!--			<div class="commit-node" style="top: 100%;">-->
-<!--				<div class="tooltip">Fix Bug<br>ghi789</div>-->
-<!--			</div>-->
-		</div>
+		<div class="commit-tree" id="commit-tree"></div>
 	</body>
 </html>

style.css

@@ -34,16 +34,25 @@ p {
 
 /* Container for the vertical line and nodes */
 .commit-tree {
-    position: relative;
+    position: absolute;
     height: 42.5rem; /* Full viewport height */
-    width: 100%;
+    width: calc(100% - 600px);
+    bottom: 80px;
+    animation: fade-in ease 1s;
+}
+
+@media (width <= 1300px) {
+    .commit-tree {
+        visibility: hidden;
+        opacity: 0;
+    }
 }
 
 /* Vertical line using pseudo-element */
 .commit-tree::before {
     content: '';
     position: absolute;
-    left: 50%;
+    right: 0;
     top: 0;
     bottom: 0;
     width: 4px;
@@ -53,8 +62,8 @@ p {
 /* Commit node styling */
 .commit-node {
     position: absolute;
-    left: 50%;
-    transform: translateX(calc(-50% + 2px));
+    right: 0;
+    transform: translateX(4px);
     width: 12px;
     height: 12px;
     background-color: #e5e7eb; /* Blue circle */
@@ -110,10 +119,8 @@ p {
     opacity: 1;
 }
 
+@keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
 
-/*!* Show tooltip on hover *!*/
-/*.commit-node:hover .tooltip {*/
-/*    visibility: visible;*/
-/*    opacity: 1;*/
-/*    top: 50%;*/
-/*}*/