Unify IP info with devices, into a system_info table

ui/index.html

@@ -252,14 +252,15 @@
                 <br/><br/>
                 <div>
                     <h3><i class="fa fa-microchip icon"></i> System Info</h3>
-                    <div id="system-info"></div>
+                    <div id="system-info">
-                </div>
+                        <table>
-                <div>
+                            <tr><td><label>Processor:</label></td><td id="system-info-cpu" class="value"></td></tr>
-                    <h3><i class="fa fa-solid fa-network-wired icon"></i> Server Address</h3>
+                            <tr><td><label>Compatible Graphics Cards (all):</label></td><td id="system-info-gpus-all" class="value"></td></tr>
-                    <p>You can access Stable Diffusion UI from other devices in your network. To do this, enable network access in the settings
+                            <tr><td></td><td>&nbsp;</td></tr>
-                    above, and open Stable Diffusion UI in a browser using the server's IP. You can use this button to get your server's address.</p>
+                            <tr><td><label>Used for rendering 🔥:</label></td><td id="system-info-rendering-devices" class="value"></td></tr>
-                    <button id="get-server-ip" class="primaryButton">Get Server IP</button>
+                            <tr><td><label>Server Addresses <i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip right">You can access Stable Diffusion UI from other devices using these addresses</span></i> :</label></td><td id="system-info-server-hosts" class="value"></td></tr>
-                    <div id="ip-info"></div>
+                        </table>
+                    </div>
                 </div>
 
             </div>
@@ -358,7 +359,7 @@ async function init() {
     await getAppConfig()
     await loadModifiers()
     await loadUIPlugins()
-    await getDevices()
+    await getSystemInfo()
 
     setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
     healthCheck()

ui/media/js/main.js

@@ -196,34 +196,6 @@ function playSound() {
         })
     }
 }
