Spaces:

fredmo
/

GpuFit

Running

App Files Files Community

fredmo commited on Mar 26, 2025

Commit

5e23c4d

verified ·

1 Parent(s): d7df83d

Update index.html

Browse files

Files changed (1) hide show

index.html +558 -492

index.html CHANGED Viewed

@@ -1,583 +1,649 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-	 <meta author="fredmo">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GPU Memory Configurator</title>
-    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
-	 <script>
-	 document.addEventListener('DOMContentLoaded', () => {
     // --- Data Definitions ---
-    const gpuData = { /* ... Keep as is ... */
-        'L4': { name: 'L4', capacity: 24 },
-        'A100-40': { name: 'A100 40GB', capacity: 40 },
-        'A100-80': { name: 'A100 80GB', capacity: 80 },
-        'H100': { name: 'H100 80GB', capacity: 80 }
     };
-    const modelData = { /* ... Remove promptBaseSize ... */
-        'gemma-1b': { name: 'Gemma 3 1B', baseModelSize: 3 }, // Removed kvCacheFactor, handled by utilization now
-        'gemma-4b': { name: 'Gemma 3 4B', baseModelSize: 8 },
-        'gemma-12b': { name: 'Gemma 3 12B', baseModelSize: 20 },
-        'gemma-27b': { name: 'Gemma 3 27B', baseModelSize: 45 }
     };
-    const quantizationData = { /* ... Keep as is ... */
-        'fp32': { name: 'FP32', modifier: 1.0 },
-        'bf16': { name: 'BF16', modifier: 0.5 },
-        'int4': { name: 'INT4', modifier: 0.25 }
     };
-    // NEW: GPU Memory Utilization Data
     const gpuMemoryUtilizationData = {
-        'util-0.5': { name: '50% KV Util', factor: 0.5 },
-        'util-0.7': { name: '70% KV Util', factor: 0.7 },
-        'util-0.9': { name: '90% KV Util', factor: 0.9 }
     };
     // --- State Variables ---
-    let selectedGpuId = 'L4';
     let selectedModelId = 'gemma-1b';
     let selectedQuantizationId = 'fp32';
-    let selectedUtilizationId = 'util-0.5'; // Default to 50%
     // --- DOM References ---
     const gpuSelectorDiv = document.getElementById('gpu-selector');
     const modelSelectorDiv = document.getElementById('model-selector');
     const quantizationSelectorDiv = document.getElementById('quantization-selector');
-    const utilizationSelectorDiv = document.getElementById('utilization-selector'); // New
     const gpuCapacityLabel = document.getElementById('gpu-capacity-label');
     const visualizationArea = document.getElementById('gpu-visualization-area');
-    // Removed promptBar reference
     const modelBar = document.getElementById('model-bar');
     const kvcacheBar = document.getElementById('kvcache-bar');
-    // Removed promptUsageSpan reference
     const modelUsageSpan = document.getElementById('model-usage');
     const kvcacheUsageSpan = document.getElementById('kvcache-usage');
-    const kvcachePromptInfoSpan = document.getElementById('kvcache-prompt-info'); // New span for info
     const totalUsageSpan = document.getElementById('total-usage');
     const fitStatusSpan = document.getElementById('fit-status');
     // --- Initialization ---
     function initializeControls() {
-        createButtons(gpuData, gpuSelectorDiv, handleGpuSelect, selectedGpuId);
-        createButtons(modelData, modelSelectorDiv, handleModelSelect, selectedModelId);
-        createButtons(quantizationData, quantizationSelectorDiv, handleQuantizationSelect, selectedQuantizationId);
-        createButtons(gpuMemoryUtilizationData, utilizationSelectorDiv, handleUtilizationSelect, selectedUtilizationId); // Create Util buttons
-        updateCalculationAndDisplay(); // Initial calculation
     }
     function createButtons(data, container, clickHandler, activeId) {
-        // Clear existing buttons first
-        const existingButtons = container.querySelectorAll('button');
-        existingButtons.forEach(btn => btn.remove());
-        Object.keys(data).forEach(id => {
-            const item = data[id];
-            const button = document.createElement('button');
-            button.textContent = item.name;
-            button.dataset.id = id;
-            button.addEventListener('click', () => clickHandler(id, container));
-            if (id === activeId) {
-                button.classList.add('active');
-            }
-            container.appendChild(button);
-        });
     }
     // --- Event Handlers ---
     function handleGpuSelect(id, container) {
-        selectedGpuId = id;
-        updateActiveButton(container, id);
-        updateCalculationAndDisplay();
     }
     function handleModelSelect(id, container) {
-        selectedModelId = id;
-        updateActiveButton(container, id);
-        updateCalculationAndDisplay();
     }
     function handleQuantizationSelect(id, container) {
-        selectedQuantizationId = id;
-        updateActiveButton(container, id);
-        updateCalculationAndDisplay();
     }
-    function handleUtilizationSelect(id, container) { // New handler
-        selectedUtilizationId = id;
-        updateActiveButton(container, id);
-        updateCalculationAndDisplay();
     }
     function updateActiveButton(container, activeId) {
-        const buttons = container.querySelectorAll('button');
-        buttons.forEach(button => {
-            button.classList.toggle('active', button.dataset.id === activeId);
-        });
     }
     // --- Calculation Logic ---
     function calculateSizes() {
-        const gpu = gpuData[selectedGpuId];
-        const model = modelData[selectedModelId];
-        const quantization = quantizationData[selectedQuantizationId];
-        const utilization = gpuMemoryUtilizationData[selectedUtilizationId]; // Get utilization info
-        const quantModifier = quantization.modifier;
-        // 1. Calculate Model Size (quantized)
-        const modelSize = Math.max(1, Math.ceil(model.baseModelSize * quantModifier));
-        // 2. Calculate Remaining Space
-        const remainingSpace = gpu.capacity - modelSize;
-        // 3. Calculate KV Cache Size based on utilization of *remaining* space
-        let kvCacheSize = 0;
-        if (remainingSpace > 0) {
-             // Use floor to ensure KV Cache doesn't exceed the allocated percentage
-            kvCacheSize = Math.floor(remainingSpace * utilization.factor);
-             kvCacheSize = Math.max(0, kvCacheSize); // Ensure it's not negative if factor is weirdly small
-        }
-        // No minimum of 1 for KV cache - it can be 0 if no space remains
-        // 4. Calculate Total Size
-        const totalSize = modelSize + kvCacheSize;
-        return {
-            gpuCapacity: gpu.capacity,
-            // promptSize removed
-            modelSize,
-            kvCacheSize,
-            totalSize,
-            fits: totalSize <= gpu.capacity && modelSize <= gpu.capacity // Also check if model itself fits
-        };
     }
     // --- Display Logic ---
     function updateCalculationAndDisplay() {
-        const sizes = calculateSizes();
-        // Update Text Details
-        // promptUsageSpan removed
-        modelUsageSpan.textContent = sizes.modelSize;
-        kvcacheUsageSpan.textContent = sizes.kvCacheSize;
-        kvcachePromptInfoSpan.textContent = sizes.kvCacheSize > 0 ? "(incl. prompts)" : ""; // Add info text
-        totalUsageSpan.textContent = sizes.totalSize;
-        gpuCapacityLabel.textContent = `${sizes.gpuCapacity} Blocks`;
-        // Update Status Message
-        if (sizes.modelSize > sizes.gpuCapacity) {
-             fitStatusSpan.textContent = "Model alone exceeds GPU capacity!";
-             fitStatusSpan.className = 'status-no-fit status-error'; // Add extra error class
-        } else if (sizes.fits) {
-            fitStatusSpan.textContent = "Fits!";
-            fitStatusSpan.className = 'status-fits';
-        } else {
-            fitStatusSpan.textContent = "Does Not Fit (Model + KV Cache)!";
-            fitStatusSpan.className = 'status-no-fit';
-        }
-        // Update visualization border based on overall fit status
-         visualizationArea.style.borderColor = sizes.fits ? 'var(--border-glow-color)' : 'var(--error-color)';
-        // Update Visual Bars
-        updateVisualBars(sizes);
     }
     function updateVisualBars(sizes) {
-        const { modelSize, kvCacheSize, gpuCapacity } = sizes;
-        // Calculate percentages relative to GPU capacity
-        const modelPercent = (modelSize / gpuCapacity) * 100;
-        const kvCachePercent = (kvCacheSize / gpuCapacity) * 100;
-        // Calculate bottom offsets for stacking (Model is now at the bottom)
-        const kvCacheBottomPercent = modelPercent;
-        // Apply styles - Cap percentages and handle potential overflow
-        modelBar.style.height = `${Math.min(100, modelPercent)}%`;
-        modelBar.style.bottom = `0%`;
-        kvcacheBar.style.height = `${Math.min(100 - modelPercent, kvCachePercent)}%`; // Height is capped by remaining space
-        kvcacheBar.style.bottom = `${Math.min(100, modelPercent)}%`; // Starts above the model bar
-         // Update data-label attributes
-         modelBar.dataset.label = `Model (${modelSize})`;
-         // Clarify KV cache label
-         kvcacheBar.dataset.label = `KV Cache (${kvCacheSize}) ${sizes.kvCacheSize > 0 ? '[:: will contains your batched Prompts]' : ''}`;
     }
     // --- Start the app ---
     initializeControls();
-}); // End DOMContentLoaded
-	 </script>
-<style>
-/* --- Keep all existing styles from the previous version --- */
-:root {
-    --background-color: #1a0a2d; /* Deep purple/blue */
-    --primary-color: #ff00ff;    /* Magenta/Pink */
-    --secondary-color: #00ffff;  /* Cyan */
-    --accent-color: #f8f8f8;     /* Bright White/Off-white */
-    --border-glow-color: #7f00ff; /* Purple Glow */
-    --prompt-color: #00ff00;     /* Bright Green */
-    --model-color: var(--secondary-color); /* Cyan */
-    --kvcache-color: #ffff00;   /* Yellow */
-    --gpu-area-bg: #0a0514;      /* Very dark for GPU viz */
-    --control-bg: rgba(58, 26, 90, 0.5); /* Darker purple for controls */
-    --error-color: #ff4136;      /* Red for errors/no fit */
-    --success-color: #39cccc;    /* Teal/Cyan for success/fit */
-    --glow-primary: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 15px var(--primary-color);
-    --glow-secondary: 0 0 5px var(--secondary-color), 0 0 10px var(--secondary-color), 0 0 15px var(--secondary-color);
-    --glow-border: 0 0 8px var(--border-glow-color), 0 0 15px var(--border-glow-color);
-    --text-glow: 0 0 3px var(--accent-color), 0 0 5px var(--primary-color);
-}
-body {
-    background-color: var(--background-color);
-    color: var(--accent-color);
-    font-family: 'Orbitron', sans-serif;
-    margin: 0;
-    padding: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
-    min-height: 100vh;
-       background-image:
         linear-gradient(rgba(26, 10, 45, 0.9), rgba(26, 10, 45, 0.9)),
         /* Grid overlay */
         linear-gradient(var(--border-glow-color) 1px, transparent 1px),
         linear-gradient(90deg, var(--border-glow-color) 1px, transparent 1px);
-    background-size: 100% 100%, 40px 40px, 40px 40px; /* Adjust grid size */
-    background-position: 0 0, -1px -1px, -1px -1px; /* Align grid */
-}
-#configurator-container {
-    background-color: rgba(10, 5, 20, 0.85);
-    border: 2px solid var(--border-glow-color);
-    box-shadow: var(--glow-border);
-    padding: 25px;
-    border-radius: 10px;
-    width: 95%;
-    max-width: 1200px; /* Wider layout */
-    text-align: center;
-}
-header h1 {
-    color: var(--primary-color);
-    text-shadow: var(--text-glow);
-    margin-bottom: 5px;
-}
-header p {
-    color: var(--secondary-color);
-    margin-bottom: 25px;
-}
-#main-layout {
-    display: flex;
-    justify-content: space-between;
-    gap: 25px; /* Space between columns */
-    text-align: left;
-}
-/* Column Styling */
-#gpu-visualization-column {
-    flex: 2; /* Takes more space */
-    display: flex;
-    flex-direction: column;
-}
-#spacer-column {
-    flex: 0.1; /* Thin spacer */
-}
-#controls-column {
-    flex: 1; /* Takes less space */
-    display: flex;
-    flex-direction: column;
-    gap: 20px; /* Space between control groups */
-}
-/* Left Column: Visualization */
-#gpu-visualization-column h2, #controls-column h3 {
-    color: var(--secondary-color);
-    text-shadow: 0 0 5px var(--secondary-color);
-    margin-top: 0;
-    margin-bottom: 15px;
-    border-bottom: 1px solid var(--secondary-color);
-    padding-bottom: 5px;
-    text-align: center;
-}
-#gpu-visualization-area {
-    flex-grow: 1;
-    background-color: var(--gpu-area-bg);
-    border: 2px solid var(--border-glow-color);
-    border-radius: 8px;
-    position: relative; /* For absolute positioning of bars and grid */
-    min-height: 400px; /* Ensure enough height */
-    overflow: hidden; /* Hide overflow */
-    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
-}
-#gpu-grid-overlay {
-    position: absolute;
-    top: 0; left: 0; right: 0; bottom: 0;
-    background-image:
-        linear-gradient(rgba(127, 0, 255, 0.3) 1px, transparent 1px), /* Fainter grid lines */
         linear-gradient(90deg, rgba(127, 0, 255, 0.3) 1px, transparent 1px);
