Update app.py

app.py

@@ -235,11 +235,9 @@ def infer(
         return result, seed, get_success_html("تصویر با موفقیت ویرایش شد.")
 
     except Exception as e:
-        # اگر خطا مربوط به Quota باشد، اجازه می‌دهیم خود سیستم خطا را تولید کند تا JS آن را بگیرد
-        # یا اگر Exception معمولی باشد آن را نشان می‌دهیم
         error_str = str(e)
         if "quota" in error_str.lower() or "exceeded" in error_str.lower():
-             raise e # اجازه می‌دهیم خطای اصلی بالا برود تا شامل اعداد زمان باشد
+             raise e 
         return None, seed, get_error_html(f"خطا در پردازش: {error_str}")
 
 @spaces.GPU(duration=30)
@@ -267,75 +265,7 @@ async (image) => {
 }
 """
 
-# --- جاوااسکریپت سراسری (تزریق پیام خطای جدید و تم روشن) ---
-js_global_content = """
-<script>
-document.addEventListener('DOMContentLoaded', () => {
-    // 1. Force Light Mode
-    const forceLight = () => {
-        const body = document.querySelector('body');
-        if (body) {
-            body.classList.remove('dark');
-            body.style.backgroundColor = '#f5f7fa';
-            body.style.color = '#333333';
-        }
-        document.querySelectorAll('.dark').forEach(el => el.classList.remove('dark'));
-    };
-    forceLight();
-    setInterval(forceLight, 1000);
-
-    // 2. NEW GPU Quota Replacer (Hourglass Style)
-    const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-            if (mutation.addedNodes.length) {
-                mutation.addedNodes.forEach((node) => {
-                    // فقط روی المان‌های مربوط به خطای گرادیو کار کن
-                    if (node.nodeType === 1 && (node.classList.contains('toast-body') || node.classList.contains('error'))) {
-                        const originalText = node.innerText;
-                        
-                        // Regex برای پیدا کردن اعداد زمان
-                        const regex = /(\d+)s requested vs. (\d+)s left/;
-                        const match = originalText.match(regex);
-                        
-                        // اگر متن خطا مربوط به Quota بود و قبلا ترجمه نشده بود
-                        if (match && !node.dataset.translated) {
-                            const requested = match[1];
-                            const left = match[2];
-                            
-                            // **ساخت کارت HTML زیبا**
-                            const prettyHtml = `
-                                <div style="display: flex; align-items: center; gap: 15px; font-family: 'Tahoma', sans-serif; direction: rtl; padding: 10px;">
-                                    <div style="font-size: 2.5em; color: #dc3545;">⏳</div>
-                                    <div>
-                                        <h4 style="margin: 0; color: #5a6268; font-weight: bold;">ظرفیت سرور تکمیل است!</h4>
-                                        <p style="margin: 5px 0 0 0; color: #6c757d; font-size: 0.9em;">
-                                            سهمیه رایگان GPU شما برای پردازش یک ویدیوی <b>${requested} ثانیه‌ای</b> کافی نیست.
-                                        </p>
-                                        <div style="background-color: #f8d7da; border: 1px solid #f5c6cb; border-radius: 5px; padding: 5px 8px; margin-top: 10px; font-size: 0.85em;">
-                                            اعتبار باقیمانده: <b>${left} ثانیه</b>
-                                        </div>
-                                    </div>
-                                </div>
-                            `;
-                            
-                            // جایگزینی محتوای قدیمی با کارت جدید
-                            node.innerHTML = prettyHtml;
-                            
-                            // جلوگیری از ترجمه مجدد
-                            node.dataset.translated = 'true'; 
-                        }
-                    }
-                });
-            }
-        });
-    });
-
-    observer.observe(document.body, { childList: true, subtree: true });
-});
-</script>
-"""
-
-# --- CSS ---
+# --- CSS به‌روزرسانی شده (شامل استایل‌های جدید راهنمای IP) ---
 css_code = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
@@ -350,6 +280,21 @@ css_code = """
     --block-label-text-color: #374151 !important;
     --block-title-text-color: #111827 !important;
     --input-background-fill: #ffffff !important;
+    
+    /* متغیرهای جدید برای راهنمای IP */
+    --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: 20px;
+    --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
+    --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
+    --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05);
+    
     color-scheme: light !important;
 }
 
