250 lines
7.9 KiB
Markdown
250 lines
7.9 KiB
Markdown
---
|
||
name: 试题讲解生成页面开发
|
||
overview: 开发一个试题讲解生成页面，用户输入试题后，系统调用AI文本模型分析试题复杂度并拆分为多个讲解点，然后为每个讲解点调用豆包图片生成模型创建讲解图片，最后调用阿里云语音合成模型为每张图片生成讲解音频，实现幻灯片式自动播放。
|
||
design:
|
||
architecture:
|
||
framework: vue
|
||
styleKeywords:
|
||
- Glassmorphism
|
||
- Dark Theme
|
||
- Modern
|
||
- Smooth Animations
|
||
fontSystem:
|
||
fontFamily: PingFang SC
|
||
heading:
|
||
size: 32px
|
||
weight: 600
|
||
subheading:
|
||
size: 18px
|
||
weight: 500
|
||
body:
|
||
size: 16px
|
||
weight: 400
|
||
colorSystem:
|
||
primary:
|
||
- "#8b5cf6"
|
||
- "#6366f1"
|
||
background:
|
||
- "#0f172a"
|
||
- "#1e293b"
|
||
text:
|
||
- "#f8fafc"
|
||
- "#94a3b8"
|
||
functional:
|
||
- "#10b981"
|
||
- "#ef4444"
|
||
- "#f59e0b"
|
||
todos:
|
||
- id: add-api-config
|
||
content: 在config/index.js中添加试题讲解API配置（文本分析、图片生成、音频合成）
|
||
status: completed
|
||
- id: create-page-component
|
||
content: 创建QuestionExplanation.vue页面组件，实现试题输入和状态管理
|
||
status: completed
|
||
dependencies:
|
||
- add-api-config
|
||
- id: implement-analysis-logic
|
||
content: 实现试题分析逻辑，调用文本模型拆分讲解点并生成内容
|
||
status: completed
|
||
dependencies:
|
||
- create-page-component
|
||
- id: implement-resource-generation
|
||
content: 实现图片生成和音频合成的批量生成逻辑
|
||
status: completed
|
||
dependencies:
|
||
- implement-analysis-logic
|
||
- id: implement-slideshow-player
|
||
content: 实现幻灯片播放器和音频同步播放逻辑
|
||
status: completed
|
||
dependencies:
|
||
- implement-resource-generation
|
||
- id: add-route-and-card
|
||
content: 在router添加路由配置并在HomePage添加功能卡片
|
||
status: completed
|
||
dependencies:
|
||
- create-page-component
|
||
---
|
||
|
||
## 产品概述
|
||
|
||
开发一个智能试题讲解生成页面，实现根据试题内容自动生成图文并茂的幻灯片式讲解。
|
||
|
||
## 核心功能
|
||
|
||
- 试题输入：提供文本框供用户输入试题内容
|
||
- 智能分析：调用AI文本模型分析试题复杂度，动态决定讲解点数量（3-8个）
|
||
- 内容生成：为每个讲解点生成详细讲解文本和对应的图片生成提示词
|
||
- 图片生成：调用豆包AI图片生成模型，批量生成讲解图片（支持组图生成）
|
||
- 音频合成：调用阿里云语音合成模型，为每个讲解文本生成配套音频
|
||
- 幻灯片播放：实现自动播放逻辑，图片与音频同步，音频播完自动切换下一张
|
||
- 播放控制：支持播放/暂停、上一张/下一张、进度指示器等交互控制
|
||
|
||
## 技术栈
|
||
|
||
- 前端框架：Vue 3 + Composition API
|
||
- 路由管理：Vue Router
|
||
- HTTP客户端：Axios
|
||
- 样式方案：Scoped CSS + Glassmorphism UI风格（与现有项目保持一致）
|
||
- API调用：前端直接调用（演示模式）
|
||
|
||
## 技术架构
|
||
|
||
### 系统流程
|
||
|
||
```mermaid
|
||
graph TD
|
||
A[用户输入试题] --> B[调用文本模型分析]
|
||
B --> C{分析试题复杂度}
|
||
C -->|简单| D[生成3个讲解点]
|
||
C -->|中等| E[生成5个讲解点]
|
||
C -->|复杂| F[生成7-8个讲解点]
|
||
D --> G[为每个讲解点生成详细文本和图片提示词]
|
||
E --> G
|
||
F --> G
|
||
G --> H[批量生成图片]
|
||
G --> I[批量合成音频]
|
||
H --> J[加载图片资源]
|
||
I --> K[加载音频资源]
|
||
J --> L[幻灯片播放]
|
||
K --> L
|
||
L --> M{音频播放完成?}
|
||
M -->|是| N[切换下一张]
|
||
N --> L
|
||
M -->|否| L
|
||
```
|
||
|
||
### 模块划分
|
||
|
||
1. **输入模块**：试题文本输入框、提交按钮、清空按钮
|
||
2. **处理模块**：试题分析、讲解文本生成、图片prompt生成
|
||
3. **资源生成模块**：图片生成API调用、音频合成API调用
|
||
4. **播放模块**：幻灯片展示、音频播放、自动切换逻辑
|
||
5. **控制模块**：播放/暂停、上下切换、进度指示
|
||
|
||
### API集成
|
||
|
||
**文本分析模型**：doubao-seed-2-0-lite-260215
|
||
|
||
- 用途：分析试题复杂度、拆分讲解点、生成讲解文本和图片提示词
|
||
- API：https://ark.cn-beijing.volces.com/api/v3/chat/completions
|
||
- 认证：使用 DOUBAO_KEY
|
||
|
||
**图片生成模型**：doubao-seedream-5-0-260128
|
||
|
||
- 用途：批量生成讲解图片（支持组图生成）
|
||
- API：https://ark.cn-beijing.volces.com/api/v3/images/generations
|
||
- 认证：使用 DOUBAO_KEY
|
||
- 特性：sequential_image_generation="auto"，max_images=8
|
||
|
||
**语音合成模型**：qwen3-tts-flash
|
||
|
||
- 用途：为讲解文本生成音频
|
||
- API：https://dashscope.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation
|
||
- 认证：使用 BAILIAN_API_KEY
|
||
- 音色：Cherry（芊悦，阳光积极的小姐姐音色）
|
||
|
||
## 实现要点
|
||
|
||
### 性能优化
|
||
|
||
- 图片生成采用组图模式，一次API调用生成所有图片，减少网络请求
|
||
- 音频合成采用并发请求，提升生成速度
|
||
- 资源预加载：在播放第一张时预加载后续图片和音频
|
||
- 使用URL.createObjectURL管理音频资源，避免内存泄漏
|
||
|
||
### 错误处理
|
||
|
||
- API调用失败重试机制（最多重试2次）
|
||
- 部分资源生成失败时，显示占位图/文本提示，不影响其他讲解点播放
|
||
- 超时处理：图片生成60秒超时，音频生成30秒超时
|
||
|
||
### 播放逻辑
|
||
|
||
- 使用HTML5 Audio API监听'ended'事件触发自动切换
|
||
- 当前音频播放完毕后立即切换到下一张图片并播放对应音频
|
||
- 播放完成后显示结束状态，提供重新播放按钮
|
||
|
||
### 状态管理
|
||
|
||
```
|
||
- idle: 初始状态
|
||
- analyzing: 正在分析试题
|
||
- generating: 正在生成图片和音频
|
||
- ready: 资源准备完成，等待播放
|
||
- playing: 正在播放
|
||
- paused: 暂停
|
||
- completed: 播放完成
|
||
- error: 错误状态
|
||
```
|
||
|
||
## 目录结构
|
||
|
||
### 新增文件
|
||
|
||
```
|
||
src/
|
||
├── views/
|
||
│ └── QuestionExplanation.vue # [NEW] 试题讲解页面主组件
|
||
├── config/
|
||
│ └── index.js # [MODIFY] 添加新API配置
|
||
├── router/
|
||
│ └── index.js # [MODIFY] 添加路由配置
|
||
└── views/
|
||
└── HomePage.vue # [MODIFY] 添加功能卡片
|
||
```
|
||
|
||
### 详细文件说明
|
||
|
||
**QuestionExplanation.vue** - 试题讲解页面主组件
|
||
|
||
- 实现试题输入界面
|
||
- 调用文本模型分析试题并生成讲解内容
|
||
- 调用图片生成API批量生成讲解图片
|
||
- 调用语音合成API生成配套音频
|
||
- 实现幻灯片式自动播放逻辑
|
||
- 提供播放控制（播放/暂停、上下切换、进度指示）
|
||
- 采用glassmorphism UI风格，深色主题
|
||
|
||
**config/index.js** - 添加API配置
|
||
|
||
- 试题讲解文本分析API配置
|
||
- 图片生成API配置（已有部分配置，可能需要补充）
|
||
- 语音合成API配置（已有部分配置，可能需要补充）
|
||
|
||
**router/index.js** - 添加路由
|
||
|
||
- 路径：/question-explanation
|
||
- 组件：QuestionExplanation
|
||
|
||
**HomePage.vue** - 添加功能卡片
|
||
|
||
- 标题：AI试题讲解生成
|
||
- 描述：智能分析试题，自动生成图文讲解，幻灯片式播放，让解题过程清晰易懂
|
||
- 图标：presentation/slides相关图标
|
||
- 路由：/question-explanation
|
||
|
||
## 设计风格
|
||
|
||
采用现代深色主题 + Glassmorphism（玻璃态）设计风格，与现有项目保持视觉一致性。
|
||
|
||
## 页面布局
|
||
|
||
采用垂直布局，分为三个主要区域：
|
||
|
||
1. **顶部输入区**：标题 + 试题输入框 + 操作按钮
|
||
2. **中间展示区**：幻灯片播放区域（图片 + 讲解文本）
|
||
3. **底部控制区**：播放控制按钮 + 进度指示器
|
||
|
||
## 视觉特点
|
||
|
||
- 深色背景（#0f172a）配合玻璃态卡片
|
||
- 渐变色彩点缀（紫色/蓝色渐变）
|
||
- 流畅的过渡动画
|
||
- 响应式设计，适配不同屏幕尺寸
|
||
|
||
## 交互设计
|
||
|
||
- 加载状态：骨架屏 + 进度提示
|
||
- 播放状态：当前幻灯片高亮，进度条动态更新
|
||
- 控制按钮：hover效果 + 点击反馈
|
||
- 平滑过渡：图片切换使用淡入淡出动画 |