|
|
@@ -0,0 +1,410 @@
|
|
|
+# 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文件完全独立，无需网络请求
|
