Gradio 简介

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

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

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

三步完成图形界面开发

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

代码如下：

import gradio as gr
prompt = """你是一个大数据和AI领域的专家，用中文回答大数据和AI的相关问题。你的回答需要满足以下要求:
1. 你的回答必须是中文
2. 回答限制在100个字以内"""

conv = Conversation(prompt, 6)


def answer(question, history=[]):
    history.append(question)
    message = conv.ask(question)
    history.append(message)
    responses = [(u,b) for u,b in zip(history[::2], history[1::2])]
    print(responses)
    return responses, history

with gr.Blocks(css="#chatbot{height:300px} .overflow-y-auto{height:500px}") as rxbot:
    chatbot = gr.Chatbot(elem_id="chatbot")
    state = gr.State([])

    with gr.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：解决方案

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

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

导入代码

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

<script
 type="module"
 src="https://gradio.s3-us-west-2.amazonaws.com/3.28.1/gradio.js"
></script>

<gradio-app src="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/），拖到最下方，即可体验：

ITPub博客

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