Qwen3-TTS Frontend
这是 Qwen3-TTS 语音克隆项目的前端界面实现。
技术栈
- React 18 - UI 框架
- TypeScript - 类型安全
- Tailwind CSS - 样式框架
- Vite - 构建工具
- Lucide React - 图标库
快速开始
1. 安装依赖
cd frontend
npm install
2. 启动开发服务器
npm run dev
应用将在 http://localhost:3000 启动。
3. 构建生产版本
npm run build
构建产物将生成在 dist/ 目录。
4. 预览生产构建
npm run preview
项目结构
frontend/
├── src/
│ ├── App.tsx # 主应用组件
│ ├── main.tsx # 应用入口
│ └── index.css # 全局样式
├── index.html # HTML 模板
├── package.json # 项目依赖
├── tailwind.config.js # Tailwind 配置
├── vite.config.ts # Vite 配置
└── tsconfig.json # TypeScript 配置
功能特性
- ✅ 响应式导航栏
- ✅ 醒目的 Hero 区域
- ✅ 语音克隆操作界面
- 参考音频上传区
- 参考文本输入框
- 目标文本输入框
- 语言和模型选择
- 生成按钮
- 音频输出显示
- ✅ 完整的页脚
- ✅ 深色主题配色
- ✅ 渐变色和阴影效果
与后端集成
目前这是纯前端实现。要连接到 Python 后端，需要：
- 在后端创建 API 端点（FastAPI 或 Flask）
- 在前端添加 API 调用逻辑
- 处理文件上传和音频生成
示例 API 端点结构：
POST /api/upload- 上传参考音频POST /api/clone- 生成克隆语音GET /api/output/:id- 获取生成的音频
自定义配色
颜色在 tailwind.config.js 中定义：
colors: {
background: {
primary: '#0a0d14',
secondary: '#0f1218',
tertiary: '#151820',
elevated: '#1e2532',
},
brand: {
primary: '#6366f1',
secondary: '#8b5cf6',
},
// ...更多颜色
}
浏览器支持
- Chrome/Edge (最新版本)
- Firefox (最新版本)
- Safari (最新版本)
License
遵循主项目的 Apache 2.0 授权。