山东大学软件学院创新项目实训——使用用Gradio实现网页交互

使用 Gradio 库构建一个简单的聊天机器人界面。该界面允许用户输入消息，并根据用户的输入生成回复，同时提供了一些可调节的参数。

以下是对所写代码的详细解释：

• with gr.Blocks() as demo：创建一个 Gradio 应用，命名为 demo。
• gr.HTML("""<h1 align="center">ChatGLM3-6B Gradio Simple Demo</h1>""")：添加一个 HTML 标题，显示在页面顶部。
• chatbot = gr.Chatbot()：创建一个聊天机器人界面。

布局：

• with gr.Row()：创建一个水平排列的行。
• with gr.Column(scale=4)：创建一个宽度为 4 的列。
  • user_input = gr.Textbox(...)：在列中添加一个文本输入框，用户在此输入消息。
  • submitBtn = gr.Button("Submit")：在列中添加一个提交按钮。
• with gr.Column(scale=1)：创建一个较窄的列。
  • emptyBtn = gr.Button("Clear History")：添加一个按钮，用于清除聊天记录。
  • max_length = gr.Slider(...)：添加一个滑块，用于调整生成回复的最大长度。
  • top_p = gr.Slider(...)：添加一个滑块，用于调整生成回复的 top_p 参数。
  • temperature = gr.Slider(...)：添加一个滑块，用于调整生成回复的温度参数。

定义用户输入和处理逻辑

• def user(query, history)：定义一个函数，用于处理用户输入。
  • query：用户输入的消息。
  • history：聊天记录。
  • return "", history + [[parse_text(query), ""]]：清空用户输入框，并将用户输入添加到聊天记录中。
• submitBtn.click(...)：设置提交按钮的点击事件。
  • user：点击提交按钮后，调用 user 函数。
  • [user_input, chatbot]：user 函数的输入参数。
  • [user_input, chatbot]：user 函数的输出参数。
  • queue=False：不使用队列，立即处理请求。
• .then(...)：在 user 函数执行后，调用 predict 函数。
  • predict：用于生成回复的函数。
  • [chatbot, max_length, top_p, temperature]：predict 函数的输入参数。
  • chatbot：predict 函数的输出参数。
• emptyBtn.click(lambda: None, None, chatbot, queue=False)：设置清空按钮的点击事件，清空聊天记录。

启动 Gradio 应用

• demo.queue()：启用请求队列（尽管在 submitBtn.click 中禁用了队列，这里启用队列以确保其他操作也能按顺序处理）。
• demo.launch(server_name="127.0.0.1", server_port=8080, inbrowser=True, share=False)：启动 Gradio 应用。
  • server_name="127.0.0.1"：设置服务器地址为本地。
  • server_port=8080：设置服务器端口为 8080。
  • inbrowser=True：启动后在浏览器中打开应用。
  • share=False：不生成共享链接。

总结

     这段代码使用 Gradio 库创建了一个简单的聊天机器人界面，允许用户输入消息并获取生成的回复。界面包括输入框、提交按钮、清空按钮以及用于调节生成回复参数的滑块。通过设置点击事件和定义处理函数，实现了基本的聊天功能。

最终界面：