6.0 KiB

Raw Blame History

Tag Relationship Graph 功能说明

功能概述

Tag 关系图是基于聚类结果的 keywords 构建的交互式可视化系统，帮助用户更直观地探索和索引图像数据集。

核心特性

1. 节点类型

Tag 节点（圆形）
- 大小：正比于权重（出现频率 × 图片数量）
- 颜色：根据类别区分
  - 蓝色：人物 (character)
  - 绿色：风格 (style)
  - 黄色：场景 (scene)
  - 红色：物体 (object)
  - 紫色：其他 (other)
- 社区着色：启用社区检测后，同社区的节点使用相同颜色
Cluster 节点（圆形，cyan 色）
- 大小：正比于簇内图片数量
- 标签：簇的标题

2. 边（连线）

Tag-Tag 连线
- 粗细：正比于共现权重（两个 tag 同时出现在簇中的图片数）
- 透明度：0.4（降低视觉干扰）
Cluster-Tag 连线
- 连接簇节点与其包含的 tag
- 便于查看簇的组成

3. 权重计算

使用混合权重模式（alpha=0.3）：

weight = 0.3 × 频次权重 + 0.7 × TF-IDF 权重

频次权重 = Σ(所在聚类的图片数)
TF-IDF 权重 = 频次权重 × log(总聚类数 / 包含该tag的聚类数)

效果：

突出特征性 tag（如 "Warhammer 40K"、"赛博朋克"）
压制通用 tag（如 "女孩"、"风景"）

4. 社区检测

使用 Louvain 算法自动发现 tag 社区：

相关的 tag 自动聚成一组
每个社区用不同颜色区分
示例：
- 社区1：赛博朋克、机甲、霓虹、未来
- 社区2：森林、精灵、魔法、奇幻
- 社区3：女孩、制服、校园、青春

使用方法

1. 切换到 Tag Graph 视图

在 Topic Search 页面
点击右上角的 Switch 切换按钮
选择 "Tag Graph"

2. 参数调整

Top Tags: 显示前 N 个权重最高的 tag（默认 50）
Top Clusters: 显示前 N 个簇节点（默认 20）
Show Clusters: 是否显示簇节点（勾选/取消）

3. 交互操作

基本交互

拖拽：拖动节点调整布局
缩放：鼠标滚轮缩放视图
平移：按住 Shift + 拖拽平移视图

节点操作

悬停：显示详细信息（类别、图片数、聚类数、社区）
点击：在右侧面板显示详细信息
搜索：点击 "Search Images" 按钮，自动搜索该 tag 的图片

工具栏

Refresh: 重新加载图数据
Fit View: 自动调整视图以显示所有节点

4. 典型使用场景

场景1：探索式浏览

问题：不知道数据集里有什么主题

操作：
1. 打开 Tag Graph
2. 观察大节点（核心主题）
3. 点击感兴趣的 tag
4. 点击 "Search Images" 查看图片

场景2：精准索引

需求：找所有包含"机甲"和"战斗"的图片

操作：
1. 在图中找到"机甲"节点
2. 观察相连的节点
3. 如果有"战斗"节点且相连，说明有共现
4. 分别搜索两个 tag 的交集

场景3：主题发现

发现：原来数据集有强烈的 Warhammer 40K 主题

可视化效果：
- "Warhammer 40K" 节点很大（高 TF-IDF）
- 周围连接 "星际战士"、"帝国"、"混沌"
- 形成明显的社区簇（同色区域）

技术实现

后端 API

POST /infinite_image_browsing/db/cluster_tag_graph

Request:
{
  "folder_paths": [...],
  "top_n_tags": 50,
  "top_n_clusters": 20,
  "show_clusters": true,
  "detect_communities": true,
  "weight_mode": "hybrid",
  "alpha": 0.3
}

Response:
{
  "nodes": [
    {
      "id": "tag_机甲",
      "label": "机甲",
      "weight": 629.5,
      "image_count": 224,
      "cluster_count": 3,
      "category": "object",
      "community": 0
    },
    ...
  ],
  "links": [
    {
      "source": "tag_机甲",
      "target": "tag_科幻",
      "weight": 192,
      "image_count": 192,
      "cluster_count": 2
    },
    ...
  ],
  "communities": [
    {
      "id": 0,
      "nodes": ["tag_机甲", "tag_科幻", ...],
      "size": 5
    },
    ...
  ]
}

前端组件

基于 ECharts Graph 实现
力导向布局（Force-Directed Layout）
支持 roam（缩放/平移/拖拽）

依赖

后端（可选）：

pip install networkx

如果没有 networkx，社区检测功能会被禁用，但其他功能正常工作。

前端：

echarts（已包含在项目中）

性能优化

Top-N 截断：只显示权重最高的节点，避免视觉混乱
边权重过滤：低权重的边不显示
标签隐藏：只有大节点显示标签（labelLayout.hideOverlap）
力学参数：调整斥力/引力平衡，避免节点重叠

后续优化方向

增量更新：新增图片时只更新受影响的节点
多层级钻取：点击 tag 展开为更细粒度的子 tag
热力图叠加：显示 tag 的热度分布
时序动画：展示 tag 关系随时间的演变
导出功能：导出为 PNG/SVG/JSON

常见问题

Q1: 为什么有些常见词（如"女孩"）节点不大？

A: 因为使用了 TF-IDF 权重，压制了过于常见的 tag。如果想突出频次，可以修改 alpha 参数（增大到 0.8-1.0）。

Q2: 为什么有些 tag 之间没有连线？

A: 只有在同一个簇中同时出现的 tag 才会有连线。如果两个 tag 从未共现，则不会连接。

Q3: 社区检测有什么用？

A: 自动发现主题群组，用颜色区分。例如"赛博朋克相关"、"奇幻相关"、"校园相关"会自动分组。

Q4: 如何调整图的疏密度？

A: 修改 ECharts 的 force 参数：

repulsion: 增大 = 节点更分散
edgeLength: 增大 = 边更长
gravity: 增大 = 更聚拢到中心

Q5: 为什么点击 Search Images 没反应？

A: 需要先运行一次聚类（Refresh 按钮），确保有聚类结果。

贡献

欢迎提交 PR 改进此功能！

重点优化方向：

更好的布局算法
更丰富的交互方式
更精准的权重计算
性能优化（处理 100+ tag）

开发者: Claude Code 版本: 1.0.0 更新日期: 2026-01-09

6.0 KiB Raw Blame History Unescape Escape