Update app.py

app.py

@@ -10,19 +10,22 @@ import logging
 
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(threadName)s - %(message)s')
 
+# --- دریافت کلید API از متغیرهای محیطی ---
 GOOGLE_API_KEY = os.environ.get('GOOGLE_API_KEY')
+
 model = None
 if GOOGLE_API_KEY:
     try:
         genai.configure(api_key=GOOGLE_API_KEY)
         model = genai.GenerativeModel('gemini-1.5-flash-latest')
-        logging.info("سرویس Gemini با موفقیت پیکربندی شد.")
+        logging.info("سرویس Gemini با موفقیت پیکربندی شد.") # Changed from print
     except Exception as e:
-        logging.error(f"خطا در پیکربندی Gemini: {e}", exc_info=True)
+        logging.error(f"خطا در پیکربندی Gemini: {e}. قابلیت ترجمه غیرفعال خواهد بود.") # Changed from print
+        model = None
 else:
-    logging.warning("کلید API گوگل (GOOGLE_API_KEY) تنظیم نشده است.")
+    logging.warning("هشدار: کلید API گوگل (GOOGLE_API_KEY) تنظیم نشده است. قابلیت ترجمه غیرفعال خواهد بود.") # Changed from print
 
-# --- دیکشنری کامل صداهای انگلیسی ---
+# --- دیکشنری کامل‌تر صداهای انگلیسی ---
 language_dict_persian_keys = {
     'انگلیسی (آمریکا) - جنی (زن)': 'en-US-JennyNeural', 'انگلیسی (آمریکا) - گای (مرد)': 'en-US-GuyNeural',
     'انگلیسی (آمریکا) - آنا (زن، صدای کودک)': 'en-US-AnaNeural', 'انگلیسی (آمریکا) - آریا (زن)': 'en-US-AriaNeural',
@@ -57,125 +60,102 @@ language_dict_persian_keys = {
     'انگلیسی (تانزانیا) - ایمانی (زن)': 'en-TZ-ImaniNeural', 'انگلیسی (تانزانیا) - الیمو (مرد)': 'en-TZ-ElimuNeural',
 }
 
-async def translate_text_gemini_async(text, target_language="English"):
-    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
+async def translate_text_gemini(text, target_language="English"): # Renamed from previous
+    if not model: return "خطا: سرویس ترجمه در دسترس نیست (کلید API یا مدل مشکل دارد).", None
+    if not text or not text.strip(): 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)
+        response = await model.generate_content_async(prompt) # Used the right model object
         translated_text = response.text.strip()
         if translated_text.lower().startswith(f"{target_language.lower()}:"):
             translated_text = translated_text[len(target_language)+1:].strip()
         return "ترجمه موفق", translated_text
-    except Exception as e: logging.error(f"Gemini translation error: {e}", exc_info=True); return f"خطا در ترجمه: {type(e).__name__}", None
+    except Exception as e: 
+        logging.error(f"خطای Gemini: {e}\n{traceback.format_exc()}")
+        return f"خطای ترجمه: {type(e).__name__}", None # Corrected type(e).name to type(e).__name__
 
-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: متن ورودی خالی است.", 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: صدای '{tts_voice_key}' یافت نشد.", None
+async def text_to_speech_edge_async(text_to_speak, tts_voice_key, rate, volume, pitch): # Renamed from previous
     try:
+        if not text_to_speak or not text_to_speak.strip(): return "خطای TTS: متن ترجمه شده برای خواندن خالی است.", None
+        voice_id = language_dict_persian_keys.get(tts_voice_key)
+        if voice_id is None: return f"خطای TTS: صدای '{tts_voice_key}' یافت نشد.", None
+        # Removed: if not voice_id.startswith("en-"): return f"خطای پیکربندی TTS: صدای '{tts_voice_key}' انگلیسی نیست.", None
         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
+        with tempfile.NamedTemporaryFile(delete=False, suffix=".mp3") as tmp_file: tmp_path = tmp_file.name
         await communicate.save(tmp_path)
         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 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: 
-        asyncio.set_event_loop(_thread_local.loop)
-        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()
-    audio_file_to_clean = None 
-    status_update = gr.update(value=None, visible=False) 
+    except edge_tts.exceptions.NoAudioReceived: return f"خطای TTS: صدایی برای '{tts_voice_key}' دریافت نشد. (NoAudioReceived)", None
+    except Exception as e: 
+        logging.error(f"خطای Edge-TTS: {e}\n{traceback.format_exc()}")
+        return f"خطای TTS: {type(e).__name__}", None # Corrected type(e).name to type(e).__name__
+
+_event_loops_by_thread = {}
+def _get_or_create_event_loop(): # Kept from your provided code
+    thread_id = threading.get_ident()
+    if thread_id not in _event_loops_by_thread or _event_loops_by_thread[thread_id].is_closed():
+        loop = asyncio.new_event_loop(); asyncio.set_event_loop(loop)
+        _event_loops_by_thread[thread_id] = loop
+    return _event_loops_by_thread[thread_id]
+
+def translate_and_speak_sync_wrapper(persian_text, english_tts_voice_key, rate, volume, pitch): # Kept from your provided code
+    loop = _get_or_create_event_loop()
+    error_message_for_ui = ""
+    audio_file_to_clean = None # For potential cleanup
 
     if not GOOGLE_API_KEY or not model:
