Qwen3-TTS 前端使用說明
已完成功能
✅ 完整的繁體中文界面（台灣） ✅ 響應式導航列
- Logo 與品牌名稱
- 說明文件、API 連結
- GitHub 按鈕
✅ 醒目的 Hero 區域
- 主標題：「用 AI 複製任何聲音」
- 描述文字
- 開始使用與觀看示範按鈕
✅ 完整的語音複製操作介面
左欄：參考資料輸入
- 參考音訊上傳區（拖放或點擊上傳）
- 上傳/錄音按鈕
- 參考文字輸入框
- x-vector 選項
右欄：生成設定與輸出
- 目標文字輸入框
- 語言選擇（自動）
- 模型大小選擇（1.7B）
- 複製並生成按鈕
- 生成音訊顯示區
- 狀態提示
✅ 完整的頁尾
- 品牌資訊
- 產品連結
- 資源連結
- 社群媒體圖示
- 版權宣告
快速開始
1. 安裝依賴
cd frontend
npm install
2. 啟動開發伺服器
npm run dev
前端將在 http://localhost:3000 啟動。
3. 建置生產版本
npm run build
設計特色
- 🎨 深色主題 - 現代化的深色配色方案
- 🎯 漸層效果 - 品牌色漸層（紫/藍）
- ✨ 陰影與光暈 - 精緻的視覺效果
- 📱 固定寬度 - 1440px 居中佈局
- 🔤 Inter 字型 - 清晰易讀的現代字型
技術規格
框架與工具
- React 18 + TypeScript
- Vite（構建工具）
- Tailwind CSS（樣式框架）
- Lucide React（圖標庫）
配色系統
- 背景色：
#0a0d14（主要）、#0f1218（次要）、#151820（第三級） - 品牌色：
#6366f1（主要）、#8b5cf6（次要） - 文字色：白色階層（#ffffff → #6b7280）
待實現功能（需後端支援）
以下功能需要連接 Python 後端 API：
檔案上傳
- 拖放音訊檔案上傳
- 點擊上傳檔案
- 音訊錄製功能
表單輸入處理
- 參考文字輸入
- 目標文字輸入
- x-vector 選項切換
下拉選單
- 語言選擇（中文、英文、日文、韓文等）
- 模型大小選擇
語音生成
- 呼叫後端 API 生成語音
- 顯示生成進度
- 載入狀態動畫
音訊播放
- 播放生成的音訊
- 音訊控制（播放/暫停/進度條）
- 下載生成的音訊
狀態管理
- 即時更新生成狀態
- 錯誤處理與提示
- 成功訊息顯示
建議的後端 API 端點
POST /api/upload # 上傳參考音訊
POST /api/clone # 生成複製語音
GET /api/status/:id # 查詢生成狀態
GET /api/download/:id # 下載生成的音訊
DELETE /api/audio/:id # 刪除音訊檔案
後續開發步驟
設定後端 API 連線
- 建立 API 客戶端
- 設定環境變數（API URL）
- 實作錯誤處理
實作檔案上傳
- 拖放功能
- 檔案驗證（格式、大小）
- 上傳進度顯示
實作表單狀態管理
- 使用 React State 或 Zustand
- 表單驗證
- 輸入清理
實作音訊播放器
- HTML5 Audio 或第三方庫
- 自訂播放控制 UI
- 波形顯示（可選）
實作即時狀態更新
- WebSocket 或輪詢
- 進度條動畫
- 通知系統
專案結構
frontend/
├── src/
│ ├── App.tsx # 主應用元件
│ ├── main.tsx # 應用進入點
│ └── index.css # 全域樣式
├── index.html # HTML 模板
├── package.json # 專案依賴
├── tailwind.config.js # Tailwind 設定
├── vite.config.ts # Vite 設定
└── README.md # 英文說明文件
自訂樣式
可在 tailwind.config.js 中修改配色：
colors: {
background: {
primary: '#0a0d14', // 主背景色
secondary: '#0f1218', // 次背景色
tertiary: '#151820', // 第三背景色
},
brand: {
primary: '#6366f1', // 品牌主色
secondary: '#8b5cf6', // 品牌次色
},
}
授權
遵循主專案的 Apache 2.0 授權條款。