From 8b68f561fc548b104fc9f1ca529f78f02b14477b Mon Sep 17 00:00:00 2001
From: Unizzr <1920158711@qq.com>
Date: Mon, 20 Apr 2026 18:32:52 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(webui):=20=E6=B7=BB=E5=8A=A0=E5=AE=8C?=
 =?UTF-8?q?=E6=95=B4=E7=9A=84=E6=96=87=E6=9C=AC=E8=BD=AC=E8=AF=AD=E9=9F=B3?=
 =?UTF-8?q?Web=E7=95=8C=E9=9D=A2=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

实现包含以下功能：
- 基于Flask的Web服务端
- 实时语音生成和任务队列处理
- 历史记录管理
- 响应式前端界面
- 多模型和语音选择支持
---
 requirements_webui.txt     |   7 +
 run_webui.py               |  18 +
 webui/__init__.py          |   3 +
 webui/app.py               | 308 ++++++++++++
 webui/history.json         |  47 ++
 webui/templates/index.html | 987 +++++++++++++++++++++++++++++++++++++
 6 files changed, 1370 insertions(+)
 create mode 100644 requirements_webui.txt
 create mode 100644 run_webui.py
 create mode 100644 webui/__init__.py
 create mode 100644 webui/app.py
 create mode 100644 webui/history.json
 create mode 100644 webui/templates/index.html

