Update app.py

app.py

@@ -263,12 +263,85 @@ async (image) => {
 }
 """
 
-# --- تنظیمات HTML/CSS و جاوااسکریپت سراسری (شامل مدیریت خطا) ---
-html_code = """
+# --- جاوااسکریپت اصلی (شامل مدیریت هوشمند خطا) ---
+# این اسکریپت با دقت هر تغییری در صفحه را رصد می‌کند و اگر خطای GPU را ببیند، آن را جایگزین می‌کند.
+js_global_func = """
+function() {
+    // 1. اجبار تم روشن
+    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 (نسخه پیشرفته)
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.addedNodes.length) {
+                mutation.addedNodes.forEach((node) => {
+                    // بررسی تمام نودهای اضافه شده (چه المنت چه متن)
+                    if (node.nodeType === 1) { // اگر المنت باشد
+                        const textContent = node.innerText || "";
+                        if (textContent.includes("exceeded your GPU quota") || textContent.includes("GPU quota")) {
+                            
+                            // پیدا کردن کانتینر اصلی ارور (معمولاً کلاس toast-body یا error دارد)
+                            // اگر خودش کانتینر نبود، والدش را پیدا می‌کنیم یا خودش را تغییر می‌دهیم
+                            let targetNode = node;
+                            if (!targetNode.classList.contains('toast-body')) {
+                                const parentToast = targetNode.closest('.toast-body');
+                                if (parentToast) targetNode = parentToast;
+                            }
+
+                            if (!targetNode.dataset.fixed) {
+                                targetNode.innerHTML = `
+                                    <div style="font-family: 'Vazirmatn', sans-serif; direction: rtl; text-align: right; padding: 10px; background: white; border-radius: 8px;">
+                                        <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px;">
+                                            <span style="font-size: 30px;">✈️</span>
+                                            <h3 style="margin: 0; color: #c0392b; font-size: 18px; font-weight: bold;">ظرفیت تکمیل شد</h3>
+                                        </div>
+                                        <p style="margin: 5px 0; color: #333; font-size: 14px;">
+                                            سهمیه رایگان استفاده از سرور تمام شده است.
+                                        </p>
+                                        <div style="background-color: #e0f2f1; border: 1px solid #80cbc4; border-radius: 8px; padding: 10px; margin-top: 10px;">
+                                            <p style="margin: 0; color: #00695c; font-weight: bold; font-size: 13px;">💡 راه حل:</p>
+                                            <p style="margin: 5px 0 0 0; font-size: 13px; color: #004d40;">
+                                                لطفاً <b>حالت هواپیما (Airplane Mode)</b> گوشی خود را روشن و سپس خاموش کنید و صفحه را رفرش کنید.
+                                            </p>
+                                        </div>
+                                    </div>
+                                `;
+                                targetNode.dataset.fixed = "true";
+                                // مخفی کردن استایل‌های پیش‌فرض زشت
+                                targetNode.style.border = "none";
+                                targetNode.style.boxShadow = "0 4px 15px rgba(0,0,0,0.1)";
+                                // اگر والدی دارد که بوردر قرمز دارد، آن را هم پاکسازی کن
+                                if(targetNode.parentElement) {
+                                    targetNode.parentElement.style.border = "none";
+                                    targetNode.parentElement.style.backgroundColor = "transparent";
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        });
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+}
+"""
+
+html_code = f"""
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
 
-:root, .dark, body, .gradio-container {
+:root, .dark, body, .gradio-container {{
     --body-background-fill: #f5f7fa !important;
     --body-text-color: #1f2937 !important;
     --background-fill-primary: #ffffff !important;
@@ -279,16 +352,16 @@ html_code = """
     --block-title-text-color: #111827 !important;
     --input-background-fill: #ffffff !important;
     color-scheme: light !important;
-}
+}}
 
