From ab9c562aebaf821ec5dd7dcdad76c8f18ce6358f Mon Sep 17 00:00:00 2001 From: anapnoe <124302297+anapnoe@users.noreply.github.com> Date: Wed, 10 May 2023 20:02:58 +0300 Subject: [PATCH] Fix issue #135 and js formatting --- javascript/aspectRatioOverlay.js | 185 +- javascript/contextMenus.js | 231 +- javascript/dragdrop.js | 173 +- javascript/edit-attention.js | 226 +- javascript/extensions.js | 125 +- javascript/extraNetworks.js | 352 ++- javascript/generationParams.js | 60 +- javascript/hires_fix.js | 44 +- javascript/imageMaskFix.js | 412 +-- javascript/imageParams.js | 35 +- javascript/imageviewer.js | 323 ++- javascript/imageviewerGamepad.js | 56 +- javascript/localization.js | 269 +- javascript/notification.js | 65 +- javascript/progressbar.js | 369 +-- javascript/textualInversion.js | 27 +- javascript/ui.js | 3303 +++++++++++---------- script.js | 142 +- style.css | 4597 ++++++++++++++++-------------- 19 files changed, 5866 insertions(+), 5128 deletions(-) diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js index 5160081d..d84aea96 100644 --- a/javascript/aspectRatioOverlay.js +++ b/javascript/aspectRatioOverlay.js @@ -1,111 +1,120 @@ - let currentWidth = null; let currentHeight = null; -let arFrameTimeout = setTimeout(function(){},0); +let arFrameTimeout = setTimeout(function () {}, 0); -function dimensionChange(e, is_width, is_height){ +function dimensionChange(e, is_width, is_height) { + if (is_width) { + currentWidth = e.target.value * 1.0; + } + if (is_height) { + currentHeight = e.target.value * 1.0; + } - if(is_width){ - currentWidth = e.target.value*1.0 - } - if(is_height){ - currentHeight = e.target.value*1.0 - } + var inImg2img = + gradioApp().querySelector("#tab_img2img").style.display == "block"; - var inImg2img = gradioApp().querySelector("#tab_img2img").style.display == "block"; + if (!inImg2img) { + return; + } - if(!inImg2img){ - return; - } + var targetElement = null; - var targetElement = null; + var tabIndex = get_tab_index("mode_img2img"); + if (tabIndex == 0) { + // img2img + targetElement = gradioApp().querySelector( + "#img2img_image div[data-testid=image] img" + ); + } else if (tabIndex == 1) { + //Sketch + targetElement = gradioApp().querySelector( + "#img2img_sketch div[data-testid=image] img" + ); + } else if (tabIndex == 2) { + // Inpaint + targetElement = gradioApp().querySelector( + "#img2maskimg div[data-testid=image] img" + ); + } else if (tabIndex == 3) { + // Inpaint sketch + targetElement = gradioApp().querySelector( + "#inpaint_sketch div[data-testid=image] img" + ); + } - var tabIndex = get_tab_index('mode_img2img') - if(tabIndex == 0){ // img2img - targetElement = gradioApp().querySelector('#img2img_image div[data-testid=image] img'); - } else if(tabIndex == 1){ //Sketch - targetElement = gradioApp().querySelector('#img2img_sketch div[data-testid=image] img'); - } else if(tabIndex == 2){ // Inpaint - targetElement = gradioApp().querySelector('#img2maskimg div[data-testid=image] img'); - } else if(tabIndex == 3){ // Inpaint sketch - targetElement = gradioApp().querySelector('#inpaint_sketch div[data-testid=image] img'); - } + if (targetElement) { + var arPreviewRect = gradioApp().querySelector("#imageARPreview"); + if (!arPreviewRect) { + arPreviewRect = document.createElement("div"); + arPreviewRect.id = "imageARPreview"; + gradioApp().appendChild(arPreviewRect); + } + var viewportOffset = targetElement.getBoundingClientRect(); - if(targetElement){ + var viewportscale = Math.min( + targetElement.clientWidth / targetElement.naturalWidth, + targetElement.clientHeight / targetElement.naturalHeight + ); - var arPreviewRect = gradioApp().querySelector('#imageARPreview'); - if(!arPreviewRect){ - arPreviewRect = document.createElement('div') - arPreviewRect.id = "imageARPreview"; - gradioApp().appendChild(arPreviewRect) - } + var scaledx = targetElement.naturalWidth * viewportscale; + var scaledy = targetElement.naturalHeight * viewportscale; + var cleintRectTop = viewportOffset.top + window.scrollY; + var cleintRectLeft = viewportOffset.left + window.scrollX; + var cleintRectCentreY = cleintRectTop + targetElement.clientHeight / 2; + var cleintRectCentreX = cleintRectLeft + targetElement.clientWidth / 2; + var arscale = Math.min(scaledx / currentWidth, scaledy / currentHeight); + var arscaledx = currentWidth * arscale; + var arscaledy = currentHeight * arscale; - var viewportOffset = targetElement.getBoundingClientRect(); + var arRectTop = cleintRectCentreY - arscaledy / 2; + var arRectLeft = cleintRectCentreX - arscaledx / 2; + var arRectWidth = arscaledx; + var arRectHeight = arscaledy; - var viewportscale = Math.min( targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight ) + arPreviewRect.style.top = arRectTop + "px"; + arPreviewRect.style.left = arRectLeft + "px"; + arPreviewRect.style.width = arRectWidth + "px"; + arPreviewRect.style.height = arRectHeight + "px"; - var scaledx = targetElement.naturalWidth*viewportscale - var scaledy = targetElement.naturalHeight*viewportscale - - var cleintRectTop = (viewportOffset.top+window.scrollY) - var cleintRectLeft = (viewportOffset.left+window.scrollX) - var cleintRectCentreY = cleintRectTop + (targetElement.clientHeight/2) - var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth/2) - - var arscale = Math.min( scaledx/currentWidth, scaledy/currentHeight ) - var arscaledx = currentWidth*arscale - var arscaledy = currentHeight*arscale - - var arRectTop = cleintRectCentreY-(arscaledy/2) - var arRectLeft = cleintRectCentreX-(arscaledx/2) - var arRectWidth = arscaledx - var arRectHeight = arscaledy - - arPreviewRect.style.top = arRectTop+'px'; - arPreviewRect.style.left = arRectLeft+'px'; - arPreviewRect.style.width = arRectWidth+'px'; - arPreviewRect.style.height = arRectHeight+'px'; - - clearTimeout(arFrameTimeout); - arFrameTimeout = setTimeout(function(){ - arPreviewRect.style.display = 'none'; - },2000); - - arPreviewRect.style.display = 'block'; - - } + clearTimeout(arFrameTimeout); + arFrameTimeout = setTimeout(function () { + arPreviewRect.style.display = "none"; + }, 2000); + arPreviewRect.style.display = "block"; + } } +onUiUpdate(function () { + var arPreviewRect = gradioApp().querySelector("#imageARPreview"); + if (arPreviewRect) { + arPreviewRect.style.display = "none"; + } + var tabImg2img = gradioApp().querySelector("#tab_img2img"); + if (tabImg2img) { + var inImg2img = tabImg2img.style.display == "block"; + if (inImg2img) { + let inputs = gradioApp().querySelectorAll("input"); + inputs.forEach(function (e) { + var is_width = e.parentElement.id == "img2img_width"; + var is_height = e.parentElement.id == "img2img_height"; -onUiUpdate(function(){ - var arPreviewRect = gradioApp().querySelector('#imageARPreview'); - if(arPreviewRect){ - arPreviewRect.style.display = 'none'; - } - var tabImg2img = gradioApp().querySelector("#tab_img2img"); - if (tabImg2img) { - var inImg2img = tabImg2img.style.display == "block"; - if(inImg2img){ - let inputs = gradioApp().querySelectorAll('input'); - inputs.forEach(function(e){ - var is_width = e.parentElement.id == "img2img_width" - var is_height = e.parentElement.id == "img2img_height" - - if((is_width || is_height) && !e.classList.contains('scrollwatch')){ - e.addEventListener('input', function(e){dimensionChange(e, is_width, is_height)} ) - e.classList.add('scrollwatch') - } - if(is_width){ - currentWidth = e.value*1.0 - } - if(is_height){ - currentHeight = e.value*1.0 - } - }) + if ((is_width || is_height) && !e.classList.contains("scrollwatch")) { + e.addEventListener("input", function (e) { + dimensionChange(e, is_width, is_height); + }); + e.classList.add("scrollwatch"); } + if (is_width) { + currentWidth = e.value * 1.0; + } + if (is_height) { + currentHeight = e.value * 1.0; + } + }); } + } }); diff --git a/javascript/contextMenus.js b/javascript/contextMenus.js index 42f301ab..41b8582f 100644 --- a/javascript/contextMenus.js +++ b/javascript/contextMenus.js @@ -1,48 +1,50 @@ - -contextMenuInit = function(){ - let eventListenerApplied=false; +contextMenuInit = function () { + let eventListenerApplied = false; let menuSpecs = new Map(); - const uid = function(){ + const uid = function () { return Date.now().toString(36) + Math.random().toString(36).substring(2); - } + }; - function showContextMenu(event,element,menuEntries){ - let posx = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; - let posy = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; + function showContextMenu(event, element, menuEntries) { + let posx = + event.clientX + + document.body.scrollLeft + + document.documentElement.scrollLeft; + let posy = + event.clientY + + document.body.scrollTop + + document.documentElement.scrollTop; - let oldMenu = gradioApp().querySelector('#context-menu') - if(oldMenu){ - oldMenu.remove() + let oldMenu = gradioApp().querySelector("#context-menu"); + if (oldMenu) { + oldMenu.remove(); } - let baseStyle = window.getComputedStyle(uiCurrentTab) + let baseStyle = window.getComputedStyle(uiCurrentTab); - const contextMenu = document.createElement('nav') - contextMenu.id = "context-menu" - contextMenu.style.background = baseStyle.background - contextMenu.style.color = baseStyle.color - contextMenu.style.fontFamily = baseStyle.fontFamily - contextMenu.style.top = posy+'px' - contextMenu.style.left = posx+'px' + const contextMenu = document.createElement("nav"); + contextMenu.id = "context-menu"; + contextMenu.style.background = baseStyle.background; + contextMenu.style.color = baseStyle.color; + contextMenu.style.fontFamily = baseStyle.fontFamily; + contextMenu.style.top = posy + "px"; + contextMenu.style.left = posx + "px"; - - - const contextMenuList = document.createElement('ul') - contextMenuList.className = 'context-menu-items'; + const contextMenuList = document.createElement("ul"); + contextMenuList.className = "context-menu-items"; contextMenu.append(contextMenuList); - menuEntries.forEach(function(entry){ - let contextMenuEntry = document.createElement('a') - contextMenuEntry.innerHTML = entry['name'] - contextMenuEntry.addEventListener("click", function() { - entry['func'](); - }) + menuEntries.forEach(function (entry) { + let contextMenuEntry = document.createElement("a"); + contextMenuEntry.innerHTML = entry["name"]; + contextMenuEntry.addEventListener("click", function () { + entry["func"](); + }); contextMenuList.append(contextMenuEntry); + }); - }) - - gradioApp().appendChild(contextMenu) + gradioApp().appendChild(contextMenu); let menuWidth = contextMenu.offsetWidth + 4; let menuHeight = contextMenu.offsetHeight + 4; @@ -50,118 +52,143 @@ contextMenuInit = function(){ let windowWidth = window.innerWidth; let windowHeight = window.innerHeight; - if ( (windowWidth - posx) < menuWidth ) { + if (windowWidth - posx < menuWidth) { contextMenu.style.left = windowWidth - menuWidth + "px"; } - if ( (windowHeight - posy) < menuHeight ) { + if (windowHeight - posy < menuHeight) { contextMenu.style.top = windowHeight - menuHeight + "px"; } - } - function appendContextMenuOption(targetElementSelector,entryName,entryFunction){ + function appendContextMenuOption( + targetElementSelector, + entryName, + entryFunction + ) { + var currentItems = menuSpecs.get(targetElementSelector); - var currentItems = menuSpecs.get(targetElementSelector) - - if(!currentItems){ - currentItems = [] - menuSpecs.set(targetElementSelector,currentItems); + if (!currentItems) { + currentItems = []; + menuSpecs.set(targetElementSelector, currentItems); } - let newItem = {'id':targetElementSelector+'_'+uid(), - 'name':entryName, - 'func':entryFunction, - 'isNew':true} + let newItem = { + id: targetElementSelector + "_" + uid(), + name: entryName, + func: entryFunction, + isNew: true, + }; - currentItems.push(newItem) - return newItem['id'] + currentItems.push(newItem); + return newItem["id"]; } - function removeContextMenuOption(uid){ - menuSpecs.forEach(function(v) { - let index = -1 - v.forEach(function(e,ei){if(e['id']==uid){index=ei}}) - if(index>=0){ + function removeContextMenuOption(uid) { + menuSpecs.forEach(function (v) { + let index = -1; + v.forEach(function (e, ei) { + if (e["id"] == uid) { + index = ei; + } + }); + if (index >= 0) { v.splice(index, 1); } - }) + }); } - function addContextMenuEventListener(){ - if(eventListenerApplied){ + function addContextMenuEventListener() { + if (eventListenerApplied) { return; } - gradioApp().addEventListener("click", function(e) { - let source = e.composedPath()[0] - if(source.id && source.id.indexOf('check_progress')>-1){ - return + gradioApp().addEventListener("click", function (e) { + let source = e.composedPath()[0]; + if (source.id && source.id.indexOf("check_progress") > -1) { + return; } - let oldMenu = gradioApp().querySelector('#context-menu') - if(oldMenu){ - oldMenu.remove() + let oldMenu = gradioApp().querySelector("#context-menu"); + if (oldMenu) { + oldMenu.remove(); } }); - gradioApp().addEventListener("contextmenu", function(e) { - let oldMenu = gradioApp().querySelector('#context-menu') - if(oldMenu){ - oldMenu.remove() + gradioApp().addEventListener("contextmenu", function (e) { + let oldMenu = gradioApp().querySelector("#context-menu"); + if (oldMenu) { + oldMenu.remove(); } - menuSpecs.forEach(function(v,k) { - if(e.composedPath()[0].matches(k)){ - showContextMenu(e,e.composedPath()[0],v) - e.preventDefault() + menuSpecs.forEach(function (v, k) { + if (e.composedPath()[0].matches(k)) { + showContextMenu(e, e.composedPath()[0], v); + e.preventDefault(); } - }) + }); }); - eventListenerApplied=true - + eventListenerApplied = true; } - return [appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener] -} + return [ + appendContextMenuOption, + removeContextMenuOption, + addContextMenuEventListener, + ]; +}; initResponse = contextMenuInit(); -appendContextMenuOption = initResponse[0]; -removeContextMenuOption = initResponse[1]; +appendContextMenuOption = initResponse[0]; +removeContextMenuOption = initResponse[1]; addContextMenuEventListener = initResponse[2]; -(function(){ +(function () { //Start example Context Menu Items - let generateOnRepeat = function(genbuttonid,interruptbuttonid){ + let generateOnRepeat = function (genbuttonid, interruptbuttonid) { let genbutton = gradioApp().querySelector(genbuttonid); let interruptbutton = gradioApp().querySelector(interruptbuttonid); - if(!interruptbutton.offsetParent){ + if (!interruptbutton.offsetParent) { genbutton.click(); } - clearInterval(window.generateOnRepeatInterval) - window.generateOnRepeatInterval = setInterval(function(){ - if(!interruptbutton.offsetParent){ + clearInterval(window.generateOnRepeatInterval); + window.generateOnRepeatInterval = setInterval(function () { + if (!interruptbutton.offsetParent) { genbutton.click(); } - }, - 500) - } + }, 500); + }; - appendContextMenuOption('#txt2img_generate','Generate forever',function(){ - generateOnRepeat('#txt2img_generate','#txt2img_interrupt'); - }) - appendContextMenuOption('#img2img_generate','Generate forever',function(){ - generateOnRepeat('#img2img_generate','#img2img_interrupt'); - }) + appendContextMenuOption("#txt2img_generate", "Generate forever", function () { + generateOnRepeat("#txt2img_generate", "#txt2img_interrupt"); + }); + appendContextMenuOption("#img2img_generate", "Generate forever", function () { + generateOnRepeat("#img2img_generate", "#img2img_interrupt"); + }); - let cancelGenerateForever = function(){ - clearInterval(window.generateOnRepeatInterval) - } - - appendContextMenuOption('#txt2img_interrupt','Cancel generate forever',cancelGenerateForever) - appendContextMenuOption('#txt2img_generate', 'Cancel generate forever',cancelGenerateForever) - appendContextMenuOption('#img2img_interrupt','Cancel generate forever',cancelGenerateForever) - appendContextMenuOption('#img2img_generate', 'Cancel generate forever',cancelGenerateForever) + let cancelGenerateForever = function () { + clearInterval(window.generateOnRepeatInterval); + }; + appendContextMenuOption( + "#txt2img_interrupt", + "Cancel generate forever", + cancelGenerateForever + ); + appendContextMenuOption( + "#txt2img_generate", + "Cancel generate forever", + cancelGenerateForever + ); + appendContextMenuOption( + "#img2img_interrupt", + "Cancel generate forever", + cancelGenerateForever + ); + appendContextMenuOption( + "#img2img_generate", + "Cancel generate forever", + cancelGenerateForever + ); })(); //End example Context Menu Items -onUiUpdate(function(){ - addContextMenuEventListener() +onUiUpdate(function () { + addContextMenuEventListener(); }); diff --git a/javascript/dragdrop.js b/javascript/dragdrop.js index 0450cecb..8da5b35a 100644 --- a/javascript/dragdrop.js +++ b/javascript/dragdrop.js @@ -1,97 +1,108 @@ // allows drag-dropping files into gradio image elements, and also pasting images from clipboard -function isValidImageList( files ) { - return files && files?.length === 1 && ['image/png', 'image/gif', 'image/jpeg'].includes(files[0].type); +function isValidImageList(files) { + return ( + files && + files?.length === 1 && + ["image/png", "image/gif", "image/jpeg"].includes(files[0].type) + ); } -function dropReplaceImage( imgWrap, files ) { - if ( ! isValidImageList( files ) ) { - return; +function dropReplaceImage(imgWrap, files) { + if (!isValidImageList(files)) { + return; + } + + const tmpFile = files[0]; + + imgWrap.querySelector('[aria-label="Clear"]')?.click(); + const callback = () => { + const fileInput = imgWrap.querySelector('input[type="file"]'); + if (fileInput) { + if (files.length === 0) { + files = new DataTransfer(); + files.items.add(tmpFile); + fileInput.files = files.files; + } else { + fileInput.files = files; + } + fileInput.dispatchEvent(new Event("change")); } + }; - const tmpFile = files[0]; - - imgWrap.querySelector('[aria-label="Clear"]')?.click(); - const callback = () => { - const fileInput = imgWrap.querySelector('input[type="file"]'); - if ( fileInput ) { - if ( files.length === 0 ) { - files = new DataTransfer(); - files.items.add(tmpFile); - fileInput.files = files.files; - } else { - fileInput.files = files; - } - fileInput.dispatchEvent(new Event('change')); - } + if (imgWrap.closest("#pnginfo_image")) { + // special treatment for PNG Info tab, wait for fetch request to finish + const oldFetch = window.fetch; + window.fetch = async (input, options) => { + const response = await oldFetch(input, options); + if ("api/predict/" === input) { + const content = await response.text(); + window.fetch = oldFetch; + window.requestAnimationFrame(() => callback()); + return new Response(content, { + status: response.status, + statusText: response.statusText, + headers: response.headers, + }); + } + return response; }; - - if ( imgWrap.closest('#pnginfo_image') ) { - // special treatment for PNG Info tab, wait for fetch request to finish - const oldFetch = window.fetch; - window.fetch = async (input, options) => { - const response = await oldFetch(input, options); - if ( 'api/predict/' === input ) { - const content = await response.text(); - window.fetch = oldFetch; - window.requestAnimationFrame( () => callback() ); - return new Response(content, { - status: response.status, - statusText: response.statusText, - headers: response.headers - }) - } - return response; - }; - } else { - window.requestAnimationFrame( () => callback() ); - } + } else { + window.requestAnimationFrame(() => callback()); + } } -window.document.addEventListener('dragover', e => { - const target = e.composedPath()[0]; - const imgWrap = target.closest('[data-testid="image"]'); - if ( !imgWrap && target.placeholder && target.placeholder.indexOf("Prompt") == -1) { - return; - } - e.stopPropagation(); - e.preventDefault(); - e.dataTransfer.dropEffect = 'copy'; +window.document.addEventListener("dragover", (e) => { + const target = e.composedPath()[0]; + const imgWrap = target.closest('[data-testid="image"]'); + if ( + !imgWrap && + target.placeholder && + target.placeholder.indexOf("Prompt") == -1 + ) { + return; + } + e.stopPropagation(); + e.preventDefault(); + e.dataTransfer.dropEffect = "copy"; }); -window.document.addEventListener('drop', e => { - const target = e.composedPath()[0]; - if (target.placeholder.indexOf("Prompt") == -1) { - return; - } - const imgWrap = target.closest('[data-testid="image"]'); - if ( !imgWrap ) { - return; - } - e.stopPropagation(); - e.preventDefault(); - const files = e.dataTransfer.files; - dropReplaceImage( imgWrap, files ); +window.document.addEventListener("drop", (e) => { + const target = e.composedPath()[0]; + if (target.placeholder.indexOf("Prompt") == -1) { + return; + } + const imgWrap = target.closest('[data-testid="image"]'); + if (!imgWrap) { + return; + } + e.stopPropagation(); + e.preventDefault(); + const files = e.dataTransfer.files; + dropReplaceImage(imgWrap, files); }); -window.addEventListener('paste', e => { - const files = e.clipboardData.files; - if ( ! isValidImageList( files ) ) { - return; - } +window.addEventListener("paste", (e) => { + const files = e.clipboardData.files; + if (!isValidImageList(files)) { + return; + } - const visibleImageFields = [...gradioApp().querySelectorAll('[data-testid="image"]')] - .filter(el => uiElementIsVisible(el)); - if ( ! visibleImageFields.length ) { - return; - } - - const firstFreeImageField = visibleImageFields - .filter(el => el.querySelector('input[type=file]'))?.[0]; + const visibleImageFields = [ + ...gradioApp().querySelectorAll('[data-testid="image"]'), + ].filter((el) => uiElementIsVisible(el)); + if (!visibleImageFields.length) { + return; + } - dropReplaceImage( - firstFreeImageField ? - firstFreeImageField : - visibleImageFields[visibleImageFields.length - 1] - , files ); + const firstFreeImageField = visibleImageFields.filter((el) => + el.querySelector("input[type=file]") + )?.[0]; + + dropReplaceImage( + firstFreeImageField + ? firstFreeImageField + : visibleImageFields[visibleImageFields.length - 1], + files + ); }); diff --git a/javascript/edit-attention.js b/javascript/edit-attention.js index d2c2f190..5fffb64f 100644 --- a/javascript/edit-attention.js +++ b/javascript/edit-attention.js @@ -1,120 +1,142 @@ -function keyupEditAttention(event){ - let target = event.originalTarget || event.composedPath()[0]; - if (! target.matches("[id*='_toprow'] [id*='_prompt'] textarea")) return; - if (! (event.metaKey || event.ctrlKey)) return; +function keyupEditAttention(event) { + let target = event.originalTarget || event.composedPath()[0]; + if (!target.matches("[id*='_toprow'] [id*='_prompt'] textarea")) return; + if (!(event.metaKey || event.ctrlKey)) return; - let isPlus = event.key == "ArrowUp" - let isMinus = event.key == "ArrowDown" - if (!isPlus && !isMinus) return; + let isPlus = event.key == "ArrowUp"; + let isMinus = event.key == "ArrowDown"; + if (!isPlus && !isMinus) return; - let selectionStart = target.selectionStart; - let selectionEnd = target.selectionEnd; - let text = target.value; + let selectionStart = target.selectionStart; + let selectionEnd = target.selectionEnd; + let text = target.value; - function selectCurrentParenthesisBlock(OPEN, CLOSE){ - if (selectionStart !== selectionEnd) return false; + function selectCurrentParenthesisBlock(OPEN, CLOSE) { + if (selectionStart !== selectionEnd) return false; - // Find opening parenthesis around current cursor - const before = text.substring(0, selectionStart); - let beforeParen = before.lastIndexOf(OPEN); - if (beforeParen == -1) return false; - let beforeParenClose = before.lastIndexOf(CLOSE); - while (beforeParenClose !== -1 && beforeParenClose > beforeParen) { - beforeParen = before.lastIndexOf(OPEN, beforeParen - 1); - beforeParenClose = before.lastIndexOf(CLOSE, beforeParenClose - 1); - } - - // Find closing parenthesis around current cursor - const after = text.substring(selectionStart); - let afterParen = after.indexOf(CLOSE); - if (afterParen == -1) return false; - let afterParenOpen = after.indexOf(OPEN); - while (afterParenOpen !== -1 && afterParen > afterParenOpen) { - afterParen = after.indexOf(CLOSE, afterParen + 1); - afterParenOpen = after.indexOf(OPEN, afterParenOpen + 1); - } - if (beforeParen === -1 || afterParen === -1) return false; - - // Set the selection to the text between the parenthesis - const parenContent = text.substring(beforeParen + 1, selectionStart + afterParen); - const lastColon = parenContent.lastIndexOf(":"); - selectionStart = beforeParen + 1; - selectionEnd = selectionStart + lastColon; - target.setSelectionRange(selectionStart, selectionEnd); - return true; - } - - function selectCurrentWord(){ - if (selectionStart !== selectionEnd) return false; - const delimiters = opts.keyedit_delimiters + " \r\n\t"; - - // seek backward until to find beggining - while (!delimiters.includes(text[selectionStart - 1]) && selectionStart > 0) { - selectionStart--; - } - - // seek forward to find end - while (!delimiters.includes(text[selectionEnd]) && selectionEnd < text.length) { - selectionEnd++; - } - - target.setSelectionRange(selectionStart, selectionEnd); - return true; + // Find opening parenthesis around current cursor + const before = text.substring(0, selectionStart); + let beforeParen = before.lastIndexOf(OPEN); + if (beforeParen == -1) return false; + let beforeParenClose = before.lastIndexOf(CLOSE); + while (beforeParenClose !== -1 && beforeParenClose > beforeParen) { + beforeParen = before.lastIndexOf(OPEN, beforeParen - 1); + beforeParenClose = before.lastIndexOf(CLOSE, beforeParenClose - 1); } - // If the user hasn't selected anything, let's select their current parenthesis block or word - if (!selectCurrentParenthesisBlock('<', '>') && !selectCurrentParenthesisBlock('(', ')')) { - selectCurrentWord(); + // Find closing parenthesis around current cursor + const after = text.substring(selectionStart); + let afterParen = after.indexOf(CLOSE); + if (afterParen == -1) return false; + let afterParenOpen = after.indexOf(OPEN); + while (afterParenOpen !== -1 && afterParen > afterParenOpen) { + afterParen = after.indexOf(CLOSE, afterParen + 1); + afterParenOpen = after.indexOf(OPEN, afterParenOpen + 1); + } + if (beforeParen === -1 || afterParen === -1) return false; + + // Set the selection to the text between the parenthesis + const parenContent = text.substring( + beforeParen + 1, + selectionStart + afterParen + ); + const lastColon = parenContent.lastIndexOf(":"); + selectionStart = beforeParen + 1; + selectionEnd = selectionStart + lastColon; + target.setSelectionRange(selectionStart, selectionEnd); + return true; + } + + function selectCurrentWord() { + if (selectionStart !== selectionEnd) return false; + const delimiters = opts.keyedit_delimiters + " \r\n\t"; + + // seek backward until to find beggining + while ( + !delimiters.includes(text[selectionStart - 1]) && + selectionStart > 0 + ) { + selectionStart--; } - event.preventDefault(); - - var closeCharacter = ')' - var delta = opts.keyedit_precision_attention - - if (selectionStart > 0 && text[selectionStart - 1] == '<'){ - closeCharacter = '>' - delta = opts.keyedit_precision_extra - } else if (selectionStart == 0 || text[selectionStart - 1] != "(") { - - // do not include spaces at the end - while(selectionEnd > selectionStart && text[selectionEnd-1] == ' '){ - selectionEnd -= 1; - } - if(selectionStart == selectionEnd){ - return - } - - text = text.slice(0, selectionStart) + "(" + text.slice(selectionStart, selectionEnd) + ":1.0)" + text.slice(selectionEnd); - - selectionStart += 1; - selectionEnd += 1; + // seek forward to find end + while ( + !delimiters.includes(text[selectionEnd]) && + selectionEnd < text.length + ) { + selectionEnd++; } - var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1; - var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end)); - if (isNaN(weight)) return; + target.setSelectionRange(selectionStart, selectionEnd); + return true; + } - weight += isPlus ? delta : -delta; - weight = parseFloat(weight.toPrecision(12)); - if(String(weight).length == 1) weight += ".0" + // If the user hasn't selected anything, let's select their current parenthesis block or word + if ( + !selectCurrentParenthesisBlock("<", ">") && + !selectCurrentParenthesisBlock("(", ")") + ) { + selectCurrentWord(); + } - if (closeCharacter == ')' && weight == 1) { - text = text.slice(0, selectionStart - 1) + text.slice(selectionStart, selectionEnd) + text.slice(selectionEnd + 5); - selectionStart--; - selectionEnd--; - } else { - text = text.slice(0, selectionEnd + 1) + weight + text.slice(selectionEnd + 1 + end - 1); + event.preventDefault(); + + var closeCharacter = ")"; + var delta = opts.keyedit_precision_attention; + + if (selectionStart > 0 && text[selectionStart - 1] == "<") { + closeCharacter = ">"; + delta = opts.keyedit_precision_extra; + } else if (selectionStart == 0 || text[selectionStart - 1] != "(") { + // do not include spaces at the end + while (selectionEnd > selectionStart && text[selectionEnd - 1] == " ") { + selectionEnd -= 1; + } + if (selectionStart == selectionEnd) { + return; } - target.focus(); - target.value = text; - target.selectionStart = selectionStart; - target.selectionEnd = selectionEnd; + text = + text.slice(0, selectionStart) + + "(" + + text.slice(selectionStart, selectionEnd) + + ":1.0)" + + text.slice(selectionEnd); - updateInput(target) + selectionStart += 1; + selectionEnd += 1; + } + + var end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1; + var weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end)); + if (isNaN(weight)) return; + + weight += isPlus ? delta : -delta; + weight = parseFloat(weight.toPrecision(12)); + if (String(weight).length == 1) weight += ".0"; + + if (closeCharacter == ")" && weight == 1) { + text = + text.slice(0, selectionStart - 1) + + text.slice(selectionStart, selectionEnd) + + text.slice(selectionEnd + 5); + selectionStart--; + selectionEnd--; + } else { + text = + text.slice(0, selectionEnd + 1) + + weight + + text.slice(selectionEnd + 1 + end - 1); + } + + target.focus(); + target.value = text; + target.selectionStart = selectionStart; + target.selectionEnd = selectionEnd; + + updateInput(target); } -addEventListener('keydown', (event) => { - keyupEditAttention(event); +addEventListener("keydown", (event) => { + keyupEditAttention(event); }); diff --git a/javascript/extensions.js b/javascript/extensions.js index 2a2d2f8e..8bacb73e 100644 --- a/javascript/extensions.js +++ b/javascript/extensions.js @@ -1,71 +1,88 @@ +function extensions_apply(_disabled_list, _update_list, disable_all) { + var disable = []; + var update = []; -function extensions_apply(_disabled_list, _update_list, disable_all){ - var disable = [] - var update = [] + gradioApp() + .querySelectorAll('#extensions input[type="checkbox"]') + .forEach(function (x) { + if (x.name.startsWith("enable_") && !x.checked) + disable.push(x.name.substring(7)); - gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){ - if(x.name.startsWith("enable_") && ! x.checked) - disable.push(x.name.substring(7)) + if (x.name.startsWith("update_") && x.checked) + update.push(x.name.substring(7)); + }); - if(x.name.startsWith("update_") && x.checked) - update.push(x.name.substring(7)) - }) + restart_reload(); - restart_reload() - - return [JSON.stringify(disable), JSON.stringify(update), disable_all] + return [JSON.stringify(disable), JSON.stringify(update), disable_all]; } -function extensions_check(){ - var disable = [] +function extensions_check() { + var disable = []; - gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){ - if(x.name.startsWith("enable_") && ! x.checked) - disable.push(x.name.substring(7)) - }) + gradioApp() + .querySelectorAll('#extensions input[type="checkbox"]') + .forEach(function (x) { + if (x.name.startsWith("enable_") && !x.checked) + disable.push(x.name.substring(7)); + }); - gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){ - x.innerHTML = "Loading..." - }) + gradioApp() + .querySelectorAll("#extensions .extension_status") + .forEach(function (x) { + x.innerHTML = "Loading..."; + }); + var id = randomId(); + requestProgress( + id, + gradioApp().getElementById("extensions_installed_top"), + null, + function () {} + ); - var id = randomId() - requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function(){ - - }) - - return [id, JSON.stringify(disable)] + return [id, JSON.stringify(disable)]; } -function install_extension_from_index(button, url){ - button.disabled = "disabled" - button.value = "Installing..." +function install_extension_from_index(button, url) { + button.disabled = "disabled"; + button.value = "Installing..."; - var textarea = gradioApp().querySelector('#extension_to_install textarea') - textarea.value = url - updateInput(textarea) + var textarea = gradioApp().querySelector("#extension_to_install textarea"); + textarea.value = url; + updateInput(textarea); - gradioApp().querySelector('#install_extension_button').click() + gradioApp().querySelector("#install_extension_button").click(); } -function config_state_confirm_restore(_, config_state_name, config_restore_type) { - if (config_state_name == "Current") { - return [false, config_state_name, config_restore_type]; - } - let restored = ""; - if (config_restore_type == "extensions") { - restored = "all saved extension versions"; - } else if (config_restore_type == "webui") { - restored = "the webui version"; - } else { - restored = "the webui version and all saved extension versions"; - } - let confirmed = confirm("Are you sure you want to restore from this state?\nThis will reset " + restored + "."); - if (confirmed) { - restart_reload(); - gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){ - x.innerHTML = "Loading..." - }) - } - return [confirmed, config_state_name, config_restore_type]; +function config_state_confirm_restore( + _, + config_state_name, + config_restore_type +) { + if (config_state_name == "Current") { + return [false, config_state_name, config_restore_type]; + } + let restored = ""; + if (config_restore_type == "extensions") { + restored = "all saved extension versions"; + } else if (config_restore_type == "webui") { + restored = "the webui version"; + } else { + restored = "the webui version and all saved extension versions"; + } + let confirmed = confirm( + "Are you sure you want to restore from this state?\nThis will reset " + + restored + + "." + ); + if (confirmed) { + restart_reload(); + gradioApp() + .querySelectorAll("#extensions .extension_status") + .forEach(function (x) { + x.innerHTML = "Loading..."; + }); + } + return [confirmed, config_state_name, config_restore_type]; } diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js index 5b9c2223..da1ffc6b 100644 --- a/javascript/extraNetworks.js +++ b/javascript/extraNetworks.js @@ -1,194 +1,242 @@ +function setupExtraNetworksForTab(tabname) { + gradioApp() + .querySelector("#" + tabname + "_extra_tabs") + .classList.add("extra-networks"); -function setupExtraNetworksForTab(tabname){ - gradioApp().querySelector('#'+tabname+'_extra_tabs').classList.add('extra-networks') + var tabs = gradioApp().querySelector("#" + tabname + "_extra_tabs > div"); + var search = gradioApp().querySelector( + "#" + tabname + "_extra_search textarea" + ); + var refresh = gradioApp().getElementById(tabname + "_extra_refresh"); - var tabs = gradioApp().querySelector('#'+tabname+'_extra_tabs > div') - var search = gradioApp().querySelector('#'+tabname+'_extra_search textarea') - var refresh = gradioApp().getElementById(tabname+'_extra_refresh') - - let clear = document.createElement("div"); - clear.id = tabname+'_extra_clear'; - clear.classList.add("token-remove", "remove-all", "svelte-a6vu2r", "hide"); - clear.title = "Clear search"; - clear.innerHTML = '' - - search.classList.add('search') + let clear = document.createElement("div"); + clear.id = tabname + "_extra_clear"; + clear.classList.add("token-remove", "remove-all", "svelte-a6vu2r", "hide"); + clear.title = "Clear search"; + clear.innerHTML = + ''; - tabs.appendChild(search) - tabs.appendChild(clear) - tabs.appendChild(refresh) - - clear.addEventListener("click", function(evt){ - search.value = ""; - updateInput(search); - }) - - search.addEventListener("input", function(evt){ - searchTerm = search.value.toLowerCase() + search.classList.add("search"); - gradioApp().querySelectorAll('#'+tabname+'_extra_tabs div.card').forEach(function(elem){ - var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase() - elem.parentElement.style.display = text.indexOf(searchTerm) == -1 ? "none" : "" - }) - }); + tabs.appendChild(search); + tabs.appendChild(clear); + tabs.appendChild(refresh); + + clear.addEventListener("click", function (evt) { + search.value = ""; + updateInput(search); + }); + + search.addEventListener("input", function (evt) { + searchTerm = search.value.toLowerCase(); + + gradioApp() + .querySelectorAll("#" + tabname + "_extra_tabs div.card") + .forEach(function (elem) { + var text = + elem.querySelector(".name").textContent.toLowerCase() + + " " + + elem.querySelector(".search_term").textContent.toLowerCase(); + elem.parentElement.style.display = + text.indexOf(searchTerm) == -1 ? "none" : ""; + }); + }); } var activePromptTextarea = {}; -function setupExtraNetworks(){ - setupExtraNetworksForTab('txt2img') - setupExtraNetworksForTab('img2img') +function setupExtraNetworks() { + setupExtraNetworksForTab("txt2img"); + setupExtraNetworksForTab("img2img"); - function registerPrompt(tabname, id){ - var textarea = gradioApp().querySelector("#" + id + " > label > textarea"); + function registerPrompt(tabname, id) { + var textarea = gradioApp().querySelector("#" + id + " > label > textarea"); - if (! activePromptTextarea[tabname]){ - activePromptTextarea[tabname] = textarea - } - - textarea.addEventListener("focus", function(){ - activePromptTextarea[tabname] = textarea; - }); + if (!activePromptTextarea[tabname]) { + activePromptTextarea[tabname] = textarea; } - registerPrompt('txt2img', 'txt2img_prompt') - registerPrompt('txt2img', 'txt2img_neg_prompt') - registerPrompt('img2img', 'img2img_prompt') - registerPrompt('img2img', 'img2img_neg_prompt') + textarea.addEventListener("focus", function () { + activePromptTextarea[tabname] = textarea; + }); + } + + registerPrompt("txt2img", "txt2img_prompt"); + registerPrompt("txt2img", "txt2img_neg_prompt"); + registerPrompt("img2img", "img2img_prompt"); + registerPrompt("img2img", "img2img_neg_prompt"); } -onUiLoaded(setupExtraNetworks) +onUiLoaded(setupExtraNetworks); -var re_extranet = /<([^:]+:[^:]+):[\d\.]+>/; +var re_extranet = /<([^:]+:[^:]+):[\d\.]+>/; var re_extranet_g = /\s+<([^:]+:[^:]+):[\d\.]+>/g; -function tryToRemoveExtraNetworkFromPrompt(textarea, text){ - var m = text.match(re_extranet) - if(! m) return false +function tryToRemoveExtraNetworkFromPrompt(textarea, text) { + var m = text.match(re_extranet); + if (!m) return false; - var partToSearch = m[1] - var replaced = false - var newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found){ - m = found.match(re_extranet); - if(m[1] == partToSearch){ - replaced = true; - return "" - } - return found; - }) - - if(replaced){ - textarea.value = newTextareaText - return true; + var partToSearch = m[1]; + var replaced = false; + var newTextareaText = textarea.value.replaceAll( + re_extranet_g, + function (found) { + m = found.match(re_extranet); + if (m[1] == partToSearch) { + replaced = true; + return ""; + } + return found; } + ); - return false + if (replaced) { + textarea.value = newTextareaText; + return true; + } + + return false; } -function cardClicked(tabname, textToAdd, allowNegativePrompt){ - var textarea = allowNegativePrompt ? activePromptTextarea[tabname] : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea") +function cardClicked(tabname, textToAdd, allowNegativePrompt) { + var textarea = allowNegativePrompt + ? activePromptTextarea[tabname] + : gradioApp().querySelector("#" + tabname + "_prompt > label > textarea"); - if(! tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)){ - textarea.value = textarea.value + opts.extra_networks_add_text_separator + textToAdd - } + if (!tryToRemoveExtraNetworkFromPrompt(textarea, textToAdd)) { + textarea.value = + textarea.value + opts.extra_networks_add_text_separator + textToAdd; + } - updateInput(textarea) + updateInput(textarea); } -function saveCardPreview(event, tabname, filename){ - var textarea = gradioApp().querySelector("#" + tabname + '_preview_filename > label > textarea') - var button = gradioApp().getElementById(tabname + '_save_preview') +function saveCardPreview(event, tabname, filename) { + var textarea = gradioApp().querySelector( + "#" + tabname + "_preview_filename > label > textarea" + ); + var button = gradioApp().getElementById(tabname + "_save_preview"); - textarea.value = filename - updateInput(textarea) + textarea.value = filename; + updateInput(textarea); - button.click() + button.click(); - event.stopPropagation() - event.preventDefault() + var search = gradioApp().querySelector( + "#" + tabname + "_extra_tabs textarea" + ); + + setTimeout(function () { + search.value = search.value.toLowerCase(); + updateInput(search); + }, 1000); + + event.stopPropagation(); + event.preventDefault(); } -function extraNetworksSearchButton(tabs_id, event){ +function extraNetworksSearchButton(tabs_id, event) { + var searchTextarea = gradioApp().querySelector( + "#" + tabs_id + " > div > textarea" + ); + var button = event.target; + var text = button.classList.contains("search-all") + ? "" + : button.textContent.trim(); + //text = event.target.selectedIndex == 0 ? "" : event.target.options[event.target.selectedIndex].text; - var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea') - var button = event.target - var text = button.classList.contains("search-all") ? "" : button.textContent.trim() - //text = event.target.selectedIndex == 0 ? "" : event.target.options[event.target.selectedIndex].text; - - searchTextarea.value = text - updateInput(searchTextarea) + searchTextarea.value = text; + updateInput(searchTextarea); } var globalPopup = null; var globalPopupInner = null; -function popup(contents){ - if(! globalPopup){ - globalPopup = document.createElement('div') - globalPopup.onclick = function(){ globalPopup.style.display = "none"; }; - globalPopup.classList.add('global-popup'); - - var close = document.createElement('div') - close.classList.add('global-popup-close'); - close.onclick = function(){ globalPopup.style.display = "none"; }; - close.title = "Close"; - globalPopup.appendChild(close) - - globalPopupInner = document.createElement('div') - globalPopupInner.onclick = function(event){ event.stopPropagation(); return false; }; - globalPopupInner.classList.add('global-popup-inner'); - globalPopup.appendChild(globalPopupInner) - - gradioApp().appendChild(globalPopup); - } - - globalPopupInner.innerHTML = ''; - globalPopupInner.appendChild(contents); - - globalPopup.style.display = "flex"; -} - -function extraNetworksShowMetadata(text){ - var elem = document.createElement('pre') - elem.classList.add('popup-metadata'); - elem.textContent = text; - - popup(elem); -} - -function requestGet(url, data, handler, errorHandler){ - var xhr = new XMLHttpRequest(); - var args = Object.keys(data).map(function(k){ return encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) }).join('&') - xhr.open("GET", url + "?" + args, true); - - xhr.onreadystatechange = function () { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - try { - var js = JSON.parse(xhr.responseText); - handler(js) - } catch (error) { - console.error(error); - errorHandler() - } - } else{ - errorHandler() - } - } +function popup(contents) { + if (!globalPopup) { + globalPopup = document.createElement("div"); + globalPopup.onclick = function () { + globalPopup.style.display = "none"; }; - var js = JSON.stringify(data); - xhr.send(js); + globalPopup.classList.add("global-popup"); + + var close = document.createElement("div"); + close.classList.add("global-popup-close"); + close.onclick = function () { + globalPopup.style.display = "none"; + }; + close.title = "Close"; + globalPopup.appendChild(close); + + globalPopupInner = document.createElement("div"); + globalPopupInner.onclick = function (event) { + event.stopPropagation(); + return false; + }; + globalPopupInner.classList.add("global-popup-inner"); + globalPopup.appendChild(globalPopupInner); + + gradioApp().appendChild(globalPopup); + } + + globalPopupInner.innerHTML = ""; + globalPopupInner.appendChild(contents); + + globalPopup.style.display = "flex"; } -function extraNetworksRequestMetadata(event, extraPage, cardName){ - var showError = function(){ extraNetworksShowMetadata("there was an error getting metadata"); } +function extraNetworksShowMetadata(text) { + var elem = document.createElement("pre"); + elem.classList.add("popup-metadata"); + elem.textContent = text; - requestGet("./sd_extra_networks/metadata", {"page": extraPage, "item": cardName}, function(data){ - if(data && data.metadata){ - extraNetworksShowMetadata(data.metadata) - } else{ - showError() + popup(elem); +} + +function requestGet(url, data, handler, errorHandler) { + var xhr = new XMLHttpRequest(); + var args = Object.keys(data) + .map(function (k) { + return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]); + }) + .join("&"); + xhr.open("GET", url + "?" + args, true); + + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + try { + var js = JSON.parse(xhr.responseText); + handler(js); + } catch (error) { + console.error(error); + errorHandler(); } - }, showError) - - event.stopPropagation() + } else { + errorHandler(); + } + } + }; + var js = JSON.stringify(data); + xhr.send(js); +} + +function extraNetworksRequestMetadata(event, extraPage, cardName) { + var showError = function () { + extraNetworksShowMetadata("there was an error getting metadata"); + }; + + requestGet( + "./sd_extra_networks/metadata", + { page: extraPage, item: cardName }, + function (data) { + if (data && data.metadata) { + extraNetworksShowMetadata(data.metadata); + } else { + showError(); + } + }, + showError + ); + + event.stopPropagation(); } diff --git a/javascript/generationParams.js b/javascript/generationParams.js index 99e7946a..d8e282ea 100644 --- a/javascript/generationParams.js +++ b/javascript/generationParams.js @@ -1,14 +1,16 @@ // attaches listeners to the txt2img and img2img galleries to update displayed generation param text when the image changes -let txt2img_gallery, img2img_gallery, modal = undefined; -onUiUpdate(function(){ - if (!txt2img_gallery) { - txt2img_gallery = attachGalleryListeners("txt2img") - } - if (!img2img_gallery) { - img2img_gallery = attachGalleryListeners("img2img") - } - /* +let txt2img_gallery, + img2img_gallery, + modal = undefined; +onUiUpdate(function () { + if (!txt2img_gallery) { + txt2img_gallery = attachGalleryListeners("txt2img"); + } + if (!img2img_gallery) { + img2img_gallery = attachGalleryListeners("img2img"); + } + /* if (!modal) { modal = gradioApp().getElementById('lightboxModal') modalObserver.observe(modal, { attributes : true, attributeFilter : ['style'] }); @@ -16,20 +18,34 @@ onUiUpdate(function(){ */ }); -let modalObserver = new MutationObserver(function(mutations) { - mutations.forEach(function(mutationRecord) { - let selectedTab = gradioApp().querySelector('#tabs div button.selected')?.innerText - if (mutationRecord.target.style.display === 'none' && (selectedTab === 'txt2img' || selectedTab === 'img2img')) - gradioApp().getElementById(selectedTab+"_generation_info_button")?.click() - }); +let modalObserver = new MutationObserver(function (mutations) { + mutations.forEach(function (mutationRecord) { + let selectedTab = gradioApp().querySelector( + "#tabs div button.selected" + )?.innerText; + if ( + mutationRecord.target.style.display === "none" && + (selectedTab === "txt2img" || selectedTab === "img2img") + ) + gradioApp() + .getElementById(selectedTab + "_generation_info_button") + ?.click(); + }); }); function attachGalleryListeners(tab_name) { - var gallery = gradioApp().querySelector('#'+tab_name+'_gallery') - gallery?.addEventListener('click', () => gradioApp().getElementById(tab_name+"_generation_info_button")?.click()); - gallery?.addEventListener('keydown', (e) => { - if (e.keyCode == 37 || e.keyCode == 39) // left or right arrow - gradioApp().getElementById(tab_name+"_generation_info_button").click() - }); - return gallery; + var gallery = gradioApp().querySelector("#" + tab_name + "_gallery"); + gallery?.addEventListener("click", () => + gradioApp() + .getElementById(tab_name + "_generation_info_button") + ?.click() + ); + gallery?.addEventListener("keydown", (e) => { + if (e.keyCode == 37 || e.keyCode == 39) + // left or right arrow + gradioApp() + .getElementById(tab_name + "_generation_info_button") + .click(); + }); + return gallery; } diff --git a/javascript/hires_fix.js b/javascript/hires_fix.js index d3b407c7..7544de16 100644 --- a/javascript/hires_fix.js +++ b/javascript/hires_fix.js @@ -1,18 +1,36 @@ +function onCalcResolutionHires( + enable, + width, + height, + hr_scale, + hr_resize_x, + hr_resize_y +) { + function setInactive(elem, inactive) { + elem.classList.toggle("inactive", !!inactive); + } -function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y){ - function setInactive(elem, inactive){ - elem.classList.toggle('inactive', !!inactive) - } + var hrUpscaleBy = gradioApp().getElementById("txt2img_hr_scale"); + var hrResizeX = gradioApp().getElementById("txt2img_hr_resize_x"); + var hrResizeY = gradioApp().getElementById("txt2img_hr_resize_y"); - var hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale') - var hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x') - var hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y') + gradioApp().getElementById("txt2img_hires_fix_row2").style.display = + opts.use_old_hires_fix_width_height ? "none" : "block"; - gradioApp().getElementById('txt2img_hires_fix_row2').style.display = opts.use_old_hires_fix_width_height ? "none" : "block" + setInactive( + hrUpscaleBy, + opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0 + ); + setInactive( + hrResizeX, + opts.use_old_hires_fix_width_height || hr_resize_x == 0 + ); + setInactive( + hrResizeY, + opts.use_old_hires_fix_width_height || hr_resize_y == 0 + ); - setInactive(hrUpscaleBy, opts.use_old_hires_fix_width_height || hr_resize_x > 0 || hr_resize_y > 0) - setInactive(hrResizeX, opts.use_old_hires_fix_width_height || hr_resize_x == 0) - setInactive(hrResizeY, opts.use_old_hires_fix_width_height || hr_resize_y == 0) - - return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y] + setTimeout(function () { + return [enable, width, height, hr_scale, hr_resize_x, hr_resize_y]; + }, 100); } diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js index d4472539..485d14ef 100644 --- a/javascript/imageMaskFix.js +++ b/javascript/imageMaskFix.js @@ -3,7 +3,7 @@ * @see https://github.com/gradio-app/gradio/issues/1721 */ - /* +/* window.addEventListener( 'resize', () => imageMaskResize()); function imageMaskResize() { @@ -47,200 +47,236 @@ function imageMaskResize() { onUiUpdate(() => imageMaskResize()); */ -onUiLoaded(function(){ - const color_box = ''; - const brush_size = ''; - let is_drawing = false; - let img_src = []; - let spl_instances = []; - let spl_pan_instances = []; - let img2img_tab_index = 0; - let intervalLastUIUpdate; - const container = gradioApp().querySelector(".gradio-container"); - const observer = new MutationObserver(() => - gradioApp().querySelectorAll('div[data-testid="image"]').forEach(function (elem, i){ - let img_parent = elem.parentElement.querySelector('div[data-testid="image"] > div'); - let img = img_parent.querySelector('img'); - if(img){ - if(img_src[i] != img.src){ - let tool_buttons = img_parent.querySelectorAll('button'); - //console.log(tool_buttons); - if(tool_buttons.length > 2){ - img_parent.style.visibility = "hidden"; - - if(intervalLastUIUpdate != null) clearInterval(intervalLastUIUpdate); - intervalLastUIUpdate = setInterval(function() { - clearInterval(intervalLastUIUpdate); - img_parent.addEventListener('mouseup', function(e){ - img_src[i] = img.src; - }) - - let spl_parent = elem.parentElement; - let spl; - let spl_pan; - let isPanning; - let splid; - - if(spl_parent.className != "spl-pane"){ - spl = new Spotlight(); - spl.init(spl_parent, "-"+spl_parent.id); - - spl.addControl("undo", spl_undo_handler); - spl_pan = spl.addControl("pan", spl_pan_handler); - spl.addControl("brush", spl_brush_handler, brush_size); - if(tool_buttons.length == 5){ - spl.addControl("color", spl_color_handler, color_box); - } - spl.addControl("clear",spl_clear_handler); - - spl_instances[i] = spl; - spl_pan_instances[i] = spl_pan; - - }else{ - spl = spl_instances[i]; - spl_pan = spl_pan_instances[i]; - } - - img_src[i] = img.src; - //console.log("NEWIMAGE"); +onUiLoaded(function () { + const color_box = ''; + const brush_size = ''; + let is_drawing = false; + let img_src = []; + let spl_instances = []; + let spl_pan_instances = []; + let img2img_tab_index = 0; + let intervalLastUIUpdate; + const container = gradioApp().querySelector(".gradio-container"); + const observer = new MutationObserver(() => + gradioApp() + .querySelectorAll('div[data-testid="image"]') + .forEach(function (elem, i) { + let img_parent = elem.parentElement.querySelector( + 'div[data-testid="image"] > div' + ); + let img = img_parent.querySelector("img"); + if (img) { + if (img_src[i] != img.src) { + let tool_buttons = img_parent.querySelectorAll("button"); + //console.log(tool_buttons); + if (tool_buttons.length > 2) { + img_parent.style.visibility = "hidden"; - function spl_undo_handler(e) { - tool_buttons[0].click(); - } - - function spl_clear_handler(e){ - tool_buttons[2].click(); - spl.panzoom(false); - img_parent.classList.remove("no-point-events"); - img_parent.parentElement.classList.remove("move"); - document.removeEventListener('wheel', preventDefault, false); - setTimeout(function() { - spl.close(false, true); - img_parent.style.flexGrow = "1"; - img_src[i] = ""; - elem.style.transform = "none"; - }, 200); - - } - - function spl_color_handler(e){} - function spl_brush_handler(e){} + if (intervalLastUIUpdate != null) + clearInterval(intervalLastUIUpdate); + intervalLastUIUpdate = setInterval(function () { + clearInterval(intervalLastUIUpdate); + img_parent.addEventListener("mouseup", function (e) { + img_src[i] = img.src; + }); - function preventDefault(e) { - e = e || window.event - if (e.preventDefault) { - e.preventDefault() - } - e.returnValue = false - } + let spl_parent = elem.parentElement; + let spl; + let spl_pan; + let isPanning; + let splid; - function pan_toggle(val, target){ - isPanning = val; - target.classList.toggle("on", isPanning); - spl.panzoom(val); - - if(isPanning){ - img_parent.classList.add("no-point-events"); - img_parent.parentElement.classList.add("move"); - document.addEventListener('wheel', preventDefault, {passive: false}); - }else{ - img_parent.classList.remove("no-point-events"); - img_parent.parentElement.classList.remove("move"); - document.removeEventListener('wheel', preventDefault, false); - } - - } + if (spl_parent.className != "spl-pane") { + spl = new Spotlight(); + spl.init(spl_parent, "-" + spl_parent.id); - function spl_pan_handler(e){ - isPanning = !isPanning; - pan_toggle(isPanning, this); - } + spl.addControl("undo", spl_undo_handler); + spl_pan = spl.addControl("pan", spl_pan_handler); + spl.addControl("brush", spl_brush_handler, brush_size); + if (tool_buttons.length == 5) { + spl.addControl("color", spl_color_handler, color_box); + } + spl.addControl("clear", spl_clear_handler); - function update_color(listener){ - let input_color = img_parent.querySelector("input[type='color']"); - let spl = img_parent.parentElement.parentElement.parentElement.parentElement.parentElement; - let spl_color = spl.querySelector(".spl-color input[type='color']"); - spl_color.value = input_color.value; - - if(listener){ - spl_color.addEventListener("input", function(ev) { - input_color.value = ev.target.value; - updateInput(input_color); - pan_toggle(false, spl_pan); - }) - } - } + spl_instances[i] = spl; + spl_pan_instances[i] = spl_pan; + } else { + spl = spl_instances[i]; + spl_pan = spl_pan_instances[i]; + } - function update_brush(listener){ - let input_range = img_parent.querySelector("input[type='range']"); - let spl = img_parent.parentElement.parentElement.parentElement.parentElement.parentElement; - let spl_brush = spl.querySelector(".spl-brush input[type='range']"); - spl_brush.value = input_range.value; - - if(listener){ - spl_brush.addEventListener("input", function(ev) { - input_range.value = ev.target.value; - updateInput(input_range); - }) - } - } + img_src[i] = img.src; + //console.log("NEWIMAGE"); - function init_drawing_tools(){ - - let input_color = img_parent.querySelector("input[type='color']"); - if(!input_color){ - let tbcolor = img_parent.querySelector("button[aria-label='Select brush color']"); - if(tbcolor){ - tbcolor.click(); - setTimeout(function() { update_color(true); }, 100); - } - }else{ - setTimeout(function() { update_color(false);}, 100); - } - - let input_range = img_parent.querySelector("input[type='range']"); - if(!input_range){ - let tbrange = img_parent.querySelector("button[aria-label='Use brush']"); - - if(tbrange){ - tbrange.click(); - setTimeout(function() { update_brush(true); }, 100); - } - }else{ - setTimeout(function() { update_brush(false);}, 100); - } + function spl_undo_handler(e) { + tool_buttons[0].click(); + } - } + function spl_clear_handler(e) { + tool_buttons[2].click(); + spl.panzoom(false); + img_parent.classList.remove("no-point-events"); + img_parent.parentElement.classList.remove("move"); + document.removeEventListener("wheel", preventDefault, false); + setTimeout(function () { + spl.close(false, true); + img_parent.style.flexGrow = "1"; + img_src[i] = ""; + elem.style.transform = "none"; + }, 200); + } - let w = img.naturalWidth; - let h = img.naturalHeight; - img_parent.style.width = `${w}px`; - img_parent.style.height = `${h}px`; - - spl.show([{ - media: "node", - src: elem, - //autohide: true, - //control: ["pan","clear","undo","fullscreen","autofit","zoom-in","zoom-out","close"], - class: "relative", - }], - ); + function spl_color_handler(e) {} + function spl_brush_handler(e) {} - img_parent.style.flexGrow = "0"; - pan_toggle(false, spl_pan); - spl.panzoom(false); - setTimeout(function() { init_drawing_tools(); }, 500); - img_parent.style.visibility = "visible"; + function preventDefault(e) { + e = e || window.event; + if (e.preventDefault) { + e.preventDefault(); + } + e.returnValue = false; + } - }, 500); - } - } - } - })); - observer.observe(container, { childList: true, subtree: true }); - - -/* gradioApp().querySelectorAll('#mode_img2img > .tabitem').forEach(function (tb, ti){ + function pan_toggle(val, target) { + isPanning = val; + target.classList.toggle("on", isPanning); + spl.panzoom(val); + + if (isPanning) { + img_parent.classList.add("no-point-events"); + img_parent.parentElement.classList.add("move"); + document.addEventListener("wheel", preventDefault, { + passive: false, + }); + } else { + img_parent.classList.remove("no-point-events"); + img_parent.parentElement.classList.remove("move"); + document.removeEventListener( + "wheel", + preventDefault, + false + ); + } + } + + function spl_pan_handler(e) { + isPanning = !isPanning; + pan_toggle(isPanning, this); + } + + function update_color(listener) { + let input_color = img_parent.querySelector( + "input[type='color']" + ); + let spl = + img_parent.parentElement.parentElement.parentElement + .parentElement.parentElement; + let spl_color = spl.querySelector( + ".spl-color input[type='color']" + ); + spl_color.value = input_color.value; + + if (listener) { + spl_color.addEventListener("input", function (ev) { + input_color.value = ev.target.value; + updateInput(input_color); + pan_toggle(false, spl_pan); + }); + } + } + + function update_brush(listener) { + let input_range = img_parent.querySelector( + "input[type='range']" + ); + let spl = + img_parent.parentElement.parentElement.parentElement + .parentElement.parentElement; + let spl_brush = spl.querySelector( + ".spl-brush input[type='range']" + ); + spl_brush.value = input_range.value; + + if (listener) { + spl_brush.addEventListener("input", function (ev) { + input_range.value = ev.target.value; + updateInput(input_range); + }); + } + } + + function init_drawing_tools() { + let input_color = img_parent.querySelector( + "input[type='color']" + ); + if (!input_color) { + let tbcolor = img_parent.querySelector( + "button[aria-label='Select brush color']" + ); + if (tbcolor) { + tbcolor.click(); + setTimeout(function () { + update_color(true); + }, 100); + } + } else { + setTimeout(function () { + update_color(false); + }, 100); + } + + let input_range = img_parent.querySelector( + "input[type='range']" + ); + if (!input_range) { + let tbrange = img_parent.querySelector( + "button[aria-label='Use brush']" + ); + + if (tbrange) { + tbrange.click(); + setTimeout(function () { + update_brush(true); + }, 100); + } + } else { + setTimeout(function () { + update_brush(false); + }, 100); + } + } + + let w = img.naturalWidth; + let h = img.naturalHeight; + img_parent.style.width = `${w}px`; + img_parent.style.height = `${h}px`; + + spl.show([ + { + media: "node", + src: elem, + //autohide: true, + //control: ["pan","clear","undo","fullscreen","autofit","zoom-in","zoom-out","close"], + class: "relative", + }, + ]); + + img_parent.style.flexGrow = "0"; + pan_toggle(false, spl_pan); + spl.panzoom(false); + setTimeout(function () { + init_drawing_tools(); + }, 500); + img_parent.style.visibility = "visible"; + }, 500); + } + } + } + }) + ); + observer.observe(container, { childList: true, subtree: true }); + + /* gradioApp().querySelectorAll('#mode_img2img > .tabitem').forEach(function (tb, ti){ tb.querySelectorAll('[id^="img2img_copy_to_"] > button').forEach(function (btn, bi){ btn.addEventListener("click", function(e) { @@ -258,10 +294,7 @@ onUiLoaded(function(){ }) */ - - -}) - +}); /* let intervalLastUIUpdate; @@ -305,6 +338,3 @@ onUiUpdate(function() { if(intervalLastUIUpdate != null) clearInterval(intervalLastUIUpdate); intervalLastUIUpdate = setInterval(onLastUIUpdate, 1000); }) */ - - - diff --git a/javascript/imageParams.js b/javascript/imageParams.js index 64aee93b..789766dc 100644 --- a/javascript/imageParams.js +++ b/javascript/imageParams.js @@ -1,18 +1,21 @@ -window.onload = (function(){ - window.addEventListener('drop', e => { - const target = e.composedPath()[0]; - if (target.placeholder.indexOf("Prompt") == -1) return; +window.onload = function () { + window.addEventListener("drop", (e) => { + const target = e.composedPath()[0]; + if (target.placeholder.indexOf("Prompt") == -1) return; - let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image"; + let prompt_target = + get_tab_index("tabs") == 1 + ? "img2img_prompt_image" + : "txt2img_prompt_image"; - e.stopPropagation(); - e.preventDefault(); - const imgParent = gradioApp().getElementById(prompt_target); - const files = e.dataTransfer.files; - const fileInput = imgParent.querySelector('input[type="file"]'); - if ( fileInput ) { - fileInput.files = files; - fileInput.dispatchEvent(new Event('change')); - } - }); -}); + e.stopPropagation(); + e.preventDefault(); + const imgParent = gradioApp().getElementById(prompt_target); + const files = e.dataTransfer.files; + const fileInput = imgParent.querySelector('input[type="file"]'); + if (fileInput) { + fileInput.files = files; + fileInput.dispatchEvent(new Event("change")); + } + }); +}; diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 5ba0d275..4da6e934 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -261,7 +261,7 @@ document.addEventListener("DOMContentLoaded", function() { */ //called from progressbar function showGalleryImage() { - //need to clean up the old code + //need to clean up the old code } let like; @@ -271,7 +271,20 @@ let slide = 0; let gallery = []; let fullImg_src; //let control = ["pan","undo","like","tile","page","fullscreen","autofit","zoom-in","zoom-out","clear","close","download","prev","next"]; -let control = ["like","tile","page","fullscreen","autofit","zoom-in","zoom-out","clear","close","download","prev","next"]; +let control = [ + "like", + "tile", + "page", + "fullscreen", + "autofit", + "zoom-in", + "zoom-out", + "clear", + "close", + "download", + "prev", + "next", +]; let img_browser; let img_file_name; @@ -281,175 +294,174 @@ let spl_zoom_out; let spl_zoom_in; let spotlight_gallery; - -function tile_zoom_update(val){ - let current_tile_state_size = gallery[slide].tile_size; - current_tile_state_size += (val * 5); - current_tile_state_size = Math.max(5, Math.min(100,current_tile_state_size)); - spl_pane.style.setProperty('background-size', current_tile_state_size+"%"); - gallery[slide].tile_size = current_tile_state_size; +function tile_zoom_update(val) { + let current_tile_state_size = gallery[slide].tile_size; + current_tile_state_size += val * 5; + current_tile_state_size = Math.max(5, Math.min(100, current_tile_state_size)); + spl_pane.style.setProperty("background-size", current_tile_state_size + "%"); + gallery[slide].tile_size = current_tile_state_size; } -function tile_wheel(event){ - let delta = event["deltaY"]; - delta = (delta < 0 ? 1 : delta ? -1 : 0) * 0.5; - tile_zoom_update(delta); +function tile_wheel(event) { + let delta = event["deltaY"]; + delta = (delta < 0 ? 1 : delta ? -1 : 0) * 0.5; + tile_zoom_update(delta); } -function tile_zoom_in(event){ - tile_zoom_update(1); +function tile_zoom_in(event) { + tile_zoom_update(1); } -function tile_zoom_out(event){ - tile_zoom_update(-1); +function tile_zoom_out(event) { + tile_zoom_update(-1); } -function removeTile(){ - spl_pane.removeEventListener("wheel", tile_wheel); - spl_zoom_out.removeEventListener("click", tile_zoom_out); - spl_zoom_in.removeEventListener("click", tile_zoom_in); - - spl_pane.classList.remove("hide"); - spl_pane.style.setProperty('background-image', 'none'); - spotlight_gallery.zoom(0.0); +function removeTile() { + spl_pane.removeEventListener("wheel", tile_wheel); + spl_zoom_out.removeEventListener("click", tile_zoom_out); + spl_zoom_in.removeEventListener("click", tile_zoom_in); + + spl_pane.classList.remove("hide"); + spl_pane.style.setProperty("background-image", "none"); + spotlight_gallery.zoom(0.0); } -function addTile(spl_img){ - spl_pane.addEventListener("wheel", tile_wheel); - spl_zoom_out.addEventListener("click", tile_zoom_out); - spl_zoom_in.addEventListener("click", tile_zoom_in); - - const current_tile_state_size = gallery[slide].tile_size; - spl_pane.classList.add("hide"); - spl_pane.style.setProperty('background-position', "center"); - spl_pane.style.setProperty('background-size', current_tile_state_size+"%"); - if(spl_img){ - spl_pane.style.setProperty('background-image', `url(${spl_img.src})`); - } +function addTile(spl_img) { + spl_pane.addEventListener("wheel", tile_wheel); + spl_zoom_out.addEventListener("click", tile_zoom_out); + spl_zoom_in.addEventListener("click", tile_zoom_in); + + const current_tile_state_size = gallery[slide].tile_size; + spl_pane.classList.add("hide"); + spl_pane.style.setProperty("background-position", "center"); + spl_pane.style.setProperty("background-size", current_tile_state_size + "%"); + if (spl_img) { + spl_pane.style.setProperty("background-image", `url(${spl_img.src})`); + } } function tile_handler(event) { - - const current_tile_state = !gallery[slide].tile; - gallery[slide].tile = current_tile_state; - - this.classList.toggle("on"); + const current_tile_state = !gallery[slide].tile; + gallery[slide].tile = current_tile_state; - if(current_tile_state){ - const spl_img = gradioApp().querySelector("#spotlight-gal .spl-pane img"); - addTile(spl_img); - } else { - removeTile(); - } -} -function like_handler(event){ - - const current_like_state = !gallery[slide].like; - gallery[slide].like = current_like_state; - this.classList.toggle("on"); - - if(current_like_state){ - // add to favorites ... - //img_file_name.value = gallery[slide].src; - //console.log(gallery[slide].src); - } - else{ - // remove from favorites ... - } -} + this.classList.toggle("on"); + if (current_tile_state) { + const spl_img = gradioApp().querySelector("#spotlight-gal .spl-pane img"); + addTile(spl_img); + } else { + removeTile(); + } +} +function like_handler(event) { + const current_like_state = !gallery[slide].like; + gallery[slide].like = current_like_state; + this.classList.toggle("on"); + + if (current_like_state) { + // add to favorites ... + //img_file_name.value = gallery[slide].src; + //console.log(gallery[slide].src); + } else { + // remove from favorites ... + } +} function createGallerySpotlight() { + //console.log("clicked"); + slide = 0; + gallery = []; - //console.log("clicked"); - slide = 0; - gallery = []; + gradioApp() + .querySelectorAll("#" + selectedTabItemId + " .thumbnails img") + .forEach(function (elem, i) { + elem.setAttribute("gal-id", i); + //if(fullImg_src == elem.src) slide = parseInt(i+1); + if (elem.parentElement.className.indexOf("selected") != -1) + slide = parseInt(i + 1); + //console.log(slide); + gallery[i] = { + src: elem.src, + title: "Seed:" + elem.src, + //description: "This is a description.", + like: false, + tile: false, + tile_size: 50, + }; + }); + const options = { + class: "sd-gallery", + index: slide, + //control: ["like","page","theme","fullscreen","autofit","zoom-in","zoom-out","close","download","play","prev","next"], + control: control, + //animation: animation, + onshow: function (index) {}, + onchange: function (index, options) { + slide = index - 1; + tile.classList.toggle("on", gallery[slide].tile); + //if(img_browser){ + like.classList.toggle("on", gallery[slide].like); - gradioApp().querySelectorAll("#"+selectedTabItemId+' .thumbnails img').forEach(function (elem, i){ - elem.setAttribute("gal-id", i); - //if(fullImg_src == elem.src) slide = parseInt(i+1); - if(elem.parentElement.className.indexOf("selected") != -1) slide = parseInt(i+1); - //console.log(slide); - gallery[i] = { - src: elem.src, - title: "Seed:" + elem.src, - //description: "This is a description.", - like: false, - tile:false, - tile_size: 50, - } - }) - - const options = { - - class: "sd-gallery", - index: slide, - //control: ["like","page","theme","fullscreen","autofit","zoom-in","zoom-out","close","download","play","prev","next"], - control: control, - //animation: animation, - onshow: function(index){ - - }, - onchange: function(index, options){ - slide = index - 1; - tile.classList.toggle("on", gallery[slide].tile); - //if(img_browser){ - like.classList.toggle("on", gallery[slide].like); - - //} - - spl_pane = gradioApp().querySelector("#spotlight-gal .spl-pane:nth-child("+index+")"); - spl_zoom_out = gradioApp().querySelector("#spotlight-gal .spl-zoom-out"); - spl_zoom_in = gradioApp().querySelector("#spotlight-gal .spl-zoom-in"); - - const current_tile_state = gallery[slide].tile; - if(current_tile_state){ - addTile(); - }else{ - removeTile(); - } + //} - }, - onclose: function(index){ - gradioApp().querySelector("#"+selectedTabItemId+' .thumbnails .thumbnail-item:nth-child('+(slide+1)+')').click(); - } - }; + spl_pane = gradioApp().querySelector( + "#spotlight-gal .spl-pane:nth-child(" + index + ")" + ); + spl_zoom_out = gradioApp().querySelector("#spotlight-gal .spl-zoom-out"); + spl_zoom_in = gradioApp().querySelector("#spotlight-gal .spl-zoom-in"); - //assign(options, modifier); - + const current_tile_state = gallery[slide].tile; + if (current_tile_state) { + addTile(); + } else { + removeTile(); + } + }, + onclose: function (index) { + gradioApp() + .querySelector( + "#" + + selectedTabItemId + + " .thumbnails .thumbnail-item:nth-child(" + + (slide + 1) + + ")" + ) + .click(); + }, + }; - spotlight_gallery.show(gallery, options); - spotlight_gallery.panzoom(true); - + //assign(options, modifier); + + spotlight_gallery.show(gallery, options); + spotlight_gallery.panzoom(true); } -function fullImg_click_handler(e){ - e.stopPropagation(); - e.preventDefault(); - createGallerySpotlight(); +function fullImg_click_handler(e) { + e.stopPropagation(); + e.preventDefault(); + createGallerySpotlight(); } - let intervalUiUpdateIViewer; -function onUiHeaderTabUpdate(){ - if(intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer); - intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500); +function onUiHeaderTabUpdate() { + if (intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer); + intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500); } - let fullImg_preview; -function onUiUpdateIViewer(){ - clearInterval(intervalUiUpdateIViewer); - //update_performant_inputs(selectedTabItemId); - - //fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' [id$="2img_results"] .modify-upload + img.w-full.object-contain'); - fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' .preview > img'); - if(opts.js_modal_lightbox && fullImg_preview ) { +function onUiUpdateIViewer() { + clearInterval(intervalUiUpdateIViewer); + //update_performant_inputs(selectedTabItemId); - fullImg_src = fullImg_preview.src; - fullImg_preview.removeEventListener('click', fullImg_click_handler ); - fullImg_preview.addEventListener('click', fullImg_click_handler, true );//bubbling phase - - /* + //fullImg_preview = gradioApp().querySelector('#'+selectedTabItemId+' [id$="2img_results"] .modify-upload + img.w-full.object-contain'); + fullImg_preview = gradioApp().querySelector( + "#" + selectedTabItemId + " .preview > img" + ); + if (opts.js_modal_lightbox && fullImg_preview) { + fullImg_src = fullImg_preview.src; + fullImg_preview.removeEventListener("click", fullImg_click_handler); + fullImg_preview.addEventListener("click", fullImg_click_handler, true); //bubbling phase + + /* // this is an idea to integrate image browser extension seamlesly, // without the need to change to the image browser tab extension users will be able to review images after generation // and add them to favorites or delete the ones that don't like on the spot @@ -469,21 +481,22 @@ function onUiUpdateIViewer(){ } } */ - } + } } -onUiUpdate(function() { - if(intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer); - intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500); -}) +onUiUpdate(function () { + if (intervalUiUpdateIViewer != null) clearInterval(intervalUiUpdateIViewer); + intervalUiUpdateIViewer = setInterval(onUiUpdateIViewer, 500); +}); -onUiLoaded(function(){ - spotlight_gallery = new Spotlight(); - spotlight_gallery.init(gradioApp().querySelector('.gradio-container'), "-gal"); - tile = spotlight_gallery.addControl("tile", tile_handler); - like = spotlight_gallery.addControl("like", like_handler); -}) +onUiLoaded(function () { + spotlight_gallery = new Spotlight(); + spotlight_gallery.init( + gradioApp().querySelector(".gradio-container"), + "-gal" + ); + tile = spotlight_gallery.addControl("tile", tile_handler); + like = spotlight_gallery.addControl("like", like_handler); +}); -document.addEventListener("DOMContentLoaded", function() { - -}); \ No newline at end of file +document.addEventListener("DOMContentLoaded", function () {}); diff --git a/javascript/imageviewerGamepad.js b/javascript/imageviewerGamepad.js index 29bd7140..aecb0ac8 100644 --- a/javascript/imageviewerGamepad.js +++ b/javascript/imageviewerGamepad.js @@ -1,36 +1,34 @@ - let delay = 350//ms - window.addEventListener('gamepadconnected', (e) => { - console.log("Gamepad connected!") - const gamepad = e.gamepad; - setInterval(() => { - const xValue = gamepad.axes[0].toFixed(2); - if (xValue < -0.3) { - modalPrevImage(e); - } else if (xValue > 0.3) { - modalNextImage(e); - } +let delay = 350; //ms +window.addEventListener("gamepadconnected", (e) => { + console.log("Gamepad connected!"); + const gamepad = e.gamepad; + setInterval(() => { + const xValue = gamepad.axes[0].toFixed(2); + if (xValue < -0.3) { + modalPrevImage(e); + } else if (xValue > 0.3) { + modalNextImage(e); + } + }, delay); +}); - }, delay); - }); - - - /* +/* Primarily for vr controller type pointer devices. I use the wheel event because there's currently no way to do it properly with web xr. */ - let isScrolling = false; - window.addEventListener('wheel', (e) => { - if (isScrolling) return; - isScrolling = true; +let isScrolling = false; +window.addEventListener("wheel", (e) => { + if (isScrolling) return; + isScrolling = true; - if (e.deltaX <= -0.6) { - modalPrevImage(e); - } else if (e.deltaX >= 0.6) { - modalNextImage(e); - } + if (e.deltaX <= -0.6) { + modalPrevImage(e); + } else if (e.deltaX >= 0.6) { + modalNextImage(e); + } - setTimeout(() => { - isScrolling = false; - }, delay); - }); \ No newline at end of file + setTimeout(() => { + isScrolling = false; + }, delay); +}); diff --git a/javascript/localization.js b/javascript/localization.js index e1ffa271..ee8e7e46 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', +ignore_ids_for_localization = { + setting_sd_hypernetwork: "OPTION", + setting_sd_model_checkpoint: "OPTION", + setting_realesrgan_enabled_models: "OPTION", + modelmerger_primary_model_name: "OPTION", + modelmerger_secondary_model_name: "OPTION", + modelmerger_tertiary_model_name: "OPTION", + train_embedding: "OPTION", + train_hypernetwork: "OPTION", + txt2img_styles: "OPTION", + img2img_styles: "OPTION", + setting_random_artist_categories: "SPAN", + setting_face_restoration_model: "SPAN", + setting_realesrgan_enabled_models: "SPAN", + extras_upscaler_1: "SPAN", + extras_upscaler_2: "SPAN", +}; + +re_num = /^[\.\d]+$/; +re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u; + +original_lines = {}; +translated_lines = {}; + +function textNodesUnder(el) { + var n, + a = [], + walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false); + while ((n = walk.nextNode())) a.push(n); + return a; } -re_num = /^[\.\d]+$/ -re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u +function canBeTranslated(node, text) { + if (!text) return false; + if (!node.parentElement) return false; -original_lines = {} -translated_lines = {} + var parentType = node.parentElement.nodeName; + if ( + parentType == "SCRIPT" || + parentType == "STYLE" || + parentType == "TEXTAREA" + ) + return false; -function textNodesUnder(el){ - var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false); - while(n=walk.nextNode()) a.push(n); - return a; + if (parentType == "OPTION" || parentType == "SPAN") { + var pnode = node; + for (var level = 0; level < 4; level++) { + pnode = pnode.parentElement; + if (!pnode) break; + + if (ignore_ids_for_localization[pnode.id] == parentType) return false; + } + } + + if (re_num.test(text)) return false; + if (re_emoji.test(text)) return false; + return true; } -function canBeTranslated(node, text){ - if(! text) return false; - if(! node.parentElement) return false; +function getTranslation(text) { + if (!text) return undefined; - var parentType = node.parentElement.nodeName - if(parentType=='SCRIPT' || parentType=='STYLE' || parentType=='TEXTAREA') return false; + if (translated_lines[text] === undefined) { + original_lines[text] = 1; + } - if (parentType=='OPTION' || parentType=='SPAN'){ - var pnode = node - for(var level=0; level<4; level++){ - pnode = pnode.parentElement - if(! pnode) break; + tl = localization[text]; + if (tl !== undefined) { + translated_lines[tl] = 1; + } - if(ignore_ids_for_localization[pnode.id] == parentType) return false; - } - } - - if(re_num.test(text)) return false; - if(re_emoji.test(text)) return false; - return true + return tl; } -function getTranslation(text){ - if(! text) return undefined +function processTextNode(node) { + var text = node.textContent.trim(); - if(translated_lines[text] === undefined){ - original_lines[text] = 1 - } + if (!canBeTranslated(node, text)) return; - tl = localization[text] - if(tl !== undefined){ - translated_lines[tl] = 1 - } - - return tl + tl = getTranslation(text); + if (tl !== undefined) { + node.textContent = tl; + } } -function processTextNode(node){ - var text = node.textContent.trim() +function processNode(node) { + if (node.nodeType == 3) { + processTextNode(node); + return; + } - if(! canBeTranslated(node, text)) return - - tl = getTranslation(text) - if(tl !== undefined){ - node.textContent = tl + if (node.title) { + tl = getTranslation(node.title); + if (tl !== undefined) { + node.title = tl; } + } + + if (node.placeholder) { + tl = getTranslation(node.placeholder); + if (tl !== undefined) { + node.placeholder = tl; + } + } + + textNodesUnder(node).forEach(function (node) { + processTextNode(node); + }); } -function processNode(node){ - if(node.nodeType == 3){ - processTextNode(node) - return - } +function dumpTranslations() { + var dumped = {}; + if (localization.rtl) { + dumped.rtl = true; + } - if(node.title){ - tl = getTranslation(node.title) - if(tl !== undefined){ - node.title = tl - } - } + Object.keys(original_lines).forEach(function (text) { + if (dumped[text] !== undefined) return; - if(node.placeholder){ - tl = getTranslation(node.placeholder) - if(tl !== undefined){ - node.placeholder = tl - } - } + dumped[text] = localization[text] || text; + }); - textNodesUnder(node).forEach(function(node){ - processTextNode(node) - }) + return dumped; } -function dumpTranslations(){ - var dumped = {} - if (localization.rtl) { - dumped.rtl = true - } - - Object.keys(original_lines).forEach(function(text){ - if(dumped[text] !== undefined) return - - dumped[text] = localization[text] || text - }) - - return dumped -} - -onUiUpdate(function(m){ - m.forEach(function(mutation){ - mutation.addedNodes.forEach(function(node){ - processNode(node) - }) +onUiUpdate(function (m) { + m.forEach(function (mutation) { + mutation.addedNodes.forEach(function (node) { + processNode(node); }); -}) + }); +}); +document.addEventListener("DOMContentLoaded", function () { + processNode(gradioApp()); -document.addEventListener("DOMContentLoaded", function() { - processNode(gradioApp()) + if (localization.rtl) { + // if the language is from right to left, + new MutationObserver((mutations, observer) => { + // wait for the style to load + mutations.forEach((mutation) => { + mutation.addedNodes.forEach((node) => { + if (node.tagName === "STYLE") { + observer.disconnect(); - if (localization.rtl) { // if the language is from right to left, - (new MutationObserver((mutations, observer) => { // wait for the style to load - mutations.forEach(mutation => { - mutation.addedNodes.forEach(node => { - if (node.tagName === 'STYLE') { - observer.disconnect(); - - for (const x of node.sheet.rules) { // find all rtl media rules - if (Array.from(x.media || []).includes('rtl')) { - x.media.appendMedium('all'); // enable them - } - } - } - }) - }); - })).observe(gradioApp(), { childList: true }); - } -}) + for (const x of node.sheet.rules) { + // find all rtl media rules + if (Array.from(x.media || []).includes("rtl")) { + x.media.appendMedium("all"); // enable them + } + } + } + }); + }); + }).observe(gradioApp(), { childList: true }); + } +}); function download_localization() { - var text = JSON.stringify(dumpTranslations(), null, 4) + var text = JSON.stringify(dumpTranslations(), null, 4); - var element = document.createElement('a'); - element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); - element.setAttribute('download', "localization.json"); - element.style.display = 'none'; - document.body.appendChild(element); + var element = document.createElement("a"); + element.setAttribute( + "href", + "data:text/plain;charset=utf-8," + encodeURIComponent(text) + ); + element.setAttribute("download", "localization.json"); + element.style.display = "none"; + document.body.appendChild(element); - element.click(); + element.click(); - document.body.removeChild(element); + document.body.removeChild(element); } diff --git a/javascript/notification.js b/javascript/notification.js index 83fce1f8..7993fcbc 100644 --- a/javascript/notification.js +++ b/javascript/notification.js @@ -4,46 +4,51 @@ let lastHeadImg = null; let notificationButton = null; -onUiUpdate(function(){ - if(notificationButton == null){ - notificationButton = gradioApp().getElementById('request_notifications') +onUiUpdate(function () { + if (notificationButton == null) { + notificationButton = gradioApp().getElementById("request_notifications"); - if(notificationButton != null){ - notificationButton.addEventListener('click', () => { - void Notification.requestPermission(); - },true); - } + if (notificationButton != null) { + notificationButton.addEventListener( + "click", + () => { + void Notification.requestPermission(); + }, + true + ); } + } - const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"][style*="display: block"] div[id$="_results"] .thumbnail-item > img'); + const galleryPreviews = gradioApp().querySelectorAll( + 'div[id^="tab_"][style*="display: block"] div[id$="_results"] .thumbnail-item > img' + ); - if (galleryPreviews == null) return; + if (galleryPreviews == null) return; - const headImg = galleryPreviews[0]?.src; + const headImg = galleryPreviews[0]?.src; - if (headImg == null || headImg == lastHeadImg) return; + if (headImg == null || headImg == lastHeadImg) return; - lastHeadImg = headImg; + lastHeadImg = headImg; - // play notification sound if available - gradioApp().querySelector('#audio_notification audio')?.play(); + // play notification sound if available + gradioApp().querySelector("#audio_notification audio")?.play(); - if (document.hasFocus()) return; + if (document.hasFocus()) return; - // Multiple copies of the images are in the DOM when one is selected. Dedup with a Set to get the real number generated. - const imgs = new Set(Array.from(galleryPreviews).map(img => img.src)); + // Multiple copies of the images are in the DOM when one is selected. Dedup with a Set to get the real number generated. + const imgs = new Set(Array.from(galleryPreviews).map((img) => img.src)); - const notification = new Notification( - 'Stable Diffusion', - { - body: `Generated ${imgs.size > 1 ? imgs.size - opts.return_grid : 1} image${imgs.size > 1 ? 's' : ''}`, - icon: headImg, - image: headImg, - } - ); + const notification = new Notification("Stable Diffusion", { + body: `Generated ${imgs.size > 1 ? imgs.size - opts.return_grid : 1} image${ + imgs.size > 1 ? "s" : "" + }`, + icon: headImg, + image: headImg, + }); - notification.onclick = function(_){ - parent.focus(); - this.close(); - }; + notification.onclick = function (_) { + parent.focus(); + this.close(); + }; }); diff --git a/javascript/progressbar.js b/javascript/progressbar.js index ba98222b..a8a45a94 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -1,200 +1,221 @@ // code related to showing and updating progressbar shown as the image is being made -function rememberGallerySelection(){ +function rememberGallerySelection() {} -} +function getGallerySelectedIndex() {} -function getGallerySelectedIndex(){ - -} - -function request(url, data, handler, errorHandler){ - var xhr = new XMLHttpRequest(); - xhr.open("POST", url, true); - xhr.setRequestHeader("Content-Type", "application/json"); - xhr.onreadystatechange = function () { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - try { - var js = JSON.parse(xhr.responseText); - handler(js) - } catch (error) { - console.error(error); - errorHandler() - } - } else{ - errorHandler() - } +function request(url, data, handler, errorHandler) { + var xhr = new XMLHttpRequest(); + xhr.open("POST", url, true); + xhr.setRequestHeader("Content-Type", "application/json"); + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + try { + var js = JSON.parse(xhr.responseText); + handler(js); + } catch (error) { + console.error(error); + errorHandler(); } - }; - var js = JSON.stringify(data); - xhr.send(js); -} - -function pad2(x){ - return x<10 ? '0'+x : x -} - -function formatTime(secs){ - if(secs > 3600){ - return pad2(Math.floor(secs/60/60)) + ":" + pad2(Math.floor(secs/60)%60) + ":" + pad2(Math.floor(secs)%60) - } else if(secs > 60){ - return pad2(Math.floor(secs/60)) + ":" + pad2(Math.floor(secs)%60) - } else{ - return Math.floor(secs) + "s" + } else { + errorHandler(); + } } + }; + var js = JSON.stringify(data); + xhr.send(js); } -function setTitle(progress){ - var title = 'Stable Diffusion' - - if(opts.show_progress_in_title && progress){ - title = '[' + progress.trim() + '] ' + title; - } - - if(document.title != title){ - document.title = title; - } +function pad2(x) { + return x < 10 ? "0" + x : x; } +function formatTime(secs) { + if (secs > 3600) { + return ( + pad2(Math.floor(secs / 60 / 60)) + + ":" + + pad2(Math.floor(secs / 60) % 60) + + ":" + + pad2(Math.floor(secs) % 60) + ); + } else if (secs > 60) { + return pad2(Math.floor(secs / 60)) + ":" + pad2(Math.floor(secs) % 60); + } else { + return Math.floor(secs) + "s"; + } +} -function randomId(){ - return "task(" + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7)+")" +function setTitle(progress) { + var title = "Stable Diffusion"; + + if (opts.show_progress_in_title && progress) { + title = "[" + progress.trim() + "] " + title; + } + + if (document.title != title) { + document.title = title; + } +} + +function randomId() { + return ( + "task(" + + Math.random().toString(36).slice(2, 7) + + Math.random().toString(36).slice(2, 7) + + Math.random().toString(36).slice(2, 7) + + ")" + ); } // starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and // preview inside gallery element. Cleans up all created stuff when the task is over and calls atEnd. // calls onProgress every time there is a progress update -function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgress, inactivityTimeout=40){ - var dateStart = new Date() - var wasEverActive = false - var parentProgressbar = progressbarContainer.parentNode - var parentGallery = gallery ? gallery.parentNode : null +function requestProgress( + id_task, + progressbarContainer, + gallery, + atEnd, + onProgress, + inactivityTimeout = 40 +) { + var dateStart = new Date(); + var wasEverActive = false; + var parentProgressbar = progressbarContainer.parentNode; + var parentGallery = gallery ? gallery.parentNode : null; - var divProgress = document.createElement('div') - divProgress.className='progressDiv' + var divProgress = document.createElement("div"); + divProgress.className = "progressDiv"; - divProgress.style.display = opts.show_progressbar ? "block" : "none" - var divInner = document.createElement('div') - divInner.className='progress' + divProgress.style.display = opts.show_progressbar ? "block" : "none"; + var divInner = document.createElement("div"); + divInner.className = "progress"; - divProgress.appendChild(divInner) - parentProgressbar.insertBefore(divProgress, progressbarContainer) + divProgress.appendChild(divInner); + parentProgressbar.insertBefore(divProgress, progressbarContainer); - if(parentGallery){ - var livePreview = gradioApp().querySelector('.livePreview'); - if(!livePreview){ - livePreview = document.createElement('div') - livePreview.classList.add("livePreview", "init") - parentGallery.insertBefore(livePreview, gallery) - } - livePreview.classList.remove("dropPreview"); + if (parentGallery) { + var livePreview = gradioApp().querySelector(".livePreview"); + if (!livePreview) { + livePreview = document.createElement("div"); + livePreview.classList.add("livePreview", "init"); + parentGallery.insertBefore(livePreview, gallery); + } + livePreview.classList.remove("dropPreview"); + } + + var removeProgressBar = function () { + setTitle(""); + if (divProgress) { + parentProgressbar.removeChild(divProgress); } - var removeProgressBar = function(){ - setTitle("") - if(divProgress){ - parentProgressbar.removeChild(divProgress) - } - - if(progressbarContainer.id == "txt2img_gallery_container"){ - showSubmitButtons('txt2img', true); - }else if(progressbarContainer.id == "img2img_gallery_container"){ - showSubmitButtons('img2img', true); - } - if(livePreview){ - if(parentGallery) parentGallery.removeChild(livePreview) - } - gradioApp().querySelectorAll('#tabs + div, #tabs + div > *:not(ul)').forEach(function (elem){ - elem.style.setProperty("display", "block", "important"); - }) - atEnd() + if (progressbarContainer.id == "txt2img_gallery_container") { + showSubmitButtons("txt2img", true); + } else if (progressbarContainer.id == "img2img_gallery_container") { + showSubmitButtons("img2img", true); } - - var fun = function(id_task, id_live_preview){ - request("./internal/progress", {"id_task": id_task, "id_live_preview": id_live_preview}, function(res){ - if(res.completed){ - removeProgressBar() - return - } - - var rect = progressbarContainer.getBoundingClientRect() - - if(rect.width){ - divProgress.style.width = rect.width + "px"; - } - - let progressText = "" - - divInner.style.width = ((res.progress || 0) * 100.0) + '%' - divInner.style.background = res.progress ? "" : "transparent" - - if(res.progress > 0){ - progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%' - } - - if(res.eta){ - progressText += " ETA: " + formatTime(res.eta) - } - - - setTitle(progressText) - - if(res.textinfo && res.textinfo.indexOf("\n") == -1){ - progressText = res.textinfo + " " + progressText - } - - divInner.textContent = progressText - - var elapsedFromStart = (new Date() - dateStart) / 1000 - - if(res.active) wasEverActive = true; - - if(! res.active && wasEverActive){ - removeProgressBar() - return - } - - if(elapsedFromStart > inactivityTimeout && !res.queued && !res.active){ - removeProgressBar() - return - } - - - if(res.live_preview && gallery){ - //var rect = gallery.getBoundingClientRect() - //if(rect.width){ - //livePreview.style.width = rect.width + "px" - //livePreview.style.height = rect.height + "px" - //} - - livePreview.classList.remove("init") - - var img = new Image(); - img.onload = function() { - img.width = img.naturalWidth; - img.height = img.naturalHeight; - livePreview.appendChild(img) - if(livePreview.childElementCount > 2){ - livePreview.removeChild(livePreview.firstElementChild) - } - } - img.src = res.live_preview; - - } - - - if(onProgress){ - onProgress(res) - } - - setTimeout(() => { - fun(id_task, res.id_live_preview); - }, opts.live_preview_refresh_period || 500) - }, function(){ - removeProgressBar() - }) + if (livePreview) { + if (parentGallery) parentGallery.removeChild(livePreview); } + gradioApp() + .querySelectorAll("#tabs + div, #tabs + div > *:not(ul)") + .forEach(function (elem) { + elem.style.setProperty("display", "block", "important"); + }); + atEnd(); + }; - fun(id_task, 0) + var fun = function (id_task, id_live_preview) { + request( + "./internal/progress", + { id_task: id_task, id_live_preview: id_live_preview }, + function (res) { + if (res.completed) { + removeProgressBar(); + return; + } + + var rect = progressbarContainer.getBoundingClientRect(); + + if (rect.width) { + divProgress.style.width = rect.width + "px"; + } + + let progressText = ""; + + divInner.style.width = (res.progress || 0) * 100.0 + "%"; + divInner.style.background = res.progress ? "" : "transparent"; + + if (res.progress > 0) { + progressText = ((res.progress || 0) * 100.0).toFixed(0) + "%"; + } + + if (res.eta) { + progressText += " ETA: " + formatTime(res.eta); + } + + setTitle(progressText); + + if (res.textinfo && res.textinfo.indexOf("\n") == -1) { + progressText = res.textinfo + " " + progressText; + } + + divInner.textContent = progressText; + + var elapsedFromStart = (new Date() - dateStart) / 1000; + + if (res.active) wasEverActive = true; + + if (!res.active && wasEverActive) { + removeProgressBar(); + return; + } + + if ( + elapsedFromStart > inactivityTimeout && + !res.queued && + !res.active + ) { + removeProgressBar(); + return; + } + + if (res.live_preview && gallery) { + //var rect = gallery.getBoundingClientRect() + //if(rect.width){ + //livePreview.style.width = rect.width + "px" + //livePreview.style.height = rect.height + "px" + //} + + livePreview.classList.remove("init"); + + var img = new Image(); + img.onload = function () { + img.width = img.naturalWidth; + img.height = img.naturalHeight; + livePreview.appendChild(img); + if (livePreview.childElementCount > 2) { + livePreview.removeChild(livePreview.firstElementChild); + } + }; + img.src = res.live_preview; + } + + if (onProgress) { + onProgress(res); + } + + setTimeout(() => { + fun(id_task, res.id_live_preview); + }, opts.live_preview_refresh_period || 500); + }, + function () { + removeProgressBar(); + } + ); + }; + + fun(id_task, 0); } diff --git a/javascript/textualInversion.js b/javascript/textualInversion.js index 0354b860..2107e80f 100644 --- a/javascript/textualInversion.js +++ b/javascript/textualInversion.js @@ -1,17 +1,20 @@ +function start_training_textual_inversion() { + gradioApp().querySelector("#ti_error").innerHTML = ""; + var id = randomId(); + requestProgress( + id, + gradioApp().getElementById("ti_output"), + gradioApp().getElementById("ti_gallery"), + function () {}, + function (progress) { + gradioApp().getElementById("ti_progress").innerHTML = progress.textinfo; + } + ); + var res = args_to_array(arguments); -function start_training_textual_inversion(){ - gradioApp().querySelector('#ti_error').innerHTML='' + res[0] = id; - var id = randomId() - requestProgress(id, gradioApp().getElementById('ti_output'), gradioApp().getElementById('ti_gallery'), function(){}, function(progress){ - gradioApp().getElementById('ti_progress').innerHTML = progress.textinfo - }) - - var res = args_to_array(arguments) - - res[0] = id - - return res + return res; } diff --git a/javascript/ui.js b/javascript/ui.js index 90553f07..5f51e7c3 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -1,6 +1,6 @@ // various functions for interaction with ui.py not large enough to warrant putting them in separate files -function set_theme(theme){ - /* +function set_theme(theme) { + /* gradioURL = window.location.href if (!gradioURL.includes('?__theme=')) { window.location.replace(gradioURL + '?__theme=' + theme); @@ -9,500 +9,600 @@ function set_theme(theme){ } 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; + 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 } }) - - return result -} - -function extract_image_from_gallery(gallery){ - if (gallery.length == 0){ - return [null]; + 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; } - if (gallery.length == 1){ - return [gallery[0]]; + }); + 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 index = selected_gallery_index() - - if (index < 0 || index >= gallery.length){ - // Use the first image in the gallery as the default - index = 0; - } - - return [gallery[index]]; + return result; } -function args_to_array(args){ - var res = [] - for(var i=0;i= gallery.length) { + // Use the first image in the gallery as the default + index = 0; + } + + return [gallery[index]]; } -function switch_to_txt2img(){ - gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click(); - - return args_to_array(arguments); +function args_to_array(args) { + var res = []; + for (var i = 0; i < args.length; i++) { + res.push(args[i]); + } + return res; } -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(){ - switch_to_img2img_tab(0); - return args_to_array(arguments); +function switch_to_txt2img() { + gradioApp().querySelector("#tabs").querySelectorAll("button")[0].click(); + + return args_to_array(arguments); } -function switch_to_sketch(){ - switch_to_img2img_tab(1); - return args_to_array(arguments); +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() { + switch_to_img2img_tab(0); + return args_to_array(arguments); } -function switch_to_inpaint(){ - switch_to_img2img_tab(2); - return args_to_array(arguments); +function switch_to_sketch() { + switch_to_img2img_tab(1); + return args_to_array(arguments); } -function switch_to_inpaint_sketch(){ - switch_to_img2img_tab(3); - return args_to_array(arguments); +function switch_to_inpaint() { + switch_to_img2img_tab(2); + 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_inpaint_sketch() { + switch_to_img2img_tab(3); + return args_to_array(arguments); } -function switch_to_extras(){ - gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click(); - - 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 get_tab_index(tabId){ - var res = 0 +function switch_to_extras() { + gradioApp().querySelector("#tabs").querySelectorAll("button")[2].click(); - gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i){ - if(button.className.indexOf('selected') != -1) - res = i - }) - - return res + return args_to_array(arguments); } -function create_tab_index_args(tabId, args){ - var res = [] - for(var i=0; i label > textarea"); + + if (counter.parentElement == prompt.parentElement) { + return; } - return [prompt, negative_prompt] -} + prompt.parentElement.insertBefore(counter, prompt); + counter.classList.add("token-counter"); + prompt.parentElement.style.position = "relative"; + promptTokecountUpdateFuncs[id] = function () { + update_token_counter(id_button); + }; + textarea.addEventListener("input", promptTokecountUpdateFuncs[id]); + } -promptTokecountUpdateFuncs = {} + 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" + ); -function recalculatePromptTokens(name){ - if(promptTokecountUpdateFuncs[name]){ - promptTokecountUpdateFuncs[name]() - } -} - -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') - return args_to_array(arguments); -} - -function recalculate_prompts_inpaint(){ - recalculatePromptTokens('img2img_prompt') - recalculatePromptTokens('img2img_neg_prompt') - return args_to_array(arguments); -} - -let selectedTabItemId = "tab_txt2img"; -let opts = {} - -onUiUpdate(function(){ - if(Object.keys(opts).length != 0) return; - - var 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) - executeCallbacks(optionsChangedCallbacks); - - 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) - } - - executeCallbacks(optionsChangedCallbacks); - }, - get: function() { - var valueProp = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value'); - return valueProp.get.call(textarea); - } - }); - - json_elem.parentElement.style.display="none" - - 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 - } - - prompt.parentElement.insertBefore(counter, prompt) - counter.classList.add("token-counter") - prompt.parentElement.style.position = "relative" - - 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') - - 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){ - elem.style.display = "block"; - }) - gradioApp().querySelectorAll('#settings > div > div > div').forEach(function(elem){ - elem.style.maxHeight = "none"; - }) - } - } -/* + 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) { + elem.style.display = "block"; + }); + gradioApp() + .querySelectorAll("#settings > div > div > div") + .forEach(function (elem) { + elem.style.maxHeight = "none"; + }); + }; + } + /* ^ matches the start * matches any position $ matches the end */ - /* anapnoe ui start */ - - /* auto grow textarea */ - function autoGrowPromptTextarea(){ - gradioApp().querySelectorAll('[id$="_prompt"] textarea').forEach(function (elem) { - elem.parentElement.click(); - }); - } - - gradioApp().querySelectorAll('[id$="_prompt"] textarea, [id^="setting_"] textarea, textarea').forEach(function (elem) { - elem.style.boxSizing = 'border-box'; - var offset = elem.offsetHeight - elem.clientHeight; - elem.addEventListener('input', function (e) { - e.target.style.minHeight = 'auto'; - e.target.style.minHeight = e.target.scrollHeight + offset + 2 + 'px'; - }); - - elem.parentElement.addEventListener('click', function (e) { - let textarea = e.currentTarget.querySelector('textarea'); - textarea.style.minHeight = 'auto'; - textarea.style.minHeight = textarea.scrollHeight + offset + 2 + 'px'; - }); - - }); - + /* anapnoe ui start */ - /* resizable split view */ - const resizeEvent = window.document.createEvent('UIEvents'); - resizeEvent.initUIEvent('resize', true, false, window, 0); + /* auto grow textarea */ + function autoGrowPromptTextarea() { + gradioApp() + .querySelectorAll('[id$="_prompt"] textarea') + .forEach(function (elem) { + elem.parentElement.click(); + }); + } - gradioApp().querySelectorAll('[id $="2img_splitter"]').forEach((elem) => { - - elem.addEventListener("mousedown", function(e) { + gradioApp() + .querySelectorAll( + '[id$="_prompt"] textarea, [id^="setting_"] textarea, textarea' + ) + .forEach(function (elem) { + elem.style.boxSizing = "border-box"; + var offset = elem.offsetHeight - elem.clientHeight; + elem.addEventListener("input", function (e) { + e.target.style.minHeight = "auto"; + e.target.style.minHeight = e.target.scrollHeight + offset + 2 + "px"; + }); - e.preventDefault(); - - let resizer = e.currentTarget; - let container = resizer.parentElement; - - let flexDir = window.getComputedStyle(container).getPropertyValue('flex-direction'); - - let leftSide = resizer.previousElementSibling; - let rightSide = resizer.nextElementSibling; + elem.parentElement.addEventListener("click", function (e) { + let textarea = e.currentTarget.querySelector("textarea"); + textarea.style.minHeight = "auto"; + textarea.style.minHeight = textarea.scrollHeight + offset + 2 + "px"; + }); + }); - let dir = flexDir == "row-reverse" ? -1.0 : 1.0; + /* resizable split view */ + const resizeEvent = window.document.createEvent("UIEvents"); + resizeEvent.initUIEvent("resize", true, false, window, 0); - let x = e.clientX; - let y = e.clientY; - let leftWidth = leftSide.getBoundingClientRect().width; - - function mouseMoveHandler(e) { - resizer.style.cursor = 'col-resize'; - container.style.cursor = 'col-resize'; + gradioApp() + .querySelectorAll('[id $="2img_splitter"]') + .forEach((elem) => { + elem.addEventListener("mousedown", function (e) { + e.preventDefault(); - const dx = (e.clientX - x)*dir; - const dy = (e.clientY - y)*dir; + let resizer = e.currentTarget; + let container = resizer.parentElement; - const newLeftWidth = ((leftWidth + dx) * 100) / container.getBoundingClientRect().width; - leftSide.style.flexBasis = `${newLeftWidth}%`; - leftSide.style.userSelect = 'none'; - leftSide.style.pointerEvents = 'none'; - rightSide.style.userSelect = 'none'; - rightSide.style.pointerEvents = 'none'; - //window.dispatchEvent(resizeEvent); - } + let flexDir = window + .getComputedStyle(container) + .getPropertyValue("flex-direction"); - function mouseUpHandler() { - resizer.style.removeProperty('cursor'); - container.style.removeProperty('cursor'); - leftSide.style.removeProperty('user-select'); - leftSide.style.removeProperty('pointer-events'); - rightSide.style.removeProperty('user-select'); - rightSide.style.removeProperty('pointer-events'); - container.removeEventListener('mousemove', mouseMoveHandler); - container.removeEventListener('mouseup', mouseUpHandler); - //window.dispatchEvent(resizeEvent); - } - - container.addEventListener('mousemove', mouseMoveHandler); - container.addEventListener('mouseup', mouseUpHandler); - - }) - - let flex_reverse = false; - elem.addEventListener("dblclick", function(e) { - flex_reverse = !flex_reverse; - e.preventDefault(); - - let resizer = e.currentTarget; - let container = resizer.parentElement; - //let flexDir = window.getComputedStyle(container).getPropertyValue('flex-direction'); + let leftSide = resizer.previousElementSibling; + let rightSide = resizer.nextElementSibling; - if(flex_reverse){ - container.style.flexDirection = 'row-reverse'; - }else{ - container.style.flexDirection = 'row'; - } - }) - - }) - - // set this globally - //let selectedTabItemId = "tab_txt2img"; - /* switch tab item from instance button, this is the only method that works i havent found a workaround yet */ - const Observe = (sel, opt, cb) => { - const Obs = new MutationObserver((m) => [...m].forEach(cb)); - gradioApp().querySelectorAll(sel).forEach(el => Obs.observe(el, opt)); - } - Observe("#tabs > div.tabitem", { - attributesList: ["style"], attributeOldValue: true, }, (m) => { - if(m.target.style.display === 'block'){ - let idx = parseInt(m.target.getAttribute("tab-item")); - selectedTabItemId = m.target.id; - tabItemChanged(idx); - } - }) - - function tabItemChanged(idx){ - gradioApp().querySelectorAll('#tabs > div > button.selected, #nav_menu_header_tabs > button.selected').forEach(function (tab){ - tab.classList.remove("selected"); - }) - - gradioApp().querySelectorAll('#tabs > div > button:nth-child('+(idx+1)+'), #nav_menu_header_tabs > button:nth-child('+(idx+1)+')').forEach(function (tab){ - tab.classList.add("selected"); - - }) - //gardio removes listeners and attributes from tab buttons we add them again here - gradioApp().querySelectorAll('#tabs > div > button').forEach(function (tab, index){ - tab.setAttribute("tab-id", index); - tab.removeEventListener('mouseup', navTabClicked); - tab.addEventListener('mouseup', navTabClicked); - if(tab.innerHTML.indexOf("Theme") != -1) tab.style.display = "none"; - - }) - -/* gradioApp().querySelectorAll('[id^="image_buttons_"] button').forEach(function (elem){ + let dir = flexDir == "row-reverse" ? -1.0 : 1.0; + + let x = e.clientX; + let y = e.clientY; + let leftWidth = leftSide.getBoundingClientRect().width; + + function mouseMoveHandler(e) { + resizer.style.cursor = "col-resize"; + container.style.cursor = "col-resize"; + + const dx = (e.clientX - x) * dir; + const dy = (e.clientY - y) * dir; + + const newLeftWidth = + ((leftWidth + dx) * 100) / container.getBoundingClientRect().width; + leftSide.style.flexBasis = `${newLeftWidth}%`; + leftSide.style.userSelect = "none"; + leftSide.style.pointerEvents = "none"; + rightSide.style.userSelect = "none"; + rightSide.style.pointerEvents = "none"; + //window.dispatchEvent(resizeEvent); + } + + function mouseUpHandler() { + resizer.style.removeProperty("cursor"); + container.style.removeProperty("cursor"); + leftSide.style.removeProperty("user-select"); + leftSide.style.removeProperty("pointer-events"); + rightSide.style.removeProperty("user-select"); + rightSide.style.removeProperty("pointer-events"); + container.removeEventListener("mousemove", mouseMoveHandler); + container.removeEventListener("mouseup", mouseUpHandler); + //window.dispatchEvent(resizeEvent); + } + + container.addEventListener("mousemove", mouseMoveHandler); + container.addEventListener("mouseup", mouseUpHandler); + }); + + let flex_reverse = false; + elem.addEventListener("dblclick", function (e) { + flex_reverse = !flex_reverse; + e.preventDefault(); + + let resizer = e.currentTarget; + let container = resizer.parentElement; + //let flexDir = window.getComputedStyle(container).getPropertyValue('flex-direction'); + + if (flex_reverse) { + container.style.flexDirection = "row-reverse"; + } else { + container.style.flexDirection = "row"; + } + }); + }); + + // set this globally + //let selectedTabItemId = "tab_txt2img"; + /* switch tab item from instance button, this is the only method that works i havent found a workaround yet */ + const Observe = (sel, opt, cb) => { + const Obs = new MutationObserver((m) => [...m].forEach(cb)); + gradioApp() + .querySelectorAll(sel) + .forEach((el) => Obs.observe(el, opt)); + }; + Observe( + "#tabs > div.tabitem", + { + attributesList: ["style"], + attributeOldValue: true, + }, + (m) => { + if (m.target.style.display === "block") { + let idx = parseInt(m.target.getAttribute("tab-item")); + selectedTabItemId = m.target.id; + tabItemChanged(idx); + } + } + ); + + function tabItemChanged(idx) { + gradioApp() + .querySelectorAll( + "#tabs > div > button.selected, #nav_menu_header_tabs > button.selected" + ) + .forEach(function (tab) { + tab.classList.remove("selected"); + }); + + gradioApp() + .querySelectorAll( + "#tabs > div > button:nth-child(" + + (idx + 1) + + "), #nav_menu_header_tabs > button:nth-child(" + + (idx + 1) + + ")" + ) + .forEach(function (tab) { + tab.classList.add("selected"); + }); + //gardio removes listeners and attributes from tab buttons we add them again here + gradioApp() + .querySelectorAll("#tabs > div > button") + .forEach(function (tab, index) { + tab.setAttribute("tab-id", index); + tab.removeEventListener("mouseup", navTabClicked); + tab.addEventListener("mouseup", navTabClicked); + if (tab.innerHTML.indexOf("Theme") != -1) tab.style.display = "none"; + }); + + /* gradioApp().querySelectorAll('[id^="image_buttons_"] button').forEach(function (elem){ if(elem.id == "txt2img_tab"){ elem.setAttribute("tab-id", 0); @@ -518,18 +618,17 @@ onUiUpdate(function(){ elem.addEventListener('click', navTabClicked); } }) */ - -/* const pdiv = gradioApp().querySelector("#"+selectedTabItemId+" .progressDiv"); + + /* const pdiv = gradioApp().querySelector("#"+selectedTabItemId+" .progressDiv"); if(!pdiv && selectedTabItemId == "tab_txt2img"){ showSubmitButtons('txt2img', true); }else if(!pdiv && selectedTabItemId == "tab_img2img"){ showSubmitButtons('img2img', true); } */ - - //window.onUiHeaderTabUpdate(); - // also here the same issue - /* + //window.onUiHeaderTabUpdate(); + // also here the same issue + /* gradioApp().querySelectorAll('[id^="image_buttons"] [id$="_tab"]').forEach(function (button, index){ if(button.id == ("img2img_tab" || "inpaint_tab") ){ button.setAttribute("tab-id", 1 ); @@ -543,493 +642,572 @@ onUiUpdate(function(){ }) */ - - netMenuVisibility(); - } - - - // menu - function disableScroll() { - scrollTop = window.pageYOffset || document.documentElement.scrollTop; - scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; - window.scrollTo(scrollLeft, scrollTop); - - window.onscroll = function() { - window.scrollTo(scrollLeft, scrollTop); - } - } - - function enableScroll() { - window.onscroll = function() {} - } - - function getPos(el) { - let rect=el.getBoundingClientRect(); - return {x:rect.left,y:rect.top}; - } - - function toggleMenu(isopen, icon, panel, func) { - if(isopen){ - panel.classList.add("open"); - icon.classList.add("fixed"); - gradioApp().addEventListener('click', func); - disableScroll(); - }else{ - panel.classList.remove("open"); - icon.classList.remove("fixed"); - gradioApp().removeEventListener('click', func); - enableScroll(); - } - } - - // close aside views - function closeAsideViews(menu){ - if(quick_menu != menu && quick_menu_open) quick_menu.click(); - if(net_menu != menu && net_menu_open) net_menu.click(); - if(theme_menu != menu && theme_menu_open) theme_menu.click(); - } - - // if we change to other view other than 2img and if aside mode is selected close extra networks aside and hide the net menu icon - let net_container = gradioApp().querySelector('#txt2img_extra_networks_row'); - let net_menu_open = false; - const net_menu = gradioApp().querySelector('#extra_networks_menu'); - function netMenuVisibility(){ - if(selectedTabItemId.indexOf("2img") != -1){ - net_menu.style.display = "block"; - let nid = selectedTabItemId.split("_")[1]; - net_container = gradioApp().querySelector('#'+nid+'_extra_networks_row'); - if(net_container.classList.contains("aside")){ - toggleMenu(net_menu_open, net_menu, net_container, null); - net_menu.style.display = "block"; - }else{ - net_menu.style.display = "none"; - } - }else{ - net_menu.style.display = "none"; - } - } - - - // mobile nav menu - const tabs_menu = gradioApp().querySelector('#tabs > div:first-child'); - const nav_menu = gradioApp().querySelector('#nav_menu'); - const header = gradioApp().querySelector('#header-top'); - let menu_open = false; - const z_menu = nav_menu.cloneNode(true); - z_menu.id = "clone_nav_menu"; - header.parentElement.append(z_menu); - function toggleNavMenu(e) { - e.stopPropagation(); - menu_open = !menu_open; - toggleMenu(menu_open, nav_menu, tabs_menu, toggleNavMenu); - } - z_menu.addEventListener('click', toggleNavMenu); - - // quicksettings nav menu - let quick_menu_open = false; - const quicksettings_overflow = gradioApp().querySelector('#quicksettings_overflow'); - const quick_menu = gradioApp().querySelector('#quick_menu'); - function toggleQuickMenu(e) { - closeAsideViews(quick_menu); - quick_menu_open = !quick_menu_open; - const withinBoundaries = e.composedPath().includes(quicksettings_overflow); - if(!quick_menu_open && withinBoundaries){ - quick_menu_open = true; - }else{ - e.preventDefault(); - e.stopPropagation(); - toggleMenu(quick_menu_open, quick_menu, quicksettings_overflow, toggleQuickMenu); - } - - } - quick_menu.addEventListener('click', toggleQuickMenu); - - // extra networks nav menu - function toggleNetMenu(e) { - closeAsideViews(net_menu); - net_menu_open = !net_menu_open; - e.preventDefault(); - e.stopPropagation(); - toggleMenu(net_menu_open, net_menu, net_container, null); - } - net_menu.addEventListener('click', toggleNetMenu); - gradioApp().querySelectorAll('button[id$="2img_extra_networks"]').forEach((elem) => { - elem.addEventListener('click', toggleNetMenu); - }) - - // theme nav menu - let theme_container = gradioApp().querySelector('#tab_ui_theme'); - let theme_menu_open = false; - const theme_menu = gradioApp().querySelector('#theme_menu'); - function toggleThemeMenu(e) { - closeAsideViews(theme_menu); - theme_menu_open = !theme_menu_open; - e.preventDefault(); - e.stopPropagation(); - toggleMenu(theme_menu_open, theme_menu, theme_container, null); - - } - theme_menu.addEventListener('click', toggleThemeMenu); - - const theme_tab = gradioApp().querySelector('#tab_ui_theme'); - function theme_aside(value){ - if(value){ - theme_tab.classList.add("aside"); - }else{ - theme_tab.classList.remove("aside"); - } - } - if(theme_tab) theme_aside(true); - - function disabled_extensions(value){ - //console.log(value); - if(value){ - theme_menu.classList.remove("hidden"); - }else{ - theme_menu.classList.add("hidden"); - } - } - const theme_ext = gradioApp().querySelector('#extensions input[name="enable_sd_theme_editor"]'); - disabled_extensions(theme_ext.checked); - - // - function attachAccordionListeners(elem) { - elem.querySelectorAll('.gradio-accordion > div.wrap').forEach((elem) => { - elem.addEventListener('click', toggleAccordion); - }) - } - function toggleAccordion(e) { - //e.preventDefault(); - //e.stopPropagation(); - //e.stopImmediatePropagation(); - let accordion_content = e.currentTarget.parentElement.querySelector(".gap.svelte-vt1mxs"); + netMenuVisibility(); + } - if(accordion_content){ - e.preventDefault(); - e.stopPropagation(); - let accordion_icon = e.currentTarget.parentElement.querySelector(".label-wrap > .icon"); - if(accordion_content.className.indexOf("hidden") != -1){ - accordion_content.classList.remove("hidden"); - accordion_icon.style.setProperty('transform', 'rotate(0deg)'); - e.currentTarget.classList.add("hide"); - - }else{ - accordion_content.classList.add("hidden"); - accordion_icon.style.setProperty('transform', 'rotate(90deg)'); - e.currentTarget.classList.remove("hide"); - } - }else{ - let accordion_btn = e.currentTarget.parentElement.querySelector(".label-wrap"); - e.currentTarget.classList.add("hide"); - accordion_btn.click(); - //maybe here we need to setInterval until the content is available - setTimeout(function(){ - accordion_content = accordion_btn.parentElement; - //console.log(accordion_content); - attachAccordionListeners(accordion_content); - },1000) - } - } - - attachAccordionListeners(gradioApp()); + // menu + function disableScroll() { + scrollTop = window.pageYOffset || document.documentElement.scrollTop; + scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; + window.scrollTo(scrollLeft, scrollTop); - - // additional ui styles - let styleobj = {}; - const r = gradioApp(); - const style = document.createElement('style'); - style.id="ui-styles"; - r.appendChild(style); - - function updateOpStyles() { - let ops_styles = ""; - for (const key in styleobj) { - ops_styles += styleobj[key]; - } - const ui_styles = gradioApp().getElementById('ui-styles'); - ui_styles.innerHTML = ops_styles; - //console.log(ui_styles); - } - - // generated image fit contain - scale - function imageGeneratedFitMethod(value) { - styleobj.ui_view_fit = "[id$='2img_gallery'] div>img {object-fit:" + value + "!important;}"; - } - gradioApp().querySelector("#setting_ui_output_image_fit").addEventListener('click', function (e) { - if (e.target && e.target.matches("input[type='radio']")) { - imageGeneratedFitMethod(e.target.value.toLowerCase()); - updateOpStyles(); - } - }) - imageGeneratedFitMethod(opts.ui_output_image_fit.toLowerCase()); - - // livePreview fit contain - scale - function imagePreviewFitMethod(value) { - styleobj.ui_fit = ".livePreview img {object-fit:" + value + "!important;}"; - } - gradioApp().querySelector("#setting_live_preview_image_fit").addEventListener('click', function (e) { - if (e.target && e.target.matches("input[type='radio']")) { - imagePreviewFitMethod(e.target.value.toLowerCase()); - updateOpStyles(); - } - }) - imagePreviewFitMethod(opts.live_preview_image_fit.toLowerCase()); - - // viewports order left - right - function viewportOrder(value) { - styleobj.ui_views_order = "[id$=_prompt_image] + div {flex-direction:" + value + ";}"; - } - gradioApp().querySelector("#setting_ui_views_order").addEventListener('click', function (e) { - if (e.target && e.target.matches("input[type='radio']")) { - viewportOrder(e.target.value.toLowerCase()); - updateOpStyles(); - } - }) - viewportOrder(opts.ui_views_order.toLowerCase()); - - // sd max resolution output - function sdMaxOutputResolution(value) { - gradioApp().querySelectorAll('[id$="2img_width"] input,[id$="2img_height"] input').forEach((elem) => { - elem.max = value; - }) - } - gradioApp().querySelector("#setting_sd_max_resolution").addEventListener('input', function (e) { - let intvalue = parseInt(e.target.value); - intvalue = Math.min(Math.max(intvalue, 512), 16384); - sdMaxOutputResolution(intvalue); - }) - sdMaxOutputResolution(opts.sd_max_resolution); - - function extra_networks_visibility(value){ - gradioApp().querySelectorAll('[id$="2img_extra_networks_row"]').forEach((elem) => { - if(value){ - elem.classList.remove("!hidden"); - }else{ - elem.classList.add("!hidden"); - } - }) - } - gradioApp().querySelector("#setting_extra_networks_default_visibility input").addEventListener('click', function (e) { - extra_networks_visibility(e.target.checked); - }) - extra_networks_visibility(opts.extra_networks_default_visibility); - - function extra_networks_card_size(value) { - styleobj.extra_networks_card_size = ":root{--ae-extra-networks-card-size:" + value + ";}"; - } - gradioApp().querySelectorAll("#setting_extra_networks_cards_size input").forEach(function (elem){ - elem.addEventListener('input', function (e) { - extra_networks_card_size(e.target.value); - updateOpStyles(); - }) - }) - extra_networks_card_size(opts.extra_networks_cards_size); - - function extra_networks_cards_visible_rows(value) { - styleobj.extra_networks_cards_visible_rows = ":root{--ae-extra-networks-visible-rows:" + value + ";}"; - } - gradioApp().querySelectorAll("#setting_extra_networks_cards_visible_rows input").forEach(function (elem){ - elem.addEventListener('input', function (e) { - extra_networks_cards_visible_rows(e.target.value); - updateOpStyles(); - }) - }) - extra_networks_cards_visible_rows(opts.extra_networks_cards_visible_rows); - - function extra_networks_aside(value){ - gradioApp().querySelectorAll('[id$="2img_extra_networks_row"]').forEach((elem) => { - if(value){ - elem.classList.add("aside"); - }else{ - elem.classList.remove("aside"); - } - netMenuVisibility(); - }) - } - gradioApp().querySelector("#setting_extra_networks_aside input").addEventListener('click', function (e) { - extra_networks_aside(e.target.checked); - }) - extra_networks_aside(opts.extra_networks_aside); - - + window.onscroll = function () { + window.scrollTo(scrollLeft, scrollTop); + }; + } - // hidden - header ui tabs - let radio_hidden_html=""; - let radio_header_html=""; - let hiddentabs={}; - let headertabs={}; - const setting_ui_hidden_tabs = gradioApp().querySelector('#setting_ui_hidden_tabs textarea'); - const setting_ui_header_tabs = gradioApp().querySelector('#setting_ui_header_tabs textarea'); - const parent_header_tabs = gradioApp().querySelector('#nav_menu_header_tabs'); - setting_ui_hidden_tabs.style.display = "none"; - setting_ui_header_tabs.style.display = "none"; - - const maintabs = gradioApp().querySelectorAll('#tabs > div:first-child > button'); - const tabitems = gradioApp().querySelectorAll('#tabs > div.tabitem'); - - function tabOpsSave(setting){ - updateInput(setting); - } - - function tabsHiddenChange() { - const keys = Object.keys(hiddentabs); - setting_ui_hidden_tabs.value = ""; - keys.forEach((key, index) => { - //console.log(`${key}: ${hiddentabs[key]} ${index}`); - if(hiddentabs[key] == true){ - styleobj[key] = "#tabs > div:first-child > button:nth-child("+(index+1)+"){display:none;}"; - setting_ui_hidden_tabs.value += key + ","; - }else{ - styleobj[key] = "#tabs > div:first-child > button:nth-child("+(index+1)+"){display:block;}"; - } - }) + function enableScroll() { + window.onscroll = function () {}; + } - tabOpsSave(setting_ui_hidden_tabs); - tabsHeaderChange(); - } - function tabsHeaderChange() { - const keys = Object.keys(headertabs); - setting_ui_header_tabs.value = ""; - keys.forEach((key, index) => { - //console.log(`${key}: ${hiddentabs[key]} ${index}`); - let nkey = key+"_hr"; - if(headertabs[key] == true && hiddentabs[key] == false){ - styleobj[nkey] = "#nav_menu_header_tabs > button:nth-child("+(index+1)+"){display:block;}"; - setting_ui_header_tabs.value += key + ","; - }else{ - styleobj[nkey] = "#nav_menu_header_tabs > button:nth-child("+(index+1)+"){display:none;}"; - } - }) - - tabOpsSave(setting_ui_header_tabs); - } - + function getPos(el) { + let rect = el.getBoundingClientRect(); + return { x: rect.left, y: rect.top }; + } - function navigate2TabItem(idx){ - gradioApp().querySelectorAll('#tabs > div.tabitem').forEach(function (tabitem, index){ - if(idx == index){ - tabitem.style.display = "block"; - }else{ - tabitem.style.display = "none"; - } - }) - } - - function navTabClicked(e){ - const idx = parseInt(e.currentTarget.getAttribute("tab-id")); - navigate2TabItem(idx); - } - + function toggleMenu(isopen, icon, panel, func) { + if (isopen) { + panel.classList.add("open"); + icon.classList.add("fixed"); + gradioApp().addEventListener("click", func); + disableScroll(); + } else { + panel.classList.remove("open"); + icon.classList.remove("fixed"); + gradioApp().removeEventListener("click", func); + enableScroll(); + } + } - maintabs.forEach(function (elem, index) { - let tabvalue = elem.innerText.replaceAll(" ", ""); - hiddentabs[tabvalue] = false; - headertabs[tabvalue] = false; - let checked_hidden = ""; - let checked_header = ""; - if(setting_ui_hidden_tabs.value.indexOf(tabvalue) != -1){ - hiddentabs[tabvalue] = true; - checked_hidden = "checked"; - } - if(setting_ui_header_tabs.value.indexOf(tabvalue) != -1){ - headertabs[tabvalue] = true; - checked_header = "checked"; - } - radio_hidden_html += ''; - - radio_header_html += ''; - + // close aside views + function closeAsideViews(menu) { + if (quick_menu != menu && quick_menu_open) quick_menu.click(); + if (net_menu != menu && net_menu_open) net_menu.click(); + if (theme_menu != menu && theme_menu_open) theme_menu.click(); + } - tabitems[index].setAttribute("tab-item", index); - elem.setAttribute("tab-id", index); - - let clonetab = elem.cloneNode(true); - clonetab.id = tabvalue+"_clone"; - parent_header_tabs.append(clonetab); - clonetab.addEventListener('click', navTabClicked); + // if we change to other view other than 2img and if aside mode is selected close extra networks aside and hide the net menu icon + let net_container = gradioApp().querySelector("#txt2img_extra_networks_row"); + let net_menu_open = false; + const net_menu = gradioApp().querySelector("#extra_networks_menu"); + function netMenuVisibility() { + if (selectedTabItemId.indexOf("2img") != -1) { + net_menu.style.display = "block"; + let nid = selectedTabItemId.split("_")[1]; + net_container = gradioApp().querySelector( + "#" + nid + "_extra_networks_row" + ); + if (net_container.classList.contains("aside")) { + net_menu.style.display = "block"; + toggleMenu(net_menu_open, net_menu, net_container, null); + } else { + net_menu.style.display = "none"; + } + } else { + net_menu.style.display = "none"; + } + } - }) - - let div = document.createElement("div"); - div.id = "hidden_radio_tabs_container"; - div.classList.add("flex", "flex-wrap", "gap-2", "wrap", "svelte-1qxcj04"); - div.innerHTML = radio_hidden_html; - setting_ui_hidden_tabs.parentElement.appendChild(div); - - div = document.createElement("div"); - div.id = "header_radio_tabs_container"; - div.classList.add("flex", "flex-wrap", "gap-2", "wrap", "svelte-1qxcj04"); - div.innerHTML = radio_header_html; - setting_ui_header_tabs.parentElement.appendChild(div); - - // hidden tabs - gradioApp().querySelector("#hidden_radio_tabs_container").addEventListener('click', function (e) { - if (e.target && e.target.matches("input[type='checkbox']")) { - let tabvalue = e.target.value.replaceAll(" ", ""); - hiddentabs[tabvalue] = e.target.checked - tabsHiddenChange(); - updateOpStyles(); - } - }) - // header tabs - gradioApp().querySelector("#header_radio_tabs_container").addEventListener('click', function (e) { - if (e.target && e.target.matches("input[type='checkbox']")) { - let tabvalue = e.target.value.replaceAll(" ", ""); - headertabs[tabvalue] = e.target.checked; - tabsHeaderChange(); - updateOpStyles(); - } - }) + // mobile nav menu + const tabs_menu = gradioApp().querySelector("#tabs > div:first-child"); + const nav_menu = gradioApp().querySelector("#nav_menu"); + const header = gradioApp().querySelector("#header-top"); + let menu_open = false; + const z_menu = nav_menu.cloneNode(true); + z_menu.id = "clone_nav_menu"; + header.parentElement.append(z_menu); + function toggleNavMenu(e) { + e.stopPropagation(); + menu_open = !menu_open; + toggleMenu(menu_open, nav_menu, tabs_menu, toggleNavMenu); + } + z_menu.addEventListener("click", toggleNavMenu); - tabsHiddenChange(); - - gradioApp().querySelectorAll('[id^="image_buttons_"] button, #png_2img_results button').forEach(function (elem){ - //console.log(opts.send_seed); - if(elem.id == "txt2img_tab"){ - elem.setAttribute("tab-id", 0); - elem.addEventListener('click', navTabClicked); - }else if(elem.id == "img2img_tab" || elem.id == "inpaint_tab"){ - elem.setAttribute("tab-id", 1); - elem.addEventListener('click', navTabClicked); - }if(elem.id == "extras_tab"){ - elem.setAttribute("tab-id", 2); - elem.addEventListener('click', navTabClicked); - } - }) - - gradioApp().querySelectorAll('[id$="2img_extra_tabs"] .search').forEach(function (elem){ - elem.addEventListener('keyup', function (e) { - if (e.defaultPrevented) { - return; // Do nothing if event already handled - } - switch (e.code) { - case "Escape": - if(e.target.value == ""){ - net_menu.click(); - }else{ - e.target.value = ""; - updateInput(e.target); - } - break; - } - }) - }) - + // quicksettings nav menu + let quick_menu_open = false; + const quicksettings_overflow = gradioApp().querySelector( + "#quicksettings_overflow" + ); + const quick_menu = gradioApp().querySelector("#quick_menu"); + function toggleQuickMenu(e) { + closeAsideViews(quick_menu); + quick_menu_open = !quick_menu_open; + const withinBoundaries = e.composedPath().includes(quicksettings_overflow); + if (!quick_menu_open && withinBoundaries) { + quick_menu_open = true; + } else { + e.preventDefault(); + e.stopPropagation(); + toggleMenu( + quick_menu_open, + quick_menu, + quicksettings_overflow, + toggleQuickMenu + ); + } + } + quick_menu.addEventListener("click", toggleQuickMenu); - // add - remove quicksettings - const settings_submit = gradioApp().querySelector('#settings_submit'); - const quick_parent = gradioApp().querySelector("#quicksettings_overflow_container"); - const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea'); - function saveQuickSettings(){ - updateInput(setting_quicksettings); - const cEvent = new Event("click");//submit - Object.defineProperty(cEvent, "target", {value: settings_submit}) - settings_submit.dispatchEvent(cEvent); - //console.log(setting_quicksettings.value); - } - - /* + // extra networks nav menu + function toggleNetMenu(e) { + closeAsideViews(net_menu); + net_menu_open = !net_menu_open; + e.preventDefault(); + e.stopPropagation(); + toggleMenu(net_menu_open, net_menu, net_container, null); + } + net_menu.addEventListener("click", toggleNetMenu); + gradioApp() + .querySelectorAll('button[id*="2img_extra_networks"]') + .forEach((elem) => { + elem.addEventListener("click", toggleNetMenu); + }); + + // theme nav menu + let theme_container = gradioApp().querySelector("#tab_ui_theme"); + let theme_menu_open = false; + const theme_menu = gradioApp().querySelector("#theme_menu"); + function toggleThemeMenu(e) { + closeAsideViews(theme_menu); + theme_menu_open = !theme_menu_open; + e.preventDefault(); + e.stopPropagation(); + toggleMenu(theme_menu_open, theme_menu, theme_container, null); + } + theme_menu.addEventListener("click", toggleThemeMenu); + + const theme_tab = gradioApp().querySelector("#tab_ui_theme"); + function theme_aside(value) { + if (value) { + theme_tab.classList.add("aside"); + } else { + theme_tab.classList.remove("aside"); + } + } + if (theme_tab) theme_aside(true); + + function disabled_extensions(value) { + //console.log(value); + if (value) { + theme_menu.classList.remove("hidden"); + } else { + theme_menu.classList.add("hidden"); + } + } + const theme_ext = gradioApp().querySelector( + '#extensions input[name="enable_sd_theme_editor"]' + ); + disabled_extensions(theme_ext.checked); + + // + function attachAccordionListeners(elem) { + elem.querySelectorAll(".gradio-accordion > div.wrap").forEach((elem) => { + elem.addEventListener("click", toggleAccordion); + }); + } + function toggleAccordion(e) { + //e.preventDefault(); + //e.stopPropagation(); + //e.stopImmediatePropagation(); + let accordion_content = + e.currentTarget.parentElement.querySelector(".gap.svelte-vt1mxs"); + + if (accordion_content) { + e.preventDefault(); + e.stopPropagation(); + let accordion_icon = e.currentTarget.parentElement.querySelector( + ".label-wrap > .icon" + ); + if (accordion_content.className.indexOf("hidden") != -1) { + accordion_content.classList.remove("hidden"); + accordion_icon.style.setProperty("transform", "rotate(0deg)"); + e.currentTarget.classList.add("hide"); + } else { + accordion_content.classList.add("hidden"); + accordion_icon.style.setProperty("transform", "rotate(90deg)"); + e.currentTarget.classList.remove("hide"); + } + } else { + let accordion_btn = + e.currentTarget.parentElement.querySelector(".label-wrap"); + e.currentTarget.classList.add("hide"); + accordion_btn.click(); + //maybe here we need to setInterval until the content is available + setTimeout(function () { + accordion_content = accordion_btn.parentElement; + //console.log(accordion_content); + attachAccordionListeners(accordion_content); + }, 1000); + } + } + + attachAccordionListeners(gradioApp()); + // additional ui styles + let styleobj = {}; + const r = gradioApp(); + const style = document.createElement("style"); + style.id = "ui-styles"; + r.appendChild(style); + + function updateOpStyles() { + let ops_styles = ""; + for (const key in styleobj) { + ops_styles += styleobj[key]; + } + const ui_styles = gradioApp().getElementById("ui-styles"); + ui_styles.innerHTML = ops_styles; + //console.log(ui_styles); + } + + // generated image fit contain - scale + function imageGeneratedFitMethod(value) { + styleobj.ui_view_fit = + "[id$='2img_gallery'] div>img {object-fit:" + value + "!important;}"; + } + gradioApp() + .querySelector("#setting_ui_output_image_fit") + .addEventListener("click", function (e) { + if (e.target && e.target.matches("input[type='radio']")) { + imageGeneratedFitMethod(e.target.value.toLowerCase()); + updateOpStyles(); + } + }); + imageGeneratedFitMethod(opts.ui_output_image_fit.toLowerCase()); + + // livePreview fit contain - scale + function imagePreviewFitMethod(value) { + styleobj.ui_fit = ".livePreview img {object-fit:" + value + "!important;}"; + } + gradioApp() + .querySelector("#setting_live_preview_image_fit") + .addEventListener("click", function (e) { + if (e.target && e.target.matches("input[type='radio']")) { + imagePreviewFitMethod(e.target.value.toLowerCase()); + updateOpStyles(); + } + }); + imagePreviewFitMethod(opts.live_preview_image_fit.toLowerCase()); + + // viewports order left - right + function viewportOrder(value) { + styleobj.ui_views_order = + "[id$=_prompt_image] + div {flex-direction:" + value + ";}"; + } + gradioApp() + .querySelector("#setting_ui_views_order") + .addEventListener("click", function (e) { + if (e.target && e.target.matches("input[type='radio']")) { + viewportOrder(e.target.value.toLowerCase()); + updateOpStyles(); + } + }); + viewportOrder(opts.ui_views_order.toLowerCase()); + + // sd max resolution output + function sdMaxOutputResolution(value) { + gradioApp() + .querySelectorAll('[id$="2img_width"] input,[id$="2img_height"] input') + .forEach((elem) => { + elem.max = value; + }); + } + gradioApp() + .querySelector("#setting_sd_max_resolution") + .addEventListener("input", function (e) { + let intvalue = parseInt(e.target.value); + intvalue = Math.min(Math.max(intvalue, 512), 16384); + sdMaxOutputResolution(intvalue); + }); + sdMaxOutputResolution(opts.sd_max_resolution); + + function extra_networks_visibility(value) { + gradioApp() + .querySelectorAll('[id$="2img_extra_networks_row"]') + .forEach((elem) => { + if (value) { + elem.classList.remove("!hidden"); + } else { + elem.classList.add("!hidden"); + } + }); + } + gradioApp() + .querySelector("#setting_extra_networks_default_visibility input") + .addEventListener("click", function (e) { + extra_networks_visibility(e.target.checked); + }); + extra_networks_visibility(opts.extra_networks_default_visibility); + + function extra_networks_card_size(value) { + styleobj.extra_networks_card_size = + ":root{--ae-extra-networks-card-size:" + value + ";}"; + } + gradioApp() + .querySelectorAll("#setting_extra_networks_cards_size input") + .forEach(function (elem) { + elem.addEventListener("input", function (e) { + extra_networks_card_size(e.target.value); + updateOpStyles(); + }); + }); + extra_networks_card_size(opts.extra_networks_cards_size); + + function extra_networks_cards_visible_rows(value) { + styleobj.extra_networks_cards_visible_rows = + ":root{--ae-extra-networks-visible-rows:" + value + ";}"; + } + gradioApp() + .querySelectorAll("#setting_extra_networks_cards_visible_rows input") + .forEach(function (elem) { + elem.addEventListener("input", function (e) { + extra_networks_cards_visible_rows(e.target.value); + updateOpStyles(); + }); + }); + extra_networks_cards_visible_rows(opts.extra_networks_cards_visible_rows); + + function extra_networks_aside(value) { + gradioApp() + .querySelectorAll('[id$="2img_extra_networks_row"]') + .forEach((elem) => { + if (value) { + elem.classList.add("aside"); + } else { + elem.classList.remove("aside"); + } + netMenuVisibility(); + }); + } + gradioApp() + .querySelector("#setting_extra_networks_aside input") + .addEventListener("click", function (e) { + extra_networks_aside(e.target.checked); + }); + extra_networks_aside(opts.extra_networks_aside); + + // hidden - header ui tabs + let radio_hidden_html = ""; + let radio_header_html = ""; + let hiddentabs = {}; + let headertabs = {}; + const setting_ui_hidden_tabs = gradioApp().querySelector( + "#setting_ui_hidden_tabs textarea" + ); + const setting_ui_header_tabs = gradioApp().querySelector( + "#setting_ui_header_tabs textarea" + ); + const parent_header_tabs = gradioApp().querySelector("#nav_menu_header_tabs"); + setting_ui_hidden_tabs.style.display = "none"; + setting_ui_header_tabs.style.display = "none"; + + const maintabs = gradioApp().querySelectorAll( + "#tabs > div:first-child > button" + ); + const tabitems = gradioApp().querySelectorAll("#tabs > div.tabitem"); + + function tabOpsSave(setting) { + updateInput(setting); + } + + function tabsHiddenChange() { + const keys = Object.keys(hiddentabs); + setting_ui_hidden_tabs.value = ""; + keys.forEach((key, index) => { + //console.log(`${key}: ${hiddentabs[key]} ${index}`); + if (hiddentabs[key] == true) { + styleobj[key] = + "#tabs > div:first-child > button:nth-child(" + + (index + 1) + + "){display:none;}"; + setting_ui_hidden_tabs.value += key + ","; + } else { + styleobj[key] = + "#tabs > div:first-child > button:nth-child(" + + (index + 1) + + "){display:block;}"; + } + }); + + tabOpsSave(setting_ui_hidden_tabs); + tabsHeaderChange(); + } + function tabsHeaderChange() { + const keys = Object.keys(headertabs); + setting_ui_header_tabs.value = ""; + keys.forEach((key, index) => { + //console.log(`${key}: ${hiddentabs[key]} ${index}`); + let nkey = key + "_hr"; + if (headertabs[key] == true && hiddentabs[key] == false) { + styleobj[nkey] = + "#nav_menu_header_tabs > button:nth-child(" + + (index + 1) + + "){display:block;}"; + setting_ui_header_tabs.value += key + ","; + } else { + styleobj[nkey] = + "#nav_menu_header_tabs > button:nth-child(" + + (index + 1) + + "){display:none;}"; + } + }); + + tabOpsSave(setting_ui_header_tabs); + } + + function navigate2TabItem(idx) { + gradioApp() + .querySelectorAll("#tabs > div.tabitem") + .forEach(function (tabitem, index) { + if (idx == index) { + tabitem.style.display = "block"; + } else { + tabitem.style.display = "none"; + } + }); + } + + function navTabClicked(e) { + const idx = parseInt(e.currentTarget.getAttribute("tab-id")); + navigate2TabItem(idx); + } + + maintabs.forEach(function (elem, index) { + let tabvalue = elem.innerText.replaceAll(" ", ""); + hiddentabs[tabvalue] = false; + headertabs[tabvalue] = false; + let checked_hidden = ""; + let checked_header = ""; + if (setting_ui_hidden_tabs.value.indexOf(tabvalue) != -1) { + hiddentabs[tabvalue] = true; + checked_hidden = "checked"; + } + if (setting_ui_header_tabs.value.indexOf(tabvalue) != -1) { + headertabs[tabvalue] = true; + checked_header = "checked"; + } + radio_hidden_html += + '"; + + radio_header_html += + '"; + + tabitems[index].setAttribute("tab-item", index); + elem.setAttribute("tab-id", index); + + let clonetab = elem.cloneNode(true); + clonetab.id = tabvalue + "_clone"; + parent_header_tabs.append(clonetab); + clonetab.addEventListener("click", navTabClicked); + }); + + let div = document.createElement("div"); + div.id = "hidden_radio_tabs_container"; + div.classList.add("flex", "flex-wrap", "gap-2", "wrap", "svelte-1qxcj04"); + div.innerHTML = radio_hidden_html; + setting_ui_hidden_tabs.parentElement.appendChild(div); + + div = document.createElement("div"); + div.id = "header_radio_tabs_container"; + div.classList.add("flex", "flex-wrap", "gap-2", "wrap", "svelte-1qxcj04"); + div.innerHTML = radio_header_html; + setting_ui_header_tabs.parentElement.appendChild(div); + + // hidden tabs + gradioApp() + .querySelector("#hidden_radio_tabs_container") + .addEventListener("click", function (e) { + if (e.target && e.target.matches("input[type='checkbox']")) { + let tabvalue = e.target.value.replaceAll(" ", ""); + hiddentabs[tabvalue] = e.target.checked; + tabsHiddenChange(); + updateOpStyles(); + } + }); + // header tabs + gradioApp() + .querySelector("#header_radio_tabs_container") + .addEventListener("click", function (e) { + if (e.target && e.target.matches("input[type='checkbox']")) { + let tabvalue = e.target.value.replaceAll(" ", ""); + headertabs[tabvalue] = e.target.checked; + tabsHeaderChange(); + updateOpStyles(); + } + }); + + tabsHiddenChange(); + + gradioApp() + .querySelectorAll('[id^="image_buttons_"] button, #png_2img_results button') + .forEach(function (elem) { + //console.log(opts.send_seed); + if (elem.id == "txt2img_tab") { + elem.setAttribute("tab-id", 0); + elem.addEventListener("click", navTabClicked); + } else if (elem.id == "img2img_tab" || elem.id == "inpaint_tab") { + elem.setAttribute("tab-id", 1); + elem.addEventListener("click", navTabClicked); + } + if (elem.id == "extras_tab") { + elem.setAttribute("tab-id", 2); + elem.addEventListener("click", navTabClicked); + } + }); + + gradioApp() + .querySelectorAll('[id$="2img_extra_tabs"] .search') + .forEach(function (elem) { + elem.addEventListener("keyup", function (e) { + if (e.defaultPrevented) { + return; // Do nothing if event already handled + } + switch (e.code) { + case "Escape": + if (e.target.value == "") { + net_menu.click(); + } else { + e.target.value = ""; + updateInput(e.target); + } + break; + } + }); + }); + + // add - remove quicksettings + const settings_submit = gradioApp().querySelector("#settings_submit"); + const quick_parent = gradioApp().querySelector( + "#quicksettings_overflow_container" + ); + const setting_quicksettings = gradioApp().querySelector( + "#setting_quicksettings textarea" + ); + function saveQuickSettings() { + updateInput(setting_quicksettings); + const cEvent = new Event("click"); //submit + Object.defineProperty(cEvent, "target", { value: settings_submit }); + settings_submit.dispatchEvent(cEvent); + //console.log(setting_quicksettings.value); + } + + /* function addModelCheckpoint(){ if(setting_quicksettings.value.indexOf("sd_model_checkpoint") === -1){ setting_quicksettings.value += ",sd_model_checkpoint"; @@ -1038,309 +1216,351 @@ onUiUpdate(function(){ } */ - function add2quickSettings(id, section, checked){ - let field_settings = setting_quicksettings.value.replace(" ", ""); - if(checked){ - field_settings += ","+id; - let setting_row = gradioApp().querySelector('#row_setting_'+id); - quick_parent.append(setting_row); - setting_row.classList.add("warning"); - }else{ - field_settings = field_settings.replaceAll(id, ","); - const setting_parent = gradioApp().querySelector("#"+section+"_settings_2img_settings"); - let quick_row = gradioApp().querySelector('#row_setting_'+id); - setting_parent.append(quick_row); - quick_row.classList.remove("warning"); - } - field_settings = field_settings.replace(/,{2,}/g, ','); - setting_quicksettings.value = field_settings; - //addModelCheckpoint(); - saveQuickSettings(); - //console.log(section + " - "+ id + " - " + checked); - } - gradioApp().querySelectorAll('[id*="add2quick_"]').forEach(function (elem){ - let trg = elem.id.split('_add2quick_setting_'); - let sid = trg[0]; - let tid = trg[1]; - let elem_input = gradioApp().querySelector('#'+elem.id+' input'); - if(elem_input){ - elem_input.addEventListener('click', function (e) { - add2quickSettings(tid, sid, e.target.checked); - }) - } - }) - //addModelCheckpoint(); + function add2quickSettings(id, section, checked) { + let field_settings = setting_quicksettings.value.replace(" ", ""); + if (checked) { + field_settings += "," + id; + let setting_row = gradioApp().querySelector("#row_setting_" + id); + quick_parent.append(setting_row); + setting_row.classList.add("warning"); + } else { + field_settings = field_settings.replaceAll(id, ","); + const setting_parent = gradioApp().querySelector( + "#" + section + "_settings_2img_settings" + ); + let quick_row = gradioApp().querySelector("#row_setting_" + id); + setting_parent.append(quick_row); + quick_row.classList.remove("warning"); + } + field_settings = field_settings.replace(/,{2,}/g, ","); + setting_quicksettings.value = field_settings; + //addModelCheckpoint(); + saveQuickSettings(); + //console.log(section + " - "+ id + " - " + checked); + } + gradioApp() + .querySelectorAll('[id*="add2quick_"]') + .forEach(function (elem) { + let trg = elem.id.split("_add2quick_setting_"); + let sid = trg[0]; + let tid = trg[1]; + let elem_input = gradioApp().querySelector("#" + elem.id + " input"); + if (elem_input) { + elem_input.addEventListener("click", function (e) { + add2quickSettings(tid, sid, e.target.checked); + }); + } + }); + //addModelCheckpoint(); + // input release component dispatcher + let cached_clone_range; + let cached_clone_num; + let active_clone_input = []; + let focus_input; - // input release component dispatcher - let cached_clone_range; - let cached_clone_num; - let active_clone_input = []; - let focus_input; + function ui_input_release_component(elem) { + //console.log("ok"); + if (active_clone_input.length > 0) return; - function ui_input_release_component(elem){ - //console.log("ok"); - if(active_clone_input.length > 0) return; - - //img2img_width - let parent = elem.parentElement; - let comp_parent = parent.parentElement.parentElement; - - if( comp_parent.id == "img2img_width" || - comp_parent.id == "img2img_height" || - comp_parent.id == "img2img_scale" || - comp_parent.id.indexOf("--ae-") != -1 || - comp_parent.id.indexOf("theme") != -1 || - comp_parent.className.indexOf("posex") != -1) return; - - let clone_num = elem.cloneNode(); - active_clone_input.push(clone_num); - - - let label = parent.querySelector("label"); - - clone_num.id = "num_clone"; - clone_num.value = elem.value; - parent.append(clone_num); - elem.classList.add("hidden"); - - clone_num.addEventListener('change', function (e) { - elem.value = clone_num.value; - updateInput(elem); - }) - - clone_num.addEventListener('focus', function (e) { - focus_input = clone_num; - }) - - cached_clone_num = clone_num; - cached_clone_range = false; - - if(label){ - let comp_range = comp_parent.querySelector("input[type='range']"); - let clone_range = comp_range.cloneNode(); - active_clone_input.push(clone_range); - - clone_range.id = comp_range.id+"_clone"; - clone_range.value = comp_range.value; - comp_range.parentElement.append(clone_range); - comp_range.classList.add("hidden"); - - clone_range.addEventListener('input', function (e) { - clone_num.value = e.target.value; - }) - clone_range.addEventListener('change', function (e) { - elem.value = clone_range.value; - updateInput(elem); - }) - clone_num.addEventListener('input', function (e) { - clone_range.value = e.target.value; - }) - - cached_clone_range = clone_range; - - } - } - function ui_input_focus_handler(e){ - if(e.target != focus_input){ - focus_input = false; - ui_input_release_handler(e); - } - } - - function ui_input_release_handler(e){ - const len = active_clone_input.length; - if(focus_input){return;} - if(len > 0){ - - if(e.target.id.indexOf("_clone") == -1){ - for(var i=len-1; i>=0; i--){ - let relem = active_clone_input[i]; - relem.previousElementSibling.classList.remove("hidden"); - relem.remove(); - active_clone_input.pop(); - } - } - } - - let elem_type = e.target.tagName; - if(elem_type == "INPUT"){ - let elem = e.target; - if(elem.type == "number"){ - ui_input_release_component(elem); - }else if(elem.type == "range"){ - elem = e.target.parentElement.querySelector("input[type='number']"); - if(elem){ - ui_input_release_component(elem); - } - } - } - } - let timeoutId; - - function ui_input_touchmove_handler(e){ - if(cached_clone_range && cached_clone_num){ - if(e.touches){ - const rect = cached_clone_range.getBoundingClientRect(); - const xoffset_min = (rect.left + window.scrollX); - //const xoffset_max = (rect.right + window.scrollX); - //const yoffset_min = (rect.top + window.scrollY); - //const yoffset_max = (rect.bottom + window.scrollY); - //if( e.touches[0].pageY > yoffset_min && e.touches[0].pageY < yoffset_max && e.touches[0].pageX > xoffset_min && e.touches[0].pageX < xoffset_max){ - e.preventDefault(); - const percent = parseInt(((e.touches[0].pageX - xoffset_min) / rect.width) * 10000) / 10000; - cached_clone_range.value = ( percent * (cached_clone_range.max - cached_clone_range.min)) + parseFloat(cached_clone_range.min); - cached_clone_num.value = cached_clone_range.value; - //} - } - } - } - function ui_input_touchend_handler(e){ - if(cached_clone_range && cached_clone_num){ - const elem = cached_clone_range.previousElementSibling; - elem.value = cached_clone_range.value; - updateInput(elem); - } - } + //img2img_width + let parent = elem.parentElement; + let comp_parent = parent.parentElement.parentElement; - function slider_contextmenu(e){ - e.preventDefault(); - } - function slider_touchend(e){ - if (timeoutId) clearTimeout(timeoutId); - } - function slider_touchmove(e){ - if (timeoutId) clearTimeout(timeoutId); - } - function slider_touchstart(e){ - const gcontainer = e.target; - //gcontainer.removeEventListener('contextmenu', slider_contextmenu); - gcontainer.removeEventListener('touchend', slider_touchend); - gcontainer.removeEventListener('touchmove', slider_touchmove); - gcontainer.removeEventListener('touchend', ui_input_touchend_handler); - gcontainer.removeEventListener('touchmove', ui_input_touchmove_handler); - - timeoutId = setTimeout(function() { - timeoutId = null; - focus_input = false; - e.stopPropagation(); - ui_input_release_handler(e); - ui_input_touchmove_handler(e); - gcontainer.addEventListener('touchmove', ui_input_touchmove_handler); - gcontainer.addEventListener('touchend', ui_input_touchend_handler); - }, 500); - - //gcontainer.addEventListener('contextmenu', slider_contextmenu); - gcontainer.addEventListener('touchend', slider_touchend); - gcontainer.addEventListener('touchmove', slider_touchmove); - } + if ( + comp_parent.id == "img2img_width" || + comp_parent.id == "img2img_height" || + comp_parent.id == "img2img_scale" || + comp_parent.id.indexOf("--ae-") != -1 || + comp_parent.id.indexOf("theme") != -1 || + comp_parent.className.indexOf("posex") != -1 + ) + return; - function ui_dispatch_input_release(value){ - const gcontainer = gradioApp().querySelector(".gradio-container"); - if(value){ - gcontainer.addEventListener('mouseover', ui_input_release_handler); - gcontainer.addEventListener('touchstart', slider_touchstart); - }else{ - gcontainer.removeEventListener('mouseover', ui_input_release_handler); - gcontainer.removeEventListener('touchstart', slider_touchstart); - //gcontainer.removeEventListener('contextmenu', slider_contextmenu); - gcontainer.removeEventListener('touchend', slider_touchend); - gcontainer.removeEventListener('touchmove', slider_touchmove); - gcontainer.removeEventListener('touchend', ui_input_touchend_handler); - gcontainer.removeEventListener('touchmove', ui_input_touchmove_handler); - } - } - gradioApp().querySelector("#setting_ui_dispatch_input_release input").addEventListener('click', function (e) { - ui_dispatch_input_release(e.target.checked); - }) - ui_dispatch_input_release(opts.ui_dispatch_input_release); - - // step ticks for performant input range - function ui_show_range_ticks(value, interactive){ - if(value){ - const range_selectors = "input[type='range']"; - //const range_selectors = "[id$='_clone']:is(input[type='range'])"; - gradioApp().querySelectorAll(range_selectors).forEach(function (elem){ - let spacing = ((elem.step / ( elem.max - elem.min )) * 100.0); - let tsp = 'max(3px, calc('+spacing+'% - 1px))'; - let fsp = 'max(4px, calc('+spacing+'% + 0px))'; - var style = elem.style; - style.setProperty('--ae-slider-bg-overlay', 'repeating-linear-gradient( 90deg, transparent, transparent '+tsp+', var(--ae-input-border-color) '+tsp+', var(--ae-input-border-color) '+fsp+' )'); - }) - }else if(interactive){ - gradioApp().querySelectorAll("input[type='range']").forEach(function (elem){ - var style = elem.style; - style.setProperty('--ae-slider-bg-overlay', 'transparent'); - }) - } - } - gradioApp().querySelector("#setting_ui_show_range_ticks input").addEventListener('click', function (e) { - ui_show_range_ticks(e.target.checked, true); - }) - ui_show_range_ticks(opts.ui_show_range_ticks); - - // draggable reordable quicksettings - const container = gradioApp().querySelector("#quicksettings_overflow_container"); - let draggables; - let lastElemAfter; - let islastChild; - let timeout; - - function preventBehavior(e){ - e.stopPropagation(); - e.preventDefault(); - return false; - } - let sdCheckpointModels = []; - function getSdCheckpointModels(){ - gradioApp().querySelectorAll("#txt2img_checkpoints_cards .card").forEach(function (elem, i){ - sdCheckpointModels[i] = elem.getAttribute("onclick").split('"')[1]; - }) - - } - getSdCheckpointModels(); - - function remove_overrides(){ - let checked_overrides = []; - gradioApp().querySelectorAll("#setting_ignore_overrides input").forEach(function (elem, i){ - if(elem.checked){ - checked_overrides[i] = elem.nextElementSibling.innerHTML; - } - }) - //console.log(checked_overrides); - gradioApp().querySelectorAll("[id$='2img_override_settings'] .token").forEach(function (token){ - let token_arr = token.querySelector("span").innerHTML.split(":"); - let token_name = token_arr[0]; - let token_value = token_arr[1]; - token_value = token_value.replaceAll(" ", ""); - - if(token_name.indexOf("Model hash") != -1){ - const info_label = gradioApp().querySelector("[id$='2img_override_settings'] label span"); - info_label.innerHTML = "Override settings MDL: unknown"; - for (let m=0; m"; - break; - } - } - } - if(checked_overrides.indexOf(token_name) != -1){ - token.querySelector(".token-remove").click(); - gradioApp().querySelector("#"+selectedTabItemId+" [id$='2img_override_settings']").parentElement.classList.add("show"); - }else{ - // maybe we add them again, for now we can select and add the removed tokens manually from the drop down - } - }) - } - gradioApp().querySelector("#setting_ignore_overrides").addEventListener('click', function (e) { - setTimeout(function() { remove_overrides(); }, 100); - }) - - - - function update_input_fields(tab){ - /* + let clone_num = elem.cloneNode(); + active_clone_input.push(clone_num); + + let label = parent.querySelector("label"); + + clone_num.id = "num_clone"; + clone_num.value = elem.value; + parent.append(clone_num); + elem.classList.add("hidden"); + + clone_num.addEventListener("change", function (e) { + elem.value = clone_num.value; + updateInput(elem); + }); + + clone_num.addEventListener("focus", function (e) { + focus_input = clone_num; + }); + + cached_clone_num = clone_num; + cached_clone_range = false; + + if (label) { + let comp_range = comp_parent.querySelector("input[type='range']"); + let clone_range = comp_range.cloneNode(); + active_clone_input.push(clone_range); + + clone_range.id = comp_range.id + "_clone"; + clone_range.value = comp_range.value; + comp_range.parentElement.append(clone_range); + comp_range.classList.add("hidden"); + + clone_range.addEventListener("input", function (e) { + clone_num.value = e.target.value; + }); + clone_range.addEventListener("change", function (e) { + elem.value = clone_range.value; + updateInput(elem); + }); + clone_num.addEventListener("input", function (e) { + clone_range.value = e.target.value; + }); + + cached_clone_range = clone_range; + } + } + function ui_input_focus_handler(e) { + if (e.target != focus_input) { + focus_input = false; + ui_input_release_handler(e); + } + } + + function ui_input_release_handler(e) { + const len = active_clone_input.length; + if (focus_input) { + return; + } + if (len > 0) { + if (e.target.id.indexOf("_clone") == -1) { + for (var i = len - 1; i >= 0; i--) { + let relem = active_clone_input[i]; + relem.previousElementSibling.classList.remove("hidden"); + relem.remove(); + active_clone_input.pop(); + } + } + } + + let elem_type = e.target.tagName; + if (elem_type == "INPUT") { + let elem = e.target; + if (elem.type == "number") { + ui_input_release_component(elem); + } else if (elem.type == "range") { + elem = e.target.parentElement.querySelector("input[type='number']"); + if (elem) { + ui_input_release_component(elem); + } + } + } + } + let timeoutId; + + function ui_input_touchmove_handler(e) { + if (cached_clone_range && cached_clone_num) { + if (e.touches) { + const rect = cached_clone_range.getBoundingClientRect(); + const xoffset_min = rect.left + window.scrollX; + //const xoffset_max = (rect.right + window.scrollX); + //const yoffset_min = (rect.top + window.scrollY); + //const yoffset_max = (rect.bottom + window.scrollY); + //if( e.touches[0].pageY > yoffset_min && e.touches[0].pageY < yoffset_max && e.touches[0].pageX > xoffset_min && e.touches[0].pageX < xoffset_max){ + e.preventDefault(); + const percent = + parseInt(((e.touches[0].pageX - xoffset_min) / rect.width) * 10000) / + 10000; + cached_clone_range.value = + percent * (cached_clone_range.max - cached_clone_range.min) + + parseFloat(cached_clone_range.min); + cached_clone_num.value = cached_clone_range.value; + //} + } + } + } + function ui_input_touchend_handler(e) { + if (cached_clone_range && cached_clone_num) { + const elem = cached_clone_range.previousElementSibling; + elem.value = cached_clone_range.value; + updateInput(elem); + } + } + + function slider_contextmenu(e) { + e.preventDefault(); + } + function slider_touchend(e) { + if (timeoutId) clearTimeout(timeoutId); + } + function slider_touchmove(e) { + if (timeoutId) clearTimeout(timeoutId); + } + function slider_touchstart(e) { + const gcontainer = e.target; + //gcontainer.removeEventListener('contextmenu', slider_contextmenu); + gcontainer.removeEventListener("touchend", slider_touchend); + gcontainer.removeEventListener("touchmove", slider_touchmove); + gcontainer.removeEventListener("touchend", ui_input_touchend_handler); + gcontainer.removeEventListener("touchmove", ui_input_touchmove_handler); + + timeoutId = setTimeout(function () { + timeoutId = null; + focus_input = false; + e.stopPropagation(); + ui_input_release_handler(e); + ui_input_touchmove_handler(e); + gcontainer.addEventListener("touchmove", ui_input_touchmove_handler); + gcontainer.addEventListener("touchend", ui_input_touchend_handler); + }, 500); + + //gcontainer.addEventListener('contextmenu', slider_contextmenu); + gcontainer.addEventListener("touchend", slider_touchend); + gcontainer.addEventListener("touchmove", slider_touchmove); + } + + function ui_dispatch_input_release(value) { + const gcontainer = gradioApp().querySelector(".gradio-container"); + if (value) { + gcontainer.addEventListener("mouseover", ui_input_release_handler); + gcontainer.addEventListener("touchstart", slider_touchstart); + } else { + gcontainer.removeEventListener("mouseover", ui_input_release_handler); + gcontainer.removeEventListener("touchstart", slider_touchstart); + //gcontainer.removeEventListener('contextmenu', slider_contextmenu); + gcontainer.removeEventListener("touchend", slider_touchend); + gcontainer.removeEventListener("touchmove", slider_touchmove); + gcontainer.removeEventListener("touchend", ui_input_touchend_handler); + gcontainer.removeEventListener("touchmove", ui_input_touchmove_handler); + } + } + gradioApp() + .querySelector("#setting_ui_dispatch_input_release input") + .addEventListener("click", function (e) { + ui_dispatch_input_release(e.target.checked); + }); + ui_dispatch_input_release(opts.ui_dispatch_input_release); + + // step ticks for performant input range + function ui_show_range_ticks(value, interactive) { + if (value) { + const range_selectors = "input[type='range']"; + //const range_selectors = "[id$='_clone']:is(input[type='range'])"; + gradioApp() + .querySelectorAll(range_selectors) + .forEach(function (elem) { + let spacing = (elem.step / (elem.max - elem.min)) * 100.0; + let tsp = "max(3px, calc(" + spacing + "% - 1px))"; + let fsp = "max(4px, calc(" + spacing + "% + 0px))"; + var style = elem.style; + style.setProperty( + "--ae-slider-bg-overlay", + "repeating-linear-gradient( 90deg, transparent, transparent " + + tsp + + ", var(--ae-input-border-color) " + + tsp + + ", var(--ae-input-border-color) " + + fsp + + " )" + ); + }); + } else if (interactive) { + gradioApp() + .querySelectorAll("input[type='range']") + .forEach(function (elem) { + var style = elem.style; + style.setProperty("--ae-slider-bg-overlay", "transparent"); + }); + } + } + gradioApp() + .querySelector("#setting_ui_show_range_ticks input") + .addEventListener("click", function (e) { + ui_show_range_ticks(e.target.checked, true); + }); + ui_show_range_ticks(opts.ui_show_range_ticks); + + // draggable reordable quicksettings + const container = gradioApp().querySelector( + "#quicksettings_overflow_container" + ); + let draggables; + let lastElemAfter; + let islastChild; + let timeout; + + function preventBehavior(e) { + e.stopPropagation(); + e.preventDefault(); + return false; + } + let sdCheckpointModels = []; + function getSdCheckpointModels() { + gradioApp() + .querySelectorAll("#txt2img_checkpoints_cards .card") + .forEach(function (elem, i) { + sdCheckpointModels[i] = elem.getAttribute("onclick").split('"')[1]; + }); + } + getSdCheckpointModels(); + + function remove_overrides() { + let checked_overrides = []; + gradioApp() + .querySelectorAll("#setting_ignore_overrides input") + .forEach(function (elem, i) { + if (elem.checked) { + checked_overrides[i] = elem.nextElementSibling.innerHTML; + } + }); + //console.log(checked_overrides); + gradioApp() + .querySelectorAll("[id$='2img_override_settings'] .token") + .forEach(function (token) { + let token_arr = token.querySelector("span").innerHTML.split(":"); + let token_name = token_arr[0]; + let token_value = token_arr[1]; + token_value = token_value.replaceAll(" ", ""); + + if (token_name.indexOf("Model hash") != -1) { + const info_label = gradioApp().querySelector( + "[id$='2img_override_settings'] label span" + ); + info_label.innerHTML = "Override settings MDL: unknown"; + for (let m = 0; m < sdCheckpointModels.length; m++) { + let m_str = sdCheckpointModels[m]; + if (m_str.indexOf(token_value) != -1) { + info_label.innerHTML = + "Override settings MDL: " + m_str.split("[")[0] + ""; + break; + } + } + } + if (checked_overrides.indexOf(token_name) != -1) { + token.querySelector(".token-remove").click(); + gradioApp() + .querySelector( + "#" + selectedTabItemId + " [id$='2img_override_settings']" + ) + .parentElement.classList.add("show"); + } else { + // maybe we add them again, for now we can select and add the removed tokens manually from the drop down + } + }); + } + gradioApp() + .querySelector("#setting_ignore_overrides") + .addEventListener("click", function (e) { + setTimeout(function () { + remove_overrides(); + }, 100); + }); + + function update_input_fields(tab) { + /* let input_selectors = "#tab_"+ tab + " [id^='num_clone']:is(input[type='number'])"; gradioApp().querySelectorAll(input_selectors).forEach(function (elem){ let elem_source = elem.previousElementSibling; @@ -1348,51 +1568,79 @@ onUiUpdate(function(){ updateInput(elem); }) */ - remove_overrides(); - autoGrowPromptTextarea(); - } - - gradioApp().querySelectorAll("#tab_pnginfo #png_2img_results button, [id$='2img_actions_column'] #paste").forEach(function (elem){ - elem.addEventListener('click', function (e) { - let button_id; - if(e.target.id == "paste"){ - button_id = e.target.nextElementSibling.id.split("_")[0]; - }else{ - button_id = e.target.id.split("_")[0]; - } - setTimeout(function() { update_input_fields(button_id); }, 500); - }) - }) + remove_overrides(); + autoGrowPromptTextarea(); + } - const pnginfo = gradioApp().querySelector("#tab_pnginfo"); - function forwardFromPngInfo(){ - - if(selectedTabItemId == "tab_txt2img"){ - pnginfo.querySelector('#txt2img_tab').click(); - //close generation info - gradioApp().querySelector('#txt2img_results > div:last-child > div.gradio-accordion > div.hide')?.click(); - - const img_src = pnginfo.querySelector('img'); - const gallery_parent = gradioApp().querySelector('#txt2img_gallery_container'); - const live_preview = gallery_parent.querySelector('.livePreview'); - if(live_preview){ - live_preview.innerHTML = ''; - }else{ - const div = document.createElement("div"); - div.classList.add("livePreview", "dropPreview"); - div.innerHTML = ''; - gallery_parent.prepend(div); - } - }else if(selectedTabItemId == "tab_img2img"){ - pnginfo.querySelector('#img2img_tab').click(); - //close generation info - gradioApp().querySelector('#img2img_results > div:last-child > div.gradio-accordion > div.hide')?.click(); - } - - } - - function fetchPngInfoData(files){ - /* const oldFetch = window.fetch; + gradioApp() + .querySelectorAll( + "#tab_pnginfo #png_2img_results button, [id$='2img_actions_column'] #paste" + ) + .forEach(function (elem) { + elem.addEventListener("click", function (e) { + let button_id; + if (e.target.id == "paste") { + button_id = e.target.nextElementSibling.id.split("_")[0]; + } else { + button_id = e.target.id.split("_")[0]; + } + setTimeout(function () { + update_input_fields(button_id); + }, 500); + }); + }); + + const pnginfo = gradioApp().querySelector("#tab_pnginfo"); + function forwardFromPngInfo() { + if (selectedTabItemId == "tab_txt2img") { + pnginfo.querySelector("#txt2img_tab").click(); + //close generation info + gradioApp() + .querySelector( + "#txt2img_results > div:last-child > div.gradio-accordion > div.hide" + ) + ?.click(); + + const img_src = pnginfo.querySelector("img"); + const gallery_parent = gradioApp().querySelector( + "#txt2img_gallery_container" + ); + const live_preview = gallery_parent.querySelector(".livePreview"); + if (live_preview) { + live_preview.innerHTML = + ''; + } else { + const div = document.createElement("div"); + div.classList.add("livePreview", "dropPreview"); + div.innerHTML = + ''; + gallery_parent.prepend(div); + } + } else if (selectedTabItemId == "tab_img2img") { + pnginfo.querySelector("#img2img_tab").click(); + //close generation info + gradioApp() + .querySelector( + "#img2img_results > div:last-child > div.gradio-accordion > div.hide" + ) + ?.click(); + } + } + + function fetchPngInfoData(files) { + /* const oldFetch = window.fetch; window.fetch = async (input, options) => { const response = await oldFetch(input, options); @@ -1403,303 +1651,340 @@ onUiUpdate(function(){ } return response; }; */ - - const fileInput = gradioApp().querySelector('#pnginfo_image input[type="file"]'); - if(fileInput.files != files){ - fileInput.files = files; - fileInput.dispatchEvent(new Event('change')); - } - - setTimeout(function() { forwardFromPngInfo(); }, 500); - - } - function drop2View(e){ - e.stopPropagation(); - e.preventDefault(); - const files = e.dataTransfer.files; - - if (!isValidImageList(files)) { - return; - } - const data_image = gradioApp().querySelector('#pnginfo_image [data-testid="image"]'); - data_image.querySelector('[aria-label="Clear"]')?.click(); - setTimeout(function() { fetchPngInfoData(files); }, 1000); - } - - gradioApp().querySelectorAll('[id$="2img_results"]').forEach((elem) => { - elem.addEventListener('drop', drop2View); - }) - - // function that gets the element next of cursor/touch - function getElementAfter(container, y){ - return draggables.reduce((closest, child) => { - const box = child.getBoundingClientRect(); - const offset = y - box.top - box.height / 2; - if(offset < 0 && offset > closest.offset){ - return { offset: offset, element: child}; - } else { - return closest; - } - }, { offset: Number.NEGATIVE_INFINITY } ).element; + const fileInput = gradioApp().querySelector( + '#pnginfo_image input[type="file"]' + ); + if (fileInput.files != files) { + fileInput.files = files; + fileInput.dispatchEvent(new Event("change")); } - - function dragOrderChange(elementAfter, isComplete, delem) { - - if(lastElemAfter !== elementAfter || islastChild){ - if(lastElemAfter != null ){ - lastElemAfter.classList.remove('marker-top', 'marker-bottom'); - } - if(elementAfter == null){ - islastChild = true; - lastElemAfter.classList.add('marker-bottom'); - } else { - islastChild = false; - elementAfter.classList.add('marker-top'); - lastElemAfter = elementAfter; - - } - } - - if(isComplete){ - - if(elementAfter == null){ - container.append(delem); - } else { - container.insertBefore(delem, elementAfter); - } - - let order_settings=""; - - gradioApp().querySelectorAll('#quicksettings_overflow_container > div').forEach(function (el){ - el.classList.remove('marker-top', 'marker-bottom', 'dragging'); - order_settings += el.id.split("row_setting_")[1]+","; - }) - //console.log(order_settings); - const setting_quicksettings = gradioApp().querySelector('#setting_quicksettings textarea'); - setting_quicksettings.value = order_settings; - updateInput(setting_quicksettings); - - const cEvent = new Event("click");//submit - Object.defineProperty(cEvent, "target", {value: settings_submit}) - settings_submit.dispatchEvent(cEvent); - - container.classList.remove('no-scroll'); - } - } + setTimeout(function () { + forwardFromPngInfo(); + }, 500); + } - function touchmove(e){ - let y = e.touches[0].clientY; - let elementAfter = getElementAfter(container, y); - dragOrderChange(elementAfter); - } - function touchstart(e){ - e.currentTarget.draggable = "false"; - let target = e.currentTarget; - // touch should be hold for 1 second - timeout = setTimeout(function(){ - target.classList.add('dragging'); - container.classList.add('no-scroll'); - target.addEventListener('touchmove', touchmove); - container.addEventListener("touchmove", preventBehavior, {passive: false}); - }, 1000); - - target.addEventListener('touchend', touchend); - target.addEventListener('touchcancel', touchcancel); - } - function touchend(e){ - e.currentTarget.draggable = "true"; - clearTimeout(timeout); - e.currentTarget.removeEventListener('touchmove', touchmove); - container.removeEventListener("touchmove", preventBehavior); - let y = e.changedTouches[0].clientY; - let elementAfter = getElementAfter(container, y); - dragOrderChange(elementAfter, true, e.currentTarget); - } - function touchcancel(e){ - e.currentTarget.draggable = "true"; - clearTimeout(timeout); - e.currentTarget.classList.remove('dragging'); - e.currentTarget.removeEventListener('touchmove', touchmove); - container.removeEventListener("touchmove", preventBehavior); - } - - function dragstart(e){ - e.currentTarget.draggable = "false"; - e.currentTarget.classList.add("dragging"); - } - function dragend(e){ - e.stopPropagation(); - e.preventDefault(); - e.currentTarget.draggable = "true"; - let y = e.clientY; - let elementAfter = getElementAfter(container, y); - dragOrderChange(elementAfter, true, e.currentTarget); - } - function dragOver(e) { - e.preventDefault(); - let y = e.clientY; - let elementAfter = getElementAfter(container, y); - dragOrderChange(elementAfter); - } + function drop2View(e) { + e.stopPropagation(); + e.preventDefault(); + const files = e.dataTransfer.files; - function actionQuickSettingsDraggable(checked){ - if(checked){ - draggables = Array.from(gradioApp().querySelectorAll('#quicksettings_overflow_container > div:not(.dragging)')); - gradioApp().addEventListener('drop', preventBehavior); - }else{ - gradioApp().removeEventListener('drop', preventBehavior); - } - - gradioApp().querySelectorAll('#quicksettings_overflow_container > div').forEach(function (elem){ - elem.draggable = checked; - if(checked){ - - elem.addEventListener('touchstart', touchstart); - elem.addEventListener('dragstart', dragstart); - elem.addEventListener('dragend', dragend); - elem.addEventListener('dragover', dragOver); - - }else{ - - elem.removeEventListener('touchstart', touchstart, false); - elem.removeEventListener('touchend', touchend, false); - elem.removeEventListener('touchcancel', touchcancel, false); - elem.removeEventListener('touchmove', touchmove, false); - elem.removeEventListener('dragstart', dragstart, false); - elem.removeEventListener('dragend', dragend, false); - elem.removeEventListener('dragover', dragOver, false); - } - }) - } - - gradioApp().querySelector('#quicksettings_draggable').addEventListener('click', function (e) { - if (e.target && e.target.matches("input[type='checkbox']")) { - actionQuickSettingsDraggable(e.target.checked); - } - }) - + if (!isValidImageList(files)) { + return; + } + const data_image = gradioApp().querySelector( + '#pnginfo_image [data-testid="image"]' + ); + data_image.querySelector('[aria-label="Clear"]')?.click(); + setTimeout(function () { + fetchPngInfoData(files); + }, 1000); + } - updateOpStyles(); - - - /* anapnoe ui end */ -}) + gradioApp() + .querySelectorAll('[id$="2img_results"]') + .forEach((elem) => { + elem.addEventListener("drop", drop2View); + }); -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) + // function that gets the element next of cursor/touch + function getElementAfter(container, y) { + return draggables.reduce( + (closest, child) => { + const box = child.getBoundingClientRect(); + const offset = y - box.top - box.height / 2; + if (offset < 0 && offset > closest.offset) { + return { offset: offset, element: child }; + } else { + return closest; + } + }, + { offset: Number.NEGATIVE_INFINITY } + ).element; + } - if(elem && elem.textContent != shorthash){ - elem.textContent = shorthash - elem.title = sd_checkpoint_hash - elem.href = "https://google.com/search?q=" + sd_checkpoint_hash - } -}) + function dragOrderChange(elementAfter, isComplete, delem) { + if (lastElemAfter !== elementAfter || islastChild) { + if (lastElemAfter != null) { + lastElemAfter.classList.remove("marker-top", "marker-bottom"); + } -let txt2img_textarea, img2img_textarea = undefined; -let wait_time = 800 + if (elementAfter == null) { + islastChild = true; + lastElemAfter.classList.add("marker-bottom"); + } else { + islastChild = false; + elementAfter.classList.add("marker-top"); + lastElemAfter = elementAfter; + } + } + + if (isComplete) { + if (elementAfter == null) { + container.append(delem); + } else { + container.insertBefore(delem, elementAfter); + } + + let order_settings = ""; + + gradioApp() + .querySelectorAll("#quicksettings_overflow_container > div") + .forEach(function (el) { + el.classList.remove("marker-top", "marker-bottom", "dragging"); + order_settings += el.id.split("row_setting_")[1] + ","; + }); + //console.log(order_settings); + const setting_quicksettings = gradioApp().querySelector( + "#setting_quicksettings textarea" + ); + setting_quicksettings.value = order_settings; + updateInput(setting_quicksettings); + + const cEvent = new Event("click"); //submit + Object.defineProperty(cEvent, "target", { value: settings_submit }); + settings_submit.dispatchEvent(cEvent); + + container.classList.remove("no-scroll"); + } + } + + function touchmove(e) { + let y = e.touches[0].clientY; + let elementAfter = getElementAfter(container, y); + dragOrderChange(elementAfter); + } + function touchstart(e) { + e.currentTarget.draggable = "false"; + let target = e.currentTarget; + // touch should be hold for 1 second + timeout = setTimeout(function () { + target.classList.add("dragging"); + container.classList.add("no-scroll"); + target.addEventListener("touchmove", touchmove); + container.addEventListener("touchmove", preventBehavior, { + passive: false, + }); + }, 1000); + + target.addEventListener("touchend", touchend); + target.addEventListener("touchcancel", touchcancel); + } + function touchend(e) { + e.currentTarget.draggable = "true"; + clearTimeout(timeout); + e.currentTarget.removeEventListener("touchmove", touchmove); + container.removeEventListener("touchmove", preventBehavior); + let y = e.changedTouches[0].clientY; + let elementAfter = getElementAfter(container, y); + dragOrderChange(elementAfter, true, e.currentTarget); + } + function touchcancel(e) { + e.currentTarget.draggable = "true"; + clearTimeout(timeout); + e.currentTarget.classList.remove("dragging"); + e.currentTarget.removeEventListener("touchmove", touchmove); + container.removeEventListener("touchmove", preventBehavior); + } + + function dragstart(e) { + e.currentTarget.draggable = "false"; + e.currentTarget.classList.add("dragging"); + } + function dragend(e) { + e.stopPropagation(); + e.preventDefault(); + e.currentTarget.draggable = "true"; + let y = e.clientY; + let elementAfter = getElementAfter(container, y); + dragOrderChange(elementAfter, true, e.currentTarget); + } + function dragOver(e) { + e.preventDefault(); + let y = e.clientY; + let elementAfter = getElementAfter(container, y); + dragOrderChange(elementAfter); + } + + function actionQuickSettingsDraggable(checked) { + if (checked) { + draggables = Array.from( + gradioApp().querySelectorAll( + "#quicksettings_overflow_container > div:not(.dragging)" + ) + ); + gradioApp().addEventListener("drop", preventBehavior); + } else { + gradioApp().removeEventListener("drop", preventBehavior); + } + + gradioApp() + .querySelectorAll("#quicksettings_overflow_container > div") + .forEach(function (elem) { + elem.draggable = checked; + if (checked) { + elem.addEventListener("touchstart", touchstart); + elem.addEventListener("dragstart", dragstart); + elem.addEventListener("dragend", dragend); + elem.addEventListener("dragover", dragOver); + } else { + elem.removeEventListener("touchstart", touchstart, false); + elem.removeEventListener("touchend", touchend, false); + elem.removeEventListener("touchcancel", touchcancel, false); + elem.removeEventListener("touchmove", touchmove, false); + elem.removeEventListener("dragstart", dragstart, false); + elem.removeEventListener("dragend", dragend, false); + elem.removeEventListener("dragover", dragOver, false); + } + }); + } + + gradioApp() + .querySelector("#quicksettings_draggable") + .addEventListener("click", function (e) { + if (e.target && e.target.matches("input[type='checkbox']")) { + actionQuickSettingsDraggable(e.target.checked); + } + }); + + updateOpStyles(); + + /* anapnoe ui end */ +}); + +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; + } +}); + +let txt2img_textarea, + img2img_textarea = undefined; +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(){ - let bg_color = window.getComputedStyle(gradioApp().querySelector("#header-top")).getPropertyValue('--ae-main-bg-color'); - let primary_color = window.getComputedStyle(gradioApp().querySelector(".icon-info")).getPropertyValue('--ae-primary-color'); - let panel_color = window.getComputedStyle(gradioApp().querySelector(".gradio-box")).getPropertyValue('--ae-panel-bg-color'); - - localStorage.setItem("bg_color", bg_color); - localStorage.setItem("primary_color", primary_color); - localStorage.setItem("panel_color", panel_color); - - if(localStorage.hasOwnProperty('bg_color')){ - bg_color = localStorage.getItem("bg_color"); - primary_color = localStorage.getItem("primary_color"); - panel_color = localStorage.getItem("panel_color"); - } - - document.body.style.backgroundColor = bg_color; +function restart_reload() { + let bg_color = window + .getComputedStyle(gradioApp().querySelector("#header-top")) + .getPropertyValue("--ae-main-bg-color"); + let primary_color = window + .getComputedStyle(gradioApp().querySelector(".icon-info")) + .getPropertyValue("--ae-primary-color"); + let panel_color = window + .getComputedStyle(gradioApp().querySelector(".gradio-box")) + .getPropertyValue("--ae-panel-bg-color"); - let style = document.createElement('style'); - style.type = 'text/css'; - style.innerHTML = '.loader{position:absolute;top:50vh;left:50vw;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .circles{position:absolute;left:-5px;top:0;height:60px;width:180px} .circles span{position:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:'+panel_color+'} .circles span.one{right:80px} .circles span.two{right:40px} .circles span.three{right:0px} .circles{-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear} @-webkit-keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}} @keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}} .pacman{position:absolute;left:0;top:0;height:60px;width:60px} .pacman .eye{position:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:'+bg_color+'} .pacman span{position:absolute;top:0;left:0;height:60px;width:60px} .pacman span::before{content:"";position:absolute;left:0;height:30px;width:60px;background-color:'+primary_color+'} .pacman .top::before{top:0;border-radius:60px 60px 0px 0px} .pacman .bottom::before{bottom:0;border-radius:0px 0px 60px 60px} .pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0px 0px 60px} .pacman .top{-webkit-animation:animtop 0.5s infinite;animation:animtop 0.5s infinite} @-webkit-keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}} @keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}} .pacman .bottom{-webkit-animation:animbottom 0.5s infinite;animation:animbottom 0.5s infinite} @-webkit-keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}} @keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}'; - - document.getElementsByTagName('head')[0].appendChild(style); - document.body.innerHTML='
'; - + localStorage.setItem("bg_color", bg_color); + localStorage.setItem("primary_color", primary_color); + localStorage.setItem("panel_color", panel_color); - setTimeout(function(){location.reload()},2000) + if (localStorage.hasOwnProperty("bg_color")) { + bg_color = localStorage.getItem("bg_color"); + primary_color = localStorage.getItem("primary_color"); + panel_color = localStorage.getItem("panel_color"); + } - return [] + document.body.style.backgroundColor = bg_color; + + let style = document.createElement("style"); + style.type = "text/css"; + style.innerHTML = + ".loader{position:absolute;top:50vh;left:50vw;height:60px;width:160px;margin:0;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)} .circles{position:absolute;left:-5px;top:0;height:60px;width:180px} .circles span{position:absolute;top:25px;height:12px;width:12px;border-radius:12px;background-color:" + + panel_color + + "} .circles span.one{right:80px} .circles span.two{right:40px} .circles span.three{right:0px} .circles{-webkit-animation:animcircles 0.5s infinite linear;animation:animcircles 0.5s infinite linear} @-webkit-keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}} @keyframes animcircles{0%{-webkit-transform:translate(0px,0px);transform:translate(0px,0px)}100%{-webkit-transform:translate(-40px,0px);transform:translate(-40px,0px)}} .pacman{position:absolute;left:0;top:0;height:60px;width:60px} .pacman .eye{position:absolute;top:10px;left:30px;height:7px;width:7px;border-radius:7px;background-color:" + + bg_color + + '} .pacman span{position:absolute;top:0;left:0;height:60px;width:60px} .pacman span::before{content:"";position:absolute;left:0;height:30px;width:60px;background-color:' + + primary_color + + "} .pacman .top::before{top:0;border-radius:60px 60px 0px 0px} .pacman .bottom::before{bottom:0;border-radius:0px 0px 60px 60px} .pacman .left::before{bottom:0;height:60px;width:30px;border-radius:60px 0px 0px 60px} .pacman .top{-webkit-animation:animtop 0.5s infinite;animation:animtop 0.5s infinite} @-webkit-keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}} @keyframes animtop{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}} .pacman .bottom{-webkit-animation:animbottom 0.5s infinite;animation:animbottom 0.5s infinite} @-webkit-keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}} @keyframes animbottom{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(45deg);transform:rotate(45deg)}}"; + + document.getElementsByTagName("head")[0].appendChild(style); + document.body.innerHTML = + '
'; + + setTimeout(function () { + location.reload(); + }, 2000); + + 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){ - const e = new Event("input", { bubbles: true }) - Object.defineProperty(e, "target", {value: target}) - target.dispatchEvent(e); - const eb = new Event("blur"); - Object.defineProperty(eb, "target", {value: target}) - target.dispatchEvent(eb); +function updateInput(target) { + const e = new Event("input", { bubbles: true }); + Object.defineProperty(e, "target", { value: target }); + target.dispatchEvent(e); + const eb = new Event("blur"); + Object.defineProperty(eb, "target", { value: target }); + target.dispatchEvent(eb); } var desiredCheckpointName = null; -function selectCheckpoint(name){ - desiredCheckpointName = name; - gradioApp().getElementById('change_checkpoint').click() +function selectCheckpoint(name) { + desiredCheckpointName = name; + gradioApp().getElementById("change_checkpoint").click(); } -function currentImg2imgSourceResolution(_, _, scaleBy){ - var img = gradioApp().querySelector('#mode_img2img > div[style="display: block;"] img') - return img ? [img.naturalWidth, img.naturalHeight, scaleBy] : [0, 0, scaleBy] +function currentImg2imgSourceResolution(_, _, 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 [] -} - -document.addEventListener('readystatechange', function (e) { - document.body.style.display = "none"; - if(localStorage.hasOwnProperty('bg_color')){ - document.getElementsByTagName("html")[0].style.backgroundColor = localStorage.getItem("bg_color"); - document.body.style.backgroundColor = localStorage.getItem("bg_color"); - } -}) - -window.onload = function() { - document.getElementsByTagName("html")[0].style.backgroundColor = localStorage.getItem("bg_color"); - document.body.style.backgroundColor = localStorage.getItem("bg_color"); - document.body.style.display = "none"; - document.body.classList.add("dark"); - setTimeout(function(){document.body.style.display = "block";},1000) +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 []; } +document.addEventListener("readystatechange", function (e) { + document.body.style.display = "none"; + if (localStorage.hasOwnProperty("bg_color")) { + document.getElementsByTagName("html")[0].style.backgroundColor = + localStorage.getItem("bg_color"); + document.body.style.backgroundColor = localStorage.getItem("bg_color"); + } +}); +window.onload = function () { + document.getElementsByTagName("html")[0].style.backgroundColor = + localStorage.getItem("bg_color"); + document.body.style.backgroundColor = localStorage.getItem("bg_color"); + document.body.style.display = "none"; + document.body.classList.add("dark"); + setTimeout(function () { + document.body.style.display = "block"; + }, 1000); +}; diff --git a/script.js b/script.js index 03afe844..82895568 100644 --- a/script.js +++ b/script.js @@ -1,104 +1,112 @@ function gradioApp() { - const elems = document.getElementsByTagName('gradio-app') - const elem = elems.length == 0 ? document : elems[0] + const elems = document.getElementsByTagName("gradio-app"); + const elem = elems.length == 0 ? document : elems[0]; - if (elem !== document) elem.getElementById = function(id){ return document.getElementById(id) } - return elem.shadowRoot ? elem.shadowRoot : elem + if (elem !== document) + elem.getElementById = function (id) { + return document.getElementById(id); + }; + return elem.shadowRoot ? elem.shadowRoot : elem; } function get_uiCurrentTab() { - return gradioApp().querySelector('#tabs button.selected') + return gradioApp().querySelector("#tabs button.selected"); } function get_uiCurrentTabContent() { - return gradioApp().querySelector('.tabitem[id^=tab_]:not([style*="display: none"])') + return gradioApp().querySelector( + '.tabitem[id^=tab_]:not([style*="display: none"])' + ); } -uiUpdateCallbacks = [] -uiLoadedCallbacks = [] -uiTabChangeCallbacks = [] -optionsChangedCallbacks = [] -let uiCurrentTab = null +uiUpdateCallbacks = []; +uiLoadedCallbacks = []; +uiTabChangeCallbacks = []; +optionsChangedCallbacks = []; +let uiCurrentTab = null; -function onUiUpdate(callback){ - uiUpdateCallbacks.push(callback) +function onUiUpdate(callback) { + uiUpdateCallbacks.push(callback); } -function onUiLoaded(callback){ - uiLoadedCallbacks.push(callback) +function onUiLoaded(callback) { + uiLoadedCallbacks.push(callback); } -function onUiTabChange(callback){ - uiTabChangeCallbacks.push(callback) +function onUiTabChange(callback) { + uiTabChangeCallbacks.push(callback); } -function onOptionsChanged(callback){ - optionsChangedCallbacks.push(callback) +function onOptionsChanged(callback) { + optionsChangedCallbacks.push(callback); } -function runCallback(x, m){ - try { - x(m) - } catch (e) { - (console.error || console.log).call(console, e.message, e); - } +function runCallback(x, m) { + try { + x(m); + } catch (e) { + (console.error || console.log).call(console, e.message, e); + } } function executeCallbacks(queue, m) { - queue.forEach(function(x){runCallback(x, m)}) + queue.forEach(function (x) { + runCallback(x, m); + }); } var executedOnLoaded = false; -document.addEventListener("DOMContentLoaded", function() { - var mutationObserver = new MutationObserver(function(m){ - if(!executedOnLoaded && gradioApp().querySelector('#txt2img_prompt')){ - executedOnLoaded = true; - executeCallbacks(uiLoadedCallbacks); - } +document.addEventListener("DOMContentLoaded", function () { + var mutationObserver = new MutationObserver(function (m) { + if (!executedOnLoaded && gradioApp().querySelector("#txt2img_prompt")) { + executedOnLoaded = true; + executeCallbacks(uiLoadedCallbacks); + } - executeCallbacks(uiUpdateCallbacks, m); - const newTab = get_uiCurrentTab(); - if ( newTab && ( newTab !== uiCurrentTab ) ) { - uiCurrentTab = newTab; - executeCallbacks(uiTabChangeCallbacks); - } - }); - mutationObserver.observe( gradioApp(), { childList:true, subtree:true }) + executeCallbacks(uiUpdateCallbacks, m); + const newTab = get_uiCurrentTab(); + if (newTab && newTab !== uiCurrentTab) { + uiCurrentTab = newTab; + executeCallbacks(uiTabChangeCallbacks); + } + }); + mutationObserver.observe(gradioApp(), { childList: true, subtree: true }); }); /** * Add a ctrl+enter as a shortcut to start a generation */ -document.addEventListener('keydown', function(e) { - var handled = false; - if (e.key !== undefined) { - if((e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey))) handled = true; - } else if (e.keyCode !== undefined) { - if((e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey))) handled = true; +document.addEventListener("keydown", function (e) { + var handled = false; + if (e.key !== undefined) { + if (e.key == "Enter" && (e.metaKey || e.ctrlKey || e.altKey)) + handled = true; + } else if (e.keyCode !== undefined) { + if (e.keyCode == 13 && (e.metaKey || e.ctrlKey || e.altKey)) handled = true; + } + if (handled) { + button = get_uiCurrentTabContent().querySelector("button[id$=_generate]"); + if (button) { + button.click(); } - if (handled) { - button = get_uiCurrentTabContent().querySelector('button[id$=_generate]'); - if (button) { - button.click(); - } - e.preventDefault(); - } -}) + e.preventDefault(); + } +}); /** * checks that a UI element is not in another hidden element or tab content */ function uiElementIsVisible(el) { - let isVisible = !el.closest('.\\!hidden'); - if ( ! isVisible ) { - return false; - } + let isVisible = !el.closest(".\\!hidden"); + if (!isVisible) { + return false; + } - while( isVisible = el.closest('.tabitem')?.style.display !== 'none' ) { - if ( ! isVisible ) { - return false; - } else if ( el.parentElement ) { - el = el.parentElement - } else { - break; - } + while ((isVisible = el.closest(".tabitem")?.style.display !== "none")) { + if (!isVisible) { + return false; + } else if (el.parentElement) { + el = el.parentElement; + } else { + break; } - return isVisible; + } + return isVisible; } diff --git a/style.css b/style.css index c7c69e61..9267c781 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,48 @@ -:root{--ae-main-bg-color:hsl(0deg 0% 10%);--ae-primary-color:hsl(168deg 97% 41%);--ae-input-bg-color:hsl(225deg 6% 13%);--ae-input-border-color:hsl(214deg 5% 30%);--ae-panel-bg-color:hsl(225deg 5% 17%);--ae-panel-border-color:hsl(214deg 5% 30%);--ae-panel-border-radius:0px;--ae-subgroup-bg-color:hsl(0deg 0% 10%);--ae-subgroup-input-bg-color:hsl(225deg 6% 13%);--ae-subgroup-input-border-color:hsl(214deg 5% 30%);--ae-subpanel-bg-color:hsl(220deg 4% 14%);--ae-subpanel-border-color:hsl(214deg 5% 30%);--ae-subpanel-border-radius:8px;--ae-textarea-focus-color:hsl(210deg 3% 36%);--ae-input-focus-color:hsl(168deg 97% 41%);--ae-outside-gap-size:8px;--ae-inside-padding-size:8px;--ae-tool-button-size:34px;--ae-tool-button-radius:16px;--ae-generate-button-height:70px;--ae-cancel-color:hsl(0deg 84% 60%);--ae-max-padding:max(var(--ae-outside-gap-size),var(--ae-inside-padding-size));--ae-icon-color:hsl(168deg 97% 41%);--ae-icon-hover-color:hsl(0deg 0% 10%);--ae-icon-size:22px;--ae-nav-bg-color:hsl(0deg 0% 4%);--ae-nav-color:hsl(210deg 4% 80%);--ae-nav-hover-color:hsl(0deg 0% 4%);--ae-input-color:hsl(210deg 4% 80%);--ae-label-color:hsl(210deg 4% 80%);--ae-subgroup-input-color:hsl(210deg 4% 80%);--ae-placeholder-color:hsl(214deg 5% 30%);--ae-text-color:hsl(210deg 4% 80%);--ae-mobile-outside-gap-size:2px;--ae-mobile-inside-padding-size:2px;--ae-frame-bg-color:hsl(225deg 6% 13%);--ae-modal-bg-color:hsl(0deg 0% 10%);--ae-modal-icon-color:hsl(168deg 97% 41%);}/*BREAKPOINT_CSS_CONTENT*/ +:root { + --ae-main-bg-color: hsl(0deg 0% 10%); + --ae-primary-color: hsl(168deg 97% 41%); + --ae-input-bg-color: hsl(225deg 6% 13%); + --ae-input-border-color: hsl(214deg 5% 30%); + --ae-panel-bg-color: hsl(225deg 5% 17%); + --ae-panel-border-color: hsl(214deg 5% 30%); + --ae-panel-border-radius: 0px; + --ae-subgroup-bg-color: hsl(0deg 0% 10%); + --ae-subgroup-input-bg-color: hsl(225deg 6% 13%); + --ae-subgroup-input-border-color: hsl(214deg 5% 30%); + --ae-subpanel-bg-color: hsl(220deg 4% 14%); + --ae-subpanel-border-color: hsl(214deg 5% 30%); + --ae-subpanel-border-radius: 8px; + --ae-textarea-focus-color: hsl(210deg 3% 36%); + --ae-input-focus-color: hsl(168deg 97% 41%); + --ae-outside-gap-size: 8px; + --ae-inside-padding-size: 8px; + --ae-tool-button-size: 34px; + --ae-tool-button-radius: 16px; + --ae-generate-button-height: 70px; + --ae-cancel-color: hsl(0deg 84% 60%); + --ae-max-padding: max( + var(--ae-outside-gap-size), + var(--ae-inside-padding-size) + ); + --ae-icon-color: hsl(168deg 97% 41%); + --ae-icon-hover-color: hsl(0deg 0% 10%); + --ae-icon-size: 22px; + --ae-nav-bg-color: hsl(0deg 0% 4%); + --ae-nav-color: hsl(210deg 4% 80%); + --ae-nav-hover-color: hsl(0deg 0% 4%); + --ae-input-color: hsl(210deg 4% 80%); + --ae-label-color: hsl(210deg 4% 80%); + --ae-subgroup-input-color: hsl(210deg 4% 80%); + --ae-placeholder-color: hsl(214deg 5% 30%); + --ae-text-color: hsl(210deg 4% 80%); + --ae-mobile-outside-gap-size: 2px; + --ae-mobile-inside-padding-size: 2px; + --ae-frame-bg-color: hsl(225deg 6% 13%); + --ae-modal-bg-color: hsl(0deg 0% 10%); + --ae-modal-icon-color: hsl(168deg 97% 41%); +} + +/*BREAKPOINT_CSS_CONTENT*/ /* Theme Name: DarkUX @@ -7,78 +51,104 @@ Author URI: https://github.com/anapnoe/stable-diffusion-webui Version: 1.0 License: GNU General Public License */ -:root{ - --ae-extra-networks-card-size: 1; - --ae-extra-networks-card-real-size: calc(var(--ae-extra-networks-card-size) * 14vh); - --ae-extra-networks-visible-rows: 2; - --ae-extra-networks-height: calc((var(--ae-extra-networks-card-real-size) * var(--ae-extra-networks-visible-rows)) + ( var(--ae-inside-padding-size) * 2 ) ); - --ae-extra-networks-name-size: calc(var(--ae-extra-networks-card-size) * 1em); - - --ae-top-header-padding-top:16px; - --ae-top-header-padding-bottom:16px; - --ae-top-header-inner-height:38px; - --ae-top-header-height: calc( var(--ae-top-header-padding-top) + var(--ae-top-header-inner-height) + var(--ae-top-header-padding-bottom) ); - - --ae-container-padding:16px; - --ae-footer-height: calc( 32px + (var(--ae-container-padding) * 2) ); - --ae-gallery-bottom-height: calc(24px + (var(--ae-max-padding) * 2) + 16px + (var(--ae-inside-padding-size) * 2) + (var(--ae-outside-gap-size)* 3 )); - - --ae-subtract-total: calc( var(--ae-top-header-height) + var(--ae-footer-height)); - --ae-container-height : calc(100vh - var(--ae-subtract-total)); - --ae-container-total-height : calc( var(--ae-container-height) - (var(--ae-outside-gap-size) * 2) - (var(--ae-inside-padding-size) * 2)); - --ae-container-height-gap : calc( var(--ae-container-height) - (var(--ae-outside-gap-size) * 2)); - --ae-container-height-pad : calc( var(--ae-container-height) - (var(--ae-inside-padding-size) * 2)); - +:root { + --ae-extra-networks-card-size: 1; + --ae-extra-networks-card-real-size: calc( + var(--ae-extra-networks-card-size) * 14vh + ); + --ae-extra-networks-visible-rows: 2; + --ae-extra-networks-height: calc( + ( + var(--ae-extra-networks-card-real-size) * + var(--ae-extra-networks-visible-rows) + ) + (var(--ae-inside-padding-size) * 2) + ); + --ae-extra-networks-name-size: calc(var(--ae-extra-networks-card-size) * 1em); - --ae-processing-border : 2px; - --ae-processing-border-double: var(--ae-processing-border) * 2; - - --ae-slider-bg-overlay : transparent; - - - --ae-border-width: 1px; - --ae-accordion-vertical-padding: max(8px, var(--ae-inside-padding-size)); - --ae-accordion-horizontal-padding: max(4px, var(--ae-inside-padding-size)); - --ae-accordion-line-height: 24px; - --ae-accordion-header-height: calc(var(--ae-accordion-line-height) + var(--ae-accordion-vertical-padding) * 2); - - --ae-results-height: calc(100vh - (var(--ae-top-header-height) + var(--ae-footer-height) + var(--ae-accordion-header-height) + var(--ae-outside-gap-size) * 4 + 38px)); - + --ae-top-header-padding-top: 16px; + --ae-top-header-padding-bottom: 16px; + --ae-top-header-inner-height: 38px; + --ae-top-header-height: calc( + var(--ae-top-header-padding-top) + var(--ae-top-header-inner-height) + + var(--ae-top-header-padding-bottom) + ); + --ae-container-padding: 16px; + --ae-footer-height: calc(32px + (var(--ae-container-padding) * 2)); + --ae-gallery-bottom-height: calc( + 24px + (var(--ae-max-padding) * 2) + 16px + + (var(--ae-inside-padding-size) * 2) + (var(--ae-outside-gap-size) * 3) + ); + + --ae-subtract-total: calc( + var(--ae-top-header-height) + var(--ae-footer-height) + ); + --ae-container-height: calc(100vh - var(--ae-subtract-total)); + --ae-container-total-height: calc( + var(--ae-container-height) - (var(--ae-outside-gap-size) * 2) - + (var(--ae-inside-padding-size) * 2) + ); + --ae-container-height-gap: calc( + var(--ae-container-height) - (var(--ae-outside-gap-size) * 2) + ); + --ae-container-height-pad: calc( + var(--ae-container-height) - (var(--ae-inside-padding-size) * 2) + ); + + --ae-processing-border: 2px; + --ae-processing-border-double: var(--ae-processing-border) * 2; + + --ae-slider-bg-overlay: transparent; + + --ae-border-width: 1px; + --ae-accordion-vertical-padding: max(8px, var(--ae-inside-padding-size)); + --ae-accordion-horizontal-padding: max(4px, var(--ae-inside-padding-size)); + --ae-accordion-line-height: 24px; + --ae-accordion-header-height: calc( + var(--ae-accordion-line-height) + var(--ae-accordion-vertical-padding) * 2 + ); + + --ae-results-height: calc( + 100vh - + ( + var(--ae-top-header-height) + var(--ae-footer-height) + + var(--ae-accordion-header-height) + var(--ae-outside-gap-size) * 4 + + 38px + ) + ); } @media only screen and (max-width: 860px) { - :root{ - --ae-outside-gap-size: var(--ae-mobile-outside-gap-size); - --ae-inside-padding-size: var(--ae-mobile-inside-padding-size); - } + :root { + --ae-outside-gap-size: var(--ae-mobile-outside-gap-size); + --ae-inside-padding-size: var(--ae-mobile-inside-padding-size); + } } body { - background-color: var(--ae-main-bg-color) !important; + background-color: var(--ae-main-bg-color) !important; } -.hidden{ - display: none !important; +.hidden { + display: none !important; } -.app.svelte-1mya07g.svelte-1mya07g -{ - position: relative; - margin: auto; - padding: var(--size-4); - padding-top: 0; - width: 100%; - min-height: 100vh !important; - min-width: unset !important; - max-width: unset !important; - background-color: var(--ae-main-bg-color); +.app.svelte-1mya07g.svelte-1mya07g { + position: relative; + margin: auto; + padding: var(--size-4); + padding-top: 0; + width: 100%; + min-height: 100vh !important; + min-width: unset !important; + max-width: unset !important; + background-color: var(--ae-main-bg-color); } - .block.svelte-mppz8v { - line-height: 16px !important; + line-height: 16px !important; } + /*********/ /* Icons */ /*********/ @@ -100,14 +170,12 @@ body { [id="extras_tab"], [id="img2img_tab"], [id="inpaint_tab"], -[id="txt2img_tab"] -{ - /*background-color: var(--ae-panel-bg-color);*/ - position: relative; - font-size: 0 !important; +[id="txt2img_tab"] { + /*background-color: var(--ae-panel-bg-color);*/ + position: relative; + font-size: 0 !important; } - [id$="_refresh"]::before, [id^="refresh_"]::before, [id$="_clear_prompt"]::before, @@ -125,22 +193,21 @@ body { [id="extras_tab"]::before, [id="img2img_tab"]::before, [id="inpaint_tab"]::before, -[id="txt2img_tab"]::before -{ - content: ' '; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; - background-color: var(--ae-icon-color); - width: var(--ae-icon-size); - height: var(--ae-icon-size); - position: absolute; +[id="txt2img_tab"]::before { + content: " "; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--ae-icon-color); + width: var(--ae-icon-size); + height: var(--ae-icon-size); + position: absolute; } [id*="2img_random"]::before, -[id*="2img_reuse"]::before -{ - background-color: var(--ae-icon-color); +[id*="2img_reuse"]::before { + background-color: var(--ae-icon-color); + border-radius: var(--ae-panel-border-radius); } [id$="_refresh"]:hover::before, @@ -160,311 +227,301 @@ body { [id="extras_tab"]:hover::before, [id="img2img_tab"]:hover::before, [id="inpaint_tab"]:hover::before, -[id="txt2img_tab"]:hover::before -{ - background-color: var(--ae-icon-hover-color); +[id="txt2img_tab"]:hover::before { + background-color: var(--ae-icon-hover-color); +} + +[id$="2img_extra_networks"] { + border: 1px solid var(--ae-input-border-color) !important; + border-radius: var(--ae-panel-border-radius) !important; + background: var(--ae-input-bg-color) !important; +} + +[id$="2img_extra_networks"]:hover { + background-color: var(--ae-icon-color) !important; } [id$="_refresh"]::before, -[id^="refresh_"]::before -{ - -webkit-mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%; +[id^="refresh_"]::before { + -webkit-mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%; } -[id$="_clear_prompt"]::before -{ - -webkit-mask: url(./file=html/svg/delete-bin-5-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/delete-bin-5-line.svg) no-repeat 50% 50%; +[id$="_clear_prompt"]::before { + -webkit-mask: url(./file=html/svg/delete-bin-5-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/delete-bin-5-line.svg) no-repeat 50% 50%; } -[id$="2img_style_create"]::before -{ - -webkit-mask: url(./file=html/svg/save-3-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/save-3-line.svg) no-repeat 50% 50%; +[id$="2img_style_create"]::before { + -webkit-mask: url(./file=html/svg/save-3-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/save-3-line.svg) no-repeat 50% 50%; } -[id$="2img_style_apply"]::before -{ - -webkit-mask: url(./file=html/svg/clipboard-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/clipboard-line.svg) no-repeat 50% 50%; +[id$="2img_style_apply"]::before { + -webkit-mask: url(./file=html/svg/clipboard-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/clipboard-line.svg) no-repeat 50% 50%; } -[id$="paste"]::before -{ - -webkit-mask: url(./file=html/svg/magic-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/magic-line.svg) no-repeat 50% 50%; +[id$="paste"]::before { + -webkit-mask: url(./file=html/svg/magic-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/magic-line.svg) no-repeat 50% 50%; } -[id$="2img_extra_networks"]::before -{ - -webkit-mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; +[id$="2img_extra_networks"]::before { + -webkit-mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; } -#img2img_actions_column [id$="interrogate"]::before -{ - -webkit-mask: url(./file=html/svg/question-answer-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/question-answer-line.svg) no-repeat 50% 50%; +#img2img_actions_column [id$="interrogate"]::before { + -webkit-mask: url(./file=html/svg/question-answer-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/question-answer-line.svg) no-repeat 50% 50%; } -#img2img_actions_column [id$="deepbooru"]::before -{ - -webkit-mask: url(./file=html/svg/question-answer-fill.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/question-answer-fill.svg) no-repeat 50% 50%; +#img2img_actions_column [id$="deepbooru"]::before { + -webkit-mask: url(./file=html/svg/question-answer-fill.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/question-answer-fill.svg) no-repeat 50% 50%; } -[id^="open_folder"]::before -{ - -webkit-mask: url(./file=html/svg/folder-open-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/folder-open-line.svg) no-repeat 50% 50%; +[id^="open_folder"]::before { + -webkit-mask: url(./file=html/svg/folder-open-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/folder-open-line.svg) no-repeat 50% 50%; } -[id*="2img_random"]::before -{ - -webkit-mask: url(./file=html/svg/dice-1.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/dice-1.svg) no-repeat 50% 50%; +[id*="2img_random"]::before { + -webkit-mask: url(./file=html/svg/dice-1.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/dice-1.svg) no-repeat 50% 50%; } -[id*="2img_reuse"]::before -{ - -webkit-mask: url(./file=html/svg/recycle-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/recycle-line.svg) no-repeat 50% 50%; +[id*="2img_reuse"]::before { + -webkit-mask: url(./file=html/svg/recycle-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/recycle-line.svg) no-repeat 50% 50%; } - -[id^="save_"]::before -{ - -webkit-mask: url(./file=html/svg/save-2-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/save-2-line.svg) no-repeat 50% 50%; +[id^="save_"]::before { + -webkit-mask: url(./file=html/svg/save-2-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/save-2-line.svg) no-repeat 50% 50%; } -[id^="save_zip_"]::before -{ - -webkit-mask: url(./file=html/svg/file-zip-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/file-zip-line.svg) no-repeat 50% 50%; +[id^="save_zip_"]::before { + -webkit-mask: url(./file=html/svg/file-zip-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/file-zip-line.svg) no-repeat 50% 50%; } -[id="extras_tab"]::before -{ - -webkit-mask: url(./file=html/svg/picture-in-picture-exit-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/picture-in-picture-exit-line.svg) no-repeat 50% 50%; +[id="extras_tab"]::before { + -webkit-mask: url(./file=html/svg/picture-in-picture-exit-line.svg) no-repeat + 50% 50%; + mask: url(./file=html/svg/picture-in-picture-exit-line.svg) no-repeat 50% 50%; } -[id="img2img_tab"]::before -{ - -webkit-mask: url(./file=html/svg/landscape-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/landscape-line.svg) no-repeat 50% 50%; +[id="img2img_tab"]::before { + -webkit-mask: url(./file=html/svg/landscape-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/landscape-line.svg) no-repeat 50% 50%; } -[id="inpaint_tab"]::before -{ - -webkit-mask: url(./file=html/svg/paint-brush-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/paint-brush-line.svg) no-repeat 50% 50%; +[id="inpaint_tab"]::before { + -webkit-mask: url(./file=html/svg/paint-brush-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/paint-brush-line.svg) no-repeat 50% 50%; } -[id="txt2img_tab"]::before -{ - -webkit-mask: url(./file=html/svg/t-box-fill.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/t-box-fill.svg) no-repeat 50% 50%; +[id="txt2img_tab"]::before { + -webkit-mask: url(./file=html/svg/t-box-fill.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/t-box-fill.svg) no-repeat 50% 50%; } - - /*************/ /* TopHeader */ /*************/ -#tabs{ - margin-top: calc(var(--ae-top-header-height)); - min-height: var(--ae-container-height); +#tabs { + margin-top: calc(var(--ae-top-header-height)); + min-height: var(--ae-container-height); } -#header-top{ - position: fixed; - top: 0px; - left: 0; - right: 0; - z-index: 10000; - min-height: var(--ae-top-header-inner-height); - background-color: var(--ae-main-bg-color); - padding-left: 1rem; - padding-right: 1rem; - padding-top: var(--ae-top-header-padding-top); - padding-bottom: var(--ae-top-header-padding-bottom); +#header-top { + position: fixed; + top: 0px; + left: 0; + right: 0; + z-index: 10000; + min-height: var(--ae-top-header-inner-height); + background-color: var(--ae-main-bg-color); + padding-left: 1rem; + padding-right: 1rem; + padding-top: var(--ae-top-header-padding-top); + padding-bottom: var(--ae-top-header-padding-bottom); } #nav_menu_header_tabs { - position: relative; - height: 34px; - align-self: center; - flex-grow: 2; - line-height: 14px; + position: relative; + height: 34px; + align-self: center; + flex-grow: 2; + line-height: 14px; } -#nav_menu_header_tabs button{ - font-size: 14px; - flex: 1 1 auto; - flex-grow: 0; - min-width: unset; - padding-bottom: 0; - padding-right: 0; - padding-top:0; - border: 0; - color:var(--ae-nav-color); - background: 0 !important; - padding-left: 10px; - opacity:0.75; + +#nav_menu_header_tabs button { + font-size: 14px; + flex: 1 1 auto; + flex-grow: 0; + min-width: unset; + padding-bottom: 0; + padding-right: 0; + padding-top: 0; + border: 0; + color: var(--ae-nav-color); + background: 0 !important; + padding-left: 10px; + opacity: 0.75; } -#nav_menu_header_tabs button.selected{ - color:var(--ae-primary-color); - opacity:1; + +#nav_menu_header_tabs button.selected { + color: var(--ae-primary-color); + opacity: 1; } -#nav_menu_header_tabs button:hover{ - opacity:1; + +#nav_menu_header_tabs button:hover { + opacity: 1; } .container { - padding: var(--ae-container-padding); - color: var(--ae-input-color); + padding: var(--ae-container-padding); + color: var(--ae-input-color); } #quicksettings { - align-items: center; - width: auto; - background: 0; - padding: 0; - position: relative; - max-height: 34px; - align-self: center; - min-width: min(60px, 100%); + align-items: center; + width: auto; + background: 0; + padding: 0; + position: relative; + max-height: 34px; + align-self: center; + min-width: min(60px, 100%); } - - #extra_networks_menu, #quick_menu { - z-index: 9999; - background-color: var(--ae-input-bg-color); - position: relative; - width: 38px; - height: 38px; - border-radius: 100%; - cursor: pointer; - min-width: unset; - max-width: 38px; - align-self: center; + z-index: 9999; + background-color: var(--ae-input-bg-color); + position: relative; + width: 38px; + height: 38px; + border-radius: 100%; + cursor: pointer; + min-width: unset; + max-width: 38px; + align-self: center; } - #extra_networks_menu::before, #quick_menu::before { - content: ' '; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; - background-color: var(--ae-icon-color); - width: var(--ae-icon-size); - height: var(--ae-icon-size); - -webkit-mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%; - cursor: pointer; - position: relative; - left: 50%; - top: 50%; - transform: translate(-50%, -50%) scale(1.0); - + content: " "; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--ae-icon-color); + width: var(--ae-icon-size); + height: var(--ae-icon-size); + -webkit-mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%; + cursor: pointer; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(1); } -#extra_networks_menu::before{ - -webkit-mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; + +#extra_networks_menu::before { + -webkit-mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; } #extra_networks_menu.fixed, #extra_networks_menu:hover, #quick_menu:hover { - background-color: var(--ae-icon-color); + background-color: var(--ae-icon-color); } #extra_networks_menu.fixed::before, #extra_networks_menu:hover::before, #quick_menu:hover::before { - background-color: var(--ae-icon-hover-color); + background-color: var(--ae-icon-hover-color); } -[id$="nav_menu"]{ - z-index: 9999; - background-color: var(--ae-input-bg-color); - position: relative; - width: 38px; - height: 38px; - border-radius: 100%; - cursor: pointer; - max-width: 38px; - min-width: unset !important; - align-self: center; +[id$="nav_menu"] { + z-index: 9999; + background-color: var(--ae-input-bg-color); + position: relative; + width: 38px; + height: 38px; + border-radius: 100%; + cursor: pointer; + max-width: 38px; + min-width: unset !important; + align-self: center; } - [id$="nav_menu"]::before { - content: ' '; - display: inline-block; - -webkit-mask-size: cover; - mask-size: cover; - background-color: var(--ae-icon-color); - width: var(--ae-icon-size); - height: var(--ae-icon-size); - -webkit-mask: url(./file=html/svg/menu-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/menu-line.svg) no-repeat 50% 50%; - cursor: pointer; - position: relative; - left: 50%; - top: 50%; - transform: translate(-50%, -50%) scale(1.0); - + content: " "; + display: inline-block; + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--ae-icon-color); + width: var(--ae-icon-size); + height: var(--ae-icon-size); + -webkit-mask: url(./file=html/svg/menu-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/menu-line.svg) no-repeat 50% 50%; + cursor: pointer; + position: relative; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(1); } [id$="nav_menu"]:hover { - background-color: var(--ae-icon-color); -} -[id$="nav_menu"]:hover::before { - background-color: var(--ae-icon-hover-color);; + background-color: var(--ae-icon-color); } -#clone_nav_menu{ - position:fixed; - z-index:10000; - left:1rem; - top: var(--ae-top-header-padding-top); +[id$="nav_menu"]:hover::before { + background-color: var(--ae-icon-hover-color); } + +#clone_nav_menu { + position: fixed; + z-index: 10000; + left: 1rem; + top: var(--ae-top-header-padding-top); +} + /***********************************/ /* Progressbar */ /***********************************/ .progressDiv { - background-color: var(--ae-main-bg-color) !important; - border-radius: 0 !important; - height: 16px; - position: fixed; - z-index: 10000; - top: 0px; - /* width: calc(100% - 16px) !important; */ - left: 0; - width: 100% !important; - /* border: 1px solid var(--ae-panel-border-color); */ + background-color: var(--ae-main-bg-color) !important; + border-radius: 0 !important; + height: 16px; + position: fixed; + z-index: 10000; + top: 0px; + /* width: calc(100% - 16px) !important; */ + left: 0; + width: 100% !important; + /* border: 1px solid var(--ae-panel-border-color); */ } .progressDiv .progress { - width: 0%; - height: 3px; - background-color: var(--ae-primary-color); - color: var(--ae-input-color); - line-height: 20px; - text-align: right; - border-radius: 0; - padding: 0 2px; - font-size: 12px; - white-space: nowrap; - font-weight: 600; + width: 0%; + height: 3px; + background-color: var(--ae-primary-color); + color: var(--ae-input-color); + line-height: 20px; + text-align: right; + border-radius: 0; + padding: 0 2px; + font-size: 12px; + white-space: nowrap; + font-weight: 600; } /****************/ @@ -472,153 +529,153 @@ body { /****************/ .livePreview { - position: absolute !important; - width: calc(100% - (var(--ae-outside-gap-size) * 2)) !important; - max-height: calc(var(--ae-container-height-gap)) !important; - top: var(--ae-outside-gap-size); - left: var(--ae-outside-gap-size); - right: 0; - bottom: 0; - pointer-events: all; - overflow: hidden !important; - background-color: var(--ae-main-bg-color); - z-index: 300; - box-sizing: border-box; - padding: var(--ae-processing-border); - border: 1px solid var(--ae-panel-border-color); - height: calc(var(--ae-container-height-gap)) !important; + position: absolute !important; + width: calc(100% - (var(--ae-outside-gap-size) * 2)) !important; + max-height: calc(var(--ae-container-height-gap)) !important; + top: var(--ae-outside-gap-size); + left: var(--ae-outside-gap-size); + right: 0; + bottom: 0; + pointer-events: all; + overflow: hidden !important; + background-color: var(--ae-main-bg-color); + z-index: 300; + box-sizing: border-box; + padding: var(--ae-processing-border); + border: 1px solid var(--ae-panel-border-color); + height: calc(var(--ae-container-height-gap)) !important; } -.livePreview img{ - background-color: var(--ae-main-bg-color) !important; - border-radius:0 !important; - box-sizing: border-box; - position: absolute; - width: calc(100% - var(--ae-processing-border-double)); - height: calc(100% - var(--ae-processing-border-double)); - object-fit: scale-down; - margin:auto; - +.livePreview img { + background-color: var(--ae-main-bg-color) !important; + border-radius: 0 !important; + box-sizing: border-box; + position: absolute; + width: calc(100% - var(--ae-processing-border-double)); + height: calc(100% - var(--ae-processing-border-double)); + object-fit: scale-down; + margin: auto; } - - -div.svelte-10ogue4>*:first-child.livePreview { - border-radius:0 !important; - +div.svelte-10ogue4 > *:first-child.livePreview { + border-radius: 0 !important; } - @keyframes rotate { - 100% { - transform: scale(2) rotate(1turn); - } + 100% { + transform: scale(2) rotate(1turn); + } } - .livePreview:not(.dropPreview)::before { - content: ''; - position: absolute; - z-index: -2; - left: -50%; - top: -50%; - width: 200%; - height: 200%; - background-color: var(--ae-main-bg-color); - background-repeat: no-repeat; - background-position: 0 0; - background-image: conic-gradient(transparent, var(--ae-primary-color), transparent 30%); - animation: rotate 4s linear infinite; + content: ""; + position: absolute; + z-index: -2; + left: -50%; + top: -50%; + width: 200%; + height: 200%; + background-color: var(--ae-main-bg-color); + background-repeat: no-repeat; + background-position: 0 0; + background-image: conic-gradient( + transparent, + var(--ae-primary-color), + transparent 30% + ); + animation: rotate 4s linear infinite; } - -.livePreview::after { - content: ''; - position: absolute; - z-index: -1; - left: var(--ae-processing-border); - top: var(--ae-processing-border); - width: calc(100% - var(--ae-processing-border-double)); - height: calc(100% - var(--ae-processing-border-double)); - background: var(--ae-main-bg-color); - border-radius: 0; - +.livePreview::after { + content: ""; + position: absolute; + z-index: -1; + left: var(--ae-processing-border); + top: var(--ae-processing-border); + width: calc(100% - var(--ae-processing-border-double)); + height: calc(100% - var(--ae-processing-border-double)); + background: var(--ae-main-bg-color); + border-radius: 0; } .livePreview::before { - content: ''; - position: absolute; - z-index: -2; - left: -50%; - top: -50%; - width: 200%; - height: 200%; - background-color: var(--ae-main-bg-color); - background-repeat: no-repeat; - background-position: 0 0; - background-image: conic-gradient(transparent, var(--ae-primary-color), transparent 30%); - animation: rotate 4s linear infinite; + content: ""; + position: absolute; + z-index: -2; + left: -50%; + top: -50%; + width: 200%; + height: 200%; + background-color: var(--ae-main-bg-color); + background-repeat: no-repeat; + background-position: 0 0; + background-image: conic-gradient( + transparent, + var(--ae-primary-color), + transparent 30% + ); + animation: rotate 4s linear infinite; } .livePreview.dropPreview::before, -.livePreview.dropPreview::after { - display:none; +.livePreview.dropPreview::after { + display: none; } - - .livePreview img { - object-position: center !important; - border-radius: 0 !important; - position: relative; - top: 0!important; - left: 0 !important; - width: calc(100%) !important; - height: calc(100%) !important; + object-position: center !important; + border-radius: 0 !important; + position: relative; + top: 0 !important; + left: 0 !important; + width: calc(100%) !important; + height: calc(100%) !important; } .livePreview img:nth-child(2) { - position: absolute !important; - top: 50% !important; - left: 50% !important; - transform: translateX(-50%) translateY(-50%) !important; - width: calc(100% - var(--ae-processing-border-double)) !important; - height: calc(100% - var(--ae-processing-border-double)) !important; + position: absolute !important; + top: 50% !important; + left: 50% !important; + transform: translateX(-50%) translateY(-50%) !important; + width: calc(100% - var(--ae-processing-border-double)) !important; + height: calc(100% - var(--ae-processing-border-double)) !important; } .livePreview.init, -.livePreview:not(.init) + div{ - display:none; +.livePreview:not(.init) + div { + display: none; } -.livePreview { - max-height: unset !important; - position: relative !important; - left: 0; - top: 0; - width: auto !important; +.livePreview { + max-height: unset !important; + position: relative !important; + left: 0; + top: 0; + width: auto !important; } -[id^="download_files_"] div.float:not(.float){ - position: absolute !important; + +[id^="download_files_"] div.float:not(.float) { + position: absolute !important; } + #image_buttons_txt2img + div, #image_buttons_img2img + div, -#image_buttons_extras_2img + div -{ - margin-top: calc(var(--ae-outside-gap-size) * -0.5); - margin-bottom: calc(var(--ae-outside-gap-size) * -0.5); +#image_buttons_extras_2img + div { + margin-top: calc(var(--ae-outside-gap-size) * -0.5); + margin-bottom: calc(var(--ae-outside-gap-size) * -0.5); } +button.svelte-1p4r00v { + background-color: var(--ae-input-bg-color); + color: var(--ae-icon-color); + border-radius: var(--ae-panel-border-radius); +} -button.svelte-1p4r00v{ - background-color: var(--ae-input-bg-color); - color: var(--ae-icon-color); - border-radius: var(--ae-panel-border-radius); -} -button.svelte-1p4r00v:hover{ - background-color: var(--ae-primary-color); - color: var(--ae-icon-hover-color); +button.svelte-1p4r00v:hover { + background-color: var(--ae-primary-color); + color: var(--ae-icon-hover-color); } + /* [id$="2img_gallery"] div.modify-upload{ position:absolute; } @@ -643,130 +700,136 @@ button.svelte-1p4r00v:hover{ [id$="2img_gallery"] .overflow-y-auto { min-height: auto !important; } */ -[id^="img2img_copy_to_"]{ - padding: 0 !important; - margin-bottom: var(--ae-outside-gap-size)!important; - background: transparent !important; +[id^="img2img_copy_to_"] { + padding: 0 !important; + margin-bottom: var(--ae-outside-gap-size) !important; + background: transparent !important; } -[id^="img2img_label_copy_to_"]{ - min-width:unset !important; - + +[id^="img2img_label_copy_to_"] { + min-width: unset !important; } -[id^="img2img_copy_to_"] > *{ - font-size: 100% !important; - white-space: nowrap; - align-self: center; + +[id^="img2img_copy_to_"] > * { + font-size: 100% !important; + white-space: nowrap; + align-self: center; } .image-container { - min-height: 25vh; -} -.spl-pane div.svelte-s6ybro, -.spl-pane .wrap.svelte-p4aq0j.svelte-p4aq0j -{ - display:none; -} -.spl-pane .wrap.svelte-yigbas { - position: unset; -} -.center.boundedheight.flex { - width: 100% !important; - height: 100% !important; + min-height: 25vh; } -div.svelte-1oo81b7>*:first-child, -div.svelte-1oo81b7>*:last-child{ - border-radius: 0 !important; +.spl-pane div.svelte-s6ybro, +.spl-pane .wrap.svelte-p4aq0j.svelte-p4aq0j { + display: none; +} + +.spl-pane .wrap.svelte-yigbas { + position: unset; +} + +.center.boundedheight.flex { + width: 100% !important; + height: 100% !important; +} + +div.svelte-1oo81b7 > *:first-child, +div.svelte-1oo81b7 > *:last-child { + border-radius: 0 !important; } /* small info upload*/ div.float { - background: var(--ae-main-bg-color)!important; - border: 0 !important; - color: var(--ae-primary-color)!important; + background: var(--ae-main-bg-color) !important; + border: 0 !important; + color: var(--ae-primary-color) !important; } -#img2img_inpaint_upload_tab > div:first-child{ - flex-direction:row; +#img2img_inpaint_upload_tab > div:first-child { + flex-direction: row; } + /****************/ /* Results View */ /****************/ -.main > .wrap > .contain > div{ - gap: 0px !important; +.main > .wrap > .contain > div { + gap: 0px !important; } -[id$="2img_results"] -{ - /*flex-direction: row !important;*/ - overflow-x: hidden !important; - max-height: calc(var(--ae-container-height)); - overflow-y: auto !important; - height: 100%; - flex-direction: column !important; - flex-wrap: nowrap !important; + +[id$="2img_results"] { + /*flex-direction: row !important;*/ + overflow-x: hidden !important; + max-height: calc(var(--ae-container-height)); + overflow-y: auto !important; + height: 100%; + flex-direction: column !important; + flex-wrap: nowrap !important; } [id$="2img_gallery"] { - display: flex; - flex-direction: row; - overflow: hidden !important; - margin-bottom:0!important; - + display: flex; + flex-direction: row; + overflow: hidden !important; + margin-bottom: 0 !important; } [id$="2img_gallery"] .grid-wrap, -[id$="2img_gallery"] .empty -{ - - width: 100%; -/* max-height: calc(var(--ae-container-height-gap) - 2px - var(--ae-gallery-bottom-height))!important; +[id$="2img_gallery"] .empty { + width: 100%; + /* max-height: calc(var(--ae-container-height-gap) - 2px - var(--ae-gallery-bottom-height))!important; min-height: calc(var(--ae-container-height-gap) - 2px - var(--ae-gallery-bottom-height))!important; */ - max-height: var(--ae-results-height)!important; - min-height: var(--ae-results-height)!important; - overflow-x: hidden !important; - -} -[id$="2img_gallery"] .preview.fixed-height{ - max-height:unset; - background-color: var(--ae-main-bg-color) !important; -} -[id$="2img_gallery"] .thumbnails{ - background-color: var(--ae-panel-bg-color); - height: 60px !important; -} -.thumbnails button{ - margin:auto; -} -.thumbnails { - justify-content: unset !important; -} -[id$="2img_gallery"] .thumbnail-small { - height: auto !important; -} -[id$="2img_gallery"] .thumbnail-small.selected{ - --ring-color: var(--ae-primary-color) !important; - border-color: var(--ae-primary-color) !important; -} - -[id$="2img_results"] .preview + img { - cursor: pointer; + max-height: var(--ae-results-height) !important; + min-height: var(--ae-results-height) !important; + overflow-x: hidden !important; } [id$="2img_gallery"] .preview.fixed-height { - height: auto; - min-height: auto; - width: 100%; - min-width: 100%; - max-height: calc(var(--container-height) - 4px); + max-height: unset; + background-color: var(--ae-main-bg-color) !important; +} + +[id$="2img_gallery"] .thumbnails { + background-color: var(--ae-panel-bg-color); + height: 60px !important; +} + +.thumbnails button { + margin: auto; +} + +.thumbnails { + justify-content: unset !important; +} + +[id$="2img_gallery"] .thumbnail-small { + height: auto !important; +} + +[id$="2img_gallery"] .thumbnail-small.selected { + --ring-color: var(--ae-primary-color) !important; + border-color: var(--ae-primary-color) !important; +} + +[id$="2img_results"] .preview + img { + cursor: pointer; +} + +[id$="2img_gallery"] .preview.fixed-height { + height: auto; + min-height: auto; + width: 100%; + min-width: 100%; + max-height: calc(var(--container-height) - 4px); } [id$="2img_override_settings_row"] > div.form.show, -[id$="2img_override_settings_row"] > div.form.show > [id$="2img_override_settings"] -{ - display:block !important; +[id$="2img_override_settings_row"] + > div.form.show + > [id$="2img_override_settings"] { + display: block !important; } - /* [id$="2img_gallery"] .overflow-y-auto>div:first-child { height: calc(var(--ae-container-total-height) - (var(--ae-outside-gap-size) * 2) - var(--ae-gallery-bottom-height) ); @@ -842,63 +905,68 @@ padding-right: 37px; min-height: 34px; } */ -.gradio-dropdown:not(.multiselect) .token-remove{ - display:none !important; +.gradio-dropdown:not(.multiselect) .token-remove { + display: none !important; } #top_row_sd_model_checkpoint div { - max-height:unset; - min-width: min(20px, 100%); + max-height: unset; + min-width: min(20px, 100%); } + #top_row_sd_model_checkpoint { - position: absolute; - z-index: 9999; - max-width: 290px; - right: 0; - max-height:34px; + position: absolute; + z-index: 9999; + max-width: 290px; + right: 0; + max-height: 34px; } + #top_row_sd_model_checkpoint > div, #row_setting_sd_model_checkpoint > div, #setting_sd_model_checkpoint > div, -#setting_sd_model_checkpoint -{ - border: 0; - padding: 0 !important; +#setting_sd_model_checkpoint { + border: 0; + padding: 0 !important; } #setting_sd_model_checkpoint > label > span, -#row_setting_sd_model_checkpoint > div:nth-child(2){ - display:none; +#row_setting_sd_model_checkpoint > div:nth-child(2) { + display: none; } -#setting_sd_model_checkpoint > label > .wrap > .wrap-inner:first-child{ - flex-wrap: nowrap; - padding: 0; - height: 32px; -} -#setting_sd_model_checkpoint > label > .wrap > .wrap-inner:first-child > span{ - white-space: nowrap; - overflow: hidden; -} -#top_row_sd_model_checkpoint button{ - min-width: unset; - height: 34px; - max-width: 34px; -} -#top_row_sd_model_checkpoint > div.form{ - overflow:visible; -} -#top_row_sd_model_checkpoint div{ - border-radius: var(--ae-panel-border-radius) !important +#setting_sd_model_checkpoint > label > .wrap > .wrap-inner:first-child { + flex-wrap: nowrap; + padding: 0; + height: 32px; } +#setting_sd_model_checkpoint > label > .wrap > .wrap-inner:first-child > span { + white-space: nowrap; + overflow: hidden; +} -div.svelte-b6y5bg, div.gradio-row>.form { - overflow: visible !important; +#top_row_sd_model_checkpoint button { + min-width: unset; + height: 34px; + max-width: 34px; +} + +#top_row_sd_model_checkpoint > div.form { + overflow: visible; +} + +#top_row_sd_model_checkpoint div { + border-radius: var(--ae-panel-border-radius) !important; +} + +div.svelte-b6y5bg, +div.gradio-row > .form { + overflow: visible !important; } .dropdown-arrow { - min-width: var(--size-5); + min-width: var(--size-5); } /* .gradio-dropdown{ @@ -906,45 +974,45 @@ div.svelte-b6y5bg, div.gradio-row>.form { } */ .gradio-dropdown input { - color: var(--ae-input-color) !important; + color: var(--ae-input-color) !important; } -ul.options{ - width:auto; - background: var(--ae-input-bg-color) !important; - border-radius: var(--ae-panel-border-radius) !important; - border-color: var(--ae-input-border-color); - border-width: var(--ae-border-width); - max-height:25vh !important; - padding:1px; - z-index:9999!important; - +ul.options { + width: auto; + background: var(--ae-input-bg-color) !important; + border-radius: var(--ae-panel-border-radius) !important; + border-color: var(--ae-input-border-color); + border-width: var(--ae-border-width); + max-height: 25vh !important; + padding: 1px; + z-index: 9999 !important; } -ul.options li{ - width: 100%!important; - display: inline-block!important; - overflow-wrap: break-word!important; - color: var(--ae-label-color) !important; +ul.options li { + width: 100% !important; + display: inline-block !important; + overflow-wrap: break-word !important; + color: var(--ae-label-color) !important; } -ul{ - margin: 0 !important; - list-style: none !important; +ul { + margin: 0 !important; + list-style: none !important; } -ul.options li:hover{ - background: var(--ae-input-color) !important; - color: var(--ae-input-bg-color) !important; +ul.options li:hover { + background: var(--ae-input-color) !important; + color: var(--ae-input-bg-color) !important; } -ul.options li.selected{ - background: var(--ae-panel-bg-color) !important; - color: var(--ae-label-color) !important; - pointer-events:none; +ul.options li.selected { + background: var(--ae-panel-bg-color) !important; + color: var(--ae-label-color) !important; + pointer-events: none; } -ul.options li span{ - display:none !important; + +ul.options li span { + display: none !important; } /* [id$="2img_override_settings"] .token span { @@ -959,57 +1027,61 @@ ul.options li span{ } */ div.token { - border-radius: var(--ae-panel-border-radius) !important; - background: var(--ae-input-bg-color) !important; - border: 1px solid var(--ae-input-border-color) !important; - padding: 3px !important; - margin: 1px; - padding-top: 4px !important; - color: var(--ae-input-color) !important; + border-radius: var(--ae-panel-border-radius) !important; + background: var(--ae-input-bg-color) !important; + border: 1px solid var(--ae-input-border-color) !important; + padding: 3px !important; + margin: 1px; + padding-top: 4px !important; + color: var(--ae-input-color) !important; } div.token-remove { - fill: var(--ae-label-color) !important; - border-radius: var(--radius-full) !important; - background: var(--ae-input-border-color) !important; - border: 1px solid var(--ae-input-border-color) !important; - /*border-radius: var(--ae-panel-border-radius);*/ + fill: var(--ae-label-color) !important; + border-radius: var(--radius-full) !important; + background: var(--ae-input-border-color) !important; + border: 1px solid var(--ae-input-border-color) !important; + /*border-radius: var(--ae-panel-border-radius);*/ } .block.gradio-accordion { - background-color: var(--ae-main-bg-color) !important; - /*padding-bottom: 0 !important;*/ + background-color: var(--ae-main-bg-color) !important; + /*padding-bottom: 0 !important;*/ } .block.gradio-accordion:hover { - border-color: var(--ae-primary-color) !important; + border-color: var(--ae-primary-color) !important; } - .block.gradio-accordion .label-wrap { - margin: calc(-1px + var(--ae-inside-padding-size) * -1); - width: auto; - padding: var(--ae-accordion-vertical-padding) var(--ae-accordion-horizontal-padding); - border-radius: var(--ae-panel-border-radius); - line-height: var(--ae-accordion-line-height); - color: var(--ae-label-color); - /*pointer-events: none !important;*/ + margin: calc(-1px + var(--ae-inside-padding-size) * -1); + width: auto; + padding: var(--ae-accordion-vertical-padding) + var(--ae-accordion-horizontal-padding); + border-radius: var(--ae-panel-border-radius); + line-height: var(--ae-accordion-line-height); + color: var(--ae-label-color); + /*pointer-events: none !important;*/ } + .block.gradio-accordion .hide + .open.label-wrap { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } + .block.gradio-accordion .label-wrap.open { - /*margin-bottom: var(--ae-inside-padding-size);*/ - /*margin-bottom:0;*/ + /*margin-bottom: var(--ae-inside-padding-size);*/ + /*margin-bottom:0;*/ } + .block.gradio-accordion > .gap.svelte-vt1mxs > div:first-child { - margin-top: calc(var(--ae-inside-padding-size) * 2) !important; + margin-top: calc(var(--ae-inside-padding-size) * 2) !important; } [id$="2img_extra_networks_row"].aside .gap.svelte-vt1mxs > div:first-child { - margin-top: 0 !important; + margin-top: 0 !important; } + /* [id$="_subdirs"] select{ width:100%; background-color:var(--ae-input-bg-color); @@ -1021,64 +1093,66 @@ div.token-remove { } */ .block.gradio-accordion:hover .label-wrap { - color: var(--ae-main-bg-color) !important; - background-color: var(--ae-primary-color) !important; + color: var(--ae-main-bg-color) !important; + background-color: var(--ae-primary-color) !important; } .block.gradio-accordion > div.wrap { - pointer-events: all !important; - cursor: pointer; - width: auto !important; - height: var(--ae-accordion-header-height)!important; - z-index: 1; - left: 0 !important; - top: 0 !important; - opacity: 0 !important; - + pointer-events: all !important; + cursor: pointer; + width: auto !important; + height: var(--ae-accordion-header-height) !important; + z-index: 1; + left: 0 !important; + top: 0 !important; + opacity: 0 !important; } -.form>.gradio-row>.form{ - border:0 !important; +.form > .gradio-row > .form { + border: 0 !important; } + .padded { - padding: var(--ae-inside-padding-size) !important + padding: var(--ae-inside-padding-size) !important; } + .gradio-row, .gap { - gap: var(--ae-outside-gap-size) !important + gap: var(--ae-outside-gap-size) !important; } + button.tool { - max-width: 34px; - min-height: 34px; - min-width: 34px !important; + max-width: 34px; + min-height: 34px; + min-width: 34px !important; } div.block.padded { - /*box-shadow: var(--block-shadow);*/ - border-width: var(--ae-border-width); - border-color: var(--ae-panel-border-color); - border-radius: var(--ae-panel-border-radius) !important; - background: var(--ae-panel-bg-color); - /*width: 100%; + /*box-shadow: var(--block-shadow);*/ + border-width: var(--ae-border-width); + border-color: var(--ae-panel-border-color); + border-radius: var(--ae-panel-border-radius) !important; + background: var(--ae-panel-bg-color); + /*width: 100%; line-height: var(--line-sm);*/ } -fieldset.block.padded -{ - background-color: var(--ae-panel-bg-color) !important; - /*border-width: var(--ae-border-width) !important;*/ - /*border-color: var(--ae-panel-border-color) !important;*/ - border-radius: var(--ae-panel-border-radius) !important; + +fieldset.block.padded { + background-color: var(--ae-panel-bg-color) !important; + /*border-width: var(--ae-border-width) !important;*/ + /*border-color: var(--ae-panel-border-color) !important;*/ + border-radius: var(--ae-panel-border-radius) !important; } div.svelte-b6y5bg, -div.gradio-row>.form{ - /*box-shadow: var(--block-shadow);*/ - border-width: var(--ae-border-width) !important; - border-color: var(--ae-panel-border-color) !important; - border-radius: var(--ae-panel-border-radius) !important; - background: var(--ae-panel-border-color) !important; - box-shadow: none !important; - /*width: 100%; +div.gradio-row > .form { + /*box-shadow: var(--block-shadow);*/ + border-width: var(--ae-border-width) !important; + border-color: var(--ae-panel-border-color) !important; + border-radius: var(--ae-panel-border-radius) !important; + background: var(--ae-panel-border-color) !important; + box-shadow: none !important; + /*width: 100%; line-height: var(--line-sm);*/ } @@ -1089,21 +1163,21 @@ div.gradio-row>.form{ .block.gradio-radio, .block.gradio-checkboxgroup, .block.gradio-number, -.block.gradio-colorpicker -{ - border-width: 0; - box-shadow: none !important; +.block.gradio-colorpicker { + border-width: 0; + box-shadow: none !important; } -.gradio-dropdown input{ - margin:0 !important; +.gradio-dropdown input { + margin: 0 !important; } -.block.gradio-dropdown span.single-select{ - color: var(--ae-input-color)!important; +.block.gradio-dropdown span.single-select { + color: var(--ae-input-color) !important; } + .dropdown-arrow.svelte-p5edak { - fill: var(--ae-input-color)!important; + fill: var(--ae-input-color) !important; } .wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label, @@ -1111,338 +1185,358 @@ div.gradio-row>.form{ button.tool.secondary, button.secondary, .gradio-dropdown label .wrap, -input[type=text], -input[type=password], -input[type=email], +input[type="text"], +input[type="password"], +input[type="email"], textarea, -input[type=number] { - outline: none!important; - box-shadow: none!important; - border: 1px solid var(--ae-input-border-color)!important; - border-radius: var(--ae-panel-border-radius)!important; - background: var(--ae-input-bg-color)!important; - color: var(--ae-input-color)!important; - text-align: left!important; - min-width: unset; +input[type="number"] { + outline: none !important; + box-shadow: none !important; + border: 1px solid var(--ae-input-border-color) !important; + border-radius: var(--ae-panel-border-radius) !important; + background: var(--ae-input-bg-color) !important; + color: var(--ae-input-color) !important; + text-align: left !important; + min-width: unset; } button.tool.secondary, -button.secondary{ - text-align: center!important; +button.secondary { + text-align: center !important; } .gradio-container-3-28-1 .prose * { - color: var(--ae-label-color); + color: var(--ae-label-color); } .gradio-container-3-23-0 .prose code { - background-color: var(--ae-panel-bg-color); - border-radius: var(--ae-panel-bg-color); - border: 1px solid var(--ae-panel-border-color); - padding: 0 !important; - margin: 0!important; - white-space: break-spaces !important; + background-color: var(--ae-panel-bg-color); + border-radius: var(--ae-panel-bg-color); + border: 1px solid var(--ae-panel-border-color); + padding: 0 !important; + margin: 0 !important; + white-space: break-spaces !important; } .wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label, .wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label, -.gradio-container-3-28-1 [type=text], -.gradio-container-3-28-1 [type=email], -.gradio-container-3-28-1 [type=url], -.gradio-container-3-28-1 [type=password], -.gradio-container-3-28-1 [type=number], -.gradio-container-3-28-1 [type=date], -.gradio-container-3-28-1 [type=datetime-local], -.gradio-container-3-28-1 [type=month], -.gradio-container-3-28-1 [type=search], -.gradio-container-3-28-1 [type=tel], -.gradio-container-3-28-1 [type=time], -.gradio-container-3-28-1 [type=week], -.gradio-container-3-28-1 [multiple], -.gradio-container-3-28-1 textarea, +.gradio-container-3-28-1 [type="text"], +.gradio-container-3-28-1 [type="email"], +.gradio-container-3-28-1 [type="url"], +.gradio-container-3-28-1 [type="password"], +.gradio-container-3-28-1 [type="number"], +.gradio-container-3-28-1 [type="date"], +.gradio-container-3-28-1 [type="datetime-local"], +.gradio-container-3-28-1 [type="month"], +.gradio-container-3-28-1 [type="search"], +.gradio-container-3-28-1 [type="tel"], +.gradio-container-3-28-1 [type="time"], +.gradio-container-3-28-1 [type="week"], +.gradio-container-3-28-1 [multiple], +.gradio-container-3-28-1 textarea, .gradio-container-3-28-1 select { - line-height: 1.5rem; - padding: 4px 8px; -} -.gradio-container-3-28-1 [type=checkbox], .gradio-container-3-28-1 [type=radio] { - background-color: var(--ae-input-bg-color); - border: 1px solid var(--ae-input-border-color); - border-radius: var(--ae-panel-border-radius); -} -.gradio-container-3-28-1 [type=checkbox]:checked, .gradio-container-3-28-1 [type=radio]:checked { - background-color: var(--ae-primary-color); + line-height: 1.5rem; + padding: 4px 8px; } -.gradio-slider input[type=number] { - padding-right: 2px!important; - max-height:24px !important; - width: 64px !important; - margin-bottom: var(--ae-inside-padding-size); +.gradio-container-3-28-1 [type="checkbox"], +.gradio-container-3-28-1 [type="radio"] { + background-color: var(--ae-input-bg-color); + border: 1px solid var(--ae-input-border-color); + border-radius: var(--ae-panel-border-radius); } - -.gradio-dropdown:not(.multiselect) .wrap-inner{ - padding: 0px 5px !important; - height:32px !important; +.gradio-container-3-28-1 [type="checkbox"]:checked, +.gradio-container-3-28-1 [type="radio"]:checked { + background-color: var(--ae-primary-color); } + +.gradio-slider input[type="number"] { + padding-right: 2px !important; + max-height: 24px !important; + width: 64px !important; + margin-bottom: var(--ae-inside-padding-size); +} + +.gradio-dropdown:not(.multiselect) .wrap-inner { + padding: 0px 5px !important; + height: 32px !important; +} + fieldset span, -label > span{ - color:var(--ae-label-color) !important; -} -.gradio-radio label > span{ - color:var(--ae-input-color) !important; +label > span { + color: var(--ae-label-color) !important; } -input[type=number], -input[type=text], -input[type=password], -input[type=email], -textarea{ - height:34px !important; -} -.gradio-slider input[type=range] { - align-self: flex-start; +.gradio-radio label > span { + color: var(--ae-input-color) !important; } -span.svelte-1gfkn6j:not(.has-info) { - margin-top: 1px; - margin-left: 1px; - margin-bottom: var(--ae-inside-padding-size); +input[type="number"], +input[type="text"], +input[type="password"], +input[type="email"], +textarea { + height: 34px !important; +} + +.gradio-slider input[type="range"] { + align-self: flex-start; +} + +span.svelte-1gfkn6j:not(.has-info) { + margin-top: 1px; + margin-left: 1px; + margin-bottom: var(--ae-inside-padding-size); } /* input column alignment */ -label.block{ - display: flex; - justify-content: space-between; - flex-direction: column; - min-height: 100%; +label.block { + display: flex; + justify-content: space-between; + flex-direction: column; + min-height: 100%; } + div.block.padded.gradio-slider { - display: flex; - flex-wrap: wrap; - align-content: space-between; + display: flex; + flex-wrap: wrap; + align-content: space-between; } /* checkbox container */ .wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, .wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { - gap: var(--ae-inside-padding-size); -} -input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked, -input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked:hover, -input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked:focus { - border-color: var(--ae-input-focus-color); - background-image: var(--radio-circle); - background-color: var(--ae-primary-color); -} -input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked, -input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked:hover, -input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked:focus, -input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked, -input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked:hover, -input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked:focus { - border-color: var(--ae-input-focus-color); - background-image: var(--checkbox-check); - background-color: var(--ae-primary-color); + gap: var(--ae-inside-padding-size); } -input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70, -input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, -input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { - box-shadow: none; - border: 1px solid var(--ae-input-border-color); - border-radius: var(--ae-panel-border-radius); - background-color: var(--ae-input-bg-color); - line-height: var(--line-sm); +input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked, +input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked:hover, +input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked:focus { + border-color: var(--ae-input-focus-color); + background-image: var(--radio-circle); + background-color: var(--ae-primary-color); } -input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:hover, + +input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked, +input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked:hover, +input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked:focus, +input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked, +input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked:hover, +input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked:focus { + border-color: var(--ae-input-focus-color); + background-image: var(--checkbox-check); + background-color: var(--ae-primary-color); +} + +input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70, +input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, +input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { + box-shadow: none; + border: 1px solid var(--ae-input-border-color); + border-radius: var(--ae-panel-border-radius); + background-color: var(--ae-input-bg-color); + line-height: var(--line-sm); +} + +input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:hover, input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:hover, input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:hover { - border-color: var(--ae-input-focus-color); - background-color: var(--ae-input-bg-color); -} -label.svelte-1p9xokt>.svelte-1p9xokt+.svelte-1p9xokt, -label.svelte-1qxcj04>.svelte-1qxcj04+.svelte-1qxcj04 { - margin-right: var(--size-1); + border-color: var(--ae-input-focus-color); + background-color: var(--ae-input-bg-color); } -input.svelte-56zyyb{ - background:none; +label.svelte-1p9xokt > .svelte-1p9xokt + .svelte-1p9xokt, +label.svelte-1qxcj04 > .svelte-1qxcj04 + .svelte-1qxcj04 { + margin-right: var(--size-1); } + +input.svelte-56zyyb { + background: none; +} + .gradio-colorpicker label.block { - flex-direction: row; + flex-direction: row; } + /* .gradio-slider input[type=number] { align-self: self-end; } */ -.gradio-dropdown.multiselect .wrap-inner{ - padding: 0 !important; - margin: 0 !important; - gap: 0 !important; - min-height: 32px; +.gradio-dropdown.multiselect .wrap-inner { + padding: 0 !important; + margin: 0 !important; + gap: 0 !important; + min-height: 32px; } -[id$="2img_styles_row"].gradio-column > .form{ - flex-wrap: nowrap; - flex-direction: row; - border: 0; +[id$="2img_styles_row"].gradio-column > .form { + flex-wrap: nowrap; + flex-direction: row; + border: 0; } -[id$="2img_styles"]{ - padding:0 !important; + +[id$="2img_styles"] { + padding: 0 !important; } -[id$="2img_styles"] label{ - flex-direction: row; - display: flex; - flex-grow: 1; - background-color: var(--ae-main-bg-color) !important; + +[id$="2img_styles"] label { + flex-direction: row; + display: flex; + flex-grow: 1; + background-color: var(--ae-main-bg-color) !important; } -[id$="2img_styles"] label .wrap{ - flex-grow: 1; - border-top-right-radius: 0!important; - border-bottom-right-radius: 0!important; - margin-right: -2px; + +[id$="2img_styles"] label .wrap { + flex-grow: 1; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + margin-right: -2px; } -[id$="2img_styles"] label > span{ - padding-right: 5px; - margin-bottom:0!important; + +[id$="2img_styles"] label > span { + padding-right: 5px; + margin-bottom: 0 !important; } [id$="2img_token_counter"].block, -[id$="2img_negative_token_counter"].block -{ - position:absolute !important; - text-align:right; - z-index:99; +[id$="2img_negative_token_counter"].block { + position: absolute !important; + text-align: right; + z-index: 99; } -[id$="2img_actions_column"]{ - flex-grow: 0 !important; - flex-direction: column !important; - min-width: unset !important; + +[id$="2img_actions_column"] { + flex-grow: 0 !important; + flex-direction: column !important; + min-width: unset !important; } -[id$="2img_tools"] > .form.svelte-b6y5bg{ - background:0 !important; - border:0 !important; + +[id$="2img_tools"] > .form.svelte-b6y5bg { + background: 0 !important; + border: 0 !important; } [id$="2img_prompt"], -[id$="2img_neg_prompt"]{ - padding: 0 !important; - border: 0 !important; - background: 0; +[id$="2img_neg_prompt"] { + padding: 0 !important; + border: 0 !important; + background: 0; } -[id$="2img_token_counter"].block, +[id$="2img_token_counter"].block, [id$="2img_negative_token_counter"].block, [id$="2img_prompt"] label span, -[id$="2img_neg_prompt"] label span -{ - padding: 4px !important; - margin: 0 !important; - +[id$="2img_neg_prompt"] label span { + padding: 4px !important; + margin: 0 !important; } + [id$="2img_prompt"] textarea, -[id$="2img_neg_prompt"] textarea{ - margin: -1px; - width: calc(100% + 2px); +[id$="2img_neg_prompt"] textarea { + margin: -1px; + width: calc(100% + 2px); } /*frame*/ -.compact.svelte-vt1mxs, .panel.svelte-vt1mxs { - border: solid var(--ae-panel-border-width) var(--ae-panel-border-color); - border-radius: var(--ae-panel-border-radius); - background: var(--ae-panel-bg-color); - padding: var(--ae-outside-gap-size); - background: var(--ae-frame-bg-color); +.compact.svelte-vt1mxs, +.panel.svelte-vt1mxs { + border: solid var(--ae-panel-border-width) var(--ae-panel-border-color); + border-radius: var(--ae-panel-border-radius); + background: var(--ae-panel-bg-color); + padding: var(--ae-outside-gap-size); + background: var(--ae-frame-bg-color); } .compact.svelte-15lo0d8 { - border-radius: var(--ae-panel-border-radius); - background: var(--ae-panel-border-color); - padding: 0; - gap: 1px !important; + border-radius: var(--ae-panel-border-radius); + background: var(--ae-panel-border-color); + padding: 0; + gap: 1px !important; } [id$="-collapse"], -[id$="-collapse-one"] > div -{ - border:0!important; - margin:0!important; - padding:0!important; - border-radius:0!important; - background-color:transparent!important; - overflow: visible !important; - outline: 0 !important; - -} -[id$="-collapse-one"] > div.form -{ - background:0!important; - -} -[id$="-collapse-one"] > div.form > div -{ - padding:0!important; - -} -[id^="row_setting_"] -{ - gap:0px !important; +[id$="-collapse-one"] > div { + border: 0 !important; + margin: 0 !important; + padding: 0 !important; + border-radius: 0 !important; + background-color: transparent !important; + overflow: visible !important; + outline: 0 !important; } -[id^="row_setting_"] > div + div.form -{ - flex-grow:0; - min-width:unset; - +[id$="-collapse-one"] > div.form { + background: 0 !important; } +[id$="-collapse-one"] > div.form > div { + padding: 0 !important; +} -[id*="2img_seed_row"] label{ - flex-direction: row; +[id^="row_setting_"] { + gap: 0px !important; } -[id$="2img_seed"] label span{ - margin-bottom: 0 !important; - margin-right: 8px !important; - align-self: center; + +[id^="row_setting_"] > div + div.form { + flex-grow: 0; + min-width: unset; } -[id$="2img_group_seed"]{ - gap: 0!important; + +[id*="2img_seed_row"] label { + flex-direction: row; } -[id$="2img_subseed_show"] label{ - margin-top: 6px; + +[id$="2img_seed"] label span { + margin-bottom: 0 !important; + margin-right: 8px !important; + align-self: center; } -#subseed_show_box-collapse-all{ - margin-left: -1px; - min-width: unset; - flex-grow: 0; + +[id$="2img_group_seed"] { + gap: 0 !important; } -div.svelte-15lo0d8>.form>* { - min-width: min(100px,100%); + +[id$="2img_subseed_show"] label { + margin-top: 6px; +} + +#subseed_show_box-collapse-all { + margin-left: -1px; + min-width: unset; + flex-grow: 0; +} + +div.svelte-15lo0d8 > .form > * { + min-width: min(100px, 100%); } label { - pointer-events:none!important; + pointer-events: none !important; } + label > * { - pointer-events:all; + pointer-events: all; } + span.ml-2 { - margin-left: 0 !important; - padding-left: var(--size-2); + margin-left: 0 !important; + padding-left: var(--size-2); } + /* gradio preloader*/ -.svelte-j1gjts { - pointer-events: none!important; - width: 5px!important; - height: 5px!important; - background-color: var(--ae-primary-color)!important; - top: 2px !important; - left: 2px !important; +.svelte-j1gjts { + pointer-events: none !important; + width: 5px !important; + height: 5px !important; + background-color: var(--ae-primary-color) !important; + top: 2px !important; + left: 2px !important; } -.svelte-j1gjts > * { -display:none !important; + +.svelte-j1gjts > * { + display: none !important; } /* [id$="-collapse-all"] div:not([class*="input"]) @@ -1455,550 +1549,572 @@ display:none !important; outline: 0 !important; } */ - -#txtimg_hr_finalres{ - min-height: 0 !important; - outline: 0; - position: absolute; - margin-top: 2px; - margin-left: 60px; +#txtimg_hr_finalres { + min-height: 0 !important; + outline: 0; + position: absolute; + margin-top: 2px; + margin-left: 60px; } -#txtimg_hr_finalres .resolution{ - font-weight: bold; +#txtimg_hr_finalres .resolution { + font-weight: bold; } -#txt2img_hr_upscaler{ - max-width:100%; -} -#txtimg_hr_finalres .prose.gradio-html{ - padding: var(--ae-inside-padding-size) !important; +#txt2img_hr_upscaler { + max-width: 100%; } -.gradio-container-3-28-1 .prose{ - min-height:unset !important; +#txtimg_hr_finalres .prose.gradio-html { + padding: var(--ae-inside-padding-size) !important; +} + +.gradio-container-3-28-1 .prose { + min-height: unset !important; } #header-top > .gradio-row:not(#nav_menu, #nav_menu_header_tabs) { - margin-left: max(4px, var(--ae-outside-gap-size)); -} -#header-top{ - gap: 1px !important; + margin-left: max(4px, var(--ae-outside-gap-size)); } -[id$=_prompt_image] + div { - gap: 1px !important; +#header-top { + gap: 1px !important; } + +[id$="_prompt_image"] + div { + gap: 1px !important; +} + [id*="2img_toprow"], [id*="2img_toprow"] .gap { - gap: 1px !important; + gap: 1px !important; } + .script-group, -[id*="_sub-group"]{ - padding: var(--ae-inside-padding-size) !important; - background-color: var(--ae-subgroup-bg-color) !important; - border-radius: var(--ae-panel-border-radius); - border: 1px solid var(--ae-subpanel-border-color) !important; - margin-top: calc(-1px + var(--ae-outside-gap-size) * -1); - padding-bottom: calc(var(--ae-inside-padding-size) + 2px) !important; +[id*="_sub-group"] { + padding: var(--ae-inside-padding-size) !important; + background-color: var(--ae-subgroup-bg-color) !important; + border-radius: var(--ae-panel-border-radius); + border: 1px solid var(--ae-subpanel-border-color) !important; + margin-top: calc(-1px + var(--ae-outside-gap-size) * -1); + padding-bottom: calc(var(--ae-inside-padding-size) + 2px) !important; } + .script-group > div, -[id*="_sub-group"] > div{ - border-radius: var(--ae-subpanel-border-radius); +[id*="_sub-group"] > div { + border-radius: var(--ae-subpanel-border-radius); } + .script-group div.block, -[id*="_sub-group"] div.block{ - - background-color: var(--ae-subpanel-bg-color) !important; - border: 0px solid var(--ae-subpanel-border-color) !important; - border-radius: var(--ae-subpanel-border-radius) !important; - margin: 0px; - +[id*="_sub-group"] div.block { + background-color: var(--ae-subpanel-bg-color) !important; + border: 0px solid var(--ae-subpanel-border-color) !important; + border-radius: var(--ae-subpanel-border-radius) !important; + margin: 0px; } + .script-group fieldset.block.padded, -.script-group div.gradio-row>.form, -[id*="_sub-group"] div.gradio-row>.form{ - background-color: var(--ae-subpanel-bg-color) !important; - border-radius: var(--ae-subpanel-border-radius) !important; +.script-group div.gradio-row > .form, +[id*="_sub-group"] div.gradio-row > .form { + background-color: var(--ae-subpanel-bg-color) !important; + border-radius: var(--ae-subpanel-border-radius) !important; } -[id*="_sub-group"] div.gradio-row:not(:first-child) { - /*margin-top: -1px;*/ -} .script-group div.svelte-b6y5bg, -.script-group div.gradio-row>.form, -[id*="_sub-group"] div.gradio-row>.form { - border: 0; - padding: 1px; - background: var(--ae-subpanel-border-color)/*transparent*/ !important; - gap: 1px !important; - margin:0px; - border-radius: var(--ae-subpanel-border-radius) !important; +.script-group div.gradio-row > .form, +[id*="_sub-group"] div.gradio-row > .form { + border: 0; + padding: 1px; + background: var(--ae-subpanel-border-color) /*transparent*/ !important; + gap: 1px !important; + margin: 0px; + border-radius: var(--ae-subpanel-border-radius) !important; } -[id*="_sub-group"] div.gradio-row>.form { - border: 0; - padding: 0px; +[id*="_sub-group"] div.gradio-row > .form { + border: 0; + padding: 0px; } -.compact.svelte-15lo0d8, .panel.svelte-15lo0d8 { - border-radius: var(--ae-panel-border-radius); - background: var(--ae-panel-bg-color); - padding: 0; - gap:1px !important; + +.compact.svelte-15lo0d8, +.panel.svelte-15lo0d8 { + border-radius: var(--ae-panel-border-radius); + background: var(--ae-panel-bg-color); + padding: 0; + gap: 1px !important; } .script-group .compact, -.script-group .gradio-column{ -gap:1px !important; -padding:0; +.script-group .gradio-column { + gap: 1px !important; + padding: 0; } + .script-group button.secondary, .script-group .wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label, .script-group .wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label, -.script-group input[type=checkbox], -.script-group input[type=radio]{ - border-radius: var(--ae-subpanel-border-radius) !important; +.script-group input[type="checkbox"], +.script-group input[type="radio"] { + border-radius: var(--ae-subpanel-border-radius) !important; } -.script-group div.block.gradio-html{ - background: transparent !important; + +.script-group div.block.gradio-html { + background: transparent !important; } -.script-group input[type=number], -.script-group input[type=range], + +.script-group input[type="number"], +.script-group input[type="range"], .script-group textarea, .script-group button.tool.secondary, [id*="_sub-group"] button.tool.secondary, -[id*="_sub-group"] input:not(.border-none) { - border-radius: var(--ae-subpanel-border-radius) !important; - border: 1px solid var(--ae-subgroup-input-border-color) !important; - background: var(--ae-subgroup-input-bg-color)!important; - color: var(--ae-subgroup-input-color)!important; +[id*="_sub-group"] input:not(.border-none) { + border-radius: var(--ae-subpanel-border-radius) !important; + border: 1px solid var(--ae-subgroup-input-border-color) !important; + background: var(--ae-subgroup-input-bg-color) !important; + color: var(--ae-subgroup-input-color) !important; } -.script-group button.tool..secondary:hover, -button.tool.secondary:hover, -[id*="_sub-group"] button.tool.secondary:hover { - background: var(--ae-icon-color)!important; - /*color: var(--ae-subgroup-input-color)!important;*/ + +.script-group button.tool.secondary:hover, +button.tool.secondary:hover, +[id*="_sub-group"] button.tool.secondary:hover { + background: var(--ae-icon-color) !important; + /*color: var(--ae-subgroup-input-color)!important;*/ } + #png_2img_results button.secondary:hover, [id^="image_buttons_"] button.secondary:hover { - background: var(--ae-icon-color) !important; - color: var(--ae-icon:hover-color) !important; + background: var(--ae-icon-color) !important; + color: var(--ae-icon-hover-color) !important; } + .script-group > div.gradio-row, [id*="_sub-group"] > div.gradio-row { - gap: 1px !important; - border: 1px solid var(--ae-subpanel-border-color) !important; - margin: -1px; - background: var(--ae-subpanel-border-color) !important; - border-radius: var(--ae-subpanel-border-radius) !important; - /* padding: var(--ae-inside-padding-size); */ - position: relative; - left: 1px; - top: 1px; + gap: 1px !important; + border: 1px solid var(--ae-subpanel-border-color) !important; + margin: -1px; + background: var(--ae-subpanel-border-color) !important; + border-radius: var(--ae-subpanel-border-radius) !important; + /* padding: var(--ae-inside-padding-size); */ + position: relative; + left: 1px; + top: 1px; } -[id*="_sub-group"] div.gradio-row:not(:last-child)>.form { - /*margin-bottom: 1px;*/ +[id*="_sub-group"] div.gradio-row:not(:last-child) > .form { + /*margin-bottom: 1px;*/ } + .script-group + div.form, [id*="_group_"] + div.form { - margin-top: calc( -1px + var(--ae-outside-gap-size) * -1); + margin-top: calc(-1px + var(--ae-outside-gap-size) * -1); } -[id$="-collapse-all"] div:not([class*="wrap"]) -{ - border:none !important; - margin:0!important; - padding:0!important; - border-radius:0!important; - background-color:transparent!important; - outline: 0 !important; +[id$="-collapse-all"] div:not([class*="wrap"]) { + border: none !important; + margin: 0 !important; + padding: 0 !important; + border-radius: 0 !important; + background-color: transparent !important; + outline: 0 !important; +} +[id*="_sub-group"] [id$="-collapse-all"] > div.form { + background-color: transparent !important; } -[id*="_sub-group"] [id$="-collapse-all"] > div.form{ - background-color:transparent!important; -} + .script-group .gradio-dropdown label .wrap, [id*="_sub-group"] .gradio-dropdown label .wrap { - border-radius: var(--ae-subpanel-border-radius) !important; - background: var(--ae-subgroup-input-bg-color)!important; - border-color: var(--ae-subgroup-input-border-color) !important; + border-radius: var(--ae-subpanel-border-radius) !important; + background: var(--ae-subgroup-input-bg-color) !important; + border-color: var(--ae-subgroup-input-border-color) !important; } + .script-group .gradio-dropdown label .wrap span, [id*="_sub-group"] .gradio-dropdown label .wrap span { - color: var(--ae-subgroup-input-color) !important; + color: var(--ae-subgroup-input-color) !important; } + .script-group .dropdown-arrow, [id*="_sub-group"] .dropdown-arrow { - fill: var(--ae-subgroup-input-color)!important; + fill: var(--ae-subgroup-input-color) !important; } -[id*="_controls_sub-group"]{ - border: 0 !important; - padding-left: 0 !important; - padding-right: 0 !important; - padding-bottom: 2px !important; -} -.script-alwayson-group .gradio-html + .form{ - padding-top: 1px; +[id*="_controls_sub-group"] { + border: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + padding-bottom: 2px !important; } -#mode_img2img > .form{ - border: 0 !important; +.script-alwayson-group .gradio-html + .form { + padding-top: 1px; +} + +#mode_img2img > .form { + border: 0 !important; } [id$="-collapse"] button, [id$="-collapse-one"] button, -[id$="-collapse-all"] button -{ - align-self: flex-end; -} -[id$="-collapse"] fieldset, -[id$="-collapse-one"] fieldset, -[id$="-collapse-all"] fieldset -{ - padding:0; -} -.block.gradio-file, -.block.gradio-image{ - border-radius: 0; - background: var(--ae-input-bg-color); - border-color: var(--ae-input-border-color); +[id$="-collapse-all"] button { + align-self: flex-end; } -.gradio-tabs{ - background-color: var(--ae-main-bg-color); - padding: var(--ae-inside-padding-size); - border-radius: var(--ae-panel-border-radius); +[id$="-collapse"] fieldset, +[id$="-collapse-one"] fieldset, +[id$="-collapse-all"] fieldset { + padding: 0; } -.gradio-accordion .gradio-tabs{ - padding: 0; + +.block.gradio-file, +.block.gradio-image { + border-radius: 0; + background: var(--ae-input-bg-color); + border-color: var(--ae-input-border-color); } -[id$="2img_res_switch_btn"]{ - margin:-1px !important; + +.gradio-tabs { + background-color: var(--ae-main-bg-color); + padding: var(--ae-inside-padding-size); + border-radius: var(--ae-panel-border-radius); } -#dim_controls > div:nth-child(2){ - margin-top:-1px !important; - margin-bottom:-1px !important; + +.gradio-accordion .gradio-tabs { + padding: 0; +} + +[id$="2img_res_switch_btn"] { + margin: -1px !important; +} + +#dim_controls > div:nth-child(2) { + margin-top: -1px !important; + margin-bottom: -1px !important; } /***************************/ /* Generate Interrupt Skip */ /***************************/ -.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt{ - display: none; +.gradio-button.generate-box-skip, +.gradio-button.generate-box-interrupt { + display: none; } button.secondary, button.primary { - border: 1px solid var(--ae-input-border-color) !important; - border-radius: var(--ae-panel-border-radius) !important; - background: var(--ae-input-bg-color) !important; - color: var(--ae-input-color) !important; + border: 1px solid var(--ae-input-border-color) !important; + border-radius: var(--ae-panel-border-radius) !important; + background: var(--ae-input-bg-color) !important; + color: var(--ae-input-color) !important; } -button.secondary:hover, -button.primary:hover { - background: var(--ae-primary-color) !important; - color: var(--ae-input-bg-color) !important; +button.secondary:hover, +button.primary:hover { + background: var(--ae-primary-color) !important; + color: var(--ae-input-bg-color) !important; } [id$="_generate"], -[id$="2img_settings"] > button:first-child -{ - min-height: var(--ae-generate-button-height); +[id$="2img_settings"] > button:first-child { + min-height: var(--ae-generate-button-height); } [id$="_interrupt"].secondary, -[id$="_skip"].secondary -{ - background-color: var(--ae-input-bg-color); - position: absolute; - width: 50%; - height: 100%; - display: none; +[id$="_skip"].secondary { + background-color: var(--ae-input-bg-color); + position: absolute; + width: 50%; + height: 100%; + display: none; } [id$="_interrupt"].secondary:hover, -[id$="_skip"].secondary:hover -{ - background-color: var(--ae-cancel-color) !important; +[id$="_skip"].secondary:hover { + background-color: var(--ae-cancel-color) !important; } -[id$="2img_generate_box"] -{ - position: relative; +[id$="2img_generate_box"] { + position: relative; } -[id$="_interrupt"] -{ - left: 0; +[id$="_interrupt"] { + left: 0; } -[id$="_skip"] -{ - right: 0; +[id$="_skip"] { + right: 0; } -[id$="2img_generate_box"] button -{ - display: flex; +[id$="2img_generate_box"] button { + display: flex; } - -.inactive{ - opacity: 0.5; +.inactive { + opacity: 0.5; } .performance { - font-size: .85em; - color: var(--ae-primary-color) !important; + font-size: 0.85em; + color: var(--ae-primary-color) !important; } .performance p { - display: inline-block; + display: inline-block; } - .performance .time { - margin-right: 0; + margin-right: 0; } + /***************************/ /* Context Menu */ /***************************/ - - - -.image-buttons button{ - min-width: auto; +.image-buttons button { + min-width: auto; } .infotext { - overflow-wrap: break-word; + overflow-wrap: break-word; } - - -#img2img_unused_scale_by_slider{ - visibility: hidden; - width: 0.5em; - max-width: 0.5em; - min-width: 0.5em; +#img2img_unused_scale_by_slider { + visibility: hidden; + width: 0.5em; + max-width: 0.5em; + min-width: 0.5em; } /* settings */ - .context-menu-items a:hover { - color: var(--ae-nav-bg-color); - background-color: var(--ae-primary-color); + color: var(--ae-nav-bg-color); + background-color: var(--ae-primary-color); } .context-menu-items { - list-style: none; - margin: 0; - padding: 0; + list-style: none; + margin: 0; + padding: 0; } .context-menu-items a { - display: block; - padding: 5px; - cursor: pointer; + display: block; + padding: 5px; + cursor: pointer; } /**********************/ /* splitter and views */ /**********************/ -[id$="2img_settings"]::before -{ - pointer-events: none; - content: ""; - position: absolute; - z-index: 1; - height: calc(var(--ae-container-height-gap) - var(--ae-generate-button-height)); - top: calc(var(--ae-generate-button-height) + (var(--ae-outside-gap-size) * 2.0)); - left: 0; - bottom: 0; - width: 100%; - background: linear-gradient(0deg, var(--ae-main-bg-color), transparent 2%, transparent 98%, var(--ae-main-bg-color) 100%); -} -[id$="2img_settings"] -{ - min-width: min(490px, 100%) !important; - flex: 1 1 0%; - /*display: block !important;*/ +[id$="2img_settings"]::before { + pointer-events: none; + content: ""; + position: absolute; + z-index: 1; + height: calc( + var(--ae-container-height-gap) - var(--ae-generate-button-height) + ); + top: calc( + var(--ae-generate-button-height) + (var(--ae-outside-gap-size) * 2) + ); + left: 0; + bottom: 0; + width: 100%; + background: linear-gradient( + 0deg, + var(--ae-main-bg-color), + transparent 2%, + transparent 98%, + var(--ae-main-bg-color) 100% + ); } -[id$="2img_settings_scroll"] -{ - /* need to calculate this */ - height: calc(var(--ae-container-height-gap) - var(--ae-generate-button-height) - (var(--ae-outside-gap-size))); - overflow-y: auto !important; - overflow-x: hidden; - /*margin-top: var(--ae-outside-gap-size);*/ - /*padding-left: 1px; +[id$="2img_settings"] { + min-width: min(490px, 100%) !important; + flex: 1 1 0%; + /*display: block !important;*/ +} + +[id$="2img_settings_scroll"] { + /* need to calculate this */ + height: calc( + var(--ae-container-height-gap) - var(--ae-generate-button-height) - + (var(--ae-outside-gap-size)) + ); + overflow-y: auto !important; + overflow-x: hidden; + /*margin-top: var(--ae-outside-gap-size);*/ + /*padding-left: 1px; padding-right: 1px;*/ - margin: 0; - padding-top: var(--ae-outside-gap-size) !important; + margin: 0; + padding-top: var(--ae-outside-gap-size) !important; } - - -[id$=_prompt_image] + div -{ - flex-wrap:nowrap; +[id$="_prompt_image"] + div { + flex-wrap: nowrap; } - -[id$="2img_settings"] -{ +[id$="2img_settings"] { flex-grow: 1; flex-shrink: 0; /*overflow-x: auto;*/ flex-basis: 50%; } -[id$="2img_results"] -{ +[id$="2img_results"] { flex-grow: 0 !important; flex-shrink: 1 !important; - flex-basis: 50%; + flex-basis: 50%; } -[id$=_splitter] { - flex-grow: 0!important; - flex-shrink: 0!important; - /* background-color: var(--ae-input-bg-color); */ - cursor: col-resize; - margin: 0 0 0 auto; - min-width: 1px!important; - max-width: 1px!important; - align-self: stretch; - /*border: 1px dashed var(--ae-input-bg-color);*/ - padding: 0px 2px !important; - background-image: linear-gradient(0deg, var(--ae-input-bg-color), var(--ae-input-bg-color) 60%, transparent 60%, transparent 100%); - background-size: 1px 5px; - background-repeat-x: no-repeat; - background-position: 2px; - border: none; +[id$="_splitter"] { + flex-grow: 0 !important; + flex-shrink: 0 !important; + /* background-color: var(--ae-input-bg-color); */ + cursor: col-resize; + margin: 0 0 0 auto; + min-width: 1px !important; + max-width: 1px !important; + align-self: stretch; + /*border: 1px dashed var(--ae-input-bg-color);*/ + padding: 0px 2px !important; + background-image: linear-gradient( + 0deg, + var(--ae-input-bg-color), + var(--ae-input-bg-color) 60%, + transparent 60%, + transparent 100% + ); + background-size: 1px 5px; + background-repeat-x: no-repeat; + background-position: 2px; + border: none; } -#tabs [id$="2img_results"]{ - flex:1 1 50%; + +#tabs [id$="2img_results"] { + flex: 1 1 50%; } + /***********/ /* PngInfo */ /***********/ -[id$="png_2img_settings"]::before -{ - display:none; +[id$="png_2img_settings"]::before { + display: none; } -[id$="png_2img_settings_scroll"] -{ - padding:0 !important; - height: calc(100vh - 170px); + +[id$="png_2img_settings_scroll"] { + padding: 0 !important; + height: calc(100vh - 170px); } [id$="png_2img_settings_scroll"] div[data-testid="image"] img { - max-height: unset !important; + max-height: unset !important; } -#pnginfo_image div[data-testid="image"] > div{ - max-height: calc(100vh - 175px) !important; - height: 100% !important; +#pnginfo_image div[data-testid="image"] > div { + max-height: calc(100vh - 175px) !important; + height: 100% !important; } -#pnginfo_image{ - height: 100% !important; + +#pnginfo_image { + height: 100% !important; } #pnginfo_image div[data-testid="image"] { - max-height: unset; - height: 100% !important; + max-height: unset; + height: 100% !important; } + [id$="png_2img_results"] > div:nth-child(3) { - display:none; + display: none; } -button.secondary{ - min-height:34px; - padding: 4px !important; + +button.secondary { + min-height: 34px; + padding: 4px !important; } + .thumbnail-item { - box-shadow: none !important; - border: 1px solid var(--ae-panel-border-color) !important; - border-radius: 0 !important; - background: var(--ae-main-bg-color)!important; - aspect-ratio: unset !important; - overflow: visible !important; - object-fit: contain !important; + box-shadow: none !important; + border: 1px solid var(--ae-panel-border-color) !important; + border-radius: 0 !important; + background: var(--ae-main-bg-color) !important; + aspect-ratio: unset !important; + overflow: visible !important; + object-fit: contain !important; } -.block.gradio-gallery.svelte-mppz8v{ - background: var(--ae-main-bg-color); - border-color: var(--ae-panel-border-color); + +.block.gradio-gallery.svelte-mppz8v { + background: var(--ae-main-bg-color); + border-color: var(--ae-panel-border-color); } + /*********/ /* Train */ /*********/ [id$="png_2img_results"] > div:nth-child(3) { - display:none; + display: none; } [id$="train_tabs_2img_settings"]::before { - - display:none; + display: none; } [id$="train_tabs_2img_settings"] .tabitem { - background-color:var(--ae-input-bg-color) !important; - border-radius: var(--ae-panel-border-radius) !important; - padding: var(--ae-outside-gap-size) !important; - max-width: 100%; + background-color: var(--ae-input-bg-color) !important; + border-radius: var(--ae-panel-border-radius) !important; + padding: var(--ae-outside-gap-size) !important; + max-width: 100%; } - [id$="train_tabs_2img_settings"] > div:first-child { margin: 0; - padding:0; - width:calc(100vw - (var(--ae-container-padding) * 2 ) - 4px); + padding: 0; + width: calc(100vw - (var(--ae-container-padding) * 2) - 4px); } [id$="train_tabs_2img_settings"] [id$="_2img_settings_scroll"] { - padding-top: 0 !important; - height: calc(var(--ae-container-height-gap) - var(--ae-generate-button-height) - (var(--ae-outside-gap-size)) + 50px); + padding-top: 0 !important; + height: calc( + var(--ae-container-height-gap) - var(--ae-generate-button-height) - + (var(--ae-outside-gap-size)) + 50px + ); } - #ti_2img_splitter, -#ti_2img_results{ - margin-top:28px; - max-height: calc(var(--ae-container-height) - 28px); +#ti_2img_results { + margin-top: 28px; + max-height: calc(var(--ae-container-height) - 28px); } +#ti_output { + padding: 0 !important; + border: 0; + background: 0; +} -#ti_output{ - padding:0 !important; - border: 0; - background:0; -} -#ti_output label span{ - display:none; +#ti_output label span { + display: none; } + #ti_error + div *:not(.progressDiv, .progress), -#ti_error + div{ -background:transparent !important; -border:0 !important; -padding: 4px 0; +#ti_error + div { + background: transparent !important; + border: 0 !important; + padding: 4px 0; } - #ti_error, #ti_output, -#ti_progress{ - padding: 0 8px !important; +#ti_progress { + padding: 0 8px !important; } -#ti_gallery_container .livePreview{ -height: calc(var(--ae-container-height-gap) - 150px) !important; + +#ti_gallery_container .livePreview { + height: calc(var(--ae-container-height-gap) - 150px) !important; } #tabs, @@ -2006,461 +2122,476 @@ height: calc(var(--ae-container-height-gap) - 150px) !important; #tab_settings, #tab_settings .tabs, [id$="train_tabs_2img_settings"] { - padding: 0 !important; + padding: 0 !important; } + #train_tabs_2img_settings .primary.gradio-button { - min-height: var(--ae-generate-button-height); + min-height: var(--ae-generate-button-height); } -#train_2img_settings_scroll .gradio-row.svelte-15lo0d8:not(:last-child) -{ - gap: 1px!important; + +#train_2img_settings_scroll .gradio-row.svelte-15lo0d8:not(:last-child) { + gap: 1px !important; } -[id^="train_process_"]{ - min-width: 180px!important; + +[id^="train_process_"] { + min-width: 180px !important; } + .gradio-html, #settings_result { - height: auto !important; - width: 100%; - color: var(--ae-primary-color); - padding: 0 !important; + height: auto !important; + width: 100%; + color: var(--ae-primary-color); + padding: 0 !important; } .block.svelte-mppz8v { - box-shadow: none; - border-color: var(--ae-panel-border-color); - border-radius: 0; - background: var(--ae-input-bg-color); + box-shadow: none; + border-color: var(--ae-panel-border-color); + border-radius: 0; + background: var(--ae-input-bg-color); } + #tabs { - flex-grow:1; + flex-grow: 1; } + /******************/ /* extra-network-cards */ /******************/ -[id$="2img_extra_networks_row"].aside -{ - position: fixed; - top: var(--ae-top-header-height); - width: 90%; - right: 0; - height: calc(100% - var(--ae-top-header-height)); - max-width: 50%; - min-width: 320px; - z-index: 9999; - transform: translateX(100%); - transition: all 0.25s ease 0s; - box-shadow: rgba(0,0,0,0) -30px 0 30px -30px; - padding: calc(1rem - var(--ae-outside-gap-size)); - background-color: var(--ae-main-bg-color) !important; +[id$="2img_extra_networks_row"].aside { + position: fixed; + top: var(--ae-top-header-height); + width: 90%; + right: 0; + height: calc(100% - var(--ae-top-header-height)); + max-width: 50%; + min-width: 320px; + z-index: 9999; + transform: translateX(100%); + transition: all 0.25s ease 0s; + box-shadow: rgba(0, 0, 0, 0) -30px 0 30px -30px; + padding: calc(1rem - var(--ae-outside-gap-size)); + background-color: var(--ae-main-bg-color) !important; + display: block !important; } -[id$="2img_extra_networks_row"].aside.open -{ - transform: translateX(0); - box-shadow: rgba(0,0,0,0.4) -30px 0 30px -30px; +[id$="2img_extra_networks_row"].aside.open { + transform: translateX(0); + box-shadow: rgba(0, 0, 0, 0.4) -30px 0 30px -30px; } -[id$="2img_extra_networks_row"].aside > div:first-child -{ - border: 0 !important; - padding-top: 0 !important; +[id$="2img_extra_networks_row"].aside > div:first-child { + border: 0 !important; + padding-top: 0 !important; } -[id$="2img_extra_networks_row"].aside > div:first-child > div:first-child -{ - display: none; - border: 0; +[id$="2img_extra_networks_row"].aside > div:first-child > div:first-child { + display: none; + border: 0; } + [id$="2img_extra_networks_row"].aside.\!hidden, -[id$="2img_extra_networks_row"].aside > div:first-child > div:last-child -{ - display: block !important; - padding-top: 0; -} -[id$="2img_extra_close"]{ - display:none; +[id$="2img_extra_networks_row"].aside > div:first-child > div:last-child { + display: block !important; + padding-top: 0; } -[id$="_subdirs"] button{ - max-height:34px; - margin-bottom: var(--ae-inside-padding-size) !important; +[id$="2img_extra_close"] { + display: none; } -[id$="2img_extra_networks_row"].aside .gradio-accordion > .label-wrap{ - display : none !important; + +[id$="_subdirs"] button { + max-height: 34px; + margin-bottom: var(--ae-inside-padding-size) !important; } + +[id$="2img_extra_networks_row"].aside .gradio-accordion > .label-wrap { + display: none !important; +} + /* [id$="_subdirs"] { margin-top: var(--ae-inside-padding-size) !important; } */ .extra-network-cards .nocards, .extra-network-thumbs .nocards { - margin: 1.25em .5em .5em; + margin: 1.25em 0.5em 0.5em; } .extra-network-cards .nocards h1, .extra-network-thumbs .nocards h1 { - font-size: 1.5em; - margin-bottom: 1em; + font-size: 1.5em; + margin-bottom: 1em; } .extra-network-cards .nocards li, .extra-network-thumbs .nocards li { - margin-left: .5em; + margin-left: 0.5em; } .extra-networks div { margin: 0; - padding:0; - border:0; + padding: 0; + border: 0; } .extra-networks > div:first-child > * { margin-bottom: 0; } -.extra-networks .tabitem .block.gradio-html{ - padding:0 !important; +.extra-networks .tabitem .block.gradio-html { + padding: 0 !important; } .extra-networks .search, [id$="2img_extra_refresh"], -[id$="2img_extra_close"] -{ - max-height: 32px; - margin-right: 4px; - border: 0; - flex-grow: 1; - padding-bottom: 0px !important; - min-height: 34px !important; -} -.extra-networks .search -{ - width:60%; +[id$="2img_extra_close"] { + max-height: 32px; + margin-right: 4px; + border: 0; + flex-grow: 1; + padding-bottom: 0px !important; + min-height: 34px !important; } -.extra-networks [id$="2img_extra_clear"] -{ - position: relative; - border-radius: 50%!important; - margin-left: -25px !important; - margin-top: 8px; - right: 8px; - height: fit-content; +.extra-networks .search { + width: 60%; } -.extra-networks + * -{ - display:none !important; +.extra-networks [id$="2img_extra_clear"] { + position: relative; + border-radius: 50% !important; + margin-left: -25px !important; + margin-top: 8px; + right: 8px; + height: fit-content; } + +.extra-networks + * { + display: none !important; +} + .extra-network-cards { - display: grid; - /* grid-template-columns: repeat(auto-fill, var(--ae-extra-networks-card-real-size)); + display: grid; + /* grid-template-columns: repeat(auto-fill, var(--ae-extra-networks-card-real-size)); overflow-y: auto; scroll-snap-type: y mandatory; */ - grid-gap: var(--ae-inside-padding-size); - - max-height: calc(var(--ae-extra-networks-height) * 1.33); - - grid-template-rows: repeat(var(--ae-extra-networks-visible-rows), calc(var(--ae-extra-networks-card-real-size) * 1.33)); - grid-auto-columns: var(--ae-extra-networks-card-real-size); - grid-auto-flow: column; - overflow-x: auto; - overflow-y: hidden; - scroll-snap-type: x mandatory; - + grid-gap: var(--ae-inside-padding-size); + + max-height: calc(var(--ae-extra-networks-height) * 1.33); + + grid-template-rows: repeat( + var(--ae-extra-networks-visible-rows), + calc(var(--ae-extra-networks-card-real-size) * 1.33) + ); + grid-auto-columns: var(--ae-extra-networks-card-real-size); + grid-auto-flow: column; + overflow-x: auto; + overflow-y: hidden; + scroll-snap-type: x mandatory; } -[id$="2img_extra_networks_row"].aside .extra-network-cards -{ - /*grid-template-columns: repeat(auto-fill, var(--ae-extra-networks-card-real-size)); */ - /*grid-template-columns: repeat(calc( var(--ae-extra-networks-card-size) * 4), calc( var(--ae-extra-networks-card-size) * 25%));*/ - grid-template-columns: repeat(auto-fit, minmax(calc(var(--ae-extra-networks-card-size) * 25%), 1fr)); - /* overflow-y: auto; */ - /* scroll-snap-type: y mandatory; */ - overflow-x: hidden; - grid-template-rows: auto; - grid-auto-flow: row; - max-height: unset; - /* max-height: calc(100vh - 230px); */ + +[id$="2img_extra_networks_row"].aside .extra-network-cards { + /*grid-template-columns: repeat(auto-fill, var(--ae-extra-networks-card-real-size)); */ + /*grid-template-columns: repeat(calc( var(--ae-extra-networks-card-size) * 4), calc( var(--ae-extra-networks-card-size) * 25%));*/ + grid-template-columns: repeat( + auto-fit, + minmax(calc(var(--ae-extra-networks-card-size) * 25%), 1fr) + ); + /* overflow-y: auto; */ + /* scroll-snap-type: y mandatory; */ + overflow-x: hidden; + grid-template-rows: auto; + grid-auto-flow: row; + max-height: unset; + /* max-height: calc(100vh - 230px); */ } -[id$="2img_extra_networks_row"].aside .tabitem -{ - overflow-y: auto; - overflow-x: hidden; - max-height: calc(100vh - 160px); - border-radius:0; + +[id$="2img_extra_networks_row"].aside .tabitem { + overflow-y: auto; + overflow-x: hidden; + max-height: calc(100vh - 160px); + border-radius: 0; } .extra-networks .tab-nav { - padding-bottom: var(--ae-inside-padding-size); + padding-bottom: var(--ae-inside-padding-size); } .extra-network-cards .card { - position: relative; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - z-index:1; - cursor: pointer; - border: 1px dashed var(--ae-panel-bg-color); - display: block !important; + position: relative; + background-size: cover; + background-repeat: no-repeat; + background-position: center; + z-index: 1; + cursor: pointer; + border: 1px dashed var(--ae-panel-bg-color); + display: block !important; } .extra-network-cards .card::after { - display: block; - content: ''; - padding-bottom: 133%; + display: block; + content: ""; + padding-bottom: 133%; } .extra-network-cards .card-container { - position:relative; + position: relative; } .extra-network-cards .image-icon { - background-color: var(--ae-panel-border-color); - -webkit-mask: url(./file=html/svg/image-icon.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/image-icon.svg) no-repeat 50% 50%; - position: absolute; - width: 24px; - height: 24px; - top: 50%; - left: 50%; - z-index: 0; - transform: translateX(-50%) translateY(-50%); + background-color: var(--ae-panel-border-color); + -webkit-mask: url(./file=html/svg/image-icon.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/image-icon.svg) no-repeat 50% 50%; + position: absolute; + width: 24px; + height: 24px; + top: 50%; + left: 50%; + z-index: 0; + transform: translateX(-50%) translateY(-50%); } -.card-container .description{ - display:none !important; + +.card-container .description { + display: none !important; } .extra-network-cards .card .actions { - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: .5em; - - background: rgba(0, 0, 0, .5); - /*box-shadow: 0 0 .25em .25em rgba(0, 0, 0, .5);*/ - /*text-shadow: 0 0 .2em #000;*/ - text-shadow: none; - box-shadow: none; + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: 0.5em; + + background: rgba(0, 0, 0, 0.5); + /*box-shadow: 0 0 .25em .25em rgba(0, 0, 0, .5);*/ + /*text-shadow: 0 0 .2em #000;*/ + text-shadow: none; + box-shadow: none; } .extra-network-cards .card .actions:hover { - background-color: rgba(0, 0, 0, .5); + background-color: rgba(0, 0, 0, 0.5); } .extra-network-cards .card .actions .name { - font-size: var(--ae-extra-networks-name-size); - font-weight: 700; - line-break: anywhere; - color: var(--ae-text-color); + font-size: var(--ae-extra-networks-name-size); + font-weight: 700; + line-break: anywhere; + color: var(--ae-text-color); } .extra-network-cards .card .actions:hover .additional { - display: block; + display: block; } .extra-network-cards .card ul { - margin: .25em 0 .75em .25em; - cursor: unset; + margin: 0.25em 0 0.75em 0.25em; + cursor: unset; } .extra-network-cards .card ul a { - cursor: pointer; + cursor: pointer; } -.extra-network-cards .card .metadata-button:before, .extra-network-thumbs .card .metadata-button:before{ - content: "🛈"; -} -.extra-network-cards .card .metadata-button, .extra-network-thumbs .card .metadata-button{ - display: none; - position: absolute; - right: 8px; - top: 8px; - color: white; - text-shadow: 2px 2px 3px black; - font-size: 22pt; -} -.extra-network-cards .card:hover .metadata-button, .extra-network-thumbs .card:hover .metadata-button{ - display: inline-block; -} -.extra-network-cards .card .metadata-button:hover, .extra-network-thumbs .card .metadata-button:hover{ - color: var(--ae-primary-color); +.extra-network-cards .card .metadata-button:before, +.extra-network-thumbs .card .metadata-button:before { + content: "🛈"; } -.extra-network-cards .card{ - overflow: hidden; +.extra-network-cards .card .metadata-button, +.extra-network-thumbs .card .metadata-button { + display: none; + position: absolute; + right: 8px; + top: 8px; + color: white; + text-shadow: 2px 2px 3px black; + font-size: 22pt; +} + +.extra-network-cards .card:hover .metadata-button, +.extra-network-thumbs .card:hover .metadata-button { + display: inline-block; +} + +.extra-network-cards .card .metadata-button:hover, +.extra-network-thumbs .card .metadata-button:hover { + color: var(--ae-primary-color); +} + +.extra-network-cards .card { + overflow: hidden; } .extra-network-cards .card img { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - object-fit: cover; - width: 100%; - height: 100%; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + object-fit: cover; + width: 100%; + height: 100%; } /************/ /* MainTabs */ /************/ .tabitem { - background-color: var(--ae-main-bg-color) !important; - padding: 0 !important; - border: 0 !important; + background-color: var(--ae-main-bg-color) !important; + padding: 0 !important; + border: 0 !important; } - -.tabs .border-b-2{ - border-color: var(--ae-input-bg-color); +.tabs .border-b-2 { + border-color: var(--ae-input-bg-color); } -.tabs>div>button { - padding: 8px; - padding-top: 0; - padding-right: 10px; - padding-left: 0; - color: var(--ae-label-color); - border: 0; - opacity:0.75; -} -.tabs>div>button:hover { - color: var(--ae-label-color); - opacity:1; +.tabs > div > button { + padding: 8px; + padding-top: 0; + padding-right: 10px; + padding-left: 0; + color: var(--ae-label-color); + border: 0; + opacity: 0.75; } -.tabs>div>.selected { - background: transparent; - border: 0; - color: var(--ae-primary-color); +.tabs > div > button:hover { + color: var(--ae-label-color); + opacity: 1; } + +.tabs > div > .selected { + background: transparent; + border: 0; + color: var(--ae-primary-color); +} + #tabs > div:first-child > button.selected { - color: var(--ae-primary-color); + color: var(--ae-primary-color); } /* offcanvas menu */ #tabs > div:first-child { - position: fixed; - z-index: 10000; - display: block; - width: 90%; - height: 100%; - background-color: var(--ae-nav-bg-color) !important; - top: 0; - padding-top: var(--ae-top-header-height); - left:0; - max-width: 320px; - transform: translateX(-100%); - transition: all 0.25s ease 0s; - box-shadow: rgba(0,0,0,0)-30px 0 30px 30px; - overflow-y: auto; - overflow-x: hidden; - + position: fixed; + z-index: 10000; + display: block; + width: 90%; + height: 100%; + background-color: var(--ae-nav-bg-color) !important; + top: 0; + padding-top: var(--ae-top-header-height); + left: 0; + max-width: 320px; + transform: translateX(-100%); + transition: all 0.25s ease 0s; + box-shadow: rgba(0, 0, 0, 0)-30px 0 30px 30px; + overflow-y: auto; + overflow-x: hidden; } #tabs > div:first-child.open { - transform: translateX(0); - box-shadow: rgba(0,0,0,0.4)-30px 0 30px 30px; + transform: translateX(0); + box-shadow: rgba(0, 0, 0, 0.4)-30px 0 30px 30px; } #tabs > div:first-child > button { - display: block; - width: 320px; - text-align: left; - background-color: transparent !important; - border-top: 2px !important; - border-bottom: 2px !important; - border-left: 0; - border-right: 0; - border-radius: 0 !important; - padding: 0px; - padding-left: 20px; - min-height: 37px; - color: var(--ae-nav-color); + display: block; + width: 320px; + text-align: left; + background-color: transparent !important; + border-top: 2px !important; + border-bottom: 2px !important; + border-left: 0; + border-right: 0; + border-radius: 0 !important; + padding: 0px; + padding-left: 20px; + min-height: 37px; + color: var(--ae-nav-color); } - - -#tabs > div:first-child > button:hover{ - - background-color: var(--ae-primary-color) !important; - color: var(--ae-main-bg-color) !important; +#tabs > div:first-child > button:hover { + background-color: var(--ae-primary-color) !important; + color: var(--ae-main-bg-color) !important; } -#tabs > div{ - padding:0; - border:0; + +#tabs > div { + padding: 0; + border: 0; } .tab-nav.svelte-1g805jl { - border: 0; - /*padding-bottom: var(--ae-inside-padding-size);*/ + border: 0; + /*padding-bottom: var(--ae-inside-padding-size);*/ } -#dim_controls > div:first-child{ - margin-bottom:max(7px, var(--ae-outside-gap-size)) !important; +#dim_controls > div:first-child { + margin-bottom: max(7px, var(--ae-outside-gap-size)) !important; } + input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { - background-color: var(--ae-panel-bg-color); + background-color: var(--ae-panel-bg-color); } label.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, -label.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04{ - pointer-events:all !important; +label.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { + pointer-events: all !important; } + /*****************/ /* Quicksettings */ /*****************/ /* offcanvas quicksettings menu */ #quicksettings_overflow { - position: fixed; - z-index: 9999; - display: block; - width: 90%; - background-color: var(--ae-main-bg-color) !important; - top: var(--ae-top-header-height); - bottom: 0px; - padding: 16px; - /*padding-top: 0px;*/ - right: 0; - max-width: 480px; - transform: translateX(100%); - transition: all 0.25s ease 0s; - box-shadow: rgba(0,0,0,0) -30px 0 30px -30px; - overflow: hidden; - padding-top: 0; - + position: fixed; + z-index: 9999; + display: block; + width: 90%; + background-color: var(--ae-main-bg-color) !important; + top: var(--ae-top-header-height); + bottom: 0px; + padding: 16px; + /*padding-top: 0px;*/ + right: 0; + max-width: 480px; + transform: translateX(100%); + transition: all 0.25s ease 0s; + box-shadow: rgba(0, 0, 0, 0) -30px 0 30px -30px; + overflow: hidden; + padding-top: 0; } #quicksettings_overflow_container { - overflow-y: auto; - height: calc(100% - 45px); + overflow-y: auto; + height: calc(100% - 45px); } #quicksettings_overflow.open { - transform: translateX(0); - box-shadow: rgba(0,0,0,0.4) -30px 0 30px -30px; + transform: translateX(0); + box-shadow: rgba(0, 0, 0, 0.4) -30px 0 30px -30px; } #quicksettings_overflow > div { - margin-bottom: var(--ae-outside-gap-size); + margin-bottom: var(--ae-outside-gap-size); } -#quicksettings_actions > div{ - background-color: transparent !important; - border: 0; +#quicksettings_actions > div { + background-color: transparent !important; + border: 0; } #quicksettings_actions > div > div, [id*="add2quick_"] { - min-width: unset !important; - flex-grow:0 !important; - padding: 4px !important; - border: 1px solid var(--ae-panel-border-color) !important; + min-width: unset !important; + flex-grow: 0 !important; + padding: 4px !important; + border: 1px solid var(--ae-panel-border-color) !important; } #quicksettings_actions > div label, @@ -2492,20 +2623,20 @@ label.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04{ /* Create a custom checkbox */ #quicksettings_actions > div span, [id*="add2quick_"] span { - position: absolute; - top: 0; - left: 0; - height: 25px; - width: 25px; - background-color: var(--ae-input-color); - padding: 0; - margin: 0 !important; - opacity:0.5; + position: absolute; + top: 0; + left: 0; + height: 25px; + width: 25px; + background-color: var(--ae-input-color); + padding: 0; + margin: 0 !important; + opacity: 0.5; } [id*="add2quick_"] span { - -webkit-mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%; + -webkit-mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%; } /* On mouse-over, add a grey background color */ @@ -2513,55 +2644,56 @@ label.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04{ #quicksettings_actions > div label:hover input ~ span, [id*="add2quick_"] label:hover input ~ span { background-color: var(--ae-icon-color); - opacity:1.0; + opacity: 1; } /* When the checkbox is checked, add a blue background */ [id*="add2quick_"] label input:checked ~ span { - -webkit-mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%; - background-color: var(--ae-input-color); - opacity:0.5; + -webkit-mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%; + background-color: var(--ae-input-color); + opacity: 0.5; } #quicksettings_draggable span { - -webkit-mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; + -webkit-mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; } #quicksettings_sort_asc span { - -webkit-mask: url(./file=html/svg/sort-asc.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/sort-asc.svg) no-repeat 50% 50%; + -webkit-mask: url(./file=html/svg/sort-asc.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/sort-asc.svg) no-repeat 50% 50%; } #quicksettings_sort_desc span { - -webkit-mask: url(./file=html/svg/sort-desc.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/sort-desc.svg) no-repeat 50% 50%; + -webkit-mask: url(./file=html/svg/sort-desc.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/sort-desc.svg) no-repeat 50% 50%; } #quicksettings_overflow_container > div.marker-bottom:after, #quicksettings_overflow_container > div.marker-top:before { - content: ' '; - display: inline-block; - background-color: var(--ae-primary-color); - width: 100%; - height: 2px; - position: relative; - margin-top: calc( (1px + ( var(--ae-outside-gap-size) / 2 )) * -1 ); -} -#quicksettings_overflow_container > div.marker-bottom:after { - top: calc(( var(--ae-outside-gap-size) / 2 ) - 1px); + content: " "; + display: inline-block; + background-color: var(--ae-primary-color); + width: 100%; + height: 2px; + position: relative; + margin-top: calc((1px + (var(--ae-outside-gap-size) / 2)) * -1); } -#quicksettings_overflow_container > div > div:nth-child(2), +#quicksettings_overflow_container > div.marker-bottom:after { + top: calc((var(--ae-outside-gap-size) / 2) - 1px); +} + +#quicksettings_overflow_container > div > div:nth-child(2), [id$="settings_2img_settings"] > div > div:nth-child(2) { - flex-shrink: 1 !important; - flex-grow: 0 !important; - flex-basis: 0% !important; - min-width: unset; - position: relative; - margin-left: -1px; + flex-shrink: 1 !important; + flex-grow: 0 !important; + flex-basis: 0% !important; + min-width: unset; + position: relative; + margin-left: -1px; } /* @@ -2570,34 +2702,35 @@ label.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04{ } */ -#quicksettings_overflow_container.no-scroll{ - /*overflow:hidden; +#quicksettings_overflow_container.no-scroll { + /*overflow:hidden; width:100%;*/ } + /* #quicksettings_actions{ margin-bottom:0 !important; } */ #quicksettings_overflow_container > div.dragging { - opacity:0.4 !important; + opacity: 0.4 !important; } -[draggable="true"] [id*="add2quick_"]{ - pointer-events: none; +[draggable="true"] [id*="add2quick_"] { + pointer-events: none; } [draggable="true"] [id*="add2quick_"] label input:checked ~ span { - -webkit-mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; - mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; - background-color: var(--ae-input-color); - opacity:0.5; + -webkit-mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; + mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; + background-color: var(--ae-input-color); + opacity: 0.5; } #quicksettings_actions > div label input:checked ~ span:after, #quicksettings_actions > div label:hover input:checked ~ span, [id*="add2quick_"] label:hover input:checked ~ span { - background-color: var(--ae-icon-color); - opacity:1.0; + background-color: var(--ae-icon-color); + opacity: 1; } /* Create the checkmark/indicator (hidden when not checked) */ @@ -2615,127 +2748,134 @@ label.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04{ } #ui_add2quick_setting_hidden_tabs, -[id*="add2quick_setting_quicksettings"]{ - display:none; +[id*="add2quick_setting_quicksettings"] { + display: none; } /****************/ /* modelmerger */ /****************/ #modelmerger_models { - gap: 1px !important; + gap: 1px !important; } -#modelmerger_config_method{ - margin: -1px; - width: auto; - margin-bottom: calc(var(--ae-outside-gap-size) * -1); + +#modelmerger_config_method { + margin: -1px; + width: auto; + margin-bottom: calc(var(--ae-outside-gap-size) * -1); } + /******************/ /* extensions tab */ /******************/ -#tabs_extensions .block{ - padding:0 !important; +#tabs_extensions .block { + padding: 0 !important; } #tab_extensions table { - border-collapse: collapse; - width: 100%; + border-collapse: collapse; + width: 100%; } #tab_extensions table td, #tab_extensions table th { - padding: .25em .5em; - border: 1px solid var(--ae-panel-border-color); + padding: 0.25em 0.5em; + border: 1px solid var(--ae-panel-border-color); } -#tab_extensions table input[type=checkbox] { - margin-right: .5em; - top: -3px; +#tab_extensions table input[type="checkbox"] { + margin-right: 0.5em; + top: -3px; } #tab_extensions button { - max-width: 16em; + max-width: 16em; } -#extensions_installed_top div{ - display:none; +#extensions_installed_top div { + display: none; } -#tab_extensions input[disabled=disabled] { - opacity: .5; +#tab_extensions input[disabled="disabled"] { + opacity: 0.5; } .extension-tag { - font-weight: 700; - font-size: 95%; + font-weight: 700; + font-size: 95%; } #available_extensions .info { - margin: 0; + margin: 0; } #available_extensions .date_added { - opacity: .85; - font-size: 90%; + opacity: 0.85; + font-size: 90%; } /*************/ /* settings */ /*************/ pre { - white-space: pre-wrap; /* css-3 */ - white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ - white-space: -pre-wrap; /* Opera 4-6 */ - white-space: -o-pre-wrap; /* Opera 7 */ - word-wrap: break-word; /* Internet Explorer 5.5+ */ + white-space: pre-wrap; + /* css-3 */ + white-space: -moz-pre-wrap; + /* Mozilla, since 1999 */ + white-space: -pre-wrap; + /* Opera 4-6 */ + white-space: -o-pre-wrap; + /* Opera 7 */ + word-wrap: break-word; + /* Internet Explorer 5.5+ */ } [id$="settings_2img_settings"] { - max-height: calc(100vh - 245px); - overflow-y: auto; + max-height: calc(100vh - 245px); + overflow-y: auto; } -[id$="settings_2img_settings"]::before -{ - display:none; +[id$="settings_2img_settings"]::before { + display: none; } #settings_result { - height: auto !important; - width: 100%; - text-align: center; - color:var(--ae-primary-color); - min-height: unset; -} -#settings_sd #row_setting_sd_model_checkpoint{ - display:none; + height: auto !important; + width: 100%; + text-align: center; + color: var(--ae-primary-color); + min-height: unset; } -#settings{ - display: block; +#settings_sd #row_setting_sd_model_checkpoint { + display: none; } -#settings > div{ - border: none; - margin-left: 10em; +#settings { + display: block; } -#settings > div.tab-nav{ - float: left; - display: block; - margin-left: 0; - width: 10em; +#settings > div { + border: none; + margin-left: 10em; } -#settings > div.tab-nav button{ - display: block; - border: none; - text-align: left; - white-space: initial; - height: 27px; - padding: 0px; - padding-right: 10px; - /* +#settings > div.tab-nav { + float: left; + display: block; + margin-left: 0; + width: 10em; +} + +#settings > div.tab-nav button { + display: block; + border: none; + text-align: left; + white-space: initial; + height: 27px; + padding: 0px; + padding-right: 10px; + /* width: 100%; padding: 5px; border: 1px solid var(--ae-frame-bg-color); @@ -2746,293 +2886,272 @@ pre { } #settings > div.tab-nav button.selected { - /*background: var(--ae-frame-bg-color);*/ - border-left: 2px solid; - border-radius: 0; - padding-left: 5px; + /*background: var(--ae-frame-bg-color);*/ + border-left: 2px solid; + border-radius: 0; + padding-left: 5px; } -.global-popup-inner{ - top: 50px; - position: relative; - overflow-y: auto; - height: calc(100% - 50px); - width:100%; +.global-popup-inner { + top: 50px; + position: relative; + overflow-y: auto; + height: calc(100% - 50px); + width: 100%; } -.global-popup-close{ - position: absolute; - right: 16px; - top: 16px; - width: 25px; - height: 25px; - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; + +.global-popup-close { + position: absolute; + right: 16px; + top: 16px; + width: 25px; + height: 25px; + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; } -.global-popup -{ - position: fixed; - z-index: 99999; - top: 0px; - left: 0px; - background: var(--ae-main-bg-color); - color: var(--ae-primary-color); - line-break: anywhere; - height: 100%; - width: 100%; - opacity: 0.98; + +.global-popup { + position: fixed; + z-index: 99999; + top: 0px; + left: 0px; + background: var(--ae-main-bg-color); + color: var(--ae-primary-color); + line-break: anywhere; + height: 100%; + width: 100%; + opacity: 0.98; } @media only screen and (max-width: 860px) { /* For tablets: */ - [id$=_splitter] - { - display:none !important; - } - - - [id$="2img_settings_scroll"] - { - height: auto !important; - } + [id$="_splitter"] { + display: none !important; + } - [id$="2img_results"] - { - max-height: unset !important; - } - - [id$="2img_settings"]::before - { - display:none; - } - - [id$="2img_actions_column"] - { - flex-basis: 100% !important; - max-width: 100% !important; - } - + [id$="2img_settings_scroll"] { + height: auto !important; + } - [id$="2img_settings_scroll"] - { - padding-top: 0; - } - .gr-block, - .dark .gr-block, - .gr-form, - #txt2img_seed, - #img2img_seed, - #txt2img_subseed, - #img2img_subseed, - #txt2img_seed_row > div, - #img2img_seed_row > div, - #txt2img_subseed_row > div, - #img2img_subseed_row > div { - min-width:70px; - } - - [id$="2img_gallery"] - { - margin-bottom: 0px; - } - - - [id$="2img_tools"] - { - gap: 2px; - } + [id$="2img_results"] { + max-height: unset !important; + } - - [id$="2img_results"] - { - flex-grow: 1 !important; - flex-shrink: 1 !important; - overflow-x: hidden; - } + [id$="2img_settings"]::before { + display: none; + } - #splitter { - display:none; - } - - [id$="2img_prompt_image"] + div - { - flex-wrap: wrap; - } - - [id$="2img_results"] - { - flex-grow: 1 !important; - } - - .token-counter span { - position: relative; - top: 3px; - right: 3px; - } - - #settings>div { - margin-left: 0; - } - - #settings> div.tab-nav { - float: none; - display: flex !important; - margin-left: 0; - width: auto; - margin-bottom: 8px; - } - - - [id$="2img_hr_scale"] - { - flex-basis: 100% !important; - } - -/* + [id$="2img_actions_column"] { + flex-basis: 100% !important; + max-width: 100% !important; + } + + [id$="2img_settings_scroll"] { + padding-top: 0; + } + + .gr-block, + .dark .gr-block, + .gr-form, + #txt2img_seed, + #img2img_seed, + #txt2img_subseed, + #img2img_subseed, + #txt2img_seed_row > div, + #img2img_seed_row > div, + #txt2img_subseed_row > div, + #img2img_subseed_row > div { + min-width: 70px; + } + + [id$="2img_gallery"] { + margin-bottom: 0px; + } + + [id$="2img_tools"] { + gap: 2px; + } + + [id$="2img_results"] { + flex-grow: 1 !important; + flex-shrink: 1 !important; + overflow-x: hidden; + } + + #splitter { + display: none; + } + + [id$="2img_prompt_image"] + div { + flex-wrap: wrap; + } + + [id$="2img_results"] { + flex-grow: 1 !important; + } + + .token-counter span { + position: relative; + top: 3px; + right: 3px; + } + + #settings > div { + margin-left: 0; + } + + #settings > div.tab-nav { + float: none; + display: flex !important; + margin-left: 0; + width: auto; + margin-bottom: 8px; + } + + [id$="2img_hr_scale"] { + flex-basis: 100% !important; + } + + /* [id$="2img_gallery"] div.modify-upload{ position:absolute; } */ - - [id$="2img_gallery"], - [id$="2img_gallery"] div.preview.fixed-height>img, - [id$="2img_gallery"] .preview.fixed-height, - [id$="2img_gallery"] img+div.thumbnails - { - position:relative !important; - height: auto !important; - min-height: auto; - border-radius: 0 !important; - } - - [id$="2img_gallery"], - [id$="2img_gallery"] div.preview.fixed-height>img, - [id$="2img_gallery"] .preview.fixed-height - { - max-height: unset !important; - } - - [id$="2img_gallery"] div>img{ - object-fit: contain; - } - - [id$="2img_gallery"] .preview.fixed-height, - [id$="2img_gallery"] .grid-wrap, - [id$="2img_gallery"] .empty - { - min-height: auto !important; - } - [id$="2img_gallery"] img+div.thumbnails{ - height: 60px !important; - } - - .livePreview img{ - object-position:top; - border-radius: 0 !important; - position: relative; - width: 100%; - - } - - - .livePreview.init, - .livePreview:not(.init) + div{ - display:none; - } - - - .livePreview { - /*width: calc(100% - (var(--ae-outside-gap-size) * 2)) !important; */ - max-height: unset !important; - /*bottom:60px;*/ - position: relative !important; - left: 0; - top: 0; - width: auto !important; - height: auto !important; - - } - div.svelte-10ogue4>*:first-child.livePreview { - /*height: calc(100% - 60px - var(--ae-outside-gap-size) - 2px) !important;*/ - /*height: auto !important;*/ - } - - div.svelte-10ogue4>*:first-child.livePreview > img { - /*height: auto !important;*/ - } - - [id$="png_2img_results"]{ - order:1; - } - - [id$="settings_2img_settings"] { - max-height: none; - } - - #nav_menu_header_tabs, - #tab_extensions td, - #tab_extensions th { - display:none !important; - } - - #tab_extensions td:first-child, - #tab_extensions td:last-child, - #tab_extensions th:first-child, - #tab_extensions th:last-child - { - display:table-cell !important; - } - - - #ti_2img_splitter, - #ti_2img_results{ - margin-top:0; - } - #train_tabs_2img_settings > div:first-child{ - width:100%; - } - - #tab_ti .livePreview, - #tab_ti .livePreview.init { - min-height: unset !important; - } - #ti_gallery_container { - max-height: unset !important; - } - #ti_error, - #ti_output, - #ti_progress{ - padding: 0!important; - } - + [id$="2img_gallery"], + [id$="2img_gallery"] div.preview.fixed-height > img, + [id$="2img_gallery"] .preview.fixed-height, + [id$="2img_gallery"] img + div.thumbnails { + position: relative !important; + height: auto !important; + min-height: auto; + border-radius: 0 !important; + } + [id$="2img_gallery"], + [id$="2img_gallery"] div.preview.fixed-height > img, + [id$="2img_gallery"] .preview.fixed-height { + max-height: unset !important; + } + + [id$="2img_gallery"] div > img { + object-fit: contain; + } + + [id$="2img_gallery"] .preview.fixed-height, + [id$="2img_gallery"] .grid-wrap, + [id$="2img_gallery"] .empty { + min-height: auto !important; + } + + [id$="2img_gallery"] img + div.thumbnails { + height: 60px !important; + } + + .livePreview img { + object-position: top; + border-radius: 0 !important; + position: relative; + width: 100%; + } + + .livePreview.init, + .livePreview:not(.init) + div { + display: none; + } + + .livePreview { + /*width: calc(100% - (var(--ae-outside-gap-size) * 2)) !important; */ + max-height: unset !important; + /*bottom:60px;*/ + position: relative !important; + left: 0; + top: 0; + width: auto !important; + height: auto !important; + } + + div.svelte-10ogue4 > *:first-child.livePreview { + /*height: calc(100% - 60px - var(--ae-outside-gap-size) - 2px) !important;*/ + /*height: auto !important;*/ + } + + div.svelte-10ogue4 > *:first-child.livePreview > img { + /*height: auto !important;*/ + } + + [id$="png_2img_results"] { + order: 1; + } + + [id$="settings_2img_settings"] { + max-height: none; + } + + #nav_menu_header_tabs, + #tab_extensions td, + #tab_extensions th { + display: none !important; + } + + #tab_extensions td:first-child, + #tab_extensions td:last-child, + #tab_extensions th:first-child, + #tab_extensions th:last-child { + display: table-cell !important; + } + + #ti_2img_splitter, + #ti_2img_results { + margin-top: 0; + } + + #train_tabs_2img_settings > div:first-child { + width: 100%; + } + + #tab_ti .livePreview, + #tab_ti .livePreview.init { + min-height: unset !important; + } + + #ti_gallery_container { + max-height: unset !important; + } + + #ti_error, + #ti_output, + #ti_progress { + padding: 0 !important; + } } /************/ /* Footer */ /************/ .gradio-container.app { - min-height: 100vh !important; + min-height: 100vh !important; } -.main > .wrap > .contain{ - flex-grow: 1; - display: flex; - flex-direction: column; + +.main > .wrap > .contain { + flex-grow: 1; + display: flex; + flex-direction: column; } - + footer { - display: none !important; + display: none !important; } #tabs + div { - position:relative; - z-index:999; - padding: 0px !important; + position: relative; + z-index: 999; + padding: 0px !important; } -.footer-wrapper{ - display:flex; +.footer-wrapper { + display: flex; } .footer-links { @@ -3048,25 +3167,25 @@ footer { } .footer-links > li { - display: inline-block; - width: 32px; - height: 32px; - text-align: center; - float: left; - border-radius: 100%; - position: relative; - display: flex; - margin: 0 !important; + display: inline-block; + width: 32px; + height: 32px; + text-align: center; + float: left; + border-radius: 100%; + position: relative; + display: flex; + margin: 0 !important; } .footer-links > li > div, .footer-links > li > a { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 24px; - fill: var(--ae-primary-color); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 24px; + fill: var(--ae-primary-color); } .footer-links > li:last-child { @@ -3078,50 +3197,66 @@ footer { a:hover, a:visited, a { - color: var(--ae-primary-color) !important; - text-decoration: none !important; + color: var(--ae-primary-color) !important; + text-decoration: none !important; } -a:hover{ - color: var(--ae-primary-color) !important; - text-decoration: underline !important; + +a:hover { + color: var(--ae-primary-color) !important; + text-decoration: underline !important; } + /************/ /* Tooltips */ /************/ -a[data-tooltip].top:before, a[data-tooltip].top:after { +a[data-tooltip].top:before, +a[data-tooltip].top:after { transform: translateY(10px); } -a[data-tooltip].top:hover:after, a[data-tooltip].top:hover:before { + +a[data-tooltip].top:hover:after, +a[data-tooltip].top:hover:before { transform: translateY(0px); } -a[data-tooltip].right:before, a[data-tooltip].right:after { +a[data-tooltip].right:before, +a[data-tooltip].right:after { transform: translateX(0px); } -a[data-tooltip].right:hover:after, a[data-tooltip].right:hover:before { + +a[data-tooltip].right:hover:after, +a[data-tooltip].right:hover:before { transform: translateX(10px); } -a[data-tooltip].bottom:before, a[data-tooltip].bottom:after { +a[data-tooltip].bottom:before, +a[data-tooltip].bottom:after { transform: translateY(-10px); } -a[data-tooltip].bottom:hover:after, a[data-tooltip].bottom:hover:before { + +a[data-tooltip].bottom:hover:after, +a[data-tooltip].bottom:hover:before { transform: translateY(0px); } -a[data-tooltip].left:before, a[data-tooltip].left:after { +a[data-tooltip].left:before, +a[data-tooltip].left:after { transform: translateX(0px); } -a[data-tooltip].left:hover:after, a[data-tooltip].left:hover:before { + +a[data-tooltip].left:hover:after, +a[data-tooltip].left:hover:before { transform: translateX(-10px); } a[data-tooltip] { position: relative; - max-width:320px; + max-width: 320px; } -a[data-tooltip]:after, a[data-tooltip]:before { + +a[data-tooltip]:after, +a[data-tooltip]:before { position: absolute; visibility: hidden; opacity: 0; @@ -3129,6 +3264,7 @@ a[data-tooltip]:after, a[data-tooltip]:before { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); z-index: 99; } + a[data-tooltip]:before { content: attr(data-tooltip); background-color: var(--ae-main-bg-color); @@ -3142,25 +3278,28 @@ a[data-tooltip]:before { text-transform: uppercase; letter-spacing: 1px; } + a[data-tooltip]:after { width: 0; height: 0; border: 6px solid transparent; content: ""; } -a[data-tooltip]:hover:after, a[data-tooltip]:hover:before { + +a[data-tooltip]:hover:after, +a[data-tooltip]:hover:before { visibility: visible; - opacity: 1.0; + opacity: 1; transform: translateY(0px); } -a[data-tooltip][data-position=top]:before { +a[data-tooltip][data-position="top"]:before { bottom: 100%; left: -130%; margin-bottom: 10px; } -a[data-tooltip][data-position=top]:after { +a[data-tooltip][data-position="top"]:after { border-top-color: var(--ae-main-bg-color); border-bottom: none; bottom: 101%; @@ -3168,13 +3307,13 @@ a[data-tooltip][data-position=top]:after { margin-bottom: 4px; } -a[data-tooltip][data-position=left]:before { +a[data-tooltip][data-position="left"]:before { top: -12%; right: 100%; margin-right: 10px; } -a[data-tooltip][data-position=left]:after { +a[data-tooltip][data-position="left"]:after { border-left-color: var(--ae-main-bg-color); border-right: none; top: calc(50% - 3px); @@ -3183,26 +3322,26 @@ a[data-tooltip][data-position=left]:after { margin-right: 4px; } -a[data-tooltip][data-position=right]:before { +a[data-tooltip][data-position="right"]:before { top: -5%; left: 100%; margin-left: 10px; } -a[data-tooltip][data-position=right]:after { +a[data-tooltip][data-position="right"]:after { border-right-color: var(--ae-main-bg-color); border-left: none; top: calc(50% - 6px); left: calc(100% + 4px); } -a[data-tooltip][data-position=bottom]:before { +a[data-tooltip][data-position="bottom"]:before { top: 100%; left: -130%; margin-top: 10px; } -a[data-tooltip][data-position=bottom]:after { +a[data-tooltip][data-position="bottom"]:after { border-bottom-color: var(--ae-main-bg-color); border-top: none; top: 100%; @@ -3210,362 +3349,356 @@ a[data-tooltip][data-position=bottom]:after { margin-top: 4px; } - .tooltip-html { - text-align: left; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - transform-origin: 0 0; + text-align: left; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + transform-origin: 0 0; } .tooltip-html i { - position: relative; - display: block; + position: relative; + display: block; } -.tooltip-html .icon-info { - fill: var(--ae-primary-color); - scale:0.9; +.tooltip-html .icon-info { + fill: var(--ae-primary-color); + scale: 0.9; } -li.coffee-circle { - /*background: #FFDD00;*/ - margin-left: 5px; - margin-right: 5px; -} -li.coffee-circle p{ - font-size: 12px; - line-height: 18px; - text-align: center; - padding-top: 8px; +li.coffee-circle { + /*background: #FFDD00;*/ + margin-left: 5px; + margin-right: 5px; } -.coffee svg path{ - fill: var(--ae-primary-color) !important; +li.coffee-circle p { + font-size: 12px; + line-height: 18px; + text-align: center; + padding-top: 8px; +} + +.coffee svg path { + fill: var(--ae-primary-color) !important; } .tooltip-html .coffee { - fill: var(--ae-main-bg-color); + fill: var(--ae-main-bg-color); } .tooltip-html .top { - min-width: 200px; - max-width: 400px; - top: -20px; - left: 50%; - transform: translate(-90%,-100%); - padding: 10px 20px; - background-color: var(--ae-main-bg-color); - font-weight: normal; - font-size: 14px; - border-radius: var(--ae-panel-border-radius); - position: absolute; - z-index: 99; - box-sizing: border-box; - box-shadow: 0 1px 8px rgb(0 0 0 / 50%); - display: none; + min-width: 200px; + max-width: 400px; + top: -20px; + left: 50%; + transform: translate(-90%, -100%); + padding: 10px 20px; + background-color: var(--ae-main-bg-color); + font-weight: normal; + font-size: 14px; + border-radius: var(--ae-panel-border-radius); + position: absolute; + z-index: 99; + box-sizing: border-box; + box-shadow: 0 1px 8px rgb(0 0 0 / 50%); + display: none; } -.tooltip-html .top.center{ - transform: translate(-50%,-100%); +.tooltip-html .top.center { + transform: translate(-50%, -100%); } - .tooltip-html:hover .top { - display:block; + display: block; } .tooltip-html .top i { - position:absolute; - top:100%; - left:90%; - margin-left:-15px; - width:30px; - height:15px; - overflow:hidden; + position: absolute; + top: 100%; + left: 90%; + margin-left: -15px; + width: 30px; + height: 15px; + overflow: hidden; } .tooltip-html .top.center i { - left:50%; + left: 50%; } .tooltip-html .top i::after { - content:''; - position:absolute; - width:15px; - height:15px; - left:50%; - transform:translate(-50%,-50%) rotate(45deg); - background-color: var(--ae-main-bg-color); - box-shadow:0 1px 8px rgba(0,0,0,0.5); + content: ""; + position: absolute; + width: 15px; + height: 15px; + left: 50%; + transform: translate(-50%, -50%) rotate(45deg); + background-color: var(--ae-main-bg-color); + box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); } -.tooltip-html span{ - opacity:0.5; +.tooltip-html span { + opacity: 0.5; } -.tooltip-html a{ - color: var(--ae-primary-color); +.tooltip-html a { + color: var(--ae-primary-color); } - - /**********************/ /* Sliders Scrollbars */ /**********************/ ::-webkit-scrollbar { - width: 10px; + width: 10px; } -[id$="2img_settings_scroll"]::-webkit-scrollbar -{ - width: 12px; +[id$="2img_settings_scroll"]::-webkit-scrollbar { + width: 12px; } ::-webkit-scrollbar-track { - box-shadow: inset 0 0 10px 10px var(--ae-main-bg-color); + box-shadow: inset 0 0 10px 10px var(--ae-main-bg-color); } ::-webkit-scrollbar-thumb { - box-shadow: inset 0 0 10px 10px var(--ae-panel-bg-color); + box-shadow: inset 0 0 10px 10px var(--ae-panel-bg-color); } ::-webkit-scrollbar-button { - display: none; + display: none; } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track { - border-left: solid 6px var(--ae-main-bg-color); - border-radius: 0; + border-left: solid 6px var(--ae-main-bg-color); + border-radius: 0; } [id$="2img_settings_scroll"]::-webkit-scrollbar-thumb, -[id$="2img_settings_scroll"]::-webkit-scrollbar-track -{ - border-left: solid 8px transparent; +[id$="2img_settings_scroll"]::-webkit-scrollbar-track { + border-left: solid 8px transparent; } +@media screen and (-webkit-min-device-pixel-ratio: 0) { + input[type="range"] { + overflow: hidden; + width: 100%; + -webkit-appearance: none; + background-color: var(--ae-input-bg-color); + border: 1px solid var(--ae-input-border-color); + position: relative; + border-radius: var(--ae-panel-border-radius); + } + input[type="range"]::after { + content: ""; + position: absolute; + height: 13px; + background-image: var(--ae-slider-bg-overlay); + opacity: 0.15; + width: 100%; + } -@media screen and (-webkit-min-device-pixel-ratio:0) { - input[type=range] { - overflow: hidden; - width: 100%; - -webkit-appearance: none; - background-color: var(--ae-input-bg-color); - border: 1px solid var(--ae-input-border-color); - position:relative; - border-radius: var(--ae-panel-border-radius); - } - input[type=range]::after { - content: ''; - position: absolute; - height: 13px; - background-image: var(--ae-slider-bg-overlay); - opacity: 0.15; - width: 100%; - } - + input[type="range"]::-webkit-slider-runnable-track { + height: 14px; + -webkit-appearance: none; + color: var(--ae-primary-color); + margin-top: -1px; + } - input[type=range]::-webkit-slider-runnable-track { - height: 14px; - -webkit-appearance: none; - color: var(--ae-primary-color); - margin-top: -1px; - } + input[type="range"]::-webkit-slider-thumb { + width: 0px; + -webkit-appearance: none; + height: 14px; + cursor: ew-resize; + background-color: var(--ae-primary-color); + box-shadow: -1024px 0 0 1024px var(--ae-primary-color); + } - input[type=range]::-webkit-slider-thumb { - width: 0px; - -webkit-appearance: none; - height: 14px; - cursor: ew-resize; - background-color: var(--ae-primary-color); - box-shadow: -1024px 0 0 1024px var(--ae-primary-color); - } - - [id$="_sub-group"] input[type=range] - { - - background-color: var(--ae-subgroup-input-bg-color); - border: 1px solid var(--ae-subgroup-input-border-color); - } - + [id$="_sub-group"] input[type="range"] { + background-color: var(--ae-subgroup-input-bg-color); + border: 1px solid var(--ae-subgroup-input-border-color); + } } - /* Firefox */ -input[type=range]::-moz-range-progress { - background-color: var(--ae-primary-color); - height: 14px; - border: 1px solid var(--ae-primary-color); +input[type="range"]::-moz-range-progress { + background-color: var(--ae-primary-color); + height: 14px; + border: 1px solid var(--ae-primary-color); } -input[type=range]::-moz-range-track { - background-color: var(--ae-input-bg-color); +input[type="range"]::-moz-range-track { + background-color: var(--ae-input-bg-color); } input[type=range]::after:: { - content: ''; - position: absolute; - height: 13px; - background-image: var(--ae-slider-bg-overlay); - opacity: 0.15; - width: 100%; + content: ""; + position: absolute; + height: 13px; + background-image: var(--ae-slider-bg-overlay); + opacity: 0.15; + width: 100%; } #quicksettings_overflow_container, #theme_overflow_container, [id$="2img_checkpoints_cards"], [id$="2img_results"], -[id$="2img_settings_scroll"] -{ +[id$="2img_settings_scroll"] { scrollbar-color: var(--ae-panel-bg-color) var(--ae-main-bg-color) !important; scrollbar-width: thin !important; /*padding: 0 1px;*/ } - -input[type=range]{ - width: 100%; +input[type="range"] { + width: 100%; } -input[type=range]::-moz-range-track { - width: 100%; - background-color: var(--ae-input-bg-color); - border: none; - border-radius: 0px; +input[type="range"]::-moz-range-track { + width: 100%; + background-color: var(--ae-input-bg-color); + border: none; + border-radius: 0px; - position: relative; - height: 100%; - background-image: var(--ae-slider-bg-overlay); - opacity: 0.15; - width: 100%; + position: relative; + height: 100%; + background-image: var(--ae-slider-bg-overlay); + opacity: 0.15; + width: 100%; } -input[type=range]::-moz-range-thumb { - border: 0px solid var(--ae-primary-color); - width: 0px; - border-radius: 0%; - background-color: var(--ae-primary-color); - +input[type="range"]::-moz-range-thumb { + border: 0px solid var(--ae-primary-color); + width: 0px; + border-radius: 0%; + background-color: var(--ae-primary-color); } /*hide the outline behind the border*/ -input[type=range]:-moz-focusring{ - outline: 1px solid var(--ae-primary-color); - outline-offset: -1px; +input[type="range"]:-moz-focusring { + outline: 1px solid var(--ae-primary-color); + outline-offset: -1px; } -input[type=range]:focus::-moz-range-track { - background-color: var(--ae-input-bg-color); +input[type="range"]:focus::-moz-range-track { + background-color: var(--ae-input-bg-color); } input[type="number"] { - -moz-appearance: textfield; -} -input[type="number"]:hover, -input[type="number"]:focus { - -moz-appearance: initial; + -moz-appearance: textfield; } +input[type="number"]:hover, +input[type="number"]:focus { + -moz-appearance: initial; +} /* IE maybe later */ -input[type=range]::-ms-fill-lower { - background-color: var(--ae-primary-color); +input[type="range"]::-ms-fill-lower { + background-color: var(--ae-primary-color); } -input[type=range]::-ms-fill-upper { - background-color: var(--ae-input-bg-color); +input[type="range"]::-ms-fill-upper { + background-color: var(--ae-input-bg-color); } /*****************/ /* img2img fixes */ /*****************/ -#img2img_scale_resolution_row .form{ - background: transparent !important; - border: 0!important; +#img2img_scale_resolution_row .form { + background: transparent !important; + border: 0 !important; } + #img2img_unused_scale_by_slider { - display: none!important; + display: none !important; } .center.boundedheight.flex { - width: 100% !important; - height: auto !important; - max-height: 50vh; -} -.image-container img.absolute-img{ - position:relative !important; + width: 100% !important; + height: auto !important; + max-height: 50vh; } -.image-container img { - max-height: 50vh !important; +.image-container img.absolute-img { + position: relative !important; } + +.image-container img { + max-height: 50vh !important; +} + .image-container { - min-height: 25vh !important; - height: auto !important; - display:flex; + min-height: 25vh !important; + height: auto !important; + display: flex; } + .absolute-img.svelte-rlgzoo { - position: relative; - opacity: 0; + position: relative; + opacity: 0; } -.block.gradio-image{ - height:auto !important; + +.block.gradio-image { + height: auto !important; } div[data-testid="image"] canvas { - width: auto !important; - height: 100% !important; - position: absolute !important; - top: 0 !important; - left: 0 !important; - border: 0 !important; + width: auto !important; + height: 100% !important; + position: absolute !important; + top: 0 !important; + left: 0 !important; + border: 0 !important; } #imageARPreview { - position: absolute; - top: 0; - left: 0; - outline: 2px solid red; - background: rgba(255, 0, 0, .3); - z-index: 900; - pointer-events: none; - display: none; + position: absolute; + top: 0; + left: 0; + outline: 2px solid red; + background: rgba(255, 0, 0, 0.3); + z-index: 900; + pointer-events: none; + display: none; } -#tab_img2img div.center.boundedheight.flex{ - display:block !important; + +#tab_img2img div.center.boundedheight.flex { + display: block !important; } + /*************/ /* Spotlight */ /*************/ -[id^="spotlight"] .no-point-events{ - pointer-events:none; +[id^="spotlight"] .no-point-events { + pointer-events: none; } -[id^="spotlight"] .move{ - cursor: move; +[id^="spotlight"] .move { + cursor: move; } - [id^="spotlight"] .z-50, -[id^="spotlight"] .block-hidden{ - display:none; +[id^="spotlight"] .block-hidden { + display: none; } -[id^="spotlight"] div{ - border:0; + +[id^="spotlight"] div { + border: 0; } + [id^="spotlight"] { position: fixed; top: 0px; - left:0px; + left: 0px; bottom: 0px; width: 100%; z-index: 99999; @@ -3582,22 +3715,24 @@ div[data-testid="image"] canvas { touch-action: none; pointer-events: none; } + [id^="spotlight"].show { opacity: 1; transition: none; pointer-events: auto; } + [id^="spotlight"].relative { - position: relative !important; - width:auto; - height: calc(50vh + 40px); - z-index: 99; - margin-bottom: 1px; - padding-top: 40px; + position: relative !important; + width: auto; + height: calc(50vh + 40px); + z-index: 99; + margin-bottom: 1px; + padding-top: 40px; } [id^="spotlight"].relative .spl-pane { - top: -20px; + top: -20px; } [id^="spotlight"].relative .spl-pane > * { @@ -3608,7 +3743,7 @@ div[data-testid="image"] canvas { display: none; } -[id^="spotlight"].relative .spl-page{ +[id^="spotlight"].relative .spl-page { display: none; } @@ -3616,33 +3751,40 @@ div[data-testid="image"] canvas { color: #212529; background-color: #fff; } + [id^="spotlight"].white .spl-spinner, [id^="spotlight"].white .spl-prev, [id^="spotlight"].white .spl-next, [id^="spotlight"].white .spl-page ~ * { filter: invert(1); } + [id^="spotlight"].white .spl-progress { background-color: rgba(0, 0, 0, 0.35); } + [id^="spotlight"].white .spl-header, [id^="spotlight"].white .spl-footer { background-color: rgba(255, 255, 255, 0.65); } + [id^="spotlight"].white .spl-button { background: #212529; color: #fff; } + [id^="spotlight"] .cover { object-fit: cover; height: 100%; width: 100%; } + [id^="spotlight"] .contain { object-fit: contain; height: 100%; width: 100%; } + [id^="spotlight"] .autofit { object-fit: none; width: auto; @@ -3651,12 +3793,14 @@ div[data-testid="image"] canvas { max-width: none; transition: none; } + .spl-track { position: absolute; width: 100%; height: 100%; contain: strict; } + .spl-spinner { position: absolute; width: 100%; @@ -3666,17 +3810,20 @@ div[data-testid="image"] canvas { background-size: 42px; opacity: 0; } + .spl-spinner.spin { background-image: url("./file=html/svg/spotlight/preloader.svg"); transition: opacity 0.2s linear 0.25s; opacity: 1; } + .spl-spinner.error { background-image: url("./file=html/svg/spotlight/error.svg"); background-size: 128px; transition: none; opacity: 0.5; } + .spl-scene { position: absolute; width: 100%; @@ -3685,6 +3832,7 @@ div[data-testid="image"] canvas { contain: layout size; will-change: transform; } + .spl-pane > * { position: absolute; width: auto; @@ -3712,15 +3860,18 @@ div[data-testid="image"] canvas { contain: layout size; will-change: transform, contents; } + .spl-pane.hide img { - display:none !important; + display: none !important; } + .spl-pane.hide { - background-size: 100%; - transition: background-size 0.65s cubic-bezier(0.3, 1, 0.3, 1) !important; - will-change: background-size !important; - transform: translate(0, 0) !important; + background-size: 100%; + transition: background-size 0.65s cubic-bezier(0.3, 1, 0.3, 1) !important; + will-change: background-size !important; + transform: translate(0, 0) !important; } + .spl-header { position: absolute; top: 0; @@ -3733,10 +3884,12 @@ div[data-testid="image"] canvas { overflow: hidden; will-change: transform; } + [id^="spotlight"].menu .spl-header, .spl-header:hover { transform: translateY(0); } + .spl-header div { display: inline-block; vertical-align: middle; @@ -3747,16 +3900,18 @@ div[data-testid="image"] canvas { display: flex; align-items: center; } + .spl-progress { position: absolute; top: 0; - left: -1px; + left: -1px; width: 100%; height: 3px; background-color: var(--ae-modal-icon-color); transform: translateX(-100%); transition: transform linear; } + .spl-footer { position: absolute; left: 0; @@ -3773,17 +3928,21 @@ div[data-testid="image"] canvas { transition: transform 0.35s ease; will-change: transform; } + [id^="spotlight"].menu .spl-footer, .spl-footer:hover { transform: translateY(0); } + .spl-title { font-size: 22px; margin-bottom: 20px; } + .spl-description { margin-bottom: 20px; } + .spl-button { display: inline-block; background: #fff; @@ -3793,129 +3952,150 @@ div[data-testid="image"] canvas { margin-bottom: 20px; cursor: pointer; } + .spl-page { float: left; width: auto; line-height: 40px; } + .spl-page ~ * { background-position: center; background-repeat: no-repeat; background-size: 21px; float: right; } + .spl-fullscreen { - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/fullscreen-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/fullscreen-line.svg") no-repeat 50% 50%; + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/fullscreen-line.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/fullscreen-line.svg") no-repeat 50% 50%; } + .spl-fullscreen.on { - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/fullscreen-exit-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/fullscreen-exit-line.svg") no-repeat 50% 50%; + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/fullscreen-exit-line.svg") no-repeat 50% + 50%; + mask: url("./file=html/svg/fullscreen-exit-line.svg") no-repeat 50% 50%; } + .spl-autofit { - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/aspect-ratio-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/aspect-ratio-line.svg") no-repeat 50% 50%; + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/aspect-ratio-line.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/aspect-ratio-line.svg") no-repeat 50% 50%; } + .spl-zoom-out { - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/zoom-out-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/zoom-out-line.svg") no-repeat 50% 50%; + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/zoom-out-line.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/zoom-out-line.svg") no-repeat 50% 50%; background-size: 22px; } + .spl-zoom-in { - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/zoom-in-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/zoom-in-line.svg") no-repeat 50% 50%; + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/zoom-in-line.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/zoom-in-line.svg") no-repeat 50% 50%; background-size: 22px; } + .spl-download { - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/file-download-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/file-download-line.svg") no-repeat 50% 50%; + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/file-download-line.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/file-download-line.svg") no-repeat 50% 50%; background-size: 20px; } + .spl-theme { background-image: url("./file=html/svg/spotlight/theme.svg"); } + .spl-play { background-image: url("./file=html/svg/spotlight/play.svg"); } + .spl-play.on { background-image: url("./file=html/svg/spotlight/pause.svg"); animation: pulsate 1s ease infinite; } + .spl-close { - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; -} -.spl-like{ - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/heart-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/heart-line.svg") no-repeat 50% 50%; - background-size: 22px; -} -.spl-like.on{ - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/heart-fill.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/heart-fill.svg") no-repeat 50% 50%; -} -.spl-tile{ - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/grid-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/grid-line.svg") no-repeat 50% 50%; - background-size: 22px; -} -.spl-tile.on{ - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/grid-fill.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/grid-fill.svg") no-repeat 50% 50%; + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; } -.spl-undo{ - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/arrow-go-back-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/arrow-go-back-line.svg") no-repeat 50% 50%; - background-size: 22px; -} -.spl-clear{ - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/delete-bin-2-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/delete-bin-2-line.svg") no-repeat 50% 50%; - background-size: 22px; - position:absolute; - left:0; +.spl-like { + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/heart-line.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/heart-line.svg") no-repeat 50% 50%; + background-size: 22px; } -.spl-pan{ - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/drag-move-2-fill.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/drag-move-2-fill.svg") no-repeat 50% 50%; - background-size: 22px; -} -.spl-pan.on{ - opacity:1; +.spl-like.on { + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/heart-fill.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/heart-fill.svg") no-repeat 50% 50%; } -.spl-draw{ - background-color:var(--ae-modal-icon-color); - -webkit-mask: url("./file=html/svg/ball-pen-line.svg") no-repeat 50% 50%; - mask: url("./file=html/svg/ball-pen-line.svg") no-repeat 50% 50%; - background-size: 22px; +.spl-tile { + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/grid-line.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/grid-line.svg") no-repeat 50% 50%; + background-size: 22px; } -.spl-color input{ - width: 42px; - height: 42px; - padding: 5px 6px; - background: transparent; - margin-top: -1px; + +.spl-tile.on { + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/grid-fill.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/grid-fill.svg") no-repeat 50% 50%; } -.spl-brush{ - width: 100px !important; - margin-top: 0px; + +.spl-undo { + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/arrow-go-back-line.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/arrow-go-back-line.svg") no-repeat 50% 50%; + background-size: 22px; +} + +.spl-clear { + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/delete-bin-2-line.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/delete-bin-2-line.svg") no-repeat 50% 50%; + background-size: 22px; + position: absolute; + left: 0; +} + +.spl-pan { + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/drag-move-2-fill.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/drag-move-2-fill.svg") no-repeat 50% 50%; + background-size: 22px; +} + +.spl-pan.on { + opacity: 1; +} + +.spl-draw { + background-color: var(--ae-modal-icon-color); + -webkit-mask: url("./file=html/svg/ball-pen-line.svg") no-repeat 50% 50%; + mask: url("./file=html/svg/ball-pen-line.svg") no-repeat 50% 50%; + background-size: 22px; +} + +.spl-color input { + width: 42px; + height: 42px; + padding: 5px 6px; + background: transparent; + margin-top: -1px; +} + +.spl-brush { + width: 100px !important; + margin-top: 0px; } .spl-prev, @@ -3938,6 +4118,7 @@ div[data-testid="image"] canvas { background-size: 30px; will-change: transform; } + .spl-next { left: auto; right: 20px; @@ -3951,27 +4132,33 @@ div[data-testid="image"] canvas { [id^="spotlight"].menu .spl-next { transform: translateX(0) scaleX(-1); } + @media (hover: hover) { .spl-page ~ div { cursor: pointer; transition: opacity 0.2s ease; } + .spl-page ~ div:hover, .spl-prev:hover, .spl-next:hover { opacity: 1; } } + @media (max-width: 500px) { .spl-header div { width: 32px; } + .spl-footer .spl-title { font-size: 20px; } + .spl-footer { font-size: 14px; } + .spl-prev, .spl-next { width: 35px; @@ -3979,31 +4166,37 @@ div[data-testid="image"] canvas { margin-top: -17.5px; background-size: 15px 15px; } + .spl-spinner { background-size: 30px 30px; } - .spl-brush{ - width: 60px !important; - padding-left: 10px; - } - .spl-fullscreen{ - display:inline-block !important; - } + + .spl-brush { + width: 60px !important; + padding-left: 10px; + } + + .spl-fullscreen { + display: inline-block !important; + } } + .hide-scrollbars { overflow: hidden !important; } + @keyframes pulsate { 0% { opacity: 1; } + 50% { opacity: 0.2; } + 100% { opacity: 1; } } - -/*BREAKPOINT_CSS_CONTENT*/ \ No newline at end of file +/*BREAKPOINT_CSS_CONTENT*/