aboutsummaryrefslogtreecommitdiff
path: root/javascript
diff options
context:
space:
mode:
Diffstat (limited to 'javascript')
-rw-r--r--javascript/aspectRatioOverlay.js33
-rw-r--r--javascript/contextMenus.js15
-rw-r--r--javascript/edit-attention.js8
-rw-r--r--javascript/extensions.js12
-rw-r--r--javascript/extraNetworks.js41
-rw-r--r--javascript/generationParams.js2
-rw-r--r--javascript/hints.js16
-rw-r--r--javascript/hires_fix.js16
-rw-r--r--javascript/imageMaskFix.js13
-rw-r--r--javascript/imageParams.js1
-rw-r--r--javascript/imageviewer.js12
-rw-r--r--javascript/imageviewerGamepad.js85
-rw-r--r--javascript/localization.js78
-rw-r--r--javascript/notification.js6
-rw-r--r--javascript/progressbar.js7
-rw-r--r--javascript/ui.js50
-rw-r--r--javascript/ui_settings_hints.js41
17 files changed, 259 insertions, 177 deletions
diff --git a/javascript/aspectRatioOverlay.js b/javascript/aspectRatioOverlay.js
index a8278cca..5160081d 100644
--- a/javascript/aspectRatioOverlay.js
+++ b/javascript/aspectRatioOverlay.js
@@ -45,29 +45,24 @@ function dimensionChange(e, is_width, is_height){
var viewportOffset = targetElement.getBoundingClientRect();
- viewportscale = Math.min( targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight )
+ var viewportscale = Math.min( targetElement.clientWidth/targetElement.naturalWidth, targetElement.clientHeight/targetElement.naturalHeight )
- scaledx = targetElement.naturalWidth*viewportscale
- scaledy = targetElement.naturalHeight*viewportscale
+ var scaledx = targetElement.naturalWidth*viewportscale
+ var scaledy = targetElement.naturalHeight*viewportscale
- cleintRectTop = (viewportOffset.top+window.scrollY)
- cleintRectLeft = (viewportOffset.left+window.scrollX)
- cleintRectCentreY = cleintRectTop + (targetElement.clientHeight/2)
- cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth/2)
+ var cleintRectTop = (viewportOffset.top+window.scrollY)
+ var cleintRectLeft = (viewportOffset.left+window.scrollX)
+ var cleintRectCentreY = cleintRectTop + (targetElement.clientHeight/2)
+ var cleintRectCentreX = cleintRectLeft + (targetElement.clientWidth/2)
- viewRectTop = cleintRectCentreY-(scaledy/2)
- viewRectLeft = cleintRectCentreX-(scaledx/2)
- arRectWidth = scaledx
- arRectHeight = scaledy
+ var arscale = Math.min( scaledx/currentWidth, scaledy/currentHeight )
+ var arscaledx = currentWidth*arscale
+ var arscaledy = currentHeight*arscale
- arscale = Math.min( arRectWidth/currentWidth, arRectHeight/currentHeight )
- arscaledx = currentWidth*arscale
- arscaledy = currentHeight*arscale
-
- arRectTop = cleintRectCentreY-(arscaledy/2)
- arRectLeft = cleintRectCentreX-(arscaledx/2)
- arRectWidth = arscaledx
- arRectHeight = arscaledy
+ 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';
diff --git a/javascript/contextMenus.js b/javascript/contextMenus.js
index 9468c107..b2bdf053 100644
--- a/javascript/contextMenus.js
+++ b/javascript/contextMenus.js
@@ -4,7 +4,7 @@ contextMenuInit = function(){
let menuSpecs = new Map();
const uid = function(){
- return Date.now().toString(36) + Math.random().toString(36).substr(2);
+ return Date.now().toString(36) + Math.random().toString(36).substring(2);
}
function showContextMenu(event,element,menuEntries){
@@ -16,8 +16,7 @@ contextMenuInit = function(){
oldMenu.remove()
}
- let tabButton = uiCurrentTab
- let baseStyle = window.getComputedStyle(tabButton)
+ let baseStyle = window.getComputedStyle(uiCurrentTab)
const contextMenu = document.createElement('nav')
contextMenu.id = "context-menu"
@@ -36,7 +35,7 @@ contextMenuInit = function(){
menuEntries.forEach(function(entry){
let contextMenuEntry = document.createElement('a')
contextMenuEntry.innerHTML = entry['name']
- contextMenuEntry.addEventListener("click", function(e) {
+ contextMenuEntry.addEventListener("click", function() {
entry['func']();
})
contextMenuList.append(contextMenuEntry);
@@ -63,7 +62,7 @@ contextMenuInit = function(){
function appendContextMenuOption(targetElementSelector,entryName,entryFunction){
- currentItems = menuSpecs.get(targetElementSelector)
+ var currentItems = menuSpecs.get(targetElementSelector)
if(!currentItems){
currentItems = []
@@ -79,7 +78,7 @@ contextMenuInit = function(){
}
function removeContextMenuOption(uid){
- menuSpecs.forEach(function(v,k) {
+ menuSpecs.forEach(function(v) {
let index = -1
v.forEach(function(e,ei){if(e['id']==uid){index=ei}})
if(index>=0){
@@ -93,8 +92,7 @@ contextMenuInit = function(){
return;
}
gradioApp().addEventListener("click", function(e) {
- let source = e.composedPath()[0]
- if(source.id && source.id.indexOf('check_progress')>-1){
+ if(! e.isTrusted){
return
}
@@ -112,7 +110,6 @@ contextMenuInit = function(){
if(e.composedPath()[0].matches(k)){
showContextMenu(e,e.composedPath()[0],v)
e.preventDefault()
- return
}
})
});
diff --git a/javascript/edit-attention.js b/javascript/edit-attention.js
index 588c7b77..d2c2f190 100644
--- a/javascript/edit-attention.js
+++ b/javascript/edit-attention.js
@@ -69,8 +69,8 @@ function keyupEditAttention(event){
event.preventDefault();
- closeCharacter = ')'
- delta = opts.keyedit_precision_attention
+ var closeCharacter = ')'
+ var delta = opts.keyedit_precision_attention
if (selectionStart > 0 && text[selectionStart - 1] == '<'){
closeCharacter = '>'
@@ -91,8 +91,8 @@ function keyupEditAttention(event){
selectionEnd += 1;
}
- end = text.slice(selectionEnd + 1).indexOf(closeCharacter) + 1;
- weight = parseFloat(text.slice(selectionEnd + 1, selectionEnd + 1 + end));
+ 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;
diff --git a/javascript/extensions.js b/javascript/extensions.js
index 3c2f995a..2a2d2f8e 100644
--- a/javascript/extensions.js
+++ b/javascript/extensions.js
@@ -1,14 +1,14 @@
-function extensions_apply(_, _, disable_all){
+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.substr(7))
+ disable.push(x.name.substring(7))
if(x.name.startsWith("update_") && x.checked)
- update.push(x.name.substr(7))
+ update.push(x.name.substring(7))
})
restart_reload()
@@ -16,12 +16,12 @@ function extensions_apply(_, _, disable_all){
return [JSON.stringify(disable), JSON.stringify(update), disable_all]
}
-function extensions_check(_, _){
+function extensions_check(){
var disable = []
gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){
if(x.name.startsWith("enable_") && ! x.checked)
- disable.push(x.name.substr(7))
+ disable.push(x.name.substring(7))
})
gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){
@@ -41,7 +41,7 @@ function install_extension_from_index(button, url){
button.disabled = "disabled"
button.value = "Installing..."
- textarea = gradioApp().querySelector('#extension_to_install textarea')
+ var textarea = gradioApp().querySelector('#extension_to_install textarea')
textarea.value = url
updateInput(textarea)
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index 25322138..c85bc79a 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -1,4 +1,3 @@
-
function setupExtraNetworksForTab(tabname){
gradioApp().querySelector('#'+tabname+'_extra_tabs').classList.add('extra-networks')
@@ -10,16 +9,34 @@ function setupExtraNetworksForTab(tabname){
tabs.appendChild(search)
tabs.appendChild(refresh)
- search.addEventListener("input", function(evt){
- searchTerm = search.value.toLowerCase()
+ var applyFilter = function(){
+ var searchTerm = search.value.toLowerCase()
gradioApp().querySelectorAll('#'+tabname+'_extra_tabs div.card').forEach(function(elem){
- text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase()
- elem.style.display = text.indexOf(searchTerm) == -1 ? "none" : ""
+ var searchOnly = elem.querySelector('.search_only')
+ var text = elem.querySelector('.name').textContent.toLowerCase() + " " + elem.querySelector('.search_term').textContent.toLowerCase()
+
+ var visible = text.indexOf(searchTerm) != -1
+
+ if(searchOnly && searchTerm.length < 4){
+ visible = false
+ }
+
+ elem.style.display = visible ? "" : "none"
})
- });
+ }
+
+ search.addEventListener("input", applyFilter);
+ applyFilter();
+
+ extraNetworksApplyFilter[tabname] = applyFilter;
+}
+
+function applyExtraNetworkFilter(tabname){
+ setTimeout(extraNetworksApplyFilter[tabname], 1);
}
+var extraNetworksApplyFilter = {}
var activePromptTextarea = {};
function setupExtraNetworks(){
@@ -55,7 +72,7 @@ function tryToRemoveExtraNetworkFromPrompt(textarea, text){
var partToSearch = m[1]
var replaced = false
- var newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found, index){
+ var newTextareaText = textarea.value.replaceAll(re_extranet_g, function(found){
m = found.match(re_extranet);
if(m[1] == partToSearch){
replaced = true;
@@ -96,9 +113,9 @@ function saveCardPreview(event, tabname, filename){
}
function extraNetworksSearchButton(tabs_id, event){
- searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea')
- button = event.target
- text = button.classList.contains("search-all") ? "" : button.textContent.trim()
+ var searchTextarea = gradioApp().querySelector("#" + tabs_id + ' > div > textarea')
+ var button = event.target
+ var text = button.classList.contains("search-all") ? "" : button.textContent.trim()
searchTextarea.value = text
updateInput(searchTextarea)
@@ -133,7 +150,7 @@ function popup(contents){
}
function extraNetworksShowMetadata(text){
- elem = document.createElement('pre')
+ var elem = document.createElement('pre')
elem.classList.add('popup-metadata');
elem.textContent = text;
@@ -165,7 +182,7 @@ function requestGet(url, data, handler, errorHandler){
}
function extraNetworksRequestMetadata(event, extraPage, cardName){
- showError = function(){ extraNetworksShowMetadata("there was an error getting metadata"); }
+ 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){
diff --git a/javascript/generationParams.js b/javascript/generationParams.js
index 1266a266..ef64ee2e 100644
--- a/javascript/generationParams.js
+++ b/javascript/generationParams.js
@@ -23,7 +23,7 @@ let modalObserver = new MutationObserver(function(mutations) {
});
function attachGalleryListeners(tab_name) {
- gallery = gradioApp().querySelector('#'+tab_name+'_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
diff --git a/javascript/hints.js b/javascript/hints.js
index e7d17d36..3746df99 100644
--- a/javascript/hints.js
+++ b/javascript/hints.js
@@ -66,8 +66,8 @@ titles = {
"Interrogate": "Reconstruct prompt from existing image and put it into the prompt field.",
- "Images filename pattern": "Use following tags to define how filenames for images are chosen: [steps], [cfg], [clip_skip], [batch_number], [generation_number], [prompt_hash], [prompt], [prompt_no_styles], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [model_name], [prompt_words], [date], [datetime], [datetime<Format>], [datetime<Format><Time Zone>], [job_timestamp], [hasprompt<prompt1|default><prompt2>..]; leave empty for default.",
- "Directory name pattern": "Use following tags to define how subdirectories for images and grids are chosen: [steps], [cfg], [clip_skip], [batch_number], [generation_number], [prompt_hash], [prompt], [prompt_no_styles], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [model_name], [prompt_words], [date], [datetime], [datetime<Format>], [datetime<Format><Time Zone>], [job_timestamp], [hasprompt<prompt1|default><prompt2>..]; leave empty for default.",
+ "Images filename pattern": "Use following tags to define how filenames for images are chosen: [steps], [cfg], [denoising], [clip_skip], [batch_number], [generation_number], [prompt_hash], [prompt], [prompt_no_styles], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [model_name], [prompt_words], [date], [datetime], [datetime<Format>], [datetime<Format><Time Zone>], [job_timestamp], [hasprompt<prompt1|default><prompt2>..]; leave empty for default.",
+ "Directory name pattern": "Use following tags to define how subdirectories for images and grids are chosen: [steps], [cfg], [denoising], [clip_skip], [batch_number], [generation_number], [prompt_hash], [prompt], [prompt_no_styles], [prompt_spaces], [width], [height], [styles], [sampler], [seed], [model_hash], [model_name], [prompt_words], [date], [datetime], [datetime<Format>], [datetime<Format><Time Zone>], [job_timestamp], [hasprompt<prompt1|default><prompt2>..]; leave empty for default.",
"Max prompt words": "Set the maximum number of words to be used in the [prompt_words] option; ATTENTION: If the words are too long, they may exceed the maximum length of the file path that the system can handle",
"Loopback": "Performs img2img processing multiple times. Output images are used as input for the next loop.",
@@ -118,16 +118,18 @@ titles = {
onUiUpdate(function(){
gradioApp().querySelectorAll('span, button, select, p').forEach(function(span){
- tooltip = titles[span.textContent];
+ if (span.title) return; // already has a title
- if(!tooltip){
- tooltip = titles[span.value];
+ let tooltip = localization[titles[span.textContent]] || titles[span.textContent];
+
+ if(!tooltip){
+ tooltip = localization[titles[span.value]] || titles[span.value];
}
if(!tooltip){
for (const c of span.classList) {
if (c in titles) {
- tooltip = titles[c];
+ tooltip = localization[titles[c]] || titles[c];
break;
}
}
@@ -142,7 +144,7 @@ onUiUpdate(function(){
if (select.onchange != null) return;
select.onchange = function(){
- select.title = titles[select.value] || "";
+ select.title = localization[titles[select.value]] || titles[select.value] || "";
}
})
})
diff --git a/javascript/hires_fix.js b/javascript/hires_fix.js
index 0629475f..48196be4 100644
--- a/javascript/hires_fix.js
+++ b/javascript/hires_fix.js
@@ -1,16 +1,12 @@
-function setInactive(elem, inactive){
- if(inactive){
- elem.classList.add('inactive')
- } else{
- elem.classList.remove('inactive')
+function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y){
+ function setInactive(elem, inactive){
+ elem.classList.toggle('inactive', !!inactive)
}
-}
-function onCalcResolutionHires(enable, width, height, hr_scale, hr_resize_x, hr_resize_y){
- hrUpscaleBy = gradioApp().getElementById('txt2img_hr_scale')
- hrResizeX = gradioApp().getElementById('txt2img_hr_resize_x')
- hrResizeY = gradioApp().getElementById('txt2img_hr_resize_y')
+ 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" : ""
diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js
index 9fe7a603..a612705d 100644
--- a/javascript/imageMaskFix.js
+++ b/javascript/imageMaskFix.js
@@ -2,11 +2,10 @@
* temporary fix for https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/668
* @see https://github.com/gradio-app/gradio/issues/1721
*/
-window.addEventListener( 'resize', () => imageMaskResize());
function imageMaskResize() {
const canvases = gradioApp().querySelectorAll('#img2maskimg .touch-none canvas');
if ( ! canvases.length ) {
- canvases_fixed = false;
+ canvases_fixed = false; // TODO: this is unused..?
window.removeEventListener( 'resize', imageMaskResize );
return;
}
@@ -15,7 +14,7 @@ function imageMaskResize() {
const previewImage = wrapper.previousElementSibling;
if ( ! previewImage.complete ) {
- previewImage.addEventListener( 'load', () => imageMaskResize());
+ previewImage.addEventListener( 'load', imageMaskResize);
return;
}
@@ -24,7 +23,6 @@ function imageMaskResize() {
const nw = previewImage.naturalWidth;
const nh = previewImage.naturalHeight;
const portrait = nh > nw;
- const factor = portrait;
const wW = Math.min(w, portrait ? h/nh*nw : w/nw*nw);
const wH = Math.min(h, portrait ? h/nh*nh : w/nw*nh);
@@ -40,6 +38,7 @@ function imageMaskResize() {
c.style.maxHeight = '100%';
c.style.objectFit = 'contain';
});
- }
-
- onUiUpdate(() => imageMaskResize());
+}
+
+onUiUpdate(imageMaskResize);
+window.addEventListener( 'resize', imageMaskResize);
diff --git a/javascript/imageParams.js b/javascript/imageParams.js
index 67404a89..64aee93b 100644
--- a/javascript/imageParams.js
+++ b/javascript/imageParams.js
@@ -1,7 +1,6 @@
window.onload = (function(){
window.addEventListener('drop', e => {
const target = e.composedPath()[0];
- const idx = selected_gallery_index();
if (target.placeholder.indexOf("Prompt") == -1) return;
let prompt_target = get_tab_index('tabs') == 1 ? "img2img_prompt_image" : "txt2img_prompt_image";
diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js
index 3deffa9b..32066ab8 100644
--- a/javascript/imageviewer.js
+++ b/javascript/imageviewer.js
@@ -57,7 +57,7 @@ function modalImageSwitch(offset) {
})
if (result != -1) {
- nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]
+ var nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]
nextButton.click()
const modalImage = gradioApp().getElementById("modalImage");
const modal = gradioApp().getElementById("lightboxModal");
@@ -144,15 +144,11 @@ function setupImageForLightbox(e) {
}
function modalZoomSet(modalImage, enable) {
- if (enable) {
- modalImage.classList.add('modalImageFullscreen');
- } else {
- modalImage.classList.remove('modalImageFullscreen');
- }
+ if(modalImage) modalImage.classList.toggle('modalImageFullscreen', !!enable);
}
function modalZoomToggle(event) {
- modalImage = gradioApp().getElementById("modalImage");
+ var modalImage = gradioApp().getElementById("modalImage");
modalZoomSet(modalImage, !modalImage.classList.contains('modalImageFullscreen'))
event.stopPropagation()
}
@@ -179,7 +175,7 @@ function galleryImageHandler(e) {
}
onUiUpdate(function() {
- fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img')
+ var fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img')
if (fullImg_preview != null) {
fullImg_preview.forEach(setupImageForLightbox);
}
diff --git a/javascript/imageviewerGamepad.js b/javascript/imageviewerGamepad.js
index 29bd7140..6297a12b 100644
--- a/javascript/imageviewerGamepad.js
+++ b/javascript/imageviewerGamepad.js
@@ -1,36 +1,57 @@
- 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);
- });
-
-
- /*
- 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;
-
- if (e.deltaX <= -0.6) {
+window.addEventListener('gamepadconnected', (e) => {
+ const index = e.gamepad.index;
+ let isWaiting = false;
+ setInterval(async () => {
+ if (!opts.js_modal_lightbox_gamepad || isWaiting) return;
+ const gamepad = navigator.getGamepads()[index];
+ const xValue = gamepad.axes[0];
+ if (xValue <= -0.3) {
modalPrevImage(e);
- } else if (e.deltaX >= 0.6) {
+ isWaiting = true;
+ } else if (xValue >= 0.3) {
modalNextImage(e);
+ isWaiting = true;
}
+ if (isWaiting) {
+ await sleepUntil(() => {
+ const xValue = navigator.getGamepads()[index].axes[0]
+ if (xValue < 0.3 && xValue > -0.3) {
+ return true;
+ }
+ }, opts.js_modal_lightbox_gamepad_repeat);
+ isWaiting = false;
+ }
+ }, 10);
+});
+
+/*
+Primarily for vr controller type pointer devices.
+I use the wheel event because there's currently no way to do it properly with web xr.
+ */
+let isScrolling = false;
+window.addEventListener('wheel', (e) => {
+ if (!opts.js_modal_lightbox_gamepad || isScrolling) return;
+ isScrolling = true;
+
+ if (e.deltaX <= -0.6) {
+ modalPrevImage(e);
+ } else if (e.deltaX >= 0.6) {
+ modalNextImage(e);
+ }
- setTimeout(() => {
- isScrolling = false;
- }, delay);
- }); \ No newline at end of file
+ setTimeout(() => {
+ isScrolling = false;
+ }, opts.js_modal_lightbox_gamepad_repeat);
+});
+
+function sleepUntil(f, timeout) {
+ return new Promise((resolve) => {
+ const timeStart = new Date();
+ const wait = setInterval(function() {
+ if (f() || new Date() - timeStart > timeout) {
+ clearInterval(wait);
+ resolve();
+ }
+ }, 20);
+ });
+}
diff --git a/javascript/localization.js b/javascript/localization.js
index 1a5a1dbb..0123b877 100644
--- a/javascript/localization.js
+++ b/javascript/localization.js
@@ -25,6 +25,10 @@ re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u
original_lines = {}
translated_lines = {}
+function hasLocalization() {
+ return window.localization && Object.keys(window.localization).length > 0;
+}
+
function textNodesUnder(el){
var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
while(n=walk.nextNode()) a.push(n);
@@ -35,11 +39,11 @@ function canBeTranslated(node, text){
if(! text) return false;
if(! node.parentElement) return false;
- parentType = node.parentElement.nodeName
+ var parentType = node.parentElement.nodeName
if(parentType=='SCRIPT' || parentType=='STYLE' || parentType=='TEXTAREA') return false;
if (parentType=='OPTION' || parentType=='SPAN'){
- pnode = node
+ var pnode = node
for(var level=0; level<4; level++){
pnode = pnode.parentElement
if(! pnode) break;
@@ -69,7 +73,7 @@ function getTranslation(text){
}
function processTextNode(node){
- text = node.textContent.trim()
+ var text = node.textContent.trim()
if(! canBeTranslated(node, text)) return
@@ -105,7 +109,7 @@ function processNode(node){
}
function dumpTranslations(){
- dumped = {}
+ var dumped = {}
if (localization.rtl) {
dumped.rtl = true
}
@@ -119,39 +123,8 @@ function dumpTranslations(){
return dumped
}
-onUiUpdate(function(m){
- m.forEach(function(mutation){
- mutation.addedNodes.forEach(function(node){
- processNode(node)
- })
- });
-})
-
-
-document.addEventListener("DOMContentLoaded", function() {
- processNode(gradioApp())
-
- if (localization.rtl) { // if the language is from right to left,
- (new MutationObserver((mutations, observer) => { // wait for the style to load
- mutations.forEach(mutation => {
- mutation.addedNodes.forEach(node => {
- if (node.tagName === 'STYLE') {
- observer.disconnect();
-
- for (const x of node.sheet.rules) { // find all rtl media rules
- if (Array.from(x.media || []).includes('rtl')) {
- x.media.appendMedium('all'); // enable them
- }
- }
- }
- })
- });
- })).observe(gradioApp(), { childList: true });
- }
-})
-
function download_localization() {
- text = JSON.stringify(dumpTranslations(), null, 4)
+ var text = JSON.stringify(dumpTranslations(), null, 4)
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
@@ -163,3 +136,36 @@ function download_localization() {
document.body.removeChild(element);
}
+
+if(hasLocalization()) {
+ onUiUpdate(function (m) {
+ m.forEach(function (mutation) {
+ mutation.addedNodes.forEach(function (node) {
+ processNode(node)
+ })
+ });
+ })
+
+
+ document.addEventListener("DOMContentLoaded", function () {
+ processNode(gradioApp())
+
+ if (localization.rtl) { // if the language is from right to left,
+ (new MutationObserver((mutations, observer) => { // wait for the style to load
+ mutations.forEach(mutation => {
+ mutation.addedNodes.forEach(node => {
+ if (node.tagName === 'STYLE') {
+ observer.disconnect();
+
+ for (const x of node.sheet.rules) { // find all rtl media rules
+ if (Array.from(x.media || []).includes('rtl')) {
+ x.media.appendMedium('all'); // enable them
+ }
+ }
+ }
+ })
+ });
+ })).observe(gradioApp(), { childList: true });
+ }
+ })
+}
diff --git a/javascript/notification.js b/javascript/notification.js
index 8ddd4c5d..83fce1f8 100644
--- a/javascript/notification.js
+++ b/javascript/notification.js
@@ -2,15 +2,15 @@
let lastHeadImg = null;
-notificationButton = null
+let notificationButton = null;
onUiUpdate(function(){
if(notificationButton == null){
notificationButton = gradioApp().getElementById('request_notifications')
if(notificationButton != null){
- notificationButton.addEventListener('click', function (evt) {
- Notification.requestPermission();
+ notificationButton.addEventListener('click', () => {
+ void Notification.requestPermission();
},true);
}
}
diff --git a/javascript/progressbar.js b/javascript/progressbar.js
index 23bbf298..8d2c3492 100644
--- a/javascript/progressbar.js
+++ b/javascript/progressbar.js
@@ -1,16 +1,15 @@
// code related to showing and updating progressbar shown as the image is being made
-function rememberGallerySelection(id_gallery){
+function rememberGallerySelection(){
}
-function getGallerySelectedIndex(id_gallery){
+function getGallerySelectedIndex(){
}
function request(url, data, handler, errorHandler){
var xhr = new XMLHttpRequest();
- var url = url;
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
@@ -107,7 +106,7 @@ function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgre
divProgress.style.width = rect.width + "px";
}
- progressText = ""
+ let progressText = ""
divInner.style.width = ((res.progress || 0) * 100.0) + '%'
divInner.style.background = res.progress ? "" : "transparent"
diff --git a/javascript/ui.js b/javascript/ui.js
index bfe31525..ed9673d6 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -1,7 +1,7 @@
// various functions for interaction with ui.py not large enough to warrant putting them in separate files
function set_theme(theme){
- gradioURL = window.location.href
+ var gradioURL = window.location.href
if (!gradioURL.includes('?__theme=')) {
window.location.replace(gradioURL + '?__theme=' + theme);
}
@@ -47,7 +47,7 @@ function extract_image_from_gallery(gallery){
return [gallery[0]];
}
- index = selected_gallery_index()
+ var index = selected_gallery_index()
if (index < 0 || index >= gallery.length){
// Use the first image in the gallery as the default
@@ -58,7 +58,7 @@ function extract_image_from_gallery(gallery){
}
function args_to_array(args){
- res = []
+ var res = []
for(var i=0;i<args.length;i++){
res.push(args[i])
}
@@ -138,7 +138,7 @@ function get_img2img_tab_index() {
}
function create_submit_args(args){
- res = []
+ var res = []
for(var i=0;i<args.length;i++){
res.push(args[i])
}
@@ -160,7 +160,7 @@ function showSubmitButtons(tabname, show){
}
function showRestoreProgressButton(tabname, show){
- button = gradioApp().getElementById(tabname + "_restore_progress")
+ var button = gradioApp().getElementById(tabname + "_restore_progress")
if(! button) return
button.style.display = show ? "flex" : "none"
@@ -207,8 +207,9 @@ function submit_img2img(){
return res
}
-function restoreProgressTxt2img(x){
+function restoreProgressTxt2img(){
showRestoreProgressButton("txt2img", false)
+ var id = localStorage.getItem("txt2img_task_id")
id = localStorage.getItem("txt2img_task_id")
@@ -220,10 +221,11 @@ function restoreProgressTxt2img(x){
return id
}
-function restoreProgressImg2img(x){
- showRestoreProgressButton("img2img", false)
- id = localStorage.getItem("img2img_task_id")
+function restoreProgressImg2img(){
+ showRestoreProgressButton("img2img", false)
+
+ var id = localStorage.getItem("img2img_task_id")
if(id) {
requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function(){
@@ -252,7 +254,7 @@ function modelmerger(){
function ask_for_style_name(_, prompt_text, negative_prompt_text) {
- name_ = prompt('Style name:')
+ var name_ = prompt('Style name:')
return [name_, prompt_text, negative_prompt_text]
}
@@ -287,11 +289,11 @@ function recalculate_prompts_img2img(){
}
-opts = {}
+var opts = {}
onUiUpdate(function(){
if(Object.keys(opts).length != 0) return;
- json_elem = gradioApp().getElementById('settings_json')
+ var json_elem = gradioApp().getElementById('settings_json')
if(json_elem == null) return;
var textarea = json_elem.querySelector('textarea')
@@ -340,12 +342,15 @@ onUiUpdate(function(){
registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button')
registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button')
- show_all_pages = gradioApp().getElementById('settings_show_all_pages')
- settings_tabs = gradioApp().querySelector('#settings div')
+ var show_all_pages = gradioApp().getElementById('settings_show_all_pages')
+ var settings_tabs = gradioApp().querySelector('#settings div')
if(show_all_pages && settings_tabs){
settings_tabs.appendChild(show_all_pages)
show_all_pages.onclick = function(){
gradioApp().querySelectorAll('#settings > div').forEach(function(elem){
+ if(elem.id == "settings_tab_licenses")
+ return;
+
elem.style.display = "block";
})
}
@@ -353,9 +358,9 @@ onUiUpdate(function(){
})
onOptionsChanged(function(){
- elem = gradioApp().getElementById('sd_checkpoint_hash')
- sd_checkpoint_hash = opts.sd_checkpoint_hash || ""
- shorthash = sd_checkpoint_hash.substr(0,10)
+ 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
@@ -390,7 +395,16 @@ function update_token_counter(button_id) {
function restart_reload(){
document.body.innerHTML='<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
- setTimeout(function(){location.reload()},2000)
+
+ var requestPing = function(){
+ requestGet("./internal/ping", {}, function(data){
+ location.reload();
+ }, function(){
+ setTimeout(requestPing, 500);
+ })
+ }
+
+ setTimeout(requestPing, 2000);
return []
}
diff --git a/javascript/ui_settings_hints.js b/javascript/ui_settings_hints.js
new file mode 100644
index 00000000..87a289d3
--- /dev/null
+++ b/javascript/ui_settings_hints.js
@@ -0,0 +1,41 @@
+// various hints and extra info for the settings tab
+
+onUiLoaded(function(){
+ createLink = function(elem_id, text, href){
+ var a = document.createElement('A')
+ a.textContent = text
+ a.target = '_blank';
+
+ elem = gradioApp().querySelector('#'+elem_id)
+ elem.insertBefore(a, elem.querySelector('label'))
+
+ return a
+ }
+
+ createLink("setting_samples_filename_pattern", "[wiki] ").href = "https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Custom-Images-Filename-Name-and-Subdirectory"
+ createLink("setting_directories_filename_pattern", "[wiki] ").href = "https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Custom-Images-Filename-Name-and-Subdirectory"
+
+ createLink("setting_quicksettings_list", "[info] ").addEventListener("click", function(event){
+ requestGet("./internal/quicksettings-hint", {}, function(data){
+ var table = document.createElement('table')
+ table.className = 'settings-value-table'
+
+ data.forEach(function(obj){
+ var tr = document.createElement('tr')
+ var td = document.createElement('td')
+ td.textContent = obj.name
+ tr.appendChild(td)
+
+ var td = document.createElement('td')
+ td.textContent = obj.label
+ tr.appendChild(td)
+
+ table.appendChild(tr)
+ })
+
+ popup(table);
+ })
+ });
+})
+
+
generated by cgit v1.2.1 (git 2.18.0) at 2024-09-20 11:34:35 +0000