Update app.py

app.py

@@ -146,7 +146,6 @@ def update_dimensions_on_upload(image):
     new_height = (new_height // 8) * 8
     return new_width, new_height
 
-# تابع به‌روزرسانی وضعیت نمایش اسلایدرها
 def update_sliders_visibility(choice):
     if choice == "شخصی‌سازی (Custom)":
         return gr.update(visible=True), gr.update(visible=True)
@@ -236,6 +235,8 @@ def infer(
         return result, seed, get_success_html("تصویر با موفقیت ویرایش شد.")
 
     except Exception as e:
+        # اگر خطا مربوط به Quota باشد، اینجا هندل نمی‌شود چون از سمت سرور می‌آید.
+        # اما خطاهای پایتونی را هندل می‌کند.
         return None, seed, get_error_html(f"خطا در پردازش: {str(e)}")
 
 @spaces.GPU(duration=30)
@@ -243,27 +244,78 @@ 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_post_message = """
-async (image) => {
-    if (!image) {
-        alert("لطفاً ابتدا تصویر را تولید کنید.");
-        return;
+# --- جاوااسکریپت (PostMessage + Quota Handler) ---
+js_code = """
+<script>
+// 1. تابع فورس کردن لایت مود
+function forceLightMode() {
+    const body = document.querySelector('body');
+    if (body) {
+        body.classList.remove('dark');
+        body.style.backgroundColor = '#f5f7fa';
+        body.style.color = '#333333';
     }
-    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;
+    document.querySelectorAll('.dark').forEach(el => {
+        el.classList.remove('dark');
+    });
+}
+
+// 2. تابع بستن مودال خطای Quota
+function closeQuotaModal() {
+    const modal = document.getElementById('custom-quota-modal');
+    if (modal) {
+        modal.style.display = 'none';
     }
-    console.log("Sending download request for:", fileUrl);
-    window.parent.postMessage({
-        type: 'DOWNLOAD_REQUEST',
-        url: fileUrl
-    }, '*');
 }
+
+// 3. آبزرور برای شکار خطای GPU Quota
+const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+        // بررسی متن‌های اضافه شده
+        if (mutation.type === 'childList') {
+            mutation.addedNodes.forEach((node) => {
+                if (node.nodeType === 1) { // Element node
+                    const text = node.innerText || node.textContent;
+                    if (text && text.includes('exceeded your GPU quota')) {
+                        // مخفی کردن پیغام اصلی
+                        node.style.display = 'none';
+                        node.style.visibility = 'hidden';
+                        
+                        // نمایش مودال سفارشی
+                        const modal = document.getElementById('custom-quota-modal');
+                        if (modal) modal.style.display = 'flex';
+                    }
+                }
+            });
+        }
+    });
+    
+    // بررسی پیغام‌های موجود در toast-wrap (روش دوم برای اطمینان)
+    const toasts = document.querySelectorAll('.toast-wrap');
+    toasts.forEach(toast => {
+        if (toast.innerText.includes('exceeded your GPU quota') && toast.style.display !== 'none') {
+            toast.style.display = 'none';
+            const modal = document.getElementById('custom-quota-modal');
+            if (modal) modal.style.display = 'flex';
+        }
+    });
+});
+
+document.addEventListener('DOMContentLoaded', () => {
+    forceLightMode();
+    setInterval(forceLightMode, 1000);
+    
+    // شروع مانیتور کردن بادی برای خطاها
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+        characterData: true
+    });
+});
+</script>
 """
 
+# --- تنظیمات HTML و CSS ---
 html_code = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
@@ -288,6 +340,75 @@ body {
     padding: 10px;
 }
 
+/* استایل مودال خطای سفارشی */
+#custom-quota-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(5px);
+    z-index: 99999;
+    display: none; /* پیش‌فرض مخفی */
+    justify-content: center;
+    align-items: center;
+    direction: rtl;
+}
+
+.quota-modal-content {
+    background-color: white;
+    padding: 30px;
+    border-radius: 20px;
+    width: 90%;
+    max-width: 400px;
+    text-align: center;
+    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+    animation: fadeIn 0.3s ease-out;
+}
+
+.quota-icon {
+    font-size: 60px;
+    margin-bottom: 20px;
+    display: block;
+}
+
+.quota-title {
+    font-size: 1.4em;
+    font-weight: 800;
+    color: #e11d48;
+    margin-bottom: 15px;
+}
+
+.quota-text {
+    font-size: 1.1em;
+    color: #4b5563;
+    line-height: 1.6;
+    margin-bottom: 25px;
+}
+
+.quota-btn {
+    background: linear-gradient(135deg, #e11d48 0%, #be123c 100%);
+    color: white;
+    border: none;
+    padding: 12px 30px;
+    border-radius: 12px;
+    font-weight: bold;
+    font-family: 'Vazirmatn', sans-serif;
+    font-size: 1em;
+    cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.quota-btn:hover {
+    transform: scale(1.05);
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
 #col-container {
     margin: 0 auto;
     max-width: 980px;
@@ -366,10 +487,6 @@ 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;
@@ -413,11 +530,6 @@ textarea:focus, input[type="text"]:focus {
     padding: 10px !important;
 }
 
-.gradio-container tbody td span, 
-.gradio-container tbody td p {
-    color: #374151 !important;
-}
-
 footer { display: none !important; }
 .flagging { display: none !important; }
 
@@ -428,27 +540,27 @@ footer { display: none !important; }
     }
 }
 </style>
+"""
 
