视频帧截取与 GIF 生成工具（Video Frame Tool）产品系统Vibe Coding

【立项原因】：内容创作、自媒体运营、电商视频、影视剪辑等行业中，从业者经常需要从视频中精确截取某一帧作为封面、素材，或将一段视频剪辑成 GIF 用于社交传播和商品展示。传统方式依赖体积庞大的桌面剪辑软件，学习成本高、操作繁琐，且难以处理数 GB 的大文件。本项目旨在提供一个开箱即用的在线工具，解决"视频取帧难、GIF 制作繁琐、大文件上传处理慢"三大产品问题。
【行业场景】：面向短视频运营、电商美工、新媒体编辑、在线教育课程制作等业务场景，用户无需安装任何软件，通过浏览器即可完成视频上传、预览定位、单帧/批量截图、高质量 GIF 生成与下载，大幅提升素材制作效率，降低专业剪辑工具的使用门槛。

本项目是一个功能完善的在线视频处理平台，主要包含以下功能模块：
1、视频上传模块：支持拖拽上传，最大 10GB，兼容 MP4/WebM/MOV/AVI/MKV/OGG 格式，小文件直传、大文件分片上传并支持断点续传。 2、视频预览与定位模块：浏览器原生播放，大文件通过本地 objectURL 秒级预览，配合时间轴与 Canvas 实时截帧引擎，支持帧级步进精确定位。 3、单帧/批量截图模块：可精确截取指定时间点画面，输出 PNG/JPEG/WebP 格式，支持按时间间隔或帧数批量截取并打包下载。 4、GIF 生成模块：采用双通道 palette 调色板算法生成高质量 GIF，支持自定义帧率、尺寸、时长，并可队列式批量生成多个片段。 5、实时进度与历史记录模块：通过 WebSocket 实时推送任务处理进度，操作历史本地持久化并支持搜索与自动过期清理。

1、我负责的任务：独立完成该项目的全栈开发，包括 monorepo 工程搭建、前后端架构设计、视频上传与分片续传、FFmpeg 截图与 GIF 编码调度、Worker 线程池、WebSocket 进度推送，以及 Docker 容器化部署与 Nginx 反向代理配置。
2、技术栈与架构：采用 pnpm monorepo 组织 shared/backend/frontend 三个包，前端使用 Next.js 14 + React 18 + TypeScript + Tailwind CSS + Zustand，后端使用 Node.js + Express + Piscina + Socket.IO + fluent-ffmpeg，底层依托 FFmpeg 处理引擎，通过 REST API 与 WebSocket 通信，采用文件系统 + JSON 轻量存储。
3、实现亮点与难点：
大文件处理（难点）：前端解析 MP4 moov atom 结构，按需仅上传选中片段的 byte-range（数 GB 视频仅需传输 100-300MB），配合 IndexedDB 实现断点续传，刷新页面可续传。
高性能截图（亮点）：采用 FFmpeg input seeking（-ss 前置），使处理时间与文件大小无关，10GB 视频也能秒级截图。
高质量 GIF（亮点）：双通道 palettegen → paletteuse 算法生成 256 色调色板，画质远超默认 GIF。
并发调度（亮点）：Piscina Worker 线程池动态调度 + Canvas 浏览器端实时截帧，减少网络往返、提升交互体验。