-    background-size: 10% 10%; /* 10x10 grid visually */
-    pointer-events: none; /* Allow clicks through */
-    z-index: 1;
-}
-#gpu-capacity-indicator {
-    position: absolute;
-    top: 5px;
-    right: 10px;
-    color: var(--accent-color);
-    background: rgba(0,0,0,0.5);
-    padding: 3px 8px;
-    border-radius: 4px;
-    font-size: 0.8em;
-    z-index: 3; /* Above bars */
-}
-.usage-bar {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 0; /* Initial height */
-    transition: height 0.5s ease-out, bottom 0.5s ease-out; /* Animate changes */
-    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
-    z-index: 2; /* Below capacity indicator */
-    display: flex;
-    align-items: flex-start; /* Label at the top */
-    justify-content: center;
-    overflow: hidden; /* Prevent label overflow */
-}
-.usage-bar::before { /* Add label inside the bar */
-    content: attr(data-label);
-    position: absolute;
-    top: 5px; /* Position label near the top */
-    left: 10px;
-    color: #000; /* Black label for contrast */
-    font-size: 0.9em;
-    font-weight: bold;
-    text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);
-    opacity: 0; /* Initially hidden */
-    transition: opacity 0.3s ease-in 0.3s; /* Fade in after resize */
-}
-.usage-bar[style*="height: 0"]::before {
-     opacity: 0 !important; /* Keep hidden if height is 0 */
-}
-.usage-bar:not([style*="height: 0"])::before {
-     opacity: 1; /* Show if height is not 0 */
-}
-/*#prompt-bar { background-color: var(--prompt-color); }*/
-#model-bar { background-color: var(--model-color); }
-#kvcache-bar { background-color: var(--kvcache-color); }
-#usage-details {
-    margin-top: 15px;
-    padding: 10px;
-    background-color: var(--control-bg);
-    border: 1px dashed var(--secondary-color);
-    border-radius: 5px;
-    font-size: 0.9em;
-}
-#usage-details p { margin: 4px 0; }
-#usage-details span { font-weight: bold; color: var(--primary-color); }
-#usage-details .total-usage span { color: var(--accent-color); }
-/* Right Column: Controls */
-.control-group {
-    background-color: var(--control-bg);
-    border: 1px solid var(--primary-color);
-    border-radius: 6px;
-    padding: 15px;
-}
-.control-group h3 {
-    border-bottom: none; /* Remove border from h3 inside group */
-    margin-bottom: 10px;
-    color: var(--primary-color);
-}
-.control-group button {
-    display: block; /* Stack buttons vertically */
-    width: 100%;
-    background-color: var(--background-color);
-    color: var(--accent-color);
-    border: 1px solid var(--secondary-color);
-    padding: 10px 15px;
-    border-radius: 4px;
-    font-family: 'Orbitron', sans-serif;
-    cursor: pointer;
-    margin-bottom: 8px;
-    transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
-    text-align: center;
-}
-.control-group button:last-child { margin-bottom: 0; }
-.control-group button:hover {
-    background-color: var(--secondary-color);
-    color: var(--background-color);
-    border-color: var(--secondary-color);
-    box-shadow: var(--glow-secondary);
-}
-.control-group button.active {
-    background-color: var(--primary-color);
-    color: var(--background-color);
-    border-color: var(--primary-color);
-    box-shadow: var(--glow-primary);
-    font-weight: bold;
-}
-/* Status Message */
-#status-message {
-    margin-top: auto; /* Push to bottom */
-    padding: 15px;
-    border: 1px dashed var(--border-glow-color);
-    border-radius: 5px;
-    background-color: rgba(0,0,0, 0.3);
-    text-align: center;
-}
-#status-message p { margin: 0; }
-#status-message span { font-weight: bold; }
-#status-message .status-fits { color: var(--success-color); }
-#status-message .status-no-fit { color: var(--error-color); }
-#status-message .status-error { color: var(--error-color); font-weight: bold;}
-footer {
-    margin-top: 30px;
-    color: var(--secondary-color);
-    font-size: 0.8em;
-    opacity: 0.7;
-    text-align: center;
-    width: 100%;
-}
-/* --- Remove or Comment Out --- */
-/* #prompt-bar { background-color: var(--prompt-color); } */
-/* --- Add or Modify --- */
-#usage-details #kvcache-prompt-info {
-    font-size: 0.85em;
-    color: var(--secondary-color);
-    opacity: 0.8;
-    margin-left: 5px;
-}
-/* Adjust grid lines maybe? */
-#gpu-grid-overlay {
-    background-image:
-        linear-gradient(rgba(127, 0, 255, 0.2) 1px, transparent 1px), /* Make grid lines fainter */
         linear-gradient(90deg, rgba(127, 0, 255, 0.2) 1px, transparent 1px);