@@ -360,159 +305,212 @@ body {
     padding: 10px;
 }
 
-#col-container {
-    margin: 0 auto;
-    max-width: 980px;
-    direction: rtl;
-    text-align: right;
-    padding: 30px;
-    background: #ffffff !important;
-    border-radius: 24px;
-    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); 
-    border: 1px solid rgba(255,255,255,0.8);
+/* انیمیشن‌های مورد نیاز */
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
 }
-
-#main-title h1 {
-    font-size: 2.4em !important;
-    text-align: center;
-    color: #1a202c !important;
-    margin-bottom: 15px;
-    font-weight: 800;
-    background: -webkit-linear-gradient(45deg, #2563eb, #1e40af);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+@keyframes slideInUp {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-#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;
+/* استایل‌های اصلی کانتینر راهنمای IP */
+.ip-reset-guide-container {
+    text-align: right; 
+    background: var(--guide-bg); 
+    backdrop-filter: blur(10px);
+    padding: 40px; 
+    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%; 
+    position: relative; 
+    overflow: hidden; 
+    box-sizing: border-box;
     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;
-}
-
-.gr-dropdown {
-    background: #ffffff !important;
-    border-radius: 12px !important;
-}
-
-.primary-btn, button.primary {
-    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;
+.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: 30px; direction: rtl; }
+.guide-header-icon { width: 60px; height: 60px; margin-left: 20px; animation: float 3s ease-in-out infinite; }
+.guide-header h2 { font-size: 1.5rem; color: var(--guide-text-title); font-weight: 700; margin: 0; }
+.guide-header p { color: var(--guide-text-body); font-size: 0.8rem; margin-top: 5px; margin-bottom: 0; }
+.guide-content { font-size: 0.95rem; color: var(--guide-text-body); line-height: 1.8; direction: rtl; }
+.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: 20px; margin: 20px 0; position: relative; overflow: hidden; }
+.info-card p { font-size: 0.85rem; line-height: 1.7; margin: 0; }
+.info-card::before { content: ''; position: absolute; top: 0; right: 0; width: 4px; height: 100%; background: var(--primary-gradient-guide); }
+.info-card-header { display: flex; align-items: center; margin-bottom: 12px; }
+.info-card-icon { width: 24px; height: 24px; margin-left: 12px; }
+.info-card-title { font-weight: 600; color: var(--guide-text-title); font-size: 1rem; }
+.summary-section { margin-top: 25px; padding: 20px; 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: 4px; height: 100%; background: var(--success-gradient-guide); }
+.summary-header { display: flex; align-items: center; margin-bottom: 10px; }
+.summary-icon { width: 24px; height: 24px; margin-left: 10px; }
+.summary-title { font-weight: 600; color: #2f5a33; font-size: 1rem; }
+.summary-text { color: #2f5a33; font-size: 0.9rem; line-height: 1.7; }
+.video-button-container { text-align: center; margin: 25px 0 10px 0; }
+.elegant-video-button { display: inline-flex; align-items: center; justify-content: center; padding: 7px 18px; background-color: #f0f2f5; color: var(--guide-accent); border: 1px solid #e2e8f0; text-decoration: none; border-radius: var(--radius-md-guide); font-weight: 600; font-size: 0.8rem; cursor: pointer; font-family: inherit; transition: all 0.3s ease; box-shadow: var(--shadow-sm); }
+.elegant-video-button:hover { background: var(--primary-gradient-guide); color: white; border-color: transparent; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(102, 126, 234, 0.3); }
+.elegant-video-button-icon { width: 16px; height: 16px; margin-left: 8px; fill: currentColor; }
+.guide-actions { display: flex; gap: 15px; margin-top: 30px; padding-top: 25px; border-top: 1px solid #e2e8f0; direction: rtl; }
+.action-button { padding: 14px 24px; border: none; border-radius: var(--radius-md-guide); font-size: 0.95rem; font-weight: 600; cursor: pointer; flex: 1; transition: var(--transition-smooth); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; font-family: inherit; }
+.action-button-icon { width: 20px; height: 20px; margin-right: 0; margin-left: 8px; }
+.back-button { background: white; color: var(--guide-text-body); border: 2px solid #e2e8f0; flex: 0.4; }
+.back-button:hover { background: #f7fafc; border-color: var(--guide-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); }
+.retry-button { background: var(--primary-gradient-guide); color: white; flex: 0.6; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); }
+.retry-button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); }
+
+/* --- استایل‌های قبلی --- */
+#col-container { margin: 0 auto; max-width: 980px; direction: rtl; text-align: right; padding: 30px; background: #ffffff !important; border-radius: 24px; 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; 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; }
+.gr-dropdown { background: #ffffff !important; border-radius: 12px !important; }
+.primary-btn, button.primary { 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; }
+#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; }
+.toast-body { direction: rtl !important; text-align: right !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important;}
+.toast-wrap { border: none !important; background: transparent !important; box-shadow: none !important; }
 
-.gradio-container tbody td {
-    background-color: #ffffff !important;
-    color: #374151 !important;
-    padding: 10px !important;
+@media (prefers-color-scheme: dark) {
+    body, .gradio-container, .prose, table, tr, td, th { background-color: #ffffff !important; color: #333333 !important; }
 }
+</style>
+"""
 
-.gradio-container tbody td span, 
-.gradio-container tbody td p {
-    color: #374151 !important;
-}
+# --- جاوااسکریپت سراسری (تزریق پیام خطای جدید پیشرفته) ---
+js_global_content = """
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    // 1. Force Light Mode
+    const forceLight = () => {
+        const body = document.querySelector('body');
+        if (body) {
+            body.classList.remove('dark');
+            body.style.backgroundColor = '#f5f7fa';
+            body.style.color = '#333333';
+        }
+        document.querySelectorAll('.dark').forEach(el => el.classList.remove('dark'));
+    };
+    forceLight();
+    setInterval(forceLight, 1000);
 
-footer { display: none !important; }
-.flagging { display: none !important; }
+    // 2. NEW ADVANCED GPU Quota Replacer
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.addedNodes.length) {
+                mutation.addedNodes.forEach((node) => {
+                    // Check for Gradio error toasts
+                    if (node.nodeType === 1) {
+                         // Look for the toast container or body
+                        let targetNode = node.classList.contains('toast-body') ? node : node.querySelector('.toast-body');
+                        
+                        // Also check simple class structure in case Gradio updates
+                        if (!targetNode && (node.classList.contains('toast') || node.classList.contains('error'))) {
+                            targetNode = node;
+                        }
 
-/* استایل Toast برای راست چین کردن */
-.toast-body {
-    direction: rtl !important;
-    text-align: right !important;
-}
+                        if (targetNode) {
+                            const textContent = targetNode.innerText || "";
+                            
+                            // If it's a Quota error
+                            if (textContent.includes("exceeded your GPU quota") || textContent.includes("Quota Exceeded")) {
+                                
+                                // The exact HTML structure requested by the user
+                                const newHtml = `
+                                    <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="window.open('https://www.aparat.com/v/your_video_id_here', '_blank')" 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="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>
+                                `;
+                                
+                                // Replace content
+                                targetNode.innerHTML = newHtml;
+                                
+                                // Clean up parent styles to allow full-width transparent display
+                                let wrapper = targetNode.closest('.toast-wrap');
+                                if(wrapper) {
+                                    wrapper.style.backgroundColor = 'transparent';
+                                    wrapper.style.boxShadow = 'none';
+                                    wrapper.style.border = 'none';
+                                    wrapper.style.maxWidth = '100%';
+                                    wrapper.style.width = 'auto';
+                                }
+                                targetNode.style.backgroundColor = 'transparent';
+                                targetNode.style.padding = '0';
+                                targetNode.style.boxShadow = 'none';
+                                targetNode.style.border = 'none';
+                            }
+                        }
+                    }
+                });
+            }
+        });
+    });
 
-@media (prefers-color-scheme: dark) {
-    body, .gradio-container, .prose, table, tr, td, th {
-        background-color: #ffffff !important;
-        color: #333333 !important;
-    }
-}
-</style>
+    observer.observe(document.body, { childList: true, subtree: true });
+});
+</script>
 """
 
 # ادغام CSS و JS
 combined_html = css_code + js_global_content
 
-# استفاده از gr.Blocks بدون پارامتر js
+# استفاده از gr.Blocks
 with gr.Blocks() as demo:
     # تزریق کدها به عنوان HTML
     gr.HTML(combined_html)