Youtu-2B语音助手前端ASRLLM联动部署教程想打造一个能听会说、还能跟你智能聊天的语音助手吗今天我们就来手把手教你如何将强大的Youtu-2B大语言模型与自动语音识别技术结合部署一个功能完整的语音对话前端应用。整个过程就像搭积木简单几步你就能拥有一个属于自己的AI语音伙伴。1. 项目准备与环境搭建在开始动手之前我们先来了解一下这个项目的核心组件和需要准备的环境。1.1 核心组件介绍这个语音助手主要由三部分组成它们协同工作就像一条高效的流水线语音识别前端负责“听”。这是一个基于浏览器的Web应用使用JavaScript的Web Speech API来录制你的语音并将其转换成文本。这是用户交互的入口。Youtu-2B LLM服务负责“思考”。这就是我们本次部署的主角一个高性能的2B参数大语言模型。它接收前端传来的文本问题进行逻辑推理和内容生成然后返回文本答案。语音合成服务负责“说”。将LLM生成的文本答案通过语音合成技术转换成自然流畅的语音播放给用户听。本教程将重点放在部署Youtu-2B LLM服务并指导你如何构建一个简单的前端页面将这三个环节串联起来。1.2 环境要求与快速启动你不需要准备昂贵的GPU服务器。得益于Youtu-2B模型的轻量化设计它可以在消费级显卡甚至CPU上流畅运行。基础环境要求操作系统主流Linux发行版如Ubuntu 20.04或Windows通过WSL2。内存建议8GB以上。存储至少10GB可用空间。网络可访问互联网用于下载模型文件。一键启动Youtu-2B服务最简便的方式是使用预制的Docker镜像。假设你已经安装好Docker只需一行命令docker run -d -p 8080:8080 --name youtu-llm-service csdn/youtu-llm-2b:latest这条命令做了以下几件事-d让容器在后台运行。-p 8080:8080将容器内部的8080端口映射到你电脑的8080端口。--name youtu-llm-service给容器起个名字方便管理。csdn/youtu-llm-2b:latest指定要运行的镜像。执行后打开浏览器访问http://你的服务器IP:8080就能看到Youtu-2B自带的Web聊天界面了。这证明核心的“大脑”已经成功启动。2. 构建语音助手前端页面现在我们来创建一个简单的HTML页面作为语音助手的“脸”和“耳朵”。这个页面会集成录音、调用LLM、播放语音的功能。2.1 创建基础HTML结构新建一个名为voice_assistant.html的文件用下面的代码作为骨架!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的Youtu-2B语音助手/title style body { font-family: Arial, sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; } #chatBox { border: 1px solid #ccc; height: 400px; overflow-y: auto; padding: 10px; margin-bottom: 20px; } .user-msg { text-align: right; color: blue; margin: 5px 0; } .ai-msg { text-align: left; color: green; margin: 5px 0; } #controls { text-align: center; } button { padding: 10px 20px; margin: 5px; font-size: 16px; cursor: pointer; } #status { margin-top: 10px; color: #666; } /style /head body h1 Youtu-2B 语音助手/h1 div idchatBox/div div idcontrols button idstartBtn 开始说话/button button idstopBtn disabled⏹️ 停止/button button idtextSendBtn 发送文本/button input typetext idtextInput placeholder或者直接输入文字... stylepadding: 10px; width: 300px; /div div idstatus就绪/div audio idaudioPlayer controls styledisplay:none;/audio script // 我们的JavaScript代码将写在这里 /script /body /html这个页面包含了一个聊天记录显示框、录音控制按钮、文本输入框和一个隐藏的音频播放器。界面简洁功能明确。2.2 实现语音识别与录音功能接下来在script标签内我们使用浏览器的Web Speech API来实现录音和语音转文字。注意这个API需要HTTPS环境或在localhost本地环境下才能使用。// 获取页面元素 const chatBox document.getElementById(chatBox); const startBtn document.getElementById(startBtn); const stopBtn document.getElementById(stopBtn); const textSendBtn document.getElementById(textSendBtn); const textInput document.getElementById(textInput); const statusDiv document.getElementById(status); const audioPlayer document.getElementById(audioPlayer); let recognition; let isRecording false; // 初始化语音识别 if (webkitSpeechRecognition in window) { recognition new webkitSpeechRecognition(); recognition.continuous false; // 单次识别 recognition.interimResults false; // 不要中间结果 recognition.lang zh-CN; // 设置中文 recognition.onstart function() { statusDiv.textContent 正在聆听...; isRecording true; startBtn.disabled true; stopBtn.disabled false; }; recognition.onresult function(event) { const transcript event.results[0][0].transcript; addMessageToChat(user, transcript); statusDiv.textContent 识别结果: ${transcript}; // 识别完成后自动发送给LLM sendToLLM(transcript); }; recognition.onerror function(event) { statusDiv.textContent 识别错误: event.error; resetRecordingState(); }; recognition.onend function() { resetRecordingState(); }; } else { statusDiv.textContent 抱歉您的浏览器不支持语音识别。请使用Chrome或Edge浏览器。; startBtn.disabled true; } function resetRecordingState() { isRecording false; startBtn.disabled false; stopBtn.disabled true; statusDiv.textContent 就绪; } startBtn.onclick function() { if (recognition !isRecording) { recognition.start(); } }; stopBtn.onclick function() { if (recognition isRecording) { recognition.stop(); } };这段代码创建了一个语音识别对象点击“开始说话”按钮后浏览器会请求麦克风权限然后开始录音。当你停止说话它会自动将语音转换成文字并显示在聊天框中。2.3 连接Youtu-2B LLM服务语音转成文字后我们需要把这段文字“提问”给后台的Youtu-2B模型。我们将通过调用其API接口来实现。// Youtu-2B 服务的后端地址默认是本地8080端口 const LLM_API_URL http://localhost:8080/chat; // 发送文本到LLM并获取回复 async function sendToLLM(userInput) { if (!userInput.trim()) return; statusDiv.textContent 思考中...; try { const response await fetch(LLM_API_URL, { method: POST, headers: { Content-Type: application/x-www-form-urlencoded, }, body: prompt${encodeURIComponent(userInput)} }); if (!response.ok) { throw new Error(网络响应错误: ${response.status}); } const data await response.json(); // 假设API返回 { response: 这里是AI的回复 } const aiReply data.response || data.answer || 收到但回复为空。; addMessageToChat(ai, aiReply); statusDiv.textContent 回复已生成; // 接下来可以在这里调用语音合成将aiReply转换成语音 // textToSpeech(aiReply); } catch (error) { console.error(调用LLM失败:, error); addMessageToChat(ai, 抱歉处理您的请求时出错了: ${error.message}); statusDiv.textContent 请求失败; } } // 为文本发送按钮添加事件 textSendBtn.onclick function() { const inputText textInput.value.trim(); if (inputText) { addMessageToChat(user, inputText); sendToLLM(inputText); textInput.value ; // 清空输入框 } }; // 支持按回车键发送文本 textInput.addEventListener(keypress, function(e) { if (e.key Enter) { textSendBtn.click(); } }); // 辅助函数添加消息到聊天框 function addMessageToChat(sender, message) { const msgDiv document.createElement(div); msgDiv.className sender user ? user-msg : ai-msg; msgDiv.innerHTML strong${sender user ? 你 : 助手}:/strong ${message}; chatBox.appendChild(msgDiv); chatBox.scrollTop chatBox.scrollHeight; // 自动滚动到底部 }现在你的前端已经具备了“听”和“问”的能力。语音识别的文字或手动输入的文字都会被发送到本机8080端口运行的Youtu-2B服务并获取文本回复。3. 集成语音合成与完整联调一个完整的语音助手还需要“说”的能力。我们可以利用浏览器自带的SpeechSynthesisAPI来实现简单的文本转语音。3.1 实现文本转语音功能在上面的sendToLLM函数中我们预留了// textToSpeech(aiReply);这行注释。现在我们来实现这个函数。// 文本转语音功能 function textToSpeech(text) { if (speechSynthesis in window) { // 停止任何正在进行的语音 speechSynthesis.cancel(); const utterance new SpeechSynthesisUtterance(text); utterance.lang zh-CN; // 设置中文 utterance.rate 1.0; // 语速 utterance.pitch 1.0; // 音调 utterance.volume 1.0; // 音量 // 尝试选择一个中文语音取决于浏览器和系统支持 const voices speechSynthesis.getVoices(); const chineseVoice voices.find(voice voice.lang zh-CN || voice.lang.startsWith(zh-)); if (chineseVoice) { utterance.voice chineseVoice; } utterance.onstart function() { statusDiv.textContent 正在播报回复...; }; utterance.onend function() { statusDiv.textContent 就绪; }; utterance.onerror function(event) { console.error(语音合成错误:, event); statusDiv.textContent 语音播报失败; }; speechSynthesis.speak(utterance); } else { console.warn(当前浏览器不支持语音合成API); // 如果不支持可以在这里隐藏或禁用语音播放按钮 } }然后取消sendToLLM函数中那行注释让AI回复后自动播报// 在 sendToLLM 函数的成功回调中找到这行 const aiReply data.response || data.answer || 收到但回复为空。; addMessageToChat(ai, aiReply); statusDiv.textContent 回复已生成; // 在这之后添加语音合成调用 textToSpeech(aiReply); // 取消注释启用语音播报3.2 解决跨域问题与完整测试现在所有代码都准备好了。但在测试前你可能会遇到一个关键问题跨域请求。你的前端页面通过file://协议或一个本地Web服务器打开在向http://localhost:8080发送请求时浏览器会因为安全策略而阻止。我们需要在启动Youtu-2B Docker服务时配置后端允许跨域。更简单的方案使用反向代理或修改前端API地址。方案A使用Nginx反向代理推荐更接近生产环境安装Nginx。修改Nginx配置文件如/etc/nginx/sites-available/default添加一个将前端请求代理到后端LLM服务的位置块并设置CORS头。方案B为Flask后端添加CORS支持修改Docker镜像或启动命令如果你能修改后端代码或启动参数可以在Flask应用中安装并启用flask-cors扩展。方案C快速测试方案修改前端对于本地快速测试最简单的方法是将前端页面也通过同一个域来访问。我们可以用Python快速启动一个本地HTTP服务器来托管前端页面并确保Youtu-2B服务也在运行。确保Youtu-2B服务在运行 (docker ps查看)。将你的voice_assistant.html文件放在一个空文件夹里。在该文件夹打开终端运行python3 -m http.server 8000(Python 3)。现在用浏览器访问http://localhost:8000/voice_assistant.html。由于前端页面(localhost:8000)和后端API(localhost:8080)的端口不同跨域问题依然存在。作为终极测试方案你可以临时修改前端代码中的LLM_API_URL利用一些允许跨域的免费测试代理或者为了演示暂时注释掉语音识别只测试文本发送功能并确保你的后端部署在支持CORS的云服务上。重要提示对于真正的生产部署方案ANginx反向代理是最规范和安全的选择。它将前端和后端统一在一个域名下彻底避免跨域问题。4. 总结与进阶探索恭喜你至此你已经完成了一个集成ASR语音识别、LLM大语言模型和TTS语音合成的语音助手前端原型。让我们回顾一下关键步骤部署核心大脑使用Docker一键部署了轻量高效的Youtu-2B大语言模型服务。打造交互界面用HTML/JavaScript创建了一个包含语音和文字输入的前端页面。实现“听”的功能利用浏览器Web Speech API捕获并转换用户语音为文本。实现“思考”的连接通过Fetch API将用户问题发送给Youtu-2B服务并获取智能回复。实现“说”的功能利用SpeechSynthesisAPI将AI的文本回复转换为语音。这个项目可以如何变得更好提升语音识别质量Web Speech API的识别精度和稳定性有限。可以考虑集成更专业的云端ASR服务如各大云厂商提供的语音识别API以获得更准确、支持离线/在线的识别能力。优化语音合成体验浏览器的语音合成声音可能比较机械。可以接入更自然的语音合成服务调整语速、语调甚至使用特定角色的音色。增加对话上下文让AI能记住之前的对话内容实现多轮对话体验会更智能。美化前端界面使用Vue.js、React等框架构建更美观、交互更流畅的SPA应用。处理网络与错误增加更完善的加载状态、错误提示和重试机制。这个教程为你打开了一扇门展示了如何将不同的AI能力模块组合成一个实用的应用。Youtu-2B模型作为其中的“思考中枢”以其轻量和高效的特点非常适合此类需要快速响应的交互场景。动手尝试并在此基础上创造出更酷的应用吧获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。