Spaces:
Sleeping
Sleeping
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Space Fetch - System Performance Dashboard</title> | |
| <meta name="description" content="Check computer statistics of your Hugging Face Space"> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| <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=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="background-effects"> | |
| <div class="gradient-orb orb-1"></div> | |
| <div class="gradient-orb orb-2"></div> | |
| <div class="gradient-orb orb-3"></div> | |
| </div> | |
| <div class="container"> | |
| <header class="header"> | |
| <div class="logo"> | |
| <span class="logo-icon">🏆</span> | |
| <h1>Space Fetch</h1> | |
| </div> | |
| <p class="tagline">System Performance Dashboard</p> | |
| </header> | |
| <!-- System Info Section --> | |
| <section class="section" id="system-section"> | |
| <h2 class="section-title"> | |
| <span class="icon">💻</span> | |
| System Information | |
| </h2> | |
| <div class="cards-grid" id="system-info"> | |
| <div class="card skeleton"> | |
| <div class="skeleton-line"></div> | |
| <div class="skeleton-line short"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Hardware Section --> | |
| <section class="section" id="hardware-section"> | |
| <h2 class="section-title"> | |
| <span class="icon">🔧</span> | |
| Hardware Specifications | |
| </h2> | |
| <div class="hardware-grid" id="hardware-info"> | |
| <!-- CPU Card --> | |
| <div class="hardware-card" id="cpu-card"> | |
| <div class="hardware-icon">🖥️</div> | |
| <div class="hardware-content"> | |
| <h3>CPU</h3> | |
| <div class="hardware-value" id="cpu-name">Loading...</div> | |
| <div class="hardware-details" id="cpu-details"></div> | |
| </div> | |
| </div> | |
| <!-- Memory Card --> | |
| <div class="hardware-card" id="memory-card"> | |
| <div class="hardware-icon">🧠</div> | |
| <div class="hardware-content"> | |
| <h3>Memory</h3> | |
| <div class="hardware-value" id="memory-total">Loading...</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="memory-usage" style="width: 0%"></div> | |
| </div> | |
| <div class="hardware-details" id="memory-details"></div> | |
| </div> | |
| </div> | |
| <!-- Disk Card --> | |
| <div class="hardware-card" id="disk-card"> | |
| <div class="hardware-icon">💾</div> | |
| <div class="hardware-content"> | |
| <h3>Storage</h3> | |
| <div class="hardware-value" id="disk-total">Loading...</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="disk-usage" style="width: 0%"></div> | |
| </div> | |
| <div class="hardware-details" id="disk-details"></div> | |
| </div> | |
| </div> | |
| <!-- GPU Card --> | |
| <div class="hardware-card gpu-card" id="gpu-card"> | |
| <div class="hardware-icon">🎮</div> | |
| <div class="hardware-content"> | |
| <h3>GPU</h3> | |
| <div class="hardware-value" id="gpu-name">Detecting...</div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill gpu-fill" id="gpu-usage" style="width: 0%"></div> | |
| </div> | |
| <div class="hardware-details" id="gpu-details"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benchmarks Section --> | |
| <section class="section" id="benchmark-section"> | |
| <h2 class="section-title"> | |
| <span class="icon">⚡</span> | |
| Performance Benchmarks | |
| </h2> | |
| <div class="benchmark-controls"> | |
| <button class="btn btn-primary" id="run-all-btn" onclick="runAllBenchmarks()"> | |
| <span class="btn-icon">🚀</span> | |
| Run Full Benchmark | |
| </button> | |
| <button class="btn btn-secondary" id="export-btn" onclick="exportResults()"> | |
| <span class="btn-icon">📋</span> | |
| Export JSON | |
| </button> | |
| </div> | |
| <div class="benchmark-grid" id="benchmark-results"> | |
| <!-- CPU Benchmark --> | |
| <div class="benchmark-card" id="bench-cpu"> | |
| <div class="benchmark-header"> | |
| <span class="benchmark-icon">🖥️</span> | |
| <h3>CPU Performance</h3> | |
| <button class="btn-mini" onclick="runBenchmark('cpu')" id="run-cpu-btn">Run</button> | |
| </div> | |
| <div class="benchmark-content" id="cpu-bench-content"> | |
| <div class="benchmark-placeholder">Click "Run" to start CPU benchmark</div> | |
| </div> | |
| </div> | |
| <!-- Memory Benchmark --> | |
| <div class="benchmark-card" id="bench-memory"> | |
| <div class="benchmark-header"> | |
| <span class="benchmark-icon">🧠</span> | |
| <h3>Memory Performance</h3> | |
| <button class="btn-mini" onclick="runBenchmark('memory')" id="run-memory-btn">Run</button> | |
| </div> | |
| <div class="benchmark-content" id="memory-bench-content"> | |
| <div class="benchmark-placeholder">Click "Run" to start Memory benchmark</div> | |
| </div> | |
| </div> | |
| <!-- Disk Benchmark --> | |
| <div class="benchmark-card" id="bench-disk"> | |
| <div class="benchmark-header"> | |
| <span class="benchmark-icon">💾</span> | |
| <h3>Disk I/O Performance</h3> | |
| <button class="btn-mini" onclick="runBenchmark('disk')" id="run-disk-btn">Run</button> | |
| </div> | |
| <div class="benchmark-content" id="disk-bench-content"> | |
| <div class="benchmark-placeholder">Click "Run" to start Disk benchmark</div> | |
| </div> | |
| </div> | |
| <!-- GPU Benchmark --> | |
| <div class="benchmark-card gpu-bench" id="bench-gpu"> | |
| <div class="benchmark-header"> | |
| <span class="benchmark-icon">🎮</span> | |
| <h3>GPU Performance</h3> | |
| <button class="btn-mini" onclick="runBenchmark('gpu')" id="run-gpu-btn">Run</button> | |
| </div> | |
| <div class="benchmark-content" id="gpu-bench-content"> | |
| <div class="benchmark-placeholder">Click "Run" to start GPU benchmark</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Overall Score --> | |
| <div class="score-card" id="overall-score" style="display: none;"> | |
| <div class="score-title">Overall Performance Score</div> | |
| <div class="score-value" id="total-score">0</div> | |
| <div class="score-breakdown" id="score-breakdown"></div> | |
| </div> | |
| </section> | |
| <footer class="footer"> | |
| <p>Space Fetch v1.0.0 | Built for <a href="https://huggingface.co/spaces" target="_blank">Hugging Face Spaces</a></p> | |
| </footer> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> | |