vista 的项目扩展与二次开发

1. 项目的基础介绍

Vista 是一个开源项目，旨在为短视频自动生成动画字幕。该项目是作者在 Supabase Launch week 6 的 Hackathon 提交的作品，灵感来源于 YouTube Shorts 中常见的动画字幕效果。Vista 通过使用现代浏览器支持的 ffmpeg-wasm 和 AssemblyAI API，实现了视频语音识别和字幕生成的功能。

2. 项目的核心功能

• 自动字幕生成：通过 AssemblyAI API 进行视频语音识别，自动生成字幕。
• 动画效果：利用 ffmpeg-wasm 在浏览器中处理视频，添加动画字幕效果。
• 实时更新：使用 Supabase Realtime 实时更新用户界面，展示生成的字幕。
• 用户认证：通过 Supabase Auth 处理用户认证和存储桶管理。
• 数据存储：利用 Supabase DB 和 Storage 存储用户数据和视频。

3. 项目使用了哪些框架或库？

• Nuxt 3：用于构建服务器端渲染的 Vue 应用程序。
• Supabase：一个开源的替代方案，提供数据库、认证、存储和实时功能。
• UnoCSS：一个用于快速开发响应式设计的原子 CSS 框架。
• AssemblyAI：提供语音识别和转录服务的 API。
• FFmpeg.wasm：在 WebAssembly 上运行的 FFmpeg，用于视频处理。

4. 项目的代码目录及介绍

vista/
├── .vscode/          # VSCode 配置文件
├── assets/           # 静态资源文件夹
├── components/       # Vue 组件
├── composables/      # Vue 组合式 API
├── layouts/          # 页面布局
├── middleware/       # 中间件
├── pages/            # 页面文件
├── public/           # 公共静态文件
├── server/           # 服务器端代码
│   └── middleware/   # 服务器端中间件
├── supabase/         # Supabase 相关代码
├── utils/            # 工具函数
├── .DS_Store         # Mac OS X Finder 信息文件
├── .env.example      # 环境变量示例文件
├── .gitignore        # Git 忽略文件
├── LICENSE           # 开源协议文件
├── README.md         # 项目说明文件
├── app.vue           # 主 Vue 组件
├── nuxt.config.ts    # Nuxt 配置文件
├── package.json      # 项目依赖和配置
├── tsconfig.json     # TypeScript 配置文件
└── yarn.lock         # Yarn 锁文件

5. 对项目进行扩展或者二次开发的方向

• 增加字幕样式：可以根据用户需求，增加更多个性化的字幕样式和动画效果。
• 多语言支持：扩展 AssemblyAI 的语言支持，为不同语种的视频提供字幕生成服务。
• 性能优化：优化视频处理和字幕生成的性能，提高用户体验。
• 增加用户互动：允许用户自定义字幕内容和样式，甚至可以添加交互式字幕。
• 集成更多服务：集成其他视频处理和存储服务，如 AWS、Google Cloud 等，提供更灵活的部署选项。
• 社区支持：建立社区，鼓励用户和开发者参与项目的维护和开发，共同推动项目发展。