Blocks 是 Gradio 库中的一个用来自定义构建交互式 web app 的模块。它相较于 Interface 而言，更加底层，能够用来构建更复杂的应用。ChatInterface 可用来便捷构建聊天机器人交互页面。

pip install gradio==3.44.3

1. Hello World

import gradio as gr


def test():
    with gr.Blocks() as app:
        urname = gr.Textbox(label="姓名", placeholder='请输入您的姓名')
        output = gr.Textbox(label="输出")
        button = gr.Button("提交")

        # 按钮绑定事件方法一
        def process_function(name):
            return "Hello " + name + "!"
        button.click(process_function, inputs=urname, outputs=output)

        # 按钮绑定事件方法二
        # @button.click(inputs=urname, outputs=output)
        # def process_function(name):
        #     return "Hello " + name + "!"

    app.launch()

if __name__ == '__main__':
    test()

2. Updating Component Configurations

import gradio as gr


def test():

    with gr.Blocks() as app:
        choice = gr.Radio(choices=['1', '3', '5', '7'])
        output = gr.Textbox(label="输出")

        @choice.change(inputs=choice, outputs=output)
        def process_function(value):
            if value == '1':
                return gr.update(lines=1, visible=True, value="一行")
            if value == '3':
                return gr.update(lines=3, visible=True, value="三行")
            if value == '5':
                return gr.update(lines=5, visible=True, value="五行")
            if value == '7':
                return gr.update(lines=7, visible=True, value="七行")

    app.launch()

if __name__ == '__main__':
    test()

3. Controlling Layout

import gradio as gr


def test():

    with gr.Blocks() as app:

        with gr.Row():

            # 折叠
            with gr.Accordion(label='第一部分'):

                with gr.Tab('标签页一'):
                    gr.Textbox()
                    gr.Textbox()
                    gr.Textbox()

                with gr.Tab('标签页二'):
                    gr.Textbox()
                    gr.Textbox()

            with gr.Accordion(label='第一部分'):

                with gr.Tab('标签页一'):
                    gr.Textbox()
                    gr.Textbox()
                    gr.Textbox()

                with gr.Tab('标签页二'):
                    gr.Textbox()
                    gr.Textbox()

    app.launch()

if __name__ == '__main__':
    test()

4. ChatInterface

import time
import gradio as gr
import random

# history 历史聊天记录 [['user_input', 'chatbot_output'], ...]

# 一次性回复所有内容
def chat_function1(user_input, history):
    time.sleep(1)
    return random.choice(["Yes", "No"])


# 打字机似的逐个字回复
def chat_function2(user_input, history):
    time.sleep(1)
    response = "我不太清楚这个问题!"
    for end in range(len(response) + 1):
        time.sleep(0.25)
        yield response[:end]


def test():

    css = '''
    
    .message-row.user-row.svelte-1w5se1h
    {
       text-align: right;
    }
    
    .user.svelte-1w5se1h.svelte-1w5se1h.svelte-1w5se1h
    {
        border-radius: 10px;
    }
    .bot.svelte-1w5se1h.svelte-1w5se1h.svelte-1w5se1h {
        border-radius: 10px;
    }
    
    .pending.svelte-1w5se1h.svelte-1w5se1h.svelte-1w5se1h
    {
        border-radius: 10px;
        margin-left:-15px;
    }
    '''

    app = gr.ChatInterface(chat_function2,
                           chatbot=gr.Chatbot(height=400, elem_id='chatbot'),
                           textbox=gr.Textbox(placeholder='请输入咨询的问题...', container=False, scale=8),
                           title='梁山一百零八好汉问答系统',
                           examples=[['松江的诨号是什么？'], ['排名106的好汉是谁？']],
                           clear_btn=None,
                           undo_btn=None,
                           retry_btn=None,
                           submit_btn='发送',
                           css=css)
    app.queue().launch()

if __name__ == '__main__':
    test()