mirror of
https://github.com/anapnoe/stable-diffusion-webui-ux.git
synced 2026-09-19 09:15:20 +02:00
Fix issue #135 and js formatting
This commit is contained in:
anapnoe
@@ -1,111 +1,120 @@
|
||||
|
||||
let currentWidth = 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) {
|
||||
currentWidth = e.target.value * 1.0;
|
||||
}
|
||||
if (is_height) {
|
||||
currentHeight = e.target.value * 1.0;
|
||||
}
|
||||
|
||||
if(is_width){
|
||||
currentWidth = e.target.value*1.0
|
||||
}
|
||||
if(is_height){
|
||||
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) {
|
||||
return;
|
||||
}
|
||||
|
||||
if(!inImg2img){
|
||||
return;
|
||||
}
|
||||
var targetElement = null;
|
||||
|
||||
var targetElement = null;
|
||||
var tabIndex = get_tab_index("mode_img2img");
|
||||
if (tabIndex == 0) {
|
||||
// img2img
|
||||
targetElement = gradioApp().querySelector(
|
||||
"#img2img_image div[data-testid=image] img"
|
||||
);
|
||||
} else if (tabIndex == 1) {
|
||||
//Sketch
|
||||
targetElement = gradioApp().querySelector(
|
||||
"#img2img_sketch div[data-testid=image] img"
|
||||
);
|
||||
} else if (tabIndex == 2) {
|
||||
// Inpaint
|
||||
targetElement = gradioApp().querySelector(
|
||||
"#img2maskimg div[data-testid=image] img"
|
||||
);
|
||||
} else if (tabIndex == 3) {
|
||||
// Inpaint sketch
|
||||
targetElement = gradioApp().querySelector(
|
||||
"#inpaint_sketch div[data-testid=image] img"
|
||||
);
|
||||
}
|
||||
|
||||
var tabIndex = get_tab_index('mode_img2img')
|
||||
if(tabIndex == 0){ // img2img
|
||||
targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img');
|
||||
} else if(tabIndex == 1){ //Sketch
|
||||
targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img');
|
||||
} else if(tabIndex == 2){ // Inpaint
|
||||
targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img');
|
||||
} else if(tabIndex == 3){ // Inpaint sketch
|
||||
targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img');
|
||||
}
|
||||
if (targetElement) {
|
||||
var arPreviewRect = gradioApp().querySelector("#imageARPreview");
|
||||
if (!arPreviewRect) {
|
||||
arPreviewRect = document.createElement("div");
|
||||
arPreviewRect.id = "imageARPreview";
|
||||
gradioApp().appendChild(arPreviewRect);
|
||||
}
|
||||
|
||||
var viewportOffset = targetElement.getBoundingClientRect();
|
||||
|
||||
if(targetElement){
|
||||
var viewportscale = Math.min(
|
||||
targetElement.clientWidth / targetElement.naturalWidth,
|
||||
targetElement.clientHeight / targetElement.naturalHeight
|
||||
);
|
||||
|
||||
var arPreviewRect = gradioApp().querySelector('#imageARPreview');
|
||||
if(!arPreviewRect){
|
||||
arPreviewRect = document.createElement('div')
|
||||
arPreviewRect.id = "imageARPreview";
|
||||
gradioApp().appendChild(arPreviewRect)
|
||||
}
|
||||
var scaledx = targetElement.naturalWidth * viewportscale;
|
||||
var scaledy = targetElement.naturalHeight * viewportscale;
|
||||
|
||||
var cleintRectTop = viewportOffset.top + window.scrollY;
|
||||
var cleintRectLeft = viewportOffset.left + window.scrollX;
|
||||
var cleintRectCentreY = cleintRectTop + targetElement.clientHeight / 2;
|
||||
var cleintRectCentreX = cleintRectLeft + targetElement.clientWidth / 2;
|
||||
|
||||
var arscale = Math.min(scaledx / currentWidth, scaledy / currentHeight);
|
||||
var arscaledx = currentWidth * arscale;
|
||||
var arscaledy = currentHeight * arscale;
|
||||
|
||||
var viewportOffset = targetElement.getBoundingClientRect();
|
||||
var arRectTop = cleintRectCentreY - arscaledy / 2;
|
||||
var arRectLeft = cleintRectCentreX - arscaledx / 2;
|
||||
var arRectWidth = arscaledx;
|
||||
var arRectHeight = arscaledy;
|
||||
|
||||
var viewportscale = Math.min( targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight )
|
||||
arPreviewRect.style.top = arRectTop + "px";
|
||||
arPreviewRect.style.left = arRectLeft + "px";
|
||||
arPreviewRect.style.width = arRectWidth + "px";
|
||||
arPreviewRect.style.height = arRectHeight + "px";
|
||||
|
||||
var scaledx = targetElement.naturalWidth*viewportscale
|
||||
var scaledy = targetElement.naturalHeight*viewportscale
|
||||
|
||||
var cleintRectTop = (viewportOffset.top+window.scrollY)
|
||||
var cleintRectLeft = (viewportOffset.left+window.scrollX)
|
||||
var cleintRectCentreY = cleintRectTop + (targetElement.clientHeight/2)
|
||||
var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth/2)
|
||||
|
||||
var arscale = Math.min( scaledx/currentWidth, scaledy/currentHeight )
|
||||
var arscaledx = currentWidth*arscale
|
||||
var arscaledy = currentHeight*arscale
|
||||
|
||||
var arRectTop = cleintRectCentreY-(arscaledy/2)
|
||||
var arRectLeft = cleintRectCentreX-(arscaledx/2)
|
||||
var arRectWidth = arscaledx
|
||||
var arRectHeight = arscaledy
|
||||
|
||||
arPreviewRect.style.top = arRectTop+'px';
|
||||
arPreviewRect.style.left = arRectLeft+'px';
|
||||
arPreviewRect.style.width = arRectWidth+'px';
|
||||
arPreviewRect.style.height = arRectHeight+'px';
|
||||
|
||||
clearTimeout(arFrameTimeout);
|
||||
arFrameTimeout = setTimeout(function(){
|
||||
arPreviewRect.style.display = 'none';
|
||||
},2000);
|
||||
|
||||
arPreviewRect.style.display = 'block';
|
||||
|
||||
}
|
||||
clearTimeout(arFrameTimeout);
|
||||
arFrameTimeout = setTimeout(function () {
|
||||
arPreviewRect.style.display = "none";
|
||||
}, 2000);
|
||||
|
||||
arPreviewRect.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
onUiUpdate(function () {
|
||||
var arPreviewRect = gradioApp().querySelector("#imageARPreview");
|
||||
if (arPreviewRect) {
|
||||
arPreviewRect.style.display = "none";
|
||||
}
|
||||
var tabImg2img = gradioApp().querySelector("#tab_img2img");
|
||||
if (tabImg2img) {
|
||||
var inImg2img = tabImg2img.style.display == "block";
|
||||
if (inImg2img) {
|
||||
let inputs = gradioApp().querySelectorAll("input");
|
||||
inputs.forEach(function (e) {
|
||||
var is_width = e.parentElement.id == "img2img_width";
|
||||
var is_height = e.parentElement.id == "img2img_height";
|
||||
|
||||
onUiUpdate(function(){
|
||||
var arPreviewRect = gradioApp().querySelector('#imageARPreview');
|
||||
if(arPreviewRect){
|
||||
arPreviewRect.style.display = 'none';
|
||||
}
|
||||
var tabImg2img = gradioApp().querySelector("#tab_img2img");
|
||||
if (tabImg2img) {
|
||||
var inImg2img = tabImg2img.style.display == "block";
|
||||
if(inImg2img){
|
||||
let inputs = gradioApp().querySelectorAll('input');
|
||||
inputs.forEach(function(e){
|
||||
var is_width = e.parentElement.id == "img2img_width"
|
||||
var is_height = e.parentElement.id == "img2img_height"
|
||||
|
||||
if((is_width || is_height) && !e.classList.contains('scrollwatch')){
|
||||
e.addEventListener('input', function(e){dimensionChange(e, is_width, is_height)} )
|
||||
e.classList.add('scrollwatch')
|
||||
}
|
||||
if(is_width){
|
||||
currentWidth = e.value*1.0
|
||||
}
|
||||
if(is_height){
|
||||
currentHeight = e.value*1.0
|
||||
}
|
||||
})
|
||||
if ((is_width || is_height) && !e.classList.contains("scrollwatch")) {
|
||||
e.addEventListener("input", function (e) {
|
||||
dimensionChange(e, is_width, is_height);
|
||||
});
|
||||
e.classList.add("scrollwatch");
|
||||
}
|
||||
if (is_width) {
|
||||
currentWidth = e.value * 1.0;
|
||||
}
|
||||
if (is_height) {
|
||||
currentHeight = e.value * 1.0;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
+129
-102
@@ -1,48 +1,50 @@
|
||||
|
||||
contextMenuInit = function(){
|
||||
let eventListenerApplied=false;
|
||||
contextMenuInit = function () {
|
||||
let eventListenerApplied = false;
|
||||
let menuSpecs = new Map();
|
||||
|
||||
const uid = function(){
|
||||
const uid = function () {
|
||||
return Date.now().toString(36) + Math.random().toString(36).substring(2);
|
||||
}
|
||||
};
|
||||
|
||||
function showContextMenu(event,element,menuEntries){
|
||||
let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
|
||||
let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
|
||||
function showContextMenu(event, element, menuEntries) {
|
||||
let posx =
|
||||
event.clientX +
|
||||
document.body.scrollLeft +
|
||||
document.documentElement.scrollLeft;
|
||||
let posy =
|
||||
event.clientY +
|
||||
document.body.scrollTop +
|
||||
document.documentElement.scrollTop;
|
||||
|
||||
let oldMenu = gradioApp().querySelector('#context-menu')
|
||||
if(oldMenu){
|
||||
oldMenu.remove()
|
||||
let oldMenu = gradioApp().querySelector("#context-menu");
|
||||
if (oldMenu) {
|
||||
oldMenu.remove();
|
||||
}
|
||||
|
||||
let baseStyle = window.getComputedStyle(uiCurrentTab)
|
||||
let baseStyle = window.getComputedStyle(uiCurrentTab);
|
||||
|
||||
const contextMenu = document.createElement('nav')
|
||||
contextMenu.id = "context-menu"
|
||||
contextMenu.style.background = baseStyle.background
|
||||
contextMenu.style.color = baseStyle.color
|
||||
contextMenu.style.fontFamily = baseStyle.fontFamily
|
||||
contextMenu.style.top = posy+'px'
|
||||
contextMenu.style.left = posx+'px'
|
||||
const contextMenu = document.createElement("nav");
|
||||
contextMenu.id = "context-menu";
|
||||
contextMenu.style.background = baseStyle.background;
|
||||
contextMenu.style.color = baseStyle.color;
|
||||
contextMenu.style.fontFamily = baseStyle.fontFamily;
|
||||
contextMenu.style.top = posy + "px";
|
||||
contextMenu.style.left = posx + "px";
|
||||
|
||||
|
||||
|
||||
const contextMenuList = document.createElement('ul')
|
||||
contextMenuList.className = 'context-menu-items';
|
||||
const contextMenuList = document.createElement("ul");
|
||||
contextMenuList.className = "context-menu-items";
|
||||
contextMenu.append(contextMenuList);
|
||||
|
||||
menuEntries.forEach(function(entry){
|
||||
let contextMenuEntry = document.createElement('a')
|
||||
contextMenuEntry.innerHTML = entry['name']
|
||||
contextMenuEntry.addEventListener("click", function() {
|
||||
entry['func']();
|
||||
})
|
||||
menuEntries.forEach(function (entry) {
|
||||
let contextMenuEntry = document.createElement("a");
|
||||
contextMenuEntry.innerHTML = entry["name"];
|
||||
contextMenuEntry.addEventListener("click", function () {
|
||||
entry["func"]();
|
||||
});
|
||||
contextMenuList.append(contextMenuEntry);
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
gradioApp().appendChild(contextMenu)
|
||||
gradioApp().appendChild(contextMenu);
|
||||
|
||||
let menuWidth = contextMenu.offsetWidth + 4;
|
||||
let menuHeight = contextMenu.offsetHeight + 4;
|
||||
@@ -50,118 +52,143 @@ contextMenuInit = function(){
|
||||
let windowWidth = window.innerWidth;
|
||||
let windowHeight = window.innerHeight;
|
||||
|
||||
if ( (windowWidth - posx) < menuWidth ) {
|
||||
if (windowWidth - posx < menuWidth) {
|
||||
contextMenu.style.left = windowWidth - menuWidth + "px";
|
||||
}
|
||||
|
||||
if ( (windowHeight - posy) < menuHeight ) {
|
||||
if (windowHeight - posy < menuHeight) {
|
||||
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){
|
||||
currentItems = []
|
||||
menuSpecs.set(targetElementSelector,currentItems);
|
||||
if (!currentItems) {
|
||||
currentItems = [];
|
||||
menuSpecs.set(targetElementSelector, currentItems);
|
||||
}
|
||||
let newItem = {'id':targetElementSelector+'_'+uid(),
|
||||
'name':entryName,
|
||||
'func':entryFunction,
|
||||
'isNew':true}
|
||||
let newItem = {
|
||||
id: targetElementSelector + "_" + uid(),
|
||||
name: entryName,
|
||||
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
|
||||
v.forEach(function(e,ei){if(e['id']==uid){index=ei}})
|
||||
if(index>=0){
|
||||
function removeContextMenuOption(uid) {
|
||||
menuSpecs.forEach(function (v) {
|
||||
let index = -1;
|
||||
v.forEach(function (e, ei) {
|
||||
if (e["id"] == uid) {
|
||||
index = ei;
|
||||
}
|
||||
});
|
||||
if (index >= 0) {
|
||||
v.splice(index, 1);
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function addContextMenuEventListener(){
|
||||
if(eventListenerApplied){
|
||||
function addContextMenuEventListener() {
|
||||
if (eventListenerApplied) {
|
||||
return;
|
||||
}
|
||||
gradioApp().addEventListener("click", function(e) {
|
||||
let source = e.composedPath()[0]
|
||||
if(source.id && source.id.indexOf('check_progress')>-1){
|
||||
return
|
||||
gradioApp().addEventListener("click", function (e) {
|
||||
let source = e.composedPath()[0];
|
||||
if (source.id && source.id.indexOf("check_progress") > -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
let oldMenu = gradioApp().querySelector('#context-menu')
|
||||
if(oldMenu){
|
||||
oldMenu.remove()
|
||||
let oldMenu = gradioApp().querySelector("#context-menu");
|
||||
if (oldMenu) {
|
||||
oldMenu.remove();
|
||||
}
|
||||
});
|
||||
gradioApp().addEventListener("contextmenu", function(e) {
|
||||
let oldMenu = gradioApp().querySelector('#context-menu')
|
||||
if(oldMenu){
|
||||
oldMenu.remove()
|
||||
gradioApp().addEventListener("contextmenu", function (e) {
|
||||
let oldMenu = gradioApp().querySelector("#context-menu");
|
||||
if (oldMenu) {
|
||||
oldMenu.remove();
|
||||
}
|
||||
menuSpecs.forEach(function(v,k) {
|
||||
if(e.composedPath()[0].matches(k)){
|
||||
showContextMenu(e,e.composedPath()[0],v)
|
||||
e.preventDefault()
|
||||
menuSpecs.forEach(function (v, k) {
|
||||
if (e.composedPath()[0].matches(k)) {
|
||||
showContextMenu(e, e.composedPath()[0], v);
|
||||
e.preventDefault();
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
eventListenerApplied=true
|
||||
|
||||
eventListenerApplied = true;
|
||||
}
|
||||
|
||||
return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener]
|
||||
}
|
||||
return [
|
||||
appendContextMenuOption,
|
||||
removeContextMenuOption,
|
||||
addContextMenuEventListener,
|
||||
];
|
||||
};
|
||||
|
||||
initResponse = contextMenuInit();
|
||||
appendContextMenuOption = initResponse[0];
|
||||
removeContextMenuOption = initResponse[1];
|
||||
appendContextMenuOption = initResponse[0];
|
||||
removeContextMenuOption = initResponse[1];
|
||||
addContextMenuEventListener = initResponse[2];
|
||||
|
||||
(function(){
|
||||
(function () {
|
||||
//Start example Context Menu Items
|
||||
let generateOnRepeat = function(genbuttonid,interruptbuttonid){
|
||||
let generateOnRepeat = function (genbuttonid, interruptbuttonid) {
|
||||
let genbutton = gradioApp().querySelector(genbuttonid);
|
||||
let interruptbutton = gradioApp().querySelector(interruptbuttonid);
|
||||
if(!interruptbutton.offsetParent){
|
||||
if (!interruptbutton.offsetParent) {
|
||||
genbutton.click();
|
||||
}
|
||||
clearInterval(window.generateOnRepeatInterval)
|
||||
window.generateOnRepeatInterval = setInterval(function(){
|
||||
if(!interruptbutton.offsetParent){
|
||||
clearInterval(window.generateOnRepeatInterval);
|
||||
window.generateOnRepeatInterval = setInterval(function () {
|
||||
if (!interruptbutton.offsetParent) {
|
||||
genbutton.click();
|
||||
}
|
||||
},
|
||||
500)
|
||||
}
|
||||
}, 500);
|
||||
};
|
||||
|
||||
appendContextMenuOption('#txt2img_generate','Generate forever',function(){
|
||||
generateOnRepeat('#txt2img_generate','#txt2img_interrupt');
|
||||
})
|
||||
appendContextMenuOption('#img2img_generate','Generate forever',function(){
|
||||
generateOnRepeat('#img2img_generate','#img2img_interrupt');
|
||||
})
|
||||
appendContextMenuOption("#txt2img_generate", "Generate forever", function () {
|
||||
generateOnRepeat("#txt2img_generate", "#txt2img_interrupt");
|
||||
});
|
||||
appendContextMenuOption("#img2img_generate", "Generate forever", function () {
|
||||
generateOnRepeat("#img2img_generate", "#img2img_interrupt");
|
||||
});
|
||||
|
||||
let cancelGenerateForever = function(){
|
||||
clearInterval(window.generateOnRepeatInterval)
|
||||
}
|
||||
|
||||
appendContextMenuOption('#txt2img_interrupt','Cancel generate forever',cancelGenerateForever)
|
||||
appendContextMenuOption('#txt2img_generate', 'Cancel generate forever',cancelGenerateForever)
|
||||
appendContextMenuOption('#img2img_interrupt','Cancel generate forever',cancelGenerateForever)
|
||||
appendContextMenuOption('#img2img_generate', 'Cancel generate forever',cancelGenerateForever)
|
||||
let cancelGenerateForever = function () {
|
||||
clearInterval(window.generateOnRepeatInterval);
|
||||
};
|
||||
|
||||
appendContextMenuOption(
|
||||
"#txt2img_interrupt",
|
||||
"Cancel generate forever",
|
||||
cancelGenerateForever
|
||||
);
|
||||
appendContextMenuOption(
|
||||
"#txt2img_generate",
|
||||
"Cancel generate forever",
|
||||
cancelGenerateForever
|
||||
);
|
||||
appendContextMenuOption(
|
||||
"#img2img_interrupt",
|
||||
"Cancel generate forever",
|
||||
cancelGenerateForever
|
||||
);
|
||||
appendContextMenuOption(
|
||||
"#img2img_generate",
|
||||
"Cancel generate forever",
|
||||
cancelGenerateForever
|
||||
);
|
||||
})();
|
||||
//End example Context Menu Items
|
||||
|
||||
onUiUpdate(function(){
|
||||
addContextMenuEventListener()
|
||||
onUiUpdate(function () {
|
||||
addContextMenuEventListener();
|
||||
});
|
||||
|
||||
Vendored
+92
-81
@@ -1,97 +1,108 @@
|
||||
// allows drag-dropping files into gradio image elements, and also pasting images from clipboard
|
||||
|
||||
function isValidImageList( files ) {
|
||||
return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
|
||||
function isValidImageList(files) {
|
||||
return (
|
||||
files &&
|
||||
files?.length === 1 &&
|
||||
["image/png", "image/gif", "image/jpeg"].includes(files[0].type)
|
||||
);
|
||||
}
|
||||
|
||||
function dropReplaceImage( imgWrap, files ) {
|
||||
if ( ! isValidImageList( files ) ) {
|
||||
return;
|
||||
function dropReplaceImage(imgWrap, files) {
|
||||
if (!isValidImageList(files)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tmpFile = files[0];
|
||||
|
||||
imgWrap.querySelector('[aria-label="Clear"]')?.click();
|
||||
const callback = () => {
|
||||
const fileInput = imgWrap.querySelector('input[type="file"]');
|
||||
if (fileInput) {
|
||||
if (files.length === 0) {
|
||||
files = new DataTransfer();
|
||||
files.items.add(tmpFile);
|
||||
fileInput.files = files.files;
|
||||
} else {
|
||||
fileInput.files = files;
|
||||
}
|
||||
fileInput.dispatchEvent(new Event("change"));
|
||||
}
|
||||
};
|
||||
|
||||
const tmpFile = files[0];
|
||||
|
||||
imgWrap.querySelector('[aria-label="Clear"]')?.click();
|
||||
const callback = () => {
|
||||
const fileInput = imgWrap.querySelector('input[type="file"]');
|
||||
if ( fileInput ) {
|
||||
if ( files.length === 0 ) {
|
||||
files = new DataTransfer();
|
||||
files.items.add(tmpFile);
|
||||
fileInput.files = files.files;
|
||||
} else {
|
||||
fileInput.files = files;
|
||||
}
|
||||
fileInput.dispatchEvent(new Event('change'));
|
||||
}
|
||||
if (imgWrap.closest("#pnginfo_image")) {
|
||||
// special treatment for PNG Info tab, wait for fetch request to finish
|
||||
const oldFetch = window.fetch;
|
||||
window.fetch = async (input, options) => {
|
||||
const response = await oldFetch(input, options);
|
||||
if ("api/predict/" === input) {
|
||||
const content = await response.text();
|
||||
window.fetch = oldFetch;
|
||||
window.requestAnimationFrame(() => callback());
|
||||
return new Response(content, {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
headers: response.headers,
|
||||
});
|
||||
}
|
||||
return response;
|
||||
};
|
||||
|
||||
if ( imgWrap.closest('#pnginfo_image') ) {
|
||||
// special treatment for PNG Info tab, wait for fetch request to finish
|
||||
const oldFetch = window.fetch;
|
||||
window.fetch = async (input, options) => {
|
||||
const response = await oldFetch(input, options);
|
||||
if ( 'api/predict/' === input ) {
|
||||
const content = await response.text();
|
||||
window.fetch = oldFetch;
|
||||
window.requestAnimationFrame( () => callback() );
|
||||
return new Response(content, {
|
||||
status: response.status,
|
||||
statusText: response.statusText,
|
||||
headers: response.headers
|
||||
})
|
||||
}
|
||||
return response;
|
||||
};
|
||||
} else {
|
||||
window.requestAnimationFrame( () => callback() );
|
||||
}
|
||||
} else {
|
||||
window.requestAnimationFrame(() => callback());
|
||||
}
|
||||
}
|
||||
|
||||
window.document.addEventListener('dragover', e => {
|
||||
const target = e.composedPath()[0];
|
||||
const imgWrap = target.closest('[data-testid="image"]');
|
||||
if ( !imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) {
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'copy';
|
||||
window.document.addEventListener("dragover", (e) => {
|
||||
const target = e.composedPath()[0];
|
||||
const imgWrap = target.closest('[data-testid="image"]');
|
||||
if (
|
||||
!imgWrap &&
|
||||
target.placeholder &&
|
||||
target.placeholder.indexOf("Prompt") == -1
|
||||
) {
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = "copy";
|
||||
});
|
||||
|
||||
window.document.addEventListener('drop', e => {
|
||||
const target = e.composedPath()[0];
|
||||
if (target.placeholder.indexOf("Prompt") == -1) {
|
||||
return;
|
||||
}
|
||||
const imgWrap = target.closest('[data-testid="image"]');
|
||||
if ( !imgWrap ) {
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const files = e.dataTransfer.files;
|
||||
dropReplaceImage( imgWrap, files );
|
||||
window.document.addEventListener("drop", (e) => {
|
||||
const target = e.composedPath()[0];
|
||||
if (target.placeholder.indexOf("Prompt") == -1) {
|
||||
return;
|
||||
}
|
||||
const imgWrap = target.closest('[data-testid="image"]');
|
||||
if (!imgWrap) {
|
||||
return;
|
||||
}
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const files = e.dataTransfer.files;
|
||||
dropReplaceImage(imgWrap, files);
|
||||
});
|
||||
|
||||
window.addEventListener('paste', e => {
|
||||
const files = e.clipboardData.files;
|
||||
if ( ! isValidImageList( files ) ) {
|
||||
return;
|
||||
}
|
||||
window.addEventListener("paste", (e) => {
|
||||
const files = e.clipboardData.files;
|
||||
if (!isValidImageList(files)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
|
||||
.filter(el => uiElementIsVisible(el));
|
||||
if ( ! visibleImageFields.length ) {
|
||||
return;
|
||||
}
|
||||
|
||||
const firstFreeImageField = visibleImageFields
|
||||
.filter(el => el.querySelector('input[type=file]'))?.[0];
|
||||
const visibleImageFields = [
|
||||
...gradioApp().querySelectorAll('[data-testid="image"]'),
|
||||
].filter((el) => uiElementIsVisible(el));
|
||||
if (!visibleImageFields.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
dropReplaceImage(
|
||||
firstFreeImageField ?
|
||||
firstFreeImageField :
|
||||
visibleImageFields[visibleImageFields.length - 1]
|
||||
, files );
|
||||
const firstFreeImageField = visibleImageFields.filter((el) =>
|
||||
el.querySelector("input[type=file]")
|
||||
)?.[0];
|
||||
|
||||
dropReplaceImage(
|
||||
firstFreeImageField
|
||||
? firstFreeImageField
|
||||
: visibleImageFields[visibleImageFields.length - 1],
|
||||
files
|
||||
);
|
||||
});
|
||||
|
||||
+124
-102
@@ -1,120 +1,142 @@
|
||||
function keyupEditAttention(event){
|
||||
let target = event.originalTarget || event.composedPath()[0];
|
||||
if (! target.matches("[id*='_toprow'] [id*='_prompt'] textarea")) return;
|
||||
if (! (event.metaKey || event.ctrlKey)) return;
|
||||
function keyupEditAttention(event) {
|
||||
let target = event.originalTarget || event.composedPath()[0];
|
||||
if (!target.matches("[id*='_toprow'] [id*='_prompt'] textarea")) return;
|
||||
if (!(event.metaKey || event.ctrlKey)) return;
|
||||
|
||||
let isPlus = event.key == "ArrowUp"
|
||||
let isMinus = event.key == "ArrowDown"
|
||||
if (!isPlus && !isMinus) return;
|
||||
let isPlus = event.key == "ArrowUp";
|
||||
let isMinus = event.key == "ArrowDown";
|
||||
if (!isPlus && !isMinus) return;
|
||||
|
||||
let selectionStart = target.selectionStart;
|
||||
let selectionEnd = target.selectionEnd;
|
||||
let text = target.value;
|
||||
let selectionStart = target.selectionStart;
|
||||
let selectionEnd = target.selectionEnd;
|
||||
let text = target.value;
|
||||
|
||||
function selectCurrentParenthesisBlock(OPEN, CLOSE){
|
||||
if (selectionStart !== selectionEnd) return false;
|
||||
function selectCurrentParenthesisBlock(OPEN, CLOSE) {
|
||||
if (selectionStart !== selectionEnd) return false;
|
||||
|
||||
// Find opening parenthesis around current cursor
|
||||
const before = text.substring(0, selectionStart);
|
||||
let beforeParen = before.lastIndexOf(OPEN);
|
||||
if (beforeParen == -1) return false;
|
||||
let beforeParenClose = before.lastIndexOf(CLOSE);
|
||||
while (beforeParenClose !== -1 && beforeParenClose > beforeParen) {
|
||||
beforeParen = before.lastIndexOf(OPEN, beforeParen - 1);
|
||||
beforeParenClose = before.lastIndexOf(CLOSE, beforeParenClose - 1);
|
||||
}
|
||||
|
||||
// Find closing parenthesis around current cursor
|
||||
const after = text.substring(selectionStart);
|
||||
let afterParen = after.indexOf(CLOSE);
|
||||
if (afterParen == -1) return false;
|
||||
let afterParenOpen = after.indexOf(OPEN);
|
||||
while (afterParenOpen !== -1 && afterParen > afterParenOpen) {
|
||||
afterParen = after.indexOf(CLOSE, afterParen + 1);
|
||||
afterParenOpen = after.indexOf(OPEN, afterParenOpen + 1);
|
||||
}
|
||||
if (beforeParen === -1 || afterParen === -1) return false;
|
||||
|
||||
// Set the selection to the text between the parenthesis
|
||||
const parenContent = text.substring(beforeParen + 1, selectionStart + afterParen);
|
||||
const lastColon = parenContent.lastIndexOf(":");
|
||||
selectionStart = beforeParen + 1;
|
||||
selectionEnd = selectionStart + lastColon;
|
||||
target.setSelectionRange(selectionStart, selectionEnd);
|
||||
return true;
|
||||
}
|
||||
|
||||
function selectCurrentWord(){
|
||||
if (selectionStart !== selectionEnd) return false;
|
||||
const delimiters = opts.keyedit_delimiters + " \r\n\t";
|
||||
|
||||
// seek backward until to find beggining
|
||||
while (!delimiters.includes(text[selectionStart - 1]) && selectionStart > 0) {
|
||||
selectionStart--;
|
||||
}
|
||||
|
||||
// seek forward to find end
|
||||
while (!delimiters.includes(text[selectionEnd]) && selectionEnd < text.length) {
|
||||
selectionEnd++;
|
||||
}
|
||||
|
||||
target.setSelectionRange(selectionStart, selectionEnd);
|
||||
return true;
|
||||
// Find opening parenthesis around current cursor
|
||||
const before = text.substring(0, selectionStart);
|
||||
let beforeParen = before.lastIndexOf(OPEN);
|
||||
if (beforeParen == -1) return false;
|
||||
let beforeParenClose = before.lastIndexOf(CLOSE);
|
||||
while (beforeParenClose !== -1 && beforeParenClose > beforeParen) {
|
||||
beforeParen = before.lastIndexOf(OPEN, beforeParen - 1);
|
||||
beforeParenClose = before.lastIndexOf(CLOSE, beforeParenClose - 1);
|
||||
}
|
||||
|
||||
// If the user hasn't selected anything, let's select their current parenthesis block or word
|
||||
if (!selectCurrentParenthesisBlock('<', '>') && !selectCurrentParenthesisBlock('(', ')')) {
|
||||
selectCurrentWord();
|
||||
// Find closing parenthesis around current cursor
|
||||
const after = text.substring(selectionStart);
|
||||
let afterParen = after.indexOf(CLOSE);
|
||||
if (afterParen == -1) return false;
|
||||
let afterParenOpen = after.indexOf(OPEN);
|
||||
while (afterParenOpen !== -1 && afterParen > afterParenOpen) {
|
||||
afterParen = after.indexOf(CLOSE, afterParen + 1);
|
||||
afterParenOpen = after.indexOf(OPEN, afterParenOpen + 1);
|
||||
}
|
||||
if (beforeParen === -1 || afterParen === -1) return false;
|
||||
|
||||
// Set the selection to the text between the parenthesis
|
||||
const parenContent = text.substring(
|
||||
beforeParen + 1,
|
||||
selectionStart + afterParen
|
||||
);
|
||||
const lastColon = parenContent.lastIndexOf(":");
|
||||
selectionStart = beforeParen + 1;
|
||||
selectionEnd = selectionStart + lastColon;
|
||||
target.setSelectionRange(selectionStart, selectionEnd);
|
||||
return true;
|
||||
}
|
||||
|
||||
function selectCurrentWord() {
|
||||
if (selectionStart !== selectionEnd) return false;
|
||||
const delimiters = opts.keyedit_delimiters + " \r\n\t";
|
||||
|
||||
// seek backward until to find beggining
|
||||
while (
|
||||
!delimiters.includes(text[selectionStart - 1]) &&
|
||||
selectionStart > 0
|
||||
) {
|
||||
selectionStart--;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
var closeCharacter = ')'
|
||||
var delta = opts.keyedit_precision_attention
|
||||
|
||||
if (selectionStart > 0 && text[selectionStart - 1] == '<'){
|
||||
closeCharacter = '>'
|
||||
delta = opts.keyedit_precision_extra
|
||||
} else if (selectionStart == 0 || text[selectionStart - 1] != "(") {
|
||||
|
||||
// do not include spaces at the end
|
||||
while(selectionEnd > selectionStart && text[selectionEnd-1] == ' '){
|
||||
selectionEnd -= 1;
|
||||
}
|
||||
if(selectionStart == selectionEnd){
|
||||
return
|
||||
}
|
||||
|
||||
text = text.slice(0, selectionStart) + "(" + text.slice(selectionStart, selectionEnd) + ":1.0)" + text.slice(selectionEnd);
|
||||
|
||||
selectionStart += 1;
|
||||
selectionEnd += 1;
|
||||
// seek forward to find end
|
||||
while (
|
||||
!delimiters.includes(text[selectionEnd]) &&
|
||||
selectionEnd < text.length
|
||||
) {
|
||||
selectionEnd++;
|
||||
}
|
||||
|
||||
var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1;
|
||||
var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end));
|
||||
if (isNaN(weight)) return;
|
||||
target.setSelectionRange(selectionStart, selectionEnd);
|
||||
return true;
|
||||
}
|
||||
|
||||
weight += isPlus ? delta : -delta;
|
||||
weight = parseFloat(weight.toPrecision(12));
|
||||
if(String(weight).length == 1) weight += ".0"
|
||||
// If the user hasn't selected anything, let's select their current parenthesis block or word
|
||||
if (
|
||||
!selectCurrentParenthesisBlock("<", ">") &&
|
||||
!selectCurrentParenthesisBlock("(", ")")
|
||||
) {
|
||||
selectCurrentWord();
|
||||
}
|
||||
|
||||
if (closeCharacter == ')' && weight == 1) {
|
||||
text = text.slice(0, selectionStart - 1) + text.slice(selectionStart, selectionEnd) + text.slice(selectionEnd + 5);
|
||||
selectionStart--;
|
||||
selectionEnd--;
|
||||
} else {
|
||||
text = text.slice(0, selectionEnd + 1) + weight + text.slice(selectionEnd + 1 + end - 1);
|
||||
event.preventDefault();
|
||||
|
||||
var closeCharacter = ")";
|
||||
var delta = opts.keyedit_precision_attention;
|
||||
|
||||
if (selectionStart > 0 && text[selectionStart - 1] == "<") {
|
||||
closeCharacter = ">";
|
||||
delta = opts.keyedit_precision_extra;
|
||||
} else if (selectionStart == 0 || text[selectionStart - 1] != "(") {
|
||||
// do not include spaces at the end
|
||||
while (selectionEnd > selectionStart && text[selectionEnd - 1] == " ") {
|
||||
selectionEnd -= 1;
|
||||
}
|
||||
if (selectionStart == selectionEnd) {
|
||||
return;
|
||||
}
|
||||
|
||||
target.focus();
|
||||
target.value = text;
|
||||
target.selectionStart = selectionStart;
|
||||
target.selectionEnd = selectionEnd;
|
||||
text =
|
||||
text.slice(0, selectionStart) +
|
||||
"(" +
|
||||
text.slice(selectionStart, selectionEnd) +
|
||||
":1.0)" +
|
||||
text.slice(selectionEnd);
|
||||
|
||||
updateInput(target)
|
||||
selectionStart += 1;
|
||||
selectionEnd += 1;
|
||||
}
|
||||
|
||||
var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1;
|
||||
var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end));
|
||||
if (isNaN(weight)) return;
|
||||
|
||||
weight += isPlus ? delta : -delta;
|
||||
weight = parseFloat(weight.toPrecision(12));
|
||||
if (String(weight).length == 1) weight += ".0";
|
||||
|
||||
if (closeCharacter == ")" && weight == 1) {
|
||||
text =
|
||||
text.slice(0, selectionStart - 1) +
|
||||
text.slice(selectionStart, selectionEnd) +
|
||||
text.slice(selectionEnd + 5);
|
||||
selectionStart--;
|
||||
selectionEnd--;
|
||||
} else {
|
||||
text =
|
||||
text.slice(0, selectionEnd + 1) +
|
||||
weight +
|
||||
text.slice(selectionEnd + 1 + end - 1);
|
||||
}
|
||||
|
||||
target.focus();
|
||||
target.value = text;
|
||||
target.selectionStart = selectionStart;
|
||||
target.selectionEnd = selectionEnd;
|
||||
|
||||
updateInput(target);
|
||||
}
|
||||
|
||||
addEventListener('keydown', (event) => {
|
||||
keyupEditAttention(event);
|
||||
addEventListener("keydown", (event) => {
|
||||
keyupEditAttention(event);
|
||||
});
|
||||
|
||||
+71
-54
@@ -1,71 +1,88 @@
|
||||
function extensions_apply(_disabled_list, _update_list, disable_all) {
|
||||
var disable = [];
|
||||
var update = [];
|
||||
|
||||
function extensions_apply(_disabled_list, _update_list, disable_all){
|
||||
var disable = []
|
||||
var update = []
|
||||
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 input[type="checkbox"]').forEach(function(x){
|
||||
if(x.name.startsWith("enable_") && ! x.checked)
|
||||
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();
|
||||
|
||||
restart_reload()
|
||||
|
||||
return [JSON.stringify(disable), JSON.stringify(update), disable_all]
|
||||
return [JSON.stringify(disable), JSON.stringify(update), disable_all];
|
||||
}
|
||||
|
||||
function extensions_check(){
|
||||
var disable = []
|
||||
function extensions_check() {
|
||||
var disable = [];
|
||||
|
||||
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 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)]
|
||||
return [id, JSON.stringify(disable)];
|
||||
}
|
||||
|
||||
function install_extension_from_index(button, url){
|
||||
button.disabled = "disabled"
|
||||
button.value = "Installing..."
|
||||
function install_extension_from_index(button, url) {
|
||||
button.disabled = "disabled";
|
||||
button.value = "Installing...";
|
||||
|
||||
var textarea = gradioApp().querySelector('#extension_to_install textarea')
|
||||
textarea.value = url
|
||||
updateInput(textarea)
|
||||
var textarea = gradioApp().querySelector("#extension_to_install textarea");
|
||||
textarea.value = url;
|
||||
updateInput(textarea);
|
||||
|
||||
gradioApp().querySelector('#install_extension_button').click()
|
||||
gradioApp().querySelector("#install_extension_button").click();
|
||||
}
|
||||
|
||||
function config_state_confirm_restore(_, config_state_name, config_restore_type) {
|
||||
if (config_state_name == "Current") {
|
||||
return [false, config_state_name, config_restore_type];
|
||||
}
|
||||
let restored = "";
|
||||
if (config_restore_type == "extensions") {
|
||||
restored = "all saved extension versions";
|
||||
} else if (config_restore_type == "webui") {
|
||||
restored = "the webui version";
|
||||
} else {
|
||||
restored = "the webui version and all saved extension versions";
|
||||
}
|
||||
let confirmed = confirm("Are you sure you want to restore from this state?\nThis will reset " + restored + ".");
|
||||
if (confirmed) {
|
||||
restart_reload();
|
||||
gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){
|
||||
x.innerHTML = "Loading..."
|
||||
})
|
||||
}
|
||||
return [confirmed, config_state_name, config_restore_type];
|
||||
function config_state_confirm_restore(
|
||||
_,
|
||||
config_state_name,
|
||||
config_restore_type
|
||||
) {
|
||||
if (config_state_name == "Current") {
|
||||
return [false, config_state_name, config_restore_type];
|
||||
}
|
||||
let restored = "";
|
||||
if (config_restore_type == "extensions") {
|
||||
restored = "all saved extension versions";
|
||||
} else if (config_restore_type == "webui") {
|
||||
restored = "the webui version";
|
||||
} else {
|
||||
restored = "the webui version and all saved extension versions";
|
||||
}
|
||||
let confirmed = confirm(
|
||||
"Are you sure you want to restore from this state?\nThis will reset " +
|
||||
restored +
|
||||
"."
|
||||
);
|
||||
if (confirmed) {
|
||||
restart_reload();
|
||||
gradioApp()
|
||||
.querySelectorAll("#extensions .extension_status")
|
||||
.forEach(function (x) {
|
||||
x.innerHTML = "Loading...";
|
||||
});
|
||||
}
|
||||
return [confirmed, config_state_name, config_restore_type];
|
||||
}
|
||||
|
||||
+200
-152
@@ -1,194 +1,242 @@
|
||||
function setupExtraNetworksForTab(tabname) {
|
||||
gradioApp()
|
||||
.querySelector("#" + tabname + "_extra_tabs")
|
||||
.classList.add("extra-networks");
|
||||
|
||||
function setupExtraNetworksForTab(tabname){
|
||||
gradioApp().querySelector('#'+tabname+'_extra_tabs').classList.add('extra-networks')
|
||||
var tabs = gradioApp().querySelector("#" + tabname + "_extra_tabs > div");
|
||||
var search = gradioApp().querySelector(
|
||||
"#" + tabname + "_extra_search textarea"
|
||||
);
|
||||
var refresh = gradioApp().getElementById(tabname + "_extra_refresh");
|
||||
|
||||
var tabs = gradioApp().querySelector('#'+tabname+'_extra_tabs > div')
|
||||
var search = gradioApp().querySelector('#'+tabname+'_extra_search textarea')
|
||||
var refresh = gradioApp().getElementById(tabname+'_extra_refresh')
|
||||
|
||||
let clear = document.createElement("div");
|
||||
clear.id = tabname+'_extra_clear';
|
||||
clear.classList.add("token-remove", "remove-all", "svelte-a6vu2r", "hide");
|
||||
clear.title = "Clear search";
|
||||
clear.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>'
|
||||
|
||||
search.classList.add('search')
|
||||
let clear = document.createElement("div");
|
||||
clear.id = tabname + "_extra_clear";
|
||||
clear.classList.add("token-remove", "remove-all", "svelte-a6vu2r", "hide");
|
||||
clear.title = "Clear search";
|
||||
clear.innerHTML =
|
||||
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>';
|
||||
|
||||
tabs.appendChild(search)
|
||||
tabs.appendChild(clear)
|
||||
tabs.appendChild(refresh)
|
||||
|
||||
clear.addEventListener("click", function(evt){
|
||||
search.value = "";
|
||||
updateInput(search);
|
||||
})
|
||||
|
||||
search.addEventListener("input", function(evt){
|
||||
searchTerm = search.value.toLowerCase()
|
||||
search.classList.add("search");
|
||||
|
||||
gradioApp().querySelectorAll('#'+tabname+'_extra_tabs div.card').forEach(function(elem){
|
||||
var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase()
|
||||
elem.parentElement.style.display = text.indexOf(searchTerm) == -1 ? "none" : ""
|
||||
})
|
||||
});
|
||||
tabs.appendChild(search);
|
||||
tabs.appendChild(clear);
|
||||
tabs.appendChild(refresh);
|
||||
|
||||
clear.addEventListener("click", function (evt) {
|
||||
search.value = "";
|
||||
updateInput(search);
|
||||
});
|
||||
|
||||
search.addEventListener("input", function (evt) {
|
||||
searchTerm = search.value.toLowerCase();
|
||||
|
||||
gradioApp()
|
||||
.querySelectorAll("#" + tabname + "_extra_tabs div.card")
|
||||
.forEach(function (elem) {
|
||||
var text =
|
||||
elem.querySelector(".name").textContent.toLowerCase() +
|
||||
" " +
|
||||
elem.querySelector(".search_term").textContent.toLowerCase();
|
||||
elem.parentElement.style.display =
|
||||
text.indexOf(searchTerm) == -1 ? "none" : "";
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var activePromptTextarea = {};
|
||||
|
||||
function setupExtraNetworks(){
|
||||
setupExtraNetworksForTab('txt2img')
|
||||
setupExtraNetworksForTab('img2img')
|
||||
function setupExtraNetworks() {
|
||||
setupExtraNetworksForTab("txt2img");
|
||||
setupExtraNetworksForTab("img2img");
|
||||
|
||||
function registerPrompt(tabname, id){
|
||||
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
|
||||
function registerPrompt(tabname, id) {
|
||||
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
|
||||
|
||||
if (! activePromptTextarea[tabname]){
|
||||
activePromptTextarea[tabname] = textarea
|
||||
}
|
||||
|
||||
textarea.addEventListener("focus", function(){
|
||||
activePromptTextarea[tabname] = textarea;
|
||||
});
|
||||
if (!activePromptTextarea[tabname]) {
|
||||
activePromptTextarea[tabname] = textarea;
|
||||
}
|
||||
|
||||
registerPrompt('txt2img', 'txt2img_prompt')
|
||||
registerPrompt('txt2img', 'txt2img_neg_prompt')
|
||||
registerPrompt('img2img', 'img2img_prompt')
|
||||
registerPrompt('img2img', 'img2img_neg_prompt')
|
||||
textarea.addEventListener("focus", function () {
|
||||
activePromptTextarea[tabname] = textarea;
|
||||
});
|
||||
}
|
||||
|
||||
registerPrompt("txt2img", "txt2img_prompt");
|
||||
registerPrompt("txt2img", "txt2img_neg_prompt");
|
||||
registerPrompt("img2img", "img2img_prompt");
|
||||
registerPrompt("img2img", "img2img_neg_prompt");
|
||||
}
|
||||
|
||||
onUiLoaded(setupExtraNetworks)
|
||||
onUiLoaded(setupExtraNetworks);
|
||||
|
||||
var re_extranet = /<([^:]+:[^:]+):[\d\.]+>/;
|
||||
var re_extranet = /<([^:]+:[^:]+):[\d\.]+>/;
|
||||
var re_extranet_g = /\s+<([^:]+:[^:]+):[\d\.]+>/g;
|
||||
|
||||
function tryToRemoveExtraNetworkFromPrompt(textarea, text){
|
||||
var m = text.match(re_extranet)
|
||||
if(! m) return false
|
||||
function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
|
||||
var m = text.match(re_extranet);
|
||||
if (!m) return false;
|
||||
|
||||
var partToSearch = m[1]
|
||||
var replaced = false
|
||||
var newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found){
|
||||
m = found.match(re_extranet);
|
||||
if(m[1] == partToSearch){
|
||||
replaced = true;
|
||||
return ""
|
||||
}
|
||||
return found;
|
||||
})
|
||||
|
||||
if(replaced){
|
||||
textarea.value = newTextareaText
|
||||
return true;
|
||||
var partToSearch = m[1];
|
||||
var replaced = false;
|
||||
var newTextareaText = textarea.value.replaceAll(
|
||||
re_extranet_g,
|
||||
function (found) {
|
||||
m = found.match(re_extranet);
|
||||
if (m[1] == partToSearch) {
|
||||
replaced = true;
|
||||
return "";
|
||||
}
|
||||
return found;
|
||||
}
|
||||
);
|
||||
|
||||
return false
|
||||
if (replaced) {
|
||||
textarea.value = newTextareaText;
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function cardClicked(tabname, textToAdd, allowNegativePrompt){
|
||||
var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea")
|
||||
function cardClicked(tabname, textToAdd, allowNegativePrompt) {
|
||||
var textarea = allowNegativePrompt
|
||||
? activePromptTextarea[tabname]
|
||||
: gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
|
||||
|
||||
if(! tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)){
|
||||
textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd
|
||||
}
|
||||
if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) {
|
||||
textarea.value =
|
||||
textarea.value + opts.extra_networks_add_text_separator + textToAdd;
|
||||
}
|
||||
|
||||
updateInput(textarea)
|
||||
updateInput(textarea);
|
||||
}
|
||||
|
||||
function saveCardPreview(event, tabname, filename){
|
||||
var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea')
|
||||
var button = gradioApp().getElementById(tabname + '_save_preview')
|
||||
function saveCardPreview(event, tabname, filename) {
|
||||
var textarea = gradioApp().querySelector(
|
||||
"#" + tabname + "_preview_filename > label > textarea"
|
||||
);
|
||||
var button = gradioApp().getElementById(tabname + "_save_preview");
|
||||
|
||||
textarea.value = filename
|
||||
updateInput(textarea)
|
||||
textarea.value = filename;
|
||||
updateInput(textarea);
|
||||
|
||||
button.click()
|
||||
button.click();
|
||||
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
var search = gradioApp().querySelector(
|
||||
"#" + tabname + "_extra_tabs textarea"
|
||||
);
|
||||
|
||||
setTimeout(function () {
|
||||
search.value = search.value.toLowerCase();
|
||||
updateInput(search);
|
||||
}, 1000);
|
||||
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function extraNetworksSearchButton(tabs_id, event){
|
||||
function extraNetworksSearchButton(tabs_id, event) {
|
||||
var searchTextarea = gradioApp().querySelector(
|
||||
"#" + tabs_id + " > div > textarea"
|
||||
);
|
||||
var button = event.target;
|
||||
var text = button.classList.contains("search-all")
|
||||
? ""
|
||||
: button.textContent.trim();
|
||||
//text = event.target.selectedIndex == 0 ? "" : event.target.options[event.target.selectedIndex].text;
|
||||
|
||||
var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea')
|
||||
var button = event.target
|
||||
var text = button.classList.contains("search-all") ? "" : button.textContent.trim()
|
||||
//text = event.target.selectedIndex == 0 ? "" : event.target.options[event.target.selectedIndex].text;
|
||||
|
||||
searchTextarea.value = text
|
||||
updateInput(searchTextarea)
|
||||
searchTextarea.value = text;
|
||||
updateInput(searchTextarea);
|
||||
}
|
||||
|
||||
var globalPopup = null;
|
||||
var globalPopupInner = null;
|
||||
function popup(contents){
|
||||
if(! globalPopup){
|
||||
globalPopup = document.createElement('div')
|
||||
globalPopup.onclick = function(){ globalPopup.style.display = "none"; };
|
||||
globalPopup.classList.add('global-popup');
|
||||
|
||||
var close = document.createElement('div')
|
||||
close.classList.add('global-popup-close');
|
||||
close.onclick = function(){ globalPopup.style.display = "none"; };
|
||||
close.title = "Close";
|
||||
globalPopup.appendChild(close)
|
||||
|
||||
globalPopupInner = document.createElement('div')
|
||||
globalPopupInner.onclick = function(event){ event.stopPropagation(); return false; };
|
||||
globalPopupInner.classList.add('global-popup-inner');
|
||||
globalPopup.appendChild(globalPopupInner)
|
||||
|
||||
gradioApp().appendChild(globalPopup);
|
||||
}
|
||||
|
||||
globalPopupInner.innerHTML = '';
|
||||
globalPopupInner.appendChild(contents);
|
||||
|
||||
globalPopup.style.display = "flex";
|
||||
}
|
||||
|
||||
function extraNetworksShowMetadata(text){
|
||||
var elem = document.createElement('pre')
|
||||
elem.classList.add('popup-metadata');
|
||||
elem.textContent = text;
|
||||
|
||||
popup(elem);
|
||||
}
|
||||
|
||||
function requestGet(url, data, handler, errorHandler){
|
||||
var xhr = new XMLHttpRequest();
|
||||
var args = Object.keys(data).map(function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }).join('&')
|
||||
xhr.open("GET", url + "?" + args, true);
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
var js = JSON.parse(xhr.responseText);
|
||||
handler(js)
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
errorHandler()
|
||||
}
|
||||
} else{
|
||||
errorHandler()
|
||||
}
|
||||
}
|
||||
function popup(contents) {
|
||||
if (!globalPopup) {
|
||||
globalPopup = document.createElement("div");
|
||||
globalPopup.onclick = function () {
|
||||
globalPopup.style.display = "none";
|
||||
};
|
||||
var js = JSON.stringify(data);
|
||||
xhr.send(js);
|
||||
globalPopup.classList.add("global-popup");
|
||||
|
||||
var close = document.createElement("div");
|
||||
close.classList.add("global-popup-close");
|
||||
close.onclick = function () {
|
||||
globalPopup.style.display = "none";
|
||||
};
|
||||
close.title = "Close";
|
||||
globalPopup.appendChild(close);
|
||||
|
||||
globalPopupInner = document.createElement("div");
|
||||
globalPopupInner.onclick = function (event) {
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
};
|
||||
globalPopupInner.classList.add("global-popup-inner");
|
||||
globalPopup.appendChild(globalPopupInner);
|
||||
|
||||
gradioApp().appendChild(globalPopup);
|
||||
}
|
||||
|
||||
globalPopupInner.innerHTML = "";
|
||||
globalPopupInner.appendChild(contents);
|
||||
|
||||
globalPopup.style.display = "flex";
|
||||
}
|
||||
|
||||
function extraNetworksRequestMetadata(event, extraPage, cardName){
|
||||
var showError = function(){ extraNetworksShowMetadata("there was an error getting metadata"); }
|
||||
function extraNetworksShowMetadata(text) {
|
||||
var elem = document.createElement("pre");
|
||||
elem.classList.add("popup-metadata");
|
||||
elem.textContent = text;
|
||||
|
||||
requestGet("./sd_extra_networks/metadata", {"page": extraPage, "item": cardName}, function(data){
|
||||
if(data && data.metadata){
|
||||
extraNetworksShowMetadata(data.metadata)
|
||||
} else{
|
||||
showError()
|
||||
popup(elem);
|
||||
}
|
||||
|
||||
function requestGet(url, data, handler, errorHandler) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var args = Object.keys(data)
|
||||
.map(function (k) {
|
||||
return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
|
||||
})
|
||||
.join("&");
|
||||
xhr.open("GET", url + "?" + args, true);
|
||||
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
var js = JSON.parse(xhr.responseText);
|
||||
handler(js);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
errorHandler();
|
||||
}
|
||||
}, showError)
|
||||
|
||||
event.stopPropagation()
|
||||
} else {
|
||||
errorHandler();
|
||||
}
|
||||
}
|
||||
};
|
||||
var js = JSON.stringify(data);
|
||||
xhr.send(js);
|
||||
}
|
||||
|
||||
function extraNetworksRequestMetadata(event, extraPage, cardName) {
|
||||
var showError = function () {
|
||||
extraNetworksShowMetadata("there was an error getting metadata");
|
||||
};
|
||||
|
||||
requestGet(
|
||||
"./sd_extra_networks/metadata",
|
||||
{ page: extraPage, item: cardName },
|
||||
function (data) {
|
||||
if (data && data.metadata) {
|
||||
extraNetworksShowMetadata(data.metadata);
|
||||
} else {
|
||||
showError();
|
||||
}
|
||||
},
|
||||
showError
|
||||
);
|
||||
|
||||
event.stopPropagation();
|
||||
}
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
// 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;
|
||||
onUiUpdate(function(){
|
||||
if (!txt2img_gallery) {
|
||||
txt2img_gallery = attachGalleryListeners("txt2img")
|
||||
}
|
||||
if (!img2img_gallery) {
|
||||
img2img_gallery = attachGalleryListeners("img2img")
|
||||
}
|
||||
/*
|
||||
let txt2img_gallery,
|
||||
img2img_gallery,
|
||||
modal = undefined;
|
||||
onUiUpdate(function () {
|
||||
if (!txt2img_gallery) {
|
||||
txt2img_gallery = attachGalleryListeners("txt2img");
|
||||
}
|
||||
if (!img2img_gallery) {
|
||||
img2img_gallery = attachGalleryListeners("img2img");
|
||||
}
|
||||
/*
|
||||
if (!modal) {
|
||||
modal = gradioApp().getElementById('lightboxModal')
|
||||
modalObserver.observe(modal, { attributes : true, attributeFilter : ['style'] });
|
||||
@@ -16,20 +18,34 @@ onUiUpdate(function(){
|
||||
*/
|
||||
});
|
||||
|
||||
let modalObserver = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutationRecord) {
|
||||
let selectedTab = gradioApp().querySelector('#tabs div button.selected')?.innerText
|
||||
if (mutationRecord.target.style.display === 'none' && (selectedTab === 'txt2img' || selectedTab === 'img2img'))
|
||||
gradioApp().getElementById(selectedTab+"_generation_info_button")?.click()
|
||||
});
|
||||
let modalObserver = new MutationObserver(function (mutations) {
|
||||
mutations.forEach(function (mutationRecord) {
|
||||
let selectedTab = gradioApp().querySelector(
|
||||
"#tabs div button.selected"
|
||||
)?.innerText;
|
||||
if (
|
||||
mutationRecord.target.style.display === "none" &&
|
||||
(selectedTab === "txt2img" || selectedTab === "img2img")
|
||||
)
|
||||
gradioApp()
|
||||
.getElementById(selectedTab + "_generation_info_button")
|
||||
?.click();
|
||||
});
|
||||
});
|
||||
|
||||
function attachGalleryListeners(tab_name) {
|
||||
var gallery = gradioApp().querySelector('#'+tab_name+'_gallery')
|
||||
gallery?.addEventListener('click', () => gradioApp().getElementById(tab_name+"_generation_info_button")?.click());
|
||||
gallery?.addEventListener('keydown', (e) => {
|
||||
if (e.keyCode == 37 || e.keyCode == 39) // left or right arrow
|
||||
gradioApp().getElementById(tab_name+"_generation_info_button").click()
|
||||
});
|
||||
return gallery;
|
||||
var gallery = gradioApp().querySelector("#" + tab_name + "_gallery");
|
||||
gallery?.addEventListener("click", () =>
|
||||
gradioApp()
|
||||
.getElementById(tab_name + "_generation_info_button")
|
||||
?.click()
|
||||
);
|
||||
gallery?.addEventListener("keydown", (e) => {
|
||||
if (e.keyCode == 37 || e.keyCode == 39)
|
||||
// left or right arrow
|
||||
gradioApp()
|
||||
.getElementById(tab_name + "_generation_info_button")
|
||||
.click();
|
||||
});
|
||||
return gallery;
|
||||
}
|
||||
|
||||
+31
-13
@@ -1,18 +1,36 @@
|
||||
function onCalcResolutionHires(
|
||||
enable,
|
||||
width,
|
||||
height,
|
||||
hr_scale,
|
||||
hr_resize_x,
|
||||
hr_resize_y
|
||||
) {
|
||||
function setInactive(elem, inactive) {
|
||||
elem.classList.toggle("inactive", !!inactive);
|
||||
}
|
||||
|
||||
function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y){
|
||||
function setInactive(elem, inactive){
|
||||
elem.classList.toggle('inactive', !!inactive)
|
||||
}
|
||||
var hrUpscaleBy = gradioApp().getElementById("txt2img_hr_scale");
|
||||
var hrResizeX = gradioApp().getElementById("txt2img_hr_resize_x");
|
||||
var hrResizeY = gradioApp().getElementById("txt2img_hr_resize_y");
|
||||
|
||||
var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale')
|
||||
var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x')
|
||||
var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y')
|
||||
gradioApp().getElementById("txt2img_hires_fix_row2").style.display =
|
||||
opts.use_old_hires_fix_width_height ? "none" : "block";
|
||||
|
||||
gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "block"
|
||||
setInactive(
|
||||
hrUpscaleBy,
|
||||
opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0
|
||||
);
|
||||
setInactive(
|
||||
hrResizeX,
|
||||
opts.use_old_hires_fix_width_height || hr_resize_x == 0
|
||||
);
|
||||
setInactive(
|
||||
hrResizeY,
|
||||
opts.use_old_hires_fix_width_height || hr_resize_y == 0
|
||||
);
|
||||
|
||||
setInactive(hrUpscaleBy, opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0)
|
||||
setInactive(hrResizeX, opts.use_old_hires_fix_width_height || hr_resize_x == 0)
|
||||
setInactive(hrResizeY, opts.use_old_hires_fix_width_height || hr_resize_y == 0)
|
||||
|
||||
return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y]
|
||||
setTimeout(function () {
|
||||
return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y];
|
||||
}, 100);
|
||||
}
|
||||
|
||||
+221
-191
@@ -3,7 +3,7 @@
|
||||
* @see https://github.com/gradio-app/gradio/issues/1721
|
||||
*/
|
||||
|
||||
/*
|
||||
/*
|
||||
window.addEventListener( 'resize', () => imageMaskResize());
|
||||
|
||||
function imageMaskResize() {
|
||||
@@ -47,200 +47,236 @@ function imageMaskResize() {
|
||||
onUiUpdate(() => imageMaskResize());
|
||||
*/
|
||||
|
||||
onUiLoaded(function(){
|
||||
const color_box = '<input type="color">';
|
||||
const brush_size = '<input type="range" min="0.75" max="110.0">';
|
||||
let is_drawing = false;
|
||||
let img_src = [];
|
||||
let spl_instances = [];
|
||||
let spl_pan_instances = [];
|
||||
let img2img_tab_index = 0;
|
||||
let intervalLastUIUpdate;
|
||||
const container = gradioApp().querySelector(".gradio-container");
|
||||
const observer = new MutationObserver(() =>
|
||||
gradioApp().querySelectorAll('div[data-testid="image"]').forEach(function (elem, i){
|
||||
let img_parent = elem.parentElement.querySelector('div[data-testid="image"] > div');
|
||||
let img = img_parent.querySelector('img');
|
||||
if(img){
|
||||
if(img_src[i] != img.src){
|
||||
let tool_buttons = img_parent.querySelectorAll('button');
|
||||
//console.log(tool_buttons);
|
||||
if(tool_buttons.length > 2){
|
||||
img_parent.style.visibility = "hidden";
|
||||
|
||||
if(intervalLastUIUpdate != null) clearInterval(intervalLastUIUpdate);
|
||||
intervalLastUIUpdate = setInterval(function() {
|
||||
clearInterval(intervalLastUIUpdate);
|
||||
img_parent.addEventListener('mouseup', function(e){
|
||||
img_src[i] = img.src;
|
||||
})
|
||||
|
||||
let spl_parent = elem.parentElement;
|
||||
let spl;
|
||||
let spl_pan;
|
||||
let isPanning;
|
||||
let splid;
|
||||
|
||||
if(spl_parent.className != "spl-pane"){
|
||||
spl = new Spotlight();
|
||||
spl.init(spl_parent, "-"+spl_parent.id);
|
||||
|
||||
spl.addControl("undo", spl_undo_handler);
|
||||
spl_pan = spl.addControl("pan", spl_pan_handler);
|
||||
spl.addControl("brush", spl_brush_handler, brush_size);
|
||||
if(tool_buttons.length == 5){
|
||||
spl.addControl("color", spl_color_handler, color_box);
|
||||
}
|
||||
spl.addControl("clear",spl_clear_handler);
|
||||
|
||||
spl_instances[i] = spl;
|
||||
spl_pan_instances[i] = spl_pan;
|
||||
|
||||
}else{
|
||||
spl = spl_instances[i];
|
||||
spl_pan = spl_pan_instances[i];
|
||||
}
|
||||
|
||||
img_src[i] = img.src;
|
||||
//console.log("NEWIMAGE");
|
||||
onUiLoaded(function () {
|
||||
const color_box = '<input type="color">';
|
||||
const brush_size = '<input type="range" min="0.75" max="110.0">';
|
||||
let is_drawing = false;
|
||||
let img_src = [];
|
||||
let spl_instances = [];
|
||||
let spl_pan_instances = [];
|
||||
let img2img_tab_index = 0;
|
||||
let intervalLastUIUpdate;
|
||||
const container = gradioApp().querySelector(".gradio-container");
|
||||
const observer = new MutationObserver(() =>
|
||||
gradioApp()
|
||||
.querySelectorAll('div[data-testid="image"]')
|
||||
.forEach(function (elem, i) {
|
||||
let img_parent = elem.parentElement.querySelector(
|
||||
'div[data-testid="image"] > div'
|
||||
);
|
||||
let img = img_parent.querySelector("img");
|
||||
if (img) {
|
||||
if (img_src[i] != img.src) {
|
||||
let tool_buttons = img_parent.querySelectorAll("button");
|
||||
//console.log(tool_buttons);
|
||||
if (tool_buttons.length > 2) {
|
||||
img_parent.style.visibility = "hidden";
|
||||
|
||||
function spl_undo_handler(e) {
|
||||
tool_buttons[0].click();
|
||||
}
|
||||
|
||||
function spl_clear_handler(e){
|
||||
tool_buttons[2].click();
|
||||
spl.panzoom(false);
|
||||
img_parent.classList.remove("no-point-events");
|
||||
img_parent.parentElement.classList.remove("move");
|
||||
document.removeEventListener('wheel', preventDefault, false);
|
||||
setTimeout(function() {
|
||||
spl.close(false, true);
|
||||
img_parent.style.flexGrow = "1";
|
||||
img_src[i] = "";
|
||||
elem.style.transform = "none";
|
||||
}, 200);
|
||||
|
||||
}
|
||||
|
||||
function spl_color_handler(e){}
|
||||
function spl_brush_handler(e){}
|
||||
if (intervalLastUIUpdate != null)
|
||||
clearInterval(intervalLastUIUpdate);
|
||||
intervalLastUIUpdate = setInterval(function () {
|
||||
clearInterval(intervalLastUIUpdate);
|
||||
img_parent.addEventListener("mouseup", function (e) {
|
||||
img_src[i] = img.src;
|
||||
});
|
||||
|
||||
function preventDefault(e) {
|
||||
e = e || window.event
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault()
|
||||
}
|
||||
e.returnValue = false
|
||||
}
|
||||
let spl_parent = elem.parentElement;
|
||||
let spl;
|
||||
let spl_pan;
|
||||
let isPanning;
|
||||
let splid;
|
||||
|
||||
function pan_toggle(val, target){
|
||||
isPanning = val;
|
||||
target.classList.toggle("on", isPanning);
|
||||
spl.panzoom(val);
|
||||
|
||||
if(isPanning){
|
||||
img_parent.classList.add("no-point-events");
|
||||
img_parent.parentElement.classList.add("move");
|
||||
document.addEventListener('wheel', preventDefault, {passive: false});
|
||||
}else{
|
||||
img_parent.classList.remove("no-point-events");
|
||||
img_parent.parentElement.classList.remove("move");
|
||||
document.removeEventListener('wheel', preventDefault, false);
|
||||
}
|
||||
|
||||
}
|
||||
if (spl_parent.className != "spl-pane") {
|
||||
spl = new Spotlight();
|
||||
spl.init(spl_parent, "-" + spl_parent.id);
|
||||
|
||||
function spl_pan_handler(e){
|
||||
isPanning = !isPanning;
|
||||
pan_toggle(isPanning, this);
|
||||
}
|
||||
spl.addControl("undo", spl_undo_handler);
|
||||
spl_pan = spl.addControl("pan", spl_pan_handler);
|
||||
spl.addControl("brush", spl_brush_handler, brush_size);
|
||||
if (tool_buttons.length == 5) {
|
||||
spl.addControl("color", spl_color_handler, color_box);
|
||||
}
|
||||
spl.addControl("clear", spl_clear_handler);
|
||||
|
||||
function update_color(listener){
|
||||
let input_color = img_parent.querySelector("input[type='color']");
|
||||
let spl = img_parent.parentElement.parentElement.parentElement.parentElement.parentElement;
|
||||
let spl_color = spl.querySelector(".spl-color input[type='color']");
|
||||
spl_color.value = input_color.value;
|
||||
|
||||
if(listener){
|
||||
spl_color.addEventListener("input", function(ev) {
|
||||
input_color.value = ev.target.value;
|
||||
updateInput(input_color);
|
||||
pan_toggle(false, spl_pan);
|
||||
})
|
||||
}
|
||||
}
|
||||
spl_instances[i] = spl;
|
||||
spl_pan_instances[i] = spl_pan;
|
||||
} else {
|
||||
spl = spl_instances[i];
|
||||
spl_pan = spl_pan_instances[i];
|
||||
}
|
||||
|
||||
function update_brush(listener){
|
||||
let input_range = img_parent.querySelector("input[type='range']");
|
||||
let spl = img_parent.parentElement.parentElement.parentElement.parentElement.parentElement;
|
||||
let spl_brush = spl.querySelector(".spl-brush input[type='range']");
|
||||
spl_brush.value = input_range.value;
|
||||
|
||||
if(listener){
|
||||
spl_brush.addEventListener("input", function(ev) {
|
||||
input_range.value = ev.target.value;
|
||||
updateInput(input_range);
|
||||
})
|
||||
}
|
||||
}
|
||||
img_src[i] = img.src;
|
||||
//console.log("NEWIMAGE");
|
||||
|
||||
function init_drawing_tools(){
|
||||
|
||||
let input_color = img_parent.querySelector("input[type='color']");
|
||||
if(!input_color){
|
||||
let tbcolor = img_parent.querySelector("button[aria-label='Select brush color']");
|
||||
if(tbcolor){
|
||||
tbcolor.click();
|
||||
setTimeout(function() { update_color(true); }, 100);
|
||||
}
|
||||
}else{
|
||||
setTimeout(function() { update_color(false);}, 100);
|
||||
}
|
||||
|
||||
let input_range = img_parent.querySelector("input[type='range']");
|
||||
if(!input_range){
|
||||
let tbrange = img_parent.querySelector("button[aria-label='Use brush']");
|
||||
|
||||
if(tbrange){
|
||||
tbrange.click();
|
||||
setTimeout(function() { update_brush(true); }, 100);
|
||||
}
|
||||
}else{
|
||||
setTimeout(function() { update_brush(false);}, 100);
|
||||
}
|
||||
function spl_undo_handler(e) {
|
||||
tool_buttons[0].click();
|
||||
}
|
||||
|
||||
}
|
||||
function spl_clear_handler(e) {
|
||||
tool_buttons[2].click();
|
||||
spl.panzoom(false);
|
||||
img_parent.classList.remove("no-point-events");
|
||||
img_parent.parentElement.classList.remove("move");
|
||||
document.removeEventListener("wheel", preventDefault, false);
|
||||
setTimeout(function () {
|
||||
spl.close(false, true);
|
||||
img_parent.style.flexGrow = "1";
|
||||
img_src[i] = "";
|
||||
elem.style.transform = "none";
|
||||
}, 200);
|
||||
}
|
||||
|
||||
let w = img.naturalWidth;
|
||||
let h = img.naturalHeight;
|
||||
img_parent.style.width = `${w}px`;
|
||||
img_parent.style.height = `${h}px`;
|
||||
|
||||
spl.show([{
|
||||
media: "node",
|
||||
src: elem,
|
||||
//autohide: true,
|
||||
//control: ["pan","clear","undo","fullscreen","autofit","zoom-in","zoom-out","close"],
|
||||
class: "relative",
|
||||
}],
|
||||
);
|
||||
function spl_color_handler(e) {}
|
||||
function spl_brush_handler(e) {}
|
||||
|
||||
img_parent.style.flexGrow = "0";
|
||||
pan_toggle(false, spl_pan);
|
||||
spl.panzoom(false);
|
||||
setTimeout(function() { init_drawing_tools(); }, 500);
|
||||
img_parent.style.visibility = "visible";
|
||||
function preventDefault(e) {
|
||||
e = e || window.event;
|
||||
if (e.preventDefault) {
|
||||
e.preventDefault();
|
||||
}
|
||||
e.returnValue = false;
|
||||
}
|
||||
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
}));
|
||||
observer.observe(container, { childList: true, subtree: true });
|
||||
|
||||
|
||||
/* gradioApp().querySelectorAll('#mode_img2img > .tabitem').forEach(function (tb, ti){
|
||||
function pan_toggle(val, target) {
|
||||
isPanning = val;
|
||||
target.classList.toggle("on", isPanning);
|
||||
spl.panzoom(val);
|
||||
|
||||
if (isPanning) {
|
||||
img_parent.classList.add("no-point-events");
|
||||
img_parent.parentElement.classList.add("move");
|
||||
document.addEventListener("wheel", preventDefault, {
|
||||
passive: false,
|
||||
});
|
||||
} else {
|
||||
img_parent.classList.remove("no-point-events");
|
||||
img_parent.parentElement.classList.remove("move");
|
||||
document.removeEventListener(
|
||||
"wheel",
|
||||
preventDefault,
|
||||
false
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function spl_pan_handler(e) {
|
||||
isPanning = !isPanning;
|
||||
pan_toggle(isPanning, this);
|
||||
}
|
||||
|
||||
function update_color(listener) {
|
||||
let input_color = img_parent.querySelector(
|
||||
"input[type='color']"
|
||||
);
|
||||
let spl =
|
||||
img_parent.parentElement.parentElement.parentElement
|
||||
.parentElement.parentElement;
|
||||
let spl_color = spl.querySelector(
|
||||
".spl-color input[type='color']"
|
||||
);
|
||||
spl_color.value = input_color.value;
|
||||
|
||||
if (listener) {
|
||||
spl_color.addEventListener("input", function (ev) {
|
||||
input_color.value = ev.target.value;
|
||||
updateInput(input_color);
|
||||
pan_toggle(false, spl_pan);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function update_brush(listener) {
|
||||
let input_range = img_parent.querySelector(
|
||||
"input[type='range']"
|
||||
);
|
||||
let spl =
|
||||
img_parent.parentElement.parentElement.parentElement
|
||||
.parentElement.parentElement;
|
||||
let spl_brush = spl.querySelector(
|
||||
".spl-brush input[type='range']"
|
||||
);
|
||||
spl_brush.value = input_range.value;
|
||||
|
||||
if (listener) {
|
||||
spl_brush.addEventListener("input", function (ev) {
|
||||
input_range.value = ev.target.value;
|
||||
updateInput(input_range);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function init_drawing_tools() {
|
||||
let input_color = img_parent.querySelector(
|
||||
"input[type='color']"
|
||||
);
|
||||
if (!input_color) {
|
||||
let tbcolor = img_parent.querySelector(
|
||||
"button[aria-label='Select brush color']"
|
||||
);
|
||||
if (tbcolor) {
|
||||
tbcolor.click();
|
||||
setTimeout(function () {
|
||||
update_color(true);
|
||||
}, 100);
|
||||
}
|
||||
} else {
|
||||
setTimeout(function () {
|
||||
update_color(false);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
let input_range = img_parent.querySelector(
|
||||
"input[type='range']"
|
||||
);
|
||||
if (!input_range) {
|
||||
let tbrange = img_parent.querySelector(
|
||||
"button[aria-label='Use brush']"
|
||||
);
|
||||
|
||||
if (tbrange) {
|
||||
tbrange.click();
|
||||
setTimeout(function () {
|
||||
update_brush(true);
|
||||
}, 100);
|
||||
}
|
||||
} else {
|
||||
setTimeout(function () {
|
||||
update_brush(false);
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
let w = img.naturalWidth;
|
||||
let h = img.naturalHeight;
|
||||
img_parent.style.width = `${w}px`;
|
||||
img_parent.style.height = `${h}px`;
|
||||
|
||||
spl.show([
|
||||
{
|
||||
media: "node",
|
||||
src: elem,
|
||||
//autohide: true,
|
||||
//control: ["pan","clear","undo","fullscreen","autofit","zoom-in","zoom-out","close"],
|
||||
class: "relative",
|
||||
},
|
||||
]);
|
||||
|
||||
img_parent.style.flexGrow = "0";
|
||||
pan_toggle(false, spl_pan);
|
||||
spl.panzoom(false);
|
||||
setTimeout(function () {
|
||||
init_drawing_tools();
|
||||
}, 500);
|
||||
img_parent.style.visibility = "visible";
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
);
|
||||
observer.observe(container, { childList: true, subtree: true });
|
||||
|
||||
/* gradioApp().querySelectorAll('#mode_img2img > .tabitem').forEach(function (tb, ti){
|
||||
tb.querySelectorAll('[id^="img2img_copy_to_"] > button').forEach(function (btn, bi){
|
||||
|
||||
btn.addEventListener("click", function(e) {
|
||||
@@ -258,10 +294,7 @@ onUiLoaded(function(){
|
||||
})
|
||||
|
||||
*/
|
||||
|
||||
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
/*
|
||||
let intervalLastUIUpdate;
|
||||
@@ -305,6 +338,3 @@ onUiUpdate(function() {
|
||||
if(intervalLastUIUpdate != null) clearInterval(intervalLastUIUpdate);
|
||||
intervalLastUIUpdate = setInterval(onLastUIUpdate, 1000);
|
||||
}) */
|
||||
|
||||
|
||||
|
||||
|
||||
+19
-16
@@ -1,18 +1,21 @@
|
||||
window.onload = (function(){
|
||||
window.addEventListener('drop', e => {
|
||||
const target = e.composedPath()[0];
|
||||
if (target.placeholder.indexOf("Prompt") == -1) return;
|
||||
window.onload = function () {
|
||||
window.addEventListener("drop", (e) => {
|
||||
const target = e.composedPath()[0];
|
||||
if (target.placeholder.indexOf("Prompt") == -1) return;
|
||||
|
||||
let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image";
|
||||
let prompt_target =
|
||||
get_tab_index("tabs") == 1
|
||||
? "img2img_prompt_image"
|
||||
: "txt2img_prompt_image";
|
||||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const imgParent = gradioApp().getElementById(prompt_target);
|
||||
const files = e.dataTransfer.files;
|
||||
const fileInput = imgParent.querySelector('input[type="file"]');
|
||||
if ( fileInput ) {
|
||||
fileInput.files = files;
|
||||
fileInput.dispatchEvent(new Event('change'));
|
||||
}
|
||||
});
|
||||
});
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
const imgParent = gradioApp().getElementById(prompt_target);
|
||||
const files = e.dataTransfer.files;
|
||||
const fileInput = imgParent.querySelector('input[type="file"]');
|
||||
if (fileInput) {
|
||||
fileInput.files = files;
|
||||
fileInput.dispatchEvent(new Event("change"));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
+168
-155
@@ -261,7 +261,7 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
*/
|
||||
//called from progressbar
|
||||
function showGalleryImage() {
|
||||
//need to clean up the old code
|
||||
//need to clean up the old code
|
||||
}
|
||||
|
||||
let like;
|
||||
@@ -271,7 +271,20 @@ let slide = 0;
|
||||
let gallery = [];
|
||||
let fullImg_src;
|
||||
//let control = ["pan","undo","like","tile","page","fullscreen","autofit","zoom-in","zoom-out","clear","close","download","prev","next"];
|
||||
let control = ["like","tile","page","fullscreen","autofit","zoom-in","zoom-out","clear","close","download","prev","next"];
|
||||
let control = [
|
||||
"like",
|
||||
"tile",
|
||||
"page",
|
||||
"fullscreen",
|
||||
"autofit",
|
||||
"zoom-in",
|
||||
"zoom-out",
|
||||
"clear",
|
||||
"close",
|
||||
"download",
|
||||
"prev",
|
||||
"next",
|
||||
];
|
||||
|
||||
let img_browser;
|
||||
let img_file_name;
|
||||
@@ -281,175 +294,174 @@ let spl_zoom_out;
|
||||
let spl_zoom_in;
|
||||
let spotlight_gallery;
|
||||
|
||||
|
||||
function tile_zoom_update(val){
|
||||
let current_tile_state_size = gallery[slide].tile_size;
|
||||
current_tile_state_size += (val * 5);
|
||||
current_tile_state_size = Math.max(5, Math.min(100,current_tile_state_size));
|
||||
spl_pane.style.setProperty('background-size', current_tile_state_size+"%");
|
||||
gallery[slide].tile_size = current_tile_state_size;
|
||||
function tile_zoom_update(val) {
|
||||
let current_tile_state_size = gallery[slide].tile_size;
|
||||
current_tile_state_size += val * 5;
|
||||
current_tile_state_size = Math.max(5, Math.min(100, current_tile_state_size));
|
||||
spl_pane.style.setProperty("background-size", current_tile_state_size + "%");
|
||||
gallery[slide].tile_size = current_tile_state_size;
|
||||
}
|
||||
|
||||
function tile_wheel(event){
|
||||
let delta = event["deltaY"];
|
||||
delta = (delta < 0 ? 1 : delta ? -1 : 0) * 0.5;
|
||||
tile_zoom_update(delta);
|
||||
function tile_wheel(event) {
|
||||
let delta = event["deltaY"];
|
||||
delta = (delta < 0 ? 1 : delta ? -1 : 0) * 0.5;
|
||||
tile_zoom_update(delta);
|
||||
}
|
||||
function tile_zoom_in(event){
|
||||
tile_zoom_update(1);
|
||||
function tile_zoom_in(event) {
|
||||
tile_zoom_update(1);
|
||||
}
|
||||
function tile_zoom_out(event){
|
||||
tile_zoom_update(-1);
|
||||
function tile_zoom_out(event) {
|
||||
tile_zoom_update(-1);
|
||||
}
|
||||
|
||||
function removeTile(){
|
||||
spl_pane.removeEventListener("wheel", tile_wheel);
|
||||
spl_zoom_out.removeEventListener("click", tile_zoom_out);
|
||||
spl_zoom_in.removeEventListener("click", tile_zoom_in);
|
||||
|
||||
spl_pane.classList.remove("hide");
|
||||
spl_pane.style.setProperty('background-image', 'none');
|
||||
spotlight_gallery.zoom(0.0);
|
||||
function removeTile() {
|
||||
spl_pane.removeEventListener("wheel", tile_wheel);
|
||||
spl_zoom_out.removeEventListener("click", tile_zoom_out);
|
||||
spl_zoom_in.removeEventListener("click", tile_zoom_in);
|
||||
|
||||
spl_pane.classList.remove("hide");
|
||||
spl_pane.style.setProperty("background-image", "none");
|
||||
spotlight_gallery.zoom(0.0);
|
||||
}
|
||||
|
||||
function addTile(spl_img){
|
||||
spl_pane.addEventListener("wheel", tile_wheel);
|
||||
spl_zoom_out.addEventListener("click", tile_zoom_out);
|
||||
spl_zoom_in.addEventListener("click", tile_zoom_in);
|
||||
|
||||
const current_tile_state_size = gallery[slide].tile_size;
|
||||
spl_pane.classList.add("hide");
|
||||
spl_pane.style.setProperty('background-position', "center");
|
||||
spl_pane.style.setProperty('background-size', current_tile_state_size+"%");
|
||||
if(spl_img){
|
||||
spl_pane.style.setProperty('background-image', `url(${spl_img.src})`);
|
||||
}
|
||||
function addTile(spl_img) {
|
||||
spl_pane.addEventListener("wheel", tile_wheel);
|
||||
spl_zoom_out.addEventListener("click", tile_zoom_out);
|
||||
spl_zoom_in.addEventListener("click", tile_zoom_in);
|
||||
|
||||
const current_tile_state_size = gallery[slide].tile_size;
|
||||
spl_pane.classList.add("hide");
|
||||
spl_pane.style.setProperty("background-position", "center");
|
||||
spl_pane.style.setProperty("background-size", current_tile_state_size + "%");
|
||||
if (spl_img) {
|
||||
spl_pane.style.setProperty("background-image", `url(${spl_img.src})`);
|
||||
}
|
||||
}
|
||||
|
||||
function tile_handler(event) {
|
||||
|
||||
const current_tile_state = !gallery[slide].tile;
|
||||
gallery[slide].tile = current_tile_state;
|
||||
|
||||
this.classList.toggle("on");
|
||||
const current_tile_state = !gallery[slide].tile;
|
||||
gallery[slide].tile = current_tile_state;
|
||||
|
||||
if(current_tile_state){
|
||||
const spl_img = gradioApp().querySelector("#spotlight-gal .spl-pane img");
|
||||
addTile(spl_img);
|
||||
} else {
|
||||
removeTile();
|
||||
}
|
||||
}
|
||||
function like_handler(event){
|
||||
|
||||
const current_like_state = !gallery[slide].like;
|
||||
gallery[slide].like = current_like_state;
|
||||
this.classList.toggle("on");
|
||||
|
||||
if(current_like_state){
|
||||
// add to favorites ...
|
||||
//img_file_name.value = gallery[slide].src;
|
||||
//console.log(gallery[slide].src);
|
||||
}
|
||||
else{
|
||||
// remove from favorites ...
|
||||
}
|
||||
}
|
||||
this.classList.toggle("on");
|
||||
|
||||
if (current_tile_state) {
|
||||
const spl_img = gradioApp().querySelector("#spotlight-gal .spl-pane img");
|
||||
addTile(spl_img);
|
||||
} else {
|
||||
removeTile();
|
||||
}
|
||||
}
|
||||
function like_handler(event) {
|
||||
const current_like_state = !gallery[slide].like;
|
||||
gallery[slide].like = current_like_state;
|
||||
this.classList.toggle("on");
|
||||
|
||||
if (current_like_state) {
|
||||
// add to favorites ...
|
||||
//img_file_name.value = gallery[slide].src;
|
||||
//console.log(gallery[slide].src);
|
||||
} else {
|
||||
// remove from favorites ...
|
||||
}
|
||||
}
|
||||
|
||||
function createGallerySpotlight() {
|
||||
//console.log("clicked");
|
||||
slide = 0;
|
||||
gallery = [];
|
||||
|
||||
//console.log("clicked");
|
||||
slide = 0;
|
||||
gallery = [];
|
||||
gradioApp()
|
||||
.querySelectorAll("#" + selectedTabItemId + " .thumbnails img")
|
||||
.forEach(function (elem, i) {
|
||||
elem.setAttribute("gal-id", i);
|
||||
//if(fullImg_src == elem.src) slide = parseInt(i+1);
|
||||
if (elem.parentElement.className.indexOf("selected") != -1)
|
||||
slide = parseInt(i + 1);
|
||||
//console.log(slide);
|
||||
gallery[i] = {
|
||||
src: elem.src,
|
||||
title: "Seed:" + elem.src,
|
||||
//description: "This is a description.",
|
||||
like: false,
|
||||
tile: false,
|
||||
tile_size: 50,
|
||||
};
|
||||
});
|
||||
|
||||
const options = {
|
||||
class: "sd-gallery",
|
||||
index: slide,
|
||||
//control: ["like","page","theme","fullscreen","autofit","zoom-in","zoom-out","close","download","play","prev","next"],
|
||||
control: control,
|
||||
//animation: animation,
|
||||
onshow: function (index) {},
|
||||
onchange: function (index, options) {
|
||||
slide = index - 1;
|
||||
tile.classList.toggle("on", gallery[slide].tile);
|
||||
//if(img_browser){
|
||||
like.classList.toggle("on", gallery[slide].like);
|
||||
|
||||
gradioApp().querySelectorAll("#"+selectedTabItemId+' .thumbnails img').forEach(function (elem, i){
|
||||
elem.setAttribute("gal-id", i);
|
||||
//if(fullImg_src == elem.src) slide = parseInt(i+1);
|
||||
if(elem.parentElement.className.indexOf("selected") != -1) slide = parseInt(i+1);
|
||||
//console.log(slide);
|
||||
gallery[i] = {
|
||||
src: elem.src,
|
||||
title: "Seed:" + elem.src,
|
||||
//description: "This is a description.",
|
||||
like: false,
|
||||
tile:false,
|
||||
tile_size: 50,
|
||||
}
|
||||
})
|
||||
|
||||
const options = {
|
||||
|
||||
class: "sd-gallery",
|
||||
index: slide,
|
||||
//control: ["like","page","theme","fullscreen","autofit","zoom-in","zoom-out","close","download","play","prev","next"],
|
||||
control: control,
|
||||
//animation: animation,
|
||||
onshow: function(index){
|
||||
|
||||
},
|
||||
onchange: function(index, options){
|
||||
slide = index - 1;
|
||||
tile.classList.toggle("on", gallery[slide].tile);
|
||||
//if(img_browser){
|
||||
like.classList.toggle("on", gallery[slide].like);
|
||||
|
||||
//}
|
||||
|
||||
spl_pane = gradioApp().querySelector("#spotlight-gal .spl-pane:nth-child("+index+")");
|
||||
spl_zoom_out = gradioApp().querySelector("#spotlight-gal .spl-zoom-out");
|
||||
spl_zoom_in = gradioApp().querySelector("#spotlight-gal .spl-zoom-in");
|
||||
|
||||
const current_tile_state = gallery[slide].tile;
|
||||
if(current_tile_state){
|
||||
addTile();
|
||||
}else{
|
||||
removeTile();
|
||||
}
|
||||
//}
|
||||
|
||||
},
|
||||
onclose: function(index){
|
||||
gradioApp().querySelector("#"+selectedTabItemId+' .thumbnails .thumbnail-item:nth-child('+(slide+1)+')').click();
|
||||
}
|
||||
};
|
||||
spl_pane = gradioApp().querySelector(
|
||||
"#spotlight-gal .spl-pane:nth-child(" + index + ")"
|
||||
);
|
||||
spl_zoom_out = gradioApp().querySelector("#spotlight-gal .spl-zoom-out");
|
||||
spl_zoom_in = gradioApp().querySelector("#spotlight-gal .spl-zoom-in");
|
||||
|
||||
//assign(options, modifier);
|
||||
|
||||
const current_tile_state = gallery[slide].tile;
|
||||
if (current_tile_state) {
|
||||
addTile();
|
||||
} else {
|
||||
removeTile();
|
||||
}
|
||||
},
|
||||
onclose: function (index) {
|
||||
gradioApp()
|
||||
.querySelector(
|
||||
"#" +
|
||||
selectedTabItemId +
|
||||
" .thumbnails .thumbnail-item:nth-child(" +
|
||||
(slide + 1) +
|
||||
")"
|
||||
)
|
||||
.click();
|
||||
},
|
||||
};
|
||||
|
||||
spotlight_gallery.show(gallery, options);
|
||||
spotlight_gallery.panzoom(true);
|
||||
|
||||
//assign(options, modifier);
|
||||
|
||||
spotlight_gallery.show(gallery, options);
|
||||
spotlight_gallery.panzoom(true);
|
||||
}
|
||||
|
||||
function fullImg_click_handler(e){
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
createGallerySpotlight();
|
||||
function fullImg_click_handler(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
createGallerySpotlight();
|
||||
}
|
||||
|
||||
|
||||
let intervalUiUpdateIViewer;
|
||||
function onUiHeaderTabUpdate(){
|
||||
if(intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer);
|
||||
intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500);
|
||||
function onUiHeaderTabUpdate() {
|
||||
if (intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer);
|
||||
intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500);
|
||||
}
|
||||
|
||||
|
||||
let fullImg_preview;
|
||||
function onUiUpdateIViewer(){
|
||||
clearInterval(intervalUiUpdateIViewer);
|
||||
//update_performant_inputs(selectedTabItemId);
|
||||
|
||||
//fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' [id$="2img_results"] .modify-upload + img.w-full.object-contain');
|
||||
fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' .preview > img');
|
||||
if(opts.js_modal_lightbox && fullImg_preview ) {
|
||||
function onUiUpdateIViewer() {
|
||||
clearInterval(intervalUiUpdateIViewer);
|
||||
//update_performant_inputs(selectedTabItemId);
|
||||
|
||||
fullImg_src = fullImg_preview.src;
|
||||
fullImg_preview.removeEventListener('click', fullImg_click_handler );
|
||||
fullImg_preview.addEventListener('click', fullImg_click_handler, true );//bubbling phase
|
||||
|
||||
/*
|
||||
//fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' [id$="2img_results"] .modify-upload + img.w-full.object-contain');
|
||||
fullImg_preview = gradioApp().querySelector(
|
||||
"#" + selectedTabItemId + " .preview > img"
|
||||
);
|
||||
if (opts.js_modal_lightbox && fullImg_preview) {
|
||||
fullImg_src = fullImg_preview.src;
|
||||
fullImg_preview.removeEventListener("click", fullImg_click_handler);
|
||||
fullImg_preview.addEventListener("click", fullImg_click_handler, true); //bubbling phase
|
||||
|
||||
/*
|
||||
// this is an idea to integrate image browser extension seamlesly,
|
||||
// without the need to change to the image browser tab extension users will be able to review images after generation
|
||||
// and add them to favorites or delete the ones that don't like on the spot
|
||||
@@ -469,21 +481,22 @@ function onUiUpdateIViewer(){
|
||||
}
|
||||
}
|
||||
*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onUiUpdate(function() {
|
||||
if(intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer);
|
||||
intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500);
|
||||
})
|
||||
onUiUpdate(function () {
|
||||
if (intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer);
|
||||
intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500);
|
||||
});
|
||||
|
||||
onUiLoaded(function(){
|
||||
spotlight_gallery = new Spotlight();
|
||||
spotlight_gallery.init(gradioApp().querySelector('.gradio-container'), "-gal");
|
||||
tile = spotlight_gallery.addControl("tile", tile_handler);
|
||||
like = spotlight_gallery.addControl("like", like_handler);
|
||||
})
|
||||
onUiLoaded(function () {
|
||||
spotlight_gallery = new Spotlight();
|
||||
spotlight_gallery.init(
|
||||
gradioApp().querySelector(".gradio-container"),
|
||||
"-gal"
|
||||
);
|
||||
tile = spotlight_gallery.addControl("tile", tile_handler);
|
||||
like = spotlight_gallery.addControl("like", like_handler);
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
|
||||
});
|
||||
document.addEventListener("DOMContentLoaded", function () {});
|
||||
|
||||
@@ -1,36 +1,34 @@
|
||||
let delay = 350//ms
|
||||
window.addEventListener('gamepadconnected', (e) => {
|
||||
console.log("Gamepad connected!")
|
||||
const gamepad = e.gamepad;
|
||||
setInterval(() => {
|
||||
const xValue = gamepad.axes[0].toFixed(2);
|
||||
if (xValue < -0.3) {
|
||||
modalPrevImage(e);
|
||||
} else if (xValue > 0.3) {
|
||||
modalNextImage(e);
|
||||
}
|
||||
let delay = 350; //ms
|
||||
window.addEventListener("gamepadconnected", (e) => {
|
||||
console.log("Gamepad connected!");
|
||||
const gamepad = e.gamepad;
|
||||
setInterval(() => {
|
||||
const xValue = gamepad.axes[0].toFixed(2);
|
||||
if (xValue < -0.3) {
|
||||
modalPrevImage(e);
|
||||
} else if (xValue > 0.3) {
|
||||
modalNextImage(e);
|
||||
}
|
||||
}, delay);
|
||||
});
|
||||
|
||||
}, delay);
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
/*
|
||||
Primarily for vr controller type pointer devices.
|
||||
I use the wheel event because there's currently no way to do it properly with web xr.
|
||||
*/
|
||||
|
||||
let isScrolling = false;
|
||||
window.addEventListener('wheel', (e) => {
|
||||
if (isScrolling) return;
|
||||
isScrolling = true;
|
||||
let isScrolling = false;
|
||||
window.addEventListener("wheel", (e) => {
|
||||
if (isScrolling) return;
|
||||
isScrolling = true;
|
||||
|
||||
if (e.deltaX <= -0.6) {
|
||||
modalPrevImage(e);
|
||||
} else if (e.deltaX >= 0.6) {
|
||||
modalNextImage(e);
|
||||
}
|
||||
if (e.deltaX <= -0.6) {
|
||||
modalPrevImage(e);
|
||||
} else if (e.deltaX >= 0.6) {
|
||||
modalNextImage(e);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
isScrolling = false;
|
||||
}, delay);
|
||||
});
|
||||
setTimeout(() => {
|
||||
isScrolling = false;
|
||||
}, delay);
|
||||
});
|
||||
|
||||
+140
-129
@@ -1,165 +1,176 @@
|
||||
|
||||
// localization = {} -- the dict with translations is created by the backend
|
||||
|
||||
ignore_ids_for_localization={
|
||||
setting_sd_hypernetwork: 'OPTION',
|
||||
setting_sd_model_checkpoint: 'OPTION',
|
||||
setting_realesrgan_enabled_models: 'OPTION',
|
||||
modelmerger_primary_model_name: 'OPTION',
|
||||
modelmerger_secondary_model_name: 'OPTION',
|
||||
modelmerger_tertiary_model_name: 'OPTION',
|
||||
train_embedding: 'OPTION',
|
||||
train_hypernetwork: 'OPTION',
|
||||
txt2img_styles: 'OPTION',
|
||||
img2img_styles: 'OPTION',
|
||||
setting_random_artist_categories: 'SPAN',
|
||||
setting_face_restoration_model: 'SPAN',
|
||||
setting_realesrgan_enabled_models: 'SPAN',
|
||||
extras_upscaler_1: 'SPAN',
|
||||
extras_upscaler_2: 'SPAN',
|
||||
ignore_ids_for_localization = {
|
||||
setting_sd_hypernetwork: "OPTION",
|
||||
setting_sd_model_checkpoint: "OPTION",
|
||||
setting_realesrgan_enabled_models: "OPTION",
|
||||
modelmerger_primary_model_name: "OPTION",
|
||||
modelmerger_secondary_model_name: "OPTION",
|
||||
modelmerger_tertiary_model_name: "OPTION",
|
||||
train_embedding: "OPTION",
|
||||
train_hypernetwork: "OPTION",
|
||||
txt2img_styles: "OPTION",
|
||||
img2img_styles: "OPTION",
|
||||
setting_random_artist_categories: "SPAN",
|
||||
setting_face_restoration_model: "SPAN",
|
||||
setting_realesrgan_enabled_models: "SPAN",
|
||||
extras_upscaler_1: "SPAN",
|
||||
extras_upscaler_2: "SPAN",
|
||||
};
|
||||
|
||||
re_num = /^[\.\d]+$/;
|
||||
re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u;
|
||||
|
||||
original_lines = {};
|
||||
translated_lines = {};
|
||||
|
||||
function textNodesUnder(el) {
|
||||
var n,
|
||||
a = [],
|
||||
walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
|
||||
while ((n = walk.nextNode())) a.push(n);
|
||||
return a;
|
||||
}
|
||||
|
||||
re_num = /^[\.\d]+$/
|
||||
re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u
|
||||
function canBeTranslated(node, text) {
|
||||
if (!text) return false;
|
||||
if (!node.parentElement) return false;
|
||||
|
||||
original_lines = {}
|
||||
translated_lines = {}
|
||||
var parentType = node.parentElement.nodeName;
|
||||
if (
|
||||
parentType == "SCRIPT" ||
|
||||
parentType == "STYLE" ||
|
||||
parentType == "TEXTAREA"
|
||||
)
|
||||
return false;
|
||||
|
||||
function textNodesUnder(el){
|
||||
var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
|
||||
while(n=walk.nextNode()) a.push(n);
|
||||
return a;
|
||||
if (parentType == "OPTION" || parentType == "SPAN") {
|
||||
var pnode = node;
|
||||
for (var level = 0; level < 4; level++) {
|
||||
pnode = pnode.parentElement;
|
||||
if (!pnode) break;
|
||||
|
||||
if (ignore_ids_for_localization[pnode.id] == parentType) return false;
|
||||
}
|
||||
}
|
||||
|
||||
if (re_num.test(text)) return false;
|
||||
if (re_emoji.test(text)) return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
function canBeTranslated(node, text){
|
||||
if(! text) return false;
|
||||
if(! node.parentElement) return false;
|
||||
function getTranslation(text) {
|
||||
if (!text) return undefined;
|
||||
|
||||
var parentType = node.parentElement.nodeName
|
||||
if(parentType=='SCRIPT' || parentType=='STYLE' || parentType=='TEXTAREA') return false;
|
||||
if (translated_lines[text] === undefined) {
|
||||
original_lines[text] = 1;
|
||||
}
|
||||
|
||||
if (parentType=='OPTION' || parentType=='SPAN'){
|
||||
var pnode = node
|
||||
for(var level=0; level<4; level++){
|
||||
pnode = pnode.parentElement
|
||||
if(! pnode) break;
|
||||
tl = localization[text];
|
||||
if (tl !== undefined) {
|
||||
translated_lines[tl] = 1;
|
||||
}
|
||||
|
||||
if(ignore_ids_for_localization[pnode.id] == parentType) return false;
|
||||
}
|
||||
}
|
||||
|
||||
if(re_num.test(text)) return false;
|
||||
if(re_emoji.test(text)) return false;
|
||||
return true
|
||||
return tl;
|
||||
}
|
||||
|
||||
function getTranslation(text){
|
||||
if(! text) return undefined
|
||||
function processTextNode(node) {
|
||||
var text = node.textContent.trim();
|
||||
|
||||
if(translated_lines[text] === undefined){
|
||||
original_lines[text] = 1
|
||||
}
|
||||
if (!canBeTranslated(node, text)) return;
|
||||
|
||||
tl = localization[text]
|
||||
if(tl !== undefined){
|
||||
translated_lines[tl] = 1
|
||||
}
|
||||
|
||||
return tl
|
||||
tl = getTranslation(text);
|
||||
if (tl !== undefined) {
|
||||
node.textContent = tl;
|
||||
}
|
||||
}
|
||||
|
||||
function processTextNode(node){
|
||||
var text = node.textContent.trim()
|
||||
function processNode(node) {
|
||||
if (node.nodeType == 3) {
|
||||
processTextNode(node);
|
||||
return;
|
||||
}
|
||||
|
||||
if(! canBeTranslated(node, text)) return
|
||||
|
||||
tl = getTranslation(text)
|
||||
if(tl !== undefined){
|
||||
node.textContent = tl
|
||||
if (node.title) {
|
||||
tl = getTranslation(node.title);
|
||||
if (tl !== undefined) {
|
||||
node.title = tl;
|
||||
}
|
||||
}
|
||||
|
||||
if (node.placeholder) {
|
||||
tl = getTranslation(node.placeholder);
|
||||
if (tl !== undefined) {
|
||||
node.placeholder = tl;
|
||||
}
|
||||
}
|
||||
|
||||
textNodesUnder(node).forEach(function (node) {
|
||||
processTextNode(node);
|
||||
});
|
||||
}
|
||||
|
||||
function processNode(node){
|
||||
if(node.nodeType == 3){
|
||||
processTextNode(node)
|
||||
return
|
||||
}
|
||||
function dumpTranslations() {
|
||||
var dumped = {};
|
||||
if (localization.rtl) {
|
||||
dumped.rtl = true;
|
||||
}
|
||||
|
||||
if(node.title){
|
||||
tl = getTranslation(node.title)
|
||||
if(tl !== undefined){
|
||||
node.title = tl
|
||||
}
|
||||
}
|
||||
Object.keys(original_lines).forEach(function (text) {
|
||||
if (dumped[text] !== undefined) return;
|
||||
|
||||
if(node.placeholder){
|
||||
tl = getTranslation(node.placeholder)
|
||||
if(tl !== undefined){
|
||||
node.placeholder = tl
|
||||
}
|
||||
}
|
||||
dumped[text] = localization[text] || text;
|
||||
});
|
||||
|
||||
textNodesUnder(node).forEach(function(node){
|
||||
processTextNode(node)
|
||||
})
|
||||
return dumped;
|
||||
}
|
||||
|
||||
function dumpTranslations(){
|
||||
var dumped = {}
|
||||
if (localization.rtl) {
|
||||
dumped.rtl = true
|
||||
}
|
||||
|
||||
Object.keys(original_lines).forEach(function(text){
|
||||
if(dumped[text] !== undefined) return
|
||||
|
||||
dumped[text] = localization[text] || text
|
||||
})
|
||||
|
||||
return dumped
|
||||
}
|
||||
|
||||
onUiUpdate(function(m){
|
||||
m.forEach(function(mutation){
|
||||
mutation.addedNodes.forEach(function(node){
|
||||
processNode(node)
|
||||
})
|
||||
onUiUpdate(function (m) {
|
||||
m.forEach(function (mutation) {
|
||||
mutation.addedNodes.forEach(function (node) {
|
||||
processNode(node);
|
||||
});
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
processNode(gradioApp());
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
processNode(gradioApp())
|
||||
if (localization.rtl) {
|
||||
// if the language is from right to left,
|
||||
new MutationObserver((mutations, observer) => {
|
||||
// wait for the style to load
|
||||
mutations.forEach((mutation) => {
|
||||
mutation.addedNodes.forEach((node) => {
|
||||
if (node.tagName === "STYLE") {
|
||||
observer.disconnect();
|
||||
|
||||
if (localization.rtl) { // if the language is from right to left,
|
||||
(new MutationObserver((mutations, observer) => { // wait for the style to load
|
||||
mutations.forEach(mutation => {
|
||||
mutation.addedNodes.forEach(node => {
|
||||
if (node.tagName === 'STYLE') {
|
||||
observer.disconnect();
|
||||
|
||||
for (const x of node.sheet.rules) { // find all rtl media rules
|
||||
if (Array.from(x.media || []).includes('rtl')) {
|
||||
x.media.appendMedium('all'); // enable them
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
})).observe(gradioApp(), { childList: true });
|
||||
}
|
||||
})
|
||||
for (const x of node.sheet.rules) {
|
||||
// find all rtl media rules
|
||||
if (Array.from(x.media || []).includes("rtl")) {
|
||||
x.media.appendMedium("all"); // enable them
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}).observe(gradioApp(), { childList: true });
|
||||
}
|
||||
});
|
||||
|
||||
function download_localization() {
|
||||
var text = JSON.stringify(dumpTranslations(), null, 4)
|
||||
var text = JSON.stringify(dumpTranslations(), null, 4);
|
||||
|
||||
var element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||
element.setAttribute('download', "localization.json");
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
var element = document.createElement("a");
|
||||
element.setAttribute(
|
||||
"href",
|
||||
"data:text/plain;charset=utf-8," + encodeURIComponent(text)
|
||||
);
|
||||
element.setAttribute("download", "localization.json");
|
||||
element.style.display = "none";
|
||||
document.body.appendChild(element);
|
||||
|
||||
element.click();
|
||||
element.click();
|
||||
|
||||
document.body.removeChild(element);
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
|
||||
+35
-30
@@ -4,46 +4,51 @@ let lastHeadImg = null;
|
||||
|
||||
let notificationButton = null;
|
||||
|
||||
onUiUpdate(function(){
|
||||
if(notificationButton == null){
|
||||
notificationButton = gradioApp().getElementById('request_notifications')
|
||||
onUiUpdate(function () {
|
||||
if (notificationButton == null) {
|
||||
notificationButton = gradioApp().getElementById("request_notifications");
|
||||
|
||||
if(notificationButton != null){
|
||||
notificationButton.addEventListener('click', () => {
|
||||
void Notification.requestPermission();
|
||||
},true);
|
||||
}
|
||||
if (notificationButton != null) {
|
||||
notificationButton.addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
void Notification.requestPermission();
|
||||
},
|
||||
true
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"][style*="display: block"] div[id$="_results"] .thumbnail-item > img');
|
||||
const galleryPreviews = gradioApp().querySelectorAll(
|
||||
'div[id^="tab_"][style*="display: block"] div[id$="_results"] .thumbnail-item > img'
|
||||
);
|
||||
|
||||
if (galleryPreviews == null) return;
|
||||
if (galleryPreviews == null) return;
|
||||
|
||||
const headImg = galleryPreviews[0]?.src;
|
||||
const headImg = galleryPreviews[0]?.src;
|
||||
|
||||
if (headImg == null || headImg == lastHeadImg) return;
|
||||
if (headImg == null || headImg == lastHeadImg) return;
|
||||
|
||||
lastHeadImg = headImg;
|
||||
lastHeadImg = headImg;
|
||||
|
||||
// play notification sound if available
|
||||
gradioApp().querySelector('#audio_notification audio')?.play();
|
||||
// play notification sound if available
|
||||
gradioApp().querySelector("#audio_notification audio")?.play();
|
||||
|
||||
if (document.hasFocus()) return;
|
||||
if (document.hasFocus()) return;
|
||||
|
||||
// Multiple copies of the images are in the DOM when one is selected. Dedup with a Set to get the real number generated.
|
||||
const imgs = new Set(Array.from(galleryPreviews).map(img => img.src));
|
||||
// Multiple copies of the images are in the DOM when one is selected. Dedup with a Set to get the real number generated.
|
||||
const imgs = new Set(Array.from(galleryPreviews).map((img) => img.src));
|
||||
|
||||
const notification = new Notification(
|
||||
'Stable Diffusion',
|
||||
{
|
||||
body: `Generated ${imgs.size > 1 ? imgs.size - opts.return_grid : 1} image${imgs.size > 1 ? 's' : ''}`,
|
||||
icon: headImg,
|
||||
image: headImg,
|
||||
}
|
||||
);
|
||||
const notification = new Notification("Stable Diffusion", {
|
||||
body: `Generated ${imgs.size > 1 ? imgs.size - opts.return_grid : 1} image${
|
||||
imgs.size > 1 ? "s" : ""
|
||||
}`,
|
||||
icon: headImg,
|
||||
image: headImg,
|
||||
});
|
||||
|
||||
notification.onclick = function(_){
|
||||
parent.focus();
|
||||
this.close();
|
||||
};
|
||||
notification.onclick = function (_) {
|
||||
parent.focus();
|
||||
this.close();
|
||||
};
|
||||
});
|
||||
|
||||
+195
-174
@@ -1,200 +1,221 @@
|
||||
// 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){
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", url, true);
|
||||
xhr.setRequestHeader("Content-Type", "application/json");
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
var js = JSON.parse(xhr.responseText);
|
||||
handler(js)
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
errorHandler()
|
||||
}
|
||||
} else{
|
||||
errorHandler()
|
||||
}
|
||||
function request(url, data, handler, errorHandler) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", url, true);
|
||||
xhr.setRequestHeader("Content-Type", "application/json");
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4) {
|
||||
if (xhr.status === 200) {
|
||||
try {
|
||||
var js = JSON.parse(xhr.responseText);
|
||||
handler(js);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
errorHandler();
|
||||
}
|
||||
};
|
||||
var js = JSON.stringify(data);
|
||||
xhr.send(js);
|
||||
}
|
||||
|
||||
function pad2(x){
|
||||
return x<10 ? '0'+x : x
|
||||
}
|
||||
|
||||
function formatTime(secs){
|
||||
if(secs > 3600){
|
||||
return pad2(Math.floor(secs/60/60)) + ":" + pad2(Math.floor(secs/60)%60) + ":" + pad2(Math.floor(secs)%60)
|
||||
} else if(secs > 60){
|
||||
return pad2(Math.floor(secs/60)) + ":" + pad2(Math.floor(secs)%60)
|
||||
} else{
|
||||
return Math.floor(secs) + "s"
|
||||
} else {
|
||||
errorHandler();
|
||||
}
|
||||
}
|
||||
};
|
||||
var js = JSON.stringify(data);
|
||||
xhr.send(js);
|
||||
}
|
||||
|
||||
function setTitle(progress){
|
||||
var title = 'Stable Diffusion'
|
||||
|
||||
if(opts.show_progress_in_title && progress){
|
||||
title = '[' + progress.trim() + '] ' + title;
|
||||
}
|
||||
|
||||
if(document.title != title){
|
||||
document.title = title;
|
||||
}
|
||||
function pad2(x) {
|
||||
return x < 10 ? "0" + x : x;
|
||||
}
|
||||
|
||||
function formatTime(secs) {
|
||||
if (secs > 3600) {
|
||||
return (
|
||||
pad2(Math.floor(secs / 60 / 60)) +
|
||||
":" +
|
||||
pad2(Math.floor(secs / 60) % 60) +
|
||||
":" +
|
||||
pad2(Math.floor(secs) % 60)
|
||||
);
|
||||
} else if (secs > 60) {
|
||||
return pad2(Math.floor(secs / 60)) + ":" + pad2(Math.floor(secs) % 60);
|
||||
} else {
|
||||
return Math.floor(secs) + "s";
|
||||
}
|
||||
}
|
||||
|
||||
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)+")"
|
||||
function setTitle(progress) {
|
||||
var title = "Stable Diffusion";
|
||||
|
||||
if (opts.show_progress_in_title && progress) {
|
||||
title = "[" + progress.trim() + "] " + title;
|
||||
}
|
||||
|
||||
if (document.title != title) {
|
||||
document.title = title;
|
||||
}
|
||||
}
|
||||
|
||||
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) +
|
||||
")"
|
||||
);
|
||||
}
|
||||
|
||||
// starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and
|
||||
// preview inside gallery element. Cleans up all created stuff when the task is over and calls atEnd.
|
||||
// calls onProgress every time there is a progress update
|
||||
function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgress, inactivityTimeout=40){
|
||||
var dateStart = new Date()
|
||||
var wasEverActive = false
|
||||
var parentProgressbar = progressbarContainer.parentNode
|
||||
var parentGallery = gallery ? gallery.parentNode : null
|
||||
function requestProgress(
|
||||
id_task,
|
||||
progressbarContainer,
|
||||
gallery,
|
||||
atEnd,
|
||||
onProgress,
|
||||
inactivityTimeout = 40
|
||||
) {
|
||||
var dateStart = new Date();
|
||||
var wasEverActive = false;
|
||||
var parentProgressbar = progressbarContainer.parentNode;
|
||||
var parentGallery = gallery ? gallery.parentNode : null;
|
||||
|
||||
var divProgress = document.createElement('div')
|
||||
divProgress.className='progressDiv'
|
||||
var divProgress = document.createElement("div");
|
||||
divProgress.className = "progressDiv";
|
||||
|
||||
divProgress.style.display = opts.show_progressbar ? "block" : "none"
|
||||
var divInner = document.createElement('div')
|
||||
divInner.className='progress'
|
||||
divProgress.style.display = opts.show_progressbar ? "block" : "none";
|
||||
var divInner = document.createElement("div");
|
||||
divInner.className = "progress";
|
||||
|
||||
divProgress.appendChild(divInner)
|
||||
parentProgressbar.insertBefore(divProgress, progressbarContainer)
|
||||
divProgress.appendChild(divInner);
|
||||
parentProgressbar.insertBefore(divProgress, progressbarContainer);
|
||||
|
||||
if(parentGallery){
|
||||
var livePreview = gradioApp().querySelector('.livePreview');
|
||||
if(!livePreview){
|
||||
livePreview = document.createElement('div')
|
||||
livePreview.classList.add("livePreview", "init")
|
||||
parentGallery.insertBefore(livePreview, gallery)
|
||||
}
|
||||
livePreview.classList.remove("dropPreview");
|
||||
if (parentGallery) {
|
||||
var livePreview = gradioApp().querySelector(".livePreview");
|
||||
if (!livePreview) {
|
||||
livePreview = document.createElement("div");
|
||||
livePreview.classList.add("livePreview", "init");
|
||||
parentGallery.insertBefore(livePreview, gallery);
|
||||
}
|
||||
livePreview.classList.remove("dropPreview");
|
||||
}
|
||||
|
||||
var removeProgressBar = function () {
|
||||
setTitle("");
|
||||
if (divProgress) {
|
||||
parentProgressbar.removeChild(divProgress);
|
||||
}
|
||||
|
||||
var removeProgressBar = function(){
|
||||
setTitle("")
|
||||
if(divProgress){
|
||||
parentProgressbar.removeChild(divProgress)
|
||||
}
|
||||
|
||||
if(progressbarContainer.id == "txt2img_gallery_container"){
|
||||
showSubmitButtons('txt2img', true);
|
||||
}else if(progressbarContainer.id == "img2img_gallery_container"){
|
||||
showSubmitButtons('img2img', true);
|
||||
}
|
||||
if(livePreview){
|
||||
if(parentGallery) parentGallery.removeChild(livePreview)
|
||||
}
|
||||
gradioApp().querySelectorAll('#tabs + div, #tabs + div > *:not(ul)').forEach(function (elem){
|
||||
elem.style.setProperty("display", "block", "important");
|
||||
})
|
||||
atEnd()
|
||||
if (progressbarContainer.id == "txt2img_gallery_container") {
|
||||
showSubmitButtons("txt2img", true);
|
||||
} else if (progressbarContainer.id == "img2img_gallery_container") {
|
||||
showSubmitButtons("img2img", true);
|
||||
}
|
||||
|
||||
var fun = function(id_task, id_live_preview){
|
||||
request("./internal/progress", {"id_task": id_task, "id_live_preview": id_live_preview}, function(res){
|
||||
if(res.completed){
|
||||
removeProgressBar()
|
||||
return
|
||||
}
|
||||
|
||||
var rect = progressbarContainer.getBoundingClientRect()
|
||||
|
||||
if(rect.width){
|
||||
divProgress.style.width = rect.width + "px";
|
||||
}
|
||||
|
||||
let progressText = ""
|
||||
|
||||
divInner.style.width = ((res.progress || 0) * 100.0) + '%'
|
||||
divInner.style.background = res.progress ? "" : "transparent"
|
||||
|
||||
if(res.progress > 0){
|
||||
progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%'
|
||||
}
|
||||
|
||||
if(res.eta){
|
||||
progressText += " ETA: " + formatTime(res.eta)
|
||||
}
|
||||
|
||||
|
||||
setTitle(progressText)
|
||||
|
||||
if(res.textinfo && res.textinfo.indexOf("\n") == -1){
|
||||
progressText = res.textinfo + " " + progressText
|
||||
}
|
||||
|
||||
divInner.textContent = progressText
|
||||
|
||||
var elapsedFromStart = (new Date() - dateStart) / 1000
|
||||
|
||||
if(res.active) wasEverActive = true;
|
||||
|
||||
if(! res.active && wasEverActive){
|
||||
removeProgressBar()
|
||||
return
|
||||
}
|
||||
|
||||
if(elapsedFromStart > inactivityTimeout && !res.queued && !res.active){
|
||||
removeProgressBar()
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
if(res.live_preview && gallery){
|
||||
//var rect = gallery.getBoundingClientRect()
|
||||
//if(rect.width){
|
||||
//livePreview.style.width = rect.width + "px"
|
||||
//livePreview.style.height = rect.height + "px"
|
||||
//}
|
||||
|
||||
livePreview.classList.remove("init")
|
||||
|
||||
var img = new Image();
|
||||
img.onload = function() {
|
||||
img.width = img.naturalWidth;
|
||||
img.height = img.naturalHeight;
|
||||
livePreview.appendChild(img)
|
||||
if(livePreview.childElementCount > 2){
|
||||
livePreview.removeChild(livePreview.firstElementChild)
|
||||
}
|
||||
}
|
||||
img.src = res.live_preview;
|
||||
|
||||
}
|
||||
|
||||
|
||||
if(onProgress){
|
||||
onProgress(res)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
fun(id_task, res.id_live_preview);
|
||||
}, opts.live_preview_refresh_period || 500)
|
||||
}, function(){
|
||||
removeProgressBar()
|
||||
})
|
||||
if (livePreview) {
|
||||
if (parentGallery) parentGallery.removeChild(livePreview);
|
||||
}
|
||||
gradioApp()
|
||||
.querySelectorAll("#tabs + div, #tabs + div > *:not(ul)")
|
||||
.forEach(function (elem) {
|
||||
elem.style.setProperty("display", "block", "important");
|
||||
});
|
||||
atEnd();
|
||||
};
|
||||
|
||||
fun(id_task, 0)
|
||||
var fun = function (id_task, id_live_preview) {
|
||||
request(
|
||||
"./internal/progress",
|
||||
{ id_task: id_task, id_live_preview: id_live_preview },
|
||||
function (res) {
|
||||
if (res.completed) {
|
||||
removeProgressBar();
|
||||
return;
|
||||
}
|
||||
|
||||
var rect = progressbarContainer.getBoundingClientRect();
|
||||
|
||||
if (rect.width) {
|
||||
divProgress.style.width = rect.width + "px";
|
||||
}
|
||||
|
||||
let progressText = "";
|
||||
|
||||
divInner.style.width = (res.progress || 0) * 100.0 + "%";
|
||||
divInner.style.background = res.progress ? "" : "transparent";
|
||||
|
||||
if (res.progress > 0) {
|
||||
progressText = ((res.progress || 0) * 100.0).toFixed(0) + "%";
|
||||
}
|
||||
|
||||
if (res.eta) {
|
||||
progressText += " ETA: " + formatTime(res.eta);
|
||||
}
|
||||
|
||||
setTitle(progressText);
|
||||
|
||||
if (res.textinfo && res.textinfo.indexOf("\n") == -1) {
|
||||
progressText = res.textinfo + " " + progressText;
|
||||
}
|
||||
|
||||
divInner.textContent = progressText;
|
||||
|
||||
var elapsedFromStart = (new Date() - dateStart) / 1000;
|
||||
|
||||
if (res.active) wasEverActive = true;
|
||||
|
||||
if (!res.active && wasEverActive) {
|
||||
removeProgressBar();
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
elapsedFromStart > inactivityTimeout &&
|
||||
!res.queued &&
|
||||
!res.active
|
||||
) {
|
||||
removeProgressBar();
|
||||
return;
|
||||
}
|
||||
|
||||
if (res.live_preview && gallery) {
|
||||
//var rect = gallery.getBoundingClientRect()
|
||||
//if(rect.width){
|
||||
//livePreview.style.width = rect.width + "px"
|
||||
//livePreview.style.height = rect.height + "px"
|
||||
//}
|
||||
|
||||
livePreview.classList.remove("init");
|
||||
|
||||
var img = new Image();
|
||||
img.onload = function () {
|
||||
img.width = img.naturalWidth;
|
||||
img.height = img.naturalHeight;
|
||||
livePreview.appendChild(img);
|
||||
if (livePreview.childElementCount > 2) {
|
||||
livePreview.removeChild(livePreview.firstElementChild);
|
||||
}
|
||||
};
|
||||
img.src = res.live_preview;
|
||||
}
|
||||
|
||||
if (onProgress) {
|
||||
onProgress(res);
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
fun(id_task, res.id_live_preview);
|
||||
}, opts.live_preview_refresh_period || 500);
|
||||
},
|
||||
function () {
|
||||
removeProgressBar();
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
fun(id_task, 0);
|
||||
}
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
function start_training_textual_inversion() {
|
||||
gradioApp().querySelector("#ti_error").innerHTML = "";
|
||||
|
||||
var id = randomId();
|
||||
requestProgress(
|
||||
id,
|
||||
gradioApp().getElementById("ti_output"),
|
||||
gradioApp().getElementById("ti_gallery"),
|
||||
function () {},
|
||||
function (progress) {
|
||||
gradioApp().getElementById("ti_progress").innerHTML = progress.textinfo;
|
||||
}
|
||||
);
|
||||
|
||||
var res = args_to_array(arguments);
|
||||
|
||||
function start_training_textual_inversion(){
|
||||
gradioApp().querySelector('#ti_error').innerHTML=''
|
||||
res[0] = id;
|
||||
|
||||
var id = randomId()
|
||||
requestProgress(id, gradioApp().getElementById('ti_output'), gradioApp().getElementById('ti_gallery'), function(){}, function(progress){
|
||||
gradioApp().getElementById('ti_progress').innerHTML = progress.textinfo
|
||||
})
|
||||
|
||||
var res = args_to_array(arguments)
|
||||
|
||||
res[0] = id
|
||||
|
||||
return res
|
||||
return res;
|
||||
}
|
||||
|
||||
+1794
-1509
File diff suppressed because it is too large
Load Diff
@@ -1,104 +1,112 @@
|
||||
function gradioApp() {
|
||||
const elems = document.getElementsByTagName('gradio-app')
|
||||
const elem = elems.length == 0 ? document : elems[0]
|
||||
const elems = document.getElementsByTagName("gradio-app");
|
||||
const elem = elems.length == 0 ? document : elems[0];
|
||||
|
||||
if (elem !== document) elem.getElementById = function(id){ return document.getElementById(id) }
|
||||
return elem.shadowRoot ? elem.shadowRoot : elem
|
||||
if (elem !== document)
|
||||
elem.getElementById = function (id) {
|
||||
return document.getElementById(id);
|
||||
};
|
||||
return elem.shadowRoot ? elem.shadowRoot : elem;
|
||||
}
|
||||
|
||||
function get_uiCurrentTab() {
|
||||
return gradioApp().querySelector('#tabs button.selected')
|
||||
return gradioApp().querySelector("#tabs button.selected");
|
||||
}
|
||||
|
||||
function get_uiCurrentTabContent() {
|
||||
return gradioApp().querySelector('.tabitem[id^=tab_]:not([style*="display: none"])')
|
||||
return gradioApp().querySelector(
|
||||
'.tabitem[id^=tab_]:not([style*="display: none"])'
|
||||
);
|
||||
}
|
||||
|
||||
uiUpdateCallbacks = []
|
||||
uiLoadedCallbacks = []
|
||||
uiTabChangeCallbacks = []
|
||||
optionsChangedCallbacks = []
|
||||
let uiCurrentTab = null
|
||||
uiUpdateCallbacks = [];
|
||||
uiLoadedCallbacks = [];
|
||||
uiTabChangeCallbacks = [];
|
||||
optionsChangedCallbacks = [];
|
||||
let uiCurrentTab = null;
|
||||
|
||||
function onUiUpdate(callback){
|
||||
uiUpdateCallbacks.push(callback)
|
||||
function onUiUpdate(callback) {
|
||||
uiUpdateCallbacks.push(callback);
|
||||
}
|
||||
function onUiLoaded(callback){
|
||||
uiLoadedCallbacks.push(callback)
|
||||
function onUiLoaded(callback) {
|
||||
uiLoadedCallbacks.push(callback);
|
||||
}
|
||||
function onUiTabChange(callback){
|
||||
uiTabChangeCallbacks.push(callback)
|
||||
function onUiTabChange(callback) {
|
||||
uiTabChangeCallbacks.push(callback);
|
||||
}
|
||||
function onOptionsChanged(callback){
|
||||
optionsChangedCallbacks.push(callback)
|
||||
function onOptionsChanged(callback) {
|
||||
optionsChangedCallbacks.push(callback);
|
||||
}
|
||||
|
||||
function runCallback(x, m){
|
||||
try {
|
||||
x(m)
|
||||
} catch (e) {
|
||||
(console.error || console.log).call(console, e.message, e);
|
||||
}
|
||||
function runCallback(x, m) {
|
||||
try {
|
||||
x(m);
|
||||
} catch (e) {
|
||||
(console.error || console.log).call(console, e.message, e);
|
||||
}
|
||||
}
|
||||
function executeCallbacks(queue, m) {
|
||||
queue.forEach(function(x){runCallback(x, m)})
|
||||
queue.forEach(function (x) {
|
||||
runCallback(x, m);
|
||||
});
|
||||
}
|
||||
|
||||
var executedOnLoaded = false;
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var mutationObserver = new MutationObserver(function(m){
|
||||
if(!executedOnLoaded && gradioApp().querySelector('#txt2img_prompt')){
|
||||
executedOnLoaded = true;
|
||||
executeCallbacks(uiLoadedCallbacks);
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
var mutationObserver = new MutationObserver(function (m) {
|
||||
if (!executedOnLoaded && gradioApp().querySelector("#txt2img_prompt")) {
|
||||
executedOnLoaded = true;
|
||||
executeCallbacks(uiLoadedCallbacks);
|
||||
}
|
||||
|
||||
executeCallbacks(uiUpdateCallbacks, m);
|
||||
const newTab = get_uiCurrentTab();
|
||||
if ( newTab && ( newTab !== uiCurrentTab ) ) {
|
||||
uiCurrentTab = newTab;
|
||||
executeCallbacks(uiTabChangeCallbacks);
|
||||
}
|
||||
});
|
||||
mutationObserver.observe( gradioApp(), { childList:true, subtree:true })
|
||||
executeCallbacks(uiUpdateCallbacks, m);
|
||||
const newTab = get_uiCurrentTab();
|
||||
if (newTab && newTab !== uiCurrentTab) {
|
||||
uiCurrentTab = newTab;
|
||||
executeCallbacks(uiTabChangeCallbacks);
|
||||
}
|
||||
});
|
||||
mutationObserver.observe(gradioApp(), { childList: true, subtree: true });
|
||||
});
|
||||
|
||||
/**
|
||||
* Add a ctrl+enter as a shortcut to start a generation
|
||||
*/
|
||||
document.addEventListener('keydown', function(e) {
|
||||
var handled = false;
|
||||
if (e.key !== undefined) {
|
||||
if((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
|
||||
} else if (e.keyCode !== undefined) {
|
||||
if((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true;
|
||||
document.addEventListener("keydown", function (e) {
|
||||
var handled = false;
|
||||
if (e.key !== undefined) {
|
||||
if (e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))
|
||||
handled = true;
|
||||
} else if (e.keyCode !== undefined) {
|
||||
if (e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey)) handled = true;
|
||||
}
|
||||
if (handled) {
|
||||
button = get_uiCurrentTabContent().querySelector("button[id$=_generate]");
|
||||
if (button) {
|
||||
button.click();
|
||||
}
|
||||
if (handled) {
|
||||
button = get_uiCurrentTabContent().querySelector('button[id$=_generate]');
|
||||
if (button) {
|
||||
button.click();
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
})
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* checks that a UI element is not in another hidden element or tab content
|
||||
*/
|
||||
function uiElementIsVisible(el) {
|
||||
let isVisible = !el.closest('.\\!hidden');
|
||||
if ( ! isVisible ) {
|
||||
return false;
|
||||
}
|
||||
let isVisible = !el.closest(".\\!hidden");
|
||||
if (!isVisible) {
|
||||
return false;
|
||||
}
|
||||
|
||||
while( isVisible = el.closest('.tabitem')?.style.display !== 'none' ) {
|
||||
if ( ! isVisible ) {
|
||||
return false;
|
||||
} else if ( el.parentElement ) {
|
||||
el = el.parentElement
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
while ((isVisible = el.closest(".tabitem")?.style.display !== "none")) {
|
||||
if (!isVisible) {
|
||||
return false;
|
||||
} else if (el.parentElement) {
|
||||
el = el.parentElement;
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
return isVisible;
|
||||
}
|
||||
return isVisible;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user