Update app.py

app.py

@@ -353,8 +353,13 @@ def infer(
 
     except Exception as e:
         error_str = str(e)
+        # -------------------------------------------------------------
+        #  مدیریت خطای GPU QUOTA برای نمایش Modal سفارشی (بخش درخواستی)
+        # -------------------------------------------------------------
         if "quota" in error_str.lower() or "exceeded" in error_str.lower():
+             # خطا را به بالا پرتاب می‌کنیم تا اسکنر جاوااسکریپت آن را بگیرد
              raise e 
+        
         return None, seed, get_error_html(f"خطا در پردازش: {error_str}"), gr.update(visible=True), gr.update(visible=False)
 
 @spaces.GPU(duration=30)
@@ -390,7 +395,7 @@ js_upgrade_func = """
 }
 """
 
-# --- جاوااسکریپت سراسری ---
+# --- جاوااسکریپت سراسری (ترکیب شده: اعتبار سنجی + هندلینگ خطای GPU) ---
 js_global_content = """
 <script>
 document.addEventListener('DOMContentLoaded', () => {
@@ -437,7 +442,6 @@ document.addEventListener('DOMContentLoaded', () => {
         const fpInput = document.querySelector('#fingerprint_storage textarea');
         const stInput = document.querySelector('#status_storage textarea');
         
-        // Only dispatch if value changes or if it's empty
         if(fpInput && fingerprint && fpInput.value !== fingerprint) { 
             fpInput.value = fingerprint; 
             fpInput.dispatchEvent(new Event('input', { bubbles: true })); 
@@ -500,7 +504,118 @@ document.addEventListener('DOMContentLoaded', () => {
 
     initUserIdentity();
 
-    // 2. Force Light Mode
+    // ---------------------------------------------
+    // 2. GPU QUOTA HANDLER (Modal & Scanner)
+    // ---------------------------------------------
+    
+    // RETRY FUNCTION
+    window.retryGeneration = function() {
+        const modal = document.getElementById('custom-quota-modal');
+        if (modal) modal.remove();
+
+        const runBtn = document.getElementById('run-btn');
+        if(runBtn) runBtn.click();
+    };
+    
+    // Close function
+    window.closeErrorModal = function() {
+         const modal = document.getElementById('custom-quota-modal');
+         if (modal) modal.remove();
+    };
+
+    // SHOW MODAL FUNCTION
+    const showQuotaModal = () => {
+        if (document.getElementById('custom-quota-modal')) return;
+
+        const modalHtml = `
+            <div id="custom-quota-modal" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(5px); z-index: 99999; display: flex; align-items: center; justify-content: center; font-family: 'Vazirmatn', sans-serif;">
+                <div class="ip-reset-guide-container">
+                    <div class="guide-header">
+                        <svg class="guide-header-icon" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> 
+                            <defs><lineargradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color: #667eea; stop-opacity: 1;"></stop><stop offset="100%" style="stop-color: #764ba2; stop-opacity: 1;"></stop></lineargradient></defs> 
+                            <circle cx="50" cy="50" r="45" fill="url(#grad1)" opacity="0.1"></circle>
+                            <circle cx="50" cy="50" r="35" fill="none" stroke="url(#grad1)" stroke-width="2" opacity="0.3"></circle>
+                            <path d="M35 50 L45 60 L65 40" stroke="url(#grad1)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>
+                            <circle cx="65" cy="35" r="8" fill="#fee140"></circle>
+                            <path d="M62 35 L68 35 M65 32 L65 38" stroke="white" stroke-width="2" stroke-linecap="round"></path> 
+                        </svg>
+                        <div>
+                            <h2>یک قدم تا ساخت تصاویر جدید</h2>
+                            <p>نیازمند تغییر نقطه دستیابی</p>
+                        </div>
+                    </div>
+                    
+                    <div class="guide-content">
+                        <div class="info-card">
+                            <div class="info-card-header">
+                                <svg class="info-card-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill="#667eea" opacity="0.2"></path><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" stroke="#667eea" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
+                                <span class="info-card-title">راه حل سریع</span>
+                            </div>
+                            <p>طبق ویدیو آموزشی پایین بین نقطه دستیابی جابجا شوید تلاش مجدد بزنید تا تصاویر مجدداً تولید بشه.</p>
+                        </div>
+                        
+                        <div class="summary-section">
+                            <div class="summary-header">
+                                <svg class="summary-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" fill="#56ab2f" opacity="0.2"></circle><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" stroke="#56ab2f" stroke-width="2"></path><path d="M9 12l2 2 4-4" stroke="#56ab2f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
+                                <span class="summary-title">خلاصه راهنما</span>
+                            </div>
+                            <div class="summary-text">هربار که این صفحه را مشاهده کردید: از اینترنت سیم‌کارت استفاده کنید، VPN را خاموش کرده و طبق ویدیو آموزشی پایین نقطه دستیابی رو تغییر دهید. «تلاش مجدد» کلیک کنید. با این روش ساده می‌توانید به صورت نامحدود تصویر بسازید! ☘️</div>
+                        </div>
+                        
+                        <div class="video-button-container">
+                            <button onclick="parent.postMessage({ type: 'NAVIGATE_TO_URL', url: '#/nav/online/news/getSingle/1149635/eyJpdiI6IjhHVGhPQWJwb3E0cjRXbnFWTW5BaUE9PSIsInZhbHVlIjoiS1V0dTdvT21wbXAwSXZaK1RCTG1pVXZqdlFJa1hXV1RKa2FLem9zU3pXMjd5MmlVOGc2YWY0NVdNR3h3Smp1aSIsIm1hYyI6IjY1NTA5ZDYzMjAzMTJhMGQyMWQ4NjA4ZDgyNGZjZDVlY2MyNjdiMjA2NWYzOWRjY2M4ZmVjYWRlMWNlMWQ3ODEiLCJ0YWciOiIifQ==/21135210' }, '*')" class="elegant-video-button"> 
+                                <svg class="elegant-video-button-icon" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg> 
+                                <span>دیدن ویدیو آموزشی استفاده نامحدود</span> 
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <div class="guide-actions">
+                        <button class="action-button back-button" onclick="window.closeErrorModal()"> 
+                            <svg class="action-button-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 12H5M12 19l-7-7 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
+                            <span>بازگشت</span> 
+                        </button>
+                        <button class="action-button retry-button" onclick="window.retryGeneration()"> 
+                            <svg class="action-button-icon" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23 4v6h-6M1 20v-6h6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg> 
+                            <span>تلاش مجدد</span> 
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+
+        // Auto close after 10 seconds
+        setTimeout(() => {
+            window.closeErrorModal();
+        }, 10000);
+    };
+
+    // ERROR SCANNER
+    setInterval(() => {
+        const potentialErrors = document.querySelectorAll('.toast-body, .error, .toast-wrap, .eta-bar, div[class*="error"]');
+        
+        potentialErrors.forEach(el => {
+            const text = el.innerText || "";
+            if (text.toLowerCase().includes('quota') || text.toLowerCase().includes('exceeded')) {
+                 
+                 showQuotaModal();
+                 
+                 // Immediately hide the Gradio error
+                 el.style.display = 'none';
+                 el.style.opacity = '0';
+                 el.innerText = '';
+                 
+                 const parentWrap = el.closest('.toast-wrap');
+                 if(parentWrap) parentWrap.style.display = 'none';
+            }
+        });
+    }, 100);
+
+    // ---------------------------------------------
+    // 3. Force Light Mode
+    // ---------------------------------------------
     const forceLight = () => {
         const body = document.querySelector('body');
         if (body) {
@@ -516,7 +631,7 @@ document.addEventListener('DOMContentLoaded', () => {
 </script>
 """
 
-# --- CSS Updated ---
+# --- CSS Updated (ترکیب استایل‌های مودال، بج و گرادیو) ---
 css_code = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
@@ -535,6 +650,149 @@ css_code = """
     font-family: 'Vazirmatn', sans-serif !important;
 }
 
+/* --- IP Reset Guide CSS (مودال سفارشی) --- */
+:root {
+    --guide-bg: rgba(255, 255, 255, 0.98);
+    --guide-border: rgba(102, 126, 234, 0.2);
+    --guide-text-title: #2d3748;
+    --guide-text-body: #4a5568;
+    --guide-accent: #667eea;
+    --primary-gradient-guide: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --success-gradient-guide: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
+    --radius-md-guide: 12px;
+    --radius-lg-guide: 16px;
+    --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
+    --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
+    --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
+}
+@keyframes slideInUp {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.ip-reset-guide-container {
+    text-align: right; 
+    direction: rtl; 
+    background: var(--guide-bg); 
+    backdrop-filter: blur(10px);
+    padding: 20px;
+    border-radius: var(--radius-lg-guide);
+    box-shadow: var(--shadow-xl); 
+    border: 1px solid var(--guide-border); 
+    animation: slideInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
+    width: 90%; 
+    max-width: 420px;
+    max-height: 90vh;
+    overflow-y: auto;
+    position: relative; 
+    box-sizing: border-box;
+    font-family: 'Vazirmatn', sans-serif !important;
+}
+.ip-reset-guide-container::before {
+    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--primary-gradient-guide);
+}
+.guide-header { display: flex; align-items: center; margin-bottom: 15px; }
+.guide-header-icon { width: 45px; height: 45px; margin-left: 15px; animation: float 3s ease-in-out infinite; flex-shrink: 0; }
+.guide-header h2 { font-size: 1.2rem; color: var(--guide-text-title); font-weight: 700; margin: 0; }
+.guide-header p { color: var(--guide-text-body); font-size: 0.8rem; margin-top: 3px; margin-bottom: 0; }
+
+.guide-content { font-size: 0.9rem; color: var(--guide-text-body); line-height: 1.6; }
+
+.info-card { background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%); border: 1px solid rgba(102, 126, 234, 0.2); border-radius: var(--radius-md-guide); padding: 12px; margin: 12px 0; position: relative; overflow: hidden; }
+.info-card p { font-size: 0.85rem; line-height: 1.6; margin: 0; }
+.info-card::before { content: ''; position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: var(--primary-gradient-guide); }
+.info-card-header { display: flex; align-items: center; margin-bottom: 8px; }
+.info-card-icon { width: 18px; height: 18px; margin-left: 8px; }
+.info-card-title { font-weight: 600; color: var(--guide-text-title); font-size: 0.95rem; }
+
+.summary-section { margin-top: 12px; padding: 12px; border-radius: var(--radius-md-guide); background: linear-gradient(135deg, #56ab2f15 0%, #a8e06315 100%); border: 1px solid rgba(86, 171, 47, 0.2); position: relative; overflow: hidden; }
+.summary-section::before { content: ''; position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: var(--success-gradient-guide); }
+.summary-header { display: flex; align-items: center; margin-bottom: 8px; }
+.summary-icon { width: 18px; height: 18px; margin-left: 8px; }
+.summary-title { font-weight: 600; color: #2f5a33; font-size: 0.95rem; }
+.summary-text { color: #2f5a33; font-size: 0.85rem; line-height: 1.6; }
+
+.video-button-container { text-align: center; margin: 20px 0 15px 0; width: 100%; }
+.elegant-video-button { 
+    display: inline-flex !important; 
+    align-items: center; 
+    justify-content: center; 
+    padding: 10px 20px !important; 
+    background-color: #fff !important; 
+    color: var(--guide-accent) !important; 
+    border: 1px solid #e2e8f0 !important; 
+    text-decoration: none; 
+    border-radius: 50px !important; 
+    font-weight: 600 !important; 
+    font-size: 0.9rem !important; 
+    cursor: pointer !important; 
+    font-family: inherit; 
+    transition: all 0.3s ease !important; 
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important; 
+    width: auto !important;
+}
+.elegant-video-button:hover { 
+    background: var(--primary-gradient-guide) !important; 
+    color: white !important; 
+    border-color: transparent !important; 
+    transform: translateY(-2px); 
+    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3) !important; 
+}
+.elegant-video-button-icon { width: 18px; height: 18px; margin-left: 8px; fill: currentColor; }
+
+.guide-actions { 
+    display: flex !important; 
+    gap: 12px !important; 
+    margin-top: 20px; 
+    padding-top: 20px; 
+    border-top: 1px solid #e2e8f0; 
+    width: 100% !important;
+}
+.action-button { 
+    padding: 12px 15px !important; 
+    border: none !important; 
+    border-radius: 12px !important; 
+    font-size: 0.95rem !important; 
+    font-weight: 600 !important; 
+    cursor: pointer !important; 
+    flex: 1 !important; 
+    transition: all 0.3s ease !important; 
+    display: flex !important; 
+    align-items: center; 
+    justify-content: center; 
+    font-family: inherit; 
+    height: 48px !important;
+}
+.action-button-icon { width: 20px; height: 20px; margin-right: 0; margin-left: 8px; }
+
+.back-button { 
+    background: white !important; 
+    color: var(--guide-text-body) !important; 
+    border: 2px solid #e2e8f0 !important; 
+}
+.back-button:hover { 
+    background: #f7fafc !important; 
+    border-color: var(--guide-accent) !important; 
+    transform: translateY(-2px); 
+    box-shadow: var(--shadow-md) !important; 
+}
+
+.retry-button { 
+    background: var(--primary-gradient-guide) !important; 
+    color: white !important; 
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important; 
+}
+.retry-button:hover { 
+    transform: translateY(-2px); 
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important; 
+}
+
+/* --- Main App CSS --- */
 /* Hidden inputs logic */
 #fingerprint_storage, #status_storage {
     display: none !important; 
@@ -557,7 +815,6 @@ css_code = """
     transition: all 0.3s ease;
 }
 
