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

'Use for Controlnet', Drag'n'Drop (#1501)

Browse Source 
* Drop area for Controlnet

* 'Use for Controlnet', DND
This commit is contained in:
JeLuF 2023-08-16 06:53:12 +02:00 committed by GitHub
parent 074c566826
commit a1854d3734
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -517,6 +517,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',
@ -627,6 +628,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")

59
ui/plugins/ui/image-editor-improvements.plugin.js
View File

@ -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) {