<p>&nbsp;</p>
<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>
<script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/5.3.0/gradio.js"></script>
<!-- دکمه دانلود تصویر -->
<p><button id="downloadButton">دانلود تصویر</button></p>
<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>
<script>
    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'; // نمایش دکمه دانلود پس از بارگذاری
    }

    window.onload = function() {
      simulateProgress(showContent);

      const gradioApp = document.querySelector('gradio-app');

      function checkIfLoaded() {
        if (gradioApp && gradioApp.shadowRoot) {
          document.getElementById('bar').style.width = '100%';
          document.getElementById('bar').textContent = '100%';
          showContent();
        } else {
          setTimeout(checkIfLoaded, 100); // بررسی هر 100 میلی‌ثانیه
        }
      }

      checkIfLoaded();
    }

    function simulateProgress(callback) {
      let progressElement = document.getElementById('bar');
      let progress = 0;
      function updateProgress() {
        progress += 1;
        progressElement.style.width = progress + '%';
        progressElement.textContent = progress + '%';
        if (progress < 100) {
          setTimeout(updateProgress, 150); // بروزرسانی هر 150 میلی‌ثانیه
        } else {
          callback();
        }
      }
      updateProgress();
    }

    // عملکرد دکمه دانلود تصویر
    document.getElementById('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';
    });

    // بسته شدن مودال
    document.querySelector('.close').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';
      }
    });

    // عملکرد دکمه دانلود تصاویر در مودال
    document.getElementById('downloadImages').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>  به این کد من یک دکمه دانلود وجود داره اینو داشته باش تا بهت بگم چیکار کنی