From 2b7abd5c535e587f1d6d9634a03c0fb41dc3b6b8 Mon Sep 17 00:00:00 2001
From: anapnoe <124302297+anapnoe@users.noreply.github.com>
Date: Mon, 6 Mar 2023 05:43:38 +0200
Subject: [PATCH] fix issue with checkpoint change
added pacman preloader, fix hires id name
---
javascript/hires_fix.js | 2 +-
javascript/progressbar.js | 10 +-
javascript/ui.js | 112 +++++++++++++++++----
modules/generation_parameters_copypaste.py | 4 +-
modules/ui.py | 23 +++--
style.css | 35 +++++--
6 files changed, 142 insertions(+), 44 deletions(-)
diff --git a/javascript/hires_fix.js b/javascript/hires_fix.js
index 01e4fa40..9fc7543a 100644
--- a/javascript/hires_fix.js
+++ b/javascript/hires_fix.js
@@ -12,7 +12,7 @@ function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_
hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x')
hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y')
- gradioApp().getElementById('txt2img_hires_fix_sub-group').style.display = opts.use_old_hires_fix_width_height ? "none" : ""
+ gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "block"
setInactive(hrUpscaleBy, opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0)
setInactive(hrResizeX, opts.use_old_hires_fix_width_height || hr_resize_x == 0)
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index 04294f8d..7261f9e0 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -210,11 +210,11 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
if(res.live_preview && gallery){
- var rect = gallery.getBoundingClientRect()
- if(rect.width){
- livePreview.style.width = rect.width + "px"
- livePreview.style.height = rect.height + "px"
- }
+ //var rect = gallery.getBoundingClientRect()
+ //if(rect.width){
+ //livePreview.style.width = rect.width + "px"
+ //livePreview.style.height = rect.height + "px"
+ //}
var img = new Image();
img.onload = function() {
diff --git a/javascript/ui.js b/javascript/ui.js
index 4cf1cb43..941a16d6 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -690,8 +690,7 @@ onUiUpdate(function(){
}
function navTabClicked(e){
- const idx = parseInt(e.currentTarget.getAttribute("tab-id"));
- console.log(idx);
+ const idx = parseInt(e.currentTarget.getAttribute("tab-id"));
navigate2TabItem(idx);
}
@@ -760,33 +759,44 @@ onUiUpdate(function(){
// add - remove quicksettings
const settings_submit = gradioApp().querySelector('#settings_submit');
const quick_parent = gradioApp().querySelector("#quicksettings_overflow_container");
+ const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea');
+ function saveQuickSettings(){
+ const iEvent = new Event("input");
+ Object.defineProperty(iEvent, "target", {value: setting_quicksettings})
+ setting_quicksettings.dispatchEvent(iEvent);
+ const cEvent = new Event("click");//submit
+ Object.defineProperty(cEvent, "target", {value: settings_submit})
+ settings_submit.dispatchEvent(cEvent);
+ //console.log(setting_quicksettings.value);
+ }
- function add2quickSettings(id, section, checked){
- const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea');
+ /*
+ function addModelCheckpoint(){
+ if(setting_quicksettings.value.indexOf("sd_model_checkpoint") === -1){
+ setting_quicksettings.value += ",sd_model_checkpoint";
+ }
+ saveQuickSettings();
+ }
+ */
+
+ function add2quickSettings(id, section, checked){
let field_settings = setting_quicksettings.value.replace(" ", "");
if(checked){
field_settings += ","+id;
let setting_row = gradioApp().querySelector('#row_setting_'+id);
quick_parent.append(setting_row);
+ setting_row.classList.add("warning");
}else{
field_settings = field_settings.replaceAll(id, ",");
const setting_parent = gradioApp().querySelector("#"+section+"_settings_2img_settings");
- let quick_row = gradioApp().querySelector('#row_setting_'+id);
- //console.log(quick_row);
+ let quick_row = gradioApp().querySelector('#row_setting_'+id);
setting_parent.append(quick_row);
-
+ quick_row.classList.remove("warning");
}
field_settings = field_settings.replace(/,{2,}/g, ',');
setting_quicksettings.value = field_settings;
-
- const iEvent = new Event("input");
- Object.defineProperty(iEvent, "target", {value: setting_quicksettings})
- setting_quicksettings.dispatchEvent(iEvent);
-
- const cEvent = new Event("click");//submit
- Object.defineProperty(cEvent, "target", {value: settings_submit})
- settings_submit.dispatchEvent(cEvent);
- //settings_submit.click();
+ //addModelCheckpoint();
+ saveQuickSettings();
//console.log(section + " - "+ id + " - " + checked);
}
gradioApp().querySelectorAll('[id*="add2quick_"]').forEach(function (elem){
@@ -798,6 +808,33 @@ onUiUpdate(function(){
add2quickSettings(tid, sid, e.target.checked);
})
})
+ /*
+ gradioApp().querySelectorAll("#quicksettings_overflow_container input[type='range']").forEach(function (elem,i){
+
+ let clone_range = elem.cloneNode(true);
+ clone_range.id = elem.id+"_clone";
+ let parent = elem.parentElement;
+ parent.append(clone_range);
+ elem.style.display = "none";
+
+ clone_range.addEventListener('change', function (e) {
+ let range = e.target;
+ let rid = range.id.split("_clone")[0];
+ let n_range = range.parentElement.querySelector("#"+rid);
+ let n_num = range.parentElement.querySelector("input[type=number]");
+ n_range.value = e.target.value;
+ n_num.value = e.target.value;
+ //const iEvent = new Event("input");
+ //Object.defineProperty(iEvent, "target", {value: n_range})
+ //n_range.dispatchEvent(iEvent);
+ })
+ })
+ */
+
+
+ //addModelCheckpoint();
+
+ //selectCheckpoint
// draggable reordable quicksettings
@@ -1011,11 +1048,30 @@ function update_token_counter(button_id) {
function restart_reload(){
-
+ let bg_color = getComputedStyle(gradioApp().querySelector(".container")).getPropertyValue('--main-bg-color');
+ let primary_color = getComputedStyle(gradioApp().querySelector(".icon-info")).getPropertyValue('--primary-color');
+ let panel_color = getComputedStyle(gradioApp().querySelector(".dark .gr-box")).getPropertyValue('--panel-bg-color');
- //document.html.innerHTML +=' ';
- document.body.style.backgroundColor = "#1a1a1a";
- document.body.innerHTML='Reloading...
';
+ localStorage.setItem("bg_color", bg_color);
+ localStorage.setItem("primary_color", primary_color);
+ localStorage.setItem("panel_color", panel_color);
+
+ if(localStorage.hasOwnProperty('bg_color')){
+ bg_color = localStorage.getItem("bg_color");
+ primary_color = localStorage.getItem("primary_color");
+ panel_color = localStorage.getItem("panel_color");
+ }
+
+ document.body.style.backgroundColor = bg_color;
+
+ let style = document.createElement('style');
+ style.type = 'text/css';
+ style.innerHTML = '.loader{position:absolute;top:50vh;left:50vw;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .circles{position:absolute;left:-5px;top:0;height:60px;width:180px} .circles span{position:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:'+panel_color+'} .circles span.one{right:80px} .circles span.two{right:40px} .circles span.three{right:0px} .circles{-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear} @-webkit-keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}} @keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}} .pacman{position:absolute;left:0;top:0;height:60px;width:60px} .pacman .eye{position:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:'+bg_color+'} .pacman span{position:absolute;top:0;left:0;height:60px;width:60px} .pacman span::before{content:"";position:absolute;left:0;height:30px;width:60px;background-color:'+primary_color+'} .pacman .top::before{top:0;border-radius:60px 60px 0px 0px} .pacman .bottom::before{bottom:0;border-radius:0px 0px 60px 60px} .pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0px 0px 60px} .pacman .top{-webkit-animation:animtop 0.5s infinite;animation:animtop 0.5s infinite} @-webkit-keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}} @keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}} .pacman .bottom{-webkit-animation:animbottom 0.5s infinite;animation:animbottom 0.5s infinite} @-webkit-keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}} @keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}';
+
+ document.getElementsByTagName('head')[0].appendChild(style);
+ document.body.innerHTML='';
+
+
setTimeout(function(){location.reload()},2000)
return []
@@ -1037,3 +1093,19 @@ function selectCheckpoint(name){
}
+document.addEventListener('readystatechange', function (e) {
+ document.body.style.display = "none";
+ if(localStorage.hasOwnProperty('bg_color')){
+ document.getElementsByTagName("html")[0].style.backgroundColor = localStorage.getItem("bg_color");
+ document.body.style.backgroundColor = localStorage.getItem("bg_color");
+ }
+})
+
+window.onload = function() {
+ //document.getElementsByTagName("html")[0].style.backgroundColor = localStorage.getItem("bg_color");
+ //document.body.style.backgroundColor = localStorage.getItem("bg_color");
+
+ //document.body.style.display = "none";
+ setTimeout(function(){document.body.style.display = "block";},100)
+
+}
diff --git a/modules/generation_parameters_copypaste.py b/modules/generation_parameters_copypaste.py
index 89dc23bf..cbab1555 100644
--- a/modules/generation_parameters_copypaste.py
+++ b/modules/generation_parameters_copypaste.py
@@ -374,7 +374,7 @@ def connect_paste(button, paste_fields, input_comp, override_settings_component,
v = params.get(param_name, None)
if v is None:
continue
-
+
if setting_name == "sd_model_checkpoint" and shared.opts.disable_weights_auto_swap:
continue
@@ -384,7 +384,7 @@ def connect_paste(button, paste_fields, input_comp, override_settings_component,
if v == current_value:
continue
- vals[param_name] = v
+ vals[param_name] = v
vals_pairs = [f"{k}: {v}" for k, v in vals.items()]
diff --git a/modules/ui.py b/modules/ui.py
index e5a6d53d..2d06673c 100644
--- a/modules/ui.py
+++ b/modules/ui.py
@@ -554,7 +554,7 @@ def create_ui():
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():
+ with gr.Row(elem_id="txt2img_hires_fix_row1"):
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)
@@ -564,7 +564,7 @@ def create_ui():
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"):
- with gr.Row():
+ with gr.Row(elem_id="txt2img_hires_fix_row2"):
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")
@@ -1617,7 +1617,7 @@ def create_ui():
previous_section = item.section
if k in quicksettings_names and not shared.cmd_opts.freeze_settings:
- quicksettings_list.append((i, k, item))
+ quicksettings_list.append((i, k, item))
components.append(dummy_component)
elif section_must_be_skipped:
components.append(dummy_component)
@@ -1718,8 +1718,8 @@ def create_ui():
with gr.Row(elem_id="quicksettings"):
with gr.Row(elem_id="top_row_sd_model_checkpoint"):
- component = create_setting_component("sd_model_checkpoint", "sd", is_quicksettings=True)
- component_dict["sd_model_checkpoint"] = component
+ sd_model_checkpoint = create_setting_component("sd_model_checkpoint", "sd", is_quicksettings=True)
+ component_dict['sd_model_checkpoint'] = sd_model_checkpoint
with gr.Column(elem_id="quicksettings_overflow"):
with gr.Row(elem_id="quicksettings_actions"):
@@ -1729,13 +1729,14 @@ def create_ui():
with gr.Column(elem_id="quicksettings_overflow_container") as qsettings_row:
for i, k, item in sorted(quicksettings_list, key=lambda x: quicksettings_names.get(x[1], x[0])):
if( str(k) != "sd_model_checkpoint"):
- #with gr.Row(elem_id=f"quick_row_{k}") as qsettings_row:
+ #with gr.Row(elem_id=f"quick_row_{k}") as qsettings_row:
component = create_setting_component(k, item.section[0], is_quicksettings=True)
component_dict[k] = component
gr.Row(elem_id="extra_networks_menu")
gr.Row(elem_id="quick_menu")
- parameters_copypaste.connect_paste_params_buttons()
+
+ parameters_copypaste.connect_paste_params_buttons()
with gr.Tabs(elem_id="tabs") as tabs:
@@ -1764,7 +1765,7 @@ def create_ui():
for i, k, item in quicksettings_list:
component = component_dict[k]
-
+
component.change(
fn=lambda value, k=k: run_settings_single(value, key=k),
inputs=[component],
@@ -1784,6 +1785,12 @@ def create_ui():
inputs=[component_dict['sd_model_checkpoint'], dummy_component],
outputs=[component_dict['sd_model_checkpoint'], text_settings],
)
+ sd_model_checkpoint.change(
+ fn=lambda value, _: run_settings_single(value, key='sd_model_checkpoint'),
+ _js="function(v){ var res = desiredCheckpointName; desiredCheckpointName = ''; return [res || v, null]; }",
+ inputs=[component_dict['sd_model_checkpoint'], dummy_component],
+ outputs=[component_dict['sd_model_checkpoint'], text_settings],
+ )
component_keys = [k for k in opts.data_labels.keys() if k in component_dict]
diff --git a/style.css b/style.css
index 887664ee..49bdfa27 100644
--- a/style.css
+++ b/style.css
@@ -1,4 +1,4 @@
-:host{--main-bg-color:hsl(0deg 0% 10%);--primary-color:hsl(168deg 97% 41%);--input-bg-color:hsl(225deg 6% 13%);--input-border-color:hsl(214deg 5% 30%);--panel-bg-color:hsl(225deg 5% 17%);--panel-border-color:hsl(214deg 5% 30%);--panel-border-radius:0px;--subgroup-bg-color:hsl(0deg 0% 10%);--subgroup-input-bg-color:hsl(225deg 6% 13%);--subgroup-input-border-color:hsl(214deg 5% 30%);--subpanel-bg-color:hsl(220deg 4% 14%);--subpanel-border-color:hsl(214deg 5% 30%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(210deg 3% 36%);--input-focus-color:hsl(168deg 97% 41%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(0deg 84% 60%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(168deg 97% 41%);--icon-hover-color:hsl(0deg 0% 10%);--icon-size:22px;--nav-bg-color:hsl(0deg 0% 4%);--nav-color:hsl(210deg 4% 80%);--nav-hover-color:hsl(0deg 0% 4%);--input-color:hsl(210deg 4% 80%);--label-color:hsl(210deg 4% 80%);--subgroup-input-color:hsl(0deg 0% 0%);--placeholder-color:hsl(214deg 5% 30%);--text-color:hsl(210deg 4% 80%);--mobile-outside-gap-size:2px;--mobile-inside-padding-size:2px;--frame-bg-color:hsl(225deg 6% 13%);}/*BREAKPOINT_CSS_CONTENT*/
+:host{--main-bg-color:hsl(195deg 22% 8%);--primary-color:hsl(159deg 96% 55%);--input-bg-color:hsl(202deg 25% 12%);--input-border-color:hsl(200deg 24% 32%);--panel-bg-color:hsl(200deg 24% 20%);--panel-border-color:hsl(200deg 24% 32%);--panel-border-radius:4px;--subgroup-bg-color:hsl(195deg 22% 8%);--subgroup-input-bg-color:hsl(200deg 24% 8%);--subgroup-input-border-color:hsl(200deg 24% 32%);--subpanel-bg-color:hsl(202deg 25% 12%);--subpanel-border-color:hsl(200deg 24% 32%);--subpanel-border-radius:8px;--textarea-focus-color:hsl(152deg 3% 36%);--input-focus-color:hsl(159deg 96% 55%);--outside-gap-size:8px;--inside-padding-size:8px;--tool-button-size:34px;--tool-button-radius:16px;--generate-button-height:70px;--cancel-color:hsl(200deg 24% 32%);--max-padding:max(var(--outside-gap-size),var(--inside-padding-size));--icon-color:hsl(159deg 96% 55%);--icon-hover-color:hsl(195deg 22% 8%);--icon-size:22px;--nav-bg-color:hsl(194deg 24% 4%);--nav-color:hsl(201deg 24% 77%);--nav-hover-color:hsl(194deg 24% 4%);--input-color:hsl(159deg 96% 55%);--label-color:hsl(201deg 24% 77%);--subgroup-input-color:hsl(302deg 100% 100%);--placeholder-color:hsl(200deg 24% 32%);--text-color:hsl(201deg 24% 77%);--mobile-outside-gap-size:3px;--mobile-inside-padding-size:3px;--frame-bg-color:hsl(200deg 25% 12%);}/*BREAKPOINT_CSS_CONTENT*/
/*
Theme Name: DarkUX
@@ -986,6 +986,13 @@ div.svelte-10ogue4 #script-list {
}
*/
+.warning{
+ filter: sepia(100%) saturate(100%) brightness(70%) hue-rotate(320deg);
+}
+
+.output-html {
+ min-height: unset;
+}
.dark .\!text-gray-700,
.dark .\!text-gray-800,
@@ -993,7 +1000,7 @@ div.svelte-10ogue4 #script-list {
.dark .text-gray-800,
.dark .text-gray-900 {
align-items: baseline;
- margin-top: 1px;
+ margin-top: 0px;
}
.dark .gr-input {
@@ -1084,8 +1091,8 @@ label.bg-white {
.gr-box>div>div>input.gr-text-input {
position: absolute;
- right: calc(var(--inside-padding-size) + 1px);
- top: calc(var(--inside-padding-size) + 1px);
+ right: calc(var(--inside-padding-size) + 0px);
+ top: calc(var(--inside-padding-size) + 0px);
z-index: 200;
border-radius: 0;
width: 64px;
@@ -1865,7 +1872,7 @@ canvas[key=mask] {
gap:0 !important;
}
-#settings_sd #row_setting_sd_model_checkpoint,
+/*#settings_sd #row_setting_sd_model_checkpoint,*/
#top_row_sd_model_checkpoint > div > div:nth-child(2){
display:none;
}
@@ -2007,7 +2014,7 @@ canvas[key=mask] {
top: var(--outside-gap-size);
left: var(--outside-gap-size);
right: 0;
- bottom: 60px;
+ bottom: 0;
pointer-events: all;
overflow: hidden !important;
/*background-color: transparent !important;*/
@@ -3208,10 +3215,16 @@ ul.list-none {
.livePreview {
width: calc(100% - (var(--outside-gap-size) * 2)) !important;
max-height: unset !important;
+ bottom:60px;
}
div.svelte-10ogue4>*:first-child.livePreview {
- height: calc(100% - 60px - var(--outside-gap-size) - 2px) !important;
+ /*height: calc(100% - 60px - var(--outside-gap-size) - 2px) !important;*/
+ height: auto !important;
+ }
+
+ div.svelte-10ogue4>*:first-child.livePreview > img {
+ height: auto !important;
}
[id$="png_2img_results"]{
@@ -3221,6 +3234,7 @@ ul.list-none {
[id$="settings_2img_settings"] {
max-height: none;
}
+
#nav_menu_header_tabs,
#tab_extensions td,
#tab_extensions th {
@@ -3232,7 +3246,7 @@ ul.list-none {
#tab_extensions th:first-child,
#tab_extensions th:last-child
{
- display:table-cell;
+ display:table-cell !important;
}
#quicksettings {
@@ -3515,6 +3529,9 @@ li.coffee-circle {
.tooltip-html a{
color: var(--primary-color);
}
+
+
+
/**********************/
/* Sliders Scrollbars */
/**********************/
@@ -3657,4 +3674,6 @@ input[type=range]::-ms-fill-upper {
}
+
+
/*BREAKPOINT_CSS_CONTENT*/
\ No newline at end of file