need to do something on initial empty page when there’s no images, because got an error: "“Error fetching the last image:” // [object Error]
{}". fix that code normally: <!DOCTYPE html>
<html>
<head>
    <title>Auto-Updating Image Gallery</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        
        #gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            grid-gap: 10px;
            align-items: start;
            justify-items: center;
            padding: 20px;
        }
        
        .gallery-image {
            width: 100%;
            height: auto;
        }
        
        #updateButton {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div>
        <h1>Auto-Updating Image Gallery</h1>
        <div id=“gallery”></div>
        <button id=“updateButton” onclick=“manualUpdate()”>Manual Update</button>
        <label for=“autoUpdate”>Auto-Update:</label>
        <input type=“checkbox” id=“autoUpdate” onchange=“toggleAutoUpdate()” />
    </div>

    <script>
        const gallery = document.getElementById(“gallery”);
        const autoUpdateCheckbox = document.getElementById(“autoUpdate”);
        const updateButton = document.getElementById(“updateButton”);
        const imageUrl = “https://camenduru-com-webui-docker.hf.space/file=outputs/extras-images/”;
        let intervalId;

        // Array to keep track of the image URLs in the given range
        let imageUrls = [];

        // Function to fetch and update the gallery with new images only
        function updateGallery() {
            // Get the range selection values
            const rangeStart = document.getElementById(“rangeStart”).value;
            const rangeEnd = document.getElementById(“rangeEnd”).value;

            // Clear the existing gallery images
            gallery.innerHTML = “”;

            // Loop through the selected range
            for (let i = rangeStart; i <= rangeEnd; i++) {
                const image = new Image();
                const imageSrc = imageUrl + padNumberWithZero(i, 5) + “.png”;
                image.src = imageSrc;
                image.classList.add(“gallery-image”);

                image.onerror = () => {
                    // Replace missing image with a backup image if available
                    const missingImageBackupSrc = imageUrl + “backup.png”;
                    image.src = missingImageBackupSrc;
                };

                gallery.appendChild(image);
                imageUrls.push(imageSrc);
            }

            // Remove non-present images from the gallery
            const galleryImages = gallery.querySelectorAll(“img.gallery-image”);
            galleryImages.forEach((image) => {
                if (!imageUrls.includes(image.src)) {
                    image.remove();
                }
            });
        }

        // Function to pad numbers with leading zeros
        function padNumberWithZero(number, length) {
            let numString = String(number);
            while (numString.length < length) {
                numString = “0” + numString;
            }
            return numString;
        }

        // Function to manually update the gallery
        function manualUpdate() {
            clearInterval(intervalId); // Stop auto-update if in progress
            updateGallery();
        }

        // Function to toggle auto-update
        function toggleAutoUpdate() {
            if (autoUpdateCheckbox.checked) {
                intervalId = setInterval(updateGallery, 5000); // Auto-update every 5 seconds
                updateButton.disabled = true;
            } else {
                clearInterval(intervalId);
                updateButton.disabled = false;
            }
        }
    </script>
</body>
</html>