Spaces:

csjjin2002
/

financial-rag-v2

Runtime error

Claude commited on Nov 17, 2025

Commit

4025749

unverified ·

1 Parent(s): 6026178

Add chatbot UI and fix Content-Length error

주요 변경사항:
- ✅ 챗봇 형태의 웹 UI 추가 (static/chatbot.html)
* 모던한 채팅 인터페이스 디자인
* 질문-답변 형태의 대화형 UI
* 출처 문서 표시 기능
* 메타인지 활성화/비활성화 옵션
* 검색 문서 수 조절 기능

- ✅ Content-Length 오류 수정 (app/api/routes.py)
* JSONResponse를 명시적으로 사용하여 Content-Length 정확히 계산
* response_model 제거하여 직렬화 문제 해결
* HTML UI 제공 엔드포인트 추가 (루트 경로에서 챗봇 UI 제공)

수정된 파일:
- app/api/routes.py: HTML 응답, JSONResponse 추가
- static/chatbot.html: 새 챗봇 UI 파일

Files changed (2) hide show

app/api/routes.py +20 -13
static/chatbot.html +415 -0

app/api/routes.py CHANGED Viewed

@@ -3,7 +3,9 @@ FastAPI 라우트 정의
 """
 from fastapi import APIRouter, HTTPException, status
 from loguru import logger
 from app.api.models import (
     QueryRequest,
@@ -25,18 +27,23 @@ def set_rag_pipeline(pipeline):
     rag_pipeline = pipeline
-@router.get("/", tags=["Root"])
 async def root():
-    """API 루트 엔드포인트"""
-    return {
-        "message": "Financial RAG API with Metacognitive Agent",
-        "version": "1.0.0",
-        "endpoints": {
-            "health": "/health",
-            "query": "/query",
-            "docs": "/docs"
-        }
-    }
 @router.get(
@@ -77,7 +84,6 @@ async def health_check():
 @router.post(
     "/query",
-    response_model=QueryResponse,
     tags=["Query"],
     summary="질문하기",
     description="금융/경제 관련 질문에 대해 RAG 시스템으로 답변 생성"
@@ -111,7 +117,8 @@ async def query(request: QueryRequest):
         logger.info(f"Query processed successfully")
-        return QueryResponse(**result)
     except Exception as e:
         logger.error(f"Query failed: {str(e)}")

 """
 from fastapi import APIRouter, HTTPException, status
+from fastapi.responses import HTMLResponse, JSONResponse
 from loguru import logger
