【Code With SOLO】用 SOLO 从零打造一款数据驱动的英语精听学习工具 Echo

SOLO挑战赛专区
1

一、摘要

我用 TRAE SOLO 从零开始开发了一款名为 Echo 的英语精听学习工具。只需粘贴 YouTube 链接，系统会自动提取字幕、智能断句，然后你就可以开始沉浸式的听写练习了。项目包含完整的前后端、数据库、用户认证、数据统计等功能，支持多种听写模式、倍速播放、错误词汇本、学习贡献图等功能，全部代码由 SOLO 生成。

二、背景

我是一名英语学习者，一直想找一款真正有效的精听练习工具。市面上的工具要么功能单一，要么无法自定义学习内容。我的需求是：

  • 能用自己喜欢的 YouTube 视频来练习听力

  • 支持逐句精听和听写

  • 能记录我的错误词汇，方便复习

  • 有数据统计，让我看到进步

之前尝试过自己开发，但前后端、数据库、媒体处理等技术栈太复杂，一直搁置。直到遇到 TRAE SOLO，我决定挑战一下——让 AI 帮我从零打造这个工具。

三、实践过程

3.1 项目架构设计

我首先向 SOLO 描述了我的需求，它帮我设计了完整的技术架构：

前端技术栈：

  • React 18 + TypeScript + Vite

  • Tailwind CSS（暗色主题）

  • Zustand（状态管理）

  • React Router（路由）

后端技术栈：

  • Python FastAPI

  • SQLModel + PostgreSQL

  • Redis（缓存）

  • yt-dlp + FFmpeg + OpenAI Whisper（媒体处理）

部署方案：

  • Docker Compose 一键部署

3.2 核心功能开发

功能一：YouTube 视频导入

这是项目的核心入口。用户只需粘贴 YouTube 链接，系统会：

  1. 使用 yt-dlp 获取视频信息和音频

  2. 使用 OpenAI Whisper 进行语音识别

  3. 智能断句并生成时间戳

  4. 存储到数据库

SOLO 帮我实现了完整的导入流程，包括错误处理和进度提示。

image
image2530×1408 160 KB

功能二：专业播放控制

即使不听写，只练习听力也是一个重要的学习方式。SOLO 帮我实现了专业的播放控制功能：

播放控制：

  • 单句循环播放：精听必备，反复听同一句直到听懂

  • 倍速播放：0.5x - 2x，从慢速适应到原速再到加速挑战

  • 上一句/下一句跳转：快速定位，配合字幕点击跳转

  • YouTube 原视频同步：视频和字幕完美对齐

字幕面板：

  • 实时高亮当前播放句子

  • 点击任意句子即可跳转播放

  • 显示完成状态标记

这个功能让用户可以纯粹地练习听力，不需要听写也能高效学习。

image
image1920×1084 233 KB

功能三：沉浸式听写练习

在听力练习的基础上，SOLO 帮我实现了四种难度的听写模式：

四种听写模式：

  • Blind（盲听）：完全遮蔽，适合高难度挑战

  • Mask（遮蔽）：只遮蔽难词，常用词显示

  • Hint（提示）：显示首字母，降低难度

  • Show（显示）：显示完整句子，用于学习

听写模式下会自动开启单句循环，帮助用户专注于当前句子。

image
image1920×1130 226 KB

功能四：智能纠错系统

SOLO 实现了一个基于 Levenshtein 距离的智能纠错算法：

  • correct：正确词汇（绿色）

  • missing：漏掉的词汇（蓝色下划线）

  • extra：多余的词汇（红色删除线）

  • wrong：拼写错误（红色，显示正确答案）

image
image1920×1102 263 KB

功能五：数据驱动学习

SOLO 帮我实现了完整的数据统计系统：

  • 学习时长统计

  • 准确率追踪

  • 错误词汇本（按频率/时间排序）

  • GitHub 风格的贡献图

image
image2546×1848 354 KB

3.3 踩过的坑

坑一：Whisper 模型加载慢

  • 问题：首次加载 Whisper 模型需要下载，用户等待时间长

  • 解决：SOLO 建议使用 base 模型，并在 Docker 镜像中预加载

坑二：字幕时间同步不准

  • 问题：YouTube 原生字幕和视频时间轴有偏差

  • 解决：改用 Whisper 重新识别，获得精确的词级时间戳

坑三：前后端跨域问题

  • 问题：开发环境下前端无法调用后端 API

  • 解决：SOLO 帮我配置了 Vite 代理和 FastAPI CORS

四、成果展示

4.1 功能清单

功能 状态 说明
YouTube 视频导入 :white_check_mark: 自动提取字幕
智能断句 :white_check_mark: 基于标点和语义
四种听写模式 :white_check_mark: Blind/Mask/Hint/Show
倍速播放 :white_check_mark: 0.5x - 2x
单句循环 :white_check_mark: 精听必备
智能纠错 :white_check_mark: 四种错误类型
错误词汇本 :white_check_mark: 自动记录
学习统计 :white_check_mark: 时长/准确率/贡献图
Docker 部署 :white_check_mark: 一键启动
艾宾浩斯复习 :construction: 开发中
口语评测 :construction: 开发中

五、效果与总结

5.1 开发效率

指标 传统开发 使用 SOLO
项目搭建 2-3 天 2 小时
核心功能 1-2 周 3 天
Bug 修复 持续迭代 实时对话解决
文档编写 半天 自动生成

原本需要几周的全栈项目，用 SOLO 几天就完成了核心功能！

5.2 我的收获

  1. AI 是最好的编程搭档：SOLO 不仅写代码，还帮我设计架构、解决技术难题

  2. 从想法到产品更快了：不需要在技术细节上卡住，专注于产品本身

  3. 学到了很多：通过和 SOLO 对话，我学会了 FastAPI、Whisper、Docker 等技术

5.3 SOLO 在流程中的作用

  • 架构设计：帮我选择合适的技术栈

  • 代码生成：前后端代码全部由 SOLO 生成

  • 问题解决：遇到 Bug 直接问 SOLO，实时解决

  • 代码审查：SOLO 帮我检查代码质量和安全性

5.4 可复用的方法

  1. 先描述需求，再生成代码：让 SOLO 理解你的目标

  2. 分模块开发：一个功能一个功能地实现

  3. 及时反馈问题：遇到 Bug 立刻告诉 SOLO

  4. 让 SOLO 解释代码：学习的同时也便于维护

六、致谢

感谢 TRAE SOLO 让我实现了这个想法。这个项目证明了：有了 AI，每个人都可以是全栈开发者。

如果你也想学习英语，或者想看看 AI 能写出什么样的代码，欢迎试用 Echo！

技术栈: React + TypeScript + FastAPI + PostgreSQL + Redis + Whisper + Docker

开发工具: TRAE SOLO

:light_bulb: 提示：本项目完全使用 TRAE SOLO 开发，代码全部由 AI 生成，展示了 AI 辅助编程的强大能力。

2

太哇塞了吧

3

trae太给力啦

1 个赞