Skip to content

Commit 5e8b153

Browse files
kunal-mansukhaniclaude
kunal-mansukhani
and
claude
authored
Add SVG visualizations to 11 challenge descriptions (#209)
* Add SVG visualizations to 11 challenge descriptions Add inline SVG diagrams to challenge.html files where visual explanation significantly aids understanding. Each uses a consistent dark theme matching the existing GPT-2 block visualization. Challenges updated: - 1D Convolution: kernel sliding over input with dot product - 2D Convolution: kernel overlay on grid with computation breakdown - 2D Max Pooling: color-coded pool regions with max extraction - Matrix Transpose: color-coded row→column movement with arrows - Prefix Sum: accumulation arrows showing growing dependency - Reduction: binary tree reduction from 8 values to final sum - Causal Attention: triangular attend/masked grid with checkmarks - Sliding Window Attention: banded attention pattern (window=2) - BFS Shortest Path: grid with obstacles and numbered path - Jacobi Stencil 2D: 5-point stencil with neighbor arrows - Interleave: two arrays merging into alternating output Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Remove reduction SVG visualization and apply linter polish Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * Update CLUADE.md --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 7d503ed commit 5e8b153

File tree

11 files changed

+845
-0
lines changed

11 files changed

+845
-0
lines changed

‎CLAUDE.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,8 @@ HTML fragment with four required sections:
105105
- Be consistent within a single challenge
106106
4. **Constraints** — Size bounds, data types, value ranges, **and performance test size**
107107

108+
**SVG visualization** (optional): If the challenge involves a spatial or structural concept that is hard to understand from text alone, add an inline SVG diagram after the problem description paragraph. Good candidates include convolutions, pooling, attention masks, tree reductions, grid algorithms, and data movement patterns. Use a consistent dark theme (`#222` background, `#ccc` text, blue/green accents) and `style="display:block; margin:20px auto;"`. See existing examples in `challenges/easy/9_1d_convolution/challenge.html` or `challenges/medium/74_gpt2_block/challenge.html`.
109+
108110
**Formatting rules:**
109111
- `<code>` for variables/functions; `<pre>` for 1D examples, LaTeX `\begin{bmatrix}` for matrices
110112
- `&le;`, `&ge;`, `&times;` for math symbols
@@ -181,6 +183,7 @@ Verify every item before submitting. This is the single source of truth — work
181183
- [ ] First example matches `generate_example_test()` values
182184
- [ ] Examples use `<pre>` for 1D data, LaTeX `\begin{bmatrix}` for matrices — consistent, never mixed
183185
- [ ] Constraints includes `Performance is measured with <code>param</code> = value` bullet matching `generate_performance_test()`
186+
- [ ] If the concept is spatial/structural, includes an SVG visualization after the problem description (dark theme, `#222` background)
184187

185188
### challenge.py
186189
- [ ] `class Challenge` inherits `ChallengeBase`

‎challenges/easy/3_matrix_transpose/challenge.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,62 @@
33
transpose of a matrix switches its rows and columns. Given a matrix \(A\) of dimensions \(rows \times cols\), the transpose \(A^T\) will have dimensions \(cols \times rows\). All matrices are stored in row-major format.
44
</p>
55

6+
<svg width="420" height="180" viewBox="0 0 420 180" xmlns="http://www.w3.org/2000/svg" style="display:block; margin:20px auto;">
7+
<rect width="420" height="180" rx="8" fill="#222"/>
8+
<defs>
9+
<marker id="arrt" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto">
10+
<path d="M0,0 L6,3 L0,6" fill="none" stroke="#ccc" stroke-width="1"/>
11+
</marker>
12+
</defs>
13+
14+
<!-- Input matrix A (3x2) -->
15+
<text x="60" y="18" text-anchor="middle" fill="#ccc" font-family="sans-serif" font-size="13" font-weight="bold">A</text>
16+
<rect x="10" y="24" width="100" height="140" rx="4" fill="#333" stroke="#555" stroke-width="1"/>
17+
<!-- Row 0 - blue -->
18+
<rect x="16" y="30" width="40" height="24" rx="3" fill="#4477bb"/>
19+
<text x="36" y="47" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">1</text>
20+
<rect x="62" y="30" width="40" height="24" rx="3" fill="#4477bb"/>
21+
<text x="82" y="47" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">2</text>
22+
<!-- Row 1 - green -->
23+
<rect x="16" y="60" width="40" height="24" rx="3" fill="#44aa66"/>
24+
<text x="36" y="77" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">3</text>
25+
<rect x="62" y="60" width="40" height="24" rx="3" fill="#44aa66"/>
26+
<text x="82" y="77" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">4</text>
27+
<!-- Row 2 - orange -->
28+
<rect x="16" y="90" width="40" height="24" rx="3" fill="#cc7744"/>
29+
<text x="36" y="107" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">5</text>
30+
<rect x="62" y="90" width="40" height="24" rx="3" fill="#cc7744"/>
31+
<text x="82" y="107" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">6</text>
32+
<text x="60" y="145" text-anchor="middle" fill="#999" font-family="sans-serif" font-size="10">3 &#xd7; 2</text>
33+
34+
<!-- Middle label -->
35+
<text x="210" y="95" text-anchor="middle" fill="#aaa" font-family="sans-serif" font-size="11" font-style="italic">rows &#x2192; cols</text>
36+
37+
<!-- Output matrix A^T (2x3) -->
38+
<text x="330" y="18" text-anchor="middle" fill="#ccc" font-family="sans-serif" font-size="13" font-weight="bold">A&#x1d40;</text>
39+
<rect x="270" y="24" width="140" height="110" rx="4" fill="#333" stroke="#555" stroke-width="1"/>
40+
<!-- Row 0 of A^T: col 0 of A -->
41+
<rect x="276" y="30" width="40" height="24" rx="3" fill="#4477bb"/>
42+
<text x="296" y="47" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">1</text>
43+
<rect x="320" y="30" width="40" height="24" rx="3" fill="#44aa66"/>
44+
<text x="340" y="47" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">3</text>
45+
<rect x="364" y="30" width="40" height="24" rx="3" fill="#cc7744"/>
46+
<text x="384" y="47" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">5</text>
47+
<!-- Row 1 of A^T: col 1 of A -->
48+
<rect x="276" y="60" width="40" height="24" rx="3" fill="#4477bb"/>
49+
<text x="296" y="77" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">2</text>
50+
<rect x="320" y="60" width="40" height="24" rx="3" fill="#44aa66"/>
51+
<text x="340" y="77" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">4</text>
52+
<rect x="364" y="60" width="40" height="24" rx="3" fill="#cc7744"/>
53+
<text x="384" y="77" text-anchor="middle" fill="#fff" font-family="monospace" font-size="12">6</text>
54+
<text x="340" y="115" text-anchor="middle" fill="#999" font-family="sans-serif" font-size="10">2 &#xd7; 3</text>
55+
56+
<!-- Curved dashed arrows showing element movement -->
57+
<path d="M 56,72 C 140,30 220,20 320,42" fill="none" stroke="#44aa66" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrt)"/>
58+
<path d="M 56,102 C 150,55 230,35 364,42" fill="none" stroke="#cc7744" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrt)"/>
59+
<path d="M 102,72 C 170,120 240,110 320,72" fill="none" stroke="#44aa66" stroke-width="1.5" stroke-dasharray="4,3" marker-end="url(#arrt)"/>
60+
</svg>
61+
662
<h2>Implementation Requirements</h2>
763
<ul>
864
<li>Use only native features (external libraries are not permitted)</li>

