Retelling Front

Retelling 的手机优先 Web 前端，使用 Next.js、React 和 Tailwind CSS 构建。界面覆盖账号登录、音频导入、原音播放、浏览器录音、AI 评分、复盘历史和个人统计。

FastAPI 后端位于独立仓库：kingname/retelling。

功能

• 注册、登录与本地会话恢复
• 上传真实音频并创建异步切分任务
• 播放原音片段、浏览器录音和复述提交
• 轮询 AI 评审任务状态
• 查看完整反馈、历史记录和练习统计
• 邀请码注册开关

新用户从空状态开始；项目不会注入默认课程、模拟评分或演示复盘。

本地运行

先按后端仓库说明启动 API，然后执行：

git clone https://github.com/kingname/retelling-front.git
cd retelling-front
npm install
cp .env.example .env.local
npm run dev

浏览器打开 http://127.0.0.1:3000。

环境变量

NEXT_PUBLIC_API_BASE_URL=http://127.0.0.1:8001/api/v1
NEXT_PUBLIC_REGISTRATION_INVITE_REQUIRED=false

• NEXT_PUBLIC_API_BASE_URL 必须包含 /api/v1。部署时填写完整 HTTPS 地址，例如 https://api.example.com/api/v1。
• 后端开启 REGISTRATION_INVITE_REQUIRED=true 时，前端也要设置 NEXT_PUBLIC_REGISTRATION_INVITE_REQUIRED=true。
• 所有 NEXT_PUBLIC_* 值都会进入浏览器包，不能放 Gemini Key、数据库连接串、会话密钥或其他秘密。

项目结构

retelling-front/
├── app/
│   ├── page.tsx         # 登录和完整练习应用
│   ├── LandingPage.tsx  # 进入应用前的介绍页
│   ├── globals.css      # Tailwind 与共享样式
│   └── layout.tsx       # 元数据和根布局
├── lib/api.ts           # API 请求、数据映射和会话存储
├── public/assets/       # 运行时图片资源
└── .env.example

lib/api.ts 是前端访问后端的唯一入口。后端字段或路由变化时，应同步更新这里的类型和映射。

部署

Vercel 项目至少需要配置：

NEXT_PUBLIC_API_BASE_URL=https://api.example.com/api/v1
NEXT_PUBLIC_REGISTRATION_INVITE_REQUIRED=false

后端同时配置允许的前端来源：

FRONTEND_ORIGINS=https://your-app.vercel.app,https://www.example.com

不要把 API 地址只写成 /api/v1，除非项目另外配置了同域反向代理；否则浏览器会请求前端部署域名自身。

检查

npm run build

建议在桌面和手机浏览器手动走通：登录 → 导入音频 → 播放原音 → 录音 → 提交评分 → 下一段 → 复盘。

License

本项目采用 MIT License。