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__}")
+logging.info(f"Gradio version: {gr.__version__}") # This will show the actual version used by HF Spaces
 
 GOOGLE_API_KEY = os.environ.get('GOOGLE_API_KEY')
 model = None
@@ -77,10 +77,9 @@ async def text_to_speech_edge_tts_async(text_to_speak, tts_voice_key, rate, volu
     try:
         rate_str, volume_str, pitch_str = f"{int(rate):+g}%", f"{int(volume):+g}%", f"{int(pitch):+g}Hz"
         communicate = edge_tts.Communicate(text_to_speak, voice_id, rate=rate_str, volume=volume_str, pitch=pitch_str)
-        # Ensure tmp_path is correctly defined and used
         with tempfile.NamedTemporaryFile(delete=False, suffix=".mp3") as tmp_file:
             tmp_path = tmp_file.name
-        await communicate.save(tmp_path) # save to the path
+        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
 
@@ -95,7 +94,7 @@ def get_event_loop():
         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: # No current event loop or loop is different
+    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
@@ -105,7 +104,7 @@ def translate_and_speak_sync_wrapper(persian_text, english_tts_voice_key, rate,
     logging.info(f"Wrapper called. Text: '{persian_text[:30]}...' Voice: {english_tts_voice_key}")
     loop = get_event_loop()
     
-    audio_file_to_clean = None # Variable to store path for cleanup
+    audio_file_to_clean = None 
 
     if not GOOGLE_API_KEY or not model:
         msg = "خطا: سرویس ترجمه پیکربندی نشده است. لطفاً از تنظیم GOOGLE_API_KEY اطمینان حاصل کنید."
@@ -115,7 +114,6 @@ def translate_and_speak_sync_wrapper(persian_text, english_tts_voice_key, rate,
         logging.warning(msg); return msg, None
     if not english_tts_voice_key or english_tts_voice_key == "لیست خالی":
         msg = "لطفاً یک صدای گوینده انتخاب کنید."
-        # Return Persian text if no voice selected, so user sees their input
         logging.warning(msg); return persian_text, None 
 
     try:
@@ -132,15 +130,14 @@ def translate_and_speak_sync_wrapper(persian_text, english_tts_voice_key, rate,
         
         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 # Return translated text with TTS error
+            logging.error(err_msg); return err_msg, None
         
-        audio_file_to_clean = audio_path # Mark for potential cleanup if needed by Gradio
+        audio_file_to_clean = audio_path 
         logging.info(f"عملیات موفق. متن ترجمه شده: '{translated_text[:30]}...', مسیر صوت: {audio_path}")
         return translated_text, audio_path
     
     except Exception as e:
         logging.error(f"خطای غیرمنتظره در wrapper: {e}", exc_info=True)
-        # Clean up temp file if an unexpected error occurs after its creation
         if audio_file_to_clean and os.path.exists(audio_file_to_clean):
             try:
                 os.remove(audio_file_to_clean)
@@ -152,14 +149,14 @@ def translate_and_speak_sync_wrapper(persian_text, english_tts_voice_key, rate,
 # --- تعریف تم و CSS بهبود یافته ---
 FLY_PRIMARY_COLOR_HEX = "#2563EB" 
 FLY_SECONDARY_COLOR_HEX = "#059669" 
-FLY_ACCENT_COLOR_HEX = "#D97706" # نارنجی برای دکمه اصلی
+FLY_ACCENT_COLOR_HEX = "#D97706"
 FLY_TEXT_COLOR_HEX = "#1F2937" 
 FLY_SUBTLE_TEXT_HEX = "#6B7280" 
-FLY_LIGHT_BACKGROUND_HEX = "#F3F4F6" # کمی روشن‌تر از قبل
+FLY_LIGHT_BACKGROUND_HEX = "#F3F4F6"
 FLY_WHITE_HEX = "#FFFFFF"
 FLY_BORDER_COLOR_HEX = "#D1D5DB" 
 FLY_INPUT_BG_HEX = "#FFFFFF" 
-FLY_PANEL_BG_HEX = "#E0F2FE" # آبی بسیار روشن برای پنل ترجمه
+FLY_PANEL_BG_HEX = "#E0F2FE"
 FLY_SUCCESS_GREEN_HEX = "#059669" 
 FLY_ERROR_RED_HEX = "#DC2626" 
 
@@ -175,9 +172,6 @@ app_theme = gr.themes.Soft(
     button_primary_text_color=FLY_WHITE_HEX,
 )
 
-# --- CSS بهبود یافته با دقت در f-string ---
-# IMPORTANT: Using ''' """ ''' to define the multi-line string to avoid f-string parsing issues with CSS's own curly braces.
-# If we were using f-string for CSS, all CSS '{' and '}' would need to be '{{' and '}}'.
 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');
@@ -254,7 +248,7 @@ body {{
     flex-grow: 1; 
     padding: 0 1rem; 
 }}
-.content-wrapper {{ 
+.content-wrapper {{ /* This class will be applied to gr.Group */
     background-color: var(--fly-white); 
     padding: 1.5rem; 
     border-radius: var(--border-radius-lg); 
@@ -271,7 +265,7 @@ body {{
     display: inline-block;
 }}
 .gr-input > label + div > textarea,
-.gr-dropdown > label + div > div > input, /* For searchable dropdown */
+.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;
@@ -295,11 +289,9 @@ body {{
 }}
 .gr-dropdown svg.icon {{ 
     right: auto !important; 
-    left: 10px !important; /* برای RTL */
+    left: 10px !important;
 }}
 
-/* Output Textbox styling */
-/* Targeting both old and new Gradio versions for output textbox */
 .gr-textbox[label*="ترجمه انگلیسی"] > label + div > textarea, 
 .gradio-interface .output_text .gr-textbox[data-testid="textbox"] > label + div > textarea {{
     background-color: var(--fly-panel-bg) !important; 
@@ -311,8 +303,7 @@ body {{
     font-weight: 500;
 }}
 
-/* Accordion styling */
-.gr-accordion > button.gr-button {{ /* Accordion Header Button */
+.gr-accordion > button.gr-button {{
     font-weight: 600 !important; 
     padding: 10px 12px !important; 
     border-radius: var(--border-radius-md) !important;
@@ -326,7 +317,7 @@ body {{
 .gr-accordion > button.gr-button:hover {{ 
     background-color: #D1D5DB !important; 
 }}
-.gr-accordion > div.gr-panel {{ /* Accordion Content Panel */
+.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; 
@@ -341,8 +332,8 @@ body {{
     color: var(--fly-subtle-text);
 }}
 
-/* Submit Button - Relies on app_theme for primary color */
-.fly-submit-button .gr-button {{
+/* Submit Button */
+.fly-submit-button-container .gr-button {{ /* Target the container of the button */
     width: 100% !important; 
     padding: 12px 20px !important; 
     font-size: 1em !important;
@@ -353,12 +344,12 @@ body {{
     letter-spacing: 0.5px;
     transition: background-color 0.2s ease, transform 0.1s ease;
 }}
-.fly-submit-button .gr-button:hover {{ 
+.fly-submit-button-container .gr-button:hover {{ 
     transform: translateY(-2px); 
 }}
 
 /* Examples Section */
-div[id*="examples_section"] {{ /* More specific selector */
+div[id*="examples_section"] {{
     margin-top: 1.5rem; 
 }}
 div[id*="examples_section"] > .gr-panel {{ 
@@ -367,8 +358,8 @@ div[id*="examples_section"] > .gr-panel {{
     padding: 0 !important; 
     box-shadow: none !important;
 }}
-div[id*="examples_section"] > .gr-form > button.gr-button.gr-button-secondary, /* Gradio 3.x */
-div[id*="examples_section"] .gr-sample-button /* Gradio 4.x */ {{ 
+div[id*="examples_section"] > .gr-form > button.gr-button.gr-button-secondary,
+div[id*="examples_section"] .gr-sample-button {{ 
     background-color: #E0E7FF !important; 
     color: var(--fly-primary) !important;
     border-radius: var(--border-radius-sm) !important; 
@@ -388,7 +379,6 @@ div[id*="examples_section"] .gr-samples-header {{
     margin-bottom: 0.8rem;
 }}
 
-
 .custom-hr-fly {{
     height: 1px; 
     background-color: var(--fly-border); 
@@ -417,7 +407,6 @@ footer, .gradio-footer {{
     display: none !important;
 }}
 
-/* Desktop improvements */
 @media (min-width: 768px) {{
     body {{font-size: 16px;}}
     .gradio-container {{
@@ -430,7 +419,7 @@ footer, .gradio-footer {{
     }}
     .app-header-fly {{ 
         border-radius: var(--border-radius-lg); 
-        margin: -1.5rem -1.5rem 2rem -1.5rem; /* Extend to edges of container */ 
+        margin: -1.5rem -1.5rem 2rem -1.5rem;
     }}
     .app-header-fly h1 {{ font-size: 2em !important; }} 
     .app-header-fly p {{ font-size: 1em !important; }}
@@ -442,13 +431,13 @@ footer, .gradio-footer {{
         gap: 1.5rem; 
     }}
     .main-content-columns-fly > .gr-column:nth-child(1) {{ 
-        flex: 3; /* Input column wider */ 
+        flex: 3; 
     }}
     .main-content-columns-fly > .gr-column:nth-child(2) {{ 
-        flex: 2; /* Output column */ 
+        flex: 2; 
     }}
     
-    .fly-submit-button .gr-button {{ 
+    .fly-submit-button-container .gr-button {{ 
         width: auto !important; 
         min-width: 200px;
     }}
@@ -462,11 +451,13 @@ footer, .gradio-footer {{
 .result-area-fly {{ 
     margin-top: 1rem; 
 }}
-.result-area-fly > .gr-block > .gr-form > .gr-input,
-.result-area-fly > .gr-block > .gr-form > .gr-audio {{ /* Ensure output elements also have some margin */
+.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;
 }}
-""" # End of f-string for CSS
+"""
 
 default_english_tts_voice = 'انگلیسی (آمریکا) - جنی (زن)'
 if not language_dict_persian_keys :
@@ -475,7 +466,6 @@ 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
 
-# --- Gradio UI با ساختار بهبود یافته ---
 with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فلای | Fly Language Learning") as demo:
     gr.HTML(f"""<div class="app-header-fly"><h1>Fly Language Learning 🚀</h1><p>ترجمه فارسی به انگلیسی و تلفظ با لهجه دلخواه</p></div>""")
     
@@ -486,7 +476,7 @@ 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.Box(elem_classes=["content-wrapper"]): # Wrapper for card styling
+        with gr.Group(elem_classes=["content-wrapper"]): # CHANGED: gr.Box to gr.Group
             with gr.Row(elem_classes=["main-content-columns-fly"]): 
                 with gr.Column(scale=3): 
                     input_text_persian = gr.Textbox(
@@ -500,12 +490,14 @@ with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فل
                         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.Box(elem_classes=["fly-submit-button"]): 
-                         submit_button = gr.Button("ترجمه و پخش صدا", variant="primary", icon="▶️") # type: ignore
+                    # 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(
@@ -520,24 +512,23 @@ with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فل
                 num_voices = len(language_dict_persian_keys)
                 voice_keys = list(language_dict_persian_keys.keys())
                 
-                voice1_idx = 0
-                voice2_idx = min(7, num_voices - 1) if num_voices > 1 else 0
-                voice3_idx = min(13, num_voices - 1) if num_voices > 1 else 0
-
-                example_list_data = [
-                    ["قیمت این لباس چقدر است؟", voice_keys[voice1_idx], 0, 0, 0],
-                    ["می‌توانید آدرس را روی نقشه به من نشان دهید؟", voice_keys[voice2_idx], 5, 0, 0],
-                    ["ببخشید، متوجه نشدم. امکان دارد تکرار کنید؟", voice_keys[voice3_idx], -10, 10, 0],
-                    ["یک قهوه و یک کیک لطفا.", voice_keys[min(3, num_voices -1) if num_voices > 0 else 0], 0, 0, 0], 
-                ]
-                 # Filter out examples if voice keys are not valid (e.g. num_voices is 0)
                 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)
+
+                    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], 
+                    ]
                     valid_example_list = example_list_data
-                else: # No voices, no examples
+                else:
                     logging.warning("No voices available for examples.")
 
-
                 if valid_example_list:
                     gr.Examples(
                         examples=valid_example_list,
@@ -550,14 +541,16 @@ with gr.Blocks(theme=app_theme, css=custom_css, title="آموزش زبان فل
         
     gr.Markdown("<p class='app-footer-fly'>✨ Fly Language Learning © ۲۰۲۴ - قدرت گرفته از Gemini و EdgeTTS ✨</p>")
 
-    if 'submit_button' in locals(): # Check if button is defined (it should be)
+    # 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:
         submit_button.click(
             fn=translate_and_speak_sync_wrapper,
             inputs=[input_text_persian, language_dropdown_tts_english, rate_slider, volume_slider, pitch_slider],
             outputs=[output_text_translated, output_audio]
         )
     else:
-        logging.error("Submit button was not initialized correctly.")
+        logging.error("Submit button was not initialized correctly or is None.")
 
 
 if __name__ == "__main__":