import gradio as gr
import util
import tts
import asr

# Front-End
with gr.Blocks() as app:
    # Title and Article
    with gr.Row():
        gr.Markdown(
            """
            <h1 style="text-align: center; font-size: 28px; color: #4A90E2;">
                Uyghur Pronunciation Checker
            </h1>
            <p style="text-align: center; font-size: 16px; color: #555;">
                This app is designed to help users practice Uyghur pronunciation.
            </p>

            Select an input script, enter or generate text, and check your pronunciation. You may also generate AI pronunciation to compare. 
            
            (Note: Please keep the audio input to under 10 seconds for faster processing since this space is running on CPU basic.)

            To learn more about Uyghur speech technology, please check out my [blog post](https://ixxan.github.io/low-resource-speech-ug/) and this other [demo](https://huggingface.co/spaces/ixxan/uyghur-speech-models).
            """
        )
    with gr.Row():
        # Input Column
        with gr.Column(scale=1):
            # Script 
            with gr.Row():
                script_choice = gr.Dropdown(
                    choices=["Uyghur Arabic", "Uyghur Latin"],
                    label="1. Select Uyghur Script",
                    value="Uyghur Arabic",
                    interactive=True
                )
            # Text
            with gr.Group():
                with gr.Row():
                    input_text = gr.Textbox(
                        label="2. Enter Uyghur Text in Chosen Script (or Click a Button Below to Generate Text)",
                        placeholder="Enter Uyghur text here...",
                    )
                with gr.Row():
                    generate_short_btn = gr.Button("Generate Short Text")
                    generate_long_btn = gr.Button("Generate Long Text")
            # Translations
            # with gr.Group():
            #     with gr.Row():
            #         translate_choice = gr.Dropdown(
            #             choices=util.translation_choices,
            #             label="(Optional) Select Translation Langauge and Translate",
            #             value="english",
            #             interactive=True
            #         )
            #         translate_btn = gr.Button("Translate")
            #     with gr.Row():
            #         translation_text = gr.Textbox(
            #             label=" Translated Uyghur Text",
            #             placeholder="Translated text will appear here...",
            #         )
            # TTS
            with gr.Group():     
                with gr.Row():
                    example_audio = gr.Audio(label="(Optional) Generate AI Pronunciation")
                with gr.Row():
                    tts_btn = gr.Button("Generate AI Pronunciation")
            # ASR
            with gr.Group():
                with gr.Row():
                    user_audio = gr.Audio(
                        label="3. Record or Upload Your Pronunciation",
                        sources=["microphone", "upload"],
                        type="filepath",
                    )
                with gr.Row():
                    check_btn = gr.Button("Check My Pronunciation")
        
        # Output Column
        with gr.Column(scale=1):
            # ASR Transcripts
            with gr.Group():
                with gr.Row():
                    transcript_ugArab_box = gr.Textbox(
                        label="Your Pronunciation Transcript (Arabic Script)",
                        placeholder="ASR transcription of user audio..."
                    )
                with gr.Row():
                    transcript_ugLatn_box = gr.Textbox(
                        label="Your Pronunciation Transcript (Latin Script)",
                        placeholder="ASR transcription of user audio..."
                    )
            # IPA
            with gr.Group():
                with gr.Row():
                    correct_phoneme_box = gr.Textbox(
                        label="Correct Phonemes",
                        placeholder="IPA representation of the Correct pronunciation..."
                    )
                with gr.Row():
                    user_phoneme_box = gr.Textbox(
                        label="Your Phonemes",
                        placeholder="IPA representation of the user pronunciation..."
                    )
            # Feedback
            with gr.Group():
                with gr.Row():
                    match_box = gr.Markdown(
                        """<h4>Pronunciation Feedback</h4>\n
                        Matching and mismatched characters will be visualized here...
                        """
                    )
                with gr.Row():
                    score_box = gr.Textbox(
                        label="Phonetic Score",
                        placeholder="Your pronunciation score as a percentage..."
                    )

    # Bind functions to buttons
    generate_short_btn.click(
        util.generate_short_text,
        inputs=[script_choice],
        outputs=[input_text]
    )

    generate_long_btn.click(
        util.generate_long_text,
        inputs=[script_choice],
        outputs=[input_text]
    )

    # translate_btn.click(
    #     util.translate_text,
    #     inputs=[input_text, script_choice, translate_choice],
    #     outputs=[translation_text]
    # )
    
    tts_btn.click(
        tts.generate_audio,
        inputs=[input_text, script_choice],
        outputs=[example_audio]
    )

    check_btn.click(
        asr.check_pronunciation,
        inputs=[input_text, script_choice, user_audio],
        outputs=[transcript_ugArab_box, transcript_ugLatn_box, correct_phoneme_box, user_phoneme_box, match_box, score_box]
    )

# Main
if __name__ == "__main__":
    app.launch()