test_enhanced_rag.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced RAG API 테스트</title>
    <style>
        body {
            font-family: 'Malgun Gothic', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border-left: 5px solid #667eea;
            background: #f8f9ff;
            border-radius: 10px;
        }
        .section h2 {
            color: #667eea;
            margin-top: 0;
            font-size: 1.5em;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #333;
        }
        input, textarea, select {
            width: 100%;
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            box-sizing: border-box;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        input:focus, textarea:focus, select:focus {
            border-color: #667eea;
            outline: none;
            box-shadow: 0 0 5px rgba(102, 126, 234, 0.3);
        }
        textarea {
            height: 80px;
            resize: vertical;
        }
        button {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
            font-weight: bold;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        .response {
            background: #1a1a1a;
            color: #00ff00;
            padding: 15px;
            margin-top: 15px;
            border-radius: 8px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
        }
        .success {
            border: 2px solid #28a745;
            background-color: #d4edda;
            color: #155724;
        }
        .error {
            border: 2px solid #dc3545;
            background-color: #f8d7da;
            color: #721c24;
        }
        .world-type-selector {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }
        .world-chip {
            padding: 8px 16px;
            border: 2px solid #ddd;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
            background: white;
        }
        .world-chip:hover {
            transform: scale(1.05);
        }
        .world-chip.selected {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-color: #667eea;
        }
        .chat-container {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
        }
        .message {
            margin-bottom: 15px;
            padding: 10px 15px;
            border-radius: 10px;
            max-width: 80%;
        }
        .user-message {
            background: #007bff;
            color: white;
            margin-left: auto;
        }
        .ai-message {
            background: white;
            border: 2px solid #e9ecef;
            margin-right: auto;
        }
        .source-info {
            margin-top: 10px;
            padding: 10px;
            background: #e3f2fd;
            border-radius: 5px;
            font-size: 12px;
        }
        .tag {
            display: inline-block;
            background: #6c757d;
            color: white;
            padding: 2px 6px;
            border-radius: 3px;
            font-size: 10px;
            margin: 2px;
        }
        .upload-area {
            border: 2px dashed #667eea;
            padding: 20px;
            text-align: center;
            border-radius: 10px;
            background: #f8f9ff;
            transition: all 0.3s;
        }
        .upload-area:hover {
            background: #e3f2fd;
            border-color: #764ba2;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🤖 Enhanced RAG API 테스트</h1>

        <!-- 서버 상태 확인 -->
        <div class="section">
            <h2>🏥 서버 상태</h2>
            <button onclick="checkServerHealth()">서버 상태 확인</button>
            <button onclick="getWorldTypes()">세계관 목록 조회</button>
            <div id="healthResponse" class="response"></div>
        </div>

        <!-- 문서 업로드 -->
        <div class="section">
            <h2>📁 문서 업로드</h2>
            <div class="upload-area" onclick="document.getElementById('fileInput').click()">
                <input type="file" id="fileInput" accept=".txt,.md,.csv" style="display: none;" onchange="handleFileSelect()">
                <p>📁 클릭하여 파일 선택 또는 드래그 앤 드롭</p>
                <p id="selectedFileName" style="color: #667eea; font-weight: bold;"></p>
            </div>
            
            <div class="form-group">
                <label>세계관 (자동 감지 무시 시):</label>
                <select id="uploadWorldType">
                    <option value="">자동 감지</option>
                    <option value="FANTASY">판타지</option>
                    <option value="SF">SF</option>
                    <option value="MODERN">현대</option>
                    <option value="CYBERPUNK">사이버펑크</option>
                    <option value="HORROR">호러</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>문서 타입 (자동 감지 무시 시):</label>
                <select id="uploadDocType">
                    <option value="">자동 감지</option>
                    <option value="npc">NPC</option>
                    <option value="location">장소</option>
                    <option value="item">아이템</option>
                    <option value="quest">퀘스트</option>
                    <option value="rule">규칙</option>
                    <option value="lore">배경설정</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>추가 태그 (쉼표로 구분):</label>
                <input type="text" id="userTags" placeholder="친절한, 정보제공자, 여관주인">
            </div>
            
            <button onclick="uploadDocument()">📤 문서 업로드</button>
            <div id="uploadResponse" class="response"></div>
        </div>

        <!-- 문서 재스캔 -->
        <div class="section">
            <h2>🔄 문서 재스캔</h2>
            <button onclick="rescanDocuments()">📂 documents 폴더 재스캔</button>
            <div id="rescanResponse" class="response"></div>
        </div>

        <!-- Enhanced AI 채팅 -->
        <div class="section">
            <h2>💬 Enhanced AI 채팅 테스트</h2>
            
            <div class="form-group">
                <label>세계관 선택:</label>
                <div class="world-type-selector">
                    <div class="world-chip selected" data-world="FANTASY">🏰 판타지</div>
                    <div class="world-chip" data-world="SF">🚀 SF</div>
                    <div class="world-chip" data-world="MODERN">🏙️ 현대</div>
                    <div class="world-chip" data-world="CYBERPUNK">🤖 사이버펑크</div>
                    <div class="world-chip" data-world="HORROR">👻 호러</div>
                </div>
            </div>

            <div class="form-group">
                <label>사용자 이름:</label>
                <input type="text" id="userName" value="테스트유저" placeholder="사용자 이름">
            </div>

            <div class="form-group">
                <label>메시지:</label>
                <textarea id="userMessage" placeholder="마을에서 정보를 수집하고 싶습니다."></textarea>
            </div>

            <div class="form-group">
                <label>게임 설정 (선택사항):</label>
                <textarea id="gameSettings" placeholder="중세 판타지 세계관에서 펼쳐지는 모험..."></textarea>
            </div>

            <button onclick="sendEnhancedMessage()">🚀 Enhanced AI에게 질문하기</button>
            
            <div class="chat-container">
                <div id="chatHistory"></div>
            </div>
        </div>
    </div>

    <script>
        const BASE_URL = 'http://localhost:8001';
        let selectedWorldType = 'FANTASY';
        let chatHistory = [];

        // 세계관 선택 이벤트
        document.querySelectorAll('.world-chip').forEach(chip => {
            chip.addEventListener('click', () => {
                document.querySelectorAll('.world-chip').forEach(c => c.classList.remove('selected'));
                chip.classList.add('selected');
                selectedWorldType = chip.dataset.world;
                console.log('선택된 세계관:', selectedWorldType);
            });
        });

        // 파일 선택 처리
        function handleFileSelect() {
            const fileInput = document.getElementById('fileInput');
            const fileName = document.getElementById('selectedFileName');
            if (fileInput.files.length > 0) {
                fileName.textContent = `선택된 파일: ${fileInput.files[0].name}`;
            }
        }

        // 드래그 앤 드롭 지원
        const uploadArea = document.querySelector('.upload-area');
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.style.background = '#e3f2fd';
        });
        
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.style.background = '#f8f9ff';
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.style.background = '#f8f9ff';
            const files = e.dataTransfer.files;
            if (files.length > 0) {
                document.getElementById('fileInput').files = files;
                handleFileSelect();
            }
        });

        async function makeRequest(url, options = {}) {
            try {
                const response = await fetch(BASE_URL + url, {
                    ...options,
                    headers: {
                        'Content-Type': 'application/json',
                        ...options.headers
                    }
                });
                
                const data = await response.text();
                return {
                    status: response.status,
                    data: data,
                    ok: response.ok
                };
            } catch (error) {
                return {
                    status: 0,
                    data: `Network Error: ${error.message}`,
                    ok: false
                };
            }
        }

        function displayResponse(elementId, response) {
            const element = document.getElementById(elementId);
            element.textContent = `Status: ${response.status}\n\n${response.data}`;
            element.className = `response ${response.ok ? 'success' : 'error'}`;
        }

        async function checkServerHealth() {
            const response = await makeRequest('/health');
            displayResponse('healthResponse', response);
        }

        async function getWorldTypes() {
            const response = await makeRequest('/world-types');
            displayResponse('healthResponse', response);
        }

        async function uploadDocument() {
            const fileInput = document.getElementById('fileInput');
            if (!fileInput.files.length) {
                alert('파일을 선택해주세요.');
                return;
            }

            const formData = new FormData();
            formData.append('file', fileInput.files[0]);
            
            const worldType = document.getElementById('uploadWorldType').value;
            const docType = document.getElementById('uploadDocType').value;
            const userTags = document.getElementById('userTags').value;

            if (worldType) formData.append('world_type', worldType);
            if (docType) formData.append('doc_type', docType);
            if (userTags) formData.append('user_tags', userTags);

            try {
                const response = await fetch(BASE_URL + '/upload-document', {
                    method: 'POST',
                    body: formData
                });

                const data = await response.text();
                displayResponse('uploadResponse', {
                    status: response.status,
                    data: data,
                    ok: response.ok
                });

                if (response.ok) {
                    // 파일 선택 초기화
                    fileInput.value = '';
                    document.getElementById('selectedFileName').textContent = '';
                }
            } catch (error) {
                displayResponse('uploadResponse', {
                    status: 0,
                    data: `Upload Error: ${error.message}`,
                    ok: false
                });
            }
        }

        async function rescanDocuments() {
            const response = await makeRequest('/rescan-documents', { method: 'POST' });
            displayResponse('rescanResponse', response);
        }

        async function sendEnhancedMessage() {
            const userName = document.getElementById('userName').value || '테스트유저';
            const message = document.getElementById('userMessage').value;
            const gameSettings = document.getElementById('gameSettings').value;

            if (!message.trim()) {
                alert('메시지를 입력해주세요.');
                return;
            }

            // 채팅 히스토리에 사용자 메시지 추가
            chatHistory.push({
                messageType: 'USER',
                senderNickname: userName,
                content: message,
                turnNumber: chatHistory.length + 1,
                messageOrder: 1
            });

            updateChatDisplay();

            const requestData = {
                game_id: 'test-game-001',
                ai_game_room_id: 'test-room-001',
                current_user: userName,
                current_message: message,
                context_messages: chatHistory.slice(-10), // 최근 10개 메시지만
                turn_number: Math.floor(chatHistory.length / 2) + 1,
                game_settings: gameSettings || `${selectedWorldType} 세계관 TRPG 게임`,
                world_type: selectedWorldType,
                doc_types: null
            };

            try {
                const response = await makeRequest('/ai-response-enhanced', {
                    method: 'POST',
                    body: JSON.stringify(requestData)
                });

                if (response.ok) {
                    const result = JSON.parse(response.data);
                    
                    // AI 응답을 채팅 히스토리에 추가
                    chatHistory.push({
                        messageType: 'AI',
                        senderNickname: 'GM',
                        content: result.content,
                        turnNumber: chatHistory.length,
                        messageOrder: 1,
                        sources: result.sources || [],
                        world_type: result.world_type,
                        response_time: result.response_time
                    });

                    updateChatDisplay();

                    // 입력 필드 클리어
                    document.getElementById('userMessage').value = '';
                } else {
                    alert(`AI 응답 생성 실패: ${response.data}`);
                }
            } catch (error) {
                alert(`요청 처리 중 오류: ${error.message}`);
            }
        }

        function updateChatDisplay() {
            const chatContainer = document.getElementById('chatHistory');
            chatContainer.innerHTML = '';

            chatHistory.forEach((msg, index) => {
                const messageDiv = document.createElement('div');
                messageDiv.className = `message ${msg.messageType === 'USER' ? 'user-message' : 'ai-message'}`;
                
                let messageContent = `<strong>${msg.senderNickname}:</strong><br>${msg.content}`;
                
                // AI 메시지에 추가 정보 표시
                if (msg.messageType === 'AI' && msg.sources) {
                    const sourceInfo = document.createElement('div');
                    sourceInfo.className = 'source-info';
                    
                    let sourceText = `<strong>응답 시간:</strong> ${msg.response_time}ms<br>`;
                    sourceText += `<strong>세계관:</strong> ${msg.world_type}<br>`;
                    
                    if (msg.sources.length > 0) {
                        sourceText += `<strong>참조 문서:</strong><br>`;
                        msg.sources.forEach((source, i) => {
                            sourceText += `${i+1}. ${source.filename} (${source.doc_type})<br>`;
                            sourceText += `   └── "${source.content}"<br>`;
                            if (source.auto_tags && source.auto_tags.length > 0) {
                                sourceText += `   └── 태그: `;
                                source.auto_tags.forEach(tag => {
                                    sourceText += `<span class="tag">${tag}</span>`;
                                });
                                sourceText += `<br>`;
                            }
                        });
                    }
                    
                    sourceInfo.innerHTML = sourceText;
                    messageContent += sourceInfo.outerHTML;
                }
                
                messageDiv.innerHTML = messageContent;
                chatContainer.appendChild(messageDiv);
            });

            // 스크롤을 맨 아래로
            chatContainer.scrollTop = chatContainer.scrollHeight;
        }

        // 페이지 로드 시 서버 상태 확인
        window.onload = function() {
            checkServerHealth();
        };
    </script>
</body>
</html>