در این کد یک دکمه پی مثل کد پایین قرار بده و تمام پرامپت هارو در این کد نیز بزار <p>&nbsp;</p>
<style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        .iframe-container {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        iframe {
            width: 100%;
            height: 100%; /* تنظیم ارتفاع به 100% برای نمایش کامل محتوا */
            border: none;
            display: none;
            position: relative;
            top: 0; /* حذف تغییر موقعیت برای نمایش کامل محتوا */
        }

        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 10000;
        }

        .loading-message {
            margin-bottom: 20px;
            font-size: 18px;
        }

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

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

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

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

        .download-button, .description-button {
            display: block;
            width: 90px;
            color: white;
            text-align: center;
            padding: 6px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 11px;
            transition: background-color 0.3s;
            position: fixed;
            top: 10px;
            z-index: 10001;
            text-decoration: none;
        }

        .download-button {
            background-color: #4CAF50;
            right: 10px;
        }

        .description-button {
            background-color: rgb(84, 110, 122);
            left: 10px;
        }

        .download-button:hover, .description-button:hover {
            background-color: #45a049;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 10002;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 400px;
            text-align: center;
            border-radius: 5px;
        }

        .modal-button {
            margin-top: 20px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }

        .cancel-btn {
            background-color: #f44336;
            color: white;
        }

        .download-btn {
            background-color: #4CAF50;
            color: white;
        }

        .download-button-bottom {
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #4CAF50;
            padding: 10px;
            border-radius: 5px;
            color: white;
            text-align: center;
            font-size: 14px;
            text-decoration: none;
            z-index: 10001;
            cursor: pointer;
        }

        .download-button-bottom:hover {
            background-color: #45a049;
        }
    </style>
<!-- دکمه‌های دانلود و توضیحات -->
<p><a href="#" class="download-button" id="downloadButton">دانلود تصویر 📥</a> <a href="#" class="description-button" id="descriptionButton">توضیحات</a></p>
<!-- پنجره سفارشی (modal) -->
<div id="myModal" class="modal">
<div class="modal-content">
<p>هوش مصنوعی Flux از متن فارسی پشتیبانی نمی&zwnj;کند.<br />پرامپت یا همون متنی که وارد می&zwnj;کنید به زبان انگلیسی وارد کنید.<br />برای استفاده از مترجم گوگل، روی 'مترجم' کلیک کنید.</p>
<button class="modal-button cancel-btn" id="cancelBtn">لغو</button> <button class="modal-button download-btn" id="confirmBtn">مترجم</button></div>
</div>
<!-- لودینگ و iframe -->
<div class="loading" id="loadingContainer">
<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>
<div class="iframe-container"><iframe id="myIframe"></iframe></div>
<!-- دکمه دانلود در پایین صفحه -->
<p><a href="#" class="download-button-bottom" id="downloadButtonBottom">دانلود تصویر 📥</a></p>
<p>
<script>
        const siteURL = 'https://kingnish-realtime-flux.hf.space/';
        let progress = 0;
        const progressBar = document.getElementById('progressBar');
        const retryButton = document.getElementById('retryButton');
        const errorMessage = document.getElementById('errorMessage');
        const loadingContainer = document.getElementById('loadingContainer');
        let interval;
        let iframeLoadedFlag = false;

        function startProgress() {
            loadingContainer.style.display = 'flex';
            progressBar.style.width = '0%';
            progress = 0;

            interval = setInterval(() => {
                if (progress < 100) {
                    progress += 10;
                    progressBar.style.width = progress + '%';
                }
                if (progress === 100) {
                    clearInterval(interval);
                    if (!iframeLoadedFlag) {
                        retryButton.style.display = 'block';
                        errorMessage.style.display = 'block';
                    }
                }
            }, 1000);
        }

        function iframeLoaded() {
            iframeLoadedFlag = true;
            clearInterval(interval);
            loadingContainer.style.display = 'none';
            document.getElementById('myIframe').style.display = 'block';
            replaceTextInIframe(); // فراخوانی تابع جایگزینی متن
        }

        function iframeError() {
            clearInterval(interval);
            retryButton.style.display = 'block';
            errorMessage.style.display = 'block';
        }

        retryButton.addEventListener('click', function() {
            progress = 0;
            progressBar.style.width = '0%';
            iframeLoadedFlag = false;
            retryButton.style.display = 'none';
            errorMessage.style.display = 'none';
            loadingContainer.style.display = 'flex';
            document.getElementById('myIframe').style.display = 'none';
            loadIframe();
            startProgress();
        });

        function loadIframe() {
            fetch(siteURL, { method: 'HEAD', mode: 'no-cors' })
                .then(() => {
                    const iframe = document.getElementById('myIframe');
                    iframe.src = siteURL;
                    iframe.onload = iframeLoaded;
                    iframe.onerror = iframeError;
                })
                .catch(() => {
                    iframeError();
                });
        }

        loadIframe();
        startProgress();

        function handleDownload() {
            const iframe = document.getElementById('myIframe');
            let iframeDocument;

            try {
                iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            } catch (error) {
                console.error("نمی‌توان به محتوای iframe دسترسی پیدا کرد: ", error);
                alert("عدم دسترسی به محتوای iframe به دلیل محدودیت‌های امنیتی.");
                return;
            }

            if (!iframeDocument) {
                alert("عدم دسترسی به محتوای iframe.");
                return;
            }

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

            let webpImages = [];
            images.forEach((img) => {
                if (img.src.endsWith('.webp')) {
                    webpImages.push(img.src);
                }
            });

            if (webpImages.length === 0) {
                alert("هیچ تصویر با فرمت WEBP برای دانلود یافت نشد.");
                return;
            }

            const numImages = webpImages.length;

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

        // افزودن رویداد برای هر دو دکمه دانلود
        document.getElementById('downloadButton').addEventListener('click', function(event) {
            event.preventDefault();
            handleDownload();
        });
        document.getElementById('downloadButtonBottom').addEventListener('click', function(event) {
            event.preventDefault();
            handleDownload();
        });

        // مدیریت پنجره توضیحات (Modal)
        const modal = document.getElementById('myModal');
        const cancelBtn = document.getElementById('cancelBtn');
        const confirmBtn = document.getElementById('confirmBtn');
        const descriptionButton = document.getElementById('descriptionButton');

        // نمایش پنجره سفارشی
        descriptionButton.addEventListener('click', function(event) {
            event.preventDefault();
            modal.style.display = 'block';
        });

        // دکمه لغو
        cancelBtn.addEventListener('click', function() {
            modal.style.display = 'none';
        });

        // دکمه مترجم
        confirmBtn.addEventListener('click', function() {
            modal.style.display = 'none';
            window.open('https://translate.google.com/?hl=fa&sl=fa&tl=en&op=translate', '_blank');
        });

        // بستن پنجره سفارشی در صورت کلیک خارج از آن
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        }

        // تابع جایگزینی و مخفی‌سازی متون در iframe
        function replaceTextInIframe() {
            const iframe = document.getElementById('myIframe');
            let iframeDocument;

            try {
                iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            } catch (error) {
                console.error("نمی‌توان به محتوای iframe دسترسی پیدا کرد: ", error);
                return;
            }

            if (!iframeDocument) {
                console.error("عدم دسترسی به محتوای iframe.");
                return;
            }

            // متون مورد نظر برای جایگزینی و مخفی‌سازی
            const textsToReplace = [
                { search: "Realtime FLUX Image Generator", replace: "نسخه حرفه‌ای ساخت تصاویر با هوش مصنوعی" },
                { search: "Generate stunning images in real-time with Modified Flux.Schnell pipeline.", replace: "پرامپت رو برای تولید تصاویر حرفه‌ای در این نسخه حتماً به زبان انگلیسی وارد کنید و یا از مترجم در قسمت توضیحات استفاده کنید." },
                { search: "Generate Image", replace: "ساخت تصویر" },
                { search: "Examples", replace: "نمونه ها" },
                { search: "Realtime Toggler", replace: "تغییر وضعیت آنی" },
                { search: "Enhance Image", replace: "افزایش کیفیت تصویر" }
            ];

            const textsToHide = [
                "Note: Sometimes it stucks or stops generating images (I don't know why). In that situation just refresh the site.",
                "Use via API",
                "Use via APIlogo ·",
                "built with gradio",
                "ساخته شده با gradio"
            ];

            // ایجاد یک TreeWalker برای پیمایش تمام نودهای متنی
            const walker = iframeDocument.createTreeWalker(
                iframeDocument.body,
                NodeFilter.SHOW_TEXT,
                null,
                false
            );

            let node;
            while (node = walker.nextNode()) {
                // جایگزینی متون
                textsToReplace.forEach(item => {
                    if (node.nodeValue.includes(item.search)) {
                        node.nodeValue = node.nodeValue.replace(item.search, item.replace);
                    }
                });

                // مخفی‌سازی متون
                textsToHide.forEach(text => {
                    if (node.nodeValue.includes(text)) {
                        const parentElement = node.parentElement;
                        if (parentElement) {
                            parentElement.style.display = 'none';
                        }
                    }
                });
            }

            // نظارت بر تغییرات آینده در DOM برای جایگزینی و مخفی‌سازی
            const observer = new MutationObserver(() => {
                replaceTextInIframeDynamic(textsToReplace, textsToHide, iframeDocument);
            });

            observer.observe(iframeDocument.body, {
                childList: true,
                subtree: true
            });
        }

        // تابع برای جایگزینی و مخفی‌سازی متون پس از تغییرات در DOM
        function replaceTextInIframeDynamic(replacements, hides, doc) {
            const walker = doc.createTreeWalker(
                doc.body,
                NodeFilter.SHOW_TEXT,
                null,
                false
            );

            let node;
            while (node = walker.nextNode()) {
                // جایگزینی متون
                replacements.forEach(item => {
                    if (node.nodeValue.includes(item.search)) {
                        node.nodeValue = node.nodeValue.replace(item.search, item.replace);
                    }
                });

                // مخفی‌سازی متون
                hides.forEach(text => {
                    if (node.nodeValue.includes(text)) {
                        const parentElement = node.parentElement;
                        if (parentElement) {
                            parentElement.style.display = 'none';
                        }
                    }
                });
            }
        }
    </script>
