Add upscale slider to img2img

This commit is contained in:
space-nuko 2023-03-25 12:52:14 -04:00
parent 91ae48fd7e
commit 68999d0b15
6 changed files with 644 additions and 286 deletions

View File

@ -8,8 +8,8 @@ function set_theme(theme){
} }
function selected_gallery_index(){ function selected_gallery_index(){
var buttons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery] .gallery-item') var buttons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery] .thumbnails > .thumbnail-item')
var button = gradioApp().querySelector('[style="display: block;"].tabitem div[id$=_gallery] .gallery-item.\\!ring-2') var button = gradioApp().querySelector('[style="display: block;"].tabitem div[id$=_gallery] .thumbnails > .thumbnail-item.selected')
var result = -1 var result = -1
buttons.forEach(function(v, i){ if(v==button) { result = i } }) buttons.forEach(function(v, i){ if(v==button) { result = i } })
@ -111,6 +111,14 @@ function get_img2img_tab_index() {
return res return res
} }
function get_img2img_tab_index_for_res_preview() {
let res = args_to_array(arguments)
res.splice(-1) // gradio also sends outputs to the arguments, pop them off
res[0] = get_tab_index('mode_img2img')
debugger;
return res
}
function create_submit_args(args){ function create_submit_args(args){
res = [] res = []
for(var i=0;i<args.length;i++){ for(var i=0;i<args.length;i++){
@ -335,3 +343,16 @@ function selectCheckpoint(name){
desiredCheckpointName = name; desiredCheckpointName = name;
gradioApp().getElementById('change_checkpoint').click() gradioApp().getElementById('change_checkpoint').click()
} }
function onCalcResolutionImg2Img(init_img, scale, width, height, resize_mode){
i2iScale = gradioApp().getElementById('img2img_scale')
i2iWidth = gradioApp().getElementById('img2img_width')
i2iHeight = gradioApp().getElementById('img2img_height')
setInactive(i2iScale, scale == 1)
setInactive(i2iWidth, scale > 1)
setInactive(i2iHeight, scale > 1)
return [init_img, width, height, scale, resize_mode]
}

View File

@ -282,6 +282,9 @@ Steps: 20, Sampler: Euler a, CFG scale: 7, Seed: 965400086, Size: 512x512, Model
res["Hires resize-1"] = 0 res["Hires resize-1"] = 0
res["Hires resize-2"] = 0 res["Hires resize-2"] = 0
if "Img2Img Upscale" not in res:
res["Img2Img Upscale"] = 1
restore_old_hires_fix_params(res) restore_old_hires_fix_params(res)
return res return res

View File

@ -78,7 +78,7 @@ def process_batch(p, input_dir, output_dir, inpaint_mask_dir, args):
processed_image.save(os.path.join(output_dir, filename)) processed_image.save(os.path.join(output_dir, filename))
def img2img(id_task: str, mode: int, prompt: str, negative_prompt: str, prompt_styles, init_img, sketch, init_img_with_mask, inpaint_color_sketch, inpaint_color_sketch_orig, init_img_inpaint, init_mask_inpaint, steps: int, sampler_index: int, mask_blur: int, mask_alpha: float, inpainting_fill: int, restore_faces: bool, tiling: bool, n_iter: int, batch_size: int, cfg_scale: float, image_cfg_scale: float, denoising_strength: float, seed: int, subseed: int, subseed_strength: float, seed_resize_from_h: int, seed_resize_from_w: int, seed_enable_extras: bool, height: int, width: int, resize_mode: int, inpaint_full_res: bool, inpaint_full_res_padding: int, inpainting_mask_invert: int, img2img_batch_input_dir: str, img2img_batch_output_dir: str, img2img_batch_inpaint_mask_dir: str, override_settings_texts, *args): def img2img(id_task: str, mode: int, prompt: str, negative_prompt: str, prompt_styles, init_img, sketch, init_img_with_mask, inpaint_color_sketch, inpaint_color_sketch_orig, init_img_inpaint, init_mask_inpaint, steps: int, sampler_index: int, mask_blur: int, mask_alpha: float, inpainting_fill: int, restore_faces: bool, tiling: bool, n_iter: int, batch_size: int, cfg_scale: float, image_cfg_scale: float, denoising_strength: float, seed: int, subseed: int, subseed_strength: float, seed_resize_from_h: int, seed_resize_from_w: int, seed_enable_extras: bool, height: int, width: int, scale: float, resize_mode: int, inpaint_full_res: bool, inpaint_full_res_padding: int, inpainting_mask_invert: int, img2img_batch_input_dir: str, img2img_batch_output_dir: str, img2img_batch_inpaint_mask_dir: str, override_settings_texts, *args):
override_settings = create_override_settings_dict(override_settings_texts) override_settings = create_override_settings_dict(override_settings_texts)
is_batch = mode == 5 is_batch = mode == 5
@ -149,6 +149,7 @@ def img2img(id_task: str, mode: int, prompt: str, negative_prompt: str, prompt_s
inpaint_full_res_padding=inpaint_full_res_padding, inpaint_full_res_padding=inpaint_full_res_padding,
inpainting_mask_invert=inpainting_mask_invert, inpainting_mask_invert=inpainting_mask_invert,
override_settings=override_settings, override_settings=override_settings,
scale=scale,
) )
p.scripts = modules.scripts.scripts_txt2img p.scripts = modules.scripts.scripts_txt2img

View File

@ -929,7 +929,7 @@ class StableDiffusionProcessingTxt2Img(StableDiffusionProcessing):
class StableDiffusionProcessingImg2Img(StableDiffusionProcessing): class StableDiffusionProcessingImg2Img(StableDiffusionProcessing):
sampler = None sampler = None
def __init__(self, init_images: list = None, resize_mode: int = 0, denoising_strength: float = 0.75, image_cfg_scale: float = None, mask: Any = None, mask_blur: int = 4, inpainting_fill: int = 0, inpaint_full_res: bool = True, inpaint_full_res_padding: int = 0, inpainting_mask_invert: int = 0, initial_noise_multiplier: float = None, **kwargs): def __init__(self, init_images: Optional[list] = None, resize_mode: int = 0, denoising_strength: float = 0.75, image_cfg_scale: Optional[float] = None, mask: Any = None, mask_blur: int = 4, inpainting_fill: int = 0, inpaint_full_res: bool = True, inpaint_full_res_padding: int = 0, inpainting_mask_invert: int = 0, initial_noise_multiplier: Optional[float] = None, scale: float = 0, **kwargs):
super().__init__(**kwargs) super().__init__(**kwargs)
self.init_images = init_images self.init_images = init_images
@ -949,11 +949,27 @@ class StableDiffusionProcessingImg2Img(StableDiffusionProcessing):
self.mask = None self.mask = None
self.nmask = None self.nmask = None
self.image_conditioning = None self.image_conditioning = None
self.scale = scale
def get_final_size(self):
if self.scale > 1:
img = self.init_images[0]
width = int(img.width * self.scale)
height = int(img.height * self.scale)
return width, height
else:
return self.width, self.height
def init(self, all_prompts, all_seeds, all_subseeds): def init(self, all_prompts, all_seeds, all_subseeds):
self.sampler = sd_samplers.create_sampler(self.sampler_name, self.sd_model) self.sampler = sd_samplers.create_sampler(self.sampler_name, self.sd_model)
crop_region = None crop_region = None
if self.scale > 1:
self.extra_generation_params["Img2Img Upscale"] = self.scale
self.width, self.height = self.get_final_size()
image_mask = self.image_mask image_mask = self.image_mask
if image_mask is not None: if image_mask is not None:

View File

@ -15,6 +15,7 @@ import warnings
import gradio as gr import gradio as gr
import gradio.routes import gradio.routes
import gradio.utils import gradio.utils
from gradio.events import Releaseable
import numpy as np import numpy as np
from PIL import Image, PngImagePlugin from PIL import Image, PngImagePlugin
from modules.call_queue import wrap_gradio_gpu_call, wrap_queued_call, wrap_gradio_call from modules.call_queue import wrap_gradio_gpu_call, wrap_queued_call, wrap_gradio_call
@ -138,6 +139,26 @@ def calc_resolution_hires(enable, width, height, hr_scale, hr_resize_x, hr_resiz
return f"resize: from <span class='resolution'>{p.width}x{p.height}</span> to <span class='resolution'>{p.hr_resize_x or p.hr_upscale_to_x}x{p.hr_resize_y or p.hr_upscale_to_y}</span>" return f"resize: from <span class='resolution'>{p.width}x{p.height}</span> to <span class='resolution'>{p.hr_resize_x or p.hr_upscale_to_x}x{p.hr_resize_y or p.hr_upscale_to_y}</span>"
def calc_resolution_img2img(mode, scale, resize_x, resize_y, resize_mode, *i2i_images):
init_img = None
if mode in {0, 1, 3, 4}:
init_img = i2i_images[mode]
elif mode == 2:
init_img = i2i_images[mode]["image"]
if not init_img:
return ""
if scale > 1:
width = int(init_img.width * scale)
height = int(init_img.height * scale)
else:
width = resize_x
height = resize_y
return f"resize: from <span class='resolution'>{init_img.width}x{init_img.height}</span> to <span class='resolution'>{width}x{height}</span>"
def apply_styles(prompt, prompt_neg, styles): def apply_styles(prompt, prompt_neg, styles):
prompt = shared.prompt_styles.apply_styles_to_prompt(prompt, styles) prompt = shared.prompt_styles.apply_styles_to_prompt(prompt, styles)
prompt_neg = shared.prompt_styles.apply_negative_styles_to_prompt(prompt_neg, styles) prompt_neg = shared.prompt_styles.apply_negative_styles_to_prompt(prompt_neg, styles)
@ -755,8 +776,13 @@ def create_ui():
elif category == "dimensions": elif category == "dimensions":
with FormRow(): with FormRow():
with gr.Column(elem_id="img2img_column_size", scale=4): 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 FormRow(variant="compact"):
height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="img2img_height") final_resolution = FormHTML(value="", elem_id="img2img_finalres", label="Upscaled resolution", interactive=False)
with FormRow(variant="compact"):
scale = gr.Slider(minimum=1.0, maximum=4.0, step=0.05, label="Upscale by", value=1.0, elem_id="img2img_scale")
with FormRow(variant="compact"):
width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="img2img_width")
height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="img2img_height")
with gr.Column(elem_id="img2img_dimensions_row", scale=1, elem_classes="dimensions-tools"): with gr.Column(elem_id="img2img_dimensions_row", scale=1, elem_classes="dimensions-tools"):
res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="img2img_res_switch_btn") res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="img2img_res_switch_btn")
@ -824,6 +850,41 @@ def create_ui():
outputs=[inpaint_controls, mask_alpha], outputs=[inpaint_controls, mask_alpha],
) )
img2img_resolution_preview_inputs = [dummy_component, # filled in by selected img2img tab index in _js
scale, width, height, resize_mode,
init_img, sketch, init_img_with_mask, inpaint_color_sketch, init_img_inpaint]
for input in img2img_resolution_preview_inputs:
if isinstance(input, Releaseable):
input.release(
fn=calc_resolution_img2img,
_js="get_img2img_tab_index_for_res_preview",
inputs=img2img_resolution_preview_inputs,
outputs=[final_resolution],
show_progress=False,
)
input.release(
None,
_js="onCalcResolutionImg2Img",
inputs=img2img_resolution_preview_inputs,
outputs=[],
show_progress=False,
)
else:
input.change(
fn=calc_resolution_img2img,
_js="get_img2img_tab_index_for_res_preview",
inputs=img2img_resolution_preview_inputs,
outputs=[final_resolution],
show_progress=False,
)
input.change(
None,
_js="onCalcResolutionImg2Img",
inputs=img2img_resolution_preview_inputs,
outputs=[],
show_progress=False,
)
img2img_gallery, generation_info, html_info, html_log = create_output_panel("img2img", opts.outdir_img2img_samples) img2img_gallery, generation_info, html_info, html_log = create_output_panel("img2img", opts.outdir_img2img_samples)
connect_reuse_seed(seed, reuse_seed, generation_info, dummy_component, is_subseed=False) connect_reuse_seed(seed, reuse_seed, generation_info, dummy_component, is_subseed=False)
@ -872,6 +933,7 @@ def create_ui():
subseed, subseed_strength, seed_resize_from_h, seed_resize_from_w, seed_checkbox, subseed, subseed_strength, seed_resize_from_h, seed_resize_from_w, seed_checkbox,
height, height,
width, width,
scale,
resize_mode, resize_mode,
inpaint_full_res, inpaint_full_res,
inpaint_full_res_padding, inpaint_full_res_padding,
@ -957,6 +1019,7 @@ def create_ui():
(seed, "Seed"), (seed, "Seed"),
(width, "Size-1"), (width, "Size-1"),
(height, "Size-2"), (height, "Size-2"),
(scale, "Img2Img Upscale"),
(batch_size, "Batch size"), (batch_size, "Batch size"),
(subseed, "Variation seed"), (subseed, "Variation seed"),
(subseed_strength, "Variation seed strength"), (subseed_strength, "Variation seed strength"),

