Show a system info tab, which shows the active GPUs

ui/index.html

@@ -7,7 +7,7 @@
     <link rel="icon" type="image/png" href="/media/images/favicon-32x32.png" sizes="32x32">
     <link rel="stylesheet" href="/media/css/fonts.css?v=1">
     <link rel="stylesheet" href="/media/css/themes.css?v=2">
-    <link rel="stylesheet" href="/media/css/main.css?v=12">
+    <link rel="stylesheet" href="/media/css/main.css?v=13">
     <link rel="stylesheet" href="/media/css/auto-save.css?v=5">
     <link rel="stylesheet" href="/media/css/modifier-thumbnails.css?v=4">
     <link rel="stylesheet" href="/media/css/fontawesome-all.min.css?v=1">
@@ -35,9 +35,9 @@
             <span id="tab-about" class="tab">
                 <span><i class="fa fa-comments icon"></i> Help & Community</span>
             </span>
-            <!-- <span id="tab-system-info" class="tab">
+            <span id="tab-system-info" class="tab">
                 <span><i class="fa fa-microchip icon"></i> System Info</span>
-            </span> -->
+            </span>
         </div>
     </div>
 
@@ -283,18 +283,10 @@
                 </div>
             </div>
         </div>
-        <!-- <div id="tab-content-system-info" class="tab-content">
+        <div id="tab-content-system-info" class="tab-content">
             <div id="system-info" class="tab-content-inner">
-                <h1>System Info</h1>
-                <table>
-                    <tr><td><label>Processor:</label></td><td id="system-info-cpu" class="value">Dingus</td></tr>
-                    <tr><td><label>RAM:</label></td><td id="system-info-ram" class="value">Dingus Another</td></tr>
-                    <tr><td><label>Compatible Graphics Cards (all):</label></td><td id="system-info-all-gpus" class="value">Dingus</td></tr>
-                    <tr><td></td><td>&nbsp;</td></tr>
-                    <tr><td><label>What's being used for rendering 🔥:</label></td><td id="system-info-active-gpus" class="value">Dingus<br/>Intel Graphics SOmething<br/>Another thing</td></tr>
-                </table>
             </div>
-        </div> -->
+        </div>
     </div>
     
 
@@ -338,7 +330,7 @@
 <script src="media/js/inpainting-editor.js?v=1"></script>
 <script src="media/js/image-modifiers.js?v=6"></script>
 <script src="media/js/auto-save.js?v=8"></script>
-<script src="media/js/main.js?v=16"></script>
+<script src="media/js/main.js?v=17"></script>
 <script src="media/js/themes.js?v=4"></script>
 <script src="media/js/dnd.js?v=9"></script>
 <script>

ui/media/css/main.css

@@ -891,9 +891,14 @@ input::file-selector-button {
 i.active {
     background: var(--accent-color);
 }
+#system-info {
+    max-width: 800px;
+}
 #system-info .value {
     text-align: left;
+    padding-left: 10pt;
 }
 #system-info label {
     float: right;
+    font-weight: bold;
 }

ui/media/js/main.js

@@ -189,6 +189,25 @@ function playSound() {
         })
     }
 }
+function setSystemInfo(devices) {
+    let cpu = devices.all.cpu
+    let allGPUs = Object.keys(devices.all).filter(d => d != 'cpu')
+    let activeGPUs = Object.keys(devices.active)
+    allGPUs = allGPUs.map(d => devices.all[d])
+    activeGPUs = activeGPUs.map(d => devices.all[d]).map(d => `${d}<br/>`)
+
+    let systemInfo = `
+    <h1>System Info</h1>
+    <table>
+        <tr><td><label>Processor:</label></td><td class="value">${cpu}</td></tr>
+        <tr><td><label>Compatible Graphics Cards (all):</label></td><td class="value">${allGPUs.join('</br>')}</td></tr>
+        <tr><td></td><td>&nbsp;</td></tr>
+        <tr><td><label>What's being used for rendering 🔥:</label></td><td class="value">${activeGPUs.join('</br>')}</td></tr>
+    </table>`
+
+    let systemInfoEl = document.querySelector('#system-info')
+    systemInfoEl.innerHTML = systemInfo
+}
 
 async function healthCheck() {
     try {
@@ -222,8 +241,12 @@ async function healthCheck() {
                 setServerStatus('error', serverState.status.toLowerCase())
                 break
         }
+        if (serverState.devices) {
+            setSystemInfo(serverState.devices)
+        }
         serverState.time = Date.now()
     } catch (e) {
+        console.log(e)
         serverState = {'status': 'Offline', 'time': Date.now()}
         setServerStatus('error', 'offline')
     }

ui/server.py

@@ -260,6 +260,7 @@ def ping(session_id:str=None):
                 response['session'] = 'completed'
             else:
                 response['session'] = 'pending'
+    response['devices'] = task_manager.get_devices()
     return JSONResponse(response, headers=NOCACHE_HEADERS)
 
 def save_model_to_config(ckpt_model_name, vae_model_name):