大模型应用：完整语音交互闭环：TTS+ASR融合系统可视化场景实践.22

一、引言

在文章开始之前，先简单释义说明一下，TTS即文本转语音，ASR即语音转文本，前面的章节我们仔细通俗的讲解了TTS和ASR的原理和各自应用场景，今天我们将两者结合在一起进行深度分析，首先我们需要考虑， 是什么样的场景需要TTS与ASR 的融合，回想我们打开手机的语音助手，说一句"查询明天的天气"，它能立刻识别我们的语音，此时手机的语音助手内部处理将我们的语音转文本，解析指令后得到答案，再通过文本转语音，然后用自然语音给我们反馈结果， 这看似简单的交互，背后正是TTS与ASR两大技术的融合魔力。

在日常开发中，很多人对语音技术的认知还停留在单向转换，即用 ASR 做语音转文字，用 TTS 做文本转语音，却忽略了两者融合后的闭环价值。实际上，从智能客服、实时翻译到无障碍工具、车载语音，所有成熟的语音交互场景，核心都是 "ASR 接收输入→文本处理→TTS 反馈输出" 的完整链路。今天我们整合零散的理论基础，从基础概念入手，先搭建一套 "前端可视化 + 后端轻量 API" 的 TTS+ASR 融合交互系统，不仅实现 "语音→文本→语音" 的平滑切换，还对每一个环节的底层逻辑，做一些重点分析。

二、基础回顾

1. 强化理解ASR

ASR，全称Automatic Speech Recognition，语音交互的耳朵，即自动语音识别，核心作用是 "把语音转换成文本"，相当于给机器装上耳朵，让它能听懂人类的语言。

• 核心指标：字错率（WER），即 "转错的字数 / 总字数"，数值越低识别越精准（比如 WER=5%，代表 100 个字里仅错 5 个）；
• 常见场景：微信语音转文字、会议纪要自动生成、语音输入搜索；
• 技术优势：我们选用 OpenAI Whisper，支持离线运行、多语言识别，即使是带口音或轻微噪声的语音，识别精度也远超传统工具。

2. 强化理解TTS

TTS，全称Text-to-Speech，语音交互的嘴巴，即文本转语音，核心作用是 "把文本转换成自然语音"，相当于给机器装上嘴巴，让它能主动回复人类。

• 核心指标：语音自然度（是否接近真人发音）、语速 / 音调可调性；
• 常见场景：导航语音播报、有声书生成、智能助手回复；
• 技术选型：和前面的文章模型保持一致，我们选用 pyttsx3，本地离线，响应快。

3. 两者融合

• 融合的核心价值：从单向到闭环，单独使用 ASR 或 TTS，只能完成输入或输出的单一动作；两者融合后，才能实现双向交互：
• 单向局限：用 ASR 转写会议纪要后，需要手动整理回复；用 TTS 播报文本时，无法接收语音反馈；
• 闭环优势：用户语音输入→ASR 转文本→程序解析指令→TTS 生成语音输出，全程无需手动干预，符合人类"说话 - 听话"的自然交互习惯。

三、技术结构

系统的技术选型围绕 "理解简单、轻量实用、适配场景" 的核心原则展开，各核心模块的选型及细节思考：

1. 前端层面

前端采用 HTML+CSS+JavaScript 原生技术搭配 Web Audio API 构建。

• 原生的前端结构无需依赖任何前端框架，整体轻量易部署；
• 同时 Web Audio API 可原生支持浏览器端录音功能，无需额外安装插件，大幅降低用户操作门槛。

2. 后端部分

后端选用 Python 结合 Flask 框架开发。

• Flask 具备快速搭建 RESTful API 的优势，代码风格简洁易维护；能够
• 完美适配 Python 生态下的 ASR、TTS 相关工具，契合本次系统轻量开发的需求。

3. ASR 核心模块

该模块采用 OpenAI Whisper 模型，其支持离线运行模式，且具备优秀的多语言识别能力，识别精度处于行业前列；其中 base 尺寸模型仅 139M 大小，即便在 CPU 环境下也能流畅运行，足以满足日常语音转文本场景的需求。

4. TTS 核心模块

该模块采用本地端使用 pyttsx3，可保证语音生成的响应速度（延迟＜1 秒），无需依赖网络；

5. 音频处理环节

音频处理整合 wave、pyaudio 与 ffmpeg 工具：

• wave 和 pyaudio 用于统一音频格式为 WAV，确保前后端音频数据兼容；
• ffmpeg 则解决了多格式音频的处理难题，保障不同来源音频都能被系统识别处理。

6. 跨域处理方面

• 引入 flask-cors 组件，专门解决前端页面访问后端 API 时的跨域问题
• 避免因浏览器同源策略限制导致界面操作失败，保障前后端交互的顺畅性。

