import gradio as gr;

# 1.开发一个聊天机器人的Web界面 gr.Blocks
#  title:标题，theme=gr.themes.Soft() 界面默认样式
with gr.Blocks(title='多模态聊天机器人', theme=gr.themes.Soft()) as block:

    # 2.加入聊天历史记录的组件 Chatbot
    # 高版本的gradio移除了type
    chatbot = gr.Chatbot(height=500, label='聊天机器人')
    # 3. 行组件，
    with gr.Row():
        #gr.Row() 表示 “行”，gr.Column() 表示 “列”，结合 scale 参数就能实现你说的左右分布，且列的宽度比例是 4:1。我会用新手能听懂的方式讲清楚每一部分的含义和效果。
        # 行组件中左面：文字输入的区域
        with gr.Column(scale=4):
            user_input = gr.Textbox(placeholder='请给机器人发送消息...', label='文字输入', max_lines=5)

            submit_btn = gr.Button('发送', variant="primary")
         # 行组件中右面：语音输入区域，type='filepath'录制音频的文件，后缀：wav，你用mp3也可以
        with gr.Column(scale=1):
            audio_input = gr.Audio(sources=['microphone'], label='语音输入', type='filepath', format='wav')



if __name__ == '__main__':
    block.launch()  # 界面跑起来