Spaces:

firqaaa
/

thrdxr

Running

App Files Files Community

firqaaa commited on Jul 14

Commit

05a732e

verified ·

1 Parent(s): 73e92a4

Update index.html

Browse files

Files changed (1) hide show

index.html +29 -427

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Interactive 3D GPU Threading Cube</title>
     <style>
         body {
             font-family: 'Consolas', 'Courier New', monospace;
@@ -131,6 +131,27 @@
             padding-bottom: 10px;
         }
         .cube-container {
             height: 500px;
             perspective: 1200px;
@@ -298,364 +319,6 @@
             background: #f8f8f8;
         }
-        .interaction-guide {
-            display: flex;
-            justify-content: space-around;
-            margin-bottom: 20px;
-            padding: 15px;
-            background: #f8f8f8;
-            border: 1px solid #cccccc;
-            font-size: 12px;
-        }
-        .interaction-item {
-            text-align: center;
-            color: #333333;
-        }
-        .interaction-item .icon {
-            font-size: 18px;
-            margin-bottom: 5px;
-            display: block;
-        }
-        .spatial-explanation {
-            background: #f8f8f8;
-            padding: 25px;
-            border: 2px solid #000000;
-            margin-bottom: 30px;
-        }
-        .spatial-explanation h3 {
-            color: #000000;
-            margin-bottom: 20px;
-            border-bottom: 1px solid #000000;
-            padding-bottom: 10px;
-        }
-        .warp-visualization {
-            background: #ffffff;
-            border: 1px solid #000000;
-            padding: 20px;
-            margin: 20px 0;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        }
-        .sm-representation {
-            background: #f0f0f0;
-            border: 2px solid #000000;
-            padding: 15px;
-            margin: 10px 0;
-            width: 100%;
-            max-width: 600px;
-        }
-        .sm-title {
-            font-weight: bold;
-            text-align: center;
-            margin-bottom: 15px;
-            font-size: 14px;
-            border-bottom: 1px solid #000000;
-            padding-bottom: 5px;
-        }
-        .warp-grid {
-            display: grid;
-            grid-template-columns: repeat(8, 1fr);
-            gap: 2px;
-            margin-bottom: 15px;
-        }
-        .warp-thread {
-            width: 20px;
-            height: 20px;
-            background: #ffffff;
-            border: 1px solid #000000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 8px;
-            font-weight: bold;
-        }
-        .warp-0 { background: #e0e0e0; }
-        .warp-1 { background: #d0d0d0; }
-        .warp-2 { background: #c0c0c0; }
-        .warp-3 { background: #b0b0b0; }
-        .warp-label {
-            font-size: 12px;
-            font-weight: bold;
-            margin-bottom: 5px;
-            text-align: center;
-        }
-        .code-example {
-            background: #f0f0f0;
-            padding: 20px;
-            border: 1px solid #cccccc;
-            font-family: 'Consolas', 'Courier New', monospace;
-            font-size: 13px;
-            line-height: 1.6;
-            border-left: 4px solid #000000;
-            margin: 15px 0;
-            color: #000000;
-        }
-        .highlight {
-            background: #e0e0e0;
-            padding: 2px 4px;
-            border: 1px solid #000000;
-        }
-        .hardware-pipeline {
-            background: #ffffff;
-            border: 2px solid #000000;
-            padding: 20px;
-            margin: 20px 0;
-        }
-        .pipeline-stage {
-            margin-bottom: 30px;
-            border-bottom: 1px solid #cccccc;
-            padding-bottom: 20px;
-        }
-        .pipeline-stage h4 {
-            font-size: 16px;
-            font-weight: bold;
-            margin-bottom: 15px;
-            color: #000000;
-            border-bottom: 1px solid #000000;
-            padding-bottom: 8px;
-        }
-        .sm-array {
-            display: flex;
-            gap: 15px;
-            flex-wrap: wrap;
-            justify-content: center;
-            margin: 20px 0;
-        }
-        .sm-unit {
-            background: #f8f8f8;
-            border: 2px solid #000000;
-            padding: 15px;
-            min-width: 150px;
-            text-align: center;
-        }
-        .sm-header {
-            font-weight: bold;
-            font-size: 14px;
-            margin-bottom: 10px;
-            background: #000000;
-            color: #ffffff;
-            padding: 5px;
-        }
-        .block-assignment {
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-        }
-        .assigned-block {
-            background: #ffffff;
-            border: 1px solid #000000;
-            padding: 5px;
-            font-size: 11px;
-            font-weight: bold;
-        }
-        .sm-detailed {
-            background: #f8f8f8;
-            border: 2px solid #000000;
-            padding: 20px;
-            margin: 20px 0;
-        }
-        .sm-title {
-            font-size: 14px;
-            font-weight: bold;
-            text-align: center;
-            margin-bottom: 20px;
-            background: #000000;
-            color: #ffffff;
-            padding: 10px;
-        }
-        .sm-components {
-            display: flex;
-            flex-direction: column;
-            gap: 15px;
-        }
-        .scheduler-layer {
-            display: flex;
-            gap: 10px;
-            justify-content: center;
-        }
-        .scheduler-unit {
-            background: #d0d0d0;
-            border: 1px solid #000000;
-            padding: 8px 15px;
-            font-size: 11px;
-            font-weight: bold;
-            text-align: center;
-            min-width: 80px;
-        }
-        .register-layer {
-            display: flex;
-            gap: 10px;
-            justify-content: center;
-        }
-        .register-file {
-            background: #e0e0e0;
-            border: 1px solid #000000;
-            padding: 8px 15px;
-            font-size: 11px;
-            font-weight: bold;
-            text-align: center;
-            min-width: 80px;
-        }
-        .execution-layer {
-            display: flex;
-            gap: 8px;
-            justify-content: center;
-            flex-wrap: wrap;
-        }
-        .execution-unit {
-            border: 1px solid #000000;
-            padding: 8px 12px;
-            font-size: 10px;
-            font-weight: bold;
-            text-align: center;
-            min-width: 50px;
-        }
-        .execution-unit.int32 {
-            background: #f0f0f0;
-        }
-        .execution-unit.fp32 {
-            background: #e8e8e8;
-        }
-        .execution-unit.tensor {
-            background: #d8d8d8;
-        }
-        .execution-unit.ldst {
-            background: #c8c8c8;
-        }
-        .execution-unit.sfu {
-            background: #b8b8b8;
-        }
-        .memory-layer {
-            display: flex;
-            justify-content: center;
-        }
-        .shared-memory {
-            background: #000000;
-            color: #ffffff;
-            border: 2px solid #000000;
-            padding: 10px 20px;
-            font-size: 12px;
-            font-weight: bold;
-            text-align: center;
-            width: 80%;
-        }
-        .warp-flow {
-            display: flex;
-            gap: 30px;
-            align-items: flex-start;
-            margin: 20px 0;
-        }
-        .warp-scheduler {
-            background: #f8f8f8;
-            border: 2px solid #000000;
-            padding: 15px;
-            min-width: 200px;
-        }
-        .scheduler-title {
-            font-size: 14px;
-            font-weight: bold;
-            text-align: center;
-            margin-bottom: 15px;
-            background: #000000;
-            color: #ffffff;
-            padding: 8px;
-        }
-        .warp-queue {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-        }
-        .warp-item {
-            padding: 8px 12px;
-            border: 1px solid #000000;
-            font-size: 11px;
-            font-weight: bold;
-            text-align: center;
-        }
-        .warp-item.active {
-            background: #000000;
-            color: #ffffff;
-        }
-        .warp-item.ready {
-            background: #d0d0d0;
-        }
-        .warp-item.waiting {
-            background: #f0f0f0;
-        }
-        .execution-pipeline {
-            flex: 1;
-            background: #f8f8f8;
-            border: 2px solid #000000;
-            padding: 15px;
-        }
-        .pipeline-step {
-            margin-bottom: 15px;
-            padding: 10px;
-            border: 1px solid #000000;
-            background: #ffffff;
-        }
-        .step-title {
-            font-size: 12px;
-            font-weight: bold;
-            margin-bottom: 5px;
-            color: #000000;
-        }
-        .step-content {
-            font-size: 11px;
-            color: #333333;
-            line-height: 1.4;
-        }
         .current-view {
             position: absolute;
             top: 10px;
@@ -758,46 +421,6 @@
                 </div>
             </div>
         </div>
-        <div class="spatial-explanation">
-            <h3>Understanding Spatial Relationships Through Direct Manipulation</h3>
-            <p>The ability to directly manipulate the 3D cube with your cursor creates a much deeper understanding of spatial relationships than static views or sliders ever could. As you rotate the cube, you can see exactly which blocks are neighbors and how the grid extends in all three dimensions simultaneously.</p>
-            <p><strong>Why Direct Interaction Builds Better Mental Models:</strong></p>
-            <p>When you drag to rotate the cube, your brain naturally builds a spatial mental model that connects the visual structure to the mathematical relationships. You can see how a block at position [1,0,1] relates spatially to blocks at [0,0,1], [2,0,1], [1,1,1], and [1,0,0]. This spatial understanding is crucial for writing efficient GPU code that takes advantage of memory locality and thread cooperation patterns.</p>
-            <p><strong>Learning Exercise:</strong> Try rotating the cube to view it from different angles while thinking about how data flows through your algorithm. Can you identify which blocks would naturally work together on shared data? The spatial arrangement you see directly represents the memory access patterns that will determine your algorithm's performance.</p>
-            <div class="code-example">
-// Example: 3D convolution filter processing
-fn apply_3d_convolution(input: UnsafePointer[Float32], output: UnsafePointer[Float32],
-                       width: Int, height: Int, depth: Int):
-    // Each thread processes one output voxel
-    let <span class="highlight">x = global_idx.x</span>  // Width position
-    let <span class="highlight">y = global_idx.y</span>  // Height position
-    let <span class="highlight">z = global_idx.z</span>  // Depth position
-    if x < width and y < height and z < depth:
-        var sum: Float32 = 0
-        // Access neighboring voxels for convolution
-        for dz in range(-1, 2):
-            for dy in range(-1, 2):
-                for dx in range(-1, 2):
-                    let nx = x + dx
-                    let ny = y + dy
-                    let nz = z + dz
-                    if nx >= 0 and nx < width and ny >= 0 and ny < height and nz >= 0 and nz < depth:
-                        let neighbor_idx = nz * width * height + ny * width + nx
-                        sum += input[neighbor_idx] * filter_weights[dz+1][dy+1][dx+1]
-        let output_idx = z * width * height + y * width + x
-        output[output_idx] = sum
-            </div>
-            <p>In this convolution example, threads processing nearby voxels (which you can see as spatially close when you rotate the cube) will access overlapping sets of input data. The 3D spatial organization ensures that these threads are grouped into nearby blocks, enabling efficient sharing of cached memory containing the input voxels they all need to access.</p>
-        </div>
     </div>
     <script>
@@ -847,11 +470,16 @@ fn apply_3d_convolution(input: UnsafePointer[Float32], output: UnsafePointer[Flo
             const spacing = 80; // Space between blocks
             // Create all blocks in 3D space
             for (let z = 0; z < gridZ; z++) {
                 for (let y = 0; y < gridY; y++) {
                     for (let x = 0; x < gridX; x++) {
-                        const block = createBlock3D(x, y, z, blockX, blockY, blockZ, spacing);
                         cube3d.appendChild(block);
                     }
                 }
@@ -860,19 +488,10 @@ fn apply_3d_convolution(input: UnsafePointer[Float32], output: UnsafePointer[Flo
             updateCubeTransform();
         }
-        function createBlock3D(blockX_idx, blockY_idx, blockZ_idx, blockDimX, blockDimY, blockDimZ, spacing) {
             const block = document.createElement('div');
             block.className = 'block-cube';
-            // Calculate center offset for better visual balance
-            const gridX = parseInt(document.getElementById('gridX').value);
-            const gridY = parseInt(document.getElementById('gridY').value);
-            const gridZ = parseInt(document.getElementById('gridZ').value);
-            const centerOffsetX = (gridX - 1) * spacing / 2;
-            const centerOffsetY = (gridY - 1) * spacing / 2;
-            const centerOffsetZ = (gridZ - 1) * spacing / 2;
             // Position in 3D space
             const translateX = blockX_idx * spacing - centerOffsetX;
             const translateY = blockY_idx * spacing - centerOffsetY;
@@ -1007,22 +626,6 @@ fn apply_3d_convolution(input: UnsafePointer[Float32], output: UnsafePointer[Flo
             createThreadGrid();
         }
-        function createWarpVisualization() {
-            const warpDemo = document.getElementById('warpDemo');
-            if (!warpDemo) return;
-            warpDemo.innerHTML = '';
-            // Create 32 threads representing one warp
-            for (let i = 0; i < 32; i++) {
-                const thread = document.createElement('div');
-                thread.className = 'warp-thread warp-0';
-                thread.textContent = i;
-                thread.title = `Thread ${i} in Warp 0`;
-                warpDemo.appendChild(thread);
-            }
-        }
         function createThreadGrid() {
             if (!selectedBlock) return;
@@ -1182,7 +785,6 @@ fn apply_3d_convolution(input: UnsafePointer[Float32], output: UnsafePointer[Flo
         // Initialize everything
         setupMouseInteraction();
         updateVisualization();
-        createWarpVisualization();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Interactive 3D GPU Threading</title>
     <style>
         body {
             font-family: 'Consolas', 'Courier New', monospace;
             padding-bottom: 10px;
         }
+        .interaction-guide {
+            display: flex;
+            justify-content: space-around;
+            margin-bottom: 20px;
+            padding: 15px;
+            background: #f8f8f8;
+            border: 1px solid #cccccc;
+            font-size: 12px;
+        }
+        .interaction-item {
+            text-align: center;
+            color: #333333;
+        }
+        .interaction-item .icon {
+            font-size: 18px;
+            margin-bottom: 5px;
+            display: block;
+        }
         .cube-container {
             height: 500px;
             perspective: 1200px;
             background: #f8f8f8;
         }
         .current-view {
             position: absolute;
             top: 10px;
                 </div>
             </div>
         </div>
     </div>
     <script>
             const spacing = 80; // Space between blocks
+            // Calculate center offset for better visual balance
+            const centerOffsetX = (gridX - 1) * spacing / 2;
+            const centerOffsetY = (gridY - 1) * spacing / 2;
+            const centerOffsetZ = (gridZ - 1) * spacing / 2;
             // Create all blocks in 3D space
             for (let z = 0; z < gridZ; z++) {
                 for (let y = 0; y < gridY; y++) {
                     for (let x = 0; x < gridX; x++) {
+                        const block = createBlock3D(x, y, z, blockX, blockY, blockZ, spacing, centerOffsetX, centerOffsetY, centerOffsetZ);
                         cube3d.appendChild(block);
                     }
                 }
             updateCubeTransform();
         }
+        function createBlock3D(blockX_idx, blockY_idx, blockZ_idx, blockDimX, blockDimY, blockDimZ, spacing, centerOffsetX, centerOffsetY, centerOffsetZ) {
             const block = document.createElement('div');
             block.className = 'block-cube';
             // Position in 3D space
             const translateX = blockX_idx * spacing - centerOffsetX;
             const translateY = blockY_idx * spacing - centerOffsetY;
             createThreadGrid();
         }
         function createThreadGrid() {
             if (!selectedBlock) return;
         // Initialize everything
         setupMouseInteraction();
         updateVisualization();
     </script>
 </body>
 </html>