Update app.py

app.py

@@ -9,7 +9,7 @@ import google.generativeai as genai
 import logging
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(threadName)s - %(message)s')
-logging.info(f"Gradio version: {gr.__version__}") # This will print the actual Gradio version being used
+logging.info(f"Gradio version: {gr.__version__}")
 
 GOOGLE_API_KEY = os.environ.get('GOOGLE_API_KEY')
 model = None
@@ -23,7 +23,7 @@ if GOOGLE_API_KEY:
 else:
     logging.warning("کلید API گوگل (GOOGLE_API_KEY) تنظیم نشده است.")
 
-# --- دیکشنری کامل صداهای انگلیسی (همانند قبل) ---
+# --- دیکشنری کامل صداهای انگلیسی ---
 language_dict_persian_keys = {
     'انگلیسی (آمریکا) - جنی (زن)': 'en-US-JennyNeural', 'انگلیسی (آمریکا) - گای (مرد)': 'en-US-GuyNeural',
     'انگلیسی (آمریکا) - آنا (زن، صدای کودک)': 'en-US-AnaNeural', 'انگلیسی (آمریکا) - آریا (زن)': 'en-US-AriaNeural',
@@ -59,120 +59,95 @@ language_dict_persian_keys = {
 }
 
 async def translate_text_gemini_async(text, target_language="English"):
-    if not model: logging.error("Gemini model not loaded."); return "Error: Translation service unavailable.", None
-    if not text or not text.strip(): logging.warning("Translate: Empty input text."); return "Error: Input text is empty.", None
+    if not model: logging.error("Gemini model not loaded."); return "خطا: سرویس ترجمه در دسترس نیست.", None
+    if not text or not text.strip(): logging.warning("Translate: Empty input text."); return "خطا: متن ورودی خالی است.", None
     try:
         prompt = f"Translate the following Persian text to {target_language}. Provide only the translated English text, naturally and fluently, without any extra phrases, explanations, or markdown formatting. Be concise and accurate.\n\nPersian: \"{text}\"\n{target_language}:"
         response = await model.generate_content_async(prompt)
         translated_text = response.text.strip()
         if translated_text.lower().startswith(f"{target_language.lower()}:"):
             translated_text = translated_text[len(target_language)+1:].strip()
-        return "Translation successful", translated_text
-    except Exception as e: logging.error(f"Gemini translation error: {e}", exc_info=True); return f"Translation error: {type(e).__name__}", None
+        return "ترجمه موفق", translated_text
+    except Exception as e: logging.error(f"Gemini translation error: {e}", exc_info=True); return f"خطا در ترجمه: {type(e).__name__}", None
 
 async def text_to_speech_edge_tts_async(text_to_speak, tts_voice_key, rate, volume, pitch):
-    if not text_to_speak or not text_to_speak.strip(): logging.warning("TTS: Empty input text."); return "TTS Error: Input text is empty.", None
+    if not text_to_speak or not text_to_speak.strip(): logging.warning("TTS: Empty input text."); return "خطا در TTS: متن ورودی خالی است.", None
     voice_id = language_dict_persian_keys.get(tts_voice_key)
-    if voice_id is None: logging.error(f"TTS: Voice key '{tts_voice_key}' not found."); return f"TTS Error: Voice '{tts_voice_key}' not found.", None
+    if voice_id is None: logging.error(f"TTS: Voice key '{tts_voice_key}' not found."); return f"خطا در TTS: صدای '{tts_voice_key}' یافت نشد.", None
     try:
         rate_str, volume_str, pitch_str = f"{int(rate):+g}%", f"{int(volume):+g}%", f"{int(pitch):+g}Hz"
         communicate = edge_tts.Communicate(text_to_speak, voice_id, rate=rate_str, volume=volume_str, pitch=pitch_str)
         with tempfile.NamedTemporaryFile(delete=False, suffix=".mp3") as tmp_file: tmp_path = tmp_file.name
         await communicate.save(tmp_path)
-        return "TTS successful", tmp_path
-    except Exception as e: logging.error(f"Edge-TTS error: {e}", exc_info=True); return f"TTS Error: {type(e).__name__}", None
+        return "TTS موفق", tmp_path
+    except Exception as e: logging.error(f"Edge-TTS error: {e}", exc_info=True); return f"خطا در TTS: {type(e).__name__}", None
 
 _thread_local = threading.local()
 
 def get_event_loop():
     if not hasattr(_thread_local, 'loop') or _thread_local.loop.is_closed():
         _thread_local.loop = asyncio.new_event_loop()
-        logging.info(f"Created new event loop for thread {threading.get_ident()}")
+        logging.info(f"Created or reopened new event loop for thread {threading.get_ident()}")
     
     try:
+        current_loop = asyncio.get_event_loop_policy().get_event_loop()
+        if current_loop is not _thread_local.loop:
+             asyncio.set_event_loop(_thread_local.loop)
+    except RuntimeError as e: # No current event loop
         asyncio.set_event_loop(_thread_local.loop)
-    except RuntimeError as e:
-        if "cannot be called from a running event loop" not in str(e).lower() and \
-           "There is no current event loop in thread" not in str(e):
-             logging.warning(f"RuntimeError setting event loop (possibly already running or other issue): {e}")
-        if asyncio.get_event_loop_policy().get_event_loop() is not _thread_local.loop:
-            try:
-                asyncio.set_event_loop(_thread_local.loop)
-            except RuntimeError as e_retry:
-                logging.warning(f"Retry setting event loop failed: {e_retry}")
+        logging.info(f"Set event loop for thread {threading.get_ident()} as no current loop was found or it was different.")
+
     return _thread_local.loop
 
+
 def translate_and_speak_sync_wrapper(persian_text, english_tts_voice_key, rate, volume, pitch):
     logging.info(f"Wrapper called. Text: '{persian_text[:30]}...' Voice: {english_tts_voice_key}")
     loop = get_event_loop()
     
     if not GOOGLE_API_KEY or not model:
-        msg = "خطا: سرویس ترجمه پیکربندی نشده است. لطفاً از تنظیم GOOGLE_API_KEY در Secrets اطمینان حاصل کنید."
+        msg = "خطا: سرویس ترجمه پیکربندی نشده است. لطفاً از تنظیم GOOGLE_API_KEY اطمینان حاصل کنید."
         logging.error(msg); return msg, None
     if not persian_text or not persian_text.strip():
         msg = "لطفاً متن فارسی را برای ترجمه وارد کنید."
         logging.warning(msg); return msg, None
+    if not english_tts_voice_key or english_tts_voice_key == "لیست خالی":
+        msg = "لطفاً یک صدای گوینده انتخاب کنید."
+        logging.warning(msg); return persian_text, None # برگرداندن متن فارسی اگر صدا انتخاب نشده
+
     try:
         translation_status_msg, translated_text = loop.run_until_complete(
             translate_text_gemini_async(persian_text)
         )
-        if "error" in translation_status_msg.lower() or not translated_text or "خطا" in translation_status_msg.lower() :
+        if "خطا" in translation_status_msg.lower() or not translated_text:
             err_msg = f"ترجمه ناموفق: {translation_status_msg} {translated_text or ''}"
             logging.error(err_msg); return err_msg, None
         
         tts_status_msg, audio_path = loop.run_until_complete(
             text_to_speech_edge_tts_async(translated_text, english_tts_voice_key, rate, volume, pitch)
         )
-        if "error" in tts_status_msg.lower() or not audio_path or "خطا" in tts_status_msg.lower():
-            err_msg = f"{translated_text}\n(خطای TTS: {tts_status_msg})"
+        if "خطا" in tts_status_msg.lower() or not audio_path:
+            err_msg = f"{translated_text}\n(خطای TTS: {tts_status_msg})" # نمایش متن ترجمه شده همراه با خطای TTS
             logging.error(err_msg); return err_msg, None
             
-        logging.info(f"عملیات موفق. مسیر صوت: {audio_path}")
+        logging.info(f"عملیات موفق. متن ترجمه شده: '{translated_text[:30]}...', مسیر صوت: {audio_path}")
         return translated_text, audio_path
-    except RuntimeError as e:
-        if "cannot be started when it is already running" in str(e) or \
-           "This event loop is already running" in str(e):
-            logging.error(f"Asyncio runtime error (loop already running): {e}", exc_info=True)
-            new_loop = asyncio.new_event_loop()
-            asyncio.set_event_loop(new_loop)
-            try:
-                logging.info("Retrying with a new event loop due to runtime error.")
-                translation_status_msg, translated_text = new_loop.run_until_complete(
-                    translate_text_gemini_async(persian_text)
-                )
-                if "error" in translation_status_msg.lower() or not translated_text or "خطا" in translation_status_msg.lower() :
-                    err_msg = f"ترجمه ناموفق (retry): {translation_status_msg} {translated_text or ''}"
-                    logging.error(err_msg); return err_msg, None
-                
-                tts_status_msg, audio_path = new_loop.run_until_complete(
-                    text_to_speech_edge_tts_async(translated_text, english_tts_voice_key, rate, volume, pitch)
-                )
-                if "error" in tts_status_msg.lower() or not audio_path or "خطا" in tts_status_msg.lower():
-                    err_msg = f"{translated_text}\n(خطای TTS (retry): {tts_status_msg})"
-                    logging.error(err_msg); return err_msg, None
-                
-                logging.info(f"عملیات موفق (retry). مسیر صوت: {audio_path}")
-                return translated_text, audio_path
-            finally:
-                new_loop.close()
-        else:
-            logging.error(f"خطای غیرمنتظره در wrapper (RuntimeError): {e}", exc_info=True)
-            return f"خطای داخلی سرور (RuntimeError): {type(e).__name__}", None
     except Exception as e:
         logging.error(f"خطای غیرمنتظره در wrapper: {e}", exc_info=True)
         return f"خطای داخلی سرور: {type(e).__name__}", None
 
-
+# --- تعریف تم و CSS بهبود یافته ---
 FLY_PRIMARY_COLOR_HEX = "#2563EB" 
 FLY_SECONDARY_COLOR_HEX = "#059669" 
-FLY_ACCENT_COLOR_HEX = "#EA580C"
+FLY_ACCENT_COLOR_HEX = "#D97706" # نارنجی برای دکمه اصلی
 FLY_TEXT_COLOR_HEX = "#1F2937" 
-FLY_SUBTLE_TEXT_HEX = "#4B5563"
-FLY_LIGHT_BACKGROUND_HEX = "#F3F4F6"
+FLY_SUBTLE_TEXT_HEX = "#6B7280" 
+FLY_LIGHT_BACKGROUND_HEX = "#F3F4F6" # کمی روشن‌تر از قبل
 FLY_WHITE_HEX = "#FFFFFF"
 FLY_BORDER_COLOR_HEX = "#D1D5DB" 
 FLY_INPUT_BG_HEX = "#FFFFFF" 
-FLY_PANEL_BG_HEX = "#E0F2FE"
+FLY_PANEL_BG_HEX = "#E0F2FE" # آبی بسیار روشن برای پنل ترجمه
+FLY_SUCCESS_GREEN_HEX = "#059669" # سبز برای پیام موفقیت (مثلا)
+FLY_ERROR_RED_HEX = "#DC2626" # قرمز برای پیام خطا
 
 app_theme = gr.themes.Soft(
     primary_hue=gr.themes.colors.blue,
@@ -181,11 +156,12 @@ app_theme = gr.themes.Soft(
     font=[gr.themes.GoogleFont("Vazirmatn"), "Arial", "sans-serif"],
 ).set(
     body_background_fill=FLY_LIGHT_BACKGROUND_HEX,
-    input_background_fill="white",
-    button_primary_background_fill=FLY_ACCENT_COLOR_HEX,
-    button_primary_text_color="white",
+    button_primary_background_fill=FLY_ACCENT_COLOR_HEX, # دکمه اصلی نارنجی
+    button_primary_background_fill_hover=f"{FLY_ACCENT_COLOR_HEX}E0", # کمی تیره‌تر در هاور
+    button_primary_text_color=FLY_WHITE_HEX,
 )
 
+# --- CSS بهبود یافته ---
 custom_css = f"""
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
@@ -196,9 +172,10 @@ custom_css = f"""
     --fly-subtle-text: {FLY_SUBTLE_TEXT_HEX}; --fly-light-bg: {FLY_LIGHT_BACKGROUND_HEX};
     --fly-white: {FLY_WHITE_HEX}; --fly-border: {FLY_BORDER_COLOR_HEX};
     --fly-input-bg: {FLY_INPUT_BG_HEX}; --fly-panel-bg: {FLY_PANEL_BG_HEX};
+    --fly-success: {FLY_SUCCESS_GREEN_HEX}; --fly-error: {FLY_ERROR_RED_HEX};
     --global-font: 'Vazirmatn', 'Inter', 'Poppins', Arial, sans-serif;
     --english-font: 'Poppins', 'Inter', Arial, sans-serif;
-    --border-radius-sm: 6px; --border-radius-md: 10px; --border-radius-lg: 16px;
+    --border-radius-sm: 6px; --border-radius-md: 8px; --border-radius-lg: 12px;
     --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }}
