Allow downloading the controlnet preview image

This commit is contained in:
cmdr2 2023-08-18 16:24:17 +05:30
parent 846bb2134e
commit e80db71d1c
2 changed files with 13 additions and 4 deletions

View File

@ -1439,7 +1439,7 @@ div.top-right {
right: 8px; right: 8px;
} }
button.useForControlnetBtn { .task-fs-initimage .top-right button {
margin-top: 6px; margin-top: 6px;
} }

View File

@ -1362,7 +1362,7 @@ async function onTaskStart(task) {
} }
/* Hover effect for the init image in the task list */ /* Hover effect for the init image in the task list */
function createInitImageHover(taskEntry) { function createInitImageHover(taskEntry, task) {
taskEntry.querySelectorAll(".task-initimg").forEach((thumb) => { taskEntry.querySelectorAll(".task-initimg").forEach((thumb) => {
let thumbimg = thumb.querySelector("img") let thumbimg = thumb.querySelector("img")
let img = createElement("img", { src: thumbimg.src }) let img = createElement("img", { src: thumbimg.src })
@ -1371,7 +1371,9 @@ function createInitImageHover(taskEntry) {
div.innerHTML = ` div.innerHTML = `
<button class="useAsInputBtn">Use as Input</button> <button class="useAsInputBtn">Use as Input</button>
<br> <br>
<button class="useForControlnetBtn">Use for Controlnet</button>` <button class="useForControlnetBtn">Use for Controlnet</button>
<br>
<button class="downloadPreviewImg">Download</button>`
div.querySelector(".useAsInputBtn").addEventListener("click", (e) => { div.querySelector(".useAsInputBtn").addEventListener("click", (e) => {
e.preventDefault() e.preventDefault()
onUseAsInputClick(null, img) onUseAsInputClick(null, img)
@ -1380,6 +1382,13 @@ function createInitImageHover(taskEntry) {
e.preventDefault() e.preventDefault()
controlImagePreview.src = img.src controlImagePreview.src = img.src
}) })
div.querySelector(".downloadPreviewImg").addEventListener("click", (e) => {
e.preventDefault()
const name = "image." + task.reqBody["output_format"]
const blob = dataURItoBlob(img.src)
saveAs(blob, name)
})
thumb.querySelector(".task-fs-initimage").appendChild(div) thumb.querySelector(".task-fs-initimage").appendChild(div)
}) })
return return
@ -1474,7 +1483,7 @@ function createTask(task) {
</div>` </div>`
if (task.reqBody.init_image !== undefined || task.reqBody.control_image !== undefined) { if (task.reqBody.init_image !== undefined || task.reqBody.control_image !== undefined) {
createInitImageHover(taskEntry) createInitImageHover(taskEntry, task)
} }
if (task.reqBody.control_image !== undefined && task.reqBody.control_filter_to_apply !== undefined) { if (task.reqBody.control_image !== undefined && task.reqBody.control_filter_to_apply !== undefined) {