-    background-size: 10% 10%;
-    /* ... keep rest */
-}
-/* Ensure label contrast is okay on yellow */
-#kvcache-bar::before {
-     color: #333; /* Darker gray/black for yellow background */
-     text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
-}
-/* Make sure control group spacing is okay */
-#controls-column {
-    gap: 15px; /* Slightly reduce gap if needed */
-}
-</style>
 </head>
 <body>
-    <div id="configurator-container">
-        <header>
-            <h1>GPU Memory Configurator</h1>
-            <p>Select GPU, Model, Quantization & Utilization to estimate VRAM usage</p>
-        </header>
-        <div id="main-layout">
-            <!-- Left Column: Visualization -->
-            <div id="gpu-visualization-column">
-                <h2>GPU Usage</h2>
-                <div id="gpu-visualization-area">
-                    <div id="gpu-capacity-indicator">
-                        <span id="gpu-capacity-label">80 Blocks</span>
-                    </div>
-                    <!-- Removed Prompt Bar -->
-                    <div id="model-bar" class="usage-bar" data-label="Model"></div>
-                    <div id="kvcache-bar" class="usage-bar" data-label="KV Cache"></div>
-                    <div id="gpu-grid-overlay"></div>
-                </div>
-                 <div id="usage-details">
-                     <!-- Removed Prompt Usage Line -->
-                     <p>Model: <span id="model-usage">0</span> Blocks</p>
-                     <p>KV Cache: <span id="kvcache-usage">0</span> Blocks <span id="kvcache-prompt-info"></span></p>
-                     <p class="total-usage">Total: <span id="total-usage">0</span> Blocks</p>
-                 </div>
-            </div>
-            <!-- Middle Column: Spacer -->
-            <div id="spacer-column"></div>
-            <!-- Right Column: Controls -->
-            <div id="controls-column">
-                <div class="control-group" id="gpu-selector">
-                    <h3>GPU</h3>
-                    <!-- Buttons will be generated by JS -->
-                </div>
-                <div class="control-group" id="model-selector">
-                    <h3>Model</h3>
-                    <!-- Buttons will be generated by JS -->
-                </div>
-                <div class="control-group" id="quantization-selector">
-                    <h3>Quantization</h3>
-                    <!-- Buttons will be generated by JS -->
-                </div>
-                <!-- New Utilization Selector -->
-                <div class="control-group" id="utilization-selector">
-                    <h3>KV Cache Util</h3>
-                    <!-- Buttons will be generated by JS -->
-                </div>
-                 <div id="status-message">
-                     <p>Status: <span id="fit-status">-</span></p>
-                 </div>
-            </div>
         </div>