@@ -207,206 +184,193 @@ body {{font-family: var(--global-font); direction: rtl; background-color: var(--
 
 .app-header-fly {{
     text-align: center; padding: 24px 15px;
-    background-image: linear-gradient(135deg, var(--fly-primary) 0%, var(--fly-secondary) 100%);
-    color: white; margin: 0 0 1.5rem 0;
-    border-bottom-left-radius: var(--border-radius-lg); border-bottom-right-radius: var(--border-radius-lg);
-    box-shadow: var(--shadow-md);
+    background: linear-gradient(135deg, var(--fly-primary) 0%, var(--fly-secondary) 100%);
+    color: white; margin: 0 0 1.5rem 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
+    box-shadow: 0 4px 12px -2px rgba(37, 99, 235, 0.2);
 }}
-.app-header-fly h1 {{font-size: 1.8em !important; font-weight: 700 !important; margin: 0 0 6px 0; font-family: var(--english-font); letter-spacing: -0.5px;}}
+.app-header-fly h1 {{font-size: 1.8em !important; font-weight: 700 !important; margin: 0 0 6px 0; font-family: var(--english-font); letter-spacing: 0.5px;}}
 .app-header-fly p {{font-size: 0.95em !important; margin-top: 4px; font-weight: 400; color: rgba(255, 255, 255, 0.9) !important;}}
 
-.main-content-area-fly {{
-    flex-grow: 1; padding: 0 1rem;
-    max-width: 700px; 
-    width: 100%;
-    margin: 0 auto; 
-}}
+.main-content-area-fly {{flex-grow: 1; padding: 0 1rem; }}
+.content-wrapper {{ background-color: var(--fly-white); padding: 1.5rem; border-radius: var(--border-radius-lg); box-shadow: var(--shadow-md); margin-bottom: 1.5rem; }}
 
-.gr-input > label > span, .gr-dropdown > label > span, .gr-slider > label > span {{
-    font-weight: 600 !important; color: var(--fly-subtle-text) !important; font-size: 0.9em !important; margin-bottom: 6px !important; display: inline-block;
-}}
-.gr-input > label + div > textarea, 
-.gr-dropdown > label + div > div > input, 
-.gr-dropdown select {{
-    border-radius: var(--border-radius-md) !important; 
-    border: 1px solid var(--fly-border) !important; 
-    font-size: 0.95em !important; 
-    background-color: var(--fly-input-bg) !important;
-    padding: 10px 14px !important; 
-    line-height: 1.6; 
-    width: 100% !important; 
-    box-sizing: border-box !important;
-    font-family: var(--global-font) !important;
-    color: var(--fly-text) !important;
+/* --- Styling inputs --- */
+.gr-input > label > span.label-text, .gr-dropdown > label > span.label-text {{font-weight: 600 !important; color: #374151 !important; font-size: 0.9em !important; margin-bottom: 6px !important; display: inline-block;}}
+.gr-input > label + div > textarea,
+.gr-dropdown > label + div > div > input, /* For searchable dropdown */
+.gr-dropdown > label + div > div > select {{
+    border-radius: var(--border-radius-md) !important; border: 1px solid var(--fly-border) !important;
+    font-size: 0.95em !important; background-color: var(--fly-input-bg) !important;
+    padding: 10px 12px !important; line-height: 1.6; width: 100% !important; box-sizing: border-box !important;
+    -webkit-tap-highlight-color: transparent; font-family: var(--global-font) !important; color: var(--fly-text) !important;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }}
 .gr-input > label + div > textarea:focus,
 .gr-dropdown > label + div > div > input:focus,
-.gr-dropdown select:focus {{
+.gr-dropdown > label + div > div > select:focus {{
     border-color: var(--fly-primary) !important;
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important; outline: none;
 }}
+.gr-dropdown svg.icon {{ right: auto !important; left: 10px !important; /* برای RTL */}}
 
-.translated-text-output .gr-input > label + div > textarea {{
-    background-color: var(--fly-panel-bg) !important; 
-    border-color: #A5D5FE !important; 
-    min-height: 100px; 
-    font-family: var(--english-font) !important; 
-    font-size: 1em !important;
-    color: var(--fly-text) !important;
-    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
+/* Output Textbox styling */
+.gr-textbox[label*="ترجمه انگلیسی"] > label + div > textarea, 
+.gr-textbox[data-testid="textbox"][label*="ترجمه انگلیسی"] > label + div > textarea /* Gradio 4+ */ {{
+    background-color: var(--fly-panel-bg) !important; border-color: #A5D5FE !important;
+    min-height: 100px; font-family: var(--english-font) !important; font-size: 1em !important;
+    color: #0C4A6E !important; font-weight: 500;
 }}
 
-.gr-accordion.gradio-accordion > button.gr-button {{
-    font-weight: 500 !important; padding: 10px 12px !important; border-radius: var(--border-radius-md) !important; 
-    background-color: #E5E7EB !important; color: var(--fly-text) !important; 
-    border: 1px solid #D1D5DB !important; font-size: 0.9em;
-    margin-bottom: 0.5rem;
+/* Accordion styling */
+.gr-accordion > button.gr-button {{ /* Accordion Header Button */
+    font-weight: 600 !important; padding: 10px 12px !important; border-radius: var(--border-radius-md) !important;
+    background-color: #E5E7EB !important; color: var(--fly-text) !important;
+    border: 1px solid #D1D5DB !important; font-size: 0.9em; margin-bottom: 0.5rem;
+    transition: background-color 0.2s ease;
 }}
-.gr-accordion.gradio-accordion > div.gr-panel {{
-    border-radius: var(--border-radius-md) !important; border: 1px solid var(--fly-border) !important; 
-    background-color: var(--fly-white) !important; 
-    padding: 1rem !important; 
-    margin-top: 0 !important; box-shadow: var(--shadow-sm);
+.gr-accordion > button.gr-button:hover {{ background-color: #D1D5DB !important; }}
+.gr-accordion > div.gr-panel {{ /* Accordion Content Panel */
+    border-radius: var(--border-radius-md) !important; border: 1px solid var(--fly-border) !important;
+    background-color: var(--fly-white) !important; padding: 1rem !important; box-shadow: none;
 }}
-
-.gr-slider {{ padding: 4px 0 !important;}}
+.gr-slider {{ padding: 8px 0 !important;}}
 .gr-slider label span {{font-size: 0.85em !important; color: var(--fly-subtle-text);}}
 
-.fly-submit-button-container .gr-button {{
-    background: linear-gradient(135deg, var(--fly-accent), #F97316) !important;
-    margin-top: 1rem !important; padding: 12px 24px !important; 
-    transition: all 0.25s ease-in-out !important; color: white !important; font-weight: 600 !important; 
-    border-radius: var(--border-radius-md) !important; border: none !important; 
-    box-shadow: var(--shadow-md) !important; width: 100% !important; 
-    font-size: 1em !important; display: flex; align-items: center; justify-content: center;
-    letter-spacing: 0.5px;
-}}
-.fly-submit-button-container .gr-button:hover {{
-    background: linear-gradient(135deg, #F97316, var(--fly-accent)) !important;
-    transform: translateY(-2px) !important; box-shadow: 0 6px 12px -2px rgba(234, 88, 12, 0.4) !important;
-}}
-
-/* Examples Section Styling Changes */
-.examples-section-fly .gr-button.gr-button-tool {{
-    background-color: #E0E7FF !important; color: var(--fly-primary) !important; 
-    border-radius: var(--border-radius-sm) !important; font-size: 0.8em !important; padding: 6px 10px !important;
-    border: 1px solid #C7D2FE !important; margin: 2px !important;
+/* Submit Button - Relies on app_theme for primary color */
+.fly-submit-button .gr-button {{
+    width: 100% !important; padding: 12px 20px !important; font-size: 1em !important;
+    font-weight: 600 !important; border-radius: var(--border-radius-md) !important;
+    margin-top: 1rem !important; text-transform: uppercase; letter-spacing: 0.5px;
     transition: background-color 0.2s ease, transform 0.1s ease;
 }}
-.examples-section-fly .gr-button.gr-button-tool:hover {{
-    background-color: #C7D2FE !important; transform: translateY(-1px);
-}}
-.examples-section-fly .gr-label > span {{ /* MODIFIED: Using descendant selector for label */
-    font-size: 1.1em !important; font-weight: 600; color: var(--fly-text);
-    margin-bottom: 0.5rem !important; display: block; /* Ensure label takes full width if needed */
+.fly-submit-button .gr-button:hover {{ transform: translateY(-2px); }}
+
+/* Examples Section */
+div[id*="examples"] { margin-top: 1.5rem; }
+div[id*="examples"] > .gr-panel {{ background-color: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important;}}
+div[id*="examples"] > .gr-form > .gr-button.gr-button-secondary {{ /* Example items */
+    background-color: #E0E7FF !important; color: var(--fly-primary) !important;
+    border-radius: var(--border-radius-sm) !important; font-size: 0.85em !important; padding: 5px 10px !important;
+    border: 1px solid #C7D2FE !important; transition: background-color 0.2s ease;
 }}
+div[id*="examples"] > .gr-form > .gr-button.gr-button-secondary:hover {{ background-color: #C7D2FE !important; }}
+div[id*="examples"] .gr-samples-header {{ font-weight: 600; color: #4B5563; font-size: 0.95em; margin-bottom: 0.8rem;}}
 
 
-.custom-hr-fly {{height: 1px; background-color: var(--fly-border); margin: 1.5rem 0; border: none;}}
-.api-warning-message-fly {{background-color: #FFFBEB !important; color: #92400E !important; padding: 10px 12px !important; border-radius: var(--border-radius-sm) !important; border: 1px solid #FDE68A !important; text-align: center !important; margin: 0 0 1rem 0 !important; font-size: 0.9em !important;}}
+.custom-hr-fly {{height: 1px; background-color: var(--fly-border); margin: 1.8rem 0; border: none;}}
+.api-warning-message-fly {{
+    background-color: #FFFBEB !important; color: #92400E !important; padding: 12px 15px !important;
+    border-radius: var(--border-radius-md) !important; border: 1px solid #FDE68A !important;
+    text-align: center !important; margin: 0 0.5rem 1rem 0.5rem !important; font-size: 0.9em !important; font-weight: 500;
+}}
 .app-footer-fly {{text-align:center; font-size:0.8em; color: var(--fly-subtle-text); margin-top:2rem; padding-bottom: 1rem;}}
 footer, .gradio-footer {{display: none !important;}}
 
-.gr-audio audio {{ border-radius: var(--border-radius-md); box-shadow: var(--shadow-sm); }}
-
-@media (min-width: 640px) {{
+/* Desktop improvements */
+@media (min-width: 768px) {{
     body {{font-size: 16px;}}
-    .gradio-container {{ 
-      padding: 0 !important; 
-      margin: 0 auto !important; 
-      background-color: var(--fly-light-bg) !important; 
-      border-radius: 0 !important; 
-      box-shadow: none !important;
-    }}
-    .app-header-fly {{
-        border-bottom-left-radius: var(--border-radius-lg); 
-        border-bottom-right-radius: var(--border-radius-lg);
-        margin-left: auto; margin-right: auto;
-    }}
-     .app-header-fly h1 {{ font-size: 2em !important; }} .app-header-fly p {{ font-size: 1em !important; }}
-    
-    .main-content-area-fly {{padding: 0 1.5rem 1.5rem 1.5rem;}}
-    
-    .api-warning-message-fly {{font-size: 0.9em;}}
-    
-    .main-inputs-row-fly {{ display: flex; flex-direction: row; gap: 1.5rem; align-items: flex-start;}}
-    .main-inputs-row-fly > .gr-column:nth-child(1) {{ flex: 3; }}
-    .main-inputs-row-fly > .gr-column:nth-child(2) {{ flex: 2; }}
+    .gradio-container {{max-width: 800px !important; padding: 1.5rem !important; margin: 2rem auto !important; background-color: var(--fly-light-bg) !important; border-radius: 0; box-shadow: none;}}
+    .app-header-fly {{ border-radius: var(--border-radius-lg); margin: -1.5rem -1.5rem 2rem -1.5rem; /* Extend to edges of container */ }}
+    .app-header-fly h1 {{ font-size: 2em !important; }} .app-header-fly p {{ font-size: 1em !important; }}
+    .main-content-area-fly {{padding: 0;}}
     
-    .fly-submit-button-container .gr-button {{ width: auto !important; align-self: flex-start; padding: 12px 30px !important; font-size: 1.05em !important;}}
+    .main-content-columns-fly {{ display: flex; flex-direction: row; gap: 1.5rem; }}
+    .main-content-columns-fly > .gr-column:nth-child(1) {{ flex: 3; }} /* Input column wider */
+    .main-content-columns-fly > .gr-column:nth-child(2) {{ flex: 2; }} /* Output column */
     
-    .gr-input > label + div > textarea, .gr-dropdown select, .translated-text-output .gr-input > label + div > textarea {{ font-size: 1em; }}
-    .gr-input > label > span, .gr-dropdown > label > span, .gr-slider > label > span {{ font-size: 0.95em; }}
-    .app-footer-fly {{font-size:0.85em;}}
+    .fly-submit-button .gr-button {{ width: auto !important; min-width: 200px;}}
+    .api-warning-message-fly {{margin-left: 0 !important; margin-right: 0 !important; font-size: 0.9em;}}
 }}
+
+/* Specific for Gradio 4+ output textbox if needed */
+.gradio-interface .output_text .gr-textbox[data-testid="textbox"] {
+    /* Custom styles for Gradio 4+ output textbox if the general one doesn't catch */
+}
+.result-area-fly { margin-top: 1rem; }
+.result-area-fly > .gr-block > .gr-form > .gr-input,
+.result-area-fly > .gr-block > .gr-form > .gr-audio { /* Ensure output elements also have some margin */
+    margin-bottom: 0.8rem;
+}
 """
 
 default_english_tts_voice = 'انگلیسی (آمریکا) - جنی (زن)'
-if not language_dict_persian_keys or default_english_tts_voice not in language_dict_persian_keys:
-    default_english_tts_voice = list(language_dict_persian_keys.keys())[0] if language_dict_persian_keys else "No voices"
+if not language_dict_persian_keys :
+    logging.warning("Language dictionary is empty!")
+    default_english_tts_voice = None
+elif default_english_tts_voice not in language_dict_persian_keys:
+    default_english_tts_voice = list(language_dict_persian_keys.keys())[0]
 
-with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فلای") as demo:
-    gr.HTML(f"""<div class="app-header-fly"><h1>Fly Language Learning</h1><p>ترجمه فارسی به انگلیسی و تلفظ با لهجه دلخواه</p></div>""")
+# --- Gradio UI با ساختار بهبود یافته ---
+with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فلای | Fly Language Learning") as demo:
+    gr.HTML(f"""<div class="app-header-fly"><h1>Fly Language Learning 🚀</h1><p>ترجمه فارسی به انگلیسی و تلفظ با لهجه دلخواه</p></div>""")
     
     with gr.Column(elem_classes=["main-content-area-fly"]):
         if not GOOGLE_API_KEY or not model:
-            missing_key_msg = "⚠️ **ترجمه غیرفعال:** "
-            if not GOOGLE_API_KEY: missing_key_msg += "کلید API گوگل تنظیم نشده."
-            elif not model: missing_key_msg += "خطا در مدل Gemini."
-            gr.Markdown(f"<div class='api-warning-message-fly'>{missing_key_msg} لطفاً Secrets را بررسی کنید.</div>")
-
-        with gr.Row(elem_classes=["main-inputs-row-fly"]): 
-            with gr.Column(scale=3): 
-                input_text_persian = gr.Textbox(
-                    lines=4, label="📝 متن فارسی خود را وارد کنید:", placeholder="مثال: سلام، حال شما چطور است؟",
-                    elem_id="persian-input-textbox"
-                )
-                language_dropdown_tts_english = gr.Dropdown(
-                    choices=list(language_dict_persian_keys.keys()) if language_dict_persian_keys else ["لیست صداها خالی است"],
-                    value=default_english_tts_voice, label="🗣️ گوینده و لهجه انگلیسی را انتخاب کنید:", interactive=bool(language_dict_persian_keys)
-                )
-                with gr.Accordion("⚙️ تنظیمات پیشرفته صدا", open=False):
-                    rate_slider = gr.Slider(-100, 100, 0, step=10, label="سرعت گفتار")
-                    volume_slider = gr.Slider(-100, 100, 0, step=10, label="بلندی صدا")
-                    pitch_slider = gr.Slider(-50, 50, 0, step=5, label="زیر و بمی صدا (Pitch)")
-                
-                with gr.Group(elem_classes=["fly-submit-button-container"]):
-                     submit_button = gr.Button("🚀 ترجمه و پخش صدا", variant="primary")
+            missing_key_msg = "⚠️ **هشدار سرویس ترجمه:** "
+            if not GOOGLE_API_KEY: missing_key_msg += "کلید API گوگل (GOOGLE_API_KEY) تنظیم نشده است."
+            elif not model: missing_key_msg += "خطا در بارگذاری مدل Gemini."
+            gr.Markdown(f"<div class='api-warning-message-fly'>{missing_key_msg} بخش ترجمه غیرفعال خواهد بود. لطفاً تنظیمات Secrets را بررسی کنید.</div>")
 
-            with gr.Column(scale=2): 
-                output_text_translated = gr.Textbox(
-                    label="📜 ترجمه انگلیسی:", interactive=False, lines=5, placeholder="اینجا نتیجه ترجمه نمایش داده می‌شود...",
-                    elem_classes=["translated-text-output"]
-                )
-                output_audio = gr.Audio(label="🎧 فایل صوتی:", type="filepath", format="mp3", interactive=False)
+        # Wrapper for content to apply card styling on desktop
+        with gr.Box(elem_classes=["content-wrapper"]):
+            with gr.Row(elem_classes=["main-content-columns-fly"]): # For desktop two-column layout
+                with gr.Column(scale=3): # Input column
+                    input_text_persian = gr.Textbox(
+                        lines=4, label="📝 متن فارسی خود را وارد کنید:", placeholder="مثال: سلام، حال شما چطور است؟",
+                        elem_id="persian_input_textbox"
+                    )
+                    language_dropdown_tts_english = gr.Dropdown(
+                        choices=list(language_dict_persian_keys.keys()) if language_dict_persian_keys else ["لیست خالی"],
+                        value=default_english_tts_voice if default_english_tts_voice else "لیست خالی", 
+                        label="🗣️ گوینده و لهجه انگلیسی را انتخاب کنید:", 
+                        interactive=bool(language_dict_persian_keys and default_english_tts_voice is not None)
+                    )
+                    with gr.Accordion("⚙️ تنظیمات پیشرفته صدا", open=False):
+                        rate_slider = gr.Slider(-100, 100, 0, step=10, label="سرعت گفتار (Rate)")
+                        volume_slider = gr.Slider(-100, 100, 0, step=10, label="بلندی صدا (Volume)")
+                        pitch_slider = gr.Slider(-50, 50, 0, step=5, label="زیر و بمی صدا (Pitch)")
+                    
+                    with gr.Box(elem_classes=["fly-submit-button"]): # Using Box for better CSS control
+                         submit_button = gr.Button("ترجمه و پخش صدا", variant="primary", icon="▶️")
 
-        gr.HTML("<hr class='custom-hr-fly'>")
-        
-        example_list = []
-        if language_dict_persian_keys and default_english_tts_voice != "No voices" :
-            num_voices = len(language_dict_persian_keys)
-            voice_keys = list(language_dict_persian_keys.keys())
-            voice1_idx, voice2_idx, voice3_idx = 0, min(num_voices // 2, num_voices-1), min(num_voices-1, num_voices-1)
-            example_list = [
-                    ["سلام، قیمت این چقدر است؟", voice_keys[voice1_idx], 0, 0, 0],
-                    ["می‌توانید نزدیک‌ترین ایستگاه اتوبوس را به من نشان دهید؟", voice_keys[voice2_idx], 0, 0, 0],
-                    ["ببخشید، من انگلیسی خوب صحبت نمی‌کنم.", voice_keys[voice3_idx], -10, 0, 0],
+                with gr.Column(scale=2, elem_classes=["result-area-fly"]): # Output column
+                    output_text_translated = gr.Textbox(
+                        label="📜 ترجمه انگلیسی:", interactive=False, lines=5, 
+                        placeholder="ترجمه متن شما در اینجا نمایش داده می‌شود...",
+                        elem_id="english_output_textbox"
+                    )
+                    output_audio = gr.Audio(label="🎧 فایل صوتی:", type="filepath", format="mp3", interactive=False)
+
+            if language_dict_persian_keys and default_english_tts_voice:
+                gr.HTML("<hr class='custom-hr-fly'>")
+                num_voices = len(language_dict_persian_keys)
+                voice_keys = list(language_dict_persian_keys.keys())
+                
+                # Ensure indices are within bounds
+                voice1_idx = 0
+                voice2_idx = min(7, num_voices - 1) if num_voices > 1 else 0
+                voice3_idx = min(13, num_voices - 1) if num_voices > 1 else 0
+
+                example_list = [
+                    ["قیمت این لباس چقدر است؟", voice_keys[voice1_idx], 0, 0, 0],
+                    ["می‌توانید آدرس را روی نقشه به من نشان دهید؟", voice_keys[voice2_idx], 5, 0, 0],
+                    ["ببخشید، متوجه نشدم. امکان دارد تکرار کنید؟", voice_keys[voice3_idx], -10, 10, 0],
+                    ["یک قهوه و یک کیک لطفا.", voice_keys[0], 0, 0, 0], # Default to first voice if specific indices are not distinct
                 ]
+                if not (language_dict_persian_keys and default_english_tts_voice):
+                    example_list = [] # No examples if no voices
+
+                if example_list:
+                    gr.Examples(
+                        examples=example_list,
+                        inputs=[input_text_persian, language_dropdown_tts_english, rate_slider, volume_slider, pitch_slider],
+                        outputs=[output_text_translated, output_audio],
+                        fn=translate_and_speak_sync_wrapper,
+                        label="💡 نمونه‌های آماده (برای امتحان کلیک کنید):",
+                        elem_id="examples_section" # For CSS styling
+                    )
         
-        if example_list:
-            # MODIFICATION: Wrap gr.Examples in gr.Group and apply elem_classes to the Group
-            with gr.Group(elem_classes=["examples-section-fly"]):
-                gr.Examples(
-                    examples=example_list,
-                    inputs=[input_text_persian, language_dropdown_tts_english, rate_slider, volume_slider, pitch_slider],
-                    outputs=[output_text_translated, output_audio],
-                    fn=translate_and_speak_sync_wrapper, 
-                    label="💡 چند نمونه برای شروع:",
-                    # elem_classes=["examples-section-fly"] # REMOVED from here
-                )
-        
-    gr.Markdown("<p class='app-footer-fly'>ساخته شده با ❤️ برای یادگیری زبان فلای © ۲۰۲۴</p>")
+    gr.Markdown("<p class='app-footer-fly'>✨ Fly Language Learning © ��۰۲۴ - قدرت گرفته از Gemini و EdgeTTS ✨</p>")
 
     submit_button.click(
         fn=translate_and_speak_sync_wrapper,
@@ -415,5 +379,9 @@ with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فل
     )
 
 if __name__ == "__main__":
-    if not language_dict_persian_keys: logging.critical("دیکشنری صداها خالی است! برنامه ممکن است به درستی کار نکند.")
+    if not language_dict_persian_keys: 
+        logging.critical("CRITICAL: Voice dictionary (language_dict_persian_keys) is empty! The application might not function correctly.")
+    elif not default_english_tts_voice:
+        logging.warning("WARNING: No default English TTS voice could be set. Dropdown might be empty or non-interactive.")
+        
     demo.launch(server_name="0.0.0.0", server_port=7860, debug=True)