Skip to content
This repository was archived by the owner on Feb 19, 2026. It is now read-only.

Commit c61a19c

Browse files
LostBeardLostBeard
committed
Quick start update
1 parent d2131a6 commit c61a19c

File tree

1 file changed

+147
-22
lines changed

1 file changed

+147
-22
lines changed

‎SpawnDev.ILGPU.WebGPU.Demo/Pages/Home.razor‎

Lines changed: 147 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414
Write GPU compute shaders in C# and compile them to WGSL automatically.
1515
</p>
1616
<div class="hero-buttons">
17-
<a href="/tests" class="btn btn-primary btn-lg">
17+
<a href="tests" class="btn btn-primary btn-lg">
1818
<span class="btn-icon">▶</span> Run Tests
1919
</a>
20-
<a href="/mandelbrot" class="btn btn-secondary btn-lg">
20+
<a href="mandelbrot" class="btn btn-secondary btn-lg">
2121
<span class="btn-icon">🎨</span> Mandelbrot Demo
2222
</a>
2323
</div>
@@ -52,19 +52,71 @@
5252

5353
<div class="code-section">
5454
<h2 class="section-title">Quick Start</h2>
55-
<pre class="code-block"><code>// Initialize ILGPU context with WebGPU backend
56-
var builder = Context.Create();
57-
await builder.WebGPUAsync();
58-
using var context = builder.ToContext();
59-
60-
// Get WebGPU device and create accelerator
61-
var device = context.GetWebGPUDevices()[0];
62-
using var accelerator = await device.CreateAcceleratorAsync(context);
63-
64-
// Load and execute kernel
65-
var kernel = accelerator.LoadAutoGroupedStreamKernel&lt;Index1D, ArrayView&lt;float&gt;&gt;(MyKernel);
66-
kernel((Index1D)length, buffer.View);
67-
await accelerator.SynchronizeAsync();</code></pre>
55+
56+
<div class="steps-container">
57+
<div class="step">
58+
<div class="step-number">1</div>
59+
<div class="step-content">
60+
<h3>Write Your Kernel</h3>
61+
<p>Define your GPU computation in standard C#.</p>
62+
<div class="code-block">
63+
<pre><code><span class="keyword">static void</span> <span class="method">MyKernel</span>(<span class="type">Index1D</span> index, <span class="type">ArrayView</span>&lt;<span class="keyword">float</span>&gt; data)
64+
{
65+
data[index] *= <span class="number">2.0f</span>;
66+
}</code></pre>
67+
</div>
68+
</div>
69+
</div>
70+
71+
<div class="step">
72+
<div class="step-number">2</div>
73+
<div class="step-content">
74+
<h3>Initialize Context</h3>
75+
<p>Enable the WebGPU backend in your ILGPU context.</p>
76+
<div class="code-block">
77+
<pre><code><span class="keyword">var</span> builder = Context.<span class="method">Create</span>();
78+
<span class="keyword">await</span> builder.<span class="method">WebGPUAsync</span>();
79+
<span class="keyword">using var</span> context = builder.<span class="method">ToContext</span>();</code></pre>
80+
</div>
81+
</div>
82+
</div>
83+
84+
<div class="step">
85+
<div class="step-number">3</div>
86+
<div class="step-content">
87+
<h3>Create Accelerator</h3>
88+
<p>Initialize the GPU device and accelerator.</p>
89+
<div class="code-block">
90+
<pre><code><span class="keyword">var</span> device = context.<span class="method">GetWebGPUDevices</span>()[<span class="number">0</span>];
91+
<span class="keyword">using var</span> accelerator = <span class="keyword">await</span> device.<span class="method">CreateAcceleratorAsync</span>(context);</code></pre>
92+
</div>
93+
</div>
94+
</div>
95+
96+
<div class="step">
97+
<div class="step-number">4</div>
98+
<div class="step-content">
99+
<h3>Execute Kernel</h3>
100+
<p>Load and run your kernel on the GPU.</p>
101+
<div class="code-block">
102+
<pre><code><span class="keyword">var</span> kernel = accelerator.<span class="method">LoadAutoGroupedStreamKernel</span>&lt;<span class="type">Index1D</span>, <span class="type">ArrayView</span>&lt;<span class="keyword">float</span>&gt;&gt;(MyKernel);
103+
<span class="method">kernel</span>((<span class="type">Index1D</span>)length, buffer.View);
104+
<span class="keyword">await</span> accelerator.<span class="method">SynchronizeAsync</span>();</code></pre>
105+
</div>
106+
</div>
107+
</div>
108+
109+
<div class="step">
110+
<div class="step-number">5</div>
111+
<div class="step-content">
112+
<h3>Retrieve Data</h3>
113+
<p>Transfer the computed results back to host memory.</p>
114+
<div class="code-block">
115+
<pre><code><span class="keyword">float</span>[] results = <span class="keyword">await</span> buffer.<span class="method">CopyToHostAsync</span>();</code></pre>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
68120
</div>
69121

