# 可视化功能使用指南

## 🎯 问题修复说明

经过修复，网站的可视化功能现在已经完全正常工作：

### ✅ 修复的问题
- **Surface模式显示问题**：现在可以正确显示分子表面
- **Sphere球形区域显示问题**：现在可以正确显示球形预测区域
- **颜色渐变问题**：Surface模式下的概率渐变色现在正常工作

## 🖥️ 使用方法

### 1. 启动服务器
```bash
cd src/bce/website
conda activate ReCEP
python run_server.py --host 0.0.0.0 --port 8001
```

### 2. 访问网站
打开浏览器，访问：`http://localhost:8001`

### 3. 预测设置
- 输入PDB ID（例如：5I9Q）
- 选择链ID（例如：A）
- 点击"Predict Epitopes"

### 4. 查看结果 - 可视化选项

#### 🎨 Display Mode（显示模式）
- **Predicted Epitopes**：高亮显示预测的epitope残基
- **Probability Gradient**：按预测概率显示渐变色
- **Top-k Regions**：显示top-k预测区域，每个区域不同颜色

#### 🧬 Representation（表示方式）
- **Cartoon**：蛋白质二级结构表示
- **Surface**：✅ 分子表面（已修复）
- **Stick**：原子棒状表示
- **Sphere**：空间填充模型

#### 🔮 Show Spherical Regions
- 勾选此选项可显示球形预测区域
- ✅ 球形区域显示功能已完全修复
- 每个区域用不同颜色的透明球体表示

## 📊 修复后的功能特点

### Surface模式
- 🎯 **正确渲染**：分子表面现在能正确显示
- 🌈 **颜色支持**：支持所有显示模式的颜色映射
- 📈 **概率渐变**：在Probability Gradient模式下显示平滑的颜色过渡
- 🎨 **区域着色**：在Top-k Regions模式下每个区域有不同颜色

### Sphere球形区域
- 🔍 **精确定位**：球形区域精确对应预测的中心残基
- 📏 **准确半径**：使用实际预测半径（默认19.0 Å）
- 🎨 **颜色区分**：每个区域使用不同颜色便于区分
- 👁️ **透明度**：适当的透明度设置不会遮挡蛋白质结构

## 🧪 测试验证

所有功能都通过了自动化测试：
- ✅ 数据结构完整性检查
- ✅ Surface模式兼容性验证
- ✅ Sphere显示数据准备验证
- ✅ 颜色渐变范围检查

## 🎮 交互操作

### 鼠标控制
- **左键拖拽**：旋转视角
- **滚轮**：缩放
- **右键拖拽**：平移

### 控制按钮
- **Update Visualization**：应用新的可视化设置
- **Reset View**：重置视角到初始状态
- **Save Image**：保存当前视图为PNG图片

## 🔧 技术实现

### 后端修复
- 在`prepare_visualization_data`函数中添加了radius信息
- 确保`top_k_regions`包含所有必要的字段

### 前端修复
- 修复了3Dmol.js的surface渲染逻辑
- 实现了完整的sphere显示功能
- 改进了不同模式下的颜色处理

## 📋 使用建议

1. **最佳体验**：推荐使用Chrome或Firefox浏览器
2. **性能优化**：对于大型蛋白质，建议先使用Cartoon模式查看整体结构
3. **Surface模式**：适合查看epitope的表面可及性
4. **Sphere模式**：适合理解预测区域的空间分布
5. **组合使用**：可以同时开启Surface和Sphere模式获得最佳视觉效果

## 🎯 预期效果

修复后，您应该能够：
- 🔍 在Surface模式下看到完整的分子表面
- 🌈 在Probability Gradient模式下看到平滑的颜色过渡
- 🔮 在勾选"Show Spherical Regions"后看到透明的球形区域
- 🎨 在Top-k Regions模式下看到不同颜色的区域高亮

如果仍有问题，请检查浏览器控制台是否有JavaScript错误。