Gradio 简介
如果对 Gradio 库不太了解的，可以先参考一下：Gradio快速入门
使用 Gradio 这个 Python 库来开发这个聊天机器人图形界面有如下几个好处：
- 之前的的代码都是用 Python 实现的，不需要去学习前端相关框架了。
- Gradio 渲染出来的界面可以直接在 Jupyter Notebook 里面显示出来。
- 可以免费把 Gradio 的应用部署到 HuggingFace 上，特别方便我们的系统演示给其他人看。
三步完成图形界面开发
- 定义好了 system 这个系统角色的提示语，创建了一个 Conversation 对象。参考：
- 定义了一个 answer 方法，简单封装了一下 Conversation 的 ask 方法。主要是通过 history 维护了整个会话的历史记录。并且通过 responses，将用户和 AI 的对话分组。然后将它们两个作为函数的返回值。这个函数的签名是为了符合 Gradio 里 Chatbot 组件的函数签名的需求。
- 通过一段 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：解决方案
- 过会再试
- 通过使用 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/），拖到最下方，即可体验：
