当前位置：首页 > news >正文

vue3 项目如何接入 AI 大模型

news 来源：原创 2025/5/15 16:00:19

以下是在Vue 3项目中接入AI大模型的一般步骤：

准备工作

确定要接入的AI模型，如OpenAI的gpt-3.5-turbo、科大讯飞的星火大模型等。选择AI模型及获取API密钥：

注册对应AI平台的账号，进入账户设置页面找到“View API Keys”或类似选项，创建属于自己的API密钥，并妥善保存。

创建Vue项目并安装依赖

打开命令行，使用vue create 项目名命令创建一个新的Vue项目，按照提示完成项目创建后，进入项目目录。如果不清楚如何创建Vue项目可以参考如何快速创建一个 vue3 项目？
安装依赖：安装axios等必要的依赖库，用于向AI的API发送HTTP请求，执行npm install axios命令。

创建Vue组件实现对话功能

创建对话组件：在src/components目录下，创建一个如Chat.vue的组件文件，用于实现对话功能。在该组件中，使用定义页面结构，如输入框、发送按钮、消息展示区域等。
在<script>中，使用setup函数或export default定义组件的逻辑。例如，定义一个message数据模型用于绑定输入框，创建sendMessage方法处理发送消息的逻辑，包括将用户输入的消息发送到后端API，并接收AI的回复。

具体实现

这里我以百度的文心一言为示例，说明一下具体的实现方法：

注册账户，获取自己的token
注册百度智能云
编写前端交互界面
调用接口，实现问答

这里我只是简单做了一个示例，样式比较简陋。如果需要实现其他功能，调用对应的接口就好。
在这里插入图片描述

<template>
  <div class="ai-assistant">
    <div class="chat-history">
      <div v-for="(message, index) in chatMessages" :key="index" class="message">
        <span :class="{ 'user-message': message.sender === 'user', 'assistant-message': message.sender === 'assistant' }">
          {{ message.text }}
        </span>
      </div>
      <!-- 显示加载状态 -->
      <div v-if="isLoading" class="loading">正在加载...</div>
    </div>
    <div class="input-container">
      <input v-model="userInput" @keyup.enter="sendMessage" placeholder="输入你的问题..." />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import callVolcengineApi from '@/api/volcengineApi';

// 初始化聊天消息数组
const chatMessages = ref<{ sender: 'user' | 'assistant'; text: string }[]>([]);
// 绑定用户输入框的值
const userInput = ref('');
// 加载状态
const isLoading = ref(false);

// 发送消息的函数
const sendMessage = async () => {
  if (userInput.value.trim() === '') return;

  // 添加用户消息到聊天历史
  chatMessages.value.push({ sender: 'user', text: userInput.value });
  // 清空输入框
  userInput.value = '';
  // 开始加载
  isLoading.value = true;

  try {
    const response = await callVolcengineApi(chatMessages.value[chatMessages.value.length - 1].text);
    console.log(response, 'response');
    
    if (response) {
      // 添加大模型的回复到聊天历史
      chatMessages.value.push({ sender: 'assistant', text: response.result });
    }
  } catch (error) {
    console.error('请求大模型时出错:', error);
    chatMessages.value.push({ sender: 'assistant', text: '抱歉，出现了一些问题，请稍后再试。' });
  } finally {
    // 结束加载
    isLoading.value = false;
  }
};
</script>

<style scoped>
.ai-assistant {
  display: flex;
  flex-direction: column;
  height: 500px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.chat-history {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.message {
  margin-bottom: 10px;
}

.user-message {
  background-color: #e0f7fa;
  padding: 8px;
  border-radius: 5px;
  align-self: flex-end;
  max-width: 70%;
}

.assistant-message {
  background-color: #f1f8e9;
  padding: 8px;
  border-radius: 5px;
  align-self: flex-start;
  max-width: 70%;
}

.loading {
  color: gray;
  font-style: italic;
  text-align: center;
  margin-top: 10px;
}

.input-container {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ccc;
}

.input-container input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.input-container button {
  padding: 8px 15px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.input-container button:hover {
  background-color: #1976d2;
}
</style>

我已经把这个示例，放在了 gitcode，有需要的同学自己可以去看详细的代码。
详细代码