From d6edc69c6506e0bbd04735c9ffef484f15d23b75 Mon Sep 17 00:00:00 2001
From: lanhao <lanhao@military.tech>
Date: Tue, 30 Jun 2026 21:00:20 +0800
Subject: [PATCH] =?UTF-8?q?Initial=20commit:=20=E5=86=9B=E4=BA=8B=E7=A7=91?=
 =?UTF-8?q?=E6=8A=80AI=E9=85=8D=E9=9F=B3=E7=B3=BB=E7=BB=9F=20v1.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Flask backend with MiniMax and CosyVoice TTS engines
- Frontend UI with emotion tags, speed/pitch/volume controls
- Nginx reverse proxy configuration
- Dual engine support (MiniMax speech-2.8-hd, CosyVoice v3.5-flash)
---
 .gitignore                                |  19 ++
 backend/app/__init__.py                   |   1 +
 backend/app/main.py                       |  14 +
 backend/app/routes/__init__.py            |   1 +
 backend/app/routes/health.py              |  15 +
 backend/app/routes/tts.py                 | 112 +++++++
 backend/app/routes/tts_cosyvoice.py       |  55 ++++
 backend/app/routes/tts_minimax.py         |  10 +
 backend/app/routes/tts_synthesize.py      |  57 ++++
 backend/app/services/__init__.py          |   0
 backend/app/services/cosyvoice_service.py |  43 +++
 backend/app/services/minimax_service.py   |  50 +++
 backend/app/utils/__init__.py             |   0
 design.md                                 | 257 +++++++++++++++
 frontend/app.js                           | 383 ++++++++++++++++++++++
 frontend/index.html                       | 186 +++++++++++
 frontend/styles.css                       | 348 ++++++++++++++++++++
 17 files changed, 1551 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 backend/app/__init__.py
 create mode 100644 backend/app/main.py
 create mode 100644 backend/app/routes/__init__.py
 create mode 100644 backend/app/routes/health.py
 create mode 100644 backend/app/routes/tts.py
 create mode 100644 backend/app/routes/tts_cosyvoice.py
 create mode 100644 backend/app/routes/tts_minimax.py
 create mode 100644 backend/app/routes/tts_synthesize.py
 create mode 100644 backend/app/services/__init__.py
 create mode 100644 backend/app/services/cosyvoice_service.py
 create mode 100644 backend/app/services/minimax_service.py
 create mode 100644 backend/app/utils/__init__.py
 create mode 100644 design.md
 create mode 100644 frontend/app.js
 create mode 100644 frontend/index.html
 create mode 100644 frontend/styles.css

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..759f59f
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,19 @@
+# Python
+__pycache__/
+*.pyc
+venv/
+.env
+
+# Audio files (too large for git)
+*.wav
+audio_uploads/*.mp3
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Docker
+get-docker.sh
+flask.log
+*.log
+PROJECT_STATUS.md
diff --git a/backend/app/__init__.py b/backend/app/__init__.py
new file mode 100644
index 0000000..04f537b
--- /dev/null
+++ b/backend/app/__init__.py
@@ -0,0 +1 @@
+# 应用包初始化
diff --git a/backend/app/main.py b/backend/app/main.py
new file mode 100644
index 0000000..831dbda
--- /dev/null
+++ b/backend/app/main.py
@@ -0,0 +1,14 @@
+from flask import Flask, jsonify
+from flask_cors import CORS
+
+def create_app():
+    app = Flask(__name__)
+    CORS(app, resources={r"/api/*": {"origins": "*"}})
+    from app.routes.tts_synthesize import bp as synthesize_bp
+    app.register_blueprint(synthesize_bp)
+    @app.route('/api/health')
+    def health(): return jsonify({'status': 'ok', 'service': '军事科技AI配音系统'})
+    return app
+
+if __name__ == '__main__':
+    create_app().run(host='0.0.0.0', port=5000, debug=True)
diff --git a/backend/app/routes/__init__.py b/backend/app/routes/__init__.py
new file mode 100644
index 0000000..1c1e462
--- /dev/null
+++ b/backend/app/routes/__init__.py
@@ -0,0 +1 @@
+# 路由包初始化
diff --git a/backend/app/routes/health.py b/backend/app/routes/health.py
new file mode 100644
index 0000000..cc58280
--- /dev/null
+++ b/backend/app/routes/health.py
@@ -0,0 +1,15 @@
+"""
+健康检查路由
+"""
+
+from flask import Blueprint, jsonify
+
+health_bp = Blueprint('health', __name__)
+
+@health_bp.route('/health', methods=['GET'])
+def health_check():
+    """健康检查接口"""
+    return jsonify({
+        'status': 'healthy',
+        'message': '服务运行正常'
+    })
diff --git a/backend/app/routes/tts.py b/backend/app/routes/tts.py
new file mode 100644
index 0000000..5deb617
--- /dev/null
+++ b/backend/app/routes/tts.py
@@ -0,0 +1,112 @@
+from flask import Blueprint, jsonify, request, send_file
+import requests, os, uuid
+import logging
+import dashscope
+from dashscope.audio.tts_v2 import SpeechSynthesizer
+
+# 配置日志
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+# 从环境变量读取配置（如果不存在则使用默认值）
+MINIMAX_API_KEY = os.environ.get("MINIMAX_API_KEY", "sk-api-x3IxJC9nlORkopOJ4NOWff0Er4rtDjVrM08O5HOCYnsmBaZ2k1n2HIBLZGAwIDOSTh6bsmC2Nmz_xfyNnEWfhjLTrQPRLLN64Hu89ed0vG6gzwFfE24gfQM")
+MINIMAX_VOICE_ID = os.environ.get("MINIMAX_VOICE_ID", "lanhao_military_tech")
+COSYVOICE_API_KEY = os.environ.get("COSYVOICE_API_KEY", "sk-3c386742861b4d2da421030fa6254ef6")
+COSYVOICE_VOICE_ID = os.environ.get("COSYVOICE_VOICE_ID", "cosyvoice-v3.5-flash-bailian-e859a6e87823419f9c6b3eefb1a97dc3")
+
+# 配置DashScope WebSocket
+dashscope.api_key = COSYVOICE_API_KEY
+dashscope.base_websocket_api_url = 'wss://dashscope.aliyuncs.com/api-ws/v1/inference'
+
+logger.info(f"Loaded config - MINIMAX_VOICE_ID: {MINIMAX_VOICE_ID}, COSYVOICE_VOICE_ID: {COSYVOICE_VOICE_ID}")
+
+tts_bp = Blueprint("tts", __name__)
+
+@tts_bp.route('/synthesize', methods=['POST'])
+def synthesize():
+    d = request.get_json()
+    t = d.get('text', '')
+    m = d.get('model', 'minimax')
+    if m == 'minimax': return synthesize_minimax(t)
+    elif m == 'cosyvoice': return synthesize_cosyvoice(t)
+    return jsonify({'error': '不支持的模型'}), 400
+
+def synthesize_minimax(text):
+    if not text:
+        return jsonify({"success": False, "error": "文本不能为空"}), 400
+    
+    url = "https://api.minimaxi.com/v1/t2a_v2"
+    headers = {
+        "Authorization": f"Bearer {MINIMAX_API_KEY}", 
+        "Content-Type": "application/json"
+    }
+    payload = {
+        "model": "speech-2.8-hd",
+        "text": text,
+        "voice_setting": {"voice_id": MINIMAX_VOICE_ID},
+        "audio_setting": {
+            "sample_rate": 32000,
+            "format": "mp3",
+            "bitrate": 128000,
+            "speed": 1.0,
+            "volume": 1.0,
+            "pitch": 0
+        }
+    }
+    
+    logger.info(f"Calling MiniMax API with voice_id: {MINIMAX_VOICE_ID}")
+    
+    try:
+        resp = requests.post(url, headers=headers, json=payload, timeout=60)
+        result = resp.json()
+        logger.info(f"MiniMax response: {result}")
+        
+        if result.get("base_resp", {}).get("status_code") == 0:
+            audio_hex = result.get("data", {}).get("audio", "")
+            if audio_hex:
+                filename = f"minimax_{uuid.uuid4().hex[:8]}.mp3"
+                filepath = f"/workspace/military_tech_voice/audio_uploads/{filename}"
+                with open(filepath, "wb") as f: f.write(bytes.fromhex(audio_hex))
+                logger.info(f"Audio saved to: {filepath}")
+                return jsonify({"success": True, "audio_url": f"/api/tts/audio/{filename}"})
+        
+        error_msg = result.get("base_resp", {}).get("status_msg", str(result))
+        return jsonify({"success": False, "error": error_msg})
+    except Exception as e:
+        logger.error(f"MiniMax API error: {e}")
+        return jsonify({"success": False, "error": str(e)}), 500
+
+def synthesize_cosyvoice(text):
+    if not text:
+        return jsonify({"success": False, "error": "文本不能为空"}), 400
+    
+    logger.info(f"Calling CosyVoice WebSocket API with voice_id: {COSYVOICE_VOICE_ID}")
+    
+    try:
+        # 使用DashScope SDK的WebSocket方式
+        synthesizer = SpeechSynthesizer(
+            model="cosyvoice-v3-flash",
+            voice=COSYVOICE_VOICE_ID
+        )
+        
+        # 调用WebSocket API进行语音合成
+        audio = synthesizer.call(text)
+        
+        if audio:
+            filename = f"cosyvoice_{uuid.uuid4().hex[:8]}.mp3"
+            filepath = f"/workspace/military_tech_voice/audio_uploads/{filename}"
+            with open(filepath, "wb") as f: 
+                f.write(audio)
+            logger.info(f"CosyVoice audio saved to: {filepath}")
+            return jsonify({"success": True, "audio_url": f"/api/tts/audio/{filename}"})
+        
+        return jsonify({"success": False, "error": "未生成音频"})
+    except Exception as e:
+        logger.error(f"CosyVoice WebSocket API error: {e}")
+        return jsonify({"success": False, "error": str(e)}), 500
+
+@tts_bp.route('/audio/<filename>')
+def get_audio(filename):
+    filepath = f"/workspace/military_tech_voice/audio_uploads/{filename}"
+    if os.path.exists(filepath): return send_file(filepath, mimetype="audio/mpeg")
+    return jsonify({"error": "文件不存在"}), 404
diff --git a/backend/app/routes/tts_cosyvoice.py b/backend/app/routes/tts_cosyvoice.py
new file mode 100644
index 0000000..5917966
--- /dev/null
+++ b/backend/app/routes/tts_cosyvoice.py
@@ -0,0 +1,55 @@
+from flask import Blueprint, request, jsonify
+import dashscope
+from dashscope.audio.tts_v2 import SpeechSynthesizer
+import os
+
+cosyvoice_bp = Blueprint('cosyvoice', __name__)
+
+# CosyVoice配置
+COSYVOICE_API_KEY = os.environ.get('COSYVOICE_API_KEY', 'sk-3c386742861b4d2da421030fa6254ef6')
+COSYVOICE_VOICE_ID = os.environ.get('COSYVOICE_VOICE_ID', 'cosyvoice-v3.5-flash-bailian-e859a6e87823419f9c6b3eefb1a97dc3')
+COSYVOICE_MODEL = 'cosyvoice-v3.5-flash'  # 注意：克隆音色必须用这个模型
+
+def synthesize_cosyvoice(text):
+    """使用CosyVoice WebSocket SDK合成语音"""
+    try:
+        # 设置API Key
+        dashscope.api_key = COSYVOICE_API_KEY
+        
+        # 创建合成器
+        synthesizer = SpeechSynthesizer(
+            model=COSYVOICE_MODEL,
+            voice=COSYVOICE_VOICE_ID
+        )
+        
+        # 合成音频
+        audio = synthesizer.call(text)
+        
+        if audio:
+            return {
+                "success": True,
+                "audio_data": audio.hex() if isinstance(audio, bytes) else audio,
+                "model": "cosyvoice",
+                "voice_id": COSYVOICE_VOICE_ID
+            }
+        else:
+            return {"success": False, "error": "No audio returned"}
+            
+    except Exception as e:
+        return {"success": False, "error": str(e)}
+
+@cosyvoice_bp.route('/cosyvoice', methods=['POST'])
+def cosyvoice_synthesize():
+    """CosyVoice合成接口"""
+    data = request.get_json()
+    text = data.get('text', '')
+    
+    if not text:
+        return jsonify({"success": False, "error": "Text is required"}), 400
+    
+    result = synthesize_cosyvoice(text)
+    
+    if result.get("success"):
+        return jsonify(result)
+    else:
+        return jsonify(result), 500
diff --git a/backend/app/routes/tts_minimax.py b/backend/app/routes/tts_minimax.py
new file mode 100644
index 0000000..c381f24
--- /dev/null
+++ b/backend/app/routes/tts_minimax.py
@@ -0,0 +1,10 @@
+def synthesize_minimax(text):
+    url = "https://api.minimaxi.com/v1/t2a_v2"
+    headers = {"Authorization": f"Bearer {MINIMAX_API_KEY}", "Content-Type": "application/json"}
+    payload = {
+        "model": "speech-02-turbo",
+        "text": text,
+        "voice_setting": {"voice_id": MINIMAX_VOICE_ID}
+    }
+    resp = requests.post(url, headers=headers, json=payload)
+    return jsonify({"success": True, "model": "minimax", "text": text, "response": resp.json()})
diff --git a/backend/app/routes/tts_synthesize.py b/backend/app/routes/tts_synthesize.py
new file mode 100644
index 0000000..081a6c0
--- /dev/null
+++ b/backend/app/routes/tts_synthesize.py
@@ -0,0 +1,57 @@
+from flask import Blueprint, request, jsonify
+import base64
+import os
+import requests
+from app.services.minimax_service import synthesize_minimax
+from app.services.cosyvoice_service import synthesize_cosyvoice
+
+bp = Blueprint('tts', __name__, url_prefix='/api')
+
+MINIMAX_API_KEY = os.getenv('MINIMAX_API_KEY', '')
+MINIMAX_API_URL = 'https://api.minimax.chat/v1/t2a_v2'
+
+COSYVOICE_API_URL = os.getenv('COSYVOICE_API_URL', 'http://127.0.0.1:5001/v1/audio/synthesis')
+
+@bp.route('/synthesize', methods=['POST'])
+def synthesize():
+    data = request.get_json()
+    
+    if not data or 'text' not in data:
+        return jsonify({'error': '缺少text参数'}), 400
+    
+    text = data.get('text')
+    engine = data.get('engine', 'minimax')
+    speed = data.get('speed', 1.0)
+    pitch = data.get('pitch', 0)
+    volume = data.get('volume', 1.0)
+    instruction = data.get('instruction')  # 用于CosyVoice的情绪指令
+    
+    if not text.strip():
+        return jsonify({'error': '文本不能为空'}), 400
+    
+    if len(text) > 500:
+        return jsonify({'error': '文本不能超过500字'}), 400
+    
+    try:
+        if engine == 'cosyvoice':
+            audio_data = synthesize_cosyvoice(
+                text=text,
+                speed=speed,
+                pitch=pitch,
+                volume=volume,
+                instruction=instruction
+            )
+        else:
+            audio_data = synthesize_minimax(
+                text=text,
+                speed=speed,
+                pitch=pitch,
+                volume=volume
+            )
+        
+        return jsonify({
+            'success': True,
+            'audio': base64.b64encode(audio_data).decode('utf-8')
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
diff --git a/backend/app/services/__init__.py b/backend/app/services/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/backend/app/services/cosyvoice_service.py b/backend/app/services/cosyvoice_service.py
new file mode 100644
index 0000000..321f6a1
--- /dev/null
+++ b/backend/app/services/cosyvoice_service.py
@@ -0,0 +1,43 @@
+import os
+import requests
+
+def synthesize_cosyvoice(text, speed=1.0, pitch=0, volume=1.0, instruction=None):
+    """调用阿里云百炼CosyVoice API"""
+    api_key = os.getenv('DASHSCOPE_API_KEY', '')
+    if not api_key:
+        raise ValueError('DASHSCOPE_API_KEY未设置')
+    
+    url = 'https://dashscope.aliyuncs.com/api/v1/services/audio/tts/SpeechSynthesizer'
+    headers = {
+        'Authorization': f'Bearer {api_key}',
+        'Content-Type': 'application/json'
+    }
+    
+    payload = {
+        'model': 'cosyvoice-v3.5-flash',
+        'input': {
+            'text': text,
+            'voice': 'cosyvoice-v3.5-flash-bailian-e859a6e87823419f9c6b3eefb1a97dc3',
+            'format': 'mp3',
+            'sample_rate': 32000
+        }
+    }
+    
+    response = requests.post(url, json=payload, headers=headers, timeout=60)
+    
+    if response.status_code != 200:
+        raise Exception(f'CosyVoice API错误: {response.status_code} - {response.text}')
+    
+    result = response.json()
+    
+    # 阿里云返回JSON格式，音频数据在 output.audio.url 字段
+    if 'output' in result and 'audio' in result['output']:
+        audio_url = result['output']['audio'].get('url')
+        if audio_url:
+            # 从URL下载实际音频
+            audio_response = requests.get(audio_url, timeout=60)
+            if audio_response.status_code == 200:
+                return audio_response.content
+            raise Exception(f'下载音频失败: {audio_response.status_code}')
+    
+    raise Exception(f'CosyVoice返回格式异常: {result}')
\ No newline at end of file
diff --git a/backend/app/services/minimax_service.py b/backend/app/services/minimax_service.py
new file mode 100644
index 0000000..00225de
--- /dev/null
+++ b/backend/app/services/minimax_service.py
@@ -0,0 +1,50 @@
+import os
+import base64
+import requests
+from io import BytesIO
+
+def synthesize_minimax(text, speed=1.0, pitch=0, volume=1.0):
+    """调用MiniMax TTS API"""
+    api_key = os.getenv('MINIMAX_API_KEY', '')
+    if not api_key:
+        raise ValueError('MINIMAX_API_KEY未设置')
+    
+    # 将音量映射到0-100
+    volume_int = int(volume * 100)
+    
+    url = 'https://api.minimax.chat/v1/t2a_v2'
+    headers = {
+        'Authorization': f'Bearer {api_key}',
+        'Content-Type': 'application/json'
+    }
+    
+    payload = {
+        'model': 'speech-2.8-hd',
+        'text': text,
+        'stream': False,
+        'voice_setting': {
+            'voice_id': 'lanhao_military_tech',
+            'speed': speed,
+            'vol': volume_int,
+            'pitch': pitch,
+        },
+        'audio_setting': {
+            'audio_sample_rate': 32000,
+            'bitrate': 128000,
+            'format': 'mp3'
+        }
+    }
+    
+    response = requests.post(url, json=payload, headers=headers, timeout=60)
+    
+    if response.status_code != 200:
+        raise Exception(f'MiniMax API错误: {response.status_code} - {response.text}')
+    
+    result = response.json()
+    
+    if 'data' in result and 'audio' in result['data']:
+        audio_hex = result['data']['audio']
+        audio_bytes = bytes.fromhex(audio_hex)
+        return audio_bytes
+    
+    raise Exception(f'MiniMax返回格式异常: {result}')
\ No newline at end of file
diff --git a/backend/app/utils/__init__.py b/backend/app/utils/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/design.md b/design.md
new file mode 100644
index 0000000..69a95b6
--- /dev/null
+++ b/design.md
@@ -0,0 +1,257 @@
+# 《军事科技》AI配音员 - 系统设计文档
+
+> 创建时间：2026-04-11
+> 最后更新：2026-04-12
+> 状态：开发中
+
+---
+
+## 1. 系统架构
+
+### 1.1 整体架构图
+
+```
+┌─────────────────────────────────────────────────────────┐
+│                    前端 (HTML/JS)                        │
+│              http://101.42.29.217:5000                  │
+└─────────────────────┬───────────────────────────────────┘
+                      │
+                      ▼ HTTP POST /api/tts/synthesize
+┌─────────────────────────────────────────────────────────┐
+│                  Flask 后端 (5000端口)                   │
+│  ┌─────────────────────────────────────────────────┐   │
+│  │              /api/tts/synthesize                │   │
+│  │  (根据model参数路由到对应的TTS服务)                │   │
+│  └─────────────────────────────────────────────────┘   │
+│                         │                               │
+│            ┌───────────┴───────────┐                   │
+│            ▼                       ▼                   │
+│  ┌──────────────────┐   ┌──────────────────┐        │
+│  │   MiniMax API     │   │  CosyVoice API   │        │
+│  │ (speech-2.8-hd)   │   │(cosyvoice-v3-flash)│       │
+│  └──────────────────┘   └──────────────────┘        │
+│            │                       │                   │
+│            ▼                       ▼                   │
+│  ┌──────────────────┐   ┌──────────────────┐        │
+│  │  /audio_uploads  │   │  /audio_uploads  │        │
+│  │   (mp3文件)      │   │   (mp3文件)      │        │
+│  └──────────────────┘   └──────────────────┘        │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 1.2 技术栈
+
+| 层级 | 技术 | 版本/说明 |
+|------|------|-----------|
+| 服务器 | 腾讯云Ubuntu | 101.42.29.217 |
+| 后端框架 | Python Flask | Python 3.x |
+| 跨域支持 | flask-cors | CORS enabled |
+| TTS服务1 | MiniMax API | speech-2.8-hd模型 |
+| TTS服务2 | CosyVoice (阿里云) | cosyvoice-v3-flash模型 |
+| 前端 | HTML + JavaScript | 原生开发 |
+| 音频格式 | MP3 | 32kHz, 128kbps |
+
+---
+
+## 2. API设计
+
+### 2.1 接口列表
+
+| 接口 | 方法 | 说明 |
+|------|------|------|
+| `/` | GET | 服务状态信息 |
+| `/api/health` | GET | 健康检查 |
+| `/api/tts/synthesize` | POST | 语音合成（统一入口） |
+| `/api/tts/audio/` | GET | 获取音频文件 |
+
+### 2.2 语音合成接口
+
+**请求**
+```json
+POST /api/tts/synthesize
+Content-Type: application/json
+
+{
+  "text": "😊大家好，欢迎收看《军事科技》",
+  "model": "minimax"  // 或 "cosyvoice"
+}
+```
+
+**响应**
+```json
+{
+  "success": true,
+  "audio_url": "/api/tts/audio/minimax_a1b2c3d4.mp3"
+}
+```
+
+---
+
+## 3. 音色配置
+
+### 3.1 MiniMax音色
+
+| 属性 | 值 |
+|------|-----|
+| Voice ID | `lanhao_military_tech` |
+| File ID | `386365413015965` |
+| 模型 | `speech-2.8-hd` |
+| 采样率 | 32000 Hz |
+| 比特率 | 128000 bps |
+| 格式 | mp3 |
+
+### 3.2 CosyVoice音色
+
+| 属性 | 值 |
+|------|-----|
+| Voice ID | `cosyvoice-v3.5-flash-bailian-e859a6e87823419f9c6b3eefb1a97dc3` |
+| 模型 | `cosyvoice-v3.5-flash` |
+| 类型 | 克隆音色 |
+
+---
+
+## 4. 语气控制设计
+
+### 4.1 Emoji语气映射
+
+这是本项目的核心特色功能。
+
+| Emoji | 含义 | MiniMax标签 | CosyVoice参数 |
+|-------|------|-------------|--------------|
+| 😊 | 高兴/愉悦 | `(laughs)` | style: happy |
+| 😕 | 疑问/困惑 | `(sighs)` | style: sad |
+| ❗ | 强调/加重 | 无 | emphasis: high |
+| 🔥 | 热情/激动 | `(laughs)` | style: excited |
+| 😢 | 悲伤/低沉 | `(sighs)` | style: sad |
+| 🤔 | 思考/停顿 | 无 | pause: 500ms |
+| 😂 | 大笑 | `(laughs)` | style: happy |
+| 😤 | 不满/生气 | 无 | style: angry |
+
+### 4.2 实现方式
+
+前端预处理：Emoji → TTS服务支持的语气标签
+
+```javascript
+function preprocessText(text) {
+  const emojiMap = {
+    '😊': '(laughs)',
+    '😕': '(sighs)',
+    '❗': '',  // 强调通过重音实现
+    '🔥': '(laughs)',
+    '😢': '(sighs)',
+    '😂': '(laughs)'
+  };
+  
+  for (const [emoji, tag] of Object.entries(emojiMap)) {
+    text = text.replace(new RegExp(emoji, 'g'), tag);
+  }
+  return text;
+}
+```
+
+---
+
+## 5. 文件结构
+
+```
+/workspace/military_tech_voice/
+├── design.md                 # 本文档
+├── PROJECT_STATUS.md         # 项目状态文档
+├── backend/
+│   ├── .env                  # 环境变量
+│   ├── app/
+│   │   ├── __init__.py
+│   │   ├── main.py           # Flask主入口
+│   │   ├── routes/
+│   │   │   ├── __init__.py
+│   │   │   ├── health.py      # 健康检查
+│   │   │   ├── tts.py         # 统一TTS路由
+│   │   │   ├── tts_minimax.py # MiniMax路由(参考)
+│   │   │   └── tts_cosyvoice.py # CosyVoice路由(参考)
+│   │   └── utils/
+│   │       └── __init__.py
+│   └── venv/                 # Python虚拟环境
+├── frontend/                 # 前端目录(待开发)
+│   └── index.html
+├── models/                   # 模型文件
+├── audio_uploads/           # 音频输出目录
+├── lanhao03.wav              # 原始音频样本
+└── get-docker.sh            # Docker安装脚本
+```
+
+---
+
+## 6. 错误处理
+
+### 6.1 错误代码
+
+| 错误代码 | 含义 |
+|----------|------|
+| 400 | 请求参数错误 |
+| 401 | API Key无效 |
+| 403 | 无权限访问 |
+| 404 | 文件不存在 |
+| 500 | 服务器内部错误 |
+| 502 | TTS服务返回错误 |
+| 503 | TTS服务不可用 |
+
+### 6.2 日志记录
+
+- 使用Python logging模块
+- 日志级别：INFO, WARNING, ERROR
+- 记录内容：API请求、响应、错误信息
+
+---
+
+## 7. 部署配置
+
+### 7.1 服务器配置
+
+| 配置项 | 值 |
+|--------|-----|
+| 服务器IP | 101.42.29.217 |
+| 端口 | 5000 |
+| 操作系统 | Ubuntu |
+| Python版本 | 3.x |
+
+### 7.2 启动命令
+
+```bash
+cd /workspace/military_tech_voice/backend
+source venv/bin/activate
+python app/main.py
+```
+
+### 7.3 访问地址
+
+- 本地：http://localhost:5000
+- 远程：http://101.42.29.217:5000
+
+---
+
+## 8. 安全考虑
+
+### 8.1 密钥保护
+
+- API密钥存储在 `.env` 文件
+- `.env` 文件已添加到 `.gitignore`
+- 生产环境应使用环境变量而非硬编码
+
+### 8.2 文件上传限制
+
+- 最大文件大小：50MB
+- 仅允许MP3格式
+- 文件名使用UUID随机生成
+
+---
+
+## 9. 参考文档
+
+- MiniMax API文档：https://platform.minimaxi.com
+- CosyVoice文档：https://dashscope.aliyuncs.com
+- Flask文档：https://flask.palletsprojects.com
+- 腾讯云控制台：https://console.cloud.tencent.com
+
+---
+
+*本文档记录系统架构和设计决策，应在开发过程中保持更新。*
\ No newline at end of file
diff --git a/frontend/app.js b/frontend/app.js
new file mode 100644
index 0000000..724e03a
--- /dev/null
+++ b/frontend/app.js
@@ -0,0 +1,383 @@
+/**
+ * 军事科技 AI配音系统 - 前端脚本
+ */
+
+const CONFIG = {
+    API_BASE_URL: '',  // 空字符串表示使用相对路径，通过Nginx代理
+    MAX_CHARS: 2000,
+    EMOTIONS: {
+        'happy': { name: '开心', color: '#fbbf24' },
+        'sad': { name: '悲伤', color: '#60a5fa' },
+        'excited': { name: '激动', color: '#f97316' },
+        'surprised': { name: '惊讶', color: '#a855f7' },
+        'fearful': { name: '害怕', color: '#ec4899' },
+        'disgusted': { name: '厌恶', color: '#14b8a6' }
+    }
+};
+
+const state = {
+    currentEngine: 'minimax',
+    selectedEmotion: null,
+    generatedAudio: null,
+    isPlaying: false,
+    history: []
+};
+
+const elements = {
+    editor: document.getElementById('editor'),
+    editorPlaceholder: document.getElementById('editorPlaceholder'),
+    charCount: document.getElementById('charCount'),
+    switchBtns: document.querySelectorAll('.switch-btn'),
+    emotionBtns: document.querySelectorAll('.emotion-btn'),
+    speedSlider: document.getElementById('speedSlider'),
+    speedValue: document.getElementById('speedValue'),
+    pitchSlider: document.getElementById('pitchSlider'),
+    pitchValue: document.getElementById('pitchValue'),
+    volumeSlider: document.getElementById('volumeSlider'),
+    volumeValue: document.getElementById('volumeValue'),
+    generateBtn: document.getElementById('generateBtn'),
+    clearBtn: document.getElementById('clearBtn'),
+    audioDisplay: document.getElementById('audioDisplay'),
+    audioControls: document.getElementById('audioControls'),
+    playBtn: document.getElementById('playBtn'),
+    progressFill: document.getElementById('progressFill'),
+    timeDisplay: document.getElementById('timeDisplay'),
+    downloadBtn: document.getElementById('downloadBtn'),
+    audioInfo: document.getElementById('audioInfo'),
+    infoEngine: document.getElementById('infoEngine'),
+    historyList: document.getElementById('historyList'),
+    loadingOverlay: document.getElementById('loadingOverlay'),
+    loadingText: document.getElementById('loadingText'),
+    toast: document.getElementById('toast')
+};
+
+let audioElement = new Audio();
+
+function showToast(message, type = 'info') {
+    const toast = elements.toast;
+    toast.querySelector('.toast-message').textContent = message;
+    toast.className = `toast show ${type}`;
+    setTimeout(() => toast.classList.remove('show'), 3000);
+}
+
+function showLoading(text = '正在处理...') {
+    elements.loadingText.textContent = text;
+    elements.loadingOverlay.style.display = 'flex';
+}
+
+function hideLoading() {
+    elements.loadingOverlay.style.display = 'none';
+}
+
+function formatTime(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+}
+
+function updateCharCount() {
+    const text = elements.editor.innerText || '';
+    const count = text.replace(/\s/g, '').length;
+    elements.charCount.textContent = count;
+    if (text.trim() === '') {
+        elements.editor.classList.add('is-empty');
+    } else {
+        elements.editor.classList.remove('is-empty');
+    }
+}
+
+function getSelectedText() {
+    return window.getSelection().toString().trim();
+}
+
+function applyEmotionTag(emotion, emotionName) {
+    const selection = window.getSelection();
+    if (!selection.rangeCount) {
+        showToast('请先选中要添加情绪的文字', 'error');
+        return;
+    }
+    const selectedText = selection.toString().trim();
+    if (!selectedText) {
+        showToast('请先选中要添加情绪的文字', 'error');
+        return;
+    }
+    const tagHtml = `<span class="emotion-tag" data-emotion="${emotion}" contenteditable="false">[${emotionName}]</span>`;
+    const range = selection.getRangeAt(0);
+    const selectedContent = range.extractContents();
+    const wrapper = document.createElement('span');
+    wrapper.innerHTML = tagHtml;
+    const textNode = document.createTextNode(selectedText);
+    wrapper.appendChild(textNode);
+    range.insertNode(wrapper);
+    selection.removeAllRanges();
+    const space = document.createTextNode(' ');
+    wrapper.after(space);
+    elements.editor.focus();
+    showToast(`已添加「${emotionName}」情绪`, 'success');
+    clearEmotionSelection();
+}
+
+function clearEmotionSelection() {
+    state.selectedEmotion = null;
+    elements.emotionBtns.forEach(btn => btn.classList.remove('active'));
+}
+
+function getPlainText() {
+    // Remove emotion tags completely - don't include any emotion labels in the text
+    const clone = elements.editor.cloneNode(true);
+    
+    // Completely remove emotion tags
+    const tags = clone.querySelectorAll('.emotion-tag');
+    tags.forEach(tag => tag.remove());
+    
+    return clone.innerText.trim();
+}
+
+// 情绪标签映射：前端显示 → MiniMax标签 / CosyVoice指令
+const EMOTION_LABELS = {
+    'happy': { miniMax: '[开心]', cosyvoice: '请用开心的语气' },
+    'excited': { miniMax: '[激昂]', cosyvoice: '请用激昂的语气' },
+    'surprised': { miniMax: '[惊讶]', cosyvoice: '请用惊讶的语气' },
+    'sad': { miniMax: '[悲伤]', cosyvoice: '请用悲伤的语气' },
+    'fearful': { miniMax: '[恐惧]', cosyvoice: '请用恐惧的语气' },
+    'disgusted': { miniMax: '[厌恶]', cosyvoice: '请用厌恶的语气' }
+};
+
+function getTextWithEmotionTags(engine) {
+    const clone = elements.editor.cloneNode(true);
+    
+    if (engine === 'minimax') {
+        const tags = clone.querySelectorAll('.emotion-tag');
+        tags.forEach(tag => {
+            const emotion = tag.getAttribute('data-emotion');
+            const label = EMOTION_LABELS[emotion]?.miniMax || `[${emotion}]`;
+            const textNode = document.createTextNode(label);
+            tag.parentNode.replaceChild(textNode, tag);
+        });
+        return clone.innerText.trim();
+    } else {
+        const tags = clone.querySelectorAll('.emotion-tag');
+        tags.forEach(tag => tag.remove());
+        return clone.innerText.trim();
+    }
+}
+
+function getFirstEmotionInstruction() {
+    const firstEmotionTag = elements.editor.querySelector('.emotion-tag');
+    if (firstEmotionTag) {
+        const emotion = firstEmotionTag.getAttribute('data-emotion');
+        return EMOTION_LABELS[emotion]?.cosyvoice || null;
+    }
+    return null;
+}
+
+function clearEditor() {
+    elements.editor.innerHTML = '';
+    updateCharCount();
+    showToast('已清空文稿');
+}
+
+function updateSliderDisplay() {
+    elements.speedValue.textContent = `${elements.speedSlider.value}x`;
+    elements.pitchValue.textContent = elements.pitchSlider.value;
+    elements.volumeValue.textContent = elements.volumeSlider.value;
+}
+
+function switchEngine(engine) {
+    state.currentEngine = engine;
+    elements.switchBtns.forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.engine === engine);
+    });
+    const engineName = engine === 'minimax' ? 'MiniMax' : 'CosyVoice';
+    document.getElementById('engineBadge').textContent = `蓝皓 · ${engineName}`;
+    showToast(`已切换到${engineName}引擎`);
+}
+
+async function generateAudio() {
+    const text = getPlainText();
+    if (!text) {
+        showToast('请输入配音文稿', 'error');
+        return;
+    }
+    showLoading('正在生成音频...');
+    elements.generateBtn.disabled = true;
+    try {
+       // 根据引擎获取带情绪标签的文本
+       const textForApi = getTextWithEmotionTags(state.currentEngine);
+       // 获取CosyVoice的情绪指令
+       const emotionInstruction = getFirstEmotionInstruction();
+       
+       const requestData = {
+           text: textForApi,
+           engine: state.currentEngine,
+           speed: parseFloat(elements.speedSlider.value),
+           pitch: parseInt(elements.pitchSlider.value),
+           volume: parseFloat(elements.volumeSlider.value)
+       };
+       
+       // CosyVoice使用instruction参数传递情绪
+       if (state.currentEngine === 'cosyvoice' && emotionInstruction) {
+           requestData.instruction = emotionInstruction;
+       }
+        const response = await fetch('/api/synthesize', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(requestData)
+        });
+        if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || '生成失败');
+        }
+        const data = await response.json();
+        if (data.audio) {
+            const audioData = atob(data.audio);
+            const audioArray = new Uint8Array(audioData.length);
+            for (let i = 0; i < audioData.length; i++) {
+                audioArray[i] = audioData.charCodeAt(i);
+            }
+            const audioBlob = new Blob([audioArray], { type: 'audio/mp3' });
+            const audioUrl = URL.createObjectURL(audioBlob);
+            state.generatedAudio = { url: audioUrl, blob: audioBlob };
+            elements.audioDisplay.classList.add('has-audio');
+            elements.audioDisplay.innerHTML = `
+                <div class="audio-ready">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>
+                    </svg>
+                    <p>音频已生成，点击播放</p>
+                </div>`;
+            elements.audioControls.style.display = 'flex';
+            elements.audioInfo.style.display = 'block';
+            elements.infoEngine.textContent = state.currentEngine === 'minimax' ? 'MiniMax' : 'CosyVoice';
+            audioElement.src = audioUrl;
+            addToHistory(text);
+            showToast('音频生成成功！', 'success');
+        }
+    } catch (error) {
+        console.error('TTS Error:', error);
+        showToast(error.message || '生成失败，请重试', 'error');
+    } finally {
+        hideLoading();
+        elements.generateBtn.disabled = false;
+    }
+}
+
+function addToHistory(text) {
+    const item = {
+        id: Date.now(),
+        text: text.substring(0, 50) + (text.length > 50 ? '...' : ''),
+        engine: state.currentEngine,
+        timestamp: new Date().toLocaleString('zh-CN')
+    };
+    state.history.unshift(item);
+    if (state.history.length > 10) state.history.pop();
+    renderHistory();
+    localStorage.setItem('tts_history', JSON.stringify(state.history));
+}
+
+function renderHistory() {
+    if (state.history.length === 0) {
+        elements.historyList.innerHTML = '<div class="history-empty"><p>暂无生成记录</p></div>';
+        return;
+    }
+    elements.historyList.innerHTML = state.history.map(item => `
+        <div class="history-item" data-id="${item.id}">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polygon points="5,3 19,12 5,21"/>
+            </svg>
+            <span>${item.text}</span>
+        </div>`).join('');
+    document.querySelectorAll('.history-item').forEach(el => {
+        el.addEventListener('click', () => {
+            const id = parseInt(el.dataset.id);
+            const item = state.history.find(h => h.id === id);
+            if (item) {
+                elements.editor.innerText = item.text;
+                updateCharCount();
+            }
+        });
+    });
+}
+
+function togglePlay() {
+    if (!state.generatedAudio) return;
+    if (state.isPlaying) {
+        audioElement.pause();
+        elements.playBtn.querySelector('.icon-play').style.display = 'block';
+        elements.playBtn.querySelector('.icon-pause').style.display = 'none';
+    } else {
+        audioElement.play();
+        elements.playBtn.querySelector('.icon-play').style.display = 'none';
+        elements.playBtn.querySelector('.icon-pause').style.display = 'block';
+    }
+    state.isPlaying = !state.isPlaying;
+}
+
+function downloadAudio() {
+    if (!state.generatedAudio) return;
+    
+    // 文件命名规则：节目名_引擎名_日期_随机数.mp3
+    const engineName = state.currentEngine === 'minimax' ? 'MiniMax' : 'CosyVoice';
+    const date = new Date().toISOString().slice(0, 10).replace(/-/g, '');
+    const randomNum = Math.floor(Math.random() * 10000).toString().padStart(4, '0');
+    const fileName = `军事科技_${engineName}_${date}_${randomNum}.mp3`;
+    
+    const link = document.createElement('a');
+    link.href = state.generatedAudio.url;
+    link.download = fileName;
+    link.click();
+    
+    showToast('开始下载', 'success');
+}
+
+elements.editor.addEventListener('input', updateCharCount);
+elements.editor.addEventListener('paste', () => { setTimeout(updateCharCount, 0); });
+elements.switchBtns.forEach(btn => {
+    btn.addEventListener('click', () => switchEngine(btn.dataset.engine));
+});
+elements.emotionBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+        const emotion = btn.dataset.emotion;
+        const emotionName = CONFIG.EMOTIONS[emotion]?.name || emotion;
+        if (state.selectedEmotion === emotion) {
+            clearEmotionSelection();
+        } else {
+            elements.emotionBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            state.selectedEmotion = emotion;
+            applyEmotionTag(emotion, emotionName);
+        }
+    });
+});
+elements.speedSlider.addEventListener('input', updateSliderDisplay);
+elements.pitchSlider.addEventListener('input', updateSliderDisplay);
+elements.volumeSlider.addEventListener('input', updateSliderDisplay);
+elements.generateBtn.addEventListener('click', generateAudio);
+elements.clearBtn.addEventListener('click', clearEditor);
+elements.playBtn.addEventListener('click', togglePlay);
+elements.downloadBtn.addEventListener('click', downloadAudio);
+audioElement.addEventListener('timeupdate', () => {
+    const progress = (audioElement.currentTime / audioElement.duration) * 100;
+    elements.progressFill.style.width = `${progress}%`;
+    elements.timeDisplay.textContent = `${formatTime(audioElement.currentTime)} / ${formatTime(audioElement.duration || 0)}`;
+});
+audioElement.addEventListener('ended', () => {
+    state.isPlaying = false;
+    elements.playBtn.querySelector('.icon-play').style.display = 'block';
+    elements.playBtn.querySelector('.icon-pause').style.display = 'none';
+    elements.progressFill.style.width = '0%';
+});
+elements.audioDisplay.addEventListener('click', () => {
+    if (state.generatedAudio && !state.isPlaying) { togglePlay(); }
+});
+
+function init() {
+    updateCharCount();
+    updateSliderDisplay();
+    const savedHistory = localStorage.getItem('tts_history');
+    if (savedHistory) {
+        try { state.history = JSON.parse(savedHistory); renderHistory(); } catch (e) {}
+    }
+    console.log('军事科技 AI配音系统已初始化');
+}
+init();
\ No newline at end of file
diff --git a/frontend/index.html b/frontend/index.html
new file mode 100644
index 0000000..904b607
--- /dev/null
+++ b/frontend/index.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>军事科技 - AI智能配音</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="app-container">
+        <!-- Header -->
+        <header class="header">
+            <div class="logo">
+                <svg class="logo-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <circle cx="12" cy="12" r="10"/>
+                    <polygon points="10,8 16,12 10,16"/>
+                </svg>
+                <span class="logo-text">军事科技 <span class="logo-sub">AI配音</span></span>
+            </div>
+            <div class="header-info">
+                <span class="engine-badge" id="engineBadge">蓝皓</span>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main-content">
+            <!-- Center Panel -->
+            <section class="panel panel-center">
+                <div class="panel-header">
+                    <h2>配音文稿</h2>
+                    <div class="char-count">
+                        <span id="charCount">0</span> / 2000
+                    </div>
+                </div>
+
+                <!-- Toolbar -->
+                <div class="toolbar">
+                    <div class="toolbar-group">
+                        <span class="toolbar-label">引擎：</span>
+                        <button class="switch-btn active" data-engine="minimax">
+                            <span class="engine-icon minimax-icon">M</span>
+                            MiniMax
+                        </button>
+                        <button class="switch-btn" data-engine="cosyvoice">
+                            <span class="engine-icon cosyvoice-icon">C</span>
+                            CosyVoice
+                        </button>
+                    </div>
+                    <div class="toolbar-group emotion-group">
+                        <span class="toolbar-label">情绪：</span>
+                        <button class="emotion-btn" data-emotion="happy" title="开心愉快">😊</button>
+                        <button class="emotion-btn" data-emotion="sad" title="悲伤">😢</button>
+                        <button class="emotion-btn" data-emotion="excited" title="激动">🔥</button>
+                        <button class="emotion-btn" data-emotion="surprised" title="惊讶">❗</button>
+                        <button class="emotion-btn" data-emotion="fearful" title="害怕">😨</button>
+                        <button class="emotion-btn" data-emotion="disgusted" title="厌恶">😒</button>
+                        <span class="toolbar-hint">← 选中文字后点击添加情绪</span>
+                    </div>
+                </div>
+
+                <!-- Editor -->
+                <div class="editor-wrapper">
+                    <div class="editor" id="editor" contenteditable="true" spellcheck="false"></div>
+                    <div class="editor-placeholder" id="editorPlaceholder">
+                        请输入配音文稿...<br><br>
+                        <span class="hint">💡 提示：选中文字后点击上方情绪标签，可为选中文本添加情绪</span>
+                    </div>
+                </div>
+
+                <!-- Parameter Controls -->
+                <div class="param-controls">
+                    <div class="param-group">
+                        <label>语速</label>
+                        <input type="range" id="speedSlider" min="0.5" max="2.0" step="0.1" value="1.0">
+                        <span class="param-value" id="speedValue">1.0x</span>
+                    </div>
+                    <div class="param-group">
+                        <label>声调</label>
+                        <input type="range" id="pitchSlider" min="-12" max="12" step="1" value="0">
+                        <span class="param-value" id="pitchValue">0</span>
+                    </div>
+                    <div class="param-group">
+                        <label>音量</label>
+                        <input type="range" id="volumeSlider" min="0" max="10" step="0.1" value="1.0">
+                        <span class="param-value" id="volumeValue">1.0</span>
+                    </div>
+                </div>
+
+                <!-- Action Buttons -->
+                <div class="action-buttons">
+                    <button class="btn btn-primary" id="generateBtn">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <polygon points="5,3 19,12 5,21"/>
+                        </svg>
+                        生成配音
+                    </button>
+                    <button class="btn btn-secondary" id="clearBtn">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/>
+                        </svg>
+                        清空
+                    </button>
+                </div>
+            </section>
+
+            <!-- Right Panel -->
+            <aside class="panel panel-right">
+                <div class="panel-header">
+                    <h2>音频预览</h2>
+                </div>
+
+                <div class="audio-display" id="audioDisplay">
+                    <div class="audio-placeholder">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+                            <path d="M9 18V5l12-2v13"/>
+                            <circle cx="6" cy="18" r="3"/>
+                            <circle cx="18" cy="16" r="3"/>
+                        </svg>
+                        <p>生成音频后在此预览</p>
+                    </div>
+                </div>
+
+                <div class="audio-controls" id="audioControls" style="display: none;">
+                    <button class="control-btn play-btn" id="playBtn">
+                        <svg class="icon-play" viewBox="0 0 24 24" fill="currentColor">
+                            <polygon points="5,3 19,12 5,21"/>
+                        </svg>
+                        <svg class="icon-pause" viewBox="0 0 24 24" fill="currentColor" style="display: none;">
+                            <rect x="6" y="4" width="4" height="16"/>
+                            <rect x="14" y="4" width="4" height="16"/>
+                        </svg>
+                    </button>
+                    <div class="progress-bar">
+                        <div class="progress-fill" id="progressFill"></div>
+                    </div>
+                    <span class="time-display" id="timeDisplay">00:00 / 00:00</span>
+                    <button class="control-btn download-btn" id="downloadBtn" title="下载">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/>
+                        </svg>
+                    </button>
+                </div>
+
+                <div class="audio-info" id="audioInfo" style="display: none;">
+                    <div class="info-row">
+                        <span class="info-label">引擎</span>
+                        <span class="info-value" id="infoEngine">MiniMax</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">采样率</span>
+                        <span class="info-value">32kHz</span>
+                    </div>
+                    <div class="info-row">
+                        <span class="info-label">格式</span>
+                        <span class="info-value">MP3</span>
+                    </div>
+                </div>
+
+                <div class="history-section">
+                    <h3>历史记录</h3>
+                    <div class="history-list" id="historyList">
+                        <div class="history-empty">
+                            <p>暂无生成记录</p>
+                        </div>
+                    </div>
+                </div>
+            </aside>
+        </main>
+
+        <div class="loading-overlay" id="loadingOverlay" style="display: none;">
+            <div class="loading-spinner">
+                <svg viewBox="0 0 50 50">
+                    <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="4"/>
+                </svg>
+            </div>
+            <p id="loadingText">正在生成音频...</p>
+        </div>
+
+        <div class="toast" id="toast">
+            <span class="toast-message"></span>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/frontend/styles.css b/frontend/styles.css
new file mode 100644
index 0000000..fb656f7
--- /dev/null
+++ b/frontend/styles.css
@@ -0,0 +1,348 @@
+/* 军事科技 AI配音系统 - 样式表 */
+
+:root {
+    --bg-primary: #0a0a0f;
+    --bg-secondary: #12121a;
+    --bg-tertiary: #1a1a25;
+    --bg-card: #1e1e2a;
+    --bg-card-hover: #252535;
+    --accent-primary: #6366f1;
+    --accent-secondary: #818cf8;
+    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+    --text-primary: #ffffff;
+    --text-secondary: #a1a1aa;
+    --text-muted: #71717a;
+    --border-color: #27272a;
+    --border-hover: #3f3f46;
+    --success: #22c55e;
+    --warning: #f59e0b;
+    --error: #ef4444;
+    --emotion-happy: #fbbf24;
+    --emotion-sad: #60a5fa;
+    --emotion-excited: #f97316;
+    --emotion-surprised: #a855f7;
+    --emotion-fearful: #ec4899;
+    --emotion-disgusted: #14b8a6;
+    --minimax-color: #00d4aa;
+    --cosyvoice-color: #ff6b6b;
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 16px;
+    --radius-full: 9999px;
+    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
+    --transition-fast: 0.15s ease;
+}
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
+}
+
+.app-container {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 16px;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 24px;
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    margin-bottom: 16px;
+}
+
+.logo { display: flex; align-items: center; gap: 16px; }
+.logo-icon { width: 36px; height: 36px; color: var(--accent-primary); }
+.logo-text {
+    font-size: 1.25rem;
+    font-weight: 700;
+    background: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+.logo-sub { font-size: 0.875rem; opacity: 0.8; margin-left: 8px; }
+
+.engine-badge {
+    padding: 8px 16px;
+    background: var(--accent-gradient);
+    color: white;
+    font-size: 0.875rem;
+    font-weight: 600;
+    border-radius: var(--radius-full);
+}
+
+.main-content {
+    display: grid;
+    grid-template-columns: 1fr 350px;
+    gap: 16px;
+    flex: 1;
+}
+
+.panel {
+    background: var(--bg-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-lg);
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+}
+
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 16px;
+}
+.panel-header h2 { font-size: 1rem; font-weight: 600; }
+.char-count { font-size: 0.75rem; color: var(--text-muted); }
+
+.toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    padding: 12px;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    margin-bottom: 16px;
+}
+
+.toolbar-group { display: flex; align-items: center; gap: 8px; }
+.toolbar-label { font-size: 0.85rem; color: var(--text-secondary); }
+.toolbar-hint { font-size: 0.7rem; color: var(--text-muted); margin-left: 8px; }
+
+.switch-btn {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 12px;
+    background: transparent;
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    color: var(--text-secondary);
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: var(--transition-fast);
+}
+.switch-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
+.switch-btn.active { background: var(--bg-card); border-color: var(--accent-primary); color: var(--text-primary); }
+
+.engine-icon {
+    width: 18px; height: 18px;
+    border-radius: var(--radius-sm);
+    display: flex; align-items: center; justify-content: center;
+    font-size: 0.65rem; font-weight: 700;
+}
+.minimax-icon { background: var(--minimax-color); color: #0a0a0f; }
+.cosyvoice-icon { background: var(--cosyvoice-color); color: white; }
+
+.emotion-btn {
+    width: 32px; height: 32px;
+    font-size: 1.1rem;
+    background: transparent;
+    border: 2px solid transparent;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: var(--transition-fast);
+    display: flex; align-items: center; justify-content: center;
+}
+.emotion-btn:hover { transform: scale(1.15); border-color: var(--text-muted); }
+.emotion-btn.active { border-color: var(--accent-primary); background: rgba(99, 102, 241, 0.2); }
+
+.editor-wrapper {
+    flex: 1;
+    position: relative;
+    margin-bottom: 16px;
+    min-height: 300px;
+}
+
+.editor {
+    width: 100%; height: 100%; min-height: 300px;
+    padding: 16px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    color: var(--text-primary);
+    font-size: 1rem;
+    line-height: 1.8;
+    outline: none;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+.editor:focus { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
+
+.editor-placeholder {
+    position: absolute; top: 16px; left: 16px;
+    color: var(--text-muted); font-size: 0.95rem;
+    line-height: 1.6; pointer-events: none; display: none;
+}
+.editor:empty + .editor-placeholder, .editor.is-empty .editor-placeholder { display: block; }
+.editor-placeholder .hint { font-size: 0.8rem; opacity: 0.7; }
+
+.emotion-tag {
+    display: inline; padding: 2px 8px;
+    border-radius: var(--radius-full);
+    font-size: 0.75rem; font-weight: 600;
+    vertical-align: middle; margin: 0 2px;
+}
+.emotion-tag[data-emotion="happy"] { background: rgba(251,191,36,0.2); color: var(--emotion-happy); }
+.emotion-tag[data-emotion="sad"] { background: rgba(96,165,250,0.2); color: var(--emotion-sad); }
+.emotion-tag[data-emotion="excited"] { background: rgba(249,115,22,0.2); color: var(--emotion-excited); }
+.emotion-tag[data-emotion="surprised"] { background: rgba(168,85,247,0.2); color: var(--emotion-surprised); }
+.emotion-tag[data-emotion="fearful"] { background: rgba(236,72,153,0.2); color: var(--emotion-fearful); }
+.emotion-tag[data-emotion="disgusted"] { background: rgba(20,184,166,0.2); color: var(--emotion-disgusted); }
+
+.param-controls {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 16px;
+    padding: 16px;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    margin-bottom: 16px;
+}
+
+.param-group { display: flex; flex-direction: column; gap: 4px; }
+.param-group label { font-size: 0.8rem; color: var(--text-secondary); }
+.param-group input[type="range"] {
+    width: 100%; height: 6px;
+    background: var(--bg-card);
+    border-radius: var(--radius-full);
+    outline: none; -webkit-appearance: none;
+}
+.param-group input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none; width: 16px; height: 16px;
+    background: var(--accent-primary); border-radius: 50%; cursor: pointer;
+}
+.param-value { font-size: 0.85rem; font-weight: 600; text-align: center; }
+
+.action-buttons { display: flex; gap: 16px; margin-top: auto; }
+.btn {
+    flex: 1;
+    display: flex; align-items: center; justify-content: center;
+    gap: 8px;
+    padding: 12px 16px;
+    border: none; border-radius: var(--radius-md);
+    font-size: 0.95rem; font-weight: 600;
+    cursor: pointer; transition: var(--transition-fast);
+}
+.btn svg { width: 18px; height: 18px; }
+.btn-primary { background: var(--accent-gradient); color: white; }
+.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(99,102,241,0.4); }
+.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
+.btn-secondary { background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-color); }
+.btn-secondary:hover { background: var(--bg-card); color: var(--text-primary); }
+
+.audio-display {
+    background: var(--bg-tertiary);
+    border: 2px dashed var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 32px;
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    min-height: 150px; margin-bottom: 16px;
+}
+.audio-display.has-audio { border-style: solid; border-color: var(--accent-primary); }
+.audio-placeholder svg { width: 48px; height: 48px; color: var(--text-muted); margin-bottom: 12px; }
+.audio-placeholder p { color: var(--text-muted); font-size: 0.85rem; }
+
+.audio-controls {
+    display: flex; align-items: center; gap: 12px;
+    padding: 12px;
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    margin-bottom: 16px;
+}
+
+.control-btn {
+    width: 40px; height: 40px;
+    background: var(--bg-card); border: none; border-radius: 50%;
+    color: var(--text-primary); cursor: pointer;
+    display: flex; align-items: center; justify-content: center;
+    transition: var(--transition-fast);
+}
+.control-btn:hover { background: var(--accent-primary); }
+.control-btn svg { width: 16px; height: 16px; }
+.play-btn { width: 48px; height: 48px; background: var(--accent-gradient); }
+.play-btn:hover { transform: scale(1.1); }
+.progress-bar { flex: 1; height: 4px; background: var(--bg-card); border-radius: var(--radius-full); overflow: hidden; }
+.progress-fill { height: 100%; background: var(--accent-gradient); width: 0%; transition: width 0.1s linear; }
+.time-display { font-size: 0.75rem; color: var(--text-muted); min-width: 80px; text-align: center; }
+.download-btn:hover { background: var(--success); }
+
+.audio-info {
+    background: var(--bg-tertiary);
+    border-radius: var(--radius-md);
+    padding: 12px;
+    margin-bottom: 16px;
+}
+.info-row {
+    display: flex; justify-content: space-between;
+    padding: 4px 0;
+    font-size: 0.85rem;
+}
+.info-row:not(:last-child) { border-bottom: 1px solid var(--border-color); }
+.info-label { color: var(--text-muted); }
+.info-value { color: var(--text-primary); font-weight: 500; }
+
+.history-section h3 {
+    font-size: 0.9rem; font-weight: 600;
+    margin-bottom: 12px; color: var(--text-secondary);
+}
+.history-list { flex: 1; overflow-y: auto; max-height: 180px; }
+.history-empty { text-align: center; padding: 16px; color: var(--text-muted); font-size: 0.85rem; }
+.history-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px;
+    background: var(--bg-card);
+    border-radius: var(--radius-sm);
+    margin-bottom: 8px;
+    cursor: pointer;
+    transition: var(--transition-fast);
+}
+.history-item:hover { background: var(--bg-card-hover); }
+.history-item svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
+.history-item span { flex: 1; font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.loading-overlay {
+    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(10,10,15,0.9);
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    z-index: 1000;
+}
+.loading-spinner { width: 60px; height: 60px; margin-bottom: 16px; }
+.loading-spinner svg { width: 100%; height: 100%; animation: spin 1s linear infinite; }
+.loading-spinner circle { stroke: var(--accent-primary); stroke-dasharray: 90,150; stroke-linecap: round; }
+@keyframes spin { 100% { transform: rotate(360deg); } }
+#loadingText { color: var(--text-secondary); font-size: 1rem; }
+
+.toast {
+    position: fixed; bottom: 32px; left: 50%;
+    transform: translateX(-50%) translateY(100px);
+    background: var(--bg-card); border: 1px solid var(--border-color);
+    border-radius: var(--radius-md); padding: 12px 24px;
+    box-shadow: var(--shadow-md); opacity: 0;
+    transition: all 0.3s ease; z-index: 1001;
+}
+.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
+.toast.success { border-color: var(--success); }
+.toast.error { border-color: var(--error); }
+
+@media (max-width: 1024px) {
+    .main-content { grid-template-columns: 1fr; }
+    .panel-right { display: none; }
+}
+@media (max-width: 768px) {
+    .toolbar { flex-direction: column; gap: 12px; }
+    .param-controls { grid-template-columns: 1fr; }
+}
\ No newline at end of file