import gradio as gr


# ======================== 定义要调用的函数 ========================
def process_input(text, dropdown_choice, slider_value):
    """
    示例处理函数：演示如何接收多种输入并返回多种输出
    """
    result_text = f"收到文本: {text} | 滑块值: {slider_value} | 下拉选项: {dropdown_choice}"
    return result_text, slider_value * 2


# ======================== 构建 Blocks 界面 ========================
with gr.Blocks(title='myApp') as app:

    # ---------- Markdown ----------
    gr.Markdown("""
    # 主标题
    ### 这里是副标题或功能描述
    """)
    
    # ---------- 第一行：输入 ----------
    with gr.Row():
        # 文本输入框
        text_input = gr.Textbox(
            label="文本输入",
            placeholder="请输入内容...",
            lines=1,
            interactive=True
        )
        # 下拉选择框
        dropdown = gr.Dropdown(
            label="下拉选择",
            choices=["选项A", "选项B", "选项C"],
            value="选项A",
            interactive=True
        )
        # 滑块
        slider = gr.Slider(
            label="数值调节",
            minimum=0,
            maximum=100,
            value=50,
            step=1,
            interactive=True
        )

    # ---------- 第二行：按钮 ----------
    with gr.Row():
        # 提交按钮
        submit_btn = gr.Button("提交数据", variant="primary", size="lg")
        # 清空按钮
        clear_btn = gr.Button("清空所有", variant="secondary")
    
    # ---------- 第三行：输出 ----------
    with gr.Row():
        # 文本输出
        text_output = gr.Textbox(
            label="处理结果（文本）",
            lines=3,
            interactive=False  # 只读，不可编辑
        )
        # 数值输出
        number_output = gr.Number(
            label="处理结果（数值）",
            interactive=False
        )
    

    # ============== 事件绑定 ==============
    # 事件01：点击提交按钮时触发处理函数 --> process_input()
    submit_btn.click(
        # ##################################################################
        # 1. 当点击了按钮 submit_btn 之后，就会调用函数 process_input() 来处理事件
        # 2. inputs列表中的参数，会被process_input函数接收并处理
        # 3. outputs列表会接收process_input函数的返回值
        # ##################################################################
        fn=process_input,                           # 处理函数
        inputs=[text_input, dropdown, slider],      # 输入
        outputs=[text_output, number_output],       # 输出
    )

    # 事件02：清空重置所有组件
    clear_btn.click(
        fn=lambda: ("", 50, "选项A", "", None),     # 返回值顺序需与 outputs 一致
        inputs=[],
        outputs=[text_input, slider, dropdown, text_output, number_output],
    )


# ======================== 运行 ========================
if __name__ == "__main__":
    app.launch(
        server_name='0.0.0.0',
        server_port=7860,
        share=True
    )