音视频AI 应用后端前端【免费下载链接】autoclipAutoClip : AI-powered video clipping and highlight generation · 一款智能高光提取与剪辑的二创工具项目地址https://gitcode.com/GitHub_Trending/autoc/autoclip点击查看免费下载AutoClip 是一个 AI 驱动的视频智能高光提取与剪辑工具其前端采用 React 18 TypeScript Vite Ant Design 技术栈构建为「视频上传 → AI 自动切片 → 片段/合集管理 → 下载导出」的完整工作流提供交互界面。本文以 frontend/README.md 为主线结合仓库源码系统讲解该前端项目的功能特性、技术栈、启动配置、页面与组件实现、状态管理、API 数据流与部署方式读者可据此快速上手开发或在本地复现完整的前后端联调环境。项目定位与功能特性AutoClip 前端的核心使命是让用户以极低门槛完成「视频素材 → 精彩片段 → 主题合集」的 AI 二创流程。根据 frontend/README.md其功能特性可划分为两个维度核心功能视频上传支持拖拽上传视频文件与字幕文件.srt也支持通过链接导入B 站、YouTube素材智能处理后端 AI 流水线自动提取视频精彩片段前端提供全流程状态反馈片段管理查看、编辑、下载视频片段支持按评分或时间排序合集创建AI 推荐合集与手动创建合集并存支持合集内片段拖拽排序实时监控处理进度实时反馈包含轮询与 WebSocket 两种进度通道。用户界面特性现代化设计基于 Ant Design 组件库并在ConfigProvider中定制了 Calm Premium 主题 token见 frontend/src/main.tsx响应式布局支持桌面与移动端直观操作拖拽排序react-beautiful-dnd、一键下载状态反馈清晰的处理状态与进度显示项目卡片、统一状态栏、失败重试与反馈入口。技术栈明细README 中列出的技术栈与 frontend/package.json 中的实际依赖完全对应类别技术仓库中的实际版本前端框架React^18.2.0语言TypeScript^5.2.2构建工具Vite^5.0.8UI 组件Ant Design (antd) ant-design/icons^5.12.8 / ^5.2.6状态管理Zustand^4.4.7路由React Router DOM^6.20.1HTTP 客户端Axios^1.6.2拖拽功能React Beautiful DnD^13.1.1视频播放React Player^2.13.0文件上传React Dropzone^14.2.3桌面端集成tauri-apps/api^2.8.0产品分析posthog-js^1.379.0除 README 列出的核心栈外从 package.json 还可以看到项目引入了 Radix UI 基础组件label/progress/select/slider/switch、Tailwind CSS v4、dayjs时间处理与 lucide-react 图标库说明该前端在 Ant Design 之上还保留了轻量自绘组件的灵活性。npm run typechecktsc --noEmit与npm run lintESLint--max-warnings 0两个脚本提供了开箱即用的类型与代码规范检查。快速开始从零启动前端开发环境环境要求Node.jsREADME 要求Node.js 16考虑到依赖中的 Vite 5 实际建议 Node 18从当前仓库依赖出发推荐使用 Node.js 18 及以上版本npm 或 yarn 包管理器。安装依赖与启动开发服务器npm install # 或 yarn install npm run dev # 或 yarn dev启动后访问http://localhost:3000。这里注意 frontend/vite.config.ts 中的两个关键配置port: 3000且strictPort: true端口被占用时 Vite 会直接报错而非自动切换确保前端与后续联调约定保持一致开发代理/api开头的请求默认代理到http://localhost:8000FastAPI 后端默认端口。在桌面端Tauri场景下后端使用随机端口可用环境变量覆盖BACKEND_URLhttp://127.0.0.1:PORT npm run devchangeOrigin: true保证跨域场景下 Host 头正确改写本地开发无需处理 CORS。构建生产版本npm run build # 或 yarn build构建配置同样位于 frontend/vite.config.ts生产环境base: ./使用相对路径便于静态文件被部署到任意子路径chunkSizeWarningLimit: 1600放宽了大体积 chunk 的告警阈值。配置文件中有意不做 React 与 antd 的手动 vendor 分包注释明确说明antd 顶层代码在模块求值期调用React.createContext若 React 与 antd 被拆到不同 chunk加载顺序不保证会导致React undefined的白屏问题交由 Rollup 自行决定分包更稳妥——这是本项目沉淀下来的一个值得借鉴的构建排坑经验。项目结构解析README 给出了 frontend 目录的经典结构结合当前仓库实际可归纳为frontend/ ├── public/ # 静态资源favicon、background.svg ├── src/ │ ├── analytics/ # 产品分析events / feedback / lifecycle / posthog │ ├── components/ # 可复用组件 │ │ ├── Header.tsx # 页面头部 │ │ ├── FileUpload.tsx # 文件上传组件 │ │ ├── ProjectCard.tsx # 项目卡片 │ │ ├── ClipCard.tsx # 视频片段卡片 │ │ └── CollectionCard.tsx # 合集卡片 │ ├── pages/ # 页面组件 │ │ ├── HomePage.tsx # 项目首页 │ │ ├── ProjectDetailPage.tsx # 项目详情页 │ │ └── SettingsPage.tsx # 设置页 │ ├── services/api.ts # Axios API 层全部后端接口定义 │ ├── store/useProjectStore.ts # Zustand 项目状态 │ ├── hooks/ # 轮询、WebSocket、任务进度等自定义 Hook │ ├── App.tsx / main.tsx # 应用主组件 / 入口 │ └── index.css # 全局样式 ├── package.json ├── vite.config.ts # Vite 配置代理、别名、构建 ├── tsconfig.json # TypeScript 配置 └── README.md实际仓库在 README 基础上有明显演进src下新增了analytics/、hooks/、stores/如 frontend/src/stores/useSimpleProgressStore.ts、utils/API 配置管理、错误处理、桌面模式检测、ui/自绘组件与 ac.css 样式体系组件数量也从 5 个扩展到 40 余个覆盖 B 站账号管理、上传队列、字幕识别配置、任务进度弹窗等更丰富的业务模块。页面与核心交互路由定义位于 frontend/src/App.tsx共三个页面首页/、项目详情页/project/:id、设置页/settings外层统一包上Header与 Ant DesignLayout。项目首页/对应 frontend/src/pages/HomePage.tsx实现 README 描述的项目列表、搜索筛选、新建项目与状态监控双 Tab 导入「链接导入」B 站/YouTube 链接下载与「文件导入」两个胶囊分段切换项目轮询通过useProjectPolling每 30 秒拉取一次项目列表interval: 30000减少频繁请求同时通过useSimpleProgressStore实现全局保险——当不存在processing/pending状态的项目时自动停止进度轮询并清空缓存避免后台空转状态筛选支持「全部 / 已完成 / 处理中 / 处理失败」四种视图进入详情限制pending导入中状态的项目点击卡片会被拦截并提示「项目正在导入中」启动优化项目列表延迟 1 秒加载避免启动时立即发起大量请求。项目详情页/project/:id对应 frontend/src/pages/ProjectDetailPage.tsx是 AI 切片结果的管理中心元信息展示切片数、合集数、切片总时长自动换算格式、创建时间dayjs 相对时间处理控制pending状态显示「开始处理」失败状态显示「反馈问题 重试」合集区AI 推荐合集横滑展示支持新建合集frontend/src/components/CreateCollectionModal.tsx、合集预览弹窗frontend/src/components/CollectionPreviewModal.tsx、拖拽排序、生成合集视频切片区卡片网格展示支持「按评分 / 按时间」双模式排序getSortedClips点击进入预览支持下载、编辑标题、AI 生成标题、加入合集空态引导无切片时提示「可以在设置里调低最低评分阈值后重试」并内置反馈入口。核心组件解析FileUpload拖拽上传与自动建项目frontend/src/components/FileUpload.tsx 基于 react-dropzone 实现文件类型验证accept限定视频格式mp4/avi/mov/mkv/webm与字幕.srt拖入后按扩展名自动分流到video/srt槽位自动命名选择视频后自动以文件名去扩展名填充项目名称可手动修改分类选择从后端GET /video-categories拉取视频分类知识科普、商业财经、观点评论、经验分享、演讲脱口秀、内容解说、娱乐内容等支持默认分类与彩色选中态AI 字幕提示未附带 .srt 时显示绿色提示「将使用 AI 语音识别自动生成字幕文件」与后端 Whisper 字幕策略见 docs/WHISPER_STRATEGY_IMPLEMENTATION.md衔接上传进度以递减增量模拟进度条避免长文件上传时进度卡死的错觉健壮的错误处理针对 413文件过大、415格式不支持、400参数错误、500服务器错误、超时ECONNABORTED分别给出友好提示并提供重试建议上传前校验调用validateApiConfigBeforeProjectCreation检查 LLM API 配置是否就绪避免创建出无法处理的项目。ProjectCard项目状态与缩略图frontend/src/components/ProjectCard.tsx 承担首页项目卡片状态标准化将后端状态归一为importing / downloading / processing / completed / failed其中下载中状态直接透传download_progress百分比前端缩略图优先使用后端缩略图否则通过video元素预载元数据、seek 到视频 1/4 处或第 5 秒截帧用 canvas 绘制 320×180 的 JPEG 缩略图并缓存到localStoragethumbnail_前缀超 50 条时清理旧缓存一次性的尽力自动启动对pending且非下载中的项目每个项目会话内只静默调用一次startProcessing用模块级Set记录已启动的项目 id避免组件重挂载引发「重试→刷新→重挂载→再重试」的死循环——源码注释中记录了该问题的完整排查过程是典型的 React 副作用治理案例进度计算下载中显示真实下载进度导入中显示 5%处理中按current_step / total_steps换算失败为 0、完成为 100。ClipCard 与 CollectionCardClipCardfrontend/src/components/ClipCard.tsx展示片段标题、时间区间、评分与推荐理由提供在线预览react-player、编辑标题、AI 生成标题、下载与「加入合集」操作CollectionCardfrontend/src/components/CollectionCard.tsx展示合集标题/摘要/封面支持片段列表管理、拖拽排序react-beautiful-dnd与生成合集视频。状态管理与数据流Axios API 层统一实例与自动重试frontend/src/services/api.ts 是前端与后端通信的唯一出口实现远比 README 中的接口列表丰富动态 baseURL通过apiConfigManager.getBaseUrl()获取后端地址并注册监听器在配置变化时同步更新实例5 分钟超时timeout: 300000适配 AI 处理类接口的长耗时特征幂等请求自动重试仅对get/head/options方法、命中 408/429/500/502/503/504 或网络中断ECONNABORTED/无响应时重试最多 2 次采用指数退避300 * 2^retryCount毫秒慢请求告警响应耗时超过 5 秒打印 warning 日志统一错误语义化把 429、超时、网络失败、5xx 分别转换为用户可读的中文提示如「系统正在处理其他项目请稍后再试」并通过统一错误处理器上报Tauri 运行时适配检测到桌面端运行环境时等待apiConfigManager就绪后再发请求。Zustand 状态管理乐观更新与回滚frontend/src/store/useProjectStore.ts 管理项目、片段、合集三层数据遵循 README「轻量级状态管理」的设计完整类型定义Project/Clip/Collection三个接口与后端字段一一对应如final_score、recommend_reason、clip_metadata的映射转换乐观更新reorderCollectionClips、addClipToCollection、removeClipFromCollection均先立即更新前端状态记录lastEditTimestamp再调用后端 API失败时回滚到原始clip_ids并抛出异常保证拖拽排序等交互的流畅性拖拽冲突防护setProjects在isDragging为 true 时跳过更新避免轮询数据覆盖用户正在进行的拖拽排序删除联动删除项目时同步清理该项目的缩略图缓存。关键 API 接口对照README 列出了基础接口实际 frontend/src/services/api.ts 按域拆分为四个 API 对象这里给出核心对照表域方法接口项目projectApi.getProjects()GET /projects/项目projectApi.uploadFiles()POST /projects/uploadmultipart项目projectApi.getProcessingStatus()GET /projects/:id/status项目projectApi.startProcessing()/retryProcessing()POST /projects/:id/process/retry项目projectApi.restartStep()POST /projects/:id/restart-step片段projectApi.getClips()GET /clips/?project_id:id片段projectApi.updateClipTitle()/generateClipTitle()PATCH /clips/:clipId/title/POST /clips/:clipId/generate-title合集projectApi.getCollections()/createCollection()GET /collections/?project_id:id/POST /collections/合集projectApi.reorderCollectionClips()PATCH /projects/:projectId/collections/:id/reorder下载projectApi.downloadVideo()/downloadExport()GET /projects/:id/download/projects/:id/exports/:jobId/download导入bilibiliApi.createDownloadTask()/parseVideoInfo()POST /bilibili/download//bilibili/parse导入bilibiliApi.createYouTubeDownloadTask()POST /youtube/download语音speechApi.getRuntimeStatus()/getModels()GET /whisper/runtime-status//whisper-models设置settingsApi.getSettings()/testApiKey()GET /settings/POST /settings/test-api其中getClips与getCollections会将后端的秒级时间戳转换为HH:MM:SS时间字符串、并把clip_metadata中的推荐理由/大纲/内容合并进前端 Clip 结构是前后端字段适配的典型示例。应用入口主题、国际化与运行时防护frontend/src/main.tsx 集中体现了工程的工程化细节HashRouter 路由适配静态部署与桌面端 file 协议加载Ant Design 主题通过ConfigProvider注入中文本地化zhCN与 Calm Premium token——主色#2D6BFF暗色#5A8BFF、圆角 10、控件高度 38Button 全圆角胶囊、Card 大圆角 16并支持亮/暗双主题切换配合 frontend/src/context/ThemeContext.tsxdayjs 本地化启用 relativeTime/timezone/utc 插件默认时区Asia/Shanghai错误边界根组件包裹ErrorBoundary开发模式显示详情避免运行时异常导致白屏翻译防护installDomTranslationGuard()在 React 挂载前安装防止浏览器网页翻译移动文本节点导致 React 更新时整页崩溃——源码注释标明了该问题的 issue 编号是一个真实踩坑后的防御性方案产品分析initAnalytics()在无 PostHog key 时自动 no-op 不发网络请求trackLaunch()上报启动事件路由切换时手动上报 pageview。部署说明开发与生产环境# 开发环境http://localhost:3000/api 代理到后端 npm run dev # 生产构建 本地预览 npm run build npm run previewDocker 部署README 提供了基于node:16-alpine的 Dockerfile 模板安装依赖 → 构建 →npm run preview监听 3000 端口。结合仓库根目录的 Dockerfile、docker-compose.yml 与 docker-start.sh实际项目中前端通常与 FastAPI 后端、Celery 任务队列一并容器化编排前端构建产物由 Nginx 等静态服务器托管并反向代理/api。与 Tauri 桌面端的集成值得说明的是该前端不止运行在浏览器中仓库的 src-tauri/ 目录表明项目使用 Tauri 将前端打包为桌面应用frontend/vite.config.ts 中optimizeDeps.include显式预打包了tauri-apps/apitauri-apps/plugin-shell亦在依赖清单中。桌面场景下后端地址为随机端口前端通过apiConfigManager动态获取 baseURL见 frontend/src/utils/apiConfig.ts并在请求拦截器中等待配置就绪这就是 vite 代理中BACKEND_URL覆盖机制存在的意义。后续优化方向README 中规划了三个方向的待办可作为社区贡献的切入点功能增强视频在线编辑、批量操作、导出多种格式、用户权限管理、云端存储集成性能优化虚拟滚动、图片懒加载、代码分割、缓存策略用户体验快捷键支持、主题切换、国际化、无障碍访问。贡献与许可README 采用标准的 Fork → 功能分支 → 提交 → 推送 → Pull Request 贡献流程许可证为MIT License。需要强调的是前端只是 AutoClip 的一层外壳AI 切片的真正能力来自后端流水线——从 backend/pipeline/ 的大纲、时间点、评分、标题、聚类到视频合成的多步骤处理以及 backend/api/v1/ 提供的 REST 接口。想深入了解端到端架构可继续阅读 docs/BACKEND_ARCHITECTURE.md 与 docs/SYSTEM_ARCHITECTURE.md。赞分享音视频AI 应用后端前端【免费下载链接】autoclipAutoClip : AI-powered video clipping and highlight generation · 一款智能高光提取与剪辑的二创工具项目地址https://gitcode.com/GitHub_Trending/autoc/autoclip点击查看免费下载相关推荐NOFX Web Dashboard基于 Vite React TypeScript 的 AI 自动交易监控面板实战指南NOFX Web Dashboard基于 Vite React TypeScript 的 AI 自动交易监控面板实战指南 NOFX Web DashbAI Agent金融科技后端前端AutoClip AI 视频切片项目快速上手指南从环境搭建到前后端联调AutoClip AI 视频切片项目快速上手指南从环境搭建到前后端联调 本文是 AutoClipAI 智能视频切片与高光提取系统的快速开始指南覆盖开发环音视频AI 应用后端前端Ant Design Carousel 自动切换autoplay实践指南基于 react-slick 的定时轮播详解Ant Design Carousel 自动切换autoplay实践指南基于 react slick 的定时轮播详解 Carousel走马灯是 AntUI组件前端设计系统创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考