四、系统架构

整个融合系统的核心是数据流转的平滑性，前端负责"用户交互与可视化"，后端负责"核心逻辑处理"，两者通过 API 接口协同工作；

1. 核心流程

流程说明：

• 1. 前端操作：用户通过浏览器点击 "开始录音"，Web Audio API 获取麦克风权限，录制语音并生成 WAV 格式音频；
• 2. 音频上传：前端将录音文件通过 FormData 格式上传到后端 ASR 接口；
• 3. ASR 处理：后端 Whisper 模型接收音频，转写为文本，返回给前端展示；
• 4. 文本处理：用户可直接使用 ASR 转写的文本，或手动输入新文本，点击 "生成语音"；
• 5. TTS 处理：后端接收文本，通过 pyttsx3 生成语音文件，返回音频播放链接；
• 6. 语音输出：前端通过audioUrl标签加载链接，自动播放语音，完成 "语音→文本→语音" 的闭环。

2. 设计细节

• 格式统一：前端录音强制生成 WAV 格式（16000Hz 采样率、单声道），与 Whisper 的输入要求完全匹配，避免格式转换耗时；
• 异步交互：前端通过async/await调用后端 API，避免界面卡顿，同时添加 "状态提示"（如 "正在转写文本""生成语音中"），提升用户体验；
• 自动衔接：ASR 转写完成后，文本自动填充到 TTS 输入框，用户无需手动复制，一键即可生成语音，减少操作步骤；
• 异常处理：前后端均添加异常捕获（如录音失败、转写无结果、语音播放失败），并给出明确提示，避免用户不知所措。

五、核心模块解析

1. 前端核心模块

前端的核心是让操作更直观，主要实现 3 个功能：录音、ASR 结果展示、TTS 语音播放，关键代码逻辑：

1.1 录音功能

主要处理浏览器录音格式兼容，基于Web Audio API 录制的是 Blob 格式，需转为 Whisper 支持的 WAV 格式。

关键逻辑：

• 调用navigator.mediaDevices.getUserMedia获取麦克风权限；
• 用MediaRecorder监听录音数据，存储到audioChunks数组；
• 录音停止后，将audioChunks转为 Blob 对象，类型设为audio/wav，确保后端能直接处理。

1.2 ASR/TTS 交互

// 2. 调用后端ASR接口
const response = await fetch(`${BACKEND_URL}/asr`, {
    method: "POST",
    body: formData
});
const result = await response.json();


// 2. 调用后端TTS接口
const response = await fetch(`${BACKEND_URL}/tts`, {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ text })
});
const result = await response.json();

• 前端通过fetch函数调用后端 API，ASR 用POST方法上传 FormData 格式的音频文件，TTS 用POST方法传递 JSON 格式的文本；
• 添加 "按钮禁用状态"（如录音时禁用 "开始录音" 按钮，转写时禁用 "转写文本" 按钮），避免重复操作；
• 状态反馈：用不同颜色的文本提示操作结果（成功为绿色，失败为红色），让用户清晰了解当前进度。

1.3 语音播放

TTS 生成语音后，后端返回音频播放链接，前端将链接赋值给html标签的src属性，调用play()方法自动播放，同时支持用户手动暂停、调整音量。

1.4 辅助功能

清理音频文件/清除历史记录：清理本地已经生成好的音频文件，避免占用不需要的空间，清理前先进行操作提示，许可后才进行下一步操作。

2. 后端核心模块

后端的核心是提供稳定的 API 接口，实现 ASR 转写、TTS 生成、音频管理三大功能，关键代码逻辑：

2.1 ASR 接口（/api/asr）

@app.route("/api/asr", methods=["POST"])
def asr_voice_to_text():
    """
    接收前端上传的WAV音频文件，返回ASR转写文本
    """
    try:
        # 1. 接收音频文件
        if "audio" not in request.files:
            return jsonify({"code": 400, "msg": "未上传音频文件"}), 400
        audio_file = request.files["audio"]
        # 生成唯一文件名（避免覆盖）
        audio_filename = f"{uuid.uuid4()}.wav"
        audio_path = os.path.join(AUDIO_UPLOAD_PATH, audio_filename)
        audio_file.save(audio_path)

        # 2. Whisper语音转文本
        result = WHISPER_MODEL.transcribe(
            audio_path,
            language="zh",
            temperature=0.0
        )
        text = result["text"].strip()

        # 3. 返回结果
        return jsonify({
            "code": 200,
            "msg": "ASR转写成功",
            "data": {"text": text, "audio_path": audio_path}
        })
    except Exception as e:
        return jsonify({"code": 500, "msg": f"ASR失败：{str(e)}"}), 500

