<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: calc(100% + 7.5cm); /* اضافه کردن ۷.۵ سانتی‌متر به ارتفاع */
            border: none;
            display: none; /* مخفی تا زمانی که سایت بارگذاری شود */
            position: relative;
            top: -7.5cm; /* مخفی کردن ۷.۵ سانتی‌متر از بالا */
        }

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

        /* دکمه‌های توضیحات و دانلود ویدیو بالا */
        .description-button-top, .download-button-top {
            display: block;
            width: 150px;
            color: white;
            text-align: center;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
            position: fixed;
            top: 10px;
            z-index: 10001;
            text-decoration: none;
        }

        .description-button-top {
            background-color: rgb(84, 110, 122); /* رنگ مشخص برای توضیحات */
            left: 10px; /* قرار دادن در سمت چپ بالای صفحه */
        }

        .download-button-top {
            background-color: #4CAF50; /* رنگ سبز برای دانلود ویدیو */
            right: 10px; /* قرار دادن در سمت راست بالای صفحه */
        }

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

        /* دکمه دانلود ویدیو در پایین صفحه */
        .download-button-bottom {
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #4CAF50;
            padding: 15px 50px;
            border-radius: 5px;
            color: white;
            text-align: center;
            font-size: 14px;
            text-decoration: none;
            z-index: 10001;
            cursor: pointer;
            min-width: 250px;
            width: auto;
            white-space: nowrap;
            transition: background-color 0.3s;
            display: none; /* مخفی تا زمانی که iframe بارگذاری شود */
        }

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

        /* استایل پنجره سفارشی (modal) */
        .modal {
            display: none;
            position: fixed;
            z-index: 10002;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            overflow: auto;
        }

        .modal-content {
            background-color: #fefefe;
            margin: 5% auto; /* کاهش فاصله از بالا و پایین */
            padding: 20px;
            border: 1px solid #888;
            width: 90%;
            max-width: 900px; /* افزایش حداکثر عرض */
            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, .video-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

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

        .image-item img, .video-item video {
            width: 100%; /* تنظیم به 100% عرض والد */
            max-width: 400px; /* حداکثر عرض برای بزرگنمایی بهتر */
            height: auto; /* حفظ نسبت ابعاد */
            object-fit: cover;
            border-radius: 5px;
            margin-bottom: 5px;
        }

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

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

        .video-player {
            width: 100%; /* تنظیم به 100% عرض والد */
            max-width: 800px; /* حداکثر عرض برای نمایش بزرگتر */
            height: auto; /* حفظ نسبت ابعاد */
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            iframe {
                height: calc(100% + 7.5cm); /* تنظیم مجدد ارتفاع برای موبایل */
                top: -7.5cm;       /* تنظیم مجدد موقعیت برای موبایل */
            }

            .description-button-top, .download-button-top {
                width: 120px;
                padding: 8px;
                font-size: 12px;
                top: 5px;
            }

            .download-button-bottom {
                width: 90%;
                padding: 12px 40px;
                font-size: 14px;
            }

            .modal-content {
                width: 95%;
                max-width: 1000px; /* افزایش حداکثر عرض برای موبایل */
            }

            .video-player {
                max-width: 100%; /* تنظیم به 100% عرض */
            }
        }
    </style>
<!-- دکمه‌های توضیحات و دانلود ویدیو بالا -->
<p><a href="#" class="description-button-top" id="descriptionButtonTop">توضیحات</a> <a href="#" class="download-button-top" id="downloadButtonTop">دانلود ویدیو 📥</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 style="text-align: center;">تبدیل متن به ویدیو با برنامه <span style="color: #339966;">هوش مصنوعی</span></p>
<p style="text-align: center;">خلاقیت خودت رو با پرامپت های بهتر نشون بده!</p>
<p style="text-align: center;"><button class="modal-button cancel-btn" id="closeDescriptionBtn">بستن</button></p>
</div>
</div>
<!-- پنجره سفارشی (modal) برای دانلود ویدیوها -->
<div id="myVideoModal" class="modal">
<div class="modal-content">
<p style="text-align: center;">ویدیوهای شناسایی&zwnj;شده</p>
<div class="video-container" id="videoContainer"><!-- پلیرهای ویدیو در اینجا قرار خواهند گرفت --></div>
<button class="modal-button cancel-btn" id="closeVideoModalBtn">بستن</button></div>
</div>
<!-- پنجره تأیید دانلود ویدیو -->
<div id="confirmVideoModal" class="modal">
<div class="modal-content">
<p>برای دانلود فایل ویدیویی روی تایید کلیک کنید و بعد از باز شدن مرورگر، سمت راست فایل را کلیک کرده و گزینه بارگیری فایل را انتخاب کنید.</p>
<button class="modal-button translate-btn" id="confirmDownloadVideoBtn">تایید</button> <button class="modal-button cancel-btn" id="cancelDownloadVideoBtn">لغو</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">بارگیری زیاد طول کشید.<br />در صورت عدم بارگذاری، فیلترشکن خود را روشن کنید.</div>
<button id="retryButton">بارگذاری مجدد</button></div>
<iframe id="myIframe"></iframe></div>
<!-- دکمه دانلود در پایین صفحه -->
<p><a href="#" class="download-button-bottom" id="downloadButtonBottom">دانلود ویدیو 📥</a></p>
<p>
<script>
        const siteURL = 'https://vchitect-lavie.hf.space/';
        const excludeUrls = [
            'https://yanze-pulid.hf.space/--replicas/3t64n/file=/tmp/gradio/7567beceda2541f726af7beb4c9aa857b4a96b77/liuyifei.png'
        ];

        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;

        // متغیر برای ذخیره‌ی لینک فایل ویدیوی انتخاب شده
        let selectedVideoUrl = '';

        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';
            // نمایش دکمه دانلود پایین صفحه پس از بارگذاری موفق
            document.getElementById('downloadButtonBottom').style.display = 'block';
        }

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

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

        // مدیریت پنجره‌های مدال
        const imageModal = document.getElementById('myModal');
        const closeBtn = document.getElementById('closeBtn');

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

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

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

        const videoModal = document.getElementById('myVideoModal');
        const closeVideoModalBtn = document.getElementById('closeVideoModalBtn');

        closeVideoModalBtn.addEventListener('click', function() {
            videoModal.style.display = 'none';
        });

        const confirmVideoModal = document.getElementById('confirmVideoModal');
        const confirmDownloadVideoBtn = document.getElementById('confirmDownloadVideoBtn');
        const cancelDownloadVideoBtn = document.getElementById('cancelDownloadVideoBtn');

        confirmDownloadVideoBtn.addEventListener('click', function() {
            if (selectedVideoUrl) {
                window.open(selectedVideoUrl, '_blank'); // باز کردن لینک در تب جدید
                // بسته شدن پنجره تأیید
                confirmVideoModal.style.display = 'none';
                // پاک کردن متغیر بعد از استفاده
                selectedVideoUrl = '';
            }
        });

        cancelDownloadVideoBtn.addEventListener('click', function() {
            // بسته شدن پنجره تأیید
            confirmVideoModal.style.display = 'none';
            // پاک کردن متغیر
            selectedVideoUrl = '';
        });

        window.addEventListener('click', function(event) {
            if (event.target == imageModal) {
                imageModal.style.display = 'none';
            }
            if (event.target == descriptionModal) {
                descriptionModal.style.display = 'none';
            }
            if (event.target == videoModal) {
                videoModal.style.display = 'none';
            }
            if (event.target == confirmVideoModal) {
                confirmVideoModal.style.display = 'none';
            }
        });

        // مدیریت دکمه‌های دانلود و توضیحات
        const downloadButtonTop = document.getElementById('downloadButtonTop');
        const descriptionButtonTop = document.getElementById('descriptionButtonTop');
        const downloadButtonBottom = document.getElementById('downloadButtonBottom');

        // عملکرد دانلود ویدیو
        function handleDownloadVideo(event) {
            event.preventDefault();
            const iframe = document.getElementById('myIframe');
            let iframeDocument;
            try {
                iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            } catch (error) {
                console.error("دسترسی به محتوای iframe به دلیل محدودیت‌های امنیتی امکان‌پذیر نیست.", error);
                alert("دسترسی به محتوای iframe به دلیل محدودیت‌های امنیتی امکان‌پذیر نیست.");
                return;
            }

            try {
                const links = iframeDocument.querySelectorAll('a');
                if (links.length === 0) {
                    alert("هیچ لینک ویدیویی برای دانلود یافت نشد.");
                    return;
                }

                let mp4Files = [];
                links.forEach((link) => {
                    const href = link.href;
                    if (href && href.toLowerCase().endsWith('.mp4')) {
                        mp4Files.push(href);
                    }
                });

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

                // محدود به چند فایل (می‌توانید تعداد دلخواه را تغییر دهید)
                //mp4Files = mp4Files.slice(0, 2); // اگر می‌خواهید محدود به دو فایل باشد
                // در اینجا اجازه می‌دهیم تمام فایل‌ها نمایش داده شوند

                const videoContainer = document.getElementById('videoContainer');
                videoContainer.innerHTML = '';
                mp4Files.forEach((videoUrl, index) => {
                    const videoItem = document.createElement('div');
                    videoItem.classList.add('video-item');
                    // تعیین برچسب بر اساس شماره پلیر
                    let labelText = `خروجی ویدیو ${index + 1}`;
                    videoItem.innerHTML = `
                        <p class="video-label">${labelText}</p>
                        <video controls class="video-player">
                            <source src="${videoUrl}" type="video/mp4">
                            مرورگر شما از پخش این فایل ویدیویی پشتیبانی نمی‌کند.
                        </video>
                        <button class="download-video-button" onclick="downloadVideo('${videoUrl}')">دانلود ویدیو</button>
                    `;
                    videoContainer.appendChild(videoItem);
                });
                videoModal.style.display = 'block';
            } catch (error) {
                console.error("خطا در شناسایی ویدیوها: ", error);
                alert("خطایی در شناسایی ویدیوها رخ داد.");
            }
        }

        // عملکرد نمایش توضیحات
        function handleShowDescription(event) {
            event.preventDefault();
            descriptionModal.style.display = 'block';
        }

        // عملکرد دانلود تصاویر (اگر نیاز دارید، می‌توانید آن را فعال کنید)
        function handleDownloadImages(event) {
            event.preventDefault();
            const iframe = document.getElementById('myIframe');
            let iframeDocument;
            try {
                iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
            } catch (error) {
                console.error("دسترسی به محتوای iframe به دلیل محدودیت‌های امنیتی امکان‌پذیر نیست.", error);
                alert("دسترسی به محتوای iframe به دلیل محدودیت‌های امنیتی امکان‌پذیر نیست.");
                return;
            }

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

                let imageFiles = [];
                links.forEach((link) => {
                    const href = link.href;
                    if (href && (href.toLowerCase().endsWith('.png') || href.toLowerCase().endsWith('.jpg') || href.toLowerCase().endsWith('.jpeg'))) {
                        // بررسی اینکه لینک در excludeUrls نباشد
                        if (!excludeUrls.includes(href)) {
                            imageFiles.push(href);
                        }
                    }
                });

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

                const imageContainer = document.getElementById('imageContainer');
                imageContainer.innerHTML = '';
                imageFiles.forEach((imageUrl) => {
                    const imageItem = document.createElement('div');
                    imageItem.classList.add('image-item');
                    imageItem.innerHTML = `
                        <img src="${imageUrl}" alt="تصویر">
                        <button onclick="downloadImage('${imageUrl}')">دانلود تصویر</button>
                    `;
                    imageContainer.appendChild(imageItem);
                });
                imageModal.style.display = 'block';
            } catch (error) {
                console.error("خطا در شناسایی تصاویر: ", error);
                alert("خطایی در شناسایی تصاویر رخ داد.");
            }
        }

        function downloadVideo(videoUrl) {
            // ذخیره لینک فایل ویدیوی انتخاب شده
            selectedVideoUrl = videoUrl;
            // نمایش پنجره تأیید
            confirmVideoModal.style.display = 'block';
        }

        function downloadImage(imageUrl) {
            // باز کردن لینک تصویر در تب جدید
            window.open(imageUrl, '_blank');
        }

        // Event listeners برای دکمه‌های جدید
        downloadButtonTop.addEventListener('click', handleDownloadVideo);
        descriptionButtonTop.addEventListener('click', handleShowDescription);
        downloadButtonBottom.addEventListener('click', handleDownloadVideo);

        // اجرای بارگذاری iframe و آغاز لودینگ
        loadIframe();
        startProgress();
    </script>
</p>
سلام در این کد میخواستم چند تغییر خیلی اساسی ایجاد کنی ببین کامل توضیح میدم این کد در واقع داخل اش تبدیل عکس به کد اچ تی ام ال است در واقع یک ربات است که این کار انجام میده عکس کاربر میده تبدیل به کد می‌کنه تو بجای دکمه دانلود تصویر تغییر بده اسم شو بکن نمایشگر که کاربر وقتی روی نمایشگر کلیک می‌کنه کد داخل اعلان جایی قرار بده که کاربر مد اونجا قرار بده و بعد نمایش صفحه رو که بزنه کد در واقع تبدیل به صفحه بشه و اینکه این فرایند داخل یک اعلان انجام بشه یعنی همون اعلان که قبلاً پلیر نمایش میداد جای برای گذاشتن کد باشه و وقتی نمایش کد بزنه در واقع در یک اعلان جدید کد اچ تی ام ال کاربر نمایش داده بشه کد کامل یکجا درست کن بفرست