-        <footer>
-            Synthwave VRAM Estimator
-        </footer>
     </div>
-    <script src="script.js"></script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta author="fredmo">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>GPU Memory Configurator</title>
+  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
+  <script>
+  document.addEventListener('DOMContentLoaded', () => {
     // --- Data Definitions ---
+    const gpuData = {
+      'L4': { name: 'L4', capacity: 24 },
+      'A100-40': { name: 'A100 40GB', capacity: 40 },
+      'A100-80': { name: 'A100 80GB', capacity: 80 },
+      'H100': { name: 'H100 80GB', capacity: 80 }
     };
+    const modelData = {
+      'gemma-1b': { name: 'Gemma 3 1B', baseModelSize: 3 },
+      'gemma-4b': { name: 'Gemma 3 4B', baseModelSize: 8 },
+      'gemma-12b': { name: 'Gemma 3 12B', baseModelSize: 20 },
+      'gemma-27b': { name: 'Gemma 3 27B', baseModelSize: 45 }
     };
+    const quantizationData = {
+      'fp32': { name: 'FP32', modifier: 1.0 },
+      'bf16': { name: 'BF16', modifier: 0.5 },
+      'int4': { name: 'INT4', modifier: 0.25 }
     };
     const gpuMemoryUtilizationData = {
+      'util-0.5': { name: '50% KV Util', factor: 0.5 },
+      'util-0.7': { name: '70% KV Util', factor: 0.7 },
+      'util-0.9': { name: '90% KV Util', factor: 0.9 }
     };
     // --- State Variables ---
+    let selectedGpuId = 'A100-80';
     let selectedModelId = 'gemma-1b';
     let selectedQuantizationId = 'fp32';
+    let selectedUtilizationId = 'util-0.7'; // Default to 70%
     // --- DOM References ---
     const gpuSelectorDiv = document.getElementById('gpu-selector');
     const modelSelectorDiv = document.getElementById('model-selector');
     const quantizationSelectorDiv = document.getElementById('quantization-selector');
+    const utilizationSelectorDiv = document.getElementById('utilization-selector');
     const gpuCapacityLabel = document.getElementById('gpu-capacity-label');
     const visualizationArea = document.getElementById('gpu-visualization-area');
     const modelBar = document.getElementById('model-bar');
     const kvcacheBar = document.getElementById('kvcache-bar');
     const modelUsageSpan = document.getElementById('model-usage');
     const kvcacheUsageSpan = document.getElementById('kvcache-usage');
+    const kvcachePromptInfoSpan = document.getElementById('kvcache-prompt-info');
     const totalUsageSpan = document.getElementById('total-usage');
     const fitStatusSpan = document.getElementById('fit-status');
     // --- Initialization ---
     function initializeControls() {
+      createButtons(gpuData, gpuSelectorDiv, handleGpuSelect, selectedGpuId);
+      createButtons(modelData, modelSelectorDiv, handleModelSelect, selectedModelId);
+      createButtons(quantizationData, quantizationSelectorDiv, handleQuantizationSelect, selectedQuantizationId);
+      createButtons(gpuMemoryUtilizationData, utilizationSelectorDiv, handleUtilizationSelect, selectedUtilizationId);
+      updateCalculationAndDisplay(); // Initial calculation
     }
     function createButtons(data, container, clickHandler, activeId) {
+      const existingButtons = container.querySelectorAll('button');
+      existingButtons.forEach(btn => btn.remove());
+      Object.keys(data).forEach(id => {
+        const item = data[id];
+        const button = document.createElement('button');
+        button.textContent = item.name;
+        button.dataset.id = id;
+        button.addEventListener('click', () => clickHandler(id, container));
+        if (id === activeId) {
+          button.classList.add('active');
+        }
+        container.appendChild(button);
+      });
     }
     // --- Event Handlers ---
     function handleGpuSelect(id, container) {
+      selectedGpuId = id;
+      updateActiveButton(container, id);
+      updateCalculationAndDisplay();
     }
     function handleModelSelect(id, container) {
+      selectedModelId = id;
+      updateActiveButton(container, id);
+      updateCalculationAndDisplay();
     }
     function handleQuantizationSelect(id, container) {
+      selectedQuantizationId = id;
+      updateActiveButton(container, id);
+      updateCalculationAndDisplay();
     }
+    function handleUtilizationSelect(id, container) {
+      selectedUtilizationId = id;
+      updateActiveButton(container, id);
+      updateCalculationAndDisplay();
     }
     function updateActiveButton(container, activeId) {
+      const buttons = container.querySelectorAll('button');
+      buttons.forEach(button => {
+        button.classList.toggle('active', button.dataset.id === activeId);
+      });
     }
     // --- Calculation Logic ---
     function calculateSizes() {
+      const gpu = gpuData[selectedGpuId];
+      const model = modelData[selectedModelId];
+      const quantization = quantizationData[selectedQuantizationId];
+      const utilization = gpuMemoryUtilizationData[selectedUtilizationId];
+      const quantModifier = quantization.modifier;
+      const modelSize = Math.max(1, Math.ceil(model.baseModelSize * quantModifier));
+      const remainingSpace = gpu.capacity - modelSize;
+      let kvCacheSize = 0;
+      if (remainingSpace > 0) {
+        kvCacheSize = Math.floor(remainingSpace * utilization.factor);
+        kvCacheSize = Math.max(0, kvCacheSize);
+      }
+      const totalSize = modelSize + kvCacheSize;
+      return {
+        gpuCapacity: gpu.capacity,
+        modelSize,
+        kvCacheSize,
+        totalSize,
+        fits: totalSize <= gpu.capacity && modelSize <= gpu.capacity
+      };
     }
     // --- Display Logic ---
     function updateCalculationAndDisplay() {
+      const sizes = calculateSizes();
+      modelUsageSpan.textContent = sizes.modelSize;
+      kvcacheUsageSpan.textContent = sizes.kvCacheSize;
+      kvcachePromptInfoSpan.textContent = sizes.kvCacheSize > 0 ? "(incl. prompts)" : "";
+      totalUsageSpan.textContent = sizes.totalSize;
+      gpuCapacityLabel.textContent = `${sizes.gpuCapacity} Blocks`;
+      if (sizes.modelSize > sizes.gpuCapacity) {
+        fitStatusSpan.textContent = "Model alone exceeds GPU capacity!";
+        fitStatusSpan.className = 'status-no-fit status-error';
+      } else if (sizes.fits) {
+          if(sizes.kvCacheSize === 0 ) {
+              fitStatusSpan.textContent = "You can't send prompts you don't have KV cache available when KV cache size is 0";
+              fitStatusSpan.className = 'status-no-fit status-error';
+          }
+        else{
+              fitStatusSpan.textContent = "Fits!";
+              fitStatusSpan.className = 'status-fits';
+          }
+      } else {
+        fitStatusSpan.textContent = "Does Not Fit (Model + KV Cache)!";
+        fitStatusSpan.className = 'status-no-fit';
+      }
+      visualizationArea.style.borderColor = sizes.fits ? 'var(--border-glow-color)' : 'var(--error-color)';
+      updateVisualBars(sizes);
     }
     function updateVisualBars(sizes) {
+      const { modelSize, kvCacheSize, gpuCapacity } = sizes;
+      const modelPercent = (modelSize / gpuCapacity) * 100;
+      const kvCachePercent = (kvCacheSize / gpuCapacity) * 100;
+      const kvCacheBottomPercent = modelPercent;
+      modelBar.style.height = `${Math.min(100, modelPercent)}%`;
+      modelBar.style.bottom = `0%`;
+      kvcacheBar.style.height = `${Math.min(100 - modelPercent, kvCachePercent)}%`;
+      kvcacheBar.style.bottom = `${Math.min(100, modelPercent)}%`;
+      modelBar.dataset.label = `Model ($)`;
+      kvcacheBar.dataset.label = `KV Cache ($) ${sizes.kvCacheSize > 0 ? '[+Prompts]' : ''}`;
     }
     // --- Start the app ---
     initializeControls();
+  }); // End DOMContentLoaded
+  </script>
+  <style>
+    /* --- Keep all existing styles from the previous version --- */
+    :root {
+      --background-color: #1a0a2d;
+      /* Deep purple/blue */
+      --primary-color: #ff00ff;
+      /* Magenta/Pink */
+      --secondary-color: #00ffff;
+      /* Cyan */
+      --accent-color: #f8f8f8;
+      /* Bright White/Off-white */
+      --border-glow-color: #7f00ff;
+      /* Purple Glow */
+      --prompt-color: #00ff00;
+      /* Bright Green */
+      --model-color: var(--secondary-color);
+      /* Cyan */
+      --kvcache-color: #ffff00;
+      /* Yellow */
+      --gpu-area-bg: #0a0514;
+      /* Very dark for GPU viz */
+      --control-bg: rgba(58, 26, 90, 0.5);
+      /* Darker purple for controls */
+      --error-color: #ff4136;
+      /* Red for errors/no fit */
+      --success-color: #39cccc;
+      /* Teal/Cyan for success/fit */
+      --glow-primary: 0 0 5px var(--primary-color), 0 0 10px var(--primary-color), 0 0 15px var(--primary-color);
+      --glow-secondary: 0 0 5px var(--secondary-color), 0 0 10px var(--secondary-color), 0 0 15px var(--secondary-color);
+      --glow-border: 0 0 8px var(--border-glow-color), 0 0 15px var(--border-glow-color);
+      --text-glow: 0 0 3px var(--accent-color), 0 0 5px var(--primary-color);
+    }
+    body {
+      background-color: var(--background-color);
+      color: var(--accent-color);
+      font-family: 'Orbitron', sans-serif;
+      margin: 0;
+      padding: 20px;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+      min-height: 100vh;
+      background-image:
         linear-gradient(rgba(26, 10, 45, 0.9), rgba(26, 10, 45, 0.9)),
         /* Grid overlay */
         linear-gradient(var(--border-glow-color) 1px, transparent 1px),
         linear-gradient(90deg, var(--border-glow-color) 1px, transparent 1px);
+      background-size: 100% 100%, 40px 40px, 40px 40px;
+      /* Adjust grid size */
+      background-position: 0 0, -1px -1px, -1px -1px;
+      /* Align grid */
+    }
+    #configurator-container {
+      background-color: rgba(10, 5, 20, 0.85);
+      border: 2px solid var(--border-glow-color);
+      box-shadow: var(--glow-border);
+      padding: 25px;
+      border-radius: 10px;
+      width: 95%;
+      max-width: 1200px;
+      /* Wider layout */
+      text-align: center;
+    }
+    header h1 {
+      color: var(--primary-color);
+      text-shadow: var(--text-glow);
+      margin-bottom: 5px;
+    }
+    header p {
+      color: var(--secondary-color);
+      margin-bottom: 25px;
+    }
+    #main-layout {
+      display: flex;
+      justify-content: space-between;
+      gap: 25px;
+      /* Space between columns */
+      text-align: left;
+    }
+    /* Column Styling */
+    #gpu-visualization-column {
+      flex: 2;
+      /* Takes more space */
+      display: flex;
+      flex-direction: column;
+    }
+    #spacer-column {
+      flex: 0.1;
+      /* Thin spacer */
+    }
+    #controls-column {
+      flex: 1;
+      /* Takes less space */
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+      /* Space between control groups */
+    }
+    /* Left Column: Visualization */
+    #gpu-visualization-column h2,
+    #controls-column h3 {
+      color: var(--secondary-color);
+      text-shadow: 0 0 5px var(--secondary-color);
+      margin-top: 0;
+      margin-bottom: 15px;
+      border-bottom: 1px solid var(--secondary-color);
+      padding-bottom: 5px;
+      text-align: center;
+    }
+    #gpu-visualization-area {
+      flex-grow: 1;
+      background-color: var(--gpu-area-bg);
+      border: 2px solid var(--border-glow-color);
+      border-radius: 8px;
+      position: relative;
+      /* For absolute positioning of bars and grid */
+      min-height: 400px;
+      /* Ensure enough height */
+      overflow: hidden;
+      /* Hide overflow */
+      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
+    }
+    #gpu-grid-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-image:
+        linear-gradient(rgba(127, 0, 255, 0.3) 1px, transparent 1px),
+        /* Fainter grid lines */
         linear-gradient(90deg, rgba(127, 0, 255, 0.3) 1px, transparent 1px);
