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

        /* کانتینر iframe */
        .iframe-container {
            position: relative;
            width: 100%;
            height: calc(var(--vh, 1vh) * 100); /* استفاده از متغیر CSS */
            overflow: hidden;
        }

        /* استایل‌های iframe */
        iframe {
            width: 100%;
            height: 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;
            background-color: transparent; /* حذف پس‌زمینه */
            padding: 20px;
            border-radius: 10px;
        }

        .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: 120px;
            color: white;
            text-align: center;
            padding: 8px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
            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: 10% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 90%;
            max-width: 500px;
            text-align: center;
            border-radius: 5px;
        }

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

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

        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 20px;
        }

        .image-item {
            margin: 10px;
            text-align: center;
        }

        .image-item img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 5px;
        }

        .image-item button {
            background-color: #4CAF50;
            color: white;
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
        }

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

        /* دکمه دانلود در پایین صفحه */
        .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;
        }

        /* استایل دکمه اسکرول */
        .scroll-handle {
            position: fixed;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 9999;
            width: 45px;
            height: 90px;
            border-radius: 20px;
            background-color: #ffffff;
            box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
            display: none; /* مخفی تا زمانی که iframe بارگذاری شود */
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .scroll-handle .up, .scroll-handle .down {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            cursor: pointer;
        }

        .scroll-handle .up {
            border-bottom: 15px solid #333;
            margin-bottom: 10px;
        }

        .scroll-handle .down {
            border-top: 15px solid #333;
            margin-top: 10px;
        }
    </style>
<!-- دکمه‌های دانلود و توضیحات -->
<p><a href="#" class="download-button" id="downloadButton">دانلود تصویر 📥</a> <a href="#" class="description-button" id="descriptionButton">توضیحات</a></p>
<!-- پنجره سفارشی (modal) برای نمایش تصاویر دانلود -->
<div id="downloadModal" class="modal">
<div class="modal-content">
<p style="text-align: center;">تصاویر شناسایی شده (PNG)</p>
<div class="image-container" id="imageContainer"></div>
<button class="modal-button close-btn" id="closeDownloadModalBtn">بستن</button></div>
</div>
<!-- پنجره سفارشی (modal) برای نمایش توضیحات -->
<div id="myModal" class="modal">
<div class="modal-content">
<p style="text-align: center;">ساخت Qr code با نرم افزار<span style="color: #008000;"> هوش مصنوعی&nbsp;</span></p>
<p style="text-align: center;"><span style="color: #0000ff;">نسخه پیشرفته&nbsp;</span></p>
<div>
<div>
<div></div>
</div>
</div>
<div>
<div>
<div>
<p>ما از تصویر کد QR به عنوان تصویر اولیه و تصویر کنترلی استفاده می&zwnj;کنیم تا کدهای QR تولید کنیم که طبیعی و هماهنگ با درخواست شما باشند.</p>
<h3>مراحل:</h3>
<ol>
<li>
<p>تنظیم قدرت (Strength):</p>
<ul>
<li>مقدار قدرت را بین 0.8 تا 0.95 تنظیم کنید. این تنظیم مشخص می&zwnj;کند چقدر نویز به کد QR اضافه می&zwnj;شود.</li>
</ul>
</li>
<li>
<p>مقیاس شرایطی (Conditioning Scale):</p>
<ul>
<li>مقیاس شرایطی را بین 0.6 تا 2.0 انتخاب کنید. این تنظیم می&zwnj;تواند تأثیر نهایی روی تصویر برنامه&zwnj;ریزی&zwnj;شده را کنترل کند.</li>
</ul>
</li>
<li>
<p>تنظیمات بیشتر:</p>
<ul>
<li>اگر تصویر تولید شده بیش از حد شبیه کد QR اصلی است:
<ul style="list-style-type: circle;">
<li>به آرامی مقدار قدرت را افزایش دهید.</li>
<li>مقیاس شرایطی را کاهش دهید.</li>
</ul>
</li>
</ul>
</li>
</ol>
<p>این تنظیمات به شما کمک می&zwnj;کند تا زیباترین تصاویر کد QR را ایجاد کنید.</p>
</div>
</div>
</div>
<p style="text-align: center;"><button class="modal-button close-btn" id="closeBtn">بستن</button></p>
</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">بارگیری زیاد طول کشید. در صورت عدم بارگذاری، فیلترشکن خود را روشن کنید.</div>
<button id="retryButton">بارگذاری مجدد</button></div>
<iframe id="myIframe" sandbox="allow-scripts allow-same-origin allow-forms allow-modals" allow="clipboard-read; clipboard-write"></iframe></div>
<!-- دکمه دانلود تصویر در پایین صفحه -->
<p><a href="#" class="download-button-bottom" id="downloadButtonBottom">دانلود تصویر 📥</a></p>
<!-- دکمه‌های اسکرول -->
<div class="scroll-handle" id="scrollHandle">
<div class="up"></div>
<div class="down"></div>
</div>
<p>
<script>
        /* تنظیم ارتفاع ویوپورت برای حل مشکل کیبورد در موبایل */
        function setViewportHeight() {
            let vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
        }

        // اولین فراخوانی
        setViewportHeight();

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

        /* بقیه کدهای جاوااسکریپت شما بدون تغییر */
        const siteURL = 'https://huggingface-projects-qr-code-ai-art-generator.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');
        const scrollHandle = document.getElementById('scrollHandle');
        let interval;
        let iframeLoadedFlag = false;
        let observer;

        /* متون و ترجمه‌های مشخص‌شده */
        const replacements = {
            'QR Code AI Art Generator': 'با هوش مصنوعی Qr code',
            'How to generate beautiful QR codes': 'چگونه کیو آر کد زیبا تولید کنیم؟',
            'Prompt': 'متن ورودی  برای ساخت تصویر انگلیسی وارد کنید',
            'for no queue on your own hardware.': 'نسخه پیشرفته ساخت کیو آر کد با نرم افزار هوش مصنوعی',
            'QR Code Content or URL': 'آدرس اینترنتی و یا متن تو اینجا وارد کن برای ساخت کیو آرکد',
            'Submit': 'شروع ساخت',
            'On mobile, the connection can break if this tab is unfocused or the device sleeps, losing your position in queue': 'اجرای دستور کاربر برای ساخت کیو آر کد با نرم افزار هوش مصنوعی',
            'Use QR code as init image': 'از کد کیو آر به عنوان تصویر اولیه استفاده کنید',
            'QR Code Image (Optional)': 'تصویر کیو آر کد اختیاری',
            'Negative': 'متن های که روی تصویر اعمال نمیشه'
        };

        /* لیست متون ناخواسته */
        const unwantedTexts = [
            'Use via API',
            'https://huggingface.co/',
            'Examples',
            'QR Code Content',
            'https://huggingface.co/DionTimmer/controlnet_qrcode-control_v1p_sd15',
            'استفاده از API',
            'Use via APIlogo ·',
            'ساخته شده با Gradio'
        ];

        /* لینک‌هایی که باید مخفی شوند */
        const linksToHide = [
            'https://gradio.app/',
            'https://huggingface.co/spaces/fffiloni/PASD?duplicate=true',
            'https://github.com/yangxy/PASD',
            'https://huggingface.co/papers/2308.14469',
            'https://huggingface.co/',
            'https://huggingface.co/spaces/huggingface-projects/QR-code-AI-art-generator?duplicate=true'
        ];

        /* شروع نوار پیشرفت */
        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);
        }

        /* عملیات پس از بارگذاری iframe */
        function iframeLoaded() {
            iframeLoadedFlag = true;
            clearInterval(interval);
            loadingContainer.style.display = 'none';
            document.getElementById('myIframe').style.display = 'block';
            scrollHandle.style.display = 'flex';

            modifyIframeContent();
            setupMutationObserver();
        }

        /* عملیات در صورت خطا در بارگذاری iframe */
        function iframeError() {
            clearInterval(interval);
            loadingContainer.style.display = 'flex';
            retryButton.style.display = 'block';
            errorMessage.style.display = 'block';
        }

        /* بارگذاری iframe */
        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();
                });
        }

        /* مدیریت دوباره تلاش برای بارگذاری */
        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();
        });

        /* دکمه‌های اسکرول */
        scrollHandle.addEventListener('click', (event) => {
            const iframe = document.getElementById('myIframe');
            if (event.target.classList.contains('up')) {
                iframe.contentWindow.scrollBy(0, -100);
            } else if (event.target.classList.contains('down')) {
                iframe.contentWindow.scrollBy(0, 100);
            }
        });

        /* تغییرات در محتوای iframe */
        function modifyIframeContent() {
            const iframe = document.getElementById('myIframe');
            try {
                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

                if (!iframeDocument) return;

                // مخفی کردن لینک‌های ناخواسته
                const links = iframeDocument.querySelectorAll('a');
                links.forEach(link => {
                    if (linksToHide.includes(link.href)) {
                        link.style.display = 'none';
                    }
                });

                // جایگزینی متون مشخص‌شده
                Object.keys(replacements).forEach(originalText => {
                    const replacementText = replacements[originalText];
                    const textNodes = getTextNodesContaining(iframeDocument.body, originalText);
                    textNodes.forEach(node => {
                        node.textContent = node.textContent.replace(originalText, replacementText);
                    });
                });

                // مخفی کردن متون مشخص‌شده
                unwantedTexts.forEach(unwanted => {
                    const elements = iframeDocument.querySelectorAll('*');
                    elements.forEach(element => {
                        if (element.textContent.trim() === unwanted) {
                            element.style.display = 'none';
                        }
                    });
                });

                // تغییر متن دکمه‌های "Run" به "شروع ساخت"
                const runButtons = iframeDocument.querySelectorAll('button, input[type="button"], input[type="submit"]');
                runButtons.forEach(element => {
                    if (element.textContent.trim() === 'Run' || element.value === 'Run') {
                        element.textContent = 'شروع ساخت';
                        element.value = 'شروع ساخت';
                    }
                });

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

        /* تنظیم ناظر تغییرات در محتوای iframe */
        function setupMutationObserver() {
            const iframe = document.getElementById('myIframe');
            try {
                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

                if (!iframeDocument) return;

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

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

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

        /* مدیریت دانلود تصاویر PNG */
        function handleDownload(event) {
            event.preventDefault();
            try {
                const iframeDocument = document.getElementById('myIframe').contentDocument || document.getElementById('myIframe').contentWindow.document;
                const images = iframeDocument.querySelectorAll('img');
                if (images.length === 0) {
                    alert("هیچ تصویری برای دانلود یافت نشد.");
                    return;
                }

                let pngImages = [];
                images.forEach((img) => {
                    // بررسی فرمت PNG و عدم شامل بودن داده‌های درون‌خطی
                    if (img.src.toLowerCase().endsWith('.png') && !img.src.includes('data:image')) {
                        pngImages.push(img.src);
                    }
                });

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

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

                pngImages.slice(0, 4).forEach((imageUrl, index) => { // محدود به 4 تصویر اول
                    const imageItem = document.createElement('div');
                    imageItem.classList.add('image-item');
                    imageItem.innerHTML = `
                        <img src="${imageUrl}" alt="Image ${index + 1}">
                        <button onclick="downloadImage('${imageUrl}')">دانلود</button>
                    `;
                    imageContainer.appendChild(imageItem);
                });

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

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

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

        // اتصال دکمه‌های دانلود به تابع handleDownload
        document.getElementById('downloadButton').addEventListener('click', handleDownload);
        document.getElementById('downloadButtonBottom').addEventListener('click', handleDownload);

        /* مدیریت مدال دانلود */
        const downloadModal = document.getElementById('downloadModal');
        const closeDownloadModalBtn = document.getElementById('closeDownloadModalBtn');

        closeDownloadModalBtn.addEventListener('click', function() {
            downloadModal.style.display = 'none';
        });

        /* مدیریت مدال توضیحات */
        const descriptionButton = document.getElementById('descriptionButton');
        const myModal = document.getElementById('myModal');
        const closeBtn = document.getElementById('closeBtn');

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

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

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

        /* فراخوانی تابع بارگذاری iframe و شروع لودینگ */
        loadIframe();
        startProgress();
    </script>
</p> برای اینکه بفهمی از کد پایین الگو بگیر <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%;
            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;
        }

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

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

        .translate-btn:hover {
            background-color: #45a049;
        }

        .image-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .image-item {
            margin: 10px;
            text-align: center;
        }

        .image-item img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 5px;
        }

        .image-item button {
            background-color: #4CAF50;
            color: white;
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
        }

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

        .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></p>
<p><a href="#" class="description-button" id="descriptionButton">توضیحات</a></p>
<!-- پنجره سفارشی (modal) برای نمایش تصاویر دانلود -->
<div id="myModal" class="modal">
<div class="modal-content">
<p style="text-align: center;">تصاویر شناسایی&zwnj;شده</p>
<div class="image-container" id="imageContainer"></div>
<button class="modal-button cancel-btn" id="closeBtn">بستن</button></div>
</div>
<!-- پنجره سفارشی (modal) برای نمایش توضیحات -->
<div id="myDescriptionModal" class="modal">
<div class="modal-content">
<p>مبدل تصویر با هوش مصنوعی</p>
<button class="modal-button translate-btn" id="translateBtn">مترجم</button> <button class="modal-button cancel-btn" id="closeDescriptionBtn">بستن</button></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">بارگیری زیاد طول کشید. در صورت عدم بارگذاری فیلترشکن خود را روشن کنید.</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><a href="#" class="download-button-bottom" id="downloadButtonBottom">دانلود تصویر 📥</a></p>
<p>
<script>
        const siteURL = 'https://yanze-pulid.hf.space/';
        const excludeUrls = [
            'https://yanze-pulid.hf.space/--replicas/qoy5l/file=/tmp/gradio/7567beceda2541f726af7beb4c9aa857b4a96b77/liuyifei.png',
            'https://yanze-pulid.hf.space/--replicas/ms3gr/file=/tmp/gradio/7567beceda2541f726af7beb4c9aa857b4a96b77/liuyifei.png', // تصویر همیشه موجود در سایت است
            // می‌توانید URL‌های دیگری را نیز اضافه کنید
        ];

        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;

        // متونی که باید جایگزین شوند
        const textsToReplace = {
            "Techenical report": "ezmary noori",
            "If PuLID is helpful, please help to ⭐ the . Thanks!": "اگر این ربات براتون خوشایند است  پنج ستاره بدید‌ .",
            "guozinan.1@bytedance.com": "ezmarynoori@gmail.com",
            "On mobile, the connection can break if this tab is unfocused or the device sleeps, losing your position in queue.": "در حال اجرای دستور کاربر برای تبدیل تصویر به مدل دلخواه با برنامه هوش مصنوعی",
            "Loading...": "...لطفاً صبر کنید",
            "Examples": "نمونه ها",
            "Generate": "شروع ساخت",
            "Prompt": "متن",
            "Negative Prompt": "چه چیزی اعمال نشه",
            "we provide some examples in the bottom, you can try these example prompts first": "ما برخی نمونه‌ها را در پایین ارائه می‌دهیم، می‌توانید ابتدا این مثال‌های متن را امتحان کنید.",
            "a single ID image is usually sufficient, you can also supplement with additional auxiliary images": "یک تصویر ID معمولاً کافی است، می‌توانید با تصاویر کمکی اضافی آن را تکمیل کنید.",
            "We offer two modes: fidelity mode and extremely style mode. In most cases, the default fidelity mode should suffice. If you find that the generated results are not stylized enough, you can choose the extremely style mode": "ما دو حالت ارائه می‌دهیم: حالت وفاداری و حالت استایل بسیار. در بیشتر موارد، حالت پیش‌فرض وفاداری کافی است. اگر متوجه شدید نتایج تولید شده به اندازه کافی استایل‌دار نیستند، می‌توانید حالت استایل بسیار را انتخاب کنید.",
            "turn this off)": "ترکیب شناسه (اگر می‌خواهید دو تصویر شناسه را ترکیب کنید، این گزینه را روشن کنید، در غیر این صورت خاموش کنید)",
            "fidelity": "وفاداری",
            "extremely style": "استایل بسیار",
            "ID scale": "مقیاس ID",
            "Width": "عرض",
            "Height": "ارتفاع",
            "Steps": "مراحل",
            "mode": "حالت",
            "Num samples": "تعداد نمونه‌ها",
            "Seed": "بذر",
            "You have exceeded your GPU quota": "محدودیت جی پی یو! انگار با ربات زیاد کار کردی. این محدودیت چند ساعت بعد برداشته میشه اما اگه میخوای الان مجدد تولید کنی فیلتر شکن پور لایت طبق آموزش ویدیویی یک بار خاموش و روشن کن این محدودیت برداشته میشه",
            "error": "خسته شدم🥹 چند دقیقه بعد بیا. اگه الان میخوای بسازم مشکلی نیست آی پی عوض کن",
            "Error": "خسته شدم🥹 چند دقیقه بعد بیا. اگه الان میخوای بسازم مشکلی نیست آی پی عوض کن"
        };

        // متونی که باید مخفی شوند
        const unwantedTexts = [
            "wuyanze123@gmail.com", // ایمیل مخفی شده
            "Gradio Demo", // مخفی شده
            "🤗", // مخفی شده
            "ArXiv", // مخفی شده
            "LICENSE file", // مخفی شده
            "PuLID", // مخفی شده
            "Use via API", // مخفی شده
            "Use via APIlogo" // مخفی شده
        ];

        // لینک‌هایی که باید مخفی شوند
        const linksToHide = [
            'https://github.com/ToTheBeginning/PuLID',
            'https://gradio.app/',
            'https://yanze-pulid.hf.space/placeholder',
            'https://arxiv.org/abs/2404.16022' // اضافه شده
        ];

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

            try {
                hideUnwantedElements();
                setupElementHiding();
            } catch (e) {
                console.error('Cannot access iframe content:', e);
            }
        }

        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 hideUnwantedElements() {
            const iframe = document.getElementById('myIframe');
            try {
                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

                if (!iframeDocument) return;

                // ابتدا جایگزینی متون مشخص‌شده
                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);
                    });
                });

                // سپس مخفی کردن متون مشخص‌شده
                unwantedTexts.forEach(unwanted => {
                    const textNodes = getTextNodesContaining(iframeDocument.body, unwanted);
                    textNodes.forEach(node => {
                        const parentElement = node.parentElement;
                        if (parentElement) {
                            parentElement.style.display = 'none';
                        }
                    });
                });

                // مخفی کردن لینک‌های مشخص‌شده
                const links = iframeDocument.querySelectorAll('a');
                links.forEach(link => {
                    if (linksToHide.includes(link.href)) {
                        link.style.display = 'none';
                    }
                });

            } catch (error) {
                console.error("Cannot access iframe content: ", error);
            }
        }

        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("Cannot access iframe content: ", 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 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("هیچ تصویر ساخته شده ای برای دانلود یافت نشد.");
                    return;
                }

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

                pngImages = pngImages.slice(0, 4);

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

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

                pngImages.forEach((imageUrl, index) => {
                    const imageItem = document.createElement('div');
                    imageItem.classList.add('image-item');
                    imageItem.innerHTML = `
                        <img src="${imageUrl}" alt="Image ${index + 1}">
                        <button onclick="downloadImage('${imageUrl}')">دانلود</button>
                    `;
                    imageContainer.appendChild(imageItem);
                });

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

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

        function downloadImage(imageUrl) {
            window.open(imageUrl, '_blank');
        }

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

        const modal = document.getElementById('myModal');
        const closeBtn = document.getElementById('closeBtn');

        closeBtn.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';
            }
        });

        const descriptionModal = document.getElementById('myDescriptionModal');
        const descriptionButton = document.getElementById('descriptionButton');
        const closeDescriptionBtn = document.getElementById('closeDescriptionBtn');
        const translateBtn = document.getElementById('translateBtn');

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

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

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

        loadIframe();
        startProgress();
    </script>
</p> تنها یک مترجم به قسمت توضیحات اضافه می‌کنه بدون هیچ تغییر دیگری