70122
<style>
@@ -196,22 +248,95 @@ await accelerator.SynchronizeAsync();</code></pre>
196248
}
197249
198250
.code-section {
199-
padding: 2rem 0;
251+
padding: 4rem 0;
252+
max-width: 900px;
253+
margin: 0 auto;
254+
}
255+
256+
.steps-container {
257+
display: flex;
258+
flex-direction: column;
259+
gap: 3rem;
260+
}
261+
262+
.step {
263+
display: flex;
264+
gap: 2rem;
265+
position: relative;
266+
}
267+
268+
.step:not(:last-child)::after {
269+
content: '';
270+
position: absolute;
271+
left: 20px;
272+
top: 50px;
273+
bottom: -20px;
274+
width: 2px;
275+
background: linear-gradient(to bottom, rgba(139, 92, 246, 0.5), transparent);
276+
}
277+
278+
.step-number {
279+
flex: 0 0 40px;
280+
height: 40px;
281+
background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
282+
color: white;
283+
border-radius: 50%;
284+
display: flex;
285+
align-items: center;
286+
justify-content: center;
287+
font-weight: 700;
288+
font-size: 1.25rem;
289+
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
290+
z-index: 1;
291+
}
292+
293+
.step-content {
294+
flex: 1;
295+
}
296+
297+
.step-content h3 {
298+
font-size: 1.25rem;
299+
font-weight: 600;
300+
color: #f1f5f9;
301+
margin-bottom: 0.5rem;
302+
}
303+
304+
.step-content p {
305+
color: #94a3b8;
306+
margin-bottom: 1rem;
307+
font-size: 1rem;
200308
}
201309
202310
.code-block {
203-
background: rgba(0, 0, 0, 0.4);
311+
background: #0f172a;
204312
border: 1px solid rgba(255, 255, 255, 0.1);
205313
border-radius: 12px;
206-
padding: 1.5rem;
314+
padding: 1.25rem;
207315
overflow-x: auto;
208316
font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
209-
font-size: 0.85rem;
317+
font-size: 0.9rem;
210318
line-height: 1.6;
211-
color: #e2e8f0;
319+
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
212320
}
213321
214-
.code-block code {
215-
color: #e2e8f0;
322+
.code-block pre {
323+
margin: 0;
324+
}
325+
326+
/* Syntax Highlighting */
327+
.keyword { color: #c678dd; }
328+
.method { color: #61afef; }
329+
.type { color: #e5c07b; }
330+
.number { color: #d19a66; }
331+
.comment { color: #5c6370; font-style: italic; }
332+
333+
@@media (max-width: 640px) {
334+
.step {
335+
flex-direction: column;
336+
gap: 1rem;
337+
}
338+
.step:not(:last-child)::after {
339+
display: none;
340+
}
216341
}
217342
</style>

0 commit comments

Comments
 (0)