Skip to content

Commit 700a205

Browse files
MaanavDMaanavD
committed
Added genai table. Modified homescreen toasts.
1 parent 77f2278 commit 700a205

File tree

4 files changed

+1618
-2065
lines changed

4 files changed

+1618
-2065
lines changed

‎src/routes/components/hero.svelte‎

Lines changed: 4 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import { Highlight } from 'svelte-highlight';
77
import { bash } from 'svelte-highlight/languages';
88
import FaRegClipboard from 'svelte-icons/fa/FaRegClipboard.svelte';
9+
import FaClipboardCheck from 'svelte-icons/fa/FaClipboardCheck.svelte'
910
import OnnxLight from '../../images/ONNX-Light.svelte';
1011
import OnnxDark from '../../images/ONNX-Dark.svelte';
1112
import { fade } from 'svelte/transition';
@@ -55,24 +56,9 @@
5556
{#if copied}
5657
<div class="toast toast-top top-14 z-50" role="alert">
5758
<div class="alert alert-info">
58-
<svg
59-
xmlns="https://www.w3.org/2000/svg"
60-
width="16"
61-
height="16"
62-
fill="currentColor"
63-
class="bi bi-clipboard2-check"
64-
viewBox="0 0 16 16"
65-
>
66-
<path
67-
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"
68-
/>
69-
<path
70-
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"
71-
/>
72-
<path
73-
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"
74-
/>
75-
</svg>
59+
<div class="icon" style="width: 16px; height: 16px;">
60+
<FaClipboardCheck />
61+
</div>
7662
<span>Code successfully copied!</span>
7763
</div>
7864
</div>

‎src/routes/getting-started/genai-table.svelte‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
<script>
2+
import FaRegClipboard from 'svelte-icons/fa/FaRegClipboard.svelte';
3+
import FaClipboardCheck from 'svelte-icons/fa/FaClipboardCheck.svelte'
4+
let platforms = ['Windows', 'Linux', 'MacOS'];
5+
let languages = ['Python', 'C#'];
6+
let hardwareAccelerations = ['CPU', 'DirectML', 'CUDA'];
7+
let builds = ['Stable', 'Preview (Nightly)'];
8+
9+
/**
10+
* @type {string | null}
11+
*/
12+
let selectedPlatform = null;
13+
/**
14+
* @type {string | null}
15+
*/
16+
let selectedLanguage = null;
17+
/**
18+
* @type {string | null}
19+
*/
20+
let selectedHardwareAcceleration = null;
21+
/**
22+
* @type {string | null}
23+
*/
24+
let selectedBuild = null;
25+
26+
let installationInstructions = `<p>Please select a combination of resources.</p>`;
27+
28+
const selectOption = (/** @type {string} */ type, /** @type {string | null} */ value) => {
29+
if (type === 'platform') selectedPlatform = selectedPlatform === value ? null : value;
30+
if (type === 'language') selectedLanguage = selectedLanguage === value ? null : value;
31+
if (type === 'hardwareAcceleration')
32+
selectedHardwareAcceleration = selectedHardwareAcceleration === value ? null : value;
33+
if (type === 'build') selectedBuild = selectedBuild === value ? null : value;
34+
35+
updateInstallationInstructions();
36+
};
37+
38+
// Function to dynamically copy text
39+
let copied = false;
40+
const copyCodeToClipboard = () => {
41+
const codeElement = document.querySelector('#installation-code');
42+
if (codeElement && codeElement.textContent) {
43+
const textToCopy = codeElement.textContent;
44+
// textToCopy && navigator.clipboard.writeText(textToCopy).then(() => {
45+
// alert('Copied to clipboard!');
46+
// }).catch(err => {
47+
// console.error('Failed to copy text: ', err);
48+
// });
49+
try {
50+
copied = true;
51+
setTimeout(() => {
52+
copied = false;
53+
}, 3000);
54+
navigator.clipboard.writeText(textToCopy);
55+
} catch (err) {
56+
console.error('Failed to copy:', err);
57+
}
58+
}
59+
};
60+
61+
const updateInstallationInstructions = () => {
62+
if (!selectedPlatform || !selectedLanguage || !selectedHardwareAcceleration) {
63+
installationInstructions = `<p>Please select a combination of resources.</p>`;
64+
return;
65+
}
66+
67+
switch (selectedLanguage) {
68+
case 'Python':
69+
switch (selectedHardwareAcceleration) {
70+
case 'CPU':
71+
installationInstructions = `
72+
<pre><code id="installation-code">pip install onnxruntime-genai</code></pre>
73+
`;
74+
break;
75+
76+
case 'DirectML':
77+
installationInstructions = `
78+
<pre><code id="installation-code">pip install onnxruntime-genai-directml</code></pre>
79+
`;
80+
break;
81+
82+
case 'CUDA':
83+
installationInstructions = `
84+
<ul class="list-decimal pl-4">
85+
<li>Ensure that the CUDA toolkit is installed.</li>
86+
<li>Download the CUDA toolkit from the <a href="https://developer.nvidia.com/cuda-toolkit-archive" target="_blank">CUDA Toolkit Archive</a>.</li>
87+
<li>Set the <code>CUDA_PATH</code> environment variable to the CUDA installation path.</li>
88+
</ul>
89+
<br/>
90+
<p>Install commands:</p>
91+
<ul>
92+
<li>
93+
For CUDA 12:
94+
<pre><code id="installation-code">pip install onnxruntime-genai-cuda</code></pre>
95+
</li>
96+
<br/>
97+
<li>
98+
For CUDA 11:
99+
<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>
100+
</li>
101+
</ul>
102+
`;
103+
break;
104+
105+
default:
106+
installationInstructions = `<p>Unsupported hardware acceleration option for Python.</p>`;
107+
}
108+
break;
109+
110+
case 'C#':
111+
switch (selectedHardwareAcceleration) {
112+
case 'CPU':
113+
installationInstructions = `
114+
<pre><code id="installation-code">dotnet add package Microsoft.ML.OnnxRuntimeGenAI</code></pre>
115+
`;
116+
break;
117+
118+
case 'DirectML':
119+
installationInstructions = `
120+
<pre><code id="installation-code">dotnet add package Microsoft.ML.OnnxRuntimeGenAI.DirectML</code></pre>
121+
`;
122+
break;
123+
124+
case 'CUDA':
125+
installationInstructions = `
126+
<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>
127+
<br/>
128+
<pre><code id="installation-code">dotnet add package Microsoft.ML.OnnxRuntimeGenAI.Cuda</code></pre>
129+
`;
130+
break;
131+
132+
default:
133+
installationInstructions = `<p>Unsupported hardware acceleration option for C#.</p>`;
134+
}
135+
break;
136+
137+
default:
138+
installationInstructions = `<p>Unsupported language selection.</p>`;
139+
}
140+
};
141+
142+
// If required, can use this method to enable disabling.
143+
// const isDisabled = (/** @type {string} */ type, /** @type {string} */ value) => {
144+
// if (type === 'language' && selectedPlatform === 'MacOS' && value === 'C#') {
145+
// return true;
146+
// }
147+
// return false;
148+
// };
149+
</script>
150+
151+
<div
152+
id="panel2"
153+
class="grid grid-cols-5 gap-4 container mx-auto p-5"
154+
role="tabpanel"
155+
aria-labelledby="tab2"
156+
>
157+
{#if copied}
158+
<div class="toast toast-top top-14 z-50" role="alert">
159+
<div class="alert alert-info">
160+
<div class="icon" style="width: 16px; height: 16px;">
161+
<FaClipboardCheck />
162+
</div>
163+
<span>Code successfully copied!</span>
164+
</div>
165+
</div>
166+
{/if}
167+
<div class="col-span-1 bg-success r-heading rounded p-2 text-xl">
168+
<h3>Platform</h3>
169+
</div>
170+
<div class="col-span-4">
171+
<div class="grid grid-cols-3 gap-4">
172+
{#each platforms as platform}
173+
<button
174+
class="btn rounded {selectedPlatform === platform ? 'btn-active btn-primary' : ''}"
175+
on:click={() => selectOption('platform', platform)}
176+
>
177+
{platform}
178+
</button>
179+
{/each}
180+
</div>
181+
</div>
182+
183+
<div class="col-span-1 bg-success r-heading rounded p-2 text-xl">
184+
<h3>API</h3>
185+
</div>
186+
<div class="col-span-4">
187+
<div class="grid grid-cols-2 gap-4">
188+
{#each languages as language}
189+
<button
190+
class="btn rounded {selectedLanguage === language ? 'btn-active btn-primary' : ''}"
191+
on:click={() => selectOption('language', language)}
192+
>
193+
{language}
194+
</button>
195+
{/each}
196+
</div>
197+
</div>
198+
199+
<div class="col-span-1 bg-success r-heading rounded p-2 text-xl">
200+
<h3>Hardware Acceleration</h3>
201+
</div>
202+
<div class="col-span-4">
203+
<div class="grid grid-cols-3 gap-4">
204+
{#each hardwareAccelerations as hardwareAcceleration}
205+
<button
206+
class="btn h-20 rounded {selectedHardwareAcceleration === hardwareAcceleration
207+
? 'btn-active btn-primary'
208+
: ''}"
209+
on:click={() => selectOption('hardwareAcceleration', hardwareAcceleration)}
210+
>
211+
{hardwareAcceleration}
212+
</button>
213+
{/each}
214+
</div>
215+
</div>
216+
217+
<div class="col-span-1 bg-success r-heading rounded p-2 text-xl">
218+
<h3>Build</h3>
219+
</div>
220+
<div class="col-span-4">
221+
<div class="grid grid-cols-2 gap-4">
222+
{#each builds as build}
223+
<button
224+
class="btn rounded {selectedBuild === build ? 'btn-active btn-primary btn-primary' : ''}"
225+
on:click={() => selectOption('build', build)}
226+
>
227+
{build}
228+
</button>
229+
{/each}
230+
</div>
231+
</div>
232+
233+
<div class="col-span-1 bg-success rounded p-2">
234+
<h3 class="text-xl">Installation Instructions</h3>
235+
</div>
236+
<div class="col-span-4 bg-base-300 rounded">
237+
<div class="p-4">
238+
<div id="installation-instructions">
239+
{@html installationInstructions}
240+
</div>
241+
{#if installationInstructions.includes('<pre><code')}
242+
<button class="btn btn-primary btn-sm mt-4" on:click={copyCodeToClipboard}>
243+
{" "}Copy code
244+
<span class="copy-btn-icon w-4"><FaRegClipboard/></span>
245+
</button>
246+
{/if}
247+
</div>
248+
</div>
249+
</div>

0 commit comments

Comments
 (0)