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 Input Script",
                    value="Uyghur Arabic",
                    interactive=True
                )
            with gr.Group():
                with gr.Row():
                    input_text = gr.Textbox(
                        label="2. Input Uyghur Text in Selected Script or Generate Text with Buttons below",
                        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. Click \"Generate Machine Pronunciation\"")
                with gr.Row():
                    tts_btn = gr.Button("Generate Machine 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 machine and user pronunciation
            with gr.Group():
                with gr.Row():
                    machine_pronunciation_box = gr.Textbox(
                        label="Machine Pronunciation",
                        placeholder="IPA representation of the machine pronunciation..."
                    )
                with gr.Row():
                    user_pronunciation_box = gr.Textbox(
                        label="User Pronunciation",
                        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(
                        label="Phonetic Match",
                        value="Matching and mismatched characters 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, machine_pronunciation_box, user_pronunciation_box, match_box, score_box]
    )

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