近日，OpenAI公司的ChatGPT模型走紅網(wǎng)絡。同時，OpenAI也推出了Chat API和gpt-3.5-turbo模型，讓開發(fā)者能夠更輕松地使用與ChatGPT類似的自然語言處理模型。

通過OpenAI API，我們可以使用gpt-3.5-turbo模型，實現(xiàn)多種任務，包括：撰寫電子郵件或其他文本內(nèi)容，編寫Python代碼，創(chuàng)建對話代理，回答各類問題，為軟件提供自然語言界面，進行各學科的輔導，翻譯語言，為視頻游戲模擬角色等，還有許多未被挖掘的應用場景。

本文將為大家介紹如何使用OpenAI的Python SDK實現(xiàn)自己的聊天機器人。如果你已經(jīng)使用過OpenAI的Python SDK，請確保將其升級到最新版本(0.27.0)。如果你還沒有安裝Python運行環(huán)境，請先安裝Python 3.10。

接下來，我們將用FastAPI快速創(chuàng)建一個API，它的接口定義如下：

POST /chatbot/talk

Request Body:
{
    “message”: "你好!"
}

Response:
{
    “content”: “機器人回復消息”
}

首先，你需要在命令行中安裝FastAPI和OpenAI SDK，運行以下命令：

pip install fastapi uvicorn openai

為了方便演示，下面是一個最基本的FastAPI服務實現(xiàn)，文件保存在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 = "輸入您的Key"

class TalkRequest(BaseModel):
    message: str

@app.post("/chatbot/talk")
async def chatbot_talk(user_input: TalkRequest):
    if not history:
        history.append({"role": "system", "content": "你好，我是你的私人助手！"})
    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({"role": "bot", "content": bot_response})
    return {"content": bot_response}

現(xiàn)在只需創(chuàng)建一個 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 界面已經(jīng)加載并顯示出我們的 Talk API，如下圖所示：

點擊 Try it out, 在 message 里填入一個句子，例如我們這里輸入的”你好”，點擊 Execute按鈕。如果沒有問題應該能得到下面的響應結(jié)果：

OK，到這里我們的后臺服務就已經(jīng)準備好了。

這是一個用于搭建聊天機器人 UI 界面的代碼示例，其中使用了 Vue.js 和 Axios。用戶可以在瀏覽器中打開一個頁面，輸入文本消息并發(fā)送到聊天機器人 API，然后接收聊天機器人的響應。

首先，需要在 Vue 項目中創(chuàng)建一個名為 Chat.vue 的組件。在 Chat.vue 中，可以添加一個文本框和一個發(fā)送按鈕，用于向聊天機器人發(fā)送消息。然后，使用 Vue.js 的數(shù)據(jù)綁定功能，將文本框的值綁定到一個名為 message 的 Vue 組件數(shù)據(jù)屬性。在發(fā)送按鈕上添加一個點擊事件，該事件將調(diào)用一個 sendMessage 方法，該方法將使用 Axios（或其他 HTTP 庫）將消息 POST 到聊天機器人 API。在發(fā)送成功后，使用 Axios 響應中的數(shù)據(jù)更新 Vue 組件數(shù)據(jù)屬性的值，以顯示聊天機器人的響應消息。

這里提供了一個基本的 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 是一個數(shù)組，它用于存儲聊天記錄。sendMessage 方法將新消息添加到 messages 數(shù)組中，并使用 Axios 發(fā)送消息并更新響應的數(shù)據(jù)屬性。最后，它清空了 message 數(shù)據(jù)屬性，以便用戶可以輸入下一個消息。在模板中，我們使用 v-for 循環(huán)遍歷 messages 數(shù)組，并根據(jù) isBot 數(shù)據(jù)屬性來判斷消息是用戶的消息還是聊天機器人的消息。

需要注意的是，這個示例中聊天機器人 API 的地址是 http://127.0.0.1:8080/chatbot/talk。如果聊天機器人 API 的地址不同，需要相應地修改 sendMessage 方法中的 url 變量。

最后，要在瀏覽器中運行 Vue 應用程序，需要執(zhí)行以下步驟。

確保已經(jīng)安裝了 Node.js 和 npm，這將使我們能夠使用 Vue 的命令行工具來創(chuàng)建和管理項目。

打開命令行終端，導航到項目目錄，并使用以下命令安裝 Vue CLI：

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

cnpm install -g @vue/cli

使用以下命令創(chuàng)建一個新的 Vue 項目：

vue create my-chat-app

根據(jù)需求進行選擇，稍等片刻項目即可創(chuàng)建成功。

進入 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>

在命令行終端中運行以下命令啟動開發(fā)服務器：

npm run serve

打開 http://localhost:8081/，可以看到一個基本的聊天窗口可以體驗聊天機器人。

因文章篇幅有限，感興趣的同行完全可以利用前端技術(shù)做出更精美的機器人聊天窗口。文章來源地址http://www.zghlxwxcb.cn/news/detail-429998.html