| | import gradio as gr
|
| | import signal
|
| | import sys
|
| | import time
|
| | import threading
|
| | import atexit
|
| | from contextlib import contextmanager
|
| | from collections import deque
|
| | import psutil
|
| | import pynvml
|
| |
|
| |
|
| | try:
|
| | pynvml.nvmlInit()
|
| | nvml_initialized = True
|
| | except pynvml.NVMLError:
|
| | print("Warning: Could not initialize NVML. GPU stats will not be available.")
|
| | nvml_initialized = False
|
| |
|
| | class SystemStatsApp:
|
| | def __init__(self):
|
| | self.running = False
|
| | self.active_generators = []
|
| | self.setup_signal_handlers()
|
| |
|
| | def setup_signal_handlers(self):
|
| |
|
| | signal.signal(signal.SIGINT, self.shutdown_handler)
|
| | signal.signal(signal.SIGTERM, self.shutdown_handler)
|
| | if hasattr(signal, 'SIGBREAK'):
|
| | signal.signal(signal.SIGBREAK, self.shutdown_handler)
|
| |
|
| |
|
| | atexit.register(self.cleanup)
|
| |
|
| | def shutdown_handler(self, signum, frame):
|
| |
|
| | self.cleanup()
|
| | sys.exit(0)
|
| |
|
| | def cleanup(self):
|
| | if not self.running:
|
| | print("Cleaning up streaming connections...")
|
| | self.running = False
|
| |
|
| | time.sleep(1)
|
| |
|
| | def get_system_stats(self, first = False, last_disk_io = psutil.disk_io_counters() ):
|
| |
|
| |
|
| |
|
| | MAX_SSD_SPEED_MB_S = 100.0
|
| |
|
| | if first :
|
| | cpu_percent = psutil.cpu_percent(interval=.01)
|
| | else:
|
| | cpu_percent = psutil.cpu_percent(interval=1)
|
| | memory_info = psutil.virtual_memory()
|
| | ram_percent = memory_info.percent
|
| | ram_used_gb = memory_info.used / (1024**3)
|
| | ram_total_gb = memory_info.total / (1024**3)
|
| |
|
| |
|
| | current_disk_io = psutil.disk_io_counters()
|
| | read_mb_s = (current_disk_io.read_bytes - last_disk_io.read_bytes) / (1024**2)
|
| | write_mb_s = (current_disk_io.write_bytes - last_disk_io.write_bytes) / (1024**2)
|
| | total_disk_speed = read_mb_s + write_mb_s
|
| |
|
| |
|
| | last_disk_io = current_disk_io
|
| |
|
| |
|
| | ssd_bar_height = min(100.0, (total_disk_speed / MAX_SSD_SPEED_MB_S) * 100)
|
| |
|
| |
|
| | if nvml_initialized:
|
| | try:
|
| | handle = pynvml.nvmlDeviceGetHandleByIndex(0)
|
| | util = pynvml.nvmlDeviceGetUtilizationRates(handle)
|
| | gpu_percent = util.gpu
|
| | mem_info = pynvml.nvmlDeviceGetMemoryInfo(handle)
|
| | vram_percent = (mem_info.used / mem_info.total) * 100
|
| | vram_used_gb = mem_info.used / (1024**3)
|
| | vram_total_gb = mem_info.total / (1024**3)
|
| | except pynvml.NVMLError:
|
| |
|
| | gpu_percent, vram_percent, vram_used_gb, vram_total_gb = 0, 0, 0, 0
|
| | else:
|
| |
|
| | gpu_percent, vram_percent, vram_used_gb, vram_total_gb = 0, 0, 0, 0
|
| |
|
| | stats_html = f"""
|
| | <style>
|
| | .stats-container {{
|
| | display: flex;
|
| | justify-content: space-between;
|
| | align-items: flex-start;
|
| | padding: 0px 5px;
|
| | height: 60px;
|
| | width: 100%;
|
| | box-sizing: border-box;
|
| | }}
|
| |
|
| | .stats-block {{
|
| | width: calc(18% - 5px);
|
| | min-width: 100px;
|
| | text-align: center;
|
| | font-family: sans-serif;
|
| | }}
|
| |
|
| | .stats-bar-background {{
|
| | width: 90%;
|
| | height: 30px;
|
| | background-color: #e9ecef;
|
| | border: 1px solid #dee2e6;
|
| | border-radius: 8px;
|
| | overflow: hidden;
|
| | position: relative;
|
| | margin: 0 auto;
|
| | }}
|
| |
|
| | .stats-bar-fill {{
|
| | position: absolute;
|
| | bottom: 0;
|
| | left: 0;
|
| | height: 100%;
|
| | background-color: #0d6efd;
|
| | }}
|
| |
|
| | .stats-title {{
|
| | margin-top: 5px;
|
| | font-size: 11px;
|
| | font-weight: bold;
|
| | }}
|
| |
|
| | .stats-detail {{
|
| | font-size: 10px;
|
| | margin-top: -2px;
|
| | }}
|
| | </style>
|
| |
|
| | <div class="stats-container">
|
| | <!-- CPU Stat Block -->
|
| | <div class="stats-block">
|
| | <div class="stats-bar-background">
|
| | <div class="stats-bar-fill" style="width: {cpu_percent}%;"></div>
|
| | </div>
|
| | <div class="stats-title">CPU: {cpu_percent:.1f}%</div>
|
| | </div>
|
| |
|
| | <!-- RAM Stat Block -->
|
| | <div class="stats-block">
|
| | <div class="stats-bar-background">
|
| | <div class="stats-bar-fill" style="width: {ram_percent}%;"></div>
|
| | </div>
|
| | <div class="stats-title">RAM {ram_percent:.1f}%</div>
|
| | <div class="stats-detail">{ram_used_gb:.1f} / {ram_total_gb:.1f} GB</div>
|
| | </div>
|
| |
|
| | <!-- SSD Activity Stat Block -->
|
| | <div class="stats-block">
|
| | <div class="stats-bar-background">
|
| | <div class="stats-bar-fill" style="width: {ssd_bar_height}%;"></div>
|
| | </div>
|
| | <div class="stats-title">SSD R/W</div>
|
| | <div class="stats-detail">{read_mb_s:.1f} / {write_mb_s:.1f} MB/s</div>
|
| | </div>
|
| |
|
| | <!-- GPU Stat Block -->
|
| | <div class="stats-block">
|
| | <div class="stats-bar-background">
|
| | <div class="stats-bar-fill" style="width: {gpu_percent}%;"></div>
|
| | </div>
|
| | <div class="stats-title">GPU: {gpu_percent:.1f}%</div>
|
| | </div>
|
| |
|
| | <!-- VRAM Stat Block -->
|
| | <div class="stats-block">
|
| | <div class="stats-bar-background">
|
| | <div class="stats-bar-fill" style="width: {vram_percent}%;"></div>
|
| | </div>
|
| | <div class="stats-title">VRAM {vram_percent:.1f}%</div>
|
| | <div class="stats-detail">{vram_used_gb:.1f} / {vram_total_gb:.1f} GB</div>
|
| | </div>
|
| | </div>
|
| | """
|
| | return stats_html, last_disk_io
|
| |
|
| | def streaming_html(self, state):
|
| | if "stats_running" in state:
|
| | return
|
| | state["stats_running"] = True
|
| |
|
| | self.running = True
|
| | last_disk_io = psutil.disk_io_counters()
|
| | i = 0
|
| | import time
|
| | try:
|
| | while self.running:
|
| | i+= 1
|
| |
|
| |
|
| | html_content, last_disk_io = self.get_system_stats(False, last_disk_io)
|
| | yield html_content
|
| |
|
| |
|
| | except GeneratorExit:
|
| |
|
| | return
|
| | except Exception as e:
|
| | print(f"Streaming error: {e}")
|
| |
|
| |
|
| | final_html = """
|
| | <DIV>
|
| | <img src="x" onerror="
|
| | setInterval(()=>{
|
| | console.log('trying...');
|
| | setTimeout(() => {
|
| | try{
|
| | const btn = document.getElementById('restart_stats');
|
| | if(btn) {
|
| | console.log('found button, clicking');
|
| | btn.click();
|
| | } else {
|
| | console.log('button not found');
|
| | }
|
| | }catch(e){console.log('error: ' + e.message)}
|
| | }, 100);
|
| | }, 8000);" style="display:none;">
|
| |
|
| | <button onclick="document.getElementById('restart_stats').click()"
|
| | style="background: #007bff; color: white; padding: 15px 30px;
|
| | border: none; border-radius: 5px; font-size: 16px; cursor: pointer;">
|
| | 🔄 Connection to Server Lost. Attempting Auto reconnect. Click Here to for Manual Connection
|
| | </button>
|
| | </DIV>
|
| | """
|
| | try:
|
| | yield final_html
|
| | except:
|
| | pass
|
| |
|
| |
|
| | def get_gradio_element(self):
|
| | self.system_stats_display = gr.HTML(self.get_system_stats(True)[0])
|
| | self.restart_btn = gr.Button("restart stats",elem_id="restart_stats", visible= False)
|
| | return self.system_stats_display
|
| |
|
| | def setup_events(self, main, state):
|
| | gr.on([main.load, self.restart_btn.click],
|
| | fn=self.streaming_html,
|
| | inputs = state,
|
| | outputs=self.system_stats_display,
|
| | show_progress=False
|
| | )
|
| |
|