Update app.py

app.py

@@ -132,7 +132,7 @@ def consume_quota(fingerprint):
     return user_record["count"]
 
 # ==========================================
-# 3. سیستم ایمنی (Safety)
+# 3. سیستم ایمنی (Safety - Strict Mode)
 # ==========================================
 print("Loading Safety Checker...")
 safety_classifier = pipeline("image-classification", model="Falconsai/nsfw_image_detection", device=-1)
@@ -443,6 +443,7 @@ async (image) => {
 
 js_upgrade_func = """() => { window.parent.postMessage({ type: 'NAVIGATE_TO_PREMIUM' }, '*'); }"""
 
+# جاوا اسکریپت با مودال دقیق و استایل دار
 js_global = """
 <script>
 document.addEventListener('DOMContentLoaded', () => {
@@ -510,31 +511,82 @@ document.addEventListener('DOMContentLoaded', () => {
 
     init();
 
-    // GPU QUOTA MODAL
-    window.retryGeneration = function() { document.getElementById('custom-quota-modal')?.remove(); document.getElementById('run-btn')?.click(); };
-    window.closeErrorModal = function() { document.getElementById('custom-quota-modal')?.remove(); };
+    // ---------------------------------------------
+    // GPU QUOTA HANDLER (Exact Styled Modal)
+    // ---------------------------------------------
+    window.retryGeneration = function() {
+        const modal = document.getElementById('custom-quota-modal');
+        if (modal) modal.remove();
+        const runBtn = document.getElementById('run-btn');
+        if(runBtn) runBtn.click();
+    };
+    window.closeErrorModal = function() {
+         const modal = document.getElementById('custom-quota-modal');
+         if (modal) modal.remove();
+    };
 
     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" style="background: rgba(255, 255, 255, 0.98); padding: 20px; border-radius: 16px; width: 90%; max-width: 420px; text-align: right; direction: rtl;">
-                    <h2 style="color: #2d3748; margin-bottom: 10px;">یک قدم تا ساخت تصاویر جدید</h2>
-                    <p style="color: #4a5568; font-size: 0.9rem;">نیازمند تغییر نقطه دستیابی (IP) هستید.</p>
-                    <div style="background: #FFF0E5; padding: 12px; border-radius: 8px; margin: 10px 0; border: 1px solid #FF8533;">
-                        <p style="margin:0; font-size: 0.85rem; color: #992900;">از اینترنت سیم‌کارت استفاده کنید، VPN را خاموش کرده، نقطه دستیابی را طبق ویدیو تغییر دهید و «تلاش مجدد» بزنید.</p>
+                <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 style="text-align:center; margin: 15px 0;">
-                        <button onclick="parent.postMessage({ type: 'NAVIGATE_TO_URL', url: '#/nav/online/news/getSingle/1149635/eyJpdiI6IjhHVGhPQWJwb3E0cjRXbnFWTW5BaUE9PSIsInZhbHVlIjoiS1V0dTdvT21wbXAwSXZaK1RCTG1pVXZqdlFJa1hXV1RKa2FLem9zU3pXMjd5MmlVOGc2YWY0NVdNR3h3Smp1aSIsIm1hYyI6IjY1NTA5ZDYzMjAzMTJhMGQyMWQ4NjA4ZDgyNGZjZDVlY2MyNjdiMjA2NWYzOWRjY2M4ZmVjYWRlMWNlMWQ3ODEiLCJ0YWciOiIifQ==/21135210' }, '*')" style="padding: 8px 16px; background: white; border: 1px solid #ccc; border-radius: 20px; cursor: pointer;">ویدیو آموزشی</button>
+                    
+                    <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 style="display: flex; gap: 10px;">
-                        <button onclick="window.closeErrorModal()" style="flex:1; padding: 10px; background: white; border: 1px solid #ccc; border-radius: 8px; cursor: pointer;">بازگشت</button>
-                        <button onclick="window.retryGeneration()" style="flex:1; padding: 10px; background: linear-gradient(135deg, #FF4500, #FF8533); color: white; border: none; border-radius: 8px; cursor: pointer;">تلاش مجدد</button>
+                    
+                    <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>`;
+            </div>
+        `;
+        
         document.body.insertAdjacentHTML('beforeend', modalHtml);
-        setTimeout(() => window.closeErrorModal(), 10000);
+        setTimeout(() => { window.closeErrorModal(); }, 10000);
     };
 
     setInterval(() => {
@@ -563,9 +615,7 @@ css_code = """
 #col-container { margin: 0 auto; max-width: 1100px; direction: rtl; text-align: right; background: white; padding: 30px; border-radius: 20px; }
 
 /* Centered Titles */
-#main-title, #main-description {
-    text-align: center !important;
-}
+#main-title, #main-description { text-align: center !important; }
 
 #badge-container { text-align: center; margin-bottom: 20px; height: 30px; }
 #user-sub-badge { padding: 6px 16px; border-radius: 20px; font-size: 0.9em; color: white; display: none; }
@@ -573,6 +623,41 @@ css_code = """
 .upgrade-btn { width: 100%; margin-top: 15px; background: linear-gradient(135deg, #f59e0b, #d97706); color: white; border: none; animation: pulse 2s infinite; }
 @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }
 footer { display: none !important; }
+
+/* Modal CSS (Copied Exactly) */
+: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-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; }
+.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); }
+.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; }
 </style>
 """