Function createTask

ui/media/js/main.js:1194–1317

(task)

}

function createTask(task) {
    let taskConfig = ""

    if (task.reqBody.init_image !== undefined) {
        let h = 80
        let w = ((task.reqBody.width * h) / task.reqBody.height) >> 0
        taskConfig += `<div class="task-initimg init-img-preview" 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 controlnet-img-preview" style="float:left;"><img style="width:${w}px;height:${h}px;" src="${task.reqBody.control_image}"><div class="task-fs-initimage"></div></div>`
    }
    if (task.reqBody.ref_images !== undefined && task.reqBody.ref_images.length > 0) {
        let h = 80
        task.reqBody.ref_images.forEach((refImg, idx) => {
            taskConfig += `<div class="task-initimg ref-img-preview" style="float:left;" title="Reference Image ${idx + 1}"><img style="max-width:${h}px;height:${h}px;object-fit:contain;" src="${refImg}"><div class="task-fs-initimage"></div></div>`
        })
    }

    taskConfig += `<div class="taskConfigData">${createTaskConfig(task)}</span></div></div>`

    let taskEntry = document.createElement("div")
    taskEntry.id = `imageTaskContainer-${Date.now()}`
    taskEntry.className = "imageTaskContainer"
    taskEntry.innerHTML = ` <div class="header-content panel collapsible active">
                                <i class="drag-handle fa-solid fa-grip"></i>
                                <div class="taskStatusLabel">Enqueued</div>
                                <button class="secondaryButton stopTask"><i class="fa-solid fa-xmark"></i> Cancel</button>
                                <button class="tertiaryButton useSettings"><i class="fa-solid fa-redo"></i> Use these settings</button>
                                <div class="preview-prompt"></div>
                                <div class="taskConfig">${taskConfig}</div>
                                <div class="outputMsg"></div>
                                <div class="progress-bar active"><div></div></div>
                            </div>
                            <div class="collapsible-content">
                                <div class="img-preview">
                            </div>`

    if (task.reqBody.init_image !== undefined || task.reqBody.control_image !== undefined) {
        createInitImageHover(taskEntry, task)
    }

    if (task.reqBody.control_image !== undefined && task.reqBody.control_filter_to_apply !== undefined) {
        let req = {
            image: task.reqBody.control_image,
            filter: task.reqBody.control_filter_to_apply,
            model_paths: {},
            filter_params: {},
        }
        req["model_paths"][task.reqBody.control_filter_to_apply] = task.reqBody.control_filter_to_apply

        task["previewTaskReq"] = req
    }

    createCollapsibles(taskEntry)

    let draghandle = taskEntry.querySelector(".drag-handle")