-        msg = "خطا: سرویس ترجمه پیکربندی نشده است. لطفاً از تنظیم GOOGLE_API_KEY اطمینان حاصل کنید."
-        logging.error(msg)
-        status_update = gr.update(value=f"🚫 {msg}", visible=True)
-        return msg, None, status_update
+        error_message_for_ui = "خطا: سرویس ترجمه پیکربندی نشده است. لطفاً از تنظیم صحیح GOOGLE_API_KEY در Secrets اطمینان حاصل کنید."
+        return error_message_for_ui, None
     if not persian_text or not persian_text.strip():
-        msg = "لطفاً متن فارسی را برای ترجمه وارد کنید."
-        logging.warning(msg)
-        status_update = gr.update(value=f"⚠️ {msg}", visible=True)
-        return msg, None, status_update
-    if not english_tts_voice_key or english_tts_voice_key == "لیست خالی":
-        msg = "لطفاً یک صدای گوینده انتخاب کنید."
-        logging.warning(msg)
-        status_update = gr.update(value=f"⚠️ {msg}", visible=True)
-        return persian_text, None, status_update
-
-    try:
-        translation_status_msg, translated_text = loop.run_until_complete(
-            translate_text_gemini_async(persian_text)
-        )
-        if "خطا" in translation_status_msg.lower() or not translated_text:
-            err_msg = f"ترجمه ناموفق: {translation_status_msg} {translated_text or ''}"
-            logging.error(err_msg)
-            status_update = gr.update(value=f"🚫 {err_msg}", visible=True)
-            return err_msg, None, status_update
-        
-        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 "خطا" in tts_status_msg.lower() or not audio_path:
-            err_msg = f"خطای TTS: {tts_status_msg}"
-            logging.error(f"Translated: '{translated_text}', TTS Error: {err_msg}")
-            status_update = gr.update(value=f"⚠️ {err_msg}", visible=True)
-            return translated_text, None, status_update
-        
-        audio_file_to_clean = audio_path 
-        logging.info(f"عملیات موفق. متن ترجمه شده: '{translated_text[:30]}...', مسیر صوت: {audio_path}")
-        status_update = gr.update(value="✅ ترجمه و تولید صدا موفقیت آمیز بود!", visible=True)
-        return translated_text, audio_path, status_update
+        error_message_for_ui = "لطفاً متن فارسی را برای ترجمه وارد کنید."
+        return error_message_for_ui, None
     
-    except Exception as e:
-        logging.error(f"خطای غیرمنتظره در wrapper: {e}", exc_info=True)
-        if audio_file_to_clean and os.path.exists(audio_file_to_clean):
-            try:
-                os.remove(audio_file_to_clean)
-                logging.info(f"Cleaned up temporary audio file: {audio_file_to_clean}")
-            except OSError as oe:
-                logging.error(f"Error cleaning up temp file {audio_file_to_clean}: {oe}")
-        status_update = gr.update(value=f"🚫 خطای داخلی سرور: {type(e).__name__}", visible=True)
-        return f"خطای داخلی سرور: {type(e).__name__}", None, status_update
-
-# --- تعریف تم و CSS بسیار زیباتر ---
+    translation_status_msg, translated_text = loop.run_until_complete(translate_text_gemini(persian_text, target_language="English"))
+    
+    translated_text_output = translated_text if translated_text else "ترجمه ناموفق بود." # Default if translation fails badly
+    
+    if "خطا" in translation_status_msg or not translated_text:
+        error_message_for_ui = f"{translated_text_output}\n({translation_status_msg})"
+        return error_message_for_ui, None
+
+    if english_tts_voice_key not in language_dict_persian_keys:
+        if language_dict_persian_keys: 
+            english_tts_voice_key = list(language_dict_persian_keys.keys())[0]
+            logging.warning(f"صدای انتخابی نامعتبر، به صدای پیشفرض {english_tts_voice_key} تغییر یافت.")
+        else:
+            error_message_for_ui = f"{translated_text_output}\n\n(خطای TTS: هیچ صدایی برای انتخاب موجود نیست.)"
+            return error_message_for_ui, None
+            
+    tts_status_msg, audio_path = loop.run_until_complete(text_to_speech_edge_async(translated_text, english_tts_voice_key, rate, volume, pitch))
+    
+    if "خطا" in tts_status_msg or not audio_path:
+        error_message_for_ui = f"{translated_text_output}\n\n({tts_status_msg})"
+        # No need to clean audio_path here as it's likely None or invalid
+        return error_message_for_ui, None
+        
+    # audio_file_to_clean = audio_path # Gradio handles temp files for gr.Audio output usually
+    return translated_text_output, audio_path
+
+
+# --- تعریف تم و CSS ---
 FLY_PRIMARY_COLOR_HEX = "#4F46E5"  
 FLY_SECONDARY_COLOR_HEX = "#10B981" 
