Update app.py

app.py

@@ -236,103 +236,14 @@ def infer_example(input_image, prompt, lora_adapter):
     res, s, status = infer(input_image, prompt, lora_adapter, 0, True, 1.0, 4, "خودکار (پیش‌فرض)", 1024, 1024)
     return res, s, status
 
-# --- جاوااسکریپت (اصلاح شده و قدرتمند) ---
-js_code = """
-<script>
-// تابع فورس کردن تم روشن
-function forceLightMode() {
-    const body = document.querySelector('body');
-    if (body) {
-        body.classList.remove('dark');
-        body.style.backgroundColor = '#f5f7fa';
-        body.style.color = '#333333';
-    }
-    document.querySelectorAll('.dark').forEach(el => el.classList.remove('dark'));
-}
-
-// تابع بستن مودال
-function closeQuotaModal() {
-    const modal = document.getElementById('custom-quota-modal');
-    if (modal) modal.style.display = 'none';
-    
-    // حذف پیام‌های خطا از صفحه تا دوباره نمایش داده نشوند
-    document.querySelectorAll('.toast-wrap').forEach(el => {
-        if (el.innerText.includes('GPU quota')) el.remove();
-    });
-}
-
-// آبزرور قدرتمند برای شکار و جایگزینی خطا
-const observer = new MutationObserver((mutations) => {
-    let quotaErrorFound = false;
-    
-    // جستجو در تمام المان‌های اضافه شده
-    mutations.forEach((mutation) => {
-        mutation.addedNodes.forEach((node) => {
-            if (node.nodeType === 1) { // Element node
-                const text = node.innerText || node.textContent;
-                // بررسی متن‌های مربوط به Quota
-                if (text && (text.includes('exceeded your GPU quota') || text.includes('GPU quota'))) {
-                    // مخفی کردن المان اصلی
-                    node.style.display = 'none';
-                    node.style.visibility = 'hidden';
-                    node.style.opacity = '0';
-                    quotaErrorFound = true;
-                }
-            }
-        });
-    });
-
-    // بررسی المان‌های موجود (برای اطمینان)
-    document.querySelectorAll('.toast-wrap, .error').forEach(el => {
-        if (el.innerText.includes('GPU quota')) {
-            el.style.display = 'none';
-            quotaErrorFound = true;
-        }
-    });
-
-    if (quotaErrorFound) {
-        const modal = document.getElementById('custom-quota-modal');
-        if (modal && modal.style.display !== 'flex') {
-            modal.style.display = 'flex';
-        }
-    }
-});
-
-document.addEventListener('DOMContentLoaded', () => {
-    forceLightMode();
-    setInterval(forceLightMode, 1000);
-    
-    // شروع مانیتور کردن
-    observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-        characterData: true
-    });
-});
-</script>
-"""
-
-# جاوااسکریپت دانلود
-js_dl = """
-async (image) => {
-    if (!image) { alert("لطفاً ابتدا تصویر را تولید کنید."); return; }
-    let fileUrl = image.url;
-    if (fileUrl && !fileUrl.startsWith('http')) {
-       fileUrl = window.location.origin + fileUrl;
-    } else if (!fileUrl && image.path) {
-       fileUrl = window.location.origin + "/file=" + image.path;
-    }
-    console.log("Sending download request for:", fileUrl);
-    window.parent.postMessage({ type: 'DOWNLOAD_REQUEST', url: fileUrl }, '*');
-}
-"""
+# --- جاوااسکریپت و HTML ---
+# در اینجا از setInterval برای بررسی مداوم وجود پیام خطا استفاده می‌کنیم
+# و به محض پیدا شدن، آن را مخفی و مودال خودمان را نشان می‌دهیم.
 
