how

How解构结果可视化工具

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

---

快速开始

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解构结果数据结构

主要结构

{
  "帖子详情": {
    "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	无关	灰色	不相关

---

特征分类映射

数据结构

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

显示格式

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

---

历史帖子来源

数据结构

{
  "灵感点": [
    {
      "特征名称": "猫咪",
      "特征来源": [
        {
          "点的名称": "镜子里猫咪的反差萌表情",
          "点的描述": "创作者在给两只穿着同款毛衣的猫拍照时...",
          "帖子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: 当解构结果更新后，重新运行脚本：

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文件完全独立，无需网络请求