Update app.py

app.py

@@ -236,187 +236,118 @@ 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
 
-# --- جاوااسکریپت و HTML ---
-# در اینجا از setInterval برای بررسی مداوم وجود پیام خطا استفاده می‌کنیم
-# و به محض پیدا شدن، آن را مخفی و مودال خودمان را نشان می‌دهیم.
-
-html_js_modal_code = """
+# --- جاوااسکریپت و CSS بسیار قوی برای مودال ---
+html_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;
     --background-fill-primary: #ffffff !important;
-    --background-fill-secondary: #f3f4f6 !important;
-    --border-color-primary: #e5e7eb !important;
-    --block-background-fill: #ffffff !important;
-    --block-label-text-color: #374151 !important;
-    --block-title-text-color: #111827 !important;
-    --input-background-fill: #ffffff !important;
     color-scheme: light !important;
 }
 
 body {
     font-family: 'Vazirmatn', sans-serif !important;
     background-color: #f5f7fa !important;
-    margin: 0;
-    padding: 10px;
+    margin: 0; padding: 10px;
 }
 
-/* استایل مودال خطای سفارشی - طراحی شده برای دیده شدن قطعی */
+/* استایل مودال */
 #custom-quota-modal {
-    display: none; /* پیش‌فرض مخفی */
-    position: fixed;
-    z-index: 2147483647; /* بالاترین لایه ممکن */
-    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;
+    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
+    background-color: rgba(0, 0, 0, 0.85);
+    backdrop-filter: blur(8px);
+    z-index: 9999999; /* Z-Index بسیار بالا */
+    display: none;
+    justify-content: center; align-items: center; direction: rtl;
 }
 
 .quota-modal-content {
-    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 4px 20px rgba(0,0,0,0.5);
-    position: relative;
-    animation: animatetop 0.4s;
-}
-
-@keyframes animatetop {
-    from {top: -300px; opacity: 0}
-    to {top: 0; opacity: 1}
+    background-color: white; padding: 40px; border-radius: 24px;
+    width: 90%; max-width: 450px; text-align: center;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+    animation: slideIn 0.4s ease-out;
 }
 
-.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-color: #e11d48;
-    color: white;
-    padding: 12px 24px;
-    border: none;
-    border-radius: 10px;
-    cursor: pointer;
-    font-size: 16px;
-    font-family: 'Vazirmatn', sans-serif;
-    width: 100%;
-}
-.quota-btn:hover { background-color: #be123c; }
-
-/* استایل سایر اجزا */
-#col-container {
-    margin: 0 auto;
-    max-width: 980px;
-    direction: rtl;
-    text-align: right;
-    padding: 30px;
-    background: #ffffff !important;
-    border-radius: 24px;
-    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); 
-    border: 1px solid rgba(255,255,255,0.8);
-}
+.quota-icon { font-size: 72px; margin-bottom: 25px; display: block; animation: float 3s 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; }
+.quota-btn { background: #e11d48; color: white; border: none; padding: 14px 35px; border-radius: 14px; font-weight: bold; cursor: pointer; width: 100%; font-family: 'Vazirmatn'; font-size: 1.1em; }
 
-.primary-btn {
-    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
-    border: none !important;
-    color: white !important;
-    font-weight: 700 !important;
-    font-size: 1.1em !important;
-    padding: 14px 28px !important;
-    border-radius: 14px !important;
-}
+@keyframes slideIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
 
-/* مخفی کردن شدید پیام‌های خطای پیش‌فرض گرادیو */
-.toast-wrap, .toast-error, .error, .toast {
-    display: none !important;
-    visibility: hidden !important;
+/* 
+   نکته کلیدی: مخفی کردن بصری (نامرئی کردن) کانتینر خطا به جای حذف آن 
+   این باعث میشه JS بتونه متنش رو بخونه ولی کاربر نبینه
+*/
+.toast-wrap {
     opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+    position: absolute !important;
+    top: -9999px !important;
 }
+
+/* استایل‌های عمومی */
+#col-container { margin: 0 auto; max-width: 980px; direction: rtl; text-align: right; padding: 30px; background: #ffffff !important; border-radius: 24px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); }
+#main-title h1 { font-size: 2.4em !important; text-align: center; color: #1a202c !important; margin-bottom: 15px; }
+.primary-btn { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: white !important; font-weight: bold; padding: 14px; border-radius: 14px; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); width: 100%; margin-top: 15px; border: none; }
+#download-btn { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; margin-top: 10px; }
+footer, .flagging { display: none !important; }
 </style>
 
-<!-- کد 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 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>
-    <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'));
-    }
+// اسکریپت شناسایی خطا
+function checkQuotaError() {
+    // جستجو در تمام متن صفحه
+    const bodyText = document.body.innerText || document.body.textContent;
     
-    // 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 (bodyText.includes("exceeded your GPU quota") || bodyText.includes("GPU quota")) {
+        const modal = document.getElementById('custom-quota-modal');
+        if (modal && modal.style.display !== 'flex') {
+            modal.style.display = 'flex';
             
-            // بررسی متن داخل المان (فقط نودهای متنی مستقیم یا کانتینرهای خطا)
-            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';
-                }
-            }
+            // تلاش برای حذف متن خطا از DOM (اختیاری، چون CSS مخفیش کرده)
+            document.querySelectorAll('.toast-wrap').forEach(el => el.innerHTML = '');
         }
-        
-    }, 500); // هر نیم ثانیه چک می‌کند
-})();
+    }
+}
+
+// چک کردن هر 500 میلی‌ثانیه (بسیار سریع)
+setInterval(checkQuotaError, 500);
+
+// فورس لایت مود
+function forceLight() {
+    document.body.classList.remove('dark');
+    document.body.style.backgroundColor = '#f5f7fa';
+    document.body.style.color = '#333333';
+    document.querySelectorAll('.dark').forEach(el => el.classList.remove('dark'));
+}
+setInterval(forceLight, 1000);
+</script>
+"""
 
