from transformers import pipeline
import gradio as gr

Translate = pipeline("translation_en_to_fr", model="shashankheg/my_opus_books_model")



def QA(English_input):
    result=Translate(English_input)
    for i in result :
      op=i['translation_text']         
    return op

js = """
function createGradioAnimation() {
    var container = document.createElement('div');
    container.id = 'gradio-animation';
    container.style.fontSize = '2em';
    container.style.fontWeight = 'bold';
    container.style.textAlign = 'center';
    container.style.marginBottom = '20px';
    container.style.color='#d3dfe2';
    container.style.padding = '10px';
    container.style.borderRadius = '5px';
    var text = 'Translation using Google T5'; 
    for (var i = 0; i < text.length; i++) {
        (function(i){
            setTimeout(function(){
                var letter = document.createElement('span');
                letter.style.opacity = '0';
                letter.style.transition = 'opacity 0.5s';
                letter.innerText = text[i];

                container.appendChild(letter);

                setTimeout(function() {
                    letter.style.opacity = '3';
                }, 50);
            }, i * 250);
        })(i);
    }

    var gradioContainer = document.querySelector('.gradio-container');
    gradioContainer.insertBefore(container, gradioContainer.firstChild);

    return 'Animation created';
}
"""
custom_css = """
body {
    background-color: #d2d9db; /* Light blue background */
}
"""

with gr.Blocks(js=js,css=".gradio-container {background-color: #d2d9db}") as demo:
    gr.HTML("<center><h1>🌍 Language Translator from English to French</h1></center>")
    inp = gr.Textbox(label="English Text",placeholder="English Text here:")
    out = gr.Textbox(label='French Translation')
    theme=gr.themes.Soft()
    inp.change(QA, inp, out)

demo.launch()