modernui updates

Signed-off-by: Vladimir Mandic <mandic00@live.com>
pull/4058/head
Vladimir Mandic 2025-07-22 10:07:17 -04:00
parent 34031f54d3
commit 36c356785e
11 changed files with 48 additions and 52 deletions

@ -1 +1 @@
Subproject commit e5bd127e4ce8c4a4478763ea82a0bcaf7dffb396 Subproject commit f3062d8da8b6ed8a1dbd3f1925d1bb8cf32442e2

View File

@ -413,13 +413,13 @@ async function fetchFilesWS(evt) { // fetch file-by-file list over websockets
let fragment = document.createDocumentFragment(); let fragment = document.createDocumentFragment();
ws.onmessage = (event) => { ws.onmessage = (event) => {
numFiles++;
t1 = performance.now(); t1 = performance.now();
const data = decodeURI(event.data).split('##F##'); const data = decodeURI(event.data).split('##F##');
if (data[0] === '#END#') { if (data[0] === '#END#') {
ws.close(); ws.close();
} else { } else {
const file = new GalleryFile(data[0], data[1]); const file = new GalleryFile(data[0], data[1]);
numFiles++;
fragment.appendChild(file); fragment.appendChild(file);
if (numFiles % 100 === 0) { if (numFiles % 100 === 0) {
el.status.innerText = `Folder | ${evt.target.name} | ${numFiles.toLocaleString()} images | in-progress | ${Math.floor(t1 - t0).toLocaleString()}ms`; el.status.innerText = `Folder | ${evt.target.name} | ${numFiles.toLocaleString()} images | in-progress | ${Math.floor(t1 - t0).toLocaleString()}ms`;

View File

@ -1093,7 +1093,7 @@ function makeDomController(domElement, options) {
domElement.scrollTop = 0; domElement.scrollTop = 0;
if (!options.disableKeyboardInteraction) { if (!options.disableKeyboardInteraction) {
owner.setAttribute('tabindex', 0); if (owner) owner.setAttribute('tabindex', 0);
} }
var api = { var api = {
@ -1287,7 +1287,7 @@ function makeSvgController(svgElement, options) {
} }
if (!options.disableKeyboardInteraction) { if (!options.disableKeyboardInteraction) {
owner.setAttribute('tabindex', 0); if (owner) owner.setAttribute('tabindex', 0);
} }
var api = { var api = {
@ -1339,7 +1339,7 @@ function makeSvgController(svgElement, options) {
} }
function applyTransform(transform) { function applyTransform(transform) {
svgElement.setAttribute('transform', 'matrix(' + if (svgElement) svgElement.setAttribute('transform', 'matrix(' +
transform.scale + ' 0 0 ' + transform.scale + ' 0 0 ' +
transform.scale + ' ' + transform.scale + ' ' +
transform.x + ' ' + transform.y + ')') transform.x + ' ' + transform.y + ')')

View File

@ -408,8 +408,7 @@ div:has(>#tab-gallery-folders) { flex-grow: 0 !important; background-color: var(
#img2img_actions_column { display: flex; min-width: fit-content !important; flex-direction: row;justify-content: space-evenly; align-items: center;} #img2img_actions_column { display: flex; min-width: fit-content !important; flex-direction: row;justify-content: space-evenly; align-items: center;}
#txt2img_generate_box, #img2img_generate_box, #txt2img_enqueue_wrapper,#img2img_enqueue_wrapper {display: flex;flex-direction: column;height: 4em !important;align-items: stretch;justify-content: space-evenly;} #txt2img_generate_box, #img2img_generate_box, #txt2img_enqueue_wrapper,#img2img_enqueue_wrapper {display: flex;flex-direction: column;height: 4em !important;align-items: stretch;justify-content: space-evenly;}
#img2img_interface, #img2img_results, #img2img_footer p { text-wrap: wrap; min-width: 100% !important; max-width: 100% !important;} /* maintain single column for from image operations on larger mobile devices */ #img2img_interface, #img2img_results, #img2img_footer p { text-wrap: wrap; min-width: 100% !important; max-width: 100% !important;} /* maintain single column for from image operations on larger mobile devices */
#txt2img_sampler, #txt2img_batch, #txt2img_seed_group, #txt2img_advanced, #txt2img_second_pass, #img2img_sampling_group, #img2img_resize_group, #img2img_batch_group, #img2img_seed_group, #img2img_denoise_group, #img2img_advanced_group { width: 100% !important; } /* fix from text/image UI #txt2img_sampler, #txt2img_batch, #txt2img_seed_group, #txt2img_advanced, #img2img_sampling_group, #img2img_resize_group, #img2img_batch_group, #img2img_seed_group, #img2img_denoise_group, #img2img_advanced_group { width: 100% !important; } /* fix from text/image UI elements to prevent them from moving around within the UI */
elements to prevent them from moving around within the UI */
#img2img_resize_group .gradio-radio>div { display: flex; flex-direction: column; width: unset !important; } #img2img_resize_group .gradio-radio>div { display: flex; flex-direction: column; width: unset !important; }
#inpaint_controls div { display:flex;flex-direction: row;} #inpaint_controls div { display:flex;flex-direction: row;}
#inpaint_controls .gradio-radio>div { display: flex; flex-direction: column !important; } #inpaint_controls .gradio-radio>div { display: flex; flex-direction: column !important; }

View File

@ -117,7 +117,7 @@ def create_seed_inputs(tab, reuse_visible=True, accordion=True, subseed_visible=
subseed = gr.Number(label='Variation', value=-1, elem_id=f"{tab}_subseed", container=True) subseed = gr.Number(label='Variation', value=-1, elem_id=f"{tab}_subseed", container=True)
random_subseed = ToolButton(ui_symbols.random, elem_id=f"{tab}_random_subseed") random_subseed = ToolButton(ui_symbols.random, elem_id=f"{tab}_random_subseed")
reuse_subseed = ToolButton(ui_symbols.reuse, elem_id=f"{tab}_reuse_subseed", visible=reuse_visible) reuse_subseed = ToolButton(ui_symbols.reuse, elem_id=f"{tab}_reuse_subseed", visible=reuse_visible)
subseed_strength = gr.Slider(label='Variation strength', value=0.0, minimum=0, maximum=1, step=0.01, elem_id=f"{tab}_subseed_strength") subseed_strength = gr.Slider(label='Variation strength', value=0.0, minimum=0, maximum=1, step=0.01, elem_id=f"{tab}_subseed_strength", elem_classes=["subseed-strength"])
with gr.Row(visible=seed_resize_visible): with gr.Row(visible=seed_resize_visible):
seed_resize_from_w = gr.Slider(minimum=0, maximum=4096, step=8, label="Resize seed from width", value=0, elem_id=f"{tab}_seed_resize_from_w") seed_resize_from_w = gr.Slider(minimum=0, maximum=4096, step=8, label="Resize seed from width", value=0, elem_id=f"{tab}_seed_resize_from_w")
seed_resize_from_h = gr.Slider(minimum=0, maximum=4096, step=8, label="Resize seed from height", value=0, elem_id=f"{tab}_seed_resize_from_h") seed_resize_from_h = gr.Slider(minimum=0, maximum=4096, step=8, label="Resize seed from height", value=0, elem_id=f"{tab}_seed_resize_from_h")
@ -309,25 +309,22 @@ def create_sampler_options(tabname):
def create_hires_inputs(tab): def create_hires_inputs(tab):
with gr.Accordion(open=False, label="Refine", elem_id=f"{tab}_second_pass", elem_classes=["small-accordion"]): with gr.Accordion(open=False, label="Refine", elem_id=f"{tab}_refine_accordion", elem_classes=["small-accordion"]):
with gr.Group(): with gr.Row(elem_id=f"{tab}_hires_row1"):
with gr.Row(elem_id=f"{tab}_hires_row1"): enable_hr = gr.Checkbox(label='Enable refine pass', value=False, elem_id=f"{tab}_enable_hr")
enable_hr = gr.Checkbox(label='Enable refine pass', value=False, elem_id=f"{tab}_enable_hr") hr_resize_mode, hr_upscaler, hr_resize_context, hr_resize_x, hr_resize_y, hr_scale, _selected_scale_tab = create_resize_inputs(tab, None, accordion=False, latent=True, non_zero=False)
hr_resize_mode, hr_upscaler, hr_resize_context, hr_resize_x, hr_resize_y, hr_scale, _selected_scale_tab = create_resize_inputs(tab, None, accordion=False, latent=True, non_zero=False) with gr.Row(elem_id=f"{tab}_hires_fix_row2"):
with gr.Row(elem_id=f"{tab}_hires_fix_row2", variant="compact"): hr_force = gr.Checkbox(label='Force HiRes', value=False, elem_id=f"{tab}_hr_force")
hr_force = gr.Checkbox(label='Force HiRes', value=False, elem_id=f"{tab}_hr_force") with gr.Row(elem_id=f"{tab}_hires_fix_row2"):
hr_sampler_index = gr.Dropdown(label='Refine sampler', elem_id=f"{tab}_sampling_alt", choices=[x.name for x in sd_samplers.samplers], value='Same as primary', type="index") hr_sampler_index = gr.Dropdown(label='Refine sampler', elem_id=f"{tab}_sampling_alt", choices=[x.name for x in sd_samplers.samplers], value='Same as primary', type="index")
with gr.Row(elem_id=f"{tab}_hires_row2"): with gr.Row(elem_id=f"{tab}_hires_row2"):
hr_second_pass_steps = gr.Slider(minimum=0, maximum=99, step=1, label='HiRes steps', elem_id=f"{tab}_steps_alt", value=20) hr_second_pass_steps = gr.Slider(minimum=0, maximum=99, step=1, label='HiRes steps', elem_id=f"{tab}_steps_alt", value=20)
denoising_strength = gr.Slider(minimum=0.0, maximum=0.99, step=0.01, label='Strength', value=0.3, elem_id=f"{tab}_denoising_strength") denoising_strength = gr.Slider(minimum=0.0, maximum=0.99, step=0.01, label='Strength', value=0.3, elem_id=f"{tab}_denoising_strength")
with gr.Group(): with gr.Row(elem_id=f"{tab}_refiner_row1"):
with gr.Row(elem_id=f"{tab}_refiner_row1", variant="compact"): refiner_start = gr.Slider(minimum=0.0, maximum=1.0, step=0.05, label='Refiner start', value=0.0, elem_id=f"{tab}_refiner_start")
refiner_start = gr.Slider(minimum=0.0, maximum=1.0, step=0.05, label='Refiner start', value=0.0, elem_id=f"{tab}_refiner_start") refiner_steps = gr.Slider(minimum=0, maximum=99, step=1, label="Refiner steps", elem_id=f"{tab}_refiner_steps", value=20)
refiner_steps = gr.Slider(minimum=0, maximum=99, step=1, label="Refiner steps", elem_id=f"{tab}_refiner_steps", value=20) refiner_prompt = gr.Textbox(value='', lines=2, label='Refine prompt', elem_id=f"{tab}_refiner_prompt", elem_classes=["prompt"])
with gr.Row(elem_id=f"{tab}_refiner_row3", variant="compact"): refiner_negative = gr.Textbox(value='', lines=2, label='Refine negative prompt', elem_id=f"{tab}_refiner_neg_prompt", elem_classes=["prompt"])
refiner_prompt = gr.Textbox(value='', lines=2, label='Refine prompt', elem_id=f"{tab}_refiner_prompt", elem_classes=["prompt"])
with gr.Row(elem_id="txt2img_refiner_row4", variant="compact"):
refiner_negative = gr.Textbox(value='', lines=2, label='Refine negative prompt', elem_id=f"{tab}_refiner_neg_prompt", elem_classes=["prompt"])
return enable_hr, hr_sampler_index, denoising_strength, hr_resize_mode, hr_resize_context, hr_upscaler, hr_force, hr_second_pass_steps, hr_scale, hr_resize_x, hr_resize_y, refiner_steps, refiner_start, refiner_prompt, refiner_negative return enable_hr, hr_sampler_index, denoising_strength, hr_resize_mode, hr_resize_context, hr_upscaler, hr_force, hr_second_pass_steps, hr_scale, hr_resize_x, hr_resize_y, refiner_steps, refiner_start, refiner_prompt, refiner_negative
@ -357,21 +354,21 @@ def create_resize_inputs(tab, images, accordion=True, latent=False, non_zero=Tru
selected_scale_tab = gr.State(value=0) # pylint: disable=abstract-class-instantiated selected_scale_tab = gr.State(value=0) # pylint: disable=abstract-class-instantiated
with gr.Tabs(elem_id=f"{tab}_scale_tabs", selected=0 if non_zero else 1): with gr.Tabs(elem_id=f"{tab}_scale_tabs", selected=0 if non_zero else 1):
with gr.Tab(label="Fixed", id=0, elem_id=f"{tab}_scale_tab_fixed") as tab_scale_to: with gr.Tab(label="Fixed", id=0, elem_id=f"{tab}_scale_tab_fixed") as tab_scale_to:
with gr.Row(): with gr.Row(elem_id=f"{tab}_resize_row_fixed"):
with gr.Column(elem_id=f"{tab}_column_size_fixed"): with gr.Column(elem_id=f"{tab}_column_fixed1", scale=6):
with gr.Row(): suffix = '_resize' if tab != 'img2img' else ''
suffix = '_resize' if tab != 'img2img' else '' width = gr.Slider(minimum=64 if non_zero else 0, maximum=8192, step=8, label=f"Width {prefix}" if non_zero else "Resize width", value=1024 if non_zero else 0, elem_id=f"{tab}{suffix}_width")
width = gr.Slider(minimum=64 if non_zero else 0, maximum=8192, step=8, label=f"Width {prefix}" if non_zero else "Resize width", value=1024 if non_zero else 0, elem_id=f"{tab}{suffix}_width") height = gr.Slider(minimum=64 if non_zero else 0, maximum=8192, step=8, label=f"Height {prefix}" if non_zero else "Resize height", value=1024 if non_zero else 0, elem_id=f"{tab}{suffix}_height")
height = gr.Slider(minimum=64 if non_zero else 0, maximum=8192, step=8, label=f"Height {prefix}" if non_zero else "Resize height", value=1024 if non_zero else 0, elem_id=f"{tab}{suffix}_height") with gr.Column(elem_id=f"{tab}_column_fixed2", scale=1):
ar_list = ['AR'] + [x.strip() for x in shared.opts.aspect_ratios.split(',') if x.strip() != ''] ar_list = ['AR'] + [x.strip() for x in shared.opts.aspect_ratios.split(',') if x.strip() != '']
ar_dropdown = gr.Dropdown(show_label=False, interactive=True, choices=ar_list, value=ar_list[0], elem_id=f"{tab}_resize_ar", elem_classes=["ar-dropdown"]) ar_dropdown = gr.Dropdown(show_label=False, interactive=True, choices=ar_list, value=ar_list[0], elem_id=f"{tab}_resize_ar", elem_classes=["ar-dropdown"])
for c in [ar_dropdown, width, height]: for c in [ar_dropdown, width, height]:
c.change(fn=ar_change, inputs=[ar_dropdown, width, height], outputs=[width, height], show_progress=False) c.change(fn=ar_change, inputs=[ar_dropdown, width, height], outputs=[width, height], show_progress=False)
res_switch_btn = ToolButton(value=ui_symbols.switch, elem_id=f"{tab}_resize_switch_size_btn") res_switch_btn = ToolButton(value=ui_symbols.switch, elem_id=f"{tab}_resize_switch_size_btn")
res_switch_btn.click(lambda w, h: (h, w), inputs=[width, height], outputs=[width, height], show_progress=False) res_switch_btn.click(lambda w, h: (h, w), inputs=[width, height], outputs=[width, height], show_progress=False)
detect_image_size_btn = ToolButton(value=ui_symbols.detect, elem_id=f"{tab}_resize_detect_size_btn") detect_image_size_btn = ToolButton(value=ui_symbols.detect, elem_id=f"{tab}_resize_detect_size_btn")
el = tab.split('_')[0] el = tab.split('_')[0]
detect_image_size_btn.click(fn=lambda w, h, _: (w or gr.update(), h or gr.update()), _js=f'currentImageResolution{el}', inputs=[dummy_component, dummy_component, dummy_component], outputs=[width, height], show_progress=False) detect_image_size_btn.click(fn=lambda w, h, _: (w or gr.update(), h or gr.update()), _js=f'currentImageResolution{el}', inputs=[dummy_component, dummy_component, dummy_component], outputs=[width, height], show_progress=False)
with gr.Tab(label="Scale", id=1, elem_id=f"{tab}_scale_tab_scale") as tab_scale_by: with gr.Tab(label="Scale", id=1, elem_id=f"{tab}_scale_tab_scale") as tab_scale_by:
scale_by = gr.Slider(minimum=0.05, maximum=8.0, step=0.05, label=f"Scale {prefix}" if non_zero else "Resize scale", value=1.0, elem_id=f"{tab}_scale") scale_by = gr.Slider(minimum=0.05, maximum=8.0, step=0.05, label=f"Scale {prefix}" if non_zero else "Resize scale", value=1.0, elem_id=f"{tab}_scale")
if images is not None: if images is not None:

View File

@ -11,7 +11,7 @@ def create_ui(accordion=True):
def update_ui(checked): def update_ui(checked):
return gr.update(visible=checked) return gr.update(visible=checked)
with gr.Accordion('NudeNet', open = False, elem_id='nudenet') if accordion else gr.Group(): with gr.Accordion('NudeNet', open = False, elem_id='postprocess_nudenet_accordion') if accordion else gr.Group():
with gr.Row(): with gr.Row():
enabled = gr.Checkbox(label = 'Enabled', value = False) enabled = gr.Checkbox(label = 'Enabled', value = False)
with gr.Group(visible=False) as gr_censor: with gr.Group(visible=False) as gr_censor:

View File

@ -10,7 +10,7 @@ class ScriptPostprocessingCodeFormer(scripts_postprocessing.ScriptPostprocessing
order = 3000 order = 3000
def ui(self): def ui(self):
with gr.Accordion('Restore faces: CodeFormer', open = False): with gr.Accordion('Restore faces: CodeFormer', open = False, elem_id="postprocess_codeformer_accordion"):
with gr.Row(): with gr.Row():
codeformer_visibility = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, label="Strength", value=0.0, elem_id="extras_codeformer_visibility") codeformer_visibility = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, label="Strength", value=0.0, elem_id="extras_codeformer_visibility")
codeformer_weight = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, label="Weight", value=0.2, elem_id="extras_codeformer_weight") codeformer_weight = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, label="Weight", value=0.2, elem_id="extras_codeformer_weight")

View File

@ -9,7 +9,7 @@ class ScriptPostprocessingGfpGan(scripts_postprocessing.ScriptPostprocessing):
order = 2000 order = 2000
def ui(self): def ui(self):
with gr.Accordion('Restore faces: GFPGan', open = False): with gr.Accordion('Restore faces: GFPGan', open = False, elem_id="postprocess_gfpgan_accordion"):
with gr.Row(): with gr.Row():
gfpgan_visibility = gr.Slider(minimum=0.0, maximum=1.0, step=0.001, label="Strength", value=0, elem_id="extras_gfpgan_visibility") gfpgan_visibility = gr.Slider(minimum=0.0, maximum=1.0, step=0.001, label="Strength", value=0, elem_id="extras_gfpgan_visibility")
return { "gfpgan_visibility": gfpgan_visibility } return { "gfpgan_visibility": gfpgan_visibility }

View File

@ -6,15 +6,15 @@ class ScriptPixelArt(scripts_postprocessing.ScriptPostprocessing):
order = 30000 order = 30000
def ui(self): def ui(self):
with gr.Accordion('PixelArt', open = False): with gr.Accordion('PixelArt', open = False, elem_id="postprocess_pixelart_accordion"):
with gr.Row(): with gr.Row():
pixelart_enabled = gr.Checkbox(label="Enable PixelArt", value=False, elem_id="extras_pixelart_enabled") pixelart_enabled = gr.Checkbox(label="Enable PixelArt", value=False, elem_id="extras_pixelart_enabled")
pixelart_use_edge_detection = gr.Checkbox(label="Enable PixelArt edge detection", value=True, elem_id="extras_pixelart_use_edge_detection") pixelart_use_edge_detection = gr.Checkbox(label="Enable edge detection", value=True, elem_id="extras_pixelart_use_edge_detection")
with gr.Row(): with gr.Row():
pixelart_block_size = gr.Slider(minimum=2, maximum=64, step=1, value=8, label="PixelArt block size", elem_id="extras_pixelart_block_size") pixelart_block_size = gr.Slider(minimum=2, maximum=64, step=1, value=8, label="PixelArt block size", elem_id="extras_pixelart_block_size")
pixelart_edge_block_size = gr.Slider(minimum=2, maximum=64, step=1, value=4, label="PixelArt block size for edge detection", elem_id="extras_pixelart_edge_block_size") pixelart_edge_block_size = gr.Slider(minimum=2, maximum=64, step=1, value=4, label="Edge block size", elem_id="extras_pixelart_edge_block_size")
pixelart_image_weight = gr.Slider(minimum=0.0, maximum=2.0, step=0.01, value=1.0, label="PixelArt edge detection image weight", elem_id="extras_pixelart_image_weight") pixelart_image_weight = gr.Slider(minimum=0.0, maximum=2.0, step=0.01, value=1.0, label="Edge image weight", elem_id="extras_pixelart_image_weight")
pixelart_sharpen_amount = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, value=0.1, label="PixelArt sharpen amount", elem_id="extras_pixelart_sharpen_amount") pixelart_sharpen_amount = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, value=0.1, label="PixelArt sharpen", elem_id="extras_pixelart_sharpen_amount")
return { return {
"pixelart_enabled": pixelart_enabled, "pixelart_enabled": pixelart_enabled,
"pixelart_block_size": pixelart_block_size, "pixelart_block_size": pixelart_block_size,

View File

@ -10,7 +10,7 @@ class ScriptPostprocessingUpscale(scripts_postprocessing.ScriptPostprocessing):
order = 1000 order = 1000
def ui(self): def ui(self):
with gr.Accordion('Postprocess Upscale', open = False): with gr.Accordion('Postprocess upscale', open = False, elem_id="postprocess_upscale_accordion"):
selected_tab = gr.State(value=0) # pylint: disable=abstract-class-instantiated selected_tab = gr.State(value=0) # pylint: disable=abstract-class-instantiated
with gr.Column(): with gr.Column():
with gr.Row(elem_id="extras_upscale"): with gr.Row(elem_id="extras_upscale"):

View File

@ -7,7 +7,7 @@ class ScriptPostprocessingUpscale(scripts_postprocessing.ScriptPostprocessing):
name = "Video" name = "Video"
def ui(self): def ui(self):
with gr.Accordion('Create video', open = False): with gr.Accordion('Create video', open = False, elem_id="postprocess_video_accordion"):
def video_type_change(video_type): def video_type_change(video_type):
return [ return [
gr.update(visible=video_type != 'None'), gr.update(visible=video_type != 'None'),