Warn users about small image dimensions

Show a warning if the user chooses width & height < 512px

ui/index.html

@@ -208,6 +208,7 @@
                             <option value="2048">2048</option>
                         </select>
                         <label for="height"><small>(height)</small></label>
+                        <div id="small_image_warning" class="displayNone">Small image sizes can cause bad image quality</div>
                     </td></tr>
                     <tr class="pl-5"><td><label for="num_inference_steps">Inference Steps:</label></td><td> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25" onkeypress="preventNonNumericalInput(event)"></td></tr>
                     <tr class="pl-5"><td><label for="guidance_scale_slider">Guidance Scale:</label></td><td> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="11" max="500"> <input id="guidance_scale" name="guidance_scale" size="4" pattern="^[0-9\.]+$" onkeypress="preventNonNumericalInput(event)"></td></tr>

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;
 }

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;
-}
+}

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