Update index.html

index.html

@@ -276,6 +276,38 @@
             background-color: var(--secondary-color);
             border-radius: 50%;
         }
+        /* 추가된 스타일 */
+        .header-controls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-top: 10px;
+            padding: 0 10px;
+        }
+        
+        .conversation-status {
+            font-size: 14px;
+            color: #aaa;
+            padding: 5px 10px;
+            border-radius: 8px;
+            background-color: rgba(0, 0, 0, 0.2);
+        }
+        
+        .status-box {
+            padding: 8px 12px;
+            background-color: var(--card-bg);
+            border-radius: 8px;
+            margin-top: 10px;
+            font-size: 14px;
+            border: 1px solid var(--border-color);
+            color: #aaa;
+        }
+        
+        .status-box.error {
+            background-color: rgba(244, 67, 54, 0.1);
+            border-color: rgba(244, 67, 54, 0.5);
+            color: #f44336;
+        }
     </style>
 </head>
 
@@ -296,6 +328,12 @@
                 <div id="status-dot" class="status-dot disconnected"></div>
                 <span id="status-text">연결 대기 중</span>
             </div>
+            <!-- 상태 표시 UI -->
+            <div class="header-controls">
+                <div class="conversation-status" id="conversation-status">
+                    대화를 시작하세요
+                </div>
+            </div>
         </div>
         <div class="chat-container">
             <div class="chat-messages" id="chat-messages"></div>
@@ -317,6 +355,8 @@
         let audioLevel = 0;
         let animationFrame;
         let audioContext, analyser, audioSource;
+        let dataArray;
+        let eventSource;
         
         function updateStatus(state) {
             statusDot.className = 'status-dot ' + state;
@@ -328,6 +368,7 @@
                 statusText.textContent = '연결 대기 중';
             }
         }
+        
         function updateButtonState() {
             const button = document.getElementById('start-button');
             if (peerConnection && (peerConnection.connectionState === 'connecting' || peerConnection.connectionState === 'new')) {
@@ -357,6 +398,7 @@
                 updateStatus('disconnected');
             }
         }
+        
         function setupAudioVisualization(stream) {
             audioContext = new (window.AudioContext || window.webkitAudioContext)();
             analyser = audioContext.createAnalyser();
@@ -364,7 +406,7 @@
             audioSource.connect(analyser);
             analyser.fftSize = 256;
             const bufferLength = analyser.frequencyBinCount;
-            const dataArray = new Uint8Array(bufferLength);
+            dataArray = new Uint8Array(bufferLength);
             
             const visualizerBars = document.querySelectorAll('.visualizer-bar');
             const barCount = visualizerBars.length;
@@ -389,11 +431,24 @@
                     visualizerBars[i].style.transform = `scaleY(${scaleY})`;
                 }
                 
+                // 음성 활동 감지를 위한 추가 코드
+                let totalSum = 0;
+                for (let i = 0; i < dataArray.length; i++) {
+                    totalSum += dataArray[i];
+                }
+                const totalAverage = totalSum / dataArray.length / 255;
+                
+                // 임계값 이상이면 사용자가 말하는 것으로 간주
+                if (totalAverage > 0.1) {
+                    handleUserSpeaking();
+                }
+                
                 animationFrame = requestAnimationFrame(updateAudioLevel);
             }
             
             updateAudioLevel();
         }
+        
         function showError(message) {
             const toast = document.getElementById('error-toast');
             toast.textContent = message;
@@ -404,6 +459,7 @@
                 toast.style.display = 'none';
             }, 5000);
         }
+        
         async function setupWebRTC() {
             const config = __RTC_CONFIGURATION__;
             peerConnection = new RTCPeerConnection(config);
@@ -417,6 +473,7 @@
                     toast.style.display = 'none';
                 }, 5000);
             }, 5000);
+            
             try {
                 const stream = await navigator.mediaDevices.getUserMedia({
                     audio: true
@@ -462,6 +519,7 @@
                     }
                     updateButtonState();
                 });
+                
                 webrtc_id = Math.random().toString(36).substring(7);
                 const response = await fetch('/webrtc/offer', {
                     method: 'POST',
@@ -472,6 +530,7 @@
                         webrtc_id: webrtc_id
                     })
                 });
+                
                 const serverResponse = await response.json();
                 if (serverResponse.status === 'failed') {
                     showError(serverResponse.meta.error === 'concurrency_limit_reached'
@@ -480,12 +539,42 @@
                     stop();
                     return;
                 }
+                
                 await peerConnection.setRemoteDescription(serverResponse);
-                const eventSource = new EventSource('/outputs?webrtc_id=' + webrtc_id);
+                
+                // 기존 EventSource 정리
+                if (eventSource) {
+                    eventSource.close();
+                }
+                
+                // 새 EventSource 생성
+                eventSource = new EventSource('/outputs?webrtc_id=' + webrtc_id);
+                
+                // 이벤트 리스너 설정
                 eventSource.addEventListener("output", (event) => {
                     const eventJson = JSON.parse(event.data);
                     addMessage("assistant", eventJson.content);
                 });
+                
+                eventSource.addEventListener("status", (event) => {
+                    const eventJson = JSON.parse(event.data);
+                    document.getElementById('conversation-status').textContent = eventJson.status;
+                });
+                
+                eventSource.addEventListener("error", (event) => {
+                    try {
+                        const eventJson = JSON.parse(event.data);
+                        showError(eventJson.message);
+                    } catch (e) {
+                        // EventSource의 기본 오류 이벤트일 수 있음
+                        if (eventSource.readyState === EventSource.CLOSED) {
+                            console.log("EventSource 연결이 닫혔습니다.");
+                        } else {
+                            console.error("EventSource 오류:", e);
+                        }
+                    }
+                });
+                
             } catch (err) {
                 clearTimeout(timeoutId);
                 console.error('Error setting up WebRTC:', err);
@@ -493,6 +582,7 @@
                 stop();
             }
         }
+        
         function addMessage(role, content) {
             const messageDiv = document.createElement('div');
             messageDiv.classList.add('message', role);
@@ -500,7 +590,13 @@
             chatMessages.appendChild(messageDiv);
             chatMessages.scrollTop = chatMessages.scrollHeight;
         }
+        
         function stop() {
+            if (eventSource) {
+                eventSource.close();
+                eventSource = null;
+            }
+            
             if (animationFrame) {
                 cancelAnimationFrame(animationFrame);
             }
@@ -529,6 +625,7 @@
             updateButtonState();
             audioLevel = 0;
         }
+        
         startButton.addEventListener('click', () => {
             console.log('clicked');
             console.log(peerConnection, peerConnection?.connectionState);
@@ -539,6 +636,19 @@
                 stop();
             }
         });
+        
+        // 인터럽션 처리 - 사용자가 말하기 시작할 때 AI 오디오 중단
+        let userSpeaking = false;
+        let speakingTimeout;
+        
+        function handleUserSpeaking() {
+            userSpeaking = true;
+            clearTimeout(speakingTimeout);
+            
+            speakingTimeout = setTimeout(() => {
+                userSpeaking = false;
+            }, 1000); // 1초 동안 오디오가 없으면 말하기 중단으로 간주
+        }
     </script>
 </body>