<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>صفحه اصلی</title>
    <style>
        /* استایل‌های اصلی صفحه */
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        .iframe-container {
            position: relative;
            width: 100%;
            height: calc(100vh - 120px); /* ارتفاع iframe */
            overflow: hidden;
        }

        /* حذف مخفی‌سازی بالایی و پایینی iframe */
        iframe {
            width: 100%;
            height: 100%; /* تنظیم ارتفاع به 100% */
            border: none;
            display: none;
            position: relative;
            top: 0; /* تنظیم موقعیت به صفر */
        }

        /* استایل‌های لودینگ */
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 10000;
        }

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

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

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

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

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

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

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

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

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

        /* دکمه دانلود در پایین صفحه */
        .download-button-bottom {
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #4CAF50;
            padding: 15px 30px;
            border-radius: 5px;
            color: white;
            text-align: center;
            font-size: 16px;
            text-decoration: none;
            z-index: 10001;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
        }

        .download-button-bottom:hover {
            background-color: #45a049;
            transform: translateX(-50%) scale(1.05);
        }

        /* پنجره مودال */
        .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;
        }

        .close-btn {
            background-color: #f44336;
            color: white;
        }
    </style>
</head>
<body>
    <!-- دکمه‌های دانلود و توضیحات -->
    <p>
        <a href="#" class="download-button" id="downloadButton">دانلود صدا📥</a>
        <a href="#" class="description-button" id="descriptionButton">توضیحات</a>
    </p>
    
    <!-- پنجره سفارشی (modal) -->
    <div id="myModal" class="modal">
        <div class="modal-content">
            <p style="text-align: center;">تغییر صدا و تغییر صدای خواننده&nbsp;</p>
            <p style="text-align: center;">با برنامه<span style="color: #008080;"> هوش مصنوعی</span></p>
            <p style="text-align: center;">اولین ارائه دهنده مدل های فارسی هوش مصنوعی&nbsp;</p>
            <button class="modal-button close-btn" id="closeBtn">بستن</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>
    
    <script>
        let progress = 0;
        const progressBar = document.getElementById('progressBar');
        const retryButton = document.getElementById('retryButton');
        const errorMessage = document.getElementById('errorMessage');
        const loadingContainer = document.getElementById('loadingContainer');
        const iframe = document.getElementById('myIframe');
        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 replaceCreditsAndHideTexts() {
            try {
                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
                if (!iframeDocument) return;

                const textsToHide = [
                    "Ilaria",
                    "The صفحه اول code is made by",
                    "Help keeping up the GPU donating on",
                    "In loving memory of JLabDX 🕊️",
                    "mikus"
                ];

                const textsToReplace = [
                    {
                        search: "Credits",
                        replace: "هوش مصنوعی"
                    },
                    {
                        search: "Model Loader",
                        replace: "دانلود مدل"
                    },
                    {
                        search: "Download and Upload",
                        replace: "بار اول اینجا مدل اضافه کنید"
                    },
                    {
                        search: "Inference",
                        replace: "صفحه اول"
                    },
                    {
                        search: "Vocal Separator",
                        replace: "جدا کننده آواز"
                    },
                    {
                        search: "made the ui!",
                        replace: "برنامه هوش مصنوعی پیشرفته"
                    },
                    // افزودن جایگزینی‌های جدید
                    {
                        search: "Huggingface RVC model",
                        replace: "مدل RVC هاجینگ‌فیس"
                    },
                    {
                        search: "Download Model",
                        replace: "دانلود مدل"
                    },
                    {
                        search: "Convert",
                        replace: "تبدیل"
                    }
                ];

                const replaceAndHide = () => {
                    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)) {
                                const regex = new RegExp(item.search, 'g');
                                node.nodeValue = node.nodeValue.replace(regex, item.replace);
                            }
                        });

                        // مخفی کردن متون مشخص شده
                        textsToHide.forEach(text => {
                            if (node.nodeValue.includes(text)) {
                                // بررسی اینکه آیا عنصر والد یک لینک است یا خیر
                                const parentElement = node.parentElement;
                                if (parentElement && parentElement.tagName.toLowerCase() === 'a') {
                                    parentElement.style.display = 'none';
                                } else {
                                    node.parentElement.style.display = 'none';
                                }
                            }
                        });
                    }
                };

                // جایگزینی و مخفی‌سازی در محتویات موجود
                replaceAndHide();

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

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

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

        function iframeLoaded() {
            iframeLoadedFlag = true;
            clearInterval(interval);
            loadingContainer.style.display = 'none';
            iframe.style.display = 'block';
            replaceCreditsAndHideTexts(); // فراخوانی تابع جایگزینی Credits و مخفی‌سازی متن‌های مورد نظر
        }

        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';
            iframe.style.display = 'none';
            loadIframe();
            startProgress();
        });

        function loadIframe() {
            fetch('https://thestinger-ilaria-rvc.hf.space/', { method: 'HEAD', mode: 'no-cors' })
                .then(() => {
                    iframe.src = 'https://thestinger-ilaria-rvc.hf.space/';
                    iframe.onload = iframeLoaded;
                    iframe.onerror = iframeError;
                })
                .catch(() => {
                    iframeError();
                });
        }

        document.getElementById('downloadButton').addEventListener('click', function(event) {
            event.preventDefault();
            downloadAudio();
        });

        document.getElementById('downloadButtonBottom').addEventListener('click', function(event) {
            event.preventDefault();
            downloadAudio();
        });

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

                let wavFiles = [];
                links.forEach((link) => {
                    const href = link.href;
                    if (href.endsWith('.wav')) {
                        wavFiles.push(href);
                    }
                });

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

                const numFiles = wavFiles.length;

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

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

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

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

        // دکمه بستن داخل پنجره
        closeBtn.addEventListener('click', function() {
            modal.style.display = 'none';
        });

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

        // بارگذاری اولیه iframe و شروع لودینگ
        loadIframe();
        startProgress();
    </script>
</body>
</html>
 در این کد متن چند تا متن مخفی کردم و متن ها فارسی بجای اونها نمایش دادم ببین الان چند تا متن دیگه من میفرستم تو اینارو هم مخفی کن و یک ترجمه دقیق بساز که کاربر متوجه بشه و بجای اون متن ها نمایش داده بشه کد کامل یکجا درست کن بفرست سعی کن بهترین ترجمه رو قرار بدی تا کاربر دقیق متوجه بشه Test Model این Refresh Models این Settings این Output این Model این Separate vocals and instruments from an audio file using UVR models این This is only on CPU due to ZeroGPU being ZeroGPU این Output 1 این Output 2 این Separate Vocals این Extra این Model Information این Training Time Calculator این Model Fusion این Model Quantization این Debug Get Model Information این Download the model from the following URL and upload it here این Model URL این Model Name کد کامل یکجا درست کن بفرست