import gradio as gr
import util
import tts
import asr

# Front-End
with gr.Blocks() as app:
    with gr.Row():
        # Input Column
        with gr.Column(scale=1):
            with gr.Row():
                script_choice = gr.Dropdown(
                    choices=["Uyghur Arabic", "Uyghur Latin"],
                    label="1. Select Uyghur Script",
                    value="Uyghur Arabic",
                    interactive=True
                )
            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...",
                    )
                # Add buttons for generating short and long texts
                with gr.Row():
                    generate_short_btn = gr.Button("Generate Short Text")
                    generate_long_btn = gr.Button("Generate Long Text")
            with gr.Group():     
                with gr.Row():
                    example_audio = gr.Audio(label="3. (Optional) Generate AI Pronunciation for Text")
                with gr.Row():
                    tts_btn = gr.Button("Generate AI Pronunciation")
            with gr.Group():
                with gr.Row():
                    user_audio = gr.Audio(
                        label="4. 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):
            # Group transcripts together
            with gr.Group():
                with gr.Row():
                    transcript_ugArab_box = gr.Textbox(
                        label="User Transcript (Uyghur Arabic)",
                        placeholder="ASR transcription of user audio..."
                    )
                with gr.Row():
                    transcript_ugLatn_box = gr.Textbox(
                        label="User Transcript (Uyghur Latin)",
                        placeholder="ASR transcription of user audio..."
                    )
            
            # Group AI and user pronunciation
            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="User Phonemes",
                        placeholder="IPA representation of the user pronunciation..."
                    )

            with gr.Group():
                with gr.Row():
                    score_box = gr.Textbox(
                        label="Phonetic Score",
                        placeholder="Your pronunciation score as a percentage..."
                    )
                with gr.Row():
                    match_box = gr.Markdown(
                        """<h4>Pronunciation Feedback</h4>\n
                        Matching and mismatched characters will be visualized here...
                        """
                    )

    # 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]
    )
    
    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()