agentic_huge_data_base / wiki
页面 Cognee · 2.5 Web 前端·DeepWiki 中文全文译文
DeepWiki 中文译文 / Cognee / 2.5

2.5 · Web 前端（Web Frontend）

记忆管道与知识图谱构建 · 聚焦本章的模块关系、源码依据与实现要点。

项目Cognee 章节2.5 状态全文译文 模块界面与交互、系统架构、安装与启动、检索、召回与索引
项目要点页2.5 参考项目 项目章节目录Cognee DeepWiki 原始章节Web Frontend 上一章2.4 下一章3
源码线索
  • cognee-frontend/.dockerignore
  • cognee-frontend/Dockerfile
  • cognee-frontend/package-lock.json
  • cognee-frontend/package.json
  • cognee-frontend/postcss.config.mjs
  • cognee-frontend/public/file.svg
  • cognee-frontend/public/globe.svg
  • cognee-frontend/public/next.svg
  • cognee-frontend/public/vercel.svg
  • cognee-frontend/public/window.svg
模块标签
  • 界面与交互
  • 系统架构
  • 安装与启动
  • 检索、召回与索引
  • 评测、反馈与人工复核

章节正文

Web 前端

原始 DeepWiki 页面https://deepwiki.com/topoteretes/cognee/2.5-web-frontend

Web 前端

相关源文件

本章引用的主要源码文件：

  • cognee-frontend/.dockerignore
  • cognee-frontend/Dockerfile
  • cognee-frontend/package-lock.json
  • cognee-frontend/package.json
  • cognee-frontend/postcss.config.mjs
  • cognee-frontend/public/file.svg
  • cognee-frontend/public/globe.svg
  • cognee-frontend/public/next.svg
  • cognee-frontend/public/vercel.svg
  • cognee-frontend/public/window.svg
  • cognee-frontend/src/app/(app)/datasets/DatasetsBody.tsx/datasets/DatasetsBody.tsx)
  • [cognee-frontend/src/app/(app)/datasets/[id]/DatasetDetailPage.tsx](cognee-frontend/src/app/(app)/datasets/[id]/DatasetDetailPage.tsx)
  • cognee-frontend/src/app/(auth)/local-login/partials/LocalSignInForm.tsx/local-login/partials/LocalSignInForm.tsx)
  • cognee-frontend/src/app/(graph)/GraphControls.tsx/GraphControls.tsx)
  • cognee-frontend/src/app/(graph)/GraphVisualization.tsx/GraphVisualization.tsx)
  • cognee-frontend/src/modules/chat/hooks/useChat.ts
  • cognee-frontend/src/modules/datasets/cognifyDataset.ts
  • cognee-frontend/src/modules/datasets/createDataset.ts
  • cognee-frontend/src/modules/datasets/searchDataset.ts
  • cognee-frontend/src/modules/ingestion/addData.ts
  • cognee-frontend/src/modules/ingestion/useDatasets.ts
  • cognee-frontend/src/ui/elements/Modal/index.ts
  • cognee-frontend/src/ui/elements/Notebook/MarkdownPreview.tsx
  • cognee-frontend/src/ui/elements/Notebook/Notebook.tsx
  • cognee-frontend/src/ui/elements/TextArea.tsx
  • cognee/api/v1/activity/__init__.py
  • cognee/api/v1/activity/routers/__init__.py
  • cognee/api/v1/activity/routers/get_activity_router.py
  • cognee/api/v1/prune/prune.py

Cognee Web 前端是一个基于 Next.js 构建的应用程序，旨在为知识引擎提供可视化交互界面。它使用户能够可视化知识图谱、管理数据集、监控系统活动，并通过笔记本风格的界面与引擎进行交互。

架构与部署

前端基于 Next.js 16+ 和 React 19 构建 cognee-frontend/package.json:24-27。它使用 Mantine 组件库提供 UI 元素 cognee-frontend/package.json:12-17，并通过 REST API 与 Cognee 后端通信。

仪表盘与概览

前端通过轮询后端端点提供系统活动的实时视图。关键数据点包括：

  • 管线运行：通过 /v1/activity/pipeline-runs 获取，显示 cognee.add、cognee.cognify 和 cognee.search 操作的状态和代理归属 cognee/api/v1/activity/routers/get_activity_router.py:21-83。
  • 遥测跨度：通过 /v1/activity/spans 获取，暴露来自 CogneeSpanExporter 的内存中 OTEL 跨度，用于监控大语言模型（LLM）、向量和图谱操作 cognee/api/v1/activity/routers/get_activity_router.py:85-117。
  • 代理追踪：通过 /v1/activity/agents 端点监控已注册的代理及其最新活动（入库、搜索）cognee/api/v1/activity/routers/get_activity_router.py:142-154。
流程：从命令行到浏览器

