前端如何对接？SenseVoiceSmall WebUI二次开发实战-洪萨配资

前端如何对接？SenseVoiceSmall WebUI二次开发实战

1. 引言：让语音“有情绪”的AI识别体验

你有没有遇到过这样的问题：一段录音里，说话人明显很激动，但转写出来的文字却平平无奇？传统语音识别只管“说了什么”，却忽略了“怎么说的”。而今天我们要聊的SenseVoiceSmall，正是为了解决这个问题而生。

这是阿里巴巴达摩院开源的一款多语言语音理解模型，不仅能精准识别中文、英文、日语、韩语和粤语，更厉害的是——它能听出声音里的情感（比如开心、愤怒、悲伤）和环境事件（如背景音乐、掌声、笑声）。换句话说，它不只是“翻译”语音，而是真正“理解”语音。

本镜像已集成 Gradio 构建的 WebUI 界面，开箱即用。但如果你希望将这套能力嵌入自己的前端系统，或者定制化交互流程，那就得动手做二次开发了。本文将带你从零开始，一步步实现前端如何对接 SenseVoiceSmall 的 Web 服务，并完成个性化功能扩展。

2. 技术架构与核心依赖

在动手之前，先搞清楚整个系统的组成结构，有助于我们理清前后端的职责边界。

2.1 整体架构概览

[用户上传音频] ↓ [Gradio 前端界面] ←→ [Python 后端服务 (app_sensevoice.py)] ↓ [SenseVoiceSmall 模型推理] ↓ [返回带情感标签的富文本结果]

前端部分：Gradio 自动生成的网页界面，负责文件上传、参数选择、结果显示。
后端服务：基于funasr和AutoModel加载模型，执行推理逻辑。
通信方式：Gradio 内部使用 WebSocket 或 HTTP 长轮询进行前后端数据交换。

我们的目标是：绕过默认页面，直接调用其后端 API 接口，或将功能嵌入自定义前端。

2.2 关键技术栈说明

组件	作用
`funasr`	阿里推出的语音识别工具包，支持多种模型加载
`modelscope`	ModelScope 平台 SDK，用于下载和管理模型
`gradio`	快速构建 Web 交互界面的 Python 库
`av`/`ffmpeg`	音频解码库，处理不同格式的输入音频
`rich_transcription_postprocess`	内置函数，清洗原始输出中的情感/事件标签

这些组件共同构成了一个完整的语音理解流水线。

3. 启动服务并开放接口

要让前端能访问到模型能力，首先得确保后端服务正常运行，并对外暴露可用端口。

3.1 安装必要依赖

如果镜像未预装完整环境，请手动安装：

pip install funasr modelscope gradio av

注意：av是 PyAV 的别名，用于高效音频解码；若安装失败可尝试：

conda install -c conda-forge pyav

3.2 编写主服务脚本（app_sensevoice.py）

以下是简化版的服务启动代码，保留核心逻辑，便于后续对接：

# app_sensevoice.py from funasr import AutoModel from funasr.utils.postprocess_utils import rich_transcription_postprocess import gradio as gr # 初始化模型 model = AutoModel( model="iic/SenseVoiceSmall", trust_remote_code=True, device="cuda:0", # 使用 GPU 加速 ) def transcribe_with_emotion(audio_path, language="auto"): if not audio_path: return {"error": "请上传音频文件"} try: res = model.generate( input=audio_path, language=language, use_itn=True, batch_size_s=60, ) raw_text = res[0]["text"] clean_text = rich_transcription_postprocess(raw_text) return { "raw": raw_text, "text": clean_text, "duration": res[0].get("duration", "unknown") } except Exception as e: return {"error": str(e)} # 创建 Gradio 接口 demo = gr.Interface( fn=transcribe_with_emotion, inputs=[ gr.Audio(type="filepath"), gr.Dropdown(choices=["auto", "zh", "en", "yue", "ja", "ko"], value="auto", label="语言") ], outputs=gr.JSON(label="识别结果"), title="🎙️ SenseVoice 情感语音识别 API", description="支持多语言 + 情感/事件检测" ) # 启动服务 if __name__ == "__main__": demo.launch(server_name="0.0.0.0", server_port=6006, share=False)

提示：demo.launch()中设置server_name="0.0.0.0"才能被外部访问，port=6006可根据需要调整。

4. 前端对接方案详解

现在后端服务已经跑起来了，接下来就是重点：如何从前端发起请求，获取识别结果？

4.1 Gradio 的 API 路由机制

Gradio 在启动时会自动生成两个关键接口：

GET /：网页首页
POST /api/predict/：模型预测接口

我们可以通过分析网络请求，找到具体的调用格式。

示例：查看请求体结构

打开浏览器开发者工具，在默认界面上传一个音频并提交，观察 Network 面板中/api/predict的请求内容：

{ "data": [ "data/audio.wav", "auto" ], "event_data": null, "fn_index": 0 }

响应示例：

{ "data": [ "{\"text\": \"你好呀 <|HAPPY|>！今天很开心 <|LAUGHTER|>\", \"raw\": \"<|zh|><|HAPPY|>你好呀 <|HAPPY|>！今天很开心 <|LAUGHTER|>\"}" ] }

可以看到，Gradio 将所有输入封装在data数组中，按参数顺序排列。

4.2 自定义 HTML + JavaScript 对接

我们可以完全脱离 Gradio 默认页面，用原生 HTML 写一个简洁前端。

