File size: 5,330 Bytes
010695b eca1400 010695b 0dc5bd5 2bf8ed5 0dc5bd5 2bf8ed5 0dc5bd5 2bf8ed5 0dc5bd5 eca1400 2bf8ed5 0dc5bd5 2bf8ed5 eca1400 2bf8ed5 010695b 0dc5bd5 eca1400 0dc5bd5 010695b 2bf8ed5 306aa23 2bf8ed5 eca1400 2bf8ed5 0dc5bd5 010695b 0dc5bd5 d0d3586 0dc5bd5 010695b 2bf8ed5 d0d3586 |
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 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 |
<!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';
// 获取真正的来源域名
let trueOrigin = window.location.origin;
try {
// 如果页面是通过iframe嵌入的，获取顶级窗口的域名
if (window.parent !== window) {
trueOrigin = window.parent.location.origin;
}
} catch (e) {
// 跨域访问会抛出异常，此时使用当前域名
console.log('Cannot access parent origin due to cross-origin restrictions');
}
// 将来源信息作为URL参数传递给Gradio服务
const url = new URL(iframeSources[type]);
url.searchParams.set('referer_origin', trueOrigin);
url.searchParams.set('embed_timestamp', Date.now().toString());
// 在控制台打印调试信息
console.log('Embedding Gradio service:', {
type: type,
referer_origin: trueOrigin,
full_url: url.toString(),
is_embedded: window.parent !== window
});
iframe.src = url.toString();
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>
|