Function showImages

ui/media/js/main.js:405–624

(reqBody, res, outputContainer, livePreview)

})

function showImages(reqBody, res, outputContainer, livePreview) {
    let imageItemElements = outputContainer.querySelectorAll(".imgItem")
    if (typeof res != "object") return
    res.output.reverse()
    res.output.forEach((result, index) => {
        const imageData = result?.data || result?.path + "?t=" + Date.now(),
            imageSeed = result?.seed,
            imagePrompt = reqBody.prompt,
            imageInferenceSteps = reqBody.num_inference_steps,
            imageGuidanceScale = reqBody.guidance_scale,
            imageWidth = reqBody.width,
            imageHeight = reqBody.height

        if (!imageData.includes("/")) {
            // res contained no data for the image, stop execution
            setStatus("request", "invalid image", "error")
            return
        }

        let imageItemElem = index < imageItemElements.length ? imageItemElements[index] : null
        if (!imageItemElem) {
            imageItemElem = document.createElement("div")
            imageItemElem.className = "imgItem"
            imageItemElem.innerHTML = `
                <div class="imgContainer">
                    <img/>
                    <div class="imgItemInfo">
                        <div>
                            <span class="imgInfoLabel imgExpandBtn"><i class="fa-solid fa-expand"></i></span><span class="imgInfoLabel imgSeedLabel"></span>
                        </div>
                    </div>
                    <button class="imgPreviewItemClearBtn image_clear_btn"><i class="fa-solid fa-xmark"></i></button>
                    <span class="img_bottom_label"></span>
                    <div class="spinner displayNone"><center>${spinnerPacmanHtml}</center><div class="spinnerStatus"></div></div>
                </div>
            `
            outputContainer.appendChild(imageItemElem)
            const imageRemoveBtn = imageItemElem.querySelector(".imgPreviewItemClearBtn")
            let parentTaskContainer = imageRemoveBtn.closest(".imageTaskContainer")
            imageRemoveBtn.addEventListener("click", (e) => {
                undoableRemove(imageItemElem)
                let allHidden = true
                let children = parentTaskContainer.querySelectorAll(".imgItem")
                for (let x = 0; x < children.length; x++) {
                    let child = children[x]
                    if (child.style.display != "none") {
                        allHidden = false
                    }
                }
                if (allHidden === true) {
                    const req = htmlTaskMap.get(parentTaskContainer)
                    if (!req.isProcessing || req.batchesDone == req.batchCount) {
                        undoableRemove(parentTaskContainer, true)
                    }
                }
            })
        }
        const imageElem = imageItemElem.querySelector("img")