Update app.py

app.py

@@ -70,100 +70,7 @@ def transcribe_audio(audio_file, destination_language):
         return f"Error during transcription: {str(e)}"
 
 # Gradio interface
-with gr.Blocks(css="""
-body {
-    background: #f2f2f2; /* Light background for visibility */
-    font-family: 'Arial', sans-serif; /* Easy-to-read font */
-    color: #333333; /* Dark text color for good contrast */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-}
-h1, h2, h3, label {
-    color: #4A90E2; /* Primary blue for headers */
-    text-align: center;
-    font-size: 26px; /* Increased font size */
-    font-weight: bold; /* Bold text */
-}
-button {
-    background-color: #1E3C72; /* Professional dark blue */
-    color: white;
-    border: none;
-    border-radius: 8px;
-    padding: 14px 24px; /* Larger buttons */
-    font-size: 20px; /* Increased font size */
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-button:hover {
-    background-color: #1C2A48; /* Darker blue on hover */
-}
-input, textarea, select {
-    background-color: #ffffff;
-    color: #333333;
-    border: 2px solid #4A90E2; /* Border color */
-    border-radius: 8px;
-    padding: 14px; /* Larger padding */
-    width: 100%;
-    font-size: 18px; /* Increased font size */
-    margin-bottom: 20px; /* Space between input elements */
-}
-input:focus, textarea:focus, select:focus {
-    border-color: #FF5722; /* Highlight on focus */
-}
-.chat-container {
-    background: rgba(0, 0, 0, 0.6);
-    padding: 30px;
-    border-radius: 15px;
-    max-width: 600px;
-    width: 100%;
-    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
-    display: flex;
-    flex-direction: column;
-}
-.message {
-    background: #2A3E72;
-    padding: 16px 20px;
-    border-radius: 15px;
-    margin: 10px 0;
-    max-width: 80%;
-    word-wrap: break-word;
-    color: #ffffff;
-}
-.message.user {
-    background: #3A4F88;
-    align-self: flex-end;
-}
-.message.bot {
-    background: #1E3C72;
-}
-#audio-file-container {
-    background-color: transparent; /* No background color for the audio container */
-    padding: 0;
-    border: none; /* No border */
-}
-#upload-audio-label {
-    font-weight: normal; /* Remove bold text for the label */
-    color: #333333; /* Keep the text color neutral */
-}
-#upload-audio-file {
-    font-size: 14px; /* Smaller size for the upload button */
-    padding: 8px 16px; /* Reduced padding for a smaller button */
-}
-.tabs .tab-title {
-    color: #333333;
-    font-weight: bold;
-}
-.tab-content {
-    background-color: #ffffff; /* White background for the audio translation tab */
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-}
-""") as demo:
+with gr.Blocks() as demo:
     with gr.Row():
         gr.Markdown(
             """
@@ -186,19 +93,18 @@ input:focus, textarea:focus, select:focus {
             )
 
         with gr.Tab("Audio Translation"):
-            with gr.Column(elem_id="audio-file-container"):  # Added container with no background color
-                audio_input = gr.Audio(label="Upload Audio File", type="filepath", elem_id="upload-audio-file")
-                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")
+            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")
 
-                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()