diff --git a/.gitignore b/.gitignore index 0b1d17ca..6a101157 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,14 @@ notification.mp3 /test/stdout.txt /test/stderr.txt /cache.json +scripts/prompt_blending.py +scripts/advanced_seed_blending.py +scripts/CFG Auto.py +scripts/CFG Schedule.py +scripts/img2tiles.py +scripts/interpolate.py +scripts/loopback_superimpose.py +models/VAE/Put VAE here.txt +models/VAE-approx/model.pt +models/Stable-diffusion/Put Stable Diffusion checkpoints here.txt +models/deepbooru/Put your deepbooru release project folder here.txt diff --git a/html/footer.html b/html/footer.html index bad87ff6..d782ad62 100644 --- a/html/footer.html +++ b/html/footer.html @@ -1,7 +1,7 @@
API  •  - Github + Github  •  Gradio  •  @@ -11,3 +11,5 @@
{versions}
+ + diff --git a/javascript/ui.js b/javascript/ui.js index b7a8268a..7541181f 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -277,6 +277,26 @@ onUiUpdate(function(){ }) } } + + /* + hack until gradio allows to add custom classes to components + add elem_id= your_elem_id + "sub-group" + + ^ matches the start + * matches any position + $ matches the end + + */ + + gradioApp().querySelectorAll('[id *= "sub-group"]').forEach(function(elem){ + elem.classList.add("sub-group"); + console.log(elem.id); + }) + + + + + }) onOptionsChanged(function(){ @@ -317,6 +337,7 @@ function update_token_counter(button_id) { function restart_reload(){ document.body.innerHTML='

Reloading...

'; + document.body.style.backgroundColor = "#1a1a1a"; setTimeout(function(){location.reload()},2000) return [] diff --git a/modules/img2img.py b/modules/img2img.py index f813299c..c4fb1d25 100644 --- a/modules/img2img.py +++ b/modules/img2img.py @@ -45,6 +45,8 @@ def process_batch(p, input_dir, output_dir, inpaint_mask_dir, args): if state.interrupted: break + + p.filename = os.path.basename(image) img = Image.open(image) # Use the EXIF orientation of photos taken by smartphones. diff --git a/modules/ui.py b/modules/ui.py index 5e34fb07..74e92301 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -20,7 +20,7 @@ from PIL import Image, PngImagePlugin from modules.call_queue import wrap_gradio_gpu_call, wrap_queued_call, wrap_gradio_call from modules import sd_hijack, sd_models, localization, script_callbacks, ui_extensions, deepbooru, sd_vae, extra_networks, postprocessing, ui_components, ui_common, ui_postprocessing -from modules.ui_components import FormRow, FormGroup, ToolButton, FormHTML +from modules.ui_components import FormRow, FormGroup, FormSubGroup, ToolButton, FormHTML from modules.paths import script_path, data_path from modules.shared import opts, cmd_opts, restricted_opts @@ -91,9 +91,13 @@ save_style_symbol = '\U0001f4be' # 💾 apply_style_symbol = '\U0001f4cb' # 📋 clear_prompt_symbol = '\U0001F5D1' # 🗑️ extra_networks_symbol = '\U0001F3B4' # 🎴 -switch_values_symbol = '\U000021C5' # ⇅ +#switch_values_symbol = '\U000021C5' # ⇅ +switch_values_symbol = '\u2B80' # ⮀ +interogate_bubble_symbol = '\U0001F5E8' # 🗨 +interogate_2bubble_symbol = '\U0001F5EA' # 🗪 + def plaintext_to_html(text): return ui_common.plaintext_to_html(text) @@ -179,30 +183,45 @@ def interrogate_deepbooru(image): def create_seed_inputs(target_interface): - with FormRow(elem_id=target_interface + '_seed_row'): - seed = (gr.Textbox if cmd_opts.use_textbox_seed else gr.Number)(label='Seed', value=-1, elem_id=target_interface + '_seed') - seed.style(container=False) - random_seed = gr.Button(random_symbol, elem_id=target_interface + '_random_seed') - reuse_seed = gr.Button(reuse_symbol, elem_id=target_interface + '_reuse_seed') - with gr.Group(elem_id=target_interface + '_subseed_show_box'): + with gr.Row(elem_id = target_interface+"_group_seed"): + with gr.Box(): + with gr.Row(elem_id=target_interface + '_seed_row'): + + seed = (gr.Textbox if cmd_opts.use_textbox_seed else gr.Number)(label='Seed', value=-1, elem_id=target_interface + '_seed') + # #seed.style(container=False) + random_seed = gr.Button(random_symbol, elem_id=target_interface + '_random_seed') + reuse_seed = gr.Button(reuse_symbol, elem_id=target_interface + '_reuse_seed') + + with gr.Box(elem_id='subseed_show_box'): seed_checkbox = gr.Checkbox(label='Extra', elem_id=target_interface + '_subseed_show', value=False) + # Components to show/hide based on the 'Extra' checkbox seed_extras = [] - with FormRow(visible=False, elem_id=target_interface + '_subseed_row') as seed_extra_row_1: - seed_extras.append(seed_extra_row_1) - subseed = gr.Number(label='Variation seed', value=-1, elem_id=target_interface + '_subseed') - subseed.style(container=False) - random_subseed = gr.Button(random_symbol, elem_id=target_interface + '_random_subseed') - reuse_subseed = gr.Button(reuse_symbol, elem_id=target_interface + '_reuse_subseed') - subseed_strength = gr.Slider(label='Variation strength', value=0.0, minimum=0, maximum=1, step=0.01, elem_id=target_interface + '_subseed_strength') + #with FormRow(visible=False, elem_id=target_interface + '_subseed_row') as seed_extra_row_1: + #with gr.Group(elem_id="group-subseed", visible=False) as seed_extra_group: + with FormSubGroup(elem_id=target_interface + '_subseed_row_sub-group', visible=False) as seed_extra_group: + + seed_extras.append(seed_extra_group) + + with gr.Row(visible=False) as seed_extra_row_1: + seed_extras.append(seed_extra_row_1) + with gr.Box(): + with gr.Row(elem_id= target_interface + '_subseed_row'): + subseed = gr.Number(label='Variation seed', value=-1, elem_id=target_interface + '_subseed') + #subseed.style(container=False) + random_subseed = gr.Button(random_symbol, elem_id=target_interface + '_random_subseed') + reuse_subseed = gr.Button(reuse_symbol, elem_id=target_interface + '_reuse_subseed') + + subseed_strength = gr.Slider(label='Variation strength', value=0.0, minimum=0, maximum=1, step=0.01, elem_id=target_interface + '_subseed_strength') - with FormRow(visible=False) as seed_extra_row_2: - seed_extras.append(seed_extra_row_2) - seed_resize_from_w = gr.Slider(minimum=0, maximum=2048, step=8, label="Resize seed from width", value=0, elem_id=target_interface + '_seed_resize_from_w') - seed_resize_from_h = gr.Slider(minimum=0, maximum=2048, step=8, label="Resize seed from height", value=0, elem_id=target_interface + '_seed_resize_from_h') + #with FormRow(visible=False) as seed_extra_row_2: + with gr.Row(visible=False) as seed_extra_row_2: + seed_extras.append(seed_extra_row_2) + seed_resize_from_w = gr.Slider(minimum=0, maximum=2048, step=8, label="Resize seed from width", value=0, elem_id=target_interface + '_seed_resize_from_w') + seed_resize_from_h = gr.Slider(minimum=0, maximum=2048, step=8, label="Resize seed from height", value=0, elem_id=target_interface + '_seed_resize_from_h') random_seed.click(fn=lambda: -1, show_progress=False, inputs=[], outputs=[seed]) random_subseed.click(fn=lambda: -1, show_progress=False, inputs=[], outputs=[subseed]) @@ -278,52 +297,67 @@ def update_token_counter(text, steps): return f"{token_count}/{max_length}" +def create_generate(is_img2img): + id_part = "img2img" if is_img2img else "txt2img" + with gr.Column(scale=1): + with gr.Row(): + skip = gr.Button('Skip', elem_id=f"{id_part}_skip") + interrupt = gr.Button('Interrupt', elem_id=f"{id_part}_interrupt") + submit = gr.Button('Generate', elem_id=f"{id_part}_generate", variant='primary') + + skip.click( + fn=lambda: shared.state.skip(), + inputs=[], + outputs=[], + ) + + interrupt.click( + fn=lambda: shared.state.interrupt(), + inputs=[], + outputs=[], + ) + + return submit + + def create_toprow(is_img2img): id_part = "img2img" if is_img2img else "txt2img" with gr.Row(elem_id=f"{id_part}_toprow", variant="compact"): - with gr.Column(elem_id=f"{id_part}_prompt_container", scale=6): + + with gr.Column(scale=6): with gr.Row(): with gr.Column(scale=80): + with gr.Column(elem_id=f"{id_part}_styles_row"): + prompt_styles = gr.Dropdown(label="Styles", elem_id=f"{id_part}_styles", choices=[k for k, v in shared.prompt_styles.styles.items()], value=[], multiselect=True) + create_refresh_button(prompt_styles, shared.prompt_styles.reload, lambda: {"choices": [k for k, v in shared.prompt_styles.styles.items()]}, f"refresh_{id_part}_style_index") with gr.Row(): - prompt = gr.Textbox(label="Prompt", elem_id=f"{id_part}_prompt", show_label=False, lines=3, placeholder="Prompt (press Ctrl+Enter or Alt+Enter to generate)") + prompt = gr.Textbox(label="Prompt", elem_id=f"{id_part}_prompt", show_label=True, lines=7, + placeholder="Prompt (press Ctrl+Enter or Alt+Enter to generate)" + ) with gr.Row(): - with gr.Column(scale=80): + with gr.Column(scale=80): with gr.Row(): - negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=False, lines=2, placeholder="Negative prompt (press Ctrl+Enter or Alt+Enter to generate)") - - button_interrogate = None - button_deepbooru = None - if is_img2img: - with gr.Column(scale=1, elem_id="interrogate_col"): - 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_box"): - interrupt = gr.Button('Interrupt', elem_id=f"{id_part}_interrupt") - skip = gr.Button('Skip', elem_id=f"{id_part}_skip") - submit = gr.Button('Generate', elem_id=f"{id_part}_generate", variant='primary') - - skip.click( - fn=lambda: shared.state.skip(), - inputs=[], - outputs=[], - ) - - interrupt.click( - fn=lambda: shared.state.interrupt(), - inputs=[], - outputs=[], - ) + negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=True, lines=7, + placeholder="Negative prompt (press Ctrl+Enter or Alt+Enter to generate)" + ) + with gr.Column(elem_id=f"{id_part}_actions_column"): + + 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") extra_networks_button = ToolButton(value=extra_networks_symbol, elem_id=f"{id_part}_extra_networks") prompt_style_apply = ToolButton(value=apply_style_symbol, elem_id=f"{id_part}_style_apply") save_style = ToolButton(value=save_style_symbol, elem_id=f"{id_part}_style_create") + + button_interrogate = None + button_deepbooru = None + if is_img2img: + button_interrogate = ToolButton(value=interogate_bubble_symbol, elem_id="interrogate") + button_deepbooru = ToolButton(value=interogate_2bubble_symbol, elem_id="deepbooru") token_counter = gr.HTML(value="", elem_id=f"{id_part}_token_counter") token_button = gr.Button(visible=False, elem_id=f"{id_part}_token_button") @@ -337,11 +371,7 @@ def create_toprow(is_img2img): outputs=[prompt, negative_prompt], ) - with gr.Row(elem_id=f"{id_part}_styles_row"): - prompt_styles = gr.Dropdown(label="Styles", elem_id=f"{id_part}_styles", choices=[k for k, v in shared.prompt_styles.styles.items()], value=[], multiselect=True) - create_refresh_button(prompt_styles, shared.prompt_styles.reload, lambda: {"choices": [k for k, v in shared.prompt_styles.styles.items()]}, f"refresh_{id_part}_styles") - - return prompt, prompt_styles, negative_prompt, submit, button_interrogate, button_deepbooru, prompt_style_apply, save_style, paste, extra_networks_button, token_counter, token_button, negative_token_counter, negative_token_button + return prompt, prompt_styles, negative_prompt, button_interrogate, button_deepbooru, prompt_style_apply, save_style, paste, extra_networks_button, token_counter, token_button, negative_token_counter, negative_token_button def setup_progressbar(*args, **kwargs): @@ -458,71 +488,92 @@ def create_ui(): modules.scripts.scripts_txt2img.initialize_scripts(is_img2img=False) with gr.Blocks(analytics_enabled=False) as txt2img_interface: - txt2img_prompt, txt2img_prompt_styles, txt2img_negative_prompt, submit, _, _, txt2img_prompt_style_apply, txt2img_save_style, txt2img_paste, extra_networks_button, token_counter, token_button, negative_token_counter, negative_token_button = create_toprow(is_img2img=False) + dummy_component = gr.Label(visible=False) txt_prompt_img = gr.File(label="", elem_id="txt2img_prompt_image", file_count="single", type="binary", visible=False) - with FormRow(variant='compact', elem_id="txt2img_extra_networks", visible=False) as extra_networks: - from modules import ui_extra_networks - extra_networks_ui = ui_extra_networks.create_ui(extra_networks, extra_networks_button, 'txt2img') + with gr.Row().style(equal_height=False): - with gr.Column(variant='compact', elem_id="txt2img_settings"): - for category in ordered_ui_categories(): - if category == "sampler": - steps, sampler_index = create_sampler_and_steps_selection(samplers, "txt2img") + + txt2img_gallery, generation_info, html_info, html_log = create_output_panel("txt2img", opts.outdir_txt2img_samples) + + with gr.Column(variant='panel', elem_id="txt2img_settings"): + + submit = create_generate(is_img2img=False) + + with gr.Column(elem_id="txt2img_settings_scroll"): + with gr.Accordion("Prompt", open=True): + txt2img_prompt, txt2img_prompt_styles, txt2img_negative_prompt, _, _, txt2img_prompt_style_apply, txt2img_save_style, txt2img_paste, extra_networks_button, token_counter, token_button, negative_token_counter, negative_token_button = create_toprow(is_img2img=False) + + with FormRow(variant='compact', elem_id="txt2img_extra_networks", visible=False) as extra_networks: + from modules import ui_extra_networks + extra_networks_ui = ui_extra_networks.create_ui(extra_networks, extra_networks_button, 'txt2img') + + for category in ordered_ui_categories(): + if category == "sampler": + steps, sampler_index = create_sampler_and_steps_selection(samplers, "txt2img") - elif category == "dimensions": - with FormRow(): - with gr.Column(elem_id="txt2img_column_size", scale=4): + elif category == "dimensions": + with FormRow(): width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="txt2img_width") + res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="txt2img_res_switch_btn") height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="txt2img_height") - res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="txt2img_res_switch_btn") if opts.dimensions_and_batch_together: - with gr.Column(elem_id="txt2img_column_batch"): + + with gr.Row(elem_id="txt2img_column_batch"): batch_count = gr.Slider(minimum=1, step=1, label='Batch count', value=1, elem_id="txt2img_batch_count") batch_size = gr.Slider(minimum=1, maximum=8, step=1, label='Batch size', value=1, elem_id="txt2img_batch_size") - elif category == "cfg": - cfg_scale = gr.Slider(minimum=1.0, maximum=30.0, step=0.5, label='CFG Scale', value=7.0, elem_id="txt2img_cfg_scale") + elif category == "cfg": + cfg_scale = gr.Slider(minimum=1.0, maximum=30.0, step=0.5, label='CFG Scale', value=7.0, elem_id="txt2img_cfg_scale") - elif category == "seed": - seed, reuse_seed, subseed, reuse_subseed, subseed_strength, seed_resize_from_h, seed_resize_from_w, seed_checkbox = create_seed_inputs('txt2img') + elif category == "seed": + seed, reuse_seed, subseed, reuse_subseed, subseed_strength, seed_resize_from_h, seed_resize_from_w, seed_checkbox = create_seed_inputs('txt2img') - elif category == "checkboxes": - with FormRow(elem_id="txt2img_checkboxes", variant="compact"): - restore_faces = gr.Checkbox(label='Restore faces', value=False, visible=len(shared.face_restorers) > 1, elem_id="txt2img_restore_faces") - tiling = gr.Checkbox(label='Tiling', value=False, elem_id="txt2img_tiling") - enable_hr = gr.Checkbox(label='Hires. fix', value=False, elem_id="txt2img_enable_hr") - hr_final_resolution = FormHTML(value="", elem_id="txtimg_hr_finalres", label="Upscaled resolution", interactive=False) + elif category == "checkboxes": + #with FormRow(elem_id="txt2img_checkboxes", variant="compact"): + with gr.Row(): + restore_faces = gr.Checkbox(label='Restore faces', value=False, visible=len(shared.face_restorers) > 1, elem_id="txt2img_restore_faces") + tiling = gr.Checkbox(label='Tiling', value=False, elem_id="txt2img_tiling") + enable_hr = gr.Checkbox(label='Hires. fix', value=False, elem_id="txt2img_enable_hr") + - elif category == "hires_fix": - with FormGroup(visible=False, elem_id="txt2img_hires_fix") as hr_options: - with FormRow(elem_id="txt2img_hires_fix_row1", variant="compact"): - hr_upscaler = gr.Dropdown(label="Upscaler", elem_id="txt2img_hr_upscaler", choices=[*shared.latent_upscale_modes, *[x.name for x in shared.sd_upscalers]], value=shared.latent_upscale_default_mode) - hr_second_pass_steps = gr.Slider(minimum=0, maximum=150, step=1, label='Hires steps', value=0, elem_id="txt2img_hires_steps") - denoising_strength = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, label='Denoising strength', value=0.7, elem_id="txt2img_denoising_strength") + elif category == "hires_fix": + with FormGroup(visible=False, elem_id="txt2img_hires_fix_sub-group") as hr_options: + #with FormRow(elem_id="txt2img_hires_fix_row1", variant="compact"): + with gr.Row(): + + hr_upscaler = gr.Dropdown(label="Upscaler", elem_id="txt2img_hr_upscaler", choices=[*shared.latent_upscale_modes, *[x.name for x in shared.sd_upscalers]], value=shared.latent_upscale_default_mode) + hr_final_resolution = FormHTML(value="", elem_id="txtimg_hr_finalres", label="Upscaled resolution", interactive=False) + + with gr.Row(): + hr_second_pass_steps = gr.Slider(minimum=0, maximum=150, step=1, label='Hires steps', value=0, elem_id="txt2img_hires_steps") + denoising_strength = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, label='Denoising strength', value=0.7, elem_id="txt2img_denoising_strength") - with FormRow(elem_id="txt2img_hires_fix_row2", variant="compact"): - hr_scale = gr.Slider(minimum=1.0, maximum=4.0, step=0.05, label="Upscale by", value=2.0, elem_id="txt2img_hr_scale") - hr_resize_x = gr.Slider(minimum=0, maximum=2048, step=8, label="Resize width to", value=0, elem_id="txt2img_hr_resize_x") - hr_resize_y = gr.Slider(minimum=0, maximum=2048, step=8, label="Resize height to", value=0, elem_id="txt2img_hr_resize_y") + #with FormRow(elem_id="txt2img_hires_fix_row2", variant="compact"): + with gr.Row(): + hr_scale = gr.Slider(minimum=1.0, maximum=4.0, step=0.05, label="Upscale by", value=2.0, elem_id="txt2img_hr_scale") + hr_resize_x = gr.Slider(minimum=0, maximum=2048, step=8, label="Resize width to", value=0, elem_id="txt2img_hr_resize_x") + hr_resize_y = gr.Slider(minimum=0, maximum=2048, step=8, label="Resize height to", value=0, elem_id="txt2img_hr_resize_y") - elif category == "batch": - if not opts.dimensions_and_batch_together: - with FormRow(elem_id="txt2img_column_batch"): - batch_count = gr.Slider(minimum=1, step=1, label='Batch count', value=1, elem_id="txt2img_batch_count") - batch_size = gr.Slider(minimum=1, maximum=8, step=1, label='Batch size', value=1, elem_id="txt2img_batch_size") + elif category == "batch": + if not opts.dimensions_and_batch_together: + #with FormRow(elem_id="txt2img_column_batch"): + with gr.Row(): + batch_count = gr.Slider(minimum=1, step=1, label='Batch count', value=1, elem_id="txt2img_batch_count") + batch_size = gr.Slider(minimum=1, maximum=8, step=1, label='Batch size', value=1, elem_id="txt2img_batch_size") - elif category == "override_settings": - with FormRow(elem_id="txt2img_override_settings_row") as row: - override_settings = create_override_settings_dropdown('txt2img', row) + elif category == "override_settings": + with FormRow(elem_id="txt2img_override_settings_row") as row: + override_settings = create_override_settings_dropdown('txt2img', row) - elif category == "scripts": - with FormGroup(elem_id="txt2img_script_container"): - custom_inputs = modules.scripts.scripts_txt2img.setup_ui() + elif category == "scripts": + #with FormGroup(elem_id="txt2img_script_container"): + with gr.Group(): + custom_inputs = modules.scripts.scripts_txt2img.setup_ui() hr_resolution_preview_inputs = [enable_hr, width, height, hr_scale, hr_resize_x, hr_resize_y] for input in hr_resolution_preview_inputs: @@ -540,7 +591,7 @@ def create_ui(): show_progress=False, ) - txt2img_gallery, generation_info, html_info, html_log = create_output_panel("txt2img", opts.outdir_txt2img_samples) + connect_reuse_seed(seed, reuse_seed, generation_info, dummy_component, is_subseed=False) connect_reuse_seed(subseed, reuse_subseed, generation_info, dummy_component, is_subseed=True) @@ -583,7 +634,7 @@ def create_ui(): show_progress=False, ) - txt2img_prompt.submit(**txt2img_args) + #txt2img_prompt.submit(**txt2img_args) submit.click(**txt2img_args) res_switch_btn.click(lambda w, h: (h, w), inputs=[width, height], outputs=[width, height]) @@ -656,171 +707,191 @@ def create_ui(): modules.scripts.scripts_img2img.initialize_scripts(is_img2img=True) with gr.Blocks(analytics_enabled=False) as img2img_interface: - img2img_prompt, img2img_prompt_styles, img2img_negative_prompt, submit, img2img_interrogate, img2img_deepbooru, img2img_prompt_style_apply, img2img_save_style, img2img_paste, extra_networks_button, token_counter, token_button, negative_token_counter, negative_token_button = create_toprow(is_img2img=True) - + img2img_prompt_img = gr.File(label="", elem_id="img2img_prompt_image", file_count="single", type="binary", visible=False) - with FormRow(variant='compact', elem_id="img2img_extra_networks", visible=False) as extra_networks: - from modules import ui_extra_networks - extra_networks_ui_img2img = ui_extra_networks.create_ui(extra_networks, extra_networks_button, 'img2img') + with FormRow().style(equal_height=False): - with gr.Column(variant='compact', elem_id="img2img_settings"): - copy_image_buttons = [] - copy_image_destinations = {} + + img2img_gallery, generation_info, html_info, html_log = create_output_panel("img2img", opts.outdir_img2img_samples) + + with gr.Column(variant='panel', elem_id="img2img_settings"): - def add_copy_image_controls(tab_name, elem): - with gr.Row(variant="compact", elem_id=f"img2img_copy_to_{tab_name}"): - gr.HTML("Copy image to: ", elem_id=f"img2img_label_copy_to_{tab_name}") + submit = create_generate(is_img2img=True) - for title, name in zip(['img2img', 'sketch', 'inpaint', 'inpaint sketch'], ['img2img', 'sketch', 'inpaint', 'inpaint_sketch']): - if name == tab_name: - gr.Button(title, interactive=False) - copy_image_destinations[name] = elem - continue + with gr.Column(elem_id="img2img_settings_scroll"): - button = gr.Button(title) - copy_image_buttons.append((button, name, elem)) + with gr.Row(): + with gr.Accordion("Prompt", open=False): + img2img_prompt, img2img_prompt_styles, img2img_negative_prompt, img2img_interrogate, img2img_deepbooru, img2img_prompt_style_apply, img2img_save_style, img2img_paste, extra_networks_button, token_counter, token_button, negative_token_counter, negative_token_button = create_toprow(is_img2img=True) + + with FormRow(variant='compact', elem_id="img2img_extra_networks", visible=False) as extra_networks: + from modules import ui_extra_networks + extra_networks_ui_img2img = ui_extra_networks.create_ui(extra_networks, extra_networks_button, 'img2img') - with gr.Tabs(elem_id="mode_img2img"): - with gr.TabItem('img2img', id='img2img', elem_id="img2img_img2img_tab") as tab_img2img: - init_img = gr.Image(label="Image for img2img", elem_id="img2img_image", show_label=False, source="upload", interactive=True, type="pil", tool="editor", image_mode="RGBA").style(height=480) - add_copy_image_controls('img2img', init_img) + + copy_image_buttons = [] + copy_image_destinations = {} - with gr.TabItem('Sketch', id='img2img_sketch', elem_id="img2img_img2img_sketch_tab") as tab_sketch: - sketch = gr.Image(label="Image for img2img", elem_id="img2img_sketch", show_label=False, source="upload", interactive=True, type="pil", tool="color-sketch", image_mode="RGBA").style(height=480) - add_copy_image_controls('sketch', sketch) + def add_copy_image_controls(tab_name, elem): + with gr.Row(variant="compact", elem_id=f"img2img_copy_to_{tab_name}"): + gr.HTML("Copy image to: ", elem_id=f"img2img_label_copy_to_{tab_name}") - with gr.TabItem('Inpaint', id='inpaint', elem_id="img2img_inpaint_tab") as tab_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").style(height=480) - add_copy_image_controls('inpaint', init_img_with_mask) + for title, name in zip(['img2img', 'sketch', 'inpaint', 'inpaint sketch'], ['img2img', 'sketch', 'inpaint', 'inpaint_sketch']): + if name == tab_name: + gr.Button(title, interactive=False) + copy_image_destinations[name] = elem + continue - with gr.TabItem('Inpaint sketch', id='inpaint_sketch', elem_id="img2img_inpaint_sketch_tab") as tab_inpaint_color: - inpaint_color_sketch = gr.Image(label="Color sketch inpainting", show_label=False, elem_id="inpaint_sketch", source="upload", interactive=True, type="pil", tool="color-sketch", image_mode="RGBA").style(height=480) - inpaint_color_sketch_orig = gr.State(None) - add_copy_image_controls('inpaint_sketch', inpaint_color_sketch) + button = gr.Button(title) + copy_image_buttons.append((button, name, elem)) + + with gr.Accordion("Image Source", open=False): + with gr.Tabs(elem_id="mode_img2img"): + with gr.TabItem('img2img', id='img2img', elem_id="img2img_img2img_tab") as tab_img2img: + init_img = gr.Image(label="Image for img2img", elem_id="img2img_image", show_label=False, source="upload", interactive=True, type="pil", tool="editor", image_mode="RGBA").style(height=480) + add_copy_image_controls('img2img', init_img) - def update_orig(image, state): - if image is not None: - same_size = state is not None and state.size == image.size - has_exact_match = np.any(np.all(np.array(image) == np.array(state), axis=-1)) - edited = same_size and has_exact_match - return image if not edited or state is None else state + with gr.TabItem('Sketch', id='img2img_sketch', elem_id="img2img_img2img_sketch_tab") as tab_sketch: + sketch = gr.Image(label="Image for img2img", elem_id="img2img_sketch", show_label=False, source="upload", interactive=True, type="pil", tool="color-sketch", image_mode="RGBA").style(height=480) + add_copy_image_controls('sketch', sketch) - inpaint_color_sketch.change(update_orig, [inpaint_color_sketch, inpaint_color_sketch_orig], inpaint_color_sketch_orig) + with gr.TabItem('Inpaint', id='inpaint', elem_id="img2img_inpaint_tab") as tab_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").style(height=480) + add_copy_image_controls('inpaint', init_img_with_mask) - with gr.TabItem('Inpaint upload', id='inpaint_upload', elem_id="img2img_inpaint_upload_tab") as tab_inpaint_upload: - init_img_inpaint = gr.Image(label="Image for img2img", show_label=False, source="upload", interactive=True, type="pil", elem_id="img_inpaint_base") - init_mask_inpaint = gr.Image(label="Mask", source="upload", interactive=True, type="pil", elem_id="img_inpaint_mask") + with gr.TabItem('Inpaint sketch', id='inpaint_sketch', elem_id="img2img_inpaint_sketch_tab") as tab_inpaint_color: + inpaint_color_sketch = gr.Image(label="Color sketch inpainting", show_label=False, elem_id="inpaint_sketch", source="upload", interactive=True, type="pil", tool="color-sketch", image_mode="RGBA").style(height=480) + inpaint_color_sketch_orig = gr.State(None) + add_copy_image_controls('inpaint_sketch', inpaint_color_sketch) - with gr.TabItem('Batch', id='batch', elem_id="img2img_batch_tab") as tab_batch: - hidden = '
Disabled when launched with --hide-ui-dir-config.' if shared.cmd_opts.hide_ui_dir_config else '' - gr.HTML( - f"

Process images in a directory on the same machine where the server is running." + - f"
Use an empty output directory to save pictures normally instead of writing to the output directory." + - f"
Add inpaint batch mask directory to enable inpaint batch processing." - f"{hidden}

" + def update_orig(image, state): + if image is not None: + same_size = state is not None and state.size == image.size + has_exact_match = np.any(np.all(np.array(image) == np.array(state), axis=-1)) + edited = same_size and has_exact_match + return image if not edited or state is None else state + + inpaint_color_sketch.change(update_orig, [inpaint_color_sketch, inpaint_color_sketch_orig], inpaint_color_sketch_orig) + + with gr.TabItem('Inpaint upload', id='inpaint_upload', elem_id="img2img_inpaint_upload_tab") as tab_inpaint_upload: + init_img_inpaint = gr.Image(label="Image for img2img", show_label=False, source="upload", interactive=True, type="pil", elem_id="img_inpaint_base") + init_mask_inpaint = gr.Image(label="Mask", source="upload", interactive=True, type="pil", elem_id="img_inpaint_mask") + + with gr.TabItem('Batch', id='batch', elem_id="img2img_batch_tab") as tab_batch: + hidden = '
Disabled when launched with --hide-ui-dir-config.' if shared.cmd_opts.hide_ui_dir_config else '' + gr.HTML( + f"

Process images in a directory on the same machine where the server is running." + + f"
Use an empty output directory to save pictures normally instead of writing to the output directory." + + f"
Add inpaint batch mask directory to enable inpaint batch processing." + f"{hidden}

" + ) + img2img_batch_input_dir = gr.Textbox(label="Input directory", **shared.hide_dirs, elem_id="img2img_batch_input_dir") + img2img_batch_output_dir = gr.Textbox(label="Output directory", **shared.hide_dirs, elem_id="img2img_batch_output_dir") + img2img_batch_inpaint_mask_dir = gr.Textbox(label="Inpaint batch mask directory (required for inpaint batch processing only)", **shared.hide_dirs, elem_id="img2img_batch_inpaint_mask_dir") + + for category in ordered_ui_categories(): + if category == "inpaint": + with FormGroup(elem_id="inpaint_controls", visible=False) as inpaint_controls: + with FormRow(): + mask_blur = gr.Slider(label='Mask blur', minimum=0, maximum=64, step=1, value=4, elem_id="img2img_mask_blur") + mask_alpha = gr.Slider(label="Mask transparency", visible=False, elem_id="img2img_mask_alpha") + + with FormRow(): + inpainting_mask_invert = gr.Radio(label='Mask mode', choices=['Inpaint masked', 'Inpaint not masked'], value='Inpaint masked', type="index", elem_id="img2img_mask_mode") + + with FormRow(): + inpainting_fill = gr.Radio(label='Masked content', choices=['fill', 'original', 'latent noise', 'latent nothing'], value='original', type="index", elem_id="img2img_inpainting_fill") + + with FormRow(): + with gr.Column(): + inpaint_full_res = gr.Radio(label="Inpaint area", choices=["Whole picture", "Only masked"], type="index", value="Whole picture", elem_id="img2img_inpaint_full_res") + + with gr.Column(scale=4): + inpaint_full_res_padding = gr.Slider(label='Only masked padding, pixels', minimum=0, maximum=256, step=4, value=32, elem_id="img2img_inpaint_full_res_padding") + + def select_img2img_tab(tab): + return gr.update(visible=tab in [2, 3, 4]), gr.update(visible=tab == 3), + + for i, elem in enumerate([tab_img2img, tab_sketch, tab_inpaint, tab_inpaint_color, tab_inpaint_upload, tab_batch]): + elem.select( + fn=lambda tab=i: select_img2img_tab(tab), + inputs=[], + outputs=[inpaint_controls, mask_alpha], + ) + + def copy_image(img): + if isinstance(img, dict) and 'image' in img: + return img['image'] + + return img + + for button, name, elem in copy_image_buttons: + button.click( + fn=copy_image, + inputs=[elem], + outputs=[copy_image_destinations[name]], + ) + button.click( + fn=lambda: None, + _js="switch_to_"+name.replace(" ", "_"), + inputs=[], + outputs=[], ) - img2img_batch_input_dir = gr.Textbox(label="Input directory", **shared.hide_dirs, elem_id="img2img_batch_input_dir") - img2img_batch_output_dir = gr.Textbox(label="Output directory", **shared.hide_dirs, elem_id="img2img_batch_output_dir") - img2img_batch_inpaint_mask_dir = gr.Textbox(label="Inpaint batch mask directory (required for inpaint batch processing only)", **shared.hide_dirs, elem_id="img2img_batch_inpaint_mask_dir") - def copy_image(img): - if isinstance(img, dict) and 'image' in img: - return img['image'] + with FormRow(): + resize_mode = gr.Dropdown(label="Resize mode", elem_id="resize_mode", choices=["Just resize", "Crop and resize", "Resize and fill", "Just resize (latent upscale)"], type="index", value="Just resize") - return img + for category in ordered_ui_categories(): + if category == "sampler": + steps, sampler_index = create_sampler_and_steps_selection(samplers_for_img2img, "img2img") - for button, name, elem in copy_image_buttons: - button.click( - fn=copy_image, - inputs=[elem], - outputs=[copy_image_destinations[name]], - ) - button.click( - fn=lambda: None, - _js="switch_to_"+name.replace(" ", "_"), - inputs=[], - outputs=[], - ) + elif category == "dimensions": + with FormRow(): - with FormRow(): - resize_mode = gr.Radio(label="Resize mode", elem_id="resize_mode", choices=["Just resize", "Crop and resize", "Resize and fill", "Just resize (latent upscale)"], type="index", value="Just resize") - - for category in ordered_ui_categories(): - if category == "sampler": - steps, sampler_index = create_sampler_and_steps_selection(samplers_for_img2img, "img2img") - - elif category == "dimensions": - with FormRow(): - with gr.Column(elem_id="img2img_column_size", scale=4): - width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="img2img_width") + #with gr.Column(elem_id="img2img_column_size", scale=4): + width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="img2img_width") + res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="img2img_res_switch_btn") height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="img2img_height") - res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="img2img_res_switch_btn") if opts.dimensions_and_batch_together: - with gr.Column(elem_id="img2img_column_batch"): + + with gr.Row(elem_id="img2img_column_batch"): batch_count = gr.Slider(minimum=1, step=1, label='Batch count', value=1, elem_id="img2img_batch_count") batch_size = gr.Slider(minimum=1, maximum=8, step=1, label='Batch size', value=1, elem_id="img2img_batch_size") - elif category == "cfg": - with FormGroup(): - cfg_scale = gr.Slider(minimum=1.0, maximum=30.0, step=0.5, label='CFG Scale', value=7.0, elem_id="img2img_cfg_scale") - denoising_strength = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, label='Denoising strength', value=0.75, elem_id="img2img_denoising_strength") + elif category == "cfg": + #with FormGroup(): + with FormRow(): + cfg_scale = gr.Slider(minimum=1.0, maximum=30.0, step=0.5, label='CFG Scale', value=7.0, elem_id="img2img_cfg_scale") + denoising_strength = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, label='Denoising strength', value=0.75, elem_id="img2img_denoising_strength") - elif category == "seed": - seed, reuse_seed, subseed, reuse_subseed, subseed_strength, seed_resize_from_h, seed_resize_from_w, seed_checkbox = create_seed_inputs('img2img') + elif category == "seed": + with gr.Group(elem_id="group-seed"): + seed, reuse_seed, subseed, reuse_subseed, subseed_strength, seed_resize_from_h, seed_resize_from_w, seed_checkbox = create_seed_inputs('img2img') - elif category == "checkboxes": - with FormRow(elem_id="img2img_checkboxes", variant="compact"): - restore_faces = gr.Checkbox(label='Restore faces', value=False, visible=len(shared.face_restorers) > 1, elem_id="img2img_restore_faces") - tiling = gr.Checkbox(label='Tiling', value=False, elem_id="img2img_tiling") + elif category == "checkboxes": + #with FormRow(elem_id="img2img_checkboxes", variant="compact"): + with gr.Row(): + restore_faces = gr.Checkbox(label='Restore faces', value=False, visible=len(shared.face_restorers) > 1, elem_id="img2img_restore_faces") + tiling = gr.Checkbox(label='Tiling', value=False, elem_id="img2img_tiling") - elif category == "batch": - if not opts.dimensions_and_batch_together: - with FormRow(elem_id="img2img_column_batch"): - batch_count = gr.Slider(minimum=1, step=1, label='Batch count', value=1, elem_id="img2img_batch_count") - batch_size = gr.Slider(minimum=1, maximum=8, step=1, label='Batch size', value=1, elem_id="img2img_batch_size") + elif category == "batch": + if not opts.dimensions_and_batch_together: + with FormRow(elem_id="img2img_column_batch"): + batch_count = gr.Slider(minimum=1, step=1, label='Batch count', value=1, elem_id="img2img_batch_count") + batch_size = gr.Slider(minimum=1, maximum=8, step=1, label='Batch size', value=1, elem_id="img2img_batch_size") - elif category == "override_settings": - with FormRow(elem_id="img2img_override_settings_row") as row: - override_settings = create_override_settings_dropdown('img2img', row) + elif category == "override_settings": + with FormRow(elem_id="img2img_override_settings_row") as row: + override_settings = create_override_settings_dropdown('img2img', row) - elif category == "scripts": - with FormGroup(elem_id="img2img_script_container"): - custom_inputs = modules.scripts.scripts_img2img.setup_ui() - - elif category == "inpaint": - with FormGroup(elem_id="inpaint_controls", visible=False) as inpaint_controls: - with FormRow(): - mask_blur = gr.Slider(label='Mask blur', minimum=0, maximum=64, step=1, value=4, elem_id="img2img_mask_blur") - mask_alpha = gr.Slider(label="Mask transparency", visible=False, elem_id="img2img_mask_alpha") - - with FormRow(): - inpainting_mask_invert = gr.Radio(label='Mask mode', choices=['Inpaint masked', 'Inpaint not masked'], value='Inpaint masked', type="index", elem_id="img2img_mask_mode") - - with FormRow(): - inpainting_fill = gr.Radio(label='Masked content', choices=['fill', 'original', 'latent noise', 'latent nothing'], value='original', type="index", elem_id="img2img_inpainting_fill") - - with FormRow(): - with gr.Column(): - inpaint_full_res = gr.Radio(label="Inpaint area", choices=["Whole picture", "Only masked"], type="index", value="Whole picture", elem_id="img2img_inpaint_full_res") - - with gr.Column(scale=4): - inpaint_full_res_padding = gr.Slider(label='Only masked padding, pixels', minimum=0, maximum=256, step=4, value=32, elem_id="img2img_inpaint_full_res_padding") - - def select_img2img_tab(tab): - return gr.update(visible=tab in [2, 3, 4]), gr.update(visible=tab == 3), - - for i, elem in enumerate([tab_img2img, tab_sketch, tab_inpaint, tab_inpaint_color, tab_inpaint_upload, tab_batch]): - elem.select( - fn=lambda tab=i: select_img2img_tab(tab), - inputs=[], - outputs=[inpaint_controls, mask_alpha], - ) - - img2img_gallery, generation_info, html_info, html_log = create_output_panel("img2img", opts.outdir_img2img_samples) + elif category == "scripts": + with FormGroup(elem_id="img2img_script_container"): + custom_inputs = modules.scripts.scripts_img2img.setup_ui() + connect_reuse_seed(seed, reuse_seed, generation_info, dummy_component, is_subseed=False) connect_reuse_seed(subseed, reuse_subseed, generation_info, dummy_component, is_subseed=True) @@ -899,7 +970,7 @@ def create_ui(): outputs=[img2img_prompt, dummy_component], ) - img2img_prompt.submit(**img2img_args) + #img2img_prompt.submit(**img2img_args) submit.click(**img2img_args) res_switch_btn.click(lambda w, h: (h, w), inputs=[width, height], outputs=[width, height]) diff --git a/modules/ui_common.py b/modules/ui_common.py index fd047f31..15bc3cb9 100644 --- a/modules/ui_common.py +++ b/modules/ui_common.py @@ -124,6 +124,7 @@ Requested path was: {f} sp.Popen(["xdg-open", path]) with gr.Column(variant='panel', elem_id=f"{tabname}_results"): + with gr.Group(elem_id=f"{tabname}_gallery_container"): result_gallery = gr.Gallery(label='Output', show_label=False, elem_id=f"{tabname}_gallery").style(grid=4) @@ -148,7 +149,8 @@ Requested path was: {f} with gr.Row(): download_files = gr.File(None, file_count="multiple", interactive=False, show_label=False, visible=False, elem_id=f'download_files_{tabname}') - with gr.Group(): + #with gr.Group(): + with gr.Accordion("Generation Info", open=False): html_info = gr.HTML(elem_id=f'html_info_{tabname}') html_log = gr.HTML(elem_id=f'html_log_{tabname}') diff --git a/modules/ui_components.py b/modules/ui_components.py index 284ca0cf..eff7c2d6 100644 --- a/modules/ui_components.py +++ b/modules/ui_components.py @@ -30,7 +30,7 @@ class FormRow(gr.Row, gr.components.FormComponent): class FormGroup(gr.Group, gr.components.FormComponent): """Same as gr.Row but fits inside gradio forms""" - + def get_block_name(self): return "group" @@ -56,3 +56,14 @@ class DropdownMulti(gr.Dropdown): def get_block_name(self): return "dropdown" + +class FormSubGroup(gr.Group, gr.components.FormComponent): + """Same as gr.Row but fits inside gradio forms""" + def __init__(self, **kwargs): + self.variant = "sub-group" + super().__init__(variant="sub-group", **kwargs) + + def get_block_name(self): + return "group" + + \ No newline at end of file diff --git a/screenshot.png b/screenshot.png index 47a1be4e..b9fb4931 100644 Binary files a/screenshot.png and b/screenshot.png differ diff --git a/style.css b/style.css index 05572f66..4e9dfc0b 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,7 @@ max-width: 100%; } -.token-counter{ +.token-counter { position: absolute; display: inline-block; right: 2em; @@ -11,46 +11,48 @@ z-index: 100; } -.token-counter.error span{ - box-shadow: 0 0 0.0 0.3em rgba(255,0,0,0.15), inset 0 0 0.6em rgba(255,0,0,0.075); - border: 2px solid rgba(255,0,0,0.4) !important; +.token-counter.error span { + box-shadow: 0 0 0 .3em rgba(255, 0, 0, .15), inset 0 0 .6em rgba(255, 0, 0, .075); + border: 2px solid rgba(255, 0, 0, .4) !important; } -.token-counter div{ +.token-counter div { display: inline; } -.token-counter span{ - padding: 0.1em 0.75em; +.token-counter span { + padding: .1em .75em; } -#sh{ +#sh { min-width: 2em; min-height: 2em; max-width: 2em; max-height: 2em; flex-grow: 0; - padding-left: 0.25em; - padding-right: 0.25em; - margin: 0.1em 0; + padding-left: .25em; + padding-right: .25em; + margin: .1em 0; opacity: 0%; cursor: default; } -.output-html p {margin: 0 0.5em;} +.output-html p { + margin: 0 .5em; +} -.row > *, -.row > .gr-form > * { +.row>*, +.row>.gr-form>* { min-width: min(120px, 100%); flex: 1 1 0%; } .performance { - font-size: 0.85em; + font-size: .85em; color: #444; } -.performance p{ +.performance p { display: inline-block; } @@ -58,28 +60,29 @@ margin-right: 0; } -.performance .vram { -} - -#txt2img_generate, #img2img_generate { +#img2img_generate, +#txt2img_generate { min-height: 4.5em; } -@media screen and (min-width: 2500px) { - #txt2img_gallery, #img2img_gallery { +@media screen and (min-width:2500px) { + + #img2img_gallery, + #txt2img_gallery { min-height: 768px; } } -#txt2img_gallery img, #img2img_gallery img{ +#img2img_gallery img, +#txt2img_gallery img { object-fit: scale-down; } -#txt2img_actions_column, #img2img_actions_column { - margin: 0.35rem 0.75rem 0.35rem 0; -} -#script_list { - padding: .625rem .75rem 0 .625rem; + +#img2img_actions_column, +#txt2img_actions_column { + margin: .35rem .75rem .35rem 0; } + .justify-center.overflow-x-scroll { justify-content: left; } @@ -92,289 +95,265 @@ margin-right: auto; } -[id$=_random_seed], [id$=_random_subseed], [id$=_reuse_seed], [id$=_reuse_subseed], #open_folder{ +[id$=_random_seed], +[id$=_random_subseed], +[id$=_reuse_seed], +[id$=_reuse_subseed] { min-width: 2.3em; height: 2.5em; flex-grow: 0; - padding-left: 0.25em; - padding-right: 0.25em; + padding-left: .25em; + padding-right: .25em; } -#hidden_element{ +#open_folder { + min-width: 2.3em; + flex-grow: 0; + padding-left: .25em; + padding-right: .25em; +} + +#hidden_element, +#img2img_preview div.left-0.top-0, +#ti_preview div.left-0.top-0, +#txt2img_preview div.left-0.top-0, +.extra-network-cards .card .actions .additional { display: none; } -[id$=_seed_row], [id$=_subseed_row]{ - gap: 0.5rem; - padding: 0.6em; -} - -[id$=_subseed_show_box]{ - min-width: auto; - flex-grow: 0; -} - -[id$=_subseed_show_box] > div{ - border: 0; - height: 100%; -} - -[id$=_subseed_show]{ - min-width: auto; - flex-grow: 0; - padding: 0; -} - -[id$=_subseed_show] label{ - height: 100%; -} - -#txt2img_actions_column, #img2img_actions_column{ +#img2img_actions_column, +#txt2img_actions_column { gap: 0; margin-right: .75rem; } -#txt2img_tools, #img2img_tools{ - gap: 0.4em; +#img2img_tools, +#txt2img_tools { + gap: .4em; } -#interrogate_col{ - min-width: 0 !important; - max-width: 8em !important; +#interrogate_col { margin-right: 1em; - gap: 0; -} -#interrogate, #deepbooru{ - margin: 0em 0.25em 0.5em 0.25em; - min-width: 8em; - max-width: 8em; } -#style_pos_col, #style_neg_col{ +img2img_styles_row { min-width: 8em !important; } -#txt2img_styles_row, #img2img_styles_row{ - gap: 0.25em; - margin-top: 0.3em; +#img2img_styles_row, +#txt2img_styles_row { + gap: .25em; + margin-top: .3em; } -#txt2img_styles_row > button, #img2img_styles_row > button{ +#img2img_styles_row>button, +#txt2img_styles_row>button { margin: 0; } -#txt2img_styles, #img2img_styles{ - padding: 0; +#img2img_styles>label>div, +#txt2img_styles>label>div { + min-height: 2.7em; } -#txt2img_styles > label > div, #img2img_styles > label > div{ - min-height: 3.2em; -} - -ul.list-none{ +ul.list-none { max-height: 35em; z-index: 2000; } -.gr-form{ - background: transparent; -} - -.my-4{ +.my-4 { margin-top: 0; margin-bottom: 0; } -#resize_mode{ - flex: 1.5; -} - -button{ +button { align-self: stretch !important; } -.overflow-hidden, .gr-panel{ +.gr-panel, +.overflow-hidden { overflow: visible !important; } -#x_type, #y_type{ +#x_type, +#y_type { max-width: 10em; } -#txt2img_preview, #img2img_preview, #ti_preview{ +#img2img_preview, +#ti_preview, +#txt2img_preview { position: absolute; width: 320px; left: 0; right: 0; margin-left: auto; margin-right: auto; - margin-top: 34px; z-index: 100; - border: none; + border: 0; border-top-left-radius: 0; border-top-right-radius: 0; } -@media screen and (min-width: 768px) { - #txt2img_preview, #img2img_preview, #ti_preview { +@media screen and (min-width:768px) { + + #img2img_preview, + #ti_preview, + #txt2img_preview { position: absolute; } } -@media screen and (max-width: 767px) { - #txt2img_preview, #img2img_preview, #ti_preview { +@media screen and (max-width:767px) { + + #img2img_preview, + #ti_preview, + #txt2img_preview { position: relative; } } -#txt2img_preview div.left-0.top-0, #img2img_preview div.left-0.top-0, #ti_preview div.left-0.top-0{ - display: none; -} - -fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500, label.block span{ +.gr-block.gr-box span.text-gray-500, +fieldset span.text-gray-500, +label.block span { position: absolute; - top: -0.7em; + top: -.7em; line-height: 1.2em; padding: 0; - margin: 0 0.5em; - - background-color: white; - box-shadow: 6px 0 6px 0px white, -6px 0 6px 0px white; - + margin: 0 .5em; + background-color: #fff; + box-shadow: 6px 0 6px 0#fff, -6px 0 6px 0#fff; z-index: 300; } -.dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span{ - background-color: rgb(31, 41, 55); +.dark .gr-block.gr-box span.text-gray-500, +.dark fieldset span.text-gray-500, +.dark label.block span { box-shadow: none; - border: 1px solid rgba(128, 128, 128, 0.1); + border: 1px solid rgba(128, 128, 128, .1); border-radius: 6px; - padding: 0.1em 0.5em; + border-top: 1px solid rgb(55 65 81); + border-left: 1px solid rgb(55 65 81); + border-right: 1px solid rgb(55 65 81); + background-color: transparent !important; + top: 0 !important; + border: 0 !important; + position: relative; + padding: 5px 1px !important; } -#txt2img_column_batch, #img2img_column_batch{ +#img2img_column_batch, +#txt2img_column_batch { min-width: min(13.5em, 100%) !important; } -#settings fieldset span.text-gray-500, #settings .gr-block.gr-box span.text-gray-500, #settings label.block span{ +#settings .gr-block.gr-box span.text-gray-500, +#settings fieldset span.text-gray-500, +#settings label.block span { position: relative; - border: none; - margin-right: 8em; + border: 0; + margin-right: 0; } -#settings .gr-panel div.flex-col div.justify-between div{ +#settings .gr-panel div.flex-col div.justify-between div { position: relative; z-index: 200; } -#settings{ +#settings, +.extra-network-thumbs .card:hover .additional a { display: block; } -#settings > div{ - border: none; +#settings>div { + border: 0; margin-left: 10em; } -#settings > div.flex-wrap{ +#settings>div.flex-wrap { float: left; display: block; margin-left: 0; width: 10em; } -#settings > div.flex-wrap button{ +#settings>div.flex-wrap button { display: block; - border: none; + border: 0; text-align: left; + padding: .25em .5em; } -#settings_result{ +#settings_result { height: 1.4em; margin: 0 1.2em; } -input[type="range"]{ - margin: 0.5em 0 -0.3em 0; +input[type=range] { + margin: .7em 0 0; } #mask_bug_info { - text-align: center; - display: block; - margin-top: -0.75em; - margin-bottom: -0.75em; + text-align: center; + display: block; + margin-top: -.75em; + margin-bottom: -.75em; } -#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; + opacity: 1 !important; } -/* more gradio's garbage cleanup */ -.min-h-\[4rem\] { min-height: unset !important; } -.min-h-\[6rem\] { min-height: unset !important; } +.min-h-\[4rem\], +.min-h-\[6rem\] { + min-height: unset !important; +} -.progressDiv{ - position: relative; - height: 20px; +.progressDiv { background: #b4c0cc; - border-radius: 3px !important; margin-bottom: -3px; } -.dark .progressDiv{ +.dark .progressDiv { background: #424c5b; } -.progressDiv .progress{ - width: 0%; - height: 20px; +.progressDiv .progress { background: #0060df; - color: white; - font-weight: bold; - line-height: 20px; - padding: 0 8px 0 0; - text-align: right; - border-radius: 3px; + font-weight: 700; overflow: visible; white-space: nowrap; - padding: 0 0.5em; } -.livePreview{ - position: absolute; +.livePreview { z-index: 300; - background-color: white; margin: -4px; } -.dark .livePreview{ - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); +.dark .livePreview { + background-color: rgb(17 24 39/var(--tw-bg-opacity)); } -.livePreview img{ +.livePreview img { position: absolute; - object-fit: contain; width: 100%; height: 100%; + object-fit: scale-down; } -#lightboxModal{ - display: none; - position: fixed; - z-index: 1001; - padding-top: 100px; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(20, 20, 20, 0.95); - user-select: none; - -webkit-user-select: none; +#lightboxModal { + display: none; + position: fixed; + z-index: 1001; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: rgba(20, 20, 20, .95); + user-select: none; + -webkit-user-select: none; } .modalControls { @@ -387,7 +366,7 @@ input[type="range"]{ right: 0; padding: 16px; gap: 16px; - background-color: rgba(0,0,0,0.2); + background-color: rgba(0, 0, 0, .2); } .modalClose { @@ -407,31 +386,29 @@ input[type="range"]{ } .modalClose, -.modalZoom, -.modalTileImage { - color: white; - font-size: 35px; - font-weight: bold; - cursor: pointer; -} - -.modalSave { - color: white; - font-size: 28px; - margin-top: 8px; - font-weight: bold; +.modalSave, +.modalTileImage, +.modalZoom { + color: #fff; + font-size: 35px; + font-weight: 700; cursor: pointer; } -.modalClose:hover, +.modalSave { + font-size: 28px; + margin-top: 8px; +} + .modalClose:focus, -.modalSave:hover, +.modalClose:hover, .modalSave:focus, -.modalZoom:hover, -.modalZoom:focus { - color: #999; - text-decoration: none; - cursor: pointer; +.modalSave:hover, +.modalZoom:focus, +.modalZoom:hover { + color: #999; + text-decoration: none; + cursor: pointer; } #modalImage { @@ -447,49 +424,53 @@ input[type="range"]{ height: 90%; } -.modalPrev, -.modalNext { - cursor: pointer; - position: absolute; - top: 50%; - width: auto; - padding: 16px; - margin-top: -50px; - color: white; - font-weight: bold; - font-size: 20px; - transition: 0.6s ease; - border-radius: 0 3px 3px 0; - user-select: none; - -webkit-user-select: none; +.modalNext, +.modalPrev { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + padding: 16px; + margin-top: -50px; + color: #fff; + font-weight: 700; + font-size: 20px; + transition: .6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + -webkit-user-select: none; } .modalNext { - right: 0; - border-radius: 3px 0 0 3px; + right: 0; + border-radius: 3px 0 0 3px; } -.modalPrev:hover, -.modalNext:hover { - background-color: rgba(0, 0, 0, 0.8); +.modalNext:hover, +.modalPrev:hover { + background-color: rgba(0, 0, 0, .8); } -#imageARPreview{ - position:absolute; - top:0px; - left:0px; - border:2px solid red; - background:rgba(255, 0, 0, 0.3); +#imageARPreview { + position: absolute; + top: 0; + left: 0; + border: 2px solid red; + background: rgba(255, 0, 0, .3); z-index: 900; - pointer-events:none; - display:none + pointer-events: none; + display: none; } -#txt2img_generate_box, #img2img_generate_box{ +#img2img_generate_box, +#txt2img_generate_box { position: relative; } -#txt2img_interrupt, #img2img_interrupt, #txt2img_skip, #img2img_skip{ +#img2img_interrupt, +#img2img_skip, +#txt2img_interrupt, +#txt2img_skip { position: absolute; width: 50%; height: 100%; @@ -497,346 +478,355 @@ input[type="range"]{ display: none; } -#txt2img_interrupt, #img2img_interrupt{ +#img2img_interrupt, +#txt2img_interrupt { left: 0; - border-radius: 0.5rem 0 0 0.5rem; -} -#txt2img_skip, #img2img_skip{ - right: 0; - border-radius: 0 0.5rem 0.5rem 0; + border-radius: .5rem 0 0 .5rem; } +#img2img_skip, +#txt2img_skip { + right: 0; + border-radius: 0 .5rem .5rem 0; +} + +.extra-network-cards .card ul a:hover, .red { - color: red; + color: red; } .gallery-item { --tw-bg-opacity: 0 !important; } -#context-menu{ - z-index:9999; - position:absolute; - display:block; - padding:0px 0; - border:2px solid #a55000; - border-radius:8px; - box-shadow:1px 1px 2px #CE6400; +#context-menu { + z-index: 9999; + position: absolute; + display: block; + padding: 0; + border: 2px solid #a55000; + border-radius: 8px; + box-shadow: 1px 1px 2px #ce6400; width: 200px; } -.context-menu-items{ +.context-menu-items { list-style: none; margin: 0; padding: 0; } -.context-menu-items a{ - display:block; - padding:5px; - cursor:pointer; +.context-menu-items a { + display: block; + padding: 5px; + cursor: pointer; } -.context-menu-items a:hover{ +.context-menu-items a:hover { background: #a55000; } -#quicksettings { - width: fit-content; -} - -#quicksettings > div, #quicksettings > fieldset{ +#quicksettings>div, +#quicksettings>fieldset { max-width: 24em; min-width: 24em; padding: 0; - border: none; + border: 0; box-shadow: none; - background: none; + background: 0 0; margin-right: 10px; } -#quicksettings > div > div > div > label > span { +#quicksettings>div>div>div>label>span { position: relative; margin-right: 9em; margin-bottom: -1em; } -canvas[key="mask"] { +canvas[key=mask] { z-index: 12 !important; filter: invert(); mix-blend-mode: multiply; pointer-events: none; } - -/* gradio 3.4.1 stuff for editable scrollbar values */ -.gr-box > div > div > input.gr-text-input{ +.gr-box>div>div>input.gr-text-input { position: absolute; - right: 0.5em; - top: -0.6em; - z-index: 400; - width: 6em; -} -#quicksettings .gr-box > div > div > input.gr-text-input { - top: -1.12em; + right: .85em; + top: .8em; + z-index: 200; + border-radius: 0; + width: 64px; + margin: 0; + text-align: left; + padding: 5px 2px 5px 5px; + height: 25px !important; } -.row.gr-compact{ +#quicksettings .gr-box>div>div>input.gr-text-input { + top: -1.12em; +} + +.row.gr-compact { overflow: visible; } -#img2img_image, #img2img_image > .h-60, #img2img_image > .h-60 > div, #img2img_image > .h-60 > div > img, -#img2img_sketch, #img2img_sketch > .h-60, #img2img_sketch > .h-60 > div, #img2img_sketch > .h-60 > div > img, -#img2maskimg, #img2maskimg > .h-60, #img2maskimg > .h-60 > div, #img2maskimg > .h-60 > div > img, -#inpaint_sketch, #inpaint_sketch > .h-60, #inpaint_sketch > .h-60 > div, #inpaint_sketch > .h-60 > div > img -{ +#img2img_image, +#img2img_image>.h-60, +#img2img_image>.h-60>div, +#img2img_image>.h-60>div>img { + max-height: 480px !important; +} + +#img2img_sketch, +#img2img_sketch>.h-60, +#img2img_sketch>.h-60>div, +#img2img_sketch>.h-60>div>img, +#img2maskimg, +#inpaint_sketch { height: 480px !important; max-height: 480px !important; min-height: 480px !important; } -/* Extensions */ +#img2maskimg>.h-60, +#img2maskimg>.h-60>div, +#img2maskimg>.h-60>div>img { + max-height: 480px !important; +} -#tab_extensions table{ +#inpaint_sketch>.h-60, +#inpaint_sketch>.h-60>div, +#inpaint_sketch>.h-60>div>img { + height: 480px !important; + max-height: 480px !important; + min-height: 480px !important; +} + +#tab_extensions table { border-collapse: collapse; } -#tab_extensions table td, #tab_extensions table th{ - border: 1px solid #ccc; - padding: 0.25em 0.5em; +#tab_extensions table td, +#tab_extensions table th { + padding: .25em .5em; + border: 1px solid #494c50; } -#tab_extensions table input[type="checkbox"]{ - margin-right: 0.5em; +#tab_extensions table input[type=checkbox] { + margin-right: .5em; + top: -2px; } -#tab_extensions button{ +#tab_extensions button { max-width: 16em; } -#tab_extensions input[disabled="disabled"]{ - opacity: 0.5; +#tab_extensions input[disabled=disabled] { + opacity: .5; } -.extension-tag{ - font-weight: bold; +.extension-tag { + font-weight: 700; font-size: 95%; } -#available_extensions .info{ +#available_extensions .info { margin: 0; } -#available_extensions .date_added{ - opacity: 0.85; +#available_extensions .date_added { + opacity: .85; font-size: 90%; } -#image_buttons_txt2img button, #image_buttons_img2img button, #image_buttons_extras button{ +#image_buttons_extras button, +#image_buttons_img2img button, +#image_buttons_txt2img button { min-width: auto; - padding-left: 0.5em; - padding-right: 0.5em; + padding-left: .5em; + padding-right: .5em; } -.gr-form{ - background-color: white; +.gr-form { + background-color: #fff; } -.dark .gr-form{ - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); +.dark .gr-compact, +.dark .gr-form { + background-color: rgb(31 41 55/var(--tw-bg-opacity)); } -.gr-button-tool, .gr-button-tool-top{ +.gr-button-tool, +.gr-button-tool-top { max-width: 2.5em; min-width: 2.5em !important; height: 2.4em; } -.gr-button-tool{ - margin: 0.6em 0em 0.55em 0; +.gr-button-tool { + margin: .6em 0 .55em; } -.gr-button-tool-top, #settings .gr-button-tool{ - margin: 1.6em 0.7em 0.55em 0; +#settings .gr-button-tool, +.gr-button-tool-top { + margin: 1.6em .7em .55em 0; } - -#modelmerger_results_container{ +#modelmerger_results_container { margin-top: 1em; overflow: visible; } -#modelmerger_models{ +#modelmerger_models { gap: 0; } - -#quicksettings .gr-button-tool{ - margin: 0; - border-color: unset; - background-color: unset; -} - #modelmerger_interp_description>p { - margin: 0!important; + margin: 0 !important; text-align: center; } -#modelmerger_interp_description { - margin: 0.35rem 0.75rem 1.23rem; -} -#img2img_settings > div.gr-form, #txt2img_settings > div.gr-form { - padding-top: 0.9em; - padding-bottom: 0.9em; -} -#txt2img_settings { - padding-top: 1.16em; - padding-bottom: 0.9em; -} -#img2img_settings { - padding-bottom: 0.9em; -} -#img2img_settings div.gr-form .gr-form, #txt2img_settings div.gr-form .gr-form, #train_tabs div.gr-form .gr-form{ - border: none; - padding-bottom: 0.5em; +#modelmerger_interp_description { + margin: .35rem .75rem 1.23rem; } footer { display: none !important; } -#footer{ +#footer { text-align: center; } -#footer div{ +#footer div { display: inline-block; } -#footer .versions{ +#footer .versions { font-size: 85%; - opacity: 0.85; + opacity: .85; } -#txtimg_hr_finalres{ +#txtimg_hr_finalres { min-height: 0 !important; padding: .625rem .75rem; - margin-left: -0.75em - + margin-left: -.75em; } -#txtimg_hr_finalres .resolution{ - font-weight: bold; +#txtimg_hr_finalres .resolution { + font-weight: 700; } -#txt2img_checkboxes, #img2img_checkboxes{ - margin-bottom: 0.5em; - margin-left: 0em; +#img2img_checkboxes, +#txt2img_checkboxes { + margin-bottom: .5em; + margin-left: 0; } -#txt2img_checkboxes > div, #img2img_checkboxes > div{ + +#img2img_checkboxes>div, +#txt2img_checkboxes>div { flex: 0; white-space: nowrap; min-width: auto; } -#img2img_copy_to_img2img, #img2img_copy_to_sketch, #img2img_copy_to_inpaint, #img2img_copy_to_inpaint_sketch{ - margin-left: 0em; +#axis_options, +#img2img_copy_to_img2img, +#img2img_copy_to_inpaint, +#img2img_copy_to_inpaint_sketch, +#img2img_copy_to_sketch { + margin-left: 0; } -#axis_options { - margin-left: 0em; +.inactive { + opacity: .5; } -.inactive{ - opacity: 0.5; -} - -[id*='_prompt_container']{ +[id*=_prompt_container] { gap: 0; } -[id*='_prompt_container'] > div{ - margin: -0.4em 0 0 0; +[id*=_prompt_container]>div { + margin: 0 !important; } .gr-compact { - border: none; -} - -.dark .gr-compact{ - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); - margin-left: 0; -} - -.gr-compact{ + border: 0; overflow: visible; } -.gr-compact > *{ +.dark .gr-compact { + margin-left: 0; } -.gr-compact .gr-block, .gr-compact .gr-form{ - border: none; +.gr-compact .gr-block, +.gr-compact .gr-form { + border: 0; box-shadow: none; } -.gr-compact .gr-box{ +.gr-compact .gr-box { border-radius: .5rem !important; border-width: 1px !important; } -#mode_img2img > div > div{ +#mode_img2img>div>div { gap: 0 !important; } -[id*='img2img_copy_to_'] { - border: none; +[id*=img2img_copy_to_], +div#group-seed>div>div>div>div, +div#group-subseed>div>div>div>div { + border: 0; } -[id*='img2img_copy_to_'] > button { -} - -[id*='img2img_label_copy_to_'] { - font-size: 1.0em; - font-weight: bold; +[id*=img2img_label_copy_to_] { + font-size: 1em; + font-weight: 700; text-align: center; line-height: 2.4em; } -.extra-networks > div > [id *= '_extra_']{ - margin: 0.3em; +.extra-networks>div>[id*=_extra_] { + margin: .3em; } -.extra-network-subdirs{ - padding: 0.2em 0.35em; +.extra-network-subdirs { + padding: .2em .35em; } -.extra-network-subdirs button{ - margin: 0 0.15em; +.extra-network-subdirs button { + margin: 0 .15em; } -#txt2img_extra_networks .search, #img2img_extra_networks .search{ +#img2img_extra_networks .search, +#txt2img_extra_networks .search { display: inline-block; max-width: 16em; - margin: 0.3em; + margin: .3em; align-self: center; } -#txt2img_extra_view, #img2img_extra_view { +#img2img_extra_view, +#txt2img_extra_view { width: auto; } -.extra-network-cards .nocards, .extra-network-thumbs .nocards{ - margin: 1.25em 0.5em 0.5em 0.5em; +.extra-network-cards .nocards, +.extra-network-thumbs .nocards { + margin: 1.25em .5em .5em; } -.extra-network-cards .nocards h1, .extra-network-thumbs .nocards h1{ +.extra-network-cards .nocards h1, +.extra-network-thumbs .nocards h1 { font-size: 1.5em; margin-bottom: 1em; } -.extra-network-cards .nocards li, .extra-network-thumbs .nocards li{ - margin-left: 0.5em; +.extra-network-cards .nocards li, +.extra-network-thumbs .nocards li { + margin-left: .5em; } .extra-network-thumbs { @@ -845,22 +835,19 @@ footer { gap: 10px; } +.extra-network-cards .card, .extra-network-thumbs .card { height: 6em; width: 6em; cursor: pointer; - background-image: url('./file=html/card-no-preview.png'); + background-image: url(./file=html/card-no-preview.png); background-size: cover; background-position: center center; position: relative; } -.extra-network-thumbs .card:hover .additional a { - display: block; -} - .extra-network-thumbs .actions .additional a { - background-image: url('./file=html/image-update.svg'); + background-image: url(./file=html/image-update.svg); background-repeat: no-repeat; background-size: cover; background-position: center center; @@ -883,8 +870,8 @@ footer { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - background: rgba(0,0,0,.5); - color: white; + background: rgba(0, 0, 0, .5); + color: #fff; } .extra-network-thumbs .card:hover .actions .name { @@ -892,70 +879,1007 @@ footer { word-break: break-all; } -.extra-network-cards .card{ +.extra-network-cards .card { display: inline-block; - margin: 0.5em; + margin: .5em; width: 16em; height: 24em; - box-shadow: 0 0 5px rgba(128, 128, 128, 0.5); - border-radius: 0.2em; - position: relative; - + box-shadow: 0 0 5px rgba(128, 128, 128, .5); + border-radius: .2em; background-size: auto 100%; background-position: center; overflow: hidden; - cursor: pointer; - - background-image: url('./file=html/card-no-preview.png') } -.extra-network-cards .card:hover{ - box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35); +.extra-network-cards .card:hover { + box-shadow: 0 0 2px .3em rgba(0, 128, 255, .35); } -.extra-network-cards .card .actions .additional{ - display: none; -} - -.extra-network-cards .card .actions{ +.extra-network-cards .card .actions { position: absolute; bottom: 0; left: 0; right: 0; - padding: 0.5em; - color: white; - background: rgba(0,0,0,0.5); - box-shadow: 0 0 0.25em 0.25em rgba(0,0,0,0.5); - text-shadow: 0 0 0.2em black; + padding: .5em; + color: #fff; + background: rgba(0, 0, 0, .5); + box-shadow: 0 0 .25em .25em rgba(0, 0, 0, .5); + text-shadow: 0 0 .2em #000; } -.extra-network-cards .card .actions:hover{ - box-shadow: 0 0 0.75em 0.75em rgba(0,0,0,0.5) !important; +.extra-network-cards .card .actions:hover { + box-shadow: 0 0 .75em .75em rgba(0, 0, 0, .5) !important; } -.extra-network-cards .card .actions .name{ +.extra-network-cards .card .actions .name { font-size: 1.7em; - font-weight: bold; + font-weight: 700; line-break: anywhere; } -.extra-network-cards .card .actions:hover .additional{ +.extra-network-cards .card .actions:hover .additional { display: block; } -.extra-network-cards .card ul{ - margin: 0.25em 0 0.75em 0.25em; +.extra-network-cards .card ul { + margin: .25em 0 .75em .25em; cursor: unset; } -.extra-network-cards .card ul a{ +.extra-network-cards .card ul a { cursor: pointer; } -.extra-network-cards .card ul a:hover{ - color: red; +#img2img_actions_column, +#txt2img_actions_column { + min-width: unset !important; + flex-grow: 0 !important; } -[id*='_prompt_container'] > div { - margin: 0!important; +#img2img_actions_column>button, +#txt2img_actions_column>button { + flex-grow: 0; + padding-left: .25em; + padding-right: .25em; + margin: .1em 0; } + +#interrogate_col { + max-width: 8em !important; +} + +#img2img_styles_row, +#txt2img_styles_row { + min-width: 8em !important; +} + +#txt2img_styles #img2img_styles { + margin-top: 1em; +} + +.gr-form { + background: 0 0; +} + +#quicksettings div { + margin: 0; +} + +#quicksettings .gr-button-tool { + border: 1px solid #494c50 !important; +} + +.dark .gr-compact { + background: #202124; + border-radius: 0 !important; + padding: .5em; +} + +#settings>div { + padding: 0; +} + +#seed_row, +#subseed_row { + gap: .5rem; +} + +#subseed_show, +#subseed_show_box { + min-width: auto; + flex-grow: 0; +} + +#subseed_show_box>div { + border: 0; + height: 100%; +} + +#subseed_show { + padding: 0; +} + +#subseed_show label { + height: 100%; +} + +#img2img_seed_row, +#txt2img_seed_row, +div#group-seed>div>div>div>div>div, +div#group-subseed>div>div>div>div>div { + padding: 0; +} + +div.sub-group .gr-box { + background: #222325; +} + +#img2img_seed_row button, +#txt2img_seed_row button, +#img2img_subseed_row button, +#txt2img_subseed_row button +{ + border-radius: 0 !important; + display: flex; + align-self: self-end !important; + height: 34px; + width: 34px !important; + min-width: 34px; + max-width: unset; +} + +/* +div.sub-group div{ + border:none !important; +} +*/ + +.dark .gr-panel { + --tw-bg-opacity: 1; + background-color: rgb(17 24 39/var(--tw-bg-opacity)); + border: 0; + border-radius: 0; +} + +.dark .\!border, +.dark .\!border-gray-300, +.dark .border, +.dark .border-gray-100, +.dark .border-gray-200, +.dark .border-gray-300 { + --tw-border-opacity: 1; + border-color: rgb(55 65 81/var(--tw-border-opacity)); + border-radius: 0 !important; +} + +div.gr-form>:last-child { + border-radius: 0 !important; +} + +div.gr-form>:first-child { + border-radius: 0 !important; +} + +div.svelte-10ogue4>:last-child, +div.svelte-10ogue4>div:last-child { + border-radius: 0 !important; +} + +div.svelte-10ogue4>:first-child, +div.svelte-10ogue4>div:first-child { + border-radius: 0 !important; +} + +.dark .gr-input { + --tw-border-opacity: 1; + border-color: rgb(55 65 81/var(--tw-border-opacity)); + --tw-text-opacity: 1; + color: rgb(229 231 235/var(--tw-text-opacity)); + margin-top: 0; + border-radius: 0; + padding: 6px; +} + +.dark .gr-button-primary, +.dark .gr-button-secondary { + --tw-border-opacity: 1; + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + --tw-text-opacity: 1; + color: rgb(255 255 255/var(--tw-text-opacity)); + border-radius: 0; +} + +.dark .gr-button-secondary { + border-color: rgb(75 85 99/var(--tw-border-opacity)); + --tw-gradient-from: #4b5563; + --tw-gradient-to: rgb(75 85 99 / 0); + --tw-gradient-to: #374151; +} + +.dark .gr-button-primary { + border-color: rgb(238 116 0/var(--tw-border-opacity)); + --tw-gradient-from: #CE6400; + --tw-gradient-to: rgb(206 100 0 / 0); + --tw-gradient-to: #CE6400; +} + +#interrogate_col { + min-width: 100px !important; +} + +#img2img_styles, +#txt2img_styles, +textarea { + margin-top: 0; +} + +.dark .dark\:bg-gray-950 { + background-color: #1a1a1a; +} + +.dark .gr-panel { + background-color: #202124; +} + +.dark .gr-box { + background-color: #292a2d; +} + +#img2img_negative_token_counter span, +#img2img_token_counter span, +#txt2img_negative_token_counter span, +#txt2img_token_counter span, +.dark .\!border, +.dark .\!border-gray-300, +.dark .border, +.dark .border-gray-100, +.dark .border-gray-200, +.dark .border-gray-300, +.dark .dark\:border-gray-700, +.dark .gr-input { + border-color: #494c50; +} + +.dark .gr-input { + background-color: #202124; +} + +.dark .gr-check-radio { + border-color: #494c50; + background-color: #292a2d; +} + +.text-gray-400 { + color: #9aa0a6; +} + +.dark .gr-input-label { + --tw-gradient-from: unset; + background-color: #202124; +} + +.dark .gr-check-radio:checked { + background-color: #03d0a8; +} + +.dark .gr-button { + border-color: #494c50; + background-color: #202124; + --tw-gradient-from: unset; +} + +.dark .gr-button:hover { + border-color: #494c50; + background-color: #03d0a8; +} + +.dark .\!bg-gray-200, +.dark .bg-gray-200 { + background-color: #494c50 !important; +} + +.gr-panel { + border: 0 !important; +} + +.gr-box>div>div>label { + width: calc(100% - 64px) !important; +} + +.dark .gr-block { + min-width: 150px; +} + +#toprow div { + border: 0; + gap: 0; + background: #202124; +} + +#img2img_res_switch_btn, +#txt2img_res_switch_btn { + height: auto; +} + +.token, +.token+div input { + margin: 0 !important; +} + +#interrogate_col { + display: flex; + flex-flow: wrap; + gap: .5em !important; +} + +#deepbooru, +#interrogate { + margin: 0; + min-width: unset; + max-width: unset; + width: 37px; +} + +#img2img_actions_column>button, +#txt2img_actions_column>button { + min-width: 2.2em; + min-height: 2.2em; + max-width: 2.2em; + max-height: 2.2em; +} + +#img2img_actions_column+div, +#img2img_actions_column+div+div { + justify-content: space-between; +} + +#img2img_progressbar, +#ti_progressbar, +#txt2img_progressbar { + padding-left: 0; + padding-right: 0; + position: relative; + height: 14px !important; + background: #202124 !important; +} + +#img2img_token_counter, +#txt2img_token_counter { + position: absolute; + right: 0; + top: -1px; +} + +#img2img_negative_token_counter, +#txt2img_negative_token_counter { + height: 2.2em !important; + line-height: 2.2em; + position: absolute; + right: 0; + top: -1px; +} + +.progressDiv { + background: #141414 !important; + border-radius: 0 !important; + height: 16px; + position: absolute; + z-index: 1000; + top: 8px; + width: calc(100% - 16px) !important; + left: 8px; + border: 1px solid #494c50; +} + +.progressDiv .progress { + width: 0%; + height: 14px; + background: #03d0a8; + color: #fff; + line-height: 14px; + text-align: right; + border-radius: 0; + padding: 0 2px; + font-size: 14px; +} + +.gradio-container .mx-auto { + padding-top: 1rem; + padding-bottom: 1rem; +} + +#img2img_toprow div, +#txt2img_toprow div, +.dark .gr-button { + margin: 0; +} + +.gr-form { + min-width: 150px; +} + +#img2img_toprow, +#txt2img_toprow { + padding: 0; + margin: 0; + background: #1a1a1a; +} + +.gr-input-label, +label.bg-white { + padding-top: 2px; +} + +.gr-input-label div:first-child { + position: relative; + top: 3px; +} + +#img2img_styles_row, +#txt2img_styles_row { + display: flex; + flex-direction: row; +} + +.row.gr-compact { + border: 0 !important; + border-radius: 0 !important; +} + +.gap-4 { + gap: .5em; +} + +.dark .gr-box-unrounded { + background: 0 0; +} + +.dark .gr-text-input { + height: 32px !important; +} + +#img2img_image, +#img2img_image>.h-60, +#img2img_image>.h-60>div, +#img2img_image>.h-60>div>img, +#img2maskimg>.h-60, +#img2maskimg>.h-60>div, +#img2maskimg>.h-60>div>img, +.dark .dark\:bg-gray-900, +img2maskimg { + background-color: #1a1a1a; +} + +#lightboxModal { + background-color: #000; +} + +.gallery-item { + border-radius: 0 !important; +} + +.dark .gr-check-radio { + margin-top: 2px; +} + +.dark .\!text-gray-700, +.dark .\!text-gray-800, +.dark .text-gray-700, +.dark .text-gray-800, +.dark .text-gray-900 { + display: flex; +} + +.flex.flex-wrap.gap-2 { + margin-top: 0 !important; +} + +div.svelte-10ogue4>:not(.absolute) { + margin-bottom: .5em; +} + +div.svelte-10ogue4>*+:not(.absolute) { + border-top-width: 1px !important; +} + +div.svelte-10ogue4 #script-list { + border-top-width: 1px !important; +} + +#img2img_image, +#img2img_image>.h-60, +#img2img_image>.h-60>div, +#img2img_image>.h-60>div>img, +#img2maskimg>.h-60, +#img2maskimg>.h-60>div, +#img2maskimg>.h-60>div>img, +img2maskimg { + height: auto !important; + min-height: unset !important; +} + +div#group-seed>div { + margin-bottom: 0; +} + +div.sub-group { + padding: 9px 9px 0; + border: 1px solid #494c50; + margin-top: -9px; + border-top: none; +} + +#txt2img_seed, +#img2img_seed, +#txt2img_subseed, +#img2img_subseed +{ + padding:0; +} + +#txt2img_seed_row > div, +#img2img_seed_row > div, +#txt2img_subseed_row > div, +#img2img_subseed_row > div +{ + border:none; +} + +div#script_list { + border-top: 1px solid #494c50 !important; +} + +#img2img_image div.flex-col, +#img2maskimg div.flex-col { + padding: calc((100%/1.618)*.4); +} + +#resize_mode { + flex: 1; +} + +.dark .gr-check-radio { + position: relative; + top: 3px; +} + +.dark .\!text-gray-700, +.dark .\!text-gray-800, +.dark .text-gray-700, +.dark .text-gray-800, +.dark .text-gray-900 { + align-items: baseline; + margin-top: 1px; +} + +body { + background: #1a1a1a !important; +} + +.dark { + background-color: #1a1a1a; +} + +#open_folder, +#random_seed, +#random_subseed, +#reuse_seed, +#reuse_subseed { + height: 34px; + align-self: flex-end !important; +} + +#img2img_neg_prompt, +#img2img_prompt, +#img2img_styles, +#txt2img_neg_prompt, +#txt2img_prompt, +#txt2img_styles { + padding: 0; +} + +#img2img_neg_prompt, +#img2img_prompt, +#txt2img_neg_prompt, +#txt2img_prompt { + margin-top: 3px; +} + +#img2img_prompt, +#txt2img_prompt { + margin-bottom: .8em; +} + +#img2img_neg_prompt span, +#img2img_prompt span, +#txt2img_neg_prompt span, +#txt2img_prompt span { + color: #797f86; + border: 1px solid #494c50 !important; + margin: 0; + border-radius: 0; + padding-left: 5px !important; +} + +#img2img_neg_prompt label, +#img2img_prompt label, +#txt2img_neg_prompt label, +#txt2img_prompt label { + background: #1a1a1a; + border: 1px solid #494c50; +} + +#toprow div { + background: 0 0 !important; + min-width: unset !important; +} + +#img2img_actions_column, +#txt2img_actions_column { + padding: 0; + display: flex; + justify-content: flex-start; +} + +#img2img_styles label, +#setting_sd_model_checkpoint label, +#txt2img_styles label { + display: flex; + align-items: center; +} + +#setting_sd_model_checkpoint span { + align-self: flex-start; +} + +#img2img_styles span, +#txt2img_styles span { + display: block; + align-self: flex-start; +} + +#img2img_styles label>div, +#txt2img_styles label>div { + width: 100%; + background: #202124; +} + +#img2img_styles, +#txt2img_styles { + background: 0 0; +} + +#setting_sd_model_checkpoint span { + display: none; +} + +#refresh_localization, +#refresh_sd_hypernetwork, +#refresh_sd_model_checkpoint, +#refresh_sd_vae, +#refresh_train_embedding_name, +#refresh_train_hypernetwork_name { + max-width: 34px; + min-width: 34px; + height: 34px; +} + +#img2img_token_counter, +#txt2img_token_counter { + height: 2.2em !important; + line-height: 2.2em; +} + +#img2img_preview, +#ti_preview, +#txt2img_preview { + object-fit: scale-down; + height: auto !important; + margin-top: 57px; +} + +#img2img_gallery, +#txt2img_gallery { + position: relative; + min-height: unset; + max-height: unset; + height: auto; +} + +#img2img_settings+div { + margin-top: 30px; +} + +.dark .bg-white, +.dark .dark\:border-gray-700, +.p-2, +.tabitem { + background-color: #1a1a1a !important; +} + +.tabs>div>button { + border-bottom: 2px solid #494c50; +} + +.tabs>div>.bg-white { + border: 2px solid #1a1a1a; + border-bottom: 2px solid #03d0a8; + color: #03d0a8; +} + +#img2img_interrupt, +#img2img_skip, +#txt2img_interrupt, +#txt2img_skip { + background: #202124; +} + +#img2img_interrupt:hover, +#img2img_skip:hover, +#txt2img_interrupt:hover, +#txt2img_skip:hover { + background: #ef4444; +} + +#quicksettings-header { + align-items: flex-end; + flex-direction: column; +} + +#quicksettings { + align-items: center; + flex-direction: row; + width: auto; +} + +#quicksettings div { + border: 0; + background: 0 0 !important; + padding: 0; +} + +#img2img_gallery div, +#txt2img_gallery div { + background: 0 0 !important; + position: relative; +} + +#img2img_gallery, +#txt2img_gallery { + display: flex; + flex-direction: row; + overflow: hidden !important; +} + +#img2img_gallery .modify-upload, +#txt2img_gallery .modify-upload { + position: absolute; +} + +#img2img_gallery .overflow-y-auto, +#txt2img_gallery .overflow-y-auto { + max-height: unset; + min-height: unset; + width: 100%; +} + +#img2img_gallery .overflow-y-auto>div:first-child, +#txt2img_gallery .overflow-y-auto>div:first-child { + height: calc(100vh - 237px); +} + +#img2img_gallery div>img, +#txt2img_gallery div>img { + height: calc(100% - 60px); + width: auto; + object-fit: scale-down; +} + +#img2img_gallery .backdrop-blur, +#txt2img_gallery .backdrop-blur { + background: #1a1a1a !important; + height: auto; + min-height: auto; + width: 100%; + min-width: 100%; + max-height: calc(100vh - 220px); +} + +#img2img_gallery img+div, +#txt2img_gallery img+div { + background: #202124 !important; +} + +.livePreview { + position: absolute !important; + width: calc(100% - 18px) !important; + max-height: calc(100vh - 280px) !important; + top: 13px; + left: 13px; + right: 0; + bottom: 63px; + pointer-events: all; + overflow: hidden !important; + background-color: #1a1a1a !important; +} + +#img2img_gallery div>div, +#txt2img_gallery div>div { + min-height: auto; +} + +#img2img_gallery .overflow-y-auto, +#txt2img_gallery .overflow-y-auto { + min-height: calc(100vh - 220px) !important; + background: #1a1a1a !important; +} + +#quicksettings { + align-self: end; + background: 0 0; +} + +.dark .gr-box { + height: auto !important; + border-radius: 0 !important; +} + +#img2img_copy_to_img2img, +#img2img_copy_to_inpaint, +#img2img_copy_to_inpaint_sketch, +#img2img_copy_to_sketch { + background: #292a2d; +} + +#img2img_copy_to_img2img button, +#img2img_copy_to_inpaint button, +#img2img_copy_to_inpaint_sketch button, +#img2img_copy_to_sketch button { + min-width: fit-content; + border: 1px solid #494c50 !important; +} + +#img2img_settings, +#txt2img_settings { + min-width: min(680px, 100%) !important; +} + +#img2img_settings_scroll, +#txt2img_settings_scroll { + height: calc(100vh - 296px); + overflow-y: auto !important; + overflow-x: hidden; +} + +#img2img_results, +#txt2img_results { + overflow-x: hidden !important; + flex-grow: 2 !important; + max-height: calc(100vh - 200px); + overflow-y: auto !important; +} + +.flex.row>div { + flex-grow: 1; + flex-shrink: 1; + flex-basis: 5%; +} + +input:focus { + border-color: #03d0a8 !important; +} + +#img2img_settings::before, +#txt2img_settings::before { + pointer-events: none; + content: ""; + position: absolute; + z-index: 1000; + height: calc(100vh - 288px); + top: 88px; + left: 0; + bottom: 0; + width: 100%; + background: linear-gradient(0deg, rgb(26 26 26), transparent 2%, transparent 98%, rgb(26 26 26) 100%); +} + +.dark .dark\:hover\:border-gray-600:hover { + border: 1px solid #03d0a8; + background-color: #1a1a1a; +} + +.dark .dark\:hover\:border-gray-600>div.cursor-pointer { + padding: 12px !important; + margin: -12px !important; + width: auto !important; +} + +.dark .dark\:hover\:border-gray-600:hover>div.cursor-pointer { + background: #03d0a8 !important; + color: #1a1a1a !important; + font-weight: 700 !important; +} + +.dark .dark\:hover\:border-gray-600>div.cursor-pointer+div { + margin-top: .8em !important; +} + +.dark .gr-button { + border-radius: 0 !important; +} + +::-webkit-scrollbar { + width: 10px; +} + +#img2img_settings_scroll::-webkit-scrollbar, +#txt2img_settings_scroll::-webkit-scrollbar { + width: 12px; +} + +::-webkit-scrollbar-track { + box-shadow: inset 0 0 10px 10px #1a1a1a; +} + +::-webkit-scrollbar-thumb { + box-shadow: inset 0 0 10px 10px #292a2d; +} + +::-webkit-scrollbar-button { + display: none; +} + +::-webkit-scrollbar-thumb, +::-webkit-scrollbar-track { + border-left: solid 6px #1a1a1a; + border-radius: 0; +} + +#img2img_settings_scroll::-webkit-scrollbar-thumb, +#img2img_settings_scroll::-webkit-scrollbar-track, +#txt2img_settings_scroll::-webkit-scrollbar-thumb, +#txt2img_settings_scroll::-webkit-scrollbar-track { + border-left: solid 8px transparent; +} + +@media screen and (-webkit-min-device-pixel-ratio:0) { + input[type=range] { + overflow: hidden; + width: 100%; + -webkit-appearance: none; + background-color: #202124; + border: 1px solid #494c50; + } + + input[type=range]::-webkit-slider-runnable-track { + height: 14px; + -webkit-appearance: none; + color: #03d0a8; + margin-top: -1px; + } + + input[type=range]::-webkit-slider-thumb { + width: 14px; + -webkit-appearance: none; + height: 14px; + cursor: ew-resize; + background: #03d0a8; + box-shadow: -1024px 0 0 1024px #03d0a8; + } +} + +input[type=range]::-moz-range-progress { + background-color: #03d0a8; +} + +input[type=range]::-moz-range-track { + background-color: #202124; +} + +input[type=range]::-ms-fill-lower { + background-color: #03d0a8; +} + +input[type=range]::-ms-fill-upper { + background-color: #202124; +} \ No newline at end of file