zguiy/a2f-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
yinsx
2026-02-03 14:16:42 +08:00
parent f98ff21394
commit c10cfa7c33
12 changed files with 603 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
examples/3d/index.html
View File

@ -17,54 +17,62 @@
<body>
<canvas id="renderCanvas"></canvas>
<div class="controls">
<h2>数字人形态键控制</h2>
<div class="input-group">
<label>文字输入</label>
<textarea id="textInput" placeholder="输入文字生成动画...">君不见，黄河之水天上来，奔流到海不复回，君不见，高堂明镜悲白发，朝如青丝暮成雪。</textarea>
<div class="controls collapsible-panel" id="mainControls">
<div class="panel-header">
<h2>数字人形态键控制</h2>
<button type="button" class="panel-toggle" onclick="togglePanel('mainControls')">收起</button>
</div>
<div class="input-group">
<label>API 地址</label>
<input type="text" id="apiUrl" value="http://localhost:5001/text-to-blendshapes">
<div class="panel-body">
<div class="input-group">
<label>文字输入</label>
<textarea id="textInput" placeholder="输入文字生成动画...">君不见，黄河之水天上来，奔流到海不复回，君不见，高堂明镜悲白发，朝如青丝暮成雪。</textarea>
</div>
<div class="input-group">
<label>API 地址</label>
<input type="text" id="apiUrl" value="http://localhost:5001/text-to-blendshapes">
</div>
<div class="input-group toggle-group">
<label>
<input type="checkbox" id="streamEnabled" checked>
启用流式传输
</label>
</div>
<div class="input-group">
<label>形态键强度: <span id="scaleValue">1.0</span></label>
<input type="range" id="scaleSlider" min="0" max="2" step="0.1" value="1.0"
oninput="updateScale(this.value)"
style="width: 100%; cursor: pointer;">
</div>
<div class="input-group">
<label>动画速度 (FPS): <span id="fpsValue">30</span></label>
<input type="range" id="fpsSlider" min="10" max="60" step="1" value="30"
oninput="updateFps(this.value)"
style="width: 100%; cursor: pointer;">
</div>
<button id="generateBtn" onclick="generateAnimation()">生成动画</button>
<button onclick="playAnimation()">播放动画</button>
<button onclick="stopAnimation()">停止动画</button>
<button onclick="testBlendShape()">测试形态键</button>
<button onclick="resetBlendShapes()">重置形态键</button>
<div class="input-group">
<label>CSV动画文件</label>
<select id="csvSelect">
<option value="">-- 选择CSV文件 --</option>
</select>
<button onclick="loadAndPlayCsv()">播放单个</button>
<button id="playAllCsvBtn" onclick="playAllCsv()">播放全部CSV</button>
<div id="currentCsvName" style="margin-top: 8px; font-weight: bold; color: #4CAF50;"></div>
</div>
<div class="status" id="status"></div>
</div>
<div class="input-group toggle-group">
<label>
<input type="checkbox" id="streamEnabled" checked>
启用流式传输
</label>
</div>
<div class="input-group">
<label>形态键强度: <span id="scaleValue">1.0</span></label>
<input type="range" id="scaleSlider" min="0" max="2" step="0.1" value="1.0"
oninput="updateScale(this.value)"
style="width: 100%; cursor: pointer;">
</div>
<div class="input-group">
<label>动画速度 (FPS): <span id="fpsValue">30</span></label>
<input type="range" id="fpsSlider" min="10" max="60" step="1" value="30"
oninput="updateFps(this.value)"
style="width: 100%; cursor: pointer;">
</div>
<div class="input-group">
<label>播放倍速: <span id="speedValue">1.0x</span></label>
<input type="range" id="speedSlider" min="0.25" max="3" step="0.25" value="1.0"
oninput="updatePlaybackSpeed(this.value)"
style="width: 100%; cursor: pointer;">
</div>
<button id="generateBtn" onclick="generateAnimation()">生成动画</button>
<button onclick="playAnimation()">播放动画</button>
<button onclick="stopAnimation()">停止动画</button>
<button onclick="testBlendShape()">测试形态键</button>
<button onclick="resetBlendShapes()">重置形态键</button>
<div class="status" id="status"></div>
</div>
<!-- 当前播放句子显示（屏幕中央） -->
@ -72,11 +80,15 @@
<div id="sentenceText"></div>
</div>
<div class="idle-controls">
<h2>空闲动画控制</h2>
<div class="idle-controls collapsible-panel" id="idleControls">
<div class="panel-header">
<h2>空闲动画控制</h2>
<button type="button" class="panel-toggle" onclick="togglePanel('idleControls')">收起</button>
</div>
<!-- 随机眨眼 -->
<div class="checkbox-group">
<div class="panel-body">
<!-- 随机眨眼 -->
<div class="checkbox-group">
<label>
<button class="collapse-btn" onclick="toggleCollapse(event, 'blinkParams')">▼</button>
<input type="checkbox" id="blinkEnabled" onchange="toggleBlink()">