first commit
This commit is contained in:
Song367
commit
3ebdf2931b
20132
duix/duix.js
Normal file
20132
duix/duix.js
Normal file
File diff suppressed because it is too large
Load Diff
379
simple.html
Normal file
379
simple.html
Normal file
@ -0,0 +1,379 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="expires" content="0" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximu-scale=1.0,user-scalable=no" />
|
||||
<title>Duix Sdk Simple Example</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary-100: #FF7F50;
|
||||
--primary-200: #dd6236;
|
||||
--primary-300: #8f1e00;
|
||||
--accent-100: #8B4513;
|
||||
--accent-200: #ffd299;
|
||||
--text-100: #000000;
|
||||
--text-200: #2c2c2c;
|
||||
--bg-100: #F7EEDD;
|
||||
--bg-200: #ede4d3;
|
||||
--bg-300: #c4bcab;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: var(--bg-100);
|
||||
}
|
||||
|
||||
.modal {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background: rgba(247, 238, 221, 0.95);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: transparent;
|
||||
padding: 20px;
|
||||
width: auto;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: var(--bg-200);
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item>span {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: var(--text-200);
|
||||
}
|
||||
|
||||
.input {
|
||||
background: var(--bg-100);
|
||||
height: 48px;
|
||||
border: 1px solid var(--accent-100);
|
||||
outline: none;
|
||||
border-radius: 8px;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
color: var(--text-200);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
border-color: var(--primary-100);
|
||||
box-shadow: 0 0 0 3px var(--accent-200);
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
height: 48px;
|
||||
background: var(--primary-100);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 8px rgba(0,0,0,0.15);
|
||||
background: var(--primary-200);
|
||||
}
|
||||
|
||||
.btn-config {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: var(--accent-100);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
.btn-config:hover {
|
||||
transform: rotate(90deg);
|
||||
background: var(--primary-200);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdn.bootcss.com/eruda/1.3.2/eruda.min.js"></script>
|
||||
<script>eruda.init()</script>
|
||||
<script src="./duix/duix.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 数字人容器 -->
|
||||
<div class="container"></div>
|
||||
|
||||
<div id="modal" class="modal">
|
||||
<div class="modal-content" style="text-align: center; padding: 20px; position: relative;">
|
||||
<button id="configBtn" class="btn-config" onclick="toggleConfig()">⚙️</button>
|
||||
<div id="configSection" style="display: none;">
|
||||
<!-- <div style="margin-bottom: 8px; width: 100%; text-align: left; color: var(--text-200);">签名密钥</div> -->
|
||||
<input class="input" style="display: none;" id="sign" placeholder="请输入您的签名密钥" value="" />
|
||||
<input class="input" style="display: none;" id="audio" placeholder="音色" value="" />
|
||||
<div style="margin-bottom: 8px; width: 100%; text-align: left; color: var(--text-200);">性别</div>
|
||||
<select class="input" id="gender" style="margin-bottom: 16px;">
|
||||
<option value="male" selected>男</option>
|
||||
<option value="female" >女</option>
|
||||
</select>
|
||||
<div style="margin-bottom: 8px; width: 100%; text-align: left; color: var(--text-200);">会话ID</div>
|
||||
<input class="input" id="conversationId" placeholder="请输入会话ID" value="1920410565458886658" title="请输入会话ID" />
|
||||
</div>
|
||||
<button id="start" onclick="init()" class="btn" style="width: 200px; margin: 20px auto 0;">
|
||||
<span>开始智能会话</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
const duix = new DUIX()
|
||||
|
||||
const sex = {
|
||||
"male": "1920410565458886658",
|
||||
"female": "1933000305591988225"
|
||||
}
|
||||
let conversationL = ""
|
||||
const sex_audio = {
|
||||
"male": "gongzheng-v2",
|
||||
"female": "presenter_female"
|
||||
}
|
||||
const audio = document.getElementById('audio')
|
||||
// Add event listener for gender selection
|
||||
document.getElementById('gender').addEventListener('change', function(e) {
|
||||
const selectedGender = e.target.value;
|
||||
const conversationIdInput = document.getElementById('conversationId');
|
||||
|
||||
conversationIdInput.value = sex[selectedGender];
|
||||
audio.value = sex_audio[selectedGender]
|
||||
});
|
||||
|
||||
// Set initial conversation ID based on default gender
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const genderSelect = document.getElementById('gender');
|
||||
const conversationIdInput = document.getElementById('conversationId');
|
||||
conversationIdInput.value = sex[genderSelect.value];
|
||||
audio.value = sex_audio[genderSelect.value]
|
||||
});
|
||||
|
||||
async function getToken() {
|
||||
try {
|
||||
const response = await fetch('http://192.168.2.183:8080/token', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
}
|
||||
});
|
||||
const data = await response.json();
|
||||
return data.token;
|
||||
} catch (error) {
|
||||
console.error('Error getting token:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
function toggleConfig() {
|
||||
const configSection = document.getElementById('configSection');
|
||||
if (configSection.style.display === 'none') {
|
||||
configSection.style.display = 'block';
|
||||
} else {
|
||||
configSection.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
async function init() {
|
||||
let sign = document.querySelector('#sign').value;
|
||||
const conversationId = document.querySelector('#conversationId').value;
|
||||
|
||||
if (!sign) {
|
||||
try {
|
||||
sign = await getToken();
|
||||
document.querySelector('#sign').value = sign;
|
||||
} catch (error) {
|
||||
alert('获取token失败，请重试');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (!conversationId) {
|
||||
return alert('会话ID不能为空');
|
||||
}
|
||||
|
||||
duix.on('error', data => {
|
||||
console.error(data)
|
||||
})
|
||||
duix.on('intialSucccess', () => {
|
||||
console.info('intialSucccess')
|
||||
// 此时初始化成功，可调用start
|
||||
duix.start({ conversationId, openAsr: true, useActSection: true }).then(res => {
|
||||
console.info('start', res)
|
||||
})
|
||||
})
|
||||
duix.on('bye', (data) => {
|
||||
console.info('bye', data)
|
||||
})
|
||||
|
||||
duix.on('progress', progress => {
|
||||
console.info('progress', progress)
|
||||
})
|
||||
duix.on('show', () => {
|
||||
console.info('show')
|
||||
// 此时可确认视频已
|
||||
document.querySelector('#modal').style.display = "none"
|
||||
})
|
||||
duix.on('openAsrSuccess', () => {
|
||||
console.info('openAsrSuccess')
|
||||
})
|
||||
duix.on('asrClose', () => {
|
||||
console.info('asrClose')
|
||||
})
|
||||
// duix.on('speakStart', (data) => {
|
||||
// console.info('speakStart', data)
|
||||
// })
|
||||
// duix.on('speakEnd', (data) => {
|
||||
// console.info('speakEnd', data)
|
||||
// })
|
||||
duix.on('speakSection', (data) => {
|
||||
console.info('speakSection', data)
|
||||
})
|
||||
duix.on('speakError', (data) => {
|
||||
console.info('speakError', data)
|
||||
})
|
||||
duix.on('asrResult', async (data) => {
|
||||
console.info('asrResult', data);
|
||||
duix.break()
|
||||
// if (data == "你好") {
|
||||
try {
|
||||
const response = await fetch('http://192.168.2.183:8080/chat', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
query: data,
|
||||
response_mode: 'streaming',
|
||||
user: 'SYS002',
|
||||
conversation_id: conversationL,
|
||||
audio: audio.value
|
||||
})
|
||||
});
|
||||
|
||||
const reader = response.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let fullAnswer = '';
|
||||
let triggered = false;
|
||||
|
||||
while (true) {
|
||||
const { value, done } = await reader.read();
|
||||
if (done) break;
|
||||
|
||||
const chunk = decoder.decode(value);
|
||||
const lines = chunk.split('\n');
|
||||
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('data:')) {
|
||||
const responseData = JSON.parse(line.slice(5).trim());
|
||||
|
||||
|
||||
if (responseData.audio_data) {
|
||||
conversationL = responseData.conversation_id
|
||||
duix.speak({
|
||||
content: responseData.answer,
|
||||
audio: responseData.audio_data
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Handle end of stream
|
||||
if (responseData.isEnd) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error in chat API:', error);
|
||||
}
|
||||
// }
|
||||
|
||||
// test = [
|
||||
// 'https://p3-bot-sign.byteimg.com/tos-cn-i-v4nquku3lp/0f1be92489b849f3b7568e9b17334e42.wav~tplv-v4nquku3lp-image.image?rk3s=68e6b6b5&x-expires=1752754758&x-signature=rXa5LFcZttKGZpHMVIP6SgZTsRI%3D','https://p6-bot-sign.byteimg.com/tos-cn-i-v4nquku3lp/9898244b02be4765a964cf4b3d4afcd0.wav~tplv-v4nquku3lp-image.image?rk3s=68e6b6b5&x-expires=1752754726&x-signature=%2BbIrCv%2B5yAUxZvNqBURCnSRVqWo%3D','https://p9-bot-sign.byteimg.com/tos-cn-i-v4nquku3lp/4bffded0446648a2aef1d2d7e59ddd0c.wav~tplv-v4nquku3lp-image.image?rk3s=68e6b6b5&x-expires=1752754642&x-signature=E5Dr2R%2Fhd%2Ft7K593ka393OlCPNg%3D']
|
||||
// for (let index = 0; index < test.length; index++) {
|
||||
// const element = test[index];
|
||||
// duix.speak({content: "我会尽量帮助您", audio: element})
|
||||
|
||||
// }
|
||||
});
|
||||
|
||||
duix.on('report', data => {
|
||||
// console.info('report', data)
|
||||
})
|
||||
duix.on('speakEnd', async(data) => {
|
||||
console.info('公证speakEnd: ', data)
|
||||
|
||||
})
|
||||
duix.init({
|
||||
sign,
|
||||
containerLable: '.container'
|
||||
}).then(data => {
|
||||
console.info('init', data)
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener('beforeunload', function(event) {
|
||||
if (duix) {
|
||||
duix.destroy()
|
||||
duix.stop()
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user