接入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
        }
      }
    })

效果对比:

相关推荐
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖7 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖7 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121388 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴8 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript