Run eslint --fix
(and normalize tabs to spaces)
This commit is contained in:
parent
4f11f285f9
commit
9c54b78d9d
@ -4,39 +4,39 @@
|
|||||||
// If there's a mismatch, the keyword counter turns red and if you hover on it, a tooltip tells you what's wrong.
|
// If there's a mismatch, the keyword counter turns red and if you hover on it, a tooltip tells you what's wrong.
|
||||||
|
|
||||||
function checkBrackets(textArea, counterElt) {
|
function checkBrackets(textArea, counterElt) {
|
||||||
var counts = {};
|
var counts = {};
|
||||||
(textArea.value.match(/[(){}\[\]]/g) || []).forEach(bracket => {
|
(textArea.value.match(/[(){}\[\]]/g) || []).forEach(bracket => {
|
||||||
counts[bracket] = (counts[bracket] || 0) + 1;
|
counts[bracket] = (counts[bracket] || 0) + 1;
|
||||||
});
|
});
|
||||||
var errors = [];
|
var errors = [];
|
||||||
|
|
||||||
function checkPair(open, close, kind) {
|
function checkPair(open, close, kind) {
|
||||||
if (counts[open] !== counts[close]) {
|
if (counts[open] !== counts[close]) {
|
||||||
errors.push(
|
errors.push(
|
||||||
`${open}...${close} - Detected ${counts[open] || 0} opening and ${counts[close] || 0} closing ${kind}.`
|
`${open}...${close} - Detected ${counts[open] || 0} opening and ${counts[close] || 0} closing ${kind}.`
|
||||||
);
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
checkPair('(', ')', 'round brackets');
|
checkPair('(', ')', 'round brackets');
|
||||||
checkPair('[', ']', 'square brackets');
|
checkPair('[', ']', 'square brackets');
|
||||||
checkPair('{', '}', 'curly brackets');
|
checkPair('{', '}', 'curly brackets');
|
||||||
counterElt.title = errors.join('\n');
|
counterElt.title = errors.join('\n');
|
||||||
counterElt.classList.toggle('error', errors.length !== 0);
|
counterElt.classList.toggle('error', errors.length !== 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupBracketChecking(id_prompt, id_counter) {
|
function setupBracketChecking(id_prompt, id_counter) {
|
||||||
var textarea = gradioApp().querySelector("#" + id_prompt + " > label > textarea");
|
var textarea = gradioApp().querySelector("#" + id_prompt + " > label > textarea");
|
||||||
var counter = gradioApp().getElementById(id_counter)
|
var counter = gradioApp().getElementById(id_counter);
|
||||||
|
|
||||||
if (textarea && counter) {
|
if (textarea && counter) {
|
||||||
textarea.addEventListener("input", () => checkBrackets(textarea, counter));
|
textarea.addEventListener("input", () => checkBrackets(textarea, counter));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onUiLoaded(function () {
|
onUiLoaded(function() {
|
||||||
setupBracketChecking('txt2img_prompt', 'txt2img_token_counter');
|
setupBracketChecking('txt2img_prompt', 'txt2img_token_counter');
|
||||||
setupBracketChecking('txt2img_neg_prompt', 'txt2img_negative_token_counter');
|
setupBracketChecking('txt2img_neg_prompt', 'txt2img_negative_token_counter');
|
||||||
setupBracketChecking('img2img_prompt', 'img2img_token_counter');
|
setupBracketChecking('img2img_prompt', 'img2img_token_counter');
|
||||||
setupBracketChecking('img2img_neg_prompt', 'img2img_negative_token_counter');
|
setupBracketChecking('img2img_neg_prompt', 'img2img_negative_token_counter');
|
||||||
});
|
});
|
||||||
|
@ -1,111 +1,113 @@
|
|||||||
|
|
||||||
let currentWidth = null;
|
let currentWidth = null;
|
||||||
let currentHeight = null;
|
let currentHeight = null;
|
||||||
let arFrameTimeout = setTimeout(function(){},0);
|
let arFrameTimeout = setTimeout(function() {}, 0);
|
||||||
|
|
||||||
function dimensionChange(e, is_width, is_height){
|
function dimensionChange(e, is_width, is_height) {
|
||||||
|
|
||||||
if(is_width){
|
if (is_width) {
|
||||||
currentWidth = e.target.value*1.0
|
currentWidth = e.target.value * 1.0;
|
||||||
}
|
}
|
||||||
if(is_height){
|
if (is_height) {
|
||||||
currentHeight = e.target.value*1.0
|
currentHeight = e.target.value * 1.0;
|
||||||
}
|
}
|
||||||
|
|
||||||
var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";
|
var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";
|
||||||
|
|
||||||
if(!inImg2img){
|
if (!inImg2img) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var targetElement = null;
|
var targetElement = null;
|
||||||
|
|
||||||
var tabIndex = get_tab_index('mode_img2img')
|
var tabIndex = get_tab_index('mode_img2img');
|
||||||
if(tabIndex == 0){ // img2img
|
if (tabIndex == 0) { // img2img
|
||||||
targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');
|
targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');
|
||||||
} else if(tabIndex == 1){ //Sketch
|
} else if (tabIndex == 1) { //Sketch
|
||||||
targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');
|
targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');
|
||||||
} else if(tabIndex == 2){ // Inpaint
|
} else if (tabIndex == 2) { // Inpaint
|
||||||
targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
|
targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
|
||||||
} else if(tabIndex == 3){ // Inpaint sketch
|
} else if (tabIndex == 3) { // Inpaint sketch
|
||||||
targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');
|
targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if(targetElement){
|
if (targetElement) {
|
||||||
|
|
||||||
var arPreviewRect = gradioApp().querySelector('#imageARPreview');
|
var arPreviewRect = gradioApp().querySelector('#imageARPreview');
|
||||||
if(!arPreviewRect){
|
if (!arPreviewRect) {
|
||||||
arPreviewRect = document.createElement('div')
|
arPreviewRect = document.createElement('div');
|
||||||
arPreviewRect.id = "imageARPreview";
|
arPreviewRect.id = "imageARPreview";
|
||||||
gradioApp().appendChild(arPreviewRect)
|
gradioApp().appendChild(arPreviewRect);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var viewportOffset = targetElement.getBoundingClientRect();
|
var viewportOffset = targetElement.getBoundingClientRect();
|
||||||
|
|
||||||
var viewportscale = Math.min( targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight )
|
var viewportscale = Math.min(targetElement.clientWidth / targetElement.naturalWidth, targetElement.clientHeight / targetElement.naturalHeight);
|
||||||
|
|
||||||
var scaledx = targetElement.naturalWidth*viewportscale
|
var scaledx = targetElement.naturalWidth * viewportscale;
|
||||||
var scaledy = targetElement.naturalHeight*viewportscale
|
var scaledy = targetElement.naturalHeight * viewportscale;
|
||||||
|
|
||||||
var cleintRectTop = (viewportOffset.top+window.scrollY)
|
var cleintRectTop = (viewportOffset.top + window.scrollY);
|
||||||
var cleintRectLeft = (viewportOffset.left+window.scrollX)
|
var cleintRectLeft = (viewportOffset.left + window.scrollX);
|
||||||
var cleintRectCentreY = cleintRectTop + (targetElement.clientHeight/2)
|
var cleintRectCentreY = cleintRectTop + (targetElement.clientHeight / 2);
|
||||||
var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth/2)
|
var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth / 2);
|
||||||
|
|
||||||
var arscale = Math.min( scaledx/currentWidth, scaledy/currentHeight )
|
var arscale = Math.min(scaledx / currentWidth, scaledy / currentHeight);
|
||||||
var arscaledx = currentWidth*arscale
|
var arscaledx = currentWidth * arscale;
|
||||||
var arscaledy = currentHeight*arscale
|
var arscaledy = currentHeight * arscale;
|
||||||
|
|
||||||
var arRectTop = cleintRectCentreY-(arscaledy/2)
|
var arRectTop = cleintRectCentreY - (arscaledy / 2);
|
||||||
var arRectLeft = cleintRectCentreX-(arscaledx/2)
|
var arRectLeft = cleintRectCentreX - (arscaledx / 2);
|
||||||
var arRectWidth = arscaledx
|
var arRectWidth = arscaledx;
|
||||||
var arRectHeight = arscaledy
|
var arRectHeight = arscaledy;
|
||||||
|
|
||||||
arPreviewRect.style.top = arRectTop+'px';
|
arPreviewRect.style.top = arRectTop + 'px';
|
||||||
arPreviewRect.style.left = arRectLeft+'px';
|
arPreviewRect.style.left = arRectLeft + 'px';
|
||||||
arPreviewRect.style.width = arRectWidth+'px';
|
arPreviewRect.style.width = arRectWidth + 'px';
|
||||||
arPreviewRect.style.height = arRectHeight+'px';
|
arPreviewRect.style.height = arRectHeight + 'px';
|
||||||
|
|
||||||
clearTimeout(arFrameTimeout);
|
clearTimeout(arFrameTimeout);
|
||||||
arFrameTimeout = setTimeout(function(){
|
arFrameTimeout = setTimeout(function() {
|
||||||
arPreviewRect.style.display = 'none';
|
arPreviewRect.style.display = 'none';
|
||||||
},2000);
|
}, 2000);
|
||||||
|
|
||||||
arPreviewRect.style.display = 'block';
|
arPreviewRect.style.display = 'block';
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
onUiUpdate(function(){
|
onUiUpdate(function() {
|
||||||
var arPreviewRect = gradioApp().querySelector('#imageARPreview');
|
var arPreviewRect = gradioApp().querySelector('#imageARPreview');
|
||||||
if(arPreviewRect){
|
if (arPreviewRect) {
|
||||||
arPreviewRect.style.display = 'none';
|
arPreviewRect.style.display = 'none';
|
||||||
}
|
}
|
||||||
var tabImg2img = gradioApp().querySelector("#tab_img2img");
|
var tabImg2img = gradioApp().querySelector("#tab_img2img");
|
||||||
if (tabImg2img) {
|
if (tabImg2img) {
|
||||||
var inImg2img = tabImg2img.style.display == "block";
|
var inImg2img = tabImg2img.style.display == "block";
|
||||||
if(inImg2img){
|
if (inImg2img) {
|
||||||
let inputs = gradioApp().querySelectorAll('input');
|
let inputs = gradioApp().querySelectorAll('input');
|
||||||
inputs.forEach(function(e){
|
inputs.forEach(function(e) {
|
||||||
var is_width = e.parentElement.id == "img2img_width"
|
var is_width = e.parentElement.id == "img2img_width";
|
||||||
var is_height = e.parentElement.id == "img2img_height"
|
var is_height = e.parentElement.id == "img2img_height";
|
||||||
|
|
||||||
if((is_width || is_height) && !e.classList.contains('scrollwatch')){
|
if ((is_width || is_height) && !e.classList.contains('scrollwatch')) {
|
||||||
e.addEventListener('input', function(e){dimensionChange(e, is_width, is_height)} )
|
e.addEventListener('input', function(e) {
|
||||||
e.classList.add('scrollwatch')
|
dimensionChange(e, is_width, is_height);
|
||||||
}
|
});
|
||||||
if(is_width){
|
e.classList.add('scrollwatch');
|
||||||
currentWidth = e.value*1.0
|
}
|
||||||
}
|
if (is_width) {
|
||||||
if(is_height){
|
currentWidth = e.value * 1.0;
|
||||||
currentHeight = e.value*1.0
|
}
|
||||||
}
|
if (is_height) {
|
||||||
})
|
currentHeight = e.value * 1.0;
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
});
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
@ -1,166 +1,172 @@
|
|||||||
|
|
||||||
contextMenuInit = function(){
|
contextMenuInit = function() {
|
||||||
let eventListenerApplied=false;
|
let eventListenerApplied = false;
|
||||||
let menuSpecs = new Map();
|
let menuSpecs = new Map();
|
||||||
|
|
||||||
const uid = function(){
|
const uid = function() {
|
||||||
return Date.now().toString(36) + Math.random().toString(36).substring(2);
|
return Date.now().toString(36) + Math.random().toString(36).substring(2);
|
||||||
}
|
};
|
||||||
|
|
||||||
function showContextMenu(event,element,menuEntries){
|
function showContextMenu(event, element, menuEntries) {
|
||||||
let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
|
let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
|
||||||
let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
|
let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
|
||||||
|
|
||||||
let oldMenu = gradioApp().querySelector('#context-menu')
|
let oldMenu = gradioApp().querySelector('#context-menu');
|
||||||
if(oldMenu){
|
if (oldMenu) {
|
||||||
oldMenu.remove()
|
oldMenu.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
let baseStyle = window.getComputedStyle(uiCurrentTab)
|
let baseStyle = window.getComputedStyle(uiCurrentTab);
|
||||||
|
|
||||||
const contextMenu = document.createElement('nav')
|
const contextMenu = document.createElement('nav');
|
||||||
contextMenu.id = "context-menu"
|
contextMenu.id = "context-menu";
|
||||||
contextMenu.style.background = baseStyle.background
|
contextMenu.style.background = baseStyle.background;
|
||||||
contextMenu.style.color = baseStyle.color
|
contextMenu.style.color = baseStyle.color;
|
||||||
contextMenu.style.fontFamily = baseStyle.fontFamily
|
contextMenu.style.fontFamily = baseStyle.fontFamily;
|
||||||
contextMenu.style.top = posy+'px'
|
contextMenu.style.top = posy + 'px';
|
||||||
contextMenu.style.left = posx+'px'
|
contextMenu.style.left = posx + 'px';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const contextMenuList = document.createElement('ul')
|
const contextMenuList = document.createElement('ul');
|
||||||
contextMenuList.className = 'context-menu-items';
|
contextMenuList.className = 'context-menu-items';
|
||||||
contextMenu.append(contextMenuList);
|
contextMenu.append(contextMenuList);
|
||||||
|
|
||||||
menuEntries.forEach(function(entry){
|
menuEntries.forEach(function(entry) {
|
||||||
let contextMenuEntry = document.createElement('a')
|
let contextMenuEntry = document.createElement('a');
|
||||||
contextMenuEntry.innerHTML = entry['name']
|
contextMenuEntry.innerHTML = entry['name'];
|
||||||
contextMenuEntry.addEventListener("click", function() {
|
contextMenuEntry.addEventListener("click", function() {
|
||||||
entry['func']();
|
entry['func']();
|
||||||
})
|
});
|
||||||
contextMenuList.append(contextMenuEntry);
|
contextMenuList.append(contextMenuEntry);
|
||||||
|
|
||||||
})
|
});
|
||||||
|
|
||||||
gradioApp().appendChild(contextMenu)
|
gradioApp().appendChild(contextMenu);
|
||||||
|
|
||||||
let menuWidth = contextMenu.offsetWidth + 4;
|
let menuWidth = contextMenu.offsetWidth + 4;
|
||||||
let menuHeight = contextMenu.offsetHeight + 4;
|
let menuHeight = contextMenu.offsetHeight + 4;
|
||||||
|
|
||||||
let windowWidth = window.innerWidth;
|
let windowWidth = window.innerWidth;
|
||||||
let windowHeight = window.innerHeight;
|
let windowHeight = window.innerHeight;
|
||||||
|
|
||||||
if ( (windowWidth - posx) < menuWidth ) {
|
if ((windowWidth - posx) < menuWidth) {
|
||||||
contextMenu.style.left = windowWidth - menuWidth + "px";
|
contextMenu.style.left = windowWidth - menuWidth + "px";
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( (windowHeight - posy) < menuHeight ) {
|
if ((windowHeight - posy) < menuHeight) {
|
||||||
contextMenu.style.top = windowHeight - menuHeight + "px";
|
contextMenu.style.top = windowHeight - menuHeight + "px";
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function appendContextMenuOption(targetElementSelector,entryName,entryFunction){
|
function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {
|
||||||
|
|
||||||
var currentItems = menuSpecs.get(targetElementSelector)
|
var currentItems = menuSpecs.get(targetElementSelector);
|
||||||
|
|
||||||
if(!currentItems){
|
if (!currentItems) {
|
||||||
currentItems = []
|
currentItems = [];
|
||||||
menuSpecs.set(targetElementSelector,currentItems);
|
menuSpecs.set(targetElementSelector, currentItems);
|
||||||
}
|
}
|
||||||
let newItem = {'id':targetElementSelector+'_'+uid(),
|
let newItem = {
|
||||||
'name':entryName,
|
id: targetElementSelector + '_' + uid(),
|
||||||
'func':entryFunction,
|
name: entryName,
|
||||||
'isNew':true}
|
func: entryFunction,
|
||||||
|
isNew: true
|
||||||
currentItems.push(newItem)
|
};
|
||||||
return newItem['id']
|
|
||||||
}
|
currentItems.push(newItem);
|
||||||
|
return newItem['id'];
|
||||||
function removeContextMenuOption(uid){
|
}
|
||||||
menuSpecs.forEach(function(v) {
|
|
||||||
let index = -1
|
function removeContextMenuOption(uid) {
|
||||||
v.forEach(function(e,ei){if(e['id']==uid){index=ei}})
|
menuSpecs.forEach(function(v) {
|
||||||
if(index>=0){
|
let index = -1;
|
||||||
v.splice(index, 1);
|
v.forEach(function(e, ei) {
|
||||||
}
|
if (e['id'] == uid) {
|
||||||
})
|
index = ei;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
function addContextMenuEventListener(){
|
if (index >= 0) {
|
||||||
if(eventListenerApplied){
|
v.splice(index, 1);
|
||||||
return;
|
}
|
||||||
}
|
});
|
||||||
gradioApp().addEventListener("click", function(e) {
|
}
|
||||||
if(! e.isTrusted){
|
|
||||||
return
|
function addContextMenuEventListener() {
|
||||||
}
|
if (eventListenerApplied) {
|
||||||
|
return;
|
||||||
let oldMenu = gradioApp().querySelector('#context-menu')
|
}
|
||||||
if(oldMenu){
|
gradioApp().addEventListener("click", function(e) {
|
||||||
oldMenu.remove()
|
if (!e.isTrusted) {
|
||||||
}
|
return;
|
||||||
});
|
}
|
||||||
gradioApp().addEventListener("contextmenu", function(e) {
|
|
||||||
let oldMenu = gradioApp().querySelector('#context-menu')
|
let oldMenu = gradioApp().querySelector('#context-menu');
|
||||||
if(oldMenu){
|
if (oldMenu) {
|
||||||
oldMenu.remove()
|
oldMenu.remove();
|
||||||
}
|
}
|
||||||
menuSpecs.forEach(function(v,k) {
|
});
|
||||||
if(e.composedPath()[0].matches(k)){
|
gradioApp().addEventListener("contextmenu", function(e) {
|
||||||
showContextMenu(e,e.composedPath()[0],v)
|
let oldMenu = gradioApp().querySelector('#context-menu');
|
||||||
e.preventDefault()
|
if (oldMenu) {
|
||||||
}
|
oldMenu.remove();
|
||||||
})
|
}
|
||||||
});
|
menuSpecs.forEach(function(v, k) {
|
||||||
eventListenerApplied=true
|
if (e.composedPath()[0].matches(k)) {
|
||||||
|
showContextMenu(e, e.composedPath()[0], v);
|
||||||
}
|
e.preventDefault();
|
||||||
|
}
|
||||||
return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener]
|
});
|
||||||
}
|
});
|
||||||
|
eventListenerApplied = true;
|
||||||
initResponse = contextMenuInit();
|
|
||||||
appendContextMenuOption = initResponse[0];
|
}
|
||||||
removeContextMenuOption = initResponse[1];
|
|
||||||
addContextMenuEventListener = initResponse[2];
|
return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener];
|
||||||
|
};
|
||||||
(function(){
|
|
||||||
//Start example Context Menu Items
|
initResponse = contextMenuInit();
|
||||||
let generateOnRepeat = function(genbuttonid,interruptbuttonid){
|
appendContextMenuOption = initResponse[0];
|
||||||
let genbutton = gradioApp().querySelector(genbuttonid);
|
removeContextMenuOption = initResponse[1];
|
||||||
let interruptbutton = gradioApp().querySelector(interruptbuttonid);
|
addContextMenuEventListener = initResponse[2];
|
||||||
if(!interruptbutton.offsetParent){
|
|
||||||
genbutton.click();
|
(function() {
|
||||||
}
|
//Start example Context Menu Items
|
||||||
clearInterval(window.generateOnRepeatInterval)
|
let generateOnRepeat = function(genbuttonid, interruptbuttonid) {
|
||||||
window.generateOnRepeatInterval = setInterval(function(){
|
let genbutton = gradioApp().querySelector(genbuttonid);
|
||||||
if(!interruptbutton.offsetParent){
|
let interruptbutton = gradioApp().querySelector(interruptbuttonid);
|
||||||
genbutton.click();
|
if (!interruptbutton.offsetParent) {
|
||||||
}
|
genbutton.click();
|
||||||
},
|
}
|
||||||
500)
|
clearInterval(window.generateOnRepeatInterval);
|
||||||
}
|
window.generateOnRepeatInterval = setInterval(function() {
|
||||||
|
if (!interruptbutton.offsetParent) {
|
||||||
appendContextMenuOption('#txt2img_generate','Generate forever',function(){
|
genbutton.click();
|
||||||
generateOnRepeat('#txt2img_generate','#txt2img_interrupt');
|
}
|
||||||
})
|
},
|
||||||
appendContextMenuOption('#img2img_generate','Generate forever',function(){
|
500);
|
||||||
generateOnRepeat('#img2img_generate','#img2img_interrupt');
|
};
|
||||||
})
|
|
||||||
|
appendContextMenuOption('#txt2img_generate', 'Generate forever', function() {
|
||||||
let cancelGenerateForever = function(){
|
generateOnRepeat('#txt2img_generate', '#txt2img_interrupt');
|
||||||
clearInterval(window.generateOnRepeatInterval)
|
});
|
||||||
}
|
appendContextMenuOption('#img2img_generate', 'Generate forever', function() {
|
||||||
|
generateOnRepeat('#img2img_generate', '#img2img_interrupt');
|
||||||
appendContextMenuOption('#txt2img_interrupt','Cancel generate forever',cancelGenerateForever)
|
});
|
||||||
appendContextMenuOption('#txt2img_generate', 'Cancel generate forever',cancelGenerateForever)
|
|
||||||
appendContextMenuOption('#img2img_interrupt','Cancel generate forever',cancelGenerateForever)
|
let cancelGenerateForever = function() {
|
||||||
appendContextMenuOption('#img2img_generate', 'Cancel generate forever',cancelGenerateForever)
|
clearInterval(window.generateOnRepeatInterval);
|
||||||
|
};
|
||||||
})();
|
|
||||||
//End example Context Menu Items
|
appendContextMenuOption('#txt2img_interrupt', 'Cancel generate forever', cancelGenerateForever);
|
||||||
|
appendContextMenuOption('#txt2img_generate', 'Cancel generate forever', cancelGenerateForever);
|
||||||
onUiUpdate(function(){
|
appendContextMenuOption('#img2img_interrupt', 'Cancel generate forever', cancelGenerateForever);
|
||||||
addContextMenuEventListener()
|
appendContextMenuOption('#img2img_generate', 'Cancel generate forever', cancelGenerateForever);
|
||||||
});
|
|
||||||
|
})();
|
||||||
|
//End example Context Menu Items
|
||||||
|
|
||||||
|
onUiUpdate(function() {
|
||||||
|
addContextMenuEventListener();
|
||||||
|
});
|
||||||
|
47
javascript/dragdrop.js
vendored
47
javascript/dragdrop.js
vendored
@ -1,11 +1,11 @@
|
|||||||
// allows drag-dropping files into gradio image elements, and also pasting images from clipboard
|
// allows drag-dropping files into gradio image elements, and also pasting images from clipboard
|
||||||
|
|
||||||
function isValidImageList( files ) {
|
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 ) {
|
function dropReplaceImage(imgWrap, files) {
|
||||||
if ( ! isValidImageList( files ) ) {
|
if (!isValidImageList(files)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -14,44 +14,44 @@ function dropReplaceImage( imgWrap, files ) {
|
|||||||
imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
|
imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
|
||||||
const callback = () => {
|
const callback = () => {
|
||||||
const fileInput = imgWrap.querySelector('input[type="file"]');
|
const fileInput = imgWrap.querySelector('input[type="file"]');
|
||||||
if ( fileInput ) {
|
if (fileInput) {
|
||||||
if ( files.length === 0 ) {
|
if (files.length === 0) {
|
||||||
files = new DataTransfer();
|
files = new DataTransfer();
|
||||||
files.items.add(tmpFile);
|
files.items.add(tmpFile);
|
||||||
fileInput.files = files.files;
|
fileInput.files = files.files;
|
||||||
} else {
|
} else {
|
||||||
fileInput.files = files;
|
fileInput.files = files;
|
||||||
}
|
}
|
||||||
fileInput.dispatchEvent(new Event('change'));
|
fileInput.dispatchEvent(new Event('change'));
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if ( imgWrap.closest('#pnginfo_image') ) {
|
if (imgWrap.closest('#pnginfo_image')) {
|
||||||
// special treatment for PNG Info tab, wait for fetch request to finish
|
// special treatment for PNG Info tab, wait for fetch request to finish
|
||||||
const oldFetch = window.fetch;
|
const oldFetch = window.fetch;
|
||||||
window.fetch = async (input, options) => {
|
window.fetch = async(input, options) => {
|
||||||
const response = await oldFetch(input, options);
|
const response = await oldFetch(input, options);
|
||||||
if ( 'api/predict/' === input ) {
|
if ('api/predict/' === input) {
|
||||||
const content = await response.text();
|
const content = await response.text();
|
||||||
window.fetch = oldFetch;
|
window.fetch = oldFetch;
|
||||||
window.requestAnimationFrame( () => callback() );
|
window.requestAnimationFrame(() => callback());
|
||||||
return new Response(content, {
|
return new Response(content, {
|
||||||
status: response.status,
|
status: response.status,
|
||||||
statusText: response.statusText,
|
statusText: response.statusText,
|
||||||
headers: response.headers
|
headers: response.headers
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
return response;
|
return response;
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
window.requestAnimationFrame( () => callback() );
|
window.requestAnimationFrame(() => callback());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
window.document.addEventListener('dragover', e => {
|
window.document.addEventListener('dragover', e => {
|
||||||
const target = e.composedPath()[0];
|
const target = e.composedPath()[0];
|
||||||
const imgWrap = target.closest('[data-testid="image"]');
|
const imgWrap = target.closest('[data-testid="image"]');
|
||||||
if ( !imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) {
|
if (!imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@ -65,33 +65,34 @@ window.document.addEventListener('drop', e => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const imgWrap = target.closest('[data-testid="image"]');
|
const imgWrap = target.closest('[data-testid="image"]');
|
||||||
if ( !imgWrap ) {
|
if (!imgWrap) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
const files = e.dataTransfer.files;
|
const files = e.dataTransfer.files;
|
||||||
dropReplaceImage( imgWrap, files );
|
dropReplaceImage(imgWrap, files);
|
||||||
});
|
});
|
||||||
|
|
||||||
window.addEventListener('paste', e => {
|
window.addEventListener('paste', e => {
|
||||||
const files = e.clipboardData.files;
|
const files = e.clipboardData.files;
|
||||||
if ( ! isValidImageList( files ) ) {
|
if (!isValidImageList(files)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
|
const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
|
||||||
.filter(el => uiElementIsVisible(el));
|
.filter(el => uiElementIsVisible(el));
|
||||||
if ( ! visibleImageFields.length ) {
|
if (!visibleImageFields.length) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const firstFreeImageField = visibleImageFields
|
const firstFreeImageField = visibleImageFields
|
||||||
.filter(el => el.querySelector('input[type=file]'))?.[0];
|
.filter(el => el.querySelector('input[type=file]'))?.[0];
|
||||||
|
|
||||||
dropReplaceImage(
|
dropReplaceImage(
|
||||||
firstFreeImageField ?
|
firstFreeImageField ?
|
||||||
firstFreeImageField :
|
firstFreeImageField :
|
||||||
visibleImageFields[visibleImageFields.length - 1]
|
visibleImageFields[visibleImageFields.length - 1]
|
||||||
, files );
|
, files
|
||||||
|
);
|
||||||
});
|
});
|
||||||
|
@ -1,120 +1,120 @@
|
|||||||
function keyupEditAttention(event){
|
function keyupEditAttention(event) {
|
||||||
let target = event.originalTarget || event.composedPath()[0];
|
let target = event.originalTarget || event.composedPath()[0];
|
||||||
if (! target.matches("[id*='_toprow'] [id*='_prompt'] textarea")) return;
|
if (!target.matches("[id*='_toprow'] [id*='_prompt'] textarea")) return;
|
||||||
if (! (event.metaKey || event.ctrlKey)) return;
|
if (!(event.metaKey || event.ctrlKey)) return;
|
||||||
|
|
||||||
let isPlus = event.key == "ArrowUp"
|
let isPlus = event.key == "ArrowUp";
|
||||||
let isMinus = event.key == "ArrowDown"
|
let isMinus = event.key == "ArrowDown";
|
||||||
if (!isPlus && !isMinus) return;
|
if (!isPlus && !isMinus) return;
|
||||||
|
|
||||||
let selectionStart = target.selectionStart;
|
let selectionStart = target.selectionStart;
|
||||||
let selectionEnd = target.selectionEnd;
|
let selectionEnd = target.selectionEnd;
|
||||||
let text = target.value;
|
let text = target.value;
|
||||||
|
|
||||||
function selectCurrentParenthesisBlock(OPEN, CLOSE){
|
function selectCurrentParenthesisBlock(OPEN, CLOSE) {
|
||||||
if (selectionStart !== selectionEnd) return false;
|
if (selectionStart !== selectionEnd) return false;
|
||||||
|
|
||||||
// Find opening parenthesis around current cursor
|
// Find opening parenthesis around current cursor
|
||||||
const before = text.substring(0, selectionStart);
|
const before = text.substring(0, selectionStart);
|
||||||
let beforeParen = before.lastIndexOf(OPEN);
|
let beforeParen = before.lastIndexOf(OPEN);
|
||||||
if (beforeParen == -1) return false;
|
if (beforeParen == -1) return false;
|
||||||
let beforeParenClose = before.lastIndexOf(CLOSE);
|
let beforeParenClose = before.lastIndexOf(CLOSE);
|
||||||
while (beforeParenClose !== -1 && beforeParenClose > beforeParen) {
|
while (beforeParenClose !== -1 && beforeParenClose > beforeParen) {
|
||||||
beforeParen = before.lastIndexOf(OPEN, beforeParen - 1);
|
beforeParen = before.lastIndexOf(OPEN, beforeParen - 1);
|
||||||
beforeParenClose = before.lastIndexOf(CLOSE, beforeParenClose - 1);
|
beforeParenClose = before.lastIndexOf(CLOSE, beforeParenClose - 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Find closing parenthesis around current cursor
|
// Find closing parenthesis around current cursor
|
||||||
const after = text.substring(selectionStart);
|
const after = text.substring(selectionStart);
|
||||||
let afterParen = after.indexOf(CLOSE);
|
let afterParen = after.indexOf(CLOSE);
|
||||||
if (afterParen == -1) return false;
|
if (afterParen == -1) return false;
|
||||||
let afterParenOpen = after.indexOf(OPEN);
|
let afterParenOpen = after.indexOf(OPEN);
|
||||||
while (afterParenOpen !== -1 && afterParen > afterParenOpen) {
|
while (afterParenOpen !== -1 && afterParen > afterParenOpen) {
|
||||||
afterParen = after.indexOf(CLOSE, afterParen + 1);
|
afterParen = after.indexOf(CLOSE, afterParen + 1);
|
||||||
afterParenOpen = after.indexOf(OPEN, afterParenOpen + 1);
|
afterParenOpen = after.indexOf(OPEN, afterParenOpen + 1);
|
||||||
}
|
}
|
||||||
if (beforeParen === -1 || afterParen === -1) return false;
|
if (beforeParen === -1 || afterParen === -1) return false;
|
||||||
|
|
||||||
// Set the selection to the text between the parenthesis
|
// Set the selection to the text between the parenthesis
|
||||||
const parenContent = text.substring(beforeParen + 1, selectionStart + afterParen);
|
const parenContent = text.substring(beforeParen + 1, selectionStart + afterParen);
|
||||||
const lastColon = parenContent.lastIndexOf(":");
|
const lastColon = parenContent.lastIndexOf(":");
|
||||||
selectionStart = beforeParen + 1;
|
selectionStart = beforeParen + 1;
|
||||||
selectionEnd = selectionStart + lastColon;
|
selectionEnd = selectionStart + lastColon;
|
||||||
target.setSelectionRange(selectionStart, selectionEnd);
|
target.setSelectionRange(selectionStart, selectionEnd);
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function selectCurrentWord(){
|
function selectCurrentWord() {
|
||||||
if (selectionStart !== selectionEnd) return false;
|
if (selectionStart !== selectionEnd) return false;
|
||||||
const delimiters = opts.keyedit_delimiters + " \r\n\t";
|
const delimiters = opts.keyedit_delimiters + " \r\n\t";
|
||||||
|
|
||||||
// seek backward until to find beggining
|
// seek backward until to find beggining
|
||||||
while (!delimiters.includes(text[selectionStart - 1]) && selectionStart > 0) {
|
while (!delimiters.includes(text[selectionStart - 1]) && selectionStart > 0) {
|
||||||
selectionStart--;
|
selectionStart--;
|
||||||
}
|
}
|
||||||
|
|
||||||
// seek forward to find end
|
// seek forward to find end
|
||||||
while (!delimiters.includes(text[selectionEnd]) && selectionEnd < text.length) {
|
while (!delimiters.includes(text[selectionEnd]) && selectionEnd < text.length) {
|
||||||
selectionEnd++;
|
selectionEnd++;
|
||||||
}
|
}
|
||||||
|
|
||||||
target.setSelectionRange(selectionStart, selectionEnd);
|
target.setSelectionRange(selectionStart, selectionEnd);
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
// If the user hasn't selected anything, let's select their current parenthesis block or word
|
// If the user hasn't selected anything, let's select their current parenthesis block or word
|
||||||
if (!selectCurrentParenthesisBlock('<', '>') && !selectCurrentParenthesisBlock('(', ')')) {
|
if (!selectCurrentParenthesisBlock('<', '>') && !selectCurrentParenthesisBlock('(', ')')) {
|
||||||
selectCurrentWord();
|
selectCurrentWord();
|
||||||
}
|
}
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
var closeCharacter = ')'
|
var closeCharacter = ')';
|
||||||
var delta = opts.keyedit_precision_attention
|
var delta = opts.keyedit_precision_attention;
|
||||||
|
|
||||||
if (selectionStart > 0 && text[selectionStart - 1] == '<'){
|
if (selectionStart > 0 && text[selectionStart - 1] == '<') {
|
||||||
closeCharacter = '>'
|
closeCharacter = '>';
|
||||||
delta = opts.keyedit_precision_extra
|
delta = opts.keyedit_precision_extra;
|
||||||
} else if (selectionStart == 0 || text[selectionStart - 1] != "(") {
|
} else if (selectionStart == 0 || text[selectionStart - 1] != "(") {
|
||||||
|
|
||||||
// do not include spaces at the end
|
// do not include spaces at the end
|
||||||
while(selectionEnd > selectionStart && text[selectionEnd-1] == ' '){
|
while (selectionEnd > selectionStart && text[selectionEnd - 1] == ' ') {
|
||||||
selectionEnd -= 1;
|
selectionEnd -= 1;
|
||||||
}
|
}
|
||||||
if(selectionStart == selectionEnd){
|
if (selectionStart == selectionEnd) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
text = text.slice(0, selectionStart) + "(" + text.slice(selectionStart, selectionEnd) + ":1.0)" + text.slice(selectionEnd);
|
text = text.slice(0, selectionStart) + "(" + text.slice(selectionStart, selectionEnd) + ":1.0)" + text.slice(selectionEnd);
|
||||||
|
|
||||||
selectionStart += 1;
|
selectionStart += 1;
|
||||||
selectionEnd += 1;
|
selectionEnd += 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1;
|
var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1;
|
||||||
var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end));
|
var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end));
|
||||||
if (isNaN(weight)) return;
|
if (isNaN(weight)) return;
|
||||||
|
|
||||||
weight += isPlus ? delta : -delta;
|
weight += isPlus ? delta : -delta;
|
||||||
weight = parseFloat(weight.toPrecision(12));
|
weight = parseFloat(weight.toPrecision(12));
|
||||||
if(String(weight).length == 1) weight += ".0"
|
if (String(weight).length == 1) weight += ".0";
|
||||||
|
|
||||||
if (closeCharacter == ')' && weight == 1) {
|
if (closeCharacter == ')' && weight == 1) {
|
||||||
text = text.slice(0, selectionStart - 1) + text.slice(selectionStart, selectionEnd) + text.slice(selectionEnd + 5);
|
text = text.slice(0, selectionStart - 1) + text.slice(selectionStart, selectionEnd) + text.slice(selectionEnd + 5);
|
||||||
selectionStart--;
|
selectionStart--;
|
||||||
selectionEnd--;
|
selectionEnd--;
|
||||||
} else {
|
} else {
|
||||||
text = text.slice(0, selectionEnd + 1) + weight + text.slice(selectionEnd + 1 + end - 1);
|
text = text.slice(0, selectionEnd + 1) + weight + text.slice(selectionEnd + 1 + end - 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
target.focus();
|
target.focus();
|
||||||
target.value = text;
|
target.value = text;
|
||||||
target.selectionStart = selectionStart;
|
target.selectionStart = selectionStart;
|
||||||
target.selectionEnd = selectionEnd;
|
target.selectionEnd = selectionEnd;
|
||||||
|
|
||||||
updateInput(target)
|
updateInput(target);
|
||||||
}
|
}
|
||||||
|
|
||||||
addEventListener('keydown', (event) => {
|
addEventListener('keydown', (event) => {
|
||||||
keyupEditAttention(event);
|
keyupEditAttention(event);
|
||||||
});
|
});
|
||||||
|
@ -1,71 +1,74 @@
|
|||||||
|
|
||||||
function extensions_apply(_disabled_list, _update_list, disable_all){
|
function extensions_apply(_disabled_list, _update_list, disable_all) {
|
||||||
var disable = []
|
var disable = [];
|
||||||
var update = []
|
var update = [];
|
||||||
|
|
||||||
gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){
|
gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x) {
|
||||||
if(x.name.startsWith("enable_") && ! x.checked)
|
if (x.name.startsWith("enable_") && !x.checked) {
|
||||||
disable.push(x.name.substring(7))
|
disable.push(x.name.substring(7));
|
||||||
|
}
|
||||||
if(x.name.startsWith("update_") && x.checked)
|
|
||||||
update.push(x.name.substring(7))
|
if (x.name.startsWith("update_") && x.checked) {
|
||||||
})
|
update.push(x.name.substring(7));
|
||||||
|
}
|
||||||
restart_reload()
|
});
|
||||||
|
|
||||||
return [JSON.stringify(disable), JSON.stringify(update), disable_all]
|
restart_reload();
|
||||||
}
|
|
||||||
|
return [JSON.stringify(disable), JSON.stringify(update), disable_all];
|
||||||
function extensions_check(){
|
}
|
||||||
var disable = []
|
|
||||||
|
function extensions_check() {
|
||||||
gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){
|
var disable = [];
|
||||||
if(x.name.startsWith("enable_") && ! x.checked)
|
|
||||||
disable.push(x.name.substring(7))
|
gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x) {
|
||||||
})
|
if (x.name.startsWith("enable_") && !x.checked) {
|
||||||
|
disable.push(x.name.substring(7));
|
||||||
gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){
|
}
|
||||||
x.innerHTML = "Loading..."
|
});
|
||||||
})
|
|
||||||
|
gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x) {
|
||||||
|
x.innerHTML = "Loading...";
|
||||||
var id = randomId()
|
});
|
||||||
requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function(){
|
|
||||||
|
|
||||||
})
|
var id = randomId();
|
||||||
|
requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function() {
|
||||||
return [id, JSON.stringify(disable)]
|
|
||||||
}
|
});
|
||||||
|
|
||||||
function install_extension_from_index(button, url){
|
return [id, JSON.stringify(disable)];
|
||||||
button.disabled = "disabled"
|
}
|
||||||
button.value = "Installing..."
|
|
||||||
|
function install_extension_from_index(button, url) {
|
||||||
var textarea = gradioApp().querySelector('#extension_to_install textarea')
|
button.disabled = "disabled";
|
||||||
textarea.value = url
|
button.value = "Installing...";
|
||||||
updateInput(textarea)
|
|
||||||
|
var textarea = gradioApp().querySelector('#extension_to_install textarea');
|
||||||
gradioApp().querySelector('#install_extension_button').click()
|
textarea.value = url;
|
||||||
}
|
updateInput(textarea);
|
||||||
|
|
||||||
function config_state_confirm_restore(_, config_state_name, config_restore_type) {
|
gradioApp().querySelector('#install_extension_button').click();
|
||||||
if (config_state_name == "Current") {
|
}
|
||||||
return [false, config_state_name, config_restore_type];
|
|
||||||
}
|
function config_state_confirm_restore(_, config_state_name, config_restore_type) {
|
||||||
let restored = "";
|
if (config_state_name == "Current") {
|
||||||
if (config_restore_type == "extensions") {
|
return [false, config_state_name, config_restore_type];
|
||||||
restored = "all saved extension versions";
|
}
|
||||||
} else if (config_restore_type == "webui") {
|
let restored = "";
|
||||||
restored = "the webui version";
|
if (config_restore_type == "extensions") {
|
||||||
} else {
|
restored = "all saved extension versions";
|
||||||
restored = "the webui version and all saved extension versions";
|
} else if (config_restore_type == "webui") {
|
||||||
}
|
restored = "the webui version";
|
||||||
let confirmed = confirm("Are you sure you want to restore from this state?\nThis will reset " + restored + ".");
|
} else {
|
||||||
if (confirmed) {
|
restored = "the webui version and all saved extension versions";
|
||||||
restart_reload();
|
}
|
||||||
gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){
|
let confirmed = confirm("Are you sure you want to restore from this state?\nThis will reset " + restored + ".");
|
||||||
x.innerHTML = "Loading..."
|
if (confirmed) {
|
||||||
})
|
restart_reload();
|
||||||
}
|
gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x) {
|
||||||
return [confirmed, config_state_name, config_restore_type];
|
x.innerHTML = "Loading...";
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
return [confirmed, config_state_name, config_restore_type];
|
||||||
|
}
|
||||||
|
@ -1,205 +1,215 @@
|
|||||||
function setupExtraNetworksForTab(tabname){
|
function setupExtraNetworksForTab(tabname) {
|
||||||
gradioApp().querySelector('#'+tabname+'_extra_tabs').classList.add('extra-networks')
|
gradioApp().querySelector('#' + tabname + '_extra_tabs').classList.add('extra-networks');
|
||||||
|
|
||||||
var tabs = gradioApp().querySelector('#'+tabname+'_extra_tabs > div')
|
var tabs = gradioApp().querySelector('#' + tabname + '_extra_tabs > div');
|
||||||
var search = gradioApp().querySelector('#'+tabname+'_extra_search textarea')
|
var search = gradioApp().querySelector('#' + tabname + '_extra_search textarea');
|
||||||
var refresh = gradioApp().getElementById(tabname+'_extra_refresh')
|
var refresh = gradioApp().getElementById(tabname + '_extra_refresh');
|
||||||
|
|
||||||
search.classList.add('search')
|
search.classList.add('search');
|
||||||
tabs.appendChild(search)
|
tabs.appendChild(search);
|
||||||
tabs.appendChild(refresh)
|
tabs.appendChild(refresh);
|
||||||
|
|
||||||
var applyFilter = function(){
|
var applyFilter = function() {
|
||||||
var searchTerm = search.value.toLowerCase()
|
var searchTerm = search.value.toLowerCase();
|
||||||
|
|
||||||
gradioApp().querySelectorAll('#'+tabname+'_extra_tabs div.card').forEach(function(elem){
|
gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
|
||||||
var searchOnly = elem.querySelector('.search_only')
|
var searchOnly = elem.querySelector('.search_only');
|
||||||
var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase()
|
var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase();
|
||||||
|
|
||||||
var visible = text.indexOf(searchTerm) != -1
|
var visible = text.indexOf(searchTerm) != -1;
|
||||||
|
|
||||||
if(searchOnly && searchTerm.length < 4){
|
if (searchOnly && searchTerm.length < 4) {
|
||||||
visible = false
|
visible = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
elem.style.display = visible ? "" : "none"
|
elem.style.display = visible ? "" : "none";
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
search.addEventListener("input", applyFilter);
|
search.addEventListener("input", applyFilter);
|
||||||
applyFilter();
|
applyFilter();
|
||||||
|
|
||||||
extraNetworksApplyFilter[tabname] = applyFilter;
|
extraNetworksApplyFilter[tabname] = applyFilter;
|
||||||
}
|
}
|
||||||
|
|
||||||
function applyExtraNetworkFilter(tabname){
|
function applyExtraNetworkFilter(tabname) {
|
||||||
setTimeout(extraNetworksApplyFilter[tabname], 1);
|
setTimeout(extraNetworksApplyFilter[tabname], 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
var extraNetworksApplyFilter = {}
|
var extraNetworksApplyFilter = {};
|
||||||
var activePromptTextarea = {};
|
var activePromptTextarea = {};
|
||||||
|
|
||||||
function setupExtraNetworks(){
|
function setupExtraNetworks() {
|
||||||
setupExtraNetworksForTab('txt2img')
|
setupExtraNetworksForTab('txt2img');
|
||||||
setupExtraNetworksForTab('img2img')
|
setupExtraNetworksForTab('img2img');
|
||||||
|
|
||||||
function registerPrompt(tabname, id){
|
function registerPrompt(tabname, id) {
|
||||||
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
|
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
|
||||||
|
|
||||||
if (! activePromptTextarea[tabname]){
|
if (!activePromptTextarea[tabname]) {
|
||||||
activePromptTextarea[tabname] = textarea
|
activePromptTextarea[tabname] = textarea;
|
||||||
}
|
}
|
||||||
|
|
||||||
textarea.addEventListener("focus", function(){
|
textarea.addEventListener("focus", function() {
|
||||||
activePromptTextarea[tabname] = textarea;
|
activePromptTextarea[tabname] = textarea;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
registerPrompt('txt2img', 'txt2img_prompt')
|
registerPrompt('txt2img', 'txt2img_prompt');
|
||||||
registerPrompt('txt2img', 'txt2img_neg_prompt')
|
registerPrompt('txt2img', 'txt2img_neg_prompt');
|
||||||
registerPrompt('img2img', 'img2img_prompt')
|
registerPrompt('img2img', 'img2img_prompt');
|
||||||
registerPrompt('img2img', 'img2img_neg_prompt')
|
registerPrompt('img2img', 'img2img_neg_prompt');
|
||||||
}
|
}
|
||||||
|
|
||||||
onUiLoaded(setupExtraNetworks)
|
onUiLoaded(setupExtraNetworks);
|
||||||
|
|
||||||
var re_extranet = /<([^:]+:[^:]+):[\d\.]+>/;
|
var re_extranet = /<([^:]+:[^:]+):[\d\.]+>/;
|
||||||
var re_extranet_g = /\s+<([^:]+:[^:]+):[\d\.]+>/g;
|
var re_extranet_g = /\s+<([^:]+:[^:]+):[\d\.]+>/g;
|
||||||
|
|
||||||
function tryToRemoveExtraNetworkFromPrompt(textarea, text){
|
function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
|
||||||
var m = text.match(re_extranet)
|
var m = text.match(re_extranet);
|
||||||
var replaced = false
|
var replaced = false;
|
||||||
var newTextareaText
|
var newTextareaText;
|
||||||
if(m) {
|
if (m) {
|
||||||
var partToSearch = m[1]
|
var partToSearch = m[1];
|
||||||
newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found){
|
newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found) {
|
||||||
m = found.match(re_extranet);
|
m = found.match(re_extranet);
|
||||||
if(m[1] == partToSearch){
|
if (m[1] == partToSearch) {
|
||||||
replaced = true;
|
replaced = true;
|
||||||
return ""
|
return "";
|
||||||
}
|
}
|
||||||
return found;
|
return found;
|
||||||
})
|
});
|
||||||
} else {
|
} else {
|
||||||
newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found){
|
newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found) {
|
||||||
if(found == text) {
|
if (found == text) {
|
||||||
replaced = true;
|
replaced = true;
|
||||||
return ""
|
return "";
|
||||||
}
|
}
|
||||||
return found;
|
return found;
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if(replaced){
|
if (replaced) {
|
||||||
textarea.value = newTextareaText
|
textarea.value = newTextareaText;
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
return false
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function cardClicked(tabname, textToAdd, allowNegativePrompt){
|
function cardClicked(tabname, textToAdd, allowNegativePrompt) {
|
||||||
var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea")
|
var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
|
||||||
|
|
||||||
if(! tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)){
|
if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) {
|
||||||
textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd
|
textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd;
|
||||||
}
|
}
|
||||||
|
|
||||||
updateInput(textarea)
|
updateInput(textarea);
|
||||||
}
|
}
|
||||||
|
|
||||||
function saveCardPreview(event, tabname, filename){
|
function saveCardPreview(event, tabname, filename) {
|
||||||
var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea')
|
var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea');
|
||||||
var button = gradioApp().getElementById(tabname + '_save_preview')
|
var button = gradioApp().getElementById(tabname + '_save_preview');
|
||||||
|
|
||||||
textarea.value = filename
|
textarea.value = filename;
|
||||||
updateInput(textarea)
|
updateInput(textarea);
|
||||||
|
|
||||||
button.click()
|
button.click();
|
||||||
|
|
||||||
event.stopPropagation()
|
event.stopPropagation();
|
||||||
event.preventDefault()
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
function extraNetworksSearchButton(tabs_id, event){
|
function extraNetworksSearchButton(tabs_id, event) {
|
||||||
var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea')
|
var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea');
|
||||||
var button = event.target
|
var button = event.target;
|
||||||
var text = button.classList.contains("search-all") ? "" : button.textContent.trim()
|
var text = button.classList.contains("search-all") ? "" : button.textContent.trim();
|
||||||
|
|
||||||
searchTextarea.value = text
|
searchTextarea.value = text;
|
||||||
updateInput(searchTextarea)
|
updateInput(searchTextarea);
|
||||||
}
|
}
|
||||||
|
|
||||||
var globalPopup = null;
|
var globalPopup = null;
|
||||||
var globalPopupInner = null;
|
var globalPopupInner = null;
|
||||||
function popup(contents){
|
function popup(contents) {
|
||||||
if(! globalPopup){
|
if (!globalPopup) {
|
||||||
globalPopup = document.createElement('div')
|
globalPopup = document.createElement('div');
|
||||||
globalPopup.onclick = function(){ globalPopup.style.display = "none"; };
|
globalPopup.onclick = function() {
|
||||||
globalPopup.classList.add('global-popup');
|
globalPopup.style.display = "none";
|
||||||
|
};
|
||||||
var close = document.createElement('div')
|
globalPopup.classList.add('global-popup');
|
||||||
close.classList.add('global-popup-close');
|
|
||||||
close.onclick = function(){ globalPopup.style.display = "none"; };
|
var close = document.createElement('div');
|
||||||
close.title = "Close";
|
close.classList.add('global-popup-close');
|
||||||
globalPopup.appendChild(close)
|
close.onclick = function() {
|
||||||
|
globalPopup.style.display = "none";
|
||||||
globalPopupInner = document.createElement('div')
|
};
|
||||||
globalPopupInner.onclick = function(event){ event.stopPropagation(); return false; };
|
close.title = "Close";
|
||||||
globalPopupInner.classList.add('global-popup-inner');
|
globalPopup.appendChild(close);
|
||||||
globalPopup.appendChild(globalPopupInner)
|
|
||||||
|
globalPopupInner = document.createElement('div');
|
||||||
gradioApp().appendChild(globalPopup);
|
globalPopupInner.onclick = function(event) {
|
||||||
}
|
event.stopPropagation(); return false;
|
||||||
|
};
|
||||||
globalPopupInner.innerHTML = '';
|
globalPopupInner.classList.add('global-popup-inner');
|
||||||
globalPopupInner.appendChild(contents);
|
globalPopup.appendChild(globalPopupInner);
|
||||||
|
|
||||||
globalPopup.style.display = "flex";
|
gradioApp().appendChild(globalPopup);
|
||||||
}
|
}
|
||||||
|
|
||||||
function extraNetworksShowMetadata(text){
|
globalPopupInner.innerHTML = '';
|
||||||
var elem = document.createElement('pre')
|
globalPopupInner.appendChild(contents);
|
||||||
elem.classList.add('popup-metadata');
|
|
||||||
elem.textContent = text;
|
globalPopup.style.display = "flex";
|
||||||
|
}
|
||||||
popup(elem);
|
|
||||||
}
|
function extraNetworksShowMetadata(text) {
|
||||||
|
var elem = document.createElement('pre');
|
||||||
function requestGet(url, data, handler, errorHandler){
|
elem.classList.add('popup-metadata');
|
||||||
var xhr = new XMLHttpRequest();
|
elem.textContent = text;
|
||||||
var args = Object.keys(data).map(function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }).join('&')
|
|
||||||
xhr.open("GET", url + "?" + args, true);
|
popup(elem);
|
||||||
|
}
|
||||||
xhr.onreadystatechange = function () {
|
|
||||||
if (xhr.readyState === 4) {
|
function requestGet(url, data, handler, errorHandler) {
|
||||||
if (xhr.status === 200) {
|
var xhr = new XMLHttpRequest();
|
||||||
try {
|
var args = Object.keys(data).map(function(k) {
|
||||||
var js = JSON.parse(xhr.responseText);
|
return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
|
||||||
handler(js)
|
}).join('&');
|
||||||
} catch (error) {
|
xhr.open("GET", url + "?" + args, true);
|
||||||
console.error(error);
|
|
||||||
errorHandler()
|
xhr.onreadystatechange = function() {
|
||||||
}
|
if (xhr.readyState === 4) {
|
||||||
} else{
|
if (xhr.status === 200) {
|
||||||
errorHandler()
|
try {
|
||||||
}
|
var js = JSON.parse(xhr.responseText);
|
||||||
}
|
handler(js);
|
||||||
};
|
} catch (error) {
|
||||||
var js = JSON.stringify(data);
|
console.error(error);
|
||||||
xhr.send(js);
|
errorHandler();
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
function extraNetworksRequestMetadata(event, extraPage, cardName){
|
errorHandler();
|
||||||
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){
|
var js = JSON.stringify(data);
|
||||||
extraNetworksShowMetadata(data.metadata)
|
xhr.send(js);
|
||||||
} else{
|
}
|
||||||
showError()
|
|
||||||
}
|
function extraNetworksRequestMetadata(event, extraPage, cardName) {
|
||||||
}, showError)
|
var showError = function() {
|
||||||
|
extraNetworksShowMetadata("there was an error getting metadata");
|
||||||
event.stopPropagation()
|
};
|
||||||
}
|
|
||||||
|
requestGet("./sd_extra_networks/metadata", {page: extraPage, item: cardName}, function(data) {
|
||||||
|
if (data && data.metadata) {
|
||||||
|
extraNetworksShowMetadata(data.metadata);
|
||||||
|
} else {
|
||||||
|
showError();
|
||||||
|
}
|
||||||
|
}, showError);
|
||||||
|
|
||||||
|
event.stopPropagation();
|
||||||
|
}
|
||||||
|
@ -1,33 +1,35 @@
|
|||||||
// attaches listeners to the txt2img and img2img galleries to update displayed generation param text when the image changes
|
// 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;
|
let txt2img_gallery, img2img_gallery, modal = undefined;
|
||||||
onUiUpdate(function(){
|
onUiUpdate(function() {
|
||||||
if (!txt2img_gallery) {
|
if (!txt2img_gallery) {
|
||||||
txt2img_gallery = attachGalleryListeners("txt2img")
|
txt2img_gallery = attachGalleryListeners("txt2img");
|
||||||
}
|
}
|
||||||
if (!img2img_gallery) {
|
if (!img2img_gallery) {
|
||||||
img2img_gallery = attachGalleryListeners("img2img")
|
img2img_gallery = attachGalleryListeners("img2img");
|
||||||
}
|
}
|
||||||
if (!modal) {
|
if (!modal) {
|
||||||
modal = gradioApp().getElementById('lightboxModal')
|
modal = gradioApp().getElementById('lightboxModal');
|
||||||
modalObserver.observe(modal, { attributes : true, attributeFilter : ['style'] });
|
modalObserver.observe(modal, { attributes: true, attributeFilter: ['style'] });
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
let modalObserver = new MutationObserver(function(mutations) {
|
let modalObserver = new MutationObserver(function(mutations) {
|
||||||
mutations.forEach(function(mutationRecord) {
|
mutations.forEach(function(mutationRecord) {
|
||||||
let selectedTab = gradioApp().querySelector('#tabs div button.selected')?.innerText
|
let selectedTab = gradioApp().querySelector('#tabs div button.selected')?.innerText;
|
||||||
if (mutationRecord.target.style.display === 'none' && (selectedTab === 'txt2img' || selectedTab === 'img2img'))
|
if (mutationRecord.target.style.display === 'none' && (selectedTab === 'txt2img' || selectedTab === 'img2img')) {
|
||||||
gradioApp().getElementById(selectedTab+"_generation_info_button")?.click()
|
gradioApp().getElementById(selectedTab + "_generation_info_button")?.click();
|
||||||
});
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
function attachGalleryListeners(tab_name) {
|
function attachGalleryListeners(tab_name) {
|
||||||
var gallery = gradioApp().querySelector('#'+tab_name+'_gallery')
|
var gallery = gradioApp().querySelector('#' + tab_name + '_gallery');
|
||||||
gallery?.addEventListener('click', () => gradioApp().getElementById(tab_name+"_generation_info_button").click());
|
gallery?.addEventListener('click', () => gradioApp().getElementById(tab_name + "_generation_info_button").click());
|
||||||
gallery?.addEventListener('keydown', (e) => {
|
gallery?.addEventListener('keydown', (e) => {
|
||||||
if (e.keyCode == 37 || e.keyCode == 39) // left or right arrow
|
if (e.keyCode == 37 || e.keyCode == 39) { // left or right arrow
|
||||||
gradioApp().getElementById(tab_name+"_generation_info_button").click()
|
gradioApp().getElementById(tab_name + "_generation_info_button").click();
|
||||||
});
|
}
|
||||||
return gallery;
|
});
|
||||||
|
return gallery;
|
||||||
}
|
}
|
||||||
|
@ -3,14 +3,14 @@
|
|||||||
titles = {
|
titles = {
|
||||||
"Sampling steps": "How many times to improve the generated image iteratively; higher values take longer; very low values can produce bad results",
|
"Sampling steps": "How many times to improve the generated image iteratively; higher values take longer; very low values can produce bad results",
|
||||||
"Sampling method": "Which algorithm to use to produce the image",
|
"Sampling method": "Which algorithm to use to produce the image",
|
||||||
"GFPGAN": "Restore low quality faces using GFPGAN neural network",
|
"GFPGAN": "Restore low quality faces using GFPGAN neural network",
|
||||||
"Euler a": "Euler Ancestral - very creative, each can get a completely different picture depending on step count, setting steps higher than 30-40 does not help",
|
"Euler a": "Euler Ancestral - very creative, each can get a completely different picture depending on step count, setting steps higher than 30-40 does not help",
|
||||||
"DDIM": "Denoising Diffusion Implicit Models - best at inpainting",
|
"DDIM": "Denoising Diffusion Implicit Models - best at inpainting",
|
||||||
"UniPC": "Unified Predictor-Corrector Framework for Fast Sampling of Diffusion Models",
|
"UniPC": "Unified Predictor-Corrector Framework for Fast Sampling of Diffusion Models",
|
||||||
"DPM adaptive": "Ignores step count - uses a number of steps determined by the CFG and resolution",
|
"DPM adaptive": "Ignores step count - uses a number of steps determined by the CFG and resolution",
|
||||||
|
|
||||||
"Batch count": "How many batches of images to create (has no impact on generation performance or VRAM usage)",
|
"Batch count": "How many batches of images to create (has no impact on generation performance or VRAM usage)",
|
||||||
"Batch size": "How many image to create in a single batch (increases generation performance at cost of higher VRAM usage)",
|
"Batch size": "How many image to create in a single batch (increases generation performance at cost of higher VRAM usage)",
|
||||||
"CFG Scale": "Classifier Free Guidance Scale - how strongly the image should conform to prompt - lower values produce more creative results",
|
"CFG Scale": "Classifier Free Guidance Scale - how strongly the image should conform to prompt - lower values produce more creative results",
|
||||||
"Seed": "A value that determines the output of random number generator - if you create an image with same parameters and seed as another image, you'll get the same result",
|
"Seed": "A value that determines the output of random number generator - if you create an image with same parameters and seed as another image, you'll get the same result",
|
||||||
"\u{1f3b2}\ufe0f": "Set seed to -1, which will cause a new random number to be used every time",
|
"\u{1f3b2}\ufe0f": "Set seed to -1, which will cause a new random number to be used every time",
|
||||||
@ -40,7 +40,7 @@ titles = {
|
|||||||
"Inpaint at full resolution": "Upscale masked region to target resolution, do inpainting, downscale back and paste into original image",
|
"Inpaint at full resolution": "Upscale masked region to target resolution, do inpainting, downscale back and paste into original image",
|
||||||
|
|
||||||
"Denoising strength": "Determines how little respect the algorithm should have for image's content. At 0, nothing will change, and at 1 you'll get an unrelated image. With values below 1.0, processing will take less steps than the Sampling Steps slider specifies.",
|
"Denoising strength": "Determines how little respect the algorithm should have for image's content. At 0, nothing will change, and at 1 you'll get an unrelated image. With values below 1.0, processing will take less steps than the Sampling Steps slider specifies.",
|
||||||
|
|
||||||
"Skip": "Stop processing current image and continue processing.",
|
"Skip": "Stop processing current image and continue processing.",
|
||||||
"Interrupt": "Stop processing images and return any results accumulated so far.",
|
"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.",
|
"Save": "Write image to a directory (default - log/images) and generation parameters into csv file.",
|
||||||
@ -96,7 +96,7 @@ titles = {
|
|||||||
"Add difference": "Result = A + (B - C) * M",
|
"Add difference": "Result = A + (B - C) * M",
|
||||||
"No interpolation": "Result = A",
|
"No interpolation": "Result = A",
|
||||||
|
|
||||||
"Initialization text": "If the number of tokens is more than the number of vectors, some may be skipped.\nLeave the textbox empty to start with zeroed out vectors",
|
"Initialization text": "If the number of tokens is more than the number of vectors, some may be skipped.\nLeave the textbox empty to start with zeroed out vectors",
|
||||||
"Learning rate": "How fast should training go. Low values will take longer to train, high values may fail to converge (not generate accurate results) and/or may break the embedding (This has happened if you see Loss: nan in the training info textbox. If this happens, you need to manually restore your embedding from an older not-broken backup).\n\nYou can set a single numeric value, or multiple learning rates using the syntax:\n\n rate_1:max_steps_1, rate_2:max_steps_2, ...\n\nEG: 0.005:100, 1e-3:1000, 1e-5\n\nWill train with rate of 0.005 for first 100 steps, then 1e-3 until 1000 steps, then 1e-5 for all remaining steps.",
|
"Learning rate": "How fast should training go. Low values will take longer to train, high values may fail to converge (not generate accurate results) and/or may break the embedding (This has happened if you see Loss: nan in the training info textbox. If this happens, you need to manually restore your embedding from an older not-broken backup).\n\nYou can set a single numeric value, or multiple learning rates using the syntax:\n\n rate_1:max_steps_1, rate_2:max_steps_2, ...\n\nEG: 0.005:100, 1e-3:1000, 1e-5\n\nWill train with rate of 0.005 for first 100 steps, then 1e-3 until 1000 steps, then 1e-5 for all remaining steps.",
|
||||||
|
|
||||||
"Clip skip": "Early stopping parameter for CLIP model; 1 is stop at last layer as usual, 2 is stop at penultimate layer, etc.",
|
"Clip skip": "Early stopping parameter for CLIP model; 1 is stop at last layer as usual, 2 is stop at penultimate layer, etc.",
|
||||||
@ -113,38 +113,38 @@ titles = {
|
|||||||
"Discard weights with matching name": "Regular expression; if weights's name matches it, the weights is not written to the resulting checkpoint. Use ^model_ema to discard EMA weights.",
|
"Discard weights with matching name": "Regular expression; if weights's name matches it, the weights is not written to the resulting checkpoint. Use ^model_ema to discard EMA weights.",
|
||||||
"Extra networks tab order": "Comma-separated list of tab names; tabs listed here will appear in the extra networks UI first and in order lsited.",
|
"Extra networks tab order": "Comma-separated list of tab names; tabs listed here will appear in the extra networks UI first and in order lsited.",
|
||||||
"Negative Guidance minimum sigma": "Skip negative prompt for steps where image is already mostly denoised; the higher this value, the more skips there will be; provides increased performance in exchange for minor quality reduction."
|
"Negative Guidance minimum sigma": "Skip negative prompt for steps where image is already mostly denoised; the higher this value, the more skips there will be; provides increased performance in exchange for minor quality reduction."
|
||||||
}
|
};
|
||||||
|
|
||||||
|
|
||||||
onUiUpdate(function(){
|
onUiUpdate(function() {
|
||||||
gradioApp().querySelectorAll('span, button, select, p').forEach(function(span){
|
gradioApp().querySelectorAll('span, button, select, p').forEach(function(span) {
|
||||||
if (span.title) return; // already has a title
|
if (span.title) return; // already has a title
|
||||||
|
|
||||||
let tooltip = localization[titles[span.textContent]] || titles[span.textContent];
|
let tooltip = localization[titles[span.textContent]] || titles[span.textContent];
|
||||||
|
|
||||||
if(!tooltip){
|
if (!tooltip) {
|
||||||
tooltip = localization[titles[span.value]] || titles[span.value];
|
tooltip = localization[titles[span.value]] || titles[span.value];
|
||||||
}
|
}
|
||||||
|
|
||||||
if(!tooltip){
|
if (!tooltip) {
|
||||||
for (const c of span.classList) {
|
for (const c of span.classList) {
|
||||||
if (c in titles) {
|
if (c in titles) {
|
||||||
tooltip = localization[titles[c]] || titles[c];
|
tooltip = localization[titles[c]] || titles[c];
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(tooltip){
|
if (tooltip) {
|
||||||
span.title = tooltip;
|
span.title = tooltip;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
gradioApp().querySelectorAll('select').forEach(function(select){
|
gradioApp().querySelectorAll('select').forEach(function(select) {
|
||||||
if (select.onchange != null) return;
|
if (select.onchange != null) return;
|
||||||
|
|
||||||
select.onchange = function(){
|
select.onchange = function() {
|
||||||
select.title = localization[titles[select.value]] || titles[select.value] || "";
|
select.title = localization[titles[select.value]] || titles[select.value] || "";
|
||||||
}
|
};
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
|
@ -1,18 +1,18 @@
|
|||||||
|
|
||||||
function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y){
|
function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y) {
|
||||||
function setInactive(elem, inactive){
|
function setInactive(elem, inactive) {
|
||||||
elem.classList.toggle('inactive', !!inactive)
|
elem.classList.toggle('inactive', !!inactive);
|
||||||
}
|
}
|
||||||
|
|
||||||
var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale')
|
var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale');
|
||||||
var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x')
|
var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x');
|
||||||
var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y')
|
var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y');
|
||||||
|
|
||||||
gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : ""
|
gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "";
|
||||||
|
|
||||||
setInactive(hrUpscaleBy, opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0)
|
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(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)
|
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]
|
return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y];
|
||||||
}
|
}
|
||||||
|
@ -4,17 +4,17 @@
|
|||||||
*/
|
*/
|
||||||
function imageMaskResize() {
|
function imageMaskResize() {
|
||||||
const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas');
|
const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas');
|
||||||
if ( ! canvases.length ) {
|
if (!canvases.length) {
|
||||||
canvases_fixed = false; // TODO: this is unused..?
|
canvases_fixed = false; // TODO: this is unused..?
|
||||||
window.removeEventListener( 'resize', imageMaskResize );
|
window.removeEventListener('resize', imageMaskResize);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const wrapper = canvases[0].closest('.touch-none');
|
const wrapper = canvases[0].closest('.touch-none');
|
||||||
const previewImage = wrapper.previousElementSibling;
|
const previewImage = wrapper.previousElementSibling;
|
||||||
|
|
||||||
if ( ! previewImage.complete ) {
|
if (!previewImage.complete) {
|
||||||
previewImage.addEventListener( 'load', imageMaskResize);
|
previewImage.addEventListener('load', imageMaskResize);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -24,15 +24,15 @@ function imageMaskResize() {
|
|||||||
const nh = previewImage.naturalHeight;
|
const nh = previewImage.naturalHeight;
|
||||||
const portrait = nh > nw;
|
const portrait = nh > nw;
|
||||||
|
|
||||||
const wW = Math.min(w, portrait ? h/nh*nw : w/nw*nw);
|
const wW = Math.min(w, portrait ? h / nh * nw : w / nw * nw);
|
||||||
const wH = Math.min(h, portrait ? h/nh*nh : w/nw*nh);
|
const wH = Math.min(h, portrait ? h / nh * nh : w / nw * nh);
|
||||||
|
|
||||||
wrapper.style.width = `${wW}px`;
|
wrapper.style.width = `${wW}px`;
|
||||||
wrapper.style.height = `${wH}px`;
|
wrapper.style.height = `${wH}px`;
|
||||||
wrapper.style.left = `0px`;
|
wrapper.style.left = `0px`;
|
||||||
wrapper.style.top = `0px`;
|
wrapper.style.top = `0px`;
|
||||||
|
|
||||||
canvases.forEach( c => {
|
canvases.forEach(c => {
|
||||||
c.style.width = c.style.height = '';
|
c.style.width = c.style.height = '';
|
||||||
c.style.maxWidth = '100%';
|
c.style.maxWidth = '100%';
|
||||||
c.style.maxHeight = '100%';
|
c.style.maxHeight = '100%';
|
||||||
@ -41,4 +41,4 @@ function imageMaskResize() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onUiUpdate(imageMaskResize);
|
onUiUpdate(imageMaskResize);
|
||||||
window.addEventListener( 'resize', imageMaskResize);
|
window.addEventListener('resize', imageMaskResize);
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
window.onload = (function(){
|
window.onload = (function() {
|
||||||
window.addEventListener('drop', e => {
|
window.addEventListener('drop', e => {
|
||||||
const target = e.composedPath()[0];
|
const target = e.composedPath()[0];
|
||||||
if (target.placeholder.indexOf("Prompt") == -1) return;
|
if (target.placeholder.indexOf("Prompt") == -1) return;
|
||||||
@ -10,7 +10,7 @@ window.onload = (function(){
|
|||||||
const imgParent = gradioApp().getElementById(prompt_target);
|
const imgParent = gradioApp().getElementById(prompt_target);
|
||||||
const files = e.dataTransfer.files;
|
const files = e.dataTransfer.files;
|
||||||
const fileInput = imgParent.querySelector('input[type="file"]');
|
const fileInput = imgParent.querySelector('input[type="file"]');
|
||||||
if ( fileInput ) {
|
if (fileInput) {
|
||||||
fileInput.files = files;
|
fileInput.files = files;
|
||||||
fileInput.dispatchEvent(new Event('change'));
|
fileInput.dispatchEvent(new Event('change'));
|
||||||
}
|
}
|
||||||
|
@ -5,24 +5,24 @@ function closeModal() {
|
|||||||
|
|
||||||
function showModal(event) {
|
function showModal(event) {
|
||||||
const source = event.target || event.srcElement;
|
const source = event.target || event.srcElement;
|
||||||
const modalImage = gradioApp().getElementById("modalImage")
|
const modalImage = gradioApp().getElementById("modalImage");
|
||||||
const lb = gradioApp().getElementById("lightboxModal")
|
const lb = gradioApp().getElementById("lightboxModal");
|
||||||
modalImage.src = source.src
|
modalImage.src = source.src;
|
||||||
if (modalImage.style.display === 'none') {
|
if (modalImage.style.display === 'none') {
|
||||||
lb.style.setProperty('background-image', 'url(' + source.src + ')');
|
lb.style.setProperty('background-image', 'url(' + source.src + ')');
|
||||||
}
|
}
|
||||||
lb.style.display = "flex";
|
lb.style.display = "flex";
|
||||||
lb.focus()
|
lb.focus();
|
||||||
|
|
||||||
const tabTxt2Img = gradioApp().getElementById("tab_txt2img")
|
const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
|
||||||
const tabImg2Img = gradioApp().getElementById("tab_img2img")
|
const tabImg2Img = gradioApp().getElementById("tab_img2img");
|
||||||
// show the save button in modal only on txt2img or img2img tabs
|
// show the save button in modal only on txt2img or img2img tabs
|
||||||
if (tabTxt2Img.style.display != "none" || tabImg2Img.style.display != "none") {
|
if (tabTxt2Img.style.display != "none" || tabImg2Img.style.display != "none") {
|
||||||
gradioApp().getElementById("modal_save").style.display = "inline"
|
gradioApp().getElementById("modal_save").style.display = "inline";
|
||||||
} else {
|
} else {
|
||||||
gradioApp().getElementById("modal_save").style.display = "none"
|
gradioApp().getElementById("modal_save").style.display = "none";
|
||||||
}
|
}
|
||||||
event.stopPropagation()
|
event.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
function negmod(n, m) {
|
function negmod(n, m) {
|
||||||
@ -30,14 +30,14 @@ function negmod(n, m) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function updateOnBackgroundChange() {
|
function updateOnBackgroundChange() {
|
||||||
const modalImage = gradioApp().getElementById("modalImage")
|
const modalImage = gradioApp().getElementById("modalImage");
|
||||||
if (modalImage && modalImage.offsetParent) {
|
if (modalImage && modalImage.offsetParent) {
|
||||||
let currentButton = selected_gallery_button();
|
let currentButton = selected_gallery_button();
|
||||||
|
|
||||||
if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
|
if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
|
||||||
modalImage.src = currentButton.children[0].src;
|
modalImage.src = currentButton.children[0].src;
|
||||||
if (modalImage.style.display === 'none') {
|
if (modalImage.style.display === 'none') {
|
||||||
modal.style.setProperty('background-image', `url(${modalImage.src})`)
|
modal.style.setProperty('background-image', `url(${modalImage.src})`);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -49,108 +49,109 @@ function modalImageSwitch(offset) {
|
|||||||
if (galleryButtons.length > 1) {
|
if (galleryButtons.length > 1) {
|
||||||
var currentButton = selected_gallery_button();
|
var currentButton = selected_gallery_button();
|
||||||
|
|
||||||
var result = -1
|
var result = -1;
|
||||||
galleryButtons.forEach(function(v, i) {
|
galleryButtons.forEach(function(v, i) {
|
||||||
if (v == currentButton) {
|
if (v == currentButton) {
|
||||||
result = i
|
result = i;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
if (result != -1) {
|
if (result != -1) {
|
||||||
var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]
|
var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)];
|
||||||
nextButton.click()
|
nextButton.click();
|
||||||
const modalImage = gradioApp().getElementById("modalImage");
|
const modalImage = gradioApp().getElementById("modalImage");
|
||||||
const modal = gradioApp().getElementById("lightboxModal");
|
const modal = gradioApp().getElementById("lightboxModal");
|
||||||
modalImage.src = nextButton.children[0].src;
|
modalImage.src = nextButton.children[0].src;
|
||||||
if (modalImage.style.display === 'none') {
|
if (modalImage.style.display === 'none') {
|
||||||
modal.style.setProperty('background-image', `url(${modalImage.src})`)
|
modal.style.setProperty('background-image', `url(${modalImage.src})`);
|
||||||
}
|
}
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
modal.focus()
|
modal.focus();
|
||||||
}, 10)
|
}, 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function saveImage(){
|
function saveImage() {
|
||||||
const tabTxt2Img = gradioApp().getElementById("tab_txt2img")
|
const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
|
||||||
const tabImg2Img = gradioApp().getElementById("tab_img2img")
|
const tabImg2Img = gradioApp().getElementById("tab_img2img");
|
||||||
const saveTxt2Img = "save_txt2img"
|
const saveTxt2Img = "save_txt2img";
|
||||||
const saveImg2Img = "save_img2img"
|
const saveImg2Img = "save_img2img";
|
||||||
if (tabTxt2Img.style.display != "none") {
|
if (tabTxt2Img.style.display != "none") {
|
||||||
gradioApp().getElementById(saveTxt2Img).click()
|
gradioApp().getElementById(saveTxt2Img).click();
|
||||||
} else if (tabImg2Img.style.display != "none") {
|
} else if (tabImg2Img.style.display != "none") {
|
||||||
gradioApp().getElementById(saveImg2Img).click()
|
gradioApp().getElementById(saveImg2Img).click();
|
||||||
} else {
|
} else {
|
||||||
console.error("missing implementation for saving modal of this type")
|
console.error("missing implementation for saving modal of this type");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function modalSaveImage(event) {
|
function modalSaveImage(event) {
|
||||||
saveImage()
|
saveImage();
|
||||||
event.stopPropagation()
|
event.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
function modalNextImage(event) {
|
function modalNextImage(event) {
|
||||||
modalImageSwitch(1)
|
modalImageSwitch(1);
|
||||||
event.stopPropagation()
|
event.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
function modalPrevImage(event) {
|
function modalPrevImage(event) {
|
||||||
modalImageSwitch(-1)
|
modalImageSwitch(-1);
|
||||||
event.stopPropagation()
|
event.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
function modalKeyHandler(event) {
|
function modalKeyHandler(event) {
|
||||||
switch (event.key) {
|
switch (event.key) {
|
||||||
case "s":
|
case "s":
|
||||||
saveImage()
|
saveImage();
|
||||||
break;
|
break;
|
||||||
case "ArrowLeft":
|
case "ArrowLeft":
|
||||||
modalPrevImage(event)
|
modalPrevImage(event);
|
||||||
break;
|
break;
|
||||||
case "ArrowRight":
|
case "ArrowRight":
|
||||||
modalNextImage(event)
|
modalNextImage(event);
|
||||||
break;
|
break;
|
||||||
case "Escape":
|
case "Escape":
|
||||||
closeModal();
|
closeModal();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setupImageForLightbox(e) {
|
function setupImageForLightbox(e) {
|
||||||
if (e.dataset.modded)
|
if (e.dataset.modded) {
|
||||||
return;
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
e.dataset.modded = true;
|
e.dataset.modded = true;
|
||||||
e.style.cursor='pointer'
|
e.style.cursor = 'pointer';
|
||||||
e.style.userSelect='none'
|
e.style.userSelect = 'none';
|
||||||
|
|
||||||
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
|
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
||||||
|
|
||||||
// For Firefox, listening on click first switched to next image then shows the lightbox.
|
// 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.
|
// 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.
|
// For other browsers the event is click to make it possiblr to drag picture.
|
||||||
var event = isFirefox ? 'mousedown' : 'click'
|
var event = isFirefox ? 'mousedown' : 'click';
|
||||||
|
|
||||||
e.addEventListener(event, function (evt) {
|
e.addEventListener(event, function(evt) {
|
||||||
if(!opts.js_modal_lightbox || evt.button != 0) return;
|
if (!opts.js_modal_lightbox || evt.button != 0) return;
|
||||||
|
|
||||||
modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)
|
modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed);
|
||||||
evt.preventDefault()
|
evt.preventDefault();
|
||||||
showModal(evt)
|
showModal(evt);
|
||||||
}, true);
|
}, true);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function modalZoomSet(modalImage, enable) {
|
function modalZoomSet(modalImage, enable) {
|
||||||
if(modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);
|
if (modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);
|
||||||
}
|
}
|
||||||
|
|
||||||
function modalZoomToggle(event) {
|
function modalZoomToggle(event) {
|
||||||
var modalImage = gradioApp().getElementById("modalImage");
|
var modalImage = gradioApp().getElementById("modalImage");
|
||||||
modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'))
|
modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'));
|
||||||
event.stopPropagation()
|
event.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
function modalTileImageToggle(event) {
|
function modalTileImageToggle(event) {
|
||||||
@ -159,99 +160,99 @@ function modalTileImageToggle(event) {
|
|||||||
const isTiling = modalImage.style.display === 'none';
|
const isTiling = modalImage.style.display === 'none';
|
||||||
if (isTiling) {
|
if (isTiling) {
|
||||||
modalImage.style.display = 'block';
|
modalImage.style.display = 'block';
|
||||||
modal.style.setProperty('background-image', 'none')
|
modal.style.setProperty('background-image', 'none');
|
||||||
} else {
|
} else {
|
||||||
modalImage.style.display = 'none';
|
modalImage.style.display = 'none';
|
||||||
modal.style.setProperty('background-image', `url(${modalImage.src})`)
|
modal.style.setProperty('background-image', `url(${modalImage.src})`);
|
||||||
}
|
}
|
||||||
|
|
||||||
event.stopPropagation()
|
event.stopPropagation();
|
||||||
}
|
}
|
||||||
|
|
||||||
function galleryImageHandler(e) {
|
function galleryImageHandler(e) {
|
||||||
//if (e && e.parentElement.tagName == 'BUTTON') {
|
//if (e && e.parentElement.tagName == 'BUTTON') {
|
||||||
e.onclick = showGalleryImage;
|
e.onclick = showGalleryImage;
|
||||||
//}
|
//}
|
||||||
}
|
}
|
||||||
|
|
||||||
onUiUpdate(function() {
|
onUiUpdate(function() {
|
||||||
var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img')
|
var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img');
|
||||||
if (fullImg_preview != null) {
|
if (fullImg_preview != null) {
|
||||||
fullImg_preview.forEach(setupImageForLightbox);
|
fullImg_preview.forEach(setupImageForLightbox);
|
||||||
}
|
}
|
||||||
updateOnBackgroundChange();
|
updateOnBackgroundChange();
|
||||||
})
|
});
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
//const modalFragment = document.createDocumentFragment();
|
//const modalFragment = document.createDocumentFragment();
|
||||||
const modal = document.createElement('div')
|
const modal = document.createElement('div');
|
||||||
modal.onclick = closeModal;
|
modal.onclick = closeModal;
|
||||||
modal.id = "lightboxModal";
|
modal.id = "lightboxModal";
|
||||||
modal.tabIndex = 0
|
modal.tabIndex = 0;
|
||||||
modal.addEventListener('keydown', modalKeyHandler, true)
|
modal.addEventListener('keydown', modalKeyHandler, true);
|
||||||
|
|
||||||
const modalControls = document.createElement('div')
|
const modalControls = document.createElement('div');
|
||||||
modalControls.className = 'modalControls gradio-container';
|
modalControls.className = 'modalControls gradio-container';
|
||||||
modal.append(modalControls);
|
modal.append(modalControls);
|
||||||
|
|
||||||
const modalZoom = document.createElement('span')
|
const modalZoom = document.createElement('span');
|
||||||
modalZoom.className = 'modalZoom cursor';
|
modalZoom.className = 'modalZoom cursor';
|
||||||
modalZoom.innerHTML = '⤡'
|
modalZoom.innerHTML = '⤡';
|
||||||
modalZoom.addEventListener('click', modalZoomToggle, true)
|
modalZoom.addEventListener('click', modalZoomToggle, true);
|
||||||
modalZoom.title = "Toggle zoomed view";
|
modalZoom.title = "Toggle zoomed view";
|
||||||
modalControls.appendChild(modalZoom)
|
modalControls.appendChild(modalZoom);
|
||||||
|
|
||||||
const modalTileImage = document.createElement('span')
|
const modalTileImage = document.createElement('span');
|
||||||
modalTileImage.className = 'modalTileImage cursor';
|
modalTileImage.className = 'modalTileImage cursor';
|
||||||
modalTileImage.innerHTML = '⊞'
|
modalTileImage.innerHTML = '⊞';
|
||||||
modalTileImage.addEventListener('click', modalTileImageToggle, true)
|
modalTileImage.addEventListener('click', modalTileImageToggle, true);
|
||||||
modalTileImage.title = "Preview tiling";
|
modalTileImage.title = "Preview tiling";
|
||||||
modalControls.appendChild(modalTileImage)
|
modalControls.appendChild(modalTileImage);
|
||||||
|
|
||||||
const modalSave = document.createElement("span")
|
const modalSave = document.createElement("span");
|
||||||
modalSave.className = "modalSave cursor"
|
modalSave.className = "modalSave cursor";
|
||||||
modalSave.id = "modal_save"
|
modalSave.id = "modal_save";
|
||||||
modalSave.innerHTML = "🖫"
|
modalSave.innerHTML = "🖫";
|
||||||
modalSave.addEventListener("click", modalSaveImage, true)
|
modalSave.addEventListener("click", modalSaveImage, true);
|
||||||
modalSave.title = "Save Image(s)"
|
modalSave.title = "Save Image(s)";
|
||||||
modalControls.appendChild(modalSave)
|
modalControls.appendChild(modalSave);
|
||||||
|
|
||||||
const modalClose = document.createElement('span')
|
const modalClose = document.createElement('span');
|
||||||
modalClose.className = 'modalClose cursor';
|
modalClose.className = 'modalClose cursor';
|
||||||
modalClose.innerHTML = '×'
|
modalClose.innerHTML = '×';
|
||||||
modalClose.onclick = closeModal;
|
modalClose.onclick = closeModal;
|
||||||
modalClose.title = "Close image viewer";
|
modalClose.title = "Close image viewer";
|
||||||
modalControls.appendChild(modalClose)
|
modalControls.appendChild(modalClose);
|
||||||
|
|
||||||
const modalImage = document.createElement('img')
|
const modalImage = document.createElement('img');
|
||||||
modalImage.id = 'modalImage';
|
modalImage.id = 'modalImage';
|
||||||
modalImage.onclick = closeModal;
|
modalImage.onclick = closeModal;
|
||||||
modalImage.tabIndex = 0
|
modalImage.tabIndex = 0;
|
||||||
modalImage.addEventListener('keydown', modalKeyHandler, true)
|
modalImage.addEventListener('keydown', modalKeyHandler, true);
|
||||||
modal.appendChild(modalImage)
|
modal.appendChild(modalImage);
|
||||||
|
|
||||||
const modalPrev = document.createElement('a')
|
const modalPrev = document.createElement('a');
|
||||||
modalPrev.className = 'modalPrev';
|
modalPrev.className = 'modalPrev';
|
||||||
modalPrev.innerHTML = '❮'
|
modalPrev.innerHTML = '❮';
|
||||||
modalPrev.tabIndex = 0
|
modalPrev.tabIndex = 0;
|
||||||
modalPrev.addEventListener('click', modalPrevImage, true);
|
modalPrev.addEventListener('click', modalPrevImage, true);
|
||||||
modalPrev.addEventListener('keydown', modalKeyHandler, true)
|
modalPrev.addEventListener('keydown', modalKeyHandler, true);
|
||||||
modal.appendChild(modalPrev)
|
modal.appendChild(modalPrev);
|
||||||
|
|
||||||
const modalNext = document.createElement('a')
|
const modalNext = document.createElement('a');
|
||||||
modalNext.className = 'modalNext';
|
modalNext.className = 'modalNext';
|
||||||
modalNext.innerHTML = '❯'
|
modalNext.innerHTML = '❯';
|
||||||
modalNext.tabIndex = 0
|
modalNext.tabIndex = 0;
|
||||||
modalNext.addEventListener('click', modalNextImage, true);
|
modalNext.addEventListener('click', modalNextImage, true);
|
||||||
modalNext.addEventListener('keydown', modalKeyHandler, true)
|
modalNext.addEventListener('keydown', modalKeyHandler, true);
|
||||||
|
|
||||||
modal.appendChild(modalNext)
|
modal.appendChild(modalNext);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
gradioApp().appendChild(modal);
|
gradioApp().appendChild(modal);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
gradioApp().body.appendChild(modal);
|
gradioApp().body.appendChild(modal);
|
||||||
}
|
}
|
||||||
|
|
||||||
document.body.appendChild(modal);
|
document.body.appendChild(modal);
|
||||||
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
window.addEventListener('gamepadconnected', (e) => {
|
window.addEventListener('gamepadconnected', (e) => {
|
||||||
const index = e.gamepad.index;
|
const index = e.gamepad.index;
|
||||||
let isWaiting = false;
|
let isWaiting = false;
|
||||||
setInterval(async () => {
|
setInterval(async() => {
|
||||||
if (!opts.js_modal_lightbox_gamepad || isWaiting) return;
|
if (!opts.js_modal_lightbox_gamepad || isWaiting) return;
|
||||||
const gamepad = navigator.getGamepads()[index];
|
const gamepad = navigator.getGamepads()[index];
|
||||||
const xValue = gamepad.axes[0];
|
const xValue = gamepad.axes[0];
|
||||||
@ -14,7 +14,7 @@ window.addEventListener('gamepadconnected', (e) => {
|
|||||||
}
|
}
|
||||||
if (isWaiting) {
|
if (isWaiting) {
|
||||||
await sleepUntil(() => {
|
await sleepUntil(() => {
|
||||||
const xValue = navigator.getGamepads()[index].axes[0]
|
const xValue = navigator.getGamepads()[index].axes[0];
|
||||||
if (xValue < 0.3 && xValue > -0.3) {
|
if (xValue < 0.3 && xValue > -0.3) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
@ -1,177 +1,177 @@
|
|||||||
|
|
||||||
// localization = {} -- the dict with translations is created by the backend
|
// localization = {} -- the dict with translations is created by the backend
|
||||||
|
|
||||||
ignore_ids_for_localization={
|
ignore_ids_for_localization = {
|
||||||
setting_sd_hypernetwork: 'OPTION',
|
setting_sd_hypernetwork: 'OPTION',
|
||||||
setting_sd_model_checkpoint: 'OPTION',
|
setting_sd_model_checkpoint: 'OPTION',
|
||||||
setting_realesrgan_enabled_models: 'OPTION',
|
setting_realesrgan_enabled_models: 'OPTION',
|
||||||
modelmerger_primary_model_name: 'OPTION',
|
modelmerger_primary_model_name: 'OPTION',
|
||||||
modelmerger_secondary_model_name: 'OPTION',
|
modelmerger_secondary_model_name: 'OPTION',
|
||||||
modelmerger_tertiary_model_name: 'OPTION',
|
modelmerger_tertiary_model_name: 'OPTION',
|
||||||
train_embedding: 'OPTION',
|
train_embedding: 'OPTION',
|
||||||
train_hypernetwork: 'OPTION',
|
train_hypernetwork: 'OPTION',
|
||||||
txt2img_styles: 'OPTION',
|
txt2img_styles: 'OPTION',
|
||||||
img2img_styles: 'OPTION',
|
img2img_styles: 'OPTION',
|
||||||
setting_random_artist_categories: 'SPAN',
|
setting_random_artist_categories: 'SPAN',
|
||||||
setting_face_restoration_model: 'SPAN',
|
setting_face_restoration_model: 'SPAN',
|
||||||
setting_realesrgan_enabled_models: 'SPAN',
|
setting_realesrgan_enabled_models: 'SPAN',
|
||||||
extras_upscaler_1: 'SPAN',
|
extras_upscaler_1: 'SPAN',
|
||||||
extras_upscaler_2: 'SPAN',
|
extras_upscaler_2: 'SPAN',
|
||||||
}
|
};
|
||||||
|
|
||||||
re_num = /^[\.\d]+$/
|
re_num = /^[\.\d]+$/;
|
||||||
re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u
|
re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u;
|
||||||
|
|
||||||
original_lines = {}
|
original_lines = {};
|
||||||
translated_lines = {}
|
translated_lines = {};
|
||||||
|
|
||||||
function hasLocalization() {
|
function hasLocalization() {
|
||||||
return window.localization && Object.keys(window.localization).length > 0;
|
return window.localization && Object.keys(window.localization).length > 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
function textNodesUnder(el){
|
function textNodesUnder(el) {
|
||||||
var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
|
var n, a = [], walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
|
||||||
while(n=walk.nextNode()) a.push(n);
|
while (n = walk.nextNode()) a.push(n);
|
||||||
return a;
|
return a;
|
||||||
}
|
}
|
||||||
|
|
||||||
function canBeTranslated(node, text){
|
function canBeTranslated(node, text) {
|
||||||
if(! text) return false;
|
if (!text) return false;
|
||||||
if(! node.parentElement) return false;
|
if (!node.parentElement) return false;
|
||||||
|
|
||||||
var parentType = node.parentElement.nodeName
|
var parentType = node.parentElement.nodeName;
|
||||||
if(parentType=='SCRIPT' || parentType=='STYLE' || parentType=='TEXTAREA') return false;
|
if (parentType == 'SCRIPT' || parentType == 'STYLE' || parentType == 'TEXTAREA') return false;
|
||||||
|
|
||||||
if (parentType=='OPTION' || parentType=='SPAN'){
|
if (parentType == 'OPTION' || parentType == 'SPAN') {
|
||||||
var pnode = node
|
var pnode = node;
|
||||||
for(var level=0; level<4; level++){
|
for (var level = 0; level < 4; level++) {
|
||||||
pnode = pnode.parentElement
|
pnode = pnode.parentElement;
|
||||||
if(! pnode) break;
|
if (!pnode) break;
|
||||||
|
|
||||||
if(ignore_ids_for_localization[pnode.id] == parentType) return false;
|
if (ignore_ids_for_localization[pnode.id] == parentType) return false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(re_num.test(text)) return false;
|
if (re_num.test(text)) return false;
|
||||||
if(re_emoji.test(text)) return false;
|
if (re_emoji.test(text)) return false;
|
||||||
return true
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getTranslation(text){
|
function getTranslation(text) {
|
||||||
if(! text) return undefined
|
if (!text) return undefined;
|
||||||
|
|
||||||
if(translated_lines[text] === undefined){
|
if (translated_lines[text] === undefined) {
|
||||||
original_lines[text] = 1
|
original_lines[text] = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
tl = localization[text]
|
tl = localization[text];
|
||||||
if(tl !== undefined){
|
if (tl !== undefined) {
|
||||||
translated_lines[tl] = 1
|
translated_lines[tl] = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
return tl
|
return tl;
|
||||||
}
|
}
|
||||||
|
|
||||||
function processTextNode(node){
|
function processTextNode(node) {
|
||||||
var text = node.textContent.trim()
|
var text = node.textContent.trim();
|
||||||
|
|
||||||
if(! canBeTranslated(node, text)) return
|
if (!canBeTranslated(node, text)) return;
|
||||||
|
|
||||||
tl = getTranslation(text)
|
tl = getTranslation(text);
|
||||||
if(tl !== undefined){
|
if (tl !== undefined) {
|
||||||
node.textContent = tl
|
node.textContent = tl;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function processNode(node){
|
function processNode(node) {
|
||||||
if(node.nodeType == 3){
|
if (node.nodeType == 3) {
|
||||||
processTextNode(node)
|
processTextNode(node);
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(node.title){
|
if (node.title) {
|
||||||
tl = getTranslation(node.title)
|
tl = getTranslation(node.title);
|
||||||
if(tl !== undefined){
|
if (tl !== undefined) {
|
||||||
node.title = tl
|
node.title = tl;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if(node.placeholder){
|
if (node.placeholder) {
|
||||||
tl = getTranslation(node.placeholder)
|
tl = getTranslation(node.placeholder);
|
||||||
if(tl !== undefined){
|
if (tl !== undefined) {
|
||||||
node.placeholder = tl
|
node.placeholder = tl;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
textNodesUnder(node).forEach(function(node){
|
textNodesUnder(node).forEach(function(node) {
|
||||||
processTextNode(node)
|
processTextNode(node);
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function dumpTranslations(){
|
function dumpTranslations() {
|
||||||
if(!hasLocalization()) {
|
if (!hasLocalization()) {
|
||||||
// If we don't have any localization,
|
// If we don't have any localization,
|
||||||
// we will not have traversed the app to find
|
// we will not have traversed the app to find
|
||||||
// original_lines, so do that now.
|
// original_lines, so do that now.
|
||||||
processNode(gradioApp());
|
processNode(gradioApp());
|
||||||
}
|
}
|
||||||
var dumped = {}
|
var dumped = {};
|
||||||
if (localization.rtl) {
|
if (localization.rtl) {
|
||||||
dumped.rtl = true;
|
dumped.rtl = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const text in original_lines) {
|
for (const text in original_lines) {
|
||||||
if(dumped[text] !== undefined) continue;
|
if (dumped[text] !== undefined) continue;
|
||||||
dumped[text] = localization[text] || text;
|
dumped[text] = localization[text] || text;
|
||||||
}
|
}
|
||||||
|
|
||||||
return dumped;
|
return dumped;
|
||||||
}
|
}
|
||||||
|
|
||||||
function download_localization() {
|
function download_localization() {
|
||||||
var text = JSON.stringify(dumpTranslations(), null, 4)
|
var text = JSON.stringify(dumpTranslations(), null, 4);
|
||||||
|
|
||||||
var element = document.createElement('a');
|
var element = document.createElement('a');
|
||||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||||
element.setAttribute('download', "localization.json");
|
element.setAttribute('download', "localization.json");
|
||||||
element.style.display = 'none';
|
element.style.display = 'none';
|
||||||
document.body.appendChild(element);
|
document.body.appendChild(element);
|
||||||
|
|
||||||
element.click();
|
element.click();
|
||||||
|
|
||||||
document.body.removeChild(element);
|
document.body.removeChild(element);
|
||||||
}
|
}
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
if (!hasLocalization()) {
|
if (!hasLocalization()) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
onUiUpdate(function (m) {
|
onUiUpdate(function(m) {
|
||||||
m.forEach(function (mutation) {
|
m.forEach(function(mutation) {
|
||||||
mutation.addedNodes.forEach(function (node) {
|
mutation.addedNodes.forEach(function(node) {
|
||||||
processNode(node)
|
processNode(node);
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
})
|
});
|
||||||
|
|
||||||
processNode(gradioApp())
|
processNode(gradioApp());
|
||||||
|
|
||||||
if (localization.rtl) { // if the language is from right to left,
|
if (localization.rtl) { // if the language is from right to left,
|
||||||
(new MutationObserver((mutations, observer) => { // wait for the style to load
|
(new MutationObserver((mutations, observer) => { // wait for the style to load
|
||||||
mutations.forEach(mutation => {
|
mutations.forEach(mutation => {
|
||||||
mutation.addedNodes.forEach(node => {
|
mutation.addedNodes.forEach(node => {
|
||||||
if (node.tagName === 'STYLE') {
|
if (node.tagName === 'STYLE') {
|
||||||
observer.disconnect();
|
observer.disconnect();
|
||||||
|
|
||||||
for (const x of node.sheet.rules) { // find all rtl media rules
|
for (const x of node.sheet.rules) { // find all rtl media rules
|
||||||
if (Array.from(x.media || []).includes('rtl')) {
|
if (Array.from(x.media || []).includes('rtl')) {
|
||||||
x.media.appendMedium('all'); // enable them
|
x.media.appendMedium('all'); // enable them
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
});
|
});
|
||||||
})).observe(gradioApp(), { childList: true });
|
})).observe(gradioApp(), { childList: true });
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
@ -4,14 +4,14 @@ let lastHeadImg = null;
|
|||||||
|
|
||||||
let notificationButton = null;
|
let notificationButton = null;
|
||||||
|
|
||||||
onUiUpdate(function(){
|
onUiUpdate(function() {
|
||||||
if(notificationButton == null){
|
if (notificationButton == null) {
|
||||||
notificationButton = gradioApp().getElementById('request_notifications')
|
notificationButton = gradioApp().getElementById('request_notifications');
|
||||||
|
|
||||||
if(notificationButton != null){
|
if (notificationButton != null) {
|
||||||
notificationButton.addEventListener('click', () => {
|
notificationButton.addEventListener('click', () => {
|
||||||
void Notification.requestPermission();
|
void Notification.requestPermission();
|
||||||
},true);
|
}, true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -42,7 +42,7 @@ onUiUpdate(function(){
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
notification.onclick = function(_){
|
notification.onclick = function(_) {
|
||||||
parent.focus();
|
parent.focus();
|
||||||
this.close();
|
this.close();
|
||||||
};
|
};
|
||||||
|
@ -1,29 +1,29 @@
|
|||||||
// code related to showing and updating progressbar shown as the image is being made
|
// code related to showing and updating progressbar shown as the image is being made
|
||||||
|
|
||||||
function rememberGallerySelection(){
|
function rememberGallerySelection() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getGallerySelectedIndex(){
|
function getGallerySelectedIndex() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function request(url, data, handler, errorHandler){
|
function request(url, data, handler, errorHandler) {
|
||||||
var xhr = new XMLHttpRequest();
|
var xhr = new XMLHttpRequest();
|
||||||
xhr.open("POST", url, true);
|
xhr.open("POST", url, true);
|
||||||
xhr.setRequestHeader("Content-Type", "application/json");
|
xhr.setRequestHeader("Content-Type", "application/json");
|
||||||
xhr.onreadystatechange = function () {
|
xhr.onreadystatechange = function() {
|
||||||
if (xhr.readyState === 4) {
|
if (xhr.readyState === 4) {
|
||||||
if (xhr.status === 200) {
|
if (xhr.status === 200) {
|
||||||
try {
|
try {
|
||||||
var js = JSON.parse(xhr.responseText);
|
var js = JSON.parse(xhr.responseText);
|
||||||
handler(js)
|
handler(js);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
errorHandler()
|
errorHandler();
|
||||||
}
|
}
|
||||||
} else{
|
} else {
|
||||||
errorHandler()
|
errorHandler();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -31,147 +31,147 @@ function request(url, data, handler, errorHandler){
|
|||||||
xhr.send(js);
|
xhr.send(js);
|
||||||
}
|
}
|
||||||
|
|
||||||
function pad2(x){
|
function pad2(x) {
|
||||||
return x<10 ? '0'+x : x
|
return x < 10 ? '0' + x : x;
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatTime(secs){
|
function formatTime(secs) {
|
||||||
if(secs > 3600){
|
if (secs > 3600) {
|
||||||
return pad2(Math.floor(secs/60/60)) + ":" + pad2(Math.floor(secs/60)%60) + ":" + pad2(Math.floor(secs)%60)
|
return pad2(Math.floor(secs / 60 / 60)) + ":" + pad2(Math.floor(secs / 60) % 60) + ":" + pad2(Math.floor(secs) % 60);
|
||||||
} else if(secs > 60){
|
} else if (secs > 60) {
|
||||||
return pad2(Math.floor(secs/60)) + ":" + pad2(Math.floor(secs)%60)
|
return pad2(Math.floor(secs / 60)) + ":" + pad2(Math.floor(secs) % 60);
|
||||||
} else{
|
} else {
|
||||||
return Math.floor(secs) + "s"
|
return Math.floor(secs) + "s";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function setTitle(progress){
|
function setTitle(progress) {
|
||||||
var title = 'Stable Diffusion'
|
var title = 'Stable Diffusion';
|
||||||
|
|
||||||
if(opts.show_progress_in_title && progress){
|
if (opts.show_progress_in_title && progress) {
|
||||||
title = '[' + progress.trim() + '] ' + title;
|
title = '[' + progress.trim() + '] ' + title;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(document.title != title){
|
if (document.title != title) {
|
||||||
document.title = title;
|
document.title = title;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function randomId(){
|
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)+")"
|
return "task(" + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + ")";
|
||||||
}
|
}
|
||||||
|
|
||||||
// starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and
|
// 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.
|
// 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
|
// calls onProgress every time there is a progress update
|
||||||
function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgress, inactivityTimeout=40){
|
function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgress, inactivityTimeout = 40) {
|
||||||
var dateStart = new Date()
|
var dateStart = new Date();
|
||||||
var wasEverActive = false
|
var wasEverActive = false;
|
||||||
var parentProgressbar = progressbarContainer.parentNode
|
var parentProgressbar = progressbarContainer.parentNode;
|
||||||
var parentGallery = gallery ? gallery.parentNode : null
|
var parentGallery = gallery ? gallery.parentNode : null;
|
||||||
|
|
||||||
var divProgress = document.createElement('div')
|
var divProgress = document.createElement('div');
|
||||||
divProgress.className='progressDiv'
|
divProgress.className = 'progressDiv';
|
||||||
divProgress.style.display = opts.show_progressbar ? "block" : "none"
|
divProgress.style.display = opts.show_progressbar ? "block" : "none";
|
||||||
var divInner = document.createElement('div')
|
var divInner = document.createElement('div');
|
||||||
divInner.className='progress'
|
divInner.className = 'progress';
|
||||||
|
|
||||||
divProgress.appendChild(divInner)
|
divProgress.appendChild(divInner);
|
||||||
parentProgressbar.insertBefore(divProgress, progressbarContainer)
|
parentProgressbar.insertBefore(divProgress, progressbarContainer);
|
||||||
|
|
||||||
if(parentGallery){
|
if (parentGallery) {
|
||||||
var livePreview = document.createElement('div')
|
var livePreview = document.createElement('div');
|
||||||
livePreview.className='livePreview'
|
livePreview.className = 'livePreview';
|
||||||
parentGallery.insertBefore(livePreview, gallery)
|
parentGallery.insertBefore(livePreview, gallery);
|
||||||
}
|
}
|
||||||
|
|
||||||
var removeProgressBar = function(){
|
var removeProgressBar = function() {
|
||||||
setTitle("")
|
setTitle("");
|
||||||
parentProgressbar.removeChild(divProgress)
|
parentProgressbar.removeChild(divProgress);
|
||||||
if(parentGallery) parentGallery.removeChild(livePreview)
|
if (parentGallery) parentGallery.removeChild(livePreview);
|
||||||
atEnd()
|
atEnd();
|
||||||
}
|
};
|
||||||
|
|
||||||
var fun = function(id_task, id_live_preview){
|
var fun = function(id_task, id_live_preview) {
|
||||||
request("./internal/progress", {"id_task": id_task, "id_live_preview": id_live_preview}, function(res){
|
request("./internal/progress", {id_task: id_task, id_live_preview: id_live_preview}, function(res) {
|
||||||
if(res.completed){
|
if (res.completed) {
|
||||||
removeProgressBar()
|
removeProgressBar();
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var rect = progressbarContainer.getBoundingClientRect()
|
var rect = progressbarContainer.getBoundingClientRect();
|
||||||
|
|
||||||
if(rect.width){
|
if (rect.width) {
|
||||||
divProgress.style.width = rect.width + "px";
|
divProgress.style.width = rect.width + "px";
|
||||||
}
|
}
|
||||||
|
|
||||||
let progressText = ""
|
let progressText = "";
|
||||||
|
|
||||||
divInner.style.width = ((res.progress || 0) * 100.0) + '%'
|
divInner.style.width = ((res.progress || 0) * 100.0) + '%';
|
||||||
divInner.style.background = res.progress ? "" : "transparent"
|
divInner.style.background = res.progress ? "" : "transparent";
|
||||||
|
|
||||||
if(res.progress > 0){
|
if (res.progress > 0) {
|
||||||
progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%'
|
progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%';
|
||||||
}
|
}
|
||||||
|
|
||||||
if(res.eta){
|
if (res.eta) {
|
||||||
progressText += " ETA: " + formatTime(res.eta)
|
progressText += " ETA: " + formatTime(res.eta);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
setTitle(progressText)
|
setTitle(progressText);
|
||||||
|
|
||||||
if(res.textinfo && res.textinfo.indexOf("\n") == -1){
|
if (res.textinfo && res.textinfo.indexOf("\n") == -1) {
|
||||||
progressText = res.textinfo + " " + progressText
|
progressText = res.textinfo + " " + progressText;
|
||||||
}
|
}
|
||||||
|
|
||||||
divInner.textContent = progressText
|
divInner.textContent = progressText;
|
||||||
|
|
||||||
var elapsedFromStart = (new Date() - dateStart) / 1000
|
var elapsedFromStart = (new Date() - dateStart) / 1000;
|
||||||
|
|
||||||
if(res.active) wasEverActive = true;
|
if (res.active) wasEverActive = true;
|
||||||
|
|
||||||
if(! res.active && wasEverActive){
|
if (!res.active && wasEverActive) {
|
||||||
removeProgressBar()
|
removeProgressBar();
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(elapsedFromStart > inactivityTimeout && !res.queued && !res.active){
|
if (elapsedFromStart > inactivityTimeout && !res.queued && !res.active) {
|
||||||
removeProgressBar()
|
removeProgressBar();
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if(res.live_preview && gallery){
|
if (res.live_preview && gallery) {
|
||||||
var rect = gallery.getBoundingClientRect()
|
var rect = gallery.getBoundingClientRect();
|
||||||
if(rect.width){
|
if (rect.width) {
|
||||||
livePreview.style.width = rect.width + "px"
|
livePreview.style.width = rect.width + "px";
|
||||||
livePreview.style.height = rect.height + "px"
|
livePreview.style.height = rect.height + "px";
|
||||||
}
|
}
|
||||||
|
|
||||||
var img = new Image();
|
var img = new Image();
|
||||||
img.onload = function() {
|
img.onload = function() {
|
||||||
livePreview.appendChild(img)
|
livePreview.appendChild(img);
|
||||||
if(livePreview.childElementCount > 2){
|
if (livePreview.childElementCount > 2) {
|
||||||
livePreview.removeChild(livePreview.firstElementChild)
|
livePreview.removeChild(livePreview.firstElementChild);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
img.src = res.live_preview;
|
img.src = res.live_preview;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
if(onProgress){
|
if (onProgress) {
|
||||||
onProgress(res)
|
onProgress(res);
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
fun(id_task, res.id_live_preview);
|
fun(id_task, res.id_live_preview);
|
||||||
}, opts.live_preview_refresh_period || 500)
|
}, opts.live_preview_refresh_period || 500);
|
||||||
}, function(){
|
}, function() {
|
||||||
removeProgressBar()
|
removeProgressBar();
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
fun(id_task, 0)
|
fun(id_task, 0);
|
||||||
}
|
}
|
||||||
|
@ -1,17 +1,17 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
function start_training_textual_inversion(){
|
function start_training_textual_inversion() {
|
||||||
gradioApp().querySelector('#ti_error').innerHTML=''
|
gradioApp().querySelector('#ti_error').innerHTML = '';
|
||||||
|
|
||||||
var id = randomId()
|
var id = randomId();
|
||||||
requestProgress(id, gradioApp().getElementById('ti_output'), gradioApp().getElementById('ti_gallery'), function(){}, function(progress){
|
requestProgress(id, gradioApp().getElementById('ti_output'), gradioApp().getElementById('ti_gallery'), function() {}, function(progress) {
|
||||||
gradioApp().getElementById('ti_progress').innerHTML = progress.textinfo
|
gradioApp().getElementById('ti_progress').innerHTML = progress.textinfo;
|
||||||
})
|
});
|
||||||
|
|
||||||
var res = args_to_array(arguments)
|
var res = args_to_array(arguments);
|
||||||
|
|
||||||
res[0] = id
|
res[0] = id;
|
||||||
|
|
||||||
return res
|
return res;
|
||||||
}
|
}
|
||||||
|
413
javascript/ui.js
413
javascript/ui.js
@ -1,9 +1,9 @@
|
|||||||
// various functions for interaction with ui.py not large enough to warrant putting them in separate files
|
// various functions for interaction with ui.py not large enough to warrant putting them in separate files
|
||||||
|
|
||||||
function set_theme(theme){
|
function set_theme(theme) {
|
||||||
var gradioURL = window.location.href
|
var gradioURL = window.location.href;
|
||||||
if (!gradioURL.includes('?__theme=')) {
|
if (!gradioURL.includes('?__theme=')) {
|
||||||
window.location.replace(gradioURL + '?__theme=' + theme);
|
window.location.replace(gradioURL + '?__theme=' + theme);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -14,7 +14,7 @@ function all_gallery_buttons() {
|
|||||||
if (elem.parentElement.offsetParent) {
|
if (elem.parentElement.offsetParent) {
|
||||||
visibleGalleryButtons.push(elem);
|
visibleGalleryButtons.push(elem);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
return visibleGalleryButtons;
|
return visibleGalleryButtons;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -25,31 +25,35 @@ function selected_gallery_button() {
|
|||||||
if (elem.parentElement.offsetParent) {
|
if (elem.parentElement.offsetParent) {
|
||||||
visibleCurrentButton = elem;
|
visibleCurrentButton = elem;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
return visibleCurrentButton;
|
return visibleCurrentButton;
|
||||||
}
|
}
|
||||||
|
|
||||||
function selected_gallery_index(){
|
function selected_gallery_index() {
|
||||||
var buttons = all_gallery_buttons();
|
var buttons = all_gallery_buttons();
|
||||||
var button = selected_gallery_button();
|
var button = selected_gallery_button();
|
||||||
|
|
||||||
var result = -1
|
var result = -1;
|
||||||
buttons.forEach(function(v, i){ if(v==button) { result = i } })
|
buttons.forEach(function(v, i) {
|
||||||
|
if (v == button) {
|
||||||
|
result = i;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
return result
|
return result;
|
||||||
}
|
}
|
||||||
|
|
||||||
function extract_image_from_gallery(gallery){
|
function extract_image_from_gallery(gallery) {
|
||||||
if (gallery.length == 0){
|
if (gallery.length == 0) {
|
||||||
return [null];
|
return [null];
|
||||||
}
|
}
|
||||||
if (gallery.length == 1){
|
if (gallery.length == 1) {
|
||||||
return [gallery[0]];
|
return [gallery[0]];
|
||||||
}
|
}
|
||||||
|
|
||||||
var index = selected_gallery_index()
|
var index = selected_gallery_index();
|
||||||
|
|
||||||
if (index < 0 || index >= gallery.length){
|
if (index < 0 || index >= gallery.length) {
|
||||||
// Use the first image in the gallery as the default
|
// Use the first image in the gallery as the default
|
||||||
index = 0;
|
index = 0;
|
||||||
}
|
}
|
||||||
@ -57,248 +61,249 @@ function extract_image_from_gallery(gallery){
|
|||||||
return [gallery[index]];
|
return [gallery[index]];
|
||||||
}
|
}
|
||||||
|
|
||||||
function args_to_array(args){
|
function args_to_array(args) {
|
||||||
var res = []
|
var res = [];
|
||||||
for(var i=0;i<args.length;i++){
|
for (var i = 0; i < args.length; i++) {
|
||||||
res.push(args[i])
|
res.push(args[i]);
|
||||||
}
|
}
|
||||||
return res
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
function switch_to_txt2img(){
|
function switch_to_txt2img() {
|
||||||
gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click();
|
gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click();
|
||||||
|
|
||||||
return args_to_array(arguments);
|
return args_to_array(arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
function switch_to_img2img_tab(no){
|
function switch_to_img2img_tab(no) {
|
||||||
gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
|
gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
|
||||||
gradioApp().getElementById('mode_img2img').querySelectorAll('button')[no].click();
|
gradioApp().getElementById('mode_img2img').querySelectorAll('button')[no].click();
|
||||||
}
|
}
|
||||||
function switch_to_img2img(){
|
function switch_to_img2img() {
|
||||||
switch_to_img2img_tab(0);
|
switch_to_img2img_tab(0);
|
||||||
return args_to_array(arguments);
|
return args_to_array(arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
function switch_to_sketch(){
|
function switch_to_sketch() {
|
||||||
switch_to_img2img_tab(1);
|
switch_to_img2img_tab(1);
|
||||||
return args_to_array(arguments);
|
return args_to_array(arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
function switch_to_inpaint(){
|
function switch_to_inpaint() {
|
||||||
switch_to_img2img_tab(2);
|
switch_to_img2img_tab(2);
|
||||||
return args_to_array(arguments);
|
return args_to_array(arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
function switch_to_inpaint_sketch(){
|
function switch_to_inpaint_sketch() {
|
||||||
switch_to_img2img_tab(3);
|
switch_to_img2img_tab(3);
|
||||||
return args_to_array(arguments);
|
return args_to_array(arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
function switch_to_inpaint(){
|
function switch_to_inpaint() {
|
||||||
gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
|
gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
|
||||||
gradioApp().getElementById('mode_img2img').querySelectorAll('button')[2].click();
|
gradioApp().getElementById('mode_img2img').querySelectorAll('button')[2].click();
|
||||||
|
|
||||||
return args_to_array(arguments);
|
return args_to_array(arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
function switch_to_extras(){
|
function switch_to_extras() {
|
||||||
gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click();
|
gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click();
|
||||||
|
|
||||||
return args_to_array(arguments);
|
return args_to_array(arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
function get_tab_index(tabId){
|
function get_tab_index(tabId) {
|
||||||
var res = 0
|
var res = 0;
|
||||||
|
|
||||||
gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i){
|
gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i) {
|
||||||
if(button.className.indexOf('selected') != -1)
|
if (button.className.indexOf('selected') != -1) {
|
||||||
res = i
|
res = i;
|
||||||
})
|
}
|
||||||
|
});
|
||||||
|
|
||||||
return res
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
function create_tab_index_args(tabId, args){
|
function create_tab_index_args(tabId, args) {
|
||||||
var res = []
|
var res = [];
|
||||||
for(var i=0; i<args.length; i++){
|
for (var i = 0; i < args.length; i++) {
|
||||||
res.push(args[i])
|
res.push(args[i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
res[0] = get_tab_index(tabId)
|
res[0] = get_tab_index(tabId);
|
||||||
|
|
||||||
return res
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
function get_img2img_tab_index() {
|
function get_img2img_tab_index() {
|
||||||
let res = args_to_array(arguments)
|
let res = args_to_array(arguments);
|
||||||
res.splice(-2)
|
res.splice(-2);
|
||||||
res[0] = get_tab_index('mode_img2img')
|
res[0] = get_tab_index('mode_img2img');
|
||||||
return res
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
function create_submit_args(args){
|
function create_submit_args(args) {
|
||||||
var res = []
|
var res = [];
|
||||||
for(var i=0;i<args.length;i++){
|
for (var i = 0; i < args.length; i++) {
|
||||||
res.push(args[i])
|
res.push(args[i]);
|
||||||
}
|
}
|
||||||
|
|
||||||
// As it is currently, txt2img and img2img send back the previous output args (txt2img_gallery, generation_info, html_info) whenever you generate a new image.
|
// As it is currently, txt2img and img2img send back the previous output args (txt2img_gallery, generation_info, html_info) whenever you generate a new image.
|
||||||
// This can lead to uploading a huge gallery of previously generated images, which leads to an unnecessary delay between submitting and beginning to generate.
|
// This can lead to uploading a huge gallery of previously generated images, which leads to an unnecessary delay between submitting and beginning to generate.
|
||||||
// I don't know why gradio is sending outputs along with inputs, but we can prevent sending the image gallery here, which seems to be an issue for some.
|
// I don't know why gradio is sending outputs along with inputs, but we can prevent sending the image gallery here, which seems to be an issue for some.
|
||||||
// If gradio at some point stops sending outputs, this may break something
|
// If gradio at some point stops sending outputs, this may break something
|
||||||
if(Array.isArray(res[res.length - 3])){
|
if (Array.isArray(res[res.length - 3])) {
|
||||||
res[res.length - 3] = null
|
res[res.length - 3] = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
return res
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
function showSubmitButtons(tabname, show){
|
function showSubmitButtons(tabname, show) {
|
||||||
gradioApp().getElementById(tabname+'_interrupt').style.display = show ? "none" : "block"
|
gradioApp().getElementById(tabname + '_interrupt').style.display = show ? "none" : "block";
|
||||||
gradioApp().getElementById(tabname+'_skip').style.display = show ? "none" : "block"
|
gradioApp().getElementById(tabname + '_skip').style.display = show ? "none" : "block";
|
||||||
}
|
}
|
||||||
|
|
||||||
function showRestoreProgressButton(tabname, show){
|
function showRestoreProgressButton(tabname, show) {
|
||||||
var button = gradioApp().getElementById(tabname + "_restore_progress")
|
var button = gradioApp().getElementById(tabname + "_restore_progress");
|
||||||
if(! button) return
|
if (!button) return;
|
||||||
|
|
||||||
button.style.display = show ? "flex" : "none"
|
button.style.display = show ? "flex" : "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
function submit(){
|
function submit() {
|
||||||
rememberGallerySelection('txt2img_gallery')
|
rememberGallerySelection('txt2img_gallery');
|
||||||
showSubmitButtons('txt2img', false)
|
showSubmitButtons('txt2img', false);
|
||||||
|
|
||||||
var id = randomId()
|
var id = randomId();
|
||||||
localStorage.setItem("txt2img_task_id", id);
|
localStorage.setItem("txt2img_task_id", id);
|
||||||
|
|
||||||
requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function(){
|
requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
|
||||||
showSubmitButtons('txt2img', true)
|
showSubmitButtons('txt2img', true);
|
||||||
localStorage.removeItem("txt2img_task_id")
|
localStorage.removeItem("txt2img_task_id");
|
||||||
showRestoreProgressButton('txt2img', false)
|
showRestoreProgressButton('txt2img', false);
|
||||||
})
|
});
|
||||||
|
|
||||||
var res = create_submit_args(arguments)
|
var res = create_submit_args(arguments);
|
||||||
|
|
||||||
res[0] = id
|
res[0] = id;
|
||||||
|
|
||||||
return res
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
function submit_img2img(){
|
function submit_img2img() {
|
||||||
rememberGallerySelection('img2img_gallery')
|
rememberGallerySelection('img2img_gallery');
|
||||||
showSubmitButtons('img2img', false)
|
showSubmitButtons('img2img', false);
|
||||||
|
|
||||||
var id = randomId()
|
var id = randomId();
|
||||||
localStorage.setItem("img2img_task_id", id);
|
localStorage.setItem("img2img_task_id", id);
|
||||||
|
|
||||||
requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function(){
|
requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
|
||||||
showSubmitButtons('img2img', true)
|
showSubmitButtons('img2img', true);
|
||||||
localStorage.removeItem("img2img_task_id")
|
localStorage.removeItem("img2img_task_id");
|
||||||
showRestoreProgressButton('img2img', false)
|
showRestoreProgressButton('img2img', false);
|
||||||
})
|
});
|
||||||
|
|
||||||
var res = create_submit_args(arguments)
|
var res = create_submit_args(arguments);
|
||||||
|
|
||||||
res[0] = id
|
res[0] = id;
|
||||||
res[1] = get_tab_index('mode_img2img')
|
res[1] = get_tab_index('mode_img2img');
|
||||||
|
|
||||||
return res
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
function restoreProgressTxt2img(){
|
function restoreProgressTxt2img() {
|
||||||
showRestoreProgressButton("txt2img", false)
|
showRestoreProgressButton("txt2img", false);
|
||||||
var id = localStorage.getItem("txt2img_task_id")
|
var id = localStorage.getItem("txt2img_task_id");
|
||||||
|
|
||||||
id = localStorage.getItem("txt2img_task_id")
|
id = localStorage.getItem("txt2img_task_id");
|
||||||
|
|
||||||
if(id) {
|
if (id) {
|
||||||
requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function(){
|
requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
|
||||||
showSubmitButtons('txt2img', true)
|
showSubmitButtons('txt2img', true);
|
||||||
}, null, 0)
|
}, null, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
return id
|
return id;
|
||||||
}
|
}
|
||||||
|
|
||||||
function restoreProgressImg2img(){
|
function restoreProgressImg2img() {
|
||||||
showRestoreProgressButton("img2img", false)
|
showRestoreProgressButton("img2img", false);
|
||||||
|
|
||||||
var id = localStorage.getItem("img2img_task_id")
|
|
||||||
|
|
||||||
if(id) {
|
var id = localStorage.getItem("img2img_task_id");
|
||||||
requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function(){
|
|
||||||
showSubmitButtons('img2img', true)
|
if (id) {
|
||||||
}, null, 0)
|
requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
|
||||||
|
showSubmitButtons('img2img', true);
|
||||||
|
}, null, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
return id
|
return id;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
onUiLoaded(function () {
|
onUiLoaded(function() {
|
||||||
showRestoreProgressButton('txt2img', localStorage.getItem("txt2img_task_id"))
|
showRestoreProgressButton('txt2img', localStorage.getItem("txt2img_task_id"));
|
||||||
showRestoreProgressButton('img2img', localStorage.getItem("img2img_task_id"))
|
showRestoreProgressButton('img2img', localStorage.getItem("img2img_task_id"));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
function modelmerger(){
|
function modelmerger() {
|
||||||
var id = randomId()
|
var id = randomId();
|
||||||
requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function(){})
|
requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function() {});
|
||||||
|
|
||||||
var res = create_submit_args(arguments)
|
var res = create_submit_args(arguments);
|
||||||
res[0] = id
|
res[0] = id;
|
||||||
return res
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function ask_for_style_name(_, prompt_text, negative_prompt_text) {
|
function ask_for_style_name(_, prompt_text, negative_prompt_text) {
|
||||||
var name_ = prompt('Style name:')
|
var name_ = prompt('Style name:');
|
||||||
return [name_, prompt_text, negative_prompt_text]
|
return [name_, prompt_text, negative_prompt_text];
|
||||||
}
|
}
|
||||||
|
|
||||||
function confirm_clear_prompt(prompt, negative_prompt) {
|
function confirm_clear_prompt(prompt, negative_prompt) {
|
||||||
if(confirm("Delete prompt?")) {
|
if (confirm("Delete prompt?")) {
|
||||||
prompt = ""
|
prompt = "";
|
||||||
negative_prompt = ""
|
negative_prompt = "";
|
||||||
}
|
}
|
||||||
|
|
||||||
return [prompt, negative_prompt]
|
return [prompt, negative_prompt];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
promptTokecountUpdateFuncs = {}
|
promptTokecountUpdateFuncs = {};
|
||||||
|
|
||||||
function recalculatePromptTokens(name){
|
function recalculatePromptTokens(name) {
|
||||||
if(promptTokecountUpdateFuncs[name]){
|
if (promptTokecountUpdateFuncs[name]) {
|
||||||
promptTokecountUpdateFuncs[name]()
|
promptTokecountUpdateFuncs[name]();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function recalculate_prompts_txt2img(){
|
function recalculate_prompts_txt2img() {
|
||||||
recalculatePromptTokens('txt2img_prompt')
|
recalculatePromptTokens('txt2img_prompt');
|
||||||
recalculatePromptTokens('txt2img_neg_prompt')
|
recalculatePromptTokens('txt2img_neg_prompt');
|
||||||
return args_to_array(arguments);
|
return args_to_array(arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
function recalculate_prompts_img2img(){
|
function recalculate_prompts_img2img() {
|
||||||
recalculatePromptTokens('img2img_prompt')
|
recalculatePromptTokens('img2img_prompt');
|
||||||
recalculatePromptTokens('img2img_neg_prompt')
|
recalculatePromptTokens('img2img_neg_prompt');
|
||||||
return args_to_array(arguments);
|
return args_to_array(arguments);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
var opts = {}
|
var opts = {};
|
||||||
onUiUpdate(function(){
|
onUiUpdate(function() {
|
||||||
if(Object.keys(opts).length != 0) return;
|
if (Object.keys(opts).length != 0) return;
|
||||||
|
|
||||||
var json_elem = gradioApp().getElementById('settings_json')
|
var json_elem = gradioApp().getElementById('settings_json');
|
||||||
if(json_elem == null) return;
|
if (json_elem == null) return;
|
||||||
|
|
||||||
var textarea = json_elem.querySelector('textarea')
|
var textarea = json_elem.querySelector('textarea');
|
||||||
var jsdata = textarea.value
|
var jsdata = textarea.value;
|
||||||
opts = JSON.parse(jsdata)
|
opts = JSON.parse(jsdata);
|
||||||
executeCallbacks(optionsChangedCallbacks);
|
executeCallbacks(optionsChangedCallbacks);
|
||||||
|
|
||||||
Object.defineProperty(textarea, 'value', {
|
Object.defineProperty(textarea, 'value', {
|
||||||
@ -308,7 +313,7 @@ onUiUpdate(function(){
|
|||||||
valueProp.set.call(textarea, newValue);
|
valueProp.set.call(textarea, newValue);
|
||||||
|
|
||||||
if (oldValue != newValue) {
|
if (oldValue != newValue) {
|
||||||
opts = JSON.parse(textarea.value)
|
opts = JSON.parse(textarea.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
executeCallbacks(optionsChangedCallbacks);
|
executeCallbacks(optionsChangedCallbacks);
|
||||||
@ -319,123 +324,129 @@ onUiUpdate(function(){
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
json_elem.parentElement.style.display="none"
|
json_elem.parentElement.style.display = "none";
|
||||||
|
|
||||||
function registerTextarea(id, id_counter, id_button){
|
function registerTextarea(id, id_counter, id_button) {
|
||||||
var prompt = gradioApp().getElementById(id)
|
var prompt = gradioApp().getElementById(id);
|
||||||
var counter = gradioApp().getElementById(id_counter)
|
var counter = gradioApp().getElementById(id_counter);
|
||||||
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
|
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
|
||||||
|
|
||||||
if(counter.parentElement == prompt.parentElement){
|
if (counter.parentElement == prompt.parentElement) {
|
||||||
return
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
prompt.parentElement.insertBefore(counter, prompt)
|
prompt.parentElement.insertBefore(counter, prompt);
|
||||||
prompt.parentElement.style.position = "relative"
|
prompt.parentElement.style.position = "relative";
|
||||||
|
|
||||||
promptTokecountUpdateFuncs[id] = function(){ update_token_counter(id_button); }
|
promptTokecountUpdateFuncs[id] = function() {
|
||||||
textarea.addEventListener("input", promptTokecountUpdateFuncs[id]);
|
update_token_counter(id_button);
|
||||||
|
};
|
||||||
|
textarea.addEventListener("input", promptTokecountUpdateFuncs[id]);
|
||||||
}
|
}
|
||||||
|
|
||||||
registerTextarea('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button')
|
registerTextarea('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button');
|
||||||
registerTextarea('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button')
|
registerTextarea('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button');
|
||||||
registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button')
|
registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button');
|
||||||
registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button')
|
registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button');
|
||||||
|
|
||||||
var show_all_pages = gradioApp().getElementById('settings_show_all_pages')
|
var show_all_pages = gradioApp().getElementById('settings_show_all_pages');
|
||||||
var settings_tabs = gradioApp().querySelector('#settings div')
|
var settings_tabs = gradioApp().querySelector('#settings div');
|
||||||
if(show_all_pages && settings_tabs){
|
if (show_all_pages && settings_tabs) {
|
||||||
settings_tabs.appendChild(show_all_pages)
|
settings_tabs.appendChild(show_all_pages);
|
||||||
show_all_pages.onclick = function(){
|
show_all_pages.onclick = function() {
|
||||||
gradioApp().querySelectorAll('#settings > div').forEach(function(elem){
|
gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
|
||||||
if(elem.id == "settings_tab_licenses")
|
if (elem.id == "settings_tab_licenses") {
|
||||||
return;
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
elem.style.display = "block";
|
elem.style.display = "block";
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
onOptionsChanged(function(){
|
onOptionsChanged(function() {
|
||||||
var elem = gradioApp().getElementById('sd_checkpoint_hash')
|
var elem = gradioApp().getElementById('sd_checkpoint_hash');
|
||||||
var sd_checkpoint_hash = opts.sd_checkpoint_hash || ""
|
var sd_checkpoint_hash = opts.sd_checkpoint_hash || "";
|
||||||
var shorthash = sd_checkpoint_hash.substring(0,10)
|
var shorthash = sd_checkpoint_hash.substring(0, 10);
|
||||||
|
|
||||||
if(elem && elem.textContent != shorthash){
|
if (elem && elem.textContent != shorthash) {
|
||||||
elem.textContent = shorthash
|
elem.textContent = shorthash;
|
||||||
elem.title = sd_checkpoint_hash
|
elem.title = sd_checkpoint_hash;
|
||||||
elem.href = "https://google.com/search?q=" + sd_checkpoint_hash
|
elem.href = "https://google.com/search?q=" + sd_checkpoint_hash;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
let txt2img_textarea, img2img_textarea = undefined;
|
let txt2img_textarea, img2img_textarea = undefined;
|
||||||
let wait_time = 800
|
let wait_time = 800;
|
||||||
let token_timeouts = {};
|
let token_timeouts = {};
|
||||||
|
|
||||||
function update_txt2img_tokens(...args) {
|
function update_txt2img_tokens(...args) {
|
||||||
update_token_counter("txt2img_token_button")
|
update_token_counter("txt2img_token_button");
|
||||||
if (args.length == 2)
|
if (args.length == 2) {
|
||||||
return args[0]
|
return args[0];
|
||||||
return args;
|
}
|
||||||
|
return args;
|
||||||
}
|
}
|
||||||
|
|
||||||
function update_img2img_tokens(...args) {
|
function update_img2img_tokens(...args) {
|
||||||
update_token_counter("img2img_token_button")
|
update_token_counter("img2img_token_button");
|
||||||
if (args.length == 2)
|
if (args.length == 2) {
|
||||||
return args[0]
|
return args[0];
|
||||||
return args;
|
}
|
||||||
|
return args;
|
||||||
}
|
}
|
||||||
|
|
||||||
function update_token_counter(button_id) {
|
function update_token_counter(button_id) {
|
||||||
if (token_timeouts[button_id])
|
if (token_timeouts[button_id]) {
|
||||||
clearTimeout(token_timeouts[button_id]);
|
clearTimeout(token_timeouts[button_id]);
|
||||||
token_timeouts[button_id] = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time);
|
}
|
||||||
|
token_timeouts[button_id] = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time);
|
||||||
}
|
}
|
||||||
|
|
||||||
function restart_reload(){
|
function restart_reload() {
|
||||||
document.body.innerHTML='<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
|
document.body.innerHTML = '<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
|
||||||
|
|
||||||
var requestPing = function(){
|
var requestPing = function() {
|
||||||
requestGet("./internal/ping", {}, function(data){
|
requestGet("./internal/ping", {}, function(data) {
|
||||||
location.reload();
|
location.reload();
|
||||||
}, function(){
|
}, function() {
|
||||||
setTimeout(requestPing, 500);
|
setTimeout(requestPing, 500);
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
setTimeout(requestPing, 2000);
|
setTimeout(requestPing, 2000);
|
||||||
|
|
||||||
return []
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
// Simulate an `input` DOM event for Gradio Textbox component. Needed after you edit its contents in javascript, otherwise your edits
|
// Simulate an `input` DOM event for Gradio Textbox component. Needed after you edit its contents in javascript, otherwise your edits
|
||||||
// will only visible on web page and not sent to python.
|
// will only visible on web page and not sent to python.
|
||||||
function updateInput(target){
|
function updateInput(target) {
|
||||||
let e = new Event("input", { bubbles: true })
|
let e = new Event("input", { bubbles: true });
|
||||||
Object.defineProperty(e, "target", {value: target})
|
Object.defineProperty(e, "target", {value: target});
|
||||||
target.dispatchEvent(e);
|
target.dispatchEvent(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
var desiredCheckpointName = null;
|
var desiredCheckpointName = null;
|
||||||
function selectCheckpoint(name){
|
function selectCheckpoint(name) {
|
||||||
desiredCheckpointName = name;
|
desiredCheckpointName = name;
|
||||||
gradioApp().getElementById('change_checkpoint').click()
|
gradioApp().getElementById('change_checkpoint').click();
|
||||||
}
|
}
|
||||||
|
|
||||||
function currentImg2imgSourceResolution(_, _, scaleBy){
|
function currentImg2imgSourceResolution(_, _, scaleBy) {
|
||||||
var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] img')
|
var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] img');
|
||||||
return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy]
|
return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy];
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateImg2imgResizeToTextAfterChangingImage(){
|
function updateImg2imgResizeToTextAfterChangingImage() {
|
||||||
// At the time this is called from gradio, the image has no yet been replaced.
|
// At the time this is called from gradio, the image has no yet been replaced.
|
||||||
// There may be a better solution, but this is simple and straightforward so I'm going with it.
|
// There may be a better solution, but this is simple and straightforward so I'm going with it.
|
||||||
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
gradioApp().getElementById('img2img_update_resize_to').click()
|
gradioApp().getElementById('img2img_update_resize_to').click();
|
||||||
}, 500);
|
}, 500);
|
||||||
|
|
||||||
return []
|
return [];
|
||||||
}
|
}
|
||||||
|
@ -1,62 +1,62 @@
|
|||||||
// various hints and extra info for the settings tab
|
// various hints and extra info for the settings tab
|
||||||
|
|
||||||
settingsHintsSetup = false
|
settingsHintsSetup = false;
|
||||||
|
|
||||||
onOptionsChanged(function(){
|
onOptionsChanged(function() {
|
||||||
if(settingsHintsSetup) return
|
if (settingsHintsSetup) return;
|
||||||
settingsHintsSetup = true
|
settingsHintsSetup = true;
|
||||||
|
|
||||||
gradioApp().querySelectorAll('#settings [id^=setting_]').forEach(function(div){
|
gradioApp().querySelectorAll('#settings [id^=setting_]').forEach(function(div) {
|
||||||
var name = div.id.substr(8)
|
var name = div.id.substr(8);
|
||||||
var commentBefore = opts._comments_before[name]
|
var commentBefore = opts._comments_before[name];
|
||||||
var commentAfter = opts._comments_after[name]
|
var commentAfter = opts._comments_after[name];
|
||||||
|
|
||||||
if(! commentBefore && !commentAfter) return
|
if (!commentBefore && !commentAfter) return;
|
||||||
|
|
||||||
var span = null
|
var span = null;
|
||||||
if(div.classList.contains('gradio-checkbox')) span = div.querySelector('label span')
|
if (div.classList.contains('gradio-checkbox')) span = div.querySelector('label span');
|
||||||
else if(div.classList.contains('gradio-checkboxgroup')) span = div.querySelector('span').firstChild
|
else if (div.classList.contains('gradio-checkboxgroup')) span = div.querySelector('span').firstChild;
|
||||||
else if(div.classList.contains('gradio-radio')) span = div.querySelector('span').firstChild
|
else if (div.classList.contains('gradio-radio')) span = div.querySelector('span').firstChild;
|
||||||
else span = div.querySelector('label span').firstChild
|
else span = div.querySelector('label span').firstChild;
|
||||||
|
|
||||||
if(!span) return
|
if (!span) return;
|
||||||
|
|
||||||
if(commentBefore){
|
if (commentBefore) {
|
||||||
var comment = document.createElement('DIV')
|
var comment = document.createElement('DIV');
|
||||||
comment.className = 'settings-comment'
|
comment.className = 'settings-comment';
|
||||||
comment.innerHTML = commentBefore
|
comment.innerHTML = commentBefore;
|
||||||
span.parentElement.insertBefore(document.createTextNode('\xa0'), span)
|
span.parentElement.insertBefore(document.createTextNode('\xa0'), span);
|
||||||
span.parentElement.insertBefore(comment, span)
|
span.parentElement.insertBefore(comment, span);
|
||||||
span.parentElement.insertBefore(document.createTextNode('\xa0'), span)
|
span.parentElement.insertBefore(document.createTextNode('\xa0'), span);
|
||||||
}
|
}
|
||||||
if(commentAfter){
|
if (commentAfter) {
|
||||||
var comment = document.createElement('DIV')
|
var comment = document.createElement('DIV');
|
||||||
comment.className = 'settings-comment'
|
comment.className = 'settings-comment';
|
||||||
comment.innerHTML = commentAfter
|
comment.innerHTML = commentAfter;
|
||||||
span.parentElement.insertBefore(comment, span.nextSibling)
|
span.parentElement.insertBefore(comment, span.nextSibling);
|
||||||
span.parentElement.insertBefore(document.createTextNode('\xa0'), span.nextSibling)
|
span.parentElement.insertBefore(document.createTextNode('\xa0'), span.nextSibling);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
|
|
||||||
function settingsHintsShowQuicksettings(){
|
function settingsHintsShowQuicksettings() {
|
||||||
requestGet("./internal/quicksettings-hint", {}, function(data){
|
requestGet("./internal/quicksettings-hint", {}, function(data) {
|
||||||
var table = document.createElement('table')
|
var table = document.createElement('table');
|
||||||
table.className = 'settings-value-table'
|
table.className = 'settings-value-table';
|
||||||
|
|
||||||
data.forEach(function(obj){
|
data.forEach(function(obj) {
|
||||||
var tr = document.createElement('tr')
|
var tr = document.createElement('tr');
|
||||||
var td = document.createElement('td')
|
var td = document.createElement('td');
|
||||||
td.textContent = obj.name
|
td.textContent = obj.name;
|
||||||
tr.appendChild(td)
|
tr.appendChild(td);
|
||||||
|
|
||||||
var td = document.createElement('td')
|
var td = document.createElement('td');
|
||||||
td.textContent = obj.label
|
td.textContent = obj.label;
|
||||||
tr.appendChild(td)
|
tr.appendChild(td);
|
||||||
|
|
||||||
table.appendChild(tr)
|
table.appendChild(tr);
|
||||||
})
|
});
|
||||||
|
|
||||||
popup(table);
|
popup(table);
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
74
script.js
74
script.js
@ -1,66 +1,72 @@
|
|||||||
function gradioApp() {
|
function gradioApp() {
|
||||||
const elems = document.getElementsByTagName('gradio-app')
|
const elems = document.getElementsByTagName('gradio-app');
|
||||||
const elem = elems.length == 0 ? document : elems[0]
|
const elem = elems.length == 0 ? document : elems[0];
|
||||||
|
|
||||||
if (elem !== document) elem.getElementById = function(id){ return document.getElementById(id) }
|
if (elem !== document) {
|
||||||
return elem.shadowRoot ? elem.shadowRoot : elem
|
elem.getElementById = function(id) {
|
||||||
|
return document.getElementById(id);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return elem.shadowRoot ? elem.shadowRoot : elem;
|
||||||
}
|
}
|
||||||
|
|
||||||
function get_uiCurrentTab() {
|
function get_uiCurrentTab() {
|
||||||
return gradioApp().querySelector('#tabs button.selected')
|
return gradioApp().querySelector('#tabs button.selected');
|
||||||
}
|
}
|
||||||
|
|
||||||
function get_uiCurrentTabContent() {
|
function get_uiCurrentTabContent() {
|
||||||
return gradioApp().querySelector('.tabitem[id^=tab_]:not([style*="display: none"])')
|
return gradioApp().querySelector('.tabitem[id^=tab_]:not([style*="display: none"])');
|
||||||
}
|
}
|
||||||
|
|
||||||
uiUpdateCallbacks = []
|
uiUpdateCallbacks = [];
|
||||||
uiLoadedCallbacks = []
|
uiLoadedCallbacks = [];
|
||||||
uiTabChangeCallbacks = []
|
uiTabChangeCallbacks = [];
|
||||||
optionsChangedCallbacks = []
|
optionsChangedCallbacks = [];
|
||||||
let uiCurrentTab = null
|
let uiCurrentTab = null;
|
||||||
|
|
||||||
function onUiUpdate(callback){
|
function onUiUpdate(callback) {
|
||||||
uiUpdateCallbacks.push(callback)
|
uiUpdateCallbacks.push(callback);
|
||||||
}
|
}
|
||||||
function onUiLoaded(callback){
|
function onUiLoaded(callback) {
|
||||||
uiLoadedCallbacks.push(callback)
|
uiLoadedCallbacks.push(callback);
|
||||||
}
|
}
|
||||||
function onUiTabChange(callback){
|
function onUiTabChange(callback) {
|
||||||
uiTabChangeCallbacks.push(callback)
|
uiTabChangeCallbacks.push(callback);
|
||||||
}
|
}
|
||||||
function onOptionsChanged(callback){
|
function onOptionsChanged(callback) {
|
||||||
optionsChangedCallbacks.push(callback)
|
optionsChangedCallbacks.push(callback);
|
||||||
}
|
}
|
||||||
|
|
||||||
function runCallback(x, m){
|
function runCallback(x, m) {
|
||||||
try {
|
try {
|
||||||
x(m)
|
x(m);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
(console.error || console.log).call(console, e.message, e);
|
(console.error || console.log).call(console, e.message, e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
function executeCallbacks(queue, m) {
|
function executeCallbacks(queue, m) {
|
||||||
queue.forEach(function(x){runCallback(x, m)})
|
queue.forEach(function(x) {
|
||||||
|
runCallback(x, m);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
var executedOnLoaded = false;
|
var executedOnLoaded = false;
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", function() {
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
var mutationObserver = new MutationObserver(function(m){
|
var mutationObserver = new MutationObserver(function(m) {
|
||||||
if(!executedOnLoaded && gradioApp().querySelector('#txt2img_prompt')){
|
if (!executedOnLoaded && gradioApp().querySelector('#txt2img_prompt')) {
|
||||||
executedOnLoaded = true;
|
executedOnLoaded = true;
|
||||||
executeCallbacks(uiLoadedCallbacks);
|
executeCallbacks(uiLoadedCallbacks);
|
||||||
}
|
}
|
||||||
|
|
||||||
executeCallbacks(uiUpdateCallbacks, m);
|
executeCallbacks(uiUpdateCallbacks, m);
|
||||||
const newTab = get_uiCurrentTab();
|
const newTab = get_uiCurrentTab();
|
||||||
if ( newTab && ( newTab !== uiCurrentTab ) ) {
|
if (newTab && (newTab !== uiCurrentTab)) {
|
||||||
uiCurrentTab = newTab;
|
uiCurrentTab = newTab;
|
||||||
executeCallbacks(uiTabChangeCallbacks);
|
executeCallbacks(uiTabChangeCallbacks);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
mutationObserver.observe( gradioApp(), { childList:true, subtree:true })
|
mutationObserver.observe(gradioApp(), { childList: true, subtree: true });
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -69,9 +75,9 @@ document.addEventListener("DOMContentLoaded", function() {
|
|||||||
document.addEventListener('keydown', function(e) {
|
document.addEventListener('keydown', function(e) {
|
||||||
var handled = false;
|
var handled = false;
|
||||||
if (e.key !== undefined) {
|
if (e.key !== undefined) {
|
||||||
if((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
|
if ((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
|
||||||
} else if (e.keyCode !== undefined) {
|
} else if (e.keyCode !== undefined) {
|
||||||
if((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
|
if ((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
|
||||||
}
|
}
|
||||||
if (handled) {
|
if (handled) {
|
||||||
button = get_uiCurrentTabContent().querySelector('button[id$=_generate]');
|
button = get_uiCurrentTabContent().querySelector('button[id$=_generate]');
|
||||||
@ -80,22 +86,22 @@ document.addEventListener('keydown', function(e) {
|
|||||||
}
|
}
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* checks that a UI element is not in another hidden element or tab content
|
* checks that a UI element is not in another hidden element or tab content
|
||||||
*/
|
*/
|
||||||
function uiElementIsVisible(el) {
|
function uiElementIsVisible(el) {
|
||||||
let isVisible = !el.closest('.\\!hidden');
|
let isVisible = !el.closest('.\\!hidden');
|
||||||
if ( ! isVisible ) {
|
if (!isVisible) {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
while( isVisible = el.closest('.tabitem')?.style.display !== 'none' ) {
|
while (isVisible = el.closest('.tabitem')?.style.display !== 'none') {
|
||||||
if ( ! isVisible ) {
|
if (!isVisible) {
|
||||||
return false;
|
return false;
|
||||||
} else if ( el.parentElement ) {
|
} else if (el.parentElement) {
|
||||||
el = el.parentElement
|
el = el.parentElement;
|
||||||
} else {
|
} else {
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user