Update app.py

app.py

@@ -1,327 +1,408 @@
-import gradio as gr
-import openai
-from openai import OpenAI
-import numpy as np
-import threading
-import queue
-import time
-import json
-import websocket
-import base64
-import pyaudio
-import wave
-import io
-from typing import Generator, Tuple
-import asyncio
-import edge_tts
-
-# OpenAI API 키 설정
-OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
-client = OpenAI(api_key=OPENAI_API_KEY)
-
-class RealtimeTranslator:
-    def __init__(self):
-        self.is_recording = False
-        self.audio_queue = queue.Queue()
-        self.text_queue = queue.Queue()
-        self.translation_queue = queue.Queue()
-        self.current_text = ""
-        self.detected_language = None
-        
-    def detect_language(self, text: str) -> str:
-        """텍스트의 언어를 감지합니다."""
-        korean_chars = sum(1 for char in text if ord('가') <= ord(char) <= ord('힣'))
-        total_chars = len(text.replace(" ", ""))
-        
-        if total_chars > 0:
-            korean_ratio = korean_chars / total_chars
-            if korean_ratio > 0.3:
-                return "ko"
-        return "en"
-    
-    def process_audio_chunk(self, audio_chunk):
-        """오디오 청크를 처리하여 텍스트로 변환"""
-        try:
-            # 오디오 청크를 임시 파일로 저장
-            import tempfile
-            with tempfile.NamedTemporaryFile(suffix=".wav", delete=False) as tmp_file:
-                # WAV 파일로 저장
-                import wave
-                with wave.open(tmp_file.name, 'wb') as wav_file:
-                    wav_file.setnchannels(1)
-                    wav_file.setsampwidth(2)
-                    wav_file.setframerate(16000)
-                    wav_file.writeframes(audio_chunk)
-                
-                # Whisper API 호출
-                with open(tmp_file.name, "rb") as audio_file:
-                    transcript = client.audio.transcriptions.create(
-                        model="whisper-1",
-                        file=audio_file,
-                        language=None,
-                        prompt="실시간 대화를 번역합니다."
-                    )
-                
-                return transcript.text
-                
-        except Exception as e:
-            print(f"음성 인식 오류: {e}")
-            return ""
-    
-    def translate_stream(self, text: str, source_lang: str) -> str:
-        """텍스트를 실시간으로 번역"""
-        try:
-            if not text or text.strip() == "":
-                return ""
-            
-            # 번역 프롬프트
-            if source_lang == "ko":
-                messages = [
-                    {"role": "system", "content": "실시간 통역사입니다. 한국어를 영어로 즉시 번역합니다."},
-                    {"role": "user", "content": text}
-                ]
-            else:
-                messages = [
-                    {"role": "system", "content": "실시간 통역사입니다. 영어를 한국어로 즉시 번역합니다."},
-                    {"role": "user", "content": text}
-                ]
-            
-            # 스트리밍 응답
-            stream = client.chat.completions.create(
-                model="gpt-4o-mini",
-                messages=messages,
-                stream=True,
-                temperature=0.3,
-                max_tokens=150
-            )
-            
-            translated = ""
-            for chunk in stream:
-                if chunk.choices[0].delta.content:
-                    translated += chunk.choices[0].delta.content
-            
-            return translated
-            
-        except Exception as e:
-            print(f"번역 오류: {e}")
-            return ""
+import React, { useState, useRef, useEffect } from 'react';
+import { Mic, MicOff, Volume2, Globe, Loader2 } from 'lucide-react';
 
