<p>&nbsp;</p>
<style>
        /* تنظیمات پایه برای body و html */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden; /* مخفی کردن اسکرول‌های اضافی بدن صفحه */
            background-color: #f0f0f0; /* رنگ پس‌زمینه */
            font-family: Arial, sans-serif; /* فونت برای بهتر شدن ظاهر متن */
        }

        /* متغیر CSS برای ارتفاع نمایشگر */
        :root {
            --vh: 100%;
        }

        /* کانتینر iframe */
        .iframe-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: calc(var(--vh) * 100); /* استفاده از متغیر --vh */
            overflow: hidden; /* مخفی کردن بخش‌های اضافی */
            z-index: 1; /* ترتیب نمایش */
        }

        /* تنظیمات iframe */
        .iframe-container iframe {
            position: absolute;
            top: -170px; /* پنهان کردن حدود ۴.۵ سانتی‌متر بالای صفحه */
            left: 0;
            width: 100%;
            height: calc((var(--vh) * 100) + 170px + 228px); /* تنظیم ارتفاع جدید */
            border: none;
            display: none; /* مخفی کردن iframe تا بارگذاری موفق */
        }

        /* Overlay برای مخفی کردن بخش بالایی صفحه */
        .overlay-top {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 170px; /* ارتفاع حدود ۴.۵ سانتی‌متر */
            background-color: transparent; /* رنگ پس‌زمینه شفاف */
            z-index: 900; /* زیر iframe-container */
            pointer-events: none; /* اجازه دادن به اسکرول از طریق iframe */
        }

        /* Overlay برای مخفی کردن بخش پایینی صفحه */
        .overlay-bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 228px; /* ارتفاع ۶ سانتی‌متر (تقریباً 228px) */
            background-color: transparent; /* رنگ پس‌زمینه شفاف */
            z-index: 900; /* زیر iframe-container */
            pointer-events: none; /* اجازه دادن به اسکرول از طریق iframe */
        }

        /* لودینگ */
        .loading {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%); /* مرکزیت عمودی و افقی */
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            z-index: 2000; /* بالاتر از iframe-container و overlays */
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 90%; /* اطمینان از نمایش در دستگاه‌های کوچک */
            box-sizing: border-box;
        }

        /* Media Query برای موبایل */
        @media screen and (max-width: 768px) {
            .loading {
                width: 80%;
            }
        }

        .loading-message {
            margin-bottom: 10px;
            font-size: 18px;
            text-align: center;
        }

        .progress {
            width: 80%;
            max-width: 400px;
            height: 20px;
            background-color: #ddd;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .progress-bar {
            height: 100%;
            width: 0;
            background-color: #4caf50;
            transition: width 0.25s;
        }

        .error-message {
            display: none;
            color: red;
            text-align: center;
            margin-bottom: 10px;
            font-size: 16px;
        }

        #retryButton {
            display: none;
            padding: 10px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        #retryButton:hover {
            background-color: #45a049;
        }

        /* دکمه دانلود */
        .download-button {
            display: block;
            width: 120px; /* کاهش عرض دکمه‌ها */
            color: white;
            text-align: center;
            padding: 8px; /* کاهش پدینگ دکمه‌ها */
            border-radius: 5px;
            cursor: pointer;
            font-size: 13px; /* کاهش اندازه فونت دکمه‌ها */
            transition: background-color 0.3s;
            position: fixed;
            top: 20px;
            right: 10px;
            z-index: 10001;
            text-decoration: none;
            background-color: #4CAF50;
        }

        .download-button:hover {
            background-color: #45a049;
        }
    </style>
