Langchain-Chatchat支持富文本输出：答案包含链接、图片等元素

Langchain-Chatchat 支持富文本输出：答案包含链接、图片等元素

在企业知识管理日益智能化的今天，一个常见的痛点浮出水面：员工查阅技术文档时，面对冗长的文字说明，常常难以快速理解操作流程。比如，当新人询问“如何配置系统登录验证码？”时，传统的问答机器人只能返回一段文字描述：“进入安全设置页，勾选启用验证码……”——可用户真正需要的，是一张清晰的界面截图，加上带跳转的指引链接。

正是这类现实需求推动了本地知识库问答系统的进化。以Langchain-Chatchat为代表的开源项目，不再满足于“有问有答”，而是追求“所见即所得”的交互体验——让答案不仅能说清步骤，还能直接展示图片、嵌入链接、呈现代码块。这种富文本输出能力，正悄然改变企业内部知识服务的形态。

这套系统的核心逻辑并不复杂：它本质上是一个基于大语言模型（LLM）的检索增强生成（RAG）架构，但通过精巧的设计，在安全性与表达力之间找到了平衡点。我们不妨从底层开始拆解。

LangChain 框架为整个体系提供了骨架。它的核心理念是“链式思维”——将复杂的任务分解为可组合的模块。在一个典型的本地知识库问答场景中，流程如下：

1. 用户提问；
2. 系统从私有文档（如PDF手册）中提取相关内容；
3. 使用嵌入模型将文本转化为向量；
4. 在 FAISS 或 Chroma 这类向量数据库中进行语义匹配；
5. 将最相关的片段作为上下文送入 LLM；
6. 模型结合上下文生成最终回答。

这个过程看似标准，但关键在于控制输出格式。LangChain 的灵活性体现在它可以轻松替换 LLM、嵌入模型或向量库，而更重要的是，它允许开发者通过PromptTemplate精确引导模型行为。例如：

from langchain.prompts import PromptTemplate rich_prompt_template = """ 你是一个智能助手，请根据以下上下文回答问题。 如果答案涉及操作步骤，请尽量使用列表或代码块形式呈现； 如果有参考资料，请附上链接； 如有必要，可用 ![](url) 形式插入图片引用。 上下文: {context} 问题: {question} 请确保输出为Markdown格式。 """ PROMPT = PromptTemplate(template=rich_prompt_template, input_variables=["context", "question"])

