Show network addresses in system settings

Users sometimes struggle to get the IP address of their PC. This PR adds a button to the system settings pane that will list the server's IP
addresses.

CHANGES.md

@@ -19,8 +19,10 @@
 - Configuration to prevent the browser from opening on startup
 - Lots of minor bug fixes
 - A `What's New?` tab in the UI
+- Button to retrieve the network addresses of the server in the systems setting dialog
 
 ### Detailed changelog
+* 2.4.14 - 23 Nov 2022 - Button to retrieve the network addresses of the server in the systems setting dialog
 * 2.4.13 - 21 Nov 2022 - Change the modifier weight via mouse wheel, drag to reorder selected modifiers, and some more modifier-related fixes. Thanks @patriceac
 * 2.4.12 - 21 Nov 2022 - Another fix for improving how long images take to generate. Reduces the time taken for an enqueued task to start processing.
 * 2.4.11 - 21 Nov 2022 - Installer improvements: avoid crashing if the username contains a space or special characters, allow moving/renaming the folder after installation on Windows, whitespace fix on git apply

ui/index.html

@@ -249,6 +249,14 @@
                     <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>
+
             </div>
         </div>
         <div id="tab-content-about" class="tab-content">

ui/media/css/main.css

@@ -1002,3 +1002,9 @@ button:active {
 button#save-system-settings-btn {
     padding: 4pt 8pt;
 }
+#ip-info a {
+    color:var(--text-color)
+}
+#ip-info div {
+    line-height: 200%;
+}

ui/media/js/parameters.js

@@ -201,6 +201,10 @@ let uiOpenBrowserOnStartField = document.querySelector("#ui_open_browser_on_star
 
 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 {
         let res = await fetch('/app_config', {
@@ -379,3 +383,17 @@ 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

@@ -7,6 +7,7 @@ import traceback
 
 import sys
 import os
+import socket
 import picklescan.scanner
 import rich
 
@@ -286,6 +287,9 @@ def getUIPlugins():
 
     return plugins
 
+def getIPConfig():
+    return socket.gethostbyname_ex(socket.getfqdn()) 
+
 @app.get('/get/{key:path}')
 def read_web_data(key:str=None):
     if not key: # /get without parameters, stable-diffusion easter egg.
@@ -305,6 +309,7 @@ def read_web_data(key:str=None):
     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