<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> این سایت سریع باز نمیشه می‌دونی مشکل چیه در این حالت . در حالی که توی مرورگر فقط تنها سایت قرار میدم زود باز میشه کد کامل یکجا درست کن بفرست فک کنم بخاطر دکمه دانلود تصویر باشه کاری کن دکمه دانلود تاثیری بر باز شدن سایت نداشته باشد