# AI讲故事功能使用指南

## 功能介绍

AI讲故事是一个智能童话阅读系统，为孩子提供个性化的故事阅读体验。系统具有以下特点：

### 🌟 核心功能
- **智能故事库**：包含多个分类的精选故事
- **AI语音朗读**：虚拟猫头鹰老师自然语音讲解
- **交互式阅读**：支持逐段阅读和进度控制
- **语音控制**：支持语音开关和播放控制
- **响应式设计**：适配各种设备尺寸

## 文件结构

```
├── html/
│   └── ai_storytelling.html          # 主页面文件
├── css/
│   └── ai_storytelling.css           # 专用样式文件
├── js/
│   └── aiStorytelling.js             # 主要功能逻辑
└── data/
    └── storyBank.json                # 故事数据库
```

## 使用方法

### 1. 启动系统
```bash
# 进入项目目录
cd rg-09112127

# 启动本地服务器
python -m http.server 8000

# 在浏览器中打开
http://localhost:8000/html/ai_storytelling.html
```

### 2. 功能操作

#### 📚 选择故事
- **分类筛选**：使用顶部的筛选按钮按故事类型浏览
- **查看详情**：点击"详情"按钮查看故事信息
- **开始阅读**：点击"开始阅读"进入阅读界面

#### 🎭 阅读体验
- **段落导航**：使用"上一段"/"下一段"按钮控制进度
- **AI朗读**：点击"朗读本段"听虚拟老师讲故事
- **语音控制**：右下角的语音控制按钮
  - 🔇 开启/关闭语音
  - ⏯️ 播放/暂停
  - ⏹️ 停止播放

#### ⌨️ 快捷键支持
- `ESC`：关闭阅读器
- `←`/`→`：上一段/下一段
- `空格`：朗读当前段落

### 3. 故事数据结构

每个故事包含以下信息：
```json
{
  "id": "story_xxx",           // 故事唯一标识
  "title": "故事标题",         // 显示标题
  "category": "故事分类",      // 用于筛选
  "difficulty": 3,            // 难度等级(1-5)
  "cover": "封面图片路径",     // 故事封面
  "description": "故事简介",   // 简短描述
  "timeEstimate": "预计时长",  // 阅读时间
  "ageRange": "适合年龄",      // 推荐年龄
  "content": {                 // 故事内容
    "beginning": {...},        // 开头部分
    "middle": {...},          // 中间部分  
    "ending": {...}           // 结尾部分
  },
  "questions": [...]          // 故事相关问题
}
```

## 技术特色

### 🧠 AI集成
- **虚拟猫头鹰老师**：使用`virtualTeacher.js`提供语音互动
- **语音合成**：集成讯飞语音API进行自然语音朗读
- **智能交互**：根据用户行为调整讲解方式

### 🎨 用户体验
- **动画效果**：使用Animate.css提供流畅动画
- **响应式布局**：支持桌面和移动设备
- **无障碍支持**：集成语音播报功能

### 📱 适配特性
- **渐进加载**：分步加载内容，提升用户体验
- **错误处理**：优雅的错误处理和用户反馈
- **性能优化**：图片懒加载和缓存机制

## 自定义扩展

### 添加新故事
1. 编辑`data/storyBank.json`文件
2. 添加新的故事对象到`stories`数组
3. 确保故事数据结构完整
4. 添加对应的图片资源到`asset`目录

### 修改语音设置
- 在`js/aiStorytelling.js`中调整语音参数：
```javascript
window.virtualTeacher.speak(text, {
    rate: 0.8,      // 语速(0.1-10)
    pitch: 1.1,      // 音调(0-2)
    volume: 0.8      // 音量(0-1)
});
```

### 样式自定义
- 编辑`css/ai_storytelling.css`调整外观
- 主要样式变量：
  - 主背景色：`#667eea`到`#764ba2`渐变色
  - 按钮色彩：蓝色系(`#667eea`)
  - 卡片样式：圆角20px，半透明背景

## 故障排除

### 常见问题
1. **音频播放失败**
   - 检查网络连接
   - 确认语音API密钥配置
   - 检查浏览器音频权限

2. **图片加载失败**
   - 确认图片路径正确
   - 检查文件权限
   - 查看控制台错误信息

3. **动画卡顿**
   - 降低动画复杂度
   - 检查设备性能
   - 考虑禁用某些效果

### 调试模式
在浏览器控制台中启用详细日志：
```javascript
console.log('激活AI讲故事调试模式');
```

## 更新日志

### v1.0.0 (2024-01-XX)
- ✅ 完成基础功能开发
- ✅ 集成虚拟猫头鹰老师
- ✅ 添加语音控制功能
- ✅ 实现响应式设计
- ✅ 提供5个示例故事

## 技术支持

如需技术支持或功能建议，请联系开发团队。

---

**享受AI讲故事的美好时光！** 🎉📚✨