test_data_1 = {'1':['11','12'],'2':['21','22']}

test_data_2 = {
    "11":'Вот выходные данные {11}',
    "12":'Вот выходные данные {12}',
    "21":'Вот выходные данные {21}',
    "22":'Вот выходные данные {22}',
    }

import math
import gradio as gr
import plotly.express as px
import numpy as np

small_and_beautiful_theme = gr.themes.Soft(
        primary_hue=gr.themes.Color(
            c50="#EBFAF2",
            c100="#CFF3E1",
            c200="#A8EAC8",
            c300="#77DEA9",
            c400="#3FD086",
            c500="#02C160",
            c600="#06AE56",
            c700="#05974E",
            c800="#057F45",
            c900="#04673D",
            c950="#2E5541",
            name="small_and_beautiful",
        ),
        secondary_hue=gr.themes.Color(
            c50="#576b95",
            c100="#576b95",
            c200="#576b95",
            c300="#576b95",
            c400="#576b95",
            c500="#576b95",
            c600="#576b95",
            c700="#576b95",
            c800="#576b95",
            c900="#576b95",
            c950="#576b95",
        ),
        neutral_hue=gr.themes.Color(
            name="gray",
            c50="#f6f7f8",
            # c100="#f3f4f6",
            c100="#F2F2F2",
            c200="#e5e7eb",
            c300="#d1d5db",
            c400="#B2B2B2",
            c500="#808080",
            c600="#636363",
            c700="#515151",
            c800="#393939",
            # c900="#272727",
            c900="#2B2B2B",
            c950="#171717",
        ),
        radius_size=gr.themes.sizes.radius_sm,
    ).set(
        # button_primary_background_fill="*primary_500",
        button_primary_background_fill_dark="*primary_600",
        # button_primary_background_fill_hover="*primary_400",
        # button_primary_border_color="*primary_500",
        button_primary_border_color_dark="*primary_600",
        button_primary_text_color="white",
        button_primary_text_color_dark="white",
        button_secondary_background_fill="*neutral_100",
        button_secondary_background_fill_hover="*neutral_50",
        button_secondary_background_fill_dark="*neutral_900",
        button_secondary_text_color="*neutral_800",
        button_secondary_text_color_dark="white",
        # background_fill_primary="#F7F7F7",
        # background_fill_primary_dark="#1F1F1F",
        # block_title_text_color="*primary_500",
        block_title_background_fill_dark="*primary_900",
        block_label_background_fill_dark="*primary_900",
        input_background_fill="#F6F6F6",
        # chatbot_code_background_color="*neutral_950",
        # gradio Эти переменные, начиная с чат-бота, будут применяться к другим местам рендеринга. Кто знает, о чем вы думаете. . .
        chatbot_code_background_color_dark="*neutral_950",
    )


test_data_1 = {'1':['11','12'],'2':['21','22']}

test_data_2 = {
    "11":'Вот выходные данные {11}',
    "12":'Вот выходные данные {12}',
    "21":'Вот выходные данные {21}',
    "22":'Вот выходные данные {22}',
    }


with gr.Blocks(theme=small_and_beautiful_theme) as demo: # small_and_beautiful_theme Сделайте границы страниц простыми
    # рамка управления
    with gr.Tab(label="диалог"):
        with gr.Accordion(label="Prompt", open=True): # open может выбрать, отображать ли весь модуль ниже
            with gr.Accordion(label="Загрузка шаблона", open=True):# open может выбрать, отображать ли весь модуль ниже
                with gr.Column():   # Модули расположены рядами
                    gr.Markdown("Раскрывающийся список уровней:", elem_classes="hr-line")
                    with gr.Row():  # Модули расположены в столбцах
                        with gr.Column(scale=6):
                            templateFileSelectDropdown = gr.Dropdown( # Выпадающее меню первого уровня
                                label="Выбрать файл коллекции шаблонов",
                                choices= test_data_1.keys(),
                                multiselect=False,
                                value=list(test_data_1.keys())[0],
                                container=False,
                            )

                    with gr.Row():
                        # gr.Markdown("Раскрывающийся список второго уровня:", elem_classes="hr-line")
                        with gr.Column():
                            gr.Markdown("Раскрывающийся список второго уровня:", elem_classes="hr-line")
                            templateSelectDropdown = gr.Dropdown( # Дополнительное раскрывающееся меню
                                label="Загрузить из шаблона",
                                choices=None, 
                                multiselect=False,
                                container=False,
                            )
                    templateRefreshBtn = gr.Button("🔄 обновить") # кнопка обновления
            # Столбец отображения контента
            systemPromptTxt = gr.Textbox( 
                show_label=True,
                Placeholder="Введите систему здесь Prompt...",
                label="System prompt",
                value='Пожалуйста, повторно выберите шаблон приглашения',
                lines=8
            )
            
    
    # Функция кнопки 1: кнопка Нажмите поведение обновлений
        # get_template_dropdown 【кнопка обновления] передается в [выпадающее меню] templateFileSelectDropdown
    def get_template_dropdown():
        # Ввод: нет элементов ввода
        # Вывод: обновите параметр [Раскрывающийся список первого уровня] и оставьте [Раскрывающийся список второго уровня] пустым.
        # Метод триггера: поведение щелчка щелчка
        return gr.Dropdown.update(choices=test_data_1.keys()),None
    
    templateRefreshBtn.click(get_template_dropdown, None, 
                             [templateFileSelectDropdown,templateSelectDropdown])

    # Функция кнопки 2: выбор раскрывающегося списка на один уровень -> Раскрывающаяся связь второго уровня
    def load_template(key):
        # Пример:templateFileSelectDropdown [Раскрывающийся список уровней]
        # Выход: обновить опцию [Вторичный раскрывающийся список]  templateSelectDropdown
        # Метод триггера: ввод срабатывает, когда пользователь меняет значение компонента
        return gr.Dropdown.update(choices=test_data_1[key])
 
    templateFileSelectDropdown.change(
        load_template,
        templateFileSelectDropdown,
        [templateSelectDropdown],
        show_progress=True,
    )
    
    # Функция кнопки 3: Выбор вторичного меню
    def get_template_content(selection):
        # Входные данные: templateSelectDropdown [Раскрывающийся список уровней]
        # Вывод: Обновить [систему подсказка】вариант  systemPromptTxt
        # Метод триггера: изменение срабатывает при изменении значения компонента
        try:
            return test_data_2[selection]
        except:
            return «Пожалуйста, выберите шаблон еще раз»
        
    templateSelectDropdown.change(
        get_template_content,
        [templateSelectDropdown],
        [systemPromptTxt],
        show_progress=True,
    )



if __name__ == "__main__":
    demo.queue().launch()