Update app.py

app.py

@@ -9,7 +9,6 @@ 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__}") # Moved to after import to ensure gr is defined
 
 GOOGLE_API_KEY = os.environ.get('GOOGLE_API_KEY')
 model = None
@@ -103,18 +102,26 @@ def get_event_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 
 
+    # Default status update (invisible)
+    status_update = gr.update(value=None, visible=False)
+
     if not GOOGLE_API_KEY or not model:
         msg = "خطا: سرویس ترجمه پیکربندی نشده است. لطفاً از تنظیم GOOGLE_API_KEY اطمینان حاصل کنید."
-        logging.error(msg); return msg, None, None # Return three values for outputs
+        logging.error(msg)
+        status_update = gr.update(value=f"🚫 {msg}", visible=True)
+        return msg, None, status_update
     if not persian_text or not persian_text.strip():
         msg = "لطفاً متن فارسی را برای ترجمه وارد کنید."
-        logging.warning(msg); return msg, None, None # Return three values for outputs
+        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); return persian_text, None, None # Return three values for outputs
+        logging.warning(msg)
+        status_update = gr.update(value=f"⚠️ {msg}", visible=True)
+        return persian_text, None, status_update # Return Persian text so user sees their input
 
     try:
         translation_status_msg, translated_text = loop.run_until_complete(
@@ -122,22 +129,24 @@ def translate_and_speak_sync_wrapper(persian_text, english_tts_voice_key, rate,
         )
         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, gr.update(visible=False) # Return three values
+            logging.error(err_msg)
+            status_update = gr.update(value=f"🚫 {err_msg}", visible=True)
+            return err_msg, None, status_update
         
-        # Show the translated text immediately
-        # gr.update for status_message will be handled in the main thread / by Gradio's event handling
-
         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"{translated_text}\n(خطای TTS: {tts_status_msg})"
-            logging.error(err_msg); return err_msg, None, gr.update(value=f"⚠️ خطای TTS: {tts_status_msg}", visible=True) # Return three values
+            err_msg = f"خطای TTS: {tts_status_msg}" # Don't repeat translated text here, it's already in output
+            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 # Return translated text even if TTS fails
         
         audio_file_to_clean = audio_path 
         logging.info(f"عملیات موفق. متن ترجمه شده: '{translated_text[:30]}...', مسیر صوت: {audio_path}")
-        return translated_text, audio_path, gr.update(value="✅ ترجمه و تولید صدا موفقیت آمیز بود!", visible=True) # Return three values
+        status_update = gr.update(value="✅ ترجمه و تولید صدا موفقیت آمیز بود!", visible=True)
+        return translated_text, audio_path, status_update
     
     except Exception as e:
         logging.error(f"خطای غیرمنتظره در wrapper: {e}", exc_info=True)
@@ -147,7 +156,8 @@ def translate_and_speak_sync_wrapper(persian_text, english_tts_voice_key, rate,
                 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}")
-        return f"خطای داخلی سرور: {type(e).__name__}", None, gr.update(value=f"🚫 خطای داخلی: {type(e).__name__}", visible=True) # Return three values
+        status_update = gr.update(value=f"🚫 خطای داخلی سرور: {type(e).__name__}", visible=True)
+        return f"خطای داخلی سرور: {type(e).__name__}", None, status_update
 
 # --- تعریف تم و CSS بسیار زیباتر ---
 FLY_PRIMARY_COLOR_HEX = "#4F46E5"  # Indigo
@@ -159,15 +169,12 @@ FLY_LIGHT_BACKGROUND_HEX = "#F9FAFB" # Gray 50
 FLY_WHITE_HEX = "#FFFFFF"
 FLY_BORDER_COLOR_HEX = "#D1D5DB"   # Gray 300
 FLY_INPUT_BG_HEX = "#FFFFFF"
-FLY_PANEL_BG_HEX = "#E0E7FF"       # Indigo 100 (برای پنل ترجمه)
+FLY_PANEL_BG_HEX = "#E0E7FF"       # Indigo 100
 
-# برای استفاده از فونت وزیر در تم Gradio اگر به صورت مستقیم در GoogleFont کار نکند،
-# باید از یک فونت جایگزین استاندارد استفاده کرد و سپس با CSS آن را override کرد.
-app_theme = gr.themes.Base( # Using Base theme for more CSS control
-    font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"], # Primary font for Gradio's own elements
+app_theme = gr.themes.Base(
+    font=[gr.themes.GoogleFont("Inter"), "system-ui", "sans-serif"],
 ).set(
     body_background_fill=FLY_LIGHT_BACKGROUND_HEX,
-    # Button colors will be handled by custom CSS for more advanced styling (gradients, etc.)
 )
 
 custom_css = f"""
@@ -190,357 +197,71 @@ custom_css = f"""
     --font-global: 'Vazirmatn', 'Inter', 'Poppins', system-ui, sans-serif;
     --font-english: 'Poppins', 'Inter', system-ui, sans-serif;
 
-    --radius-sm: 0.375rem; /* 6px */
-    --radius-md: 0.5rem;   /* 8px */
-    --radius-lg: 0.75rem;  /* 12px */
-    --radius-xl: 1rem;   /* 16px */
-    --radius-full: 9999px;
-
+    --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px;
     --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 -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; /* For Indigo #4F46E5 */
+    --fly-accent-rgb: 245, 158, 11; /* For Amber #F59E0B */
 }}
 
