# KGFac4LLM

**Repository Path**: botuui/KGFac4LLM

## Basic Information

- **Project Name**: KGFac4LLM
- **Description**: This project is a knowledge-base system for the feffery-antd-components library in Dash, built on Knowledge Graph (KG) and vector-retrieval (RAG) techniques. It is designed to enhance the ability of Large Language Models (LLMs) to generate Dash code.
- **Primary Language**: Python
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-11
- **Last Updated**: 2025-12-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# KGFac4LLM - 基于知识图谱的Dash FAC组件文档检索系统

本项目是一个基于知识图谱(KG)和知识增强检索(RAG)技术构建的Dash的**feffery-antd-components**组件知识库系统，旨在增强大语言模型在生成Dash代码方面的能力。

## 项目概述

该系统整合了三大Dash组件库文档：
- **feffery-antd-components** (FAC)：基于Ant Design的Dash组件库
- **feffery-utils-components** (FUC)：实用功能Dash组件集合
- **feffery-antd-charts** (FACT)：数据可视化图表Dash组件库

通过知识图谱和嵌入向量技术，为LLM提供外部知识支持，提升其生成高质量Dash应用程序的能力。

## 核心功能

### 1. 多维度数据存储
- 使用Neo4j图数据库存储实体关系（标签、组件、案例等）
- 使用Chroma向量数据库存储文本嵌入向量
- 支持标签、组件、案例等多种实体类型

### 2. 智能检索能力
- 基础语义搜索：直接通过向量相似度检索相关内容
- 自适应深度检索：结合知识图谱关系进行多跳检索
- 重排序功能：使用reranker模型优化检索结果



## 项目架构
```
KGFac4LLM/ 
├── cache/ # 缓存数据目录 
├── config/ # 配置文件目录 
├── demo/ # 示例代码目录 
├── kbretriever/ # 知识库检索模块 
│ ├── init.py 
│ ├── reranker.py # 重排序模块 
│ └── retriever.py # 检索器模块 
├── mcpserver/ # MCP服务端 
│ ├── app.py # 应用入口 
│ └── src/ 
│ ├── response.py # 响应处理 
│ └── service.py # 服务接口 
├── store/ # 数据存储模块 .
│ ├── init.py 
│ ├── init_db.py # 数据库初始化 
│ ├── models.py # 数据模型定义 
│ ├── schemas.py # 数据模式定义 
│ ├── utils.py # 工具函数 
│ └── orm/ 
│ ├── chromaorm.py # Chroma向量数据库ORM 
│ └── neo4jorm.py # Neo4j图数据库ORM 
└── README.md
```

## MCP接口

### 组件信息接口
- `GET /getDashComponentsList` - 获取组件列表
- `GET /getComponentDetailByName` - 根据名称获取组件详情

### 检索接口
- `GET /deepLevelRetrieve` - 自适应深度检索

## 部署方式

### 环境要求
- Python 3.11
- Neo4j数据库
- Chroma向量数据库



### 安装步骤

#### NEO4J安装
建议通过Docker安装
```
docker run -d \
  --name neo4j \
  -p 7474:7474 -p 7687:7687 \
  -v $PWD/data:/data \
  -v $PWD/logs:/logs \
  -e NEO4J_AUTH=neo4j/password \
  -e NEO4J_PLUGINS='["apoc"]' \
  neo4j:5.26.13-community-bullseye
```

#### ChromaDB服务端模式
建议通过Docker安装
```
docker run -d --name chroma \
  -p 8000:8000 \
  -v chroma_data:/chroma/chroma \
  -e IS_PERSISTENT=TRUE \
  -e CHROMA_SERVER_AUTHN_PROVIDER=chromadb.auth.token_authn.TokenAuthenticationServerProvider \
  -e CHROMA_SERVER_AUTHN_CREDENTIALS=password \
  --restart=always \
  ghcr.io/chroma-core/chroma:0.6.3
```

#### 项目启动
1. 克隆项目代码
2. 安装依赖：`pip install -r requirements.txt`
3. 配置环境变量和数据库连接。仅需配置硅基流动、neo4j和chromadb的配置
```
cp .env.example .env
vim .env
``` 
4. 导入数据：运行 `python demo/initdata.py`

5. 若启用MCP则服务：`python mcpserver/app.py`

## 图谱构建
基于三份基础文档，使用LLM进行提取，最终共构建图谱节点3617个，关系9576个。
![图谱示例](/example/demo_graph.png)


## 使用示例

### 基础检索
```python
from kbretriever.retriever import Retriever

retriever = Retriever()

# 基础语义搜索
res = retriever.basic_semantic_retrieve(
    query="设计一个用户登录页面",
    top_k=2,
    target="tag"
)

# 自适应深度检索
res = retriever.retrieve_deeplevel(
    query="设计一个用户登录页面",
    top_k_cases=2,
    top_k_tags=5,
    use_reranker=True,
    return_components=False,
    return_mode="text"
)
```

### MCP使用
在CherryStudio中配置MCP,并进行使用
![MCP使用](/example/example1-1.png)

