Public/stable-diffusion-webui-ux
1
0
Fork 0
mirror of https://github.com/anapnoe/stable-diffusion-webui-ux.git synced 2026-09-20 01:31:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

add or remove ops to quick settings on the fly no need to reload the ui

Browse Source
This commit is contained in:
anapnoe
2023-02-26 19:36:02 +02:00
parent c4cc11b398
commit a920453c9d
5 changed files with 65 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/svg/close-circle-line.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 392 B

html/svg/close-line.svg
+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 266 B

javascript/ui.js
+24 -7
View File
@@ -592,18 +592,31 @@ onUiUpdate(function(){
const settings_submit = gradioApp().querySelector('#settings_submit');
const quick_parent = gradioApp().querySelector("#quicksettings_overflow");
function add2quickSettings(id, checked){
function add2quickSettings(id, section, checked){
const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea');
let field_settings = setting_quicksettings.value.replace(" ", "");
if(checked){
field_settings += ","+id;
}else{
let setting_row = gradioApp().querySelector('#row_setting_'+id);
//setting_row.id = setting_row.id.replace("row_setting", "quick_row");
quick_parent.append(setting_row);
}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);
//quick_row.id = quick_row.id.replace("quick_row","row_setting");
setting_parent.append(quick_row);
}
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);
@@ -612,14 +625,18 @@ onUiUpdate(function(){
Object.defineProperty(cEvent, "target", {value: settings_submit})
settings_submit.dispatchEvent(cEvent);
//settings_submit.click();
//console.log(id + " - " + checked);
console.log(section + " - "+ id + " - " + checked);
}
gradioApp().querySelectorAll('[id^="add2quick_"]').forEach(function (elem){
let tid = elem.id.split('add2quick_setting_')[1];
gradioApp().querySelectorAll('[id*="add2quick_"]').forEach(function (elem){
let trg = elem.id.split('_add2quick_setting_');
let sid = trg[0];
let tid = trg[1];
let elem_input = gradioApp().querySelector('#'+elem.id+' input');
elem_input.addEventListener('click', function (e) {
add2quickSettings(tid, e.target.checked);
add2quickSettings(tid, sid, e.target.checked);
})
})
modules/ui.py
+13 -13
View File
@@ -1495,7 +1495,7 @@ def create_ui():
outputs=[],
)
def create_setting_component(key, is_quicksettings=False):
def create_setting_component(key, section, is_quicksettings=False):
def fun():
return opts.data[key] if key in opts.data else opts.data_labels[key].default
@@ -1519,25 +1519,25 @@ def create_ui():
if info.refresh is not None:
if is_quicksettings:
with FormRow():
with FormRow(elem_id=f'row_{elem_id}'):
with gr.Box():
with gr.Row(elem_id=f'{elem_id}_row-collapse-one'):
res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
create_refresh_button(res, info.refresh, info.component_args, "refresh_" + key)
with FormRow():
gr.Checkbox(label='', elem_id=f'add2quick_{elem_id}', value=True, interactive=True)
gr.Checkbox(label='', elem_id=f'{section}_add2quick_{elem_id}', value=True, interactive=True)
else:
with FormRow():
with FormRow(elem_id=f'row_{elem_id}'):
with gr.Box():
with gr.Row(elem_id=f'{elem_id}_row-collapse-one'):
res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
create_refresh_button(res, info.refresh, info.component_args, "refresh_" + key)
with FormRow():
gr.Checkbox(label='', elem_id=f'add2quick_{elem_id}', value=False, interactive=True)
gr.Checkbox(label='', elem_id=f'{section}_add2quick_{elem_id}', value=False, interactive=True)
else:
with FormRow():
with FormRow(elem_id=f'row_{elem_id}'):
res = comp(label=info.label, value=fun(), elem_id=elem_id, **(args or {}))
gr.Checkbox(label='', elem_id=f'add2quick_{elem_id}', value=is_quicksettings, interactive=True)
gr.Checkbox(label='', elem_id=f'{section}_add2quick_{elem_id}', value=is_quicksettings, interactive=True)
return res
@@ -1622,7 +1622,7 @@ def create_ui():
elif section_must_be_skipped:
components.append(dummy_component)
else:
component = create_setting_component(k)
component = create_setting_component(k, elem_id)
component_dict[k] = component
components.append(component)
@@ -1708,16 +1708,16 @@ def create_ui():
with gr.Blocks(css=css, analytics_enabled=False, title="Stable Diffusion") as demo:
with gr.Row(elem_id="quicksettings"):
with gr.Row(elem_id="quick_row_sd_model_checkpoint") as qsettings_row:
component = create_setting_component("sd_model_checkpoint", is_quicksettings=True)
with gr.Row(elem_id="top_row_sd_model_checkpoint") as qsettings_row:
component = create_setting_component("sd_model_checkpoint", "sd", is_quicksettings=True)
component_dict["sd_model_checkpoint"] = component
with gr.Column(elem_id="quicksettings_overflow"):
for i, k, item in sorted(quicksettings_list, key=lambda x: quicksettings_names.get(x[1], x[0])):
if( k != "sd_model_checkpoint"):
with gr.Row(elem_id=f"quick_row_{k}") as qsettings_row:
component = create_setting_component(k, is_quicksettings=True)
component_dict[k] = component
#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="quick_menu")
parameters_copypaste.connect_paste_params_buttons()
style.css
+26 -19
View File
@@ -113,12 +113,12 @@ body {
color: inherit;
}
[id^="add2quick_"] {
[id*="add2quick_"] {
min-width: unset !important;
max-width: 42px;
}
[id^="add2quick_"] label {
[id*="add2quick_"] label {
display: block;
position: relative;
cursor: pointer;
@@ -132,7 +132,7 @@ body {
}
/* Hide the browser's default checkbox */
[id^="add2quick_"] input {
[id*="add2quick_"] input {
position: absolute;
opacity: 0;
cursor: pointer;
@@ -141,7 +141,7 @@ body {
}
/* Create a custom checkbox */
[id^="add2quick_"] span {
[id*="add2quick_"] span {
position: absolute;
top: 0;
left: 0;
@@ -157,31 +157,37 @@ body {
/* On mouse-over, add a grey background color */
[id^="add2quick_"] label:hover input ~ span {
[id*="add2quick_"] label:hover input ~ span {
background-color: var(--icon-color);
opacity:1.0;
}
/* When the checkbox is checked, add a blue background */
[id^="add2quick_"] label input:checked ~ span {
-webkit-mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%;
mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%;
[id*="add2quick_"] label input:checked ~ span {
-webkit-mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%;
mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%;
background-color: var(--input-color);
opacity:0.5;
}
[id*="add2quick_"] label:hover input:checked ~ span {
background-color: var(--icon-color);
opacity:1.0;
}
/* Create the checkmark/indicator (hidden when not checked) */
[id^="add2quick_"] label span:after {
[id*="add2quick_"] label span:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
[id^="add2quick_"] label input:checked ~ span:after {
[id*="add2quick_"] label input:checked ~ span:after {
display: block;
}
#add2quick_setting_quicksettings{
[id*="add2quick_setting_quicksettings"]{
display:none;
}
@@ -621,7 +627,7 @@ body {
padding: 0;
}
#quick_row_sd_model_checkpoint {
#top_row_sd_model_checkpoint {
margin-right:50px;
margin-left:50px;
position:relative;
@@ -629,7 +635,7 @@ body {
}
#quick_row_sd_model_checkpoint div {
#top_row_sd_model_checkpoint div {
border: 0;
background: 0;
padding: 0 !important;
@@ -637,11 +643,11 @@ body {
#quick_row_sd_model_checkpoint span {
#top_row_sd_model_checkpoint span {
display:none;
}
#quick_row_sd_model_checkpoint .gr-input {
#top_row_sd_model_checkpoint .gr-input {
padding-right: 37px;
min-height: 34px;
}
@@ -1686,7 +1692,7 @@ canvas[key=mask] {
margin-right:8px;
}
#quicksettings_overflow > div > div > div:nth-child(2),
#quicksettings_overflow > div > div:nth-child(2),
[id$="settings_2img_settings"] > div > div:nth-child(2)
{
flex-shrink: 1 !important;
@@ -1697,17 +1703,18 @@ canvas[key=mask] {
margin-left: -1px;
}
#quicksettings_overflow > div > div > div:nth-child(2) > div,
#quicksettings_overflow > div > div:nth-child(2) > div,
[id$="settings_2img_settings"] > div > div:nth-child(2) > div{
min-width:unset !important;
}
#quicksettings_overflow > div > div,
#quicksettings_overflow > div,
[id$="settings_2img_settings"] > div{
gap:0 !important;
}
#quick_row_sd_model_checkpoint > div > div:nth-child(2){
#row_setting_sd_model_checkpoint,
#top_row_sd_model_checkpoint > div > div:nth-child(2){
display:none;
}