<!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;
  }

  #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%;
  }
</style>
<script
  type="module"
  src="https://gradio.s3-us-west-2.amazonaws.com/5.3.0/gradio.js"
></script>
</head>
<body>
  <div id="loader">
    <div id="progress">
      <div id="bar">0%</div>
    </div>
    <div>لطفاً صبر کنید...</div>
  </div>

  <!-- اگر متنی برای نمایش ندارید، می‌توانید این بخش را حذف کنید -->
  <!-- <div class="content" id="textContent"></div> -->

  <div class="container">
    <gradio-app src="https://stabilityai-stable-diffusion-3-5-large.hf.space"></gradio-app>
  </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); // Check every 100 milliseconds if Gradio is loaded
      }
    }

    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); // Update progress every 150 milliseconds
      } else {
        callback();
      }
    }
    updateProgress();
  }
</script>
</body>
</html> بالای این صفحه سمت راست یک دکمه دانلود تصویر قرار بده که وقتی دکمه دانلود تصویر کلیک میکنیم تصاویر داخل صفحه رو شناسایی کنه داخل یک اعلان نشون بده بعد پایین اعلام یک دکمه دانلود تصویر باشه و پایین دکمه اعلان هم نوشته باشه که برای ذخیره تصاویر روی دکمه دانلود کلیک کنید بعد از باز شدن از صفحه عکس بگیرید و بعدا برش بدید.