导语

无需云端服务器、素材全程本地处理，依托Chrome内置Gemini Nano与WebGPU硬件加速，一款能实现AI自动字幕、人声分离、短视频脚本一键生成的前端开源剪辑工具。项目发布海外Reddit社区收获15000+浏览，完整源码开源，支持本地部署、网页直接在线体验。
适配。
GitHub开源仓库：ai-video-editor


一、前言：传统在线剪辑工具难以避开的痛点

现在市面上绝大多数AI剪辑工具都依靠云端服务器运算，我们需要把本地视频、音频全部上传进行处理。这种模式有两个明显短板：

1. 隐私隐患：原创口播、商用素材上传第三方平台，存在素材泄露风险；
   ​
2. 使用成本高：服务商依靠算力收费，长期订阅开销不小，网络波动还会出现渲染卡顿。

新版Chrome开放Gemini Nano原生调用API，搭配WebGPU硬件并行计算，让浏览器本地运行AI模型成为现实。音视频解析、大模型推理全部在本机完成，不用后端、不用上传任何文件，完美解决云端剪辑的各类弊端。

基于这套前沿技术，我单人独立开发浏览器端AI视频编辑器，项目名为ai-video-editor，产品交互命名Timeline Studio。发布至海外Reddit前端开源社区后，收获一万五千余次浏览，大量海外开发者下载试用并提出功能反馈，仓库至今持续迭代优化。

二、项目核心技术拆解

1. Chrome Gemini Nano 端侧大模型

Gemini Nano是Chrome内置轻量化大模型，浏览器自动完成模型下载、更新、显存调度。前端通过标准JS Prompt API即可调用，离线完成语音转字幕、短视频脚本生成、文本总结等功能，全程不会外传用户素材。

2. WebGPU硬件加速

视频解码、画面裁剪、音频分段运算全部交给GPU并行处理，大幅降低CPU占用，几分钟时长的高清视频也能流畅本地编辑，是离线剪辑的底层算力核心。

3. React 架构重构优化

开发初期踩了典型前端技术债务的坑：主App组件代码累计5203行，UI渲染、音视频处理、AI逻辑全部耦合在一起，新增功能、修复bug效率极低。
后续借助Codex完成全局重构，将单一巨型组件拆分为85个独立模块化文件，分层解耦状态管理、AI调用、时间线渲染模块，代码可读性与拓展性大幅提升。

4. 原生前端音视频能力

依托Web Audio + Media Extractor实现本地音视频轨道分离，自动对长音频切片分段推理，避免一次性加载完整视频，造成内存崩溃、浏览器闪退问题。

三、项目完整功能清单

项目仓库名：ai-video-editor（产品名Timeline Studio）
全部功能浏览器离线运行，打开网页就能使用，无需安装客户端：

1. AI自动字幕生成：上传口播视频，本地模型识别语音，自动生成带时间戳字幕，支持手动修改、批量调整；
   ​
2. 口播脚本一键生成：输入简单需求，Gemini Nano自动产出短视频文案脚本；
   ​
3. 人声分离：分离视频原声与背景音乐，可单独保留人声轨道；
   ​
4. 视频背景移除、智能画面裁剪，适配短视频横竖屏比例；
   ​
5. 多轨时间线编辑，支持素材拖拽、片段分割、时长调整、批量导出成片。

四、源码与在线体验获取方式

完整源码与线上演示Demo大家可以自行检索：
仓库项目名：ai-video-editor
前往GitHub平台搜索项目名称即可获取全部代码，仓库采用宽松开源协议，适合个人学习、二次开发，短视频工作室、前端开发者都能自由使用。

我会根据Reddit、GitHub社区用户反馈持续更新功能，同步修复WebGPU、Gemini Nano适配相关bug。

五、开发踩坑总结分享

1. Gemini Nano推理速度受电脑显存影响，低配设备容易卡顿，项目内部已做分辨率自动降级适配；
   ​
2. WebGPU存在浏览器版本门槛，低于138版本Chrome无法启用硬件加速，项目自带环境检测与降级提示；
   ​
3. 超大文件视频必须做切片处理，完整加载会直接耗尽浏览器内存；
   ​
4. 大型React组件拆分需要分层规划，否则全局状态混乱会引发页面频繁重渲染。

六、结尾互动

端侧本地AI是前端音视频工具的全新赛道，不用搭建后端服务、无需长期承担云服务器成本，同时完美保护创作者素材隐私。
如果你正在研究浏览器本地大模型、WebGPU音视频开发，或是需要一套开箱即用的AI剪辑工具，都可以检索项目名称下载源码学习，也欢迎在仓库提交Issue反馈问题、提交PR一起共建项目。

#reddit #前端开发 #浏览器大模型 #AI视频剪辑