need to make an self auto-updating image gallery by using html, css, javascript. need this gallery to show all images from that link “https://camenduru-com-webui-docker.hf.space/file=outputs/extras-images/00072.png” it can contain images from 00001 to 00200. some of these images are not updating and, I don’t know… you don’t uderstand. I want to grab all images from that link and show them and auto-update in my gallery code on page. try to do a fully working html page. just make an auto-updating radiobutton and a button to manually update, disable that auto-updating button by default. it output all images from range of 00001 to 00200, right? also, need somehow correctly align all images to stay within some grid and arrange and align correcly as in gallery of some thumbnails that will auto-fit all the images on full window size and also will keep correct images aspect-ratio. also, if we get an error or no image data returned from that range in url, we need it to not fetch and leave that space in gallery empty by replacing it with available other image that exist in range. also, redo all code without a backticks in template literals used, do in old fashion through + and '. it works. is there any methods to check the whole image range in url if image data is changed and if it is changed then simply auto-update that specific image without fully reupdating the whole range in that url in gallery? “Please note that the functionality of checking if the image data has changed and only updating that specific image without fully re-updating the whole range would require additional backend code and cannot be achieved with just HTML, CSS, and JavaScript.”. but wait, you told me that: "To check if an image in the range has been changed and update only that specific image without re-updating the entire range, you can use the fetch API to send requests and compare the response headers or image data with the existing image in the gallery. " ok, I got an error “error fetching image” probably because on first update in gallery when there’s no any images preloaded. also, I’m not sure how this serverside updating of images works exactly, but I’m sure that this whole image range on that url is auto-wiping after some time on some specific max num of images and simply starts from 00001 again. need somehow to deal with that, not sure… also, the images themselves are big in bytes of size and need to do something with that as well. it's probably also a good idea to integrate a cache buster to remove an old chached image data.: <!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;
        
        // Function to fetch and update the gallery
        function updateGallery() {
            gallery.innerHTML = ''; // Clear existing gallery images

            for (let i = 1; i <= 200; 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);
            }
        }
        
        // 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>