From c5c0dd2da069612d7456549b80c76642f7a394e0 Mon Sep 17 00:00:00 2001 From: balibabu Date: Wed, 22 Jan 2025 19:43:27 +0800 Subject: [PATCH] Feat: Display the knowledge graph on the knowledge base page #4543 (#4587) ### What problem does this PR solve? Feat: Display the knowledge graph on the knowledge base page #4543 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- .../components/chunk-method-modal/index.tsx | 4 + web/src/components/entity-types-item.tsx | 14 +- web/src/components/indented-tree/modal.tsx | 9 +- web/src/components/layout-recognize.tsx | 26 +++- .../parse-configuration/graph-rag-items.tsx | 120 ++++++++++++++++++ .../components/use-knowledge-graph-item.tsx | 21 +++ web/src/constants/knowledge.ts | 1 + web/src/hooks/chunk-hooks.ts | 20 --- web/src/hooks/common-hooks.tsx | 7 +- web/src/hooks/knowledge-hooks.ts | 19 +++ web/src/interfaces/database/document.ts | 9 ++ web/src/interfaces/database/knowledge.ts | 6 + web/src/locales/en.ts | 23 +++- web/src/locales/zh-traditional.ts | 20 ++- web/src/locales/zh.ts | 21 ++- .../components/knowledge-graph/modal.tsx | 75 ----------- .../components/knowledge-chunk/index.tsx | 2 - .../parsing-action-cell/index.tsx | 7 +- .../knowledge-graph/constant.ts | 0 .../knowledge-graph/force-graph.tsx | 6 +- .../knowledge-graph/index.less | 5 - .../components/knowledge-graph/index.tsx | 15 +++ .../components => }/knowledge-graph/util.ts | 0 .../knowledge-setting/configuration.tsx | 5 + .../components/knowledge-sidebar/index.tsx | 26 +++- .../testing-control/index.tsx | 2 + .../prompt-engine.tsx | 4 + .../pages/knowledge/knowledge-card/index.tsx | 2 +- web/src/routes.ts | 4 + web/src/services/knowledge-service.ts | 4 + web/src/utils/api.ts | 2 + 31 files changed, 346 insertions(+), 133 deletions(-) create mode 100644 web/src/components/parse-configuration/graph-rag-items.tsx create mode 100644 web/src/components/use-knowledge-graph-item.tsx delete mode 100644 web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/modal.tsx rename web/src/pages/add-knowledge/components/{knowledge-chunk/components => }/knowledge-graph/constant.ts (100%) rename web/src/pages/add-knowledge/components/{knowledge-chunk/components => }/knowledge-graph/force-graph.tsx (97%) rename web/src/pages/add-knowledge/components/{knowledge-chunk/components => }/knowledge-graph/index.less (61%) create mode 100644 web/src/pages/add-knowledge/components/knowledge-graph/index.tsx rename web/src/pages/add-knowledge/components/{knowledge-chunk/components => }/knowledge-graph/util.ts (100%) diff --git a/web/src/components/chunk-method-modal/index.tsx b/web/src/components/chunk-method-modal/index.tsx index 6548f8d7..bf118136 100644 --- a/web/src/components/chunk-method-modal/index.tsx +++ b/web/src/components/chunk-method-modal/index.tsx @@ -30,6 +30,9 @@ import LayoutRecognize from '../layout-recognize'; import ParseConfiguration, { showRaptorParseConfiguration, } from '../parse-configuration'; +import GraphRagItems, { + showGraphRagItems, +} from '../parse-configuration/graph-rag-items'; import styles from './index.less'; interface IProps extends Omit { @@ -296,6 +299,7 @@ const ChunkMethodModal: React.FC = ({ {showRaptorParseConfiguration(selectedTag) && ( )} + {showGraphRagItems(selectedTag) && } {showEntityTypes && } diff --git a/web/src/components/entity-types-item.tsx b/web/src/components/entity-types-item.tsx index 1916cef0..d52fb0e1 100644 --- a/web/src/components/entity-types-item.tsx +++ b/web/src/components/entity-types-item.tsx @@ -5,16 +5,22 @@ import EditTag from './edit-tag'; const initialEntityTypes = [ 'organization', 'person', - 'location', + 'geo', 'event', - 'time', + 'category', ]; -const EntityTypesItem = () => { +type IProps = { + field?: string[]; +}; + +const EntityTypesItem = ({ + field = ['parser_config', 'entity_types'], +}: IProps) => { const { t } = useTranslate('knowledgeConfiguration'); return ( & { documentId: string }) => { - const { data } = useFetchKnowledgeGraph(documentId); + const { data } = useFetchKnowledgeGraph(); const { t } = useTranslation(); return ( @@ -22,7 +21,7 @@ const IndentedTreeModal = ({ footer={null} >
- +
); diff --git a/web/src/components/layout-recognize.tsx b/web/src/components/layout-recognize.tsx index 194580fb..e1658fd2 100644 --- a/web/src/components/layout-recognize.tsx +++ b/web/src/components/layout-recognize.tsx @@ -1,17 +1,35 @@ +import { LlmModelType } from '@/constants/knowledge'; import { useTranslate } from '@/hooks/common-hooks'; -import { Form, Switch } from 'antd'; +import { useSelectLlmOptionsByModelType } from '@/hooks/llm-hooks'; +import { Form, Select } from 'antd'; +import { useMemo } from 'react'; + +const enum DocumentType { + DeepDOC = 'DeepDOC', + PlainText = 'Plain Text', +} const LayoutRecognize = () => { const { t } = useTranslate('knowledgeDetails'); + const allOptions = useSelectLlmOptionsByModelType(); + + const options = useMemo(() => { + const list = [DocumentType.DeepDOC, DocumentType.PlainText].map((x) => ({ + label: x, + value: x, + })); + + return [...list, ...allOptions[LlmModelType.Image2text]]; + }, [allOptions]); + return ( - + + + + + + + + + + ) + ); + }} + + + ); +}; + +export default GraphRagItems; diff --git a/web/src/components/use-knowledge-graph-item.tsx b/web/src/components/use-knowledge-graph-item.tsx new file mode 100644 index 00000000..b5da3dc1 --- /dev/null +++ b/web/src/components/use-knowledge-graph-item.tsx @@ -0,0 +1,21 @@ +import { Form, Switch } from 'antd'; +import { useTranslation } from 'react-i18next'; + +type IProps = { + filedName: string[]; +}; + +export function UseKnowledgeGraphItem({ filedName }: IProps) { + const { t } = useTranslation(); + + return ( + + + + ); +} diff --git a/web/src/constants/knowledge.ts b/web/src/constants/knowledge.ts index 09dc160e..63d403c9 100644 --- a/web/src/constants/knowledge.ts +++ b/web/src/constants/knowledge.ts @@ -2,6 +2,7 @@ export enum KnowledgeRouteKey { Dataset = 'dataset', Testing = 'testing', Configuration = 'configuration', + KnowledgeGraph = 'knowledgeGraph', } export const DatasetBaseKey = 'dataset'; diff --git a/web/src/hooks/chunk-hooks.ts b/web/src/hooks/chunk-hooks.ts index cb363ca7..472275f5 100644 --- a/web/src/hooks/chunk-hooks.ts +++ b/web/src/hooks/chunk-hooks.ts @@ -206,23 +206,3 @@ export const useFetchChunk = (chunkId?: string): ResponseType => { return data; }; - -export const useFetchKnowledgeGraph = ( - documentId: string, -): ResponseType => { - const { data } = useQuery({ - queryKey: ['fetchKnowledgeGraph', documentId], - initialData: true, - enabled: !!documentId, - gcTime: 0, - queryFn: async () => { - const data = await kbService.knowledge_graph({ - doc_id: documentId, - }); - - return data; - }, - }); - - return data; -}; diff --git a/web/src/hooks/common-hooks.tsx b/web/src/hooks/common-hooks.tsx index 2e1e0287..71ec4500 100644 --- a/web/src/hooks/common-hooks.tsx +++ b/web/src/hooks/common-hooks.tsx @@ -1,7 +1,7 @@ import { ExclamationCircleFilled } from '@ant-design/icons'; import { App } from 'antd'; import isEqual from 'lodash/isEqual'; -import { useCallback, useEffect, useRef, useState } from 'react'; +import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; export const useSetModalState = () => { @@ -78,6 +78,7 @@ export function useDynamicSVGImport( interface IProps { title?: string; + content?: ReactNode; onOk?: (...args: any[]) => any; onCancel?: (...args: any[]) => any; } @@ -87,12 +88,12 @@ export const useShowDeleteConfirm = () => { const { t } = useTranslation(); const showDeleteConfirm = useCallback( - ({ title, onOk, onCancel }: IProps): Promise => { + ({ title, content, onOk, onCancel }: IProps): Promise => { return new Promise((resolve, reject) => { modal.confirm({ title: title ?? t('common.deleteModalTitle'), icon: , - // content: 'Some descriptions', + content, okText: t('common.ok'), okType: 'danger', cancelText: t('common.cancel'), diff --git a/web/src/hooks/knowledge-hooks.ts b/web/src/hooks/knowledge-hooks.ts index 9ff7bbb7..3c737b8b 100644 --- a/web/src/hooks/knowledge-hooks.ts +++ b/web/src/hooks/knowledge-hooks.ts @@ -1,11 +1,13 @@ import { ResponsePostType } from '@/interfaces/database/base'; import { IKnowledge, + IKnowledgeGraph, IRenameTag, ITestingResult, } from '@/interfaces/database/knowledge'; import i18n from '@/locales/config'; import kbService, { + getKnowledgeGraph, listTag, removeTag, renameTag, @@ -373,3 +375,20 @@ export const useFetchTagListByKnowledgeIds = () => { }; //#endregion + +export function useFetchKnowledgeGraph() { + const knowledgeBaseId = useKnowledgeBaseId(); + + const { data, isFetching: loading } = useQuery({ + queryKey: ['fetchKnowledgeGraph', knowledgeBaseId], + initialData: { graph: {}, mind_map: {} } as IKnowledgeGraph, + enabled: !!knowledgeBaseId, + gcTime: 0, + queryFn: async () => { + const { data } = await getKnowledgeGraph(knowledgeBaseId); + return data?.data; + }, + }); + + return { data, loading }; +} diff --git a/web/src/interfaces/database/document.ts b/web/src/interfaces/database/document.ts index 83d2248e..59bc5d02 100644 --- a/web/src/interfaces/database/document.ts +++ b/web/src/interfaces/database/document.ts @@ -33,8 +33,17 @@ export interface IParserConfig { layout_recognize?: boolean; pages: any[]; raptor?: Raptor; + graphrag?: GraphRag; } interface Raptor { use_raptor: boolean; } + +interface GraphRag { + community?: boolean; + entity_types?: string[]; + method?: string; + resolution?: boolean; + use_graphrag?: boolean; +} diff --git a/web/src/interfaces/database/knowledge.ts b/web/src/interfaces/database/knowledge.ts index 510ffead..999814e1 100644 --- a/web/src/interfaces/database/knowledge.ts +++ b/web/src/interfaces/database/knowledge.ts @@ -1,4 +1,5 @@ import { RunningStatus } from '@/constants/knowledge'; +import { TreeData } from '@antv/g6/lib/types'; // knowledge base export interface IKnowledge { @@ -136,3 +137,8 @@ export interface ITestingResult { } export type IRenameTag = { fromTag: string; toTag: string }; + +export interface IKnowledgeGraph { + graph: Record; + mind_map: TreeData; +} diff --git a/web/src/locales/en.ts b/web/src/locales/en.ts index 98e06abc..93cb2800 100644 --- a/web/src/locales/en.ts +++ b/web/src/locales/en.ts @@ -86,6 +86,7 @@ export default { testing: 'Retrieval testing', files: 'files', configuration: 'Configuration', + knowledgeGraph: 'Knowledge graph', name: 'Name', namePlaceholder: 'Please input name!', doc: 'Docs', @@ -137,7 +138,7 @@ export default { fromMessage: 'Missing start page number', toPlaceholder: 'to', toMessage: 'Missing end page number (excluded)', - layoutRecognize: 'Layout recognition', + layoutRecognize: 'Layout recognition & OCR', layoutRecognizeTip: 'Use visual models for layout analysis to better understand the structure of the document and effectively locate document titles, text blocks, images, and tables. If disabled, only the plain text in the PDF will be retrieved.', taskPageSize: 'Task page size', @@ -192,6 +193,8 @@ export default { `, metaData: 'Meta data', + deleteDocumentConfirmContent: + 'The document is associated with the knowledge graph. After deletion, the related node and relationship information will be deleted, but the graph will not be updated immediately. The update graph action is performed during the process of parsing the new document that carries the knowledge graph extraction task.', }, knowledgeConfiguration: { titleDescription: @@ -363,6 +366,17 @@ This procedure will improve precision of retrieval by adding more information to topnTags: 'Top-N Tags', tags: 'Tags', addTag: 'Add tag', + useGraphRag: 'Extract knowledge graph', + useGraphRagTip: + 'After files being chunked, all the chunks will be used for knowlege graph generation which helps inference of multi-hop and complex problems a lot.', + graphRagMethod: 'Method', + graphRagMethodTip: `Light: the entity and relation extraction prompt is from GitHub - HKUDS/LightRAG: "LightRAG: Simple and Fast Retrieval-Augmented Generation"
+ General: the entity and relation extraction prompt is from GitHub - microsoft/graphrag: A modular graph-based Retrieval-Augmented Generation (RAG) system`, + resolution: 'Entity resolution', + resolutionTip: `The resolution procedure would merge entities with the same meaning together which allows the graph conciser and more accurate. Entities as following should be merged: President Trump, Donald Trump, Donald J. Trump, Donald John Trump`, + community: 'Community reports generation', + communityTip: + 'Chunks are clustered into hierarchical communities with entities and relationships connecting each segment up through higher levels of abstraction. We then use an LLM to generate a summary of each community, known as a community report. More: https://www.microsoft.com/en-us/research/blog/graphrag-improving-global-search-via-dynamic-community-selection/', }, chunk: { chunk: 'Chunk', @@ -503,6 +517,9 @@ This procedure will improve precision of retrieval by adding more information to 'This optimizes user queries using context in a multi-round conversation. When enabled, it will consume additional LLM tokens.', howUseId: 'How to use chat ID?', description: 'Description of assistant', + useKnowledgeGraph: 'Use knowledge graph', + useKnowledgeGraphTip: + 'It will retrieve descriptions of relevant entities,relations and community reports, which will enhance inference of multi-hop and complex question.', }, setting: { profile: 'Profile', @@ -971,8 +988,8 @@ This procedure will improve precision of retrieval by adding more information to notEmpty: 'Not empty', }, switchLogicOperatorOptions: { - and: 'And', - or: 'Or', + and: 'AND', + or: 'OR', }, operator: 'Operator', value: 'Value', diff --git a/web/src/locales/zh-traditional.ts b/web/src/locales/zh-traditional.ts index e90dec12..aa8b9b72 100644 --- a/web/src/locales/zh-traditional.ts +++ b/web/src/locales/zh-traditional.ts @@ -85,6 +85,7 @@ export default { dataset: '數據集', testing: '檢索測試', configuration: '配置', + knowledgeGraph: '知識圖譜', files: '文件', name: '名稱', namePlaceholder: '請輸入名稱', @@ -135,7 +136,7 @@ export default { fromMessage: '缺少起始頁碼', toPlaceholder: '到', toMessage: '缺少結束頁碼（不包含）', - layoutRecognize: '佈局識別', + layoutRecognize: '佈局識別和 OCR', layoutRecognizeTip: '使用視覺模型進行佈局分析，以更好地識別文檔結構，找到標題、文本塊、圖像和表格的位置。如果沒有此功能，則只能獲取 PDF 的純文本。', taskPageSize: '任務頁面大小', @@ -187,6 +188,9 @@ export default {
  • 這是區塊內容....
    • `, + metaData: '元資料', + deleteDocumentConfirmContent: + '該文件與知識圖譜相關聯。刪除後，相關節點和關係資訊將被刪除，但圖不會立即更新。更新圖動作是在解析承載知識圖譜提取任務的新文件的過程中執行的。 ', }, knowledgeConfiguration: { titleDescription: '在這裡更新您的知識庫詳細信息，尤其是解析方法。', @@ -346,6 +350,17 @@ export default { `, tags: '標籤', addTag: '增加標籤', + useGraphRag: '提取知識圖譜', + useGraphRagTip: + '文件分塊後，所有區塊將用於知識圖譜生成，這對多跳和複雜問題的推理有很大幫助。', + graphRagMethod: '方法', + graphRagMethodTip: `Light：實體和關係提取提示來自 GitHub - HKUDS/LightRAG：“LightRAG：簡單快速的檢索增強生成”
    + 一般：實體和關係擷取提示來自 GitHub - microsoft/graphrag：基於模組化圖形的檢索增強生成 (RAG) 系統，`, + resolution: '實體歸一化', + resolutionTip: `解析過程會將具有相同意義的實體合併在一起，使知識圖譜更簡潔、更準確。應合併以下實體：川普總統、唐納德·川普、唐納德·J·川普、唐納德·約翰·川普`, + community: '社群報告生成', + communityTip: + '區塊被聚集成層次化的社區，其中實體和關係透過更高層次的抽象將每個部分連接起來。然後，我們使用 LLM 產生每個社群的摘要，即社群報告。更多資訊：https://www.microsoft.com/en-us/research/blog/graphrag-improving-global-search-via-dynamic-community-selection/', }, chunk: { chunk: '解析塊', @@ -486,6 +501,9 @@ export default { '在多輪對話的中，對去知識庫查詢的問題進行最佳化。會呼叫大模型額外消耗token。', howUseId: '如何使用聊天ID？', description: '助理描述', + useKnowledgeGraph: '使用知識圖譜', + useKnowledgeGraph提示: + '它將檢索相關實體、關係和社區報告的描述，這將增強多跳和複雜問題的推理。', }, setting: { profile: '概述', diff --git a/web/src/locales/zh.ts b/web/src/locales/zh.ts index 28e572bb..6ed33857 100644 --- a/web/src/locales/zh.ts +++ b/web/src/locales/zh.ts @@ -85,6 +85,7 @@ export default { dataset: '数据集', testing: '检索测试', configuration: '配置', + knowledgeGraph: '知识图谱', files: '文件', name: '名称', namePlaceholder: '请输入名称', @@ -135,7 +136,7 @@ export default { fromMessage: '缺少起始页码', toPlaceholder: '到', toMessage: '缺少结束页码（不包含）', - layoutRecognize: '布局识别', + layoutRecognize: '布局识别和 OCR', layoutRecognizeTip: '使用视觉模型进行布局分析，以更好地识别文档结构，找到标题、文本块、图像和表格的位置。 如果没有此功能，则只能获取 PDF 的纯文本。', taskPageSize: '任务页面大小', @@ -188,7 +189,9 @@ export default {
  • 这是块内容....
    • `, - metaData: '元資料', + metaData: '元数据', + deleteDocumentConfirmContent: + '该文档与知识图谱相关联。删除后，相关节点和关系信息将被删除，但图不会立即更新。更新图动作是在解析承载知识图谱提取任务的新文档的过程中执行的。', }, knowledgeConfiguration: { titleDescription: '在这里更新您的知识库详细信息，尤其是解析方法。', @@ -364,6 +367,17 @@ export default { `, tags: '标签', addTag: '增加标签', + useGraphRag: '提取知识图谱', + useGraphRagTip: + '文件分块后，所有块将用于知识图谱生成，这对多跳和复杂问题的推理大有帮助。', + graphRagMethod: '方法', + graphRagMethodTip: `Light：实体和关系提取提示来自 GitHub - HKUDS/LightRAG：“LightRAG：简单快速的检索增强生成”
    +General：实体和关系提取提示来自 GitHub - microsoft/graphrag：基于图形的模块化检索增强生成 (RAG) 系统`, + resolution: '实体归一化', + resolutionTip: `解析过程会将具有相同含义的实体合并在一起，从而使知识图谱更简洁、更准确。应合并以下实体：特朗普总统、唐纳德·特朗普、唐纳德·J·特朗普、唐纳德·约翰·特朗普`, + community: '社区报告生成', + communityTip: + '区块被聚集成层次化的社区，实体和关系通过更高抽象层次将每个部分连接起来。然后，我们使用 LLM 生成每个社区的摘要，称为社区报告。更多信息：https://www.microsoft.com/en-us/research/blog/graphrag-improving-global-search-via-dynamic-community-selection/', }, chunk: { chunk: '解析块', @@ -504,6 +518,9 @@ export default { '在多轮对话的中，对去知识库查询的问题进行优化。会调用大模型额外消耗token。', howUseId: '如何使用聊天ID？', description: '助理描述', + useKnowledgeGraph: '使用知识图谱', + useKnowledgeGraphTip: + '它将检索相关实体、关系和社区报告的描述，这将增强多跳和复杂问题的推理。', }, setting: { profile: '概要', diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/modal.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/modal.tsx deleted file mode 100644 index a9fcbe49..00000000 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/modal.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import IndentedTree from '@/components/indented-tree/indented-tree'; -import { useFetchKnowledgeGraph } from '@/hooks/chunk-hooks'; -import { useGetKnowledgeSearchParams } from '@/hooks/route-hook'; -import { Flex, Modal, Segmented } from 'antd'; -import React, { useEffect, useMemo, useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import ForceGraph from './force-graph'; -import styles from './index.less'; -import { isDataExist } from './util'; - -enum SegmentedValue { - Graph = 'Graph', - Mind = 'Mind', -} - -const KnowledgeGraphModal: React.FC = () => { - const [isModalOpen, setIsModalOpen] = useState(false); - const { documentId } = useGetKnowledgeSearchParams(); - const { data } = useFetchKnowledgeGraph(documentId); - const [value, setValue] = useState(SegmentedValue.Graph); - const { t } = useTranslation(); - - const options = useMemo(() => { - return [ - { value: SegmentedValue.Graph, label: t('chunk.graph') }, - { value: SegmentedValue.Mind, label: t('chunk.mind') }, - ]; - }, [t]); - - const handleOk = () => { - setIsModalOpen(false); - }; - - const handleCancel = () => { - setIsModalOpen(false); - }; - - useEffect(() => { - if (isDataExist(data)) { - setIsModalOpen(true); - } - }, [setIsModalOpen, data]); - - return ( - -
    - - setValue(v as SegmentedValue)} - /> - - - -
    -     - ); -}; - -export default KnowledgeGraphModal; diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx b/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx index 1f0a87db..6bce6014 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-chunk/index.tsx @@ -8,7 +8,6 @@ import ChunkCard from './components/chunk-card'; import CreatingModal from './components/chunk-creating-modal'; import ChunkToolBar from './components/chunk-toolbar'; import DocumentPreview from './components/document-preview/preview'; -import KnowledgeGraphModal from './components/knowledge-graph/modal'; import { useChangeChunkTextMode, useDeleteChunkByIds, @@ -196,7 +195,6 @@ const Chunk = () => { parserId={documentInfo.parser_id} /> )} - ); }; diff --git a/web/src/pages/add-knowledge/components/knowledge-file/parsing-action-cell/index.tsx b/web/src/pages/add-knowledge/components/knowledge-file/parsing-action-cell/index.tsx index 6d05dcee..ac5f1eec 100644 --- a/web/src/pages/add-knowledge/components/knowledge-file/parsing-action-cell/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-file/parsing-action-cell/index.tsx @@ -39,7 +39,12 @@ const ParsingActionCell = ({ const onRmDocument = () => { if (!isRunning) { - showDeleteConfirm({ onOk: () => removeDocument([documentId]) }); + showDeleteConfirm({ + onOk: () => removeDocument([documentId]), + content: record?.parser_config?.graphrag?.use_graphrag + ? t('deleteDocumentConfirmContent') + : '', + }); } }; diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/constant.ts b/web/src/pages/add-knowledge/components/knowledge-graph/constant.ts similarity index 100% rename from web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/constant.ts rename to web/src/pages/add-knowledge/components/knowledge-graph/constant.ts diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/force-graph.tsx b/web/src/pages/add-knowledge/components/knowledge-graph/force-graph.tsx similarity index 97% rename from web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/force-graph.tsx rename to web/src/pages/add-knowledge/components/knowledge-graph/force-graph.tsx index 8969d688..d2547e95 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/force-graph.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-graph/force-graph.tsx @@ -24,7 +24,7 @@ const ForceGraph = ({ data, show }: IProps) => { if (!isEmpty(data)) { const graphData = data; const mi = buildNodesAndCombos(graphData.nodes); - return { edges: graphData.links, ...mi }; + return { edges: graphData.edges, ...mi }; } return { nodes: [], edges: [] }; }, [data]); @@ -130,8 +130,8 @@ const ForceGraph = ({ data, show }: IProps) => { ref={containerRef} className={styles.forceContainer} style={{ - width: '90vw', - height: '80vh', + width: '100%', + height: '100%', display: show ? 'block' : 'none', }} /> diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/index.less b/web/src/pages/add-knowledge/components/knowledge-graph/index.less similarity index 61% rename from web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/index.less rename to web/src/pages/add-knowledge/components/knowledge-graph/index.less index c75fcd4c..7c5d1f5a 100644 --- a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/index.less +++ b/web/src/pages/add-knowledge/components/knowledge-graph/index.less @@ -3,8 +3,3 @@ border-radius: 10px !important; } } - -.modalContainer { - width: 100%; - height: 100%; -} diff --git a/web/src/pages/add-knowledge/components/knowledge-graph/index.tsx b/web/src/pages/add-knowledge/components/knowledge-graph/index.tsx new file mode 100644 index 00000000..9b728d71 --- /dev/null +++ b/web/src/pages/add-knowledge/components/knowledge-graph/index.tsx @@ -0,0 +1,15 @@ +import { useFetchKnowledgeGraph } from '@/hooks/knowledge-hooks'; +import React from 'react'; +import ForceGraph from './force-graph'; + +const KnowledgeGraphModal: React.FC = () => { + const { data } = useFetchKnowledgeGraph(); + + return ( +
    + +
    + ); +}; + +export default KnowledgeGraphModal; diff --git a/web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/util.ts b/web/src/pages/add-knowledge/components/knowledge-graph/util.ts similarity index 100% rename from web/src/pages/add-knowledge/components/knowledge-chunk/components/knowledge-graph/util.ts rename to web/src/pages/add-knowledge/components/knowledge-graph/util.ts diff --git a/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx b/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx index 64bfe820..1c2bb419 100644 --- a/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-setting/configuration.tsx @@ -13,6 +13,9 @@ import ParseConfiguration, { showRaptorParseConfiguration, showTagItems, } from '@/components/parse-configuration'; +import GraphRagItems, { + showGraphRagItems, +} from '@/components/parse-configuration/graph-rag-items'; import { useTranslate } from '@/hooks/common-hooks'; import { useHandleChunkMethodSelectChange } from '@/hooks/logic-hooks'; import { normFile } from '@/utils/file-util'; @@ -149,6 +152,8 @@ const ConfigurationForm = ({ form }: { form: FormInstance }) => { )} + {showGraphRagItems(parserId) && } + {showTagItems(parserId) && } ); diff --git a/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx index 2947a084..7099cdc8 100644 --- a/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-sidebar/index.tsx @@ -1,7 +1,10 @@ import { ReactComponent as ConfigurationIcon } from '@/assets/svg/knowledge-configration.svg'; import { ReactComponent as DatasetIcon } from '@/assets/svg/knowledge-dataset.svg'; import { ReactComponent as TestingIcon } from '@/assets/svg/knowledge-testing.svg'; -import { useFetchKnowledgeBaseConfiguration } from '@/hooks/knowledge-hooks'; +import { + useFetchKnowledgeBaseConfiguration, + useFetchKnowledgeGraph, +} from '@/hooks/knowledge-hooks'; import { useGetKnowledgeSearchParams, useSecondPathName, @@ -14,6 +17,8 @@ import { useTranslation } from 'react-i18next'; import { useNavigate } from 'umi'; import { KnowledgeRouteKey } from '../../constant'; +import { isEmpty } from 'lodash'; +import { GitGraph } from 'lucide-react'; import styles from './index.less'; const KnowledgeSidebar = () => { @@ -30,6 +35,8 @@ const KnowledgeSidebar = () => { navigate(`/knowledge/${e.key}?id=${knowledgeId}`); }; + const { data } = useFetchKnowledgeGraph(); + type MenuItem = Required['items'][number]; const getItem = useCallback( @@ -54,7 +61,7 @@ const KnowledgeSidebar = () => { ); const items: MenuItem[] = useMemo(() => { - return [ + const list = [ getItem( KnowledgeRouteKey.Dataset, // TODO: Change icon color when selected KnowledgeRouteKey.Dataset, @@ -71,7 +78,19 @@ const KnowledgeSidebar = () => { , ), ]; - }, [getItem]); + + if (!isEmpty(data.graph)) { + list.push( + getItem( + KnowledgeRouteKey.KnowledgeGraph, + KnowledgeRouteKey.KnowledgeGraph, + , + ), + ); + } + + return list; + }, [data, getItem]); useEffect(() => { if (windowWidth.width > 957) { @@ -81,7 +100,6 @@ const KnowledgeSidebar = () => { } }, [windowWidth.width]); - // 标记一下 useEffect(() => { const widthSize = () => { const width = getWidth(); diff --git a/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx index 42a70359..345b46d4 100644 --- a/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx +++ b/web/src/pages/add-knowledge/components/knowledge-testing/testing-control/index.tsx @@ -6,6 +6,7 @@ import { Button, Card, Divider, Flex, Form, Input } from 'antd'; import { FormInstance } from 'antd/lib'; import { LabelWordCloud } from './label-word-cloud'; +import { UseKnowledgeGraphItem } from '@/components/use-knowledge-graph-item'; import styles from './index.less'; type FieldType = { @@ -38,6 +39,7 @@ const TestingControl = ({ form, handleTesting }: IProps) => {
    + name={'question'} diff --git a/web/src/pages/chat/chat-configuration-modal/prompt-engine.tsx b/web/src/pages/chat/chat-configuration-modal/prompt-engine.tsx index 3e654370..30136ab2 100644 --- a/web/src/pages/chat/chat-configuration-modal/prompt-engine.tsx +++ b/web/src/pages/chat/chat-configuration-modal/prompt-engine.tsx @@ -30,6 +30,7 @@ import { EditableCell, EditableRow } from './editable-cell'; import Rerank from '@/components/rerank'; import TopNItem from '@/components/top-n-item'; +import { UseKnowledgeGraphItem } from '@/components/use-knowledge-graph-item'; import { useTranslate } from '@/hooks/common-hooks'; import { useSelectPromptConfigParameters } from '../hooks'; import styles from './index.less'; @@ -168,6 +169,9 @@ const PromptEngine = ( > +
    diff --git a/web/src/pages/knowledge/knowledge-card/index.tsx b/web/src/pages/knowledge/knowledge-card/index.tsx index 47992ab2..2265b19d 100644 --- a/web/src/pages/knowledge/knowledge-card/index.tsx +++ b/web/src/pages/knowledge/knowledge-card/index.tsx @@ -41,7 +41,7 @@ const KnowledgeCard = ({ item }: IProps) => { return ( post(api.renameTag(knowledgeId), { fromTag, toTag }); +export function getKnowledgeGraph(knowledgeId: string) { + return request.get(api.getKnowledgeGraph(knowledgeId)); +} + export default kbService; diff --git a/web/src/utils/api.ts b/web/src/utils/api.ts index ad78c061..61f4343c 100644 --- a/web/src/utils/api.ts +++ b/web/src/utils/api.ts @@ -36,6 +36,8 @@ export default { update_kb: `${api_host}/kb/update`, rm_kb: `${api_host}/kb/rm`, get_kb_detail: `${api_host}/kb/detail`, + getKnowledgeGraph: (knowledgeId: string) => + `${api_host}/kb/${knowledgeId}/knowledge_graph`, // tags listTag: (knowledgeId: string) => `${api_host}/kb/${knowledgeId}/tags`,