文章
文章用户商铺文档快讯圈子网址导航
图片展示与跳转 展示图片

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录

本文目录 隐藏
1. 背景描述
1.1. 项目缘起
1.2. 何为零基础
1.3. 最终实现效果
2. 过程记录
2.1. 提交基础需求
2.2. 测试翻译功能
2.3. 保存版本
3. 尝试需求
3.1. 加快翻译速度
3.2. 优化翻译结果
3.3. 添加 Youtube 字幕与视频下载功能
3.4. 字幕翻译功能坏了
3.5. 合并工作流
4. 总结经验
5. 关联阅读
6. 我的 Notion 课程

20250206 更新，一次成功案例：DeepSeek AI 编程应用： Obsidian 文档批量生成器

阅读提示：本文仅用于记录个人学习 AI 编程的实践经过，没有什么阅读价值，为了不浪费你的时间，这里有一段 AI 总结：

这是一段 AI 总结，点击展开

在这篇文章中，作者分享了自己作为编程新手，尝试用 AI 工具 Windsurf 开发一个本地网页工具的经历。

目标是实现 SRT 字幕翻译、Youtube 视频下载及双语字幕嵌入功能。虽然成功调用了 DeepSeek API 完成字幕翻译，并使用 Git 进行版本控制，但在功能整合时遇到了翻译速度慢、结果不准确、界面混乱等问题。

通过调试和 AI 辅助，作者逐步优化了翻译效果，但项目依赖过多导致复杂度超出能力范围，最终回滚到可用版本。

总结的经验包括：使用 Git 保存版本、精准提问、控制项目规模、及时调试和总结教训。这次尝试虽未完全成功，但为作者积累了宝贵的编程经验。

背景描述

项目缘起

虽然沉浸式翻译 可以在线显示双语字幕，但是「字幕下载」功能需要付费会员才可以使用，无奈沉浸式翻译的会员太贵了，于是动起了歪脑筋，试试看自己能不能完全用 AI 来实现这个需求。

何为零基础

这里稍微备注一下，我自己所谓的零基础编程，究竟是哪种零基础。

  1. 基本编程概念：能描述项目需求，知道编程需要依赖一些 API 或者已经存在的模块
  2. 前端开发：知道 HTML 能生成网页雏形
  3. 版本控制：听过 Git 的概念，知道 Git 能保存项目编辑记录
  4. 调试能力：知道能打开浏览器的控制台，查看报错的记录
  5. API 调用：知道 API 的概念
  6. 优化与需求分析：能提出优化需求并实现
  7. 经验总结：能总结项目经验并提出改进建议。

最终实现效果

创建了一个本地网页工具，可以提交 SRT 字幕文件，然后调用 DeepSeek 的 API 来翻译，并导出双语 SRT 字幕文件。

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图

过程记录

提交基础需求

我想开发一个本地的网页工具，可以翻译 SRT 字幕，调用 AI 大模型的 API，具备 SRT 字幕上传、与翻译后的双语字幕结果导出功能。

AI 根据上面这段简短的命令，完成了基本的框架，并让我补充大模型 API，于是我申请了一个 DeepSeek 的 API，并直接将 API 的接口文档 复制粘贴给它。

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图1

随后 AI 根据接口文档进行了 API 的配置

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图2

随后 AI 生成了一个本地网页雏形

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图3

测试翻译功能

初步发现的问题有两个

  1. 虽然会显示翻译中，但是没办法一边翻译一边显示翻译进度
  2. 翻译的速度非常慢，可能是设置了翻译间隔
零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图4
  1. 万幸的是，翻译成功了！并且字幕行数、时间轴也对得上
零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图5
  1. 可以正常导出双语翻译后的 SRT 字幕文件
零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图6

保存版本

鉴于这第一个 MVP 已经可用，所以我需要开始研究一下如何保存版本记录了。

于是我问 Claude：

我在 vscode 中用 AI 创建了个可运行的网页项目，我想做一些修改，但是我希望能够将当前版本保存下来，以便日后可以回滚，如何做到？

Claude 回答我，可以使用 Git 版本控制系统来管理项目版本。于是我又直接将这个需求提交给了 Windsurf，它果然也创建了一个 Git 仓库

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图7

Windsurf 提示我可以创建一个新的分支，非常好。

尝试需求

加快翻译速度

  1. 我希望字幕生成速度可以快一点，因为 DeepSeek 是不限制并发数的
  2. 我希望能够实时显示翻译结果
零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图8

再来翻译同一份字幕文件，看看效果，完全实现了我的需求

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图9

优化翻译结果

我注意到，因为字幕时间轴会将一句连贯的话拆成好几句，使得 AI 翻译的结果会不够准确，缺少上下文的联系，例如：

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图10

并且翻译结果不够地道，毕竟这是一个 Youtube 视频的字幕，很多视频口语化的表达习惯没有准确地被翻译出来。

我将这些吐槽直接发给了 Windsurf，它也理解了问题所在，并提出了改进方法

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图11
  1. 上下文感知翻译：
    • 添加了上下文窗口（前后各3条字幕）
    • 翻译时会考虑相邻字幕的内容
    • 通过标记【当前】和【上下文】来区分待翻译内容
  2. 优化翻译提示词：
    • 明确指出这是 YouTube 视频字幕
    • 要求使用口语化、自然的翻译风格
    • 保持表达的生动性和趣味性
    • 使用目标语言的网络用语和本地化表达
  3. 技术优化：
    • 减少并发数（从5降到3）以便发送更多上下文
    • 添加随机延迟避免请求过于密集
    • 增加温度参数使翻译更自然
  4. 翻译质量提升：
    • 保持原文的语气和情感
    • 确保译文符合当地人的表达习惯
    • 注重上下文的连贯性