-FLY_ACCENT_COLOR_HEX = "#F59E0B"   
-FLY_TEXT_COLOR_HEX = "#111827"     
+FLY_ACCENT_COLOR_HEX = "#D97706" # Kept from your "simple" code's button
+FLY_TEXT_COLOR_HEX = "#1F2937"     
 FLY_SUBTLE_TEXT_HEX = "#6B7280"    
 FLY_LIGHT_BACKGROUND_HEX = "#F9FAFB" 
 FLY_WHITE_HEX = "#FFFFFF"
 FLY_BORDER_COLOR_HEX = "#D1D5DB"   
-FLY_INPUT_BG_HEX = "#FFFFFF"
-FLY_PANEL_BG_HEX = "#E0E7FF"       
+FLY_INPUT_BG_HEX_SIMPLE = "#F3F4F6" # From "simple" code
+FLY_PANEL_BG_SIMPLE = "#E0F2FE" # From "simple" code
 
-app_theme = gr.themes.Base(
+app_theme_outer = gr.themes.Base( # For outer shell styling
     font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
 ).set(
     body_background_fill=FLY_LIGHT_BACKGROUND_HEX,
 )
 
-# CSS بدون کامنت‌های /* ... */
+# Combined and adjusted CSS
 custom_css = f"""
 @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
@@ -190,8 +170,8 @@ custom_css = f"""
     --fly-bg-light: {FLY_LIGHT_BACKGROUND_HEX};
     --fly-bg-white: {FLY_WHITE_HEX};
     --fly-border-color: {FLY_BORDER_COLOR_HEX};
-    --fly-input-bg: {FLY_INPUT_BG_HEX};
-    --fly-panel-bg: {FLY_PANEL_BG_HEX};
+    --fly-input-bg-simple: {FLY_INPUT_BG_HEX_SIMPLE};
+    --fly-panel-bg-simple: {FLY_PANEL_BG_SIMPLE};
     
     --font-global: 'Vazirmatn', 'Inter', 'Poppins', system-ui, sans-serif;
     --font-english: 'Poppins', 'Inter', system-ui, sans-serif;
@@ -201,12 +181,9 @@ custom_css = f"""
     --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
     --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
-    --transition-fast: all 0.15s ease-in-out;
-    --transition-normal: all 0.25s ease-in-out;
-    --fly-primary-rgb: 79, 70, 229; 
-    --fly-accent-rgb: 245, 158, 11; 
 }}
 
+/* --- Outer Styling (from "beautiful" code) --- */
 body {{font-family: var(--font-global); direction: rtl; background-color: var(--fly-bg-light); color: var(--fly-text-primary); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px;}}
 .gradio-container {{max-width: 100% !important; width: 100% !important; min-height: 100vh; margin: 0 auto !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: linear-gradient(170deg, #E0F2FE 0%, #F3E8FF 100%); display: flex; flex-direction: column;}}
 
@@ -215,14 +192,19 @@ body {{font-family: var(--font-global); direction: rtl; background-color: var(--
 .app-title-card h1 {{font-size: 2.25em !important; font-weight: 800 !important; margin: 0 0 0.5rem 0; font-family: var(--font-english); letter-spacing: -0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.1);}}
 .app-title-card p {{font-size: 1em !important; margin-top: 0.25rem; font-weight: 400; color: rgba(255, 255, 255, 0.85) !important;}}
 
-.main-content-area-fly {{
+.app-footer-fly {{text-align:center; font-size:0.85em; color: var(--fly-text-secondary); margin-top:2.5rem; padding: 1rem 0; background-color: rgba(255,255,255,0.3); backdrop-filter: blur(5px); border-top: 1px solid var(--fly-border-color);}}
+footer, .gradio-footer, .flagging-container, .flex.row.gap-2.absolute.bottom-2.right-2.gr-compact.gr-box.gr-text-gray-500, div[data-testid="flag"], button[title="Flag"], button[aria-label="Flag"], .footer-utils {{ display: none !important; visibility: hidden !important; }}
+
+
+/* --- Inner Content Area (from "beautiful" code, adapted) --- */
+.main-content-area {{ /* This class will be on the gr.Column wrapping the inner content */
     flex-grow: 1; 
     padding: 0.75rem; 
     width: 100%; 
     margin: 0 auto;
     box-sizing: border-box; 
 }}
-.content-panel {{
+.content-panel-simple {{ /* This class will be on the gr.Group wrapping the Row */
     background-color: var(--fly-bg-white); 
     padding: 1rem; 
     border-radius: var(--radius-xl); 
@@ -235,72 +217,158 @@ body {{font-family: var(--font-global); direction: rtl; background-color: var(--
     box-sizing: border-box; 
 }}
 
-.gr-input > label > span.label-text, .gr-dropdown > label > span.label-text, .gr-slider > label > span.label-text {{font-weight: 600 !important; color: var(--fly-text-primary) !important; font-size: 0.9em !important; margin-bottom: 0.5rem !important; display: block;}}
-.gr-input > label + div > textarea, .gr-dropdown > label + div > div > input, .gr-dropdown > label + div > div > select {{border-radius: var(--radius-md) !important; border: 1px solid var(--fly-border-color) !important; font-size: 1em !important; background-color: var(--fly-input-bg) !important; padding: 0.75rem 1rem !important; line-height: 1.6; width: 100% !important; box-sizing: border-box !important; font-family: var(--font-global) !important; color: var(--fly-text-primary) !important; transition: var(--transition-normal); box-shadow: var(--shadow-sm);}}
-.gr-input > label + div > textarea:focus, .gr-dropdown > label + div > div > input:focus, .gr-dropdown > label + div > div > select:focus {{border-color: var(--fly-primary) !important; box-shadow: 0 0 0 3px rgba(var(--fly-primary-rgb), 0.3) !important; outline: none; transform: translateY(-1px);}}
-.gr-dropdown svg.icon {{right: auto !important; left: 1rem !important; color: var(--fly-subtle-text) !important;}}
-
-.output-text-container .gr-textbox[label*="ترجمه انگلیسی"] > label + div > textarea, .output-text-container .gradio-interface .output_text .gr-textbox[data-testid="textbox"] > label + div > textarea {{background-color: var(--fly-panel-bg) !important; border: 1px solid var(--fly-primary) !important; border-radius: var(--radius-md) !important; min-height: 120px; font-family: var(--font-english) !important; font-size: 1.05em !important; color: var(--fly-primary) !important; font-weight: 500; padding: 0.75rem 1rem !important; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);}}
-.output-audio-container .gr-audio {{border-radius: var(--radius-md); box-shadow: var(--shadow-sm);}}
-.output-audio-container .gr-audio audio {{border-radius: var(--radius-md);}}
-
-.gr-accordion > button.gr-button {{font-weight: 600 !important; padding: 0.75rem 1rem !important; border-radius: var(--radius-md) !important; background-color: #EDF2F7 !important; color: var(--fly-text-primary) !important; border: 1px solid var(--fly-border-color) !important; font-size: 0.95em; margin-bottom: 0.5rem; transition: var(--transition-normal); text-align: right;}}
-.gr-accordion > button.gr-button:hover {{background-color: #E2E8F0 !important; border-color: var(--fly-primary) !important; color: var(--fly-primary) !important;}}
-.gr-accordion > div.gr-panel {{border-radius: var(--radius-md) !important; border: 1px solid var(--fly-border-color) !important; background-color: var(--fly-bg-white) !important; padding: 1.25rem !important; box-shadow: none; margin-top: -0.5rem; position: relative; z-index: 5;}}
-.gr-slider {{padding: 0.5rem 0 !important;}}
-.gr-slider input[type="range"]::-webkit-slider-thumb {{background: var(--fly-primary) !important; box-shadow: var(--shadow-sm) !important;}}
-.gr-slider input[type="range"]::-moz-range-thumb {{background: var(--fly-primary) !important; box-shadow: var(--shadow-sm) !important;}}
-
-.action-button-container .gr-button.gr-button-primary {{width: 100% !important; padding: 0.85rem 1.5rem !important; font-size: 1.05em !important; font-weight: 700 !important; border-radius: var(--radius-md) !important; margin-top: 1.5rem !important; letter-spacing: 0.5px; color: var(--fly-bg-white) !important; background: linear-gradient(135deg, var(--fly-accent) 0%, #F97316 100%) !important; border: none !important; box-shadow: var(--shadow-md), 0 0 15px rgba(var(--fly-accent-rgb), 0.3); transition: var(--transition-normal), transform 0.1s ease-out; cursor: pointer;}}
-.action-button-container .gr-button.gr-button-primary:hover {{transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-lg), 0 0 25px rgba(var(--fly-accent-rgb), 0.4);}}
-.action-button-container .gr-button.gr-button-primary:active {{transform: translateY(-1px) scale(0.98); box-shadow: var(--shadow-sm), 0 0 10px rgba(var(--fly-accent-rgb), 0.2);}}
-
-div#examples_section {{margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--fly-border-color);}}
-div#examples_section > .gr-panel {{background-color: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important;}}
-div#examples_section .gr-samples-header {{font-weight: 700; color: var(--fly-text-primary); font-size: 1.1em; margin-bottom: 1rem; text-align: right;}}
-div#examples_section .gr-sample-button, div#examples_section table tbody tr td button.gr-button-secondary {{background-color: var(--fly-input-bg) !important; color: var(--fly-primary) !important; border-radius: var(--radius-md) !important; font-size: 0.9em !important; padding: 0.5rem 1rem !important; border: 1px solid var(--fly-primary) !important; transition: var(--transition-normal); box-shadow: var(--shadow-sm); font-weight: 500;}}
-div#examples_section .gr-sample-button:hover, div#examples_section table tbody tr td button.gr-button-secondary:hover {{background-color: var(--fly-primary) !important; color: var(--fly-bg-white) !important; transform: translateY(-2px); box-shadow: var(--shadow-md);}}
-
-.status-message-fly {{padding: 0.75rem 1rem; margin-top: 1.5rem; border-radius: var(--radius-md); font-weight: 500; text-align: center; font-size: 0.95em; box-shadow: var(--shadow-sm);}}
-.status-message-fly.success {{background-color: #D1FAE5; color: #065F46; border: 1px solid #A7F3D0;}}
-.status-message-fly.error {{background-color: #FEE2E2; color: #991B1B; border: 1px solid #FECACA;}}
-
-.custom-hr-fly {{height: 1px; background-color: var(--fly-border-color); margin: 2rem 0; border: none;}}
-.api-warning-message-fly {{background-color: #FEF3C7 !important; color: #92400E !important; padding: 0.75rem 1rem !important; border-radius: var(--radius-md) !important; border: 1px solid #FDE68A !important; text-align: center !important; margin: 0 0.5rem 1.5rem 0.5rem !important; font-size: 0.9em !important; font-weight: 500; box-shadow: var(--shadow-sm);}}
-.app-footer-fly {{text-align:center; font-size:0.85em; color: var(--fly-text-secondary); margin-top:2.5rem; padding: 1rem 0; background-color: rgba(255,255,255,0.3); backdrop-filter: blur(5px); border-top: 1px solid var(--fly-border-color);}}
-footer, .gradio-footer {{display: none !important;}}
+/* --- Inner Elements Styling (from "simple" code, with adjustments) --- */
+.content-panel-simple .gr-button.lg.primary, /* Target button inside the simple panel */
+.content-panel-simple button[variant="primary"] /* More generic for Gradio 4+ */
+{{
+    background: var(--fly-accent) !important; 
+    margin-top: 1rem !important;
+    padding: 12px 20px !important;
+    transition: all 0.25s ease-in-out !important;
+    color: white !important;
+    font-weight: 600 !important;
+    border-radius: 10px !important;
+    border: none !important;
+    box-shadow: 0 3px 8px -1px rgba(var(--fly-accent-rgb), 0.3) !important; /* Use RGB for accent color */
+    width: 100% !important;
+    font-size: 1em !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}}
+.content-panel-simple .gr-button.lg.primary:hover,
+.content-panel-simple button[variant="primary"]:hover {{
+    background: #B45309 !important; 
+    transform: translateY(-1px) !important;
+    box-shadow: 0 5px 10px -1px rgba(var(--fly-accent-rgb), 0.4) !important;
+}}
+
+.content-panel-simple .gr-input > label + div > textarea,
+.content-panel-simple .gr-dropdown > label + div > div > input, 
+.content-panel-simple .gr-dropdown > label + div > div > select,
+.content-panel-simple .gr-textbox > label + div > textarea {{
+    border-radius: 8px !important; 
+    border: 1.5px solid var(--fly-border-color) !important; 
+    font-size: 0.95em !important;
+    background-color: var(--fly-input-bg-simple) !important; 
+    padding: 10px 12px !important; 
+    color: var(--fly-text-primary) !important;
+}}
+.content-panel-simple .gr-input > label + div > textarea:focus, 
+.content-panel-simple .gr-dropdown > label + div > div > input:focus, 
+.content-panel-simple .gr-dropdown > label + div > div > select:focus,
+.content-panel-simple .gr-textbox > label + div > textarea:focus {{
+    border-color: var(--fly-primary) !important;
+    box-shadow: 0 0 0 3px rgba(var(--fly-primary-rgb), 0.12) !important;
+    background-color: var(--fly-bg-white) !important;
+}}
+
+.content-panel-simple .gr-dropdown select {{ 
+    font-family: var(--font-global) !important;
+    width: 100%;
+    cursor: pointer;
+}}
+
+.content-panel-simple .gr-textbox[label*="ترجمه شده"] > label + div > textarea {{ /* Target output textbox */
+    background-color: var(--fly-panel-bg-simple) !important; 
+    border-color: #A5D5FE !important; 
+    min-height: 100px; 
+    font-family: var(--font-english); 
+    font-size: 1em !important;
+    line-height: 1.5;
+    padding: 10px !important;
+}}
+.content-panel-simple .gr-panel, 
+.content-panel-simple div[label*="تنظیمات پیشرفته"] > .gr-accordion > .gr-panel {{
+    border-radius: 8px !important;
+    border: 1px solid var(--fly-border-color) !important;
+    background-color: var(--fly-input-bg-simple) !important;
+    padding: 0.8rem 1rem !important;
+    margin-top: 0.6rem;
+    box-shadow: none;
+}}
+.content-panel-simple div[label*="تنظیمات پیشرفته"] > .gr-accordion > button.gr-button {{
+    font-weight: 500 !important;
+    padding: 8px 10px !important;
+    border-radius: 6px !important;
+    background-color: #E5E7EB !important;
+    color: var(--fly-text-primary) !important;
+    border: 1px solid #D1D5DB !important;
+}}
+.content-panel-simple label > span.label-text {{ /* Targeting Gradio 4 label span */
+    font-weight: 500 !important;
+    color: #4B5563 !important;
+    font-size: 0.88em !important; 
+    margin-bottom: 6px !important;
+    display: inline-block; /* Keep labels inline */
+}}
+.content-panel-simple .gr-slider label span {{ font-size: 0.82em !important; color: var(--fly-text-secondary); }}
+
+.content-panel-simple div[label*="نمونه"] {{ margin-top: 1.5rem; }}
+.content-panel-simple div[label*="نمونه"] .gr-button.gr-button-tool,
+.content-panel-simple div[label*="نمونه"] .gr-sample-button {{
+    background-color: #E0E7FF !important;
+    color: var(--fly-primary) !important;
+    border-radius: 6px !important;
+    font-size: 0.78em !important;
+    padding: 4px 8px !important;
+}}
+.content-panel-simple .custom-hr {{ height: 1px; background-color: var(--fly-border-color); margin: 1.5rem 0; border: none; }}
+.api-warning-message {{
+    background-color: #FFFBEB !important; 
+    color: #92400E !important;
+    padding: 10px 12px !important;
+    border-radius: 8px !important;
+    border: 1px solid #FDE68A !important;
+    text-align: center !important;
+    margin: 0 0.2rem 1rem 0.2rem !important; 
+    font-size: 0.85em !important;
+}}
+
 
-@media (min-width: 640px) {{
-    .main-content-area-fly {{
+/* --- Responsive adjustments (from "beautiful" code, adapted) --- */
+@media (min-width: 640px) {
+    .main-content-area {{
         padding: 1.5rem; 
-        max-width: 900px; 
+        max-width: 700px; 
     }}
-    .content-panel {{
+    .content-panel-simple {{ /* Apply to the simple panel as well */
         padding: 1.5rem; 
     }}
-}}
+    .app-title-card h1 {{ font-size: 2.5em !important; }}
+    .app-title-card p {{ font-size: 1.05em !important; }}
+}
+
+@media (min-width: 768px) {
+    .main-content-area {{ max-width: 780px; }}
+    .content-panel-simple {{ padding: 2rem; }} /* Wider padding for desktop */
+
+    .content-panel-simple .main-content-row {{ /* Class from your simple layout */
+        display: flex !important;
+        flex-direction: row !important; 
+        gap: 1.5rem !important; 
+    }}
+    .content-panel-simple .main-content-row > .gr-column:nth-child(1) {{ flex-basis: 60%; }}
+    .content-panel-simple .main-content-row > .gr-column:nth-child(2) {{ flex-basis: 40%; }}
+    
+    .content-panel-simple .gr-button.lg.primary,
+    .content-panel-simple button[variant="primary"] {{ width: auto !important; align-self: flex-start; }}
 
-@media (min-width: 768px) {{
-    .main-content-columns-fly {{display: flex; flex-direction: row; gap: 2rem; align-items: flex-start;}}
-    .main-content-columns-fly > .gr-column:nth-child(1) {{flex: 3;}}
-    .main-content-columns-fly > .gr-column:nth-child(2) {{flex: 2; position: sticky; top: 1.5rem;}}
-    .action-button-container .gr-button.gr-button-primary {{width: auto !important; min-width: 220px; align-self: flex-end;}}
     .app-title-card h1 {{font-size: 2.75em !important;}}
     .app-title-card p {{font-size: 1.1em !important;}}
-    .content-panel {{ padding: 2rem; }}
-}}
+}
 """
 
 default_english_tts_voice = 'انگلیسی (آمریکا) - جنی (زن)'
-if not language_dict_persian_keys :
-    logging.warning("Language dictionary is empty!")
+if not language_dict_persian_keys:
+    logging.critical("خطای بحرانی: language_dict_persian_keys خالی است!")
     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] if language_dict_persian_keys else None
