Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NVIDIA RTX 5080 Ti Emulator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> | |
| <style> | |
| @keyframes pulse { | |
| 0% { opacity: 0.6; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.6; } | |
| } | |
| @keyframes coreActivity { | |
| 0% { background-color: #00ff00; } | |
| 50% { background-color: #76ff03; } | |
| 100% { background-color: #00ff00; } | |
| } | |
| @keyframes tensorActivity { | |
| 0% { background-color: #ff4081; } | |
| 50% { background-color: #ff80ab; } | |
| 100% { background-color: #ff4081; } | |
| } | |
| @keyframes rtActivity { | |
| 0% { background-color: #40c4ff; } | |
| 50% { background-color: #80d8ff; } | |
| 100% { background-color: #40c4ff; } | |
| } | |
| .core-active { | |
| animation: coreActivity 0.5s infinite; | |
| } | |
| .tensor-active { | |
| animation: tensorActivity 0.3s infinite; | |
| } | |
| .rt-active { | |
| animation: rtActivity 0.4s infinite; | |
| } | |
| .status-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| .gpu-visualization { | |
| background: linear-gradient(135deg, #121212 0%, #1a1a1a 100%); | |
| border-radius: 12px; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); | |
| } | |
| .performance-meter { | |
| background: linear-gradient(to right, #00c853, #ffd600, #ff3d00); | |
| } | |
| .vram-bar { | |
| background: linear-gradient(to right, #5c6bc0, #3949ab); | |
| } | |
| .cooling-fan { | |
| transition: transform 0.1s linear; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="flex items-center justify-between mb-8"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-microchip text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold bg-gradient-to-r from-green-400 to-blue-500 bg-clip-text text-transparent"> | |
| NVIDIA RTX 5080 Ti Emulator | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="px-3 py-1 bg-gray-800 rounded-full text-sm font-medium flex items-center"> | |
| <span class="w-2 h-2 rounded-full bg-green-500 mr-2"></span> | |
| <span>EMULATION ACTIVE</span> | |
| </span> | |
| <button class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg font-medium transition"> | |
| <i class="fas fa-power-off mr-2"></i>Stop Emulation | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Dashboard --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8"> | |
| <!-- GPU Visualization --> | |
| <div class="gpu-visualization lg:col-span-2 p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-xl font-semibold">RTX 5080 Ti Core Simulation</h2> | |
| <div class="flex items-center"> | |
| <span class="text-sm mr-4">DLSS 4.0: <span class="font-bold text-green-400">ACTIVE</span></span> | |
| <span class="text-sm">Ray Tracing: <span class="font-bold text-blue-400">GEN4</span></span> | |
| </div> | |
| </div> | |
| <!-- Core Visualization --> | |
| <div class="grid grid-cols-12 gap-2 mb-6"> | |
| <!-- CUDA Cores --> | |
| <div class="col-span-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium">15,360 CUDA Cores</span> | |
| <span class="text-sm">Utilization: <span id="cuda-util">78</span>%</span> | |
| </div> | |
| <div class="grid grid-cols-16 gap-1"> | |
| <!-- This will be filled with JS --> | |
| </div> | |
| </div> | |
| <!-- RT Cores --> | |
| <div class="col-span-2"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium">RT Cores</span> | |
| <span class="text-sm"><span id="rt-util">65</span>%</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-1"> | |
| <!-- This will be filled with JS --> | |
| </div> | |
| </div> | |
| <!-- Tensor Cores --> | |
| <div class="col-span-2"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium">Tensor Cores</span> | |
| <span class="text-sm"><span id="tensor-util">82</span>%</span> | |
| </div> | |
| <div class="grid grid-cols-2 gap-1"> | |
| <!-- This will be filled with JS --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Cooling System --> | |
| <div class="flex items-center justify-between bg-gray-800 rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <div class="cooling-fan mr-4" id="fan1"> | |
| <i class="fas fa-fan text-blue-400 text-2xl"></i> | |
| </div> | |
| <div> | |
| <div class="flex items-center mb-1"> | |
| <span class="text-sm font-medium mr-2">GPU Temp:</span> | |
| <span class="text-green-400 font-medium" id="gpu-temp">64</span> | |
| <span class="text-gray-400 ml-1">°C</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-1.5"> | |
| <div class="bg-gradient-to-r from-green-400 to-yellow-500 h-1.5 rounded-full" style="width: 64%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-right"> | |
| <div class="text-sm font-medium mb-1">Power Draw</div> | |
| <div class="text-xl font-bold text-yellow-400" id="power-draw">320</div> | |
| <div class="text-xs text-gray-400">Watts</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Performance Stats --> | |
| <div class="bg-gray-800 rounded-lg p-6"> | |
| <h2 class="text-xl font-semibold mb-6">Performance Metrics</h2> | |
| <div class="space-y-5"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">FP32 Performance</span> | |
| <span class="text-sm font-bold text-green-400" id="fp32-perf">68.4</span> | |
| </div> | |
| <div class="performance-meter w-full h-2 rounded-full overflow-hidden"> | |
| <div class="h-full" style="width: 90%"></div> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1">TFLOPS (Estimated: 60-70 TFLOPS)</div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">VRAM Allocation</span> | |
| <span class="text-sm font-bold text-blue-400" id="vram-usage">18.2</span> | |
| </div> | |
| <div class="vram-bar w-full h-2 rounded-full overflow-hidden"> | |
| <div class="h-full" style="width: 76%"></div> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1">24GB GDDR7 (Using System RAM)</div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium">Memory Bandwidth</span> | |
| <span class="text-sm font-bold text-purple-400" id="mem-bandwidth">896</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-purple-400 to-pink-500 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <div class="text-xs text-gray-400 mt-1">320-bit interface @ 28Gbps</div> | |
| </div> | |
| <div class="pt-4 border-t border-gray-700"> | |
| <div class="text-sm font-medium mb-2">Current Features</div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-blue-500 mr-2"></div> | |
| <span class="text-sm">Gen 4 Ray Tracing</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-pink-500 mr-2"></div> | |
| <span class="text-sm">Gen 5 Tensor Cores</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm">DLSS 4.0 AI</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-4 h-4 rounded-full bg-yellow-500 mr-2"></div> | |
| <span class="text-sm">NVLink 4.0 Support</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Advanced Controls --> | |
| <div class="bg-gray-800 rounded-lg p-6 mb-8"> | |
| <h2 class="text-xl font-semibold mb-6">Emulation Controls</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="font-medium">CUDA Core Load</span> | |
| <span class="text-green-400 font-bold" id="cuda-slider-value">78%</span> | |
| </div> | |
| <input type="range" min="10" max="100" value="78" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer" id="cuda-slider"> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="font-medium">RT Core Load</span> | |
| <span class="text-blue-400 font-bold" id="rt-slider-value">65%</span> | |
| </div> | |
| <input type="range" min="10" max="100" value="65" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer" id="rt-slider"> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="font-medium">Tensor Core Load</span> | |
| <span class="text-pink-400 font-bold" id="tensor-slider-value">82%</span> | |
| </div> | |
| <input type="range" min="10" max="100" value="82" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer" id="tensor-slider"> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <span class="font-medium">VRAM Allocation</span> | |
| <span class="text-blue-300 font-bold" id="vram-slider-value">18.2GB</span> | |
| </div> | |
| <input type="range" min="1" max="24" step="0.1" value="18.2" class="w-full h-2 bg-gray-600 rounded-lg appearance-none cursor-pointer" id="vram-slider"> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex flex-wrap gap-3"> | |
| <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition flex items-center"> | |
| <i class="fas fa-rocket mr-2"></i> Boost Performance | |
| </button> | |
| <button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition flex items-center"> | |
| <i class="fas fa-brain mr-2"></i> Enable DLSS 4.0 | |
| </button> | |
| <button class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-lg font-medium transition flex items-center"> | |
| <i class="fas fa-project-diagram mr-2"></i> Enable NVLink | |
| </button> | |
| <button class="px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded-lg font-medium transition flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Advanced Settings | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Status Log --> | |
| <div class="bg-gray-800 rounded-lg p-6"> | |
| <h2 class="text-xl font-semibold mb-4">Emulation Log</h2> | |
| <div class="bg-gray-900 rounded-lg p-4 h-48 overflow-y-auto font-mono text-sm" id="emulation-log"> | |
| <div class="text-green-400">[SYSTEM] Initializing RTX 5080 Ti emulation...</div> | |
| <div class="text-green-400">[VRAM] Allocated 24GB GDDR7 from system RAM</div> | |
| <div class="text-blue-400">[CUDA] 15,360 cores online</div> | |
| <div class="text-pink-400">[TENSOR] Gen 5 tensor cores initialized</div> | |
| <div class="text-blue-300">[RT] Gen 4 ray tracing cores active</div> | |
| <div class="text-yellow-400">[PERF] Estimated FP32 performance: 68.4 TFLOPS</div> | |
| <div class="text-green-400">[DLSS] AI-based DLSS 4.0 ready</div> | |
| <div class="text-purple-400">[SYSTEM] Emulation fully operational</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize core visualization | |
| function initCoreVisualization() { | |
| // CUDA Cores | |
| const cudaContainer = document.querySelector('.col-span-8 .grid'); | |
| for (let i = 0; i < 128; i++) { | |
| const core = document.createElement('div'); | |
| core.className = 'w-2 h-2 rounded-sm bg-gray-700 hover:bg-green-500 transition cursor-pointer'; | |
| core.title = `CUDA Core ${i+1}`; | |
| core.dataset.type = 'cuda'; | |
| cudaContainer.appendChild(core); | |
| } | |
| // RT Cores | |
| const rtContainer = document.querySelector('.col-span-2 .grid'); | |
| for (let i = 0; i < 4; i++) { | |
| const core = document.createElement('div'); | |
| core.className = 'w-4 h-4 rounded-sm bg-gray-700 hover:bg-blue-400 transition cursor-pointer'; | |
| core.title = `RT Core ${i+1} (Gen 4)`; | |
| core.dataset.type = 'rt'; | |
| rtContainer.appendChild(core); | |
| } | |
| // Tensor Cores | |
| const tensorContainer = document.querySelector('.col-span-2 .grid'); | |
| for (let i = 0; i < 4; i++) { | |
| const core = document.createElement('div'); | |
| core.className = 'w-4 h-4 rounded-sm bg-gray-700 hover:bg-pink-500 transition cursor-pointer'; | |
| core.title = `Tensor Core ${i+1} (Gen 5)`; | |
| core.dataset.type = 'tensor'; | |
| tensorContainer.appendChild(core); | |
| } | |
| } | |
| // Update core activity based on utilization | |
| function updateCoreActivity() { | |
| const cudaUtil = parseInt(document.getElementById('cuda-util').textContent); | |
| const rtUtil = parseInt(document.getElementById('rt-util').textContent); | |
| const tensorUtil = parseInt(document.getElementById('tensor-util').textContent); | |
| // CUDA Cores | |
| const cudaCores = document.querySelectorAll('[data-type="cuda"]'); | |
| const activeCudaCores = Math.floor(cudaCores.length * (cudaUtil / 100)); | |
| cudaCores.forEach((core, index) => { | |
| if (index < activeCudaCores) { | |
| core.classList.add('core-active'); | |
| } else { | |
| core.classList.remove('core-active'); | |
| core.style.backgroundColor = '#374151'; | |
| } | |
| }); | |
| // RT Cores | |
| const rtCores = document.querySelectorAll('[data-type="rt"]'); | |
| const activeRtCores = Math.min(rtCores.length, Math.ceil(rtCores.length * (rtUtil / 100))); | |
| rtCores.forEach((core, index) => { | |
| if (index < activeRtCores) { | |
| core.classList.add('rt-active'); | |
| } else { | |
| core.classList.remove('rt-active'); | |
| core.style.backgroundColor = '#374151'; | |
| } | |
| }); | |
| // Tensor Cores | |
| const tensorCores = document.querySelectorAll('[data-type="tensor"]'); | |
| const activeTensorCores = Math.min(tensorCores.length, Math.ceil(tensorCores.length * (tensorUtil / 100))); | |
| tensorCores.forEach((core, index) => { | |
| if (index < activeTensorCores) { | |
| core.classList.add('tensor-active'); | |
| } else { | |
| core.classList.remove('tensor-active'); | |
| core.style.backgroundColor = '#374151'; | |
| } | |
| }); | |
| } | |
| // Update fan speed based on temperature | |
| function updateFanSpeed() { | |
| const temp = parseInt(document.getElementById('gpu-temp').textContent); | |
| const fanSpeed = Math.min(100, Math.max(0, (temp - 40) * 3)); | |
| const fan1 = document.getElementById('fan1'); | |
| fan1.style.transform = `rotate(${fanSpeed * 3.6}deg)`; | |
| } | |
| // Randomize metrics slightly for realism | |
| function randomizeMetrics() { | |
| // Current values | |
| let cudaUtil = parseInt(document.getElementById('cuda-util').textContent); | |
| let rtUtil = parseInt(document.getElementById('rt-util').textContent); | |
| let tensorUtil = parseInt(document.getElementById('tensor-util').textContent); | |
| let temp = parseInt(document.getElementById('gpu-temp').textContent); | |
| let power = parseInt(document.getElementById('power-draw').textContent); | |
| let fp32 = parseFloat(document.getElementById('fp32-perf').textContent); | |
| let vram = parseFloat(document.getElementById('vram-usage').textContent); | |
| let bandwidth = parseInt(document.getElementById('mem-bandwidth').textContent); | |
| // Add some random variation | |
| cudaUtil = Math.max(10, Math.min(100, cudaUtil + (Math.random() * 6 - 3))); | |
| rtUtil = Math.max(10, Math.min(100, rtUtil + (Math.random() * 6 - 3))); | |
| tensorUtil = Math.max(10, Math.min(100, tensorUtil + (Math.random() * 6 - 3))); | |
| temp = Math.max(30, Math.min(85, temp + (Math.random() * 4 - 2))); | |
| power = Math.max(200, Math.min(450, power + (Math.random() * 20 - 10))); | |
| fp32 = Math.max(50, Math.min(75, fp32 + (Math.random() * 1 - 0.5))); | |
| vram = Math.max(1, Math.min(24, vram + (Math.random() * 0.4 - 0.2))); | |
| bandwidth = Math.max(700, Math.min(950, bandwidth + (Math.random() * 20 - 10))); | |
| // Update displays | |
| document.getElementById('cuda-util').textContent = Math.round(cudaUtil); | |
| document.getElementById('rt-util').textContent = Math.round(rtUtil); | |
| document.getElementById('tensor-util').textContent = Math.round(tensorUtil); | |
| document.getElementById('gpu-temp').textContent = Math.round(temp); | |
| document.getElementById('power-draw').textContent = Math.round(power); | |
| document.getElementById('fp32-perf').textContent = fp32.toFixed(1); | |
| document.getElementById('vram-usage').textContent = vram.toFixed(1); | |
| document.getElementById('mem-bandwidth').textContent = Math.round(bandwidth); | |
| // Update visualizations | |
| updateCoreActivity(); | |
| updateFanSpeed(); | |
| // Update sliders to match | |
| document.getElementById('cuda-slider').value = Math.round(cudaUtil); | |
| document.getElementById('rt-slider').value = Math.round(rtUtil); | |
| document.getElementById('tensor-slider').value = Math.round(tensorUtil); | |
| document.getElementById('vram-slider').value = vram.toFixed(1); | |
| document.getElementById('cuda-slider-value').textContent = Math.round(cudaUtil) + '%'; | |
| document.getElementById('rt-slider-value').textContent = Math.round(rtUtil) + '%'; | |
| document.getElementById('tensor-slider-value').textContent = Math.round(tensorUtil) + '%'; | |
| document.getElementById('vram-slider-value').textContent = vram.toFixed(1) + 'GB'; | |
| // Add random log entries occasionally | |
| if (Math.random() > 0.7) { | |
| addRandomLogEntry(); | |
| } | |
| } | |
| // Add random log entries | |
| function addRandomLogEntry() { | |
| const logEntries = [ | |
| {text: "[PERF] Adjusting CUDA core allocation", color: "text-green-400"}, | |
| {text: "[RT] Processing ray tracing workload", color: "text-blue-400"}, | |
| {text: "[TENSOR] AI upscaling frame", color: "text-pink-400"}, | |
| {text: "[MEM] Transferring assets to VRAM", color: "text-blue-300"}, | |
| {text: "[DLSS] Analyzing frame with neural network", color: "text-yellow-400"}, | |
| {text: "[THERM] Adjusting fan curve", color: "text-orange-400"}, | |
| {text: "[SYSTEM] Emulation stable", color: "text-green-400"} | |
| ]; | |
| const entry = logEntries[Math.floor(Math.random() * logEntries.length)]; | |
| const logElement = document.createElement('div'); | |
| logElement.className = entry.color; | |
| logElement.textContent = entry.text; | |
| const logContainer = document.getElementById('emulation-log'); | |
| logContainer.appendChild(logElement); | |
| logContainer.scrollTop = logContainer.scrollHeight; | |
| } | |
| // Initialize sliders | |
| function initSliders() { | |
| document.getElementById('cuda-slider').addEventListener('input', function() { | |
| document.getElementById('cuda-util').textContent = this.value; | |
| document.getElementById('cuda-slider-value').textContent = this.value + '%'; | |
| updateCoreActivity(); | |
| }); | |
| document.getElementById('rt-slider').addEventListener('input', function() { | |
| document.getElementById('rt-util').textContent = this.value; | |
| document.getElementById('rt-slider-value').textContent = this.value + '%'; | |
| updateCoreActivity(); | |
| }); | |
| document.getElementById('tensor-slider').addEventListener('input', function() { | |
| document.getElementById('tensor-util').textContent = this.value; | |
| document.getElementById('tensor-slider-value').textContent = this.value + '%'; | |
| updateCoreActivity(); | |
| }); | |
| document.getElementById('vram-slider').addEventListener('input', function() { | |
| document.getElementById('vram-usage').textContent = this.value; | |
| document.getElementById('vram-slider-value').textContent = this.value + 'GB'; | |
| }); | |
| } | |
| // Initialize everything | |
| document.addEventListener('DOMContentLoaded', function() { | |
| initCoreVisualization(); | |
| initSliders(); | |
| updateCoreActivity(); | |
| updateFanSpeed(); | |
| // Start randomizing metrics periodically | |
| setInterval(randomizeMetrics, 1500); | |
| // Add some initial log entries | |
| setTimeout(() => { | |
| addRandomLogEntry(); | |
| setTimeout(() => { | |
| addRandomLogEntry(); | |
| setTimeout(() => { | |
| addRandomLogEntry(); | |
| }, 1000); | |
| }, 800); | |
| }, 500); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=PrinzPesia/rtx-5080-ti-emulator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |