mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2026-02-04 07:00:57 +00:00
Merge branch 'dev' into gradio4
This commit is contained in:
@@ -2,8 +2,11 @@
|
||||
function extensions_apply(_disabled_list, _update_list, disable_all) {
|
||||
var disable = [];
|
||||
var update = [];
|
||||
|
||||
gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x) {
|
||||
const extensions_input = gradioApp().querySelectorAll('#extensions input[type="checkbox"]');
|
||||
if (extensions_input.length == 0) {
|
||||
throw Error("Extensions page not yet loaded.");
|
||||
}
|
||||
extensions_input.forEach(function(x) {
|
||||
if (x.name.startsWith("enable_") && !x.checked) {
|
||||
disable.push(x.name.substring(7));
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@ function setupExtraNetworksForTab(tabname) {
|
||||
return; // `return` is equivalent of `continue` but for forEach loops.
|
||||
}
|
||||
|
||||
var applyFilter = function() {
|
||||
var applyFilter = function(force) {
|
||||
var searchTerm = search.value.toLowerCase();
|
||||
gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
|
||||
var searchOnly = elem.querySelector('.search_only');
|
||||
@@ -67,17 +67,17 @@ function setupExtraNetworksForTab(tabname) {
|
||||
}
|
||||
});
|
||||
|
||||
applySort();
|
||||
applySort(force);
|
||||
};
|
||||
|
||||
var applySort = function() {
|
||||
var applySort = function(force) {
|
||||
var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card');
|
||||
var reverse = sort_dir.dataset.sortdir == "Descending";
|
||||
var sortKey = sort_mode.dataset.sortmode.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim() || "name";
|
||||
sortKey = "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1);
|
||||
var sortKeyStore = sortKey + "-" + (reverse ? "Descending" : "Ascending") + "-" + cards.length;
|
||||
|
||||
if (sortKeyStore == sort_mode.dataset.sortkey) {
|
||||
if (sortKeyStore == sort_mode.dataset.sortkey && !force) {
|
||||
return;
|
||||
}
|
||||
sort_mode.dataset.sortkey = sortKeyStore;
|
||||
@@ -114,6 +114,10 @@ function setupExtraNetworksForTab(tabname) {
|
||||
|
||||
var controls = gradioApp().querySelector("#" + tabname_full + "_controls");
|
||||
controlsDiv.insertBefore(controls, null);
|
||||
|
||||
if (elem.style.display != "none") {
|
||||
extraNetworksShowControlsForPage(tabname, tabname_full);
|
||||
}
|
||||
});
|
||||
|
||||
registerPrompt(tabname, tabname + "_prompt");
|
||||
@@ -167,11 +171,21 @@ function extraNetworksTabSelected(tabname, id, showPrompt, showNegativePrompt, t
|
||||
}
|
||||
|
||||
function applyExtraNetworkFilter(tabname_full) {
|
||||
setTimeout(extraNetworksApplyFilter[tabname_full], 1);
|
||||
var doFilter = function() {
|
||||
var applyFunction = extraNetworksApplyFilter[tabname_full];
|
||||
|
||||
if (applyFunction) {
|
||||
applyFunction(true);
|
||||
}
|
||||
};
|
||||
setTimeout(doFilter, 1);
|
||||
}
|
||||
|
||||
function applyExtraNetworkSort(tabname_full) {
|
||||
setTimeout(extraNetworksApplySort[tabname_full], 1);
|
||||
var doSort = function() {
|
||||
extraNetworksApplySort[tabname_full](true);
|
||||
};
|
||||
setTimeout(doSort, 1);
|
||||
}
|
||||
|
||||
var extraNetworksApplyFilter = {};
|
||||
@@ -433,7 +447,26 @@ function extraNetworksControlTreeViewOnClick(event, tabname, extra_networks_tabn
|
||||
* @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
|
||||
* @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
|
||||
*/
|
||||
gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_tree").classList.toggle("hidden");
|
||||
const tree = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_tree");
|
||||
const parent = tree.parentElement;
|
||||
let resizeHandle = parent.querySelector('.resize-handle');
|
||||
tree.classList.toggle("hidden");
|
||||
|
||||
if (tree.classList.contains("hidden")) {
|
||||
tree.style.display = 'none';
|
||||
parent.style.display = 'flex';
|
||||
if (resizeHandle) {
|
||||
resizeHandle.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
tree.style.display = 'block';
|
||||
parent.style.display = 'grid';
|
||||
if (!resizeHandle) {
|
||||
setupResizeHandle(parent);
|
||||
resizeHandle = parent.querySelector('.resize-handle');
|
||||
}
|
||||
resizeHandle.style.display = 'block';
|
||||
}
|
||||
event.currentTarget.classList.toggle("extra-network-control--enabled");
|
||||
}
|
||||
|
||||
@@ -450,7 +483,7 @@ function extraNetworksControlRefreshOnClick(event, tabname, extra_networks_tabna
|
||||
* @param tabname The name of the active tab in the sd webui. Ex: txt2img, img2img, etc.
|
||||
* @param extra_networks_tabname The id of the active extraNetworks tab. Ex: lora, checkpoints, etc.
|
||||
*/
|
||||
var btn_refresh_internal = gradioApp().getElementById(tabname + "_extra_refresh_internal");
|
||||
var btn_refresh_internal = gradioApp().getElementById(tabname + "_" + extra_networks_tabname + "_extra_refresh_internal");
|
||||
btn_refresh_internal.dispatchEvent(new Event("click"));
|
||||
}
|
||||
|
||||
@@ -616,10 +649,13 @@ function scheduleAfterScriptsCallbacks() {
|
||||
}, 200);
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
onUiLoaded(function() {
|
||||
var mutationObserver = new MutationObserver(function(m) {
|
||||
if (!executedAfterScripts &&
|
||||
gradioApp().querySelectorAll("[id$='_extra_search']").length == 8) {
|
||||
let existingSearchfields = gradioApp().querySelectorAll("[id$='_extra_search']").length;
|
||||
let neededSearchfields = gradioApp().querySelectorAll("[id$='_extra_tabs'] > .tab-nav > button").length - 2;
|
||||
|
||||
if (!executedAfterScripts && existingSearchfields >= neededSearchfields) {
|
||||
mutationObserver.disconnect();
|
||||
executedAfterScripts = true;
|
||||
scheduleAfterScriptsCallbacks();
|
||||
}
|
||||
|
||||
@@ -45,8 +45,15 @@ function formatTime(secs) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var originalAppTitle = undefined;
|
||||
|
||||
onUiLoaded(function() {
|
||||
originalAppTitle = document.title;
|
||||
});
|
||||
|
||||
function setTitle(progress) {
|
||||
var title = 'Stable Diffusion';
|
||||
var title = originalAppTitle;
|
||||
|
||||
if (opts.show_progress_in_title && progress) {
|
||||
title = '[' + progress.trim() + '] ' + title;
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
(function() {
|
||||
const GRADIO_MIN_WIDTH = 320;
|
||||
const GRID_TEMPLATE_COLUMNS = '1fr 16px 1fr';
|
||||
const PAD = 16;
|
||||
const DEBOUNCE_TIME = 100;
|
||||
const DOUBLE_TAP_DELAY = 200; //ms
|
||||
|
||||
const R = {
|
||||
tracking: false,
|
||||
@@ -11,6 +11,7 @@
|
||||
leftCol: null,
|
||||
leftColStartWidth: null,
|
||||
screenX: null,
|
||||
lastTapTime: null,
|
||||
};
|
||||
|
||||
let resizeTimer;
|
||||
@@ -21,30 +22,29 @@
|
||||
}
|
||||
|
||||
function displayResizeHandle(parent) {
|
||||
if (!parent.needHideOnMoblie) {
|
||||
return true;
|
||||
}
|
||||
if (window.innerWidth < GRADIO_MIN_WIDTH * 2 + PAD * 4) {
|
||||
parent.style.display = 'flex';
|
||||
if (R.handle != null) {
|
||||
R.handle.style.opacity = '0';
|
||||
}
|
||||
parent.resizeHandle.style.display = "none";
|
||||
return false;
|
||||
} else {
|
||||
parent.style.display = 'grid';
|
||||
if (R.handle != null) {
|
||||
R.handle.style.opacity = '100';
|
||||
}
|
||||
parent.resizeHandle.style.display = "block";
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function afterResize(parent) {
|
||||
if (displayResizeHandle(parent) && parent.style.gridTemplateColumns != GRID_TEMPLATE_COLUMNS) {
|
||||
if (displayResizeHandle(parent) && parent.style.gridTemplateColumns != parent.style.originalGridTemplateColumns) {
|
||||
const oldParentWidth = R.parentWidth;
|
||||
const newParentWidth = parent.offsetWidth;
|
||||
const widthL = parseInt(parent.style.gridTemplateColumns.split(' ')[0]);
|
||||
|
||||
const ratio = newParentWidth / oldParentWidth;
|
||||
|
||||
const newWidthL = Math.max(Math.floor(ratio * widthL), GRADIO_MIN_WIDTH);
|
||||
const newWidthL = Math.max(Math.floor(ratio * widthL), parent.minLeftColWidth);
|
||||
setLeftColGridTemplate(parent, newWidthL);
|
||||
|
||||
R.parentWidth = newParentWidth;
|
||||
@@ -52,6 +52,14 @@
|
||||
}
|
||||
|
||||
function setup(parent) {
|
||||
|
||||
function onDoubleClick(evt) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
parent.style.gridTemplateColumns = parent.style.originalGridTemplateColumns;
|
||||
}
|
||||
|
||||
const leftCol = parent.firstElementChild;
|
||||
const rightCol = parent.lastElementChild;
|
||||
|
||||
@@ -59,63 +67,109 @@
|
||||
|
||||
parent.style.display = 'grid';
|
||||
parent.style.gap = '0';
|
||||
parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
|
||||
let leftColTemplate = "";
|
||||
if (parent.children[0].style.flexGrow) {
|
||||
leftColTemplate = `${parent.children[0].style.flexGrow}fr`;
|
||||
parent.minLeftColWidth = GRADIO_MIN_WIDTH;
|
||||
parent.minRightColWidth = GRADIO_MIN_WIDTH;
|
||||
parent.needHideOnMoblie = true;
|
||||
} else {
|
||||
leftColTemplate = parent.children[0].style.flexBasis;
|
||||
parent.minLeftColWidth = parent.children[0].style.flexBasis.slice(0, -2) / 2;
|
||||
parent.minRightColWidth = 0;
|
||||
parent.needHideOnMoblie = false;
|
||||
}
|
||||
const gridTemplateColumns = `${leftColTemplate} ${PAD}px ${parent.children[1].style.flexGrow}fr`;
|
||||
parent.style.gridTemplateColumns = gridTemplateColumns;
|
||||
parent.style.originalGridTemplateColumns = gridTemplateColumns;
|
||||
|
||||
const resizeHandle = document.createElement('div');
|
||||
resizeHandle.classList.add('resize-handle');
|
||||
parent.insertBefore(resizeHandle, rightCol);
|
||||
parent.resizeHandle = resizeHandle;
|
||||
|
||||
resizeHandle.addEventListener('mousedown', (evt) => {
|
||||
if (evt.button !== 0) return;
|
||||
['mousedown', 'touchstart'].forEach((eventType) => {
|
||||
resizeHandle.addEventListener(eventType, (evt) => {
|
||||
if (eventType.startsWith('mouse')) {
|
||||
if (evt.button !== 0) return;
|
||||
} else {
|
||||
if (evt.changedTouches.length !== 1) return;
|
||||
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
const currentTime = new Date().getTime();
|
||||
if (R.lastTapTime && currentTime - R.lastTapTime <= DOUBLE_TAP_DELAY) {
|
||||
onDoubleClick(evt);
|
||||
return;
|
||||
}
|
||||
|
||||
document.body.classList.add('resizing');
|
||||
R.lastTapTime = currentTime;
|
||||
}
|
||||
|
||||
R.tracking = true;
|
||||
R.parent = parent;
|
||||
R.parentWidth = parent.offsetWidth;
|
||||
R.handle = resizeHandle;
|
||||
R.leftCol = leftCol;
|
||||
R.leftColStartWidth = leftCol.offsetWidth;
|
||||
R.screenX = evt.screenX;
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
document.body.classList.add('resizing');
|
||||
|
||||
R.tracking = true;
|
||||
R.parent = parent;
|
||||
R.parentWidth = parent.offsetWidth;
|
||||
R.leftCol = leftCol;
|
||||
R.leftColStartWidth = leftCol.offsetWidth;
|
||||
if (eventType.startsWith('mouse')) {
|
||||
R.screenX = evt.screenX;
|
||||
} else {
|
||||
R.screenX = evt.changedTouches[0].screenX;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
resizeHandle.addEventListener('dblclick', (evt) => {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
|
||||
});
|
||||
resizeHandle.addEventListener('dblclick', onDoubleClick);
|
||||
|
||||
afterResize(parent);
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', (evt) => {
|
||||
if (evt.button !== 0) return;
|
||||
['mousemove', 'touchmove'].forEach((eventType) => {
|
||||
window.addEventListener(eventType, (evt) => {
|
||||
if (eventType.startsWith('mouse')) {
|
||||
if (evt.button !== 0) return;
|
||||
} else {
|
||||
if (evt.changedTouches.length !== 1) return;
|
||||
}
|
||||
|
||||
if (R.tracking) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
if (R.tracking) {
|
||||
if (eventType.startsWith('mouse')) {
|
||||
evt.preventDefault();
|
||||
}
|
||||
evt.stopPropagation();
|
||||
|
||||
const delta = R.screenX - evt.screenX;
|
||||
const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH);
|
||||
setLeftColGridTemplate(R.parent, leftColWidth);
|
||||
}
|
||||
let delta = 0;
|
||||
if (eventType.startsWith('mouse')) {
|
||||
delta = R.screenX - evt.screenX;
|
||||
} else {
|
||||
delta = R.screenX - evt.changedTouches[0].screenX;
|
||||
}
|
||||
const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - R.parent.minRightColWidth - PAD), R.parent.minLeftColWidth);
|
||||
setLeftColGridTemplate(R.parent, leftColWidth);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', (evt) => {
|
||||
if (evt.button !== 0) return;
|
||||
['mouseup', 'touchend'].forEach((eventType) => {
|
||||
window.addEventListener(eventType, (evt) => {
|
||||
if (eventType.startsWith('mouse')) {
|
||||
if (evt.button !== 0) return;
|
||||
} else {
|
||||
if (evt.changedTouches.length !== 1) return;
|
||||
}
|
||||
|
||||
if (R.tracking) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
if (R.tracking) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
R.tracking = false;
|
||||
R.tracking = false;
|
||||
|
||||
document.body.classList.remove('resizing');
|
||||
}
|
||||
document.body.classList.remove('resizing');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -132,10 +186,15 @@
|
||||
setupResizeHandle = setup;
|
||||
})();
|
||||
|
||||
onUiLoaded(function() {
|
||||
|
||||
function setupAllResizeHandles() {
|
||||
for (var elem of gradioApp().querySelectorAll('.resize-handle-row')) {
|
||||
if (!elem.querySelector('.resize-handle')) {
|
||||
if (!elem.querySelector('.resize-handle') && !elem.children[0].classList.contains("hidden")) {
|
||||
setupResizeHandle(elem);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
onUiLoaded(setupAllResizeHandles);
|
||||
|
||||
|
||||
@@ -55,8 +55,8 @@ onOptionsChanged(function() {
|
||||
});
|
||||
|
||||
opts._categories.forEach(function(x) {
|
||||
var section = x[0];
|
||||
var category = x[1];
|
||||
var section = localization[x[0]] ?? x[0];
|
||||
var category = localization[x[1]] ?? x[1];
|
||||
|
||||
var span = document.createElement('SPAN');
|
||||
span.textContent = category;
|
||||
|
||||
@@ -48,11 +48,6 @@ function setupTokenCounting(id, id_counter, id_button) {
|
||||
var counter = gradioApp().getElementById(id_counter);
|
||||
var textarea = gradioApp().querySelector(`#${id} > label > textarea`);
|
||||
|
||||
if (opts.disable_token_counters) {
|
||||
counter.style.display = "none";
|
||||
return;
|
||||
}
|
||||
|
||||
if (counter.parentElement == prompt.parentElement) {
|
||||
return;
|
||||
}
|
||||
@@ -61,15 +56,32 @@ function setupTokenCounting(id, id_counter, id_button) {
|
||||
prompt.parentElement.style.position = "relative";
|
||||
|
||||
var func = onEdit(id, textarea, 800, function() {
|
||||
gradioApp().getElementById(id_button)?.click();
|
||||
if (counter.classList.contains("token-counter-visible")) {
|
||||
gradioApp().getElementById(id_button)?.click();
|
||||
}
|
||||
});
|
||||
promptTokenCountUpdateFunctions[id] = func;
|
||||
promptTokenCountUpdateFunctions[id_button] = func;
|
||||
}
|
||||
|
||||
function setupTokenCounters() {
|
||||
setupTokenCounting('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button');
|
||||
setupTokenCounting('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button');
|
||||
setupTokenCounting('img2img_prompt', 'img2img_token_counter', 'img2img_token_button');
|
||||
setupTokenCounting('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button');
|
||||
function toggleTokenCountingVisibility(id, id_counter, id_button) {
|
||||
var counter = gradioApp().getElementById(id_counter);
|
||||
|
||||
counter.style.display = opts.disable_token_counters ? "none" : "block";
|
||||
counter.classList.toggle("token-counter-visible", !opts.disable_token_counters);
|
||||
}
|
||||
|
||||
function runCodeForTokenCounters(fun) {
|
||||
fun('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button');
|
||||
fun('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button');
|
||||
fun('img2img_prompt', 'img2img_token_counter', 'img2img_token_button');
|
||||
fun('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button');
|
||||
}
|
||||
|
||||
onUiLoaded(function() {
|
||||
runCodeForTokenCounters(setupTokenCounting);
|
||||
});
|
||||
|
||||
onOptionsChanged(function() {
|
||||
runCodeForTokenCounters(toggleTokenCountingVisibility);
|
||||
});
|
||||
|
||||
@@ -108,9 +108,18 @@ function create_submit_args(args) {
|
||||
return res;
|
||||
}
|
||||
|
||||
function setSubmitButtonsVisibility(tabname, showInterrupt, showSkip, showInterrupting) {
|
||||
gradioApp().getElementById(tabname + '_interrupt').style.display = showInterrupt ? "block" : "none";
|
||||
gradioApp().getElementById(tabname + '_skip').style.display = showSkip ? "block" : "none";
|
||||
gradioApp().getElementById(tabname + '_interrupting').style.display = showInterrupting ? "block" : "none";
|
||||
}
|
||||
|
||||
function showSubmitButtons(tabname, show) {
|
||||
gradioApp().getElementById(tabname + '_interrupt').style.display = show ? "none" : "block";
|
||||
gradioApp().getElementById(tabname + '_skip').style.display = show ? "none" : "block";
|
||||
setSubmitButtonsVisibility(tabname, !show, !show, false);
|
||||
}
|
||||
|
||||
function showSubmitInterruptingPlaceholder(tabname) {
|
||||
setSubmitButtonsVisibility(tabname, false, true, true);
|
||||
}
|
||||
|
||||
function showRestoreProgressButton(tabname, show) {
|
||||
@@ -297,8 +306,6 @@ onAfterUiUpdate(function() {
|
||||
});
|
||||
|
||||
json_elem.parentElement.style.display = "none";
|
||||
|
||||
setupTokenCounters();
|
||||
});
|
||||
|
||||
onOptionsChanged(function() {
|
||||
|
||||
Reference in New Issue
Block a user