app.py

import React, { useState, useRef, useEffect } from 'react';
import { Mic, MicOff, Volume2, Globe, Loader2 } from 'lucide-react';

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

  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);
        
        // 세션 설정
        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'
        }
      });

      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');
        }
        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));
    
    // 응답 생성 요청
    dcRef.current.send(JSON.stringify({ type: 'response.create' }));
  };

  // 녹음 시작/중지
  const toggleRecording = () => {
    if (!isConnected) {
      addLog('먼저 연결을 시작해주세요', 'warning');
      return;
    }

    setIsRecording(!isRecording);
    
    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>
            
            <button
              onClick={swapLanguages}
              className="mt-6 p-2 hover:bg-gray-100 rounded-lg"
            >
              <Globe className="w-6 h-6" />
            </button>
            
            <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;