‎challenges/easy/63_interleave/challenge.html‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,75 @@
55
<code>[A[0], B[0], A[1], B[1], A[2], B[2], ...]</code>
66
</p>
77

8+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 180" width="400" height="180"
9+
style="display:block; margin:20px auto;" font-family="monospace" font-size="11">
10+
<defs>
11+
<marker id="arrBlue" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
12+
<path d="M 0 0 L 10 5 L 0 10 z" fill="#4477bb"/>
13+
</marker>
14+
<marker id="arrGreen" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
15+
<path d="M 0 0 L 10 5 L 0 10 z" fill="#44aa66"/>
16+
</marker>
17+
</defs>
18+
<rect width="400" height="180" rx="8" fill="#222"/>
19+
20+
<!-- Label A -->
21+
<text x="60" y="20" fill="#ccc" font-size="13" text-anchor="middle" font-weight="bold">A</text>
22+
<!-- Array A cells -->
23+
<rect x="10" y="26" width="40" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
24+
<text x="30" y="45" text-anchor="middle" fill="#ccc">a&#x2080;</text>
25+
<rect x="54" y="26" width="40" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
26+
<text x="74" y="45" text-anchor="middle" fill="#ccc">a&#x2081;</text>
27+
<rect x="98" y="26" width="40" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
28+
<text x="118" y="45" text-anchor="middle" fill="#ccc">a&#x2082;</text>
29+
<rect x="142" y="26" width="40" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
30+
<text x="162" y="45" text-anchor="middle" fill="#ccc">a&#x2083;</text>
31+
32+
<!-- Label B -->
33+
<text x="310" y="20" fill="#ccc" font-size="13" text-anchor="middle" font-weight="bold">B</text>
34+
<!-- Array B cells -->
35+
<rect x="220" y="26" width="40" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
36+
<text x="240" y="45" text-anchor="middle" fill="#ccc">b&#x2080;</text>
37+
<rect x="264" y="26" width="40" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
38+
<text x="284" y="45" text-anchor="middle" fill="#ccc">b&#x2081;</text>
39+
<rect x="308" y="26" width="40" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
40+
<text x="328" y="45" text-anchor="middle" fill="#ccc">b&#x2082;</text>
41+
<rect x="352" y="26" width="40" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
42+
<text x="372" y="45" text-anchor="middle" fill="#ccc">b&#x2083;</text>
43+
44+
<!-- Label output -->
45+
<text x="200" y="108" fill="#ccc" font-size="13" text-anchor="middle" font-weight="bold">output</text>
46+
<!-- Output array cells (alternating blue/green) -->
47+
<rect x="10" y="114" width="42" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
48+
<text x="31" y="133" text-anchor="middle" fill="#ccc">a&#x2080;</text>
49+
<rect x="56" y="114" width="42" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
50+
<text x="77" y="133" text-anchor="middle" fill="#ccc">b&#x2080;</text>
51+
<rect x="102" y="114" width="42" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
52+
<text x="123" y="133" text-anchor="middle" fill="#ccc">a&#x2081;</text>
53+
<rect x="148" y="114" width="42" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
54+
<text x="169" y="133" text-anchor="middle" fill="#ccc">b&#x2081;</text>
55+
<rect x="194" y="114" width="42" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
56+
<text x="215" y="133" text-anchor="middle" fill="#ccc">a&#x2082;</text>
57+
<rect x="240" y="114" width="42" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
58+
<text x="261" y="133" text-anchor="middle" fill="#ccc">b&#x2082;</text>
59+
<rect x="286" y="114" width="42" height="28" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
60+
<text x="307" y="133" text-anchor="middle" fill="#ccc">a&#x2083;</text>
61+
<rect x="332" y="114" width="42" height="28" rx="3" fill="#1e3d2d" stroke="#44aa66" stroke-width="1.5"/>
62+
<text x="353" y="133" text-anchor="middle" fill="#ccc">b&#x2083;</text>
63+
64+
<!-- Curved arrows from A to output (dashed, blue) -->
65+
<path d="M30,54 C30,80 31,90 31,114" stroke="#4477bb" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrBlue)"/>
66+
<path d="M74,54 C74,78 123,90 123,114" stroke="#4477bb" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrBlue)"/>
67+
<path d="M118,54 C118,78 215,90 215,114" stroke="#4477bb" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrBlue)"/>
68+
<path d="M162,54 C162,78 307,90 307,114" stroke="#4477bb" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrBlue)"/>
69+
70+
<!-- Curved arrows from B to output (dashed, green) -->
71+
<path d="M240,54 C240,78 77,90 77,114" stroke="#44aa66" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrGreen)"/>
72+
<path d="M284,54 C284,78 169,90 169,114" stroke="#44aa66" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrGreen)"/>
73+
<path d="M328,54 C328,78 261,90 261,114" stroke="#44aa66" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrGreen)"/>
74+
<path d="M372,54 C372,78 353,90 353,114" stroke="#44aa66" stroke-width="1.2" stroke-dasharray="4,3" fill="none" marker-end="url(#arrGreen)"/>
75+
</svg>
76+
877
<h2>Implementation Requirements</h2>
978
<ul>
1079
<li>Use only native features (external libraries are not permitted)</li>

