renzixin
/
ai_fwt_pro


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
							<!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?v=0205">
    <script>
        // 检测是否使用file://协议打开
        if (window.location.protocol === 'file:') {
            document.addEventListener('DOMContentLoaded', function () {
                // 创建背景模糊遮罩
                const overlayDiv = document.createElement('div');
                overlayDiv.className = 'file-protocol-overlay';
                document.body.appendChild(overlayDiv);

                // 创建警告框
                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="background-container" id="backgroundContainer">
        <div class="background-overlay"></div>
    </div>

    <!-- 主容器 -->
    <div class="container">

        <!-- 摄像头显示区域（可拖动） -->
        <div class="camera-container" id="cameraContainer">
            <video id="cameraVideo" autoplay playsinline muted></video>
            <div class="camera-switch-mask" id="cameraSwitchMask">
                <div class="camera-switch-container">
                    <!-- 摄像头切换按钮 -->
                    <div class="camera-switch" id="cameraSwitch">
                        <svg class="btn-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7319" width="32" height="32"><path d="M722.1 530.3c0-44.9-13.8-86.5-37.2-120.9-0.3-0.6-0.6-1.2-0.9-1.7-2.9-4.2-6.1-8.1-9.2-12-0.4-0.5-0.7-1-1.1-1.5-21.4-26.3-48.3-46.7-78.7-59.9-0.8-0.4-1.7-0.8-2.5-1.2-4.9-2-9.8-3.8-14.9-5.5-1.8-0.6-3.6-1.3-5.4-1.8-4.4-1.3-8.8-2.4-13.3-3.5-2.5-0.6-4.9-1.2-7.4-1.7-1.2-0.2-2.4-0.6-3.6-0.8-3.3-0.6-6.7-0.8-10-1.3-2.3-0.3-4.6-0.7-6.9-0.9-5.6-0.5-11.2-0.8-16.7-0.9-1 0-2-0.1-3-0.1-0.2 0-0.3 0.1-0.5 0.1-42.8 0-84.6 13.1-120.4 38.6-11.5 8.1-14.2 24.1-6.2 35.7 8 11.6 23.8 14.4 35.2 6.3 27.7-19.7 60-29.6 93.1-29.3 4.8 0 9.5 0.3 14.1 0.7 1.4 0.2 2.8 0.4 4.3 0.5 3.8 0.5 7.6 1 11.3 1.8 1.6 0.3 3.3 0.8 4.9 1.1 3.7 0.8 7.3 1.7 10.9 2.8 1.1 0.4 2.2 0.8 3.4 1.2 4.1 1.3 8.1 2.8 12 4.5 0.4 0.2 0.8 0.4 1.2 0.5 23.6 10.3 44.3 26.1 60.4 45.9 0.1 0.1 0.2 0.3 0.3 0.4 22.7 28 36.4 63.9 36.4 102.9h-42.2L697 632.9l67.5-102.6h-42.4z m-119 133c-27.9 19.8-60.5 29.7-93.9 29.3-4.4-0.1-8.8-0.3-13.1-0.7-1.8-0.2-3.5-0.5-5.3-0.7-3.4-0.5-6.8-0.9-10.1-1.6-2-0.4-4-0.9-6.1-1.4-3.3-0.8-6.5-1.5-9.7-2.5-1.5-0.5-3-1-4.6-1.5-3.7-1.2-7.3-2.5-10.8-4-0.8-0.3-1.6-0.7-2.4-1.1-4.1-1.9-8.2-3.8-12.2-6l-0.6-0.3c-13.4-7.5-25.7-16.8-36.4-27.7-0.2-0.2-0.3-0.4-0.5-0.6-3.3-3.4-6.5-6.9-9.5-10.7-0.6-0.8-1.3-1.6-1.9-2.5-21.9-27.8-35.1-63-35.1-101.2h42.2l-67.5-102.6-67.5 102.6h42.2c0 45 13.9 86.7 37.3 121.1 0.3 0.5 0.5 1 0.8 1.5 2.4 3.5 5.1 6.8 7.7 10.1 1 1.3 1.9 2.6 2.9 3.8 3.9 4.7 7.9 9.2 12.1 13.5 0.4 0.4 0.8 0.9 1.2 1.3 14.1 14.3 30.1 26.4 47.4 36 0.5 0.3 0.9 0.6 1.4 0.8 5 2.7 10.1 5.2 15.3 7.5l3.9 1.8c4.4 1.9 9 3.5 13.6 5.1 2.2 0.7 4.4 1.5 6.6 2.2 4 1.2 8.1 2.2 12.3 3.2 2.8 0.7 5.5 1.4 8.3 1.9 1.2 0.3 2.3 0.6 3.4 0.8 3.9 0.7 7.8 1.1 11.8 1.6l4.2 0.6c7 0.7 14.1 1.2 21.1 1.2 42.9 0 84.7-13.3 120.6-38.8 11.4-8.2 14.2-24.1 6.2-35.8-8-11.5-23.8-14.3-35.3-6.2z m271.3-421.6H763c-26.5 0-82.9-119.7-112.5-119.7H370.6c-29.6 0-85.9 119.7-112.4 119.7H147.5c-46.3 0-83.9 40.2-83.9 89.7v478.8c0 49.6 37.6 89.8 83.9 89.8h726.9c46.3 0 83.9-40.1 83.9-89.8V331.4c0-49.5-37.6-89.7-83.9-89.7z m28 538.6c0 33.1-25 59.8-55.9 59.8h-671c-30.9 0-55.9-26.8-55.9-59.8V361.4c0-33 25-59.8 55.9-59.8h111.2c25.8 0 82-119.7 111.6-119.7h223.2c29.5 0 85.6 119.7 111.5 119.7h113.5c30.9 0 55.9 26.8 55.9 59.8v418.9z" p-id="7320" fill="#ffffff"></path></svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- 连接状态指示器 - 页面顶部中部 -->
        <div class="connection-status-top">
            <div class="status-indicator">
                <span class="status-dot status-disconnected"></span>
                <span id="connectionStatus">离线</span>
            </div>
        </div>

        <!-- 模型加载提示 -->
        <div class="model-container">
            <div class="model-loading" id="modelLoading">
                <div class="loading-char-float">
                    <div class="main-char">
                        <span>模</span><span>型</span><span>加</span><span>载</span><span>中</span><span>✨</span>
                    </div>
                    <div class="shadow-char">模型加载中✨</div>
                </div>
            </div>
        </div>

        <!-- Live2D Canvas 容器 -->
        <canvas id="live2d-stage"></canvas>

        <!-- 聊天消息流（弹幕样式） -->
        <div class="chat-container">
            <div class="chat-stream" id="chatStream">
                <!-- 聊天消息将动态插入这里 -->
            </div>
            <div class="chat-ipt" id="chatIpt">
                <input type="text" id="messageInput" autocomplete="off" placeholder="输入消息，按Enter发送">
            </div>
        </div>

        <!-- 底部控制栏 -->
        <div class="control-bar">
            <button class="control-btn" id="settingsBtn" title="设置">
                <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path
                        d="M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5A3.5 3.5 0 0 1 15.5 12A3.5 3.5 0 0 1 12 15.5M19.43 12.97C19.47 12.65 19.5 12.33 19.5 12C19.5 11.67 19.47 11.34 19.43 11L21.54 9.37C21.73 9.22 21.78 8.95 21.66 8.73L19.66 5.27C19.54 5.05 19.27 4.96 19.05 5.05L16.56 6.05C16.04 5.66 15.5 5.32 14.87 5.07L14.5 2.42C14.46 2.18 14.25 2 14 2H10C9.75 2 9.54 2.18 9.5 2.42L9.13 5.07C8.5 5.32 7.96 5.66 7.44 6.05L4.95 5.05C4.73 4.96 4.46 5.05 4.34 5.27L2.34 8.73C2.22 8.95 2.27 9.22 2.46 9.37L4.57 11C4.53 11.34 4.5 11.67 4.5 12C4.5 12.33 4.53 12.65 4.57 12.97L2.46 14.63C2.27 14.78 2.22 15.05 2.34 15.27L4.34 18.73C4.46 18.95 4.73 19.03 4.95 18.95L7.44 17.94C7.96 18.34 8.5 18.68 9.13 18.93L9.5 21.58C9.54 21.82 9.75 22 10 22H14C14.25 22 14.46 21.82 14.5 21.58L14.87 18.93C15.5 18.68 16.04 18.34 16.56 17.94L19.05 18.95C19.27 19.03 19.54 18.95 19.66 18.73L21.66 15.27C21.78 15.05 21.73 14.78 21.54 14.63L19.43 12.97Z" />
                </svg>
                <span class="btn-text">设置</span>
            </button>

            <button class="control-btn" id="cameraBtn" title="请先连接服务器" disabled>
                <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path
                        d="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z" />
                </svg>
                <span class="btn-text">摄像头</span>
            </button>

            <button class="control-btn dial-btn" id="dialBtn" title="拨号">
                <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path
                        d="M6.62,10.79C8.06,13.62 10.38,15.94 13.21,17.38L15.41,15.18C15.69,14.9 16.08,14.82 16.43,14.93C17.55,15.3 18.75,15.5 20,15.5A1,1 0 0,1 21,16.5V20A1,1 0 0,1 20,21A17,17 0 0,1 3,4A1,1 0 0,1 4,3H7.5A1,1 0 0,1 8.5,4C8.5,5.25 8.7,6.45 9.07,7.57C9.18,7.92 9.1,8.31 8.82,8.59L6.62,10.79Z" />
                </svg>
                <span class="btn-text">拨号</span>
            </button>

            <button class="control-btn" id="recordBtn" title="开始录音" disabled>
                <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
                    <path
                        d="M12,2A3,3 0 0,1 15,5V11A3,3 0 0,1 12,14A3,3 0 0,1 9,11V5A3,3 0 0,1 12,2M19,11C19,14.53 16.39,17.44 13,17.93V21H11V17.93C7.61,17.44 5,14.53 5,11H7A5,5 0 0,0 12,16A5,5 0 0,0 17,11H19Z" />
                </svg>
                <span class="btn-text">录音</span>
            </button>
        </div>
    </div>

    <!-- 设置弹窗 -->
    <div class="modal" id="settingsModal">
        <div class="modal-content settings-modal">
            <div class="modal-header">
                <h2>设置</h2>
                <button class="close-btn" id="closeSettingsBtn">&times;</button>
            </div>
            <div class="modal-body">
                <div class="settings-tabs">
                    <button class="tab-btn active" data-tab="device">设备配置</button>
                    <button class="tab-btn" data-tab="mcp">MCP工具</button>
                    <button class="tab-btn" data-tab="other">数字人皮肤</button>
                </div>

                <div class="tab-content active" id="deviceTab">
                    <!-- 设备配置面板 -->
                    <div class="config-panel">
                        <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">
                                </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">
                                </div>
                                <div class="config-item">
                                    <label for="deviceName">设备名称:</label>
                                    <input type="text" id="deviceName" value="Web测试设备" maxlength="50"
                                        placeholder="deviceName">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 连接信息面板 -->
                    <div class="connection-controls">
                        <div class="input-group">
                            <label for="otaUrl">OTA服务器地址:</label>
                            <input type="text" id="otaUrl" value="http://127.0.0.1:8002/xiaozhi/ota/"
                                placeholder="OTA服务器地址，如：http://127.0.0.1:8002/xiaozhi/ota/" />
                        </div>
                        <div class="input-group">
                            <label for="serverUrl">WebSocket服务器地址:</label>
                            <input type="text" id="serverUrl" value="" readonly disabled
                                placeholder="填写OTA地址后，点击拨号按钮自动连接" />
                        </div>
                        <div class="input-group">
                            <label for="visionUrl">视觉分析地址:</label>
                            <input type="text" id="visionUrl" value="" readonly disabled placeholder="成功建立ws连接后自动获取" />
                        </div>
                    </div>
                </div>

                <div class="tab-content" id="mcpTab">
                    <!-- MCP 工具管理区域 -->
                    <div class="mcp-tools-container">
                        <div class="mcp-tools-header">
                            <h3>MCP 工具管理</h3>
                        </div>
                        <div class="mcp-tools-panel" id="mcpToolsPanel">
                            <div class="mcp-tools-list" id="mcpToolsContainer">
                                <!-- 工具列表将动态插入这里 -->
                            </div>
                            <div class="mcp-actions">
                                <button class="btn-primary" id="addMcpToolBtn">
                                    ➕ 添加新工具
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-content" id="otherTab">
                    <div class="other-settings-panel">
                        <div class="control-panel">
                            <div class="config-row">
                                <div class="config-item">
                                    <label>选择模型:</label>
                                    <select id="live2dModelSelect" class="model-select">
                                        <option value="hiyori_pro_zh">hiyori (春日)</option>
                                        <option value="natori_pro_zh">natori (名取)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="config-row">
                                <div class="config-item">
                                    <label></label>
                                    <button class="background-btn" id="backgroundBtn" title="切换背景">
                                        <svg class="btn-icon" viewBox="0 0 24 24" fill="currentColor">
                                            <path
                                                d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15V18M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z" />
                                        </svg>
                                        <span class="btn-text">切换背景</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MCP 工具编辑模态框 -->
    <div id="mcpToolModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 id="mcpModalTitle">添加工具</h2>
                <button class="close-btn" id="closeMcpModalBtn">&times;</button>
            </div>
            <div class="modal-body">
                <div id="mcpErrorContainer"></div>
                <form id="mcpToolForm">
                    <div class="input-group">
                        <label for="mcpToolName">工具名称 *</label>
                        <input type="text" id="mcpToolName" placeholder="例如: self.get_device_status" required>
                    </div>
                    <div class="input-group">
                        <label for="mcpToolDescription">工具描述 *</label>
                        <textarea id="mcpToolDescription" placeholder="详细描述工具的功能和使用场景..." required></textarea>
                    </div>
                    <div class="input-group">
                        <div class="input-group-header">
                            <label>输入参数</label>
                            <button type="button" class="properties-btn-primary" id="addMcpPropertyBtn">
                                ➕ 添加参数
                            </button>
                        </div>
                        <div class="properties-container">
                            <div class="mcp-empty-state" id="mcpEmptyState">
                                暂无参数，点击上方按钮添加参数
                            </div>
                            <div class="mcp-properties-list" id="mcpPropertiesContainer">
                            </div>
                        </div>
                    </div>
                    <div class="input-group">
                        <label for="mcpMockResponse">
                            模拟返回结果 (JSON 格式，可选)
                            <span style="font-size: 12px; color: #999; font-weight: normal;">- 留空则返回默认成功消息</span>
                        </label>
                        <textarea id="mcpMockResponse" placeholder='{"success": true, "data": "执行成功"}'></textarea>
                    </div>
                    <div class="modal-actions">
                        <button type="button" class="btn-secondary" id="cancelMcpBtn">取消</button>
                        <button type="submit" class="btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 参数编辑模态框 -->
    <div id="mcpPropertyModal" class="modal">
        <div class="modal-content property-modal">
            <div class="modal-header">
                <h2 id="mcpPropertyModalTitle">编辑参数</h2>
                <button class="close-btn" id="closeMcpPropertyModalBtn">&times;</button>
            </div>
            <div class="modal-body">
                <form id="mcpPropertyForm">
                    <input type="hidden" id="mcpPropertyIndex" value="-1">
                    <div class="input-group">
                        <label for="mcpPropertyName">参数名称 *</label>
                        <input type="text" id="mcpPropertyName" placeholder="例如: param_1" required>
                    </div>
                    <div class="input-group">
                        <label for="mcpPropertyType">数据类型 *</label>
                        <select id="mcpPropertyType" class="model-select" required>
                            <option value="string">字符串</option>
                            <option value="integer">整数</option>
                            <option value="number">数字</option>
                            <option value="boolean">布尔值</option>
                            <option value="array">数组</option>
                            <option value="object">对象</option>
                        </select>
                    </div>
                    <div class="input-group" id="mcpPropertyRangeGroup" style="display: none;">
                        <div class="config-row">
                            <div class="config-item">
                                <label for="mcpPropertyMinimum">最小值</label>
                                <input type="number" id="mcpPropertyMinimum" placeholder="可选">
                            </div>
                            <div class="config-item">
                                <label for="mcpPropertyMaximum">最大值</label>
                                <input type="number" id="mcpPropertyMaximum" placeholder="可选">
                            </div>
                        </div>
                    </div>
                    <div class="input-group">
                        <label for="mcpPropertyDescription">参数描述</label>
                        <input type="text" id="mcpPropertyDescription" placeholder="可选">
                    </div>
                    <div class="input-group">
                        <label class="mcp-checkbox-label">
                            <input type="checkbox" id="mcpPropertyRequired">
                            必填参数
                        </label>
                    </div>
                    <div class="modal-actions">
                        <button type="button" class="btn-secondary" id="cancelMcpPropertyBtn">取消</button>
                        <button type="submit" class="btn-primary">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 背景加载 -->
    <script src="js/ui/background-load.js?v=0205"></script>

    <!-- PIXI.js 2D渲染引擎 -->
    <script src="js/live2d/pixi.js?v=0205"></script>

    <!-- Live2D Cubism 4.0 SDK -->
    <script src="js/live2d/live2dcubismcore.min.js?v=0205"></script>
    <script src="js/live2d/cubism4.min.js?v=0205"></script>

    <!-- Live2D 管理器 -->
    <script src="js/live2d/live2d.js?v=0205"></script>

    <!-- Opus解码库 -->
    <script src="js/utils/libopus.js?v=0205"></script>

    <!-- 主应用入口 -->
    <script type="module" src="js/app.js?v=0205"></script>

    <!-- 全局错误处理 -->
    <script>
        // 添加全局错误处理
        window.addEventListener('error', function (event) {
            console.error('全局错误:', event.error);
        });

        // 添加未处理的Promise拒绝处理
        window.addEventListener('unhandledrejection', function (event) {
            console.error('未处理的Promise拒绝:', event.reason);
        });
    </script>
</body>

</html>