Changed around line 1
+ document.addEventListener('DOMContentLoaded', () => {
+ const calculateBtn = document.getElementById('calculate-btn');
+
+ calculateBtn.addEventListener('click', calculatePerformance);
+
+ function calculatePerformance() {
+ const vocabSize = parseInt(document.getElementById('vocab-size').value);
+ const modelSize = parseFloat(document.getElementById('model-size').value);
+ const gpuMemory = parseInt(document.getElementById('gpu-memory').value);
+
+ // Basic performance estimation formulas
+ // These are simplified approximations
+ const baseTokensPerSecond = (gpuMemory * 1024) / (modelSize * 0.5);
+ const vocabFactor = Math.log2(vocabSize) / Math.log2(50000);
+ const estimatedTokensPerSecond = baseTokensPerSecond / vocabFactor;
+
+ const memoryUsagePercentage = (modelSize * 4) / gpuMemory * 100;
+ const efficiency = (estimatedTokensPerSecond * vocabFactor) / (modelSize * 1000);
+
+ // Update results
+ document.getElementById('tokens-per-second').textContent =
+ `${Math.round(estimatedTokensPerSecond)} tokens/second`;
+
+ document.getElementById('memory-usage').textContent =
+ `${memoryUsagePercentage.toFixed(1)}% of GPU memory utilized`;
+
+ document.getElementById('efficiency-rating').textContent =
+ `${efficiency.toFixed(2)} tokens/parameter/second`;
+
+ // Animate results
+ document.querySelectorAll('.result-card').forEach(card => {
+ card.style.animation = 'pulse 0.5s';
+ setTimeout(() => card.style.animation = '', 500);
+ });
+ }
+ });
+
+ // Add this to your CSS
+ document.head.appendChild(document.createElement('style')).textContent = `
+ @keyframes pulse {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.02); }
+ 100% { transform: scale(1); }
+ }
+ `;
