From ef0a1c95adae582e7415244f7fc8e38874d87c56 Mon Sep 17 00:00:00 2001 From: Manuel Schmid Date: Sun, 7 Apr 2024 18:21:38 +0200 Subject: [PATCH 1/3] feat: add button to reconnect UI without having to reload the page --- javascript/script.js | 37 +++++++++++++++++++++++++++++++++++++ language/en.json | 1 + webui.py | 11 ++++++++++- 3 files changed, 48 insertions(+), 1 deletion(-) diff --git a/javascript/script.js b/javascript/script.js index 9aa0b5c1..e23c0b6d 100644 --- a/javascript/script.js +++ b/javascript/script.js @@ -122,6 +122,43 @@ document.addEventListener("DOMContentLoaded", function() { initStylePreviewOverlay(); }); +var onAppend = function(elem, f) { + var observer = new MutationObserver(function(mutations) { + mutations.forEach(function(m) { + if (m.addedNodes.length) { + f(m.addedNodes); + } + }) + }) + observer.observe(elem, {childList: true}); +} + +function addObserverIfDesiredNodeAvailable(querySelector, callback) { + var elem = document.querySelector(querySelector); + if (!elem) { + window.setTimeout(() => addObserverIfDesiredNodeAvailable(querySelector, callback), 1000); + return; + } + + onAppend(elem, callback); +} + +/** + * Show reset button on toast "Connection errored out." + */ +addObserverIfDesiredNodeAvailable(".toast-wrap", function(added) { + added.forEach(function(element) { + if (element.innerText.includes("Connection errored out.")) { + window.setTimeout(function() { + document.getElementById("reset_button").classList.remove("hidden"); + document.getElementById("generate_button").classList.add("hidden"); + document.getElementById("skip_button").classList.add("hidden"); + document.getElementById("stop_button").classList.add("hidden"); + }); + } + }) +}); + /** * Add a ctrl+enter as a shortcut to start a generation */ diff --git a/language/en.json b/language/en.json index fefc79c4..d10c29dc 100644 --- a/language/en.json +++ b/language/en.json @@ -4,6 +4,7 @@ "Generate": "Generate", "Skip": "Skip", "Stop": "Stop", + "Reconnect and Reset UI": "Reconnect and Reset UI", "Input Image": "Input Image", "Advanced": "Advanced", "Upscale or Variation": "Upscale or Variation", diff --git a/webui.py b/webui.py index 98780bff..ababb8b0 100644 --- a/webui.py +++ b/webui.py @@ -123,8 +123,9 @@ with shared.gradio_root: with gr.Column(scale=3, min_width=0): generate_button = gr.Button(label="Generate", value="Generate", elem_classes='type_row', elem_id='generate_button', visible=True) + reset_button = gr.Button(label="Reconnect and Reset UI", value="Reconnect and Reset UI", elem_classes='type_row', elem_id='reset_button', visible=False) load_parameter_button = gr.Button(label="Load Parameters", value="Load Parameters", elem_classes='type_row', elem_id='load_parameter_button', visible=False) - skip_button = gr.Button(label="Skip", value="Skip", elem_classes='type_row_half', visible=False) + skip_button = gr.Button(label="Skip", value="Skip", elem_classes='type_row_half', elem_id='skip_button', visible=False) stop_button = gr.Button(label="Stop", value="Stop", elem_classes='type_row_half', elem_id='stop_button', visible=False) def stop_clicked(currentTask): @@ -688,6 +689,14 @@ with shared.gradio_root: .then(fn=update_history_link, outputs=history_link) \ .then(fn=lambda: None, _js='playNotification').then(fn=lambda: None, _js='refresh_grid_delayed') + reset_button.click(lambda: [worker.AsyncTask(args=[]), False, gr.update(visible=True, interactive=True)] + + [gr.update(visible=False)] * 6 + + [gr.update(visible=True, value=[])], + outputs=[currentTask, state_is_generating, generate_button, + reset_button, stop_button, skip_button, + progress_html, progress_window, progress_gallery, gallery], + queue=False) + for notification_file in ['notification.ogg', 'notification.mp3']: if os.path.exists(notification_file): gr.Audio(interactive=False, value=notification_file, elem_id='audio_notification', visible=False) From 42e301af6d72e5a005da29bf35b0de642cd5f097 Mon Sep 17 00:00:00 2001 From: Manuel Schmid Date: Sun, 7 Apr 2024 18:26:14 +0200 Subject: [PATCH 2/3] qa: add missing semicolon --- javascript/script.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/javascript/script.js b/javascript/script.js index e23c0b6d..d379a783 100644 --- a/javascript/script.js +++ b/javascript/script.js @@ -128,8 +128,8 @@ var onAppend = function(elem, f) { if (m.addedNodes.length) { f(m.addedNodes); } - }) - }) + }); + }); observer.observe(elem, {childList: true}); } @@ -156,7 +156,7 @@ addObserverIfDesiredNodeAvailable(".toast-wrap", function(added) { document.getElementById("stop_button").classList.add("hidden"); }); } - }) + }); }); /** From 3b27a11a90611cc4c1f4a1d24036d127be3ce770 Mon Sep 17 00:00:00 2001 From: Manuel Schmid Date: Thu, 9 May 2024 19:09:14 +0200 Subject: [PATCH 3/3] refactor: rename button label to "Reconnect" --- language/en.json | 2 +- webui.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/language/en.json b/language/en.json index d10c29dc..2ef96fde 100644 --- a/language/en.json +++ b/language/en.json @@ -4,7 +4,7 @@ "Generate": "Generate", "Skip": "Skip", "Stop": "Stop", - "Reconnect and Reset UI": "Reconnect and Reset UI", + "Reconnect": "Reconnect", "Input Image": "Input Image", "Advanced": "Advanced", "Upscale or Variation": "Upscale or Variation", diff --git a/webui.py b/webui.py index ababb8b0..79ca7bfa 100644 --- a/webui.py +++ b/webui.py @@ -123,7 +123,7 @@ with shared.gradio_root: with gr.Column(scale=3, min_width=0): generate_button = gr.Button(label="Generate", value="Generate", elem_classes='type_row', elem_id='generate_button', visible=True) - reset_button = gr.Button(label="Reconnect and Reset UI", value="Reconnect and Reset UI", elem_classes='type_row', elem_id='reset_button', visible=False) + reset_button = gr.Button(label="Reconnect", value="Reconnect", elem_classes='type_row', elem_id='reset_button', visible=False) load_parameter_button = gr.Button(label="Load Parameters", value="Load Parameters", elem_classes='type_row', elem_id='load_parameter_button', visible=False) skip_button = gr.Button(label="Skip", value="Skip", elem_classes='type_row_half', elem_id='skip_button', visible=False) stop_button = gr.Button(label="Stop", value="Stop", elem_classes='type_row_half', elem_id='stop_button', visible=False)