ZF sun
633ce3014f
添加字幕容器和各类文本元素（提示文字、消息文字、热词标题、热词问题）的背景颜色、透明度、圆角和内边距设置功能 新增范围滑块样式和实时值显示 实现从现有字幕容器加载样式配置的功能 扩展样式应用逻辑以处理新增的背景相关属性
304 lines
14 KiB
HTML
304 lines
14 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>华为交互数字人 - HwICSUiSdk 演示</title>
|
||
<link rel="stylesheet" href="./styles/main.css">
|
||
<link rel="stylesheet" href="./hwICSUiSdk/HwICSUiSdk.css">
|
||
</head>
|
||
<body>
|
||
<!-- 数字人全视口容器 -->
|
||
<div id="digitalHumanBox" class="digital-human-box">
|
||
<div class="fullscreen-exit-hint">按 ESC 退出全屏</div>
|
||
<div class="placeholder">
|
||
<span class="placeholder-icon">🤖</span>
|
||
<p>点击右下角 ⚙️ 按钮初始化 SDK</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 浮动控制栏 -->
|
||
<div class="floating-toolbar">
|
||
<button id="toggleConfigBtn" class="toolbar-btn" title="连接配置">
|
||
⚙️
|
||
</button>
|
||
<button id="toggleCaptionBtn" class="toolbar-btn" title="字幕样式">
|
||
📝
|
||
</button>
|
||
<button id="toggleLogBtn" class="toolbar-btn" title="事件日志">
|
||
📜
|
||
</button>
|
||
<button id="fullscreenBtn" class="toolbar-btn" title="全屏显示">
|
||
⛶
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 浮动面板：连接配置 -->
|
||
<div id="configPanel" class="floating-panel config-panel">
|
||
<div class="panel-header">
|
||
<h2>📋 连接配置</h2>
|
||
<button class="panel-close" data-panel="configPanel">×</button>
|
||
</div>
|
||
<div class="panel-content">
|
||
<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">
|
||
<button id="initBtn" class="btn btn-primary">初始化 SDK</button>
|
||
<button id="destroyBtn" class="btn btn-danger" disabled>销毁 SDK</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 浮动面板：字幕样式 -->
|
||
<div id="captionPanel" class="floating-panel caption-panel">
|
||
<div class="panel-header">
|
||
<h2>📝 字幕样式设置</h2>
|
||
<button class="panel-close" data-panel="captionPanel">×</button>
|
||
</div>
|
||
<div class="panel-content" style="max-height: 600px; overflow-y: auto;">
|
||
<!-- 字幕容器样式 -->
|
||
<div class="caption-style-section">
|
||
<h3>字幕容器 (container)</h3>
|
||
<div class="form-group">
|
||
<label for="containerBgColor">背景颜色</label>
|
||
<input type="color" id="containerBgColor" value="#1a1a2e">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="containerBgOpacity">背景透明度</label>
|
||
<input type="range" id="containerBgOpacity" value="85" min="0" max="100">
|
||
<span class="range-value">85%</span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="containerBorderColor">边框颜色</label>
|
||
<input type="color" id="containerBorderColor" value="#333333">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="containerBorderRadius">圆角 (px)</label>
|
||
<input type="number" id="containerBorderRadius" value="8" min="0" max="20">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="containerPadding">内边距 (px)</label>
|
||
<input type="number" id="containerPadding" value="10" min="0" max="30">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 提示文字样式 -->
|
||
<div class="caption-style-section">
|
||
<h3>提示文字 (tip)</h3>
|
||
<div class="form-group">
|
||
<label for="tipFontSize">字体大小 (px)</label>
|
||
<input type="number" id="tipFontSize" value="14" min="10" max="24">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tipFontWeight">字体粗细</label>
|
||
<select id="tipFontWeight">
|
||
<option value="normal">正常</option>
|
||
<option value="bold">粗体</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tipColor">字体颜色</label>
|
||
<input type="color" id="tipColor" value="#888888">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tipLineHeight">行高</label>
|
||
<input type="number" id="tipLineHeight" value="1.5" min="1" max="3" step="0.1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tipBgColor">背景颜色</label>
|
||
<input type="color" id="tipBgColor" value="#2a2a3e">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tipBgOpacity">背景透明度</label>
|
||
<input type="range" id="tipBgOpacity" value="60" min="0" max="100">
|
||
<span class="range-value">60%</span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tipBorderRadius">圆角 (px)</label>
|
||
<input type="number" id="tipBorderRadius" value="4" min="0" max="15">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tipPadding">内边距 (px)</label>
|
||
<input type="number" id="tipPadding" value="6" min="0" max="20">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 消息文字样式 -->
|
||
<div class="caption-style-section">
|
||
<h3>消息文字 (message)</h3>
|
||
<div class="form-group">
|
||
<label for="messageFontSize">字体大小 (px)</label>
|
||
<input type="number" id="messageFontSize" value="16" min="12" max="32">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="messageFontWeight">字体粗细</label>
|
||
<select id="messageFontWeight">
|
||
<option value="normal">正常</option>
|
||
<option value="bold">粗体</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="messageColor">字体颜色</label>
|
||
<input type="color" id="messageColor" value="#ffffff">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="messageLineHeight">行高</label>
|
||
<input type="number" id="messageLineHeight" value="1.5" min="1" max="3" step="0.1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="messageBgColor">背景颜色</label>
|
||
<input type="color" id="messageBgColor" value="#2a2a3e">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="messageBgOpacity">背景透明度</label>
|
||
<input type="range" id="messageBgOpacity" value="60" min="0" max="100">
|
||
<span class="range-value">60%</span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="messageBorderRadius">圆角 (px)</label>
|
||
<input type="number" id="messageBorderRadius" value="4" min="0" max="15">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="messagePadding">内边距 (px)</label>
|
||
<input type="number" id="messagePadding" value="8" min="0" max="20">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 热词标题样式 -->
|
||
<div class="caption-style-section">
|
||
<h3>热词标题 (hot-title)</h3>
|
||
<div class="form-group">
|
||
<label for="hotTitleFontSize">字体大小 (px)</label>
|
||
<input type="number" id="hotTitleFontSize" value="14" min="10" max="24">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotTitleFontWeight">字体粗细</label>
|
||
<select id="hotTitleFontWeight">
|
||
<option value="normal">正常</option>
|
||
<option value="bold" selected>粗体</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotTitleColor">字体颜色</label>
|
||
<input type="color" id="hotTitleColor" value="#ffcc00">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotTitleLineHeight">行高</label>
|
||
<input type="number" id="hotTitleLineHeight" value="1.5" min="1" max="3" step="0.1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotTitleBgColor">背景颜色</label>
|
||
<input type="color" id="hotTitleBgColor" value="#3a3a4e">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotTitleBgOpacity">背景透明度</label>
|
||
<input type="range" id="hotTitleBgOpacity" value="60" min="0" max="100">
|
||
<span class="range-value">60%</span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotTitleBorderRadius">圆角 (px)</label>
|
||
<input type="number" id="hotTitleBorderRadius" value="4" min="0" max="15">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotTitlePadding">内边距 (px)</label>
|
||
<input type="number" id="hotTitlePadding" value="6" min="0" max="20">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 热词问题样式 -->
|
||
<div class="caption-style-section">
|
||
<h3>热词问题 (hot-issues)</h3>
|
||
<div class="form-group">
|
||
<label for="hotIssuesFontSize">字体大小 (px)</label>
|
||
<input type="number" id="hotIssuesFontSize" value="14" min="10" max="24">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotIssuesFontWeight">字体粗细</label>
|
||
<select id="hotIssuesFontWeight">
|
||
<option value="normal">正常</option>
|
||
<option value="bold">粗体</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotIssuesColor">字体颜色</label>
|
||
<input type="color" id="hotIssuesColor" value="#00ccff">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotIssuesLineHeight">行高</label>
|
||
<input type="number" id="hotIssuesLineHeight" value="1.5" min="1" max="3" step="0.1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotIssuesBgColor">背景颜色</label>
|
||
<input type="color" id="hotIssuesBgColor" value="#2a2a3e">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotIssuesBgOpacity">背景透明度</label>
|
||
<input type="range" id="hotIssuesBgOpacity" value="60" min="0" max="100">
|
||
<span class="range-value">60%</span>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotIssuesBorderRadius">圆角 (px)</label>
|
||
<input type="number" id="hotIssuesBorderRadius" value="4" min="0" max="15">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="hotIssuesPadding">内边距 (px)</label>
|
||
<input type="number" id="hotIssuesPadding" value="6" min="0" max="20">
|
||
</div>
|
||
</div>
|
||
|
||
<button id="applyCaptionStyleBtn" class="btn btn-primary" style="width: 100%; margin-top: 16px;">应用样式</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 浮动面板：事件日志 -->
|
||
<div id="logPanel" class="floating-panel log-panel">
|
||
<div class="panel-header">
|
||
<h2>📜 事件日志</h2>
|
||
<div class="log-toolbar">
|
||
<button id="clearLogBtn" class="btn btn-small btn-secondary">清空</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>
|
||
<button class="panel-close" data-panel="logPanel">×</button>
|
||
</div>
|
||
<div class="panel-content">
|
||
<div id="logContainer" class="log-container"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 状态栏 -->
|
||
<div class="status-bar-floating">
|
||
<span id="connectionStatus" class="status disconnected">未连接</span>
|
||
<span id="sdkVersion" class="version"></span>
|
||
</div>
|
||
|
||
<script type="module" src="./scripts/main.js"></script>
|
||
</body>
|
||
</html>
|