Update app.py

app.py

@@ -93,161 +93,91 @@ def process_translation(text, audio_input, direction, is_hinglish):
     
     return original_text, translated_text, audio_output
 
-# --- CUSTOM CSS ---
+# --- CUSTOM CSS  ---
 
 custom_css = """
-/* Import a nice font (Poppins) */
+<style>
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
-
-/* Apply font to everything */
-body, button, input, select, textarea, .gradio-container {
-    font-family: 'Poppins', sans-serif !important;
-}
-
-/* Header Styling */
-.header-title {
-    text-align: center;
-    color: #2c3e50;
-    margin-bottom: 0.5rem;
-    font-size: 2.2em;
-    font-weight: 600;
-}
-.header-subtitle {
-    text-align: center;
-    color: #7f8c8d;
-    margin-bottom: 2rem;
-    font-weight: 300;
-    font-size: 1.1em;
-}
-
-/* Card Container Styling */
-.input-container, .output-container {
-    background: #ffffff;
-    border: 1px solid #e0e0e0;
-    border-radius: 12px;
-    padding: 25px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
-    margin-bottom: 20px;
-}
-
-/* Button Styling */
-#translate-btn {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border: none;
-    color: white;
-    font-weight: 600;
-    font-size: 1.1em;
-    padding: 10px 20px;
-    border-radius: 8px;
-    transition: transform 0.1s;
-}
-#translate-btn:hover {
-    transform: scale(1.02);
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
-}
-
-/* Feedback Section */
-.feedback-box {
-    background-color: #f8f9fa;
-    border-radius: 8px;
-    padding: 20px;
-    border-left: 5px solid #ffc107;
-}
+body, button, input, select, textarea, .gradio-container { font-family: 'Poppins', sans-serif !important; }
+.header-div { text-align: center; margin-bottom: 20px; }
+.header-title { font-size: 2.5em; font-weight: 600; color: #2c3e50; margin: 0; }
+.header-subtitle { font-size: 1.2em; color: #7f8c8d; font-weight: 300; margin-top: 5px; }
+.input-box, .output-box { border: 1px solid #e0e0e0; border-radius: 12px; padding: 20px; background: white; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
+.primary-btn { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important; color: white !important; font-weight: bold; border-radius: 8px; }
+.feedback-area { background-color: #f9f9f9; border-left: 5px solid #f1c40f; padding: 15px; border-radius: 5px; }
+</style>
 """
 
 # --- THE UI ---
-with gr.Blocks(css=custom_css, title="Kurukh AI Translator") as demo:
+
+with gr.Blocks(title="Kurukh AI Translator") as demo:
     
-    # HEADER SECTION
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("# 🇮🇳 AI Kurukh (Oraon) Translator", elem_classes=["header-title"])
-            gr.Markdown("### Bridging Communities with Artificial Intelligence | Voice & Hinglish Supported", elem_classes=["header-subtitle"])
+    # INJECT CSS MANUALLY 
+    gr.HTML(custom_css)
+
+    # HEADER (Using HTML for better styling control)
+    gr.HTML("""
+    <div class="header-div">
+        <h1 class="header-title">🇮🇳 AI Kurukh (Oraon) Translator</h1>
+        <p class="header-subtitle">Bridging Communities with Artificial Intelligence | Voice & Hinglish Supported</p>
+    </div>
+    """)
 
-    # TABS FOR NAVIGATION
     with gr.Tabs():
         
-        # --- TAB 1: TRANSLATOR INTERFACE ---
+        # --- TAB 1: TRANSLATOR ---
         with gr.TabItem("🗣️ Translator"):
             
-            # Help / Instructions (Collapsible)
             with gr.Accordion("ℹ️ How to use (Click to expand)", open=False):
                 gr.Markdown("""
-                1. **Select Mode:** Choose translation direction (Kurukh -> Hindi OR Hindi -> Kurukh).
-                2. **Hinglish Support:** Check the box if you are typing Hindi words using English letters (e.g., 'Tumhara naam kya hai').
-                3. **Input Methods:** Type text in the box OR click the microphone to speak (Hindi audio supported).
-                4. **Results:** View the translation and listen to the audio output (for Hindi results).
+                1. **Select Mode:** Kurukh -> Hindi OR Hindi -> Kurukh.
+                2. **Hinglish:** Check the box if you type Hindi in English (e.g., 'Tumhara').
+                3. **Voice:** Click the microphone to speak (Hindi only).
                 """)
 
-            # Main Grid Layout
             with gr.Row():
-                # LEFT COLUMN (INPUT CARD)
-                with gr.Column(elem_classes=["input-container"]):
+                # LEFT COLUMN
+                with gr.Column():
                     gr.Markdown("### 📥 Input Source")
                     
                     with gr.Row():
