from translator import Translator
import gradio as gr
import os

# Load the API key from an environment variable or a file
fanar_api_key = os.getenv("FANAR_API_KEY")
translator_en_to_ar = Translator(api_key=fanar_api_key, langpair="en-ar", model="Fanar-Shaheen-MT-1")
translator_ar_to_en = Translator(api_key=fanar_api_key, langpair="ar-en", model="Fanar-Shaheen-MT-1")

def translate_text(text, direction): 
    if direction == "English to Arabic":
        return translator_en_to_ar.translate(text)
    else:
        return translator_ar_to_en.translate(text)


def update_output_alignment(direction): 
    if direction == "English to Arabic": 
        return gr.Textbox(label="Output Text", placeholder="النص المترجم سيظهر هنا...", lines=4, interactive=False, text_align="right")
    else:
        return gr.Textbox(label="Output Text", placeholder="The translated text will appear here...", lines=4, interactive=False, text_align="left")
with gr.Blocks() as demo:
    gr.Markdown("# 🌍 Fanar Translation Demo")
    gr.Markdown("## Select the translation direction, enter your text, and get the translation !") 
    
    direction_dropdown = gr.Dropdown(
        choices = ["English to Arabic", "Arabic to English"], 
        label = "Translation Direction",
        value = "English to Arabic",
        interactive=True,
    )
    
    # I want to change the directionality of the output text depending on the direction selected
    
    input_box = gr.Textbox(label="Input Text", placeholder="Enter text to translate here...", lines=4)
    
    output_box = gr.Textbox(label="Output Text", placeholder="النص المترجم سيظهر هنا...", lines=4, interactive=False, text_align="right")

    translate_button = gr.Button("Translate")
    
    
    direction_dropdown.change(
        fn = update_output_alignment,
        inputs=direction_dropdown, 
        outputs = output_box
    )
    translate_button.click(
        fn=translate_text, 
        inputs=[input_box, direction_dropdown],
        outputs=output_box,
    )
    
demo.launch()