Merge branch 'beta' of github.com:cmdr2/stable-diffusion-ui into beta

ui/index.html

@@ -301,12 +301,22 @@
                                 <input id="custom-width" name="custom-width" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)">
                                 &times;
                                 <input id="custom-height" name="custom-height" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)"><br>
+                                <small>Resize:</small><br>
+                                <input id="resize-slider" name="resize-slider" class="editor-slider" value="1" type="range" min="0.4" max="2" step="0.005" style="width:100%;"><br>
+                                <div id="enlarge-buttons"><button data-factor="0.5" class="tertiaryButton smallButton">×0.5</button>&nbsp;<button data-factor="1.2" class="tertiaryButton smallButton">×1.2</button>&nbsp;<button data-factor="1.5" class="tertiaryButton smallButton">×1.5</button>&nbsp;<button data-factor="2" class="tertiaryButton smallButton">×2</button>&nbsp;<button data-factor="3" class="tertiaryButton smallButton">×3</button></div>
 
-                                <small>Enlarge:</small><br>
+                                <div class="two-column">
-                                <div id="enlarge-buttons"><button id="enlarge15" class="tertiaryButton smallButton">×1.5</button>&nbsp;<button id="enlarge2" class="tertiaryButton smallButton">×2</button>&nbsp;<button id="enlarge3" class="tertiaryButton smallButton">×3</button></div>
+                                    <div class="left-column">
+                                        <small>Recently&nbsp;used:</small><br>
+                                        <div id="recent-resolution-list">
+                                        </div>
+                                    </div>
+                                    <div class="right-column">
+                                        <small>Common&nbsp;sizes:</small><br>
+                                        <div id="common-resolution-list">
+                                        </div>
+                                    </div>
 
-                                <small>Recently&nbsp;used:</small><br>
-                                <div id="recent-resolution-list">
                                 </div>
                             </div>
                         </div>

ui/media/css/main.css

@@ -34,6 +34,7 @@ code {
     width: 32px;
     height: 32px;
     transform: translateY(4px);
+    cursor: pointer;
 }
 #prompt {
     width: 100%;
@@ -1778,6 +1779,10 @@ div#recent-resolutions-popup small {
     opacity: 0.7;
 }
 
+div#common-resolution-list button {
+    background: var(--background-color1);
+}
+
 td#image-size-options small {
     margin-right: 0px !important;
 }
@@ -1794,6 +1799,27 @@ div#enlarge-buttons {
     text-align: center;
 }
 
+.two-column {  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  gap: 0px 0.5em;
+  grid-auto-flow: row;
+  grid-template-areas:
+    "left-column right-column";
+}
+
+.left-column {
+  justify-self: center;
+  align-self: center;
+  grid-area: left-column;
+}
+
+.right-column {
+  justify-self: center;
+  align-self: center;
+  grid-area: right-column;
+}
+
 .clickable {
     cursor: pointer;
 }

ui/media/js/main.js

@@ -83,9 +83,9 @@ let customHeightField = document.querySelector("#custom-height")
 let recentResolutionsButton = document.querySelector("#recent-resolutions-button")
 let recentResolutionsPopup = document.querySelector("#recent-resolutions-popup")
 let recentResolutionList = document.querySelector("#recent-resolution-list")
-let enlarge15Button = document.querySelector("#enlarge15")
+let commonResolutionList = document.querySelector("#common-resolution-list")
-let enlarge2Button = document.querySelector("#enlarge2")
+let resizeSlider = document.querySelector("#resize-slider")
-let enlarge3Button = document.querySelector("#enlarge3")
+let enlargeButtons = document.querySelector("#enlarge-buttons")
 let swapWidthHeightButton = document.querySelector("#swap-width-height")
 let smallImageWarning = document.querySelector("#small_image_warning")
 let initImageSelector = document.querySelector("#init_image")
