javascript - 大模型输出的内容如何渲染到HTML中？

Question

调用大模型采用流式方式输出内容，并且输出的内容有MD和普通的HTML格式，应该如何渲染的前端页面呢？

我是用jquery中的html()当时内容并没有按照返回的格式显示出来

Answer 1

在处理大模型输出的内容，特别是当内容包含Markdown（MD）和HTML混合格式时，并希望这些内容能够在前端HTML页面中正确渲染，你可以采用以下步骤：

1. 区分内容类型

首先，你需要确定输出内容中哪些部分是Markdown，哪些部分是纯HTML。如果后端没有明确地标记或区分这两种类型，你可能需要实现一种解析机制来区分它们。

2. Markdown转HTML

对于Markdown部分，你可以使用JavaScript库如marked或showdown来将Markdown文本转换为HTML。这些库可以很容易地集成到你的前端代码中。

示例：使用marked库

首先，你需要通过npm或CDN将marked库添加到你的项目中。

<!-- 引入marked库 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

然后，在你的JavaScript代码中，你可以这样使用marked：

// 假设你有一个包含Markdown文本的元素
var markdownText = $('#markdownContent').text(); // 假设这是你的Markdown内容

// 使用marked将Markdown转换为HTML
var htmlOutput = marked(markdownText);

// 将转换后的HTML插入到页面的某个部分
$('#outputContainer').html(htmlOutput);

3. 渲染HTML

对于已经是HTML格式的内容，你可以直接使用jQuery的.html()方法来渲染它。但是，如果你混合了Markdown和HTML，你可能需要先将Markdown转换为HTML，然后再将结果和纯HTML内容合并（如果它们不是完全独立的）。

4. 安全性考虑

在将任何从后端接收到的内容渲染到前端时，特别是当内容包含HTML时，你必须考虑到跨站脚本攻击（XSS）的风险。确保你的应用能够适当地清理或转义潜在的危险HTML标签或JavaScript代码。如果你使用的是像marked这样的库，它们通常会提供一些选项来清理HTML输出。

5. 完整示例

假设你的后端以某种方式区分了Markdown和HTML内容，并分别发送它们，你可以：

• 使用marked将Markdown转换为HTML。
• 直接使用.html()将纯HTML内容渲染到页面。
• 将两者合并后渲染到页面上。

// 假设markdownContent是Markdown文本，htmlContent是纯HTML
var markdownHtml = marked($('#markdownContent').text());
$('#htmlContentContainer').html($('#htmlContent').text()); // 渲染纯HTML
$('#combinedOutput').html(markdownHtml + $('#htmlContent').text()); // 合并渲染

注意：在合并Markdown和HTML时，请确保它们的组合在视觉上是有意义的，并且没有破坏HTML的结构。如果Markdown生成的HTML和纯HTML之间有复杂的交互，你可能需要更仔细地控制它们的渲染方式。