# 🖥️ Web界面使用指南

## 📋 界面功能说明

### 🎯 "开始本地视频测试" 按钮功能

这个按钮的作用是：
- **启动预置测试视频** - 使用系统自带的测试视频进行手部检测
- **无需外部视频流** - 不需要摄像头或外部视频文件
- **一键测试** - 点击按钮即可开始测试系统功能

### 🔧 按钮工作原理

1. **点击按钮** → 发送 `start_local_test` 事件到服务器
2. **服务器检查** → 查找以下测试视频文件：
   - `data/videos/test_basic.mp4` (基础手部移动测试)
   - `data/videos/test_gesture.mp4` (手势测试)
3. **自动播放** → 找到测试视频后自动开始播放和检测
4. **实时显示** → 在Web界面显示检测结果

### 📁 测试视频文件要求

按钮会按顺序查找以下文件：
```
data/videos/test_basic.mp4    # 第一优先级
data/videos/test_gesture.mp4  # 第二优先级
```

### 🎬 如何生成测试视频

如果测试视频不存在，运行以下命令生成：

```bash
# 生成测试视频
python create_test_video.py

# 或者指定类型
python create_test_video.py --type both --duration 10
```

### 🔍 按钮状态说明

| 按钮状态 | 说明 |
|---------|------|
| "开始本地视频测试" | 按钮就绪，可以点击 |
| "启动中..." | 正在启动测试，按钮禁用 |
| 恢复原状态 | 5秒后自动恢复 |

### 📊 测试结果显示

点击按钮后，你会看到：

1. **系统日志区域**：
   - ✅ 成功信息：`本地测试已开始，使用视频: data/videos/test_basic.mp4`
   - ❌ 错误信息：`未找到测试视频文件`
   - 💡 帮助信息：`请先生成测试视频：python create_test_video.py`

2. **视频预览区域**：
   - 显示测试视频内容
   - 显示手部检测结果
   - 显示关键点和连接线

3. **控制面板**：
   - 实时更新的X、Y、Z角度值
   - 抓取状态指示器
   - 当前动作显示
   - FPS计数

### 🚨 常见问题

#### 问题1：按钮点击没有反应
**原因**：测试视频文件不存在
**解决**：
```bash
# 检查文件是否存在
ls -la data/videos/

# 如果没有文件，生成测试视频
python create_test_video.py
```

#### 问题2：出现错误信息
**查看日志**：在Web界面的"系统日志"区域查看具体错误信息

#### 问题3：视频不显示
**检查**：
- 确保测试视频文件存在
- 查看浏览器控制台是否有错误
- 检查服务器日志

### 🎯 使用步骤

1. **确保测试视频存在**：
   ```bash
   # 检查文件
   ls data/videos/
   
   # 如果没有，生成测试视频
   python create_test_video.py
   ```

2. **启动服务器**：
   ```bash
   ./start_service.sh
   ```

3. **打开Web界面**：
   访问 `http://localhost:5000`

4. **点击测试按钮**：
   点击"开始本地视频测试"按钮

5. **观察结果**：
   查看视频预览和检测数据

### 💡 提示

- 这个功能主要用于**系统测试**和**功能演示**
- 如果要使用**真实视频流**，需要：
  - 启动时指定视频文件：`./start_service.sh --test-video your_video.mp4`
  - 或者通过外部客户端发送视频流

### 🔗 相关文档

- [本地测试指南](LOCAL_TEST_GUIDE.md) - 详细的本地测试说明
- [README.md](README.md) - 项目总体说明
- [系统测试脚本](test_system.py) - 自动化测试

## 🎉 现在试试吧！

1. 运行 `python create_test_video.py` 生成测试视频
2. 启动服务器 `./start_service.sh`
3. 打开 `http://localhost:5000`
4. 点击"开始本地视频测试"按钮
5. 观察手部检测的神奇效果！