Neo4j LLM 知识图谱构建器工具提供了一个用户友好的界面，简化了上传 PDF 文件和其他 Web 资源以及使用 LLM 生成图表的过程。它还提供了使用GraphRAG检索器生成的知识图谱的聊天体验。这篇文章重点介绍了该工具的前端架构。

让我们开始吧

LLM 知识图谱构建器的 UI 利用 React 实现应用程序逻辑和组件，利用 Axios 处理网络调用和响应，利用长轮询或服务器发送事件 (SSE) 实现实时数据更新。基于 Neo4j 的 Needle 设计系统的 Tailwind CSS 或 styled-components 负责处理 CSS 设计。

React Context API 负责状态处理。UI 引导用户完成知识图谱构建过程和聊天体验的每个步骤，让不同技术水平的用户都可以轻松访问和使用。

UI 架构和组件

对于 LLM 知识图谱构建器，我们使用以下技术：

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

我们使用了 Neo4j Needle 设计系统，该系统用于所有 Neo4j UI、产品工具和网页。它遵循 Web 的行业标准指南，例如 Web 可访问性，并提供我们集成到应用程序中的用户友好型设计标记、颜色和组件。它还包括应用程序中遵循的模式和常见的 UX 编写标准。

Neo4j Needle 入门套件帮助我们加快了开发速度。响应式入门套件用于使用 Neo4j Needle 设计系统构建应用程序，以加快 Neo4j 支持的前端应用程序的价值实现时间。它提供了基本的可扩展组件，可根据功能进行调整。

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

• Neo4j 针头设计系统组件
• Neo4j 可视化库
• CSS：使用Tailwind CSS进行内联样式

Needle 设计系统开箱即用地支持主题（例如深色和浅色），这使得开发人员的生活更加轻松。

使用流程

步骤：

开始连接

用户操作：用户通过启动应用程序来启动过程。此时，他们可以打开工具并开始与用户界面进行交互。

Neo4j连接

用户操作：用户提供必要的凭据和连接详细信息以建立与Neo4j数据库的连接。在此步骤中，他们需要指定主机、端口、用户名和密码以访问目标数据库实例。

数据摄入

用户操作：用户上传或指定数据来源。这包括：

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

实体识别

用户操作：系统使用大型语言模型（LLM）处理摄入的数据，以识别实体（关键对象、概念等）以及这些实体之间的关系。在此步骤中，LLM查看内容并开始从文档中识别和提取相关信息。

图构建

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

可视化

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

• 文档和块——显示文档和文本块之间的连接
• 实体图——显示识别出的实体之间的关系
• 社区——呈现实体簇的社区摘要
• 用户还可以使用Neo4j Bloom进行更高级的分析、查询和编辑来探索图。

与RAG代理交互

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

结束

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

UI操作指南

Neo4j连接

用户通过添加协议、URI、数据库名称、用户名和密码等详细信息与Neo4j数据库连接。你也可以在连接对话框中直接拖放创建Aura或Sandbox实例时下载的凭据文件，以自动填充表单，并具备强大的错误处理能力。

文件上传

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

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

这些文件将通过使用文件内容创建块来转换为文档节点。大于块大小（5MB）的文件将被分成二进制块并发送到服务器。在服务器端，所有块将被合并并处理以创建文档节点。块大小可通过Dockerfile配置进行调整。

网络来源

用户可以提供网络来源，如维基百科、YouTube视频和网页URL（例如，用于文章），这些来源将使用Unstructured LangChain加载器进行处理。通过根据配置处理来源内容，创建文档节点和文本块。

云提供商存储

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

对于S3，用户需要提供其访问密钥、秘密密钥和S3 URL。通过提交这些凭据，存储桶和文件夹中找到的所有PDF文件将被导入，并为每个文件及其内容创建文档节点和块节点。

Amazon S3：

Google Cloud Storage：

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

大型语言模型（LLM）选择

我们支持各种模型。用户可以选择任何支持OpenAI API的附加模型，并通过在配置中提供密钥来进行配置。当前选择的模型将用于提取、后处理、检索、聊天和评估目的。对于后者，你也可以根据需要切换模型。

文件提取

为了处理文档，用户需要点击“生成图表”按钮，该按钮将使用LangChain中的LLM图表转换工具开始提取过程。在提取过程中，所选文件或新状态中的所有文件将进入处理状态，如果没有失败，则进入完成状态。

