From 68999d0b15d612965e7bc7feb62d6b4d55e112fa Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 25 Mar 2023 12:52:14 -0400
Subject: Add upscale slider to img2img
---
modules/ui.py | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 file changed, 65 insertions(+), 2 deletions(-)
(limited to 'modules/ui.py')
diff --git a/modules/ui.py b/modules/ui.py
index af8546c2..bb548f92 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -15,6 +15,7 @@ import warnings
import gradio as gr
import gradio.routes
import gradio.utils
+from gradio.events import Releaseable
import numpy as np
from PIL import Image, PngImagePlugin
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 {p.width}x{p.height} to {p.hr_resize_x or p.hr_upscale_to_x}x{p.hr_resize_y or p.hr_upscale_to_y}"
+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 {init_img.width}x{init_img.height} to {width}x{height}"
+
+
def apply_styles(prompt, prompt_neg, styles):
prompt = shared.prompt_styles.apply_styles_to_prompt(prompt, styles)
prompt_neg = shared.prompt_styles.apply_negative_styles_to_prompt(prompt_neg, styles)
@@ -755,8 +776,13 @@ def create_ui():
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")
- height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="img2img_height")
+ with FormRow(variant="compact"):
+ 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"):
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],
)
+ 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)
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,
height,
width,
+ scale,
resize_mode,
inpaint_full_res,
inpaint_full_res_padding,
@@ -957,6 +1019,7 @@ def create_ui():
(seed, "Seed"),
(width, "Size-1"),
(height, "Size-2"),
+ (scale, "Img2Img Upscale"),
(batch_size, "Batch size"),
(subseed, "Variation seed"),
(subseed_strength, "Variation seed strength"),
--
cgit v1.2.3
From 7ea5d395c44be208f654b07ec7993aa2952f2510 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sun, 19 Feb 2023 03:45:43 -0800
Subject: Add upscaler to img2img
---
modules/generation_parameters_copypaste.py | 4 ++--
modules/img2img.py | 3 ++-
modules/processing.py | 23 +++++++++++++++++------
modules/ui.py | 10 +++++++---
scripts/xyz_grid.py | 1 +
style.css | 2 +-
6 files changed, 30 insertions(+), 13 deletions(-)
(limited to 'modules/ui.py')
diff --git a/modules/generation_parameters_copypaste.py b/modules/generation_parameters_copypaste.py
index 459de080..0ad2ad4f 100644
--- a/modules/generation_parameters_copypaste.py
+++ b/modules/generation_parameters_copypaste.py
@@ -282,8 +282,8 @@ Steps: 20, Sampler: Euler a, CFG scale: 7, Seed: 965400086, Size: 512x512, Model
res["Hires resize-1"] = 0
res["Hires resize-2"] = 0
- if "Img2Img Upscale" not in res:
- res["Img2Img Upscale"] = 1
+ if "Img2Img upscale" not in res:
+ res["Img2Img upscale"] = 1
restore_old_hires_fix_params(res)
diff --git a/modules/img2img.py b/modules/img2img.py
index d05fa750..959dd96e 100644
--- a/modules/img2img.py
+++ b/modules/img2img.py
@@ -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))
-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):
+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, upscaler: str, 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)
is_batch = mode == 5
@@ -150,6 +150,7 @@ def img2img(id_task: str, mode: int, prompt: str, negative_prompt: str, prompt_s
inpainting_mask_invert=inpainting_mask_invert,
override_settings=override_settings,
scale=scale,
+ upscaler=upscaler,
)
p.scripts = modules.scripts.scripts_txt2img
diff --git a/modules/processing.py b/modules/processing.py
index fc4b166c..afb8cfd1 100644
--- a/modules/processing.py
+++ b/modules/processing.py
@@ -929,7 +929,7 @@ class StableDiffusionProcessingTxt2Img(StableDiffusionProcessing):
class StableDiffusionProcessingImg2Img(StableDiffusionProcessing):
sampler = None
- 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):
+ 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, upscaler: Optional[str] = None, **kwargs):
super().__init__(**kwargs)
self.init_images = init_images
@@ -950,6 +950,7 @@ class StableDiffusionProcessingImg2Img(StableDiffusionProcessing):
self.nmask = None
self.image_conditioning = None
self.scale = scale
+ self.upscaler = upscaler
def get_final_size(self):
if self.scale > 1:
@@ -966,7 +967,16 @@ class StableDiffusionProcessingImg2Img(StableDiffusionProcessing):
crop_region = None
if self.scale > 1:
- self.extra_generation_params["Img2Img Upscale"] = self.scale
+ self.extra_generation_params["Img2Img upscale"] = self.scale
+
+ # Non-latent upscalers are run before sampling
+ # Latent upscalers are run during sampling
+ init_upscaler = None
+ if self.upscaler is not None:
+ self.extra_generation_params["Img2Img upscaler"] = self.upscaler
+ if self.upscaler not in shared.latent_upscale_modes:
+ assert len([x for x in shared.sd_upscalers if x.name == self.upscaler]) > 0, f"could not find upscaler named {self.upscaler}"
+ init_upscaler = self.upscaler
self.width, self.height = self.get_final_size()
@@ -992,7 +1002,7 @@ class StableDiffusionProcessingImg2Img(StableDiffusionProcessing):
image_mask = images.resize_image(2, mask, self.width, self.height)
self.paste_to = (x1, y1, x2-x1, y2-y1)
else:
- image_mask = images.resize_image(self.resize_mode, image_mask, self.width, self.height)
+ image_mask = images.resize_image(self.resize_mode, image_mask, self.width, self.height, init_upscaler)
np_mask = np.array(image_mask)
np_mask = np.clip((np_mask.astype(np.float32)) * 2, 0, 255).astype(np.uint8)
self.mask_for_overlay = Image.fromarray(np_mask)
@@ -1009,7 +1019,7 @@ class StableDiffusionProcessingImg2Img(StableDiffusionProcessing):
image = images.flatten(img, opts.img2img_background_color)
if crop_region is None and self.resize_mode != 3:
- image = images.resize_image(self.resize_mode, image, self.width, self.height)
+ image = images.resize_image(self.resize_mode, image, self.width, self.height, init_upscaler)
if image_mask is not None:
image_masked = Image.new('RGBa', (image.width, image.height))
@@ -1054,8 +1064,9 @@ class StableDiffusionProcessingImg2Img(StableDiffusionProcessing):
self.init_latent = self.sd_model.get_first_stage_encoding(self.sd_model.encode_first_stage(image))
- if self.resize_mode == 3:
- self.init_latent = torch.nn.functional.interpolate(self.init_latent, size=(self.height // opt_f, self.width // opt_f), mode="bilinear")
+ latent_scale_mode = shared.latent_upscale_modes.get(self.upscaler, None) if self.upscaler is not None else shared.latent_upscale_modes.get(shared.latent_upscale_default_mode, "nearest")
+ if latent_scale_mode is not None:
+ self.init_latent = torch.nn.functional.interpolate(self.init_latent, size=(self.height // opt_f, self.width // opt_f), mode=latent_scale_mode["mode"], antialias=latent_scale_mode["antialias"])
if image_mask is not None:
init_mask = latent_mask
diff --git a/modules/ui.py b/modules/ui.py
index bb548f92..24ab0af7 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -767,7 +767,7 @@ def create_ui():
)
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")
+ resize_mode = gr.Radio(label="Resize mode", elem_id="resize_mode", choices=["Just resize", "Crop and resize", "Resize and fill"], type="index", value="Just resize")
for category in ordered_ui_categories():
if category == "sampler":
@@ -797,7 +797,9 @@ def create_ui():
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")
image_cfg_scale = gr.Slider(minimum=0, maximum=3.0, step=0.05, label='Image CFG Scale', value=1.5, elem_id="img2img_image_cfg_scale", visible=shared.sd_model and shared.sd_model.cond_stage_key == "edit")
- denoising_strength = gr.Slider(minimum=0.0, maximum=1.0, step=0.01, label='Denoising strength', value=0.75, elem_id="img2img_denoising_strength")
+ with FormRow():
+ upscaler = gr.Dropdown(label="Upscaler", elem_id="img2img_upscaler", choices=[*shared.latent_upscale_modes, *[x.name for x in shared.sd_upscalers]], value=shared.latent_upscale_default_mode)
+ 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')
@@ -934,6 +936,7 @@ def create_ui():
height,
width,
scale,
+ upscaler,
resize_mode,
inpaint_full_res,
inpaint_full_res_padding,
@@ -1019,7 +1022,8 @@ def create_ui():
(seed, "Seed"),
(width, "Size-1"),
(height, "Size-2"),
- (scale, "Img2Img Upscale"),
+ (scale, "Img2Img upscale"),
+ (upscaler, "Img2Img upscaler"),
(batch_size, "Batch size"),
(subseed, "Variation seed"),
(subseed_strength, "Variation seed strength"),
diff --git a/scripts/xyz_grid.py b/scripts/xyz_grid.py
index 3895a795..3f6c1997 100644
--- a/scripts/xyz_grid.py
+++ b/scripts/xyz_grid.py
@@ -220,6 +220,7 @@ axis_options = [
AxisOption("Clip skip", int, apply_clip_skip),
AxisOption("Denoising", float, apply_field("denoising_strength")),
AxisOptionTxt2Img("Hires upscaler", str, apply_field("hr_upscaler"), choices=lambda: [*shared.latent_upscale_modes, *[x.name for x in shared.sd_upscalers]]),
+ AxisOptionImg2Img("Upscaler", str, apply_field("upscaler"), choices=lambda: [*shared.latent_upscale_modes, *[x.name for x in shared.sd_upscalers]]),
AxisOptionImg2Img("Cond. Image Mask Weight", float, apply_field("inpainting_mask_weight")),
AxisOption("VAE", str, apply_vae, cost=0.7, choices=lambda: list(sd_vae.vae_dict)),
AxisOption("Styles", str, apply_styles, choices=lambda: list(shared.prompt_styles.styles)),
diff --git a/style.css b/style.css
index 7d58b3b2..e824256f 100644
--- a/style.css
+++ b/style.css
@@ -779,7 +779,7 @@ footer {
#img2img_finalres{
min-height: 0 !important;
padding: .625rem .75rem;
- margin-left: -0.75em
+ margin-left: 0.25em
}
#img2img_finalres .resolution{
--
cgit v1.2.3
From c5f9f7c23759f9a74fa2b563451569c8926604ba Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 25 Mar 2023 14:26:36 -0400
Subject: Use .success() callback on img2img preview inputs change
---
javascript/ui.js | 8 -
modules/ui.py | 8 +-
style.css | 772 +++++++++++++++++++------------------------------------
3 files changed, 262 insertions(+), 526 deletions(-)
(limited to 'modules/ui.py')
diff --git a/javascript/ui.js b/javascript/ui.js
index e564aabb..7aa30dc1 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -118,14 +118,6 @@ function get_img2img_tab_index_for_res_preview() {
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){
res = []
for(var i=0;i *,
-.row > .gr-form > * {
- min-width: min(120px, 100%);
- flex: 1 1 0%;
+.compact{
+ background: transparent !important;
+ padding: 0 !important;
}
-.performance {
- font-size: 0.85em;
- color: #444;
+div.form{
+ border-width: 0;
+ box-shadow: none;
+ background: transparent;
+ overflow: visible;
+ gap: 0.5em;
}
-.performance p{
- display: inline-block;
+.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;
}
-.performance .time {
- margin-right: 0;
+.gap.compact{
+ padding: 0;
+ gap: 0.2em 0;
}
-.performance .vram {
+div.compact{
+ gap: 1em;
}
-#txt2img_generate, #img2img_generate {
- min-height: 4.5em;
+.gradio-dropdown ul.options{
+ z-index: 3000;
}
-@media screen and (min-width: 2500px) {
- #txt2img_gallery, #img2img_gallery {
- min-height: 768px;
- }
+.gradio-dropdown label span:not(.has-info),
+.gradio-textbox label span:not(.has-info),
+.gradio-number label span:not(.has-info)
+{
+ margin-bottom: 0;
}
-#txt2img_gallery img, #img2img_gallery img{
- object-fit: scale-down;
+.gradio-dropdown div.wrap.wrap.wrap.wrap{
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
-#txt2img_actions_column, #img2img_actions_column {
- margin: 0.35rem 0.75rem 0.35rem 0;
+
+.gradio-dropdown .wrap-inner.wrap-inner.wrap-inner{
+ flex-wrap: unset;
}
-#script_list {
- padding: .625rem .75rem 0 .625rem;
+
+.gradio-dropdown .single-select{
+ white-space: nowrap;
+ overflow: hidden;
}
-.justify-center.overflow-x-scroll {
- justify-content: left;
+
+.gradio-dropdown .token-remove.remove-all.remove-all{
+ display: none;
}
-.justify-center.overflow-x-scroll button:first-of-type {
- margin-left: auto;
+.gradio-dropdown.multiselect .token-remove.remove-all.remove-all{
+ display: flex;
}
-.justify-center.overflow-x-scroll button:last-of-type {
- margin-right: auto;
+.gradio-slider input[type="number"]{
+ width: 6em;
}
-[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;
+.block.gradio-checkbox {
+ margin: 0.75em 1.5em 0 0;
}
-#hidden_element{
- display: none;
+.gradio-html div.wrap{
+ height: 100%;
+}
+div.gradio-html.min{
+ min-height: 0;
}
-[id$=_seed_row], [id$=_subseed_row]{
- gap: 0.5rem;
- padding: 0.6em;
+.block.gradio-gallery{
+ background: var(--input-background-fill);
}
-[id$=_subseed_show_box]{
- min-width: auto;
- flex-grow: 0;
+.gradio-container .prose a, .gradio-container .prose a:visited{
+ color: unset;
+ text-decoration: none;
}
-[id$=_subseed_show_box] > div{
- border: 0;
- height: 100%;
+
+
+/* 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;
}
-[id$=_subseed_show]{
+.checkboxes-row{
+ margin-bottom: 0.5em;
+ margin-left: 0em;
+}
+.checkboxes-row > div{
+ flex: 0;
+ white-space: nowrap;
min-width: auto;
- flex-grow: 0;
- padding: 0;
}
-[id$=_subseed_show] label{
- height: 100%;
+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_actions_column, #img2img_actions_column{
- gap: 0;
- margin-right: .75rem;
-}
-#txt2img_tools, #img2img_tools{
- gap: 0.4em;
-}
+/* txt2img/img2img specific */
-#interrogate_col{
+.block.token-counter{
+ position: absolute;
+ display: inline-block;
+ right: 1em;
min-width: 0 !important;
- max-width: 8em !important;
- margin-right: 1em;
- gap: 0;
+ width: auto;
+ z-index: 100;
+ top: -0.75em;
}
-#interrogate, #deepbooru{
- margin: 0em 0.25em 0.5em 0.25em;
- min-width: 8em;
- max-width: 8em;
+
+.block.token-counter 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;
}
-#style_pos_col, #style_neg_col{
- min-width: 8em !important;
+.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);
+ border: 2px solid rgba(255,0,0,0.4) !important;
}
-#txt2img_styles_row, #img2img_styles_row{
- gap: 0.25em;
- margin-top: 0.3em;
+.block.token-counter div{
+ display: inline;
}
-#txt2img_styles_row > button, #img2img_styles_row > button{
- margin: 0;
+.block.token-counter span{
+ padding: 0.1em 0.75em;
}
-#txt2img_styles, #img2img_styles{
- padding: 0;
+[id$=_subseed_show]{
+ min-width: auto !important;
+ flex-grow: 0 !important;
+ display: flex;
}
-#txt2img_styles > label > div, #img2img_styles > label > div{
- min-height: 3.2em;
+[id$=_subseed_show] label{
+ margin-bottom: 0.5em;
+ align-self: end;
}
-ul.list-none{
- max-height: 35em;
- z-index: 2000;
+.performance {
+ font-size: 0.85em;
+ color: #444;
}
-.gr-form{
- background: transparent;
+.performance p{
+ display: inline-block;
}
-.my-4{
- margin-top: 0;
- margin-bottom: 0;
+.performance .time {
+ margin-right: 0;
}
-#resize_mode{
- flex: 1.5;
+.performance .vram {
}
-button{
- align-self: stretch !important;
+#txt2img_generate, #img2img_generate {
+ min-height: 4.5em;
}
-.overflow-hidden, .gr-panel{
- overflow: visible !important;
+@media screen and (min-width: 2500px) {
+ #txt2img_gallery, #img2img_gallery {
+ min-height: 768px;
+ }
}
-#x_type, #y_type{
- max-width: 10em;
+#txt2img_gallery img, #img2img_gallery img{
+ object-fit: scale-down;
+}
+#txt2img_actions_column, #img2img_actions_column {
+ gap: 0.5em;
+}
+#txt2img_tools, #img2img_tools{
+ gap: 0.4em;
}
-#txt2img_preview, #img2img_preview, #ti_preview{
+.interrogate-col{
+ min-width: 0 !important;
+ max-width: fit-content;
+ gap: 0.5em;
+}
+.interrogate-col > button{
+ flex: 1;
+}
+
+.generate-box{
+ position: relative;
+}
+.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt{
position: absolute;
- width: 320px;
+ width: 50%;
+ 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;
+ border-radius: 0.5rem 0 0 0.5rem;
+}
+.gradio-button.generate-box-skip{
right: 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;
+ border-radius: 0 0.5rem 0.5rem 0;
}
-@media screen and (min-width: 768px) {
- #txt2img_preview, #img2img_preview, #ti_preview {
- position: absolute;
- }
+#txtimg_hr_finalres, #img2img_finalres {
+ min-height: 0 !important;
+ padding: .625rem .75rem;
+ margin-left: -0.75em
}
-@media screen and (max-width: 767px) {
- #txt2img_preview, #img2img_preview, #ti_preview {
- position: relative;
- }
+#txtimg_hr_finalres .resolution, #img2img_finalres .resolution{
+ font-weight: bold;
}
-#txt2img_preview div.left-0.top-0, #img2img_preview div.left-0.top-0, #ti_preview div.left-0.top-0{
- display: none;
+.inactive{
+ opacity: 0.5;
}
-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;
+[id$=_column_batch]{
+ min-width: min(13.5em, 100%) !important;
+}
- background-color: white;
- box-shadow: 6px 0 6px 0px white, -6px 0 6px 0px white;
+div.dimensions-tools{
+ min-width: 0 !important;
+ max-width: fit-content;
+ flex-direction: row;
+ align-content: center;
+}
- z-index: 300;
+#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;
}
-.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;
+.image-buttons button{
+ min-width: auto;
}
-#txt2img_column_batch, #img2img_column_batch{
- min-width: min(13.5em, 100%) !important;
+.infotext {
+ overflow-wrap: break-word;
}
-#settings fieldset span.text-gray-500, #settings .gr-block.gr-box span.text-gray-500, #settings label.block span{
- position: relative;
- border: none;
- margin-right: 8em;
+/* settings */
+#quicksettings {
+ width: fit-content;
}
-#settings .gr-panel div.flex-col div.justify-between div{
- position: relative;
- z-index: 200;
+#quicksettings > div, #quicksettings > fieldset{
+ max-width: 24em;
+ min-width: 24em;
+ padding: 0;
+ border: none;
+ box-shadow: none;
+ background: none;
}
#settings{
@@ -276,17 +322,18 @@ fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500, label.block s
margin-left: 10em;
}
-#settings > div.flex-wrap{
+#settings > div.tab-nav{
float: left;
display: block;
margin-left: 0;
width: 10em;
}
-#settings > div.flex-wrap button{
+#settings > div.tab-nav button{
display: block;
border: none;
text-align: left;
+ white-space: initial;
}
#settings_result{
@@ -294,29 +341,8 @@ fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500, label.block s
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{
position: relative;
height: 20px;
@@ -362,6 +388,8 @@ input[type="range"]{
height: 100%;
}
+/* fullscreen popup (ie in Lora's (i) button) */
+
.popup-metadata{
color: black;
background: white;
@@ -402,87 +430,54 @@ input[type="range"]{
padding: 2em;
}
+/* fullpage image viewer */
+
#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;
+ display: none;
+ position: fixed;
+ z-index: 1001;
+ 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;
+ flex-direction: column;
}
.modalControls {
- display: grid;
- grid-template-columns: 32px 32px 32px 1fr 32px;
- grid-template-areas: "zoom tile save space close";
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- padding: 16px;
- gap: 16px;
+ display: flex;
+ gap: 1em;
+ padding: 1em;
background-color: rgba(0,0,0,0.2);
}
-
.modalClose {
- grid-area: close;
-}
-
-.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;
+ margin-left: auto;
}
-
-.modalSave {
+.modalControls span{
color: white;
- font-size: 28px;
- margin-top: 8px;
+ font-size: 35px;
font-weight: bold;
cursor: pointer;
+ width: 1em;
}
-.modalClose:hover,
-.modalClose:focus,
-.modalSave:hover,
-.modalSave:focus,
-.modalZoom:hover,
-.modalZoom:focus {
- color: #999;
- text-decoration: none;
- cursor: pointer;
+.modalControls span:hover, .modalControls span:focus{
+ color: #999;
+ text-decoration: none;
}
-#modalImage {
+#lightboxModal > img {
display: block;
margin: auto;
width: auto;
}
-.modalImageFullscreen {
+#lightboxModal > img.modalImageFullscreen{
object-fit: contain;
- height: 90%;
+ height: 100%;
}
.modalPrev,
@@ -512,45 +507,7 @@ input[type="range"]{
background-color: rgba(0, 0, 0, 0.8);
}
-#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 (ie for the generate button) */
#context-menu{
z-index:9999;
@@ -579,61 +536,8 @@ input[type="range"]{
background: #a55000;
}
-#quicksettings {
- width: fit-content;
-}
-
-#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 */
+/* extensions */
#tab_extensions table{
border-collapse: collapse;
@@ -646,6 +550,7 @@ canvas[key="mask"] {
#tab_extensions table input[type="checkbox"]{
margin-right: 0.5em;
+ appearance: checkbox;
}
#tab_extensions button{
@@ -670,74 +575,7 @@ canvas[key="mask"] {
font-size: 90%;
}
-#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;
-}
+/* replace original footer with ours */
footer {
display: none !important;
@@ -756,99 +594,7 @@ footer {
opacity: 0.85;
}
-#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.25em
-}
-
-#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 UI */
.extra-networks > div > [id *= '_extra_']{
margin: 0.3em;
@@ -861,12 +607,12 @@ footer {
.extra-network-subdirs button{
margin: 0 0.15em;
}
-
-#txt2img_extra_networks .search, #img2img_extra_networks .search{
+.extra-networks .tab-nav .search{
display: inline-block;
max-width: 16em;
margin: 0.3em;
align-self: center;
+ width: 16em;
}
#txt2img_extra_view, #img2img_extra_view {
@@ -898,6 +644,7 @@ footer {
text-shadow: 2px 2px 3px black;
padding: 0.25em;
font-size: 22pt;
+ width: 1.5em;
}
.extra-network-cards .card:hover .metadata-button, .extra-network-thumbs .card:hover .metadata-button{
display: inline-block;
@@ -991,12 +738,15 @@ footer {
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;
}
+.extra-network-cards .card .actions *{
+ color: white;
+}
+
.extra-network-cards .card .actions:hover{
box-shadow: 0 0 0.75em 0.75em rgba(0,0,0,0.5) !important;
}
@@ -1034,7 +784,3 @@ footer {
.extra-network-cards .card ul a:hover{
color: red;
}
-
-[id*='_prompt_container'] > div {
- margin: 0!important;
-}
--
cgit v1.2.3
From c9647c8d23efa8c939c6af39878784e246082122 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 25 Mar 2023 16:11:41 -0400
Subject: Support Gradio's theme API
---
modules/shared.py | 35 +++++++++++++++++++++++++++++++++++
modules/ui.py | 2 +-
webui.py | 1 +
3 files changed, 37 insertions(+), 1 deletion(-)
(limited to 'modules/ui.py')
diff --git a/modules/shared.py b/modules/shared.py
index 11be3985..2f7892cd 100644
--- a/modules/shared.py
+++ b/modules/shared.py
@@ -4,6 +4,7 @@ import json
import os
import sys
import time
+import requests
from PIL import Image
import gradio as gr
@@ -54,6 +55,21 @@ ui_reorder_categories = [
"scripts",
]
+# https://huggingface.co/datasets/freddyaboulton/gradio-theme-subdomains/resolve/main/subdomains.json
+gradio_hf_hub_themes = [
+ "gradio/glass",
+ "gradio/monochrome",
+ "gradio/seafoam",
+ "gradio/soft",
+ "freddyaboulton/dracula_revamped",
+ "gradio/dracula_test",
+ "abidlabs/dracula_test",
+ "abidlabs/pakistan",
+ "dawood/microsoft_windows",
+ "ysharma/steampunk"
+]
+
+
cmd_opts.disable_extension_access = (cmd_opts.share or cmd_opts.listen or cmd_opts.server_name) and not cmd_opts.enable_insecure_extension_access
devices.device, devices.device_interrogate, devices.device_gfpgan, devices.device_esrgan, devices.device_codeformer = \
@@ -387,6 +403,7 @@ options_templates.update(options_section(('ui', "User interface"), {
"ui_reorder": OptionInfo(", ".join(ui_reorder_categories), "txt2img/img2img UI item order"),
"ui_extra_networks_tab_reorder": OptionInfo("", "Extra networks tab order"),
"localization": OptionInfo("None", "Localization (requires restart)", gr.Dropdown, lambda: {"choices": ["None"] + list(localization.localizations.keys())}, refresh=lambda: localization.list_localizations(cmd_opts.localizations_dir)),
+ "gradio_theme": OptionInfo("Default", "Gradio theme (requires restart)", gr.Dropdown, lambda: {"choices": ["Default"] + gradio_hf_hub_themes})
}))
options_templates.update(options_section(('ui', "Live previews"), {
@@ -599,6 +616,24 @@ clip_model = None
progress_print_out = sys.stdout
+gradio_theme = gr.themes.Base()
+
+
+def reload_gradio_theme(theme_name=None):
+ global gradio_theme
+ if not theme_name:
+ theme_name = opts.gradio_theme
+
+ if theme_name == "Default":
+ gradio_theme = gr.themes.Default()
+ else:
+ try:
+ gradio_theme = gr.themes.ThemeClass.from_hub(theme_name)
+ except requests.exceptions.ConnectionError:
+ print("Can't access HuggingFace Hub, falling back to default Gradio theme")
+ gradio_theme = gr.themes.Default()
+
+
class TotalTQDM:
def __init__(self):
diff --git a/modules/ui.py b/modules/ui.py
index af8546c2..6e049881 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -1592,7 +1592,7 @@ def create_ui():
for _interface, label, _ifid in interfaces:
shared.tab_names.append(label)
- with gr.Blocks(css=css, analytics_enabled=False, title="Stable Diffusion") as demo:
+ with gr.Blocks(css=css, theme=shared.gradio_theme, analytics_enabled=False, title="Stable Diffusion") as demo:
with gr.Row(elem_id="quicksettings", variant="compact"):
for i, k, item in sorted(quicksettings_list, key=lambda x: quicksettings_names.get(x[1], x[0])):
component = create_setting_component(k, is_quicksettings=True)
diff --git a/webui.py b/webui.py
index 30f3e4a1..6986e576 100644
--- a/webui.py
+++ b/webui.py
@@ -150,6 +150,7 @@ def initialize():
shared.opts.onchange("sd_vae", wrap_queued_call(lambda: modules.sd_vae.reload_vae_weights()), call=False)
shared.opts.onchange("sd_vae_as_default", wrap_queued_call(lambda: modules.sd_vae.reload_vae_weights()), call=False)
shared.opts.onchange("temp_dir", ui_tempdir.on_tmpdir_changed)
+ shared.opts.onchange("gradio_theme", shared.reload_gradio_theme)
startup_timer.record("opts onchange")
shared.reload_hypernetworks()
--
cgit v1.2.3
From 77f9db3b080fafbc39c1b188777a93b5a1ab0f9e Mon Sep 17 00:00:00 2001
From: AUTOMATIC <16777216c@gmail.com>
Date: Mon, 27 Mar 2023 12:59:12 +0300
Subject: serve css as independent files
---
modules/ui.py | 74 +++++++++++++++++++++++++++++++++--------------------------
1 file changed, 41 insertions(+), 33 deletions(-)
(limited to 'modules/ui.py')
diff --git a/modules/ui.py b/modules/ui.py
index af8546c2..eb5fcd3f 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -70,17 +70,6 @@ def gr_show(visible=True):
sample_img2img = "assets/stable-samples/img2img/sketch-mountains-input.jpg"
sample_img2img = sample_img2img if os.path.exists(sample_img2img) else None
-css_hide_progressbar = """
-.wrap .m-12 svg { display:none!important; }
-.wrap .m-12::before { content:"Loading..." }
-.wrap .z-20 svg { display:none!important; }
-.wrap .z-20::before { content:"Loading..." }
-.wrap.cover-bg .z-20::before { content:"" }
-.progress-bar { display:none!important; }
-.meta-text { display:none!important; }
-.meta-text-center { display:none!important; }
-"""
-
# Using constants for these since the variation selector isn't visible.
# Important that they exactly match script.js for tooltip to work.
random_symbol = '\U0001f3b2\ufe0f' # 🎲️
@@ -1566,22 +1555,6 @@ def create_ui():
(train_interface, "Train", "ti"),
]
- css = ""
-
- for cssfile in modules.scripts.list_files_with_name("style.css"):
- if not os.path.isfile(cssfile):
- continue
-
- with open(cssfile, "r", encoding="utf8") as file:
- css += file.read() + "\n"
-
- if os.path.exists(os.path.join(data_path, "user.css")):
- with open(os.path.join(data_path, "user.css"), "r", encoding="utf8") as file:
- css += file.read() + "\n"
-
- if not cmd_opts.no_progressbar_hiding:
- css += css_hide_progressbar
-
interfaces += script_callbacks.ui_tabs_callback()
interfaces += [(settings_interface, "Settings", "settings")]
@@ -1592,7 +1565,7 @@ def create_ui():
for _interface, label, _ifid in interfaces:
shared.tab_names.append(label)
- with gr.Blocks(css=css, analytics_enabled=False, title="Stable Diffusion") as demo:
+ with gr.Blocks(analytics_enabled=False, title="Stable Diffusion") as demo:
with gr.Row(elem_id="quicksettings", variant="compact"):
for i, k, item in sorted(quicksettings_list, key=lambda x: quicksettings_names.get(x[1], x[0])):
component = create_setting_component(k, is_quicksettings=True)
@@ -1777,25 +1750,60 @@ def create_ui():
return demo
-def reload_javascript():
+def webpath(fn):
+ if fn.startswith(script_path):
+ web_path = os.path.relpath(fn, script_path).replace('\\', '/')
+ else:
+ web_path = os.path.abspath(fn)
+
+ return f'file={web_path}?{os.path.getmtime(fn)}'
+
+
+def javascript_html():
script_js = os.path.join(script_path, "script.js")
- head = f'\n'
+ head = f'\n'
inline = f"{localization.localization_js(shared.opts.localization)};"
if cmd_opts.theme is not None:
inline += f"set_theme('{cmd_opts.theme}');"
for script in modules.scripts.list_scripts("javascript", ".js"):
- head += f'\n'
+ head += f'\n'
for script in modules.scripts.list_scripts("javascript", ".mjs"):
- head += f'\n'
+ head += f'\n'
head += f'\n'
+ return head
+
+
+def css_html():
+ head = ""
+
+ def stylesheet(fn):
+ return f''
+
+ for cssfile in modules.scripts.list_files_with_name("style.css"):
+ if not os.path.isfile(cssfile):
+ continue
+
+ head += stylesheet(cssfile)
+
+ if os.path.exists(os.path.join(data_path, "user.css")):
+ head += stylesheet(os.path.join(data_path, "user.css"))
+
+ return head
+
+
+def reload_javascript():
+ js = javascript_html()
+ css = css_html()
+
def template_response(*args, **kwargs):
res = shared.GradioTemplateResponseOriginal(*args, **kwargs)
- res.body = res.body.replace(b'', f'{head}'.encode("utf8"))
+ res.body = res.body.replace(b'', f'{js}'.encode("utf8"))
+ res.body = res.body.replace(b'