-// PostMessage Function
-async function sendImageToParent(image) {
+# جاوااسکریپت دانلود
+js_post_message = """
+async (image) => {
     if (!image) { alert("لطفاً ابتدا تصویر را تولید کنید."); return; }
     let fileUrl = image.url;
     if (fileUrl && !fileUrl.startsWith('http')) {
@@ -424,14 +355,12 @@ async function sendImageToParent(image) {
     } 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_js_modal_code)
+    gr.HTML(html_code)
     
     with gr.Column(elem_id="col-container"):
         gr.Markdown("# **ویرایشگر هوشمند آلفا**", elem_id="main-title")
@@ -443,64 +372,32 @@ with gr.Blocks() as demo:
         with gr.Row(equal_height=True):
             with gr.Column():
                 input_image = gr.Image(label="بارگذاری تصویر", type="pil", height=320)
-                
-                prompt = gr.Text(
-                    label="دستور ویرایش (به فارسی)",
-                    show_label=True,
-                    placeholder="مثال: تصویر را به سبک انیمه تبدیل کن...",
-                    rtl=True,
-                    lines=3
-                )
-                
+                prompt = gr.Text(label="دستور ویرایش (به فارسی)", show_label=True, placeholder="مثال: تصویر را به سبک انیمه تبدیل کن...", rtl=True, lines=3)
                 status_box = gr.HTML(label="وضعیت")
-                
                 run_button = gr.Button("✨ شروع پردازش و ساخت تصویر", variant="primary", elem_classes="primary-btn")
 
             with gr.Column():
                 output_image = gr.Image(label="تصویر نهایی", interactive=False, format="png", height=380)
-                
                 download_button = gr.Button("📥 دانلود و ذخیره تصویر", variant="secondary", elem_id="download-btn", elem_classes="primary-btn")
                 
                 with gr.Row():
-                    lora_adapter = gr.Dropdown(
-                        label="انتخاب سبک ویرایش (LoRA)",
-                        choices=list(LORA_MAPPING.keys()),
-                        value="تبدیل عکس به انیمه"
-                    )
+                    lora_adapter = gr.Dropdown(label="انتخاب سبک ویرایش (LoRA)", choices=list(LORA_MAPPING.keys()), value="تبدیل عکس به انیمه")
                 
                 with gr.Accordion("تنظیمات پیشرفته", open=False, visible=True):
-                    aspect_ratio_selection = gr.Dropdown(
-                        label="ابعاد تصویر خروجی",
-                        choices=ASPECT_RATIOS_LIST,
-                        value="خودکار (پیش‌فرض)",
-                        interactive=True
-                    )
-                    
+                    aspect_ratio_selection = gr.Dropdown(label="ابعاد تصویر خروجی", choices=ASPECT_RATIOS_LIST, value="خودکار (پیش‌فرض)", interactive=True)
                     with gr.Row(visible=False) as custom_dims_row:
-                        custom_width = gr.Slider(
-                            label="عرض دلخواه (Width)",
-                            minimum=256, maximum=2048, step=8, value=1024
-                        )
-                        custom_height = gr.Slider(
-                            label="ارتفاع دلخواه (Height)",
-                            minimum=256, maximum=2048, step=8, value=1024
-                        )
-                    
+                        custom_width = gr.Slider(label="عرض دلخواه (Width)", minimum=256, maximum=2048, step=8, value=1024)
+                        custom_height = gr.Slider(label="ارتفاع دلخواه (Height)", minimum=256, maximum=2048, step=8, value=1024)
                     seed = gr.Slider(label="دانه تصادفی (Seed)", minimum=0, maximum=MAX_SEED, step=1, value=0)
                     randomize_seed = gr.Checkbox(label="استفاده از Seed تصادفی", value=True)
                     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)
+            if choice == "شخصی‌سازی (Custom)": return gr.update(visible=True)
             return gr.update(visible=False)
 
-        aspect_ratio_selection.change(
-            fn=toggle_row,
-            inputs=aspect_ratio_selection,
-            outputs=custom_dims_row
-        )
+        aspect_ratio_selection.change(fn=toggle_row, inputs=aspect_ratio_selection, outputs=custom_dims_row)
 
         gr.Examples(
             examples=[
@@ -523,19 +420,8 @@ with gr.Blocks() as demo:
             label="نمونه‌ها (برای تست کلیک کنید)"
         )
 
-    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"
-    )
-
-    download_button.click(
-        fn=None,
-        inputs=[output_image],
-        outputs=None,
-        js="sendImageToParent"
-    )
+    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")
+    download_button.click(fn=None, inputs=[output_image], outputs=None, js=js_post_message)
 
 if __name__ == "__main__":
     demo.queue(max_size=30).launch(show_error=True)