From d2cb6c36e6d7b4144bdb00113ed81461f469fad4 Mon Sep 17 00:00:00 2001
From: sophies927 <107952697+sophies927@users.noreply.github.com>
Date: Tue, 31 Oct 2023 18:05:04 +0000
Subject: [PATCH] Update Hugging Face landing page

---
 src/images/undraw/image_HF2.svelte  |   8 +-
 src/images/undraw/image_HF3.svelte  |   8 +-
 src/routes/huggingface/+page.svelte | 167 ++++++++++++++--------------
 3 files changed, 95 insertions(+), 88 deletions(-)

diff --git a/src/images/undraw/image_HF2.svelte b/src/images/undraw/image_HF2.svelte
index 94d99dfa34208..447e95dd79348 100644
--- a/src/images/undraw/image_HF2.svelte
+++ b/src/images/undraw/image_HF2.svelte
@@ -1,7 +1,11 @@
+<script>
+	export let widthscale = 1;
+	export let heightscale = 1;
+</script>
 <svg
 	stroke="currentColor"
-	width="109"
-	height="79"
+	width={109 * widthscale}
+	height={79 * heightscale}
 	viewBox="0 0 109 79"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/src/images/undraw/image_HF3.svelte b/src/images/undraw/image_HF3.svelte
index ff194f8ec2e13..70c6615f5d0de 100644
--- a/src/images/undraw/image_HF3.svelte
+++ b/src/images/undraw/image_HF3.svelte
@@ -1,7 +1,11 @@
+<script>
+	export let widthscale = 1;
+	export let heightscale = 1;
+</script>
 <svg
 	stroke="currentColor"
-	width="110"
-	height="81"
+	width={110 * widthscale}
+	height={81 * heightscale}
 	viewBox="0 0 110 81"
 	fill="none"
 	xmlns="http://www.w3.org/2000/svg"
diff --git a/src/routes/huggingface/+page.svelte b/src/routes/huggingface/+page.svelte
index d63375881744d..74bba932d02d6 100644
--- a/src/routes/huggingface/+page.svelte
+++ b/src/routes/huggingface/+page.svelte
@@ -6,7 +6,7 @@
 	import OnnxLight from '../../images/ONNX-Light.svelte';
 	const title = 'Hugging Face + ONNX Runtime';
 	const description =
-		'ONNX Runtime can be used to accelerate well over 100,000 of the models available on Hugging Face.';
+		'ONNX Runtime can be used to accelerate well over 130,000 of the models available on Hugging Face.';
 	const imgsrc = 'onnxruntimelogo';
 	const imgalt = 'ONNX Runtime Logo';
 </script>
@@ -27,7 +27,7 @@
 				{description}
 			</p>
 			<br />
-			<br>
+			<br />
 			<a
 				href="https://cloudblogs.microsoft.com/opensource/2023/10/04/accelerating-over-130000-hugging-face-models-with-onnx-runtime/"
 				class="btn btn-primary mr-0 mb-4 md:mr-4">Recent blog with Hugging Face →</a
@@ -40,110 +40,109 @@
 </div>
 
 <div class="container mx-auto px-10 my-10">
-	<div >
-		<div>
-			<h1 class="text-4xl pb-4">Supported Models</h1>
-			<p>
-				The top 30 most popular model families on Hugging Face are all supported by ONNX Runtime,
-				and over 80 Hugging Face model families in total boast ORT support. <span
-					class="hidden md:inline">The table outlines the models:</span
-				>
-			</p>
-			<br />
-			<p class="pb-4">
-				ONNX models can be found directly from the Hugging Face Model Hub in its ONNX model library.
-			</p>
-			<a href="https://huggingface.co/models?library=onnx" class="btn btn-primary"
-				>Check out Hugging Face's ONNX model library →</a
-			>
-			<br />
-			<br />
+	<div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-10">
+		<div class="col-span-2">
+			<h1 class="text-3xl pb-4">Export Hugging Face Models to ONNX</h1>
 			<p class="pb-4">
-				Hugging Face also provides ONNX support for a variety of other models not listed in the ONNX
-				model library. With Hugging Face Optimum, you can easily convert pretrained models to ONNX,
-				and Transformers.js lets you run Hugging Face Transformers directly from your browser!
+				Hugging Face provides many options for exporting models to ONNX, including an ONNX Export Space
+				for PyTorch models from the Hugging Face Model Hub.
 			</p>
-			<a
-				href="https://huggingface.co/docs/optimum/exporters/onnx/overview"
-				class="btn btn-primary mr-0 mb-4 md:mr-4">Learn more about Hugging Face Optimum →</a
+			<a href="https://huggingface.co/spaces/onnx/export" class="btn btn-primary"
+				>Export PyTorch models to ONNX →</a
 			>
-			<a href="https://huggingface.co/docs/transformers.js/index" class="btn btn-primary"
-				>Learn more about Transformers.js →</a
+			<a href="https://huggingface.co/docs/transformers/serialization" class="btn btn-primary"
+				>Other ONNX export options →</a
 			>
 		</div>
+		<div class="mx-auto md:pt-10">
+			<ImagesHf1 />
+		</div>
 	</div>
 </div>
 
 <div class="container mx-auto px-10 my-10">
 	<div class="divider" />
