mirror of
https://github.com/easydiffusion/easydiffusion.git
synced 2025-06-21 10:27:47 +02:00
add upload
This commit is contained in:
parent
c1bb7dc119
commit
7497870455
@ -69,9 +69,8 @@ def init():
|
||||
bucket = crud.get_bucket_by_path(db, path)
|
||||
|
||||
if bucket == None:
|
||||
bucket_id = crud.create_bucket(db=db, bucket=schemas.BucketCreate(path=path))
|
||||
else:
|
||||
bucket_id = bucket.id
|
||||
bucket = crud.create_bucket(db=db, bucket=schemas.BucketCreate(path=path))
|
||||
bucket_id = bucket.id
|
||||
|
||||
bucketfile = schemas.BucketFileCreate(filename=filename, data=file)
|
||||
result = crud.create_bucketfile(db=db, bucketfile=bucketfile, bucket_id=bucket_id)
|
||||
|
@ -704,13 +704,13 @@
|
||||
<div id="use-as-thumb-img-container"><img id="use-as-thumb-image" src="/media/images/noimg.png" width="512" height="512"></div>
|
||||
</div>
|
||||
<div class="use-as-thumb-select">
|
||||
<h4>Use the thumbnail for …</h4>
|
||||
<select id="use-as-thumb-select" size="8" multiple>
|
||||
<label for="use-as-thumb-select">Use the thumbnail for:</label><br>
|
||||
<select id="use-as-thumb-select" size="16" multiple>
|
||||
</select>
|
||||
</div>
|
||||
<div class="use-as-thumb-buttons">
|
||||
<button class="tertiaryButton">OK</button>
|
||||
<button class="tertiaryButton">Cancel</button>
|
||||
<button class="tertiaryButton" id="use-as-thumb-save">Save thumbnail</button>
|
||||
<button class="tertiaryButton" id="use-as-thumb-cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1650,6 +1650,35 @@ body.wait-pause {
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-container {
|
||||
width: 80px;
|
||||
height: 100px;
|
||||
margin: 100px auto;
|
||||
margin-top: 30vH;
|
||||
}
|
||||
|
||||
.spinner-block {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
float: left;
|
||||
margin: 0 10px 10px 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 3px;
|
||||
background: var(--accent-color);
|
||||
}
|
||||
|
||||
.spinner-block:nth-child(4n+1) { animation: spinner-wave 2s ease .0s infinite; }
|
||||
.spinner-block:nth-child(4n+2) { animation: spinner-wave 2s ease .2s infinite; }
|
||||
.spinner-block:nth-child(4n+3) { animation: spinner-wave 2s ease .4s infinite; }
|
||||
.spinner-block:nth-child(4n+4) { animation: spinner-wave 2s ease .6s infinite; margin-right: 0; }
|
||||
|
||||
@keyframes spinner-wave {
|
||||
0% { top: 0; opacity: 1; }
|
||||
50% { top: 30px; opacity: .2; }
|
||||
100% { top: 0; opacity: 1; }
|
||||
}
|
||||
|
||||
#embeddings-dialog {
|
||||
overflow: clip;
|
||||
}
|
||||
@ -1748,7 +1777,7 @@ body.wait-pause {
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
"uat-preview uat-select"
|
||||
"uat-buttons uat-buttons";
|
||||
"uat-preview uat-buttons";
|
||||
}
|
||||
|
||||
.use-as-thumb-preview {
|
||||
@ -1857,4 +1886,4 @@ div#enlarge-buttons {
|
||||
/* hack for fixing Image Modifier Improvements plugin */
|
||||
#imageTagPopupContainer {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
@ -171,8 +171,11 @@ let saveAllJSONToggle = document.querySelector("#json_toggle")
|
||||
let saveAllFoldersOption = document.querySelector("#download-add-folders")
|
||||
let splashScreenPopup = document.querySelector("#splash-screen")
|
||||
let useAsThumbDialog = document.querySelector("#use-as-thumb-dialog")
|
||||
let useAsThumbDialogCloseBtn = document.querySelector("#use-as-thumb-dialog-close-button")
|
||||
let useAsThumbImageContainer = document.querySelector("#use-as-thumb-img-container")
|
||||
let useAsThumbSelect = document.querySelector("#use-as-thumb-select")
|
||||
let useAsThumbSaveBtn = document.querySelector("#use-as-thumb-save")
|
||||
let useAsThumbCancelBtn = document.querySelector("#use-as-thumb-cancel")
|
||||
|
||||
let maskSetting = document.querySelector("#enable_mask")
|
||||
|
||||
@ -703,8 +706,8 @@ function onUseAsThumbnailClick(req, img) {
|
||||
let scale = 1
|
||||
let targetWidth = img.naturalWidth
|
||||
let targetHeight = img.naturalHeight
|
||||
|
||||
let resize = false
|
||||
onUseAsThumbnailClick.img = img
|
||||
|
||||
if ( typeof(onUseAsThumbnailClick.croppr) == 'undefined' ) {
|
||||
onUseAsThumbnailClick.croppr = new Croppr("#use-as-thumb-image", { aspectRatio: 1, minSize: [384,384,'px'], startSize: [512, 512, 'px'], returnMode:"real" })
|
||||
@ -725,6 +728,10 @@ function onUseAsThumbnailClick(req, img) {
|
||||
resize = true
|
||||
}
|
||||
}
|
||||
|
||||
onUseAsThumbnailClick.croppr.options.minSize = {width: 384*scale>>>0, height: 384*scale>>>0}
|
||||
onUseAsThumbnailClick.croppr.options.startSize = {width: 512*scale>>>0, height: 512*scale>>>0}
|
||||
|
||||
if (resize) {
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = targetWidth
|
||||
@ -732,9 +739,6 @@ function onUseAsThumbnailClick(req, img) {
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.drawImage(img, 0, 0, targetWidth, targetHeight)
|
||||
|
||||
onUseAsThumbnailClick.croppr.options.minSize = {width: 384*scale>>>0, height: 384*scale>>>0}
|
||||
onUseAsThumbnailClick.croppr.options.startSize = {width: 512*scale>>>0, height: 512*scale>>>0}
|
||||
|
||||
onUseAsThumbnailClick.croppr.setImage(canvas.toDataURL('image/png'))
|
||||
} else {
|
||||
onUseAsThumbnailClick.croppr.setImage(img.src)
|
||||
@ -759,21 +763,51 @@ function onUseAsThumbnailClick(req, img) {
|
||||
useAsThumbSelect.replaceChildren(optgroup)
|
||||
|
||||
useAsThumbDialog.showModal()
|
||||
onUseAsThumbnailClick.scale = scale
|
||||
|
||||
|
||||
// fetch(img.src)
|
||||
// .then(response => response.blob())
|
||||
// .then(async function(blob) {
|
||||
// const formData = new FormData()
|
||||
// formData.append("file", blob)
|
||||
// const response = await fetch(`bucket/embeddings/${embedding}.jpg`, { method: 'POST', body: formData });
|
||||
// console.log(response)
|
||||
// })
|
||||
}
|
||||
|
||||
modalDialogCloseOnBackdropClick(useAsThumbDialog)
|
||||
makeDialogDraggable(useAsThumbDialog)
|
||||
|
||||
useAsThumbDialogCloseBtn.addEventListener("click", () => {
|
||||
useAsThumbDialog.close()
|
||||
})
|
||||
|
||||
useAsThumbCancelBtn.addEventListener("click", () => {
|
||||
useAsThumbDialog.close()
|
||||
})
|
||||
|
||||
useAsThumbSaveBtn.addEventListener("click", (e) => {
|
||||
let scale = 1/onUseAsThumbnailClick.scale
|
||||
let crop = onUseAsThumbnailClick.croppr.getValue()
|
||||
|
||||
let len = Math.max(crop.width*scale, 384)
|
||||
let profileName = profileNameField.value
|
||||
|
||||
cropImageDataUrl(onUseAsThumbnailClick.img.src, crop.x*scale, crop.y*scale, len, len)
|
||||
.then(thumb => fetch(thumb))
|
||||
.then(response => response.blob())
|
||||
.then(async function(blob) {
|
||||
const formData = new FormData()
|
||||
formData.append("file", blob)
|
||||
let options = useAsThumbSelect.selectedOptions
|
||||
let promises = []
|
||||
console.log(options)
|
||||
for (let embedding of options) {
|
||||
console.log(`bucket/${profileName}/${embedding.dataset["type"]}/${embedding.value}.png`)
|
||||
promises.push(fetch(`bucket/${profileName}/${embedding.dataset["type"]}/${embedding.value}.png`, { method: 'POST', body: formData }))
|
||||
}
|
||||
return Promise.all(promises)
|
||||
}).then(() => {
|
||||
useAsThumbDialog.close()
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error)
|
||||
showToast("Couldn't save thumbnail.<br>"+error)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
function enqueueImageVariationTask(req, img, reqDiff) {
|
||||
const imageSeed = img.getAttribute("data-seed")
|
||||
@ -2672,6 +2706,16 @@ function updateEmbeddingsList(filter = "") {
|
||||
}
|
||||
}
|
||||
|
||||
// Usually the rendering of the Embeddings HTML takes less than a second. In case it takes longer, show a spinner
|
||||
embeddingsList.innerHTML = `
|
||||
<div class="spinner-container">
|
||||
<div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div>
|
||||
<div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div>
|
||||
<div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div>
|
||||
<div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div> <div class="spinner-block"></div>
|
||||
</div>
|
||||
`
|
||||
|
||||
// Remove after fixing https://github.com/huggingface/diffusers/issues/3922
|
||||
let warning = ""
|
||||
if (vramUsageLevelField.value == "low") {
|
||||
@ -2682,9 +2726,11 @@ function updateEmbeddingsList(filter = "") {
|
||||
}
|
||||
// END of remove block
|
||||
|
||||
fetch("/bucket/embeddings/")
|
||||
let profileName = profileNameField.value
|
||||
fetch(`/bucket/${profileName}/embeddings/`)
|
||||
.then(response => response.status==200 ? response.json(): [])
|
||||
.then(iconlist => {
|
||||
.then(async function(iconlist) {
|
||||
|
||||
embeddingsList.innerHTML = warning + html(modelsOptions.embeddings, iconlist, "", filter)
|
||||
embeddingsList.querySelectorAll("button").forEach((b) => {
|
||||
b.addEventListener("click", onButtonClick)
|
||||
|
@ -1097,6 +1097,30 @@ async function deleteKeys(keyToDelete) {
|
||||
}
|
||||
}
|
||||
|
||||
function cropImageDataUrl(dataUrl, x, y, width, height) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const image = new Image()
|
||||
image.src = dataUrl
|
||||
|
||||
image.onload = () => {
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.drawImage(image, x, y, width, height, 0, 0, width, height)
|
||||
|
||||
const croppedDataUrl = canvas.toDataURL('image/png')
|
||||
resolve(croppedDataUrl)
|
||||
}
|
||||
|
||||
image.onerror = (error) => {
|
||||
reject(error)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function modalDialogCloseOnBackdropClick(dialog) {
|
||||
dialog.addEventListener('mousedown', function (event) {
|
||||
// Firefox creates an event with clientX|Y = 0|0 when choosing an <option>.
|
||||
|
Loading…
x
Reference in New Issue
Block a user