Hugging Face's logo

Spaces:
TUM
/
SmartPagerankSearch
Sleeping

App Files Community
SmartPagerankSearch / GRAPH_VIEW_FEATURE.md
GitHub Action
Sync from GitHub Actions (Clean Commit)
7f22d3c
preview code
|
raw
history blame contribute delete
5.03 kB

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}

返回格式：

{
  "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" 等
  • 连接关系：展示这些概念之间的语义和导航关系

这种可视化方式让用户能够：

  • 快速理解搜索结果之间的关系
  • 发现相关的知识领域
  • 以更直观的方式探索知识网络