songjvcheng/html_digital_item
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: songjvcheng:prod
Branches Tags
songjvcheng:master
songjvcheng:prod-yantu
songjvcheng:prod
..
compare: songjvcheng:master
Branches Tags
songjvcheng:prod-yantu
songjvcheng:prod
songjvcheng:master

1 Commits
prod ... master

Author SHA1 Message Date
宋居成
42e883a752 Merge pull request 'prod' (#1) from prod into master 
Reviewed-on: #1
 2025-06-20 15:03:07 +08:00
5 changed files with 13 additions and 153 deletions
Show Stats Expand all files Collapse all files

164
simple.html
View File

@ -145,7 +145,7 @@
.statement {
position: absolute;
top: 42%;
bottom: 160px;
left: 80%;
transform: translate(-50%);
color: #fff;
@ -164,9 +164,9 @@
.subtitle {
position: absolute;
top: 50%;
left: 40%;
transform: translateX(-50%);
bottom: 40%;
left: 50%;
transform: translate(-50%);
color: #000;
padding: 12px;
box-sizing: border-box;
@ -181,80 +181,6 @@
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>
@ -267,28 +193,9 @@
<body>
<!-- 数字人容器 -->
<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="container"></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">
@ -304,8 +211,8 @@
<option value="female" >女</option>
</select>
<select class="input" id="answer_type" style="margin-bottom: 16px;">
<option value="jiguang">极光</option>
<option value="gongzheng" selected>公证</option>
<option value="jiguang" selected>极光</option>
<option value="gongzheng">公证</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" />
@ -316,39 +223,6 @@
</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 = {
@ -445,7 +319,6 @@
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"
})
@ -463,27 +336,21 @@
// })
duix.on('speakSection', (data) => {
console.info('speakSection', data)
document.querySelector('.image-panel').style.display = 'none'
document.querySelector('.subtitle').innerText = document.querySelector('.subtitle').innerText + data.content
// document.querySelector('.statement').innerText = all_answer + data;
document.querySelector('.subtitle').innerText = data.content
})
duix.on('asrStop', (data) => {
console.info('asrStop', data)
// document.querySelector('.subtitle').innerText = ''
// document.querySelector('.statement').innerText = ''
document.querySelector('.statement').innerText = data.content;
});
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 = data;
document.querySelector('.statement').innerText = ''
document.querySelector('.subtitle').innerText = ''
console.info('asrResult', data, trigger_status);
if (data.includes("暂停说话") || data.includes("暂停播放")){
if (data == "小公" || data == "小共" || data == "小工"){
duix.break()
trigger_status = true
return
@ -492,10 +359,8 @@
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 = {}
@ -597,9 +462,6 @@
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
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

1
yantu/out_quan.svg
View File

@ -1 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 2.9 KiB

1
yantu/quanping.svg
View File

@ -1 +0,0 @@
<?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>
Side by Side

Before

Width:  |  Height:  |  Size: 2.0 KiB

BIN
yantu/wenzi2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 177 KiB