六虎

如何在Vue中使用ChatGPT

作者：

四次元口袋

在

1.获取ChatGPT API密钥

首要，需要获得ChatGPT的API密钥。能够前往OpenAI的官方网站创立一个账号，然后在账号设置中生成一个API密钥。假如还没有OpenAI账号，能够前往openAI官网 注册一个,注册教程网上现在有很多我就不赘述了。

2.创立vue项目

装置vueCLi，然后运用它创立一个新的Vue项目，我这儿运用的是npm指令装置：

npm install -g @vue/cli
vue create my-app
cd my-app

3.装置axios

在Vue项目中，咱们能够运用axios来发起HTTP恳求。咱们需要运用以下指令来装置axios：

npm install axios

4.创立ChatGPT服务

咱们将创立一个JavaScript模块，该模块将包含与ChatGPT API的所有通讯。在您的Vue项目中，创立一个名为chatgpt.js的新文件，并在其中添加以下代码：

import axios from 'axios';
const API_KEY = 'your_api_key_here';//替换成你请求的open AI key
const MODEL = 'text-davinci-002';//运用的语言模型
const api = axios.create({
  baseURL: 'https://api.openai.com/v1/',
  headers: {
    Authorization: `Bearer ${API_KEY}`,
    'Content-Type': 'application/json',
  },
});
async function generateText(prompt) {
  const response = await api.post('/engines/text-davinci-002/completions', {
    prompt: prompt,//问的问题
    max_tokens: 1024,
    n: 1,
    stop: '\n',
  });
  return response.data.choices[0].text.trim();
}
export default {
  generateText,
};

在这个文件中，咱们创立了一个axios实例，并将咱们的API密钥和模型ID添加到恳求头中。然后，咱们界说了一个名为generateText的异步函数，该函数将一个prompt作为参数，并将其发送到ChatGPT API中。API将生成一段文本并将其返回给咱们，咱们将其返回到咱们的Vue组件中。

5.运用ChatGPT服务

在Vue组件中，咱们能够导入chatgpt.js模块并运用它来生成文本。在这个示例中，咱们将创立一个名为GptTextGenerator的Vue组件。组件将包含一个文本输入框和一个按钮，当咱们点击按钮时，它将调用ChatGPT API并将生成的文本显示在屏幕上。

<template>
  <div>
    <input v-model="prompt" type="text" placeholder="Enter prompt" />
    <button @click="generateText">Generate Text</button>
    <p>{{ generatedText }}</p>
  </div>
</template>
<script>
import ChatGPT from '@/services/chatgpt';
export default {
  name: 'GptTextGenerator',
  data() {
    return {
      prompt: '',
      generatedText: '',
    };
  },
  methods: {
    async generateText() {
      this.generatedText = await ChatGPT.generateText(this.prompt);
    },
  },
};
</script>

6.总结

现在一个简略的接入gpt的vue项目就开发完成了。咱们现在能够和它谈天了或运用它进行一些简略的代码查错，或运用他寻觅解决bug的思路。目前官网供给了图片、文本、谈天、语音识别等多个模型，假如想深化了解，能够前往OpenAi官网查看更多的文档和示例。

假如你想完善这个谈天程序，能够阅览我上篇文章接入Vue-Quil富文本编辑器

更多文章