分享一個(gè)使用 Vue.js 框架編寫(xiě) ChatGPT 接口的簡(jiǎn)單示例：
2023-04-06 加入收藏
以下是使用 Vue.js 框架編寫(xiě) ChatGPT 接口的簡(jiǎn)單示例：
安裝 Vue.js 和 axios：
shCopy codenpm install vue axios
在 Vue.js 的入口文件
main.js中引入 axios 并設(shè)置默認(rèn)的 API 基礎(chǔ) URL：jsCopy codeimport Vue from 'vue'import axios from 'axios'// 設(shè)置默認(rèn)的 API 基礎(chǔ) URLaxios.defaults.baseURL = 'https://api.openai.com/v1/'Vue.config.productionTip = falsenew Vue({ render: h => h(App), }).$mount('#app')在 Vue.js 的組件中使用 axios 發(fā)送請(qǐng)求并處理響應(yīng)：
vueCopy code<template> <div> <h1>ChatGPT 接口</h1> <div> <label for="input">輸入：</label> <input id="input" type="text" v-model="inputText"> </div> <button @click="getResponse">發(fā)送</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 應(yīng)該被替換為您的 OpenAI API 密鑰。這個(gè)示例使用了 OpenAI 的 GPT-3 模型來(lái)生成回復(fù)，您也可以根據(jù)需要替換為其他模型或服務(wù)。
需要注意的是，此示例僅為演示如何使用 Vue.js 和 axios 發(fā)送請(qǐng)求，實(shí)際應(yīng)用中需要對(duì)輸入進(jìn)行驗(yàn)證和處理，以確保數(shù)據(jù)的安全性和可靠性。