使用说明(读者导向)
下面每条都是可直接复制给 AI 的 Prompt,目标是让 AI 产出一个可运行/可部署的「在线视频抽帧 + 时间轴标注工作台」。注意:抽帧=从现有视频提取现有帧,不涉及生成图片/渲染图。
Web 工作台:上传视频 + 时间轴缩略图 + 按时间点抽帧 + 导出标注
适合做一个“审片/沟通”页面:看时间轴、点时间点抽帧、对片段做备注,然后导出JSON给同事或客户。
English Prompt:
You are a senior full-stack engineer. Build a production-ready web tool named "Video Frame Extractor & Timeline Annotator".
Goal
- Users upload a video file (mp4/mov/webm). The app generates a timeline with thumbnails (e.g., 1 thumbnail every 2 seconds, configurable).
- Users can click any timestamp to extract the exact frame as PNG/JPEG (this is extraction from the source video, NOT image generation).
- Users can create annotations for time ranges (start/end), tags, and notes.
- Users can export annotations as JSON and CSV, and download extracted frames as a ZIP.
Tech constraints
- Use Next.js (App Router) + Type + Tailwind.
- Backend: Node.js API routes.
- Use ffmpeg to extract frames. Prefer ffmpeg.wasm for local-browser processing; if too heavy, provide a server-side ffmpeg fallback with clear security limits.
- Store data in SQLite (better-sqlite3) with a simple schema.
Deliverables
1) Full project code and file tree.
2) Exact install/run commands.
3) Deployment guide (Docker + one-click deploy steps).
4) Security notes: upload limits, allowed mime types, temp file cleanup.
5) At least 8 QA checks (upload edge cases, corrupt video, large file, export correctness, timestamp accuracy).
UI/UX
- A timeline strip with thumbnails + a playhead.
- A right panel listing annotations with search and filter.
- A "Validate" button that runs basic integrity checks and shows results.
Include tests
- Unit tests for timestamp parsing and export.
- E2E test plan for upload and extraction.
中文释义: 让 AI 生成一个完整的在线工具:上传视频后自动生成缩略图时间轴;点击时间点即可抽取该帧;对片段做区间标注;支持JSON/CSV导出与帧打包下载,并附带可运行命令、部署说明与QA清单。
轻量版:纯前端(浏览器本地处理)抽帧与标注,不上传服务器
适合对隐私敏感的审片场景:视频不出本地,所有处理在浏览器完成。
English Prompt:
Build a client-only web app for "Local Video Frame Extraction & Annotation".
Requirements
- No server upload. Use ffmpeg.wasm and Web Workers.
- Allow: select local video, scrub timeline, extract frame at current time, save as PNG, and create annotations for ranges.
- Export: annotations.json and annotations.csv.
- Provide a lightweight thumbnail strategy (e.g., extract a thumbnail every N seconds with progress).
Tech
- Vite + React + Type .
- Use IndexedDB to persist the annotation data and extracted frames data.
Deliverables
- Full repository code + file tree.
- Run/build commands.
- Performance notes and limits.
- At least 6 QA checks (memory, long videos, browser support, worker failures, export validation).
中文释义: 生成一个“纯前端”版本,重点是隐私与离线可用:视频只在本地处理,仍需可运行项目、文件结构、运行命令与QA检查。
服务器版:FastAPI + ffmpeg 抽帧API,前端做时间轴与标注管理
适合团队协作:视频可集中管理,后端负责抽帧与导出,前端负责标注流程。
English Prompt:
Design and implement a web tool with a Python backend.
Backend
- FastAPI + Uvicorn.
- Endpoints:
- POST /upload (stores video, returns videoId)
- GET /videos/{id}/thumbnails?intervalSec=2
- GET /videos/{id}/frame?timeMs=12345&format=png
- CRUD /videos/{id}/annotations
- GET /videos/{id}/export (json/csv)
- Use ffmpeg (system binary in Docker) for extraction; strictly validate inputs.
- Store data in SQLite.
Frontend
- React + Type .
- Timeline with thumbnails and annotation editor.
Deliverables
- Dockerfile + docker-compose.
- File tree + full source.
- Run commands.
- At least 8 QA checks (time parsing, invalid timestamps, concurrency, cleanup, security limits).
Important
- This tool must only extract frames from existing videos; do not include any image generation instructions.
中文释义: 生成一个后端可部署的抽帧服务(FastAPI+ffmpeg)+ 前端时间轴标注界面,强调接口设计、输入校验、安全限制与部署可用。
标注增强:片段列表、快捷键、批量标签、审核流状态
适合内容审核/素材归档:对片段打状态(待审/通过/驳回)并批量导出。
English Prompt:
Extend the "Video Timeline Annotator" into an audit-ready workflow tool.
Features
- Annotation has fields: startMs, endMs, label, severity, status (todo/approved/rejected), reviewer, updatedAt.
- Keyboard shortcuts for play/pause, jump +/-1s, mark in/out, add label.
- Bulk edit: apply tag/status to multiple annotations.
- Export includes workflow fields.
Deliverables
- Full code changes (assume an existing React+API app; show all modified files).
- Migration s for SQLite.
- At least 10 QA checks including shortcut conflicts, export correctness, and status transitions.
中文释义: 让 AI 生成“审核流”增强能力:快捷键、批量标签、状态机字段、数据库迁移与更完整的QA校验,仍以可运行项目为交付。
精确时间:基于关键帧/PTS 的时间戳校准与误差提示
适合需要精确抽帧的场景:对长视频、可变帧率(VFR)做时间校准与误差可视化。
English Prompt:
Implement "Timestamp Accuracy Mode" for a video frame extraction tool.
Requirements
- Detect if input is VFR and show a warning.
- Use ffprobe to read stream time , frame rate, and keyframe info.
- When users request a frame at timeMs, return:
- requestedTimeMs
- actualExtractedTimeMs
- deltaMs
- Provide a UI badge if deltaMs exceeds a threshold.
Deliverables
- Full implementation + commands.
- At least 6 tests/QA items focusing on accuracy, VFR files, and edge timestamps.
中文释义: 让工具更“专业”:抽帧时返回实际抽取时间与误差,并提示VFR风险;输出完整实现与测试要点。
导出交付:一键生成“审片报告”HTML/PDF(仅导出,不生成图片)
适合对外沟通:把标注、时间点与截图文件名汇总成可阅读的报告。
English Prompt:
Add an "Audit Report" export to the tool.
Rules
- The report must reference extracted frames (existing files) by filename/path and timestamp.
- Do NOT generate new images. Only use frames extracted from the video.
Output
- report.html and report.pdf (PDF rendered from HTML using Playwright or a server-side renderer).
- Include summary stats: number of annotations, statuses, labels frequency.
Deliverables
- Code + file tree changes.
- Commands to produce the report.
- At least 5 QA checks (missing frames, unicode notes, long text wrap, PDF render failures).
中文释义: 增加“交付件”导出能力:把标注和已抽取帧做成HTML/PDF报告(仅引用已抽帧文件,不做任何图像生成),并给出可复现命令与QA清单。
权限与分享:登录、项目空间、只读分享链接(团队协作)
适合多成员协同:项目级权限与只读链接,便于外部审阅。
English Prompt:
Turn the tool into a multi-user app.
Requirements
- Auth: email+password + session cookies.
- Workspaces: each workspace has projects (videos) and annotations.
- Roles: owner/editor/viewer.
- Share s: create a signed, time-limited, read-only to view a video timeline and annotations.
Deliverables
- Full implementation with data schema.
- Security checklist (OWASP basics, upload abuse prevention).
- At least 8 QA checks including permission boundaries.
中文释义: 让 AI 生成一套可落地的权限与分享机制(登录、空间、角色、只读分享链接),并强调安全与权限边界的QA。
可观测性:抽帧任务队列、进度条、失败重试与日志追踪
适合更大文件或多人并发:抽帧/生成缩略图是耗时任务,需要队列和可观测性。
English Prompt:
Add background jobs for thumbnail generation and bulk frame extraction.
Tech
- Node.js + BullMQ (Redis) or a lightweight queue.
- Progress reporting via SSE or WebSocket.
- Structured logs with requestId/jobId.
Deliverables
- Full code + docker-compose including Redis (if used).
- Run commands.
- At least 8 QA checks: retries, cancellation, partial failures, concurrent jobs, cleanup.
中文释义: 让工具具备“生产可用”的任务处理:队列、进度、重试、日志追踪与部署组合,同时给出完整代码与QA检查。