initial gradio 3.22 support (9f0da9f6) · Commits · github_fork / Stable Diffusion Webui

extensions-builtin/prompt-bracket-checker/javascript/prompt-bracket-checker.js

+4 −11

Original line number	Original line	Diff line number	Diff line
	@@ -89,22 +89,15 @@ function checkBrackets(evt, textArea, counterElt) {
	function setupBracketChecking(id_prompt, id_counter){		function setupBracketChecking(id_prompt, id_counter){
	var textarea = gradioApp().querySelector("#" + id_prompt + " > label > textarea");		var textarea = gradioApp().querySelector("#" + id_prompt + " > label > textarea");
	var counter = gradioApp().getElementById(id_counter)		var counter = gradioApp().getElementById(id_counter)

	textarea.addEventListener("input", function(evt){		textarea.addEventListener("input", function(evt){
	checkBrackets(evt, textarea, counter)		checkBrackets(evt, textarea, counter)
	});		});
	}		}

	var shadowRootLoaded = setInterval(function() {		onUiLoaded(function(){
	var shadowRoot = document.querySelector('gradio-app').shadowRoot;
	if(! shadowRoot) return false;

	var shadowTextArea = shadowRoot.querySelectorAll('#txt2img_prompt > label > textarea');
	if(shadowTextArea.length < 1) return false;

	clearInterval(shadowRootLoaded);

	setupBracketChecking('txt2img_prompt', 'txt2img_token_counter')		setupBracketChecking('txt2img_prompt', 'txt2img_token_counter')
	setupBracketChecking('txt2img_neg_prompt', 'txt2img_negative_token_counter')		setupBracketChecking('txt2img_neg_prompt', 'txt2img_negative_token_counter')
	setupBracketChecking('img2img_prompt', 'imgimg_token_counter')		setupBracketChecking('img2img_prompt', 'img2img_token_counter')
	setupBracketChecking('img2img_neg_prompt', 'img2img_negative_token_counter')		setupBracketChecking('img2img_neg_prompt', 'img2img_negative_token_counter')
	}, 1000);		})
			No newline at end of file

javascript/hints.js

+1 −1

Original line number	Original line	Diff line number	Diff line
	@@ -18,7 +18,7 @@ titles = {
	"\u2199\ufe0f": "Read generation parameters from prompt or last generation if prompt is empty into user interface.",		"\u2199\ufe0f": "Read generation parameters from prompt or last generation if prompt is empty into user interface.",
	"\u{1f4c2}": "Open images output directory",		"\u{1f4c2}": "Open images output directory",
	"\u{1f4be}": "Save style",		"\u{1f4be}": "Save style",
	"\u{1f5d1}": "Clear prompt",		"\u{1f5d1}\ufe0f": "Clear prompt",
	"\u{1f4cb}": "Apply selected styles to current prompt",		"\u{1f4cb}": "Apply selected styles to current prompt",
	"\u{1f4d2}": "Paste available values into the field",		"\u{1f4d2}": "Paste available values into the field",
	"\u{1f3b4}": "Show extra networks",		"\u{1f3b4}": "Show extra networks",

javascript/imageviewer.js

+31 −39

Original line number	Original line	Diff line number	Diff line
	@@ -50,7 +50,7 @@ function updateOnBackgroundChange() {
	}		}

	function modalImageSwitch(offset) {		function modalImageSwitch(offset) {
	var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")		var allgalleryButtons = gradioApp().querySelectorAll(".gradio-gallery .thumbnail-item")
	var galleryButtons = []		var galleryButtons = []
	allgalleryButtons.forEach(function(elem) {		allgalleryButtons.forEach(function(elem) {
	if (elem.parentElement.offsetParent) {		if (elem.parentElement.offsetParent) {
	@@ -59,7 +59,7 @@ function modalImageSwitch(offset) {
	})		})

	if (galleryButtons.length > 1) {		if (galleryButtons.length > 1) {
	var allcurrentButtons = gradioApp().querySelectorAll(".gallery-item.transition-all.\\!ring-2")		var allcurrentButtons = gradioApp().querySelectorAll(".gradio-gallery .thumbnail-item.selected")
	var currentButton = null		var currentButton = null
	allcurrentButtons.forEach(function(elem) {		allcurrentButtons.forEach(function(elem) {
	if (elem.parentElement.offsetParent) {		if (elem.parentElement.offsetParent) {
	@@ -136,20 +136,15 @@ function modalKeyHandler(event) {
	}		}
	}		}

	function showGalleryImage() {		function setupImageForLightbox(e) {
	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)		if (e.dataset.modded)
	return;		return;

	e.dataset.modded = true;		e.dataset.modded = true;
	if(e && e.parentElement.tagName == 'DIV'){
	e.style.cursor='pointer'		e.style.cursor='pointer'
	e.style.userSelect='none'		e.style.userSelect='none'

	var isFirefox = isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1		var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1

	// For Firefox, listening on click first switched to next image then shows the lightbox.		// For Firefox, listening on click first switched to next image then shows the lightbox.
	// If you know how to fix this without switching to mousedown event, please.		// If you know how to fix this without switching to mousedown event, please.
	@@ -158,15 +153,12 @@ function showGalleryImage() {

	e.addEventListener(event, function (evt) {		e.addEventListener(event, function (evt) {
	if(!opts.js_modal_lightbox \|\| evt.button != 0) return;		if(!opts.js_modal_lightbox \|\| evt.button != 0) return;

	modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)		modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)
	evt.preventDefault()		evt.preventDefault()
	showModal(evt)		showModal(evt)
	}, true);		}, true);
	}
	});
	}

	}, 100);
	}		}

	function modalZoomSet(modalImage, enable) {		function modalZoomSet(modalImage, enable) {
	@@ -199,21 +191,21 @@ function modalTileImageToggle(event) {
	}		}

	function galleryImageHandler(e) {		function galleryImageHandler(e) {
	if (e && e.parentElement.tagName == 'BUTTON') {		//if (e && e.parentElement.tagName == 'BUTTON') {
	e.onclick = showGalleryImage;		e.onclick = showGalleryImage;
	}		//}
	}		}

	onUiUpdate(function() {		onUiUpdate(function() {
	fullImg_preview = gradioApp().querySelectorAll('img.w-full')		fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img')
	if (fullImg_preview != null) {		if (fullImg_preview != null) {
	fullImg_preview.forEach(galleryImageHandler);		fullImg_preview.forEach(setupImageForLightbox);
	}		}
	updateOnBackgroundChange();		updateOnBackgroundChange();
	})		})

	document.addEventListener("DOMContentLoaded", function() {		document.addEventListener("DOMContentLoaded", function() {
	const modalFragment = document.createDocumentFragment();		//const modalFragment = document.createDocumentFragment();
	const modal = document.createElement('div')		const modal = document.createElement('div')
	modal.onclick = closeModal;		modal.onclick = closeModal;
	modal.id = "lightboxModal";		modal.id = "lightboxModal";
	@@ -277,9 +269,9 @@ document.addEventListener("DOMContentLoaded", function() {

	modal.appendChild(modalNext)		modal.appendChild(modalNext)

			gradioApp().appendChild(modal)

	gradioApp().getRootNode().appendChild(modal)

	document.body.appendChild(modalFragment);		document.body.appendChild(modal);

	});		});

javascript/progressbar.js

+1 −66

Original line number	Original line	Diff line number	Diff line
	// code related to showing and updating progressbar shown as the image is being made		// code related to showing and updating progressbar shown as the image is being made


	galleries = {}
	storedGallerySelections = {}
	galleryObservers = {}

	function rememberGallerySelection(id_gallery){		function rememberGallerySelection(id_gallery){
	storedGallerySelections[id_gallery] = getGallerySelectedIndex(id_gallery)
	}		}

	function 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 } })

	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 xhr = new XMLHttpRequest();

javascript/ui.js

+1 −2

Original line number	Original line	Diff line number	Diff line
	@@ -86,7 +86,7 @@ function get_tab_index(tabId){
	var res = 0		var res = 0

	gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i){		gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i){
	if(button.className.indexOf('bg-white') != -1)		if(button.className.indexOf('selected') != -1)
	res = i		res = i
	})		})

	@@ -255,7 +255,6 @@ onUiUpdate(function(){
	}		}

	prompt.parentElement.insertBefore(counter, prompt)		prompt.parentElement.insertBefore(counter, prompt)
	counter.classList.add("token-counter")
	prompt.parentElement.style.position = "relative"		prompt.parentElement.style.position = "relative"

	promptTokecountUpdateFuncs[id] = function(){ update_token_counter(id_button); }		promptTokecountUpdateFuncs[id] = function(){ update_token_counter(id_button); }

Admin message