forked from extern/easydiffusion
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
This commit is contained in:
JeLuF
GitHub
parent
eedf6f0aad
commit
4d3f55622a
@ -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> <button id="upscale2" class="tertiaryButton smallButton">×2</button> <button id="upscale3" class="tertiaryButton smallButton">×3</button><br>
|
||||
<small>Recently 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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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
|
||||
})
|
||||
})()
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user