diff --git a/ui/index.html b/ui/index.html index 18585292..e9e377d0 100644 --- a/ui/index.html +++ b/ui/index.html @@ -211,6 +211,7 @@ +
Small image sizes can cause bad image quality
diff --git a/ui/media/css/main.css b/ui/media/css/main.css index aa7e267f..bae4c682 100644 --- a/ui/media/css/main.css +++ b/ui/media/css/main.css @@ -1203,6 +1203,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 43042ce3..ce6dde15 100644 --- a/ui/media/js/main.js +++ b/ui/media/js/main.js @@ -24,6 +24,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") @@ -169,18 +170,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 } @@ -1307,6 +1308,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