上节课当中，简单体验了一下Gradio的基本用法，用几行简单的代码，就可以实现一个交互界面。因为比较简单，其他组件就不挨个讲了，大家需要的时候，去看一眼文档就可以了。 

这节课，我们要布局的是一个对话的界面，因为是一个常用的场景，所以Gradio做好了封装，直接调就可以了。

https://www.gradio.app/docs/chatinterface

代码示例

1、简单示例 

# gradio_02_chat_interface.py
import gradio as gr

def echo(message, history):
    return message

demo = gr.ChatInterface(
    fn=echo, 
    examples=["hello", "hola", "merhaba"], 
    title="Echo Bot"
)

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

2、界面限宽 

# 调整页面宽度和占位
css = '''
.gradio-container { max-width:850px !important; margin:20px auto !important;}
.message { padding: 10px !important; font-size: 14px !important;}
'''

3、界面元素调整

调整元素内容，做一个mini版女神聊天机器人。 

demo = gr.ChatInterface(
    css = css,
    fn = nvshen_bot, 
    title = '女神聊天机器人',
    chatbot = gr.Chatbot(height=400, bubble_full_width=False),
    theme = gr.themes.Default(spacing_size='sm', radius_size='sm'),
    textbox=gr.Textbox(placeholder="开始跟女神聊天吧~", container=False, scale=7),
    examples = ['在吗', '饿了吗？', '一起去吃点？', '等我去接你'],
    submit_btn = gr.Button('提交', variant='primary'),
    clear_btn = gr.Button('清空记录'),
    retry_btn = None,
    undo_btn = None,
)

4、逻辑处理函数 

import time

def nvshen_bot(message, history):
    pos = message.find('吗')
    time.sleep(1)
    if pos != -1:
        return message[:pos]
    else:
        return '嗯'

现在我们的聊天界面就搭建好了，后面要改成医疗问答机器人，就只需要在这个基础上，略作修改就可以了。

本文链接：http://www.chenhuax.com/edu/note/709

版权声明：本文为「陈华编程」原创课程讲义，请给与知识创作者起码的尊重，未经许可不得传播或转售！