</p> کد بالا رو برام درست کن پرامپت ها با دکمه پی در کد پایین است ولی تو توی کد بالا هم برام درست کن <style>
        :root {
            --color-primary: #4CAF50;
            --color-secondary: rgb(84, 110, 122);
            --color-danger: #f44336;
            --color-white: #ffffff;
            --color-black: #000000;
            --color-gray: #f0f0f0;
            --color-light-gray: #ddd;
            --color-green: #4caf50;
            --color-hover: #d32f2f;
        }

        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: calc(var(--vh, 1vh) * 100);
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            text-align: center;
            direction: rtl;
        }

        .iframe-container {
            position: relative;
            width: 100%;
            height: calc(var(--vh, 1vh) * 100);
            overflow: hidden;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: none;
            position: relative;
        }

        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 10000;
        }

        .loading-message {
            margin-bottom: 20px;
            font-size: 18px;
        }

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

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

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

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

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

        /* دکمه‌ها */
        .button-container {
            position: fixed;
            top: 10px;
            left: 10px;
            display: flex;
            gap: 10px;
            z-index: 10001;
        }

        .download-button {
            position: fixed;
            top: 10px;
            right: 10px;
            color: white;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px 10px;
            font-size: 11px;
            background-color: #4CAF50;
            width: 130px;
        }

        .description-button, .prompt-button {
            color: white;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px 10px;
            font-size: 11px;
            background-color: rgb(84, 110, 122);
        }

        .description-button {
            width: 130px;
        }

        .prompt-button {
            width: 30px;
            font-size: 14px;
            padding: 4px;
        }

        .download-button:hover, .description-button:hover, .prompt-button:hover {
            filter: brightness(0.9);
        }

        /* مدال‌ها */
        .modal {
            display: none;
            position: fixed;
            z-index: 10002;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 20px;
            box-sizing: border-box;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #888;
            width: 90%;
            max-width: 800px;
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
            position: relative;
            max-height: 90vh;
            overflow-y: auto;
        }

        .modal-button {
            margin-top: 20px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

        .cancel-btn {
            background-color: #f44336;
            color: white;
        }

        .cancel-btn:hover {
            background-color: #d32f2f;
        }

        /* دکمه بستن بالای مودال */
        .close-top-btn {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: #f44336;
            color: #fff;
            border: none;
            font-size: 24px;
            cursor: pointer;
            font-weight: bold;
            line-height: 1;
            padding: 5px 10px;
            border-radius: 5px;
        }
        .close-top-btn:hover {
            background-color: #d32f2f;
        }

        /* استایل‌های دسته‌بندی پرامپت‌ها */
        .prompt-category {
            background: #ffffff;
            padding: 12px 20px;
            margin: 10px auto;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            width: 80%;
            max-width: 300px;
            border: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            position: relative;
        }

        .prompt-category:hover {
            background-color: #f9f9f9;
            transform: translateY(-2px);
        }

        .prompt-category .icon {
            margin-left: 8px;
            font-size: 20px;
            color: #3498db;
        }

        /* مودال لیست پرامپت‌ها */
        .prompt-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .prompt-item {
            background-color: #fff;
            padding: 8px 12px;
            margin: 5px 0;
            border-radius: 8px;
            transition: background-color 0.3s, box-shadow 0.3s;
            text-align: left;
            font-weight: bold;
            font-size: 14px;
            width: 100%;
            max-width: 400px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid #e0e0e0;
            position: relative;
        }

        .prompt-item:hover {
            background-color: #f0f0f0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .prompt-text-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: right;
        }

        .prompt-text {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px;
            cursor: pointer;
        }

        .persian-translation {
            font-size: 14px;
            color: #555;
        }

        .copy-icon {
            cursor: pointer;
            font-size: 20px;
            color: #555;
            transition: color 0.3s;
            margin-left: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .copy-icon:hover {
            color: #000;
        }

        /* دکمه کوچک‌تر برای پرامپت‌ها */
        .prompt-button-small {
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            font-size: 12px;
        }

        .prompt-button-small:hover {
            background-color: #2980b9;
            transform: scale(1.1);
        }

        /* دکمه‌های صفحه‌بندی */
        .pagination-button {
            margin: 5px 5px 0 5px;
            padding: 8px 16px;
            font-size: 14px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .pagination-button:hover {
            background-color: #45a049;
        }

        /* اطلاعات صفحه فعلی */
        .page-info {
            margin-top: 10px;
            font-size: 14px;
            color: #555;
        }

        /* تنظیم عرض مودال‌ها برای نمایش بهتر در صفحات کوچک */
        @media (max-width: 600px) {
            .modal-content {
                width: 95%;
            }

            .prompt-category {
                width: 95%;
            }

            .prompt-item {
                width: 95%;
            }

            .download-button {
                width: 100px;
                font-size: 11px;
                padding: 6px 10px;
            }

            .description-button {
                width: 100px;
            }

            .prompt-text {
                font-size: 14px;
            }

            .persian-translation {
                font-size: 12px;
            }

            .copy-icon {
                font-size: 18px;
            }

            .prompt-button-small {
                width: 20px;
                height: 20px;
                font-size: 10px;
            }

            .close-top-btn {
                font-size: 14px;
                padding: 5px 10px;
            }

            .pagination-button {
                width: 48%;
            }
        }
    </style>
<!-- دکمه‌ها -->
<div class="button-container"><a href="#" class="description-button" id="descriptionButton">توضیحات</a> <a href="#" class="prompt-button" id="promptButton">P</a></div>
<p><a href="#" class="download-button" id="downloadButton">دانلود تصویر 📥</a></p>
<!-- پنجره مودال برای تصاویر -->
<div id="myModal" class="modal">
<div class="modal-content"><button class="modal-button close-top-btn" id="closeModalTopBtn">&times;</button>
<p>تصاویر شناسایی شده</p>
<div class="image-container" id="imageContainer"></div>
<button class="modal-button cancel-btn" id="closeBtn">بستن</button></div>
</div>
<!-- پنجره مودال برای توضیحات -->
<div id="myDescriptionModal" class="modal">
<div class="modal-content"><button class="modal-button close-top-btn" id="closeDescriptionModalTopBtn">&times;</button>
<p>ربات هوشمند برنامه <span style="color: #008080;">هوش مصنوعی</span></p>
<p>با قابلیت ساخت تصاویر در لحظه</p>
<p>و گفتگو پیشرفته</p>
<p>ساخت تصاویر این ربات از متن فارسی پشتیبانی می&zwnj;کند و شما می&zwnj;توانید به فارسی هر تصویری که خواستید را تولید کنید.</p>
<p>برای ساخت تصاویر روی سه نقطه داخل صفحه بزنید و گزینه دوم را انتخاب کنید.</p>
<p>در بعضی مواقع اگر تصاویر پشت سر هم تولید نشد یک بار دکمه Clear را کلیک کنید یا از صفحه خارج شوید دوباره وارد شوید.</p>
<button class="modal-button cancel-btn" id="closeDescriptionBtn">بستن</button></div>
</div>
<!-- پنجره مودال برای پرامپت‌ها -->
<div id="myPromptModal" class="modal">
<div class="modal-content"><button class="modal-button close-top-btn" id="closePromptBtnTop">&times;</button>
<p>دسته&zwnj;بندی پرامپت&zwnj;ها</p>
<!-- دسته‌بندی‌های پرامپت -->
<div class="prompt-category" data-category="lighting">پرامپت&zwnj;های نورپردازی <span class="icon">💡</span></div>
<div class="prompt-category" data-category="special_lighting">پرامپت&zwnj;های خاص نورپردازی <span class="icon">✨</span></div>
<div class="prompt-category" data-category="details_quality">پرامپت&zwnj;های جزئیات و کیفیت <span class="icon">🔍</span></div>
<div class="prompt-category" data-category="punk">پرامپت&zwnj;های Punk <span class="icon">🎸</span></div>
<div class="prompt-category" data-category="landscape">پرامپت&zwnj;های منظره <span class="icon">🌄</span></div>
<div class="prompt-category" data-category="colors">پرامپت&zwnj;های رنگ <span class="icon">🎨</span></div>
<div class="prompt-category" data-category="artist_style">پرامپت&zwnj;های استایل هنرمندان <span class="icon">🖌️</span></div>
<div class="prompt-category" data-category="iranian_art_identity">پرامپت&zwnj;های هویت هنری ایرانی <span class="icon">🏺</span></div>
<div class="prompt-category" data-category="iranian_set_design">پرامپت&zwnj;های فضاسازی ایرانی <span class="icon">🏙️</span></div>
<button class="modal-button cancel-btn" id="closePromptBtn">بستن</button></div>
</div>
<!-- پنجره مودال برای لیست پرامپت‌ها -->
<div id="promptListModal" class="modal">
<div class="modal-content"><button class="modal-button close-top-btn" id="closePromptListBtnTop">&times;</button>
<p id="promptListTitle">پرامپت&zwnj;ها</p>
<div class="prompt-list" id="promptList"></div>
<div class="page-info" id="pageInfo" style="display: none;"></div>
<div><button class="pagination-button" id="prevPageBtn" style="display: none;">بازگشت به صفحه قبلی</button> <button class="pagination-button" id="nextPageBtn" style="display: none;">ادامه صفحه بعدی</button></div>
</div>
</div>
<!-- لودینگ و iframe -->
<div class="iframe-container">
<div class="loading" id="loadingContainer">
<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>
<!-- افزودن ویژگی‌های sandbox و allow به iframe --> <iframe id="myIframe" sandbox="allow-scripts allow-same-origin allow-forms allow-modals" allow="clipboard-read; clipboard-write"></iframe></div>
<p>
<script>
        // تنظیم ارتفاع متغیر CSS --vh برای سازگاری با موبایل
        function setVhVariable() {
            let vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', vh + 'px');
        }
        setVhVariable();
        window.addEventListener('resize', setVhVariable);

        const siteURL = 'https://cohereforai-aya-expanse.hf.space/';
        const excludeUrls = [
            'https://yanze-pulid.hf.space/--replicas/3t64n/file=/tmp/gradio/7567beceda2541f726af7beb4c9aa857b4a96b77/liuyifei.png',
            'https://yanze-pulid.hf.space/--replicas/3t64n/file=/tmp/gradio/7567beceda2541f726af7beb4c9aa857b4a96b77/liuyifei.png',
            'https://prodiazenafey-faceswap.hf.space/file=/tmp/gradio/44ce6237aa956835c13beb89ae4c83f8afea7edb/example3.jpg',
            'https://cohereforai-aya-expanse.hf.space/gradio_api/file=/tmp/gradio/195e9bc39ae67221fa523905a8a7f36b44bb03ebd3310192cf2ad0235b29fc1b/AyaExpanse.png'
        ];

        let progress = 0;
        const progressBar = document.getElementById('progressBar');
        const retryButton = document.getElementById('retryButton');
        const errorMessage = document.getElementById('errorMessage');
        const loadingContainer = document.getElementById('loadingContainer');
        const nextPageBtn = document.getElementById('nextPageBtn');
        const prevPageBtn = document.getElementById('prevPageBtn');
        const pageInfo = document.getElementById('pageInfo');

        let interval;
        let iframeLoadedFlag = false;

        function hideUnwantedElements() {
            const iframe = document.getElementById('myIframe');
            try {
                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

                if (!iframeDocument) return;

                // مخفی یا جایگزین کردن تصاویر مشخص‌شده
                const images = iframeDocument.querySelectorAll('img');
                images.forEach(img => {
                    if (img.src.endsWith('.png')) {
                        img.src = 'https://app.puzzley.net/uploads/user/Jydo/هوش%20مصنوعی/Negar_1731256487636.png';
                    }
                });

                // مخفی کردن لینک‌های مشخص‌شده
                const linksToHide = [
                    'https://docs.cohere.com/docs/c4ai-acceptable-use-policy',
                    'https://gradio.app/',
                    'https://huggingface.co/openai/whisper-large-v3-turbo',
                    'https://groq.com/',
                    'http://neets.ai/',
                    'https://huggingface.co/black-forest-labs/FLUX.1-schnell'
                ];

                const links = iframeDocument.querySelectorAll('a');
                links.forEach(link => {
                    if (
                        linksToHide.includes(link.href) ||
                        link.textContent.trim().includes("C4AI's Acceptable Use Policy")
                    ) {
                        link.style.display = 'none';
                    }
                });

                // مخفی یا جایگزین کردن متون مشخص‌شده
                const unwantedTexts = [
                    "C4AI Aya Expanse is a state-of-art model with highly advanced capabilities to connect the world across languages.",
                    "You can use this space to chat, speak and visualize with Aya Expanse in 23 languages.",
                    "Made with gradio",
                    "Whisper large-v3-turbo",
                    "Groq",
                    "neets.ai",
                    "Flux Schnell",
                    "This space uses Aya Expanse for translating multilingual prompts and generating detailed image descriptions and Flux Schnell for Image Generation.",
                    "To enable voice interaction with Aya Expanse, this space uses Whisper large-v3-turbo and Groq for STT and neets.ai for TTS."
                ];

                const textsToReplace = {
                    "Aya Expanse": "هوش مصنوعی",
                    "Chat with Aya": "چت بات هوشمند",
                    "Speak with Aya": "تعامل صوتی(بزودی)",
                    "Visualize with Aya": "ساخت تصاویر با هوش مصنوعی",
                    "Aya": "هوش مصنوعی"
                };

                unwantedTexts.forEach(unwanted => {
                    const textNodes = getTextNodesContaining(iframeDocument.body, unwanted);
                    textNodes.forEach(node => {
                        const parentElement = node.parentElement;
                        if (parentElement) {
                            parentElement.style.display = 'none';
                        }
                    });
                });

                Object.keys(textsToReplace).forEach(originalText => {
                    const newText = textsToReplace[originalText];
                    const textNodes = getTextNodesContaining(iframeDocument.body, originalText);
                    textNodes.forEach(node => {
                        node.textContent = node.textContent.replace(new RegExp(escapeRegExp(originalText), 'g'), newText);
                    });
                });

            } catch (error) {
                console.error("نمی‌توان به محتوای iframe دسترسی پیدا کرد: ", error);
            }
        }

        function getTextNodesContaining(node, text) {
            let textNodes = [];
            if (node.nodeType === Node.TEXT_NODE && node.nodeValue.includes(text)) {
                textNodes.push(node);
            } else {
                node.childNodes.forEach(child => {
                    textNodes = textNodes.concat(getTextNodesContaining(child, text));
                });
            }
            return textNodes;
        }

        function escapeRegExp(string) {
            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        }

        function startProgress() {
            loadingContainer.style.display = 'flex';
            progressBar.style.width = '0%';
            progress = 0;

            interval = setInterval(() => {
                if (progress < 100) {
                    progress += 10;
                    progressBar.style.width = progress + '%';
                }
                if (progress === 100) {
                    clearInterval(interval);
                    if (!iframeLoadedFlag) {
                        retryButton.style.display = 'block';
                        errorMessage.style.display = 'block';
                    }
                }
            }, 1000);
        }

        function iframeLoaded() {
            iframeLoadedFlag = true;
            clearInterval(interval);
            loadingContainer.style.display = 'none';
            document.getElementById('myIframe').style.display = 'block';
            hideUnwantedElements();
            setupElementHiding();
        }

        function iframeError() {
            clearInterval(interval);
            loadingContainer.style.display = 'flex';
            retryButton.style.display = 'block';
            errorMessage.style.display = 'block';
        }

        function setupElementHiding() {
            const iframe = document.getElementById('myIframe');
            try {
                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

                if (!iframeDocument) return;

                hideUnwantedElements();

                const observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.addedNodes.length) {
                            hideUnwantedElements();
                        }
                    });
                });

                observer.observe(iframeDocument.body, {
                    childList: true,
                    subtree: true
                });
            } catch (error) {
                console.error("نمی‌توان به محتوای iframe دسترسی پیدا کرد: ", error);
            }
        }

        retryButton.addEventListener('click', function() {
            progress = 0;
            progressBar.style.width = '0%';
            iframeLoadedFlag = false;
            retryButton.style.display = 'none';
            errorMessage.style.display = 'none';
            loadingContainer.style.display = 'flex';
            document.getElementById('myIframe').style.display = 'none';
            loadIframe();
            startProgress();
        });

        function loadIframe() {
            fetch(siteURL, { method: 'HEAD', mode: 'no-cors' })
                .then(() => {
                    const iframe = document.getElementById('myIframe');
                    iframe.src = siteURL;
                    iframe.onload = iframeLoaded;
                    iframe.onerror = iframeError;
                })
                .catch(() => {
                    iframeError();
                });
        }

        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("هیچ تصویری با فرمت WEBP برای دانلود یافت نشد.");
                    return;
                }

                let webpImages = [];
                images.forEach((img) => {
                    if (img.src.endsWith('.webp') && !excludeUrls.includes(img.src)) {
                        webpImages.push(img.src);
                    }
                });

                webpImages = webpImages.slice(0, 4);

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

                const imageContainer = document.getElementById('imageContainer');
                imageContainer.innerHTML = '';

                webpImages.forEach((imageUrl, index) => {
                    const imageItem = document.createElement('div');
                    imageItem.classList.add('image-item');
                    imageItem.style.marginBottom = '10px';
                    imageItem.innerHTML = `
                        <img src="${imageUrl}" alt="Image ${index + 1}" style="max-width: 100%; border-radius: 5px;">
                        <button onclick="downloadImage('${imageUrl}')" style="margin-top: 5px; padding: 5px 10px; border: none; border-radius: 5px; background-color: #4CAF50; color: white; cursor: pointer;">دانلود</button>
                    `;
                    imageContainer.appendChild(imageItem);
                });

                document.getElementById('myModal').style.display = 'block';

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

        function downloadImage(imageUrl) {
            if (confirm("برای دانلود تصویر روی تایید کلیک کنید و بعد از باز شدن مرورگر روی تصویر محکم نگهدارید و بارگیری تصویر را کلیک کنید.")) {
                window.open(imageUrl, '_blank');
            }
        }

        document.getElementById('downloadButton').addEventListener('click', handleDownload);

        // بستن مودال تصاویر
        const modal = document.getElementById('myModal');
        const closeBtn = document.getElementById('closeBtn');
        const closeModalTopBtn = document.getElementById('closeModalTopBtn');

        closeBtn.addEventListener('click', function() {
            modal.style.display = 'none';
        });

        closeModalTopBtn.addEventListener('click', function() {
            modal.style.display = 'none';
        });

        window.addEventListener('click', function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
            if (event.target == descriptionModal) {
                descriptionModal.style.display = 'none';
            }
            if (event.target == promptModal) {
                promptModal.style.display = 'none';
            }
            if (event.target == promptListModal) {
                promptListModal.style.display = 'none';
            }
        });

        // پنجره مودال توضیحات
        const descriptionModal = document.getElementById('myDescriptionModal');
        const descriptionButton = document.getElementById('descriptionButton');
        const closeDescriptionBtn = document.getElementById('closeDescriptionBtn');
        const closeDescriptionModalTopBtn = document.getElementById('closeDescriptionModalTopBtn');

        descriptionButton.addEventListener('click', function(event) {
            event.preventDefault();
            descriptionModal.style.display = 'block';
        });

        closeDescriptionBtn.addEventListener('click', function() {
            descriptionModal.style.display = 'none';
        });

        closeDescriptionModalTopBtn.addEventListener('click', function() {
            descriptionModal.style.display = 'none';
        });

        // پنجره مودال پرامپت‌ها
        const promptModal = document.getElementById('myPromptModal');
        const promptButton = document.getElementById('promptButton');
        const closePromptBtn = document.getElementById('closePromptBtn');
        const closePromptBtnTop = document.getElementById('closePromptBtnTop');

        promptButton.addEventListener('click', function(event) {
            event.preventDefault();
            promptModal.style.display = 'block';
        });

        closePromptBtn.addEventListener('click', function() {
            promptModal.style.display = 'none';
        });

        closePromptBtnTop.addEventListener('click', function() {
            promptModal.style.display = 'none';
        });

        // پنجره لیست پرامپت‌ها
        const promptListModal = document.getElementById('promptListModal');
        const promptList = document.getElementById('promptList');
        const promptListTitle = document.getElementById('promptListTitle');
        const nextPageButton = document.getElementById('nextPageBtn');
        const prevPageButton = document.getElementById('prevPageBtn');
        const pageInfoElement = document.getElementById('pageInfo');

        const promptsData = {
            "lighting": [
                { "text": "Cinematic lighting", "translation": "نورپردازی سینمایی" },
                { "text": "Soft lighting", "translation": "نورپردازی نرم" },
                { "text": "Softbox lighting", "translation": "نورپردازی با سافت‌باکس" },
                { "text": "Bright lighting", "translation": "نورپردازی روشن" },
                { "text": "Ambient lighting", "translation": "نورپردازی محیطی" },
                { "text": "Silhouetted", "translation": "سایه‌دار" },
                { "text": "Flat lighting", "translation": "نورپردازی تخت" },
                { "text": "Backlit Volumetric lighting", "translation": "نورپردازی حجمی پس‌زمینه" }
            ],
            "special_lighting": [
                { "text": "Neon", "translation": "نئون" },
                { "text": "Holographic", "translation": "هولوگرافیک" },
                { "text": "Glow", "translation": "تابان" },
                { "text": "Bioluminescent", "translation": "زیست‌تاب" },
                { "text": "Rimlight", "translation": "نور حاشیه‌ای" },
                { "text": "Silhouetted", "translation": "سایه‌دار" }
            ],
            "details_quality": [
                { "text": "Ultra photoreal", "translation": "فوق‌العاده واقع‌گرایانه" },
                { "text": "Intricate details", "translation": "جزئیات پیچیده" },
                { "text": "Photorealistic", "translation": "فوتورئالیستی" },
                { "text": "Hyper detailed", "translation": "بسیار جزئیات‌دار" },
                { "text": "Ultra detailed", "translation": "فوق‌العاده جزئیات‌دار" },
                { "text": "Extremely detailed", "translation": "بسیار پرجزئیات" },
                { "text": "4K", "translation": "4K" },
                { "text": "8K", "translation": "8K" },
                { "text": "Super resolution", "translation": "وضوح فوق‌العاده" },
                { "text": "High resolution", "translation": "وضوح بالا" }
            ],
            "punk": [
                { "text": "Steampunk", "translation": "استیم‌پانک" },
                { "text": "Cloudpunk", "translation": "کلودپانک" },
                { "text": "Cyberpunk", "translation": "سایبرپانک" },
                { "text": "Forestpunk", "translation": "فورست‌پانک" },
                { "text": "Decopunk", "translation": "دکوپانک" },
                { "text": "Atompunk", "translation": "اتم‌پانک" },
                { "text": "Dieselpunk", "translation": "دیزل‌پانک" },
                { "text": "Biopunk", "translation": "بیوپانک" },
                { "text": "Dinopunk", "translation": "دینوپانک" },
                { "text": "Cassettepunk", "translation": "کاست‌پانک" },
                { "text": "Dollupunk", "translation": "دالاپانک" },
                { "text": "Catholicpunk", "translation": "کاتولیک‌پانک" },
                { "text": "Clockpunk", "translation": "کلاک‌پانک" }
            ],
            "landscape": [
                { "text": "Surreal landscape", "translation": "منظره سورئال" },
                { "text": "Unreal landscape", "translation": "منظره غیرواقعی" },
                { "text": "Fantasy landscape", "translation": "منظره فانتزی" },
                { "text": "Sci-fi landscape", "translation": "منظره علمی-تخیلی" },
                { "text": "Desert landscape", "translation": "منظره بیابانی" },
                { "text": "Tropical paradise", "translation": "بهشت گرمسیری" },
                { "text": "Rainforest scenery", "translation": "منظره جنگل بارانی" },
                { "text": "Expansive mountain range", "translation": "زنجیره کوهستانی گسترده" }
            ],
            "colors": [
                { "text": "Retro colors", "translation": "رنگ‌های رترو" },
                { "text": "Vivid colors", "translation": "رنگ‌های زنده" },
                { "text": "Pastel colors", "translation": "رنگ‌های پاستلی" },
                { "text": "Neon colors", "translation": "رنگ‌های نئونی" },
                { "text": "Earthy tones", "translation": "رنگ‌های خاکی" },
                { "text": "Primary colors", "translation": "رنگ‌های اصلی" },
                { "text": "Monochromatic colors", "translation": "رنگ‌های تک‌رنگ" },
                { "text": "Jewel tones", "translation": "رنگ‌های جواهری" }
            ],
            "artist_style": [
                { "text": "Leonardo da Vinci", "translation": "لئوناردو داوینچی" },
                { "text": "Michelangelo", "translation": "میکل‌آنجلو" },
                { "text": "Rembrandt", "translation": "رمبراندت" },
                { "text": "Vermeer", "translation": "ورمیر" },
                { "text": "Jean-Antoine Watteau", "translation": "ژان-آنتوان واتو" },
                { "text": "Eugene Delacroix", "translation": "اوژن دلاکروا" },
                { "text": "Claude Monet", "translation": "کلود مونه" },
                { "text": "Georges Seurat", "translation": "ژرژ سورا" },
                { "text": "Vincent van Gogh", "translation": "ونسان ون گوگ" },
                { "text": "Edvard Munch", "translation": "ادوارد مونک" },
                { "text": "Gustav Klimt", "translation": "گوستاو کلیمت" },
                { "text": "Pablo Picasso", "translation": "پابلو پیکاسو" },
                { "text": "Henri Matisse", "translation": "هانری ماتیس" },
                { "text": "Rene Magritte", "translation": "رنه ماگریت" },
                { "text": "Georgia O'Keeffe", "translation": "جورجیا اوکیف" },
                { "text": "Salvador Dalí", "translation": "سالوادور دالی" },
                { "text": "Edward Hopper", "translation": "ادوارد هاپر" },
                { "text": "Frida Kahlo", "translation": "فریدا کالو" },
                { "text": "Jackson Pollock", "translation": "جکسون پولاک" },
                { "text": "Andy Warhol", "translation": "اندی وارهول" }
            ],
            "iranian_art_identity": [
                { "text": "Persian Carpet Weaving", "translation": "قالی‌بافی ایرانی" },
                { "text": "Persian Tilework", "translation": "کاشی‌کاری ایرانی" },
                { "text": "Persian Miniature Painting", "translation": "نگارگری ایرانی" },
                { "text": "Persian Calligraphy", "translation": "خوشنویسی ایرانی" },
                { "text": "Traditional Textiles", "translation": "منسوجات سنتی" },
                { "text": "Woodcarving", "translation": "منبت‌کاری" },
                { "text": "Persian Embroidery", "translation": "گلدوزی ایرانی" },
                { "text": "Persian Mirrorwork", "translation": "آینه‌کاری ایرانی" },
                { "text": "Termeh Weaving", "translation": "بافت ترمه" },
                { "text": "Persian Jewelry", "translation": "جواهرسازی ایرانی" }
            ],
            "iranian_set_design": [
                { "text": "Tehran clothe", "translation": "لباس تهرانی" },
                { "text": "Tehran woman", "translation": "زن تهرانی" },
                { "text": "Tehran man", "translation": "مرد تهرانی" },
                { "text": "Modern Persian vibe", "translation": "حس و حال مدرن پارسی" },
                { "text": "Persian art", "translation": "هنر پارسی" },
                { "text": "Tehran atmosphere", "translation": "فضای تهران" },
                { "text": "Esfahan vibe", "translation": "حس و حال اصفهان" },
                { "text": "Qajar art", "translation": "هنر قاجار" },
                { "text": "Princess Qajar", "translation": "شاهزاده قاجار" },
                { "text": "Persian empire", "translation": "امپراتوری پارس" }
            ]
        };

        let currentCategory = '';
        let currentPage = 1;
        const pageSize = 5;

        // باز کردن لیست پرامپت بر اساس دسته‌بندی با صفحه‌بندی
        document.querySelectorAll('.prompt-category').forEach(category => {
            category.addEventListener('click', function() {
                currentCategory = this.getAttribute('data-category');
                const prompts = promptsData[currentCategory];
                if (prompts) {
                    currentPage = 1;
                    renderPrompts(prompts, currentPage, pageSize);
                    promptListTitle.innerText = this.innerText;
                    promptModal.style.display = 'none';
                    promptListModal.style.display = 'block';
                }
            });
        });

        // تعریف یک تابع برای رندر کردن پرامپت‌ها با صفحه‌بندی
        function renderPrompts(prompts, page, size) {
            promptList.innerHTML = '';
            const start = (page - 1) * size;
            const end = start + size;
            const paginatedPrompts = prompts.slice(start, end);

            paginatedPrompts.forEach(prompt => {
                const promptElement = document.createElement('div');
                promptElement.classList.add('prompt-item');
                promptElement.innerHTML = `
                    <div class="prompt-text-container">
                        <div class="prompt-text">${prompt.text}</div>
                        <div class="persian-translation">${prompt.translation}</div>
                    </div>
                    <div class="copy-icon" title="کپی">
                        <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" fill="#555">
                            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2z"/>
                            <path d="M10 12h4v4h-4z"/>
                        </svg>
                    </div>
                `;
                // اضافه کردن قابلیت کپی کردن با کلیک بر روی متن
                promptElement.querySelector('.prompt-text').addEventListener('click', function() {
                    copyText(prompt.text);
                });
                // اضافه کردن قابلیت کپی کردن با کلیک بر روی آیکون
                promptElement.querySelector('.copy-icon').addEventListener('click', function() {
                    copyText(prompt.text);
                });
                promptList.appendChild(promptElement);
            });

            // محاسبه تعداد کل صفحات
            const totalPages = Math.ceil(prompts.length / size);

            // نمایش اطلاعات صفحه
            if (totalPages > 1) {
                pageInfo.style.display = 'block';
                pageInfo.innerText = `صفحه ${page} از ${totalPages}`;
            } else {
                pageInfo.style.display = 'none';
            }

            // مدیریت نمایش دکمه‌های صفحه‌بندی
            if (page > 1) {
                prevPageButton.style.display = 'inline-block';
            } else {
                prevPageButton.style.display = 'none';
            }

            if (page < totalPages) {
                nextPageButton.style.display = 'inline-block';
            } else {
                nextPageButton.style.display = 'none';
            }
        }

        // تعریف یک گوش‌دهنده رویداد برای دکمه "ادامه صفحه بعدی"
        nextPageBtn.addEventListener('click', function() {
            const prompts = promptsData[currentCategory];
            const totalPages = Math.ceil(prompts.length / pageSize);
            if (currentPage < totalPages) {
                currentPage++;
                renderPrompts(prompts, currentPage, pageSize);
            }
        });

        // تعریف یک گوش‌دهنده رویداد برای دکمه "بازگشت به صفحه قبلی"
        prevPageBtn.addEventListener('click', function() {
            if (currentPage > 1) {
                currentPage--;
                const prompts = promptsData[currentCategory];
                renderPrompts(prompts, currentPage, pageSize);
            }
        });

        // تابع کپی کردن متن
        function copyText(text) {
            navigator.clipboard.writeText(text).then(() => {
                alert("متن با موفقیت کپی شد: " + text);
            }).catch(err => {
                console.error("خطا در کپی کردن متن: ", err);
                alert("خطایی در کپی کردن متن رخ داد.");
            });
        }

        // بستن مودال لیست پرامپت‌ها از طریق کلیک خارج از مودال
        document.getElementById('closePromptListBtnTop').addEventListener('click', function() {
            promptListModal.style.display = 'none';
        });

        // بستن مودال‌ها با کلیک خارج از آنها
        window.addEventListener('click', function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
            if (event.target == descriptionModal) {
                descriptionModal.style.display = 'none';
            }
            if (event.target == promptModal) {
                promptModal.style.display = 'none';
            }
            if (event.target == promptListModal) {
                promptListModal.style.display = 'none';
            }
        });

        loadIframe();
        startProgress();
    </script>
</p>