Feature/update the palette (#59)

* update the palette

* add encoder / decoder

---------

Co-authored-by: Panos <>

Author: psalias2006

README.md

@@ -9,7 +9,7 @@ Real-time NVIDIA GPU monitoring dashboard. Lightweight, web-based, and self-host
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 [![NVIDIA](https://img.shields.io/badge/NVIDIA-GPU-76B900?style=flat-square&logo=nvidia&logoColor=white)](https://www.nvidia.com/)
 
-<img src="gpu-hot.jpg" alt="GPU Hot Dashboard" width="800" />
+<img src="gpu-hot.png" alt="GPU Hot Dashboard" width="800" />
 
 <p>
 <a href="https://psalias2006.github.io/gpu-hot/demo.html">

core/__init__.py

@@ -3,9 +3,6 @@
 Real-time NVIDIA GPU monitoring application
 """
 
-__version__ = '1.0.0'
-__author__ = 'GPU Hot Team'
-
 from .monitor import GPUMonitor
 from . import config
 

core/config.py

@@ -5,7 +5,7 @@
 import os
 import socket
 
-# Flask Configuration
+# Server Configuration
 SECRET_KEY = 'gpu_hot_secret'
 HOST = '0.0.0.0'
 PORT = 1312

core/metrics/collector.py

@@ -1,10 +1,13 @@
 """GPU metrics collector using NVML"""
 
 import time
+import logging
 import pynvml
 from datetime import datetime
 from .utils import safe_get, decode_bytes, to_mib, to_watts
 
+logger = logging.getLogger(__name__)
+
 
 class MetricsCollector:
     """Collect all available GPU metrics via NVML"""
@@ -267,29 +270,54 @@ def _add_connectivity(self, handle, data):
 
     def _add_media_engines(self, handle, data):
         """Encoder/decoder metrics"""
-        # Encoder
-        if enc := safe_get(pynvml.nvmlDeviceGetEncoderUtilization, handle):
-            if isinstance(enc, tuple) and len(enc) >= 2:
-                data['encoder_utilization'] = float(enc[0])
+        if not hasattr(self, '_media_logged'):
+            self._media_logged = False
 
+        # Encoder utilization — only set when GPU supports it
+        try:
+            enc_util, enc_period = pynvml.nvmlDeviceGetEncoderUtilization(handle)
+            data['encoder_utilization'] = float(enc_util)
+        except pynvml.NVMLError as e:
+            if not self._media_logged:
+                logger.info(f"Encoder utilization not available: {e}")
+        except Exception as e:
+            if not self._media_logged:
+                logger.info(f"Encoder utilization error: {e}")
+        
+        # Encoder sessions
         try:
-            if sessions := pynvml.nvmlDeviceGetEncoderSessions(handle):
-                data['encoder_sessions'] = len(sessions)
-                if fps := [s.averageFps for s in sessions if hasattr(s, 'averageFps')]:
+            sessions = pynvml.nvmlDeviceGetEncoderSessions(handle)
+            data['encoder_sessions'] = len(sessions) if sessions else 0
+            if sessions:
+                fps = [s.averageFps for s in sessions if hasattr(s, 'averageFps')]
+                if fps:
                     data['encoder_fps'] = float(sum(fps) / len(fps))
-        except:
+        except pynvml.NVMLError:
+            pass
+        except Exception:
             pass
 
-        # Decoder
-        if dec := safe_get(pynvml.nvmlDeviceGetDecoderUtilization, handle):
-            if isinstance(dec, tuple) and len(dec) >= 2:
-                data['decoder_utilization'] = float(dec[0])
-        
+        # Decoder utilization — only set when GPU supports it
         try:
-            if sessions := pynvml.nvmlDeviceGetDecoderSessions(handle):
-                data['decoder_sessions'] = len(sessions)
-        except:
+            dec_util, dec_period = pynvml.nvmlDeviceGetDecoderUtilization(handle)
+            data['decoder_utilization'] = float(dec_util)
+        except pynvml.NVMLError as e:
+            if not self._media_logged:
+                logger.info(f"Decoder utilization not available: {e}")
+        except Exception as e:
+            if not self._media_logged:
+                logger.info(f"Decoder utilization error: {e}")
+        
+        # Decoder sessions
+        try:
+            sessions = pynvml.nvmlDeviceGetDecoderSessions(handle)
+            data['decoder_sessions'] = len(sessions) if sessions else 0
+        except pynvml.NVMLError:
             pass
+        except Exception:
+            pass
+        
+        self._media_logged = True
 
     def _add_health_status(self, handle, data):
         """ECC and health metrics"""

core/nvidia_smi_fallback.py

@@ -22,7 +22,8 @@ def parse_nvidia_smi():
             'clocks.max.gr,clocks.max.sm,clocks.max.mem,'
             'pcie.link.gen.current,pcie.link.gen.max,pcie.link.width.current,pcie.link.width.max,'
             'encoder.stats.sessionCount,encoder.stats.averageFps,encoder.stats.averageLatency,'
-            'pstate,compute_mode',
+            'pstate,compute_mode,'
+            'utilization.encoder,utilization.decoder',
             '--format=csv,noheader,nounits'
         ], capture_output=True, text=True, timeout=10)
 
@@ -74,6 +75,8 @@ def parse_nvidia_smi():
                         'decoder_latency': 0,
                         'performance_state': parts[27] if len(parts) > 27 and parts[27] not in ['N/A', '[N/A]', ''] else 'N/A',
                         'compute_mode': parts[28] if len(parts) > 28 and parts[28] not in ['N/A', '[N/A]', ''] else 'N/A',
+                        'encoder_utilization': float(parts[29]) if len(parts) > 29 and parts[29] not in ['N/A', '[N/A]', ''] else 0,
+                        'decoder_utilization': float(parts[30]) if len(parts) > 30 and parts[30] not in ['N/A', '[N/A]', ''] else 0,
                         'throttle_reasons': 'None',
                         'timestamp': datetime.now().isoformat(),
                         '_fallback_mode': True
@@ -146,9 +149,11 @@ def parse_nvidia_smi_fallback():
                         'encoder_sessions': 0,
                         'encoder_fps': 0,
                         'encoder_latency': 0,
+                        'encoder_utilization': 0,
                         'decoder_sessions': 0,
                         'decoder_fps': 0,
                         'decoder_latency': 0,
+                        'decoder_utilization': 0,
                         'performance_state': parts[13] if parts[13] not in ['N/A', '[N/A]', ''] else 'N/A',
                         'compute_mode': 'N/A',
                         'throttle_reasons': 'None',

gpu-hot.jpg

@@ -15,12 +15,13 @@
     gap: var(--space-lg);
     padding: var(--space-sm) 0;
     cursor: pointer;
-    transition: background 0.1s;
+    transition: background var(--transition-fast), transform var(--transition-fast);
     min-width: 0;
 }
 
 .overview-gpu-card:hover {
-    background: rgba(255, 255, 255, 0.02);
+    background: rgba(255, 255, 255, 0.03);
+    transform: translateX(2px);
 }
 
 .overview-gpu-name {
@@ -99,11 +100,12 @@
 .single-gpu-overview {
     cursor: pointer;
     padding: 0 0 var(--space-md) 0;
-    transition: background 0.1s;
+    transition: background var(--transition-fast), transform var(--transition-fast);
 }
 
 .single-gpu-overview:hover {
-    background: rgba(255, 255, 255, 0.02);
+    background: rgba(255, 255, 255, 0.03);
+    transform: translateX(2px);
 }
 
 .sgo-header {
@@ -337,21 +339,26 @@
     height: 100%;
     background: var(--bar-fill);
     border-radius: 2px;
+    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 /* Metric-identity colored bullet fills */
 .bullet-fill[data-metric="utilization"] {
     background: rgba(var(--metric-util), 0.35);
 }
+
 .bullet-fill[data-metric="temperature"] {
     background: rgba(var(--metric-temp), 0.30);
 }
+
 .bullet-fill[data-metric="memory"] {
     background: rgba(var(--metric-mem), 0.35);
 }
+
 .bullet-fill[data-metric="power"] {
     background: rgba(var(--metric-power), 0.30);
 }
+
 .bullet-fill[data-metric="fan"] {
     background: rgba(var(--metric-fan), 0.30);
 }
@@ -441,7 +448,7 @@
 }
 
 /* Constrain Chart.js wrapper and canvas so they cannot grow (fixes canvas height runaway) */
-.sparkline-canvas-wrap > div {
+.sparkline-canvas-wrap>div {
     height: 100% !important;
     max-height: 90px !important;
     min-height: 0;
@@ -541,6 +548,15 @@
     padding: var(--space-sm) 0;
     align-items: center;
     border-bottom: 1px solid var(--border-subtle);
+    transition: background var(--transition-fast);
+}
+
+.process-item:nth-child(even) {
+    background: rgba(255, 255, 255, 0.015);
+}
+
+.process-item:hover {
+    background: rgba(255, 255, 255, 0.04);
 }
 
 .process-item:last-child {
@@ -672,18 +688,34 @@
     right: var(--space-lg);
     top: var(--space-lg);
     width: 280px;
-    background: var(--bg-surface);
-    border: 1px solid var(--border-subtle);
+    background: var(--bg-elevated);
+    border: 1px solid rgba(255, 183, 77, 0.2);
+    border-left: 3px solid rgba(255, 183, 77, 0.6);
     border-radius: 8px;
     padding: var(--space-md);
     z-index: 1000;
-    transition: opacity 0.2s, transform 0.2s;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 183, 77, 0.06);
+    animation: toast-slide-in 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+@keyframes toast-slide-in {
+    from {
+        opacity: 0;
+        transform: translateY(-12px) scale(0.97);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
 }
 
 .star-toast.is-hidden {
     opacity: 0;
     transform: translateY(-8px);
     pointer-events: none;
+    animation: none;
+    transition: opacity 0.2s, transform 0.2s;
 }
 
 .star-toast-close {
@@ -738,7 +770,7 @@
 
 .star-toast-progress-fill {
     height: 100%;
-    background: var(--text-tertiary);
+    background: rgba(255, 183, 77, 0.5);
     border-radius: 1.5px;
     transition: width 0.5s ease;
 }
@@ -750,28 +782,29 @@
 
 .star-toast-btn {
     width: 100%;
-    border: 1px solid var(--border-subtle);
+    border: 1px solid rgba(255, 183, 77, 0.3);
     border-radius: 6px;
     padding: var(--space-sm) var(--space-md);
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
-    background: transparent;
-    color: var(--text-secondary);
+    background: rgba(255, 183, 77, 0.1);
+    color: rgba(255, 200, 100, 0.9);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-sm);
-    transition: background 0.1s, color 0.1s;
+    transition: background 0.15s, color 0.15s, border-color 0.15s;
 }
 
 .star-toast-btn svg {
     flex-shrink: 0;
 }
 
 .star-toast-btn:hover {
-    background: rgba(255, 255, 255, 0.04);
-    color: var(--text-primary);
+    background: rgba(255, 183, 77, 0.18);
+    color: rgba(255, 210, 130, 1);
+    border-color: rgba(255, 183, 77, 0.45);
 }
 
 /* ============================================
@@ -809,6 +842,17 @@
     border-left: 1px solid var(--border-subtle);
 }
 
+.drawer::before {
+    content: '';
+    display: none;
+    width: 32px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: 2px;
+    margin: var(--space-sm) auto 0;
+    flex-shrink: 0;
+}
+
 .drawer.open {
     transform: translateX(0);
 }
@@ -1054,6 +1098,10 @@
         max-width: 100vw;
     }
 
+    .drawer::before {
+        display: block;
+    }
+
     .sgo-metrics-row {
         flex-direction: column;
         align-items: stretch;
@@ -1184,4 +1232,4 @@
     .process-pid {
         display: none;
     }
-}
+}