在求职者准备面试时，最需要的就是：模拟真实、个性化的面试问题。
于是我设计并开发了一个小型系统，用户只需输入职位信息，系统就能自动生成面试问题，并通过语音助手播放，模拟真实场景。
这个项目融合了：
- 📄 Prompt 工程
- 🤖 OpenAI API 调用
- 🔊 VAPI 语音助手集成
- ⚙️ 全栈接口设计（前端 + API + 后端逻辑）
🧱 技术架构
采用了前后端分离的架构，并使用语音平台 Vapi 提供语音播报功能。
用户输入 → 收集字段 → 调用生成API → 构造Prompt → 返回问题 → 播报语音
技术栈：
| 层级 | 技术 |
|---|---|
| 前端 | React + TypeScript + TailwindCSS |
| 表单交互 | 字段收集：role、type、level、techstack、amount |
| 后端 | Node.js + Next.js API 路由 |
| AI | OpenAI GPT-4 调用生成问题 |
| 语音播报 | VAPI 平台 API |
| 数据可视化（预留） | Recharts 可拓展支持评分图表 |
🔄 用户输入与 Prompt 构建逻辑
以下是 Prompt 模板的一部分：
The job role is ${role}.
The job experience level is ${level}.
The tech stack used in the job is: ${techstack}.
The focus between behavioural and technical questions should lean towards: ${type}.
The amount of questions required is: ${amount}.
Please return only the questions, without any additional text.
Return the questions formatted like this: ["Question 1", "Question 2", "Question 3"]
👉 我特别注意了 prompt 的“干净性”，避免生成无关内容，让语音播报更清晰。
🔗 API 请求结构（/api/vapi/generate）
POST /api/vapi/generate
{
role: "Full Stack Engineer",
type: "technical",
level: "mid-level",
techstack: "React, Node.js, MongoDB",
amount: 5
}
服务端收到请求后：
- 动态构造 prompt
- 调用 OpenAI API（
gpt-4） - 返回格式化好的问题数组
- 给 VAPI 平台返回语音文本
🔊 集成 VAPI：播报语音结果
我通过 VAPI 的 API Request 模块实现自动播报逻辑。
在 VAPI 的 workflow 中我设置了：
- 用户参数收集
- 调用生成问题的 endpoint（POST 请求）
- 播报返回的内容
- 通话结束逻辑
示例流程图：
（你之前那张图可以放这里）
遇到的问题 & 解决方式
| 问题 | 解决方案 |
|---|---|
| TS2367 类型不兼容 | 改用枚举类型（CallStatus.ACTIVE）避免字符串比较 |
| OpenAI 输出结构不稳定 | 通过增加 prompt 中的格式限制控制输出形态 |
| VAPI 语音重复或中断 | 优化语音 payload，避免多步嵌套或语义不清 |
🚀 后续扩展计划
- 增加用户登录和历史记录功能
- 支持用户评分与面试反馈生成
- 加入 Recharts 图表呈现面试表现