+      background-size: 10% 10%;
+      /* 10x10 grid visually */
+      pointer-events: none;
+      /* Allow clicks through */
+      z-index: 1;
+    }
+    #gpu-capacity-indicator {
+      position: absolute;
+      top: 5px;
+      right: 10px;
+      color: var(--accent-color);
+      background: rgba(0, 0, 0, 0.5);
+      padding: 3px 8px;
+      border-radius: 4px;
+      font-size: 0.8em;
+      z-index: 3;
+      /* Above bars */
+    }
+    .usage-bar {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 0;
+      /* Initial height */
+      transition: height 0.5s ease-out, bottom 0.5s ease-out;
+      /* Animate changes */
+      box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
+      z-index: 2;
+      /* Below capacity indicator */
+      display: flex;
+      align-items: flex-start;
+      /* Label at the top */
+      justify-content: center;
+      overflow: hidden;
+      /* Prevent label overflow */
+    }
+    .usage-bar::before {
+      /* Add label inside the bar */
+      content: attr(data-label);
+      position: absolute;
+      top: 5px;
+      /* Position label near the top */
+      left: 10px;
+      color: #000;
+      /* Black label for contrast */
+      font-size: 0.9em;
+      font-weight: bold;
+      text-shadow: 0 0 2px rgba(255, 255, 255, 0.7);
+      opacity: 0;
+      /* Initially hidden */
+      transition: opacity 0.3s ease-in 0.3s;
+      /* Fade in after resize */
+    }
+    .usage-bar[style*="height: 0"]::before {
+      opacity: 0 !important;
+      /* Keep hidden if height is 0 */
+    }
+    .usage-bar:not([style*="height: 0"])::before {
+      opacity: 1;
+      /* Show if height is not 0 */
+    }
+    /*#prompt-bar { background-color: var(--prompt-color); }*/
+    #model-bar {
+      background-color: var(--model-color);
+    }
+    #kvcache-bar {
+      background-color: var(--kvcache-color);
+    }
+    #usage-details {
+      margin-top: 15px;
+      padding: 10px;
+      background-color: var(--control-bg);
+      border: 1px dashed var(--secondary-color);
+      border-radius: 5px;
+      font-size: 0.9em;
+    }
+    #usage-details p {
+      margin: 4px 0;
+    }
+    #usage-details span {
+      font-weight: bold;
+      color: var(--primary-color);
+    }
+    #usage-details .total-usage span {
+      color: var(--accent-color);
+    }
+    /* Right Column: Controls */
+    .control-group {
+      background-color: var(--control-bg);
+      border: 1px solid var(--primary-color);
+      border-radius: 6px;
+      padding: 15px;
+    }
+    .control-group h3 {
+      border-bottom: none;
+      /* Remove border from h3 inside group */
+      margin-bottom: 10px;
+      color: var(--primary-color);
+    }
+    .control-group button {
+      display: block;
+      /* Stack buttons vertically */
+      width: 100%;
+      background-color: var(--background-color);
+      color: var(--accent-color);
+      border: 1px solid var(--secondary-color);
+      padding: 10px 15px;
+      border-radius: 4px;
+      font-family: 'Orbitron', sans-serif;
+      cursor: pointer;
+      margin-bottom: 8px;
+      transition: background-color 0.3s, box-shadow 0.3s, border-color 0.3s;
+      text-align: center;
+    }
+    .control-group button:last-child {
+      margin-bottom: 0;
+    }
+    .control-group button:hover {
+      background-color: var(--secondary-color);
+      color: var(--background-color);
+      border-color: var(--secondary-color);
+      box-shadow: var(--glow-secondary);
+    }
+    .control-group button.active {
+      background-color: var(--primary-color);
+      color: var(--background-color);
+      border-color: var(--primary-color);
+      box-shadow: var(--glow-primary);
+      font-weight: bold;
+    }
+    /* Status Message */
+    #status-message {
+      margin-top: auto;
+      /* Push to bottom */
+      padding: 15px;
+      border: 1px dashed var(--border-glow-color);
+      border-radius: 5px;
+      background-color: rgba(0, 0, 0, 0.3);
+      text-align: center;
+    }
+    #status-message p {
+      margin: 0;
+    }
+    #status-message span {
+      font-weight: bold;
+    }
+    #status-message .status-fits {
+      color: var(--success-color);
+    }
+    #status-message .status-no-fit {
+      color: var(--error-color);
+    }
+    /* Add this for error styling */
+    #status-message .status-error {
+        color: var(--error-color);
+        font-weight: bold;
+    }
+    footer {
+      margin-top: 30px;
+      color: var(--secondary-color);
+      font-size: 0.8em;
+      opacity: 0.7;
+      text-align: center;
+      width: 100%;
+    }
+    /* --- Remove or Comment Out --- */
+    /* #prompt-bar { background-color: var(--prompt-color); } */
+    /* --- Add or Modify --- */
+    #usage-details #kvcache-prompt-info {
+      font-size: 0.85em;
+      color: var(--secondary-color);
+      opacity: 0.8;
+      margin-left: 5px;
+    }
+    /* Adjust grid lines maybe? */
+    #gpu-grid-overlay {
+      background-image:
+        linear-gradient(rgba(127, 0, 255, 0.2) 1px, transparent 1px),
+        /* Make grid lines fainter */
         linear-gradient(90deg, rgba(127, 0, 255, 0.2) 1px, transparent 1px);
