import streamlit as st
from transformers import pipeline

# Load translation pipeline (placeholder - you can load your fine-tuned model here)
translator = pipeline("translation", model="Helsinki-NLP/opus-mt-en-hi")

# Set Streamlit page config
st.set_page_config(page_title="Translator", layout="wide")

# UI Design starts here
st.markdown("""
    <style>
    .big-font {
        font-size:25px !important;
        font-weight: bold;
    }
    .tab-style {
        display: flex;
        gap: 20px;
        font-size:18px;
    }
    .tab-style div {
        cursor: pointer;
    }
    .output-box {
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 10px;
        min-height: 300px;
        font-size: 22px;
    }
    .copy-button {
        margin-top: 10px;
    }
    </style>
""", unsafe_allow_html=True)

st.markdown('<div class="tab-style"><div>English - Detected</div><div>Hindi</div><div>English</div><div>Spanish</div><div>All (50)</div></div>', unsafe_allow_html=True)
st.markdown("---")

# Create two columns
col1, col2 = st.columns(2)

with col1:
    st.markdown('<div class="big-font">hi how are you</div>', unsafe_allow_html=True)
    user_input = st.text_area("", "hi how are you", height=250)
    translate_button = st.button("Translate", use_container_width=True)

with col2:
    if translate_button and user_input:
        # Translate text
        translated_text = translator(user_input, max_length=400)[0]['translation_text']
    else:
        translated_text = ""

    st.markdown('<div class="output-box">' + (translated_text if translated_text else "") + '</div>', unsafe_allow_html=True)

    if translated_text:
        st.button("Copy", use_container_width=True)
        st.button("Paraphrase", use_container_width=True)