使用Gradio快速搭建一个聊天机器人

Gradio 简介

如果对 Gradio 库不太了解的，可以先参考一下：Gradio快速入门

使用 Gradio 这个 Python 库来开发这个聊天机器人图形界面有如下几个好处：

• 之前的的代码都是用 Python 实现的，不需要去学习前端相关框架了。
• Gradio 渲染出来的界面可以直接在 Jupyter Notebook 里面显示出来。
• 可以免费把 Gradio 的应用部署到 HuggingFace 上，特别方便我们的系统演示给其他人看。

三步完成图形界面开发

1. 定义好了 system 这个系统角色的提示语，创建了一个 Conversation 对象。参考：
2. 定义了一个 answer 方法，简单封装了一下 Conversation 的 ask 方法。主要是通过 history 维护了整个会话的历史记录。并且通过 responses，将用户和 AI 的对话分组。然后将它们两个作为函数的返回值。这个函数的签名是为了符合 Gradio 里 Chatbot 组件的函数签名的需求。
3. 通过一段 with 代码，创建对应的聊天界面。Gradio 提供了一个现成的 Chatbot 组件，我们只需要调用它。

代码如下：

importgradioasgrprompt="""你是一个大数据和AI领域的专家，用中文回答大数据和AI的相关问题。你的回答需要满足以下要求:1. 你的回答必须是中文2. 回答限制在100个字以内"""conv=Conversation(prompt, 6)
defanswer(question, history=[]):
history.append(question)
message=conv.ask(question)
history.append(message)
responses= [(u,b) foru,binzip(history[::2], history[1::2])]
print(responses)
returnresponses, historywithgr.Blocks(css="#chatbot{height:300px} .overflow-y-auto{height:500px}") asrxbot:
chatbot=gr.Chatbot(elem_id="chatbot")
state=gr.State([])
withgr.Row():
txt=gr.Textbox(show_label=False, placeholder="请输入你的问题").style(container=False)
txt.submit(answer, [txt, state], [chatbot, state])
rxbot.launch()

部署到 HuggingFace

HuggingFace 简介

HuggingFace 的官方网站：https://huggingface.co 我们可以看到如下一些资源。

• Datasets：数据集，以及数据集的下载地址
• Models：各个预训练模型
• Docs：文档
• Spaces：发布的一些应用，这次就使用这个菜单进行程序部署

注册帐号

需要注册一个 HuggingFace 的账号，点击左上角的头像，然后点击 “+New Space” 创建一个新的项目空间。

创建 Space

在接下来，给 Space 取一个名字【1】，然后在 Select the Space SDK 里面，选择第二个 Gradio【2】。硬件选择免费的【3】，项目这里选择 public【4】，让其他人也能够看到。最后点击创建【5】。

发布代码

创建成功后，会跳转到 HuggingFace 的 App 界面。里面给了如何 Clone 当前的 space，然后提交代码部署 App 的方式。如下图：

按照上面的示例，需要通过 Git 把当前 space 下载下来，然后提交两个文件

• app.py 包含了我们的 Gradio 应用；
• requirements.txt 包含了这个应用依赖的 Python 包。

代码提交之后，HuggingFace 的页面会自动刷新

设置环境变量

代码里是通过环境变量获取 OpenAI 的 API Key 的，所以还要在这个 HuggingFace 的 Space 里设置一下这个环境变量。如下图：

设置完成之后，需要手动点击一下 Restart this space 确保这个应用重新加载一遍，以获取到新设置的环境变量。

效果体验

到此，再切换到 APP Tab，尝试下聊天机器人是否可以正常工作了，如下图：

遇到的问题

Q：提交问题后，界面上没有返回对话内容，通过查看日志，发现如下错误：

AttributeError("module 'openai' has no attribute 'ChatCompletion'"))]

A：解决方案

在 requirements.txt 中指定 openai 库的版本号

openai==0.27.0

Q：遇到访问限流的问题，日志如下：

A：解决方案

1. 过会再试
2. 通过使用 backoff 库，遇到 RateLimitError 的时候，按照指数级别增加等待时间，可以参考官网对限流的说明：https://platform.openai.com/docs/guides/rate-limits/overview

聊天APP分享到自己的网站上

导入代码

通过在站点中添加以下脚本将 gradioJS 库导入到站点中

<scripttype="module"src="https://gradio.s3-us-west-2.amazonaws.com/3.28.1/gradio.js"></script><gradio-appsrc="https://yezhiwei-chatbot.hf.space"></gradio-app>

获取方式

通过以下方式获取上面的代码，如下图：

集成效果

体验方式

访问 https://yezhwi.github.io/ 访问，进入二级页面（如：https://yezhwi.github.io/ai/2023/03/27/3%E5%88%86%E9%92%9F%E9%83%A8%E7%BD%B2ChatGPT%E6%9C%8D%E5%8A%A1%E7%AB%AF%E5%BA%94%E7%94%A8-%E9%99%84%E4%BB%A3%E7%A0%81/），拖到最下方，即可体验：