Update app.py

app.py

@@ -242,7 +242,7 @@ 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_download_func = """
 async (image) => {
     if (!image) {
@@ -263,69 +263,7 @@ async (image) => {
 }
 """
 
-# --- جاوااسکریپت اصلی (شامل حالت روشن اجباری + ناظر خطا برای GPU Quota) ---
-js_global_func = """
-function() {
-    // 1. اجبار حالت روشن (Light Mode)
-    const forceLight = () => {
-        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'));
-    };
-    forceLight();
-    setInterval(forceLight, 1000);
-
-    // 2. ناظر خطا برای تغییر پیام GPU Quota
-    const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-            if (mutation.addedNodes.length) {
-                mutation.addedNodes.forEach((node) => {
-                    // بررسی اگر المان اضافه شده یک Toast خطا باشد
-                    if (node.nodeType === 1 && (node.classList.contains('toast-body') || node.classList.contains('error'))) {
-                        const originalText = node.innerText || "";
-                        
-                        // شناسایی خطای GPU Quota
-                        if (originalText.includes('exceeded your GPU quota') || originalText.includes('GPU quota')) {
-                            
-                            // اگر قبلاً تغییر نکرده باشد
-                            if (!node.dataset.translated) {
-                                node.innerHTML = `
-                                    <div style="font-family: 'Vazirmatn', sans-serif; direction: rtl; text-align: right; padding: 5px;">
-                                        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
-                                            <span style="font-size: 28px;">✈️</span>
-                                            <h3 style="margin: 0; color: #c0392b; font-size: 16px;">ظرفیت سرور تکمیل شد</h3>
-                                        </div>
-                                        <p style="margin: 0; color: #333; font-size: 13px; line-height: 1.6;">
-                                            متأسفانه سهمیه رایگان پردازش تمام شده است.
-                                        </p>
-                                        <div style="background-color: #e0f2f1; border: 1px solid #80cbc4; border-radius: 8px; padding: 8px; margin-top: 10px;">
-                                            <p style="margin: 0; color: #00695c; font-weight: bold; font-size: 12px;">💡 راه حل سریع:</p>
-                                            <p style="margin: 4px 0 0 0; font-size: 12px; color: #004d40;">
-                                                لطفاً <b>حالت هواپیما (Airplane Mode)</b> گوشی خود را روشن و سپس خاموش کنید و دوباره تلاش کنید.
-                                            </p>
-                                        </div>
-                                    </div>
-                                `;
-                                node.dataset.translated = 'true';
-                                node.style.border = '2px solid #e74c3c';
-                                node.style.backgroundColor = '#fff';
-                            }
-                        }
-                    }
-                });
-            }
-        });
-    });
-
-    observer.observe(document.body, { childList: true, subtree: true });
-}
-"""
-
-# --- تنظیمات HTML/CSS ---
+# --- تنظیمات HTML/CSS و جاوااسکریپت سراسری (شامل مدیریت خطا) ---
 html_code = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
@@ -429,6 +367,10 @@ textarea:focus, input[type="text"]:focus {
     box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
 }
 
+.primary-btn:active, button.primary:active {
+    transform: translateY(1px);
+}
+
 #download-btn {
     background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
     box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
@@ -480,7 +422,7 @@ textarea:focus, input[type="text"]:focus {
 footer { display: none !important; }
 .flagging { display: none !important; }
 
-/* استایل برای Toast های گرادیو تا راست چین شوند */
+/* استایل برای Toast های گرادیو */
 .toast-body {
     direction: rtl !important;
     text-align: right !important;
@@ -493,9 +435,67 @@ footer { display: none !important; }
     }
 }
 </style>
+
+<script>
+// 1. اجبار تم روشن
+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');
+    });
+}
+forceLightMode();
+setInterval(forceLightMode, 1000);
+
+// 2. شناسایی و تغییر پیام خطای GPU Quota
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        if (mutation.addedNodes.length) {
+            mutation.addedNodes.forEach((node) => {
+                if (node.nodeType === 1 && (node.classList.contains('toast-body') || node.classList.contains('error'))) {
+                    const originalText = node.innerText || "";
+                    
+                    // اگر پیام خطا شامل کلمات کلیدی سهمیه GPU بود
+                    if (originalText.includes('exceeded your GPU quota') || originalText.includes('GPU quota')) {
+                        if (!node.dataset.translated) {
+                            node.innerHTML = `
+                                <div style="font-family: 'Vazirmatn', sans-serif; direction: rtl; text-align: right; padding: 5px;">
+                                    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
+                                        <span style="font-size: 28px;">✈️</span>
+                                        <h3 style="margin: 0; color: #c0392b; font-size: 16px;">ظرفیت سرور تکمیل شد</h3>
+                                    </div>
+                                    <p style="margin: 0; color: #333; font-size: 13px; line-height: 1.6;">
+                                        متأسفانه سهمیه رایگان پردازش تمام شده است.
+                                    </p>
+                                    <div style="background-color: #e0f2f1; border: 1px solid #80cbc4; border-radius: 8px; padding: 8px; margin-top: 10px;">
+                                        <p style="margin: 0; color: #00695c; font-weight: bold; font-size: 12px;">💡 راه حل سریع:</p>
+                                        <p style="margin: 4px 0 0 0; font-size: 12px; color: #004d40;">
+                                            لطفاً <b>حالت هواپیما (Airplane Mode)</b> گوشی خود را روشن و سپس خاموش کنید و دوباره تلاش کنید.
+                                        </p>
+                                    </div>
+                                </div>
+                            `;
+                            node.dataset.translated = 'true';
+                            node.style.border = '2px solid #e74c3c';
+                            node.style.backgroundColor = '#fff';
+                        }
+                    }
+                }
+            });
+        }
+    });
+});
+
+observer.observe(document.body, { childList: true, subtree: true });
+</script>
 """
 
-with gr.Blocks(js=js_global_func) as demo:
+with gr.Blocks() as demo:
     gr.HTML(html_code)
     
     with gr.Column(elem_id="col-container"):