重新测试，可以看到翻译结果明显有参考了上下文，然而也因为参考了上下文，使得翻译出现了重复结果。

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图12

于是我直接将我的判断，以及这段字幕结果提交给 Windsurf，让它继续优化。Windsurf 的优化结果是，先将短句合并成一句长句，然后再对长句进行翻译。

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图13

重新测试翻大车，它直接所有的字幕进行合并了

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图14

我要求 AI 撤销这个优化方案，重新解决问题，它的改进如下

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图15

重新测试看看，还是没能实现完美的翻译效果，不过先这样吧，勉强可用。

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图16

添加 Youtube 字幕与视频下载功能

我问 Claude 有哪些可以下载 Youtube 字幕的开源项目，Claude 告诉我 yt-dlp 这个项目可以做到，于是我询问 Windsurf 能不能直接通过访问这个项目的地址，然后研究一下它的功能。

答案是可以的：

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图17

并且 Windsurf 通过自己的研究，开始安装各种依赖

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图18

最终实现效果：

  1. 默认会下载 1080p 分辨率的视频（如果有）
  2. 默认会下载英文字幕（包括自动生成的字幕）
  3. 默认会将字幕嵌入到视频中
  4. 所有字幕都会转换为 SRT 格式
  5. 视频会输出为 MP4 格式
零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图19

行不行，测试一下，提示「获取视频信息失败」

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图20

将提示发给 Windsurf ，它表示需要 Python 依赖，于是又安装了一堆东西，最终成功了，可以获取视频信息

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图21

现在再来看看能不能下载视频

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图22

竟然成功了，并且自动将字幕嵌入在视频中了

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图23

但是我需要的是将翻译后的双语字幕嵌入到视频，所以这一步有点提前。

字幕翻译功能坏了

在上一步中，虽然实现了视频下载效果，但是把一开始做好的字幕翻译功能弄坏了，具体表现为「无法上传字幕文件」，就算提交了字幕文件，还是会再次弹出提交文件的对话框，我需要重新修复一下。

于是我把这个问题再次提交给了 Windsurf，经过一番试错，Windsurf 解决了这个问题。

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图24

合并工作流

现在我实现了以下几个功能

  1. 调用 DeepSeek API 对 SRT 格式的英语字幕文件进行翻译
  2. 可以导出翻译后的 SRT 文件
  3. 可以提交 Youtube 视频链接，并下载 1080 p 的视频，以及对应的字幕

现在我想合并一下这几个功能，实现以下效果：

  1. 提交 Youtube 视频链接
  2. 自动下载 1080 p 视频文件，以及英文字幕
  3. 将英文字幕翻译为双语字幕
  4. 将视频与翻译后的双语字幕进行合并

将需求提交给 Windsurf

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图25

虽然确实缝合了这个工作流，但是界面有点丑陋，并且功能有点混乱

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图26

我直接将截图提交给 Windsurf，并让它根据我的意见，保留特定的功能按钮。

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图27

优化结果如下

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图28

测试一下效果，发现虽然有「获取视频信息」的按钮，但这个按钮是按不了的。

我用浏览器的「检查」功能，查看是否有代码报错，发现确实有这么一行 main.js:27 Uncaught SyntaxError: Identifier 'translateBtn' has already been declared (at main.js:27:7)，提交给 Windsurf 后，它成功解决了问题。

新的问题出现了，无法下载字幕，提示如下

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图29

XXXXX
XXX
XX

此处经历了一大堆折腾，还是无法解决问题，并且项目越来越大，引入的依赖越来越多，问答窗口越来越长，AI 恢复的速度越来越慢，显然有点超出了我的能力范围。

所以我暂时放弃了，并用 Git 回滚到第一个可用的版本，目前只保留字幕的双语翻译功能，也幸好我知道有 Git 这个东西的存在，至少还能留下一些成果。

总结经验

  1. 多用 Git 保存重要版本。并且要找到 Git 的正确用法和快捷用法。
  2. 需要找到精准提问的方法，不然让 AI 在一个那么长的窗口里回答问题，会越来越慢，准确率也会越来越低。
  3. 需要搜索一下， Windsurf 有没有更熟练的用法
  4. 在执行项目前，最好能先进行一番搜索，看看有没有现成的项目可以调用或者模仿

关联阅读

我的 Notion 课程

《Notion 搭建高能效率系统》

  • 从「效率困局」到「生产力中枢」
  • 用 18 个月打磨的 Notion 精进指南
  • 助你在 7 天内掌握精英必备的效率神器
  • 推出一年半，帮助近 6000 位学员精通 Notion
  • 国内销量最高的 Notion 系统课程
  • 小红书好评率超过 98%

详情介绍：点我

零基础编程：用 Windsurf 自制字幕翻译工具的一次失败记录插图30

本站所有文章，除非特别说明或标注，均为本站原创发布。转载本文需附上本文链接，未经授权，禁止大篇幅复制、盗用、采集或发布本站内容至其他网站、书籍等各类媒体平台。

AIAI 编程
AI笔记实操技巧

Obsidian 剪藏插件教程，用 DeepSeek 配置 AI 自动总结

2025-1-17 21:29:01

AI效率工具

零基础教程：如何在 Mac 上部署 VideoLingo 实现高质量视频翻译与配音

2025-1-21 14:51:33

图片展示与跳转 展示图片

欢迎订阅我的 Notion 课程

一站式学习，从入门到精通

点击试读
X