-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; /* Base font size */
-}}
-
-.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%); /* Light gradient background for the whole page */
-    display: flex; 
-    flex-direction: column;
-}}
-
-.app-title-card {{
-    text-align: center; 
-    padding: 2.5rem 1rem;
-    margin: 0;
-    background: linear-gradient(135deg, var(--fly-primary) 0%, var(--fly-secondary) 100%);
-    color: var(--fly-bg-white); 
-    border-bottom-left-radius: var(--radius-xl); 
-    border-bottom-right-radius: var(--radius-xl);
-    box-shadow: var(--shadow-lg);
-    position: relative;
-    overflow: hidden;
-}}
-.app-title-card::before {{ /* Decorative element */
-    content: '';
-    position: absolute;
-    top: -50px; right: -50px;
-    width: 150px; height: 150px;
-    background: rgba(255,255,255,0.1);
-    border-radius: var(--radius-full);
-    opacity: 0.5;
-    transform: rotate(45deg);
-}}
-.app-title-card h1 {{
-    font-size: 2.25em !important; /* Larger title */
-    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 {{
-    flex-grow: 1; 
-    padding: 1.5rem; /* Add padding around the main content */
-    max-width: 900px; /* Max width for content on larger screens */
-    width: 100%;
-    margin: 0 auto; /* Center the content area */
-}}
-
-.content-panel {{ /* Replaces content-wrapper, more generic name */
-    background-color: var(--fly-bg-white); 
-    padding: 1.5rem; 
-    border-radius: var(--radius-xl); 
-    box-shadow: var(--shadow-xl); 
-    margin-top: -2rem; /* Overlap with header for a modern effect */
-    position: relative; /* For stacking context */
-    z-index: 10;
-    margin-bottom: 2rem;
-}}
-
-/* --- Styling inputs --- */
-.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; /* Make label take full width */
-}}
-
-.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, 79, 70, 229), 0.3) !important; /* Assuming primary color has RGB equivalent */
-    outline: none;
-    transform: translateY(-1px); /* Subtle lift effect */
-}}
-/* Add this if you define --fly-primary-rgb for the focus shadow */
-:root {{ --fly-primary-rgb: 79, 70, 229; }}
-
-
-.gr-dropdown svg.icon {{ 
-    right: auto !important; 
-    left: 1rem !important;
-    color: var(--fly-subtle-text) !important;
-}}
-
-/* Output Textbox styling */
-.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; /* Accent border */
-    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 {{ /* Style the audio player */
-    border-radius: var(--radius-md);
-    box-shadow: var(--shadow-sm);
-}}
-.output-audio-container .gr-audio audio {{
-    border-radius: var(--radius-md);
-}}
-
+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;}}
 
