mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-20 18:08:00 +02:00
Merge Beta
This commit is contained in:
JeLuF
commit
55b2cacb85
@ -22,6 +22,14 @@
|
||||
Our focus continues to remain on an easy installation experience, and an easy user-interface. While still remaining pretty powerful, in terms of features and speed.
|
||||
|
||||
### Detailed changelog
|
||||
* 3.0.1 - 17 Aug 2023 - Fix broken embeddings with SDXL.
|
||||
* 3.0.1 - 16 Aug 2023 - Fix broken LoRA with SDXL.
|
||||
* 3.0.1 - 15 Aug 2023 - Fix broken seamless tiling.
|
||||
* 3.0.1 - 15 Aug 2023 - Fix textual inversion embeddings not working in `low` VRAM usage mode.
|
||||
* 3.0.1 - 15 Aug 2023 - Fix for custom VAEs not working in `low` VRAM usage mode.
|
||||
* 3.0.1 - 14 Aug 2023 - Slider to change the image dimensions proportionally (in Image Settings). Thanks @JeLuf.
|
||||
* 3.0.1 - 14 Aug 2023 - Show an error to the user if an embedding isn't compatible with the model, instead of failing silently without informing the user. Thanks @JeLuf.
|
||||
* 3.0.1 - 14 Aug 2023 - Disable watermarking for SDXL img2img. Thanks @AvidGameFan.
|
||||
* 3.0.0 - 3 Aug 2023 - Enabled diffusers for everyone by default. The old v2 engine can be used by disabling the "Use v3 engine" option in the Settings tab.
|
||||
* 2.5.48 - 1 Aug 2023 - (beta-only) Full support for ControlNets. You can select a control image to guide the AI. You can pick a filter to pre-process the image, and one of the known (or custom) controlnet models. Supports `OpenPose`, `Canny`, `Straight Lines`, `Depth`, `Line Art`, `Scribble`, `Soft Edge`, `Shuffle` and `Segment`.
|
||||
* 2.5.47 - 30 Jul 2023 - An option to use `Strict Mask Border` while inpainting, to avoid touching areas outside the mask. But this might show a slight outline of the mask, which you will have to touch up separately.
|
||||
|
||||
@ -18,7 +18,7 @@ os_name = platform.system()
|
||||
modules_to_check = {
|
||||
"torch": ("1.11.0", "1.13.1", "2.0.0"),
|
||||
"torchvision": ("0.12.0", "0.14.1", "0.15.1"),
|
||||
"sdkit": "1.0.167",
|
||||
"sdkit": "1.0.174",
|
||||
"stable-diffusion-sdkit": "2.1.4",
|
||||
"rich": "12.6.0",
|
||||
"uvicorn": "0.19.0",
|
||||
|
||||
@ -46,6 +46,8 @@ if "%update_branch%"=="" (
|
||||
|
||||
@cd sd-ui-files
|
||||
|
||||
@call git add -A .
|
||||
@call git stash
|
||||
@call git reset --hard
|
||||
@call git -c advice.detachedHead=false checkout "%update_branch%"
|
||||
@call git pull
|
||||
|
||||
@ -29,6 +29,8 @@ if [ -f "scripts/install_status.txt" ] && [ `grep -c sd_ui_git_cloned scripts/in
|
||||
|
||||
cd sd-ui-files
|
||||
|
||||
git add -A .
|
||||
git stash
|
||||
git reset --hard
|
||||
git -c advice.detachedHead=false checkout "$update_branch"
|
||||
git pull
|
||||
|
||||
@ -109,6 +109,7 @@ def init():
|
||||
images = images.filter(GalleryImage.use_stable_diffusion_model.like("%"+model+"%"))
|
||||
images = images.offset(page*images_per_page).limit(images_per_page)
|
||||
return images.all()
|
||||
|
||||
|
||||
def get_filename_from_url(url):
|
||||
path = urlparse(url).path
|
||||
|
||||
@ -65,9 +65,6 @@ def load_default_models(context: Context):
|
||||
|
||||
runtime.set_vram_optimizations(context)
|
||||
|
||||
config = app.getConfig()
|
||||
context.embeddings_path = os.path.join(app.MODELS_DIR, "embeddings")
|
||||
|
||||
# init default model paths
|
||||
for model_type in MODELS_TO_LOAD_ON_START:
|
||||
context.model_paths[model_type] = resolve_model_to_use(model_type=model_type, fail_if_not_found=False)
|
||||
|
||||
@ -12,9 +12,9 @@ from easydiffusion import app
|
||||
manifest = {
|
||||
"tensorrt": {
|
||||
"install": [
|
||||
"nvidia-cudnn --pre --extra-index-url=https://pypi.ngc.nvidia.com --trusted-host pypi.ngc.nvidia.com",
|
||||
"tensorrt-libs --pre --extra-index-url=https://pypi.ngc.nvidia.com --trusted-host pypi.ngc.nvidia.com",
|
||||
"tensorrt --pre --extra-index-url=https://pypi.ngc.nvidia.com --trusted-host pypi.ngc.nvidia.com",
|
||||
"nvidia-cudnn --pre --extra-index-url=https://pypi.nvidia.com --trusted-host pypi.nvidia.com",
|
||||
"tensorrt-libs --pre --extra-index-url=https://pypi.nvidia.com --trusted-host pypi.nvidia.com",
|
||||
"tensorrt --pre --extra-index-url=https://pypi.nvidia.com --trusted-host pypi.nvidia.com",
|
||||
],
|
||||
"uninstall": ["tensorrt"],
|
||||
# TODO also uninstall tensorrt-libs and nvidia-cudnn, but do it upon restarting (avoid 'file in use' error)
|
||||
|
||||
@ -73,6 +73,7 @@ class TaskData(BaseModel):
|
||||
use_hypernetwork_model: Union[str, List[str]] = None
|
||||
use_lora_model: Union[str, List[str]] = None
|
||||
use_controlnet_model: Union[str, List[str]] = None
|
||||
use_embeddings_model: Union[str, List[str]] = None
|
||||
filters: List[str] = []
|
||||
filter_params: Dict[str, Dict[str, Any]] = {}
|
||||
control_filter_to_apply: Union[str, List[str]] = None
|
||||
@ -201,6 +202,7 @@ def convert_legacy_render_req_to_new(old_req: dict):
|
||||
model_paths["hypernetwork"] = old_req.get("use_hypernetwork_model")
|
||||
model_paths["lora"] = old_req.get("use_lora_model")
|
||||
model_paths["controlnet"] = old_req.get("use_controlnet_model")
|
||||
model_paths["embeddings"] = old_req.get("use_embeddings_model")
|
||||
|
||||
model_paths["gfpgan"] = old_req.get("use_face_correction", "")
|
||||
model_paths["gfpgan"] = model_paths["gfpgan"] if "gfpgan" in model_paths["gfpgan"].lower() else None
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
<h1>
|
||||
<img id="logo_img" src="/media/images/icon-512x512.png" >
|
||||
Easy Diffusion
|
||||
<small><span id="version">v3.0.0</span> <span id="updateBranchLabel"></span></small>
|
||||
<small><span id="version">v3.0.1</span> <span id="updateBranchLabel"></span></small>
|
||||
</h1>
|
||||
</div>
|
||||
<div id="server-status">
|
||||
@ -307,12 +307,22 @@
|
||||
<input id="custom-width" name="custom-width" type="number" min="128" value="512" onkeypress="preventNonNumericalInput(event)">
|
||||
×
|
||||
<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> <button data-factor="1.2" class="tertiaryButton smallButton">×1.2</button> <button data-factor="1.5" class="tertiaryButton smallButton">×1.5</button> <button data-factor="2" class="tertiaryButton smallButton">×2</button> <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> <button id="enlarge2" class="tertiaryButton smallButton">×2</button> <button id="enlarge3" class="tertiaryButton smallButton">×3</button></div>
|
||||
<div class="two-column">
|
||||
<div class="left-column">
|
||||
<small>Recently used:</small><br>
|
||||
<div id="recent-resolution-list">
|
||||
</div>
|
||||
</div>
|
||||
<div class="right-column">
|
||||
<small>Common sizes:</small><br>
|
||||
<div id="common-resolution-list">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<small>Recently used:</small><br>
|
||||
<div id="recent-resolution-list">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -34,6 +34,7 @@ code {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
transform: translateY(4px);
|
||||
cursor: pointer;
|
||||
}
|
||||
#prompt {
|
||||
width: 100%;
|
||||
@ -1421,6 +1422,10 @@ div.task-fs-initimage {
|
||||
display: none;
|
||||
position: absolute;
|
||||
}
|
||||
div.task-fs-initimage img {
|
||||
max-height: 70vH;
|
||||
max-width: 70vW;
|
||||
}
|
||||
div.task-initimg:hover div.task-fs-initimage {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -1436,9 +1441,13 @@ div.top-right {
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
button.useForControlnetBtn {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
#small_image_warning {
|
||||
font-size: smaller;
|
||||
color: var(--status-orange);
|
||||
font-size: smaller;
|
||||
color: var(--status-orange);
|
||||
}
|
||||
|
||||
button#save-system-settings-btn {
|
||||
@ -1463,6 +1472,9 @@ button#save-system-settings-btn {
|
||||
cursor: pointer;;
|
||||
}
|
||||
|
||||
.validation-failed {
|
||||
border: solid 2px red;
|
||||
}
|
||||
/* SCROLLBARS */
|
||||
:root {
|
||||
--scrollbar-width: 14px;
|
||||
@ -1836,6 +1848,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;
|
||||
}
|
||||
@ -1852,6 +1868,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;
|
||||
}
|
||||
@ -1893,15 +1930,6 @@ div#enlarge-buttons {
|
||||
|
||||
/* Gallery CSS */
|
||||
|
||||
/*
|
||||
.gallery {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
*/
|
||||
button:disabled {
|
||||
background-color: var(--secondary-button-background);
|
||||
}
|
||||
|
||||
@ -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")
|
||||
@ -152,7 +152,6 @@ let galleryPromptSearchField = document.querySelector("#gallery-prompt-search")
|
||||
let galleryModelSearchField = document.querySelector("#gallery-model-search")
|
||||
let galleryImageContainer = document.querySelector("#imagecontainer")
|
||||
|
||||
|
||||
let positiveEmbeddingText = document.querySelector("#positive-embedding-text")
|
||||
let negativeEmbeddingText = document.querySelector("#negative-embedding-text")
|
||||
let embeddingsCollapsiblesBtn = document.querySelector("#embeddings-action-collapsibles-btn")
|
||||
@ -535,6 +534,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
|
||||
const imageRedoBuffer = []
|
||||
let buttons = [
|
||||
{ text: "Use as Input", on_click: onUseAsInputClick },
|
||||
{ text: "Use for Controlnet", on_click: onUseForControlnetClick },
|
||||
[
|
||||
{
|
||||
html: '<i class="fa-solid fa-download"></i> Download Image',
|
||||
@ -646,6 +646,10 @@ function onUseAsInputClick(req, img) {
|
||||
maskSetting.checked = false
|
||||
}
|
||||
|
||||
function onUseForControlnetClick(req, img) {
|
||||
controlImagePreview.src = img.src
|
||||
}
|
||||
|
||||
function getDownloadFilename(img, suffix) {
|
||||
const imageSeed = img.getAttribute("data-seed")
|
||||
const imagePrompt = img.getAttribute("data-prompt")
|
||||
@ -956,12 +960,25 @@ function makeImage() {
|
||||
}
|
||||
if (!randomSeedField.checked && seedField.value == "") {
|
||||
alert('The "Seed" field must not be empty.')
|
||||
seedField.classList.add("validation-failed")
|
||||
return
|
||||
}
|
||||
seedField.classList.remove("validation-failed")
|
||||
|
||||
if (numInferenceStepsField.value == "") {
|
||||
alert('The "Inference Steps" field must not be empty.')
|
||||
numInferenceStepsField.classList.add("validation-failed")
|
||||
return
|
||||
}
|
||||
numInferenceStepsField.classList.remove("validation-failed")
|
||||
|
||||
if (controlnetModelField.value === "" && IMAGE_REGEX.test(controlImagePreview.src)) {
|
||||
alert("Please choose a ControlNet model, to use the ControlNet image.")
|
||||
document.getElementById("controlnet_model").classList.add("validation-failed")
|
||||
return
|
||||
}
|
||||
document.getElementById("controlnet_model").classList.remove("validation-failed")
|
||||
|
||||
if (numOutputsTotalField.value == "" || numOutputsTotalField.value == 0) {
|
||||
numOutputsTotalField.value = 1
|
||||
}
|
||||
@ -980,6 +997,7 @@ function makeImage() {
|
||||
reqBody: Object.assign({ prompt: prompt }, taskTemplate.reqBody),
|
||||
})
|
||||
)
|
||||
newTaskRequests.forEach(setEmbeddings)
|
||||
newTaskRequests.forEach(createTask)
|
||||
|
||||
updateInitialText()
|
||||
@ -1173,15 +1191,18 @@ function onTaskCompleted(task, reqBody, instance, outputContainer, stepUpdate) {
|
||||
<b>Suggestions</b>:
|
||||
<br/>
|
||||
Try to use a different model or a different LORA.`
|
||||
} else if (msg.includes("Tensor on device cuda:0 is not on the expected device meta")) {
|
||||
} else if (msg.includes("'ModuleList' object has no attribute '1'")) {
|
||||
msg += `<br/><br/>
|
||||
<b>Reason</b>: Due to some software issues, embeddings currently don't work with the "Low" memory profile.
|
||||
<b>Reason</b>: SDXL models need a yaml config file.
|
||||
<br/><br/>
|
||||
<b>Suggestions</b>:
|
||||
<br/>
|
||||
1. Set the memory profile to "Balanced"<br/>
|
||||
2. Remove the embeddings from the prompt and the negative prompt<br/>
|
||||
3. Check whether the plugins you're using change the memory profile automatically.`
|
||||
<ol>
|
||||
<li>Download the <a href="https://gist.githubusercontent.com/JeLuF/5dc56e7a3a6988265c423f464d3cbdd3/raw/4ba4c39b1c7329877ad7a39c8c8a077ea4b53d11/dreamshaperXL10_alpha2Xl10.yaml" target="_blank">config file</a></li>
|
||||
<li>Save it in the same directory as the SDXL model file</li>
|
||||
<li>Rename the config file so that it matches the filename of the model, with the extension of the model file replaced by <tt>yaml</tt>.
|
||||
For example, if the model file is called <tt>FantasySDXL_v2.safetensors</tt>, the config file must be called <tt>FantasySDXL_v2.yaml</tt>.
|
||||
</ol>`
|
||||
}
|
||||
} else {
|
||||
msg = `Unexpected Read Error:<br/><pre>StepUpdate: ${JSON.stringify(stepUpdate, undefined, 4)}</pre>`
|
||||
@ -1335,6 +1356,27 @@ async function onTaskStart(task) {
|
||||
|
||||
/* Hover effect for the init image in the task list */
|
||||
function createInitImageHover(taskEntry) {
|
||||
taskEntry.querySelectorAll(".task-initimg").forEach( thumb => {
|
||||
let thumbimg = thumb.querySelector("img")
|
||||
let img = createElement("img", {src: thumbimg.src})
|
||||
thumb.querySelector(".task-fs-initimage").appendChild(img)
|
||||
let div = createElement("div", undefined, ["top-right"])
|
||||
div.innerHTML = `
|
||||
<button class="useAsInputBtn">Use as Input</button>
|
||||
<br>
|
||||
<button class="useForControlnetBtn">Use for Controlnet</button>`
|
||||
div.querySelector(".useAsInputBtn").addEventListener("click", e => {
|
||||
e.preventDefault()
|
||||
onUseAsInputClick(null, img)
|
||||
})
|
||||
div.querySelector(".useForControlnetBtn").addEventListener("click", e => {
|
||||
e.preventDefault()
|
||||
controlImagePreview.src = img.src
|
||||
})
|
||||
thumb.querySelector(".task-fs-initimage").appendChild(div)
|
||||
})
|
||||
return
|
||||
|
||||
var $tooltip = $(taskEntry.querySelector(".task-fs-initimage"))
|
||||
var img = document.createElement("img")
|
||||
img.src = taskEntry.querySelector("div.task-initimg > img").src
|
||||
@ -1399,6 +1441,11 @@ function createTask(task) {
|
||||
let w = ((task.reqBody.width * h) / task.reqBody.height) >> 0
|
||||
taskConfig += `<div class="task-initimg" style="float:left;"><img style="width:${w}px;height:${h}px;" src="${task.reqBody.init_image}"><div class="task-fs-initimage"></div></div>`
|
||||
}
|
||||
if (task.reqBody.control_image !== undefined) {
|
||||
let h = 80
|
||||
let w = ((task.reqBody.width * h) / task.reqBody.height) >> 0
|
||||
taskConfig += `<div class="task-initimg" style="float:left;"><img style="width:${w}px;height:${h}px;" src="${task.reqBody.control_image}"><div class="task-fs-initimage"></div></div>`
|
||||
}
|
||||
|
||||
taskConfig += `<div class="taskConfigData">${createTaskConfig(task)}</span></div></div>`
|
||||
|
||||
@ -1449,7 +1496,7 @@ function createTask(task) {
|
||||
startY = e.target.closest(".imageTaskContainer").offsetTop
|
||||
})
|
||||
|
||||
if (task.reqBody.init_image !== undefined) {
|
||||
if (task.reqBody.init_image !== undefined || task.reqBody.control_image !== undefined) {
|
||||
createInitImageHover(taskEntry)
|
||||
}
|
||||
|
||||
@ -1629,6 +1676,42 @@ function getCurrentUserRequest() {
|
||||
return newTask
|
||||
}
|
||||
|
||||
function setEmbeddings(task) {
|
||||
let prompt = task.reqBody.prompt.toLowerCase()
|
||||
let negativePrompt = task.reqBody.negative_prompt.toLowerCase()
|
||||
let overallPrompt = (prompt + " " + negativePrompt).split(" ")
|
||||
|
||||
let embeddingsTree = modelsOptions["embeddings"]
|
||||
let embeddings = []
|
||||
function extract(entries, basePath = "") {
|
||||
entries.forEach((e) => {
|
||||
if (Array.isArray(e)) {
|
||||
let path = basePath === "" ? basePath + e[0] : basePath + "/" + e[0]
|
||||
extract(e[1], path)
|
||||
} else {
|
||||
let path = basePath === "" ? basePath + e : basePath + "/" + e
|
||||
embeddings.push([e.toLowerCase().replace(" ", "_"), path])
|
||||
}
|
||||
})
|
||||
}
|
||||
extract(embeddingsTree)
|
||||
|
||||
let embeddingPaths = []
|
||||
|
||||
embeddings.forEach((e) => {
|
||||
let token = e[0]
|
||||
let path = e[1]
|
||||
|
||||
if (overallPrompt.includes(token)) {
|
||||
embeddingPaths.push(path)
|
||||
}
|
||||
})
|
||||
|
||||
if (embeddingPaths.length > 0) {
|
||||
task.reqBody.use_embeddings_model = embeddingPaths
|
||||
}
|
||||
}
|
||||
|
||||
function getModelInfo(models) {
|
||||
let modelInfo = models.map((e) => [e[0].value, e[1].value])
|
||||
modelInfo = modelInfo.filter((e) => e[0].trim() !== "")
|
||||
@ -2666,7 +2749,7 @@ function updateEmbeddingsList(filter = "") {
|
||||
let button
|
||||
if (iconlist.length==0) {
|
||||
button = document.createElement("button")
|
||||
button.innerText="m"
|
||||
button.innerText = m
|
||||
} else {
|
||||
let img = '/media/images/noimg.png'
|
||||
if (token in embIcon) {
|
||||
@ -2979,38 +3062,27 @@ 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}×${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)
|
||||
hidePopup()
|
||||
})
|
||||
|
||||
enlarge2Button.addEventListener("click", () => {
|
||||
enlargeImageSize(2)
|
||||
hidePopup()
|
||||
})
|
||||
|
||||
enlarge3Button.addEventListener("click", () => {
|
||||
enlargeImageSize(3)
|
||||
hidePopup()
|
||||
})
|
||||
enlargeButtons.querySelectorAll("button").forEach((button) =>
|
||||
button.addEventListener("click", (e) => {
|
||||
enlargeImageSize(parseFloat(button.dataset["factor"]))
|
||||
hidePopup()
|
||||
})
|
||||
)
|
||||
|
||||
customWidthField.addEventListener("change", () => {
|
||||
let w = customWidthField.value
|
||||
@ -3037,25 +3109,29 @@ let recentResolutionsValues = []
|
||||
recentResolutionsValues = recentResolutionsValues.slice(0, 8)
|
||||
|
||||
localStorage.recentResolutionsValues = JSON.stringify(recentResolutionsValues)
|
||||
makeResolutionButtons()
|
||||
makeResolutionButtons(recentResolutionList, recentResolutionsValues)
|
||||
})
|
||||
|
||||
const defaultResolutionsValues = [
|
||||
{ w: 512, h: 512 },
|
||||
{ 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 = [
|
||||
{ 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 },
|
||||
]
|
||||
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)
|
||||
@ -3072,6 +3148,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)
|
||||
}
|
||||
|
||||
@ -3090,6 +3169,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
|
||||
|
||||
@ -191,19 +191,32 @@
|
||||
|
||||
function createDropAreas(container) {
|
||||
// Create two drop areas
|
||||
const dropAreaI2I = document.createElement("div")
|
||||
dropAreaI2I.setAttribute("id", "drop-area-I2I")
|
||||
dropAreaI2I.setAttribute("class", "drop-area")
|
||||
dropAreaI2I.innerHTML = "Use as Image2Image source"
|
||||
const dropAreaI2I = createElement("div", {id: "drop-area-I2I"}, ["drop-area"], "Use as Image2Image source")
|
||||
container.appendChild(dropAreaI2I)
|
||||
|
||||
const dropAreaMD = document.createElement("div")
|
||||
dropAreaMD.setAttribute("id", "drop-area-MD")
|
||||
dropAreaMD.setAttribute("class", "drop-area")
|
||||
dropAreaMD.innerHTML = "Extract embedded metadata"
|
||||
const dropAreaMD = createElement("div", {id: "drop-area-MD"}, ["drop-area"], "Extract embedded metadata")
|
||||
container.appendChild(dropAreaMD)
|
||||
|
||||
const dropAreaCN = createElement("div", {id: "drop-area-CN"}, ["drop-area"], "Use as Controlnet image")
|
||||
container.appendChild(dropAreaCN)
|
||||
|
||||
// Add event listeners to drop areas
|
||||
dropAreaCN.addEventListener("dragenter", function(event) {
|
||||
event.preventDefault()
|
||||
dropAreaCN.style.backgroundColor = 'darkGreen'
|
||||
})
|
||||
dropAreaCN.addEventListener("dragleave", function(event) {
|
||||
event.preventDefault()
|
||||
dropAreaCN.style.backgroundColor = ''
|
||||
})
|
||||
dropAreaCN.addEventListener("drop", function(event) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
hideDropAreas()
|
||||
|
||||
getImageFromDropEvent(event, e => controlImagePreview.src=e)
|
||||
})
|
||||
|
||||
dropAreaI2I.addEventListener("dragenter", function(event) {
|
||||
event.preventDefault()
|
||||
dropAreaI2I.style.backgroundColor = 'darkGreen'
|
||||
@ -212,16 +225,12 @@
|
||||
event.preventDefault()
|
||||
dropAreaI2I.style.backgroundColor = ''
|
||||
})
|
||||
|
||||
dropAreaI2I.addEventListener("drop", function(event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
hideDropAreas()
|
||||
|
||||
|
||||
function getImageFromDropEvent(event, callback) {
|
||||
// Find the first image file, uri, or moz-url in the items list
|
||||
let imageItem = null;
|
||||
let imageItem = null
|
||||
for (let i = 0; i < event.dataTransfer.items.length; i++) {
|
||||
let item = event.dataTransfer.items[i];
|
||||
let item = event.dataTransfer.items[i]
|
||||
if (item.kind === 'file' && item.type.startsWith('image/')) {
|
||||
imageItem = item;
|
||||
break;
|
||||
@ -258,18 +267,22 @@
|
||||
// Create a FileReader object to read the dropped file as a data URL
|
||||
let reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
// Set the src attribute of the img element to the data URL
|
||||
imageObj.src = e.target.result;
|
||||
callback(e.target.result)
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
} else {
|
||||
// If the item is a URL, retrieve it and use it to load the image
|
||||
imageItem.getAsString(function(url) {
|
||||
// Set the src attribute of the img element to the URL
|
||||
imageObj.src = url;
|
||||
});
|
||||
imageItem.getAsString(callback)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dropAreaI2I.addEventListener("drop", function(event) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
hideDropAreas()
|
||||
|
||||
getImageFromDropEvent(event, e => imageObj.src=e)
|
||||
})
|
||||
|
||||
dropAreaMD.addEventListener("dragenter", function(event) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user