<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <!-- حفظ ریسپانسیو برای کل سایت -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gradio App Integration</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%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #f4f4f9;
            position: fixed; /* پوشش کامل صفحه */
            top: 0;
            left: 0;
            z-index: 9999; /* بالاتر از سایر عناصر */
        }

        #progress {
            width: 80%;
            height: 30px; /* تعیین ارتفاع مشخص */
            background-color: #eee;
            border: 1px solid #ccc; /* حاشیه برای وضوح بیشتر */
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        #bar {
            width: 0%;
            height: 100%; /* پر شدن کامل ارتفاع #progress */
            background-color: #76c7c0;
            text-align: center;
            line-height: 30px;
            color: white;
            transition: width 0.15s ease-in-out;
        }

        .container {
            display: none; /* مخفی اولیه تا زمانی که برنامه Gradio بارگذاری شود */
            position: relative;
            overflow-x: auto; /* اسکرول افقی در صورت نیاز */
            height: 100vh;
            width: 100%;
            box-sizing: border-box;
            padding: 20px; /* فاصله داخلی برای زیبایی بیشتر */
        }

        /* تنظیم کامپوننت gradio-app */
        gradio-app {
            display: block;
            width: 1200px; /* عرض ثابت برای حالت کامپیوتر */
            height: calc(100vh - 40px); /* ارتفاع کمتر از کل صفحه به دلیل padding */
            margin: 0 auto; /* مرکز کردن در صفحه */
        }

        /* اطمینان از اینکه در موبایل، اپلیکیشن Gradio به صورت کامپیوتر نمایش داده می‌شود */
        @media (max-width: 1200px) {
            .container {
                /* ایجاد اسکرول افقی برای اپلیکیشن Gradio */
                overflow-x: auto;
            }

            gradio-app {
                width: 1200px; /* حفظ عرض ثابت */
            }
        }

        /* استایل مودال اعلان (در صورت نیاز به نمایش پیام‌ها در آینده) */
        .modal {
            display: none; /* مخفی است */
            position: fixed;
            z-index: 10001; /* بالاتر از سایر عناصر */
            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;
        }

        #instructions {
            margin-top: 15px;
            font-size: 14px;
            color: #555;
        }

        /* استایل مودال تمام صفحه */
        #fullScreenModal {
            display: none; /* مخفی است */
            position: fixed;
            z-index: 10002; /* بالاتر از سایر عناصر */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.9); /* پس‌زمینه تاریک */
            overflow: auto;
        }

        .full-screen-content {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            padding: 20px;
            box-sizing: border-box;
        }

        .full-screen-content img {
            max-width: 90%;
            max-height: 90%;
            margin: 10px;
            border: 2px solid #fff;
            border-radius: 5px;
        }

        .close-fullscreen {
            position: absolute;
            top: 20px;
            right: 30px;
            color: #fff;
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
        }

        .close-fullscreen:hover,
        .close-fullscreen:focus {
            color: #bbb;
            text-decoration: none;
        }

        /* استایل مودال عدم یافتن تصاویر */
        #noImagesModal .modal-content {
            text-align: center;
        }

        #noImagesModal .modal-content img {
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <!-- نوار پیشرفت و پیام -->
    <div id="loader">
        <div id="progress">
            <div id="bar">0%</div>
        </div>
        <div>لطفاً صبر کنید...</div>
    </div>

    <!-- جاگذاری اپلیکیشن Gradio با استفاده از تگ gradio-app -->
    <div class="container">
        <gradio-app src="https://multimodalart-outpaint-video-zoom.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>
            <div id="instructions">برای ذخیره تصاویر، آن&zwnj;ها را در حالت تمام صفحه نمایش دهید و از صفحه اسکرین شات بگیرید و بعداً برش دهید.</div>
        </div>
    </div>

    <!-- مودال اعلام عدم یافتن تصاویر -->
    <div id="noImagesModal" class="modal">
        <div class="modal-content">
            <span class="close-no-images">&times;</span>
            <h2>هیچ تصویری یافت نشد</h2>
            <img src="https://via.placeholder.com/150" alt="No Images" style="max-width: 100%; height: auto; margin-bottom: 20px;" />
            <p>هیچ تصویر ساخته شده‌ای برای دانلود یافت نشد.</p>
        </div>
    </div>

    <!-- مودال تمام صفحه برای نمایش تصاویر -->
    <div id="fullScreenModal" class="modal">
        <div class="full-screen-content">
            <span class="close-fullscreen">&times;</span>
            <div id="fullScreenImageList"><!-- تصاویر کامل صفحه نمایش داده می‌شوند --></div>
        </div>
    </div>

    <!-- بارگذاری اسکریپت Gradio -->
    <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.44.0/gradio.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function showContent() {
                document.getElementById('loader').style.display = 'none';
                document.querySelector('.container').style.display = 'block';
                document.body.style.overflow = 'auto'; // باز کردن اسکرول بعد از بارگذاری
            }

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

            // حذف تمامی کدهای مربوط به دکمه دانلود

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

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

                function checkIfLoaded() {
                    // بررسی اینکه gradio-app بارگذاری شده است
                    // به دلیل محدودیت‌های امنیتی، از دسترسی به shadowRoot صرفنظر می‌کنیم
                    // در عوض، از رویداد 'gradio_loaded' و 'load' استفاده می‌کنیم
                    if (gradioApp) {
                        // Listen for 'gradio_loaded' event if available
                        gradioApp.addEventListener('gradio_loaded', function() {
                            document.getElementById('bar').style.width = '100%';
                            document.getElementById('bar').textContent = '100%';
                            showContent();
                        });

                        // Alternatively, listen for 'load' event on gradio-app
                        gradioApp.addEventListener('load', function() {
                            document.getElementById('bar').style.width = '100%';
                            document.getElementById('bar').textContent = '100%';
                            showContent();
                        });

                        // اگر رویدادی دریافت نشد، پس از گذشت زمان معینی محتوا را نمایش دهید
                        setTimeout(function() {
                            document.getElementById('bar').style.width = '100%';
                            document.getElementById('bar').textContent = '100%';
                            showContent();
                        }, 10000); // 10 ثانیه
                    } else {
                        setTimeout(checkIfLoaded, 100); // بررسی هر 100 میلی‌ثانیه
                    }
                }

                checkIfLoaded();
            }

            // حذف تمامی کدهای مربوط به عملکرد دکمه دانلود و مودال‌ها
            // زیرا در این مرحله دکمه دانلود حذف شده است

            // بسته شدن مودال‌ها در صورت وجود
            var closeModalElements = document.querySelectorAll('.close, .close-no-images, .close-fullscreen');
            closeModalElements.forEach(function(elem) {
                elem.addEventListener('click', function() {
                    const modalId = elem.parentElement.parentElement.id;
                    document.getElementById(modalId).style.display = 'none';
                });
            });

            // کلیک بیرون از مودال‌ها برای بستن آن‌ها
            window.addEventListener('click', function(event) {
                const modals = document.querySelectorAll('.modal');
                modals.forEach(function(modal) {
                    if (event.target == modal) {
                        modal.style.display = 'none';
                    }
                });
            });
        });
    </script>
</body>
</html> این سایت خودش در حالت طبیعی زوم است یکم کاری کن فشرده باز بشه