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