Skip to content

Commit 0fd00f9

Browse files
ilian6806ilian6806
authored
Merge pull request #15 from ilian6806/develop
Latest SD version support
2 parents 39d29d9 + ade184a commit 0fd00f9

File tree

4 files changed

+146
-73
lines changed

4 files changed

+146
-73
lines changed

‎javascript/state.core.js‎

Lines changed: 36 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,10 @@ state.core = (function () {
77
const ELEMENTS = {
88
'prompt': 'prompt',
99
'negative_prompt': 'neg_prompt',
10-
'sampling': 'sampling',
1110
'sampling_steps': 'steps',
1211
'restore_faces': 'restore_faces',
1312
'tiling': 'tiling',
1413
'hires_fix': 'enable_hr',
15-
'hires_upscaler': 'hr_upscaler',
1614
'hires_steps': 'hires_steps',
1715
'hires_scale': 'hr_scale',
1816
'hires_resize_x': 'hr_resize_x',
@@ -31,6 +29,11 @@ state.core = (function () {
3129
'resize_mode': 'resize_mode',
3230
};
3331

32+
const SELECTS = {
33+
'sampling': 'sampling',
34+
'hires_upscaler': 'hr_upscaler',
35+
};
36+
3437
const MULTI_SELECTS = {
3538
'styles': 'styles'
3639
};
@@ -79,6 +82,14 @@ state.core = (function () {
7982
});
8083
}
8184

85+
for (const [settingId, element] of Object.entries(SELECTS)) {
86+
TABS.forEach(tab => {
87+
if (config.hasSetting(settingId, tab)) {
88+
handleSavedSelects(`${tab}_${element}`);
89+
}
90+
});
91+
}
92+
8293
for (const [settingId, element] of Object.entries(MULTI_SELECTS)) {
8394
TABS.forEach(tab => {
8495
if (config.hasSetting(settingId, tab)) {
@@ -134,15 +145,28 @@ state.core = (function () {
134145
}
135146
}
136147
}
148+
// Use this when onUiTabChange is fixed
149+
// onUiTabChange(function () {
150+
// store.set('tab', gradioApp().querySelector('#tabs .tab-nav button.selected').textContent);
151+
// });
152+
bindTabClickEvents();
153+
}
137154

138-
onUiTabChange(function () {
139-
store.set('tab', get_uiCurrentTab().textContent);
155+
function bindTabClickEvents() {
156+
Array.from(gradioApp().querySelectorAll('#tabs .tab-nav button')).forEach(tab => {
157+
tab.removeEventListener('click', storeTab);
158+
tab.addEventListener('click', storeTab);
140159
});
141160
}
142161

162+
function storeTab() {
163+
store.set('tab', gradioApp().querySelector('#tabs .tab-nav button.selected').textContent);
164+
bindTabClickEvents(); // dirty hack here...
165+
}
166+
143167
function handleSavedInput(id) {
144168

145-
const elements = gradioApp().querySelectorAll(`#${id} textarea, #${id} select, #${id} input`);
169+
const elements = gradioApp().querySelectorAll(`#${id} textarea, #${id} input`);
146170
const events = ['change', 'input'];
147171

148172
if (! elements || ! elements.length) {
@@ -190,50 +214,14 @@ state.core = (function () {
190214
});
191215
}
192216

193-
function handleSavedMultiSelects(id) {
194-
195-
const select = gradioApp().querySelector(`#${id} .items-center.relative`);
196-
197-
try {
198-
let value = store.get(id);
199-
200-
if (value) {
201-
202-
value = value.split(',');
203-
204-
if (value.length) {
205-
206-
let input = select.querySelector('input');
207-
208-
let selectOption = function () {
209-
if (! value.length) {
210-
state.utils.triggerMouseEvent(input, 'blur');
211-
return;
212-
}
213-
let option = value.pop();
214-
state.utils.triggerMouseEvent(input);
215-
setTimeout(() => {
216-
let items = Array.from(select.parentNode.querySelectorAll('ul li'));
217-
items.forEach(li => {
218-
if (li.lastChild.wholeText.trim() === option) {
219-
state.utils.triggerMouseEvent(li, 'mousedown');
220-
return false;
221-
}
222-
});
223-
setTimeout(selectOption, 100);
224-
}, 100);
225-
}
226-
selectOption();
227-
}
228-
}
229-
} catch (error) {
230-
console.error('[state]: Error:', error);
231-
}
217+
function handleSavedSelects(id) {
218+
const select = gradioApp().getElementById(`${id}`);
219+
state.utils.handleSelect(select, id, store);
220+
}
232221

233-
state.utils.onContentChange(select, function (el) {
234-
const selected = Array.from(el.querySelectorAll('.token > span')).map(item => item.textContent);
235-
store.set(id, selected);
236-
});
222+
function handleSavedMultiSelects(id) {
223+
const select = gradioApp().getElementById(`${id}`);
224+
state.utils.handleMultipleSelect(select, id, store);
237225
}
238226

239227
function handleExtensions(config) {

‎javascript/state.ext.control-net.js‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,16 @@ state.extensions['control-net'] = (function () {
1010

1111
function handleToggle() {
1212
let value = store.get('toggled');
13-
let toggleBtn = container.querySelector('div.cursor-pointer');
13+
let toggleBtn = container.querySelector('div.cursor-pointer, .label-wrap');
14+
1415
if (value && value === 'true') {
1516
state.utils.triggerEvent(toggleBtn, 'click');
17+
load();
1618
}
1719
toggleBtn.addEventListener('click', function () {
18-
let span = this.querySelector('.transition');
19-
store.set('toggled', !span.classList.contains('rotate-90'));
20+
let span = this.querySelector('.transition, .icon');
21+
store.set('toggled', span.style.transform !== 'rotate(90deg)');
22+
load();
2023
});
2124
}
2225

@@ -66,18 +69,11 @@ state.extensions['control-net'] = (function () {
6669

6770
function handleSelects() {
6871
cnTabs.forEach(({ container, store }) => {
69-
let selects = container.querySelectorAll('select');
70-
selects.forEach(function (select) {
71-
let label = select.previousElementSibling;
72-
let id = state.utils.txtToId(label.textContent);
72+
container.querySelectorAll('.gradio-dropdown').forEach(select => {
73+
let id = state.utils.txtToId(select.querySelector('label').firstChild.textContent);
7374
let value = store.get(id);
74-
if (value) {
75-
state.utils.setValue(select, value, 'change');
76-
}
77-
select.addEventListener('change', function () {
78-
store.set(id, this.value);
79-
});
80-
if (id === 'preprocessor' && value && value !== 'none') {
75+
state.utils.handleSelect(select, id, store);
76+
if (id === 'preprocessor' && value && value.toLowerCase() !== 'none') {
8177
state.utils.onNextUiUpdates(handleSliders); // update new sliders if needed
8278
}
8379
});
@@ -124,19 +120,24 @@ state.extensions['control-net'] = (function () {
124120
}
125121

126122
function load() {
127-
handleToggle();
128-
handleTabs();
129-
handleCheckboxes();
130-
handleSelects();
131-
handleSliders();
132-
handleRadioButtons();
123+
setTimeout(function () {
124+
handleTabs();
125+
handleCheckboxes();
126+
handleSelects();
127+
handleSliders();
128+
handleRadioButtons();
129+
}, 500);
133130
}
134131

135132
function init() {
136133

137134
container = gradioApp().getElementById('controlnet');
138135
store = new state.Store('ext-control-net');
139136

137+
if (! container) {
138+
return;
139+
}
140+
140141
let tabs = container.querySelectorAll('.tabitem');
141142

142143
if (tabs.length) {
@@ -154,6 +155,7 @@ state.extensions['control-net'] = (function () {
154155
}];
155156
}
156157

158+
handleToggle();
157159
load();
158160
}
159161

‎javascript/state.utils.js‎

Lines changed: 78 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,83 @@ state.utils = {
5454
subtree: true
5555
});
5656
},
57+
handleSelect: function handleSelect(select, id, store) {
58+
try {
59+
let value = store.get(id);
60+
61+
if (value) {
62+
63+
let input = select.querySelector('input');
64+
state.utils.triggerMouseEvent(input, 'focus');
65+
66+
setTimeout(() => {
67+
let items = Array.from(select.querySelectorAll('ul li'));
68+
items.forEach(li => {
69+
if (li.lastChild.wholeText.trim() === value) {
70+
state.utils.triggerMouseEvent(li, 'mousedown');
71+
return false;
72+
}
73+
});
74+
state.utils.triggerMouseEvent(input, 'blur');
75+
}, 100);
76+
}
77+
78+
setTimeout(() => {
79+
state.utils.onContentChange(select, function (el) {
80+
const selected = el.querySelector('span.single-select');
81+
if (selected) {
82+
store.set(id, selected.textContent);
83+
}
84+
});
85+
}, 150);
86+
} catch (error) {
87+
console.error('[state]: Error:', error);
88+
}
89+
},
90+
handleMultipleSelect: function handleMultipleSelect(select, id, store) {
91+
try {
92+
let value = store.get(id);
93+
94+
if (value) {
95+
96+
value = value.split(',').reverse();
97+
98+
if (value.length) {
99+
100+
let input = select.querySelector('input');
101+
102+
let selectOption = function () {
103+
104+
if (! value.length) {
105+
state.utils.triggerMouseEvent(input, 'blur');
106+
return;
107+
}
108+
109+
let option = value.pop();
110+
state.utils.triggerMouseEvent(input, 'focus');
111+
112+
setTimeout(() => {
113+
let items = Array.from(select.querySelectorAll('ul li'));
114+
items.forEach(li => {
115+
if (li.lastChild.wholeText.trim() === option) {
116+
state.utils.triggerMouseEvent(li, 'mousedown');
117+
return false;
118+
}
119+
});
120+
setTimeout(selectOption, 100);
121+
}, 100);
122+
}
123+
selectOption();
124+
}
125+
}
126+
state.utils.onContentChange(select, function (el) {
127+
const selected = Array.from(el.querySelectorAll('.token > span')).map(item => item.textContent);
128+
store.set(id, selected);
129+
});
130+
} catch (error) {
131+
console.error('[state]: Error:', error);
132+
}
133+
},
57134
txtToId: function txtToId(txt) {
58135
return txt.split(' ').join('-').toLowerCase();
59136
},
@@ -78,7 +155,7 @@ state.utils = {
78155
},
79156
onNextUiUpdates: function (func) {
80157
// brute force this to to ensure that the method is called after next few updates
81-
onUiUpdate(this.callXTimes(function () { setTimeout(func, 10); }, 50));
158+
onUiUpdate(this.callXTimes(function () { setTimeout(func, 5); }, 150));
82159
}
83160
};
84161

@@ -104,10 +181,6 @@ state.utils.html = {
104181
btn.innerHTML = text;
105182
btn.onclick = onclick || function () {};
106183
btn.className = 'gr-button gr-button-lg gr-button-primary';
107-
this.setStyle(btn, {
108-
'margin-left': '5px',
109-
'margin-right': '5px'
110-
});
111184
return btn;
112185
}
113186
};

‎style.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#settings_state_buttons button {
2+
color: white;
3+
background: rgb(249, 115, 22);
4+
border-radius: 8px;
5+
padding: 5px 15px;
6+
font-weight: bold;
7+
font-size: 16px;
8+
margin-left: 5px;
9+
margin-right: 5px;
10+
}

0 commit comments

Comments
 (0)