7.9 KiB
7.9 KiB
| name | overview | design | todos | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 试题讲解生成页面开发 | 开发一个试题讲解生成页面，用户输入试题后，系统调用AI文本模型分析试题复杂度并拆分为多个讲解点，然后为每个讲解点调用豆包图片生成模型创建讲解图片，最后调用阿里云语音合成模型为每张图片生成讲解音频，实现幻灯片式自动播放。 |
|
|
产品概述
开发一个智能试题讲解生成页面，实现根据试题内容自动生成图文并茂的幻灯片式讲解。
核心功能
- 试题输入：提供文本框供用户输入试题内容
- 智能分析：调用AI文本模型分析试题复杂度，动态决定讲解点数量（3-8个）
- 内容生成：为每个讲解点生成详细讲解文本和对应的图片生成提示词
- 图片生成：调用豆包AI图片生成模型，批量生成讲解图片（支持组图生成）
- 音频合成：调用阿里云语音合成模型，为每个讲解文本生成配套音频
- 幻灯片播放：实现自动播放逻辑，图片与音频同步，音频播完自动切换下一张
- 播放控制：支持播放/暂停、上一张/下一张、进度指示器等交互控制
技术栈
- 前端框架：Vue 3 + Composition API
- 路由管理：Vue Router
- HTTP客户端：Axios
- 样式方案：Scoped CSS + Glassmorphism UI风格（与现有项目保持一致）
- API调用：前端直接调用（演示模式）
技术架构
系统流程
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
模块划分
- 输入模块：试题文本输入框、提交按钮、清空按钮
- 处理模块：试题分析、讲解文本生成、图片prompt生成
- 资源生成模块：图片生成API调用、音频合成API调用
- 播放模块：幻灯片展示、音频播放、自动切换逻辑
- 控制模块：播放/暂停、上下切换、进度指示
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（玻璃态）设计风格，与现有项目保持视觉一致性。
页面布局
采用垂直布局，分为三个主要区域：
- 顶部输入区：标题 + 试题输入框 + 操作按钮
- 中间展示区：幻灯片播放区域（图片 + 讲解文本）
- 底部控制区：播放控制按钮 + 进度指示器
视觉特点
- 深色背景（#0f172a）配合玻璃态卡片
- 渐变色彩点缀（紫色/蓝色渐变）
- 流畅的过渡动画
- 响应式设计，适配不同屏幕尺寸
交互设计
- 加载状态：骨架屏 + 进度提示
- 播放状态：当前幻灯片高亮，进度条动态更新
- 控制按钮：hover效果 + 点击反馈
- 平滑过渡：图片切换使用淡入淡出动画