814
style.css
View File

@ -1,196 +1,48 @@
.container {
/* general gradio fixes */ max-width: 100%;
:root, .dark{
--checkbox-label-gap: 0.25em 0.1em;
--section-header-text-size: 12pt;
--block-background-fill: transparent;
} }
.block.padded{ .token-counter{
padding: 0 !important;
}
div.gradio-container{
max-width: unset !important;
}
.hidden{
display: none;
}
.compact{
background: transparent !important;
padding: 0 !important;
}
div.form{
border-width: 0;
box-shadow: none;
background: transparent;
overflow: visible;
gap: 0.5em;
}
.block.gradio-dropdown,
.block.gradio-slider,
.block.gradio-checkbox,
.block.gradio-textbox,
.block.gradio-radio,
.block.gradio-checkboxgroup,
.block.gradio-number,
.block.gradio-colorpicker
{
border-width: 0 !important;
box-shadow: none !important;
}
.gap.compact{
padding: 0;
gap: 0.2em 0;
}
div.compact{
gap: 1em;
}
.gradio-dropdown ul.options{
z-index: 3000;
}
.gradio-dropdown label span:not(.has-info),
.gradio-textbox label span:not(.has-info),
.gradio-number label span:not(.has-info)
{
margin-bottom: 0;
}
.gradio-dropdown div.wrap.wrap.wrap.wrap{
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.gradio-dropdown .wrap-inner.wrap-inner.wrap-inner{
flex-wrap: unset;
}
.gradio-dropdown .single-select{
white-space: nowrap;
overflow: hidden;
}
.gradio-dropdown .token-remove.remove-all.remove-all{
display: none;
}
.gradio-dropdown.multiselect .token-remove.remove-all.remove-all{
display: flex;
}
.gradio-slider input[type="number"]{
width: 6em;
}
.block.gradio-checkbox {
margin: 0.75em 1.5em 0 0;
}
.gradio-html div.wrap{
height: 100%;
}
div.gradio-html.min{
min-height: 0;
}
.block.gradio-gallery{
background: var(--input-background-fill);
}
.gradio-container .prose a, .gradio-container .prose a:visited{
color: unset;
text-decoration: none;
}
/* general styled components */
.gradio-button.tool{
max-width: 2.2em;
min-width: 2.2em !important;
height: 2.4em;
align-self: end;
line-height: 1em;
border-radius: 0.5em;
}
.checkboxes-row{
margin-bottom: 0.5em;
margin-left: 0em;
}
.checkboxes-row > div{
flex: 0;
white-space: nowrap;
min-width: auto;
}
button.custom-button{
border-radius: var(--button-large-radius);
padding: var(--button-large-padding);
font-weight: var(--button-large-text-weight);
border: var(--button-border-width) solid var(--button-secondary-border-color);
background: var(--button-secondary-background-fill);
color: var(--button-secondary-text-color);
font-size: var(--button-large-text-size);
display: inline-flex;
justify-content: center;
align-items: center;
transition: var(--button-transition);
box-shadow: var(--button-shadow);
text-align: center;
}
/* txt2img/img2img specific */
.block.token-counter{
position: absolute; position: absolute;
display: inline-block; display: inline-block;
right: 1em; right: 2em;
min-width: 0 !important; min-width: 0 !important;
width: auto; width: auto;
z-index: 100; z-index: 100;
top: -0.75em;
} }
.block.token-counter span{ .token-counter.error span{
background: var(--input-background-fill) !important;
box-shadow: 0 0 0.0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075);
border: 2px solid rgba(192,192,192,0.4) !important;
border-radius: 0.4em;
}
.block.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); 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; border: 2px solid rgba(255,0,0,0.4) !important;
} }
.block.token-counter div{ .token-counter div{
display: inline; display: inline;
} }
.block.token-counter span{ .token-counter span{
padding: 0.1em 0.75em; padding: 0.1em 0.75em;
} }
[id$=_subseed_show]{ #sh{
min-width: auto !important; min-width: 2em;
flex-grow: 0 !important; min-height: 2em;
display: flex; max-width: 2em;
max-height: 2em;
flex-grow: 0;
padding-left: 0.25em;
padding-right: 0.25em;
margin: 0.1em 0;
opacity: 0%;
cursor: default;
} }
[id$=_subseed_show] label{ .output-html p {margin: 0 0.5em;}
margin-bottom: 0.5em;
align-self: end; .row > *,
.row > .gr-form > * {
min-width: min(120px, 100%);
flex: 1 1 0%;
} }
.performance { .performance {
@ -223,94 +75,196 @@ button.custom-button{
object-fit: scale-down; object-fit: scale-down;
} }
#txt2img_actions_column, #img2img_actions_column { #txt2img_actions_column, #img2img_actions_column {
gap: 0.5em; margin: 0.35rem 0.75rem 0.35rem 0;
} }
#script_list {
padding: .625rem .75rem 0 .625rem;
}
.justify-center.overflow-x-scroll {
justify-content: left;
}
.justify-center.overflow-x-scroll button:first-of-type {
margin-left: auto;
}
.justify-center.overflow-x-scroll button:last-of-type {
margin-right: auto;
}
[id$=_random_seed], [id$=_random_subseed], [id$=_reuse_seed], [id$=_reuse_subseed], #open_folder{
min-width: 2.3em;
height: 2.5em;
flex-grow: 0;
padding-left: 0.25em;
padding-right: 0.25em;
}
#hidden_element{
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{
gap: 0;
margin-right: .75rem;
}
#txt2img_tools, #img2img_tools{ #txt2img_tools, #img2img_tools{
gap: 0.4em; gap: 0.4em;
} }
.interrogate-col{ #interrogate_col{
min-width: 0 !important; min-width: 0 !important;
max-width: fit-content; max-width: 8em !important;
gap: 0.5em; margin-right: 1em;
gap: 0;
} }
.interrogate-col > button{ #interrogate, #deepbooru{
flex: 1; margin: 0em 0.25em 0.5em 0.25em;
min-width: 8em;
max-width: 8em;
} }
.generate-box{ #style_pos_col, #style_neg_col{
position: relative; min-width: 8em !important;
} }
.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt{
#txt2img_styles_row, #img2img_styles_row{
gap: 0.25em;
margin-top: 0.3em;
}
#txt2img_styles_row > button, #img2img_styles_row > button{
margin: 0;
}
#txt2img_styles, #img2img_styles{
padding: 0;
}
#txt2img_styles > label > div, #img2img_styles > label > div{
min-height: 3.2em;
}
ul.list-none{
max-height: 35em;
z-index: 2000;
}
.gr-form{
background: transparent;
}
.my-4{
margin-top: 0;
margin-bottom: 0;
}
#resize_mode{
flex: 1.5;
}
button{
align-self: stretch !important;
}
.overflow-hidden, .gr-panel{
overflow: visible !important;
}
#x_type, #y_type{
max-width: 10em;
}
#txt2img_preview, #img2img_preview, #ti_preview{
position: absolute; position: absolute;
width: 50%; width: 320px;
height: 100%;
display: none;
background: #b4c0cc;
}
.gradio-button.generate-box-skip:hover, .gradio-button.generate-box-interrupt:hover{
background: #c2cfdb;
}
.gradio-button.generate-box-interrupt{
left: 0; left: 0;
border-radius: 0.5rem 0 0 0.5rem;
}
.gradio-button.generate-box-skip{
right: 0; right: 0;
border-radius: 0 0.5rem 0.5rem 0; margin-left: auto;
margin-right: auto;
margin-top: 34px;
z-index: 100;
border: none;
border-top-left-radius: 0;
border-top-right-radius: 0;
} }
#txtimg_hr_finalres{ @media screen and (min-width: 768px) {
min-height: 0 !important; #txt2img_preview, #img2img_preview, #ti_preview {
padding: .625rem .75rem; position: absolute;
margin-left: -0.75em }
} }
#txtimg_hr_finalres .resolution{ @media screen and (max-width: 767px) {
font-weight: bold; #txt2img_preview, #img2img_preview, #ti_preview {
position: relative;
}
} }
.inactive{ #txt2img_preview div.left-0.top-0, #img2img_preview div.left-0.top-0, #ti_preview div.left-0.top-0{
opacity: 0.5; display: none;
} }
[id$=_column_batch]{ fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500, label.block span{
position: absolute;
top: -0.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;
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);
box-shadow: none;
border: 1px solid rgba(128, 128, 128, 0.1);
border-radius: 6px;
padding: 0.1em 0.5em;
}
#txt2img_column_batch, #img2img_column_batch{
min-width: min(13.5em, 100%) !important; min-width: min(13.5em, 100%) !important;
} }
div.dimensions-tools{ #settings fieldset span.text-gray-500, #settings .gr-block.gr-box span.text-gray-500, #settings label.block span{
min-width: 0 !important; position: relative;
max-width: fit-content;
flex-direction: row;
align-content: center;
}
#mode_img2img .gradio-image > div.fixed-height, #mode_img2img .gradio-image > div.fixed-height img{
height: 480px !important;
max-height: 480px !important;
min-height: 480px !important;
}
.image-buttons button{
min-width: auto;
}
.infotext {
overflow-wrap: break-word;
}
/* settings */
#quicksettings {
width: fit-content;
}
#quicksettings > div, #quicksettings > fieldset{
max-width: 24em;
min-width: 24em;
padding: 0;
border: none; border: none;
box-shadow: none; margin-right: 8em;
background: none; }
#settings .gr-panel div.flex-col div.justify-between div{
position: relative;
z-index: 200;
} }
#settings{ #settings{
@ -322,18 +276,17 @@ div.dimensions-tools{
margin-left: 10em; margin-left: 10em;
} }
#settings > div.tab-nav{ #settings > div.flex-wrap{
float: left; float: left;
display: block; display: block;
margin-left: 0; margin-left: 0;
width: 10em; width: 10em;
} }
#settings > div.tab-nav button{ #settings > div.flex-wrap button{
display: block; display: block;
border: none; border: none;
text-align: left; text-align: left;
white-space: initial;
} }
#settings_result{ #settings_result{
@ -341,8 +294,29 @@ div.dimensions-tools{
margin: 0 1.2em; margin: 0 1.2em;
} }
input[type="range"]{
margin: 0.5em 0 -0.3em 0;
}
#mask_bug_info {
text-align: center;
display: block;
margin-top: -0.75em;
margin-bottom: -0.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;
}
/* more gradio's garbage cleanup */
.min-h-\[4rem\] { min-height: unset !important; }
.min-h-\[6rem\] { min-height: unset !important; }
/* live preview */
.progressDiv{ .progressDiv{
position: relative; position: relative;
height: 20px; height: 20px;
@ -388,8 +362,6 @@ div.dimensions-tools{
height: 100%; height: 100%;
} }
/* fullscreen popup (ie in Lora's (i) button) */
.popup-metadata{ .popup-metadata{
color: black; color: black;
background: white; background: white;
@ -430,54 +402,87 @@ div.dimensions-tools{
padding: 2em; padding: 2em;
} }
/* fullpage image viewer */
#lightboxModal{ #lightboxModal{
display: none; display: none;
position: fixed; position: fixed;
z-index: 1001; z-index: 1001;
left: 0; padding-top: 100px;
top: 0; left: 0;
width: 100%; top: 0;
height: 100%; width: 100%;
overflow: auto; height: 100%;
background-color: rgba(20, 20, 20, 0.95); overflow: auto;
user-select: none; background-color: rgba(20, 20, 20, 0.95);
-webkit-user-select: none; user-select: none;
flex-direction: column; -webkit-user-select: none;
} }
.modalControls { .modalControls {
display: flex; display: grid;
gap: 1em; grid-template-columns: 32px 32px 32px 1fr 32px;
padding: 1em; grid-template-areas: "zoom tile save space close";
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 16px;
gap: 16px;
background-color: rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.2);
} }
.modalClose { .modalClose {
margin-left: auto; grid-area: close;
} }
.modalControls span{
.modalZoom {
grid-area: zoom;
}
.modalSave {
grid-area: save;
}
.modalTileImage {
grid-area: tile;
}
.modalClose,
.modalZoom,
.modalTileImage {
color: white;
font-size: 35px;
font-weight: bold;
cursor: pointer;
}
.modalSave {
color: white; color: white;
font-size: 35px; font-size: 28px;
margin-top: 8px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
width: 1em;
} }
.modalControls span:hover, .modalControls span:focus{ .modalClose:hover,
color: #999; .modalClose:focus,
text-decoration: none; .modalSave:hover,
.modalSave:focus,
.modalZoom:hover,
.modalZoom:focus {
color: #999;
text-decoration: none;
cursor: pointer;
} }
#lightboxModal > img { #modalImage {
display: block; display: block;
margin: auto; margin: auto;
width: auto; width: auto;
} }
#lightboxModal > img.modalImageFullscreen{ .modalImageFullscreen {
object-fit: contain; object-fit: contain;
height: 100%; height: 90%;
} }
.modalPrev, .modalPrev,
@ -507,7 +512,45 @@ div.dimensions-tools{
background-color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.8);
} }
/* context menu (ie for the generate button) */ #imageARPreview{
position:absolute;
top:0px;
left:0px;
border:2px solid red;
background:rgba(255, 0, 0, 0.3);
z-index: 900;
pointer-events:none;
display:none
}
#txt2img_generate_box, #img2img_generate_box{
position: relative;
}
#txt2img_interrupt, #img2img_interrupt, #txt2img_skip, #img2img_skip{
position: absolute;
width: 50%;
height: 100%;
background: #b4c0cc;
display: none;
}
#txt2img_interrupt, #img2img_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;
}
.red {
color: red;
}
.gallery-item {
--tw-bg-opacity: 0 !important;
}
#context-menu{ #context-menu{
z-index:9999; z-index:9999;
@ -536,8 +579,61 @@ div.dimensions-tools{
background: #a55000; background: #a55000;
} }
#quicksettings {
width: fit-content;
}
/* extensions */ #quicksettings > div, #quicksettings > fieldset{
max-width: 24em;
min-width: 24em;
padding: 0;
border: none;
box-shadow: none;
background: none;
margin-right: 10px;
}
#quicksettings > div > div > div > label > span {
position: relative;
margin-right: 9em;
margin-bottom: -1em;
}
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{
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;
}
.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
{
height: 480px !important;
max-height: 480px !important;
min-height: 480px !important;
}
/* Extensions */
#tab_extensions table{ #tab_extensions table{
border-collapse: collapse; border-collapse: collapse;
@ -550,7 +646,6 @@ div.dimensions-tools{
#tab_extensions table input[type="checkbox"]{ #tab_extensions table input[type="checkbox"]{
margin-right: 0.5em; margin-right: 0.5em;
appearance: checkbox;
} }
#tab_extensions button{ #tab_extensions button{
@ -575,7 +670,74 @@ div.dimensions-tools{
font-size: 90%; font-size: 90%;
} }
/* replace original footer with ours */ #image_buttons_txt2img button, #image_buttons_img2img button, #image_buttons_extras button{
min-width: auto;
padding-left: 0.5em;
padding-right: 0.5em;
}
.gr-form{
background-color: white;
}
.dark .gr-form{
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
}
.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-top, #settings .gr-button-tool{
margin: 1.6em 0.7em 0.55em 0;
}
#modelmerger_results_container{
margin-top: 1em;
overflow: visible;
}
#modelmerger_models{
gap: 0;
}
#quicksettings .gr-button-tool{
margin: 0;
border-color: unset;
background-color: unset;
}
#modelmerger_interp_description>p {
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;
}
footer { footer {
display: none !important; display: none !important;
@ -594,7 +756,99 @@ footer {
opacity: 0.85; opacity: 0.85;
} }
/* extra networks UI */ #txtimg_hr_finalres{
min-height: 0 !important;
padding: .625rem .75rem;
margin-left: -0.75em
}
#txtimg_hr_finalres .resolution{
font-weight: bold;
}
#txt2img_checkboxes, #img2img_checkboxes{
margin-bottom: 0.5em;
margin-left: 0em;
}
#txt2img_checkboxes > div, #img2img_checkboxes > div{
flex: 0;
white-space: nowrap;
min-width: auto;
}
#img2img_finalres{
min-height: 0 !important;
padding: .625rem .75rem;
margin-left: -0.75em
}
#img2img_finalres .resolution{
font-weight: bold;
}
#img2img_copy_to_img2img, #img2img_copy_to_sketch, #img2img_copy_to_inpaint, #img2img_copy_to_inpaint_sketch{
margin-left: 0em;
}
#axis_options {
margin-left: 0em;
}
.inactive{
opacity: 0.5;
}
[id*='_prompt_container']{
gap: 0;
}
[id*='_prompt_container'] > div{
margin: -0.4em 0 0 0;
}
.gr-compact {
border: none;
}
.dark .gr-compact{
background-color: rgb(31 41 55 / var(--tw-bg-opacity));
margin-left: 0;
}
.gr-compact{
overflow: visible;
}
.gr-compact > *{
}
.gr-compact .gr-block, .gr-compact .gr-form{
border: none;
box-shadow: none;
}
.gr-compact .gr-box{
border-radius: .5rem !important;
border-width: 1px !important;
}
#mode_img2img > div > div{
gap: 0 !important;
}
[id*='img2img_copy_to_'] {
border: none;
}
[id*='img2img_copy_to_'] > button {
}
[id*='img2img_label_copy_to_'] {
font-size: 1.0em;
font-weight: bold;
text-align: center;
line-height: 2.4em;
}
.extra-networks > div > [id *= '_extra_']{ .extra-networks > div > [id *= '_extra_']{
margin: 0.3em; margin: 0.3em;
@ -607,12 +861,12 @@ footer {
.extra-network-subdirs button{ .extra-network-subdirs button{
margin: 0 0.15em; margin: 0 0.15em;
} }
.extra-networks .tab-nav .search{
#txt2img_extra_networks .search, #img2img_extra_networks .search{
display: inline-block; display: inline-block;
max-width: 16em; max-width: 16em;
margin: 0.3em; margin: 0.3em;
align-self: center; align-self: center;
width: 16em;
} }
#txt2img_extra_view, #img2img_extra_view { #txt2img_extra_view, #img2img_extra_view {
@ -644,7 +898,6 @@ footer {
text-shadow: 2px 2px 3px black; text-shadow: 2px 2px 3px black;
padding: 0.25em; padding: 0.25em;
font-size: 22pt; font-size: 22pt;
width: 1.5em;
} }
.extra-network-cards .card:hover .metadata-button, .extra-network-thumbs .card:hover .metadata-button{ .extra-network-cards .card:hover .metadata-button, .extra-network-thumbs .card:hover .metadata-button{
display: inline-block; display: inline-block;
@ -738,15 +991,12 @@ footer {
left: 0; left: 0;
right: 0; right: 0;
padding: 0.5em; padding: 0.5em;
color: white;
background: rgba(0,0,0,0.5); background: rgba(0,0,0,0.5);
box-shadow: 0 0 0.25em 0.25em 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; text-shadow: 0 0 0.2em black;
} }
.extra-network-cards .card .actions *{
color: white;
}
.extra-network-cards .card .actions:hover{ .extra-network-cards .card .actions:hover{
box-shadow: 0 0 0.75em 0.75em rgba(0,0,0,0.5) !important; box-shadow: 0 0 0.75em 0.75em rgba(0,0,0,0.5) !important;
} }
@ -784,3 +1034,7 @@ footer {
.extra-network-cards .card ul a:hover{ .extra-network-cards .card ul a:hover{
color: red; color: red;
} }
[id*='_prompt_container'] > div {
margin: 0!important;
}