microsoft · MaanavD · Mar 21, 2024 · Mar 19, 2024 · Mar 19, 2024 · Mar 19, 2024
diff --git a/package.json b/package.json
@@ -47,10 +47,12 @@
 	"type": "module",
 	"dependencies": {
 		"animejs": "^3.2.1",
+		"clsx": "^2.1.0",
 		"mdsvex-relative-images": "^1.0.3",
-		"saos": "^1.3.1",
 		"svelte-icons": "^2.1.0",
+		"svelte-motion": "^0.12.2",
 		"sveltejs-adapter-ipfs": "^0.4.12",
+		"tailwind-merge": "^2.2.2",
 		"theme-change": "^2.5.0"
 	}
 }
diff --git a/src/app.html b/src/app.html
@@ -3,10 +3,104 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+		<script src="https://wcpstatic.microsoft.com/mscc/lib/v2/wcp-consent.js"></script>
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
+		<!-- Google Analytics -->
+		<script async src="https://www.googletagmanager.com/gtag/js?id=UA-156955408-1"></script>
+		<script>
+			window.dataLayer = window.dataLayer || [];
+			function gtag() {
+				dataLayer.push(arguments);
+			}
+			gtag('consent', 'default', {
+				ad_storage: 'denied',
+				analytics_storage: 'denied'
+			});
+			gtag('js', new Date());
+			gtag('config', 'UA-156955408-1');
+		</script>
+		<!-- Adobe Analytics -->
+		<script type="text/javascript">
+			const analytics = new oneDS.ApplicationInsights();
+			var config = {
+				instrumentationKey:
+					'360b0e675e0044398fd28c8bdf711b8e-1fe5434d-ee99-4837-99cc-a3a16462d82d-7262',
+				channelConfiguration: {
+					// Post channel configuration
+					eventsLimitInMem: 50
+				},
+				propertyConfiguration: {
+					// Properties Plugin configuration
+					env: 'PROD' // Environment can be set to PPE or PROD as needed.
+				},
+				webAnalyticsConfiguration: {
+					// Web Analytics Plugin configuration
+					//urlCollectQuery:true,
+					autoCapture: {
+						scroll: true,
+						pageView: true,
+						onLoad: true,
+						onUnload: true,
+						click: true,
+						resize: true,
+						jsError: true
+					}
+				}
+			};
+			//Initialize SDK
+			analytics.initialize(config, []);
+		</script>
+		<!-- MS Analytics -->
+		<script
+			type="text/javascript"
+			src="https://js.monitor.azure.com/scripts/c/ms.analytics-web-3.min.js"
+		></script>
 	</head>
 	<body data-sveltekit-preload-data="hover">
+		<div id="cookie-banner"></div>
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
+	<script>
+		let choices = {
+			marketing: false,
+			tracking: false,
+			analytics: {
+				label: 'Analytics',
+				description:
+					'We use analytics cookies to track visits, helping create a better experience for you!',
+				value: true
+			},
+			necessary: {
+				label: 'Necessary',
+				description: 'Used for cookie control.',
+				value: true
+			}
+		};
+
+		WcpConsent.init(
+			'en-US',
+			'cookie-banner',
+			function (err, _siteConsent) {
+				if (!err) {
+					siteConsent = _siteConsent; //siteConsent is used to get the current consent
+				} else {
+					console.log('Error initializing WcpConsent: ' + err);
+				}
+			},
+			onConsentChanged,
+			WcpConsent.themes.light
+		);
+
+		function onConsentChanged(categoryPreferences) {
+			if (categoryPreferences.Analytics) {
+				// Google Analytics
+				gtag('consent', 'update', {
+					ad_storage: 'granted',
+					analytics_storage: 'granted'
+				});
+				// Adobe Analytics
+			}
+		}
+	</script>
 </html>
diff --git a/src/images/undraw/image_HF2.svelte b/src/images/undraw/image_HF2.svelte
@@ -2,6 +2,7 @@
 	export let widthscale = 1;
 	export let heightscale = 1;
 </script>
+
 <svg
 	stroke="currentColor"
 	width={109 * widthscale}

diff --git a/src/images/undraw/image_HF3.svelte b/src/images/undraw/image_HF3.svelte
@@ -2,6 +2,7 @@
 	export let widthscale = 1;
 	export let heightscale = 1;
 </script>
