mirror of
https://github.com/anapnoe/stable-diffusion-webui-ux.git
synced 2026-09-12 09:08:45 +02:00
update to sdxl
This commit is contained in:
anapnoe
@@ -1,3 +1,4 @@
|
||||
|
||||
let currentWidth = null;
|
||||
let currentHeight = null;
|
||||
let arFrameTimeout = setTimeout(function() {}, 0);
|
||||
|
||||
@@ -1,108 +0,0 @@
|
||||
(function() {
|
||||
var ignore = localStorage.getItem("bad-scale-ignore-it") == "ignore-it";
|
||||
|
||||
function getScale() {
|
||||
var ratio = 0,
|
||||
screen = window.screen,
|
||||
ua = navigator.userAgent.toLowerCase();
|
||||
|
||||
if (window.devicePixelRatio !== undefined) {
|
||||
ratio = window.devicePixelRatio;
|
||||
} else if (~ua.indexOf('msie')) {
|
||||
if (screen.deviceXDPI && screen.logicalXDPI) {
|
||||
ratio = screen.deviceXDPI / screen.logicalXDPI;
|
||||
}
|
||||
} else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
|
||||
ratio = window.outerWidth / window.innerWidth;
|
||||
}
|
||||
|
||||
return ratio == 0 ? 0 : Math.round(ratio * 100);
|
||||
}
|
||||
|
||||
var showing = false;
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.style.position = "fixed";
|
||||
div.style.top = "0px";
|
||||
div.style.left = "0px";
|
||||
div.style.width = "100vw";
|
||||
div.style.backgroundColor = "firebrick";
|
||||
div.style.textAlign = "center";
|
||||
div.style.zIndex = 99;
|
||||
|
||||
var b = document.createElement("b");
|
||||
b.innerHTML = 'Bad Scale: ??% ';
|
||||
|
||||
div.appendChild(b);
|
||||
|
||||
var note1 = document.createElement("p");
|
||||
note1.innerHTML = "Change your browser or your computer settings!";
|
||||
note1.title = 'Just make sure "computer-scale" * "browser-scale" = 100% ,\n' +
|
||||
"you can keep your computer-scale and only change this page's scale,\n" +
|
||||
"for example: your computer-scale is 125%, just use [\"CTRL\"+\"-\"] to make your browser-scale of this page to 80%.";
|
||||
div.appendChild(note1);
|
||||
|
||||
var note2 = document.createElement("p");
|
||||
note2.innerHTML = " Otherwise, it will cause this page to not function properly!";
|
||||
note2.title = "When you click \"Copy image to: [inpaint sketch]\" in some img2img's tab,\n" +
|
||||
"if scale<100% the canvas will be invisible,\n" +
|
||||
"else if scale>100% this page will take large amount of memory and CPU performance.";
|
||||
div.appendChild(note2);
|
||||
|
||||
var btn = document.createElement("button");
|
||||
btn.innerHTML = "Click here to ignore";
|
||||
|
||||
div.appendChild(btn);
|
||||
|
||||
function tryShowTopBar(scale) {
|
||||
if (showing) return;
|
||||
|
||||
b.innerHTML = 'Bad Scale: ' + scale + '% ';
|
||||
|
||||
var updateScaleTimer = setInterval(function() {
|
||||
var newScale = getScale();
|
||||
b.innerHTML = 'Bad Scale: ' + newScale + '% ';
|
||||
if (newScale == 100) {
|
||||
var p = div.parentNode;
|
||||
if (p != null) p.removeChild(div);
|
||||
showing = false;
|
||||
clearInterval(updateScaleTimer);
|
||||
check();
|
||||
}
|
||||
}, 999);
|
||||
|
||||
btn.onclick = function() {
|
||||
clearInterval(updateScaleTimer);
|
||||
var p = div.parentNode;
|
||||
if (p != null) p.removeChild(div);
|
||||
ignore = true;
|
||||
showing = false;
|
||||
localStorage.setItem("bad-scale-ignore-it", "ignore-it");
|
||||
};
|
||||
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
|
||||
function check() {
|
||||
if (!ignore) {
|
||||
var timer = setInterval(function() {
|
||||
var scale = getScale();
|
||||
if (scale != 100 && !ignore) {
|
||||
tryShowTopBar(scale);
|
||||
clearInterval(timer);
|
||||
}
|
||||
if (ignore) {
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 999);
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState != "complete") {
|
||||
document.onreadystatechange = function() {
|
||||
if (document.readyState != "complete") check();
|
||||
};
|
||||
} else {
|
||||
check();
|
||||
}
|
||||
})();
|
||||
@@ -1,4 +1,4 @@
|
||||
/*
|
||||
|
||||
var contextMenuInit = function() {
|
||||
let eventListenerApplied = false;
|
||||
let menuSpecs = new Map();
|
||||
@@ -174,4 +174,3 @@ var addContextMenuEventListener = initResponse[2];
|
||||
//End example Context Menu Items
|
||||
|
||||
onAfterUiUpdate(addContextMenuEventListener);
|
||||
*/
|
||||
|
||||
Vendored
+110
-89
@@ -1,109 +1,130 @@
|
||||
// allows drag-dropping files into gradio image elements, and also pasting images from clipboard
|
||||
|
||||
function isValidImageList(files) {
|
||||
return (
|
||||
files &&
|
||||
files?.length === 1 &&
|
||||
["image/png", "image/gif", "image/jpeg"].includes(files[0].type)
|
||||
);
|
||||
return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
|
||||
}
|
||||
|
||||
function dropReplaceImage(imgWrap, files) {
|
||||
if (!isValidImageList(files)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tmpFile = files[0];
|
||||
|
||||
imgWrap.querySelector('[aria-label="Clear"]')?.click();
|
||||
const callback = () => {
|
||||
const fileInput = imgWrap.querySelector('input[type="file"]');
|
||||
if (fileInput) {
|
||||
if (files.length === 0) {
|
||||
files = new DataTransfer();
|
||||
files.items.add(tmpFile);
|
||||
fileInput.files = files.files;
|
||||
} else {
|
||||
fileInput.files = files;
|
||||
}
|
||||
fileInput.dispatchEvent(new Event("change"));
|
||||
if (!isValidImageList(files)) {
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
if (imgWrap.closest("#pnginfo_image")) {
|
||||
// special treatment for PNG Info tab, wait for fetch request to finish
|
||||
const oldFetch = window.fetch;
|
||||
window.fetch = async (input, options) => {
|
||||
const response = await oldFetch(input, options);
|
||||
if ("api/predict/" === input) {
|
||||
const content = await response.text();
|
||||
window.fetch = oldFetch;
|
||||
window.requestAnimationFrame(() => callback());
|
||||
return new Response(content, {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
headers: response.headers,
|
||||
});
|
||||
}
|
||||
return response;
|
||||
const tmpFile = files[0];
|
||||
|
||||
imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
|
||||
const callback = () => {
|
||||
const fileInput = imgWrap.querySelector('input[type="file"]');
|
||||
if (fileInput) {
|
||||
if (files.length === 0) {
|
||||
files = new DataTransfer();
|
||||
files.items.add(tmpFile);
|
||||
fileInput.files = files.files;
|
||||
} else {
|
||||
fileInput.files = files;
|
||||
}
|
||||
fileInput.dispatchEvent(new Event('change'));
|
||||
}
|
||||
};
|
||||
} else {
|
||||
window.requestAnimationFrame(() => callback());
|
||||
}
|
||||
|
||||
if (imgWrap.closest('#pnginfo_image')) {
|
||||
// special treatment for PNG Info tab, wait for fetch request to finish
|
||||
const oldFetch = window.fetch;
|
||||
window.fetch = async(input, options) => {
|
||||
const response = await oldFetch(input, options);
|
||||
if ('api/predict/' === input) {
|
||||
const content = await response.text();
|
||||
window.fetch = oldFetch;
|
||||
window.requestAnimationFrame(() => callback());
|
||||
return new Response(content, {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
headers: response.headers
|
||||
});
|
||||
}
|
||||
return response;
|
||||
};
|
||||
} else {
|
||||
window.requestAnimationFrame(() => callback());
|
||||
}
|
||||
}
|
||||
|
||||
window.document.addEventListener("dragover", (e) => {
|
||||
const target = e.composedPath()[0];
|
||||
const imgWrap = target.closest('[data-testid="image"]');
|
||||
if (
|
||||
!imgWrap &&
|
||||
target.placeholder &&
|
||||
target.placeholder.indexOf("Prompt") == -1
|
||||
) {
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = "copy";
|
||||
function eventHasFiles(e) {
|
||||
if (!e.dataTransfer || !e.dataTransfer.files) return false;
|
||||
if (e.dataTransfer.files.length > 0) return true;
|
||||
if (e.dataTransfer.items.length > 0 && e.dataTransfer.items[0].kind == "file") return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function dragDropTargetIsPrompt(target) {
|
||||
if (target?.placeholder && target?.placeholder.indexOf("Prompt") >= 0) return true;
|
||||
if (target?.parentNode?.parentNode?.className?.indexOf("prompt") > 0) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
window.document.addEventListener('dragover', e => {
|
||||
const target = e.composedPath()[0];
|
||||
if (!eventHasFiles(e)) return;
|
||||
|
||||
var targetImage = target.closest('[data-testid="image"]');
|
||||
if (!dragDropTargetIsPrompt(target) && !targetImage) return;
|
||||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
});
|
||||
|
||||
window.document.addEventListener("drop", (e) => {
|
||||
const target = e.composedPath()[0];
|
||||
if (target.placeholder.indexOf("Prompt") == -1) {
|
||||
return;
|
||||
}
|
||||
const imgWrap = target.closest('[data-testid="image"]');
|
||||
if (!imgWrap) {
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const files = e.dataTransfer.files;
|
||||
dropReplaceImage(imgWrap, files);
|
||||
window.document.addEventListener('drop', e => {
|
||||
const target = e.composedPath()[0];
|
||||
if (!eventHasFiles(e)) return;
|
||||
|
||||
if (dragDropTargetIsPrompt(target)) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
|
||||
let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image";
|
||||
|
||||
const imgParent = gradioApp().getElementById(prompt_target);
|
||||
const files = e.dataTransfer.files;
|
||||
const fileInput = imgParent.querySelector('input[type="file"]');
|
||||
if (fileInput) {
|
||||
fileInput.files = files;
|
||||
fileInput.dispatchEvent(new Event('change'));
|
||||
}
|
||||
}
|
||||
|
||||
var targetImage = target.closest('[data-testid="image"]');
|
||||
if (targetImage) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const files = e.dataTransfer.files;
|
||||
dropReplaceImage(targetImage, files);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener("paste", (e) => {
|
||||
const files = e.clipboardData.files;
|
||||
if (!isValidImageList(files)) {
|
||||
return;
|
||||
}
|
||||
window.addEventListener('paste', e => {
|
||||
const files = e.clipboardData.files;
|
||||
if (!isValidImageList(files)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const visibleImageFields = [
|
||||
...gradioApp().querySelectorAll('[data-testid="image"]'),
|
||||
].filter((el) => uiElementIsVisible(el));
|
||||
if (!visibleImageFields.length) {
|
||||
return;
|
||||
}
|
||||
const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
|
||||
.filter(el => uiElementIsVisible(el))
|
||||
.sort((a, b) => uiElementInSight(b) - uiElementInSight(a));
|
||||
|
||||
const firstFreeImageField = visibleImageFields.filter((el) =>
|
||||
el.querySelector("input[type=file]")
|
||||
)?.[0];
|
||||
|
||||
dropReplaceImage(
|
||||
firstFreeImageField
|
||||
? firstFreeImageField
|
||||
: visibleImageFields[visibleImageFields.length - 1],
|
||||
files
|
||||
);
|
||||
if (!visibleImageFields.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const firstFreeImageField = visibleImageFields
|
||||
.filter(el => el.querySelector('input[type=file]'))?.[0];
|
||||
|
||||
dropReplaceImage(
|
||||
firstFreeImageField ?
|
||||
firstFreeImageField :
|
||||
visibleImageFields[visibleImageFields.length - 1]
|
||||
, files
|
||||
);
|
||||
});
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
|
||||
function extensions_apply(_disabled_list, _update_list, disable_all) {
|
||||
var disable = [];
|
||||
var update = [];
|
||||
@@ -32,7 +33,7 @@ function extensions_check() {
|
||||
|
||||
|
||||
var id = randomId();
|
||||
requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function() {
|
||||
requestProgress(id, gradioApp().getElementById('extensions_installed_html'), null, function() {
|
||||
|
||||
});
|
||||
|
||||
|
||||
+349
-579
@@ -1,579 +1,349 @@
|
||||
function setupExtraNetworksForTab(tabname) {
|
||||
gradioApp()
|
||||
.querySelector("#" + tabname + "_extra_tabs")
|
||||
.classList.add("extra-networks");
|
||||
|
||||
let tabs = gradioApp().querySelector("#" + tabname + "_extra_tabs > div");
|
||||
let search = gradioApp().querySelector("#" + tabname + "_extra_search textarea" );
|
||||
let refresh = gradioApp().getElementById(tabname + "_extra_refresh");
|
||||
|
||||
//let sort = gradioApp().getElementById(tabname + '_extra_sort');
|
||||
//let sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder');
|
||||
|
||||
let clear = document.createElement("div");
|
||||
clear.id = tabname + "_extra_clear";
|
||||
clear.classList.add("token-remove", "remove-all", "svelte-a6vu2r", "hide");
|
||||
clear.title = "Clear search";
|
||||
clear.innerHTML =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>';
|
||||
|
||||
search.classList.add("search");
|
||||
|
||||
tabs.appendChild(search);
|
||||
tabs.appendChild(clear);
|
||||
tabs.appendChild(refresh);
|
||||
|
||||
/*
|
||||
sort.classList.add('sort');
|
||||
sortOrder.classList.add('sortorder');
|
||||
sort.dataset.sortkey = 'sortDefault';
|
||||
tabs.appendChild(sort);
|
||||
tabs.appendChild(sortOrder); */
|
||||
|
||||
clear.addEventListener("click", function (evt) {
|
||||
search.value = "";
|
||||
updateInput(search);
|
||||
});
|
||||
|
||||
setTimeout(function () {
|
||||
refresh.click();
|
||||
}, 500);
|
||||
|
||||
|
||||
setTimeout(extraNetworksApplyFilter[tabname], 1);
|
||||
|
||||
search.addEventListener("input", function (evt) {
|
||||
searchTerm = search.value.toLowerCase();
|
||||
|
||||
gradioApp()
|
||||
.querySelectorAll("#" + tabname + "_extra_tabs div.card")
|
||||
.forEach(function (elem) {
|
||||
let text =
|
||||
elem.querySelector(".name").textContent.toLowerCase() +
|
||||
" " +
|
||||
elem.querySelector(".search_term").textContent.toLowerCase();
|
||||
elem.parentElement.style.display =
|
||||
text.indexOf(searchTerm) == -1 ? "none" : "";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function applyExtraNetworkFilter(tabname){
|
||||
setTimeout(extraNetworksApplyFilter[tabname], 1);
|
||||
}
|
||||
|
||||
var extraNetworksApplyFilter = {}
|
||||
var activePromptTextarea = {};
|
||||
|
||||
function setupExtraNetworks() {
|
||||
setupExtraNetworksForTab("txt2img");
|
||||
setupExtraNetworksForTab("img2img");
|
||||
|
||||
function registerPrompt(tabname, id) {
|
||||
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
|
||||
|
||||
if (!activePromptTextarea[tabname]) {
|
||||
activePromptTextarea[tabname] = textarea;
|
||||
}
|
||||
|
||||
textarea.addEventListener("focus", function () {
|
||||
activePromptTextarea[tabname] = textarea;
|
||||
});
|
||||
}
|
||||
|
||||
registerPrompt("txt2img", "txt2img_prompt");
|
||||
registerPrompt("txt2img", "txt2img_neg_prompt");
|
||||
registerPrompt("img2img", "img2img_prompt");
|
||||
registerPrompt("img2img", "img2img_neg_prompt");
|
||||
}
|
||||
|
||||
onUiLoaded(setupExtraNetworks);
|
||||
|
||||
var re_extranet = /<([^:]+:[^:]+):[\d\.]+>/;
|
||||
var re_extranet_g = /\s+<([^:]+:[^:]+):[\d\.]+>/g;
|
||||
|
||||
function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
|
||||
var m = text.match(re_extranet);
|
||||
if (!m) return false;
|
||||
|
||||
var partToSearch = m[1];
|
||||
var replaced = false;
|
||||
var newTextareaText = textarea.value.replaceAll(
|
||||
re_extranet_g,
|
||||
function (found) {
|
||||
m = found.match(re_extranet);
|
||||
if (m[1] == partToSearch) {
|
||||
replaced = true;
|
||||
return "";
|
||||
}
|
||||
return found;
|
||||
}
|
||||
);
|
||||
|
||||
if (replaced) {
|
||||
textarea.value = newTextareaText;
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function cardClicked(tabname, textToAdd, allowNegativePrompt) {
|
||||
var textarea = allowNegativePrompt
|
||||
? activePromptTextarea[tabname]
|
||||
: gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
|
||||
|
||||
if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) {
|
||||
textarea.value =
|
||||
textarea.value + opts.extra_networks_add_text_separator + textToAdd;
|
||||
}
|
||||
|
||||
updateInput(textarea);
|
||||
}
|
||||
|
||||
function saveCardPreview(event, tabname, filename) {
|
||||
var textarea = gradioApp().querySelector(
|
||||
"#" + tabname + "_preview_filename > label > textarea"
|
||||
);
|
||||
var button = gradioApp().getElementById(tabname + "_save_preview");
|
||||
|
||||
textarea.value = filename;
|
||||
updateInput(textarea);
|
||||
|
||||
button.click();
|
||||
|
||||
var search = gradioApp().querySelector(
|
||||
"#" + tabname + "_extra_tabs textarea"
|
||||
);
|
||||
|
||||
setTimeout(function () {
|
||||
search.value = search.value.toLowerCase();
|
||||
updateInput(search);
|
||||
}, 1000);
|
||||
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function extraNetworksSearchButton(tabs_id, event) {
|
||||
var searchTextarea = gradioApp().querySelector(
|
||||
"#" + tabs_id + " > div > textarea"
|
||||
);
|
||||
var button = event.target;
|
||||
var text = button.classList.contains("search-all")
|
||||
? ""
|
||||
: button.textContent.trim();
|
||||
//text = event.target.selectedIndex == 0 ? "" : event.target.options[event.target.selectedIndex].text;
|
||||
|
||||
searchTextarea.value = text;
|
||||
updateInput(searchTextarea);
|
||||
}
|
||||
|
||||
var globalPopup = null;
|
||||
var globalPopupInner = null;
|
||||
function popup(contents) {
|
||||
if (!globalPopup) {
|
||||
globalPopup = document.createElement("div");
|
||||
globalPopup.onclick = function () {
|
||||
globalPopup.style.display = "none";
|
||||
};
|
||||
globalPopup.classList.add("global-popup");
|
||||
|
||||
var close = document.createElement("div");
|
||||
close.classList.add("global-popup-close");
|
||||
close.onclick = function () {
|
||||
globalPopup.style.display = "none";
|
||||
};
|
||||
close.title = "Close";
|
||||
globalPopup.appendChild(close);
|
||||
|
||||
globalPopupInner = document.createElement("div");
|
||||
globalPopupInner.onclick = function (event) {
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
};
|
||||
globalPopupInner.classList.add("global-popup-inner");
|
||||
globalPopup.appendChild(globalPopupInner);
|
||||
|
||||
gradioApp().appendChild(globalPopup);
|
||||
}
|
||||
|
||||
globalPopupInner.innerHTML = "";
|
||||
globalPopupInner.appendChild(contents);
|
||||
|
||||
globalPopup.style.display = "flex";
|
||||
}
|
||||
|
||||
function extraNetworksShowMetadata(text) {
|
||||
var elem = document.createElement("pre");
|
||||
elem.classList.add("popup-metadata");
|
||||
elem.textContent = text;
|
||||
|
||||
popup(elem);
|
||||
}
|
||||
|
||||
function requestGet(url, data, handler, errorHandler) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var args = Object.keys(data)
|
||||
.map(function (k) {
|
||||
return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
|
||||
})
|
||||
.join("&");
|
||||
xhr.open("GET", url + "?" + args, true);
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
var js = JSON.parse(xhr.responseText);
|
||||
handler(js);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
errorHandler();
|
||||
}
|
||||
} else {
|
||||
errorHandler();
|
||||
}
|
||||
}
|
||||
};
|
||||
var js = JSON.stringify(data);
|
||||
xhr.send(js);
|
||||
}
|
||||
|
||||
function extraNetworksRequestMetadata(event, extraPage, cardName) {
|
||||
var showError = function () {
|
||||
extraNetworksShowMetadata("there was an error getting metadata");
|
||||
};
|
||||
|
||||
requestGet(
|
||||
"./sd_extra_networks/metadata",
|
||||
{ page: extraPage, item: cardName },
|
||||
function (data) {
|
||||
if (data && data.metadata) {
|
||||
extraNetworksShowMetadata(data.metadata);
|
||||
} else {
|
||||
showError();
|
||||
}
|
||||
},
|
||||
showError
|
||||
);
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
function setupExtraNetworksForTab(tabname) {
|
||||
gradioApp().querySelector('#' + tabname + '_extra_tabs').classList.add('extra-networks');
|
||||
|
||||
var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
|
||||
var search = gradioApp().querySelector('#' + tabname + '_extra_search textarea');
|
||||
var sort = gradioApp().getElementById(tabname + '_extra_sort');
|
||||
var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder');
|
||||
var refresh = gradioApp().getElementById(tabname + '_extra_refresh');
|
||||
|
||||
search.classList.add('search');
|
||||
sort.classList.add('sort');
|
||||
sortOrder.classList.add('sortorder');
|
||||
sort.dataset.sortkey = 'sortDefault';
|
||||
tabs.appendChild(search);
|
||||
tabs.appendChild(sort);
|
||||
tabs.appendChild(sortOrder);
|
||||
tabs.appendChild(refresh);
|
||||
|
||||
var applyFilter = function() {
|
||||
var searchTerm = search.value.toLowerCase();
|
||||
|
||||
gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
|
||||
var searchOnly = elem.querySelector('.search_only');
|
||||
var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase();
|
||||
|
||||
var visible = text.indexOf(searchTerm) != -1;
|
||||
|
||||
if (searchOnly && searchTerm.length < 4) {
|
||||
visible = false;
|
||||
}
|
||||
|
||||
elem.style.display = visible ? "" : "none";
|
||||
});
|
||||
};
|
||||
|
||||
var applySort = function() {
|
||||
var reverse = sortOrder.classList.contains("sortReverse");
|
||||
var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim();
|
||||
sortKey = sortKey ? "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1) : "";
|
||||
var sortKeyStore = sortKey ? sortKey + (reverse ? "Reverse" : "") : "";
|
||||
if (!sortKey || sortKeyStore == sort.dataset.sortkey) {
|
||||
return;
|
||||
}
|
||||
|
||||
sort.dataset.sortkey = sortKeyStore;
|
||||
|
||||
var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card');
|
||||
cards.forEach(function(card) {
|
||||
card.originalParentElement = card.parentElement;
|
||||
});
|
||||
var sortedCards = Array.from(cards);
|
||||
sortedCards.sort(function(cardA, cardB) {
|
||||
var a = cardA.dataset[sortKey];
|
||||
var b = cardB.dataset[sortKey];
|
||||
if (!isNaN(a) && !isNaN(b)) {
|
||||
return parseInt(a) - parseInt(b);
|
||||
}
|
||||
|
||||
return (a < b ? -1 : (a > b ? 1 : 0));
|
||||
});
|
||||
if (reverse) {
|
||||
sortedCards.reverse();
|
||||
}
|
||||
cards.forEach(function(card) {
|
||||
card.remove();
|
||||
});
|
||||
sortedCards.forEach(function(card) {
|
||||
card.originalParentElement.appendChild(card);
|
||||
});
|
||||
};
|
||||
|
||||
search.addEventListener("input", applyFilter);
|
||||
applyFilter();
|
||||
["change", "blur", "click"].forEach(function(evt) {
|
||||
sort.querySelector("input").addEventListener(evt, applySort);
|
||||
});
|
||||
sortOrder.addEventListener("click", function() {
|
||||
sortOrder.classList.toggle("sortReverse");
|
||||
applySort();
|
||||
});
|
||||
|
||||
extraNetworksApplyFilter[tabname] = applyFilter;
|
||||
}
|
||||
|
||||
function applyExtraNetworkFilter(tabname) {
|
||||
setTimeout(extraNetworksApplyFilter[tabname], 1);
|
||||
}
|
||||
|
||||
var extraNetworksApplyFilter = {};
|
||||
var activePromptTextarea = {};
|
||||
|
||||
function setupExtraNetworks() {
|
||||
setupExtraNetworksForTab('txt2img');
|
||||
setupExtraNetworksForTab('img2img');
|
||||
|
||||
function registerPrompt(tabname, id) {
|
||||
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
|
||||
|
||||
if (!activePromptTextarea[tabname]) {
|
||||
activePromptTextarea[tabname] = textarea;
|
||||
}
|
||||
|
||||
textarea.addEventListener("focus", function() {
|
||||
activePromptTextarea[tabname] = textarea;
|
||||
});
|
||||
}
|
||||
|
||||
registerPrompt('txt2img', 'txt2img_prompt');
|
||||
registerPrompt('txt2img', 'txt2img_neg_prompt');
|
||||
registerPrompt('img2img', 'img2img_prompt');
|
||||
registerPrompt('img2img', 'img2img_neg_prompt');
|
||||
}
|
||||
|
||||
onUiLoaded(setupExtraNetworks);
|
||||
|
||||
var re_extranet = /<([^:]+:[^:]+):[\d.]+>(.*)/;
|
||||
var re_extranet_g = /\s+<([^:]+:[^:]+):[\d.]+>/g;
|
||||
|
||||
function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
|
||||
var m = text.match(re_extranet);
|
||||
var replaced = false;
|
||||
var newTextareaText;
|
||||
if (m) {
|
||||
var extraTextAfterNet = m[2];
|
||||
var partToSearch = m[1];
|
||||
var foundAtPosition = -1;
|
||||
newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found, net, pos) {
|
||||
m = found.match(re_extranet);
|
||||
if (m[1] == partToSearch) {
|
||||
replaced = true;
|
||||
foundAtPosition = pos;
|
||||
return "";
|
||||
}
|
||||
return found;
|
||||
});
|
||||
|
||||
if (foundAtPosition >= 0 && newTextareaText.substr(foundAtPosition, extraTextAfterNet.length) == extraTextAfterNet) {
|
||||
newTextareaText = newTextareaText.substr(0, foundAtPosition) + newTextareaText.substr(foundAtPosition + extraTextAfterNet.length);
|
||||
}
|
||||
} else {
|
||||
newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found) {
|
||||
if (found == text) {
|
||||
replaced = true;
|
||||
return "";
|
||||
}
|
||||
return found;
|
||||
});
|
||||
}
|
||||
|
||||
if (replaced) {
|
||||
textarea.value = newTextareaText;
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function cardClicked(tabname, textToAdd, allowNegativePrompt) {
|
||||
var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
|
||||
|
||||
if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) {
|
||||
textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd;
|
||||
}
|
||||
|
||||
updateInput(textarea);
|
||||
}
|
||||
|
||||
function saveCardPreview(event, tabname, filename) {
|
||||
var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea');
|
||||
var button = gradioApp().getElementById(tabname + '_save_preview');
|
||||
|
||||
textarea.value = filename;
|
||||
updateInput(textarea);
|
||||
|
||||
button.click();
|
||||
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function extraNetworksSearchButton(tabs_id, event) {
|
||||
var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea');
|
||||
var button = event.target;
|
||||
var text = button.classList.contains("search-all") ? "" : button.textContent.trim();
|
||||
|
||||
searchTextarea.value = text;
|
||||
updateInput(searchTextarea);
|
||||
}
|
||||
|
||||
var globalPopup = null;
|
||||
var globalPopupInner = null;
|
||||
function closePopup() {
|
||||
if (!globalPopup) return;
|
||||
|
||||
globalPopup.style.display = "none";
|
||||
}
|
||||
function popup(contents) {
|
||||
if (!globalPopup) {
|
||||
globalPopup = document.createElement('div');
|
||||
globalPopup.onclick = closePopup;
|
||||
globalPopup.classList.add('global-popup');
|
||||
|
||||
var close = document.createElement('div');
|
||||
close.classList.add('global-popup-close');
|
||||
close.onclick = closePopup;
|
||||
close.title = "Close";
|
||||
globalPopup.appendChild(close);
|
||||
|
||||
globalPopupInner = document.createElement('div');
|
||||
globalPopupInner.onclick = function(event) {
|
||||
event.stopPropagation(); return false;
|
||||
};
|
||||
globalPopupInner.classList.add('global-popup-inner');
|
||||
globalPopup.appendChild(globalPopupInner);
|
||||
|
||||
gradioApp().querySelector('.main').appendChild(globalPopup);
|
||||
}
|
||||
|
||||
globalPopupInner.innerHTML = '';
|
||||
globalPopupInner.appendChild(contents);
|
||||
|
||||
globalPopup.style.display = "flex";
|
||||
}
|
||||
|
||||
function extraNetworksShowMetadata(text) {
|
||||
var elem = document.createElement('pre');
|
||||
elem.classList.add('popup-metadata');
|
||||
elem.textContent = text;
|
||||
|
||||
popup(elem);
|
||||
}
|
||||
|
||||
function requestGet(url, data, handler, errorHandler) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var args = Object.keys(data).map(function(k) {
|
||||
return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
|
||||
}).join('&');
|
||||
xhr.open("GET", url + "?" + args, true);
|
||||
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
var js = JSON.parse(xhr.responseText);
|
||||
handler(js);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
errorHandler();
|
||||
}
|
||||
} else {
|
||||
errorHandler();
|
||||
}
|
||||
}
|
||||
};
|
||||
var js = JSON.stringify(data);
|
||||
xhr.send(js);
|
||||
}
|
||||
|
||||
function extraNetworksRequestMetadata(event, extraPage, cardName) {
|
||||
var showError = function() {
|
||||
extraNetworksShowMetadata("there was an error getting metadata");
|
||||
};
|
||||
|
||||
requestGet("./sd_extra_networks/metadata", {page: extraPage, item: cardName}, function(data) {
|
||||
if (data && data.metadata) {
|
||||
extraNetworksShowMetadata(data.metadata);
|
||||
} else {
|
||||
showError();
|
||||
}
|
||||
}, showError);
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
var extraPageUserMetadataEditors = {};
|
||||
|
||||
function extraNetworksEditUserMetadata(event, tabname, extraPage, cardName) {
|
||||
var id = tabname + '_' + extraPage + '_edit_user_metadata';
|
||||
|
||||
var editor = extraPageUserMetadataEditors[id];
|
||||
if (!editor) {
|
||||
editor = {};
|
||||
editor.page = gradioApp().getElementById(id);
|
||||
editor.nameTextarea = gradioApp().querySelector("#" + id + "_name" + ' textarea');
|
||||
editor.button = gradioApp().querySelector("#" + id + "_button");
|
||||
extraPageUserMetadataEditors[id] = editor;
|
||||
}
|
||||
|
||||
editor.nameTextarea.value = cardName;
|
||||
updateInput(editor.nameTextarea);
|
||||
|
||||
editor.button.click();
|
||||
|
||||
popup(editor.page);
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function extraNetworksRefreshSingleCard(page, tabname, name) {
|
||||
requestGet("./sd_extra_networks/get-single-card", {page: page, tabname: tabname, name: name}, function(data) {
|
||||
if (data && data.html) {
|
||||
var card = gradioApp().querySelector('.card[data-name=' + JSON.stringify(name) + ']'); // likely using the wrong stringify function
|
||||
|
||||
var newDiv = document.createElement('DIV');
|
||||
newDiv.innerHTML = data.html;
|
||||
var newCard = newDiv.firstElementChild;
|
||||
|
||||
newCard.style = '';
|
||||
card.parentElement.insertBefore(newCard, card);
|
||||
card.parentElement.removeChild(card);
|
||||
}
|
||||
});
|
||||
}
|
||||
*/
|
||||
function toggleCss(key, css, enable) {
|
||||
var style = document.getElementById(key);
|
||||
if (enable && !style) {
|
||||
style = document.createElement('style');
|
||||
style.id = key;
|
||||
style.type = 'text/css';
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
if (style && !enable) {
|
||||
document.head.removeChild(style);
|
||||
}
|
||||
if (style) {
|
||||
style.innerHTML == '';
|
||||
style.appendChild(document.createTextNode(css));
|
||||
}
|
||||
}
|
||||
|
||||
function setupExtraNetworksForTab(tabname) {
|
||||
gradioApp().querySelector('#' + tabname + '_extra_tabs').classList.add('extra-networks');
|
||||
|
||||
var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
|
||||
var searchDiv = gradioApp().getElementById(tabname + '_extra_search');
|
||||
var search = searchDiv.querySelector('textarea');
|
||||
var sort = gradioApp().getElementById(tabname + '_extra_sort');
|
||||
var sortOrder = gradioApp().getElementById(tabname + '_extra_sortorder');
|
||||
var refresh = gradioApp().getElementById(tabname + '_extra_refresh');
|
||||
var showDirsDiv = gradioApp().getElementById(tabname + '_extra_show_dirs');
|
||||
var showDirs = gradioApp().querySelector('#' + tabname + '_extra_show_dirs input');
|
||||
|
||||
sort.dataset.sortkey = 'sortDefault';
|
||||
tabs.appendChild(searchDiv);
|
||||
tabs.appendChild(sort);
|
||||
tabs.appendChild(sortOrder);
|
||||
tabs.appendChild(refresh);
|
||||
tabs.appendChild(showDirsDiv);
|
||||
|
||||
var applyFilter = function() {
|
||||
var searchTerm = search.value.toLowerCase();
|
||||
|
||||
gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
|
||||
var searchOnly = elem.querySelector('.search_only');
|
||||
var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase();
|
||||
|
||||
var visible = text.indexOf(searchTerm) != -1;
|
||||
|
||||
if (searchOnly && searchTerm.length < 4) {
|
||||
visible = false;
|
||||
}
|
||||
|
||||
elem.style.display = visible ? "" : "none";
|
||||
});
|
||||
};
|
||||
|
||||
var applySort = function() {
|
||||
var reverse = sortOrder.classList.contains("sortReverse");
|
||||
var sortKey = sort.querySelector("input").value.toLowerCase().replace("sort", "").replaceAll(" ", "_").replace(/_+$/, "").trim();
|
||||
sortKey = sortKey ? "sort" + sortKey.charAt(0).toUpperCase() + sortKey.slice(1) : "";
|
||||
var sortKeyStore = sortKey ? sortKey + (reverse ? "Reverse" : "") : "";
|
||||
if (!sortKey || sortKeyStore == sort.dataset.sortkey) {
|
||||
return;
|
||||
}
|
||||
|
||||
sort.dataset.sortkey = sortKeyStore;
|
||||
|
||||
var cards = gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card');
|
||||
cards.forEach(function(card) {
|
||||
card.originalParentElement = card.parentElement;
|
||||
});
|
||||
var sortedCards = Array.from(cards);
|
||||
sortedCards.sort(function(cardA, cardB) {
|
||||
var a = cardA.dataset[sortKey];
|
||||
var b = cardB.dataset[sortKey];
|
||||
if (!isNaN(a) && !isNaN(b)) {
|
||||
return parseInt(a) - parseInt(b);
|
||||
}
|
||||
|
||||
return (a < b ? -1 : (a > b ? 1 : 0));
|
||||
});
|
||||
if (reverse) {
|
||||
sortedCards.reverse();
|
||||
}
|
||||
cards.forEach(function(card) {
|
||||
card.remove();
|
||||
});
|
||||
sortedCards.forEach(function(card) {
|
||||
card.originalParentElement.appendChild(card);
|
||||
});
|
||||
};
|
||||
|
||||
search.addEventListener("input", applyFilter);
|
||||
applyFilter();
|
||||
["change", "blur", "click"].forEach(function(evt) {
|
||||
sort.querySelector("input").addEventListener(evt, applySort);
|
||||
});
|
||||
sortOrder.addEventListener("click", function() {
|
||||
sortOrder.classList.toggle("sortReverse");
|
||||
applySort();
|
||||
});
|
||||
|
||||
extraNetworksApplyFilter[tabname] = applyFilter;
|
||||
|
||||
var showDirsUpdate = function() {
|
||||
var css = '#' + tabname + '_extra_tabs .extra-network-subdirs { display: none; }';
|
||||
toggleCss(tabname + '_extra_show_dirs_style', css, !showDirs.checked);
|
||||
localSet('extra-networks-show-dirs', showDirs.checked ? 1 : 0);
|
||||
};
|
||||
showDirs.checked = localGet('extra-networks-show-dirs', 1) == 1;
|
||||
showDirs.addEventListener("change", showDirsUpdate);
|
||||
showDirsUpdate();
|
||||
}
|
||||
|
||||
function applyExtraNetworkFilter(tabname) {
|
||||
setTimeout(extraNetworksApplyFilter[tabname], 1);
|
||||
}
|
||||
|
||||
var extraNetworksApplyFilter = {};
|
||||
var activePromptTextarea = {};
|
||||
|
||||
function setupExtraNetworks() {
|
||||
setupExtraNetworksForTab('txt2img');
|
||||
setupExtraNetworksForTab('img2img');
|
||||
|
||||
function registerPrompt(tabname, id) {
|
||||
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
|
||||
|
||||
if (!activePromptTextarea[tabname]) {
|
||||
activePromptTextarea[tabname] = textarea;
|
||||
}
|
||||
|
||||
textarea.addEventListener("focus", function() {
|
||||
activePromptTextarea[tabname] = textarea;
|
||||
});
|
||||
}
|
||||
|
||||
registerPrompt('txt2img', 'txt2img_prompt');
|
||||
registerPrompt('txt2img', 'txt2img_neg_prompt');
|
||||
registerPrompt('img2img', 'img2img_prompt');
|
||||
registerPrompt('img2img', 'img2img_neg_prompt');
|
||||
}
|
||||
|
||||
onUiLoaded(setupExtraNetworks);
|
||||
|
||||
var re_extranet = /<([^:]+:[^:]+):[\d.]+>(.*)/;
|
||||
var re_extranet_g = /\s+<([^:]+:[^:]+):[\d.]+>/g;
|
||||
|
||||
function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
|
||||
var m = text.match(re_extranet);
|
||||
var replaced = false;
|
||||
var newTextareaText;
|
||||
if (m) {
|
||||
var extraTextAfterNet = m[2];
|
||||
var partToSearch = m[1];
|
||||
var foundAtPosition = -1;
|
||||
newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found, net, pos) {
|
||||
m = found.match(re_extranet);
|
||||
if (m[1] == partToSearch) {
|
||||
replaced = true;
|
||||
foundAtPosition = pos;
|
||||
return "";
|
||||
}
|
||||
return found;
|
||||
});
|
||||
|
||||
if (foundAtPosition >= 0 && newTextareaText.substr(foundAtPosition, extraTextAfterNet.length) == extraTextAfterNet) {
|
||||
newTextareaText = newTextareaText.substr(0, foundAtPosition) + newTextareaText.substr(foundAtPosition + extraTextAfterNet.length);
|
||||
}
|
||||
} else {
|
||||
newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found) {
|
||||
if (found == text) {
|
||||
replaced = true;
|
||||
return "";
|
||||
}
|
||||
return found;
|
||||
});
|
||||
}
|
||||
|
||||
if (replaced) {
|
||||
textarea.value = newTextareaText;
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function cardClicked(tabname, textToAdd, allowNegativePrompt) {
|
||||
var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
|
||||
|
||||
if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) {
|
||||
textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd;
|
||||
}
|
||||
|
||||
updateInput(textarea);
|
||||
}
|
||||
|
||||
function saveCardPreview(event, tabname, filename) {
|
||||
var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea');
|
||||
var button = gradioApp().getElementById(tabname + '_save_preview');
|
||||
|
||||
textarea.value = filename;
|
||||
updateInput(textarea);
|
||||
|
||||
button.click();
|
||||
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function extraNetworksSearchButton(tabs_id, event) {
|
||||
var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > label > textarea');
|
||||
var button = event.target;
|
||||
var text = button.classList.contains("search-all") ? "" : button.textContent.trim();
|
||||
|
||||
searchTextarea.value = text;
|
||||
updateInput(searchTextarea);
|
||||
}
|
||||
|
||||
var globalPopup = null;
|
||||
var globalPopupInner = null;
|
||||
function closePopup() {
|
||||
if (!globalPopup) return;
|
||||
|
||||
globalPopup.style.display = "none";
|
||||
}
|
||||
function popup(contents) {
|
||||
if (!globalPopup) {
|
||||
globalPopup = document.createElement('div');
|
||||
globalPopup.onclick = closePopup;
|
||||
globalPopup.classList.add('global-popup');
|
||||
|
||||
var close = document.createElement('div');
|
||||
close.classList.add('global-popup-close');
|
||||
close.onclick = closePopup;
|
||||
close.title = "Close";
|
||||
globalPopup.appendChild(close);
|
||||
|
||||
globalPopupInner = document.createElement('div');
|
||||
globalPopupInner.onclick = function(event) {
|
||||
event.stopPropagation(); return false;
|
||||
};
|
||||
globalPopupInner.classList.add('global-popup-inner');
|
||||
globalPopup.appendChild(globalPopupInner);
|
||||
|
||||
gradioApp().querySelector('.main').appendChild(globalPopup);
|
||||
}
|
||||
|
||||
globalPopupInner.innerHTML = '';
|
||||
globalPopupInner.appendChild(contents);
|
||||
|
||||
globalPopup.style.display = "flex";
|
||||
}
|
||||
|
||||
var storedPopupIds = {};
|
||||
function popupId(id) {
|
||||
if (!storedPopupIds[id]) {
|
||||
storedPopupIds[id] = gradioApp().getElementById(id);
|
||||
}
|
||||
|
||||
popup(storedPopupIds[id]);
|
||||
}
|
||||
|
||||
function extraNetworksShowMetadata(text) {
|
||||
var elem = document.createElement('pre');
|
||||
elem.classList.add('popup-metadata');
|
||||
elem.textContent = text;
|
||||
|
||||
popup(elem);
|
||||
}
|
||||
|
||||
function requestGet(url, data, handler, errorHandler) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var args = Object.keys(data).map(function(k) {
|
||||
return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
|
||||
}).join('&');
|
||||
xhr.open("GET", url + "?" + args, true);
|
||||
|
||||
xhr.onreadystatechange = function() {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
var js = JSON.parse(xhr.responseText);
|
||||
handler(js);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
errorHandler();
|
||||
}
|
||||
} else {
|
||||
errorHandler();
|
||||
}
|
||||
}
|
||||
};
|
||||
var js = JSON.stringify(data);
|
||||
xhr.send(js);
|
||||
}
|
||||
|
||||
function extraNetworksRequestMetadata(event, extraPage, cardName) {
|
||||
var showError = function() {
|
||||
extraNetworksShowMetadata("there was an error getting metadata");
|
||||
};
|
||||
|
||||
requestGet("./sd_extra_networks/metadata", {page: extraPage, item: cardName}, function(data) {
|
||||
if (data && data.metadata) {
|
||||
extraNetworksShowMetadata(data.metadata);
|
||||
} else {
|
||||
showError();
|
||||
}
|
||||
}, showError);
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
var extraPageUserMetadataEditors = {};
|
||||
|
||||
function extraNetworksEditUserMetadata(event, tabname, extraPage, cardName) {
|
||||
var id = tabname + '_' + extraPage + '_edit_user_metadata';
|
||||
|
||||
var editor = extraPageUserMetadataEditors[id];
|
||||
if (!editor) {
|
||||
editor = {};
|
||||
editor.page = gradioApp().getElementById(id);
|
||||
editor.nameTextarea = gradioApp().querySelector("#" + id + "_name" + ' textarea');
|
||||
editor.button = gradioApp().querySelector("#" + id + "_button");
|
||||
extraPageUserMetadataEditors[id] = editor;
|
||||
}
|
||||
|
||||
editor.nameTextarea.value = cardName;
|
||||
updateInput(editor.nameTextarea);
|
||||
|
||||
editor.button.click();
|
||||
|
||||
popup(editor.page);
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function extraNetworksRefreshSingleCard(page, tabname, name) {
|
||||
requestGet("./sd_extra_networks/get-single-card", {page: page, tabname: tabname, name: name}, function(data) {
|
||||
if (data && data.html) {
|
||||
var card = gradioApp().querySelector('.card[data-name=' + JSON.stringify(name) + ']'); // likely using the wrong stringify function
|
||||
|
||||
var newDiv = document.createElement('DIV');
|
||||
newDiv.innerHTML = data.html;
|
||||
var newCard = newDiv.firstElementChild;
|
||||
|
||||
newCard.style.display = '';
|
||||
card.parentElement.insertBefore(newCard, card);
|
||||
card.parentElement.removeChild(card);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
// attaches listeners to the txt2img and img2img galleries to update displayed generation param text when the image changes
|
||||
|
||||
let txt2img_gallery, img2img_gallery, modal = undefined;
|
||||
onAfterUiUpdate(function() {
|
||||
if (!txt2img_gallery) {
|
||||
@@ -7,6 +8,10 @@ onAfterUiUpdate(function() {
|
||||
if (!img2img_gallery) {
|
||||
img2img_gallery = attachGalleryListeners("img2img");
|
||||
}
|
||||
if (!modal) {
|
||||
modal = gradioApp().getElementById('lightboxModal');
|
||||
modalObserver.observe(modal, {attributes: true, attributeFilter: ['style']});
|
||||
}
|
||||
});
|
||||
|
||||
let modalObserver = new MutationObserver(function(mutations) {
|
||||
|
||||
+12
-11
@@ -23,12 +23,7 @@ var titles = {
|
||||
"\u{1f4cb}": "Apply selected styles to current prompt",
|
||||
"\u{1f4d2}": "Paste available values into the field",
|
||||
"\u{1f3b4}": "Show/hide extra networks",
|
||||
|
||||
"\u{1f5e8}": "Interogate Clip",
|
||||
"\u{1f5ea}": "Interogate Deepbooru",
|
||||
"\u{1F300}": "Restore progress",
|
||||
"\u{267E}": "Toggle generate forever",
|
||||
|
||||
"\u{1f300}": "Restore progress",
|
||||
|
||||
"Inpaint a part of image": "Draw a mask over an image, and the script will regenerate the masked area with content according to prompt",
|
||||
"SD upscale": "Upscale image normally, split result into tiles, improve each tile using img2img, merge whole image back",
|
||||
@@ -50,11 +45,6 @@ var titles = {
|
||||
"Skip": "Stop processing current image and continue processing.",
|
||||
"Interrupt": "Stop processing images and return any results accumulated so far.",
|
||||
"Save": "Write image to a directory (default - log/images) and generation parameters into csv file.",
|
||||
"Zip": "Save as Zip",
|
||||
"Send to txt2img": "Send to txt2img",
|
||||
"Send to img2img": "Send to img2img",
|
||||
"Send to inpaint": "Send to inpaint",
|
||||
"Send to extras": "Send to extras",
|
||||
|
||||
"X values": "Separate values for X axis using commas.",
|
||||
"Y values": "Separate values for Y axis using commas.",
|
||||
@@ -200,3 +190,14 @@ onUiUpdate(function(mutationRecords) {
|
||||
tooltipCheckTimer = setTimeout(processTooltipCheckNodes, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
onUiLoaded(function() {
|
||||
for (var comp of window.gradio_config.components) {
|
||||
if (comp.props.webui_tooltip && comp.props.elem_id) {
|
||||
var elem = gradioApp().getElementById(comp.props.elem_id);
|
||||
if (elem) {
|
||||
elem.title = comp.props.webui_tooltip;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
+18
-19
@@ -1,19 +1,18 @@
|
||||
function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y) {
|
||||
function setInactive(elem, inactive) {
|
||||
elem.classList.toggle('inactive', !!inactive);
|
||||
}
|
||||
|
||||
var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale');
|
||||
var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x');
|
||||
var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y');
|
||||
|
||||
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);
|
||||
setInactive(hrResizeY, opts.use_old_hires_fix_width_height || hr_resize_y == 0);
|
||||
|
||||
setTimeout(function () {
|
||||
return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y];
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y) {
|
||||
function setInactive(elem, inactive) {
|
||||
elem.classList.toggle('inactive', !!inactive);
|
||||
}
|
||||
|
||||
var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale');
|
||||
var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x');
|
||||
var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y');
|
||||
|
||||
gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "";
|
||||
|
||||
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);
|
||||
setInactive(hrResizeY, opts.use_old_hires_fix_width_height || hr_resize_y == 0);
|
||||
|
||||
return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y];
|
||||
}
|
||||
|
||||
+2
-298
@@ -2,10 +2,6 @@
|
||||
* temporary fix for https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/668
|
||||
* @see https://github.com/gradio-app/gradio/issues/1721
|
||||
*/
|
||||
|
||||
/*
|
||||
window.addEventListener( 'resize', () => imageMaskResize());
|
||||
|
||||
function imageMaskResize() {
|
||||
const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas');
|
||||
if (!canvases.length) {
|
||||
@@ -41,299 +37,7 @@ function imageMaskResize() {
|
||||
c.style.maxHeight = '100%';
|
||||
c.style.objectFit = 'contain';
|
||||
});
|
||||
}
|
||||
|
||||
onUiUpdate(() => imageMaskResize());
|
||||
*/
|
||||
|
||||
onUiLoaded(function () {
|
||||
const color_box = '<input type="color">';
|
||||
const brush_size = '<input type="range" min="0.75" max="110.0">';
|
||||
let is_drawing = false;
|
||||
let img_src = [];
|
||||
let spl_instances = [];
|
||||
let spl_pan_instances = [];
|
||||
let img2img_tab_index = 0;
|
||||
let intervalLastUIUpdate;
|
||||
const container = gradioApp().querySelector(".gradio-container");
|
||||
const observer = new MutationObserver(() =>
|
||||
gradioApp()
|
||||
.querySelectorAll('div[data-testid="image"]')
|
||||
.forEach(function (elem, i) {
|
||||
let img_parent = elem.parentElement.querySelector(
|
||||
'div[data-testid="image"] > div'
|
||||
);
|
||||
let img = img_parent.querySelector("img");
|
||||
if (img) {
|
||||
if (img_src[i] != img.src) {
|
||||
let tool_buttons = img_parent.querySelectorAll("button");
|
||||
//console.log(tool_buttons);
|
||||
if (tool_buttons.length > 2) {
|
||||
img_parent.style.visibility = "hidden";
|
||||
|
||||
if (intervalLastUIUpdate != null)
|
||||
clearInterval(intervalLastUIUpdate);
|
||||
|
||||
intervalLastUIUpdate = setInterval(function () {
|
||||
clearInterval(intervalLastUIUpdate);
|
||||
img_parent.addEventListener("mouseup", function (e) {});
|
||||
|
||||
let spl_parent = elem.parentElement;
|
||||
let spl;
|
||||
let spl_pan;
|
||||
let isPanning;
|
||||
let splid;
|
||||
|
||||
if (spl_parent.className != "spl-pane") {
|
||||
spl = new Spotlight();
|
||||
spl.init(spl_parent, "-" + spl_parent.id);
|
||||
|
||||
spl.addControl("undo", spl_undo_handler);
|
||||
spl_pan = spl.addControl("pan", spl_pan_handler);
|
||||
spl.addControl("brush", spl_brush_handler, brush_size);
|
||||
if (tool_buttons.length == 5) {
|
||||
spl.addControl("color", spl_color_handler, color_box);
|
||||
}
|
||||
spl.addControl("clear", spl_clear_handler);
|
||||
|
||||
spl_instances[i] = spl;
|
||||
spl_pan_instances[i] = spl_pan;
|
||||
} else {
|
||||
spl = spl_instances[i];
|
||||
spl_pan = spl_pan_instances[i];
|
||||
}
|
||||
|
||||
img_src[i] = img.src;
|
||||
//console.log("NEWIMAGE");
|
||||
|
||||
function spl_undo_handler(e) {
|
||||
tool_buttons[0].click();
|
||||
}
|
||||
|
||||
function spl_clear_handler(e) {
|
||||
tool_buttons[2].click();
|
||||
spl.panzoom(false);
|
||||
img_parent.classList.remove("no-point-events");
|
||||
img_parent.parentElement.classList.remove("move");
|
||||
document.removeEventListener("wheel", preventDefault, false);
|
||||
setTimeout(function () {
|
||||
spl.close(false, true);
|
||||
img_parent.style.flexGrow = "1";
|
||||
img_src[i] = "";
|
||||
elem.style.transform = "none";
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function spl_color_handler(e) {}
|
||||
function spl_brush_handler(e) {}
|
||||
|
||||
function preventDefault(e) {
|
||||
e = e || window.event;
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault();
|
||||
}
|
||||
e.returnValue = false;
|
||||
}
|
||||
|
||||
function pan_toggle(val, target) {
|
||||
isPanning = val;
|
||||
target.classList.toggle("on", isPanning);
|
||||
spl.panzoom(val);
|
||||
|
||||
if (isPanning) {
|
||||
img_parent.classList.add("no-point-events");
|
||||
img_parent.parentElement.classList.add("move");
|
||||
document.addEventListener("wheel", preventDefault, {
|
||||
passive: false,
|
||||
});
|
||||
} else {
|
||||
img_parent.classList.remove("no-point-events");
|
||||
img_parent.parentElement.classList.remove("move");
|
||||
document.removeEventListener(
|
||||
"wheel",
|
||||
preventDefault,
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function spl_pan_handler(e) {
|
||||
isPanning = !isPanning;
|
||||
pan_toggle(isPanning, this);
|
||||
}
|
||||
|
||||
function update_color(listener) {
|
||||
let input_color = img_parent.querySelector(
|
||||
"input[type='color']"
|
||||
);
|
||||
let spl =
|
||||
img_parent.parentElement.parentElement.parentElement
|
||||
.parentElement.parentElement;
|
||||
let spl_color = spl.querySelector(
|
||||
".spl-color input[type='color']"
|
||||
);
|
||||
spl_color.value = input_color.value;
|
||||
|
||||
if (listener) {
|
||||
spl_color.addEventListener("input", function (ev) {
|
||||
input_color.value = ev.target.value;
|
||||
updateInput(input_color);
|
||||
pan_toggle(false, spl_pan);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function update_brush(listener) {
|
||||
let input_range = img_parent.querySelector(
|
||||
"input[type='range']"
|
||||
);
|
||||
let spl =
|
||||
img_parent.parentElement.parentElement.parentElement
|
||||
.parentElement.parentElement;
|
||||
let spl_brush = spl.querySelector(
|
||||
".spl-brush input[type='range']"
|
||||
);
|
||||
spl_brush.value = input_range.value;
|
||||
|
||||
if (listener) {
|
||||
spl_brush.addEventListener("input", function (ev) {
|
||||
input_range.value = ev.target.value;
|
||||
updateInput(input_range);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function init_drawing_tools() {
|
||||
let input_color = img_parent.querySelector(
|
||||
"input[type='color']"
|
||||
);
|
||||
if (!input_color) {
|
||||
let tbcolor = img_parent.querySelector(
|
||||
"button[aria-label='Select brush color']"
|
||||
);
|
||||
if (tbcolor) {
|
||||
tbcolor.click();
|
||||
setTimeout(function () {
|
||||
update_color(true);
|
||||
}, 100);
|
||||
}
|
||||
} else {
|
||||
setTimeout(function () {
|
||||
update_color(false);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
let input_range = img_parent.querySelector(
|
||||
"input[type='range']"
|
||||
);
|
||||
if (!input_range) {
|
||||
let tbrange = img_parent.querySelector(
|
||||
"button[aria-label='Use brush']"
|
||||
);
|
||||
|
||||
if (tbrange) {
|
||||
tbrange.click();
|
||||
setTimeout(function () {
|
||||
update_brush(true);
|
||||
}, 100);
|
||||
}
|
||||
} else {
|
||||
setTimeout(function () {
|
||||
update_brush(false);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
let w = img.naturalWidth;
|
||||
let h = img.naturalHeight;
|
||||
img_parent.style.width = `${w}px`;
|
||||
img_parent.style.height = `${h}px`;
|
||||
|
||||
spl.show([
|
||||
{
|
||||
media: "node",
|
||||
src: elem,
|
||||
//autohide: true,
|
||||
//control: ["pan","clear","undo","fullscreen","autofit","zoom-in","zoom-out","close"],
|
||||
class: "relative",
|
||||
},
|
||||
]);
|
||||
|
||||
img_parent.style.flexGrow = "0";
|
||||
pan_toggle(false, spl_pan);
|
||||
spl.panzoom(false);
|
||||
setTimeout(function () {
|
||||
init_drawing_tools();
|
||||
}, 500);
|
||||
img_parent.style.visibility = "visible";
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
observer.observe(container, { childList: true, subtree: true });
|
||||
|
||||
/* gradioApp().querySelectorAll('#mode_img2img > .tabitem').forEach(function (tb, ti){
|
||||
tb.querySelectorAll('[id^="img2img_copy_to_"] > button').forEach(function (btn, bi){
|
||||
|
||||
btn.addEventListener("click", function(e) {
|
||||
console.log(ti + " > " + bi);
|
||||
let src_canvas = tb.querySelector('[key="drawing"]');
|
||||
if(src_canvas){
|
||||
let dest_canvas = gradioApp().querySelector('#mode_img2img .tabitem:nth-child('+parseInt(bi+1)+') [key="drawing"]');
|
||||
//let destCtx = dest_canvas.getContext('2d');
|
||||
//destCtx.drawImage(src_canvas, 0, 0);
|
||||
console.log(src_canvas);
|
||||
console.log(dest_canvas);
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
*/
|
||||
});
|
||||
|
||||
/*
|
||||
let intervalLastUIUpdate;
|
||||
function onLastUIUpdate(){
|
||||
clearInterval(intervalLastUIUpdate);
|
||||
const img2img_tab = gradioApp().querySelector('#img2img_img2img_tab');
|
||||
if(img2img_tab && selectedTabItemId=="tab_img2img"){
|
||||
const current_img2img_tab_index = get_img2img_tab_index()[0];
|
||||
//if(img2img_tab_index != current_img2img_tab_index){
|
||||
console.log(current_img2img_tab_index);
|
||||
if(current_img2img_tab_index > 3 || current_img2img_tab_index == 0) return;
|
||||
img2img_tab_index = current_img2img_tab_index;
|
||||
let tabid;
|
||||
|
||||
if(img2img_tab_index == 1){
|
||||
tabid = "#img2img_img2img_sketch_tab";// #img2img_sketch";
|
||||
}else if(img2img_tab_index == 2){
|
||||
tabid = "#img2img_inpaint_tab";// #img2maskimg";
|
||||
}else if(img2img_tab_index == 3){
|
||||
tabid = "#img2img_inpaint_sketch_tab";// #inpaint_sketch";
|
||||
}
|
||||
//const parent_img2img_tab_img = gradioApp().querySelector('#mode_img2img > div:nth-child('+(img2img_tab_index+2)+') div[data-testid="image"] > div');
|
||||
const parent_img2img_tab_img = gradioApp().querySelector('#mode_img2img '+tabid+' div[data-testid="image"] > div');
|
||||
const img2img_tab_img = parent_img2img_tab_img.querySelector('img');
|
||||
if(img2img_tab_img){
|
||||
parent_img2img_tab_img.style.flexGrow = "0";
|
||||
img2img_tab_img.onload = function() {
|
||||
let w = this.naturalWidth;
|
||||
let h = this.naturalHeight;
|
||||
parent_img2img_tab_img.style.width = `${w}px`;
|
||||
parent_img2img_tab_img.style.height = `${h}px`;
|
||||
}
|
||||
}else{
|
||||
parent_img2img_tab_img.style.flexGrow = "1";
|
||||
}
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
onUiUpdate(function() {
|
||||
if(intervalLastUIUpdate != null) clearInterval(intervalLastUIUpdate);
|
||||
intervalLastUIUpdate = setInterval(onLastUIUpdate, 1000);
|
||||
}) */
|
||||
|
||||
onAfterUiUpdate(imageMaskResize);
|
||||
window.addEventListener('resize', imageMaskResize);
|
||||
|
||||
+232
-215
@@ -1,242 +1,259 @@
|
||||
//called from progressbar
|
||||
function showGalleryImage() {
|
||||
//need to clean up the old code
|
||||
// A full size 'lightbox' preview modal shown when left clicking on gallery previews
|
||||
function closeModal() {
|
||||
gradioApp().getElementById("lightboxModal").style.display = "none";
|
||||
}
|
||||
|
||||
let like;
|
||||
let tile;
|
||||
function showModal(event) {
|
||||
const source = event.target || event.srcElement;
|
||||
const modalImage = gradioApp().getElementById("modalImage");
|
||||
const lb = gradioApp().getElementById("lightboxModal");
|
||||
modalImage.src = source.src;
|
||||
if (modalImage.style.display === 'none') {
|
||||
lb.style.setProperty('background-image', 'url(' + source.src + ')');
|
||||
}
|
||||
lb.style.display = "flex";
|
||||
lb.focus();
|
||||
|
||||
let slide = 0;
|
||||
let gallery = [];
|
||||
let fullImg_src;
|
||||
//let control = ["pan","undo","like","tile","page","fullscreen","autofit","zoom-in","zoom-out","clear","close","download","prev","next"];
|
||||
let control = [
|
||||
"like",
|
||||
"tile",
|
||||
"page",
|
||||
"fullscreen",
|
||||
"autofit",
|
||||
"zoom-in",
|
||||
"zoom-out",
|
||||
"clear",
|
||||
"close",
|
||||
"download",
|
||||
"prev",
|
||||
"next",
|
||||
];
|
||||
|
||||
let img_browser;
|
||||
let img_file_name;
|
||||
|
||||
let spl_pane;
|
||||
let spl_zoom_out;
|
||||
let spl_zoom_in;
|
||||
let spotlight_gallery;
|
||||
|
||||
function tile_zoom_update(val) {
|
||||
let current_tile_state_size = gallery[slide].tile_size;
|
||||
current_tile_state_size += val * 5;
|
||||
current_tile_state_size = Math.max(5, Math.min(100, current_tile_state_size));
|
||||
spl_pane.style.setProperty("background-size", current_tile_state_size + "%");
|
||||
gallery[slide].tile_size = current_tile_state_size;
|
||||
const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
|
||||
const tabImg2Img = gradioApp().getElementById("tab_img2img");
|
||||
// show the save button in modal only on txt2img or img2img tabs
|
||||
if (tabTxt2Img.style.display != "none" || tabImg2Img.style.display != "none") {
|
||||
gradioApp().getElementById("modal_save").style.display = "inline";
|
||||
} else {
|
||||
gradioApp().getElementById("modal_save").style.display = "none";
|
||||
}
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function tile_wheel(event) {
|
||||
let delta = event["deltaY"];
|
||||
delta = (delta < 0 ? 1 : delta ? -1 : 0) * 0.5;
|
||||
tile_zoom_update(delta);
|
||||
}
|
||||
function tile_zoom_in(event) {
|
||||
tile_zoom_update(1);
|
||||
}
|
||||
function tile_zoom_out(event) {
|
||||
tile_zoom_update(-1);
|
||||
function negmod(n, m) {
|
||||
return ((n % m) + m) % m;
|
||||
}
|
||||
|
||||
function removeTile() {
|
||||
spl_pane.removeEventListener("wheel", tile_wheel);
|
||||
spl_zoom_out.removeEventListener("click", tile_zoom_out);
|
||||
spl_zoom_in.removeEventListener("click", tile_zoom_in);
|
||||
function updateOnBackgroundChange() {
|
||||
const modalImage = gradioApp().getElementById("modalImage");
|
||||
if (modalImage && modalImage.offsetParent) {
|
||||
let currentButton = selected_gallery_button();
|
||||
|
||||
spl_pane.classList.remove("hide");
|
||||
spl_pane.style.setProperty("background-image", "none");
|
||||
spotlight_gallery.zoom(0.0);
|
||||
if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
|
||||
modalImage.src = currentButton.children[0].src;
|
||||
if (modalImage.style.display === 'none') {
|
||||
const modal = gradioApp().getElementById("lightboxModal");
|
||||
modal.style.setProperty('background-image', `url(${modalImage.src})`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addTile(spl_img) {
|
||||
spl_pane.addEventListener("wheel", tile_wheel);
|
||||
spl_zoom_out.addEventListener("click", tile_zoom_out);
|
||||
spl_zoom_in.addEventListener("click", tile_zoom_in);
|
||||
function modalImageSwitch(offset) {
|
||||
var galleryButtons = all_gallery_buttons();
|
||||
|
||||
const current_tile_state_size = gallery[slide].tile_size;
|
||||
spl_pane.classList.add("hide");
|
||||
spl_pane.style.setProperty("background-position", "center");
|
||||
spl_pane.style.setProperty("background-size", current_tile_state_size + "%");
|
||||
if (spl_img) {
|
||||
spl_pane.style.setProperty("background-image", `url(${spl_img.src})`);
|
||||
}
|
||||
if (galleryButtons.length > 1) {
|
||||
var currentButton = selected_gallery_button();
|
||||
|
||||
var result = -1;
|
||||
galleryButtons.forEach(function(v, i) {
|
||||
if (v == currentButton) {
|
||||
result = i;
|
||||
}
|
||||
});
|
||||
|
||||
if (result != -1) {
|
||||
var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)];
|
||||
nextButton.click();
|
||||
const modalImage = gradioApp().getElementById("modalImage");
|
||||
const modal = gradioApp().getElementById("lightboxModal");
|
||||
modalImage.src = nextButton.children[0].src;
|
||||
if (modalImage.style.display === 'none') {
|
||||
modal.style.setProperty('background-image', `url(${modalImage.src})`);
|
||||
}
|
||||
setTimeout(function() {
|
||||
modal.focus();
|
||||
}, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function tile_handler(event) {
|
||||
const current_tile_state = !gallery[slide].tile;
|
||||
gallery[slide].tile = current_tile_state;
|
||||
|
||||
this.classList.toggle("on");
|
||||
|
||||
if (current_tile_state) {
|
||||
const spl_img = gradioApp().querySelector("#spotlight-gal .spl-pane img");
|
||||
addTile(spl_img);
|
||||
} else {
|
||||
removeTile();
|
||||
}
|
||||
}
|
||||
function like_handler(event) {
|
||||
const current_like_state = !gallery[slide].like;
|
||||
gallery[slide].like = current_like_state;
|
||||
this.classList.toggle("on");
|
||||
|
||||
if (current_like_state) {
|
||||
// add to favorites ...
|
||||
//img_file_name.value = gallery[slide].src;
|
||||
//console.log(gallery[slide].src);
|
||||
} else {
|
||||
// remove from favorites ...
|
||||
}
|
||||
function saveImage() {
|
||||
const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
|
||||
const tabImg2Img = gradioApp().getElementById("tab_img2img");
|
||||
const saveTxt2Img = "save_txt2img";
|
||||
const saveImg2Img = "save_img2img";
|
||||
if (tabTxt2Img.style.display != "none") {
|
||||
gradioApp().getElementById(saveTxt2Img).click();
|
||||
} else if (tabImg2Img.style.display != "none") {
|
||||
gradioApp().getElementById(saveImg2Img).click();
|
||||
} else {
|
||||
console.error("missing implementation for saving modal of this type");
|
||||
}
|
||||
}
|
||||
|
||||
function createGallerySpotlight() {
|
||||
//console.log("clicked");
|
||||
slide = 0;
|
||||
gallery = [];
|
||||
|
||||
gradioApp()
|
||||
.querySelectorAll("#" + selectedTabItemId + " .thumbnails img")
|
||||
.forEach(function (elem, i) {
|
||||
elem.setAttribute("gal-id", i);
|
||||
//if(fullImg_src == elem.src) slide = parseInt(i+1);
|
||||
if (elem.parentElement.className.indexOf("selected") != -1)
|
||||
slide = parseInt(i + 1);
|
||||
//console.log(slide);
|
||||
gallery[i] = {
|
||||
src: elem.src,
|
||||
title: "Seed:" + elem.src,
|
||||
//description: "This is a description.",
|
||||
like: false,
|
||||
tile: false,
|
||||
tile_size: 50,
|
||||
};
|
||||
});
|
||||
|
||||
const options = {
|
||||
class: "sd-gallery",
|
||||
index: slide,
|
||||
//control: ["like","page","theme","fullscreen","autofit","zoom-in","zoom-out","close","download","play","prev","next"],
|
||||
control: control,
|
||||
//animation: animation,
|
||||
onshow: function (index) {},
|
||||
onchange: function (index, options) {
|
||||
slide = index - 1;
|
||||
tile.classList.toggle("on", gallery[slide].tile);
|
||||
//if(img_browser){
|
||||
like.classList.toggle("on", gallery[slide].like);
|
||||
|
||||
//}
|
||||
|
||||
spl_pane = gradioApp().querySelector(
|
||||
"#spotlight-gal .spl-pane:nth-child(" + index + ")"
|
||||
);
|
||||
spl_zoom_out = gradioApp().querySelector("#spotlight-gal .spl-zoom-out");
|
||||
spl_zoom_in = gradioApp().querySelector("#spotlight-gal .spl-zoom-in");
|
||||
|
||||
const current_tile_state = gallery[slide].tile;
|
||||
if (current_tile_state) {
|
||||
addTile();
|
||||
} else {
|
||||
removeTile();
|
||||
}
|
||||
},
|
||||
onclose: function (index) {
|
||||
gradioApp()
|
||||
.querySelector(
|
||||
"#" +
|
||||
selectedTabItemId +
|
||||
" .thumbnails .thumbnail-item:nth-child(" +
|
||||
(slide + 1) +
|
||||
")"
|
||||
)
|
||||
.click();
|
||||
},
|
||||
};
|
||||
|
||||
//assign(options, modifier);
|
||||
|
||||
spotlight_gallery.show(gallery, options);
|
||||
spotlight_gallery.panzoom(true);
|
||||
function modalSaveImage(event) {
|
||||
saveImage();
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function fullImg_click_handler(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
createGallerySpotlight();
|
||||
function modalNextImage(event) {
|
||||
modalImageSwitch(1);
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
let intervalUiUpdateIViewer;
|
||||
function onUiHeaderTabUpdate() {
|
||||
if (intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer);
|
||||
intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500);
|
||||
function modalPrevImage(event) {
|
||||
modalImageSwitch(-1);
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
let fullImg_preview;
|
||||
function onUiUpdateIViewer() {
|
||||
clearInterval(intervalUiUpdateIViewer);
|
||||
//update_performant_inputs(selectedTabItemId);
|
||||
|
||||
//fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' [id$="2img_results"] .modify-upload + img.w-full.object-contain');
|
||||
fullImg_preview = gradioApp().querySelector(
|
||||
"#" + selectedTabItemId + " .preview > img"
|
||||
);
|
||||
if (opts.js_modal_lightbox && fullImg_preview) {
|
||||
fullImg_src = fullImg_preview.src;
|
||||
fullImg_preview.removeEventListener("click", fullImg_click_handler);
|
||||
fullImg_preview.addEventListener("click", fullImg_click_handler, true); //bubbling phase
|
||||
|
||||
/*
|
||||
// this is an idea to integrate image browser extension seamlesly,
|
||||
// without the need to change to the image browser tab extension users will be able to review images after generation
|
||||
// and add them to favorites or delete the ones that don't like on the spot
|
||||
const img_browser = gradioApp().querySelector('[id$="2img_images_history"]');
|
||||
const tbname = selectedTabItemId.split("_")[1];
|
||||
if(img_browser && tbname ==("txt2img" || "img2img")){
|
||||
const images_history = gradioApp().querySelector('[id$="'+tbname+'_images_history"]');
|
||||
const history_button_panel = images_history.querySelector('[id$="'+tbname+'_images_history_button_panel"]');
|
||||
const labels = images_history.querySelectorAll('label.block span');
|
||||
for(let i=0;i<labels.length;i++){
|
||||
//console.log(labels[i].innerHTML)
|
||||
if(labels[i].innerHTML == 'File Name'){
|
||||
img_file_name = labels[i].parentElement.querySelector("textarea");
|
||||
console.log(img_file_name.value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
function modalKeyHandler(event) {
|
||||
switch (event.key) {
|
||||
case "s":
|
||||
saveImage();
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
modalPrevImage(event);
|
||||
break;
|
||||
case "ArrowRight":
|
||||
modalNextImage(event);
|
||||
break;
|
||||
case "Escape":
|
||||
closeModal();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onUiUpdate(function () {
|
||||
if (intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer);
|
||||
intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500);
|
||||
function setupImageForLightbox(e) {
|
||||
if (e.dataset.modded) {
|
||||
return;
|
||||
}
|
||||
|
||||
e.dataset.modded = true;
|
||||
e.style.cursor = 'pointer';
|
||||
e.style.userSelect = 'none';
|
||||
|
||||
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
||||
|
||||
// For Firefox, listening on click first switched to next image then shows the lightbox.
|
||||
// If you know how to fix this without switching to mousedown event, please.
|
||||
// For other browsers the event is click to make it possiblr to drag picture.
|
||||
var event = isFirefox ? 'mousedown' : 'click';
|
||||
|
||||
e.addEventListener(event, function(evt) {
|
||||
if (evt.button == 1) {
|
||||
open(evt.target.src);
|
||||
evt.preventDefault();
|
||||
return;
|
||||
}
|
||||
if (!opts.js_modal_lightbox || evt.button != 0) return;
|
||||
|
||||
modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed);
|
||||
evt.preventDefault();
|
||||
showModal(evt);
|
||||
}, true);
|
||||
|
||||
}
|
||||
|
||||
function modalZoomSet(modalImage, enable) {
|
||||
if (modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);
|
||||
}
|
||||
|
||||
function modalZoomToggle(event) {
|
||||
var modalImage = gradioApp().getElementById("modalImage");
|
||||
modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'));
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
function modalTileImageToggle(event) {
|
||||
const modalImage = gradioApp().getElementById("modalImage");
|
||||
const modal = gradioApp().getElementById("lightboxModal");
|
||||
const isTiling = modalImage.style.display === 'none';
|
||||
if (isTiling) {
|
||||
modalImage.style.display = 'block';
|
||||
modal.style.setProperty('background-image', 'none');
|
||||
} else {
|
||||
modalImage.style.display = 'none';
|
||||
modal.style.setProperty('background-image', `url(${modalImage.src})`);
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
onAfterUiUpdate(function() {
|
||||
var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img');
|
||||
if (fullImg_preview != null) {
|
||||
fullImg_preview.forEach(setupImageForLightbox);
|
||||
}
|
||||
updateOnBackgroundChange();
|
||||
});
|
||||
|
||||
onUiLoaded(function () {
|
||||
spotlight_gallery = new Spotlight();
|
||||
spotlight_gallery.init(
|
||||
gradioApp().querySelector(".gradio-container"),
|
||||
"-gal"
|
||||
);
|
||||
tile = spotlight_gallery.addControl("tile", tile_handler);
|
||||
like = spotlight_gallery.addControl("like", like_handler);
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
//const modalFragment = document.createDocumentFragment();
|
||||
const modal = document.createElement('div');
|
||||
modal.onclick = closeModal;
|
||||
modal.id = "lightboxModal";
|
||||
modal.tabIndex = 0;
|
||||
modal.addEventListener('keydown', modalKeyHandler, true);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {});
|
||||
const modalControls = document.createElement('div');
|
||||
modalControls.className = 'modalControls gradio-container';
|
||||
modal.append(modalControls);
|
||||
|
||||
const modalZoom = document.createElement('span');
|
||||
modalZoom.className = 'modalZoom cursor';
|
||||
modalZoom.innerHTML = '⤡';
|
||||
modalZoom.addEventListener('click', modalZoomToggle, true);
|
||||
modalZoom.title = "Toggle zoomed view";
|
||||
modalControls.appendChild(modalZoom);
|
||||
|
||||
const modalTileImage = document.createElement('span');
|
||||
modalTileImage.className = 'modalTileImage cursor';
|
||||
modalTileImage.innerHTML = '⊞';
|
||||
modalTileImage.addEventListener('click', modalTileImageToggle, true);
|
||||
modalTileImage.title = "Preview tiling";
|
||||
modalControls.appendChild(modalTileImage);
|
||||
|
||||
const modalSave = document.createElement("span");
|
||||
modalSave.className = "modalSave cursor";
|
||||
modalSave.id = "modal_save";
|
||||
modalSave.innerHTML = "🖫";
|
||||
modalSave.addEventListener("click", modalSaveImage, true);
|
||||
modalSave.title = "Save Image(s)";
|
||||
modalControls.appendChild(modalSave);
|
||||
|
||||
const modalClose = document.createElement('span');
|
||||
modalClose.className = 'modalClose cursor';
|
||||
modalClose.innerHTML = '×';
|
||||
modalClose.onclick = closeModal;
|
||||
modalClose.title = "Close image viewer";
|
||||
modalControls.appendChild(modalClose);
|
||||
|
||||
const modalImage = document.createElement('img');
|
||||
modalImage.id = 'modalImage';
|
||||
modalImage.onclick = closeModal;
|
||||
modalImage.tabIndex = 0;
|
||||
modalImage.addEventListener('keydown', modalKeyHandler, true);
|
||||
modal.appendChild(modalImage);
|
||||
|
||||
const modalPrev = document.createElement('a');
|
||||
modalPrev.className = 'modalPrev';
|
||||
modalPrev.innerHTML = '❮';
|
||||
modalPrev.tabIndex = 0;
|
||||
modalPrev.addEventListener('click', modalPrevImage, true);
|
||||
modalPrev.addEventListener('keydown', modalKeyHandler, true);
|
||||
modal.appendChild(modalPrev);
|
||||
|
||||
const modalNext = document.createElement('a');
|
||||
modalNext.className = 'modalNext';
|
||||
modalNext.innerHTML = '❯';
|
||||
modalNext.tabIndex = 0;
|
||||
modalNext.addEventListener('click', modalNextImage, true);
|
||||
modalNext.addEventListener('keydown', modalKeyHandler, true);
|
||||
|
||||
modal.appendChild(modalNext);
|
||||
|
||||
try {
|
||||
gradioApp().appendChild(modal);
|
||||
} catch (e) {
|
||||
gradioApp().body.appendChild(modal);
|
||||
}
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
});
|
||||
|
||||
@@ -60,4 +60,4 @@ function sleepUntil(f, timeout) {
|
||||
}
|
||||
}, 20);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
var observerAccordionOpen = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutationRecord) {
|
||||
var elem = mutationRecord.target;
|
||||
var open = elem.classList.contains('open');
|
||||
|
||||
var accordion = elem.parentNode;
|
||||
accordion.classList.toggle('input-accordion-open', open);
|
||||
|
||||
var checkbox = gradioApp().querySelector('#' + accordion.id + "-checkbox input");
|
||||
checkbox.checked = open;
|
||||
updateInput(checkbox);
|
||||
|
||||
var extra = gradioApp().querySelector('#' + accordion.id + "-extra");
|
||||
if (extra) {
|
||||
extra.style.display = open ? "" : "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function inputAccordionChecked(id, checked) {
|
||||
var label = gradioApp().querySelector('#' + id + " .label-wrap");
|
||||
if (label.classList.contains('open') != checked) {
|
||||
label.click();
|
||||
}
|
||||
}
|
||||
|
||||
onUiLoaded(function() {
|
||||
for (var accordion of gradioApp().querySelectorAll('.input-accordion')) {
|
||||
var labelWrap = accordion.querySelector('.label-wrap');
|
||||
observerAccordionOpen.observe(labelWrap, {attributes: true, attributeFilter: ['class']});
|
||||
|
||||
var extra = gradioApp().querySelector('#' + accordion.id + "-extra");
|
||||
if (extra) {
|
||||
labelWrap.insertBefore(extra, labelWrap.lastElementChild);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,26 @@
|
||||
|
||||
function localSet(k, v) {
|
||||
try {
|
||||
localStorage.setItem(k, v);
|
||||
} catch (e) {
|
||||
console.warn(`Failed to save ${k} to localStorage: ${e}`);
|
||||
}
|
||||
}
|
||||
|
||||
function localGet(k, def) {
|
||||
try {
|
||||
return localStorage.getItem(k);
|
||||
} catch (e) {
|
||||
console.warn(`Failed to load ${k} from localStorage: ${e}`);
|
||||
}
|
||||
|
||||
return def;
|
||||
}
|
||||
|
||||
function localRemove(k) {
|
||||
try {
|
||||
return localStorage.removeItem(k);
|
||||
} catch (e) {
|
||||
console.warn(`Failed to remove ${k} from localStorage: ${e}`);
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
|
||||
// localization = {} -- the dict with translations is created by the backend
|
||||
|
||||
var ignore_ids_for_localization = {
|
||||
@@ -10,11 +11,11 @@ var ignore_ids_for_localization = {
|
||||
train_hypernetwork: 'OPTION',
|
||||
txt2img_styles: 'OPTION',
|
||||
img2img_styles: 'OPTION',
|
||||
setting_random_artist_categories: 'SPAN',
|
||||
setting_face_restoration_model: 'SPAN',
|
||||
setting_realesrgan_enabled_models: 'SPAN',
|
||||
extras_upscaler_1: 'SPAN',
|
||||
extras_upscaler_2: 'SPAN',
|
||||
setting_random_artist_categories: 'OPTION',
|
||||
setting_face_restoration_model: 'OPTION',
|
||||
setting_realesrgan_enabled_models: 'OPTION',
|
||||
extras_upscaler_1: 'OPTION',
|
||||
extras_upscaler_2: 'OPTION',
|
||||
};
|
||||
|
||||
var re_num = /^[.\d]+$/;
|
||||
@@ -106,12 +107,41 @@ function processNode(node) {
|
||||
});
|
||||
}
|
||||
|
||||
function localizeWholePage() {
|
||||
processNode(gradioApp());
|
||||
|
||||
function elem(comp) {
|
||||
var elem_id = comp.props.elem_id ? comp.props.elem_id : "component-" + comp.id;
|
||||
return gradioApp().getElementById(elem_id);
|
||||
}
|
||||
|
||||
for (var comp of window.gradio_config.components) {
|
||||
if (comp.props.webui_tooltip) {
|
||||
let e = elem(comp);
|
||||
|
||||
let tl = e ? getTranslation(e.title) : undefined;
|
||||
if (tl !== undefined) {
|
||||
e.title = tl;
|
||||
}
|
||||
}
|
||||
if (comp.props.placeholder) {
|
||||
let e = elem(comp);
|
||||
let textbox = e ? e.querySelector('[placeholder]') : null;
|
||||
|
||||
let tl = textbox ? getTranslation(textbox.placeholder) : undefined;
|
||||
if (tl !== undefined) {
|
||||
textbox.placeholder = tl;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function dumpTranslations() {
|
||||
if (!hasLocalization()) {
|
||||
// If we don't have any localization,
|
||||
// we will not have traversed the app to find
|
||||
// original_lines, so do that now.
|
||||
processNode(gradioApp());
|
||||
localizeWholePage();
|
||||
}
|
||||
var dumped = {};
|
||||
if (localization.rtl) {
|
||||
@@ -153,7 +183,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
});
|
||||
});
|
||||
|
||||
processNode(gradioApp());
|
||||
localizeWholePage();
|
||||
|
||||
if (localization.rtl) { // if the language is from right to left,
|
||||
(new MutationObserver((mutations, observer) => { // wait for the style to load
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
// Monitors the gallery and sends a browser notification when the leading image is new.
|
||||
|
||||
let lastHeadImg = null;
|
||||
|
||||
let notificationButton = null;
|
||||
@@ -13,7 +15,7 @@ onAfterUiUpdate(function() {
|
||||
}
|
||||
}
|
||||
|
||||
const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"][style*="display: block"] div[id$="_results"] .thumbnail-item > img');
|
||||
const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"] div[id$="_results"] .thumbnail-item > img');
|
||||
|
||||
if (galleryPreviews == null) return;
|
||||
|
||||
@@ -44,4 +46,4 @@ onAfterUiUpdate(function() {
|
||||
parent.focus();
|
||||
this.close();
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
+115
-137
@@ -36,13 +36,13 @@ function pad2(x) {
|
||||
}
|
||||
|
||||
function formatTime(secs) {
|
||||
if (secs > 3600) {
|
||||
return pad2(Math.floor(secs / 60 / 60)) + ":" + pad2(Math.floor(secs / 60) % 60) + ":" + pad2(Math.floor(secs) % 60);
|
||||
} else if (secs > 60) {
|
||||
return pad2(Math.floor(secs / 60)) + ":" + pad2(Math.floor(secs) % 60);
|
||||
} else {
|
||||
return Math.floor(secs) + "s";
|
||||
}
|
||||
if (secs > 3600) {
|
||||
return pad2(Math.floor(secs / 60 / 60)) + ":" + pad2(Math.floor(secs / 60) % 60) + ":" + pad2(Math.floor(secs) % 60);
|
||||
} else if (secs > 60) {
|
||||
return pad2(Math.floor(secs / 60)) + ":" + pad2(Math.floor(secs) % 60);
|
||||
} else {
|
||||
return Math.floor(secs) + "s";
|
||||
}
|
||||
}
|
||||
|
||||
function setTitle(progress) {
|
||||
@@ -57,6 +57,7 @@ function setTitle(progress) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function randomId() {
|
||||
return "task(" + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + ")";
|
||||
}
|
||||
@@ -64,145 +65,122 @@ function randomId() {
|
||||
// starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and
|
||||
// preview inside gallery element. Cleans up all created stuff when the task is over and calls atEnd.
|
||||
// calls onProgress every time there is a progress update
|
||||
function requestProgress(
|
||||
id_task,
|
||||
progressbarContainer,
|
||||
gallery,
|
||||
atEnd,
|
||||
onProgress,
|
||||
inactivityTimeout = 40
|
||||
) {
|
||||
var dateStart = new Date();
|
||||
var wasEverActive = false;
|
||||
var parentProgressbar = progressbarContainer.parentNode;
|
||||
var parentGallery = gallery ? gallery.parentNode : null;
|
||||
function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgress, inactivityTimeout = 40) {
|
||||
var dateStart = new Date();
|
||||
var wasEverActive = false;
|
||||
var parentProgressbar = progressbarContainer.parentNode;
|
||||
|
||||
var divProgress = document.createElement("div");
|
||||
divProgress.className = "progressDiv";
|
||||
var divProgress = document.createElement('div');
|
||||
divProgress.className = 'progressDiv';
|
||||
divProgress.style.display = opts.show_progressbar ? "block" : "none";
|
||||
var divInner = document.createElement('div');
|
||||
divInner.className = 'progress';
|
||||
|
||||
divProgress.style.display = opts.show_progressbar ? "block" : "none";
|
||||
var divInner = document.createElement("div");
|
||||
divInner.className = "progress";
|
||||
divProgress.appendChild(divInner);
|
||||
parentProgressbar.insertBefore(divProgress, progressbarContainer);
|
||||
|
||||
divProgress.appendChild(divInner);
|
||||
parentProgressbar.insertBefore(divProgress, progressbarContainer);
|
||||
var livePreview = null;
|
||||
|
||||
if (parentGallery) {
|
||||
var livePreview = gradioApp().querySelector(".livePreview");
|
||||
if (!livePreview) {
|
||||
livePreview = document.createElement("div");
|
||||
livePreview.classList.add("livePreview", "init");
|
||||
parentGallery.insertBefore(livePreview, gallery);
|
||||
}
|
||||
livePreview.classList.remove("dropPreview");
|
||||
}
|
||||
var removeProgressBar = function() {
|
||||
if (!divProgress) return;
|
||||
|
||||
var removeProgressBar = function () {
|
||||
setTitle("");
|
||||
if (divProgress) {
|
||||
parentProgressbar.removeChild(divProgress);
|
||||
}
|
||||
setTitle("");
|
||||
parentProgressbar.removeChild(divProgress);
|
||||
if (gallery && livePreview) gallery.removeChild(livePreview);
|
||||
atEnd();
|
||||
|
||||
if (progressbarContainer.id == "txt2img_gallery_container") {
|
||||
showSubmitButtons("txt2img", true);
|
||||
} else if (progressbarContainer.id == "img2img_gallery_container") {
|
||||
showSubmitButtons("img2img", true);
|
||||
}
|
||||
if (livePreview) {
|
||||
if (parentGallery) parentGallery.removeChild(livePreview);
|
||||
}
|
||||
gradioApp()
|
||||
.querySelectorAll("#tabs + div, #tabs + div > *:not(ul)")
|
||||
.forEach(function (elem) {
|
||||
elem.style.setProperty("display", "block", "important");
|
||||
});
|
||||
atEnd();
|
||||
};
|
||||
divProgress = null;
|
||||
};
|
||||
|
||||
var fun = function (id_task, id_live_preview) {
|
||||
request(
|
||||
"./internal/progress",
|
||||
{ id_task: id_task, id_live_preview: id_live_preview },
|
||||
function (res) {
|
||||
if (res.completed) {
|
||||
removeProgressBar();
|
||||
return;
|
||||
}
|
||||
|
||||
var rect = progressbarContainer.getBoundingClientRect();
|
||||
|
||||
if (rect.width) {
|
||||
divProgress.style.width = rect.width + "px";
|
||||
}
|
||||
|
||||
let progressText = "";
|
||||
|
||||
divInner.style.width = (res.progress || 0) * 100.0 + "%";
|
||||
divInner.style.background = res.progress ? "" : "transparent";
|
||||
|
||||
if (res.progress > 0) {
|
||||
progressText = ((res.progress || 0) * 100.0).toFixed(0) + "%";
|
||||
}
|
||||
|
||||
if (res.eta) {
|
||||
progressText += " ETA: " + formatTime(res.eta);
|
||||
}
|
||||
|
||||
setTitle(progressText);
|
||||
|
||||
if (res.textinfo && res.textinfo.indexOf("\n") == -1) {
|
||||
progressText = res.textinfo + " " + progressText;
|
||||
}
|
||||
|
||||
divInner.textContent = progressText;
|
||||
|
||||
var elapsedFromStart = (new Date() - dateStart) / 1000;
|
||||
|
||||
if (res.active) wasEverActive = true;
|
||||
|
||||
if (!res.active && wasEverActive) {
|
||||
removeProgressBar();
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
elapsedFromStart > inactivityTimeout &&
|
||||
!res.queued &&
|
||||
!res.active
|
||||
) {
|
||||
removeProgressBar();
|
||||
return;
|
||||
}
|
||||
|
||||
if (res.live_preview && gallery) {
|
||||
|
||||
livePreview.classList.remove("init");
|
||||
|
||||
var img = new Image();
|
||||
img.onload = function () {
|
||||
img.width = img.naturalWidth;
|
||||
img.height = img.naturalHeight;
|
||||
livePreview.appendChild(img);
|
||||
if (livePreview.childElementCount > 2) {
|
||||
livePreview.removeChild(livePreview.firstElementChild);
|
||||
var funProgress = function(id_task) {
|
||||
request("./internal/progress", {id_task: id_task, live_preview: false}, function(res) {
|
||||
if (res.completed) {
|
||||
removeProgressBar();
|
||||
return;
|
||||
}
|
||||
};
|
||||
img.src = res.live_preview;
|
||||
}
|
||||
|
||||
if (onProgress) {
|
||||
onProgress(res);
|
||||
}
|
||||
let progressText = "";
|
||||
|
||||
setTimeout(() => {
|
||||
fun(id_task, res.id_live_preview);
|
||||
}, opts.live_preview_refresh_period || 500);
|
||||
},
|
||||
function () {
|
||||
removeProgressBar();
|
||||
}
|
||||
);
|
||||
};
|
||||
divInner.style.width = ((res.progress || 0) * 100.0) + '%';
|
||||
divInner.style.background = res.progress ? "" : "transparent";
|
||||
|
||||
if (res.progress > 0) {
|
||||
progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%';
|
||||
}
|
||||
|
||||
if (res.eta) {
|
||||
progressText += " ETA: " + formatTime(res.eta);
|
||||
}
|
||||
|
||||
setTitle(progressText);
|
||||
|
||||
if (res.textinfo && res.textinfo.indexOf("\n") == -1) {
|
||||
progressText = res.textinfo + " " + progressText;
|
||||
}
|
||||
|
||||
divInner.textContent = progressText;
|
||||
|
||||
var elapsedFromStart = (new Date() - dateStart) / 1000;
|
||||
|
||||
if (res.active) wasEverActive = true;
|
||||
|
||||
if (!res.active && wasEverActive) {
|
||||
removeProgressBar();
|
||||
return;
|
||||
}
|
||||
|
||||
if (elapsedFromStart > inactivityTimeout && !res.queued && !res.active) {
|
||||
removeProgressBar();
|
||||
return;
|
||||
}
|
||||
|
||||
if (onProgress) {
|
||||
onProgress(res);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
funProgress(id_task, res.id_live_preview);
|
||||
}, opts.live_preview_refresh_period || 500);
|
||||
}, function() {
|
||||
removeProgressBar();
|
||||
});
|
||||
};
|
||||
|
||||
var funLivePreview = function(id_task, id_live_preview) {
|
||||
request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
|
||||
if (!divProgress) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (res.live_preview && gallery) {
|
||||
var img = new Image();
|
||||
img.onload = function() {
|
||||
if (!livePreview) {
|
||||
livePreview = document.createElement('div');
|
||||
livePreview.className = 'livePreview';
|
||||
gallery.insertBefore(livePreview, gallery.firstElementChild);
|
||||
}
|
||||
|
||||
livePreview.appendChild(img);
|
||||
if (livePreview.childElementCount > 2) {
|
||||
livePreview.removeChild(livePreview.firstElementChild);
|
||||
}
|
||||
};
|
||||
img.src = res.live_preview;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
funLivePreview(id_task, res.id_live_preview);
|
||||
}, opts.live_preview_refresh_period || 500);
|
||||
}, function() {
|
||||
removeProgressBar();
|
||||
});
|
||||
};
|
||||
|
||||
funProgress(id_task, 0);
|
||||
|
||||
if (gallery) {
|
||||
funLivePreview(id_task, 0);
|
||||
}
|
||||
|
||||
fun(id_task, 0);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
(function() {
|
||||
const GRADIO_MIN_WIDTH = 320;
|
||||
const GRID_TEMPLATE_COLUMNS = '1fr 16px 1fr';
|
||||
const PAD = 16;
|
||||
const DEBOUNCE_TIME = 100;
|
||||
|
||||
const R = {
|
||||
tracking: false,
|
||||
parent: null,
|
||||
parentWidth: null,
|
||||
leftCol: null,
|
||||
leftColStartWidth: null,
|
||||
screenX: null,
|
||||
};
|
||||
|
||||
let resizeTimer;
|
||||
let parents = [];
|
||||
|
||||
function setLeftColGridTemplate(el, width) {
|
||||
el.style.gridTemplateColumns = `${width}px 16px 1fr`;
|
||||
}
|
||||
|
||||
function displayResizeHandle(parent) {
|
||||
if (window.innerWidth < GRADIO_MIN_WIDTH * 2 + PAD * 4) {
|
||||
parent.style.display = 'flex';
|
||||
if (R.handle != null) {
|
||||
R.handle.style.opacity = '0';
|
||||
}
|
||||
return false;
|
||||
} else {
|
||||
parent.style.display = 'grid';
|
||||
if (R.handle != null) {
|
||||
R.handle.style.opacity = '100';
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function afterResize(parent) {
|
||||
if (displayResizeHandle(parent) && parent.style.gridTemplateColumns != GRID_TEMPLATE_COLUMNS) {
|
||||
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);
|
||||
setLeftColGridTemplate(parent, newWidthL);
|
||||
|
||||
R.parentWidth = newParentWidth;
|
||||
}
|
||||
}
|
||||
|
||||
function setup(parent) {
|
||||
const leftCol = parent.firstElementChild;
|
||||
const rightCol = parent.lastElementChild;
|
||||
|
||||
parents.push(parent);
|
||||
|
||||
parent.style.display = 'grid';
|
||||
parent.style.gap = '0';
|
||||
parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
|
||||
|
||||
const resizeHandle = document.createElement('div');
|
||||
resizeHandle.classList.add('resize-handle');
|
||||
parent.insertBefore(resizeHandle, rightCol);
|
||||
|
||||
resizeHandle.addEventListener('mousedown', (evt) => {
|
||||
if (evt.button !== 0) return;
|
||||
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
document.body.classList.add('resizing');
|
||||
|
||||
R.tracking = true;
|
||||
R.parent = parent;
|
||||
R.parentWidth = parent.offsetWidth;
|
||||
R.handle = resizeHandle;
|
||||
R.leftCol = leftCol;
|
||||
R.leftColStartWidth = leftCol.offsetWidth;
|
||||
R.screenX = evt.screenX;
|
||||
});
|
||||
|
||||
resizeHandle.addEventListener('dblclick', (evt) => {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
parent.style.gridTemplateColumns = GRID_TEMPLATE_COLUMNS;
|
||||
});
|
||||
|
||||
afterResize(parent);
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', (evt) => {
|
||||
if (evt.button !== 0) return;
|
||||
|
||||
if (R.tracking) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('mouseup', (evt) => {
|
||||
if (evt.button !== 0) return;
|
||||
|
||||
if (R.tracking) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
|
||||
R.tracking = false;
|
||||
|
||||
document.body.classList.remove('resizing');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(resizeTimer);
|
||||
|
||||
resizeTimer = setTimeout(function() {
|
||||
for (const parent of parents) {
|
||||
afterResize(parent);
|
||||
}
|
||||
}, DEBOUNCE_TIME);
|
||||
});
|
||||
|
||||
setupResizeHandle = setup;
|
||||
})();
|
||||
|
||||
onUiLoaded(function() {
|
||||
for (var elem of gradioApp().querySelectorAll('.resize-handle-row')) {
|
||||
if (!elem.querySelector('.resize-handle')) {
|
||||
setupResizeHandle(elem);
|
||||
}
|
||||
}
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
@@ -1,3 +1,6 @@
|
||||
|
||||
|
||||
|
||||
function start_training_textual_inversion() {
|
||||
gradioApp().querySelector('#ti_error').innerHTML = '';
|
||||
|
||||
|
||||
+182
-1855
File diff suppressed because it is too large
Load Diff
@@ -1,3 +1,5 @@
|
||||
// various hints and extra info for the settings tab
|
||||
|
||||
var settingsHintsSetup = false;
|
||||
|
||||
onOptionsChanged(function() {
|
||||
|
||||
Reference in New Issue
Block a user