Respan Dataset Explorer

<p>&nbsp;</p>
<style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: calc(var(--vh, 1vh) * 100);
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            text-align: center; /* مرکزیت متن */
            direction: rtl; /* تنظیم جهت متن به راست به چپ */
        }

        .iframe-container {
            position: relative;
            width: 100%;
            height: calc(var(--vh, 1vh) * 100);
            overflow: hidden;
        }

        iframe {
            width: 100%;
            height: calc(100% + 1244px);
            border: none;
            display: none;
            position: relative;
            top: -529.13px;
        }

        .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;
            transition: background-color 0.3s;
        }

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

        /* دکمه‌ها */
        .button-container {
            position: fixed;
            top: 10px;
            left: 10px;
            display: flex;
            gap: 10px;
            z-index: 10001;
        }

        .download-button {
            position: fixed;
            top: 10px;
            right: 10px;
            color: white;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px 10px; /* کاهش پدینگ برای کوچکتر شدن */
            font-size: 11px; /* کاهش اندازه فونت */
            background-color: #4CAF50;
            width: 130px; /* تنظیم عرض مشابه دکمه توضیحات */
        }

        .description-button, .prompt-button {
            color: white;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px 10px;
            font-size: 11px;
            background-color: rgb(84, 110, 122);
        }

        .description-button {
            width: 130px; /* تنظیم عرض */
        }

        .prompt-button {
            width: 30px; /* کاهش عرض به 30px */
            font-size: 14px; /* کاهش اندازه فونت */
            padding: 4px; /* کاهش پدینگ برای کوچک‌تر شدن دکمه */
        }

        .download-button:hover, .description-button:hover, .prompt-button:hover {
            filter: brightness(0.9);
        }

        /* مدال‌ها */
        .modal {
            display: none;
            position: fixed;
            z-index: 10002;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #888;
            width: 90%;
            max-width: 800px; /* حفظ حداکثر عرض اصلی */
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .modal-button {
            margin-top: 20px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

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

        .cancel-btn:hover {
            background-color: #d32f2f;
        }

        /* استایل‌های دسته‌بندی پرامپت‌ها */
        .prompt-category {
            background: #ffffff;
            padding: 12px 20px;
            margin: 10px auto;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            width: 80%;
            max-width: 300px; /* کاهش عرض برای کوچک‌تر شدن */
            border: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px; /* کاهش اندازه فونت */
            position: relative;
        }

        .prompt-category:hover {
            background-color: #f9f9f9;
            transform: translateY(-2px);
        }

        .prompt-category .icon {
            margin-left: 8px;
            font-size: 20px; /* کاهش اندازه آیکون */
            color: #3498db;
        }

        /* مودال لیست پرامپت‌ها */
        .prompt-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .prompt-item {
            background-color: #fff;
            padding: 8px 12px;
            margin: 5px 0;
            border-radius: 8px;
            transition: background-color 0.3s, box-shadow 0.3s;
            text-align: left;
            font-weight: bold;
            font-size: 14px;
            width: 100%;
            max-width: 400px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid #e0e0e0;
            position: relative;
        }

        .prompt-item:hover {
            background-color: #f0f0f0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .prompt-text-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: right;
        }

        .prompt-text {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .persian-translation {
            font-size: 14px;
            color: #555;
        }

        .copy-icon {
            cursor: pointer;
            font-size: 20px;
            color: #555;
            transition: color 0.3s;
            margin-left: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .copy-icon:hover {
            color: #000;
        }

        /* دکمه کوچک‌تر برای پرامپت‌ها */
        .prompt-button-small {
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            font-size: 12px;
        }

        .prompt-button-small:hover {
            background-color: #2980b9;
            transform: scale(1.1);
        }

        /* تنظیم عرض مودال‌ها برای نمایش بهتر در صفحات کوچک */
        @media (max-width: 600px) {
            .modal-content {
                width: 95%;
            }

            .prompt-category {
                width: 95%;
            }

            .prompt-item {
                width: 95%;
            }

            .download-button {
                width: 100px; /* تنظیم عرض برای صفحات کوچک */
                font-size: 11px;
                padding: 6px 10px;
            }

            .description-button {
                width: 100px;
            }

            .prompt-text {
                font-size: 14px;
            }

            .persian-translation {
                font-size: 12px;
            }

            .copy-icon {
                font-size: 18px;
            }

            .prompt-button-small {
                width: 20px;
                height: 20px;
                font-size: 10px;
            }
        }
    </style>
<!-- دکمه‌ها -->
<div class="button-container"><a href="#" class="description-button" id="descriptionButton">توضیحات</a> <a href="#" class="prompt-button" id="promptButton">P</a></div>
<p><a href="#" class="download-button" id="downloadButton">دانلود تصویر 📥</a></p>
<!-- پنجره مودال برای تصاویر -->
<div id="myModal" class="modal">
<div class="modal-content">
<p>تصاویر شناسایی شده</p>
<div class="image-container" id="imageContainer"></div>
<button class="modal-button cancel-btn" id="closeBtn">بستن</button></div>
</div>
<!-- پنجره مودال برای توضیحات -->
<div id="myDescriptionModal" class="modal">
<div class="modal-content">
<p>ربات هوشمند برنامه <span style="color: #008080;">هوش مصنوعی</span></p>
<p>با قابلیت ساخت تصاویر در لحظه</p>
<p>و گفتگو پیشرفته</p>
<p>ساخت تصاویر این ربات از متن فارسی پشتیبانی می&zwnj;کند و شما می&zwnj;توانید به فارسی هر تصویری که خواستید را تولید کنید.</p>
<p>برای ساخت تصاویر روی سه نقطه داخل صفحه بزنید و گزینه دوم را انتخاب کنید.</p>
<p>در بعضی مواقع اگر تصاویر پشت سر هم تولید نشد یک بار دکمه Clear را کلیک کنید یا از صفحه خارج شوید دوباره وارد شوید.</p>
<button class="modal-button cancel-btn" id="closeDescriptionBtn">بستن</button></div>
</div>
<!-- پنجره مودال برای پرامپت‌ها -->
<div id="myPromptModal" class="modal">
<div class="modal-content">
<p>دسته&zwnj;بندی پرامپت&zwnj;ها</p>
<!-- دسته‌بندی‌های پرامپت -->
<div class="prompt-category" data-category="lighting">پرامپت&zwnj;های نورپردازی <span class="icon">💡</span></div>
<div class="prompt-category" data-category="special_lighting">پرامپت&zwnj;های خاص نورپردازی <span class="icon">✨</span></div>
<div class="prompt-category" data-category="details_quality">پرامپت&zwnj;های جزئیات و کیفیت <span class="icon">🔍</span></div>
<div class="prompt-category" data-category="punk">پرامپت&zwnj;های Punk <span class="icon">🎸</span></div>
<div class="prompt-category" data-category="landscape">پرامپت&zwnj;های منظره <span class="icon">🌄</span></div>
<div class="prompt-category" data-category="colors">پرامپت&zwnj;های رنگ <span class="icon">🎨</span></div>
<div class="prompt-category" data-category="artist_style">پرامپت&zwnj;های استایل هنرمندان <span class="icon">🖌️</span></div>
<div class="prompt-category" data-category="iranian_art_identity">پرامپت&zwnj;های هویت هنری ایرانی <span class="icon">🏺</span></div>
<div class="prompt-category" data-category="iranian_set_design">پرامپت&zwnj;های فضاسازی ایرانی <span class="icon">🏙️</span></div>
<button class="modal-button cancel-btn" id="closePromptBtn">بستن</button></div>
</div>
<!-- پنجره مودال برای لیست پرامپت‌ها -->
<div id="promptListModal" class="modal">
<div class="modal-content">
<p id="promptListTitle">پرامپت&zwnj;ها</p>
<div class="prompt-list" id="promptList"><!-- پرامپت‌ها به صورت داینامیک اضافه می‌شوند --></div>
<button class="modal-button cancel-btn" id="closePromptListBtn">بستن</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>
<script>
        function setVhVariable() {
            let vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', vh + 'px');
        }
        setVhVariable();
        window.addEventListener('resize', setVhVariable);

        const siteURL = 'https://cohereforai-aya-expanse.hf.space/';
        const excludeUrls = [
            'https://yanze-pulid.hf.space/--replicas/3t64n/file=/tmp/gradio/7567beceda2541f726af7beb4c9aa857b4a96b77/liuyifei.png',
            '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';
        }

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

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

        function handleDownload(event) {
            event.preventDefault();
            const iframe = document.getElementById('myIframe');
            const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

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

                let webpImages = [];
                images.forEach((img) => {
                    if (img.src.endsWith('.webp') && !excludeUrls.includes(img.src)) {
                        webpImages.push(img.src);
                    }
                });

                webpImages = webpImages.slice(0, 4);

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

                const imageContainer = document.getElementById('imageContainer');
                imageContainer.innerHTML = '';

                webpImages.forEach((imageUrl, index) => {
                    const imageItem = document.createElement('div');
                    imageItem.classList.add('image-item');
                    imageItem.style.marginBottom = '10px';
                    imageItem.innerHTML = `
                        <img src="${imageUrl}" alt="Image ${index + 1}" style="max-width: 100%; border-radius: 5px;">
                        <button onclick="downloadImage('${imageUrl}')" style="margin-top: 5px; padding: 5px 10px; border: none; border-radius: 5px; background-color: #4CAF50; color: white; cursor: pointer;">دانلود</button>
                    `;
                    imageContainer.appendChild(imageItem);
                });

                document.getElementById('myModal').style.display = 'block';

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

        function downloadImage(imageUrl) {
            if (confirm("برای دانلود تصویر روی تایید کلیک کنید و بعد از باز شدن مرورگر روی تصویر محکم نگهدارید و بارگیری تصویر را کلیک کنید.")) {
                window.open(imageUrl, '_blank');
            }
        }

        document.getElementById('downloadButton').addEventListener('click', handleDownload);

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

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

        window.addEventListener('click', function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
            if (event.target == descriptionModal) {
                descriptionModal.style.display = 'none';
            }
            if (event.target == promptModal) {
                promptModal.style.display = 'none';
            }
            if (event.target == promptListModal) {
                promptListModal.style.display = 'none';
            }
        });

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

        descriptionButton.addEventListener('click', function(event) {
            event.preventDefault();
            descriptionModal.style.display = 'block';
        });

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

        // برای مودال پرامپت‌ها
        const promptModal = document.getElementById('myPromptModal');
        const promptButton = document.getElementById('promptButton');
        const closePromptBtn = document.getElementById('closePromptBtn');

        promptButton.addEventListener('click', function(event) {
            event.preventDefault();
            promptModal.style.display = 'block';
        });

        closePromptBtn.addEventListener('click', function() {
            promptModal.style.display = 'none';
        });

        // پنجره لیست پرامپت‌ها
        const promptListModal = document.getElementById('promptListModal');
        const promptList = document.getElementById('promptList');
        const promptListTitle = document.getElementById('promptListTitle');
        const closePromptListBtn = document.getElementById('closePromptListBtn');

        const promptsData = {
            "lighting": [
                { "text": "Cinematic lighting", "translation": "نورپردازی سینمایی" },
                { "text": "Soft lighting", "translation": "نورپردازی نرم" },
                { "text": "Softbox lighting", "translation": "نورپردازی با سافت‌باکس" },
                { "text": "Bright lighting", "translation": "نورپردازی روشن" },
                { "text": "Ambient lighting", "translation": "نورپردازی محیطی" },
                { "text": "Silhouetted", "translation": "سایه‌دار" },
                { "text": "Flat lighting", "translation": "نورپردازی تخت" },
                { "text": "Backlit Volumetric lighting", "translation": "نورپردازی حجمی پس‌زمینه" }
            ],
            "special_lighting": [
                { "text": "Neon", "translation": "نئون" },
                { "text": "Holographic", "translation": "هولوگرافیک" },
                { "text": "Glow", "translation": "تابان" },
                { "text": "Bioluminescent", "translation": "زیست‌تاب" },
                { "text": "Rimlight", "translation": "نور حاشیه‌ای" },
                { "text": "Silhouetted", "translation": "سایه‌دار" }
            ],
            "details_quality": [
                { "text": "Ultra photoreal", "translation": "فوق‌العاده واقع‌گرایانه" },
                { "text": "Intricate details", "translation": "جزئیات پیچیده" },
                { "text": "Photorealistic", "translation": "فوتورئالیستی" },
                { "text": "Hyper detailed", "translation": "بسیار جزئیات‌دار" },
                { "text": "Ultra detailed", "translation": "فوق‌العاده جزئیات‌دار" },
                { "text": "Extremely detailed", "translation": "بسیار پرجزئیات" },
                { "text": "4K", "translation": "4K" },
                { "text": "8K", "translation": "8K" },
                { "text": "Super resolution", "translation": "وضوح فوق‌العاده" },
                { "text": "High resolution", "translation": "وضوح بالا" }
            ],
            "punk": [
                { "text": "Steampunk", "translation": "استیم‌پانک" },
                { "text": "Cloudpunk", "translation": "کلودپانک" },
                { "text": "Cyberpunk", "translation": "سایبرپانک" },
                { "text": "Forestpunk", "translation": "فورست‌پانک" },
                { "text": "Decopunk", "translation": "دکوپانک" },
                { "text": "Atompunk", "translation": "اتم‌پانک" },
                { "text": "Dieselpunk", "translation": "دیزل‌پانک" },
                { "text": "Biopunk", "translation": "بیوپانک" },
                { "text": "Dinopunk", "translation": "دینوپانک" },
                { "text": "Cassettepunk", "translation": "کاست‌پانک" },
                { "text": "Dollupunk", "translation": "دالاپانک" },
                { "text": "Catholicpunk", "translation": "کاتولیک‌پانک" },
                { "text": "Clockpunk", "translation": "کلاک‌پانک" }
            ],
            "landscape": [
                { "text": "Surreal landscape", "translation": "منظره سورئال" },
                { "text": "Unreal landscape", "translation": "منظره غیرواقعی" },
                { "text": "Fantasy landscape", "translation": "منظره فانتزی" },
                { "text": "Sci-fi landscape", "translation": "منظره علمی-تخیلی" },
                { "text": "Desert landscape", "translation": "منظره بیابانی" },
                { "text": "Tropical paradise", "translation": "بهشت گرمسیری" },
                { "text": "Rainforest scenery", "translation": "منظره جنگل بارانی" },
                { "text": "Expansive mountain range", "translation": "زنجیره کوهستانی گسترده" }
            ],
            "colors": [
                { "text": "Retro colors", "translation": "رنگ‌های رترو" },
                { "text": "Vivid colors", "translation": "رنگ‌های زنده" },
                { "text": "Pastel colors", "translation": "رنگ‌های پاستلی" },
                { "text": "Neon colors", "translation": "رنگ‌های نئونی" },
                { "text": "Earthy tones", "translation": "رنگ‌های خاکی" },
                { "text": "Primary colors", "translation": "رنگ‌های اصلی" },
                { "text": "Monochromatic colors", "translation": "رنگ‌های تک‌رنگ" },
                { "text": "Jewel tones", "translation": "رنگ‌های جواهری" }
            ],
            "artist_style": [
                { "text": "Leonardo da Vinci", "translation": "لئوناردو داوینچی" },
                { "text": "Michelangelo", "translation": "میکل‌آنجلو" },
                { "text": "Rembrandt", "translation": "رمبراندت" },
                { "text": "Vermeer", "translation": "ورمیر" },
                { "text": "Jean-Antoine Watteau", "translation": "ژان-آنتوان واتو" },
                { "text": "Eugene Delacroix", "translation": "اوژن دلاکروا" },
                { "text": "Claude Monet", "translation": "کلود مونه" },
                { "text": "Georges Seurat", "translation": "ژرژ سورا" },
                { "text": "Vincent van Gogh", "translation": "ونسان ون گوگ" },
                { "text": "Edvard Munch", "translation": "ادوارد مونک" },
                { "text": "Gustav Klimt", "translation": "گوستاو کلیمت" },
                { "text": "Pablo Picasso", "translation": "پابلو پیکاسو" },
                { "text": "Henri Matisse", "translation": "هانری ماتیس" },
                { "text": "Rene Magritte", "translation": "رنه ماگریت" },
                { "text": "Georgia O'Keeffe", "translation": "جورجیا اوکیف" },
                { "text": "Salvador Dalí", "translation": "سالوادور دالی" },
                { "text": "Edward Hopper", "translation": "ادوارد هاپر" },
                { "text": "Frida Kahlo", "translation": "فریدا کالو" },
                { "text": "Jackson Pollock", "translation": "جکسون پولاک" },
                { "text": "Andy Warhol", "translation": "اندی وارهول" }
            ],
            "iranian_art_identity": [
                { "text": "Persian Carpet Weaving", "translation": "قالی‌بافی ایرانی" },
                { "text": "Persian Tilework", "translation": "کاشی‌کاری ایرانی" },
                { "text": "Persian Miniature Painting", "translation": "نگارگری ایرانی" },
                { "text": "Persian Calligraphy", "translation": "خوشنویسی ایرانی" },
                { "text": "Traditional Textiles", "translation": "منسوجات سنتی" },
                { "text": "Woodcarving", "translation": "منبت‌کاری" },
                { "text": "Persian Embroidery", "translation": "گلدوزی ایرانی" },
                { "text": "Persian Mirrorwork", "translation": "آینه‌کاری ایرانی" },
                { "text": "Termeh Weaving", "translation": "بافت ترمه" },
                { "text": "Persian Jewelry", "translation": "جواهرسازی ایرانی" }
            ],
            "iranian_set_design": [
                { "text": "Tehran clothe", "translation": "لباس تهرانی" },
                { "text": "Tehran woman", "translation": "زن تهرانی" },
                { "text": "Tehran man", "translation": "مرد تهرانی" },
                { "text": "Modern Persian vibe", "translation": "حس و حال مدرن پارسی" },
                { "text": "Persian art", "translation": "هنر پارسی" },
                { "text": "Tehran atmosphere", "translation": "فضای تهران" },
                { "text": "Esfahan vibe", "translation": "حس و حال اصفهان" },
                { "text": "Qajar art", "translation": "هنر قاجار" },
                { "text": "Princess Qajar", "translation": "شاهزاده قاجار" },
                { "text": "Persian empire", "translation": "امپراتوری پارس" }
            ]
        };

        // باز کردن لیست پرامپت بر اساس دسته‌بندی
        document.querySelectorAll('.prompt-category').forEach(category => {
            category.addEventListener('click', function() {
                const categoryName = this.getAttribute('data-category');
                const prompts = promptsData[categoryName];
                if (prompts) {
                    promptList.innerHTML = '';
                    prompts.forEach(prompt => {
                        const promptElement = document.createElement('div');
                        promptElement.classList.add('prompt-item');
                        promptElement.innerHTML = `
                            <div class="prompt-text-container">
                                <div class="prompt-text">${prompt.text}</div>
                                <div class="persian-translation">${prompt.translation}</div>
                            </div>
                            <div class="copy-icon" title="کپی">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" fill="#555">
                                    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2z"/>
                                    <path d="M10 12h4v4h-4z"/>
                                </svg>
                            </div>
                        `;
                        // اضافه کردن قابلیت کپی کردن با کلیک بر روی متن
                        promptElement.querySelector('.prompt-text').addEventListener('click', function() {
                            copyText(prompt.text);
                        });
                        // اضافه کردن قابلیت کپی کردن با کلیک بر روی آیکون
                        promptElement.querySelector('.copy-icon').addEventListener('click', function() {
                            copyText(prompt.text);
                        });
                        promptList.appendChild(promptElement);
                    });
                    promptListTitle.innerText = this.innerText;
                    promptModal.style.display = 'none';
                    promptListModal.style.display = 'block';
                }
            });
        });

        // بستن مودال لیست پرامپت‌ها
        closePromptListBtn.addEventListener('click', function() {
            promptListModal.style.display = 'none';
        });

        function copyText(text) {
            navigator.clipboard.writeText(text).then(() => {
                alert("متن با موفقیت کپی شد: " + text);
            }).catch(err => {
                console.error("خطا در کپی کردن متن: ", err);
                alert("خطایی در کپی کردن متن رخ داد.");
            });
        }

        loadIframe();
        startProgress();
    </script>
</p> میتونی کاری کنی که وقتی دکمه اعلان p باز است و اعلان پرامت ها در واقع نشون داده میشه قتی کاربر دکمه برگشت رو می‌زنه اعلان بسته بشه و عقب نره این فقط زمانی کار کنه که دکمه اعلان بازه اگر کاربر دکمه ازگشت گوشی رو می‌زنه اعلان بسته بشه نه اینکه عقب بره کد کامل یکجا درست کن بفرست با تمام پرامپت ها همه چی

بله، می‌توانیم با استفاده از مدیریت تاریخچه مرورگر (History API) این قابلیت را پیاده‌سازی کنیم. به این صورت که زمانی که یکی از مودال‌های پرامپت باز می‌شود، یک وضعیت جدید به تاریخچه اضافه می‌شود. سپس با فشردن دکمه برگشت مرورگر، بررسی می‌کنیم که آیا مودالی باز است یا خیر و در صورت باز بودن، آن را ببندیم به جای اینکه به صفحه قبل برگردد.

در زیر کد کامل شما با تغییرات لازم برای پیاده‌سازی این رفتار آورده شده است:

```html
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>ربات هوشمند</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: calc(var(--vh, 1vh) * 100);
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            text-align: center; /* مرکزیت متن */
            direction: rtl; /* تنظیم جهت متن به راست به چپ */
        }

        .iframe-container {
            position: relative;
            width: 100%;
            height: calc(var(--vh, 1vh) * 100);
            overflow: hidden;
        }

        iframe {
            width: 100%;
            height: calc(100% + 1244px);
            border: none;
            display: none;
            position: relative;
            top: -529.13px;
        }

        .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;
            transition: background-color 0.3s;
        }

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

        /* دکمه‌ها */
        .button-container {
            position: fixed;
            top: 10px;
            left: 10px;
            display: flex;
            gap: 10px;
            z-index: 10001;
        }

        .download-button {
            position: fixed;
            top: 10px;
            right: 10px;
            color: white;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px 10px; /* کاهش پدینگ برای کوچکتر شدن */
            font-size: 11px; /* کاهش اندازه فونت */
            background-color: #4CAF50;
            width: 130px; /* تنظیم عرض مشابه دکمه توضیحات */
        }

        .description-button, .prompt-button {
            color: white;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
            text-decoration: none;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 6px 10px;
            font-size: 11px;
            background-color: rgb(84, 110, 122);
        }

        .description-button {
            width: 130px; /* تنظیم عرض */
        }

        .prompt-button {
            width: 30px; /* کاهش عرض به 30px */
            font-size: 14px; /* کاهش اندازه فونت */
            padding: 4px; /* کاهش پدینگ برای کوچک‌تر شدن دکمه */
        }

        .download-button:hover, .description-button:hover, .prompt-button:hover {
            filter: brightness(0.9);
        }

        /* مدال‌ها */
        .modal {
            display: none;
            position: fixed;
            z-index: 10002;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #888;
            width: 90%;
            max-width: 800px; /* حفظ حداکثر عرض اصلی */
            text-align: center;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .modal-button {
            margin-top: 20px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }

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

        .cancel-btn:hover {
            background-color: #d32f2f;
        }

        /* استایل‌های دسته‌بندی پرامپت‌ها */
        .prompt-category {
            background: #ffffff;
            padding: 12px 20px;
            margin: 10px auto;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            width: 80%;
            max-width: 300px; /* کاهش عرض برای کوچک‌تر شدن */
            border: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px; /* کاهش اندازه فونت */
            position: relative;
        }

        .prompt-category:hover {
            background-color: #f9f9f9;
            transform: translateY(-2px);
        }

        .prompt-category .icon {
            margin-left: 8px;
            font-size: 20px; /* کاهش اندازه آیکون */
            color: #3498db;
        }

        /* مودال لیست پرامپت‌ها */
        .prompt-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .prompt-item {
            background-color: #fff;
            padding: 8px 12px;
            margin: 5px 0;
            border-radius: 8px;
            transition: background-color 0.3s, box-shadow 0.3s;
            text-align: left;
            font-weight: bold;
            font-size: 14px;
            width: 100%;
            max-width: 400px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid #e0e0e0;
            position: relative;
        }

        .prompt-item:hover {
            background-color: #f0f0f0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .prompt-text-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: right;
        }

        .prompt-text {
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px;
        }

        .persian-translation {
            font-size: 14px;
            color: #555;
        }

        .copy-icon {
            cursor: pointer;
            font-size: 20px;
            color: #555;
            transition: color 0.3s;
            margin-left: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .copy-icon:hover {
            color: #000;
        }

        /* دکمه کوچک‌تر برای پرامپت‌ها */
        .prompt-button-small {
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.2s;
            font-size: 12px;
        }

        .prompt-button-small:hover {
            background-color: #2980b9;
            transform: scale(1.1);
        }

        /* تنظیم عرض مودال‌ها برای نمایش بهتر در صفحات کوچک */
        @media (max-width: 600px) {
            .modal-content {
                width: 95%;
            }

            .prompt-category {
                width: 95%;
            }

            .prompt-item {
                width: 95%;
            }

            .download-button {
                width: 100px; /* تنظیم عرض برای صفحات کوچک */
                font-size: 11px;
                padding: 6px 10px;
            }

            .description-button {
                width: 100px;
            }

            .prompt-text {
                font-size: 14px;
            }

            .persian-translation {
                font-size: 12px;
            }

            .copy-icon {
                font-size: 18px;
            }

            .prompt-button-small {
                width: 20px;
                height: 20px;
                font-size: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- دکمه‌ها -->
    <div class="button-container">
        <a href="#" class="description-button" id="descriptionButton">توضیحات</a> 
        <a href="#" class="prompt-button" id="promptButton">P</a>
    </div>
    <p>
        <a href="#" class="download-button" id="downloadButton">دانلود تصویر 📥</a>
    </p>
    <!-- پنجره مودال برای تصاویر -->
    <div id="myModal" class="modal">
        <div class="modal-content">
            <p>تصاویر شناسایی شده</p>
            <div class="image-container" id="imageContainer"></div>
            <button class="modal-button cancel-btn" id="closeBtn">بستن</button>
        </div>
    </div>
    <!-- پنجره مودال برای توضیحات -->
    <div id="myDescriptionModal" class="modal">
        <div class="modal-content">
            <p>ربات هوشمند برنامه <span style="color: #008080;">هوش مصنوعی</span></p>
            <p>با قابلیت ساخت تصاویر در لحظه</p>
            <p>و گفتگو پیشرفته</p>
            <p>ساخت تصاویر این ربات از متن فارسی پشتیبانی می‌کند و شما می‌توانید به فارسی هر تصویری که خواستید را تولید کنید.</p>
            <p>برای ساخت تصاویر روی سه نقطه داخل صفحه بزنید و گزینه دوم را انتخاب کنید.</p>
            <p>در بعضی مواقع اگر تصاویر پشت سر هم تولید نشد یک بار دکمه Clear را کلیک کنید یا از صفحه خارج شوید دوباره وارد شوید.</p>
            <button class="modal-button cancel-btn" id="closeDescriptionBtn">بستن</button>
        </div>
    </div>
    <!-- پنجره مودال برای پرامپت‌ها -->
    <div id="myPromptModal" class="modal">
        <div class="modal-content">
            <p>دسته‌بندی پرامپت‌ها</p>
            <!-- دسته‌بندی‌های پرامپت -->
            <div class="prompt-category" data-category="lighting">پرامپت‌های نورپردازی <span class="icon">💡</span></div>
            <div class="prompt-category" data-category="special_lighting">پرامپت‌های خاص نورپردازی <span class="icon">✨</span></div>
            <div class="prompt-category" data-category="details_quality">پرامپت‌های جزئیات و کیفیت <span class="icon">🔍</span></div>
            <div class="prompt-category" data-category="punk">پرامپت‌های Punk <span class="icon">🎸</span></div>
            <div class="prompt-category" data-category="landscape">پرامپت‌های منظره <span class="icon">🌄</span></div>
            <div class="prompt-category" data-category="colors">پرامپت‌های رنگ <span class="icon">🎨</span></div>
            <div class="prompt-category" data-category="artist_style">پرامپت‌های استایل هنرمندان <span class="icon">🖌️</span></div>
            <div class="prompt-category" data-category="iranian_art_identity">پرامپت‌های هویت هنری ایرانی <span class="icon">🏺</span></div>
            <div class="prompt-category" data-category="iranian_set_design">پرامپت‌های فضاسازی ایرانی <span class="icon">🏙️</span></div>
            <button class="modal-button cancel-btn" id="closePromptBtn">بستن</button>
        </div>
    </div>
    <!-- پنجره مودال برای لیست پرامپت‌ها -->
    <div id="promptListModal" class="modal">
        <div class="modal-content">
            <p id="promptListTitle">پرامپت‌ها</p>
            <div class="prompt-list" id="promptList"><!-- پرامپت‌ها به صورت داینامیک اضافه می‌شوند --></div>
            <button class="modal-button cancel-btn" id="closePromptListBtn">بستن</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>
    <script>
        function setVhVariable() {
            let vh = window.innerHeight * 0.01;
            document.documentElement.style.setProperty('--vh', vh + 'px');
        }
        setVhVariable();
        window.addEventListener('resize', setVhVariable);

        const siteURL = 'https://cohereforai-aya-expanse.hf.space/';
        const excludeUrls = [
            'https://yanze-pulid.hf.space/--replicas/3t64n/file=/tmp/gradio/7567beceda2541f726af7beb4c9aa857b4a96b77/liuyifei.png',
            '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';
        }

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

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

        function handleDownload(event) {
            event.preventDefault();
            const iframe = document.getElementById('myIframe');
            const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

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

                let webpImages = [];
                images.forEach((img) => {
                    if (img.src.endsWith('.webp') && !excludeUrls.includes(img.src)) {
                        webpImages.push(img.src);
                    }
                });

                webpImages = webpImages.slice(0, 4);

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

                const imageContainer = document.getElementById('imageContainer');
                imageContainer.innerHTML = '';

                webpImages.forEach((imageUrl, index) => {
                    const imageItem = document.createElement('div');
                    imageItem.classList.add('image-item');
                    imageItem.style.marginBottom = '10px';
                    imageItem.innerHTML = `
                        <img src="${imageUrl}" alt="Image ${index + 1}" style="max-width: 100%; border-radius: 5px;">
                        <button onclick="downloadImage('${imageUrl}')" style="margin-top: 5px; padding: 5px 10px; border: none; border-radius: 5px; background-color: #4CAF50; color: white; cursor: pointer;">دانلود</button>
                    `;
                    imageContainer.appendChild(imageItem);
                });

                document.getElementById('myModal').style.display = 'block';

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

        function downloadImage(imageUrl) {
            if (confirm("برای دانلود تصویر روی تایید کلیک کنید و بعد از باز شدن مرورگر روی تصویر محکم نگهدارید و بارگیری تصویر را کلیک کنید.")) {
                window.open(imageUrl, '_blank');
            }
        }

        document.getElementById('downloadButton').addEventListener('click', handleDownload);

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

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

        window.addEventListener('click', function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
            if (event.target == descriptionModal) {
                descriptionModal.style.display = 'none';
            }
            if (event.target == promptModal) {
                promptModal.style.display = 'none';
            }
            if (event.target == promptListModal) {
                promptListModal.style.display = 'none';
            }
        });

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

        descriptionButton.addEventListener('click', function(event) {
            event.preventDefault();
            descriptionModal.style.display = 'block';
            // Push state to history
            history.pushState({modal: 'descriptionModal'}, '');
        });

        closeDescriptionBtn.addEventListener('click', function() {
            descriptionModal.style.display = 'none';
            // Go back in history
            history.back();
        });

        // برای مودال پرامپت‌ها
        const promptModal = document.getElementById('myPromptModal');
        const promptButton = document.getElementById('promptButton');
        const closePromptBtn = document.getElementById('closePromptBtn');

        promptButton.addEventListener('click', function(event) {
            event.preventDefault();
            promptModal.style.display = 'block';
            // Push state to history
            history.pushState({modal: 'promptModal'}, '');
        });

        closePromptBtn.addEventListener('click', function() {
            promptModal.style.display = 'none';
            // Go back in history
            history.back();
        });

        // پنجره لیست پرامپت‌ها
        const promptListModal = document.getElementById('promptListModal');
        const promptList = document.getElementById('promptList');
        const promptListTitle = document.getElementById('promptListTitle');
        const closePromptListBtn = document.getElementById('closePromptListBtn');

        const promptsData = {
            "lighting": [
                { "text": "Cinematic lighting", "translation": "نورپردازی سینمایی" },
                { "text": "Soft lighting", "translation": "نورپردازی نرم" },
                { "text": "Softbox lighting", "translation": "نورپردازی با سافت‌باکس" },
                { "text": "Bright lighting", "translation": "نورپردازی روشن" },
                { "text": "Ambient lighting", "translation": "نورپردازی محیطی" },
                { "text": "Silhouetted", "translation": "سایه‌دار" },
                { "text": "Flat lighting", "translation": "نورپردازی تخت" },
                { "text": "Backlit Volumetric lighting", "translation": "نورپردازی حجمی پس‌زمینه" }
            ],
            "special_lighting": [
                { "text": "Neon", "translation": "نئون" },
                { "text": "Holographic", "translation": "هولوگرافیک" },
                { "text": "Glow", "translation": "تابان" },
                { "text": "Bioluminescent", "translation": "زیست‌تاب" },
                { "text": "Rimlight", "translation": "نور حاشیه‌ای" },
                { "text": "Silhouetted", "translation": "سایه‌دار" }
            ],
            "details_quality": [
                { "text": "Ultra photoreal", "translation": "فوق‌العاده واقع‌گرایانه" },
                { "text": "Intricate details", "translation": "جزئیات پیچیده" },
                { "text": "Photorealistic", "translation": "فوتورئالیستی" },
                { "text": "Hyper detailed", "translation": "بسیار جزئیات‌دار" },
                { "text": "Ultra detailed", "translation": "فوق‌العاده جزئیات‌دار" },
                { "text": "Extremely detailed", "translation": "بسیار پرجزئیات" },
                { "text": "4K", "translation": "4K" },
                { "text": "8K", "translation": "8K" },
                { "text": "Super resolution", "translation": "وضوح فوق‌العاده" },
                { "text": "High resolution", "translation": "وضوح بالا" }
            ],
            "punk": [
                { "text": "Steampunk", "translation": "استیم‌پانک" },
                { "text": "Cloudpunk", "translation": "کلودپانک" },
                { "text": "Cyberpunk", "translation": "سایبرپانک" },
                { "text": "Forestpunk", "translation": "فورست‌پانک" },
                { "text": "Decopunk", "translation": "دکوپانک" },
                { "text": "Atompunk", "translation": "اتم‌پانک" },
                { "text": "Dieselpunk", "translation": "دیزل‌پانک" },
                { "text": "Biopunk", "translation": "بیوپانک" },
                { "text": "Dinopunk", "translation": "دینوپانک" },
                { "text": "Cassettepunk", "translation": "کاست‌پانک" },
                { "text": "Dollupunk", "translation": "دالاپانک" },
                { "text": "Catholicpunk", "translation": "کاتولیک‌پانک" },
                { "text": "Clockpunk", "translation": "کلاک‌پانک" }
            ],
            "landscape": [
                { "text": "Surreal landscape", "translation": "منظره سورئال" },
                { "text": "Unreal landscape", "translation": "منظره غیرواقعی" },
                { "text": "Fantasy landscape", "translation": "منظره فانتزی" },
                { "text": "Sci-fi landscape", "translation": "منظره علمی-تخیلی" },
                { "text": "Desert landscape", "translation": "منظره بیابانی" },
                { "text": "Tropical paradise", "translation": "بهشت گرمسیری" },
                { "text": "Rainforest scenery", "translation": "منظره جنگل بارانی" },
                { "text": "Expansive mountain range", "translation": "زنجیره کوهستانی گسترده" }
            ],
            "colors": [
                { "text": "Retro colors", "translation": "رنگ‌های رترو" },
                { "text": "Vivid colors", "translation": "رنگ‌های زنده" },
                { "text": "Pastel colors", "translation": "رنگ‌های پاستلی" },
                { "text": "Neon colors", "translation": "رنگ‌های نئونی" },
                { "text": "Earthy tones", "translation": "رنگ‌های خاکی" },
                { "text": "Primary colors", "translation": "رنگ‌های اصلی" },
                { "text": "Monochromatic colors", "translation": "رنگ‌های تک‌رنگ" },
                { "text": "Jewel tones", "translation": "رنگ‌های جواهری" }
            ],
            "artist_style": [
                { "text": "Leonardo da Vinci", "translation": "لئوناردو داوینچی" },
                { "text": "Michelangelo", "translation": "میکل‌آنجلو" },
                { "text": "Rembrandt", "translation": "رمبراندت" },
                { "text": "Vermeer", "translation": "ورمیر" },
                { "text": "Jean-Antoine Watteau", "translation": "ژان-آنتوان واتو" },
                { "text": "Eugene Delacroix", "translation": "اوژن دلاکروا" },
                { "text": "Claude Monet", "translation": "کلود مونه" },
                { "text": "Georges Seurat", "translation": "ژرژ سورا" },
                { "text": "Vincent van Gogh", "translation": "ونسان ون گوگ" },
                { "text": "Edvard Munch", "translation": "ادوارد مونک" },
                { "text": "Gustav Klimt", "translation": "گوستاو کلیمت" },
                { "text": "Pablo Picasso", "translation": "پابلو پیکاسو" },
                { "text": "Henri Matisse", "translation": "هانری ماتیس" },
                { "text": "Rene Magritte", "translation": "رنه ماگریت" },
                { "text": "Georgia O'Keeffe", "translation": "جورجیا اوکیف" },
                { "text": "Salvador Dalí", "translation": "سالوادور دالی" },
                { "text": "Edward Hopper", "translation": "ادوارد هاپر" },
                { "text": "Frida Kahlo", "translation": "فریدا کالو" },
                { "text": "Jackson Pollock", "translation": "جکسون پولاک" },
                { "text": "Andy Warhol", "translation": "اندی وارهول" }
            ],
            "iranian_art_identity": [
                { "text": "Persian Carpet Weaving", "translation": "قالی‌بافی ایرانی" },
                { "text": "Persian Tilework", "translation": "کاشی‌کاری ایرانی" },
                { "text": "Persian Miniature Painting", "translation": "نگارگری ایرانی" },
                { "text": "Persian Calligraphy", "translation": "خوشنویسی ایرانی" },
                { "text": "Traditional Textiles", "translation": "منسوجات سنتی" },
                { "text": "Woodcarving", "translation": "منبت‌کاری" },
                { "text": "Persian Embroidery", "translation": "گلدوزی ایرانی" },
                { "text": "Persian Mirrorwork", "translation": "آینه‌کاری ایرانی" },
                { "text": "Termeh Weaving", "translation": "بافت ترمه" },
                { "text": "Persian Jewelry", "translation": "جواهرسازی ایرانی" }
            ],
            "iranian_set_design": [
                { "text": "Tehran clothe", "translation": "لباس تهرانی" },
                { "text": "Tehran woman", "translation": "زن تهرانی" },
                { "text": "Tehran man", "translation": "مرد تهرانی" },
                { "text": "Modern Persian vibe", "translation": "حس و حال مدرن پارسی" },
                { "text": "Persian art", "translation": "هنر پارسی" },
                { "text": "Tehran atmosphere", "translation": "فضای تهران" },
                { "text": "Esfahan vibe", "translation": "حس و حال اصفهان" },
                { "text": "Qajar art", "translation": "هنر قاجار" },
                { "text": "Princess Qajar", "translation": "شاهزاده قاجار" },
                { "text": "Persian empire", "translation": "امپراتوری پارس" }
            ]
        };

        // باز کردن لیست پرامپت بر اساس دسته‌بندی
        document.querySelectorAll('.prompt-category').forEach(category => {
            category.addEventListener('click', function() {
                const categoryName = this.getAttribute('data-category');
                const prompts = promptsData[categoryName];
                if (prompts) {
                    promptList.innerHTML = '';
                    prompts.forEach(prompt => {
                        const promptElement = document.createElement('div');
                        promptElement.classList.add('prompt-item');
                        promptElement.innerHTML = `
                            <div class="prompt-text-container">
                                <div class="prompt-text">${prompt.text}</div>
                                <div class="persian-translation">${prompt.translation}</div>
                            </div>
                            <div class="copy-icon" title="کپی">
                                <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" fill="#555">
                                    <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2z"/>
                                    <path d="M10 12h4v4h-4z"/>
                                </svg>
                            </div>
                        `;
                        // اضافه کردن قابلیت کپی کردن با کلیک بر روی متن
                        promptElement.querySelector('.prompt-text').addEventListener('click', function() {
                            copyText(prompt.text);
                        });
                        // اضافه کردن قابلیت کپی کردن با کلیک بر روی آیکون
                        promptElement.querySelector('.copy-icon').addEventListener('click', function() {
                            copyText(prompt.text);
                        });
                        promptList.appendChild(promptElement);
                    });
                    promptListTitle.innerText = this.innerText;
                    promptModal.style.display = 'none';
                    promptListModal.style.display = 'block';
                    // Push state to history
                    history.pushState({modal: 'promptListModal'}, '');
                }
            });
        });

        // بستن مودال لیست پرامپت‌ها
        closePromptListBtn.addEventListener('click', function() {
            promptListModal.style.display = 'none';
            // Go back in history
            history.back();
        });

        function copyText(text) {
            navigator.clipboard.writeText(text).then(() => {
                alert("متن با موفقیت کپی شد: " + text);
            }).catch(err => {
                console.error("خطا در کپی کردن متن: ", err);
                alert("خطایی در کپی کردن متن رخ داد.");
            });
        }

        // مدیریت دکمه برگشت مرورگر
        window.addEventListener('popstate', function(event) {
            if (promptListModal.style.display === 'block') {
                promptListModal.style.display = 'none';
            } else if (promptModal.style.display === 'block') {
                promptModal.style.display = 'none';
            } else if (descriptionModal.style.display === 'block') {
                descriptionModal.style.display = 'none';
            }
            // اگر مودال دیگری باز بود، می‌توانید آن را نیز مدیریت کنید
        });

        loadIframe();
        startProgress();
    </script>
</body>
</html>
```

### توضیحات تغییرات:

1. **استفاده از History API:**
   - هنگام باز کردن هر یک از مودال‌های `descriptionModal`, `promptModal` و `promptListModal`, یک وضعیت جدید به تاریخچه مرورگر اضافه شده است با استفاده از `history.pushState`.
   - هنگام بستن هر یک از مودال‌ها با کلیک روی دکمه‌های بستن، به وضعیت قبل در تاریخچه بازگشت داده شده است با استفاده از `history.back()`.

2. **مدیریت دکمه برگشت مرورگر:**
   - یک شنونده برای رویداد `popstate` اضافه شده است تا زمانی که کاربر دکمه برگشت را فشار می‌دهد، بررسی کند که کدام مودال باز است و آن را ببندد به جای اینکه به صفحه قبل برگردد.
   - این امکان را می‌دهد که تنها زمانی که یکی از مودال‌های پرامپت باز است، دکمه برگشت مودال بسته شود و در غیر این صورت، دکمه برگشت به صورت عادی عمل کند.

3. **باز و بستن مودال‌ها:**
   - هر کدام از دکمه‌های باز و بستن مودال‌ها (مثلاً دکمه پرامپت و دکمه بستن مودال) به گونه‌ای تنظیم شده‌اند که هنگام باز شدن یک مودال، وضعیت جدید به تاریخچه اضافه شود و هنگام بستن مودال، به وضعیت قبل بازگردد.

4. **کاهش محتوای CSS و HTML در نیازمندی‌های اولیه:**
   - کد اصلی شما حفظ شده و تنها تغییرات مربوط به مدیریت تاریخچه و باز و بستن مودال‌ها اضافه شده است.

### نکات مهم:
- **تست در محیط‌های مختلف:** پیشنهاد می‌شود این کد را در دستگاه‌ها و مرورگرهای مختلف تست کنید تا از عملکرد صحیح آن اطمینان حاصل کنید.
- **افزودن سایر مودال‌ها:** اگر مودال‌های دیگری نیز وجود دارند که نیاز به همین رفتار دارند، باید مشابه همین روش برای آنها هم اعمال شود.
- **توجه به تاریخچه مرورگر:** مطمئن شوید که تاریخچه مرورگر به طور ناخواسته پر نشود و تعداد زیادی وضعیت اضافه نشود که ممکن است تجربه کاربری را تحت تأثیر قرار دهد.

با این تغییرات، زمانی که یکی از مودال‌های پرامپت باز است، فشردن دکمه برگشت مرورگر مودال را می‌بندد به جای بازگشت به صفحه قبلی.

From the following list, identify the index that contains only Persian characters and select the one that is more suitable based on content or length. The output should only be the numerical index.

List:
['"<i class=\\"fa fa-2x fa-ticket\\" style=\\"color: rgb(36, 37, 48) "\n"!important;\\"/>\u200b"', '"<i class=\\"fa fa-2x fa-ticket\\" style=\\"color: rgb(36, 37, 48) "\n"!important;\\"/>\u200b"', '"<i class=\\"fa fa-2x fa-ticket\\" style=\\"color: rgb(36, 37, 48) "\n"!important;\\"/>\u200b"']

The given list contains HTML code snippets rather than Persian text, which are identical. Therefore, no index contains only Persian characters. However, if there were a requirement related to selecting based on content or length, all entries are identical; therefore, any of their indices can be chosen, such as 0, 1, or 2. If you have Persian text and need a similar analysis, please provide the correct text for further assistance.

Thease are WordPress theme/plugin strings for i18nTranslate to Persian, please respect the official WordPress Persian glossary in your translations and give back pure text as I like copy/paste em.Here is the text to translate: Make the corners of the image rounded.

گوشه‌های تصویر را گرد کنید.

If someone says “I don’t hate him, he had some good songs“ but someone else believes this person meant “all of his songs are good “ is this a contextual belief

Yes, this situation involves contextual beliefs and interpretations. The original statement, "I don’t hate him, he had some good songs," suggests that while the speaker doesn't have strong negative feelings toward the artist, they only acknowledge that some of the artist's songs are good. The phrase "some good songs" implies that not all of the songs are necessarily good according to the speaker's opinion.

However, the second person's belief that the speaker meant “all of his songs are good” reflects an interpretation of the original statement that goes beyond what was explicitly stated. This interpretation might arise from the context in which the conversation is happening or from the second person’s assumptions or biases.

Thus, this is a classic example of how context and personal beliefs can lead people to understand and interpret statements differently. Misunderstandings or disagreements can arise when individuals project their assumptions onto others’ words without considering the precise language used or the speaker’s intent.

But the person said it’s just how this person talks 

If someone says "it's just how this person talks," they might be indicating that the person often speaks in a way that's either indirect or uses certain patterns or expressions that might be interpreted differently by various listeners. This suggests that there might be nuances in their communication style that lead to different interpretations.

In this case, if the speaker typically makes understated comments or uses phrases like "some good songs" in a manner that others understand to generally praise the person’s overall work, then the interpretation becomes more about familiarity with the speaker's usual manner of speaking. It highlights the importance of context and an understanding of personal communication styles in interpreting meaning.

Therefore, someone familiar with the speaker might infer a more generous interpretation of their words, knowing that this is how the speaker tends to express approval indirectly or casually. This reinforces the idea that understanding meaning often requires taking into account not just the words used, but also the speaker's typical way of communicating and any shared history or context.

System: I will provide you with a textual user review of an Android app, aiming to categorize the reviews into specific intention classes:
pbr: state a concrete problem related to a software product or service
inq: asks for either new functionality, an improvement, or requests information for support
irr: it does not belong to problem reports or inquires
User: 'prompt:I will provide you with a textual user review of an Android app, aiming to categorize the reviews into specific intention classes:
pbr: state a concrete problem related to a software product or service
inq: asks for either new functionality, an improvement, or requests information for support
irr: it does not belong to problem reports or inquires
Does the author's intention in this app review relate to a pbr or inq or irr?
review: Heidi from your Los Angeles (Valley) office deserves some major recognition! It took me 3 reps to finally get the support I needed. She was beyond helpful! One of the best customer service experiences I have had. Thank you Heidi!!!'
intention: '
Assistant:

irr

I will give you a content, according to SEO rules for a post on the WordPress site, write a title and content related to the content I give you.
I will give you a content, write a prompt about it for image generator artificial intelligence
Only describe the things related to their appearance, not, for example, how much are the necessary ingredients in the food or anything, and... 
Don't pay attention to the necessary ingredients, just describe the appearance of the result and the food or dessert you want to cook
Put correct or incorrect in the is_subject field  
1 or 0
Return 1 if the content was about cooking and 0 if it was not about cooking
My content:
 🧑🏻‍🍳این دفعه اینجوری پیراشکی درست کن، برای عصرونه عالیه 

مواد لازم 

شیر ولرم 100 گرم
آب ولرم 100 گرم
سفیده تخم مرغ 1 عدد
روغن 80 گرم
خمیر مایه فوری 1 ق غ
نمک 1/4 ق چ
شکر 1 ق غ
آرد 500 گرم
شکلات صبحانه 

من چون با شکلات سرو کردم کم شیرین درست کردم میتونید شکر رو دو برابر کنید. 
دمای شیر و آب حدودا 40 درجه باشه. 
مواد اولیه به دمای محیط رسیده باشه.
خمیر مایه اگه فعال نباشه خمیرتون حجمش دو برابر نمیشه و خمیر مایه خرابه. (محل نگهداری خمیر مایه در یخچال هست)
روغن رو با حرارت کم بزارید تا داغ بشه بعد پیراشکی هارو سرخ کنید.

Give me the output as a python dictionary or json (in your response, only json and not any other characters):
{
    "title": "Title created by you",
    "content": "Content created by you",
    "prompt": "Prompt created by you",
    "is_subject": "is_subject",
}

replace new lines with 

return the title and content as persian
return the prompt as english
And use Html tags in text for better post
Content must be at least 200 words
The result you return must be json decodeable for example: {"title": "title", "content": "content", "prompt": "prompt"}

```json
{
    "title": "طرز تهیه پیراشکی شکلاتی خانگی برای عصرانه",
    "content": "<p>🧑🏻‍🍳 اگر به دنبال یک عصرانه دلچسب و خاص هستید، پیراشکی شکلاتی خانگی بهترین انتخاب است. مواد لازم برای تهیه این پیراشکی شامل شیر ولرم، آب ولرم، سفیده تخم مرغ، روغن، خمیر مایه فوری، شکر و آرد است. ابتدا شیر و آب را به دمای حدود 40 درجه سانتیگراد برسانید و مواد اولیه را از قبل به دمای محیط برسانید. خمیر مایه به خوبی فعال شود تا خمیر حجیم شود. در صورتی که خمیر مایه فعال نیست، خمیر حجم نمی‌گیرد و این نشانه‌ای از خرابی آن است؛ بهتر است خمیر مایه در یخچال نگهداری شود.</p><p>برای تهیه پیراشکی، روغن را روی حرارت کم قرار دهید تا گرم شود و سپس اقدام به سرخ کردن پیراشکی‌ها کنید. اگر دوست دارید می‌توانید میزان شکر را دو برابر کنید تا شیرین‌تر شود. این پیراشکی‌ها با شکلات صبحانه سرو می‌شوند که طعمی دلپذیر و خاص به آن‌ها می‌بخشد.</p><p>با پیروی از این طرز تهیه، می‌توانید در عرض کمتر از یک ساعت، پیراشکی‌های شکلاتی خوشمزه و خانگی آماده کنید و آن‌ها را میان وعده‌ای دلچسب برای خود و خانواده‌تان قرار دهید. فراموش نکنید برای زیباتر شدن ظاهر پیراشکی‌ها، آن‌ها را با دقت در اندازه‌های یکسان برش دهید و سرخ کنید. این پیراشکی‌های نرم و غنا به عنوان یک عصرانه لذیذ و خاطره‌انگیز، خاطره‌ساز لحظات زیبایتان خواهد شد.</p>",
    "prompt": "A delicious-looking chocolate-filled pastry with a golden-brown, crispy exterior. The pastry is round and perfectly fried, with a slightly shiny surface from a light glaze. Serve the pastry on a small elegant plate, possibly with chocolate sauce drizzled over the top, and a hint of powdered sugar for a finished look.",
    "is_subject": "1"
}
```

From the following list, identify the index that contains only Persian characters and select the one that is more suitable based on content or length. The output should only be the numerical index.

List:
['"<i class=\\"fa fa-2x fa-ticket\\" style=\\"color: rgb(36, 37, 48) "\n"!important;\\"/>\u200b"', '"<i class=\\"fa fa-2x fa-ticket\\" style=\\"color: rgb(36, 37, 48) "\n"!important;\\"/>\u200b"', '"<i class=\\"fa fa-2x fa-ticket\\" style=\\"color: rgb(36, 37, 48) "\n"!important;\\"/>\u200b"']

There don't appear to be any strings in your list that contain only Persian characters, as the strings provided are HTML fragments with no Persian script present. Please double-check the list to ensure there is Persian text if you intended to include any.

Ты — эксперт по играм. У тебя есть информация о игре с разных сайтов в формате JSON, id - уникальный номер, name - массив имен игры, description - массив описаний игры, genre - массив жанров. Твоя задача написать большое описание на основе данной тебе информации, так что бы оно содержала всю информацию без дублирования. ```{"_id":"1","name":["игра гача лайф: страшилки"],"description":["детальная настройка персонажа в игре гача лайф: страшилки поможет тебе получить в результате желаемый образ. герои данной забавы не всегда бывают милыми и добрыми. геймер может придумать хоррор-историю с вампирами или демонами, чёртиками и зомби-монстрами, и создать участника своего сюжета в соответствующем облике. прояви фантазию, и не ограничивай её шаблонным набором нарядов.,в большинстве гача-мейкеров имеется расширенная панель инструментов, где игрок может сделать аватар по своему усмотрению. предлагаем игру, в которой легко создать персонажа для страшных приключений. в ассортименте есть рожки и вампирские клыки, а также множество вариаций аксессуаров и деталей на тему хоррора. играть несложно: переключайся между вкладками и подбирай подходящие элементы.,многие фрагменты имеют дополнительно палитру цветов. если хочешь именно эту деталь, но другого оттенка, просто отыщи его в цветовой гамме приложения. результат своего творчества можно сохранить в память компьютера в формате картинки. помимо креатора, геймплей гача лайф: страшилки предусматривает и альбом готовых образов, в которых ты можешь найти интересные идеи для воплощения."],"genre":["гача лайф"]}```

"Гача лайф: Страшилки" — это игра, в которой у вас есть возможность проявить творческие способности и создать уникальных персонажей для разнообразных страшных историй. В этой игре предоставляется детальная настройка персонажа, что позволит вам добиться желаемого образа и создать героев, которые не всегда выглядят мило и добродушно. Вы можете придумать свои хоррор-истории, включающие вампиров, демонов, темных существ и зомби-монстров, и оформить персонажей в соответствующих стилях.

Игра предлагает расширенную панель инструментов гача-мейкера, где игроки могут настроить аватары по своему усмотрению. Вы можете выбрать разнообразные элементы, такие как рожки, вампирские клыки и различные аксессуары, связанные с темой ужаса. Все элементы легко подобрать с помощью переключения между вкладками.

Особенным элементом игры является возможность настройки цвета. Если вам нравится какая-то деталь, но не устраивает её оттенок, вы можете выбрать нужный цвет из палитры, доступной в приложении. Таким образом, ваше творчество может быть бесконечно разнообразным. После завершения разработки вашего персонажа, результат можно сохранить в виде изображения на компьютере.

Помимо функции создания персонажей, игра также предлагает альбом готовых образов. Это может стать источником вдохновения и новых идей для ваших приключений в мире Гача лайф: Страшилки. Жанр игры относится к "Гача лайф", и она предлагает уникальный пользовательский опыт в создании и наслаждении страшными тематическими элементами.

        Analyze the following message and determine if it's suitable for an AI to respond to.
        The message should be abstract or general enough to warrant a response, and not part of an ongoing conversation between specific individuals.

        Rules:
        1. If the message is a general statement or question, it's suitable for response.
        2. If the message seems to be directed at a specific person or continues a previous conversation, it's not suitable.
        3. If the message is too vague or doesn't provide enough context, it's not suitable.

        Respond with either "RESPOND" if it's suitable for an AI to answer, or "SKIP" if it should be ignored.

        Message: so sad and tired during these days
        

SKIP