在Vue中实现与OpenAI对话的功能

以下是在Vue项目中实现与OpenAI对话功能的详细步骤，示例中以调用OpenAI的 gpt-3.5-turbo 模型进行交互为例：

一、创建Vue项目并安装必要依赖

1. 创建Vue项目
   确保你的开发环境中已经安装了Node.js和npm（Node Package Manager）。打开命令行，使用以下命令创建一个新的Vue项目（这里以使用默认配置创建项目为例）：

vue create openai-vue-dialogue复制

按照提示逐步操作完成项目创建后，进入项目目录：

cd openai-vue-dialogue复制

2. 安装axios依赖
   为了方便向OpenAI的API发送HTTP请求，需要安装 axios 库，在项目根目录下执行以下命令：

npm install axios复制

二、获取OpenAI API密钥

登录OpenAI官网（https://platform.openai.com/），注册账号后，进入账户设置页面找到“View API Keys”选项，点击“Create new secret key”来创建属于自己的API密钥，并妥善保存该密钥，后续代码中要将其配置进去以获取调用权限。

三、创建Vue组件实现对话功能

在Vue项目的 src/components 目录下，创建一个名为 OpenAIDialogue.vue 的组件文件，以下是具体的代码实现：

<template>
  <div class="dialogue-container">
    <h2>与OpenAI对话</h2>
    <div class="chat-history">
      <div
        v-for="(message, index) in conversationHistory"
        :key="index"
        class="message"
        :class="message.role === 'user'? 'user-message' : 'ai-message'"
      >
        <span class="message-role">{{ message.role }}</span>
        <span class="message-content">{{ message.content }}</span>
      </div>
    </div>
    <div class="input-container">
      <input
        v-model="userInput"
        placeholder="输入你的问题"
        class="input-field"
      />
      <button @click="sendMessage" class="send-button">发送</button>
    </div>
  </div>
</template>
 
<script>
import axios from 'axios';
export default {
  data() {
    return {
      userInput: '',
      conversationHistory: [], // 存储对话历史
    };
  },
  methods: {
    async sendMessage() {
      if (this.userInput.trim() === '') {
        return; // 如果输入为空，不发送请求
      }
      try {
        const apiKey = 'YOUR_API_KEY'; // 替换为你实际的OpenAI API Key
        const userMessage = { role: 'user', content: this.userInput };
        this.conversationHistory.push(userMessage);
 
        const response = await axios.post(
          'https://api.openai.com/v1/chat/completions',
          {
            model: 'gpt-3.5-turbo',
            messages: this.conversationHistory,
          },
          {
            headers: {
              'Authorization': `Bearer ${apiKey}`,
              'Content-Type': 'application/json',
            },
          }
        );
 
        const aiMessage = {
          role: 'assistant',
          content: response.data.choices[0].message.content,
        };
        this.conversationHistory.push(aiMessage);
        this.userInput = ''; // 清空输入框
      } catch (error) {
        console.error(error);
        const errorMessage = {
          role: 'system',
          content: '请求出现错误，请稍后再试',
        };
        this.conversationHistory.push(errorMessage);
      }
    },
  },
};
</script>
 
<style scoped>
.dialogue-container {
  width: 500px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
 
.chat-history {
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 10px;
}
 
.message {
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 5px;
}
 
.user-message {
  background-color: #e6f7ff;
  align-self: flex-end;
}
 
.ai-message {
  background-color: #f0f9ff;
  align-self: flex-start;
}
 
.message-role {
  font-weight: bold;
  margin-right: 5px;
}
 
.input-container {
  display: flex;
  align-items: center;
}
 
.input-field {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
 
.send-button {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}
</style>复制

在上述组件代码中：

模板（template）部分：

• 整体构建了一个对话的界面布局，包含对话历史展示区域和输入框与发送按钮的操作区域。
• 通过 v-for 指令循环遍历 conversationHistory 数组来展示每一条对话消息，根据消息的 role（角色，如 user 代表用户消息、assistant 代表OpenAI回复消息）来应用不同的样式，区分用户和OpenAI的消息显示。

脚本（script）部分：

• 数据定义：
  • userInput 用于双向绑定输入框中的用户输入内容，初始为空字符串。
  • conversationHistory 数组用来存储整个对话过程中的消息记录，每条消息都是包含 role（角色）和 content（内容）的对象。
• sendMessage 方法（核心交互逻辑）：
  • 首先判断用户输入是否为空，为空则直接返回不进行后续操作。
  • 然后将用户输入的内容封装成包含 role 为 user 的消息对象，并添加到 conversationHistory 数组中，代表这一轮用户发送的消息。
  • 使用 axios 向OpenAI的API发送POST请求，请求地址是 https://api.openai.com/v1/chat/completions，请求体中指定使用 gpt-3.5-turbo 模型以及传递当前的 conversationHistory 数组作为对话上下文。同时在请求头中配置好授权信息（API Key）和请求内容类型。
  • 当请求成功后，从返回的数据中提取OpenAI的回复内容，封装成 role 为 assistant 的消息对象，添加到 conversationHistory 数组中，代表OpenAI的回复。最后清空用户输入框的内容，方便下一轮输入。
  • 若请求出现错误，会将包含错误提示内容的消息对象（role 为 system）添加到 conversationHistory 数组中，并在控制台打印错误信息，方便排查问题。

样式（style）部分：

• 定义了一系列的样式规则，用于美化对话界面，如设置对话容器的大小、边框、圆角等，区分用户消息和OpenAI消息的背景颜色，以及对输入框、发送按钮等元素的样式设定，使整个对话界面更加清晰、美观，易于查看和操作。

四、在Vue应用中使用该组件

在 src/App.vue 文件中引入并使用 OpenAIDialogue.vue 组件，示例代码如下：

<template>
  <div id="app">
    <OpenAIDialogue />
  </div>
</template>
 
<script>
import OpenAIDialogue from './components/OpenAIDialogue.vue';
export default {
  components: {
    OpenAIDialogue,
  },
};
</script>
 
<style>
/* 可添加全局样式 */
</style>复制

通过以上步骤，运行Vue项目后，就可以在页面上输入问题并发送给OpenAI，同时查看OpenAI的回复，实现与OpenAI的对话功能，并且对话历史会实时展示在界面上，方便用户查看整个对话过程。你还可以根据实际需求进一步扩展和优化功能，比如添加多语言支持、对话记录保存等功能。