From 05cafce1e8509bed0c044dfc874fe6b8cd5d0882 Mon Sep 17 00:00:00 2001 From: patriceac <48073125+patriceac@users.noreply.github.com> Date: Sat, 25 Feb 2023 13:02:09 -0800 Subject: [PATCH 01/30] Make the image editor scrollable as needed Some users on 4K screens zoom in their browser display, but this causes the editor buttons on the top right to be out of view, and since the editor is not scrollable, they have to zoom out to be able to hit 'save'. This change fixes that by making the image editor window vertically scrollable if it gets too large. No UI change on smaller screens (e.g. phones). --- ui/media/css/image-editor.css | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ui/media/css/image-editor.css b/ui/media/css/image-editor.css index 3b88ee4a..d5b0cf84 100644 --- a/ui/media/css/image-editor.css +++ b/ui/media/css/image-editor.css @@ -149,16 +149,21 @@ pointer-events: none; } - .image-editor-popup { --popup-margin: 16px; --popup-padding: 24px; } +@media screen and (min-width: 700px) { + .image-editor-popup { + overflow-y: auto; + } +} + .image-editor-popup > div { margin: var(--popup-margin); padding: var(--popup-padding); - min-height: calc(100vh - (2 * var(--popup-margin))); + min-height: calc(99h - (2 * var(--popup-margin))); max-width: none; min-width: fit-content; } @@ -186,7 +191,7 @@ .image-editor-popup > div > div { - min-height: calc(100vh - (2 * var(--popup-margin)) - (2 * var(--popup-padding))); + min-height: calc(99vh - (2 * var(--popup-margin)) - (2 * var(--popup-padding))); } .inpainter .image_editor_color { From 7c0ec9faaf6db30cbf60bac1e806a00566e87818 Mon Sep 17 00:00:00 2001 From: patriceac <48073125+patriceac@users.noreply.github.com> Date: Sun, 5 Mar 2023 19:19:02 -0800 Subject: [PATCH 02/30] Fix the display of the preview scale slider As per https://discord.com/channels/1014774730907209781/1014780368890630164/1080772220760109066. --- ui/media/css/main.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 6a7efc20..0def8908 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -541,6 +541,11 @@ div.img-preview img { display: none; padding: 4pt; } +#preview-tools .display-settings .dropdown-content { + right: -6px; + top: 20px; + box-shadow: none; +} .taskConfig { font-size: 10pt; color: #aaa; From 3b708e8d448864afcda3a6434efdab13e0379d26 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Fri, 10 Mar 2023 21:23:16 +0100 Subject: [PATCH 03/30] Fix autosave of modifiers image style --- ui/media/js/image-modifiers.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js index 9d80584d..5ec6b271 100644 --- a/ui/media/js/image-modifiers.js +++ b/ui/media/js/image-modifiers.js @@ -18,6 +18,9 @@ const CUSTOM_MODIFIERS_KEY = "customModifiers" function createModifierCard(name, previews, removeBy) { const modifierCard = document.createElement('div') + let style = previewImageField.value + let styleIndex = (style=='portrait') ? 0 : 1 + modifierCard.className = 'modifier-card' modifierCard.innerHTML = `
@@ -37,8 +40,8 @@ function createModifierCard(name, previews, removeBy) { errorText.innerText = 'No Image' if (typeof previews == 'object') { - image.src = previews[0]; // portrait - image.setAttribute('preview-type', 'portrait') + image.src = previews[styleIndex]; // portrait + image.setAttribute('preview-type', style) } else { image.remove() } From 257b14ee094c0288dee0fecacb73994d83cee95f Mon Sep 17 00:00:00 2001 From: patriceac <48073125+patriceac@users.noreply.github.com> Date: Sun, 12 Mar 2023 01:23:05 -0800 Subject: [PATCH 04/30] Notify plugins when image tags get refreshed Image modifiers may be temporarily hidden by plugins like searchable modifier search box, and when restoring a task (e.g. use settings) the image modifier s copied with the hidden class set, which makes it look like it's missing. By notifying plugins that the image tags have been refreshed, it allows it to act accordingly (in this case by making sure image tags are visible). --- ui/media/js/image-modifiers.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js index 9d80584d..c1795c7b 100644 --- a/ui/media/js/image-modifiers.js +++ b/ui/media/js/image-modifiers.js @@ -261,6 +261,7 @@ function refreshTagsList() { let brk = document.createElement('br') brk.style.clear = 'both' editorModifierTagsList.appendChild(brk) + document.dispatchEvent(new Event('refreshImageModifiers')) // notify plugins that the image tags have been refreshed } function toggleCardState(modifierName, makeActive) { From 03256f6bba2a7c205113e8664359e18cc81b8394 Mon Sep 17 00:00:00 2001 From: JeLuF Date: Sun, 12 Mar 2023 20:43:54 +0100 Subject: [PATCH 05/30] Warn users about small image dimensions Show a warning if the user chooses width & height < 512px --- ui/index.html | 1 + ui/media/css/main.css | 5 +++++ ui/media/css/themes.css | 5 ++++- ui/media/js/main.js | 18 ++++++++++++------ 4 files changed, 22 insertions(+), 7 deletions(-) diff --git a/ui/index.html b/ui/index.html index 297d3b5f..c0bf3404 100644 --- a/ui/index.html +++ b/ui/index.html @@ -208,6 +208,7 @@ +
Small image sizes can cause bad image quality
diff --git a/ui/media/css/main.css b/ui/media/css/main.css index 6a7efc20..9b0f3546 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1193,6 +1193,11 @@ div.top-right { right: 8px; } +#small_image_warning { + font-size: smaller; + color: var(--status-orange); +} + button#save-system-settings-btn { padding: 4pt 8pt; } diff --git a/ui/media/css/themes.css b/ui/media/css/themes.css index 0aed83a3..053199f8 100644 --- a/ui/media/css/themes.css +++ b/ui/media/css/themes.css @@ -37,6 +37,9 @@ /* Main theme color, hex color fallback. */ --theme-color-fallback: #673AB6; + --status-orange: rgb(200, 139, 0); + --status-green: green; + --status-red: red; } .theme-light { @@ -180,4 +183,4 @@ border: none; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25); border-radius: 10px; -} \ No newline at end of file +} diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 59d474f8..050799b4 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -21,6 +21,7 @@ let randomSeedField = document.querySelector("#random_seed") let seedField = document.querySelector('#seed') let widthField = document.querySelector('#width') let heightField = document.querySelector('#height') +let smallImageWarning = document.querySelector('#small_image_warning') let initImageSelector = document.querySelector("#init_image") let initImagePreview = document.querySelector("#init_image_preview") let initImageSizeBox = document.querySelector("#init_image_size_box") @@ -160,18 +161,18 @@ function setStatus(statusType, msg, msgType) { function setServerStatus(event) { switch(event.type) { case 'online': - serverStatusColor.style.color = 'green' - serverStatusMsg.style.color = 'green' + serverStatusColor.style.color = 'var(--status-green)' + serverStatusMsg.style.color = 'var(--status-green)' serverStatusMsg.innerText = 'Stable Diffusion is ' + event.message break case 'busy': - serverStatusColor.style.color = 'rgb(200, 139, 0)' - serverStatusMsg.style.color = 'rgb(200, 139, 0)' + serverStatusColor.style.color = 'var(--status-orange)' + serverStatusMsg.style.color = 'var(--status-orange)' serverStatusMsg.innerText = 'Stable Diffusion is ' + event.message break case 'error': - serverStatusColor.style.color = 'red' - serverStatusMsg.style.color = 'red' + serverStatusColor.style.color = 'var(--status-red)' + serverStatusMsg.style.color = 'var(--status-red)' serverStatusMsg.innerText = 'Stable Diffusion has stopped' break } @@ -1215,6 +1216,11 @@ function onDimensionChange() { else { imageInpainter.setImage(initImagePreview.src, widthValue, heightValue) } + if ( widthValue < 512 && heightValue < 512 ) { + smallImageWarning.classList.remove('displayNone') + } else { + smallImageWarning.classList.add('displayNone') + } } diskPathField.disabled = !saveToDiskField.checked From ca555686ec2688c4353778ad76d89e1136d45dcc Mon Sep 17 00:00:00 2001 From: JeLuF Date: Sun, 12 Mar 2023 22:31:14 +0100 Subject: [PATCH 06/30] Rename user hint --- ...O NOT PLACE USER PLUGINS HERE, unless you are a developer.txt} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename ui/plugins/ui/{Put UI plugins here (developer team only).txt => DO NOT PLACE USER PLUGINS HERE, unless you are a developer.txt} (100%) diff --git a/ui/plugins/ui/Put UI plugins here (developer team only).txt b/ui/plugins/ui/DO NOT PLACE USER PLUGINS HERE, unless you are a developer.txt similarity index 100% rename from ui/plugins/ui/Put UI plugins here (developer team only).txt rename to ui/plugins/ui/DO NOT PLACE USER PLUGINS HERE, unless you are a developer.txt From 2916a33fa218884fb1dd9e0066390b05446fa6fd Mon Sep 17 00:00:00 2001 From: JeLuF Date: Mon, 13 Mar 2023 23:05:11 +0100 Subject: [PATCH 07/30] Only delete task sections if they are no longer processing --- ui/media/js/main.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ui/media/js/main.js b/ui/media/js/main.js index 59d474f8..494fdc5d 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -288,7 +288,10 @@ function showImages(reqBody, res, outputContainer, livePreview) { allHidden = false; } } - if(allHidden === true) {parentTaskContainer.classList.add("displayNone")} + if(allHidden === true) { + const req = htmlTaskMap.get(parentTaskContainer) + if(!req.isProcessing || req.batchesDone == req.batchCount) {parentTaskContainer.classList.add("displayNone")} + } }) }) } From 6cb981655e984ecf86dbb0485620ad0501b4cce0 Mon Sep 17 00:00:00 2001 From: cmdr2 Date: Tue, 14 Mar 2023 10:03:53 +0530 Subject: [PATCH 08/30] Fix a bug where the merge plugin wouldn't use the subfolder path of a model --- ui/plugins/ui/merge.plugin.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/plugins/ui/merge.plugin.js b/ui/plugins/ui/merge.plugin.js index 650668a8..6ff97286 100644 --- a/ui/plugins/ui/merge.plugin.js +++ b/ui/plugins/ui/merge.plugin.js @@ -367,8 +367,8 @@ document.querySelector('#merge-button').addEventListener('click', async function(e) { // Build request template - let model0 = document.querySelector('#mergeModelA').value - let model1 = document.querySelector('#mergeModelB').value + let model0 = mergeModelAField.value + let model1 = mergeModelBField.value let request = { model0: model0, model1: model1 } request['use_fp16'] = document.querySelector('#merge-fp').value == 'fp16' let iterations = document.querySelector('#merge-count').value>>0 From a4e496abc1c1a03a1d263302d59921e2707a6743 Mon Sep 17 00:00:00 2001 From: cmdr2 Date: Tue, 14 Mar 2023 10:34:52 +0530 Subject: [PATCH 09/30] version --- ui/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/index.html b/ui/index.html index 45233174..d49e1f4d 100644 --- a/ui/index.html +++ b/ui/index.html @@ -27,7 +27,7 @@

Easy Diffusion - v2.5.24 + v2.5.25

From 079402cb2f65ea52f256453b7439e43db19ebbc3 Mon Sep 17 00:00:00 2001 From: patriceac <48073125+patriceac@users.noreply.github.com> Date: Mon, 13 Mar 2023 22:06:21 -0700 Subject: [PATCH 10/30] Fix restoration of weighted tasks with truncated modifiers (#956) * Fix restoration of weighted tasks with truncated modifiers * Reverting this change Will create a separate PR for this as needed. Doesn't impact the other bug fix. * Update utils.js --- ui/media/js/image-modifiers.js | 4 ++-- ui/plugins/ui/Modifiers-wheel.plugin.js | 14 +++++++++++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/ui/media/js/image-modifiers.js b/ui/media/js/image-modifiers.js index 5ec6b271..b8282782 100644 --- a/ui/media/js/image-modifiers.js +++ b/ui/media/js/image-modifiers.js @@ -176,9 +176,9 @@ function refreshModifiersState(newTags) { // add modifier to active array if (!activeTags.map(x => x.name).includes(tag)) { // only add each tag once even if several custom modifier cards share the same tag const imageModifierCard = modifierCard.cloneNode(true) - imageModifierCard.querySelector('.modifier-card-label p').innerText = shortModifierName + imageModifierCard.querySelector('.modifier-card-label p').innerText = tag.replace(modifierName, shortModifierName) activeTags.push({ - 'name': modifierName, + 'name': tag, 'element': imageModifierCard, 'originElement': modifierCard }) diff --git a/ui/plugins/ui/Modifiers-wheel.plugin.js b/ui/plugins/ui/Modifiers-wheel.plugin.js index 6639873d..322cca8f 100644 --- a/ui/plugins/ui/Modifiers-wheel.plugin.js +++ b/ui/plugins/ui/Modifiers-wheel.plugin.js @@ -26,15 +26,25 @@ const delta = Math.sign(event.deltaY) let s = i.parentElement.getElementsByClassName('modifier-card-label')[0].getElementsByTagName("p")[0].innerText + let t + // find the corresponding tag + for (let it = 0; it < overlays.length; it++) { + if (i == overlays[it]) { + t = activeTags[it].name + break + } + } if (delta < 0) { // wheel scrolling up if (s.substring(0, 1) == '[' && s.substring(s.length-1) == ']') { s = s.substring(1, s.length - 1) + t = t.substring(1, t.length - 1) } else { if (s.substring(0, 10) !== '('.repeat(10) && s.substring(s.length-10) !== ')'.repeat(10)) { s = '(' + s + ')' + t = '(' + t + ')' } } } @@ -42,11 +52,13 @@ // wheel scrolling down if (s.substring(0, 1) == '(' && s.substring(s.length-1) == ')') { s = s.substring(1, s.length - 1) + t = t.substring(1, t.length - 1) } else { if (s.substring(0, 10) !== '['.repeat(10) && s.substring(s.length-10) !== ']'.repeat(10)) { s = '[' + s + ']' + t = '[' + t + ']' } } } @@ -54,7 +66,7 @@ // update activeTags for (let it = 0; it < overlays.length; it++) { if (i == overlays[it]) { - activeTags[it].name = s + activeTags[it].name = t break } } From 1fda12640fc41d84abcb78d521a80865975a74e1 Mon Sep 17 00:00:00 2001 From: patriceac <48073125+patriceac@users.noreply.github.com> Date: Mon, 13 Mar 2023 22:07:21 -0700 Subject: [PATCH 11/30] Custom Image Modifiers dialog tweaks (#935) * Custom Image Modifiers dialog tweaks Couple minor usability improvements for the custom image modifiers dialog: - set the focus to the textbox when opening the dialog - pressing the Escape key closes the dialog * Adding keyboard shortcuts Escape to cancel the changes, Ctrl+Enter to confirm the changes. No change to the existing UI behavior using the mouse. * Make the overlay focusable Allows the keyboard shortcuts to work if user clicks on the main window rather than the textbox itself. * Disable spell and grammar correction --- ui/index.html | 4 ++-- ui/media/js/image-modifiers.js | 20 ++++++++++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/ui/index.html b/ui/index.html index d49e1f4d..38ff4852 100644 --- a/ui/index.html +++ b/ui/index.html @@ -392,12 +392,12 @@
-