Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Genai page addition #21862

Merged
merged 17 commits into from
Sep 16, 2024
Merged

Genai page addition #21862

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
413201f
Added autodesk testimonial.
MaanavD Aug 19, 2024
75b3607
Updated generative ai page. still WIP.
MaanavD Aug 26, 2024
6502cc3
Added autodesk image..again?
MaanavD Aug 26, 2024
680c063
Updated generative ai page. Should be final
MaanavD Sep 3, 2024
7b72a08
Updated links.
MaanavD Sep 4, 2024
681f78a
Fixed sizing issue.
MaanavD Sep 4, 2024
a61fab3
Updated generative ai page to include all genai instead of just api.
MaanavD Sep 5, 2024
b7ee398
Update src/routes/generative-ai/+page.svelte
MaanavD Sep 9, 2024
aac8795
Update src/routes/generative-ai/+page.svelte
MaanavD Sep 10, 2024
17bfb52
added natalie's suggestions.
MaanavD Sep 10, 2024
1cc299b
Merge branch 'gh-pages' into genai_page_addition
MaanavD Sep 11, 2024
177634d
More changes.
MaanavD Sep 12, 2024
0959589
Emojis, changed some colors.
MaanavD Sep 13, 2024
eef96b3
Hopefully fixed cookies?.
MaanavD Sep 13, 2024
499fe0e
Attempted image fix, updated models based on discussion.
MaanavD Sep 13, 2024
50f1e19
Cleanup.
MaanavD Sep 13, 2024
b0b9399
Updated req models link + change image margins
MaanavD Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/images/logos/autodesk-logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 6 additions & 0 deletions src/routes/components/customers.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import antgroupLogo from '../../images/logos/antgroup-logo.png';
import algoriddimLogo from '../../images/logos/algoriddim-logo.png';
import ATLASLogo from '../../images/logos/ATLAS-logo.png';
import autodeskLogo from '../../images/logos/autodesk-logo.png';
import bazaarvoiceLogo from '../../images/logos/bazaarvoice-logo.png';
import camoLogo from '../../images/logos/camo-logo.png';
import cephableLogo from '../../images/logos/cephable-logo.png';
Expand Down Expand Up @@ -61,6 +62,11 @@
src: ATLASLogo,
alt: 'ATLAS'
},
{
href: './testimonials#Autodesk',
src: autodeskLogo,
alt: 'Autodesk'
},
{
href: './testimonials#Bazaarvoice',
src: bazaarvoiceLogo,
Expand Down
2 changes: 1 addition & 1 deletion src/routes/components/generative-ai-hero.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
and more.
</p>
<br />
<a href="https://onnxruntime.ai/docs/genai" class="btn btn-primary">Learn more about ONNX Runtime & Generative AI →</a>
<a href="./generative-ai" class="btn btn-primary">Learn more about ONNX Runtime & Generative AI →</a>
</div>
<div class="m-auto overflow:hidden">
<Ortgenerativeai />
Expand Down
284 changes: 228 additions & 56 deletions src/routes/generative-ai/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,258 @@
<script lang="ts">
import LandingHero from '../components/landing-hero.svelte';
const title = 'Generative AI + ONNX Runtime';
import { fade } from 'svelte/transition';
import coffee from './coffee.png';
import genny from './genny.png';
import vision_ui from './vision_UI.png';
import mobile from './mobile.png';
import desktop from './desktop.png';
import cloud from './browser.png';
import aibrain from './aibrain.webp'
const title = 'Generative AI';
const description =
'Integrate the power of generative AI in your apps and services with ONNX Runtime. Broad platform support and deep optimizations empower usage of state-of-the-art models for image synthesis, text generation, and more.';
'Integrate the power of generative AI in your apps and services with ONNX Runtime. Broad platform support and deep optimizations empower usage of state-of-the-art models for text generation, audio synthesis, and more.';
MaanavD marked this conversation as resolved.
Show resolved Hide resolved
const imgsrc = 'onnxruntimelogo';
const imgalt = 'ONNX Runtime Logo';
import stablediffusion1 from '../../images/StableDiffusion1.webp';
import stablediffusion2 from '../../images/StableDiffusion2.webp';
let image = 'https://i.ibb.co/0YBy62j/ORT-icon-for-light-bg.png'
let imageSquare = 'https://i.ibb.co/0YBy62j/ORT-icon-for-light-bg.png'
let authors = ['']
let keywords = 'onnxruntime, onnx runtime generative ai, onnx runtime generative ai models, onnx runtime generative ai deployment, onnx runtime generative ai performance, onnx runtime generative ai time to market, onnx runtime generative ai deploy anywhere, onnx runtime generative ai boost performance, onnx runtime generative ai improve time to market, onnx runtime generative ai production ready, onnx runtime generative ai lower latency, onnx runtime generative ai higher throughput, onnx runtime generative ai get innovations into production faster, onnx runtime generative ai testimonials, onnx runtime generative ai performance enhancements, onnx runtime generative ai production ready, onnx runtime generative ai lower latency, onnx runtime generative ai higher throughput, onnx runtime generative ai get innovations into production faster, onnx runtime generative ai testimonials, onnx runtime generative ai performance enhancements'
let image = 'https://i.ibb.co/0YBy62j/ORT-icon-for-light-bg.png';
let imageSquare = 'https://i.ibb.co/0YBy62j/ORT-icon-for-light-bg.png';
let authors = [''];
let keywords =
MaanavD marked this conversation as resolved.
Show resolved Hide resolved
'onnxruntime, onnx runtime generative ai, onnx runtime generative ai models, onnx runtime generative ai deployment, onnx runtime generative ai performance, onnx runtime generative ai time to market, onnx runtime generative ai deploy anywhere, onnx runtime generative ai boost performance, onnx runtime generative ai improve time to market, onnx runtime generative ai production ready, onnx runtime generative ai lower latency, onnx runtime generative ai higher throughput, onnx runtime generative ai get innovations into production faster, onnx runtime generative ai testimonials, onnx runtime generative ai performance enhancements, onnx runtime generative ai production ready, onnx runtime generative ai lower latency, onnx runtime generative ai higher throughput, onnx runtime generative ai get innovations into production faster, onnx runtime generative ai testimonials, onnx runtime generative ai performance enhancements';
let cycleWords = ['Desktop', 'Mobile', 'Cloud'];
let cycleIndex = 0;
const interval = setInterval(() => {
cycleIndex = (cycleIndex + 1) % cycleWords.length;
}, 3000);

// Cleanup interval on component destruction
import { onDestroy } from 'svelte';
onDestroy(() => {
clearInterval(interval);
});
</script>

<svelte:head>
<!-- Dynamic meta tags -->
<meta name="description" content={description} />
<meta name="image" content={image} />
<meta name="image" content={aibrain} />
<meta name="author" content={authors.join(', ')} />
<meta name="keywords" content={keywords} />
<!-- Open Graph / Facebook -->
<meta property="og:description" content={description}/>
<meta property="og:image" content={image} />
<meta property="og:description" content={description} />
<meta property="og:image" content={aibrain} />

<!-- Twitter -->
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={image} />
<meta property="twitter:card" content={imageSquare} />
<meta property="twitter:image" content={aibrain} />
<meta property="twitter:card" content={aibrain} />
</svelte:head>

<LandingHero {title} {description} {imgsrc} {imgalt} />
<div class="container mx-auto px-10 my-10">
<h1 class="text-4xl">Stable Diffusion + ONNX Runtime</h1>
<p class="pb-4">Use ONNX Runtime to accelerate this popular image generation model.</p>
<h2 class="text-3xl pb-4">Benefits</h2>
<div class="grid gap-10 grid-cols-1 lg:grid-cols-2 pb-4">
<div class="card bg-base-300">
<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
>
<div class="my-8 grid grid-cols-1 md:grid-cols-4 gap-4">
<img class="m-auto rounded-xl" src={aibrain} alt="Representing generative AI">
<div class="col-span-3 my-auto">

<h2 class="text-3xl">What is Generative AI?</h2>
<p>
Generative AI refers to a type of artificial intelligence that creates new content—such as
MaanavD marked this conversation as resolved.
Show resolved Hide resolved
text, images, audio, or code—based on patterns learned from existing data. Unlike
traditional AI models, which primarily classify or predict based on given inputs, generative
AI models produce entirely new outputs.
<br /><br />
They accomplish this through advanced techniques like deep learning, often using models such
as Transformers and Generative Adversarial Networks (GANs). Examples include AI that generates
human-like text responses, creates realistic images from descriptions, or composes music. Generative
AI is driving innovation across industries by enabling personalized experiences, automating creative
processes, and opening new possibilities for content generation!
MaanavD marked this conversation as resolved.
Show resolved Hide resolved
</p>
</div>

</div>
<div class="divider" />
<div class="">
<div class="">
<h2 class="text-3xl">Generative AI models</h2>

</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 my-8 gap-4">
<div class="flex flex-col h-full gap-4">
<div class="flex-1">
<h3 class="text-2xl">Text Generation Models</h3>
<p>
Text generation models are AI systems designed to generate human-like text based on
prompts. They're used in chatbots, content creation, summarization, and creative
writing. Check out our phi-3 and mistral demos below:
</p>
</div>

<div class="grid gap-4 grid-cols-1 md:grid-cols-2 mt-auto">
<a href="https://github.com/microsoft/onnxruntime-genai/blob/main/examples/python/phi-3-tutorial.md" class="btn btn-primary btn-block">Phi-3</a>
<a href="https://github.com/microsoft/onnxruntime-inference-examples/tree/main/python/models/mistral" class="btn btn-primary btn-block">Mistral</a>
MaanavD marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>

<div class="mx-auto flex flex-col gap-4 h-full">
<div class="flex-1">
<h3 class="text-2xl">Image Generation Models</h3>
<p>
Image generation models use AI to create visuals from text descriptions or other inputs.
These models generate artwork, realistic images, and visual content for design and media
applications. Check out Stable Diffusion for a great example!
</p>
</div>
<div class="grid gap-4 grid-cols-1 mt-auto">
<a href="https://github.com/microsoft/onnxruntime-inference-examples/tree/77989cff19f102300e3c4f99b957b55f74daecb4/js/sd-turbo" class="btn btn-primary btn-block">Stable Diffusion</a>
</div>
</div>

<div class="mx-auto flex flex-col gap-4 h-full">
<div class="flex-1">
<h3 class="text-2xl">Audio Models</h3>
<p>
Many audio models transcribe text from audio, but audio generation models exist too, using AI to create sound, music, or speech based on input data.
Check out Whisper and its audio recognition capabilities:
</p>
</div>
<div class="grid gap-4 grid-cols-1 mt-auto">
<a href="https://github.com/microsoft/onnxruntime-inference-examples/tree/main/js/ort-whisper" class="btn btn-primary btn-block">Whisper</a>
</div>
</div>

<div class="mx-auto flex flex-col gap-4 h-full">
<div class="flex-1">
<h3 class="text-2xl">Other Models</h3>
<p>
Other generative models create diverse outputs like code, video, or 3D designs. These
models expand creative possibilities, enabling automation and innovation in fields
ranging from software development to digital art.
</div>
<div class="grid gap-4 grid-cols-1 mt-auto">
<a href="https://github.com/microsoft/onnxruntime-genai" class="btn btn-primary btn-block">Request a model on GitHub</a>
</div>
</div>

</div>
<div class="card bg-base-300">
<div class="card-body">
<h2 class="card-title pb-4">
Speed up inference of Stable Diffusion on NVIDIA and AMD GPUs
</div>
<div class="divider" />
<div class="">
<h2 class="text-3xl">ONNX Runtime ❤️ Generative AI</h2>
<p>
Use ONNX Runtime for its high performance, scalability, and flexibility in deploying
generative AI models. With support for diverse frameworks and hardware acceleration, it
ensures efficient, cost-effective model inference across various environments.
</p>
<div class="grid grid-cols-1 lg:grid-cols-2 my-8">
<div class="">
<h2 class="text-2xl text-center">
Run ONNX Runtime on:
</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
>
<h2 class="text-center text-4xl">
{#key cycleIndex}
<strong in:fade={{ duration: 1000 }}>{cycleWords[cycleIndex]}</strong>
<img
height="512px"
width="512px"
class="mx-auto mt-4"
in:fade={{ duration: 1000 }}
src={cycleIndex == 0 ? desktop : cycleIndex == 1 ? mobile : cloud}
alt="Desktop, mobile, and cloud usage of ONNX Runtime Gen AI"
/>
{/key}
</h2>
</div>
<!-- <div class="my-auto">
<a href="" class="btn btn-primary btn-block m-4">Run on Desktop</a>
<a href="" class="btn btn-primary btn-block m-4">Run on Mobile</a>
<a href="" class="btn btn-primary btn-block m-4">Run in Browser</a>
</div> -->
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-2 my-8">
<div class="card bg-base-300 text-neutral-content">
<div class="card-body items-center text-center">
<h2 class="card-title">Multiplatform</h2>
<p>Whether it be Desktop, Mobile, Browser, or the Cloud, run ONNX Runtime on the platform of your choosing!</p>
MaanavD marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
<div class="card bg-base-300 text-neutral-content">
<div class="card-body items-center text-center">
<h2 class="card-title">On Device</h2>
<p>Run ONNX Runtime on device and inference privately and with significant cost savings. When you consider hybrid scenarios, the possibilities are endless!</p>
</div>
</div>
<div class="card bg-base-300 text-neutral-content">
<div class="card-body items-center text-center">
<h2 class="card-title">Multimodal compatibility</h2>
<p>You aren't limited to just LLMs with ONNX Runtime - you can use your favourite vision or omni models too.</p>
</div>
</div>
<div class="card bg-base-300 text-neutral-content">
<div class="card-body items-center text-center">
<h2 class="card-title">Easy to use!</h2>
<p>Getting ramped up is super easy. Get started using any of the various examples we have on this page!</p>
</div>
</div>
</div>
</div>

</div>
<h2 class="text-3xl">Performance</h2>
<p class="pb-4">The average latency in seconds on Stable Diffusion v1.5 and v2.1 models:</p>
<div class="grid gap-10 grid-cols-1 md:grid-cols-2 pb-10">
<div class="">
<img src={stablediffusion1} alt="Stable Diffusion v1.5 latency graphs" />
</div>
<div class="">
<h3 class="text-2xl">Tutorials & Demos</h3>
MaanavD marked this conversation as resolved.
Show resolved Hide resolved
<p>
Raring to go? Bring your models to all platforms and get started with any of the following
tutorials and demos:
</p>
<div class="">
<img src={stablediffusion2} alt="Stable Diffusion v2.1 latency graphs" />
<div class="grid grid-cols-1 gap-4 lg:grid-cols-3 my-8 ">
<div class="card bg-base-100 image-full sm:w-80 mx-auto">
<figure>
<img class="brightness-50" src={coffee} alt="A cappuccino used to inference with Phi3 vision" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title text-white">Phi-3 Vision</h2>
<p class="text-white">
A Desktop app demo to interact with text and images simultaneously.
</p>
<div class="card-actions justify-end">
<a
href="https://onnxruntime.ai/docs/genai/tutorials/phi3-v.html"
class="btn btn-primary">Try it out!</a
>
</div>
</div>
</div>
<div class="card bg-base-100 image-full sm:w-80 mx-auto">
<figure>
<img class="brightness-50" src={vision_ui} alt="UI of the vision LLM chat app" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title text-white">LLM Chat App</h2>
<p class="text-white">
An LLM chat app with UI. Pick your favourite model and get chatting!
</p>
<div class="card-actions justify-end">
<a
href="https://github.com/microsoft/onnxruntime-genai/tree/main/examples/chat_app"
class="btn btn-primary">Try it out!</a
>
</div>
</div>
</div>
<div class="card bg-base-100 image-full sm:w-80 mx-auto">
<figure>
<img class="brightness-50" src={genny} alt="Genny's model testing UI" />
</figure>
<div class="card-body items-center text-center">
<h2 class="card-title text-white">Genny (model tester)</h2>
<p class="text-white">A demo app to debug and test models with ORT GenAI.</p>
<div class="card-actions justify-end">
<a
href="https://github.com/microsoft/onnxruntime-genai/tree/main/examples/csharp/Genny"
class="btn btn-primary">Try it out!</a
>
</div>
</div>
</div>
</div>
</div>
</div>
<h2 class="text-3xl">Large Language Models + ONNX Runtime</h2>
<p class="pb-4">
ONNX Runtime supports many popular large language model (LLM) families in the Hugging Face Model
Hub. These, along with thousands of other models, are easily convertible to ONNX using the
Optimum API.
</p>
<div class="">
<a href="https://huggingface.co/models?other=llama" class="btn btn-primary">LLaMA →</a>
<a href="https://huggingface.co/models?other=gpt_neo" class="btn btn-primary">GPT Neo →</a>
<a href="https://huggingface.co/models?other=bloom" class="btn btn-primary">BLOOM →</a>
<a href="https://huggingface.co/models?other=opt" class="btn btn-primary">OPT →</a>
<a href="https://huggingface.co/models?other=gpt-j" class="btn btn-primary">GPT-J →</a>
<a href="https://huggingface.co/models?other=flan-t5" class="btn btn-primary">FLAN-T5 →</a>
</div>
</div>
Binary file added src/routes/generative-ai/aibrain.webp
View file
Open in desktop
Binary file not shown.
Binary file added src/routes/generative-ai/browser.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/routes/generative-ai/coffee.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/routes/generative-ai/desktop.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/routes/generative-ai/genny.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/routes/generative-ai/mobile.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/routes/generative-ai/vision_UI.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions src/routes/testimonials/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import antgrouplogo from '../../images/logos/antgroup-logo.png';
import algoriddimLogo from '../../images/logos/algoriddim-logo.png';
import atlaslogo from '../../images/logos/ATLAS-logo.png';
import autodesklogo from '../../images/logos/autodesk-logo.png';
import bazaarvoicelogo from '../../images/logos/bazaarvoice-logo.png';
import camologo from '../../images/logos/camo-logo.png';
import cephablelogo from '../../images/logos/cephable-logo.png';
Expand Down Expand Up @@ -77,6 +78,14 @@
imgsrc: atlaslogo,
imgalt: 'Atlas Experiment logo'
},
{
title: 'Autodesk',
quote:
"Autodesk Flame's use of ONNX Runtime offers major advantages with cross-platform compatibility and performance, providing artists the flexibility and interactivity they expect. This allows them to make use of machine learning models directly in Flame's creative toolset, augmenting the quality of their work and increasing the software's expandability. Microsoft's ONNX Runtime team has provided expert guidance and support throughout the development process, enabling us to put AI-powered creative tools in the hands of artists seeking high-quality VFX and finishing solutions.",
author: 'Louis Martin, Sr. Manager of Software Development for Autodesk Flame',
imgsrc: autodesklogo,
imgalt: 'Autodesk logo'
},
{
title: 'Bazaarvoice',
quote:
Expand Down
6 changes: 3 additions & 3 deletions src/routes/testimonials/testimonial-card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,16 @@
<article
on:mouseenter={handleEnter}
on:mouseleave={handleLeave}
class="max-w-md mx-auto bg-blue-100 rounded-sm overflow-hidden md:max-w-2xl"
class="max-w-md mx-auto bg-blue-300 text-slate-50 rounded-sm overflow-hidden md:max-w-2xl"
id={title}
>
<div class="md:flex">
<div class="md:shrink-0 my-auto">
<img class="md:h-48 w-full hidden md:flex" src={imgsrc} alt={imgalt} />
</div>
<div class="p-8">
<p class="block mt-1 leading-tight font-bold text-neutral text-lg">{title}</p>
<p class="mt-2 text-neutral">{description}</p>
<p class="block mt-1 leading-tight font-bold text-lg">{title}</p>
<p class="mt-2">{description}</p>
<br />
<p class="text-blue-700 text-right">-{author}</p>
</div>
Expand Down
Loading