-/* Main App CSS */
 body { margin: 0; padding: 10px; }
 
 #col-container {
@@ -710,6 +967,8 @@ textarea:focus, input[type="text"]:focus {
 
 footer { display: none !important; }
 .flagging { display: none !important; }
+
+/* Force toast transparency for cleaner Custom Modal */
 .toast-body { direction: rtl !important; text-align: right !important; background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; max-width: 100% !important; width: auto !important; }
 .toast-wrap { background: transparent !important; border: none !important; box-shadow: none !important; }
 
@@ -731,7 +990,6 @@ with gr.Blocks() as demo:
     gr.HTML(combined_html)
     
     # اینپوت‌های مخفی برای انتقال دیتای کاربر از JS به Python
-    # visible=True است تا در DOM باشد ولی با CSS مخفی شده است
     fingerprint_box = gr.Textbox(elem_id="fingerprint_storage", visible=True)
     status_box_input = gr.Textbox(elem_id="status_storage", visible=True)
     
@@ -835,7 +1093,6 @@ with gr.Blocks() as demo:
         )
         
         # --- سیستم هوشمند: بررسی اعتبار در لحظه لود شدن ---
-        # به محض اینکه JS اثرانگشت را در باکس مخفی می‌ریزد، این تابع اجرا شده و دکمه‌ها را تنظیم می‌کند
         fingerprint_box.change(
             fn=check_initial_quota,
             inputs=[fingerprint_box, status_box_input],