<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Gradio App Integration</title>
    <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.44.0/gradio.js"></script>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: auto;
            background-color: #f4f4f9;
            font-family: sans-serif;
            position: relative;
        }

        a {
            display: none;
        }

        #loader {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #f4f4f9;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 9999;
            text-align: center;
        }

        #progress {
            width: 80%;
            height: 30px;
            background-color: #eee;
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        #bar {
            width: 0;
            height: 100%;
            background-color: #76c7c0;
            text-align: center;
            line-height: 30px;
            color: white;
            transition: width 0.2s ease;
        }

        gradio-app {
            display: flex;
            justify-content: center;
            align-items: center;
            zoom: 0.8;
            min-height: 100vh;
            margin-top: 0;
        }

        .modal, .notification {
            display: none;
            position: fixed;
            z-index: 10002;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            text-align: center;
            color: #333;
            max-width: 400px;
            width: 90%;
        }

        .modal img, .notification img {
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
            border-radius: 8px;
        }

        .modal button, .notification button {
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            margin: 5px;
            font-size: 16px;
        }

        .modal button:hover, .notification button:hover {
            background-color: #45a049;
        }

        .close-button {
            background-color: #d9534f;
            color: white;
        }

        .close-button:hover {
            background-color: #c9302c;
        }

        #tutorialTitle {
            color: red;
        }

        #einsteinTip {
            margin-top: 10px;
            font-style: italic;
            color: #555;
        }

        #downloadButton {
            display: none;
            position: fixed;
            bottom: 20px;
            left: 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
            z-index: 10003;
            font-size: 16px;
        }

        #downloadButton:hover {
            background-color: #45a049;
        }

        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .notification.success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .notification {
            animation: fadeIn 0.3s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translate(-50%, -60%); }
            to { opacity: 1; transform: translate(-50%, -50%); }
        }
    </style>
