Update app.py

app.py

@@ -1,4 +1,3 @@
-"""
 LocaleNLP Translation Service
 ============================
 
@@ -232,7 +231,7 @@ class ContentProcessor:
         return "\n".join(paragraph.text for paragraph in doc.paragraphs)
     
     @staticmethod
-    def _extract_html_text(content: bytes) -> str:
+    def _extract_html_text(content: bytes) -> str:
         """Extract text from HTML file."""
         encoding = chardet.detect(content)["encoding"] or "utf-8"
         text = content.decode(encoding, errors="ignore")
@@ -240,7 +239,7 @@ class ContentProcessor:
         return soup.get_text()
     
     @staticmethod
-    def _extract_markdown_text(content: bytes) -> str:
+    def _extract_markdown_text(content: bytes) -> str:
         """Extract text from Markdown file."""
         encoding = chardet.detect(content)["encoding"] or "utf-8"
         text = content.decode(encoding, errors="ignore")
@@ -249,15 +248,15 @@ class ContentProcessor:
         return soup.get_text()
     
     @staticmethod
-    def _extract_srt_text(content: bytes) -> str:
+    def _extract_srt_text(content: bytes) -> str:
         """Extract text from SRT subtitle file."""
         encoding = chardet.detect(content)["encoding"] or "utf-8"
         text = content.decode(encoding, errors="ignore")
         # Remove timestamp lines
-        return re.sub(r"\d+\n\d{2}:\d{2}:\d{2},\d{3} --> .*?\n", "", text)
+        return re.sub(r"\d+\n\d{2}:\d{2}:\d{2},\d{3} --> .*?\n", "", text)
     
     @staticmethod
-    def _extract_plain_text(content: bytes) -> str:
+    def _extract_plain_text(content: bytes) -> str:
         """Extract text from plain text file."""
         encoding = chardet.detect(content)["encoding"] or "utf-8"
         return content.decode(encoding, errors="ignore")
@@ -471,7 +470,48 @@ class TranslationApp:
         
         with gr.Blocks(
             title="LocaleNLP Translation Service",
-            theme=gr.themes.Monochrome()
+            css="""
+            .input-section {
+                background: linear-gradient(135deg, #e0f7fa 0%, #bbdefb 100%);
+                padding: 20px;
+                border-radius: 10px;
+                border: 1px solid #90caf9;
+                margin-bottom: 20px;
+            }
+            .output-section {
+                background: linear-gradient(135deg, #f3e5f5 0%, #e8eaf6 100%);
+                padding: 20px;
+                border-radius: 10px;
+                border: 1px solid #7986cb;
+                margin-bottom: 20px;
+            }
+            .button-primary {
+                background: linear-gradient(135deg, #42a5f5 0%, #1e88e5 100%) !important;
+                color: white !important;
+                border: none !important;
+                border-radius: 8px !important;
+                padding: 12px 24px !important;
+                font-weight: bold !important;
+            }
+            .button-primary:hover {
+                background: linear-gradient(135deg, #1e88e5 0%, #1565c0 100%) !important;
+            }
+            .radio-group {
+                background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+                padding: 15px;
+                border-radius: 10px;
+                border: 1px solid #90caf9;
+            }
+            .dropdown-group {
+                background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
+                padding: 15px;
+                border-radius: 10px;
+                border: 1px solid #90caf9;
+            }
+            .control-row {
+                margin-bottom: 20px;
+            }
+            """
         ) as interface:
             # Header
             gr.Markdown("""
@@ -480,70 +520,77 @@ class TranslationApp:
             """)
             
             # Input controls
-            with gr.Row():
-                input_mode = gr.Radio(
-                    choices=[mode.value for mode in InputMode],
-                    label="Input Type",
-                    value=InputMode.TEXT.value
-                )
+            with gr.Row(elem_classes="control-row"):
+                with gr.Column(elem_classes="radio-group"):
+                    input_mode = gr.Radio(
+                        choices=[mode.value for mode in InputMode],
+                        label="Input Type",
+                        value=InputMode.TEXT.value
+                    )
                 
-                input_lang = gr.Dropdown(
-                    choices=[lang.value for lang in Language],
-                    label="Input Language",
-                    value=Language.ENGLISH.value
-                )
+                with gr.Column(elem_classes="dropdown-group"):
+                    input_lang = gr.Dropdown(
+                        choices=[lang.value for lang in Language],
+                        label="Input Language",
+                        value=Language.ENGLISH.value
+                    )
                 
-                output_lang = gr.Dropdown(
-                    choices=[lang.value for lang in Language],
-                    label="Output Language",
-                    value=Language.WOLOF.value
-                )
+                with gr.Column(elem_classes="dropdown-group"):
+                    output_lang = gr.Dropdown(
+                        choices=[lang.value for lang in Language],
+                        label="Output Language",
+                        value=Language.WOLOF.value
+                    )
             
             # Input components
-            input_text = gr.Textbox(
-                label="Enter Text",
-                lines=8,
-                visible=True,
-                placeholder="Type or paste your text here..."
-            )
+            with gr.Group(elem_classes="input-section"):
+                input_text = gr.Textbox(
+                    label="Enter Text",
+                    lines=8,
+                    visible=True,
+                    placeholder="Type or paste your text here..."
+                )
             
-            audio_input = gr.Audio(
-                label="Upload Audio",
-                type="filepath",
-                visible=False
-            )
+            with gr.Group(elem_classes="input-section", visible=False) as audio_group:
+                audio_input = gr.Audio(
+                    label="Upload Audio",
+                    type="filepath"
+                )
             
-            file_input = gr.File(
-                file_types=SUPPORTED_FILE_TYPES,
-                label="Upload Document",
-                visible=False
-            )
+            with gr.Group(elem_classes="input-section", visible=False) as file_group:
+                file_input = gr.File(
+                    file_types=SUPPORTED_FILE_TYPES,
+                    label="Upload Document"
+                )
             
             # Processing area
-            extracted_text = gr.Textbox(
-                label="Extracted / Transcribed Text",
-                lines=8,
-                interactive=False
-            )
+            with gr.Group(elem_classes="output-section"):
+                extracted_text = gr.Textbox(
+                    label="Extracted / Transcribed Text",
+                    lines=8,
+                    interactive=False
+                )
             
             translate_btn = gr.Button(
                 "🔄 Process & Translate",
-                variant="secondary"
+                variant="primary",
+                elem_classes="button-primary"
             )
             
-            output_text = gr.Textbox(
-                label="Translated Text",
-                lines=10,
-                interactive=False
-            )
+            with gr.Group(elem_classes="output-section"):
+                output_text = gr.Textbox(
+                    label="Translated Text",
+                    lines=10,
+                    interactive=False
+                )
             
             # Event handlers
             def update_visibility(mode: str) -> Dict[str, Any]:
                 """Update component visibility based on input mode."""
                 return {
                     input_text: gr.update(visible=(mode == InputMode.TEXT.value)),
-                    audio_input: gr.update(visible=(mode == InputMode.AUDIO.value)),
-                    file_input: gr.update(visible=(mode == InputMode.FILE.value)),
+                    audio_group: gr.update(visible=(mode == InputMode.AUDIO.value)),
+                    file_group: gr.update(visible=(mode == InputMode.FILE.value)),
                     extracted_text: gr.update(value="", visible=True),
                     output_text: gr.update(value="")
                 }
@@ -591,7 +638,7 @@ class TranslationApp:
             input_mode.change(
                 fn=update_visibility,
                 inputs=input_mode,
-                outputs=[input_text, audio_input, file_input, extracted_text, output_text]
+                outputs=[input_text, audio_group, file_group, extracted_text, output_text]
             )
             
             translate_btn.click(