Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
c56a1ca9e1 | ||
|
|
bc1ee53e43 | ||
|
|
7d263bca35 | ||
|
|
7f3014905e | ||
|
|
b78c644adc | ||
|
|
cd31c3a48a | ||
|
|
0ca652c37c | ||
|
|
fefc554f2b |
164
simple.html
164
simple.html
@ -145,7 +145,7 @@
|
||||
|
||||
.statement {
|
||||
position: absolute;
|
||||
bottom: 160px;
|
||||
top: 42%;
|
||||
left: 80%;
|
||||
transform: translate(-50%);
|
||||
color: #fff;
|
||||
@ -164,9 +164,9 @@
|
||||
|
||||
.subtitle {
|
||||
position: absolute;
|
||||
bottom: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
top: 50%;
|
||||
left: 40%;
|
||||
transform: translateX(-50%);
|
||||
color: #000;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
@ -181,6 +181,80 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 图片框样式 */
|
||||
.image-panel {
|
||||
position: absolute;
|
||||
top: 70%;
|
||||
left: 6%;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
.image-container-square {
|
||||
width: 16vw;
|
||||
height: 16vw;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
/* background: rgba(255, 255, 255, 0.1); */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-container-vertical {
|
||||
width: 64vw;
|
||||
height: 78vw;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
/* background: rgba(255, 255, 255, 0.1); */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.image-container-square img,
|
||||
.image-container-vertical img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
background: rgba(255,255,255,0.7);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 100001;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
padding: 0;
|
||||
}
|
||||
.icon-btn + .icon-btn {
|
||||
left: 74px;
|
||||
}
|
||||
.icon-btn:hover {
|
||||
background: #eee;
|
||||
}
|
||||
.icon-btn img {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
<script src="https://cdn.bootcss.com/eruda/1.3.2/eruda.min.js"></script>
|
||||
@ -193,9 +267,28 @@
|
||||
|
||||
<body>
|
||||
<!-- 数字人容器 -->
|
||||
<div class="container"></div>
|
||||
<div class="container">
|
||||
<!-- 图片框 -->
|
||||
<div class="image-panel">
|
||||
<div class="image-container-square">
|
||||
<img src="./yantu/erweima.jpg" alt="图片1">
|
||||
</div>
|
||||
<div class="image-container-vertical">
|
||||
<img src="./yantu/wenzi2.png" alt="图片2">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statement"></div>
|
||||
<div class="subtitle"></div>
|
||||
|
||||
<!-- 全屏图标按钮 -->
|
||||
<button id="fullscreenBtn" class="icon-btn" title="全屏">
|
||||
<img src="./yantu/quanping.svg" alt="全屏" width="28" height="28">
|
||||
</button>
|
||||
<!-- 退出全屏图标按钮 -->
|
||||
<button id="exitFullscreenBtn" class="icon-btn" title="退出全屏" style="display: none;">
|
||||
<img src="./yantu/out_quan.svg" alt="退出全屏" width="28" height="28">
|
||||
</button>
|
||||
<!-- <input class="input" style="display: block;border-color: #8f1e00;z-index: 999;" id="duihua" placeholder="输入对话" value=""> -->
|
||||
|
||||
<div id="modal" class="modal">
|
||||
@ -211,8 +304,8 @@
|
||||
<option value="female" >女</option>
|
||||
</select>
|
||||
<select class="input" id="answer_type" style="margin-bottom: 16px;">
|
||||
<option value="jiguang" selected>极光</option>
|
||||
<option value="gongzheng">公证</option>
|
||||
<option value="jiguang">极光</option>
|
||||
<option value="gongzheng" selected>公证</option>
|
||||
</select>
|
||||
<div style="display: none;margin-bottom: 8px; width: 100%; text-align: left; color: var(--text-200);">会话ID</div>
|
||||
<input class="input" id="conversationId" style="display: none;" placeholder="请输入会话ID" value="1920410565458886658" title="请输入会话ID" />
|
||||
@ -223,6 +316,39 @@
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// 全屏
|
||||
document.getElementById('fullscreenBtn').onclick = function() {
|
||||
if (document.documentElement.requestFullscreen) {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else if (document.documentElement.webkitRequestFullscreen) { // Safari
|
||||
document.documentElement.webkitRequestFullscreen();
|
||||
} else if (document.documentElement.msRequestFullscreen) { // IE11
|
||||
document.documentElement.msRequestFullscreen();
|
||||
}
|
||||
};
|
||||
|
||||
// 退出全屏
|
||||
document.getElementById('exitFullscreenBtn').onclick = function() {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.webkitExitFullscreen) { // Safari
|
||||
document.webkitExitFullscreen();
|
||||
} else if (document.msExitFullscreen) { // IE11
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
};
|
||||
|
||||
// 监听全屏状态变化，切换按钮显示
|
||||
document.addEventListener('fullscreenchange', function() {
|
||||
if (document.fullscreenElement) {
|
||||
document.getElementById('fullscreenBtn').style.display = 'none';
|
||||
document.getElementById('exitFullscreenBtn').style.display = 'inline-block';
|
||||
} else {
|
||||
document.getElementById('fullscreenBtn').style.display = 'inline-block';
|
||||
document.getElementById('exitFullscreenBtn').style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
const duix = new DUIX()
|
||||
|
||||
const sex = {
|
||||
@ -319,6 +445,7 @@
|
||||
console.info('show')
|
||||
// 此时可确认视频已
|
||||
document.querySelector('#modal').style.display = "none"
|
||||
document.querySelector('.image-panel').style.display = "flex"
|
||||
document.querySelector('.statement').style.visibility = "visible"
|
||||
document.querySelector('.subtitle').style.visibility = "visible"
|
||||
})
|
||||
@ -336,21 +463,27 @@
|
||||
// })
|
||||
duix.on('speakSection', (data) => {
|
||||
console.info('speakSection', data)
|
||||
document.querySelector('.subtitle').innerText = data.content
|
||||
document.querySelector('.image-panel').style.display = 'none'
|
||||
document.querySelector('.subtitle').innerText = document.querySelector('.subtitle').innerText + data.content
|
||||
// document.querySelector('.statement').innerText = all_answer + data;
|
||||
})
|
||||
duix.on('asrStop', (data) => {
|
||||
console.info('asrStop', data)
|
||||
document.querySelector('.statement').innerText = data.content;
|
||||
// document.querySelector('.subtitle').innerText = ''
|
||||
// document.querySelector('.statement').innerText = ''
|
||||
});
|
||||
duix.on('speakError', (data) => {
|
||||
console.info('speakError', data)
|
||||
})
|
||||
duix.on('asrResult', async (data) => {
|
||||
document.querySelector('.statement').innerText = ''
|
||||
document.querySelector('.subtitle').innerText = ''
|
||||
// document.querySelector('.statement').innerText = ''
|
||||
// document.querySelector('.subtitle').innerText = ''
|
||||
document.querySelector('.statement').innerText = data;
|
||||
|
||||
|
||||
console.info('asrResult', data, trigger_status);
|
||||
if (data == "小公" || data == "小共" || data == "小工"){
|
||||
|
||||
if (data.includes("暂停说话") || data.includes("暂停播放")){
|
||||
duix.break()
|
||||
trigger_status = true
|
||||
return
|
||||
@ -359,8 +492,10 @@
|
||||
|
||||
if (trigger_status) {
|
||||
try {
|
||||
document.querySelector('.subtitle').innerText = ''
|
||||
document.querySelector('.image-panel').style.display = 'flex'
|
||||
// document.querySelector('.statement').innerText = ''
|
||||
trigger_status = false;
|
||||
|
||||
|
||||
let plu = document.getElementById('answer_type')
|
||||
api_data = {}
|
||||
@ -462,6 +597,9 @@
|
||||
|
||||
if(end_talk == data["content"]){
|
||||
trigger_status = true
|
||||
document.querySelector('.image-panel').style.display = 'flex'
|
||||
document.querySelector('.subtitle').innerText = ''
|
||||
document.querySelector('.statement').innerText = ''
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
BIN
yantu/erweima.jpg
Normal file
BIN
yantu/erweima.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
1
yantu/out_quan.svg
Normal file
1
yantu/out_quan.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750851117505" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6046" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M257.706667 376.32H128c-11.946667 0-21.333333-9.386667-21.333333-21.333333s9.386667-21.333333 21.333333-21.333334h129.706667c35.413333 0 64-28.586667 64-64V128c0-11.946667 9.386667-21.333333 21.333333-21.333333s21.333333 9.386667 21.333333 21.333333v141.653333a106.666667 106.666667 0 0 1-106.666666 106.666667zM896 376.32h-129.706667a106.666667 106.666667 0 0 1-106.666666-106.666667V128c0-11.946667 9.386667-21.333333 21.333333-21.333333s21.333333 9.386667 21.333333 21.333333v141.653333c0 35.413333 28.586667 64 64 64H896c11.946667 0 21.333333 9.386667 21.333333 21.333334s-9.386667 21.333333-21.333333 21.333333z" fill="#666666" p-id="6047"></path><path d="M896 376.32h-129.706667a106.666667 106.666667 0 0 1-106.666666-106.666667V128c0-11.946667 9.386667-21.333333 21.333333-21.333333s21.333333 9.386667 21.333333 21.333333v141.653333c0 35.413333 28.586667 64 64 64H896c11.946667 0 21.333333 9.386667 21.333333 21.333334s-9.386667 21.333333-21.333333 21.333333zM257.706667 376.32H128c-11.946667 0-21.333333-9.386667-21.333333-21.333333s9.386667-21.333333 21.333333-21.333334h129.706667c35.413333 0 64-28.586667 64-64V128c0-11.946667 9.386667-21.333333 21.333333-21.333333s21.333333 9.386667 21.333333 21.333333v141.653333a106.666667 106.666667 0 0 1-106.666666 106.666667zM680.96 917.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333v-141.653333a106.666667 106.666667 0 0 1 106.666666-106.666667H896c11.946667 0 21.333333 9.386667 21.333333 21.333333s-9.386667 21.333333-21.333333 21.333334h-129.706667c-35.413333 0-64 28.586667-64 64V896c0 11.946667-9.386667 21.333333-21.333333 21.333333zM343.04 917.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333v-141.653333c0-35.413333-28.586667-64-64-64H128c-11.946667 0-21.333333-9.386667-21.333333-21.333334s9.386667-21.333333 21.333333-21.333333h129.706667a106.666667 106.666667 0 0 1 106.666666 106.666667V896c0 11.946667-9.813333 21.333333-21.333333 21.333333z" fill="#666666" p-id="6048"></path><path d="M343.04 917.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333v-141.653333c0-35.413333-28.586667-64-64-64H128c-11.946667 0-21.333333-9.386667-21.333333-21.333334s9.386667-21.333333 21.333333-21.333333h129.706667a106.666667 106.666667 0 0 1 106.666666 106.666667V896c0 11.946667-9.813333 21.333333-21.333333 21.333333zM680.96 917.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333v-141.653333a106.666667 106.666667 0 0 1 106.666666-106.666667H896c11.946667 0 21.333333 9.386667 21.333333 21.333333s-9.386667 21.333333-21.333333 21.333334h-129.706667c-35.413333 0-64 28.586667-64 64V896c0 11.946667-9.386667 21.333333-21.333333 21.333333z" fill="#666666" p-id="6049"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
1
yantu/quanping.svg
Normal file
1
yantu/quanping.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1750851037916" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5070" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M145.066667 85.333333h153.6c25.6 0 42.666667-17.066667 42.666666-42.666666S324.266667 0 298.666667 0H34.133333C25.6 0 17.066667 8.533333 8.533333 17.066667 0 25.6 0 34.133333 0 42.666667v256c0 25.6 17.066667 42.666667 42.666667 42.666666s42.666667-17.066667 42.666666-42.666666V145.066667l230.4 230.4c17.066667 17.066667 42.666667 17.066667 59.733334 0 17.066667-17.066667 17.066667-42.666667 0-59.733334L145.066667 85.333333z m170.666666 563.2L162.133333 802.133333l-76.8 76.8V725.333333C85.333333 699.733333 68.266667 682.666667 42.666667 682.666667s-42.666667 17.066667-42.666667 42.666666v256c0 25.6 17.066667 42.666667 42.666667 42.666667h256c25.6 0 42.666667-17.066667 42.666666-42.666667s-17.066667-42.666667-42.666666-42.666666H145.066667l76.8-76.8 153.6-153.6c17.066667-17.066667 17.066667-42.666667 0-59.733334-17.066667-17.066667-42.666667-17.066667-59.733334 0z m665.6 34.133334c-25.6 0-42.666667 17.066667-42.666666 42.666666v153.6l-76.8-76.8-153.6-153.6c-17.066667-17.066667-42.666667-17.066667-59.733334 0-17.066667 17.066667-17.066667 42.666667 0 59.733334l153.6 153.6 76.8 76.8H725.333333c-25.6 0-42.666667 17.066667-42.666666 42.666666s17.066667 42.666667 42.666666 42.666667h256c25.6 0 42.666667-17.066667 42.666667-42.666667v-256c0-25.6-17.066667-42.666667-42.666667-42.666666z m0-682.666667h-256c-25.6 0-42.666667 17.066667-42.666666 42.666667s17.066667 42.666667 42.666666 42.666666h153.6l-76.8 76.8-153.6 153.6c-17.066667 17.066667-17.066667 42.666667 0 59.733334 17.066667 17.066667 42.666667 17.066667 59.733334 0l153.6-153.6 76.8-76.8v153.6c0 25.6 17.066667 42.666667 42.666666 42.666666s42.666667-17.066667 42.666667-42.666666v-256c0-25.6-17.066667-42.666667-42.666667-42.666667z" fill="" p-id="5071"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
BIN
yantu/wenzi2.png
Normal file
BIN
yantu/wenzi2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Loading…
x
Reference in New Issue
Block a user