use file route instead of Textbox

Author: w-e-w

javascript/sysinfo.js

@@ -434,3 +434,17 @@ function onEdit(editId, elem, afterMs, func) {
 
     return edited;
 }
+
+function downloadSysinfo(path) {
+    const pad = (n) => String(n).padStart(2, '0');
+    const now = new Date();
+    const YY = now.getFullYear();
+    const MM = pad(now.getMonth() + 1);
+    const DD = pad(now.getDate());
+    const HH = pad(now.getHours());
+    const mm = pad(now.getMinutes());
+    const link = document.createElement('a');
+    link.download = `sysinfo-${YY}-${MM}-${DD}-${HH}-${mm}.json`;
+    link.href = path;
+    link.click();
+}

javascript/ui.js

@@ -1,12 +1,14 @@
 import gradio as gr
+import json
 
-from modules import ui_common, shared, script_callbacks, scripts, sd_models, sysinfo, timer, shared_items
+from modules import ui_common, shared, script_callbacks, scripts, sd_models, sysinfo, timer, shared_items, paths_internal, util
 from modules.call_queue import wrap_gradio_call_no_job
 from modules.options import options_section
 from modules.shared import opts
 from modules.ui_components import FormRow
 from modules.ui_gradio_extensions import reload_javascript
 from concurrent.futures import ThreadPoolExecutor, as_completed
+from pathlib import Path
 
 
 def get_value_for_setting(key):
@@ -172,14 +174,24 @@ def create_ui(self, loadsave, dummy_component):
                 with gr.TabItem("Sysinfo", id="sysinfo", elem_id="settings_tab_sysinfo"):
                     download_sysinfo = gr.Button(value='Download system info', elem_id="internal-download-sysinfo", visible=False)
                     open_sysinfo = gr.Button(value='Open as text in a new page', elem_id="internal-open-sysinfo", visible=False)
-                    sysinfo_textbox = gr.Textbox('', elem_id='internal-sysinfo-textbox', interactive=False, visible=False)
                     sysinfo_html = gr.HTML('''<a class="sysinfo_big_link" onclick="gradioApp().getElementById('internal-download-sysinfo').click();">Download system info</a><br/><a onclick="gradioApp().getElementById('internal-open-sysinfo').click();">(or open as text in a new page)</a>''', elem_id="sysinfo_download")
 
-                    def get_sysinfo():
-                        return sysinfo.get(), gr.update()
-
-                    download_sysinfo.click(fn=get_sysinfo, outputs=[sysinfo_textbox, sysinfo_html], show_progress=True).then(fn=None, _js='downloadSysinfo')
-                    open_sysinfo.click(fn=get_sysinfo, outputs=[sysinfo_textbox, sysinfo_html], show_progress=True).then(fn=None, _js='openTabSysinfo')
+                    sysinfo_path = Path(paths_internal.script_path) / 'tmp' / 'sysinfo.json'
+
+                    def create_sysinfo():
+                        sysinfo_path.parent.mkdir(parents=True, exist_ok=True)
+                        sysinfo_path.write_text(sysinfo.get(), encoding='utf8', newline='\n')
+                        return gr.update()
+
+                    sysinfo_path_url = json.dumps(f"file={util.truncate_path(sysinfo_path)}")
+                    download_sysinfo.click(
+                        fn=create_sysinfo, outputs=[sysinfo_html], show_progress=True).success(
+                        fn=None, _js=f"function(){{downloadSysinfo({sysinfo_path_url});}}"
+                    )
+                    open_sysinfo.click(
+                        fn=create_sysinfo, outputs=[sysinfo_html], show_progress=True).success(
+                        fn=None, _js=f"function(){{window.open({sysinfo_path_url}, '_blank');}}"
+                    )
 
                     with gr.Row():
                         with gr.Column(scale=1):