-body {
+body {{
     font-family: 'Vazirmatn', sans-serif !important;
     background-color: #f5f7fa !important;
     margin: 0;
     padding: 10px;
-}
+}}
 
-#col-container {
+#col-container {{
     margin: 0 auto;
     max-width: 980px;
     direction: rtl;
@@ -298,9 +371,9 @@ body {
     border-radius: 24px;
     box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); 
     border: 1px solid rgba(255,255,255,0.8);
-}
+}}
 
-#main-title h1 {
+#main-title h1 {{
     font-size: 2.4em !important;
     text-align: center;
     color: #1a202c !important;
@@ -309,24 +382,24 @@ body {
     background: -webkit-linear-gradient(45deg, #2563eb, #1e40af);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-}
+}}
 
-#main-description {
+#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 {
+.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"] {
+textarea, input[type="text"] {{
     border: 2px solid #e2e8f0 !important;
     border-radius: 12px !important;
     background-color: #ffffff !important;
@@ -334,20 +407,20 @@ textarea, input[type="text"] {
     padding: 12px !important;
     transition: all 0.3s ease;
     font-family: 'Vazirmatn', sans-serif !important;
-}
+}}
 
-textarea:focus, input[type="text"]:focus {
+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 {
+.gr-dropdown {{
     background: #ffffff !important;
     border-radius: 12px !important;
-}
+}}
 
-.primary-btn, button.primary {
+.primary-btn, button.primary {{
     background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
     border: none !important;
     color: white !important;
@@ -360,27 +433,27 @@ textarea:focus, input[type="text"]:focus {
     cursor: pointer !important;
     width: 100%;
     margin-top: 15px;
-}
+}}
 
-.primary-btn:hover, button.primary:hover {
+.primary-btn:hover, button.primary:hover {{
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
-}
+}}
 
-.primary-btn:active, button.primary:active {
+.primary-btn:active, button.primary:active {{
     transform: translateY(1px);
-}
+}}
 
-#download-btn {
+#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 {
+}}
+#download-btn:hover {{
     box-shadow: 0 8px 25px rgba(59, 130, 246, 0.45) !important;
-}
+}}
 
 .gradio-container .prose table, 
-.gradio-container table {
+.gradio-container table {{
     background-color: #ffffff !important;
     color: #111827 !important;
     border: 1px solid #e5e7eb !important;
@@ -388,111 +461,54 @@ textarea:focus, input[type="text"]:focus {
     overflow: hidden !important;
     width: 100% !important;
     margin-top: 20px !important;
-}
+}}
 
-.gradio-container thead th {
+.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 {
+.gradio-container tbody tr {{
     background-color: #ffffff !important;
     border-bottom: 1px solid #f3f4f6 !important;
-}
+}}
 
-.gradio-container tbody tr:hover {
+.gradio-container tbody tr:hover {{
     background-color: #f9fafb !important;
-}
+}}
 
-.gradio-container tbody td {
+.gradio-container tbody td {{
     background-color: #ffffff !important;
     color: #374151 !important;
     padding: 10px !important;
-}
+}}
 
 .gradio-container tbody td span, 
-.gradio-container tbody td p {
+.gradio-container tbody td p {{
     color: #374151 !important;
-}
+}}
 
-footer { display: none !important; }
-.flagging { display: none !important; }
+footer {{ display: none !important; }}
+.flagging {{ display: none !important; }}
 
-/* استایل برای Toast های گرادیو */
-.toast-body {
+/* استایل Toast */
+.toast-body {{
     direction: rtl !important;
     text-align: right !important;
-}
+}}
 
-@media (prefers-color-scheme: dark) {
-    body, .gradio-container, .prose, table, tr, td, th {
+@media (prefers-color-scheme: dark) {{
+    body, .gradio-container, .prose, table, tr, td, th {{
         background-color: #ffffff !important;
         color: #333333 !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>
+<script>{js_global_func}</script>
 """
 
 with gr.Blocks() as demo: