<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Iframe Loader</title>
    <style>
        /* تنظیمات پایه برای body و html */
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* متغیر CSS برای ارتفاع نمایشگر */
        :root {
            --vh: 100%;
        }

        /* حالت عادی */
        .iframe-container.normal {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        .iframe-container.normal iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: none;
            position: relative;
            top: 0;
        }

        /* حالت تمام صفحه */
        .iframe-container.fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: calc(var(--vh) * 100);
            overflow: hidden;
            z-index: 1;
        }

        .iframe-container.fullscreen iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        /* استایل‌های مشترک */
        .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;
        }
    </style>
</head>
<body>
    <!-- لودینگ و iframe -->
    <div class="iframe-container normal">
        <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" sandbox="allow-scripts allow-same-origin allow-forms allow-modals" allow="clipboard-read; clipboard-write"></iframe>
    </div>

    <script>
        const siteURL = 'https://huggingface-projects-llama-3-2-vision-11b.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;
        let observer;

        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';
            const iframeContainer = document.querySelector('.iframe-container');
            iframeContainer.classList.remove('normal');
            iframeContainer.classList.add('fullscreen');
            document.getElementById('myIframe').style.display = 'block';

            modifyIframeContent();
            setupMutationObserver();
        }

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

        function setVh() {
            let vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', `${vh}px`);
        }

        setVh();
        window.addEventListener('resize', setVh);

        loadIframe();
        startProgress();

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

                if (!iframeDocument) return;

                // قطع اتصال MutationObserver
                if (observer) observer.disconnect();

                // مخفی کردن متون ناخواسته
                const unwantedTexts = [
                    'ساخته شده با gradio',
                    'Use via API',
                    'To learn more about Llama Vision, visit our blog post.',
                    'Which era does this piece belong to? Give details about the era.'
                ];
                unwantedTexts.forEach(unwanted => {
                    const textNodes = getTextNodesContaining(iframeDocument.body, unwanted);
                    textNodes.forEach(node => {
                        const parentElement = node.parentElement;
                        if (parentElement) {
                            parentElement.style.display = 'none';
                        }
                    });
                });

                // جایگزینی متن مشخص با متن جدید
                const targetText = 'Try Multimodal Llama by Meta with transformers in this demo. Upload an image, and start chatting about it, or simply try one of the examples below.';
                const newText = 'جدیدترین نسخه چت بات متا با تحلیل تصاویر. یک تصویر آپلود کنید و درباره آن چت کنید و یا یکی از نمونه های پایین رو امتحان کنید.';

                const targetNodes = getTextNodesContaining(iframeDocument.body, targetText);
                targetNodes.forEach(node => {
                    node.textContent = newText;
                });

                // جایگزینی متن دیگر با ترجمه فارسی
                const additionalTargetText = 'Which era does this piece belong to? Give details about the era.';
                const additionalNewText = 'این اثر به کدام دوره تعلق دارد؟ جزئیات مربوط به آن دوره را بیان کنید.';

                const additionalTargetNodes = getTextNodesContaining(iframeDocument.body, additionalTargetText);
                additionalTargetNodes.forEach(node => {
                    node.textContent = additionalNewText;
                });

                // اتصال مجدد MutationObserver
                if (observer) observer.observe(iframeDocument.body, {
                    childList: true,
                    subtree: true
                });

            } 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 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);
            }
        }
    </script>
</body>
</html>
در این کد چند تا متن مخفی شده و چند تا متن دیگه بجاشون نمایش داده میشه تو این چند تا متن دیگه رو هم مخفی کن اما بجاش متن ترجمه فارسی شو خودت بساز قرار بده تا فارسی بجاش نمایش داده بشه Retry این Undo این Clear این Examples این Which era does this piece belong to? Give details about the era. این Where do the droughts happen according to this diagram? این What happens when you take out white cat from this chain? این How long does it take from invoice date to due date? Be short and concise. این Where to find this monument? Can you give me other recommendations around the area?  این Additional Inputs اینMaximum number of new tokens to generate کد کامل یکجا درست کن بفرست مخفی سازی های قبلی هم باشه