项目地址

https://github.com/userwanyong/uvd

项目背景

我为什么做这个项目？

在当前内容爆炸的时代，用户在B站、YouTube、TikTok、抖音等平台上获取信息的需求越来越高，但同时也存在以下痛点：

1. 平台限制下载
   • 不提供下载按钮
   • 限制清晰度 / 会员限制
2. 下载体验差
   1. 需要安装工具
   2. 手机端操作困难
3. 信息获取效率低
   1. 长视频理解成本高
   2. 缺乏结构化总结

我的预期目标

编写一个跨平台、简单易用、可视化、AI智能总结的视频下载平台。预计实现：多平台视频下载兼容、自动识别并解析视频链接、AI视频总结等特性

开发环境

• glm-5-turbo+cc
• context7：搜索最新文档，防止AI使用过时的语法
• chrome-devtools：进行浏览器端到端自动化测试
• zread：搜索并读取开源仓库
• web-reader：读取网页内容
• web-search-prime+firecrawl-mcp：用来进行网络搜索
• zai-mcp-server：用于分析chrome-devtools测试截图
• frontend-design+ui-ux-pro-max：优化前端UI，至于用哪个，让AI自行选择即可

方案设计

因为目标明确，相关竞品大多都是付费版本or功能不完备，因此可以跳过竞品分析，让AI直接进行方案设计，这一步可以使用5.1进行充分设计，开发阶段切换为turbo进行快速开发

你是一位全栈开发程序员，请你根据我的需求，设计方案、然后找我人工确认、分步骤开发、完成自主测试。

## 我的需求
在当前内容爆炸的时代，用户在B站、YouTube、TikTok、抖音等平台上获取信息的需求越来越高。
我希望编写一个跨平台、简单易用、可视化、AI智能总结的视频下载平台。
预计实现：多平台视频下载兼容、自动识别并解析视频链接、AI视频总结等特性。

## 人工思考方案
1）对于前端界面，需要简洁大气，然使用者眼前一亮，清晰易懂各个功能（按钮）是干什么的
2）对于后端设计，可以使用py实现，可以暂时不加数据库，实现核心mvp功能
3）对于视频的下载方式，去GitHub查找相关的项目，进行二次开发，eg. yt-dlp（https://github.com/yt-dlp/yt-dlp）

## 注意事项
1）前端页面必须具备明显差异化，避免模板化设计。整体风格需突出“高级感 + 科技感 + AI感”，通过深色+渐变、高对比卡片。
2）必须在我已有方案基础上进行分析与优化，先输出完整方案，并等待我确认后再开始开发，禁止跳过确认直接编码
3）你必须完全理解开源项目，使用尽量简单的方式实现（比如直接在开源项目代码基础上去修改，或者直接封装，尽量减少代码改动）
4）如果有任何不确定的地方需向我询问，不要自作主张

AI给出了设计文档，这里我也没过多的干预，直接让他根据设计文档进行开发（cc自动退出plan模式）

编码实现

turbo的速度还是可以的，快速完成了demo的开发，这里直接看一下UI效果和功能完成度

1）UI效果

2）MVP功能可用性

可以正常启动

解析视频（特点：输入地址后自动解析，不需要手动点按钮）

• b站：解析成功✅️
• YouTube：解析成功✅️
• TikTok：解析失败❌️
• 小红书：解析成功✅️
• 抖音：解析失败❌️

下载视频

• b站：成功下载并正常查看✅️
• YouTube：成功下载并正常查看✅️
• TikTok：解析失败，未达到资格线❌️
• 小红书：成功下载并正常查看✅️
• 抖音：解析失败，未达到资格线❌️

3）实际用到的Skill

• frontend-design

4）存在问题

1. 视频封面缩略图未显示
2. TikTok和抖音解析失败

bug修复

1. 视频的信息正常解析，但是视频封面并没有展示出来
2. TikTok和抖音解析失败，请你查找原因并修复

原因：b站视频缩略图有Referer防盗链、抖音需要用户的Cookie

视频封面缩略图未显示问题，修复成功✅️

但是只有缩略图问题修复成功，抖音和TikTok依然解析失败，把报错信息贴给AI

1. 抖音解析依然失败: ERROR: Unsupported URL: https://www.douyin.com/jingxuan?modal_id=xxx（https://www.douyin.com/jingxuan?modal_id=xxx、https://www.douyin.com/video/xxx）
2. TikTok依然解析失败: sequence item 0: expected str instance, NoneType found（https://www.tiktok.com/@axxx037/video/xxx?is_from_webapp=1&sender_device=pc）

当前TikTok解析下载功能已经正常✅️，但缩略图未显示❌️；对于抖音，不能让用户自己提供cookie，不然网站设计初衷的便捷性就没了，继续修复

1. TikTok的缩略图也没有展示
2. 对于抖音，不能让用户自己提供 Cookie，你可以再通过网络搜索或开源项目找到方案

TikTok缩略图修复成功✅，但貌似是用的Playwright解决视频解析问题，这样内存占用高，解析速度慢，应该寻找更优质的方案

1. 你是不是用了Playwright 浏览器，但我不认可这种方法，你需要寻找其他方法，可以去github开源社区去查找解决方案
2. 请你仔细分析并提出自己的方案，然后我人工确认，我批准后再进行开发

️调用mcp进行查找

最终方案如下，我有预感，这次能成！

然后让AI根据新方案进行更改优化

经过漫长的等待~  已经执行完编码工作并完成自动化测试

自动化测试？我不信，我自己来测测

你别说，这次还真成了，可以正常解析与下载！✅️要是让我古法编程，找开源项目、设计方案、执行编码、测试bug，给我一下午也不够啊，就是缩略图还有点毛病，继续继续，写提示词（温馨提示：你的上下文可能已经快爆了，及时总结或者开新窗口）