前端代码示例（index.html）

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>SenseVoice 语音识别</title> <style> body { font-family: Arial, sans-serif; padding: 20px; max-width: 800px; margin: 0 auto; } .upload-area { border: 2px dashed #ccc; padding: 20px; text-align: center; margin: 20px 0; } button { padding: 10px 20px; font-size: 16px; background: #007bff; color: white; border: none; cursor: pointer; } pre { background: #f4f4f4; padding: 15px; border-radius: 5px; overflow-x: auto; } </style> </head> <body> <h1>🎙️ SenseVoice 多语言情感识别</h1> <p>上传音频，自动识别内容及情绪。</p> <div class="upload-area"> <input type="file" id="audioInput" accept="audio/*" /> <select id="langSelect"> <option value="auto">自动识别</option> <option value="zh">中文</option> <option value="en">英文</option> <option value="yue">粤语</option> <option value="ja">日语</option> <option value="ko">韩语</option> </select> <button onclick="startTranscribe()">开始识别</button> </div> <h3>识别结果：</h3> <pre id="result"></pre> <script> async function startTranscribe() { const fileInput = document.getElementById('audioInput'); const lang = document.getElementById('langSelect').value; const resultEl = document.getElementById('result'); if (!fileInput.files.length) { alert("请先上传音频文件！"); return; } const formData = new FormData(); formData.append('audio', fileInput.files[0]); try { // 第一步：上传音频到服务器（假设有一个上传接口） const uploadRes = await fetch('/upload', { method: 'POST', body: formData }); const uploadData = await uploadRes.json(); const filePath = uploadData.path; // 第二步：调用 Gradio API const apiRes = await fetch('http://127.0.0.1:6006/api/predict/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ data: [filePath, lang], fn_index: 0 }) }); const apiData = await apiRes.json(); const result = JSON.parse(apiData.data[0]); resultEl.textContent = `原文：${result.text}\n\n标签：${result.raw}`; } catch (err) { resultEl.textContent = "识别出错：" + err.message; } } </script> </body> </html>

⚠️ 注意：此方案需额外实现/upload接口来接收前端文件并保存至服务器路径。

5. 更灵活的部署方式：Flask + CORS 中间层

为了避免跨域问题和文件路径限制，推荐增加一层轻量级中间服务。

5.1 使用 Flask 构建代理接口

# api_server.py from flask import Flask, request, jsonify import requests import os from werkzeug.utils import secure_filename app = Flask(__name__) UPLOAD_FOLDER = '/tmp/audio' os.makedirs(UPLOAD_FOLDER, exist_ok=True) @app.route('/upload', methods=['POST']) def upload_audio(): if 'audio' not in request.files: return jsonify({"error": "无音频文件"}), 400 file = request.files['audio'] filename = secure_filename(file.filename) filepath = os.path.join(UPLOAD_FOLDER, filename) file.save(filepath) return jsonify({"path": filepath}) @app.route('/transcribe', methods=['POST']) def proxy_transcribe(): data = request.json audio_path = data.get('audio_path') language = data.get('language', 'auto') # 转发给 Gradio 服务 gradio_url = "http://127.0.0.1:6006/api/predict/" payload = { "data": [audio_path, language], "fn_index": 0 } try: resp = requests.post(gradio_url, json=payload) result = resp.json() raw_output = result['data'][0] parsed = eval(raw_output) # 注意：此处为简化演示，生产环境建议更安全解析 return jsonify(parsed) except Exception as e: return jsonify({"error": str(e)}), 500 if __name__ == '__main__': app.run(host='0.0.0.0', port=5000)

5.2 修改前端调用逻辑

// 替换原来两步操作为一键识别 async function startTranscribe() { const formData = new FormData(); formData.append('audio', fileInput.files[0]); // 直接通过中间层完成上传+识别 const res = await fetch('http://your-server:5000/transcribe', { method: 'POST', body: formData // 这里可以优化为先上传再调用，或合并处理 }); const data = await res.json(); resultEl.textContent = data.text || data.error; }

这种方式解耦了前端与模型服务之间的强依赖，更适合集成进企业系统。

6. 实用技巧与常见问题

6.1 如何提取情感标签用于可视化？

原始输出中包含类似<|HAPPY|>的标记，可通过正则提取：

import re def extract_events(text): patterns = { 'emotion': r'<\|(HAPPY|ANGRY|SAD)\|>', 'event': r'<\|(BGM|APPLAUSE|LAUGHTER|CRY)\|>' } results = {} for key, pattern in patterns.items(): matches = re.findall(pattern, text) results[key] = matches return results # 示例 text = "<|HAPPY|>太棒了！<|LAUGHTER|><|BGM|>" print(extract_events(text)) # 输出: {'emotion': ['HAPPY'], 'event': ['LAUGHTER', 'BGM']}

可用于生成情绪曲线图或事件时间轴。

6.2 支持长音频吗？

SenseVoiceSmall 本身适合短语音（<30秒），对于长音频建议：

分段切割（使用pydub）
滑动窗口 VAD 检测（模型自带fsmn-vad）
批量处理后拼接结果

6.3 性能优化建议

使用 GPU 推理（CUDA）
开启batch_size_s提高吞吐
缓存模型实例避免重复加载
合理设置merge_length_s控制段落合并粒度

7. 总结：打造属于你的智能语音前台

通过本次实战，我们完成了从默认 WebUI 到自定义前端对接的全过程：

理解了 SenseVoiceSmall 的核心能力：多语言 + 情感/事件识别
掌握了 Gradio 的 API 调用机制（/api/predict）
实现了纯 HTML + JS 的前端对接方案
引入 Flask 中间层解决跨域与文件上传难题
提供了情感标签提取、性能优化等实用技巧

你现在完全可以基于这套体系，开发出适用于客服质检、视频字幕生成、课堂情绪分析等场景的专属应用。

更重要的是——你不再只是“使用者”，而是掌握了将其深度集成的能力。

获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。

前端如何对接？SenseVoiceSmall WebUI二次开发实战