aboutsummaryrefslogtreecommitdiffstats
path: root/javascript
diff options
context:
space:
mode:
Diffstat (limited to 'javascript')
-rw-r--r--javascript/aspectRatioOverlay.js226
-rw-r--r--javascript/contextMenus.js349
-rw-r--r--javascript/dragdrop.js47
-rw-r--r--javascript/edit-attention.js216
-rw-r--r--javascript/extensions.js123
-rw-r--r--javascript/extraNetworks.js356
-rw-r--r--javascript/generationParams.js48
-rw-r--r--javascript/hints.js121
-rw-r--r--javascript/hires_fix.js40
-rw-r--r--javascript/imageMaskFix.js26
-rw-r--r--javascript/imageParams.js5
-rw-r--r--javascript/imageviewer.js281
-rw-r--r--javascript/imageviewerGamepad.js57
-rw-r--r--javascript/localization.js341
-rw-r--r--javascript/notification.js20
-rw-r--r--javascript/progressbar.js250
-rw-r--r--javascript/textualInversion.js34
-rw-r--r--javascript/ui.js476
-rw-r--r--javascript/ui_settings_hints.js62
19 files changed, 1690 insertions, 1388 deletions
diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js
index 0f164b82..1c08a1a9 100644
--- a/javascript/aspectRatioOverlay.js
+++ b/javascript/aspectRatioOverlay.js
@@ -1,113 +1,113 @@
-
-let currentWidth = null;
-let currentHeight = null;
-let arFrameTimeout = setTimeout(function(){},0);
-
-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
- }
-
- var inImg2img = Boolean(gradioApp().querySelector("button.rounded-t-lg.border-gray-200"))
-
- if(!inImg2img){
- return;
- }
-
- var targetElement = null;
-
- var tabIndex = get_tab_index('mode_img2img')
- if(tabIndex == 0){ // img2img
- targetElement = gradioApp().querySelector('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().getRootNode().appendChild(arPreviewRect)
- }
-
-
-
- var viewportOffset = targetElement.getBoundingClientRect();
-
- viewportscale = Math.min( targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight )
-
- scaledx = targetElement.naturalWidth*viewportscale
- scaledy = targetElement.naturalHeight*viewportscale
-
- cleintRectTop = (viewportOffset.top+window.scrollY)
- cleintRectLeft = (viewportOffset.left+window.scrollX)
- cleintRectCentreY = cleintRectTop + (targetElement.clientHeight/2)
- cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth/2)
-
- viewRectTop = cleintRectCentreY-(scaledy/2)
- viewRectLeft = cleintRectCentreX-(scaledx/2)
- arRectWidth = scaledx
- arRectHeight = scaledy
-
- arscale = Math.min( arRectWidth/currentWidth, arRectHeight/currentHeight )
- arscaledx = currentWidth*arscale
- arscaledy = currentHeight*arscale
-
- arRectTop = cleintRectCentreY-(arscaledy/2)
- arRectLeft = cleintRectCentreX-(arscaledx/2)
- arRectWidth = arscaledx
- 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';
-
- }
-
-}
-
-
-onUiUpdate(function(){
- var arPreviewRect = gradioApp().querySelector('#imageARPreview');
- if(arPreviewRect){
- arPreviewRect.style.display = 'none';
- }
- var inImg2img = Boolean(gradioApp().querySelector("button.rounded-t-lg.border-gray-200"))
- 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
- }
- })
- }
-});
+
+let currentWidth = null;
+let currentHeight = null;
+let arFrameTimeout = setTimeout(function() {}, 0);
+
+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;
+ }
+
+ var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block";
+
+ if (!inImg2img) {
+ return;
+ }
+
+ 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');
+ }
+
+
+ if (targetElement) {
+
+ var arPreviewRect = gradioApp().querySelector('#imageARPreview');
+ if (!arPreviewRect) {
+ arPreviewRect = document.createElement('div');
+ arPreviewRect.id = "imageARPreview";
+ gradioApp().appendChild(arPreviewRect);
+ }
+
+
+
+ var viewportOffset = targetElement.getBoundingClientRect();
+
+ var viewportscale = Math.min(targetElement.clientWidth / targetElement.naturalWidth, targetElement.clientHeight / targetElement.naturalHeight);
+
+ 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';
+
+ }
+
+}
+
+
+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;
+ }
+ });
+ }
+ }
+});
diff --git a/javascript/contextMenus.js b/javascript/contextMenus.js
index 11bcce1b..f14af1d4 100644
--- a/javascript/contextMenus.js
+++ b/javascript/contextMenus.js
@@ -1,177 +1,172 @@
-
-contextMenuInit = function(){
- let eventListenerApplied=false;
- let menuSpecs = new Map();
-
- const uid = function(){
- return Date.now().toString(36) + Math.random().toString(36).substr(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;
-
- let oldMenu = gradioApp().querySelector('#context-menu')
- if(oldMenu){
- oldMenu.remove()
- }
-
- let tabButton = uiCurrentTab
- let baseStyle = window.getComputedStyle(tabButton)
-
- 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';
- contextMenu.append(contextMenuList);
-
- menuEntries.forEach(function(entry){
- let contextMenuEntry = document.createElement('a')
- contextMenuEntry.innerHTML = entry['name']
- contextMenuEntry.addEventListener("click", function(e) {
- entry['func']();
- })
- contextMenuList.append(contextMenuEntry);
-
- })
-
- gradioApp().getRootNode().appendChild(contextMenu)
-
- let menuWidth = contextMenu.offsetWidth + 4;
- let menuHeight = contextMenu.offsetHeight + 4;
-
- let windowWidth = window.innerWidth;
- let windowHeight = window.innerHeight;
-
- if ( (windowWidth - posx) < menuWidth ) {
- contextMenu.style.left = windowWidth - menuWidth + "px";
- }
-
- if ( (windowHeight - posy) < menuHeight ) {
- contextMenu.style.top = windowHeight - menuHeight + "px";
- }
-
- }
-
- function appendContextMenuOption(targetElementSelector,entryName,entryFunction){
-
- currentItems = menuSpecs.get(targetElementSelector)
-
- if(!currentItems){
- currentItems = []
- menuSpecs.set(targetElementSelector,currentItems);
- }
- let newItem = {'id':targetElementSelector+'_'+uid(),
- 'name':entryName,
- 'func':entryFunction,
- 'isNew':true}
-
- currentItems.push(newItem)
- return newItem['id']
- }
-
- function removeContextMenuOption(uid){
- menuSpecs.forEach(function(v,k) {
- 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){
- 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()
- }
- });
- 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()
- return
- }
- })
- });
- eventListenerApplied=true
-
- }
-
- return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener]
-}
-
-initResponse = contextMenuInit();
-appendContextMenuOption = initResponse[0];
-removeContextMenuOption = initResponse[1];
-addContextMenuEventListener = initResponse[2];
-
-(function(){
- //Start example Context Menu Items
- let generateOnRepeat = function(genbuttonid,interruptbuttonid){
- let genbutton = gradioApp().querySelector(genbuttonid);
- let interruptbutton = gradioApp().querySelector(interruptbuttonid);
- if(!interruptbutton.offsetParent){
- genbutton.click();
- }
- clearInterval(window.generateOnRepeatInterval)
- window.generateOnRepeatInterval = setInterval(function(){
- if(!interruptbutton.offsetParent){
- genbutton.click();
- }
- },
- 500)
- }
-
- 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)
-
- appendContextMenuOption('#roll','Roll three',
- function(){
- let rollbutton = get_uiCurrentTabContent().querySelector('#roll');
- setTimeout(function(){rollbutton.click()},100)
- setTimeout(function(){rollbutton.click()},200)
- setTimeout(function(){rollbutton.click()},300)
- }
- )
-})();
-//End example Context Menu Items
-
-onUiUpdate(function(){
- addContextMenuEventListener()
-});
+
+var contextMenuInit = function() {
+ let eventListenerApplied = false;
+ let menuSpecs = new Map();
+
+ 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;
+
+ let oldMenu = gradioApp().querySelector('#context-menu');
+ if (oldMenu) {
+ oldMenu.remove();
+ }
+
+ 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 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']();
+ });
+ contextMenuList.append(contextMenuEntry);
+
+ });
+
+ gradioApp().appendChild(contextMenu);
+
+ let menuWidth = contextMenu.offsetWidth + 4;
+ let menuHeight = contextMenu.offsetHeight + 4;
+
+ let windowWidth = window.innerWidth;
+ let windowHeight = window.innerHeight;
+
+ if ((windowWidth - posx) < menuWidth) {
+ contextMenu.style.left = windowWidth - menuWidth + "px";
+ }
+
+ if ((windowHeight - posy) < menuHeight) {
+ contextMenu.style.top = windowHeight - menuHeight + "px";
+ }
+
+ }
+
+ function appendContextMenuOption(targetElementSelector, entryName, entryFunction) {
+
+ var currentItems = menuSpecs.get(targetElementSelector);
+
+ if (!currentItems) {
+ currentItems = [];
+ menuSpecs.set(targetElementSelector, currentItems);
+ }
+ let newItem = {
+ id: targetElementSelector + '_' + uid(),
+ name: entryName,
+ func: entryFunction,
+ isNew: true
+ };
+
+ 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) {
+ v.splice(index, 1);
+ }
+ });
+ }
+
+ function addContextMenuEventListener() {
+ if (eventListenerApplied) {
+ return;
+ }
+ gradioApp().addEventListener("click", function(e) {
+ if (!e.isTrusted) {
+ return;
+ }
+
+ 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();
+ }
+ });
+ });
+ eventListenerApplied = true;
+
+ }
+
+ return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener];
+};
+
+var initResponse = contextMenuInit();
+var appendContextMenuOption = initResponse[0];
+var removeContextMenuOption = initResponse[1];
+var addContextMenuEventListener = initResponse[2];
+
+(function() {
+ //Start example Context Menu Items
+ let generateOnRepeat = function(genbuttonid, interruptbuttonid) {
+ let genbutton = gradioApp().querySelector(genbuttonid);
+ let interruptbutton = gradioApp().querySelector(interruptbuttonid);
+ if (!interruptbutton.offsetParent) {
+ genbutton.click();
+ }
+ clearInterval(window.generateOnRepeatInterval);
+ window.generateOnRepeatInterval = setInterval(function() {
+ if (!interruptbutton.offsetParent) {
+ genbutton.click();
+ }
+ },
+ 500);
+ };
+
+ 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);
+
+})();
+//End example Context Menu Items
+
+onUiUpdate(function() {
+ addContextMenuEventListener();
+});
diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js
index fe008924..e316a365 100644
--- a/javascript/dragdrop.js
+++ b/javascript/dragdrop.js
@@ -1,11 +1,11 @@
// allows drag-dropping files into gradio image elements, and also pasting images from clipboard
-function isValidImageList( files ) {
+function isValidImageList(files) {
return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
}
-function dropReplaceImage( imgWrap, files ) {
- if ( ! isValidImageList( files ) ) {
+function dropReplaceImage(imgWrap, files) {
+ if (!isValidImageList(files)) {
return;
}
@@ -14,44 +14,44 @@ function dropReplaceImage( imgWrap, files ) {
imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
const callback = () => {
const fileInput = imgWrap.querySelector('input[type="file"]');
- if ( fileInput ) {
- if ( files.length === 0 ) {
+ 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'));
+ fileInput.dispatchEvent(new Event('change'));
}
};
-
- if ( imgWrap.closest('#pnginfo_image') ) {
+
+ if (imgWrap.closest('#pnginfo_image')) {
// special treatment for PNG Info tab, wait for fetch request to finish
const oldFetch = window.fetch;
- window.fetch = async (input, options) => {
+ window.fetch = async(input, options) => {
const response = await oldFetch(input, options);
- if ( 'api/predict/' === input ) {
+ if ('api/predict/' === input) {
const content = await response.text();
window.fetch = oldFetch;
- window.requestAnimationFrame( () => callback() );
+ window.requestAnimationFrame(() => callback());
return new Response(content, {
status: response.status,
statusText: response.statusText,
headers: response.headers
- })
+ });
}
return response;
- };
+ };
} else {
- window.requestAnimationFrame( () => callback() );
+ 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) {
+ if (!imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) {
return;
}
e.stopPropagation();
@@ -65,33 +65,34 @@ window.document.addEventListener('drop', e => {
return;
}
const imgWrap = target.closest('[data-testid="image"]');
- if ( !imgWrap ) {
+ if (!imgWrap) {
return;
}
e.stopPropagation();
e.preventDefault();
const files = e.dataTransfer.files;
- dropReplaceImage( imgWrap, files );
+ dropReplaceImage(imgWrap, files);
});
window.addEventListener('paste', e => {
const files = e.clipboardData.files;
- if ( ! isValidImageList( files ) ) {
+ if (!isValidImageList(files)) {
return;
}
const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
.filter(el => uiElementIsVisible(el));
- if ( ! visibleImageFields.length ) {
+ if (!visibleImageFields.length) {
return;
}
-
+
const firstFreeImageField = visibleImageFields
.filter(el => el.querySelector('input[type=file]'))?.[0];
dropReplaceImage(
firstFreeImageField ?
- firstFreeImageField :
- visibleImageFields[visibleImageFields.length - 1]
- , files );
+ firstFreeImageField :
+ visibleImageFields[visibleImageFields.length - 1]
+ , files
+ );
});
diff --git a/javascript/edit-attention.js b/javascript/edit-attention.js
index 619bb1fa..fdf00b4d 100644
--- a/javascript/edit-attention.js
+++ b/javascript/edit-attention.js
@@ -1,96 +1,120 @@
-function keyupEditAttention(event){
- let target = event.originalTarget || event.composedPath()[0];
- if (!target.matches("[id*='_toprow'] textarea.gr-text-input[placeholder]")) return;
- if (! (event.metaKey || event.ctrlKey)) 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;
-
- 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;
- }
-
- // If the user hasn't selected anything, let's select their current parenthesis block
- if(! selectCurrentParenthesisBlock('<', '>')){
- selectCurrentParenthesisBlock('(', ')')
- }
-
- event.preventDefault();
-
- closeCharacter = ')'
- 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;
- }
-
- end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1;
- 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"
-
- 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);
-}); \ No newline at end of file
+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 selectionStart = target.selectionStart;
+ let selectionEnd = target.selectionEnd;
+ let text = target.value;
+
+ 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;
+ }
+
+ // If the user hasn't selected anything, let's select their current parenthesis block or word
+ if (!selectCurrentParenthesisBlock('<', '>') && !selectCurrentParenthesisBlock('(', ')')) {
+ selectCurrentWord();
+ }
+
+ 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;
+ }
+
+ 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);
+});
diff --git a/javascript/extensions.js b/javascript/extensions.js
index c593cd2e..efeaf3a5 100644
--- a/javascript/extensions.js
+++ b/javascript/extensions.js
@@ -1,49 +1,74 @@
-
-function extensions_apply(_, _){
- var disable = []
- var update = []
-
- gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){
- if(x.name.startsWith("enable_") && ! x.checked)
- disable.push(x.name.substr(7))
-
- if(x.name.startsWith("update_") && x.checked)
- update.push(x.name.substr(7))
- })
-
- restart_reload()
-
- return [JSON.stringify(disable), JSON.stringify(update)]
-}
-
-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.substr(7))
- })
-
- gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){
- x.innerHTML = "Loading..."
- })
-
-
- var id = randomId()
- requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function(){
-
- })
-
- return [id, JSON.stringify(disable)]
-}
-
-function install_extension_from_index(button, url){
- button.disabled = "disabled"
- button.value = "Installing..."
-
- textarea = gradioApp().querySelector('#extension_to_install textarea')
- textarea.value = url
- updateInput(textarea)
-
- gradioApp().querySelector('#install_extension_button').click()
-}
+
+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));
+ }
+
+ if (x.name.startsWith("update_") && x.checked) {
+ update.push(x.name.substring(7));
+ }
+ });
+
+ restart_reload();
+
+ return [JSON.stringify(disable), JSON.stringify(update), disable_all];
+}
+
+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 .extension_status').forEach(function(x) {
+ x.innerHTML = "Loading...";
+ });
+
+
+ var id = randomId();
+ requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function() {
+
+ });
+
+ return [id, JSON.stringify(disable)];
+}
+
+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);
+
+ 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];
+}
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 2fb87cd5..aafe0a00 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -1,141 +1,215 @@
-
-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')
-
- search.classList.add('search')
- tabs.appendChild(search)
- tabs.appendChild(refresh)
-
- search.addEventListener("input", function(evt){
- searchTerm = search.value.toLowerCase()
-
- gradioApp().querySelectorAll('#'+tabname+'_extra_tabs div.card').forEach(function(elem){
- text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase()
- elem.style.display = text.indexOf(searchTerm) == -1 ? "none" : ""
- })
- });
-}
-
-var activePromptTextarea = {};
-
-function setupExtraNetworks(){
- setupExtraNetworksForTab('txt2img')
- setupExtraNetworksForTab('img2img')
-
- function registerPrompt(tabname, id){
- var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
-
- if (! activePromptTextarea[tabname]){
- activePromptTextarea[tabname] = textarea
- }
-
- textarea.addEventListener("focus", function(){
- activePromptTextarea[tabname] = textarea;
- });
- }
-
- registerPrompt('txt2img', 'txt2img_prompt')
- registerPrompt('txt2img', 'txt2img_neg_prompt')
- registerPrompt('img2img', 'img2img_prompt')
- registerPrompt('img2img', 'img2img_neg_prompt')
-}
-
-onUiLoaded(setupExtraNetworks)
-
-var re_extranet = /<([^:]+:[^:]+):[\d\.]+>/;
-var re_extranet_g = /\s+<([^:]+:[^:]+):[\d\.]+>/g;
-
-function tryToRemoveExtraNetworkFromPrompt(textarea, text){
- var m = text.match(re_extranet)
- if(! m) return false
-
- var partToSearch = m[1]
- var replaced = false
- var newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found, index){
- m = found.match(re_extranet);
- if(m[1] == partToSearch){
- replaced = true;
- return ""
- }
- return found;
- })
-
- if(replaced){
- textarea.value = newTextareaText
- return true;
- }
-
- return false
-}
-
-function cardClicked(tabname, textToAdd, allowNegativePrompt){
- var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea")
-
- if(! tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)){
- textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd
- }
-
- updateInput(textarea)
-}
-
-function saveCardPreview(event, tabname, filename){
- var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea')
- var button = gradioApp().getElementById(tabname + '_save_preview')
-
- textarea.value = filename
- updateInput(textarea)
-
- button.click()
-
- event.stopPropagation()
- event.preventDefault()
-}
-
-function extraNetworksSearchButton(tabs_id, event){
- searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea')
- button = event.target
- text = button.classList.contains("search-all") ? "" : button.textContent.trim()
-
- 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){
- elem = document.createElement('pre')
- elem.classList.add('popup-metadata');
- elem.textContent = text;
-
- popup(elem);
-}
+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');
+
+ search.classList.add('search');
+ tabs.appendChild(search);
+ tabs.appendChild(refresh);
+
+ var applyFilter = function() {
+ var searchTerm = search.value.toLowerCase();
+
+ gradioApp().querySelectorAll('#' + tabname + '_extra_tabs div.card').forEach(function(elem) {
+ var searchOnly = elem.querySelector('.search_only');
+ var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase();
+
+ var visible = text.indexOf(searchTerm) != -1;
+
+ if (searchOnly && searchTerm.length < 4) {
+ visible = false;
+ }
+
+ elem.style.display = visible ? "" : "none";
+ });
+ };
+
+ search.addEventListener("input", applyFilter);
+ applyFilter();
+
+ extraNetworksApplyFilter[tabname] = applyFilter;
+}
+
+function applyExtraNetworkFilter(tabname) {
+ setTimeout(extraNetworksApplyFilter[tabname], 1);
+}
+
+var extraNetworksApplyFilter = {};
+var activePromptTextarea = {};
+
+function setupExtraNetworks() {
+ setupExtraNetworksForTab('txt2img');
+ setupExtraNetworksForTab('img2img');
+
+ function registerPrompt(tabname, id) {
+ var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
+
+ if (!activePromptTextarea[tabname]) {
+ activePromptTextarea[tabname] = textarea;
+ }
+
+ textarea.addEventListener("focus", function() {
+ activePromptTextarea[tabname] = textarea;
+ });
+ }
+
+ registerPrompt('txt2img', 'txt2img_prompt');
+ registerPrompt('txt2img', 'txt2img_neg_prompt');
+ registerPrompt('img2img', 'img2img_prompt');
+ registerPrompt('img2img', 'img2img_neg_prompt');
+}
+
+onUiLoaded(setupExtraNetworks);
+
+var re_extranet = /<([^:]+:[^:]+):[\d.]+>/;
+var re_extranet_g = /\s+<([^:]+:[^:]+):[\d.]+>/g;
+
+function tryToRemoveExtraNetworkFromPrompt(textarea, text) {
+ var m = text.match(re_extranet);
+ var replaced = false;
+ var newTextareaText;
+ if (m) {
+ var partToSearch = m[1];
+ newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found) {
+ m = found.match(re_extranet);
+ if (m[1] == partToSearch) {
+ replaced = true;
+ return "";
+ }
+ return found;
+ });
+ } else {
+ newTextareaText = textarea.value.replaceAll(new RegExp(text, "g"), function(found) {
+ if (found == text) {
+ replaced = true;
+ return "";
+ }
+ return found;
+ });
+ }
+
+ if (replaced) {
+ textarea.value = newTextareaText;
+ return true;
+ }
+
+ return false;
+}
+
+function cardClicked(tabname, textToAdd, allowNegativePrompt) {
+ var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea");
+
+ if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) {
+ textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd;
+ }
+
+ updateInput(textarea);
+}
+
+function saveCardPreview(event, tabname, filename) {
+ var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea');
+ var button = gradioApp().getElementById(tabname + '_save_preview');
+
+ textarea.value = filename;
+ updateInput(textarea);
+
+ button.click();
+
+ event.stopPropagation();
+ event.preventDefault();
+}
+
+function extraNetworksSearchButton(tabs_id, event) {
+ var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea');
+ var button = event.target;
+ var text = button.classList.contains("search-all") ? "" : button.textContent.trim();
+
+ searchTextarea.value = text;
+ updateInput(searchTextarea);
+}
+
+var globalPopup = null;
+var globalPopupInner = null;
+function popup(contents) {
+ if (!globalPopup) {
+ globalPopup = document.createElement('div');
+ globalPopup.onclick = function() {
+ globalPopup.style.display = "none";
+ };
+ globalPopup.classList.add('global-popup');
+
+ var close = document.createElement('div');
+ close.classList.add('global-popup-close');
+ close.onclick = function() {
+ globalPopup.style.display = "none";
+ };
+ close.title = "Close";
+ globalPopup.appendChild(close);
+
+ globalPopupInner = document.createElement('div');
+ globalPopupInner.onclick = function(event) {
+ event.stopPropagation(); return false;
+ };
+ globalPopupInner.classList.add('global-popup-inner');
+ globalPopup.appendChild(globalPopupInner);
+
+ gradioApp().appendChild(globalPopup);
+ }
+
+ globalPopupInner.innerHTML = '';
+ globalPopupInner.appendChild(contents);
+
+ globalPopup.style.display = "flex";
+}
+
+function extraNetworksShowMetadata(text) {
+ var elem = document.createElement('pre');
+ elem.classList.add('popup-metadata');
+ elem.textContent = text;
+
+ popup(elem);
+}
+
+function requestGet(url, data, handler, errorHandler) {
+ var xhr = new XMLHttpRequest();
+ var args = Object.keys(data).map(function(k) {
+ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]);
+ }).join('&');
+ xhr.open("GET", url + "?" + args, true);
+
+ xhr.onreadystatechange = function() {
+ if (xhr.readyState === 4) {
+ if (xhr.status === 200) {
+ try {
+ var js = JSON.parse(xhr.responseText);
+ handler(js);
+ } catch (error) {
+ console.error(error);
+ errorHandler();
+ }
+ } else {
+ errorHandler();
+ }
+ }
+ };
+ var js = JSON.stringify(data);
+ xhr.send(js);
+}
+
+function extraNetworksRequestMetadata(event, extraPage, cardName) {
+ var showError = function() {
+ extraNetworksShowMetadata("there was an error getting metadata");
+ };
+
+ requestGet("./sd_extra_networks/metadata", {page: extraPage, item: cardName}, function(data) {
+ if (data && data.metadata) {
+ extraNetworksShowMetadata(data.metadata);
+ } else {
+ showError();
+ }
+ }, showError);
+
+ event.stopPropagation();
+}
diff --git a/javascript/generationParams.js b/javascript/generationParams.js
index 95f05093..a877f8a5 100644
--- a/javascript/generationParams.js
+++ b/javascript/generationParams.js
@@ -1,33 +1,35 @@
// 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")
- }
- if (!modal) {
- modal = gradioApp().getElementById('lightboxModal')
- modalObserver.observe(modal, { attributes : true, attributeFilter : ['style'] });
- }
+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']});
+ }
});
let modalObserver = new MutationObserver(function(mutations) {
- mutations.forEach(function(mutationRecord) {
- let selectedTab = gradioApp().querySelector('#tabs div button.bg-white')?.innerText
- if (mutationRecord.target.style.display === 'none' && selectedTab === 'txt2img' || selectedTab === 'img2img')
- gradioApp().getElementById(selectedTab+"_generation_info_button").click()
- });
+ 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) {
- 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;
}
diff --git a/javascript/hints.js b/javascript/hints.js
index 7f4101b2..46f342cb 100644
--- a/javascript/hints.js
+++ b/javascript/hints.js
@@ -1,16 +1,17 @@
// mouseover tooltips for various UI elements
-titles = {
+var titles = {
"Sampling steps": "How many times to improve the generated image iteratively; higher values take longer; very low values can produce bad results",
"Sampling method": "Which algorithm to use to produce the image",
- "GFPGAN": "Restore low quality faces using GFPGAN neural network",
- "Euler a": "Euler Ancestral - very creative, each can get a completely different picture depending on step count, setting steps higher than 30-40 does not help",
- "DDIM": "Denoising Diffusion Implicit Models - best at inpainting",
- "UniPC": "Unified Predictor-Corrector Framework for Fast Sampling of Diffusion Models",
- "DPM adaptive": "Ignores step count - uses a number of steps determined by the CFG and resolution",
-
- "Batch count": "How many batches of images to create (has no impact on generation performance or VRAM usage)",
- "Batch size": "How many image to create in a single batch (increases generation performance at cost of higher VRAM usage)",
+ "GFPGAN": "Restore low quality faces using GFPGAN neural network",
+ "Euler a": "Euler Ancestral - very creative, each can get a completely different picture depending on step count, setting steps higher than 30-40 does not help",
+ "DDIM": "Denoising Diffusion Implicit Models - best at inpainting",
+ "UniPC": "Unified Predictor-Corrector Framework for Fast Sampling of Diffusion Models",
+ "DPM adaptive": "Ignores step count - uses a number of steps determined by the CFG and resolution",
+
+ "\u{1F4D0}": "Auto detect size from img2img",
+ "Batch count": "How many batches of images to create (has no impact on generation performance or VRAM usage)",
+ "Batch size": "How many image to create in a single batch (increases generation performance at cost of higher VRAM usage)",
"CFG Scale": "Classifier Free Guidance Scale - how strongly the image should conform to prompt - lower values produce more creative results",
"Seed": "A value that determines the output of random number generator - if you create an image with same parameters and seed as another image, you'll get the same result",
"\u{1f3b2}\ufe0f": "Set seed to -1, which will cause a new random number to be used every time",
@@ -18,11 +19,11 @@ titles = {
"\u2199\ufe0f": "Read generation parameters from prompt or last generation if prompt is empty into user interface.",
"\u{1f4c2}": "Open images output directory",
"\u{1f4be}": "Save style",
- "\u{1f5d1}": "Clear prompt",
+ "\u{1f5d1}\ufe0f": "Clear prompt",
"\u{1f4cb}": "Apply selected styles to current prompt",
"\u{1f4d2}": "Paste available values into the field",
- "\u{1f3b4}": "Show extra networks",
-
+ "\u{1f3b4}": "Show/hide extra networks",
+ "\u{1f300}": "Restore progress",
"Inpaint a part of image": "Draw a mask over an image, and the script will regenerate the masked area with content according to prompt",
"SD upscale": "Upscale image normally, split result into tiles, improve each tile using img2img, merge whole image back",
@@ -40,7 +41,6 @@ titles = {
"Inpaint at full resolution": "Upscale masked region to target resolution, do inpainting, downscale back and paste into original image",
"Denoising strength": "Determines how little respect the algorithm should have for image's content. At 0, nothing will change, and at 1 you'll get an unrelated image. With values below 1.0, processing will take less steps than the Sampling Steps slider specifies.",
- "Denoising strength change factor": "In loopback mode, on each loop the denoising strength is multiplied by this value. <1 means decreasing variety so your sequence will converge on a fixed picture. >1 means increasing variety so your sequence will become more and more chaotic.",
"Skip": "Stop processing current image and continue processing.",
"Interrupt": "Stop processing images and return any results accumulated so far.",
@@ -67,12 +67,14 @@ titles = {
"Interrogate": "Reconstruct prompt from existing image and put it into the prompt field.",
- "Images filename pattern": "Use following tags to define how filenames for images are chosen: [steps], [cfg], [prompt_hash], [prompt], [prompt_no_styles], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [model_name], [prompt_words], [date], [datetime], [datetime<Format>], [datetime<Format><Time Zone>], [job_timestamp]; leave empty for default.",
- "Directory name pattern": "Use following tags to define how subdirectories for images and grids are chosen: [steps], [cfg],[prompt_hash], [prompt], [prompt_no_styles], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [model_name], [prompt_words], [date], [datetime], [datetime<Format>], [datetime<Format><Time Zone>], [job_timestamp]; leave empty for default.",
+ "Images filename pattern": "Use tags like [seed] and [date] to define how filenames for images are chosen. Leave empty for default.",
+ "Directory name pattern": "Use tags like [seed] and [date] to define how subdirectories for images and grids are chosen. Leave empty for default.",
"Max prompt words": "Set the maximum number of words to be used in the [prompt_words] option; ATTENTION: If the words are too long, they may exceed the maximum length of the file path that the system can handle",
- "Loopback": "Process an image, use it as an input, repeat.",
- "Loops": "How many times to repeat processing an image and using it as input for the next iteration",
+ "Loopback": "Performs img2img processing multiple times. Output images are used as input for the next loop.",
+ "Loops": "How many times to process an image. Each output is used as the input of the next loop. If set to 1, behavior will be as if this script were not used.",
+ "Final denoising strength": "The denoising strength for the final loop of each image in the batch.",
+ "Denoising strength curve": "The denoising curve controls the rate of denoising strength change each loop. Aggressive: Most of the change will happen towards the start of the loops. Linear: Change will be constant through all loops. Lazy: Most of the change will happen towards the end of the loops.",
"Style 1": "Style to apply; styles have components for both positive and negative prompts and apply to both",
"Style 2": "Style to apply; styles have components for both positive and negative prompts and apply to both",
@@ -85,7 +87,6 @@ titles = {
"vram": "Torch active: Peak amount of VRAM used by Torch during generation, excluding cached data.\nTorch reserved: Peak amount of VRAM allocated by Torch, including all active and cached data.\nSys VRAM: Peak amount of VRAM allocation across all applications / total GPU VRAM (peak utilization%).",
"Eta noise seed delta": "If this values is non-zero, it will be added to seed and used to initialize RNG for noises when using samplers with Eta. You can use this to produce even more variation of images, or you can use this to match images of other software if you know what you are doing.",
- "Do not add watermark to images": "If this option is enabled, watermark will not be added to created images. Warning: if you do not add watermark, you may be behaving in an unethical manner.",
"Filename word regex": "This regular expression will be used extract words from filename, and they will be joined using the option below into label text used for training. Leave empty to keep filename text as it is.",
"Filename join string": "This string will be used to join split words into a single line if the option above is enabled.",
@@ -96,7 +97,7 @@ titles = {
"Add difference": "Result = A + (B - C) * M",
"No interpolation": "Result = A",
- "Initialization text": "If the number of tokens is more than the number of vectors, some may be skipped.\nLeave the textbox empty to start with zeroed out vectors",
+ "Initialization text": "If the number of tokens is more than the number of vectors, some may be skipped.\nLeave the textbox empty to start with zeroed out vectors",
"Learning rate": "How fast should training go. Low values will take longer to train, high values may fail to converge (not generate accurate results) and/or may break the embedding (This has happened if you see Loss: nan in the training info textbox. If this happens, you need to manually restore your embedding from an older not-broken backup).\n\nYou can set a single numeric value, or multiple learning rates using the syntax:\n\n rate_1:max_steps_1, rate_2:max_steps_2, ...\n\nEG: 0.005:100, 1e-3:1000, 1e-5\n\nWill train with rate of 0.005 for first 100 steps, then 1e-3 until 1000 steps, then 1e-5 for all remaining steps.",
"Clip skip": "Early stopping parameter for CLIP model; 1 is stop at last layer as usual, 2 is stop at penultimate layer, etc.",
@@ -111,37 +112,57 @@ titles = {
"Resize height to": "Resizes image to this height. If 0, height is inferred from either of two nearby sliders.",
"Multiplier for extra networks": "When adding extra network such as Hypernetwork or Lora to prompt, use this multiplier for it.",
"Discard weights with matching name": "Regular expression; if weights's name matches it, the weights is not written to the resulting checkpoint. Use ^model_ema to discard EMA weights.",
- "Extra networks tab order": "Comma-separated list of tab names; tabs listed here will appear in the extra networks UI first and in order lsited."
+ "Extra networks tab order": "Comma-separated list of tab names; tabs listed here will appear in the extra networks UI first and in order lsited.",
+ "Negative Guidance minimum sigma": "Skip negative prompt for steps where image is already mostly denoised; the higher this value, the more skips there will be; provides increased performance in exchange for minor quality reduction."
+};
+
+function updateTooltipForSpan(span) {
+ if (span.title) return; // already has a title
+
+ let tooltip = localization[titles[span.textContent]] || titles[span.textContent];
+
+ if (!tooltip) {
+ tooltip = localization[titles[span.value]] || titles[span.value];
+ }
+
+ if (!tooltip) {
+ for (const c of span.classList) {
+ if (c in titles) {
+ tooltip = localization[titles[c]] || titles[c];
+ break;
+ }
+ }
+ }
+
+ if (tooltip) {
+ span.title = tooltip;
+ }
}
+function updateTooltipForSelect(select) {
+ if (select.onchange != null) return;
+
+ select.onchange = function() {
+ select.title = localization[titles[select.value]] || titles[select.value] || "";
+ };
+}
-onUiUpdate(function(){
- gradioApp().querySelectorAll('span, button, select, p').forEach(function(span){
- tooltip = titles[span.textContent];
-
- if(!tooltip){
- tooltip = titles[span.value];
- }
-
- if(!tooltip){
- for (const c of span.classList) {
- if (c in titles) {
- tooltip = titles[c];
- break;
- }
- }
- }
-
- if(tooltip){
- span.title = tooltip;
- }
- })
-
- gradioApp().querySelectorAll('select').forEach(function(select){
- if (select.onchange != null) return;
-
- select.onchange = function(){
- select.title = titles[select.value] || "";
- }
- })
-})
+var observedTooltipElements = {SPAN: 1, BUTTON: 1, SELECT: 1, P: 1};
+
+onUiUpdate(function(m) {
+ m.forEach(function(record) {
+ record.addedNodes.forEach(function(node) {
+ if (observedTooltipElements[node.tagName]) {
+ updateTooltipForSpan(node);
+ }
+ if (node.tagName == "SELECT") {
+ updateTooltipForSelect(node);
+ }
+
+ if (node.querySelectorAll) {
+ node.querySelectorAll('span, button, select, p').forEach(updateTooltipForSpan);
+ node.querySelectorAll('select').forEach(updateTooltipForSelect);
+ }
+ });
+ });
+});
diff --git a/javascript/hires_fix.js b/javascript/hires_fix.js
index 0629475f..0d04ab3b 100644
--- a/javascript/hires_fix.js
+++ b/javascript/hires_fix.js
@@ -1,22 +1,18 @@
-
-function setInactive(elem, inactive){
- if(inactive){
- elem.classList.add('inactive')
- } else{
- elem.classList.remove('inactive')
- }
-}
-
-function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y){
- hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale')
- hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x')
- hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y')
-
- gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : ""
-
- setInactive(hrUpscaleBy, opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0)
- setInactive(hrResizeX, opts.use_old_hires_fix_width_height || hr_resize_x == 0)
- setInactive(hrResizeY, opts.use_old_hires_fix_width_height || hr_resize_y == 0)
-
- return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y]
-}
+
+function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y) {
+ function setInactive(elem, inactive) {
+ elem.classList.toggle('inactive', !!inactive);
+ }
+
+ var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale');
+ var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x');
+ var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y');
+
+ gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "";
+
+ setInactive(hrUpscaleBy, opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0);
+ setInactive(hrResizeX, opts.use_old_hires_fix_width_height || hr_resize_x == 0);
+ setInactive(hrResizeY, opts.use_old_hires_fix_width_height || hr_resize_y == 0);
+
+ return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y];
+}
diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js
index 9fe7a603..3c9b8a6f 100644
--- a/javascript/imageMaskFix.js
+++ b/javascript/imageMaskFix.js
@@ -2,20 +2,18 @@
* temporary fix for https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/668
* @see https://github.com/gradio-app/gradio/issues/1721
*/
-window.addEventListener( 'resize', () => imageMaskResize());
function imageMaskResize() {
const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas');
- if ( ! canvases.length ) {
- canvases_fixed = false;
- window.removeEventListener( 'resize', imageMaskResize );
- return;
+ if (!canvases.length) {
+ window.removeEventListener('resize', imageMaskResize);
+ return;
}
const wrapper = canvases[0].closest('.touch-none');
const previewImage = wrapper.previousElementSibling;
- if ( ! previewImage.complete ) {
- previewImage.addEventListener( 'load', () => imageMaskResize());
+ if (!previewImage.complete) {
+ previewImage.addEventListener('load', imageMaskResize);
return;
}
@@ -24,22 +22,22 @@ function imageMaskResize() {
const nw = previewImage.naturalWidth;
const nh = previewImage.naturalHeight;
const portrait = nh > nw;
- const factor = portrait;
- const wW = Math.min(w, portrait ? h/nh*nw : w/nw*nw);
- const wH = Math.min(h, portrait ? h/nh*nh : w/nw*nh);
+ const wW = Math.min(w, portrait ? h / nh * nw : w / nw * nw);
+ const wH = Math.min(h, portrait ? h / nh * nh : w / nw * nh);
wrapper.style.width = `${wW}px`;
wrapper.style.height = `${wH}px`;
wrapper.style.left = `0px`;
wrapper.style.top = `0px`;
- canvases.forEach( c => {
+ canvases.forEach(c => {
c.style.width = c.style.height = '';
c.style.maxWidth = '100%';
c.style.maxHeight = '100%';
c.style.objectFit = 'contain';
});
- }
-
- onUiUpdate(() => imageMaskResize());
+}
+
+onUiUpdate(imageMaskResize);
+window.addEventListener('resize', imageMaskResize);
diff --git a/javascript/imageParams.js b/javascript/imageParams.js
index 67404a89..057e2d39 100644
--- a/javascript/imageParams.js
+++ b/javascript/imageParams.js
@@ -1,7 +1,6 @@
-window.onload = (function(){
+window.onload = (function() {
window.addEventListener('drop', e => {
const target = e.composedPath()[0];
- const idx = selected_gallery_index();
if (target.placeholder.indexOf("Prompt") == -1) return;
let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image";
@@ -11,7 +10,7 @@ window.onload = (function(){
const imgParent = gradioApp().getElementById(prompt_target);
const files = e.dataTransfer.files;
const fileInput = imgParent.querySelector('input[type="file"]');
- if ( fileInput ) {
+ if (fileInput) {
fileInput.files = files;
fileInput.dispatchEvent(new Event('change'));
}
diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 28e748b7..78e24eb9 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -5,24 +5,24 @@ function closeModal() {
function showModal(event) {
const source = event.target || event.srcElement;
- const modalImage = gradioApp().getElementById("modalImage")
- const lb = gradioApp().getElementById("lightboxModal")
- modalImage.src = source.src
+ const modalImage = gradioApp().getElementById("modalImage");
+ const lb = gradioApp().getElementById("lightboxModal");
+ modalImage.src = source.src;
if (modalImage.style.display === 'none') {
lb.style.setProperty('background-image', 'url(' + source.src + ')');
}
lb.style.display = "flex";
- lb.focus()
+ lb.focus();
- const tabTxt2Img = gradioApp().getElementById("tab_txt2img")
- const tabImg2Img = gradioApp().getElementById("tab_img2img")
+ const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
+ const tabImg2Img = gradioApp().getElementById("tab_img2img");
// show the save button in modal only on txt2img or img2img tabs
if (tabTxt2Img.style.display != "none" || tabImg2Img.style.display != "none") {
- gradioApp().getElementById("modal_save").style.display = "inline"
+ gradioApp().getElementById("modal_save").style.display = "inline";
} else {
- gradioApp().getElementById("modal_save").style.display = "none"
+ gradioApp().getElementById("modal_save").style.display = "none";
}
- event.stopPropagation()
+ event.stopPropagation();
}
function negmod(n, m) {
@@ -30,157 +30,129 @@ function negmod(n, m) {
}
function updateOnBackgroundChange() {
- const modalImage = gradioApp().getElementById("modalImage")
+ const modalImage = gradioApp().getElementById("modalImage");
if (modalImage && modalImage.offsetParent) {
- let allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
- let currentButton = null
- allcurrentButtons.forEach(function(elem) {
- if (elem.parentElement.offsetParent) {
- currentButton = elem;
- }
- })
+ let currentButton = selected_gallery_button();
if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
modalImage.src = currentButton.children[0].src;
if (modalImage.style.display === 'none') {
- modal.style.setProperty('background-image', `url(${modalImage.src})`)
+ const modal = gradioApp().getElementById("lightboxModal");
+ modal.style.setProperty('background-image', `url(${modalImage.src})`);
}
}
}
}
function modalImageSwitch(offset) {
- var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
- var galleryButtons = []
- allgalleryButtons.forEach(function(elem) {
- if (elem.parentElement.offsetParent) {
- galleryButtons.push(elem);
- }
- })
+ var galleryButtons = all_gallery_buttons();
if (galleryButtons.length > 1) {
- var allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")
- var currentButton = null
- allcurrentButtons.forEach(function(elem) {
- if (elem.parentElement.offsetParent) {
- currentButton = elem;
- }
- })
+ var currentButton = selected_gallery_button();
- var result = -1
+ var result = -1;
galleryButtons.forEach(function(v, i) {
if (v == currentButton) {
- result = i
+ result = i;
}
- })
+ });
if (result != -1) {
- nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]
- nextButton.click()
+ var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)];
+ nextButton.click();
const modalImage = gradioApp().getElementById("modalImage");
const modal = gradioApp().getElementById("lightboxModal");
modalImage.src = nextButton.children[0].src;
if (modalImage.style.display === 'none') {
- modal.style.setProperty('background-image', `url(${modalImage.src})`)
+ modal.style.setProperty('background-image', `url(${modalImage.src})`);
}
setTimeout(function() {
- modal.focus()
- }, 10)
+ modal.focus();
+ }, 10);
}
}
}
-function saveImage(){
- const tabTxt2Img = gradioApp().getElementById("tab_txt2img")
- const tabImg2Img = gradioApp().getElementById("tab_img2img")
- const saveTxt2Img = "save_txt2img"
- const saveImg2Img = "save_img2img"
+function saveImage() {
+ const tabTxt2Img = gradioApp().getElementById("tab_txt2img");
+ const tabImg2Img = gradioApp().getElementById("tab_img2img");
+ const saveTxt2Img = "save_txt2img";
+ const saveImg2Img = "save_img2img";
if (tabTxt2Img.style.display != "none") {
- gradioApp().getElementById(saveTxt2Img).click()
+ gradioApp().getElementById(saveTxt2Img).click();
} else if (tabImg2Img.style.display != "none") {
- gradioApp().getElementById(saveImg2Img).click()
+ gradioApp().getElementById(saveImg2Img).click();
} else {
- console.error("missing implementation for saving modal of this type")
+ console.error("missing implementation for saving modal of this type");
}
}
function modalSaveImage(event) {
- saveImage()
- event.stopPropagation()
+ saveImage();
+ event.stopPropagation();
}
function modalNextImage(event) {
- modalImageSwitch(1)
- event.stopPropagation()
+ modalImageSwitch(1);
+ event.stopPropagation();
}
function modalPrevImage(event) {
- modalImageSwitch(-1)
- event.stopPropagation()
+ modalImageSwitch(-1);
+ event.stopPropagation();
}
function modalKeyHandler(event) {
switch (event.key) {
- case "s":
- saveImage()
- break;
- case "ArrowLeft":
- modalPrevImage(event)
- break;
- case "ArrowRight":
- modalNextImage(event)
- break;
- case "Escape":
- closeModal();
- break;
+ case "s":
+ saveImage();
+ break;
+ case "ArrowLeft":
+ modalPrevImage(event);
+ break;
+ case "ArrowRight":
+ modalNextImage(event);
+ break;
+ case "Escape":
+ closeModal();
+ break;
}
}
-function showGalleryImage() {
- setTimeout(function() {
- fullImg_preview = gradioApp().querySelectorAll('img.w-full.object-contain')
-
- if (fullImg_preview != null) {
- fullImg_preview.forEach(function function_name(e) {
- if (e.dataset.modded)
- return;
- e.dataset.modded = true;
- if(e && e.parentElement.tagName == 'DIV'){
- e.style.cursor='pointer'
- e.style.userSelect='none'
-
- var isFirefox = isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
-
- // For Firefox, listening on click first switched to next image then shows the lightbox.
- // If you know how to fix this without switching to mousedown event, please.
- // For other browsers the event is click to make it possiblr to drag picture.
- var event = isFirefox ? 'mousedown' : 'click'
-
- e.addEventListener(event, function (evt) {
- if(!opts.js_modal_lightbox || evt.button != 0) return;
- modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)
- evt.preventDefault()
- showModal(evt)
- }, true);
- }
- });
- }
+function setupImageForLightbox(e) {
+ if (e.dataset.modded) {
+ return;
+ }
+
+ e.dataset.modded = true;
+ e.style.cursor = 'pointer';
+ e.style.userSelect = 'none';
+
+ var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+ // For Firefox, listening on click first switched to next image then shows the lightbox.
+ // If you know how to fix this without switching to mousedown event, please.
+ // For other browsers the event is click to make it possiblr to drag picture.
+ var event = isFirefox ? 'mousedown' : 'click';
+
+ e.addEventListener(event, function(evt) {
+ if (!opts.js_modal_lightbox || evt.button != 0) return;
+
+ modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed);
+ evt.preventDefault();
+ showModal(evt);
+ }, true);
- }, 100);
}
function modalZoomSet(modalImage, enable) {
- if (enable) {
- modalImage.classList.add('modalImageFullscreen');
- } else {
- modalImage.classList.remove('modalImageFullscreen');
- }
+ if (modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);
}
function modalZoomToggle(event) {
- modalImage = gradioApp().getElementById("modalImage");
- modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'))
- event.stopPropagation()
+ var modalImage = gradioApp().getElementById("modalImage");
+ modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'));
+ event.stopPropagation();
}
function modalTileImageToggle(event) {
@@ -189,97 +161,94 @@ function modalTileImageToggle(event) {
const isTiling = modalImage.style.display === 'none';
if (isTiling) {
modalImage.style.display = 'block';
- modal.style.setProperty('background-image', 'none')
+ modal.style.setProperty('background-image', 'none');
} else {
modalImage.style.display = 'none';
- modal.style.setProperty('background-image', `url(${modalImage.src})`)
+ modal.style.setProperty('background-image', `url(${modalImage.src})`);
}
- event.stopPropagation()
-}
-
-function galleryImageHandler(e) {
- if (e && e.parentElement.tagName == 'BUTTON') {
- e.onclick = showGalleryImage;
- }
+ event.stopPropagation();
}
onUiUpdate(function() {
- fullImg_preview = gradioApp().querySelectorAll('img.w-full')
+ var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img');
if (fullImg_preview != null) {
- fullImg_preview.forEach(galleryImageHandler);
+ fullImg_preview.forEach(setupImageForLightbox);
}
updateOnBackgroundChange();
-})
+});
document.addEventListener("DOMContentLoaded", function() {
- const modalFragment = document.createDocumentFragment();
- const modal = document.createElement('div')
+ //const modalFragment = document.createDocumentFragment();
+ const modal = document.createElement('div');
modal.onclick = closeModal;
modal.id = "lightboxModal";
- modal.tabIndex = 0
- modal.addEventListener('keydown', modalKeyHandler, true)
+ modal.tabIndex = 0;
+ modal.addEventListener('keydown', modalKeyHandler, true);
- const modalControls = document.createElement('div')
+ const modalControls = document.createElement('div');
modalControls.className = 'modalControls gradio-container';
modal.append(modalControls);
- const modalZoom = document.createElement('span')
+ const modalZoom = document.createElement('span');
modalZoom.className = 'modalZoom cursor';
- modalZoom.innerHTML = '&#10529;'
- modalZoom.addEventListener('click', modalZoomToggle, true)
+ modalZoom.innerHTML = '&#10529;';
+ modalZoom.addEventListener('click', modalZoomToggle, true);
modalZoom.title = "Toggle zoomed view";
- modalControls.appendChild(modalZoom)
+ modalControls.appendChild(modalZoom);
- const modalTileImage = document.createElement('span')
+ const modalTileImage = document.createElement('span');
modalTileImage.className = 'modalTileImage cursor';
- modalTileImage.innerHTML = '&#8862;'
- modalTileImage.addEventListener('click', modalTileImageToggle, true)
+ modalTileImage.innerHTML = '&#8862;';
+ modalTileImage.addEventListener('click', modalTileImageToggle, true);
modalTileImage.title = "Preview tiling";
- modalControls.appendChild(modalTileImage)
+ modalControls.appendChild(modalTileImage);
- const modalSave = document.createElement("span")
- modalSave.className = "modalSave cursor"
- modalSave.id = "modal_save"
- modalSave.innerHTML = "&#x1F5AB;"
- modalSave.addEventListener("click", modalSaveImage, true)
- modalSave.title = "Save Image(s)"
- modalControls.appendChild(modalSave)
+ const modalSave = document.createElement("span");
+ modalSave.className = "modalSave cursor";
+ modalSave.id = "modal_save";
+ modalSave.innerHTML = "&#x1F5AB;";
+ modalSave.addEventListener("click", modalSaveImage, true);
+ modalSave.title = "Save Image(s)";
+ modalControls.appendChild(modalSave);
- const modalClose = document.createElement('span')
+ const modalClose = document.createElement('span');
modalClose.className = 'modalClose cursor';
- modalClose.innerHTML = '&times;'
+ modalClose.innerHTML = '&times;';
modalClose.onclick = closeModal;
modalClose.title = "Close image viewer";
- modalControls.appendChild(modalClose)
+ modalControls.appendChild(modalClose);
- const modalImage = document.createElement('img')
+ const modalImage = document.createElement('img');
modalImage.id = 'modalImage';
modalImage.onclick = closeModal;
- modalImage.tabIndex = 0
- modalImage.addEventListener('keydown', modalKeyHandler, true)
- modal.appendChild(modalImage)
+ modalImage.tabIndex = 0;
+ modalImage.addEventListener('keydown', modalKeyHandler, true);
+ modal.appendChild(modalImage);
- const modalPrev = document.createElement('a')
+ const modalPrev = document.createElement('a');
modalPrev.className = 'modalPrev';
- modalPrev.innerHTML = '&#10094;'
- modalPrev.tabIndex = 0
+ modalPrev.innerHTML = '&#10094;';
+ modalPrev.tabIndex = 0;
modalPrev.addEventListener('click', modalPrevImage, true);
- modalPrev.addEventListener('keydown', modalKeyHandler, true)
- modal.appendChild(modalPrev)
+ modalPrev.addEventListener('keydown', modalKeyHandler, true);
+ modal.appendChild(modalPrev);
- const modalNext = document.createElement('a')
+ const modalNext = document.createElement('a');
modalNext.className = 'modalNext';
- modalNext.innerHTML = '&#10095;'
- modalNext.tabIndex = 0
+ modalNext.innerHTML = '&#10095;';
+ modalNext.tabIndex = 0;
modalNext.addEventListener('click', modalNextImage, true);
- modalNext.addEventListener('keydown', modalKeyHandler, true)
+ modalNext.addEventListener('keydown', modalKeyHandler, true);
- modal.appendChild(modalNext)
+ modal.appendChild(modalNext);
+ try {
+ gradioApp().appendChild(modal);
+ } catch (e) {
+ gradioApp().body.appendChild(modal);
+ }
- gradioApp().getRootNode().appendChild(modal)
-
- document.body.appendChild(modalFragment);
+ document.body.appendChild(modal);
});
diff --git a/javascript/imageviewerGamepad.js b/javascript/imageviewerGamepad.js
new file mode 100644
index 00000000..31d226de
--- /dev/null
+++ b/javascript/imageviewerGamepad.js
@@ -0,0 +1,57 @@
+window.addEventListener('gamepadconnected', (e) => {
+ const index = e.gamepad.index;
+ let isWaiting = false;
+ setInterval(async() => {
+ if (!opts.js_modal_lightbox_gamepad || isWaiting) return;
+ const gamepad = navigator.getGamepads()[index];
+ const xValue = gamepad.axes[0];
+ if (xValue <= -0.3) {
+ modalPrevImage(e);
+ isWaiting = true;
+ } else if (xValue >= 0.3) {
+ modalNextImage(e);
+ isWaiting = true;
+ }
+ if (isWaiting) {
+ await sleepUntil(() => {
+ const xValue = navigator.getGamepads()[index].axes[0];
+ if (xValue < 0.3 && xValue > -0.3) {
+ return true;
+ }
+ }, opts.js_modal_lightbox_gamepad_repeat);
+ isWaiting = false;
+ }
+ }, 10);
+});
+
+/*
+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 (!opts.js_modal_lightbox_gamepad || isScrolling) return;
+ isScrolling = true;
+
+ if (e.deltaX <= -0.6) {
+ modalPrevImage(e);
+ } else if (e.deltaX >= 0.6) {
+ modalNextImage(e);
+ }
+
+ setTimeout(() => {
+ isScrolling = false;
+ }, opts.js_modal_lightbox_gamepad_repeat);
+});
+
+function sleepUntil(f, timeout) {
+ return new Promise((resolve) => {
+ const timeStart = new Date();
+ const wait = setInterval(function() {
+ if (f() || new Date() - timeStart > timeout) {
+ clearInterval(wait);
+ resolve();
+ }
+ }, 20);
+ });
+}
diff --git a/javascript/localization.js b/javascript/localization.js
index 1a5a1dbb..eb22b8a7 100644
--- a/javascript/localization.js
+++ b/javascript/localization.js
@@ -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',
-}
-
-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;
-}
-
-function canBeTranslated(node, text){
- if(! text) return false;
- if(! node.parentElement) return false;
-
- parentType = node.parentElement.nodeName
- if(parentType=='SCRIPT' || parentType=='STYLE' || parentType=='TEXTAREA') return false;
-
- if (parentType=='OPTION' || parentType=='SPAN'){
- 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 getTranslation(text){
- if(! text) return undefined
-
- if(translated_lines[text] === undefined){
- original_lines[text] = 1
- }
-
- tl = localization[text]
- if(tl !== undefined){
- translated_lines[tl] = 1
- }
-
- return tl
-}
-
-function processTextNode(node){
- text = node.textContent.trim()
-
- if(! canBeTranslated(node, text)) return
-
- tl = getTranslation(text)
- if(tl !== undefined){
- node.textContent = tl
- }
-}
-
-function processNode(node){
- if(node.nodeType == 3){
- processTextNode(node)
- return
- }
-
- 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 dumpTranslations(){
- 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)
- })
- });
-})
-
-
-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();
-
- 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() {
- 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);
-
- element.click();
-
- document.body.removeChild(element);
-}
+
+// localization = {} -- the dict with translations is created by the backend
+
+var ignore_ids_for_localization = {
+ setting_sd_hypernetwork: 'OPTION',
+ setting_sd_model_checkpoint: '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',
+};
+
+var re_num = /^[.\d]+$/;
+var re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u;
+
+var original_lines = {};
+var translated_lines = {};
+
+function hasLocalization() {
+ return window.localization && Object.keys(window.localization).length > 0;
+}
+
+function textNodesUnder(el) {
+ var n, a = [], walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
+ while ((n = walk.nextNode())) a.push(n);
+ return a;
+}
+
+function canBeTranslated(node, text) {
+ if (!text) return false;
+ if (!node.parentElement) return false;
+
+ var parentType = node.parentElement.nodeName;
+ if (parentType == 'SCRIPT' || parentType == 'STYLE' || parentType == 'TEXTAREA') return false;
+
+ 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 getTranslation(text) {
+ if (!text) return undefined;
+
+ if (translated_lines[text] === undefined) {
+ original_lines[text] = 1;
+ }
+
+ var tl = localization[text];
+ if (tl !== undefined) {
+ translated_lines[tl] = 1;
+ }
+
+ return tl;
+}
+
+function processTextNode(node) {
+ var text = node.textContent.trim();
+
+ if (!canBeTranslated(node, text)) return;
+
+ var tl = getTranslation(text);
+ if (tl !== undefined) {
+ node.textContent = tl;
+ }
+}
+
+function processNode(node) {
+ if (node.nodeType == 3) {
+ processTextNode(node);
+ return;
+ }
+
+ if (node.title) {
+ let tl = getTranslation(node.title);
+ if (tl !== undefined) {
+ node.title = tl;
+ }
+ }
+
+ if (node.placeholder) {
+ let tl = getTranslation(node.placeholder);
+ if (tl !== undefined) {
+ node.placeholder = tl;
+ }
+ }
+
+ textNodesUnder(node).forEach(function(node) {
+ processTextNode(node);
+ });
+}
+
+function dumpTranslations() {
+ if (!hasLocalization()) {
+ // If we don't have any localization,
+ // we will not have traversed the app to find
+ // original_lines, so do that now.
+ processNode(gradioApp());
+ }
+ var dumped = {};
+ if (localization.rtl) {
+ dumped.rtl = true;
+ }
+
+ for (const text in original_lines) {
+ if (dumped[text] !== undefined) continue;
+ dumped[text] = localization[text] || text;
+ }
+
+ return dumped;
+}
+
+function download_localization() {
+ 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);
+
+ element.click();
+
+ document.body.removeChild(element);
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+ if (!hasLocalization()) {
+ return;
+ }
+
+ onUiUpdate(function(m) {
+ m.forEach(function(mutation) {
+ mutation.addedNodes.forEach(function(node) {
+ processNode(node);
+ });
+ });
+ });
+
+ 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();
+
+ 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});
+ }
+});
diff --git a/javascript/notification.js b/javascript/notification.js
index 5ae6df24..a68a76f2 100644
--- a/javascript/notification.js
+++ b/javascript/notification.js
@@ -2,20 +2,20 @@
let lastHeadImg = null;
-notificationButton = 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', function (evt) {
- 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"] img.h-full.w-full.overflow-hidden');
+ const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"][style*="display: block"] div[id$="_results"] .thumbnail-item > img');
if (galleryPreviews == null) return;
@@ -42,7 +42,7 @@ onUiUpdate(function(){
}
);
- notification.onclick = function(_){
+ notification.onclick = function(_) {
parent.focus();
this.close();
};
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index 9ccc9da4..29299787 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -1,95 +1,29 @@
// code related to showing and updating progressbar shown as the image is being made
+function rememberGallerySelection() {
-galleries = {}
-storedGallerySelections = {}
-galleryObservers = {}
-
-function rememberGallerySelection(id_gallery){
- storedGallerySelections[id_gallery] = getGallerySelectedIndex(id_gallery)
}
-function getGallerySelectedIndex(id_gallery){
- let galleryButtons = gradioApp().querySelectorAll('#'+id_gallery+' .gallery-item')
- let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2')
-
- let currentlySelectedIndex = -1
- galleryButtons.forEach(function(v, i){ if(v==galleryBtnSelected) { currentlySelectedIndex = i } })
+function getGallerySelectedIndex() {
- return currentlySelectedIndex
}
-// this is a workaround for https://github.com/gradio-app/gradio/issues/2984
-function check_gallery(id_gallery){
- let gallery = gradioApp().getElementById(id_gallery)
- // if gallery has no change, no need to setting up observer again.
- if (gallery && galleries[id_gallery] !== gallery){
- galleries[id_gallery] = gallery;
- if(galleryObservers[id_gallery]){
- galleryObservers[id_gallery].disconnect();
- }
-
- storedGallerySelections[id_gallery] = -1
-
- galleryObservers[id_gallery] = new MutationObserver(function (){
- let galleryButtons = gradioApp().querySelectorAll('#'+id_gallery+' .gallery-item')
- let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2')
- let currentlySelectedIndex = getGallerySelectedIndex(id_gallery)
- prevSelectedIndex = storedGallerySelections[id_gallery]
- storedGallerySelections[id_gallery] = -1
-
- if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) {
- // automatically re-open previously selected index (if exists)
- activeElement = gradioApp().activeElement;
- let scrollX = window.scrollX;
- let scrollY = window.scrollY;
-
- galleryButtons[prevSelectedIndex].click();
- showGalleryImage();
-
- // When the gallery button is clicked, it gains focus and scrolls itself into view
- // We need to scroll back to the previous position
- setTimeout(function (){
- window.scrollTo(scrollX, scrollY);
- }, 50);
-
- if(activeElement){
- // i fought this for about an hour; i don't know why the focus is lost or why this helps recover it
- // if someone has a better solution please by all means
- setTimeout(function (){
- activeElement.focus({
- preventScroll: true // Refocus the element that was focused before the gallery was opened without scrolling to it
- })
- }, 1);
- }
- }
- })
- galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false })
- }
-}
-
-onUiUpdate(function(){
- check_gallery('txt2img_gallery')
- check_gallery('img2img_gallery')
-})
-
-function request(url, data, handler, errorHandler){
+function request(url, data, handler, errorHandler) {
var xhr = new XMLHttpRequest();
- var url = url;
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
- xhr.onreadystatechange = function () {
+ xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
try {
var js = JSON.parse(xhr.responseText);
- handler(js)
+ handler(js);
} catch (error) {
console.error(error);
- errorHandler()
+ errorHandler();
}
- } else{
- errorHandler()
+ } else {
+ errorHandler();
}
}
};
@@ -97,147 +31,147 @@ function request(url, data, handler, errorHandler){
xhr.send(js);
}
-function pad2(x){
- return x<10 ? '0'+x : x
+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 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 setTitle(progress){
- var title = 'Stable Diffusion'
+function setTitle(progress) {
+ var title = 'Stable Diffusion';
- if(opts.show_progress_in_title && progress){
+ if (opts.show_progress_in_title && progress) {
title = '[' + progress.trim() + '] ' + title;
}
- if(document.title != title){
- document.title = 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)+")"
+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){
- 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'
- divProgress.style.display = opts.show_progressbar ? "block" : "none"
- var divInner = document.createElement('div')
- divInner.className='progress'
-
- divProgress.appendChild(divInner)
- parentProgressbar.insertBefore(divProgress, progressbarContainer)
-
- if(parentGallery){
- var livePreview = document.createElement('div')
- livePreview.className='livePreview'
- parentGallery.insertBefore(livePreview, gallery)
+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';
+ divProgress.style.display = opts.show_progressbar ? "block" : "none";
+ var divInner = document.createElement('div');
+ divInner.className = 'progress';
+
+ divProgress.appendChild(divInner);
+ parentProgressbar.insertBefore(divProgress, progressbarContainer);
+
+ if (parentGallery) {
+ var livePreview = document.createElement('div');
+ livePreview.className = 'livePreview';
+ parentGallery.insertBefore(livePreview, gallery);
}
- var removeProgressBar = function(){
- setTitle("")
- parentProgressbar.removeChild(divProgress)
- if(parentGallery) parentGallery.removeChild(livePreview)
- atEnd()
- }
+ var removeProgressBar = function() {
+ setTitle("");
+ parentProgressbar.removeChild(divProgress);
+ if (parentGallery) parentGallery.removeChild(livePreview);
+ atEnd();
+ };
- 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 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()
+ var rect = progressbarContainer.getBoundingClientRect();
- if(rect.width){
+ if (rect.width) {
divProgress.style.width = rect.width + "px";
}
- progressText = ""
+ let progressText = "";
- divInner.style.width = ((res.progress || 0) * 100.0) + '%'
- divInner.style.background = res.progress ? "" : "transparent"
+ 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.progress > 0) {
+ progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%';
}
- if(res.eta){
- progressText += " ETA: " + formatTime(res.eta)
+ if (res.eta) {
+ progressText += " ETA: " + formatTime(res.eta);
}
- setTitle(progressText)
+ setTitle(progressText);
- if(res.textinfo && res.textinfo.indexOf("\n") == -1){
- progressText = res.textinfo + " " + progressText
+ if (res.textinfo && res.textinfo.indexOf("\n") == -1) {
+ progressText = res.textinfo + " " + progressText;
}
- divInner.textContent = progressText
+ divInner.textContent = progressText;
- var elapsedFromStart = (new Date() - dateStart) / 1000
+ var elapsedFromStart = (new Date() - dateStart) / 1000;
- if(res.active) wasEverActive = true;
+ if (res.active) wasEverActive = true;
- if(! res.active && wasEverActive){
- removeProgressBar()
- return
+ if (!res.active && wasEverActive) {
+ removeProgressBar();
+ return;
}
- if(elapsedFromStart > 5 && !res.queued && !res.active){
- 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"
+ if (res.live_preview && gallery) {
+ rect = gallery.getBoundingClientRect();
+ if (rect.width) {
+ livePreview.style.width = rect.width + "px";
+ livePreview.style.height = rect.height + "px";
}
var img = new Image();
img.onload = function() {
- livePreview.appendChild(img)
- if(livePreview.childElementCount > 2){
- livePreview.removeChild(livePreview.firstElementChild)
+ livePreview.appendChild(img);
+ if (livePreview.childElementCount > 2) {
+ livePreview.removeChild(livePreview.firstElementChild);
}
- }
+ };
img.src = res.live_preview;
}
- if(onProgress){
- onProgress(res)
+ if (onProgress) {
+ onProgress(res);
}
setTimeout(() => {
fun(id_task, res.id_live_preview);
- }, opts.live_preview_refresh_period || 500)
- }, function(){
- removeProgressBar()
- })
- }
+ }, opts.live_preview_refresh_period || 500);
+ }, function() {
+ removeProgressBar();
+ });
+ };
- fun(id_task, 0)
+ fun(id_task, 0);
}
diff --git a/javascript/textualInversion.js b/javascript/textualInversion.js
index 0354b860..37e3d075 100644
--- a/javascript/textualInversion.js
+++ b/javascript/textualInversion.js
@@ -1,17 +1,17 @@
-
-
-
-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)
-
- res[0] = id
-
- return res
-}
+
+
+
+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);
+
+ res[0] = id;
+
+ return res;
+}
diff --git a/javascript/ui.js b/javascript/ui.js
index b7a8268a..c7316ddb 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -1,229 +1,302 @@
// various functions for interaction with ui.py not large enough to warrant putting them in separate files
-function set_theme(theme){
- gradioURL = window.location.href
+function set_theme(theme) {
+ var gradioURL = window.location.href;
if (!gradioURL.includes('?__theme=')) {
- window.location.replace(gradioURL + '?__theme=' + theme);
+ window.location.replace(gradioURL + '?__theme=' + theme);
}
}
-function selected_gallery_index(){
- var buttons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery] .gallery-item')
- var button = gradioApp().querySelector('[style="display: block;"].tabitem div[id$=_gallery] .gallery-item.\\!ring-2')
+function all_gallery_buttons() {
+ var allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
+ var visibleGalleryButtons = [];
+ allGalleryButtons.forEach(function(elem) {
+ if (elem.parentElement.offsetParent) {
+ visibleGalleryButtons.push(elem);
+ }
+ });
+ return visibleGalleryButtons;
+}
+
+function selected_gallery_button() {
+ var allCurrentButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected');
+ var visibleCurrentButton = null;
+ allCurrentButtons.forEach(function(elem) {
+ if (elem.parentElement.offsetParent) {
+ visibleCurrentButton = elem;
+ }
+ });
+ return visibleCurrentButton;
+}
+
+function selected_gallery_index() {
+ var buttons = all_gallery_buttons();
+ var button = selected_gallery_button();
- var result = -1
- buttons.forEach(function(v, i){ if(v==button) { result = i } })
+ var result = -1;
+ buttons.forEach(function(v, i) {
+ if (v == button) {
+ result = i;
+ }
+ });
- return result
+ return result;
}
-function extract_image_from_gallery(gallery){
- if(gallery.length == 1){
- return [gallery[0]]
+function extract_image_from_gallery(gallery) {
+ if (gallery.length == 0) {
+ return [null];
+ }
+ if (gallery.length == 1) {
+ return [gallery[0]];
}
- index = selected_gallery_index()
+ var index = selected_gallery_index();
- if (index < 0 || index >= gallery.length){
- return [null]
+ if (index < 0 || index >= gallery.length) {
+ // Use the first image in the gallery as the default
+ index = 0;
}
return [gallery[index]];
}
-function args_to_array(args){
- res = []
- for(var i=0;i<args.length;i++){
- res.push(args[i])
+function args_to_array(args) {
+ var res = [];
+ for (var i = 0; i < args.length; i++) {
+ res.push(args[i]);
}
- return res
+ return res;
}
-function switch_to_txt2img(){
+function switch_to_txt2img() {
gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click();
return args_to_array(arguments);
}
-function switch_to_img2img_tab(no){
+function switch_to_img2img_tab(no) {
gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
gradioApp().getElementById('mode_img2img').querySelectorAll('button')[no].click();
}
-function switch_to_img2img(){
+function switch_to_img2img() {
switch_to_img2img_tab(0);
return args_to_array(arguments);
}
-function switch_to_sketch(){
+function switch_to_sketch() {
switch_to_img2img_tab(1);
return args_to_array(arguments);
}
-function switch_to_inpaint(){
+function switch_to_inpaint() {
switch_to_img2img_tab(2);
return args_to_array(arguments);
}
-function switch_to_inpaint_sketch(){
+function switch_to_inpaint_sketch() {
switch_to_img2img_tab(3);
return args_to_array(arguments);
}
-function switch_to_inpaint(){
- gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
- gradioApp().getElementById('mode_img2img').querySelectorAll('button')[2].click();
-
- return args_to_array(arguments);
-}
-
-function switch_to_extras(){
+function switch_to_extras() {
gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click();
return args_to_array(arguments);
}
-function get_tab_index(tabId){
- var res = 0
+function get_tab_index(tabId) {
+ var res = 0;
- gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i){
- if(button.className.indexOf('bg-white') != -1)
- res = i
- })
+ gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i) {
+ if (button.className.indexOf('selected') != -1) {
+ res = i;
+ }
+ });
- return res
+ return res;
}
-function create_tab_index_args(tabId, args){
- var res = []
- for(var i=0; i<args.length; i++){
- res.push(args[i])
+function create_tab_index_args(tabId, args) {
+ var res = [];
+ for (var i = 0; i < args.length; i++) {
+ res.push(args[i]);
}
- res[0] = get_tab_index(tabId)
+ res[0] = get_tab_index(tabId);
- return res
+ return res;
}
function get_img2img_tab_index() {
- let res = args_to_array(arguments)
- res.splice(-2)
- res[0] = get_tab_index('mode_img2img')
- return res
+ let res = args_to_array(arguments);
+ res.splice(-2);
+ res[0] = get_tab_index('mode_img2img');
+ return res;
}
-function create_submit_args(args){
- res = []
- for(var i=0;i<args.length;i++){
- res.push(args[i])
+function create_submit_args(args) {
+ var res = [];
+ for (var i = 0; i < args.length; i++) {
+ res.push(args[i]);
}
// As it is currently, txt2img and img2img send back the previous output args (txt2img_gallery, generation_info, html_info) whenever you generate a new image.
// This can lead to uploading a huge gallery of previously generated images, which leads to an unnecessary delay between submitting and beginning to generate.
// I don't know why gradio is sending outputs along with inputs, but we can prevent sending the image gallery here, which seems to be an issue for some.
// If gradio at some point stops sending outputs, this may break something
- if(Array.isArray(res[res.length - 3])){
- res[res.length - 3] = null
+ if (Array.isArray(res[res.length - 3])) {
+ res[res.length - 3] = null;
}
- return res
+ return res;
+}
+
+function showSubmitButtons(tabname, show) {
+ gradioApp().getElementById(tabname + '_interrupt').style.display = show ? "none" : "block";
+ gradioApp().getElementById(tabname + '_skip').style.display = show ? "none" : "block";
}
-function showSubmitButtons(tabname, show){
- gradioApp().getElementById(tabname+'_interrupt').style.display = show ? "none" : "block"
- gradioApp().getElementById(tabname+'_skip').style.display = show ? "none" : "block"
+function showRestoreProgressButton(tabname, show) {
+ var button = gradioApp().getElementById(tabname + "_restore_progress");
+ if (!button) return;
+
+ button.style.display = show ? "flex" : "none";
+}
+
+function submit() {
+ showSubmitButtons('txt2img', false);
+
+ var id = randomId();
+ localStorage.setItem("txt2img_task_id", id);
+
+ requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
+ showSubmitButtons('txt2img', true);
+ localStorage.removeItem("txt2img_task_id");
+ showRestoreProgressButton('txt2img', false);
+ });
+
+ var res = create_submit_args(arguments);
+
+ res[0] = id;
+
+ return res;
}
-function submit(){
- rememberGallerySelection('txt2img_gallery')
- showSubmitButtons('txt2img', false)
+function submit_img2img() {
+ showSubmitButtons('img2img', false);
- var id = randomId()
- requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function(){
- showSubmitButtons('txt2img', true)
+ var id = randomId();
+ localStorage.setItem("img2img_task_id", id);
- })
+ requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
+ showSubmitButtons('img2img', true);
+ localStorage.removeItem("img2img_task_id");
+ showRestoreProgressButton('img2img', false);
+ });
- var res = create_submit_args(arguments)
+ var res = create_submit_args(arguments);
- res[0] = id
+ res[0] = id;
+ res[1] = get_tab_index('mode_img2img');
- return res
+ return res;
}
-function submit_img2img(){
- rememberGallerySelection('img2img_gallery')
- showSubmitButtons('img2img', false)
+function restoreProgressTxt2img() {
+ showRestoreProgressButton("txt2img", false);
+ var id = localStorage.getItem("txt2img_task_id");
+
+ id = localStorage.getItem("txt2img_task_id");
+
+ if (id) {
+ requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function() {
+ showSubmitButtons('txt2img', true);
+ }, null, 0);
+ }
+
+ return id;
+}
- var id = randomId()
- requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function(){
- showSubmitButtons('img2img', true)
- })
+function restoreProgressImg2img() {
+ showRestoreProgressButton("img2img", false);
- var res = create_submit_args(arguments)
+ var id = localStorage.getItem("img2img_task_id");
- res[0] = id
- res[1] = get_tab_index('mode_img2img')
+ if (id) {
+ requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function() {
+ showSubmitButtons('img2img', true);
+ }, null, 0);
+ }
- return res
+ return id;
}
-function modelmerger(){
- var id = randomId()
- requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function(){})
- var res = create_submit_args(arguments)
- res[0] = id
- return res
+onUiLoaded(function() {
+ showRestoreProgressButton('txt2img', localStorage.getItem("txt2img_task_id"));
+ showRestoreProgressButton('img2img', localStorage.getItem("img2img_task_id"));
+});
+
+
+function modelmerger() {
+ var id = randomId();
+ requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function() {});
+
+ var res = create_submit_args(arguments);
+ res[0] = id;
+ return res;
}
function ask_for_style_name(_, prompt_text, negative_prompt_text) {
- name_ = prompt('Style name:')
- return [name_, prompt_text, negative_prompt_text]
+ var name_ = prompt('Style name:');
+ return [name_, prompt_text, negative_prompt_text];
}
function confirm_clear_prompt(prompt, negative_prompt) {
- if(confirm("Delete prompt?")) {
- prompt = ""
- negative_prompt = ""
+ if (confirm("Delete prompt?")) {
+ prompt = "";
+ negative_prompt = "";
}
- return [prompt, negative_prompt]
+ return [prompt, negative_prompt];
}
-promptTokecountUpdateFuncs = {}
+var promptTokecountUpdateFuncs = {};
-function recalculatePromptTokens(name){
- if(promptTokecountUpdateFuncs[name]){
- promptTokecountUpdateFuncs[name]()
+function recalculatePromptTokens(name) {
+ if (promptTokecountUpdateFuncs[name]) {
+ promptTokecountUpdateFuncs[name]();
}
}
-function recalculate_prompts_txt2img(){
- recalculatePromptTokens('txt2img_prompt')
- recalculatePromptTokens('txt2img_neg_prompt')
+function recalculate_prompts_txt2img() {
+ recalculatePromptTokens('txt2img_prompt');
+ recalculatePromptTokens('txt2img_neg_prompt');
return args_to_array(arguments);
}
-function recalculate_prompts_img2img(){
- recalculatePromptTokens('img2img_prompt')
- recalculatePromptTokens('img2img_neg_prompt')
+function recalculate_prompts_img2img() {
+ recalculatePromptTokens('img2img_prompt');
+ recalculatePromptTokens('img2img_neg_prompt');
return args_to_array(arguments);
}
-opts = {}
-onUiUpdate(function(){
- if(Object.keys(opts).length != 0) return;
+var opts = {};
+onUiUpdate(function() {
+ if (Object.keys(opts).length != 0) return;
+
+ var json_elem = gradioApp().getElementById('settings_json');
+ if (json_elem == null) return;
- json_elem = gradioApp().getElementById('settings_json')
- if(json_elem == null) return;
+ var textarea = json_elem.querySelector('textarea');
+ var jsdata = textarea.value;
+ opts = JSON.parse(jsdata);
- var textarea = json_elem.querySelector('textarea')
- var jsdata = textarea.value
- opts = JSON.parse(jsdata)
- executeCallbacks(optionsChangedCallbacks);
+ executeCallbacks(optionsChangedCallbacks); /*global optionsChangedCallbacks*/
Object.defineProperty(textarea, 'value', {
set: function(newValue) {
@@ -232,7 +305,7 @@ onUiUpdate(function(){
valueProp.set.call(textarea, newValue);
if (oldValue != newValue) {
- opts = JSON.parse(textarea.value)
+ opts = JSON.parse(textarea.value);
}
executeCallbacks(optionsChangedCallbacks);
@@ -243,96 +316,157 @@ onUiUpdate(function(){
}
});
- json_elem.parentElement.style.display="none"
+ json_elem.parentElement.style.display = "none";
- function registerTextarea(id, id_counter, id_button){
- var prompt = gradioApp().getElementById(id)
- var counter = gradioApp().getElementById(id_counter)
+ function registerTextarea(id, id_counter, id_button) {
+ var prompt = gradioApp().getElementById(id);
+ var counter = gradioApp().getElementById(id_counter);
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
- if(counter.parentElement == prompt.parentElement){
- return
+ if (counter.parentElement == prompt.parentElement) {
+ return;
}
- prompt.parentElement.insertBefore(counter, prompt)
- counter.classList.add("token-counter")
- prompt.parentElement.style.position = "relative"
+ prompt.parentElement.insertBefore(counter, prompt);
+ prompt.parentElement.style.position = "relative";
- promptTokecountUpdateFuncs[id] = function(){ update_token_counter(id_button); }
- textarea.addEventListener("input", promptTokecountUpdateFuncs[id]);
+ promptTokecountUpdateFuncs[id] = function() {
+ update_token_counter(id_button);
+ };
+ textarea.addEventListener("input", promptTokecountUpdateFuncs[id]);
}
- registerTextarea('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button')
- registerTextarea('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button')
- registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button')
- registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button')
-
- show_all_pages = gradioApp().getElementById('settings_show_all_pages')
- settings_tabs = gradioApp().querySelector('#settings div')
- if(show_all_pages && settings_tabs){
- settings_tabs.appendChild(show_all_pages)
- show_all_pages.onclick = function(){
- gradioApp().querySelectorAll('#settings > div').forEach(function(elem){
+ registerTextarea('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button');
+ registerTextarea('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button');
+ registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button');
+ registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button');
+
+ var show_all_pages = gradioApp().getElementById('settings_show_all_pages');
+ var settings_tabs = gradioApp().querySelector('#settings div');
+ if (show_all_pages && settings_tabs) {
+ settings_tabs.appendChild(show_all_pages);
+ show_all_pages.onclick = function() {
+ gradioApp().querySelectorAll('#settings > div').forEach(function(elem) {
+ if (elem.id == "settings_tab_licenses") {
+ return;
+ }
+
elem.style.display = "block";
- })
- }
+ });
+ };
}
-})
+});
-onOptionsChanged(function(){
- elem = gradioApp().getElementById('sd_checkpoint_hash')
- sd_checkpoint_hash = opts.sd_checkpoint_hash || ""
- shorthash = sd_checkpoint_hash.substr(0,10)
+onOptionsChanged(function() {
+ var elem = gradioApp().getElementById('sd_checkpoint_hash');
+ var sd_checkpoint_hash = opts.sd_checkpoint_hash || "";
+ var shorthash = sd_checkpoint_hash.substring(0, 10);
- if(elem && elem.textContent != shorthash){
- elem.textContent = shorthash
- elem.title = sd_checkpoint_hash
- elem.href = "https://google.com/search?q=" + sd_checkpoint_hash
- }
-})
+ if (elem && elem.textContent != shorthash) {
+ elem.textContent = shorthash;
+ elem.title = sd_checkpoint_hash;
+ elem.href = "https://google.com/search?q=" + sd_checkpoint_hash;
+ }
+});
let txt2img_textarea, img2img_textarea = undefined;
-let wait_time = 800
+let wait_time = 800;
let token_timeouts = {};
function update_txt2img_tokens(...args) {
- update_token_counter("txt2img_token_button")
- if (args.length == 2)
- return args[0]
- return args;
+ update_token_counter("txt2img_token_button");
+ if (args.length == 2) {
+ return args[0];
+ }
+ return args;
}
function update_img2img_tokens(...args) {
- update_token_counter("img2img_token_button")
- if (args.length == 2)
- return args[0]
- return args;
+ update_token_counter(
+ "img2img_token_button"
+ );
+ if (args.length == 2) {
+ return args[0];
+ }
+ return args;
}
function update_token_counter(button_id) {
- if (token_timeouts[button_id])
- clearTimeout(token_timeouts[button_id]);
- token_timeouts[button_id] = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time);
+ if (token_timeouts[button_id]) {
+ clearTimeout(token_timeouts[button_id]);
+ }
+ token_timeouts[button_id] = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time);
}
-function restart_reload(){
- document.body.innerHTML='<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
- setTimeout(function(){location.reload()},2000)
+function restart_reload() {
+ document.body.innerHTML = '<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
+
+ var requestPing = function() {
+ requestGet("./internal/ping", {}, function(data) {
+ location.reload();
+ }, function() {
+ setTimeout(requestPing, 500);
+ });
+ };
+
+ setTimeout(requestPing, 2000);
- return []
+ return [];
}
// Simulate an `input` DOM event for Gradio Textbox component. Needed after you edit its contents in javascript, otherwise your edits
// will only visible on web page and not sent to python.
-function updateInput(target){
- let e = new Event("input", { bubbles: true })
- Object.defineProperty(e, "target", {value: target})
- target.dispatchEvent(e);
+function updateInput(target) {
+ let e = new Event("input", {bubbles: true});
+ Object.defineProperty(e, "target", {value: target});
+ target.dispatchEvent(e);
}
var desiredCheckpointName = null;
-function selectCheckpoint(name){
+function selectCheckpoint(name) {
desiredCheckpointName = name;
- gradioApp().getElementById('change_checkpoint').click()
+ gradioApp().getElementById('change_checkpoint').click();
+}
+
+function currentImg2imgSourceResolution(w, h, scaleBy) {
+ var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] img');
+ return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy];
+}
+
+function updateImg2imgResizeToTextAfterChangingImage() {
+ // At the time this is called from gradio, the image has no yet been replaced.
+ // There may be a better solution, but this is simple and straightforward so I'm going with it.
+
+ setTimeout(function() {
+ gradioApp().getElementById('img2img_update_resize_to').click();
+ }, 500);
+
+ return [];
+
+}
+
+
+
+function setRandomSeed(elem_id) {
+ var input = gradioApp().querySelector("#" + elem_id + " input");
+ if (!input) return [];
+
+ input.value = "-1";
+ updateInput(input);
+ return [];
+}
+
+function switchWidthHeight(tabname) {
+ var width = gradioApp().querySelector("#" + tabname + "_width input[type=number]");
+ var height = gradioApp().querySelector("#" + tabname + "_height input[type=number]");
+ if (!width || !height) return [];
+
+ var tmp = width.value;
+ width.value = height.value;
+ height.value = tmp;
+
+ updateInput(width);
+ updateInput(height);
+ return [];
}
diff --git a/javascript/ui_settings_hints.js b/javascript/ui_settings_hints.js
new file mode 100644
index 00000000..e216852b
--- /dev/null
+++ b/javascript/ui_settings_hints.js
@@ -0,0 +1,62 @@
+// various hints and extra info for the settings tab
+
+var settingsHintsSetup = false;
+
+onOptionsChanged(function() {
+ if (settingsHintsSetup) return;
+ settingsHintsSetup = true;
+
+ gradioApp().querySelectorAll('#settings [id^=setting_]').forEach(function(div) {
+ var name = div.id.substr(8);
+ var commentBefore = opts._comments_before[name];
+ var commentAfter = opts._comments_after[name];
+
+ if (!commentBefore && !commentAfter) return;
+
+ var span = null;
+ if (div.classList.contains('gradio-checkbox')) span = div.querySelector('label span');
+ else if (div.classList.contains('gradio-checkboxgroup')) span = div.querySelector('span').firstChild;
+ else if (div.classList.contains('gradio-radio')) span = div.querySelector('span').firstChild;
+ else span = div.querySelector('label span').firstChild;
+
+ if (!span) return;
+
+ if (commentBefore) {
+ var comment = document.createElement('DIV');
+ comment.className = 'settings-comment';
+ comment.innerHTML = commentBefore;
+ span.parentElement.insertBefore(document.createTextNode('\xa0'), span);
+ span.parentElement.insertBefore(comment, span);
+ span.parentElement.insertBefore(document.createTextNode('\xa0'), span);
+ }
+ if (commentAfter) {
+ comment = document.createElement('DIV');
+ comment.className = 'settings-comment';
+ comment.innerHTML = commentAfter;
+ span.parentElement.insertBefore(comment, span.nextSibling);
+ span.parentElement.insertBefore(document.createTextNode('\xa0'), span.nextSibling);
+ }
+ });
+});
+
+function settingsHintsShowQuicksettings() {
+ requestGet("./internal/quicksettings-hint", {}, function(data) {
+ var table = document.createElement('table');
+ table.className = 'settings-value-table';
+
+ data.forEach(function(obj) {
+ var tr = document.createElement('tr');
+ var td = document.createElement('td');
+ td.textContent = obj.name;
+ tr.appendChild(td);
+
+ td = document.createElement('td');
+ td.textContent = obj.label;
+ tr.appendChild(td);
+
+ table.appendChild(tr);
+ });
+
+ popup(table);
+ });
+}
generated by cgit v1.2.3 (git 2.25.1) at 2025-05-02 01:45:01 +0000