@@ -2792,38 +2792,25 @@ let recentResolutionsValues = []
 
 ;(function() {
     ///// Init resolutions dropdown
-    function makeResolutionButtons() {
+
-        recentResolutionList.innerHTML = ""
+    function makeResolutionButtons(listElement, resolutionList) {
-        recentResolutionsValues.forEach((el) => {
+        listElement.innerHTML = ""
-            let button = document.createElement("button")
+        resolutionList.forEach((el) => {
-            button.classList.add("tertiaryButton")
+            let button = createElement("button", {style: "width: 8em;"}, "tertiaryButton", `${el.w}×${el.h}`)
-            button.style.width = "8em"
-            button.innerHTML = `${el.w}×${el.h}`
             button.addEventListener("click", () => {
                 customWidthField.value = el.w
                 customHeightField.value = el.h
                 hidePopup()
             })
-            recentResolutionList.appendChild(button)
+            listElement.appendChild(button)
-            recentResolutionList.appendChild(document.createElement("br"))
+            listElement.appendChild(document.createElement("br"))
         })
-        localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
     }
 
-    enlarge15Button.addEventListener("click", () => {
+    enlargeButtons.querySelectorAll("button").forEach( button => button.addEventListener("click", e => {
-        enlargeImageSize(1.5)
+        enlargeImageSize(parseFloat(button.dataset["factor"]))
         hidePopup()
-    })
+    }))
-
-    enlarge2Button.addEventListener("click", () => {
-        enlargeImageSize(2)
-        hidePopup()
-    })
-
-    enlarge3Button.addEventListener("click", () => {
-        enlargeImageSize(3)
-        hidePopup()
-    })
 
     customWidthField.addEventListener("change", () => {
         let w = customWidthField.value
@@ -2850,25 +2837,29 @@ let recentResolutionsValues = []
         recentResolutionsValues = recentResolutionsValues.slice(0, 8)
 
         localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
-        makeResolutionButtons()
+        makeResolutionButtons(recentResolutionList, recentResolutionsValues)
     })
 
-    let _jsonstring = localStorage.recentResolutionsValues
+    const defaultResolutionsValues = [
-    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 },
+            { w: 1024, h: 1024 },
+            { w: 1920, h: 1080 },
         ]
+    let _jsonstring = localStorage.recentResolutionsValues
+    if (_jsonstring == undefined) {
+        recentResolutionsValues = defaultResolutionsValues;
         localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
     } else {
         recentResolutionsValues = JSON.parse(localStorage.recentResolutionsValues)
     }
-    makeResolutionButtons()
+
+    makeResolutionButtons(recentResolutionList, recentResolutionsValues)
+    makeResolutionButtons(commonResolutionList, defaultResolutionsValues)
 
     recentResolutionsValues.forEach((val) => {
         addImageSizeOption(val.w)
@@ -2885,6 +2876,9 @@ let recentResolutionsValues = []
         customWidthField.value = widthField.value
         customHeightField.value = heightField.value
         recentResolutionsPopup.classList.remove("displayNone")
+        resizeSlider.value = 1
+        resizeSlider.dataset["w"] = widthField.value
+        resizeSlider.dataset["h"] = heightField.value
         document.addEventListener("click", processClick)
     }
 
@@ -2903,6 +2897,20 @@ let recentResolutionsValues = []
         }
     })
 
+    resizeSlider.addEventListener("input", e => {
+        let w = parseInt(resizeSlider.dataset["w"])
+        let h = parseInt(resizeSlider.dataset["h"])
+        let factor = parseFloat(resizeSlider.value)
+        let step = customWidthField.step
+
+        customWidthField.value = roundToMultiple(w*factor*factor, step)
+        customHeightField.value = roundToMultiple(h*factor*factor, step)
+    })
+
+    resizeSlider.addEventListener("change", e => {
+        hidePopup()
+    })
+
     swapWidthHeightButton.addEventListener("click", (event) => {
         let temp = widthField.value
         widthField.value = heightField.value