Update app.py

app.py

@@ -265,7 +265,7 @@ async (image) => {
 }
 """
 
-# --- جاوااسکریپت سراسری (استراتژی پنجره شناور مستقل) ---
+# --- جاوااسکریپت سراسری (نسخه نهایی راست‌چین) ---
 js_global_content = """
 <script>
 document.addEventListener('DOMContentLoaded', () => {
@@ -284,11 +284,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // 2. RETRY FUNCTION
     window.retryGeneration = function() {
-        // Close modal
         const modal = document.getElementById('custom-quota-modal');
         if (modal) modal.remove();
 
-        // Click Run button
         const runBtn = document.getElementById('run-btn');
         if(runBtn) runBtn.click();
     };
@@ -301,12 +299,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // 3. SHOW MODAL FUNCTION
     const showQuotaModal = () => {
-        // Prevent duplicate modals
         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" style="max-width: 450px; width: 90%; background: white; border-radius: 20px; padding: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); animation: slideInUp 0.4s ease;">
+                <div class="ip-reset-guide-container" style="direction: rtl; text-align: right; max-width: 450px; width: 90%; background: white; border-radius: 20px; padding: 25px; box-shadow: 0 10px 40px rgba(0,0,0,0.3); animation: slideInUp 0.4s ease;">
                     <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> 
@@ -366,29 +363,24 @@ document.addEventListener('DOMContentLoaded', () => {
 
     // 4. SCANNER
     setInterval(() => {
-        // Find ALL possible error containers, including small toasts and status bars
         const potentialErrors = document.querySelectorAll('.toast-body, .error, .toast-wrap, .eta-bar, div[class*="error"]');
         
         potentialErrors.forEach(el => {
             const text = el.innerText || "";
-            // Trigger words
             if (text.toLowerCase().includes('quota') || text.toLowerCase().includes('exceeded')) {
                  
-                 // Show our custom modal if not already open
                  showQuotaModal();
                  
-                 // IMMEDIATELY HIDE/REMOVE the ugly Gradio error
-                 // We use display:none or remove() to ensure it's gone
+                 // Immediately hide the Gradio error
                  el.style.display = 'none';
                  el.style.opacity = '0';
-                 el.innerText = ''; // Clear text so it doesn't trigger again immediately for this specific node
+                 el.innerText = '';
                  
-                 // Also try to find parent wrapper and hide it
                  const parentWrap = el.closest('.toast-wrap');
                  if(parentWrap) parentWrap.style.display = 'none';
             }
         });
-    }, 100); // Check every 100ms
+    }, 100);
 });
 </script>
 """
@@ -436,6 +428,26 @@ css_code = """
     to { opacity: 1; transform: translateY(0); }
 }
 
+.ip-reset-guide-container {
+    text-align: right; 
+    direction: rtl; /* Added this to CSS class as well */
+    background: var(--guide-bg); 
+    backdrop-filter: blur(10px);
+    padding: 25px; 
+    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: 100%; 
+    max-width: 450px; 
+    position: relative; 
+    overflow: hidden; 
+    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: 5px; background: var(--primary-gradient-guide);
+}
 .guide-header { display: flex; align-items: center; margin-bottom: 20px; }
 .guide-header-icon { width: 50px; height: 50px; margin-left: 15px; animation: float 3s ease-in-out infinite; flex-shrink: 0; }
 .guide-header h2 { font-size: 1.3rem; color: var(--guide-text-title); font-weight: 700; margin: 0; }