Hugging Face's logo

Spaces:
jeongsoo
/
RAG6_DockerLLM_API_Service
Paused

App Files Community
RAG6_DockerLLM_API_Service
File size: 8,449 Bytes 
babf3f3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
 
<!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>