Spaces:

csjjin2002
/

financial-rag-chatbot

Sleeping

File size: 11,891 Bytes

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>금융 RAG 시스템 - 실험 참여</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .main-content {
            padding: 40px;
        }

        .api-key-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
        }

        .api-key-section h3 {
            color: #667eea;
            margin-bottom: 15px;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
        }

        .input-group input {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1em;
            transition: border-color 0.3s;
        }

        .input-group input:focus {
            outline: none;
            border-color: #667eea;
        }

        .question-section {
            margin-bottom: 30px;
        }

        .question-section textarea {
            width: 100%;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1em;
            min-height: 120px;
            resize: vertical;
            font-family: inherit;
        }

        .question-section textarea:focus {
            outline: none;
            border-color: #667eea;
        }

        .examples {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 15px;
        }

        .example-btn {
            padding: 8px 16px;
            background: #e8eaf6;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 0.9em;
        }

        .example-btn:hover {
            background: #667eea;
            color: white;
            transform: translateY(-2px);
        }

        .submit-btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1.1em;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.3s;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
        }

        .submit-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .result-section {
            margin-top: 30px;
            padding: 25px;
            background: #f8f9fa;
            border-radius: 10px;
            display: none;
        }

        .result-section.show {
            display: block;
        }

        .answer {
            background: white;
            padding: 20px;
            border-radius: 8px;
            border-left: 4px solid #667eea;
            line-height: 1.6;
        }

        .loading {
            text-align: center;
            padding: 40px;
        }

        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .error {
            background: #fee;
            color: #c33;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #c33;
        }

        .info-box {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid #2196f3;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>📚 금융 RAG 시스템</h1>
            <p>메타인지 에이전트 기반 금융 질의응답 시스템</p>
        </div>

        <div class="main-content">
            <div class="info-box">
                <strong>🎯 실험 안내:</strong> 이 시스템은 금융/경제 논문을 기반으로 답변을 생성합니다.
                질문을 입력하고 답변을 확인해주세요. (API 키 입력 불필요)
            </div>

            <!-- API 키는 백엔드 서버에서 관리 -->

            <div class="question-section">
                <div class="input-group">
                    <label for="question">💬 질문을 입력하세요</label>
                    <textarea
                        id="question"
                        placeholder="예: 포트폴리오 다각화의 효과는 무엇인가요?"
                    ></textarea>
                </div>

                <div class="examples">
                    <button class="example-btn" onclick="setQuestion('포트폴리오 다각화의 효과는 무엇인가요?')">
                        포트폴리오 다각화
                    </button>
                    <button class="example-btn" onclick="setQuestion('금융위기의 주요 원인은 무엇인가요?')">
                        금융위기 원인
                    </button>
                    <button class="example-btn" onclick="setQuestion('효율적 시장 가설이란 무엇인가요?')">
                        효율적 시장 가설
                    </button>
                    <button class="example-btn" onclick="setQuestion('행동재무학의 주요 개념을 설명해주세요.')">
                        행동재무학
                    </button>
                </div>
            </div>

            <button class="submit-btn" onclick="submitQuestion()" id="submitBtn">
                🚀 질문하기
            </button>

            <div class="result-section" id="resultSection">
                <h3 style="margin-bottom: 15px; color: #667eea;">📝 답변</h3>
                <div id="resultContent"></div>
            </div>
        </div>
    </div>

    <script>
        function setQuestion(text) {
            document.getElementById('question').value = text;
        }

        // 백엔드 API URL
        const API_BASE_URL = 'https://hallucination-and-deception-for.onrender.com';

        async function submitQuestion() {
            const question = document.getElementById('question').value.trim();

            if (!question) {
                alert('질문을 입력해주세요.');
                return;
            }

            const submitBtn = document.getElementById('submitBtn');
            const resultSection = document.getElementById('resultSection');
            const resultContent = document.getElementById('resultContent');

            // 로딩 표시
            submitBtn.disabled = true;
            submitBtn.textContent = '처리 중...';
            resultSection.classList.add('show');
            resultContent.innerHTML = `
                <div class="loading">
                    <div class="spinner"></div>
                    <p style="margin-top: 20px;">답변을 생성하고 있습니다...</p>
                </div>
            `;

            try {
                // 백엔드 API 호출
                const response = await fetch(`${API_BASE_URL}/query`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        question: question,
                        top_k: 5,
                        enable_metacognition: true
                    })
                });

                if (!response.ok) {
                    throw new Error(`API 오류: ${response.status} - 백엔드 서버를 확인해주세요.`);
                }

                const data = await response.json();
                const answer = data.answer;
                const sources = data.sources || [];

                // 결과 표시
                resultContent.innerHTML = `
                    <div class="answer">
                        <h4 style="color: #667eea; margin-bottom: 15px;">📝 답변</h4>
                        <p style="white-space: pre-wrap; line-height: 1.8;">${answer}</p>
                    </div>
                    ${sources.length > 0 ? `
                        <div style="margin-top: 20px; padding: 15px; background: white; border-radius: 8px;">
                            <h4 style="color: #667eea; margin-bottom: 10px;">📚 참고 문서 (${sources.length}개)</h4>
                            ${sources.map((source, i) => `
                                <div style="margin-bottom: 10px; padding: 10px; background: #f8f9fa; border-radius: 5px;">
                                    <strong>[${i + 1}] ${source.title || source.source_filename || 'Unknown'}</strong>
                                    <p style="margin-top: 5px; font-size: 0.9em; color: #666;">${(source.text || source.content || '').substring(0, 200)}...</p>
                                </div>
                            `).join('')}
                        </div>
                    ` : ''}
                    ${data.metacognition ? `
                        <div style="margin-top: 20px; padding: 15px; background: #fff3cd; border-radius: 8px; border-left: 4px solid #ffc107;">
                            <h4 style="color: #856404; margin-bottom: 10px;">🧠 메타인지 분석</h4>
                            <p style="font-size: 0.9em; color: #856404;">
                                <strong>반복 횟수:</strong> ${data.metacognition.iterations || 0}회<br>
                                <strong>최종 점수:</strong> ${data.metacognition.final_score || 0}/10
                            </p>
                        </div>
                    ` : ''}
                `;

            } catch (error) {
                resultContent.innerHTML = `
                    <div class="error">
                        <strong>❌ 오류 발생</strong><br>
                        ${error.message}<br><br>
                        <small>백엔드 서버가 실행 중인지 확인하거나 잠시 후 다시 시도해주세요.</small>
                    </div>
                `;
            } finally {
                submitBtn.disabled = false;
                submitBtn.textContent = '🚀 질문하기';
            }
        }

        // Enter 키로 제출
        document.getElementById('question').addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && e.ctrlKey) {
                submitQuestion();
            }
        });
    </script>
</body>
</html>