diff --git a/CLAUDE.md b/CLAUDE.md index 8cd7c245..5924490b 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -105,6 +105,8 @@ HTML fragment with four required sections: - Be consistent within a single challenge 4. **Constraints** — Size bounds, data types, value ranges, **and performance test size** +**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`. + **Formatting rules:** - `` for variables/functions; `
` for 1D examples, LaTeX `\begin{bmatrix}` for matrices
 - `≤`, `≥`, `×` for math symbols
@@ -181,6 +183,7 @@ Verify every item before submitting. This is the single source of truth — work
 - [ ] First example matches `generate_example_test()` values
 - [ ] Examples use `
` for 1D data, LaTeX `\begin{bmatrix}` for matrices — consistent, never mixed
 - [ ] Constraints includes `Performance is measured with param = value` bullet matching `generate_performance_test()`
+- [ ] If the concept is spatial/structural, includes an SVG visualization after the problem description (dark theme, `#222` background)
 
 ### challenge.py
 - [ ] `class Challenge` inherits `ChallengeBase`
diff --git a/challenges/easy/3_matrix_transpose/challenge.html b/challenges/easy/3_matrix_transpose/challenge.html
index 94e5ce06..3210658c 100644
--- a/challenges/easy/3_matrix_transpose/challenge.html
+++ b/challenges/easy/3_matrix_transpose/challenge.html
@@ -3,6 +3,62 @@
   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.
 

 
+
+  
+  
+    
+      
+    
+  
+
+  
+  A
+  
+  
+  
+  1
+  
+  2
+  
+  
+  3
+  
+  4
+  
+  
+  5
+  
+  6
+  3 × 2
+
+  
+  rows → cols
+
+  
+  Aᵀ
+  
+  
+  
+  1
+  
+  3
+  
+  5
+  
+  
+  2
+  
+  4
+  
+  6
+  2 × 3
+
+  
+  
+  
+  
+
+
 
Implementation Requirements

 
    
   
  • Use only native features (external libraries are not permitted)
    • 
diff --git a/challenges/easy/63_interleave/challenge.html b/challenges/easy/63_interleave/challenge.html
index e149c568..5a356121 100644
--- a/challenges/easy/63_interleave/challenge.html
+++ b/challenges/easy/63_interleave/challenge.html
@@ -5,6 +5,75 @@
   [A[0], B[0], A[1], B[1], A[2], B[2], ...]
 
    
 
+
+  
+    
+      
+    
+    
+      
+    
+  
+  
+
+  
+  A
+  
+  
+  a₀
+  
+  a₁
+  
+  a₂
+  
+  a₃
+
+  
+  B
+  
+  
+  b₀
+  
+  b₁
+  
+  b₂
+  
+  b₃
+
+  
+  output
+  
+  
+  a₀
+  
+  b₀
+  
+  a₁
+  
+  b₁
+  
+  a₂
+  
+  b₂
+  
+  a₃
+  
+  b₃
+
+  
+  
+  
+  
+  
+
+  
+  
+  
+  
+  
+
+
 
    Implementation Requirements
    
 
      
   
    • Use only native features (external libraries are not permitted)
      • 
diff --git a/challenges/easy/9_1d_convolution/challenge.html b/challenges/easy/9_1d_convolution/challenge.html
index 2a9f8473..d3e97311 100644
--- a/challenges/easy/9_1d_convolution/challenge.html
+++ b/challenges/easy/9_1d_convolution/challenge.html
@@ -4,6 +4,69 @@
   where it fully overlaps with the input.
 
      
 
+
+  
+  
+
+  
+  input
+
+  
+  
+  
+  
+  
+  
+  
+  1
+  2
+  3
+  4
+  5
+
+  
+  
+
+  
+  kernel
+
+  
+  
+  
+  
+  
+  1
+  0
+  -1
+
+  
+  1×1
+  2×0
+  3×(-1)
+
+  
+  = 1 + 0 + (-3) = -2
+
+  
+  
+  
+    
+      
+    
+  
+
+  
+  output
+
+  
+  
+  -2
+
+  
+  …
+
+
 
      
   The input consists of two arrays:
 
        
diff --git a/challenges/hard/53_casual_attention/challenge.html b/challenges/hard/53_casual_attention/challenge.html
index d522ef2c..1558f9d6 100644
--- a/challenges/hard/53_casual_attention/challenge.html
+++ b/challenges/hard/53_casual_attention/challenge.html
@@ -20,6 +20,143 @@
   M, and d are of data type int32.
 
        
 
+
+  
+
+  
+  key position →
+  query →
+
+  
+  0
+  1
+  2
+  3
+  4
+  5
+
+  
+  0
+  1
+  2
+  3
+  4
+  5
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+  
+  
+  ✓
+  
+  ✓
+  ✓
+  
+  ✓
+  ✓
+  ✓
+  
+  ✓
+  ✓
+  ✓
+  ✓
+  
+  ✓
+  ✓
+  ✓
+  ✓
+  ✓
+  
+  ✓
+  ✓
+  ✓
+  ✓
+  ✓
+  ✓
+
+  
+  
+  -∞
+  -∞
+  -∞
+  -∞
+  -∞
+  
+  -∞
+  -∞
+  -∞
+  -∞
+  
+  -∞
+  -∞
+  -∞
+  
+  -∞
+  -∞
+  
+  -∞
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+  
+  
+  attend
+  
+  masked
+
 
 
        Implementation Requirements
        
 
          
diff --git a/challenges/hard/59_sliding_window_attn/challenge.html b/challenges/hard/59_sliding_window_attn/challenge.html
index e6102e51..77ed1b87 100644
--- a/challenges/hard/59_sliding_window_attn/challenge.html
+++ b/challenges/hard/59_sliding_window_attn/challenge.html
@@ -47,6 +47,122 @@ 
          2. Sliding Window Self-Attention
          
   In short, each query only attends to its nearby neighbors.
 
          
 
+
+  
+  
+  
+
+  
+  key position →
+  query position
+
+  
+  
+    0
+    1
+    2
+    3
+    4
+    5
+    6
+    7
+  
+
+  
+  
+    0
+    1
+    2
+    3
+    4
+    5
+    6
+    7
+  
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+  
+  
+
+  
+  window_size = 2
+
 
 
          Implementation Requirements
          
 
            
diff --git a/challenges/medium/10_2d_convolution/challenge.html b/challenges/medium/10_2d_convolution/challenge.html
index dabafdf8..4d8bcb16 100644
--- a/challenges/medium/10_2d_convolution/challenge.html
+++ b/challenges/medium/10_2d_convolution/challenge.html
@@ -4,6 +4,92 @@
   where it fully overlaps with the input.
 
            
 
+
+  
+
+  
+  Input (4x4)
+
+  
+  
+    
+    
+    1
+    
+    2
+    
+    3
+    
+    4
+    
+    
+    5
+    
+    6
+    
+    7
+    
+    8
+    
+    
+    9
+    
+    10
+    
+    11
+    
+    12
+    
+    
+    13
+    
+    14
+    
+    15
+    
+    16
+
+    
+    
+  
+
+  
+  Kernel (2x2)
+  
+    
+    0
+    
+    1
+    
+    1
+    
+    0
+  
+
+  
+  
+    
+      
+    
+  
+  
+
+  
+  Output[0][0]
+  
+  7
+
+  
+  1×0 + 2×1 + 5×1 + 6×0 = 0 + 2 + 5 + 0 =
+  7
+
+  
+  
+  kernel position
+  
+  output cell
+
+
 
            
   The input consists of:
 
              
diff --git a/challenges/medium/16_prefix_sum/challenge.html b/challenges/medium/16_prefix_sum/challenge.html
index 27c73f80..044120f2 100644
--- a/challenges/medium/16_prefix_sum/challenge.html
+++ b/challenges/medium/16_prefix_sum/challenge.html
@@ -3,6 +3,101 @@
   For an input array [a, b, c, d, ...], the prefix sum is [a, a+b, a+b+c, a+b+c+d, ...].
 
              
 
+
+  
+    
+      
+    
+  
+  
+  
+  input
+  prefix
+  sum
+  
+  
+    
+    1
+    
+    2
+    
+    3
+    
+    4
+    
+    5
+    
+    6
+    
+    7
+    
+    8
+  
+  
+  
+    
+    1
+    
+    3
+    
+    6
+    
+    10
+    
+    15
+    
+    21
+    
+    28
+    
+    36
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+
 
              Implementation Requirements
              
 
                
   
              • Use only GPU native features (external libraries are not permitted)
                • 
diff --git a/challenges/medium/42_2d_max_pooling/challenge.html b/challenges/medium/42_2d_max_pooling/challenge.html
index 6961a85d..66908143 100644
--- a/challenges/medium/42_2d_max_pooling/challenge.html
+++ b/challenges/medium/42_2d_max_pooling/challenge.html
@@ -3,6 +3,98 @@
   The program should take an input tensor and produce an output tensor by applying max pooling with specified kernel size, stride, and padding.
 
                
 
+
+  
+  
+    
+      
+    
+  
+
+  
+  Input (4x4)
+
+  
+  
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+  
+  
+  
+  
+  
+  
+  
+
+  
+  1
+  3
+  2
+  4
+  
+  5
+  8
+  6
+  7
+  
+  9
+  2
+  4
+  3
+  
+  1
+  6
+  5
+  8
+
+  
+  max
+  
+
+  
+  Output (2x2)
+
+  
+  
+
+  
+  
+  
+
+  
+  
+  
+  
+  
+
+  
+  8
+  7
+  9
+  8
+
+  
+  kernel: 2x2
+  stride: 2
+  padding: 0
+
+  
+  dashed borders = pooling windows
+
+
 
                Implementation Requirements
                
 
                  
   
                • External libraries are not permitted
                  • 
diff --git a/challenges/medium/46_bfs_shortest_path/challenge.html b/challenges/medium/46_bfs_shortest_path/challenge.html
index 68b7b602..b055e2c9 100644
--- a/challenges/medium/46_bfs_shortest_path/challenge.html
+++ b/challenges/medium/46_bfs_shortest_path/challenge.html
@@ -2,6 +2,65 @@
   Implement a program that finds the shortest path in an unweighted 2D grid using Breadth-First Search (BFS). Given a grid with obstacles and start/end positions, return the minimum number of steps needed to reach the destination.
 
                  
 
+
+  
+  
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    #
+    #
+    #
+    #
+    #
+    #
+    #
+    
+    S
+    Start
+    
+    E
+    End
+    
+    1
+    2
+    3
+    4
+    5
+    6
+    7
+  
+
+
 
                  Implementation Requirements
                  
 
                    
   
                  • Use only native features (external libraries are not permitted)
                    • 
diff --git a/challenges/medium/69_jacobi_stencil_2d/challenge.html b/challenges/medium/69_jacobi_stencil_2d/challenge.html
index ec3bd877..764c960b 100644
--- a/challenges/medium/69_jacobi_stencil_2d/challenge.html
+++ b/challenges/medium/69_jacobi_stencil_2d/challenge.html
@@ -5,6 +5,75 @@
   from the input to the output.
 
                    
 
+
+  
+  
+    
+      
+    
+  
+
+  
+  5-Point Jacobi Stencil
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+  
+
+  
+  T
+  L
+  (2,2)
+  R
+  B
+
+  
+  
+  
+  
+  
+
+  
+  
+  Center cell
+  
+  Neighbors
+  
+  Boundary
+
+  
+  output[i,j] = ¼ × (top + bottom + left + right)
+
+
 
                    Implementation Requirements
                    
 
                      
   
                    • Use only native features (external libraries are not permitted)
                      •