‎challenges/easy/9_1d_convolution/challenge.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,69 @@
44
where it fully overlaps with the input.
55
</p>
66

7+
<svg width="420" height="210" viewBox="0 0 420 210" xmlns="http://www.w3.org/2000/svg"
8+
style="display:block; margin:20px auto;" font-family="monospace" font-size="13">
9+
<!-- Background -->
10+
<rect width="420" height="210" rx="8" fill="#222"/>
11+
12+
<!-- "input" label -->
13+
<text x="16" y="38" fill="#999" font-size="11">input</text>
14+
15+
<!-- Input cells -->
16+
<rect x="65" y="20" width="50" height="32" rx="3" fill="#333" stroke="#555" stroke-width="1"/>
17+
<rect x="120" y="20" width="50" height="32" rx="3" fill="#333" stroke="#555" stroke-width="1"/>
18+
<rect x="175" y="20" width="50" height="32" rx="3" fill="#333" stroke="#555" stroke-width="1"/>
19+
<rect x="230" y="20" width="50" height="32" rx="3" fill="#333" stroke="#555" stroke-width="1"/>
20+
<rect x="285" y="20" width="50" height="32" rx="3" fill="#333" stroke="#555" stroke-width="1"/>
21+
<!-- Input values -->
22+
<text x="90" y="41" text-anchor="middle" fill="#ccc">1</text>
23+
<text x="145" y="41" text-anchor="middle" fill="#ccc">2</text>
24+
<text x="200" y="41" text-anchor="middle" fill="#ccc">3</text>
25+
<text x="255" y="41" text-anchor="middle" fill="#ccc">4</text>
26+
<text x="310" y="41" text-anchor="middle" fill="#ccc">5</text>
27+
28+
<!-- Kernel highlight window over first 3 input cells -->
29+
<rect x="63" y="18" width="164" height="36" rx="4" fill="none" stroke="#4477bb" stroke-width="2" stroke-dasharray="5,3"/>
30+
31+
<!-- "kernel" label -->
32+
<text x="16" y="86" fill="#999" font-size="11">kernel</text>
33+
34+
<!-- Kernel cells (aligned under first 3 input cells) -->
35+
<rect x="65" y="68" width="50" height="32" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
36+
<rect x="120" y="68" width="50" height="32" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
37+
<rect x="175" y="68" width="50" height="32" rx="3" fill="#1e2d4d" stroke="#4477bb" stroke-width="1.5"/>
38+
<!-- Kernel values -->
39+
<text x="90" y="89" text-anchor="middle" fill="#88bbff">1</text>
40+
<text x="145" y="89" text-anchor="middle" fill="#88bbff">0</text>
41+
<text x="200" y="89" text-anchor="middle" fill="#88bbff">-1</text>
42+
43+
<!-- Multiplication signs between pairs -->
44+
<text x="90" y="118" text-anchor="middle" fill="#777" font-size="11">1&#xd7;1</text>
45+
<text x="145" y="118" text-anchor="middle" fill="#777" font-size="11">2&#xd7;0</text>
46+
<text x="200" y="118" text-anchor="middle" fill="#777" font-size="11">3&#xd7;(-1)</text>
47+
48+
<!-- Computation line -->
49+
<text x="145" y="140" text-anchor="middle" fill="#aaa" font-size="12">= 1 + 0 + (-3) = -2</text>
50+
51+
<!-- Arrow down to output -->
52+
<line x1="145" y1="148" x2="145" y2="168" stroke="#4477bb" stroke-width="1.5" marker-end="url(#arrowhead)"/>
53+
<defs>
54+
<marker id="arrowhead" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
55+
<polygon points="0 0, 8 3, 0 6" fill="#4477bb"/>
56+
</marker>
57+
</defs>
58+
59+
<!-- "output" label -->
60+
<text x="16" y="187" fill="#999" font-size="11">output</text>
61+
62+
<!-- Output cell -->
63+
<rect x="120" y="170" width="50" height="30" rx="3" fill="#1a3a1a" stroke="#44aa44" stroke-width="1.5"/>
64+
<text x="145" y="190" text-anchor="middle" fill="#66dd66" font-weight="bold">-2</text>
65+
66+
<!-- Ellipsis for remaining output -->
67+
<text x="195" y="190" fill="#666" font-size="14">&#x2026;</text>
68+
</svg>
69+
770
<p>
871
The input consists of two arrays:
972
<ul>

0 commit comments

Comments
 (0)