+    default_english_tts_voice = list(language_dict_persian_keys.keys())[0] if language_dict_persian_keys else "لیست خالی"
 
 logging.info(f"Gradio version: {gr.__version__}")
 
-with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فلای | Fly Language Learning") as demo:
+with gr.Blocks(theme=app_theme_outer, css=custom_css, title="آموزش زبان فلای") as demo:
     gr.HTML(f"""
         <div class="app-title-card">
             <h1>🚀 Fly Language Learning</h1>
@@ -308,115 +376,98 @@ with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فل
         </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 گوگل (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.Group(elem_classes=["content-panel"]): 
-            with gr.Row(elem_classes=["main-content-columns-fly"]): 
-                with gr.Column(scale=3, elem_id="input_column"): 
+    # main-content-area برای کنترل عرض کلی در دسکتاپ و پدینگ موبایل
+    with gr.Column(elem_classes=["main-content-area"]):
+        # content-panel-simple برای اعمال استایل کارت مانند و همپوشانی با هدر
+        with gr.Group(elem_classes=["content-panel-simple"]): 
+            if not GOOGLE_API_KEY or not model:
+                missing_key_msg = "⚠️ هشدار: قابلیت ترجمه غیرفعال است. "
+                if not GOOGLE_API_KEY: missing_key_msg += "لطفاً کلید GOOGLE_API_KEY را در بخش Secrets این Space تنظیم کنید."
+                elif not model: missing_key_msg += "خطا در بارگذاری مدل Gemini. لطفاً لاگ‌ها یا صحت کلید API را بررسی کنید."
+                gr.Markdown(f"<div class='api-warning-message'>{missing_key_msg}</div>")
+
+            # main-content-row از کد "ساده" شما برای چیدمان دو ستونی داخلی
+            with gr.Row(elem_classes=["main-content-row"]): 
+                with gr.Column(scale=3, min_width=300): 
                     input_text_persian = gr.Textbox(
-                        lines=5, 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)
+                        lines=4, 
+                        label="📝 متن فارسی برای ترجمه",
+                        placeholder="مثال: سلام، فردا هوا چطور است؟",
+                        value="سلام، امروز می‌خواهیم در مورد رنگ‌ها صحبت کنیم."
                     )
-                    with gr.Accordion("🎧 تنظیمات پیشرفته صدا", open=False):
-                        rate_slider = gr.Slider(minimum=-100, maximum=100, value=0, step=10, label="سرعت گفتار")
-                        volume_slider = gr.Slider(minimum=-100, maximum=100, value=0, step=10, label="بلندی صدا")
-                        pitch_slider = gr.Slider(minimum=-50, maximum=50, value=0, step=5, label="زیر و بمی صدا")
                     
-                    with gr.Column(elem_classes=["action-button-container"]): 
-                         submit_button = gr.Button("✨ ترجمه و پخش جادویی ✨", variant="primary") 
-
-                with gr.Column(scale=2, elem_id="output_column", elem_classes=["result-area-fly"]): 
-                    with gr.Group(elem_classes=["output-text-container"]):
-                        output_text_translated = gr.Textbox(
-                            label="📜 ترجمه انگلیسی روان:", interactive=False, lines=6, 
-                            placeholder="ترجمه در اینجا پدیدار خواهد شد...",
-                            elem_id="english_output_textbox"
-                        )
-                    with gr.Group(elem_classes=["output-audio-container"]):
-                        output_audio = gr.Audio(label="🎤 بشنوید:", type="filepath", format="mp3", interactive=False)
+                    dropdown_label = "🗣️ انتخاب گوینده و لهجه انگلیسی"
+                    if not language_dict_persian_keys: dropdown_label += " (لیست خالی!)"
                     
-                    status_message = gr.Markdown(visible=False, elem_classes=["status-message-fly"])
-
+                    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=dropdown_label,
+                        interactive=bool(language_dict_persian_keys)
+                    )
+                    with gr.Accordion("⚙️ تنظیمات پیشرفته صدا", open=False):
+                        with gr.Row(): # Ensure sliders are in a row if desired
+                            rate_slider = gr.Slider(minimum=-100, maximum=100, step=1, value=0, label="سرعت (%)", scale=1)
+                            volume_slider = gr.Slider(minimum=-100, maximum=100, step=1, value=0, label="حجم (%)", scale=1)
+                        pitch_slider = gr.Slider(minimum=-50, maximum=50, step=1, value=0, label="گام (Hz)") # Removed scale=2 as it might conflict
+
+                    submit_button = gr.Button("🚀 ترجمه و تلفظ", variant="primary", elem_classes=["lg"]) # Added elem_classes for simple CSS button
+
+                with gr.Column(scale=2, min_width=280):
+                    output_text_translated = gr.Textbox(
+                        label="📜 متن ترجمه شده (انگلیسی)", 
+                        interactive=False, 
+                        lines=6, 
+                        placeholder="متن انگلیسی ترجمه شده یا پیام‌های خطا..."
+                    )
+                    output_audio = gr.Audio(
+                        type="filepath", 
+                        label="🎧 فایل صوتی", 
+                        format="mp3", 
+                        interactive=False
+                    )
 
-            if language_dict_persian_keys and default_english_tts_voice:
-                gr.HTML("<hr class='custom-hr-fly'>")
+            # Examples section inside content-panel-simple
+            if language_dict_persian_keys and default_english_tts_voice and default_english_tts_voice != "لیست صداها خالی است":
+                gr.HTML("<hr class='custom-hr'>") # Use the class from simple CSS
                 num_voices = len(language_dict_persian_keys)
                 voice_keys = list(language_dict_persian_keys.keys())
-                
-                valid_example_list = []
-                if num_voices > 0:
-                    voice1_idx, voice2_idx, voice3_idx, voice4_idx = 0, min(7, num_voices - 1), min(13, num_voices - 1), min(3, num_voices - 1)
-                    example_list_data = [
-                        ["قیمت این لباس چقدر است؟", voice_keys[voice1_idx], 0, 0, 0],
-                        ["می‌توانید آدرس را روی نقشه به من نشان دهید؟", voice_keys[voice2_idx], 5, 0, 0],
-                        ["ببخشید، متوجه نشدم. امکان دارد تکرار کنید؟", voice_keys[voice3_idx], -10, 10, 0],
-                        ["یک قهوه و یک کیک لطفا.", voice_keys[voice4_idx], 0, 0, 0], 
+                voice1, voice2, voice3 = voice_keys[0], voice_keys[min(7, num_voices-1)], voice_keys[min(13, num_voices-1)]
+                example_list = [
+                        ["قیمت این لباس چقدر است؟", voice1, 0, 0, 0],
+                        ["می‌توانید آدرس را روی نقشه به من نشان دهید؟", voice2, 0, 0, 0],
+                        ["ببخشید، متوجه نشدم. امکان دارد تکرار کنید؟", voice3, -10, 0, 0],
                     ]
-                    valid_example_list = example_list_data
-                else: logging.warning("No voices available for examples.")
-
-                if valid_example_list:
-                    gr.Examples(
-                        examples=valid_example_list,
-                        inputs=[input_text_persian, language_dropdown_tts_english, rate_slider, volume_slider, pitch_slider],
-                        outputs=[output_text_translated, output_audio, status_message], 
-                        fn=translate_and_speak_sync_wrapper,
-                        label="🌟 نمونه‌های الهام‌بخش (برای امتحان کلیک کنید):",
-                        elem_id="examples_section"
-                    )
-        
-    gr.Markdown("<p class='app-footer-fly'>ساخته شده با ❤️ و ☕ توسط تیم فلای | Fly Language Learning © ۲۰۲۴</p>")
-
-    if 'submit_button' in locals() and submit_button is not None:
-        def handle_submit_click_ui_update(persian_text, english_tts_voice_key, rate, volume, pitch):
-            translated_text, audio_path, status_update_dict = translate_and_speak_sync_wrapper(
-                persian_text, english_tts_voice_key, rate, volume, pitch
-            )
-            
-            current_value = None
-            is_visible = False
-            status_class_list = ["status-message-fly"] 
-
-            if status_update_dict and isinstance(status_update_dict, dict):
-                current_value = status_update_dict.get("value")
-                is_visible = status_update_dict.get("visible", False) 
                 
-                if current_value: 
-                    if "موفقیت" in current_value or "✅" in current_value:
-                        status_class_list.append("success")
-                    elif "خطا" in current_value or "⚠️" in current_value or "🚫" in current_value:
-                        status_class_list.append("error")
-            
-            updated_status_message_ui = gr.update(value=current_value, 
-                                               visible=is_visible, 
-                                               elem_classes=status_class_list)
-
-            return translated_text, audio_path, updated_status_message_ui
+                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,
+                    cache_examples=os.getenv("GRADIO_CACHE_EXAMPLES", "False").lower() == "true",
+                    label="💡 نمونه‌های کاربردی" # Label from simple code
+                )
+            else:
+                gr.Markdown("<p style='text-align:center; color:var(--fly-text-secondary); margin-top:1rem;'>نمونه‌ای برای نمایش موجود نیست (لیست صداها خالی است یا صدای پیش‌فرض معتبر نیست).</p>")
+
+    gr.Markdown("<p class='app-footer-fly'>Fly Language Learning © 2024</p>") # Using beautiful footer class
 
+    if 'submit_button' in locals() and submit_button is not None:
         submit_button.click(
-            fn=handle_submit_click_ui_update,
+            fn=translate_and_speak_sync_wrapper, # Direct call, no complex UI update for status
             inputs=[input_text_persian, language_dropdown_tts_english, rate_slider, volume_slider, pitch_slider],
-            outputs=[output_text_translated, output_audio, status_message]
+            outputs=[output_text_translated, output_audio] # Only two outputs now
         )
     else:
         logging.error("Submit button was not initialized correctly or is None.")
 
 if __name__ == "__main__":
-    if not language_dict_persian_keys: 
-        logging.critical("CRITICAL: Voice dictionary (language_dict_persian_keys) is empty!")
-    elif not default_english_tts_voice:
-        logging.warning("WARNING: No default English TTS voice could be set.")
-        
-    demo.launch(server_name="0.0.0.0", server_port=7860, debug=True, show_error=True)
+    if not language_dict_persian_keys:
+        logging.critical("خطای بحرانی: language_dict_persian_keys خالی است!")
+    
+    demo.launch(
+        server_name="0.0.0.0", 
+        server_port=7860, 
+        debug=os.environ.get("GRADIO_DEBUG", "False").lower() == "true",
+        show_error=True # Good for debugging
+        )