Controlnet thumb in taskConfig (#1502)

This commit is contained in:
JeLuF 2023-08-17 07:48:47 +02:00 committed by GitHub
parent 23a0a48b81
commit 285792f692
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 3 deletions

View File

@ -1419,6 +1419,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;
@ -1434,9 +1438,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 {

View File

@ -1217,6 +1217,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
@ -1281,6 +1302,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>`
@ -1331,7 +1357,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)
}