vue实现大语言模型返回的数据将代码高亮显示的实现

0. 引言

最近在学习ai大模型相关的东西,就想着自己做一个类似于chatGPT的网站,做到最后的时候代码块始终是不能高亮显示,以前一直搞Java没太了解过前端vue相关的东西,经过自己查资料,自己慢慢也是研究出来了。
这个项目整体前段是vue3,后端是python,ollama,chatOpenAi,langchain,第三方的大模型API。
ollama部署模型在本地,chatOpenAi调用模型,langchain用来做提示词和聊天记录保存支持上下文对话。
题外:项目已经部署了,想体验的可以私信我。

 1.导入配置

  其他无关的依赖省略 

"dependencies": {"@traptitech/markdown-it-katex": "^3.6.0","github-markdown-css": "^5.5.1","highlight.js": "^9.18.5","markdown-it": "^14.1.0"},"devDependencies": {"@types/markdown-it": "^14.1.1",}

 2.依赖的下载命令

npm i markdown-itnpm i @traptitech/markdown-it-katexnpm i -D @types/markdown-itnpm i highlight.js

3.项目中引入 

import MarkdownIt from 'markdown-it'
import mdKatex from '@traptitech/markdown-it-katex'
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';

在引入import hljs from 'highlight.js';可能会报一个提示,在项目srm中新建一个.d.ts结尾的文件,写入以下内容
 

declare module '*.vue'{

    import Vue from 'vue'

    export default Vue

}


 

declare module 'highlight.js'

4.我的vue

4.1页面显示 

<div><divv-html="changeItem(item)"class="message"style="margin: 1rem"></div>
</div>

4.2定义一个数据来接受用户输入和大模型响应的数据,用户输入的时候就往数组里push就可以了。

const contentdata = reactive([]);

4.3发请求获取数据
用的是SSE(Server-Sent Events)来实时获取响应流中的数据。

