Upload 10 files

javascript/aspectRatioOverlay.js

@@ -0,0 +1,119 @@
+
+let currentWidth = null;
+let currentHeight = null;
+let arFrameTimeout = setTimeout(function(){},0);
+
+function dimensionChange(e,dimname){
+
+	if(dimname == 'Width'){
+		currentWidth = e.target.value*1.0
+	}
+	if(dimname == 'Height'){
+		currentHeight = e.target.value*1.0
+	}
+
+	var inImg2img   = Boolean(gradioApp().querySelector("button.rounded-t-lg.border-gray-200"))
+
+	if(!inImg2img){
+		return;
+	}
+
+	var img2imgMode = gradioApp().querySelector('#mode_img2img.tabs > div > button.rounded-t-lg.border-gray-200')
+	if(img2imgMode){
+		img2imgMode=img2imgMode.innerText
+	}else{
+		return;
+	}
+
+	var redrawImage = gradioApp().querySelector('div[data-testid=image] img');
+	var inpaintImage = gradioApp().querySelector('#img2maskimg div[data-testid=image] img')
+
+	var targetElement = null;
+
+	if(img2imgMode=='img2img' && redrawImage){
+		targetElement = redrawImage;
+	}else if(img2imgMode=='Inpaint' && inpaintImage){
+		targetElement = inpaintImage;
+	}
+
+	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){ 
+			let parentLabel = e.parentElement.querySelector('label')
+			if(parentLabel && parentLabel.innerText){
+				if(!e.classList.contains('scrollwatch')){
+					if(parentLabel.innerText == 'Width' || parentLabel.innerText == 'Height'){
+						e.addEventListener('input', function(e){dimensionChange(e,parentLabel.innerText)} )
+						e.classList.add('scrollwatch')
+					}
+					if(parentLabel.innerText == 'Width'){
+						currentWidth = e.value*1.0
+					}
+					if(parentLabel.innerText == 'Height'){
+						currentHeight = e.value*1.0
+					}
+				}
+			} 
+		})
+	}
+});

javascript/dragdrop.js

@@ -0,0 +1,86 @@
+// allows drag-dropping files into gradio image elements, and also pasting images from clipboard
+
+function isValidImageList( files ) {
+    return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type);
+}
+
+function dropReplaceImage( imgWrap, files ) {
+    if ( ! isValidImageList( files ) ) {
+        return;
+    }
+
+    imgWrap.querySelector('.modify-upload button + button, .touch-none + div button + button')?.click();
+    const callback = () => {
+        const fileInput = imgWrap.querySelector('input[type="file"]');
+        if ( fileInput ) {
+            fileInput.files = files;
+            fileInput.dispatchEvent(new Event('change'));   
+        }
+    };
+    
+    if ( imgWrap.closest('#pnginfo_image') ) {
+        // special treatment for PNG Info tab, wait for fetch request to finish
+        const oldFetch = window.fetch;
+        window.fetch = async (input, options) => {
+            const response = await oldFetch(input, options);
+            if ( 'api/predict/' === input ) {
+                const content = await response.text();
+                window.fetch = oldFetch;
+                window.requestAnimationFrame( () => callback() );
+                return new Response(content, {
+                    status: response.status,
+                    statusText: response.statusText,
+                    headers: response.headers
+                })
+            }
+            return response;
+        };        
+    } else {
+        window.requestAnimationFrame( () => callback() );
+    }
+}
+
+window.document.addEventListener('dragover', e => {
+    const target = e.composedPath()[0];
+    const imgWrap = target.closest('[data-testid="image"]');
+    if ( !imgWrap ) {
+        return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+});
+
+window.document.addEventListener('drop', e => {
+    const target = e.composedPath()[0];
+    const imgWrap = target.closest('[data-testid="image"]');
+    if ( !imgWrap ) {
+        return;
+    }
+    e.stopPropagation();
+    e.preventDefault();
+    const files = e.dataTransfer.files;
+    dropReplaceImage( imgWrap, files );
+});
+
+window.addEventListener('paste', e => {
+    const files = e.clipboardData.files;
+    if ( ! isValidImageList( files ) ) {
+        return;
+    }
+
+    const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')]
+        .filter(el => uiElementIsVisible(el));
+    if ( ! visibleImageFields.length ) {
+        return;
+    }
+    
+    const firstFreeImageField = visibleImageFields
+        .filter(el => el.querySelector('input[type=file]'))?.[0];
+
+    dropReplaceImage(
+        firstFreeImageField ?
+        firstFreeImageField :
+        visibleImageFields[visibleImageFields.length - 1]
+    , files );
+});

javascript/edit-attention.js

@@ -0,0 +1,41 @@
+addEventListener('keydown', (event) => {
+	let target = event.originalTarget;
+	if (!target.hasAttribute("placeholder")) return;
+	if (!target.placeholder.toLowerCase().includes("prompt")) return;
+
+	let plus = "ArrowUp"
+	let minus = "ArrowDown"
+	if (event.key != plus && event.key != minus) return;
+
+	selectionStart = target.selectionStart;
+	selectionEnd = target.selectionEnd;
+	if(selectionStart == selectionEnd) return;
+
+	event.preventDefault();
+
+	if (selectionStart == 0 || target.value[selectionStart - 1] != "(") {
+		target.value = target.value.slice(0, selectionStart) +
+			"(" + target.value.slice(selectionStart, selectionEnd) + ":1.0)" +
+			target.value.slice(selectionEnd);
+
+		target.focus();
+		target.selectionStart = selectionStart + 1;
+		target.selectionEnd = selectionEnd + 1;
+
+	} else {
+		end = target.value.slice(selectionEnd + 1).indexOf(")") + 1;
+		weight = parseFloat(target.value.slice(selectionEnd + 1, selectionEnd + 1 + end));
+		if (event.key == minus) weight -= 0.1;
+		if (event.key == plus) weight += 0.1;
+
+		weight = parseFloat(weight.toPrecision(12));
+
+		target.value = target.value.slice(0, selectionEnd + 1) +
+			weight +
+			target.value.slice(selectionEnd + 1 + end - 1);
+
+		target.focus();
+		target.selectionStart = selectionStart;
+		target.selectionEnd = selectionEnd;
+	}
+});

javascript/hints.js

@@ -0,0 +1,113 @@
+// mouseover tooltips for various UI elements
+
+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 to higher than 30-40 does not help",
+	"DDIM": "Denoising Diffusion Implicit Models - best at inpainting",
+
+	"Batch count": "How many batches of images to create",
+	"Batch size": "How many image to create in a single batch",
+    "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",
+    "\u267b\ufe0f": "Reuse seed from last generation, mostly useful if it was randomed",
+    "\u{1f3a8}": "Add a random artist to the prompt.",
+    "\u2199\ufe0f": "Read generation parameters from prompt into user interface.",
+    "\u{1f4c2}": "Open images output directory",
+
+    "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",
+
+    "Just resize": "Resize image to target resolution. Unless height and width match, you will get incorrect aspect ratio.",
+    "Crop and resize": "Resize the image so that entirety of target resolution is filled with the image. Crop parts that stick out.",
+    "Resize and fill": "Resize the image so that entirety of image is inside target resolution. Fill empty space with image's colors.",
+
+    "Mask blur": "How much to blur the mask before processing, in pixels.",
+    "Masked content": "What to put inside the masked area before processing it with Stable Diffusion.",
+    "fill": "fill it with colors of the image",
+    "original": "keep whatever was there originally",
+    "latent noise": "fill it with latent space noise",
+    "latent nothing": "fill it with latent space zeroes",
+    "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.",
+
+    "Interrupt": "Stop processing images and return any results accumulated so far.",
+    "Save": "Write image to a directory (default - log/images) and generation parameters into csv file.",
+
+    "X values": "Separate values for X axis using commas.",
+    "Y values": "Separate values for Y axis using commas.",
+
+    "None": "Do not do anything special",
+    "Prompt matrix": "Separate prompts into parts using vertical pipe character (|) and the script will create a picture for every combination of them (except for the first part, which will be present in all combinations)",
+    "X/Y plot": "Create a grid where images will have different parameters. Use inputs below to specify which parameters will be shared by columns and rows",
+    "Custom code": "Run Python code. Advanced user only. Must run program with --allow-code for this to work",
+
+    "Prompt S/R": "Separate a list of words with commas, and the first word will be used as a keyword: script will search for this word in the prompt, and replace it with others",
+    "Prompt order": "Separate a list of words with commas, and the script will make a variation of prompt with those words for their every possible order",
+
+    "Tiling": "Produce an image that can be tiled.",
+    "Tile overlap": "For SD upscale, how much overlap in pixels should there be between tiles. Tiles overlap so that when they are merged back into one picture, there is no clearly visible seam.",
+
+    "Variation seed": "Seed of a different picture to be mixed into the generation.",
+    "Variation strength": "How strong of a variation to produce. At 0, there will be no effect. At 1, you will get the complete picture with variation seed (except for ancestral samplers, where you will just get something).",
+    "Resize seed from height": "Make an attempt to produce a picture similar to what would have been produced with same seed at specified resolution",
+    "Resize seed from width": "Make an attempt to produce a picture similar to what would have been produced with same seed at specified resolution",
+
+    "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], [prompt_no_styles], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [prompt_words], [date], [datetime], [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], [prompt_no_styles], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [prompt_words], [date], [datetime], [job_timestamp]; 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",
+
+    "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",
+    "Apply style": "Insert selected styles into prompt fields",
+    "Create style": "Save current prompts as a style. If you add the token {prompt} to the text, the style use that as placeholder for your prompt when you use the style in the future.",
+
+    "Checkpoint name": "Loads weights from checkpoint before making images. You can either use hash or a part of filename (as seen in settings) for checkpoint name. Recommended to use with Y axis for less switching.",
+
+    "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%).",
+
+    "Highres. fix": "Use a two step process to partially create an image at smaller resolution, upscale, and then improve details in it without changing composition",
+    "Scale latent": "Uscale the image in latent space. Alternative is to produce the full image from latent representation, upscale that, and then move it back to latent space.",
+
+}
+
+
+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] || "";
+	    }
+	})
+})

javascript/imageMaskFix.js

@@ -0,0 +1,45 @@
+/**
+ * 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;
+    }
+
+    const wrapper = canvases[0].closest('.touch-none');
+    const previewImage = wrapper.previousElementSibling;
+
+    if ( ! previewImage.complete ) {
+        previewImage.addEventListener( 'load', () => imageMaskResize());
+        return;
+    }
+
+    const w = previewImage.width;
+    const h = previewImage.height;
+    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);
+
+    wrapper.style.width = `${wW}px`;
+    wrapper.style.height = `${wH}px`;
+    wrapper.style.left = `${(w-wW)/2}px`;
+    wrapper.style.top = `${(h-wH)/2}px`;
+
+    canvases.forEach( c => {
+        c.style.width = c.style.height = '';
+        c.style.maxWidth = '100%';
+        c.style.maxHeight = '100%';
+        c.style.objectFit = 'contain';
+    });
+ }
+  
+ onUiUpdate(() => imageMaskResize());

javascript/imageviewer.js

@@ -0,0 +1,209 @@
+// A full size 'lightbox' preview modal shown when left clicking on gallery previews
+
+function closeModal() {
+  gradioApp().getElementById("lightboxModal").style.display = "none";
+}
+
+function showModal(event) {
+  const source = event.target || event.srcElement;
+  const modalImage = gradioApp().getElementById("modalImage")
+  const lb = gradioApp().getElementById("lightboxModal")
+  modalImage.src = source.src
+  if (modalImage.style.display === 'none') {
+    lb.style.setProperty('background-image', 'url(' + source.src + ')');
+  }
+  lb.style.display = "block";
+  lb.focus()
+  event.stopPropagation()
+}
+
+function negmod(n, m) {
+  return ((n % m) + m) % m;
+}
+
+function modalImageSwitch(offset){
+  var allgalleryButtons = gradioApp().querySelectorAll(".gallery-item.transition-all")
+  var galleryButtons = []
+  allgalleryButtons.forEach(function(elem){
+    if(elem.parentElement.offsetParent){
+        galleryButtons.push(elem);
+    }
+  })
+
+  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 result = -1
+      galleryButtons.forEach(function(v, i){ if(v==currentButton) { result = i } })
+
+      if(result != -1){
+        nextButton = galleryButtons[negmod((result+offset),galleryButtons.length)]
+        nextButton.click()
+        const modalImage = gradioApp().getElementById("modalImage");
+        const modal = gradioApp().getElementById("lightboxModal");
+        modalImage.src = nextButton.children[0].src;
+        if (modalImage.style.display === 'none') {
+            modal.style.setProperty('background-image', `url(${modalImage.src})`)
+        }
+        setTimeout( function(){modal.focus()},10)
+      }
+  }
+}
+
+function modalNextImage(event){
+  modalImageSwitch(1)
+  event.stopPropagation()
+}
+
+function modalPrevImage(event){
+  modalImageSwitch(-1)  
+  event.stopPropagation()
+}
+
+function modalKeyHandler(event){
+    switch (event.key) {
+        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 && e.parentElement.tagName == 'DIV'){
+
+                    e.style.cursor='pointer'
+
+                    e.addEventListener('click', function (evt) {
+                        if(!opts.js_modal_lightbox) return;
+                        modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initialy_zoomed)
+                        showModal(evt)
+                    },true);
+                }
+            });
+        }
+
+    }, 100);
+}
+
+function modalZoomSet(modalImage, enable){
+    if( enable ){
+        modalImage.classList.add('modalImageFullscreen');
+    } else{
+        modalImage.classList.remove('modalImageFullscreen');
+    }
+}
+
+function modalZoomToggle(event){
+    modalImage = gradioApp().getElementById("modalImage");
+    modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'))
+    event.stopPropagation()
+}
+
+function modalTileImageToggle(event){
+    const modalImage = gradioApp().getElementById("modalImage");
+    const modal = gradioApp().getElementById("lightboxModal");
+    const isTiling = modalImage.style.display === 'none';
+    if (isTiling) {
+        modalImage.style.display = 'block';
+        modal.style.setProperty('background-image', 'none')
+    } else {
+        modalImage.style.display = 'none';
+        modal.style.setProperty('background-image', `url(${modalImage.src})`)
+    }
+
+    event.stopPropagation()
+}
+
+function galleryImageHandler(e){
+    if(e && e.parentElement.tagName == 'BUTTON'){
+        e.onclick = showGalleryImage;
+    }
+}
+
+onUiUpdate(function(){
+    fullImg_preview = gradioApp().querySelectorAll('img.w-full')
+        if(fullImg_preview != null){
+	    fullImg_preview.forEach(galleryImageHandler);
+    }
+})
+
+document.addEventListener("DOMContentLoaded", function() {
+    const modalFragment = document.createDocumentFragment();
+    const modal = document.createElement('div')
+    modal.onclick = closeModal;
+    modal.id = "lightboxModal";
+    modal.tabIndex=0
+    modal.addEventListener('keydown', modalKeyHandler, true)
+
+    const modalControls = document.createElement('div')
+    modalControls.className = 'modalControls gradio-container';
+    modal.append(modalControls);
+    
+    const modalZoom = document.createElement('span')
+    modalZoom.className = 'modalZoom cursor';
+    modalZoom.innerHTML = '⤡'
+    modalZoom.addEventListener('click', modalZoomToggle, true)
+    modalZoom.title = "Toggle zoomed view";
+    modalControls.appendChild(modalZoom)
+
+    const modalTileImage = document.createElement('span')
+    modalTileImage.className = 'modalTileImage cursor';
+    modalTileImage.innerHTML = '⊞'
+    modalTileImage.addEventListener('click', modalTileImageToggle, true)
+    modalTileImage.title = "Preview tiling";
+    modalControls.appendChild(modalTileImage)
+
+    const modalClose = document.createElement('span')
+    modalClose.className = 'modalClose cursor';
+    modalClose.innerHTML = '×'
+    modalClose.onclick = closeModal;
+    modalClose.title = "Close image viewer";
+    modalControls.appendChild(modalClose)
+
+    const modalImage = document.createElement('img')
+    modalImage.id = 'modalImage';
+    modalImage.onclick = closeModal;
+    modalImage.tabIndex=0
+    modalImage.addEventListener('keydown', modalKeyHandler, true)
+    modal.appendChild(modalImage)
+
+    const modalPrev = document.createElement('a')
+    modalPrev.className = 'modalPrev';
+    modalPrev.innerHTML = '❮'
+    modalPrev.tabIndex=0
+    modalPrev.addEventListener('click',modalPrevImage,true);
+    modalPrev.addEventListener('keydown', modalKeyHandler, true)
+    modal.appendChild(modalPrev)
+
+    const modalNext = document.createElement('a')
+    modalNext.className = 'modalNext';
+    modalNext.innerHTML = '❯'
+    modalNext.tabIndex=0
+    modalNext.addEventListener('click',modalNextImage,true);
+    modalNext.addEventListener('keydown', modalKeyHandler, true)
+
+    modal.appendChild(modalNext)
+
+
+    gradioApp().getRootNode().appendChild(modal)
+    
+    document.body.appendChild(modalFragment);
+	
+});

javascript/notification.js

@@ -0,0 +1,49 @@
+// Monitors the gallery and sends a browser notification when the leading image is new.
+
+let lastHeadImg = null;
+
+notificationButton = null
+
+onUiUpdate(function(){
+    if(notificationButton == null){
+        notificationButton = gradioApp().getElementById('request_notifications')
+
+        if(notificationButton != null){
+            notificationButton.addEventListener('click', function (evt) {
+                Notification.requestPermission();
+            },true);
+        }
+    }
+
+    const galleryPreviews = gradioApp().querySelectorAll('img.h-full.w-full.overflow-hidden');
+
+    if (galleryPreviews == null) return;
+
+    const headImg = galleryPreviews[0]?.src;
+
+    if (headImg == null || headImg == lastHeadImg) return;
+
+    lastHeadImg = headImg;
+
+    // play notification sound if available
+    gradioApp().querySelector('#audio_notification audio')?.play();
+
+    if (document.hasFocus()) return;
+
+    // Multiple copies of the images are in the DOM when one is selected. Dedup with a Set to get the real number generated.
+    const imgs = new Set(Array.from(galleryPreviews).map(img => img.src));
+
+    const notification = new Notification(
+        'Stable Diffusion',
+        {
+            body: `Generated ${imgs.size > 1 ? imgs.size - 1 : 1} image${imgs.size > 1 ? 's' : ''}`,
+            icon: headImg,
+            image: headImg,
+        }
+    );
+
+    notification.onclick = function(_){
+        parent.focus();
+        this.close();
+    };
+});

javascript/progressbar.js

@@ -0,0 +1,68 @@
+// code related to showing and updating progressbar shown as the image is being made
+global_progressbars = {}
+
+function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_interrupt, id_preview, id_gallery){
+    var progressbar = gradioApp().getElementById(id_progressbar)
+    var interrupt = gradioApp().getElementById(id_interrupt)
+    
+    if(opts.show_progress_in_title && progressbar && progressbar.offsetParent){
+        if(progressbar.innerText){
+            let newtitle = 'Stable Diffusion - ' + progressbar.innerText
+            if(document.title != newtitle){
+                document.title =  newtitle;          
+            }
+        }else{
+            let newtitle = 'Stable Diffusion'
+            if(document.title != newtitle){
+                document.title =  newtitle;          
+            }
+        }
+    }
+    
+	if(progressbar!= null && progressbar != global_progressbars[id_progressbar]){
+	    global_progressbars[id_progressbar] = progressbar
+
+        var mutationObserver = new MutationObserver(function(m){
+            preview = gradioApp().getElementById(id_preview)
+            gallery = gradioApp().getElementById(id_gallery)
+
+            if(preview != null && gallery != null){
+                preview.style.width = gallery.clientWidth + "px"
+                preview.style.height = gallery.clientHeight + "px"
+
+                var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0;
+                if(!progressDiv){
+                    interrupt.style.display = "none"
+                }
+            }
+
+            window.setTimeout(function(){ requestMoreProgress(id_part, id_progressbar_span, id_interrupt) }, 500)
+        });
+        mutationObserver.observe( progressbar, { childList:true, subtree:true })
+	}
+}
+
+onUiUpdate(function(){
+    check_progressbar('txt2img', 'txt2img_progressbar', 'txt2img_progress_span', 'txt2img_interrupt', 'txt2img_preview', 'txt2img_gallery')
+    check_progressbar('img2img', 'img2img_progressbar', 'img2img_progress_span', 'img2img_interrupt', 'img2img_preview', 'img2img_gallery')
+    check_progressbar('ti', 'ti_progressbar', 'ti_progress_span', 'ti_interrupt', 'ti_preview', 'ti_gallery')
+})
+
+function requestMoreProgress(id_part, id_progressbar_span, id_interrupt){
+    btn = gradioApp().getElementById(id_part+"_check_progress");
+    if(btn==null) return;
+
+    btn.click();
+    var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0;
+    var interrupt = gradioApp().getElementById(id_interrupt)
+    if(progressDiv && interrupt){
+        interrupt.style.display = "block"
+    }
+}
+
+function requestProgress(id_part){
+    btn = gradioApp().getElementById(id_part+"_check_progress_initial");
+    if(btn==null) return;
+
+    btn.click();
+}

javascript/textualInversion.js

@@ -0,0 +1,8 @@
+
+
+function start_training_textual_inversion(){
+    requestProgress('ti')
+    gradioApp().querySelector('#ti_error').innerHTML=''
+
+    return args_to_array(arguments)
+}

javascript/ui.js

@@ -0,0 +1,233 @@
+// various functions for interation with ui.py not large enough to warrant putting them in separate files
+
+function selected_gallery_index(){
+    var buttons = gradioApp().querySelectorAll('[style="display: block;"].tabitem .gallery-item')
+    var button = gradioApp().querySelector('[style="display: block;"].tabitem .gallery-item.\\!ring-2')
+
+    var result = -1
+    buttons.forEach(function(v, i){ if(v==button) { result = i } })
+
+    return result
+}
+
+function extract_image_from_gallery(gallery){
+    if(gallery.length == 1){
+        return gallery[0]
+    }
+
+    index = selected_gallery_index()
+
+    if (index < 0 || index >= gallery.length){
+        return [null]
+    }
+
+    return gallery[index];
+}
+
+function args_to_array(args){
+    res = []
+    for(var i=0;i<args.length;i++){
+        res.push(args[i])
+    }
+    return res
+}
+
+function switch_to_txt2img(){
+    gradioApp().querySelectorAll('button')[0].click();
+
+    return args_to_array(arguments);
+}
+
+function switch_to_img2img_img2img(){
+    gradioApp().querySelectorAll('button')[1].click();
+    gradioApp().getElementById('mode_img2img').querySelectorAll('button')[0].click();
+
+    return args_to_array(arguments);
+}
+
+function switch_to_img2img_inpaint(){
+    gradioApp().querySelectorAll('button')[1].click();
+    gradioApp().getElementById('mode_img2img').querySelectorAll('button')[1].click();
+
+    return args_to_array(arguments);
+}
+
+function switch_to_extras(){
+    gradioApp().querySelectorAll('button')[2].click();
+
+    return args_to_array(arguments);
+}
+
+function extract_image_from_gallery_txt2img(gallery){
+    switch_to_txt2img()
+    return extract_image_from_gallery(gallery);
+}
+
+function extract_image_from_gallery_img2img(gallery){
+    switch_to_img2img_img2img()
+    return extract_image_from_gallery(gallery);
+}
+
+function extract_image_from_gallery_inpaint(gallery){
+    switch_to_img2img_inpaint()
+    return extract_image_from_gallery(gallery);
+}
+
+function extract_image_from_gallery_extras(gallery){
+    switch_to_extras()
+    return extract_image_from_gallery(gallery);
+}
+
+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
+    })
+
+    return res
+}
+
+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)
+
+    return res
+}
+
+function get_extras_tab_index(){
+    return create_tab_index_args('mode_extras', arguments)
+}
+
+function create_submit_args(args){
+    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 seding 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
+    }
+
+    return res
+}
+
+function submit(){
+    requestProgress('txt2img')
+
+    return create_submit_args(arguments)
+}
+
+function submit_img2img(){
+    requestProgress('img2img')
+
+    res = create_submit_args(arguments)
+
+    res[0] = get_tab_index('mode_img2img')
+
+    return res
+}
+
+
+function ask_for_style_name(_, prompt_text, negative_prompt_text) {
+    name_ = prompt('Style name:')
+    return name_ === null ? [null, null, null]: [name_, prompt_text, negative_prompt_text]
+}
+
+
+
+opts = {}
+function apply_settings(jsdata){
+    console.log(jsdata)
+
+    opts = JSON.parse(jsdata)
+
+    return jsdata
+}
+
+onUiUpdate(function(){
+	if(Object.keys(opts).length != 0) return;
+
+	json_elem = gradioApp().getElementById('settings_json')
+	if(json_elem == null) return;
+
+    textarea = json_elem.querySelector('textarea')
+    jsdata = textarea.value
+    opts = JSON.parse(jsdata)
+
+
+    Object.defineProperty(textarea, 'value', {
+        set: function(newValue) {
+            var valueProp = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
+            var oldValue = valueProp.get.call(textarea);
+            valueProp.set.call(textarea, newValue);
+
+            if (oldValue != newValue) {
+                opts = JSON.parse(textarea.value)
+            }
+        },
+        get: function() {
+            var valueProp = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
+            return valueProp.get.call(textarea);
+        }
+    });
+
+    json_elem.parentElement.style.display="none"
+
+	if (!txt2img_textarea) {
+		txt2img_textarea = gradioApp().querySelector("#txt2img_prompt > label > textarea");
+		txt2img_textarea?.addEventListener("input", () => update_token_counter("txt2img_token_button"));
+        txt2img_textarea?.addEventListener("keyup", (event) => submit_prompt(event, "txt2img_generate"));
+	}
+	if (!img2img_textarea) {
+		img2img_textarea = gradioApp().querySelector("#img2img_prompt > label > textarea");
+		img2img_textarea?.addEventListener("input", () => update_token_counter("img2img_token_button"));
+        img2img_textarea?.addEventListener("keyup", (event) => submit_prompt(event, "img2img_generate"));
+	}
+})
+
+let txt2img_textarea, img2img_textarea = undefined;
+let wait_time = 800
+let token_timeout;
+
+function update_txt2img_tokens(...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;
+}
+
+function update_token_counter(button_id) {
+	if (token_timeout)
+		clearTimeout(token_timeout);
+	token_timeout = setTimeout(() => gradioApp().getElementById(button_id)?.click(), wait_time);
+}
+
+function submit_prompt(event, generate_button_id) {
+    if (event.altKey && event.keyCode === 13) {
+        event.preventDefault();
+        gradioApp().getElementById(generate_button_id).click();
+        return;
+    }
+}
+
+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)
+}