diff --git a/README.md b/README.md index 3cb4efb9b..749a39f6c 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,10 @@ A browser interface based on Gradio library for Stable Diffusion. ## Installation and Running Make sure the required [dependencies](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Dependencies) are met and follow the instructions available for both [NVidia](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Install-and-Run-on-NVidia-GPUs) (recommended) and [AMD](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Install-and-Run-on-AMD-GPUs) GPUs. -Alternatively, use [Google Colab](https://colab.research.google.com/drive/1Iy-xW9t1-OQWhb0hNxueGij8phCyluOh). +Alternatively, use Google Colab: + +- [Colab, maintained by Akaibu#9379](https://colab.research.google.com/drive/1kw3egmSn-KgWsikYvOMjJkVDsPLjEMzl) +- [Colab, original by me, outdated](https://colab.research.google.com/drive/1Iy-xW9t1-OQWhb0hNxueGij8phCyluOh). ### Automatic Installation on Windows 1. Install [Python 3.10.6](https://www.python.org/downloads/windows/), checking "Add Python to PATH" diff --git a/javascript/progressbar.js b/javascript/progressbar.js index ce0f0df35..afd384d33 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -1,53 +1,52 @@ // code related to showing and updating progressbar shown as the image is being made -global_progressbar = null +global_progressbars = {} -onUiUpdate(function(){ - progressbar = gradioApp().getElementById('progressbar') - progressDiv = gradioApp().querySelectorAll('#progressSpan').length > 0; - interrupt = gradioApp().getElementById('interrupt') - if(progressbar!= null && progressbar != global_progressbar){ - global_progressbar = progressbar +function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_interrupt, id_preview, id_gallery){ + var progressbar = gradioApp().getElementById(id_progressbar) + var interrupt = gradioApp().getElementById(id_interrupt) + if(progressbar!= null && progressbar != global_progressbars[id_progressbar]){ + global_progressbars[id_progressbar] = progressbar var mutationObserver = new MutationObserver(function(m){ - txt2img_preview = gradioApp().getElementById('txt2img_preview') - txt2img_gallery = gradioApp().getElementById('txt2img_gallery') - img2img_preview = gradioApp().getElementById('img2img_preview') - img2img_gallery = gradioApp().getElementById('img2img_gallery') + preview = gradioApp().getElementById(id_preview) + gallery = gradioApp().getElementById(id_gallery) - if(txt2img_preview != null && txt2img_gallery != null){ - txt2img_preview.style.width = txt2img_gallery.clientWidth + "px" - txt2img_preview.style.height = txt2img_gallery.clientHeight + "px" + if(preview != null && gallery != null){ + preview.style.width = gallery.clientWidth + "px" + preview.style.height = gallery.clientHeight + "px" + + var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0; if(!progressDiv){ interrupt.style.display = "none" } } - if(img2img_preview != null && img2img_gallery != null){ - img2img_preview.style.width = img2img_gallery.clientWidth + "px" - img2img_preview.style.height = img2img_gallery.clientHeight + "px" - if(!progressDiv){ - interrupt.style.display = "none" - } - } - - window.setTimeout(requestMoreProgress, 500) + window.setTimeout(function(){ requestMoreProgress(id_part, id_progressbar_span, id_interrupt) }, 500) }); mutationObserver.observe( progressbar, { childList:true, subtree:true }) } +} + +onUiUpdate(function(){ + check_progressbar('txt2img', 'txt2img_progressbar', 'txt2img_progress_span', 'txt2img_interrupt', 'txt2img_preview', 'txt2img_gallery') + check_progressbar('img2img', 'img2img_progressbar', 'img2img_progress_span', 'img2img_interrupt', 'img2img_preview', 'img2img_gallery') }) -function requestMoreProgress(){ - btn = gradioApp().getElementById("check_progress"); + +function requestMoreProgress(id_part, id_progressbar_span, id_interrupt){ + btn = gradioApp().getElementById(id_part+"_check_progress"); if(btn==null) return; btn.click(); - progressDiv = gradioApp().querySelectorAll('#progressSpan').length > 0; - if(progressDiv){ + var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0; + var interrupt = gradioApp().getElementById(id_interrupt) + console.log(progressDiv, interrupt) + if(progressDiv && interrupt){ interrupt.style.display = "block" } } -function requestProgress(){ - btn = gradioApp().getElementById("check_progress_initial"); +function requestProgress(id_part){ + btn = gradioApp().getElementById(id_part+"_check_progress_initial"); if(btn==null) return; btn.click(); diff --git a/javascript/ui.js b/javascript/ui.js index 4944800bb..22ef55082 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -79,13 +79,13 @@ function create_submit_args(args){ } function submit(){ - requestProgress() + requestProgress('txt2img') return create_submit_args(arguments) } function submit_img2img(){ - requestProgress() + requestProgress('img2img') res = create_submit_args(arguments) diff --git a/modules/ui.py b/modules/ui.py index 1cbff1fdb..bad539d81 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -166,7 +166,7 @@ def wrap_gradio_call(func): return f -def check_progress_call(): +def check_progress_call(id_part): if shared.state.job_count == 0: return "", gr_show(False), gr_show(False) @@ -200,15 +200,15 @@ def check_progress_call(): else: preview_visibility = gr_show(True) - return f"
{progressbar}
", preview_visibility, image + return f"{progressbar}
", preview_visibility, image -def check_progress_call_initial(): +def check_progress_call_initial(id_part): shared.state.job_count = -1 shared.state.current_latent = None shared.state.current_image = None - return check_progress_call() + return check_progress_call(id_part) def roll_artist(prompt): @@ -236,8 +236,7 @@ def add_style(name: str, prompt: str, negative_prompt: str): # reserialize all styles every time we save them shared.prompt_styles.save_styles(shared.styles_filename) - update = {"visible": True, "choices": list(shared.prompt_styles.styles), "__type__": "update"} - return [update, update, update, update] + return [gr.Dropdown.update(visible=True, choices=list(shared.prompt_styles.styles)) for _ in range(4)] def apply_styles(prompt, prompt_neg, style1_name, style2_name): @@ -329,6 +328,8 @@ def connect_reuse_seed(seed: gr.Number, reuse_seed: gr.Button, generation_info: def create_toprow(is_img2img): + id_part = "img2img" if is_img2img else "txt2img" + with gr.Row(elem_id="toprow"): with gr.Column(scale=4): with gr.Row(): @@ -337,19 +338,20 @@ def create_toprow(is_img2img): prompt = gr.Textbox(label="Prompt", elem_id="prompt", show_label=False, placeholder="Prompt", lines=2) roll = gr.Button('Roll', elem_id="roll", visible=len(shared.artist_db.artists) > 0) - with gr.Column(scale=1, elem_id="style_pos_col"): - prompt_style = gr.Dropdown(label="Style 1", elem_id="style_index", choices=[k for k, v in shared.prompt_styles.styles.items()], value=next(iter(shared.prompt_styles.styles.keys())), visible=len(shared.prompt_styles.styles) > 1) + + with gr.Column(scale=10, elem_id="style_pos_col"): + prompt_style = gr.Dropdown(label="Style 1", elem_id=f"{id_part}_style_index", choices=[k for k, v in shared.prompt_styles.styles.items()], value=next(iter(shared.prompt_styles.styles.keys())), visible=len(shared.prompt_styles.styles) > 1) with gr.Row(): with gr.Column(scale=8): negative_prompt = gr.Textbox(label="Negative prompt", elem_id="negative_prompt", show_label=False, placeholder="Negative prompt", lines=2) with gr.Column(scale=1, elem_id="style_neg_col"): - prompt_style2 = gr.Dropdown(label="Style 2", elem_id="style2_index", choices=[k for k, v in shared.prompt_styles.styles.items()], value=next(iter(shared.prompt_styles.styles.keys())), visible=len(shared.prompt_styles.styles) > 1) + prompt_style2 = gr.Dropdown(label="Style 2", elem_id=f"{id_part}_style2_index", choices=[k for k, v in shared.prompt_styles.styles.items()], value=next(iter(shared.prompt_styles.styles.keys())), visible=len(shared.prompt_styles.styles) > 1) with gr.Column(scale=1): with gr.Row(): - interrupt = gr.Button('Interrupt', elem_id="interrupt") + interrupt = gr.Button('Interrupt', elem_id=f"{id_part}_interrupt") submit = gr.Button('Generate', elem_id="generate", variant='primary') interrupt.click( @@ -369,18 +371,18 @@ def create_toprow(is_img2img): return prompt, roll, prompt_style, negative_prompt, prompt_style2, submit, interrogate, prompt_style_apply, save_style -def setup_progressbar(progressbar, preview): - check_progress = gr.Button('Check progress', elem_id="check_progress", visible=False) +def setup_progressbar(progressbar, preview, id_part): + check_progress = gr.Button('Check progress', elem_id=f"{id_part}_check_progress", visible=False) check_progress.click( - fn=check_progress_call, + fn=lambda: check_progress_call(id_part), show_progress=False, inputs=[], outputs=[progressbar, preview, preview], ) - check_progress_initial = gr.Button('Check progress (first)', elem_id="check_progress_initial", visible=False) + check_progress_initial = gr.Button('Check progress (first)', elem_id=f"{id_part}_check_progress_initial", visible=False) check_progress_initial.click( - fn=check_progress_call_initial, + fn=lambda: check_progress_call_initial(id_part), show_progress=False, inputs=[], outputs=[progressbar, preview, preview], @@ -392,14 +394,14 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo): txt2img_prompt, roll, txt2img_prompt_style, txt2img_negative_prompt, txt2img_prompt_style2, submit, _, txt2img_prompt_style_apply, txt2img_save_style = create_toprow(is_img2img=False) dummy_component = gr.Label(visible=False) - with gr.Row(elem_id='progressRow'): - with gr.Column(scale=1): - columnEmpty = "Empty" + with gr.Row(elem_id='txt2img_progress_row'): + with gr.Column(scale=1): + pass - with gr.Column(scale=1): - progressbar = gr.HTML(elem_id="progressbar") + with gr.Column(scale=1): + progressbar = gr.HTML(elem_id="txt2img_progressbar") txt2img_preview = gr.Image(elem_id='txt2img_preview', visible=False) - setup_progressbar(progressbar, txt2img_preview) + setup_progressbar(progressbar, txt2img_preview, 'txt2img') with gr.Row().style(equal_height=False): with gr.Column(variant='panel'): @@ -518,14 +520,14 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo): with gr.Blocks(analytics_enabled=False) as img2img_interface: img2img_prompt, roll, img2img_prompt_style, img2img_negative_prompt, img2img_prompt_style2, submit, img2img_interrogate, img2img_prompt_style_apply, img2img_save_style = create_toprow(is_img2img=True) - with gr.Row(elem_id='progressRow'): - with gr.Column(scale=1): - columnEmpty = "Empty" + with gr.Row(elem_id='img2img_progress_row'): + with gr.Column(scale=1): + pass - with gr.Column(scale=1): - progressbar = gr.HTML(elem_id="progressbar") + with gr.Column(scale=1): + progressbar = gr.HTML(elem_id="img2img_progressbar") img2img_preview = gr.Image(elem_id='img2img_preview', visible=False) - setup_progressbar(progressbar, img2img_preview) + setup_progressbar(progressbar, img2img_preview, 'img2img') with gr.Row().style(equal_height=False): with gr.Column(variant='panel'): @@ -536,7 +538,6 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo): with gr.TabItem('Inpaint'): init_img_with_mask = gr.Image(label="Image for inpainting with mask", show_label=False, elem_id="img2maskimg", source="upload", interactive=True, type="pil", tool="sketch", image_mode="RGBA") - init_img_with_mask_comment = gr.HTML(elem_id="mask_bug_info", value="if the editor shows ERROR, switch to another tab and back, then to \"Upload mask\" mode above and back") init_img_inpaint = gr.Image(label="Image for img2img", show_label=False, source="upload", interactive=True, type="pil", visible=False) init_mask_inpaint = gr.Image(label="Mask", source="upload", interactive=True, type="pil", visible=False) @@ -597,7 +598,6 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo): img2img_send_to_img2img = gr.Button('Send to img2img') img2img_send_to_inpaint = gr.Button('Send to inpaint') img2img_send_to_extras = gr.Button('Send to extras') - img2img_save_style = gr.Button('Save prompt as style') with gr.Group(): html_info = gr.HTML() @@ -608,16 +608,13 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo): mask_mode.change( lambda mode, img: { - #init_img_with_mask: gr.Image.update(visible=mode == 0, value=img["image"]), init_img_with_mask: gr_show(mode == 0), - init_img_with_mask_comment: gr_show(mode == 0), init_img_inpaint: gr_show(mode == 1), init_mask_inpaint: gr_show(mode == 1), }, inputs=[mask_mode, init_img_with_mask], outputs=[ init_img_with_mask, - init_img_with_mask_comment, init_img_inpaint, init_mask_inpaint, ], @@ -938,18 +935,6 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo): outputs=[text_settings], ) - tabs.change( - fn=lambda x: x, - inputs=[init_img_with_mask], - outputs=[init_img_with_mask], - ) - - tabs_img2img_mode.change( - fn=lambda x: x, - inputs=[init_img_with_mask], - outputs=[init_img_with_mask], - ) - send_to_img2img.click( fn=lambda x: image_from_url_text(x), _js="extract_image_from_gallery_img2img", diff --git a/requirements_versions.txt b/requirements_versions.txt index 9372cb69a..505498e78 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.3.1 +gradio==3.4b3 numpy==1.23.3 Pillow==9.2.0 realesrgan==0.3.0 diff --git a/style.css b/style.css index de5f94a60..0746a6595 100644 --- a/style.css +++ b/style.css @@ -89,7 +89,7 @@ min-width: 8em !important; } -#style_index, #style2_index{ +#txt2img_style_index, #txt2img_style2_index, #img2img_style_index, #img2img_style2_index{ margin-top: 1em; } @@ -210,7 +210,7 @@ input[type="range"]{ #txt2img_negative_prompt, #img2img_negative_prompt{ } -#progressbar{ +#txt2img_progressbar, #img2img_progressbar{ position: absolute; z-index: 1000; right: 0; @@ -219,7 +219,7 @@ input[type="range"]{ display: block; } -#progressRow{ +#txt2img_progress_row, #img2img_progress_row{ margin-bottom: 10px; margin-top: -18px; } @@ -354,7 +354,7 @@ input[type="range"]{ display:none } -#interrupt{ +#txt2img_interrupt, #img2img_interrupt{ position: absolute; width: 100%; height: 72px;