Update app.py

app.py

@@ -33,8 +33,8 @@ device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
 
 # --- تنظیمات سیستم اعتبار ---
 USAGE_LIMIT = 5
-PREMIUM_PAGE_ID = '1149636'  # شناسه محصول برای تشخیص کاربر پولی
-user_quotas = {}  # حافظه موقت برای ذخیره تعداد درخواست‌های روزانه
+usage_data_cache = {}  # {fingerprint: {'count': 0, 'last_reset': 'YYYY-MM-DD'}}
+PREMIUM_PAGE_ID = '1149636' # شناسه محصول برای بررسی خرید
 
 # --- بارگذاری مدل تشخیص محتوای نامناسب (NSFW) ---
 print("Loading Safety Checker...")
@@ -175,34 +175,38 @@ def get_success_html(message):
     </div>
     """
 
-# --- تابع بررسی اعتبار کاربر ---
-def check_user_quota(fingerprint, status):
-    # اگر کاربر پولی است، محدودیت ندارد
-    if status == 'paid':
-        return True, ""
+def check_quota(fingerprint, subscription_status):
+    """
+    بررسی اعتبار کاربر.
+    اگر پولی باشد -> True
+    اگر رایگان باشد:
+       - بررسی تاریخ
+       - بررسی تعداد استفاده
+    """
+    if subscription_status == 'paid':
+        return True, "unlimited"
     
-    # اگر فینگرپرینت وجود ندارد (خطای کلاینت)، سخت‌گیری نمی‌کنیم اما لاگ می‌کنیم
     if not fingerprint:
-        return True, "" 
+        # اگر فینگرپرینت نرسید (مثلا جاوا اسکریپت لود نشد)، به عنوان مهمان یک بار اجازه دهیم یا خطا دهیم.
+        # اینجا فرض می‌کنیم باید خطا دهیم یا اجازه محدود دهیم.
+        return True, 0 # برای جلوگیری از خطا در اولین اجرا
+
+    today_str = date.today().isoformat()
+    user_record = usage_data_cache.get(fingerprint)
+
+    # اگر کاربر جدید است یا روز عوض شده
+    if not user_record or user_record.get("last_reset") != today_str:
+        user_record = {"count": 0, "last_reset": today_str}
+        usage_data_cache[fingerprint] = user_record
 
-    today = date.today().isoformat()
-    
-    # اگر کاربر جدید است یا روز تغییر کرده، رکورد جدید بساز
-    if fingerprint not in user_quotas or user_quotas[fingerprint]['date'] != today:
-        user_quotas[fingerprint] = {'date': today, 'count': 0}
-    
     # بررسی محدودیت
-    if user_quotas[fingerprint]['count'] >= USAGE_LIMIT:
-        return False, "اعتبار رایگان روزانه شما (۵ تصویر) تمام شده است. لطفاً برای استفاده نامحدود ارتقا دهید یا فردا تلاش کنید."
+    if user_record["count"] >= USAGE_LIMIT:
+        return False, user_record["count"]
     
-    return True, ""
+    # کسر اعتبار (در واقع افزایش استفاده)
+    user_record["count"] += 1
+    return True, user_record["count"]
 
-# --- تابع افزایش شمارنده اعتبار ---
-def increment_user_quota(fingerprint, status):
-    if status == 'paid' or not fingerprint:
-        return
-    if fingerprint in user_quotas:
-        user_quotas[fingerprint]['count'] += 1
 
 @spaces.GPU(duration=30)
 def infer(
@@ -216,13 +220,16 @@ def infer(
     aspect_ratio_selection,
     custom_width,
     custom_height,
-    fingerprint,  # ورودی جدید مخفی
-    user_status,  # ورودی جدید مخفی
+    fingerprint,
+    subscription_status,
     progress=gr.Progress(track_tqdm=True)
 ):
-    # 1. بررسی اعتبار قبل از هر پردازش
-    is_allowed, msg = check_user_quota(fingerprint, user_status)
+    # --- بررسی اعتبار ---
+    is_allowed, usage_count = check_quota(fingerprint, subscription_status)
+    
     if not is_allowed:
+        msg = "شما به محدودیت ۵ تصویر رایگان روزانه خود رسیده‌اید. لطفاً برای استفاده نامحدود حساب خود را ارتقا دهید."
+        # این پیام باعث نمایش مودال ارتقا می‌شود (به خاطر کلمه Quota یا Limited در JS)
         return None, seed, get_error_html(msg)
 
     if input_image is None:
@@ -275,10 +282,11 @@ def infer(
         if is_image_nsfw(result):
             return None, seed, get_error_html("تصویر تولید شده حاوی محتوای نامناسب بود و حذف شد.")
         
-        # اگر موفقیت‌آمیز بود، اعتبار را کم کن
-        increment_user_quota(fingerprint, user_status)
-
-        return result, seed, get_success_html("تصویر با موفقیت ویرایش شد.")
+        success_msg = f"تصویر با موفقیت ویرایش شد."
+        if subscription_status != 'paid':
+             success_msg += f" (اعتبار باقی‌مانده امروز: {USAGE_LIMIT - usage_count})"
+        
+        return result, seed, get_success_html(success_msg)
 
     except Exception as e:
         error_str = str(e)
@@ -288,11 +296,12 @@ def infer(
 
 @spaces.GPU(duration=30)
 def infer_example(input_image, prompt, lora_adapter):
-    # برای مثال‌ها، اعتبار را چک نمی‌کنیم یا فینگرپرینت خالی می‌فرستیم
-    res, s, status = infer(input_image, prompt, lora_adapter, 0, True, 1.0, 4, "خودکار (پیش‌فرض)", 1024, 1024, "", "free")
+    # برای مثال‌ها، فینگرپرینت ساختگی و وضعیت رایگان در نظر می‌گیریم اما معمولا مثال‌ها اعتبار کم نمی‌کنند
+    # یا می‌توانید برای مثال‌ها سختگیری نکنید. اینجا سختگیری نمیکنیم.
+    res, s, status = infer(input_image, prompt, lora_adapter, 0, True, 1.0, 4, "خودکار (پیش‌فرض)", 1024, 1024, "example_user", "paid")
     return res, s, status
 
-# --- جاوااسکریپت برای دکمه دانلود ---
+# --- جاوااسکریپت برای دانلود ---
 js_download_func = """
 async (image) => {
     if (!image) {
@@ -312,54 +321,121 @@ async (image) => {
 }
 """
 
-# --- جاوااسکریپت سراسری (شامل فینگرپرینت، استعلام وضعیت کاربر و ریست آی‌پی) ---
+# --- جاوااسکریپت جامع (Fingerprint, Subscription, UI, Errors) ---
 js_global_content = """
 <script>
-// --- START: Fingerprint & User Status Logic ---
-async function getBrowserFingerprint() {
-    const components = [navigator.userAgent, navigator.language, screen.width + 'x' + screen.height, new Date().getTimezoneOffset()];
-    try { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); ctx.textBaseline = "top"; ctx.font = "14px 'Arial'"; ctx.textBaseline = "alphabetic"; ctx.fillStyle = "#f60"; ctx.fillRect(125, 1, 62, 20); ctx.fillStyle = "#069"; ctx.fillText("a1b2c3d4e5f6g7h8i9j0_!@#$%^&*()", 2, 15); components.push(canvas.toDataURL()); } catch (e) { components.push("canvas-error"); }
-    const fingerprintString = components.join('~~~'); let hash = 0;
-    for (let i = 0; i < fingerprintString.length; i++) { const char = fingerprintString.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash |= 0; }
-    return 'fp_' + Math.abs(hash).toString(16);
-}
+document.addEventListener('DOMContentLoaded', () => {
+    // ---------------------------------------------
+    // 1. Fingerprint & Subscription Logic
+    // ---------------------------------------------
+    
+    // تابع تولید Fingerprint
+    async function getBrowserFingerprint() {
+        const components = [
+            navigator.userAgent,
+            navigator.language,
+            screen.width + 'x' + screen.height,
+            new Date().getTimezoneOffset()
+        ];
+        try {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            ctx.textBaseline = "top";
+            ctx.font = "14px 'Arial'";
+            ctx.textBaseline = "alphabetic";
+            ctx.fillStyle = "#f60";
+            ctx.fillRect(125, 1, 62, 20);
+            ctx.fillStyle = "#069";
+            ctx.fillText("a1b2c3d4e5f6g7h8i9j0_!@#$%^&*()", 2, 15);
+            components.push(canvas.toDataURL());
+        } catch (e) {
+            components.push("canvas-error");
+        }
+        const fingerprintString = components.join('~~~');
+        let hash = 0;
+        for (let i = 0; i < fingerprintString.length; i++) {
+            const char = fingerprintString.charCodeAt(i);
+            hash = ((hash << 5) - hash) + char;
+            hash |= 0;
+        }
+        return 'fp_' + Math.abs(hash).toString(16);
+    }
 
-// Global variables to hold status
-window.userFingerprint = null;
-window.userSubscriptionStatus = 'free';
+    // بررسی کاربر پولی بودن
+    function isUserPaid(userObject) {
+        const PREMIUM_PAGE_ID = '1149636'; 
+        if (userObject && userObject.isLogin && userObject.accessible_pages) {
+            // بررسی می‌کنیم آیا ID صفحه پرمیوم در لیست دسترسی‌ها هست یا نه
+            if (Array.isArray(userObject.accessible_pages)) {
+                 return userObject.accessible_pages.some(page => 
+                    String(page) === String(PREMIUM_PAGE_ID)
+                 );
+            }
+        }
+        return false;
+    }
+
+    // به‌روزرسانی UI badge
+    function updateSubscriptionBadge(status) {
+        const badge = document.getElementById('user-sub-badge');
+        const fpInput = document.querySelector('#fingerprint_storage textarea');
+        const stInput = document.querySelector('#status_storage textarea');
+
+        // مقداردهی اینپوت‌های مخفی برای ارسال به پایتون
+        if(fpInput) {
+            fpInput.value = window.userFingerprint || 'unknown';
+            fpInput.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+        if(stInput) {
+            stInput.value = status;
+            stInput.dispatchEvent(new Event('input', { bubbles: true }));
+        }
 
-document.addEventListener('DOMContentLoaded', async () => {
-    // 1. Calculate Fingerprint
-    window.userFingerprint = await getBrowserFingerprint();
-    console.log("Fingerprint:", window.userFingerprint);
+        if (!badge) return;
+        
+        if (status === 'paid') {
+            badge.innerHTML = '✨ اشتراک: <span style="color: #FFD700; font-weight: bold;">نامحدود (PRO)</span>';
+            badge.style.background = 'linear-gradient(45deg, #1e3a8a, #3b82f6)';
+        } else {
+            badge.innerHTML = '👤 اشتراک: <span style="color: #fff; font-weight: bold;">رایگان (۵ اعتبار روزانه)</span>';
+            badge.style.background = 'linear-gradient(45deg, #4b5563, #6b7280)';
+        }
+        badge.style.display = 'inline-block';
+    }
+
+    // شروع فرآیند شناسایی
+    async function initUserIdentity() {
+        window.userFingerprint = await getBrowserFingerprint();
+        
+        // درخواست وضعیت از Parent
+        window.parent.postMessage({ type: 'REQUEST_USER_STATUS' }, '*');
+        
+        // پیش‌فرض: رایگان
+        updateSubscriptionBadge('free');
+    }
 
-    // 2. Request User Status from Parent
+    // شنیدن پیام از Parent
     window.addEventListener('message', (event) => {
         if (event.data && event.data.type === 'USER_STATUS_RESPONSE') {
             try {
-                const userObject = JSON.parse(event.data.payload);
-                const PREMIUM_PAGE_ID = 1149636; // شناسه محصول
-                // بررسی دسترسی کاربر
-                if (userObject && userObject.isLogin && userObject.accessible_pages && 
-                   (userObject.accessible_pages.includes(PREMIUM_PAGE_ID) || userObject.accessible_pages.includes(String(PREMIUM_PAGE_ID)))) {
-                    window.userSubscriptionStatus = 'paid';
-                } else {
-                    window.userSubscriptionStatus = 'free';
-                }
-                console.log("User Status:", window.userSubscriptionStatus);
+                const userObject = typeof event.data.payload === 'string' 
+                                   ? JSON.parse(event.data.payload) 
+                                   : event.data.payload;
+                
+                const status = isUserPaid(userObject) ? 'paid' : 'free';
+                updateSubscriptionBadge(status);
             } catch (e) {
                 console.error("Error parsing user status:", e);
-                window.userSubscriptionStatus = 'free';
+                updateSubscriptionBadge('free');
             }
         }
     });
-    
-    // ارسال درخواست به پنجره والد
-    window.parent.postMessage({ type: 'REQUEST_USER_STATUS' }, '*');
-    
-    // --- Existing Logic (Theme, IP Reset, Scanner) ---
-    
-    // 1. Force Light Mode
+
+    initUserIdentity();
+
+    // ---------------------------------------------
+    // 2. UI Helper & Error Handling
+    // ---------------------------------------------
     const forceLight = () => {
         const body = document.querySelector('body');
         if (body) {
@@ -372,111 +448,72 @@ document.addEventListener('DOMContentLoaded', async () => {
     forceLight();
     setInterval(forceLight, 1000);
 
-    // 2. 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();
     };
 
-    // 3. SHOW MODAL FUNCTION (IP Reset)
     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 style="font-size: 2rem;">💎</div>
                         <div>
-                            <h2>یک قدم تا ساخت تصاویر جدید</h2>
-                            <p>نیازمند تغییر نقطه دستیابی</p>
+                            <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 class="info-card" style="border-color: #fbbf24; background: #fffbeb;">
+                            <p>شما از ۵ اعتبار رایگان امروز خود استفاده کرده‌اید. با خرید نسخه نامحدود، بدون هیچ محدودیتی تصویر بسازید.</p>
                         </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 onclick="parent.postMessage({ type: 'NAVIGATE_TO_URL', url: '#/nav/online/news/getSingle/1149636/eyJpdiI6InZSVUdlLzBlR0FzOHZJdXFZeWhER0E9PSIsInZhbHVlIjoiWFhqRXBLc29vSFpHdk9nYmRjZGVuWHRHRHVSZHRlTG1BUENLaE5mNXBNVVRGWFg3ZWN0djJ5K1dIY1RqTHJGaCIsIm1hYyI6IjIzYzFlZTMwYmVmMTdkYjQ0YTQ4YWMxNmFhN2RmNWQ2OTc1NDIyNGVlZGI3ZjJjMjhkNmQxNjM4MDFlZTIxNmUiLCJ0YWciOiIifQ==/20934991' }, '*')" class="elegant-video-button" style="background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: white !important;"> 
+                                <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);
     };
 
-    // 4. 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')) {
+            // اگر ارور مربوط به Quota بود (که از سمت پایتون میاد)
+            if (text.includes('محدودیت') && text.includes('رایگان')) {
                  showQuotaModal();
                  el.style.display = 'none';
-                 el.style.opacity = '0';
-                 el.innerText = '';
                  const parentWrap = el.closest('.toast-wrap');
                  if(parentWrap) parentWrap.style.display = 'none';
             }
         });
-    }, 100);
+    }, 500);
 });
 </script>
 """
 
-# --- CSS Updated (Larger & Auto Scroll) ---
+# --- CSS Updated ---
 css_code = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
@@ -484,168 +521,45 @@ css_code = """
 :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;