diff --git a/requirements_webui.txt b/requirements_webui.txt
new file mode 100644
index 0000000..b5f1b8f
--- /dev/null
+++ b/requirements_webui.txt
@@ -0,0 +1,7 @@
+flask
+espeakng_loader
+phonemizer
+onnxruntime
+soundfile
+numpy
+huggingface_hub
diff --git a/run_webui.py b/run_webui.py
new file mode 100644
index 0000000..8723f52
--- /dev/null
+++ b/run_webui.py
@@ -0,0 +1,18 @@
+import os
+import sys
+
+script_dir = os.path.dirname(os.path.abspath(__file__))
+sys.path.insert(0, script_dir)
+
+from webui.app import app
+
+if __name__ == '__main__':
+    print("=" * 60)
+    print("[KittenTTS] WebUI 启动中...")
+    print("=" * 60)
+    print()
+    print("请在浏览器中访问: http://localhost:5000")
+    print()
+    print("=" * 60)
+    
+    app.run(host='0.0.0.0', port=5000, debug=False)
diff --git a/webui/__init__.py b/webui/__init__.py
new file mode 100644
index 0000000..8a1c803
--- /dev/null
+++ b/webui/__init__.py
@@ -0,0 +1,3 @@
+from .app import app
+
+__all__ = ['app']
diff --git a/webui/app.py b/webui/app.py
new file mode 100644
index 0000000..708c8bc
--- /dev/null
+++ b/webui/app.py
@@ -0,0 +1,308 @@
+import os
+import uuid
+import json
+import threading
+from datetime import datetime
+from flask import Flask, render_template, request, jsonify, send_file, Response
+from werkzeug.utils import secure_filename
+from kittentts import KittenTTS
+
+app = Flask(__name__)
+
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+AUDIO_DIR = os.path.join(BASE_DIR, 'static', 'audio')
+HISTORY_FILE = os.path.join(BASE_DIR, 'history.json')
+
+os.makedirs(AUDIO_DIR, exist_ok=True)
+
+AVAILABLE_MODELS = [
+    {"id": "KittenML/kitten-tts-mini-0.8", "name": "Mini (80M)", "description": "最高质量版本"},
+    {"id": "KittenML/kitten-tts-micro-0.8", "name": "Micro (40M)", "description": "速度与质量平衡"},
+    {"id": "KittenML/kitten-tts-nano-0.8", "name": "Nano (15M)", "description": "最小最快版本"},
+]
+
+MODELS = {}
+MODELS_LOCK = threading.Lock()
+TASK_QUEUE = []
+TASK_QUEUE_LOCK = threading.Lock()
+HISTORY = []
+HISTORY_LOCK = threading.Lock()
+
+def load_model(model_id):
+    with MODELS_LOCK:
+        if model_id in MODELS:
+            return MODELS[model_id]
+        print(f"Loading model: {model_id}")
+        model = KittenTTS(model_id)
+        MODELS[model_id] = model
+        return model
+
+def load_history():
+    global HISTORY
+    if os.path.exists(HISTORY_FILE):
+        try:
+            with open(HISTORY_FILE, 'r', encoding='utf-8') as f:
+                HISTORY = json.load(f)
+        except:
+            HISTORY = []
+    else:
+        HISTORY = []
+
+def save_history():
+    with open(HISTORY_FILE, 'w', encoding='utf-8') as f:
+        json.dump(HISTORY, f, ensure_ascii=False, indent=2)
+
+def add_to_history(task):
+    global HISTORY
+    with HISTORY_LOCK:
+        HISTORY.insert(0, task)
+        if len(HISTORY) > 100:
+            HISTORY = HISTORY[:100]
+        save_history()
+
+def process_task(task):
+    try:
+        task['status'] = 'processing'
+        model = load_model(task['model_id'])
+        audio = model.generate(
+            text=task['text'],
+            voice=task['voice'],
+            speed=task['speed'],
+            clean_text=task.get('clean_text', True)
+        )
+        
+        audio_filename = f"{task['id']}.wav"
+        audio_path = os.path.join(AUDIO_DIR, audio_filename)
+        import soundfile as sf
+        sf.write(audio_path, audio, 24000)
+        
+        task['status'] = 'completed'
+        task['audio_file'] = audio_filename
+        task['completed_at'] = datetime.now().isoformat()
+        
+        with TASK_QUEUE_LOCK:
+            for i, t in enumerate(TASK_QUEUE):
+                if t['id'] == task['id']:
+                    TASK_QUEUE[i] = task
+                    break
+        
+        add_to_history(task)
+    except Exception as e:
+        task['status'] = 'failed'
+        task['error'] = str(e)
+        with TASK_QUEUE_LOCK:
+            for i, t in enumerate(TASK_QUEUE):
+                if t['id'] == task['id']:
+                    TASK_QUEUE[i] = task
+                    break
+
+def task_worker():
+    while True:
+        task_to_process = None
+        with TASK_QUEUE_LOCK:
+            for task in TASK_QUEUE:
+                if task['status'] == 'pending':
+                    task_to_process = task
+                    break
+        
+        if task_to_process:
+            process_task(task_to_process)
+        else:
+            import time
+            time.sleep(1)
+
+worker_thread = threading.Thread(target=task_worker, daemon=True)
+worker_thread.start()
+
+load_history()
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/models', methods=['GET'])
+def get_models():
+    return jsonify(AVAILABLE_MODELS)
+
+@app.route('/api/voices', methods=['GET'])
+def get_voices():
+    model_id = request.args.get('model', 'KittenML/kitten-tts-mini-0.8')
+    try:
+        model = load_model(model_id)
+        voices = [
+            {'id': 'Bella', 'name': 'Bella', 'description': '女声'},
+            {'id': 'Jasper', 'name': 'Jasper', 'description': '男声'},
+            {'id': 'Luna', 'name': 'Luna', 'description': '女声'},
+            {'id': 'Bruno', 'name': 'Bruno', 'description': '男声'},
+            {'id': 'Rosie', 'name': 'Rosie', 'description': '女声'},
+            {'id': 'Hugo', 'name': 'Hugo', 'description': '男声'},
+            {'id': 'Kiki', 'name': 'Kiki', 'description': '女声'},
+            {'id': 'Leo', 'name': 'Leo', 'description': '男声'},
+        ]
+        return jsonify(voices)
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/generate', methods=['POST'])
+def generate():
+    try:
+        data = request.get_json()
+        text = data.get('text', '')
+        model_id = data.get('model', 'KittenML/kitten-tts-mini-0.8')
+        voice = data.get('voice', 'Bruno')
+        speed = float(data.get('speed', 1.0))
+        clean_text = data.get('clean_text', True)
+        
+        if not text:
+            return jsonify({'error': '文本不能为空'}), 400
+        
+        model = load_model(model_id)
+        audio = model.generate(
+            text=text,
+            voice=voice,
+            speed=speed,
+            clean_text=clean_text
+        )
+        
+        task_id = str(uuid.uuid4())
+        audio_filename = f"{task_id}.wav"
+        audio_path = os.path.join(AUDIO_DIR, audio_filename)
+        import soundfile as sf
+        sf.write(audio_path, audio, 24000)
+        
+        task = {
+            'id': task_id,
+            'text': text[:100] + ('...' if len(text) > 100 else ''),
+            'model_id': model_id,
+            'voice': voice,
+            'speed': speed,
+            'status': 'completed',
+            'audio_file': audio_filename,
+            'created_at': datetime.now().isoformat(),
+            'completed_at': datetime.now().isoformat(),
+        }
+        
+        add_to_history(task)
+        
+        return jsonify({
+            'success': True,
+            'task': task,
+            'audio_url': f'/api/audio/{audio_filename}'
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/tasks', methods=['POST'])
+def add_task():
+    try:
+        data = request.get_json()
+        text = data.get('text', '')
+        model_id = data.get('model', 'KittenML/kitten-tts-mini-0.8')
+        voice = data.get('voice', 'Bruno')
+        speed = float(data.get('speed', 1.0))
+        clean_text = data.get('clean_text', True)
+        
+        if not text:
+            return jsonify({'error': '文本不能为空'}), 400
+        
+        task_id = str(uuid.uuid4())
+        task = {
+            'id': task_id,
+            'text': text,
+            'model_id': model_id,
+            'voice': voice,
+            'speed': speed,
+            'clean_text': clean_text,
+            'status': 'pending',
+            'created_at': datetime.now().isoformat(),
+        }
+        
+        with TASK_QUEUE_LOCK:
+            TASK_QUEUE.append(task)
+        
+        return jsonify({
+            'success': True,
+            'task': task
+        })
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/api/tasks', methods=['GET'])
+def get_tasks():
+    with TASK_QUEUE_LOCK:
+        return jsonify(TASK_QUEUE)
+
+@app.route('/api/tasks/<task_id>', methods=['GET'])
+def get_task(task_id):
+    with TASK_QUEUE_LOCK:
+        for task in TASK_QUEUE:
+            if task['id'] == task_id:
+                return jsonify(task)
+    return jsonify({'error': '任务不存在'}), 404
+
+@app.route('/api/history', methods=['GET'])
+def get_history():
+    with HISTORY_LOCK:
+        return jsonify(HISTORY)
+
+@app.route('/api/history/<task_id>', methods=['DELETE'])
+def delete_history_item(task_id):
+    global HISTORY
+    with HISTORY_LOCK:
+        HISTORY = [h for h in HISTORY if h['id'] != task_id]
+        save_history()
+        return jsonify({'success': True})
+
+@app.route('/api/history', methods=['DELETE'])
+def clear_history():
+    global HISTORY
+    with HISTORY_LOCK:
+        for item in HISTORY:
+            audio_file = item.get('audio_file')
+            if audio_file:
+                audio_path = os.path.join(AUDIO_DIR, audio_file)
+                if os.path.exists(audio_path):
+                    os.remove(audio_path)
+        HISTORY = []
+        save_history()
+        return jsonify({'success': True})
+
+@app.route('/api/audio/<filename>', methods=['GET'])
+def get_audio(filename):
+    audio_path = os.path.join(AUDIO_DIR, secure_filename(filename))
+    if os.path.exists(audio_path):
+        return send_file(audio_path, mimetype='audio/wav')
+    return jsonify({'error': '音频文件不存在'}), 404
+
+@app.route('/api/status', methods=['GET'])
+def get_status():
+    model_info = {}
+    with MODELS_LOCK:
+        for model_id, model in MODELS.items():
+            model_info[model_id] = 'loaded'
+    
+    pending_count = 0
+    processing_count = 0
+    completed_count = 0
+    with TASK_QUEUE_LOCK:
+        for task in TASK_QUEUE:
+            if task['status'] == 'pending':
+                pending_count += 1
+            elif task['status'] == 'processing':
+                processing_count += 1
+            elif task['status'] == 'completed':
+                completed_count += 1
+    
+    return jsonify({
+        'loaded_models': model_info,
+        'queue_stats': {
+            'pending': pending_count,
+            'processing': processing_count,
+            'completed': completed_count,
+            'total': len(TASK_QUEUE)
+        },
+        'history_count': len(HISTORY)
+    })
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=True)
diff --git a/webui/history.json b/webui/history.json
new file mode 100644
index 0000000..01de689
--- /dev/null
+++ b/webui/history.json
@@ -0,0 +1,47 @@
+[
+  {
+    "id": "ac570fca-72f7-4aa9-9f24-f5801b45a4df",
+    "text": "This is a batch test message. It will be added to the task queue and processed in the background.",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bella",
+    "speed": 2.0,
+    "status": "completed",
+    "audio_file": "ac570fca-72f7-4aa9-9f24-f5801b45a4df.wav",
+    "created_at": "2026-04-20T18:30:33.216799",
+    "completed_at": "2026-04-20T18:30:33.216799"
+  },
+  {
+    "id": "45e127e1-25be-4411-89ca-8ab228cb2810",
+    "text": "This is a batch test message. It will be added to the task queue and processed in the background.",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bella",
+    "speed": 1.4,
+    "status": "completed",
+    "audio_file": "45e127e1-25be-4411-89ca-8ab228cb2810.wav",
+    "created_at": "2026-04-20T18:30:20.507877",
+    "completed_at": "2026-04-20T18:30:20.507877"
+  },
+  {
+    "id": "cbc3ff0f-c2b2-4a27-98c4-28ac87187485",
+    "text": "This is a batch test message. It will be added to the task queue and processed in the background.",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "clean_text": true,
+    "status": "completed",
+    "created_at": "2026-04-20T18:27:37.313439",
+    "audio_file": "cbc3ff0f-c2b2-4a27-98c4-28ac87187485.wav",
+    "completed_at": "2026-04-20T18:27:44.202011"
+  },
+  {
+    "id": "641a77d3-231f-410d-bca6-8f6705e43ee1",
+    "text": "Hello, this is a test of KittenTTS WebUI. The quick brown fox jumps over the lazy dog.",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "641a77d3-231f-410d-bca6-8f6705e43ee1.wav",
+    "created_at": "2026-04-20T18:27:19.889696",
+    "completed_at": "2026-04-20T18:27:19.889696"
+  }
+]
\ No newline at end of file
diff --git a/webui/templates/index.html b/webui/templates/index.html
new file mode 100644
index 0000000..7e07859
--- /dev/null
+++ b/webui/templates/index.html
@@ -0,0 +1,987 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KittenTTS WebUI</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            color: #333;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+
+        header {
+            text-align: center;
+            color: white;
+            margin-bottom: 30px;
+        }
+
+        header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+
+        header p {
+            font-size: 1.1rem;
+            opacity: 0.9;
+        }
+
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr 400px;
+            gap: 20px;
+        }
+
+        .card {
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+            padding: 24px;
+            margin-bottom: 20px;
+        }
+
+        .card h2 {
+            font-size: 1.3rem;
+            color: #333;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid #f0f0f0;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .card h2 span {
+            font-size: 1.5rem;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group label {
+            display: block;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #555;
+        }
+
+        .form-group input[type="text"],
+        .form-group input[type="number"],
+        .form-group select,
+        .form-group textarea {
+            width: 100%;
+            padding: 12px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            font-size: 1rem;
+            transition: border-color 0.3s, box-shadow 0.3s;
+            background: #fafafa;
+        }
+
+        .form-group input[type="text"]:focus,
+        .form-group input[type="number"]:focus,
+        .form-group select:focus,
+        .form-group textarea:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+            background: white;
+        }
+
+        .form-group textarea {
+            resize: vertical;
+            min-height: 150px;
+            font-family: inherit;
+        }
+
+        .form-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+        }
+
+        .range-container {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+        }
+
+        .range-container input[type="range"] {
+            flex: 1;
+            height: 8px;
+            border-radius: 4px;
+            background: #e0e0e0;
+            outline: none;
+            -webkit-appearance: none;
+        }
+
+        .range-container input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: #667eea;
+            cursor: pointer;
+            box-shadow: 0 2px 6px rgba(102, 126, 234, 0.4);
+        }
+
+        .range-value {
+            min-width: 50px;
+            text-align: center;
+            font-weight: 600;
+            color: #667eea;
+            background: #f0f2ff;
+            padding: 4px 8px;
+            border-radius: 4px;
+        }
+
+        .btn {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-primary {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+
+        .btn-primary:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+        }
+
+        .btn-secondary {
+            background: #f0f0f0;
+            color: #555;
+        }
+
+        .btn-secondary:hover:not(:disabled) {
+            background: #e0e0e0;
+        }
+
+        .btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+
+        .btn-group {
+            display: flex;
+            gap: 10px;
+            margin-top: 20px;
+        }
+
+        .audio-player {
+            margin-top: 20px;
+            padding: 20px;
+            background: #f8f9ff;
+            border-radius: 12px;
+            display: none;
+        }
+
+        .audio-player.show {
+            display: block;
+        }
+
+        .audio-player audio {
+            width: 100%;
+            margin-bottom: 15px;
+        }
+
+        .audio-info {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.9rem;
+            color: #666;
+        }
+
+        .status-badge {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 600;
+        }
+
+        .status-pending {
+            background: #fff3cd;
+            color: #856404;
+        }
+
+        .status-processing {
+            background: #cce5ff;
+            color: #004085;
+        }
+
+        .status-completed {
+            background: #d4edda;
+            color: #155724;
+        }
+
+        .status-failed {
+            background: #f8d7da;
+            color: #721c24;
+        }
+
+        .task-item {
+            padding: 16px;
+            background: #fafafa;
+            border-radius: 8px;
+            margin-bottom: 10px;
+            border-left: 4px solid #667eea;
+        }
+
+        .task-item:last-child {
+            margin-bottom: 0;
+        }
+
+        .task-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 8px;
+        }
+
+        .task-text {
+            font-size: 0.9rem;
+            color: #555;
+            margin-bottom: 8px;
+            line-height: 1.4;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+        }
+
+        .task-meta {
+            display: flex;
+            gap: 15px;
+            font-size: 0.8rem;
+            color: #888;
+        }
+
+        .task-actions {
+            display: flex;
+            gap: 8px;
+            margin-top: 12px;
+        }
+
+        .task-actions .btn {
+            padding: 6px 12px;
+            font-size: 0.85rem;
+        }
+
+        .empty-state {
+            text-align: center;
+            padding: 40px 20px;
+            color: #999;
+        }
+
+        .empty-state-icon {
+            font-size: 3rem;
+            margin-bottom: 15px;
+        }
+
+        .tabs {
+            display: flex;
+            margin-bottom: 20px;
+            background: #f0f0f0;
+            border-radius: 8px;
+            padding: 4px;
+        }
+
+        .tab {
+            flex: 1;
+            padding: 10px;
+            text-align: center;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 500;
+            transition: all 0.3s;
+            color: #666;
+        }
+
+        .tab.active {
+            background: white;
+            color: #667eea;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        .tab-content {
+            display: none;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+        .loading-spinner {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 2px solid #f3f3f3;
+            border-top: 2px solid #667eea;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .toast {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            padding: 16px 24px;
+            background: #333;
+            color: white;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+            transform: translateY(100px);
+            opacity: 0;
+            transition: all 0.3s;
+            z-index: 1000;
+        }
+
+        .toast.show {
+            transform: translateY(0);
+            opacity: 1;
+        }
+
+        .toast.success {
+            background: #28a745;
+        }
+
+        .toast.error {
+            background: #dc3545;
+        }
+
+        .voice-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 10px;
+            margin-top: 10px;
+        }
+
+        .voice-option {
+            padding: 12px;
+            border: 2px solid #e0e0e0;
+            border-radius: 8px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s;
+            background: #fafafa;
+        }
+
+        .voice-option:hover {
+            border-color: #667eea;
+            background: #f8f9ff;
+        }
+
+        .voice-option.selected {
+            border-color: #667eea;
+            background: #f0f2ff;
+            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+        }
+
+        .voice-name {
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 4px;
+        }
+
+        .voice-desc {
+            font-size: 0.8rem;
+            color: #888;
+        }
+
+        .stats-bar {
+            display: flex;
+            gap: 20px;
+            padding: 15px;
+            background: #f8f9ff;
+            border-radius: 8px;
+            margin-bottom: 20px;
+        }
+
+        .stat-item {
+            text-align: center;
+            flex: 1;
+        }
+
+        .stat-value {
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: #667eea;
+        }
+
+        .stat-label {
+            font-size: 0.85rem;
+            color: #888;
+        }
+
+        .checkbox-group {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .checkbox-group input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            cursor: pointer;
+        }
+
+        @media (max-width: 900px) {
+            .main-content {
+                grid-template-columns: 1fr;
+            }
+
+            .form-row {
+                grid-template-columns: 1fr;
+            }
+
+            .voice-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🐱 KittenTTS WebUI</h1>
+            <p>超轻量级文本转语音工具 - 无需GPU，快速生成高质量语音</p>
+        </header>
+
+        <div class="main-content">
+            <div class="left-panel">
+                <div class="card">
+                    <h2><span>🎙️</span> 实时合成</h2>
+                    
+                    <div class="form-group">
+                        <label for="modelSelect">选择模型</label>
+                        <select id="modelSelect">
+                            <option value="KittenML/kitten-tts-mini-0.8">Mini (80M) - 最高质量</option>
+                            <option value="KittenML/kitten-tts-micro-0.8">Micro (40M) - 速度与质量平衡</option>
+                            <option value="KittenML/kitten-tts-nano-0.8">Nano (15M) - 最小最快</option>
+                        </select>
+                    </div>
+
+                    <div class="form-group">
+                        <label>选择语音</label>
+                        <div class="voice-grid" id="voiceGrid">
+                        </div>
+                    </div>
+
+                    <div class="form-row">
+                        <div class="form-group">
+                            <label for="speedRange">语速</label>
+                            <div class="range-container">
+                                <input type="range" id="speedRange" min="0.5" max="2.0" step="0.1" value="1.0">
+                                <span class="range-value" id="speedValue">1.0x</span>
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label>&nbsp;</label>
+                            <div class="checkbox-group">
+                                <input type="checkbox" id="cleanText" checked>
+                                <label for="cleanText">文本预处理（数字转文字等）</label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="form-group">
+                        <label for="textInput">输入文本</label>
+                        <textarea id="textInput" placeholder="请输入要转换为语音的文本..."></textarea>
+                    </div>
+
+                    <div class="btn-group">
+                        <button class="btn btn-primary" id="generateBtn">
+                            <span>🎵</span> 生成语音
+                        </button>
+                        <button class="btn btn-secondary" id="addToQueueBtn">
+                            <span>📋</span> 添加到队列
+                        </button>
+                    </div>
+
+                    <div class="audio-player" id="audioPlayer">
+                        <audio id="audioElement" controls></audio>
+                        <div class="audio-info">
+                            <span id="audioInfoText">音频已准备好</span>
+                            <button class="btn btn-secondary" id="downloadBtn">
+                                <span>⬇️</span> 下载音频
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="card">
+                    <h2><span>📊</span> 系统状态</h2>
+                    <div class="stats-bar" id="statsBar">
+                        <div class="stat-item">
+                            <div class="stat-value" id="loadedModelsCount">0</div>
+                            <div class="stat-label">已加载模型</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-value" id="pendingTasksCount">0</div>
+                            <div class="stat-label">等待中</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-value" id="processingTasksCount">0</div>
+                            <div class="stat-label">处理中</div>
+                        </div>
+                        <div class="stat-item">
+                            <div class="stat-value" id="historyCount">0</div>
+                            <div class="stat-label">历史记录</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="right-panel">
+                <div class="card">
+                    <div class="tabs">
+                        <div class="tab active" data-tab="queue">任务队列</div>
+                        <div class="tab" data-tab="history">历史记录</div>
+                    </div>
+
+                    <div class="tab-content active" id="queueTab">
+                        <div id="taskQueueContent">
+                            <div class="empty-state">
+                                <div class="empty-state-icon">📭</div>
+                                <p>暂无待处理任务</p>
+                                <p style="font-size: 0.9rem; margin-top: 8px;">点击"添加到队列"按钮来创建批量任务</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="tab-content" id="historyTab">
+                        <div style="margin-bottom: 15px; display: flex; justify-content: space-between; align-items: center;">
+                            <span style="font-size: 0.9rem; color: #888;">最近生成的音频</span>
+                            <button class="btn btn-secondary" id="clearHistoryBtn" style="padding: 6px 12px; font-size: 0.85rem;">
+                                清空历史
+                            </button>
+                        </div>
+                        <div id="historyContent">
+                            <div class="empty-state">
+                                <div class="empty-state-icon">📜</div>
+                                <p>暂无历史记录</p>
+                                <p style="font-size: 0.9rem; margin-top: 8px;">生成的音频将显示在这里</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="toast" id="toast"></div>
+
+    <script>
+        let currentAudioUrl = null;
+        let selectedVoice = 'Bruno';
+        let statusUpdateInterval = null;
+
+        const voices = [
+            { id: 'Bella', name: 'Bella', desc: '女声' },
+            { id: 'Jasper', name: 'Jasper', desc: '男声' },
+            { id: 'Luna', name: 'Luna', desc: '女声' },
+            { id: 'Bruno', name: 'Bruno', desc: '男声' },
+            { id: 'Rosie', name: 'Rosie', desc: '女声' },
+            { id: 'Hugo', name: 'Hugo', desc: '男声' },
+            { id: 'Kiki', name: 'Kiki', desc: '女声' },
+            { id: 'Leo', name: 'Leo', desc: '男声' },
+        ];
+
+        function initVoiceGrid() {
+            const grid = document.getElementById('voiceGrid');
+            grid.innerHTML = voices.map(voice => `
+                <div class="voice-option ${voice.id === selectedVoice ? 'selected' : ''}" 
+                     data-voice="${voice.id}">
+                    <div class="voice-name">${voice.name}</div>
+                    <div class="voice-desc">${voice.desc}</div>
+                </div>
+            `).join('');
+
+            grid.querySelectorAll('.voice-option').forEach(opt => {
+                opt.addEventListener('click', () => {
+                    grid.querySelectorAll('.voice-option').forEach(o => o.classList.remove('selected'));
+                    opt.classList.add('selected');
+                    selectedVoice = opt.dataset.voice;
+                });
+            });
+        }
+
+        function showToast(message, type = 'success') {
+            const toast = document.getElementById('toast');
+            toast.textContent = message;
+            toast.className = `toast ${type} show`;
+            setTimeout(() => {
+                toast.classList.remove('show');
+            }, 3000);
+        }
+
+        function formatTime(isoString) {
+            const date = new Date(isoString);
+            return date.toLocaleString('zh-CN');
+        }
+
+        function getStatusBadgeClass(status) {
+            const map = {
+                'pending': 'status-pending',
+                'processing': 'status-processing',
+                'completed': 'status-completed',
+                'failed': 'status-failed'
+            };
+            return map[status] || 'status-pending';
+        }
+
+        function getStatusText(status) {
+            const map = {
+                'pending': '等待中',
+                'processing': '处理中',
+                'completed': '已完成',
+                'failed': '失败'
+            };
+            return map[status] || status;
+        }
+
+        async function generateAudio() {
+            const text = document.getElementById('textInput').value.trim();
+            if (!text) {
+                showToast('请输入要转换的文本', 'error');
+                return;
+            }
+
+            const btn = document.getElementById('generateBtn');
+            const originalText = btn.innerHTML;
+            btn.disabled = true;
+            btn.innerHTML = '<span class="loading-spinner"></span> 生成中...';
+
+            try {
+                const response = await fetch('/api/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        text: text,
+                        model: document.getElementById('modelSelect').value,
+                        voice: selectedVoice,
+                        speed: parseFloat(document.getElementById('speedRange').value),
+                        clean_text: document.getElementById('cleanText').checked
+                    })
+                });
+
+                const data = await response.json();
+
+                if (response.ok) {
+                    const audioUrl = `/api/audio/${data.task.audio_file}`;
+                    const audioElement = document.getElementById('audioElement');
+                    audioElement.src = audioUrl;
+                    currentAudioUrl = audioUrl;
+
+                    document.getElementById('audioPlayer').classList.add('show');
+                    document.getElementById('audioInfoText').textContent = 
+                        `语音: ${data.task.voice} | 语速: ${data.task.speed}x | 生成时间: ${formatTime(data.task.completed_at)}`;
+
+                    showToast('音频生成成功！');
+                    updateStatus();
+                    loadHistory();
+                } else {
+                    throw new Error(data.error || '生成失败');
+                }
+            } catch (error) {
+                showToast('生成失败: ' + error.message, 'error');
+            } finally {
+                btn.disabled = false;
+                btn.innerHTML = originalText;
+            }
+        }
+
+        async function addToQueue() {
+            const text = document.getElementById('textInput').value.trim();
+            if (!text) {
+                showToast('请输入要转换的文本', 'error');
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/tasks', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        text: text,
+                        model: document.getElementById('modelSelect').value,
+                        voice: selectedVoice,
+                        speed: parseFloat(document.getElementById('speedRange').value),
+                        clean_text: document.getElementById('cleanText').checked
+                    })
+                });
+
+                const data = await response.json();
+
+                if (response.ok) {
+                    showToast('已添加到任务队列！');
+                    document.getElementById('textInput').value = '';
+                    updateStatus();
+                    loadQueue();
+                } else {
+                    throw new Error(data.error || '添加失败');
+                }
+            } catch (error) {
+                showToast('添加失败: ' + error.message, 'error');
+            }
+        }
+
+        async function loadQueue() {
+            try {
+                const response = await fetch('/api/tasks');
+                const tasks = await response.json();
+                const container = document.getElementById('taskQueueContent');
+
+                if (tasks.length === 0) {
+                    container.innerHTML = `
+                        <div class="empty-state">
+                            <div class="empty-state-icon">📭</div>
+                            <p>暂无待处理任务</p>
+                            <p style="font-size: 0.9rem; margin-top: 8px;">点击"添加到队列"按钮来创建批量任务</p>
+                        </div>
+                    `;
+                    return;
+                }
+
+                container.innerHTML = tasks.map(task => `
+                    <div class="task-item">
+                        <div class="task-header">
+                            <span class="status-badge ${getStatusBadgeClass(task.status)}">
+                                ${getStatusText(task.status)}
+                            </span>
+                            <span style="font-size: 0.8rem; color: #888;">
+                                ${formatTime(task.created_at)}
+                            </span>
+                        </div>
+                        <div class="task-text">${task.text}</div>
+                        <div class="task-meta">
+                            <span>语音: ${task.voice}</span>
+                            <span>语速: ${task.speed}x</span>
+                            <span>模型: ${task.model_id.split('/')[1]}</span>
+                        </div>
+                        ${task.status === 'completed' ? `
+                            <div class="task-actions">
+                                <button class="btn btn-secondary" onclick="playTaskAudio('${task.audio_file}')">
+                                    ▶️ 播放
+                                </button>
+                                <button class="btn btn-secondary" onclick="downloadTaskAudio('${task.audio_file}')">
+                                    ⬇️ 下载
+                                </button>
+                            </div>
+                        ` : ''}
+                        ${task.status === 'failed' ? `
+                            <div style="margin-top: 8px; padding: 8px; background: #f8d7da; border-radius: 4px; font-size: 0.85rem; color: #721c24;">
+                                错误: ${task.error}
+                            </div>
+                        ` : ''}
+                    </div>
+                `).join('');
+            } catch (error) {
+                console.error('加载队列失败:', error);
+            }
+        }
+
+        async function loadHistory() {
+            try {
+                const response = await fetch('/api/history');
+                const history = await response.json();
+                const container = document.getElementById('historyContent');
+
+                if (history.length === 0) {
+                    container.innerHTML = `
+                        <div class="empty-state">
+                            <div class="empty-state-icon">📜</div>
+                            <p>暂无历史记录</p>
+                            <p style="font-size: 0.9rem; margin-top: 8px;">生成的音频将显示在这里</p>
+                        </div>
+                    `;
+                    return;
+                }
+
+                container.innerHTML = history.map(item => `
+                    <div class="task-item">
+                        <div class="task-header">
+                            <span class="status-badge status-completed">已完成</span>
+                            <button class="btn btn-secondary" 
+                                    style="padding: 4px 8px; font-size: 0.75rem;"
+                                    onclick="deleteHistoryItem('${item.id}')">
+                                🗑️
+                            </button>
+                        </div>
+                        <div class="task-text">${item.text}</div>
+                        <div class="task-meta">
+                            <span>语音: ${item.voice}</span>
+                            <span>语速: ${item.speed}x</span>
+                        </div>
+                        <div style="font-size: 0.75rem; color: #888; margin-top: 8px;">
+                            ${formatTime(item.completed_at)}
+                        </div>
+                        <div class="task-actions">
+                            <button class="btn btn-secondary" onclick="playTaskAudio('${item.audio_file}')">
+                                ▶️ 播放
+                            </button>
+                            <button class="btn btn-secondary" onclick="downloadTaskAudio('${item.audio_file}')">
+                                ⬇️ 下载
+                            </button>
+                        </div>
+                    </div>
+                `).join('');
+            } catch (error) {
+                console.error('加载历史失败:', error);
+            }
+        }
+
+        async function updateStatus() {
+            try {
+                const response = await fetch('/api/status');
+                const status = await response.json();
+
+                document.getElementById('loadedModelsCount').textContent = Object.keys(status.loaded_models).length;
+                document.getElementById('pendingTasksCount').textContent = status.queue_stats.pending;
+                document.getElementById('processingTasksCount').textContent = status.queue_stats.processing;
+                document.getElementById('historyCount').textContent = status.history_count;
+            } catch (error) {
+                console.error('更新状态失败:', error);
+            }
+        }
+
+        function playTaskAudio(filename) {
+            const audioUrl = `/api/audio/${filename}`;
+            const audioElement = document.getElementById('audioElement');
+            audioElement.src = audioUrl;
+            currentAudioUrl = audioUrl;
+            document.getElementById('audioPlayer').classList.add('show');
+            audioElement.play();
+            showToast('正在播放...');
+        }
+
+        function downloadTaskAudio(filename) {
+            const link = document.createElement('a');
+            link.href = `/api/audio/${filename}`;
+            link.download = `kittentts_${Date.now()}.wav`;
+            link.click();
+            showToast('开始下载...');
+        }
+
+        async function deleteHistoryItem(id) {
+            if (!confirm('确定要删除这条记录吗？')) return;
+            
+            try {
+                const response = await fetch(`/api/history/${id}`, { method: 'DELETE' });
+                if (response.ok) {
+                    showToast('已删除');
+                    loadHistory();
+                    updateStatus();
+                }
+            } catch (error) {
+                showToast('删除失败: ' + error.message, 'error');
+            }
+        }
+
+        async function clearHistory() {
+            if (!confirm('确定要清空所有历史记录吗？这将同时删除所有音频文件。')) return;
+            
+            try {
+                const response = await fetch('/api/history', { method: 'DELETE' });
+                if (response.ok) {
+                    showToast('已清空历史记录');
+                    loadHistory();
+                    updateStatus();
+                }
+            } catch (error) {
+                showToast('清空失败: ' + error.message, 'error');
+            }
+        }
+
+        function downloadCurrentAudio() {
+            if (!currentAudioUrl) return;
+            const link = document.createElement('a');
+            link.href = currentAudioUrl;
+            link.download = `kittentts_${Date.now()}.wav`;
+            link.click();
+            showToast('开始下载...');
+        }
+
+        function initTabs() {
+            document.querySelectorAll('.tab').forEach(tab => {
+                tab.addEventListener('click', () => {
+                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
+                    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+                    
+                    tab.classList.add('active');
+                    document.getElementById(tab.dataset.tab + 'Tab').classList.add('active');
+                });
+            });
+        }
+
+        function initSpeedRange() {
+            const range = document.getElementById('speedRange');
+            const valueDisplay = document.getElementById('speedValue');
+            
+            range.addEventListener('input', () => {
+                valueDisplay.textContent = range.value + 'x';
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            initVoiceGrid();
+            initTabs();
+            initSpeedRange();
+
+            document.getElementById('generateBtn').addEventListener('click', generateAudio);
+            document.getElementById('addToQueueBtn').addEventListener('click', addToQueue);
+            document.getElementById('downloadBtn').addEventListener('click', downloadCurrentAudio);
+            document.getElementById('clearHistoryBtn').addEventListener('click', clearHistory);
+
+            document.getElementById('textInput').addEventListener('keydown', (e) => {
+                if (e.ctrlKey && e.key === 'Enter') {
+                    generateAudio();
+                }
+            });
+
+            updateStatus();
+            loadQueue();
+            loadHistory();
+
+            statusUpdateInterval = setInterval(() => {
+                updateStatus();
+                loadQueue();
+            }, 3000);
+        });
+    </script>
+</body>
+</html>

From f25b1b5818083866857f3dba3923d09f5e384ac4 Mon Sep 17 00:00:00 2001
From: Unizzr <1920158711@qq.com>
Date: Mon, 20 Apr 2026 22:56:33 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat(webui):=20=E6=B7=BB=E5=8A=A0=E6=9A=97?=
 =?UTF-8?q?=E9=BB=91=E4=B8=BB=E9=A2=98=E3=80=81=E6=96=87=E4=BB=B6=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E5=92=8C=E8=BF=9B=E5=BA=A6=E6=9D=A1=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加暗黑主题切换功能，支持文件上传和进度显示
实现文件拖拽上传和主题持久化存储
优化界面样式和交互体验
新增测试脚本验证模板渲染和功能完整性
---
 example.py                 |   2 +-
 requirements_webui.txt     |   7 -
 run_webui.py               |   2 +-
 test_flask_template.py     | 132 ++++++++
 test_html.py               |  81 +++++
 webui/app.py               |  12 +
 webui/history.json         | 176 ++++++++++
 webui/templates/index.html | 637 ++++++++++++++++++++++++++++++-------
 8 files changed, 929 insertions(+), 120 deletions(-)
 delete mode 100644 requirements_webui.txt
 create mode 100644 test_flask_template.py
 create mode 100644 test_html.py

diff --git a/example.py b/example.py
index ad1e5b4..22d6f45 100644
--- a/example.py
+++ b/example.py
@@ -11,7 +11,7 @@
 # Step 2: Generate the audio 
 
 # this is a sample from the TinyStories dataset. 
-text ="""One day, a little girl named Lily found a needle in her room. She knew it was difficult to play with it because it was sharp. """
+text ="""你好你好你好 """
 
 
 # available_voices : ['Bella', 'Jasper', 'Luna', 'Bruno', 'Rosie', 'Hugo', 'Kiki', 'Leo']
diff --git a/requirements_webui.txt b/requirements_webui.txt
deleted file mode 100644
index b5f1b8f..0000000
--- a/requirements_webui.txt
+++ /dev/null
@@ -1,7 +0,0 @@
-flask
-espeakng_loader
-phonemizer
-onnxruntime
-soundfile
-numpy
-huggingface_hub
diff --git a/run_webui.py b/run_webui.py
index 8723f52..3e497b2 100644
--- a/run_webui.py
+++ b/run_webui.py
@@ -15,4 +15,4 @@
     print()
     print("=" * 60)
     
-    app.run(host='0.0.0.0', port=5000, debug=False)
+    app.run(host='0.0.0.0', port=5000, debug=True)
diff --git a/test_flask_template.py b/test_flask_template.py
new file mode 100644
index 0000000..6cf346b
--- /dev/null
+++ b/test_flask_template.py
@@ -0,0 +1,132 @@
+import sys
+import os
+
+# 添加项目路径到sys.path
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+
+# 设置Flask应用的模板目录
+from flask import Flask, render_template
+
+# 创建一个测试Flask应用
+app = Flask(__name__, 
+            template_folder=os.path.join(os.path.dirname(os.path.abspath(__file__)), 'webui', 'templates'))
+
+# 禁用模板缓存
+app.config['TEMPLATES_AUTO_RELOAD'] = True
+app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
+
+print("=" * 60)
+print("Testing Flask template loading")
+print("=" * 60)
+
+# 打印模板目录
+print(f"Template folder: {app.template_folder}")
+print(f"Template folder exists: {os.path.exists(app.template_folder)}")
+
+# 检查index.html文件
+index_path = os.path.join(app.template_folder, 'index.html')
+print(f"Index.html path: {index_path}")
+print(f"Index.html exists: {os.path.exists(index_path)}")
+
+if os.path.exists(index_path):
+    with open(index_path, 'r', encoding='utf-8') as f:
+        file_content = f.read()
+    print(f"File size: {len(file_content)} characters")
+    
+    # 检查是否包含新增功能
+    checks = [
+        ('themeToggle', 'theme toggle button'),
+        ('file-upload-container', 'file upload container'),
+        ('progress-container', 'progress bar container'),
+        ('dark-mode', 'dark mode style'),
+        ('initTheme', 'theme init function'),
+        ('initFileUpload', 'file upload init function'),
+        ('showProgress', 'progress bar show function'),
+    ]
+    
+    print("\nChecking file content:")
+    all_found = True
+    for check, name in checks:
+        if check in file_content:
+            print(f"[OK] Found: {name}")
+        else:
+            print(f"[MISSING] Not found: {name}")
+            all_found = False
+    
+    if all_found:
+        print("\n[OK] All new features are in the file!")
+    else:
+        print("\n[ERROR] Some features are missing from the file!")
+else:
+    print("[ERROR] index.html file does not exist!")
+
+# 现在测试Flask的render_template函数
+print("\n" + "=" * 60)
+print("Testing render_template function")
+print("=" * 60)
+
+with app.app_context():
+    try:
+        rendered = render_template('index.html')
+        print(f"Rendered template size: {len(rendered)} characters")
+        
+        print("\nChecking rendered content:")
+        all_found_rendered = True
+        for check, name in checks:
+            if check in rendered:
+                print(f"[OK] Found: {name}")
+            else:
+                print(f"[MISSING] Not found: {name}")
+                all_found_rendered = False
+        
+        if all_found_rendered:
+            print("\n[OK] All new features are in the rendered template!")
+        else:
+            print("\n[ERROR] Some features are missing from the rendered template!")
+            
+            # 显示渲染内容的前1000个字符
+            print("\nFirst 1000 characters of rendered content:")
+            print("-" * 60)
+            print(rendered[:1000])
+            print("-" * 60)
+            
+    except Exception as e:
+        print(f"[ERROR] Error rendering template: {e}")
+        import traceback
+        traceback.print_exc()
+
+# 比较文件内容和渲染内容
+if os.path.exists(index_path):
+    with open(index_path, 'r', encoding='utf-8') as f:
+        file_content = f.read()
+    
+    with app.app_context():
+        try:
+            rendered = render_template('index.html')
+            
+            print("\n" + "=" * 60)
+            print("Comparing file content and rendered content")
+            print("=" * 60)
+            
+            if file_content == rendered:
+                print("[OK] File content and rendered content are identical!")
+            else:
+                print("[ERROR] File content and rendered content are different!")
+                print(f"File size: {len(file_content)}")
+                print(f"Rendered size: {len(rendered)}")
+                
+                # 找出差异
+                if len(file_content) != len(rendered):
+                    print(f"\nSize difference: {abs(len(file_content) - len(rendered))} characters")
+                    
+                    # 检查前100个字符是否相同
+                    min_len = min(len(file_content), len(rendered))
+                    for i in range(min_len):
+                        if file_content[i] != rendered[i]:
+                            print(f"\nFirst difference at position {i}")
+                            print(f"File: {file_content[max(0, i-20):i+20]}")
+                            print(f"Rendered: {rendered[max(0, i-20):i+20]}")
+                            break
+                            
+        except Exception as e:
+            print(f"[ERROR] Error comparing: {e}")
diff --git a/test_html.py b/test_html.py
new file mode 100644
index 0000000..5390363
--- /dev/null
+++ b/test_html.py
@@ -0,0 +1,81 @@
+import urllib.request
+import sys
+import os
+
+# 设置控制台编码
+sys.stdout.reconfigure(encoding='utf-8')
+
+# 首先检查本地文件
+print("=" * 60)
+print("Checking local index.html file")
+print("=" * 60)
+
+html_path = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'webui', 'templates', 'index.html')
+print(f"File path: {html_path}")
+print(f"File exists: {os.path.exists(html_path)}")
+
+if os.path.exists(html_path):
+    with open(html_path, 'r', encoding='utf-8') as f:
+        html = f.read()
+    
+    print(f"File size: {len(html)} characters")
+    
+    # 检查是否包含所有新增的元素
+    checks = [
+        ('themeToggle', 'theme toggle button'),
+        ('file-upload-container', 'file upload container'),
+        ('progress-container', 'progress bar container'),
+        ('dark-mode', 'dark mode style'),
+        ('initTheme', 'theme init function'),
+        ('initFileUpload', 'file upload init function'),
+        ('showProgress', 'progress bar show function'),
+    ]
+    
+    all_found = True
+    for check, name in checks:
+        if check in html:
+            print(f"[OK] Found: {name}")
+        else:
+            print(f"[MISSING] Not found: {name}")
+            all_found = False
+    
+    if all_found:
+        print("\n[OK] All new features are in the local file!")
+    else:
+        print("\n[ERROR] Some features are missing from the local file!")
+else:
+    print("[ERROR] Local index.html file does not exist!")
+
+# 然后检查Flask服务返回的内容
+print("\n" + "=" * 60)
+print("Checking Flask server response")
+print("=" * 60)
+
+try:
+    with urllib.request.urlopen('http://localhost:5000') as response:
+        server_html = response.read().decode('utf-8')
+        
+        print(f"Server response size: {len(server_html)} characters")
+        
+        # 检查是否包含所有新增的元素
+        all_found_server = True
+        for check, name in checks:
+            if check in server_html:
+                print(f"[OK] Found: {name}")
+            else:
+                print(f"[MISSING] Not found: {name}")
+                all_found_server = False
+        
+        if all_found_server:
+            print("\n[OK] All new features are in the server response!")
+        else:
+            print("\n[ERROR] Some features are missing from the server response!")
+            
+        # 显示前1000个字符，看看返回的是什么
+        print("\nFirst 1000 characters of server response:")
+        print("-" * 60)
+        print(server_html[:1000])
+        print("-" * 60)
+        
+except Exception as e:
+    print(f"[ERROR] Error connecting to server: {e}")
diff --git a/webui/app.py b/webui/app.py
index 708c8bc..3051607 100644
--- a/webui/app.py
+++ b/webui/app.py
@@ -9,6 +9,18 @@
 
 app = Flask(__name__)
 