1. 现在对于抖音视频的解析已经完美实现，但还有一点不足，就是缩略图未显示，你需要修复一下
2. 上一版方案的Playwright 浏览器你是不是给我下载到本地了，检查一下删除没有

完成两个任务，心想，这么简单的需求肯定能过，毕竟前两个相同需求都是一遍过的

满怀信心进行测试，我靠，翻车了，还是没显示

那就继续吧…… 不过话说，首次开发的时候他自动调用了chrome-devtools这个MCP工具进行自主截图测试，这几次怎么没自动测试一下，那我就来指定一下吧，先/compact总结一下下，腾出点上下文

1. 现在抖音视频的缩略图依然没有修复好，请你继续进行修复
2. 修复完成后你需要自主截图测试，确保缩略图真正能显示出来

AI给我的回答是：截图并修复了；经过我手动测试后，success！完美！

至此，核心功能已经全部通过

1. b站：解析并下载✅️️
2. YouTube：解析并下载✅️
3. TikTok：解析并下载✅️
4. 小红书：解析并下载✅️
5. 抖音：解析并下载✅

开发视频总结功能

你是一位专业的全栈开发工程师，正在开发《视频下载总结器项目》，请你根据需求，进行方案的设计、人工确认、分步骤开发、自主测试验证、最后找我验收。

## 当前完成度
目前已经完成了核心的视频下载功能，现在要做更多的功能扩展，你必须根据我已有的文档和代码进行完整地分析，确保理解了项目当前的细节，才能进行后续的工作。

## 现阶段需求
调用AI进行视频内容的总结（可根据弹幕等途径总结），以便于让使用者在不观看长篇视频的情况下大致了解视频的内容，节约时间

## 当前任务
你需要帮我进行竞品调研、方案设计、开发实现

## 注意事项
1）如果你有任何不明确的内容，一定要找我人工确认，才能进行下一步的动作

调研完成，开始进行方案设计

这里是AI询问我们的四个选项

最终得到了一份实现计划：

现在所有步骤都已经明确了，开始开发。注意要跟AI显式说一声使用context7获取最新文档，防止AI使用过时的代码亦或者AI没有自动调用这个工具

1）你必须通过 Context7 和联网搜索确保你获取到了最新的技术文档，不要使用过时的代码
2）注意不要影响到已有的功能，只新增代码，而不修改代码（开闭原则）
开始开发！

自主测试，api+浏览器

接下来配置.env文件进行AI总结测试

选择智谱的免费模型，重新启动。但还是执行AI总结时报错了

此时上下文已经用的差不多了，直接新开一个会话

你是一位专业的全栈开发者，正在开发《视频下载总结器项目》，现在你正在开发AI总结功能

## 现阶段需求
调用AI进行视频内容的总结（可根据弹幕等途径总结），以便于让使用者在不观看长篇视频的情况下大致了解视频的内容，节约时间

## 当前任务
你已经完成了功能的开发，但当我填入apikey后进行验证时，提示
INFO:     127.0.0.1:54283 - "POST /api/ai/summarize HTTP/1.1" 404 Not Found
你需要修复这个问题，并自主测试

## 我提供给你的资料
1）@项目代码
2）@视频总结功能设计文档

## 注意事项
1）如果你有任何不明确的内容，一定要找我人工确认，才能进行下一步的动作

让我手动验收一下

功能是OK的，但是位置放到了页面底部，属实有点奇特，把问题和预期结果抛给AI继续进行修复

1. 现在功能正常运行了，但是为什么没有上传/解析视频时，AI总结按钮就不展示？
2. AI总结这个按钮现在是在页面底部，这很不符合用户习惯，你应该放到页面中部或更好的位置，重点是让用户知道有这个功能！

修复完毕，我觉得效果还可以吧

但是，我又发现一个问题，这思维导图属实有点抽象了

1）现在AI总结功能已经可用，但是有一点不足，就是思维导图部分有点抽象，你应该使用更简洁明了的方式向用户展示

修复后的效果如下，可读性提高了，但还是有点AI味，我直接采用最简单粗暴的方式，找了张图让AI按着图中的风格进行更改：

1）现在思维导图太生硬了，请你参考我提供给你的图片，以后思维导图都按图片中的风格进行生成
2）拓展：给用户增加一个下载选项，可以将思维导图下载到本地

成了！现在这一版就好看多了，但是下载下来有点问题（字体是黑的）

现在可以正常下载，但下载之后为什么字体是黑的，如图

根本原因及修复措施如下：

成功修复，svg和png的字体均正常显示

优化页面布局

你是一位专业的全栈开发工程师，追求极致完美，正在开发《视频下载总结器项目》，现在请你根据需求，设计方案、人工确认、分步骤开发、自主测试验证、最后找我验收。

## 项目进度
目前我已经完成了核心的视频下载和AI总结功能，要做更多的功能扩展，你必须根据我已有的文档和代码进行完整地分析，确保理解了项目当前的细节，才能进行后续的工作。

## 需求
目前的排版是，视频信息，AI总结两个模块竖直排列的，你应该将他们改为水平排列，比如左边是视频解析部分，右边是AI总结部分（可以参考我给你的图片）

## 往期素材
@项目文档
@当前项目源码

## 当前任务
你需要进行方案设计、开发实现

## 注意事项
1）如果你有任何不明确的内容，一定要找我人工确认，才能进行下一步的动作

完美收工！

最后发一个优惠链接，如果你有需要可以点击连接获取优惠，互利你我他
👉立即参与「拼好模」：https://www.bigmodel.cn/glm-coding?ic=YTKDPDWLQT