-/* Accordion styling */
-.gr-accordion > button.gr-button {{
-    font-weight: 600 !important; 
-    padding: 0.75rem 1rem !important; 
-    border-radius: var(--radius-md) !important;
-    background-color: #EDF2F7 !important; /* Lighter gray */
-    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; /* Ensure text is aligned 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; /* Pull up slightly under accordion button */
-    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;
-}}
+.app-title-card {{text-align: center; padding: 2.5rem 1rem; margin: 0; background: linear-gradient(135deg, var(--fly-primary) 0%, var(--fly-secondary) 100%); color: var(--fly-bg-white); border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); box-shadow: var(--shadow-lg); position: relative; overflow: hidden;}}
+.app-title-card::before {{content: ''; position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: var(--radius-full); opacity: 0.5; transform: rotate(45deg);}}
+.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 {{flex-grow: 1; padding: 1.5rem; max-width: 900px; width: 100%; margin: 0 auto;}}
+.content-panel {{background-color: var(--fly-bg-white); padding: 1.5rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); margin-top: -2rem; position: relative; z-index: 10; margin-bottom: 2rem;}}
 
-/* Submit Button - More engaging */
-.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; /* Amber to Orange gradient */
-    border: none !important;
-    box-shadow: var(--shadow-md), 0 0 15px rgba(var(--fly-accent-rgb, 245, 158, 11), 0.3); /* Accent glow */
-    transition: var(--transition-normal), transform 0.1s ease-out;
-    cursor: pointer;
-}}
-/* Add this if you define --fly-accent-rgb for the button glow */
-:root {{ --fly-accent-rgb: 245, 158, 11; }}
+.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;}}
 
-.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, 245, 158, 11), 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, 245, 158, 11), 0.2);
-}}
+.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;}}
 
-/* Examples Section */
-div#examples_section {{ /* Use specific ID */
-    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 {{ /* Target Gradio 3.x/4.x 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, /* Gradio 4.x */
-div#examples_section table tbody tr td button.gr-button-secondary /* Gradio 3.x (more specific) */ {{ 
-    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);
-}}
+.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);}}
 
-/* Status Message */
-.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; /* Emerald 100 */
-    color: #065F46; /* Emerald 700 */
-    border: 1px solid #A7F3D0; /* Emerald 200 */
-}}
-.status-message-fly.error {{
-    background-color: #FEE2E2; /* Red 100 */
-    color: #991B1B; /* Red 700 */
-    border: 1px solid #FECACA; /* Red 200 */
-}}
+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; /* Amber 100 */
-    color: #92400E !important; /* Amber 700 */
-    padding: 0.75rem 1rem !important;
-    border-radius: var(--radius-md) !important; 
-    border: 1px solid #FDE68A !important; /* Amber 300 */
-    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); /* Subtle background for footer */
-    backdrop-filter: blur(5px); /* Glassmorphism hint */
-    border-top: 1px solid var(--fly-border-color);
-}}
-footer, .gradio-footer {{
-    display: none !important;
-}}
+.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;}}
 