<!-- لودینگ -->
<div class="loading" id="loading">
<div class="loading-message">لطفاً صبر کنید...</div>
<div class="progress">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="error-message" id="errorMessage">بارگیری زیاد طول کشید.<br />در صورت عدم بارگذاری، فیلترشکن خود را روشن کنید.</div>
<button id="retryButton">بارگذاری مجدد</button></div>
<!-- دکمه دانلود تصویر -->
<p><a href="#" class="download-button" id="downloadButton">دانلود تصویر 📥</a></p>
<!-- کانتینر iframe -->
<div class="iframe-container"><iframe id="myIframe" src="https://deddy-unlimited-flux-schnell-v1-3.hf.space/" scrolling="yes"></iframe></div>
<!-- Overlay برای مخفی کردن بخش بالایی صفحه -->
<div class="overlay-top" id="overlayTop"></div>
<!-- Overlay برای مخفی کردن بخش پایینی صفحه -->
<div class="overlay-bottom" id="overlayBottom"></div>
<p>
<script>
        // متغیر برای بررسی تکمیل بارگذاری اولیه
        let initialLoadCompleted = false;

        // تابع تنظیم متغیر CSS --vh به ارتفاع نمایشگر
        function setVh() {
            // محاسبه ارتفاع نمایشگر و تنظیم متغیر --vh
            let vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
        }

        // فراخوانی تابع برای تنظیم متغیر vh
        setVh();

        // به‌روزرسانی متغیر vh در تغییر اندازه صفحه
        window.addEventListener('resize', setVh);

        // عناصر DOM
        let progress = 0;
        const progressBar = document.getElementById('progressBar');
        const retryButton = document.getElementById('retryButton');
        const errorMessage = document.getElementById('errorMessage');
        const loading = document.getElementById('loading');
        const iframe = document.getElementById('myIframe');
        let progressInterval;
        let errorTimeout;

        // تابع شروع پیشرفت نوار لودینگ
        function startProgress() {
            if (initialLoadCompleted) return; // جلوگیری از اجرای مجدد
            progressInterval = setInterval(() => {
                if (progress < 100) {
                    progress += 10; // افزایش ۱۰٪ در هر ثانیه
                    if (progress > 100) progress = 100;
                    progressBar.style.width = progress + '%';
                }
                if (progress >= 100) {
                    clearInterval(progressInterval);
                    if (!initialLoadCompleted) {
                        showError();
                    }
                }
            }, 1000);

            // تایم‌اوت برای نمایش پیام خطا بعد از ۱۰ ثانیه
            errorTimeout = setTimeout(() => {
                if (!initialLoadCompleted) {
                    showError();
                }
            }, 10000);
        }

        // تابع بارگذاری موفق iframe
        function iframeLoaded() {
            if (initialLoadCompleted) return;
            initialLoadCompleted = true;
            clearInterval(progressInterval);
            clearTimeout(errorTimeout);
            loading.style.display = 'none';
            iframe.style.display = 'block';

            // پاک کردن تایم‌اوت‌ها و اینتروال‌ها
            progressInterval = null;
            errorTimeout = null;
        }

        // تابع خطا در بارگذاری iframe
        function iframeError() {
            if (initialLoadCompleted) return;
            clearInterval(progressInterval);
            clearTimeout(errorTimeout);
            showError();
        }

        // نمایش خطا
        function showError() {
            errorMessage.style.display = 'block';
            retryButton.style.display = 'block';
        }

        // بازنشانی لودینگ
        function resetLoading() {
            progress = 0;
            progressBar.style.width = '0%';
            initialLoadCompleted = false;
            loading.style.display = 'flex';
            errorMessage.style.display = 'none';
            retryButton.style.display = 'none';
            iframe.style.display = 'none';
            clearInterval(progressInterval);
            clearTimeout(errorTimeout);

            // اضافه کردن دوباره رویدادها با once: true
            iframe.addEventListener('load', iframeLoaded, { once: true });
            iframe.addEventListener('error', iframeError, { once: true });
        }

        // بارگذاری مجدد iframe
        function loadIframe() {
            iframe.src = iframe.src;
        }

        // رویداد کلیک بر روی دکمه بارگذاری مجدد
        retryButton.addEventListener('click', () => {
            resetLoading();
            loadIframe();
            startProgress();
        });

        // افزودن رویداد بارگذاری iframe با once: true
        iframe.addEventListener('load', iframeLoaded, { once: true });
        iframe.addEventListener('error', iframeError, { once: true });

        // شروع بارگذاری و لودینگ
        startProgress();

        // اسکریپت دکمه دانلود تصویر

        // عناصر DOM مربوط به دکمه دانلود
        const downloadButton = document.getElementById('downloadButton');

        // تابع دانلود تصاویر PNG
        function handleDownload(event) {
            event.preventDefault();
            const iframe = document.getElementById('myIframe');
            const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

            try {
                const images = iframeDocument.querySelectorAll('img');
                if (images.length === 0) {
                    alert("هیچ تصویری با فرمت PNG برای دانلود یافت نشد.");
                    return;
                }

                let pngImages = [];
                images.forEach((img) => {
                    if (img.src.toLowerCase().endsWith('.png')) {
                        pngImages.push(img.src);
                    }
                });

                if (pngImages.length === 0) {
                    alert("هیچ تصویر PNG یافت نشد.");
                    return;
                }

                const numImages = pngImages.length;

                if (confirm(`${numImages} تصویر با فرمت PNG یافت شد.\nبرای دانلود روی "تأیید" کلیک کنید. بعد از باز شدن مرورگر، روی تصویر محکم نگهدارید و بارگیری تصویر را کلیک کنید.`)) {
                    pngImages.forEach((imageUrl) => {
                        window.open(imageUrl, '_blank');
                    });
                }

            } catch (error) {
                console.error("خطا در شناسایی تصاویر: ", error);
                alert("خطایی در شناسایی تصاویر رخ داد. ممکن است از طریق مرورگر نتوان تصاویر را دانلود کرد.");
            }
        }

        // افزودن رویداد کلیک به دکمه دانلود
        downloadButton.addEventListener('click', handleDownload);
    </script>
</p> در این کد وقتی روی دکمه دانلود تصویر کلیک می‌کنیم تصاویر با فرمت png شناسایی می‌کنه من من میخواستم کد تغییر بدی تا فقط تصاویر با فرمت webp رو شناسایی کنه کد کامل یکجا درست کن بفرست