</head>
<body>
    <div id="loader">
        <div id="progress">
            <div id="bar">0%</div>
        </div>
        <div>لطفاً صبر کنید...</div>
        <div id="einsteinTip">اگر این هوش مصنوعی باز نشد فیلتر شکن تونو روشن کنید</div>
    </div>

    <gradio-app src="https://mukaist-midjourney.hf.space/"></gradio-app>
    <button id="downloadButton">دانلود تصویر 📥</button>

    <div class="modal" id="imageModal">
        <h3>پیش‌نمایش تصویر</h3>
        <img id="modalImage" alt="Image Preview" />
        <button id="nextImageButton">تصویر بعدی ⏭️</button>
        <button id="saveImageButton">ذخیره تصویر 💾</button>
        <button class="close-button">لغو ❌</button>
    </div>

    <div class="notification" id="saveNotification">
        <p>در حال ساخت لینک دانلود تصویر..</p>
    </div>

    <div class="notification" id="uploadLinkNotification">
        <p>برای ذخیره تصویر داخل گوشی روی کپی لینک دانلود کلیک کنید و بعدا لینک رو داخل مرورگر گوشی باز کنید تصویر رو که نمایش داد روی تصویر محکم نگهدارید و بارگیری تصویر رو کلیک کنید.<a href="#" id="downloadLink" target="_blank"></a></p>
        <button id="copyLinkButton">کپی لینک 📋</button>
        <button class="close-button">بستن</button>
    </div>

    <div class="notification error" id="noImageNotification">
        <p>هیچ تصویر ساخته شده‌ای یافت نشد.</p>
        <button id="noImageButton">باشه</button>
    </div>

    <div class="notification success" id="copySuccessNotification">
        <p>لینک با موفقیت کپی شد!</p>
        <button class="close-button">بستن</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const restrictedWords = ['porn', 'sex', 'sexy', 'سکس', 'برهنه', 'تجاوز', 'خونین'];

            function checkForRestrictedWords(inputText) {
                for (const word of restrictedWords) {
                    if (inputText.toLowerCase().includes(word.toLowerCase())) {
                        alert('متن شما شامل عبارتی غیر اخلاقی است و صفحه بارگذاری مجدد خواهد شد.');
                        window.location.reload();
                        return true;
                    }
                }
                return false;
            }

            const observer = new MutationObserver(() => {
                const inputElements = document.querySelectorAll('input[type="text"], textarea');
                inputElements.forEach(input => {
                    input.addEventListener('input', function(event) {
                        checkForRestrictedWords(event.target.value);
                    });
                });
            });

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

            document.body.addEventListener('input', (event) => {
                if (event.target.matches('input[type="text"], textarea')) {
                    checkForRestrictedWords(event.target.value);
                }
            });

            function modifyText() {
                document.querySelectorAll('body *').forEach(element => {
                    element.childNodes.forEach(node => {
                        if (node.nodeType === Node.TEXT_NODE) {
                            if (node.nodeValue.includes('GPU')) {
                                node.parentElement.style.display = 'none';
                            }
                            const replacements = {
                                'Examples': 'نمونه‌ها',
                                'Expected Ratio': 'اندازه مورد انتظار',
                                'Prompt': 'متن',
                                'Optional': 'انگلیسی وارد کنید و یا خالی بگذارید.',
                                'Generate': 'شروع ساخت',
                                'Use as تصویر ورودی': 'این یکی رو دوباره گسترش بده',
                                'Diffusers Image Outpaint': 'ابزار فوق‌پیشرفته گسترش تصاویر',
                                'Drop an image you would like to extend, pick your expected ratio and hit شروع ساخت': 'با نرم‌افزار هوش مصنوعی',
                                'Input Image': 'تصویر ورودی',
                                'Alignment': 'تراز',
                                'Advanced settings': 'تنظیمات پیشرفته',
                                'Middle': 'وسط',
                                'Left': 'چپ',
                                'Right': 'راست',
                                'Top': 'بالا',
                                'Bottom': 'پایین',
                                'Width': 'عرض',
                                'Steps': 'مراحل',
                                'Height': 'ارتفاع',
                                'Mask': 'ماسک',
                                'Overlap': 'همپوشانی',
                                'Resize input image': 'تغییر اندازه تصویر ورودی',
                                'Loading': 'در حال بارگذاری'
                            };
                            for (const [original, replacement] of Object.entries(replacements)) {
                                if (node.nodeValue.includes(original)) {
                                    node.nodeValue = node.nodeValue.replace(original, replacement);
                                }
                            }
                        }
                    });
                });
            }

            function simulateProgress(callback) {
                let progress = 0;
                const progressElement = document.getElementById('bar');

                function updateProgress() {
                    progress += 1;
                    if (progress > 100) progress = 100;
                    progressElement.style.width = progress + '%';
                    progressElement.textContent = progress + '%';

                    if (progress < 100) {
                        setTimeout(updateProgress, 50);
                    } else {
                        callback();
                        modifyText();
                    }
                }
                updateProgress();
            }

            function showContent() {
                document.getElementById('loader').style.display = 'none';
                const gradioApp = document.querySelector('gradio-app');
                gradioApp.scrollIntoView({ behavior: 'smooth', block: 'start' });
                document.getElementById('downloadButton').style.display = 'block';
            }

            window.onload = function() {
                simulateProgress(showContent);

                const gradioApp = document.querySelector('gradio-app');

                function checkIfLoaded() {
                    if (gradioApp) {
                        gradioApp.addEventListener('gradio_loaded', showContent);
                        gradioApp.addEventListener('load', showContent);

                        setTimeout(showContent, 10000);
                    } else {
                        setTimeout(checkIfLoaded, 100);
                    }
                }

                checkIfLoaded();
            };

            const downloadButton = document.getElementById('downloadButton');
            if (downloadButton) {
                downloadButton.addEventListener('click', function() {
                    const images = document.querySelectorAll('gradio-app img[src$=".webp"]');
                    const ignoredUrl = 'https://victorestrada-diffusers-image-outpaint.hf.space/file=/tmp/gradio/58d27ee015923ff8867291e88910c3b1fc5e49698a7a06372037c6d58cd5452e/example_1.webp';
                    let imageArray = [];

                    images.forEach(img => {
                        if (!img.src.includes(ignoredUrl)) {
                            imageArray.push(img.src);
                        }
                    });

                    if (imageArray.length > 0) {
                        let currentIndex = 0;
                        displayImage(imageArray, currentIndex);

                        document.getElementById('nextImageButton').onclick = function() {
                            currentIndex = (currentIndex + 1) % imageArray.length;
                            displayImage(imageArray, currentIndex);
                        };
                    } else {
                        const noImageNotification = document.getElementById('noImageNotification');
                        noImageNotification.style.display = 'block';
                    }
                });
            }

            function displayImage(imageList, index) {
                const modalImage = document.getElementById('modalImage');
                modalImage.src = imageList[index];
                const imageModal = document.getElementById('imageModal');
                imageModal.style.display = 'block';
            }

            const saveImageButton = document.getElementById('saveImageButton');
            saveImageButton.addEventListener('click', function() {
                const modalImage = document.getElementById('modalImage');
                uploadImageToServer(modalImage.src);
            });

            function uploadImageToServer(imageUrl) {
                const saveNotification = document.getElementById('saveNotification');
                saveNotification.style.display = 'block';

                fetch(imageUrl)
                    .then(response => response.blob())
                    .then(blob => {
                        const formData = new FormData();
                        formData.append('image', blob, 'downloaded_image.webp');

                        return fetch('upload.php', {
                            method: 'POST',
                            body: formData,
                        });
                    })
                    .then(response => response.json())
                    .then(data => {
                        saveNotification.style.display = 'none';
                        if (data.success) {
                            const uploadLinkNotification = document.getElementById('uploadLinkNotification');
                            const downloadLink = document.getElementById('downloadLink');
                            downloadLink.href = data.url;
                            downloadLink.textContent = data.url;
                            uploadLinkNotification.style.display = 'block';
                        } else {
                            alert('خطا در آپلود تصویر');
                        }
                    })
                    .catch(error => {
                        console.error('خطا:', error);
                        saveNotification.style.display = 'none';
                    });
            }

            document.querySelectorAll('.close-button').forEach(button => {
                button.addEventListener('click', function(event) {
                    event.stopPropagation();
                    button.closest('.modal, .notification').style.display = 'none';
                });
            });

            const noImageButton = document.getElementById('noImageButton');
            noImageButton.addEventListener('click', function() {
                const noImageNotification = document.getElementById('noImageNotification');
                noImageNotification.style.display = 'none';
            });

            document.addEventListener('click', function(event) {
                if (!event.target.closest('.modal, .notification') && !event.target.matches('#downloadButton')) {
                    document.querySelectorAll('.modal, .notification').forEach(modal => {
                        modal.style.display = 'none';
                    });
                }
            });

            const copyLinkButton = document.getElementById('copyLinkButton');
            if (copyLinkButton) {
                copyLinkButton.addEventListener('click', function() {
                    const downloadLink = document.getElementById('downloadLink').href;
                    if (downloadLink) {
                        navigator.clipboard.writeText(downloadLink).then(() => {
                            const copySuccessNotification = document.getElementById('copySuccessNotification');
                            copySuccessNotification.style.display = 'block';

                            setTimeout(() => {
                                copySuccessNotification.style.display = 'none';
                            }, 3000);
                        }).catch(err => {
                            console.error('کپی لینک ناموفق بود:', err);
                        });
                    }
                });
            }
        });
    </script>
</body>
</html> این یک سایت تصویر ساز است که متن های غیر اخلاقی رو هم اجازه نمیده ولی یک تغییر ایجاد کن که پیغام هنگام نمایش محتوای غیر اخلاقی نشون میده ساده است یکم پیغام زیباتر نشون بده