编程导航会员会员
登录/注册

迟来的《万能视频总结器》项目开发路程

项目地址

https://github.com/userwanyong/uvd

项目背景

我为什么做这个项目？

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

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

我的预期目标

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

开发环境

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

方案设计

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

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

## 我的需求
在当前内容爆炸的时代，用户在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效果

image.png

image.png

2）MVP功能可用性

可以正常启动

  1. 解析视频（特点：输入地址后自动解析，不需要手动点按钮）
    • b站：解析成功✅️
    • YouTube：解析成功✅️
    • TikTok：解析失败❌️
    • 小红书：解析成功✅️
    • 抖音：解析失败❌️
  2. 下载视频
    • b站：成功下载并正常查看✅️
    • YouTube：成功下载并正常查看✅️
    • TikTok：解析失败，未达到资格线❌️
    • 小红书：成功下载并正常查看✅️
    • 抖音：解析失败，未达到资格线❌️

3）实际用到的Skill

frontend-design

4）存在问题

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

bug修复

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

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

image.png

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

image.png

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

▼
text
复制代码
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）

image.png

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

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

image.png

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

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

️调用mcp进行查找

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

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

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

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

image.png

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

image.png

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

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

image.png

image.png

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

  • b站：解析并下载✅️️
  • YouTube：解析并下载✅️
  • TikTok：解析并下载✅️
  • 小红书：解析并下载✅️
  • 抖音：解析并下载✅

开发视频总结功能

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

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

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

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

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

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

image.png

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

image.png

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

image.png

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

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

image.png

自主测试，api+浏览器

image.png

image.png

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

image.png

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

image.png

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

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

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

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

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

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

image.png 让我手动验收一下

image.png

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

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

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

image.png

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

image.png

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

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

image.png

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

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

▼
text
复制代码
现在可以正常下载，但下载之后为什么字体是黑的，如图

image.png

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

image.png

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

image.png

优化页面布局

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

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

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

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

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

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

image.png 完美收工！

Vibe Coding
AI
AI万能视频下载器

相关专栏

Vibe Coding

Vibe Coding

Vibe Coding小项目

0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
小白学Java
小白学Java
等级vip
内容推荐
更多
好奇大家公司报销AI吗，是报销的费用还是统一用编程工具呢
3
27 岁，我终于做出了自己的游戏！但是一行代码都没写
5
最近在使用ChatGPT/Codex过程中发现了一个官方bug：高频日志写盘，会损坏电脑磁盘的寿命。桌面版和CLI都有这个问题，目前最新版的ChatGPT/Codex还没有彻底解决这个问题（虽然官方自称已经修复了，但实测还是有高频日志写盘问题）。建议使用下面这段提示词发给AI让它检查和修复：帮我检查 ~./codex/logs_2.sqlite 是否因 TRACE 日志持续高频写盘；如果中招，先备
2
codex
2
#字节内推# 实习、校招、社招均有岗位
4
作者分享
更多
开 codex plus 会员有没有卡可以直绑，招商万事达貌似绑不了，需要套一层google play，但是今天这个付款方式貌似没了，想问一下大家开gpt用的什么方式🥺
3
Day 102（5.6/5.7/5.8） ✅ 今天做了： 1. 力扣136，只出现一次的数字 2. 复习Mysql八股 3. 整理《万能视频总结器》项目开发文档：https://www.codefather.cn/post/2051997576365887489 4. 复习Java八股 5. 编写codefreex项目设计文档 6. 完成codefreex项目基本架构的搭建，基础用户服务，兑换码以及邀请码功能 ⏰ 明天计划： 1. 完成codefreex项目核心AI生成功能 📚 今日感悟： 力扣136，只出现一次的数字 1. 我的思路1：使用set集合，如果当前该数未存在set中，则加入集合，否则将该数从集合中移除，最后set集合中剩余的那个数即为目标值 `时间复杂度O(n)，空间复杂度O(n)` 2. 我的思路2：对元素进行排序，然后从前往后进行遍历，如果前一个不等于后一个，这个数就是目标值 `时间复杂度O(nlogn)，空间复杂度O(logn)` 3. 思路3：使用位运算，异或运算有如下性质：1）任何数和0做异或，结果仍是原来的数；2）和其自身做异或，结果是0；3）异或运算满足交换律和结合律。运用这三条性质可以将一个初始值为0的数依次与数组中元素进行异或运算，最终的结果就是只出现一次的数字 `时间复杂度O(n)，空间复杂度O(1)`
3
邀请你参加 Xiaomi MiMo Orbit 百万亿 Token 创造者激励计划，100T Credits 面向全球用户限时发放中... https://100t.xiaomimimo.com/ 大家快来薅🥰 免费，我弄到了max🤩
7
Day 101 ✅ 今天做了： 1. 力扣1143，最长公共子序列 2. 复习msyql八股 3. 零代码生成平台项目进度+2（41/41）完结！ ⏰ 明天计划： 1. 刷力扣题 2. 复习java八股 3. 编写“零代码平台”设计文档，准备开发 📚 今日感悟： 一、力扣1143，最长公共子序列 1. 我的思路1：动态规划，构造一个二维数组（行列分别是两个字符串的长度+1，默认第0行和第0列填充0方便计算），把这两个字符串当做行和列，如果行元素等于列元素，则选取`dp[i-1][j-1]+1`，否则取`dp[i-1][j]`或者`dp[i][j-1]`中最大长度+1 `时间复杂度O(m*n)，空间复杂度O(m*n)` 2. 我的思路2：优化为一维数组，如果行元素等于列元素，`dp[j]=t+1`；否则`dp[j]=max(dp[j-1],dp[j])`（注意，左上角的元素不能通过dp[j]或者dp[j-1]表示，因此要额外维护一个变量用于记录左上角的值dp[j]，然后在下一轮使用这个值从而达到左上角的目的） `时间复杂度O(m*n)，空间复杂度O(n)`
3
Day 100 ✅ 今天做了： 1. 力扣5，最长回文子串 2. 复习jvm 3. 零代码生成平台项目进度+2（39/41） ⏰ 明天计划： 1. 刷力扣题 2. 复习mysql八股 3. 学习零代码生成平台项目 📚 今日感悟： 力扣5，最长回文子串 1. 我的思路：暴力，两层for循环进行判断。超时！ `时间复杂度O(n*n*n)，空间复杂度O(n)` 2. 思路2：动态规划，对于位置i到j，如果`dp[i][j]`是回文串并且`s[i-1]==s[j+1]`，那么`dp[i-1][j+1]`也是回文串。因此维护一个二维数组`dp[i][j]`用于表示位置i到j是否是回文串，外层循环固定子串长度，内层循环计算当前固定长度下的右边界，然后进行`s[i-1]==s[j+1]`的判断即可 `时间复杂度O(n*n)，空间复杂度O(n*n)` 3. 思路3：中心拓展算法，如果中心点`dp[i][j]`可以构成回文串，则当`s[i-1]==s[j+1]`时`dp[i-1][j+1]`也可以，依次类推。那么就可以遍历字符串，每轮以i和i,i+1为中点向外拓展，选取两者最长的拓展长度当做本轮的最长长度即可，最后处理起始位置获取字符串即可 `时间复杂度O(n*n)，空间复杂度O(1)`
4
下载 APP