enhance UI

app.py

@@ -161,27 +161,38 @@ def run_speech_translation(audio, source_lang, target_lang, youtube_url):
     
     return transcription, translated_text, audio_url, embedded_video
 
-with gr.Blocks() as demo:
+custom_css = """
+    .container { max-width: 800px; margin: auto; padding: 20px; }
+    h1 { color: #2c3e50; text-align: center; margin-bottom: 30px; }
+    .gr-form { background-color: #f7f9fc; border-radius: 10px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }
+    .gr-button { background-color: #3498db; color: white; }
+    .gr-button:hover { background-color: #2980b9; }
+    .output-row { margin-top: 30px; }
+    .video-container { display: flex; justify-content: center; margin-top: 20px; }
+"""
+
+with gr.Blocks(css=custom_css) as demo:
     gr.Markdown("# Speech Translation")
-    
-    # with gr.Tab("User Mode"):
     gr.Markdown("Speak into the microphone, upload an audio file, or provide a YouTube URL. The app will translate and speak it back to you.")
     
     with gr.Row():
-        user_audio_input = gr.Audio(sources=["microphone", "upload"], type="filepath")
-        user_youtube_url = gr.Textbox(label="YouTube URL (optional)")
-        user_source_lang = gr.Dropdown(choices=["en", "ma", "ta", "zh"], label="Source Language", value="en")
-        user_target_lang = gr.Dropdown(choices=["en", "ma", "ta", "zh"], label="Target Language", value="zh")
-    
-    with gr.Row():
-        user_button = gr.Button("Translate and Speak", interactive=False)
+        with gr.Column(scale=2):
+            user_audio_input = gr.Audio(sources=["microphone", "upload"], type="filepath", label="Audio Input")
+            user_youtube_url = gr.Textbox(label="YouTube URL (optional)")
+        
+        with gr.Column(scale=1):
+            user_source_lang = gr.Dropdown(choices=["en", "ma", "ta", "zh"], label="Source Language", value="en")
+            user_target_lang = gr.Dropdown(choices=["en", "ma", "ta", "zh"], label="Target Language", value="zh")
+            user_button = gr.Button("Translate and Speak", interactive=False)
     
-    with gr.Row():
-        user_transcription_output = gr.Textbox(label="Transcription")
-        user_translation_output = gr.Textbox(label="Translation")
+    with gr.Row(class_name="output-row"):
+        with gr.Column():
+            user_transcription_output = gr.Textbox(label="Transcription")
+            user_translation_output = gr.Textbox(label="Translation")
         user_audio_output = gr.Audio(label="Translated Speech")
     
-    user_video_output = gr.HTML(label="YouTube Video")
+    with gr.Row(class_name="video-container"):
+        user_video_output = gr.HTML(label="YouTube Video")
 
     def update_button_state(audio, youtube_url):
         print(audio, youtube_url)
@@ -208,7 +219,16 @@ with gr.Blocks() as demo:
         if youtube_url:
             try:
                 video_id = fetch_youtube_id(youtube_url)
-                return f'<iframe width="560" height="315" src="https://www.youtube.com/embed/{video_id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
+                return f'''
+                    <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">
+                        <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
+                                src="https://www.youtube.com/embed/{video_id}" 
+                                frameborder="0" 
+                                allow="autoplay; encrypted-media" 
+                                allowfullscreen>
+                        </iframe>
+                    </div>
+                '''
             except Exception as e:
                 print(f"Error embedding video: {e}")
         return ""