File size: 4,224 Bytes
010695b 0dc5bd5 010695b 0dc5bd5 2bf8ed5 0dc5bd5 2bf8ed5 0dc5bd5 2bf8ed5 0dc5bd5 2bf8ed5 0dc5bd5 2bf8ed5 0dc5bd5 2bf8ed5 010695b 0dc5bd5 010695b 2bf8ed5 306aa23 2bf8ed5 0dc5bd5 010695b 0dc5bd5 010695b 2bf8ed5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>开放数字人对话</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
}
.github-container {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
background: white;
padding: 10px;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
}
.github-container img {
width: 24px;
height: 24px;
margin-right: 8px;
}
.github-container a {
text-decoration: none;
color: #0366d6;
font-size: 14px;
}
.github-container a:hover {
text-decoration: underline;
}
.titles-container {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 20px;
z-index: 2;
}
.title {
background: white;
padding: 8px 20px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
color: #333;
}
.title:hover {
background: #f0f0f0;
}
.title.active {
background: #5c3dcb;
color: white;
}
.container {
height: 100vh;
position: relative;
}
.split {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.split.active {
opacity: 1;
visibility: visible;
}
.iframe-container {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="github-container">
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" />
<a href="https://github.com/HumanAIGC-Engineering/OpenAvatarChat" target="_blank">
open-avatar-chat🔥
</a>
</div>
<div class="titles-container">
<div class="title active" onclick="switchContent('lite')">LiteAvatar</div>
<div class="title" onclick="switchContent('lam')">LAM</div>
</div>
<div class="container">
<div class="split active" id="lite">
<div class="iframe-container"></div>
</div>
<div class="split" id="lam">
<div class="iframe-container"></div>
</div>
</div>
<script>
const iframeSources = {
'lite': 'https://open-avatar.holoworld.com.cn:8282/',
'lam': 'https://open-avatar.holoworld.com.cn:50032/'
};
function createIframe(type) {
const iframe = document.createElement('iframe');
iframe.setAttribute('allow', 'microphone; camera');
iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 'none';
iframe.src = iframeSources[type];
return iframe;
}
function switchContent(type) {
// 移除所有active类
document.querySelectorAll('.split').forEach(el => {
el.classList.remove('active');
// 清空iframe容器
el.querySelector('.iframe-container').innerHTML = '';
});
document.querySelectorAll('.title').forEach(el => el.classList.remove('active'));
// 添加active类到选中的元素
const targetContainer = document.getElementById(type);
targetContainer.classList.add('active');
document.querySelector(`.title[onclick="switchContent('${type}')"]`).classList.add('active');
// 创建新的iframe
const iframeContainer = targetContainer.querySelector('.iframe-container');
iframeContainer.appendChild(createIframe(type));
}
// 初始化显示lite内容
switchContent('lite');
</script>
</body>
</html>
|