Unify IP info with devices, into a system_info table

This commit is contained in:
cmdr2 2022-11-30 14:34:24 +05:30
parent 65102bb64d
commit 029509ebad
4 changed files with 61 additions and 67 deletions

View File

@ -252,14 +252,15 @@
<br/><br/>
<div>
<h3><i class="fa fa-microchip icon"></i> System Info</h3>
<div id="system-info"></div>
</div>
<div>
<h3><i class="fa fa-solid fa-network-wired icon"></i> Server Address</h3>
<p>You can access Stable Diffusion UI from other devices in your network. To do this, enable network access in the settings
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>
<button id="get-server-ip" class="primaryButton">Get Server IP</button>
<div id="ip-info"></div>
<div id="system-info">
<table>
<tr><td><label>Processor:</label></td><td id="system-info-cpu" class="value"></td></tr>
<tr><td><label>Compatible Graphics Cards (all):</label></td><td id="system-info-gpus-all" class="value"></td></tr>
<tr><td></td><td>&nbsp;</td></tr>
<tr><td><label>Used for rendering 🔥:</label></td><td id="system-info-rendering-devices" class="value"></td></tr>
<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>
</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()

View File

@ -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) {

View File

@ -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 activeDeviceIds = Object.keys(res['active']).filter(d => d !== 'cpu')
let allDeviceIds = Object.keys(devices['all']).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
})

View File

@ -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()
devices['config'] = config.get('render_devices', "auto")
return JSONResponse(devices, headers=NOCACHE_HEADERS)
system_info = {
'devices': task_manager.get_devices(),
'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