``` kimi生成效果
import dash
from dash import html, dcc, Input, Output, State, callback
import feffery_antd_components as fac
import dash_bootstrap_components as dbc
import time

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# 现代登录页面设计
app.layout = html.Div([
    # 背景渐变效果
    html.Div([
        # 主容器
        html.Div([
            # Logo区域
            html.Div([
                html.Img(
                    src="https://images.pexels.com/photos/18664364/pexels-photo-18664364/free-photo-of-rock-formation-on-sea-shore-in-greece.jpeg",
                    style={
                        'width': '80px',
                        'height': '80px',
                        'borderRadius': '50%',
                        'marginBottom': '20px',
                        'boxShadow': '0 8px 32px rgba(0, 0, 0, 0.1)'
                    }
                ),
                html.H1("欢迎回来", style={
                    'color': '#333',
                    'fontSize': '28px',
                    'fontWeight': '600',
                    'margin': '0 0 10px 0'
                }),
                html.P("请登录您的账户", style={
                    'color': '#666',
                    'fontSize': '16px',
                    'margin': '0'
                })
            ], style={'textAlign': 'center', 'marginBottom': '30px'}),
            
            # 登录卡片容器
            fac.AntdCard([
                # 标题区域
                html.Div([
                    fac.AntdTitle("登录", level=2, style={
                        'margin': '0 0 25px 0',
                        'color': '#333',
                        'fontWeight': '600'
                    })
                ], style={'textAlign': 'center'}),
                
                # 登录表单
                fac.AntdForm([
                    # 用户名输入
                    fac.AntdFormItem(
                        fac.AntdInput(
                            placeholder="请输入用户名",
                            prefix=fac.AntdIcon(icon="antd-user", style={'color': '#1890ff'}),
                            size="large",
                            style={
                                'borderRadius': '8px',
                                'border': '2px solid #f0f0f0',
                                'backgroundColor': '#fafafa',
                                'fontSize': '16px'
                            }
                        ),
                        label="用户名",
                        labelCol={'span': 24},
                        wrapperCol={'span': 24}
                    ),
                    
                    # 密码输入
                    fac.AntdFormItem(
                        fac.AntdInput(
                            placeholder="请输入密码",
                            mode="password",
                            prefix=fac.AntdIcon(icon="antd-lock", style={'color': '#1890ff'}),
                            size="large",
                            style={
                                'borderRadius': '8px',
                                'border': '2px solid #f0f0f0',
                                'backgroundColor': '#fafafa',
                                'fontSize': '16px'
                            }
                        ),
                        label="密码",
                        labelCol={'span': 24},
                        wrapperCol={'span': 24}
                    ),
                    
                    # 记住密码选项
                    fac.AntdFormItem(
                        html.Div([
                            fac.AntdCheckbox("记住密码", style={'color': '#666'}),
                            html.A("忘记密码？", href="#", style={
                                'color': '#1890ff',
                                'textDecoration': 'none',
                                'fontSize': '14px'
                            })
                        ], style={
                            'display': 'flex',
                            'justifyContent': 'space-between',
                            'alignItems': 'center'
                        }),
                        wrapperCol={'span': 24}
                    ),
                    
                    # 登录按钮
                    fac.AntdFormItem(
                        fac.AntdButton(
                            "登录",
                            type="primary",
                            size="large",
                            block=True,
                            loading=False,
                            style={
                                'borderRadius': '8px',
                                'background': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
                                'border': 'none',
                                'height': '50px',
                                'fontSize': '18px',
                                'fontWeight': '500',
                                'boxShadow': '0 4px 15px rgba(102, 126, 234, 0.4)'
                            }
                        ),
                        wrapperCol={'span': 24}
                    )
                ])
            ],
                variant="borderless",
                hoverable=True,
                style={
                    'maxWidth': '400px',
                    'margin': '0 auto',
                    'padding': '30px',
                    'backgroundColor': 'white',
                    'borderRadius': '20px',
                    'boxShadow': '0 10px 40px rgba(0, 0, 0, 0.1)',
                    'backdropFilter': 'blur(10px)',
                    'backgroundColor': 'rgba(255, 255, 255, 0.95)'
                }
            ),
            
            # 注册链接
            html.Div([
                html.P("还没有账户？", style={'color': '#666', 'margin': '0'}),
                html.A("立即注册", href="#", style={
                    'color': '#1890ff',
                    'textDecoration': 'none',
                    'marginLeft': '10px',
                    'fontWeight': '500'
                })
            ], style={
                'textAlign': 'center',
                'marginTop': '20px'
            })
        ], style={
            'maxWidth': '500px',
            'margin': '0 auto',
            'padding': '40px 20px'
        })
    ], style={
        'minHeight': '100vh',
        'background': 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        'fontFamily': '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
        'position': 'relative',
        'overflow': 'hidden'
    }),
    
    # 鼠标移动视差效果
    html.Div(style={
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'right': 0,
        'bottom': 0,
        'background': 'url("https://images.pexels.com/photos/18664364/pexels-photo-18664364/free-photo-of-rock-formation-on-sea-shore-in-greece.jpeg") center/cover',
        'opacity': '0.1',
        'pointerEvents': 'none'
    })
])

# 登录回调
@callback(
    Output('login-button', 'loading'),
    Output('login-button', 'children'),
    Input('login-button', 'nClicks'),
    State('username-input', 'value'),
    State('password-input', 'value'),
    prevent_initial_call=True
)
def handle_login(n_clicks, username, password):
    if n_clicks:
        # 模拟登录过程
        time.sleep(2)
        
        if username and password:
            return False, "登录成功!"
        else:
            return False, "请输入用户名和密码"
    
    return False, "登录"

if __name__ == '__main__':
    app.run(debug=True)

```


![生成效果](/example/example1-2.png)




## TODO
- [x] 添加Chroma服务端向量数据库支持
- [ ] 添加其他向量数据库支持
- [ ] 添加知识图谱构建的支持：从项目中提取案例并丰富图谱