fetch(url, {method: "POST",signal: controller.signal,body: formData,}).then((response) => {loadFlg.value = false;if (response.status === 200) {const reader = response.body.getReader();let accumulatedText = ""; // 用于累积未完成的数据function read() {reader.read().then(({ done, value }) => {if (done) {icType.value = Top;return;}// 解码接收到的数据const text = new TextDecoder().decode(value);accumulatedText += text;// 按换行符分割数据块let lines = accumulatedText.split("\n");// 保留未完成的一行accumulatedText = lines.pop();lines.forEach((line) => {if (line.trim()) {// 确保非空行if (line === "[END]") {icType.value = Top;return;}// 移除前缀 'data: 'if (line.startsWith("data: ")) {line = line.substring(6);}try {const data = JSON.parse(line);const content = data.content;// 直接使用 content,因为 content 已经是一个字符串contentdata[contentdata.length - 1].ai += content;div.scrollTop = div.scrollHeight;} catch (error) {console.error("JSON parse error:",error);}}});// 继续读取下一个数据块read();}).catch((error) => {icType.value = Top;console.error("Read error:", error);});}// 开始读取数据read();} else {contentdata[contentdata.length - 1].ai ="非法请求,请刷新页面或关闭页面再次打开。";icType.value = Top;alIsShow.value = true;}}).catch((error) => {icType.value = Top;console.error("Fetch error:", error);});

主要的代码其实就是下面这个,将获取到的数据解析出来显示在页面上。

contentdata[contentdata.length - 1].ai += content;

5.使用MarkdownIt 

const mdi = new MarkdownIt({linkify: true,highlight(code, language) {const validLang = !!(language && hljs.getLanguage(language))if (validLang) {const lang = language ?? ''return highlightBlock(hljs.highlight(lang, code, true).value, lang)}return highlightBlock(hljs.highlightAuto(code).value, '')}
})
mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })function highlightBlock(str, lang) {lang = lang || "text";return `<pre class="pre-code-box"><div class="pre-code-header" style = "background-color: #50505a;padding: 0.2rem;padding-left: 1rem;color: white;font-size: 1rem;border-top-left-radius: 10px;border-top-right-radius: 10px;"><span class="code-block-header__lang">${lang}</span></div><div class="pre-code"><code class="hljs code-block-body ${lang}" style="padding:1.5rem; font-size: 1.05rem;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;" >${str}</code></div></pre>`
}// 把数组最后一项的ai属性的值转换成html
const changeItem = (item) => {return mdi.render(item.ai)
};

 6.效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/24016.shtml

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

相关文章

android原生TabLayout之自定义指示器效果

“com.google.android.material.tabs.TabLayout” 这个玩意说起来大家都不陌生。结合viewPager或者单独使用。场景非常多。当然市面上的三方也数不胜数。但是毕竟是亲儿子。用起来终归是顺手一些。下面说一下TabLayout的具体用法细节&#xff1a; 首先&#xff0c;xml布局引入…

RFID模块板子JY-LD6900通用自由口协议通信说明

RFID模块板子JY-LD6900是健永科技基于RFID无线射频识别技术推出的一款低频读卡模块&#xff0c;体积小巧&#xff0c;性能优越&#xff0c;读卡时间小于30ms&#xff0c;识别速度达2m/s&#xff0c;配套62mm直径圆形天线&#xff0c;读卡距离可达20cm以上。支持双频134.2kHz、1…

分享:618学习狂欢节活动来啦——大数据培训班

618狂欢学习节 限时优惠大放送 活动时间&#xff1a;6月1日—6月18日

商淘云电商分账系统如何为企业降低连锁财务成本

当今激烈的市场竞争中&#xff0c;连锁品牌企业面临着多样化的挑战&#xff0c;其中财务管理尤为关键。商淘云连锁收银系统作为一款专为连锁品牌量身定制的解决方案&#xff0c;不仅可以帮助企业实现总部入账管控财务、银行结算规范财务的目标&#xff0c;还能通过分账系统优化…

进口氮封阀的性能-美国品牌

进口氮封阀以其优良的性能、紧凑的结构、精确的调节、可靠的安全性和广泛的应用范围&#xff0c;在多个行业中发挥着重要作用。进口氮封阀的性能可以从以下几个方面进行归纳和总结&#xff1a; 材质与耐用性&#xff1a; 进口氮封阀通常采用高品质的材料制造&#xff0c;如不锈…

前端判断数据类型的方法有哪些?

1、typeof &#xff08;1&#xff09;返回&#xff1a;一个值的数据类型的字符串 &#xff08;2&#xff09;可以判断&#xff1a;一个值的数据类型是 string、number、boolean、object、function 等 &#xff08;3&#xff09;无法判断&#xff1a;对于复杂数据类型就不起作…

什么是SIEM

SIEM 解决方案是一种企业级应用程序&#xff0c;可集中和自动化与网络安全相关的操作&#xff0c;该工具通过收集、分析和关联从组织 IT 基础设施中的各种实体聚合的网络事件来帮助应对网络威胁。 与帮助监控和评估组织物理空间中的危险的监视控制台相比&#xff0c;SIEM解决方…

【漏扫工具】Afrog V3.0.6一款漏洞扫描神器

简介 [Afrog]是一款高性能的漏洞扫描器&#xff0c;快速稳定。它支持用户自定义的 PoC&#xff0c;并内置了多种类型&#xff0c;例如 CVE、CNVD、默认密码、信息泄露、指纹识别、未经授权的访问、任意文件读取和命令执行。借助 afrog&#xff0c;网络安全专业人员可以快速验证…

从一道题看利用sqlite打jdbc达到RCE

前言 从今年国赛的一道java题遇到了sqlite数据库去打jdbc达到RCE的姿势&#xff0c;故笔者写篇文章记下 复现 反编译源代码可以看见这三个数据库 这里提供了mysql sqlite psql 但mysql和psql都不行 这里我们用sqlite去打 jdbc就可以执行load_extension() CVE-2023-32697&#…

Jira的原理及应用详解(二)

本系列文章简介: 在当今快速发展的软件开发和项目管理领域,有效的团队协作和精确的项目进度追踪是确保项目成功的关键。Jira作为一款广受欢迎的项目和问题追踪工具,以其强大的功能、灵活的定制性以及卓越的用户体验,赢得了全球众多企业的青睐。 Jira最初由Atlassian公司开发…

numpy 函数库 分类整理概览

numpy 函数库 分类整理概览 数组创建和转换 abs, absolute, arange, array, asanyarray, asarray, ascontiguousarray, asfarray, asfortranarray, atleast_1d, atleast_2d, atleast_3d, empty, empty_like, eye, full, full_like, from_dlpack, frombuffer, fromfile, fromf…

机关事业单位需要进行等保测评吗?一年要几次?

机关事业单位需要进行等保测评吗&#xff1f;一年要几次&#xff1f; 【回答】&#xff1a;根据规定&#xff0c;机关事业单位应当自行或者委托具有相应资质的第三方网络安全服务机构&#xff0c;对互联网政务应用网络和数据安全每年至少进行一次安全检测评估。机关事业单位每…

重磅就业报告前美股涨势消减,标普暂别纪录高位,英伟达盘中闪崩近6%,欧央行降息预期“退烧”,欧元跳涨

标普纳指创盘中历史新高后转跌&#xff0c;道指三连涨至近两周新高&#xff1b;芯片股指和台积电美股跌落纪录高位&#xff0c;英伟达三日收创历史新高后回落&#xff1b;游戏驿站盘中一度暴拉50%。中概股指回落&#xff0c;财报后蔚来收跌6.8%。欧央行会后&#xff0c;欧元盘中…

美颜SDK与直播美颜插件:开发者指南与优化技巧

本篇文章&#xff0c;小编将详细探讨如何利用美颜SDK和直播美颜插件进行开发&#xff0c;以及在实际应用中优化这些工具的技巧。 一、美颜SDK简介 美颜SDK这些功能通过复杂的图像处理算法实现&#xff0c;SDK的存在大大简化了开发者的工作&#xff0c;使他们无需从零开始编写…

项目3:从0开始的RPC框架

一. 基本概念 区别于传统的增删改查型的业务项目&#xff0c;本项目侧重于开发框架&#xff0c;并且涉及架构方面的技术知识点。 1. 什么是RPC&#xff1f; 远程过程调用&#xff08;Remote Procedure Call&#xff09;&#xff0c;是一种计算机通信协议&#xff0c;它允许程…

OpenCV 4.X 使用CvxText在图片显示汉字

最近又需要在图像上实时绘制汉字。一般来讲如果绘制汉字的需求绕不过的话&#xff0c;直接绘制在图片总归是最easy的实现方式。因为不然的话可能要额外调用GUI组件来实现。一般都是用freetypecvxtext&#xff0c;老生常谈。且不说实际实现起来是否最easy&#xff0c;主要是这种…

GAT1399协议分析(10)--视频定义及解析

一、官方定义 二、字段解析 VideoID 类型BasicObjectID 解析参考GAT1399协议分析(8)--ImageInfo字段详解-CSDN博客 InfoKind 采集类型

小程序自定义marker弹出框教程

需求背景 微信小程序开发&#xff0c;需要使用腾讯地图显示自定义marker&#xff0c;并且点击marker后弹出自定义的customCallout&#xff0c;并且customCallout的内容为用户点击marker的时候再从后台接口获取数据。 百度了一圈后发现居然没有一篇文章可以一次性完成&#xf…

SSM旅游论坛(前后分离源码+论文)

该旅游论坛是基于Spring、SpringMVC、Mybatis框架开发出来的 用户信息管理 此页面提供给管理员的功能有&#xff1a;用户信息的查询管理&#xff0c;可以删除用户信息、修改用户信息、新增用户信息&#xff0c; 还进行了对用户名称的模糊查询的条件 景点信息管理 论坛类型管理…

医诊合作怎么避免减少双方损失,吸引更多的优质医疗资源下沉到基层?防漏费系统又起到什么作用?

健康领域的现代化治理要求在公共医疗卫生机构之间建立合作关系,然而我国公共医疗卫生服务领域呈现各级各类健康服务机构自由混合竞争的格局,这对公医分类分级诊疗法治秩序构成全面挑战,并成为影响转诊制度构建的重要因素.我国转诊制度的建设应以维护诊疗合作的法律秩序为前提,并…