为了更新处理进度，我们使用服务器端事件，服务器将实时从数据库中读取文档状态并进行流式传输。在客户端，我们在每次进度变化时更新状态，并进行最小的重新渲染，以确保性能标准。

我们创建了一个自定义钩子，将在各个组件中使用以更新处理进度。我们还实现了批量处理，这意味着如果用户选择了多个文件，那么一次只会处理两个文件（可配置），以减少公开部署版本的后端负载。我们创建了一个队列状态来维护顺序。批量大小可通过Docker环境变量进行配置。

提取的重处理选项

用户可以通过点击重处理图标（↻）选择所需的重处理选项，对失败或取消的文件进行重处理。状态将变为“准备重处理”。然后，用户可以通过点击“生成图表”按钮对多个文件进行重处理。

用户可以通过三种方式进行重处理：

• 从头开始
• 删除实体并从头开始
• 从最后一个处理的块开始

图表可视化

对于图表可视化，我们使用了Neo4j可视化库中的InteractiveNvlWrapper组件，它提供了灵活性和处理程序，可以根据业务逻辑集成图表可视化。我们创建了一个可重用的组件，用于在应用程序的各个阶段渲染图表。

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

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

图表增强功能

我们支持多种处理增强功能，用户可以在其中配置设置，如为提取设置自定义图表模式、获取引导提取的附加指令、交互式删除孤立节点、合并相似重复节点。

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

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

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

附加指令：附加指令用于通过为提取提示添加额外的指导原则来完善知识图表。你可以指示模型仅关注当前事件，或忽略某些类型的技术或组织，或提供额外的上下文信息，如术语表或领域信息。

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

• 每块标记数定义了每个块中处理的标记数量（默认设置为200）。

• 块重叠指定块之间的重叠标记以保持上下文（默认设置为20）。

• 要合并的块确定合并多少个块进行处理（默认设置为1）。

删除孤立（无连接）节点：用户可以交互式地列出并删除与其他任何实体（仅与块或社区相连）无连接的节点。

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

后处理作业：用户可以选择在提取过程结束后运行哪些作业，这将提升诸如图表关系对齐（GraphRAG）等功能的即开即用体验。我们支持图表数据科学（GDS）和非GDS实例，因此我们将展示社区选项：

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

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

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

检索器模式

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

聊天视图和功能

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

仅聊天模式

通过对话查询与Neo4j数据库中的数据进行交互，并使用专用的仅聊天用户界面检索查询响应来源的元数据。

如需专用的聊天界面，请访问仅聊天路径下的独立聊天应用程序。此链接提供了一个专注的聊天体验，用于查询你的数据。

检索洞察

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

你可以点击“详细信息”查看这些内容。在弹出的窗口中，我们不仅显示有关检索模式、模型、标记和运行时的信息，还显示用于生成答案的文本块、实体和社区。

用户可以可视化文本块和实体的邻域上下文，并以JSON格式下载这些洞察信息。

Ragas评估指标

用户可以通过点击“查看详细指标”按钮，利用Ragas评估流程对所有检索器的答案准确性进行测量/验证。Ragas是一种评估工具，用于通过大型语言模型（LLM）和真实答案来衡量检索增强生成（RAG）系统响应的质量，其中真实答案可用于提供额外的指标。

总结

大型语言模型（LLM）知识图谱构建器的前端是一个以用户为中心的应用程序，使用React和React Context API开发，并通过styled-components或Tailwind CSS进行样式设计。它采用了Neo4j Needle设计系统，以确保一致性、可访问性和精致的设计。该系统提供了无缝的Neo4j连接管理，支持从本地、网络和云源上传文件，并通过分块和合并高效处理大文件。

关键功能包括直观的LLM选择工作流程、自动化的图表生成和可视化，以及一个强大的聊天界面，该界面具备检索增强生成（RAG）、可解释答案和Ragas指标用于响应评估。

用户可以通过模式调整、节点去重、孤立节点删除和后处理作业来完善其图表。通过服务器发送事件（SSE）的实时更新、表格筛选和重新处理能力增强了可用性，而可扩展性则确保了大型数据集的稳健处理。

总体而言，该应用程序将现代设计原则和可用性与高级功能相结合，使用户能够轻松构建、完善和与知识图谱进行交互，从而使数据洞察更加易于访问和可操作。