-/* Desktop improvements */
 @media (min-width: 768px) {{
-    .main-content-columns-fly {{ 
-        display: flex; 
-        flex-direction: row; 
-        gap: 2rem; 
-        align-items: flex-start; /* Align items to top */
-    }}
-    .main-content-columns-fly > .gr-column:nth-child(1) {{ 
-        flex: 3; 
-    }}
-    .main-content-columns-fly > .gr-column:nth-child(2) {{ 
-        flex: 2; 
-        position: sticky; /* Make output column sticky on scroll */
-        top: 1.5rem; 
-    }}
-    
-    .action-button-container .gr-button.gr-button-primary {{ 
-        width: auto !important; 
-        min-width: 220px;
-        align-self: flex-end; /* Align button to the right in its container */
-    }}
-     .app-title-card h1 {{ font-size: 2.75em !important; }}
-     .app-title-card p {{ font-size: 1.1em !important; }}
-     .content-panel {{ padding: 2rem; }}
+    .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;}}
 }}
 """
 
@@ -588,7 +309,6 @@ with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فل
                         pitch_slider = gr.Slider(minimum=-50, maximum=50, value=0, step=5, label="زیر و بمی صدا")
                     
                     with gr.Column(elem_classes=["action-button-container"]): 
-                         # Using variant="primary" for Gradio theming, CSS will override for advanced style
                          submit_button = gr.Button("✨ ترجمه و پخش جادویی ✨", variant="primary") 
 
                 with gr.Column(scale=2, elem_id="output_column", elem_classes=["result-area-fly"]): 
@@ -601,21 +321,17 @@ with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فل
                     with gr.Group(elem_classes=["output-audio-container"]):
                         output_audio = gr.Audio(label="🎤 بشنوید:", type="filepath", format="mp3", interactive=False)
                     
-                    status_message = gr.Markdown(visible=False, elem_classes=["status-message-fly"])
+                    status_message = gr.Markdown(visible=False, elem_classes=["status-message-fly"]) # Base class only
 
 
             if language_dict_persian_keys and default_english_tts_voice:
-                gr.HTML("<hr class='custom-hr-fly'>") # Visual separator
+                gr.HTML("<hr class='custom-hr-fly'>")
                 num_voices = len(language_dict_persian_keys)
                 voice_keys = list(language_dict_persian_keys.keys())
                 
                 valid_example_list = []
                 if num_voices > 0:
-                    voice1_idx = 0
-                    voice2_idx = min(7, num_voices - 1)
-                    voice3_idx = min(13, num_voices - 1)
-                    voice4_idx = min(3, num_voices - 1)
-
+                    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],
@@ -623,53 +339,56 @@ with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فل
                         ["یک قهوه و یک کیک لطفا.", voice_keys[voice4_idx], 0, 0, 0], 
                     ]
                     valid_example_list = example_list_data
-                else:
-                    logging.warning("No voices available for examples.")
+                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 should match the number of return values from the function
                         outputs=[output_text_translated, output_audio, status_message], 
-                        fn=translate_and_speak_sync_wrapper,
+                        fn=translate_and_speak_sync_wrapper, # Direct call, status will be handled by its return
                         label="🌟 نمونه‌های الهام‌بخش (برای امتحان کلیک کنید):",
-                        elem_id="examples_section" # Ensure this ID is targeted in CSS
+                        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(persian_text, english_tts_voice_key, rate, volume, pitch):
-            translated_text, audio_path, status_update = translate_and_speak_sync_wrapper(
+        def handle_submit_click_ui_update(persian_text, english_tts_voice_key, rate, volume, pitch):
+            # Call the core logic function
+            translated_text, audio_path, status_update_dict = translate_and_speak_sync_wrapper(
                 persian_text, english_tts_voice_key, rate, volume, pitch
             )
-            # Determine status message class based on content
-            status_class = "status-message-fly"
-            if status_update and isinstance(status_update, gr. uomini.Update): # Check if it's a Gradio Update object
-                current_value = status_update.value
-                if current_value: # Check if value is not None or empty
+            
+            # Prepare the status message UI update based on the dictionary returned
+            current_value = None
+            is_visible = False
+            status_class_list = ["status-message-fly"] # Base class
+
+            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) # Default to False if not specified
+                
+                if current_value: # Only add specific class if there's a message
                     if "موفقیت" in current_value or "✅" in current_value:
-                        status_class += " success"
+                        status_class_list.append("success")
                     elif "خطا" in current_value or "⚠️" in current_value or "🚫" in current_value:
-                        status_class += " error"
+                        status_class_list.append("error")
             
-            # Update status_message with new class
-            updated_status_message = gr.update(value=status_update.value if status_update else None, 
-                                               visible=bool(status_update and status_update.value), 
-                                               elem_classes=[status_class]) # Pass as a list
+            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
+            return translated_text, audio_path, updated_status_message_ui
 
         submit_button.click(
-            fn=handle_submit_click, # Use the new handler
+            fn=handle_submit_click_ui_update,
             inputs=[input_text_persian, language_dropdown_tts_english, rate_slider, volume_slider, pitch_slider],
-            outputs=[output_text_translated, output_audio, status_message] # Match the number of outputs
+            outputs=[output_text_translated, output_audio, status_message]
         )
     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!")