+
 <svg
 	stroke="currentColor"
 	width={110 * widthscale}

diff --git a/src/images/undraw/image_events.svelte b/src/images/undraw/image_events.svelte
@@ -5,7 +5,7 @@
 	height="153.568145"
 	viewBox="0 0 801.19718 614.27258"
 	xmlns:xlink="http://www.w3.org/1999/xlink"
-    stroke="#fff"
+	stroke="#fff"
 	><path
 		d="M743.1742,755.17457c-.78106.66616-1.587,1.31586-2.40141,1.95737H641.90134c-.56742-.64151-1.13525-1.29121-1.69424-1.95737a109.34753,109.34753,0,0,1-11.999-17.641c-8.11741-14.6227-10.914-33.79337-10.914-53.31768,0-1.19253.00843-2.385.03293-3.57752.09076-5.47737.39515-10.96291.84732-16.358.08232-.93757.16465-1.86691.255-2.79625.73207-7.739,1.7601-15.27235,2.92787-22.31229.14778-.89646.296-1.78469.45218-2.66469a365.995,365.995,0,0,1,9.55665-41.42544s.13171.03293.38631.09869c.73207.20561,2.48373.69086,5.05822,1.45571,7.089,2.1054,20.404,6.34913,35.75893,12.6571.83889.33717,1.68581.6908,2.54116,1.05267A283.26673,283.26673,0,0,1,712.72809,629.237c.74853.45232,1.48863.91288,2.22873,1.37343v.06581l-1.61994,52.44587,14.47472-43.6624q4.42855,3.3678,8.46276,6.98236c.7401.65793,1.4802,1.33232,2.19581,2.03141a81.02719,81.02719,0,0,1,15.46139,19.28578C775.586,706.79966,766.4984,735.50218,743.1742,755.17457Z"
 		transform="translate(-199.40141 -142.86371)"

