vue3怎么和大模型交互?

news/2025/3/18 15:56:42/
aidu_pl">

引言

平时我们都是用的在线的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界面,确实好看些
在这里插入图片描述


http://www.ppmy.cn/news/1580101.html

相关文章

矩阵的逆的实际意义及牛顿法中的作用

矩阵的逆的实际意义及牛顿法中的作用 目录 矩阵的逆的实际意义及牛顿法中的作用**一、矩阵逆的实际意义****二、牛顿法中矩阵逆的作用****三、实际应用中的挑战与改进**总结一、矩阵逆的实际意义 线性方程组求解 若 A x = b \mathbf{A}\mathbf{x} = \mathbf{b} Ax=<

《Python实战进阶》No22 Python自动化办公实战:Excel/Word/PDF文件处理全攻略

No22 Python自动化办公实战&#xff1a;Excel/Word/PDF文件处理全攻略 摘要 本文将带你掌握Python在办公自动化领域的三大核心场景&#xff1a;Excel数据处理、Word文档生成与PDF文件操作。通过实战案例&#xff0c;你将学会如何用openpyxl、pandas、python-docx、PyPDF2等工具…

Tauri + Vite + SvelteKit + TailwindCSS + DaisyUI 跨平台开发详细配置指南(Windows)

Tauri Vite SvelteKit TailwindCSS DaisyUI 跨平台开发详细配置指南&#xff08;Windows&#xff09; 本文为博主原创文章&#xff0c;遵循 CC 4.0 BY-SA 版权协议。转载请注明出处及本声明 原文链接&#xff1a;[你的文章链接] &#x1f6e0;️ 环境准备 1. 安装核心工具…

发现一个GoVCL的问题

之前用govcl写了一个服务端的界面程序&#xff0c;用来控制服务的开启和关闭。 由于这个服务程序运行的时间比较长&#xff0c;经常是挂着在服务器上24小时不间断运行。 后来经过调试发现&#xff0c;govcl的界面按钮控件&#xff0c;在程序长时间运行后&#xff0c;会出现无法…

失败的面试经历(ʘ̥∧ʘ̥)

一.面向对象的三大特性 1.封装&#xff1a;将对象内部的属性私有化&#xff0c;外部对象不能够直接访问&#xff0c;但是可以提供一些可以使外部对象操作内部属性的方法。 2.继承&#xff1a;类与类之间会有一些相似之处&#xff0c;但也会有一些异处&#xff0c;使得他们与众…

不用 Tomcat?SpringBoot 项目用啥代替?

在SpringBoot框架中&#xff0c;我们使用最多的是Tomcat&#xff0c;这是SpringBoot默认的容器技术&#xff0c;而且是内嵌式的Tomcat。 同时&#xff0c;SpringBoot也支持Undertow容器&#xff0c;我们可以很方便的用Undertow替换Tomcat&#xff0c;而Undertow的性能和内存使…

简述下npm,cnpm,yarn和pnpm的区别,以及跟在后面的-g,--save, --save-dev代表着什么

文章目录 前言一、npm&#xff0c;cnpm&#xff0c;yarn和pnpm的基本介绍和特点1.npm (Node Package Manager)2. Yarn3. cnpm (China npm)4. pnpm 二、简述npm和pnpm 的存储方式和依赖数1.存储方式2.依赖树 三、两者依赖树的差异导致结果的对比四、简单说说-g&#xff0c;--sav…

mariaDB中常见的DDL,DML,DQL语句

在 MariaDB 里&#xff0c;DDL&#xff08;数据定义语言&#xff09;、DML&#xff08;数据操作语言&#xff09;和 DQL&#xff08;数据查询语言&#xff09;是用于管理和操作数据库的重要工具&#xff0c;以下为你介绍它们常见的语句&#xff1a; DDL&#xff08;数据定义语…