<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>وب‌سایت سریع</title>
    <style>
        /* مخفی کردن تمامی لینک‌ها */
        a {
          display: none !important;
        }
    
        body, html {
          margin: 0;
          padding: 0;
          height: 100%;
          overflow: hidden; /* جلوگیری از اسکرول در زمان نمایش نوار پیشرفت */
          background-color: #f4f4f9;
          font-family: Arial, sans-serif;
        }
    
        #loader {
          width: 100%;
          text-align: center;
          position: absolute;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          z-index: 1;
          background-color: #f4f4f9;
        }
    
        #progress {
          width: 80%;
          background-color: #eee;
        }
    
        #bar {
          width: 0;
          height: 30px;
          background-color: #76c7c0;
          text-align: center;
          line-height: 30px;
          color: white;
        }
    
        .container {
          display: none; /* ابتدا مخفی است تا وقتی برنامه Gradio آماده شود */
          position: relative;
          overflow: hidden;
          height: 100vh;
          width: 100%;
        }
    
        gradio-app {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 100%;
        }
    
        /* استایل دکمه دانلود تصویر */
        #downloadButton {
          display: none; /* مخفی اولیه */
          position: absolute;
          top: 20px;
          right: 20px;
          background-color: #4CAF50;
          color: white;
          border: none;
          padding: 10px 20px;
          cursor: pointer;
          border-radius: 5px;
          z-index: 2;
        }
    
        #downloadButton:hover {
          background-color: #45a049;
        }
    
        /* استایل مودال */
        .modal {
          display: none; /* مخفی است */
          position: fixed;
          z-index: 3;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0,0,0,0.4); /* پس‌زمینه نیمه‌شفاف */
        }
    
        .modal-content {
          background-color: #fefefe;
          margin: 10% auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
          max-width: 600px;
          border-radius: 10px;
          position: relative;
          text-align: center; /* مرکز کردن محتوا */
        }
    
        .close {
          color: #aaa;
          position: absolute;
          top: 10px;
          right: 20px;
          font-size: 28px;
          font-weight: bold;
          cursor: pointer;
        }
    
        .close:hover,
        .close:focus {
          color: black;
          text-decoration: none;
        }
    
        #modalImageList img {
          max-width: 100%;
          height: auto;
          margin-bottom: 10px;
        }
    
        #downloadImages {
          background-color: #008CBA;
          color: white;
          border: none;
          padding: 10px 15px;
          cursor: pointer;
          border-radius: 5px;
          margin-top: 20px; /* فاصله بیشتر از دکمه */
        }
    
        #downloadImages:hover {
          background-color: #007B9E;
        }
    
        #instructions {
          margin-top: 15px;
          font-size: 14px;
          color: #555;
        }
    </style>