下图展示了 cognee -ui 命令如何从命令行调用过渡到运行中的 Web 应用程序。

命令行界面（CLI）UI 初始化流程

Cognee · 流程：从命令行到浏览器 · 图 1
Cognee · 流程：从命令行到浏览器 · 图 1

来源：cognee/api/v1/activity/routers/get_activity_router.py:1-120、cognee-frontend/package.json:1-33

图谱可视化

前端的核心是交互式图谱可视化，使用 react-force-graph-2d 实现 cognee-frontend/src/app/(graph)/GraphVisualization.tsx:11-13。

可视化功能
  • 力导向布局：使用 d3-force-3d 实现基于物理的节点定位 cognee-frontend/package.json:20。
  • 动态形状：支持多种布局，包括自上而下（td）、自下而上（bu）、从左到右（lr）和径向布局 cognee-frontend/src/app/(graph)/GraphControls.tsx:44-65。
  • 交互式控制：用户可以选择节点查看属性，或将整个图谱适配到视口中 cognee-frontend/src/app/(graph)/GraphControls.tsx:169-177。
  • 颜色编码：通过 getColorForNodeType 根据节点的 type 属性为节点着色 cognee-frontend/src/app/(graph)/GraphVisualization.tsx:129。
组件交互

GraphVisualization 组件通过 useImperativeHandle 暴露 API，允许父组件触发缩放或布局更改 cognee-frontend/src/app/(graph)/GraphVisualization.tsx:22-25。

图谱交互逻辑

Cognee · 组件交互 · 图 2
Cognee · 组件交互 · 图 2

来源：cognee-frontend/src/app/(graph)/GraphVisualization.tsx:27-200、cognee-frontend/src/app/(graph)/GraphControls.tsx:67-104

数据集与数据管理

前端提供用于管理数据集以及执行 add / cognify 工作流的界面。

数据入库
  • 文件上传：addData 函数使用 FormData 将文件发送到 /v1/add 端点 cognee-frontend/src/modules/ingestion/addData.ts:3-19。
  • URL 入库：addUrlData 函数将 URL 作为 textData 发送到 /v1/add_text 端点 cognee-frontend/src/modules/ingestion/addData.ts:21-35。
  • 数据集钩子：useDatasets 提供统一的接口用于创建、删除和可视化数据集 cognee-frontend/src/modules/ingestion/useDatasets.ts:32-149。它追踪数据集状态和元数据，包括 id、name 和处理 status cognee-frontend/src/modules/ingestion/useDatasets.ts:13-18。

搜索与聊天界面

搜索界面由 useChat 钩子管理，该钩子处理会话状态和对 /v1/search/ 的 API 调用 cognee-frontend/src/modules/chat/hooks/useChat.ts:18-35。

搜索类型与格式化

该钩子根据 searchType 参数支持多种输出转换 cognee-frontend/src/modules/chat/hooks/useChat.ts:102-123：

  • INSIGHTS：将三元组格式化为"节点1 关系 节点2"字符串 cognee-frontend/src/modules/chat/hooks/useChat.ts:108-115。
  • SUMMARIES / CHUNKS：连接返回数据中的文本结果 cognee-frontend/src/modules/chat/hooks/useChat.ts:116-119。

来源：cognee-frontend/src/modules/chat/hooks/useChat.ts:1-124、cognee-frontend/src/modules/ingestion/useDatasets.ts:130-137

笔记本界面

Notebook 组件提供了一个文学编程环境，用于与 Cognee 交互 cognee-frontend/src/ui/elements/Notebook/Notebook.tsx:172。

单元格类型
  1. 代码单元格：用于执行 Cognee 命令。它们包含输出区域用于显示结果和错误显示 cognee-frontend/src/ui/elements/Notebook/Notebook.tsx:59-102。
  2. Markdown 单元格：用于文档编写。它们具有由 react-markdown 驱动的预览模式 cognee-frontend/src/ui/elements/Notebook/Notebook.tsx:103-143。
关键组件
  • NotebookCell：一个记忆化组件，管理单个单元格的状态，包括展开和编辑模式 cognee-frontend/src/ui/elements/Notebook/Notebook.tsx:40-54。
  • TextArea：一个自定义的自动扩展输入组件，具有限流高度调整功能，以确保流畅的输入性能 cognee-frontend/src/ui/elements/TextArea.tsx:29-71。
  • MarkdownPreview：使用 react-markdown 渲染 Markdown，并为标题、代码块和表格提供自定义样式 cognee-frontend/src/ui/elements/Notebook/MarkdownPreview.tsx:9-74。

来源：cognee-frontend/src/ui/elements/Notebook/Notebook.tsx:1-170、cognee-frontend/src/ui/elements/TextArea.tsx:29-48、cognee-frontend/src/ui/elements/Notebook/MarkdownPreview.tsx:1-77