核心流程： 接收前端上传的音频文件→Whisper 转写为文本→返回结果。
关键细节：

• 用uuid生成唯一文件名（如a1b2c3d4-1234-5678-90ef.wav），避免多个用户上传的音频文件相互覆盖；
• 调用 Whisper 时显式指定language="zh"，提升中文识别精度（默认自动检测可能误判为日语 / 韩语）；
• 捕获异常（如音频文件损坏、模型加载失败），返回清晰的错误信息，方便前端调试。

2.2 TTS 接口（/api/tts）

@app.route("/api/tts", methods=["POST"])
def tts_text_to_voice():
    """
    接收前端传入的文本，返回TTS语音文件播放链接
    """
    try:
        # 1. 接收文本参数
        data = request.get_json()
        if not data or "text" not in data:
            return jsonify({"code": 400, "msg": "未传入文本"}), 400
        text = data["text"].strip()
        if not text:
            return jsonify({"code": 400, "msg": "文本不能为空"}), 400

        # 2. 生成TTS语音（基础版：pyttsx3本地生成）
        tts_filename = f"{uuid.uuid4()}.wav"
        tts_path = os.path.join(TTS_OUTPUT_PATH, tts_filename)
        
        # 初始化TTS引擎
        engine = pyttsx3.init()
        engine.setProperty('rate', 150)  # 语速
        engine.setProperty('volume', 1.0)  # 音量
        # 保存语音文件（而非直接播放）
        engine.save_to_file(text, tts_path)
        engine.runAndWait()

        # 3. 返回语音文件访问链接
        tts_url = f"http://127.0.0.1:5000/api/tts/play/{tts_filename}"
        return jsonify({
            "code": 200,
            "msg": "TTS生成成功",
            "data": {"tts_url": tts_url, "tts_path": tts_path}
        })
    except Exception as e:
        return jsonify({"code": 500, "msg": f"TTS失败：{str(e)}"}), 500

核心流程： 接收前端传入的文本→生成语音文件→返回播放链接。
实现方案：

• 本地版（pyttsx3）：直接将文本转为 WAV 文件，保存到tts_output目录，响应速度快，无需联网；

2.3 清理接口（/api/clean）

@app.route("/api/clean", methods=["GET"])
def clean_audio_files():
    """清理所有生成的音频文件"""
    try:
        # 清理上传的ASR音频
        for file in os.listdir(AUDIO_UPLOAD_PATH):
            os.remove(os.path.join(AUDIO_UPLOAD_PATH, file))
        # 清理TTS生成的音频
        for file in os.listdir(TTS_OUTPUT_PATH):
            os.remove(os.path.join(TTS_OUTPUT_PATH, file))
        return jsonify({"code": 200, "msg": "音频文件清理成功"}), 200
    except Exception as e:
        return jsonify({"code": 500, "msg": f"清理失败：{str(e)}"}), 500

• 核心功能：清理后端存储的所有录音和 TTS 音频文件，避免占用过多磁盘空间。
• 适用场景：调试时频繁生成音频文件，一键清理可节省手动删除的时间。

2.4 后端服务启动

if __name__ == "__main__":
    # 启动Flask服务（允许外部访问，调试模式）
    app.run(host="0.0.0.0", port=5000, debug=True)

启动Flask服务，通过5000端口提供外部访问

每一步操作执行的交互日志：

3. 核心操作流程

• ① 点击 "开始录音"，允许浏览器麦克风权限，说话（建议 5 秒内）；
• ② 点击 "停止录音"，界面提示 "录音完成，可点击「转写文本」"；
• ③ 点击 "转写文本"，等待 2-3 秒，ASR 结果显示在文本框中（自动填充到 TTS 输入框）；
• ④ 点击 "生成并播放语音"，等待 1 秒左右，语音自动播放；
• ⑤ 点击 "清理音频文件"，删除后端生成的所有音频。
• ⑥ 点击 "清除历史记录"，产出所有操作的记录列表

六、总结

今天我们聚焦易用性与交互流畅性"的 TTS 与 ASR 融合交互闭环系统，采用 "前端可视化操作 + 后端轻量 API" 的架构设计，可实现 "语音输入→文本转写→语音输出" 的全流程自动化衔接，为解决传统语音技术单向转换的局限提供了一个初步的解决方案。

前端基于原生 HTML/CSS/JavaScript 开发，搭配 Web Audio API 实现浏览器端无插件录音，界面包含录音控制、ASR 结果展示、TTS 文本输入及语音播放等核心功能，同时添加操作状态提示（如 "正在转写""生成成功"）和自动文本填充机制，无需依赖任何前端框架，轻量易部署。

