From e6ccef23e40967d5d92d5f928948abe4be5cf6f3 Mon Sep 17 00:00:00 2001
From: Maanav Dalal <maanavdalal@microsoft.com>
Date: Mon, 21 Oct 2024 14:27:25 -0700
Subject: [PATCH] Made models page, updated roadmap SEO. (#22372)

Preview at: https://maanavd.github.io/onnxruntime/models
---
 src/routes/components/header.svelte |  2 +
 src/routes/models/+page.svelte      | 87 +++++++++++++++++++++++++++++
 src/routes/roadmap/+page.svelte     | 15 +++++
 3 files changed, 104 insertions(+)
 create mode 100644 src/routes/models/+page.svelte

diff --git a/src/routes/components/header.svelte b/src/routes/components/header.svelte
index 2f3428090a..ded38e4160 100644
--- a/src/routes/components/header.svelte
+++ b/src/routes/components/header.svelte
@@ -46,6 +46,7 @@
 				<li>
 					<p class="hover:bg-primary focus:bg-primary">Community</p>
 					<ul class="p-2">
+						<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/models'}>Models</a></li>
 						<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/roadmap'}>Roadmap</a></li>
 						<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/events'}>Events</a></li>
 						<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/testimonials'}>Testimonials</a></li>
@@ -94,6 +95,7 @@
 				<details class="z-[1]">
 					<summary class="hover:bg-primary focus:bg-primary">Community</summary>
 					<ul class="p-2">
+						<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/models'}>Models</a></li>
 						<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/roadmap'}>Roadmap</a></li>
 						<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/events'}>Events</a></li>
 						<li><a class="hover:bg-primary focus:bg-primary" href={pathvar + '/testimonials'}>Testimonials</a></li>
diff --git a/src/routes/models/+page.svelte b/src/routes/models/+page.svelte
new file mode 100644
index 0000000000..dd0fc4839a
--- /dev/null
+++ b/src/routes/models/+page.svelte
@@ -0,0 +1,87 @@
+<script>
+	let modelhubs = [
+		{
+			title: 'ONNX Community (HuggingFace)',
+			description:
+				'Join the ONNX community on Hugging Face to access, share, and discuss ONNX models for NLP, vision, and more.',
+			url: 'https://huggingface.co/onnx-community',
+			image: 'https://huggingface.co/front/assets/huggingface_logo-noborder.svg',
+			imagealt: 'Hugging Face Logo'
+		},
+		{
+			title: 'Model Zoo (ONNX)',
+			description:
+				'Explore a wide variety of pre-trained ONNX models for deep learning tasks across multiple domains.',
+			url: 'https://onnx.ai/models/',
+			image: 'https://onnx.ai/models/assets/logos/onnx.png',
+			imagealt: 'ONNX Model Zoo'
+		},
+		{
+			title: 'AI Hub (Qualcomm)',
+			description:
+				'Discover ONNX-compatible AI models optimized for Qualcomm hardware on the AI Hub.',
+			url: 'https://aihub.qualcomm.com/models',
+			image: 'https://logosandtypes.com/wp-content/uploads/2020/08/qualcomm.svg',
+			imagealt: 'Qualcomm AI Hub Logo'
+		},
+		{
+			title: 'ONNX Models (HuggingFace)',
+			description:
+				'Find trending ONNX models for natural language processing, computer vision, and more on Hugging Face.',
+			url: 'https://huggingface.co/models?library=onnx&sort=trending',
+			image: 'https://huggingface.co/front/assets/huggingface_logo-noborder.svg',
+			imagealt: 'Hugging Face Logo'
+		}
+	];
+
+    let description = 'ONNX Models - find ONNX models for natural language processing, computer vision, and more.';
+    let keywords = 'onnx models, onnx model zoo, onnx community, onnx models huggingface, onnx models qualcomm';
+</script>
+<svelte:head>
+	<!-- Dynamic meta tags -->
+	<meta name="description" content={description} />
+	<meta name="keywords" content={keywords} />
+	<!-- Open Graph / Facebook -->
+	<meta property="og:description" content={description}/>
+	
+	<!-- Twitter -->
+	<meta property="twitter:description" content={description} />
+</svelte:head>
+<div class="container mx-auto px-8">
+	<h1 class="text-3xl">ONNX Models</h1>
+	<p>
+		ONNX is the Open Neural Network Exchange, and we take that name to heart! Many members of the
+		community upload their ONNX models to various repositories, and we want to make it easy for you
+		to find them. Below are some of the most popular repositories where you can find ONNX models:
+	</p>
+
+	<div class="my-8 grid grid-cols-1 md:grid-cols-2 gap-8">
+		{#each modelhubs as modelhub}
+			<div class="card bg-success image-full transition hover:scale-105">
+				<a rel="noopener noreferrer" target="_blank" href={modelhub.url} class="card-body">
+					<div class="grid grid-cols-5">
+                        <div class="h-full">
+                            <img src={modelhub.image} alt={modelhub.imagealt} class="w-24 h-24" />
+                        </div>
+						<div class="col-span-4">
+							<h2 class="card-title text-white">{modelhub.title}</h2>
+							<p class="text-white">{modelhub.description}</p>
+						</div>
+					</div>
+				</a>
+			</div>
+		{/each}
+	</div>
+
+	<h2 class="text-2xl">Can't find what you're looking for?</h2>
+	<p>
+		Convert to ONNX, optimize, and quantize your own models quickly and easily with <a
+			class="text-blue-700 underline"
+			href="https://github.com/microsoft/Olive/tree/main">Olive</a
+		>. Here's a quick snippet showing you how easy it can be done:
+	</p>
+	<div class="my-4 mockup-code bg-slate-300 dark:bg-primary">
+		<pre data-prefix="$" class="text-black"><code>pip install olive-ai onnxruntime optimum</code></pre>
+		<pre data-prefix=">" class="text-success dark:text-info"><code>olive auto-opt -m microsoft/Phi-3-mini-4k-instruct -o models/phi3-mini-4k</code></pre>
+	</div>
+</div>
diff --git a/src/routes/roadmap/+page.svelte b/src/routes/roadmap/+page.svelte
index bb3c97699f..8de1ba30e5 100644
--- a/src/routes/roadmap/+page.svelte
+++ b/src/routes/roadmap/+page.svelte
@@ -1,3 +1,18 @@
+<script>
+	let description = 'ONNX Runtime Release Roadmap - find the latest release information for ONNX Runtime.';
+	let keywords = 'onnx runtime, onnx runtime roadmap, onnx runtime release, onnx runtime 1.20';
+</script>
+<svelte:head>
+	<!-- Dynamic meta tags -->
+	<meta name="description" content={description} />
+	<meta name="keywords" content={keywords} />
+	<!-- Open Graph / Facebook -->
+	<meta property="og:description" content={description}/>
+	
+	<!-- Twitter -->
+	<meta property="twitter:description" content={description} />
+</svelte:head>
+
 <div class="container mx-auto px-8">
 	<h1 class="text-3xl">ONNX Runtime Release Roadmap</h1>
 	<p>