Hugging Face's logo

Spaces:
jeongsoo
/
RAG6_DockerLLM_API_Service
Paused

App Files Community
RAG6_DockerLLM_API_Service / templates /knowledge.html
jeongsoo's picture
jeongsoo
Add application file
babf3f3
raw
history blame contribute delete
8.45 kB
<!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>