File size: 5,822 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 0c153fc d0d3586 0c153fc d0d3586 0c153fc d0d3586 0c153fc d0d3586 0c153fc 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 179 180 181 182 183 184 185 186 187 188 |
<!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;
let referrer = document.referrer || '';
// 如果页面是通过iframe嵌入的，尝试获取顶级窗口的来源
// 由于跨域限制，我们无法直接访问顶级窗口的location
// 但可以通过document.referrer获取来源页面
if (window.parent !== window && referrer) {
try {
const referrerUrl = new URL(referrer);
trueOrigin = referrerUrl.origin;
} catch (e) {
console.log('Cannot parse referrer URL:', referrer);
}
} else if (window.parent !== window) {
// 如果referrer为空但确实被嵌入，尝试使用当前页面origin
trueOrigin = window.location.origin;
}
// 将来源信息作为URL参数传递给Gradio服务
const url = new URL(iframeSources[type]);
url.searchParams.set('referer_origin', trueOrigin);
url.searchParams.set('referrer_url', referrer);
url.searchParams.set('embed_timestamp', Date.now().toString());
// 在控制台打印调试信息
console.log('Embedding Gradio service:', {
type: type,
referer_origin: trueOrigin,
referrer_url: referrer,
current_origin: window.location.origin,
is_embedded: window.parent !== window,
full_url: url.toString()
});
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>
|