tts.html 48.3 KB

Edit Raw Blame History

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Edge TTS 语音合成</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --primary-color: #4f46e5;
            --secondary-color: #7c3aed;
            --success-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --light-bg: #f8fafc;
            --dark-bg: #1e293b;
            --text-color: #334155;
            --border-color: #e2e8f0;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
            color: var(--text-color);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .header p {
            opacity: 0.9;
            font-size: 1.1rem;
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            padding: 30px;
        }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
        }

        .card {
            background: var(--light-bg);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid var(--border-color);
        }

        .card-title {
            font-size: 1.3rem;
            color: var(--primary-color);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-color);
        }

        textarea, select, input {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid var(--border-color);
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: white;
        }

        textarea:focus, select:focus, input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }

        textarea {
            min-height: 150px;
            resize: vertical;
        }

        .range-group {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 15px;
            align-items: center;
        }

        .range-value {
            text-align: center;
            font-weight: bold;
            color: var(--primary-color);
            min-width: 50px;
        }

        .btn-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin-top: 30px;
        }

        .btn {
            padding: 14px 25px;
            border: none;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
        }

        .btn-success {
            background: var(--success-color);
            color: white;
        }

        .btn-success:hover {
            background: #0da271;
            transform: translateY(-2px);
        }

        .btn-warning {
            background: var(--warning-color);
            color: white;
        }

        .btn-warning:hover {
            background: #e69a0b;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: #64748b;
            color: white;
        }

        .btn-secondary:hover {
            background: #475569;
            transform: translateY(-2px);
        }

        .audio-player {
            margin-top: 30px;
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }

        audio {
            width: 100%;
            border-radius: 10px;
        }

        .status-box {
            background: white;
            border-radius: 15px;
            padding: 20px;
            margin-top: 20px;
            border-left: 5px solid var(--primary-color);
        }

        .status-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .status-indicator {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
        }

        .status-healthy {
            background: #d1fae5;
            color: var(--success-color);
        }

        .status-unhealthy {
            background: #fee2e2;
            color: var(--danger-color);
        }

        .log-box {
            background: var(--dark-bg);
            color: white;
            border-radius: 10px;
            padding: 15px;
            margin-top: 15px;
            max-height: 200px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
        }

        .log-entry {
            padding: 5px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .log-time {
            color: #94a3b8;
            margin-right: 10px;
        }

        .log-info {
            color: #60a5fa;
        }

        .log-success {
            color: #34d399;
        }

        .log-error {
            color: #f87171;
        }

        .voice-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .voice-card {
            background: white;
            border: 2px solid var(--border-color);
            border-radius: 10px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .voice-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .voice-card.selected {
            border-color: var(--primary-color);
            background: rgba(79, 70, 229, 0.05);
        }

        .voice-name {
            font-weight: bold;
            margin-bottom: 5px;
            color: var(--text-color);
        }

        .voice-details {
            font-size: 0.9rem;
            color: #64748b;
            display: flex;
            justify-content: space-between;
        }

        .progress-container {
            margin-top: 20px;
            display: none;
        }

        .progress-bar {
            width: 100%;
            height: 6px;
            background: var(--border-color);
            border-radius: 3px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            width: 0%;
            transition: width 0.3s ease;
        }

        .progress-text {
            text-align: center;
            font-size: 0.9rem;
            color: var(--text-color);
        }

        .footer {
            text-align: center;
            padding: 20px;
            color: white;
            opacity: 0.8;
            font-size: 0.9rem;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 0 0 20px 20px;
        }

        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 20px;
            border-radius: 10px;
            color: white;
            font-weight: 600;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            transform: translateX(500px);
            transition: transform 0.3s ease;
            z-index: 1000;
        }

        .notification.show {
            transform: translateX(0);
        }

        .notification.success {
            background: var(--success-color);
        }

        .notification.error {
            background: var(--danger-color);
        }

        .notification.info {
            background: var(--primary-color);
        }

        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .tab-container {
            margin-bottom: 20px;
        }

        .tabs {
            display: flex;
            border-bottom: 2px solid var(--border-color);
        }

        .tab {
            padding: 12px 25px;
            background: none;
            border: none;
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.3s ease;
            border-bottom: 3px solid transparent;
        }

        .tab.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>
            <i class="fas fa-robot"></i>
            Edge TTS 语音合成系统
        </h1>
        <p>支持多种语言，流式音频输出，高质量语音合成</p>
    </div>

    <div class="tab-container">
        <div class="tabs">
            <button class="tab active" data-tab="synthesize">语音合成</button>
            <button class="tab" data-tab="batch">批量处理</button>
            <button class="tab" data-tab="voices">语音库</button>
            <button class="tab" data-tab="settings">设置</button>
        </div>
    </div>

    <div class="main-content">
        <!-- 语音合成标签页 -->
        <div class="tab-content active" id="synthesize">
            <div class="card">
                <h2 class="card-title">
                    <i class="fas fa-microphone-alt"></i>
                    语音合成设置
                </h2>

                <div class="form-group">
                    <label for="textInput">
                        <i class="fas fa-font"></i> 输入文本
                    </label>
                    <textarea id="textInput" placeholder="请输入要转换为语音的文本...">
欢迎使用Edge TTS语音合成系统。这是一个高质量的文本转语音服务，支持多种语言和语音风格。您可以选择不同的发音人、调整语速和音量，生成自然流畅的语音。
                        </textarea>
                    <div style="text-align: right; margin-top: 5px; font-size: 0.9rem; color: #64748b;">
                        <span id="charCount">0</span>/5000 字符
                    </div>
                </div>

                <div class="form-group">
                    <label for="voiceSelect">
                        <i class="fas fa-user"></i> 选择发音人
                    </label>
                    <select id="voiceSelect">
                        <option value="zh-CN-XiaoxiaoNeural">晓晓 - 中文女声</option>
                        <option value="zh-CN-YunyangNeural">云扬 - 中文男声</option>
                        <option value="en-US-JennyNeural">Jenny - 英文女声</option>
                        <option value="en-US-GuyNeural">Guy - 英文男声</option>
                        <option value="ja-JP-NanamiNeural">七海 - 日文女声</option>
                        <option value="ko-KR-SunHiNeural">선히 - 韩文女声</option>
                    </select>
                </div>

                <div class="form-group">
                    <label><i class="fas fa-tachometer-alt"></i> 语速控制</label>
                    <div class="range-group">
                        <input type="range" id="rateControl" min="-50" max="50" value="0">
                        <span class="range-value" id="rateValue">+0%</span>
                        <div style="font-size: 0.9rem; color: #64748b;">
                            <span style="float: left;">慢</span>
                            <span style="float: right;">快</span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label><i class="fas fa-volume-up"></i> 音量控制</label>
                    <div class="range-group">
                        <input type="range" id="volumeControl" min="-50" max="50" value="0">
                        <span class="range-value" id="volumeValue">+0%</span>
                        <div style="font-size: 0.9rem; color: #64748b;">
                            <span style="float: left;">小</span>
                            <span style="float: right;">大</span>
                        </div>
                    </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="synthesizeBtn">
                        <i class="fas fa-play"></i> 合成语音
                    </button>
                    <button class="btn btn-success" id="streamBtn">
                        <i class="fas fa-stream"></i> 流式合成
                    </button>
                    <button class="btn btn-secondary" id="testBtn">
                        <i class="fas fa-vial"></i> 测试语音
                    </button>
                    <button class="btn btn-warning" id="downloadBtn" disabled>
                        <i class="fas fa-download"></i> 下载音频
                    </button>
                </div>
            </div>

            <div class="card">
                <h2 class="card-title">
                    <i class="fas fa-music"></i>
                    音频播放器
                </h2>

                <div class="audio-player">
                    <audio id="audioPlayer" controls></audio>
                    <div style="margin-top: 15px; display: flex; gap: 10px;">
                        <button class="btn btn-secondary" id="playBtn" style="flex: 1;">
                            <i class="fas fa-play"></i> 播放
                        </button>
                        <button class="btn btn-secondary" id="pauseBtn" style="flex: 1;">
                            <i class="fas fa-pause"></i> 暂停
                        </button>
                        <button class="btn btn-secondary" id="stopBtn" style="flex: 1;">
                            <i class="fas fa-stop"></i> 停止
                        </button>
                    </div>
                </div>

                <div class="status-box">
                    <div class="status-header">
                        <h3><i class="fas fa-heartbeat"></i> 系统状态</h3>
                        <span class="status-indicator status-healthy" id="statusIndicator">
                                <i class="fas fa-check-circle"></i> 服务正常
                            </span>
                    </div>
                    <div class="log-box" id="logBox">
                        <div class="log-entry">
                            <span class="log-time">12:00:00</span>
                            <span class="log-info">系统初始化完成</span>
                        </div>
                    </div>
                    <div style="margin-top: 15px; display: flex; gap: 10px;">
                        <button class="btn btn-secondary" id="clearLogBtn" style="flex: 1;">
                            <i class="fas fa-trash"></i> 清空日志
                        </button>
                        <button class="btn btn-secondary" id="checkHealthBtn" style="flex: 1;">
                            <i class="fas fa-sync-alt"></i> 检查状态
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 批量处理标签页 -->
        <div class="tab-content" id="batch">
            <div class="card" style="grid-column: 1 / -1;">
                <h2 class="card-title">
                    <i class="fas fa-tasks"></i>
                    批量语音合成
                </h2>

                <div class="form-group">
                    <label><i class="fas fa-list"></i> 批量输入（每行一条文本）</label>
                    <textarea id="batchTextInput" placeholder="请输入多条文本，每行一条..." rows="10">
你好，欢迎使用语音合成系统。
Hello, welcome to the TTS system.
こんにちは、音声合成システムへようこそ。
안녕하세요, 음성 합성 시스템에 오신 것을 환영합니다.
                        </textarea>
                </div>

                <div class="form-group">
                    <label><i class="fas fa-cog"></i> 批量设置</label>
                    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                        <div>
                            <label style="font-size: 0.9rem;">语音选择</label>
                            <select id="batchVoiceSelect">
                                <option value="zh-CN-XiaoxiaoNeural">中文女声</option>
                                <option value="en-US-JennyNeural">英文女声</option>
                                <option value="ja-JP-NanamiNeural">日文女声</option>
                            </select>
                        </div>
                        <div>
                            <label style="font-size: 0.9rem;">输出格式</label>
                            <select id="batchFormat">
                                <option value="stream">流式播放</option>
                                <option value="download">下载文件</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="btn-group">
                    <button class="btn btn-primary" id="batchSynthesizeBtn">
                        <i class="fas fa-play-circle"></i> 批量合成
                    </button>
                    <button class="btn btn-success" id="batchDownloadBtn" disabled>
                        <i class="fas fa-file-archive"></i> 打包下载
                    </button>
                    <button class="btn btn-secondary" id="clearBatchBtn">
                        <i class="fas fa-trash"></i> 清空列表
                    </button>
                </div>

                <div id="batchResults" style="margin-top: 30px;">
                    <h3><i class="fas fa-history"></i> 合成结果</h3>
                    <div id="batchResultList" style="margin-top: 15px;"></div>
                </div>
            </div>
        </div>

        <!-- 语音库标签页 -->
        <div class="tab-content" id="voices" style="grid-column: 1 / -1;">
            <div class="card">
                <h2 class="card-title">
                    <i class="fas fa-users"></i>
                    可用语音库
                </h2>

                <div style="margin-bottom: 20px;">
                    <input type="text" id="voiceSearch" placeholder="搜索语音..." style="width: 300px; max-width: 100%;">
                </div>

                <div id="voiceList" class="voice-grid">
                    <!-- 语音卡片将通过JS动态加载 -->
                </div>

                <div style="margin-top: 30px; text-align: center;">
                    <button class="btn btn-primary" id="refreshVoicesBtn">
                        <i class="fas fa-sync-alt"></i> 刷新语音列表
                    </button>
                </div>
            </div>
        </div>

        <!-- 设置标签页 -->
        <div class="tab-content" id="settings" style="grid-column: 1 / -1;">
            <div class="card">
                <h2 class="card-title">
                    <i class="fas fa-cog"></i>
                    系统设置
                </h2>

                <div class="form-group">
                    <label><i class="fas fa-server"></i> 后端API地址</label>
                    <input type="text" id="apiUrl" value="http://localhost:8099/xlyAi/api/tts" placeholder="请输入后端API地址">
                </div>

                <div class="form-group">
                    <label><i class="fas fa-clock"></i> 请求超时设置（秒）</label>
                    <input type="number" id="timeoutSetting" value="30" min="5" max="300">
                </div>

                <div class="form-group">
                    <label><i class="fas fa-volume-mute"></i> 静音设置</label>
                    <div>
                        <input type="checkbox" id="autoPlayCheckbox">
                        <label for="autoPlayCheckbox" style="display: inline; margin-left: 8px;">
                            合成完成后自动播放
                        </label>
                    </div>
                </div>

                <div class="btn-group">
                    <button class="btn btn-primary" id="saveSettingsBtn">
                        <i class="fas fa-save"></i> 保存设置
                    </button>
                    <button class="btn btn-secondary" id="resetSettingsBtn">
                        <i class="fas fa-undo"></i> 恢复默认
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <p>Edge TTS 语音合成系统 © 2024 | 技术支持：XLY Tech</p>
        <p style="margin-top: 5px; font-size: 0.8rem;">
            版本: v1.0.0 | 最后更新: 2024-01-15
        </p>
    </div>
</div>

<div class="notification" id="notification"></div>

<script>
    // 全局变量
    let currentAudioUrl = null;
    let currentAudioBlob = null;
    let logs = [];
    let voices = [];
    // 改为Java服务的地址
    let settings = {
        apiUrl: 'http://localhost:8099/xlyAi/api/tts',  // Java服务
        timeout: 30000,
        autoPlay: true
    };

    // DOM 元素
    const elements = {
        textInput: document.getElementById('textInput'),
        voiceSelect: document.getElementById('voiceSelect'),
        rateControl: document.getElementById('rateControl'),
        rateValue: document.getElementById('rateValue'),
        volumeControl: document.getElementById('volumeControl'),
        volumeValue: document.getElementById('volumeValue'),
        synthesizeBtn: document.getElementById('synthesizeBtn'),
        streamBtn: document.getElementById('streamBtn'),
        testBtn: document.getElementById('testBtn'),
        downloadBtn: document.getElementById('downloadBtn'),
        audioPlayer: document.getElementById('audioPlayer'),
        playBtn: document.getElementById('playBtn'),
        pauseBtn: document.getElementById('pauseBtn'),
        stopBtn: document.getElementById('stopBtn'),
        statusIndicator: document.getElementById('statusIndicator'),
        logBox: document.getElementById('logBox'),
        clearLogBtn: document.getElementById('clearLogBtn'),
        checkHealthBtn: document.getElementById('checkHealthBtn'),
        charCount: document.getElementById('charCount'),
        progressContainer: document.getElementById('progressContainer'),
        progressFill: document.getElementById('progressFill'),
        progressText: document.getElementById('progressText'),
        notification: document.getElementById('notification')
    };

    // 初始化
    document.addEventListener('DOMContentLoaded', () => {
        initEventListeners();
        loadSettings();
        updateCharCount();
        checkServiceHealth();
        loadVoices();
        setupTabs();
    });

    // 设置标签页
    function setupTabs() {
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', () => {
                const tabId = tab.getAttribute('data-tab');

                // 更新活动标签
                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(tabId).classList.add('active');
            });
        });
    }

    // 初始化事件监听器
    function initEventListeners() {
        // 输入事件
        elements.textInput.addEventListener('input', updateCharCount);
        elements.rateControl.addEventListener('input', updateRateValue);
        elements.volumeControl.addEventListener('input', updateVolumeValue);

        // 按钮事件
        elements.synthesizeBtn.addEventListener('click', synthesizeSpeech);
        elements.streamBtn.addEventListener('click', streamSynthesize);
        elements.testBtn.addEventListener('click', testSynthesis);
        elements.downloadBtn.addEventListener('click', downloadAudio);

        // 音频控制
        elements.playBtn.addEventListener('click', () => elements.audioPlayer.play());
        elements.pauseBtn.addEventListener('click', () => elements.audioPlayer.pause());
        elements.stopBtn.addEventListener('click', () => {
            elements.audioPlayer.pause();
            elements.audioPlayer.currentTime = 0;
        });

        // 系统控制
        elements.clearLogBtn.addEventListener('click', clearLogs);
        elements.checkHealthBtn.addEventListener('click', checkServiceHealth);

        // 批量处理
        document.getElementById('batchSynthesizeBtn')?.addEventListener('click', batchSynthesize);
        document.getElementById('clearBatchBtn')?.addEventListener('click', clearBatch);
        document.getElementById('refreshVoicesBtn')?.addEventListener('click', loadVoices);

        // 设置
        document.getElementById('saveSettingsBtn')?.addEventListener('click', saveSettings);
        document.getElementById('resetSettingsBtn')?.addEventListener('click', resetSettings);

        // 搜索
        document.getElementById('voiceSearch')?.addEventListener('input', filterVoices);

        // 音频事件
        elements.audioPlayer.addEventListener('loadeddata', () => {
            logMessage('音频加载完成', 'success');
        });

        elements.audioPlayer.addEventListener('error', (e) => {
            logMessage('音频加载失败: ' + e.message, 'error');
        });
    }

    // 更新字符计数
    function updateCharCount() {
        const text = elements.textInput.value;
        const count = text.length;
        elements.charCount.textContent = count;

        if (count > 5000) {
            elements.charCount.style.color = '#ef4444';
        } else if (count > 4000) {
            elements.charCount.style.color = '#f59e0b';
        } else {
            elements.charCount.style.color = '#64748b';
        }
    }

    // 更新语速值
    function updateRateValue() {
        const value = elements.rateControl.value;
        const displayValue = value >= 0 ? `+${value}%` : `${value}%`;
        elements.rateValue.textContent = displayValue;
    }

    // 更新音量值
    function updateVolumeValue() {
        const value = elements.volumeControl.value;
        const displayValue = value >= 0 ? `+${value}%` : `${value}%`;
        elements.volumeValue.textContent = displayValue;
    }

    // 显示通知
    function showNotification(message, type = 'info') {
        const notification = elements.notification;
        notification.textContent = message;
        notification.className = `notification ${type} show`;

        setTimeout(() => {
            notification.classList.remove('show');
        }, 3000);
    }

    // 记录日志
    function logMessage(message, type = 'info') {
        const now = new Date();
        const timeString = now.toTimeString().split(' ')[0];

        logs.push({ time: timeString, message, type });

        // 更新日志显示
        updateLogDisplay();

        // 滚动到底部
        elements.logBox.scrollTop = elements.logBox.scrollHeight;
    }

    // 更新日志显示
    function updateLogDisplay() {
        const logBox = elements.logBox;
        logBox.innerHTML = '';

        logs.slice(-20).forEach(log => {
            const entry = document.createElement('div');
            entry.className = 'log-entry';
            entry.innerHTML = `
                    <span class="log-time">${log.time}</span>
                    <span class="log-${log.type}">${log.message}</span>
                `;
            logBox.appendChild(entry);
        });
    }

    // 清空日志
    function clearLogs() {
        logs = [];
        updateLogDisplay();
        logMessage('日志已清空', 'info');
    }

    // 更新进度条
    function updateProgress(percentage, message) {
        elements.progressContainer.style.display = 'block';
        elements.progressFill.style.width = `${percentage}%`;
        elements.progressText.textContent = message;
    }

    // 隐藏进度条
    function hideProgress() {
        setTimeout(() => {
            elements.progressContainer.style.display = 'none';
        }, 500);
    }

    // 合成语音（同步）
    async function synthesizeSpeech() {
        const text = elements.textInput.value.trim();
        if (!text) {
            showNotification('请输入文本内容', 'error');
            return;
        }

        if (text.length > 5000) {
            showNotification('文本过长，请限制在5000字符以内', 'error');
            return;
        }

        try {
            updateProgress(10, '准备请求...');

            const requestData = {
                text: text,
                voice: elements.voiceSelect.value,
                rate: elements.rateValue.textContent,
                volume: elements.volumeValue.textContent
            };

            logMessage('开始合成语音...', 'info');
            showNotification('开始合成语音', 'info');

            updateProgress(30, '发送请求到服务器...');

            // 调用后端API
            const response = await fetch(`${settings.apiUrl}/stream`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(requestData)
            });

            updateProgress(70, '接收音频数据...');

            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }

            const audioBlob = await response.blob();
            currentAudioBlob = audioBlob;
            currentAudioUrl = URL.createObjectURL(audioBlob);
            elements.audioPlayer.src = currentAudioUrl;

            // 启用下载按钮
            elements.downloadBtn.disabled = false;

            updateProgress(100, '合成完成！');
            logMessage(`语音合成成功，音频大小: ${formatBytes(audioBlob.size)}`, 'success');
            showNotification('语音合成完成', 'success');

            // 自动播放
            if (settings.autoPlay) {
                setTimeout(() => {
                    elements.audioPlayer.play();
                    logMessage('开始播放音频', 'info');
                }, 500);
            }

            hideProgress();

        } catch (error) {
            console.error('语音合成失败:', error);
            logMessage(`语音合成失败: ${error.message}`, 'error');
            showNotification('语音合成失败', 'error');
            hideProgress();
        }
    }

    // 流式合成
    async function streamSynthesize() {
        const text = elements.textInput.value.trim();
        if (!text) {
            showNotification('请输入文本内容', 'error');
            return;
        }

        try {
            const requestData = {
                text: text,
                voice: elements.voiceSelect.value
            };

            logMessage('开始流式合成...', 'info');
            showNotification('开始流式合成', 'info');

            // 流式请求
            const response = await fetch(`${settings.apiUrl}/quick-stream?text=${encodeURIComponent(text)}&voice=${requestData.voice}`);
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
            }

            const audioBlob = await response.blob();
            currentAudioBlob = audioBlob;
            currentAudioUrl = URL.createObjectURL(audioBlob);
            elements.audioPlayer.src = currentAudioUrl;
            elements.downloadBtn.disabled = false;

            logMessage(`流式合成完成，音频大小: ${formatBytes(audioBlob.size)}`, 'success');
            showNotification('流式合成完成', 'success');

            // 自动播放
            if (settings.autoPlay) {
                elements.audioPlayer.play();
                logMessage('开始播放音频', 'info');
            }

        } catch (error) {
            console.error('流式合成失败:', error);
            logMessage(`流式合成失败: ${error.message}`, 'error');
            showNotification('流式合成失败', 'error');
        }
    }

    // 测试合成
    async function testSynthesis() {
        const testTexts = [
            { text: "你好，欢迎使用语音合成系统", voice: "zh-CN-XiaoxiaoNeural" },
            { text: "Hello, welcome to the TTS system", voice: "en-US-JennyNeural" },
            { text: "こんにちは、音声合成システムへようこそ", voice: "ja-JP-NanamiNeural" }
        ];

        for (const [index, test] of testTexts.entries()) {
            try {
                logMessage(`测试语音 ${index + 1}: ${test.text}`, 'info');

                const response = await fetch(`${settings.apiUrl}/quick-stream?text=${encodeURIComponent(test.text)}&voice=${test.voice}`);
                if (response.ok) {
                    logMessage(`测试语音 ${index + 1} 成功`, 'success');
                } else {
                    logMessage(`测试语音 ${index + 1} 失败`, 'error');
                }

                // 等待1秒
                await new Promise(resolve => setTimeout(resolve, 1000));

            } catch (error) {
                logMessage(`测试语音 ${index + 1} 失败: ${error.message}`, 'error');
            }
        }

        showNotification('测试完成', 'info');
    }

    // 下载音频
    function downloadAudio() {
        if (!currentAudioBlob) {
            showNotification('没有可下载的音频', 'error');
            return;
        }

        const url = window.URL.createObjectURL(currentAudioBlob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `tts_${Date.now()}.mp3`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);

        logMessage('音频文件已下载', 'success');
        showNotification('音频下载开始', 'success');
    }

    // 检查服务健康状态
    async function checkServiceHealth() {
        try {
            logMessage('正在检查服务状态...', 'info');

            const response = await fetch(`${settings.apiUrl}/health`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json'
                }
            });

            if (response.ok) {
                const data = await response.text();
                elements.statusIndicator.className = 'status-indicator status-healthy';
                elements.statusIndicator.innerHTML = '<i class="fas fa-check-circle"></i> 服务正常';
                logMessage(`服务状态: ${data}`, 'success');
                showNotification('服务运行正常', 'success');
                return true;
            } else {
                throw new Error('服务响应异常');
            }

        } catch (error) {
            console.error('服务健康检查失败:', error);
            elements.statusIndicator.className = 'status-indicator status-unhealthy';
            elements.statusIndicator.innerHTML = '<i class="fas fa-exclamation-circle"></i> 服务异常';
            logMessage(`服务检查失败: ${error.message}`, 'error');
            showNotification('服务连接失败', 'error');
            return false;
        }
    }

    // 加载语音列表
    async function loadVoices() {
        try {
            const response = await fetch(`${settings.apiUrl}/voices`);
            if (!response.ok) {
                throw new Error('获取语音列表失败');
            }

            const data = await response.json();
            voices = data;
            renderVoices(data);
            logMessage(`加载了 ${data.length} 个语音`, 'success');

        } catch (error) {
            console.error('加载语音列表失败:', error);
            logMessage('加载语音列表失败，使用默认语音', 'error');
            renderDefaultVoices();
        }
    }

    // 渲染语音列表
    function renderVoices(voiceList) {
        const voiceGrid = document.getElementById('voiceList');
        voiceGrid.innerHTML = '';

        voiceList.forEach(voice => {
            const voiceCard = document.createElement('div');
            voiceCard.className = 'voice-card';
            voiceCard.innerHTML = `
                    <div class="voice-name">${voice.displayName || voice.name}</div>
                    <div class="voice-details">
                        <span>${voice.locale}</span>
                        <span><i class="fas fa-${voice.gender.toLowerCase()}"></i></span>
                    </div>
                `;

            voiceCard.addEventListener('click', () => {
                // 移除所有选中状态
                document.querySelectorAll('.voice-card').forEach(card => {
                    card.classList.remove('selected');
                });

                // 添加选中状态
                voiceCard.classList.add('selected');

                // 更新选择框
                elements.voiceSelect.value = voice.name;

                logMessage(`选择了语音: ${voice.displayName || voice.name}`, 'info');
            });

            voiceGrid.appendChild(voiceCard);
        });
    }

    // 渲染默认语音
    function renderDefaultVoices() {
        const defaultVoices = [
            { name: "zh-CN-XiaoxiaoNeural", locale: "zh-CN", gender: "Female", displayName: "晓晓 - 中文女声" },
            { name: "zh-CN-YunyangNeural", locale: "zh-CN", gender: "Male", displayName: "云扬 - 中文男声" },
            { name: "en-US-JennyNeural", locale: "en-US", gender: "Female", displayName: "Jenny - 英文女声" },
            { name: "en-US-GuyNeural", locale: "en-US", gender: "Male", displayName: "Guy - 英文男声" },
            { name: "ja-JP-NanamiNeural", locale: "ja-JP", gender: "Female", displayName: "七海 - 日文女声" },
            { name: "ko-KR-SunHiNeural", locale: "ko-KR", gender: "Female", displayName: "선히 - 韩文女声" }
        ];

        renderVoices(defaultVoices);
    }

    // 过滤语音
    function filterVoices() {
        const searchTerm = document.getElementById('voiceSearch').value.toLowerCase();
        const filteredVoices = voices.filter(voice =>
            (voice.displayName && voice.displayName.toLowerCase().includes(searchTerm)) ||
            (voice.name && voice.name.toLowerCase().includes(searchTerm)) ||
            (voice.locale && voice.locale.toLowerCase().includes(searchTerm))
        );

        renderVoices(filteredVoices);
    }

    // 批量合成
    async function batchSynthesize() {
        const batchText = document.getElementById('batchTextInput').value.trim();
        if (!batchText) {
            showNotification('请输入批量文本', 'error');
            return;
        }

        const texts = batchText.split('\n').filter(line => line.trim());
        const voice = document.getElementById('batchVoiceSelect').value;
        const format = document.getElementById('batchFormat').value;

        logMessage(`开始批量合成 ${texts.length} 条文本`, 'info');
        showNotification(`开始批量处理 ${texts.length} 条文本`, 'info');

        const resultList = document.getElementById('batchResultList');
        resultList.innerHTML = '';

        for (let i = 0; i < texts.length; i++) {
            const text = texts[i].trim();
            if (!text) continue;

            try {
                const response = await fetch(`${settings.apiUrl}/quick-stream?text=${encodeURIComponent(text)}&voice=${voice}`);
                const resultDiv = document.createElement('div');
                resultDiv.style.cssText = `
                        padding: 10px;
                        margin: 5px 0;
                        background: ${response.ok ? '#d1fae5' : '#fee2e2'};
                        border-radius: 5px;
                        border-left: 4px solid ${response.ok ? '#10b981' : '#ef4444'};
                    `;

                if (response.ok) {
                    const audioBlob = await response.blob();
                    const audioUrl = URL.createObjectURL(audioBlob);

                    resultDiv.innerHTML = `
                            <strong>#${i + 1}</strong>: ${text.substring(0, 50)}${text.length > 50 ? '...' : ''}
                            <div style="margin-top: 5px; display: flex; gap: 10px;">
                                <audio controls style="flex: 1; height: 30px;"></audio>
                                <button class="btn btn-secondary" style="padding: 5px 10px; font-size: 0.9rem;">
                                    <i class="fas fa-download"></i> 下载
                                </button>
                            </div>
                        `;

                    const audioElement = resultDiv.querySelector('audio');
                    audioElement.src = audioUrl;

                    const downloadBtn = resultDiv.querySelector('button');
                    downloadBtn.addEventListener('click', () => {
                        const a = document.createElement('a');
                        a.href = audioUrl;
                        a.download = `batch_${i + 1}_${Date.now()}.mp3`;
                        a.click();
                    });

                    logMessage(`批量项目 ${i + 1} 合成成功`, 'success');
                } else {
                    resultDiv.innerHTML = `
                            <strong>#${i + 1}</strong>: ${text.substring(0, 50)}${text.length > 50 ? '...' : ''}
                            <div style="color: #ef4444; margin-top: 5px;">合成失败</div>
                        `;
                    logMessage(`批量项目 ${i + 1} 合成失败`, 'error');
                }

                resultList.appendChild(resultDiv);

                // 更新进度
                const progress = Math.round((i + 1) / texts.length * 100);
                updateProgress(progress, `处理中... (${i + 1}/${texts.length})`);
            } catch (error) {
                logMessage(`批量项目 ${i + 1} 失败: ${error.message}`, 'error');
            }

            // 延迟以避免请求过快
            await new Promise(resolve => setTimeout(resolve, 500));
        }

        updateProgress(100, '批量处理完成！');
        logMessage(`批量处理完成，共 ${texts.length} 条文本`, 'success');
        showNotification('批量处理完成', 'success');

        hideProgress();
    }

    // 清空批量列表
    function clearBatch() {
        document.getElementById('batchTextInput').value = '';
        document.getElementById('batchResultList').innerHTML = '';
        logMessage('批量列表已清空', 'info');
    }

    // 加载设置
    function loadSettings() {
        const savedSettings = localStorage.getItem('tts_settings');
        if (savedSettings) {
            settings = JSON.parse(savedSettings);
            document.getElementById('apiUrl').value = settings.apiUrl;
            document.getElementById('timeoutSetting').value = settings.timeout / 1000;
            document.getElementById('autoPlayCheckbox').checked = settings.autoPlay;
            logMessage('设置已加载', 'info');
        }
    }

    // 保存设置
    function saveSettings() {
        settings.apiUrl = document.getElementById('apiUrl').value;
        settings.timeout = document.getElementById('timeoutSetting').value * 1000;
        settings.autoPlay = document.getElementById('autoPlayCheckbox').checked;

        localStorage.setItem('tts_settings', JSON.stringify(settings));
        logMessage('设置已保存', 'success');
        showNotification('设置保存成功', 'success');

        // 重新检查服务状态
        checkServiceHealth();
    }

    // 恢复默认设置
    function resetSettings() {
        settings = {
            apiUrl: 'http://localhost:8099/xlyAi/api/tts',
            timeout: 30000,
            autoPlay: true
        };

        document.getElementById('apiUrl').value = settings.apiUrl;
        document.getElementById('timeoutSetting').value = settings.timeout / 1000;
        document.getElementById('autoPlayCheckbox').checked = settings.autoPlay;

        localStorage.removeItem('tts_settings');
        logMessage('设置已恢复默认', 'info');
        showNotification('设置已恢复默认', 'info');
    }

    // 工具函数：格式化字节大小
    function formatBytes(bytes, decimals = 2) {
        if (bytes === 0) return '0 Bytes';

        const k = 1024;
        const dm = decimals < 0 ? 0 : decimals;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];

        const i = Math.floor(Math.log(bytes) / Math.log(k));

        return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
    }

    // 键盘快捷键
    document.addEventListener('keydown', (e) => {
        // Ctrl + Enter: 合成语音
        if (e.ctrlKey && e.key === 'Enter') {
            e.preventDefault();
            synthesizeSpeech();
        }

        // Ctrl + S: 流式合成
        if (e.ctrlKey && e.key === 's') {
            e.preventDefault();
            streamSynthesize();
        }

        // Ctrl + D: 下载音频
        if (e.ctrlKey && e.key === 'd') {
            e.preventDefault();
            if (!elements.downloadBtn.disabled) {
                downloadAudio();
            }
        }

        // Space: 播放/暂停
        if (e.key === ' ' && e.target.tagName !== 'INPUT' && e.target.tagName !== 'TEXTAREA') {
            e.preventDefault();
            if (elements.audioPlayer.paused) {
                elements.audioPlayer.play();
            } else {
                elements.audioPlayer.pause();
            }
        }
    });

    // 初始日志
    logMessage('系统初始化完成', 'info');
    logMessage('API地址: ' + settings.apiUrl, 'info');
    logMessage('准备好进行语音合成', 'success');
</script>
</body>
</html>