LLM知识图谱构建器：前端架构如何革新数据可视化？

推荐语

探索LLM知识图谱构建器如何革新数据可视化，提升用户体验。

核心内容：
1. LLM知识图谱构建器前端架构概览
2. 现代化前端技术栈与实时数据更新技术
3. UI架构、组件与设计模式的最佳实践

杨芳贤

53A创始人/腾讯云(TVP)最具价值专家

本文将带您深入了解 LLM 知识图谱构建器工具的前端架构，揭秘其如何简化知识图谱的构建流程并提升用户体验。该工具提供了一个用户友好的界面，简化了 PDF 文件和其他 Web 资源的上传流程，并借助 LLM 生成知识图谱。它还提供了一个聊天体验，可以使用生成的知识图谱与 GraphRAG 检索器进行交互。

快速开始

LLM 知识图谱构建器的用户界面采用现代化的前端技术栈构建：使用 React 实现应用逻辑和组件，Axios 负责处理网络调用和响应。为了实现实时数据更新，我们采用了长轮询或服务器发送事件 (SSE) 技术。其中，长轮询是一种简单的机制，可以在客户端和服务器之间维持稳定的连接。其原理是，当服务器没有响应时，客户端会保持请求一段时间，并在有新信息时，定期更新客户端的状态和处理块（频率为每分钟一次）。服务器发送事件 (SSE，Server-Sent Events) 则是一种服务器主动推送实时数据更新的技术，适用于服务器循环生成数据并向客户端发送多个事件，或者需要从服务器到客户端的实时数据流的场景。CSS 设计通过基于 Neo4j 的 Needle Design System 的 Tailwind CSS 或 styled-components 实现。

React Context API 用于状态管理。用户界面引导用户完成知识图谱构建和聊天体验的每个步骤，方便不同技术水平的用户轻松使用。

UI 架构和组件

流程和架构

LLM 知识图谱构建器使用了以下技术：

• • React - 应用逻辑
• • Axios - 用于网络调用和处理响应
• • styled-components - 用于在 JavaScript 中编写所有 CSS；或采用 Tailwind CSS，通过第三方 CSS 类加速开发
• • 长轮询 - 长轮询是一种在客户端和服务器之间保持稳定连接的简单方法。如果没有响应，它会将请求保持一段时间。它会定期使用新信息更新客户端，每分钟使用新数据更新状态和处理块。
• • SSE - 当服务器循环生成数据并向客户端发送多个事件，或者我们需要从服务器到客户端的实时数据流时，服务器发送事件是最佳选择。
• • React Context API - 用于状态处理；由于应用程序不复杂，我们使用 Context API 进行全局状态管理。