这段提示词就像一道“指令模板”，明确告诉模型：“你要输出 Markdown。” 而之所以能这么做，是因为现代大模型在训练过程中接触过大量结构化文本（如 GitHub 上的 README 文件），已经具备了生成规范标记的能力。只要稍加引导，它们就能自然地写出[点击此处访问官网](https://example.com)或者python\nprint("Hello")\n这样的内容。

但这只是第一步。模型输出的是带有标记的字符串，真正的“可视化”发生在前端。这就引出了 Chatchat 的独特价值。

Chatchat 原名 Langchain-ChatGLM，如今已发展为支持多款国产大模型（如 Qwen、Baichuan）的通用平台。它最大的优势在于“开箱即用”——不仅后端集成了完整的文档处理流水线，前端也构建了一套成熟的交互界面。当你上传一份产品手册，系统会自动完成加载、分段、向量化和存储全过程；而在查询时，则能通过 RESTful API 返回结构化响应。

而实现图文混排的关键，就在于前后端对资源路径的协同设计。假设你在知识库文档中提到“图3-1 登录界面”，并在系统中预设了静态资源映射规则（如/static/manual_v2/fig3_1.png），那么只需在 Prompt 中提示模型引用该路径，它就可能生成：

首次登录需完成以下步骤： 1. 访问 [登录页面](https://intranet.example.com/login) 2. 输入用户名密码 3. 查看验证码（如下图）： ![](https://intranet.example.com/static/manual_v2/fig3_1.png)

后端将这一字符串原样返回给前端，由 Vue 驱动的 UI 层调用marked.js或markdown-it解析成 HTML。此时，[]()变成可点击链接，![]()渲染为<img>标签，最终呈现出图文并茂的效果。

不过，开放渲染能力也带来了安全风险。毕竟，不是所有 Markdown 都是良性的。试想，如果模型被诱导输出<script>alert('XSS')</script>，而前端不加过滤地执行，后果不堪设想。因此，Chatchat 的前端实现必须引入双重防护机制。

import { marked } from 'marked'; import DOMPurify from 'dompurify'; // 设置图片白名单域名 const allowedImageDomains = ['localhost', 'intranet.example.com']; marked.use({ renderer: { image(href, title, text) { try { const url = new URL(href); if (!allowedImageDomains.includes(url.hostname)) { return `<span class="blocked-img">[禁止加载的图片: ${href}]</span>`; } return `<img src="${href}" alt="${text}" title="${title}" style="max-width:100%;">`; } catch (e) { return `<span class="invalid-url">[无效图片链接]</span>`; } } } }); function renderMarkdown(mdText) { const rawHtml = marked.parse(mdText); const cleanHtml = DOMPurify.sanitize(rawHtml); // 净化HTML return cleanHtml; }

这里有两个关键点：一是重写image渲染器，限制图片来源仅限于内网可信域；二是使用DOMPurify对生成的 HTML 进行消毒处理，剔除潜在的脚本标签。这样一来，即便模型意外输出恶意内容，也不会造成实际危害。

当然，工程实践中还有更多细节值得推敲。比如，图片太大怎么办？可以启用懒加载或压缩策略；输出太长导致卡顿？应设置最大 token 数并做截断处理；中文检索不准？建议选用专为多语言优化的嵌入模型（如paraphrase-multilingual-MiniLM-L12-v2）来提升语义匹配精度。

再进一步看整体架构，Langchain-Chatchat 实际上形成了四层协同结构：

• 数据层：存放原始文档与向量索引；
• 服务层：涵盖文档解析、向量化、检索与推理；
• 应用层：提供 Flask/FastAPI 接口与 Vue 前端；
• 展示层：浏览器完成最终的富媒体渲染。

各层之间通过标准化接口通信，既保证了解耦性，也为后续扩展留足空间。例如，未来若接入多模态模型，完全可以在现有框架下新增“图像理解”模块，实现“上传一张报错截图，自动识别问题并给出解决方案”的逆向交互。

目前，这类系统已在多个领域展现出实用价值。在企业 IT 支持中心，客服人员可以通过问答直接推送带图解的故障排查指南，大幅降低沟通成本；在教育培训场景，讲师能快速生成包含公式、图表和实验步骤的教学材料；甚至在医疗信息辅助系统中，也能在保护隐私的前提下，为医生提供图文结合的病历解读参考。

更值得关注的是其部署模式带来的合规优势。由于所有处理均在本地完成，敏感数据无需上传云端，彻底规避了数据泄露风险。这一点对于金融、政务、制造业等高监管行业尤为关键。相比那些依赖公有云 API 的方案，Langchain-Chatchat 提供了一个真正“可控”的替代选择。

但也要清醒认识到，富文本输出并非万能。它的前提是知识库中已有结构化的资源引用信息。如果原始文档没有标注图片名称或缺少有效链接，模型很容易“幻觉”出虚构的 URL。因此，在构建知识库初期，就有必要建立统一的资源管理规范——比如规定所有图片按KBID-FIG001.png命名，并集中存放在/static/kb_images/目录下。

此外，性能优化也不容忽视。频繁的向量检索和大模型推理本身就有延迟，若再加上大量图片加载，用户体验可能打折扣。合理的做法是引入缓存机制：对高频查询的结果进行短期缓存，避免重复计算；同时对静态资源启用 CDN 或本地代理加速。

回过头来看，Langchain-Chatchat 的意义不仅在于技术实现本身，更在于它代表了一种趋势——智能问答正在从“能答”走向“好用”。过去我们关心的是模型能否准确理解问题，现在则更关注答案是否易于消化、是否能真正解决问题。

未来的方向也很清晰：随着多模态模型的发展，系统有望实现“看图说话”式的双向交互。用户上传一张设备面板照片，系统不仅能识别按钮位置，还能结合知识库说明每个功能的作用。那时，富文本将不再是单向输出，而成为人机协作的信息桥梁。

这种高度集成的设计思路，正引领着企业级智能助手向更可靠、更高效的方向演进。