-# --- تنظیمات HTML و CSS ---
-html_code = """
+html_js_modal_code = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
 
-/* تنظیمات کلی */
 :root, .dark, body, .gradio-container {
     --body-background-fill: #f5f7fa !important;
     --body-text-color: #1f2937 !important;
@@ -353,94 +264,59 @@ body {
     padding: 10px;
 }
 
-/* استایل مودال سفارشی */
+/* استایل مودال خطای سفارشی - طراحی شده برای دیده شدن قطعی */
 #custom-quota-modal {
+    display: none; /* پیش‌فرض مخفی */
     position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.85); /* تیره‌تر برای تمرکز بیشتر */
-    backdrop-filter: blur(8px);
     z-index: 2147483647; /* بالاترین لایه ممکن */
-    display: none;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.8);
+    backdrop-filter: blur(5px);
     justify-content: center;
     align-items: center;
     direction: rtl;
 }
 
 .quota-modal-content {
-    background-color: white;
-    padding: 40px;
-    border-radius: 24px;
-    width: 90%;
-    max-width: 450px;
+    background-color: #fefefe;
+    margin: auto;
+    padding: 30px;
+    border: 1px solid #888;
+    width: 85%;
+    max-width: 400px;
+    border-radius: 20px;
     text-align: center;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
-    animation: slideIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    border: 1px solid rgba(255,255,255,0.2);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
+    position: relative;
+    animation: animatetop 0.4s;
 }
 
-.quota-icon {
-    font-size: 72px;
-    margin-bottom: 25px;
-    display: block;
-    animation: float 3s ease-in-out infinite;
-}
-
-.quota-title {
-    font-size: 1.6em;
-    font-weight: 900;
-    color: #e11d48;
-    margin-bottom: 15px;
-}
-
-.quota-text {
-    font-size: 1.15em;
-    color: #374151;
-    line-height: 1.8;
-    margin-bottom: 30px;
+@keyframes animatetop {
+    from {top: -300px; opacity: 0}
+    to {top: 0; opacity: 1}
 }
 
+.quota-icon { font-size: 50px; display: block; margin-bottom: 15px; }
+.quota-title { font-size: 22px; font-weight: bold; color: #e11d48; margin-bottom: 10px; }
+.quota-text { font-size: 16px; color: #333; margin-bottom: 25px; line-height: 1.6; }
 .quota-btn {
-    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
+    background-color: #e11d48;
     color: white;
+    padding: 12px 24px;
     border: none;
-    padding: 14px 35px;
-    border-radius: 14px;
-    font-weight: bold;
-    font-family: 'Vazirmatn', sans-serif;
-    font-size: 1.1em;
+    border-radius: 10px;
     cursor: pointer;
-    box-shadow: 0 4px 15px rgba(225, 29, 72, 0.4);
-    transition: transform 0.2s;
+    font-size: 16px;
+    font-family: 'Vazirmatn', sans-serif;
     width: 100%;
 }
+.quota-btn:hover { background-color: #be123c; }
 
-.quota-btn:hover {
-    transform: scale(1.02);
-}
-
-@keyframes slideIn {
-    from { opacity: 0; transform: translateY(30px) scale(0.9); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-@keyframes float {
-    0% { transform: translateY(0px); }
-    50% { transform: translateY(-10px); }
-    100% { transform: translateY(0px); }
-}
-
-/* مخفی کردن پیام‌های خطای پیش‌فرض Gradio */
-.toast-wrap, .toast-error, .error {
-    display: none !important;
-    opacity: 0 !important;
-    visibility: hidden !important;
-    pointer-events: none !important;
-}
-
-/* سایر استایل‌ها */
+/* استایل سایر اجزا */
 #col-container {
     margin: 0 auto;
     max-width: 980px;
@@ -453,53 +329,7 @@ body {
     border: 1px solid rgba(255,255,255,0.8);
 }
 
-#main-title h1 {
-    font-size: 2.4em !important;
-    text-align: center;
-    color: #1a202c !important;
-    margin-bottom: 15px;
-    font-weight: 800;
-    background: -webkit-linear-gradient(45deg, #2563eb, #1e40af);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
-#main-description {
-    text-align: center;
-    font-size: 1.15em;
-    color: #4b5563 !important;
-    margin-bottom: 40px;
-    line-height: 1.6;
-}
-
-.gr-input-label, span.label-wrap, label span {
-    font-weight: 700 !important;
-    color: #374151 !important;
-    font-size: 0.95em !important;
-    margin-bottom: 8px !important;
-}
-
-textarea, input[type="text"] {
-    border: 2px solid #e2e8f0 !important;
-    border-radius: 12px !important;
-    background-color: #ffffff !important;
-    color: #111827 !important;
-    padding: 12px !important;
-    font-family: 'Vazirmatn', sans-serif !important;
-}
-
-textarea:focus, input[type="text"]:focus {
-    border-color: #3b82f6 !important;
-    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
-    outline: none;
-}
-
-.gr-dropdown {
-    background: #ffffff !important;
-    border-radius: 12px !important;
-}
-
-.primary-btn, button.primary {
+.primary-btn {
     background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
     border: none !important;
     color: white !important;
@@ -507,91 +337,101 @@ textarea:focus, input[type="text"]:focus {
     font-size: 1.1em !important;
     padding: 14px 28px !important;
     border-radius: 14px !important;
-    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    cursor: pointer !important;
-    width: 100%;
-    margin-top: 15px;
-}
-
-.primary-btn:hover, button.primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
-}
-
-#download-btn {
-    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
-    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
-}
-#download-btn:hover {
-    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.45) !important;
-}
-
-.gradio-container .prose table, 
-.gradio-container table {
-    background-color: #ffffff !important;
-    color: #111827 !important;
-    border: 1px solid #e5e7eb !important;
-    border-radius: 12px !important;
-    overflow: hidden !important;
-    width: 100% !important;
-    margin-top: 20px !important;
 }
 
-.gradio-container thead th {
-    background-color: #f3f4f6 !important;
-    color: #374151 !important;
-    font-weight: 700 !important;
-    border-bottom: 2px solid #e5e7eb !important;
-    padding: 12px !important;
-    text-align: right !important;
-}
-
-.gradio-container tbody tr {
-    background-color: #ffffff !important;
-    border-bottom: 1px solid #f3f4f6 !important;
-}
-
-.gradio-container tbody tr:hover {
-    background-color: #f9fafb !important;
-}
-
-.gradio-container tbody td {
-    background-color: #ffffff !important;
-    color: #374151 !important;
-    padding: 10px !important;
-}
-
-footer { display: none !important; }
-.flagging { display: none !important; }
-
-@media (prefers-color-scheme: dark) {
-    body, .gradio-container, .prose, table, tr, td, th {
-        background-color: #ffffff !important;
-        color: #333333 !important;
-    }
+/* مخفی کردن شدید پیام‌های خطای پیش‌فرض گرادیو */
+.toast-wrap, .toast-error, .error, .toast {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
 }
 </style>
-"""
 
