Skip to content

Commit

Permalink
Added genai table. Modified homescreen toasts. (#23367)
Browse files Browse the repository at this point in the history 
Preview isn't working right now as my personal repo doesn't want to run
actions - please make a codespace to test it!

Should suffice as a genai install table, and added nifty things like a
'copy' function :)
  • Loading branch information
@MaanavD
MaanavD authored Jan 16, 2025
1 parent 4d59425 commit c688eff
Show file tree
Hide file tree
Showing 4 changed files with 1,644 additions and 2,065 deletions.
22 changes: 4 additions & 18 deletions src/routes/components/hero.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import { Highlight } from 'svelte-highlight';
import { bash } from 'svelte-highlight/languages';
import FaRegClipboard from 'svelte-icons/fa/FaRegClipboard.svelte';
import FaClipboardCheck from 'svelte-icons/fa/FaClipboardCheck.svelte'
import OnnxLight from '../../images/ONNX-Light.svelte';
import OnnxDark from '../../images/ONNX-Dark.svelte';
import { fade } from 'svelte/transition';
Expand Down Expand Up @@ -55,24 +56,9 @@
{#if copied}
<div class="toast toast-top top-14 z-50" role="alert">
<div class="alert alert-info">
<svg
xmlns="https://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-clipboard2-check"
viewBox="0 0 16 16"
>
<path
d="M9.5 0a.5.5 0 0 1 .5.5.5.5 0 0 0 .5.5.5.5 0 0 1 .5.5V2a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 2v-.5a.5.5 0 0 1 .5-.5.5.5 0 0 0 .5-.5.5.5 0 0 1 .5-.5h3Z"
/>
<path
d="M3 2.5a.5.5 0 0 1 .5-.5H4a.5.5 0 0 0 0-1h-.5A1.5 1.5 0 0 0 2 2.5v12A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5v-12A1.5 1.5 0 0 0 12.5 1H12a.5.5 0 0 0 0 1h.5a.5.5 0 0 1 .5.5v12a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-12Z"
/>
<path
d="M10.854 7.854a.5.5 0 0 0-.708-.708L7.5 9.793 6.354 8.646a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708 0l3-3Z"
/>
</svg>
<div class="icon" style="width: 16px; height: 16px;">
<FaClipboardCheck />
</div>
<span>Code successfully copied!</span>
</div>
</div>
Expand Down
275 changes: 275 additions & 0 deletions src/routes/getting-started/genai-table.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,275 @@
<script>
import FaRegClipboard from 'svelte-icons/fa/FaRegClipboard.svelte';
import FaClipboardCheck from 'svelte-icons/fa/FaClipboardCheck.svelte';
let platforms = ['Windows', 'Linux', 'MacOS'];
let languages = ['Python', 'C', 'C++', 'C#'];
let hardwareAccelerations = ['CPU', 'CUDA'];
// let builds = ['Stable', 'Preview (Nightly)'];
/**
* @type {string | null}
*/
let selectedPlatform = null;
/**
* @type {string | null}
*/
let selectedLanguage = null;
/**
* @type {string | null}
*/
let selectedHardwareAcceleration = null;
// For eventual nightly builds
/**
* @type {string | null}
*/
let selectedBuild = null;
let installationInstructions = `<p>Please select a combination of resources.</p>`;
const selectOption = (/** @type {string} */ type, /** @type {string | null} */ value) => {
if (type === 'platform') selectedPlatform = selectedPlatform === value ? null : value;
if (type === 'language') selectedLanguage = selectedLanguage === value ? null : value;
if (type === 'hardwareAcceleration')
selectedHardwareAcceleration = selectedHardwareAcceleration === value ? null : value;
if (type === 'build') selectedBuild = selectedBuild === value ? null : value;
updateInstallationInstructions();
};
// Function to dynamically copy text
let copied = false;
const copyCodeToClipboard = () => {
const codeElement = document.querySelector('#installation-code');
if (codeElement && codeElement.textContent) {
const textToCopy = codeElement.textContent;
// textToCopy && navigator.clipboard.writeText(textToCopy).then(() => {
// alert('Copied to clipboard!');
// }).catch(err => {
// console.error('Failed to copy text: ', err);
// });
try {
copied = true;
setTimeout(() => {
copied = false;
}, 3000);
navigator.clipboard.writeText(textToCopy);
} catch (err) {
console.error('Failed to copy:', err);
}
}
};
const updateInstallationInstructions = () => {
if (!selectedPlatform || !selectedLanguage || !selectedHardwareAcceleration) {
installationInstructions = `<p>Please select a combination of resources.</p>`;
return;
}
switch (selectedLanguage) {
case 'Python':
switch (selectedHardwareAcceleration) {
case 'CPU':
installationInstructions = `
<pre><code id="installation-code">pip install onnxruntime-genai</code></pre>
`;
break;
case 'CUDA':
installationInstructions = `
<ul class="list-decimal pl-4">
<li>Ensure that the CUDA toolkit is installed.</li>
<li>Download the CUDA toolkit from the <a href="https://developer.nvidia.com/cuda-toolkit-archive" target="_blank">CUDA Toolkit Archive</a>.</li>
<li>Set the <code>CUDA_PATH</code> environment variable to the CUDA installation path.</li>
</ul>
<br/>
<p>Install commands:</p>
<ul>
<li>
For CUDA 12:
<pre><code id="installation-code">pip install onnxruntime-genai-cuda</code></pre>
</li>
<br/>
<li>
For CUDA 11:
<pre class="text-wrap"><code id="installation-code">pip install onnxruntime-genai-cuda --index-url https://aiinfra.pkgs.visualstudio.com/PublicPackages/_packaging/onnxruntime-cuda-11/pypi/simple/</code></pre>
</li>
</ul>
`;
break;
default:
installationInstructions = `<p>Unsupported hardware acceleration option for Python.</p>`;
}
break;
case 'C':
switch (selectedHardwareAcceleration) {
case 'CPU':
installationInstructions = `
<p>Install Nuget package <a class="underline text-blue-700" href="https://www.nuget.org/packages/Microsoft.ML.OnnxRuntimeGenAI/">Microsoft.ML.OnnxRuntimeGenAI</a></code></a>
`;
break;
case 'CUDA':
installationInstructions = `
<p>Install Nuget package <a class="underline text-blue-700" href="https://www.nuget.org/packages/Microsoft.ML.OnnxRuntimeGenAI.Cuda/">Microsoft.ML.OnnxRuntimeGenAI.Cuda</a></code></a>
`;
break;
default:
installationInstructions = `<p>Unsupported hardware acceleration option for C.</p>`;
}
break;
case 'C++':
switch (selectedHardwareAcceleration) {
case 'CPU':
installationInstructions = `
<p>Install Nuget package <a href="https://www.nuget.org/packages/Microsoft.ML.OnnxRuntimeGenAI/">Microsoft.ML.OnnxRuntimeGenAI</a></code></a>
`;
break;
case 'CUDA':
installationInstructions = `
<p>Install Nuget package <a href="https://www.nuget.org/packages/Microsoft.ML.OnnxRuntimeGenAI.Cuda/">Microsoft.ML.OnnxRuntimeGenAI.Cuda</a></code></a>
`;
break;
default:
installationInstructions = `<p>Unsupported hardware acceleration option for C.</p>`;
}
break;
case 'C#':
switch (selectedHardwareAcceleration) {
case 'CPU':
installationInstructions = `
<pre><code id="installation-code">dotnet add package Microsoft.ML.OnnxRuntimeGenAI</code></pre>
`;
break;
case 'CUDA':
installationInstructions = `
<p>Note: Only CUDA 11 is supported for versions 0.3.0 and earlier, and only CUDA 12 is supported for versions 0.4.0 and later.</p>
<br/>
<pre><code id="installation-code">dotnet add package Microsoft.ML.OnnxRuntimeGenAI.Cuda</code></pre>
`;
break;
default:
installationInstructions = `<p>Unsupported hardware acceleration option for C#.</p>`;
}
break;
default:
installationInstructions = `<p>Unsupported language selection.</p>`;
}
};
// If required, can use this method to enable disabling.
// const isDisabled = (/** @type {string} */ type, /** @type {string} */ value) => {
// if (type === 'language' && selectedPlatform === 'MacOS' && value === 'C#') {
// return true;
// }
// return false;
// };
</script>

<div
id="panel2"
class="grid grid-cols-5 gap-4 container mx-auto p-5"
role="tabpanel"
aria-labelledby="tab2"
>
{#if copied}
<div class="toast toast-top top-14 z-50" role="alert">
<div class="alert alert-info">
<div class="icon" style="width: 16px; height: 16px;">
<FaClipboardCheck />
</div>
<span>Code successfully copied!</span>
</div>
</div>
{/if}
<div class="col-span-1 bg-success r-heading rounded p-2 text-xl">
<h3>Platform</h3>
</div>
<div class="col-span-4">
<div class="grid grid-cols-3 gap-4">
{#each platforms as platform}
<button
class="btn rounded {selectedPlatform === platform ? 'btn-active btn-primary' : ''}"
on:click={() => selectOption('platform', platform)}
>
{platform}
</button>
{/each}
</div>
</div>

<div class="col-span-1 bg-success r-heading rounded p-2 text-xl">
<h3>API</h3>
</div>
<div class="col-span-4">
<div class="grid grid-cols-4 gap-4">
{#each languages as language}
<button
class="btn rounded {selectedLanguage === language ? 'btn-active btn-primary' : ''}"
on:click={() => selectOption('language', language)}
>
{language}
</button>
{/each}
</div>
</div>

<div class="col-span-1 bg-success r-heading rounded p-2 text-xl">
<h3>Hardware Acceleration</h3>
</div>
<div class="col-span-4">
<div class="grid grid-cols-2 gap-4">
{#each hardwareAccelerations as hardwareAcceleration}
<button
class="btn h-20 rounded {selectedHardwareAcceleration === hardwareAcceleration
? 'btn-active btn-primary'
: ''}"
on:click={() => selectOption('hardwareAcceleration', hardwareAcceleration)}
>
{hardwareAcceleration}
</button>
{/each}
</div>
</div>

<!-- For eventual nightly use -->
<!-- <div class="col-span-1 bg-success r-heading rounded p-2 text-xl">
<h3>Build</h3>
</div>
<div class="col-span-4">
<div class="grid grid-cols-2 gap-4">
{#each builds as build}
<button
class="btn rounded {selectedBuild === build ? 'btn-active btn-primary btn-primary' : ''}"
on:click={() => selectOption('build', build)}
>
{build}
</button>
{/each}
</div>
</div> -->

<div class="col-span-1 bg-success rounded p-2">
<h3 class="text-xl">Installation Instructions</h3>
</div>
<div class="col-span-4 bg-base-300 rounded">
<div class="p-4">
<div id="installation-instructions">
{@html installationInstructions}
</div>
{#if installationInstructions.includes('<pre><code')}
<button class="btn btn-primary btn-sm mt-4" on:click={copyCodeToClipboard}>
{' '}Copy code
<span class="copy-btn-icon w-4"><FaRegClipboard /></span>
</button>
{/if}
</div>
</div>
</div>
Loading

0 comments on commit c688eff

Please sign in to comment.