Skip to content

Commit

Permalink
Large UX updates, replaced banner, moved analytics, linted everything (
Browse files Browse the repository at this point in the history
…#20004)

https://maanavd.github.io/onnxruntime/

### Description
Many changes, most small, but quite a few. Listed here:

- Infinitely scrolling testimonial banner on homepage
- New Microsoft-approved cookie consent banner (only shows up in correct
regions, here's a screen of it working):
![image](https://github.com/microsoft/onnxruntime/assets/24942306/b210b55f-d0cb-413a-a5c7-7156e003414a)
You can duplicate this behavior if you want using: [this
link](https://eng.ms/docs/cloud-ai-platform/devdiv/one-engineering-system-1es/1es-docs/wcp/privacy/wcp-cookie-consent-api#cookie-consent-library---javascript:~:text=siteConsent.manageConsent()%3B%0A%20%20%20%20%7D-,How%20to%20test%20if%20banner%20is%20loading%20for%20EU%20visitors,-You%20can%20use)
- removed SAOS animations, relying on native tailwind animations
- ran a linting pass
- easter egg for hovering onnxruntime pinwheel

---------

Co-authored-by: MaanavD <[email protected]>
  • Loading branch information
MaanavD and MaanavD authored Mar 21, 2024
1 parent 2442ba9 commit e8b82b6
Show file tree
Hide file tree
Showing 36 changed files with 1,088 additions and 842 deletions.
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
94 changes: 94 additions & 0 deletions src/app.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
1 change: 1 addition & 0 deletions src/images/undraw/image_HF2.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
export let widthscale = 1;
export let heightscale = 1;
</script>

<svg
stroke="currentColor"
width={109 * widthscale}
Expand Down
1 change: 1 addition & 0 deletions src/images/undraw/image_HF3.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
export let widthscale = 1;
export let heightscale = 1;
</script>

<svg
stroke="currentColor"
width={110 * widthscale}
Expand Down
2 changes: 1 addition & 1 deletion src/images/undraw/image_events.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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)"
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import InfiniteMovingCards from './InfiniteMovingCards.svelte';

export { InfiniteMovingCards };
6 changes: 6 additions & 0 deletions src/lib/utils/cn.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
4 changes: 1 addition & 3 deletions src/routes/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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 />
Expand Down
47 changes: 18 additions & 29 deletions src/routes/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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
Expand Down
14 changes: 8 additions & 6 deletions src/routes/blogs/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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!',
Expand All @@ -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'
Expand Down Expand Up @@ -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:
Expand All @@ -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'
}
];
Expand Down
4 changes: 3 additions & 1 deletion src/routes/blogs/accelerating-llama-2/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/routes/blogs/blog-post-featured.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading

0 comments on commit e8b82b6

Please sign in to comment.