注册了ChatGPT账号。创建自己的key
魔法上网法连接世界。
代码甚至可以使用js实现(但是官方不推荐)
有问题可以问我
引入axios
npm install axios
创建vue代码,修改自己的key,复制粘贴即可。
<template>
<div>
<h1>OpenAI API Example</h1>
<textarea v-model="prompt" placeholder="Enter your prompt"></textarea>
<button @click="generateText">Generate</button>
<div v-if="generatedText">
<h2>Generated Text:</h2>
<p>{{ generatedText }}</p>
</div>
</div>
</template>
<script setup>
import axios from 'axios';
import { ref } from 'vue';
const prompt = ref('');
const generatedText = ref('');
const my_key = ''//这里填写自己的key
const generateText = async () => {
const url = 'https://api.openai.com/v1/chat/completions';
const headers = {
'Content-Type': 'application/json',
'Authorization': `Bearer ${my_key}`,
};
const data = {
model: 'gpt-3.5-turbo',
messages: [
{ role: 'system', content: 'You are a helpful assistant.' },
{ role: 'user', content: prompt.value } // 确保 prompt.value 是有效的字符串
],
};
try {
const response = await axios.post(url, data, { headers });
const result = response.data;
if (result.choices && result.choices.length > 0) {
generatedText.value = result.choices[0].message.content; // 更新生成的文本
} else {
generatedText.value = 'Error generating text';
}
} catch (error) {
console.error('Error:', error);
generatedText.value = 'Error generating text';
}
};
</script>
<style scoped lang="scss"></style>
实现简单的vue聊天界面