Spaces:

drbh
/

cuda-grid-visualizer

Running

App Files Files Community

drbh HF Staff commited on Jul 10, 2024

Commit

4ec081b

verified ·

1 Parent(s): b213cce

mvp visualizer

Browse files

Files changed (1) hide show

cuda-grid-visualizer.html +219 -0

cuda-grid-visualizer.html ADDED Viewed

	@@ -0,0 +1,219 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CUDA Grid Visualizer</title>
+    <style>
+        :root {
+            --bg-color: #121212;
+            --text-color: #e0e0e0;
+            --input-bg: #2a2a2a;
+            --input-text: #ffffff;
+            --grid-bg: #1e272e;
+            --thread-bg: #34495e;
+            --thread-hover: #3498db;
+            --info-bg: #1a2327;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 20px;
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            transition: all 0.3s ease;
+            min-height: 100vh;
+            margin: 0;
+        }
+        h1 {
+            margin-bottom: 20px;
+            font-size: 2.5em;
+            text-align: center;
+            color: #3498db;
+        }
+        #controls {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 20px;
+            margin-bottom: 30px;
+            justify-content: center;
+            background-color: var(--input-bg);
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .input-group {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        label {
+            margin-bottom: 8px;
+            font-size: 1em;
+            color: #3498db;
+        }
+        input {
+            width: 70px;
+            padding: 10px;
+            border: none;
+            border-radius: 5px;
+            background-color: var(--input-bg);
+            color: var(--input-text);
+            text-align: center;
+            font-size: 1.1em;
+            transition: all 0.3s ease;
+        }
+        input:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px #3498db;
+        }
+        #grid-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 2px;
+            background-color: var(--grid-bg);
+            padding: 4px;
+            border-radius: 10px;
+            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
+            max-width: 90vw;
+            justify-content: flex-start;
+        }
+        .thread {
+            width: 30px;
+            height: 30px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 0.9em;
+            cursor: pointer;
+            border-radius: 4px;
+            transition: all 0.2s ease;
+        }
+        .thread:hover {
+            transform: scale(1.1);
+            z-index: 1;
+        }
+        #info-panel {
+            margin-top: 30px;
+            padding: 20px;
+            background-color: var(--info-bg);
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            max-width: 350px;
+            width: 100%;
+        }
+        #info-panel p {
+            margin: 10px 0;
+            font-size: 1em;
+        }
+        #info-panel strong {
+            color: #3498db;
+        }
+    </style>
+</head>
+<body>
+    <h1>CUDA Grid Visualizer</h1>
+    <div id="controls">
+        <div class="input-group">
+            <label for="num-blocks">Number of Blocks</label>
+            <input type="number" id="num-blocks" value="4" min="1" max="64">
+        </div>
+        <div class="input-group">
+            <label for="num-threads">Threads per Block</label>
+            <input type="number" id="num-threads" value="16" min="1" max="1024">
+        </div>
+        <div class="input-group">
+            <label for="grid-width">Grid Width (threads)</label>
+            <input type="number" id="grid-width" value="32" min="1" max="256">
+        </div>
+    </div>
+    <div id="grid-container"></div>
+    <div id="info-panel"></div>
+    <script>
+        function updateGrid() {
+            const numBlocks = parseInt(document.getElementById('num-blocks').value);
+            const numThreads = parseInt(document.getElementById('num-threads').value);
+            const gridWidth = parseInt(document.getElementById('grid-width').value);
+            const gridContainer = document.getElementById('grid-container');
+            gridContainer.innerHTML = '';
+            gridContainer.style.width = `${gridWidth * 32}px`; // 30px thread width + 2px gap
+            // Generate a list of distinct colors for blocks
+            const blockColors = generateBlockColors(numBlocks);
+            for (let blockIdx = 0; blockIdx < numBlocks; blockIdx++) {
+                for (let threadIdx = 0; threadIdx < numThreads; threadIdx++) {
+                    const thread = document.createElement('div');
+                    thread.className = 'thread';
+                    thread.textContent = threadIdx;
+                    thread.style.backgroundColor = blockColors[blockIdx];
+                    thread.addEventListener('mouseover', () => showInfo(blockIdx, threadIdx, numThreads));
+                    thread.addEventListener('mouseout', clearInfo);
+                    gridContainer.appendChild(thread);
+                }
+            }
+        }
+        function generateBlockColors(numBlocks) {
+            const colors = [];
+            for (let i = 0; i < numBlocks; i++) {
+                const hue = (i * 137.5) % 360;  // Use golden angle approximation for distribution
+                colors.push(`hsl(${hue}, 70%, 60%)`);
+            }
+            return colors;
+        }
+        function showInfo(blockIdx, threadIdx, numThreads) {
+            const globalThreadId = blockIdx * numThreads + threadIdx;
+            const infoPanel = document.getElementById('info-panel');
+            infoPanel.innerHTML = `
+                <p><strong>Block Index:</strong> ${blockIdx}</p>
+                <p><strong>Thread Index in Block:</strong> ${threadIdx}</p>
+                <p><strong>Global Thread ID:</strong> ${globalThreadId}</p>
+            `;
+        }
+        function clearInfo() {
+            document.getElementById('info-panel').innerHTML = '';
+        }
+        function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+        const debouncedUpdateGrid = debounce(updateGrid, 300);
+        document.querySelectorAll('input').forEach(input => {
+            input.addEventListener('input', debouncedUpdateGrid);
+        });
+        updateGrid();
+    </script>
+</body>
+</html>