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

Compare commits

merge into: songjvcheng:master
Branches Tags
songjvcheng:master
songjvcheng:prod-yantu
songjvcheng:prod
...
pull from: songjvcheng:prod
Branches Tags
songjvcheng:prod-yantu
songjvcheng:prod
songjvcheng:master

8 Commits
master ... prod

Author SHA1 Message Date
Song367
c56a1ca9e1 添加图片
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 3s
Details
2025-09-02 14:15:53 +08:00
Song367
bc1ee53e43 change 打断词
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 3s
Details
2025-07-30 17:07:16 +08:00
Song367
7d263bca35 info
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 4s
Details
2025-07-23 15:01:03 +08:00
Song367
7f3014905e select default
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 1m42s
Details
2025-07-23 14:39:21 +08:00
Song367
b78c644adc add svg
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 22s
Details
2025-06-25 19:35:20 +08:00
Song367
cd31c3a48a modify percent
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 4s
Details
2025-06-20 17:18:00 +08:00
Song367
0ca652c37c add percent
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 4s
Details
2025-06-20 17:09:43 +08:00
Song367
fefc554f2b add satement
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 3s
Details
2025-06-20 16:01:57 +08:00
5 changed files with 153 additions and 13 deletions
Show Stats Expand all files Collapse all files

164
simple.html
View File

@ -145,7 +145,7 @@
.statement { .statement {
position: absolute; position: absolute;
bottom: 160px; top: 42%;
left: 80%; left: 80%;
transform: translate(-50%); transform: translate(-50%);
color: #fff; color: #fff;
@ -164,9 +164,9 @@
.subtitle { .subtitle {
position: absolute; position: absolute;
bottom: 40%; top: 50%;
left: 50%; left: 40%;
transform: translate(-50%); transform: translateX(-50%);
color: #000; color: #000;
padding: 12px; padding: 12px;
box-sizing: border-box; box-sizing: border-box;
@ -181,6 +181,80 @@
display: none; 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> </style>
<script src="https://cdn.bootcss.com/eruda/1.3.2/eruda.min.js"></script> <script src="https://cdn.bootcss.com/eruda/1.3.2/eruda.min.js"></script>
@ -193,9 +267,28 @@
<body> <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="statement"></div>
<div class="subtitle"></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=""> --> <!-- <input class="input" style="display: block;border-color: #8f1e00;z-index: 999;" id="duihua" placeholder="输入对话" value=""> -->
<div id="modal" class="modal"> <div id="modal" class="modal">
@ -211,8 +304,8 @@
<option value="female" >女</option> <option value="female" >女</option>
</select> </select>
<select class="input" id="answer_type" style="margin-bottom: 16px;"> <select class="input" id="answer_type" style="margin-bottom: 16px;">
<option value="jiguang" selected>极光</option> <option value="jiguang">极光</option>
<option value="gongzheng">公证</option> <option value="gongzheng" selected>公证</option>
</select> </select>
<div style="display: none;margin-bottom: 8px; width: 100%; text-align: left; color: var(--text-200);">会话ID</div> <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" /> <input class="input" id="conversationId" style="display: none;" placeholder="请输入会话ID" value="1920410565458886658" title="请输入会话ID" />
@ -223,6 +316,39 @@
</div> </div>
</div> </div>
<script> <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 duix = new DUIX()
const sex = { const sex = {
@ -319,6 +445,7 @@
console.info('show') console.info('show')
// 此时可确认视频已 // 此时可确认视频已
document.querySelector('#modal').style.display = "none" document.querySelector('#modal').style.display = "none"
document.querySelector('.image-panel').style.display = "flex"
document.querySelector('.statement').style.visibility = "visible" document.querySelector('.statement').style.visibility = "visible"
document.querySelector('.subtitle').style.visibility = "visible" document.querySelector('.subtitle').style.visibility = "visible"
}) })
@ -336,21 +463,27 @@
// }) // })
duix.on('speakSection', (data) => { duix.on('speakSection', (data) => {
console.info('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) => { duix.on('asrStop', (data) => {
console.info('asrStop', data) console.info('asrStop', data)
document.querySelector('.statement').innerText = data.content; // document.querySelector('.subtitle').innerText = ''
// document.querySelector('.statement').innerText = ''
}); });
duix.on('speakError', (data) => { duix.on('speakError', (data) => {
console.info('speakError', data) console.info('speakError', data)
}) })
duix.on('asrResult', async (data) => { duix.on('asrResult', async (data) => {
document.querySelector('.statement').innerText = '' // document.querySelector('.statement').innerText = ''
document.querySelector('.subtitle').innerText = '' // document.querySelector('.subtitle').innerText = ''
document.querySelector('.statement').innerText = data;
console.info('asrResult', data, trigger_status); console.info('asrResult', data, trigger_status);
if (data == "小公" || data == "小共" || data == "小工"){
if (data.includes("暂停说话") || data.includes("暂停播放")){
duix.break() duix.break()
trigger_status = true trigger_status = true
return return
@ -359,9 +492,11 @@
if (trigger_status) { if (trigger_status) {
try { try {
document.querySelector('.subtitle').innerText = ''
document.querySelector('.image-panel').style.display = 'flex'
// document.querySelector('.statement').innerText = ''
trigger_status = false; trigger_status = false;
let plu = document.getElementById('answer_type') let plu = document.getElementById('answer_type')
api_data = {} api_data = {}
if (plu.value=="jiguang"){ if (plu.value=="jiguang"){
@ -462,6 +597,9 @@
if(end_talk == data["content"]){ if(end_talk == data["content"]){
trigger_status = true trigger_status = true
document.querySelector('.image-panel').style.display = 'flex'
document.querySelector('.subtitle').innerText = ''
document.querySelector('.statement').innerText = ''
} }
}) })

BIN
yantu/erweima.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

1
yantu/out_quan.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

1
yantu/quanping.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
yantu/wenzi2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 177 KiB