app.py

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>

            To learn more about Uyghur speech technology, please check out my [blog post](https://ixxan.github.io/blog/low-resource-speech-uyghur) 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. Click Buttons to Generate Text or Enter Text in Selected Script",
                        placeholder="Uyghur text goes 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="3. Generate Example Pronunciation")
                with gr.Row():
                    tts_btn = gr.Button("Generate Example Pronunciation")
            # ASR
            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):
            # 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..."
                    )
    # Note Section
    with gr.Row():
        gr.Markdown(
            """
            <p style="text-align: center; font-size: 14px; color: #888;">
                Notes: There may be same lags in processing the microphone recording, please make sure to listen to your recordings before submitting with "Check My Pronunciation" button.
            </p>
            """
        )
    # 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.queue(default_concurrency_limit = 2, max_size=20)  # <-- Sets up a queue with default parameters
    app.launch()