</head>
<body>
    <!-- دکمه دانلود تصویر -->
    <button id="downloadButton">دانلود تصویر</button>
    
    <div id="loader">
        <div id="progress">
            <div id="bar">0%</div>
        </div>
        <div>لطفاً صبر کنید...</div>
    </div>
    
    <!-- بازیابی تصاویر داخل صفحه از طریق مدل Gradio ممکن نیست، بنابراین این بخش تنها برای نمایش نمونه است -->
    <div class="container">
        <gradio-app src="https://stabilityai-stable-diffusion-3-5-large.hf.space"></gradio-app>
    </div>
    
    <!-- مودال اعلان -->
    <div id="imageModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>لیست تصاویر موجود</h2>
            <div id="modalImageList"><!-- تصاویر شناسایی شده نمایش داده می‌شوند --></div>
            <button id="downloadImages">دانلود تصاویر</button>
            <div id="instructions">برای ذخیره تصاویر روی دکمه دانلود کلیک کنید. بعد از باز شدن تصاویر، از صفحه عکس بگیرید و بعدا برش دهید.</div>
        </div>
    </div>
    
    <!-- بارگذاری اسکریپت Gradio با async برای بهبود سرعت بارگذاری -->
    <script async type="module" src="https://gradio.s3-us-west-2.amazonaws.com/5.3.0/gradio.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function showContent() {
                document.getElementById('loader').style.display = 'none';
                document.querySelector('.container').style.display = 'block';
                document.body.style.overflow = 'auto'; // بازکردن اسکرول بعد از بارگذاری
                document.getElementById('downloadButton').style.display = 'block'; // نمایش دکمه دانلود پس از بارگذاری
            }
        
            function simulateProgress(callback) {
                let progressElement = document.getElementById('bar');
                let progress = 0;
                function updateProgress() {
                    progress += 1;
                    if (progress > 100) progress = 100;
                    progressElement.style.width = progress + '%';
                    progressElement.textContent = progress + '%';
                    if (progress < 100) {
                        setTimeout(updateProgress, 150); // بروزرسانی هر 150 میلی‌ثانیه
                    } else {
                        callback();
                    }
                }
                updateProgress();
            }
        
            window.onload = function() {
                simulateProgress(showContent);
        
                const gradioApp = document.querySelector('gradio-app');
        
                function checkIfLoaded() {
                    if (gradioApp && gradioApp.shadowRoot && gradioApp.shadowRoot.querySelector('some-element-inside-gradio')) { // تغییر با عنصر مناسب
                        document.getElementById('bar').style.width = '100%';
                        document.getElementById('bar').textContent = '100%';
                        showContent();
                    } else {
                        setTimeout(checkIfLoaded, 100); // بررسی هر 100 میلی‌ثانیه
                    }
                }
        
                checkIfLoaded();
            }
        
            // عملکرد دکمه دانلود تصویر
            var downloadButton = document.getElementById('downloadButton');
            if (downloadButton) {
                downloadButton.addEventListener('click', function() {
                    // شناسایی تصاویر داخل صفحه
                    const images = document.querySelectorAll('img');
                    if (images.length === 0) {
                        alert('هیچ تصویری در صفحه یافت نشد.');
                        return;
                    }
            
                    // نمایش مودال
                    const modal = document.getElementById('imageModal');
                    const modalImageList = document.getElementById('modalImageList');
                    modalImageList.innerHTML = ''; // پاکسازی قبل از اضافه کردن تصاویر جدید
            
                    images.forEach((img, index) => {
                        const imgWrapper = document.createElement('div');
                        imgWrapper.style.marginBottom = '10px';
            
                        const image = document.createElement('img');
                        image.src = img.src;
                        image.alt = تصویر ${index + 1}; // استفاده از قالب‌بندی درست
                        image.style.maxWidth = '100%';
                        image.style.height = 'auto';
            
                        imgWrapper.appendChild(image);
                        modalImageList.appendChild(imgWrapper);
                    });
            
                    modal.style.display = 'block';
                });
            }
        
            // بسته شدن مودال
            var closeModal = document.querySelector('.close');
            if (closeModal) {
                closeModal.addEventListener('click', function() {
                    document.getElementById('imageModal').style.display = 'none';
                });
            }
        
            // کلیک بیرون از مودال برای بستن آن
            window.addEventListener('click', function(event) {
                const modal = document.getElementById('imageModal');
                if (event.target == modal) {
                    modal.style.display = 'none';
                }
            });
        
            // عملکرد دکمه دانلود تصاویر در مودال
            var downloadImagesButton = document.getElementById('downloadImages');
            if (downloadImagesButton) {
                downloadImagesButton.addEventListener('click', function() {
                    const images = document.querySelectorAll('#modalImageList img');
                    if (images.length === 0) {
                        alert('هیچ تصویری برای دانلود موجود نیست.');
                        return;
                    }
            
                    images.forEach((img, index) => {
                        const link = document.createElement('a');
                        link.href = img.src;
                        link.download = image_${index + 1}.png; // نام فایل قابل دانلود با قالب‌بندی درست
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    });
            
                    alert('تصاویر در مرورگر جهت دانلود باز شدند.');
                    document.getElementById('imageModal').style.display = 'none';
                });
            }
        });
    </script>
</body>
</html> این کد منو کاری کن هر تصویر هر چند بار که روی دکمه دانلود کلیک میکنیم همون تصویر یک بار نشون بده الان اینجوریه که یک تصویر است میزنم روی دکمه دانلود توی اعلان همون نشون میده دوباره می‌زنم دوتا از همون تصویر نشون میشده