Upload folder using huggingface_hub

index.html

@@ -309,28 +309,33 @@ function renderServer(data) {
   const gpus = hw.gpus || [];
   const tasks = data.tasks || [];
   const offline = isOffline(data.timestamp);
-  const maxPct = Math.max(hw.cpu_percent || 0, hw.memory_percent || 0, hw.disk_percent || 0);
+  const gpuMaxVram = gpus.length > 0 ? Math.max(...gpus.map(g => g.memory_percent != null ? g.memory_percent : (g.memory_total_mb > 0 ? g.memory_used_mb / g.memory_total_mb * 100 : 0))) : 0;
+  const maxPct = Math.max(hw.cpu_percent || 0, hw.memory_percent || 0, hw.disk_percent || 0, gpuMaxVram);
   const cardClass = offline ? 'danger' : maxPct >= 90 ? 'danger' : maxPct >= 70 ? 'warn' : '';
 
   let gpuHtml = '';
   if (gpus.length) {
-    gpuHtml = `<div class="gpu-section"><div class="gpu-title">GPUs</div>`;
+    gpuHtml = `<div class="gpu-section"><div class="gpu-title">GPUs (${gpus.length})</div>`;
     for (const g of gpus) {
-      const vramPct = g.memory_total_mb > 0 ? Math.round(g.memory_used_mb / g.memory_total_mb * 100) : 0;
-      const tc = tempColor(g.temp_c);
+      const vramPct = g.memory_percent != null ? Math.round(g.memory_percent) :
+                      (g.memory_total_mb > 0 ? Math.round(g.memory_used_mb / g.memory_total_mb * 100) : 0);
+      const utilPct = g.util_percent != null ? g.util_percent : vramPct;
+      const temp = g.temp_c != null ? g.temp_c : null;
+      const tc = temp != null ? tempColor(temp) : 'green';
+      const tempStr = temp != null ? `${temp}°C` : '';
       gpuHtml += `
-        <div class="gpu-card ${g.temp_c >= 85 ? 'hot' : ''}">
+        <div class="gpu-card ${temp >= 85 ? 'hot' : ''}">
           <div class="gpu-head">
             <span class="gpu-name">#${g.id} ${g.name}</span>
-            <span class="gpu-temp c-${tc}">${g.temp_c}°C</span>
+            <span class="gpu-temp c-${tc}">${tempStr}</span>
           </div>
           <div class="gpu-meters">
             <div>
-              <div class="gpu-meter-label"><span>UTIL</span><span>${g.util_percent}%</span></div>
-              <div class="gpu-meter-bar"><div class="gpu-meter-fill bg-${pctColor(g.util_percent)}" style="width:${g.util_percent}%"></div></div>
+              <div class="gpu-meter-label"><span>VRAM</span><span>${vramPct}%</span></div>
+              <div class="gpu-meter-bar"><div class="gpu-meter-fill bg-${pctColor(vramPct)}" style="width:${vramPct}%"></div></div>
             </div>
             <div>
-              <div class="gpu-meter-label"><span>VRAM</span><span>${vramPct}%</span></div>
+              <div class="gpu-meter-label"><span>MEM</span><span>${g.memory_used_mb}/${g.memory_total_mb}MB</span></div>
               <div class="gpu-meter-bar"><div class="gpu-meter-fill bg-${pctColor(vramPct)}" style="width:${vramPct}%"></div></div>
             </div>
           </div>
@@ -353,6 +358,15 @@ function renderServer(data) {
     tasksHtml += `</div>`;
   }
 
+  // Compute summary stats - handle missing fields gracefully
+  const cpuPct = hw.cpu_percent || 0;
+  const memPct = hw.memory_percent || 0;
+  const diskPct = hw.disk_percent || 0;
+  // GPU average VRAM usage
+  const gpuAvgVram = gpus.length > 0
+    ? Math.round(gpus.reduce((s, g) => s + (g.memory_percent != null ? g.memory_percent : (g.memory_total_mb > 0 ? g.memory_used_mb / g.memory_total_mb * 100 : 0)), 0) / gpus.length)
+    : 0;
+
   return `
     <div class="server-card ${cardClass}">
       <div class="card-head">
@@ -365,20 +379,20 @@ function renderServer(data) {
       <div class="stats">
         <div class="stat">
           <div class="stat-label">CPU</div>
-          <div class="stat-value c-${pctColor(hw.cpu_percent || 0)}">${hw.cpu_percent || 0}<small>%</small></div>
-          <div class="stat-bar"><div class="stat-bar-fill bg-${pctColor(hw.cpu_percent || 0)}" style="width:${hw.cpu_percent || 0}%"></div></div>
+          <div class="stat-value c-${pctColor(cpuPct)}">${cpuPct}<small>%</small></div>
+          <div class="stat-bar"><div class="stat-bar-fill bg-${pctColor(cpuPct)}" style="width:${cpuPct}%"></div></div>
         </div>
         <div class="stat">
-          <div class="stat-label">MEM</div>
-          <div class="stat-value c-${pctColor(hw.memory_percent || 0)}">${hw.memory_percent || 0}<small>%</small></div>
-          <div class="stat-bar"><div class="stat-bar-fill bg-${pctColor(hw.memory_percent || 0)}" style="width:${hw.memory_percent || 0}%"></div></div>
-          <div class="stat-sub">${hw.memory_used_gb || 0}/${hw.memory_total_gb || 0}G</div>
+          <div class="stat-label">GPU AVG</div>
+          <div class="stat-value c-${pctColor(gpuAvgVram)}">${gpuAvgVram}<small>%</small></div>
+          <div class="stat-bar"><div class="stat-bar-fill bg-${pctColor(gpuAvgVram)}" style="width:${gpuAvgVram}%"></div></div>
+          <div class="stat-sub">${gpus.length}x GPU</div>
         </div>
         <div class="stat">
-          <div class="stat-label">DISK</div>
-          <div class="stat-value c-${pctColor(hw.disk_percent || 0)}">${hw.disk_percent || 0}<small>%</small></div>
-          <div class="stat-bar"><div class="stat-bar-fill bg-${pctColor(hw.disk_percent || 0)}" style="width:${hw.disk_percent || 0}%"></div></div>
-          <div class="stat-sub">${hw.disk_used_gb || 0}/${hw.disk_total_gb || 0}G</div>
+          <div class="stat-label">${diskPct ? 'DISK' : 'MEM'}</div>
+          <div class="stat-value c-${pctColor(diskPct || memPct)}">${diskPct || memPct || '--'}<small>${(diskPct || memPct) ? '%' : ''}</small></div>
+          <div class="stat-bar"><div class="stat-bar-fill bg-${pctColor(diskPct || memPct)}" style="width:${diskPct || memPct || 0}%"></div></div>
+          <div class="stat-sub">${hw.memory_used_gb ? hw.memory_used_gb + '/' + hw.memory_total_gb + 'G' : ''}</div>
         </div>
       </div>
       ${gpuHtml}