demo-2

.gitea/workflows/deploy.yaml

@@ -3,7 +3,7 @@ run-name: ${{ gitea.actor }} is testing out Gitea Actions 🚀
 on:
   push:
     branches:
-      - 'demo-t*'
+      - 'female-dt-2'
 
 env:
   BUILD: staging
@@ -30,15 +30,15 @@ jobs:
         uses: https://gitea.yantootech.com/neil/build-push-action@v6
         with:
           push: false
-          tags: emotion-digital-video:${{ gitea.run_id }}
+          tags: emotion-female-digital-video:${{ gitea.run_id }}
       - name: Run docker
         run: |
           pwd
-          if [ "$(docker ps -q -f name=^emotion-digital-video$)" ]; then
+          if [ "$(docker ps -q -f name=^emotion-female-digital-video$)" ]; then
-            docker stop emotion-digital-video
+            docker stop emotion-female-digital-video
           fi
-          docker run -d --rm --name emotion-digital-video \
+          docker run -d --rm --name emotion-female-digital-video \
             -v /usr/share/fonts/opentype/noto:/usr/share/fonts \
-            -p 6900:3000 \
+            -p 6901:3000 \
-            emotion-digital-video:${{ gitea.run_id }}
+            emotion-female-digital-video:${{ gitea.run_id }}
       - run: echo "🍏 This job's status is ${{ job.status }}."

server.js

@@ -91,24 +91,24 @@ let currentSceneIndex = 0;
 const scenes = [
   {
     name: '起床',
-    defaultVideo: '8-4-bd-2.mp4',
+    defaultVideo: '8-5-qc-bd-female.mp4',
-    interactionVideo: '8-4-sh.mp4',
+    interactionVideo: '8-5-qc-sh-female.mp4',
     tag: 'wakeup',
-    apiKey: 'bot-20250724150616-xqpz8' // 起床场景的API key
+    apiKey: 'bot-20250730213756-l627w' // 起床场景的API key
   },
   {
-    name: '开车',
+    name: '走路',
-    defaultVideo: '8-5-kc-bd.mp4',
+    defaultVideo: '8-5-sb-bd-female.mp4',
-    interactionVideo: '8-5-kc-sh.mp4',
+    interactionVideo: '8-5-sb-sh-female.mp4',
     tag: 'driving',
-    apiKey: 'bot-20250623140339-r8f8b' // 开车场景的API key
+    apiKey: 'bot-20250703161810-sgkrh' // 开车场景的API key
   },
   {
     name: '喝茶',
-    defaultVideo: '8-4-hc-bd.mp4',
+    defaultVideo: '8-5-hc-bd-female.mp4',
-    interactionVideo: '8-4-hc-sh.mp4',
+    interactionVideo: '8-5-hc-sh-female.mp4',
     tag: 'tea',
-    apiKey: 'bot-20250804180724-4dgtk' // 喝茶场景的API key
+    apiKey: 'bot-20250805140055-ccdr6' // 喝茶场景的API key
   }
 ];
 

src/config.js