-modal_html = """
+<!-- کد HTML مودال -->
 <div id="custom-quota-modal">
-    <div class="quota-modal-content">
-        <span class="quota-icon">✈️</span>
-        <div class="quota-title">محدودیت استفاده</div>
-        <div class="quota-text">
-            سهمیه استفاده از گرافیک پر شده است.
-            <br><br>
-            برای ادامه، لطفاً <b>حالت هواپیما (Airplane Mode)</b> گوشی خود را یکبار روشن و خاموش کنید تا IP شما تغییر کند و سپس مجدد تلاش کنید.
-        </div>
-        <button class="quota-btn" onclick="closeQuotaModal()">متوجه شدم</button>
+  <div class="quota-modal-content">
+    <span class="quota-icon">✈️</span>
+    <div class="quota-title">محدودیت استفاده از سرور</div>
+    <div class="quota-text">
+      سهمیه گرافیک رایگان شما تمام شده است.
+      <br><br>
+      برای ادامه، لطفاً <b>حالت هواپیما (Airplane Mode)</b> گوشی خود را یک‌بار روشن و خاموش کنید تا IP تغییر کند، سپس دوباره تلاش کنید.
     </div>
+    <button class="quota-btn" onclick="document.getElementById('custom-quota-modal').style.display='none'">متوجه شدم</button>
+  </div>
 </div>
+
+<script>
+// اسکریپت جاوااسکریپت برای مانیتورینگ خطا
+(function() {
+    // 1. Force Light Mode
+    function forceLightMode() {
+        document.body.classList.remove('dark');
+        document.body.style.backgroundColor = '#f5f7fa';
+        document.body.style.color = '#333';
+        document.querySelectorAll('.dark').forEach(el => el.classList.remove('dark'));
+    }
+    
+    // 2. Error Monitor Loop (Polling) - بسیار قدرتمندتر از Observer
+    setInterval(() => {
+        forceLightMode();
+        
+        // جستجو در تمام المان‌های صفحه برای پیدا کردن متن خطا
+        // ما دنبال المان‌هایی می‌گردیم که حاوی متن "exceeded your GPU quota" باشند
+        const allElements = document.body.getElementsByTagName("*");
+        
+        for (let i = 0; i < allElements.length; i++) {
+            const el = allElements[i];
+            
+            // بررسی متن داخل المان (فقط نودهای متنی مستقیم یا کانتینرهای خطا)
+            if (el.shadowRoot) continue; // از شدو روت‌ها می‌گذریم
+            
+            if (el.innerText && el.innerText.includes("exceeded your GPU quota")) {
+                // اگر خطا پیدا شد:
+                
+                // 1. مخفی کردن المان والد (معمولا toast-wrap یا error-box)
+                // سعی می‌کنیم والد مناسب را پیدا کنیم تا کل باکس مخفی شود
+                let parent = el;
+                let foundContainer = false;
+                // تا 5 سطح بالا می‌رویم تا کانتینر اصلی را پیدا کنیم
+                for(let j=0; j<5; j++) {
+                    if (parent.classList.contains('toast-wrap') || parent.classList.contains('error')) {
+                        parent.style.display = 'none';
+                        foundContainer = true;
+                        break;
+                    }
+                    if(parent.parentElement) parent = parent.parentElement;
+                }
+                if (!foundContainer) el.style.display = 'none'; // اگر کانتینر پیدا نشد، خود المان را مخفی کن
+                
+                // 2. نمایش مودال سفارشی
+                const modal = document.getElementById('custom-quota-modal');
+                if (modal && modal.style.display !== 'flex') {
+                    modal.style.display = 'flex';
+                }
+            }
+        }
+        
+    }, 500); // هر نیم ثانیه چک می‌کند
+})();
+
+// PostMessage Function
+async function sendImageToParent(image) {
+    if (!image) { alert("لطفاً ابتدا تصویر را تولید کنید."); return; }
+    let fileUrl = image.url;
+    if (fileUrl && !fileUrl.startsWith('http')) {
+       fileUrl = window.location.origin + fileUrl;
+    } else if (!fileUrl && image.path) {
+       fileUrl = window.location.origin + "/file=" + image.path;
+    }
+    console.log("Sending download request for:", fileUrl);
+    window.parent.postMessage({ type: 'DOWNLOAD_REQUEST', url: fileUrl }, '*');
+}
+</script>
 """
 
 with gr.Blocks() as demo:
-    # تزریق کدها به ترتیب
-    gr.HTML(html_code + modal_html + js_code)
+    gr.HTML(html_js_modal_code)
     
     with gr.Column(elem_id="col-container"):
         gr.Markdown("# **ویرایشگر هوشمند آلفا**", elem_id="main-title")
@@ -694,7 +534,7 @@ with gr.Blocks() as demo:
         fn=None,
         inputs=[output_image],
         outputs=None,
-        js=js_dl
+        js="sendImageToParent"
     )
 
 if __name__ == "__main__":