后端以 Python+Flask 为核心搭建 RESTful API，集成 OpenAI Whisper 模型实现高精度离线语音转文本，支持多语言识别，base 尺寸模型仅需 CPU 即可流畅运行；TTS 模块提供双方案适配不同场景 ------pyttsx3 本地版保障＜1 秒低延迟响应。系统通过 wave、pyaudio 统一音频为 WAV 格式，结合 ffmpeg 处理多格式兼容问题，借助 flask-cors 解决前后端跨域障碍。可以在此基础上按实际需求进行扩展调试。

附录一：后端完整代码

from flask import Flask, request, jsonify, send_file
from flask_cors import CORS
import whisper
import pyttsx3
import wave
import os
import uuid

# ---------------------- 配置项 ----------------------
app = Flask(__name__)
CORS(app)  # 解决跨域问题（前端访问后端接口）

# 音频存储路径（自动创建）
AUDIO_UPLOAD_PATH = "upload_audio"
TTS_OUTPUT_PATH = "tts_output"
os.makedirs(AUDIO_UPLOAD_PATH, exist_ok=True)
os.makedirs(TTS_OUTPUT_PATH, exist_ok=True)

# Whisper模型配置（base模型平衡速度和精度）
WHISPER_MODEL = whisper.load_model("base")

# ---------------------- ASR接口（语音转文本） ----------------------
@app.route("/api/asr", methods=["POST"])
def asr_voice_to_text():
    """
    接收前端上传的WAV音频文件，返回ASR转写文本
    """
    try:
        # 1. 接收音频文件
        if "audio" not in request.files:
            return jsonify({"code": 400, "msg": "未上传音频文件"}), 400
        audio_file = request.files["audio"]
        # 生成唯一文件名（避免覆盖）
        audio_filename = f"{uuid.uuid4()}.wav"
        audio_path = os.path.join(AUDIO_UPLOAD_PATH, audio_filename)
        audio_file.save(audio_path)

        # 2. Whisper语音转文本
        result = WHISPER_MODEL.transcribe(
            audio_path,
            language="zh",
            temperature=0.0
        )
        text = result["text"].strip()

        # 3. 返回结果
        return jsonify({
            "code": 200,
            "msg": "ASR转写成功",
            "data": {"text": text, "audio_path": audio_path}
        })
    except Exception as e:
        return jsonify({"code": 500, "msg": f"ASR失败：{str(e)}"}), 500

# ---------------------- TTS接口（文本转语音） ----------------------
@app.route("/api/tts", methods=["POST"])
def tts_text_to_voice():
    """
    接收前端传入的文本，返回TTS语音文件播放链接
    """
    try:
        # 1. 接收文本参数
        data = request.get_json()
        if not data or "text" not in data:
            return jsonify({"code": 400, "msg": "未传入文本"}), 400
        text = data["text"].strip()
        if not text:
            return jsonify({"code": 400, "msg": "文本不能为空"}), 400

        # 2. 生成TTS语音（基础版：pyttsx3本地生成）
        tts_filename = f"{uuid.uuid4()}.wav"
        tts_path = os.path.join(TTS_OUTPUT_PATH, tts_filename)
        
        # 初始化TTS引擎
        engine = pyttsx3.init()
        engine.setProperty('rate', 150)  # 语速
        engine.setProperty('volume', 1.0)  # 音量
        # 保存语音文件（而非直接播放）
        engine.save_to_file(text, tts_path)
        engine.runAndWait()

        # 3. 返回语音文件访问链接
        tts_url = f"http://127.0.0.1:5000/api/tts/play/{tts_filename}"
        return jsonify({
            "code": 200,
            "msg": "TTS生成成功",
            "data": {"tts_url": tts_url, "tts_path": tts_path}
        })
    except Exception as e:
        return jsonify({"code": 500, "msg": f"TTS失败：{str(e)}"}), 500

# ---------------------- TTS语音播放接口 ----------------------
@app.route("/api/tts/play/<filename>", methods=["GET"])
def play_tts_audio(filename):
    """提供TTS语音文件的播放/下载"""
    tts_path = os.path.join(TTS_OUTPUT_PATH, filename)
    if not os.path.exists(tts_path):
        return jsonify({"code": 404, "msg": "语音文件不存在"}), 404
    # 发送音频文件（支持浏览器播放）
    return send_file(
        tts_path,
        mimetype="audio/wav",
        as_attachment=False  # False为播放，True为下载
    )

# ---------------------- 清理音频文件接口（可选） ----------------------
@app.route("/api/clean", methods=["GET"])
def clean_audio_files():
    """清理所有生成的音频文件"""
    try:
        # 清理上传的ASR音频
        for file in os.listdir(AUDIO_UPLOAD_PATH):
            os.remove(os.path.join(AUDIO_UPLOAD_PATH, file))
        # 清理TTS生成的音频
        for file in os.listdir(TTS_OUTPUT_PATH):
            os.remove(os.path.join(TTS_OUTPUT_PATH, file))
        return jsonify({"code": 200, "msg": "音频文件清理成功"}), 200
    except Exception as e:
        return jsonify({"code": 500, "msg": f"清理失败：{str(e)}"}), 500

