|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
|
<title>open-avatar-chat</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; |
|
|
font-size: 14px; |
|
|
} |
|
|
.github-container img { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
margin-right: 8px; |
|
|
} |
|
|
.github-container a { |
|
|
text-decoration: none; |
|
|
color: #615CED; |
|
|
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: #615CED; |
|
|
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> |
|
|
<span style="margin-left: 12px;color: #615CED;">Powered by Tongyi |
|
|
</span> |
|
|
</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) { |
|
|
|
|
|
document.querySelectorAll('.split').forEach(el => { |
|
|
el.classList.remove('active'); |
|
|
|
|
|
el.querySelector('.iframe-container').innerHTML = ''; |
|
|
}); |
|
|
document.querySelectorAll('.title').forEach(el => el.classList.remove('active')); |
|
|
|
|
|
|
|
|
const targetContainer = document.getElementById(type); |
|
|
targetContainer.classList.add('active'); |
|
|
document.querySelector(`.title[onclick="switchContent('${type}')"]`).classList.add('active'); |
|
|
|
|
|
|
|
|
const iframeContainer = targetContainer.querySelector('.iframe-container'); |
|
|
iframeContainer.appendChild(createIframe(type)); |
|
|
} |
|
|
|
|
|
|
|
|
switchContent('lite'); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
