# How解构结果可视化工具

将How解构结果生成交互式HTML可视化页面，展示帖子详情、灵感点、匹配结果和历史来源。

---

## 快速开始

```bash
python script/data_processing/visualize_how_results.py
```

生成的HTML文件位置：
```
data/data_1117/当前帖子_how解构结果_可视化.html
```

在浏览器中打开该文件即可查看可视化结果。

---

## 功能特性

### 1. 多帖子标签页

- 支持多个帖子的切合展示
- 每个帖子一个标签页，点击切换
- 标签显示帖子标题

### 2. 智能目录导航

- **左侧固定目录**
  - 帖子详情快速跳转
  - 灵感点列表导航
  - How步骤快速定位

- **自动激活高亮**
  - 滚动时自动追踪当前位置
  - 目录项高亮显示当前浏览区域
  - 紫色背景标识激活项

### 3. 紧凑帖子卡片

- **主帖子卡片**（左上方固定显示）
  - 缩略图预览（保持宽高比）
  - 标题、正文预览
  - 作者、发布日期
  - 点赞、评论、收藏数

- **点击展开详情**
  - 模态框显示完整内容
  - 图片轮播查看
  - 完整正文和统计数据
  - 链接跳转至小红书原帖

### 4. 灵感点详情

- **右上方固定显示**
  - 灵感点名称（黄色徽章）
  - 灵感点描述
  - 包含的特征列表

### 5. 特征分类展示

- **简洁格式**: `[大类/中类/小类] 特征名称`
- 灰色小字，不喧宾夺主
- 显示在人设特征名称前

### 6. How步骤分组

- **三级折叠结构**
  - 第一级：步骤名称（可折叠）
  - 第二级：特征匹配结果（可折叠）
  - 第三级：具体匹配项（可折叠）

- **步骤信息展示**
  - 步骤名称
  - 来源灵感点
  - 特征数量统计

### 7. 匹配结果详情

- **匹配头部信息**
  - 人设特征名称和分类
  - 关系类型徽章（完全相同/包含/部分重叠等）
  - 匹配分数

- **展开内容**
  - 匹配解释说明
  - 历史帖子来源卡片

### 8. 历史帖子来源

- **卡片式展示**
  - 帖子缩略图
  - 帖子标题
  - 灵感点名称和描述
  - 发布日期
  - 点赞、收藏数
  - 查看原帖链接

- **点击查看详情**
  - 所有历史帖子卡片均可点击
  - 弹出模态框显示完整内容

---

## 数据来源

### 输入数据

| 数据文件 | 用途 | 说明 |
|---------|------|------|
| `data/data_1117/当前帖子_how解构结果/*.json` | How解构结果 | 包含帖子详情、灵感点、How步骤、匹配结果 |
| `data/data_1117/特征名称_分类映射.json` | 特征分类 | 287个特征的分类层级（灵感点/关键点/目的点） |
| `data/data_1117/特征名称_帖子来源.json` | 历史来源 | 275个特征的历史帖子来源 |

### 输出文件

```
data/data_1117/当前帖子_how解构结果_可视化.html
```

单个HTML文件，包含所有数据、样式和交互逻辑。

---

## How解构结果数据结构

### 主要结构

```json
{
  "帖子详情": {
    "title": "帖子标题",
    "images": ["图片URL1", "图片URL2"],
    "body_text": "正文内容",
    "like_count": 1000,
    "comment_count": 50,
    "collect_count": 200,
    "channel_account_name": "作者名",
    "publish_time": "2025-11-17 10:00:00",
    "link": "小红书链接"
  },
  "how解构结果": {
    "灵感点列表": [
      {
        "名称": "灵感点名称",
        "描述": "灵感点描述",
        "how步骤列表": [
          {
            "步骤名称": "步骤1",
            "特征列表": [
              {
                "特征名称": "特征A",
                "匹配结果": [
                  {
                    "人设特征名称": "人设特征X",
                    "匹配结果": {
                      "relation": "same",
                      "score": 0.95,
                      "explanation": "匹配说明"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}
```

### 关系类型说明

| relation | 中文标签 | 颜色 | 说明 |
|----------|---------|------|------|
| same | 完全相同 | 绿色 | 语义完全一致 |
| contains | 包含 | 蓝色 | A包含B |
| overlap | 部分重叠 | 橙色 | 有交集但不完全相同 |
| related | 相关 | 紫色 | 语义相关 |
| unrelated | 无关 | 灰色 | 不相关 |

---

## 特征分类映射

### 数据结构

```json
{
  "灵感点": {
    "猫咪": {
      "所属分类": ["猫咪物体", "物体", "实质"]
    }
  },
  "关键点": {
    "特征名": {
      "所属分类": ["小类", "中类", "大类"]
    }
  },
  "目的点": {
    "种草产品": {
      "所属分类": ["品牌种草", "创作者"]
    }
  }
}
```

### 显示格式

- 原始数据：`["猫咪物体", "物体", "实质"]`（从小类到大类）
- 可视化显示：`[实质/物体/猫咪物体]`（从大类到小类）

---

## 历史帖子来源

### 数据结构

