antiwear-web/frontend/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为交互数字人 - HwICSUiSdk 演示</title>
    <link rel="stylesheet" href="./styles/main.css">
</head>
<body>
    <div class="app-container">
        <!-- 头部 -->
        <header class="header">
            <div class="logo">
                <span class="logo-icon">🎭</span>
                <h1>华为交互数字人</h1>
            </div>
            <div class="status-bar">
                <span id="connectionStatus" class="status disconnected">未连接</span>
                <span id="sdkVersion" class="version"></span>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 配置面板 -->
            <section class="config-panel">
                <h2>📋 连接配置</h2>
                
                <!-- 基本配置 -->
                <div class="config-section">
                    <h3>基本配置</h3>
                    <div class="form-group">
                        <label for="serverAddress">服务器地址</label>
                        <input type="text" id="serverAddress" placeholder="请输入服务器地址" value="metastudio-api.cn-north-4.myhuaweicloud.com">
                    </div>
                    <div class="form-group">
                        <label for="robotId">机器人ID</label>
                        <input type="text" id="robotId" placeholder="请输入机器人ID" value="2c9084bf9c9cc1c0019db2c4ca2a5c89">
                    </div>
                </div>

                <!-- 授权码配置 -->
                <div class="config-section">
                    <h3>授权码</h3>
                    <div class="form-group">
                        <label for="onceCode">一次性授权码</label>
                        <div class="input-with-button">
                            <input type="text" id="onceCode" placeholder="请输入一次性授权码或点击获取" value="" readonly>
                            <button id="getOnceCodeBtn" class="btn btn-secondary">🔑 获取授权码</button>
                        </div>
                        <small class="field-hint">有效期5分钟，只能使用一次</small>
                    </div>
                </div>

                <div class="form-actions main-actions">
                    <button id="initBtn" class="btn btn-primary">初始化 SDK</button>
                    <button id="destroyBtn" class="btn btn-danger" disabled>销毁 SDK</button>
                </div>
            </section>

            <!-- 数字人显示区 -->
            <section class="digital-human-container">
                <h2>🎬 数字人显示</h2>
                <div id="digitalHumanBox" class="digital-human-box">
                    <div class="placeholder">
                        <span class="placeholder-icon">🤖</span>
                        <p>请先初始化 SDK 并创建数字人</p>
                    </div>
                </div>
                
                <!-- 控制按钮 -->
                <div class="control-panel">
                    <div class="control-group">
                        <h3>对话控制</h3>
                        <div class="button-row">
                            <button id="startChatBtn" class="btn btn-success" disabled>
                                <span class="icon">▶️</span> 开始对话
                            </button>
                            <button id="stopChatBtn" class="btn btn-warning" disabled>
                                <span class="icon">⏹️</span> 停止对话
                            </button>
                        </div>
                    </div>

                    <div class="control-group">
                        <h3>语音交互</h3>
                        <div class="button-row">
                            <button id="startSpeakBtn" class="btn btn-info" disabled>
                                <span class="icon">🎤</span> 开始说话
                            </button>
                            <button id="stopSpeakBtn" class="btn btn-secondary" disabled>
                                <span class="icon">🛑</span> 停止说话
                            </button>
                        </div>
                    </div>

                    <div class="control-group">
                        <h3>文本交互</h3>
                        <div class="text-input-row">
                            <input type="text" id="textInput" placeholder="输入文本消息..." disabled>
                            <button id="sendTextBtn" class="btn btn-primary" disabled>
                                <span class="icon">📤</span> 发送
                            </button>
                        </div>
                    </div>

                    <div class="control-group">
                        <h3>其他控制</h3>
                        <div class="button-row">
                            <button id="interruptBtn" class="btn btn-warning" disabled>
                                <span class="icon">⚡</span> 打断说话
                            </button>
                            <button id="toggleAudioBtn" class="btn btn-secondary" disabled>
                                <span class="icon">🔊</span> 静音/取消静音
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 日志面板 -->
            <section class="log-panel">
                <h2>📜 事件日志</h2>
                <div class="log-toolbar">
                    <button id="clearLogBtn" class="btn btn-small">清空日志</button>
                    <select id="logLevel">
                        <option value="debug">Debug</option>
                        <option value="info" selected>Info</option>
                        <option value="warn">Warn</option>
                        <option value="error">Error</option>
                    </select>
                </div>
                <div id="logContainer" class="log-container"></div>
            </section>
        </main>

        <!-- 底部 -->
        <footer class="footer">
            <p>Powered by HwICSUiSdk | 华为交互数字人解决方案</p>
        </footer>
    </div>

    <!-- SDK 引入 -->
    <script type="module" src="./scripts/main.js"></script>
</body>
</html>