app.py

import os
import gradio as gr
from groq import Groq
import re

# Initialize Groq client (API key from HF Secrets)
client = Groq(api_key=os.environ.get("GROQ_API_KEY"))

def translate_to_urdu(text):
    """
    Translate English text to Urdu using Groq's Qwen 3 32B model.
    Returns Urdu, Roman Urdu transliteration, and pronunciation guide.
    """
    if not text.strip():
        return "براہ کرم متن درج کریں", "Please enter some text", ""
    
    # System prompt optimized for translation with cultural context
    system_prompt = """You are an expert English to Urdu translator specializing in Pakistani and Indian cultural context.
    
    Rules:
    1. Translate the English text to natural, conversational Urdu (Nastaliq script)
    2. Provide Roman Urdu transliteration (English alphabets representing Urdu pronunciation)
    3. Add a brief pronunciation guide for difficult words
    4. Maintain cultural nuances and idioms appropriately
    
    Format your response EXACTLY as:
    URDU: [Urdu translation in nastaliq script]
    ROMAN: [Roman Urdu transliteration]
    PRONUNCIATION: [Key pronunciation tips]"""
    
    try:
        completion = client.chat.completions.create(
            model="qwen/qwen3-32b",  # REPLACED: mistral-saba-24b → qwen/qwen3-32b (Recommended by Groq)
            messages=[
                {"role": "system", "content": system_prompt},
                {"role": "user", "content": f"Translate: {text}"}
            ],
            temperature=0.3,
            max_tokens=1024
        )
        
        response = completion.choices[0].message.content
        
        # Parse the structured response
        urdu_match = re.search(r'URDU:\s*(.+?)(?=ROMAN:|PRONUNCIATION:|$)', response, re.DOTALL)
        roman_match = re.search(r'ROMAN:\s*(.+?)(?=URDU:|PRONUNCIATION:|$)', response, re.DOTALL)
        pron_match = re.search(r'PRONUNCIATION:\s*(.+?)(?=URDU:|ROMAN:|$)', response, re.DOTALL)
        
        urdu = urdu_match.group(1).strip() if urdu_match else "ترجمہ دستیاب نہیں"
        roman = roman_match.group(1).strip() if roman_match else "Transliteration not available"
        pronunciation = pron_match.group(1).strip() if pron_match else ""
        
        return urdu, roman, pronunciation
        
    except Exception as e:
        return f"Error: {str(e)}", "Translation service unavailable", ""

# Custom CSS for beautiful UI with animations
custom_css = """
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;700&family=Inter:wght@300;400;600&display=swap');

.urdu-text {
    font-family: 'Noto Nastaliq Urdu', serif;
    font-size: 1.5rem;
    line-height: 2.5;
    direction: rtl;
    text-align: right;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: fadeIn 0.8s ease-in;
}

.roman-text {
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: #4a5568;
    font-style: italic;
    margin-top: 0.5rem;
    animation: slideUp 0.6s ease-out;
}

.pronunciation-box {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-left: 4px solid #667eea;
    padding: 1rem;
    border-radius: 0 8px 8px 0;
    margin-top: 1rem;
    animation: slideUp 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.translate-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    color: white !important;
    font-weight: 600 !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.translate-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3) !important;
}

.input-box {
    border: 2px solid #e2e8f0 !important;
    border-radius: 12px !important;
    transition: border-color 0.3s !important;
}

.input-box:focus {
    border-color: #667eea !important;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}

.header-text {
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.subheader-text {
    text-align: center;
    color: #718096;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}
"""

# Create Gradio interface
with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo:
    gr.HTML("""
        <div class="header-text">اردو ترجمہ</div>
        <div class="subheader-text">English to Urdu Translator • Powered by Groq</div>
    """)
    
    with gr.Row():
        with gr.Column(scale=1):
            input_text = gr.Textbox(
                label="English Text",
                placeholder="Enter text to translate...",
                lines=4,
                elem_classes="input-box"
            )
            
            translate_btn = gr.Button(
                "Translate to Urdu", 
                elem_classes="translate-btn",
                size="lg"
            )
            
            gr.Examples(
                examples=[
                    "Hello, how are you today?",
                    "The weather is beautiful outside.",
                    "Thank you for your help.",
                    "Where is the nearest train station?",
                    "I love Pakistani food, especially biryani."
                ],
                inputs=input_text,
                label="Try these examples"
            )
        
        with gr.Column(scale=1):
            with gr.Group():
                urdu_output = gr.HTML(label="Urdu Translation")
                roman_output = gr.HTML(label="Roman Urdu")
                pron_output = gr.HTML(label="Pronunciation Guide")
    
    # State to store raw values for TTS (if needed later)
    state_urdu = gr.State()
    state_roman = gr.State()
    
    def update_outputs(text):
        urdu, roman, pron = translate_to_urdu(text)
        
        # Format HTML outputs with styling
        urdu_html = f'<div class="urdu-text">{urdu}</div>' if urdu else ""
        roman_html = f'<div class="roman-text">{roman}</div>' if roman else ""
        pron_html = f'<div class="pronunciation-box"><strong>💡 Pronunciation:</strong><br/>{pron}</div>' if pron else ""
        
        return urdu_html, roman_html, pron_html, urdu, roman
    
    translate_btn.click(
        fn=update_outputs,
        inputs=input_text,
        outputs=[urdu_output, roman_output, pron_output, state_urdu, state_roman]
    )
    
    # Add keyboard shortcut (Ctrl+Enter)
    input_text.submit(
        fn=update_outputs,
        inputs=input_text,
        outputs=[urdu_output, roman_output, pron_output, state_urdu, state_roman]
    )
    
    gr.Markdown("""
        <div style="text-align: center; margin-top: 2rem; color: #718096; font-size: 0.9rem;">
            Powered by <strong>Groq</strong> (Qwen 3 32B) • Built with Gradio
        </div>
    """)

# Launch configuration for Hugging Face Spaces
if __name__ == "__main__":
    demo.launch()