diff --git a/src/lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.svelte b/src/lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { onMount } from 'svelte';
+
+	export let items: {
+		href: string;
+		src: any;
+		alt: string;
+	}[];
+	export let direction: 'left' | 'right' | undefined = 'left';
+	export let speed: 'fast' | 'normal' | 'slow' | undefined = 'fast';
+	export let pauseOnHover: boolean | undefined = true;
+	export let className: string | undefined = undefined;
+
+	let containerRef: HTMLDivElement;
+	let scrollerRef: HTMLUListElement;
+
+	onMount(() => {
+		addAnimation();
+	});
+
+	let start = false;
+
+	function addAnimation() {
+		if (containerRef && scrollerRef) {
+			const scrollerContent = Array.from(scrollerRef.children);
+
+			scrollerContent.forEach((item) => {
+				const duplicatedItem = item.cloneNode(true);
+				if (scrollerRef) {
+					scrollerRef.appendChild(duplicatedItem);
+				}
+			});
+
+			getDirection();
+			getSpeed();
+			start = true;
+		}
+	}
+	const getDirection = () => {
+		if (containerRef) {
+			if (direction === 'left') {
+				containerRef.style.setProperty('--animation-direction', 'forwards');
+			} else {
+				containerRef.style.setProperty('--animation-direction', 'reverse');
+			}
+		}
+	};
+	const getSpeed = () => {
+		if (containerRef) {
+			if (speed === 'fast') {
+				containerRef.style.setProperty('--animation-duration', '20s');
+			} else if (speed === 'normal') {
+				containerRef.style.setProperty('--animation-duration', '40s');
+			} else {
+				containerRef.style.setProperty('--animation-duration', '80s');
+			}
+		}
+	};
+</script>
+
+<div bind:this={containerRef} class={cn('scroller relative z-2 overflow-hidden ', className)}>
+	<ul
+		bind:this={scrollerRef}
+		class={cn(
+			' flex w-max min-w-full shrink-0 flex-nowrap gap-4 py-4',
+			start && 'animate-scroll ',
+			pauseOnHover && 'hover:[animation-play-state:paused]'
+		)}
+	>
+		{#each items as item, idx (item.alt)}
+			<a
+				href={item.href}
+				class="bg-slate-300 m-auto relative h-28 w-[200px] max-w-full flex-shrink-0 hover:scale-105 transition duration-200 rounded-md border border-2 border-secondary md:w-[200px]"
+			>
+				<img class="h-28 p-2 m-auto" src={item.src} alt={item.alt} />
+			</a>
+		{/each}
+	</ul>
+</div>
diff --git a/src/lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.ts b/src/lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.ts
@@ -0,0 +1,3 @@
+import InfiniteMovingCards from './InfiniteMovingCards.svelte';
+
+export { InfiniteMovingCards };
diff --git a/src/lib/utils/cn.ts b/src/lib/utils/cn.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -4,14 +4,13 @@
 	import Footer from './components/footer.svelte';
 	import oneLight from 'svelte-highlight/styles/one-light';
 	import { fade } from 'svelte/transition';
-	import Analytics from './components/analytics.svelte';
 	import { page } from '$app/stores';
 	export let data;
 </script>
 
 <svelte:head>
 	{@html oneLight}
-	
+
 	<title
 		>ONNX Runtime | {data.pathname == '/'
 			? 'Home'
@@ -42,7 +41,6 @@
 	<meta property="og:url" content="https://onnxruntime.ai" />
 	<meta property="og:type" content="website" />
 </svelte:head>
-<Analytics />
 <div class="selection:bg-info">
 	{#if !$page.url.pathname.startsWith('/blogs/')}
 		<Header />

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -10,26 +10,25 @@
 	import IoIosClose from 'svelte-icons/io/IoIosClose.svelte';
 	import { onMount } from 'svelte';
 	import anime from 'animejs';
-	import Saos from 'saos';
 
 	let removetoast = (e: any) => {
 		e.target.parentNode.parentNode.remove();
 	};
 
 	let videos = [
-        {
-            title: 'What is ONNX Runtime (ORT)?',
-            link: 'https://www.youtube-nocookie.com/embed/M4o4YRVba4o?si=LHc-2AhKt3TrY60g'
-        },
-        {
-            title: 'Converting Models to ONNX Format',
-            link: 'https://www.youtube-nocookie.com/embed/lRBsmnBE9ZA?si=l5i0Q2P7VtSJyGK1'
-        },
-        {
-            title: 'Optimize Training and Inference with ONNX Runtime (ORT/ACPT/DeepSpeed)',
-            link: 'https://www.youtube-nocookie.com/embed/lC7d_7waHLM?si=U4252VEd1t5ioZUN'
-        }
-    ];
+		{
+			title: 'What is ONNX Runtime (ORT)?',
+			link: 'https://www.youtube-nocookie.com/embed/M4o4YRVba4o?si=LHc-2AhKt3TrY60g'
+		},
+		{
+			title: 'Converting Models to ONNX Format',
+			link: 'https://www.youtube-nocookie.com/embed/lRBsmnBE9ZA?si=l5i0Q2P7VtSJyGK1'
+		},
+		{
+			title: 'Optimize Training and Inference with ONNX Runtime (ORT/ACPT/DeepSpeed)',
+			link: 'https://www.youtube-nocookie.com/embed/lC7d_7waHLM?si=U4252VEd1t5ioZUN'
+		}
+	];
 
 	onMount(() => {
 		anime({
@@ -48,21 +47,11 @@
 <Hero />
 <Customers />
 <CodeBlocks />
-<VideoGallery {videos}/>
-<Saos once={true} animation={'slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
-	<GenerativeAi />
-</Saos>
-<Saos once={true} animation={'slide-in-right 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
-	<CrossPlatform />
-</Saos>
-<Saos once={true} animation={'slide-in-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
-	<Performance />
-</Saos>
-
-<Saos once={true} animation={'slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both'}>
-	<TrainingAndInference />
-</Saos>
-
+<VideoGallery {videos} />
+<GenerativeAi />
+<CrossPlatform />
+<Performance />
+<TrainingAndInference />
 <div class="toast z-10 opacity-0 hidden">
 	<div class="alert alert-info">
 		<svg

diff --git a/src/routes/blogs/+page.svelte b/src/routes/blogs/+page.svelte
@@ -48,7 +48,8 @@
 				'We are thrilled to announce the official launch of ONNX Runtime Web featuring WebGPU, which is now available in the ONNX Runtime 1.17 release.',
 			link: 'https://cloudblogs.microsoft.com/opensource/2024/02/29/onnx-runtime-web-unleashes-generative-ai-in-the-browser-using-webgpu/',
 			image: WebGPUImage,
-			imgalt: 'Comparison of ONNX Runtime Web with WebGPU EP on GPU vs. WASM EP on CPU for segment anything example'
+			imgalt:
+				'Comparison of ONNX Runtime Web with WebGPU EP on GPU vs. WASM EP on CPU for segment anything example'
 		},
 		{
 			title: 'ONNX Runtime 1.17: CUDA 12 support, Phi-2 optimizations, WebGPU, and more!',
@@ -62,8 +63,7 @@
 		{
 			title: 'Accelerating Phi-2, CodeLlama, Gemma and other Gen AI models with ONNX Runtime',
 			date: 'February 26th, 2024',
-			blurb:
-				'Improvements with ONNX Runtime for inferencing popular Gen AI models.',
+			blurb: 'Improvements with ONNX Runtime for inferencing popular Gen AI models.',
 			link: 'blogs/accelerating-phi-2',
 			image: Phi2Image,
 			imgalt: 'Phi2 float16 token generation throughput comparison'
@@ -303,7 +303,8 @@
 	];
 	let blogsCommunity = [
 		{
-			title: 'Efficient image generation with Stable Diffusion models and ONNX Runtime using AMD GPUs',
+			title:
+				'Efficient image generation with Stable Diffusion models and ONNX Runtime using AMD GPUs',
 			date: 'February 23, 2024',
 			link: 'https://rocm.blogs.amd.com/artificial-intelligence/stable-diffusion-onnx-runtime/README.html',
 			blurb:
@@ -322,11 +323,12 @@
 			blurb:
 				'During the annual Student Cluster Competition (SCC), UC San Diego undergraduate students achieved third place. Their success was fueled by optimizing performance using industry benchmarks, including the MLPerf Inference Benchmark. The seamless support for PyTorch and ONNX Runtime enabled them to port and fine-tune their code efficiently.',
 			link: 'https://www.hpcwire.com/off-the-wire/uc-san-diego-students-win-mlperf-contest-at-sc23/'
-		},	
+		},
 		{
 			title: 'Human Capital Management (HCM) - Sentence Similarity Language Model using Java',
 			date: 'December 5, 2023',
-			blurb: 'Using ONNX Runtime, the HCM team was able to deploy a sentence similarity language model using Java, demonstrating how easy it is to use with multiple languages.',
+			blurb:
+				'Using ONNX Runtime, the HCM team was able to deploy a sentence similarity language model using Java, demonstrating how easy it is to use with multiple languages.',
 			link: 'https://www.linkedin.com/pulse/hcm-sentence-similarity-language-model-using-java-jonathon-palmieri-tdlpc%3FtrackingId=CN2PPVO4Toqh8r6JsAYMIw%253D%253D/?trackingId=ByNomo0pQFKM%2F%2BWEknVs7Q%3D%3D'
 		}
 	];

diff --git a/src/routes/blogs/accelerating-llama-2/+page.svelte b/src/routes/blogs/accelerating-llama-2/+page.svelte
@@ -51,7 +51,9 @@
 		and
 		<a href="https://www.linkedin.com/in/parinitaparinita/" class="text-blue-500">Parinita Rahi</a>
 	</p>
-	<p class="text-neutral">14TH NOVEMBER, 2023 <span class="italic text-stone-500">(Updated 22nd November)</span></p>
+	<p class="text-neutral">
+		14TH NOVEMBER, 2023 <span class="italic text-stone-500">(Updated 22nd November)</span>
+	</p>
 	<div class="py-4">
 		<p class="mb-4">
 			Interested in running Llama2 faster? Let us explore how ONNX Runtime can propel your Llama2

diff --git a/src/routes/blogs/blog-post-featured.svelte b/src/routes/blogs/blog-post-featured.svelte
@@ -32,7 +32,7 @@
 			<div class="card-body">
 				<h2 class="card-title">{title}</h2>
 				<p>{description}</p>
-				<img src={image} alt={imgalt}/>
+				<img src={image} alt={imgalt} />
 				<div class="text-right text-blue-500">
 					{date}
 				</div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import InfiniteMovingCards from './InfiniteMovingCards.svelte';

		export { InfiniteMovingCards };