Update

index.html

@@ -18,6 +18,7 @@
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js"></script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/timeago.js/4.0.2/timeago.min.js"></script>
 		<script src="https://cdn.tailwindcss.com"></script>
+		<link rel="stylesheet" href="style.css">
 		<script>
 			const REPO_NAME = "spaces/transformers-discussion-board/Support";
 			const NUM_DISCUSSIONS = 5;
@@ -105,6 +106,58 @@
 
 					hookPoint.appendChild(clone);
 				}
+
+				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"},
+				];
+
+				for (let i = 1; i < releases.length + 1; i++) {
+					const release = releases[i - 1];
+					const styleTop = `${i}0%`
+
+					const commitTree = document.getElementById('commit-tree');
+					const commitNode = document.createElement('div');
+					const tooltip = document.createElement('div')
+
+					commitNode.classList.add('commit-node');
+					commitNode.style.top = styleTop;
+
+					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">
+								<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>
+										</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">${release['desc']}</span>
+							</div>
+						</div>
+					</div>`
+
+					commitNode.appendChild(tooltip);
+					commitTree.appendChild(commitNode);
+				}
 			}
 
 			document.onreadystatechange = function (e) {
@@ -113,8 +166,8 @@
 
 					// Check for system dark mode preference
 					if (
-						window.matchMedia &&
-						window.matchMedia("(prefers-color-scheme: dark)").matches
+							window.matchMedia &&
+							window.matchMedia("(prefers-color-scheme: dark)").matches
 					) {
 						document.documentElement.classList.add("dark");
 					}
@@ -123,6 +176,7 @@
 		</script>
 	</head>
 	<body class="dark:bg-gray-900 dark:text-white">
+	<div class="commit-timeline">
 		<div class="flex flex-col p-12 md:p-32 font-sans">
 			<h1 class="text-2xl font-bold mb-4">Transformers Discussions</h1>
 			<h2 class="dark:text-gray-200">
@@ -130,9 +184,9 @@
 			</h2>
 			<p class="text-gray-500 dark:text-gray-400">
 				<a
-					href="https://huggingface.co/spaces/transformers-discussion-board/Support/discussions"
-					class="underline hover:text-gray-800 dark:hover:text-gray-300"
-					>Go to the community tab</a
+						href="https://huggingface.co/spaces/transformers-discussion-board/Support/discussions"
+						class="underline hover:text-gray-800 dark:hover:text-gray-300"
+				>Go to the community tab</a
 				>
 				to get started
 			</p>
@@ -142,11 +196,11 @@
 
 		<div class="hidden">
 			<div
-				id="template-discussion"
-				class="relative h-[4.25rem] w-full overflow-hidden"
+					id="template-discussion"
+					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"
+						class="group flex h-full items-stretch overflow-hidden rounded-lg border border-gray-100 dark:border-gray-800"
 					href="https://huggingface.co/spaces/huggingface/HuggingDiscussions/discussions/14"
 				>
 					<div
@@ -294,5 +348,71 @@
 				</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>
 	</body>
 </html>

style.css

@@ -26,3 +26,94 @@ p {
 .card p:last-child {
 	margin-bottom: 0;
 }
+
+.commit-timeline {
+    display: flex;
+    flex-direction: row;
+}
+
+/* Container for the vertical line and nodes */
+.commit-tree {
+    position: relative;
+    height: 42.5rem; /* Full viewport height */
+    width: 100%;
+}
+
+/* Vertical line using pseudo-element */
+.commit-tree::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background: linear-gradient(rgb(17 24 39 / var(--tw-bg-opacity, 1)) 0%, #e5e7eb 50%, #e5e7eb 100%);
+}
+
+/* Commit node styling */
+.commit-node {
+    position: absolute;
+    left: 50%;
+    transform: translateX(calc(-50% + 2px));
+    width: 12px;
+    height: 12px;
+    background-color: #e5e7eb; /* Blue circle */
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 1;
+    display: flex;
+    flex-direction: row;
+}
+
+.outer_svg {
+
+}
+
+/* Tooltip styling */
+.tooltip {
+    width: 350px;
+    text-align: center;
+    border-radius: 6px;
+    padding: 8px;
+    position: absolute;
+    z-index: 2;
+    left: 120%; /* Position to the right of the node */
+    top: 50%;
+    transform: translateY(-50%);
+    white-space: nowrap;
+    font-size: 14px;
+    transition: all 0.3s;
+}
+
+.tooltip:hover {
+    width: 500px;
+}
+
+.tooltip .title {
+    height: 2.6rem;
+    transition: all 0.3s;
+}
+
+
+.tooltip:hover .title {
+    height: 4.25rem;
+}
+
+.tooltip .desc {
+    visibility: hidden;
+    transition: all 0.3s;
+    opacity: 0;
+}
+
+.tooltip:hover .desc {
+    visibility: visible;
+    opacity: 1;
+}
+
+
+/*!* Show tooltip on hover *!*/
+/*.commit-node:hover .tooltip {*/
+/*    visibility: visible;*/
+/*    opacity: 1;*/
+/*    top: 50%;*/
+/*}*/