Spaces:

HumanAIGC-Engineering-Team
/

open-avatar-chat

Running

App Files Files Community

bboygun commited on 26 days ago

Commit

0dc5bd5

verified ·

1 Parent(s): 306aa23

switch avatar

Browse files

Files changed (1) hide show

index.html +106 -18

index.html CHANGED Viewed

@@ -3,14 +3,14 @@
   <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%; /* Ensure full height */
       }
       .github-container {
         position: absolute;
@@ -18,26 +18,72 @@
         left: 50%;
         transform: translateX(-50%);
         display: flex;
-        align-items: center; /* Vertically align content */
         background: white;
-        padding: 10px; /* Spacing inside container */
         border-radius: 6px;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
-        z-index: 1; /* Ensure it's above the iframe */
       }
       .github-container img {
         width: 24px;
         height: 24px;
-        margin-right: 8px; /* Spacing between icon and text */
       }
       .github-container a {
         text-decoration: none;
-        color: #0366d6; /* GitHub link color */
         font-size: 14px;
       }
       .github-container a:hover {
         text-decoration: underline;
       }
     </style>
   </head>
   <body>
@@ -47,17 +93,59 @@
         open-avatar-chat🔥
       </a>
     </div>
     <script>
-      (function () {
-        const iframe = document.createElement("iframe");
-        iframe.style.width = "100%";
-        iframe.style.height = "100vh";
-        iframe.style.border = "none";
-        iframe.allow = "microphone; camera";
-        iframe.src = "https://open-avatar.holoworld.com.cn:8282/";
-        iframe.sandbox = "allow-scripts allow-same-origin";
-        document.body.appendChild(iframe);
-      })();
     </script>
   </body>
 </html>

   <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;
         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>
         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>