@@ -3,7 +3,7 @@ export const config = {
   // LLM API配置
   llm: {
     apiKey: 'd012651b-a65b-4b13-8ff3-cc4ff3a29783', // 请替换为实际的API密钥
-    model: 'bot-20250724150616-xqpz8',
+    model: 'bot-20250730213756-l627w',
   },
   
   // Minimaxi API配置
@@ -16,7 +16,7 @@ export const config = {
   audio: {
     model: 'speech-02-hd',
     voiceSetting: {
-      voice_id: 'yantu-qinggang-demo2-male-4',
+      voice_id: 'yantu-qinggang-3',
       speed: 1,
       vol: 1,
       pitch: 0,

src/index.html

@@ -333,6 +333,77 @@
             opacity: 0.5;
             cursor: not-allowed;
         }
+
+        /* 头像样式 - 确保显示 */
+        .avatar-container {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 15; /* 提高z-index确保在视频上方 */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            transition: opacity 0.3s ease;
+            opacity: 1; /* 确保默认显示 */
+        }
+
+        .avatar-container.hidden {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .avatar {
+            width: 120px;
+            height: 120px;
+            border-radius: 50%;
+            border: 4px solid rgba(255, 255, 255, 0.8);
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 48px;
+            font-weight: bold;
+            overflow: hidden; /* 确保图片不会溢出 */
+        }
+
+        .avatar img {
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            object-fit: cover;
+            display: block; /* 确保图片显示 */
+        }
+
+        /* 确保视频默认隐藏 */
+        #recordedVideo, #recordedVideoBuffer {
+            position: absolute;
+            width: 56.25vh;
+            height: 100vh;
+            object-fit: cover;
+            border-radius: 0;
+            box-shadow: none;
+            transition: opacity 0.5s ease-in-out;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            opacity: 0; /* 默认隐藏视频 */
+            z-index: 1; /* 确保在头像下方 */
+        }
+
+        /* 通话时隐藏头像，显示视频 */
+        .video-container.calling .avatar-container {
+            opacity: 0;
+            pointer-events: none;
+        }
+
+        .video-container.calling #recordedVideo {
+            opacity: 1;
+            z-index: 10;
+        }
     </style>
 </head>
 <body>
@@ -353,7 +424,16 @@
 
             <!-- 录制视频播放区域 - 全屏显示 -->
             <div class="recorded-video-section">
-                <div class="video-container">
+                <div class="video-container" id="videoContainer">
+                    <!-- 头像容器 -->
+                    <div class="avatar-container" id="avatarContainer">
+                        <div class="avatar" id="avatar">
+                            <!-- 使用相对路径引用图片 -->
+                            <img src="./tx.png" alt="头像" onerror="this.style.display='none'; this.parentElement.innerHTML='AI';">
+                        </div>
+                        <div class="avatar-name">AI助手</div>
+                    </div>
+                    
                     <!-- 主视频元素 -->
                     <video id="recordedVideo" autoplay muted>
                         <source src="" type="video/mp4">

src/index.js

@@ -111,6 +111,17 @@ class WebRTCChat {
         this.messageLog = document.getElementById('messageLog');
         this.currentVideoName = document.getElementById('currentVideoName');
         this.videoList = document.getElementById('videoList');
+
+        // 确保头像容器初始显示
+        const avatarContainer = document.getElementById('avatarContainer');
+        const videoContainer = document.getElementById('videoContainer');
+        
+        if (avatarContainer && videoContainer) {
+            // 确保初始状态下显示头像
+            videoContainer.classList.remove('calling');
+            avatarContainer.style.display = 'flex';
+            avatarContainer.style.opacity = '1';
+        }
     }
 
     initializeSocket() {
@@ -817,6 +828,19 @@ class WebRTCChat {
         try {
             // 切换到通话中图标
             this.switchToCallingIcon();
+            const videoContainer = document.getElementById('videoContainer');
+            const avatarContainer = document.getElementById('avatarContainer');
+            
+            // 添加通话状态类，隐藏头像显示视频
+            videoContainer.classList.add('calling');
+            
+            // 可选：添加淡出动画
+            if (avatarContainer) {
+                avatarContainer.style.opacity = '0';
+                setTimeout(() => {
+                    avatarContainer.style.display = 'none';
+                }, 300);
+            }
             
             // 添加更详细的错误处理
             console.log('开始请求麦克风权限...');
@@ -861,6 +885,19 @@ class WebRTCChat {
     stopCall() {
         // 恢复到默认图标
         this.switchToDefaultIcon();
+        const videoContainer = document.getElementById('videoContainer');
+        const avatarContainer = document.getElementById('avatarContainer');
+        
+        // 移除通话状态类，显示头像隐藏视频
+        videoContainer.classList.remove('calling');
+        
+        // 可选：添加淡入动画
+        if (avatarContainer) {
+            avatarContainer.style.display = 'flex';
+            setTimeout(() => {
+                avatarContainer.style.opacity = '1';
+            }, 100);
+        }
         
         // 隐藏结束通话按钮
         this.stopButton.style.display = 'none';