vue3怎么和大模型交互?

news2025/3/15 7:08:05

引言

平时我们都是用的在线的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.coloradmin.cn/o/2315311.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【网络编程】HTTP网络编程

13.1 HTTP 简介 HTTP(Hyper Text Transfer Protocol,超文本传输协议)是用于从万维网(WWW:World Wide Web) 服务器(简称Web 服务器)传输超文本到本地浏览器的传送协议&#xff0c;基于TCP/IP 通信协 议来传递数据 (HTML 文件、图片文件、查询结果等)。 13.2 HTTP 的工作原理 …

【Qt】QWidget属性介绍

&#x1f3e0;个人主页&#xff1a;Yui_ &#x1f351;操作环境&#xff1a;Qt Creator &#x1f680;所属专栏&#xff1a;Qt 文章目录 前言1. enabled属性2.geometry属性2.1 改变控件位置2.2 女神表白程序2.3 知识补充——window frame 3. windowsTitle属性4. windowIcon属性…

『Rust』Rust运行环境搭建

文章目录 rust编译工具rustupVisual Studio VS Code测试编译手动编译VSCode编译配置 参考完 rust编译工具rustup https://www.rust-lang.org/zh-CN/tools/install 换源 RUSTUP_DIST_SERVER https://rsproxy.cn RUSTUP_UPDATE_ROOT https://rsproxy.cn修改rustup和cargo的安…

vue/react/vite前端项目打包的时候加上时间最简单版本,防止后端扯皮

如果你是vite项目&#xff0c;直接写一个vite的插件&#xff0c;通过这个插件可以动态注入环境变量&#xff0c;然后当打包的时候&#xff0c;自动注入这个时间到环境变量中&#xff0c;然后在项目中App.vue中或者Main.tsx中打印出来&#xff0c;这就知道是什么时候编译的项目了…

Cadence学习笔记3

设置 PCB 层叠 初始我们有一个两层板&#xff0c;如果需要添加层叠怎么办&#xff1f; 点击进入层叠设置 首先右击 TOP 层下面的空白&#xff0c;然后鼠标右键进行 add layer 然后选择 Plane(一般层就是这个&#xff09; 就好 然后 add就行 设置光标显示形式 在 setup ->…

Linux系统下如何部署svmspro平台

上传svmspro服务 rz回车后选择svmspro.zip上传如果提示rz命令未找到&#xff0c;请先运行 yum install -y lrzsz 安装将svmspro.zip解压出来&#xff0c;并拷贝到/usr/目录下&#xff0c;命令如下&#xff1a; unzip svmspro.zip//解压程序包cp svmspro /usr/ -r//将svmspro文件…

vue3:八、登录界面实现-忘记密码

一、页面效果 二、实现 1、视图层 <el-form-item class"flex flex-between"><el-checkbox label"记住密码" v-model"remember" /> </el-form-item> 参考 Checkbox 多选框 | Element Plus 2、逻辑层 首先设置记住密码的变…

el-table树形表格合并相同的值

el-table树形表格合并相同的值 el-table树形表格合并相同的值让Ai进行优化后的代码 el-table树形表格合并相同的值 <style lang"scss" scoped> .tableBox {/deep/ &.el-table th:first-child,/deep/ &.el-table td:first-child {padding-left: 0;} } …

Apache Tomcat漏洞,对其进行升级

我们付出一些成本&#xff0c;时间的或者其他&#xff0c;最终总能收获一些什么。 升级背景&#xff1a; 近日&#xff0c;新华三盾山实验室监测到 Apache 官方修复了一个远程代码执行漏洞 (CVE-2025-24813) &#xff0c;其CVSS3 漏洞评分为 7.5 。 影响范围 9.0.0.M1 ≤…

工程实践:如何使用SU17无人机来实现室内巡检任务

阿木实验室最近发布了科研开发者版本的无人机SU17&#xff0c;该无人机上集成了四目视觉&#xff0c;三维激光雷达&#xff0c;云台吊舱&#xff0c;高算力的机载计算机&#xff0c;是一个非常合适的平台用于室内外巡检场景。同时阿木实验室维护了多个和无人机相关的开源项目。…

OSPF-3 1类LSA Router LSA

