# Qwen3-TTS 前端使用說明

## 已完成功能

✅ **完整的繁體中文界面**（台灣）
✅ **響應式導航列**
- Logo 與品牌名稱
- 說明文件、API 連結
- GitHub 按鈕

✅ **醒目的 Hero 區域**
- 主標題：「用 AI 複製任何聲音」
- 描述文字
- 開始使用與觀看示範按鈕

✅ **完整的語音複製操作介面**

**左欄：參考資料輸入**
- 參考音訊上傳區（拖放或點擊上傳）
- 上傳/錄音按鈕
- 參考文字輸入框
- x-vector 選項

**右欄：生成設定與輸出**
- 目標文字輸入框
- 語言選擇（自動）
- 模型大小選擇（1.7B）
- 複製並生成按鈕
- 生成音訊顯示區
- 狀態提示

✅ **完整的頁尾**
- 品牌資訊
- 產品連結
- 資源連結
- 社群媒體圖示
- 版權宣告

## 快速開始

### 1. 安裝依賴

```bash
cd frontend
npm install
```

### 2. 啟動開發伺服器

```bash
npm run dev
```

前端將在 http://localhost:3000 啟動。

### 3. 建置生產版本

```bash
npm run build
```

## 設計特色

- 🎨 **深色主題** - 現代化的深色配色方案
- 🎯 **漸層效果** - 品牌色漸層（紫/藍）
- ✨ **陰影與光暈** - 精緻的視覺效果
- 📱 **固定寬度** - 1440px 居中佈局
- 🔤 **Inter 字型** - 清晰易讀的現代字型

## 技術規格

**框架與工具**
- React 18 + TypeScript
- Vite（構建工具）
- Tailwind CSS（樣式框架）
- Lucide React（圖標庫）

**配色系統**
- 背景色：`#0a0d14`（主要）、`#0f1218`（次要）、`#151820`（第三級）
- 品牌色：`#6366f1`（主要）、`#8b5cf6`（次要）
- 文字色：白色階層（#ffffff → #6b7280）

## 待實現功能（需後端支援）

以下功能需要連接 Python 後端 API：

1. **檔案上傳**
   - 拖放音訊檔案上傳
   - 點擊上傳檔案
   - 音訊錄製功能

2. **表單輸入處理**
   - 參考文字輸入
   - 目標文字輸入
   - x-vector 選項切換

3. **下拉選單**
   - 語言選擇（中文、英文、日文、韓文等）
   - 模型大小選擇

4. **語音生成**
   - 呼叫後端 API 生成語音
   - 顯示生成進度
   - 載入狀態動畫

5. **音訊播放**
   - 播放生成的音訊
   - 音訊控制（播放/暫停/進度條）
   - 下載生成的音訊

6. **狀態管理**
   - 即時更新生成狀態
   - 錯誤處理與提示
   - 成功訊息顯示

## 建議的後端 API 端點

```
POST   /api/upload          # 上傳參考音訊
POST   /api/clone           # 生成複製語音
GET    /api/status/:id      # 查詢生成狀態
GET    /api/download/:id    # 下載生成的音訊
DELETE /api/audio/:id       # 刪除音訊檔案
```

## 後續開發步驟

1. **設定後端 API 連線**
   - 建立 API 客戶端
   - 設定環境變數（API URL）
   - 實作錯誤處理

2. **實作檔案上傳**
   - 拖放功能
   - 檔案驗證（格式、大小）
   - 上傳進度顯示

3. **實作表單狀態管理**
   - 使用 React State 或 Zustand
   - 表單驗證
   - 輸入清理

4. **實作音訊播放器**
   - HTML5 Audio 或第三方庫
   - 自訂播放控制 UI
   - 波形顯示（可選）

5. **實作即時狀態更新**
   - 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` 中修改配色：

```javascript
colors: {
  background: {
    primary: '#0a0d14',    // 主背景色
    secondary: '#0f1218',  // 次背景色
    tertiary: '#151820',   // 第三背景色
  },
  brand: {
    primary: '#6366f1',    // 品牌主色
    secondary: '#8b5cf6',  // 品牌次色
  },
}
```

## 授權

遵循主專案的 Apache 2.0 授權條款。