分享一個使用 Vue.js 框架編寫 ChatGPT 接口的簡單示例：
2023-04-06 加入收藏
以下是使用 Vue.js 框架編寫 ChatGPT 接口的簡單示例：
安裝 Vue.js 和 axios：
shCopy codenpm install vue axios
在 Vue.js 的入口文件
main.js中引入 axios 并設置默認的 API 基礎 URL：jsCopy codeimport Vue from 'vue'import axios from 'axios'// 設置默認的 API 基礎 URLaxios.defaults.baseURL = 'https://api.openai.com/v1/'Vue.config.productionTip = falsenew Vue({ render: h => h(App), }).$mount('#app')在 Vue.js 的組件中使用 axios 發送請求并處理響應：
vueCopy code<template> <div> <h1>ChatGPT 接口</h1> <div> <label for="input">輸入：</label> <input id="input" type="text" v-model="inputText"> </div> <button @click="getResponse">發送</button> <div> <label for="output">輸出：</label> <textarea id="output" v-model="outputText" readonly></textarea> </div> </div> </template> <script> import axios from 'axios' export default { data() { return { inputText: '', outputText: '' } }, methods: { getResponse() { axios.post('/engines/davinci-codex/completions', { prompt: this.inputText, max_tokens: 50 }, { headers: { 'Authorization': `Bearer ${YOUR_API_KEY}`, 'Content-Type': 'application/json' } }) .then(response => { this.outputText = response.data.choices[0].text }) .catch(error => { console.error(error) }) } } } </script>
其中，YOUR_API_KEY 應該被替換為您的 OpenAI API 密鑰。這個示例使用了 OpenAI 的 GPT-3 模型來生成回復，您也可以根據需要替換為其他模型或服務。
需要注意的是，此示例僅為演示如何使用 Vue.js 和 axios 發送請求，實際應用中需要對輸入進行驗證和處理，以確保數據的安全性和可靠性。