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

vue3怎么和大模型交互？

news 来源：原创 2025/5/18 7:18:27

引言

平时我们都是用的在线的AI工具，直接输入问题，然后AI回答我们，那么怎么把AI接入项目中呢？

这个问题问得好。

方案一：引入第三方已封装好的UI库
方案二：自己写

对于方案一，市面上已有一些，大家可自己搜索，类似于Ant Design X（React/Vue）等，今天主讲方案二。

封装

本组件示例仅提供交互思路，样式啥的自己封装。

先看下效果图
请添加图片描述

可以看到，我们输入了一个问题，然后AI就会不断地给我们推送消息，消息是流式的stream，我们要做的就是把这些流式消息不断地渲染在页面上。

如果等返回后只渲染一次，那么用户等待时间太长了，体验感不好，你懂得~

由于返回的内容是markdown格式的，所以我们还要引入markdown-it组件来美化显示。

pnpm add markdown-it

还要安装openai来请求

pnpm add openai

完整的组件在最下方，大家可以可以自己填入大模型的API地址和KEY值

但是这样做会有风险，那就是API地址和KEY值容易泄露，所以最好还是封装在后端，改为直接请求后端API地址

请添加图片描述

同时你还可以给系统设定角色，可以这样写（role: ‘system’,是角色参数，需要放在第一位）：

const stream = await client.chat.completions.create({
  model: MODEL_NAME,
  messages: [
    {
      role: 'system',
      content: '你是一个经验丰富的历史老师，可以引经据典给学生讲解各种历史知识'
    },
    {
      role: 'user',
      content: inputText.value
    }
  ],
  // 设为流式
  stream: true,
});

完整组件代码如下：

<template>
  <div class="app-container">
    <input v-model="inputText" placeholder="请输入你的问题" />
    <button @click="sendMessage">发送</button>
    <div class="main-content" v-if="responseText" v-html="renderedMarkdown"></div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import MarkdownIt from 'markdown-it';

// 配置 API Key，这里可以根据实际情况进行修改
const API_KEY = '你的API key值';
const API_URL = '你的API 请求地址';
// 模型名称，如果API和KEY可以确定模型，那么这个模型不生效
const MODEL_NAME = 'qwq-32b';

// 定义输入框内容和响应文本的响应式变量
const inputText = ref('');
const responseText = ref('');

import OpenAI from "openai";
const client = new OpenAI({
  baseURL: API_URL,
  apiKey: API_KEY,
  dangerouslyAllowBrowser: true,
});

// 创建 markdown-it 实例
const md = new MarkdownIt();

// 计算属性，将 responseText 转换为 HTML
const renderedMarkdown = computed(() => {
  return md.render(responseText.value);
});

// 发送消息封装
async function sendMessage() {
  try {
    const stream = await client.chat.completions.create({
      model: MODEL_NAME,
      messages: [
        {
          role: 'user',
          content: inputText.value
        }
      ],
      // 设为流式
      stream: true,
    });

    for await (const chunk of stream) {
      console.log('chunk', chunk)
      responseText.value += chunk.choices[0]?.delta?.content || '';
    }
  } catch (error) {
    console.log('请求出错', error)
  }
}

</script>


<style scoped>
/* 可以根据需要添加样式 */
.app-container {
  padding: 20px;
}
.main-content {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 20px;
}
input {
  margin-right: 10px;
}
</style>

附Ant Design X的UI界面，确实好看些
在这里插入图片描述