ui/selection_page.py

import os.path
import gradio as gr
from functools import partial

def update_language_options(selected_country, metadata):
    with open(metadata["USA"]["English"]["Intro"], "r", encoding="utf-8") as f:
            INTRO_TEXT = f.read() # default
    # Retrieve the list of languages available for the selected country.
    if selected_country in metadata:
        languages = list(metadata[selected_country].keys())
        if len(languages) == 0:
            gr.Warning("No languages available for the selected country.")
            return gr.Dropdown(choices=[], interactive=False, value=None), gr.Markdown(INTRO_TEXT)
        # select the first language as default
        fn = metadata[selected_country][languages[0]]["Intro"]
        if os.path.exists(fn):
            with open(fn, "r", encoding="utf-8") as f:
                INTRO_TEXT = f.read()
        # Use gr.Dropdown.update to change the choices of the language dropdown.
        return gr.Dropdown(choices=languages, interactive=True, value=None, allow_custom_value=False), gr.Markdown(INTRO_TEXT)
    else:
        return gr.Dropdown(choices=[], interactive=False, value=None, allow_custom_value=False), gr.Markdown(INTRO_TEXT)

def build_selection_page(metadata_dict):
    with gr.Column(visible=True, elem_classes=["compact-container"]) as selection_page:
            with gr.Row():
                with open(metadata_dict["USA"]["English"]["Intro"], "r", encoding="utf-8") as f:
                    INTRO_TEXT = f.read()
                intro_markdown = gr.Markdown(INTRO_TEXT)

            gr.Markdown("## Please select your country")
            
            country_choice = gr.Dropdown(
                choices=list(metadata_dict.keys()), label="Country", allow_custom_value=False
            )

            language_choice = gr.Dropdown(
                choices=[], 
                label="Language",
                allow_custom_value=False,
                interactive=False  # Initially disabled.
            )
            
            # When the country selection changes, update the language dropdown.
            country_choice.change(
                fn=partial(update_language_options, metadata=metadata_dict),
                inputs=country_choice,
                outputs=[language_choice, intro_markdown]
            )
            with gr.Row():
                username = gr.Textbox(label="Email (optional)", type="email", elem_id="username_text")
                password = gr.Textbox(label="Password (optional)", type="password", elem_id="password_text")

            proceed_btn = gr.Button("Proceed")

    return selection_page, country_choice, language_choice, proceed_btn, username, password, intro_markdown