templates/knowledge.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RAG 챗봇 - 지식베이스</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- Dropzone.js -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-robot me-2"></i>RAG 챗봇
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/"><i class="fas fa-home me-1"></i>홈</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/chat"><i class="fas fa-comments me-1"></i>채팅</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/knowledge"><i class="fas fa-database me-1"></i>지식베이스</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <div class="row">
            <!-- 문서 업로드 영역 -->
            <div class="col-md-6">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-success text-white">
                        <i class="fas fa-upload me-2"></i>문서 업로드
                    </div>
                    <div class="card-body">
                        <p class="card-text">챗봇에 지식을 제공할 문서를 업로드하세요. 텍스트 기반 문서(TXT, MD, PDF, DOCX, CSV)를 지원합니다.</p>
                        
                        <form id="documentUploadForm" class="dropzone mt-3">
                            <div class="dz-message needsclick">
                                <i class="fas fa-cloud-upload-alt fa-3x mb-3"></i>
                                <h4>여기에 파일을 끌어다 놓거나 클릭하여 선택하세요</h4>
                                <span class="text-muted">최대 10MB, 텍스트 기반 문서 파일만 허용</span>
                            </div>
                        </form>
                        
                        <div class="alert alert-success mt-3 d-none" id="uploadSuccess">
                            <i class="fas fa-check-circle me-2"></i>
                            <span id="uploadSuccessMessage">문서가 성공적으로 업로드되었습니다.</span>
                        </div>
                        
                        <div class="alert alert-danger mt-3 d-none" id="uploadError">
                            <i class="fas fa-exclamation-circle me-2"></i>
                            <span id="uploadErrorMessage">업로드 중 오류가 발생했습니다.</span>
                        </div>
                        
                        <button id="uploadButton" class="btn btn-success mt-3" disabled>
                            <i class="fas fa-upload me-2"></i>업로드
                        </button>
                    </div>
                </div>
                
                <div class="card shadow-sm">
                    <div class="card-header bg-dark text-white">
                        <i class="fas fa-info-circle me-2"></i>사용 안내
                    </div>
                    <div class="card-body">
                        <h5>지원되는 파일 형식</h5>
                        <ul>
                            <li>텍스트 파일 (.txt)</li>
                            <li>마크다운 파일 (.md)</li>
                            <li>PDF 문서 (.pdf)</li>
                            <li>MS Word 문서 (.docx)</li>
                            <li>CSV 데이터 (.csv)</li>
                        </ul>
                        <h5>작동 방식</h5>
                        <p>업로드된 문서는 적절한 크기로 분할되어 임베딩된 후 벡터 데이터베이스에 저장됩니다. 이 데이터는 사용자의 질문에 대한 관련 정보를 검색하는 데 사용됩니다.</p>
                    </div>
                </div>
            </div>
            
            <!-- 현재 지식베이스 상태 -->
            <div class="col-md-6">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-database me-2"></i>지식베이스 상태
                            </div>
                            <div>
                                <button id="refreshStatus" class="btn btn-sm btn-light">
                                    <i class="fas fa-sync-alt me-1"></i>새로고침
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="databaseStats">
                            <div class="d-flex justify-content-center align-items-center" style="height: 100px;">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <i class="fas fa-file-alt me-2"></i>문서 목록
                    </div>
                    <div class="card-body p-0">
                        <div id="documentsContainer">
                            <div class="text-center p-4">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <p class="mt-2">문서 목록을 불러오는 중...</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-white text-center py-3 mt-5">
        <div class="container">
            <p class="mb-0">RAG 챗봇 클라이언트 &copy; 2025</p>
        </div>
    </footer>

    <!-- 문서 항목 템플릿 -->
    <template id="documentItemTemplate">
        <div class="list-group-item">
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center">
                    <i class="fas fa-file-alt me-3 text-primary"></i>
                    <div>
                        <h6 class="mb-0 document-name">문서명</h6>
                        <div class="small text-muted">
                            문서 청크: <span class="document-chunks">0</span> 개
                        </div>
                    </div>
                </div>
                <span class="badge bg-primary document-type">TXT</span>
            </div>
        </div>
    </template>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Dropzone.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
    <!-- 지식베이스 관리 스크립트 -->
    <script src="/static/js/knowledge.js"></script>
</body>
</html>