app.py

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("""
    <meta name="google-site-verification" content="V5N6E-KOxVg6Krzh1FygjzD-InlZAhihLYsAr2Wt6hc" />
    <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>Si vous voulez contribuer ou nous soutenir pour ce projet veuillez nous envoyer un message en cliquant sur le lien ci-bas</em></strong></p>
    </div>
    
    <div style=" width:100%;"><a href="mailto:mrfrijo75@gmail.com">Contactez-nous</a></p>
    
    """)

    # Créer une colonne
    with gr.Column():
        text_input = gr.Textbox(label="Entrez le texte à traduire", placeholder="Entrez le texte à traduire ici...", lines=3)
        
        # Utilisation d'un Row pour mettre les deux Dropdown sur la même ligne
        with gr.Row():
            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;
    }
    
    /* Bouton avec couleur orangée */
    .gradio-button {
        background-color: #FFA500;
        color: white;
        border-radius: 5px;
        border: none;
    }
    .gradio-button:hover {
        background-color: #FF7F00;
    }

    .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()