recommend/README_WEB.md

# 网页版使用说明

## 功能介绍

这是一个基于Flask的网页应用，提供了**背诵排序**功能，可以帮助你：

1. **识别知识点**：从输入的文本中自动识别出要背诵的知识点
2. **随机排序**：对识别出的知识点进行随机排序
3. **转盘抽背**：通过转盘功能随机选择背诵内容

## 快速开始

### 1. 安装依赖

```bash
pip install Flask>=3.0.0
```

或者安装所有依赖：

```bash
pip install -r requirements.txt
```

### 2. 启动应用

运行启动脚本：

```bash
python start_web.py
```

或者直接运行：

```bash
python web_app.py
```

### 3. 访问应用

在浏览器中打开：

- 首页：http://localhost:5000
- 背诵排序：http://localhost:5000/recitation

## 使用步骤

### 第一步：输入背诵内容

在文本框中粘贴包含知识点列表的文本，支持以下格式：

- 列表格式（数字开头）
- 表格格式（从表格中复制）
- 普通文本（每行一个知识点）

示例：
```
第一章 西周
夏商学校名称
西周学在官府
国学乡学
六艺
私学兴起的原因与意义
稷下学宫
```

### 第二步：识别知识点

点击"识别知识点"按钮，系统会自动：
- 过滤无关内容（表头、页码等）
- 提取有效的知识点
- 显示识别结果

### 第三步：随机排序

点击"开始随机排序"按钮，系统会：
- 对知识点进行随机打乱
- 生成随机排序列表
- 创建转盘界面

### 第四步：转盘抽背

点击"转动转盘"按钮：
- 转盘会旋转3圈后停下
- 随机选中一个知识点
- 显示选中的内容

同时，页面下方会显示完整的随机排序结果列表。

## 技术说明

### 后端技术
- **Flask**：轻量级Web框架
- **Python正则表达式**：文本解析和知识点提取

### 前端技术
- **HTML5 + CSS3**：响应式页面设计
- **JavaScript (原生)**：交互逻辑
- **SVG**：转盘可视化

### 知识点识别规则

系统会智能识别以下内容：
1. 以数字或章节号开头的行（如"第一章"、"1. 知识点"）
2. 以列表符号开头的行（如"- 知识点"、"? 知识点"）
3. 包含中文且非空的行

系统会自动过滤：
- 表头行（包含"章节"、"知识点"等关键词）
- 页码行（如"第1页"）
- 说明文字
- 空行

## API接口

### 提取知识点

**POST** `/api/extract`

请求体：
```json
{
  "text": "输入文本内容"
}
```

响应：
```json
{
  "success": true,
  "items": ["知识点1", "知识点2", ...],
  "count": 2
}
```

### 随机排序

**POST** `/api/sort`

请求体：
```json
{
  "items": ["知识点1", "知识点2", ...]
}
```

响应：
```json
{
  "success": true,
  "items": ["知识点2", "知识点1", ...],
  "count": 2
}
```

## 目录结构

```
diet_recommendation_app/
├── web_app.py              # Flask应用主文件
├── start_web.py            # 启动脚本
├── templates/              # HTML模板
│   ├── index.html          # 首页
│   └── recitation.html     # 背诵排序页面
├── static/                 # 静态资源
│   ├── css/
│   │   ├── style.css       # 通用样式
│   │   └── recitation.css  # 背诵排序页面样式
│   └── js/
│       └── recitation.js   # 前端交互逻辑
└── logs/                   # 日志文件
    └── web_app.log
```

## 注意事项

1. 首次运行会自动创建必要的目录（templates、static、logs）
2. 建议在本地环境中使用，如需公网访问请配置防火墙和反向代理
3. 日志文件保存在 `logs/web_app.log`

## 故障排除

### 问题：无法启动应用

**解决方案**：
- 检查Flask是否已安装：`pip list | grep Flask`
- 检查端口5000是否被占用
- 查看日志文件 `logs/web_app.log`

### 问题：无法识别知识点

**解决方案**：
- 确保输入文本格式正确
- 尝试手动整理文本，每行一个知识点
- 检查是否包含特殊字符

### 问题：转盘不显示或旋转异常

**解决方案**：
- 检查浏览器是否支持SVG
- 清除浏览器缓存
- 使用现代浏览器（Chrome、Firefox、Edge等）