mirror of
https://github.com/labring/FastGPT.git
synced 2025-10-20 10:45:52 +00:00
New document (#5299)
* add new doc (#5175) Co-authored-by: dreamer6680 <146868355@qq.com> * Test docs (#5235) * fix: change the page of doc * chore: add new dependencies, update global styles/layout, optimize docs, add Feishu & GitHub icons, update API examples * fix: docs/index 404 not found * Update environment variable names, optimize styles, add new API routes, fix component styles, adjust documentation, and update GitHub and Feishu icons * update readme * feat: add a linkfastgpt compontent * feat: update new doc * fix:remove unuse page and redirect homepage to docs (#5288) * fix：remove some unuse doc * fix: redirect homepage to doc * git ignore * fix:navbar to index (#5295) * sidbar * fix: navtab unlight (#5298) * doc --------- Co-authored-by: dreamer6680 <1468683855@qq.com> Co-authored-by: dreamer6680 <146868355@qq.com>
This commit is contained in:
Archer
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: 对话框与HTML渲染
|
||||
description: 如何在FastGPT中通过Markdown嵌入HTML代码块，并提供全屏、源代码切换等交互功能
|
||||
---
|
||||
|
||||
| 源码模式 | 预览模式 | 全屏模式 |
|
||||
| --- | --- | --- |
|
||||
|  |  |  |
|
||||
|
||||
|
||||
### 1. **设计背景**
|
||||
|
||||
尽管Markdown本身支持嵌入HTML标签，但由于安全问题，许多平台和环境对HTML的渲染进行了限制，特别是在渲染动态内容、交互式元素以及外部资源时。这些限制大大降低了用户在撰写和展示复杂文档时的灵活性，尤其是当需要嵌入外部HTML内容时。为了应对这一问题，我们通过使用 `iframe` 来嵌入和渲染HTML内容，并结合 `sandbox` 属性，保障了外部HTML的安全渲染。
|
||||
|
||||
### 2. 功能简介
|
||||
|
||||
该功能模块的主要目的是扩展FastGPT在Markdown渲染中的能力，支持嵌入和渲染HTML内容。由于是利用 Iframe 渲染，所以无法确认内容的高度，FastGPT 中会给 Iframe 设置一个固定高度来进行渲染。并且不支持 HTML 中执行 js 脚本。
|
||||
|
||||
### 3. 技术实现
|
||||
|
||||
本模块通过以下方式实现了HTML渲染和互动功能：
|
||||
|
||||
- **组件设计**：该模块通过渲染 `iframe` 类型的代码块展示HTML内容。使用自定义的 `IframeBlock` 组件，结合 `sandbox` 属性来保障嵌入内容的安全性。`sandbox` 限制了外部HTML中的行为，如禁用脚本执行、限制表单提交等，确保HTML内容的安全性。通过辅助函数与渲染Markdown内容的部分结合，处理 `iframe` 嵌入的HTML内容。
|
||||
- **安全机制**：通过 `iframe` 的 `sandbox` 属性和 `referrerPolicy` 来防止潜在的安全风险。`sandbox` 属性提供了细粒度的控制，允许特定的功能（如脚本、表单、弹出窗口等）在受限的环境中执行，以确保渲染的HTML内容不会对系统造成威胁。
|
||||
- **展示与互动功能**：用户可以通过不同的展示模式（如全屏、预览、源代码模式）自由切换，以便更灵活地查看和控制嵌入的HTML内容。嵌入的 `iframe` 自适应父容器的宽度，同时保证 `iframe`嵌入的内容能够适当显示。
|
||||
|
||||
### 4. 如何使用
|
||||
|
||||
你只需要通过 Markdown 代码块格式，并标记语言为 `html` 即可。例如：
|
||||
|
||||
```md
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>欢迎使用FastGPT</title>
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#home">首页</a></li>
|
||||
<li><a href="#about">关于我们</a></li>
|
||||
<li><a href="#contact">联系我们</a></li>
|
||||
<li><a href="#gallery">图库</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "对话框",
|
||||
"description": "对话框组件，支持多种交互方式，提升用户在应用中的交互体验。",
|
||||
"pages": ["htmlRendering","quoteList"]
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
title: 知识库引用分块阅读器
|
||||
description: FastGPT 分块阅读器功能介绍
|
||||
---
|
||||
在企业 AI 应用落地过程中，文档知识引用的精确性和透明度一直是用户关注的焦点。FastGPT 4.9.1 版本带来的知识库分块阅读器，巧妙解决了这一痛点，让 AI 引用不再是"黑盒"。
|
||||
|
||||
# 为什么需要分块阅读器？
|
||||
|
||||
传统的 AI 对话中，当模型引用企业知识库内容时，用户往往只能看到被引用的片段，无法获取完整语境，这给内容验证和深入理解带来了挑战。分块阅读器的出现，让用户可以在对话中直接查看引用内容的完整文档，并精确定位到引用位置，实现了引用的"可解释性"。
|
||||
|
||||
## 传统引用体验的局限
|
||||
|
||||
以往在知识库中上传文稿后，当我们在工作流中输入问题时，传统的引用方式只会展示引用到的分块，无法确认分块在文章中的上下文：
|
||||
|
||||
| 问题 | 引用 |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|
||||
## FastGPT 分块阅读器：精准定位，无缝阅读
|
||||
|
||||
而在 FastGPT 全新的分块式阅读器中，同样的知识库内容和问题，呈现方式发生了质的飞跃
|
||||
|
||||
|
||||
|
||||
当 AI 引用知识库内容时，用户只需点击引用链接，即可打开一个浮窗，呈现完整的原文内容，并通过醒目的高亮标记精确显示引用的文本片段。这既保证了回答的可溯源性，又提供了便捷的原文查阅体验。
|
||||
|
||||
# 核心功能
|
||||
|
||||
## 全文展示与定位
|
||||
|
||||
"分块阅读器" 让用户能直观查看AI回答引用的知识来源。
|
||||
|
||||
在对话界面中，当 AI 引用了知识库内容，系统会在回复下方展示出处信息。用户只需点击这些引用链接，即可打开一个优雅的浮窗，呈现完整的原文内容，并通过醒目的高亮标记精确显示 AI 引用的文本片段。
|
||||
|
||||
这一设计既保证了回答的可溯源性，又提供了便捷的原文查阅体验，让用户能轻松验证AI回答的准确性和相关上下文。
|
||||
|
||||
|
||||
|
||||
|
||||
## 便捷引用导航
|
||||
|
||||
分块阅读器右上角设计了简洁实用的导航控制，用户可以通过这对按钮轻松在多个引用间切换浏览。导航区还直观显示当前查看的引用序号及总引用数量（如 "7/10"），帮助用户随时了解浏览进度和引用内容的整体规模。
|
||||
|
||||
|
||||
|
||||
## 引用质量评分
|
||||
|
||||
每条引用内容旁边都配有智能评分标签，直观展示该引用在所有知识片段中的相关性排名。用户只需将鼠标悬停在评分标签上，即可查看完整的评分详情，了解这段引用内容为何被AI选中以及其相关性的具体构成。
|
||||
|
||||
|
||||
|
||||
|
||||
## 文档内容一键导出
|
||||
|
||||
分块阅读器贴心配备了内容导出功能，让有效信息不再流失。只要用户拥有相应知识库的阅读权限，便可通过简单点击将引用涉及的全文直接保存到本地设备。
|
||||
|
||||
|
||||
|
||||
# 进阶特性
|
||||
|
||||
## 灵活的可见度控制
|
||||
|
||||
FastGPT提供灵活的引用可见度设置，让知识共享既开放又安全。以免登录链接为例，管理员可精确控制外部访问者能看到的信息范围。
|
||||
|
||||
当设置为"仅引用内容可见"时，外部用户点击引用链接将只能查看 AI 引用的特定文本片段，而非完整原文档。如图所示，分块阅读器此时智能调整显示模式，仅呈现相关引用内容。
|
||||
|
||||
| | |
|
||||
| --- | --- |
|
||||
|  |  |
|
||||
|
||||
## 即时标注优化
|
||||
|
||||
在浏览过程中，授权用户可以直接对引用内容进行即时标注和修正，系统会智能处理这些更新而不打断当前的对话体验。所有修改过的内容会通过醒目的"已更新"标签清晰标识，既保证了引用的准确性，又维持了对话历史的完整性。
|
||||
|
||||
这一无缝的知识优化流程特别适合团队协作场景，让知识库能在实际使用过程中持续进化，确保AI回答始终基于最新、最准确的信息源。
|
||||
|
||||
## 智能文档性能优化
|
||||
|
||||
面对现实业务中可能包含成千上万分块的超长文档，FastGPT采用了先进的性能优化策略，确保分块阅读器始终保持流畅响应。
|
||||
|
||||
系统根据引用相关性排序和数据库索引进行智能加载管理，实现了"按需渲染"机制——根据索引排序和数据库 id，只有当用户实际需要查看的内容才会被加载到内存中。这意味着无论是快速跳转到特定引用，还是自然滚动浏览文档，都能获得丝滑的用户体验，不会因为文档体积庞大而出现卡顿或延迟。
|
||||
|
||||
这一技术优化使FastGPT能够轻松应对企业级的大规模知识库场景，让即使是包含海量信息的专业文档也能高效展示和查阅。
|
||||
|
||||
Reference in New Issue
Block a user