Spaces:

fredmo
/

gpu-inference-pulse-slm

Running

App Files Files Community

fredmo commited on Mar 31

Commit

f435976

verified ·

1 Parent(s): 7dca660

Update index.html

Browse files

Files changed (1) hide show

index.html +499 -19

index.html CHANGED Viewed

@@ -1,19 +1,499 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Audiowide&display=swap" rel="stylesheet">
+    <title>GPU Memory Visualizer (Synthwave Edition)</title>
+    <link rel="stylesheet" href="style.css">
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    // --- Canvas & Control Elements ---
+    const canvas = document.getElementById('gpuCanvas'); const ctx = canvas.getContext('2d');
+    const gpuContainer = document.querySelector('.gpu-container');
+    const gpuSelect = document.getElementById('gpu-select');
+    const modelSelect = document.getElementById('model-select');
+    const promptButtons = document.querySelectorAll('.prompt-button');
+    const resetButton = document.getElementById('reset-button');
+    const statusMessage = document.getElementById('status-message');
+    const workdayButton = document.getElementById('workday-pattern');
+    const batchButton = document.getElementById('batch-pattern');
+    const burstHellButton = document.getElementById('burst-hell-pattern'); // ++ Get New Button ++
+    // ++ Add new button to control list ++
+    const controlsToDisableOnError = [resetButton, workdayButton, batchButton, burstHellButton, ...promptButtons];
+    const simulationButtons = [workdayButton, batchButton, burstHellButton]; // ++ Group sim buttons ++
+    // --- Configuration --- (Keep existing)
+    const BLOCK_SIZE = 15; const PADDING = 1; const COLS = Math.floor(parseInt(canvas.width) / (BLOCK_SIZE + PADDING));
+    const BASE_CANVAS_HEIGHT = 200; const GPU_HEIGHT_MULTIPLIERS = { 'L4': 1, 'A100': 2, 'H100': 4 };
+    const GPU_GB = { 'L4': 24, 'A100': 40, 'H100': 80 }; const MODEL_GB = { 'gemma-1b': 2, 'gemma-4b': 8, 'gemma-12b': 24, 'gemma-27b': 54 };
+    let ROWS; let TOTAL_BLOCKS; let modelBlockSizes = {}; let MAIN_GPU_AREA_START_INDEX; const TOKENS_TO_GENERATE = 3;
+    // --- SYNTHWAVE Colors --- (Keep existing)
+    const COLOR_FREE = '#1a1a2e'; const COLOR_MODEL = '#4d4dff'; const COLOR_PROMPT_SMALL = '#ff00ff'; const COLOR_PROMPT_MID = '#00ffff'; const COLOR_PROMPT_LONG = '#fff000'; const COLOR_PROCESSING = '#9d00ff'; const COLOR_GENERATED = '#ff1f1f';
+    // --- State Variables --- (Keep existing)
+    let gpuType = gpuSelect.value; let baseBlockProcessingTimeMs;
+    let memory = []; let processingQueue = []; let visuallyPlacedPrompts = []; let currentTask = null; let nextPromptId = 0; let isSimulationRunning = false; let simulationTimeoutIds = [];
+    // --- Helper Functions to Disable/Enable Controls --- (Modify enableControls)
+    function disableControlsOnError() { controlsToDisableOnError.forEach(control => control.disabled = true); gpuSelect.disabled = false; modelSelect.disabled = false; gpuContainer.style.opacity = '0.7'; console.log("Controls Disabled (Except GPU & Model Select)"); }
+    function enableControls() {
+        // Enable non-simulation controls first
+        [gpuSelect, modelSelect, resetButton, ...promptButtons].forEach(control => control.disabled = false);
+        // Enable simulation buttons ONLY if a simulation isn't running
+        simulationButtons.forEach(button => button.disabled = isSimulationRunning);
+        gpuContainer.style.opacity = '1';
+        console.log("Controls Enabled/Status Updated");
+    }
+     function disableSimButtons() {
+        simulationButtons.forEach(button => button.disabled = true);
+    }
+    // --- Update Canvas Size & Calculate Model Block Sizes --- (Keep existing)
+    function updateCanvasSizeAndRecalculateGrid() { const selectedGpu = gpuSelect.value || 'L4'; const multiplier = GPU_HEIGHT_MULTIPLIERS[selectedGpu] || 1; const newHeight = Math.floor(BASE_CANVAS_HEIGHT * multiplier); canvas.height = newHeight; gpuContainer.style.height = `${newHeight + 4}px`; ROWS = Math.floor(newHeight / (BLOCK_SIZE + PADDING)); TOTAL_BLOCKS = COLS * ROWS; const l4Height = BASE_CANVAS_HEIGHT; const l4Rows = Math.floor(l4Height / (BLOCK_SIZE + PADDING)); const totalBlocksForL4 = COLS * l4Rows; const blocksPerGbScale = totalBlocksForL4 / GPU_GB['L4']; modelBlockSizes = {}; for (const modelKey in MODEL_GB) { const modelGb = MODEL_GB[modelKey]; modelBlockSizes[modelKey] = Math.round(blocksPerGbScale * modelGb); } console.log(`Set canvas height: ${newHeight}px | Grid: ${COLS}x${ROWS}=${TOTAL_BLOCKS} | Model Sizes:`, modelBlockSizes); }
+    // --- Initialization --- (Keep existing)
+    function initializeMemory() { console.log("--- Initializing Grid ---"); isSimulationRunning = false; simulationTimeoutIds.forEach(clearTimeout); simulationTimeoutIds = []; if(currentTask && currentTask.timeoutId) clearTimeout(currentTask.timeoutId); const selectedModel = modelSelect.value; const currentModelWeightsBlocks = modelBlockSizes[selectedModel] || modelBlockSizes['gemma-1b']; MAIN_GPU_AREA_START_INDEX = currentModelWeightsBlocks; console.log(`Model: ${selectedModel}, W: ${currentModelWeightsBlocks}, Total: ${TOTAL_BLOCKS}, Start: ${MAIN_GPU_AREA_START_INDEX}`); memory = new Array(TOTAL_BLOCKS).fill(COLOR_FREE); processingQueue = []; visuallyPlacedPrompts = []; currentTask = null; nextPromptId = 0; updateProcessingSpeed(); if (currentModelWeightsBlocks >= TOTAL_BLOCKS) { console.error(`Model (${currentModelWeightsBlocks}) >= total (${TOTAL_BLOCKS}) for ${gpuSelect.value}.`); statusMessage.textContent = "ERROR: MODEL TOO LARGE FOR GRID!"; statusMessage.classList.add('error'); disableControlsOnError(); } else { statusMessage.classList.remove('error'); statusMessage.textContent = 'SYSTEM IDLE.'; enableControls(); for (let i = 0; i < currentModelWeightsBlocks; i++) { memory[i] = COLOR_MODEL; } const freeSpace = TOTAL_BLOCKS - currentModelWeightsBlocks; if (freeSpace < 100) { console.warn(`Low free space (${freeSpace}).`); } } drawAll(); }
+    // --- Drawing Functions --- (Keep existing)
+    function getCoords(index) { const row = Math.floor(index / COLS); const col = index % COLS; const x = col * (BLOCK_SIZE + PADDING); const y = row * (BLOCK_SIZE + PADDING); return { x, y }; }
+    function drawBlock(index, color) { if (index >= memory.length || index < 0) return; const { x, y } = getCoords(index); ctx.fillStyle = color; ctx.fillRect(x, y, BLOCK_SIZE, BLOCK_SIZE); }
+    function drawAll() { ctx.fillStyle = COLOR_FREE; ctx.fillRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < memory.length; i++) { if (memory[i] !== COLOR_FREE) { drawBlock(i, memory[i]); } } }
+    // --- Logic Functions --- (Keep existing)
+    function getPromptColor(size) { if (size <= 3) return COLOR_PROMPT_SMALL; if (size <= 5) return COLOR_PROMPT_MID; return COLOR_PROMPT_LONG; }
+    function updateProcessingSpeed() { gpuType = gpuSelect.value || 'L4'; if (gpuType === 'A100') { baseBlockProcessingTimeMs = 150; } else if (gpuType === 'H100') { baseBlockProcessingTimeMs = 50; } else { baseBlockProcessingTimeMs = 250; } console.log(`GPU set to ${gpuType}, base speed ${baseBlockProcessingTimeMs}ms/block`); }
+    function findFreeSpaceInMainGPU(size) { let c=0; for(let i=MAIN_GPU_AREA_START_INDEX;i<TOTAL_BLOCKS;i++){ if(memory[i]===COLOR_FREE){c++;if(c===size){return i-size+1;}}else{c=0;}} return -1;}
+    function findOldestGeneratedBlock() { for (let i=MAIN_GPU_AREA_START_INDEX; i<TOTAL_BLOCKS; i++) { if (memory[i] === COLOR_GENERATED) return i; } return -1; }
+    function tryPlaceWaitingPrompts() { let p=false; for(let i=processingQueue.length-1;i>=0;i--){const q=processingQueue[i];const idx=findFreeSpaceInMainGPU(q.size); if(idx!==-1){processingQueue.splice(i,1);const pl={...q,startIndex:idx};visuallyPlacedPrompts.push(pl); for(let j=0;j<q.size;j++){if(idx+j<memory.length)memory[idx+j]=q.color;} p=true;}} if(p){drawAll();} updateStatusMessage(); }
+    function processNextBlock() { if (!currentTask) return; const { prompt:p, startIndex:s, processedCount:pc, generatedCount:gc, generatedIndices:gi}=currentTask; let bC=false; const ept=baseBlockProcessingTimeMs; if (pc<p.size){const bI=s+pc; if (bI<TOTAL_BLOCKS&&memory[bI]===p.color){memory[bI]=COLOR_PROCESSING; currentTask.processedCount++; drawBlock(bI,COLOR_PROCESSING); bC=true; const rBI=findOldestGeneratedBlock(); if(rBI!==-1){memory[rBI]=COLOR_FREE; drawBlock(rBI,COLOR_FREE);}}else if(bI<TOTAL_BLOCKS&&memory[bI]===COLOR_PROCESSING){currentTask.processedCount++;}else{console.error(`Block ${bI} unexpected: ${memory[bI]}. Skip.`); currentTask.processedCount++;}}else if(gc<TOKENS_TO_GENERATE){const fGB=findFreeSpaceInMainGPU(1); if(fGB!==-1){memory[fGB]=COLOR_GENERATED; currentTask.generatedCount++; gi.push(fGB); drawBlock(fGB,COLOR_GENERATED); bC=true;}else{currentTask.generatedCount=TOKENS_TO_GENERATE; bC=true;}} if(pc>=p.size&&gc>=TOKENS_TO_GENERATE){statusMessage.textContent='TASK COMPLETE.';let cC=0;for(let i=0;i<p.size;i++){const idx=s+i;if(idx<TOTAL_BLOCKS&&memory[idx]===COLOR_PROCESSING){memory[idx]=COLOR_FREE; cC++;}} const tId=currentTask.timeoutId; currentTask=null; drawAll(); setTimeout(()=>{tryPlaceWaitingPrompts();checkAndStartProcessing();},50); return;} if(currentTask){currentTask.timeoutId=setTimeout(processNextBlock,ept);}}
+    function checkAndStartProcessing() { if (currentTask) return; if (visuallyPlacedPrompts.length > 0) { visuallyPlacedPrompts.sort((a,b)=>a.startIndex-b.startIndex); const nPI=visuallyPlacedPrompts[0]; statusMessage.textContent='PROCESSING...'; statusMessage.classList.remove('error'); visuallyPlacedPrompts.shift(); currentTask={prompt:{id:nPI.id,size:nPI.size,color:nPI.color},startIndex:nPI.startIndex,processedCount:0,generatedCount:0,generatedIndices:[],timeoutId:null}; currentTask.timeoutId=setTimeout(processNextBlock,baseBlockProcessingTimeMs); return;} updateStatusMessage();}
+    function updateStatusMessage() { if(statusMessage.classList.contains('error')) return; if(currentTask){const prg=currentTask.prompt.size>0?Math.round((currentTask.processedCount/currentTask.prompt.size)*100):100; statusMessage.textContent=`PROCESSING TX ${currentTask.prompt.id} [${prg}%]|KV GEN ${currentTask.generatedCount}/${TOKENS_TO_GENERATE}`;}else if(isSimulationRunning){statusMessage.textContent='SIMULATION ACTIVE...';}else if(processingQueue.length>0){statusMessage.textContent=`${processingQueue.length} TX QUEUED//WAITING GRID...`;}else if(visuallyPlacedPrompts.length>0){statusMessage.textContent=`${visuallyPlacedPrompts.length} TX ON GRID//AWAITING...`;}else{let fB=0,gB=0; for(let i=MAIN_GPU_AREA_START_INDEX;i<TOTAL_BLOCKS;i++){if(memory[i]===COLOR_FREE)fB++;else if(memory[i]===COLOR_GENERATED)gB++;} const tFB=TOTAL_BLOCKS-(MAIN_GPU_AREA_START_INDEX||0)-gB-visuallyPlacedPrompts.reduce((a,p)=>a+p.size,0); statusMessage.textContent=`SYSTEM IDLE.//${Math.max(0,tFB)} FREE//${gB} KV`;}}
+    // --- Simulation Functions ---
+    function clickPromptButton(size) { if (gpuSelect.disabled) return; /* Prevent clicks if controls disabled */ const color = getPromptColor(size); const newPrompt = { id: nextPromptId++, size: size, color: color }; processingQueue.push(newPrompt); tryPlaceWaitingPrompts(); checkAndStartProcessing(); updateStatusMessage(); }
+    function simulateWorkday() { if (isSimulationRunning || workdayButton.disabled) return; console.log("Starting Workday Simulation..."); isSimulationRunning = true; disableSimButtons(); simulationTimeoutIds = []; let currentTime = 0; const schedule = (delay, func) => { simulationTimeoutIds.push(setTimeout(func, currentTime + delay)); }; for (let i = 0; i < 15; i++) { schedule(i * 400, () => clickPromptButton(Math.random() < 0.7 ? 3 : 5)); } currentTime += 15 * 400 + 2000; for (let i = 0; i < 10; i++) { let size = 3; const rand = Math.random(); if (rand > 0.8) size = 15; else if (rand > 0.4) size = 5; schedule(i * 800, () => clickPromptButton(size)); } currentTime += 10 * 800 + 3000; for (let i = 0; i < 12; i++) { schedule(i * 500, () => clickPromptButton(Math.random() < 0.6 ? 3 : 5)); } currentTime += 12 * 500 + 1000; schedule(500, () => { console.log("Workday Simulation Finished."); isSimulationRunning = false; enableControls(); updateStatusMessage(); }); updateStatusMessage(); }
+    function simulateBatch() { if (isSimulationRunning || batchButton.disabled) return; console.log("Starting Batch Simulation..."); isSimulationRunning = true; disableSimButtons(); simulationTimeoutIds = []; let currentTime = 0; const schedule = (delay, func) => { simulationTimeoutIds.push(setTimeout(func, currentTime + delay)); }; for (let i = 0; i < 8; i++) { let size = Math.random() < 0.6 ? 15 : 5; schedule(i * 3000, () => clickPromptButton(size)); } currentTime += 8 * 3000; schedule(1000, () => clickPromptButton(3)); schedule(1500, () => clickPromptButton(5)); currentTime += 2000; schedule(500, () => { console.log("Batch Simulation Finished."); isSimulationRunning = false; enableControls(); updateStatusMessage(); }); updateStatusMessage(); }
+    // ++ Burst Hell Simulation ++
+    function simulateBurstHell() {
+        if (isSimulationRunning || burstHellButton.disabled) return;
+        console.log("Starting BURST HELL Simulation...");
+        isSimulationRunning = true;
+        disableSimButtons(); // Disable all sim buttons
+        simulationTimeoutIds = [];
+        let currentTime = 0;
+        const schedule = (delay, func) => {
+            simulationTimeoutIds.push(setTimeout(func, currentTime + delay));
+        };
+        // Morning burst x5 (more density)
+        const morningCount = 15 * 5;
+        for (let i = 0; i < morningCount; i++) {
+            schedule(i * 80, () => clickPromptButton(Math.random() < 0.7 ? 3 : 5)); // Faster interval
+        }
+        currentTime += morningCount * 80 + 1500; // Shorter pause
+        // Mid-day x5 (more density)
+        const middayCount = 10 * 5;
+         for (let i = 0; i < middayCount; i++) {
+             let size = 3;
+             const rand = Math.random();
+             if (rand > 0.9) size = 15; // Fewer long prompts maybe?
+             else if (rand > 0.3) size = 5;
+             schedule(i * 120, () => clickPromptButton(size)); // Faster interval
+         }
+         currentTime += middayCount * 120 + 2000; // Shorter pause
+         // Afternoon burst x5 (more density)
+         const afternoonCount = 12 * 5;
+          for (let i = 0; i < afternoonCount; i++) {
+             schedule(i * 100, () => clickPromptButton(Math.random() < 0.6 ? 3 : 5)); // Faster interval
+         }
+         currentTime += afternoonCount * 100 + 1000;
+         // End simulation
+         schedule(500, () => {
+            console.log("BURST HELL Simulation Finished.");
+            isSimulationRunning = false;
+            enableControls(); // Re-enable controls (including sim buttons)
+            updateStatusMessage();
+         });
+         updateStatusMessage();
+    }
+    // ++ End Burst Hell ++
+    // --- Event Listeners ---
+    gpuSelect.addEventListener('change', () => { console.log("GPU Changed"); updateCanvasSizeAndRecalculateGrid(); initializeMemory(); });
+    modelSelect.addEventListener('change', () => { console.log("Model Changed"); initializeMemory(); });
+    promptButtons.forEach(button => { button.addEventListener('click', () => { if (button.disabled || isSimulationRunning) return; const size = parseInt(button.getAttribute('data-size')); const color = getPromptColor(size); const newPrompt = { id: nextPromptId++, size: size, color: color }; processingQueue.push(newPrompt); tryPlaceWaitingPrompts(); checkAndStartProcessing(); updateStatusMessage(); }); });
+    resetButton.addEventListener('click', () => { if (resetButton.disabled) return; console.log("Reset Clicked"); updateCanvasSizeAndRecalculateGrid(); initializeMemory(); } );
+    workdayButton.addEventListener('click', simulateWorkday);
+    batchButton.addEventListener('click', simulateBatch);
+    burstHellButton.addEventListener('click', simulateBurstHell); // ++ Add Listener ++
+    // --- Initial Setup ---
+    updateCanvasSizeAndRecalculateGrid(); initializeMemory();
+    setInterval(() => { updateStatusMessage(); if (!gpuSelect.disabled) { if (!currentTask && !isSimulationRunning && visuallyPlacedPrompts.length > 0) { checkAndStartProcessing(); } if (!currentTask && !isSimulationRunning && processingQueue.length > 0) { tryPlaceWaitingPrompts(); } } }, 1000);
+});
+</script>
+<style>
+/* Import Google Fonts (already in HTML, but good practice) */
+@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Audiowide&display=swap');
+:root {
+    /* Synthwave Color Palette */
+    --color-background: #1a1a2e; /* Deep dark blue/purple */
+    --color-background-light: #2a2a4e;
+    --color-grid-lines: #3a3a5e; /* For potential future grid lines */
+    --color-text: #ffffff;
+    --color-neon-pink: #ff00ff;
+    --color-neon-cyan: #00ffff;
+    --color-neon-purple: #9d00ff; /* Electric purple */
+    --color-neon-orange: #ff8c00; /* Neon orange */
+    --color-neon-red: #ff1f1f;   /* Brighter neon red */
+    --color-neon-yellow: #fff000; /* Bright neon yellow */
+    --color-model-blue: #4d4dff; /* A slightly brighter dark blue */
+    /* Fonts */
+    --font-heading: 'Orbitron', sans-serif;
+    --font-body: 'Audiowide', sans-serif; /* Using Audiowide for more elements */
+}
+body {
+    font-family: var(--font-body);
+    background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e); /* Dark Gradient */
+    color: var(--color-text);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100vh;
+    margin: 0;
+    padding-top: 20px; /* Add some space at the top */
+}
+h1 {
+    font-family: var(--font-heading);
+    font-weight: 700;
+    color: var(--color-neon-cyan);
+    text-shadow: 0 0 5px var(--color-neon-cyan),
+                 0 0 10px var(--color-neon-cyan),
+                 0 0 15px var(--color-neon-pink); /* Pink/Cyan glow */
+    margin-bottom: 25px;
+    letter-spacing: 2px;
+}
+h3 {
+     font-family: var(--font-heading);
+     color: var(--color-neon-orange);
+     text-shadow: 0 0 5px var(--color-neon-orange);
+     margin-bottom: 10px;
+     font-weight: 400;
+     letter-spacing: 1px;
+}
+.controls, .prompt-controls, .simulation-controls {
+    margin: 10px;
+    padding: 15px 20px; /* More padding */
+    background-color: rgba(0, 0, 0, 0.3); /* Translucent dark background */
+    border: 1px solid var(--color-neon-purple);
+    box-shadow: 0 0 10px var(--color-neon-purple); /* Purple glow */
+    border-radius: 5px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px; /* More gap */
+    align-items: center;
+    justify-content: center;
+    width: 80%; /* Limit width */
+    max-width: 850px;
+}
+label {
+    color: var(--color-neon-cyan);
+    text-shadow: 0 0 3px var(--color-neon-cyan);
+    font-weight: bold;
+}
+select, input /* Style select boxes similarly */ {
+    background-color: var(--color-background-light);
+    color: var(--color-text);
+    border: 1px solid var(--color-neon-pink);
+    padding: 5px 8px;
+    border-radius: 3px;
+    font-family: var(--font-body);
+    box-shadow: inset 0 0 5px rgba(255, 0, 255, 0.5); /* Inner pink glow */
+}
+select option {
+    background-color: var(--color-background);
+    color: var(--color-text);
+}
+.gpu-container {
+    border: 2px solid var(--color-neon-cyan); /* Cyan border */
+    margin-top: 20px;
+    margin-bottom: 20px;
+    background-color: var(--color-background); /* Use dark bg for canvas container */
+    width: 800px;
+    height: 400px;
+    overflow: hidden;
+    box-shadow: 0 0 15px var(--color-neon-cyan), /* Outer glow */
+                inset 0 0 10px rgba(0, 0, 0, 0.5); /* Inner shadow */
+    padding: 2px; /* Small padding so border doesn't overlap blocks */
+}
+#gpuCanvas {
+    display: block;
+    background-color: var(--color-background); /* Match container */
+}
+/* --- Button Styling --- */
+.prompt-button, .simulation-button, #reset-button {
+    padding: 10px 18px; /* Larger buttons */
+    border: none; /* Remove default border */
+    border-bottom: 2px solid; /* Add bottom border for 3D effect */
+    cursor: pointer;
+    border-radius: 4px;
+    font-weight: bold;
+    font-family: var(--font-body);
+    background-color: var(--color-background-light);
+    color: var(--color-text);
+    transition: all 0.2s ease;
+    text-shadow: 0 0 4px; /* Apply base text shadow */
+    box-shadow: 0 0 5px, inset 0 0 3px rgba(0,0,0,0.4); /* Apply base box shadow */
+}
+.prompt-button:hover, .simulation-button:hover, #reset-button:hover {
+    opacity: 0.9;
+    transform: translateY(-1px); /* Slight lift on hover */
+}
+.prompt-button:active, .simulation-button:active, #reset-button:active {
+     transform: translateY(1px); /* Push down on click */
+     box-shadow: 0 0 2px, inset 0 0 5px rgba(0,0,0,0.6);
+}
+/* Specific Button Colors & Glows */
+#reset-button {
+    border-color: var(--color-neon-red);
+    color: var(--color-neon-red);
+    text-shadow: 0 0 4px var(--color-neon-red);
+    box-shadow: 0 0 5px var(--color-neon-red), inset 0 0 3px rgba(0,0,0,0.4);
+}
+#reset-button:hover { box-shadow: 0 0 8px var(--color-neon-red), inset 0 0 3px rgba(0,0,0,0.4); }
+.prompt-button[data-size="3"] { /* Short -> Pink */
+    border-color: var(--color-neon-pink);
+    color: var(--color-neon-pink);
+    text-shadow: 0 0 4px var(--color-neon-pink);
+    box-shadow: 0 0 5px var(--color-neon-pink), inset 0 0 3px rgba(0,0,0,0.4);
+}
+.prompt-button[data-size="3"]:hover { box-shadow: 0 0 8px var(--color-neon-pink), inset 0 0 3px rgba(0,0,0,0.4); }
+.prompt-button[data-size="5"] { /* Mid -> Cyan */
+    border-color: var(--color-neon-cyan);
+    color: var(--color-neon-cyan);
+    text-shadow: 0 0 4px var(--color-neon-cyan);
+    box-shadow: 0 0 5px var(--color-neon-cyan), inset 0 0 3px rgba(0,0,0,0.4);
+}
+.prompt-button[data-size="5"]:hover { box-shadow: 0 0 8px var(--color-neon-cyan), inset 0 0 3px rgba(0,0,0,0.4); }
+.prompt-button[data-size="15"] { /* Long -> Yellow */
+    border-color: var(--color-neon-yellow);
+    color: var(--color-neon-yellow);
+    text-shadow: 0 0 4px var(--color-neon-yellow);
+    box-shadow: 0 0 5px var(--color-neon-yellow), inset 0 0 3px rgba(0,0,0,0.4);
+}
+.prompt-button[data-size="15"]:hover { box-shadow: 0 0 8px var(--color-neon-yellow), inset 0 0 3px rgba(0,0,0,0.4); }
+.simulation-button { /* Simulation -> Orange */
+    border-color: var(--color-neon-orange);
+    color: var(--color-neon-orange);
+    text-shadow: 0 0 4px var(--color-neon-orange);
+    box-shadow: 0 0 5px var(--color-neon-orange), inset 0 0 3px rgba(0,0,0,0.4);
+}
+.simulation-button:hover { box-shadow: 0 0 8px var(--color-neon-orange), inset 0 0 3px rgba(0,0,0,0.4); }
+.simulation-button:disabled {
+    border-color: #555;
+    color: #777;
+    text-shadow: none;
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.6);
+    cursor: not-allowed;
+    opacity: 0.6;
+    transform: translateY(0);
+}
+#status-message {
+    font-weight: bold;
+    color: var(--color-text); /* White status text */
+    text-shadow: 0 0 3px var(--color-neon-purple); /* Purple glow */
+    min-width: 150px;
+    text-align: center;
+    flex-basis: 100%;
+    margin-top: 10px; /* More space for status */
+    letter-spacing: 1px;
+}
+#status-message {
+    font-weight: bold;
+    color: var(--color-text); /* Default white */
+    text-shadow: 0 0 3px var(--color-neon-purple); /* Default purple glow */
+    min-width: 150px;
+    text-align: center;
+    flex-basis: 100%;
+    margin-top: 10px;
+    letter-spacing: 1px;
+    transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition for color change */
+}
+/* ++ New Style for Error Status ++ */
+#status-message.error {
+    color: var(--color-neon-red); /* Use neon red for errors */
+    text-shadow: 0 0 5px var(--color-neon-red), /* Stronger red glow */
+                 0 0 8px #ff0000;
+}
+#status-message {
+    font-weight: bold;
+    color: var(--color-text);
+    text-shadow: 0 0 3px var(--color-neon-purple);
+    min-width: 150px;
+    text-align: center;
+    flex-basis: 100%;
+    margin-top: 10px;
+    letter-spacing: 1px;
+    transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transition */
+}
+/* ++ Style for Error Message ++ */
+#status-message.error {
+    color: var(--color-neon-red);
+    text-shadow: 0 0 5px var(--color-neon-red);
+}
+/* --- Legend Styling --- */
+.legend {
+    margin-top: 25px; /* Space above the legend */
+    padding: 15px 20px;
+    background-color: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--color-neon-purple);
+    box-shadow: 0 0 10px var(--color-neon-purple);
+    border-radius: 5px;
+    width: 80%;
+    max-width: 500px; /* Make legend less wide */
+    text-align: center;
+}
+.legend h3 {
+    margin-top: 0; /* Remove extra top margin from heading */
+    margin-bottom: 15px;
+    color: var(--color-neon-orange); /* Match other headings */
+    text-shadow: 0 0 5px var(--color-neon-orange);
+}
+.legend-item {
+    display: flex; /* Align color swatch and text */
+    align-items: center;
+    justify-content: center; /* Center items within the flex line */
+    margin-bottom: 8px; /* Space between legend items */
+    font-size: 0.9em; /* Slightly smaller text */
+    color: var(--color-text);
+}
+.legend-color {
+    display: inline-block;
+    width: 15px; /* Size of the color swatch */
+    height: 15px;
+    margin-right: 10px; /* Space between swatch and text */
+    border-radius: 3px; /* Slightly rounded corners */
+    vertical-align: middle; /* Align with text */
+    box-shadow: inset 0 0 3px rgba(0,0,0,0.5); /* Subtle inner shadow */
+}
+</style>
+</head>
+<body>
+    <h1>GPU Inference Pulse (SLM Edition)</h1>
+    <div class="controls">
+        <label for="gpu-select">SYSTEM:</label>
+        <select id="gpu-select">
+            <option value="L4" selected>L4 24GB (Standard)</option>
+            <option value="A100">A100 40GB (High)</option>
+            <option value="H100">H100 80GB (Mega)</option>
+        </select>
+        <label for="model-select">MODEL:</label>
+        <select id="model-select">
+            <option value="gemma-1b" selected>Gemma 3 1B</option>
+            <option value="gemma-4b">Gemma 3 4B</option>
+            <option value="gemma-12b">Gemma 3 12B</option>
+            <option value="gemma-27b">Gemma 3 27B</option>
+        </select>
+        <button id="reset-button">RESET GRID</button>
+         <span id="status-message">SYSTEM IDLE.</span>
+    </div>
+    <div class="gpu-container">
+        <canvas id="gpuCanvas" width="800"></canvas>
+    </div>
+    <div class="prompt-controls">
+        <h3>INITIATE PROMPT:</h3>
+        <button class="prompt-button" data-size="3">SHORT (3)</button>
+        <button class="prompt-button" data-size="5">MEDIUM (5)</button>
+        <button class="prompt-button" data-size="15">LONG (15)</button>
+    </div>
+    <div class="simulation-controls">
+        <h3>SIMULATE LOAD:</h3>
+        <button class="simulation-button" id="workday-pattern">WORKDAY</button>
+        <button class="simulation-button" id="batch-pattern">BATCH RUN</button>
+        <!-- ++ Add Burst Hell Button ++ -->
+        <button class="simulation-button" id="burst-hell-pattern">BURST HELL</button>
+        <!-- ++ End Add ++ -->
+    </div>
+    <script src="script.js"></script> <!-- Keep your script tag -->
+    <!-- Color Legend Section -->
+    <div class="legend">
+        <h3>LEGEND:</h3>
+        <div class="legend-item">
+            <span class="legend-color" style="background-color: #4d4dff;"></span> Model Weights Memory Footprint
+        </div>
+        <div class="legend-item">
+            <span class="legend-color" style="background-color: #ff00ff;"></span> Short Prompt Input Tokens
+        </div>
+         <div class="legend-item">
+            <span class="legend-color" style="background-color: #00ffff;"></span> Medium Prompt Input Tokens
+        </div>
+         <div class="legend-item">
+            <span class="legend-color" style="background-color: #fff000;"></span> Long Prompt Input Tokens
+        </div>
+         <div class="legend-item">
+            <span class="legend-color" style="background-color: #9d00ff;"></span> Processing Input Tokens
+        </div>
+        <div class="legend-item">
+            <span class="legend-color" style="background-color: #ff1f1f;"></span> Generated Tokens (Output)
+        </div>
+         <div class="legend-item">
+            <span class="legend-color" style="background-color: #1a1a2e; border: 1px solid #555;"></span> Free Memory
+        </div>
+    </div>
+    <!-- End Color Legend Section -->
+	 <h2>fredmo</h2>
+</body>
+</html>