import gradio as gr
from transformers import MarianMTModel, MarianTokenizer

# Charger le modèle et le tokenizer depuis Hugging Face
model_name = "MrFrijo/LiAPI"  # Nom du modèle sur Hugging Face

model = MarianMTModel.from_pretrained(model_name)
tokenizer = MarianTokenizer.from_pretrained(model_name)

def translate_text(text, src_lang, target_lang):
    # Préparer les entrées pour le modèle
    tokenized_text = tokenizer(text, return_tensors="pt")

    # Effectuer la traduction
    translated = model.generate(**tokenized_text)

    # Convertir et retourner le texte traduit
    translated_text = tokenizer.decode(translated[0], skip_special_tokens=True)
    return translated_text

# Créer l'interface Gradio
with gr.Blocks() as interface:
    # Titre et description avec du texte en italique et en gras en lingala
    gr.Markdown("""
    <div class="contenant">
        <h2 style=" width:100%;">Traduction automatique Lingala-Français</h2>
        <div style=" width:100%;">Ceci est la version d'essai et nous comptons sur vous pour améliorer les performances du modèle pour notre langue Lingala.</div>
        <div style=" width:100%;"><strong><em>Oyo e za version ya komeka pe to zo talela bino pôna ko kolisa makoki ya modeli pôna nkota nà biso Lingala.</em></strong></p>
    </div>
    """)

    # Créer une colonne sans l'argument `align` qui n'existe pas
    with gr.Column():
        text_input = gr.Textbox(label="Entrez le texte à traduire", placeholder="Entrez le texte à traduire ici...", lines=3)
        source_lang = gr.Dropdown(choices=["fr", "li"], label="Langue Source")
        target_lang = gr.Dropdown(choices=["li", "fr"], label="Langue Cible")
        translation_output = gr.Textbox(label="Traduction", placeholder="Le texte traduit s'affichera ici...")
        translate_button = gr.Button("Traduire")
       

    # Lier le bouton au processus de traduction
    translate_button.click(
        translate_text, 
        inputs=[text_input, source_lang, target_lang], 
        outputs=translation_output
    )

# Personnalisation CSS pour la boîte et les textes
interface.css = """
    /* Police personnalisée pour rendre l'interface plus attrayante */
    @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
    
    .gradio-container {
        font-family: 'Arial', sans-serif;
    }
      .contenant {
       text-align: center;
       font-family: Ghisha;
       width:100%;
       display: flex; 
       justify-content: center; 
       width:100%;
       flex-wrap: wrap;
    }
    .gradio-button {
        background-color: #4CAF50;
        color: white;
        border-radius: 5px;
        border: none;
    }
    .gradio-button:hover {
        background-color: #45a049;
    }
    .gr-markdown {
        font-family: 'Lobster', sans-serif;
        font-size: 24px;
        font-weight: bold;
    }
    .gradio-row {
        margin-top: 10px;
    }
    /* Centrer la colonne et ajouter un style à la zone de texte */
    .gr-column {
        width: 50%;
        margin: auto;
        padding: 20px;
        border: 2px solid #ddd;
        border-radius: 10px;
        background-color: #f9f9f9;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    /* Appliquer un style pour le texte d'entrée */
    .gr-textbox {
        font-size: 16px;
        padding: 10px;
    }
    /* Appliquer un style pour la sortie de traduction */
    .gr-textbox[placeholder='Le texte traduit s\'affichera ici...'] {
        font-size: 16px;
        font-weight: bold;
        color: #2E8B57; /* Couleur verte pour l'output */
    }
"""

# Lancer l'interface
interface.launch()