<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradio App</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 {
    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;
  }

  .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: 10px;
  }

  #downloadImages:hover {
    background-color: #007B9E;
  }

  #instructions {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
  }
</style>
<script
  type="module"
  src="https://gradio.s3-us-west-2.amazonaws.com/5.3.0/gradio.js"
></script>
</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>

<script>
  function showContent() {
    document.getElementById('loader').style.display = 'none';
    document.querySelector('.container').style.display = 'block';
    document.body.style.overflow = 'auto'; // بازکردن اسکرول بعد از بارگذاری
  }

  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('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>

دکمه دانلود وسط اعلان باشه و همچنین متن وسط اعلان برای ذخیره تصاویر روی دکمه دانلود کلیک کنید. بعد از باز شدن تصاویر، از صفحه عکس بگیرید و بعدا برش دهید. این متن فقط پایین اعلان نشون بشه کافیه وقتی کاربر دکمه دانلود کلیک می‌کنه لینک تصویر باز بشه و همچنین دکمه دانلود وقتی نوار پیشرفت تموم شد نمایش بده