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 show the actual version used by HF Spaces
+#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
@@ -108,13 +108,13 @@ def translate_and_speak_sync_wrapper(persian_text, english_tts_voice_key, rate,
 
     if not GOOGLE_API_KEY or not model:
         msg = "خطا: سرویس ترجمه پیکربندی نشده است. لطفاً از تنظیم GOOGLE_API_KEY اطمینان حاصل کنید."
-        logging.error(msg); return msg, None
+        logging.error(msg); return msg, None, None # Return three values for outputs
     if not persian_text or not persian_text.strip():
         msg = "لطفاً متن فارسی را برای ترجمه وارد کنید."
-        logging.warning(msg); return msg, None
+        logging.warning(msg); return msg, None, None # Return three values for outputs
     if not english_tts_voice_key or english_tts_voice_key == "لیست خالی":
         msg = "لطفاً یک صدای گوینده انتخاب کنید."
-        logging.warning(msg); return persian_text, None 
+        logging.warning(msg); return persian_text, None, None # Return three values for outputs
 
     try:
         translation_status_msg, translated_text = loop.run_until_complete(
@@ -122,19 +122,22 @@ 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
+            logging.error(err_msg); return err_msg, None, gr.update(visible=False) # Return three values
         
+        # 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
+            logging.error(err_msg); return err_msg, None, gr.update(value=f"⚠️ خطای TTS: {tts_status_msg}", visible=True) # Return three values
         
         audio_file_to_clean = audio_path 
         logging.info(f"عملیات موفق. متن ترجمه شده: '{translated_text[:30]}...', مسیر صوت: {audio_path}")
-        return translated_text, audio_path
+        return translated_text, audio_path, gr.update(value="✅ ترجمه و تولید صدا موفقیت آمیز بود!", visible=True) # Return three values
     
     except Exception as e:
         logging.error(f"خطای غیرمنتظره در wrapper: {e}", exc_info=True)
@@ -144,69 +147,75 @@ 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
-
-# --- تعریف تم و CSS بهبود یافته ---
-FLY_PRIMARY_COLOR_HEX = "#2563EB" 
-FLY_SECONDARY_COLOR_HEX = "#059669" 
-FLY_ACCENT_COLOR_HEX = "#D97706"
-FLY_TEXT_COLOR_HEX = "#1F2937" 
-FLY_SUBTLE_TEXT_HEX = "#6B7280" 
-FLY_LIGHT_BACKGROUND_HEX = "#F3F4F6"
+        return f"خطای داخلی سرور: {type(e).__name__}", None, gr.update(value=f"🚫 خطای داخلی: {type(e).__name__}", visible=True) # Return three values
+
+# --- تعریف تم و CSS بسیار زیباتر ---
+FLY_PRIMARY_COLOR_HEX = "#4F46E5"  # Indigo
+FLY_SECONDARY_COLOR_HEX = "#10B981" # Emerald
+FLY_ACCENT_COLOR_HEX = "#F59E0B"   # Amber
+FLY_TEXT_COLOR_HEX = "#111827"     # Gray 900
+FLY_SUBTLE_TEXT_HEX = "#6B7280"    # Gray 500
+FLY_LIGHT_BACKGROUND_HEX = "#F9FAFB" # Gray 50
 FLY_WHITE_HEX = "#FFFFFF"
-FLY_BORDER_COLOR_HEX = "#D1D5DB" 
-FLY_INPUT_BG_HEX = "#FFFFFF" 
-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,
-    secondary_hue=gr.themes.colors.emerald,
-    neutral_hue=gr.themes.colors.slate,
-    font=[gr.themes.GoogleFont("Vazirmatn"), "Arial", "sans-serif"],
+FLY_BORDER_COLOR_HEX = "#D1D5DB"   # Gray 300
+FLY_INPUT_BG_HEX = "#FFFFFF"
+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
 ).set(
     body_background_fill=FLY_LIGHT_BACKGROUND_HEX,
-    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,
+    # Button colors will be handled by custom CSS for more advanced styling (gradients, etc.)
 )
 
 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');
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@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');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
+
 :root {{
     --fly-primary: {FLY_PRIMARY_COLOR_HEX}; 
     --fly-secondary: {FLY_SECONDARY_COLOR_HEX};
     --fly-accent: {FLY_ACCENT_COLOR_HEX}; 
-    --fly-text: {FLY_TEXT_COLOR_HEX};
-    --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-text-primary: {FLY_TEXT_COLOR_HEX};
+    --fly-text-secondary: {FLY_SUBTLE_TEXT_HEX};
+    --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-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: 8px; 
-    --border-radius-lg: 12px;
+    
+    --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;
+
     --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);
+    --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;
 }}
