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

    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        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;
    }

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

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

    /* استایل دکمه اسکرول */
    .scroll-handle {
        position: fixed;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 9999;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.4);
        color: white;
        border: none;
        cursor: grab;
        display: none; /* مخفی تا زمانی که iframe بارگذاری شود */
        align-items: center;
        justify-content: center;
        font-size: 24px;
        transition: all 0.3s;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .scroll-handle:active {
        cursor: grabbing;
        background-color: rgba(0, 0, 0, 0.6);
        box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    }

    @media (max-width: 768px) {
        .scroll-handle {
            right: 10px;
            width: 40px;
            height: 40px;
            font-size: 22px;
        }
    }

    @keyframes pulse {
        0% { transform: translateY(-50%) scale(1); }
        50% { transform: translateY(-50%) scale(1.1); }
        100% { transform: translateY(-50%) scale(1); }
    }

    .scroll-handle:hover {
        animation: pulse 1s infinite;
    }
</style>
<!-- پنجره سفارشی (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>
<!-- لودینگ و 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><button class="scroll-handle" title="برای اسکرول بکشید" role="button" aria-label="دکمه اسکرول">👆</button></p>
<p>
<script>
    const siteURL = 'https://ovi054-image-to-prompt.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;

    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';
        // نمایش دکمه اسکرول پس از بارگذاری موفق
        const scrollButton = document.querySelector('.scroll-handle');
        scrollButton.style.display = 'flex';
        setupScrollHandle();
    }

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

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

    // مدیریت دکمه دانلود با استفاده از alert
    const downloadButton = document.getElementById('downloadButtonBottom');

    downloadButton.addEventListener('click', function(event) {
        event.preventDefault(); // جلوگیری از عمل پیش‌فرض لینک
        alert('ربات تبدیل تصویر به پرامپت.');
        // اگر می‌خواهید کار دیگری هم انجام دهید، می‌توانید کدهای لازم را اینجا اضافه کنید
    });

    // فراخوانی عملکرد دکمه اسکرول پس از بارگذاری iframe
    function setupScrollHandle() {
        const scrollHandle = document.querySelector('.scroll-handle');
        const iframe = document.getElementById('myIframe');

        let isDragging = false;
        let startY = 0;
        let startScrollY = 0;

        scrollHandle.addEventListener('mousedown', startDragging);
        scrollHandle.addEventListener('touchstart', startDragging);

        document.addEventListener('mousemove', drag);
        document.addEventListener('touchmove', drag);

        document.addEventListener('mouseup', stopDragging);
        document.addEventListener('touchend', stopDragging);

        function startDragging(e) {
            isDragging = true;
            startY = e.clientY || e.touches[0].clientY;
            if (iframe.contentWindow) {
                startScrollY = iframe.contentWindow.pageYOffset || iframe.contentWindow.scrollY;
            } else {
                startScrollY = 0;
            }
            scrollHandle.style.cursor = 'grabbing';
        }

        function drag(e) {
            if (!isDragging) return;
            e.preventDefault();
            const y = e.clientY || e.touches[0].clientY;
            const walk = (y - startY) * 2; // سرعت اسکرول
            if (iframe.contentWindow) {
                iframe.contentWindow.scrollTo(0, startScrollY - walk);
            }
        }

        function stopDragging() {
            isDragging = false;
            scrollHandle.style.cursor = 'grab';
        }
    }

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