写一个使用vue调用chatgpt的api的html文件
时间: 2024-05-22 13:15:50 浏览: 122
<!DOCTYPE html>
<html>
<head>
<title>调用chatgpt的API</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>ChatGPT API调用</h1>
<label for="input">输入:</label>
<input type="text" v-model="input" id="input">
<button v-on:click="sendRequest">发送</button>
<hr>
<p>ChatGPT回复:</p>
<p>{{ response }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
input: '',
response: ''
},
methods: {
sendRequest: function() {
axios.post('https://api.openai.com/v1/engines/davinci-codex/completions', {
"prompt": this.input,
"max_tokens": 60,
"n": 1,
"stop": "\n",
"temperature": 0.7
}, {
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_API_KEY' // TODO: Replace with your actual API key
}
})
.then(response => {
console.log(response);
this.response = response.data.choices[0].text;
})
.catch(error => {
console.log(error);
})
}
}
})
</script>
</body>
</html>
阅读全文