我们使用了 Neo4j Needle Design System(https://www.neo4j.design/)，它用于所有 Neo4j UI、产品工具和网页。它遵循 Web 行业的标准，如无障碍设计，并提供用户友好的设计元素、配色方案和组件。我们还涵盖了应用程序中的常见设计模式和通用的 UX 写作规范。

Neo4j Needle starter kit(https://github.com/neo4j-labs/neo4j-needle-starterkit) 帮助我们加快了开发速度。响应式 starter kit 用于构建具有 Neo4j Needle Design System 的应用程序，以加速 Neo4j 驱动的前端应用程序的价值实现。它提供了基本的、可扩展的组件，可以根据功能进行调整。

用户友好的界面引导用户连接到 Neo4j Aura、访问文件源、上传 PDF 文件、生成图、可视化图以及聊天界面：

• • Neo4j Needle Design System(https://neo4j.design/) 组件
• • Neo4j Visualization Library(https://neo4j.com/docs/nvl/current/)
• • CSS：使用 Tailwind CSS(https://tailwindcss.com/) 进行内联样式设置

Needle Design System 开箱即用地支持主题（如深色和浅色），这使开发人员的工作更加轻松。

使用流程

步骤：

1. 启动连接

启动应用程序，开始与 UI 交互。

2. Neo4j 连接

用户提供必要的凭据和连接详细信息，以建立与 Neo4j 数据库的连接。这是他们指定主机、端口、用户名和密码以访问目标数据库实例的地方。

3. 数据摄取

用户上传或指定数据源。包括：

• • 本地文件 - 拖放文件（如 PDF、DOCX、TXT 和图像）
• • Web 链接 - 输入网站、YouTube 视频或 Wikipedia 页面的 URL
• • 云存储 - 配置对 Amazon S3 或 Google Cloud Storage 存储桶的访问

4. 实体识别

系统使用 LLM 处理摄取的数据，以识别实体（关键对象、概念等）以及这些实体之间的关系。这是 LLM 查看内容并开始识别和提取文档中的相关信息的地方。

5. 图构建

在上一步中识别的实体和关系用于在 Neo4j 数据库中构建知识图谱。这包括确定构成图数据库的节点（实体）和边（关系）。

6. 可视化

用户现在可以可视化构建的图。选项包括：

• • 文档和块 - 显示文档和文本块之间的连接
• • 实体图 - 显示已识别实体之间的关系
• • 社区 - 显示实体集群的社区摘要
• • 用户还可以使用 Neo4j Bloom 探索该图，以进行更高级的分析、查询和编辑

7. 与 RAG 代理交互

用户通过提问与聊天机器人交互。应用程序使用检索增强生成 (RAG) 从知识图谱中检索相关信息并生成答案。用户可以选择仅向量或 GraphRAG 方法。他们还可以访问有关 RAG 代理如何检索和使用源材料的详细信息。用户可以与机器人交互，提出问题并改进查询。

8. 结束

用户已完成其交互。这可能涉及关闭应用程序、探索该图、构建应用程序以使用数据或导出数据。

UI 演示

Neo4j 连接

用户通过添加协议、URI、数据库名称、用户名和密码等详细信息来连接 Neo4j 数据库。您还可以直接将创建 Aura 或 Sandbox 实例时下载的凭据文件拖放到连接对话框中，以使用强大的错误处理填充表单。

连接对话框

文件上传

用户可以上传不同类型的文件，包括：

• • Microsoft Office (.docx、.pptx、.xls、.xlsx)
• • PDF (.pdf)
• • 图像 (.jpeg、.jpg、.png、.svg)
• • 文本 (.html、.txt、.md)

系统会读取文件内容，并将其分割成块，然后将这些块转换为 Document 节点。大于 CHUNK SIZE (5MB) 的文件将被分成二进制块并发送到服务器。在服务器端，所有块将被合并并处理以创建文档节点。CHUNK SIZE 可通过 Docker 文件配置进行配置。

Web 资源

用户可以提供 Web 资源，例如 Wikipedia、YouTube 视频和 Web URL（例如，对于文章），这些资源使用 Unstructured LangChain loader(https://python.langchain.com/docs/integrations/providers/unstructured/) 进行处理。创建 Document 节点，并基于配置处理源内容以生成文本 Chunk。

云提供商存储

用户可以提供来自 Amazon S3 和 Google Cloud Storage 的批量上传的源。

对于 S3，用户需要提供其访问密钥、秘密密钥和 S3 URL。提交这些凭据后，系统会导入存储桶和文件夹中的所有 PDF 文件，并为每个文件创建 Document 节点，同时将其内容作为 Chunk 节点。

Amazon S3：

Google Cloud Storage：

用户需要提供项目 ID、存储桶名称和文件夹。然后，他们会获得重定向到身份验证页面的流程，以验证其 Google 帐户以获得对存储桶的访问权限。

LLM 选择

我们支持各种模型(https://neo4j.com/labs/genai-ecosystem/llm-graph-builder-features/)。用户可以选择任何其他支持 OpenAI API 的模型，只需在配置中提供相应的 API 密钥即可。当前选择的模型将用于提取、后处理、检索、聊天及评估等多个功能模块。对于后者，您也可以根据需要切换模型。

文件提取

要处理文档，用户需要单击“生成图”按钮，该按钮使用 LangChain 中的 LLM Graph Transformer(https://medium.com/towards-data-science/building-knowledge-graphs-with-llm-graph-transformer-a91045c49b59) 工具启动提取过程。所选文件或处于新状态的文件将进入处理状态，若无失败则进入完成状态。

为了实时更新处理进度，我们采用了服务器发送事件（SSE）技术。服务器会从数据库中实时读取文档状态，并通过流式传输的方式发送给客户端。在客户端，我们会在每次进度更改时更新状态，并进行最小的重新渲染，以确保性能标准。

我们创建了一个自定义 Hook，该 Hook 将在组件中使用，以更新处理进度。我们还实现了批量处理功能。当用户选择超过两个文件时，系统每次仅处理两个文件（可配置），以减轻公共部署版本的后端负载。我们创建了一个队列状态来维护顺序。批处理大小可通过 Docker env 进行配置。

提取的重新处理选项

用户可以通过选择所需的选项来重新处理失败或取消的文件，方法是单击重新处理图标（↻）。状态将更改为“准备好重新处理”。然后，用户可以通过单击“生成图”按钮来重新处理多个文件。

用户可通过以下三种方式重新处理：

• • 重新开始
• • 删除实体并重新开始
• • 从上次处理的块开始

图可视化

对于图可视化，我们使用 Neo4j Visualization Library(https://neo4j.com/docs/nvl/current/) 中的 InteractiveNvlWrapper 组件，该组件提供灵活性和处理程序，以根据业务逻辑集成图可视化。我们创建了一个可重用组件，用于在应用程序的各个阶段呈现该图。

我们调用后端 API 一次，以从数据库获取节点和关系，并在本地应用过滤器以提升用户体验。

用户可以单击节点以查看有关节点的详细信息 - 类型、属性等。我们还实现了客户端搜索功能，用户可以通过标签或顺序文本搜索特定节点。我们支持次要的可视化操作，例如放大/缩小和刷新图，这在文档处理正在进行时非常有用。

我们将在此系列的另一篇博文中发布，我们将更深入地研究图可视化的复杂性以及我们如何解决这些问题。

图增强

我们支持许多处理增强功能，用户可以配置设置，例如为提取设置自定义图模式、获取用于引导提取的其他说明、以交互方式删除孤立节点、合并重复节点（按相似度）。

实体提取：用户可以选择提供自定义模式，使用现有的模式示例，或者加载 Neo4j 数据库的当前模式。

我们还支持通过 LLM 从提供的文本示例（最多几页）中提取模式。这适用于模式描述元数据（考虑 RDF 本体、CREATE TABLE 语句或仅口头描述），也适用于要处理的文档的示例部分。

这可以加快候选图模型的生成，然后用户可以对其进行优化或清理。

其他说明： 其他说明用于通过为提取提示添加其他指南来优化知识图谱。您可以指示模型仅关注当前事件或忽略某些类型的技术或组织，或提供其他上下文信息，例如词汇表或领域信息。

分块配置： 分块过程的可选配置：

• • 每个块的令牌计数 定义每个块中处理的令牌数（设置为默认值 200）。
• • 块重叠 指定块之间的重叠令牌以保持上下文（设置为默认值 20）。
• • 要组合的块 确定合并多少个块以进行处理（设置为默认值 1）。

删除断开连接的（孤立）节点： 用户可以交互式地列出和删除未连接到任何其他实体（仅连接到块或社区）的断开连接的节点。

节点去重： 用户可以合并相似的实体以消除冗余并提高知识图谱的准确性和清晰度。我们使用向量和文本距离相似性的组合来对候选者进行分组。您可以在合并所选行的节点之前删除单个节点。

后处理作业：用户可以选择在提取过程之后可以运行哪些作业，这将开箱即用地改进 GraphRAG 等功能。无论是 Graph Data Science (GDS) 实例还是非 GDS 实例，我们都支持社区选项，包括以下功能：

• • 实现文本块相似性： 在文本块之间创建 SIMILAR 关系，其向量相似性超过配置的阈值。
• • 启用混合搜索： 为实体创建全文索引，以便在 Neo4j Bloom 中进行混合搜索和全文搜索。
• • 实现实体嵌入： 生成实体的嵌入。
• • 启用社区： 在启用 GDS 的数据库实例上，计算实体集群并生成分层社区摘要。
• • 图模式整合： 如果未配置图模式，请尝试使用 LLM 调用来整合和清理自动生成的图。

表过滤器： 用户可以根据提取状态、源类型、模型类型等属性对文档表进行排序和过滤。

具有不同检索器模式的聊天机器人

检索器模式

我们支持各种检索模式来分析图、向量搜索、实体搜索和 GraphRAG 实现的功能。用户可以选择一个或多个检索器进行聊天，并在每个检索器的聊天结果之间切换，以直观地查看生成的答案的差异。

聊天视图和功能

我们支持聊天功能的两种视图。用户可以在主 UI 侧栏中聊天，也可以在单独的模态框中聊天以获得更好的体验。用户还可以收听答案、复制答案并以 JSON 格式下载对话。

仅聊天模式

通过对话查询与 Neo4j 数据库中的数据进行交互，还可以使用专用的仅聊天 UI 检索有关查询响应来源的元数据。

对于专用的聊天界面，请访问仅聊天路由上的独立聊天应用程序。此链接提供了一个集中的聊天体验，用于查询您的数据。

检索见解

我们支持聊天答案的可解释性，这允许用户验证从图数据库检索的并由 LLM 用于生成答案的实际答案来源和实体。

您可以通过单击“详细信息”来查看它们。在弹出窗口中，我们不仅显示有关检索模式、模型、令牌和运行时的信息，还显示用于生成答案的块、实体、社区。

用户可以可视化文本块和实体的邻域上下文，并可以 JSON 格式下载见解。

Ragas 评估指标

用户可以通过单击“查看详细指标”按钮，通过 Ragas(http://github.com/explodinggradients/ragas/) 评估管道来衡量/验证所有检索器的答案准确性。Ragas 是一种评估工具，用于通过 LLM 和基本事实答案来衡量 RAG 系统响应的质量，可以为其他指标提供基本事实答案。

总结

总的来说，该应用程序融合了现代设计原则、卓越的可用性和强大的高级功能。它使用户能够轻松构建、优化知识图谱并与之交互，从而更便捷地获取和利用数据洞察。