# SimilarityVisualization

**Repository Path**: haobingwen/similarity-visualization

## Basic Information

- **Project Name**: SimilarityVisualization
- **Description**: 这是一个基于Flask的文档相似度数据可视化工具，将原有的单页HTML应用转换为前后端分离的架构，提供了更好的性能和用户体验。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-27
- **Last Updated**: 2025-10-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JSONL相似度数据可视化工具 - Flask版

## 项目概述

这是一个基于Flask的文档相似度数据可视化工具，将原有的单页HTML应用转换为前后端分离的架构，提供了更好的性能和用户体验。

## 主要优化特性

### 1. 对比窗口优化
- **全屏显示**: 将对比模态框从`modal-xl`改为`modal-fullscreen`，实现全屏显示
- **最小高度**: 文档内容区域设置最小高度500px，确保足够的显示空间
- **等宽字体**: 使用`Consolas, Monaco, Courier New`等宽字体，提高代码和文本的可读性
- **行号显示**: 添加行号显示功能，便于文档对比
- **同步滚动**: 支持两个文档面板的同步滚动，便于对比阅读

### 2. 性能优化
- **前后端分离**: 将数据处理逻辑移至后端，前端专注于UI展示
- **数据分页**: 支持大数据集的分页显示，避免浏览器卡顿
- **异步加载**: 使用AJAX异步加载数据，提升用户体验

### 3. 功能完善
- **语言检测**: 自动检测文档语言（中文/英文/混合）
- **多维度排序**: 支持按相似度、文档ID等多种方式排序
- **数据过滤**: 支持按语言类型过滤数据
- **数据导出**: 支持将处理后的数据导出为JSON格式
- **多种可视化**: 提供相似度分布图、散点图、网络关系图等多种可视化方式

## 技术架构

### 后端 (Flask)
- **框架**: Flask Web框架
- **数据处理**: JSONL文件解析、相似度计算、语言检测
- **API接口**: RESTful API设计，支持数据查询、文档内容获取、数据导出
- **文件处理**: 支持大文件上传和处理

### 前端 (HTML/CSS/JavaScript)
- **UI框架**: Bootstrap 5.3.0
- **图表库**: Chart.js (直方图、散点图)
- **网络图**: vis-network (文档关系网络)
- **交互功能**: 拖放上传、模态框、分页、排序、过滤

## 安装和运行

### 环境要求
- Python 3.7+
- Flask
- 现代浏览器（支持ES6+）

### 安装步骤
1. 克隆或下载项目文件
2. 安装依赖：
   ```bash
   pip install flask
   ```
3. 运行应用：
   ```bash
   python app.py
   ```
4. 打开浏览器访问：`http://localhost:5000`

### 文件格式要求
上传的JSONL文件每行应包含以下字段：
```json
{
  "doc1_id": "文档1的唯一标识",
  "doc2_id": "文档2的唯一标识", 
  "similarity": 0.85,
  "doc1_content": "文档1的完整内容",
  "doc2_content": "文档2的完整内容"
}
```

## 使用说明

### 1. 上传文件
- 点击"选择文件"按钮或拖放JSONL文件到上传区域
- 支持大文件上传（最大500MB）

### 2. 查看数据概览
- 系统自动显示文档对数量、唯一文档数量、平均相似度等统计信息

### 3. 数据表格操作
- **排序**: 按相似度、文档ID等字段排序
- **过滤**: 按语言类型（中文/英文/全部）过滤数据
- **分页**: 支持10/20/50/100条每页的分页显示
- **对比**: 点击"对比内容"按钮查看文档详细内容

### 4. 可视化分析
- **相似度分布**: 直方图显示相似度分布情况
- **散点图**: 显示文档对的相似度分布
- **网络关系图**: 可视化文档之间的相似关系

### 5. 文档对比
- **全屏显示**: 点击对比内容按钮打开全屏对比视图
- **高亮模式**: 支持高亮相似内容和差异内容
- **同步滚动**: 开启/关闭两个文档的同步滚动
- **行号显示**: 显示行号便于定位和对比

## API接口

### 主要接口
- `POST /upload` - 文件上传和处理
- `GET /api/data/<data_id>` - 获取分页数据
- `GET /api/visualization/<data_id>` - 获取可视化数据
- `GET /api/document/<data_id>/<index>` - 获取特定文档对内容
- `GET /api/export/<data_id>` - 导出处理后的数据

## 性能特点

1. **高效处理**: 支持大文件处理，内存使用优化
2. **响应式设计**: 适配不同屏幕尺寸
3. **用户体验**: 加载动画、错误提示、操作反馈
4. **数据安全**: 文件处理完成后自动清理临时文件

## 项目结构
```
相似度可视化flask/
├── app.py                 # Flask应用主文件
├── templates/
│   └── index.html        # 前端模板
├── uploads/              # 上传文件临时目录
├── test_*.jsonl         # 测试数据文件
└── README.md            # 项目说明文档
```

## 注意事项

- 确保上传的JSONL文件格式正确
- 大文件处理可能需要较长时间，请耐心等待
- 建议使用现代浏览器以获得最佳体验
- 生产环境建议配置适当的服务器和数据库

## 版本历史

- v1.0: 初始版本，完成Flask前后端转换
- v1.1: 优化对比窗口显示，解决窗口太小问题
- v1.2: 完善功能和界面，提升用户体验