-	<div class="flex">
-		<h1 class="text-4xl pb-4">Export Hugging Face Models to ONNX</h1>
-		<div class="ml-5 hidden md:flex">
-			<ImagesHf1 />
+	<div>
+		<div>
+			<h1 class="text-3xl pb-4">Supported Models</h1>
+			<p class="pb-4">
+				The top 30 most popular model architectures on Hugging Face are all supported by ONNX
+				Runtime, and over 80 Hugging Face model architectures in total boast ORT support. This list
+				includes <a href="https://huggingface.co/models?other=bert" class="text-blue-500">BERT</a>,
+				<a href="https://huggingface.co/models?other=gpt2" class="text-blue-500">GPT2</a>,
+				<a href="https://huggingface.co/models?other=t5" class="text-blue-500">T5</a>,
+				<a href="https://huggingface.co/models?other=stable-diffusion" class="text-blue-500"
+					>Stable Diffusion</a
+				>,
+				<a href="https://huggingface.co/models?other=whisper" class="text-blue-500">Whisper</a>, and
+				many more.
+			</p>
+			<p class="pb-4">
+				ONNX models can be found directly from the Hugging Face Model Hub in its <a
+					href="https://huggingface.co/models?library=onnx"
+					class="text-blue-500">ONNX model library</a
+				>.
+			</p>
+			<p class="pb-4">
+				Hugging Face also provides ONNX support for a variety of other models not listed in the ONNX
+				model library. With <a
+					href="https://huggingface.co/docs/optimum/exporters/onnx/overview"
+					class="text-blue-500">Hugging Face Optimum</a
+				>, you can easily convert pretrained models to ONNX, and
+				<a href="https://huggingface.co/docs/transformers.js/index" class="text-blue-500"
+					>Transformers.js</a
+				> lets you run Hugging Face Transformers directly from your browser!
+			</p>
 		</div>
 	</div>
-	<h2 class="text-2xl">PyTorch Models</h2>
-	<p class="pb-4">
-		Hugging Face's ONNX Export Space allows users to easily export PyTorch models from the Hugging
-		Face Model Hub to ONNX.
-	</p>
-	<a href="https://huggingface.co/spaces/onnx/export" class="btn btn-primary"
-		>Try out the Hugging Face ONNX Export Space for yourself →</a
-	>
-	<br />
-	<br />
-	<h2 class="text-2xl">Other Models</h2>
-	<p class="pb-4">Hugging Face provides many alternatives for exporting models to ONNX.</p>
-	<a href="https://huggingface.co/docs/transformers/serialization" class="btn btn-primary"
-		>Other ONNX export options →</a
-	>
 </div>
+
 <div class="container mx-auto px-10 my-10">
 	<div class="divider" />
-	<div >
-		<div class="col-span-1">
-			<div class="flex">
-				<h1 class="text-4xl pb-4">Large Language Models</h1>
-				<div class="ml-5 hidden md:flex">
-					<ImageHf2 />
-				</div>
-			</div>
-			<p>
-				ONNX Runtime also supports many increasingly popular large language model (LLM) families,
-				including most of those available in the HF Model Hub. <span class="hidden md:inline"
-					>These model families are showcased in the table.</span
-				>
+	<div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-10">
+		<div class="col-span-2">
+			<h1 class="text-3xl pb-4">Large Language Models</h1>
+			<p class="pb-4">
+				ONNX Runtime also supports many increasingly popular large language model (LLM)
+				architectures, including <a
+					href="https://huggingface.co/models?other=llama"
+					class="text-blue-500">LLaMA</a
+				>,
+				<a href="https://huggingface.co/models?other=gpt_neo" class="text-blue-500">GPT Neo</a>,
+				<a href="https://huggingface.co/models?other=bloom" class="text-blue-500">BLOOM</a>, and
+				many more.
 			</p>
-			<br />
 			<p>
-				Hugging Face also provides a leaderboard with more detailed tracking and evaluation of
-				recently releases LLMs from the community.
+				Hugging Face also provides an <a
+					href="https://huggingface.co/spaces/HuggingFaceH4/open_llm_leaderboard"
+					class="text-blue-500">Open LLM Leaderboard</a
+				> with more detailed tracking and evaluation of recently releases LLMs from the community.
 			</p>
-			<br />
-			<a
-				class="btn btn-primary"
-				href="https://huggingface.co/spaces/HuggingFaceH4/open_llm_leaderboard"
-				>Hugging Face Open LLM Leaderboard →</a
-			>
+		</div>
+		<div class="hidden md:grid mx-auto">
+			<ImageHf2 widthscale={2} heightscale={2}/>
 		</div>
 	</div>
 </div>
+
 <div class="container mx-auto px-10 my-10">
 	<div class="divider" />
-	<div class="flex">
-		<h1 class="text-4xl pb-4">Cloud Models</h1>
-		<div class="ml-5 hidden md:flex">
-			<ImageHf3 />
+	<div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-10">
+		<div class="col-span-2">
+			<h1 class="text-3xl pb-4">Cloud Models</h1>
+			<p class="pb-4">
+				Models accelerated by ONNX Runtime can be easily deployed to the cloud through Azure Machine
+				Learning, which improves time to value, streamlines MLOps, and provides built-in security.
+			</p>
+			<p>
+				<a href="https://ml.azure.com/" class="text-blue-500">Azure Machine Learning</a> also publishes a
+				curated model list that is updated regularly and includes some of the most popular models at the
+				moment. Of the models on this list that are available on Hugging Face, there is currently Optimum
+				ONNX support for over 85%.
+			</p>
+		</div>
+		<div class="hidden md:grid mx-auto">
+			<ImageHf3 widthscale={2} heightscale={2}/>
 		</div>
 	</div>
-	<p>
-		Models accelerated by ONNX Runtime can be easily deployed to the cloud through Azure ML, which
-		improves time to value, streamlines MLOps, and provides built-in security.
-	</p>
-	<br />
-	<p>
-		Azure ML also publishes a curated model list that is updated regularly and includes some of the
-		most popular models at the moment. Of the models on this list that are available on Hugging
-		Face, there is currently Optimum ONNX support for over 85%.
-	</p>
-</div>
+</div>
\ No newline at end of file