Update app.py

app.py

@@ -265,7 +265,7 @@ async (image) => {
 }
 """
 
-# --- جاوااسکریپت سراسری ---
+# --- جاوااسکریپت سراسری (بهینه شده برای رفع مشکل عدم نمایش بار دوم) ---
 js_global_content = """
 <script>
 document.addEventListener('DOMContentLoaded', () => {
@@ -282,101 +282,120 @@ document.addEventListener('DOMContentLoaded', () => {
     forceLight();
     setInterval(forceLight, 1000);
 
-    // 2. NEW GPU Quota Replacer (Fixed Buttons)
+    // 2. NEW GPU Quota Replacer (ROBUST VERSION)
+    // This function handles the replacement logic
+    const replaceError = (node) => {
+        if (!node || node.dataset.translated) return;
+        
+        const originalText = node.innerText || "";
+        // Regex to catch Quota Exceeded error
+        const regex = /(\d+)s requested vs. (\d+)s left/;
+        const match = originalText.match(regex);
+        
+        // Also check if it's a generic error that might have been caused by quota but lost details
+        if (match || originalText.includes("GPU quota") || originalText.includes("exceeded")) {
+            
+            const prettyHtml = `
+                <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="this.closest('.toast-wrap').remove()"> 
+                            <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="
+                            const runBtn = document.getElementById('run-btn');
+                            if(runBtn) runBtn.click();
+                            // Optional: Close current toast, though clicking run usually clears it
+                            try { this.closest('.toast-wrap').remove(); } catch(e){}
+                        "> 
+                            <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>
+            `;
+            
+            node.innerHTML = prettyHtml;
+            node.dataset.translated = 'true';
+            node.style.padding = '0';
+            node.style.backgroundColor = 'transparent';
+        }
+    };
+
+    // Method A: Mutation Observer (Fast reaction)
     const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
             if (mutation.addedNodes.length) {
                 mutation.addedNodes.forEach((node) => {
-                    // Check for Gradio error toast
                     if (node.nodeType === 1 && (node.classList.contains('toast-body') || node.classList.contains('error'))) {
-                        const originalText = node.innerText;
-                        
-                        // Check for Quota Exceeded pattern
-                        const regex = /(\d+)s requested vs. (\d+)s left/;
-                        const match = originalText.match(regex);
-                        
-                        if (match && !node.dataset.translated) {
-                            
-                            // HTML Template for the IP Reset Guide
-                            const prettyHtml = `
-                                <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="this.closest('.toast-wrap').remove()"> 
-                                            <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="
-                                            const runBtn = document.getElementById('run-btn');
-                                            if(runBtn) runBtn.click();
-                                            this.closest('.toast-wrap').remove();
-                                        "> 
-                                            <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>
-                            `;
-                            
-                            // Set content
-                            node.innerHTML = prettyHtml;
-                            node.dataset.translated = 'true';
-                            
-                            // Style adjustment for the container to fit nicely
-                            node.style.padding = '0';
-                            node.style.backgroundColor = 'transparent';
-                        }
+                        replaceError(node);
+                    }
+                    // Also check children just in case
+                    if (node.nodeType === 1 && node.querySelector) {
+                         const childError = node.querySelector('.toast-body, .error');
+                         if (childError) replaceError(childError);
                     }
                 });
             }
         });
     });
-
     observer.observe(document.body, { childList: true, subtree: true });
+
+    // Method B: Interval Scanner (Backup for missed events/re-renders)
+    // This fixes the issue where the second error doesn't show
+    setInterval(() => {
+        const errorNodes = document.querySelectorAll('.toast-body, .error');
+        errorNodes.forEach(node => {
+            if (!node.dataset.translated) {
+                replaceError(node);
+            }
+        });
+    }, 500);
 });
 </script>
 """
 
-# --- CSS Updated for Beautiful Buttons ---
+# --- CSS Updated ---
 css_code = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
@@ -460,13 +479,13 @@ css_code = """
 .summary-title { font-weight: 600; color: #2f5a33; font-size: 0.95rem; }
 .summary-text { color: #2f5a33; font-size: 0.85rem; line-height: 1.6; }
 
-/* Tutorial Button Styles */
+/* Tutorial Button Styles - BEAUTIFIED */
 .video-button-container { text-align: center; margin: 25px 0 15px 0; width: 100%; }
 .elegant-video-button { 
     display: inline-flex !important; 
     align-items: center; 
     justify-content: center; 
-    padding: 10px 20px !important; 
+    padding: 10px 24px !important; 
     background-color: #fff !important; 
     color: var(--guide-accent) !important; 
     border: 1px solid #e2e8f0 !important; 
@@ -489,7 +508,7 @@ css_code = """
 }
 .elegant-video-button-icon { width: 18px; height: 18px; margin-left: 8px; fill: currentColor; }
 
-/* Action Buttons Styles (Back & Retry) */
+/* Action Buttons Styles (Back & Retry) - FIXED */
 .guide-actions { 
     display: flex !important; 
     gap: 12px !important; 
@@ -679,7 +698,7 @@ textarea:focus, input[type="text"]:focus {
 footer { display: none !important; }
 .flagging { display: none !important; }
 
-/* General Toast Override */
+/* General Toast Override - Forces transparency so our card looks good */
 .toast-body {
     direction: rtl !important;
     text-align: right !important;