Create app.py

app.py

@@ -0,0 +1,375 @@
+import streamlit as st
+from transformers import MarianMTModel, MarianTokenizer
+import torch
+from deep_translator import GoogleTranslator
+import re
+
+# ================================
+# PAGE CONFIGURATION
+# ================================
+st.set_page_config(
+    page_title="Urdu to Pashto Translator",
+    page_icon="🌐",
+    layout="wide",
+    initial_sidebar_state="collapsed"
+)
+
+# ================================
+# CUSTOM CSS - GLASSMORPHISM THEME
+# ================================
+def load_css():
+    st.markdown("""
+    <style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Righteous&display=swap');
+    
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+    
+    /* Main Background */
+    .stApp {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%);
+        background-size: 400% 400%;
+        animation: gradientShift 15s ease infinite;
+        font-family: 'Poppins', sans-serif;
+    }
+    
+    @keyframes gradientShift {
+        0% { background-position: 0% 50%; }
+        50% { background-position: 100% 50%; }
+        100% { background-position: 0% 50%; }
+    }
+    
+    /* Hide Streamlit Branding */
+    #MainMenu {visibility: hidden;}
+    footer {visibility: hidden;}
+    header {visibility: hidden;}
+    
+    /* Glass Container */
+    .glass-container {
+        background: rgba(255, 255, 255, 0.15);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        border-radius: 25px;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+        padding: 40px;
+        margin: 20px auto;
+        max-width: 1200px;
+    }
+    
+    /* Title Styling */
+    .main-title {
+        font-family: 'Righteous', cursive;
+        font-size: 3.5rem;
+        text-align: center;
+        background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        margin-bottom: 10px;
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+        animation: titleGlow 3s ease-in-out infinite;
+    }
+    
+    @keyframes titleGlow {
+        0%, 100% { filter: drop-shadow(0 0 10px rgba(255,255,255,0.5)); }
+        50% { filter: drop-shadow(0 0 20px rgba(255,255,255,0.8)); }
+    }
+    
+    .subtitle {
+        text-align: center;
+        color: rgba(255, 255, 255, 0.9);
+        font-size: 1.2rem;
+        margin-bottom: 40px;
+        font-weight: 300;
+    }
+    
+    /* Text Areas */
+    .stTextArea textarea {
+        background: rgba(255, 255, 255, 0.2) !important;
+        backdrop-filter: blur(10px);
+        border: 2px solid rgba(255, 255, 255, 0.4) !important;
+        border-radius: 15px !important;
+        color: #ffffff !important;
+        font-size: 1.1rem !important;
+        padding: 15px !important;
+        font-family: 'Poppins', sans-serif !important;
+        transition: all 0.3s ease;
+    }
+    
+    .stTextArea textarea:focus {
+        border-color: rgba(255, 255, 255, 0.8) !important;
+        box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
+        transform: scale(1.02);
+    }
+    
+    .stTextArea textarea::placeholder {
+        color: rgba(255, 255, 255, 0.6) !important;
+    }
+    
+    /* Labels */
+    .stTextArea label {
+        color: #ffffff !important;
+        font-weight: 600 !important;
+        font-size: 1.1rem !important;
+        margin-bottom: 10px !important;
+    }
+    
+    /* 3D Button Styling */
+    .stButton button {
+        background: linear-gradient(145deg, #667eea, #764ba2);
+        color: white;
+        border: none;
+        border-radius: 15px;
+        padding: 15px 40px;
+        font-size: 1.2rem;
+        font-weight: 600;
+        font-family: 'Poppins', sans-serif;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4),
+                    inset 0 -3px 10px rgba(0, 0, 0, 0.2),
+                    inset 0 3px 10px rgba(255, 255, 255, 0.2);
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+    }
+    
+    .stButton button:before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: -100%;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+        transition: left 0.5s;
+    }
+    
+    .stButton button:hover:before {
+        left: 100%;
+    }
+    
+    .stButton button:hover {
+        transform: translateY(-3px) scale(1.05);
+        box-shadow: 0 15px 35px rgba(102, 126, 234, 0.6),
+                    inset 0 -3px 10px rgba(0, 0, 0, 0.2),
+                    inset 0 3px 10px rgba(255, 255, 255, 0.3);
+    }
+    
+    .stButton button:active {
+        transform: translateY(0px) scale(1);
+        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+    }
+    
+    /* Clear Button */
+    .clear-button button {
+        background: linear-gradient(145deg, #f093fb, #f5576c);
+        box-shadow: 0 10px 25px rgba(245, 87, 108, 0.4);
+    }
+    
+    .clear-button button:hover {
+        box-shadow: 0 15px 35px rgba(245, 87, 108, 0.6);
+    }
+    
+    /* Info Box */
+    .info-box {
+        background: rgba(255, 255, 255, 0.1);
+        backdrop-filter: blur(10px);
+        border-radius: 15px;
+        border: 1px solid rgba(255, 255, 255, 0.3);
+        padding: 20px;
+        margin: 20px 0;
+        color: white;
+    }
+    
+    .info-box h3 {
+        color: #ffffff;
+        font-weight: 600;
+        margin-bottom: 10px;
+    }
+    
+    .info-box p {
+        color: rgba(255, 255, 255, 0.8);
+        line-height: 1.6;
+    }
+    
+    /* Loading Animation */
+    .stSpinner > div {
+        border-top-color: #ffffff !important;
+    }
+    
+    /* Columns */
+    .element-container {
+        margin-bottom: 20px;
+    }
+    
+    /* Success Message */
+    .stSuccess {
+        background: rgba(72, 187, 120, 0.2);
+        backdrop-filter: blur(10px);
+        border-radius: 10px;
+        border: 1px solid rgba(72, 187, 120, 0.4);
+        color: white;
+    }
+    
+    /* Footer */
+    .footer {
+        text-align: center;
+        color: rgba(255, 255, 255, 0.7);
+        margin-top: 50px;
+        padding: 20px;
+        font-size: 0.9rem;
+    }
+    
+    /* Responsive Design */
+    @media (max-width: 768px) {
+        .main-title {
+            font-size: 2rem;
+        }
+        
+        .subtitle {
+            font-size: 1rem;
+        }
+        
+        .glass-container {
+            padding: 20px;
+        }
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+# ================================
+# TRANSLATION FUNCTIONS
+# ================================
+
+@st.cache_resource
+def load_translation_model():
+    """Load the translation model (cached for performance)"""
+    try:
+        # Using a multilingual model that supports Urdu and Pashto
+        model_name = "Helsinki-NLP/opus-mt-mul-en"
+        tokenizer = MarianTokenizer.from_pretrained(model_name)
+        model = MarianMTModel.from_pretrained(model_name)
+        return tokenizer, model
+    except Exception as e:
+        st.error(f"Error loading model: {e}")
+        return None, None
+
+def urdu_to_pashto_roman(urdu_text):
+    """
+    Translate Urdu to Pashto and romanize it
+    """
+    if not urdu_text.strip():
+        return ""
+    
+    try:
+        # Step 1: Translate Urdu to Pashto using Google Translator
+        translator_to_pashto = GoogleTranslator(source='ur', target='ps')
+        pashto_text = translator_to_pashto.translate(urdu_text)
+        
+        # Step 2: Transliterate Pashto to Roman script
+        # Using English as intermediate for romanization
+        translator_to_roman = GoogleTranslator(source='ps', target='en')
+        temp_english = translator_to_roman.translate(pashto_text)
+        
+        # Step 3: Create phonetic Roman Urdu representation
+        # This gives us a romanized version
+        romanized = create_roman_representation(pashto_text, temp_english)
+        
+        return romanized
+    
+    except Exception as e:
+        st.error(f"Translation error: {e}")
+        return "Translation failed. Please try again."
+
+def create_roman_representation(pashto_text, english_reference):
+    """
+    Create a Roman Urdu representation of Pashto text
+    """
+    # Pashto to Roman Urdu character mapping (phonetic)
+    pashto_to_roman = {
+        'ا': 'a', 'ب': 'b', 'پ': 'p', 'ت': 't', 'ټ': 't', 'ث': 's',
+        'ج': 'j', 'چ': 'ch', 'ح': 'h', 'خ': 'kh', 'د': 'd', 'ډ': 'd',
+        'ذ': 'z', 'ر': 'r', 'ړ': 'r', 'ز': 'z', 'ژ': 'zh', 'ږ': 'g',
+        'س': 's', 'ش': 'sh', 'ښ': 'kh', 'ص': 's', 'ض': 'z', 'ط': 't',
+        'ظ': 'z', 'ع': 'a', 'غ': 'gh', 'ف': 'f', 'ق': 'q', 'ک': 'k',
+        'ګ': 'g', 'ل': 'l', 'م': 'm', 'ن': 'n', 'ڼ': 'n', 'و': 'o',
+        'ه': 'h', 'ۀ': 'a', 'ي': 'i', 'ې': 'e', 'ی': 'i', 'ئ': 'y',
+        ' ': ' ', '،': ',', '؟': '?', '۔': '.'
+    }
+    
+    # Transliterate Pashto to Roman
+    roman_text = ''
+    for char in pashto_text:
+        roman_text += pashto_to_roman.get(char, char)
+    
+    # If transliteration is too rough, use English reference with Urdu touch
+    if len(roman_text.strip()) < 3:
+        return english_reference
+    
+    return roman_text
+
+# ================================
+# MAIN APPLICATION
+# ================================
+
+def main():
+    # Load custom CSS
+    load_css()
+    
+    # Header
+    st.markdown('<h1 class="main-title">🌐 Urdu to Pashto Translator</h1>', unsafe_allow_html=True)
+    st.markdown('<p class="subtitle">Convert Urdu sentences to Pashto in Roman script</p>', unsafe_allow_html=True)
+    
+    # Main container
+    st.markdown('<div class="glass-container">', unsafe_allow_html=True)
+    
+    # Create two columns for input and output
+    col1, col2 = st.columns(2)
+    
+    with col1:
+        st.markdown("### 📝 Input (Urdu)")
+        urdu_input = st.text_area(
+            "Enter Urdu text",
+            height=250,
+            placeholder="یہاں اردو متن درج کریں...",
+            label_visibility="collapsed",
+            key="urdu_input"
+        )
+    
+    with col2:
+        st.markdown("### 🔤 Output (Pashto in Roman)")
+        if 'translation_output' not in st.session_state:
+            st.session_state.translation_output = ""
+        
+        translation_output = st.text_area(
+            "Pashto translation in Roman script",
+            value=st.session_state.translation_output,
+            height=250,
+            placeholder="Translation will appear here...",
+            label_visibility="collapsed",
+            key="output_display",
+            disabled=True
+        )
+    
+    # Buttons
+    col_btn1, col_btn2, col_btn3 = st.columns([1, 1, 1])
+    
+    with col_btn2:
+        if st.button("🔄 Translate", use_container_width=True):
+            if urdu_input.strip():
+                with st.spinner("✨ Translating..."):
+                    result = urdu_to_pashto_roman(urdu_input)
+                    st.session_state.translation_output = result
+                    st.rerun()
+            else:
+                st.warning("⚠️ Please enter some Urdu text first!")
+    
+    with col_btn3:
+        st.markdown('<div class="clear-button">', unsafe_allow_html=True)
+        if st.button("🗑️ Clear", use_container_width=True):
+            st.session_state.translation_output = ""