【学习工作赛道】Lingo Friends Demo —— 方言&外语口语陪练，沉浸式多语言对话体验

TRAE AI 创造力大赛 【大赛初赛专区】
1

  • 我是谁： 我是一名工作一年多的职场新人，目前从事半导体行业工作。

  • 我是怎么用 TRAE 把 Demo 做出来的：作为职场新人，我渴望不断提升自己的技能，尤其是英语能力，以便更好地应对工作中的国际化需求。说实话，我之前完全没有系统学过编程，对前端开发一窍不通。但是 TRAE 让我这个技术小白也能做出一个能跑的应用，整个过程真的很神奇！

    从想法到落地，我是这样和 TRAE 配合的：

    1. 把想法说清楚，它帮我拆解
      一开始我只是跟它说：“我想做一个能练习英语的 APP，可以和虚拟人物对话，最好能语音交流。” TRAE 就帮我把这个模糊的想法拆成了具体的功能模块：首页角色选择、聊天界面、语音识别、语音合成、对话逻辑等等。它还帮我选好了技术栈（React + TypeScript + Vite），告诉我需要哪些依赖和配置。

    2. "原来这么简单"的时刻
      让我最惊喜的是 UI 界面的开发。我跟 TRAE 描述我想要的样子：“首页要有角色卡片，每个卡片有头像、名字、语言标签，背景要有动态效果”，它就直接生成了完整的代码，包括样式和交互。当我看到页面第一次渲染出来的时候，那种成就感真的很难形容！

    3. 一起处理搞不定的坎
      语音功能是我最担心的部分。我完全不知道怎么实现语音识别和语音合成，更别说方言发音了。但是 TRAE 一步步帮我解决：先集成了浏览器原生的 Web Speech API，让基本功能跑起来；当发现原生 API 不支持方言时，它帮我调研并集成了讯飞语音服务；调试签名算法的时候，它不停地陪我反复尝试
      最让我感动的是 ，当我遇到问题（比如讯飞 API 连接失败、语音识别不灵敏），我只需要把错误日志发给 TRAE，它就能帮我分析原因并给出修复方案。这种"遇到问题→描述问题→得到解决方案"的循环，让我这个小白也能不断推进项目。（但目前来讲，还是存在方言部分未能完全实现的问题，只能听到机械音）

    4. 从英语到方言的扩展
      原本我只想做英语练习，但在制作过程的启发下，我扩展了方言功能。它帮我添加了四川话、东北话、湖南话、粤语等角色，让应用更有特色。这个过程中，我也学习到了很多关于中国方言文化的知识。

    TRAE 就像一个耐心的技术搭档，我负责提出需求和创意，它负责把想法变成代码。没有它，我根本不可能在这么短的时间内做出一个功能完整的应用。这让我相信，只要有想法，技术不再是障碍。

  • 是什么：一个基于 Web 的沉浸式口语练习平台，支持与不同地区的 NPC 进行实时语音对话。

  • 面向谁：想要学习方言（四川话、东北话、湖南话、粤语）或外语（英语、日语）的人群，以及喜欢地域文化交流的用户。

  • 主要功能：:speaking_head: 实时语音对话 ：支持语音输入、语音识别、NPC 语音回复的完整对话闭环

  • :globe_showing_europe_africa: 8 位特色 NPC ：川川（四川话）、大鹏（东北话）、湘妹子（湖南话）、阿Wing（粤语）、Leo/Amelia/Daniel（英语）、Sora（日语）

  • :studio_microphone: 面对面对话模式 ：自动轮流转接，像和真人聊天一样自然

    A3$~AH_O039P8UFD)TA9NL
    A3$~AH_O039P8UFD)TA9NL1920×1275 214 KB

    M4MR$WK{92YB$LFWSZ6%T
    M4MR$WK{92YB$LFWSZ6%T1859×1602 135 KB

    DK6Y3}(91K$}Y{8E%4L5
    DK6Y3}(91K$}Y{8E%4L51861×1560 156 KB

2. Demo 创作思路

  • 灵感来源：在学习方言和外语的过程中，很多人面临"不敢开口"、"没有练习对象"的问题。我们希望创造一个轻松有趣的环境，让用户可以和不同地域特色的 NPC 聊天，既能练习语言，又能了解各地文化。

  • 想解决的问题：缺少真实对话场景，学习的语言知识难以应用；方言学习资源匮乏，市场上缺少地道方言练习工具，传统语言学习软件枯燥，缺乏趣味性和沉浸感

  • 为什么做这个方向：中国地域广阔，方言文化丰富，方言学习是一个独特的市场需求；AI 语音技术的发展使得实时语音对话成为可能；游戏化、场景化的学习方式更容易坚持和投入

3. Demo 体验地址

  • 开发服务器地址 ： http://localhost:5173/

    使用说明 ：

    1. 打开浏览器访问（推荐使用 Google Chrome）
    2. 在首页选择想要练习的语言类型（家乡语言或国际语言）
    3. 点击 NPC 卡片进入聊天界面
    4. 可以使用语音输入或文字输入与 NPC 对话
    5. 点击"开始实时对话"按钮进入自动轮流转接模式

4. TRAE 实践过程

  • 清晰展示用 TRAE 完成 Demo 开发的完整流程：
    开发环境 ：TRAE IDE + Vite + React + TypeScript + Tailwind CSS

    关键开发步骤 ：

    步骤 1：需求分析与技术选型
    使用 TRAE 的智能体规划能力，将需求拆解为多个子任务
    确定技术栈：React + TypeScript + Vite + Tailwind CSS + Zustand
    设计 NPC 数据结构和对话状态管理

    步骤 2：UI 界面开发
    创建首页、聊天页、练习页等核心页面
    设计 NPC 卡片组件和动态背景效果
    实现响应式布局，支持移动端和桌面端

    步骤 3：语音功能集成
    集成 Web Speech API 实现语音识别和语音合成
    接入讯飞语音服务，支持方言和多语种发音
    实现实时对话状态机（聆听 → 思考 → 回答）

    步骤 4：调试与优化
    修复语音识别不灵敏问题
    优化讯飞 API 签名算法和连接稳定性
    添加详细的错误处理和日志输出

  • 开发关键步骤截图（不少于 3 张）；

    16%JTE)R(A%K{XS%_{N0O
    16%JTE)R(A%K{XS%_{N0O2686×1544 453 KB

  • S9IME0HA~0$PXCV%LA(R6
    S9IME0HA~0$PXCV%LA(R62640×1529 393 KB

    R9GUR8LC3QERXISE0ICURB
    R9GUR8LC3QERXISE0ICURB2668×1367 357 KB

  • 关键任务对话的 Session ID：
    实时对话：.744795215506412:f980d539e7b434a9e10528183dd2f52e_6a4a05e1dd08003d708f4742.6a52e493dd08003d708f4ba9.6a52e49285e85ab069588822:Trae CN.T(2026/7/12 08:49:23)
    口音：.744795215506412:07b8822e5ef7ada0cdd34d3db1aaf78d_6a4a05e1dd08003d708f4742.6a4a4bc0dd08003d708f492d.6a4a4bbe85e85ab069588812:Trae CN.T(2026/7/5 20:19:12)
    视觉效果：.744795215506412:e5ea05ca998b15b10682baaff379317b_6a4a05e1dd08003d708f4742.6a539a26dd08003d708f4f11.6a539a2685e85ab069588833:Trae CN.T(2026/7/12 21:44:06)

5. 对应的报名审核通过的帖子链接
【学习工作赛道】做一个可以练习家乡语言和国际语言的应用

2

看起来不错，已投票。麻烦帮我给我的作品投一票，互相支持支持吧https://forum.trae.cn/t/topic/96939/15?u=一叶孤舟