diff --git a/package.json b/package.json index aa19ae266aeef..683971995f411 100644 --- 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 index 94ce373d1071d..c1dd1b1da773f 100644 --- a/src/app.html +++ b/src/app.html @@ -3,10 +3,104 @@ + %sveltekit.head% + + + + + + + +
%sveltekit.body%
+ diff --git a/src/images/undraw/image_HF2.svelte b/src/images/undraw/image_HF2.svelte index 447e95dd79348..612def068035d 100644 --- 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; + + + 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'); + } + } + }; + + +
+ +
diff --git a/src/lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.ts b/src/lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.ts new file mode 100644 index 0000000000000..c9223445db970 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..256f86ff7c5a7 --- /dev/null +++ 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 index 2fb5d7fa77ce3..6432a4a777508 100644 --- 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; {@html oneLight} - + 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 index 0a3982882a51c..69fe287e1e4a4 100644 --- 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 index 7b0def07a4361..38ab058d28a56 100644 --- 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 index 3164ebbf2c007..9fd316c14c555 100644 --- 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 index c49677e646326..9a394a16f19fc 100644 --- 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> diff --git a/src/routes/blogs/github-markdown-light.css b/src/routes/blogs/github-markdown-light.css index 8dad2aef4bcf9..1776b4cd0f002 100644 --- a/src/routes/blogs/github-markdown-light.css +++ b/src/routes/blogs/github-markdown-light.css @@ -1,27 +1,28 @@ ul { - list-style: circle !important; + list-style: circle !important; } -.w50{ - width: 35em; +.w50 { + width: 35em; } /*light*/ .markdown-body { - -ms-text-size-adjust: 100%; - -webkit-text-size-adjust: 100%; - margin: 0; - color: currentColor; - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; - font-size: 16px; - line-height: 1.5; - word-wrap: break-word; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + margin: 0; + color: currentColor; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, + sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; + font-size: 16px; + line-height: 1.5; + word-wrap: break-word; } .markdown-body .octicon { - display: inline-block; - fill: currentColor; - vertical-align: text-bottom; + display: inline-block; + fill: currentColor; + vertical-align: text-bottom; } .markdown-body h1:hover .anchor .octicon-link:before, @@ -30,246 +31,246 @@ ul { .markdown-body h4:hover .anchor .octicon-link:before, .markdown-body h5:hover .anchor .octicon-link:before, .markdown-body h6:hover .anchor .octicon-link:before { - width: 16px; - height: 16px; - content: ' '; - display: inline-block; - background-color: currentColor; - -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>"); - mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>"); + width: 16px; + height: 16px; + content: ' '; + display: inline-block; + background-color: currentColor; + -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>"); + mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>"); } .markdown-body details, .markdown-body figcaption, .markdown-body figure { - display: block; + display: block; } .markdown-body summary { - display: list-item; + display: list-item; } .markdown-body [hidden] { - display: none !important; + display: none !important; } .markdown-body a { - background-color: transparent; - color: #0969da; - text-decoration: none; + background-color: transparent; + color: #0969da; + text-decoration: none; } .markdown-body abbr[title] { - border-bottom: none; - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; + border-bottom: none; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; } .markdown-body b, .markdown-body strong { - font-weight: 600; + font-weight: 600; } .markdown-body dfn { - font-style: italic; + font-style: italic; } .markdown-body h1 { - margin: .67em 0; - font-weight: 600; - padding-bottom: .3em; - font-size: 2em; - border-bottom: 1px solid hsla(210,18%,87%,1); + margin: 0.67em 0; + font-weight: 600; + padding-bottom: 0.3em; + font-size: 2em; + border-bottom: 1px solid hsla(210, 18%, 87%, 1); } .markdown-body mark { - background-color: #fff8c5; - color: #1F2328; + background-color: #fff8c5; + color: #1f2328; } .markdown-body small { - font-size: 90%; + font-size: 90%; } .markdown-body sub, .markdown-body sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } .markdown-body sub { - bottom: -0.25em; + bottom: -0.25em; } .markdown-body sup { - top: -0.5em; + top: -0.5em; } .markdown-body img { - border-style: none; - max-width: 100%; - box-sizing: content-box; - background-color: #ffffff; + border-style: none; + max-width: 100%; + box-sizing: content-box; + background-color: #ffffff; } .markdown-body code, .markdown-body kbd, .markdown-body pre, .markdown-body samp { - font-family: monospace; - font-size: 1em; + font-family: monospace; + font-size: 1em; } .markdown-body figure { - margin: 1em 40px; + margin: 1em 40px; } .markdown-body hr { - box-sizing: content-box; - overflow: hidden; - background: transparent; - border-bottom: 1px solid hsla(210,18%,87%,1); - height: .25em; - padding: 0; - margin: 24px 0; - background-color: #d0d7de; - border: 0; + box-sizing: content-box; + overflow: hidden; + background: transparent; + border-bottom: 1px solid hsla(210, 18%, 87%, 1); + height: 0.25em; + padding: 0; + margin: 24px 0; + background-color: #d0d7de; + border: 0; } .markdown-body input { - font: inherit; - margin: 0; - overflow: visible; - font-family: inherit; - font-size: inherit; - line-height: inherit; + font: inherit; + margin: 0; + overflow: visible; + font-family: inherit; + font-size: inherit; + line-height: inherit; } -.markdown-body [type=button], -.markdown-body [type=reset], -.markdown-body [type=submit] { - -webkit-appearance: button; - appearance: button; +.markdown-body [type='button'], +.markdown-body [type='reset'], +.markdown-body [type='submit'] { + -webkit-appearance: button; + appearance: button; } -.markdown-body [type=checkbox], -.markdown-body [type=radio] { - box-sizing: border-box; - padding: 0; +.markdown-body [type='checkbox'], +.markdown-body [type='radio'] { + box-sizing: border-box; + padding: 0; } -.markdown-body [type=number]::-webkit-inner-spin-button, -.markdown-body [type=number]::-webkit-outer-spin-button { - height: auto; +.markdown-body [type='number']::-webkit-inner-spin-button, +.markdown-body [type='number']::-webkit-outer-spin-button { + height: auto; } -.markdown-body [type=search]::-webkit-search-cancel-button, -.markdown-body [type=search]::-webkit-search-decoration { - -webkit-appearance: none; - appearance: none; +.markdown-body [type='search']::-webkit-search-cancel-button, +.markdown-body [type='search']::-webkit-search-decoration { + -webkit-appearance: none; + appearance: none; } .markdown-body ::-webkit-input-placeholder { - color: inherit; - opacity: .54; + color: inherit; + opacity: 0.54; } .markdown-body ::-webkit-file-upload-button { - -webkit-appearance: button; - appearance: button; - font: inherit; + -webkit-appearance: button; + appearance: button; + font: inherit; } .markdown-body a:hover { - text-decoration: underline; + text-decoration: underline; } .markdown-body ::placeholder { - color: #6e7781; - opacity: 1; + color: #6e7781; + opacity: 1; } .markdown-body hr::before { - display: table; - content: ""; + display: table; + content: ''; } .markdown-body hr::after { - display: table; - clear: both; - content: ""; + display: table; + clear: both; + content: ''; } .markdown-body table { - border-spacing: 0; - border-collapse: collapse; - display: block; - width: max-content; - max-width: 100%; - overflow: auto; + border-spacing: 0; + border-collapse: collapse; + display: block; + width: max-content; + max-width: 100%; + overflow: auto; } .markdown-body td, .markdown-body th { - padding: 0; + padding: 0; } .markdown-body details summary { - cursor: pointer; + cursor: pointer; } -.markdown-body details:not([open])>*:not(summary) { - display: none !important; +.markdown-body details:not([open]) > *:not(summary) { + display: none !important; } .markdown-body a:focus, -.markdown-body [role=button]:focus, -.markdown-body input[type=radio]:focus, -.markdown-body input[type=checkbox]:focus { - outline: 2px solid #0969da; - outline-offset: -2px; - box-shadow: none; +.markdown-body [role='button']:focus, +.markdown-body input[type='radio']:focus, +.markdown-body input[type='checkbox']:focus { + outline: 2px solid #0969da; + outline-offset: -2px; + box-shadow: none; } .markdown-body a:focus:not(:focus-visible), -.markdown-body [role=button]:focus:not(:focus-visible), -.markdown-body input[type=radio]:focus:not(:focus-visible), -.markdown-body input[type=checkbox]:focus:not(:focus-visible) { - outline: solid 1px transparent; +.markdown-body [role='button']:focus:not(:focus-visible), +.markdown-body input[type='radio']:focus:not(:focus-visible), +.markdown-body input[type='checkbox']:focus:not(:focus-visible) { + outline: solid 1px transparent; } .markdown-body a:focus-visible, -.markdown-body [role=button]:focus-visible, -.markdown-body input[type=radio]:focus-visible, -.markdown-body input[type=checkbox]:focus-visible { - outline: 2px solid #0969da; - outline-offset: -2px; - box-shadow: none; +.markdown-body [role='button']:focus-visible, +.markdown-body input[type='radio']:focus-visible, +.markdown-body input[type='checkbox']:focus-visible { + outline: 2px solid #0969da; + outline-offset: -2px; + box-shadow: none; } .markdown-body a:not([class]):focus, .markdown-body a:not([class]):focus-visible, -.markdown-body input[type=radio]:focus, -.markdown-body input[type=radio]:focus-visible, -.markdown-body input[type=checkbox]:focus, -.markdown-body input[type=checkbox]:focus-visible { - outline-offset: 0; +.markdown-body input[type='radio']:focus, +.markdown-body input[type='radio']:focus-visible, +.markdown-body input[type='checkbox']:focus, +.markdown-body input[type='checkbox']:focus-visible { + outline-offset: 0; } .markdown-body kbd { - display: inline-block; - padding: 3px 5px; - font: 11px ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; - line-height: 10px; - color: #1F2328; - vertical-align: middle; - background-color: #f6f8fa; - border: solid 1px rgba(175,184,193,0.2); - border-bottom-color: rgba(175,184,193,0.2); - border-radius: 6px; - box-shadow: inset 0 -1px 0 rgba(175,184,193,0.2); + display: inline-block; + padding: 3px 5px; + font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + line-height: 10px; + color: #1f2328; + vertical-align: middle; + background-color: #f6f8fa; + border: solid 1px rgba(175, 184, 193, 0.2); + border-bottom-color: rgba(175, 184, 193, 0.2); + border-radius: 6px; + box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2); } .markdown-body h1, @@ -278,145 +279,145 @@ ul { .markdown-body h4, .markdown-body h5, .markdown-body h6 { - margin-top: 24px; - margin-bottom: 16px; - font-weight: 600; - line-height: 1.25; + margin-top: 24px; + margin-bottom: 16px; + font-weight: 600; + line-height: 1.25; } .markdown-body h2 { - font-weight: 600; - padding-bottom: .3em; - font-size: 1.5em; - /* border-bottom: 1px solid hsla(210,18%,87%,1); */ + font-weight: 600; + padding-bottom: 0.3em; + font-size: 1.5em; + /* border-bottom: 1px solid hsla(210,18%,87%,1); */ } .markdown-body h3 { - font-weight: 600; - font-size: 1.25em; + font-weight: 600; + font-size: 1.25em; } .markdown-body h4 { - font-weight: 600; - font-size: 1em; + font-weight: 600; + font-size: 1em; } .markdown-body h5 { - font-weight: 600; - font-size: .875em; + font-weight: 600; + font-size: 0.875em; } .markdown-body h6 { - font-weight: 600; - font-size: .85em; - color: #656d76; + font-weight: 600; + font-size: 0.85em; + color: #656d76; } .markdown-body p { - margin-top: 0; - margin-bottom: 10px; + margin-top: 0; + margin-bottom: 10px; } .markdown-body blockquote { - margin: 0; - padding: 0 1em; - color: #656d76; - border-left: .25em solid #d0d7de; + margin: 0; + padding: 0 1em; + color: #656d76; + border-left: 0.25em solid #d0d7de; } .markdown-body ul, .markdown-body ol { - margin-top: 0; - margin-bottom: 0; - padding-left: 2em; + margin-top: 0; + margin-bottom: 0; + padding-left: 2em; } .markdown-body ol ol, .markdown-body ul ol { - list-style-type: lower-roman; + list-style-type: lower-roman; } .markdown-body ul ul ol, .markdown-body ul ol ol, .markdown-body ol ul ol, .markdown-body ol ol ol { - list-style-type: lower-alpha; + list-style-type: lower-alpha; } .markdown-body dd { - margin-left: 0; + margin-left: 0; } .markdown-body tt, .markdown-body code, .markdown-body samp { - font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; - font-size: 12px; + font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + font-size: 12px; } .markdown-body pre { - margin-top: 0; - margin-bottom: 0; - font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace; - font-size: 12px; - word-wrap: normal; + margin-top: 0; + margin-bottom: 0; + font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; + font-size: 12px; + word-wrap: normal; } .markdown-body .octicon { - display: inline-block; - overflow: visible !important; - vertical-align: text-bottom; - fill: currentColor; + display: inline-block; + overflow: visible !important; + vertical-align: text-bottom; + fill: currentColor; } .markdown-body input::-webkit-outer-spin-button, .markdown-body input::-webkit-inner-spin-button { - margin: 0; - -webkit-appearance: none; - appearance: none; + margin: 0; + -webkit-appearance: none; + appearance: none; } .markdown-body .mr-2 { - margin-right: 8px !important; + margin-right: 8px !important; } .markdown-body::before { - display: table; - content: ""; + display: table; + content: ''; } .markdown-body::after { - display: table; - clear: both; - content: ""; + display: table; + clear: both; + content: ''; } -.markdown-body>*:first-child { - margin-top: 0 !important; +.markdown-body > *:first-child { + margin-top: 0 !important; } -.markdown-body>*:last-child { - margin-bottom: 0 !important; +.markdown-body > *:last-child { + margin-bottom: 0 !important; } .markdown-body a:not([href]) { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } .markdown-body .absent { - color: #d1242f; + color: #d1242f; } .markdown-body .anchor { - float: left; - padding-right: 4px; - margin-left: -20px; - line-height: 1; + float: left; + padding-right: 4px; + margin-left: -20px; + line-height: 1; } .markdown-body .anchor:focus { - outline: none; + outline: none; } .markdown-body p, @@ -427,16 +428,16 @@ ul { .markdown-body table, .markdown-body pre, .markdown-body details { - margin-top: 0; - margin-bottom: 16px; + margin-top: 0; + margin-bottom: 16px; } -.markdown-body blockquote>:first-child { - margin-top: 0; +.markdown-body blockquote > :first-child { + margin-top: 0; } -.markdown-body blockquote>:last-child { - margin-bottom: 0; +.markdown-body blockquote > :last-child { + margin-bottom: 0; } .markdown-body h1 .octicon-link, @@ -445,9 +446,9 @@ ul { .markdown-body h4 .octicon-link, .markdown-body h5 .octicon-link, .markdown-body h6 .octicon-link { - color: #1F2328; - vertical-align: middle; - visibility: hidden; + color: #1f2328; + vertical-align: middle; + visibility: hidden; } .markdown-body h1:hover .anchor, @@ -456,7 +457,7 @@ ul { .markdown-body h4:hover .anchor, .markdown-body h5:hover .anchor, .markdown-body h6:hover .anchor { - text-decoration: none; + text-decoration: none; } .markdown-body h1:hover .anchor .octicon-link, @@ -465,7 +466,7 @@ ul { .markdown-body h4:hover .anchor .octicon-link, .markdown-body h5:hover .anchor .octicon-link, .markdown-body h6:hover .anchor .octicon-link { - visibility: visible; + visibility: visible; } .markdown-body h1 tt, @@ -480,8 +481,8 @@ ul { .markdown-body h5 code, .markdown-body h6 tt, .markdown-body h6 code { - padding: 0 .2em; - font-size: inherit; + padding: 0 0.2em; + font-size: inherit; } .markdown-body summary h1, @@ -490,7 +491,7 @@ ul { .markdown-body summary h4, .markdown-body summary h5, .markdown-body summary h6 { - display: inline-block; + display: inline-block; } .markdown-body summary h1 .anchor, @@ -499,376 +500,376 @@ ul { .markdown-body summary h4 .anchor, .markdown-body summary h5 .anchor, .markdown-body summary h6 .anchor { - margin-left: -40px; + margin-left: -40px; } .markdown-body summary h1, .markdown-body summary h2 { - padding-bottom: 0; - border-bottom: 0; + padding-bottom: 0; + border-bottom: 0; } .markdown-body ul.no-list, .markdown-body ol.no-list { - padding: 0; - list-style-type: none; + padding: 0; + list-style-type: none; } -.markdown-body ol[type="a s"] { - list-style-type: lower-alpha; +.markdown-body ol[type='a s'] { + list-style-type: lower-alpha; } -.markdown-body ol[type="A s"] { - list-style-type: upper-alpha; +.markdown-body ol[type='A s'] { + list-style-type: upper-alpha; } -.markdown-body ol[type="i s"] { - list-style-type: lower-roman; +.markdown-body ol[type='i s'] { + list-style-type: lower-roman; } -.markdown-body ol[type="I s"] { - list-style-type: upper-roman; +.markdown-body ol[type='I s'] { + list-style-type: upper-roman; } -.markdown-body ol[type="1"] { - list-style-type: decimal; +.markdown-body ol[type='1'] { + list-style-type: decimal; } -.markdown-body div>ol:not([type]) { - list-style-type: decimal; +.markdown-body div > ol:not([type]) { + list-style-type: decimal; } .markdown-body ul ul, .markdown-body ul ol, .markdown-body ol ol, .markdown-body ol ul { - margin-top: 0; - margin-bottom: 0; + margin-top: 0; + margin-bottom: 0; } -.markdown-body li>p { - margin-top: 16px; +.markdown-body li > p { + margin-top: 16px; } -.markdown-body li+li { - margin-top: .25em; +.markdown-body li + li { + margin-top: 0.25em; } .markdown-body dl { - padding: 0; + padding: 0; } .markdown-body dl dt { - padding: 0; - margin-top: 16px; - font-size: 1em; - font-style: italic; - font-weight: 600; + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: 600; } .markdown-body dl dd { - padding: 0 16px; - margin-bottom: 16px; + padding: 0 16px; + margin-bottom: 16px; } .markdown-body table th { - font-weight: 600; + font-weight: 600; } .markdown-body table th, .markdown-body table td { - padding: 6px 13px; - border: 1px solid #d0d7de; + padding: 6px 13px; + border: 1px solid #d0d7de; } -.markdown-body table td>:last-child { - margin-bottom: 0; +.markdown-body table td > :last-child { + margin-bottom: 0; } .markdown-body table tr { - background-color: #ffffff; - border-top: 1px solid hsla(210,18%,87%,1); + background-color: #ffffff; + border-top: 1px solid hsla(210, 18%, 87%, 1); } .markdown-body table tr:nth-child(2n) { - background-color: #f6f8fa; + background-color: #f6f8fa; } .markdown-body table img { - background-color: transparent; + background-color: transparent; } -.markdown-body img[align=right] { - padding-left: 20px; +.markdown-body img[align='right'] { + padding-left: 20px; } -.markdown-body img[align=left] { - padding-right: 20px; +.markdown-body img[align='left'] { + padding-right: 20px; } .markdown-body .emoji { - max-width: none; - vertical-align: text-top; - background-color: transparent; + max-width: none; + vertical-align: text-top; + background-color: transparent; } .markdown-body span.frame { - display: block; - overflow: hidden; + display: block; + overflow: hidden; } -.markdown-body span.frame>span { - display: block; - float: left; - width: auto; - padding: 7px; - margin: 13px 0 0; - overflow: hidden; - border: 1px solid #d0d7de; +.markdown-body span.frame > span { + display: block; + float: left; + width: auto; + padding: 7px; + margin: 13px 0 0; + overflow: hidden; + border: 1px solid #d0d7de; } .markdown-body span.frame span img { - display: block; - float: left; + display: block; + float: left; } .markdown-body span.frame span span { - display: block; - padding: 5px 0 0; - clear: both; - color: #1F2328; + display: block; + padding: 5px 0 0; + clear: both; + color: #1f2328; } .markdown-body span.align-center { - display: block; - overflow: hidden; - clear: both; + display: block; + overflow: hidden; + clear: both; } -.markdown-body span.align-center>span { - display: block; - margin: 13px auto 0; - overflow: hidden; - text-align: center; +.markdown-body span.align-center > span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: center; } .markdown-body span.align-center span img { - margin: 0 auto; - text-align: center; + margin: 0 auto; + text-align: center; } .markdown-body span.align-right { - display: block; - overflow: hidden; - clear: both; + display: block; + overflow: hidden; + clear: both; } -.markdown-body span.align-right>span { - display: block; - margin: 13px 0 0; - overflow: hidden; - text-align: right; +.markdown-body span.align-right > span { + display: block; + margin: 13px 0 0; + overflow: hidden; + text-align: right; } .markdown-body span.align-right span img { - margin: 0; - text-align: right; + margin: 0; + text-align: right; } .markdown-body span.float-left { - display: block; - float: left; - margin-right: 13px; - overflow: hidden; + display: block; + float: left; + margin-right: 13px; + overflow: hidden; } .markdown-body span.float-left span { - margin: 13px 0 0; + margin: 13px 0 0; } .markdown-body span.float-right { - display: block; - float: right; - margin-left: 13px; - overflow: hidden; + display: block; + float: right; + margin-left: 13px; + overflow: hidden; } -.markdown-body span.float-right>span { - display: block; - margin: 13px auto 0; - overflow: hidden; - text-align: right; +.markdown-body span.float-right > span { + display: block; + margin: 13px auto 0; + overflow: hidden; + text-align: right; } .markdown-body code, .markdown-body tt { - padding: .2em .4em; - margin: 0; - font-size: 85%; - white-space: break-spaces; - background-color: rgba(175,184,193,0.2); - border-radius: 6px; + padding: 0.2em 0.4em; + margin: 0; + font-size: 85%; + white-space: break-spaces; + background-color: rgba(175, 184, 193, 0.2); + border-radius: 6px; } .markdown-body code br, .markdown-body tt br { - display: none; + display: none; } .markdown-body del code { - text-decoration: inherit; + text-decoration: inherit; } .markdown-body samp { - font-size: 85%; + font-size: 85%; } .markdown-body pre code { - font-size: 100%; + font-size: 100%; } -.markdown-body pre>code { - padding: 0; - margin: 0; - word-break: normal; - white-space: pre; - background: transparent; - border: 0; +.markdown-body pre > code { + padding: 0; + margin: 0; + word-break: normal; + white-space: pre; + background: transparent; + border: 0; } .markdown-body .highlight { - margin-bottom: 16px; + margin-bottom: 16px; } .markdown-body .highlight pre { - margin-bottom: 0; - word-break: normal; + margin-bottom: 0; + word-break: normal; } .markdown-body .highlight pre, .markdown-body pre { - padding: 16px; - overflow: auto; - font-size: 85%; - line-height: 1.45; - color: #1F2328; - background-color: #f6f8fa; - border-radius: 6px; + padding: 16px; + overflow: auto; + font-size: 85%; + line-height: 1.45; + color: #1f2328; + background-color: #f6f8fa; + border-radius: 6px; } .markdown-body pre code, .markdown-body pre tt { - display: inline; - max-width: auto; - padding: 0; - margin: 0; - overflow: visible; - line-height: inherit; - word-wrap: normal; - background-color: transparent; - border: 0; + display: inline; + max-width: auto; + padding: 0; + margin: 0; + overflow: visible; + line-height: inherit; + word-wrap: normal; + background-color: transparent; + border: 0; } .markdown-body .csv-data td, .markdown-body .csv-data th { - padding: 5px; - overflow: hidden; - font-size: 12px; - line-height: 1; - text-align: left; - white-space: nowrap; + padding: 5px; + overflow: hidden; + font-size: 12px; + line-height: 1; + text-align: left; + white-space: nowrap; } .markdown-body .csv-data .blob-num { - padding: 10px 8px 9px; - text-align: right; - background: #ffffff; - border: 0; + padding: 10px 8px 9px; + text-align: right; + background: #ffffff; + border: 0; } .markdown-body .csv-data tr { - border-top: 0; + border-top: 0; } .markdown-body .csv-data th { - font-weight: 600; - background: #f6f8fa; - border-top: 0; + font-weight: 600; + background: #f6f8fa; + border-top: 0; } .markdown-body [data-footnote-ref]::before { - content: "["; + content: '['; } .markdown-body [data-footnote-ref]::after { - content: "]"; + content: ']'; } .markdown-body .footnotes { - font-size: 12px; - color: #656d76; - border-top: 1px solid #d0d7de; + font-size: 12px; + color: #656d76; + border-top: 1px solid #d0d7de; } .markdown-body .footnotes ol { - padding-left: 16px; + padding-left: 16px; } .markdown-body .footnotes ol ul { - display: inline-block; - padding-left: 16px; - margin-top: 16px; + display: inline-block; + padding-left: 16px; + margin-top: 16px; } .markdown-body .footnotes li { - position: relative; + position: relative; } .markdown-body .footnotes li:target::before { - position: absolute; - top: -8px; - right: -8px; - bottom: -8px; - left: -24px; - pointer-events: none; - content: ""; - border: 2px solid #0969da; - border-radius: 6px; + position: absolute; + top: -8px; + right: -8px; + bottom: -8px; + left: -24px; + pointer-events: none; + content: ''; + border: 2px solid #0969da; + border-radius: 6px; } .markdown-body .footnotes li:target { - color: #1F2328; + color: #1f2328; } .markdown-body .footnotes .data-footnote-backref g-emoji { - font-family: monospace; + font-family: monospace; } .markdown-body .pl-c { - color: #57606a; + color: #57606a; } .markdown-body .pl-c1, .markdown-body .pl-s .pl-v { - color: #0550ae; + color: #0550ae; } .markdown-body .pl-e, .markdown-body .pl-en { - color: #6639ba; + color: #6639ba; } .markdown-body .pl-smi, .markdown-body .pl-s .pl-s1 { - color: #24292f; + color: #24292f; } .markdown-body .pl-ent { - color: #116329; + color: #116329; } .markdown-body .pl-k { - color: #cf222e; + color: #cf222e; } .markdown-body .pl-s, @@ -878,212 +879,211 @@ ul { .markdown-body .pl-sr .pl-cce, .markdown-body .pl-sr .pl-sre, .markdown-body .pl-sr .pl-sra { - color: #0a3069; + color: #0a3069; } .markdown-body .pl-v, .markdown-body .pl-smw { - color: #953800; + color: #953800; } .markdown-body .pl-bu { - color: #82071e; + color: #82071e; } .markdown-body .pl-ii { - color: #f6f8fa; - background-color: #82071e; + color: #f6f8fa; + background-color: #82071e; } .markdown-body .pl-c2 { - color: #f6f8fa; - background-color: #cf222e; + color: #f6f8fa; + background-color: #cf222e; } .markdown-body .pl-sr .pl-cce { - font-weight: bold; - color: #116329; + font-weight: bold; + color: #116329; } .markdown-body .pl-ml { - color: #3b2300; + color: #3b2300; } .markdown-body .pl-mh, .markdown-body .pl-mh .pl-en, .markdown-body .pl-ms { - font-weight: bold; - color: #0550ae; + font-weight: bold; + color: #0550ae; } .markdown-body .pl-mi { - font-style: italic; - color: #24292f; + font-style: italic; + color: #24292f; } .markdown-body .pl-mb { - font-weight: bold; - color: #24292f; + font-weight: bold; + color: #24292f; } .markdown-body .pl-md { - color: #82071e; - background-color: #ffebe9; + color: #82071e; + background-color: #ffebe9; } .markdown-body .pl-mi1 { - color: #116329; - background-color: #dafbe1; + color: #116329; + background-color: #dafbe1; } .markdown-body .pl-mc { - color: #953800; - background-color: #ffd8b5; + color: #953800; + background-color: #ffd8b5; } .markdown-body .pl-mi2 { - color: #eaeef2; - background-color: #0550ae; + color: #eaeef2; + background-color: #0550ae; } .markdown-body .pl-mdr { - font-weight: bold; - color: #8250df; + font-weight: bold; + color: #8250df; } .markdown-body .pl-ba { - color: #57606a; + color: #57606a; } .markdown-body .pl-sg { - color: #8c959f; + color: #8c959f; } .markdown-body .pl-corl { - text-decoration: underline; - color: #0a3069; + text-decoration: underline; + color: #0a3069; } .markdown-body g-emoji { - display: inline-block; - min-width: 1ch; - font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; - font-size: 1em; - font-style: normal !important; - font-weight: 400; - line-height: 1; - vertical-align: -0.075em; + display: inline-block; + min-width: 1ch; + font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-size: 1em; + font-style: normal !important; + font-weight: 400; + line-height: 1; + vertical-align: -0.075em; } .markdown-body g-emoji img { - width: 1em; - height: 1em; + width: 1em; + height: 1em; } .markdown-body .task-list-item { - list-style-type: none; + list-style-type: none; } .markdown-body .task-list-item label { - font-weight: 400; + font-weight: 400; } .markdown-body .task-list-item.enabled label { - cursor: pointer; + cursor: pointer; } -.markdown-body .task-list-item+.task-list-item { - margin-top: 4px; +.markdown-body .task-list-item + .task-list-item { + margin-top: 4px; } .markdown-body .task-list-item .handle { - display: none; + display: none; } .markdown-body .task-list-item-checkbox { - margin: 0 .2em .25em -1.4em; - vertical-align: middle; + margin: 0 0.2em 0.25em -1.4em; + vertical-align: middle; } .markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox { - margin: 0 -1.6em .25em .2em; + margin: 0 -1.6em 0.25em 0.2em; } .markdown-body .contains-task-list { - position: relative; + position: relative; } .markdown-body .contains-task-list:hover .task-list-item-convert-container, .markdown-body .contains-task-list:focus-within .task-list-item-convert-container { - display: block; - width: auto; - height: 24px; - overflow: visible; - clip: auto; + display: block; + width: auto; + height: 24px; + overflow: visible; + clip: auto; } .markdown-body ::-webkit-calendar-picker-indicator { - filter: invert(50%); + filter: invert(50%); } .markdown-body .markdown-alert { - padding: 8px 16px; - margin-bottom: 16px; - color: inherit; - border-left: .25em solid #d0d7de; + padding: 8px 16px; + margin-bottom: 16px; + color: inherit; + border-left: 0.25em solid #d0d7de; } -.markdown-body .markdown-alert>:first-child { - margin-top: 0; +.markdown-body .markdown-alert > :first-child { + margin-top: 0; } -.markdown-body .markdown-alert>:last-child { - margin-bottom: 0; +.markdown-body .markdown-alert > :last-child { + margin-bottom: 0; } .markdown-body .markdown-alert .markdown-alert-title { - display: flex; - font-weight: 500; - align-items: center; - line-height: 1; + display: flex; + font-weight: 500; + align-items: center; + line-height: 1; } .markdown-body .markdown-alert.markdown-alert-note { - border-left-color: #0969da; + border-left-color: #0969da; } .markdown-body .markdown-alert.markdown-alert-note .markdown-alert-title { - color: #0969da; + color: #0969da; } .markdown-body .markdown-alert.markdown-alert-important { - border-left-color: #8250df; + border-left-color: #8250df; } .markdown-body .markdown-alert.markdown-alert-important .markdown-alert-title { - color: #8250df; + color: #8250df; } .markdown-body .markdown-alert.markdown-alert-warning { - border-left-color: #9a6700; + border-left-color: #9a6700; } .markdown-body .markdown-alert.markdown-alert-warning .markdown-alert-title { - color: #9a6700; + color: #9a6700; } .markdown-body .markdown-alert.markdown-alert-tip { - border-left-color: #1f883d; + border-left-color: #1f883d; } .markdown-body .markdown-alert.markdown-alert-tip .markdown-alert-title { - color: #1a7f37; + color: #1a7f37; } .markdown-body .markdown-alert.markdown-alert-caution { - border-left-color: #cf222e; + border-left-color: #cf222e; } .markdown-body .markdown-alert.markdown-alert-caution .markdown-alert-title { - color: #d1242f; + color: #d1242f; } - diff --git a/src/routes/blogs/post.svelte b/src/routes/blogs/post.svelte index d89d7a6c55a14..2d93cbf875b15 100644 --- a/src/routes/blogs/post.svelte +++ b/src/routes/blogs/post.svelte @@ -31,10 +31,6 @@ * @type {undefined} */ export let updated; - /** - * @type {any} - */ - export let image; /** * @type {any} */ @@ -91,4 +87,3 @@ </article> </div> <Footer pathvar="" /> - diff --git a/src/routes/components/analytics.svelte b/src/routes/components/analytics.svelte deleted file mode 100644 index 7da5f304fa0f6..0000000000000 --- a/src/routes/components/analytics.svelte +++ /dev/null @@ -1,84 +0,0 @@ -<script> - import '@beyonk/gdpr-cookie-consent-banner/banner.css'; // optional, you can also define your own styles - import GdprBanner from '@beyonk/gdpr-cookie-consent-banner'; - 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 - } - } - function initAnalytics() { - // Google Analytics - gtag('consent', 'update', { - ad_storage: 'granted', - analytics_storage: 'granted' - }); - // Adobe Analytics - } -</script> - -<GdprBanner heading="Your Cookie Settings" cookieName="analytics" description="Your cookies are your choice! At ONNX Runtime, we use analytics cookies solely to track visits, helping create a better experience for you!" on:analytics={initAnalytics} showEditIcon={false} choices={choices}/> - -<svelte: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> - - -</svelte:head> diff --git a/src/routes/components/code-blocks.svelte b/src/routes/components/code-blocks.svelte index 52cd82738e381..0ba52e14cfeee 100644 --- a/src/routes/components/code-blocks.svelte +++ b/src/routes/components/code-blocks.svelte @@ -76,10 +76,7 @@ > Python </p> - <p - on:mouseenter={handleClick} - class="tab tab-lg {activeTab === 'C#' ? 'tab-active' : ''}" - > + <p on:mouseenter={handleClick} class="tab tab-lg {activeTab === 'C#' ? 'tab-active' : ''}"> C# </p> <p @@ -94,16 +91,12 @@ > Java </p> - <p - on:mouseenter={handleClick} - class="tab tab-lg {activeTab === 'C++' ? 'tab-active' : ''}" - > + <p on:mouseenter={handleClick} class="tab tab-lg {activeTab === 'C++' ? 'tab-active' : ''}"> C++ </p> <button on:click={handleClick} - class="tab tab-lg {activeTab === 'More..' ? 'tab-active' : ''}" - >More..</button + class="tab tab-lg {activeTab === 'More..' ? 'tab-active' : ''}">More..</button > </div> {#if activeTab === 'Python'} diff --git a/src/routes/components/cross-platform.svelte b/src/routes/components/cross-platform.svelte index 604a5f4307dbd..eb82ad4e2a21d 100644 --- a/src/routes/components/cross-platform.svelte +++ b/src/routes/components/cross-platform.svelte @@ -11,7 +11,9 @@ <h1 class="text-4xl">Cross-Platform</h1> <br /><br /> <p class="text-xl"> - Do you program in Python? C#? C++? Java? JavaScript? Rust? No problem. ONNX Runtime has you covered with support for many languages. And it runs on Linux, Windows, Mac, iOS, Android, and even in web browsers. + Do you program in Python? C#? C++? Java? JavaScript? Rust? No problem. ONNX Runtime has you + covered with support for many languages. And it runs on Linux, Windows, Mac, iOS, Android, + and even in web browsers. </p> </div> <div class="m-auto lg:hidden"> diff --git a/src/routes/components/customers.svelte b/src/routes/components/customers.svelte index 424a3c8b8613a..24a1403f53114 100644 --- a/src/routes/components/customers.svelte +++ b/src/routes/components/customers.svelte @@ -1,145 +1,207 @@ <script lang="ts"> - import { base } from '$app/paths'; - import anime from 'animejs'; + import InfiniteMovingCards from '$lib/components/ui/InfiniteMovingCards/InfiniteMovingCards.svelte'; import pytorchlogo from '../../images/logos/PyTorch_logo_black.svg'; import windowslogo from '../../images/logos/Windows_logo_and_wordmark.svg'; import huggingfacelogoTitle from '../../images/logos/hf-logo-with-title.svg'; + import adobeLogo from '../../images/logos/adobe-logo.png'; import amdLogo from '../../images/logos/amd-logo.png'; - import huggingfaceLogo from '../../images/logos/huggingface-logo.png'; + import antgroupLogo from '../../images/logos/antgroup-logo.png'; + import ATLASLogo from '../../images/logos/ATLAS-logo.png'; + import bazaarvoiceLogo from '../../images/logos/bazaarvoice-logo.png'; + import clearbladeLogo from '../../images/logos/clearblade-logo.png'; + import deezerLogo from '../../images/logos/deezer-logo.png'; + import hypefactorsLogo from '../../images/logos/hypefactors-logo.png'; + import infarmLogo from '../../images/logos/infarm-logo.png'; import intelLogo from '../../images/logos/intel-logo.png'; + import intelligenzaEticaLogo from '../../images/logos/intelligenza-etica-logo.png'; + import navitaireAmadeusLogo from '../../images/logos/navitaire-amadeus-logo.png'; + import PeakSpeedLogo from '../../images/logos/PeakSpeed_logo.png'; + import piecesLogo from '../../images/logos/pieces-logo.png'; + import redisLogo from '../../images/logos/redis-logo.png'; + import RockchipLogo from '../../images/logos/Rockchip-logo.png'; + import samtecLogo from '../../images/logos/samtec-logo.png'; + import sasLogo from '../../images/logos/sas-logo.png'; + import teradataLogo from '../../images/logos/teradata-logo.png'; + import topazlabsLogo from '../../images/logos/topazlabs-logo.png'; + import ueLogo from '../../images/logos/ue-logo.png'; + import usdaLogo from '../../images/logos/usda-logo.png'; + import vespaLogo from '../../images/logos/vespa-logo.png'; + import writerLogo from '../../images/logos/writer-logo.png'; + import xilinxLogo from '../../images/logos/xilinx-logo.png'; + import huggingfaceLogo from '../../images/logos/huggingface-logo.png'; import nvidiaLogo from '../../images/logos/nvidia.png'; - import adobeLogo from '../../images/logos/adobe-logo.png'; import oracleLogo from '../../images/logos/oracle-logo.png'; - import unrealEngineLogo from '../../images/logos/ue-logo.png'; - import { onMount } from 'svelte'; - // Prevents animations from being messed up when they first start - let interact = false; - onMount(() => { - anime({ - targets: '.partner', - translateY: -20, - direction: 'alternate', - loop: false, - delay: function (el, i, l) { - return 500 + i * 50; - }, - endDelay: function (el, i, l) { - return (l - i) * 50; - } - }); - setTimeout(() => { - interact = true; - }, 1000); - }); - - let handleEnter = (e: any) => { - if (interact) { - anime({ - targets: e.target, - scale: 1.1, - duration: 1500 - }); - } - }; - let handleLeave = (e: any) => { - if (interact) { - anime({ - targets: e.target, - scale: 1, - duration: 1500 - }); + const testimonials = [ + { + href: './testimonials#Adobe', + src: adobeLogo, + alt: 'Adobe' + }, + { + href: './testimonials#AMD', + src: amdLogo, + alt: 'AMD' + }, + { + href: './testimonials#Ant%20Group', + src: antgroupLogo, + alt: 'Ant Group' + }, + { + href: './testimonials#Atlas%20Experiment', + src: ATLASLogo, + alt: 'ATLAS' + }, + { + href: './testimonials#Bazaarvoice', + src: bazaarvoiceLogo, + alt: 'Bazaarvoice' + }, + { + href: './testimonials#ClearBlade', + src: clearbladeLogo, + alt: 'ClearBlade' + }, + { + href: './testimonials#Deezer', + src: deezerLogo, + alt: 'Deezer' + }, + { + href: './testimonials#Hugging%20Face', + src: huggingfaceLogo, + alt: 'Hugging Face' + }, + { + href: './testimonials#Hypefactors', + src: hypefactorsLogo, + alt: 'Hypefactors' + }, + { + href: './testimonials#InFarm', + src: infarmLogo, + alt: 'InFarm' + }, + { + href: './testimonials#Intel', + src: intelLogo, + alt: 'Intel' + }, + { + href: './testimonials#Intelligenza%20Etica', + src: intelligenzaEticaLogo, + alt: 'Intelligenza Etica' + }, + { + href: './testimonials#Navitaire', + src: navitaireAmadeusLogo, + alt: 'Navitaire' + }, + { + href: './testimonials#NVIDIA', + src: nvidiaLogo, + alt: 'NVIDIA' + }, + { + href: './testimonials#Oracle', + src: oracleLogo, + alt: 'Oracle' + }, + { + href: './testimonials#Peakspeed', + src: PeakSpeedLogo, + alt: 'Peakspeed' + }, + { + href: './testimonials#Pieces.app', + src: piecesLogo, + alt: 'Pieces' + }, + { + href: './testimonials#Redis', + src: redisLogo, + alt: 'Redis' + }, + { + href: './testimonials#Rockchip', + src: RockchipLogo, + alt: 'Rockchip' + }, + { + href: './testimonials#Samtec', + src: samtecLogo, + alt: 'Samtec' + }, + { + href: './testimonials#SAS', + src: sasLogo, + alt: 'SAS' + }, + { + href: './testimonials#Teradata', + src: teradataLogo, + alt: 'Teradata' + }, + { + href: './testimonials#Topaz%20Labs', + src: topazlabsLogo, + alt: 'Topaz Labs' + }, + { + href: './testimonials#Unreal%20Engine', + src: ueLogo, + alt: 'Unreal Engine' + }, + { + href: './testimonials#United%20States%20Department%20of%20Agriculture,%20Agricultural%20Research%20Service', + src: usdaLogo, + alt: 'USDA' + }, + { + href: './testimonials#Vespa.ai', + src: vespaLogo, + alt: 'Vespa' + }, + { + href: './testimonials#Writer', + src: writerLogo, + alt: 'Writer' + }, + { + href: './testimonials#Xilinx', + src: xilinxLogo, + alt: 'Xilinx' } - }; + ]; </script> -<div class="container mx-auto md:px-10 px-4 lg:my-5"> +<div class="lg:my-5"> <h1 class="text-3xl my-5 text-center">Trusted By</h1> <div class="divider" /> - <div - class="grid lg:grid-cols-8 md:grid-cols-4 grid-cols-2 gap-4 mx-auto justify-items-center pt-10" - > - <a - href="./testimonials#AMD" - on:mouseenter={handleEnter} - on:mouseleave={handleLeave} - class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full w-full" - > - <img class="h-20 mx-auto"src={amdLogo} alt="AMD" /> - </a> - <a - href="./testimonials#Hugging%20Face" - on:mouseenter={handleEnter} - on:mouseleave={handleLeave} - class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full w-full" - > - <img class="h-20 mx-auto"src={huggingfaceLogo} alt="HuggingFace" /> - </a> - <a - href="./testimonials#Intel" - on:mouseenter={handleEnter} - on:mouseleave={handleLeave} - class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full" - > - <img class="h-20 mx-auto"src={intelLogo} alt="Intel" /> - </a> - <a - href="./testimonials#NVIDIA" - on:mouseenter={handleEnter} - on:mouseleave={handleLeave} - class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full" - > - <img class="h-20 mx-auto"src={nvidiaLogo} alt="Nvidia" /> - </a> - <a - href="./testimonials#Adobe" - on:mouseenter={handleEnter} - on:mouseleave={handleLeave} - class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full" - > - <img class="h-20 mx-auto"src={adobeLogo} alt="Adobe" /> - </a> - <a - href="./testimonials#Unreal%20Engine" - on:mouseenter={handleEnter} - on:mouseleave={handleLeave} - class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full" - > - <img class="h-20 mx-auto"src={unrealEngineLogo} alt="Unreal Engine" /> - </a> - <a - href="./testimonials#Oracle" - on:mouseenter={handleEnter} - on:mouseleave={handleLeave} - class="partner bg-slate-300 border-solid border-2 border-secondary rounded w-full" - > - <img class="h-20 mx-auto"src={oracleLogo} alt="Oracle" /> - </a> - <a - on:mouseenter={handleEnter} - on:mouseleave={handleLeave} - href="./testimonials" - class="w-full partner bg-slate-300 border-solid border-2 border-secondary rounded flex items-center justify-center" - > - <p class="underline text-black">...and many more</p> - </a> - </div> - <h1 class="text-2xl pt-10 pb-4">Learn more about how to use ONNX Runtime with</h1> - <div class="grid md:grid-cols-3 grid-cols-1 gap-4 mx-auto pb-10"> - <a - href="./pytorch" - class="btn btn-primary bg-slate-300 border-solid border-2 border-secondary rounded h-full" - ><img class="px-10 py-5" src={pytorchlogo} alt="PyTorch Logo" /></a - > - <a - href="./windows" - class="btn btn-primary bg-slate-300 border-solid border-2 border-secondary rounded h-full" - ><img class="px-10 py-5" src={windowslogo} alt="Windows Logo" /></a - > - <a - href="./huggingface" - class="btn btn-primary bg-slate-300 border-solid border-2 border-secondary rounded h-full" - ><img class="px-10 py-5" src={huggingfacelogoTitle} alt="HuggingFace Logo" /></a - > + <InfiniteMovingCards + items={testimonials.sort(() => Math.random() - 0.5)} + direction="left" + speed="slow" + /> + <div class="container mx-auto md:px-16 px-8 lg:my-10"> + <h1 class="text-2xl pt-10 pb-4">Learn more about how to use ONNX Runtime with</h1> + <div class="grid md:grid-cols-3 grid-cols-1 gap-4 mx-auto pb-10"> + <a + href="./pytorch" + class="pt-2 hover:scale-105 transition duration-200 bg-slate-300 border-solid border-2 border-secondary rounded h-full" + ><img class="px-10 py-5" src={pytorchlogo} alt="PyTorch Logo" /></a + > + <a + href="./windows" + class="pt-2 hover:scale-105 transition duration-200 bg-slate-300 border-solid border-2 border-secondary rounded h-full" + ><img class="px-10 py-5" src={windowslogo} alt="Windows Logo" /></a + > + <a + href="./huggingface" + class=" hover:scale-105 transition duration-200 bg-slate-300 border-solid border-2 border-secondary rounded h-full" + ><img class="px-10 py-5" src={huggingfacelogoTitle} alt="HuggingFace Logo" /></a + > + </div> </div> </div> diff --git a/src/routes/components/generative-ai-hero.svelte b/src/routes/components/generative-ai-hero.svelte index 6bda375febdcd..97f7a7a1aab36 100644 --- a/src/routes/components/generative-ai-hero.svelte +++ b/src/routes/components/generative-ai-hero.svelte @@ -9,8 +9,10 @@ <h1 class="text-4xl">Generative AI</h1> <br /><br /> <p class="text-xl"> - Integrate the power of Generative AI and Large language Models (LLMs) in your apps and services with ONNX Runtime. No matter what language you develop in or what platform you need to run on, you can make use of state-of-the-art models - for image synthesis, text generation, and more. + Integrate the power of Generative AI and Large language Models (LLMs) in your apps and + services with ONNX Runtime. No matter what language you develop in or what platform you need + to run on, you can make use of state-of-the-art models for image synthesis, text generation, + and more. </p> <br /> <!-- a href="./generative-ai" class="btn btn-primary">Learn more about ORT & Generative AI →</a --> diff --git a/src/routes/components/hero.svelte b/src/routes/components/hero.svelte index 4c43f6c2d4478..295f8d550bb7e 100644 --- a/src/routes/components/hero.svelte +++ b/src/routes/components/hero.svelte @@ -11,7 +11,19 @@ import { fade, fly, blur } from 'svelte/transition'; import { quintOut } from 'svelte/easing'; - let words = ['Cross-Platform', 'GPU', 'Python', 'CPU', 'Mobile', 'C#', 'Edge', 'JavaScript', 'Java', 'C++', 'Browser']; + let words = [ + 'Cross-Platform', + 'GPU', + 'Python', + 'CPU', + 'Mobile', + 'C#', + 'Edge', + 'JavaScript', + 'Java', + 'C++', + 'Browser' + ]; let activeWord = 'Cross-Platform'; let currentWord = 0; let cycleWord = () => { @@ -69,20 +81,21 @@ <div class="hero-content md:my-20"> <div class="grid grid-cols-2 md:grid-cols-5 gap-4"> <div class="col-span-4 self-center md:mr-20"> - <h1 class="text-5xl">Accelerated - {#key activeWord} - <span - class="text-5xl" - in:fly={{ delay: 0, duration: 300, x: 200, y: 0, opacity: 1, easing: quintOut }} - > - {activeWord} - </span> - {/key} + <h1 class="text-5xl"> + Accelerated + {#key activeWord} + <span + class="text-5xl" + in:fly={{ delay: 0, duration: 300, x: 200, y: 0, opacity: 1, easing: quintOut }} + > + {activeWord} + </span> + {/key} </h1> <h1 class="text-5xl">Machine Learning</h1> <p class="py-3"> - Production-grade AI engine to speed up training and inferencing in your existing technology - stack. + Production-grade AI engine to speed up training and inferencing in your existing + technology stack. </p> <p class="text-xl my-4">In a rush? Get started easily:</p> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> @@ -93,7 +106,7 @@ <button aria-label="copy python code" on:click={() => copy(pythonCode)} - class="col-span-1 btn rounded-none h-full" + class="col-span-1 btn rounded-none h-full *:hover:scale-125 *:hover:transition *:hover:duration-200" ><span class="w-6 h-6"><FaRegClipboard /></span></button > </div> @@ -104,7 +117,7 @@ <button aria-label="copy nuget code" on:click={() => copy(nugetCode)} - class="col-span-1 btn rounded-none h-full" + class="col-span-1 btn rounded-none h-full *:hover:scale-125 *:hover:transition *:hover:duration-200" ><span class="w-6 h-6"><FaRegClipboard /></span></button > </div> @@ -118,7 +131,7 @@ > </p> </div> - <div class="hidden lg:inline mx-auto"> + <div class="hidden lg:inline mx-auto hover:rotate-180 transition duration-500"> <OnnxLight width={300} height={300} /> </div> </div> diff --git a/src/routes/components/performance.svelte b/src/routes/components/performance.svelte index 1725c88fdd06b..e58dd5a04562d 100644 --- a/src/routes/components/performance.svelte +++ b/src/routes/components/performance.svelte @@ -8,8 +8,13 @@ <h1 class="text-4xl">Performance</h1> <br /><br /> <p class="text-xl"> - CPU, GPU, NPU - no matter what hardware you run on, ONNX Runtime optimizes for latency, throughput, memory utilization, and binary size. In addition to excellent out-of-the-box performance for common usage patterns, additional - <a href="https://onnxruntime.ai/docs/performance/" class="text-blue-500">model optimization techniques</a> and runtime configurations are available to further improve performance for specific use cases and models. + CPU, GPU, NPU - no matter what hardware you run on, ONNX Runtime optimizes for latency, + throughput, memory utilization, and binary size. In addition to excellent out-of-the-box + performance for common usage patterns, additional + <a href="https://onnxruntime.ai/docs/performance/" class="text-blue-500" + >model optimization techniques</a + > and runtime configurations are available to further improve performance for specific use cases + and models. </p> </div> <div class="m-auto overflow:hidden"> diff --git a/src/routes/components/training-and-inference.svelte b/src/routes/components/training-and-inference.svelte index abead69e37142..9c584407184be 100644 --- a/src/routes/components/training-and-inference.svelte +++ b/src/routes/components/training-and-inference.svelte @@ -10,18 +10,20 @@ <div class="divider" /> <h1 class="text-4xl pb-2">ONNX Runtime Inferencing</h1> <p class="text-xl pb-4"> - ONNX Runtime powers AI in Microsoft products including Windows, Office, Azure Cognitive Services, and Bing, - as well as in thousands of other projects across the world. ONNX Runtime is cross-platform, supporting cloud, edge, web, and mobile experiences. + ONNX Runtime powers AI in Microsoft products including Windows, Office, Azure Cognitive + Services, and Bing, as well as in thousands of other projects across the world. ONNX Runtime is + cross-platform, supporting cloud, edge, web, and mobile experiences. </p> - <a href="./inference" class="btn btn-primary rounded-sm">Learn more about ONNX Runtime Inferencing →</a> + <a href="./inference" class="btn btn-primary rounded-sm" + >Learn more about ONNX Runtime Inferencing →</a + > <div class="grid grid-cols-1 md:grid-cols-2 gap-10 mt-10 my-4 md:mx-10"> <div class="bg-slate-300 p-4 rounded"> <div class="grid xl:grid-cols-4 place-items-center"> <div class="col-span-3 text-black"> <h1 class="text-2xl pb-2">Web Browsers</h1> <p class="text-lg"> - Run PyTorch and other ML models in the web browser with ONNX - Runtime Web. + Run PyTorch and other ML models in the web browser with ONNX Runtime Web. </p> </div> <div class="hidden xl:grid"> @@ -49,16 +51,23 @@ <p class="text-xl pb-4"> ONNX Runtime reduces costs for large model training and enables on-device training. </p> - <a href="./training" class="btn btn-primary rounded-sm">Learn more about ONNX Runtime Training →</a> + <a href="./training" class="btn btn-primary rounded-sm" + >Learn more about ONNX Runtime Training →</a + > <div class="grid grid-cols-1 md:grid-cols-2 gap-10 mt-10 my-4 md:mx-10"> <div class="bg-slate-300 p-4 rounded"> <div class="grid xl:grid-cols-4 place-items-center"> <div class="col-span-3 text-black"> <h1 class="text-2xl pb-2">Large Model Training</h1> <p class="text-lg"> - Accelerate training of popular models, - including <a href="https://huggingface.co/" class="text-blue-500">Hugging Face</a> models like Llama-2-7b and curated models from the <a href="https://ml.azure.com/" class="text-blue-500">Azure AI | - Machine Learning Studio</a> model catalog. + Accelerate training of popular models, including <a + href="https://huggingface.co/" + class="text-blue-500">Hugging Face</a + > + models like Llama-2-7b and curated models from the + <a href="https://ml.azure.com/" class="text-blue-500" + >Azure AI | Machine Learning Studio</a + > model catalog. </p> </div> <div class="hidden xl:grid"> diff --git a/src/routes/components/videogallery.svelte b/src/routes/components/videogallery.svelte index ccb64d6c818dc..c8229997d25e7 100644 --- a/src/routes/components/videogallery.svelte +++ b/src/routes/components/videogallery.svelte @@ -29,9 +29,9 @@ </div> {/each} </div> - {#if title == true} - <a href="https://www.youtube.com/@ONNXRuntime" class="btn rounded-sm btn-primary mr-4"> - ONNX Runtime YouTube channel → - </a> - {/if} + {#if title == true} + <a href="https://www.youtube.com/@ONNXRuntime" class="btn rounded-sm btn-primary mr-4"> + ONNX Runtime YouTube channel → + </a> + {/if} </div> diff --git a/src/routes/components/winarm.svelte b/src/routes/components/winarm.svelte index 2f1e42f602469..830f228b67005 100644 --- a/src/routes/components/winarm.svelte +++ b/src/routes/components/winarm.svelte @@ -19,24 +19,46 @@ Follow these steps to setup your device to use ONNX Runtime (ORT) with the built in NPU: <ol class="list-decimal ml-10"> <li> - <a class="text-blue-500" href="https://qpm.qualcomm.com/main/tools/details/qualcomm_ai_engine_direct">Download</a> the Qualcomm AI Engine Direct SDK (QNN SDK) + <a + class="text-blue-500" + href="https://qpm.qualcomm.com/main/tools/details/qualcomm_ai_engine_direct">Download</a + > the Qualcomm AI Engine Direct SDK (QNN SDK) + </li> + <li> + <a + class="text-blue-500" + href="https://www.nuget.org/packages/Microsoft.ML.OnnxRuntime.QNN">Download</a + > and install the ONNX Runtime with QNN package </li> - <li><a class="text-blue-500" href="https://www.nuget.org/packages/Microsoft.ML.OnnxRuntime.QNN">Download</a> and install the ONNX Runtime with QNN package</li> <li>Start using the ONNX Runtime API in your application.</li> </ol> - <br><br> + <br /><br /> <p class="text-xl text-blue-500">Optimizing models for the NPU</p> - <a class="text-blue-500" href="https://onnx.ai/">ONNX</a> is a standard format for representing ML models authored in frameworks like PyTorch, - TensorFlow, and others. ONNX Runtime can run any ONNX model, however to make use of the NPU, - you currently need to quantize the ONNX model to QDQ model. - <br> - See our <a class="text-blue-500" href="https://github.com/microsoft/onnxruntime-inference-examples/tree/main/c_cxx/QNN_EP/mobilenetv2_classification">C# tutorial</a> for an example of how this is done. + <a class="text-blue-500" href="https://onnx.ai/">ONNX</a> is a standard format for + representing ML models authored in frameworks like PyTorch, TensorFlow, and others. ONNX + Runtime can run any ONNX model, however to make use of the NPU, you currently need to quantize + the ONNX model to QDQ model. + <br /> + See our + <a + class="text-blue-500" + href="https://github.com/microsoft/onnxruntime-inference-examples/tree/main/c_cxx/QNN_EP/mobilenetv2_classification" + >C# tutorial</a + > + for an example of how this is done. <br /> Many models can be optimized for the NPU using this process. Even if a model cannot be optimized for the NPU, it can still be run by ONNX Runtime on the CPU. - <br><br> + <br /><br /> <p class="text-xl text-blue-500">Getting Help</p> - For help with ONNX Runtime, you can <a class="text-blue-500" href="https://github.com/microsoft/onnxruntime/discussions">start a discussion</a> on GitHub or <a class="text-blue-500" href="https://github.com/microsoft/onnxruntime/issues">file an issue</a>. + For help with ONNX Runtime, you can<a + class="text-blue-500" + href="https://github.com/microsoft/onnxruntime/discussions">start a discussion</a + > + on GitHub or + <a class="text-blue-500" href="https://github.com/microsoft/onnxruntime/issues" + >file an issue</a + >. </div> <div class="m-auto"> <img src={windowsdevkit} alt="Windows Dev kit" /> diff --git a/src/routes/events/event-post.svelte b/src/routes/events/event-post.svelte index 5a236a129793b..b1f4fc4a4da1a 100644 --- a/src/routes/events/event-post.svelte +++ b/src/routes/events/event-post.svelte @@ -6,7 +6,7 @@ export let link: string; export let image: string; export let imagealt: string; - export let linkarr: { name: string, link: string}[]; + export let linkarr: { name: string; link: string }[]; let handleEnter = (e: any) => { anime({ targets: e.target, diff --git a/src/routes/generative-ai/+page.svelte b/src/routes/generative-ai/+page.svelte index e538301c8c151..72fded08bc7e4 100644 --- a/src/routes/generative-ai/+page.svelte +++ b/src/routes/generative-ai/+page.svelte @@ -26,10 +26,9 @@ <div class="card-body"> <h2 class="card-title pb-4">Run Stable Diffusion outside of a Python environment</h2> <div class="card-actions"> - <a href="https://onnxruntime.ai/docs/tutorials/csharp/stable-diffusion-csharp.html" - class="btn-primary btn ">Inference Stable Diffusion →</a + class="btn-primary btn">Inference Stable Diffusion →</a > </div> </div> @@ -40,10 +39,9 @@ Speed up inference of Stable Diffusion on NVIDIA and AMD GPUs </h2> <div class="card-actions"> - <a href="https://medium.com/microsoftazure/accelerating-stable-diffusion-inference-with-onnx-runtime-203bd7728540" - class="btn btn-primary ">Accelerate Stable Diffusion →</a + class="btn btn-primary">Accelerate Stable Diffusion →</a > </div> </div> diff --git a/src/routes/getting-started/+page.svelte b/src/routes/getting-started/+page.svelte index d840cb1481e0b..fc1037ce6a216 100644 --- a/src/routes/getting-started/+page.svelte +++ b/src/routes/getting-started/+page.svelte @@ -14,9 +14,7 @@ <div class="container mx-auto px-10 my-10"> <h1 class="text-4xl pb-4">Get Started</h1> <h1 class="text-2xl pb-4">Installation Instructions</h1> - <div class="lg:hidden"> - The installation table is visible on desktop only. - </div> + <div class="lg:hidden">The installation table is visible on desktop only.</div> <div class="hidden lg:grid"> <Table /> </div> @@ -31,10 +29,14 @@ <div class="grid grid-cols-2 lg:grid-cols-3"> <div class="col-span-2"> <h1 class="text-4xl pb-4">GitHub</h1> - If you are interested in joining the ONNX Runtime open source community, you might want to join us on GitHub where you can - interact with other users and developers, participate in <a href="https://github.com/microsoft/onnxruntime/discussions" class="text-blue-500">discussions</a>, and get help with any - <a href="https://github.com/microsoft/onnxruntime/issues" class="text-blue-500">issues</a> you encounter. You can also contribute to the project by reporting bugs, suggesting features, - or submitting pull requests. + If you are interested in joining the ONNX Runtime open source community, you might want to join + us on GitHub where you can interact with other users and developers, participate in<a + href="https://github.com/microsoft/onnxruntime/discussions" + class="text-blue-500">discussions</a + >, and get help with any + <a href="https://github.com/microsoft/onnxruntime/issues" class="text-blue-500">issues</a> you + encounter. You can also contribute to the project by reporting bugs, suggesting features, or + submitting pull requests. <div class="py-4"> <a href="https://github.com/microsoft/onnxruntime" class="btn btn-primary rounded-sm mr-4" >ONNX Runtime GitHub →</a diff --git a/src/routes/getting-started/table.svelte b/src/routes/getting-started/table.svelte index 1ca074fddd06b..4554db0f4f9e0 100644 --- a/src/routes/getting-started/table.svelte +++ b/src/routes/getting-started/table.svelte @@ -53,9 +53,24 @@ const TrainingScenarios = ['Large Model Training', 'On-Device Training']; const TrainingScenarioIds = ['ot_large_model', 'ot_on_device']; const TrainingPlatforms = ['Linux', 'Windows', 'Mac', 'Android', 'iOS', 'Web browser']; - const TrainingPlatformIds = ['ot_linux', 'ot_windows', 'ot_mac', 'ot_android', 'ot_ios', 'ot_web']; + const TrainingPlatformIds = [ + 'ot_linux', + 'ot_windows', + 'ot_mac', + 'ot_android', + 'ot_ios', + 'ot_web' + ]; const TrainingAPIs = ['Python', 'C', 'C++', 'C#', 'Java', 'Obj-C', 'JavaScript']; - const TrainingAPIIds = ['ot_python', 'ot_c', 'ot_cplusplus', 'ot_csharp', 'ot_java', 'ot_objc', 'ot_js']; + const TrainingAPIIds = [ + 'ot_python', + 'ot_c', + 'ot_cplusplus', + 'ot_csharp', + 'ot_java', + 'ot_objc', + 'ot_js' + ]; const TrainingVersions = ['CUDA 11.8', 'CUDA 12.2', 'ROCm', 'CPU']; const TrainingVersionIds = ['ot_CUDA118', 'ot_CUDA122', 'ot_ROCm', 'ot_CPU']; const TrainingBuilds = ['Stable', 'Preview (Nightly)']; @@ -146,8 +161,8 @@ "Add 'onnxruntime-c' using CocoaPods or download the .tgz file from <a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.", 'mac,C++,X64,DefaultCPU': - "Add 'onnxruntime-c' using CocoaPods or download the .tgz file from <a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.", - + "Add 'onnxruntime-c' using CocoaPods or download the .tgz file from <a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.", + 'mac,C#,X64,DefaultCPU': "Download .tgz file from <a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>", @@ -163,16 +178,18 @@ 'mac,Python,ARM64,CoreML': 'pip install onnxruntime', 'mac,objectivec,X64,DefaultCPU': "Add 'onnxruntime-objc' using CocoaPods.", - + 'mac,objectivec,ARM64,DefaultCPU': "Add 'onnxruntime-objc' using CocoaPods.", - + 'mac,objectivec,X64,CoreML': "Add 'onnxruntime-objc' using CocoaPods.", - + 'mac,objectivec,ARM64,CoreML': "Add 'onnxruntime-objc' using CocoaPods.", - 'mac,C-API,X64,CoreML': "Add 'onnxruntime-c' using CocoaPods or download the .tgz file from <a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.", + 'mac,C-API,X64,CoreML': + "Add 'onnxruntime-c' using CocoaPods or download the .tgz file from <a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.", - 'mac,C++,X64,CoreML': "Add 'onnxruntime-c' using CocoaPods or download the .tgz file from <a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.", + 'mac,C++,X64,CoreML': + "Add 'onnxruntime-c' using CocoaPods or download the .tgz file from <a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.", 'linux,Python,X64,DefaultCPU': 'pip install onnxruntime', @@ -582,7 +599,7 @@ //mac m1 'mac,C-API,ARM64,CoreML': - "Add 'onnxruntime-c' using CocoaPods or download the .tgz file from <a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.", + "Add 'onnxruntime-c' using CocoaPods or download the .tgz file from <a class='text-blue-500' href='https://github.com/microsoft/onnxruntime/releases' target='_blank'>Github</a>.", 'mac,C#,ARM64,CoreML': "Install Nuget package <a class='text-blue-500' href='https://www.nuget.org/packages/Microsoft.ML.OnnxRuntime' target='_blank'>Microsoft.ML.OnnxRuntime</a> <br/>Refer to <a class='text-blue-500' href='http://www.onnxruntime.ai/docs/execution-providers/CoreML-ExecutionProvider.html#requirements' target='_blank'>docs</a> for requirements.", @@ -823,12 +840,9 @@ 'ot_ios,ot_on_device,ot_cplusplus,ot_X64,ot_CPU,ot_nightly': "Follow build instructions from <a class='text-blue-500' href='https://onnxruntime.ai/docs/build/ios.html' target='_blank'>here</a>", - 'ot_web,ot_on_device,ot_js,ot_X64,ot_CPU,ot_stable': - "npm install onnxruntime-web", - - 'ot_web,ot_on_device,ot_js,ot_X64,ot_CPU,ot_nightly': - "npm install onnxruntime-web@dev", + 'ot_web,ot_on_device,ot_js,ot_X64,ot_CPU,ot_stable': 'npm install onnxruntime-web', + 'ot_web,ot_on_device,ot_js,ot_X64,ot_CPU,ot_nightly': 'npm install onnxruntime-web@dev' }; onMount(() => { var supportedOperatingSystemsNew = [ @@ -1821,7 +1835,7 @@ Select the configuration you want to use and run the corresponding installation script. </p> <div> - <div class="tabs tabs-bordered "> + <div class="tabs tabs-bordered"> {#each tabs as tab, index} <li class="nav-item tab tab-lg" diff --git a/src/routes/huggingface/+page.svelte b/src/routes/huggingface/+page.svelte index 8cde17d354a7c..2560e0038232f 100644 --- a/src/routes/huggingface/+page.svelte +++ b/src/routes/huggingface/+page.svelte @@ -50,8 +50,9 @@ <a href="https://huggingface.co/spaces/onnx/export" class="btn btn-primary rounded-sm" >Export PyTorch models to ONNX →</a > - <a href="https://huggingface.co/docs/transformers/serialization" class="btn btn-primary rounded-sm" - >Other ONNX export options →</a + <a + href="https://huggingface.co/docs/transformers/serialization" + class="btn btn-primary rounded-sm">Other ONNX export options →</a > </div> <div class="mx-auto md:pt-10"> diff --git a/src/routes/inference/+page.svelte b/src/routes/inference/+page.svelte index 64811516ce070..2676d1a961ccc 100644 --- a/src/routes/inference/+page.svelte +++ b/src/routes/inference/+page.svelte @@ -42,7 +42,9 @@ <div class="grid gap-10 grid-cols-1 md:grid-cols-2 lg:grid-cols-4 mx-auto"> <div class="card bg-base-300"> <div class="card-body items-center text-center"> - <h2 class="card-title">Improve inference latency, throughput, memory utilization, and binary size</h2> + <h2 class="card-title"> + Improve inference latency, throughput, memory utilization, and binary size + </h2> </div> </div> <div class="card bg-base-300"> @@ -62,7 +64,6 @@ <h2 class="card-title">Deploy a classic ML Python model in a C#/C++/Java app</h2> </div> </div> - </div> </div> @@ -79,9 +80,8 @@ <div class="card bg-base-300"> <div class="card-body items-center text-center"> <h2 class="card-title">Image Classification</h2> - This example app uses image classification to continuously classify the objects - detected from the device's camera in real-time and displays the most probable inference results - on the screen. + This example app uses image classification to continuously classify the objects detected from + the device's camera in real-time and displays the most probable inference results on the screen. <div class="card-actions mt-auto mb-2 justify-center"> <a href="https://github.com/microsoft/onnxruntime-inference-examples/blob/main/mobile/examples/image_classification/android" @@ -93,7 +93,8 @@ <div class="card bg-base-300"> <div class="card-body items-center text-center"> <h2 class="card-title">Speech Recognition</h2> - This example app uses speech recognition to transcribe speech from the audio recorded by the device. + This example app uses speech recognition to transcribe speech from the audio recorded by the + device. <div class="card-actions mt-auto mb-2 justify-center"> <!-- <a href="https://github.com/microsoft/onnxruntime-inference-examples/blob/main/mobile/examples/speech_recognition/android" @@ -109,9 +110,9 @@ <div class="card bg-base-300"> <div class="card-body items-center text-center"> <h2 class="card-title">Object Detection</h2> - This example app uses object detection to continuously detect the objects in the - frames seen by the iOS device's back camera and display the detected object's bounding boxes, - detected class, and corresponding inference confidence. + This example app uses object detection to continuously detect the objects in the frames seen + by the iOS device's back camera and display the detected object's bounding boxes, detected + class, and corresponding inference confidence. <div class="card-actions mt-auto mb-2 justify-center"> <a href="https://github.com/microsoft/onnxruntime-inference-examples/blob/main/mobile/examples/object_detection/android" @@ -143,8 +144,7 @@ </div> <a href="https://github.com/microsoft/onnxruntime-inference-examples/tree/main/mobile" - class="text-2xl text-blue-500" - >See more examples of ONNX Runtime Mobile on GitHub. →</a + class="text-2xl text-blue-500">See more examples of ONNX Runtime Mobile on GitHub. →</a > </div> </div> @@ -155,7 +155,9 @@ <br /><br /> <p class="text-xl"> ONNX Runtime Web allows JavaScript developers to run and deploy machine learning models in - browsers, which provides cross-platform portability with a common implementation. This can simplify the distribution experience as it avoids additional libraries and driver installations. + browsers, which provides cross-platform portability with a common implementation. This can + simplify the distribution experience as it avoids additional libraries and driver + installations. </p> <br /> <a href="https://www.youtube.com/watch?v=vYzWrT3A7wQ" class="btn btn-primary" @@ -170,7 +172,8 @@ <h1 class="text-3xl">Examples</h1> <div class="grid gap-10 grid-cols-1 md:grid-cols-2"> <div class=""> - <p><br/> + <p> + <br /> <b>ONNX Runtime Web Demo</b> is an interactive demo portal that showcases live use of ONNX Runtime Web in VueJS. View these examples to experience the power of ONNX Runtime Web. </p> @@ -235,7 +238,8 @@ <div class="card bg-base-200"> <div class="card-body items-center text-center"> <h2 class="card-title">Natural Language Processing (NLP)</h2> - This example demonstrates how to create custom Excel functions to implement BERT NLP models with ONNX Runtime Web to enable deep learning in spreadsheet tasks. + This example demonstrates how to create custom Excel functions to implement BERT NLP models + with ONNX Runtime Web to enable deep learning in spreadsheet tasks. <div class="card-actions mt-auto mb-2 justify-center"> <a href="https://github.com/microsoft/onnxruntime-inference-examples/tree/main/js/ort-whisper" @@ -257,7 +261,10 @@ <div class="col-span-2"> <h1 class="text-4xl">On-Device Training</h1> <br /><br /> - <p class="text-xl">ONNX Runtime on-device training extends the Inference ecosystem to leverage data on the device to train models.</p> + <p class="text-xl"> + ONNX Runtime on-device training extends the Inference ecosystem to leverage data on the + device to train models. + </p> <br /> <a href="./training#on-device-training" class="btn btn-primary" >Learn more about on-device training →</a diff --git a/src/routes/testimonials/+page.svelte b/src/routes/testimonials/+page.svelte index f676454d085cd..8c3a9d05e088f 100644 --- a/src/routes/testimonials/+page.svelte +++ b/src/routes/testimonials/+page.svelte @@ -37,8 +37,7 @@ title: 'Adobe', quote: 'With ONNX Runtime, Adobe Target got flexibility and standardization in one package: flexibility for our customers to train ML models in the frameworks of their choice, and standardization to robustly deploy those models at scale for fast inference, to deliver true, real-time personalized experiences.', - author: - 'Georgiana Copil, Senior Computer Scientist, Adobe', + author: 'Georgiana Copil, Senior Computer Scientist, Adobe', imgsrc: adobelogo, imgalt: 'Adobe logo' }, diff --git a/src/routes/training/+page.svelte b/src/routes/training/+page.svelte index 45bacdfd063bd..6ebe639633755 100644 --- a/src/routes/training/+page.svelte +++ b/src/routes/training/+page.svelte @@ -26,11 +26,12 @@ <h1 class="text-3xl">Large Model Training</h1> <br /><br /> <p class="text-xl"> - ORTModule accelerates training of large transformer based PyTorch models. The training time and - training cost is reduced with a few lines of code change. It is built on top of highly successful and - proven technologies of ONNX Runtime and ONNX format. It is composable with technologies like DeepSpeed and - accelerates pre-training and finetuning for state of the art LLMs. It is integrated in the Hugging Face Optimum - library which provides an ORTTrainer API to use ONNX Runtime as the backend for training acceleration. + ORTModule accelerates training of large transformer based PyTorch models. The training time + and training cost is reduced with a few lines of code change. It is built on top of highly + successful and proven technologies of ONNX Runtime and ONNX format. It is composable with + technologies like DeepSpeed and accelerates pre-training and finetuning for state of the art + LLMs. It is integrated in the Hugging Face Optimum library which provides an ORTTrainer API + to use ONNX Runtime as the backend for training acceleration. </p> <br /> <div class="bg-white w-100 md:w-1/2 p-4"> @@ -146,16 +147,16 @@ <div class="container mx-auto px-10 my-10"> <div class="grid grid-cols-1 md:grid-cols-3 gap-4 lg:gap-10"> <div class="col-span-2"> - <h1 class="text-4xl" id = "on-device-training">On-Device Training</h1> + <h1 class="text-4xl" id="on-device-training">On-Device Training</h1> <br /><br /> <p class="text-xl"> On-Device Training refers to the process of training a model on an edge device, such as mobile phones, embedded devices, gaming consoles, web browsers, etc. This is in contrast to training a model on a server or a cloud. On-Device Training extends the Inference ecosystem - to leverage data on the device for providing customized user experiences on the edge. Once the model - is trained on the device, it can be used to get an Inference model for deployment, update - global weights for federated learning or create a checkpoint for future use. It - also preserves user privacy by training on the device. + to leverage data on the device for providing customized user experiences on the edge. Once + the model is trained on the device, it can be used to get an Inference model for deployment, + update global weights for federated learning or create a checkpoint for future use. It also + preserves user privacy by training on the device. </p> <br /> <a diff --git a/src/routes/winarm/+page.svelte b/src/routes/winarm/+page.svelte index ad2806bb019b5..5a3e479c4ebb3 100644 --- a/src/routes/winarm/+page.svelte +++ b/src/routes/winarm/+page.svelte @@ -1,4 +1,5 @@ <script> - import Winarm from "../components/winarm.svelte"; + import Winarm from '../components/winarm.svelte'; </script> -<Winarm/> \ No newline at end of file + +<Winarm /> diff --git a/src/routes/windows/+page.svelte b/src/routes/windows/+page.svelte index 7c1a574909abb..b6c7ab8703e94 100644 --- a/src/routes/windows/+page.svelte +++ b/src/routes/windows/+page.svelte @@ -98,7 +98,8 @@ <div class="card-actions"> <a href="https://github.com/microsoft/Windows-Machine-Learning/tree/master/Samples/WinMLSamplesGallery" - class="btn btn-primary hidden md:grid rounded-sm">Check out the Windows ML Sample Gallery →</a + class="btn btn-primary hidden md:grid rounded-sm" + >Check out the Windows ML Sample Gallery →</a > <a href="https://github.com/microsoft/Windows-Machine-Learning/tree/master/Samples/WinMLSamplesGallery" diff --git a/tailwind.config.js b/tailwind.config.js index a01ed66e2116f..bcabc53e26629 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,8 +1,22 @@ +import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette'; + /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.{html,svelte,js,ts}'], theme: { - extend: {} + extend: { + animation:{ + scroll: + 'scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite' + }, + keyframes:{ + scroll: { + to: { + transform: 'translate(calc(-50% - 0.5rem))' + } + } + } + } }, plugins: [require('daisyui')], daisyui: { @@ -27,3 +41,14 @@ export default { utils: true } }; + +function addVariablesForColors({ addBase, theme }) { + let allColors = flattenColorPalette(theme('colors')); + let newVars = Object.fromEntries( + Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) + ); + + addBase({ + ':root': newVars + }); +} \ No newline at end of file