extern/easydiffusion
1
0
Fork 1
mirror of https://github.com/easydiffusion/easydiffusion.git synced 2024-11-22 08:13:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
cmdr2 2023-08-14 18:52:50 +05:30
commit e80001e8c8
4 changed files with 81 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
patch.patch Normal file
View File

Binary file not shown.

16
ui/index.html
View File

@ -301,14 +301,24 @@
<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 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="two-column">
<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>
</div>
</div>
</div>
<div id="small_image_warning" class="displayNone">Small image sizes can cause bad image quality</div>
</td></tr>

26
ui/media/css/main.css
View File

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

72
ui/media/js/main.js
View File

@ -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 enlarge2Button = document.querySelector("#enlarge2")
let enlarge3Button = document.querySelector("#enlarge3")
let commonResolutionList = document.querySelector("#common-resolution-list")
let resizeSlider = document.querySelector("#resize-slider")
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 = ""
recentResolutionsValues.forEach((el) => {
let button = document.createElement("button")
button.classList.add("tertiaryButton")
button.style.width = "8em"
button.innerHTML = `${el.w}&times;${el.h}`
function makeResolutionButtons(listElement, resolutionList) {
listElement.innerHTML = ""
resolutionList.forEach((el) => {
let button = createElement("button", {style: "width: 8em;"}, "tertiaryButton", `${el.w}×${el.h}`)
button.addEventListener("click", () => {
customWidthField.value = el.w
customHeightField.value = el.h
hidePopup()
})
recentResolutionList.appendChild(button)
recentResolutionList.appendChild(document.createElement("br"))
listElement.appendChild(button)
listElement.appendChild(document.createElement("br"))
})
localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
}
enlarge15Button.addEventListener("click", () => {
enlargeImageSize(1.5)
enlargeButtons.querySelectorAll("button").forEach( button => button.addEventListener("click", e => {
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
if (_jsonstring == undefined) {
recentResolutionsValues = [
const defaultResolutionsValues = [
{ 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