-<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');
-    });
-}
-forceLightMode();
-setInterval(forceLightMode, 1000);
-document.addEventListener('DOMContentLoaded', forceLightMode);
-</script>
+# ساختار HTML برای مودال سفارشی
+modal_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>
+</div>
 """
 
 with gr.Blocks() as demo:
-    gr.HTML(html_code)
+    # تزریق HTML و JS
+    gr.HTML(html_code + js_code + modal_html)
     
     with gr.Column(elem_id="col-container"):
         gr.Markdown("# **ویرایشگر هوشمند آلفا**", elem_id="main-title")
@@ -471,7 +583,6 @@ with gr.Blocks() as demo:
                 
                 status_box = gr.HTML(label="وضعیت")
                 
-                # اضافه کردن api_name="predict" برای فعال کردن حالت API
                 run_button = gr.Button("✨ شروع پردازش و ساخت تصویر", variant="primary", elem_classes="primary-btn")
 
             with gr.Column():
@@ -494,7 +605,6 @@ with gr.Blocks() as demo:
                         interactive=True
                     )
                     
-                    # اسلایدرها با visible=False شروع می‌شوند
                     with gr.Row(visible=False) as custom_dims_row:
                         custom_width = gr.Slider(
                             label="عرض دلخواه (Width)",
@@ -510,7 +620,6 @@ with gr.Blocks() as demo:
                     guidance_scale = gr.Slider(label="میزان وفاداری به متن (Guidance Scale)", minimum=1.0, maximum=10.0, step=0.1, value=1.0)
                     steps = gr.Slider(label="تعداد مراحل پردازش (Steps)", minimum=1, maximum=50, step=1, value=4)
         
-        # اصلاح منطق نمایش/مخفی کردن ردیف اسلایدرها
         def toggle_row(choice):
             if choice == "شخصی‌سازی (Custom)":
                 return gr.update(visible=True)
@@ -519,7 +628,7 @@ with gr.Blocks() as demo:
         aspect_ratio_selection.change(
             fn=toggle_row,
             inputs=aspect_ratio_selection,
-            outputs=custom_dims_row # کنترل کل ردیف به جای تک تک اسلایدرها
+            outputs=custom_dims_row
         )
 
         gr.Examples(
@@ -543,19 +652,33 @@ with gr.Blocks() as demo:
             label="نمونه‌ها (برای تست کلیک کنید)"
         )
 
-    # اتصال دکمه اجرا با قابلیت API
+    # جاوااسکریپت دانلود
+    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 }, '*');
+    }
+    """
+
     run_button.click(
         fn=infer,
         inputs=[input_image, prompt, lora_adapter, seed, randomize_seed, guidance_scale, steps, aspect_ratio_selection, custom_width, custom_height],
         outputs=[output_image, seed, status_box],
-        api_name="predict" # فعال‌سازی API
+        api_name="predict"
     )
 
     download_button.click(
         fn=None,
         inputs=[output_image],
         outputs=None,
-        js=js_post_message
+        js=js_dl
     )
 
 if __name__ == "__main__":