Vue3实现简单的ChatGPT接口调用_vue chatgpt

注册了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聊天界面