From 910a097ae2ed78a62101951f1b87137f9e1baaea Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Mon, 31 Oct 2022 17:36:45 +0300 Subject: add initial version of the extensions tab fix broken Restart Gradio button --- javascript/extensions.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 javascript/extensions.js (limited to 'javascript') diff --git a/javascript/extensions.js b/javascript/extensions.js new file mode 100644 index 00000000..86f5336d --- /dev/null +++ b/javascript/extensions.js @@ -0,0 +1,24 @@ + +function extensions_apply(_, _){ + disable = [] + update = [] + gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){ + if(x.name.startsWith("enable_") && ! x.checked) + disable.push(x.name.substr(7)) + + if(x.name.startsWith("update_") && x.checked) + update.push(x.name.substr(7)) + }) + + restart_reload() + + return [JSON.stringify(disable), JSON.stringify(update)] +} + +function extensions_check(){ + gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){ + x.innerHTML = "Loading..." + }) + + return [] +} \ No newline at end of file -- cgit v1.2.3 From 5b0f624bdc1335313258f59a37607e699e800c22 Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Tue, 1 Nov 2022 09:59:00 +0300 Subject: Added Available tab to extensions UI. --- javascript/extensions.js | 13 +++++- modules/ui_extensions.py | 112 +++++++++++++++++++++++++++++++++++++++++++---- style.css | 9 ++-- 3 files changed, 122 insertions(+), 12 deletions(-) (limited to 'javascript') diff --git a/javascript/extensions.js b/javascript/extensions.js index 86f5336d..59179ca6 100644 --- a/javascript/extensions.js +++ b/javascript/extensions.js @@ -21,4 +21,15 @@ function extensions_check(){ }) return [] -} \ No newline at end of file +} + +function install_extension_from_index(button, url){ + button.disabled = "disabled" + button.value = "Installing..." + + textarea = gradioApp().querySelector('#extension_to_install textarea') + textarea.value = url + textarea.dispatchEvent(new Event("input", { bubbles: true })) + + gradioApp().querySelector('#install_extension_button').click() +} diff --git a/modules/ui_extensions.py b/modules/ui_extensions.py index e74b7d68..ab807722 100644 --- a/modules/ui_extensions.py +++ b/modules/ui_extensions.py @@ -13,6 +13,9 @@ import html from modules import extensions, shared, paths +available_extensions = {"extensions": []} + + def check_access(): assert not shared.cmd_opts.disable_extension_access, "extension access disabed because of commandline flags" @@ -96,6 +99,14 @@ def extension_table(): return code +def normalize_git_url(url): + if url is None: + return "" + + url = url.replace(".git", "") + return url + + def install_extension_from_url(dirname, url): check_access() @@ -103,14 +114,15 @@ def install_extension_from_url(dirname, url): if dirname is None or dirname == "": *parts, last_part = url.split('/') - last_part = last_part.replace(".git", "") + last_part = normalize_git_url(last_part) dirname = last_part target_dir = os.path.join(extensions.extensions_dir, dirname) assert not os.path.exists(target_dir), f'Extension directory already exists: {target_dir}' - assert len([x for x in extensions.extensions if x.remote == url]) == 0, 'Extension with this URL is already installed' + normalized_url = normalize_git_url(url) + assert len([x for x in extensions.extensions if normalize_git_url(x.remote) == normalized_url]) == 0, 'Extension with this URL is already installed' tmpdir = os.path.join(paths.script_path, "tmp", dirname) @@ -128,18 +140,80 @@ def install_extension_from_url(dirname, url): shutil.rmtree(tmpdir, True) +def install_extension_from_index(url): + ext_table, message = install_extension_from_url(None, url) + + return refresh_available_extensions_from_data(), ext_table, message + + +def refresh_available_extensions(url): + global available_extensions + + import urllib.request + with urllib.request.urlopen(url) as response: + text = response.read() + + available_extensions = json.loads(text) + + return url, refresh_available_extensions_from_data(), '' + + +def refresh_available_extensions_from_data(): + extlist = available_extensions["extensions"] + installed_extension_urls = {normalize_git_url(extension.remote): extension.name for extension in extensions.extensions} + + code = f""" + + + + + + + + + + """ + + for ext in extlist: + name = ext.get("name", "noname") + url = ext.get("url", None) + description = ext.get("description", "") + + if url is None: + continue + + existing = installed_extension_urls.get(normalize_git_url(url), None) + + install_code = f"""""" + + code += f""" + + + + + + """ + + code += """ + +
ExtensionDescriptionAction
{html.escape(name)}{html.escape(description)}{install_code}
+ """ + + return code + + def create_ui(): import modules.ui with gr.Blocks(analytics_enabled=False) as ui: with gr.Tabs(elem_id="tabs_extensions") as tabs: with gr.TabItem("Installed"): - extensions_disabled_list = gr.Text(elem_id="extensions_disabled_list", visible=False) - extensions_update_list = gr.Text(elem_id="extensions_update_list", visible=False) with gr.Row(): apply = gr.Button(value="Apply and restart UI", variant="primary") check = gr.Button(value="Check for updates") + extensions_disabled_list = gr.Text(elem_id="extensions_disabled_list", visible=False).style(container=False) + extensions_update_list = gr.Text(elem_id="extensions_update_list", visible=False).style(container=False) extensions_table = gr.HTML(lambda: extension_table()) @@ -157,16 +231,38 @@ def create_ui(): outputs=[extensions_table], ) + with gr.TabItem("Available"): + with gr.Row(): + refresh_available_extensions_button = gr.Button(value="Load from:", variant="primary") + available_extensions_index = gr.Text(value="https://raw.githubusercontent.com/wiki/AUTOMATIC1111/stable-diffusion-webui/Extensions-index.md", label="Extension index URL").style(container=False) + extension_to_install = gr.Text(elem_id="extension_to_install", visible=False) + install_extension_button = gr.Button(elem_id="install_extension_button", visible=False) + + install_result = gr.HTML() + available_extensions_table = gr.HTML() + + refresh_available_extensions_button.click( + fn=modules.ui.wrap_gradio_call(refresh_available_extensions, extra_outputs=[gr.update(), gr.update()]), + inputs=[available_extensions_index], + outputs=[available_extensions_index, available_extensions_table, install_result], + ) + + install_extension_button.click( + fn=modules.ui.wrap_gradio_call(install_extension_from_index, extra_outputs=[gr.update(), gr.update()]), + inputs=[extension_to_install], + outputs=[available_extensions_table, extensions_table, install_result], + ) + with gr.TabItem("Install from URL"): install_url = gr.Text(label="URL for extension's git repository") install_dirname = gr.Text(label="Local directory name", placeholder="Leave empty for auto") - intall_button = gr.Button(value="Install", variant="primary") - intall_result = gr.HTML(elem_id="extension_install_result") + install_button = gr.Button(value="Install", variant="primary") + install_result = gr.HTML(elem_id="extension_install_result") - intall_button.click( + install_button.click( fn=modules.ui.wrap_gradio_call(install_extension_from_url, extra_outputs=[gr.update()]), inputs=[install_dirname, install_url], - outputs=[extensions_table, intall_result], + outputs=[extensions_table, install_result], ) return ui diff --git a/style.css b/style.css index 859c3933..dfef0dc5 100644 --- a/style.css +++ b/style.css @@ -532,16 +532,16 @@ img2maskimg, #img2maskimg > .h-60, #img2maskimg > .h-60 > div, #img2maskimg > .h /* Extensions */ -#extensions{ +#tab_extensions table{ border-collapse: collapse; } -#extensions td, #extensions th{ +#tab_extensions table td, #tab_extensions table th{ border: 1px solid #ccc; padding: 0.25em 0.5em; } -#extensions input[type="checkbox"]{ +#tab_extensions table input[type="checkbox"]{ margin-right: 0.5em; } @@ -549,6 +549,9 @@ img2maskimg, #img2maskimg > .h-60, #img2maskimg > .h-60 > div, #img2maskimg > .h max-width: 16em; } +#tab_extensions input[disabled="disabled"]{ + opacity: 0.5; +} /* The following handles localization for right-to-left (RTL) languages like Arabic. The rtl media type will only be activated by the logic in javascript/localization.js. -- cgit v1.2.3 From 95c6308ccd2e075d1fb804f5b98a4f0b07b87b7d Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Wed, 2 Nov 2022 09:47:53 +0300 Subject: switch to gradio 3.8 --- javascript/progressbar.js | 30 ++++++++++++++++++++++++------ modules/ui.py | 5 ++--- requirements.txt | 2 +- requirements_versions.txt | 2 +- style.css | 10 ++++++++++ 5 files changed, 38 insertions(+), 11 deletions(-) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 7a05726e..671fde34 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -3,8 +3,21 @@ global_progressbars = {} galleries = {} galleryObservers = {} +// this tracks laumnches of window.setTimeout for progressbar to prevent starting a new timeout when the previous is still running +timeoutIds = {} + function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip, id_interrupt, id_preview, id_gallery){ - var progressbar = gradioApp().getElementById(id_progressbar) + // gradio 3.8's enlightened approach allows them to create two nested div elements inside each other with same id + // every time you use gr.HTML(elem_id='xxx'), so we handle this here + var progressbar = gradioApp().querySelector("#"+id_progressbar+" #"+id_progressbar) + var progressbarParent + if(progressbar){ + progressbarParent = gradioApp().querySelector("#"+id_progressbar) + } else{ + progressbar = gradioApp().getElementById(id_progressbar) + progressbarParent = null + } + var skip = id_skip ? gradioApp().getElementById(id_skip) : null var interrupt = gradioApp().getElementById(id_interrupt) @@ -26,18 +39,26 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip global_progressbars[id_progressbar] = progressbar var mutationObserver = new MutationObserver(function(m){ + if(timeoutIds[id_part]) return; + preview = gradioApp().getElementById(id_preview) gallery = gradioApp().getElementById(id_gallery) if(preview != null && gallery != null){ preview.style.width = gallery.clientWidth + "px" preview.style.height = gallery.clientHeight + "px" + if(progressbarParent) progressbar.style.width = progressbarParent.clientWidth + "px" //only watch gallery if there is a generation process going on check_gallery(id_gallery); var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0; - if(!progressDiv){ + if(progressDiv){ + timeoutIds[id_part] = window.setTimeout(function() { + timeoutIds[id_part] = null + requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt) + }, 500) + } else{ if (skip) { skip.style.display = "none" } @@ -47,13 +68,10 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip if (galleryObservers[id_gallery]) { galleryObservers[id_gallery].disconnect(); galleries[id_gallery] = null; - } + } } - - } - window.setTimeout(function() { requestMoreProgress(id_part, id_progressbar_span, id_skip, id_interrupt) }, 500) }); mutationObserver.observe( progressbar, { childList:true, subtree:true }) } diff --git a/modules/ui.py b/modules/ui.py index a94f46ea..45cd8c3f 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -1572,8 +1572,7 @@ def create_ui(wrap_gradio_gpu_call): reload_script_bodies.click( fn=reload_scripts, inputs=[], - outputs=[], - _js='function(){}' + outputs=[] ) def request_restart(): @@ -1585,7 +1584,7 @@ def create_ui(wrap_gradio_gpu_call): fn=request_restart, inputs=[], outputs=[], - _js='function(){restart_reload()}' + _js='restart_reload' ) if column is not None: diff --git a/requirements.txt b/requirements.txt index a53522f3..79e8b7c6 100644 --- a/requirements.txt +++ b/requirements.txt @@ -4,7 +4,7 @@ fairscale==0.4.4 fonts font-roboto gfpgan -gradio==3.5 +gradio==3.8 invisible-watermark numpy omegaconf diff --git a/requirements_versions.txt b/requirements_versions.txt index 41f2501f..7bd16712 100644 --- a/requirements_versions.txt +++ b/requirements_versions.txt @@ -2,7 +2,7 @@ transformers==4.19.2 diffusers==0.3.0 basicsr==1.4.2 gfpgan==1.3.8 -gradio==3.5 +gradio==3.8 numpy==1.23.3 Pillow==9.2.0 realesrgan==0.3.0 diff --git a/style.css b/style.css index dfef0dc5..e53079e0 100644 --- a/style.css +++ b/style.css @@ -260,6 +260,16 @@ input[type="range"]{ #txt2img_negative_prompt, #img2img_negative_prompt{ } +/* gradio 3.8 adds opacity to progressbar which makes it blink; disable it here */ +.transition.opacity-20 { + opacity: 1 !important; +} + +/* more gradio's garbage cleanup */ +.min-h-\[4rem\] { + min-height: unset !important; +} + #txt2img_progressbar, #img2img_progressbar, #ti_progressbar{ position: absolute; z-index: 1000; -- cgit v1.2.3