revert the deisgn

app.py

@@ -159,40 +159,31 @@ def check_password(password):
 def run_speech_translation(audio, source_lang, target_lang, youtube_url):
     transcription, translated_text, audio_url = transcribe_and_speak(audio, source_lang, target_lang, youtube_url)
     
+    # Generate embedded video HTML if YouTube URL is prov
+    
     return transcription, translated_text, audio_url, embedded_video
 
-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:
+with gr.Blocks() 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():
-        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)
+        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(class_name="output-row"):
-        with gr.Column():
-            user_transcription_output = gr.Textbox(label="Transcription")
-            user_translation_output = gr.Textbox(label="Translation")
+    with gr.Row():
+        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")
         user_audio_output = gr.Audio(label="Translated Speech")
     
-    with gr.Row(class_name="video-container"):
-        user_video_output = gr.HTML(label="YouTube Video")
+    user_video_output = gr.HTML(label="YouTube Video")
 
     def update_button_state(audio, youtube_url):
         print(audio, youtube_url)
@@ -219,16 +210,7 @@ with gr.Blocks(css=custom_css) as demo:
         if youtube_url:
             try:
                 video_id = fetch_youtube_id(youtube_url)
-                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>
-                '''
+                return f'<iframe width="560" height="315" src="https://www.youtube.com/embed/{video_id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>'
             except Exception as e:
                 print(f"Error embedding video: {e}")
         return ""