Hugging Face's logo

Spaces:
TUM
/
SmartPagerankSearch
Sleeping

App Files Community
SmartPagerankSearch
File size: 5,033 Bytes 
7f22d3c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
 
# Graph View 功能说明

## 🎯 功能概述

在搜索界面中添加了 **Graph View** Tab，使用 ECharts 可视化搜索结果，以网络图的形式展示节点和它们之间的关系。

## ✨ 核心特性

### 1. **双视图模式**
- **List View（列表视图）**：传统的列表形式展示搜索结果
- **Graph View（网络图视图）**：以网络图形式展示节点和连接关系

### 2. **智能节点构建**
- **中心节点**：搜索结果作为中心节点（青色，较大）
- **相关节点**：通过向量相似度找到的相关节点（紫色，较小）
- **协作节点**：通过用户导航行为（transitions）找到的协作节点

### 3. **美观的视觉设计**
- 继承原有的深色科技风格
- 青色（cyan）表示中心节点
- 紫色（purple）表示相关节点
- 节点大小根据重要性动态调整
- 流畅的力导向布局动画

### 4. **交互功能**
- 节点可点击，跳转到详情页
- 鼠标悬停显示节点详细信息
- 支持拖拽和缩放
- 自动布局优化

## 🔧 技术实现

### 后端API

**端点**：`GET /api/search/graph?q={query}&max_nodes={max_nodes}`

**返回格式**：
```json
{
  "nodes": [
    {
      "id": "node_id",
      "name": "节点名称",
      "url": "节点URL",
      "content": "节点内容预览",
      "score": 0.85,
      "category": "text",
      "value": 85.0,
      "isCenter": true
    }
  ],
  "edges": [
    {
      "source": "source_node_id",
      "target": "target_node_id",
      "value": 0.75
    }
  ],
  "query": "搜索查询"
}
```

**实现逻辑**：
1. 获取搜索结果（最多10个中心节点）
2. 对每个中心节点：
   - 通过向量相似度查找相关节点（最多5个）
   - 通过协作过滤查找用户常访问的节点（最多3个）
3. 构建节点和边的数据结构
4. 优化节点标题提取（从URL或内容中智能提取）

### 前端实现

**技术栈**：
- **ECharts 5.4.3**：用于网络图可视化
- **Tailwind CSS**：样式设计
- **原生JavaScript**：交互逻辑

**关键函数**：
- `switchTab(view)`: 切换List View和Graph View
- `renderGraphView(query)`: 渲染网络图
- `performSearch()`: 搜索时自动准备两种视图的数据

## 📊 网络图配置

### 节点样式
- **中心节点**：
  - 颜色：`#06b6d4` (cyan)
  - 大小：40-100px（根据score动态调整）
  - 边框：`#0891b2`
  - 阴影：青色光晕效果

- **相关节点**：
  - 颜色：`#8b5cf6` (purple)
  - 大小：20-40px（根据相似度调整）
  - 边框：`#7c3aed`
  - 阴影：紫色光晕效果

### 边样式
- 颜色：`#475569` (slate)
- 宽度：根据关系强度动态调整（1-4px）
- 曲率：0.3（曲线连接）
- 透明度：0.6

### 布局算法
- **力导向布局（Force-Directed Layout）**：
  - 排斥力：200
  - 重力：0.1
  - 边长度：150
  - 支持布局动画

## 🎨 界面设计

### Tab导航
- 深色背景，透明效果
- 活跃Tab：青色高亮（`bg-cyan-500/20`, `border-cyan-500/50`）
- 非活跃Tab：灰色（`bg-slate-800/50`, `border-slate-700/50`）
- 图标：列表图标和网络图标

### 网络图容器
- 高度：700px
- 背景：半透明深色（`rgba(15, 23, 42, 0.5)`）
- 圆角：12px
- 边框：`rgba(148, 163, 184, 0.2)`

## 🔄 使用流程

1. **用户搜索**：输入查询词（如"TUM"）
2. **显示结果**：默认显示List View
3. **切换视图**：点击"Graph View" Tab
4. **查看网络图**：
   - 中心节点：搜索结果（如"TUM"）
   - 周围节点：相关主题（如"Computer Science", "Engineering"）
   - 连接线：表示节点之间的关系
5. **交互探索**：
   - 点击节点查看详情
   - 拖拽节点重新布局
   - 缩放查看局部或全局

## 📈 性能优化

1. **节点数量限制**：默认最多30个节点（可通过`max_nodes`参数调整）
2. **延迟加载**：只在切换到Graph View时才加载网络图数据
3. **缓存处理**：已加载的图表实例会被复用和销毁
4. **响应式布局**：窗口大小变化时自动调整图表尺寸

## 🚀 未来优化方向

1. **节点聚类**：自动识别和分组相似节点
2. **时间维度**：展示节点关系随时间的变化
3. **筛选功能**：允许用户筛选特定类型的节点或边
4. **导出功能**：支持导出网络图为图片或SVG
5. **3D视图**：可选的3D网络图视图

## 📝 代码位置

- **后端API**：`web_server.py` - `api_search_graph()`
- **前端HTML**：`static/index.html`
  - Tab导航：第194-209行
  - Graph容器：第219-221行
  - JavaScript逻辑：第725-899行

## 🎉 使用示例

搜索"TUM"时，网络图会显示：
- **中心**："TUM"
- **周围节点**："Computer Science", "Engineering", "Munich", "University", "Research" 等
- **连接关系**：展示这些概念之间的语义和导航关系

这种可视化方式让用户能够：
- 快速理解搜索结果之间的关系
- 发现相关的知识领域
- 以更直观的方式探索知识网络