+      background-size: 10% 10%;
+      /* ... keep rest */
+    }
+    /* Ensure label contrast is okay on yellow */
+    #kvcache-bar::before {
+      color: #333;
+      /* Darker gray/black for yellow background */
+      text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
+    }
+    /* Make sure control group spacing is okay */
+    #controls-column {
+      gap: 15px;
+      /* Slightly reduce gap if needed */
+    }
+  </style>
 </head>
 <body>
+  <div id="configurator-container">
+    <header>
+      <h1>GPU Memory Configurator</h1>
+      <p>Select GPU, Model, Quantization & Utilization to estimate VRAM usage</p>
+    </header>
+    <div id="main-layout">
+      <!-- Left Column: Visualization -->
+      <div id="gpu-visualization-column">
+        <h2>GPU Usage</h2>
+        <div id="gpu-visualization-area">
+          <div id="gpu-capacity-indicator">
+            <span id="gpu-capacity-label">80 Blocks</span>
+          </div>
+          <div id="model-bar" class="usage-bar" data-label="Model"></div>
+          <div id="kvcache-bar" class="usage-bar" data-label="KV Cache"></div>
+          <div id="gpu-grid-overlay"></div>
+        </div>
+        <div id="usage-details">
+          <p>Model: <span id="model-usage">0</span> Blocks</p>
+          <p>KV Cache: <span id="kvcache-usage">0</span> Blocks <span id="kvcache-prompt-info"></span></p>
+          <p class="total-usage">Total: <span id="total-usage">0</span> Blocks</p>
+        </div>
+      </div>
+      <!-- Middle Column: Spacer -->
+      <div id="spacer-column"></div>
+      <!-- Right Column: Controls -->
+      <div id="controls-column">
+        <div class="control-group" id="gpu-selector">
+          <h3>GPU</h3>
+          <!-- Buttons will be generated by JS -->
+        </div>
+        <div class="control-group" id="model-selector">
+          <h3>Model</h3>
+          <!-- Buttons will be generated by JS -->
+        </div>
+        <div class="control-group" id="quantization-selector">
+          <h3>Quantization</h3>
+          <!-- Buttons will be generated by JS -->
+        </div>
+        <!-- New Utilization Selector -->
+        <div class="control-group" id="utilization-selector">
+          <h3>KV Cache Util</h3>
+          <!-- Buttons will be generated by JS -->
         </div>
+        <div id="status-message">
+          <p>Status: <span id="fit-status">-</span></p>
+        </div>
+      </div>
     </div>
+    <footer>
+      Synthwave VRAM Estimator
+    </footer>
+  </div>
+  <script src="script.js"></script>
 </body>
 </html>