vue3怎么和大模型交互?

引言

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

这个问题问得好。

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

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

封装

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

先看下效果图

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

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

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

bash 复制代码
pnpm add markdown-it

还要安装openai来请求

bash 复制代码
pnpm add openai

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

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


同时你还可以给系统设定角色,可以这样写(role: 'system',是角色参数,需要放在第一位):

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

这样你就可以一边学历史、一边学编程了,哈哈哈


完整组件代码如下:

vue 复制代码
<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界面,确实好看很多

相关推荐
知识分享小能手25 分钟前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf1 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊1 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel1 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260851 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
ObjectX前端实验室2 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart2 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级2 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang3 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang3 小时前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构