2025-03-31 09:38:26 +08:00
<!DOCTYPE html>
< html lang = "zh-CN" >
2025-03-31 21:04:11 +08:00
2025-03-31 09:38:26 +08:00
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > 小智服务器测试页面</ title >
2025-08-11 14:24:06 +08:00
< link rel = "stylesheet" href = "test_page.css" >
2025-08-16 14:36:23 +08:00
< style >
# fileProtocolWarning {
position : fixed ;
top : 0 ;
left : 0 ;
width : 100 % ;
height : 100 % ;
background-color : rgba ( 0 , 0 , 0 , 0.8 );
display : flex ;
flex-direction : column ;
align-items : center ;
justify-content : center ;
z-index : 9999 ;
color : white ;
padding : 20 px ;
box-sizing : border-box ;
}
# fileProtocolWarning h2 {
color : #ff4d4d ;
margin-bottom : 20 px ;
}
# fileProtocolWarning pre {
background-color : green ;
font-size : 18 px ;
padding : 15 px ;
border-radius : 5 px ;
font-family : monospace ;
overflow-x : auto ;
margin : 15 px 0 ;
}
# fileProtocolWarning button {
background-color : #4CAF50 ;
color : white ;
border : none ;
padding : 10 px 20 px ;
text-align : center ;
text-decoration : none ;
display : inline-block ;
font-size : 16 px ;
margin : 10 px 2 px ;
cursor : pointer ;
border-radius : 4 px ;
}
# fileProtocolWarning button : hover {
background-color : #45a049 ;
}
2025-10-24 10:17:32 +08:00
/* MCP 工具管理样式 */
. mcp-tools-container {
display : grid ;
gap : 12 px ;
margin-top : 10 px ;
}
. mcp-tool-card {
background-color : white ;
border : 1 px solid #e0e0e0 ;
border-radius : 8 px ;
padding : 15 px ;
transition : all 0.2 s ;
}
. mcp-tool-card : hover {
box-shadow : 0 2 px 8 px rgba ( 0 , 0 , 0 , 0.1 );
}
. mcp-tool-card . disabled {
opacity : 0.6 ;
pointer-events : none ;
}
. mcp-tool-header {
display : flex ;
align-items : center ;
justify-content : space-between ;
margin-bottom : 10 px ;
}
. mcp-tool-name {
font-size : 15 px ;
font-weight : 600 ;
color : #333 ;
flex : 1 ;
}
. mcp-tool-actions {
display : flex ;
gap : 6 px ;
}
. mcp-tool-description {
color : #666 ;
font-size : 13 px ;
line-height : 1.5 ;
margin-bottom : 8 px ;
}
. mcp-tool-info {
background-color : #f9f9f9 ;
border : 1 px solid #e0e0e0 ;
border-radius : 4 px ;
padding : 8 px ;
font-size : 12 px ;
}
. mcp-tool-info-row {
display : flex ;
gap : 15 px ;
margin-bottom : 4 px ;
}
. mcp-tool-info-label {
color : #999 ;
min-width : 60 px ;
}
. mcp-tool-info-value {
color : #333 ;
font-family : 'Courier New' , monospace ;
}
. mcp-property-item {
background-color : white ;
border : 1 px solid #e0e0e0 ;
border-radius : 5 px ;
padding : 12 px ;
margin-bottom : 10 px ;
}
. mcp-property-header {
display : flex ;
align-items : center ;
justify-content : space-between ;
margin-bottom : 10 px ;
}
. mcp-property-name {
font-weight : 600 ;
color : #333 ;
}
. mcp-property-row {
display : grid ;
grid-template-columns : 1 fr 1 fr ;
gap : 10 px ;
margin-bottom : 8 px ;
}
. mcp-property-row-full {
margin-bottom : 8 px ;
}
. mcp-small-label {
display : block ;
margin-bottom : 4 px ;
font-size : 12 px ;
color : #666 ;
}
. mcp-small-input {
width : 100 % ;
padding : 6 px 8 px ;
border : 1 px solid #ddd ;
border-radius : 4 px ;
font-size : 13 px ;
}
. mcp-checkbox-label {
display : flex ;
align-items : center ;
gap : 6 px ;
font-size : 13 px ;
color : #666 ;
cursor : pointer ;
}
. mcp-error {
background-color : #ffebee ;
color : #c62828 ;
padding : 10 px ;
border-radius : 5 px ;
margin-bottom : 15 px ;
font-size : 14 px ;
}
. mcp-badge {
display : inline-block ;
padding : 2 px 8 px ;
border-radius : 12 px ;
font-size : 11 px ;
font-weight : 500 ;
margin-left : 8 px ;
}
. mcp-badge-required {
background-color : #ffebee ;
color : #c62828 ;
}
. mcp-badge-optional {
background-color : #e3f2fd ;
color : #1976d2 ;
}
2025-08-16 14:36:23 +08:00
</ style >
< script >
// 检测是否使用file://协议打开
if ( window . location . protocol === 'file:' ) {
document . addEventListener ( 'DOMContentLoaded' , function () {
// 创建警告框
const warningDiv = document . createElement ( 'div' );
warningDiv . id = 'fileProtocolWarning' ;
warningDiv . innerHTML = `
<h2>⚠️ 警告：请使用HTTP服务器打开此页面</h2>
<p>您当前使用的是本地文件方式打开页面（file://协议），这可能导致页面功能异常。</p>
<p>您可以使用nginx映射启动测试页面，也可以请按照以下步骤使用python启动测试http服务：</p>
<ol>
<li>打开命令行终端</li>
<li>命令行进入到 xiaozhi-server/test 目录</li>
<li>执行以下命令启动HTTP服务器：</li>
</ol>
<pre>python -m http.server 8006</pre>
<p>然后在浏览器中访问：<strong>http://localhost:8006/test_page.html</strong></p>
` ;
document . body . appendChild ( warningDiv );
});
}
</ script >
2025-03-31 09:38:26 +08:00
</ head >
2025-08-16 14:36:23 +08:00
2025-03-31 09:38:26 +08:00
< body >
2025-08-16 14:36:23 +08:00
< div class = "container" >
< h1 > 小智服务器测试页面</ h1 >
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
< div id = "scriptStatus" style = "position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);" >
正在加载Opus库...
</ div >
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
<!-- 添加配置面板 -->
< div class = "section" >
< h2 >
设备配置
< span class = "device-info" >
2025-04-27 22:49:14 +08:00
< span > MAC: < strong id = "displayMac" ></ strong ></ span >
2025-04-16 16:44:44 +08:00
< span > 客户端: < strong id = "displayClient" > web_test_client</ strong ></ span >
</ span >
2025-08-16 14:36:23 +08:00
< button class = "toggle-button" id = "toggleConfig" > 编辑</ button >
</ h2 >
< div class = "config-panel" id = "configPanel" >
< div class = "control-panel" >
< div class = "config-item" >
< label for = "deviceMac" > 设备MAC:</ label >
< input type = "text" id = "deviceMac" placeholder = "设备MAC地址" >
</ div >
< div class = "config-item" >
< label for = "deviceName" > 设备名称:</ label >
< input type = "text" id = "deviceName" value = "Web测试设备" placeholder = "设备名称" >
</ div >
< div class = "config-item" >
< label for = "clientId" > 客户端ID:</ label >
< input type = "text" id = "clientId" value = "web_test_client" placeholder = "客户端ID" >
</ div >
< div class = "config-item" >
< label for = "token" > 认证Token:</ label >
< input type = "text" id = "token" value = "your-token1" placeholder = "认证Token" >
</ div >
2025-03-31 21:04:11 +08:00
</ div >
</ div >
2025-03-31 09:38:26 +08:00
</ div >
2025-08-16 14:36:23 +08:00
< div class = "section" >
< h2 >
连接信息
< span class = "connection-status" >
2025-08-15 11:26:14 +08:00
< span > OTA: < span id = "otaStatus" class = "status" > ota未连接</ span ></ span >
< span > WS: < span id = "connectionStatus" class = "status" > ws未连接</ span ></ span >
</ span >
2025-08-16 14:36:23 +08:00
</ h2 >
< div class = "connection-controls" >
< input type = "text" id = "otaUrl" value = "http://127.0.0.1:8002/xiaozhi/ota/"
placeholder = "OTA服务器地址，如：http://127.0.0.1:8002/xiaozhi/ota/" />
2025-10-18 21:24:19 +08:00
< input type = "text" id = "serverUrl" value = "" readonly disabled placeholder = "点击连接按钮后，自动从OTA接口获取" />
2025-08-16 14:36:23 +08:00
< button id = "connectButton" > 连接</ button >
2025-08-15 11:26:14 +08:00
</ div >
</ div >
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
< div class = "section" >
< div class = "tabs" >
< button class = "tab active" data-tab = "text" > 文本消息</ button >
< button class = "tab" data-tab = "voice" > 语音消息</ button >
2025-08-15 11:26:14 +08:00
</ div >
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
< div class = "tab-content active" id = "textTab" >
< div class = "message-input" >
< input type = "text" id = "messageInput" placeholder = "输入消息..." disabled >
< button id = "sendTextButton" disabled > 发送</ button >
</ div >
</ div >
< div class = "tab-content" id = "voiceTab" >
< div class = "audio-controls" >
< button id = "recordButton" class = "record-button" disabled > 开始录音</ button >
</ div >
< canvas id = "audioVisualizer" class = "audio-visualizer" ></ canvas >
</ div >
</ div >
< div class = "section" >
< h2 > 会话记录</ h2 >
< div class = "flex-container" >
< div id = "conversation" class = "conversation" ></ div >
< div id = "logContainer" >
< div class = "log-entry log-info" > 准备就绪，请连接服务器开始测试...</ div >
</ div >
2025-08-15 11:26:14 +08:00
</ div >
</ div >
2025-10-24 10:17:32 +08:00
<!-- MCP 工具管理区域 -->
< div class = "section" >
< h2 >
MCP 工具管理
< span class = "connection-status" >
< span id = "mcpToolsCount" > 0 个工具</ span >
</ span >
< button class = "toggle-button" id = "toggleMcpTools" > 展开</ button >
</ h2 >
< div class = "config-panel" id = "mcpToolsPanel" >
< div id = "mcpToolsContainer" class = "mcp-tools-container" >
<!-- 工具列表将动态插入这里 -->
</ div >
< div style = "text-align: center; padding: 15px 0;" >
< button class = "btn" id = "addMcpToolBtn" style = "background-color: #4caf50;" >
➕ 添加新工具
</ button >
</ div >
</ div >
</ div >
<!-- MCP 工具编辑模态框 -->
< div id = "mcpToolModal" style = "display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; overflow-y: auto;" >
< div style = "background-color: white; border-radius: 10px; padding: 25px; width: 90%; max-width: 700px; margin: 50px auto; max-height: 85vh; overflow-y: auto;" >
< div style = "display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #e0e0e0;" >
< h2 id = "mcpModalTitle" style = "font-size: 20px; font-weight: bold; color: #333; margin: 0;" > 添加工具</ h2 >
< button id = "closeMcpModalBtn" style = "background: none; border: none; font-size: 24px; cursor: pointer; color: #666; padding: 0; width: 30px; height: 30px;" > × </ button >
</ div >
< div id = "mcpErrorContainer" ></ div >
< form id = "mcpToolForm" >
< div style = "margin-bottom: 20px;" >
< label style = "display: block; margin-bottom: 8px; font-weight: 500; color: #333; font-size: 14px;" > 工具名称 *</ label >
< input type = "text" id = "mcpToolName" placeholder = "例如: self.get_device_status" required
style = "width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px;" >
</ div >
< div style = "margin-bottom: 20px;" >
< label style = "display: block; margin-bottom: 8px; font-weight: 500; color: #333; font-size: 14px;" > 工具描述 *</ label >
< textarea id = "mcpToolDescription" placeholder = "详细描述工具的功能和使用场景..." required
style = "width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px; min-height: 80px; resize: vertical;" ></ textarea >
</ div >
< div style = "margin-bottom: 20px;" >
< label style = "display: block; margin-bottom: 8px; font-weight: 500; color: #333; font-size: 14px;" > 输入参数</ label >
< div style = "background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; padding: 15px;" >
< div id = "mcpPropertiesContainer" >
< div style = "text-align: center; padding: 20px; color: #999; font-size: 14px;" > 暂无参数，点击下方按钮添加参数</ div >
</ div >
< button type = "button" id = "addMcpPropertyBtn"
style = "width: 100%; margin-top: 10px; padding: 8px 15px; border: none; border-radius: 5px; background-color: #2196f3; color: white; cursor: pointer; font-size: 14px;" >
➕ 添加参数
</ button >
</ div >
</ div >
< div style = "margin-bottom: 20px;" >
< label style = "display: block; margin-bottom: 8px; font-weight: 500; color: #333; font-size: 14px;" >
模拟返回结果 (JSON 格式，可选)
< span style = "font-size: 12px; color: #999; font-weight: normal;" > - 留空则返回默认成功消息</ span >
</ label >
< textarea id = "mcpMockResponse" placeholder = '{"success": true, "data": "执行成功"}'
style = "width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 13px; font-family: 'Courier New', monospace; min-height: 100px; resize: vertical;" ></ textarea >
< div style = "font-size: 12px; color: #666; margin-top: 4px;" >
💡 提示：如果设置了模拟返回结果，工具调用时将返回这个 JSON 对象
</ div >
</ div >
< div style = "display: flex; gap: 10px; justify-content: flex-end; margin-top: 25px;" >
< button type = "button" id = "cancelMcpBtn" style = "padding: 8px 15px; border: none; border-radius: 5px; background-color: #9e9e9e; color: white; cursor: pointer; font-size: 14px;" > 取消</ button >
< button type = "submit" style = "padding: 8px 15px; border: none; border-radius: 5px; background-color: #4caf50; color: white; cursor: pointer; font-size: 14px;" > 保存</ button >
</ div >
</ form >
</ div >
</ div >
2025-08-15 11:26:14 +08:00
</ div >
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
<!-- Opus解码库 -->
< script src = "libopus.js" ></ script >
2025-04-04 16:42:07 +08:00
2025-08-16 14:36:23 +08:00
< script type = "module" >
import { log } from './js/utils/logger.js' ;
import { webSocketConnect } from './js/xiaoZhiConnect.js' ;
import { checkOpusLoaded , initOpusEncoder } from './js/opus.js' ;
import { addMessage } from './js/document.js'
import BlockingQueue from './js/utils/BlockingQueue.js'
2025-08-24 11:31:30 +08:00
import { createStreamingContext } from './js/StreamingContext.js'
2025-08-16 14:36:23 +08:00
// 需要加载的脚本列表 - 移除Opus依赖
const scriptFiles = [];
2025-08-15 11:26:14 +08:00
2025-08-16 14:36:23 +08:00
// 脚本加载状态
const scriptStatus = {
loading : 0 ,
loaded : 0 ,
failed : 0 ,
total : scriptFiles . length
};
2025-08-15 11:26:14 +08:00
2025-08-16 14:36:23 +08:00
// 全局变量
let websocket = null ;
let mediaRecorder = null ;
let audioContext = null ;
let analyser = null ;
let audioChunks = [];
let isRecording = false ;
let visualizerCanvas = document . getElementById ( 'audioVisualizer' );
let visualizerContext = visualizerCanvas . getContext ( '2d' );
let audioQueue = [];
let isPlaying = false ;
let opusDecoder = null ; // Opus解码器
let visualizationRequest = null ; // 动画帧请求ID
2025-08-15 11:26:14 +08:00
2025-08-16 14:36:23 +08:00
// 音频流缓冲相关
let audioBuffers = []; // 用于存储接收到的所有音频数据
let totalAudioSize = 0 ; // 跟踪累积的音频大小
2025-08-15 11:26:14 +08:00
2025-08-16 14:36:23 +08:00
let audioBufferQueue = []; // 存储接收到的音频包
let isAudioPlaying = false ; // 是否正在播放音频
const BUFFER_THRESHOLD = 3 ; // 缓冲包数量阈值，至少累积3个包再开始播放
const MIN_AUDIO_DURATION = 0.1 ; // 最小音频长度(秒)，小于这个长度的音频会被合并
let streamingContext = null ; // 音频流上下文
const SAMPLE_RATE = 16000 ; // 采样率
const CHANNELS = 1 ; // 声道数
const FRAME_SIZE = 960 ; // 帧大小
2025-08-15 11:26:14 +08:00
2025-08-16 14:36:23 +08:00
// DOM元素
const connectButton = document . getElementById ( 'connectButton' );
const serverUrlInput = document . getElementById ( 'serverUrl' );
const connectionStatus = document . getElementById ( 'connectionStatus' );
const messageInput = document . getElementById ( 'messageInput' );
const sendTextButton = document . getElementById ( 'sendTextButton' );
const recordButton = document . getElementById ( 'recordButton' );
const stopButton = document . getElementById ( 'stopButton' );
const conversationDiv = document . getElementById ( 'conversation' );
const logContainer = document . getElementById ( 'logContainer' );
2025-03-31 21:04:11 +08:00
2025-08-23 07:47:40 +08:00
function getAudioContextInstance () {
if ( ! audioContext ) {
audioContext = new ( window . AudioContext || window . webkitAudioContext )({
sampleRate : SAMPLE_RATE ,
latencyHint : 'interactive'
});
log ( '创建音频上下文，采样率: ' + SAMPLE_RATE + 'Hz' , 'debug' );
}
return audioContext ;
}
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 初始化可视化器
function initVisualizer () {
visualizerCanvas . width = visualizerCanvas . clientWidth ;
visualizerCanvas . height = visualizerCanvas . clientHeight ;
visualizerContext . fillStyle = '#fafafa' ;
visualizerContext . fillRect ( 0 , 0 , visualizerCanvas . width , visualizerCanvas . height );
2025-03-31 09:38:26 +08:00
}
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 绘制音频可视化效果
function drawVisualizer ( dataArray ) {
visualizationRequest = requestAnimationFrame (() => drawVisualizer ( dataArray ));
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
if ( ! isRecording ) return ;
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
analyser . getByteFrequencyData ( dataArray );
visualizerContext . fillStyle = '#fafafa' ;
visualizerContext . fillRect ( 0 , 0 , visualizerCanvas . width , visualizerCanvas . height );
const barWidth = ( visualizerCanvas . width / dataArray . length ) * 2.5 ;
let barHeight ;
let x = 0 ;
for ( let i = 0 ; i < dataArray . length ; i ++ ) {
barHeight = dataArray [ i ] / 2 ;
visualizerContext . fillStyle = `rgb( ${ barHeight + 100 } , 50, 50)` ;
visualizerContext . fillRect ( x , visualizerCanvas . height - barHeight , barWidth , barHeight );
x += barWidth + 1 ;
2025-03-31 09:38:26 +08:00
}
2025-08-16 14:36:23 +08:00
}
const queue = new BlockingQueue ();
// 启动缓存进程
async function startAudioBuffering () {
log ( "开始音频缓冲..." , 'info' );
// 先尝试初始化解码器，以便在播放时已准备好
initOpusDecoder (). catch ( error => {
log ( `预初始化Opus解码器失败: ${ error . message } ` , 'warning' );
// 继续缓冲，我们会在播放时再次尝试初始化
});
const timeout = 300 ;
2025-08-14 14:44:52 +08:00
while ( true ) {
2025-08-16 14:36:23 +08:00
// 每次数据空的时候等三条数据
const packets = await queue . dequeue (
3 , // 至少 3 条
timeout , // 最多等 300 ms
( count ) => { // 超时额外回调
log ( `缓冲超时，当前缓冲包数: ${ count } ，开始播放` , 'info' );
}
);
if ( packets . length ) {
log ( `已缓冲 ${ packets . length } 个音频包，开始播放` , 'info' );
streamingContext . pushAudioBuffer ( packets )
}
// 50毫秒里，有多少给多少
while ( true ) {
const data = await queue . dequeue ( 99 , 50 )
if ( data . length ) {
streamingContext . pushAudioBuffer ( data )
} else {
break
}
2025-03-31 09:38:26 +08:00
}
2025-08-14 14:44:52 +08:00
}
2025-03-31 09:38:26 +08:00
}
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 播放已缓冲的音频
async function playBufferedAudio () {
// 确保Opus解码器已初始化
2025-03-31 09:38:26 +08:00
try {
2025-08-16 14:36:23 +08:00
// 确保音频上下文存在
2025-08-23 07:47:40 +08:00
audioContext = getAudioContextInstance ();
2025-08-16 14:36:23 +08:00
// 确保解码器已初始化
if ( ! opusDecoder ) {
log ( '初始化Opus解码器...' , 'info' );
2025-03-31 09:38:26 +08:00
try {
2025-08-16 14:36:23 +08:00
opusDecoder = await initOpusDecoder ();
if ( ! opusDecoder ) {
throw new Error ( '解码器初始化失败' );
2025-08-15 11:26:14 +08:00
}
2025-08-16 14:36:23 +08:00
log ( 'Opus解码器初始化成功' , 'success' );
} catch ( error ) {
log ( 'Opus解码器初始化失败: ' + error . message , 'error' );
isAudioPlaying = false ;
return ;
2025-08-15 11:26:14 +08:00
}
}
2025-08-16 14:36:23 +08:00
// 创建流式播放上下文
if ( ! streamingContext ) {
2025-08-24 11:31:30 +08:00
streamingContext = createStreamingContext ( opusDecoder , audioContext , SAMPLE_RATE , CHANNELS , MIN_AUDIO_DURATION );
2025-08-16 14:36:23 +08:00
}
streamingContext . decodeOpusFrames ();
streamingContext . startPlaying ();
} catch ( error ) {
log ( `播放已缓冲的音频出错: ${ error . message } ` , 'error' );
isAudioPlaying = false ;
streamingContext = null ;
}
}
2025-08-24 11:31:30 +08:00
2025-08-16 14:36:23 +08:00
// 初始化Opus解码器 - 确保完全初始化完成后才返回
async function initOpusDecoder () {
if ( opusDecoder ) return opusDecoder ; // 已经初始化
try {
// 检查ModuleInstance是否存在
if ( typeof window . ModuleInstance === 'undefined' ) {
if ( typeof Module !== 'undefined' ) {
// 使用全局Module作为ModuleInstance
window . ModuleInstance = Module ;
log ( '使用全局Module作为ModuleInstance' , 'info' );
} else {
throw new Error ( 'Opus库未加载，ModuleInstance和Module对象都不存在' );
}
}
const mod = window . ModuleInstance ;
// 创建解码器对象
opusDecoder = {
channels : CHANNELS ,
rate : SAMPLE_RATE ,
frameSize : FRAME_SIZE ,
module : mod ,
decoderPtr : null , // 初始为null
// 初始化解码器
init : function () {
if ( this . decoderPtr ) return true ; // 已经初始化
// 获取解码器大小
const decoderSize = mod . _opus_decoder_get_size ( this . channels );
log ( `Opus解码器大小: ${ decoderSize } 字节` , 'debug' );
// 分配内存
this . decoderPtr = mod . _malloc ( decoderSize );
if ( ! this . decoderPtr ) {
throw new Error ( "无法分配解码器内存" );
}
// 初始化解码器
const err = mod . _opus_decoder_init (
this . decoderPtr ,
this . rate ,
this . channels
);
if ( err < 0 ) {
this . destroy (); // 清理资源
throw new Error ( `Opus解码器初始化失败: ${ err } ` );
}
log ( "Opus解码器初始化成功" , 'success' );
return true ;
},
// 解码方法
decode : function ( opusData ) {
if ( ! this . decoderPtr ) {
if ( ! this . init ()) {
throw new Error ( "解码器未初始化且无法初始化" );
}
}
try {
const mod = this . module ;
// 为Opus数据分配内存
const opusPtr = mod . _malloc ( opusData . length );
mod . HEAPU8 . set ( opusData , opusPtr );
// 为PCM输出分配内存
const pcmPtr = mod . _malloc ( this . frameSize * 2 ); // Int16 = 2字节
// 解码
const decodedSamples = mod . _opus_decode (
this . decoderPtr ,
opusPtr ,
opusData . length ,
pcmPtr ,
this . frameSize ,
0 // 不使用FEC
);
if ( decodedSamples < 0 ) {
mod . _free ( opusPtr );
mod . _free ( pcmPtr );
throw new Error ( `Opus解码失败: ${ decodedSamples } ` );
2025-08-15 11:26:14 +08:00
}
2025-08-16 14:36:23 +08:00
// 复制解码后的数据
const decodedData = new Int16Array ( decodedSamples );
for ( let i = 0 ; i < decodedSamples ; i ++ ) {
decodedData [ i ] = mod . HEAP16 [( pcmPtr >> 1 ) + i ];
}
// 释放内存
mod . _free ( opusPtr );
mod . _free ( pcmPtr );
return decodedData ;
} catch ( error ) {
log ( `Opus解码错误: ${ error . message } ` , 'error' );
return new Int16Array ( 0 );
2025-03-31 09:38:26 +08:00
}
2025-08-16 14:36:23 +08:00
},
2025-08-15 11:26:14 +08:00
2025-08-16 14:36:23 +08:00
// 销毁方法
destroy : function () {
if ( this . decoderPtr ) {
this . module . _free ( this . decoderPtr );
this . decoderPtr = null ;
2025-03-31 09:38:26 +08:00
}
}
};
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 初始化解码器
if ( ! opusDecoder . init ()) {
throw new Error ( "Opus解码器初始化失败" );
2025-08-15 11:26:14 +08:00
}
2025-08-16 14:36:23 +08:00
return opusDecoder ;
} catch ( error ) {
log ( `Opus解码器初始化失败: ${ error . message } ` , 'error' );
opusDecoder = null ; // 重置为null，以便下次重试
throw error ;
}
2025-08-15 11:26:14 +08:00
}
2025-08-16 14:36:23 +08:00
// 初始化音频录制和处理
async function initAudio () {
2025-03-31 09:38:26 +08:00
try {
2025-08-16 14:36:23 +08:00
// 请求麦克风权限
const stream = await navigator . mediaDevices . getUserMedia ({
audio : {
echoCancellation : true ,
noiseSuppression : true ,
sampleRate : 16000 , // 确保16kHz采样率
channelCount : 1 // 确保单声道
}
});
log ( '已获取麦克风访问权限' , 'success' );
2025-04-16 16:44:44 +08:00
2025-08-16 14:36:23 +08:00
// 创建音频上下文
2025-08-23 07:47:40 +08:00
audioContext = getAudioContextInstance ();
2025-08-16 14:36:23 +08:00
const source = audioContext . createMediaStreamSource ( stream );
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 获取实际音频轨道设置
const audioTracks = stream . getAudioTracks ();
if ( audioTracks . length > 0 ) {
const track = audioTracks [ 0 ];
const settings = track . getSettings ();
log ( `实际麦克风设置 - 采样率: ${ settings . sampleRate || '未知' } Hz, 声道数: ${ settings . channelCount || '未知' } ` , 'info' );
}
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 创建分析器用于可视化
analyser = audioContext . createAnalyser ();
analyser . fftSize = 2048 ;
source . connect ( analyser );
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 尝试初始化MediaRecorder，按优先级尝试不同编码选项
try {
// 优先尝试使用Opus编码
mediaRecorder = new MediaRecorder ( stream , {
mimeType : 'audio/webm;codecs=opus' ,
audioBitsPerSecond : 16000
});
log ( '已初始化MediaRecorder (使用Opus编码)' , 'success' );
log ( `选择的编码格式: ${ mediaRecorder . mimeType } ` , 'info' );
} catch ( e1 ) {
try {
// 如果Opus不支持，尝试MP3
mediaRecorder = new MediaRecorder ( stream , {
mimeType : 'audio/webm' ,
audioBitsPerSecond : 16000
});
log ( '已初始化MediaRecorder (使用WebM标准编码，Opus不支持)' , 'warning' );
log ( `选择的编码格式: ${ mediaRecorder . mimeType } ` , 'info' );
} catch ( e2 ) {
try {
// 尝试其他备选格式
mediaRecorder = new MediaRecorder ( stream , {
mimeType : 'audio/ogg;codecs=opus' ,
audioBitsPerSecond : 16000
});
log ( '已初始化MediaRecorder (使用OGG+Opus编码)' , 'warning' );
log ( `选择的编码格式: ${ mediaRecorder . mimeType } ` , 'info' );
} catch ( e3 ) {
// 最后使用默认编码
mediaRecorder = new MediaRecorder ( stream );
log ( `已初始化MediaRecorder (使用默认编码: ${ mediaRecorder . mimeType } )` , 'warning' );
}
}
}
2025-08-15 11:26:14 +08:00
2025-08-16 14:36:23 +08:00
// 处理录制的数据
mediaRecorder . ondataavailable = ( event ) => {
if ( event . data . size > 0 ) {
audioChunks . push ( event . data );
}
};
2025-08-15 11:26:14 +08:00
2025-08-16 14:36:23 +08:00
// 录制结束后处理数据
mediaRecorder . onstop = async () => {
// 停止可视化
if ( visualizationRequest ) {
cancelAnimationFrame ( visualizationRequest );
visualizationRequest = null ;
}
log ( `录音结束，已收集的音频块数量: ${ audioChunks . length } ` , 'info' );
if ( audioChunks . length === 0 ) {
log ( '警告：没有收集到任何音频数据，请检查麦克风是否工作正常' , 'error' );
return ;
}
// 创建完整的录音blob
const blob = new Blob ( audioChunks , { type : audioChunks [ 0 ]. type });
log ( `已创建音频Blob， ${ audioChunks [ 0 ]. type } ，大小: ${ ( blob . size / 1024 ). toFixed ( 2 ) } KB` , 'info' );
// 保存原始块，以防清空后需要调试
const chunks = [... audioChunks ];
audioChunks = [];
try {
// 将blob转换为ArrayBuffer
const arrayBuffer = await blob . arrayBuffer ();
const uint8Array = new Uint8Array ( arrayBuffer );
log ( `已转换为Uint8Array，准备发送，大小: ${ ( arrayBuffer . byteLength / 1024 ). toFixed ( 2 ) } KB` , 'info' );
// 检查WebSocket状态
if ( ! websocket ) {
log ( '错误：WebSocket连接不存在' , 'error' );
return ;
}
if ( websocket . readyState !== WebSocket . OPEN ) {
log ( `错误：WebSocket连接未打开，当前状态: ${ websocket . readyState } ` , 'error' );
return ;
}
// 直接发送二进制音频数据 - 这是最简单有效的方式
try {
// 注意：开始和结束消息已在录音开始和结束时发送
// 这里只需要发送音频数据
await new Promise ( resolve => setTimeout ( resolve , 50 ));
// 处理WebM容器格式，提取纯Opus数据
// 服务器使用opuslib_next.Decoder，需要纯Opus帧
log ( '正在处理音频数据，提取纯Opus帧...' , 'info' );
const opusData = extractOpusFrames ( uint8Array );
// 记录Opus数据大小
log ( `已提取Opus数据，大小: ${ ( opusData . byteLength / 1024 ). toFixed ( 2 ) } KB` , 'info' );
// 发送音频消息第二步：二进制音频数据
websocket . send ( opusData );
log ( `已发送Opus音频数据: ${ ( opusData . byteLength / 1024 ). toFixed ( 2 ) } KB` , 'success' );
} catch ( error ) {
log ( `音频数据发送失败: ${ error . message } ` , 'error' );
// 尝试使用base64编码作为备选方案
try {
log ( '尝试使用base64编码方式发送...' , 'info' );
const base64Data = arrayBufferToBase64 ( arrayBuffer );
const audioDataMessage = {
type : 'audio' ,
action : 'data' ,
format : 'opus' ,
sample_rate : 16000 ,
channels : 1 ,
mime_type : chunks [ 0 ]. type ,
encoding : 'base64' ,
data : base64Data
};
websocket . send ( JSON . stringify ( audioDataMessage ));
log ( `已使用base64编码发送音频数据: ${ ( arrayBuffer . byteLength / 1024 ). toFixed ( 2 ) } KB` , 'warning' );
} catch ( base64Error ) {
log ( `所有数据发送方式均失败: ${ base64Error . message } ` , 'error' );
}
}
} catch ( error ) {
log ( `处理录音数据错误: ${ error . message } ` , 'error' );
}
};
// 尝试初始化Opus解码器
try {
// 检查ModuleInstance是否存在（本地库导出的全局变量）
if ( typeof window . ModuleInstance === 'undefined' ) {
throw new Error ( 'Opus库未加载，ModuleInstance对象不存在' );
}
// 简单测试ModuleInstance是否可用
if ( typeof window . ModuleInstance . _opus_decoder_get_size === 'function' ) {
const testSize = window . ModuleInstance . _opus_decoder_get_size ( 1 );
log ( `Opus解码器测试成功，解码器大小: ${ testSize } 字节` , 'success' );
} else {
throw new Error ( 'Opus解码函数未找到' );
}
} catch ( err ) {
log ( `Opus解码器初始化警告: ${ err . message } ，将在需要时重试` , 'warning' );
}
log ( '音频系统初始化完成' , 'success' );
return true ;
} catch ( error ) {
log ( `音频初始化错误: ${ error . message } ` , 'error' );
return false ;
}
}
// 开始录音
function startRecording () {
if ( isRecording ) return ;
try {
// 最小录音时长提示
log ( '请至少录制1-2秒钟的音频，确保采集到足够数据' , 'info' );
// 获取服务器类型 - 从URL判断
const serverUrl = serverUrlInput . value . trim ();
let isXiaozhiNative = false ;
// 检查是否是小智原生服务器 (根据URL特征判断)
if ( serverUrl . includes ( 'xiaozhi' ) || serverUrl . includes ( 'localhost' ) || serverUrl . includes ( '127.0.0.1' )) {
isXiaozhiNative = true ;
log ( '检测到小智原生服务器，使用标准listen协议' , 'info' );
}
// 使用直接PCM录音和libopus编码的方式
startDirectRecording ();
} catch ( error ) {
log ( `录音启动错误: ${ error . message } ` , 'error' );
}
}
// 停止录音
function stopRecording () {
if ( ! isRecording ) return ;
try {
// 使用直接PCM录音停止
stopDirectRecording ();
} catch ( error ) {
log ( `停止录音错误: ${ error . message } ` , 'error' );
}
}
// 连接WebSocket服务器
async function connectToServer () {
const url = serverUrlInput . value . trim ();
const config = getConfig ();
// 先检查OTA状态
log ( '正在检查OTA状态...' , 'info' );
const otaUrl = document . getElementById ( 'otaUrl' ). value . trim ();
localStorage . setItem ( 'otaUrl' , otaUrl );
localStorage . setItem ( 'wsUrl' , url );
try {
2025-10-17 17:51:56 +08:00
const ws = await webSocketConnect ( otaUrl , config )
2025-08-16 14:36:23 +08:00
if ( ws === undefined ) {
return
}
websocket = ws
// 设置接收二进制数据的类型为ArrayBuffer
websocket . binaryType = 'arraybuffer' ;
websocket . onopen = async () => {
log ( `已连接到服务器: ${ url } ` , 'success' );
connectionStatus . textContent = 'ws已连接' ;
connectionStatus . style . color = 'green' ;
// 连接成功后发送hello消息
await sendHelloMessage ();
connectButton . textContent = '断开' ;
connectButton . removeEventListener ( 'click' , connectToServer );
connectButton . addEventListener ( 'click' , disconnectFromServer );
// connectButton.onclick = disconnectFromServer;
messageInput . disabled = false ;
sendTextButton . disabled = false ;
const audioInitialized = await initAudio ();
if ( audioInitialized ) {
recordButton . disabled = false ;
}
};
websocket . onclose = () => {
log ( '已断开连接' , 'info' );
connectionStatus . textContent = 'ws已断开' ;
connectionStatus . style . color = 'red' ;
connectButton . textContent = '连接' ;
connectButton . removeEventListener ( 'click' , disconnectFromServer );
connectButton . addEventListener ( 'click' , connectToServer );
// connectButton.onclick = connectToServer;
messageInput . disabled = true ;
sendTextButton . disabled = true ;
recordButton . disabled = true ;
2025-10-17 17:51:56 +08:00
// stopButton.disabled = true;
2025-08-16 14:36:23 +08:00
};
websocket . onerror = ( error ) => {
log ( `WebSocket错误: ${ error . message || '未知错误' } ` , 'error' );
connectionStatus . textContent = 'ws未连接' ;
connectionStatus . style . color = 'red' ;
};
websocket . onmessage = function ( event ) {
try {
// 检查是否为文本消息
if ( typeof event . data === 'string' ) {
const message = JSON . parse ( event . data );
if ( message . type === 'hello' ) {
log ( `服务器回应： ${ JSON . stringify ( message , null , 2 ) } ` , 'success' );
} else if ( message . type === 'tts' ) {
// TTS状态消息
if ( message . state === 'start' ) {
log ( '服务器开始发送语音' , 'info' );
} else if ( message . state === 'sentence_start' ) {
log ( `服务器发送语音段: ${ message . text } ` , 'info' );
// 添加文本到会话记录
if ( message . text ) {
addMessage ( message . text );
}
} else if ( message . state === 'sentence_end' ) {
log ( `语音段结束: ${ message . text } ` , 'info' );
} else if ( message . state === 'stop' ) {
log ( '服务器语音传输结束' , 'info' );
// 结束后更新UI状态
if ( recordButton . disabled ) {
recordButton . disabled = false ;
recordButton . textContent = '开始录音' ;
recordButton . classList . remove ( 'recording' );
}
}
} else if ( message . type === 'audio' ) {
// 音频控制消息
log ( `收到音频控制消息: ${ JSON . stringify ( message ) } ` , 'info' );
} else if ( message . type === 'stt' ) {
// 语音识别结果
log ( `识别结果: ${ message . text } ` , 'info' );
// 添加识别结果到会话记录
addMessage ( `[语音识别] ${ message . text } ` , true );
} else if ( message . type === 'llm' ) {
// 大模型回复
log ( `大模型回复: ${ message . text } ` , 'info' );
// 添加大模型回复到会话记录
if ( message . text && message . text !== '😊' ) {
addMessage ( message . text );
}
} else if ( message . type === 'mcp' ) {
const payload = message . payload || {};
log ( `服务器下发: ${ JSON . stringify ( message ) } ` , 'info' );
2025-10-24 10:17:32 +08:00
if ( payload . method === 'tools/list' ) {
// 返回工具列表
const tools = getMcpTools ();
const replyMessage = JSON . stringify ({
"session_id" : message . session_id || "" ,
"type" : "mcp" ,
"payload" : {
"jsonrpc" : "2.0" ,
"id" : payload . id ,
"result" : {
"tools" : tools
2025-08-16 14:36:23 +08:00
}
2025-10-24 10:17:32 +08:00
}
});
log ( `客户端上报: ${ replyMessage } ` , 'info' );
websocket . send ( replyMessage );
log ( `回复MCP工具列表: ${ tools . length } 个工具` , 'info' );
} else if ( payload . method === 'tools/call' ) {
// 调用工具
const toolName = payload . params ? . name ;
const toolArgs = payload . params ? . arguments ;
log ( `调用工具: ${ toolName } 参数: ${ JSON . stringify ( toolArgs ) } ` , 'info' );
// 执行工具
const result = executeMcpTool ( toolName , toolArgs );
const replyMessage = JSON . stringify ({
"session_id" : message . session_id || "" ,
"type" : "mcp" ,
"payload" : {
"jsonrpc" : "2.0" ,
"id" : payload . id ,
"result" : {
"content" : [
{
"type" : "text" ,
"text" : JSON . stringify ( result )
}
],
"isError" : false
2025-08-16 14:36:23 +08:00
}
2025-10-24 10:17:32 +08:00
}
});
2025-08-16 14:36:23 +08:00
2025-10-24 10:17:32 +08:00
log ( `客户端上报: ${ replyMessage } ` , 'info' );
websocket . send ( replyMessage );
} else if ( payload . method === 'initialize' ) {
log ( `收到工具初始化请求: ${ JSON . stringify ( payload . params ) } ` , 'info' );
// 目前仅记录日志
} else {
log ( `未知的MCP方法: ${ payload . method } ` , 'warning' );
}
2025-08-16 14:36:23 +08:00
} else {
// 未知消息类型
log ( `未知消息类型: ${ message . type } ` , 'info' );
addMessage ( JSON . stringify ( message , null , 2 ));
}
} else {
// 处理二进制数据 - 兼容多种二进制格式
handleBinaryMessage ( event . data );
}
} catch ( error ) {
log ( `WebSocket消息处理错误: ${ error . message } ` , 'error' );
// 非JSON格式文本消息直接显示
if ( typeof event . data === 'string' ) {
addMessage ( event . data );
}
}
};
connectionStatus . textContent = 'ws未连接' ;
connectionStatus . style . color = 'orange' ;
} catch ( error ) {
log ( `连接错误: ${ error . message } ` , 'error' );
connectionStatus . textContent = 'ws未连接' ;
}
}
// 发送hello握手消息
async function sendHelloMessage () {
if ( ! websocket || websocket . readyState !== WebSocket . OPEN ) return ;
try {
const config = getConfig ();
// 设置设备信息
const helloMessage = {
type : 'hello' ,
device_id : config . deviceId ,
device_name : config . deviceName ,
device_mac : config . deviceMac ,
token : config . token ,
features : {
mcp : true
}
};
log ( '发送hello握手消息' , 'info' );
websocket . send ( JSON . stringify ( helloMessage ));
// 等待服务器响应
return new Promise ( resolve => {
// 5秒超时
const timeout = setTimeout (() => {
log ( '等待hello响应超时' , 'error' );
log ( '提示: 请尝试点击"测试认证"按钮进行连接排查' , 'info' );
resolve ( false );
}, 5000 );
// 临时监听一次消息，接收hello响应
const onMessageHandler = ( event ) => {
2025-03-31 09:38:26 +08:00
try {
const response = JSON . parse ( event . data );
if ( response . type === 'hello' && response . session_id ) {
2025-08-16 14:36:23 +08:00
log ( `服务器握手成功，会话ID: ${ response . session_id } ` , 'success' );
clearTimeout ( timeout );
websocket . removeEventListener ( 'message' , onMessageHandler );
resolve ( true );
2025-03-31 09:38:26 +08:00
}
} catch ( e ) {
2025-08-16 14:36:23 +08:00
// 忽略非JSON消息
2025-03-31 09:38:26 +08:00
}
};
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
websocket . addEventListener ( 'message' , onMessageHandler );
});
2025-03-31 09:38:26 +08:00
} catch ( error ) {
2025-08-16 14:36:23 +08:00
log ( `发送hello消息错误: ${ error . message } ` , 'error' );
return false ;
2025-03-31 09:38:26 +08:00
}
}
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 断开WebSocket连接
function disconnectFromServer () {
if ( ! websocket ) return ;
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
websocket . close ();
stopRecording ();
}
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 发送文本消息
function sendTextMessage () {
const message = messageInput . value . trim ();
if ( message === '' || ! websocket || websocket . readyState !== WebSocket . OPEN ) return ;
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
try {
// 直接发送listen消息，不需要重复发送hello
const listenMessage = {
type : 'listen' ,
mode : 'manual' ,
state : 'detect' ,
text : message
};
2025-04-04 16:42:07 +08:00
2025-08-16 14:36:23 +08:00
websocket . send ( JSON . stringify ( listenMessage ));
addMessage ( message , true );
log ( `发送文本消息: ${ message } ` , 'info' );
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
messageInput . value = '' ;
} catch ( error ) {
log ( `发送消息错误: ${ error . message } ` , 'error' );
}
}
// 生成随机MAC地址
function generateRandomMac () {
const hexDigits = '0123456789ABCDEF' ;
let mac = '' ;
for ( let i = 0 ; i < 6 ; i ++ ) {
if ( i > 0 ) mac += ':' ;
for ( let j = 0 ; j < 2 ; j ++ ) {
mac += hexDigits . charAt ( Math . floor ( Math . random () * 16 ));
}
}
return mac ;
}
// 初始化事件监听器
function initEventListeners () {
connectButton . addEventListener ( 'click' , connectToServer );
// 设备配置面板折叠/展开
const toggleButton = document . getElementById ( 'toggleConfig' );
const configPanel = document . getElementById ( 'configPanel' );
const deviceMacInput = document . getElementById ( 'deviceMac' );
const clientIdInput = document . getElementById ( 'clientId' );
const displayMac = document . getElementById ( 'displayMac' );
const displayClient = document . getElementById ( 'displayClient' );
// 从localStorage加载MAC地址，如果没有则生成新的
let savedMac = localStorage . getItem ( 'deviceMac' );
if ( ! savedMac ) {
savedMac = generateRandomMac ();
localStorage . setItem ( 'deviceMac' , savedMac );
}
deviceMacInput . value = savedMac ;
displayMac . textContent = savedMac ;
// 更新显示的值
function updateDisplayValues () {
const newMac = deviceMacInput . value ;
displayMac . textContent = newMac ;
displayClient . textContent = clientIdInput . value ;
// 保存MAC地址到localStorage
localStorage . setItem ( 'deviceMac' , newMac );
}
// 监听输入变化
deviceMacInput . addEventListener ( 'input' , updateDisplayValues );
clientIdInput . addEventListener ( 'input' , updateDisplayValues );
// 初始更新显示值
updateDisplayValues ();
const savedOtaUrl = localStorage . getItem ( 'otaUrl' );
if ( savedOtaUrl ) {
document . getElementById ( 'otaUrl' ). value = savedOtaUrl ;
}
// 切换面板显示
toggleButton . addEventListener ( 'click' , () => {
const isExpanded = configPanel . classList . contains ( 'expanded' );
configPanel . classList . toggle ( 'expanded' );
toggleButton . textContent = isExpanded ? '编辑' : '收起' ;
});
// 标签页切换
const tabs = document . querySelectorAll ( '.tab' );
tabs . forEach ( tab => {
tab . addEventListener ( 'click' , () => {
// 移除所有标签页的active类
tabs . forEach ( t => t . classList . remove ( 'active' ));
document . querySelectorAll ( '.tab-content' ). forEach ( c => c . classList . remove ( 'active' ));
// 添加当前标签页的active类
tab . classList . add ( 'active' );
document . getElementById ( ` ${ tab . dataset . tab } Tab` ). classList . add ( 'active' );
});
});
sendTextButton . addEventListener ( 'click' , sendTextMessage );
messageInput . addEventListener ( 'keypress' , ( e ) => {
if ( e . key === 'Enter' ) sendTextMessage ();
});
recordButton . addEventListener ( 'click' , () => {
if ( isRecording ) {
stopRecording ();
} else {
startRecording ();
}
});
window . addEventListener ( 'resize' , initVisualizer );
}
// 帮助函数：ArrayBuffer转Base64
function arrayBufferToBase64 ( buffer ) {
let binary = '' ;
const bytes = new Uint8Array ( buffer );
const len = bytes . byteLength ;
for ( let i = 0 ; i < len ; i ++ ) {
binary += String . fromCharCode ( bytes [ i ]);
}
return window . btoa ( binary );
}
// Opus编码器
let opusEncoder ;
// 初始化应用
function initApp () {
initVisualizer ();
initEventListeners ();
// 检查libopus.js是否正确加载
checkOpusLoaded ();
// 初始化Opus编码器
opusEncoder = initOpusEncoder ();
// 预加载Opus解码器
log ( '预加载Opus解码器...' , 'info' );
initOpusDecoder (). then (() => {
log ( 'Opus解码器预加载成功' , 'success' );
}). catch ( error => {
log ( `Opus解码器预加载失败: ${ error . message } ，将在需要时重试` , 'warning' );
});
playBufferedAudio ()
startAudioBuffering ()
}
// PCM录音处理器代码 - 会被注入到AudioWorklet中
const audioProcessorCode = `
2025-03-31 09:38:26 +08:00
class AudioRecorderProcessor extends AudioWorkletProcessor {
constructor() {
super();
this.buffers = [];
this.frameSize = 960; // 60ms @ 16kHz = 960 samples
this.buffer = new Int16Array(this.frameSize);
this.bufferIndex = 0;
this.isRecording = false;
2025-05-25 15:24:06 +08:00
2025-03-31 09:38:26 +08:00
// 监听来自主线程的消息
this.port.onmessage = (event) => {
if (event.data.command === 'start') {
this.isRecording = true;
this.port.postMessage({ type: 'status', status: 'started' });
} else if (event.data.command === 'stop') {
this.isRecording = false;
2025-05-25 15:24:06 +08:00
2025-03-31 09:38:26 +08:00
// 发送剩余的缓冲区
if (this.bufferIndex > 0) {
const finalBuffer = this.buffer.slice(0, this.bufferIndex);
this.port.postMessage({
type: 'buffer',
buffer: finalBuffer
});
this.bufferIndex = 0;
}
2025-05-25 15:24:06 +08:00
2025-03-31 09:38:26 +08:00
this.port.postMessage({ type: 'status', status: 'stopped' });
}
};
}
2025-05-25 15:24:06 +08:00
2025-03-31 09:38:26 +08:00
process(inputs, outputs, parameters) {
if (!this.isRecording) return true;
2025-05-25 15:24:06 +08:00
2025-03-31 09:38:26 +08:00
const input = inputs[0][0]; // 获取第一个输入通道
if (!input) return true;
2025-05-25 15:24:06 +08:00
2025-03-31 09:38:26 +08:00
// 将浮点采样转换为16位整数并存储
for (let i = 0; i < input.length; i++) {
if (this.bufferIndex >= this.frameSize) {
// 缓冲区已满，发送给主线程并重置
this.port.postMessage({
type: 'buffer',
buffer: this.buffer.slice(0)
});
this.bufferIndex = 0;
}
2025-05-25 15:24:06 +08:00
2025-03-31 09:38:26 +08:00
// 转换为16位整数 (-32768到32767)
this.buffer[this.bufferIndex++] = Math.max(-32768, Math.min(32767, Math.floor(input[i] * 32767)));
}
2025-05-25 15:24:06 +08:00
2025-03-31 09:38:26 +08:00
return true;
}
}
2025-05-25 15:24:06 +08:00
2025-03-31 09:38:26 +08:00
registerProcessor('audio-recorder-processor', AudioRecorderProcessor);
` ;
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 创建音频处理器
async function createAudioProcessor () {
2025-08-23 07:47:40 +08:00
audioContext = getAudioContextInstance ();
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
try {
// 检查是否支持AudioWorklet
if ( audioContext . audioWorklet ) {
// 注册音频处理器
const blob = new Blob ([ audioProcessorCode ], { type : 'application/javascript' });
const url = URL . createObjectURL ( blob );
await audioContext . audioWorklet . addModule ( url );
URL . revokeObjectURL ( url );
// 创建音频处理节点
const audioProcessor = new AudioWorkletNode ( audioContext , 'audio-recorder-processor' );
// 设置音频处理消息处理
audioProcessor . port . onmessage = ( event ) => {
if ( event . data . type === 'buffer' ) {
// 收到PCM缓冲区数据
processPCMBuffer ( event . data . buffer );
}
};
log ( '使用AudioWorklet处理音频' , 'success' );
return { node : audioProcessor , type : 'worklet' };
} else {
// 使用旧版ScriptProcessorNode作为回退方案
log ( 'AudioWorklet不可用，使用ScriptProcessorNode作为回退方案' , 'warning' );
const frameSize = 4096 ; // ScriptProcessorNode缓冲区大小
const scriptProcessor = audioContext . createScriptProcessor ( frameSize , 1 , 1 );
// 将audioProcess事件设置为处理音频数据
scriptProcessor . onaudioprocess = ( event ) => {
if ( ! isRecording ) return ;
const input = event . inputBuffer . getChannelData ( 0 );
const buffer = new Int16Array ( input . length );
// 将浮点数据转换为16位整数
for ( let i = 0 ; i < input . length ; i ++ ) {
buffer [ i ] = Math . max ( - 32768 , Math . min ( 32767 , Math . floor ( input [ i ] * 32767 )));
}
// 处理PCM数据
processPCMBuffer ( buffer );
};
// 需要连接输出，否则不会触发处理
// 我们创建一个静音通道
const silent = audioContext . createGain ();
silent . gain . value = 0 ;
scriptProcessor . connect ( silent );
silent . connect ( audioContext . destination );
return { node : scriptProcessor , type : 'processor' };
}
} catch ( error ) {
log ( `创建音频处理器失败: ${ error . message } ，尝试回退方案` , 'error' );
// 最后回退方案：使用ScriptProcessorNode
try {
const frameSize = 4096 ; // ScriptProcessorNode缓冲区大小
const scriptProcessor = audioContext . createScriptProcessor ( frameSize , 1 , 1 );
scriptProcessor . onaudioprocess = ( event ) => {
if ( ! isRecording ) return ;
const input = event . inputBuffer . getChannelData ( 0 );
const buffer = new Int16Array ( input . length );
for ( let i = 0 ; i < input . length ; i ++ ) {
buffer [ i ] = Math . max ( - 32768 , Math . min ( 32767 , Math . floor ( input [ i ] * 32767 )));
}
processPCMBuffer ( buffer );
};
const silent = audioContext . createGain ();
silent . gain . value = 0 ;
scriptProcessor . connect ( silent );
silent . connect ( audioContext . destination );
log ( '使用ScriptProcessorNode作为回退方案成功' , 'warning' );
return { node : scriptProcessor , type : 'processor' };
} catch ( fallbackError ) {
log ( `回退方案也失败: ${ fallbackError . message } ` , 'error' );
return null ;
}
}
}
// 初始化直接从PCM数据录音的系统
let audioProcessor = null ;
let audioProcessorType = null ;
let audioSource = null ;
// 处理PCM缓冲数据
let pcmDataBuffer = new Int16Array ();
function processPCMBuffer ( buffer ) {
if ( ! isRecording ) return ;
// 将新的PCM数据追加到缓冲区
const newBuffer = new Int16Array ( pcmDataBuffer . length + buffer . length );
newBuffer . set ( pcmDataBuffer );
newBuffer . set ( buffer , pcmDataBuffer . length );
pcmDataBuffer = newBuffer ;
// 检查是否有足够的数据进行Opus编码（16000Hz, 60ms = 960个采样点）
const samplesPerFrame = 960 ; // 60ms @ 16kHz
while ( pcmDataBuffer . length >= samplesPerFrame ) {
// 从缓冲区取出一帧数据
const frameData = pcmDataBuffer . slice ( 0 , samplesPerFrame );
pcmDataBuffer = pcmDataBuffer . slice ( samplesPerFrame );
// 编码为Opus
encodeAndSendOpus ( frameData );
}
}
// 编码并发送Opus数据
function encodeAndSendOpus ( pcmData = null ) {
if ( ! opusEncoder ) {
log ( 'Opus编码器未初始化' , 'error' );
2025-03-31 09:38:26 +08:00
return ;
}
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
try {
// 如果提供了PCM数据，则编码该数据
if ( pcmData ) {
// 使用已初始化的Opus编码器编码
const opusData = opusEncoder . encode ( pcmData );
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
if ( opusData && opusData . length > 0 ) {
// 存储音频帧
audioBuffers . push ( opusData . buffer );
totalAudioSize += opusData . length ;
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 如果WebSocket已连接，则发送数据
if ( websocket && websocket . readyState === WebSocket . OPEN ) {
try {
// 服务端期望接收原始Opus数据，不需要任何额外包装
websocket . send ( opusData . buffer );
log ( `发送Opus帧，大小： ${ opusData . length } 字节` , 'debug' );
} catch ( error ) {
log ( `WebSocket发送错误: ${ error . message } ` , 'error' );
}
}
} else {
log ( 'Opus编码失败，无有效数据返回' , 'error' );
}
} else {
// 处理剩余的PCM数据
if ( pcmDataBuffer . length > 0 ) {
// 如果剩余的采样点不足一帧，用静音填充
const samplesPerFrame = 960 ;
if ( pcmDataBuffer . length < samplesPerFrame ) {
const paddedBuffer = new Int16Array ( samplesPerFrame );
paddedBuffer . set ( pcmDataBuffer );
// 剩余部分为0（静音）
encodeAndSendOpus ( paddedBuffer );
} else {
encodeAndSendOpus ( pcmDataBuffer . slice ( 0 , samplesPerFrame ));
}
pcmDataBuffer = new Int16Array ( 0 );
}
}
} catch ( error ) {
log ( `Opus编码错误: ${ error . message } ` , 'error' );
2025-03-31 09:38:26 +08:00
}
2025-08-16 14:36:23 +08:00
}
2025-08-15 11:26:14 +08:00
2025-08-16 14:36:23 +08:00
// 开始直接从PCM数据录音
async function startDirectRecording () {
if ( isRecording ) return ;
2025-08-15 11:26:14 +08:00
2025-08-16 14:36:23 +08:00
try {
// 初始化Opus编码器
if ( ! initOpusEncoder ()) {
log ( '无法启动录音: Opus编码器初始化失败' , 'error' );
return ;
}
// 请求麦克风权限
const stream = await navigator . mediaDevices . getUserMedia ({
audio : {
echoCancellation : true ,
noiseSuppression : true ,
sampleRate : 16000 ,
channelCount : 1
}
});
// 创建音频上下文和分析器
2025-08-23 07:47:40 +08:00
audioContext = getAudioContextInstance ();
2025-08-16 14:36:23 +08:00
// 创建音频处理器
const processorResult = await createAudioProcessor ();
if ( ! processorResult ) {
log ( '无法创建音频处理器' , 'error' );
return ;
}
audioProcessor = processorResult . node ;
audioProcessorType = processorResult . type ;
// 连接音频处理链
audioSource = audioContext . createMediaStreamSource ( stream );
analyser = audioContext . createAnalyser ();
analyser . fftSize = 2048 ;
audioSource . connect ( analyser );
audioSource . connect ( audioProcessor );
// 启动录音
pcmDataBuffer = new Int16Array ();
audioBuffers = [];
totalAudioSize = 0 ;
isRecording = true ;
// 启动音频处理器的录音 - 只有AudioWorklet才需要发送消息
if ( audioProcessorType === 'worklet' && audioProcessor . port ) {
audioProcessor . port . postMessage ({ command : 'start' });
}
// 发送监听开始消息
if ( websocket && websocket . readyState === WebSocket . OPEN ) {
// 使用与服务端期望的listen消息格式
const listenMessage = {
type : 'listen' ,
mode : 'manual' , // 使用手动模式，由我们控制开始/停止
state : 'start' // 表示开始录音
};
log ( `发送录音开始消息: ${ JSON . stringify ( listenMessage ) } ` , 'info' );
websocket . send ( JSON . stringify ( listenMessage ));
} else {
log ( 'WebSocket未连接，无法发送开始消息' , 'error' );
return false ;
}
// 开始音频可视化
const dataArray = new Uint8Array ( analyser . frequencyBinCount );
drawVisualizer ( dataArray );
// 在UI上显示录音计时器
let recordingSeconds = 0 ;
const recordingTimer = setInterval (() => {
recordingSeconds += 0.1 ;
recordButton . textContent = `停止录音 ${ recordingSeconds . toFixed ( 1 ) } 秒` ;
}, 100 );
// 保存计时器，以便在停止时清除
window . recordingTimer = recordingTimer ;
recordButton . classList . add ( 'recording' );
recordButton . disabled = false ;
log ( '开始PCM直接录音' , 'success' );
return true ;
} catch ( error ) {
log ( `直接录音启动错误: ${ error . message } ` , 'error' );
isRecording = false ;
2025-08-15 11:26:14 +08:00
return false ;
}
2025-03-31 09:38:26 +08:00
}
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 停止直接从PCM数据录音
function stopDirectRecording () {
if ( ! isRecording ) return ;
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
try {
// 停止录音
isRecording = false ;
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 停止音频处理器的录音
if ( audioProcessor ) {
// 只有AudioWorklet才需要发送停止消息
if ( audioProcessorType === 'worklet' && audioProcessor . port ) {
audioProcessor . port . postMessage ({ command : 'stop' });
}
audioProcessor . disconnect ();
audioProcessor = null ;
2025-03-31 09:38:26 +08:00
}
2025-03-31 21:04:11 +08:00
2025-08-16 14:36:23 +08:00
// 断开音频连接
if ( audioSource ) {
audioSource . disconnect ();
audioSource = null ;
2025-08-15 11:26:14 +08:00
}
2025-08-16 14:36:23 +08:00
// 停止可视化
if ( visualizationRequest ) {
cancelAnimationFrame ( visualizationRequest );
visualizationRequest = null ;
}
// 清除录音计时器
if ( window . recordingTimer ) {
clearInterval ( window . recordingTimer );
window . recordingTimer = null ;
}
// 编码并发送剩余的数据
encodeAndSendOpus ();
// 发送一个空的消息作为结束标志（模拟接收到空音频数据的情况）
if ( websocket && websocket . readyState === WebSocket . OPEN ) {
// 使用空的Uint8Array发送最后一个空帧
const emptyOpusFrame = new Uint8Array ( 0 );
websocket . send ( emptyOpusFrame );
// 发送监听结束消息
const stopMessage = {
type : 'listen' ,
mode : 'manual' ,
state : 'stop'
};
websocket . send ( JSON . stringify ( stopMessage ));
log ( '已发送录音停止信号' , 'info' );
}
// 重置UI
recordButton . textContent = '开始录音' ;
recordButton . classList . remove ( 'recording' );
recordButton . disabled = false ;
log ( '停止PCM直接录音' , 'success' );
return true ;
} catch ( error ) {
log ( `直接录音停止错误: ${ error . message } ` , 'error' );
return false ;
2025-08-15 11:26:14 +08:00
}
}
2025-08-16 14:36:23 +08:00
async function handleBinaryMessage ( data ) {
try {
let arrayBuffer ;
// 根据数据类型进行处理
if ( data instanceof ArrayBuffer ) {
arrayBuffer = data ;
log ( `收到ArrayBuffer音频数据，大小: ${ data . byteLength } 字节` , 'debug' );
} else if ( data instanceof Blob ) {
// 如果是Blob类型，转换为ArrayBuffer
arrayBuffer = await data . arrayBuffer ();
log ( `收到Blob音频数据，大小: ${ arrayBuffer . byteLength } 字节` , 'debug' );
} else {
log ( `收到未知类型的二进制数据: ${ typeof data } ` , 'warning' );
return ;
}
// 创建Uint8Array用于处理
const opusData = new Uint8Array ( arrayBuffer );
if ( opusData . length > 0 ) {
// 将数据添加到缓冲队列
queue . enqueue ( opusData );
} else {
log ( '收到空音频数据帧，可能是结束标志' , 'warning' );
// 如果正在播放，发送结束信号
if ( isAudioPlaying && streamingContext ) {
streamingContext . endOfStream = true ;
}
}
} catch ( error ) {
log ( `处理二进制消息出错: ${ error . message } ` , 'error' );
}
}
2025-08-15 11:26:14 +08:00
2025-08-16 14:36:23 +08:00
// 获取配置值
function getConfig () {
const deviceMac = document . getElementById ( 'deviceMac' ). value . trim ();
return {
deviceId : deviceMac , // 使用MAC地址作为deviceId
deviceName : document . getElementById ( 'deviceName' ). value . trim (),
deviceMac : deviceMac ,
clientId : document . getElementById ( 'clientId' ). value . trim (),
token : document . getElementById ( 'token' ). value . trim ()
};
}
2025-10-24 10:17:32 +08:00
// ==========================================
// MCP 工具管理逻辑
// ==========================================
// 默认工具数据
const defaultMcpTools = [
{
name : "self.get_device_status" ,
description : "Provides the real-time information of the device, including the current status of the audio speaker, screen, battery, network, etc.\nUse this tool for: \n1. Answering questions about current condition (e.g. what is the current volume of the audio speaker?)\n2. As the first step to control the device (e.g. turn up / down the volume of the audio speaker, etc.)" ,
inputSchema : {
type : "object" ,
properties : {}
},
mockResponse : {
audio_speaker : { volume : 50 , muted : false },
screen : { brightness : 80 , theme : 'light' },
battery : { level : 85 , charging : false },
network : { connected : true , type : 'wifi' }
}
},
{
name : "self.audio_speaker.set_volume" ,
description : "Set the volume of the audio speaker. If the current volume is unknown, you must call `self.get_device_status` tool first and then call this tool." ,
inputSchema : {
type : "object" ,
properties : {
volume : {
type : "integer" ,
minimum : 0 ,
maximum : 100
}
},
required : [ "volume" ]
},
mockResponse : {
success : true ,
volume : "${volume}" ,
message : "音量已设置为 ${volume}"
}
},
{
name : "self.screen.set_brightness" ,
description : "Set the brightness of the screen." ,
inputSchema : {
type : "object" ,
properties : {
brightness : {
type : "integer" ,
minimum : 0 ,
maximum : 100
}
},
required : [ "brightness" ]
},
mockResponse : {
success : true ,
brightness : "${brightness}" ,
message : "亮度已设置为 ${brightness}"
}
}
];
// 全局变量
let mcpTools = [];
let mcpEditingIndex = null ;
let mcpProperties = [];
// 初始化 MCP 工具
function initMcpTools () {
const savedTools = localStorage . getItem ( 'mcpTools' );
if ( savedTools ) {
try {
mcpTools = JSON . parse ( savedTools );
} catch ( e ) {
log ( '加载MCP工具失败，使用默认工具' , 'warning' );
mcpTools = [... defaultMcpTools ];
}
} else {
mcpTools = [... defaultMcpTools ];
}
renderMcpTools ();
setupMcpEventListeners ();
}
// 渲染工具列表
function renderMcpTools () {
const container = document . getElementById ( 'mcpToolsContainer' );
const countSpan = document . getElementById ( 'mcpToolsCount' );
countSpan . textContent = ` ${ mcpTools . length } 个工具` ;
if ( mcpTools . length === 0 ) {
container . innerHTML = '<div style="text-align: center; padding: 30px; color: #999;">暂无工具，点击下方按钮添加新工具</div>' ;
return ;
}
container . innerHTML = mcpTools . map (( tool , index ) => {
const paramCount = tool . inputSchema . properties ? Object . keys ( tool . inputSchema . properties ). length : 0 ;
const requiredCount = tool . inputSchema . required ? tool . inputSchema . required . length : 0 ;
const hasMockResponse = tool . mockResponse && Object . keys ( tool . mockResponse ). length > 0 ;
return `
<div class="mcp-tool-card">
<div class="mcp-tool-header">
<div class="mcp-tool-name"> ${ tool . name } </div>
<div class="mcp-tool-actions">
<button onclick="editMcpTool( ${ index } )"
style="padding: 4px 10px; border: none; border-radius: 4px; background-color: #2196f3; color: white; cursor: pointer; font-size: 12px;">
✏️ 编辑
</button>
<button onclick="deleteMcpTool( ${ index } )"
style="padding: 4px 10px; border: none; border-radius: 4px; background-color: #f44336; color: white; cursor: pointer; font-size: 12px;">
🗑️ 删除
</button>
</div>
</div>
<div class="mcp-tool-description"> ${ tool . description } </div>
<div class="mcp-tool-info">
<div class="mcp-tool-info-row">
<span class="mcp-tool-info-label">参数数量:</span>
<span class="mcp-tool-info-value"> ${ paramCount } 个 ${ requiredCount > 0 ? `( ${ requiredCount } 个必填)` : '' } </span>
</div>
<div class="mcp-tool-info-row">
<span class="mcp-tool-info-label">模拟返回:</span>
<span class="mcp-tool-info-value"> ${ hasMockResponse ? '✅ 已配置: ' + JSON . stringify ( tool . mockResponse ) : '⚪ 使用默认' } </span>
</div>
</div>
</div>
` ;
}). join ( '' );
}
// 渲染参数列表
function renderMcpProperties () {
const container = document . getElementById ( 'mcpPropertiesContainer' );
if ( mcpProperties . length === 0 ) {
container . innerHTML = '<div style="text-align: center; padding: 20px; color: #999; font-size: 14px;">暂无参数，点击下方按钮添加参数</div>' ;
return ;
}
container . innerHTML = mcpProperties . map (( prop , index ) => `
<div class="mcp-property-item">
<div class="mcp-property-header">
<span class="mcp-property-name"> ${ prop . name } </span>
<button type="button" onclick="deleteMcpProperty( ${ index } )"
style="padding: 3px 8px; border: none; border-radius: 3px; background-color: #f44336; color: white; cursor: pointer; font-size: 11px;">
删除
</button>
</div>
<div class="mcp-property-row">
<div>
<label class="mcp-small-label">参数名称 *</label>
<input type="text" class="mcp-small-input" value=" ${ prop . name } "
onchange="updateMcpProperty( ${ index } , 'name', this.value)" required>
</div>
<div>
<label class="mcp-small-label">数据类型 *</label>
<select class="mcp-small-input" onchange="updateMcpProperty( ${ index } , 'type', this.value)">
<option value="string" ${ prop . type === 'string' ? 'selected' : '' } >字符串</option>
<option value="integer" ${ prop . type === 'integer' ? 'selected' : '' } >整数</option>
<option value="number" ${ prop . type === 'number' ? 'selected' : '' } >数字</option>
<option value="boolean" ${ prop . type === 'boolean' ? 'selected' : '' } >布尔值</option>
<option value="array" ${ prop . type === 'array' ? 'selected' : '' } >数组</option>
<option value="object" ${ prop . type === 'object' ? 'selected' : '' } >对象</option>
</select>
</div>
</div>
${ ( prop . type === 'integer' || prop . type === 'number' ) ? `
<div class="mcp-property-row">
<div>
<label class="mcp-small-label">最小值</label>
<input type="number" class="mcp-small-input" value=" ${ prop . minimum !== undefined ? prop . minimum : '' } "
placeholder="可选" onchange="updateMcpProperty( ${ index } , 'minimum', this.value ? parseFloat(this.value) : undefined)">
</div>
<div>
<label class="mcp-small-label">最大值</label>
<input type="number" class="mcp-small-input" value=" ${ prop . maximum !== undefined ? prop . maximum : '' } "
placeholder="可选" onchange="updateMcpProperty( ${ index } , 'maximum', this.value ? parseFloat(this.value) : undefined)">
</div>
</div>
` : '' }
<div class="mcp-property-row-full">
<label class="mcp-small-label">参数描述</label>
<input type="text" class="mcp-small-input" value=" ${ prop . description || '' } "
placeholder="可选" onchange="updateMcpProperty( ${ index } , 'description', this.value)">
</div>
<label class="mcp-checkbox-label">
<input type="checkbox" ${ prop . required ? 'checked' : '' }
onchange="updateMcpProperty( ${ index } , 'required', this.checked)">
必填参数
</label>
</div>
` ). join ( '' );
}
// 添加参数
function addMcpProperty () {
mcpProperties . push ({
name : `param_ ${ mcpProperties . length + 1 } ` ,
type : 'string' ,
required : false ,
description : ''
});
renderMcpProperties ();
}
// 更新参数
window . updateMcpProperty = function ( index , field , value ) {
if ( field === 'name' ) {
const isDuplicate = mcpProperties . some (( p , i ) => i !== index && p . name === value );
if ( isDuplicate ) {
alert ( '参数名称已存在，请使用不同的名称' );
renderMcpProperties ();
return ;
}
}
mcpProperties [ index ][ field ] = value ;
if ( field === 'type' && value !== 'integer' && value !== 'number' ) {
delete mcpProperties [ index ]. minimum ;
delete mcpProperties [ index ]. maximum ;
renderMcpProperties ();
}
};
// 删除参数
window . deleteMcpProperty = function ( index ) {
mcpProperties . splice ( index , 1 );
renderMcpProperties ();
};
// 设置事件监听
function setupMcpEventListeners () {
const toggleBtn = document . getElementById ( 'toggleMcpTools' );
const panel = document . getElementById ( 'mcpToolsPanel' );
const addBtn = document . getElementById ( 'addMcpToolBtn' );
const modal = document . getElementById ( 'mcpToolModal' );
const closeBtn = document . getElementById ( 'closeMcpModalBtn' );
const cancelBtn = document . getElementById ( 'cancelMcpBtn' );
const form = document . getElementById ( 'mcpToolForm' );
const addPropertyBtn = document . getElementById ( 'addMcpPropertyBtn' );
toggleBtn . addEventListener ( 'click' , () => {
const isExpanded = panel . classList . contains ( 'expanded' );
panel . classList . toggle ( 'expanded' );
toggleBtn . textContent = isExpanded ? '展开' : '收起' ;
});
addBtn . addEventListener ( 'click' , () => openMcpModal ());
closeBtn . addEventListener ( 'click' , closeMcpModal );
cancelBtn . addEventListener ( 'click' , closeMcpModal );
addPropertyBtn . addEventListener ( 'click' , addMcpProperty );
modal . addEventListener ( 'click' , ( e ) => {
if ( e . target === modal ) closeMcpModal ();
});
form . addEventListener ( 'submit' , handleMcpSubmit );
}
// 打开模态框
function openMcpModal ( index = null ) {
const isConnected = websocket && websocket . readyState === WebSocket . OPEN ;
if ( isConnected ) {
alert ( 'WebSocket 已连接，无法编辑工具' );
return ;
}
mcpEditingIndex = index ;
const errorContainer = document . getElementById ( 'mcpErrorContainer' );
errorContainer . innerHTML = '' ;
if ( index !== null ) {
document . getElementById ( 'mcpModalTitle' ). textContent = '编辑工具' ;
const tool = mcpTools [ index ];
document . getElementById ( 'mcpToolName' ). value = tool . name ;
document . getElementById ( 'mcpToolDescription' ). value = tool . description ;
document . getElementById ( 'mcpMockResponse' ). value = tool . mockResponse ? JSON . stringify ( tool . mockResponse , null , 2 ) : '' ;
mcpProperties = [];
const schema = tool . inputSchema ;
if ( schema . properties ) {
Object . keys ( schema . properties ). forEach ( key => {
const prop = schema . properties [ key ];
mcpProperties . push ({
name : key ,
type : prop . type || 'string' ,
minimum : prop . minimum ,
maximum : prop . maximum ,
description : prop . description || '' ,
required : schema . required && schema . required . includes ( key )
});
});
}
} else {
document . getElementById ( 'mcpModalTitle' ). textContent = '添加工具' ;
document . getElementById ( 'mcpToolForm' ). reset ();
mcpProperties = [];
}
renderMcpProperties ();
document . getElementById ( 'mcpToolModal' ). style . display = 'block' ;
}
// 关闭模态框
function closeMcpModal () {
document . getElementById ( 'mcpToolModal' ). style . display = 'none' ;
mcpEditingIndex = null ;
document . getElementById ( 'mcpToolForm' ). reset ();
mcpProperties = [];
document . getElementById ( 'mcpErrorContainer' ). innerHTML = '' ;
}
// 处理表单提交
function handleMcpSubmit ( e ) {
e . preventDefault ();
const errorContainer = document . getElementById ( 'mcpErrorContainer' );
errorContainer . innerHTML = '' ;
const name = document . getElementById ( 'mcpToolName' ). value . trim ();
const description = document . getElementById ( 'mcpToolDescription' ). value . trim ();
const mockResponseText = document . getElementById ( 'mcpMockResponse' ). value . trim ();
// 检查名称重复
const isDuplicate = mcpTools . some (( tool , index ) =>
tool . name === name && index !== mcpEditingIndex
);
if ( isDuplicate ) {
showMcpError ( '工具名称已存在，请使用不同的名称' );
return ;
}
// 解析模拟返回结果
let mockResponse = null ;
if ( mockResponseText ) {
try {
mockResponse = JSON . parse ( mockResponseText );
} catch ( e ) {
showMcpError ( '模拟返回结果不是有效的 JSON 格式: ' + e . message );
return ;
}
}
// 构建 inputSchema
const inputSchema = {
type : "object" ,
properties : {},
required : []
};
mcpProperties . forEach ( prop => {
const propSchema = { type : prop . type };
if ( prop . description ) {
propSchema . description = prop . description ;
}
if (( prop . type === 'integer' || prop . type === 'number' )) {
if ( prop . minimum !== undefined && prop . minimum !== '' ) {
propSchema . minimum = prop . minimum ;
}
if ( prop . maximum !== undefined && prop . maximum !== '' ) {
propSchema . maximum = prop . maximum ;
}
}
inputSchema . properties [ prop . name ] = propSchema ;
if ( prop . required ) {
inputSchema . required . push ( prop . name );
}
});
if ( inputSchema . required . length === 0 ) {
delete inputSchema . required ;
}
const tool = { name , description , inputSchema , mockResponse };
if ( mcpEditingIndex !== null ) {
mcpTools [ mcpEditingIndex ] = tool ;
log ( `已更新工具: ${ name } ` , 'success' );
} else {
mcpTools . push ( tool );
log ( `已添加工具: ${ name } ` , 'success' );
}
saveMcpTools ();
renderMcpTools ();
closeMcpModal ();
}
// 显示错误
function showMcpError ( message ) {
const errorContainer = document . getElementById ( 'mcpErrorContainer' );
errorContainer . innerHTML = `<div class="mcp-error"> ${ escapeHtml ( message ) } </div>` ;
}
// 编辑工具
window . editMcpTool = function ( index ) {
openMcpModal ( index );
};
// 删除工具
window . deleteMcpTool = function ( index ) {
const isConnected = websocket && websocket . readyState === WebSocket . OPEN ;
if ( isConnected ) {
alert ( 'WebSocket 已连接，无法编辑工具' );
return ;
}
if ( confirm ( `确定要删除工具 " ${ mcpTools [ index ]. name } " 吗？` )) {
const toolName = mcpTools [ index ]. name ;
mcpTools . splice ( index , 1 );
saveMcpTools ();
renderMcpTools ();
log ( `已删除工具: ${ toolName } ` , 'info' );
}
};
// 保存工具
function saveMcpTools () {
localStorage . setItem ( 'mcpTools' , JSON . stringify ( mcpTools ));
}
// 获取工具列表
function getMcpTools () {
return mcpTools . map ( tool => ({
name : tool . name ,
description : tool . description ,
inputSchema : tool . inputSchema
}));
}
// 执行工具调用
function executeMcpTool ( toolName , toolArgs ) {
const tool = mcpTools . find ( t => t . name === toolName );
if ( ! tool ) {
log ( `未找到工具: ${ toolName } ` , 'error' );
return {
success : false ,
error : `未知工具: ${ toolName } `
};
}
// 如果有模拟返回结果，使用它
if ( tool . mockResponse ) {
// 替换模板变量
let responseStr = JSON . stringify ( tool . mockResponse );
// 替换 ${paramName} 格式的变量
if ( toolArgs ) {
Object . keys ( toolArgs ). forEach ( key => {
const regex = new RegExp ( `\\$\\{ ${ key } \\}` , 'g' );
responseStr = responseStr . replace ( regex , toolArgs [ key ]);
});
}
try {
const response = JSON . parse ( responseStr );
log ( `工具 ${ toolName } 执行成功，返回模拟结果: ${ responseStr } ` , 'success' );
return response ;
} catch ( e ) {
log ( `解析模拟返回结果失败: ${ e . message } ` , 'error' );
return tool . mockResponse ;
}
}
// 没有模拟返回结果，返回默认成功消息
log ( `工具 ${ toolName } 执行成功，返回默认结果` , 'success' );
return {
success : true ,
message : `工具 ${ toolName } 执行成功` ,
tool : toolName ,
arguments : toolArgs
};
}
2025-08-16 14:36:23 +08:00
initApp ();
2025-10-24 10:17:32 +08:00
initMcpTools ();
2025-08-16 14:36:23 +08:00
</ script >
2025-03-31 09:38:26 +08:00
</ body >
2025-03-31 21:04:11 +08:00
</ html >