-                        direction = gr.Radio(
-                            ["Kurukh -> Hindi", "Hindi -> Kurukh"], 
-                            label="Translation Mode", 
-                            value="Kurukh -> Hindi"
-                        )
+                        direction = gr.Radio(["Kurukh -> Hindi", "Hindi -> Kurukh"], label="Translation Mode", value="Kurukh -> Hindi")
                     
                     is_hinglish = gr.Checkbox(label="🔤 Hinglish Typing (e.g. 'Tumhara')", value=False)
                     
-                    input_text = gr.Textbox(
-                        label="Enter Text", 
-                        placeholder="Type sentences here...", 
-                        lines=4,
-                        show_label=False
-                    )
+                    input_text = gr.Textbox(label="Enter Text", placeholder="Type sentences here...", lines=4)
+                    input_audio = gr.Audio(sources=["microphone"], type="filepath", label="🎙️ Voice Input (Hindi Only)")
                     
-                    input_audio = gr.Audio(
-                        sources=["microphone"], 
-                        type="filepath", 
-                        label="🎙️ Voice Input (Hindi Only)"
-                    )
-                    
-                    translate_btn = gr.Button("Translate 🚀", variant="primary", elem_id="translate-btn")
+                   
+                    translate_btn = gr.Button("Translate 🚀", variant="primary")
 
-                # RIGHT COLUMN (OUTPUT CARD)
-                with gr.Column(elem_classes=["output-container"]):
+                # RIGHT COLUMN
+                with gr.Column():
                     gr.Markdown("### 📤 Translation Result")
-                    
-                    output_text = gr.Textbox(
-                        label="Translation", 
-                        lines=4, 
-                        show_label=False,
-                        interactive=False,
-                        show_copy_button=True
-                    )
-                    
-                    output_audio = gr.Audio(
-                        label="🔊 Listen (Hindi Only)", 
-                        interactive=False,
-                        autoplay=False
-                    )
+                    output_text = gr.Textbox(label="Translation", lines=4, interactive=False, show_copy_button=True)
+                    output_audio = gr.Audio(label="🔊 Listen (Hindi Only)", interactive=False, autoplay=False)
 
-            # Connect Logic
             translate_btn.click(
                 fn=process_translation, 
                 inputs=[input_text, input_audio, direction, is_hinglish], 
                 outputs=[input_text, output_text, output_audio]
             )
 
-        # --- TAB 2: FEEDBACK INTERFACE ---
+        # --- TAB 2: FEEDBACK ---
         with gr.TabItem("📝 Improve the AI"):
-            with gr.Column(elem_classes=["feedback-box"]):
-                gr.Markdown("### 🛠️ Help us improve accuracy")
-                gr.Markdown("Our AI is still learning! If you spot a mistake, please submit the correct translation below. This helps us train better versions.")
-                
+            gr.Markdown("### 🛠️ Help us improve accuracy")
+            gr.Markdown("Our AI is learning! If you spot a mistake, please submit the correct translation below.")
+            
+            
+            with gr.Group():
                 with gr.Row():
                     fb_direction = gr.Radio(["Kurukh -> Hindi", "Hindi -> Kurukh"], label="Direction", value="Kurukh -> Hindi")
                 
                 with gr.Row():
-                    fb_original = gr.Textbox(label="Original Text", placeholder="The sentence you tried to translate")
-                    fb_ai_output = gr.Textbox(label="AI's Wrong Translation (Optional)")
+                    fb_original = gr.Textbox(label="Original Text")
+                    fb_ai_output = gr.Textbox(label="AI's Wrong Translation")
                 
-                fb_user_correct = gr.Textbox(label="✅ Your Correct Translation", lines=2, placeholder="Type the correct Kurukh/Hindi translation here")
+                fb_user_correct = gr.Textbox(label="✅ Your Correct Translation", lines=2, placeholder="Type the correct translation here")
                 
                 submit_btn = gr.Button("Submit Correction to Database", variant="secondary")
                 status_lbl = gr.Label(label="Status")
@@ -258,8 +188,7 @@ with gr.Blocks(css=custom_css, title="Kurukh AI Translator") as demo:
                     outputs=status_lbl
                 )
     
-    # FOOTER
     gr.Markdown("---")
-    gr.Markdown("<center>Built with ❤️ for the Kurukh Community • Powered by Google mT5 & OpenAI Whisper</center>")
+    gr.HTML("<center style='color: #888;'>Built with ❤️ for the Kurukh Community • Powered by Google mT5 & OpenAI Whisper</center>")
 
 demo.launch()