mirror of
https://github.com/xinnan-tech/xiaozhi-esp32-server.git
synced 2026-07-22 23:23:55 +08:00
228 lines
12 KiB
HTML
228 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>小智服务器测试页面</title>
|
|
<link rel="stylesheet" href="css/test_page.css">
|
|
<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>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div id="scriptStatus" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">
|
|
正在加载Opus库...
|
|
</div>
|
|
|
|
<!-- 两栏布局：设备配置和连接信息 -->
|
|
<div class="two-column-layout">
|
|
<!-- 设备配置面板 -->
|
|
<div class="section">
|
|
<h2>
|
|
设备配置
|
|
<button class="toggle-button" id="toggleConfig">编辑</button>
|
|
</h2>
|
|
<div class="config-panel" id="configPanel">
|
|
<div class="control-panel">
|
|
<div class="config-row">
|
|
<div class="config-item">
|
|
<label for="deviceMac">设备MAC:</label>
|
|
<input type="text" id="deviceMac" placeholder="device-id" disabled>
|
|
</div>
|
|
<div class="config-item">
|
|
<label for="deviceName">设备名称:</label>
|
|
<input type="text" id="deviceName" value="Web测试设备" placeholder="deviceName" disabled>
|
|
</div>
|
|
</div>
|
|
<div class="config-row">
|
|
<div class="config-item">
|
|
<label for="clientId">客户端ID:</label>
|
|
<input type="text" id="clientId" value="web_test_client" placeholder="client-id"
|
|
disabled>
|
|
</div>
|
|
<div class="config-item">
|
|
<label for="token">认证令牌:</label>
|
|
<input type="text" id="token" value="your-token1" placeholder="token" disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 连接信息面板 -->
|
|
<div class="section">
|
|
<h2>
|
|
连接信息
|
|
<span class="connection-status">
|
|
<span id="otaStatus" class="status">● OTA未连接</span>
|
|
<span id="connectionStatus" class="status">● WS未连接</span>
|
|
</span>
|
|
<button class="connect-button" id="connectButton">
|
|
<span>●</span>
|
|
连接
|
|
</button>
|
|
</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/" />
|
|
<input type="text" id="serverUrl" value="" readonly disabled placeholder="点击连接按钮后，自动从OTA接口获取" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="tabs">
|
|
<button class="tab active" data-tab="text">文本消息</button>
|
|
<button class="tab" data-tab="voice">语音消息</button>
|
|
</div>
|
|
|
|
<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 style="margin: -10px 0px 5px 0px;">
|
|
<span class="connection-status llm-emoji">
|
|
<span id="sessionStatus" class="status offline"><span class="emoji-large">😶</span> 小智离线中</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex-container">
|
|
<div id="conversation" class="conversation"></div>
|
|
<div id="logContainer">
|
|
<div class="log-entry log-info">准备就绪，请连接服务器开始测试...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
</div>
|
|
|
|
<!-- Opus解码库 -->
|
|
<script src="js/utils/libopus.js"></script>
|
|
|
|
<!-- 主应用入口 -->
|
|
<script type="module" src="js/app.js"></script>
|
|
</body>
|
|
|
|
</html> |