Support more image sizes (#1441)

* Support more image sizes
With diffusers, width and height must be a multiple of 8 (instead of 64), allowing more resolution values.

* Add swap button

* Change popup button icon

ui/index.html

@@ -191,51 +191,22 @@
                         </select>
                         <a href="https://github.com/easydiffusion/easydiffusion/wiki/How-to-Use#samplers" target="_blank"><i class="fa-solid fa-circle-question help-btn"><span class="simple-tooltip top-left">Click to learn more about samplers</span></i></a>
                     </td></tr>
-                    <tr class="pl-5"><td><label>Image Size: </label></td><td>
-                        <select id="width" name="width" value="512">
-                            <option value="128">128 (*)</option>
-                            <option value="192">192</option>
-                            <option value="256">256 (*)</option>
-                            <option value="320">320</option>
-                            <option value="384">384</option>
-                            <option value="448">448</option>
-                            <option value="512" selected>512 (*)</option>
-                            <option value="576">576</option>
-                            <option value="640">640</option>
-                            <option value="704">704</option>
-                            <option value="768">768 (*)</option>
-                            <option value="832">832</option>
-                            <option value="896">896</option>
-                            <option value="960">960</option>
-                            <option value="1024">1024 (*)</option>
-                            <option value="1280">1280</option>
-                            <option value="1536">1536</option>
-                            <option value="1792">1792</option>
-                            <option value="2048">2048</option>
-                        </select>
+                    <tr class="pl-5"><td><label>Image Size: </label></td><td id="image-size-options">
+                        <input id="width" name="width" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)">
                         <label for="width"><small>(width)</small></label>
-                        <select id="height" name="height" value="512">
-                            <option value="128">128 (*)</option>
-                            <option value="192">192</option>
-                            <option value="256">256 (*)</option>
-                            <option value="320">320</option>
-                            <option value="384">384</option>
-                            <option value="448">448</option>
-                            <option value="512" selected>512 (*)</option>
-                            <option value="576">576</option>
-                            <option value="640">640</option>
-                            <option value="704">704</option>
-                            <option value="768">768 (*)</option>
-                            <option value="832">832</option>
-                            <option value="896">896</option>
-                            <option value="960">960</option>
-                            <option value="1024">1024 (*)</option>
-                            <option value="1280">1280</option>
-                            <option value="1536">1536</option>
-                            <option value="1792">1792</option>
-                            <option value="2048">2048</option>
-                        </select>
+                        <span id="swap-width-height" class="clickable smallButton" style="margin-left: 2px; margin-right:2px;"><i class="fa-solid fa-right-left"><span class="simple-tooltip top-left"> Swap width and height </span></i></span>
+                        <input id="height" name="height" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)">
                         <label for="height"><small>(height)</small></label>
+                        <div id="recent-resolutions-container">
+                            <span id="recent-resolutions-button" class="clickable"><i class="fa-solid fa-sliders"><span class="simple-tooltip top-left"> Recent sizes </span></i></span>
+                            <div id="recent-resolutions-popup" class="displayNone">
+                                <small>Upscale:</small><br>
+                                <button id="upscale15" class="tertiaryButton smallButton">×1.5</button>&nbsp;<button id="upscale2" class="tertiaryButton smallButton">×2</button>&nbsp;<button id="upscale3" class="tertiaryButton smallButton">×3</button><br>
+                                <small>Recently&nbsp;used:</small><br>
+                                <div id="recent-resolution-list">
+                                </div>
+                            </div>
+                        </div>
                         <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" type="number" min="1" step="1" style="width: 42pt" value="25" onkeypress="preventNonNumericalInput(event)"></td></tr>

ui/media/css/main.css

@@ -1754,6 +1754,38 @@ body.wait-pause {
     font-size: 10pt;
 }
 
+input#width, input#height {
+    width: 47pt;
+}
+
+div#recent-resolutions-container {
+    position: relative;
+    display:inline-block;
+}
+
+div#recent-resolutions-popup {
+    position: absolute;
+    right: 0px;
+    margin: 3px;
+    padding: 0.2em 1em 0.4em 1em;
+    z-index: 1;
+    background: var(--background-color3);
+    border-radius: 4px;
+    box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15);
+}
+
+div#recent-resolutions-popup small {
+    opacity: 0.7;
+}
+
+td#image-size-options small {
+    margin-right: 0px !important;
+}
+
+.clickable {
+    cursor: pointer;
+}
+
 .imgContainer .spinner {
     position: absolute;
     left: 50%;
@@ -1769,6 +1801,7 @@ body.wait-pause {
     border: 1px solid var(--button-color);
     box-shadow: 0px 0px 4px black;
 }
+
 .imgContainer .spinnerStatus {
     font-size: 10pt;
 }

ui/media/js/main.js

@@ -77,6 +77,13 @@ let randomSeedField = document.querySelector("#random_seed")
 let seedField = document.querySelector("#seed")
 let widthField = document.querySelector("#width")
 let heightField = document.querySelector("#height")
+let recentResolutionsButton = document.querySelector("#recent-resolutions-button")
+let recentResolutionsPopup = document.querySelector("#recent-resolutions-popup")
+let recentResolutionList = document.querySelector("#recent-resolution-list")
+let upscale15Button = document.querySelector("#upscale15")
+let upscale2Button = document.querySelector("#upscale2")
+let upscale3Button = document.querySelector("#upscale3")
+let swapWidthHeightButton = document.querySelector("#swap-width-height")
 let smallImageWarning = document.querySelector("#small_image_warning")
 let initImageSelector = document.querySelector("#init_image")
 let initImagePreview = document.querySelector("#init_image_preview")
@@ -2570,3 +2577,121 @@ createLoraEntries()
 // }
 
 // document.querySelectorAll("input[type=number]").forEach(showSpinnerOnlyOnHover)
+
+////////////////////////////// Image Size Widget //////////////////////////////////////////
+
+function roundToMultiple(number, n) {
+    if (n=="") { n=1 }
+    return Math.round(number / n) * n;
+}
+
+function upscaleImageSize(factor) {
+    let step = width.step
+    width.value  = roundToMultiple(width.value*factor, step)
+    height.value = roundToMultiple(height.value*factor, step)
+}
+
+
+function makeResolutionButtons() {
+    recentResolutionList.innerHTML = ""
+    recentResolutionsValues.forEach( el => {
+        let button = document.createElement("button")
+        button.classList.add("tertiaryButton")
+        button.style.width="8em"
+        button.innerHTML = `${el.w}×${el.h}`
+        button.addEventListener("click", () => {
+            width.value=el.w
+            height.value=el.h
+            width.dispatchEvent(new Event("change"))
+            height.dispatchEvent(new Event("change"))
+            recentResolutionsPopup.classList.add("displayNone")
+        })
+        recentResolutionList.appendChild(button)
+        recentResolutionList.appendChild(document.createElement("br"))
+    })
+    localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
+}
+
+let recentResolutionsValues = []
+
+;(function() { ///// Init resolutions dropdown
+    upscale15Button.addEventListener("click", () => {
+        upscaleImageSize(1.5)
+        recentResolutionsPopup.classList.add("displayNone")
+    })
+
+    upscale2Button.addEventListener("click", () => {
+        upscaleImageSize(2)
+        recentResolutionsPopup.classList.add("displayNone")
+    })
+
+    upscale3Button.addEventListener("click", () => {
+        upscaleImageSize(3)
+        recentResolutionsPopup.classList.add("displayNone")
+    })
+
+    width.addEventListener("change", () => {
+        let w = width.value
+        width.value = roundToMultiple(w, width.step)
+        if (w!=width.value) {
+            showToast(`Rounded width to the closest multiple of ${width.step}.`)
+        }
+    })
+
+    height.addEventListener("change", () => {
+        let h = height.value
+        height.value = roundToMultiple(h, height.step)
+        if (h!=height.value) {
+            showToast(`Rounded height to the closest multiple of ${height.step}.`)
+        }
+    })
+
+    makeImageBtn.addEventListener("click", () => {
+        let w = width.value
+        let h = height.value
+
+        recentResolutionsValues = recentResolutionsValues.filter(el => (el.w!=w || el.h!=h))
+        recentResolutionsValues.unshift({w: w, h:h})
+        recentResolutionsValues = recentResolutionsValues.slice(0,8)
+
+        localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
+        makeResolutionButtons()
+    })
+
+    let _jsonstring = localStorage.recentResolutionsValues
+    if (_jsonstring==undefined) {
+        recentResolutionsValues = [
+            {w:512,h:512},
+            {w:640,h:448},
+            {w:448,h:640},
+            {w:512,h:768},
+            {w:768,h:512},
+            {w:1024,h:768},
+            {w:768,h:1024},
+        ]
+        localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
+    } else {
+        recentResolutionsValues = JSON.parse(localStorage.recentResolutionsValues)
+    }
+    makeResolutionButtons()
+
+    function processClick(e) {
+        if (!recentResolutionsPopup.contains(e.target)) {
+            recentResolutionsPopup.classList.add("displayNone")
+        }
+        document.removeEventListener("click", processClick)
+    }
+
+    recentResolutionsButton.addEventListener("click", (event) => {
+        recentResolutionsPopup.classList.toggle("displayNone")
+        event.stopPropagation()
+        document.addEventListener("click", processClick)
+    })
+
+    swapWidthHeightButton.addEventListener("click", (event) => {
+        let temp = width.value
+        width.value = height.value
+        height.value = temp
+    })
+})()
+

ui/media/js/parameters.js

@@ -453,6 +453,8 @@ async function getAppConfig() {
             document.querySelectorAll("#sampler_name option.diffusers-only").forEach((option) => {
                 option.style.display = "none"
             })
+            width.step=64
+            height.step=64
         } else {
             document.querySelector("#lora_model_container").style.display = ""
             document.querySelector("#tiling_container").style.display = ""
@@ -463,6 +465,8 @@ async function getAppConfig() {
             document.querySelector("#clip_skip_config").classList.remove("displayNone")
             document.querySelector("#embeddings-button").classList.remove("displayNone")
             document.querySelector("#negative-embeddings-button").classList.remove("displayNone")
+            width.step=8
+            height.step=8
         }
 
         console.log("get config status response", config)