```json
{
  "灵感点": [
    {
      "特征名称": "猫咪",
      "特征来源": [
        {
          "点的名称": "镜子里猫咪的反差萌表情",
          "点的描述": "创作者在给两只穿着同款毛衣的猫拍照时...",
          "帖子id": "69002ba70000000007008bcc",
          "帖子详情": {
            "title": "算了 跟你们没猫的说不清楚",
            "images": ["图片URL"],
            "like_count": 1847,
            "publish_time": "2025-10-28 10:34:16",
            "link": "小红书链接"
          }
        }
      ]
    }
  ]
}
```

### 用途

- 展示该特征在历史帖子中的应用案例
- 帮助理解特征的实际使用场景
- 提供参考素材和灵感

---

## 交互功能

### 1. 目录导航

- **点击跳转**：点击目录项快速定位到对应区域
- **自动高亮**：滚动时自动更新目录激活状态
- **固定悬浮**：目录固定在左侧，始终可见

### 2. 折叠展开

- **步骤折叠**：点击步骤标题展开/收起该步骤下的所有特征
- **特征折叠**：点击特征区域标题展开/收起匹配结果
- **匹配项折叠**：点击匹配项标题查看详细说明和历史来源

### 3. 帖子详情

- **主帖子**：点击左上角紧凑卡片查看完整详情
- **历史帖子**：点击历史来源卡片查看完整详情
- **图片轮播**：模态框中支持左右切换查看多张图片
- **关闭模态框**：点击背景或关闭按钮

### 4. 外部链接

- **查看原帖**：点击"查看原帖"链接跳转至小红书
- **链接阻止冒泡**：点击链接不会触发卡片的点击事件

---

## 样式设计

### 颜色方案

- **主色调**：紫色系（#667eea, #764ba2）
- **辅助色**：橙色（#fbbf24）用于灵感点
- **关系颜色**：
  - 完全相同：绿色
  - 包含：蓝色
  - 部分重叠：橙色
  - 相关：紫色

### 布局结构

```
+------------------+----------------------------------------+
|                  |  Tab导航（多帖子切换）                  |
+------------------+----------------------------------------+
|                  |  +----------------+------------------+ |
|                  |  | 帖子详情卡片    | 灵感点详情        | |
|  目录导航         |  | (点击展开)     | (固定展示)       | |
|  (固定左侧)       |  +----------------+------------------+ |
|                  |                                        |
|  - 帖子详情       |  How步骤分组                           |
|  - 灵感点1       |  +----------------------------------+  |
|    - 步骤1       |  | ▼ 步骤1 (来自: 灵感点1)           |  |
|    - 步骤2       |  |   [特征A] 匹配结果                 |  |
|  - 灵感点2       |  |     ▶ [分类] 人设特征X [关系] 分数  |  |
|                  |  +----------------------------------+  |
+------------------+----------------------------------------+
```

---

## 使用场景

### 场景1：分析How解构质量

1. 查看帖子被拆解成哪些灵感点
2. 了解每个灵感点的步骤结构
3. 检查特征匹配的准确性

### 场景2：理解特征应用

1. 点击展开匹配项查看详细说明
2. 查看历史帖子来源卡片
3. 学习特征在实际内容中的应用方式

### 场景3：对比不同帖子

1. 切换标签页查看不同帖子的解构结果
2. 对比相同灵感点在不同帖子中的表现
3. 发现内容创作的共性和差异

---

## 性能优化

### 1. 图片懒加载

- 历史帖子卡片的图片使用 `loading="lazy"`
- 减少初始加载时间

### 2. 滚动节流

- 目录激活状态更新使用50ms节流
- 避免频繁触发DOM操作

### 3. 默认折叠

- 步骤默认展开，便于快速浏览
- 匹配项默认折叠，减少页面高度

---

## 常见问题

### Q1: 为什么有些特征没有分类信息？

**A**: 只有在`特征名称_分类映射.json`中存在的特征才会显示分类。如果是新增特征，需要先更新分类映射文件。

### Q2: 为什么有些特征没有历史来源？

**A**: 只有在`特征名称_帖子来源.json`中存在的特征才会显示历史来源。并非所有特征都有历史应用案例。

### Q3: 如何更新可视化？

**A**: 当解构结果更新后，重新运行脚本：
```bash
python script/data_processing/visualize_how_results.py
```

### Q4: 能否导出可视化结果？

**A**: 生成的HTML文件是完全独立的，可以：
- 直接分享给他人在浏览器中查看
- 部署到Web服务器
- 保存为PDF（浏览器打印功能）

---

## 版本历史

### v1.0 (2025-11-17)

- 初始版本
- 多帖子标签页支持
- 智能目录导航和自动激活
- 紧凑帖子卡片设计
- 特征分类层级显示
- 历史帖子来源展示
- 三级折叠结构
- 点击查看帖子详情

---

## 相关脚本

- `match_inspiration_features.py` - 灵感点特征匹配脚本
- `visualize_inspiration_points.py` - 灵感点可视化脚本（另一个可视化工具）

---

## 技术栈

- **Python 3.x**: 数据处理和HTML生成
- **原生HTML/CSS/JavaScript**: 前端交互
- **无外部依赖**: 生成的HTML文件完全独立，无需网络请求