+# 禁用模板缓存，确保每次都加载最新的模板
+app.config['TEMPLATES_AUTO_RELOAD'] = True
+app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
+
+# 确保模板不会被缓存
+@app.after_request
+def add_header(response):
+    response.headers['Cache-Control'] = 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0'
+    response.headers['Pragma'] = 'no-cache'
+    response.headers['Expires'] = '0'
+    return response
+
 BASE_DIR = os.path.dirname(os.path.abspath(__file__))
 AUDIO_DIR = os.path.join(BASE_DIR, 'static', 'audio')
 HISTORY_FILE = os.path.join(BASE_DIR, 'history.json')
diff --git a/webui/history.json b/webui/history.json
index 01de689..f50c4d9 100644
--- a/webui/history.json
+++ b/webui/history.json
@@ -1,4 +1,180 @@
 [
+  {
+    "id": "5b5cca93-a7f7-4a76-909d-c139a7b331c9",
+    "text": "This is a batch test message. It will be added to the task queue and processed in the background.",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "5b5cca93-a7f7-4a76-909d-c139a7b331c9.wav",
+    "created_at": "2026-04-20T22:55:17.883639",
+    "completed_at": "2026-04-20T22:55:17.883639"
+  },
+  {
+    "id": "f70f2b26-ad41-4080-83f9-c9eaa830a0a5",
+    "text": "你好，今天天气很好",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "f70f2b26-ad41-4080-83f9-c9eaa830a0a5.wav",
+    "created_at": "2026-04-20T21:43:45.706054",
+    "completed_at": "2026-04-20T21:43:45.706054"
+  },
+  {
+    "id": "8010e719-c785-4f8d-8afa-28832806e9da",
+    "text": "你好，今天天气很好",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "8010e719-c785-4f8d-8afa-28832806e9da.wav",
+    "created_at": "2026-04-20T21:29:38.009820",
+    "completed_at": "2026-04-20T21:29:38.009820"
+  },
+  {
+    "id": "30d8c0f2-0d73-4abd-8b34-4e4a0587c50e",
+    "text": "nihao，jintian1tianqizhenhao",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Kiki",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "30d8c0f2-0d73-4abd-8b34-4e4a0587c50e.wav",
+    "created_at": "2026-04-20T21:24:30.137704",
+    "completed_at": "2026-04-20T21:24:30.137704"
+  },
+  {
+    "id": "d6493c0e-29ab-46bc-9910-725257ec81a5",
+    "text": "nihao，jintiantianqizhenhao",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "d6493c0e-29ab-46bc-9910-725257ec81a5.wav",
+    "created_at": "2026-04-20T21:24:16.382444",
+    "completed_at": "2026-04-20T21:24:16.382444"
+  },
+  {
+    "id": "e1defdf8-1ee6-4346-b750-45e04c50ac8c",
+    "text": "你好，今天天气很好",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "e1defdf8-1ee6-4346-b750-45e04c50ac8c.wav",
+    "created_at": "2026-04-20T21:23:51.344488",
+    "completed_at": "2026-04-20T21:23:51.344488"
+  },
+  {
+    "id": "ba33a85b-331d-463d-a2ff-85d8e20dd98e",
+    "text": "你好，今天天气很好",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "ba33a85b-331d-463d-a2ff-85d8e20dd98e.wav",
+    "created_at": "2026-04-20T21:11:16.181978",
+    "completed_at": "2026-04-20T21:11:16.181978"
+  },
+  {
+    "id": "26f16480-4b7a-454a-b126-e70f7140cf45",
+    "text": "你好，今天天气很好",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "26f16480-4b7a-454a-b126-e70f7140cf45.wav",
+    "created_at": "2026-04-20T21:10:22.895003",
+    "completed_at": "2026-04-20T21:10:22.895003"
+  },
+  {
+    "id": "c3ffe2a5-5a3a-4e60-a8c2-f2ca3de87f60",
+    "text": "你好，今天天气很好",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "c3ffe2a5-5a3a-4e60-a8c2-f2ca3de87f60.wav",
+    "created_at": "2026-04-20T21:10:06.347052",
+    "completed_at": "2026-04-20T21:10:06.347052"
+  },
+  {
+    "id": "52477581-60d6-4866-9342-504c9b3b290e",
+    "text": "你好，今天天气真好  123456",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "52477581-60d6-4866-9342-504c9b3b290e.wav",
+    "created_at": "2026-04-20T20:59:55.116738",
+    "completed_at": "2026-04-20T20:59:55.116738"
+  },
+  {
+    "id": "c0745271-a973-441a-a5e4-2452a0568a5f",
+    "text": "你好，今天天气真好",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "c0745271-a973-441a-a5e4-2452a0568a5f.wav",
+    "created_at": "2026-04-20T20:59:37.065451",
+    "completed_at": "2026-04-20T20:59:37.065451"
+  },
+  {
+    "id": "07dee5c3-24bc-4171-ba40-8fb1fed7c5e1",
+    "text": "nihao，jintiantianqizhenhao",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bella",
+    "speed": 1.1,
+    "status": "completed",
+    "audio_file": "07dee5c3-24bc-4171-ba40-8fb1fed7c5e1.wav",
+    "created_at": "2026-04-20T20:47:21.492144",
+    "completed_at": "2026-04-20T20:47:21.492144"
+  },
+  {
+    "id": "bb747839-676d-4a9d-8b0e-be382c5e9bf7",
+    "text": "nihao,jintiantianqizhenhao",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bella",
+    "speed": 1.1,
+    "status": "completed",
+    "audio_file": "bb747839-676d-4a9d-8b0e-be382c5e9bf7.wav",
+    "created_at": "2026-04-20T20:47:07.928849",
+    "completed_at": "2026-04-20T20:47:07.928849"
+  },
+  {
+    "id": "5894b1ec-37a0-4495-85bf-3b079fcaf0fc",
+    "text": "你好，今天天气真好123456 water",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bella",
+    "speed": 1.1,
+    "status": "completed",
+    "audio_file": "5894b1ec-37a0-4495-85bf-3b079fcaf0fc.wav",
+    "created_at": "2026-04-20T20:45:54.819700",
+    "completed_at": "2026-04-20T20:45:54.819700"
+  },
+  {
+    "id": "ca0f3b5f-dd4a-4bf9-86c2-82bbfeb1b812",
+    "text": "你好，今天天气真好",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bella",
+    "speed": 1.4,
+    "status": "completed",
+    "audio_file": "ca0f3b5f-dd4a-4bf9-86c2-82bbfeb1b812.wav",
+    "created_at": "2026-04-20T20:45:23.964411",
+    "completed_at": "2026-04-20T20:45:23.964411"
+  },
+  {
+    "id": "d282569b-064b-4fe6-9c54-d1bed69aee2d",
+    "text": "你好，今天天气真好",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Kiki",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "d282569b-064b-4fe6-9c54-d1bed69aee2d.wav",
+    "created_at": "2026-04-20T20:44:33.396728",
+    "completed_at": "2026-04-20T20:44:33.396728"
+  },
   {
     "id": "ac570fca-72f7-4aa9-9f24-f5801b45a4df",
     "text": "This is a batch test message. It will be added to the task queue and processed in the background.",
diff --git a/webui/templates/index.html b/webui/templates/index.html
index 7e07859..64b086b 100644
--- a/webui/templates/index.html
+++ b/webui/templates/index.html
@@ -11,11 +11,50 @@
             box-sizing: border-box;
         }
 
+        :root {
+            --bg-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            --bg-card: #ffffff;
+            --text-primary: #333333;
+            --text-secondary: #555555;
+            --text-tertiary: #888888;
+            --border-color: #e0e0e0;
+            --input-bg: #fafafa;
+            --input-focus-bg: #ffffff;
+            --card-shadow: 0 10px 40px rgba(0,0,0,0.1);
+            --tab-bg: #f0f0f0;
+            --tab-active-bg: #ffffff;
+            --stat-bg: #f8f9ff;
+            --audio-player-bg: #f8f9ff;
+            --range-bg: #e0e0e0;
+            --checkbox-text: #555555;
+            --header-text: #ffffff;
+        }
+
+        body.dark-mode {
+            --bg-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            --bg-card: #1e1e2f;
+            --text-primary: #e0e0e0;
+            --text-secondary: #b0b0b0;
+            --text-tertiary: #888888;
+            --border-color: #3a3a4a;
+            --input-bg: #2a2a3a;
+            --input-focus-bg: #3a3a4a;
+            --card-shadow: 0 10px 40px rgba(0,0,0,0.3);
+            --tab-bg: #2a2a3a;
+            --tab-active-bg: #3a3a4a;
+            --stat-bg: #2a2a3a;
+            --audio-player-bg: #2a2a3a;
+            --range-bg: #3a3a4a;
+            --checkbox-text: #b0b0b0;
+            --header-text: #e0e0e0;
+        }
+
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: var(--bg-primary);
             min-height: 100vh;
-            color: #333;
+            color: var(--text-primary);
+            transition: background 0.3s ease;
         }
 
         .container {
@@ -26,8 +65,9 @@
 
         header {
             text-align: center;
-            color: white;
+            color: var(--header-text);
             margin-bottom: 30px;
+            transition: color 0.3s ease;
         }
 
         header h1 {
@@ -48,22 +88,24 @@
         }
 
         .card {
-            background: white;
+            background: var(--bg-card);
             border-radius: 16px;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+            box-shadow: var(--card-shadow);
             padding: 24px;
             margin-bottom: 20px;
+            transition: background 0.3s ease, box-shadow 0.3s ease;
         }
 
         .card h2 {
             font-size: 1.3rem;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 20px;
             padding-bottom: 10px;
-            border-bottom: 2px solid #f0f0f0;
+            border-bottom: 2px solid var(--border-color);
             display: flex;
             align-items: center;
             gap: 10px;
+            transition: color 0.3s ease, border-color 0.3s ease;
         }
 
         .card h2 span {
@@ -78,7 +120,8 @@
             display: block;
             font-weight: 600;
             margin-bottom: 8px;
-            color: #555;
+            color: var(--text-secondary);
+            transition: color 0.3s ease;
         }
 
         .form-group input[type="text"],
@@ -87,11 +130,12 @@
         .form-group textarea {
             width: 100%;
             padding: 12px 16px;
-            border: 2px solid #e0e0e0;
+            border: 2px solid var(--border-color);
             border-radius: 8px;
             font-size: 1rem;
-            transition: border-color 0.3s, box-shadow 0.3s;
-            background: #fafafa;
+            transition: border-color 0.3s, box-shadow 0.3s, background 0.3s ease, color 0.3s ease;
+            background: var(--input-bg);
+            color: var(--text-primary);
         }
 
         .form-group input[type="text"]:focus,
@@ -101,7 +145,7 @@
             outline: none;
             border-color: #667eea;
             box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-            background: white;
+            background: var(--input-focus-bg);
         }
 
         .form-group textarea {
@@ -126,9 +170,10 @@
             flex: 1;
             height: 8px;
             border-radius: 4px;
-            background: #e0e0e0;
+            background: var(--range-bg);
             outline: none;
             -webkit-appearance: none;
+            transition: background 0.3s ease;
         }
 
         .range-container input[type="range"]::-webkit-slider-thumb {
@@ -149,6 +194,12 @@
             background: #f0f2ff;
             padding: 4px 8px;
             border-radius: 4px;
+            transition: background 0.3s ease, color 0.3s ease;
+        }
+
+        body.dark-mode .range-value {
+            background: #2a2a4a;
+            color: #8a9aff;
         }
 
         .btn {
@@ -175,12 +226,13 @@
         }
 
         .btn-secondary {
-            background: #f0f0f0;
-            color: #555;
+            background: var(--tab-bg);
+            color: var(--text-secondary);
+            transition: background 0.3s ease, color 0.3s ease;
         }
 
         .btn-secondary:hover:not(:disabled) {
-            background: #e0e0e0;
+            background: var(--border-color);
         }
 
         .btn:disabled {
@@ -197,9 +249,10 @@
         .audio-player {
             margin-top: 20px;
             padding: 20px;
-            background: #f8f9ff;
+            background: var(--audio-player-bg);
             border-radius: 12px;
             display: none;
+            transition: background 0.3s ease;
         }
 
         .audio-player.show {
@@ -216,7 +269,8 @@
             justify-content: space-between;
             align-items: center;
             font-size: 0.9rem;
-            color: #666;
+            color: var(--text-tertiary);
+            transition: color 0.3s ease;
         }
 
         .status-badge {
@@ -249,10 +303,11 @@
 
         .task-item {
             padding: 16px;
-            background: #fafafa;
+            background: var(--input-bg);
             border-radius: 8px;
             margin-bottom: 10px;
             border-left: 4px solid #667eea;
+            transition: background 0.3s ease;
         }
 
         .task-item:last-child {
@@ -268,7 +323,7 @@
 
         .task-text {
             font-size: 0.9rem;
-            color: #555;
+            color: var(--text-secondary);
             margin-bottom: 8px;
             line-height: 1.4;
             overflow: hidden;
@@ -276,13 +331,21 @@
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
+            transition: color 0.3s ease;
         }
 
         .task-meta {
             display: flex;
             gap: 15px;
             font-size: 0.8rem;
-            color: #888;
+            color: var(--text-tertiary);
+            transition: color 0.3s ease;
+        }
+
+        .task-time {
+            font-size: 0.8rem;
+            color: var(--text-tertiary);
+            transition: color 0.3s ease;
         }
 
         .task-actions {
@@ -299,7 +362,8 @@
         .empty-state {
             text-align: center;
             padding: 40px 20px;
-            color: #999;
+            color: var(--text-tertiary);
+            transition: color 0.3s ease;
         }
 
         .empty-state-icon {
@@ -310,9 +374,10 @@
         .tabs {
             display: flex;
             margin-bottom: 20px;
-            background: #f0f0f0;
+            background: var(--tab-bg);
             border-radius: 8px;
             padding: 4px;
+            transition: background 0.3s ease;
         }
 
         .tab {
@@ -323,13 +388,14 @@
             cursor: pointer;
             font-weight: 500;
             transition: all 0.3s;
-            color: #666;
+            color: var(--text-tertiary);
         }
 
         .tab.active {
-            background: white;
+            background: var(--tab-active-bg);
             color: #667eea;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            transition: background 0.3s ease, color 0.3s ease;
         }
 
         .tab-content {
@@ -392,43 +458,46 @@
 
         .voice-option {
             padding: 12px;
-            border: 2px solid #e0e0e0;
+            border: 2px solid var(--border-color);
             border-radius: 8px;
             text-align: center;
             cursor: pointer;
             transition: all 0.3s;
-            background: #fafafa;
+            background: var(--input-bg);
         }
 
         .voice-option:hover {
             border-color: #667eea;
-            background: #f8f9ff;
+            background: var(--audio-player-bg);
         }
 
         .voice-option.selected {
             border-color: #667eea;
-            background: #f0f2ff;
+            background: var(--stat-bg);
             box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
         }
 
         .voice-name {
             font-weight: 600;
-            color: #333;
+            color: var(--text-primary);
             margin-bottom: 4px;
+            transition: color 0.3s ease;
         }
 
         .voice-desc {
             font-size: 0.8rem;
-            color: #888;
+            color: var(--text-tertiary);
+            transition: color 0.3s ease;
         }
 
         .stats-bar {
             display: flex;
             gap: 20px;
             padding: 15px;
-            background: #f8f9ff;
+            background: var(--stat-bg);
             border-radius: 8px;
             margin-bottom: 20px;
+            transition: background 0.3s ease;
         }
 
         .stat-item {
@@ -440,11 +509,17 @@
             font-size: 1.5rem;
             font-weight: 700;
             color: #667eea;
+            transition: color 0.3s ease;
+        }
+
+        body.dark-mode .stat-value {
+            color: #8a9aff;
         }
 
         .stat-label {
             font-size: 0.85rem;
-            color: #888;
+            color: var(--text-tertiary);
+            transition: color 0.3s ease;
         }
 
         .checkbox-group {
@@ -459,6 +534,124 @@
             cursor: pointer;
         }
 
+        .checkbox-group label {
+            color: var(--checkbox-text);
+            transition: color 0.3s ease;
+        }
+
+        .theme-toggle {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 1000;
+            background: var(--bg-card);
+            border: 2px solid var(--border-color);
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            font-size: 1.5rem;
+            transition: all 0.3s ease;
+            box-shadow: var(--card-shadow);
+        }
+
+        .theme-toggle:hover {
+            transform: scale(1.1);
+            border-color: #667eea;
+        }
+
+        .progress-container {
+            margin-top: 20px;
+            padding: 20px;
+            background: var(--audio-player-bg);
+            border-radius: 12px;
+            display: none;
+            transition: background 0.3s ease;
+        }
+
+        .progress-container.show {
+            display: block;
+        }
+
+        .progress-bar {
+            width: 100%;
+            height: 12px;
+            background: var(--range-bg);
+            border-radius: 6px;
+            overflow: hidden;
+            margin-bottom: 10px;
+            transition: background 0.3s ease;
+        }
+
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+            border-radius: 6px;
+            transition: width 0.3s ease;
+            width: 0%;
+        }
+
+        .progress-text {
+            text-align: center;
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+            transition: color 0.3s ease;
+        }
+
+        .file-upload-container {
+            margin-top: 20px;
+            padding: 20px;
+            background: var(--audio-player-bg);
+            border-radius: 12px;
+            border: 2px dashed var(--border-color);
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .file-upload-container:hover,
+        .file-upload-container.dragover {
+            border-color: #667eea;
+            background: var(--stat-bg);
+        }
+
+        .file-upload-icon {
+            font-size: 2rem;
+            margin-bottom: 10px;
+        }
+
+        .file-upload-text {
+            color: var(--text-secondary);
+            font-size: 0.95rem;
+            transition: color 0.3s ease;
+        }
+
+        .file-upload-input {
+            display: none;
+        }
+
+        .file-info {
+            margin-top: 10px;
+            padding: 10px;
+            background: var(--input-bg);
+            border-radius: 8px;
+            display: none;
+            transition: background 0.3s ease;
+        }
+
+        .file-info.show {
+            display: block;
+        }
+
+        .file-info-text {
+            color: var(--text-secondary);
+            font-size: 0.85rem;
+            transition: color 0.3s ease;
+        }
+
         @media (max-width: 900px) {
             .main-content {
                 grid-template-columns: 1fr;
@@ -475,6 +668,8 @@
     </style>
 </head>
 <body>
+    <button class="theme-toggle" id="themeToggle" title="切换主题">🌙</button>
+    
     <div class="container">
         <header>
             <h1>🐱 KittenTTS WebUI</h1>
@@ -523,6 +718,23 @@ <h2><span>🎙️</span> 实时合成</h2>
                         <textarea id="textInput" placeholder="请输入要转换为语音的文本..."></textarea>
                     </div>
 
+                    <div class="file-upload-container" id="fileUploadContainer">
+                        <div class="file-upload-icon">📁</div>
+                        <div class="file-upload-text">点击或拖拽 .txt 文件到此处上传</div>
+                        <input type="file" id="fileUploadInput" class="file-upload-input" accept=".txt">
+                    </div>
+
+                    <div class="file-info" id="fileInfo">
+                        <div class="file-info-text" id="fileInfoText"></div>
+                    </div>
+
+                    <div class="progress-container" id="progressContainer">
+                        <div class="progress-bar">
+                            <div class="progress-fill" id="progressFill"></div>
+                        </div>
+                        <div class="progress-text" id="progressText">准备中...</div>
+                    </div>
+
                     <div class="btn-group">
                         <button class="btn btn-primary" id="generateBtn">
                             <span>🎵</span> 生成语音
@@ -606,10 +818,133 @@ <h2><span>📊</span> 系统状态</h2>
     <div class="toast" id="toast"></div>
 
     <script>
+        // 全局变量
         let currentAudioUrl = null;
         let selectedVoice = 'Bruno';
         let statusUpdateInterval = null;
+        let isDarkMode = false;
+
+        // 主题切换功能
+        function initTheme() {
+            const savedTheme = localStorage.getItem('theme');
+            isDarkMode = savedTheme === 'dark';
+            updateTheme();
+        }
+
+        function toggleTheme() {
+            isDarkMode = !isDarkMode;
+            localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
+            updateTheme();
+        }
+
+        function updateTheme() {
+            const body = document.body;
+            const themeToggle = document.getElementById('themeToggle');
+            
+            if (isDarkMode) {
+                body.classList.add('dark-mode');
+                themeToggle.textContent = '☀️';
+                themeToggle.title = '切换到浅色模式';
+            } else {
+                body.classList.remove('dark-mode');
+                themeToggle.textContent = '🌙';
+                themeToggle.title = '切换到深色模式';
+            }
+        }
+
+        // 进度条功能
+        function showProgress(progress, text) {
+            const progressContainer = document.getElementById('progressContainer');
+            const progressFill = document.getElementById('progressFill');
+            const progressText = document.getElementById('progressText');
+            
+            progressContainer.classList.add('show');
+            progressFill.style.width = progress + '%';
+            progressText.textContent = text;
+        }
+
+        function hideProgress() {
+            const progressContainer = document.getElementById('progressContainer');
+            progressContainer.classList.remove('show');
+        }
+
+        function updateProgress(progress, text) {
+            const progressFill = document.getElementById('progressFill');
+            const progressText = document.getElementById('progressText');
+            
+            progressFill.style.width = progress + '%';
+            progressText.textContent = text;
+        }
+
+        // 文件上传功能
+        function initFileUpload() {
+            const uploadContainer = document.getElementById('fileUploadContainer');
+            const fileInput = document.getElementById('fileUploadInput');
+            const fileInfo = document.getElementById('fileInfo');
+            const fileInfoText = document.getElementById('fileInfoText');
+
+            uploadContainer.addEventListener('click', function() {
+                fileInput.click();
+            });
+
+            fileInput.addEventListener('change', function(e) {
+                handleFileSelect(e.target.files[0]);
+            });
+
+            uploadContainer.addEventListener('dragover', function(e) {
+                e.preventDefault();
+                uploadContainer.classList.add('dragover');
+            });
+
+            uploadContainer.addEventListener('dragleave', function() {
+                uploadContainer.classList.remove('dragover');
+            });
+
+            uploadContainer.addEventListener('drop', function(e) {
+                e.preventDefault();
+                uploadContainer.classList.remove('dragover');
+                
+                const files = e.dataTransfer.files;
+                if (files.length > 0) {
+                    handleFileSelect(files[0]);
+                }
+            });
+        }
+
+        function handleFileSelect(file) {
+            const fileInfo = document.getElementById('fileInfo');
+            const fileInfoText = document.getElementById('fileInfoText');
+            const textInput = document.getElementById('textInput');
+
+            if (!file) {
+                return;
+            }
+
+            if (!file.name.toLowerCase().endsWith('.txt')) {
+                showToast('请上传 .txt 格式的文本文件', 'error');
+                return;
+            }
+
+            const reader = new FileReader();
+            
+            reader.onload = function(e) {
+                const content = e.target.result;
+                textInput.value = content;
+                
+                fileInfoText.textContent = '已加载文件: ' + file.name + ' (' + file.size + ' 字节)';
+                fileInfo.classList.add('show');
+                
+                showToast('文件加载成功！文本已填入输入框', 'success');
+            };
+
+            reader.onerror = function() {
+                showToast('文件读取失败', 'error');
+            };
+
+            reader.readAsText(file);
+        }
 
+        // 语音选项
         const voices = [
             { id: 'Bella', name: 'Bella', desc: '女声' },
             { id: 'Jasper', name: 'Jasper', desc: '男声' },
@@ -623,37 +958,45 @@ <h2><span>📊</span> 系统状态</h2>
 
         function initVoiceGrid() {
             const grid = document.getElementById('voiceGrid');
-            grid.innerHTML = voices.map(voice => `
-                <div class="voice-option ${voice.id === selectedVoice ? 'selected' : ''}" 
-                     data-voice="${voice.id}">
-                    <div class="voice-name">${voice.name}</div>
-                    <div class="voice-desc">${voice.desc}</div>
-                </div>
-            `).join('');
-
-            grid.querySelectorAll('.voice-option').forEach(opt => {
-                opt.addEventListener('click', () => {
-                    grid.querySelectorAll('.voice-option').forEach(o => o.classList.remove('selected'));
+            grid.innerHTML = voices.map(function(voice) {
+                return `
+                    <div class="voice-option ${voice.id === selectedVoice ? 'selected' : ''}" 
+                         data-voice="${voice.id}">
+                        <div class="voice-name">${voice.name}</div>
+                        <div class="voice-desc">${voice.desc}</div>
+                    </div>
+                `;
+            }).join('');
+
+            grid.querySelectorAll('.voice-option').forEach(function(opt) {
+                opt.addEventListener('click', function() {
+                    grid.querySelectorAll('.voice-option').forEach(function(o) {
+                        o.classList.remove('selected');
+                    });
                     opt.classList.add('selected');
                     selectedVoice = opt.dataset.voice;
                 });
             });
         }
 
-        function showToast(message, type = 'success') {
+        // Toast提示
+        function showToast(message, type) {
+            if (type === undefined) type = 'success';
             const toast = document.getElementById('toast');
             toast.textContent = message;
-            toast.className = `toast ${type} show`;
-            setTimeout(() => {
+            toast.className = 'toast ' + type + ' show';
+            setTimeout(function() {
                 toast.classList.remove('show');
             }, 3000);
         }
 
+        // 时间格式化
         function formatTime(isoString) {
             const date = new Date(isoString);
             return date.toLocaleString('zh-CN');
         }
 
+        // 状态徽章类
         function getStatusBadgeClass(status) {
             const map = {
                 'pending': 'status-pending',
@@ -674,6 +1017,7 @@ <h2><span>📊</span> 系统状态</h2>
             return map[status] || status;
         }
 
+        // 生成音频
         async function generateAudio() {
             const text = document.getElementById('textInput').value.trim();
             if (!text) {
@@ -686,7 +1030,30 @@ <h2><span>📊</span> 系统状态</h2>
             btn.disabled = true;
             btn.innerHTML = '<span class="loading-spinner"></span> 生成中...';
 
+            let progressInterval = null;
+            let currentProgress = 0;
+
             try {
+                showProgress(5, '正在准备生成...');
+                
+                progressInterval = setInterval(function() {
+                    currentProgress += Math.random() * 10;
+                    if (currentProgress > 80) {
+                        currentProgress = 80;
+                    }
+                    let statusText = '';
+                    if (currentProgress < 20) {
+                        statusText = '正在加载模型...';
+                    } else if (currentProgress < 40) {
+                        statusText = '正在处理文本...';
+                    } else if (currentProgress < 60) {
+                        statusText = '正在生成语音...';
+                    } else if (currentProgress < 80) {
+                        statusText = '正在处理音频...';
+                    }
+                    updateProgress(currentProgress, statusText);
+                }, 500);
+
                 const response = await fetch('/api/generate', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
@@ -701,15 +1068,22 @@ <h2><span>📊</span> 系统状态</h2>
 
                 const data = await response.json();
 
+                if (progressInterval) {
+                    clearInterval(progressInterval);
+                    progressInterval = null;
+                }
+
+                updateProgress(100, '生成完成！');
+
                 if (response.ok) {
-                    const audioUrl = `/api/audio/${data.task.audio_file}`;
+                    const audioUrl = '/api/audio/' + data.task.audio_file;
                     const audioElement = document.getElementById('audioElement');
                     audioElement.src = audioUrl;
                     currentAudioUrl = audioUrl;
 
                     document.getElementById('audioPlayer').classList.add('show');
                     document.getElementById('audioInfoText').textContent = 
-                        `语音: ${data.task.voice} | 语速: ${data.task.speed}x | 生成时间: ${formatTime(data.task.completed_at)}`;
+                        '语音: ' + data.task.voice + ' | 语速: ' + data.task.speed + 'x | 生成时间: ' + formatTime(data.task.completed_at);
 
                     showToast('音频生成成功！');
                     updateStatus();
@@ -718,13 +1092,22 @@ <h2><span>📊</span> 系统状态</h2>
                     throw new Error(data.error || '生成失败');
                 }
             } catch (error) {
+                if (progressInterval) {
+                    clearInterval(progressInterval);
+                    progressInterval = null;
+                }
                 showToast('生成失败: ' + error.message, 'error');
             } finally {
                 btn.disabled = false;
                 btn.innerHTML = originalText;
+                
+                setTimeout(function() {
+                    hideProgress();
+                }, 1500);
             }
         }
 
+        // 添加到队列
         async function addToQueue() {
             const text = document.getElementById('textInput').value.trim();
             if (!text) {
@@ -760,6 +1143,7 @@ <h2><span>📊</span> 系统状态</h2>
             }
         }
 
+        // 加载队列
         async function loadQueue() {
             try {
                 const response = await fetch('/api/tasks');
@@ -777,23 +1161,10 @@ <h2><span>📊</span> 系统状态</h2>
                     return;
                 }
 
-                container.innerHTML = tasks.map(task => `
-                    <div class="task-item">
-                        <div class="task-header">
-                            <span class="status-badge ${getStatusBadgeClass(task.status)}">
-                                ${getStatusText(task.status)}
-                            </span>
-                            <span style="font-size: 0.8rem; color: #888;">
-                                ${formatTime(task.created_at)}
-                            </span>
-                        </div>
-                        <div class="task-text">${task.text}</div>
-                        <div class="task-meta">
-                            <span>语音: ${task.voice}</span>
-                            <span>语速: ${task.speed}x</span>
-                            <span>模型: ${task.model_id.split('/')[1]}</span>
-                        </div>
-                        ${task.status === 'completed' ? `
+                container.innerHTML = tasks.map(function(task) {
+                    let actionsHtml = '';
+                    if (task.status === 'completed') {
+                        actionsHtml = `
                             <div class="task-actions">
                                 <button class="btn btn-secondary" onclick="playTaskAudio('${task.audio_file}')">
                                     ▶️ 播放
@@ -802,19 +1173,45 @@ <h2><span>📊</span> 系统状态</h2>
                                     ⬇️ 下载
                                 </button>
                             </div>
-                        ` : ''}
-                        ${task.status === 'failed' ? `
+                        `;
+                    }
+
+                    let errorHtml = '';
+                    if (task.status === 'failed') {
+                        errorHtml = `
                             <div style="margin-top: 8px; padding: 8px; background: #f8d7da; border-radius: 4px; font-size: 0.85rem; color: #721c24;">
                                 错误: ${task.error}
                             </div>
-                        ` : ''}
-                    </div>
-                `).join('');
+                        `;
+                    }
+
+                    return `
+                        <div class="task-item">
+                            <div class="task-header">
+                                <span class="status-badge ${getStatusBadgeClass(task.status)}">
+                                    ${getStatusText(task.status)}
+                                </span>
+                                <span class="task-time">
+                                    ${formatTime(task.created_at)}
+                                </span>
+                            </div>
+                            <div class="task-text">${task.text}</div>
+                            <div class="task-meta">
+                                <span>语音: ${task.voice}</span>
+                                <span>语速: ${task.speed}x</span>
+                                <span>模型: ${task.model_id.split('/')[1]}</span>
+                            </div>
+                            ${actionsHtml}
+                            ${errorHtml}
+                        </div>
+                    `;
+                }).join('');
             } catch (error) {
                 console.error('加载队列失败:', error);
             }
         }
 
+        // 加载历史
         async function loadHistory() {
             try {
                 const response = await fetch('/api/history');
@@ -832,39 +1229,42 @@ <h2><span>📊</span> 系统状态</h2>
                     return;
                 }
 
-                container.innerHTML = history.map(item => `
-                    <div class="task-item">
-                        <div class="task-header">
-                            <span class="status-badge status-completed">已完成</span>
-                            <button class="btn btn-secondary" 
-                                    style="padding: 4px 8px; font-size: 0.75rem;"
-                                    onclick="deleteHistoryItem('${item.id}')">
-                                🗑️
-                            </button>
-                        </div>
-                        <div class="task-text">${item.text}</div>
-                        <div class="task-meta">
-                            <span>语音: ${item.voice}</span>
-                            <span>语速: ${item.speed}x</span>
-                        </div>
-                        <div style="font-size: 0.75rem; color: #888; margin-top: 8px;">
-                            ${formatTime(item.completed_at)}
-                        </div>
-                        <div class="task-actions">
-                            <button class="btn btn-secondary" onclick="playTaskAudio('${item.audio_file}')">
-                                ▶️ 播放
-                            </button>
-                            <button class="btn btn-secondary" onclick="downloadTaskAudio('${item.audio_file}')">
-                                ⬇️ 下载
-                            </button>
+                container.innerHTML = history.map(function(item) {
+                    return `
+                        <div class="task-item">
+                            <div class="task-header">
+                                <span class="status-badge status-completed">已完成</span>
+                                <button class="btn btn-secondary" 
+                                        style="padding: 4px 8px; font-size: 0.75rem;"
+                                        onclick="deleteHistoryItem('${item.id}')">
+                                    🗑️
+                                </button>
+                            </div>
+                            <div class="task-text">${item.text}</div>
+                            <div class="task-meta">
+                                <span>语音: ${item.voice}</span>
+                                <span>语速: ${item.speed}x</span>
+                            </div>
+                            <div class="task-time" style="margin-top: 8px;">
+                                ${formatTime(item.completed_at)}
+                            </div>
+                            <div class="task-actions">
+                                <button class="btn btn-secondary" onclick="playTaskAudio('${item.audio_file}')">
+                                    ▶️ 播放
+                                </button>
+                                <button class="btn btn-secondary" onclick="downloadTaskAudio('${item.audio_file}')">
+                                    ⬇️ 下载
+                                </button>
+                            </div>
                         </div>
-                    </div>
-                `).join('');
+                    `;
+                }).join('');
             } catch (error) {
                 console.error('加载历史失败:', error);
             }
         }
 
+        // 更新状态
         async function updateStatus() {
             try {
                 const response = await fetch('/api/status');
@@ -879,8 +1279,9 @@ <h2><span>📊</span> 系统状态</h2>
             }
         }
 
+        // 播放任务音频
         function playTaskAudio(filename) {
-            const audioUrl = `/api/audio/${filename}`;
+            const audioUrl = '/api/audio/' + filename;
             const audioElement = document.getElementById('audioElement');
             audioElement.src = audioUrl;
             currentAudioUrl = audioUrl;
@@ -889,19 +1290,21 @@ <h2><span>📊</span> 系统状态</h2>
             showToast('正在播放...');
         }
 
+        // 下载任务音频
         function downloadTaskAudio(filename) {
             const link = document.createElement('a');
-            link.href = `/api/audio/${filename}`;
-            link.download = `kittentts_${Date.now()}.wav`;
+            link.href = '/api/audio/' + filename;
+            link.download = 'kittentts_' + Date.now() + '.wav';
             link.click();
             showToast('开始下载...');
         }
 
+        // 删除历史项
         async function deleteHistoryItem(id) {
             if (!confirm('确定要删除这条记录吗？')) return;
             
             try {
-                const response = await fetch(`/api/history/${id}`, { method: 'DELETE' });
+                const response = await fetch('/api/history/' + id, { method: 'DELETE' });
                 if (response.ok) {
                     showToast('已删除');
                     loadHistory();
@@ -912,6 +1315,7 @@ <h2><span>📊</span> 系统状态</h2>
             }
         }
 
+        // 清空历史
         async function clearHistory() {
             if (!confirm('确定要清空所有历史记录吗？这将同时删除所有音频文件。')) return;
             
@@ -927,20 +1331,26 @@ <h2><span>📊</span> 系统状态</h2>
             }
         }
 
+        // 下载当前音频
         function downloadCurrentAudio() {
             if (!currentAudioUrl) return;
             const link = document.createElement('a');
             link.href = currentAudioUrl;
-            link.download = `kittentts_${Date.now()}.wav`;
+            link.download = 'kittentts_' + Date.now() + '.wav';
             link.click();
             showToast('开始下载...');
         }
 
+        // 初始化标签页
         function initTabs() {
-            document.querySelectorAll('.tab').forEach(tab => {
-                tab.addEventListener('click', () => {
-                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-                    document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
+            document.querySelectorAll('.tab').forEach(function(tab) {
+                tab.addEventListener('click', function() {
+                    document.querySelectorAll('.tab').forEach(function(t) {
+                        t.classList.remove('active');
+                    });
+                    document.querySelectorAll('.tab-content').forEach(function(c) {
+                        c.classList.remove('active');
+                    });
                     
                     tab.classList.add('active');
                     document.getElementById(tab.dataset.tab + 'Tab').classList.add('active');
@@ -948,26 +1358,31 @@ <h2><span>📊</span> 系统状态</h2>
             });
         }
 
+        // 初始化语速滑块
         function initSpeedRange() {
             const range = document.getElementById('speedRange');
             const valueDisplay = document.getElementById('speedValue');
             
-            range.addEventListener('input', () => {
+            range.addEventListener('input', function() {
                 valueDisplay.textContent = range.value + 'x';
             });
         }
 
-        document.addEventListener('DOMContentLoaded', () => {
+        // 页面加载完成后初始化
+        document.addEventListener('DOMContentLoaded', function() {
+            initTheme();
             initVoiceGrid();
             initTabs();
             initSpeedRange();
+            initFileUpload();
 
+            document.getElementById('themeToggle').addEventListener('click', toggleTheme);
             document.getElementById('generateBtn').addEventListener('click', generateAudio);
             document.getElementById('addToQueueBtn').addEventListener('click', addToQueue);
             document.getElementById('downloadBtn').addEventListener('click', downloadCurrentAudio);
             document.getElementById('clearHistoryBtn').addEventListener('click', clearHistory);
 
-            document.getElementById('textInput').addEventListener('keydown', (e) => {
+            document.getElementById('textInput').addEventListener('keydown', function(e) {
                 if (e.ctrlKey && e.key === 'Enter') {
                     generateAudio();
                 }
@@ -977,7 +1392,7 @@ <h2><span>📊</span> 系统状态</h2>
             loadQueue();
             loadHistory();
 
-            statusUpdateInterval = setInterval(() => {
+            statusUpdateInterval = setInterval(function() {
                 updateStatus();
                 loadQueue();
             }, 3000);

From b52e4f3ae6d6fa619c03bcd712d25bedc2097569 Mon Sep 17 00:00:00 2001
From: Unizzr <1920158711@qq.com>
Date: Tue, 21 Apr 2026 08:50:25 +0800
Subject: [PATCH 3/3] =?UTF-8?q?feat(tts):=20=E6=B7=BB=E5=8A=A0=E4=B8=AD?=
 =?UTF-8?q?=E6=96=87=E6=94=AF=E6=8C=81=E5=8F=8A=E5=AD=97=E5=B9=95=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增中文文本处理模块，支持中文转拼音
- 添加字幕生成功能，包含原文、拼音及分段信息
- 更新前端界面显示字幕，支持原文/拼音切换
- 修改API接口返回字幕信息
- 添加pypinyin和cn2an依赖
---
 kittentts/chinese_processor.py | 411 +++++++++++++++++++++++
 kittentts/get_model.py         |  35 +-
 kittentts/onnx_model.py        | 135 +++++++-
 requirements.txt               |   2 +
 webui/app.py                   |  38 ++-
 webui/history.json             | 592 +++++++++++++++++++++++++++++++++
 webui/templates/index.html     | 248 +++++++++++++-
 7 files changed, 1437 insertions(+), 24 deletions(-)
 create mode 100644 kittentts/chinese_processor.py

diff --git a/kittentts/chinese_processor.py b/kittentts/chinese_processor.py
new file mode 100644
index 0000000..93f6f14
--- /dev/null
+++ b/kittentts/chinese_processor.py
@@ -0,0 +1,411 @@
+"""
+chinese_processor.py
+Chinese text processing module for KittenTTS.
+Converts Chinese text to pinyin for speech synthesis.
+"""
+
+import re
+from typing import List, Tuple, Optional
+
+try:
+    from pypinyin import pinyin, Style
+    PINYIN_AVAILABLE = True
+except ImportError:
+    PINYIN_AVAILABLE = False
+
+try:
+    import cn2an
+    CN2AN_AVAILABLE = True
+except ImportError:
+    CN2AN_AVAILABLE = False
+
+
+CHINESE_PUNCTUATION = {
+    '。': '.',
+    '，': ',',
+    '、': ',',
+    '；': ';',
+    '：': ':',
+    '？': '?',
+    '！': '!',
+    '（': '(',
+    '）': ')',
+    '【': '[',
+    '】': ']',
+    '「': '"',
+    '」': '"',
+    '『': '"',
+    '』': '"',
+    '《': '"',
+    '》': '"',
+    '…': '...',
+    '—': '-',
+    '～': '~',
+}
+
+PINYIN_TONE_MAP = {
+    'ā': 'a', 'á': 'a', 'ǎ': 'a', 'à': 'a',
+    'ē': 'e', 'é': 'e', 'ě': 'e', 'è': 'e',
+    'ī': 'i', 'í': 'i', 'ǐ': 'i', 'ì': 'i',
+    'ō': 'o', 'ó': 'o', 'ǒ': 'o', 'ò': 'o',
+    'ū': 'u', 'ú': 'u', 'ǔ': 'u', 'ù': 'u',
+    'ǖ': 'v', 'ǘ': 'v', 'ǚ': 'v', 'ǜ': 'v',
+    'ü': 'v',
+}
+
+CHINESE_DIGITS = {
+    '0': '零', '1': '一', '2': '二', '3': '三', '4': '四',
+    '5': '五', '6': '六', '7': '七', '8': '八', '9': '九',
+}
+
+CHINESE_UNITS = ['', '十', '百', '千', '万', '十万', '百万', '千万', '亿']
+
+
+def has_chinese(text: str) -> bool:
+    """Check if text contains Chinese characters."""
+    return bool(re.search(r'[\u4e00-\u9fff]', text))
+
+
+def is_chinese_char(char: str) -> bool:
+    """Check if a character is a Chinese character."""
+    return '\u4e00' <= char <= '\u9fff'
+
+
+def normalize_chinese_punctuation(text: str) -> str:
+    """Convert Chinese punctuation to English punctuation."""
+    for cn_punct, en_punct in CHINESE_PUNCTUATION.items():
+        text = text.replace(cn_punct, en_punct)
+    return text
+
+
+def number_to_chinese_words(n: int) -> str:
+    """Convert an integer to Chinese word representation.
+    
+    Examples:
+        123 → "一百二十三"
+        10000 → "一万"
+        0 → "零"
+    """
+    if n == 0:
+        return "零"
+    
+    if n < 0:
+        return "负" + number_to_chinese_words(-n)
+    
+    if CN2AN_AVAILABLE:
+        try:
+            return cn2an.an2cn(n)
+        except:
+            pass
+    
+    digits = list(str(n))
+    length = len(digits)
+    result = []
+    
+    for i, digit in enumerate(digits):
+        pos = length - i - 1
+        d = int(digit)
+        
+        if d != 0:
+            result.append(CHINESE_DIGITS[str(d)])
+            if pos > 0:
+                result.append(CHINESE_UNITS[pos])
+        else:
+            if result and result[-1] != '零':
+                if i < length - 1 and any(int(digits[j]) != 0 for j in range(i + 1, length)):
+                    result.append('零')
+    
+    chinese_str = ''.join(result)
+    
+    if length == 2 and digits[0] == '1':
+        chinese_str = chinese_str[1:] if chinese_str.startswith('一') else chinese_str
+    
+    return chinese_str
+
+
+def float_to_chinese_words(value, decimal_sep: str = "点") -> str:
+    """Convert a float to Chinese words.
+    
+    Examples:
+        3.14 → "三点一四"
+        -0.5 → "负零点五"
+    """
+    text = value if isinstance(value, str) else f"{value}"
+    negative = text.startswith("-")
+    if negative:
+        text = text[1:]
+    
+    if "." in text:
+        int_part, dec_part = text.split(".", 1)
+        int_words = number_to_chinese_words(int(int_part)) if int_part else "零"
+        dec_words = "".join(CHINESE_DIGITS.get(d, d) for d in dec_part)
+        result = f"{int_words}{decimal_sep}{dec_words}"
+    else:
+        result = number_to_chinese_words(int(text))
+    
+    return f"负{result}" if negative else result
+
+
+def chinese_number_to_words(text: str) -> str:
+    """Replace Arabic numbers in Chinese context with Chinese words.
+    
+    Examples:
+        "我有123个苹果" → "我有一百二十三个苹果"
+        "价格是3.14元" → "价格是三点一四元"
+    """
+    def replace_int(match):
+        num = int(match.group(0))
+        return number_to_chinese_words(num)
+    
+    def replace_float(match):
+        raw = match.group(0)
+        return float_to_chinese_words(raw)
+    
+    text = re.sub(r'(?<![a-zA-Z])-?\d+\.\d+', replace_float, text)
+    text = re.sub(r'(?<![a-zA-Z])-?\d+', replace_int, text)
+    
+    return text
+
+
+def chinese_to_pinyin(text: str, tone: bool = False) -> str:
+    """Convert Chinese text to pinyin.
+    
+    Args:
+        text: Chinese text
+        tone: If True, keep tone marks (for display/subtitles)
+    
+    Returns:
+        Pinyin string
+    """
+    if not PINYIN_AVAILABLE:
+        return text
+    
+    result = []
+    
+    if tone:
+        pinyin_list = pinyin(text, style=Style.TONE)
+    else:
+        pinyin_list = pinyin(text, style=Style.NORMAL)
+    
+    for i, py in enumerate(pinyin_list):
+        if not py:
+            continue
+        p = py[0]
+        
+        if not tone:
+            p = ''.join(PINYIN_TONE_MAP.get(c, c) for c in p)
+        
+        if i > 0 and result:
+            last_char = result[-1]
+            if last_char and last_char[-1].isalpha() and p[0].isalpha():
+                result.append(' ')
+        
+        result.append(p)
+    
+    return ''.join(result)
+
+
+def split_mixed_text(text: str) -> List[Tuple[str, str]]:
+    """Split mixed Chinese-English text into segments.
+    
+    Returns:
+        List of (segment, type) tuples, where type is 'chinese' or 'english'
+    """
+    segments = []
+    current_segment = []
+    current_type = None
+    
+    for char in text:
+        if is_chinese_char(char):
+            char_type = 'chinese'
+        elif char.isalpha() or char.isdigit():
+            char_type = 'english'
+        else:
+            char_type = 'punctuation'
+        
+        if char_type == 'punctuation':
+            if current_segment:
+                segments.append((''.join(current_segment), current_type))
+                current_segment = []
+                current_type = None
+            segments.append((char, 'punctuation'))
+        else:
+            if current_type is not None and current_type != char_type:
+                segments.append((''.join(current_segment), current_type))
+                current_segment = []
+            current_segment.append(char)
+            current_type = char_type
+    
+    if current_segment:
+        segments.append((''.join(current_segment), current_type))
+    
+    return segments
+
+
+def process_mixed_text(text: str, for_synthesis: bool = True) -> Tuple[str, str]:
+    """Process mixed Chinese-English text for TTS.
+    
+    Args:
+        text: Input text (may contain Chinese, English, numbers)
+        for_synthesis: If True, convert Chinese to pinyin without tones
+                       If False, keep original for subtitles
+    
+    Returns:
+        Tuple of (processed_text, original_text_for_subtitles)
+    """
+    original_text = text
+    
+    text = normalize_chinese_punctuation(text)
+    
+    if for_synthesis:
+        segments = split_mixed_text(text)
+        processed_parts = []
+        
+        for i, (segment, seg_type) in enumerate(segments):
+            if seg_type == 'chinese':
+                if PINYIN_AVAILABLE:
+                    processed_parts.append((' ' + chinese_to_pinyin(segment, tone=False) + ' ', seg_type))
+                else:
+                    processed_parts.append((segment, seg_type))
+            elif seg_type == 'english':
+                processed_parts.append((' ' + segment + ' ', seg_type))
+            else:
+                processed_parts.append((segment, seg_type))
+        
+        processed_text = ''.join(p[0] for p in processed_parts)
+        processed_text = re.sub(r'\s+', ' ', processed_text).strip()
+    else:
+        processed_text = text
+    
+    return processed_text, original_text
+
+
+def extract_subtitle_info(text: str) -> dict:
+    """Extract subtitle information from text.
+    
+    Returns:
+        Dictionary containing:
+        - original: Original text
+        - pinyin: Pinyin transcription (if Chinese)
+        - segments: List of segments with type and content
+    """
+    segments = split_mixed_text(text)
+    
+    pinyin_segments = []
+    for segment, seg_type in segments:
+        if seg_type == 'chinese' and PINYIN_AVAILABLE:
+            pinyin_segments.append((chinese_to_pinyin(segment, tone=True), 'chinese'))
+        else:
+            pinyin_segments.append((segment, seg_type))
+    
+    full_pinyin = ''.join(s[0] for s in pinyin_segments)
+    
+    return {
+        'original': text,
+        'pinyin': full_pinyin,
+        'segments': [{'content': s[0], 'type': s[1], 'pinyin': p[0] if s[1] == 'chinese' else s[0]} 
+                     for s, p in zip(segments, pinyin_segments)]
+    }
+
+
+class ChineseTextProcessor:
+    """Chinese text processor for KittenTTS.
+    
+    This class handles:
+    - Chinese text detection
+    - Chinese punctuation normalization
+    - Chinese number conversion
+    - Chinese to pinyin conversion
+    - Mixed Chinese-English text processing
+    """
+    
+    def __init__(self):
+        self.pinyin_available = PINYIN_AVAILABLE
+        self.cn2an_available = CN2AN_AVAILABLE
+    
+    def has_chinese(self, text: str) -> bool:
+        """Check if text contains Chinese characters."""
+        return has_chinese(text)
+    
+    def normalize_punctuation(self, text: str) -> str:
+        """Convert Chinese punctuation to English."""
+        return normalize_chinese_punctuation(text)
+    
+    def convert_numbers(self, text: str) -> str:
+        """Convert Arabic numbers to Chinese words in Chinese context."""
+        return chinese_number_to_words(text)
+    
+    def to_pinyin(self, text: str, tone: bool = False) -> str:
+        """Convert Chinese text to pinyin."""
+        return chinese_to_pinyin(text, tone=tone)
+    
+    def process(self, text: str, convert_pinyin: bool = True) -> Tuple[str, dict]:
+        """Process text for TTS synthesis.
+        
+        Args:
+            text: Input text
+            convert_pinyin: If True, convert Chinese to pinyin
+        
+        Returns:
+            Tuple of (processed_text, subtitle_info)
+        """
+        subtitle_info = extract_subtitle_info(text)
+        
+        if convert_pinyin and self.has_chinese(text):
+            processed_text, _ = process_mixed_text(text, for_synthesis=True)
+        else:
+            processed_text = text
+        
+        return processed_text, subtitle_info
+
+
+def get_chinese_processor() -> ChineseTextProcessor:
+    """Get a Chinese text processor instance."""
+    return ChineseTextProcessor()
+
+
+def check_dependencies() -> dict:
+    """Check if required dependencies for Chinese support are installed.
+    
+    Returns:
+        Dictionary with dependency status
+    """
+    return {
+        'pypinyin': PINYIN_AVAILABLE,
+        'cn2an': CN2AN_AVAILABLE,
+        'full_support': PINYIN_AVAILABLE and CN2AN_AVAILABLE,
+    }
+
+
+if __name__ == "__main__":
+    print("=" * 60)
+    print("Chinese Text Processor Demo")
+    print("=" * 60)
+    
+    deps = check_dependencies()
+    print(f"\nDependencies:")
+    print(f"  pypinyin: {'✓' if deps['pypinyin'] else '✗'}")
+    print(f"  cn2an: {'✓' if deps['cn2an'] else '✗'}")
+    
+    processor = ChineseTextProcessor()
+    
+    test_cases = [
+        "你好，世界！",
+        "我有123个苹果。",
+        "价格是3.14元。",
+        "Hello，我是KittenTTS！",
+        "今天天气真好，气温是25度。",
+        "这是一个mixed test：中文和English混合。",
+    ]
+    
+    print("\n" + "=" * 60)
+    print("Test Cases")
+    print("=" * 60)
+    
+    for text in test_cases:
+        print(f"\nInput: {text}")
+        print(f"Has Chinese: {processor.has_chinese(text)}")
+        
+        processed, subtitle = processor.process(text)
+        print(f"Processed: {processed}")
+        print(f"Pinyin: {subtitle['pinyin']}")
diff --git a/kittentts/get_model.py b/kittentts/get_model.py
index 8af5561..d0d9463 100644
--- a/kittentts/get_model.py
+++ b/kittentts/get_model.py
@@ -1,5 +1,7 @@
 import json
 import os
+from typing import Dict, Any, Tuple
+import numpy as np
 from huggingface_hub import hf_hub_download
 from .onnx_model import KittenTTS_1_Onnx
 
@@ -14,16 +16,14 @@ def __init__(self, model_name="KittenML/kitten-tts-nano-0.8", cache_dir=None, ba
             model_name: Hugging Face repository ID or model name
             cache_dir: Directory to cache downloaded files
         """
-        # Handle different model name formats
         if "/" not in model_name:
-            # If just model name provided, assume it's from KittenML
             repo_id = f"KittenML/{model_name}"
         else:
             repo_id = model_name
             
         self.model = download_from_huggingface(repo_id=repo_id, cache_dir=cache_dir, backend=backend)
     
-    def generate(self, text, voice="expr-voice-5-m", speed=1.0, clean_text=False):
+    def generate(self, text, voice="expr-voice-5-m", speed=1.0, clean_text=False) -> np.ndarray:
         """Generate audio from text.
         
         Args:
@@ -37,6 +37,26 @@ def generate(self, text, voice="expr-voice-5-m", speed=1.0, clean_text=False):
         print(f"Generating audio for text: {text}")
         return self.model.generate(text, voice=voice, speed=speed, clean_text=clean_text)
 
+    def generate_with_subtitles(self, text, voice="expr-voice-5-m", speed=1.0, clean_text=False) -> Tuple[np.ndarray, Dict[str, Any]]:
+        """Generate audio with subtitle information.
+        
+        Args:
+            text: Input text to synthesize
+            voice: Voice to use for synthesis
+            speed: Speech speed (1.0 = normal)
+            clean_text: If true, preprocess text
+            
+        Returns:
+            Tuple of (audio_data, subtitle_info)
+            subtitle_info contains:
+                - original: Original text
+                - pinyin: Pinyin transcription (if Chinese)
+                - processed: Processed text used for synthesis
+                - language: Detected language ('chinese' or 'english')
+                - segments: Detailed segment information
+        """
+        return self.model.generate_with_subtitles(text, voice=voice, speed=speed, clean_text=clean_text)
+
     def generate_stream(self, text, voice="expr-voice-5-m", speed=1.0, clean_text=False):
         """Generate audio as a stream of chunks.
 
@@ -45,7 +65,7 @@ def generate_stream(self, text, voice="expr-voice-5-m", speed=1.0, clean_text=Fa
         """
         yield from self.model.generate_stream(text, voice=voice, speed=speed, clean_text=clean_text)
 
-    def generate_to_file(self, text, output_path, voice="expr-voice-5-m", speed=1.0, sample_rate=24000):
+    def generate_to_file(self, text, output_path, voice="expr-voice-5-m", speed=1.0, sample_rate=24000) -> Dict[str, Any]:
         """Generate audio from text and save to file.
         
         Args:
@@ -54,6 +74,9 @@ def generate_to_file(self, text, output_path, voice="expr-voice-5-m", speed=1.0,
             voice: Voice to use for synthesis
             speed: Speech speed (1.0 = normal)
             sample_rate: Audio sample rate
+            
+        Returns:
+            Dictionary containing subtitle information
         """
         return self.model.generate_to_file(text, output_path, voice=voice, speed=speed, sample_rate=sample_rate)
     
@@ -73,21 +96,18 @@ def download_from_huggingface(repo_id="KittenML/kitten-tts-nano-0.1", cache_dir=
     Returns:
         KittenTTS_1_Onnx: Instantiated model ready for use
     """
-    # Download config file first
     config_path = hf_hub_download(
         repo_id=repo_id,
         filename="config.json",
         cache_dir=cache_dir
     )
     
-    # Load config
     with open(config_path, 'r') as f:
         config = json.load(f)
 
     if config.get("type") not in ["ONNX1", "ONNX2"]:
         raise ValueError("Unsupported model type.")
 
-    # Download model and voices files based on config
     model_path = hf_hub_download(
         repo_id=repo_id,
         filename=config["model_file"],
@@ -100,7 +120,6 @@ def download_from_huggingface(repo_id="KittenML/kitten-tts-nano-0.1", cache_dir=
         cache_dir=cache_dir
     )
     
-    # Instantiate and return model
     model = KittenTTS_1_Onnx(model_path=model_path, voices_path=voices_path, speed_priors=config.get("speed_priors", {}) , voice_aliases=config.get("voice_aliases", {}), backend=backend)
     
     return model
diff --git a/kittentts/onnx_model.py b/kittentts/onnx_model.py
index 26fb3a9..d50ebc5 100644
--- a/kittentts/onnx_model.py
+++ b/kittentts/onnx_model.py
@@ -7,8 +7,16 @@
 import phonemizer
 import soundfile as sf
 import onnxruntime as ort
+from typing import Optional, Dict, Any, Tuple
 from .preprocess import TextPreprocessor
 
+try:
+    from .chinese_processor import ChineseTextProcessor, has_chinese, extract_subtitle_info
+    CHINESE_PROCESSOR_AVAILABLE = True
+except ImportError:
+    CHINESE_PROCESSOR_AVAILABLE = False
+
+
 def basic_english_tokenize(text):
     """Basic English tokenizer that splits on whitespace and punctuation."""
     import re
@@ -40,7 +48,6 @@ def chunk_text(text, max_len=400):
         if len(sentence) <= max_len:
             chunks.append(ensure_punctuation(sentence))
         else:
-            # Split long sentences by words
             words = sentence.split()
             temp_chunk = ""
             for word in words:
@@ -111,7 +118,6 @@ def __init__(self, model_path="kitten_tts_nano_preview.onnx", voices_path="voice
         self.text_cleaner = TextCleaner()
         self.speed_priors = speed_priors
         
-        # Available voices
         self.available_voices = [
             'expr-voice-2-m', 'expr-voice-2-f', 'expr-voice-3-m', 'expr-voice-3-f', 
             'expr-voice-4-m', 'expr-voice-4-f', 'expr-voice-5-m', 'expr-voice-5-f'
@@ -120,6 +126,33 @@ def __init__(self, model_path="kitten_tts_nano_preview.onnx", voices_path="voice
         self.voice_aliases = voice_aliases
 
         self.preprocessor = TextPreprocessor(remove_punctuation=False)
+        
+        self.chinese_processor = None
+        if CHINESE_PROCESSOR_AVAILABLE:
+            self.chinese_processor = ChineseTextProcessor()
+    
+    def _detect_language(self, text: str) -> str:
+        """Detect if text contains Chinese characters.
+        
+        Returns:
+            'chinese' if contains Chinese, 'english' otherwise
+        """
+        if CHINESE_PROCESSOR_AVAILABLE and self.chinese_processor:
+            if self.chinese_processor.has_chinese(text):
+                return 'chinese'
+        return 'english'
+    
+    def _process_chinese_text(self, text: str) -> Tuple[str, Dict[str, Any]]:
+        """Process Chinese text for synthesis.
+        
+        Returns:
+            Tuple of (processed_text, subtitle_info)
+        """
+        if not CHINESE_PROCESSOR_AVAILABLE or not self.chinese_processor:
+            return text, {'original': text, 'pinyin': text, 'segments': []}
+        
+        processed_text, subtitle_info = self.chinese_processor.process(text, convert_pinyin=True)
+        return processed_text, subtitle_info
     
     def _prepare_inputs(self, text: str, voice: str, speed: float = 1.0) -> dict:
         """Prepare ONNX model inputs from text and voice parameters."""
@@ -132,15 +165,12 @@ def _prepare_inputs(self, text: str, voice: str, speed: float = 1.0) -> dict:
         if voice in self.speed_priors:
             speed = speed * self.speed_priors[voice]
         
-        # Phonemize the input text
         phonemes_list = self.phonemizer.phonemize([text])
         
-        # Process phonemes to get token IDs
         phonemes = basic_english_tokenize(phonemes_list[0])
         phonemes = ' '.join(phonemes)
         tokens = self.text_cleaner(phonemes)
         
-        # Add start and end tokens
         tokens.insert(0, 0)
         tokens.append(10)
         tokens.append(0)
@@ -156,12 +186,88 @@ def _prepare_inputs(self, text: str, voice: str, speed: float = 1.0) -> dict:
         }
     
     def generate(self, text: str, voice: str = "expr-voice-5-m", speed: float = 1.0, clean_text: bool=True) -> np.ndarray:
-        out_chunks = []
+        """Generate audio from text.
+        
+        Args:
+            text: Input text to synthesize
+            voice: Voice to use for synthesis
+            speed: Speech speed (1.0 = normal)
+            clean_text: If true, preprocess text
+        
+        Returns:
+            Audio data as numpy array
+        """
+        original_text = text
+        
+        language = self._detect_language(text)
+        
+        subtitle_info = {'original': original_text, 'pinyin': '', 'segments': []}
+        
+        if language == 'chinese':
+            text, subtitle_info = self._process_chinese_text(text)
+            clean_text = False
+        
         if clean_text:
             text = self.preprocessor(text)
+        
+        out_chunks = []
         for text_chunk in chunk_text(text):
             out_chunks.append(self.generate_single_chunk(text_chunk, voice, speed))
+        
         return np.concatenate(out_chunks, axis=-1)
+    
+    def generate_with_subtitles(self, text: str, voice: str = "expr-voice-5-m", speed: float = 1.0, clean_text: bool=True) -> Tuple[np.ndarray, Dict[str, Any]]:
+        """Generate audio with subtitle information.
+        
+        Args:
+            text: Input text to synthesize
+            voice: Voice to use for synthesis
+            speed: Speech speed (1.0 = normal)
+            clean_text: If true, preprocess text
+        
+        Returns:
+            Tuple of (audio_data, subtitle_info)
+            subtitle_info contains:
+                - original: Original text
+                - pinyin: Pinyin transcription (if Chinese)
+                - processed: Processed text used for synthesis
+                - language: Detected language ('chinese' or 'english')
+                - segments: Detailed segment information
+        """
+        original_text = text
+        
+        language = self._detect_language(text)
+        
+        processed_text = text
+        subtitle_info = {
+            'original': original_text,
+            'pinyin': '',
+            'processed': '',
+            'language': language,
+            'segments': []
+        }
+        
+        if language == 'chinese':
+            processed_text, chinese_subtitle = self._process_chinese_text(text)
+            subtitle_info['pinyin'] = chinese_subtitle.get('pinyin', '')
+            subtitle_info['segments'] = chinese_subtitle.get('segments', [])
+            clean_text = False
+        else:
+            if CHINESE_PROCESSOR_AVAILABLE:
+                subtitle_info['segments'] = extract_subtitle_info(text).get('segments', [])
+        
+        if clean_text:
+            processed_text = self.preprocessor(processed_text)
+        
+        subtitle_info['processed'] = processed_text
+        
+        out_chunks = []
+        for text_chunk in chunk_text(processed_text):
+            out_chunks.append(self.generate_single_chunk(text_chunk, voice, speed))
+        
+        audio = np.concatenate(out_chunks, axis=-1)
+        
+        return audio, subtitle_info
 
     def generate_stream(self, text: str, voice: str = "expr-voice-5-m", speed: float = 1.0, clean_text: bool = True):
         """Generate audio chunk-by-chunk as a generator.
@@ -169,8 +275,15 @@ def generate_stream(self, text: str, voice: str = "expr-voice-5-m", speed: float
         Yields:
             numpy.ndarray: Audio data for each text chunk.
         """
+        language = self._detect_language(text)
+        
+        if language == 'chinese':
+            text, _ = self._process_chinese_text(text)
+            clean_text = False
+        
         if clean_text:
             text = self.preprocessor(text)
+        
         for text_chunk in chunk_text(text):
             yield self.generate_single_chunk(text_chunk, voice, speed)
 
@@ -189,13 +302,12 @@ def generate_single_chunk(self, text: str, voice: str = "expr-voice-5-m", speed:
         
         outputs = self.session.run(None, onnx_inputs)
         
-        # Trim audio
         audio = outputs[0][..., :-5000]
 
         return audio
     
     def generate_to_file(self, text: str, output_path: str, voice: str = "expr-voice-5-m", 
-                          speed: float = 1.0, sample_rate: int = 24000, clean_text: bool=True) -> None:
+                          speed: float = 1.0, sample_rate: int = 24000, clean_text: bool=True) -> Dict[str, Any]:
         """Synthesize speech and save to file.
         
         Args:
@@ -205,8 +317,11 @@ def generate_to_file(self, text: str, output_path: str, voice: str = "expr-voice
             speed: Speech speed (1.0 = normal)
             sample_rate: Audio sample rate
             clean_text: If true, it will cleanup the text. Eg. replace numbers with words.
+        
+        Returns:
+            Dictionary containing subtitle information
         """
-        audio = self.generate(text, voice, speed, clean_text=clean_text)
+        audio, subtitle_info = self.generate_with_subtitles(text, voice, speed, clean_text=clean_text)
         sf.write(output_path, audio, sample_rate)
         print(f"Audio saved to {output_path}")
-
+        return subtitle_info
diff --git a/requirements.txt b/requirements.txt
index abbfef4..2db56d2 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -4,3 +4,5 @@ onnxruntime
 soundfile
 numpy
 huggingface_hub
+pypinyin
+cn2an
diff --git a/webui/app.py b/webui/app.py
index 3051607..c365d8e 100644
--- a/webui/app.py
+++ b/webui/app.py
@@ -9,11 +9,9 @@
 
 app = Flask(__name__)
 
-# 禁用模板缓存，确保每次都加载最新的模板
 app.config['TEMPLATES_AUTO_RELOAD'] = True
 app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
 
-# 确保模板不会被缓存
 @app.after_request
 def add_header(response):
     response.headers['Cache-Control'] = 'no-store, no-cache, must-revalidate, post-check=0, pre-check=0'
@@ -76,7 +74,8 @@ def process_task(task):
     try:
         task['status'] = 'processing'
         model = load_model(task['model_id'])
-        audio = model.generate(
+        
+        audio, subtitle_info = model.generate_with_subtitles(
             text=task['text'],
             voice=task['voice'],
             speed=task['speed'],
@@ -91,6 +90,7 @@ def process_task(task):
         task['status'] = 'completed'
         task['audio_file'] = audio_filename
         task['completed_at'] = datetime.now().isoformat()
+        task['subtitle_info'] = subtitle_info
         
         with TASK_QUEUE_LOCK:
             for i, t in enumerate(TASK_QUEUE):
@@ -169,7 +169,7 @@ def generate():
             return jsonify({'error': '文本不能为空'}), 400
         
         model = load_model(model_id)
-        audio = model.generate(
+        audio, subtitle_info = model.generate_with_subtitles(
             text=text,
             voice=voice,
             speed=speed,
@@ -185,6 +185,7 @@ def generate():
         task = {
             'id': task_id,
             'text': text[:100] + ('...' if len(text) > 100 else ''),
+            'original_text': text,
             'model_id': model_id,
             'voice': voice,
             'speed': speed,
@@ -192,6 +193,7 @@ def generate():
             'audio_file': audio_filename,
             'created_at': datetime.now().isoformat(),
             'completed_at': datetime.now().isoformat(),
+            'subtitle_info': subtitle_info,
         }
         
         add_to_history(task)
@@ -199,9 +201,12 @@ def generate():
         return jsonify({
             'success': True,
             'task': task,
-            'audio_url': f'/api/audio/{audio_filename}'
+            'audio_url': f'/api/audio/{audio_filename}',
+            'subtitle_info': subtitle_info
         })
     except Exception as e:
+        import traceback
+        traceback.print_exc()
         return jsonify({'error': str(e)}), 500
 
 @app.route('/api/tasks', methods=['POST'])
@@ -221,6 +226,7 @@ def add_task():
         task = {
             'id': task_id,
             'text': text,
+            'original_text': text,
             'model_id': model_id,
             'voice': voice,
             'speed': speed,
@@ -286,6 +292,28 @@ def get_audio(filename):
         return send_file(audio_path, mimetype='audio/wav')
     return jsonify({'error': '音频文件不存在'}), 404
 
+@app.route('/api/subtitle/<task_id>', methods=['GET'])
+def get_subtitle(task_id):
+    with HISTORY_LOCK:
+        for item in HISTORY:
+            if item['id'] == task_id:
+                subtitle_info = item.get('subtitle_info', {})
+                return jsonify({
+                    'success': True,
+                    'subtitle_info': subtitle_info
+                })
+    
+    with TASK_QUEUE_LOCK:
+        for task in TASK_QUEUE:
+            if task['id'] == task_id:
+                subtitle_info = task.get('subtitle_info', {})
+                return jsonify({
+                    'success': True,
+                    'subtitle_info': subtitle_info
+                })
+    
+    return jsonify({'error': '任务不存在'}), 404
+
 @app.route('/api/status', methods=['GET'])
 def get_status():
     model_info = {}
diff --git a/webui/history.json b/webui/history.json
index f50c4d9..ee91ed1 100644
--- a/webui/history.json
+++ b/webui/history.json
@@ -1,4 +1,596 @@
 [
+  {
+    "id": "1063c1f3-ef80-4913-8130-83ae531be3dc",
+    "text": "123456789",
+    "original_text": "123456789",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bella",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "1063c1f3-ef80-4913-8130-83ae531be3dc.wav",
+    "created_at": "2026-04-21T08:48:27.852373",
+    "completed_at": "2026-04-21T08:48:27.852373",
+    "subtitle_info": {
+      "original": "123456789",
+      "pinyin": "",
+      "processed": "123456789",
+      "language": "english",
+      "segments": [
+        {
+          "content": "123456789",
+          "type": "english",
+          "pinyin": "123456789"
+        }
+      ]
+    }
+  },
+  {
+    "id": "5746a994-586b-45b2-a64b-6a46430b07be",
+    "text": "123456789",
+    "original_text": "123456789",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bella",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "5746a994-586b-45b2-a64b-6a46430b07be.wav",
+    "created_at": "2026-04-21T08:48:08.911053",
+    "completed_at": "2026-04-21T08:48:08.911053",
+    "subtitle_info": {
+      "original": "123456789",
+      "pinyin": "",
+      "processed": "123456789",
+      "language": "english",
+      "segments": [
+        {
+          "content": "123456789",
+          "type": "english",
+          "pinyin": "123456789"
+        }
+      ]
+    }
+  },
+  {
+    "id": "fabfa69c-80fe-43c4-95e5-4ce55299f398",
+    "text": "你好，今天weather真好一二。",
+    "original_text": "你好，今天weather真好一二。",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bella",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "fabfa69c-80fe-43c4-95e5-4ce55299f398.wav",
+    "created_at": "2026-04-21T08:46:07.628555",
+    "completed_at": "2026-04-21T08:46:07.628555",
+    "subtitle_info": {
+      "original": "你好，今天weather真好一二。",
+      "pinyin": "nǐ hǎo，jīn tiānweatherzhēn hǎo yī èr。",
+      "processed": "ni hao , jin tian weather zhen hao yi er .",
+      "language": "chinese",
+      "segments": [
+        {
+          "content": "你好",
+          "type": "chinese",
+          "pinyin": "nǐ hǎo"
+        },
+        {
+          "content": "，",
+          "type": "punctuation",
+          "pinyin": "，"
+        },
+        {
+          "content": "今天",
+          "type": "chinese",
+          "pinyin": "jīn tiān"
+        },
+        {
+          "content": "weather",
+          "type": "english",
+          "pinyin": "weather"
+        },
+        {
+          "content": "真好一二",
+          "type": "chinese",
+          "pinyin": "zhēn hǎo yī èr"
+        },
+        {
+          "content": "。",
+          "type": "punctuation",
+          "pinyin": "。"
+        }
+      ]
+    }
+  },
+  {
+    "id": "01a192ce-919a-4d49-82a2-878625da416a",
+    "text": "你好，今天weather真好123456。",
+    "original_text": "你好，今天weather真好123456。",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bella",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "01a192ce-919a-4d49-82a2-878625da416a.wav",
+    "created_at": "2026-04-21T08:45:16.555794",
+    "completed_at": "2026-04-21T08:45:16.555794",
+    "subtitle_info": {
+      "original": "你好，今天weather真好123456。",
+      "pinyin": "nǐ hǎo，jīn tiānweatherzhēn hǎo123456。",
+      "processed": "ni hao , jin tian weather zhen hao 123456 .",
+      "language": "chinese",
+      "segments": [
+        {
+          "content": "你好",
+          "type": "chinese",
+          "pinyin": "nǐ hǎo"
+        },
+        {
+          "content": "，",
+          "type": "punctuation",
+          "pinyin": "，"
+        },
+        {
+          "content": "今天",
+          "type": "chinese",
+          "pinyin": "jīn tiān"
+        },
+        {
+          "content": "weather",
+          "type": "english",
+          "pinyin": "weather"
+        },
+        {
+          "content": "真好",
+          "type": "chinese",
+          "pinyin": "zhēn hǎo"
+        },
+        {
+          "content": "123456",
+          "type": "english",
+          "pinyin": "123456"
+        },
+        {
+          "content": "。",
+          "type": "punctuation",
+          "pinyin": "。"
+        }
+      ]
+    }
+  },
+  {
+    "id": "dae8085d-9b91-492b-8018-f78adfd52289",
+    "text": "你好，今天weather真好123456。",
+    "original_text": "你好，今天weather真好123456。",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bella",
+    "speed": 1.4,
+    "status": "completed",
+    "audio_file": "dae8085d-9b91-492b-8018-f78adfd52289.wav",
+    "created_at": "2026-04-21T08:44:54.012219",
+    "completed_at": "2026-04-21T08:44:54.012219",
+    "subtitle_info": {
+      "original": "你好，今天weather真好123456。",
+      "pinyin": "nǐ hǎo，jīn tiānweatherzhēn hǎo123456。",
+      "processed": "ni hao , jin tian weather zhen hao 123456 .",
+      "language": "chinese",
+      "segments": [
+        {
+          "content": "你好",
+          "type": "chinese",
+          "pinyin": "nǐ hǎo"
+        },
+        {
+          "content": "，",
+          "type": "punctuation",
+          "pinyin": "，"
+        },
+        {
+          "content": "今天",
+          "type": "chinese",
+          "pinyin": "jīn tiān"
+        },
+        {
+          "content": "weather",
+          "type": "english",
+          "pinyin": "weather"
+        },
+        {
+          "content": "真好",
+          "type": "chinese",
+          "pinyin": "zhēn hǎo"
+        },
+        {
+          "content": "123456",
+          "type": "english",
+          "pinyin": "123456"
+        },
+        {
+          "content": "。",
+          "type": "punctuation",
+          "pinyin": "。"
+        }
+      ]
+    }
+  },
+  {
+    "id": "b84b4017-53dd-4365-87c3-6ae112f2dc87",
+    "text": "你好，今天weather真好123456。",
+    "original_text": "你好，今天weather真好123456。",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Kiki",
+    "speed": 1.4,
+    "status": "completed",
+    "audio_file": "b84b4017-53dd-4365-87c3-6ae112f2dc87.wav",
+    "created_at": "2026-04-21T08:44:33.685091",
+    "completed_at": "2026-04-21T08:44:33.685091",
+    "subtitle_info": {
+      "original": "你好，今天weather真好123456。",
+      "pinyin": "nǐ hǎo，jīn tiānweatherzhēn hǎo123456。",
+      "processed": "ni hao , jin tian weather zhen hao 123456 .",
+      "language": "chinese",
+      "segments": [
+        {
+          "content": "你好",
+          "type": "chinese",
+          "pinyin": "nǐ hǎo"
+        },
+        {
+          "content": "，",
+          "type": "punctuation",
+          "pinyin": "，"
+        },
+        {
+          "content": "今天",
+          "type": "chinese",
+          "pinyin": "jīn tiān"
+        },
+        {
+          "content": "weather",
+          "type": "english",
+          "pinyin": "weather"
+        },
+        {
+          "content": "真好",
+          "type": "chinese",
+          "pinyin": "zhēn hǎo"
+        },
+        {
+          "content": "123456",
+          "type": "english",
+          "pinyin": "123456"
+        },
+        {
+          "content": "。",
+          "type": "punctuation",
+          "pinyin": "。"
+        }
+      ]
+    }
+  },
+  {
+    "id": "d6f3ac86-321e-4187-ad79-760dc8aa1302",
+    "text": "你好，今天weather真好。",
+    "original_text": "你好，今天weather真好。",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "d6f3ac86-321e-4187-ad79-760dc8aa1302.wav",
+    "created_at": "2026-04-21T08:44:09.801733",
+    "completed_at": "2026-04-21T08:44:09.801733",
+    "subtitle_info": {
+      "original": "你好，今天weather真好。",
+      "pinyin": "nǐ hǎo，jīn tiānweatherzhēn hǎo。",
+      "processed": "ni hao , jin tian weather zhen hao .",
+      "language": "chinese",
+      "segments": [
+        {
+          "content": "你好",
+          "type": "chinese",
+          "pinyin": "nǐ hǎo"
+        },
+        {
+          "content": "，",
+          "type": "punctuation",
+          "pinyin": "，"
+        },
+        {
+          "content": "今天",
+          "type": "chinese",
+          "pinyin": "jīn tiān"
+        },
+        {
+          "content": "weather",
+          "type": "english",
+          "pinyin": "weather"
+        },
+        {
+          "content": "真好",
+          "type": "chinese",
+          "pinyin": "zhēn hǎo"
+        },
+        {
+          "content": "。",
+          "type": "punctuation",
+          "pinyin": "。"
+        }
+      ]
+    }
+  },
+  {
+    "id": "5acfdef9-e5c7-446d-a28e-5cea8a2b75f7",
+    "text": "你好，今天天气真好。",
+    "original_text": "你好，今天天气真好。",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "5acfdef9-e5c7-446d-a28e-5cea8a2b75f7.wav",
+    "created_at": "2026-04-21T08:43:36.618520",
+    "completed_at": "2026-04-21T08:43:36.618520",
+    "subtitle_info": {
+      "original": "你好，今天天气真好。",
+      "pinyin": "nǐ hǎo，jīn tiān tiān qì zhēn hǎo。",
+      "processed": "ni hao , jin tian tian qi zhen hao .",
+      "language": "chinese",
+      "segments": [
+        {
+          "content": "你好",
+          "type": "chinese",
+          "pinyin": "nǐ hǎo"
+        },
+        {
+          "content": "，",
+          "type": "punctuation",
+          "pinyin": "，"
+        },
+        {
+          "content": "今天天气真好",
+          "type": "chinese",
+          "pinyin": "jīn tiān tiān qì zhēn hǎo"
+        },
+        {
+          "content": "。",
+          "type": "punctuation",
+          "pinyin": "。"
+        }
+      ]
+    }
+  },
+  {
+    "id": "61cbca56-38ac-43ad-9ae2-673d690ccc15",
+    "text": "This is a batch test message. It will be added to the task queue and processed in the background.",
+    "original_text": "This is a batch test message. It will be added to the task queue and processed in the background.",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "61cbca56-38ac-43ad-9ae2-673d690ccc15.wav",
+    "created_at": "2026-04-21T08:43:20.898309",
+    "completed_at": "2026-04-21T08:43:20.898309",
+    "subtitle_info": {
+      "original": "This is a batch test message. It will be added to the task queue and processed in the background.",
+      "pinyin": "",
+      "processed": "this is a batch test message. it will be added to the task queue and processed in the background.",
+      "language": "english",
+      "segments": [
+        {
+          "content": "This",
+          "type": "english",
+          "pinyin": "This"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "is",
+          "type": "english",
+          "pinyin": "is"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "a",
+          "type": "english",
+          "pinyin": "a"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "batch",
+          "type": "english",
+          "pinyin": "batch"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "test",
+          "type": "english",
+          "pinyin": "test"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "message",
+          "type": "english",
+          "pinyin": "message"
+        },
+        {
+          "content": ".",
+          "type": "punctuation",
+          "pinyin": "."
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "It",
+          "type": "english",
+          "pinyin": "It"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "will",
+          "type": "english",
+          "pinyin": "will"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "be",
+          "type": "english",
+          "pinyin": "be"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "added",
+          "type": "english",
+          "pinyin": "added"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "to",
+          "type": "english",
+          "pinyin": "to"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "the",
+          "type": "english",
+          "pinyin": "the"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "task",
+          "type": "english",
+          "pinyin": "task"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "queue",
+          "type": "english",
+          "pinyin": "queue"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "and",
+          "type": "english",
+          "pinyin": "and"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "processed",
+          "type": "english",
+          "pinyin": "processed"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "in",
+          "type": "english",
+          "pinyin": "in"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "the",
+          "type": "english",
+          "pinyin": "the"
+        },
+        {
+          "content": " ",
+          "type": "punctuation",
+          "pinyin": " "
+        },
+        {
+          "content": "background",
+          "type": "english",
+          "pinyin": "background"
+        },
+        {
+          "content": ".",
+          "type": "punctuation",
+          "pinyin": "."
+        }
+      ]
+    }
+  },
+  {
+    "id": "ba4c33d0-34c3-49c4-ac0e-00ca25cdf831",
+    "text": "This is a batch test message. It will be added to the task queue and processed in the background.",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Bruno",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "ba4c33d0-34c3-49c4-ac0e-00ca25cdf831.wav",
+    "created_at": "2026-04-21T08:38:49.294495",
+    "completed_at": "2026-04-21T08:38:49.294495"
+  },
+  {
+    "id": "0c61edbe-bb38-4006-9323-cb9dd885427d",
+    "text": "你好，今天天气真好。",
+    "model_id": "KittenML/kitten-tts-mini-0.8",
+    "voice": "Jasper",
+    "speed": 1.0,
+    "status": "completed",
+    "audio_file": "0c61edbe-bb38-4006-9323-cb9dd885427d.wav",
+    "created_at": "2026-04-21T08:36:16.149054",
+    "completed_at": "2026-04-21T08:36:16.149054"
+  },
   {
     "id": "5b5cca93-a7f7-4a76-909d-c139a7b331c9",
     "text": "This is a batch test message. It will be added to the task queue and processed in the background.",
diff --git a/webui/templates/index.html b/webui/templates/index.html
index 64b086b..6a01d02 100644
--- a/webui/templates/index.html
+++ b/webui/templates/index.html
@@ -652,6 +652,107 @@
             transition: color 0.3s ease;
         }
 
+        .subtitle-container {
+            margin-top: 15px;
+            padding: 15px;
+            background: var(--stat-bg);
+            border-radius: 12px;
+            display: none;
+            transition: background 0.3s ease;
+        }
+
+        .subtitle-container.show {
+            display: block;
+        }
+
+        .subtitle-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+
+        .subtitle-title {
+            font-weight: 600;
+            color: var(--text-primary);
+            font-size: 0.95rem;
+            transition: color 0.3s ease;
+        }
+
+        .subtitle-toggle {
+            display: flex;
+            gap: 5px;
+        }
+
+        .subtitle-toggle-btn {
+            padding: 4px 12px;
+            font-size: 0.8rem;
+            border-radius: 4px;
+            border: 1px solid var(--border-color);
+            background: var(--input-bg);
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .subtitle-toggle-btn:hover {
+            border-color: #667eea;
+        }
+
+        .subtitle-toggle-btn.active {
+            background: #667eea;
+            color: white;
+            border-color: #667eea;
+        }
+
+        .subtitle-content {
+            padding: 12px;
+            background: var(--input-bg);
+            border-radius: 8px;
+            min-height: 50px;
+            transition: background 0.3s ease;
+        }
+
+        .subtitle-original {
+            color: var(--text-primary);
+            font-size: 1rem;
+            line-height: 1.6;
+            margin-bottom: 8px;
+            transition: color 0.3s ease;
+        }
+
+        .subtitle-pinyin {
+            color: var(--text-tertiary);
+            font-size: 0.9rem;
+            line-height: 1.5;
+            font-style: italic;
+            transition: color 0.3s ease;
+        }
+
+        .subtitle-language-badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            margin-left: 8px;
+        }
+
+        .lang-chinese {
+            background: #fff3cd;
+            color: #856404;
+        }
+
+        .lang-english {
+            background: #cce5ff;
+            color: #004085;
+        }
+
+        .lang-mixed {
+            background: #d4edda;
+            color: #155724;
+        }
+
         @media (max-width: 900px) {
             .main-content {
                 grid-template-columns: 1fr;
@@ -753,6 +854,24 @@ <h2><span>🎙️</span> 实时合成</h2>
                             </button>
                         </div>
                     </div>
+
+                    <div class="subtitle-container" id="subtitleContainer">
+                        <div class="subtitle-header">
+                            <div class="subtitle-title">
+                                📝 字幕
+                                <span class="subtitle-language-badge" id="languageBadge"></span>
+                            </div>
+                            <div class="subtitle-toggle" id="subtitleToggle" style="display: none;">
+                                <button class="subtitle-toggle-btn active" data-mode="original">原文</button>
+                                <button class="subtitle-toggle-btn" data-mode="pinyin">拼音</button>
+                                <button class="subtitle-toggle-btn" data-mode="both">全部</button>
+                            </div>
+                        </div>
+                        <div class="subtitle-content">
+                            <div class="subtitle-original" id="subtitleOriginal"></div>
+                            <div class="subtitle-pinyin" id="subtitlePinyin"></div>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="card">
@@ -823,6 +942,8 @@ <h2><span>📊</span> 系统状态</h2>
         let selectedVoice = 'Bruno';
         let statusUpdateInterval = null;
         let isDarkMode = false;
+        let currentSubtitleInfo = null;
+        let currentSubtitleMode = 'original';
 
         // 主题切换功能
         function initTheme() {
@@ -1017,6 +1138,103 @@ <h2><span>📊</span> 系统状态</h2>
             return map[status] || status;
         }
 
+        // 字幕显示功能
+        function showSubtitle(subtitleInfo) {
+            currentSubtitleInfo = subtitleInfo;
+            
+            const subtitleContainer = document.getElementById('subtitleContainer');
+            const subtitleOriginal = document.getElementById('subtitleOriginal');
+            const subtitlePinyin = document.getElementById('subtitlePinyin');
+            const languageBadge = document.getElementById('languageBadge');
+            const subtitleToggle = document.getElementById('subtitleToggle');
+            
+            subtitleContainer.classList.add('show');
+            
+            if (subtitleInfo.original) {
+                subtitleOriginal.textContent = subtitleInfo.original;
+            }
+            
+            if (subtitleInfo.pinyin && subtitleInfo.pinyin.trim()) {
+                subtitlePinyin.textContent = subtitleInfo.pinyin;
+                subtitlePinyin.style.display = 'block';
+            } else {
+                subtitlePinyin.style.display = 'none';
+            }
+            
+            if (subtitleInfo.language) {
+                let langText = '';
+                let langClass = '';
+                
+                if (subtitleInfo.language === 'chinese') {
+                    langText = '中文';
+                    langClass = 'lang-chinese';
+                } else if (subtitleInfo.language === 'english') {
+                    langText = '英文';
+                    langClass = 'lang-english';
+                } else {
+                    langText = '混合';
+                    langClass = 'lang-mixed';
+                }
+                
+                languageBadge.textContent = langText;
+                languageBadge.className = 'subtitle-language-badge ' + langClass;
+                languageBadge.style.display = 'inline-block';
+            } else {
+                languageBadge.style.display = 'none';
+            }
+            
+            if (subtitleInfo.pinyin && subtitleInfo.pinyin.trim()) {
+                subtitleToggle.style.display = 'flex';
+                initSubtitleToggle();
+            } else {
+                subtitleToggle.style.display = 'none';
+            }
+            
+            updateSubtitleDisplay();
+        }
+
+        function hideSubtitle() {
+            const subtitleContainer = document.getElementById('subtitleContainer');
+            subtitleContainer.classList.remove('show');
+            currentSubtitleInfo = null;
+        }
+
+        function initSubtitleToggle() {
+            const toggleBtns = document.querySelectorAll('.subtitle-toggle-btn');
+            toggleBtns.forEach(function(btn) {
+                btn.addEventListener('click', function() {
+                    toggleBtns.forEach(function(b) {
+                        b.classList.remove('active');
+                    });
+                    this.classList.add('active');
+                    currentSubtitleMode = this.dataset.mode;
+                    updateSubtitleDisplay();
+                });
+            });
+        }
+
+        function updateSubtitleDisplay() {
+            if (!currentSubtitleInfo) return;
+            
+            const subtitleOriginal = document.getElementById('subtitleOriginal');
+            const subtitlePinyin = document.getElementById('subtitlePinyin');
+            
+            switch (currentSubtitleMode) {
+                case 'original':
+                    subtitleOriginal.style.display = 'block';
+                    subtitlePinyin.style.display = 'none';
+                    break;
+                case 'pinyin':
+                    subtitleOriginal.style.display = 'none';
+                    subtitlePinyin.style.display = 'block';
+                    break;
+                case 'both':
+                    subtitleOriginal.style.display = 'block';
+                    subtitlePinyin.style.display = 'block';
+                    break;
+            }
+        }
+
         // 生成音频
         async function generateAudio() {
             const text = document.getElementById('textInput').value.trim();
@@ -1085,6 +1303,10 @@ <h2><span>📊</span> 系统状态</h2>
                     document.getElementById('audioInfoText').textContent = 
                         '语音: ' + data.task.voice + ' | 语速: ' + data.task.speed + 'x | 生成时间: ' + formatTime(data.task.completed_at);
 
+                    if (data.subtitle_info) {
+                        showSubtitle(data.subtitle_info);
+                    }
+
                     showToast('音频生成成功！');
                     updateStatus();
                     loadHistory();
@@ -1249,7 +1471,7 @@ <h2><span>📊</span> 系统状态</h2>
                                 ${formatTime(item.completed_at)}
                             </div>
                             <div class="task-actions">
-                                <button class="btn btn-secondary" onclick="playTaskAudio('${item.audio_file}')">
+                                <button class="btn btn-secondary" onclick="playTaskAudioWithId('${item.audio_file}', '${item.id}')">
                                     ▶️ 播放
                                 </button>
                                 <button class="btn btn-secondary" onclick="downloadTaskAudio('${item.audio_file}')">
@@ -1290,6 +1512,30 @@ <h2><span>📊</span> 系统状态</h2>
             showToast('正在播放...');
         }
 
+        // 播放任务音频并显示字幕
+        async function playTaskAudioWithId(filename, taskId) {
+            const audioUrl = '/api/audio/' + filename;
+            const audioElement = document.getElementById('audioElement');
+            audioElement.src = audioUrl;
+            currentAudioUrl = audioUrl;
+            document.getElementById('audioPlayer').classList.add('show');
+            
+            if (taskId) {
+                try {
+                    const response = await fetch('/api/subtitle/' + taskId);
+                    const data = await response.json();
+                    if (data.success && data.subtitle_info) {
+                        showSubtitle(data.subtitle_info);
+                    }
+                } catch (error) {
+                    console.error('加载字幕失败:', error);
+                }
+            }
+            
+            audioElement.play();
+            showToast('正在播放...');
+        }
+
         // 下载任务音频
         function downloadTaskAudio(filename) {
             const link = document.createElement('a');