(((no one has any right to use this code for any means))). check this code for excessive queue for server-side. there's some "backup.png" on that side sometimes appearing that inerfere sometimes. the idea here is queue in range from that url from 00001 to 00200 within some appropriate timings for queue used, to not cause an attention from admins or anything on backend. ha-ha.: <!DOCTYPE html>
<html>
<head>
<title>PapaPedro's AI Gallery</title>
<style>
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

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

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

.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
}

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

#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>PapaPedro's AI 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/';
const numColumns = 1;
let intervalId;
let currentRange = 1;

function updateGallery() {
    const numImages = numColumns * 10;
    const maxRangeValue = Math.max(10, numImages - (numColumns - 10));

    if (currentRange > maxRangeValue) {
        currentRange = maxRangeValue;
        rangeSlider.value = currentRange;
    }
    
    gallery.innerHTML = ''; // Clear existing gallery images

    const galleryWidth = gallery.clientWidth;

    const cellWidth = galleryWidth / numColumns;

    for (let i = currentRange; i <= currentRange + numImages; i++) {
        const imageContainer = document.createElement('div');
        imageContainer.classList.add('image-container');
        imageContainer.style.width = cellWidth + 'px';

        const image = new Image();
        const imageSrc = imageUrl + padNumberWithZero(i, 5) + '.png';
        image.src = imageSrc;
        image.classList.add('gallery-image');
        image.addEventListener('click', function() {
            enlargeImage(imageSrc);
        });

        const imagePlaceholder = document.createElement('div');
        imagePlaceholder.classList.add('image-placeholder');
        imageContainer.appendChild(imagePlaceholder);
        imageContainer.appendChild(image);

        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, 50000); // 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();
}

// Function to enlarge an image to full viewport
function enlargeImage(imageSrc) {
    const fullscreenImage = new Image();
    fullscreenImage.src = imageSrc;
    fullscreenImage.classList.add('gallery-image');
    fullscreenImage.style.position = 'fixed';
    fullscreenImage.style.top = '0';
    fullscreenImage.style.left = '0';
    fullscreenImage.style.width = '100%';
    fullscreenImage.style.height = '100%';
    fullscreenImage.style.objectFit = 'contain';
    fullscreenImage.style.zIndex = '9999';
    fullscreenImage.style.cursor = 'pointer';
    fullscreenImage.addEventListener('click', function() {
        document.body.removeChild(fullscreenImage);
    });

    document.body.appendChild(fullscreenImage);
}

// Initial gallery update
updateGallery();
</script>
</body>
</html>