gradio-gpu-monitor

Custom real-time GPU monitoring component for Gradio apps using gr.HTML. It polls nvidia-smi in the background and displays live statistics (VRAM, Temperature, Load, Power, and Clocks) in an elegant, responsive grid.

Perfect for AI training dashboards, LLM hosting interfaces, or any Gradio app where users need to keep an eye on hardware resource consumption.

Inspired by the GPU monitoring widget from the Ostris AI-Toolkit

Features and Key Characteristics

• Real-time targeted updates with zero DOM flickering or flashing.
• Autonomous background polling using Gradio 6's server_functions.
• Light/dark theme support completely integrated with Gradio's native -- CSS variables.
• Graceful fallback (Mock Data) if executed on a machine without nvidia-smi (ideal for local development).
• Responsive CSS Grid that automatically adapts the number of columns based on screen size.
• Dynamic colored icons via Lucide (temperature and utilization colors change based on thresholds).
• Configurable refresh rate and timestamp visibility.

Installation

pip install gradio-gpu-monitor

Usage

Note: Make sure to include the Lucide icon library in your gr.launch() head parameter for the icons to render correctly.

import gradio as gr
from gradio_gpu_monitor import GPUMonitor

# Load Lucide icons via CDN
head_html = """<script src="https://unpkg.com/lucide@latest"></script>"""

with gr.Blocks(head=head_html) as demo:
    gr.Markdown("# 🎛️ System Dashboard")
    
    # Simple initialization with default settings (1s refresh)
    GPUMonitor()
    
demo.launch()

Check out the full example in the Hugging Face demo.

Example with all properties

gpu_widget = GPUMonitor(
    update_interval=2500,              # Refresh every 2.5 seconds
    show_last_updated=False,           # Hide the clock text
    label="Hardware Status",           # Optional title context
    visible=True,
    elem_id="custom-gpu-monitor",
    elem_classes=["my-custom-class"]
)