From 364df7036ed7d0cda0c373dae13c182716129e12 Mon Sep 17 00:00:00 2001 From: Vladimir Mandic Date: Thu, 1 Jun 2023 11:43:28 -0400 Subject: [PATCH] redo progressbar --- extensions-builtin/sd-webui-controlnet | 2 +- javascript/black-orange.css | 2 +- javascript/extensions.js | 4 - javascript/progressbar.js | 114 +++++++++++-------------- javascript/style.css | 4 +- javascript/textualInversion.js | 3 +- javascript/ui.js | 25 ++---- modules/img2img.py | 12 +++ modules/lora | 2 +- modules/processing.py | 10 ++- modules/progress.py | 10 ++- modules/ui.py | 4 +- modules/ui_common.py | 2 +- 13 files changed, 88 insertions(+), 106 deletions(-) diff --git a/extensions-builtin/sd-webui-controlnet b/extensions-builtin/sd-webui-controlnet index 7b707dc1f..4f0f26b7c 160000 --- a/extensions-builtin/sd-webui-controlnet +++ b/extensions-builtin/sd-webui-controlnet @@ -1 +1 @@ -Subproject commit 7b707dc1f03c3070f8a506ff70a2b68173d57bb5 +Subproject commit 4f0f26b7c6239e1d816f24516c4a654e6efe94c3 diff --git a/javascript/black-orange.css b/javascript/black-orange.css index c45c0f9a5..a42ecdaef 100644 --- a/javascript/black-orange.css +++ b/javascript/black-orange.css @@ -75,7 +75,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } #txt2img_prompt, #txt2img_neg_prompt, #img2img_prompt, #img2img_neg_prompt { background-color: black; box-shadow: 4px 4px 4px 0px #333333 !important; } #txt2img_prompt > label > textarea, #txt2img_neg_prompt > label > textarea, #img2img_prompt > label > textarea, #img2img_neg_prompt > label > textarea { font-size: 1.2rem; } #img2img_settings { min-width: calc(2 * var(--left-column)); max-width: calc(2 * var(--left-column)); background-color: #111111; padding-top: 16px; } -#interrogate, #deepbooru { margin: 16px 0px 16px 0px; max-width: 100px; max-height: 74px; font-weight: normal; font-size: 14px; } +#interrogate, #deepbooru { margin: 0 0px 10px 0px; max-width: 80px; max-height: 80px; font-weight: normal; font-size: 0.95em; } #lightboxModal { background-color: rgba(20, 20, 20, 0.8) } #quicksettings .gr-button-tool { font-size: 1.6rem; box-shadow: none; margin-left: -20px; margin-top: -2px; height: 2.4em; } #quicksettings > div, #quicksettings > fieldset { min-width: 24em; max-width: 26em; line-height: 2em; } diff --git a/javascript/extensions.js b/javascript/extensions.js index d59a7d059..b827299f8 100644 --- a/javascript/extensions.js +++ b/javascript/extensions.js @@ -16,11 +16,7 @@ function extensions_check(info, extensions_disabled_list, search_text, sort_colu gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach((x) => { if (x.name.startsWith('enable_') && !x.checked) disable.push(x.name.substring(7)); }); - // gradioApp().querySelectorAll('#extensions .extension_status').forEach((x) => { - // x.innerHTML = 'Loading...'; - // }); const id = randomId(); - // requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, null, null, false); return [id, JSON.stringify(disable), search_text, sort_column]; } diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 108f36ea0..404645f4b 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -1,4 +1,6 @@ /* global opts */ +let lastState = {}; + function rememberGallerySelection(id_gallery) {} function getGallerySelectedIndex(id_gallery) {} @@ -36,98 +38,80 @@ function formatTime(secs) { return `${Math.floor(secs)}s`; } -function setTitle(progress) { - let title = 'SD.Next'; - if (progress) title += ` ${progress.split(' ')[0].trim()}`; - if (document.title != title) document.title = title; +function checkPaused(state) { + lastState.paused = state ? !state : !lastState.paused; + document.getElementById('txt2img_pause').innerText = lastState.paused ? 'Resume' : 'Pause' + document.getElementById('img2img_pause').innerText = lastState.paused ? 'Resume' : 'Pause' +} + +function setProgress(res) { + elements = ['txt2img_generate', 'img2img_generate', 'extras_generate'] + perc = res ? `${Math.round((res?.progress || 0) * 100.0)}%` : '' + eta = res?.paused ? ' Paused' : ` ETA: ${Math.round(res?.eta || 0)}s`; + document.title = 'SD.Next ' + perc; + for (elId of elements) { + el = document.getElementById(elId); + el.innerText = res + ? perc + eta + : 'Generate'; + el.style.background = res + ? `linear-gradient(to right, var(--primary-500) 0%, var(--primary-800) ${perc}, var(--neutral-700) ${perc})` + : 'var(--button-primary-background-fill)' + } } function randomId() { return `task(${Math.random().toString(36).slice(2, 7)}${Math.random().toString(36).slice(2, 7)}${Math.random().toString(36).slice(2, 7)})`; } -// starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and -// preview inside gallery element. Cleans up all created stuff when the task is over and calls atEnd. -// calls onProgress every time there is a progress update -function requestProgress(id_task, progressbarContainer, gallery, atEnd = null, onProgress = null, once = false) { +// starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and preview inside gallery element +// Cleans up all created stuff when the task is over and calls atEnd. calls onProgress every time there is a progress update +function requestProgress(id_task, gallery, atEnd = null, onProgress = null, once = false) { + localStorage.setItem('task', id_task); let hasStarted = false; const dateStart = new Date(); const prevProgress = null; - const parentProgressbar = progressbarContainer.parentNode; const parentGallery = gallery ? gallery.parentNode : null; - const divProgress = document.createElement('div'); - divProgress.className = 'progressDiv'; - divProgress.id = 'progressbar'; - divProgress.style.display = opts.show_progressbar ? 'block' : 'none'; - const divInner = document.createElement('div'); - divInner.className = 'progress'; - divProgress.appendChild(divInner); - parentProgressbar.insertBefore(divProgress, progressbarContainer); - localStorage.setItem('task', id_task); let livePreview; + const img = new Image(); if (parentGallery) { livePreview = document.createElement('div'); livePreview.className = 'livePreview'; parentGallery.insertBefore(livePreview, gallery); + const rect = gallery.getBoundingClientRect(); + if (rect.width) { + livePreview.style.width = `${rect.width}px`; + livePreview.style.height = `${rect.height}px`; + } + img.onload = function () { + livePreview.appendChild(img); + if (livePreview.childElementCount > 2) livePreview.removeChild(livePreview.firstElementChild); + }; } - const removeProgressBar = function () { + const done = function () { console.debug('task end: ', id_task); localStorage.removeItem('task'); - setTitle(''); - if (divProgress) parentProgressbar.removeChild(divProgress); - if (parentGallery) parentGallery.removeChild(livePreview); + setProgress(); + if (parentGallery && livePreview) parentGallery.removeChild(livePreview); + checkPaused(true); if (atEnd) atEnd(); }; - const fun = function (id_task, id_live_preview) { + const start = function (id_task, id_live_preview) { request('./internal/progress', { id_task, id_live_preview }, (res) => { + lastState = res; const elapsedFromStart = (new Date() - dateStart) / 1000; - if (res.completed) { - removeProgressBar(); - return; - } - var rect = progressbarContainer.getBoundingClientRect(); - if (rect.width) divProgress.style.width = `${rect.width}px`; - progressText = ''; - divInner.style.width = `${(res.progress || 0) * 100.0}%`; - divInner.style.background = res.progress ? '' : 'transparent'; - if (res.progress > 0) progressText = `${((res.progress || 0) * 100.0).toFixed(0)}%`; - if (res.eta) progressText += ` ETA: ${formatTime(res.eta)}`; - setTitle(progressText); - if (res.textinfo && res.textinfo.indexOf('\n') == -1) progressText = `${res.textinfo} ${progressText}`; - divInner.textContent = progressText; hasStarted |= res.active; - if (!res.active && (hasStarted || once)) { - removeProgressBar(); + if (res.completed || (!res.active && (hasStarted || once)) || (elapsedFromStart > 30 && !res.queued && res.progress == prevProgress)) { + done(); return; } - if (res.completed) { - removeProgressBar(); - return; - } - if (elapsedFromStart > 30 && !res.queued && res.progress == prevProgress) { - removeProgressBar(); - return; - } - if (res.live_preview && gallery) { - var rect = gallery.getBoundingClientRect(); - if (rect.width) { - livePreview.style.width = `${rect.width}px`; - livePreview.style.height = `${rect.height}px`; - } - const img = new Image(); - img.onload = function () { - livePreview.appendChild(img); - if (livePreview.childElementCount > 2) livePreview.removeChild(livePreview.firstElementChild); - }; - img.src = res.live_preview; - } + setProgress(res); + if (res.live_preview && gallery) img.src = res.live_preview; if (onProgress) onProgress(res); - setTimeout(() => fun(id_task, res.id_live_preview), opts.live_preview_refresh_period || 250); - }, () => { - removeProgressBar(); - }); + setTimeout(() => start(id_task, res.id_live_preview), opts.live_preview_refresh_period || 250); + }, done); }; - fun(id_task, 0); + start(id_task, 0); } diff --git a/javascript/style.css b/javascript/style.css index 41dbd25a1..89e4192ac 100644 --- a/javascript/style.css +++ b/javascript/style.css @@ -102,9 +102,9 @@ footer { display: none !important; } #txt2img_gallery img, #img2img_gallery img, #extras_gallery img { object-fit: scale-down; width: -webkit-fill-available !important; } #txt2img_actions_column, #img2img_actions_column { gap: 0.5em; } -#txt2img_generate_line1 > button, #img2img_generate_line1 > button { height: 2.2em; line-height: 0; } +#txt2img_generate_box > button, #img2img_generate_box > button { height: 2.2em; line-height: 0; } +#txt2img_generate_line2, #img2img_generate_line2 { display: flex; } #txt2img_generate_line2 > button, #img2img_generate_line2 > button, #extras_generate_box > button { height: 2.2em; line-height: 0; min-width: unset; display: block !important; } -#txt2img_generate_line2 { display: flex; } #txt2img_tools > div, #img2img_tools > div { justify-content: space-around; margin-top: 0.5em; margin-bottom: 0em; } #txt2img_tools > div > button, #img2img_tools > div > button { scale: 120%; } #refresh_txt2img_styles, #refresh_img2img_styles { height: 2.46em; margin-left: -8px; } diff --git a/javascript/textualInversion.js b/javascript/textualInversion.js index db73b03d9..b026474af 100644 --- a/javascript/textualInversion.js +++ b/javascript/textualInversion.js @@ -2,8 +2,7 @@ function start_training_textual_inversion() { gradioApp().querySelector('#ti_error').innerHTML='' var id = randomId() const onProgress = (progress) => gradioApp().getElementById('ti_progress').innerHTML = progress.textinfo; - // requestProgress(id_task, progressbarContainer, gallery, atEnd = null, onProgress = null, once = false) { - requestProgress(id, gradioApp().getElementById('ti_output'), gradioApp().getElementById('ti_gallery'), null, onProgress, false) + requestProgress(id, gradioApp().getElementById('ti_gallery'), null, onProgress, false) var res = args_to_array(arguments) res[0] = id return res diff --git a/javascript/ui.js b/javascript/ui.js index 24c623fc4..fe0e06a8a 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -118,20 +118,11 @@ function create_submit_args(args) { return res; } -function showSubmitButtons(tabname, show) { - // gradioApp().getElementById(`${tabname}_interrupt`).style.display = show ? 'none' : 'block'; - // gradioApp().getElementById(`${tabname}_skip`).style.display = show ? 'none' : 'block'; - // gradioApp().getElementById(tabname+'_interrupt').style.display = "block" - // gradioApp().getElementById(tabname+'_skip').style.display = "block" -} - function submit(...args) { console.log('submit txt2img:', args); rememberGallerySelection('txt2img_gallery'); - showSubmitButtons('txt2img', false); const id = randomId(); - const atEnd = () => showSubmitButtons('txt2img', true); - requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), atEnd); + requestProgress(id, gradioApp().getElementById('txt2img_gallery')); const res = create_submit_args(args); res[0] = id; return res; @@ -140,10 +131,8 @@ function submit(...args) { function submit_img2img(...args) { console.log('submit img2img:', args); rememberGallerySelection('img2img_gallery'); - showSubmitButtons('img2img', false); const id = randomId(); - const atEnd = () => showSubmitButtons('img2img', true); - requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), atEnd); + requestProgress(id, gradioApp().getElementById('img2img_gallery')); const res = create_submit_args(args); res[0] = id; res[1] = get_tab_index('mode_img2img'); @@ -152,7 +141,6 @@ function submit_img2img(...args) { function modelmerger(...args) { const id = randomId(); - requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null); const res = create_submit_args(args); res[0] = id; return res; @@ -429,17 +417,14 @@ function reconnect_ui() { const api_logo = Array.from(gradioApp().querySelectorAll('img')).filter((el) => el?.src?.endsWith('api-logo.svg')); if (api_logo.length > 0) api_logo[0].remove(); - const el1 = gradioApp().getElementById('txt2img_gallery_container'); - const el2 = gradioApp().getElementById('txt2img_gallery'); + const gallery = gradioApp().getElementById('txt2img_gallery'); const task_id = localStorage.getItem('task'); - if (!el1 || !el2) return; + if (!gallery) return; clearInterval(start_check); if (task_id) { console.debug('task check:', task_id); rememberGallerySelection('txt2img_gallery'); - showSubmitButtons('txt2img', false); - const atEnd = () => showSubmitButtons('txt2img', true); - requestProgress(task_id, el1, el2, atEnd, null, true); + requestProgress(task_id, gallery, null, null, true); } const sd_model = gradioApp().getElementById('setting_sd_model_checkpoint'); diff --git a/modules/img2img.py b/modules/img2img.py index 0e0b9bf8c..f1f77c016 100644 --- a/modules/img2img.py +++ b/modules/img2img.py @@ -82,17 +82,25 @@ def img2img(id_task: str, mode: int, prompt: str, negative_prompt: str, prompt_s is_batch = mode == 5 if mode == 0: # img2img + if init_img is None: + return image = init_img.convert("RGB") mask = None elif mode == 1: # img2img sketch + if sketch is None: + return image = sketch.convert("RGB") mask = None elif mode == 2: # inpaint + if init_img_with_mask is None: + return image, mask = init_img_with_mask["image"], init_img_with_mask["mask"] alpha_mask = ImageOps.invert(image.split()[-1]).convert('L').point(lambda x: 255 if x > 0 else 0, mode='1') mask = ImageChops.lighter(alpha_mask, mask.convert('L')).convert('L') image = image.convert("RGB") elif mode == 3: # inpaint sketch + if inpaint_color_sketch is None: + return image = inpaint_color_sketch orig = inpaint_color_sketch_orig or inpaint_color_sketch pred = np.any(np.array(image) != np.array(orig), axis=-1) @@ -102,6 +110,8 @@ def img2img(id_task: str, mode: int, prompt: str, negative_prompt: str, prompt_s image = Image.composite(image.filter(blur), orig, mask.filter(blur)) image = image.convert("RGB") elif mode == 4: # inpaint upload mask + if init_img_inpaint is None: + return image = init_img_inpaint mask = init_mask_inpaint else: @@ -113,6 +123,8 @@ def img2img(id_task: str, mode: int, prompt: str, negative_prompt: str, prompt_s assert image, "Can't scale by because no image is selected" width = int(image.width * scale_by) height = int(image.height * scale_by) + else: + return assert 0. <= denoising_strength <= 1., 'can only work with strength in [0.0, 1.0]' diff --git a/modules/lora b/modules/lora index 8a5e3904a..5931948ad 160000 --- a/modules/lora +++ b/modules/lora @@ -1 +1 @@ -Subproject commit 8a5e3904a07362bf380b27c65241849b57502f91 +Subproject commit 5931948adbf0f76017ecc13e716c68a690097c16 diff --git a/modules/processing.py b/modules/processing.py index 60fd93a2c..3e0ed9fd5 100644 --- a/modules/processing.py +++ b/modules/processing.py @@ -926,9 +926,14 @@ class StableDiffusionProcessingTxt2Img(StableDiffusionProcessing): shared.state.nextjob() img2img_sampler_name = self.sampler_name force_latent_upscaler = shared.opts.data.get('xyz_fallback_sampler') - if self.sampler_name in ['PLMS']: - img2img_sampler_name = force_latent_upscaler if force_latent_upscaler != 'None' else shared.opts.fallback_sampler # PLMS does not support img2img, use fallback instead + if force_latent_upscaler != 'None' and force_latent_upscaler != 'PLMS': + img2img_sampler_name = force_latent_upscaler + elif shared.opts.fallback_sampler != 'PLMS': + img2img_sampler_name = shared.opts.fallback_sampler + else: + img2img_sampler_name = 'UniPC' self.sampler = sd_samplers.create_sampler(img2img_sampler_name, self.sd_model) + print('HERE', force_latent_upscaler, img2img_sampler_name, self.sampler) samples = samples[:, :, self.truncate_y//2:samples.shape[2]-(self.truncate_y+1)//2, self.truncate_x//2:samples.shape[3]-(self.truncate_x+1)//2] noise = create_random_tensors(samples.shape[1:], seeds=seeds, subseeds=subseeds, subseed_strength=subseed_strength, p=self) # GC now before running the next img2img to prevent running out of memory @@ -942,7 +947,6 @@ class StableDiffusionProcessingTxt2Img(StableDiffusionProcessing): # clean patch done by first pass. (clobbering the first patch might be fine? this might be excessive) tomesd.remove_patch(self.sd_model) log.debug('Temporarily removed token merging optimizations in preparation for next pass') - sd_models.apply_token_merging(sd_model=self.sd_model, hr=True) log.debug('Applied token merging for high-res pass') samples = self.sampler.sample_img2img(self, samples, noise, conditioning, unconditional_conditioning, steps=self.hr_second_pass_steps or self.steps, image_conditioning=image_conditioning) diff --git a/modules/progress.py b/modules/progress.py index 09e282353..a6fb504a5 100644 --- a/modules/progress.py +++ b/modules/progress.py @@ -42,9 +42,10 @@ class ProgressRequest(BaseModel): id_live_preview: int = Field(default=-1, title="Live preview image ID", description="id of last received last preview image") -class ProgressResponse(BaseModel): +class InternalProgressResponse(BaseModel): active: bool = Field(title="Whether the task is being worked on right now") queued: bool = Field(title="Whether the task is in queue") + paused: bool = Field(title="Whether the task is paused") completed: bool = Field(title="Whether the task has already finished") progress: float = Field(default=None, title="Progress", description="The progress with a range of 0 to 1") eta: float = Field(default=None, title="ETA in secs") @@ -54,15 +55,16 @@ class ProgressResponse(BaseModel): def setup_progress_api(app): - return app.add_api_route("/internal/progress", progressapi, methods=["POST"], response_model=ProgressResponse) + return app.add_api_route("/internal/progress", progressapi, methods=["POST"], response_model=InternalProgressResponse) def progressapi(req: ProgressRequest): active = req.id_task == current_task queued = req.id_task in pending_tasks completed = req.id_task in finished_tasks + paused = shared.state.paused if not active: - return ProgressResponse(active=active, queued=queued, completed=completed, id_live_preview=-1, textinfo="Queued..." if queued else "Waiting...") + return InternalProgressResponse(active=active, queued=queued, paused=paused, completed=completed, id_live_preview=-1, textinfo="Queued..." if queued else "Waiting...") progress = 0 job_count, job_no = shared.state.job_count, shared.state.job_no sampling_steps, sampling_step = shared.state.sampling_steps, shared.state.sampling_step @@ -88,4 +90,4 @@ def progressapi(req: ProgressRequest): live_preview = None else: live_preview = None - return ProgressResponse(active=active, queued=queued, completed=completed, progress=progress, eta=eta, live_preview=live_preview, id_live_preview=id_live_preview, textinfo=shared.state.textinfo) + return InternalProgressResponse(active=active, queued=queued, paused=paused, completed=completed, progress=progress, eta=eta, live_preview=live_preview, id_live_preview=id_live_preview, textinfo=shared.state.textinfo) diff --git a/modules/ui.py b/modules/ui.py index 788b0bef2..b0686d10f 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -237,7 +237,7 @@ def create_toprow(is_img2img): button_interrogate = gr.Button('Interrogate\nCLIP', elem_id="interrogate") button_deepbooru = gr.Button('Interrogate\nDeepBooru', elem_id="deepbooru") with gr.Column(scale=1, elem_id=f"{id_part}_actions_column"): - with gr.Row(elem_id=f"{id_part}_generate_line1"): + with gr.Row(elem_id=f"{id_part}_generate_box"): submit = gr.Button('Generate', elem_id=f"{id_part}_generate", variant='primary') with gr.Row(elem_id=f"{id_part}_generate_line2"): interrupt = gr.Button('Stop', elem_id=f"{id_part}_interrupt") @@ -245,7 +245,7 @@ def create_toprow(is_img2img): skip = gr.Button('Skip', elem_id=f"{id_part}_skip") skip.click(fn=lambda: modules.shared.state.skip(), inputs=[], outputs=[]) pause = gr.Button('Pause', elem_id=f"{id_part}_pause") - pause.click(fn=lambda: modules.shared.state.pause(), inputs=[], outputs=[]) + pause.click(fn=lambda: modules.shared.state.pause(), _js='checkPaused', inputs=[], outputs=[]) with gr.Row(elem_id=f"{id_part}_tools"): paste = ToolButton(value=paste_symbol, elem_id="paste") clear_prompt_button = ToolButton(value=clear_prompt_symbol, elem_id=f"{id_part}_clear_prompt") diff --git a/modules/ui_common.py b/modules/ui_common.py index e5582086d..c399be619 100644 --- a/modules/ui_common.py +++ b/modules/ui_common.py @@ -161,7 +161,7 @@ def create_output_panel(tabname, outdir): html_log = gr.HTML(elem_id=f'html_log_{tabname}') generation_info = gr.Textbox(visible=False, elem_id=f'generation_info_{tabname}') generation_info_button = gr.Button(visible=False, elem_id=f"{tabname}_generation_info_button") - generation_info_button.click(fn=update_generation_info, _js="function(x, y, z){ return [x, y, selected_gallery_index()] }", show_progress=False, + generation_info_button.click(fn=update_generation_info, _js="(x, y, z) => [x, y, selected_gallery_index()]", show_progress=False, inputs=[generation_info, html_info, html_info], outputs=[html_info, html_info], )