ok, each image should fit in each placeholder automatically and keep its original aspect-ratio. also, the whole gallery container of images, excluding control elements, should auto-fit in whole window width and height strictly in dependece of window resize. all images should auto-fit within their fixed placeholders or grid of containers in gallery.: <!DOCTYPE html>
<html>
<head>
    <title>Auto-Updating Image Gallery</title>
    <style>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden; 
    }

    .container {
        position: relative;
        height: 100vh; 
        display: flex;
        flex-direction: column;
    }

    #gallery {
        flex: 1; 
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 10px;
        align-items: start;
        justify-items: center;
        padding: 20px;
        overflow-y: auto; 
        -webkit-overflow-scrolling: touch; 
    }

    .gallery-image {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }

    .image-placeholder {
        width: 200px;
        height: 200px;
        background-color: lightgray;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #updateButtonContainer {
        position: absolute;
        top: 10px;
        right: 20px;
    }

    #rangeSlider {
        width: 100%;
        margin-top: 10px;
    }
    </style>
</head>
<body>
    <div class='container'>
        <div id='updateButtonContainer'>
            <button id='updateButton' onclick='manualUpdate()'>Manual Update</button>
            <label for='autoUpdate'>Auto-Update:</label>
            <input type='checkbox' id='autoUpdate' onchange='toggleAutoUpdate()' />
        </div>
        
        <h1>Auto-Updating Image Gallery</h1>
        
        <div id='gallery'></div>
        
        <input type='range' id='rangeSlider' min='1' max='200' step='1' value='1' onchange='updateRange(this.value)' />
    </div>

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

        // Function to fetch and update the gallery
        function updateGallery() {
            gallery.innerHTML = ''; // Clear existing gallery images

            for (let i = currentRange; i <= currentRange + 9; i++) {
                if (i <= 200) {
                    const imageContainer = document.createElement('div');
                    imageContainer.classList.add('image-container');
                    
                    const image = new Image();
                    const imageSrc = imageUrl + padNumberWithZero(i, 5) + '.png';
                    image.src = imageSrc;
                    image.classList.add('gallery-image');
                    
                    const imagePlaceholder = document.createElement('div');
                    imagePlaceholder.classList.add('image-placeholder');
                    
                    imageContainer.appendChild(image);
                    imageContainer.appendChild(imagePlaceholder);
                    
                    image.onerror = () => {
                        // Replace missing image with a backup image if available
                        const missingImageBackupSrc = imageUrl + 'backup.png';
                        image.src = missingImageBackupSrc;
                    };

                    gallery.appendChild(imageContainer);
                }
            }
        }
        
        // 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
            currentRange = 1;
            rangeSlider.value = 1;
            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;
            }
        }

        // Function to update the range
        function updateRange(value) {
            currentRange = parseInt(value);
            updateGallery();
        }
        
        // Initial gallery update
        updateGallery();
    </script>
</body>
</html>