+
 body {{
-    font-family: var(--global-font); 
+    font-family: var(--font-global); 
     direction: rtl; 
-    background-color: var(--fly-light-bg); 
-    color: var(--fly-text); 
+    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: 15px;
+    font-size: 16px; /* Base font size */
 }}
+
 .gradio-container {{
     max-width: 100% !important; 
     width: 100% !important; 
@@ -215,247 +224,323 @@ body {{
     padding: 0 !important; 
     border-radius: 0 !important; 
     box-shadow: none !important; 
-    background-color: var(--fly-light-bg) !important; 
+    background: linear-gradient(170deg, #E0F2FE 0%, #F3E8FF 100%); /* Light gradient background for the whole page */
     display: flex; 
     flex-direction: column;
 }}
 
-.app-header-fly {{
+.app-title-card {{
     text-align: center; 
-    padding: 24px 15px;
+    padding: 2.5rem 1rem;
+    margin: 0;
     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 p {{
-    font-size: 0.95em !important; 
-    margin-top: 4px; 
+    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.9) !important;
+    color: rgba(255, 255, 255, 0.85) !important;
 }}
 
 .main-content-area-fly {{
     flex-grow: 1; 
-    padding: 0 1rem; 
+    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-wrapper {{ /* This class will be applied to gr.Group */
-    background-color: var(--fly-white); 
+
+.content-panel {{ /* Replaces content-wrapper, more generic name */
+    background-color: var(--fly-bg-white); 
     padding: 1.5rem; 
-    border-radius: var(--border-radius-lg); 
-    box-shadow: var(--shadow-md); 
-    margin-bottom: 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-input > label > span.label-text, 
+.gr-dropdown > label > span.label-text,
+.gr-slider > label > span.label-text {{
     font-weight: 600 !important; 
-    color: #374151 !important; 
+    color: var(--fly-text-primary) !important; 
     font-size: 0.9em !important; 
-    margin-bottom: 6px !important; 
-    display: inline-block;
+    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(--border-radius-md) !important; 
-    border: 1px solid var(--fly-border) !important;
-    font-size: 0.95em !important; 
+    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: 10px 12px !important; 
+    padding: 0.75rem 1rem !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;
+    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(37, 99, 235, 0.2) !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: 10px !important;
+    left: 1rem !important;
+    color: var(--fly-subtle-text) !important;
 }}
 
-.gr-textbox[label*="ترجمه انگلیسی"] > label + div > textarea, 
-.gradio-interface .output_text .gr-textbox[data-testid="textbox"] > label + div > textarea {{
+/* 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-color: #A5D5FE !important;
-    min-height: 100px; 
-    font-family: var(--english-font) !important; 
-    font-size: 1em !important;
-    color: #0C4A6E !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);
 }}
 
+
+/* Accordion styling */
 .gr-accordion > button.gr-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; 
+    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: background-color 0.2s ease;
+    transition: var(--transition-normal);
+    text-align: right; /* Ensure text is aligned right */
 }}
 .gr-accordion > button.gr-button:hover {{ 
-    background-color: #D1D5DB !important; 
+    background-color: #E2E8F0 !important; 
+    border-color: var(--fly-primary) !important;
+    color: var(--fly-primary) !important;
 }}
 .gr-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; 
+    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: 8px 0 !important;
+    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 label span {{
-    font-size: 0.85em !important; 
-    color: var(--fly-subtle-text);
+.gr-slider input[type="range"]::-moz-range-thumb {{
+    background: var(--fly-primary) !important;
+    box-shadow: var(--shadow-sm) !important;
 }}
 
-/* Submit Button */
-.fly-submit-button-container .gr-button {{ /* Target the container of the button */
+
+/* Submit Button - More engaging */
+.action-button-container .gr-button.gr-button-primary {{
     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; 
+    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;
-    transition: background-color 0.2s ease, transform 0.1s ease;
+    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;
 }}
-.fly-submit-button-container .gr-button:hover {{ 
-    transform: translateY(-2px); 
+/* Add this if you define --fly-accent-rgb for the button glow */
+:root {{ --fly-accent-rgb: 245, 158, 11; }}
+
+.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);
+}}
+
 
 /* Examples Section */
-div[id*="examples_section"] {{
-    margin-top: 1.5rem; 
+div#examples_section {{ /* Use specific ID */
+    margin-top: 2rem; 
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--fly-border-color);
 }}
-div[id*="examples_section"] > .gr-panel {{ 
+div#examples_section > .gr-panel {{ 
     background-color: transparent !important; 
     border: none !important; 
     padding: 0 !important; 
     box-shadow: none !important;
 }}
-div[id*="examples_section"] > .gr-form > button.gr-button.gr-button-secondary,
-div[id*="examples_section"] .gr-sample-button {{ 
-    background-color: #E0E7FF !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(--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_section"] > .gr-form > button.gr-button.gr-button-secondary:hover,
-div[id*="examples_section"] .gr-sample-button:hover {{ 
-    background-color: #C7D2FE !important; 
-}}
-div[id*="examples_section"] .gr-samples-header {{ 
-    font-weight: 600; 
-    color: #4B5563; 
-    font-size: 0.95em; 
-    margin-bottom: 0.8rem;
+    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 */
+.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 */
+}}
+
+
 .custom-hr-fly {{
     height: 1px; 
-    background-color: var(--fly-border); 
-    margin: 1.8rem 0; 
+    background-color: var(--fly-border-color); 
+    margin: 2rem 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;
+    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 1rem 0.5rem !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.8em; 
-    color: var(--fly-subtle-text); 
-    margin-top:2rem; 
-    padding-bottom: 1rem;
+    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;
 }}
 
+/* Desktop improvements */
 @media (min-width: 768px) {{
-    body {{font-size: 16px;}}
-    .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;
-    }}
-    .app-header-fly h1 {{ font-size: 2em !important; }} 
-    .app-header-fly p {{ font-size: 1em !important; }}
-    .main-content-area-fly {{padding: 0;}}
-    
     .main-content-columns-fly {{ 
         display: flex; 
         flex-direction: row; 
-        gap: 1.5rem; 
+        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; 
     }}
     
-    .fly-submit-button-container .gr-button {{ 
+    .action-button-container .gr-button.gr-button-primary {{ 
         width: auto !important; 
-        min-width: 200px;
+        min-width: 220px;
+        align-self: flex-end; /* Align button to the right in its container */
     }}
-    .api-warning-message-fly {{
-        margin-left: 0 !important; 
-        margin-right: 0 !important; 
-        font-size: 0.9em;
-    }}
-}}
-
-.result-area-fly {{ 
-    margin-top: 1rem; 
-}}
-.result-area-fly > .gr-block > .gr-form > .gr-input, /* Gradio < 4 */
-.result-area-fly > div[data-testid="block"] > div[data-testid="form"] > .gr-input, /* Gradio 4+ */
-.result-array-fly > .gr-block > .gr-form > .gr-audio, /* Gradio < 4 */
-.result-area-fly > div[data-testid="block"] > div[data-testid="form"] > .gr-audio {{
-    margin-bottom: 0.8rem;
+     .app-title-card h1 {{ font-size: 2.75em !important; }}
+     .app-title-card p {{ font-size: 1.1em !important; }}
+     .content-panel {{ padding: 2rem; }}
 }}
 """
 
@@ -466,8 +551,15 @@ if not language_dict_persian_keys :
 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
 
+logging.info(f"Gradio version: {gr.__version__}")
+
 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>""")
+    gr.HTML(f"""
+        <div class="app-title-card">
+            <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:
@@ -476,39 +568,44 @@ with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فل
             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-wrapper"]): # CHANGED: gr.Box to gr.Group
+        with gr.Group(elem_classes=["content-panel"]): 
             with gr.Row(elem_classes=["main-content-columns-fly"]): 
-                with gr.Column(scale=3): 
+                with gr.Column(scale=3, elem_id="input_column"): 
                     input_text_persian = gr.Textbox(
-                        lines=4, label="📝 متن فارسی خود را وارد کنید:", placeholder="مثال: سلام، حال شما چطور است؟",
+                        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="🗣️ گوینده و لهجه انگلیسی را انتخاب کنید:", 
+                        label="🗣️ گوینده و لهجه انگلیسی:", 
                         interactive=bool(language_dict_persian_keys and default_english_tts_voice is not None)
                     )
-                    with gr.Accordion("⚙️ تنظیمات پیشرفته صدا", open=False):
-                        # Using min, max, value for wider compatibility with older Gradio versions if `minimum` etc. are not supported
-                        rate_slider = gr.Slider(minimum=-100, maximum=100, value=0, step=10, label="سرعت گفتار (Rate)")
-                        volume_slider = gr.Slider(minimum=-100, maximum=100, value=0, step=10, label="بلندی صدا (Volume)")
-                        pitch_slider = gr.Slider(minimum=-50, maximum=50, value=0, step=5, label="زیر و بمی صدا (Pitch)")
+                    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="زیر و بمی صدا")
                     
-                    # To apply class to button container, we wrap it in a Group/Column if direct elem_classes on button's parent isn't enough
-                    with gr.Group(elem_classes=["fly-submit-button-container"]): # Using Group to contain the button for styling
-                         submit_button = gr.Button("ترجمه و پخش صدا", variant="primary") # Icon removed for wider compatibility initially
-
-                with gr.Column(scale=2, elem_classes=["result-area-fly"]): 
-                    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)
+                    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"]): 
+                    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)
+                    
+                    status_message = gr.Markdown(visible=False, elem_classes=["status-message-fly"])
+
 
             if language_dict_persian_keys and default_english_tts_voice:
-                gr.HTML("<hr class='custom-hr-fly'>")
+                gr.HTML("<hr class='custom-hr-fly'>") # Visual separator
                 num_voices = len(language_dict_persian_keys)
                 voice_keys = list(language_dict_persian_keys.keys())
                 
@@ -533,21 +630,41 @@ with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فل
                     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],
+                        # 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,
-                        label="💡 نمونه‌های آماده (برای امتحان کلیک کنید):",
-                        elem_id="examples_section" 
+                        label="🌟 نمونه‌های الهام‌بخش (برای امتحان کلیک کنید):",
+                        elem_id="examples_section" # Ensure this ID is targeted in CSS
                     )
         
-    gr.Markdown("<p class='app-footer-fly'>✨ Fly Language Learning © ۲۰۲۴ - قدرت گرفته از Gemini و EdgeTTS ✨</p>")
+    gr.Markdown("<p class='app-footer-fly'>ساخته شده با ❤️ و ☕ توسط تیم فلای | Fly Language Learning © ۲۰۲۴</p>")
 
-    # Ensure submit_button is defined before calling .click
-    # This check is good practice but usually not strictly needed if layout is static
     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(
+                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
+                    if "موفقیت" in current_value or "✅" in current_value:
+                        status_class += " success"
+                    elif "خطا" in current_value or "⚠️" in current_value or "🚫" in current_value:
+                        status_class += " 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
+
+            return translated_text, audio_path, updated_status_message
+
         submit_button.click(
-            fn=translate_and_speak_sync_wrapper,
+            fn=handle_submit_click, # Use the new handler
             inputs=[input_text_persian, language_dropdown_tts_english, rate_slider, volume_slider, pitch_slider],
-            outputs=[output_text_translated, output_audio]
+            outputs=[output_text_translated, output_audio, status_message] # Match the number of outputs
         )
     else:
         logging.error("Submit button was not initialized correctly or is None.")
@@ -555,8 +672,8 @@ with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فل
 
 if __name__ == "__main__":
     if not language_dict_persian_keys: 
-        logging.critical("CRITICAL: Voice dictionary (language_dict_persian_keys) is empty! The application might not function correctly.")
+        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. Dropdown might be empty or non-interactive.")
+        logging.warning("WARNING: No default English TTS voice could be set.")
         
-    demo.launch(server_name="0.0.0.0", server_port=7860, debug=True)
+    demo.launch(server_name="0.0.0.0", server_port=7860, debug=True, show_error=True)