Hugging Face's logo

Spaces:
HumanAIGC-Engineering-Team
/
open-avatar-chat
Running

App Files Community
2
bboygun commited on
Commit
0dc5bd5
·
verified ·
1 Parent(s): 306aa23

switch avatar

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