+import os
 from app.api.models import (
     QueryRequest,
     rag_pipeline = pipeline
+@router.get("/", response_class=HTMLResponse, tags=["Root"])
 async def root():
+    """챗봇 UI 제공"""
+    html_path = os.path.join("static", "chatbot.html")
+    try:
+        with open(html_path, "r", encoding="utf-8") as f:
+            return f.read()
+    except FileNotFoundError:
+        return """
+        <html>
+            <body>
+                <h1>Financial RAG API</h1>
+                <p>챗봇 UI 파일을 찾을 수 없습니다.</p>
+                <p>API 문서: <a href="/docs">/docs</a></p>
+            </body>
+        </html>
+        """
 @router.get(
 @router.post(
     "/query",
     tags=["Query"],
     summary="질문하기",
     description="금융/경제 관련 질문에 대해 RAG 시스템으로 답변 생성"
         logger.info(f"Query processed successfully")
+        # JSONResponse로 명시적 반환하여 Content-Length 오류 방지
+        return JSONResponse(content=result)
     except Exception as e:
         logger.error(f"Query failed: {str(e)}")

static/chatbot.html ADDED Viewed

	@@ -0,0 +1,415 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Financial RAG Chatbot</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .chat-container {
+            width: 90%;
+            max-width: 900px;
+            height: 90vh;
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+        }
+        .chat-header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 20px;
+            text-align: center;
+        }
+        .chat-header h1 {
+            font-size: 24px;
+            margin-bottom: 5px;
+        }
+        .chat-header p {
+            font-size: 14px;
+            opacity: 0.9;
+        }
+        .chat-messages {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px;
+            background: #f5f5f5;
+        }
+        .message {
+            margin-bottom: 16px;
+            display: flex;
+            align-items: flex-start;
+        }
+        .message.user {
+            justify-content: flex-end;
+        }
+        .message-content {
+            max-width: 70%;
+            padding: 12px 16px;
+            border-radius: 16px;
+            line-height: 1.5;
+        }
+        .message.user .message-content {
+            background: #667eea;
+            color: white;
+            border-bottom-right-radius: 4px;
+        }
+        .message.assistant .message-content {
+            background: white;
+            color: #333;
+            border-bottom-left-radius: 4px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+        .message-time {
+            font-size: 11px;
+            opacity: 0.6;
+            margin-top: 4px;
+        }
+        .sources {
+            margin-top: 12px;
+            padding: 12px;
+            background: #f9f9f9;
+            border-left: 3px solid #667eea;
+            border-radius: 4px;
+        }
+        .sources-title {
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #667eea;
+            font-size: 13px;
+        }
+        .source-item {
+            font-size: 12px;
+            color: #666;
+            margin-bottom: 4px;
+            padding-left: 12px;
+        }
+        .chat-input-container {
+            padding: 20px;
+            background: white;
+            border-top: 1px solid #e0e0e0;
+        }
+        .chat-input-wrapper {
+            display: flex;
+            gap: 12px;
+        }
+        .chat-input {
+            flex: 1;
+            padding: 12px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 24px;
+            font-size: 14px;
+            outline: none;
+            transition: border-color 0.3s;
+        }
+        .chat-input:focus {
+            border-color: #667eea;
+        }
+        .send-button {
+            padding: 12px 24px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            border-radius: 24px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+        .send-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        }
+        .send-button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .loading {
+            display: flex;
+            gap: 4px;
+            padding: 12px 16px;
+        }
+        .loading-dot {
+            width: 8px;
+            height: 8px;
+            background: #667eea;
+            border-radius: 50%;
+            animation: bounce 1.4s infinite ease-in-out both;
+        }
+        .loading-dot:nth-child(1) {
+            animation-delay: -0.32s;
+        }
+        .loading-dot:nth-child(2) {
+            animation-delay: -0.16s;
+        }
+        @keyframes bounce {
+            0%, 80%, 100% {
+                transform: scale(0);
+            }
+            40% {
+                transform: scale(1);
+            }
+        }
+        .error-message {
+            background: #fee;
+            color: #c33;
+            padding: 12px;
+            border-radius: 8px;
+            margin-top: 8px;
+            font-size: 13px;
+        }
+        .settings {
+            padding: 12px 20px;
+            background: #f9f9f9;
+            border-top: 1px solid #e0e0e0;
+            display: flex;
+            gap: 16px;
+            align-items: center;
+            font-size: 13px;
+        }
+        .settings label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            cursor: pointer;
+        }
+        .settings input[type="checkbox"] {
+            cursor: pointer;
+        }
+        .settings input[type="number"] {
+            width: 60px;
+            padding: 4px 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+    </style>
+</head>
+<body>
+    <div class="chat-container">
+        <div class="chat-header">
+            <h1>💬 Financial RAG Chatbot</h1>
+            <p>금융/경제 논문 기반 AI 챗봇 - Metacognitive Agent</p>
+        </div>
+        <div class="settings">
+            <label>
+                <input type="checkbox" id="metacognition" checked>
+                메타인지 활성화
+            </label>
+            <label>
+                검색 문서 수:
+                <input type="number" id="topK" value="3" min="1" max="10">
+            </label>
+        </div>
+        <div class="chat-messages" id="chatMessages">
+            <div class="message assistant">
+                <div class="message-content">
+                    안녕하세요! 금융/경제 관련 질문에 답변해드리는 AI 챗봇입니다.
+                    무엇이 궁금하신가요?
+                </div>
+            </div>
+        </div>
+        <div class="chat-input-container">
+            <div class="chat-input-wrapper">
+                <input
+                    type="text"
+                    class="chat-input"
+                    id="userInput"
+                    placeholder="질문을 입력하세요..."
+                    onkeypress="handleKeyPress(event)"
+                >
+                <button class="send-button" id="sendButton" onclick="sendMessage()">
+                    전송
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        const chatMessages = document.getElementById('chatMessages');
+        const userInput = document.getElementById('userInput');
+        const sendButton = document.getElementById('sendButton');
+        const metacognitionCheckbox = document.getElementById('metacognition');
+        const topKInput = document.getElementById('topK');
+        function handleKeyPress(event) {
+            if (event.key === 'Enter' && !event.shiftKey) {
+                event.preventDefault();
+                sendMessage();
+            }
+        }
+        function addMessage(content, isUser = false, sources = null, error = null) {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message ${isUser ? 'user' : 'assistant'}`;
+            const contentDiv = document.createElement('div');
+            contentDiv.className = 'message-content';
+            if (error) {
+                contentDiv.innerHTML = content;
+                const errorDiv = document.createElement('div');
+                errorDiv.className = 'error-message';
+                errorDiv.textContent = error;
+                contentDiv.appendChild(errorDiv);
+            } else {
+                contentDiv.textContent = content;
+            }
+            // 출처 정보 추가
+            if (sources && sources.length > 0) {
+                const sourcesDiv = document.createElement('div');
+                sourcesDiv.className = 'sources';
+                const titleDiv = document.createElement('div');
+                titleDiv.className = 'sources-title';
+                titleDiv.textContent = '📚 참고 문서:';
+                sourcesDiv.appendChild(titleDiv);
+                sources.forEach((source, index) => {
+                    const sourceItem = document.createElement('div');
+                    sourceItem.className = 'source-item';
+                    sourceItem.textContent = `${index + 1}. ${source.metadata?.source || 'Unknown'} (페이지 ${source.metadata?.page || 'N/A'})`;
+                    sourcesDiv.appendChild(sourceItem);
+                });
+                contentDiv.appendChild(sourcesDiv);
+            }
+            messageDiv.appendChild(contentDiv);
+            chatMessages.appendChild(messageDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        function showLoading() {
+            const loadingDiv = document.createElement('div');
+            loadingDiv.className = 'message assistant';
+            loadingDiv.id = 'loading';
+            const contentDiv = document.createElement('div');
+            contentDiv.className = 'message-content';
+            const loading = document.createElement('div');
+            loading.className = 'loading';
+            loading.innerHTML = '<div class="loading-dot"></div><div class="loading-dot"></div><div class="loading-dot"></div>';
+            contentDiv.appendChild(loading);
+            loadingDiv.appendChild(contentDiv);
+            chatMessages.appendChild(loadingDiv);
+            chatMessages.scrollTop = chatMessages.scrollHeight;
+        }
+        function hideLoading() {
+            const loading = document.getElementById('loading');
+            if (loading) {
+                loading.remove();
+            }
+        }
+        async function sendMessage() {
+            const message = userInput.value.trim();
+            if (!message) return;
+            // 사용자 메시지 추가
+            addMessage(message, true);
+            userInput.value = '';
+            // UI 비활성화
+            sendButton.disabled = true;
+            userInput.disabled = true;
+            // 로딩 표시
+            showLoading();
+            try {
+                const response = await fetch('/query', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        question: message,
+                        top_k: parseInt(topKInput.value),
+                        enable_metacognition: metacognitionCheckbox.checked
+                    })
+                });
+                hideLoading();
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.detail || 'API 오류가 발생했습니다.');
+                }
+                const data = await response.json();
+                // 봇 응답 추가
+                addMessage(data.answer, false, data.sources);
+            } catch (error) {
+                hideLoading();
+                addMessage('죄송합니다. 오류가 발생했습니다.', false, null, error.message);
+                console.error('Error:', error);
+            } finally {
+                // UI 활성화
+                sendButton.disabled = false;
+                userInput.disabled = false;
+                userInput.focus();
+            }
+        }
+        // 페이지 로드 시 입력창에 포커스
+        window.onload = () => {
+            userInput.focus();
+        };
+    </script>
+</body>
+</html>