mirror of
https://github.com/saymrwulf/onnxruntime.git
synced 2026-07-16 18:31:27 +00:00
Added genai table. Modified homescreen toasts. (#23367)
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 :)
This commit is contained in:
Maanav Dalal
GitHub
parent
4d594255f1
commit
c688effde8
4 changed files with 1644 additions and 2065 deletions
|
|
@ -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';
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
275
src/routes/getting-started/genai-table.svelte
Normal file
275
src/routes/getting-started/genai-table.svelte
Normal file
|
|
@ -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>
|
||||
1353
src/routes/getting-started/inference-table.svelte
Normal file
1353
src/routes/getting-started/inference-table.svelte
Normal file
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue