From c57919ea2a8e4a23a05d21f28928e08bbf34c59e Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Sun, 16 Oct 2022 17:22:56 +0300 Subject: keep focus on current element when updating gallery --- javascript/progressbar.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index 076f0a97..c7d0343f 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -34,7 +34,7 @@ function check_progressbar(id_part, id_progressbar, id_progressbar_span, id_skip preview.style.height = gallery.clientHeight + "px" //only watch gallery if there is a generation process going on - check_gallery(id_gallery); + check_gallery(id_gallery); var progressDiv = gradioApp().querySelectorAll('#' + id_progressbar_span).length > 0; if(!progressDiv){ @@ -73,8 +73,10 @@ function check_gallery(id_gallery){ let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2') if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) { //automatically re-open previously selected index (if exists) + activeElement = document.activeElement; galleryButtons[prevSelectedIndex].click(); - showGalleryImage(); + showGalleryImage(); + if(activeElement) activeElement.focus() } }) galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false }) -- cgit v1.2.3 From 26a11776e4070af30b864ab0ddf25dcda21631a7 Mon Sep 17 00:00:00 2001 From: dvsilch <743422767@qq.com> Date: Mon, 17 Oct 2022 00:51:10 +0800 Subject: fix: add null check when start running project the currentButton is null --- javascript/imageviewer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'javascript') diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index 65a33dd7..d4ab6984 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -31,7 +31,7 @@ function updateOnBackgroundChange() { } }) - if (modalImage.src != currentButton.children[0].src) { + if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) { modalImage.src = currentButton.children[0].src; if (modalImage.style.display === 'none') { modal.style.setProperty('background-image', `url(${modalImage.src})`) -- cgit v1.2.3 From a1d3cbf92cfde6b3e02a9c795412d01cdc268934 Mon Sep 17 00:00:00 2001 From: fortypercnt <114840933+fortypercnt@users.noreply.github.com> Date: Mon, 17 Oct 2022 05:25:34 +0200 Subject: Fix #2750 left / top alignment was necessary with gradio 3.4.1. In gradio 3.5 the parent div of the image mask is centered, so the left / top alignment put the mask in the wrong place as described in #2750 #2795 #2805. This fix was tested on Windows 10 / Chrome. --- javascript/imageMaskFix.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'javascript') diff --git a/javascript/imageMaskFix.js b/javascript/imageMaskFix.js index 3d77bfe9..9fe7a603 100644 --- a/javascript/imageMaskFix.js +++ b/javascript/imageMaskFix.js @@ -31,8 +31,8 @@ function imageMaskResize() { wrapper.style.width = `${wW}px`; wrapper.style.height = `${wH}px`; - wrapper.style.left = `${(w-wW)/2}px`; - wrapper.style.top = `${(h-wH)/2}px`; + wrapper.style.left = `0px`; + wrapper.style.top = `0px`; canvases.forEach( c => { c.style.width = c.style.height = ''; @@ -42,4 +42,4 @@ function imageMaskResize() { }); } - onUiUpdate(() => imageMaskResize()); \ No newline at end of file + onUiUpdate(() => imageMaskResize()); -- cgit v1.2.3 From 8c6a981d5d9ef30381ac2327460285111550acbc Mon Sep 17 00:00:00 2001 From: Michoko Date: Mon, 17 Oct 2022 11:05:05 +0200 Subject: Added dark mode switch Launch the UI in dark mode with the --dark-mode switch --- javascript/ui.js | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'javascript') diff --git a/javascript/ui.js b/javascript/ui.js index 9e1bed4c..bfa72885 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -1,5 +1,12 @@ // various functions for interation with ui.py not large enough to warrant putting them in separate files +function go_dark_mode(){ + gradioURL = window.location.href + if (!gradioURL.endsWith('?__theme=dark')) { + window.location.replace(gradioURL + '?__theme=dark'); + } +} + function selected_gallery_index(){ var buttons = gradioApp().querySelectorAll('[style="display: block;"].tabitem .gallery-item') var button = gradioApp().querySelector('[style="display: block;"].tabitem .gallery-item.\\!ring-2') -- cgit v1.2.3 From af3f6489d3b229da4e688eaf439adb5d3e4f070b Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Mon, 17 Oct 2022 16:57:19 +0300 Subject: possibly defeat losing of focus for prompt when generating images with gallery open --- javascript/progressbar.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'javascript') diff --git a/javascript/progressbar.js b/javascript/progressbar.js index c7d0343f..7a05726e 100644 --- a/javascript/progressbar.js +++ b/javascript/progressbar.js @@ -72,11 +72,17 @@ function check_gallery(id_gallery){ let galleryButtons = gradioApp().querySelectorAll('#'+id_gallery+' .gallery-item') let galleryBtnSelected = gradioApp().querySelector('#'+id_gallery+' .gallery-item.\\!ring-2') if (prevSelectedIndex !== -1 && galleryButtons.length>prevSelectedIndex && !galleryBtnSelected) { - //automatically re-open previously selected index (if exists) - activeElement = document.activeElement; + // automatically re-open previously selected index (if exists) + activeElement = gradioApp().activeElement; + galleryButtons[prevSelectedIndex].click(); showGalleryImage(); - if(activeElement) activeElement.focus() + + if(activeElement){ + // i fought this for about an hour; i don't know why the focus is lost or why this helps recover it + // if somenoe has a better solution please by all means + setTimeout(function() { activeElement.focus() }, 1); + } } }) galleryObservers[id_gallery].observe( gallery, { childList:true, subtree:false }) -- cgit v1.2.3 From 665beebc0825a6fad410c8252f27f6f6f0bd900b Mon Sep 17 00:00:00 2001 From: Michoko Date: Mon, 17 Oct 2022 18:24:24 +0200 Subject: Use of a --theme argument for more flexibility Added possibility to set the theme (light or dark) --- javascript/ui.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'javascript') diff --git a/javascript/ui.js b/javascript/ui.js index bfa72885..cfd0dcd3 100644 --- a/javascript/ui.js +++ b/javascript/ui.js @@ -1,9 +1,9 @@ // various functions for interation with ui.py not large enough to warrant putting them in separate files -function go_dark_mode(){ +function set_theme(theme){ gradioURL = window.location.href - if (!gradioURL.endsWith('?__theme=dark')) { - window.location.replace(gradioURL + '?__theme=dark'); + if (!gradioURL.includes('?__theme=')) { + window.location.replace(gradioURL + '?__theme=' + theme); } } -- cgit v1.2.3 From cf47d13c1e11fcb7169bac7488d2c39e579ee491 Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Mon, 17 Oct 2022 21:15:32 +0300 Subject: localization support --- javascript/localization.js | 146 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 javascript/localization.js (limited to 'javascript') diff --git a/javascript/localization.js b/javascript/localization.js new file mode 100644 index 00000000..e6644635 --- /dev/null +++ b/javascript/localization.js @@ -0,0 +1,146 @@ + +// 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_style_index: 'OPTION', + txt2img_style2_index: 'OPTION', + img2img_style_index: 'OPTION', + img2img_style2_index: 'OPTION', + setting_random_artist_categories: 'SPAN', + setting_face_restoration_model: 'SPAN', + setting_realesrgan_enabled_models: 'SPAN', + extras_upscaler_1: 'SPAN', + extras_upscaler_2: 'SPAN', +} + +re_num = /^[\.\d]+$/ +re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u + +original_lines = {} +translated_lines = {} + +function textNodesUnder(el){ + var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false); + while(n=walk.nextNode()) a.push(n); + return a; +} + +function canBeTranslated(node, text){ + if(! text) return false; + if(! node.parentElement) return false; + + parentType = node.parentElement.nodeName + if(parentType=='SCRIPT' || parentType=='STYLE' || parentType=='TEXTAREA') return false; + + if (parentType=='OPTION' || parentType=='SPAN'){ + pnode = node + for(var level=0; level<4; level++){ + pnode = pnode.parentElement + if(! pnode) break; + + if(ignore_ids_for_localization[pnode.id] == parentType) return false; + } + } + + if(re_num.test(text)) return false; + if(re_emoji.test(text)) return false; + return true +} + +function getTranslation(text){ + if(! text) return undefined + + if(translated_lines[text] === undefined){ + original_lines[text] = 1 + } + + tl = localization[text] + if(tl !== undefined){ + translated_lines[tl] = 1 + } + + return tl +} + +function processTextNode(node){ + text = node.textContent.trim() + + if(! canBeTranslated(node, text)) return + + tl = getTranslation(text) + if(tl !== undefined){ + node.textContent = tl + } +} + +function processNode(node){ + if(node.nodeType == 3){ + processTextNode(node) + return + } + + if(node.title){ + tl = getTranslation(node.title) + if(tl !== undefined){ + node.title = tl + } + } + + if(node.placeholder){ + tl = getTranslation(node.placeholder) + if(tl !== undefined){ + node.placeholder = tl + } + } + + textNodesUnder(node).forEach(function(node){ + processTextNode(node) + }) +} + +function dumpTranslations(){ + dumped = {} + + Object.keys(original_lines).forEach(function(text){ + if(dumped[text] !== undefined) return + + dumped[text] = localization[text] || text + }) + + return dumped +} + +onUiUpdate(function(m){ + m.forEach(function(mutation){ + mutation.addedNodes.forEach(function(node){ + processNode(node) + }) + }); +}) + + +document.addEventListener("DOMContentLoaded", function() { + processNode(gradioApp()) +}) + +function download_localization() { + text = JSON.stringify(dumpTranslations(), null, 4) + + var element = document.createElement('a'); + element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); + element.setAttribute('download', "localization.json"); + element.style.display = 'none'; + document.body.appendChild(element); + + element.click(); + + document.body.removeChild(element); +} -- cgit v1.2.3 From 43cb1ddad2af31170352394b81b9a299b151ea05 Mon Sep 17 00:00:00 2001 From: Adam Snodgrass Date: Mon, 17 Oct 2022 05:21:59 -0500 Subject: prevent highlighting/selecting image --- javascript/imageviewer.js | 1 + 1 file changed, 1 insertion(+) (limited to 'javascript') diff --git a/javascript/imageviewer.js b/javascript/imageviewer.js index d4ab6984..9e380c65 100644 --- a/javascript/imageviewer.js +++ b/javascript/imageviewer.js @@ -116,6 +116,7 @@ function showGalleryImage() { e.dataset.modded = true; if(e && e.parentElement.tagName == 'DIV'){ e.style.cursor='pointer' + e.style.userSelect='none' e.addEventListener('click', function (evt) { if(!opts.js_modal_lightbox) return; modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed) -- cgit v1.2.3 From 7543787a0a7d8a45c44f2293b242e128da7c5a1d Mon Sep 17 00:00:00 2001 From: Justin Maier Date: Mon, 17 Oct 2022 17:11:44 -0600 Subject: Auto select attention block for editing --- javascript/edit-attention.js | 35 ++++++++++++++++++++++++++++++++--- 1 file changed, 32 insertions(+), 3 deletions(-) (limited to 'javascript') diff --git a/javascript/edit-attention.js b/javascript/edit-attention.js index 67084e7a..c0d29a74 100644 --- a/javascript/edit-attention.js +++ b/javascript/edit-attention.js @@ -9,9 +9,38 @@ addEventListener('keydown', (event) => { let minus = "ArrowDown" if (event.key != plus && event.key != minus) return; - selectionStart = target.selectionStart; - selectionEnd = target.selectionEnd; - if(selectionStart == selectionEnd) return; + let selectionStart = target.selectionStart; + let selectionEnd = target.selectionEnd; + // If the user hasn't selected anything, let's select their current parenthesis block + if (selectionStart === selectionEnd) { + // Find opening parenthesis around current cursor + const before = target.value.substring(0, selectionStart); + let beforeParen = before.lastIndexOf("("); + if (beforeParen == -1) return; + let beforeParenClose = before.lastIndexOf(")"); + while (beforeParenClose !== -1 && beforeParenClose > beforeParen) { + beforeParen = before.lastIndexOf("(", beforeParen - 1); + beforeParenClose = before.lastIndexOf(")", beforeParenClose - 1); + } + + // Find closing parenthesis around current cursor + const after = target.value.substring(selectionStart); + let afterParen = after.indexOf(")"); + if (afterParen == -1) return; + let afterParenOpen = after.indexOf("("); + while (afterParenOpen !== -1 && afterParen > afterParenOpen) { + afterParen = after.indexOf(")", afterParen + 1); + afterParenOpen = after.indexOf("(", afterParenOpen + 1); + } + if (beforeParen === -1 || afterParen === -1) return; + + // Set the selection to the text between the parenthesis + const parenContent = target.value.substring(beforeParen + 1, selectionStart + afterParen); + const lastColon = parenContent.lastIndexOf(":"); + selectionStart = beforeParen + 1; + selectionEnd = selectionStart + lastColon; + target.setSelectionRange(selectionStart, selectionEnd); + } event.preventDefault(); -- cgit v1.2.3