Update app.py

app.py

@@ -75,9 +75,16 @@ body {
     background: linear-gradient(to right, #1e3c72, #2a5298); /* Professional gradient */
     font-family: 'Roboto', sans-serif; /* Modern font for readability */
     color: #ffffff; /* White text for high contrast */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
 }
 h1, h2, h3, label {
     color: #ffffff; /* Ensure headings and labels are visible */
+    text-align: center;
 }
 button {
     background-color: #4caf50; /* Professional green */
@@ -103,6 +110,32 @@ input, textarea, select {
 input:focus, textarea:focus, select:focus {
     border-color: #4caf50; /* Highlight input fields on focus */
 }
+.chat-container {
+    background: rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    border-radius: 15px;
+    max-width: 600px;
+    width: 100%;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+}
+.message {
+    background: #2a5298;
+    padding: 12px 18px;
+    border-radius: 15px;
+    margin: 5px 0;
+    max-width: 80%;
+    word-wrap: break-word;
+    color: #fff;
+}
+.message.user {
+    background: #4caf50;
+    align-self: flex-end;
+}
+.message.bot {
+    background: #1e3c72;
+}
 """) as demo:
     with gr.Row():
         gr.Markdown(
@@ -114,30 +147,32 @@ input:focus, textarea:focus, select:focus {
 
     with gr.Tabs():
         with gr.Tab("Text Translation"):
-            text_input = gr.Textbox(label="Input Text", lines=6, placeholder="Enter your text here...")
-            language_dropdown = gr.Dropdown(
-                choices=available_languages, label="Select Destination Language"
-            )
-            translated_text_output = gr.Textbox(label="Translated Text", lines=4)
-            translate_button = gr.Button("Translate")
+            with gr.Column(scale=1):
+                text_input = gr.Textbox(label="Enter Text", lines=6, placeholder="Type something... in English")
+                language_dropdown = gr.Dropdown(
+                    choices=available_languages, label="Destination Language"
+                )
+                translated_text_output = gr.Textbox(label="Translated Text", lines=4, interactive=False)
+                translate_button = gr.Button("Translate")
 
-            translate_button.click(
-                translate_text, inputs=[text_input, language_dropdown], outputs=[translated_text_output]
-            )
+                translate_button.click(
+                    translate_text, inputs=[text_input, language_dropdown], outputs=[translated_text_output]
+                )
 
         with gr.Tab("Audio Translation"):
-            audio_input = gr.Audio(label="Upload Audio File", type="filepath")
-            audio_language_dropdown = gr.Dropdown(
-                choices=available_languages, label="Select Destination Language"
-            )
-            audio_translated_text_output = gr.Textbox(label="Transcribed and Translated Text", lines=4)
-            audio_translate_button = gr.Button("Transcribe and Translate")
+            with gr.Column(scale=1):
+                audio_input = gr.Audio(label="Upload Audio File", type="filepath")
+                audio_language_dropdown = gr.Dropdown(
+                    choices=available_languages, label="Destination Language"
+                )
+                audio_translated_text_output = gr.Textbox(label="Transcribed & Translated Text", lines=4, interactive=False)
+                audio_translate_button = gr.Button("Transcribe & Translate")
 
-            audio_translate_button.click(
-                transcribe_audio,
-                inputs=[audio_input, audio_language_dropdown],
-                outputs=[audio_translated_text_output],
-            )
+                audio_translate_button.click(
+                    transcribe_audio,
+                    inputs=[audio_input, audio_language_dropdown],
+                    outputs=[audio_translated_text_output],
+                )
 
 if __name__ == "__main__":
     demo.launch()