# ---------------------- 启动后端 ----------------------
if __name__ == "__main__":
    # 启动Flask服务（允许外部访问，调试模式）
    app.run(host="0.0.0.0", port=5000, debug=True)

附录二：前端完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TTS+ASR融合交互系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", sans-serif;
        }
        body {
            max-width: 1400px;
            margin: 60px auto;
            padding: 0 20px;
            background-color: #f5f7fa;
            overflow: hidden;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            max-height: calc(100vh - 0px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .content-wrapper {
            display: flex;
            gap: 15px;
            flex: 1;
            overflow: hidden;
            margin-top: 20px;
        }
        .main-content {
            flex: 1;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .main-content::-webkit-scrollbar {
            display: none;
        }
        .side-panels {
            display: flex;
            gap: 15px;
            flex-shrink: 0;
        }
        .history-panel {
            width: 360px;
            background: #f9f9f9;
            border-radius: 8px;
            padding: 20px;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .history-panel::-webkit-scrollbar {
            display: none;
        }
        .audio-panel {
            width: 300px;
            background: #f9f9f9;
            border-radius: 8px;
            padding: 20px;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .audio-panel::-webkit-scrollbar {
            display: none;
        }
        .audio-panel-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
            border-bottom: 2px solid #409eff;
            padding-bottom: 8px;
        }
        .history-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
            border-bottom: 2px solid #409eff;
            padding-bottom: 8px;
        }
        .history-list {
            list-style: none;
            max-height: 500px;
        }
        .history-item {
            background: white;
            padding: 12px;
            margin-bottom: 10px;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .history-item:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
            transform: translateY(-1px);
        }
        .history-item-time {
            font-size: 12px;
            color: #999;
            margin-bottom: 5px;
        }
        .history-item-text {
            font-size: 14px;
            color: #666;
            line-height: 1.4;
            max-height: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .history-item-type {
            font-size: 12px;
            color: #409eff;
            margin-top: 5px;
            font-weight: bold;
        }
        .clear-history-btn {
            width: 100%;
            background-color: #f56c6c;
            color: white;
            border: none;
            padding: 8px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            margin-top: 15px;
        }
        .clear-history-btn:hover {
            background-color: #f78989;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 5px;
        }
        .module {
            margin-bottom: 10px;
            padding: 20px 20px 10px;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        .module h2 {
            color: #409eff;
            margin-bottom: 15px;
            font-size: 18px;
        }
        button {
            background-color: #409eff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
            font-size: 14px;
        }
        button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
        button:hover:not(:disabled) {
            background-color: #66b1ff;
        }
        textarea, input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
            font-size: 14px;
            resize: none;
        }
        .two-columns {
            display: flex;
            gap: 20px;
        }
        .column {
            flex: 1;
        }
        .audio-list {
            list-style: none;
            max-height: 500px;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .audio-list::-webkit-scrollbar {
            display: none;
        }
        .audio-item {
            background: white;
            padding: 13px;
            margin-bottom: 8px;
            border-radius: 5px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .audio-item:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .audio-item-time {
            font-size: 12px;
            color: #999;
            margin-bottom: 5px;
        }
        .audio-item-text {
            font-size: 14px;
            color: #666;
            line-height: 1.4;
            max-height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .audio-item-controls {
            margin-top: 8px;
            display: flex;
            gap: 5px;
        }
        .audio-item-controls button {
            padding: 5px 10px;
            font-size: 12px;
            margin: 0;
        }
        textarea {
            height: 65px;
        }
        .status {
            color: #666;
            font-size: 14px;
            margin-top: 1px;
        }
        .success {
            color: #67c23a;
        }
        .error {
            color: #f56c6c;
        }
        audio {
            width: 100%;
            margin-top: 0px;
            height: 40px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>TTS+ASR融合交互系统</h1>
        
        <div class="content-wrapper">
            <div class="main-content">
                <!-- ASR模块：语音转文本 -->
                <div class="module">
                    <h2>🔊 语音转文本（ASR）</h2>
                    <button id="recordBtn">开始录音</button>
                    <button id="stopRecordBtn" disabled>停止录音</button>
                    <button id="asrBtn" disabled>转写文本</button>
                    <div class="status" id="asrStatus"></div>
                    <textarea id="asrResult" placeholder="ASR转写结果将显示在这里..."></textarea>
                </div>

                <!-- TTS模块：文本转语音 -->
                <div class="module">
                    <h2>📢 文本转语音（TTS）</h2>
                    <textarea id="ttsText" placeholder="请输入要转换的文本...">你好！这是TTS与ASR融合交互系统的演示语音</textarea>
                    <button id="ttsBtn">生成并播放语音</button>
                    <div class="status" id="ttsStatus"></div>
                    <audio id="ttsAudio" controls></audio>
                </div>

                <!-- 辅助功能 -->
                <div class="module" style="margin-bottom: 0;">
                    <h2>🧹 辅助功能</h2>
                    <button id="cleanBtn">清理音频文件</button>
                    <button id="clearHistoryInMainBtn" style="margin-left: 10px;">清除历史记录</button>
                    <div class="status" id="cleanStatus"></div>
                </div>
            </div>
            
            <!-- 侧边面板：历史记录和音频列表 -->
            <div class="side-panels">
                <!-- 历史记录面板 -->
                <div class="history-panel">
                    <div class="history-title">📝 历史记录</div>
                    <ul id="historyList" class="history-list"></ul>
                    <button id="clearHistoryBtn" class="clear-history-btn">清空历史记录</button>
                </div>
                
                <!-- 音频列表面板 -->
                <div class="audio-panel">
                    <div class="audio-panel-title">🎵 已生成音频列表</div>
                    <ul id="audioList" class="audio-list"></ul>
                    <button id="clearAudioBtn" class="clear-history-btn">清空音频列表</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // ---------------------- 全局变量 ----------------------
        let mediaRecorder;  // 录音对象
        let audioChunks = [];  // 录音数据
        const BACKEND_URL = "http://127.0.0.1:5000/api";  // 后端接口地址
        let historyRecords = JSON.parse(localStorage.getItem('ttsAsrHistory') || '[]');  // 历史记录，存储在localStorage
        let audioRecords = JSON.parse(localStorage.getItem('ttsAudioRecords') || '[]');  // 音频记录，存储在localStorage

        // ---------------------- DOM元素 ----------------------
        const recordBtn = document.getElementById("recordBtn");
        const stopRecordBtn = document.getElementById("stopRecordBtn");
        const asrBtn = document.getElementById("asrBtn");
        const asrStatus = document.getElementById("asrStatus");
        const asrResult = document.getElementById("asrResult");
        const ttsText = document.getElementById("ttsText");
        const ttsBtn = document.getElementById("ttsBtn");
        const ttsStatus = document.getElementById("ttsStatus");
        const ttsAudio = document.getElementById("ttsAudio");
        const cleanBtn = document.getElementById("cleanBtn");
        const cleanStatus = document.getElementById("cleanStatus");
        const historyList = document.getElementById("historyList");
        const clearHistoryBtn = document.getElementById("clearHistoryBtn");
        const clearHistoryInMainBtn = document.getElementById("clearHistoryInMainBtn");
        const audioList = document.getElementById("audioList");
        const clearAudioBtn = document.getElementById("clearAudioBtn");

        // ---------------------- ASR：录音功能 ----------------------
        // 开始录音
        recordBtn.addEventListener("click", async () => {
            try {
                // 获取麦克风权限
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                mediaRecorder = new MediaRecorder(stream);
                audioChunks = [];

                // 监听录音数据
                mediaRecorder.ondataavailable = (e) => {
                    audioChunks.push(e.data);
                };

                // 录音结束后启用转写按钮
                mediaRecorder.onstop = () => {
                    recordBtn.disabled = false;
                    stopRecordBtn.disabled = true;
                    asrBtn.disabled = false;
                    asrStatus.textContent = "录音完成，可点击「转写文本」";
                    asrStatus.className = "status success";
                };

                // 启动录音
                mediaRecorder.start();
                recordBtn.disabled = true;
                stopRecordBtn.disabled = false;
                asrBtn.disabled = true;
                asrStatus.textContent = "正在录音...请说话（建议5秒内）";
                asrStatus.className = "status";
            } catch (e) {
                asrStatus.textContent = `录音失败：${e.message}（请允许麦克风权限）`;
                asrStatus.className = "status error";
            }
        });

        // 停止录音
        stopRecordBtn.addEventListener("click", () => {
            if (mediaRecorder && mediaRecorder.state !== "inactive") {
                mediaRecorder.stop();
                // 停止所有音频轨道
                mediaRecorder.stream.getTracks().forEach(track => track.stop());
            }
        });

        // ---------------------- ASR：语音转文本 ----------------------
        asrBtn.addEventListener("click", async () => {
            try {
                asrBtn.disabled = true;
                asrStatus.textContent = "正在转写文本...";
                asrStatus.className = "status";

                // 1. 将录音数据转为WAV文件（适配Whisper）
                const audioBlob = new Blob(audioChunks, { type: "audio/wav" });
                const formData = new FormData();
                formData.append("audio", audioBlob, "record.wav");

                // 2. 调用后端ASR接口
                const response = await fetch(`${BACKEND_URL}/asr`, {
                    method: "POST",
                    body: formData
                });
                const result = await response.json();

                // 3. 处理结果
                if (result.code === 200) {
                    asrResult.value = result.data.text;
                    asrStatus.textContent = "转写成功！";
                    asrStatus.className = "status success";
                    // 自动填充到TTS文本框（方便后续TTS）
                    ttsText.value = result.data.text || ttsText.value;
                    // 添加到历史记录
                    addToHistory('asr', result.data.text);
                } else {
                    asrStatus.textContent = `转写失败：${result.msg}`;
                    asrStatus.className = "status error";
                }
            } catch (e) {
                asrStatus.textContent = `转写异常：${e.message}`;
                asrStatus.className = "status error";
            } finally {
                asrBtn.disabled = false;
            }
        });

        // ---------------------- TTS：文本转语音 ----------------------
        ttsBtn.addEventListener("click", async () => {
            try {
                ttsBtn.disabled = true;
                ttsStatus.textContent = "正在生成语音...";
                ttsStatus.className = "status";

                // 1. 获取文本
                const text = ttsText.value.trim();
                if (!text) {
                    ttsStatus.textContent = "错误：文本不能为空";
                    ttsStatus.className = "status error";
                    ttsBtn.disabled = false;
                    return;
                }

                // 2. 调用后端TTS接口
                const response = await fetch(`${BACKEND_URL}/tts`, {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json"
                    },
                    body: JSON.stringify({ text })
                });
                const result = await response.json();

                // 3. 处理结果
                if (result.code === 200) {
                    // 设置音频播放地址
                    ttsAudio.src = result.data.tts_url;
                    ttsAudio.play();  // 自动播放
                    ttsStatus.textContent = "语音生成并播放成功！";
                    ttsStatus.className = "status success";
                    // 添加到历史记录
                    addToHistory('tts', text);
                    // 添加到音频列表
                    addToAudioList(text, result.data.tts_url);
                } else {
                    ttsStatus.textContent = `生成失败：${result.msg}`;
                    ttsStatus.className = "status error";
                }
            } catch (e) {
                ttsStatus.textContent = `生成异常：${e.message}`;
                ttsStatus.className = "status error";
            } finally {
                ttsBtn.disabled = false;
            }
        });

        // ---------------------- 辅助功能：清理音频文件 ----------------------
        cleanBtn.addEventListener("click", async () => {
            try {
                cleanBtn.disabled = true;
                cleanStatus.textContent = "正在清理音频文件...";
                cleanStatus.className = "status";

                // 1. 清理前端localStorage中的音频记录
                localStorage.removeItem('ttsAudioRecords');
                audioRecords = [];
                renderAudioList();

                // 2. 尝试调用后端清理接口
                try {
                    const response = await fetch(`${BACKEND_URL}/clean`, {
                        method: "GET"
                    });
                    const result = await response.json();

                    if (result.code === 200) {
                        cleanStatus.textContent = "音频文件清理成功！（前后端均已清理）";
                        cleanStatus.className = "status success";
                    } else {
                        cleanStatus.textContent = `后端清理失败：${result.msg}，但前端音频记录已清理`;
                        cleanStatus.className = "status warning";
                    }
                } catch (e) {
                    cleanStatus.textContent = "后端服务不可用，但前端音频记录已清理";
                    cleanStatus.className = "status warning";
                }
            } catch (e) {
                cleanStatus.textContent = `清理异常：${e.message}`;
                cleanStatus.className = "status error";
            } finally {
                cleanBtn.disabled = false;
            }
        });

        // ---------------------- 历史记录管理 ----------------------
        
        // 添加记录到历史
        function addToHistory(type, text) {
            const record = {
                id: Date.now(),
                type: type,
                text: text,
                time: new Date().toLocaleString('zh-CN')
            };
            
            // 添加到历史记录数组的开头
            historyRecords.unshift(record);
            
            // 限制历史记录数量（最多20条）
            if (historyRecords.length > 20) {
                historyRecords = historyRecords.slice(0, 20);
            }
            
            // 保存到localStorage
            localStorage.setItem('ttsAsrHistory', JSON.stringify(historyRecords));
            
            // 更新历史记录显示
            renderHistory();
        }
        
        // 渲染历史记录
        function renderHistory() {
            historyList.innerHTML = '';
            
            if (historyRecords.length === 0) {
                const emptyItem = document.createElement('li');
                emptyItem.className = 'history-item';
                emptyItem.innerHTML = '<div class="history-item-text">暂无历史记录</div>';
                emptyItem.style.textAlign = 'center';
                emptyItem.style.color = '#999';
                emptyItem.style.cursor = 'default';
                emptyItem.style.boxShadow = 'none';
                historyList.appendChild(emptyItem);
                return;
            }
            
            historyRecords.forEach(record => {
                const li = document.createElement('li');
                li.className = 'history-item';
                li.dataset.id = record.id;
                
                const typeText = record.type === 'asr' ? '语音转文本' : '文本转语音';
                const typeIcon = record.type === 'asr' ? '🔊' : '📢';
                
                li.innerHTML = `
                    <div class="history-item-time">${record.time}</div>
                    <div class="history-item-text">${record.text}</div>
                    <div class="history-item-type">${typeIcon} ${typeText}</div>
                `;
                
                // 添加点击事件
                li.addEventListener('click', () => {
                    // 将历史记录的文本填充到对应输入框
                    if (record.type === 'asr') {
                        asrResult.value = record.text;
                        ttsText.value = record.text;
                    } else {
                        ttsText.value = record.text;
                    }
                });
                
                historyList.appendChild(li);
            });
        }
        
        // 清空历史记录函数
        function clearHistory() {
            if (confirm('确定要清空所有历史记录吗？')) {
                historyRecords = [];
                localStorage.removeItem('ttsAsrHistory');
                renderHistory();
            }
        }
        
        // 清空历史记录按钮事件
        clearHistoryBtn.addEventListener('click', clearHistory);
        clearHistoryInMainBtn.addEventListener('click', clearHistory);
        
        // 清空音频列表按钮事件
        clearAudioBtn.addEventListener('click', () => {
            if (confirm('确定要清空所有已生成的音频吗？')) {
                localStorage.removeItem('ttsAudioRecords');
                audioRecords = [];
                renderAudioList();
                cleanStatus.textContent = "音频列表已清空";
                cleanStatus.className = "status success";
                setTimeout(() => {
                    cleanStatus.textContent = "";
                    cleanStatus.className = "status";
                }, 3000);
            }
        });
        
        // ---------------------- 音频列表管理 ----------------------
        
        // 添加音频到列表
        function addToAudioList(text, audioUrl) {
            const audioRecord = {
                id: Date.now(),
                text: text,
                audioUrl: audioUrl,
                time: new Date().toLocaleString('zh-CN')
            };
            
            // 添加到音频记录数组的开头
            audioRecords.unshift(audioRecord);
            
            // 限制最多保存10条音频记录
            if (audioRecords.length > 10) {
                audioRecords = audioRecords.slice(0, 10);
            }
            
            // 保存到localStorage
            localStorage.setItem('ttsAudioRecords', JSON.stringify(audioRecords));
            
            // 更新音频列表显示
            renderAudioList();
        }
        
        // 渲染音频列表
        function renderAudioList() {
            audioList.innerHTML = '';
            
            if (audioRecords.length === 0) {
                const emptyItem = document.createElement('li');
                emptyItem.className = 'audio-item';
                emptyItem.innerHTML = '<div class="audio-item-text">暂无生成的音频</div>';
                emptyItem.style.textAlign = 'center';
                emptyItem.style.color = '#999';
                emptyItem.style.cursor = 'default';
                emptyItem.style.boxShadow = 'none';
                audioList.appendChild(emptyItem);
                return;
            }
            
            audioRecords.forEach(record => {
                const li = document.createElement('li');
                li.className = 'audio-item';
                li.dataset.id = record.id;
                
                li.innerHTML = `
                    <div class="audio-item-time">${record.time}</div>
                    <div class="audio-item-text">${record.text}</div>
                    <div class="audio-item-controls">
                        <button onclick="playAudio('${record.audioUrl}')" title="播放">播放</button>
                        <button onclick="useAudioText('${encodeURIComponent(record.text)}')" title="使用此文本">使用</button>
                        <button onclick="removeAudioRecord(${record.id})" title="删除">删除</button>
                    </div>
                `;
                
                audioList.appendChild(li);
            });
        }
        
        // 播放音频
        function playAudio(audioUrl) {
            ttsAudio.src = audioUrl;
            ttsAudio.play();
        }
        
        // 使用音频对应的文本
        function useAudioText(text) {
            ttsText.value = decodeURIComponent(text);
        }
        
        // 删除音频记录
        function removeAudioRecord(id) {
            audioRecords = audioRecords.filter(record => record.id !== id);
            localStorage.setItem('ttsAudioRecords', JSON.stringify(audioRecords));
            renderAudioList();
        }
        
        // 页面加载时渲染历史记录和音频列表
        renderHistory();
        renderAudioList();
    </script>
</body>
</html>