0 Fork 0

Files

T

Kris Ka 8ee2d50044 修复WebSocket进度更新和前端状态自动更新问题

- 修复WebSocketNotificationService.send_processing_progress方法参数不匹配问题
- 修复前端RealTimeStatus组件WebSocket消息处理逻辑
- 修复Celery Worker队列配置，确保任务正确路由到processing队列
- 修复Celery应用导入冲突，统一使用正确的celery_app配置
- 添加实时项目状态更新功能，前端无需手动刷新即可看到处理进度
- 完善系统启动脚本，修复PYTHONPATH未绑定变量错误
- 优化流水线处理逻辑，确保所有6个步骤正常执行
- 添加完整的项目文档和启动指南

测试结果：
- WebSocket进度更新正常工作（16%, 33%, 100%）
- 流水线处理完全正常（6个步骤全部成功）
- 前端状态自动更新正常
- 项目状态正确同步到数据库

2025-09-08 17:21:31 +08:00

5.5 KiB

Raw Permalink Blame History

字幕编辑器功能指南

功能概述

字幕编辑器是一个简易的文字驱动剪辑的视频编辑器，允许用户通过划选删除字幕来同步删除对应时间戳的视频内容，方便用户快速修剪视频。

主要特性

1. 字粒度字幕编辑

支持按字、按句、按段的多层级字幕数据
精确到毫秒级的时间戳定位
智能文本分割和时间分配

2. 可视化编辑界面

左侧视频播放器，右侧字幕编辑区
实时高亮显示当前播放位置的字幕
支持鼠标划选、键盘选择字幕文本
实时预览删除效果

3. 智能视频剪辑

基于精确时间戳的视频片段提取
无缝拼接删除片段后的视频
保持原视频的编码格式和质量

4. 编辑历史管理

支持撤销/重做操作
编辑操作历史记录
可恢复的编辑状态

使用方法

1. 打开字幕编辑器

在项目详情页面，点击任意视频片段
在片段详情弹窗中，点击"字幕编辑"按钮
系统会自动加载该片段的字粒度字幕数据

2. 编辑字幕内容

选择字幕：点击右侧字幕列表中的任意单词或句子
多选操作：按住 Ctrl/Cmd 键点击多个字幕进行多选
删除选中：点击"删除选中"按钮删除选中的字幕段
撤销/重做：使用工具栏的撤销/重做按钮

3. 预览和保存

实时预览：左侧视频播放器会显示当前编辑状态
保存编辑：点击"保存编辑"按钮应用更改
下载结果：编辑完成后可以下载编辑后的视频文件

技术架构

前端组件

SubtitleEditor.tsx - 主编辑器组件
ClipDetailModal.tsx - 集成编辑器入口
subtitleEditorApi.ts - API服务层

后端服务

SubtitleProcessor - 字幕数据处理
VideoEditor - 视频剪辑处理
subtitle_editor.py - API接口层

数据流程

字幕解析：SRT文件 → 字粒度数据结构
用户编辑：选择删除 → 编辑操作记录
视频处理：时间轴生成 → FFmpeg剪辑 → 结果输出

API接口

获取字幕数据

GET /api/v1/subtitle-editor/{project_id}/clips/{clip_id}/subtitles

编辑视频

POST /api/v1/subtitle-editor/{project_id}/clips/{clip_id}/edit

获取编辑后的视频

GET /api/v1/subtitle-editor/{project_id}/clips/{clip_id}/edited-video

前置工作要求

1. 字幕数据增强

✅ 字粒度时间戳解析
✅ 字幕数据结构优化
✅ 时间戳精确度提升

2. 前端界面设计

✅ 双栏布局实现
✅ 字幕可视化展示
✅ 选择交互功能
✅ 实时预览机制

3. 后端API扩展

✅ 字幕数据API
✅ 视频剪辑API
✅ 编辑历史API

4. 视频处理优化

✅ 精确剪辑功能
✅ 无缝拼接实现
✅ 格式保持机制

文件结构

frontend/src/
├── components/
│   ├── SubtitleEditor.tsx          # 字幕编辑器主组件
│   └── ClipDetailModal.tsx         # 集成编辑器入口
├── services/
│   └── subtitleEditorApi.ts        # API服务层
└── types/
    └── subtitle.ts                 # 类型定义

backend/
├── utils/
│   ├── subtitle_processor.py       # 字幕处理器
│   └── video_editor.py            # 视频编辑器
└── api/v1/
    └── subtitle_editor.py         # API接口

注意事项

1. 性能考虑

大文件处理时建议分批加载字幕数据
视频剪辑操作可能需要较长时间，建议异步处理
编辑历史记录会占用内存，建议限制历史记录数量

2. 兼容性

支持常见的SRT字幕格式
支持MP4视频格式
需要FFmpeg环境支持

3. 错误处理

字幕文件不存在时的友好提示
视频剪辑失败时的错误恢复
网络异常时的重试机制

未来扩展

1. 功能增强

支持更多字幕格式（VTT、ASS等）
添加字幕编辑功能（修改文本、调整时间）
支持音频波形可视化

2. 性能优化

实现字幕数据的懒加载
优化视频剪辑算法
添加编辑操作的缓存机制

3. 用户体验

添加快捷键支持
实现拖拽选择功能
支持批量操作

故障排除

常见问题

字幕数据加载失败
- 检查SRT文件是否存在且格式正确
- 确认项目ID和片段ID是否正确
视频剪辑失败
- 检查FFmpeg是否正确安装
- 确认原始视频文件存在且可读
- 检查磁盘空间是否充足
编辑操作无响应
- 检查网络连接
- 刷新页面重试
- 查看浏览器控制台错误信息

调试方法

前端调试
- 打开浏览器开发者工具
- 查看Network标签页的API请求
- 检查Console标签页的错误信息
后端调试
- 查看后端日志文件
- 检查API接口返回状态
- 验证文件路径和权限

总结

字幕编辑器功能为AutoClip项目提供了强大的视频编辑能力，通过文字驱动的方式让用户能够快速、精确地修剪视频内容。该功能充分利用了现有的字幕处理基础设施，并在此基础上构建了完整的编辑工作流程。

通过这个功能，用户可以：

直观地看到视频的字幕内容
精确选择要删除的部分
实时预览编辑效果
快速生成编辑后的视频文件

这大大提升了视频编辑的效率和用户体验，使得AutoClip不仅仅是一个视频分析工具，更是一个实用的视频编辑平台。

5.5 KiB Raw Permalink Blame History Unescape Escape