热门丨Python+ChatGPT如何实现自己的聊天机器人?

上一篇 / 下一篇  2023-03-22 17:01:50 / 个人分类:人工智能

最近火出圈的ChatGPT公司OpenAI发布了Chat API和gpt-3.5-turbo模型,我们现在可以通过API来使用与ChatGPT一样的NLP模型。加我VX:atstudy-js 回复“测试”,进入 自动化测试学习交流群~~

使用OpenAI API,可以使用gpt-3.5-turbo构建自己的应用程序,可执行以下任务:

草拟电子邮件或其他文字内容写代码,例如Python代码

创建对话代理,回答各类问题

为您的软件提供自然语言界面

在各种学科中进行辅导

翻译语言

为视频游戏模拟角色等

待发掘的各种应用场景……

下面用Python来讲解如何使用openai python SDK实现自己的聊天机器人。如果你之前使用过openai python SDK,请确保升级到了最新版本(0.27.0),如果还没有安装Python运行环境,请先安装python 3.10。

获取API Key

你需要获取API Key,如果你已经使用过openai SDK那么你可能已经有API Key了(这种情况请跳过本节内容)。

登录https://platform.openai.com/并导航到https://platform.openai.com/account/api-keys点击Create new secret key按钮可以获取一个新的API Key。

注意:API Key内容只会显示一次。点击复制按钮把API Key复制并保存好。

创建API

用FastAPI快速创建一个API,它的接口定义如下:

POST/chatbot/talk

Request Body:

{

“message”:"你好!"

}

Response:

{

“content”:“bot response message”

}

首先,你需要安装FastAPI和OpenAI SDK,可以通过以下命令在命令行中安装它们:

pip install fastapi uvicorn openai

为了演示方便,此处简化了一些最佳实践,下面是一个最基本的FastAPI服务实现,文件保存在main\app.py文件中。

import openai

from typing import List

from fastapi import FastAPI

from pydantic import BaseModel

from starlette.middleware.cors import CORSMiddleware

history=[]

app=FastAPI()

app.add_middleware(

CORSMiddleware,

allow_origins=["*"],

allow_credentials=True,

allow_methods=["HEAD","OPTIONS","GET","PUT","PATCH","POST","DELETE"],

allow_headers=["*"],

max_age=86400

)

openai.api_key="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"

class TalkRequest(BaseModel):

message:str

@app.post("/chatbot/talk")

async def chatbot_talk(user_input:TalkRequest):

if not history:

history.append({"role":"system","content":"You are a helpful assistant."})

history.append({"role":"user","content":user_input.message.strip()})

response=await openai.ChatCompletion.acreate(

model="gpt-3.5-turbo",

messages=history)

bot_response=response.choices[0].message

history.append(bot_response)

return bot_response

现在只需创建一个run.py文件来启动FastAPI服务。

import uvicorn

from main.app import app

if__name__=='__main__':

uvicorn.run(

app=app,

host="127.0.0.1",

port=8080,

use_colors=True,

log_level="debug"

)

接下来运行run.py。

浏览器中打开http://127.0.0.1:8080/docs即可看到Swagger界面已经加载并显示出我们的Talk API,如下图所示:

点击Try it out,在message里填入一个句子,例如我们这里输入的”你好”,点击Execute按钮。如果没有问题应该能得到下面的响应结果:

OK,到这里我们的后台服务就已经准备好了。

UI界面

接下来我们做一个基于VUE的UI界面来实现聊天窗口。要实现基于VUE的聊天界面,需要执行以下步骤:

在Vue项目中创建一个聊天组件,例如Chat.vue。

在Chat.vue中添加一个文本框和一个发送按钮,用于向聊天机器人发送消息。

使用VUE的数据绑定功能,将文本框的值绑定到一个名为message的Vue组件数据属性。

在发送按钮上添加一个点击事件,该事件将调用一个发送消息的方法,该方法将使用Axios(或其他HTTP库)将消息POST到聊天机器人API。

在发送成功后,使用Axios响应中的数据更新Vue组件数据属性的值,以显示聊天机器人的响应消息。

下面是一个示例Chat.vue文件的基本代码:

<template>

<div>

<div v-for="(message,index)in messages":key="index">

<div v-if="message.isBot">{{message.content}}</div>

<div v-else>{{message.content}}</div>

</div>

<input v-model="message"type="text"placeholder="Type your message here...">

<button@click="sendMessage">Send</button>

</div>

</template>

<script>

import axios from'axios'

export default{

name:“ChatView”,

data(){

return{

message:'',

messages:[],

}

},

methods:{

async sendMessage(){

const url='http://127.0.0.1:8080/chatbot/talk'

const data={message:this.message}

const response=await axios.post(url,data)

this.messages.push({content:this.message,isBot:false})

this.messages.push({content:response.data.content,isBot:true})

this.message=''

},

},

}

</script>

在这个示例中,messages是一个数组,它用于存储聊天记录

sendMessage方法将新消息添加到messages数组中,并使用Axios发送消息并更新响应的数据属性。

最后,它清空了message数据属性,以便用户可以输入下一个消息。

在模板中,我们使用v-for循环遍历messages数组,并根据isBot数据属性来判断消息是用户的消息还是聊天机器人的消息。

运行

最后,要在浏览器中运行Vue应用程序,需要执行以下步骤。

注意:确保已经安装了Node.js和npm,这将使我们能够使用Vue的命令行工具来创建和管理的项目。

(1)打开命令行终端,导航到项目目录,并使用以下命令安装:

npm install-g cnpm--registry=https://registry.npmmirror.com

cnpm install-g@vue/cli

(2)使用以下命令创建一个新的Vue项目:

vue create my-chat-app

这将提示选择一些选项来配置我们的项目,例如要使用哪个包管理器,要使用哪些插件等等。

可以根据需求进行选择,稍等片刻项目即可创建成功,如下图所示:

(3)进入my-chat-app目录,安装Axios,可以使用以下命令:

cnpm install axios--save

打开创建的项目文件夹,将Chat.vue组件添加到src/components文件夹中。

打开src/App.vue文件,并将以下代码添加到模板中:

<template>

<div>

<Chat/>

</div>

</template>

<script>

import Chat from'./components/Chat.vue'

export default{

name:'App',

components:{

Chat,

},

}

</script>

这将把Chat组件添加到App.vue模板中,以便您可以在浏览器中查看聊天界面。

(4)在命令行终端中运行以下命令启动开发服务器:

pm run serve

如上图所示,Web Server已经启动完毕,用浏览器打开http://localhost:8081/可以看到一个基本的聊天窗口,当然这里只有一个简单的示例来展示基本操作:

最后:

添加微信:atstudy-js  或者扫描下方二维码,备注“博客”邀请你进入Python自动化测试学习交流群~


TAG:

 

评分:0

我来说两句

Open Toolbar