-function setSystemInfo(devices) {
-    let cpu = devices.all.cpu.name
-    let allGPUs = Object.keys(devices.all).filter(d => d != 'cpu')
-    let activeGPUs = Object.keys(devices.active)
-
-    function ID_TO_TEXT(d) {
-        let info = devices.all[d]
-        if ("mem_free" in info && "mem_total" in info) {
-            return `${info.name} <small>(${d}) (${info.mem_free.toFixed(1)}Gb free / ${info.mem_total.toFixed(1)} Gb total)</small>`
-        } else {
-            return `${info.name} <small>(${d}) (no memory info)</small>`
-        }
-    }
-
-    allGPUs = allGPUs.map(ID_TO_TEXT)
-    activeGPUs = activeGPUs.map(ID_TO_TEXT)
-
-    let systemInfo = `
-    <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>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 {
@@ -258,7 +230,7 @@ async function healthCheck() {
                 break
         }
         if (serverState.devices) {
-            setSystemInfo(serverState.devices)
+            setDeviceInfo(serverState.devices)
         }
         serverState.time = Date.now()
     } catch (e) {

ui/media/js/parameters.js

@@ -219,9 +219,6 @@ let confirmDangerousActionsField = document.querySelector("#confirm_dangerous_ac
 
 let saveSettingsBtn = document.querySelector('#save-system-settings-btn')
 
-let getServerIPBtn = document.querySelector('#get-server-ip')
-let ipInfoContainer = document.querySelector('#ip-info')
-
 
 async function changeAppConfig(configDelta) {
     try {
@@ -340,14 +337,45 @@ async function getDiskPath() {
     }
 }
 
-async function getDevices() {
+function setDeviceInfo(devices) {
+    let cpu = devices.all.cpu.name
+    let allGPUs = Object.keys(devices.all).filter(d => d != 'cpu')
+    let activeGPUs = Object.keys(devices.active)
+
+    function ID_TO_TEXT(d) {
+        let info = devices.all[d]
+        if ("mem_free" in info && "mem_total" in info) {
+            return `${info.name} <small>(${d}) (${info.mem_free.toFixed(1)}Gb free / ${info.mem_total.toFixed(1)} Gb total)</small>`
+        } else {
+            return `${info.name} <small>(${d}) (no memory info)</small>`
+        }
+    }
+
+    allGPUs = allGPUs.map(ID_TO_TEXT)
+    activeGPUs = activeGPUs.map(ID_TO_TEXT)
+
+    let systemInfoEl = document.querySelector('#system-info')
+    systemInfoEl.querySelector('#system-info-cpu').innerText = cpu
+    systemInfoEl.querySelector('#system-info-gpus-all').innerHTML = allGPUs.join('</br>')
+    systemInfoEl.querySelector('#system-info-rendering-devices').innerHTML = activeGPUs.join('</br>')
+}
+
+function setHostInfo(hosts) {
+    let port = listenPortField.value
+    hosts = hosts.map(addr => `http://${addr}:${port}/`).map(url => `<div><a href="${url}">${url}</a></div>`)
+    document.querySelector('#system-info-server-hosts').innerHTML = hosts.join('')
+}
+
+async function getSystemInfo() {
     try {
-        let res = await fetch('/get/devices')
+        let res = await fetch('/get/system_info')
         if (res.status === 200) {
             res = await res.json()
+            let devices = res['devices']
+            let hosts = res['hosts']
 
-            let allDeviceIds = Object.keys(res['all']).filter(d => d !== 'cpu')
+            let allDeviceIds = Object.keys(devices['all']).filter(d => d !== 'cpu')
-            let activeDeviceIds = Object.keys(res['active']).filter(d => d !== 'cpu')
+            let activeDeviceIds = Object.keys(devices['active']).filter(d => d !== 'cpu')
 
             if (activeDeviceIds.length === 0) {
                 useCPUField.checked = true
@@ -365,11 +393,11 @@ async function getDevices() {
                 useCPUField.disabled = true // no compatible GPUs, so make the CPU mandatory
             }
 
-            autoPickGPUsField.checked = (res['config'] === 'auto')
+            autoPickGPUsField.checked = (devices['config'] === 'auto')
 
             useGPUsField.innerHTML = ''
             allDeviceIds.forEach(device => {
-                let deviceName = res['all'][device]['name']
+                let deviceName = devices['all'][device]['name']
                 let deviceOption = `<option value="${device}">${deviceName} (${device})</option>`
                 useGPUsField.insertAdjacentHTML('beforeend', deviceOption)
             })
@@ -380,6 +408,9 @@ async function getDevices() {
             } else {
                 $('#use_gpus').val(activeDeviceIds)
             }
+
+            setDeviceInfo(devices)
+            setHostInfo(hosts)
         }
     } catch (e) {
         console.log('error fetching devices', e)
@@ -407,17 +438,3 @@ saveSettingsBtn.addEventListener('click', function() {
     saveSettingsBtn.classList.add('active')
     asyncDelay(300).then(() => saveSettingsBtn.classList.remove('active'))
 })
-
-getServerIPBtn.addEventListener('click', async function() {
-    ipInfoContainer.innerHTML = "Retrieving server addresses..."
-    let list = "<h4>List of server addresses</h4><p>If there is more than one result, not all of them might be reachable from other devices.</p><div>"
-    let res = await fetch('/get/ip_config')
-    let data = await res.json()
-    let port = listenPortField.value
-    // Merge hostname (field 0) into list of IPs (field 2)
-    data[2].push(data[0])
-    data[2].forEach((addr) => { let url=`http://${addr}:${port}/`; list+=`<div><a href="${url}">${url}</a></div>`;})
-    list += "</div>"
-    ipInfoContainer.innerHTML = list
-})
-

ui/server.py

@@ -307,7 +307,9 @@ def getUIPlugins():
     return plugins
 
 def getIPConfig():
-    return socket.gethostbyname_ex(socket.getfqdn()) 
+    ips = socket.gethostbyname_ex(socket.getfqdn())
+    ips[2].append(ips[0])
+    return ips[2]
 
 @app.get('/get/{key:path}')
 def read_web_data(key:str=None):
@@ -318,17 +320,19 @@ def read_web_data(key:str=None):
         if config is None:
             config = APP_CONFIG_DEFAULTS
         return JSONResponse(config, headers=NOCACHE_HEADERS)
-    elif key == 'devices':
+    elif key == 'system_info':
         config = getConfig()
-        devices = task_manager.get_devices()
+        system_info = {
-        devices['config'] = config.get('render_devices', "auto")
+            'devices': task_manager.get_devices(),
-        return JSONResponse(devices, headers=NOCACHE_HEADERS)
+            'hosts': getIPConfig(),
+        }
+        system_info['devices']['config'] = config.get('render_devices', "auto")
+        return JSONResponse(system_info, headers=NOCACHE_HEADERS)
     elif key == 'models':
         return JSONResponse(getModels(), headers=NOCACHE_HEADERS)
     elif key == 'modifiers': return FileResponse(os.path.join(SD_UI_DIR, 'modifiers.json'), headers=NOCACHE_HEADERS)
     elif key == 'output_dir': return JSONResponse({ 'output_dir': outpath }, headers=NOCACHE_HEADERS)
     elif key == 'ui_plugins': return JSONResponse(getUIPlugins(), headers=NOCACHE_HEADERS)
-    elif key == 'ip_config': return JSONResponse(getIPConfig(), headers=NOCACHE_HEADERS)
     else:
         raise HTTPException(status_code=404, detail=f'Request for unknown {key}') # HTTP404 Not Found