-translator = RealtimeTranslator()
+const RealtimeVoiceTranslator = () => {
+  const [isConnected, setIsConnected] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [transcript, setTranscript] = useState('');
+  const [translation, setTranslation] = useState('');
+  const [sourceLanguage, setSourceLanguage] = useState('ko');
+  const [targetLanguage, setTargetLanguage] = useState('en');
+  const [ephemeralKey, setEphemeralKey] = useState('');
+  const [logs, setLogs] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
 
-def process_stream(audio_stream):
-    """오디오 스트림을 실시간으로 처리"""
-    if audio_stream is None:
-        yield "🔴 마이크를 켜고 말씀해주세요", "", ""
-        return
-    
-    sample_rate, audio_data = audio_stream
-    
-    # 오디오 데이터가 너무 짧으면 무시
-    if len(audio_data) < sample_rate * 0.5:  # 0.5초 미만
-        yield "🎤 듣고 있습니다...", "", ""
-        return
-    
-    # 오디오 청크 처리
-    audio_bytes = audio_data.tobytes()
-    
-    # 음성을 텍스트로 변환
-    text = translator.process_audio_chunk(audio_bytes)
-    
-    if text:
-        # 언어 감지
-        detected_lang = translator.detect_language(text)
-        
-        # 실시간 번역
-        translated = translator.translate_stream(text, detected_lang)
-        
-        # 결과 반환
-        if detected_lang == "ko":
-            yield f"✅ 한국어 감지", text, translated
-        else:
-            yield f"✅ English detected", translated, text
-
-def create_realtime_interface():
-    with gr.Blocks(title="실시간 음성 번역기", theme=gr.themes.Soft()) as demo:
-        gr.Markdown(
-            """
-            # 🎤 실시간 음성 번역기 (Real-time Voice Translator)
-            
-            ### 말하는 동안 실시간으로 번역됩니다!
-            
-            🔴 **시작** 버튼을 누르고 말하면, 실시간으로 번역이 표시됩니다.
-            
-            ---
-            """
-        )
-        
-        with gr.Row():
-            with gr.Column(scale=2):
-                audio_input = gr.Audio(
-                    source="microphone",
-                    type="numpy",
-                    streaming=True,  # 스트리밍 모드 활성화
-                    label="🎤 실시간 마이크 입력",
-                    elem_id="audio-stream"
-                )
-            
-            with gr.Column(scale=1):
-                status_text = gr.Textbox(
-                    label="📊 상태",
-                    value="🔴 마이크를 켜고 말씀해주세요",
-                    interactive=False
-                )
-        
-        with gr.Row():
-            with gr.Column():
-                korean_output = gr.Textbox(
-                    label="🇰🇷 한국어",
-                    placeholder="한국어가 실시간으로 표시됩니다",
-                    lines=8,
-                    interactive=False,
-                    elem_id="korean-text"
-                )
-            
-            with gr.Column():
-                english_output = gr.Textbox(
-                    label="🇺🇸 English",
-                    placeholder="English translation appears here in real-time",
-                    lines=8,
-                    interactive=False,
-                    elem_id="english-text"
-                )
-        
-        # 스트리밍 이벤트 설정
-        audio_input.stream(
-            fn=process_stream,
-            inputs=[audio_input],
-            outputs=[status_text, korean_output, english_output],
-            show_progress=False
-        )
-        
-        gr.Markdown(
-            """
-            ---
-            
-            ### 💡 사용 팁:
-            - 명확하게 말할수록 인식률이 높아집니다
-            - 문장이 끝날 때까지 잠시 멈추면 더 정확한 번역이 됩니다
-            - 한국어와 영어를 자동으로 감지합니다
-            
-            ### ⚙️ 기술 사양:
-            - **음성 인식**: OpenAI Whisper (실시간 스트리밍)
-            - **번역**: GPT-4 (스트리밍 모드)
-            - **지연 시간**: ~1-2초
-            """
-        )
+  const pcRef = useRef(null);
+  const dcRef = useRef(null);
+  const audioElRef = useRef(null);
+
+  // 로그 추가 함수
+  const addLog = (message, type = 'info') => {
+    const timestamp = new Date().toLocaleTimeString();
+    setLogs(prev => [...prev, { message, type, timestamp }]);
+  };
+
+  // Ephemeral key 가져오기 (시뮬레이션)
+  const getEphemeralKey = async () => {
+    // 실제 구현에서는 서버에서 ephemeral key를 가져와야 합니다
+    addLog('Ephemeral key가 필요합니다. 서버 엔드포인트를 구현해주세요.', 'warning');
+    return 'YOUR_EPHEMERAL_KEY';
+  };
+
+  // WebRTC 연결 초기화
+  const initializeConnection = async () => {
+    try {
+      setIsLoading(true);
+      addLog('연결 초기화 중...', 'info');
+
+      // Ephemeral key 가져오기
+      const key = await getEphemeralKey();
+      setEphemeralKey(key);
+
+      // Peer connection 생성
+      const pc = new RTCPeerConnection({
+        iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
+      });
+      pcRef.current = pc;
+
+      // 원격 오디오 스트림 설정
+      const audioEl = audioElRef.current;
+      pc.ontrack = (e) => {
+        audioEl.srcObject = e.streams[0];
+        addLog('오디오 스트림 연결됨', 'success');
+      };
+
+      // 로컬 오디오 트랙 추가
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      stream.getTracks().forEach(track => {
+        pc.addTrack(track, stream);
+      });
+
+      // 데이터 채널 설정
+      const dc = pc.createDataChannel('oai-events');
+      dcRef.current = dc;
+
+      dc.addEventListener('open', () => {
+        addLog('데이터 채널 열림', 'success');
+        setIsConnected(true);
         
-        # CSS 스타일 추가
-        demo.css = """
-        #audio-stream {
-            height: 150px !important;
-        }
-        #korean-text, #english-text {
-            font-size: 18px !important;
-            line-height: 1.5 !important;
-        }
-        .gradio-container {
-            max-width: 1200px !important;
+        // 세션 설정
+        const sessionConfig = {
+          type: 'session.update',
+          session: {
+            modalities: ['text', 'audio'],
+            instructions: `You are a helpful translator. Translate between ${sourceLanguage === 'ko' ? 'Korean' : 'English'} and ${targetLanguage === 'ko' ? 'Korean' : 'English'}.`,
+            voice: 'alloy',
+            input_audio_format: 'pcm16',
+            output_audio_format: 'pcm16',
+            input_audio_transcription: {
+              model: 'whisper-1'
+            },
+            turn_detection: {
+              type: 'server_vad',
+              threshold: 0.5,
+              prefix_padding_ms: 300,
+              silence_duration_ms: 500
+            }
+          }
+        };
+        dc.send(JSON.stringify(sessionConfig));
+      });
+
+      dc.addEventListener('message', (e) => {
+        const event = JSON.parse(e.data);
+        handleRealtimeEvent(event);
+      });
+
+      dc.addEventListener('error', (error) => {
+        addLog(`데이터 채널 오류: ${error}`, 'error');
+      });
+
+      // SDP 오퍼 생성 및 연결
+      const offer = await pc.createOffer();
+      await pc.setLocalDescription(offer);
+
+      // API 연결 (실제 구현 시 사용)
+      /*
+      const baseUrl = 'https://api.openai.com/v1/realtime';
+      const model = 'gpt-4o-realtime-preview-2025-06-03';
+      const response = await fetch(`${baseUrl}?model=${model}`, {
+        method: 'POST',
+        body: offer.sdp,
+        headers: {
+          'Authorization': `Bearer ${key}`,
+          'Content-Type': 'application/sdp'
         }
-        """
-    
-    return demo
-
-# 대안: WebSocket 기반 실시간 번역 (더 낮은 지연시간)
-class WebSocketTranslator:
-    def __init__(self):
-        self.ws_url = "wss://api.openai.com/v1/realtime"  # 예시 URL
-        self.ws = None
-        self.is_connected = False
-        
-    def connect(self):
-        """WebSocket 연결"""
-        headers = {
-            "Authorization": f"Bearer {OPENAI_API_KEY}",
-            "OpenAI-Beta": "realtime=v1"
+      });
+
+      const answerSdp = await response.text();
+      const answer = {
+        type: 'answer',
+        sdp: answerSdp
+      };
+      await pc.setRemoteDescription(answer);
+      */
+
+      addLog('WebRTC 연결 시뮬레이션 완료', 'warning');
+      setIsConnected(true);
+      setIsLoading(false);
+
+    } catch (error) {
+      addLog(`연결 오류: ${error.message}`, 'error');
+      setIsLoading(false);
+    }
+  };
+
+  // Realtime 이벤트 처리
+  const handleRealtimeEvent = (event) => {
+    switch (event.type) {
+      case 'conversation.item.created':
+        if (event.item.role === 'user') {
+          setTranscript(event.item.content?.[0]?.transcript || '');
+          addLog(`사용자: ${event.item.content?.[0]?.transcript}`, 'info');
         }
-        
-        try:
-            self.ws = websocket.WebSocketApp(
-                self.ws_url,
-                header=headers,
-                on_open=self.on_open,
-                on_message=self.on_message,
-                on_error=self.on_error,
-                on_close=self.on_close
-            )
-            
-            # 별도 스레드에서 실행
-            wst = threading.Thread(target=self.ws.run_forever)
-            wst.daemon = True
-            wst.start()
-            
-        except Exception as e:
-            print(f"WebSocket 연결 오류: {e}")
-    
-    def on_open(self, ws):
-        self.is_connected = True
-        print("WebSocket 연결됨")
-        
-    def on_message(self, ws, message):
-        """메시지 수신 처리"""
-        try:
-            data = json.loads(message)
-            if data.get("type") == "transcription":
-                # 실시간 텍스트 처리
-                text = data.get("text", "")
-                self.process_realtime_text(text)
-        except Exception as e:
-            print(f"메시지 처리 오류: {e}")
+        break;
+      
+      case 'conversation.item.input_audio_transcription.completed':
+        setTranscript(event.transcript);
+        addLog(`전사 완료: ${event.transcript}`, 'info');
+        // 번역 요청
+        requestTranslation(event.transcript);
+        break;
+      
+      case 'response.audio_transcript.delta':
+        setTranslation(prev => prev + event.delta);
+        break;
+      
+      case 'response.audio_transcript.done':
+        addLog(`번역 완료: ${translation}`, 'success');
+        break;
+      
+      case 'error':
+        addLog(`오류: ${event.error.message}`, 'error');
+        break;
+      
+      default:
+        console.log('Unhandled event:', event);
+    }
+  };
+
+  // 번역 요청
+  const requestTranslation = (text) => {
+    if (!dcRef.current || dcRef.current.readyState !== 'open') return;
+
+    const message = {
+      type: 'conversation.item.create',
+      item: {
+        type: 'message',
+        role: 'user',
+        content: [{
+          type: 'input_text',
+          text: `Translate this to ${targetLanguage === 'ko' ? 'Korean' : 'English'}: "${text}"`
+        }]
+      }
+    };
+
+    dcRef.current.send(JSON.stringify(message));
     
-    def on_error(self, ws, error):
-        print(f"WebSocket 오류: {error}")
-        
-    def on_close(self, ws, close_status_code, close_msg):
-        self.is_connected = False
-        print("WebSocket 연결 종료")
+    // 응답 생성 요청
+    dcRef.current.send(JSON.stringify({ type: 'response.create' }));
+  };
+
+  // 녹음 시작/중지
+  const toggleRecording = () => {
+    if (!isConnected) {
+      addLog('먼저 연결을 시작해주세요', 'warning');
+      return;
+    }
+
+    setIsRecording(!isRecording);
     
-    def send_audio(self, audio_data):
-        """오디오 데이터 전송"""
-        if self.is_connected and self.ws:
-            # 오디오를 base64로 인코딩
-            audio_base64 = base64.b64encode(audio_data).decode('utf-8')
+    if (!isRecording) {
+      addLog('녹음 시작', 'info');
+      // 음성 입력 시작을 위한 이벤트 전송
+      if (dcRef.current && dcRef.current.readyState === 'open') {
+        dcRef.current.send(JSON.stringify({
+          type: 'input_audio_buffer.commit'
+        }));
+      }
+    } else {
+      addLog('녹음 중지', 'info');
+    }
+  };
+
+  // 언어 전환
+  const swapLanguages = () => {
+    setSourceLanguage(targetLanguage);
+    setTargetLanguage(sourceLanguage);
+    addLog(`언어 전환: ${targetLanguage} → ${sourceLanguage}`, 'info');
+  };
+
+  // 연결 종료
+  const disconnect = () => {
+    if (pcRef.current) {
+      pcRef.current.close();
+      pcRef.current = null;
+    }
+    setIsConnected(false);
+    setIsRecording(false);
+    addLog('연결 종료됨', 'info');
+  };
+
+  // 컴포넌트 언마운트 시 정리
+  useEffect(() => {
+    return () => {
+      if (pcRef.current) {
+        pcRef.current.close();
+      }
+    };
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-gray-50 p-4">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold text-center mb-8 text-gray-800">
+          실시간 음성 번역기
+        </h1>
+
+        {/* 연결 상태 */}
+        <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold">연결 상태</h2>
+            <div className="flex items-center gap-2">
+              <div className={`w-3 h-3 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
+              <span className="text-sm">{isConnected ? '연결됨' : '연결 안됨'}</span>
+            </div>
+          </div>
+          
+          <div className="flex gap-4">
+            {!isConnected ? (
+              <button
+                onClick={initializeConnection}
+                disabled={isLoading}
+                className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-gray-400"
+              >
+                {isLoading ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    연결 중...
+                  </>
+                ) : (
+                  '연결 시작'
+                )}
+              </button>
+            ) : (
+              <button
+                onClick={disconnect}
+                className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600"
+              >
+                연결 종료
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* 언어 선택 */}
+        <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+          <div className="flex items-center justify-between gap-4">
+            <div className="flex-1">
+              <label className="block text-sm font-medium mb-2">입력 언어</label>
+              <select
+                value={sourceLanguage}
+                onChange={(e) => setSourceLanguage(e.target.value)}
+                className="w-full p-2 border rounded-lg"
+              >
+                <option value="ko">한국어</option>
+                <option value="en">영어</option>
+              </select>
+            </div>
             
-            message = {
-                "type": "audio",
-                "audio": audio_base64
-            }
+            <button
+              onClick={swapLanguages}
+              className="mt-6 p-2 hover:bg-gray-100 rounded-lg"
+            >
+              <Globe className="w-6 h-6" />
+            </button>
             
-            self.ws.send(json.dumps(message))
-    
-    def process_realtime_text(self, text):
-        """실시간 텍스트 처리 및 번역"""
-        # 언어 감지 및 번역 로직
-        pass
-
-# 메인 실행
-if __name__ == "__main__":
-    import os
-    
-    # API 키 확인
-    if OPENAI_API_KEY == "your-api-key-here":
-        api_key = os.getenv("OPENAI_API_KEY")
-        if api_key:
-            OPENAI_API_KEY = api_key
-            client = OpenAI(api_key=OPENAI_API_KEY)
-        else:
-            print("⚠️  경고: OpenAI API 키를 설정해주세요!")
-            print("환경 변수 OPENAI_API_KEY를 설정하거나 코드에 직접 입력하세요.")
-    
-    # Gradio 앱 실행
-    demo = create_realtime_interface()
-    demo.queue()  # 큐 활성화 (스트리밍에 필요)
-    demo.launch(
-        share=False,
-        server_name="0.0.0.0",
-        server_port=7860,
-        debug=True
-    )
+            <div className="flex-1">
+              <label className="block text-sm font-medium mb-2">출력 언어</label>
+              <select
+                value={targetLanguage}
+                onChange={(e) => setTargetLanguage(e.target.value)}
+                className="w-full p-2 border rounded-lg"
+              >
+                <option value="en">영어</option>
+                <option value="ko">한국어</option>
+              </select>
+            </div>
+          </div>
+        </div>
+
+        {/* 녹음 컨트롤 */}
+        <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+          <div className="flex flex-col items-center">
+            <button
+              onClick={toggleRecording}
+              disabled={!isConnected}
+              className={`p-6 rounded-full transition-colors ${
+                isRecording 
+                  ? 'bg-red-500 hover:bg-red-600' 
+                  : 'bg-blue-500 hover:bg-blue-600 disabled:bg-gray-400'
+              } text-white`}
+            >
+              {isRecording ? (
+                <MicOff className="w-8 h-8" />
+              ) : (
+                <Mic className="w-8 h-8" />
+              )}
+            </button>
+            <p className="mt-4 text-sm text-gray-600">
+              {isRecording ? '녹음 중... 클릭하여 중지' : '클릭하여 녹음 시작'}
+            </p>
+          </div>
+        </div>
+
+        {/* 결과 표시 */}
+        <div className="bg-white rounded-lg shadow-md p-6 mb-6">
+          <h3 className="text-lg font-semibold mb-4">번역 결과</h3>
+          
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-2">원본 텍스트</label>
+              <div className="p-4 bg-gray-50 rounded-lg min-h-[80px]">
+                {transcript || <span className="text-gray-400">음성 입력을 기다리는 중...</span>}
+              </div>
+            </div>
+            
+            <div>
+              <label className="block text-sm font-medium mb-2">번역된 텍스트</label>
+              <div className="p-4 bg-blue-50 rounded-lg min-h-[80px]">
+                {translation || <span className="text-gray-400">번역 결과가 여기에 표시됩니다...</span>}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 로그 */}
+        <div className="bg-white rounded-lg shadow-md p-6">
+          <h3 className="text-lg font-semibold mb-4">활동 로그</h3>
+          <div className="h-48 overflow-y-auto bg-gray-50 rounded-lg p-4 text-sm">
+            {logs.length === 0 ? (
+              <p className="text-gray-400">로그가 여기에 표시됩니다...</p>
+            ) : (
+              logs.map((log, index) => (
+                <div
+                  key={index}
+                  className={`mb-2 ${
+                    log.type === 'error' ? 'text-red-600' :
+                    log.type === 'success' ? 'text-green-600' :
+                    log.type === 'warning' ? 'text-yellow-600' :
+                    'text-gray-700'
+                  }`}
+                >
+                  <span className="text-gray-500">[{log.timestamp}]</span> {log.message}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* 오디오 엘리먼트 (숨김) */}
+        <audio ref={audioElRef} autoPlay style={{ display: 'none' }} />
+
+        {/* 사용 안내 */}
+        <div className="mt-6 p-4 bg-yellow-50 rounded-lg">
+          <h4 className="font-semibold text-yellow-800 mb-2">⚠️ 중요 안내</h4>
+          <ul className="text-sm text-yellow-700 space-y-1">
+            <li>• 이 애플리케이션을 사용하려면 서버에서 ephemeral key를 생성하는 엔드포인트가 필요합니다.</li>
+            <li>• OpenAI API 키가 필요하며, 클라이언트 측에서 직접 사용하면 안 됩니다.</li>
+            <li>• 실제 구현 시 주석 처리된 API 연결 코드를 활성화해야 합니다.</li>
+            <li>• 마이크 권한이 필요합니다.</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RealtimeVoiceTranslator;