接入deepSeek后,前端如何给“深度思考“内容单独设置样式?

问题描述:

SSE接口响应回来的数据是markdown格式,理论上来说markdown中是包含样式的,前端只需要将markdown转化为html响应到页面上即可,但是接入deepSeek后深度思考的内容只有文字描述没有样式,需要前端单独设置。

解决思路:

让后端在响应的数据流中加入标识,用来区分 " 思考内容 " 还是 " 回答内容 ",前端将" 思考内容 "截取出来,给 " 思考内容 " 加上html标签并添加行内样式生成字符串thinkingStr,然后将" 回答内容 "通过第三方库MarkdownIt将markdown转化为html字符串answerStr。最后将thinkingStr+answerStr=currentHTML拼接起来就生成完整且附带样式的html字符串,通过v-html将currentHTML渲染到页面即可。

实现代码:

javascript 复制代码
import MarkdownIt from "markdown-it"

const md = new MarkdownIt()

const currentHTML = computed(() => {

      // 注:contentItems是在onmessage中实时接收并拼接好的字符串
      // </sy_think>是用来区分"思考内容"和"响应内容"的标识
      // md.render是将markdown转化为html

      if (contentItems.value) {
        if (contentItems.value.includes("</sy_think>")) {
          const resArr = contentItems.value.split("</sy_think>")
          const thinkingStr= `<h4> 师爷模型深度思考中...</h4> 
                              <div style="color: gray;">${resArr[0]}</div>
                             `
          return thinkingStr+ md.render(resArr[1])
        } else {
          const thinkingStr= `<h4> 师爷模型深度思考中...</h4>
                             <div style="color: gray;">${contentItems.value}</div>
                             `
          return thinkingStr
        }
      }
    })

效果对比:

相关推荐
北海几经夏3 分钟前
React组件中的this指向问题
前端·react.js
passer98116 分钟前
列表项切换时同步到可视区域
前端
FogLetter18 分钟前
移动端适配的终极奥义:从lib-flexible到postcss-pxtorem的全方位指南
前端·postcss
易元19 分钟前
设计模式-访问者模式
前端·后端·设计模式
兵临天下api19 分钟前
Elasticsearch 查询性能优化:从 3 秒到 300ms 的 6 个核心参数调优指南
前端
子林super27 分钟前
y1新建cluster集群redis
前端
liangdabiao30 分钟前
一篇文章尽快介绍入门级智能体Agent是什么回事, Starter AI Agents 项目 来自 awesome-llm-apps
前端·后端
Pedantic1 小时前
swift 日期与时间的三个结构体
前端
南方kenny1 小时前
Mock.js:前端开发的假数据神器
前端·javascript
芹丸子1 小时前
vue cli 创建项目一直失败
前端