前面两期我们介绍了OSPF的邻居与邻接建立的关系及失败因素和原因 这章我们来说说OSPF是如何通过不同的LSA去描述拓扑的信息以及路由信息 一、概述 OSPF通过不同的LSA来构成LSDB链路状态数据库,再通过SPF算法来计算出最优的最短路径 二、LSA的分类 类型名称描述传播范围1类…

【清华大学第七版】DeepSeek赋能家庭教育的实操案例(批改作文+辅助语文/数学/科学学习+制定学习计划)

我用夸克网盘分享了「DeepSeek完整资料合集」&#xff0c;点击链接即可保存。打开「夸克APP」&#xff0c;无需下载在线播放视频&#xff0c;畅享原画5倍速&#xff0c;支持电视投屏。 链接&#xff1a;https://pan.quark.cn/s/621259e4af15 近日&#xff0c;清华大学发布了《…

HCIA-ACL实验

前提条件&#xff1a;实现底层互通 转发层面 1、基本ACL ①要求PC3不能访问网段192.168.2.0的网段&#xff0c;PC4和客户端能正常访问服务器 ②AR2配置 acl 2000 rule deny source 192.168.1.1 0 匹配流量 int g 0/0/0 traffic-filter inbound acl 2000 接口调用…

DeepLabv3+改进10:在主干网络中添加LSKBlock|动态调整其大型空间感受野,助力小目标识别

🔥【DeepLabv3+改进专栏!探索语义分割新高度】 🌟 你是否在为图像分割的精度与效率发愁? 📢 本专栏重磅推出: ✅ 独家改进策略:融合注意力机制、轻量化设计与多尺度优化 ✅ 即插即用模块:ASPP+升级、解码器 PS:订阅专栏提供完整代码 目录 论文简介 步骤一 步骤二…

词向量:优维大模型语义理解的深度引擎

★ 放闸溯源 优维大模型「骨架级」技术干货 第二篇 ⇓ 词向量是Transformer突破传统NLP技术瓶颈的核心&#xff0c;它通过稠密向量空间映射&#xff0c;将离散符号转化为连续语义表示。优维大模型基于词向量技术&#xff0c;构建了运维领域的“语义地图”&#xff0c;实现从…

编译原理:语法分析程序【附源码和超详细注释】

目录 一 、实验目的 二 、实验内容及步骤 三、程序分析 1. 需求分析 2. 功能分析 1. LL(1)文法功能分析 2. 算符优先文法功能分析 3. 信创分析-主要针对能力提升中国产操作系统上开发内容。 四、源代码 1. LL(1)文法代码 2. 算符优先文法 五、测试结果 1. LL(1)文…

使用Flask和OpenCV 实现树莓派与客户端的视频流传输与显示

使用 Python 和 OpenCV 实现树莓派与客户端的视频流传输与显示 在计算机视觉和物联网领域&#xff0c;经常需要将树莓派作为视频流服务器&#xff0c;通过网络将摄像头画面传输到客户端进行处理和显示。本文将详细介绍如何利用picamera2库、Flask 框架以及 OpenCV 库&#xff…

fs的proxy_media模式失效

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 在fs的使用过程中&#xff0c;某些场景只需要对rtp媒体做透传&#xff0c;又不需要任何处理。 在fs1.6的版本中&#xff0c;我们可以使用proxy_media来代理媒体的转发&#xff0c;媒体的协商由AB路端对端处理&#xff…

Linux 命名管道

文章目录 &#x1f680; 深入理解命名管道&#xff08;FIFO&#xff09;及其C实现一、命名管道核心特性1.1 &#x1f9e9; 基本概念 二、&#x1f4bb; 代码实现解析2.1 &#x1f4c1; 公共头文件&#xff08;common.hpp&#xff09;2.2 &#x1f5a5;️ 服务器端&#xff08;s…

HDU 学数数导致的

题目解析 首先&#xff0c;数对是有序的&#xff0c;<1,2>和<2,1>被视为不同的两组数字。 其次&#xff0c;数对<p,q>的p和q可以相等。 子序列为 p 0 p q&#xff0c;观察到&#xff0c;中间要出现一个0。那么&#xff0c;我们只需要找到第一个 p 满足与前…