-}
-
-/* --- 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);
+    font-family: 'Vazirmatn', sans-serif !important;
 }
 
-@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); }
+/* Badge Style */
+#user-sub-badge {
+    padding: 6px 16px;
+    border-radius: 20px;
+    font-size: 0.9em;
+    color: white;
+    margin-top: 10px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    display: none; /* JS will show it */
+    transition: all 0.3s ease;
 }
 
+/* Modal CSS (Reused from previous request mostly) */
 .ip-reset-guide-container {
     text-align: right; 
     direction: rtl; 
-    background: var(--guide-bg); 
-    backdrop-filter: blur(10px);
-    padding: 20px; /* Increased Padding */
-    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;
+    background: #fff; 
+    padding: 25px;
+    border-radius: 16px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); 
     width: 90%; 
-    max-width: 420px; /* Increased width slightly */
-    max-height: 90vh; /* Prevent overflow on small screens */
-    overflow-y: auto; /* Enable scroll if needed */
-    position: relative; 
-    box-sizing: border-box;
+    max-width: 400px;
     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; }
-
-/* Tutorial Button */
-.video-button-container { text-align: center; margin: 20px 0 15px 0; width: 100%; }
+.guide-header { display: flex; align-items: center; margin-bottom: 15px; gap: 15px; }
+.guide-header h2 { margin: 0; font-size: 1.2rem; color: #1f2937; }
+.guide-content { font-size: 0.95rem; color: #4b5563; line-height: 1.6; }
+.info-card { padding: 12px; border-radius: 8px; border: 1px solid #e5e7eb; margin-bottom: 15px; }
 .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; }
-
-/* Action Buttons */
-.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 --- */
-body {
-    font-family: 'Vazirmatn', sans-serif !important;
-    background-color: #f5f7fa !important;
-    margin: 0;
-    padding: 10px;
+    display: inline-flex; width: 100%; justify-content: center; padding: 12px; 
+    border-radius: 12px; border: none; font-weight: bold; cursor: pointer; transition: transform 0.2s;
 }
+.elegant-video-button:hover { transform: translateY(-2px); }
+.action-button { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #d1d5db; background: white; cursor: pointer; }
 
+/* Main App Styles */
 #col-container {
     margin: 0 auto;
     max-width: 980px;
@@ -657,178 +571,57 @@ body {
     box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); 
     border: 1px solid rgba(255,255,255,0.8);
 }
-
 #main-title h1 {
     font-size: 2.4em !important;
     text-align: center;
     color: #1a202c !important;
-    margin-bottom: 15px;
+    margin-bottom: 5px;
     font-weight: 800;
     background: -webkit-linear-gradient(45deg, #2563eb, #1e40af);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
-
 #main-description {
     text-align: center;
     font-size: 1.15em;
     color: #4b5563 !important;
-    margin-bottom: 40px;
-    line-height: 1.6;
-}
-
-.gr-input-label, span.label-wrap, label span {
-    font-weight: 700 !important;
-    color: #374151 !important;
-    font-size: 0.95em !important;
-    margin-bottom: 8px !important;
-}
-
-textarea, input[type="text"] {
-    border: 2px solid #e2e8f0 !important;
-    border-radius: 12px !important;
-    background-color: #ffffff !important;
-    color: #111827 !important;
-    padding: 12px !important;
-    transition: all 0.3s ease;
-    font-family: 'Vazirmatn', sans-serif !important;
-}
-
-textarea:focus, input[type="text"]:focus {
-    border-color: #3b82f6 !important;
-    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1) !important;
-    outline: none;
+    margin-bottom: 10px;
 }
-
-.gr-dropdown {
-    background: #ffffff !important;
-    border-radius: 12px !important;
+#badge-container {
+    text-align: center;
+    margin-bottom: 30px;
+    height: 30px;
 }
-
-.primary-btn, button.primary {
+.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;
-    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
-    cursor: pointer !important;
-    width: 100%;
-    margin-top: 15px;
-}
-
-.primary-btn:hover, button.primary:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.45) !important;
-}
-
-.primary-btn:active, button.primary:active {
-    transform: translateY(1px);
-}
-
-#download-btn {
-    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
-    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3) !important;
-}
-#download-btn:hover {
-    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.45) !important;
-}
-
-.gradio-container .prose table, 
-.gradio-container table {
-    background-color: #ffffff !important;
-    color: #111827 !important;
-    border: 1px solid #e5e7eb !important;
-    border-radius: 12px !important;
-    overflow: hidden !important;
-    width: 100% !important;
-    margin-top: 20px !important;
-}
-
-.gradio-container thead th {
-    background-color: #f3f4f6 !important;
-    color: #374151 !important;
-    font-weight: 700 !important;
-    border-bottom: 2px solid #e5e7eb !important;
-    padding: 12px !important;
-    text-align: right !important;
-}
-
-.gradio-container tbody tr {
-    background-color: #ffffff !important;
-    border-bottom: 1px solid #f3f4f6 !important;
-}
-
-.gradio-container tbody tr:hover {
-    background-color: #f9fafb !important;
-}
-
-.gradio-container tbody td {
-    background-color: #ffffff !important;
-    color: #374151 !important;
-    padding: 10px !important;
-}
-
-.gradio-container tbody td span, 
-.gradio-container tbody td p {
-    color: #374151 !important;
-}
-
-footer { display: none !important; }
-.flagging { display: none !important; }
-
-/* Force toast transparency */
-.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;
-}
-
-@media (prefers-color-scheme: dark) {
-    body, .gradio-container, .prose, table, tr, td, th {
-        background-color: #ffffff !important;
-        color: #333333 !important;
-    }
 }
 </style>
 """
 
-# ادغام CSS و JS
 combined_html = css_code + js_global_content
 
-# استفاده از gr.Blocks
 with gr.Blocks() as demo:
-    # تزریق کدها به عنوان HTML
     gr.HTML(combined_html)
     
+    # کامپوننت‌های مخفی برای انتقال اطلاعات JS به Python
+    # مقدار این‌ها توسط JS پر می‌شود
+    fingerprint_box = gr.Textbox(elem_id="fingerprint_storage", visible=False)
+    status_box_input = gr.Textbox(elem_id="status_storage", visible=False)
+
     with gr.Column(elem_id="col-container"):
         gr.Markdown("# **ویرایشگر هوشمند آلفا**", elem_id="main-title")
         gr.Markdown(
             "با هوش مصنوعی آلفا تصاویر تونو به مدل های مختلف ویرایش کنید.", 
             elem_id="main-description"
         )
-        # --- متن اضافه شده برای مشخصات کاربران ---
-        gr.HTML(
-            """
-            <div style="text-align: center; margin-bottom: 20px; font-size: 0.9em; font-family: 'Vazirmatn', sans-serif;">
-                <span style="color: #666; margin: 0 10px; background: #f0f0f0; padding: 4px 10px; border-radius: 12px;">👤 نسخه رایگان: ۵ تصویر در روز</span>
-                <span style="color: #059669; margin: 0 10px; font-weight: bold; background: #d1fae5; padding: 4px 10px; border-radius: 12px;">⭐️ نسخه نامحدود: دسترسی کامل</span>
-            </div>
-            """
-        )
+        
+        # محل قرارگیری بج وضعیت اشتراک
+        gr.HTML('<div id="badge-container"><span id="user-sub-badge"></span></div>')
 
         with gr.Row(equal_height=True):
             with gr.Column():
@@ -844,7 +637,6 @@ with gr.Blocks() as demo:
                 
                 status_box = gr.HTML(label="وضعیت")
                 
-                # IMPORTANT: Added elem_id="run-btn" here for JS targeting
                 run_button = gr.Button("✨ شروع پردازش و ساخت تصویر", variant="primary", elem_classes="primary-btn", elem_id="run-btn")
 
             with gr.Column():
@@ -882,11 +674,6 @@ with gr.Blocks() as demo:
                     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)
         
-        # --- کامپوننت‌های مخفی برای انتقال اطلاعات کاربر ---
-        hidden_fingerprint = gr.Textbox(visible=False)
-        hidden_status = gr.Textbox(visible=False)
-
-        # اصلاح تابع نمایش ردیف اسلایدرها
         def toggle_row(choice):
             if choice == "شخصی‌سازی (Custom)":
                 return gr.update(visible=True)
@@ -919,23 +706,16 @@ with gr.Blocks() as demo:
             label="نمونه‌ها (برای تست کلیک کنید)"
         )
 
-    # جاوا اسکریپت برای تزریق فینگرپرینت و وضعیت به ورودی‌های تابع پایتون
-    # آرگومان‌های ورودی تابع js باید با inputs همخوانی داشته باشند (به جز دو مورد آخر که اضافه می‌کنیم)
-    js_click_handler = """
-    (img, p, lora, s, rs, gs, steps, ar, cw, ch, fp, stat) => {
-        return [
-            img, p, lora, s, rs, gs, steps, ar, cw, ch,
-            window.userFingerprint, 
-            window.userSubscriptionStatus
-        ];
-    }
-    """
-
+    # اتصال دکمه اجرا با ورودی‌های مخفی Fingerprint و Status
     run_button.click(
         fn=infer,
-        inputs=[input_image, prompt, lora_adapter_persian, seed, randomize_seed, guidance_scale, steps, aspect_ratio_selection, custom_width, custom_height, hidden_fingerprint, hidden_status],
+        inputs=[
+            input_image, prompt, lora_adapter, seed, randomize_seed, 
+            guidance_scale, steps, aspect_ratio_selection, 
+            custom_width, custom_height,
+            fingerprint_box, status_box_input # ارسال اطلاعات کاربر به تابع پایتون
+        ],
         outputs=[output_image, seed, status_box],
-        js=js_click_handler,
         api_name="predict"
     )