Yuan's Blog

如何 8 天利用 AI 从 0-1 搭建口语网站

基本信息（Basic Info）

  • ** 项目名称 **（Project Name）：loud mouth

  • ** 日志日期 **（Date）：2025.04.03-

  • ** 开发者 **（Developer）： lee ，liyuan

2025.04.03 day1

口语开发网站第一天 ，主要工作内容如下，利用 ChemGPT 明确了网站开发的一些需求 然后通过 RepLift 实现了第一步简单的功能，包括用户可以上传文件及字幕 可以同步字幕 可以点击字幕中的单词 进行查询加生词添加到我们的词汇本里面。 遇到的问题，浏览器不太支持 mkv 格式的视频播放。 经验总结，不要一下子给 agnet 太复杂的功能描述，要根据功能的复杂度进行拆分。如果同一个任务 agent 总是不能实现，那么就需要转换思路，把功能实现换种更加直观的方式。 agent 先实现最基础的一些 mvp 功能，其他细节后续再慢慢优化。

待办：词汇查询接口的 api 需要明确词汇解释的格式。

2025.04.04 day2

口语网站开发的第二天，主要工作内容如下，上传字幕后可以进行字幕语种的选择。目前出现的问题在于，agent 给的前端 hook 太多，useEffect 变得比较混乱，导致上传文件后，无法识别字幕。将 vs code 链接 replit 的服务器，这样可以本地进行代码调试。发现数据请求的时候，字幕选择是每一次都请求一次，只能请求出英文的，但是到中文的时候就不生效。改变数据请求逻辑为一次性请求全部字幕文件，然后在前端再进行 filter 选择。 出现的问题：首页的视频不显示，只有在 myvideo 中才能进行二次字幕中英文的切换。

如何链接 replit 和 本地的 vs code：通过 SSH：生成 SSH 密钥对（本地）–》复制公钥内容 –> 添加公钥到 Replit–> 配置本地 SSH 设置 –> 测试 SSH 是否成功连接 –> 用 VS Code 打开远程项目

公钥和密钥的区别：前者验证进入者的身份，后者作为身份凭证（解锁用）

2025.04.08 day3

口语网站开发的第三天，目标：能够完成记忆片段的生成，且能定点播放。

今天放弃原有的制作思路，因为面对 agent 的多次要求，仍然不断的报错。所以将定点播放功能进行了本地最小化实验。用 vite+react 做了一个最小的可实现功能的模型。然后将解决方案反哺给 replit，成功解决了定点播放问题。

今日进度 在变成方面，还是 chatgpt 更为上手一些，replit 的优势在于网页整体的 ui 及初步方案。如果对于 agent 的提问三次还没有达到想要的效果，那么就要尝试从代码段入手了。agent 的代码编写的并不如 chatgpt 所以可以用 chatgpt 实现核心功能的最小化测试。然后反哺给 agent。如果是直接阅读 agent 的代码，还需要从头开始熟悉，大的项目至少需要 2-3 天，这样的效率比较低。也可以解决问题。了解不同 ai 工具的局限性和优势，搭配着去利用好 ai 是很重要的。

新知识；FFmpeg：** 开源多媒体处理工具 **，用于处理 ** 音频、视频、字幕、图像流等多媒体数据 **。

2025.04.09 day4

  • Today’s Goals:

    • Implement input feedback functionality for word review using either speech or keyboard
    • allowing words to be reviewed based on the frequency defined by the Ebbinghaus forgetting curve.

  • What I Did:

    • 增加了复习片段的测试题功能，选定生词的前两句英文字母，选定词所在句为中文字幕，需要输入对应中文字幕的英文，正确率 90% 以上，该问题即为正确。

  • Problems Encountered:

    • 字幕的匹配准确度问题，同一个时间戳下，不一定是同一句话，因为中英文的语序会出现问题。
    • 艾宾浩斯遗忘曲线的复习功能没有办法详细的落地方案

  • Solutions:

    • 对于不知道怎么做的东西，让 agent 先给方案，给个初级的方案，然后在方案上面去改，这样会快很多。
    • 如果在 ai agent 上提的描述性需求一直达不到，就需要善用 chat gpt 和 claude 来进行生成提示词以及让其根据小功能来一步步生成代码。

  • Next Steps:

    • 增加艾宾浩斯遗忘曲线复习功能，完成 app 的 mvp
    • 待增加功能：上传视频，且能自动解析附属的中英文字幕；语音输入内容；学习时间，目前总学习词汇量，待复习词汇量的统计页面；app 推广的邀请机制及页面，先内测码，后续再上收费；网站可以上传小内存的视频，客户端则可以上传任意视频到本地；

  • Notes:

    • 提示词：一定要清楚，第二要准确，当自己不知道怎么说的时候，可以善用 ai
    • 功能一定要一个个加上去，不要一上来就加最难的功能，永远先实现最简单的功能，不然这样很容易遇到问题。且没办法 debug，因为上的功能复杂，涉及的代码太多了
    • 学会程序化思考，做产品或者编程和人对话还不完全一样。还需要想一下，这个事情背后需要怎么去实现。比如说，你想前两句显示英文字幕，最后一句显示中文字幕，这样怎么才能实现，数据请求上如何要求。
    • 如何利用 ai：在和 ai 问答的时候，不要机械性的复制粘贴，一定是你在用 ai，给的解决方案，一定要看思路，如果代码太多，还要看思路。

2025.04.10 day5

Today’s Goals：

  • 完成复习功能 What I Did：
  • 根据原代码让 claude 根据需求描述进行代码补充，完成了初始的复习功能 Problems Encountered：
  • 网页端无法实现视频的字幕解析，还需要用到 ffemp 这个需要落地到客户端，还无法测试 多个视频的学习和复习是否正常。 Solutions：
  • Next Steps:
  • 打算将原始代码发给 ai agent 进行初始网站的 ui 设计，随后上视频上传和解析字幕功能，及语音输入。 Notes:
  • 加油啊～
  • 完成的代码还可以发给 chatgpt 让其评估代码质量，是否需要精简等。
  • 现有代码，大多都是 ai 生成，自己还没有看原始代码，在发布之前，要对自己的代码熟悉一下。

2025.04.19 day6

利用 claude code 和 claude+codemcp 完成了如下功能的开发 **#### Functionality

  • Enable selection of two or more words at once for vocabulary collection.
  • Support uploading custom MP4 files and automatically extract embedded subtitles.
  • Add voice input functionality for answering review questions.
  • Provide real-time translation for selected words.

UI Enhancements

  • Update the website favicon and title.
  • Redesign the layout for a more polished full-screen experience.
  • Update the whole UI using ShadcnUI

Improvements

  • Set the videos as the home page
  • Add footer
  • when delete video,the associated words should be deleted too.
  • Matching issue when adding words & Save Vocab to DB
  • Translattion Cache to DB
  • Improve every page UI
    • Videos page
    • Vocabulary list Page
      • Video Title
      • Video Detial Page URL
    • Upload Page
    • Review Page
  • Add thumbnails for videos
  • Add 404 page
  • Add Error Page
  • Add i18n
  • Update the color pattern and UI for the whole app.
    • Change color pattern to black and white
    • Change Language selection to ShadcnUI
    • Change Subtitle Title to Tab
    • Change all buttons to ShadcnUI
    • [] Polish whole UI
  • Reviewed Words still diaplay in reviews
  • the second word to review has playback issue.
  • Review Today’s Words Badge
  • IndexDB error in console
  • Change video title in video player page
  • Improve translation speed (using Dict API)
  • When selecting a word, any punctuation next to the word should be ignored.
  • After review a word, it did not play the current segment **

2025.04.20day7

  • 网页基本功能全部开发完成，遇到一个 bug 是网页上传完视频后，网页无法解析。视频数据的传输时比较复杂的，所以需要时间去进行 debug。
  • 解决方案 1: 继续进行网页端的 dubug
  • 解决方案 2: 利用 TAURI 做客户端应用，客户端相对于网页来说没有那么多的限制。也许会好做一些。

2025.04.21day8

  • 网页端功能全部完成，接下来需要根据桌面端应用的特点来优化 ui。