در این کد پرامپت هارو برام درست نمایش نمی‌ده کلیک میکنم <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>هوش مصنوعی Flux از متن فارسی پشتیبانی نمی&zwnj; کند.</p>
<p>پرامپت یا همون متنی که وارد می&zwnj;کنید به زبان انگلیسی وارد کنید.</p>
<p>برای استفاده از مترجم گوگل، روی 'مترجم' کلیک کنید.</p>
<button class="modal-button cancel-btn" id="cancelBtn">لغو</button> <button class="modal-button download-btn" id="confirmBtn">مترجم</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"></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://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(); // فراخوانی تابع جایگزینی متن
        hideUnwantedElements(); // مخفی کردن عناصر ناخواسته
    }

    function iframeError() {
        clearInterval(interval);
        loadingContainer.style.display = 'flex';
        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();
            });
    }

    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')) {
                    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');
                });
            }
        } catch (error) {
            console.error("خطا در شناسایی تصاویر: ", error);
            alert("خطایی در شناسایی تصاویر رخ داد.");
        }
    }

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

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

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

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

    confirmBtn.addEventListener('click', function() {
        descriptionModal.style.display = 'none';
        window.open('https://translate.google.com/?hl=fa&sl=fa&tl=en&op=translate', '_blank');
    });

    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 nextPageBtn = document.getElementById('nextPageBtn');
    const prevPageBtn = document.getElementById('prevPageBtn');
    const pageInfo = document.getElementById('pageInfo');

    const promptsData = {
        // ... (داده‌های پرامپت‌ها را اینجا قرار دهید، همانطور که در کد دوم بود)
    };

    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) {
            prevPageBtn.style.display = 'inline-block';
        } else {
            prevPageBtn.style.display = 'none';
        }

        if (page < totalPages) {
            nextPageBtn.style.display = 'inline-block';
        } else {
            nextPageBtn.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 == descriptionModal) {
            descriptionModal.style.display = 'none';
        }
        if (event.target == promptModal) {
            promptModal.style.display = 'none';
        }
        if (event.target == promptListModal) {
            promptListModal.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';
                    }
                }
            });
        }
    }

    // تابع مخفی کردن عناصر ناخواسته
    function hideUnwantedElements() {
        const iframe = document.getElementById('myIframe');
        try {
            const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

            if (!iframeDocument) return;

            // مخفی کردن لینک‌های مشخص‌شده
            const linksToHide = [
                'https://gradio.app/',
                'https://huggingface.co/black-forest-labs/FLUX.1-schnell'
            ];

            const links = iframeDocument.querySelectorAll('a');
            links.forEach(link => {
                if (linksToHide.includes(link.href)) {
                    link.style.display = 'none';
                }
            });

            // مخفی یا جایگزین کردن متون مشخص‌شده
            const unwantedTexts = [
                "Made with gradio",
                "Flux Schnell"
            ];

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

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

    loadIframe();
    startProgress();
</script>
</p> باید مثل کد پایین کد بالا هم درست نمایش بده <p>&nbsp;</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>
<!-- پیغام موقت -->
<div id="temporaryMessage" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0,0,0,0.8); color: #fff; padding: 20px; border-radius: 10px; text-align: center; z-index: 100000;">لطفاً صبر کنید تا ربات باز بشه. در صورت باز شدن، صفحه به مشکی تغییر می&zwnj;کنه.</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();

            // نمایش پیغام موقت
            const temporaryMessage = document.getElementById('temporaryMessage');
            temporaryMessage.style.display = 'block';

            // مخفی کردن پیغام پس از 3 ثانیه
            setTimeout(function() {
                temporaryMessage.style.display = 'none';
            }, 3000);
        }

        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>