成人黄网18免费观看的网站,天天做天天爱天天爽天天综合,国内精品视频一区二区八戒

創建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 模板中，以便您可以在瀏覽器中查看聊天界面。